@mx-cartographer/experiences 9.1.0-alpha.bb1 → 9.1.0

package/dist/budgets/index.es.js

@@ -1,296 +1,269 @@
-import { s as R } from "../GlobalCopyApi-BeXzaDH9.mjs";
-import { J as D, K as Ve, q as Ke, rt as Ee, s as Ye } from "../core-BexP5oiV.mjs";
-import { $t as Se, An as fe, Bn as Xe, Gn as Ze, Vn as qe, Xn as Le, c as Je, d as Qe, f as et, i as tt, lr as $, mr as le, p as nt, sr as P, ur as W, yr as ve } from "../accounts-DkyAiLpg.mjs";
-import { n as Ne } from "../Analytics-BKzTPees.mjs";
-import { E as X, a as E, d as Z, h as q, i as ke, k as de, n as $e, p as w, s as J, t as ue, w as me } from "../Loader-BlVzRtUd.mjs";
-import { t as at } from "../MiniWidgetContainer-COwnjfy7.mjs";
-import { o as ot } from "../recurringtransactions-gbJ_NA8u.mjs";
+import { jsxs as m, jsx as e, Fragment as Ve } from "react/jsx-runtime";
 import l from "react";
 import { observer as I } from "mobx-react-lite";
-import x from "@mui/material/Stack";
-import { CategoryIcon as H, H3 as Ge, Icon as z, Text as v } from "@mxenabled/mxui";
 import { endOfMonth as Be } from "date-fns/endOfMonth";
+import { isAfter as Ke } from "date-fns/isAfter";
 import { startOfMonth as ie } from "date-fns/startOfMonth";
 import { startOfToday as re } from "date-fns/startOfToday";
-import Pe from "@mui/material/Button";
-import { Fragment as rt, jsx as e, jsxs as m } from "react/jsx-runtime";
-import { alpha as st, useTheme as V } from "@mui/material/styles";
-import Q from "@mui/material/Box";
-import * as O from "d3";
-import { subDays as it } from "date-fns/subDays";
-import we from "@mui/material/Tab";
-import ct from "@mui/material/Tabs";
-import lt from "@mui/material/IconButton";
-import { isAfter as dt } from "date-fns/isAfter";
-import xe from "@mui/material/Card";
-import Ae from "@mui/material/CardContent";
-import je from "@mui/material/CardHeader";
-import ge from "@mui/material/Divider";
-import ut from "@mui/material/Tooltip";
-import ee from "@mui/material/List";
+import Ae from "@mui/material/Alert";
+import xe from "@mui/material/Snackbar";
+import x from "@mui/material/Stack";
+import { useTheme as H, alpha as Ye } from "@mui/material/styles";
+import X from "@mui/material/Box";
+import Z from "@mui/material/List";
+import { b as R } from "../Localization-DnoVyBNK.mjs";
+import { Text as C, CategoryIcon as V, Icon as z, H3 as Le } from "@mxenabled/mxui";
+import { f as D } from "../NumberFormatting--XMeeBfr.mjs";
+import { u as E, o as w, h as le, l as q, D as de, i as Ne, f as J, a as Q, g as ee, c as ke } from "../hooks-97sNJ_lf.mjs";
+import $e from "@mui/material/Button";
+import ue from "@mui/material/Divider";
 import te from "@mui/material/ListItem";
-import ne from "@mui/material/ListItemButton";
-import ae from "@mui/material/ListItemText";
-import pe from "@mui/material/ListItemAvatar";
-import Te from "@mui/material/Alert";
-import De from "@mui/material/Snackbar";
-import mt from "@mui/material/ListItemSecondaryAction";
-var gt = I(() => {
-  const { budgets: t } = w(), { totalBudgeted: o } = E(), { incomeTotal: i } = me(), r = i - o;
-  return /* @__PURE__ */ m(x, {
-    direction: "row",
-    justifyContent: "center",
-    my: 16,
-    spacing: 20,
-    children: [
-      /* @__PURE__ */ m(x, {
-        alignItems: "center",
-        children: [/* @__PURE__ */ e(v, {
-          bold: !0,
-          variant: "body1",
-          children: D(i, "0,0")
-        }), /* @__PURE__ */ e(v, {
-          color: "secondary",
-          variant: "body2",
-          children: t.projected_income
-        })]
-      }),
-      /* @__PURE__ */ e(v, {
-        bold: !0,
-        justifyContent: "center",
-        variant: "body1",
-        children: "-"
-      }),
-      /* @__PURE__ */ m(x, {
-        alignItems: "center",
-        children: [/* @__PURE__ */ e(v, {
-          bold: !0,
-          variant: "body1",
-          children: D(o, "0,0")
-        }), /* @__PURE__ */ e(v, {
-          color: "secondary",
-          variant: "body2",
-          children: t.budgeted
-        })]
-      }),
-      /* @__PURE__ */ e(v, {
-        bold: !0,
-        justifyContent: "center",
-        variant: "body1",
-        children: "="
-      }),
-      /* @__PURE__ */ m(x, {
-        alignItems: "center",
-        children: [/* @__PURE__ */ e(v, {
-          bold: !0,
-          variant: "body1",
-          children: D(r, "0,0")
-        }), /* @__PURE__ */ e(v, {
-          color: "secondary",
-          variant: "body2",
-          children: t.remaining
-        })]
-      })
-    ]
-  });
-}), pt = I(({ category: t }) => {
-  const { budgets: o } = w(), { budgets: i } = E(), r = l.useMemo(() => {
-    const n = i.find((s) => s.category_guid === t.guid);
-    return `${D(t.totalAverageAmount, "0,0")} - ${n ? R(o.recalculate_previous_budget, D(n.amount, "0,0")) : o.recalculate_new_budget}`;
-  }, [o, i]);
-  return /* @__PURE__ */ m(l.Fragment, { children: [/* @__PURE__ */ e(te, { children: /* @__PURE__ */ m(ne, { children: [/* @__PURE__ */ e(pe, { children: /* @__PURE__ */ e(H, {
-    categoryGuid: t.guid,
-    variant: "filled"
-  }) }), /* @__PURE__ */ e(ae, {
-    primary: t.name,
-    secondary: r
-  })] }) }), /* @__PURE__ */ e(ge, {})] }, t.guid);
-}), ht = ({ onRecalculateBudgets: t }) => {
-  const { budgets: o, common: i } = w(), { spendCategories: r } = J(), { recalculateBudgets: n, setAlert: s } = E(), [a, c] = l.useState(!1), g = r.filter((u) => u.totalAverageAmount > 0), d = async () => {
-    await n(g), c(!1), s(o.alert_recalculated_budgets), t?.();
+import me from "@mui/material/ListItemAvatar";
+import oe from "@mui/material/ListItemButton";
+import ne from "@mui/material/ListItemText";
+import { D as $ } from "../Drawer-DsnW2o0v.mjs";
+import Xe from "@mui/material/ListItemSecondaryAction";
+import { C as Ze } from "../CurrencyInput-DaGEQaLW.mjs";
+import { D as W } from "../Dialog-Bvd2n8hz.mjs";
+import { C as qe } from "../ConnectionsDrawer-CZU9ku-k.mjs";
+import * as O from "d3";
+import Je from "@mui/material/Tooltip";
+import { u as ge } from "../useScreenSize-mWpmnh5w.mjs";
+import { L as pe } from "../Loader-CxeBwuPG.mjs";
+import { E as _e } from "../EmptyState-CJUDc3kD.mjs";
+import { A as P } from "../Analytics-WeZYytR0.mjs";
+import Ee from "@mui/material/Tab";
+import Qe from "@mui/material/Tabs";
+import { e as et, g as we } from "../TransactionUtils-BphBJBbU.mjs";
+import { T as ve } from "../EmbeddedCard-DH8vQ3qN.mjs";
+import { T as tt, c as ot } from "../TransactionDetails-roZ5xLq8.mjs";
+import Te from "@mui/material/Card";
+import De from "@mui/material/CardContent";
+import { S as Se } from "../StatusBar-CPfSXe80.mjs";
+import { S as Ge } from "../SingleSegmentDonut-7Uy6VEld.mjs";
+import { u as nt, C as at } from "../CategorySelectorDrawer-NJsFsKP1.mjs";
+import Pe from "@mui/material/CardHeader";
+import { subDays as rt } from "date-fns/subDays";
+import st from "@mui/material/IconButton";
+import { M as it } from "../ManageIncome-Dcsnnz86.mjs";
+import { u as je } from "../useWidgetLoadTimer-B0tB-yzL.mjs";
+import { W as ct } from "../WidgetContainer-DJnp6t6c.mjs";
+import { g as lt, a as dt } from "../BudgetUtil-Bg2AQJpQ.mjs";
+import { M as ut } from "../MiniWidgetContainer-Bmv_WeUd.mjs";
+import { b as mt } from "../CurrencyDialog-DumQCTPO.mjs";
+const gt = I(() => {
+  const { budgets: t } = E(), { totalBudgeted: n } = w(), { incomeTotal: c } = le(), i = c - n;
+  return /* @__PURE__ */ m(x, { direction: "row", justifyContent: "center", my: 16, spacing: 20, children: [
+    /* @__PURE__ */ m(x, { alignItems: "center", children: [
+      /* @__PURE__ */ e(C, { bold: !0, variant: "body1", children: D(c, "0,0") }),
+      /* @__PURE__ */ e(C, { color: "secondary", variant: "body2", children: t.projected_income })
+    ] }),
+    /* @__PURE__ */ e(C, { bold: !0, justifyContent: "center", variant: "body1", children: "-" }),
+    /* @__PURE__ */ m(x, { alignItems: "center", children: [
+      /* @__PURE__ */ e(C, { bold: !0, variant: "body1", children: D(n, "0,0") }),
+      /* @__PURE__ */ e(C, { color: "secondary", variant: "body2", children: t.budgeted })
+    ] }),
+    /* @__PURE__ */ e(C, { bold: !0, justifyContent: "center", variant: "body1", children: "=" }),
+    /* @__PURE__ */ m(x, { alignItems: "center", children: [
+      /* @__PURE__ */ e(C, { bold: !0, variant: "body1", children: D(i, "0,0") }),
+      /* @__PURE__ */ e(C, { color: "secondary", variant: "body2", children: t.remaining })
+    ] })
+  ] });
+}), pt = I(
+  ({ category: t }) => {
+    const { budgets: n } = E(), { budgets: c } = w(), i = l.useMemo(() => {
+      const a = c.find((r) => r.category_guid === t.guid), s = D(t.totalAverageAmount, "0,0"), o = a ? R(n.recalculate_previous_budget, D(a.amount, "0,0")) : n.recalculate_new_budget;
+      return `${s} - ${o}`;
+    }, [n, c]);
+    return /* @__PURE__ */ m(l.Fragment, { children: [
+      /* @__PURE__ */ e(te, { children: /* @__PURE__ */ m(oe, { children: [
+        /* @__PURE__ */ e(me, { children: /* @__PURE__ */ e(V, { categoryGuid: t.guid, variant: "filled" }) }),
+        /* @__PURE__ */ e(ne, { primary: t.name, secondary: i })
+      ] }) }),
+      /* @__PURE__ */ e(ue, {})
+    ] }, t.guid);
+  }
+), ht = ({ onRecalculateBudgets: t }) => {
+  const { budgets: n, common: c } = E(), { spendCategories: i } = q(), { recalculateBudgets: a, setAlert: s } = w(), [o, r] = l.useState(!1), p = i.filter((u) => u.totalAverageAmount > 0), d = async () => {
+    await a(p), r(!1), s(n.alert_recalculated_budgets), t?.();
   };
   return /* @__PURE__ */ m(l.Fragment, { children: [
-    /* @__PURE__ */ e(Pe, {
-      onClick: () => c(!0),
-      sx: {
-        mt: 24,
-        mx: 24
-      },
-      variant: "text",
-      children: o.recalculate_button
-    }),
-    /* @__PURE__ */ e(v, {
-      sx: {
-        mx: 24,
-        my: 16,
-        textAlign: "center"
-      },
-      variant: "subtitle1",
-      children: o.recalculate_help
-    }),
-    /* @__PURE__ */ e($, {
-      ariaLabelClose: i.close_aria,
-      isOpen: a,
-      onClose: () => c(!1),
-      onPrimaryAction: d,
-      title: o.recalculate_title,
-      children: /* @__PURE__ */ m(x, { children: [/* @__PURE__ */ m(x, {
-        mx: 24,
-        my: 16,
-        children: [/* @__PURE__ */ e(v, {
-          bold: !0,
-          variant: "body1",
-          children: o.recalculate_description_top
-        }), /* @__PURE__ */ e(v, {
-          variant: "subtitle2",
-          children: o.recalculate_description_bottom
-        })]
-      }), /* @__PURE__ */ e(Q, {
-        bgcolor: "background.paper",
-        children: /* @__PURE__ */ e(ee, { children: g.map((u) => /* @__PURE__ */ e(pt, { category: u }, u.guid)) })
-      })] })
-    })
+    /* @__PURE__ */ e($e, { onClick: () => r(!0), sx: { mt: 24, mx: 24 }, variant: "text", children: n.recalculate_button }),
+    /* @__PURE__ */ e(C, { sx: { mx: 24, my: 16, textAlign: "center" }, variant: "subtitle1", children: n.recalculate_help }),
+    /* @__PURE__ */ e(
+      $,
+      {
+        ariaLabelClose: c.close_aria,
+        isOpen: o,
+        onClose: () => r(!1),
+        onPrimaryAction: d,
+        title: n.recalculate_title,
+        children: /* @__PURE__ */ m(x, { children: [
+          /* @__PURE__ */ m(x, { mx: 24, my: 16, children: [
+            /* @__PURE__ */ e(C, { bold: !0, variant: "body1", children: n.recalculate_description_top }),
+            /* @__PURE__ */ e(C, { variant: "subtitle2", children: n.recalculate_description_bottom })
+          ] }),
+          /* @__PURE__ */ e(X, { bgcolor: "background.paper", children: /* @__PURE__ */ e(Z, { children: p.map((u) => /* @__PURE__ */ e(pt, { category: u }, u.guid)) }) })
+        ] })
+      }
+    )
   ] });
-}, he = ({ amount: t, categoryName: o, onAmountChanged: i }) => {
-  const { budgets: r } = w(), { totalBudgeted: n } = E(), { incomeTotal: s } = me(), a = s - n;
-  return /* @__PURE__ */ m(x, {
-    gap: 16,
-    children: [/* @__PURE__ */ m(x, { children: [/* @__PURE__ */ e(v, { children: R(r.add_description_top, D(a, "0,0")) }), /* @__PURE__ */ e(v, { children: R(r.add_description_bottom, o) })] }), /* @__PURE__ */ e(Xe, {
-      amount: t,
-      autoFocus: !0,
-      label: r.add_label,
-      minAmount: 0,
-      setAmount: i,
-      sx: { ".MuiTypography-body1": { p: 0 } }
-    })]
-  });
-}, yt = I(({ category: t, onAddBudget: o }) => {
-  const { budgets: i, common: r } = w(), [n, s] = l.useState(!1), [a, c] = l.useState(`${t.totalAmount === 0 ? "" : t.totalAmount}`);
-  return /* @__PURE__ */ m(l.Fragment, { children: [/* @__PURE__ */ e(te, { children: /* @__PURE__ */ m(ne, {
-    onClick: () => s(!0),
-    children: [
-      /* @__PURE__ */ e(pe, { children: /* @__PURE__ */ e(H, { categoryGuid: t.guid }) }),
-      /* @__PURE__ */ e(ae, {
-        primary: t.name,
-        secondary: D(t.totalAmount, "0,0")
-      }),
-      /* @__PURE__ */ e(mt, { children: /* @__PURE__ */ e(z, {
-        name: "add",
-        size: 20
-      }) })
-    ]
-  }) }, t.guid), /* @__PURE__ */ e(W, {
-    copy: {
-      close_aria: r.close_aria,
-      title: i.add_title
-    },
-    disablePrimaryButton: Number(a) <= 0,
-    isOpen: n,
-    onClose: () => s(!1),
-    onPrimaryAction: () => o(t, Number(a)),
-    primaryText: i.add_save_button,
-    children: /* @__PURE__ */ e(he, {
-      amount: a,
-      categoryName: t.name,
-      onAmountChanged: c
-    })
-  })] });
-}), ze = I(({ onAddBudget: t, onRecalculateBudgets: o }) => {
-  const { budgets: i } = w(), { addBudget: r, setAlert: n, unbudgetedCategories: s } = E(), a = async (c, g) => {
-    await r(c, g), t?.(), n(R(i.alert_budget_created, c.name));
+}, he = ({
+  amount: t,
+  categoryName: n,
+  onAmountChanged: c
+}) => {
+  const { budgets: i } = E(), { totalBudgeted: a } = w(), { incomeTotal: s } = le(), o = s - a;
+  return /* @__PURE__ */ m(x, { gap: 16, children: [
+    /* @__PURE__ */ m(x, { children: [
+      /* @__PURE__ */ e(C, { children: R(
+        i.add_description_top,
+        D(o, "0,0")
+      ) }),
+      /* @__PURE__ */ e(C, { children: R(i.add_description_bottom, n) })
+    ] }),
+    /* @__PURE__ */ e(
+      Ze,
+      {
+        amount: t,
+        autoFocus: !0,
+        label: i.add_label,
+        minAmount: 0,
+        setAmount: c,
+        sx: { ".MuiTypography-body1": { p: 0 } }
+      }
+    )
+  ] });
+}, bt = I(({ category: t, onAddBudget: n }) => {
+  const { budgets: c, common: i } = E(), [a, s] = l.useState(!1), [o, r] = l.useState(
+    `${t.totalAmount === 0 ? "" : t.totalAmount}`
+  );
+  return /* @__PURE__ */ m(l.Fragment, { children: [
+    /* @__PURE__ */ e(te, { children: /* @__PURE__ */ m(oe, { onClick: () => s(!0), children: [
+      /* @__PURE__ */ e(me, { children: /* @__PURE__ */ e(V, { categoryGuid: t.guid }) }),
+      /* @__PURE__ */ e(
+        ne,
+        {
+          primary: t.name,
+          secondary: D(t.totalAmount, "0,0")
+        }
+      ),
+      /* @__PURE__ */ e(Xe, { children: /* @__PURE__ */ e(z, { name: "add", size: 20 }) })
+    ] }) }, t.guid),
+    /* @__PURE__ */ e(
+      W,
+      {
+        copy: { close_aria: i.close_aria, title: c.add_title },
+        disablePrimaryButton: Number(o) <= 0,
+        isOpen: a,
+        onClose: () => s(!1),
+        onPrimaryAction: () => n(t, Number(o)),
+        primaryText: c.add_save_button,
+        children: /* @__PURE__ */ e(he, { amount: o, categoryName: t.name, onAmountChanged: r })
+      }
+    )
+  ] });
+}), ze = I(({ onAddBudget: t, onRecalculateBudgets: n }) => {
+  const { budgets: c } = E(), { addBudget: i, setAlert: a, unbudgetedCategories: s } = w(), o = async (r, p) => {
+    await i(r, p), t?.(), a(R(c.alert_budget_created, r.name));
   };
   return /* @__PURE__ */ m(x, { children: [
     /* @__PURE__ */ e(gt, {}),
-    /* @__PURE__ */ e(Q, {
-      bgcolor: "background.paper",
-      children: /* @__PURE__ */ e(ee, { children: s.map((c) => /* @__PURE__ */ e(yt, {
-        category: c,
-        onAddBudget: a
-      }, c.guid)) })
-    }),
-    /* @__PURE__ */ e(ht, { onRecalculateBudgets: o })
+    /* @__PURE__ */ e(X, { bgcolor: "background.paper", children: /* @__PURE__ */ e(Z, { children: s.map((r) => /* @__PURE__ */ e(
+      bt,
+      {
+        category: r,
+        onAddBudget: o
+      },
+      r.guid
+    )) }) }),
+    /* @__PURE__ */ e(ht, { onRecalculateBudgets: n })
   ] });
-}), Ie = 5, Fe = 100, ce = 25, _t = (t) => {
-  const o = (n) => {
-    n.active || t.alphaTarget(0.3).restart(), n.subject.fx = n.subject.x, n.subject.fy = n.subject.y;
-  }, i = (n) => {
-    n.subject.fx = n.x, n.subject.fy = n.y;
-  }, r = (n) => {
-    n.active || t.alphaTarget(0), n.subject.fx = null, n.subject.fy = null;
+}), Ie = 5, Fe = 100, ce = 25, ft = (t) => {
+  const n = (a) => {
+    a.active || t.alphaTarget(0.3).restart(), a.subject.fx = a.subject.x, a.subject.fy = a.subject.y;
+  }, c = (a) => {
+    a.subject.fx = a.x, a.subject.fy = a.y;
+  }, i = (a) => {
+    a.active || t.alphaTarget(0), a.subject.fx = null, a.subject.fy = null;
   };
-  return O.drag().on("start", o).on("drag", i).on("end", r);
-}, bt = (t) => {
-  let o = t.transaction_total / t.amount;
-  o < 0 ? o = 0 : o > 1 && (o = 1);
-  const i = o * 2 * Math.PI, r = O.interpolate(0, i), n = O.arc().cornerRadius(5).innerRadius(t.radius - Ie * 2).outerRadius(t.radius - Ie).startAngle(0).endAngle(0);
-  return (s) => (n.endAngle(r(s)), n(t) || "");
-}, ft = (t) => {
-  O.selectAll(".bubble").call(_t(t));
-}, Oe = (t, o, i) => Math.min(Math.max(t, o), i), Ct = (t, o, i) => {
-  t.alpha(1).restart().force("x", O.forceX().x(i / 2).strength(0.01)).force("y", O.forceY().y(o / 2).strength(0.02)).on("tick", () => {
-    const r = t.nodes();
-    r.forEach((n) => {
-      const s = n.radius ?? ce;
-      n.x = Oe(n.x ?? 0, s, i - s), n.y = Oe(n.y ?? 0, s, o - s);
-    }), O.selectAll(".bubble").data(r).attr("transform", (n) => `translate(${n.x},${n.y})`);
+  return O.drag().on("start", n).on("drag", c).on("end", i);
+}, yt = (t) => {
+  let n = t.transaction_total / t.amount;
+  n < 0 ? n = 0 : n > 1 && (n = 1);
+  const c = n * 2 * Math.PI, i = O.interpolate(0, c), a = O.arc().cornerRadius(5).innerRadius(t.radius - Ie * 2).outerRadius(t.radius - Ie).startAngle(0).endAngle(0);
+  return (s) => (a.endAngle(i(s)), a(t) || "");
+}, _t = (t) => {
+  O.selectAll(".bubble").call(ft(t));
+}, Oe = (t, n, c) => Math.min(Math.max(t, n), c), Ct = (t, n, c) => {
+  t.alpha(1).restart().force(
+    "x",
+    O.forceX().x(c / 2).strength(0.01)
+  ).force(
+    "y",
+    O.forceY().y(n / 2).strength(0.02)
+  ).on("tick", () => {
+    const i = t.nodes();
+    i.forEach((a) => {
+      const s = a.radius ?? ce;
+      a.x = Oe(a.x ?? 0, s, c - s), a.y = Oe(a.y ?? 0, s, n - s);
+    }), O.selectAll(".bubble").data(i).attr("transform", (a) => `translate(${a.x},${a.y})`);
   });
-}, Ue = (t, o) => O.scaleLinear().domain([t, o]).range([ce, Fe]), vt = (t) => {
-  const o = t.reduce((n, s) => {
-    const a = Math.max(s.transaction_total, s.amount);
-    return a > n ? a : n;
-  }, 0), i = Ue(t.reduce((n, s) => {
-    const a = Math.max(s.transaction_total, s.amount);
-    return a < n ? a : n;
-  }, o), o), r = t.map((n) => {
-    const s = i(Math.max(n.transaction_total, n.amount)) || 25;
+}, Ue = (t, n) => O.scaleLinear().domain([t, n]).range([ce, Fe]), Bt = (t) => {
+  const n = t.reduce((s, o) => {
+    const r = Math.max(o.transaction_total, o.amount);
+    return r > s ? r : s;
+  }, 0), c = t.reduce((s, o) => {
+    const r = Math.max(o.transaction_total, o.amount);
+    return r < s ? r : s;
+  }, n), i = Ue(c, n), a = t.map((s) => {
+    const o = i(Math.max(s.transaction_total, s.amount)) || 25;
     return {
-      ...n,
-      radius: s
+      ...s,
+      radius: o
     };
   });
-  return O.forceSimulation(r).velocityDecay(0.05).force("collide", O.forceCollide((n) => n.radius + 2).strength(0.7));
-}, Bt = (t, o, i) => {
-  const r = Math.PI * ce ** 2 * t, n = i < 400 || o < 300, s = n ? 40 : 20, a = Math.max(100, i - s), c = Math.max(100, o - s), g = a * c;
-  let d = ce;
-  if (r < g) {
-    const u = Math.sqrt(g / (t * Math.PI)), C = Math.min(a, c) / 4;
-    d = Math.min(Fe, u, C);
+  return O.forceSimulation(a).velocityDecay(0.05).force("collide", O.forceCollide((s) => s.radius + 2).strength(0.7));
+}, St = (t, n, c) => {
+  const a = Math.PI * ce ** 2 * t, s = c < 400 || n < 300, o = s ? 40 : 20, r = Math.max(100, c - o), p = Math.max(100, n - o), d = r * p;
+  let u = ce;
+  if (a < d) {
+    const g = Math.sqrt(d / (t * Math.PI)), h = Math.min(r, p) / 4;
+    u = Math.min(Fe, g, h);
   }
-  return n && t <= 3 && (d = Math.min(d, 45)), {
-    minRadius: Math.max(20, d * 0.6),
-    maxRadius: d
-  };
-}, St = (t, o, i, r, n) => {
-  const { maxRadius: s, minRadius: a } = Bt(t, o, n);
-  return O.scaleLinear().domain([r, i]).range([a, s]);
-}, xt = (t, o, i = !1, r, n) => {
-  const s = o.map((d) => Math.max(d.transaction_total, d.amount)), a = Math.min(...s), c = Math.max(...s), g = i ? St(t.length, r, c, a, n) : Ue(a, c);
+  return s && t <= 3 && (u = Math.min(u, 45)), { minRadius: Math.max(20, u * 0.6), maxRadius: u };
+}, At = (t, n, c, i, a) => {
+  const { maxRadius: s, minRadius: o } = St(t, n, a);
+  return O.scaleLinear().domain([i, c]).range([o, s]);
+}, xt = (t, n, c = !1, i, a) => {
+  const s = n.map((d) => Math.max(d.transaction_total, d.amount)), o = Math.min(...s), r = Math.max(...s), p = c ? At(t.length, i, r, o, a) : Ue(o, r);
   return t.map((d) => ({
     ...d,
-    radius: g(Math.max(d.transaction_total, d.amount))
+    radius: p(Math.max(d.transaction_total, d.amount))
   }));
-}, Re = 5, At = 2e3, Tt = ({ bubble: t }) => {
-  const o = V(), { amount: i, guid: r, budgetColors: { mercury: n }, radius: s, transaction_total: a } = t, c = `mercury-${r}`;
-  return l.useEffect(() => {
-    O.select(`.${c}`).selectAll(".status").remove(), O.select(`.${c}`).append("path").transition().duration(At).delay(0).attr("class", "status").attr("style", `fill: ${n}; fill-opacity: 1;`).attrTween("d", () => bt(t));
-  }, [
-    i,
-    s,
-    a
-  ]), /* @__PURE__ */ e("g", {
-    className: c,
-    children: /* @__PURE__ */ e("path", {
-      d: O.arc().innerRadius((g) => g - 2 * Re).outerRadius((g) => g - Re).startAngle(0).endAngle(2 * Math.PI)(s) || "",
-      style: {
-        fill: o.palette.common.white,
-        fillOpacity: 0.35
-      }
-    })
-  });
+}, Me = 5, vt = 2e3, Tt = ({ bubble: t }) => {
+  const n = H(), {
+    amount: c,
+    guid: i,
+    budgetColors: { mercury: a },
+    radius: s,
+    transaction_total: o
+  } = t, r = `mercury-${i}`;
+  l.useEffect(() => {
+    O.select(`.${r}`).selectAll(".status").remove(), O.select(`.${r}`).append("path").transition().duration(vt).delay(0).attr("class", "status").attr("style", `fill: ${a}; fill-opacity: 1;`).attrTween("d", () => yt(t));
+  }, [c, s, o]);
+  const p = O.arc().innerRadius((d) => d - 2 * Me).outerRadius((d) => d - Me).startAngle(0).endAngle(2 * Math.PI);
+  return /* @__PURE__ */ e("g", { className: r, children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: p(s) || "",
+      style: { fill: n.palette.common.white, fillOpacity: 0.35 }
+    }
+  ) });
 }, Dt = l.memo(Tt), U = 75, Ce = 50;
-function Et({ bubble: t, isDraggable: o, onClick: i = () => {
+function Et({ bubble: t, isDraggable: n, onClick: c = () => {
 } }) {
-  const [r, n] = l.useState(!1), s = V(), { availableWidth: a } = de(), c = l.useMemo(() => {
+  const [i, a] = l.useState(!1), s = H(), { availableWidth: o } = de(), r = l.useMemo(() => {
     if (t)
       return {
         amount: t.amount,
@@ -299,50 +272,55 @@ function Et({ bubble: t, isDraggable: o, onClick: i = () => {
         radius: t.radius,
         transaction_total: t.transaction_total
       };
-  }, [
-    t.amount,
-    t.budgetColors,
-    t.guid,
-    t.radius,
-    t.transaction_total
-  ]);
+  }, [t.amount, t.budgetColors, t.guid, t.radius, t.transaction_total]);
   if (!t) return;
-  const { budgetColors: { background: g, text: d }, category: { icon: u, name: C }, guid: p, description: b, radius: f, x: _, y: S } = t, A = a < 400 ? -8 : -12;
-  let h = A, B = A;
-  f > U ? (h = -14, B = -45) : f > Ce && (B = -32);
-  let y = 32;
-  f <= U && (y = a < 400 ? 16 : 24);
-  const T = `${t.category.name}: ${b}`, M = { modifiers: [{
-    name: "offset",
-    options: { offset: [0, 15] }
-  }] }, L = (G) => {
-    (G.key === "Enter" || G.key === " ") && (G.preventDefault(), i(t));
+  const {
+    budgetColors: { background: p, text: d },
+    category: { icon: u, name: S },
+    guid: g,
+    description: h,
+    radius: _,
+    x: y,
+    y: A
+  } = t, v = o < 400 ? -8 : -12;
+  let b = v, B = v;
+  _ > U ? (b = -14, B = -45) : _ > Ce && (B = -32);
+  let f = 32;
+  _ <= U && (f = o < 400 ? 16 : 24);
+  const T = `${t.category.name}: ${h}`, L = {
+    modifiers: [
+      {
+        name: "offset",
+        options: { offset: [0, 15] }
+      }
+    ]
+  }, M = (G) => {
+    (G.key === "Enter" || G.key === " ") && (G.preventDefault(), c(t));
   }, N = () => {
-    n(!0);
+    a(!0);
   }, k = () => {
-    n(!1);
+    a(!1);
   };
-  return /* @__PURE__ */ m("g", {
-    "aria-label": `${C} - ${b}`,
-    className: "bubble",
-    id: `bubble-${p}`,
-    onBlur: k,
-    onClick: () => i(t),
-    onFocus: N,
-    onKeyDown: L,
-    onMouseEnter: () => n(!0),
-    onMouseLeave: () => n(!1),
-    role: "button",
-    style: {
-      cursor: o ? "pointer" : "default",
-      touchAction: "manipulation"
-    },
-    tabIndex: 0,
-    textAnchor: "middle",
-    x: _,
-    y: S,
-    children: [
-      /* @__PURE__ */ e("style", { children: `
+  return /* @__PURE__ */ m(
+    "g",
+    {
+      "aria-label": `${S} - ${h}`,
+      className: "bubble",
+      id: `bubble-${g}`,
+      onBlur: k,
+      onClick: () => c(t),
+      onFocus: N,
+      onKeyDown: M,
+      onMouseEnter: () => a(!0),
+      onMouseLeave: () => a(!1),
+      role: "button",
+      style: { cursor: n ? "pointer" : "default", touchAction: "manipulation" },
+      tabIndex: 0,
+      textAnchor: "middle",
+      x: y,
+      y: A,
+      children: [
+        /* @__PURE__ */ e("style", { children: `
           .bubble:focus,
           .bubble:focus-visible {
             outline: none;
@@ -354,1099 +332,1071 @@ function Et({ bubble: t, isDraggable: o, onClick: i = () => {
             stroke-opacity: 0.8;
           }
         ` }),
-      /* @__PURE__ */ e(ut, {
-        open: r,
-        slotProps: { popper: M },
-        title: T,
-        children: /* @__PURE__ */ e("circle", {
-          fill: g,
-          id: `circle-${p}`,
-          r: f
-        })
-      }),
-      /* @__PURE__ */ e("svg", {
-        x: h,
-        y: B,
-        children: /* @__PURE__ */ e(z, {
-          name: u,
-          size: y,
-          sx: { fill: d }
-        })
-      }),
-      f > U && /* @__PURE__ */ e(v, {
-        bold: !0,
-        component: "text",
-        id: `budget-category-${p}`,
-        sx: { fill: d },
-        variant: "body2",
-        y: 4,
-        children: C
-      }),
-      f > Ce && /* @__PURE__ */ e(v, {
-        bold: !0,
-        component: "text",
-        id: `budget-description-${p}-1`,
-        sx: { fill: d },
-        variant: "body1",
-        y: f <= U ? 12 : 24,
-        children: f <= U ? b.split(" ")[0] : b
-      }),
-      f <= U && f > Ce && /* @__PURE__ */ e(v, {
-        component: "text",
-        id: `budget-description-${p}-2`,
-        sx: { fill: d },
-        variant: "caption",
-        y: 28,
-        children: b.split(" ")[1]
-      }),
-      /* @__PURE__ */ e(Dt, { bubble: c })
-    ]
-  }, p);
+        /* @__PURE__ */ e(Je, { open: i, slotProps: { popper: L }, title: T, children: /* @__PURE__ */ e("circle", { fill: p, id: `circle-${g}`, r: _ }) }),
+        /* @__PURE__ */ e("svg", { x: b, y: B, children: /* @__PURE__ */ e(z, { name: u, size: f, sx: { fill: d } }) }),
+        _ > U && /* @__PURE__ */ e(
+          C,
+          {
+            bold: !0,
+            component: "text",
+            id: `budget-category-${g}`,
+            sx: { fill: d },
+            variant: "body2",
+            y: 4,
+            children: S
+          }
+        ),
+        _ > Ce && /* @__PURE__ */ e(
+          C,
+          {
+            bold: !0,
+            component: "text",
+            id: `budget-description-${g}-1`,
+            sx: { fill: d },
+            variant: "body1",
+            y: _ <= U ? 12 : 24,
+            children: _ <= U ? h.split(" ")[0] : h
+          }
+        ),
+        _ <= U && _ > Ce && /* @__PURE__ */ e(
+          C,
+          {
+            component: "text",
+            id: `budget-description-${g}-2`,
+            sx: { fill: d },
+            variant: "caption",
+            y: 28,
+            children: h.split(" ")[1]
+          }
+        ),
+        /* @__PURE__ */ e(Dt, { bubble: r })
+      ]
+    },
+    g
+  );
 }
-var wt = ({ height: t, width: o, isDraggable: i = !1, onClick: r = () => {
-} }) => {
-  const [n, s] = l.useState([]), a = l.useRef(null), c = l.useRef(!1), { detailedBudgets: g } = E(), d = l.useCallback(() => {
-    const u = a.current, C = vt(g), p = C.nodes();
+const wt = ({
+  height: t,
+  width: n,
+  isDraggable: c = !1,
+  onClick: i = () => {
+  }
+}) => {
+  const [a, s] = l.useState([]), o = l.useRef(null), r = l.useRef(!1), { detailedBudgets: p } = w(), d = l.useCallback(() => {
+    const u = o.current, S = Bt(p), g = S.nodes();
     if (u) {
-      const b = u.nodes(), f = new Map(b.map((_) => [_.guid, _]));
-      p.forEach((_) => {
-        const S = f.get(_.guid);
-        S && Object.assign(_, {
-          vx: S.vx,
-          vy: S.vy,
-          x: S.x,
-          y: S.y
+      const h = u.nodes(), _ = new Map(h.map((y) => [y.guid, y]));
+      g.forEach((y) => {
+        const A = _.get(y.guid);
+        A && Object.assign(y, {
+          vx: A.vx,
+          vy: A.vy,
+          x: A.x,
+          y: A.y
         });
       });
     }
-    a.current = C, c.current = !1, s(p);
-  }, [g]);
+    o.current = S, r.current = !1, s(g);
+  }, [p]);
   return l.useEffect(() => {
     d();
   }, [d]), l.useEffect(() => () => {
-    a.current && (a.current.stop(), a.current = null);
+    o.current && (o.current.stop(), o.current = null);
   }, []), l.useEffect(() => {
-    const u = a.current;
+    const u = o.current;
     if (!u) return;
-    const C = xt(u.nodes(), g, o > 0 && o < 450 || t > 0 && t < 300, t, o);
-    u.nodes(C), Ct(u, t, o), i && setTimeout(() => {
-      ft(u);
-    }, 0), s([...C]);
-  }, [
-    t,
-    o,
-    i,
-    g
-  ]), /* @__PURE__ */ e("svg", {
-    height: t,
-    style: {
-      overflow: "visible",
-      touchAction: "manipulation"
-    },
-    width: Math.abs(o),
-    children: n.map((u) => /* @__PURE__ */ e(Et, {
-      bubble: u,
-      isDraggable: i,
-      onClick: r
-    }, u.guid))
-  });
-}, It = I(wt), Ot = ({ isMiniWidget: t = !1, onConnectAccountsClick: o, createBudgetOnClick: i }) => {
-  const { config: r } = ke(), { recalculateBudgets: n } = E(), { spendCategories: s } = J(), { budgets: a } = w(), { availableWidth: c } = de(), { isMobile: g } = le(c), d = t && g, [u, C] = l.useState(!1), [p, b] = l.useState(!1), [f, _] = l.useState(!1), S = l.useMemo(() => [...s.filter((h) => h.totalAverageAmount > 0)], [s]), A = async () => {
-    _(!0);
-    const { data: h, isSuccess: B } = await n(S);
-    _(!1), B ? (h.length === 0 && b(!0), C(!1)) : C(!0);
+    const S = u.nodes(), g = n > 0 && n < 450 || t > 0 && t < 300, h = xt(S, p, g, t, n);
+    u.nodes(h), Ct(u, t, n), c && setTimeout(() => {
+      _t(u);
+    }, 0), s([...h]);
+  }, [t, n, c, p]), /* @__PURE__ */ e(
+    "svg",
+    {
+      height: t,
+      style: { overflow: "visible", touchAction: "manipulation" },
+      width: Math.abs(n),
+      children: a.map((u) => /* @__PURE__ */ e(Et, { bubble: u, isDraggable: c, onClick: i }, u.guid))
+    }
+  );
+}, It = I(wt), Ot = ({
+  isMiniWidget: t = !1,
+  onConnectAccountsClick: n,
+  createBudgetOnClick: c
+}) => {
+  const { config: i } = Ne(), { recalculateBudgets: a } = w(), { spendCategories: s } = q(), { budgets: o } = E(), { availableWidth: r } = de(), { isMobile: p } = ge(r), d = t && p, [u, S] = l.useState(!1), [g, h] = l.useState(!1), [_, y] = l.useState(!1), A = l.useMemo(() => [...s.filter((b) => b.totalAverageAmount > 0)], [s]), v = async () => {
+    y(!0);
+    const { data: b, isSuccess: B } = await a(A);
+    y(!1), B ? (b.length === 0 && h(!0), S(!1)) : S(!0);
   };
-  return f ? /* @__PURE__ */ e(ue, {}) : u ? /* @__PURE__ */ e(fe, {
-    header: a.autogenerate_budgets_error_header,
-    icon: "error",
-    iconColor: "#4D4D4D",
-    onClick: (h) => {
-      h === "primary" ? A() : i();
-    },
-    primaryButton: a.autogenerate_budgets_error_primary_button,
-    secondaryButton: a.zero_state_generate_budgets_secondary_button,
-    subText: a.autogenerate_budgets_error_subheader,
-    sx: {
-      width: { sm: 468 },
-      ".buttons-footer": {
-        width: 208,
-        ...d && {
-          mt: 16,
-          button: { height: "max-content" }
-        }
+  return _ ? /* @__PURE__ */ e(pe, {}) : u ? /* @__PURE__ */ e(
+    _e,
+    {
+      header: o.autogenerate_budgets_error_header,
+      icon: "error",
+      iconColor: "#4D4D4D",
+      onClick: (b) => {
+        b === "primary" ? v() : c();
       },
-      ...d && {
-        justifyContent: "center",
-        mt: 0,
-        svg: {
-          height: 32,
-          width: 32
-        }
+      primaryButton: o.autogenerate_budgets_error_primary_button,
+      secondaryButton: o.zero_state_generate_budgets_secondary_button,
+      subText: o.autogenerate_budgets_error_subheader,
+      sx: {
+        width: { sm: 468 },
+        ".buttons-footer": {
+          width: 208,
+          ...d && { mt: 16, button: { height: "max-content" } }
+        },
+        ...d && { justifyContent: "center", mt: 0, svg: { height: 32, width: 32 } }
       }
     }
-  }) : /* @__PURE__ */ e(rt, { children: p ? /* @__PURE__ */ e(fe, {
-    header: a.zero_state_generate_budgets_header,
-    icon: "error",
-    iconColor: "#4D4D4D",
-    onClick: (h) => {
-      h === "primary" ? o() : i();
-    },
-    primaryButton: r.show_connections_widget_in_master ? a.zero_state_generate_budgets_primary_button : void 0,
-    secondaryButton: a.zero_state_generate_budgets_secondary_button,
-    subText: a.zero_state_generate_budgets_subheader,
-    sx: {
-      width: t ? "100%" : { sm: 500 },
-      height: t ? "100%" : { sm: 468 },
-      mt: d ? 0 : 50,
-      ".buttons-footer": {
-        width: 208,
-        height: 100,
-        ...d && {
-          mt: 16,
-          button: { height: "max-content" }
-        }
+  ) : /* @__PURE__ */ e(Ve, { children: g ? /* @__PURE__ */ e(
+    _e,
+    {
+      header: o.zero_state_generate_budgets_header,
+      icon: "error",
+      iconColor: "#4D4D4D",
+      onClick: (b) => {
+        b === "primary" ? n() : c();
       },
-      padding: t ? 5 : 0,
-      ...d && {
-        justifyContent: "center",
-        svg: {
-          height: 32,
-          width: 32
-        }
+      primaryButton: i.show_connections_widget_in_master ? o.zero_state_generate_budgets_primary_button : void 0,
+      secondaryButton: o.zero_state_generate_budgets_secondary_button,
+      subText: o.zero_state_generate_budgets_subheader,
+      sx: {
+        width: t ? "100%" : { sm: 500 },
+        height: t ? "100%" : { sm: 468 },
+        mt: d ? 0 : 50,
+        ".buttons-footer": {
+          width: 208,
+          height: 100,
+          ...d && { mt: 16, button: { height: "max-content" } }
+        },
+        padding: t ? 5 : 0,
+        ...d && { justifyContent: "center", svg: { height: 32, width: 32 } }
       }
     }
-  }) : /* @__PURE__ */ e(fe, {
-    header: a.create_budgets_title,
-    icon: "bubble_chart",
-    iconColor: "#1A1A1A",
-    onClick: (h) => {
-      h === "primary" ? A() : i();
-    },
-    primaryButton: a.empty_state_primary_button,
-    secondaryButton: t ? void 0 : a.empty_state_secondary_button,
-    subText: a.empty_state_subheader,
-    sx: {
-      width: t ? "100%" : { sm: 432 },
-      height: t ? "100%" : { sm: 468 },
-      mt: d ? 0 : 50,
-      ".buttons-footer": {
-        width: 208,
-        height: 100,
-        ...d && {
-          mt: 24,
-          button: { height: "max-content" }
-        }
+  ) : /* @__PURE__ */ e(
+    _e,
+    {
+      header: o.create_budgets_title,
+      icon: "bubble_chart",
+      iconColor: "#1A1A1A",
+      onClick: (b) => {
+        b === "primary" ? v() : c();
       },
-      padding: t ? 4 : 0,
-      ...d && {
-        justifyContent: "center",
-        svg: {
-          height: 32,
-          width: 32
-        }
+      primaryButton: o.empty_state_primary_button,
+      secondaryButton: t ? void 0 : o.empty_state_secondary_button,
+      subText: o.empty_state_subheader,
+      sx: {
+        width: t ? "100%" : { sm: 432 },
+        height: t ? "100%" : { sm: 468 },
+        mt: d ? 0 : 50,
+        ".buttons-footer": {
+          width: 208,
+          height: 100,
+          ...d && { mt: 24, button: { height: "max-content" } }
+        },
+        padding: t ? 4 : 0,
+        ...d && { justifyContent: "center", svg: { height: 32, width: 32 } }
       }
     }
-  }) });
-}, We = I(({ createBudgetOnClick: t = () => {
-}, height: o, isDraggable: i = !1, isMiniWidget: r = !1, shouldShowZeroState: n, unavailableWidth: s = 24 }) => {
-  const { onEvent: a } = Z(), { setSelectedBudget: c } = E(), { isInitialized: g } = q(), { accounts: d } = w(), { availableWidth: u } = de(), { isMobile: C } = le(), [p, b] = l.useState(!1), f = l.useMemo(() => u - s, [u]), _ = (A) => {
-    c(A), a(P.BUDGETS_CLICK_BUDGET_CATEGORY, {
-      budget_category: A.category.name,
-      click_type: "bubble"
-    });
-  }, S = () => {
-    b(!0), a(P.ACCOUNTS_CLICK_CONNECT);
-  };
-  return /* @__PURE__ */ m(Q, {
-    ml: n || C ? 0 : 24,
-    sx: {
-      alignSelf: "center",
-      ...r && { height: "100%" }
-    },
-    children: [n || !g ? /* @__PURE__ */ e(Ot, {
-      createBudgetOnClick: t,
-      isMiniWidget: r,
-      onConnectAccountsClick: S
-    }) : /* @__PURE__ */ e(It, {
-      height: o,
-      isDraggable: i,
-      onClick: _,
-      width: f
-    }), /* @__PURE__ */ e(tt, {
-      onClose: () => b(!1),
-      showConnectionsWidget: p,
-      title: d.manage_connections
-    })]
-  });
-}), He = ({ budget: t }) => {
-  const { amount: o, budgetColors: { background: i }, category: { name: r }, category_guid: n, percentage: s, transaction_total: a } = t, c = [{
-    color: i,
-    percentage: `${s}%`
-  }];
-  return /* @__PURE__ */ e(xe, {
-    sx: {
-      mt: 24,
-      mx: 24
+  ) });
+}, We = I(
+  ({
+    createBudgetOnClick: t = () => {
     },
-    children: /* @__PURE__ */ e(Ae, { children: /* @__PURE__ */ m(x, {
-      alignItems: "center",
-      gap: 16,
-      children: [
-        /* @__PURE__ */ e(H, {
-          categoryGuid: n,
-          size: 56
-        }),
-        /* @__PURE__ */ e(v, {
-          variant: "h1",
-          children: `${D(a, "0,0")} / ${D(o, "0,0")}`
-        }),
-        /* @__PURE__ */ e(v, {
-          bold: !0,
-          variant: "caption",
-          children: r
-        }),
-        /* @__PURE__ */ e(ve, {
-          data: c,
-          height: 10
-        })
-      ]
-    }) })
-  });
-}, Rt = I(() => {
-  const { budgets: t } = w();
-  return /* @__PURE__ */ m(x, {
-    alignItems: "center",
-    gap: 12,
-    height: "auto",
-    mb: 24,
-    mt: 24,
-    children: [
-      /* @__PURE__ */ e(z, {
-        color: "action",
-        name: "bubble_chart",
-        sx: { fontSize: 32 }
-      }),
-      /* @__PURE__ */ e(v, {
-        bold: !0,
-        color: "text.secondary",
-        variant: "body2",
-        children: t.zero_state_no_sub_budgets
-      }),
-      /* @__PURE__ */ e(v, {
-        color: "text.secondary",
-        variant: "caption",
-        children: t.zero_state_no_sub_budgets_description
-      })
-    ]
-  });
-}), Mt = I(({ budget: t }) => {
-  const { amount: o, budgetColors: { background: i }, category: r, percentage: n, transaction_total: s } = t, { setSelectedSubBudget: a } = E();
-  return /* @__PURE__ */ e(te, { children: /* @__PURE__ */ m(ne, {
-    onClick: () => a(t),
-    children: [/* @__PURE__ */ e(pe, {
-      sx: {
-        mb: -8,
-        mr: 16
-      },
-      children: /* @__PURE__ */ e(Le, {
-        color: i,
-        percent: n,
-        size: 40,
-        children: /* @__PURE__ */ e(H, {
-          categoryGuid: r.parent_guid,
-          variant: "basic"
-        })
-      })
-    }), /* @__PURE__ */ e(ae, {
-      primary: /* @__PURE__ */ e(x, {
-        component: "span",
-        direction: "row",
-        justifyContent: "space-between",
-        children: /* @__PURE__ */ e(v, {
-          bold: !0,
-          variant: "body1",
-          children: t.category.name
-        })
-      }),
-      secondary: /* @__PURE__ */ e(x, {
-        component: "span",
-        direction: "row",
-        justifyContent: "space-between",
-        children: /* @__PURE__ */ e(v, {
-          fontWeight: 400,
-          variant: "body1",
-          children: `
+    height: n,
+    isDraggable: c = !1,
+    isMiniWidget: i = !1,
+    shouldShowZeroState: a,
+    unavailableWidth: s = 24
+  }) => {
+    const { onEvent: o } = J(), { setSelectedBudget: r } = w(), { isInitialized: p } = Q(), { accounts: d } = E(), { availableWidth: u } = de(), { isMobile: S } = ge(), [g, h] = l.useState(!1), _ = l.useMemo(() => u - s, [u]), y = (v) => {
+      r(v), o(P.BUDGETS_CLICK_BUDGET_CATEGORY, {
+        budget_category: v.category.name,
+        click_type: "bubble"
+      });
+    }, A = () => {
+      h(!0), o(P.ACCOUNTS_CLICK_CONNECT);
+    };
+    return /* @__PURE__ */ m(
+      X,
+      {
+        ml: a || S ? 0 : 24,
+        sx: { alignSelf: "center", ...i && { height: "100%" } },
+        children: [
+          a || !p ? /* @__PURE__ */ e(
+            Ot,
+            {
+              createBudgetOnClick: t,
+              isMiniWidget: i,
+              onConnectAccountsClick: A
+            }
+          ) : /* @__PURE__ */ e(
+            It,
+            {
+              height: n,
+              isDraggable: c,
+              onClick: y,
+              width: _
+            }
+          ),
+          /* @__PURE__ */ e(
+            qe,
+            {
+              onClose: () => h(!1),
+              showConnectionsWidget: g,
+              title: d.manage_connections
+            }
+          )
+        ]
+      }
+    );
+  }
+), He = ({ budget: t }) => {
+  const {
+    amount: n,
+    budgetColors: { background: c },
+    category: { name: i },
+    category_guid: a,
+    percentage: s,
+    transaction_total: o
+  } = t, r = [
+    {
+      color: c,
+      percentage: `${s}%`
+    }
+  ];
+  return /* @__PURE__ */ e(Te, { sx: { mt: 24, mx: 24 }, children: /* @__PURE__ */ e(De, { children: /* @__PURE__ */ m(x, { alignItems: "center", gap: 16, children: [
+    /* @__PURE__ */ e(V, { categoryGuid: a, size: 56 }),
+    /* @__PURE__ */ e(C, { variant: "h1", children: `${D(o, "0,0")} / ${D(n, "0,0")}` }),
+    /* @__PURE__ */ e(C, { bold: !0, variant: "caption", children: i }),
+    /* @__PURE__ */ e(Se, { data: r, height: 10 })
+  ] }) }) });
+}, Mt = I(() => {
+  const { budgets: t } = E();
+  return /* @__PURE__ */ m(x, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
+    /* @__PURE__ */ e(z, { color: "action", name: "bubble_chart", sx: { fontSize: 32 } }),
+    /* @__PURE__ */ e(C, { bold: !0, color: "text.secondary", variant: "body2", children: t.zero_state_no_sub_budgets }),
+    /* @__PURE__ */ e(C, { color: "text.secondary", variant: "caption", children: t.zero_state_no_sub_budgets_description })
+  ] });
+}), Rt = I(({ budget: t }) => {
+  const {
+    amount: n,
+    budgetColors: { background: c },
+    category: i,
+    percentage: a,
+    transaction_total: s
+  } = t, { setSelectedSubBudget: o } = w();
+  return /* @__PURE__ */ e(te, { children: /* @__PURE__ */ m(oe, { onClick: () => o(t), children: [
+    /* @__PURE__ */ e(me, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(Ge, { color: c, percent: a, size: 40, children: /* @__PURE__ */ e(V, { categoryGuid: i.parent_guid, variant: "basic" }) }) }),
+    /* @__PURE__ */ e(
+      ne,
+      {
+        primary: /* @__PURE__ */ e(x, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(C, { bold: !0, variant: "body1", children: t.category.name }) }),
+        secondary: /* @__PURE__ */ e(x, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(C, { fontWeight: 400, variant: "body1", children: `
                   ${D(s, "0,0")} / 
-                  ${D(o, "0,0")}
-                `
-        })
-      })
-    })]
-  }) });
-}), Lt = I(({ category: t, parentBudget: o }) => {
-  const { budgets: i, common: r } = w(), { setExpandedGuid: n, setOnSelect: s } = et(), { addBudget: a } = E(), [c, g] = l.useState(!1), [d, u] = l.useState(!1), [C, p] = l.useState(""), [b, f] = l.useState(void 0);
+                  ${D(n, "0,0")}
+                ` }) })
+      }
+    )
+  ] }) });
+}), Lt = I(({ category: t, parentBudget: n }) => {
+  const { budgets: c, common: i } = E(), { setExpandedGuid: a, setOnSelect: s } = nt(), { addBudget: o } = w(), [r, p] = l.useState(!1), [d, u] = l.useState(!1), [S, g] = l.useState(""), [h, _] = l.useState(void 0);
   l.useEffect(() => {
-    s((A) => {
-      const h = t.subCategories.find((B) => B.guid === A);
-      h && (f(h), p(`${h.currentAmount === 0 ? "" : h.currentAmount}`), u(!0));
+    s((v) => {
+      const b = t.subCategories.find((B) => B.guid === v);
+      b && (_(b), g(`${b.currentAmount === 0 ? "" : b.currentAmount}`), u(!0));
     });
   }, []);
-  const _ = () => {
-    n(t.guid), g(!0);
-  }, S = async () => {
-    b && Number(C) > 0 && (await a(b, Number(C), o.guid), u(!1), g(!1), f(void 0));
+  const y = () => {
+    a(t.guid), p(!0);
+  }, A = async () => {
+    h && Number(S) > 0 && (await o(h, Number(S), n.guid), u(!1), p(!1), _(void 0));
   };
-  return /* @__PURE__ */ m(Q, { children: [
-    /* @__PURE__ */ e(te, {
-      disableGutters: !0,
-      disablePadding: !0,
-      sx: { bgcolor: "background.paper" },
-      children: /* @__PURE__ */ e(ne, {
-        onClick: _,
-        children: /* @__PURE__ */ e(ae, { children: /* @__PURE__ */ m(x, {
-          alignItems: "center",
-          direction: "row",
-          justifyContent: "space-between",
-          children: [/* @__PURE__ */ m(x, {
-            alignItems: "center",
-            direction: "row",
-            gap: 8,
-            children: [/* @__PURE__ */ e(z, {
-              fill: !0,
-              name: "add_box",
-              size: 24,
-              sx: { color: "primary.light" }
-            }), /* @__PURE__ */ e(v, {
-              bold: !0,
-              sx: { color: "primary.light" },
-              variant: "body1",
-              children: i.add_sub_budget_button
-            })]
-          }), /* @__PURE__ */ e(z, {
-            name: "chevron_right",
-            size: 24,
-            sx: { color: "primary.light" }
-          })]
-        }) })
-      })
-    }),
-    /* @__PURE__ */ e(ge, {}),
-    /* @__PURE__ */ e($, {
-      ariaLabelClose: r.close_aria,
-      isOpen: c,
-      onClose: () => g(!1),
-      title: i.add_sub_budget_title,
-      children: /* @__PURE__ */ e(ee, { children: /* @__PURE__ */ e(Qe, {
-        category: t,
-        subCategories: t.subCategories
-      }) })
-    }),
-    /* @__PURE__ */ e(W, {
-      copy: {
-        close_aria: r.close_aria,
-        title: i.add_title
-      },
-      disablePrimaryButton: Number(C) <= 0,
-      isOpen: d,
-      onClose: () => u(!1),
-      onPrimaryAction: S,
-      primaryText: i.add_save_button,
-      children: /* @__PURE__ */ e(he, {
-        amount: C,
-        categoryName: b?.name || "",
-        onAmountChanged: p
-      })
-    })
+  return /* @__PURE__ */ m(X, { children: [
+    /* @__PURE__ */ e(te, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(oe, { onClick: y, children: /* @__PURE__ */ e(ne, { children: /* @__PURE__ */ m(x, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
+      /* @__PURE__ */ m(x, { alignItems: "center", direction: "row", gap: 8, children: [
+        /* @__PURE__ */ e(z, { fill: !0, name: "add_box", size: 24, sx: { color: "primary.light" } }),
+        /* @__PURE__ */ e(C, { bold: !0, sx: { color: "primary.light" }, variant: "body1", children: c.add_sub_budget_button })
+      ] }),
+      /* @__PURE__ */ e(z, { name: "chevron_right", size: 24, sx: { color: "primary.light" } })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(ue, {}),
+    /* @__PURE__ */ e(
+      $,
+      {
+        ariaLabelClose: i.close_aria,
+        isOpen: r,
+        onClose: () => p(!1),
+        title: c.add_sub_budget_title,
+        children: /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(at, { category: t, subCategories: t.subCategories }) })
+      }
+    ),
+    /* @__PURE__ */ e(
+      W,
+      {
+        copy: { close_aria: i.close_aria, title: c.add_title },
+        disablePrimaryButton: Number(S) <= 0,
+        isOpen: d,
+        onClose: () => u(!1),
+        onPrimaryAction: A,
+        primaryText: c.add_save_button,
+        children: /* @__PURE__ */ e(
+          he,
+          {
+            amount: S,
+            categoryName: h?.name || "",
+            onAmountChanged: g
+          }
+        )
+      }
+    )
   ] });
 }), Nt = I(({ budget: t }) => {
-  const { category: o, subBudgets: i } = t, { budgets: r, common: n } = w(), { deleteBudget: s, selectedSubBudget: a, setSelectedSubBudget: c, updateBudget: g } = E(), { filter: d, setFilter: u } = X(), [C, p] = l.useState(!1), [b, f] = l.useState(!1), [_, S] = l.useState("");
+  const { category: n, subBudgets: c } = t, { budgets: i, common: a } = E(), { deleteBudget: s, selectedSubBudget: o, setSelectedSubBudget: r, updateBudget: p } = w(), { filter: d, setFilter: u } = ee(), [S, g] = l.useState(!1), [h, _] = l.useState(!1), [y, A] = l.useState("");
   l.useEffect(() => {
-    a && (S(`${a.amount}`), u({
+    o && (A(`${o.amount}`), u({
       ...d,
-      custom: (y) => y.category_guid === a.category_guid
+      custom: (f) => f.category_guid === o.category_guid
     }));
-  }, [a]);
-  const A = async () => {
-    a && await g({
-      ...a,
-      amount: Number(_)
+  }, [o]);
+  const v = async () => {
+    o && await p({
+      ...o,
+      amount: Number(y)
     });
-  }, h = async () => {
-    a && await s(a.guid), f(!1), B();
+  }, b = async () => {
+    o && await s(o.guid), _(!1), B();
   }, B = () => {
     u({
       ...d,
-      custom: (y) => y.category_guid === t.category_guid || y.top_level_category_guid === t.category_guid
-    }), c(void 0);
+      custom: (f) => f.category_guid === t.category_guid || f.top_level_category_guid === t.category_guid
+    }), r(void 0);
   };
   return /* @__PURE__ */ m(l.Fragment, { children: [
-    /* @__PURE__ */ m(ee, {
-      sx: { bgcolor: "background.paper" },
-      children: [i.length === 0 ? /* @__PURE__ */ e(Rt, {}) : i.map((y) => /* @__PURE__ */ m(l.Fragment, { children: [/* @__PURE__ */ e(Mt, { budget: y }), /* @__PURE__ */ e(ge, {})] }, y.guid)), /* @__PURE__ */ e(Lt, {
-        category: o,
-        parentBudget: t
-      })]
-    }),
-    /* @__PURE__ */ e($, {
-      ariaLabelClose: n.close_aria,
-      isOpen: !!a,
-      onClose: B,
-      onPrimaryAction: () => p(!0),
-      onSecondaryAction: () => f(!0),
-      primaryText: r.details_edit_button,
-      secondaryText: r.details_delete_button,
-      title: r.details_title,
-      children: a && /* @__PURE__ */ m(x, {
-        gap: 24,
-        children: [/* @__PURE__ */ e(He, { budget: a }), /* @__PURE__ */ e(Se, { height: "100%" })]
-      })
-    }),
-    a && /* @__PURE__ */ m(l.Fragment, { children: [/* @__PURE__ */ e(W, {
-      copy: {
-        close_aria: n.close_aria,
-        title: r.details_edit_title
-      },
-      disablePrimaryButton: Number(_) <= 0,
-      isOpen: C,
-      onClose: () => p(!1),
-      onPrimaryAction: A,
-      primaryText: r.edit_save_button,
-      children: /* @__PURE__ */ e(he, {
-        amount: _,
-        categoryName: a.category.name,
-        onAmountChanged: S
-      })
-    }), /* @__PURE__ */ e(W, {
-      copy: {
-        close_aria: n.close_aria,
-        title: r.delete_title
-      },
-      isOpen: b,
-      onClose: () => f(!1),
-      onPrimaryAction: h,
-      primaryColor: "error",
-      primaryText: "Delete",
-      secondaryColor: "secondary",
-      children: /* @__PURE__ */ e(v, {
-        variant: "subtitle1",
-        children: R(r.delete_description, a.category.name)
-      })
-    })] })
+    /* @__PURE__ */ m(Z, { sx: { bgcolor: "background.paper" }, children: [
+      c.length === 0 ? /* @__PURE__ */ e(Mt, {}) : c.map((f) => /* @__PURE__ */ m(l.Fragment, { children: [
+        /* @__PURE__ */ e(Rt, { budget: f }),
+        /* @__PURE__ */ e(ue, {})
+      ] }, f.guid)),
+      /* @__PURE__ */ e(Lt, { category: n, parentBudget: t })
+    ] }),
+    /* @__PURE__ */ e(
+      $,
+      {
+        ariaLabelClose: a.close_aria,
+        isOpen: !!o,
+        onClose: B,
+        onPrimaryAction: () => g(!0),
+        onSecondaryAction: () => _(!0),
+        primaryText: i.details_edit_button,
+        secondaryText: i.details_delete_button,
+        title: i.details_title,
+        children: o && /* @__PURE__ */ m(x, { gap: 24, children: [
+          /* @__PURE__ */ e(He, { budget: o }),
+          /* @__PURE__ */ e(ve, { height: "100%" })
+        ] })
+      }
+    ),
+    o && /* @__PURE__ */ m(l.Fragment, { children: [
+      /* @__PURE__ */ e(
+        W,
+        {
+          copy: { close_aria: a.close_aria, title: i.details_edit_title },
+          disablePrimaryButton: Number(y) <= 0,
+          isOpen: S,
+          onClose: () => g(!1),
+          onPrimaryAction: v,
+          primaryText: i.edit_save_button,
+          children: /* @__PURE__ */ e(
+            he,
+            {
+              amount: y,
+              categoryName: o.category.name,
+              onAmountChanged: A
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        W,
+        {
+          copy: { close_aria: a.close_aria, title: i.delete_title },
+          isOpen: h,
+          onClose: () => _(!1),
+          onPrimaryAction: b,
+          primaryColor: "error",
+          primaryText: "Delete",
+          secondaryColor: "secondary",
+          children: /* @__PURE__ */ e(C, { variant: "subtitle1", children: R(i.delete_description, o.category.name) })
+        }
+      )
+    ] })
   ] });
 }), kt = I(({ budget: t }) => {
-  const { is_mobile_webview: o } = ke(), { setAlert: i } = E(), { budgets: r, common: n, transactions: s } = w(), { isDesktop: a, isSmallTablet: c, isTablet: g } = le(), { sortedTransactions: d, sortedTransactionsWithSplits: u, tags: C } = X(), [p, b] = l.useState(0), [f, _] = l.useState(""), S = l.useMemo(() => d.find((y) => y.guid === f), [f, d]), A = (y, T) => {
-    b(T);
-  }, h = () => {
-    Ye(u, C), i(r.alert_csv_downloaded);
-  }, B = d.length > 0 && !o && (a || g && !c);
-  return /* @__PURE__ */ m(x, {
-    gap: 24,
-    children: [/* @__PURE__ */ e(He, { budget: t }), /* @__PURE__ */ m(x, { children: [
-      /* @__PURE__ */ m(ct, {
-        onChange: A,
-        sx: { width: "100%" },
-        textColor: "primary",
-        value: p,
-        variant: "fullWidth",
-        children: [/* @__PURE__ */ e(we, { label: r.details_transactions_tab }), /* @__PURE__ */ e(we, { label: r.details_subbudgets_tab })]
-      }),
-      p === 0 && /* @__PURE__ */ m(x, { children: [B && /* @__PURE__ */ e(x, {
-        direction: "row",
-        justifyContent: "right",
-        mb: -24,
-        mr: 8,
-        mt: 8,
-        zIndex: 1,
-        children: /* @__PURE__ */ e(Pe, {
-          onClick: h,
-          startIcon: /* @__PURE__ */ e(z, { name: "ios_share" }),
-          variant: "text",
-          children: s.export_csv_btn
-        })
-      }), /* @__PURE__ */ e(Se, {
-        height: "100%",
-        onClick: _
-      })] }),
-      p === 1 && /* @__PURE__ */ e(Nt, { budget: t }),
-      /* @__PURE__ */ e($, {
-        ariaLabelClose: n.close_aria,
-        isOpen: !!S,
-        onClose: () => _(""),
-        title: r.details_transaction_drawer,
-        children: S && /* @__PURE__ */ e(Je, { transaction: S })
-      })
-    ] })]
-  });
+  const { is_mobile_webview: n } = Ne(), { setAlert: c } = w(), { budgets: i, common: a, transactions: s } = E(), { isDesktop: o, isSmallTablet: r, isTablet: p } = ge(), {
+    sortedTransactions: d,
+    sortedTransactionsWithSplits: u,
+    tags: S
+  } = ee(), [g, h] = l.useState(0), [_, y] = l.useState(""), A = l.useMemo(
+    () => d.find((f) => f.guid === _),
+    [_, d]
+  ), v = (f, T) => {
+    h(T);
+  }, b = () => {
+    et(u, S), c(i.alert_csv_downloaded);
+  }, B = d.length > 0 && !n && (o || p && !r);
+  return /* @__PURE__ */ m(x, { gap: 24, children: [
+    /* @__PURE__ */ e(He, { budget: t }),
+    /* @__PURE__ */ m(x, { children: [
+      /* @__PURE__ */ m(
+        Qe,
+        {
+          onChange: v,
+          sx: { width: "100%" },
+          textColor: "primary",
+          value: g,
+          variant: "fullWidth",
+          children: [
+            /* @__PURE__ */ e(Ee, { label: i.details_transactions_tab }),
+            /* @__PURE__ */ e(Ee, { label: i.details_subbudgets_tab })
+          ]
+        }
+      ),
+      g === 0 && /* @__PURE__ */ m(x, { children: [
+        B && /* @__PURE__ */ e(x, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ e(
+          $e,
+          {
+            onClick: b,
+            startIcon: /* @__PURE__ */ e(z, { name: "ios_share" }),
+            variant: "text",
+            children: s.export_csv_btn
+          }
+        ) }),
+        /* @__PURE__ */ e(ve, { height: "100%", onClick: y })
+      ] }),
+      g === 1 && /* @__PURE__ */ e(Nt, { budget: t }),
+      /* @__PURE__ */ e(
+        $,
+        {
+          ariaLabelClose: a.close_aria,
+          isOpen: !!A,
+          onClose: () => y(""),
+          title: i.details_transaction_drawer,
+          children: A && /* @__PURE__ */ e(tt, { transaction: A })
+        }
+      )
+    ] })
+  ] });
 }), $t = I(() => {
-  const { selectedAccountGuids: t } = q(), { budgets: o, common: i } = w(), { alert: r, dateRange: n, deleteBudget: s, selectedBudget: a, selectedSubBudget: c, setAlert: g, setSelectedBudget: d, updateBudget: u } = E(), { setFilter: C } = X(), [p, b] = l.useState(!1), [f, _] = l.useState(!1), [S, A] = l.useState(!1), [h, B] = l.useState("");
+  const { selectedAccountGuids: t } = Q(), { budgets: n, common: c } = E(), {
+    alert: i,
+    dateRange: a,
+    deleteBudget: s,
+    selectedBudget: o,
+    selectedSubBudget: r,
+    setAlert: p,
+    setSelectedBudget: d,
+    updateBudget: u
+  } = w(), { setFilter: S } = ee(), [g, h] = l.useState(!1), [_, y] = l.useState(!1), [A, v] = l.useState(!1), [b, B] = l.useState("");
   l.useEffect(() => {
-    a && !c && (B(`${a.amount}`), b(!0), C({
+    o && !r && (B(`${o.amount}`), h(!0), S({
       accounts: t,
-      dateRange: n,
-      custom: (N) => N.category_guid === a.category_guid || N.top_level_category_guid === a.category_guid,
+      dateRange: a,
+      custom: (N) => N.category_guid === o.category_guid || N.top_level_category_guid === o.category_guid,
       showSplits: !0
     }));
-  }, [a]);
-  const y = async () => {
-    a && (await u({
-      ...a,
-      amount: Number(h),
-      percentage: a.category.totalAmount / Number(h) * 100
-    }), _(!1), g(R(o.alert_budget_updated, a.category.name)));
+  }, [o]);
+  const f = async () => {
+    o && (await u({
+      ...o,
+      amount: Number(b),
+      percentage: o.category.totalAmount / Number(b) * 100
+    }), y(!1), p(R(n.alert_budget_updated, o.category.name)));
   }, T = async () => {
-    a && (await s(a.guid), g(R(o.alert_budget_deleted, a.category.name))), M();
-  }, M = () => {
-    b(!1), setTimeout(() => {
+    o && (await s(o.guid), p(R(n.alert_budget_deleted, o.category.name))), L();
+  }, L = () => {
+    h(!1), setTimeout(() => {
       d(void 0);
     }, 250);
-  }, L = () => {
-    _(!1), B(`${a?.amount}`);
+  }, M = () => {
+    y(!1), B(`${o?.amount}`);
   };
-  if (a)
+  if (o)
     return /* @__PURE__ */ m(l.Fragment, { children: [
-      /* @__PURE__ */ m($, {
-        ariaLabelClose: i.close_aria,
-        isOpen: p,
-        onClose: M,
-        onPrimaryAction: () => _(!0),
-        onSecondaryAction: () => A(!0),
-        primaryText: o.details_edit_button,
-        secondaryColor: "error",
-        secondaryText: o.details_delete_button,
-        title: o.details_title,
-        children: [/* @__PURE__ */ e(kt, { budget: a }), /* @__PURE__ */ e(De, {
-          anchorOrigin: {
-            vertical: "bottom",
-            horizontal: "right"
-          },
-          autoHideDuration: 3500,
-          onClose: () => g(""),
-          open: !!r,
-          children: /* @__PURE__ */ e(Te, {
-            closeText: "",
-            onClose: () => g(""),
-            severity: "success",
-            variant: "filled",
-            children: r
-          })
-        })]
-      }),
-      /* @__PURE__ */ e(W, {
-        copy: {
-          close_aria: i.close_aria,
-          title: o.details_edit_title
-        },
-        disablePrimaryButton: Number(h) <= 0,
-        isOpen: f,
-        onClose: L,
-        onPrimaryAction: y,
-        onSecondaryAction: L,
-        primaryText: o.edit_save_button,
-        children: /* @__PURE__ */ e(he, {
-          amount: h,
-          categoryName: a.category.name,
-          onAmountChanged: B
-        })
-      }),
-      /* @__PURE__ */ e(W, {
-        copy: {
-          close_aria: i.close_aria,
-          title: o.delete_title
-        },
-        isOpen: S,
-        onClose: () => A(!1),
-        onPrimaryAction: T,
-        primaryColor: "error",
-        primaryText: o.details_delete_button,
-        secondaryColor: "secondary",
-        children: /* @__PURE__ */ e(v, {
-          variant: "subtitle1",
-          children: R(o.delete_description, a.category.name)
-        })
-      })
+      /* @__PURE__ */ m(
+        $,
+        {
+          ariaLabelClose: c.close_aria,
+          isOpen: g,
+          onClose: L,
+          onPrimaryAction: () => y(!0),
+          onSecondaryAction: () => v(!0),
+          primaryText: n.details_edit_button,
+          secondaryColor: "error",
+          secondaryText: n.details_delete_button,
+          title: n.details_title,
+          children: [
+            /* @__PURE__ */ e(kt, { budget: o }),
+            /* @__PURE__ */ e(
+              xe,
+              {
+                anchorOrigin: { vertical: "bottom", horizontal: "right" },
+                autoHideDuration: 3500,
+                onClose: () => p(""),
+                open: !!i,
+                children: /* @__PURE__ */ e(Ae, { closeText: "", onClose: () => p(""), severity: "success", variant: "filled", children: i })
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        W,
+        {
+          copy: { close_aria: c.close_aria, title: n.details_edit_title },
+          disablePrimaryButton: Number(b) <= 0,
+          isOpen: _,
+          onClose: M,
+          onPrimaryAction: f,
+          onSecondaryAction: M,
+          primaryText: n.edit_save_button,
+          children: /* @__PURE__ */ e(
+            he,
+            {
+              amount: b,
+              categoryName: o.category.name,
+              onAmountChanged: B
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        W,
+        {
+          copy: { close_aria: c.close_aria, title: n.delete_title },
+          isOpen: A,
+          onClose: () => v(!1),
+          onPrimaryAction: T,
+          primaryColor: "error",
+          primaryText: n.details_delete_button,
+          secondaryColor: "secondary",
+          children: /* @__PURE__ */ e(C, { variant: "subtitle1", children: R(n.delete_description, o.category.name) })
+        }
+      )
     ] });
-}), Gt = ({ budget: t, onClick: o }) => {
-  const { amount: i, budgetColors: { background: r, description: n }, category_guid: s, description: a, percentage: c, subBudgets: g, transaction_total: d } = t, u = c > 100;
-  return /* @__PURE__ */ e(te, { children: /* @__PURE__ */ m(ne, {
-    onClick: () => o?.(t),
-    children: [/* @__PURE__ */ e(pe, {
-      sx: {
-        mb: -8,
-        mr: 16
-      },
-      children: /* @__PURE__ */ e(Le, {
-        color: r,
-        percent: c,
-        size: 40,
-        children: /* @__PURE__ */ e(H, {
-          categoryGuid: s,
-          variant: "basic"
-        })
-      })
-    }), /* @__PURE__ */ e(ae, {
-      primary: /* @__PURE__ */ m(x, {
-        component: "span",
-        direction: "row",
-        justifyContent: "space-between",
-        children: [/* @__PURE__ */ e(v, {
-          bold: !0,
-          variant: "body1",
-          children: t.category.name
-        }), /* @__PURE__ */ e(v, {
-          fontWeight: 400,
-          variant: "body1",
-          children: `
+}), Gt = ({ budget: t, onClick: n }) => {
+  const {
+    amount: c,
+    budgetColors: { background: i, description: a },
+    category_guid: s,
+    description: o,
+    percentage: r,
+    subBudgets: p,
+    transaction_total: d
+  } = t, u = r > 100;
+  return /* @__PURE__ */ e(te, { children: /* @__PURE__ */ m(oe, { onClick: () => n?.(t), children: [
+    /* @__PURE__ */ e(me, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(Ge, { color: i, percent: r, size: 40, children: /* @__PURE__ */ e(V, { categoryGuid: s, variant: "basic" }) }) }),
+    /* @__PURE__ */ e(
+      ne,
+      {
+        primary: /* @__PURE__ */ m(x, { component: "span", direction: "row", justifyContent: "space-between", children: [
+          /* @__PURE__ */ e(C, { bold: !0, variant: "body1", children: t.category.name }),
+          /* @__PURE__ */ e(C, { fontWeight: 400, variant: "body1", children: `
                   ${D(d, "0,0")} /
-                  ${D(i, "0,0")}
-                `
-        })]
-      }),
-      secondary: /* @__PURE__ */ m(x, {
-        component: "span",
-        direction: "row",
-        justifyContent: "space-between",
-        children: [/* @__PURE__ */ e(v, {
-          variant: "caption",
-          children: `${g.length} Sub-budgets`
-        }), /* @__PURE__ */ e(v, {
-          bold: u,
-          sx: {
-            color: n,
-            ...u && { ".MuiListItemButton-root:hover &, .MuiListItemButton-root:active &": { color: "error.dark" } }
-          },
-          variant: "caption",
-          children: a
-        })]
-      })
-    })]
-  }) });
+                  ${D(c, "0,0")}
+                ` })
+        ] }),
+        secondary: /* @__PURE__ */ m(x, { component: "span", direction: "row", justifyContent: "space-between", children: [
+          /* @__PURE__ */ e(C, { variant: "caption", children: `${p.length} Sub-budgets` }),
+          /* @__PURE__ */ e(
+            C,
+            {
+              bold: u,
+              sx: {
+                color: a,
+                ...u && {
+                  ".MuiListItemButton-root:hover &, .MuiListItemButton-root:active &": {
+                    color: "error.dark"
+                  }
+                }
+              },
+              variant: "caption",
+              children: o
+            }
+          )
+        ] })
+      }
+    )
+  ] }) });
 }, Pt = I(() => {
-  const { onEvent: t } = Z(), { budgets: o } = w(), { detailedBudgets: i, setSelectedBudget: r } = E(), n = (s) => {
-    r(s), t(P.BUDGETS_CLICK_BUDGET_CATEGORY, {
+  const { onEvent: t } = J(), { budgets: n } = E(), { detailedBudgets: c, setSelectedBudget: i } = w(), a = (s) => {
+    i(s), t(P.BUDGETS_CLICK_BUDGET_CATEGORY, {
       budget_category: s.category.name,
       click_type: "list"
     });
   };
-  return /* @__PURE__ */ m(xe, {
-    elevation: 2,
-    children: [/* @__PURE__ */ e(je, {
-      sx: {
-        pb: 8,
-        pl: 24
-      },
-      title: /* @__PURE__ */ e(Ge, { children: o.budget_categories_title })
-    }), /* @__PURE__ */ e(Ae, {
-      sx: {
-        p: 0,
-        ":last-child": { p: 0 }
-      },
-      children: /* @__PURE__ */ e(ee, { children: i.map((s) => /* @__PURE__ */ m(l.Fragment, { children: [/* @__PURE__ */ e(Gt, {
-        budget: s,
-        onClick: n
-      }), /* @__PURE__ */ e(ge, {})] }, s.guid)) })
-    })]
-  });
+  return /* @__PURE__ */ m(Te, { elevation: 2, children: [
+    /* @__PURE__ */ e(Pe, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(Le, { children: n.budget_categories_title }) }),
+    /* @__PURE__ */ e(De, { sx: { p: 0, ":last-child": { p: 0 } }, children: /* @__PURE__ */ e(Z, { children: c.map((s) => /* @__PURE__ */ m(l.Fragment, { children: [
+      /* @__PURE__ */ e(Gt, { budget: s, onClick: a }),
+      /* @__PURE__ */ e(ue, {})
+    ] }, s.guid)) }) })
+  ] });
 }), jt = I(() => {
-  const t = V(), { onEvent: o } = Z(), { visibleAccounts: i } = $e(), { budgets: r, common: n, recurring: s } = w(), { incomeCategories: a, spendCategories: c } = J(), { detailedBudgets: g, totalBudgeted: d } = E(), { incomeTotal: u } = me(), { setFilter: C } = X(), [p, b] = l.useState(!1), [f, _] = l.useMemo(() => {
-    const B = c.reduce((M, L) => M + L.totalAmount, 0);
-    let y = B / d;
-    y > 1 && (y = 1);
+  const t = H(), { onEvent: n } = J(), { visibleAccounts: c } = ke(), { budgets: i, common: a, recurring: s } = E(), { incomeCategories: o, spendCategories: r } = q(), { detailedBudgets: p, totalBudgeted: d } = w(), { incomeTotal: u } = le(), { setFilter: S } = ee(), [g, h] = l.useState(!1), [_, y] = l.useMemo(() => {
+    const B = r.reduce((M, N) => M + N.totalAmount, 0);
+    let f = B / d;
+    f > 1 && (f = 1);
     let T = t.palette.success.main;
-    return y > 0.8 && y < 1 ? T = t.palette.warning.main : y >= 1 && (T = t.palette.error.main), [B, [{
-      color: T,
-      percentage: `${y}`
-    }]];
-  }, [g, c]), [S, A] = l.useMemo(() => {
-    const B = Math.abs(a.reduce((T, M) => T + M.totalAmount, 0));
-    let y = B / u;
-    return y > 1 && (y = 1), [B, [{
-      color: t.palette.secondary.main,
-      percentage: `${y}`
-    }]];
-  }, [a, u]), h = () => {
-    C({
-      accounts: i.map((B) => B.guid),
+    f > 0.8 && f < 1 ? T = t.palette.warning.main : f >= 1 && (T = t.palette.error.main);
+    const L = [
+      {
+        color: T,
+        percentage: `${f}`
+      }
+    ];
+    return [B, L];
+  }, [p, r]), [A, v] = l.useMemo(() => {
+    const B = Math.abs(
+      o.reduce((L, M) => L + M.totalAmount, 0)
+    );
+    let f = B / u;
+    f > 1 && (f = 1);
+    const T = [
+      {
+        color: t.palette.secondary.main,
+        percentage: `${f}`
+      }
+    ];
+    return [B, T];
+  }, [o, u]), b = () => {
+    S({
+      accounts: c.map((B) => B.guid),
       dateRange: {
-        start: it(/* @__PURE__ */ new Date(), 90),
+        start: rt(/* @__PURE__ */ new Date(), 90),
         end: /* @__PURE__ */ new Date()
       }
-    }), b(!0), o(P.BUDGETS_CLICK_EDIT_INCOME);
+    }), h(!0), n(P.BUDGETS_CLICK_EDIT_INCOME);
   };
-  return /* @__PURE__ */ m(xe, {
-    elevation: 2,
-    sx: { overflow: "visible" },
-    children: [
-      /* @__PURE__ */ e(je, {
-        sx: {
-          pb: 8,
-          pl: 24
-        },
-        title: /* @__PURE__ */ e(Ge, { children: r.overview_title })
-      }),
-      /* @__PURE__ */ e(Ae, {
-        sx: {
-          pt: 12,
-          px: 24
-        },
-        children: /* @__PURE__ */ m(x, {
-          gap: 24,
-          children: [/* @__PURE__ */ m(x, {
-            gap: 8,
-            children: [
-              /* @__PURE__ */ e(v, {
-                bold: !0,
-                sx: { mb: 8 },
-                variant: "body1",
-                children: r.spending_title
-              }),
-              /* @__PURE__ */ e(ve, {
-                data: _,
-                height: 16
-              }),
-              /* @__PURE__ */ e(v, {
-                variant: "body2",
-                children: R(r.spending_description, D(f, "0,0"), D(d, "0,0"))
-              })
-            ]
-          }), /* @__PURE__ */ m(x, {
-            gap: 8,
-            children: [
-              /* @__PURE__ */ m(x, {
-                alignItems: "center",
-                direction: "row",
-                gap: 4,
-                mb: -4,
-                children: [/* @__PURE__ */ e(v, {
-                  bold: !0,
-                  variant: "body1",
-                  children: r.income_title
-                }), /* @__PURE__ */ e(lt, {
-                  "aria-label": s.manage_income,
-                  onClick: h,
-                  sx: { p: 0 },
-                  children: /* @__PURE__ */ e(z, {
-                    color: "primary",
-                    name: "edit"
-                  })
-                })]
-              }),
-              /* @__PURE__ */ e(ve, {
-                data: A,
-                height: 16
-              }),
-              /* @__PURE__ */ e(v, {
-                variant: "body2",
-                children: R(r.income_description, D(S, "0,0"), D(u, "0,0"))
-              })
-            ]
-          })]
-        })
-      }),
-      /* @__PURE__ */ e($, {
-        ariaLabelClose: n.close_aria,
-        isOpen: p,
-        onClose: () => b(!1),
+  return /* @__PURE__ */ m(Te, { elevation: 2, sx: { overflow: "visible" }, children: [
+    /* @__PURE__ */ e(Pe, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(Le, { children: i.overview_title }) }),
+    /* @__PURE__ */ e(De, { sx: { pt: 12, px: 24 }, children: /* @__PURE__ */ m(x, { gap: 24, children: [
+      /* @__PURE__ */ m(x, { gap: 8, children: [
+        /* @__PURE__ */ e(C, { bold: !0, sx: { mb: 8 }, variant: "body1", children: i.spending_title }),
+        /* @__PURE__ */ e(Se, { data: y, height: 16 }),
+        /* @__PURE__ */ e(C, { variant: "body2", children: R(
+          i.spending_description,
+          D(_, "0,0"),
+          D(d, "0,0")
+        ) })
+      ] }),
+      /* @__PURE__ */ m(x, { gap: 8, children: [
+        /* @__PURE__ */ m(x, { alignItems: "center", direction: "row", gap: 4, mb: -4, children: [
+          /* @__PURE__ */ e(C, { bold: !0, variant: "body1", children: i.income_title }),
+          /* @__PURE__ */ e(
+            st,
+            {
+              "aria-label": s.manage_income,
+              onClick: b,
+              sx: { p: 0 },
+              children: /* @__PURE__ */ e(z, { color: "primary", name: "edit" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(Se, { data: v, height: 16 }),
+        /* @__PURE__ */ e(C, { variant: "body2", children: R(
+          i.income_description,
+          D(A, "0,0"),
+          D(u, "0,0")
+        ) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ e(
+      $,
+      {
+        ariaLabelClose: a.close_aria,
+        isOpen: g,
+        onClose: () => h(!1),
         title: s.manage_income,
-        children: /* @__PURE__ */ e(ot, { forOverview: !0 })
-      })
-    ]
-  });
-}), Me = 480, Dn = I(({ onBackClick: t, onMenuClick: o, sx: i }) => {
-  const r = V(), { onEvent: n } = Z(), { visibleAccounts: s } = $e(), { budgets: a, common: c } = w(), { isInitialized: g, selectedAccounts: d, setDisplayedDate: u } = q(), { alert: C, dateRange: p, isDataLoaded: b, loadBudgetData: f, setDateRange: _, setAlert: S, setTheme: A, detailedBudgets: h } = E(), { setDateRange: B } = me(), { loadDateRangeCategoryTotals: y, loadMonthlyCategoryTotals: T } = J(), { isSmallTablet: M, isMobile: L, isSmallMobile: N } = le(), k = M || L || N, [G, F] = l.useState(!1);
-  Ne({
-    widgetName: "BubbleBudgetsWidget",
-    isLoaded: b
-  }), l.useEffect(() => {
-    A(r), b || f().finally(() => {
-      n(P.BUDGETS_VIEW);
-    });
-  }, []), l.useEffect(() => (_({
-    start: ie(re()),
-    end: Be(re())
-  }), () => {
-    _({
-      start: ie(re()),
-      end: Be(re())
-    });
-  }), [s]), l.useEffect(() => {
-    g && (u(p.start, p.end), y(d, p.start, p.end).finally(), T(d).finally(), B(p));
-  }, [
-    g,
-    d,
-    p
-  ]);
-  const ye = (Y) => {
-    _({
-      start: Y[0] || /* @__PURE__ */ new Date(),
-      end: Y[1] || /* @__PURE__ */ new Date()
-    });
-  }, _e = () => {
-    n(P.BUDGETS_CLICK_FILTER);
-  }, oe = () => {
-    F(!0), n(P.BUDGETS_CLICK_ADD);
-  }, be = () => {
-    F(!1);
-  }, j = () => {
-    F(!1);
-  }, K = dt(p.end, ie(/* @__PURE__ */ new Date()));
-  return !g || !b ? /* @__PURE__ */ e(ue, {}) : /* @__PURE__ */ m(Ze, {
-    actions: [{
-      iconName: "add",
-      label: a.add_title,
-      onClick: oe
-    }],
-    calendarActions: {
-      onRangeChanged: ye,
-      shouldDisableNext: K,
-      shouldDisablePicker: !0
-    },
-    hasDivider: !0,
-    onAccountsFilterClick: _e,
-    onBackClick: t,
-    onMenuClick: o,
-    sx: i,
-    title: a.budgets_title,
-    children: [
-      /* @__PURE__ */ m(x, {
-        direction: k ? "column" : "row",
-        height: "100%",
-        sx: { justifyContent: "center" },
-        width: "100%",
-        children: [/* @__PURE__ */ e(x, {
-          height: k ? 450 : "calc(100dvh - 150px)",
-          children: /* @__PURE__ */ e(We, {
-            createBudgetOnClick: oe,
-            height: k ? 450 : 800,
-            isDraggable: !0,
-            shouldShowZeroState: h.length === 0,
-            unavailableWidth: k ? 0 : Me
-          })
-        }), h.length !== 0 && /* @__PURE__ */ m(x, {
-          gap: 24,
-          height: "100%",
-          sx: {
-            mr: 24,
-            mt: 48
-          },
-          width: k ? "100%" : Me,
-          children: [/* @__PURE__ */ e(jt, {}), /* @__PURE__ */ e(Pt, {})]
-        })]
-      }),
-      /* @__PURE__ */ e($t, {}),
-      /* @__PURE__ */ e($, {
-        ariaLabelClose: c.close_aria,
-        isOpen: G,
-        onClose: () => F(!1),
-        title: a.add_new_title,
-        children: /* @__PURE__ */ e(ze, {
-          onAddBudget: be,
-          onRecalculateBudgets: j
-        })
-      }),
-      /* @__PURE__ */ e(De, {
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "right"
-        },
-        autoHideDuration: 3500,
-        onClose: () => {
-          S("");
+        children: /* @__PURE__ */ e(it, { forOverview: !0 })
+      }
+    )
+  ] });
+}), Re = 480, Uo = I(
+  ({ onBackClick: t, onMenuClick: n, sx: c }) => {
+    const i = H(), { onEvent: a } = J(), { visibleAccounts: s } = ke(), { budgets: o, common: r } = E(), { isInitialized: p, selectedAccounts: d, setDisplayedDate: u } = Q(), {
+      alert: S,
+      dateRange: g,
+      isDataLoaded: h,
+      loadBudgetData: _,
+      setDateRange: y,
+      setAlert: A,
+      setTheme: v,
+      detailedBudgets: b
+    } = w(), { setDateRange: B } = le(), { loadDateRangeCategoryTotals: f, loadMonthlyCategoryTotals: T } = q(), { isSmallTablet: L, isMobile: M, isSmallMobile: N } = ge(), k = L || M || N, [G, F] = l.useState(!1);
+    je({
+      widgetName: "BubbleBudgetsWidget",
+      isLoaded: h
+    }), l.useEffect(() => {
+      v(i), h || _().finally(() => {
+        a(P.BUDGETS_VIEW);
+      });
+    }, []), l.useEffect(() => (y({ start: ie(re()), end: Be(re()) }), () => {
+      y({ start: ie(re()), end: Be(re()) });
+    }), [s]), l.useEffect(() => {
+      p && (u(g.start, g.end), f(d, g.start, g.end).finally(), T(d).finally(), B(g));
+    }, [p, d, g]);
+    const be = (Y) => {
+      y({ start: Y[0] || /* @__PURE__ */ new Date(), end: Y[1] || /* @__PURE__ */ new Date() });
+    }, fe = () => {
+      a(P.BUDGETS_CLICK_FILTER);
+    }, ae = () => {
+      F(!0), a(P.BUDGETS_CLICK_ADD);
+    }, ye = () => {
+      F(!1);
+    }, j = () => {
+      F(!1);
+    }, K = Ke(g.end, ie(/* @__PURE__ */ new Date()));
+    return !p || !h ? /* @__PURE__ */ e(pe, {}) : /* @__PURE__ */ m(
+      ct,
+      {
+        actions: [
+          {
+            iconName: "add",
+            label: o.add_title,
+            onClick: ae
+          }
+        ],
+        calendarActions: {
+          onRangeChanged: be,
+          shouldDisableNext: K,
+          shouldDisablePicker: !0
         },
-        open: !!C,
-        children: /* @__PURE__ */ e(Te, {
-          closeText: "",
-          onClose: () => {
-            S("");
-          },
-          severity: "success",
-          variant: "filled",
-          children: C
-        })
-      })
-    ]
-  });
-}), zt = ({ budgetsCopy: t, difference: o, handleAddClick: i, shouldShowZeroState: r }) => {
-  const { availableHeight: n = 0 } = de(), s = l.useRef(null);
-  return l.useEffect(() => {
-    n > 0 && s.current === null && (s.current = n);
-  }, [n]), /* @__PURE__ */ m(x, {
-    sx: {
-      height: "100%",
-      justifyContent: "space-between"
-    },
-    children: [/* @__PURE__ */ e(We, {
-      createBudgetOnClick: i,
-      height: l.useMemo(() => {
-        const a = s.current ?? n;
-        return a > 0 ? Math.round(Math.max(120, Math.min(450, a * 0.8))) - 40 : 450;
-      }, [n]),
-      isMiniWidget: !0,
-      shouldShowZeroState: r
-    }), !r && /* @__PURE__ */ m(Q, {
-      ml: 16,
-      children: [/* @__PURE__ */ e(v, {
-        bold: !0,
-        color: o < 0 ? "error.main" : "success.main",
-        children: D(Math.abs(o), "0,0")
-      }), /* @__PURE__ */ e(v, { children: o < 0 ? t.overspent_in_budgets : t.left_in_budgets })]
-    })]
-  });
+        hasDivider: !0,
+        onAccountsFilterClick: fe,
+        onBackClick: t,
+        onMenuClick: n,
+        sx: c,
+        title: o.budgets_title,
+        children: [
+          /* @__PURE__ */ m(
+            x,
+            {
+              direction: k ? "column" : "row",
+              height: "100%",
+              sx: { justifyContent: "center" },
+              width: "100%",
+              children: [
+                /* @__PURE__ */ e(x, { height: k ? 450 : "calc(100dvh - 150px)", children: /* @__PURE__ */ e(
+                  We,
+                  {
+                    createBudgetOnClick: ae,
+                    height: k ? 450 : 800,
+                    isDraggable: !0,
+                    shouldShowZeroState: b.length === 0,
+                    unavailableWidth: k ? 0 : Re
+                  }
+                ) }),
+                b.length !== 0 && /* @__PURE__ */ m(
+                  x,
+                  {
+                    gap: 24,
+                    height: "100%",
+                    sx: { mr: 24, mt: 48 },
+                    width: k ? "100%" : Re,
+                    children: [
+                      /* @__PURE__ */ e(jt, {}),
+                      /* @__PURE__ */ e(Pt, {})
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e($t, {}),
+          /* @__PURE__ */ e(
+            $,
+            {
+              ariaLabelClose: r.close_aria,
+              isOpen: G,
+              onClose: () => F(!1),
+              title: o.add_new_title,
+              children: /* @__PURE__ */ e(
+                ze,
+                {
+                  onAddBudget: ye,
+                  onRecalculateBudgets: j
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(
+            xe,
+            {
+              anchorOrigin: { vertical: "bottom", horizontal: "right" },
+              autoHideDuration: 3500,
+              onClose: () => {
+                A("");
+              },
+              open: !!S,
+              children: /* @__PURE__ */ e(
+                Ae,
+                {
+                  closeText: "",
+                  onClose: () => {
+                    A("");
+                  },
+                  severity: "success",
+                  variant: "filled",
+                  children: S
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+), zt = ({
+  budgetsCopy: t,
+  difference: n,
+  handleAddClick: c,
+  shouldShowZeroState: i
+}) => {
+  const { availableHeight: a = 0 } = de(), s = l.useRef(null);
+  l.useEffect(() => {
+    a > 0 && s.current === null && (s.current = a);
+  }, [a]);
+  const o = l.useMemo(() => {
+    const r = s.current ?? a;
+    return r > 0 ? Math.round(Math.max(120, Math.min(450, r * 0.8))) - 40 : 450;
+  }, [a]);
+  return /* @__PURE__ */ m(x, { sx: { height: "100%", justifyContent: "space-between" }, children: [
+    /* @__PURE__ */ e(
+      We,
+      {
+        createBudgetOnClick: c,
+        height: o,
+        isMiniWidget: !0,
+        shouldShowZeroState: i
+      }
+    ),
+    !i && /* @__PURE__ */ m(X, { ml: 16, children: [
+      /* @__PURE__ */ e(C, { bold: !0, color: n < 0 ? "error.main" : "success.main", children: D(Math.abs(n), "0,0") }),
+      /* @__PURE__ */ e(C, { children: n < 0 ? t.overspent_in_budgets : t.left_in_budgets })
+    ] })
+  ] });
 }, Ft = (t) => {
-  const o = V(), { onEvent: i } = Z(), { detailedBudgets: r, isDataLoaded: n, loadBudgetData: s, setTheme: a } = E(), { budgets: c, common: g } = w(), { isInitialized: d, selectedAccounts: u } = q(), { loadDateRangeCategoryTotals: C, loadMonthlyCategoryTotals: p } = J(), b = Ve(r), [f, _] = l.useState(!1);
+  const n = H(), { onEvent: c } = J(), { detailedBudgets: i, isDataLoaded: a, loadBudgetData: s, setTheme: o } = w(), { budgets: r, common: p } = E(), { isInitialized: d, selectedAccounts: u } = Q(), { loadDateRangeCategoryTotals: S, loadMonthlyCategoryTotals: g } = q(), h = lt(i), [_, y] = l.useState(!1);
   l.useEffect(() => {
-    n || s().finally();
+    a || s().finally();
   }, []), l.useEffect(() => {
-    a(o);
-  }, [o]), l.useEffect(() => {
-    d && !n && (C(u, ie(/* @__PURE__ */ new Date()), Be(/* @__PURE__ */ new Date())).finally(), p(u).finally());
-  }, [
-    d,
-    u,
-    n
-  ]);
-  const S = () => {
-    _(!0), i(P.BUDGETS_CLICK_ADD);
-  }, A = () => {
-    _(!1);
-  }, h = () => _(!1);
-  if (Ne({
+    o(n);
+  }, [n]), l.useEffect(() => {
+    d && !a && (S(
+      u,
+      ie(/* @__PURE__ */ new Date()),
+      Be(/* @__PURE__ */ new Date())
+    ).finally(), g(u).finally());
+  }, [d, u, a]);
+  const A = () => {
+    y(!0), c(P.BUDGETS_CLICK_ADD);
+  }, v = () => {
+    y(!1);
+  }, b = () => y(!1);
+  if (je({
     widgetName: "BubbleBudgetsMiniWidget",
-    isLoaded: n
-  }), !d || !n) return /* @__PURE__ */ e(ue, {});
-  const B = r.length === 0;
-  return /* @__PURE__ */ m(at, {
-    contentStyles: {
-      height: "calc(100% - 66px)",
-      ":last-child": { pb: 0 }
-    },
-    primaryCtaLabel: B ? c.get_started_cta : c.details_cta,
-    primaryCtaLabelAria: c.details_cta_aria,
-    sx: { height: "100%" },
-    title: c.budgets_title,
-    ...t,
-    children: [/* @__PURE__ */ e(zt, {
-      budgetsCopy: c,
-      difference: b,
-      handleAddClick: S,
-      shouldShowZeroState: B
-    }), /* @__PURE__ */ e($, {
-      ariaLabelClose: g.close_aria,
-      isOpen: f,
-      onClose: () => _(!1),
-      title: c.add_new_title,
-      children: /* @__PURE__ */ e(ze, {
-        onAddBudget: A,
-        onRecalculateBudgets: h
-      })
-    })]
-  });
-}, En = I(Ft), se = {
+    isLoaded: a
+  }), !d || !a) return /* @__PURE__ */ e(pe, {});
+  const B = i.length === 0;
+  return /* @__PURE__ */ m(
+    ut,
+    {
+      contentStyles: { height: "calc(100% - 66px)", ":last-child": { pb: 0 } },
+      primaryCtaLabel: B ? r.get_started_cta : r.details_cta,
+      primaryCtaLabelAria: r.details_cta_aria,
+      sx: { height: "100%" },
+      title: r.budgets_title,
+      ...t,
+      children: [
+        /* @__PURE__ */ e(
+          zt,
+          {
+            budgetsCopy: r,
+            difference: h,
+            handleAddClick: A,
+            shouldShowZeroState: B
+          }
+        ),
+        /* @__PURE__ */ e(
+          $,
+          {
+            ariaLabelClose: p.close_aria,
+            isOpen: _,
+            onClose: () => y(!1),
+            title: r.add_new_title,
+            children: /* @__PURE__ */ e(
+              ze,
+              {
+                onAddBudget: v,
+                onRecalculateBudgets: b
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, Wo = I(Ft), se = {
   CANCEL_DELETE: "Cancel - Delete",
   END_SAVE: "End - Save",
   END_DELETE: "End - Delete",
   START_DELETE: "Start - Delete"
-}, Ut = ({ onClose: t, onEvent: o, onViewHistory: i, transactionListProps: r }) => {
-  const { alert: n, dateRange: s, deleteBudget: a, selectedBudget: c, selectedSubBudget: g, setAlert: d, setSelectedBudget: u, updateBudget: C } = E(), { budgets: p, common: b } = w(), { isCopyLoaded: f, selectedAccountGuids: _ } = q(), S = V(), { setFilter: A } = X(), [h, B] = l.useState(""), [y, T] = l.useState(null), [M, L] = l.useState(!1), N = l.useRef(!1);
+}, Ut = ({
+  onClose: t,
+  onEvent: n,
+  onViewHistory: c,
+  transactionListProps: i
+}) => {
+  const {
+    alert: a,
+    dateRange: s,
+    deleteBudget: o,
+    selectedBudget: r,
+    selectedSubBudget: p,
+    setAlert: d,
+    setSelectedBudget: u,
+    updateBudget: S
+  } = w(), { budgets: g, common: h } = E(), { isCopyLoaded: _, selectedAccountGuids: y } = Q(), A = H(), { setFilter: v } = ee(), [b, B] = l.useState(""), [f, T] = l.useState(null), [L, M] = l.useState(!1), N = l.useRef(!1);
   if (l.useEffect(() => {
-    !c || g || (B(`${c.amount}`), A({
-      accounts: _,
+    !r || p || (B(`${r.amount}`), v({
+      accounts: y,
       dateRange: s,
       custom: ({ category_guid: j, top_level_category_guid: K }) => {
-        const { category_guid: Y } = c;
+        const { category_guid: Y } = r;
         return j === Y || K === Y;
       }
-    }), L(!0));
-  }, [c]), !f) return /* @__PURE__ */ e(ue, {});
-  if (!c) return null;
+    }), M(!0));
+  }, [r]), !_) return /* @__PURE__ */ e(pe, {});
+  if (!r) return null;
   const k = () => {
-    B(""), T(null), L(!1), setTimeout(() => {
+    B(""), T(null), M(!1), setTimeout(() => {
       u(void 0), t?.();
     }, 250);
   }, G = () => {
-    y === "delete" && o?.(se.CANCEL_DELETE, h), B(c.amount ? `${c.amount}` : ""), T(null);
+    f === "delete" && n?.(se.CANCEL_DELETE, b), B(r.amount ? `${r.amount}` : ""), T(null);
   }, F = async () => {
-    if (y === "edit") {
+    if (f === "edit") {
       if (N.current) return;
-      N.current = !0, await C({
-        ...c,
-        amount: Number(h)
-      }), o?.(se.END_SAVE, h), d(R(p.alert_budget_updated, c.category.name)), T(null), N.current = !1;
+      N.current = !0, await S({
+        ...r,
+        amount: Number(b)
+      }), n?.(se.END_SAVE, b), d(
+        R(g.alert_budget_updated, r.category.name)
+      ), T(null), N.current = !1;
     }
-    y === "delete" && (await a(c.guid), o?.(se.END_DELETE, h), k());
-  }, { remainingAmount: ye, spentPercentage: _e, iconColor: oe } = Ke(c.transaction_total ?? 0, c.amount ?? 0), be = (j, K) => R(j, /* @__PURE__ */ e("b", { children: K }));
-  return /* @__PURE__ */ m(l.Fragment, { children: [/* @__PURE__ */ m($, {
-    ariaLabelClose: b.close_aria,
-    footerStyles: {
-      px: 24,
-      py: 16
-    },
-    isOpen: M,
-    onClose: k,
-    onPrimaryAction: () => T("edit"),
-    onSecondaryAction: () => {
-      o?.(se.START_DELETE, h), T("delete");
-    },
-    primaryText: p.details_edit_button,
-    secondaryColor: "error",
-    secondaryText: p.details_delete_button,
-    sx: { "& .list-wrapper": { pr: 24 } },
-    title: R(p.details_type_title, c.category.name),
-    children: [
-      /* @__PURE__ */ e(nt, {
-        amount: c.amount,
-        icon: /* @__PURE__ */ e(H, {
-          categoryGuid: c.category.guid,
-          size: 44,
-          sx: {
-            bgcolor: st(Ee(c.category.guid, S), 0.15),
-            border: `1px solid ${Ee(c.category.guid, S)}`,
-            color: "text.primary"
+    f === "delete" && (await o(r.guid), n?.(se.END_DELETE, b), k());
+  }, { remainingAmount: be, spentPercentage: fe, iconColor: ae } = dt(
+    r.transaction_total ?? 0,
+    r.amount ?? 0
+  ), ye = (j, K) => R(j, /* @__PURE__ */ e("b", { children: K }));
+  return /* @__PURE__ */ m(l.Fragment, { children: [
+    /* @__PURE__ */ m(
+      $,
+      {
+        ariaLabelClose: h.close_aria,
+        footerStyles: {
+          px: 24,
+          py: 16
+        },
+        isOpen: L,
+        onClose: k,
+        onPrimaryAction: () => T(
+          "edit"
+          /* EDIT */
+        ),
+        onSecondaryAction: () => {
+          n?.(se.START_DELETE, b), T(
+            "delete"
+            /* DELETE */
+          );
+        },
+        primaryText: g.details_edit_button,
+        secondaryColor: "error",
+        secondaryText: g.details_delete_button,
+        sx: {
+          "& .list-wrapper": {
+            pr: 24
           }
-        }),
-        iconColor: oe,
-        onViewHistory: i,
-        remainingAmount: ye,
-        spentPercentage: _e,
-        startDate: (s.start.getTime() ?? 0) / 1e3,
-        totalTransaction: c.transaction_total
-      }),
-      /* @__PURE__ */ e(Se, { ...r }),
-      n && /* @__PURE__ */ e(De, {
-        anchorOrigin: {
-          horizontal: "right",
-          vertical: "bottom"
         },
-        autoHideDuration: 3500,
-        onClose: () => d(""),
-        open: !!n,
-        children: /* @__PURE__ */ e(Te, {
-          closeText: "",
-          onClose: () => d(""),
-          severity: "success",
-          variant: "filled",
-          children: n
-        })
-      })
-    ]
-  }), y && /* @__PURE__ */ e(qe, {
-    closeAriaLabel: b.close_aria,
-    content: be(p[y === "edit" ? "edit_budget_content" : "delete_description"], c.category.name),
-    handleInputChange: (j) => B(j.toString()),
-    handleModalClose: G,
-    handlePrimaryAction: F,
-    handleSecondaryAction: G,
-    inputLabel: y === "edit" ? p.details_edit_title : "",
-    inputValue: h,
-    isOpen: !0,
-    primaryColor: y === "edit" ? "primary" : "error",
-    primaryText: p[y === "edit" ? "add_save_button" : "details_delete_button"],
-    secondaryColor: y === "edit" ? "primary" : "inherit",
-    secondaryText: b.cancel_button,
-    title: p[y === "edit" ? "details_edit_title" : "delete_title"]
-  })] });
-}, wn = I(Ut);
+        title: R(g.details_type_title, r.category.name),
+        children: [
+          /* @__PURE__ */ e(
+            ot,
+            {
+              amount: r.amount,
+              icon: /* @__PURE__ */ e(
+                V,
+                {
+                  categoryGuid: r.category.guid,
+                  size: 44,
+                  sx: {
+                    bgcolor: Ye(we(r.category.guid, A), 0.15),
+                    border: `1px solid ${we(r.category.guid, A)}`,
+                    color: "text.primary"
+                  }
+                }
+              ),
+              iconColor: ae,
+              onViewHistory: c,
+              remainingAmount: be,
+              spentPercentage: fe,
+              startDate: (s.start.getTime() ?? 0) / 1e3,
+              totalTransaction: r.transaction_total
+            }
+          ),
+          /* @__PURE__ */ e(ve, { ...i }),
+          a && /* @__PURE__ */ e(
+            xe,
+            {
+              anchorOrigin: { horizontal: "right", vertical: "bottom" },
+              autoHideDuration: 3500,
+              onClose: () => d(""),
+              open: !!a,
+              children: /* @__PURE__ */ e(Ae, { closeText: "", onClose: () => d(""), severity: "success", variant: "filled", children: a })
+            }
+          )
+        ]
+      }
+    ),
+    f && /* @__PURE__ */ e(
+      mt,
+      {
+        closeAriaLabel: h.close_aria,
+        content: ye(
+          g[f === "edit" ? "edit_budget_content" : "delete_description"],
+          r.category.name
+        ),
+        handleInputChange: (j) => B(j.toString()),
+        handleModalClose: G,
+        handlePrimaryAction: F,
+        handleSecondaryAction: G,
+        inputLabel: f === "edit" ? g.details_edit_title : "",
+        inputValue: b,
+        isOpen: !0,
+        primaryColor: f === "edit" ? "primary" : "error",
+        primaryText: g[f === "edit" ? "add_save_button" : "details_delete_button"],
+        secondaryColor: f === "edit" ? "primary" : "inherit",
+        secondaryText: h.cancel_button,
+        title: g[f === "edit" ? "details_edit_title" : "delete_title"]
+      }
+    )
+  ] });
+}, Ho = I(Ut);
 export {
-  En as BubbleBudgetsMiniWidget,
-  Dn as BubbleBudgetsWidget,
-  wn as BudgetDetailsDrawerV2
+  Wo as BubbleBudgetsMiniWidget,
+  Uo as BubbleBudgetsWidget,
+  Ho as BudgetDetailsDrawerV2
 };
+//# sourceMappingURL=index.es.js.map