@mx-cartographer/experiences 9.1.0-alpha.bb1 → 9.1.0

package/dist/debts/index.es.js

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