@mx-cartographer/experiences 8.0.0-alpha.bb4 → 8.0.0-alpha.sms1

package/dist/budgets/index.es.js

@@ -1,91 +1,92 @@
-import { jsxs as g, jsx as e, Fragment as Pe } from "react/jsx-runtime";
+import { jsxs as g, jsx as e, Fragment as Ge } from "react/jsx-runtime";
 import c from "react";
 import { observer as E } from "mobx-react-lite";
 import { endOfMonth as me } from "date-fns/endOfMonth";
-import { startOfMonth as Q } from "date-fns/startOfMonth";
+import { startOfMonth as J } from "date-fns/startOfMonth";
 import F from "@mui/material/Box";
 import B from "@mui/material/Stack";
-import { useTheme as H } from "@mui/material/styles";
-import { Text as y, CategoryIcon as W, Icon as G, H1 as je, H3 as Ae } from "@mxenabled/mxui";
-import K from "@mui/material/List";
-import { u as w, i as D, j as te, m as V, q as ne, g as Y, b as oe, d as pe, h as ae, a as ze, n as Ue } from "../hooks-C41HAxM5.mjs";
+import ee from "@mui/material/styles/useTheme";
+import { Text as y, CategoryIcon as H, Icon as P, H1 as je, H3 as Ae } from "@mxenabled/mxui";
+import W from "@mui/material/List";
+import { u as w, i as D, j as te, m as K, q as ne, g as X, b as oe, d as pe, h as ae, a as ze, n as Ue } from "../hooks-C41HAxM5.mjs";
 import { f as T } from "../NumberFormatting-DjTD0t3W.mjs";
 import Te from "@mui/material/Button";
 import re from "@mui/material/Divider";
-import X from "@mui/material/ListItem";
+import V from "@mui/material/ListItem";
 import se from "@mui/material/ListItemAvatar";
-import Z from "@mui/material/ListItemButton";
-import q from "@mui/material/ListItemText";
+import Y from "@mui/material/ListItemButton";
+import Z from "@mui/material/ListItemText";
 import { b as R } from "../Localization-2MODESHW.mjs";
-import { D as L } from "../Drawer-BF40nbsH.mjs";
+import { D as L } from "../Drawer-BEtCk82g.mjs";
 import Fe from "@mui/material/ListItemSecondaryAction";
-import { C as He } from "../CurrencyInput-D1cjbdCI.mjs";
-import { D as j } from "../Dialog-CDV0kKxj.mjs";
-import { C as We } from "../ConnectionsDrawer-Dsc04-4Z.mjs";
+import { C as He } from "../CurrencyInput-BFKcs-_K.mjs";
+import { D as j } from "../Dialog-BPTr3qHE.mjs";
+import { C as We } from "../ConnectionsDrawer-BFfY3_zB.mjs";
 import * as O from "d3";
 import Ke from "@mui/material/Tooltip";
-import { L as he } from "../Loader-Ckqi9Rx6.mjs";
-import { u as ie } from "../useScreenSize-B5afALev.mjs";
+import { useTheme as Xe } from "@mui/material/styles";
+import { u as ie } from "../useScreenSize-B6JyS_Lj.mjs";
+import { L as he } from "../Loader-DUaFpDGv.mjs";
 import { E as de } from "../EmptyState-DoxNUae-.mjs";
-import { A as k, W as Ve } from "../WidgetContainer-CDh9fjpR.mjs";
-import { u as Ye } from "../BudgetUtil-Jv8h9H9l.mjs";
-import { M as Xe } from "../MiniWidgetContainer-CKzf_Ira.mjs";
-import { isAfter as Ze } from "date-fns/isAfter";
-import { startOfToday as J } from "date-fns/startOfToday";
-import qe from "@mui/material/Alert";
-import Je from "@mui/material/Snackbar";
+import { A as k, W as Ve } from "../WidgetContainer-BhQ1Kx2z.mjs";
+import { u as Ye } from "../BudgetUtil-Df2nII9u.mjs";
+import { M as Ze } from "../MiniWidgetContainer-CmXpTylX.mjs";
+import { isAfter as qe } from "date-fns/isAfter";
+import { startOfToday as q } from "date-fns/startOfToday";
+import Je from "@mui/material/Alert";
+import Qe from "@mui/material/Snackbar";
 import Ce from "@mui/material/Tab";
-import Qe from "@mui/material/Tabs";
-import { e as et } from "../exportTransactionsToCSV-BgV_wTLT.mjs";
-import { T as we, a as tt } from "../TransactionDetails-Bn0qY5Hw.mjs";
-import be from "@mui/material/Card";
-import fe from "@mui/material/CardContent";
-import { S as ge } from "../StatusBar-CPfSXe80.mjs";
-import { S as De } from "../SingleSegmentDonut-7Uy6VEld.mjs";
-import { u as nt, b as ot } from "../CategorySelectorDrawer-Dl006GKy.mjs";
+import et from "@mui/material/Tabs";
+import { e as tt } from "../exportTransactionsToCSV-Cz2t0lmA.mjs";
+import { T as we, a as nt } from "../TransactionDetails-5M2vfr59.mjs";
+import fe from "@mui/material/Card";
+import be from "@mui/material/CardContent";
+import { S as ge } from "../StatusBar-BK_uYHAB.mjs";
+import { S as De } from "../SingleSegmentDonut-BgbLgwHi.mjs";
+import { u as ot, b as at } from "../CategorySelectorDrawer-DqJK_rrL.mjs";
 import Ee from "@mui/material/CardHeader";
-import { subDays as at } from "date-fns/subDays";
-import rt from "@mui/material/IconButton";
-import { M as st } from "../ManageIncome-8EsStyIQ.mjs";
-const it = E(() => {
+import { subDays as rt } from "date-fns/subDays";
+import st from "@mui/material/IconButton";
+import { M as it } from "../ManageIncome-NpXHhO1n.mjs";
+const ct = E(() => {
   const { budgets: t } = w(), { totalBudgeted: o } = D(), { incomeTotal: i } = te(), s = i - o;
   return /* @__PURE__ */ g(B, { direction: "row", justifyContent: "center", my: 16, spacing: 20, children: [
     /* @__PURE__ */ g(B, { alignItems: "center", children: [
-      /* @__PURE__ */ e(y, { bold: !0, variant: "body1", children: T(i, "0,0") }),
-      /* @__PURE__ */ e(y, { color: "secondary", variant: "body2", children: t.projected_income })
+      /* @__PURE__ */ e(y, { bold: !0, variant: "Body", children: T(i, "0,0") }),
+      /* @__PURE__ */ e(y, { color: "secondary", variant: "Small", children: t.projected_income })
     ] }),
-    /* @__PURE__ */ e(y, { bold: !0, justifyContent: "center", variant: "body1", children: "-" }),
+    /* @__PURE__ */ e(y, { bold: !0, justifyContent: "center", variant: "Body", children: "-" }),
     /* @__PURE__ */ g(B, { alignItems: "center", children: [
-      /* @__PURE__ */ e(y, { bold: !0, variant: "body1", children: T(o, "0,0") }),
-      /* @__PURE__ */ e(y, { color: "secondary", variant: "body2", children: t.budgeted })
+      /* @__PURE__ */ e(y, { bold: !0, variant: "Body", children: T(o, "0,0") }),
+      /* @__PURE__ */ e(y, { color: "secondary", variant: "Small", children: t.budgeted })
     ] }),
-    /* @__PURE__ */ e(y, { bold: !0, justifyContent: "center", variant: "body1", children: "=" }),
+    /* @__PURE__ */ e(y, { bold: !0, justifyContent: "center", variant: "Body", children: "=" }),
     /* @__PURE__ */ g(B, { alignItems: "center", children: [
-      /* @__PURE__ */ e(y, { bold: !0, variant: "body1", children: T(s, "0,0") }),
-      /* @__PURE__ */ e(y, { color: "secondary", variant: "body2", children: t.remaining })
+      /* @__PURE__ */ e(y, { bold: !0, variant: "Body", children: T(s, "0,0") }),
+      /* @__PURE__ */ e(y, { color: "secondary", variant: "Small", children: t.remaining })
     ] })
   ] });
-}), ct = E(
+}), lt = E(
   ({ category: t }) => {
     const { budgets: o } = w(), { budgets: i } = D(), s = c.useMemo(() => {
       const a = i.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, i]);
     return /* @__PURE__ */ g(c.Fragment, { children: [
-      /* @__PURE__ */ e(X, { children: /* @__PURE__ */ g(Z, { children: [
-        /* @__PURE__ */ e(se, { children: /* @__PURE__ */ e(W, { categoryGuid: t.guid, variant: "filled" }) }),
-        /* @__PURE__ */ e(q, { primary: t.name, secondary: s })
+      /* @__PURE__ */ e(V, { children: /* @__PURE__ */ g(Y, { children: [
+        /* @__PURE__ */ e(se, { children: /* @__PURE__ */ e(H, { categoryGuid: t.guid, variant: "filled" }) }),
+        /* @__PURE__ */ e(Z, { primary: t.name, secondary: s })
       ] }) }),
       /* @__PURE__ */ e(re, {})
     ] }, t.guid);
   }
-), lt = ({ onRecalculateBudgets: t }) => {
-  const { budgets: o, common: i } = w(), { spendCategories: s } = V(), { recalculateBudgets: a, setAlert: n } = D(), [r, l] = c.useState(!1), d = s.filter((u) => u.totalAverageAmount > 0), m = async () => {
+), dt = ({ onRecalculateBudgets: t }) => {
+  const { budgets: o, common: i } = w(), { spendCategories: s } = K(), { recalculateBudgets: a, setAlert: n } = D(), [r, l] = c.useState(!1), d = s.filter((u) => u.totalAverageAmount > 0), m = async () => {
     await a(d), l(!1), n(o.alert_recalculated_budgets), t?.();
   };
   return /* @__PURE__ */ g(c.Fragment, { children: [
     /* @__PURE__ */ e(Te, { onClick: () => l(!0), sx: { mt: 24, mx: 24 }, variant: "text", children: o.recalculate_button }),
-    /* @__PURE__ */ e(y, { sx: { mx: 24, my: 16, textAlign: "center", whiteSpace: "wrap" }, variant: "subtitle1", children: o.recalculate_help }),
+    /* @__PURE__ */ e(y, { sx: { mx: 24, my: 16, textAlign: "center", whiteSpace: "wrap" }, variant: "Paragraph", children: o.recalculate_help }),
     /* @__PURE__ */ e(
       L,
       {
@@ -96,10 +97,10 @@ const it = E(() => {
         title: o.recalculate_title,
         children: /* @__PURE__ */ g(B, { children: [
           /* @__PURE__ */ g(B, { mx: 24, my: 16, children: [
-            /* @__PURE__ */ e(y, { bold: !0, variant: "body1", children: o.recalculate_description_top }),
-            /* @__PURE__ */ e(y, { variant: "subtitle2", children: o.recalculate_description_bottom })
+            /* @__PURE__ */ e(y, { bold: !0, variant: "Body", children: o.recalculate_description_top }),
+            /* @__PURE__ */ e(y, { variant: "ParagraphSmall", children: o.recalculate_description_bottom })
           ] }),
-          /* @__PURE__ */ e(F, { bgcolor: "background.paper", children: /* @__PURE__ */ e(K, { children: d.map((u) => /* @__PURE__ */ e(ct, { category: u }, u.guid)) }) })
+          /* @__PURE__ */ e(F, { bgcolor: "background.paper", children: /* @__PURE__ */ e(W, { children: d.map((u) => /* @__PURE__ */ e(lt, { category: u }, u.guid)) }) })
         ] })
       }
     )
@@ -126,25 +127,25 @@ const it = E(() => {
         label: s.add_label,
         minAmount: 0,
         setAmount: i,
-        sx: { ".MuiTypography-body1": { p: 0 } }
+        sx: { ".MuiTypography-Body": { p: 0 } }
       }
     )
   ] });
-}, dt = E(({ category: t, onAddBudget: o }) => {
+}, ut = E(({ category: t, onAddBudget: o }) => {
   const { budgets: i, common: s } = w(), [a, n] = c.useState(!1), [r, l] = c.useState(
     `${t.totalAmount === 0 ? "" : t.totalAmount}`
   );
   return /* @__PURE__ */ g(c.Fragment, { children: [
-    /* @__PURE__ */ e(X, { children: /* @__PURE__ */ g(Z, { onClick: () => n(!0), children: [
-      /* @__PURE__ */ e(se, { children: /* @__PURE__ */ e(W, { categoryGuid: t.guid }) }),
+    /* @__PURE__ */ e(V, { children: /* @__PURE__ */ g(Y, { onClick: () => n(!0), children: [
+      /* @__PURE__ */ e(se, { children: /* @__PURE__ */ e(H, { categoryGuid: t.guid }) }),
       /* @__PURE__ */ e(
-        q,
+        Z,
         {
           primary: t.name,
           secondary: T(t.totalAmount, "0,0")
         }
       ),
-      /* @__PURE__ */ e(Fe, { children: /* @__PURE__ */ e(G, { name: "add", size: 20 }) })
+      /* @__PURE__ */ e(Fe, { children: /* @__PURE__ */ e(P, { name: "add", size: 20 }) })
     ] }) }, t.guid),
     /* @__PURE__ */ e(
       j,
@@ -164,18 +165,18 @@ const it = E(() => {
     await i(r, l), s(R(o.alert_budget_created, r.name));
   };
   return /* @__PURE__ */ g(B, { children: [
-    /* @__PURE__ */ e(it, {}),
-    /* @__PURE__ */ e(F, { bgcolor: "background.paper", children: /* @__PURE__ */ e(K, { children: a.map((r) => /* @__PURE__ */ e(
-      dt,
+    /* @__PURE__ */ e(ct, {}),
+    /* @__PURE__ */ e(F, { bgcolor: "background.paper", children: /* @__PURE__ */ e(W, { children: a.map((r) => /* @__PURE__ */ e(
+      ut,
       {
         category: r,
         onAddBudget: n
       },
       r.guid
     )) }) }),
-    /* @__PURE__ */ e(lt, { onRecalculateBudgets: t })
+    /* @__PURE__ */ e(dt, { onRecalculateBudgets: t })
   ] });
-}), Be = 5, Oe = 100, ee = 25, ut = (t) => {
+}), Be = 5, Oe = 100, Q = 25, mt = (t) => {
   const o = (a) => {
     a.active || t.alphaTarget(0.3).restart(), a.subject.fx = a.subject.x, a.subject.fy = a.subject.y;
   }, i = (a) => {
@@ -184,14 +185,14 @@ const it = E(() => {
     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);
-}, mt = (t) => {
+}, gt = (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), a = O.arc().cornerRadius(5).innerRadius(t.radius - Be * 2).outerRadius(t.radius - Be).startAngle(0).endAngle(0);
   return (n) => (a.endAngle(s(n)), a(t) || "");
-}, gt = (t) => {
-  O.selectAll(".bubble").call(ut(t));
-}, Se = (t, o, i) => Math.min(Math.max(t, o), i), pt = (t, o, i) => {
+}, pt = (t) => {
+  O.selectAll(".bubble").call(mt(t));
+}, Se = (t, o, i) => Math.min(Math.max(t, o), i), ht = (t, o, i) => {
   t.alpha(1).restart().force(
     "x",
     O.forceX().x(i / 2).strength(0.01)
@@ -201,11 +202,11 @@ const it = E(() => {
   ).on("tick", () => {
     const s = t.nodes();
     s.forEach((a) => {
-      const n = a.radius ?? ee;
+      const n = a.radius ?? Q;
       a.x = Se(a.x ?? 0, n, i - n), a.y = Se(a.y ?? 0, n, o - n);
     }), O.selectAll(".bubble").data(s).attr("transform", (a) => `translate(${a.x},${a.y})`);
   });
-}, Me = (t, o) => O.scaleLinear().domain([t, o]).range([ee, Oe]), ht = (t) => {
+}, Me = (t, o) => O.scaleLinear().domain([t, o]).range([Q, Oe]), ft = (t) => {
   const o = t.reduce((n, r) => {
     const l = Math.max(r.transaction_total, r.amount);
     return l > n ? l : n;
@@ -221,24 +222,24 @@ const it = E(() => {
   });
   return O.forceSimulation(a).velocityDecay(0.05).force("collide", O.forceCollide((n) => n.radius + 2).strength(0.7));
 }, bt = (t, o, i) => {
-  const a = Math.PI * ee ** 2 * t, n = i < 400 || o < 300, r = n ? 40 : 20, l = Math.max(100, i - r), d = Math.max(100, o - r), m = l * d;
-  let u = ee;
+  const a = Math.PI * Q ** 2 * t, n = i < 400 || o < 300, r = n ? 40 : 20, l = Math.max(100, i - r), d = Math.max(100, o - r), m = l * d;
+  let u = Q;
   if (a < m) {
     const h = Math.sqrt(m / (t * Math.PI)), p = Math.min(l, d) / 4;
     u = Math.min(Oe, h, p);
   }
   return n && t <= 3 && (u = Math.min(u, 45)), { minRadius: Math.max(20, u * 0.6), maxRadius: u };
-}, ft = (t, o, i, s, a) => {
+}, yt = (t, o, i, s, a) => {
   const { maxRadius: n, minRadius: r } = bt(t, o, a);
   return O.scaleLinear().domain([s, i]).range([r, n]);
-}, yt = (t, o, i = !1, s, a) => {
-  const n = o.map((m) => Math.max(m.transaction_total, m.amount)), r = Math.min(...n), l = Math.max(...n), d = i ? ft(t.length, s, l, r, a) : Me(r, l);
+}, _t = (t, o, i = !1, s, a) => {
+  const n = o.map((m) => Math.max(m.transaction_total, m.amount)), r = Math.min(...n), l = Math.max(...n), d = i ? yt(t.length, s, l, r, a) : Me(r, l);
   return t.map((m) => ({
     ...m,
     radius: d(Math.max(m.transaction_total, m.amount))
   }));
-}, xe = 5, _t = 2e3, Ct = ({ bubble: t }) => {
-  const o = H(), {
+}, xe = 5, Ct = 2e3, Bt = ({ bubble: t }) => {
+  const o = ee(), {
     amount: i,
     guid: s,
     budgetColors: { mercury: a },
@@ -246,7 +247,7 @@ const it = E(() => {
     transaction_total: r
   } = t, l = `mercury-${s}`;
   c.useEffect(() => {
-    O.select(`.${l}`).selectAll(".status").remove(), O.select(`.${l}`).append("path").transition().duration(_t).delay(0).attr("class", "status").attr("style", `fill: ${a}; fill-opacity: 1;`).attrTween("d", () => mt(t));
+    O.select(`.${l}`).selectAll(".status").remove(), O.select(`.${l}`).append("path").transition().duration(Ct).delay(0).attr("class", "status").attr("style", `fill: ${a}; fill-opacity: 1;`).attrTween("d", () => gt(t));
   }, [i, n, r]);
   const d = O.arc().innerRadius((m) => m - 2 * xe).outerRadius((m) => m - xe).startAngle(0).endAngle(2 * Math.PI);
   return /* @__PURE__ */ e("g", { className: l, children: /* @__PURE__ */ e(
@@ -256,10 +257,10 @@ const it = E(() => {
       style: { fill: o.palette.common.white, fillOpacity: 0.35 }
     }
   ) });
-}, Bt = c.memo(Ct), P = 75, ue = 50;
-function St({ bubble: t, isDraggable: o, onClick: i = () => {
+}, St = c.memo(Bt), G = 75, ue = 50;
+function xt({ bubble: t, isDraggable: o, onClick: i = () => {
 } }) {
-  const [s, a] = c.useState(!1), n = H(), { availableWidth: r } = ne(), l = c.useMemo(() => {
+  const [s, a] = c.useState(!1), n = Xe(), { availableWidth: r } = ne(), l = c.useMemo(() => {
     if (t)
       return {
         amount: t.amount,
@@ -275,14 +276,14 @@ function St({ bubble: t, isDraggable: o, onClick: i = () => {
     category: { icon: u, name: C },
     guid: h,
     description: p,
-    radius: b,
+    radius: f,
     x: S,
     y: _
-  } = t, f = r < 400 ? -8 : -12;
-  let A = f, v = f;
-  b > P ? (A = -14, v = -45) : b > ue && (v = -32);
+  } = t, b = r < 400 ? -8 : -12;
+  let A = b, v = b;
+  f > G ? (A = -14, v = -45) : f > ue && (v = -32);
   let x = 32;
-  b <= P && (x = r < 400 ? 16 : 24);
+  f <= G && (x = r < 400 ? 16 : 24);
   const I = `${t.category.name}: ${p}`, M = {
     modifiers: [
       {
@@ -290,11 +291,11 @@ function St({ bubble: t, isDraggable: o, onClick: i = () => {
         options: { offset: [0, 15] }
       }
     ]
-  }, N = (U) => {
+  }, $ = (U) => {
     (U.key === "Enter" || U.key === " ") && (U.preventDefault(), i(t));
   }, z = () => {
     a(!0);
-  }, $ = () => {
+  }, N = () => {
     a(!1);
   };
   return /* @__PURE__ */ g(
@@ -303,10 +304,10 @@ function St({ bubble: t, isDraggable: o, onClick: i = () => {
       "aria-label": `${C} - ${p}`,
       className: "bubble",
       id: `bubble-${h}`,
-      onBlur: $,
+      onBlur: N,
       onClick: () => i(t),
       onFocus: z,
-      onKeyDown: N,
+      onKeyDown: $,
       onMouseEnter: () => a(!0),
       onMouseLeave: () => a(!1),
       role: "button",
@@ -328,50 +329,50 @@ function St({ bubble: t, isDraggable: o, onClick: i = () => {
             stroke-opacity: 0.8;
           }
         ` }),
-        /* @__PURE__ */ e(Ke, { open: s, slotProps: { popper: M }, title: I, children: /* @__PURE__ */ e("circle", { fill: d, id: `circle-${h}`, r: b }) }),
-        /* @__PURE__ */ e("svg", { x: A, y: v, children: /* @__PURE__ */ e(G, { name: u, size: x, sx: { fill: m } }) }),
-        b > P && /* @__PURE__ */ e(
+        /* @__PURE__ */ e(Ke, { open: s, slotProps: { popper: M }, title: I, children: /* @__PURE__ */ e("circle", { fill: d, id: `circle-${h}`, r: f }) }),
+        /* @__PURE__ */ e("svg", { x: A, y: v, children: /* @__PURE__ */ e(P, { name: u, size: x, sx: { fill: m } }) }),
+        f > G && /* @__PURE__ */ e(
           y,
           {
             bold: !0,
             component: "text",
             id: `budget-category-${h}`,
             sx: { fill: m },
-            variant: "body2",
+            variant: "Small",
             y: 4,
             children: C
           }
         ),
-        b > ue && /* @__PURE__ */ e(
+        f > ue && /* @__PURE__ */ e(
           y,
           {
             bold: !0,
             component: "text",
             id: `budget-description-${h}-1`,
             sx: { fill: m },
-            variant: "body1",
-            y: b <= P ? 12 : 24,
-            children: b <= P ? p.split(" ")[0] : p
+            variant: "Body",
+            y: f <= G ? 12 : 24,
+            children: f <= G ? p.split(" ")[0] : p
           }
         ),
-        b <= P && b > ue && /* @__PURE__ */ e(
+        f <= G && f > ue && /* @__PURE__ */ e(
           y,
           {
             component: "text",
             id: `budget-description-${h}-2`,
             sx: { fill: m },
-            variant: "caption",
+            variant: "XSmall",
             y: 28,
             children: p.split(" ")[1]
           }
         ),
-        /* @__PURE__ */ e(Bt, { bubble: l })
+        /* @__PURE__ */ e(St, { bubble: l })
       ]
     },
     h
   );
 }
-const xt = ({
+const vt = ({
   height: t,
   width: o,
   isDraggable: i = !1,
@@ -379,11 +380,11 @@ const xt = ({
   }
 }) => {
   const [a, n] = c.useState([]), r = c.useRef(null), l = c.useRef(!1), { detailedBudgets: d } = D(), m = c.useCallback(() => {
-    const u = r.current, C = ht(d), h = C.nodes();
+    const u = r.current, C = ft(d), h = C.nodes();
     if (u) {
-      const p = u.nodes(), b = new Map(p.map((S) => [S.guid, S]));
+      const p = u.nodes(), f = new Map(p.map((S) => [S.guid, S]));
       h.forEach((S) => {
-        const _ = b.get(S.guid);
+        const _ = f.get(S.guid);
         _ && Object.assign(S, {
           vx: _.vx,
           vy: _.vy,
@@ -401,20 +402,20 @@ const xt = ({
   }, []), c.useEffect(() => {
     const u = r.current;
     if (!u) return;
-    const C = u.nodes(), h = o > 0 && o < 450 || t > 0 && t < 300, p = yt(C, d, h, t, o);
-    u.nodes(p), pt(u, t, o), i && setTimeout(() => {
-      gt(u);
+    const C = u.nodes(), h = o > 0 && o < 450 || t > 0 && t < 300, p = _t(C, d, h, t, o);
+    u.nodes(p), ht(u, t, o), i && setTimeout(() => {
+      pt(u);
     }, 0), n([...p]);
-  }, [t, o, i, d]), /* @__PURE__ */ e("svg", { height: t, style: { overflow: "visible" }, width: Math.abs(o), children: a.map((u) => /* @__PURE__ */ e(St, { bubble: u, isDraggable: i, onClick: s }, u.guid)) });
-}, vt = E(xt), At = ({
+  }, [t, o, i, d]), /* @__PURE__ */ e("svg", { height: t, style: { overflow: "visible" }, width: Math.abs(o), children: a.map((u) => /* @__PURE__ */ e(xt, { bubble: u, isDraggable: i, onClick: s }, u.guid)) });
+}, At = E(vt), Tt = ({
   isMiniWidget: t = !1,
   onConnectAccountsClick: o,
   createBudgetOnClick: i
 }) => {
-  const { recalculateBudgets: s } = D(), { spendCategories: a } = V(), { budgets: n } = w(), { availableWidth: r } = ne(), { isMobile: l } = ie(r), d = t && l, [m, u] = c.useState(!1), [C, h] = c.useState(!1), [p, b] = c.useState(!1), S = c.useMemo(() => [...a.filter((f) => f.totalAverageAmount > 0)], [a]), _ = async () => {
-    b(!0);
-    const { data: f, isSuccess: A } = await s(S);
-    b(!1), A ? (f.length === 0 && h(!0), u(!1)) : u(!0);
+  const { recalculateBudgets: s } = D(), { spendCategories: a } = K(), { budgets: n } = w(), { availableWidth: r } = ne(), { isMobile: l } = ie(r), d = t && l, [m, u] = c.useState(!1), [C, h] = c.useState(!1), [p, f] = c.useState(!1), S = c.useMemo(() => [...a.filter((b) => b.totalAverageAmount > 0)], [a]), _ = async () => {
+    f(!0);
+    const { data: b, isSuccess: A } = await s(S);
+    f(!1), A ? (b.length === 0 && h(!0), u(!1)) : u(!0);
   };
   return p ? /* @__PURE__ */ e(he, {}) : m ? /* @__PURE__ */ e(
     de,
@@ -422,8 +423,8 @@ const xt = ({
       header: n.autogenerate_budgets_error_header,
       icon: "error",
       iconColor: "#4D4D4D",
-      onClick: (f) => {
-        f === "primary" ? _() : i();
+      onClick: (b) => {
+        b === "primary" ? _() : i();
       },
       primaryButton: n.autogenerate_budgets_error_primary_button,
       secondaryButton: n.zero_state_generate_budgets_secondary_button,
@@ -437,14 +438,14 @@ const xt = ({
         ...d && { justifyContent: "center", mt: 0, svg: { height: 32, width: 32 } }
       }
     }
-  ) : /* @__PURE__ */ e(Pe, { children: C ? /* @__PURE__ */ e(
+  ) : /* @__PURE__ */ e(Ge, { children: C ? /* @__PURE__ */ e(
     de,
     {
       header: n.zero_state_generate_budgets_header,
       icon: "error",
       iconColor: "#4D4D4D",
-      onClick: (f) => {
-        f === "primary" ? o() : i();
+      onClick: (b) => {
+        b === "primary" ? o() : i();
       },
       primaryButton: n.zero_state_generate_budgets_primary_button,
       secondaryButton: n.zero_state_generate_budgets_secondary_button,
@@ -468,8 +469,8 @@ const xt = ({
       header: n.create_budgets_title,
       icon: "bubble_chart",
       iconColor: "#1A1A1A",
-      onClick: (f) => {
-        f === "primary" ? _() : i();
+      onClick: (b) => {
+        b === "primary" ? _() : i();
       },
       primaryButton: n.empty_state_primary_button,
       secondaryButton: t ? void 0 : n.empty_state_secondary_button,
@@ -498,9 +499,9 @@ const xt = ({
     shouldShowZeroState: a,
     unavailableWidth: n = 24
   }) => {
-    const { onEvent: r } = Y(), { setSelectedBudget: l } = D(), { isInitialized: d } = oe(), { accounts: m } = w(), { availableWidth: u } = ne(), { isMobile: C } = ie(), [h, p] = c.useState(!1), b = c.useMemo(() => u - n, [u]), S = (f) => {
-      l(f), r(k.BUDGETS_CLICK_BUDGET_CATEGORY, {
-        budget_category: f.category.name,
+    const { onEvent: r } = X(), { setSelectedBudget: l } = D(), { isInitialized: d } = oe(), { accounts: m } = w(), { availableWidth: u } = ne(), { isMobile: C } = ie(), [h, p] = c.useState(!1), f = c.useMemo(() => u - n, [u]), S = (b) => {
+      l(b), r(k.BUDGETS_CLICK_BUDGET_CATEGORY, {
+        budget_category: b.category.name,
         click_type: "bubble"
       });
     }, _ = () => {
@@ -513,19 +514,19 @@ const xt = ({
         sx: { alignSelf: "center", ...s && { height: "100%" } },
         children: [
           a || !d ? /* @__PURE__ */ e(
-            At,
+            Tt,
             {
               createBudgetOnClick: t,
               isMiniWidget: s,
               onConnectAccountsClick: _
             }
           ) : /* @__PURE__ */ e(
-            vt,
+            At,
             {
               height: o,
               isDraggable: i,
               onClick: S,
-              width: b
+              width: f
             }
           ),
           /* @__PURE__ */ e(
@@ -540,7 +541,7 @@ const xt = ({
       }
     );
   }
-), Tt = ({
+), wt = ({
   budgetsCopy: t,
   difference: o,
   handleAddClick: i,
@@ -569,8 +570,8 @@ const xt = ({
       /* @__PURE__ */ e(y, { children: o < 0 ? t.overspent_in_budgets : t.left_in_budgets })
     ] })
   ] });
-}, wt = (t) => {
-  const o = H(), { onEvent: i } = Y(), { visibleAccounts: s } = pe(), { detailedBudgets: a, isDataLoaded: n, loadBudgetData: r, setTheme: l } = D(), { budgets: d, common: m } = w(), { isInitialized: u, selectedAccounts: C, setSelectedAccounts: h } = oe(), { reloadCategoryTotals: p } = V(), b = Ye(), S = a.length === 0, [_, f] = c.useState(!1);
+}, Dt = (t) => {
+  const o = ee(), { onEvent: i } = X(), { visibleAccounts: s } = pe(), { detailedBudgets: a, isDataLoaded: n, loadBudgetData: r, setTheme: l } = D(), { budgets: d, common: m } = w(), { isInitialized: u, selectedAccounts: C, setSelectedAccounts: h } = oe(), { reloadCategoryTotals: p } = K(), f = Ye(), S = a.length === 0, [_, b] = c.useState(!1);
   c.useEffect(() => {
     n || r().finally();
   }, []), c.useEffect(() => {
@@ -580,15 +581,15 @@ const xt = ({
   }, [s]), c.useEffect(() => {
     u && !n && p(
       C,
-      Q(/* @__PURE__ */ new Date()),
+      J(/* @__PURE__ */ new Date()),
       me(/* @__PURE__ */ new Date())
     ).finally();
   }, [u, C]);
   const A = () => {
-    f(!0), i(k.BUDGETS_CLICK_ADD);
-  }, v = () => f(!1);
+    b(!0), i(k.BUDGETS_CLICK_ADD);
+  }, v = () => b(!1);
   return !u || !n ? /* @__PURE__ */ e(he, {}) : /* @__PURE__ */ g(
-    Xe,
+    Ze,
     {
       contentStyles: { height: "calc(100% - 66px)", ":last-child": { pb: 0 } },
       primaryCtaLabel: S ? d.get_started_cta : d.details_cta,
@@ -597,10 +598,10 @@ const xt = ({
       ...t,
       children: [
         /* @__PURE__ */ e(
-          Tt,
+          wt,
           {
             budgetsCopy: d,
-            difference: b,
+            difference: f,
             handleAddClick: A,
             shouldShowZeroState: S
           }
@@ -610,7 +611,7 @@ const xt = ({
           {
             ariaLabelClose: m.close_aria,
             isOpen: _,
-            onClose: () => f(!1),
+            onClose: () => b(!1),
             title: d.add_new_title,
             children: /* @__PURE__ */ e(Ie, { onRecalculateBudgets: v })
           }
@@ -618,7 +619,7 @@ const xt = ({
       ]
     }
   );
-}, Mn = E(wt), ke = ({ budget: t }) => {
+}, kn = E(Dt), ke = ({ budget: t }) => {
   const {
     amount: o,
     budgetColors: { background: i },
@@ -632,20 +633,20 @@ const xt = ({
       percentage: `${n}%`
     }
   ];
-  return /* @__PURE__ */ e(be, { sx: { mt: 24, mx: 24 }, children: /* @__PURE__ */ e(fe, { children: /* @__PURE__ */ g(B, { alignItems: "center", gap: 16, children: [
-    /* @__PURE__ */ e(W, { categoryGuid: a, size: 56 }),
+  return /* @__PURE__ */ e(fe, { sx: { mt: 24, mx: 24 }, children: /* @__PURE__ */ e(be, { children: /* @__PURE__ */ g(B, { 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(y, { bold: !0, variant: "caption", children: s }),
+    /* @__PURE__ */ e(y, { bold: !0, variant: "XSmall", children: s }),
     /* @__PURE__ */ e(ge, { data: l, height: 10 })
   ] }) }) });
-}, Dt = E(() => {
+}, Et = E(() => {
   const { budgets: t } = w();
   return /* @__PURE__ */ g(B, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
-    /* @__PURE__ */ e(G, { color: "secondary", name: "bubble_chart", sx: { fontSize: 32 } }),
-    /* @__PURE__ */ e(y, { bold: !0, color: "secondary", variant: "body2", children: t.zero_state_no_sub_budgets }),
-    /* @__PURE__ */ e(y, { color: "text.secondary", variant: "caption", children: t.zero_state_no_sub_budgets_description })
+    /* @__PURE__ */ e(P, { color: "secondary", name: "bubble_chart", sx: { fontSize: 32 } }),
+    /* @__PURE__ */ e(y, { bold: !0, color: "secondary", variant: "Small", children: t.zero_state_no_sub_budgets }),
+    /* @__PURE__ */ e(y, { color: "text.secondary", variant: "XSmall", children: t.zero_state_no_sub_budgets_description })
   ] });
-}), Et = E(({ budget: t }) => {
+}), It = E(({ budget: t }) => {
   const {
     amount: o,
     budgetColors: { background: i },
@@ -653,39 +654,39 @@ const xt = ({
     percentage: a,
     transaction_total: n
   } = t, { setSelectedSubBudget: r } = D();
-  return /* @__PURE__ */ e(X, { children: /* @__PURE__ */ g(Z, { onClick: () => r(t), children: [
-    /* @__PURE__ */ e(se, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(De, { color: i, percent: a, size: 40, children: /* @__PURE__ */ e(W, { categoryGuid: s.parent_guid, variant: "basic" }) }) }),
+  return /* @__PURE__ */ e(V, { children: /* @__PURE__ */ g(Y, { onClick: () => r(t), children: [
+    /* @__PURE__ */ e(se, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(De, { color: i, percent: a, size: 40, children: /* @__PURE__ */ e(H, { categoryGuid: s.parent_guid, variant: "basic" }) }) }),
     /* @__PURE__ */ e(
-      q,
+      Z,
       {
-        primary: /* @__PURE__ */ e(B, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(y, { bold: !0, variant: "body1", children: t.category.name }) }),
-        secondary: /* @__PURE__ */ e(B, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(y, { fontWeight: 400, variant: "body1", children: `
+        primary: /* @__PURE__ */ e(B, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(y, { bold: !0, variant: "Body", children: t.category.name }) }),
+        secondary: /* @__PURE__ */ e(B, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(y, { fontWeight: 400, variant: "Body", children: `
                   ${T(n, "0,0")} / 
                   ${T(o, "0,0")}
                 ` }) })
       }
     )
   ] }) });
-}), It = E(({ category: t, parentBudget: o }) => {
-  const { budgets: i, common: s } = w(), { setExpandedGuid: a, setOnSelect: n } = nt(), { addBudget: r } = D(), [l, d] = c.useState(!1), [m, u] = c.useState(!1), [C, h] = c.useState(""), [p, b] = c.useState(void 0);
+}), Ot = E(({ category: t, parentBudget: o }) => {
+  const { budgets: i, common: s } = w(), { setExpandedGuid: a, setOnSelect: n } = ot(), { addBudget: r } = D(), [l, d] = c.useState(!1), [m, u] = c.useState(!1), [C, h] = c.useState(""), [p, f] = c.useState(void 0);
   c.useEffect(() => {
-    n((f) => {
-      const A = t.subCategories.find((v) => v.guid === f);
-      A && (b(A), h(`${A.currentAmount === 0 ? "" : A.currentAmount}`), u(!0));
+    n((b) => {
+      const A = t.subCategories.find((v) => v.guid === b);
+      A && (f(A), h(`${A.currentAmount === 0 ? "" : A.currentAmount}`), u(!0));
     });
   }, []);
   const S = () => {
     a(t.guid), d(!0);
   }, _ = async () => {
-    p && Number(C) > 0 && (await r(p, Number(C), o.guid), u(!1), d(!1), b(void 0));
+    p && Number(C) > 0 && (await r(p, Number(C), o.guid), u(!1), d(!1), f(void 0));
   };
   return /* @__PURE__ */ g(F, { children: [
-    /* @__PURE__ */ e(X, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(Z, { onClick: S, children: /* @__PURE__ */ e(q, { children: /* @__PURE__ */ g(B, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
+    /* @__PURE__ */ e(V, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(Y, { onClick: S, children: /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ g(B, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
       /* @__PURE__ */ g(B, { alignItems: "center", direction: "row", gap: 8, children: [
-        /* @__PURE__ */ e(G, { fill: !0, name: "add_box", size: 24, sx: { color: "primary.light" } }),
-        /* @__PURE__ */ e(y, { bold: !0, sx: { color: "primary.light" }, variant: "body1", children: i.add_sub_budget_button })
+        /* @__PURE__ */ e(P, { fill: !0, name: "add_box", size: 24, sx: { color: "primary.light" } }),
+        /* @__PURE__ */ e(y, { bold: !0, sx: { color: "primary.light" }, variant: "Body", children: i.add_sub_budget_button })
       ] }),
-      /* @__PURE__ */ e(G, { name: "chevron_right", size: 24, sx: { color: "primary.light" } })
+      /* @__PURE__ */ e(P, { name: "chevron_right", size: 24, sx: { color: "primary.light" } })
     ] }) }) }) }),
     /* @__PURE__ */ e(re, {}),
     /* @__PURE__ */ e(
@@ -695,7 +696,7 @@ const xt = ({
         isOpen: l,
         onClose: () => d(!1),
         title: i.add_sub_budget_title,
-        children: /* @__PURE__ */ e(K, { children: /* @__PURE__ */ e(ot, { category: t, subCategories: t.subCategories }) })
+        children: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(at, { category: t, subCategories: t.subCategories }) })
       }
     ),
     /* @__PURE__ */ e(
@@ -718,21 +719,21 @@ const xt = ({
       }
     )
   ] });
-}), Ot = E(({ budget: t }) => {
-  const { category: o, subBudgets: i } = t, { budgets: s, common: a } = w(), { deleteBudget: n, selectedSubBudget: r, setSelectedSubBudget: l, updateBudget: d } = D(), { filter: m, setFilter: u } = ae(), [C, h] = c.useState(!1), [p, b] = c.useState(!1), [S, _] = c.useState("");
+}), Mt = E(({ budget: t }) => {
+  const { category: o, subBudgets: i } = t, { budgets: s, common: a } = w(), { deleteBudget: n, selectedSubBudget: r, setSelectedSubBudget: l, updateBudget: d } = D(), { filter: m, setFilter: u } = ae(), [C, h] = c.useState(!1), [p, f] = c.useState(!1), [S, _] = c.useState("");
   c.useEffect(() => {
     r && (_(`${r.amount}`), u({
       ...m,
       custom: (x) => x.category_guid === r.category_guid
     }));
   }, [r]);
-  const f = async () => {
+  const b = async () => {
     r && await d({
       ...r,
       amount: Number(S)
     });
   }, A = async () => {
-    r && await n(r.guid), b(!1), v();
+    r && await n(r.guid), f(!1), v();
   }, v = () => {
     u({
       ...m,
@@ -740,12 +741,12 @@ const xt = ({
     }), l(void 0);
   };
   return /* @__PURE__ */ g(c.Fragment, { children: [
-    /* @__PURE__ */ g(K, { sx: { bgcolor: "background.paper" }, children: [
-      i.length === 0 ? /* @__PURE__ */ e(Dt, {}) : i.map((x) => /* @__PURE__ */ g(c.Fragment, { children: [
-        /* @__PURE__ */ e(Et, { budget: x }),
+    /* @__PURE__ */ g(W, { sx: { bgcolor: "background.paper" }, children: [
+      i.length === 0 ? /* @__PURE__ */ e(Et, {}) : i.map((x) => /* @__PURE__ */ g(c.Fragment, { children: [
+        /* @__PURE__ */ e(It, { budget: x }),
         /* @__PURE__ */ e(re, {})
       ] }, x.guid)),
-      /* @__PURE__ */ e(It, { category: o, parentBudget: t })
+      /* @__PURE__ */ e(Ot, { category: o, parentBudget: t })
     ] }),
     /* @__PURE__ */ e(
       L,
@@ -754,7 +755,7 @@ const xt = ({
         isOpen: !!r,
         onClose: v,
         onPrimaryAction: () => h(!0),
-        onSecondaryAction: () => b(!0),
+        onSecondaryAction: () => f(!0),
         primaryText: s.details_edit_button,
         secondaryText: s.details_delete_button,
         title: s.details_title,
@@ -772,7 +773,7 @@ const xt = ({
           disablePrimaryButton: Number(S) <= 0,
           isOpen: C,
           onClose: () => h(!1),
-          onPrimaryAction: f,
+          onPrimaryAction: b,
           primaryText: s.edit_save_button,
           children: /* @__PURE__ */ e(
             ce,
@@ -789,36 +790,36 @@ const xt = ({
         {
           copy: { close_aria: a.close_aria, title: s.delete_title },
           isOpen: p,
-          onClose: () => b(!1),
+          onClose: () => f(!1),
           onPrimaryAction: A,
           primaryColor: "error",
           primaryText: "Delete",
           secondaryColor: "secondary",
-          children: /* @__PURE__ */ e(y, { variant: "subtitle1", children: R(s.delete_description, r.category.name) })
+          children: /* @__PURE__ */ e(y, { variant: "Paragraph", children: R(s.delete_description, r.category.name) })
         }
       )
     ] })
   ] });
-}), Mt = E(({ budget: t }) => {
+}), Rt = E(({ budget: t }) => {
   const { is_mobile_webview: o } = ze(), { setAlert: i } = D(), { budgets: s, common: a, transactions: n } = w(), { isDesktop: r, isSmallTablet: l, isTablet: d } = ie(), {
     sortedTransactions: m,
     sortedTransactionsWithSplits: u,
     tags: C
-  } = ae(), [h, p] = c.useState(0), [b, S] = c.useState(""), _ = c.useMemo(
-    () => m.find((x) => x.guid === b),
-    [b, m]
-  ), f = (x, I) => {
+  } = ae(), [h, p] = c.useState(0), [f, S] = c.useState(""), _ = c.useMemo(
+    () => m.find((x) => x.guid === f),
+    [f, m]
+  ), b = (x, I) => {
     p(I);
   }, A = () => {
-    et(u, C), i(s.alert_csv_downloaded);
+    tt(u, C), i(s.alert_csv_downloaded);
   }, v = m.length > 0 && !o && (r || d && !l);
   return /* @__PURE__ */ g(B, { gap: 24, children: [
     /* @__PURE__ */ e(ke, { budget: t }),
     /* @__PURE__ */ g(B, { children: [
       /* @__PURE__ */ g(
-        Qe,
+        et,
         {
-          onChange: f,
+          onChange: b,
           sx: { width: "100%" },
           textColor: "primary",
           value: h,
@@ -834,14 +835,14 @@ const xt = ({
           Te,
           {
             onClick: A,
-            startIcon: /* @__PURE__ */ e(G, { name: "ios_share" }),
+            startIcon: /* @__PURE__ */ e(P, { name: "ios_share" }),
             variant: "text",
             children: n.export_csv_btn
           }
         ) }),
         /* @__PURE__ */ e(we, { height: "100%", onClick: S })
       ] }),
-      h === 1 && /* @__PURE__ */ e(Ot, { budget: t }),
+      h === 1 && /* @__PURE__ */ e(Mt, { budget: t }),
       /* @__PURE__ */ e(
         L,
         {
@@ -849,12 +850,12 @@ const xt = ({
           isOpen: !!_,
           onClose: () => S(""),
           title: s.details_transaction_drawer,
-          children: _ && /* @__PURE__ */ e(tt, { transaction: _ })
+          children: _ && /* @__PURE__ */ e(nt, { transaction: _ })
         }
       )
     ] })
   ] });
-}), Rt = E(() => {
+}), kt = E(() => {
   const { selectedAccountGuids: t } = oe(), { budgets: o, common: i } = w(), {
     dateRange: s,
     deleteBudget: a,
@@ -863,7 +864,7 @@ const xt = ({
     setAlert: l,
     setSelectedBudget: d,
     updateBudget: m
-  } = D(), { setFilter: u } = ae(), [C, h] = c.useState(!1), [p, b] = c.useState(!1), [S, _] = c.useState(!1), [f, A] = c.useState("");
+  } = D(), { setFilter: u } = ae(), [C, h] = c.useState(!1), [p, f] = c.useState(!1), [S, _] = c.useState(!1), [b, A] = c.useState("");
   c.useEffect(() => {
     n && !r && (A(`${n.amount}`), h(!0), u({
       accounts: t,
@@ -875,8 +876,8 @@ const xt = ({
   const v = async () => {
     n && (await m({
       ...n,
-      amount: Number(f),
-      percentage: n.category.totalAmount / Number(f) * 100
+      amount: Number(b),
+      percentage: n.category.totalAmount / Number(b) * 100
     }), l(R(o.alert_budget_updated, n.category.name)));
   }, x = async () => {
     n && (await a(n.guid), l(R(o.alert_budget_deleted, n.category.name))), _(!1), I();
@@ -893,28 +894,28 @@ const xt = ({
           ariaLabelClose: i.close_aria,
           isOpen: C,
           onClose: I,
-          onPrimaryAction: () => b(!0),
+          onPrimaryAction: () => f(!0),
           onSecondaryAction: () => _(!0),
           primaryText: o.details_edit_button,
           secondaryColor: "error",
           secondaryText: o.details_delete_button,
           title: o.details_title,
-          children: /* @__PURE__ */ e(Mt, { budget: n })
+          children: /* @__PURE__ */ e(Rt, { budget: n })
         }
       ),
       /* @__PURE__ */ e(
         j,
         {
           copy: { close_aria: i.close_aria, title: o.details_edit_title },
-          disablePrimaryButton: Number(f) <= 0,
+          disablePrimaryButton: Number(b) <= 0,
           isOpen: p,
-          onClose: () => b(!1),
+          onClose: () => f(!1),
           onPrimaryAction: v,
           primaryText: o.edit_save_button,
           children: /* @__PURE__ */ e(
             ce,
             {
-              amount: f,
+              amount: b,
               categoryName: n.category.name,
               onAmountChanged: A
             }
@@ -931,11 +932,11 @@ const xt = ({
           primaryColor: "error",
           primaryText: o.details_delete_button,
           secondaryColor: "secondary",
-          children: /* @__PURE__ */ e(y, { variant: "subtitle1", children: R(o.delete_description, n.category.name) })
+          children: /* @__PURE__ */ e(y, { variant: "Paragraph", children: R(o.delete_description, n.category.name) })
         }
       )
     ] });
-}), kt = ({ budget: t, onClick: o }) => {
+}), Lt = ({ budget: t, onClick: o }) => {
   const {
     amount: i,
     budgetColors: { background: s, description: a },
@@ -945,42 +946,42 @@ const xt = ({
     subBudgets: d,
     transaction_total: m
   } = t;
-  return /* @__PURE__ */ e(X, { children: /* @__PURE__ */ g(Z, { onClick: () => o?.(t), children: [
-    /* @__PURE__ */ e(se, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(De, { color: s, percent: l, size: 40, children: /* @__PURE__ */ e(W, { categoryGuid: n, variant: "basic" }) }) }),
+  return /* @__PURE__ */ e(V, { children: /* @__PURE__ */ g(Y, { onClick: () => o?.(t), children: [
+    /* @__PURE__ */ e(se, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(De, { color: s, percent: l, size: 40, children: /* @__PURE__ */ e(H, { categoryGuid: n, variant: "basic" }) }) }),
     /* @__PURE__ */ e(
-      q,
+      Z,
       {
         primary: /* @__PURE__ */ g(B, { component: "span", direction: "row", justifyContent: "space-between", children: [
-          /* @__PURE__ */ e(y, { bold: !0, variant: "body1", children: t.category.name }),
-          /* @__PURE__ */ e(y, { fontWeight: 400, variant: "body1", children: `
+          /* @__PURE__ */ e(y, { bold: !0, variant: "Body", children: t.category.name }),
+          /* @__PURE__ */ e(y, { fontWeight: 400, variant: "Body", children: `
                   ${T(m, "0,0")} / 
                   ${T(i, "0,0")}
                 ` })
         ] }),
         secondary: /* @__PURE__ */ g(B, { component: "span", direction: "row", justifyContent: "space-between", children: [
-          /* @__PURE__ */ e(y, { variant: "caption", children: `${d.length} Sub-budgets` }),
-          /* @__PURE__ */ e(y, { bold: l > 100, color: a, variant: "caption", children: r })
+          /* @__PURE__ */ e(y, { variant: "XSmall", children: `${d.length} Sub-budgets` }),
+          /* @__PURE__ */ e(y, { bold: l > 100, color: a, variant: "XSmall", children: r })
         ] })
       }
     )
   ] }) });
-}, Lt = E(() => {
-  const { onEvent: t } = Y(), { budgets: o } = w(), { detailedBudgets: i, setSelectedBudget: s } = D(), a = (n) => {
+}, $t = E(() => {
+  const { onEvent: t } = X(), { budgets: o } = w(), { detailedBudgets: i, setSelectedBudget: s } = D(), a = (n) => {
     s(n), t(k.BUDGETS_CLICK_BUDGET_CATEGORY, {
       budget_category: n.category.name,
       click_type: "list"
     });
   };
-  return /* @__PURE__ */ g(be, { elevation: 2, children: [
+  return /* @__PURE__ */ g(fe, { elevation: 2, children: [
     /* @__PURE__ */ e(Ee, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(Ae, { children: o.budget_categories_title }) }),
-    /* @__PURE__ */ e(fe, { sx: { p: 0, ":last-child": { p: 0 } }, children: /* @__PURE__ */ e(K, { children: i.map((n) => /* @__PURE__ */ g(c.Fragment, { children: [
-      /* @__PURE__ */ e(kt, { budget: n, onClick: a }),
+    /* @__PURE__ */ e(be, { sx: { p: 0, ":last-child": { p: 0 } }, children: /* @__PURE__ */ e(W, { children: i.map((n) => /* @__PURE__ */ g(c.Fragment, { children: [
+      /* @__PURE__ */ e(Lt, { budget: n, onClick: a }),
       /* @__PURE__ */ e(re, {})
     ] }, n.guid)) }) })
   ] });
 }), Nt = E(() => {
-  const t = H(), { onEvent: o } = Y(), { visibleAccounts: i } = pe(), { budgets: s, common: a, recurring: n } = w(), { incomeCategories: r, spendCategories: l } = V(), { detailedBudgets: d, totalBudgeted: m } = D(), { incomeTotal: u } = te(), { setFilter: C } = ae(), [h, p] = c.useState(!1), [b, S] = c.useMemo(() => {
-    const v = l.reduce((N, z) => N + z.totalAmount, 0);
+  const t = ee(), { onEvent: o } = X(), { visibleAccounts: i } = pe(), { budgets: s, common: a, recurring: n } = w(), { incomeCategories: r, spendCategories: l } = K(), { detailedBudgets: d, totalBudgeted: m } = D(), { incomeTotal: u } = te(), { setFilter: C } = ae(), [h, p] = c.useState(!1), [f, S] = c.useMemo(() => {
+    const v = l.reduce(($, z) => $ + z.totalAmount, 0);
     let x = v / m;
     x > 1 && (x = 1);
     let I = t.palette.success.main;
@@ -992,9 +993,9 @@ const xt = ({
       }
     ];
     return [v, M];
-  }, [d, l]), [_, f] = c.useMemo(() => {
+  }, [d, l]), [_, b] = c.useMemo(() => {
     const v = Math.abs(
-      r.reduce((M, N) => M + N.totalAmount, 0)
+      r.reduce((M, $) => M + $.totalAmount, 0)
     );
     let x = v / u;
     x > 1 && (x = 1);
@@ -1009,38 +1010,38 @@ const xt = ({
     C({
       accounts: i.map((v) => v.guid),
       dateRange: {
-        start: at(/* @__PURE__ */ new Date(), 90),
+        start: rt(/* @__PURE__ */ new Date(), 90),
         end: /* @__PURE__ */ new Date()
       }
     }), p(!0), o(k.BUDGETS_CLICK_EDIT_INCOME);
   };
-  return /* @__PURE__ */ g(be, { elevation: 2, sx: { overflow: "visible" }, children: [
+  return /* @__PURE__ */ g(fe, { elevation: 2, sx: { overflow: "visible" }, children: [
     /* @__PURE__ */ e(Ee, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(Ae, { children: s.overview_title }) }),
-    /* @__PURE__ */ e(fe, { sx: { pt: 12, px: 24 }, children: /* @__PURE__ */ g(B, { gap: 24, children: [
+    /* @__PURE__ */ e(be, { sx: { pt: 12, px: 24 }, children: /* @__PURE__ */ g(B, { gap: 24, children: [
       /* @__PURE__ */ g(B, { gap: 8, children: [
-        /* @__PURE__ */ e(y, { bold: !0, sx: { mb: 8 }, variant: "body1", children: s.spending_title }),
+        /* @__PURE__ */ e(y, { bold: !0, sx: { mb: 8 }, variant: "Body", children: s.spending_title }),
         /* @__PURE__ */ e(ge, { data: S, height: 16 }),
-        /* @__PURE__ */ e(y, { variant: "body2", children: R(
+        /* @__PURE__ */ e(y, { variant: "Small", children: R(
           s.spending_description,
-          T(b, "0,0"),
+          T(f, "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(y, { bold: !0, variant: "body1", children: s.income_title }),
+          /* @__PURE__ */ e(y, { bold: !0, variant: "Body", children: s.income_title }),
           /* @__PURE__ */ e(
-            rt,
+            st,
             {
               "aria-label": n.manage_income,
               onClick: A,
               sx: { p: 0 },
-              children: /* @__PURE__ */ e(G, { color: "primary", name: "edit" })
+              children: /* @__PURE__ */ e(P, { color: "primary", name: "edit" })
             }
           )
         ] }),
-        /* @__PURE__ */ e(ge, { data: f, height: 16 }),
-        /* @__PURE__ */ e(y, { variant: "body2", children: R(
+        /* @__PURE__ */ e(ge, { data: b, height: 16 }),
+        /* @__PURE__ */ e(y, { variant: "Small", children: R(
           s.income_description,
           T(_, "0,0"),
           T(u, "0,0")
@@ -1054,40 +1055,40 @@ const xt = ({
         isOpen: h,
         onClose: () => p(!1),
         title: n.manage_income,
-        children: /* @__PURE__ */ e(st, { forOverview: !0 })
+        children: /* @__PURE__ */ e(it, { forOverview: !0 })
       }
     )
   ] });
-}), ve = 480, Rn = E(({ onBackClick: t, sx: o }) => {
-  const i = H(), { onEvent: s } = Y(), { onLoad: a } = Ue(), { visibleAccounts: n } = pe(), { budgets: r, common: l } = w(), { isInitialized: d, selectedAccounts: m, setDisplayedDate: u, setSelectedAccounts: C } = oe(), {
+}), ve = 480, Ln = E(({ onBackClick: t, sx: o }) => {
+  const i = ee(), { onEvent: s } = X(), { onLoad: a } = Ue(), { visibleAccounts: n } = pe(), { budgets: r, common: l } = w(), { isInitialized: d, selectedAccounts: m, setDisplayedDate: u, setSelectedAccounts: C } = oe(), {
     alert: h,
     dateRange: p,
-    isDataLoaded: b,
+    isDataLoaded: f,
     loadBudgetData: S,
     setDateRange: _,
-    setAlert: f,
+    setAlert: b,
     setTheme: A,
     detailedBudgets: v
-  } = D(), { setDateRange: x } = te(), { reloadCategoryTotals: I } = V(), { isSmallTablet: M, isMobile: N, isSmallMobile: z } = ie(), $ = M || N || z, [U, le] = c.useState(!1);
+  } = D(), { setDateRange: x } = te(), { reloadCategoryTotals: I } = K(), { isSmallTablet: M, isMobile: $, isSmallMobile: z } = ie(), N = M || $ || z, [U, le] = c.useState(!1);
   c.useEffect(() => {
     A(i), S().finally(() => {
       s(k.BUDGETS_VIEW), a?.("BubbleBudgetsWidget");
     });
-  }, []), c.useEffect(() => (C(n), _({ start: Q(J()), end: me(J()) }), () => {
-    _({ start: Q(J()), end: me(J()) });
+  }, []), c.useEffect(() => (C(n), _({ start: J(q()), end: me(q()) }), () => {
+    _({ start: J(q()), end: me(q()) });
   }), [n]), c.useEffect(() => {
     d && (u(p.start, p.end), I(m, p.start, p.end).finally(), x(p));
   }, [d, m, p]);
   const Le = (_e) => {
     _({ start: _e[0] || /* @__PURE__ */ new Date(), end: _e[1] || /* @__PURE__ */ new Date() });
-  }, Ne = () => {
+  }, $e = () => {
     s(k.BUDGETS_CLICK_FILTER);
   }, ye = () => {
     le(!0), s(k.BUDGETS_CLICK_ADD);
-  }, $e = () => {
+  }, Ne = () => {
     le(!1);
-  }, Ge = Ze(p.end, Q(/* @__PURE__ */ new Date()));
-  return !d || !b ? /* @__PURE__ */ e(he, {}) : /* @__PURE__ */ g(
+  }, Pe = qe(p.end, J(/* @__PURE__ */ new Date()));
+  return !d || !f ? /* @__PURE__ */ e(he, {}) : /* @__PURE__ */ g(
     Ve,
     {
       accountOptions: n,
@@ -1100,10 +1101,10 @@ const xt = ({
       ],
       calendarActions: {
         onRangeChanged: Le,
-        shouldDisableNext: Ge,
+        shouldDisableNext: Pe,
         shouldDisablePicker: !0
       },
-      onAccountsFilterClick: Ne,
+      onAccountsFilterClick: $e,
       onBackClick: t,
       sx: o,
       title: r.budgets_title,
@@ -1111,19 +1112,19 @@ const xt = ({
         /* @__PURE__ */ g(
           B,
           {
-            direction: $ ? "column" : "row",
+            direction: N ? "column" : "row",
             height: "100%",
             sx: { justifyContent: "center" },
             width: "100%",
             children: [
-              /* @__PURE__ */ e(B, { height: $ ? 450 : "calc(100dvh - 150px)", children: /* @__PURE__ */ e(
+              /* @__PURE__ */ e(B, { height: N ? 450 : "calc(100dvh - 150px)", children: /* @__PURE__ */ e(
                 Re,
                 {
                   createBudgetOnClick: ye,
-                  height: $ ? 450 : 800,
+                  height: N ? 450 : 800,
                   isDraggable: !0,
                   shouldShowZeroState: v.length === 0,
-                  unavailableWidth: $ ? 0 : ve
+                  unavailableWidth: N ? 0 : ve
                 }
               ) }),
               v.length !== 0 && /* @__PURE__ */ g(
@@ -1132,17 +1133,17 @@ const xt = ({
                   gap: 24,
                   height: "100%",
                   sx: { mr: 24, mt: 48 },
-                  width: $ ? "100%" : ve,
+                  width: N ? "100%" : ve,
                   children: [
                     /* @__PURE__ */ e(Nt, {}),
-                    /* @__PURE__ */ e(Lt, {})
+                    /* @__PURE__ */ e($t, {})
                   ]
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ e(Rt, {}),
+        /* @__PURE__ */ e(kt, {}),
         /* @__PURE__ */ e(
           L,
           {
@@ -1150,23 +1151,23 @@ const xt = ({
             isOpen: U,
             onClose: () => le(!1),
             title: r.add_new_title,
-            children: /* @__PURE__ */ e(Ie, { onRecalculateBudgets: $e })
+            children: /* @__PURE__ */ e(Ie, { onRecalculateBudgets: Ne })
           }
         ),
         /* @__PURE__ */ e(
-          Je,
+          Qe,
           {
             anchorOrigin: { vertical: "bottom", horizontal: "right" },
             autoHideDuration: 3500,
             onClose: () => {
-              f("");
+              b("");
             },
             open: !!h,
             children: /* @__PURE__ */ e(
-              qe,
+              Je,
               {
                 onClose: () => {
-                  f("");
+                  b("");
                 },
                 severity: "success",
                 variant: "filled",
@@ -1180,6 +1181,6 @@ const xt = ({
   );
 });
 export {
-  Mn as BubbleBudgetsMiniWidget,
-  Rn as BubbleBudgetsWidget
+  kn as BubbleBudgetsMiniWidget,
+  Ln as BubbleBudgetsWidget
 };