@mx-cartographer/experiences 6.26.18-alpha.mega4 → 6.26.18-alpha.sms1

package/dist/budgets/index.es.js

@@ -1,1070 +0,0 @@
-import { jsx as e, jsxs as d, Fragment as ke } from "react/jsx-runtime";
-import l from "react";
-import { observer as I } from "mobx-react-lite";
-import { endOfMonth as Me } from "date-fns/endOfMonth";
-import { startOfMonth as ye } from "date-fns/startOfMonth";
-import W from "@mui/material/Box";
-import b from "@mui/material/Stack";
-import q from "@mui/material/styles/useTheme";
-import { Icon as $, Text as p, CategoryIcon as H, H1 as $e, H3 as fe } from "@mxenabled/mxui";
-import { u as Ge } from "../BudgetUtil-DcqclhiQ.mjs";
-import { C as Pe } from "../ConnectionsDrawer-BCzpuNsK.mjs";
-import * as E from "d3";
-import Ne from "@mui/material/Tooltip";
-import { e as w, k as j, u as D, g as X, a as J, p as je, f as Q, n as ee, j as ze, c as Ce } from "../hooks-ClhFlg78.mjs";
-import { L as P } from "../Loader-Dp1P2gNw.mjs";
-import { E as se } from "../EmptyState-Dcb-o2tl.mjs";
-import { u as le } from "../useScreenSize-B6JyS_Lj.mjs";
-import { A as k, W as Ue } from "../WidgetContainer-CmGNZW0M.mjs";
-import K from "@mui/material/List";
-import { f as T } from "../NumberFormatting-CtWHhyBX.mjs";
-import Be from "@mui/material/Button";
-import te from "@mui/material/Divider";
-import V from "@mui/material/ListItem";
-import ne from "@mui/material/ListItemAvatar";
-import Y from "@mui/material/ListItemButton";
-import Z from "@mui/material/ListItemText";
-import { b as L } from "../Localization-2MODESHW.mjs";
-import { D as M } from "../Drawer-kEE73B87.mjs";
-import Fe from "@mui/material/ListItemSecondaryAction";
-import { C as We } from "../CurrencyInput-DzsPiUsU.mjs";
-import { a as N } from "../Dialog-CWW597AF.mjs";
-import { M as He } from "../MiniWidgetContainer-BcNPxZt2.mjs";
-import { isAfter as Xe } from "date-fns/isAfter";
-import Ke from "@mui/material/Alert";
-import Ve from "@mui/material/Snackbar";
-import pe from "@mui/material/Tab";
-import Ye from "@mui/material/Tabs";
-import { e as Ze } from "../exportTransactionsToCSV-j4g8bdVZ.mjs";
-import { T as Se, a as qe } from "../TransactionDetails-B5qfs9Zh.mjs";
-import de from "@mui/material/Card";
-import ue from "@mui/material/CardContent";
-import { S as ce } from "../StatusBar-BK_uYHAB.mjs";
-import { S as Ae } from "../SingleSegmentDonut-BgbLgwHi.mjs";
-import { u as Je, b as Qe } from "../CategorySelectorDrawer-DgrePTRg.mjs";
-import xe from "@mui/material/CardHeader";
-import { subDays as et } from "date-fns/subDays";
-import tt from "@mui/material/IconButton";
-import { M as nt } from "../ManageIncome-BVt_XQbo.mjs";
-const he = 5, ot = 100, at = 25, rt = (t) => {
-  const o = (a) => {
-    a.active || t.alphaTarget(0.3).restart(), a.subject.fx = a.subject.x, a.subject.fy = a.subject.y;
-  }, i = (a) => {
-    a.subject.fx = a.x, a.subject.fy = a.y;
-  }, s = (a) => {
-    a.active || t.alphaTarget(0), a.subject.fx = null, a.subject.fy = null;
-  };
-  return E.drag().on("start", o).on("drag", i).on("end", s);
-}, st = (t) => {
-  let o = t.transaction_total / t.amount;
-  o < 0 ? o = 0 : o > 1 && (o = 1);
-  const i = o * 2 * Math.PI, s = E.interpolate(0, i), a = E.arc().cornerRadius(5).innerRadius(t.radius - he * 2).outerRadius(t.radius - he).startAngle(0).endAngle(0);
-  return (n) => (a.endAngle(s(n)), a(t) || "");
-}, it = (t) => {
-  E.selectAll(".bubble").call(rt(t));
-}, ct = (t, o, i) => {
-  t.alpha(1).restart().force(
-    "x",
-    E.forceX().x(i / 2).strength(0.01)
-  ).force(
-    "y",
-    E.forceY().y(o / 2).strength(0.01)
-  );
-}, lt = (t, o) => E.scaleLinear().domain([t, o]).range([at, ot]), dt = (t) => {
-  const o = t.reduce((n, r) => {
-    const c = Math.max(r.transaction_total, r.amount);
-    return c > n ? c : n;
-  }, 0), i = t.reduce((n, r) => {
-    const c = Math.max(r.transaction_total, r.amount);
-    return c < n ? c : n;
-  }, o), s = lt(i, o), a = t.map((n) => {
-    const r = s(Math.max(n.transaction_total, n.amount)) || 25;
-    return {
-      ...n,
-      radius: r
-    };
-  });
-  return E.forceSimulation(a).velocityDecay(0.05).force("collide", E.forceCollide((n) => n.radius + 2).strength(0.5)).on("tick", () => {
-    E.selectAll(".bubble").data(a).attr("transform", (n) => `translate(${n.x},${n.y})`);
-  });
-}, _e = 5, ut = 2e3;
-function mt({ bubble: t }) {
-  const o = q(), {
-    guid: i,
-    budgetColors: { mercury: s },
-    radius: a
-  } = t, n = `mercury-${i}`;
-  l.useEffect(() => {
-    E.select(`.${n}`).selectAll(".status").remove(), E.select(`.${n}`).append("path").transition().duration(ut).delay(0).attr("class", "status").attr("style", `fill: ${s}; fill-opacity: 1;`).attrTween("d", () => st(t));
-  }, [t]);
-  const r = E.arc().innerRadius((c) => c - 2 * _e).outerRadius((c) => c - _e).startAngle(0).endAngle(2 * Math.PI);
-  return /* @__PURE__ */ e("g", { className: n, children: /* @__PURE__ */ e(
-    "path",
-    {
-      d: r(a) || "",
-      style: { fill: o.palette.common.white, fillOpacity: 0.35 }
-    }
-  ) });
-}
-const G = 75, ie = 50;
-function gt({ bubble: t, isDraggable: o, onClick: i = () => {
-} }) {
-  const [s, a] = l.useState(!1);
-  if (!t) return;
-  const {
-    budgetColors: { background: n, text: r },
-    category: { icon: c, name: y },
-    guid: h,
-    description: m,
-    radius: g,
-    x: f,
-    y: _
-  } = t;
-  let u = -12, C = -12;
-  g > G ? (u = -14, C = -45) : g > ie && (C = -32);
-  const B = `${t.category.name}: ${m}`, A = {
-    modifiers: [
-      {
-        name: "offset",
-        options: { offset: [0, 15] }
-      }
-    ]
-  };
-  return /* @__PURE__ */ d(
-    "g",
-    {
-      className: "bubble",
-      id: `bubble-${h}`,
-      onClick: () => i(t),
-      onMouseEnter: () => a(!0),
-      onMouseLeave: () => a(!1),
-      style: { cursor: o ? "pointer" : "default" },
-      textAnchor: "middle",
-      x: f,
-      y: _,
-      children: [
-        /* @__PURE__ */ e(
-          Ne,
-          {
-            followCursor: !0,
-            open: s,
-            slotProps: { popper: A },
-            title: B,
-            children: /* @__PURE__ */ e("circle", { fill: n, id: `circle-${h}`, r: g })
-          }
-        ),
-        /* @__PURE__ */ e("svg", { x: u, y: C, children: /* @__PURE__ */ e($, { name: c, size: g <= G ? 24 : 32, sx: { fill: r } }) }),
-        g > G && /* @__PURE__ */ e(
-          p,
-          {
-            bold: !0,
-            component: "text",
-            id: `budget-category-${h}`,
-            sx: { fill: r },
-            variant: "Small",
-            y: 4,
-            children: y
-          }
-        ),
-        g > ie && /* @__PURE__ */ e(
-          p,
-          {
-            bold: !0,
-            component: "text",
-            id: `budget-description-${h}-1`,
-            sx: { fill: r },
-            variant: "Body",
-            y: g <= G ? 12 : 24,
-            children: g <= G ? m.split(" ")[0] : m
-          }
-        ),
-        g <= G && g > ie && /* @__PURE__ */ e(
-          p,
-          {
-            component: "text",
-            id: `budget-description-${h}-2`,
-            sx: { fill: r },
-            variant: "XSmall",
-            y: 28,
-            children: m.split(" ")[1]
-          }
-        ),
-        /* @__PURE__ */ e(mt, { bubble: t })
-      ]
-    },
-    h
-  );
-}
-let F;
-const pt = ({
-  height: t,
-  width: o,
-  isDraggable: i = !1,
-  onClick: s = () => {
-  }
-}) => {
-  const { detailedBudgets: a } = w();
-  return F = l.useMemo(() => dt(a), [a]), l.useEffect(() => {
-    ct(F, t, o), i && it(F);
-  }, [F, t, o]), /* @__PURE__ */ e("svg", { height: t, style: { overflow: "visible" }, width: Math.abs(o), children: F.nodes().map((n) => /* @__PURE__ */ e(gt, { bubble: n, isDraggable: i, onClick: s }, n.guid)) });
-}, ht = I(pt), _t = ({
-  isMiniWidget: t = !1,
-  onConnectAccountsClick: o,
-  createBudgetOnClick: i
-}) => {
-  const { recalculateBudgets: s } = w(), { spendCategories: a } = j(), { budgets: n } = D(), [r, c] = l.useState(!1), [y, h] = l.useState(!1), [m, g] = l.useState(!1), f = l.useMemo(() => [...a.filter((u) => u.totalAverageAmount > 0)], [a]), _ = async () => {
-    g(!0);
-    const { data: u, isSuccess: C } = await s(f);
-    g(!1), C ? (u.length === 0 && c(!0), h(!1)) : h(!0);
-  };
-  return m ? /* @__PURE__ */ e(P, {}) : y ? /* @__PURE__ */ e(
-    se,
-    {
-      header: n.autogenerate_budgets_error_header,
-      icon: "error",
-      iconColor: "#4D4D4D",
-      onClick: (u) => {
-        u === "primary" ? _() : i();
-      },
-      primaryButton: n.autogenerate_budgets_error_primary_button,
-      secondaryButton: n.zero_state_generate_budgets_secondary_button,
-      subText: n.autogenerate_budgets_error_subheader,
-      sx: {
-        width: { sm: 468 },
-        ".buttons-footer": {
-          width: 208
-        }
-      }
-    }
-  ) : /* @__PURE__ */ e(ke, { children: r ? /* @__PURE__ */ e(
-    se,
-    {
-      header: n.zero_state_generate_budgets_header,
-      icon: "error",
-      iconColor: "#4D4D4D",
-      onClick: (u) => {
-        u === "primary" ? o() : i();
-      },
-      primaryButton: n.zero_state_generate_budgets_primary_button,
-      secondaryButton: n.zero_state_generate_budgets_secondary_button,
-      subText: n.zero_state_generate_budgets_subheader,
-      sx: {
-        width: t ? "100%" : { sm: 500 },
-        height: t ? "100%" : { sm: 468 },
-        mt: 50,
-        ".buttons-footer": {
-          width: 208,
-          height: 100
-        },
-        padding: t ? 5 : 0
-      }
-    }
-  ) : /* @__PURE__ */ e(
-    se,
-    {
-      header: n.create_budgets_title,
-      icon: "bubble_chart",
-      iconColor: "#1A1A1A",
-      onClick: (u) => {
-        u === "primary" ? _() : i();
-      },
-      primaryButton: n.empty_state_primary_button,
-      secondaryButton: t ? void 0 : n.empty_state_secondary_button,
-      subText: n.empty_state_subheader,
-      sx: {
-        width: t ? "100%" : { sm: 432 },
-        height: t ? "100%" : { sm: 468 },
-        mt: 50,
-        ".buttons-footer": {
-          width: 208,
-          height: 100
-        },
-        padding: t ? 4 : 0
-      }
-    }
-  ) });
-}, ve = I(
-  ({
-    createBudgetOnClick: t = () => {
-    },
-    height: o,
-    isDraggable: i = !1,
-    isMiniWidget: s = !1,
-    shouldShowZeroState: a,
-    unavailableWidth: n = 24
-  }) => {
-    const { onEvent: r } = X(), { setSelectedBudget: c } = w(), { isLoadingCategoryTotals: y } = j(), { isInitialized: h } = J(), { accounts: m } = D(), { availableWidth: g } = je(), { isMobile: f } = le(), [_, u] = l.useState(!1), C = l.useMemo(() => g - n, [g]), B = (x) => {
-      c(x), r(k.BUDGETS_CLICK_BUDGET_CATEGORY, {
-        budget_category: x.category.name,
-        click_type: "bubble"
-      });
-    }, A = () => {
-      u(!0), r(k.ACCOUNTS_CLICK_CONNECT);
-    };
-    return y ? /* @__PURE__ */ e(b, { alignItems: "center", height: o, justifyContent: "center", width: Math.abs(C), children: /* @__PURE__ */ e(P, {}) }) : /* @__PURE__ */ d(W, { ml: a || f ? 0 : 24, sx: { alignSelf: "center" }, children: [
-      a || !h ? /* @__PURE__ */ e(
-        _t,
-        {
-          createBudgetOnClick: t,
-          isMiniWidget: s,
-          onConnectAccountsClick: A
-        }
-      ) : /* @__PURE__ */ e(
-        ht,
-        {
-          height: o,
-          isDraggable: i,
-          onClick: B,
-          width: C
-        }
-      ),
-      /* @__PURE__ */ e(
-        Pe,
-        {
-          onClose: () => u(!1),
-          showConnectionsWidget: _,
-          title: m.manage_connections
-        }
-      )
-    ] });
-  }
-), bt = I(() => {
-  const { budgets: t } = D(), { totalBudgeted: o } = w(), { incomeTotal: i } = Q(), s = i - o;
-  return /* @__PURE__ */ d(b, { direction: "row", justifyContent: "center", my: 16, spacing: 20, children: [
-    /* @__PURE__ */ d(b, { alignItems: "center", children: [
-      /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: T(i, "0,0") }),
-      /* @__PURE__ */ e(p, { color: "secondary", variant: "Small", children: t.projected_income })
-    ] }),
-    /* @__PURE__ */ e(p, { bold: !0, justifyContent: "center", variant: "Body", children: "-" }),
-    /* @__PURE__ */ d(b, { alignItems: "center", children: [
-      /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: T(o, "0,0") }),
-      /* @__PURE__ */ e(p, { color: "secondary", variant: "Small", children: t.budgeted })
-    ] }),
-    /* @__PURE__ */ e(p, { bold: !0, justifyContent: "center", variant: "Body", children: "=" }),
-    /* @__PURE__ */ d(b, { alignItems: "center", children: [
-      /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: T(s, "0,0") }),
-      /* @__PURE__ */ e(p, { color: "secondary", variant: "Small", children: t.remaining })
-    ] })
-  ] });
-}), yt = I(
-  ({ category: t }) => {
-    const { budgets: o } = D(), { budgets: i } = w(), s = l.useMemo(() => {
-      const a = i.find((c) => c.category_guid === t.guid), n = T(t.totalAverageAmount, "0,0"), r = a ? L(o.recalculate_previous_budget, T(a.amount, "0,0")) : o.recalculate_new_budget;
-      return `${n} - ${r}`;
-    }, [o, i]);
-    return /* @__PURE__ */ d(l.Fragment, { children: [
-      /* @__PURE__ */ e(V, { children: /* @__PURE__ */ d(Y, { children: [
-        /* @__PURE__ */ e(ne, { children: /* @__PURE__ */ e(H, { categoryGuid: t.guid, variant: "filled" }) }),
-        /* @__PURE__ */ e(Z, { primary: t.name, secondary: s })
-      ] }) }),
-      /* @__PURE__ */ e(te, {})
-    ] }, t.guid);
-  }
-), ft = ({ onRecalculateBudgets: t }) => {
-  const { budgets: o, common: i } = D(), { spendCategories: s } = j(), { recalculateBudgets: a, setAlert: n } = w(), [r, c] = l.useState(!1), y = s.filter((m) => m.totalAverageAmount > 0), h = async () => {
-    await a(y), c(!1), n(o.alert_recalculated_budgets), t?.();
-  };
-  return /* @__PURE__ */ d(l.Fragment, { children: [
-    /* @__PURE__ */ e(Be, { onClick: () => c(!0), sx: { mt: 24, mx: 24 }, variant: "text", children: o.recalculate_button }),
-    /* @__PURE__ */ e(p, { sx: { mx: 24, my: 16, textAlign: "center", whiteSpace: "wrap" }, variant: "Paragraph", children: o.recalculate_help }),
-    /* @__PURE__ */ e(
-      M,
-      {
-        ariaLabelClose: i.close_aria,
-        isOpen: r,
-        onClose: () => c(!1),
-        onPrimaryAction: h,
-        title: o.recalculate_title,
-        children: /* @__PURE__ */ d(b, { children: [
-          /* @__PURE__ */ d(b, { mx: 24, my: 16, children: [
-            /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: o.recalculate_description_top }),
-            /* @__PURE__ */ e(p, { variant: "ParagraphSmall", children: o.recalculate_description_bottom })
-          ] }),
-          /* @__PURE__ */ e(W, { bgcolor: "background.paper", children: /* @__PURE__ */ e(K, { children: y.map((m) => /* @__PURE__ */ e(yt, { category: m }, m.guid)) }) })
-        ] })
-      }
-    )
-  ] });
-}, oe = ({
-  amount: t,
-  categoryName: o,
-  onAmountChanged: i
-}) => {
-  const { budgets: s } = D(), { totalBudgeted: a } = w(), { incomeTotal: n } = Q(), r = n - a;
-  return /* @__PURE__ */ d(b, { gap: 16, children: [
-    /* @__PURE__ */ d(b, { children: [
-      /* @__PURE__ */ e(p, { children: L(
-        s.add_description_top,
-        T(r, "0,0")
-      ) }),
-      /* @__PURE__ */ e(p, { children: L(s.add_description_bottom, o) })
-    ] }),
-    /* @__PURE__ */ e(
-      We,
-      {
-        amount: t,
-        autoFocus: !0,
-        label: s.add_label,
-        minAmount: 0,
-        setAmount: i,
-        sx: { ".MuiTypography-Body": { p: 0 } }
-      }
-    )
-  ] });
-}, Ct = I(({ category: t, onAddBudget: o }) => {
-  const { budgets: i, common: s } = D(), [a, n] = l.useState(!1), [r, c] = l.useState(
-    `${t.totalAmount === 0 ? "" : t.totalAmount}`
-  );
-  return /* @__PURE__ */ d(l.Fragment, { children: [
-    /* @__PURE__ */ e(V, { children: /* @__PURE__ */ d(Y, { onClick: () => n(!0), children: [
-      /* @__PURE__ */ e(ne, { children: /* @__PURE__ */ e(H, { categoryGuid: t.guid }) }),
-      /* @__PURE__ */ e(
-        Z,
-        {
-          primary: t.name,
-          secondary: T(t.totalAmount, "0,0")
-        }
-      ),
-      /* @__PURE__ */ e(Fe, { children: /* @__PURE__ */ e($, { name: "add", size: 20 }) })
-    ] }) }, t.guid),
-    /* @__PURE__ */ e(
-      N,
-      {
-        copy: { close_aria: s.close_aria, title: i.add_title },
-        disablePrimaryButton: Number(r) <= 0,
-        isOpen: a,
-        onClose: () => n(!1),
-        onPrimaryAction: () => o(t, Number(r)),
-        primaryText: i.add_save_button,
-        children: /* @__PURE__ */ e(oe, { amount: r, categoryName: t.name, onAmountChanged: c })
-      }
-    )
-  ] });
-}), Te = I(({ onRecalculateBudgets: t }) => {
-  const { budgets: o } = D(), { addBudget: i, setAlert: s, unbudgetedCategories: a } = w(), n = async (r, c) => {
-    await i(r, c), s(L(o.alert_budget_created, r.name));
-  };
-  return /* @__PURE__ */ d(b, { children: [
-    /* @__PURE__ */ e(bt, {}),
-    /* @__PURE__ */ e(W, { bgcolor: "background.paper", children: /* @__PURE__ */ e(K, { children: a.map((r) => /* @__PURE__ */ e(
-      Ct,
-      {
-        category: r,
-        onAddBudget: n
-      },
-      r.guid
-    )) }) }),
-    /* @__PURE__ */ e(ft, { onRecalculateBudgets: t })
-  ] });
-}), Bt = (t) => {
-  const o = q(), { onEvent: i } = X(), { detailedBudgets: s, isDataLoaded: a, loadBudgetData: n, setTheme: r } = w(), { budgets: c, common: y } = D(), { isCopyLoaded: h, isInitialized: m, selectedAccounts: g } = J(), { reloadCategoryTotals: f } = j(), _ = Ge(), u = s.length === 0, [C, B] = l.useState(!1), A = () => {
-    B(!0), i(k.BUDGETS_CLICK_ADD);
-  }, x = () => {
-    B(!1);
-  };
-  return l.useEffect(() => {
-    r(o);
-  }, [o]), l.useEffect(() => {
-    m && !a && f(g, ye(/* @__PURE__ */ new Date()), Me(/* @__PURE__ */ new Date())).then(
-      () => {
-        n().finally();
-      }
-    );
-  }, [m, g]), h ? /* @__PURE__ */ d(
-    He,
-    {
-      primaryCtaLabel: u ? c.get_started_cta : c.details_cta,
-      title: c.budgets_title,
-      ...t,
-      children: [
-        a ? /* @__PURE__ */ d(b, { height: 450, mt: 32, children: [
-          /* @__PURE__ */ e(
-            ve,
-            {
-              createBudgetOnClick: A,
-              height: 370,
-              isMiniWidget: !0,
-              shouldShowZeroState: u
-            }
-          ),
-          !u && /* @__PURE__ */ d(W, { ml: 16, children: [
-            /* @__PURE__ */ e(p, { bold: !0, color: _ < 0 ? "error.main" : "success.main", children: T(Math.abs(_), "0,0") }),
-            /* @__PURE__ */ e(p, { children: _ < 0 ? c.overspent_in_budgets : c.left_in_budgets })
-          ] })
-        ] }) : /* @__PURE__ */ e(P, {}),
-        /* @__PURE__ */ e(
-          M,
-          {
-            ariaLabelClose: y.close_aria,
-            isOpen: C,
-            onClose: () => B(!1),
-            title: c.add_new_title,
-            children: /* @__PURE__ */ e(Te, { onRecalculateBudgets: x })
-          }
-        )
-      ]
-    }
-  ) : /* @__PURE__ */ e(P, {});
-}, vn = I(Bt), we = ({ budget: t }) => {
-  const {
-    amount: o,
-    budgetColors: { background: i },
-    category: { name: s },
-    category_guid: a,
-    percentage: n,
-    transaction_total: r
-  } = t, c = [
-    {
-      color: i,
-      percentage: `${n}%`
-    }
-  ];
-  return /* @__PURE__ */ e(de, { sx: { mt: 24, mx: 24 }, children: /* @__PURE__ */ e(ue, { children: /* @__PURE__ */ d(b, { alignItems: "center", gap: 16, children: [
-    /* @__PURE__ */ e(H, { categoryGuid: a, size: 56 }),
-    /* @__PURE__ */ e($e, { children: `${T(r, "0,0")} / ${T(o, "0,0")}` }),
-    /* @__PURE__ */ e(p, { bold: !0, variant: "XSmall", children: s }),
-    /* @__PURE__ */ e(ce, { data: c, height: 10 })
-  ] }) }) });
-}, St = I(() => {
-  const { budgets: t } = D();
-  return /* @__PURE__ */ d(b, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
-    /* @__PURE__ */ e($, { color: "secondary", name: "bubble_chart", sx: { fontSize: 32 } }),
-    /* @__PURE__ */ e(p, { bold: !0, color: "secondary", variant: "Small", children: t.zero_state_no_sub_budgets }),
-    /* @__PURE__ */ e(p, { color: "text.secondary", variant: "XSmall", children: t.zero_state_no_sub_budgets_description })
-  ] });
-}), At = I(({ budget: t }) => {
-  const {
-    amount: o,
-    budgetColors: { background: i },
-    category: s,
-    percentage: a,
-    transaction_total: n
-  } = t, { setSelectedSubBudget: r } = w();
-  return /* @__PURE__ */ e(V, { children: /* @__PURE__ */ d(Y, { onClick: () => r(t), children: [
-    /* @__PURE__ */ e(ne, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(Ae, { color: i, percent: a, size: 40, children: /* @__PURE__ */ e(H, { categoryGuid: s.parent_guid, variant: "basic" }) }) }),
-    /* @__PURE__ */ e(
-      Z,
-      {
-        primary: /* @__PURE__ */ e(b, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: t.category.name }) }),
-        secondary: /* @__PURE__ */ e(b, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(p, { fontWeight: 400, variant: "Body", children: `
-                  ${T(n, "0,0")} / 
-                  ${T(o, "0,0")}
-                ` }) })
-      }
-    )
-  ] }) });
-}), xt = I(({ category: t, parentBudget: o }) => {
-  const { budgets: i, common: s } = D(), { setExpandedGuid: a, setOnSelect: n } = Je(), { addBudget: r } = w(), [c, y] = l.useState(!1), [h, m] = l.useState(!1), [g, f] = l.useState(""), [_, u] = l.useState(void 0);
-  l.useEffect(() => {
-    n((A) => {
-      const x = t.subCategories.find((v) => v.guid === A);
-      x && (u(x), f(`${x.currentAmount === 0 ? "" : x.currentAmount}`), m(!0));
-    });
-  }, []);
-  const C = () => {
-    a(t.guid), y(!0);
-  }, B = async () => {
-    _ && Number(g) > 0 && (await r(_, Number(g), o.guid), m(!1), y(!1), u(void 0));
-  };
-  return /* @__PURE__ */ d(W, { children: [
-    /* @__PURE__ */ e(V, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(Y, { onClick: C, children: /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ d(b, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
-      /* @__PURE__ */ d(b, { alignItems: "center", direction: "row", gap: 8, children: [
-        /* @__PURE__ */ e($, { fill: !0, name: "add_box", size: 24, sx: { color: "primary.light" } }),
-        /* @__PURE__ */ e(p, { bold: !0, sx: { color: "primary.light" }, variant: "Body", children: i.add_sub_budget_button })
-      ] }),
-      /* @__PURE__ */ e($, { name: "chevron_right", size: 24, sx: { color: "primary.light" } })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(te, {}),
-    /* @__PURE__ */ e(
-      M,
-      {
-        ariaLabelClose: s.close_aria,
-        isOpen: c,
-        onClose: () => y(!1),
-        title: i.add_sub_budget_title,
-        children: /* @__PURE__ */ e(K, { children: /* @__PURE__ */ e(Qe, { category: t, subCategories: t.subCategories }) })
-      }
-    ),
-    /* @__PURE__ */ e(
-      N,
-      {
-        copy: { close_aria: s.close_aria, title: i.add_title },
-        disablePrimaryButton: Number(g) <= 0,
-        isOpen: h,
-        onClose: () => m(!1),
-        onPrimaryAction: B,
-        primaryText: i.add_save_button,
-        children: /* @__PURE__ */ e(
-          oe,
-          {
-            amount: g,
-            categoryName: _?.name || "",
-            onAmountChanged: f
-          }
-        )
-      }
-    )
-  ] });
-}), vt = I(({ budget: t }) => {
-  const { category: o, subBudgets: i } = t, { budgets: s, common: a } = D(), { deleteBudget: n, selectedSubBudget: r, setSelectedSubBudget: c, updateBudget: y } = w(), { filter: h, setFilter: m } = ee(), [g, f] = l.useState(!1), [_, u] = l.useState(!1), [C, B] = l.useState("");
-  l.useEffect(() => {
-    r && (B(`${r.amount}`), m({
-      ...h,
-      custom: (S) => S.category_guid === r.category_guid
-    }));
-  }, [r]);
-  const A = async () => {
-    r && await y({
-      ...r,
-      amount: Number(C)
-    });
-  }, x = async () => {
-    r && await n(r.guid), u(!1), v();
-  }, v = () => {
-    m({
-      ...h,
-      custom: (S) => S.category_guid === t.category_guid || S.top_level_category_guid === t.category_guid
-    }), c(void 0);
-  };
-  return /* @__PURE__ */ d(l.Fragment, { children: [
-    /* @__PURE__ */ d(K, { sx: { bgcolor: "background.paper" }, children: [
-      i.length === 0 ? /* @__PURE__ */ e(St, {}) : i.map((S) => /* @__PURE__ */ d(l.Fragment, { children: [
-        /* @__PURE__ */ e(At, { budget: S }),
-        /* @__PURE__ */ e(te, {})
-      ] }, S.guid)),
-      /* @__PURE__ */ e(xt, { category: o, parentBudget: t })
-    ] }),
-    /* @__PURE__ */ e(
-      M,
-      {
-        ariaLabelClose: a.close_aria,
-        isOpen: !!r,
-        onClose: v,
-        onPrimaryAction: () => f(!0),
-        onSecondaryAction: () => u(!0),
-        primaryText: s.details_edit_button,
-        secondaryText: s.details_delete_button,
-        title: s.details_title,
-        children: r && /* @__PURE__ */ d(b, { gap: 24, children: [
-          /* @__PURE__ */ e(we, { budget: r }),
-          /* @__PURE__ */ e(Se, { height: "100%" })
-        ] })
-      }
-    ),
-    r && /* @__PURE__ */ d(l.Fragment, { children: [
-      /* @__PURE__ */ e(
-        N,
-        {
-          copy: { close_aria: a.close_aria, title: s.details_edit_title },
-          disablePrimaryButton: Number(C) <= 0,
-          isOpen: g,
-          onClose: () => f(!1),
-          onPrimaryAction: A,
-          primaryText: s.edit_save_button,
-          children: /* @__PURE__ */ e(
-            oe,
-            {
-              amount: C,
-              categoryName: r.category.name,
-              onAmountChanged: B
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ e(
-        N,
-        {
-          copy: { close_aria: a.close_aria, title: s.delete_title },
-          isOpen: _,
-          onClose: () => u(!1),
-          onPrimaryAction: x,
-          primaryColor: "error",
-          primaryText: "Delete",
-          secondaryColor: "secondary",
-          children: /* @__PURE__ */ e(p, { variant: "Paragraph", children: L(s.delete_description, r.category.name) })
-        }
-      )
-    ] })
-  ] });
-}), Tt = I(({ budget: t }) => {
-  const { is_mobile_webview: o } = ze(), { setAlert: i } = w(), { budgets: s, common: a, transactions: n } = D(), { isDesktop: r } = le(), {
-    sortedTransactions: c,
-    sortedTransactionsWithSplits: y,
-    tags: h
-  } = ee(), [m, g] = l.useState(0), [f, _] = l.useState(""), u = l.useMemo(
-    () => c.find((x) => x.guid === f),
-    [f, c]
-  ), C = (x, v) => {
-    g(v);
-  }, B = () => {
-    Ze(y, h), i(s.alert_csv_downloaded);
-  }, A = c.length > 0 && !o && r;
-  return /* @__PURE__ */ d(b, { gap: 24, children: [
-    /* @__PURE__ */ e(we, { budget: t }),
-    /* @__PURE__ */ d(b, { children: [
-      /* @__PURE__ */ d(
-        Ye,
-        {
-          onChange: C,
-          sx: { width: "100%" },
-          textColor: "primary",
-          value: m,
-          variant: "fullWidth",
-          children: [
-            /* @__PURE__ */ e(pe, { label: s.details_transactions_tab }),
-            /* @__PURE__ */ e(pe, { label: s.details_subbudgets_tab })
-          ]
-        }
-      ),
-      m === 0 && /* @__PURE__ */ d(b, { children: [
-        A && /* @__PURE__ */ e(b, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ e(
-          Be,
-          {
-            onClick: B,
-            startIcon: /* @__PURE__ */ e($, { name: "ios_share" }),
-            variant: "text",
-            children: n.export_csv_btn
-          }
-        ) }),
-        /* @__PURE__ */ e(Se, { height: "100%", onClick: _ })
-      ] }),
-      m === 1 && /* @__PURE__ */ e(vt, { budget: t }),
-      /* @__PURE__ */ e(
-        M,
-        {
-          ariaLabelClose: a.close_aria,
-          isOpen: !!u,
-          onClose: () => _(""),
-          title: s.details_transaction_drawer,
-          children: u && /* @__PURE__ */ e(qe, { transaction: u })
-        }
-      )
-    ] })
-  ] });
-}), wt = I(() => {
-  const { selectedAccountGuids: t } = J(), { budgets: o, common: i } = D(), {
-    dateRange: s,
-    deleteBudget: a,
-    selectedBudget: n,
-    selectedSubBudget: r,
-    setAlert: c,
-    setSelectedBudget: y,
-    updateBudget: h
-  } = w(), { setFilter: m } = ee(), [g, f] = l.useState(!1), [_, u] = l.useState(!1), [C, B] = l.useState(!1), [A, x] = l.useState("");
-  l.useEffect(() => {
-    n && !r && (x(`${n.amount}`), f(!0), m({
-      accounts: t,
-      dateRange: s,
-      custom: (R) => R.category_guid === n.category_guid || R.top_level_category_guid === n.category_guid,
-      showSplits: !0
-    }));
-  }, [n]);
-  const v = async () => {
-    n && (await h({
-      ...n,
-      amount: Number(A),
-      percentage: n.category.totalAmount / Number(A) * 100
-    }), c(L(o.alert_budget_updated, n.category.name)));
-  }, S = async () => {
-    n && (await a(n.guid), c(L(o.alert_budget_deleted, n.category.name))), B(!1), O();
-  }, O = () => {
-    f(!1), setTimeout(() => {
-      y(void 0);
-    }, 250);
-  };
-  if (n)
-    return /* @__PURE__ */ d(l.Fragment, { children: [
-      /* @__PURE__ */ e(
-        M,
-        {
-          ariaLabelClose: i.close_aria,
-          isOpen: g,
-          onClose: O,
-          onPrimaryAction: () => u(!0),
-          onSecondaryAction: () => B(!0),
-          primaryText: o.details_edit_button,
-          secondaryColor: "error",
-          secondaryText: o.details_delete_button,
-          title: o.details_title,
-          children: /* @__PURE__ */ e(Tt, { budget: n })
-        }
-      ),
-      /* @__PURE__ */ e(
-        N,
-        {
-          copy: { close_aria: i.close_aria, title: o.details_edit_title },
-          disablePrimaryButton: Number(A) <= 0,
-          isOpen: _,
-          onClose: () => u(!1),
-          onPrimaryAction: v,
-          primaryText: o.edit_save_button,
-          children: /* @__PURE__ */ e(
-            oe,
-            {
-              amount: A,
-              categoryName: n.category.name,
-              onAmountChanged: x
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ e(
-        N,
-        {
-          copy: { close_aria: i.close_aria, title: o.delete_title },
-          isOpen: C,
-          onClose: () => B(!1),
-          onPrimaryAction: S,
-          primaryColor: "error",
-          primaryText: o.details_delete_button,
-          secondaryColor: "secondary",
-          children: /* @__PURE__ */ e(p, { variant: "Paragraph", children: L(o.delete_description, n.category.name) })
-        }
-      )
-    ] });
-}), Dt = ({ budget: t, onClick: o }) => {
-  const {
-    amount: i,
-    budgetColors: { background: s, description: a },
-    category_guid: n,
-    description: r,
-    percentage: c,
-    subBudgets: y,
-    transaction_total: h
-  } = t;
-  return /* @__PURE__ */ e(V, { children: /* @__PURE__ */ d(Y, { onClick: () => o?.(t), children: [
-    /* @__PURE__ */ e(ne, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(Ae, { color: s, percent: c, size: 40, children: /* @__PURE__ */ e(H, { categoryGuid: n, variant: "basic" }) }) }),
-    /* @__PURE__ */ e(
-      Z,
-      {
-        primary: /* @__PURE__ */ d(b, { component: "span", direction: "row", justifyContent: "space-between", children: [
-          /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: t.category.name }),
-          /* @__PURE__ */ e(p, { fontWeight: 400, variant: "Body", children: `
-                  ${T(h, "0,0")} / 
-                  ${T(i, "0,0")}
-                ` })
-        ] }),
-        secondary: /* @__PURE__ */ d(b, { component: "span", direction: "row", justifyContent: "space-between", children: [
-          /* @__PURE__ */ e(p, { variant: "XSmall", children: `${y.length} Sub-budgets` }),
-          /* @__PURE__ */ e(p, { bold: c > 100, color: a, variant: "XSmall", children: r })
-        ] })
-      }
-    )
-  ] }) });
-}, It = I(() => {
-  const { onEvent: t } = X(), { budgets: o } = D(), { detailedBudgets: i, setSelectedBudget: s } = w(), a = (n) => {
-    s(n), t(k.BUDGETS_CLICK_BUDGET_CATEGORY, {
-      budget_category: n.category.name,
-      click_type: "list"
-    });
-  };
-  return /* @__PURE__ */ d(de, { elevation: 2, children: [
-    /* @__PURE__ */ e(xe, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(fe, { children: o.budget_categories_title }) }),
-    /* @__PURE__ */ e(ue, { sx: { p: 0, ":last-child": { p: 0 } }, children: /* @__PURE__ */ e(K, { children: i.map((n) => /* @__PURE__ */ d(l.Fragment, { children: [
-      /* @__PURE__ */ e(Dt, { budget: n, onClick: a }),
-      /* @__PURE__ */ e(te, {})
-    ] }, n.guid)) }) })
-  ] });
-}), Et = I(() => {
-  const t = q(), { onEvent: o } = X(), { visibleAccounts: i } = Ce(), { budgets: s, common: a, recurring: n } = D(), { incomeCategories: r, spendCategories: c } = j(), { detailedBudgets: y, totalBudgeted: h } = w(), { incomeTotal: m } = Q(), { setFilter: g } = ee(), [f, _] = l.useState(!1), [u, C] = l.useMemo(() => {
-    const v = c.reduce((z, ae) => z + ae.totalAmount, 0);
-    let S = v / h;
-    S > 1 && (S = 1);
-    let O = t.palette.success.main;
-    S > 0.8 && S < 1 ? O = t.palette.warning.main : S >= 1 && (O = t.palette.error.main);
-    const R = [
-      {
-        color: O,
-        percentage: `${S}`
-      }
-    ];
-    return [v, R];
-  }, [y, c]), [B, A] = l.useMemo(() => {
-    const v = Math.abs(
-      r.reduce((R, z) => R + z.totalAmount, 0)
-    );
-    let S = v / m;
-    S > 1 && (S = 1);
-    const O = [
-      {
-        color: t.palette.secondary.main,
-        percentage: `${S}`
-      }
-    ];
-    return [v, O];
-  }, [r, m]), x = () => {
-    g({
-      accounts: i.map((v) => v.guid),
-      dateRange: {
-        start: et(/* @__PURE__ */ new Date(), 90),
-        end: /* @__PURE__ */ new Date()
-      }
-    }), _(!0), o(k.BUDGETS_CLICK_EDIT_INCOME);
-  };
-  return /* @__PURE__ */ d(de, { elevation: 2, sx: { overflow: "visible" }, children: [
-    /* @__PURE__ */ e(xe, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(fe, { children: s.overview_title }) }),
-    /* @__PURE__ */ e(ue, { sx: { pt: 12, px: 24 }, children: /* @__PURE__ */ d(b, { gap: 24, children: [
-      /* @__PURE__ */ d(b, { gap: 8, children: [
-        /* @__PURE__ */ e(p, { bold: !0, sx: { mb: 8 }, variant: "Body", children: s.spending_title }),
-        /* @__PURE__ */ e(ce, { data: C, height: 16 }),
-        /* @__PURE__ */ e(p, { variant: "Small", children: L(
-          s.spending_description,
-          T(u, "0,0"),
-          T(h, "0,0")
-        ) })
-      ] }),
-      /* @__PURE__ */ d(b, { gap: 8, children: [
-        /* @__PURE__ */ d(b, { alignItems: "center", direction: "row", gap: 4, mb: -4, children: [
-          /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: s.income_title }),
-          /* @__PURE__ */ e(
-            tt,
-            {
-              "aria-label": n.manage_income,
-              onClick: x,
-              sx: { p: 0 },
-              children: /* @__PURE__ */ e($, { color: "primary", name: "edit" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e(ce, { data: A, height: 16 }),
-        /* @__PURE__ */ e(p, { variant: "Small", children: L(
-          s.income_description,
-          T(B, "0,0"),
-          T(m, "0,0")
-        ) })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ e(
-      M,
-      {
-        ariaLabelClose: a.close_aria,
-        isOpen: f,
-        onClose: () => _(!1),
-        title: n.manage_income,
-        children: /* @__PURE__ */ d(b, { gap: 4, children: [
-          /* @__PURE__ */ e(p, { bold: !0, sx: { mt: 12, mx: 24 }, variant: "Small", children: s.income_title }),
-          /* @__PURE__ */ e(nt, {})
-        ] })
-      }
-    )
-  ] });
-}), be = 480, Tn = I(({ onBackClick: t, sx: o }) => {
-  const i = q(), { onEvent: s } = X(), { visibleAccounts: a } = Ce(), { budgets: n, common: r } = D(), { isCopyLoaded: c, isInitialized: y, selectedAccounts: h, setDisplayedDate: m, setSelectedAccounts: g } = J(), {
-    alert: f,
-    dateRange: _,
-    isDataLoaded: u,
-    loadBudgetData: C,
-    setDateRange: B,
-    setAlert: A,
-    setTheme: x,
-    detailedBudgets: v
-  } = w(), { loadRepeatingTransactions: S, setDateRange: O } = Q(), { reloadCategoryTotals: R } = j(), { isSmallTablet: z, isMobile: ae, isSmallMobile: De } = le(), U = z || ae || De, [Ie, re] = l.useState(!1);
-  l.useEffect(() => {
-    x(i), g(a), m(_.start, _.end), s(k.BUDGETS_VIEW);
-  }, []), l.useEffect(() => {
-    g(a);
-  }, [a]), l.useEffect(() => {
-    y && (R(h, _.start, _.end).finally(), O(_), u || (S().finally(), C().finally()));
-  }, [y, h, _]);
-  const Ee = (ge) => {
-    B({ start: ge[0] || /* @__PURE__ */ new Date(), end: ge[1] || /* @__PURE__ */ new Date() });
-  }, Oe = () => {
-    s(k.BUDGETS_CLICK_FILTER);
-  }, me = () => {
-    re(!0), s(k.BUDGETS_CLICK_ADD);
-  }, Le = () => {
-    re(!1);
-  }, Re = Xe(_.end, ye(/* @__PURE__ */ new Date()));
-  return !c || !y || !u ? /* @__PURE__ */ e(P, {}) : /* @__PURE__ */ d(
-    Ue,
-    {
-      accountOptions: a,
-      actions: [
-        {
-          iconName: "add",
-          label: n.add_title,
-          onClick: me
-        }
-      ],
-      calendarActions: { onRangeChanged: Ee, shouldDisableNext: Re },
-      onAccountsFilterClick: Oe,
-      onBackClick: t,
-      sx: o,
-      title: n.budgets_title,
-      children: [
-        (!y || !u) && /* @__PURE__ */ e(P, {}),
-        y && u && /* @__PURE__ */ d(
-          b,
-          {
-            direction: U ? "column" : "row",
-            height: "100%",
-            sx: { justifyContent: "center" },
-            width: "100%",
-            children: [
-              /* @__PURE__ */ e(b, { height: U ? 450 : "calc(100dvh - 150px)", children: /* @__PURE__ */ e(
-                ve,
-                {
-                  createBudgetOnClick: me,
-                  height: U ? 450 : 800,
-                  isDraggable: !0,
-                  shouldShowZeroState: v.length === 0,
-                  unavailableWidth: U ? 0 : be
-                }
-              ) }),
-              v.length !== 0 && /* @__PURE__ */ d(
-                b,
-                {
-                  gap: 24,
-                  height: "100%",
-                  sx: { mr: 24, mt: 48 },
-                  width: U ? "100%" : be,
-                  children: [
-                    /* @__PURE__ */ e(Et, {}),
-                    /* @__PURE__ */ e(It, {})
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ e(wt, {}),
-        /* @__PURE__ */ e(
-          M,
-          {
-            ariaLabelClose: r.close_aria,
-            isOpen: Ie,
-            onClose: () => re(!1),
-            title: n.add_new_title,
-            children: /* @__PURE__ */ e(Te, { onRecalculateBudgets: Le })
-          }
-        ),
-        /* @__PURE__ */ e(
-          Ve,
-          {
-            anchorOrigin: { vertical: "bottom", horizontal: "right" },
-            autoHideDuration: 3500,
-            onClose: () => {
-              A("");
-            },
-            open: !!f,
-            children: /* @__PURE__ */ e(
-              Ke,
-              {
-                onClose: () => {
-                  A("");
-                },
-                severity: "success",
-                variant: "filled",
-                children: f
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-});
-export {
-  vn as BubbleBudgetsMiniWidget,
-  Tn as BubbleBudgetsWidget
-};