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

package/dist/debts/index.es.js

@@ -1,541 +1,618 @@
-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 { 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 y from "@mui/material/Stack";
-import { useTheme as j, Card as ge, Stack as u, Box as W } from "@mui/material";
-import { Text as i, P as xe, H3 as Be, InstitutionLogo as Pe, Icon as ne } from "@mxenabled/mxui";
-import { intervalToDuration as Re, formatDuration as Le } from "date-fns";
-import { s as Fe, D as F, t as $e, b as Oe } from "../DebtUtils-DD3186U-.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, g as k, d as te, a as He, b as ze } from "../hooks-BaO_gOI6.mjs";
-import { u as ae } from "../useScreenSize-mWpmnh5w.mjs";
-import { b as T } from "../Localization-DnoVyBNK.mjs";
-import { D as ie } from "../Drawer-BXqqBMxg.mjs";
-import { A as je, u as Ve } from "../AccountDetailsHeader-DIysk_4w.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-CzGzz_sE.mjs";
-import be from "@mui/material/Tab";
-import Ze from "@mui/material/Tabs";
-import we from "@mui/material/List";
+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 G from "@mui/material/Divider";
-import { M as Je, I as Qe, O as et } from "../OriginalBalanceAction-BybTXDtO.mjs";
-import tt from "@mui/material/TextField";
-import { L as re } from "../ListItemAction-CzZ8s39Z.mjs";
-import { C as se } from "../CurrencyInput-adTIRtL3.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-CnMXkVqr.mjs";
-import { DataGridPro as ot } from "@mui/x-data-grid-pro";
-import { H } from "../HeaderCell-P8w6CmfO.mjs";
-import { c as nt, A as z } from "../Account-BaJmiJAG.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-CJb-RELP.mjs";
-import { L as ct } from "../Loader-CxeBwuPG.mjs";
-import { W as dt } from "../WidgetContainer-CmbU4CBH.mjs";
-import { E as pt } from "../EmptyState-CJUDc3kD.mjs";
-import { C as ut } from "../ConnectDrawer-Cnjr3Ddg.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
-  );
+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);
   Fe(t, n);
-  let a = 0, s = 0;
-  const d = /* @__PURE__ */ new Date(), c = /* @__PURE__ */ new Date();
+  let o = 0, s = 0;
+  const p = /* @__PURE__ */ new Date(), c = /* @__PURE__ */ new Date();
   for (; t.some((b) => b.balance >= 0.01 && !b.is_impossible); ) {
     let b = !1;
-    for (const [v, x] of t.entries()) {
+    for (const [I, x] of t.entries()) {
       if (x.balance <= 0.01 || x.is_impossible) continue;
-      const L = (x.interest_rate ?? 0) / 100 / 12, N = x.balance * L;
-      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) {
+      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) {
         x.is_impossible = !0;
         continue;
       }
-      x.balance -= E, x.balance = x.balance < 0.01 ? 0 : x.balance, a += N, x.balance <= 0 && (s += A), E > 0 && (b = !0);
+      x.balance -= D, x.balance = x.balance < 0.01 ? 0 : x.balance, o += k, x.balance <= 0 && (s += N), D > 0 && (b = !0);
     }
     b && c.setMonth(c.getMonth() + 1);
   }
-  const m = t.some((b) => b.is_impossible && b.balance > 0), h = Re({ start: d, end: c });
+  const m = t.some((b) => b.is_impossible && b.balance > 0), h = nt({
+    start: p,
+    end: c
+  });
   return {
-    payoffSavings: m ? "N/A" : I(a, "0,0.00"),
-    payoffDate: m ? "Never" : J(c, Q.MONTH_YEAR),
-    payoffDuration: m ? "Stagnant" : Le(h, { format: ["years", "months"] }) || "0 months"
+    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"
   };
 }
-const P = () => {
-  if (!f.useContext(Ge))
-    throw new Error("useCateUiStore() 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,
-    {
+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, {
       sx: {
-        boxShadow: t.shadows[2],
-        width: a ? "100%" : "186px",
-        minWidth: "186px",
-        ...o
+        gap: "12px",
+        p: "16px"
       },
-      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,
-          {
+      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, {
             bold: !0,
             color: t.palette.primary.main,
-            onClick: n,
-            sx: { cursor: "pointer" },
             variant: "body2",
-            children: s.snowball_card_cta
-          }
-        )
-      ] })
-    }
-  );
-}, mt = C(bt), _t = ({ isOpen: r, onClose: n }) => {
-  const o = j(), { debts: t } = w(), [a, s] = f.useState(!1);
-  return /* @__PURE__ */ e(
-    ie,
-    {
-      ariaLabelClose: "",
-      isOpen: r,
-      onClose: n,
-      title: t.snowball_drawer_title,
-      children: /* @__PURE__ */ l(u, { bgcolor: o.palette.background.default, height: "100%", children: [
-        /* @__PURE__ */ l(u, { alignItems: "center", px: 24, py: 24, children: [
-          /* @__PURE__ */ l(u, { alignItems: "center", pb: 24, children: [
-            /* @__PURE__ */ e(i, { mb: 12, truncate: !0, variant: "h3", children: t.snowball_drawer_subtitle }),
-            /* @__PURE__ */ e(i, { color: o.palette.secondary.main, variant: "body2", children: t.snowball_drawer_amount_description }),
-            /* @__PURE__ */ e(xe, { variant: "h1", children: t.snowball_drawer_savings }),
-            /* @__PURE__ */ e(i, { color: o.palette.secondary.main, variant: "body2", children: t.snowball_drawer_duration_description })
-          ] }),
-          /* @__PURE__ */ l(ge, { sx: { display: "grid", py: 16, px: 24 }, children: [
-            /* @__PURE__ */ e(i, { mb: 4, truncate: !0, variant: "h3", children: t.snowball_drawer_question }),
-            /* @__PURE__ */ e(
-              i,
-              {
-                color: o.palette.secondary.main,
-                mb: 8,
-                truncate: !a,
-                variant: "subtitle2",
-                children: t.snowball_drawer_answer
-              }
-            ),
-            /* @__PURE__ */ e(
-              i,
-              {
-                bold: !0,
-                color: o.palette.primary.main,
-                onClick: () => s(!a),
-                sx: { cursor: "pointer" },
-                variant: "body2",
-                children: a ? t.snowball_drawer_less : t.snowball_drawer_more
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ l(u, { children: [
-          /* @__PURE__ */ e(
-            i,
-            {
-              color: o.palette.secondary.main,
-              px: 24,
-              sx: { textAlign: "center" },
+            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" },
               variant: "body2",
-              children: t.snowball_drawer_disclaimer
-            }
-          ),
-          /* @__PURE__ */ l(u, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
-            /* @__PURE__ */ e(i, { bold: !0, variant: "caption", children: T(t.snowball_drawer_month_header, 1) }),
-            /* @__PURE__ */ e(i, { bold: !0, variant: "caption", children: t.snowball_drawer_payment_header })
-          ] }),
-          /* @__PURE__ */ l(u, { bgcolor: o.palette.background.paper, mb: 24, children: [
-            /* @__PURE__ */ l(u, { alignItems: "center", flexDirection: "row", pl: 24, children: [
-              /* @__PURE__ */ e(
-                W,
-                {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: 20,
-                    height: 20,
-                    borderRadius: "50%",
-                    backgroundColor: o.palette.success.main,
-                    marginRight: 12
-                  },
-                  children: /* @__PURE__ */ e(i, { color: "white", fontWeight: 700, variant: "body2", children: "✓" })
-                }
-              ),
-              /* @__PURE__ */ l(
-                u,
-                {
-                  sx: {
-                    borderBottom: `1px solid ${o.palette.neutral.light}`,
-                    flexDirection: "row",
-                    flexGrow: 1,
-                    py: 14,
-                    pr: 24
-                  },
-                  children: [
-                    /* @__PURE__ */ l(u, { flexGrow: 1, children: [
-                      /* @__PURE__ */ e(i, { variant: "body1", children: T(t.snowball_drawer_debt_label, "A") }),
-                      /* @__PURE__ */ l(i, { color: o.palette.secondary.main, variant: "caption", children: [
-                        T(
-                          t.snowball_drawer_rollover_explainer_pt1,
-                          "$100"
-                        ),
-                        /* @__PURE__ */ e("strong", { children: T(t.snowball_drawer_debt_label, "B") }),
-                        t.snowball_drawer_rollover_explainer_pt2
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ l(u, { children: [
-                      /* @__PURE__ */ e(i, { variant: "body1", children: "$100.00" }),
-                      /* @__PURE__ */ e(
-                        i,
-                        {
-                          bold: !0,
-                          color: o.palette.success.main,
-                          textAlign: "end",
-                          variant: "tiny",
-                          children: t.snowball_drawer_paid_label
-                        }
-                      )
-                    ] })
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ l(u, { alignItems: "center", flexDirection: "row", pl: 24, children: [
-              /* @__PURE__ */ e(
-                W,
-                {
-                  sx: {
-                    width: 20,
-                    height: 20,
-                    marginRight: 12,
-                    borderRadius: "50%",
-                    border: `3px solid ${o.palette.neutral.main}`
-                  }
-                }
-              ),
-              /* @__PURE__ */ l(
-                u,
-                {
-                  sx: {
-                    borderBottom: `1px solid ${o.palette.neutral.light}`,
-                    flexDirection: "row",
-                    flexGrow: 1,
-                    py: 14,
-                    pr: 24
-                  },
-                  children: [
-                    /* @__PURE__ */ e(i, { flexGrow: 1, variant: "body1", children: T(t.snowball_drawer_debt_label, "B") }),
-                    /* @__PURE__ */ e(i, { variant: "body1", children: "$400.00" })
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ l(u, { alignItems: "center", flexDirection: "row", pl: 24, py: 14, children: [
-              /* @__PURE__ */ e(
-                W,
-                {
-                  sx: {
-                    width: 20,
-                    height: 20,
-                    marginRight: 12,
-                    borderRadius: "50%",
-                    border: `3px solid ${o.palette.neutral.main}`
-                  }
-                }
-              ),
-              /* @__PURE__ */ l(u, { flexDirection: "row", flexGrow: 1, pr: 24, children: [
-                /* @__PURE__ */ e(i, { flexGrow: 1, variant: "body1", children: T(t.snowball_drawer_debt_label, "C") }),
-                /* @__PURE__ */ e(i, { variant: "body1", children: "$1,000.00" })
-              ] })
-            ] }),
-            /* @__PURE__ */ l(
-              u,
-              {
+              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, {
                 sx: {
-                  py: 8,
-                  px: 24,
+                  borderBottom: `1px solid ${r.palette.neutral.light}`,
                   flexDirection: "row",
-                  justifyContent: "space-between",
-                  borderTop: `1px solid ${o.palette.neutral.light}`,
-                  borderBottom: `1px solid ${o.palette.neutral.light}`
+                  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
                 },
-                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,
-              {
+                children: /* @__PURE__ */ e(i, {
+                  color: "white",
+                  fontWeight: 700,
+                  variant: "body2",
+                  children: "✓"
+                })
+              }), /* @__PURE__ */ l(u, {
                 sx: {
-                  py: 8,
-                  px: 24,
+                  borderBottom: `1px solid ${r.palette.neutral.light}`,
                   flexDirection: "row",
-                  justifyContent: "space-between",
-                  borderTop: `1px solid ${o.palette.neutral.light}`,
-                  borderBottom: `1px solid ${o.palette.neutral.light}`
+                  flexGrow: 1,
+                  py: 14,
+                  pr: 24
                 },
-                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,
-              {
+                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, {
                 sx: {
-                  py: 8,
-                  px: 24,
                   flexDirection: "row",
-                  justifyContent: "space-between",
-                  borderTop: `1px solid ${o.palette.neutral.light}`,
-                  borderBottom: `1px solid ${o.palette.neutral.light}`
+                  flexGrow: 1,
+                  py: 14,
+                  pr: 24
                 },
-                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))),
+                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))),
     Math.max(0, Math.min(255, Math.round(t * n))),
-    Math.max(0, Math.min(255, Math.round(a * n)))
+    Math.max(0, Math.min(255, Math.round(o * n)))
   ];
   return `rgb(${s[0]}, ${s[1]}, ${s[2]})`;
 }
-const De = ({
-  sx: r,
-  height: n = 500,
-  width: o,
-  debts: t,
-  hoveredDebtGuid: a,
-  onClickArea: s,
-  onHoverArea: d
-}) => {
-  const c = qe(), { onEvent: m } = k(), h = t.filter((p) => !p.is_impossible), b = [
-    ...new Set(
-      h.flatMap((p) => p.dataset.map((g) => new Date(g.x).getTime()))
-    )
-  ].sort((p, g) => p - g).map((p) => new Date(p)), v = h.map((p) => {
-    const g = new Map(p.dataset.map((B) => [new Date(B.x).getTime(), B.y]));
-    let D = g.get(b[0].getTime()) ?? 0;
-    const M = b.map((B) => {
-      const K = g.get(B.getTime()) ?? D;
-      return D = K, { x: B, y: K };
+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
+      };
     });
-    return { ...p, dataset: M };
-  }), x = v.reduce(
-    (p, g) => p + (g.dataset[0]?.y ?? 0),
-    0
-  ), $ = b.map((p, g) => {
-    const D = g / (b.length - 1), M = x * (1 - D);
-    return { x: p, y: M };
-  }), L = Math.ceil(x / 100) * 100, N = b, A = v.map((p, g) => {
-    const D = 1 - g / v.length * 0.5, M = gt(ft, D);
     return {
-      id: `debt-${g}`,
-      guid: p.guid,
-      label: p.name,
-      data: p.dataset.map((B) => B.y),
-      color: M,
+      ...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,
       curve: "linear",
       type: "line",
       area: !0,
@@ -543,10 +620,10 @@ const De = ({
       showMark: !1
     };
   });
-  A.push({
+  D.push({
     id: "payoff-line",
     label: "Payoff Line",
-    data: $.map((p) => p.y),
+    data: F.map((d) => d.y),
     color: c.palette.grey[700],
     curve: "linear",
     type: "line",
@@ -554,170 +631,177 @@ const De = ({
     showMark: !1,
     disableHighlight: !0
   });
-  const E = (p) => A.findIndex((g) => g?.guid === p);
-  return /* @__PURE__ */ e(
-    le,
-    {
-      sx: {
-        width: "100%",
-        height: "100%",
+  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",
-        "& svg": {
-          touchAction: "pan-y",
-          userSelect: "none"
+        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" } },
+      sx: {
+        p: 4,
+        "& .MuiBarLabel-root": {
+          fontSize: 10,
+          fontWeight: 600
         },
-        "& .recharts-wrapper": {
-          touchAction: "pan-y"
-        }
+        "& .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-${P(o ?? "0")}`]: { opacity: 1 },
+        [`& .MuiAreaElement-series-debt-${P(o ?? "0")}`]: { opacity: 1 },
+        "& .MuiChartsAxis-tickLabel > tspan": { fontFamily: c.typography.body2.fontFamily },
+        ...a
       },
-      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" } },
+      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
+      },
+      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, {
           sx: {
-            p: 4,
-            "& .MuiBarLabel-root": {
-              fontSize: 10,
-              fontWeight: 600
-            },
-            "& .MuiAreaElement-root": {
-              opacity: 0.4,
-              transition: "opacity 0.3s ease"
-            },
-            "& .MuiAreaElement-root:hover": {
-              opacity: 1
-            },
-            "& .MuiLineElement-series-payoff-line": {
-              strokeDasharray: "10 5",
-              strokeWidth: 1
-            },
-            [`& .MuiLineElement-series-debt-${E(a ?? "0")}`]: {
-              opacity: 1
-            },
-            [`& .MuiAreaElement-series-debt-${E(a ?? "0")}`]: {
-              opacity: 1
-            },
-            "& .MuiChartsAxis-tickLabel > tspan": {
-              fontFamily: c.typography.body2.fontFamily
-            },
-            ...r
+            borderBottom: `1px solid ${a.palette.divider}`,
+            flexDirection: "row",
+            flexGrow: 1,
+            py: 14,
+            pr: 24
           },
-          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: L,
-              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,
-      {
+          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, {
         sx: {
           alignItems: "center",
           flexDirection: "row",
@@ -725,136 +809,139 @@ const De = ({
           py: 14,
           px: 24
         },
-        children: [
-          /* @__PURE__ */ e(i, { flexGrow: 1, variant: "body1", children: o.schedule_payoff_label }),
-          /* @__PURE__ */ e(i, { variant: "body1", children: "-" })
-        ]
-      }
-    ) })
+        children: [/* @__PURE__ */ e(i, {
+          flexGrow: 1,
+          variant: "body1",
+          children: r.schedule_payoff_label
+        }), /* @__PURE__ */ e(i, {
+          variant: "body1",
+          children: "-"
+        })]
+      })
+    })
   ] }) });
-}, vt = C(Ct), Dt = C(({ debt: r }) => {
-  const { debts: n } = w(), { updateAccount: o } = te(), { onEvent: t } = k(), [a, s] = f.useState(r.interest_rate ?? 0), d = a < 0, c = async () => {
-    await o({ ...r.account, interest_rate: a }), r.interest_rate = a, t(S.DEBTS_SAVE_RATE_ACTION, { account_guid: r.guid });
+}, 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 });
   }, m = () => {
     setTimeout(() => {
-      s(r.interest_rate ?? 0);
+      s(a.interest_rate ?? 0);
     }, 250);
   };
-  return /* @__PURE__ */ e(
-    re,
-    {
-      isSaveDisabled: d,
-      label: `${n.details_interest_rate} (%)`,
-      onCancel: m,
-      onSave: c,
-      primaryText: n.details_interest_rate,
-      secondaryText: We(Number(r.interest_rate) / 100),
-      zeroStateText: r.interest_rate ? void 0 : n.add_interest_rate,
-      children: /* @__PURE__ */ e(
-        tt,
-        {
-          error: d,
-          fullWidth: !0,
-          onChange: (h) => s(isNaN(parseFloat(h.target.value)) ? 0 : parseFloat(h.target.value)),
-          type: "number",
-          value: a
-        }
-      )
-    }
-  );
-}), St = C(({ debt: r }) => {
-  const { debts: n } = w(), { updateAccount: o } = te(), { onEvent: t } = k(), [a, s] = f.useState(r.monthly_payment ?? 0), d = a < 0 || a > 9999999999e-2, c = async () => {
-    await o({ ...r.account, minimum_payment: a }), r.monthly_payment = a, t(S.DEBTS_SAVE_PAYMENT_ACTION, { account_guid: r.guid });
+  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 });
   }, m = () => {
     setTimeout(() => {
-      s(r.monthly_payment ?? 0);
+      s(a.monthly_payment ?? 0);
     }, 250);
   };
-  return /* @__PURE__ */ e(
-    re,
-    {
-      isSaveDisabled: d,
-      label: n.details_monthly_payment,
-      onCancel: m,
-      onSave: c,
-      primaryText: n.details_monthly_payment,
-      secondaryText: I(r.monthly_payment, "0,0"),
-      zeroStateText: r.monthly_payment ? void 0 : n.add_monthly_payment,
-      children: /* @__PURE__ */ e(
-        se,
-        {
-          amount: a,
-          autoFocus: !0,
-          error: d,
-          fullWidth: !0,
-          minAmount: 0,
-          setAmount: (h) => s(isNaN(Number(h)) ? a : Number(h)),
-          sx: { ".MuiTypography-body1": { p: 0 } }
-        }
-      )
-    }
-  );
-}), At = C(({ debt: r }) => {
-  const { debts: n } = w(), { updateAccount: o } = te(), { onEvent: t } = k(), [a, s] = f.useState(r.original_balance ?? 0), d = a < 0 || a > 9999999999e-2, c = async () => {
-    await o({ ...r.account, original_balance: a }), r.original_balance = a, t(S.DEBTS_SAVE_BALANCE_ACTION, { account_guid: r.guid });
+  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 });
   }, m = () => {
     setTimeout(() => {
-      s(r.original_balance ?? 0);
+      s(a.original_balance ?? 0);
     }, 250);
   };
-  return /* @__PURE__ */ e(
-    re,
-    {
-      isSaveDisabled: d,
-      label: n.details_original_balance,
-      onCancel: m,
-      onSave: c,
-      primaryText: n.details_original_balance,
-      secondaryText: I(r.original_balance, "0,0"),
-      zeroStateText: r.original_balance ? void 0 : n.add_original_balance,
-      children: /* @__PURE__ */ e(
-        se,
-        {
-          amount: a,
-          autoFocus: !0,
-          error: d,
-          fullWidth: !0,
-          minAmount: 0,
-          setAmount: (h) => s(isNaN(Number(h)) ? a : Number(h)),
-          sx: { ".MuiTypography-body1": { p: 0 } }
-        }
-      )
-    }
-  );
+  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 } }
+    })
+  });
 }), Tt = () => {
-  const { onEvent: r } = k(), { selectedDebtChartData: n } = P();
-  return f.useEffect(() => r(S.DEBT_DETAILS_VIEW), []), /* @__PURE__ */ l(y, { bgcolor: "background.paper", children: [
-    n?.goal && /* @__PURE__ */ l(R, { children: [
-      /* @__PURE__ */ e(Je, { goal: n.goal }),
+  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 }),
       /* @__PURE__ */ e(G, {}),
-      /* @__PURE__ */ e(Qe, { goal: n.goal }),
+      /* @__PURE__ */ e(Xe, { goal: n.goal }),
       /* @__PURE__ */ e(G, {}),
-      /* @__PURE__ */ e(et, { goal: n.goal }),
+      /* @__PURE__ */ e(qe, { goal: n.goal }),
       /* @__PURE__ */ e(G, {})
-    ] }),
-    !n?.goal && n?.account && /* @__PURE__ */ l(R, { children: [
+    ] }), !n?.goal && n?.account && /* @__PURE__ */ l(B, { children: [
       /* @__PURE__ */ e(St, { debt: n }),
       /* @__PURE__ */ e(G, {}),
       /* @__PURE__ */ e(Dt, { debt: n }),
       /* @__PURE__ */ e(G, {}),
       /* @__PURE__ */ e(At, { debt: n }),
       /* @__PURE__ */ e(G, {})
-    ] })
-  ] });
-}, Et = C(Tt), It = ({ setTabValue: r, sx: n }) => {
-  const { debts: o } = w(), { showError: t, showCompleted: a } = P();
-  return f.useEffect(() => {
-    t && r(1);
-  }, [t]), !t && !a ? /* @__PURE__ */ e(R, {}) : /* @__PURE__ */ l(y, { gap: 16, children: [
-    /* @__PURE__ */ e(ye, { sx: { my: 16, mx: 24, ...n }, children: /* @__PURE__ */ l(
-      me,
-      {
-        icon: t ? /* @__PURE__ */ e(rt, { filled: !0 }) : /* @__PURE__ */ e(Ce, { color: "success", filled: !0 }),
+    ] })]
+  });
+}, 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
+        }),
         severity: "error",
         sx: {
           alignItems: "start",
@@ -862,218 +949,268 @@ const De = ({
           borderRadius: 1,
           borderColor: t ? "error.main" : "success.main",
           color: "text.primary",
-          "&.MuiPaper-root": {
-            backgroundColor: "background.paper"
-          }
+          "&.MuiPaper-root": { backgroundColor: "background.paper" }
         },
-        children: [
-          /* @__PURE__ */ e(_e, { sx: { fontWeight: 600, marginTop: 2 }, variant: "body1", children: t ? o.status_error_title : o.status_complete_title }),
-          /* @__PURE__ */ e(i, { component: "p", variant: "subtitle2", children: t ? o.status_error_description : o.status_complete_description })
-        ]
-      }
-    ) }),
-    t && /* @__PURE__ */ e(ye, { sx: { mb: 16, mt: 100, mx: 24, ...n }, children: /* @__PURE__ */ l(
-      me,
-      {
-        icon: /* @__PURE__ */ e(R, {}),
+        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, {}),
         severity: "error",
         sx: {
           borderRadius: 2,
           color: "text.primary",
-          "&.MuiPaper-root": {
-            backgroundColor: "background.paper"
-          }
+          "&.MuiPaper-root": { backgroundColor: "background.paper" }
         },
-        children: [
-          /* @__PURE__ */ e(_e, { sx: { fontWeight: 600, marginTop: 2 }, variant: "body1", children: o.status_info_title }),
-          /* @__PURE__ */ e(i, { component: "p", variant: "subtitle2", children: o.status_info_description })
-        ]
-      }
-    ) })
-  ] });
-}, Mt = C(It), kt = () => {
-  const { debts: r } = w(), { showError: n, showCompleted: o } = P(), [t, a] = f.useState(0);
-  return /* @__PURE__ */ l(R, { children: [
-    (n || o) && /* @__PURE__ */ e(Mt, { setTabValue: a, sx: { mt: -24 } }),
-    /* @__PURE__ */ l(
-      Ze,
-      {
-        "aria-label": r.details_tabs_aria_label,
-        centered: !0,
-        onChange: (s, d) => a(d),
-        textColor: "primary",
-        value: t,
-        variant: "fullWidth",
-        children: [
-          /* @__PURE__ */ e(
-            be,
-            {
-              "aria-controls": "debt-schedule-tabpanel-0",
-              id: "debt-schedule-tab-0",
-              label: r.schedule_tab_label
-            }
-          ),
-          /* @__PURE__ */ e(
-            be,
-            {
-              "aria-controls": "debt-details-tabpanel-1",
-              id: "debt-details-tab-1",
-              label: r.details_tab_label
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ e(fe, { index: 0, name: "debt-schedule", value: t, children: /* @__PURE__ */ e(vt, {}) }),
-    /* @__PURE__ */ e(fe, { index: 1, name: "debt-details", value: t, children: /* @__PURE__ */ e(Et, {}) })
+        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, {})
+    })
   ] });
-}, 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
-    }));
+}, 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 }));
   }, m = () => {
     setTimeout(() => {
       s(n?.extra_payment ?? 0);
     }, 250);
   };
-  return /* @__PURE__ */ e(
-    re,
-    {
-      isSaveDisabled: d,
-      label: r.paydown_drawer_extra_payment,
-      onCancel: m,
-      onSave: c,
-      primaryText: r.paydown_drawer_extra_payment,
-      secondaryText: I(n?.extra_payment, "0,0"),
-      zeroStateText: n?.extra_payment ? void 0 : r.add_extra_payment,
-      children: /* @__PURE__ */ e(
-        se,
-        {
-          amount: a,
-          autoFocus: !0,
-          error: d,
-          fullWidth: !0,
-          minAmount: 0,
-          setAmount: (h) => s(isNaN(Number(h)) ? a : Number(h)),
-          sx: { ".MuiTypography-body1": { p: 0 } }
-        }
-      )
-    }
-  );
+  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 } }
+    })
+  });
 }), Rt = () => {
-  const { debts: r } = w(), { totalMonthlyPayments: n } = ee(), { monthlyCashFlowProfile: o } = V(), t = n + Number(o?.extra_payment);
-  return /* @__PURE__ */ l(y, { sx: { backgroundColor: "background.default", height: "100%" }, children: [
-    /* @__PURE__ */ l(y, { p: 24, children: [
-      /* @__PURE__ */ l(y, { alignItems: "center", gap: 4, mb: 24, children: [
-        /* @__PURE__ */ e(i, { variant: "body1", children: r.paydown_drawer_mimimum_label }),
-        /* @__PURE__ */ e(xe, { bold: !0, variant: "h1", children: I(n, "0,0") }),
-        /* @__PURE__ */ e(i, { textAlign: "center", truncate: !1, variant: "body2", width: 208, children: r.paydown_drawer_minimum_info })
-      ] }),
-      /* @__PURE__ */ l(y, { children: [
-        /* @__PURE__ */ e(i, { variant: "h3", children: r.paydown_drawer_subtitle }),
-        /* @__PURE__ */ e(i, { truncate: !1, variant: "subtitle2", children: r.paydown_drawer_description })
-      ] })
-    ] }),
-    /* @__PURE__ */ e(y, { sx: { backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(Pt, {}) }),
-    /* @__PURE__ */ e(y, { flexDirection: "row-reverse", px: 24, py: 12, children: /* @__PURE__ */ l(y, { gap: 4, children: [
-      /* @__PURE__ */ e(i, { variant: "body2", children: r.paydown_drawer_total_payment }),
-      /* @__PURE__ */ e(i, { bold: !0, textAlign: "right", variant: "body1", children: I(t, "0,0") })
-    ] }) })
-  ] });
-}, Lt = C(Rt), Ft = ({ isOpen: r, onClose: n }) => {
-  const { debts: o } = w();
-  return /* @__PURE__ */ e(
-    ie,
-    {
-      ariaLabelClose: o.paydown_drawer_close_aria,
-      isOpen: r,
-      onClose: n,
-      title: o.paydown_drawer_title,
-      children: /* @__PURE__ */ e(Lt, {})
-    }
-  );
+  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, {})
+  });
 };
-function $t(r, n) {
-  const o = (t) => {
+function $t(a, n) {
+  const r = (t) => {
     if (typeof t == "number") return t;
     if (t === "!" || t === "✓") return 1 / 0;
     throw new Error("Unsupported value");
   };
-  return o(r) - o(n);
+  return r(a) - r(n);
 }
-function Ot(r) {
-  return r.is_paid_off ? "✓" : r.priority === void 0 || r.is_impossible ? "!" : r.priority;
+function Ot(a) {
+  return a.is_paid_off ? "✓" : a.priority === void 0 || a.is_impossible ? "!" : a.priority;
 }
-const Wt = (r) => {
+var Wt = (a) => {
   const n = {
     text: "#121417",
     background: "#FFB252"
   };
-  return r === "!" && (n.text = "#FFFFFF", n.background = "#DF320C"), r === "✓" && (n.text = "#FFFFFF", n.background = "#09A57F"), n;
-}, Gt = (r) => {
-  const n = String(r.formattedValue), o = Wt(n);
-  return /* @__PURE__ */ e(
-    le,
-    {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: 20,
-        // Adjust the size as needed
-        height: 20,
-        borderRadius: "50%",
-        backgroundColor: o.background,
-        marginLeft: "10px"
-      },
-      children: /* @__PURE__ */ e(i, { color: o.text, fontWeight: 700, variant: "body2", children: n })
-    }
-  );
-}, Ht = (r) => {
-  const n = r.row.account, o = nt[n.account_type];
-  return /* @__PURE__ */ l(y, { alignItems: "center", flexDirection: "row", children: [
-    /* @__PURE__ */ e(
-      Pe,
-      {
-        alt: `${n.institutionName}`,
-        institutionGuid: n.institution_guid || ""
-      }
-    ),
-    /* @__PURE__ */ l(y, { ml: 12, children: [
-      /* @__PURE__ */ e(i, { variant: "body2", children: n.name }),
-      /* @__PURE__ */ e(i, { variant: "caption", children: o })
-    ] })
-  ] });
-}, zt = ({
-  sx: r = {},
-  debts: n,
-  hoveredDebtGuid: o,
-  onHoverRow: t,
-  onClickRow: a
-}) => {
-  const s = j(), { onEvent: d } = k(), { isMobile: c } = ae(), { debts: m, common: h } = w(), [b, v] = f.useState([
-    { field: "priority", sort: "asc" }
-  ]), x = [
+  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 = [
     {
       field: "priority",
       headerName: m.table_column_priority,
-      renderHeader: H,
+      renderHeader: O,
       renderCell: Gt,
       sortComparator: $t,
       sortable: !0,
@@ -1087,7 +1224,7 @@ const Wt = (r) => {
     {
       field: "account",
       headerName: m.table_column_account,
-      renderHeader: H,
+      renderHeader: O,
       renderCell: Ht,
       sortable: !1,
       type: "custom",
@@ -1099,8 +1236,12 @@ const Wt = (r) => {
     {
       field: "balance",
       headerName: m.table_column_balance,
-      renderHeader: H,
-      renderCell: (_) => /* @__PURE__ */ e(i, { color: s.palette.text.primary, variant: "body2", children: I(_.value, "0,0") }),
+      renderHeader: O,
+      renderCell: (_) => /* @__PURE__ */ e(i, {
+        color: s.palette.text.primary,
+        variant: "body2",
+        children: A(_.value, "0,0")
+      }),
       sortable: !0,
       hideSortIcons: c,
       type: "number",
@@ -1112,8 +1253,12 @@ const Wt = (r) => {
     {
       field: "interest_rate",
       headerName: m.table_column_interest_rate,
-      renderHeader: H,
-      renderCell: (_) => /* @__PURE__ */ e(i, { color: s.palette.text.primary, variant: "body2", children: isNaN(_.value) ? "---" : `${Number(_.value).toFixed(2)}%` }),
+      renderHeader: O,
+      renderCell: (_) => /* @__PURE__ */ e(i, {
+        color: s.palette.text.primary,
+        variant: "body2",
+        children: isNaN(_.value) ? "---" : `${Number(_.value).toFixed(2)}%`
+      }),
       sortable: !0,
       hideSortIcons: c,
       type: "number",
@@ -1125,8 +1270,12 @@ const Wt = (r) => {
     {
       field: "projected_payoff_date",
       headerName: m.table_column_payoff_date,
-      renderHeader: H,
-      renderCell: (_) => /* @__PURE__ */ e(i, { color: s.palette.text.primary, variant: "body2", children: _.value ? J(_.value, Q.MONTH_SHORT_YEAR) : "---" }),
+      renderHeader: O,
+      renderCell: (_) => /* @__PURE__ */ e(i, {
+        color: s.palette.text.primary,
+        variant: "body2",
+        children: _.value ? Q(_.value, Z.MONTH_SHORT_YEAR) : "---"
+      }),
       sortable: !0,
       hideSortIcons: c,
       type: "number",
@@ -1138,8 +1287,12 @@ const Wt = (r) => {
     {
       field: "monthly_payment",
       headerName: m.table_column_amount_due,
-      renderHeader: H,
-      renderCell: (_) => /* @__PURE__ */ e(i, { color: s.palette.text.primary, variant: "body2", children: typeof _.value == "number" ? I(_.value, "0,0") : "---" }),
+      renderHeader: O,
+      renderCell: (_) => /* @__PURE__ */ e(i, {
+        color: s.palette.text.primary,
+        variant: "body2",
+        children: typeof _.value == "number" ? A(_.value, "0,0") : "---"
+      }),
       sortable: !0,
       hideSortIcons: c,
       type: "number",
@@ -1148,350 +1301,309 @@ const Wt = (r) => {
       minWidth: 122,
       flex: 0.6
     }
-  ], $ = [
-    ...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
-    }
-  ], L = f.useMemo(() => n.map((_, p) => ({
+  ], 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) => ({
     ..._,
-    id: p,
+    id: d,
     priority: Ot(_)
   })), [n]), N = (_) => {
-    const D = _.target.closest("[data-id]")?.getAttribute("data-id"), M = n[Number(D)];
-    t?.(M?.guid ?? "");
-  }, A = (_) => {
+    const d = _.target.closest("[data-id]")?.getAttribute("data-id"), f = n[Number(d)];
+    t?.(f?.guid ?? "");
+  }, D = (_) => {
     c || N(_);
-  }, E = (_) => {
+  }, P = (_) => {
     c && N(_);
-  }, Y = (_) => L.find((p) => p.guid === _)?.id;
-  return /* @__PURE__ */ e(
-    le,
-    {
-      sx: {
-        height: "auto",
-        width: "100%",
-        mt: "15px",
-        overflowX: "auto",
-        overflowY: "visible",
-        boxShadow: "none",
-        ...r
+  }, 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 });
       },
-      children: /* @__PURE__ */ e(
-        ot,
-        {
-          columns: c ? $ : 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: L,
-          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%)"
-            }
-          }
+      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
         }
-      )
-    }
-  );
-}, jt = ({
-  buttonText: r,
-  disabled: n,
-  isDesktop: o = !1,
-  isOpen: t,
-  onClick: a
-}) => {
+      },
+      sortModel: b,
+      sortingOrder: ["asc", "desc"],
+      sx: {
+        "& .chevron-header": { display: "none" },
+        [`& .MuiDataGrid-row[data-id="${V(r)}"]`]: {
+          backgroundColor: s.palette.mode === "light" ? "#f8f9fb" : "#1f2329",
+          filter: "brightness(98%)"
+        }
+      }
+    })
+  });
+}, jt = ({ buttonText: a, disabled: n, isDesktop: r = !1, isOpen: t, onClick: o }) => {
   const s = t ? "unfold_less" : "unfold_more";
-  return o ? /* @__PURE__ */ e(
-    ve,
-    {
-      "aria-controls": "prioritize-debts",
-      "aria-describedby": "prioritize-debts",
-      "aria-haspopup": !0,
-      "aria-label": "prioritize-debts",
-      disabled: n,
-      onClick: a,
-      startIcon: /* @__PURE__ */ e(ne, { name: s }),
-      sx: { justifyContent: "start" },
-      children: r
-    }
-  ) : /* @__PURE__ */ e(
-    at,
-    {
-      "aria-controls": "prioritize-debts",
-      "aria-describedby": "prioritize-debts",
-      "aria-haspopup": !0,
-      "aria-label": "prioritize-debts",
-      disabled: n,
-      onClick: a,
-      children: /* @__PURE__ */ e(ne, { name: s })
-    }
-  );
-}, Vt = C(({ buttonEl: r, onClose: n }) => {
-  const { onEvent: o } = k(), { debts: t } = w(), { selectedDebtPriority: a, setSelectedDebtPriority: s } = P(), d = !!r, c = [
+  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 = [
     {
-      priority: F.FASTEST_PAYOFF_FIRST,
+      priority: L.FASTEST_PAYOFF_FIRST,
       text: t.priority_sort_fastest_payoff
     },
     {
-      priority: F.HIGHEST_INTEREST,
+      priority: L.HIGHEST_INTEREST,
       text: t.priority_sort_highest_interest
     },
     {
-      priority: F.LOWEST_BALANCE,
+      priority: L.LOWEST_BALANCE,
       text: t.priority_sort_lowest_balance
     },
     {
-      priority: F.HIGHEST_BALANCE,
+      priority: L.HIGHEST_BALANCE,
       text: t.priority_sort_highest_balance
     }
   ], m = (h) => {
-    s(h), o(S.DEBTS_CLICK_PRIORITY, { debts_priority: h });
+    s(h), r(C.DEBTS_CLICK_PRIORITY, { debts_priority: h });
   };
-  return /* @__PURE__ */ e(
-    lt,
-    {
-      anchorEl: r,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "left"
-      },
-      id: "prioritize-debts",
-      onClose: n,
-      open: d,
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "left"
+  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"
+        }
       },
-      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);
+      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);
   }, m = () => {
-    d(null);
-  }, h = !!s, b = f.useMemo(() => ({
-    [F.FASTEST_PAYOFF_FIRST]: t.priority_sort_fastest_payoff,
-    [F.HIGHEST_INTEREST]: t.priority_sort_highest_interest,
-    [F.HIGHEST_BALANCE]: t.priority_sort_highest_balance,
-    [F.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,
-    {
+    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, {
       "aria-controls": "extra-paydown",
       "aria-describedby": "extra-paydown",
       "aria-haspopup": !0,
       "aria-label": "extra-paydown",
-      disabled: r,
+      disabled: a,
       onClick: n,
       sx: { justifyContent: "start" },
-      children: T(d, I(s, "0,0"))
-    }
-  ) });
-}), Ut = ({ onBackClick: r, onMenuClick: n, sx: o }) => {
-  const { isDesktop: t, isMobile: a } = ae(), { connect: s, debts: d } = w(), { onEvent: c } = k(), {
-    config: { show_connections_widget_in_master: m }
-  } = He(), { isInitialized: h } = ze(), { setSelectedAccount: b } = Ve(), { selectedDebtPriority: v, setSelectedDebtChartData: x } = P(), {
-    isAccountDataLoaded: $,
-    loadAccountData: L,
-    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({
+      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({
     widgetName: "DebtsWidget",
-    isLoaded: E
+    isLoaded: P
   });
-  const q = f.useMemo(() => {
-    const O = _?.extra_payment ?? 0;
-    return $e(p, v, O);
-  }, [p, v, _]);
-  f.useEffect(() => {
-    $ || L().finally(), c(S.DEBTS_VIEW);
-  }, []), f.useEffect(() => {
-    h && Y().finally();
+  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();
   }, [h]);
-  const pe = (O) => Se(O), ue = () => {
-    const O = A.find((oe) => oe.guid === U), he = q.find((oe) => oe.guid === U);
-    O && b(O), he && x(he), D(!0);
-  }, Te = () => c(S.DEBTS_CLICK_FILTER), Ee = () => {
-    ce(!0), c(S.DEBTS_CLICK_SNOWBALL_CTA);
+  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);
   }, Ie = () => {
-    B(!0), c(S.DEBTS_CLICK_PAYDOWN);
+    R(!0), c(C.DEBTS_CLICK_PAYDOWN);
   };
-  if (!h || !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);
+  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);
 export {
   De as DebtsChart,
   zt as DebtsTable,
-  Hr as DebtsWidget
+  Ir as DebtsWidget
 };