@mx-cartographer/experiences 9.2.4-alpha.al5 → 9.3.0-alph.bb2

package/dist/debts/index.es.js

@@ -1,1498 +1,8 @@
-import { jsx as e, jsxs as l, Fragment as R } from "react/jsx-runtime";
-import f from "react";
-import { observer as C } from "mobx-react-lite";
-import y from "@mui/material/Stack";
-import { useTheme as j, Card as ge, Stack as u, Box as W } from "@mui/material";
-import { Text as i, P as xe, H3 as Be, InstitutionLogo as Pe, Icon as ne } from "@mxenabled/mxui";
-import { intervalToDuration as Re, formatDuration as Le } from "date-fns";
-import { s as Fe, D as $, t as $e, b as Oe } from "../DebtUtils-i4pI2Uoe.mjs";
-import { f as I, a as We } from "../NumberFormatting--XMeeBfr.mjs";
-import { f as J, D as Q } from "../DateFormats-HudZ3Bjs.mjs";
-import { G as Ge, q as ee, u as w, k as V, f as k, c as te, i as He, a as ze } from "../hooks-97sNJ_lf.mjs";
-import { u as ae } from "../useScreenSize-mWpmnh5w.mjs";
-import { b as T } from "../Localization-DnoVyBNK.mjs";
-import { D as ie } from "../Drawer-BDN1RgiP.mjs";
-import { A as je, u as Ve } from "../AccountDetailsHeader-C84CSN2K.mjs";
-import Ye from "@mui/material/Card";
-import Ke from "@mui/material/CardContent";
-import Ue from "@mui/material/CardHeader";
-import le from "@mui/material/Box";
-import { useTheme as qe } from "@mui/material/styles";
-import { LineChart as Xe } from "@mui/x-charts/LineChart";
-import { A as S } from "../Analytics-D-jdcL72.mjs";
-import be from "@mui/material/Tab";
-import Ze from "@mui/material/Tabs";
-import we from "@mui/material/List";
-import G from "@mui/material/Divider";
-import { M as Je, I as Qe, O as et } from "../OriginalBalanceAction-YrvxBYAl.mjs";
-import tt from "@mui/material/TextField";
-import { L as re } from "../ListItemAction-BqUCLj_w.mjs";
-import { C as se } from "../CurrencyInput-DaGEQaLW.mjs";
-import me from "@mui/material/Alert";
-import _e from "@mui/material/AlertTitle";
-import ye from "@mui/material/Paper";
-import { Error as rt, CheckCircle as Ce } from "@mxenabled/mx-icons";
-import { T as fe } from "../TabContentContainer-B0eYJP5p.mjs";
-import { DataGridPro as ot } from "@mui/x-data-grid-pro";
-import { H } from "../HeaderCell-P8w6CmfO.mjs";
-import { A as nt, c as z } from "../Account-DR7Plrqy.mjs";
-import ve from "@mui/material/Button";
-import at from "@mui/material/IconButton";
-import it from "@mui/material/ListItem";
-import lt from "@mui/material/Popover";
-import { u as st } from "../useWidgetLoadTimer-B0tB-yzL.mjs";
-import { L as ct } from "../Loader-CxeBwuPG.mjs";
-import { W as dt } from "../WidgetContainer-By47tuTw.mjs";
-import { E as pt } from "../EmptyState-CJUDc3kD.mjs";
-import { C as ut } from "../ConnectDrawer-L-UwjKiw.mjs";
-function ht(r, n, o = 0) {
-  const t = r.map((b) => ({ ...b })).filter(
-    (b) => b.interest_rate !== void 0 && b.monthly_payment !== void 0 && !b.is_paid_off
-  );
-  Fe(t, n);
-  let a = 0, s = 0;
-  const d = /* @__PURE__ */ new Date(), c = /* @__PURE__ */ new Date();
-  for (; t.some((b) => b.balance >= 0.01 && !b.is_impossible); ) {
-    let b = !1;
-    for (const [v, x] of t.entries()) {
-      if (x.balance <= 0.01 || x.is_impossible) continue;
-      const F = (x.interest_rate ?? 0) / 100 / 12, N = x.balance * F;
-      let A = x.monthly_payment ?? 0;
-      v === 0 && o && (A += o), x.balance += N;
-      const E = Math.min(x.balance, A + s);
-      if (E <= N) {
-        x.is_impossible = !0;
-        continue;
-      }
-      x.balance -= E, x.balance = x.balance < 0.01 ? 0 : x.balance, a += N, x.balance <= 0 && (s += A), E > 0 && (b = !0);
-    }
-    b && c.setMonth(c.getMonth() + 1);
-  }
-  const m = t.some((b) => b.is_impossible && b.balance > 0), h = Re({ start: d, end: c });
-  return {
-    payoffSavings: m ? "N/A" : I(a, "0,0.00"),
-    payoffDate: m ? "Never" : J(c, Q.MONTH_YEAR),
-    payoffDuration: m ? "Stagnant" : Le(h, { format: ["years", "months"] }) || "0 months"
-  };
-}
-const P = () => {
-  if (!f.useContext(Ge))
-    throw new Error("useDebtsUiStore() must be used within the GlobalDataContext");
-  return ee().uiStore;
-}, bt = ({ debts: r, onClickCta: n, sx: o }) => {
-  const t = j(), { isMobile: a } = ae(), { debts: s } = w(), { selectedDebtPriority: d } = P(), { monthlyCashFlowProfile: c } = V(), { payoffDate: m, payoffSavings: h, payoffDuration: b } = f.useMemo(() => {
-    const v = c?.extra_payment ?? 0;
-    return ht(r, d, v);
-  }, [r, d, c]);
-  return /* @__PURE__ */ e(
-    ge,
-    {
-      sx: {
-        boxShadow: t.shadows[2],
-        width: a ? "100%" : "186px",
-        minWidth: "186px",
-        ...o
-      },
-      children: /* @__PURE__ */ l(u, { sx: { gap: "12px", p: "16px" }, children: [
-        /* @__PURE__ */ l(
-          u,
-          {
-            gap: a ? "4px" : "0",
-            sx: {
-              borderBottom: "1px solid",
-              borderBottomColor: t.palette.grey[300],
-              pb: "8px"
-            },
-            children: [
-              /* @__PURE__ */ e(i, { variant: "caption", children: s.snowball_card_date_description }),
-              /* @__PURE__ */ e(i, { bold: !0, color: t.palette.primary.main, variant: "body2", children: m })
-            ]
-          }
-        ),
-        /* @__PURE__ */ l(u, { gap: a ? "4px" : "0", children: [
-          /* @__PURE__ */ e(i, { bold: !0, variant: "body2", children: h }),
-          /* @__PURE__ */ e(i, { variant: "caption", children: s.snowball_card_amount_description })
-        ] }),
-        /* @__PURE__ */ l(u, { gap: a ? "4px" : "0", children: [
-          /* @__PURE__ */ e(i, { bold: !0, variant: "body2", children: b }),
-          /* @__PURE__ */ e(i, { variant: "caption", children: s.snowball_card_duration_description })
-        ] }),
-        /* @__PURE__ */ e(
-          i,
-          {
-            bold: !0,
-            color: t.palette.primary.main,
-            onClick: n,
-            sx: { cursor: "pointer" },
-            variant: "body2",
-            children: s.snowball_card_cta
-          }
-        )
-      ] })
-    }
-  );
-}, mt = C(bt), _t = ({ isOpen: r, onClose: n }) => {
-  const o = j(), { debts: t } = w(), [a, s] = f.useState(!1);
-  return /* @__PURE__ */ e(
-    ie,
-    {
-      ariaLabelClose: "",
-      isOpen: r,
-      onClose: n,
-      title: t.snowball_drawer_title,
-      children: /* @__PURE__ */ l(u, { bgcolor: o.palette.background.default, height: "100%", children: [
-        /* @__PURE__ */ l(u, { alignItems: "center", px: 24, py: 24, children: [
-          /* @__PURE__ */ l(u, { alignItems: "center", pb: 24, children: [
-            /* @__PURE__ */ e(i, { mb: 12, truncate: !0, variant: "h3", children: t.snowball_drawer_subtitle }),
-            /* @__PURE__ */ e(i, { color: o.palette.secondary.main, variant: "body2", children: t.snowball_drawer_amount_description }),
-            /* @__PURE__ */ e(xe, { variant: "h1", children: t.snowball_drawer_savings }),
-            /* @__PURE__ */ e(i, { color: o.palette.secondary.main, variant: "body2", children: t.snowball_drawer_duration_description })
-          ] }),
-          /* @__PURE__ */ l(ge, { sx: { display: "grid", py: 16, px: 24 }, children: [
-            /* @__PURE__ */ e(i, { mb: 4, truncate: !0, variant: "h3", children: t.snowball_drawer_question }),
-            /* @__PURE__ */ e(
-              i,
-              {
-                color: o.palette.secondary.main,
-                mb: 8,
-                truncate: !a,
-                variant: "subtitle2",
-                children: t.snowball_drawer_answer
-              }
-            ),
-            /* @__PURE__ */ e(
-              i,
-              {
-                bold: !0,
-                color: o.palette.primary.main,
-                onClick: () => s(!a),
-                sx: { cursor: "pointer" },
-                variant: "body2",
-                children: a ? t.snowball_drawer_less : t.snowball_drawer_more
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ l(u, { children: [
-          /* @__PURE__ */ e(
-            i,
-            {
-              color: o.palette.secondary.main,
-              px: 24,
-              sx: { textAlign: "center" },
-              variant: "body2",
-              children: t.snowball_drawer_disclaimer
-            }
-          ),
-          /* @__PURE__ */ l(u, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
-            /* @__PURE__ */ e(i, { bold: !0, variant: "caption", children: T(t.snowball_drawer_month_header, 1) }),
-            /* @__PURE__ */ e(i, { bold: !0, variant: "caption", children: t.snowball_drawer_payment_header })
-          ] }),
-          /* @__PURE__ */ l(u, { bgcolor: o.palette.background.paper, mb: 24, children: [
-            /* @__PURE__ */ l(u, { alignItems: "center", flexDirection: "row", pl: 24, children: [
-              /* @__PURE__ */ e(
-                W,
-                {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: 20,
-                    height: 20,
-                    borderRadius: "50%",
-                    backgroundColor: o.palette.success.main,
-                    marginRight: 12
-                  },
-                  children: /* @__PURE__ */ e(i, { color: "white", fontWeight: 700, variant: "body2", children: "✓" })
-                }
-              ),
-              /* @__PURE__ */ l(
-                u,
-                {
-                  sx: {
-                    borderBottom: `1px solid ${o.palette.neutral.light}`,
-                    flexDirection: "row",
-                    flexGrow: 1,
-                    py: 14,
-                    pr: 24
-                  },
-                  children: [
-                    /* @__PURE__ */ l(u, { flexGrow: 1, children: [
-                      /* @__PURE__ */ e(i, { variant: "body1", children: T(t.snowball_drawer_debt_label, "A") }),
-                      /* @__PURE__ */ l(i, { color: o.palette.secondary.main, variant: "caption", 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__ */ l(u, { children: [
-                      /* @__PURE__ */ e(i, { variant: "body1", children: "$100.00" }),
-                      /* @__PURE__ */ e(
-                        i,
-                        {
-                          bold: !0,
-                          color: o.palette.success.main,
-                          textAlign: "end",
-                          variant: "tiny",
-                          children: t.snowball_drawer_paid_label
-                        }
-                      )
-                    ] })
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ l(u, { alignItems: "center", flexDirection: "row", pl: 24, children: [
-              /* @__PURE__ */ e(
-                W,
-                {
-                  sx: {
-                    width: 20,
-                    height: 20,
-                    marginRight: 12,
-                    borderRadius: "50%",
-                    border: `3px solid ${o.palette.neutral.main}`
-                  }
-                }
-              ),
-              /* @__PURE__ */ l(
-                u,
-                {
-                  sx: {
-                    borderBottom: `1px solid ${o.palette.neutral.light}`,
-                    flexDirection: "row",
-                    flexGrow: 1,
-                    py: 14,
-                    pr: 24
-                  },
-                  children: [
-                    /* @__PURE__ */ e(i, { flexGrow: 1, variant: "body1", children: T(t.snowball_drawer_debt_label, "B") }),
-                    /* @__PURE__ */ e(i, { variant: "body1", children: "$400.00" })
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ l(u, { alignItems: "center", flexDirection: "row", pl: 24, py: 14, children: [
-              /* @__PURE__ */ e(
-                W,
-                {
-                  sx: {
-                    width: 20,
-                    height: 20,
-                    marginRight: 12,
-                    borderRadius: "50%",
-                    border: `3px solid ${o.palette.neutral.main}`
-                  }
-                }
-              ),
-              /* @__PURE__ */ l(u, { flexDirection: "row", flexGrow: 1, pr: 24, children: [
-                /* @__PURE__ */ e(i, { flexGrow: 1, variant: "body1", children: T(t.snowball_drawer_debt_label, "C") }),
-                /* @__PURE__ */ e(i, { variant: "body1", children: "$1,000.00" })
-              ] })
-            ] }),
-            /* @__PURE__ */ l(
-              u,
-              {
-                sx: {
-                  py: 8,
-                  px: 24,
-                  flexDirection: "row",
-                  justifyContent: "space-between",
-                  borderTop: `1px solid ${o.palette.neutral.light}`,
-                  borderBottom: `1px solid ${o.palette.neutral.light}`
-                },
-                children: [
-                  /* @__PURE__ */ e(i, { bold: !0, variant: "body1", children: t.snowball_drawer_total_label }),
-                  /* @__PURE__ */ e(i, { bold: !0, variant: "body1", children: "$1,500.00" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ l(u, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
-            /* @__PURE__ */ e(i, { bold: !0, variant: "caption", children: T(t.snowball_drawer_month_header, 2) }),
-            /* @__PURE__ */ e(i, { bold: !0, variant: "caption", children: t.snowball_drawer_payment_header })
-          ] }),
-          /* @__PURE__ */ l(u, { bgcolor: o.palette.background.paper, mb: 24, children: [
-            /* @__PURE__ */ l(u, { alignItems: "center", flexDirection: "row", pl: 24, children: [
-              /* @__PURE__ */ e(
-                W,
-                {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: 20,
-                    height: 20,
-                    borderRadius: "50%",
-                    backgroundColor: o.palette.success.main,
-                    marginRight: 12
-                  },
-                  children: /* @__PURE__ */ e(i, { color: "white", fontWeight: 700, variant: "body2", children: "✓" })
-                }
-              ),
-              /* @__PURE__ */ l(
-                u,
-                {
-                  sx: {
-                    borderBottom: `1px solid ${o.palette.neutral.light}`,
-                    flexDirection: "row",
-                    flexGrow: 1,
-                    py: 14,
-                    pr: 24
-                  },
-                  children: [
-                    /* @__PURE__ */ l(u, { flexGrow: 1, children: [
-                      /* @__PURE__ */ e(i, { variant: "body1", children: T(t.snowball_drawer_debt_label, "B") }),
-                      /* @__PURE__ */ l(i, { color: o.palette.secondary.main, variant: "caption", 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__ */ l(u, { children: [
-                      /* @__PURE__ */ e(i, { variant: "body1", children: "$500.00" }),
-                      /* @__PURE__ */ e(
-                        i,
-                        {
-                          bold: !0,
-                          color: o.palette.success.main,
-                          textAlign: "end",
-                          variant: "tiny",
-                          children: t.snowball_drawer_paid_label
-                        }
-                      )
-                    ] })
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ l(u, { alignItems: "center", flexDirection: "row", pl: 24, children: [
-              /* @__PURE__ */ e(
-                W,
-                {
-                  sx: {
-                    width: 20,
-                    height: 20,
-                    marginRight: 12,
-                    borderRadius: "50%",
-                    border: `3px solid ${o.palette.neutral.main}`
-                  }
-                }
-              ),
-              /* @__PURE__ */ l(
-                u,
-                {
-                  sx: {
-                    flexDirection: "row",
-                    flexGrow: 1,
-                    py: 14,
-                    pr: 24
-                  },
-                  children: [
-                    /* @__PURE__ */ e(i, { flexGrow: 1, variant: "body1", children: T(t.snowball_drawer_debt_label, "C") }),
-                    /* @__PURE__ */ e(i, { variant: "body1", children: "$1,000.00" })
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ l(
-              u,
-              {
-                sx: {
-                  py: 8,
-                  px: 24,
-                  flexDirection: "row",
-                  justifyContent: "space-between",
-                  borderTop: `1px solid ${o.palette.neutral.light}`,
-                  borderBottom: `1px solid ${o.palette.neutral.light}`
-                },
-                children: [
-                  /* @__PURE__ */ e(i, { bold: !0, variant: "body1", children: t.snowball_drawer_total_label }),
-                  /* @__PURE__ */ e(i, { bold: !0, variant: "body1", children: "$1,500.00" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ l(u, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
-            /* @__PURE__ */ e(i, { bold: !0, variant: "caption", children: T(t.snowball_drawer_month_header, 3) }),
-            /* @__PURE__ */ e(i, { bold: !0, variant: "caption", children: t.snowball_drawer_payment_header })
-          ] }),
-          /* @__PURE__ */ l(u, { bgcolor: o.palette.background.paper, mb: 24, children: [
-            /* @__PURE__ */ l(u, { alignItems: "center", flexDirection: "row", pl: 24, children: [
-              /* @__PURE__ */ e(
-                W,
-                {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: 20,
-                    height: 20,
-                    borderRadius: "50%",
-                    backgroundColor: o.palette.success.main,
-                    marginRight: 12
-                  },
-                  children: /* @__PURE__ */ e(i, { color: "white", fontWeight: 700, variant: "body2", children: "✓" })
-                }
-              ),
-              /* @__PURE__ */ l(
-                u,
-                {
-                  sx: {
-                    alignItems: "center",
-                    flexDirection: "row",
-                    flexGrow: 1,
-                    py: 14,
-                    pr: 24
-                  },
-                  children: [
-                    /* @__PURE__ */ e(u, { flexGrow: 1, children: /* @__PURE__ */ e(i, { variant: "body1", children: T(t.snowball_drawer_debt_label, "C") }) }),
-                    /* @__PURE__ */ l(u, { children: [
-                      /* @__PURE__ */ e(i, { variant: "body1", children: "$1,500.00" }),
-                      /* @__PURE__ */ e(
-                        i,
-                        {
-                          bold: !0,
-                          color: o.palette.success.main,
-                          textAlign: "end",
-                          variant: "tiny",
-                          children: t.snowball_drawer_paid_label
-                        }
-                      )
-                    ] })
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ l(
-              u,
-              {
-                sx: {
-                  py: 8,
-                  px: 24,
-                  flexDirection: "row",
-                  justifyContent: "space-between",
-                  borderTop: `1px solid ${o.palette.neutral.light}`,
-                  borderBottom: `1px solid ${o.palette.neutral.light}`
-                },
-                children: [
-                  /* @__PURE__ */ e(i, { bold: !0, variant: "body1", children: t.snowball_drawer_total_label }),
-                  /* @__PURE__ */ e(i, { bold: !0, variant: "body1", children: "$1,500.00" })
-                ]
-              }
-            )
-          ] })
-        ] })
-      ] })
-    }
-  );
-}, yt = C(_t), ft = "#FF7B08";
-function gt(r, n) {
-  const [o, t, a] = r.replace(/^#/, "").match(/.{1,2}/g).map((d) => parseInt(d, 16)), s = [
-    Math.max(0, Math.min(255, Math.round(o * n))),
-    Math.max(0, Math.min(255, Math.round(t * n))),
-    Math.max(0, Math.min(255, Math.round(a * n)))
-  ];
-  return `rgb(${s[0]}, ${s[1]}, ${s[2]})`;
-}
-const De = ({
-  sx: r,
-  height: n = 500,
-  width: o,
-  debts: t,
-  hoveredDebtGuid: a,
-  onClickArea: s,
-  onHoverArea: d
-}) => {
-  const c = qe(), { onEvent: m } = k(), h = t.filter((p) => !p.is_impossible), b = [
-    ...new Set(
-      h.flatMap((p) => p.dataset.map((g) => new Date(g.x).getTime()))
-    )
-  ].sort((p, g) => p - g).map((p) => new Date(p)), v = h.map((p) => {
-    const g = new Map(p.dataset.map((B) => [new Date(B.x).getTime(), B.y]));
-    let D = g.get(b[0].getTime()) ?? 0;
-    const M = b.map((B) => {
-      const K = g.get(B.getTime()) ?? D;
-      return D = K, { x: B, y: K };
-    });
-    return { ...p, dataset: M };
-  }), x = v.reduce(
-    (p, g) => p + (g.dataset[0]?.y ?? 0),
-    0
-  ), L = b.map((p, g) => {
-    const D = g / (b.length - 1), M = x * (1 - D);
-    return { x: p, y: M };
-  }), F = Math.ceil(x / 100) * 100, N = b, A = v.map((p, g) => {
-    const D = 1 - g / v.length * 0.5, M = gt(ft, D);
-    return {
-      id: `debt-${g}`,
-      guid: p.guid,
-      label: p.name,
-      data: p.dataset.map((B) => B.y),
-      color: M,
-      curve: "linear",
-      type: "line",
-      area: !0,
-      stack: "total",
-      showMark: !1
-    };
-  });
-  A.push({
-    id: "payoff-line",
-    label: "Payoff Line",
-    data: L.map((p) => p.y),
-    color: c.palette.grey[700],
-    curve: "linear",
-    type: "line",
-    stack: void 0,
-    showMark: !1,
-    disableHighlight: !0
-  });
-  const E = (p) => A.findIndex((g) => g?.guid === p);
-  return /* @__PURE__ */ e(
-    le,
-    {
-      sx: {
-        width: "100%",
-        height: "100%",
-        touchAction: "pan-y",
-        "& svg": {
-          touchAction: "pan-y",
-          userSelect: "none"
-        },
-        "& .recharts-wrapper": {
-          touchAction: "pan-y"
-        }
-      },
-      children: /* @__PURE__ */ e(
-        Xe,
-        {
-          axisHighlight: { x: "none" },
-          disableLineItemHighlight: !0,
-          height: n,
-          hideLegend: !0,
-          margin: { bottom: 24, left: 32, right: 72, top: 48 },
-          onAreaClick: (p, g) => {
-            s?.();
-            const D = A.find((M) => M.id === g.seriesId);
-            m(S.DEBTS_CLICK_CHART_AREA, { account_guid: D?.guid });
-          },
-          onHighlightChange: (p) => {
-            const g = A.find((D) => D.id === p?.seriesId)?.guid;
-            d?.(g ?? "");
-          },
-          series: A,
-          skipAnimation: !0,
-          slotProps: { tooltip: { trigger: "none" } },
-          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-${E(a ?? "0")}`]: {
-              opacity: 1
-            },
-            [`& .MuiAreaElement-series-debt-${E(a ?? "0")}`]: {
-              opacity: 1
-            },
-            "& .MuiChartsAxis-tickLabel > tspan": {
-              fontFamily: c.typography.body2.fontFamily
-            },
-            ...r
-          },
-          width: o,
-          xAxis: [
-            {
-              data: N,
-              disableTicks: !0,
-              min: b[0],
-              scaleType: "time",
-              tickLabelMinGap: 24,
-              valueFormatter: (p) => J(p, Q.MONTH_SHORT_YEAR)
-            }
-          ],
-          yAxis: [
-            {
-              min: 0,
-              max: F,
-              disableTicks: !0,
-              valueFormatter: (p) => I(p, "0a")
-            }
-          ]
-        }
-      )
-    }
-  );
-}, xt = () => {
-  const r = j(), { debts: n } = w(), { selectedDebtChartData: o } = P();
-  return /* @__PURE__ */ l(R, { children: [
-    /* @__PURE__ */ l(
-      Ye,
-      {
-        sx: {
-          "& .MuiCardContent-root:last-child": {
-            pb: 0
-          }
-        },
-        children: [
-          /* @__PURE__ */ e(Ue, { sx: { pb: 0 }, title: /* @__PURE__ */ e(Be, { sx: { pb: 4 }, children: n.details_chart_title }) }),
-          /* @__PURE__ */ e(Ke, { sx: { p: 0 }, children: /* @__PURE__ */ e(De, { debts: [o], height: 250 }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ e(
-      i,
-      {
-        color: r.palette.text.secondary,
-        sx: { textAlign: "center", px: 8, py: 12 },
-        variant: "body2",
-        children: n.details_chart_description
-      }
-    )
-  ] });
-}, wt = C(xt), Ct = () => {
-  const r = j(), { onEvent: n } = k(), { debts: o } = w(), { selectedDebtChartData: t, showCompleted: a, showError: s } = P();
-  return f.useEffect(() => n(S.DEBT_SCHEDULE_VIEW), []), /* @__PURE__ */ e(we, { children: s || a ? /* @__PURE__ */ e(
-    i,
-    {
-      color: r.palette.secondary.main,
-      component: "div",
-      sx: { p: 32, textAlign: "center" },
-      variant: "body2",
-      children: s ? o.schedule_error_message : o.schedule_complete_message
-    }
-  ) : /* @__PURE__ */ l(R, { children: [
-    /* @__PURE__ */ l(y, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
-      /* @__PURE__ */ e(i, { bold: !0, variant: "caption", children: o.schedule_month_heading }),
-      /* @__PURE__ */ e(i, { bold: !0, variant: "caption", children: o.schedule_amount_heading })
-    ] }),
-    t.dataset.slice(1).map(({ x: d, y: c, payment: m }) => /* @__PURE__ */ e(y, { bgcolor: r.palette.background.paper, children: /* @__PURE__ */ e(y, { alignItems: "center", flexDirection: "row", pl: 24, children: /* @__PURE__ */ l(
-      y,
-      {
-        sx: {
-          borderBottom: `1px solid ${r.palette.divider}`,
-          flexDirection: "row",
-          flexGrow: 1,
-          py: 14,
-          pr: 24
-        },
-        children: [
-          /* @__PURE__ */ l(y, { flexGrow: 1, children: [
-            /* @__PURE__ */ e(i, { bold: !0, variant: "body1", children: J(d, Q.MONTH_YEAR) }),
-            /* @__PURE__ */ e(i, { color: r.palette.secondary.main, variant: "caption", children: o.schedule_month_label })
-          ] }),
-          /* @__PURE__ */ l(y, { children: [
-            /* @__PURE__ */ e(i, { bold: !0, variant: "body1", children: I(c, "0,0.00") }),
-            /* @__PURE__ */ e(
-              i,
-              {
-                bold: !0,
-                color: r.palette.success.main,
-                textAlign: "end",
-                variant: "tiny",
-                children: `+${I(m, "0,0")}`
-              }
-            )
-          ] })
-        ]
-      }
-    ) }) }, String(d))),
-    /* @__PURE__ */ e(y, { bgcolor: "background.paper", children: /* @__PURE__ */ l(
-      y,
-      {
-        sx: {
-          alignItems: "center",
-          flexDirection: "row",
-          flexGrow: 1,
-          py: 14,
-          px: 24
-        },
-        children: [
-          /* @__PURE__ */ e(i, { flexGrow: 1, variant: "body1", children: o.schedule_payoff_label }),
-          /* @__PURE__ */ e(i, { variant: "body1", children: "-" })
-        ]
-      }
-    ) })
-  ] }) });
-}, vt = C(Ct), Dt = C(({ debt: r }) => {
-  const { debts: n } = w(), { updateAccount: o } = te(), { onEvent: t } = k(), [a, s] = f.useState(r.interest_rate ?? 0), d = a < 0, c = async () => {
-    await o({ ...r.account, interest_rate: a }), r.interest_rate = a, t(S.DEBTS_SAVE_RATE_ACTION, { account_guid: r.guid });
-  }, m = () => {
-    setTimeout(() => {
-      s(r.interest_rate ?? 0);
-    }, 250);
-  };
-  return /* @__PURE__ */ e(
-    re,
-    {
-      isSaveDisabled: d,
-      label: `${n.details_interest_rate} (%)`,
-      onCancel: m,
-      onSave: c,
-      primaryText: n.details_interest_rate,
-      secondaryText: We(Number(r.interest_rate) / 100),
-      zeroStateText: r.interest_rate ? void 0 : n.add_interest_rate,
-      children: /* @__PURE__ */ e(
-        tt,
-        {
-          error: d,
-          fullWidth: !0,
-          onChange: (h) => s(isNaN(parseFloat(h.target.value)) ? 0 : parseFloat(h.target.value)),
-          type: "number",
-          value: a
-        }
-      )
-    }
-  );
-}), St = C(({ debt: r }) => {
-  const { debts: n } = w(), { updateAccount: o } = te(), { onEvent: t } = k(), [a, s] = f.useState(r.monthly_payment ?? 0), d = a < 0 || a > 9999999999e-2, c = async () => {
-    await o({ ...r.account, minimum_payment: a }), r.monthly_payment = a, t(S.DEBTS_SAVE_PAYMENT_ACTION, { account_guid: r.guid });
-  }, m = () => {
-    setTimeout(() => {
-      s(r.monthly_payment ?? 0);
-    }, 250);
-  };
-  return /* @__PURE__ */ e(
-    re,
-    {
-      isSaveDisabled: d,
-      label: n.details_monthly_payment,
-      onCancel: m,
-      onSave: c,
-      primaryText: n.details_monthly_payment,
-      secondaryText: I(r.monthly_payment, "0,0"),
-      zeroStateText: r.monthly_payment ? void 0 : n.add_monthly_payment,
-      children: /* @__PURE__ */ e(
-        se,
-        {
-          amount: a,
-          autoFocus: !0,
-          error: d,
-          fullWidth: !0,
-          minAmount: 0,
-          setAmount: (h) => s(isNaN(Number(h)) ? a : Number(h)),
-          sx: { ".MuiTypography-body1": { p: 0 } }
-        }
-      )
-    }
-  );
-}), At = C(({ debt: r }) => {
-  const { debts: n } = w(), { updateAccount: o } = te(), { onEvent: t } = k(), [a, s] = f.useState(r.original_balance ?? 0), d = a < 0 || a > 9999999999e-2, c = async () => {
-    await o({ ...r.account, original_balance: a }), r.original_balance = a, t(S.DEBTS_SAVE_BALANCE_ACTION, { account_guid: r.guid });
-  }, m = () => {
-    setTimeout(() => {
-      s(r.original_balance ?? 0);
-    }, 250);
-  };
-  return /* @__PURE__ */ e(
-    re,
-    {
-      isSaveDisabled: d,
-      label: n.details_original_balance,
-      onCancel: m,
-      onSave: c,
-      primaryText: n.details_original_balance,
-      secondaryText: I(r.original_balance, "0,0"),
-      zeroStateText: r.original_balance ? void 0 : n.add_original_balance,
-      children: /* @__PURE__ */ e(
-        se,
-        {
-          amount: a,
-          autoFocus: !0,
-          error: d,
-          fullWidth: !0,
-          minAmount: 0,
-          setAmount: (h) => s(isNaN(Number(h)) ? a : Number(h)),
-          sx: { ".MuiTypography-body1": { p: 0 } }
-        }
-      )
-    }
-  );
-}), Tt = () => {
-  const { onEvent: r } = k(), { selectedDebtChartData: n } = P();
-  return f.useEffect(() => r(S.DEBT_DETAILS_VIEW), []), /* @__PURE__ */ l(y, { bgcolor: "background.paper", children: [
-    n?.goal && /* @__PURE__ */ l(R, { children: [
-      /* @__PURE__ */ e(Je, { goal: n.goal }),
-      /* @__PURE__ */ e(G, {}),
-      /* @__PURE__ */ e(Qe, { goal: n.goal }),
-      /* @__PURE__ */ e(G, {}),
-      /* @__PURE__ */ e(et, { goal: n.goal }),
-      /* @__PURE__ */ e(G, {})
-    ] }),
-    !n?.goal && n?.account && /* @__PURE__ */ l(R, { children: [
-      /* @__PURE__ */ e(St, { debt: n }),
-      /* @__PURE__ */ e(G, {}),
-      /* @__PURE__ */ e(Dt, { debt: n }),
-      /* @__PURE__ */ e(G, {}),
-      /* @__PURE__ */ e(At, { debt: n }),
-      /* @__PURE__ */ e(G, {})
-    ] })
-  ] });
-}, Et = C(Tt), It = ({ setTabValue: r, sx: n }) => {
-  const { debts: o } = w(), { showError: t, showCompleted: a } = P();
-  return f.useEffect(() => {
-    t && r(1);
-  }, [t]), !t && !a ? /* @__PURE__ */ e(R, {}) : /* @__PURE__ */ l(y, { gap: 16, children: [
-    /* @__PURE__ */ e(ye, { sx: { my: 16, mx: 24, ...n }, children: /* @__PURE__ */ l(
-      me,
-      {
-        icon: t ? /* @__PURE__ */ e(rt, { filled: !0 }) : /* @__PURE__ */ e(Ce, { color: "success", filled: !0 }),
-        severity: "error",
-        sx: {
-          alignItems: "start",
-          borderLeft: 5,
-          borderRadius: 1,
-          borderColor: t ? "error.main" : "success.main",
-          color: "text.primary",
-          "&.MuiPaper-root": {
-            backgroundColor: "background.paper"
-          }
-        },
-        children: [
-          /* @__PURE__ */ e(_e, { sx: { fontWeight: 600, marginTop: 2 }, variant: "body1", children: t ? o.status_error_title : o.status_complete_title }),
-          /* @__PURE__ */ e(i, { component: "p", variant: "subtitle2", children: t ? o.status_error_description : o.status_complete_description })
-        ]
-      }
-    ) }),
-    t && /* @__PURE__ */ e(ye, { sx: { mb: 16, mt: 100, mx: 24, ...n }, children: /* @__PURE__ */ l(
-      me,
-      {
-        icon: /* @__PURE__ */ e(R, {}),
-        severity: "error",
-        sx: {
-          borderRadius: 2,
-          color: "text.primary",
-          "&.MuiPaper-root": {
-            backgroundColor: "background.paper"
-          }
-        },
-        children: [
-          /* @__PURE__ */ e(_e, { sx: { fontWeight: 600, marginTop: 2 }, variant: "body1", children: o.status_info_title }),
-          /* @__PURE__ */ e(i, { component: "p", variant: "subtitle2", children: o.status_info_description })
-        ]
-      }
-    ) })
-  ] });
-}, Mt = C(It), kt = () => {
-  const { debts: r } = w(), { showError: n, showCompleted: o } = P(), [t, a] = f.useState(0);
-  return /* @__PURE__ */ l(R, { children: [
-    (n || o) && /* @__PURE__ */ e(Mt, { setTabValue: a, sx: { mt: -24 } }),
-    /* @__PURE__ */ l(
-      Ze,
-      {
-        "aria-label": r.details_tabs_aria_label,
-        centered: !0,
-        onChange: (s, d) => a(d),
-        textColor: "primary",
-        value: t,
-        variant: "fullWidth",
-        children: [
-          /* @__PURE__ */ e(
-            be,
-            {
-              "aria-controls": "debt-schedule-tabpanel-0",
-              id: "debt-schedule-tab-0",
-              label: r.schedule_tab_label
-            }
-          ),
-          /* @__PURE__ */ e(
-            be,
-            {
-              "aria-controls": "debt-details-tabpanel-1",
-              id: "debt-details-tab-1",
-              label: r.details_tab_label
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ e(fe, { index: 0, name: "debt-schedule", value: t, children: /* @__PURE__ */ e(vt, {}) }),
-    /* @__PURE__ */ e(fe, { index: 1, name: "debt-details", value: t, children: /* @__PURE__ */ e(Et, {}) })
-  ] });
-}, Nt = C(kt), Bt = ({ isOpen: r, onClose: n }) => {
-  const { debts: o } = w(), { showError: t, showCompleted: a } = P(), s = t || a ? /* @__PURE__ */ e(R, {}) : /* @__PURE__ */ e(wt, {});
-  return /* @__PURE__ */ e(
-    ie,
-    {
-      ariaLabelClose: o.details_close_aria,
-      isOpen: r,
-      onClose: n,
-      title: o.details_title,
-      children: /* @__PURE__ */ l(y, { bgcolor: "background.default", children: [
-        /* @__PURE__ */ e(je, { customDetailsChart: s }),
-        /* @__PURE__ */ e(Nt, {})
-      ] })
-    }
-  );
-}, Pt = C(() => {
-  const { debts: r } = w(), { monthlyCashFlowProfile: n, updateMonthlyCashFlowProfile: o } = V(), { onEvent: t } = k(), [a, s] = f.useState(n?.extra_payment ?? 0), d = a < 0 || a > 9999999999e-2, c = async () => {
-    n && (await o({ ...n, extra_payment: a }), n.extra_payment = a, t(S.DEBTS_SAVE_PAYDOWN_ACTION, {
-      user_guid: n?.user_guid
-    }));
-  }, m = () => {
-    setTimeout(() => {
-      s(n?.extra_payment ?? 0);
-    }, 250);
-  };
-  return /* @__PURE__ */ e(
-    re,
-    {
-      isSaveDisabled: d,
-      label: r.paydown_drawer_extra_payment,
-      onCancel: m,
-      onSave: c,
-      primaryText: r.paydown_drawer_extra_payment,
-      secondaryText: I(n?.extra_payment, "0,0"),
-      zeroStateText: n?.extra_payment ? void 0 : r.add_extra_payment,
-      children: /* @__PURE__ */ e(
-        se,
-        {
-          amount: a,
-          autoFocus: !0,
-          error: d,
-          fullWidth: !0,
-          minAmount: 0,
-          setAmount: (h) => s(isNaN(Number(h)) ? a : Number(h)),
-          sx: { ".MuiTypography-body1": { p: 0 } }
-        }
-      )
-    }
-  );
-}), Rt = () => {
-  const { debts: r } = w(), { totalMonthlyPayments: n } = ee(), { monthlyCashFlowProfile: o } = V(), t = n + Number(o?.extra_payment);
-  return /* @__PURE__ */ l(y, { sx: { backgroundColor: "background.default", height: "100%" }, children: [
-    /* @__PURE__ */ l(y, { p: 24, children: [
-      /* @__PURE__ */ l(y, { alignItems: "center", gap: 4, mb: 24, children: [
-        /* @__PURE__ */ e(i, { variant: "body1", children: r.paydown_drawer_mimimum_label }),
-        /* @__PURE__ */ e(xe, { bold: !0, variant: "h1", children: I(n, "0,0") }),
-        /* @__PURE__ */ e(i, { textAlign: "center", truncate: !1, variant: "body2", width: 208, children: r.paydown_drawer_minimum_info })
-      ] }),
-      /* @__PURE__ */ l(y, { children: [
-        /* @__PURE__ */ e(i, { variant: "h3", children: r.paydown_drawer_subtitle }),
-        /* @__PURE__ */ e(i, { truncate: !1, variant: "subtitle2", children: r.paydown_drawer_description })
-      ] })
-    ] }),
-    /* @__PURE__ */ e(y, { sx: { backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(Pt, {}) }),
-    /* @__PURE__ */ e(y, { flexDirection: "row-reverse", px: 24, py: 12, children: /* @__PURE__ */ l(y, { gap: 4, children: [
-      /* @__PURE__ */ e(i, { variant: "body2", children: r.paydown_drawer_total_payment }),
-      /* @__PURE__ */ e(i, { bold: !0, textAlign: "right", variant: "body1", children: I(t, "0,0") })
-    ] }) })
-  ] });
-}, Lt = C(Rt), Ft = ({ isOpen: r, onClose: n }) => {
-  const { debts: o } = w();
-  return /* @__PURE__ */ e(
-    ie,
-    {
-      ariaLabelClose: o.paydown_drawer_close_aria,
-      isOpen: r,
-      onClose: n,
-      title: o.paydown_drawer_title,
-      children: /* @__PURE__ */ e(Lt, {})
-    }
-  );
-};
-function $t(r, n) {
-  const o = (t) => {
-    if (typeof t == "number") return t;
-    if (t === "!" || t === "✓") return 1 / 0;
-    throw new Error("Unsupported value");
-  };
-  return o(r) - o(n);
-}
-function Ot(r) {
-  return r.is_paid_off ? "✓" : r.priority === void 0 || r.is_impossible ? "!" : r.priority;
-}
-const Wt = (r) => {
-  const n = {
-    text: "#121417",
-    background: "#FFB252"
-  };
-  return r === "!" && (n.text = "#FFFFFF", n.background = "#DF320C"), r === "✓" && (n.text = "#FFFFFF", n.background = "#09A57F"), n;
-}, Gt = (r) => {
-  const n = String(r.formattedValue), o = Wt(n);
-  return /* @__PURE__ */ e(
-    le,
-    {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: 20,
-        // Adjust the size as needed
-        height: 20,
-        borderRadius: "50%",
-        backgroundColor: o.background,
-        marginLeft: "10px"
-      },
-      children: /* @__PURE__ */ e(i, { color: o.text, fontWeight: 700, variant: "body2", children: n })
-    }
-  );
-}, Ht = (r) => {
-  const n = r.row.account, o = nt[n.account_type];
-  return /* @__PURE__ */ l(y, { alignItems: "center", flexDirection: "row", children: [
-    /* @__PURE__ */ e(
-      Pe,
-      {
-        alt: `${n.institutionName}`,
-        institutionGuid: n.institution_guid || ""
-      }
-    ),
-    /* @__PURE__ */ l(y, { ml: 12, children: [
-      /* @__PURE__ */ e(i, { variant: "body2", children: n.name }),
-      /* @__PURE__ */ e(i, { variant: "caption", children: o })
-    ] })
-  ] });
-}, zt = ({
-  sx: r = {},
-  debts: n,
-  hoveredDebtGuid: o,
-  onHoverRow: t,
-  onClickRow: a
-}) => {
-  const s = j(), { onEvent: d } = k(), { isMobile: c } = ae(), { debts: m, common: h } = w(), [b, v] = f.useState([
-    { field: "priority", sort: "asc" }
-  ]), x = [
-    {
-      field: "priority",
-      headerName: m.table_column_priority,
-      renderHeader: H,
-      renderCell: Gt,
-      sortComparator: $t,
-      sortable: !0,
-      hideSortIcons: !0,
-      type: "custom",
-      align: "left",
-      headerAlign: "left",
-      minWidth: c ? 67 : 72,
-      flex: c ? 0.2 : 0.4
-    },
-    {
-      field: "account",
-      headerName: m.table_column_account,
-      renderHeader: H,
-      renderCell: Ht,
-      sortable: !1,
-      type: "custom",
-      align: "left",
-      headerAlign: "left",
-      minWidth: c ? 180 : 225,
-      flex: 1
-    },
-    {
-      field: "balance",
-      headerName: m.table_column_balance,
-      renderHeader: H,
-      renderCell: (_) => /* @__PURE__ */ e(i, { color: s.palette.text.primary, variant: "body2", children: I(_.value, "0,0") }),
-      sortable: !0,
-      hideSortIcons: c,
-      type: "number",
-      align: "left",
-      headerAlign: "left",
-      minWidth: c ? 70 : 122,
-      flex: c ? 0.4 : 0.6
-    },
-    {
-      field: "interest_rate",
-      headerName: m.table_column_interest_rate,
-      renderHeader: H,
-      renderCell: (_) => /* @__PURE__ */ e(i, { color: s.palette.text.primary, variant: "body2", children: isNaN(_.value) ? "---" : `${Number(_.value).toFixed(2)}%` }),
-      sortable: !0,
-      hideSortIcons: c,
-      type: "number",
-      align: "left",
-      headerAlign: "left",
-      minWidth: 122,
-      flex: 0.6
-    },
-    {
-      field: "projected_payoff_date",
-      headerName: m.table_column_payoff_date,
-      renderHeader: H,
-      renderCell: (_) => /* @__PURE__ */ e(i, { color: s.palette.text.primary, variant: "body2", children: _.value ? J(_.value, Q.MONTH_SHORT_YEAR) : "---" }),
-      sortable: !0,
-      hideSortIcons: c,
-      type: "number",
-      align: "left",
-      headerAlign: "left",
-      minWidth: 122,
-      flex: 0.6
-    },
-    {
-      field: "monthly_payment",
-      headerName: m.table_column_amount_due,
-      renderHeader: H,
-      renderCell: (_) => /* @__PURE__ */ e(i, { color: s.palette.text.primary, variant: "body2", children: typeof _.value == "number" ? I(_.value, "0,0") : "---" }),
-      sortable: !0,
-      hideSortIcons: c,
-      type: "number",
-      align: "left",
-      headerAlign: "left",
-      minWidth: 122,
-      flex: 0.6
-    }
-  ], L = [
-    ...x.slice(0, 3),
-    {
-      field: "chevron",
-      headerClassName: "chevron-header",
-      headerName: "",
-      renderCell: () => /* @__PURE__ */ e(u, { "aria-label": h.see_details, role: "button", children: /* @__PURE__ */ e(ne, { name: "chevron_right" }) }),
-      sortable: !1,
-      hideSortIcons: !0,
-      type: "custom",
-      align: "right",
-      headerAlign: "right",
-      width: 20
-    }
-  ], F = f.useMemo(() => n.map((_, p) => ({
-    ..._,
-    id: p,
-    priority: Ot(_)
-  })), [n]), N = (_) => {
-    const D = _.target.closest("[data-id]")?.getAttribute("data-id"), M = n[Number(D)];
-    t?.(M?.guid ?? "");
-  }, A = (_) => {
-    c || N(_);
-  }, E = (_) => {
-    c && N(_);
-  }, Y = (_) => F.find((p) => p.guid === _)?.id;
-  return /* @__PURE__ */ e(
-    le,
-    {
-      sx: {
-        height: "auto",
-        width: "100%",
-        mt: "15px",
-        overflowX: "auto",
-        overflowY: "visible",
-        boxShadow: "none",
-        ...r
-      },
-      children: /* @__PURE__ */ e(
-        ot,
-        {
-          columns: c ? L : x,
-          disableColumnFilter: !0,
-          disableColumnMenu: !0,
-          hideFooter: !0,
-          initialState: { sorting: { sortModel: b } },
-          onRowClick: (_) => {
-            a(), d(S.DEBTS_CLICK_TABLE_ROW, { account_guid: _.row.guid });
-          },
-          onSortModelChange: (_) => {
-            v(_), d(S.DEBTS_CLICK_TABLE_SORT);
-          },
-          rows: F,
-          slotProps: {
-            baseIconButton: { color: "secondary", sx: { ml: 8 } },
-            row: {
-              onMouseEnter: A,
-              onMouseLeave: () => !c && t?.(""),
-              onTouchStart: E,
-              onClick: c ? E : void 0
-            }
-          },
-          sortModel: b,
-          sortingOrder: ["asc", "desc"],
-          sx: {
-            "& .chevron-header": { display: "none" },
-            [`& .MuiDataGrid-row[data-id="${Y(o)}"]`]: {
-              backgroundColor: s.palette.mode === "light" ? "#f8f9fb" : "#1f2329",
-              filter: "brightness(98%)"
-            }
-          }
-        }
-      )
-    }
-  );
-}, jt = ({
-  buttonText: r,
-  disabled: n,
-  isDesktop: o = !1,
-  isOpen: t,
-  onClick: a
-}) => {
-  const s = t ? "unfold_less" : "unfold_more";
-  return o ? /* @__PURE__ */ e(
-    ve,
-    {
-      "aria-controls": "prioritize-debts",
-      "aria-describedby": "prioritize-debts",
-      "aria-haspopup": !0,
-      "aria-label": "prioritize-debts",
-      disabled: n,
-      onClick: a,
-      startIcon: /* @__PURE__ */ e(ne, { name: s }),
-      sx: { justifyContent: "start" },
-      children: r
-    }
-  ) : /* @__PURE__ */ e(
-    at,
-    {
-      "aria-controls": "prioritize-debts",
-      "aria-describedby": "prioritize-debts",
-      "aria-haspopup": !0,
-      "aria-label": "prioritize-debts",
-      disabled: n,
-      onClick: a,
-      children: /* @__PURE__ */ e(ne, { name: s })
-    }
-  );
-}, Vt = C(({ buttonEl: r, onClose: n }) => {
-  const { onEvent: o } = k(), { debts: t } = w(), { selectedDebtPriority: a, setSelectedDebtPriority: s } = P(), d = !!r, c = [
-    {
-      priority: $.FASTEST_PAYOFF_FIRST,
-      text: t.priority_sort_fastest_payoff
-    },
-    {
-      priority: $.HIGHEST_INTEREST,
-      text: t.priority_sort_highest_interest
-    },
-    {
-      priority: $.LOWEST_BALANCE,
-      text: t.priority_sort_lowest_balance
-    },
-    {
-      priority: $.HIGHEST_BALANCE,
-      text: t.priority_sort_highest_balance
-    }
-  ], m = (h) => {
-    s(h), o(S.DEBTS_CLICK_PRIORITY, { debts_priority: h });
-  };
-  return /* @__PURE__ */ e(
-    lt,
-    {
-      anchorEl: r,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "left"
-      },
-      id: "prioritize-debts",
-      onClose: n,
-      open: d,
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      },
-      children: /* @__PURE__ */ e(we, { children: c.map(({ priority: h, text: b }) => /* @__PURE__ */ l(
-        it,
-        {
-          onClick: () => m(h),
-          sx: {
-            bgcolor: a === h ? "primary.main" : void 0,
-            color: a === 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: "body2", children: b }),
-            a === h && /* @__PURE__ */ e(Ce, { color: "inherit", filled: !0, fontSize: "small" })
-          ]
-        },
-        h
-      )) })
-    }
-  );
-}), Yt = C(({ disabled: r, isDesktop: n }) => {
-  const { onEvent: o } = k(), { debts: t } = w(), { selectedDebtPriority: a } = P(), [s, d] = f.useState(null), c = (v) => {
-    d(v.currentTarget), o(S.DEBTS_CLICK_PRIORITIZE);
-  }, m = () => {
-    d(null);
-  }, h = !!s, b = f.useMemo(() => ({
-    [$.FASTEST_PAYOFF_FIRST]: t.priority_sort_fastest_payoff,
-    [$.HIGHEST_INTEREST]: t.priority_sort_highest_interest,
-    [$.HIGHEST_BALANCE]: t.priority_sort_highest_balance,
-    [$.LOWEST_BALANCE]: t.priority_sort_lowest_balance
-  })[a] ?? t.priority_sort_lowest_balance, [a]);
-  return /* @__PURE__ */ l(u, { children: [
-    /* @__PURE__ */ e(
-      jt,
-      {
-        buttonText: b,
-        disabled: r,
-        isDesktop: n,
-        isOpen: h,
-        onClick: c
-      }
-    ),
-    /* @__PURE__ */ e(Vt, { buttonEl: s, onClose: m })
-  ] });
-}), Kt = C(({ disabled: r, onClick: n }) => {
-  const { debts: o } = w(), { totalMonthlyPayments: t } = ee(), { monthlyCashFlowProfile: a } = V(), s = t + Number(a?.extra_payment), d = o.paydown_button_long;
-  return /* @__PURE__ */ e(y, { alignItems: "center", sx: { flex: 1, flexShrink: 0 }, children: /* @__PURE__ */ e(
-    ve,
-    {
-      "aria-controls": "extra-paydown",
-      "aria-describedby": "extra-paydown",
-      "aria-haspopup": !0,
-      "aria-label": "extra-paydown",
-      disabled: r,
-      onClick: n,
-      sx: { justifyContent: "start" },
-      children: T(d, I(s, "0,0"))
-    }
-  ) });
-}), Ut = ({ onBackClick: r, onMenuClick: n, sx: o }) => {
-  const { isDesktop: t, isMobile: a } = ae(), { connect: s, debts: d } = w(), { onEvent: c } = k(), {
-    config: { show_connections_widget_in_master: m }
-  } = He(), { isInitialized: h } = ze(), { setSelectedAccount: b } = Ve(), { selectedDebtPriority: v, setSelectedDebtChartData: x } = P(), {
-    isAccountDataLoaded: L,
-    loadAccountData: F,
-    detailedAccounts: N,
-    visibleDebtAccounts: A
-  } = te(), { isAllGoalDataLoaded: E, loadGoalData: Y, monthlyCashFlowProfile: _ } = V(), { debts: p } = ee(), [g, D] = f.useState(!1), [M, B] = f.useState(!1), [K, ce] = f.useState(!1), [U, Se] = f.useState(""), [Ae, de] = f.useState(!1);
-  st({
-    widgetName: "DebtsWidget",
-    isLoaded: L && E
-  });
-  const q = f.useMemo(() => {
-    const O = _?.extra_payment ?? 0;
-    return $e(p, v, O);
-  }, [p, v, _]);
-  f.useEffect(() => {
-    L || F().finally(), c(S.DEBTS_VIEW);
-  }, []), f.useEffect(() => {
-    h && Y().finally();
-  }, [h]);
-  const pe = (O) => Se(O), ue = () => {
-    const O = A.find((oe) => oe.guid === U), he = q.find((oe) => oe.guid === U);
-    O && b(O), he && x(he), D(!0);
-  }, Te = () => c(S.DEBTS_CLICK_FILTER), Ee = () => {
-    ce(!0), c(S.DEBTS_CLICK_SNOWBALL_CTA);
-  }, Ie = () => {
-    B(!0), c(S.DEBTS_CLICK_PAYDOWN);
-  };
-  if (!h || !L || !E)
-    return /* @__PURE__ */ e(ct, {});
-  const Me = N.length === 0, ke = A.length === 0, Ne = p.length === 0, X = Me || ke || Ne, Z = Oe(
-    d,
-    m,
-    () => de(!0)
-  );
-  return /* @__PURE__ */ l(
-    dt,
-    {
-      actions: [/* @__PURE__ */ e(Yt, { disabled: X }, "prioritize-debts")],
-      allowedAccountTypes: [
-        z.CREDIT_CARD,
-        z.LOAN,
-        z.MORTGAGE,
-        z.LINE_OF_CREDIT,
-        z.CHECKING_LINE_OF_CREDIT
-      ],
-      hasDivider: !0,
-      onAccountsFilterClick: Te,
-      onBackClick: r,
-      onMenuClick: n,
-      slotComponent: /* @__PURE__ */ e(Kt, { disabled: X, onClick: Ie }, "extra-paydown"),
-      sx: o,
-      title: d.title,
-      children: [
-        /* @__PURE__ */ l(y, { sx: { pt: 48, px: t ? "48px" : "24px" }, children: [
-          X && /* @__PURE__ */ e(
-            pt,
-            {
-              header: Z.header,
-              icon: "note_stack",
-              onClick: Z.onClickHandler,
-              primaryButton: Z.primaryButton,
-              subText: Z.description,
-              sx: { maxWidth: 400 }
-            }
-          ),
-          !X && /* @__PURE__ */ l(R, { children: [
-            /* @__PURE__ */ l(
-              y,
-              {
-                sx: {
-                  alignItems: a ? "flex-start" : "flex-end",
-                  flexDirection: a ? "column" : "row",
-                  mx: a ? "-12px" : 0
-                },
-                children: [
-                  /* @__PURE__ */ e(
-                    De,
-                    {
-                      debts: q,
-                      height: a ? 250 : void 0,
-                      hoveredDebtGuid: U,
-                      onClickArea: ue,
-                      onHoverArea: pe,
-                      sx: { mr: a ? "4px" : "-48px" }
-                    }
-                  ),
-                  /* @__PURE__ */ e(
-                    mt,
-                    {
-                      debts: q,
-                      onClickCta: Ee,
-                      sx: { mb: a ? "0px" : "64px" }
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ e(y, { sx: { mx: a ? "-24px" : 0 }, children: /* @__PURE__ */ e(
-              zt,
-              {
-                debts: q,
-                hoveredDebtGuid: U,
-                onClickRow: ue,
-                onHoverRow: pe
-              }
-            ) })
-          ] })
-        ] }),
-        /* @__PURE__ */ e(
-          yt,
-          {
-            isOpen: K,
-            onClose: () => ce(!1)
-          }
-        ),
-        /* @__PURE__ */ e(Bt, { isOpen: g, onClose: () => D(!1) }),
-        /* @__PURE__ */ e(Ft, { isOpen: M, onClose: () => B(!1) }),
-        /* @__PURE__ */ e(
-          ut,
-          {
-            onClose: () => de(!1),
-            showConnectWidget: Ae,
-            title: s.mini_title
-          }
-        )
-      ]
-    }
-  );
-}, Hr = C(Ut);
+import { DebtsChart as e } from "./components/DebtsChart.es.js";
+import { DebtsTable as o } from "./components/DebtsTable.es.js";
+import b from "./DebtsWidget.es.js";
 export {
-  De as DebtsChart,
-  zt as DebtsTable,
-  Hr as DebtsWidget
+  e as DebtsChart,
+  o as DebtsTable,
+  b as DebtsWidget
 };
-//# sourceMappingURL=index.es.js.map