@mx-cartographer/experiences 6.26.32 → 7.0.0-alpha.mega1

package/dist/debts/index.es.js

@@ -0,0 +1,1460 @@
+import { jsx as e, jsxs as s, Fragment as $ } from "react/jsx-runtime";
+import y from "react";
+import { observer as D } from "mobx-react-lite";
+import f from "@mui/material/Stack";
+import { useTheme as j, Card as pe, Stack as _, Box as O } from "@mui/material";
+import { Text as i, H3 as we, InstitutionLogo as Ce, Icon as ee } from "@mxenabled/mxui";
+import { intervalToDuration as De, formatDuration as Se } from "date-fns";
+import { D as L } from "../DebtsStore-S0l9kr0r.mjs";
+import { a as Sr } from "../DebtsStore-S0l9kr0r.mjs";
+import { f as B, a as ve } from "../NumberFormatting-CtWHhyBX.mjs";
+import { f as K, D as U } from "../Dialog-CWW597AF.mjs";
+import { G as Te, x as q, u as C, i as z, g as M, c as Z, a as Ae } from "../hooks-30y_BLwc.mjs";
+import { u as X } from "../useScreenSize-B6JyS_Lj.mjs";
+import { D as te } from "../Drawer-kEE73B87.mjs";
+import { b as T } from "../Localization-2MODESHW.mjs";
+import { A as Ee, u as Ie } from "../AccountDetailsHeader-W2U7ZVm_.mjs";
+import Be from "@mui/material/Card";
+import Me from "@mui/material/CardContent";
+import ke from "@mui/material/CardHeader";
+import { LineChart as Ne } from "@mui/x-charts";
+import { useTheme as Pe } from "@mui/material/styles";
+import { A as v, W as Re } from "../WidgetContainer-DWCusxYI.mjs";
+import ie from "@mui/material/Tab";
+import Le from "@mui/material/Tabs";
+import me from "@mui/material/List";
+import W from "@mui/material/Divider";
+import { M as $e, I as He, O as Fe } from "../OriginalBalanceAction-D39mx6uE.mjs";
+import Oe from "@mui/material/TextField";
+import { L as J } from "../ListItemAction-BabpYivr.mjs";
+import { C as re } from "../CurrencyInput-D74cemI2.mjs";
+import le from "@mui/material/Alert";
+import se from "@mui/material/AlertTitle";
+import he from "@mui/icons-material/CheckCircle";
+import We from "@mui/icons-material/Error";
+import ce from "@mui/material/Paper";
+import { T as de } from "../TabContentContainer-j01JYR_7.mjs";
+import { DataGridPro as Ge } from "@mui/x-data-grid-pro";
+import ue from "@mui/material/Box";
+import { H as G } from "../HeaderCell-DjuifqHJ.mjs";
+import { f as je } from "../ConnectDrawer-D9cR5phc.mjs";
+import be from "@mui/material/Button";
+import ze from "@mui/material/IconButton";
+import Xe from "@mui/material/ListItem";
+import Ve from "@mui/material/Popover";
+import { L as Ye } from "../Loader-Dp1P2gNw.mjs";
+const _e = (a, o) => {
+  const n = a.filter((t) => !t.is_paid_off && !t.is_impossible), r = a.filter((t) => t.is_paid_off || t.is_impossible);
+  switch (o) {
+    case L.HIGHEST_INTEREST:
+      n.sort((t, l) => (l.interest_rate ?? 0) - (t.interest_rate ?? 0));
+      break;
+    case L.LOWEST_BALANCE:
+      n.sort((t, l) => t.balance - l.balance);
+      break;
+    case L.HIGHEST_BALANCE:
+      n.sort((t, l) => l.balance - t.balance);
+      break;
+    default:
+      n.sort((t, l) => t.balance - l.balance);
+  }
+  a.splice(0, a.length, ...n, ...r);
+};
+function Ke(a, o, n = 0) {
+  const r = a.map((p) => ({ ...p })).filter(
+    (p) => p.interest_rate !== void 0 && p.monthly_payment !== void 0 && !p.is_paid_off
+  );
+  _e(r, o);
+  let t = 0, l = 0;
+  const d = /* @__PURE__ */ new Date(), m = /* @__PURE__ */ new Date();
+  for (; r.some((p) => p.balance >= 0.01 && !p.is_impossible); ) {
+    let p = !1;
+    for (const [g, x] of r.entries()) {
+      if (x.balance <= 0.01 || x.is_impossible) continue;
+      const k = (x.interest_rate ?? 0) / 100 / 12, S = x.balance * k;
+      let u = x.monthly_payment ?? 0;
+      g === 0 && n && (u += n), x.balance += S;
+      const A = Math.min(x.balance, u + l);
+      if (A <= S) {
+        x.is_impossible = !0;
+        continue;
+      }
+      x.balance -= A, x.balance = x.balance < 0.01 ? 0 : x.balance, t += S, x.balance <= 0 && (l += u), A > 0 && (p = !0);
+    }
+    p && m.setMonth(m.getMonth() + 1);
+  }
+  const c = r.some((p) => p.is_impossible && p.balance > 0), h = De({ start: d, end: m });
+  return {
+    payoffSavings: c ? "N/A" : B(t, "0,0.00"),
+    payoffDate: c ? "Never" : K(m, U.MONTH_YEAR),
+    payoffDuration: c ? "Stagnant" : Se(h, { format: ["years", "months"] }) || "0 months"
+  };
+}
+const R = () => {
+  if (!y.useContext(Te))
+    throw new Error("useCateUiStore() must be used within the GlobalDataContext");
+  return q().uiStore;
+}, Ue = ({ debts: a, onClickCta: o, sx: n }) => {
+  const r = j(), { isMobile: t } = X(), { debts: l } = C(), { selectedDebtPriority: d } = R(), { monthlyCashFlowProfile: m } = z(), { payoffDate: c, payoffSavings: h, payoffDuration: p } = y.useMemo(() => {
+    const g = m?.extra_payment ?? 0;
+    return Ke(a, d, g);
+  }, [a, d, m]);
+  return /* @__PURE__ */ e(
+    pe,
+    {
+      sx: {
+        boxShadow: r.shadows[2],
+        width: t ? "100%" : "186px",
+        minWidth: "186px",
+        ...n
+      },
+      children: /* @__PURE__ */ s(_, { sx: { gap: "12px", p: "16px" }, children: [
+        /* @__PURE__ */ s(
+          _,
+          {
+            gap: t ? "4px" : "0",
+            sx: {
+              borderBottom: "1px solid",
+              borderBottomColor: r.palette.grey[300],
+              pb: "8px"
+            },
+            children: [
+              /* @__PURE__ */ e(i, { variant: "XSmall", children: l.snowball_card_date_description }),
+              /* @__PURE__ */ e(i, { bold: !0, color: r.palette.primary.main, variant: "Small", children: c })
+            ]
+          }
+        ),
+        /* @__PURE__ */ s(_, { gap: t ? "4px" : "0", children: [
+          /* @__PURE__ */ e(i, { bold: !0, variant: "Small", children: h }),
+          /* @__PURE__ */ e(i, { sx: { whiteSpace: "normal" }, variant: "XSmall", children: l.snowball_card_amount_description })
+        ] }),
+        /* @__PURE__ */ s(_, { gap: t ? "4px" : "0", children: [
+          /* @__PURE__ */ e(i, { bold: !0, variant: "Small", children: p }),
+          /* @__PURE__ */ e(i, { variant: "XSmall", children: l.snowball_card_duration_description })
+        ] }),
+        /* @__PURE__ */ e(
+          i,
+          {
+            bold: !0,
+            color: r.palette.primary.main,
+            onClick: o,
+            sx: { cursor: "pointer" },
+            variant: "Small",
+            children: l.snowball_card_cta
+          }
+        )
+      ] })
+    }
+  );
+}, qe = D(Ue), Ze = ({ isOpen: a, onClose: o, sx: n }) => {
+  const r = j(), { debts: t } = C(), [l, d] = y.useState(!1);
+  return /* @__PURE__ */ e(
+    te,
+    {
+      ariaLabelClose: "",
+      isOpen: a,
+      onClose: o,
+      sx: { ...n },
+      title: t.snowball_drawer_title,
+      children: /* @__PURE__ */ s(_, { bgcolor: r.palette.background.default, height: "100%", children: [
+        /* @__PURE__ */ s(_, { alignItems: "center", px: 24, py: 24, children: [
+          /* @__PURE__ */ s(_, { alignItems: "center", pb: 24, children: [
+            /* @__PURE__ */ e(i, { mb: 12, variant: "H3", children: t.snowball_drawer_subtitle }),
+            /* @__PURE__ */ e(i, { color: r.palette.secondary.main, variant: "Small", children: t.snowball_drawer_amount_description }),
+            /* @__PURE__ */ e(i, { variant: "H1", children: t.snowball_drawer_savings }),
+            /* @__PURE__ */ e(i, { color: r.palette.secondary.main, variant: "Small", children: t.snowball_drawer_duration_description })
+          ] }),
+          /* @__PURE__ */ s(pe, { sx: { display: "grid", py: 16, px: 24 }, children: [
+            /* @__PURE__ */ e(i, { mb: 4, variant: "H3", children: t.snowball_drawer_question }),
+            /* @__PURE__ */ e(
+              i,
+              {
+                color: r.palette.secondary.main,
+                mb: 8,
+                sx: { whiteSpace: l ? "normal" : "nowrap" },
+                variant: "ParagraphSmall",
+                children: t.snowball_drawer_answer
+              }
+            ),
+            /* @__PURE__ */ e(
+              i,
+              {
+                bold: !0,
+                color: r.palette.primary.main,
+                onClick: () => d(!l),
+                sx: { cursor: "pointer" },
+                variant: "Small",
+                children: l ? t.snowball_drawer_less : t.snowball_drawer_more
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ s(_, { children: [
+          /* @__PURE__ */ e(
+            i,
+            {
+              color: r.palette.secondary.main,
+              px: 24,
+              sx: { textAlign: "center", whiteSpace: "normal" },
+              variant: "Small",
+              children: t.snowball_drawer_disclaimer
+            }
+          ),
+          /* @__PURE__ */ s(_, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
+            /* @__PURE__ */ e(i, { bold: !0, variant: "XSmall", children: T(t.snowball_drawer_month_header, 1) }),
+            /* @__PURE__ */ e(i, { bold: !0, variant: "XSmall", children: t.snowball_drawer_payment_header })
+          ] }),
+          /* @__PURE__ */ s(_, { bgcolor: r.palette.background.paper, mb: 24, children: [
+            /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, children: [
+              /* @__PURE__ */ e(
+                O,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 20,
+                    height: 20,
+                    borderRadius: "50%",
+                    backgroundColor: r.palette.success.main,
+                    marginRight: 12
+                  },
+                  children: /* @__PURE__ */ e(i, { color: "white", fontWeight: 700, variant: "Small", children: "✓" })
+                }
+              ),
+              /* @__PURE__ */ s(
+                _,
+                {
+                  sx: {
+                    borderBottom: `1px solid ${r.palette.border.light}`,
+                    flexDirection: "row",
+                    flexGrow: 1,
+                    py: 14,
+                    pr: 24
+                  },
+                  children: [
+                    /* @__PURE__ */ s(_, { flexGrow: 1, children: [
+                      /* @__PURE__ */ e(i, { variant: "Body", children: T(t.snowball_drawer_debt_label, "A") }),
+                      /* @__PURE__ */ s(i, { color: r.palette.secondary.main, variant: "XSmall", children: [
+                        T(
+                          t.snowball_drawer_rollover_explainer_pt1,
+                          "$100"
+                        ),
+                        /* @__PURE__ */ e("strong", { children: T(t.snowball_drawer_debt_label, "B") }),
+                        t.snowball_drawer_rollover_explainer_pt2
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ s(_, { children: [
+                      /* @__PURE__ */ e(i, { variant: "Body", children: "$100.00" }),
+                      /* @__PURE__ */ e(
+                        i,
+                        {
+                          bold: !0,
+                          color: r.palette.success.main,
+                          textAlign: "end",
+                          variant: "Tiny",
+                          children: t.snowball_drawer_paid_label
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, children: [
+              /* @__PURE__ */ e(
+                O,
+                {
+                  sx: {
+                    width: 20,
+                    height: 20,
+                    marginRight: 12,
+                    borderRadius: "50%",
+                    border: `3px solid ${r.palette.border.darker}`
+                  }
+                }
+              ),
+              /* @__PURE__ */ s(
+                _,
+                {
+                  sx: {
+                    borderBottom: `1px solid ${r.palette.border.light}`,
+                    flexDirection: "row",
+                    flexGrow: 1,
+                    py: 14,
+                    pr: 24
+                  },
+                  children: [
+                    /* @__PURE__ */ e(i, { flexGrow: 1, variant: "Body", children: T(t.snowball_drawer_debt_label, "B") }),
+                    /* @__PURE__ */ e(i, { variant: "Body", children: "$400.00" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, py: 14, children: [
+              /* @__PURE__ */ e(
+                O,
+                {
+                  sx: {
+                    width: 20,
+                    height: 20,
+                    marginRight: 12,
+                    borderRadius: "50%",
+                    border: `3px solid ${r.palette.border.darker}`
+                  }
+                }
+              ),
+              /* @__PURE__ */ s(_, { flexDirection: "row", flexGrow: 1, pr: 24, children: [
+                /* @__PURE__ */ e(i, { flexGrow: 1, variant: "Body", children: T(t.snowball_drawer_debt_label, "C") }),
+                /* @__PURE__ */ e(i, { variant: "Body", children: "$1,000.00" })
+              ] })
+            ] }),
+            /* @__PURE__ */ s(
+              _,
+              {
+                sx: {
+                  py: 8,
+                  px: 24,
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  borderTop: `1px solid ${r.palette.border.light}`,
+                  borderBottom: `1px solid ${r.palette.border.light}`
+                },
+                children: [
+                  /* @__PURE__ */ e(i, { bold: !0, variant: "Body", children: t.snowball_drawer_total_label }),
+                  /* @__PURE__ */ e(i, { bold: !0, variant: "Body", children: "$1,500.00" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ s(_, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
+            /* @__PURE__ */ e(i, { bold: !0, variant: "XSmall", children: T(t.snowball_drawer_month_header, 2) }),
+            /* @__PURE__ */ e(i, { bold: !0, variant: "XSmall", children: t.snowball_drawer_payment_header })
+          ] }),
+          /* @__PURE__ */ s(_, { bgcolor: r.palette.background.paper, mb: 24, children: [
+            /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, children: [
+              /* @__PURE__ */ e(
+                O,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 20,
+                    height: 20,
+                    borderRadius: "50%",
+                    backgroundColor: r.palette.success.main,
+                    marginRight: 12
+                  },
+                  children: /* @__PURE__ */ e(i, { color: "white", fontWeight: 700, variant: "Small", children: "✓" })
+                }
+              ),
+              /* @__PURE__ */ s(
+                _,
+                {
+                  sx: {
+                    borderBottom: `1px solid ${r.palette.border.light}`,
+                    flexDirection: "row",
+                    flexGrow: 1,
+                    py: 14,
+                    pr: 24
+                  },
+                  children: [
+                    /* @__PURE__ */ s(_, { flexGrow: 1, children: [
+                      /* @__PURE__ */ e(i, { variant: "Body", children: T(t.snowball_drawer_debt_label, "B") }),
+                      /* @__PURE__ */ s(i, { color: r.palette.secondary.main, variant: "XSmall", children: [
+                        T(
+                          t.snowball_drawer_rollover_explainer_pt1,
+                          "$500"
+                        ),
+                        /* @__PURE__ */ e("strong", { children: T(t.snowball_drawer_debt_label, "C") }),
+                        t.snowball_drawer_rollover_explainer_pt2
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ s(_, { children: [
+                      /* @__PURE__ */ e(i, { variant: "Body", children: "$500.00" }),
+                      /* @__PURE__ */ e(
+                        i,
+                        {
+                          bold: !0,
+                          color: r.palette.success.main,
+                          textAlign: "end",
+                          variant: "Tiny",
+                          children: t.snowball_drawer_paid_label
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, children: [
+              /* @__PURE__ */ e(
+                O,
+                {
+                  sx: {
+                    width: 20,
+                    height: 20,
+                    marginRight: 12,
+                    borderRadius: "50%",
+                    border: `3px solid ${r.palette.border.darker}`
+                  }
+                }
+              ),
+              /* @__PURE__ */ s(
+                _,
+                {
+                  sx: {
+                    flexDirection: "row",
+                    flexGrow: 1,
+                    py: 14,
+                    pr: 24
+                  },
+                  children: [
+                    /* @__PURE__ */ e(i, { flexGrow: 1, variant: "Body", children: T(t.snowball_drawer_debt_label, "C") }),
+                    /* @__PURE__ */ e(i, { variant: "Body", children: "$1,000.00" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ s(
+              _,
+              {
+                sx: {
+                  py: 8,
+                  px: 24,
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  borderTop: `1px solid ${r.palette.border.light}`,
+                  borderBottom: `1px solid ${r.palette.border.light}`
+                },
+                children: [
+                  /* @__PURE__ */ e(i, { bold: !0, variant: "Body", children: t.snowball_drawer_total_label }),
+                  /* @__PURE__ */ e(i, { bold: !0, variant: "Body", children: "$1,500.00" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ s(_, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
+            /* @__PURE__ */ e(i, { bold: !0, variant: "XSmall", children: T(t.snowball_drawer_month_header, 3) }),
+            /* @__PURE__ */ e(i, { bold: !0, variant: "XSmall", children: t.snowball_drawer_payment_header })
+          ] }),
+          /* @__PURE__ */ s(_, { bgcolor: r.palette.background.paper, mb: 24, children: [
+            /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, children: [
+              /* @__PURE__ */ e(
+                O,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 20,
+                    height: 20,
+                    borderRadius: "50%",
+                    backgroundColor: r.palette.success.main,
+                    marginRight: 12
+                  },
+                  children: /* @__PURE__ */ e(i, { color: "white", fontWeight: 700, variant: "Small", children: "✓" })
+                }
+              ),
+              /* @__PURE__ */ s(
+                _,
+                {
+                  sx: {
+                    alignItems: "center",
+                    flexDirection: "row",
+                    flexGrow: 1,
+                    py: 14,
+                    pr: 24
+                  },
+                  children: [
+                    /* @__PURE__ */ e(_, { flexGrow: 1, children: /* @__PURE__ */ e(i, { variant: "Body", children: T(t.snowball_drawer_debt_label, "C") }) }),
+                    /* @__PURE__ */ s(_, { children: [
+                      /* @__PURE__ */ e(i, { variant: "Body", children: "$1,500.00" }),
+                      /* @__PURE__ */ e(
+                        i,
+                        {
+                          bold: !0,
+                          color: r.palette.success.main,
+                          textAlign: "end",
+                          variant: "Tiny",
+                          children: t.snowball_drawer_paid_label
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ s(
+              _,
+              {
+                sx: {
+                  py: 8,
+                  px: 24,
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  borderTop: `1px solid ${r.palette.border.light}`,
+                  borderBottom: `1px solid ${r.palette.border.light}`
+                },
+                children: [
+                  /* @__PURE__ */ e(i, { bold: !0, variant: "Body", children: t.snowball_drawer_total_label }),
+                  /* @__PURE__ */ e(i, { bold: !0, variant: "Body", children: "$1,500.00" })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
+}, Je = D(Ze), Qe = "#FF7B08";
+function et(a, o) {
+  const [n, r, t] = a.replace(/^#/, "").match(/.{1,2}/g).map((d) => parseInt(d, 16)), l = [
+    Math.max(0, Math.min(255, Math.round(n * o))),
+    Math.max(0, Math.min(255, Math.round(r * o))),
+    Math.max(0, Math.min(255, Math.round(t * o)))
+  ];
+  return `rgb(${l[0]}, ${l[1]}, ${l[2]})`;
+}
+const ye = ({
+  sx: a,
+  height: o = 500,
+  width: n,
+  debts: r,
+  hoveredDebtGuid: t,
+  onClickArea: l,
+  onHoverArea: d
+}) => {
+  const m = Pe(), { onEvent: c } = M(), h = r.filter((b) => !b.is_impossible), p = [
+    ...new Set(
+      h.flatMap((b) => b.dataset.map((w) => new Date(w.x).getTime()))
+    )
+  ].sort((b, w) => b - w).map((b) => new Date(b)), g = h.map((b) => {
+    const w = new Map(b.dataset.map((P) => [new Date(P.x).getTime(), P.y]));
+    let I = w.get(p[0].getTime()) ?? 0;
+    const N = p.map((P) => {
+      const H = w.get(P.getTime()) ?? I;
+      return I = H, { x: P, y: H };
+    });
+    return { ...b, dataset: N };
+  }), x = g.reduce(
+    (b, w) => b + (w.dataset[0]?.y ?? 0),
+    0
+  ), E = p.map((b, w) => {
+    const I = w / (p.length - 1), N = x * (1 - I);
+    return { x: b, y: N };
+  }), k = Math.ceil(x / 100) * 100, S = p, u = g.map((b, w) => {
+    const I = 1 - w / g.length * 0.5, N = et(Qe, I);
+    return {
+      id: `debt-${w}`,
+      guid: b.guid,
+      label: b.name,
+      data: b.dataset.map((P) => P.y),
+      color: N,
+      curve: "linear",
+      type: "line",
+      area: !0,
+      stack: "total",
+      showMark: !1
+    };
+  });
+  u.push({
+    id: "payoff-line",
+    label: "Payoff Line",
+    data: E.map((b) => b.y),
+    color: m.palette.grey[700],
+    curve: "linear",
+    type: "line",
+    stack: void 0,
+    showMark: !1,
+    disableHighlight: !0
+  });
+  const A = (b) => u.findIndex((w) => w?.guid === b);
+  return /* @__PURE__ */ e(
+    Ne,
+    {
+      axisHighlight: { x: "none" },
+      disableLineItemHighlight: !0,
+      height: o,
+      onAreaClick: (b, w) => {
+        l?.();
+        const I = u.find((N) => N.id === w.seriesId);
+        c(v.DEBTS_CLICK_CHART_AREA, { account_guid: I?.guid });
+      },
+      onHighlightChange: (b) => {
+        const w = u.find((I) => I.id === b?.seriesId)?.guid;
+        d?.(w ?? "");
+      },
+      series: u,
+      skipAnimation: !0,
+      slotProps: {
+        legend: {
+          hidden: !0
+        }
+      },
+      sx: {
+        p: 4,
+        "& .MuiBarLabel-root": {
+          fontSize: 10,
+          fontWeight: 600
+        },
+        "& .MuiAreaElement-root": {
+          opacity: 0.4,
+          transition: "opacity 0.3s ease"
+        },
+        "& .MuiAreaElement-root:hover": {
+          opacity: 1
+        },
+        "& .MuiLineElement-series-payoff-line": {
+          strokeDasharray: "10 5",
+          strokeWidth: 1
+        },
+        [`& .MuiLineElement-series-debt-${A(t ?? "0")}`]: {
+          opacity: 1
+        },
+        [`& .MuiAreaElement-series-debt-${A(t ?? "0")}`]: {
+          opacity: 1
+        },
+        ...a
+      },
+      tooltip: { trigger: "none" },
+      width: n,
+      xAxis: [
+        {
+          data: S,
+          scaleType: "time",
+          min: p[0],
+          disableTicks: !0,
+          valueFormatter: (b) => K(b, U.MONTH_SHORT_YEAR)
+        }
+      ],
+      yAxis: [
+        {
+          min: 0,
+          max: k,
+          disableTicks: !0,
+          valueFormatter: (b) => B(b, "0a")
+        }
+      ]
+    }
+  );
+}, tt = () => {
+  const a = j(), { debts: o } = C(), { selectedDebtChartData: n } = R();
+  return /* @__PURE__ */ s($, { children: [
+    /* @__PURE__ */ s(
+      Be,
+      {
+        sx: {
+          "& .MuiCardContent-root:last-child": {
+            pb: 0
+          }
+        },
+        children: [
+          /* @__PURE__ */ e(ke, { sx: { pb: 0 }, title: /* @__PURE__ */ e(we, { sx: { pb: 4 }, children: o.details_chart_title }) }),
+          /* @__PURE__ */ e(Me, { sx: { p: 0 }, children: /* @__PURE__ */ e(ye, { debts: [n], height: 250 }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      i,
+      {
+        color: a.palette.text.secondary,
+        sx: { whiteSpace: "normal", textAlign: "center", px: 8, py: 12 },
+        variant: "Small",
+        children: o.details_chart_description
+      }
+    )
+  ] });
+}, rt = D(tt), at = () => {
+  const a = j(), { onEvent: o } = M(), { debts: n } = C(), { selectedDebtChartData: r, showCompleted: t, showError: l } = R();
+  return y.useEffect(() => o(v.DEBT_SCHEDULE_VIEW), []), /* @__PURE__ */ e(me, { children: l || t ? /* @__PURE__ */ e(
+    i,
+    {
+      color: a.palette.secondary.main,
+      component: "div",
+      sx: { p: 32, textAlign: "center", whiteSpace: "normal" },
+      variant: "Small",
+      children: l ? n.schedule_error_message : n.schedule_complete_message
+    }
+  ) : /* @__PURE__ */ s($, { children: [
+    /* @__PURE__ */ s(f, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
+      /* @__PURE__ */ e(i, { bold: !0, variant: "XSmall", children: n.schedule_month_heading }),
+      /* @__PURE__ */ e(i, { bold: !0, variant: "XSmall", children: n.schedule_amount_heading })
+    ] }),
+    r.dataset.slice(1).map(({ x: d, y: m, payment: c }) => /* @__PURE__ */ e(f, { bgcolor: a.palette.background.paper, children: /* @__PURE__ */ e(f, { alignItems: "center", flexDirection: "row", pl: 24, children: /* @__PURE__ */ s(
+      f,
+      {
+        sx: {
+          borderBottom: `1px solid ${a.palette.border.light}`,
+          flexDirection: "row",
+          flexGrow: 1,
+          py: 14,
+          pr: 24
+        },
+        children: [
+          /* @__PURE__ */ s(f, { flexGrow: 1, children: [
+            /* @__PURE__ */ e(i, { bold: !0, variant: "Body", children: K(d, U.MONTH_YEAR) }),
+            /* @__PURE__ */ e(i, { color: a.palette.secondary.main, variant: "XSmall", children: n.schedule_month_label })
+          ] }),
+          /* @__PURE__ */ s(f, { children: [
+            /* @__PURE__ */ e(i, { bold: !0, variant: "Body", children: B(m, "0,0.00") }),
+            /* @__PURE__ */ e(
+              i,
+              {
+                bold: !0,
+                color: a.palette.success.main,
+                textAlign: "end",
+                variant: "Tiny",
+                children: `+${B(c, "0,0")}`
+              }
+            )
+          ] })
+        ]
+      }
+    ) }) }, String(d))),
+    /* @__PURE__ */ e(f, { bgcolor: "background.paper", children: /* @__PURE__ */ s(
+      f,
+      {
+        sx: {
+          alignItems: "center",
+          flexDirection: "row",
+          flexGrow: 1,
+          py: 14,
+          px: 24
+        },
+        children: [
+          /* @__PURE__ */ e(i, { flexGrow: 1, variant: "Body", children: n.schedule_payoff_label }),
+          /* @__PURE__ */ e(i, { variant: "Body", children: "-" })
+        ]
+      }
+    ) })
+  ] }) });
+}, ot = D(at), nt = D(({ debt: a }) => {
+  const { debts: o } = C(), { updateAccount: n } = Z(), { onEvent: r } = M(), [t, l] = y.useState(a.interest_rate ?? 0), d = t < 0, m = async () => {
+    await n({ ...a.account, interest_rate: t }), a.interest_rate = t, r(v.DEBTS_SAVE_RATE_ACTION, { account_guid: a.guid });
+  }, c = () => {
+    setTimeout(() => {
+      l(a.interest_rate ?? 0);
+    }, 250);
+  };
+  return /* @__PURE__ */ e(
+    J,
+    {
+      isSaveDisabled: d,
+      label: `${o.details_interest_rate} (%)`,
+      onCancel: c,
+      onSave: m,
+      primaryText: o.details_interest_rate,
+      secondaryText: ve(Number(a.interest_rate) / 100),
+      zeroStateText: a.interest_rate ? void 0 : o.add_interest_rate,
+      children: /* @__PURE__ */ e(
+        Oe,
+        {
+          error: d,
+          fullWidth: !0,
+          onChange: (h) => l(isNaN(parseFloat(h.target.value)) ? 0 : parseFloat(h.target.value)),
+          type: "number",
+          value: t
+        }
+      )
+    }
+  );
+}), it = D(({ debt: a }) => {
+  const { debts: o } = C(), { updateAccount: n } = Z(), { onEvent: r } = M(), [t, l] = y.useState(a.monthly_payment ?? 0), d = t < 0 || t > 9999999999e-2, m = async () => {
+    await n({ ...a.account, minimum_payment: t }), a.monthly_payment = t, r(v.DEBTS_SAVE_PAYMENT_ACTION, { account_guid: a.guid });
+  }, c = () => {
+    setTimeout(() => {
+      l(a.monthly_payment ?? 0);
+    }, 250);
+  };
+  return /* @__PURE__ */ e(
+    J,
+    {
+      isSaveDisabled: d,
+      label: o.details_monthly_payment,
+      onCancel: c,
+      onSave: m,
+      primaryText: o.details_monthly_payment,
+      secondaryText: B(a.monthly_payment, "0,0"),
+      zeroStateText: a.monthly_payment ? void 0 : o.add_monthly_payment,
+      children: /* @__PURE__ */ e(
+        re,
+        {
+          amount: t,
+          autoFocus: !0,
+          error: d,
+          fullWidth: !0,
+          minAmount: 0,
+          setAmount: (h) => l(isNaN(Number(h)) ? t : Number(h)),
+          sx: { ".MuiTypography-Body": { p: 0 } }
+        }
+      )
+    }
+  );
+}), lt = D(({ debt: a }) => {
+  const { debts: o } = C(), { updateAccount: n } = Z(), { onEvent: r } = M(), [t, l] = y.useState(a.original_balance ?? 0), d = t < 0 || t > 9999999999e-2, m = async () => {
+    await n({ ...a.account, original_balance: t }), a.original_balance = t, r(v.DEBTS_SAVE_BALANCE_ACTION, { account_guid: a.guid });
+  }, c = () => {
+    setTimeout(() => {
+      l(a.original_balance ?? 0);
+    }, 250);
+  };
+  return /* @__PURE__ */ e(
+    J,
+    {
+      isSaveDisabled: d,
+      label: o.details_original_balance,
+      onCancel: c,
+      onSave: m,
+      primaryText: o.details_original_balance,
+      secondaryText: B(a.original_balance, "0,0"),
+      zeroStateText: a.original_balance ? void 0 : o.add_original_balance,
+      children: /* @__PURE__ */ e(
+        re,
+        {
+          amount: t,
+          autoFocus: !0,
+          error: d,
+          fullWidth: !0,
+          minAmount: 0,
+          setAmount: (h) => l(isNaN(Number(h)) ? t : Number(h)),
+          sx: { ".MuiTypography-Body": { p: 0 } }
+        }
+      )
+    }
+  );
+}), st = () => {
+  const { onEvent: a } = M(), { selectedDebtChartData: o } = R();
+  return y.useEffect(() => a(v.DEBT_DETAILS_VIEW), []), /* @__PURE__ */ s(f, { bgcolor: "background.paper", children: [
+    o?.goal && /* @__PURE__ */ s($, { children: [
+      /* @__PURE__ */ e($e, { goal: o.goal }),
+      /* @__PURE__ */ e(W, {}),
+      /* @__PURE__ */ e(He, { goal: o.goal }),
+      /* @__PURE__ */ e(W, {}),
+      /* @__PURE__ */ e(Fe, { goal: o.goal }),
+      /* @__PURE__ */ e(W, {})
+    ] }),
+    !o?.goal && o?.account && /* @__PURE__ */ s($, { children: [
+      /* @__PURE__ */ e(it, { debt: o }),
+      /* @__PURE__ */ e(W, {}),
+      /* @__PURE__ */ e(nt, { debt: o }),
+      /* @__PURE__ */ e(W, {}),
+      /* @__PURE__ */ e(lt, { debt: o }),
+      /* @__PURE__ */ e(W, {})
+    ] })
+  ] });
+}, ct = D(st), dt = ({ setTabValue: a, sx: o }) => {
+  const { debts: n } = C(), { showError: r, showCompleted: t } = R();
+  return y.useEffect(() => {
+    r && a(1);
+  }, [r]), !r && !t ? /* @__PURE__ */ e($, {}) : /* @__PURE__ */ s(_, { gap: 16, children: [
+    /* @__PURE__ */ e(ce, { sx: { my: 16, mx: 24, ...o }, children: /* @__PURE__ */ s(
+      le,
+      {
+        icon: r ? /* @__PURE__ */ e(We, {}) : /* @__PURE__ */ e(he, { color: "success" }),
+        severity: "error",
+        sx: {
+          alignItems: "start",
+          borderLeft: 5,
+          borderRadius: 1,
+          borderColor: r ? "error.main" : "success.main",
+          color: "text.primary",
+          "&.MuiPaper-root": {
+            backgroundColor: "background.paper"
+          }
+        },
+        children: [
+          /* @__PURE__ */ e(se, { sx: { fontWeight: 600, marginTop: 2 }, variant: "Body", children: r ? n.status_error_title : n.status_complete_title }),
+          /* @__PURE__ */ e(i, { component: "p", sx: { whiteSpace: "wrap" }, variant: "ParagraphSmall", children: r ? n.status_error_description : n.status_complete_description })
+        ]
+      }
+    ) }),
+    r && /* @__PURE__ */ e(ce, { sx: { mb: 16, mt: 100, mx: 24, ...o }, children: /* @__PURE__ */ s(
+      le,
+      {
+        icon: /* @__PURE__ */ e($, {}),
+        severity: "error",
+        sx: {
+          borderRadius: 2,
+          color: "text.primary",
+          "&.MuiPaper-root": {
+            backgroundColor: "background.paper"
+          }
+        },
+        children: [
+          /* @__PURE__ */ e(se, { sx: { fontWeight: 600, marginTop: 2 }, variant: "Body", children: n.status_info_title }),
+          /* @__PURE__ */ e(i, { component: "p", sx: { whiteSpace: "wrap" }, variant: "ParagraphSmall", children: n.status_info_description })
+        ]
+      }
+    ) })
+  ] });
+}, pt = D(dt), mt = () => {
+  const { debts: a } = C(), { showError: o, showCompleted: n } = R(), [r, t] = y.useState(0);
+  return /* @__PURE__ */ s($, { children: [
+    (o || n) && /* @__PURE__ */ e(pt, { setTabValue: t, sx: { mt: -24 } }),
+    /* @__PURE__ */ s(
+      Le,
+      {
+        "aria-label": a.details_tabs_aria_label,
+        centered: !0,
+        onChange: (l, d) => t(d),
+        textColor: "primary",
+        value: r,
+        variant: "fullWidth",
+        children: [
+          /* @__PURE__ */ e(
+            ie,
+            {
+              "aria-controls": "debt-schedule-tabpanel-0",
+              id: "debt-schedule-tab-0",
+              label: a.schedule_tab_label
+            }
+          ),
+          /* @__PURE__ */ e(
+            ie,
+            {
+              "aria-controls": "debt-details-tabpanel-1",
+              id: "debt-details-tab-1",
+              label: a.details_tab_label
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(de, { index: 0, name: "debt-schedule", value: r, children: /* @__PURE__ */ e(ot, {}) }),
+    /* @__PURE__ */ e(de, { index: 1, name: "debt-details", value: r, children: /* @__PURE__ */ e(ct, {}) })
+  ] });
+}, ht = D(mt), ut = ({ isOpen: a, onClose: o, sx: n }) => {
+  const { debts: r } = C(), { showError: t, showCompleted: l } = R(), d = t || l ? /* @__PURE__ */ e($, {}) : /* @__PURE__ */ e(rt, {});
+  return /* @__PURE__ */ e(
+    te,
+    {
+      ariaLabelClose: r.details_close_aria,
+      isOpen: a,
+      onClose: o,
+      sx: { ...n },
+      title: r.details_title,
+      children: /* @__PURE__ */ s(f, { bgcolor: "background.default", children: [
+        /* @__PURE__ */ e(Ee, { customDetailsChart: d }),
+        /* @__PURE__ */ e(ht, {})
+      ] })
+    }
+  );
+}, bt = D(() => {
+  const { debts: a } = C(), { monthlyCashFlowProfile: o, updateMonthlyCashFlowProfile: n } = z(), { onEvent: r } = M(), [t, l] = y.useState(o?.extra_payment ?? 0), d = t < 0 || t > 9999999999e-2, m = async () => {
+    o && (await n({ ...o, extra_payment: t }), o.extra_payment = t, r(v.DEBTS_SAVE_PAYDOWN_ACTION, {
+      user_guid: o?.user_guid
+    }));
+  }, c = () => {
+    setTimeout(() => {
+      l(o?.extra_payment ?? 0);
+    }, 250);
+  };
+  return /* @__PURE__ */ e(
+    J,
+    {
+      isSaveDisabled: d,
+      label: a.paydown_drawer_extra_payment,
+      onCancel: c,
+      onSave: m,
+      primaryText: a.paydown_drawer_extra_payment,
+      secondaryText: B(o?.extra_payment, "0,0"),
+      zeroStateText: o?.extra_payment ? void 0 : a.add_extra_payment,
+      children: /* @__PURE__ */ e(
+        re,
+        {
+          amount: t,
+          autoFocus: !0,
+          error: d,
+          fullWidth: !0,
+          minAmount: 0,
+          setAmount: (h) => l(isNaN(Number(h)) ? t : Number(h)),
+          sx: { ".MuiTypography-Body": { p: 0 } }
+        }
+      )
+    }
+  );
+}), _t = () => {
+  const { debts: a } = C(), { totalMonthlyPayments: o } = q(), { monthlyCashFlowProfile: n } = z(), r = o + Number(n?.extra_payment);
+  return /* @__PURE__ */ s(f, { sx: { backgroundColor: "background.default", height: "100%" }, children: [
+    /* @__PURE__ */ s(f, { p: 24, children: [
+      /* @__PURE__ */ s(f, { alignItems: "center", gap: 4, mb: 24, children: [
+        /* @__PURE__ */ e(i, { variant: "Body", children: a.paydown_drawer_mimimum_label }),
+        /* @__PURE__ */ e(i, { bold: !0, variant: "H1", children: B(o, "0,0") }),
+        /* @__PURE__ */ e(i, { textAlign: "center", truncate: !1, variant: "Small", width: 208, children: a.paydown_drawer_minimum_info })
+      ] }),
+      /* @__PURE__ */ s(f, { children: [
+        /* @__PURE__ */ e(i, { variant: "H3", children: a.paydown_drawer_subtitle }),
+        /* @__PURE__ */ e(i, { truncate: !1, variant: "ParagraphSmall", children: a.paydown_drawer_description })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(f, { sx: { backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(bt, {}) }),
+    /* @__PURE__ */ e(f, { flexDirection: "row-reverse", px: 24, py: 12, children: /* @__PURE__ */ s(f, { gap: 4, children: [
+      /* @__PURE__ */ e(i, { variant: "Small", children: a.paydown_drawer_total_payment }),
+      /* @__PURE__ */ e(i, { bold: !0, textAlign: "right", variant: "Body", children: B(r, "0,0") })
+    ] }) })
+  ] });
+}, yt = D(_t), ft = ({ isOpen: a, onClose: o, sx: n }) => {
+  const { debts: r } = C();
+  return /* @__PURE__ */ e(
+    te,
+    {
+      ariaLabelClose: r.paydown_drawer_close_aria,
+      isOpen: a,
+      onClose: o,
+      sx: { ...n },
+      title: r.paydown_drawer_title,
+      children: /* @__PURE__ */ e(yt, {})
+    }
+  );
+};
+function gt(a, o) {
+  const n = (r) => {
+    if (typeof r == "number") return r;
+    if (r === "!" || r === "✓") return 1 / 0;
+    throw new Error("Unsupported value");
+  };
+  return n(a) - n(o);
+}
+function xt(a) {
+  return a.is_paid_off ? "✓" : a.priority === void 0 || a.is_impossible ? "!" : a.priority;
+}
+const wt = (a) => {
+  const o = {
+    text: "#121417",
+    background: "#FFB252"
+  };
+  return a === "!" && (o.text = "#FFFFFF", o.background = "#DF320C"), a === "✓" && (o.text = "#FFFFFF", o.background = "#09A57F"), o;
+}, Ct = (a) => {
+  const o = String(a.formattedValue), n = wt(o);
+  return /* @__PURE__ */ e(
+    ue,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 20,
+        // Adjust the size as needed
+        height: 20,
+        borderRadius: "50%",
+        backgroundColor: n.background,
+        marginLeft: "10px"
+      },
+      children: /* @__PURE__ */ e(i, { color: n.text, fontWeight: 700, variant: "Small", children: o })
+    }
+  );
+}, Dt = (a) => {
+  const o = a.row.account, n = je[o.account_type];
+  return /* @__PURE__ */ s(f, { alignItems: "center", flexDirection: "row", children: [
+    /* @__PURE__ */ e(
+      Ce,
+      {
+        alt: `${o.institutionName}`,
+        institutionGuid: o.institution_guid || ""
+      }
+    ),
+    /* @__PURE__ */ s(f, { ml: 12, children: [
+      /* @__PURE__ */ e(i, { variant: "Small", children: o.name }),
+      /* @__PURE__ */ e(i, { variant: "XSmall", children: n })
+    ] })
+  ] });
+}, St = ({
+  sx: a = {},
+  debts: o,
+  hoveredDebtGuid: n,
+  onHoverRow: r,
+  onClickRow: t
+}) => {
+  const l = j(), { onEvent: d } = M(), { isMobile: m } = X(), { debts: c } = C(), [h, p] = y.useState([
+    { field: "priority", sort: "asc" }
+  ]), g = [
+    {
+      field: "priority",
+      headerName: c.table_column_priority,
+      renderHeader: G,
+      renderCell: Ct,
+      sortComparator: gt,
+      sortable: !0,
+      hideSortIcons: !0,
+      type: "custom",
+      align: "left",
+      headerAlign: "left",
+      minWidth: m ? 67 : 72,
+      flex: m ? 0.2 : 0.4
+    },
+    {
+      field: "account",
+      headerName: c.table_column_account,
+      renderHeader: G,
+      renderCell: Dt,
+      sortable: !1,
+      type: "custom",
+      align: "left",
+      headerAlign: "left",
+      minWidth: m ? 180 : 225,
+      flex: 1
+    },
+    {
+      field: "balance",
+      headerName: c.table_column_balance,
+      renderHeader: G,
+      valueFormatter: (u) => B(u, "0,0"),
+      sortable: !0,
+      hideSortIcons: m,
+      type: "number",
+      align: m ? "right" : "left",
+      headerAlign: m ? "right" : "left",
+      minWidth: m ? 70 : 122,
+      flex: m ? 0.4 : 0.6
+    },
+    {
+      field: "interest_rate",
+      headerName: c.table_column_interest_rate,
+      renderHeader: G,
+      valueFormatter: (u) => isNaN(u) ? "---" : `${Number(u).toFixed(2)}%`,
+      sortable: !0,
+      hideSortIcons: m,
+      type: "number",
+      align: "left",
+      headerAlign: "left",
+      minWidth: 122,
+      flex: 0.6
+    },
+    {
+      field: "projected_payoff_date",
+      headerName: c.table_column_payoff_date,
+      renderHeader: G,
+      valueFormatter: (u) => u ? K(u, U.MONTH_SHORT_YEAR) : "---",
+      sortable: !0,
+      hideSortIcons: m,
+      type: "number",
+      align: "left",
+      headerAlign: "left",
+      minWidth: 122,
+      flex: 0.6
+    },
+    {
+      field: "monthly_payment",
+      headerName: c.table_column_amount_due,
+      renderHeader: G,
+      valueFormatter: (u) => typeof u == "number" ? B(u, "0,0") : "---",
+      sortable: !0,
+      hideSortIcons: m,
+      type: "number",
+      align: "left",
+      headerAlign: "left",
+      minWidth: 122,
+      flex: 0.6
+    }
+  ], x = [
+    ...g.slice(0, 3),
+    {
+      field: "chevron",
+      headerName: "",
+      renderHeader: void 0,
+      renderCell: () => /* @__PURE__ */ e(ee, { name: "chevron_right'" }),
+      sortable: !0,
+      hideSortIcons: !0,
+      type: "custom",
+      align: "right",
+      headerAlign: "right",
+      width: 20
+    }
+  ], E = y.useMemo(() => o.map((u, A) => ({
+    ...u,
+    id: A,
+    priority: xt(u)
+  })), [o]), k = (u) => {
+    const Y = u.target.closest("[data-id]")?.getAttribute("data-id"), b = o[Number(Y)];
+    r?.(b?.guid ?? "");
+  }, S = (u) => E.find((A) => A.guid === u)?.id;
+  return /* @__PURE__ */ e(
+    ue,
+    {
+      sx: {
+        height: "100dvh",
+        width: "100%",
+        mt: "15px",
+        overflowX: "auto",
+        boxShadow: "none",
+        ...a
+      },
+      children: /* @__PURE__ */ e(
+        Ge,
+        {
+          columns: m ? x : g,
+          disableColumnFilter: !0,
+          disableColumnMenu: !0,
+          hideFooter: !0,
+          initialState: { sorting: { sortModel: h } },
+          onRowClick: (u) => {
+            t(), d(v.TRENDS_CLICK_TABLE_ROW, { account_guid: u.row.guid });
+          },
+          onSortModelChange: (u) => {
+            p(u), d(v.TRENDS_CLICK_TABLE_SORT);
+          },
+          rows: E,
+          slotProps: {
+            baseIconButton: { color: "secondary", sx: { ml: 8 } },
+            row: {
+              onMouseEnter: k,
+              onMouseLeave: () => r?.("")
+            }
+          },
+          sortModel: h,
+          sortingOrder: ["asc", "desc"],
+          sx: {
+            [`& .MuiDataGrid-row[data-id="${S(n)}"]`]: {
+              backgroundColor: l.palette.mode === "light" ? "#f8f9fb" : "#1f2329",
+              filter: "brightness(98%)"
+            }
+          }
+        }
+      )
+    }
+  );
+}, vt = ({ buttonText: a, isOpen: o, onClick: n }) => {
+  const { isDesktop: r, isTablet: t } = X(), l = o ? "unfold_less" : "unfold_more";
+  return r || t ? /* @__PURE__ */ e(
+    be,
+    {
+      "aria-controls": "prioritize-debts",
+      "aria-describedby": "prioritize-debts",
+      "aria-haspopup": !0,
+      "aria-label": "prioritize-debts",
+      onClick: n,
+      startIcon: /* @__PURE__ */ e(ee, { name: l }),
+      sx: { justifyContent: "start", minWidth: 214, mx: 4 },
+      children: a
+    }
+  ) : /* @__PURE__ */ e(
+    ze,
+    {
+      "aria-controls": "prioritize-debts",
+      "aria-describedby": "prioritize-debts",
+      "aria-haspopup": !0,
+      "aria-label": "prioritize-debts",
+      onClick: n,
+      children: /* @__PURE__ */ e(ee, { name: l })
+    }
+  );
+}, Tt = D(({ buttonEl: a, onClose: o }) => {
+  const { onEvent: n } = M(), { debts: r } = C(), { selectedDebtPriority: t, setSelectedDebtPriority: l } = R(), d = !!a, m = [
+    {
+      priority: L.HIGHEST_INTEREST,
+      text: r.priority_sort_highest_interest
+    },
+    {
+      priority: L.LOWEST_BALANCE,
+      text: r.priority_sort_lowest_balance
+    },
+    {
+      priority: L.HIGHEST_BALANCE,
+      text: r.priority_sort_highest_balance
+    }
+  ], c = (h) => {
+    l(h), n(v.DEBTS_CLICK_PRIORITY, { debts_priority: h });
+  };
+  return /* @__PURE__ */ e(
+    Ve,
+    {
+      anchorEl: a,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      id: "prioritize-debts",
+      onClose: o,
+      open: d,
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      children: /* @__PURE__ */ e(me, { children: m.map(({ priority: h, text: p }) => /* @__PURE__ */ s(
+        Xe,
+        {
+          onClick: () => c(h),
+          sx: {
+            bgcolor: t === h ? "primary.main" : void 0,
+            color: t === h ? "#fff" : void 0,
+            justifyContent: "space-between",
+            minHeight: 44,
+            minWidth: 268,
+            px: 24,
+            py: 12,
+            "&:hover": {
+              bgcolor: "background.highlight",
+              cursor: "pointer",
+              color: "text.primary"
+            }
+          },
+          children: [
+            /* @__PURE__ */ e(i, { color: "inherit", variant: "Small", children: p }),
+            t === h && /* @__PURE__ */ e(he, { color: "inherit", fontSize: "small" })
+          ]
+        },
+        h
+      )) })
+    }
+  );
+}), At = D(() => {
+  const { onEvent: a } = M(), { debts: o } = C(), { selectedDebtPriority: n } = R(), [r, t] = y.useState(null), l = (h) => {
+    t(h.currentTarget), a(v.DEBTS_CLICK_PRIORITIZE);
+  }, d = () => {
+    t(null);
+  }, m = !!r, c = y.useMemo(() => ({
+    [L.HIGHEST_INTEREST]: o.priority_sort_highest_interest,
+    [L.HIGHEST_BALANCE]: o.priority_sort_highest_balance,
+    [L.LOWEST_BALANCE]: o.priority_sort_lowest_balance
+  })[n] ?? o.priority_sort_lowest_balance, [n]);
+  return /* @__PURE__ */ s(_, { children: [
+    /* @__PURE__ */ e(vt, { buttonText: c, isOpen: m, onClick: l }),
+    /* @__PURE__ */ e(Tt, { buttonEl: r, onClose: d })
+  ] });
+}), Et = (a, o, n = 0) => {
+  const r = a.map((c) => ({ ...c }));
+  _e(r, o);
+  const t = /* @__PURE__ */ new Date(), l = [];
+  let d = 0, m = 1;
+  for (const c of r)
+    l.push({
+      ...c,
+      // Start with the initial balance
+      dataset: [{ x: new Date(t), y: c.balance }]
+    });
+  for (; r.some((c) => c.balance >= 0.01 && !c.is_impossible); ) {
+    let c = !1;
+    for (const [h, p] of r.entries()) {
+      if (p.balance <= 0.01) continue;
+      const g = l[h].dataset, E = (p.interest_rate ?? 0) / 100 / 12, k = p.balance * E;
+      let S = p.monthly_payment ?? 0;
+      h === 0 && (S += n), p.balance += k;
+      const u = Math.min(p.balance, S + d);
+      if (u <= k) {
+        p.is_impossible = !0, l[h].is_impossible = !0, l[h].priority = void 0, g.push({ x: new Date(t), y: p.balance });
+        continue;
+      }
+      p.balance -= u, p.balance = p.balance < 0.01 ? 0 : p.balance, g.push({
+        x: new Date(t),
+        y: Math.max(0, p.balance),
+        payment: u,
+        extra: d
+      }), p.balance <= 0 && (d += S, l[h].projected_payoff_date = new Date(t)), u > 0 && (c = !0);
+    }
+    c && t.setMonth(t.getMonth() + 1);
+  }
+  return l.forEach((c) => {
+    (c.interest_rate === void 0 || c.interest_rate === void 0) && (c.projected_payoff_date = void 0);
+  }), l.forEach((c) => {
+    c.priority = !c.is_paid_off && !c.is_impossible ? m++ : void 0;
+  }), l;
+}, It = D(({ onClick: a }) => {
+  const { debts: o } = C(), { isDesktop: n } = X(), { totalMonthlyPayments: r } = q(), { monthlyCashFlowProfile: t } = z(), l = r + Number(t?.extra_payment), d = n ? o.paydown_button_long : o.paydown_button_short;
+  return /* @__PURE__ */ e(
+    be,
+    {
+      "aria-controls": "extra-paydown",
+      "aria-describedby": "extra-paydown",
+      "aria-haspopup": !0,
+      "aria-label": "extra-paydown",
+      onClick: a,
+      sx: { justifyContent: "start", minWidth: 100, mx: 4 },
+      children: T(d, B(l, "0,0"))
+    }
+  );
+}), Bt = ({ onBackClick: a, sx: o }) => {
+  const [n, r] = y.useState(!1), [t, l] = y.useState(!1), [d, m] = y.useState(!1), [c, h] = y.useState(""), { isDesktop: p, isMobile: g } = X(), { debts: x } = C(), { onEvent: E } = M(), { isCopyLoaded: k, isInitialized: S, setSelectedAccounts: u } = Ae(), { setSelectedAccount: A } = Ie(), { selectedDebtPriority: V, setSelectedDebtChartData: Y } = R(), { visibleDebtAccounts: b } = Z(), { goalsLoaded: w, loadGoals: I, monthlyCashFlowProfile: N } = z(), { debts: P } = q(), H = y.useMemo(() => {
+    const F = N?.extra_payment ?? 0;
+    return Et(P, V, F);
+  }, [P, V, N]);
+  y.useEffect(() => {
+    u(b), E(v.DEBTS_VIEW);
+  }, []), y.useEffect(() => {
+    u(b);
+  }, [b]), y.useEffect(() => {
+    S && I().finally();
+  }, [S]);
+  const ae = (F) => h(F), oe = () => {
+    const F = b.find((Q) => Q.guid === c), ne = H.find((Q) => Q.guid === c);
+    F && A(F), ne && Y(ne), r(!0);
+  }, fe = () => E(v.DEBTS_CLICK_FILTER), ge = () => {
+    m(!0), E(v.DEBTS_CLICK_SNOWBALL_CTA);
+  }, xe = () => {
+    l(!0), E(v.DEBTS_CLICK_PAYDOWN);
+  };
+  return !w || !k || !S ? /* @__PURE__ */ e(Ye, {}) : /* @__PURE__ */ s(
+    Re,
+    {
+      accountOptions: b,
+      actions: [
+        /* @__PURE__ */ e(At, {}, "prioritize-debts"),
+        /* @__PURE__ */ e(It, { onClick: xe }, "extra-paydown")
+      ],
+      onAccountsFilterClick: fe,
+      onBackClick: a,
+      sx: o,
+      title: x.title,
+      children: [
+        /* @__PURE__ */ s(f, { sx: { px: p ? "48px" : "24px" }, children: [
+          /* @__PURE__ */ s(
+            f,
+            {
+              sx: {
+                alignItems: g ? "flex-start" : "flex-end",
+                flexDirection: g ? "column" : "row",
+                mx: g ? "-12px" : 0
+              },
+              children: [
+                /* @__PURE__ */ e(
+                  ye,
+                  {
+                    debts: H,
+                    height: g ? 250 : void 0,
+                    hoveredDebtGuid: c,
+                    onClickArea: oe,
+                    onHoverArea: ae,
+                    sx: { mr: g ? "4px" : "-48px" }
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  qe,
+                  {
+                    debts: H,
+                    onClickCta: ge,
+                    sx: { mb: g ? "0px" : "64px" }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(f, { sx: { mx: g ? "-24px" : 0 }, children: /* @__PURE__ */ e(
+            St,
+            {
+              debts: H,
+              hoveredDebtGuid: c,
+              onClickRow: oe,
+              onHoverRow: ae
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ e(
+          Je,
+          {
+            isOpen: d,
+            onClose: () => m(!1)
+          }
+        ),
+        /* @__PURE__ */ e(ut, { isOpen: n, onClose: () => r(!1) }),
+        /* @__PURE__ */ e(ft, { isOpen: t, onClose: () => l(!1) })
+      ]
+    }
+  );
+}, wr = D(Bt);
+export {
+  ye as DebtsChart,
+  Sr as DebtsStore,
+  St as DebtsTable,
+  wr as DebtsWidget
+};