@mx-cartographer/experiences 6.26.0-alpha.sms7 → 6.26.1-alpha.mega1

package/dist/budgets/index.es.js

@@ -0,0 +1,1116 @@
+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 _ 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 "bowser";
+import "date-fns/getUnixTime";
+import { be as se, av as le, bd as Ge, b9 as k, aM as T, aL as L, b8 as M, bf as Pe, bg as P, bh as ce, bi as Ce, j as Ne, i as je, a5 as Be, a7 as ze, a3 as Ue, W as Fe, aw as We } from "../ConnectMiniWidget-CQWafYtQ.mjs";
+import "date-fns/intlFormat";
+import "date-fns/addMonths";
+import "date-fns/addQuarters";
+import "date-fns/addWeeks";
+import "date-fns/addYears";
+import "date-fns/getDay";
+import "date-fns/isBefore";
+import "date-fns/nextDay";
+import "date-fns/setDate";
+import "date-fns/startOfToday";
+import "date-fns/fromUnixTime";
+import "@mui/material";
+import Se from "@mui/material/Button";
+import He from "@mui/material/Tooltip";
+import Xe from "@mui/material/IconButton";
+import { u as w, h as j, b as D, L as N, c as X, d as J, k as Ke, l as Q, M as Ve, i as ee, g as Ye, f as Ae } from "../Loader-CwdK8lfx.mjs";
+import "@mui/material/useMediaQuery";
+import "@mxenabled/cssinjs";
+import "date-fns/addDays";
+import "date-fns/eachDayOfInterval";
+import "date-fns/eachWeekOfInterval";
+import "date-fns/format";
+import "date-fns/isSameMonth";
+import "date-fns/subMonths";
+import "@mui/material/Paper";
+import "@mxenabled/mx-icons";
+import "date-fns/isSameDay";
+import "date-fns/isWithinInterval";
+import * as E from "d3";
+import "@mui/material/styles";
+import "@mui/x-charts";
+import "@mui/x-charts/ChartsTooltip";
+import "date-fns/differenceInCalendarDays";
+import "date-fns/endOfToday";
+import "date-fns/endOfYear";
+import "date-fns/startOfYear";
+import { subDays as Ze } from "date-fns/subDays";
+import "date-fns/subYears";
+import "@mui/material/ButtonGroup";
+import pe from "@mui/material/Tab";
+import qe from "@mui/material/Tabs";
+import "@mui/material/ToggleButton";
+import "@mui/material/ToggleButtonGroup";
+import "@mui/material/Dialog";
+import "@mui/material/DialogContent";
+import de from "@mui/material/Card";
+import ue from "@mui/material/CardContent";
+import xe from "@mui/material/CardHeader";
+import "uuid";
+import "@mui/material/FormControlLabel";
+import "@mui/material/Radio";
+import "@mui/material/Avatar";
+import K from "@mui/material/ListItem";
+import te from "@mui/material/ListItemAvatar";
+import V from "@mui/material/ListItemButton";
+import Y from "@mui/material/ListItemText";
+import "@mui/material/ListItemIcon";
+import "@mui/material/MenuItem";
+import "@mui/material/TextField";
+import "@mui/material/Switch";
+import "mobx";
+import "posthog-js";
+import { u as Je } from "../BudgetUtil-CVqAdv-j.mjs";
+import "date-fns/differenceInDays";
+import "@mui/x-data-grid-pro";
+import "date-fns";
+import oe from "@mui/material/Divider";
+import Z from "@mui/material/List";
+import "date-fns/formatISO";
+import { isAfter as Qe } from "date-fns/isAfter";
+import "date-fns/parseISO";
+import "date-fns/subQuarters";
+import "date-fns/lastDayOfMonth";
+import "date-fns/setDayOfYear";
+import "date-fns/addSeconds";
+import "date-fns/differenceInCalendarMonths";
+import "date-fns/getMonth";
+import "numeral";
+import "@mui/material/CircularProgress";
+import et from "@mui/material/ListItemSecondaryAction";
+import tt from "@mui/material/Alert";
+import ot from "@mui/material/Snackbar";
+const he = 5, nt = 100, rt = 25, at = (t) => {
+  const n = (r) => {
+    r.active || t.alphaTarget(0.3).restart(), r.subject.fx = r.subject.x, r.subject.fy = r.subject.y;
+  }, i = (r) => {
+    r.subject.fx = r.x, r.subject.fy = r.y;
+  }, s = (r) => {
+    r.active || t.alphaTarget(0), r.subject.fx = null, r.subject.fy = null;
+  };
+  return E.drag().on("start", n).on("drag", i).on("end", s);
+}, st = (t) => {
+  let n = t.transaction_total / t.amount;
+  n < 0 ? n = 0 : n > 1 && (n = 1);
+  const i = n * 2 * Math.PI, s = E.interpolate(0, i), r = E.arc().cornerRadius(5).innerRadius(t.radius - he * 2).outerRadius(t.radius - he).startAngle(0).endAngle(0);
+  return (o) => (r.endAngle(s(o)), r(t) || "");
+}, it = (t) => {
+  E.selectAll(".bubble").call(at(t));
+}, ct = (t, n, i) => {
+  t.alpha(1).restart().force(
+    "x",
+    E.forceX().x(i / 2).strength(0.01)
+  ).force(
+    "y",
+    E.forceY().y(n / 2).strength(0.01)
+  );
+}, lt = (t, n) => E.scaleLinear().domain([t, n]).range([rt, nt]), dt = (t) => {
+  const n = t.reduce((o, a) => {
+    const c = Math.max(a.transaction_total, a.amount);
+    return c > o ? c : o;
+  }, 0), i = t.reduce((o, a) => {
+    const c = Math.max(a.transaction_total, a.amount);
+    return c < o ? c : o;
+  }, n), s = lt(i, n), r = t.map((o) => {
+    const a = s(Math.max(o.transaction_total, o.amount)) || 25;
+    return {
+      ...o,
+      radius: a
+    };
+  });
+  return E.forceSimulation(r).velocityDecay(0.05).force("collide", E.forceCollide((o) => o.radius + 2).strength(0.5)).on("tick", () => {
+    E.selectAll(".bubble").data(r).attr("transform", (o) => `translate(${o.x},${o.y})`);
+  });
+}, be = 5, ut = 2e3;
+function mt({ bubble: t }) {
+  const n = q(), {
+    guid: i,
+    budgetColors: { mercury: s },
+    radius: r
+  } = t, o = `mercury-${i}`;
+  l.useEffect(() => {
+    E.select(`.${o}`).selectAll(".status").remove(), E.select(`.${o}`).append("path").transition().duration(ut).delay(0).attr("class", "status").attr("style", `fill: ${s}; fill-opacity: 1;`).attrTween("d", () => st(t));
+  }, [t]);
+  const a = E.arc().innerRadius((c) => c - 2 * be).outerRadius((c) => c - be).startAngle(0).endAngle(2 * Math.PI);
+  return /* @__PURE__ */ e("g", { className: o, children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: a(r) || "",
+      style: { fill: n.palette.common.white, fillOpacity: 0.35 }
+    }
+  ) });
+}
+const G = 75, ie = 50;
+function gt({ bubble: t, isDraggable: n, onClick: i = () => {
+} }) {
+  const [s, r] = l.useState(!1);
+  if (!t) return;
+  const {
+    budgetColors: { background: o, text: a },
+    category: { icon: c, name: y },
+    guid: h,
+    description: m,
+    radius: g,
+    x: f,
+    y: b
+  } = 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: () => r(!0),
+      onMouseLeave: () => r(!1),
+      style: { cursor: n ? "pointer" : "default" },
+      textAnchor: "middle",
+      x: f,
+      y: b,
+      children: [
+        /* @__PURE__ */ e(
+          He,
+          {
+            followCursor: !0,
+            open: s,
+            slotProps: { popper: A },
+            title: B,
+            children: /* @__PURE__ */ e("circle", { fill: o, id: `circle-${h}`, r: g })
+          }
+        ),
+        /* @__PURE__ */ e("svg", { x: u, y: C, children: /* @__PURE__ */ e($, { name: c, size: g <= G ? 24 : 32, sx: { fill: a } }) }),
+        g > G && /* @__PURE__ */ e(
+          p,
+          {
+            bold: !0,
+            component: "text",
+            id: `budget-category-${h}`,
+            sx: { fill: a },
+            variant: "Small",
+            y: 4,
+            children: y
+          }
+        ),
+        g > ie && /* @__PURE__ */ e(
+          p,
+          {
+            bold: !0,
+            component: "text",
+            id: `budget-description-${h}-1`,
+            sx: { fill: a },
+            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: a },
+            variant: "XSmall",
+            y: 28,
+            children: m.split(" ")[1]
+          }
+        ),
+        /* @__PURE__ */ e(mt, { bubble: t })
+      ]
+    },
+    h
+  );
+}
+let F;
+const pt = ({
+  height: t,
+  width: n,
+  isDraggable: i = !1,
+  onClick: s = () => {
+  }
+}) => {
+  const { detailedBudgets: r } = w();
+  return F = l.useMemo(() => dt(r), [r]), l.useEffect(() => {
+    ct(F, t, n), i && it(F);
+  }, [F, t, n]), /* @__PURE__ */ e("svg", { height: t, style: { overflow: "visible" }, width: Math.abs(n), children: F.nodes().map((o) => /* @__PURE__ */ e(gt, { bubble: o, isDraggable: i, onClick: s }, o.guid)) });
+}, ht = I(pt), bt = ({
+  isMiniWidget: t = !1,
+  onConnectAccountsClick: n,
+  createBudgetOnClick: i
+}) => {
+  const { recalculateBudgets: s } = w(), { spendCategories: r } = j(), { budgets: o } = D(), [a, c] = l.useState(!1), [y, h] = l.useState(!1), [m, g] = l.useState(!1), f = l.useMemo(() => [...r.filter((u) => u.totalAverageAmount > 0)], [r]), b = 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(N, {}) : y ? /* @__PURE__ */ e(
+    se,
+    {
+      header: o.autogenerate_budgets_error_header,
+      icon: "error",
+      iconColor: "#4D4D4D",
+      onClick: (u) => {
+        u === "primary" ? b() : i();
+      },
+      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
+        }
+      }
+    }
+  ) : /* @__PURE__ */ e(ke, { children: a ? /* @__PURE__ */ e(
+    se,
+    {
+      header: o.zero_state_generate_budgets_header,
+      icon: "error",
+      iconColor: "#4D4D4D",
+      onClick: (u) => {
+        u === "primary" ? n() : i();
+      },
+      primaryButton: o.zero_state_generate_budgets_primary_button,
+      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: 50,
+        ".buttons-footer": {
+          width: 208,
+          height: 100
+        },
+        padding: t ? 5 : 0
+      }
+    }
+  ) : /* @__PURE__ */ e(
+    se,
+    {
+      header: o.create_budgets_title,
+      icon: "bubble_chart",
+      iconColor: "#1A1A1A",
+      onClick: (u) => {
+        u === "primary" ? b() : i();
+      },
+      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: 50,
+        ".buttons-footer": {
+          width: 208,
+          height: 100
+        },
+        padding: t ? 4 : 0
+      }
+    }
+  ) });
+}, ve = I(
+  ({
+    createBudgetOnClick: t = () => {
+    },
+    height: n,
+    isDraggable: i = !1,
+    isMiniWidget: s = !1,
+    shouldShowZeroState: r,
+    unavailableWidth: o = 24
+  }) => {
+    const { onEvent: a } = X(), { setSelectedBudget: c } = w(), { isLoadingCategoryTotals: y } = j(), { isInitialized: h } = J(), { accounts: m } = D(), { availableWidth: g } = Ke(), { isMobile: f } = le(), [b, u] = l.useState(!1), C = l.useMemo(() => g - o, [g]), B = (x) => {
+      c(x), a(k.BUDGETS_CLICK_BUDGET_CATEGORY, {
+        budget_category: x.category.name,
+        click_type: "bubble"
+      });
+    }, A = () => {
+      u(!0), a(k.ACCOUNTS_CLICK_CONNECT);
+    };
+    return y ? /* @__PURE__ */ e(_, { alignItems: "center", height: n, justifyContent: "center", width: Math.abs(C), children: /* @__PURE__ */ e(N, {}) }) : /* @__PURE__ */ d(W, { ml: r || f ? 0 : 24, sx: { alignSelf: "center" }, children: [
+      r || !h ? /* @__PURE__ */ e(
+        bt,
+        {
+          createBudgetOnClick: t,
+          isMiniWidget: s,
+          onConnectAccountsClick: A
+        }
+      ) : /* @__PURE__ */ e(
+        ht,
+        {
+          height: n,
+          isDraggable: i,
+          onClick: B,
+          width: C
+        }
+      ),
+      /* @__PURE__ */ e(
+        Ge,
+        {
+          onClose: () => u(!1),
+          showConnectionsWidget: b,
+          title: m.manage_connections
+        }
+      )
+    ] });
+  }
+), _t = I(() => {
+  const { budgets: t } = D(), { totalBudgeted: n } = w(), { incomeTotal: i } = Q(), s = i - n;
+  return /* @__PURE__ */ d(_, { direction: "row", justifyContent: "center", my: 16, spacing: 20, children: [
+    /* @__PURE__ */ d(_, { 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(_, { alignItems: "center", children: [
+      /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: T(n, "0,0") }),
+      /* @__PURE__ */ e(p, { color: "secondary", variant: "Small", children: t.budgeted })
+    ] }),
+    /* @__PURE__ */ e(p, { bold: !0, justifyContent: "center", variant: "Body", children: "=" }),
+    /* @__PURE__ */ d(_, { 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: n } = D(), { budgets: i } = w(), s = l.useMemo(() => {
+      const r = i.find((c) => c.category_guid === t.guid), o = T(t.totalAverageAmount, "0,0"), a = r ? L(n.recalculate_previous_budget, T(r.amount, "0,0")) : n.recalculate_new_budget;
+      return `${o} - ${a}`;
+    }, [n, i]);
+    return /* @__PURE__ */ d(l.Fragment, { children: [
+      /* @__PURE__ */ e(K, { children: /* @__PURE__ */ d(V, { children: [
+        /* @__PURE__ */ e(te, { children: /* @__PURE__ */ e(H, { categoryGuid: t.guid, variant: "filled" }) }),
+        /* @__PURE__ */ e(Y, { primary: t.name, secondary: s })
+      ] }) }),
+      /* @__PURE__ */ e(oe, {})
+    ] }, t.guid);
+  }
+), ft = ({ onRecalculateBudgets: t }) => {
+  const { budgets: n, common: i } = D(), { spendCategories: s } = j(), { recalculateBudgets: r, setAlert: o } = w(), [a, c] = l.useState(!1), y = s.filter((m) => m.totalAverageAmount > 0), h = async () => {
+    await r(y), c(!1), o(n.alert_recalculated_budgets), t?.();
+  };
+  return /* @__PURE__ */ d(l.Fragment, { children: [
+    /* @__PURE__ */ e(Se, { onClick: () => c(!0), sx: { mt: 24, mx: 24 }, variant: "text", children: n.recalculate_button }),
+    /* @__PURE__ */ e(p, { sx: { mx: 24, my: 16, textAlign: "center", whiteSpace: "wrap" }, variant: "Paragraph", children: n.recalculate_help }),
+    /* @__PURE__ */ e(
+      M,
+      {
+        ariaLabelClose: i.close_aria,
+        isOpen: a,
+        onClose: () => c(!1),
+        onPrimaryAction: h,
+        title: n.recalculate_title,
+        children: /* @__PURE__ */ d(_, { children: [
+          /* @__PURE__ */ d(_, { mx: 24, my: 16, children: [
+            /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: n.recalculate_description_top }),
+            /* @__PURE__ */ e(p, { variant: "ParagraphSmall", children: n.recalculate_description_bottom })
+          ] }),
+          /* @__PURE__ */ e(W, { bgcolor: "background.paper", children: /* @__PURE__ */ e(Z, { children: y.map((m) => /* @__PURE__ */ e(yt, { category: m }, m.guid)) }) })
+        ] })
+      }
+    )
+  ] });
+}, ne = ({
+  amount: t,
+  categoryName: n,
+  onAmountChanged: i
+}) => {
+  const { budgets: s } = D(), { totalBudgeted: r } = w(), { incomeTotal: o } = Q(), a = o - r;
+  return /* @__PURE__ */ d(_, { gap: 16, children: [
+    /* @__PURE__ */ d(_, { children: [
+      /* @__PURE__ */ e(p, { children: L(
+        s.add_description_top,
+        T(a, "0,0")
+      ) }),
+      /* @__PURE__ */ e(p, { children: L(s.add_description_bottom, n) })
+    ] }),
+    /* @__PURE__ */ e(
+      Pe,
+      {
+        amount: t,
+        autoFocus: !0,
+        label: s.add_label,
+        minAmount: 0,
+        setAmount: i,
+        sx: { ".MuiTypography-Body": { p: 0 } }
+      }
+    )
+  ] });
+}, Ct = I(({ category: t, onAddBudget: n }) => {
+  const { budgets: i, common: s } = D(), [r, o] = l.useState(!1), [a, c] = l.useState(
+    `${t.totalAmount === 0 ? "" : t.totalAmount}`
+  );
+  return /* @__PURE__ */ d(l.Fragment, { children: [
+    /* @__PURE__ */ e(K, { children: /* @__PURE__ */ d(V, { onClick: () => o(!0), children: [
+      /* @__PURE__ */ e(te, { children: /* @__PURE__ */ e(H, { categoryGuid: t.guid }) }),
+      /* @__PURE__ */ e(
+        Y,
+        {
+          primary: t.name,
+          secondary: T(t.totalAmount, "0,0")
+        }
+      ),
+      /* @__PURE__ */ e(et, { children: /* @__PURE__ */ e($, { name: "add", size: 20 }) })
+    ] }) }, t.guid),
+    /* @__PURE__ */ e(
+      P,
+      {
+        copy: { close_aria: s.close_aria, title: i.add_title },
+        disablePrimaryButton: Number(a) <= 0,
+        isOpen: r,
+        onClose: () => o(!1),
+        onPrimaryAction: () => n(t, Number(a)),
+        primaryText: i.add_save_button,
+        children: /* @__PURE__ */ e(ne, { amount: a, categoryName: t.name, onAmountChanged: c })
+      }
+    )
+  ] });
+}), Te = I(({ onRecalculateBudgets: t }) => {
+  const { budgets: n } = D(), { addBudget: i, setAlert: s, unbudgetedCategories: r } = w(), o = async (a, c) => {
+    await i(a, c), s(L(n.alert_budget_created, a.name));
+  };
+  return /* @__PURE__ */ d(_, { children: [
+    /* @__PURE__ */ e(_t, {}),
+    /* @__PURE__ */ e(W, { bgcolor: "background.paper", children: /* @__PURE__ */ e(Z, { children: r.map((a) => /* @__PURE__ */ e(
+      Ct,
+      {
+        category: a,
+        onAddBudget: o
+      },
+      a.guid
+    )) }) }),
+    /* @__PURE__ */ e(ft, { onRecalculateBudgets: t })
+  ] });
+}), Bt = (t) => {
+  const n = q(), { onEvent: i } = X(), { detailedBudgets: s, isDataLoaded: r, loadBudgetData: o, setTheme: a } = w(), { budgets: c, common: y } = D(), { isCopyLoaded: h, isInitialized: m, selectedAccounts: g } = J(), { reloadCategoryTotals: f } = j(), b = Je(), u = s.length === 0, [C, B] = l.useState(!1), A = () => {
+    B(!0), i(k.BUDGETS_CLICK_ADD);
+  }, x = () => {
+    B(!1);
+  };
+  return l.useEffect(() => {
+    a(n);
+  }, [n]), l.useEffect(() => {
+    m && !r && f(g, ye(/* @__PURE__ */ new Date()), Me(/* @__PURE__ */ new Date())).then(
+      () => {
+        o().finally();
+      }
+    );
+  }, [m, g]), h ? /* @__PURE__ */ d(
+    Ve,
+    {
+      primaryCtaLabel: u ? c.get_started_cta : c.details_cta,
+      title: c.budgets_title,
+      ...t,
+      children: [
+        r ? /* @__PURE__ */ d(_, { 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: b < 0 ? "error.main" : "success.main", children: T(Math.abs(b), "0,0") }),
+            /* @__PURE__ */ e(p, { children: b < 0 ? c.overspent_in_budgets : c.left_in_budgets })
+          ] })
+        ] }) : /* @__PURE__ */ e(N, {}),
+        /* @__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(N, {});
+}, yn = I(Bt), we = ({ budget: t }) => {
+  const {
+    amount: n,
+    budgetColors: { background: i },
+    category: { name: s },
+    category_guid: r,
+    percentage: o,
+    transaction_total: a
+  } = t, c = [
+    {
+      color: i,
+      percentage: `${o}%`
+    }
+  ];
+  return /* @__PURE__ */ e(de, { sx: { mt: 24, mx: 24 }, children: /* @__PURE__ */ e(ue, { children: /* @__PURE__ */ d(_, { alignItems: "center", gap: 16, children: [
+    /* @__PURE__ */ e(H, { categoryGuid: r, size: 56 }),
+    /* @__PURE__ */ e($e, { children: `${T(a, "0,0")} / ${T(n, "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(_, { 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: n,
+    budgetColors: { background: i },
+    category: s,
+    percentage: r,
+    transaction_total: o
+  } = t, { setSelectedSubBudget: a } = w();
+  return /* @__PURE__ */ e(K, { children: /* @__PURE__ */ d(V, { onClick: () => a(t), children: [
+    /* @__PURE__ */ e(te, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(Ce, { color: i, percent: r, size: 40, children: /* @__PURE__ */ e(H, { categoryGuid: s.parent_guid, variant: "basic" }) }) }),
+    /* @__PURE__ */ e(
+      Y,
+      {
+        primary: /* @__PURE__ */ e(_, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: t.category.name }) }),
+        secondary: /* @__PURE__ */ e(_, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(p, { fontWeight: 400, variant: "Body", children: `
+                  ${T(o, "0,0")} / 
+                  ${T(n, "0,0")}
+                ` }) })
+      }
+    )
+  ] }) });
+}), xt = I(({ category: t, parentBudget: n }) => {
+  const { budgets: i, common: s } = D(), { setExpandedGuid: r, setOnSelect: o } = Ne(), { addBudget: a } = w(), [c, y] = l.useState(!1), [h, m] = l.useState(!1), [g, f] = l.useState(""), [b, u] = l.useState(void 0);
+  l.useEffect(() => {
+    o((A) => {
+      const x = t.subCategories.find((v) => v.guid === A);
+      x && (u(x), f(`${x.currentAmount === 0 ? "" : x.currentAmount}`), m(!0));
+    });
+  }, []);
+  const C = () => {
+    r(t.guid), y(!0);
+  }, B = async () => {
+    b && Number(g) > 0 && (await a(b, Number(g), n.guid), m(!1), y(!1), u(void 0));
+  };
+  return /* @__PURE__ */ d(W, { children: [
+    /* @__PURE__ */ e(K, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(V, { onClick: C, children: /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ d(_, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
+      /* @__PURE__ */ d(_, { 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(oe, {}),
+    /* @__PURE__ */ e(
+      M,
+      {
+        ariaLabelClose: s.close_aria,
+        isOpen: c,
+        onClose: () => y(!1),
+        title: i.add_sub_budget_title,
+        children: /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(je, { category: t, subCategories: t.subCategories }) })
+      }
+    ),
+    /* @__PURE__ */ e(
+      P,
+      {
+        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(
+          ne,
+          {
+            amount: g,
+            categoryName: b?.name || "",
+            onAmountChanged: f
+          }
+        )
+      }
+    )
+  ] });
+}), vt = I(({ budget: t }) => {
+  const { category: n, subBudgets: i } = t, { budgets: s, common: r } = D(), { deleteBudget: o, selectedSubBudget: a, setSelectedSubBudget: c, updateBudget: y } = w(), { filter: h, setFilter: m } = ee(), [g, f] = l.useState(!1), [b, u] = l.useState(!1), [C, B] = l.useState("");
+  l.useEffect(() => {
+    a && (B(`${a.amount}`), m({
+      ...h,
+      custom: (S) => S.category_guid === a.category_guid
+    }));
+  }, [a]);
+  const A = async () => {
+    a && await y({
+      ...a,
+      amount: Number(C)
+    });
+  }, x = async () => {
+    a && await o(a.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(Z, { 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(oe, {})
+      ] }, S.guid)),
+      /* @__PURE__ */ e(xt, { category: n, parentBudget: t })
+    ] }),
+    /* @__PURE__ */ e(
+      M,
+      {
+        ariaLabelClose: r.close_aria,
+        isOpen: !!a,
+        onClose: v,
+        onPrimaryAction: () => f(!0),
+        onSecondaryAction: () => u(!0),
+        primaryText: s.details_edit_button,
+        secondaryText: s.details_delete_button,
+        title: s.details_title,
+        children: a && /* @__PURE__ */ d(_, { gap: 24, children: [
+          /* @__PURE__ */ e(we, { budget: a }),
+          /* @__PURE__ */ e(Be, { height: "100%" })
+        ] })
+      }
+    ),
+    a && /* @__PURE__ */ d(l.Fragment, { children: [
+      /* @__PURE__ */ e(
+        P,
+        {
+          copy: { close_aria: r.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(
+            ne,
+            {
+              amount: C,
+              categoryName: a.category.name,
+              onAmountChanged: B
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        P,
+        {
+          copy: { close_aria: r.close_aria, title: s.delete_title },
+          isOpen: b,
+          onClose: () => u(!1),
+          onPrimaryAction: x,
+          primaryColor: "error",
+          primaryText: "Delete",
+          secondaryColor: "secondary",
+          children: /* @__PURE__ */ e(p, { variant: "Paragraph", children: L(s.delete_description, a.category.name) })
+        }
+      )
+    ] })
+  ] });
+}), Tt = I(({ budget: t }) => {
+  const { is_mobile_webview: n } = Ye(), { setAlert: i } = w(), { budgets: s, common: r, transactions: o } = D(), { isDesktop: a } = le(), {
+    sortedTransactions: c,
+    sortedTransactionsWithSplits: y,
+    tags: h
+  } = ee(), [m, g] = l.useState(0), [f, b] = l.useState(""), u = l.useMemo(
+    () => c.find((x) => x.guid === f),
+    [f, c]
+  ), C = (x, v) => {
+    g(v);
+  }, B = () => {
+    Ue(y, h), i(s.alert_csv_downloaded);
+  }, A = c.length > 0 && !n && a;
+  return /* @__PURE__ */ d(_, { gap: 24, children: [
+    /* @__PURE__ */ e(we, { budget: t }),
+    /* @__PURE__ */ d(_, { children: [
+      /* @__PURE__ */ d(
+        qe,
+        {
+          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(_, { children: [
+        A && /* @__PURE__ */ e(_, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ e(
+          Se,
+          {
+            onClick: B,
+            startIcon: /* @__PURE__ */ e($, { name: "ios_share" }),
+            variant: "text",
+            children: o.export_csv_btn
+          }
+        ) }),
+        /* @__PURE__ */ e(Be, { height: "100%", onClick: b })
+      ] }),
+      m === 1 && /* @__PURE__ */ e(vt, { budget: t }),
+      /* @__PURE__ */ e(
+        M,
+        {
+          ariaLabelClose: r.close_aria,
+          isOpen: !!u,
+          onClose: () => b(""),
+          title: s.details_transaction_drawer,
+          children: u && /* @__PURE__ */ e(ze, { transaction: u })
+        }
+      )
+    ] })
+  ] });
+}), wt = I(() => {
+  const { selectedAccountGuids: t } = J(), { budgets: n, common: i } = D(), {
+    dateRange: s,
+    deleteBudget: r,
+    selectedBudget: o,
+    selectedSubBudget: a,
+    setAlert: c,
+    setSelectedBudget: y,
+    updateBudget: h
+  } = w(), { setFilter: m } = ee(), [g, f] = l.useState(!1), [b, u] = l.useState(!1), [C, B] = l.useState(!1), [A, x] = l.useState("");
+  l.useEffect(() => {
+    o && !a && (x(`${o.amount}`), f(!0), m({
+      accounts: t,
+      dateRange: s,
+      custom: (R) => R.category_guid === o.category_guid || R.top_level_category_guid === o.category_guid
+    }));
+  }, [o]);
+  const v = async () => {
+    o && (await h({
+      ...o,
+      amount: Number(A),
+      percentage: o.category.totalAmount / Number(A) * 100
+    }), c(L(n.alert_budget_updated, o.category.name)));
+  }, S = async () => {
+    o && (await r(o.guid), c(L(n.alert_budget_deleted, o.category.name))), B(!1), O();
+  }, O = () => {
+    f(!1), setTimeout(() => {
+      y(void 0);
+    }, 250);
+  };
+  if (o)
+    return /* @__PURE__ */ d(l.Fragment, { children: [
+      /* @__PURE__ */ e(
+        M,
+        {
+          ariaLabelClose: i.close_aria,
+          isOpen: g,
+          onClose: O,
+          onPrimaryAction: () => u(!0),
+          onSecondaryAction: () => B(!0),
+          primaryText: n.details_edit_button,
+          secondaryColor: "error",
+          secondaryText: n.details_delete_button,
+          title: n.details_title,
+          children: /* @__PURE__ */ e(Tt, { budget: o })
+        }
+      ),
+      /* @__PURE__ */ e(
+        P,
+        {
+          copy: { close_aria: i.close_aria, title: n.details_edit_title },
+          disablePrimaryButton: Number(A) <= 0,
+          isOpen: b,
+          onClose: () => u(!1),
+          onPrimaryAction: v,
+          primaryText: n.edit_save_button,
+          children: /* @__PURE__ */ e(
+            ne,
+            {
+              amount: A,
+              categoryName: o.category.name,
+              onAmountChanged: x
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        P,
+        {
+          copy: { close_aria: i.close_aria, title: n.delete_title },
+          isOpen: C,
+          onClose: () => B(!1),
+          onPrimaryAction: S,
+          primaryColor: "error",
+          primaryText: n.details_delete_button,
+          secondaryColor: "secondary",
+          children: /* @__PURE__ */ e(p, { variant: "Paragraph", children: L(n.delete_description, o.category.name) })
+        }
+      )
+    ] });
+}), Dt = ({ budget: t, onClick: n }) => {
+  const {
+    amount: i,
+    budgetColors: { background: s, description: r },
+    category_guid: o,
+    description: a,
+    percentage: c,
+    subBudgets: y,
+    transaction_total: h
+  } = t;
+  return /* @__PURE__ */ e(K, { children: /* @__PURE__ */ d(V, { onClick: () => n?.(t), children: [
+    /* @__PURE__ */ e(te, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(Ce, { color: s, percent: c, size: 40, children: /* @__PURE__ */ e(H, { categoryGuid: o, variant: "basic" }) }) }),
+    /* @__PURE__ */ e(
+      Y,
+      {
+        primary: /* @__PURE__ */ d(_, { 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(_, { 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: r, variant: "XSmall", children: a })
+        ] })
+      }
+    )
+  ] }) });
+}, It = I(() => {
+  const { onEvent: t } = X(), { budgets: n } = D(), { detailedBudgets: i, setSelectedBudget: s } = w(), r = (o) => {
+    s(o), t(k.BUDGETS_CLICK_BUDGET_CATEGORY, {
+      budget_category: o.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: n.budget_categories_title }) }),
+    /* @__PURE__ */ e(ue, { sx: { p: 0, ":last-child": { p: 0 } }, children: /* @__PURE__ */ e(Z, { children: i.map((o) => /* @__PURE__ */ d(l.Fragment, { children: [
+      /* @__PURE__ */ e(Dt, { budget: o, onClick: r }),
+      /* @__PURE__ */ e(oe, {})
+    ] }, o.guid)) }) })
+  ] });
+}), Et = I(() => {
+  const t = q(), { onEvent: n } = X(), { visibleAccounts: i } = Ae(), { budgets: s, common: r, recurring: o } = D(), { incomeCategories: a, spendCategories: c } = j(), { detailedBudgets: y, totalBudgeted: h } = w(), { incomeTotal: m } = Q(), { setFilter: g } = ee(), [f, b] = l.useState(!1), [u, C] = l.useMemo(() => {
+    const v = c.reduce((z, re) => z + re.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(
+      a.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];
+  }, [a, m]), x = () => {
+    g({
+      accounts: i.map((v) => v.guid),
+      dateRange: {
+        start: Ze(/* @__PURE__ */ new Date(), 90),
+        end: /* @__PURE__ */ new Date()
+      }
+    }), b(!0), n(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(_, { gap: 24, children: [
+      /* @__PURE__ */ d(_, { 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(_, { gap: 8, children: [
+        /* @__PURE__ */ d(_, { alignItems: "center", direction: "row", gap: 4, mb: -4, children: [
+          /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: s.income_title }),
+          /* @__PURE__ */ e(
+            Xe,
+            {
+              "aria-label": o.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: r.close_aria,
+        isOpen: f,
+        onClose: () => b(!1),
+        title: o.manage_income,
+        children: /* @__PURE__ */ d(_, { gap: 4, children: [
+          /* @__PURE__ */ e(p, { bold: !0, sx: { mt: 12, mx: 24 }, variant: "Small", children: s.income_title }),
+          /* @__PURE__ */ e(Fe, {})
+        ] })
+      }
+    )
+  ] });
+}), _e = 480, fn = I(({ onBackClick: t, sx: n }) => {
+  const i = q(), { onEvent: s } = X(), { visibleAccounts: r } = Ae(), { budgets: o, common: a } = D(), { isCopyLoaded: c, isInitialized: y, selectedAccounts: h, setDisplayedDate: m, setSelectedAccounts: g } = J(), {
+    alert: f,
+    dateRange: b,
+    isDataLoaded: u,
+    loadBudgetData: C,
+    setDateRange: B,
+    setAlert: A,
+    setTheme: x,
+    detailedBudgets: v
+  } = w(), { loadRepeatingTransactions: S, setDateRange: O } = Q(), { reloadCategoryTotals: R } = j(), { isSmallTablet: z, isMobile: re, isSmallMobile: De } = le(), U = z || re || De, [Ie, ae] = l.useState(!1);
+  l.useEffect(() => {
+    x(i), g(r), m(b.start, b.end), s(k.BUDGETS_VIEW);
+  }, []), l.useEffect(() => {
+    g(r);
+  }, [r]), l.useEffect(() => {
+    y && (R(h, b.start, b.end).finally(), O(b), u || (S().finally(), C().finally()));
+  }, [y, h, b]);
+  const Ee = (ge) => {
+    B({ start: ge[0] || /* @__PURE__ */ new Date(), end: ge[1] || /* @__PURE__ */ new Date() });
+  }, Oe = () => {
+    s(k.BUDGETS_CLICK_FILTER);
+  }, me = () => {
+    ae(!0), s(k.BUDGETS_CLICK_ADD);
+  }, Le = () => {
+    ae(!1);
+  }, Re = Qe(b.end, ye(/* @__PURE__ */ new Date()));
+  return !c || !y || !u ? /* @__PURE__ */ e(N, {}) : /* @__PURE__ */ d(
+    We,
+    {
+      accountOptions: r,
+      actions: [
+        {
+          iconName: "add",
+          label: o.add_title,
+          onClick: me
+        }
+      ],
+      calendarActions: { onRangeChanged: Ee, shouldDisableNext: Re },
+      onAccountsFilterClick: Oe,
+      onBackClick: t,
+      sx: n,
+      title: o.budgets_title,
+      children: [
+        (!y || !u) && /* @__PURE__ */ e(N, {}),
+        y && u && /* @__PURE__ */ d(
+          _,
+          {
+            direction: U ? "column" : "row",
+            height: "100%",
+            sx: { justifyContent: "center" },
+            width: "100%",
+            children: [
+              /* @__PURE__ */ e(_, { 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 : _e
+                }
+              ) }),
+              v.length !== 0 && /* @__PURE__ */ d(
+                _,
+                {
+                  gap: 24,
+                  height: "100%",
+                  sx: { mr: 24, mt: 48 },
+                  width: U ? "100%" : _e,
+                  children: [
+                    /* @__PURE__ */ e(Et, {}),
+                    /* @__PURE__ */ e(It, {})
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(wt, {}),
+        /* @__PURE__ */ e(
+          M,
+          {
+            ariaLabelClose: a.close_aria,
+            isOpen: Ie,
+            onClose: () => ae(!1),
+            title: o.add_new_title,
+            children: /* @__PURE__ */ e(Te, { onRecalculateBudgets: Le })
+          }
+        ),
+        /* @__PURE__ */ e(
+          ot,
+          {
+            anchorOrigin: { vertical: "bottom", horizontal: "right" },
+            autoHideDuration: 3500,
+            onClose: () => {
+              A("");
+            },
+            open: !!f,
+            children: /* @__PURE__ */ e(
+              tt,
+              {
+                onClose: () => {
+                  A("");
+                },
+                severity: "success",
+                variant: "filled",
+                children: f
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  yn as BubbleBudgetsMiniWidget,
+  fn as BubbleBudgetsWidget
+};
+//# sourceMappingURL=index.es.js.map