@mx-cartographer/experiences 7.0.41 → 7.0.43-alpha.san1

package/dist/debts/index.es.js

@@ -1,29 +1,29 @@
 import { jsx as e, jsxs as s, Fragment as L } from "react/jsx-runtime";
-import g from "react";
+import x from "react";
 import { observer as S } from "mobx-react-lite";
-import x from "@mui/material/Stack";
+import g from "@mui/material/Stack";
 import { useTheme as j, Card as be, Stack as _, Box as O } from "@mui/material";
-import { Text as l, H3 as De, InstitutionLogo as ve, Icon as ee } from "@mxenabled/mxui";
+import { Text as l, H3 as ve, InstitutionLogo as De, Icon as ee } from "@mxenabled/mxui";
 import { intervalToDuration as Te, formatDuration as Ae } from "date-fns";
 import { addMonths as le } from "date-fns/addMonths";
 import { fromUnixTime as se } from "date-fns/fromUnixTime";
 import { getUnixTime as ce } from "date-fns/getUnixTime";
 import { D as M, M as Ee, I as Ie } from "../DebtsStore-3kGPnxRQ.mjs";
-import { a as Nr } from "../DebtsStore-3kGPnxRQ.mjs";
+import { a as Fr } from "../DebtsStore-3kGPnxRQ.mjs";
 import { f as P, a as Be } from "../NumberFormatting-CtWHhyBX.mjs";
 import { f as K, D as U } from "../Dialog-CWW597AF.mjs";
 import { G as Me, x as q, u as C, k as z, f as k, c as Z, a as Pe } from "../hooks-BAAimqdq.mjs";
 import { u as X } from "../useScreenSize-B6JyS_Lj.mjs";
 import { D as te } from "../Drawer-kEE73B87.mjs";
 import { b as A } from "../Localization-2MODESHW.mjs";
-import { A as ke, u as Fe } from "../AccountDetailsHeader-Bt8O2raZ.mjs";
-import Ne from "@mui/material/Card";
+import { A as ke, u as Ne } from "../AccountDetailsHeader-B3DiwvB7.mjs";
+import Fe from "@mui/material/Card";
 import Re from "@mui/material/CardContent";
 import Le from "@mui/material/CardHeader";
 import { LineChart as $e } from "@mui/x-charts";
 import re from "@mui/material/Box";
 import { useTheme as He } from "@mui/material/styles";
-import { A as T, W as Oe } from "../WidgetContainer-ztkGgdIH.mjs";
+import { A as T, W as Oe } from "../WidgetContainer-Beedl3IT.mjs";
 import de from "@mui/material/Tab";
 import We from "@mui/material/Tabs";
 import _e from "@mui/material/List";
@@ -45,17 +45,17 @@ import Ue from "@mui/material/IconButton";
 import qe from "@mui/material/ListItem";
 import Ze from "@mui/material/Popover";
 import { L as Je } from "../Loader-DUaFpDGv.mjs";
-const Qe = (a, o = 0, r = 0) => {
+const Qe = (a, n = 0, r = 0) => {
   if (r === 0) return 0;
-  const t = o / (Ee * Ie);
+  const t = n / (Ee * Ie);
   return Math.ceil(
     t === 0 ? a / r : -Math.log(1 - t * a / r) / Math.log(1 + t)
   );
-}, et = (a, o, r, t, n) => {
+}, et = (a, n, r, t, o) => {
   const i = [];
   if (r === 0) {
     for (let d = 0; d < a; d++) {
-      const c = o - t * (d + 1), h = o - t * d, m = c >= 0 ? t : h;
+      const c = n - t * (d + 1), h = n - t * d, m = c >= 0 ? t : h;
       i.push({
         balance: c >= 0 ? c : 0,
         interest: r,
@@ -63,7 +63,7 @@ const Qe = (a, o = 0, r = 0) => {
         principal: m,
         timestamp: ce(
           le(
-            se(n),
+            se(o),
             // convert seconds → Date
             d + 1
             // add (index + 1) months
@@ -75,88 +75,88 @@ const Qe = (a, o = 0, r = 0) => {
   }
   const p = r / 1200;
   for (let d = 0; d < a; d++) {
-    const c = ce(le(se(n), d + 1)), h = Math.pow(1 + p, d), m = o * h - t * ((h - 1) / p), y = Math.pow(1 + p, d + 1), f = o * y - t * ((y - 1) / p), D = t + Math.min(f, 0), E = m * p;
+    const c = ce(le(se(o), d + 1)), h = Math.pow(1 + p, d), m = n * h - t * ((h - 1) / p), y = Math.pow(1 + p, d + 1), f = n * y - t * ((y - 1) / p), v = t + Math.min(f, 0), E = m * p;
     i.push({
       balance: Math.max(0, f),
       interest: E,
-      payment: D,
-      principal: D - E,
+      payment: v,
+      principal: v - E,
       timestamp: c
     });
   }
   return i;
 }, tt = (a) => (a[a.length - 1] || {}).timestamp, rt = (a) => {
-  const { monthly_payment: o, interest_rate: r, balance: t, payment_due_date: n } = a, i = Qe(t, r ?? 0, o ?? 0), p = et(
+  const { monthly_payment: n, interest_rate: r, balance: t, payment_due_date: o } = a, i = Qe(t, r ?? 0, n ?? 0), p = et(
     i,
     t,
     r ?? 0,
-    o ?? 0,
-    n
+    n ?? 0,
+    o
   ), d = tt(p);
   return {
     ...a,
     minimumFinalPayment: d,
     minimumPayments: p
   };
-}, ge = (a, o) => {
+}, xe = (a, n) => {
   const [r, t] = a.reduce(
-    ([n, i], p) => (p.is_paid_off || p.is_impossible ? i.push({ ...p, minimumPayments: [] }) : n.push(rt(p)), [n, i]),
+    ([o, i], p) => (p.is_paid_off || p.is_impossible ? i.push({ ...p, minimumPayments: [] }) : o.push(rt(p)), [o, i]),
     [[], []]
   );
-  switch (o) {
+  switch (n) {
     case M.FASTEST_PAYOFF_FIRST:
-      r.sort((n, i) => (n.minimumFinalPayment ?? 0) - (i.minimumFinalPayment ?? 0));
+      r.sort((o, i) => (o.minimumFinalPayment ?? 0) - (i.minimumFinalPayment ?? 0));
       break;
     case M.HIGHEST_INTEREST:
-      r.sort((n, i) => (i.interest_rate ?? 0) - (n.interest_rate ?? 0));
+      r.sort((o, i) => (i.interest_rate ?? 0) - (o.interest_rate ?? 0));
       break;
     case M.LOWEST_BALANCE:
-      r.sort((n, i) => n.balance - i.balance);
+      r.sort((o, i) => o.balance - i.balance);
       break;
     case M.HIGHEST_BALANCE:
-      r.sort((n, i) => i.balance - n.balance);
+      r.sort((o, i) => i.balance - o.balance);
       break;
     default:
-      r.sort((n, i) => n.balance - i.balance);
+      r.sort((o, i) => o.balance - i.balance);
   }
   a.splice(0, a.length, ...r, ...t);
 };
-function at(a, o, r = 0) {
+function at(a, n, r = 0) {
   const t = a.map((m) => ({ ...m })).filter(
     (m) => m.interest_rate !== void 0 && m.monthly_payment !== void 0 && !m.is_paid_off
   );
-  ge(t, o);
-  let n = 0, i = 0;
+  xe(t, n);
+  let o = 0, i = 0;
   const p = /* @__PURE__ */ new Date(), d = /* @__PURE__ */ new Date();
   for (; t.some((m) => m.balance >= 0.01 && !m.is_impossible); ) {
     let m = !1;
     for (const [y, f] of t.entries()) {
       if (f.balance <= 0.01 || f.is_impossible) continue;
-      const E = (f.interest_rate ?? 0) / 100 / 12, v = f.balance * E;
+      const E = (f.interest_rate ?? 0) / 100 / 12, D = f.balance * E;
       let u = f.monthly_payment ?? 0;
-      y === 0 && r && (u += r), f.balance += v;
+      y === 0 && r && (u += r), f.balance += D;
       const I = Math.min(f.balance, u + i);
-      if (I <= v) {
+      if (I <= D) {
         f.is_impossible = !0;
         continue;
       }
-      f.balance -= I, f.balance = f.balance < 0.01 ? 0 : f.balance, n += v, f.balance <= 0 && (i += u), I > 0 && (m = !0);
+      f.balance -= I, f.balance = f.balance < 0.01 ? 0 : f.balance, o += D, f.balance <= 0 && (i += u), I > 0 && (m = !0);
     }
     m && d.setMonth(d.getMonth() + 1);
   }
   const c = t.some((m) => m.is_impossible && m.balance > 0), h = Te({ start: p, end: d });
   return {
-    payoffSavings: c ? "N/A" : P(n, "0,0.00"),
+    payoffSavings: c ? "N/A" : P(o, "0,0.00"),
     payoffDate: c ? "Never" : K(d, U.MONTH_YEAR),
     payoffDuration: c ? "Stagnant" : Ae(h, { format: ["years", "months"] }) || "0 months"
   };
 }
 const R = () => {
-  if (!g.useContext(Me))
+  if (!x.useContext(Me))
     throw new Error("useCateUiStore() must be used within the GlobalDataContext");
   return q().uiStore;
-}, ot = ({ debts: a, onClickCta: o, sx: r }) => {
-  const t = j(), { isMobile: n } = X(), { debts: i } = C(), { selectedDebtPriority: p } = R(), { monthlyCashFlowProfile: d } = z(), { payoffDate: c, payoffSavings: h, payoffDuration: m } = g.useMemo(() => {
+}, nt = ({ debts: a, onClickCta: n, sx: r }) => {
+  const t = j(), { isMobile: o } = X(), { debts: i } = C(), { selectedDebtPriority: p } = R(), { monthlyCashFlowProfile: d } = z(), { payoffDate: c, payoffSavings: h, payoffDuration: m } = x.useMemo(() => {
     const y = d?.extra_payment ?? 0;
     return at(a, p, y);
   }, [a, p, d]);
@@ -165,7 +165,7 @@ const R = () => {
     {
       sx: {
         boxShadow: t.shadows[2],
-        width: n ? "100%" : "186px",
+        width: o ? "100%" : "186px",
         minWidth: "186px",
         ...r
       },
@@ -173,7 +173,7 @@ const R = () => {
         /* @__PURE__ */ s(
           _,
           {
-            gap: n ? "4px" : "0",
+            gap: o ? "4px" : "0",
             sx: {
               borderBottom: "1px solid",
               borderBottomColor: t.palette.grey[300],
@@ -185,11 +185,11 @@ const R = () => {
             ]
           }
         ),
-        /* @__PURE__ */ s(_, { gap: n ? "4px" : "0", children: [
+        /* @__PURE__ */ s(_, { gap: o ? "4px" : "0", children: [
           /* @__PURE__ */ e(l, { bold: !0, variant: "Small", children: h }),
           /* @__PURE__ */ e(l, { sx: { whiteSpace: "normal" }, variant: "XSmall", children: i.snowball_card_amount_description })
         ] }),
-        /* @__PURE__ */ s(_, { gap: n ? "4px" : "0", children: [
+        /* @__PURE__ */ s(_, { gap: o ? "4px" : "0", children: [
           /* @__PURE__ */ e(l, { bold: !0, variant: "Small", children: m }),
           /* @__PURE__ */ e(l, { variant: "XSmall", children: i.snowball_card_duration_description })
         ] }),
@@ -198,7 +198,7 @@ const R = () => {
           {
             bold: !0,
             color: t.palette.primary.main,
-            onClick: o,
+            onClick: n,
             sx: { cursor: "pointer" },
             variant: "Small",
             children: i.snowball_card_cta
@@ -207,14 +207,14 @@ const R = () => {
       ] })
     }
   );
-}, nt = S(ot), it = ({ isOpen: a, onClose: o }) => {
-  const r = j(), { debts: t } = C(), [n, i] = g.useState(!1);
+}, ot = S(nt), it = ({ isOpen: a, onClose: n }) => {
+  const r = j(), { debts: t } = C(), [o, i] = x.useState(!1);
   return /* @__PURE__ */ e(
     te,
     {
       ariaLabelClose: "",
       isOpen: a,
-      onClose: o,
+      onClose: n,
       title: t.snowball_drawer_title,
       children: /* @__PURE__ */ s(_, { bgcolor: r.palette.background.default, height: "100%", children: [
         /* @__PURE__ */ s(_, { alignItems: "center", px: 24, py: 24, children: [
@@ -231,7 +231,7 @@ const R = () => {
               {
                 color: r.palette.secondary.main,
                 mb: 8,
-                sx: { whiteSpace: n ? "normal" : "nowrap" },
+                sx: { whiteSpace: o ? "normal" : "nowrap" },
                 variant: "ParagraphSmall",
                 children: t.snowball_drawer_answer
               }
@@ -241,10 +241,10 @@ const R = () => {
               {
                 bold: !0,
                 color: r.palette.primary.main,
-                onClick: () => i(!n),
+                onClick: () => i(!o),
                 sx: { cursor: "pointer" },
                 variant: "Small",
-                children: n ? t.snowball_drawer_less : t.snowball_drawer_more
+                children: o ? t.snowball_drawer_less : t.snowball_drawer_more
               }
             )
           ] })
@@ -569,20 +569,20 @@ const R = () => {
     }
   );
 }, lt = S(it), st = "#FF7B08";
-function ct(a, o) {
-  const [r, t, n] = a.replace(/^#/, "").match(/.{1,2}/g).map((p) => parseInt(p, 16)), i = [
-    Math.max(0, Math.min(255, Math.round(r * o))),
-    Math.max(0, Math.min(255, Math.round(t * o))),
-    Math.max(0, Math.min(255, Math.round(n * o)))
+function ct(a, n) {
+  const [r, t, o] = a.replace(/^#/, "").match(/.{1,2}/g).map((p) => parseInt(p, 16)), i = [
+    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(o * n)))
   ];
   return `rgb(${i[0]}, ${i[1]}, ${i[2]})`;
 }
-const xe = ({
+const ge = ({
   sx: a,
-  height: o = 500,
+  height: n = 500,
   width: r,
   debts: t,
-  hoveredDebtGuid: n,
+  hoveredDebtGuid: o,
   onClickArea: i,
   onHoverArea: p
 }) => {
@@ -591,27 +591,27 @@ const xe = ({
       h.flatMap((b) => b.dataset.map((w) => new Date(w.x).getTime()))
     )
   ].sort((b, w) => b - w).map((b) => new Date(b)), y = h.map((b) => {
-    const w = new Map(b.dataset.map((N) => [new Date(N.x).getTime(), N.y]));
+    const w = new Map(b.dataset.map((F) => [new Date(F.x).getTime(), F.y]));
     let B = w.get(m[0].getTime()) ?? 0;
-    const F = m.map((N) => {
-      const $ = w.get(N.getTime()) ?? B;
-      return B = $, { x: N, y: $ };
+    const N = m.map((F) => {
+      const $ = w.get(F.getTime()) ?? B;
+      return B = $, { x: F, y: $ };
     });
-    return { ...b, dataset: F };
+    return { ...b, dataset: N };
   }), f = y.reduce(
     (b, w) => b + (w.dataset[0]?.y ?? 0),
     0
-  ), D = m.map((b, w) => {
-    const B = w / (m.length - 1), F = f * (1 - B);
-    return { x: b, y: F };
-  }), E = Math.ceil(f / 100) * 100, v = m, u = y.map((b, w) => {
-    const B = 1 - w / y.length * 0.5, F = ct(st, B);
+  ), v = m.map((b, w) => {
+    const B = w / (m.length - 1), N = f * (1 - B);
+    return { x: b, y: N };
+  }), E = Math.ceil(f / 100) * 100, D = m, u = y.map((b, w) => {
+    const B = 1 - w / y.length * 0.5, N = ct(st, B);
     return {
       id: `debt-${w}`,
       guid: b.guid,
       label: b.name,
-      data: b.dataset.map((N) => N.y),
-      color: F,
+      data: b.dataset.map((F) => F.y),
+      color: N,
       curve: "linear",
       type: "line",
       area: !0,
@@ -622,7 +622,7 @@ const xe = ({
   u.push({
     id: "payoff-line",
     label: "Payoff Line",
-    data: D.map((b) => b.y),
+    data: v.map((b) => b.y),
     color: d.palette.grey[700],
     curve: "linear",
     type: "line",
@@ -651,10 +651,10 @@ const xe = ({
         {
           axisHighlight: { x: "none" },
           disableLineItemHighlight: !0,
-          height: o,
+          height: n,
           onAreaClick: (b, w) => {
             i?.();
-            const B = u.find((F) => F.id === w.seriesId);
+            const B = u.find((N) => N.id === w.seriesId);
             c(T.DEBTS_CLICK_CHART_AREA, { account_guid: B?.guid });
           },
           onHighlightChange: (b) => {
@@ -685,19 +685,22 @@ const xe = ({
               strokeDasharray: "10 5",
               strokeWidth: 1
             },
-            [`& .MuiLineElement-series-debt-${I(n ?? "0")}`]: {
+            [`& .MuiLineElement-series-debt-${I(o ?? "0")}`]: {
               opacity: 1
             },
-            [`& .MuiAreaElement-series-debt-${I(n ?? "0")}`]: {
+            [`& .MuiAreaElement-series-debt-${I(o ?? "0")}`]: {
               opacity: 1
             },
+            "& .MuiChartsAxis-tickLabel > tspan": {
+              fontFamily: d.typography.Small.fontFamily
+            },
             ...a
           },
           tooltip: { trigger: "none" },
           width: r,
           xAxis: [
             {
-              data: v,
+              data: D,
               scaleType: "time",
               min: m[0],
               disableTicks: !0,
@@ -717,10 +720,10 @@ const xe = ({
     }
   );
 }, dt = () => {
-  const a = j(), { debts: o } = C(), { selectedDebtChartData: r } = R();
+  const a = j(), { debts: n } = C(), { selectedDebtChartData: r } = R();
   return /* @__PURE__ */ s(L, { children: [
     /* @__PURE__ */ s(
-      Ne,
+      Fe,
       {
         sx: {
           "& .MuiCardContent-root:last-child": {
@@ -728,8 +731,8 @@ const xe = ({
           }
         },
         children: [
-          /* @__PURE__ */ e(Le, { sx: { pb: 0 }, title: /* @__PURE__ */ e(De, { sx: { pb: 4 }, children: o.details_chart_title }) }),
-          /* @__PURE__ */ e(Re, { sx: { p: 0 }, children: /* @__PURE__ */ e(xe, { debts: [r], height: 250 }) })
+          /* @__PURE__ */ e(Le, { sx: { pb: 0 }, title: /* @__PURE__ */ e(ve, { sx: { pb: 4 }, children: n.details_chart_title }) }),
+          /* @__PURE__ */ e(Re, { sx: { p: 0 }, children: /* @__PURE__ */ e(ge, { debts: [r], height: 250 }) })
         ]
       }
     ),
@@ -739,13 +742,13 @@ const xe = ({
         color: a.palette.text.secondary,
         sx: { whiteSpace: "normal", textAlign: "center", px: 8, py: 12 },
         variant: "Small",
-        children: o.details_chart_description
+        children: n.details_chart_description
       }
     )
   ] });
 }, pt = S(dt), mt = () => {
-  const a = j(), { onEvent: o } = k(), { debts: r } = C(), { selectedDebtChartData: t, showCompleted: n, showError: i } = R();
-  return g.useEffect(() => o(T.DEBT_SCHEDULE_VIEW), []), /* @__PURE__ */ e(_e, { children: i || n ? /* @__PURE__ */ e(
+  const a = j(), { onEvent: n } = k(), { debts: r } = C(), { selectedDebtChartData: t, showCompleted: o, showError: i } = R();
+  return x.useEffect(() => n(T.DEBT_SCHEDULE_VIEW), []), /* @__PURE__ */ e(_e, { children: i || o ? /* @__PURE__ */ e(
     l,
     {
       color: a.palette.secondary.main,
@@ -755,12 +758,12 @@ const xe = ({
       children: i ? r.schedule_error_message : r.schedule_complete_message
     }
   ) : /* @__PURE__ */ s(L, { children: [
-    /* @__PURE__ */ s(x, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
+    /* @__PURE__ */ s(g, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
       /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: r.schedule_month_heading }),
       /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: r.schedule_amount_heading })
     ] }),
-    t.dataset.slice(1).map(({ x: p, y: d, payment: c }) => /* @__PURE__ */ e(x, { bgcolor: a.palette.background.paper, children: /* @__PURE__ */ e(x, { alignItems: "center", flexDirection: "row", pl: 24, children: /* @__PURE__ */ s(
-      x,
+    t.dataset.slice(1).map(({ x: p, y: d, payment: c }) => /* @__PURE__ */ e(g, { bgcolor: a.palette.background.paper, children: /* @__PURE__ */ e(g, { alignItems: "center", flexDirection: "row", pl: 24, children: /* @__PURE__ */ s(
+      g,
       {
         sx: {
           borderBottom: `1px solid ${a.palette.border.light}`,
@@ -770,11 +773,11 @@ const xe = ({
           pr: 24
         },
         children: [
-          /* @__PURE__ */ s(x, { flexGrow: 1, children: [
+          /* @__PURE__ */ s(g, { flexGrow: 1, children: [
             /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: K(p, U.MONTH_YEAR) }),
             /* @__PURE__ */ e(l, { color: a.palette.secondary.main, variant: "XSmall", children: r.schedule_month_label })
           ] }),
-          /* @__PURE__ */ s(x, { children: [
+          /* @__PURE__ */ s(g, { children: [
             /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: P(d, "0,0.00") }),
             /* @__PURE__ */ e(
               l,
@@ -790,8 +793,8 @@ const xe = ({
         ]
       }
     ) }) }, String(p))),
-    /* @__PURE__ */ e(x, { bgcolor: "background.paper", children: /* @__PURE__ */ s(
-      x,
+    /* @__PURE__ */ e(g, { bgcolor: "background.paper", children: /* @__PURE__ */ s(
+      g,
       {
         sx: {
           alignItems: "center",
@@ -808,8 +811,8 @@ const xe = ({
     ) })
   ] }) });
 }, ht = S(mt), ut = S(({ debt: a }) => {
-  const { debts: o } = C(), { updateAccount: r } = Z(), { onEvent: t } = k(), [n, i] = g.useState(a.interest_rate ?? 0), p = n < 0, d = async () => {
-    await r({ ...a.account, interest_rate: n }), a.interest_rate = n, t(T.DEBTS_SAVE_RATE_ACTION, { account_guid: a.guid });
+  const { debts: n } = C(), { updateAccount: r } = Z(), { onEvent: t } = k(), [o, i] = x.useState(a.interest_rate ?? 0), p = o < 0, d = async () => {
+    await r({ ...a.account, interest_rate: o }), a.interest_rate = o, t(T.DEBTS_SAVE_RATE_ACTION, { account_guid: a.guid });
   }, c = () => {
     setTimeout(() => {
       i(a.interest_rate ?? 0);
@@ -819,12 +822,12 @@ const xe = ({
     J,
     {
       isSaveDisabled: p,
-      label: `${o.details_interest_rate} (%)`,
+      label: `${n.details_interest_rate} (%)`,
       onCancel: c,
       onSave: d,
-      primaryText: o.details_interest_rate,
+      primaryText: n.details_interest_rate,
       secondaryText: Be(Number(a.interest_rate) / 100),
-      zeroStateText: a.interest_rate ? void 0 : o.add_interest_rate,
+      zeroStateText: a.interest_rate ? void 0 : n.add_interest_rate,
       children: /* @__PURE__ */ e(
         Xe,
         {
@@ -832,14 +835,14 @@ const xe = ({
           fullWidth: !0,
           onChange: (h) => i(isNaN(parseFloat(h.target.value)) ? 0 : parseFloat(h.target.value)),
           type: "number",
-          value: n
+          value: o
         }
       )
     }
   );
 }), bt = S(({ debt: a }) => {
-  const { debts: o } = C(), { updateAccount: r } = Z(), { onEvent: t } = k(), [n, i] = g.useState(a.monthly_payment ?? 0), p = n < 0 || n > 9999999999e-2, d = async () => {
-    await r({ ...a.account, minimum_payment: n }), a.monthly_payment = n, t(T.DEBTS_SAVE_PAYMENT_ACTION, { account_guid: a.guid });
+  const { debts: n } = C(), { updateAccount: r } = Z(), { onEvent: t } = k(), [o, i] = x.useState(a.monthly_payment ?? 0), p = o < 0 || o > 9999999999e-2, d = async () => {
+    await r({ ...a.account, minimum_payment: o }), a.monthly_payment = o, t(T.DEBTS_SAVE_PAYMENT_ACTION, { account_guid: a.guid });
   }, c = () => {
     setTimeout(() => {
       i(a.monthly_payment ?? 0);
@@ -849,29 +852,29 @@ const xe = ({
     J,
     {
       isSaveDisabled: p,
-      label: o.details_monthly_payment,
+      label: n.details_monthly_payment,
       onCancel: c,
       onSave: d,
-      primaryText: o.details_monthly_payment,
+      primaryText: n.details_monthly_payment,
       secondaryText: P(a.monthly_payment, "0,0"),
-      zeroStateText: a.monthly_payment ? void 0 : o.add_monthly_payment,
+      zeroStateText: a.monthly_payment ? void 0 : n.add_monthly_payment,
       children: /* @__PURE__ */ e(
         ae,
         {
-          amount: n,
+          amount: o,
           autoFocus: !0,
           error: p,
           fullWidth: !0,
           minAmount: 0,
-          setAmount: (h) => i(isNaN(Number(h)) ? n : Number(h)),
+          setAmount: (h) => i(isNaN(Number(h)) ? o : Number(h)),
           sx: { ".MuiTypography-Body": { p: 0 } }
         }
       )
     }
   );
 }), _t = S(({ debt: a }) => {
-  const { debts: o } = C(), { updateAccount: r } = Z(), { onEvent: t } = k(), [n, i] = g.useState(a.original_balance ?? 0), p = n < 0 || n > 9999999999e-2, d = async () => {
-    await r({ ...a.account, original_balance: n }), a.original_balance = n, t(T.DEBTS_SAVE_BALANCE_ACTION, { account_guid: a.guid });
+  const { debts: n } = C(), { updateAccount: r } = Z(), { onEvent: t } = k(), [o, i] = x.useState(a.original_balance ?? 0), p = o < 0 || o > 9999999999e-2, d = async () => {
+    await r({ ...a.account, original_balance: o }), a.original_balance = o, t(T.DEBTS_SAVE_BALANCE_ACTION, { account_guid: a.guid });
   }, c = () => {
     setTimeout(() => {
       i(a.original_balance ?? 0);
@@ -881,52 +884,52 @@ const xe = ({
     J,
     {
       isSaveDisabled: p,
-      label: o.details_original_balance,
+      label: n.details_original_balance,
       onCancel: c,
       onSave: d,
-      primaryText: o.details_original_balance,
+      primaryText: n.details_original_balance,
       secondaryText: P(a.original_balance, "0,0"),
-      zeroStateText: a.original_balance ? void 0 : o.add_original_balance,
+      zeroStateText: a.original_balance ? void 0 : n.add_original_balance,
       children: /* @__PURE__ */ e(
         ae,
         {
-          amount: n,
+          amount: o,
           autoFocus: !0,
           error: p,
           fullWidth: !0,
           minAmount: 0,
-          setAmount: (h) => i(isNaN(Number(h)) ? n : Number(h)),
+          setAmount: (h) => i(isNaN(Number(h)) ? o : Number(h)),
           sx: { ".MuiTypography-Body": { p: 0 } }
         }
       )
     }
   );
 }), yt = () => {
-  const { onEvent: a } = k(), { selectedDebtChartData: o } = R();
-  return g.useEffect(() => a(T.DEBT_DETAILS_VIEW), []), /* @__PURE__ */ s(x, { bgcolor: "background.paper", children: [
-    o?.goal && /* @__PURE__ */ s(L, { children: [
-      /* @__PURE__ */ e(Ge, { goal: o.goal }),
+  const { onEvent: a } = k(), { selectedDebtChartData: n } = R();
+  return x.useEffect(() => a(T.DEBT_DETAILS_VIEW), []), /* @__PURE__ */ s(g, { bgcolor: "background.paper", children: [
+    n?.goal && /* @__PURE__ */ s(L, { children: [
+      /* @__PURE__ */ e(Ge, { goal: n.goal }),
       /* @__PURE__ */ e(W, {}),
-      /* @__PURE__ */ e(je, { goal: o.goal }),
+      /* @__PURE__ */ e(je, { goal: n.goal }),
       /* @__PURE__ */ e(W, {}),
-      /* @__PURE__ */ e(ze, { goal: o.goal }),
+      /* @__PURE__ */ e(ze, { goal: n.goal }),
       /* @__PURE__ */ e(W, {})
     ] }),
-    !o?.goal && o?.account && /* @__PURE__ */ s(L, { children: [
-      /* @__PURE__ */ e(bt, { debt: o }),
+    !n?.goal && n?.account && /* @__PURE__ */ s(L, { children: [
+      /* @__PURE__ */ e(bt, { debt: n }),
       /* @__PURE__ */ e(W, {}),
-      /* @__PURE__ */ e(ut, { debt: o }),
+      /* @__PURE__ */ e(ut, { debt: n }),
       /* @__PURE__ */ e(W, {}),
-      /* @__PURE__ */ e(_t, { debt: o }),
+      /* @__PURE__ */ e(_t, { debt: n }),
       /* @__PURE__ */ e(W, {})
     ] })
   ] });
-}, ft = S(yt), gt = ({ setTabValue: a, sx: o }) => {
-  const { debts: r } = C(), { showError: t, showCompleted: n } = R();
-  return g.useEffect(() => {
+}, ft = S(yt), xt = ({ setTabValue: a, sx: n }) => {
+  const { debts: r } = C(), { showError: t, showCompleted: o } = R();
+  return x.useEffect(() => {
     t && a(1);
-  }, [t]), !t && !n ? /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ s(x, { gap: 16, children: [
-    /* @__PURE__ */ e(he, { sx: { my: 16, mx: 24, ...o }, children: /* @__PURE__ */ s(
+  }, [t]), !t && !o ? /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ s(g, { gap: 16, children: [
+    /* @__PURE__ */ e(he, { sx: { my: 16, mx: 24, ...n }, children: /* @__PURE__ */ s(
       pe,
       {
         icon: t ? /* @__PURE__ */ e(Ve, { filled: !0 }) : /* @__PURE__ */ e(ye, { color: "success", filled: !0 }),
@@ -947,7 +950,7 @@ const xe = ({
         ]
       }
     ) }),
-    t && /* @__PURE__ */ e(he, { sx: { mb: 16, mt: 100, mx: 24, ...o }, children: /* @__PURE__ */ s(
+    t && /* @__PURE__ */ e(he, { sx: { mb: 16, mt: 100, mx: 24, ...n }, children: /* @__PURE__ */ s(
       pe,
       {
         icon: /* @__PURE__ */ e(L, {}),
@@ -966,16 +969,16 @@ const xe = ({
       }
     ) })
   ] });
-}, xt = S(gt), wt = () => {
-  const { debts: a } = C(), { showError: o, showCompleted: r } = R(), [t, n] = g.useState(0);
+}, gt = S(xt), wt = () => {
+  const { debts: a } = C(), { showError: n, showCompleted: r } = R(), [t, o] = x.useState(0);
   return /* @__PURE__ */ s(L, { children: [
-    (o || r) && /* @__PURE__ */ e(xt, { setTabValue: n, sx: { mt: -24 } }),
+    (n || r) && /* @__PURE__ */ e(gt, { setTabValue: o, sx: { mt: -24 } }),
     /* @__PURE__ */ s(
       We,
       {
         "aria-label": a.details_tabs_aria_label,
         centered: !0,
-        onChange: (i, p) => n(p),
+        onChange: (i, p) => o(p),
         textColor: "primary",
         value: t,
         variant: "fullWidth",
@@ -1002,29 +1005,29 @@ const xe = ({
     /* @__PURE__ */ e(ue, { index: 0, name: "debt-schedule", value: t, children: /* @__PURE__ */ e(ht, {}) }),
     /* @__PURE__ */ e(ue, { index: 1, name: "debt-details", value: t, children: /* @__PURE__ */ e(ft, {}) })
   ] });
-}, Ct = S(wt), St = ({ isOpen: a, onClose: o }) => {
-  const { debts: r } = C(), { showError: t, showCompleted: n } = R(), i = t || n ? /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ e(pt, {});
+}, Ct = S(wt), St = ({ isOpen: a, onClose: n }) => {
+  const { debts: r } = C(), { showError: t, showCompleted: o } = R(), i = t || o ? /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ e(pt, {});
   return /* @__PURE__ */ e(
     te,
     {
       ariaLabelClose: r.details_close_aria,
       isOpen: a,
-      onClose: o,
+      onClose: n,
       title: r.details_title,
-      children: /* @__PURE__ */ s(x, { bgcolor: "background.default", children: [
+      children: /* @__PURE__ */ s(g, { bgcolor: "background.default", children: [
         /* @__PURE__ */ e(ke, { customDetailsChart: i }),
         /* @__PURE__ */ e(Ct, {})
       ] })
     }
   );
-}, Dt = S(() => {
-  const { debts: a } = C(), { monthlyCashFlowProfile: o, updateMonthlyCashFlowProfile: r } = z(), { onEvent: t } = k(), [n, i] = g.useState(o?.extra_payment ?? 0), p = n < 0 || n > 9999999999e-2, d = async () => {
-    o && (await r({ ...o, extra_payment: n }), o.extra_payment = n, t(T.DEBTS_SAVE_PAYDOWN_ACTION, {
-      user_guid: o?.user_guid
+}, vt = S(() => {
+  const { debts: a } = C(), { monthlyCashFlowProfile: n, updateMonthlyCashFlowProfile: r } = z(), { onEvent: t } = k(), [o, i] = x.useState(n?.extra_payment ?? 0), p = o < 0 || o > 9999999999e-2, d = async () => {
+    n && (await r({ ...n, extra_payment: o }), n.extra_payment = o, t(T.DEBTS_SAVE_PAYDOWN_ACTION, {
+      user_guid: n?.user_guid
     }));
   }, c = () => {
     setTimeout(() => {
-      i(o?.extra_payment ?? 0);
+      i(n?.extra_payment ?? 0);
     }, 250);
   };
   return /* @__PURE__ */ e(
@@ -1035,74 +1038,74 @@ const xe = ({
       onCancel: c,
       onSave: d,
       primaryText: a.paydown_drawer_extra_payment,
-      secondaryText: P(o?.extra_payment, "0,0"),
-      zeroStateText: o?.extra_payment ? void 0 : a.add_extra_payment,
+      secondaryText: P(n?.extra_payment, "0,0"),
+      zeroStateText: n?.extra_payment ? void 0 : a.add_extra_payment,
       children: /* @__PURE__ */ e(
         ae,
         {
-          amount: n,
+          amount: o,
           autoFocus: !0,
           error: p,
           fullWidth: !0,
           minAmount: 0,
-          setAmount: (h) => i(isNaN(Number(h)) ? n : Number(h)),
+          setAmount: (h) => i(isNaN(Number(h)) ? o : Number(h)),
           sx: { ".MuiTypography-Body": { p: 0 } }
         }
       )
     }
   );
-}), vt = () => {
-  const { debts: a } = C(), { totalMonthlyPayments: o } = q(), { monthlyCashFlowProfile: r } = z(), t = o + Number(r?.extra_payment);
-  return /* @__PURE__ */ s(x, { sx: { backgroundColor: "background.default", height: "100%" }, children: [
-    /* @__PURE__ */ s(x, { p: 24, children: [
-      /* @__PURE__ */ s(x, { alignItems: "center", gap: 4, mb: 24, children: [
+}), Dt = () => {
+  const { debts: a } = C(), { totalMonthlyPayments: n } = q(), { monthlyCashFlowProfile: r } = z(), t = n + Number(r?.extra_payment);
+  return /* @__PURE__ */ s(g, { sx: { backgroundColor: "background.default", height: "100%" }, children: [
+    /* @__PURE__ */ s(g, { p: 24, children: [
+      /* @__PURE__ */ s(g, { alignItems: "center", gap: 4, mb: 24, children: [
         /* @__PURE__ */ e(l, { variant: "Body", children: a.paydown_drawer_mimimum_label }),
-        /* @__PURE__ */ e(l, { bold: !0, variant: "H1", children: P(o, "0,0") }),
+        /* @__PURE__ */ e(l, { bold: !0, variant: "H1", children: P(n, "0,0") }),
         /* @__PURE__ */ e(l, { textAlign: "center", truncate: !1, variant: "Small", width: 208, children: a.paydown_drawer_minimum_info })
       ] }),
-      /* @__PURE__ */ s(x, { children: [
+      /* @__PURE__ */ s(g, { children: [
         /* @__PURE__ */ e(l, { variant: "H3", children: a.paydown_drawer_subtitle }),
         /* @__PURE__ */ e(l, { truncate: !1, variant: "ParagraphSmall", children: a.paydown_drawer_description })
       ] })
     ] }),
-    /* @__PURE__ */ e(x, { sx: { backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(Dt, {}) }),
-    /* @__PURE__ */ e(x, { flexDirection: "row-reverse", px: 24, py: 12, children: /* @__PURE__ */ s(x, { gap: 4, children: [
+    /* @__PURE__ */ e(g, { sx: { backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(vt, {}) }),
+    /* @__PURE__ */ e(g, { flexDirection: "row-reverse", px: 24, py: 12, children: /* @__PURE__ */ s(g, { gap: 4, children: [
       /* @__PURE__ */ e(l, { variant: "Small", children: a.paydown_drawer_total_payment }),
       /* @__PURE__ */ e(l, { bold: !0, textAlign: "right", variant: "Body", children: P(t, "0,0") })
     ] }) })
   ] });
-}, Tt = S(vt), At = ({ isOpen: a, onClose: o }) => {
+}, Tt = S(Dt), At = ({ isOpen: a, onClose: n }) => {
   const { debts: r } = C();
   return /* @__PURE__ */ e(
     te,
     {
       ariaLabelClose: r.paydown_drawer_close_aria,
       isOpen: a,
-      onClose: o,
+      onClose: n,
       title: r.paydown_drawer_title,
       children: /* @__PURE__ */ e(Tt, {})
     }
   );
 };
-function Et(a, o) {
+function Et(a, n) {
   const r = (t) => {
     if (typeof t == "number") return t;
     if (t === "!" || t === "✓") return 1 / 0;
     throw new Error("Unsupported value");
   };
-  return r(a) - r(o);
+  return r(a) - r(n);
 }
 function It(a) {
   return a.is_paid_off ? "✓" : a.priority === void 0 || a.is_impossible ? "!" : a.priority;
 }
 const Bt = (a) => {
-  const o = {
+  const n = {
     text: "#121417",
     background: "#FFB252"
   };
-  return a === "!" && (o.text = "#FFFFFF", o.background = "#DF320C"), a === "✓" && (o.text = "#FFFFFF", o.background = "#09A57F"), o;
+  return a === "!" && (n.text = "#FFFFFF", n.background = "#DF320C"), a === "✓" && (n.text = "#FFFFFF", n.background = "#09A57F"), n;
 }, Mt = (a) => {
-  const o = String(a.formattedValue), r = Bt(o);
+  const n = String(a.formattedValue), r = Bt(n);
   return /* @__PURE__ */ e(
     re,
     {
@@ -1117,32 +1120,32 @@ const Bt = (a) => {
         backgroundColor: r.background,
         marginLeft: "10px"
       },
-      children: /* @__PURE__ */ e(l, { color: r.text, fontWeight: 700, variant: "Small", children: o })
+      children: /* @__PURE__ */ e(l, { color: r.text, fontWeight: 700, variant: "Small", children: n })
     }
   );
 }, Pt = (a) => {
-  const o = a.row.account, r = Ke[o.account_type];
-  return /* @__PURE__ */ s(x, { alignItems: "center", flexDirection: "row", children: [
+  const n = a.row.account, r = Ke[n.account_type];
+  return /* @__PURE__ */ s(g, { alignItems: "center", flexDirection: "row", children: [
     /* @__PURE__ */ e(
-      ve,
+      De,
       {
-        alt: `${o.institutionName}`,
-        institutionGuid: o.institution_guid || ""
+        alt: `${n.institutionName}`,
+        institutionGuid: n.institution_guid || ""
       }
     ),
-    /* @__PURE__ */ s(x, { ml: 12, children: [
-      /* @__PURE__ */ e(l, { variant: "Small", children: o.name }),
+    /* @__PURE__ */ s(g, { ml: 12, children: [
+      /* @__PURE__ */ e(l, { variant: "Small", children: n.name }),
       /* @__PURE__ */ e(l, { variant: "XSmall", children: r })
     ] })
   ] });
 }, kt = ({
   sx: a = {},
-  debts: o,
+  debts: n,
   hoveredDebtGuid: r,
   onHoverRow: t,
-  onClickRow: n
+  onClickRow: o
 }) => {
-  const i = j(), { onEvent: p } = k(), { isMobile: d } = X(), { debts: c } = C(), [h, m] = g.useState([
+  const i = j(), { onEvent: p } = k(), { isMobile: d } = X(), { debts: c } = C(), [h, m] = x.useState([
     { field: "priority", sort: "asc" }
   ]), y = [
     {
@@ -1175,7 +1178,7 @@ const Bt = (a) => {
       field: "balance",
       headerName: c.table_column_balance,
       renderHeader: G,
-      valueFormatter: (u) => P(u, "0,0"),
+      renderCell: (u) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: P(u.value, "0,0") }),
       sortable: !0,
       hideSortIcons: d,
       type: "number",
@@ -1188,7 +1191,7 @@ const Bt = (a) => {
       field: "interest_rate",
       headerName: c.table_column_interest_rate,
       renderHeader: G,
-      valueFormatter: (u) => isNaN(u) ? "---" : `${Number(u).toFixed(2)}%`,
+      renderCell: (u) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: isNaN(u.value) ? "---" : `${Number(u.value).toFixed(2)}%` }),
       sortable: !0,
       hideSortIcons: d,
       type: "number",
@@ -1201,7 +1204,7 @@ const Bt = (a) => {
       field: "projected_payoff_date",
       headerName: c.table_column_payoff_date,
       renderHeader: G,
-      valueFormatter: (u) => u ? K(u, U.MONTH_SHORT_YEAR) : "---",
+      renderCell: (u) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: u.value ? K(u.value, U.MONTH_SHORT_YEAR) : "---" }),
       sortable: !0,
       hideSortIcons: d,
       type: "number",
@@ -1214,7 +1217,7 @@ const Bt = (a) => {
       field: "monthly_payment",
       headerName: c.table_column_amount_due,
       renderHeader: G,
-      valueFormatter: (u) => typeof u == "number" ? P(u, "0,0") : "---",
+      renderCell: (u) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: typeof u.value == "number" ? P(u.value, "0,0") : "---" }),
       sortable: !0,
       hideSortIcons: d,
       type: "number",
@@ -1237,14 +1240,14 @@ const Bt = (a) => {
       headerAlign: "right",
       width: 20
     }
-  ], D = g.useMemo(() => o.map((u, I) => ({
+  ], v = x.useMemo(() => n.map((u, I) => ({
     ...u,
     id: I,
     priority: It(u)
-  })), [o]), E = (u) => {
-    const Y = u.target.closest("[data-id]")?.getAttribute("data-id"), b = o[Number(Y)];
+  })), [n]), E = (u) => {
+    const Y = u.target.closest("[data-id]")?.getAttribute("data-id"), b = n[Number(Y)];
     t?.(b?.guid ?? "");
-  }, v = (u) => D.find((I) => I.guid === u)?.id;
+  }, D = (u) => v.find((I) => I.guid === u)?.id;
   return /* @__PURE__ */ e(
     re,
     {
@@ -1265,12 +1268,12 @@ const Bt = (a) => {
           hideFooter: !0,
           initialState: { sorting: { sortModel: h } },
           onRowClick: (u) => {
-            n(), p(T.DEBTS_CLICK_TABLE_ROW, { account_guid: u.row.guid });
+            o(), p(T.DEBTS_CLICK_TABLE_ROW, { account_guid: u.row.guid });
           },
           onSortModelChange: (u) => {
             m(u), p(T.DEBTS_CLICK_TABLE_SORT);
           },
-          rows: D,
+          rows: v,
           slotProps: {
             baseIconButton: { color: "secondary", sx: { ml: 8 } },
             row: {
@@ -1281,7 +1284,7 @@ const Bt = (a) => {
           sortModel: h,
           sortingOrder: ["asc", "desc"],
           sx: {
-            [`& .MuiDataGrid-row[data-id="${v(r)}"]`]: {
+            [`& .MuiDataGrid-row[data-id="${D(r)}"]`]: {
               backgroundColor: i.palette.mode === "light" ? "#f8f9fb" : "#1f2329",
               filter: "brightness(98%)"
             }
@@ -1290,9 +1293,9 @@ const Bt = (a) => {
       )
     }
   );
-}, Ft = ({ buttonText: a, isOpen: o, onClick: r }) => {
-  const { isDesktop: t, isTablet: n } = X(), i = o ? "unfold_less" : "unfold_more";
-  return t || n ? /* @__PURE__ */ e(
+}, Nt = ({ buttonText: a, isOpen: n, onClick: r }) => {
+  const { isDesktop: t, isTablet: o } = X(), i = n ? "unfold_less" : "unfold_more";
+  return t || o ? /* @__PURE__ */ e(
     fe,
     {
       "aria-controls": "prioritize-debts",
@@ -1315,8 +1318,8 @@ const Bt = (a) => {
       children: /* @__PURE__ */ e(ee, { name: i })
     }
   );
-}, Nt = S(({ buttonEl: a, onClose: o }) => {
-  const { onEvent: r } = k(), { debts: t } = C(), { selectedDebtPriority: n, setSelectedDebtPriority: i } = R(), p = !!a, d = [
+}, Ft = S(({ buttonEl: a, onClose: n }) => {
+  const { onEvent: r } = k(), { debts: t } = C(), { selectedDebtPriority: o, setSelectedDebtPriority: i } = R(), p = !!a, d = [
     {
       priority: M.FASTEST_PAYOFF_FIRST,
       text: t.priority_sort_fastest_payoff
@@ -1345,7 +1348,7 @@ const Bt = (a) => {
         horizontal: "left"
       },
       id: "prioritize-debts",
-      onClose: o,
+      onClose: n,
       open: p,
       transformOrigin: {
         vertical: "top",
@@ -1356,8 +1359,8 @@ const Bt = (a) => {
         {
           onClick: () => c(h),
           sx: {
-            bgcolor: n === h ? "primary.main" : void 0,
-            color: n === h ? "#fff" : void 0,
+            bgcolor: o === h ? "primary.main" : void 0,
+            color: o === h ? "#fff" : void 0,
             justifyContent: "space-between",
             minHeight: 44,
             minWidth: 268,
@@ -1371,7 +1374,7 @@ const Bt = (a) => {
           },
           children: [
             /* @__PURE__ */ e(l, { color: "inherit", variant: "Small", children: m }),
-            n === h && /* @__PURE__ */ e(ye, { color: "inherit", filled: !0, fontSize: "small" })
+            o === h && /* @__PURE__ */ e(ye, { color: "inherit", filled: !0, fontSize: "small" })
           ]
         },
         h
@@ -1379,51 +1382,51 @@ const Bt = (a) => {
     }
   );
 }), Rt = S(() => {
-  const { onEvent: a } = k(), { debts: o } = C(), { selectedDebtPriority: r } = R(), [t, n] = g.useState(null), i = (h) => {
-    n(h.currentTarget), a(T.DEBTS_CLICK_PRIORITIZE);
+  const { onEvent: a } = k(), { debts: n } = C(), { selectedDebtPriority: r } = R(), [t, o] = x.useState(null), i = (h) => {
+    o(h.currentTarget), a(T.DEBTS_CLICK_PRIORITIZE);
   }, p = () => {
-    n(null);
-  }, d = !!t, c = g.useMemo(() => ({
-    [M.FASTEST_PAYOFF_FIRST]: o.priority_sort_fastest_payoff,
-    [M.HIGHEST_INTEREST]: o.priority_sort_highest_interest,
-    [M.HIGHEST_BALANCE]: o.priority_sort_highest_balance,
-    [M.LOWEST_BALANCE]: o.priority_sort_lowest_balance
-  })[r] ?? o.priority_sort_lowest_balance, [r]);
+    o(null);
+  }, d = !!t, c = x.useMemo(() => ({
+    [M.FASTEST_PAYOFF_FIRST]: n.priority_sort_fastest_payoff,
+    [M.HIGHEST_INTEREST]: n.priority_sort_highest_interest,
+    [M.HIGHEST_BALANCE]: n.priority_sort_highest_balance,
+    [M.LOWEST_BALANCE]: n.priority_sort_lowest_balance
+  })[r] ?? n.priority_sort_lowest_balance, [r]);
   return /* @__PURE__ */ s(_, { children: [
-    /* @__PURE__ */ e(Ft, { buttonText: c, isOpen: d, onClick: i }),
-    /* @__PURE__ */ e(Nt, { buttonEl: t, onClose: p })
+    /* @__PURE__ */ e(Nt, { buttonText: c, isOpen: d, onClick: i }),
+    /* @__PURE__ */ e(Ft, { buttonEl: t, onClose: p })
   ] });
-}), Lt = (a, o, r = 0) => {
+}), Lt = (a, n, r = 0) => {
   const t = a.map((c) => ({ ...c }));
-  ge(t, o);
-  const n = /* @__PURE__ */ new Date(), i = [];
+  xe(t, n);
+  const o = /* @__PURE__ */ new Date(), i = [];
   let p = 0, d = 1;
   for (const c of t)
     i.push({
       ...c,
       // Start with the initial balance
-      dataset: [{ x: new Date(n), y: c.balance }]
+      dataset: [{ x: new Date(o), y: c.balance }]
     });
   for (; t.some((c) => c.balance >= 0.01 && !c.is_impossible); ) {
     let c = !1;
     for (const [h, m] of t.entries()) {
       if (m.balance <= 0.01) continue;
-      const y = i[h].dataset, D = (m.interest_rate ?? 0) / 100 / 12, E = m.balance * D;
-      let v = m.monthly_payment ?? 0;
-      h === 0 && (v += r), m.balance += E;
-      const u = Math.min(m.balance, v + p);
+      const y = i[h].dataset, v = (m.interest_rate ?? 0) / 100 / 12, E = m.balance * v;
+      let D = m.monthly_payment ?? 0;
+      h === 0 && (D += r), m.balance += E;
+      const u = Math.min(m.balance, D + p);
       if (u <= E) {
-        m.is_impossible = !0, i[h].is_impossible = !0, i[h].priority = void 0, y.push({ x: new Date(n), y: m.balance });
+        m.is_impossible = !0, i[h].is_impossible = !0, i[h].priority = void 0, y.push({ x: new Date(o), y: m.balance });
         continue;
       }
       m.balance -= u, m.balance = m.balance < 0.01 ? 0 : m.balance, y.push({
-        x: new Date(n),
+        x: new Date(o),
         y: Math.max(0, m.balance),
         payment: u,
         extra: p
-      }), m.balance <= 0 && (p += v, i[h].projected_payoff_date = new Date(n)), u > 0 && (c = !0);
+      }), m.balance <= 0 && (p += D, i[h].projected_payoff_date = new Date(o)), u > 0 && (c = !0);
     }
-    c && n.setMonth(n.getMonth() + 1);
+    c && o.setMonth(o.getMonth() + 1);
   }
   return i.forEach((c) => {
     (c.interest_rate === void 0 || c.interest_rate === void 0) && (c.projected_payoff_date = void 0);
@@ -1431,7 +1434,7 @@ const Bt = (a) => {
     c.priority = !c.is_paid_off && !c.is_impossible ? d++ : void 0;
   }), i;
 }, $t = S(({ onClick: a }) => {
-  const { debts: o } = C(), { isDesktop: r } = X(), { totalMonthlyPayments: t } = q(), { monthlyCashFlowProfile: n } = z(), i = t + Number(n?.extra_payment), p = r ? o.paydown_button_long : o.paydown_button_short;
+  const { debts: n } = C(), { isDesktop: r } = X(), { totalMonthlyPayments: t } = q(), { monthlyCashFlowProfile: o } = z(), i = t + Number(o?.extra_payment), p = r ? n.paydown_button_long : n.paydown_button_short;
   return /* @__PURE__ */ e(
     fe,
     {
@@ -1444,27 +1447,27 @@ const Bt = (a) => {
       children: A(p, P(i, "0,0"))
     }
   );
-}), Ht = ({ onBackClick: a, sx: o }) => {
-  const [r, t] = g.useState(!1), [n, i] = g.useState(!1), [p, d] = g.useState(!1), [c, h] = g.useState(""), { isDesktop: m, isMobile: y } = X(), { debts: f } = C(), { onEvent: D } = k(), { isCopyLoaded: E, isInitialized: v, setSelectedAccounts: u } = Pe(), { setSelectedAccount: I } = Fe(), { selectedDebtPriority: V, setSelectedDebtChartData: Y } = R(), { visibleDebtAccounts: b } = Z(), { goalsLoaded: w, loadGoals: B, monthlyCashFlowProfile: F } = z(), { debts: N } = q(), $ = g.useMemo(() => {
-    const H = F?.extra_payment ?? 0;
-    return Lt(N, V, H);
-  }, [N, V, F]);
-  g.useEffect(() => {
-    u(b), D(T.DEBTS_VIEW);
-  }, []), g.useEffect(() => {
+}), Ht = ({ onBackClick: a, sx: n }) => {
+  const [r, t] = x.useState(!1), [o, i] = x.useState(!1), [p, d] = x.useState(!1), [c, h] = x.useState(""), { isDesktop: m, isMobile: y } = X(), { debts: f } = C(), { onEvent: v } = k(), { isCopyLoaded: E, isInitialized: D, setSelectedAccounts: u } = Pe(), { setSelectedAccount: I } = Ne(), { selectedDebtPriority: V, setSelectedDebtChartData: Y } = R(), { visibleDebtAccounts: b } = Z(), { goalsLoaded: w, loadGoals: B, monthlyCashFlowProfile: N } = z(), { debts: F } = q(), $ = x.useMemo(() => {
+    const H = N?.extra_payment ?? 0;
+    return Lt(F, V, H);
+  }, [F, V, N]);
+  x.useEffect(() => {
+    u(b), v(T.DEBTS_VIEW);
+  }, []), x.useEffect(() => {
     u(b);
-  }, [b]), g.useEffect(() => {
-    v && B().finally();
-  }, [v]);
-  const oe = (H) => h(H), ne = () => {
+  }, [b]), x.useEffect(() => {
+    D && B().finally();
+  }, [D]);
+  const ne = (H) => h(H), oe = () => {
     const H = b.find((Q) => Q.guid === c), ie = $.find((Q) => Q.guid === c);
     H && I(H), ie && Y(ie), t(!0);
-  }, we = () => D(T.DEBTS_CLICK_FILTER), Ce = () => {
-    d(!0), D(T.DEBTS_CLICK_SNOWBALL_CTA);
+  }, we = () => v(T.DEBTS_CLICK_FILTER), Ce = () => {
+    d(!0), v(T.DEBTS_CLICK_SNOWBALL_CTA);
   }, Se = () => {
-    i(!0), D(T.DEBTS_CLICK_PAYDOWN);
+    i(!0), v(T.DEBTS_CLICK_PAYDOWN);
   };
-  return !w || !E || !v ? /* @__PURE__ */ e(Je, {}) : /* @__PURE__ */ s(
+  return !w || !E || !D ? /* @__PURE__ */ e(Je, {}) : /* @__PURE__ */ s(
     Oe,
     {
       accountOptions: b,
@@ -1474,12 +1477,12 @@ const Bt = (a) => {
       ],
       onAccountsFilterClick: we,
       onBackClick: a,
-      sx: o,
+      sx: n,
       title: f.title,
       children: [
-        /* @__PURE__ */ s(x, { sx: { px: m ? "48px" : "24px" }, children: [
+        /* @__PURE__ */ s(g, { sx: { px: m ? "48px" : "24px" }, children: [
           /* @__PURE__ */ s(
-            x,
+            g,
             {
               sx: {
                 alignItems: y ? "flex-start" : "flex-end",
@@ -1488,18 +1491,18 @@ const Bt = (a) => {
               },
               children: [
                 /* @__PURE__ */ e(
-                  xe,
+                  ge,
                   {
                     debts: $,
                     height: y ? 250 : void 0,
                     hoveredDebtGuid: c,
-                    onClickArea: ne,
-                    onHoverArea: oe,
+                    onClickArea: oe,
+                    onHoverArea: ne,
                     sx: { mr: y ? "4px" : "-48px" }
                   }
                 ),
                 /* @__PURE__ */ e(
-                  nt,
+                  ot,
                   {
                     debts: $,
                     onClickCta: Ce,
@@ -1509,13 +1512,13 @@ const Bt = (a) => {
               ]
             }
           ),
-          /* @__PURE__ */ e(x, { sx: { mx: y ? "-24px" : 0 }, children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(g, { sx: { mx: y ? "-24px" : 0 }, children: /* @__PURE__ */ e(
             kt,
             {
               debts: $,
               hoveredDebtGuid: c,
-              onClickRow: ne,
-              onHoverRow: oe
+              onClickRow: oe,
+              onHoverRow: ne
             }
           ) })
         ] }),
@@ -1527,14 +1530,14 @@ const Bt = (a) => {
           }
         ),
         /* @__PURE__ */ e(St, { isOpen: r, onClose: () => t(!1) }),
-        /* @__PURE__ */ e(At, { isOpen: n, onClose: () => i(!1) })
+        /* @__PURE__ */ e(At, { isOpen: o, onClose: () => i(!1) })
       ]
     }
   );
 }, Pr = S(Ht);
 export {
-  xe as DebtsChart,
-  Nr as DebtsStore,
+  ge as DebtsChart,
+  Fr as DebtsStore,
   kt as DebtsTable,
   Pr as DebtsWidget
 };