@mx-cartographer/experiences 4.0.14-alpha.JB0 → 4.0.14-alpha.JB2

package/dist/index.es16.js

@@ -0,0 +1,962 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import d from "react";
+import { observer as A } from "mobx-react-lite";
+import U from "@mui/material/Box";
+import m from "@mui/material/Stack";
+import V from "@mui/material/styles/useTheme";
+import { Icon as $, Text as u, CategoryIcon as F, H3 as pe, H1 as Te } from "@kyper/mui";
+import "bowser";
+import "date-fns/getUnixTime";
+import "date-fns/intlFormat";
+import { a5 as I, ab as T, ar as Y, ai as Z, a9 as re, b9 as we, aa as ge, az as ne, at as M, aD as De, a7 as B, a8 as he, b7 as q, au as Q, aQ as oe, a6 as R, av as k, r as Oe, aG as Ee, aE as G, j as Re, i as Le, x as be, z as $e, v as ke, aA as Pe } from "./ConnectMiniWidget-Ep65CtHH.mjs";
+import "@honeybadger-io/react";
+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 ye from "@mui/material/Button";
+import Me from "@mui/material/Tooltip";
+import Ge from "@mui/material/IconButton";
+import "@mui/material/useMediaQuery";
+import "@mxenabled/cssinjs";
+import "date-fns/addDays";
+import "date-fns/eachDayOfInterval";
+import "date-fns/eachWeekOfInterval";
+import "date-fns/endOfMonth";
+import "date-fns/format";
+import "date-fns/isSameMonth";
+import { startOfMonth as Ne } from "date-fns/startOfMonth";
+import "date-fns/subMonths";
+import "@mui/material/Paper";
+import "@mui/icons-material/KeyboardArrowLeftRounded";
+import "@mui/icons-material/KeyboardArrowRightRounded";
+import "date-fns/isSameDay";
+import "date-fns/isWithinInterval";
+import * as O from "d3";
+import "@mui/material/styles";
+import "@mui/x-charts";
+import "@mui/material";
+import "date-fns/differenceInCalendarDays";
+import "date-fns/endOfToday";
+import "date-fns/endOfYear";
+import "date-fns/startOfYear";
+import { subDays as je } from "date-fns/subDays";
+import "date-fns/subYears";
+import "@mui/material/ButtonGroup";
+import ce from "@mui/material/Tab";
+import ze from "@mui/material/Tabs";
+import "@mui/material/ToggleButton";
+import "@mui/material/ToggleButtonGroup";
+import "@mui/material/Dialog";
+import "@mui/material/DialogContent";
+import "@mui/icons-material/ArrowBackOutlined";
+import "uuid";
+import "@mui/material/CircularProgress";
+import "@mui/material/FormControlLabel";
+import "@mui/material/Radio";
+import "@mui/material/Avatar";
+import W from "@mui/material/ListItem";
+import J from "@mui/material/ListItemAvatar";
+import H from "@mui/material/ListItemButton";
+import X from "@mui/material/ListItemText";
+import "@mui/material/ListItemIcon";
+import "mobx";
+import { u as Ue, S as _e } from "./BudgetUtil-BSn9Zr71.mjs";
+import "date-fns/differenceInDays";
+import "@mui/x-data-grid-pro";
+import "date-fns";
+import "date-fns/getMonth";
+import { isAfter as Fe } from "date-fns/isAfter";
+import "date-fns/parseISO";
+import "date-fns/subWeeks";
+import "date-fns/formatISO";
+import "numeral";
+import ae from "@mui/material/Card";
+import fe from "@mui/material/CardHeader";
+import ie from "@mui/material/CardContent";
+import We from "@mui/material/Alert";
+import He from "@mui/material/Snackbar";
+import ee from "@mui/material/Divider";
+import K from "@mui/material/List";
+import Xe from "@mui/material/ListItemSecondaryAction";
+const le = 5, Ke = 100, Ve = 25, Ye = (t) => {
+  const o = (a) => {
+    a.active || t.alphaTarget(0.3).restart(), a.subject.fx = a.subject.x, a.subject.fy = a.subject.y;
+  }, s = (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", s).on("end", i);
+}, Ze = (t) => {
+  let o = t.transaction_total / t.amount;
+  o < 0 ? o = 0 : o > 1 && (o = 1);
+  const s = o * 2 * Math.PI, i = O.interpolate(0, s), a = O.arc().cornerRadius(5).innerRadius(t.radius - le * 2).outerRadius(t.radius - le).startAngle(0).endAngle(0);
+  return (n) => (a.endAngle(i(n)), a(t) || "");
+}, qe = (t) => {
+  O.selectAll(".bubble").call(Ye(t));
+}, Qe = (t, o, s) => {
+  t.alpha(1).restart().force(
+    "x",
+    O.forceX().x(s / 2).strength(0.01)
+  ).force(
+    "y",
+    O.forceY().y(o / 2).strength(0.01)
+  );
+}, Je = (t, o) => O.scaleLinear().domain([t, o]).range([Ve, Ke]), et = (t) => {
+  const o = t.reduce((n, r) => {
+    const c = Math.max(r.transaction_total, r.amount);
+    return c > n ? c : n;
+  }, 0), s = t.reduce((n, r) => {
+    const c = Math.max(r.transaction_total, r.amount);
+    return c < n ? c : n;
+  }, o), i = Je(s, o), a = t.map((n) => {
+    const r = i(Math.max(n.transaction_total, n.amount)) || 25;
+    return {
+      ...n,
+      radius: r
+    };
+  });
+  return O.forceSimulation(a).velocityDecay(0.05).force("collide", O.forceCollide((n) => n.radius + 2).strength(0.5)).on("tick", () => {
+    O.selectAll(".bubble").data(a).attr("transform", (n) => `translate(${n.x},${n.y})`);
+  });
+}, de = 5, tt = 2e3;
+function nt({ bubble: t }) {
+  const o = V(), {
+    guid: s,
+    budgetColors: { mercury: i },
+    radius: a
+  } = t, n = `mercury-${s}`;
+  d.useEffect(() => {
+    O.select(`.${n}`).selectAll(".status").remove(), O.select(`.${n}`).append("path").transition().duration(tt).delay(0).attr("class", "status").attr("style", `fill: ${i}; fill-opacity: 1;`).attrTween("d", () => Ze(t));
+  }, [t]);
+  const r = O.arc().innerRadius((c) => c - 2 * de).outerRadius((c) => c - de).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 P = 75, ue = 50;
+function ot({ bubble: t, isDraggable: o, onClick: s = () => {
+} }) {
+  const [i, a] = d.useState(!1);
+  if (d.useEffect(() => {
+    document.fonts.ready.then(() => {
+      const w = O.select(`.icon-${c}`), _ = w.node()?.getComputedTextLength();
+      w.attr("x", () => p < P ? _ ? _ / 2 - 12 : 12 : _ ? _ / 2 - 16 : 16);
+    });
+  }, []), !t) return;
+  const {
+    budgetColors: { background: n, text: r },
+    category: { icon: c, name: b },
+    guid: h,
+    description: g,
+    radius: p,
+    x: y,
+    y: x
+  } = t;
+  let C = 13;
+  p > 75 ? C = -20 : p > 50 && (C = -6);
+  const v = `${t.category.name}: ${g}`, D = {
+    modifiers: [
+      {
+        name: "offset",
+        options: { offset: [0, 15] }
+      }
+    ]
+  };
+  return /* @__PURE__ */ l(
+    "g",
+    {
+      className: "bubble",
+      id: `bubble-${h}`,
+      onClick: () => s(t),
+      onMouseEnter: () => a(!0),
+      onMouseLeave: () => a(!1),
+      style: { cursor: o ? "pointer" : "default" },
+      textAnchor: "middle",
+      x: y,
+      y: x,
+      children: [
+        /* @__PURE__ */ e(
+          Me,
+          {
+            followCursor: !0,
+            open: i,
+            slotProps: { popper: D },
+            title: v,
+            children: /* @__PURE__ */ e("circle", { fill: n, id: `circle-${h}`, r: p })
+          }
+        ),
+        /* @__PURE__ */ e(
+          $,
+          {
+            className: `icon-${c}`,
+            component: "text",
+            name: c,
+            size: p <= P ? 24 : 32,
+            sx: {
+              fill: r
+            },
+            y: C
+          }
+        ),
+        p > P && /* @__PURE__ */ e(
+          u,
+          {
+            bold: !0,
+            component: "text",
+            id: `budget-category-${h}`,
+            sx: { fill: r },
+            variant: "Small",
+            y: 4,
+            children: b
+          }
+        ),
+        p > ue && /* @__PURE__ */ e(
+          u,
+          {
+            bold: !0,
+            component: "text",
+            id: `budget-description-${h}-1`,
+            sx: { fill: r },
+            variant: "Body",
+            y: p <= P ? 12 : 24,
+            children: p <= P ? g.split(" ")[0] : g
+          }
+        ),
+        p <= P && p > ue && /* @__PURE__ */ e(
+          u,
+          {
+            component: "text",
+            id: `budget-description-${h}-2`,
+            sx: { fill: r },
+            variant: "XSmall",
+            y: 28,
+            children: g.split(" ")[1]
+          }
+        ),
+        /* @__PURE__ */ e(nt, { bubble: t })
+      ]
+    },
+    h
+  );
+}
+let z;
+const rt = ({
+  height: t,
+  width: o,
+  isDraggable: s = !1,
+  onClick: i = () => {
+  }
+}) => {
+  const { detailedBudgets: a } = I();
+  return z = d.useMemo(() => et(a), [a]), d.useEffect(() => {
+    Qe(z, t, o), s && qe(z);
+  }, [z, t, o]), /* @__PURE__ */ e("svg", { height: t, style: { overflow: "visible" }, width: Math.abs(o), children: z.nodes().map((n) => /* @__PURE__ */ e(ot, { bubble: n, isDraggable: s, onClick: i }, n.guid)) });
+}, at = A(rt), it = () => {
+  const { budgets: t } = T();
+  return /* @__PURE__ */ l(m, { alignItems: "center", gap: 12, sx: { mx: 24, textAlign: "center" }, children: [
+    /* @__PURE__ */ e($, { name: "bubble_chart", size: 48 }),
+    /* @__PURE__ */ e(u, { bold: !0, variant: "Paragraph", children: t.zero_state_title }),
+    /* @__PURE__ */ e(u, { sx: { whiteSpace: "wrap" }, variant: "Paragraph", children: t.zero_state_description })
+  ] });
+}, Ce = A(
+  ({ height: t, isDraggable: o = !1, shouldShowZeroState: s, unavailableWidth: i = 24 }) => {
+    const { onEvent: a } = Y(), { setSelectedBudget: n } = I(), { isLoadingCategoryTotals: r } = Z(), { isInitialized: c } = re(), { availableWidth: b } = we(), { isMobile: h } = ge(), g = d.useMemo(() => b - i, [b]), p = (y) => {
+      n(y), a(M.BUDGETS_CLICK_BUDGET_CATEGORY, {
+        budget_category: y.category.name,
+        click_type: "bubble"
+      });
+    };
+    return r ? /* @__PURE__ */ e(m, { alignItems: "center", height: t, justifyContent: "center", width: Math.abs(g), children: /* @__PURE__ */ e(ne, {}) }) : /* @__PURE__ */ e(U, { ml: s || h ? 0 : 24, children: s || !c ? /* @__PURE__ */ e(it, {}) : /* @__PURE__ */ e(
+      at,
+      {
+        height: t,
+        isDraggable: o,
+        onClick: p,
+        width: g
+      }
+    ) });
+  }
+), st = (t) => {
+  const o = V(), { budgets: s, loadBudgets: i, setTheme: a } = I(), { budgets: n } = T(), r = Ue(), c = s.length === 0;
+  return d.useEffect(() => {
+    a(o), i().finally();
+  }, []), /* @__PURE__ */ e(
+    De,
+    {
+      primaryCtaLabel: c ? n.get_started_cta : n.details_cta,
+      title: n.budgets_title,
+      ...t,
+      children: /* @__PURE__ */ l(m, { height: 450, mt: 32, children: [
+        /* @__PURE__ */ e(Ce, { height: 370, shouldShowZeroState: c }),
+        !c && /* @__PURE__ */ l(U, { ml: 16, children: [
+          /* @__PURE__ */ e(u, { bold: !0, color: r < 0 ? "error.main" : "success.main", children: B(Math.abs(r), "0,0") }),
+          /* @__PURE__ */ e(u, { children: r < 0 ? n.overspent_in_budgets : n.left_in_budgets })
+        ] })
+      ] })
+    }
+  );
+}, to = A(st), ct = ({ budget: t, onClick: o }) => {
+  const {
+    amount: s,
+    budgetColors: { background: i, description: a },
+    category_guid: n,
+    description: r,
+    percentage: c,
+    subBudgets: b,
+    transaction_total: h
+  } = t;
+  return /* @__PURE__ */ e(W, { children: /* @__PURE__ */ l(H, { onClick: () => o?.(t), children: [
+    /* @__PURE__ */ e(J, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(_e, { color: i, percent: c, size: 40, children: /* @__PURE__ */ e(F, { categoryGuid: n, variant: "basic" }) }) }),
+    /* @__PURE__ */ e(
+      X,
+      {
+        primary: /* @__PURE__ */ l(m, { component: "span", direction: "row", justifyContent: "space-between", children: [
+          /* @__PURE__ */ e(u, { bold: !0, variant: "Body", children: t.category.name }),
+          /* @__PURE__ */ e(u, { fontWeight: 400, variant: "Body", children: `
+                  ${B(h, "0,0")} / 
+                  ${B(s, "0,0")}
+                ` })
+        ] }),
+        secondary: /* @__PURE__ */ l(m, { component: "span", direction: "row", justifyContent: "space-between", children: [
+          /* @__PURE__ */ e(u, { variant: "XSmall", children: `${b.length} Sub-budgets` }),
+          /* @__PURE__ */ e(u, { bold: c > 100, color: a, variant: "XSmall", children: r })
+        ] })
+      }
+    )
+  ] }) });
+}, lt = A(() => {
+  const { onEvent: t } = Y(), { budgets: o } = T(), { detailedBudgets: s, setSelectedBudget: i } = I(), a = (n) => {
+    i(n), t(M.BUDGETS_CLICK_BUDGET_CATEGORY, {
+      budget_category: n.category.name,
+      click_type: "list"
+    });
+  };
+  return /* @__PURE__ */ l(ae, { elevation: 2, sx: { borderRadius: 2 }, children: [
+    /* @__PURE__ */ e(fe, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(pe, { children: o.budget_categories_title }) }),
+    /* @__PURE__ */ e(ie, { sx: { p: 0, ":last-child": { p: 0 } }, children: /* @__PURE__ */ e(K, { children: s.map((n) => /* @__PURE__ */ l(d.Fragment, { children: [
+      /* @__PURE__ */ e(ct, { budget: n, onClick: a }),
+      /* @__PURE__ */ e(ee, {})
+    ] }, n.guid)) }) })
+  ] });
+}), dt = A(() => {
+  const t = V(), { onEvent: o } = Y(), { accounts: s } = he(), { budgets: i, common: a, recurring: n } = T(), { incomeCategories: r, spendCategories: c } = Z(), { detailedBudgets: b, totalBudgeted: h } = I(), { projectedIncome: g } = q(), { setFilter: p } = Q(), [y, x] = d.useState(!1), [C, v] = d.useMemo(() => {
+    const S = c.reduce((N, j) => N + j.totalAmount, 0);
+    let f = S / h;
+    f > 1 && (f = 1);
+    let E = t.palette.success.main;
+    f > 0.8 && f < 1 ? E = t.palette.warning.main : f >= 1 && (E = t.palette.error.main);
+    const L = [
+      {
+        color: E,
+        percentage: `${f}`
+      }
+    ];
+    return [S, L];
+  }, [b, c]), [D, w] = d.useMemo(() => {
+    const S = Math.abs(
+      r.reduce((L, N) => L + N.totalAmount, 0)
+    );
+    let f = S / g;
+    f > 1 && (f = 1);
+    const E = [
+      {
+        color: t.palette.secondary.main,
+        percentage: `${f}`
+      }
+    ];
+    return [S, E];
+  }, [r, g]), _ = () => {
+    p({
+      accounts: s.map((S) => S.guid),
+      dateRange: {
+        start: je(/* @__PURE__ */ new Date(), 90),
+        end: /* @__PURE__ */ new Date()
+      }
+    }), x(!0), o(M.BUDGETS_CLICK_EDIT_INCOME);
+  };
+  return /* @__PURE__ */ l(ae, { elevation: 2, sx: { overflow: "visible", borderRadius: 2 }, children: [
+    /* @__PURE__ */ e(fe, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(pe, { children: i.overview_title }) }),
+    /* @__PURE__ */ e(ie, { sx: { pt: 12, px: 24 }, children: /* @__PURE__ */ l(m, { gap: 24, children: [
+      /* @__PURE__ */ l(m, { gap: 8, children: [
+        /* @__PURE__ */ e(u, { bold: !0, sx: { mb: 8 }, variant: "Body", children: i.spending_title }),
+        /* @__PURE__ */ e(oe, { data: v, height: 16 }),
+        /* @__PURE__ */ e(u, { variant: "Small", children: R(
+          i.spending_description,
+          B(C, "0,0"),
+          B(h, "0,0")
+        ) })
+      ] }),
+      /* @__PURE__ */ l(m, { gap: 8, children: [
+        /* @__PURE__ */ l(m, { alignItems: "center", direction: "row", gap: 4, mb: -4, children: [
+          /* @__PURE__ */ e(u, { bold: !0, variant: "Body", children: i.income_title }),
+          /* @__PURE__ */ e(
+            Ge,
+            {
+              "aria-label": n.manage_income,
+              onClick: _,
+              sx: { p: 0 },
+              children: /* @__PURE__ */ e($, { name: "edit" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(oe, { data: w, height: 16 }),
+        /* @__PURE__ */ e(u, { variant: "Small", children: R(
+          i.income_description,
+          B(D, "0,0"),
+          B(g, "0,0")
+        ) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ e(
+      k,
+      {
+        ariaLabelClose: a.close_aria,
+        isOpen: y,
+        onClose: () => x(!1),
+        title: n.manage_income,
+        children: /* @__PURE__ */ l(m, { gap: 4, children: [
+          /* @__PURE__ */ e(u, { bold: !0, sx: { mt: 12, mx: 24 }, variant: "Small", children: i.income_title }),
+          /* @__PURE__ */ e(Oe, {})
+        ] })
+      }
+    )
+  ] });
+}), ut = A(() => {
+  const { budgets: t } = T(), { totalBudgeted: o } = I(), { projectedIncome: s } = q(), i = s - o;
+  return /* @__PURE__ */ l(m, { direction: "row", justifyContent: "center", my: 16, spacing: 20, children: [
+    /* @__PURE__ */ l(m, { alignItems: "center", children: [
+      /* @__PURE__ */ e(u, { bold: !0, variant: "Body", children: B(s, "0,0") }),
+      /* @__PURE__ */ e(u, { color: "secondary", variant: "Small", children: t.projected_income })
+    ] }),
+    /* @__PURE__ */ e(u, { bold: !0, justifyContent: "center", variant: "Body", children: "-" }),
+    /* @__PURE__ */ l(m, { alignItems: "center", children: [
+      /* @__PURE__ */ e(u, { bold: !0, variant: "Body", children: B(o, "0,0") }),
+      /* @__PURE__ */ e(u, { color: "secondary", variant: "Small", children: t.budgeted })
+    ] }),
+    /* @__PURE__ */ e(u, { bold: !0, justifyContent: "center", variant: "Body", children: "=" }),
+    /* @__PURE__ */ l(m, { alignItems: "center", children: [
+      /* @__PURE__ */ e(u, { bold: !0, variant: "Body", children: B(i, "0,0") }),
+      /* @__PURE__ */ e(u, { color: "secondary", variant: "Small", children: t.remaining })
+    ] })
+  ] });
+}), mt = A(
+  ({ category: t }) => {
+    const { budgets: o } = T(), { budgets: s } = I(), i = d.useMemo(() => {
+      const a = s.find((c) => c.category_guid === t.guid), n = B(t.totalAverageAmount, "0,0"), r = a ? R(o.recalculate_previous_budget, B(a.amount, "0,0")) : o.recalculate_new_budget;
+      return `${n} - ${r}`;
+    }, [o, s]);
+    return /* @__PURE__ */ l(d.Fragment, { children: [
+      /* @__PURE__ */ e(W, { children: /* @__PURE__ */ l(H, { children: [
+        /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e(F, { categoryGuid: t.guid, variant: "filled" }) }),
+        /* @__PURE__ */ e(X, { primary: t.name, secondary: i })
+      ] }) }),
+      /* @__PURE__ */ e(ee, {})
+    ] }, t.guid);
+  }
+), pt = ({ onRecalculateBudgets: t }) => {
+  const { budgets: o, common: s } = T(), { spendCategories: i } = Z(), { recalculateBudgets: a, setAlert: n } = I(), [r, c] = d.useState(!1), b = i.filter((g) => g.totalAverageAmount > 0), h = async () => {
+    await a(b), c(!1), n(o.alert_recalculated_budgets), t?.();
+  };
+  return /* @__PURE__ */ l(d.Fragment, { children: [
+    /* @__PURE__ */ e(ye, { onClick: () => c(!0), sx: { mt: 24, mx: 24 }, variant: "text", children: o.recalculate_button }),
+    /* @__PURE__ */ e(u, { sx: { mx: 24, my: 16, textAlign: "center", whiteSpace: "wrap" }, variant: "Paragraph", children: o.recalculate_help }),
+    /* @__PURE__ */ e(
+      k,
+      {
+        ariaLabelClose: s.close_aria,
+        isOpen: r,
+        onClose: () => c(!1),
+        onPrimaryAction: h,
+        title: o.recalculate_title,
+        children: /* @__PURE__ */ l(m, { children: [
+          /* @__PURE__ */ l(m, { mx: 24, my: 16, children: [
+            /* @__PURE__ */ e(u, { bold: !0, variant: "Body", children: o.recalculate_description_top }),
+            /* @__PURE__ */ e(u, { variant: "ParagraphSmall", children: o.recalculate_description_bottom })
+          ] }),
+          /* @__PURE__ */ e(U, { bgcolor: "background.paper", children: /* @__PURE__ */ e(K, { children: b.map((g) => /* @__PURE__ */ e(mt, { category: g }, g.guid)) }) })
+        ] })
+      }
+    )
+  ] });
+}, te = ({
+  amount: t,
+  categoryName: o,
+  onAmountChanged: s
+}) => {
+  const { budgets: i } = T(), { totalBudgeted: a } = I(), { projectedIncome: n } = q(), r = n - a;
+  return /* @__PURE__ */ l(m, { gap: 16, children: [
+    /* @__PURE__ */ l(m, { children: [
+      /* @__PURE__ */ e(u, { children: R(
+        i.add_description_top,
+        B(r, "0,0")
+      ) }),
+      /* @__PURE__ */ e(u, { children: R(i.add_description_bottom, o) })
+    ] }),
+    /* @__PURE__ */ e(
+      Ee,
+      {
+        amount: t,
+        autoFocus: !0,
+        label: i.add_label,
+        minAmount: 0,
+        setAmount: s,
+        sx: { ".MuiTypography-Body": { p: 0 } }
+      }
+    )
+  ] });
+}, gt = A(({ category: t, onAddBudget: o }) => {
+  const { budgets: s, common: i } = T(), [a, n] = d.useState(!1), [r, c] = d.useState(
+    `${t.totalAmount === 0 ? "" : t.totalAmount}`
+  );
+  return /* @__PURE__ */ l(d.Fragment, { children: [
+    /* @__PURE__ */ e(W, { children: /* @__PURE__ */ l(H, { onClick: () => n(!0), children: [
+      /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e(F, { categoryGuid: t.guid }) }),
+      /* @__PURE__ */ e(
+        X,
+        {
+          primary: t.name,
+          secondary: B(t.totalAmount, "0,0")
+        }
+      ),
+      /* @__PURE__ */ e(Xe, { children: /* @__PURE__ */ e($, { name: "add", size: 20 }) })
+    ] }) }, t.guid),
+    /* @__PURE__ */ e(
+      G,
+      {
+        copy: { close_aria: i.close_aria, title: s.add_title },
+        disablePrimaryButton: Number(r) <= 0,
+        isOpen: a,
+        onClose: () => n(!1),
+        onPrimaryAction: () => o(t, Number(r)),
+        primaryText: s.add_save_button,
+        children: /* @__PURE__ */ e(te, { amount: r, categoryName: t.name, onAmountChanged: c })
+      }
+    )
+  ] });
+}), ht = A(({ onRecalculateBudgets: t }) => {
+  const { budgets: o } = T(), { addBudget: s, setAlert: i, unbudgetedCategories: a } = I(), n = async (r, c) => {
+    await s(r, c), i(R(o.alert_budget_created, r.name));
+  };
+  return /* @__PURE__ */ l(m, { children: [
+    /* @__PURE__ */ e(ut, {}),
+    /* @__PURE__ */ e(U, { bgcolor: "background.paper", children: /* @__PURE__ */ e(K, { children: a.map((r) => /* @__PURE__ */ e(
+      gt,
+      {
+        category: r,
+        onAddBudget: n
+      },
+      r.guid
+    )) }) }),
+    /* @__PURE__ */ e(pt, { onRecalculateBudgets: t })
+  ] });
+}), Se = ({ budget: t }) => {
+  const {
+    amount: o,
+    budgetColors: { background: s },
+    category: { name: i },
+    category_guid: a,
+    percentage: n,
+    transaction_total: r
+  } = t, c = [
+    {
+      color: s,
+      percentage: `${n}%`
+    }
+  ];
+  return /* @__PURE__ */ e(ae, { sx: { mt: 24, mx: 24 }, children: /* @__PURE__ */ e(ie, { children: /* @__PURE__ */ l(m, { alignItems: "center", gap: 16, children: [
+    /* @__PURE__ */ e(F, { categoryGuid: a, size: 56 }),
+    /* @__PURE__ */ e(Te, { children: `${B(r, "0,0")} / ${B(o, "0,0")}` }),
+    /* @__PURE__ */ e(u, { bold: !0, variant: "XSmall", children: i }),
+    /* @__PURE__ */ e(oe, { data: c, height: 10 })
+  ] }) }) });
+}, bt = A(() => {
+  const { budgets: t } = T();
+  return /* @__PURE__ */ l(m, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
+    /* @__PURE__ */ e($, { color: "secondary", name: "bubble_chart", sx: { fontSize: 32 } }),
+    /* @__PURE__ */ e(u, { bold: !0, color: "secondary", variant: "Small", children: t.zero_state_no_sub_budgets }),
+    /* @__PURE__ */ e(u, { color: "text.secondary", variant: "XSmall", children: t.zero_state_no_sub_budgets_description })
+  ] });
+}), yt = A(({ budget: t }) => {
+  const {
+    amount: o,
+    budgetColors: { background: s },
+    category: i,
+    percentage: a,
+    transaction_total: n
+  } = t, { setSelectedSubBudget: r } = I();
+  return /* @__PURE__ */ e(W, { children: /* @__PURE__ */ l(H, { onClick: () => r(t), children: [
+    /* @__PURE__ */ e(J, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(_e, { color: s, percent: a, size: 40, children: /* @__PURE__ */ e(F, { categoryGuid: i.parent_guid, variant: "basic" }) }) }),
+    /* @__PURE__ */ e(
+      X,
+      {
+        primary: /* @__PURE__ */ e(m, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(u, { bold: !0, variant: "Body", children: t.category.name }) }),
+        secondary: /* @__PURE__ */ e(m, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(u, { fontWeight: 400, variant: "Body", children: `
+                  ${B(n, "0,0")} / 
+                  ${B(o, "0,0")}
+                ` }) })
+      }
+    )
+  ] }) });
+}), _t = A(({ category: t, parentBudget: o }) => {
+  const { budgets: s, common: i } = T(), { setExpandedGuid: a, setOnSelect: n } = Re(), { addBudget: r } = I(), [c, b] = d.useState(!1), [h, g] = d.useState(!1), [p, y] = d.useState(""), [x, C] = d.useState(void 0);
+  d.useEffect(() => {
+    n((w) => {
+      const _ = t.subCategories.find((S) => S.guid === w);
+      _ && (C(_), y(`${_.currentAmount === 0 ? "" : _.currentAmount}`), g(!0));
+    });
+  }, []);
+  const v = () => {
+    a(t.guid), b(!0);
+  }, D = async () => {
+    x && Number(p) > 0 && (await r(x, Number(p), o.guid), g(!1), b(!1), C(void 0));
+  };
+  return /* @__PURE__ */ l(U, { children: [
+    /* @__PURE__ */ e(W, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(H, { onClick: v, children: /* @__PURE__ */ e(X, { children: /* @__PURE__ */ l(m, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
+      /* @__PURE__ */ l(m, { alignItems: "center", direction: "row", gap: 8, children: [
+        /* @__PURE__ */ e($, { fill: !0, name: "add_box", size: 24, sx: { color: "action.active" } }),
+        /* @__PURE__ */ e(u, { bold: !0, sx: { color: "action.active" }, variant: "Body", children: s.add_sub_budget_button })
+      ] }),
+      /* @__PURE__ */ e($, { name: "chevron_right", size: 24, sx: { color: "primary.light" } })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(ee, {}),
+    /* @__PURE__ */ e(
+      k,
+      {
+        ariaLabelClose: i.close_aria,
+        isOpen: c,
+        onClose: () => b(!1),
+        title: s.add_sub_budget_title,
+        children: /* @__PURE__ */ e(K, { children: /* @__PURE__ */ e(Le, { category: t, subCategories: t.subCategories }) })
+      }
+    ),
+    /* @__PURE__ */ e(
+      G,
+      {
+        copy: { close_aria: i.close_aria, title: s.add_title },
+        disablePrimaryButton: Number(p) <= 0,
+        isOpen: h,
+        onClose: () => g(!1),
+        onPrimaryAction: D,
+        primaryText: s.add_save_button,
+        children: /* @__PURE__ */ e(
+          te,
+          {
+            amount: p,
+            categoryName: x?.name || "",
+            onAmountChanged: y
+          }
+        )
+      }
+    )
+  ] });
+}), ft = A(({ budget: t }) => {
+  const { category: o, subBudgets: s } = t, { budgets: i, common: a } = T(), { deleteBudget: n, selectedSubBudget: r, setSelectedSubBudget: c, updateBudget: b } = I(), { filter: h, setFilter: g } = Q(), [p, y] = d.useState(!1), [x, C] = d.useState(!1), [v, D] = d.useState("");
+  d.useEffect(() => {
+    r && (D(`${r.amount}`), g({
+      ...h,
+      custom: (f) => f.category_guid === r.category_guid
+    }));
+  }, [r]);
+  const w = async () => {
+    r && await b({
+      ...r,
+      amount: Number(v)
+    });
+  }, _ = async () => {
+    r && await n(r.guid), C(!1), S();
+  }, S = () => {
+    g({
+      ...h,
+      custom: (f) => f.category_guid === t.category_guid || f.top_level_category_guid === t.category_guid
+    }), c(void 0);
+  };
+  return /* @__PURE__ */ l(d.Fragment, { children: [
+    /* @__PURE__ */ l(K, { sx: { bgcolor: "background.paper" }, children: [
+      s.length === 0 ? /* @__PURE__ */ e(bt, {}) : s.map((f) => /* @__PURE__ */ l(d.Fragment, { children: [
+        /* @__PURE__ */ e(yt, { budget: f }),
+        /* @__PURE__ */ e(ee, {})
+      ] }, f.guid)),
+      /* @__PURE__ */ e(_t, { category: o, parentBudget: t })
+    ] }),
+    /* @__PURE__ */ e(
+      k,
+      {
+        ariaLabelClose: a.close_aria,
+        isOpen: !!r,
+        onClose: S,
+        onPrimaryAction: () => y(!0),
+        onSecondaryAction: () => C(!0),
+        primaryText: i.details_edit_button,
+        secondaryText: i.details_delete_button,
+        title: i.details_title,
+        children: r && /* @__PURE__ */ l(m, { gap: 24, children: [
+          /* @__PURE__ */ e(Se, { budget: r }),
+          /* @__PURE__ */ e(be, { height: "100%" })
+        ] })
+      }
+    ),
+    r && /* @__PURE__ */ l(d.Fragment, { children: [
+      /* @__PURE__ */ e(
+        G,
+        {
+          copy: { close_aria: a.close_aria, title: i.details_edit_title },
+          disablePrimaryButton: Number(v) <= 0,
+          isOpen: p,
+          onClose: () => y(!1),
+          onPrimaryAction: w,
+          primaryText: i.edit_save_button,
+          children: /* @__PURE__ */ e(
+            te,
+            {
+              amount: v,
+              categoryName: r.category.name,
+              onAmountChanged: D
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        G,
+        {
+          copy: { close_aria: a.close_aria, title: i.delete_title },
+          isOpen: x,
+          onClose: () => C(!1),
+          onPrimaryAction: _,
+          primaryColor: "error",
+          primaryText: "Delete",
+          secondaryColor: "secondary",
+          children: /* @__PURE__ */ e(u, { variant: "Paragraph", children: R(i.delete_description, r.category.name) })
+        }
+      )
+    ] })
+  ] });
+}), Ct = A(({ budget: t }) => {
+  const { budgets: o, common: s, transactions: i } = T(), { setAlert: a } = I(), { sortedTransactions: n, tags: r } = Q(), [c, b] = d.useState(0), [h, g] = d.useState(""), p = d.useMemo(
+    () => n.find((C) => C.guid === h),
+    [h]
+  ), y = (C, v) => {
+    b(v);
+  }, x = () => {
+    ke(n, r), a(o.alert_csv_downloaded);
+  };
+  return /* @__PURE__ */ l(m, { gap: 24, children: [
+    /* @__PURE__ */ e(Se, { budget: t }),
+    /* @__PURE__ */ l(m, { children: [
+      /* @__PURE__ */ l(
+        ze,
+        {
+          onChange: y,
+          sx: { width: "100%" },
+          value: c,
+          variant: "fullWidth",
+          children: [
+            /* @__PURE__ */ e(ce, { label: o.details_transactions_tab }),
+            /* @__PURE__ */ e(ce, { label: o.details_subbudgets_tab })
+          ]
+        }
+      ),
+      c === 0 && /* @__PURE__ */ l(m, { children: [
+        n.length > 0 && /* @__PURE__ */ e(m, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ e(
+          ye,
+          {
+            onClick: x,
+            startIcon: /* @__PURE__ */ e($, { name: "ios_share" }),
+            variant: "text",
+            children: i.export_csv_btn
+          }
+        ) }),
+        /* @__PURE__ */ e(be, { height: "100%", onClick: g })
+      ] }),
+      c === 1 && /* @__PURE__ */ e(ft, { budget: t }),
+      /* @__PURE__ */ e(
+        k,
+        {
+          ariaLabelClose: s.close_aria,
+          isOpen: !!p,
+          onClose: () => g(""),
+          title: o.details_transaction_drawer,
+          children: p && /* @__PURE__ */ e($e, { transaction: p })
+        }
+      )
+    ] })
+  ] });
+}), St = A(() => {
+  const { selectedAccountGuids: t } = re(), { budgets: o, common: s } = T(), {
+    dateRange: i,
+    deleteBudget: a,
+    selectedBudget: n,
+    selectedSubBudget: r,
+    setAlert: c,
+    setSelectedBudget: b,
+    updateBudget: h
+  } = I(), { setFilter: g } = Q(), [p, y] = d.useState(!1), [x, C] = d.useState(!1), [v, D] = d.useState(!1), [w, _] = d.useState("");
+  d.useEffect(() => {
+    n && !r && (_(`${n.amount}`), y(!0), g({
+      accounts: t,
+      dateRange: i,
+      custom: (L) => L.category_guid === n.category_guid || L.top_level_category_guid === n.category_guid
+    }));
+  }, [n]);
+  const S = async () => {
+    n && (await h({
+      ...n,
+      amount: Number(w),
+      percentage: n.category.totalAmount / Number(w) * 100
+    }), c(R(o.alert_budget_updated, n.category.name)));
+  }, f = async () => {
+    n && (await a(n.guid), c(R(o.alert_budget_deleted, n.category.name))), D(!1), E();
+  }, E = () => {
+    y(!1), setTimeout(() => {
+      b(void 0);
+    }, 250);
+  };
+  if (n)
+    return /* @__PURE__ */ l(d.Fragment, { children: [
+      /* @__PURE__ */ e(
+        k,
+        {
+          ariaLabelClose: s.close_aria,
+          isOpen: p,
+          onClose: E,
+          onPrimaryAction: () => C(!0),
+          onSecondaryAction: () => D(!0),
+          primaryText: o.details_edit_button,
+          secondaryColor: "error",
+          secondaryText: o.details_delete_button,
+          title: o.details_title,
+          children: /* @__PURE__ */ e(Ct, { budget: n })
+        }
+      ),
+      /* @__PURE__ */ e(
+        G,
+        {
+          copy: { close_aria: s.close_aria, title: o.details_edit_title },
+          disablePrimaryButton: Number(w) <= 0,
+          isOpen: x,
+          onClose: () => C(!1),
+          onPrimaryAction: S,
+          primaryText: o.edit_save_button,
+          children: /* @__PURE__ */ e(
+            te,
+            {
+              amount: w,
+              categoryName: n.category.name,
+              onAmountChanged: _
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        G,
+        {
+          copy: { close_aria: s.close_aria, title: o.delete_title },
+          isOpen: v,
+          onClose: () => D(!1),
+          onPrimaryAction: f,
+          primaryColor: "error",
+          primaryText: o.details_delete_button,
+          secondaryColor: "secondary",
+          children: /* @__PURE__ */ e(u, { variant: "Paragraph", children: R(o.delete_description, n.category.name) })
+        }
+      )
+    ] });
+}), me = 480, no = A(({ onBackClick: t, sx: o }) => {
+  const s = V(), { onEvent: i } = Y(), { accounts: a } = he(), { budgets: n, common: r } = T(), { isInitialized: c, selectedAccounts: b, setDisplayedDate: h, setSelectedAccounts: g } = re(), { alert: p, dateRange: y, loadBudgets: x, setDateRange: C, setAlert: v, setTheme: D } = I(), { loadCashflowSequences: w } = q(), { isDesktop: _, isTablet: S } = ge(), { reloadCategoryTotals: f } = Z(), [E, L] = d.useState(!1), [N, j] = d.useState(!1);
+  d.useEffect(() => {
+    D(s), g(a), h(y.start, y.end), i(M.BUDGETS_VIEW);
+  }, []), d.useEffect(() => {
+    c && (f(b, y.start, y.end).finally(), E || (w().finally(), x().finally(() => L(!0))));
+  }, [c, b, y]);
+  const Be = (se) => {
+    C({ start: se[0] || /* @__PURE__ */ new Date(), end: se[1] || /* @__PURE__ */ new Date() });
+  }, xe = () => {
+    i(M.BUDGETS_CLICK_FILTER);
+  }, ve = () => {
+    j(!0), i(M.BUDGETS_CLICK_ADD);
+  }, Ae = () => {
+    j(!1);
+  }, Ie = Fe(y.end, Ne(/* @__PURE__ */ new Date()));
+  return !c || !E ? /* @__PURE__ */ e(ne, {}) : /* @__PURE__ */ l(
+    Pe,
+    {
+      accountOptions: a,
+      actions: [
+        {
+          iconName: "add",
+          label: n.add_title,
+          onClick: ve
+        }
+      ],
+      calendarActions: { onRangeChanged: Be, shouldDisableNext: Ie },
+      onAccountsFilterClick: xe,
+      onBackClick: t,
+      sx: o,
+      title: n.budgets_title,
+      children: [
+        (!c || !E) && /* @__PURE__ */ e(ne, {}),
+        c && E && /* @__PURE__ */ l(m, { direction: _ || S ? "row" : "column", height: "100%", width: "100%", children: [
+          /* @__PURE__ */ e(m, { height: _ || S ? "calc(100dvh - 150px)" : 450, children: /* @__PURE__ */ e(
+            Ce,
+            {
+              height: _ || S ? 800 : 450,
+              isDraggable: !0,
+              shouldShowZeroState: !1,
+              unavailableWidth: _ || S ? me : 0
+            }
+          ) }),
+          /* @__PURE__ */ l(
+            m,
+            {
+              gap: 24,
+              height: "100%",
+              sx: { mr: 24 },
+              width: _ || S ? me : "100%",
+              children: [
+                /* @__PURE__ */ e(dt, {}),
+                /* @__PURE__ */ e(lt, {})
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(St, {}),
+        /* @__PURE__ */ e(
+          k,
+          {
+            ariaLabelClose: r.close_aria,
+            isOpen: N,
+            onClose: () => j(!1),
+            title: n.add_new_title,
+            children: /* @__PURE__ */ e(ht, { onRecalculateBudgets: Ae })
+          }
+        ),
+        /* @__PURE__ */ e(
+          He,
+          {
+            anchorOrigin: { vertical: "bottom", horizontal: "right" },
+            autoHideDuration: 3500,
+            onClose: () => v(""),
+            open: !!p,
+            children: /* @__PURE__ */ e(We, { onClose: () => v(""), severity: "success", variant: "filled", children: p })
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  to as BubbleBudgetsMiniWidget,
+  no as BubbleBudgetsWidget
+};
+//# sourceMappingURL=index.es16.js.map