@mx-cartographer/experiences 7.12.16 → 7.13.0

package/dist/debts/index.es.js

@@ -1,73 +1,73 @@
 import { jsx as e, jsxs as s, Fragment as $ } from "react/jsx-runtime";
-import g from "react";
-import { observer as v } from "mobx-react-lite";
-import x from "@mui/material/Stack";
-import { useTheme as Y, Card as we, Stack as _, Box as W } from "@mui/material";
-import { Text as l, P as Ce, H3 as Fe, InstitutionLogo as Le, Icon as ne } from "@mxenabled/mxui";
-import { intervalToDuration as $e, formatDuration as He } from "date-fns";
-import { addMonths as he } from "date-fns/addMonths";
+import x from "react";
+import { observer as D } from "mobx-react-lite";
+import g from "@mui/material/Stack";
+import { useTheme as V, Card as we, Stack as _, Box as W } from "@mui/material";
+import { Text as l, P as Ce, H3 as Fe, InstitutionLogo as Le, Icon as ae } from "@mxenabled/mxui";
+import { intervalToDuration as $e, formatDuration as Oe } from "date-fns";
+import { addMonths as me } from "date-fns/addMonths";
 import { fromUnixTime as ue } from "date-fns/fromUnixTime";
 import { getUnixTime as be } from "date-fns/getUnixTime";
-import { a as P, M as Oe, I as We } from "../DebtsStore-BZqNLaqd.mjs";
-import { D as ra } from "../DebtsStore-BZqNLaqd.mjs";
-import { f as N, a as Ge } from "../NumberFormatting-QCaNwbjv.mjs";
+import { a as P, M as He, I as We } from "../DebtsStore-BZqNLaqd.mjs";
+import { D as ro } from "../DebtsStore-BZqNLaqd.mjs";
+import { f as R, a as Ge } from "../NumberFormatting-QCaNwbjv.mjs";
 import { f as Q, D as ee } from "../DateFormats-BMpMrZpW.mjs";
-import { G as je, v as te, u as C, k as V, g as R, d as re, a as ze, b as Xe } from "../hooks-BxkfR-Ff.mjs";
-import { u as K } from "../useScreenSize-B6JyS_Lj.mjs";
-import { D as ie } from "../Drawer-DV4NTsFg.mjs";
+import { G as je, v as te, u as C, k as K, g as B, d as re, a as ze, b as Ye } from "../hooks-BxkfR-Ff.mjs";
+import { u as U } from "../useScreenSize-B6JyS_Lj.mjs";
+import { D as ie } from "../Drawer-Bbe4AMB1.mjs";
 import { b as E } from "../Localization-CPkpIwIx.mjs";
-import { A as Ye, u as Ve } from "../AccountDetailsHeader-DkBNsLsI.mjs";
-import Ke from "@mui/material/Card";
-import Ue from "@mui/material/CardContent";
-import qe from "@mui/material/CardHeader";
+import { A as Ve, u as Ke } from "../AccountDetailsHeader-D9gbTbUt.mjs";
+import Ue from "@mui/material/Card";
+import qe from "@mui/material/CardContent";
+import Xe from "@mui/material/CardHeader";
 import le from "@mui/material/Box";
 import { useTheme as Ze } from "@mui/material/styles";
 import { LineChart as Je } from "@mui/x-charts/LineChart";
-import { A as D } from "../Analytics-BYItVAe-.mjs";
+import { A as S } from "../Analytics-BYItVAe-.mjs";
 import _e from "@mui/material/Tab";
 import Qe from "@mui/material/Tabs";
-import Se from "@mui/material/List";
+import ve from "@mui/material/List";
 import G from "@mui/material/Divider";
-import { M as et, I as tt, O as rt } from "../OriginalBalanceAction-BM6rT_Cn.mjs";
-import at from "@mui/material/TextField";
-import { L as ae } from "../ListItemAction-4KB7P75M.mjs";
+import { M as et, I as tt, O as rt } from "../OriginalBalanceAction-DjpvVVFz.mjs";
+import ot from "@mui/material/TextField";
+import { L as oe } from "../ListItemAction-4KB7P75M.mjs";
 import { C as se } from "../CurrencyInput-DuMktPu3.mjs";
 import ye from "@mui/material/Alert";
 import fe from "@mui/material/AlertTitle";
-import ge from "@mui/material/Paper";
-import { Error as ot, CheckCircle as ve } from "@mxenabled/mx-icons";
-import { T as xe } from "../TabContentContainer-j01JYR_7.mjs";
-import { DataGridPro as nt } from "@mui/x-data-grid-pro";
-import { H as j } from "../HeaderCell-DjuifqHJ.mjs";
-import { f as it, A as X } from "../Account-BiB1F8lL.mjs";
-import De from "@mui/material/Button";
+import xe from "@mui/material/Paper";
+import { Error as nt, CheckCircle as De } from "@mxenabled/mx-icons";
+import { T as ge } from "../TabContentContainer-j01JYR_7.mjs";
+import { DataGridPro as at } from "@mui/x-data-grid-pro";
+import { H as j } from "../HeaderCell-P8w6CmfO.mjs";
+import { f as it, A as Y } from "../Account-BiB1F8lL.mjs";
+import Se from "@mui/material/Button";
 import lt from "@mui/material/IconButton";
 import st from "@mui/material/ListItem";
 import ct from "@mui/material/Popover";
-import { C as dt } from "../ConnectDrawer-CioFo6Wy.mjs";
+import { C as dt } from "../ConnectDrawer-C0wjwcJt.mjs";
 import { u as pt } from "../useWidgetLoadTimer-DgN1bTyu.mjs";
-import { L as mt } from "../Loader-D3rjKx72.mjs";
-import { W as ht } from "../WidgetContainer-B0ncgABX.mjs";
+import { L as ht } from "../Loader-D3rjKx72.mjs";
+import { W as mt } from "../WidgetContainer-D_iaToWJ.mjs";
 import { E as ut } from "../EmptyState-DHAkGsjk.mjs";
-const bt = (a, o = 0, r = 0) => {
+const bt = (o, n = 0, r = 0) => {
   if (r === 0) return 0;
-  const t = o / (Oe * We);
+  const t = n / (He * We);
   return Math.ceil(
-    t === 0 ? a / r : -Math.log(1 - t * a / r) / Math.log(1 + t)
+    t === 0 ? o / r : -Math.log(1 - t * o / r) / Math.log(1 + t)
   );
-}, _t = (a, o, r, t, n) => {
+}, _t = (o, n, r, t, a) => {
   const i = [];
   if (r === 0) {
-    for (let d = 0; d < a; d++) {
-      const p = o - t * (d + 1), h = o - t * d, m = p >= 0 ? t : h;
+    for (let d = 0; d < o; d++) {
+      const p = n - t * (d + 1), m = n - t * d, h = p >= 0 ? t : m;
       i.push({
         balance: p >= 0 ? p : 0,
         interest: r,
-        payment: m,
-        principal: m,
+        payment: h,
+        principal: h,
         timestamp: be(
-          he(
-            ue(n),
+          me(
+            ue(a),
             // convert seconds → Date
             d + 1
             // add (index + 1) months
@@ -78,98 +78,98 @@ const bt = (a, o = 0, r = 0) => {
     return i;
   }
   const c = r / 1200;
-  for (let d = 0; d < a; d++) {
-    const p = be(he(ue(n), d + 1)), h = Math.pow(1 + c, d), m = o * h - t * ((h - 1) / c), w = Math.pow(1 + c, d + 1), b = o * w - t * ((w - 1) / c), B = t + Math.min(b, 0), M = m * c;
+  for (let d = 0; d < o; d++) {
+    const p = be(me(ue(a), d + 1)), m = Math.pow(1 + c, d), h = n * m - t * ((m - 1) / c), w = Math.pow(1 + c, d + 1), b = n * w - t * ((w - 1) / c), M = t + Math.min(b, 0), k = h * c;
     i.push({
       balance: Math.max(0, b),
-      interest: M,
-      payment: B,
-      principal: B - M,
+      interest: k,
+      payment: M,
+      principal: M - k,
       timestamp: p
     });
   }
   return i;
-}, yt = (a) => (a[a.length - 1] || {}).timestamp, ft = (a) => {
-  const { monthly_payment: o, interest_rate: r, balance: t, payment_due_date: n } = a, i = bt(t, r ?? 0, o ?? 0), c = _t(
+}, yt = (o) => (o[o.length - 1] || {}).timestamp, ft = (o) => {
+  const { monthly_payment: n, interest_rate: r, balance: t, payment_due_date: a } = o, i = bt(t, r ?? 0, n ?? 0), c = _t(
     i,
     t,
     r ?? 0,
-    o ?? 0,
-    n
+    n ?? 0,
+    a
   ), d = yt(c);
   return {
-    ...a,
+    ...o,
     minimumFinalPayment: d,
     minimumPayments: c
   };
-}, Te = (a, o) => {
-  const [r, t] = a.reduce(
-    ([n, i], c) => (c.is_paid_off || c.is_impossible ? i.push({ ...c, minimumPayments: [] }) : n.push(ft(c)), [n, i]),
+}, Te = (o, n) => {
+  const [r, t] = o.reduce(
+    ([a, i], c) => (c.is_paid_off || c.is_impossible ? i.push({ ...c, minimumPayments: [] }) : a.push(ft(c)), [a, i]),
     [[], []]
   );
-  switch (o) {
+  switch (n) {
     case P.FASTEST_PAYOFF_FIRST:
-      r.sort((n, i) => (n.minimumFinalPayment ?? 0) - (i.minimumFinalPayment ?? 0));
+      r.sort((a, i) => (a.minimumFinalPayment ?? 0) - (i.minimumFinalPayment ?? 0));
       break;
     case P.HIGHEST_INTEREST:
-      r.sort((n, i) => (i.interest_rate ?? 0) - (n.interest_rate ?? 0));
+      r.sort((a, i) => (i.interest_rate ?? 0) - (a.interest_rate ?? 0));
       break;
     case P.LOWEST_BALANCE:
-      r.sort((n, i) => n.balance - i.balance);
+      r.sort((a, i) => a.balance - i.balance);
       break;
     case P.HIGHEST_BALANCE:
-      r.sort((n, i) => i.balance - n.balance);
+      r.sort((a, i) => i.balance - a.balance);
       break;
     default:
-      r.sort((n, i) => n.balance - i.balance);
+      r.sort((a, i) => a.balance - i.balance);
   }
-  a.splice(0, a.length, ...r, ...t);
+  o.splice(0, o.length, ...r, ...t);
 };
-function gt(a, o, r = 0) {
-  const t = a.map((m) => ({ ...m })).filter(
-    (m) => m.interest_rate !== void 0 && m.monthly_payment !== void 0 && !m.is_paid_off
+function xt(o, n, r = 0) {
+  const t = o.map((h) => ({ ...h })).filter(
+    (h) => h.interest_rate !== void 0 && h.monthly_payment !== void 0 && !h.is_paid_off
   );
-  Te(t, o);
-  let n = 0, i = 0;
+  Te(t, n);
+  let a = 0, i = 0;
   const c = /* @__PURE__ */ new Date(), d = /* @__PURE__ */ new Date();
-  for (; t.some((m) => m.balance >= 0.01 && !m.is_impossible); ) {
-    let m = !1;
+  for (; t.some((h) => h.balance >= 0.01 && !h.is_impossible); ) {
+    let h = !1;
     for (const [w, b] of t.entries()) {
       if (b.balance <= 0.01 || b.is_impossible) continue;
-      const M = (b.interest_rate ?? 0) / 100 / 12, I = b.balance * M;
-      let S = b.monthly_payment ?? 0;
-      w === 0 && r && (S += r), b.balance += I;
-      const T = Math.min(b.balance, S + i);
+      const k = (b.interest_rate ?? 0) / 100 / 12, I = b.balance * k;
+      let v = b.monthly_payment ?? 0;
+      w === 0 && r && (v += r), b.balance += I;
+      const T = Math.min(b.balance, v + i);
       if (T <= I) {
         b.is_impossible = !0;
         continue;
       }
-      b.balance -= T, b.balance = b.balance < 0.01 ? 0 : b.balance, n += I, b.balance <= 0 && (i += S), T > 0 && (m = !0);
+      b.balance -= T, b.balance = b.balance < 0.01 ? 0 : b.balance, a += I, b.balance <= 0 && (i += v), T > 0 && (h = !0);
     }
-    m && d.setMonth(d.getMonth() + 1);
+    h && d.setMonth(d.getMonth() + 1);
   }
-  const p = t.some((m) => m.is_impossible && m.balance > 0), h = $e({ start: c, end: d });
+  const p = t.some((h) => h.is_impossible && h.balance > 0), m = $e({ start: c, end: d });
   return {
-    payoffSavings: p ? "N/A" : N(n, "0,0.00"),
+    payoffSavings: p ? "N/A" : R(a, "0,0.00"),
     payoffDate: p ? "Never" : Q(d, ee.MONTH_YEAR),
-    payoffDuration: p ? "Stagnant" : He(h, { format: ["years", "months"] }) || "0 months"
+    payoffDuration: p ? "Stagnant" : Oe(m, { format: ["years", "months"] }) || "0 months"
   };
 }
 const F = () => {
-  if (!g.useContext(je))
+  if (!x.useContext(je))
     throw new Error("useCateUiStore() must be used within the GlobalDataContext");
   return te().uiStore;
-}, xt = ({ debts: a, onClickCta: o, sx: r }) => {
-  const t = Y(), { isMobile: n } = K(), { debts: i } = C(), { selectedDebtPriority: c } = F(), { monthlyCashFlowProfile: d } = V(), { payoffDate: p, payoffSavings: h, payoffDuration: m } = g.useMemo(() => {
+}, gt = ({ debts: o, onClickCta: n, sx: r }) => {
+  const t = V(), { isMobile: a } = U(), { debts: i } = C(), { selectedDebtPriority: c } = F(), { monthlyCashFlowProfile: d } = K(), { payoffDate: p, payoffSavings: m, payoffDuration: h } = x.useMemo(() => {
     const w = d?.extra_payment ?? 0;
-    return gt(a, c, w);
-  }, [a, c, d]);
+    return xt(o, c, w);
+  }, [o, c, d]);
   return /* @__PURE__ */ e(
     we,
     {
       sx: {
         boxShadow: t.shadows[2],
-        width: n ? "100%" : "186px",
+        width: a ? "100%" : "186px",
         minWidth: "186px",
         ...r
       },
@@ -177,66 +177,66 @@ const F = () => {
         /* @__PURE__ */ s(
           _,
           {
-            gap: n ? "4px" : "0",
+            gap: a ? "4px" : "0",
             sx: {
               borderBottom: "1px solid",
               borderBottomColor: t.palette.grey[300],
               pb: "8px"
             },
             children: [
-              /* @__PURE__ */ e(l, { variant: "XSmall", children: i.snowball_card_date_description }),
-              /* @__PURE__ */ e(l, { bold: !0, color: t.palette.primary.main, variant: "Small", children: p })
+              /* @__PURE__ */ e(l, { variant: "caption", children: i.snowball_card_date_description }),
+              /* @__PURE__ */ e(l, { bold: !0, color: t.palette.primary.main, variant: "body2", children: p })
             ]
           }
         ),
-        /* @__PURE__ */ s(_, { gap: n ? "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: a ? "4px" : "0", children: [
+          /* @__PURE__ */ e(l, { bold: !0, variant: "body2", children: m }),
+          /* @__PURE__ */ e(l, { sx: { whiteSpace: "normal" }, variant: "caption", children: i.snowball_card_amount_description })
         ] }),
-        /* @__PURE__ */ s(_, { gap: n ? "4px" : "0", children: [
-          /* @__PURE__ */ e(l, { bold: !0, variant: "Small", children: m }),
-          /* @__PURE__ */ e(l, { variant: "XSmall", children: i.snowball_card_duration_description })
+        /* @__PURE__ */ s(_, { gap: a ? "4px" : "0", children: [
+          /* @__PURE__ */ e(l, { bold: !0, variant: "body2", children: h }),
+          /* @__PURE__ */ e(l, { variant: "caption", children: i.snowball_card_duration_description })
         ] }),
         /* @__PURE__ */ e(
           l,
           {
             bold: !0,
             color: t.palette.primary.main,
-            onClick: o,
+            onClick: n,
             sx: { cursor: "pointer" },
-            variant: "Small",
+            variant: "body2",
             children: i.snowball_card_cta
           }
         )
       ] })
     }
   );
-}, wt = v(xt), Ct = ({ isOpen: a, onClose: o }) => {
-  const r = Y(), { debts: t } = C(), [n, i] = g.useState(!1);
+}, wt = D(gt), Ct = ({ isOpen: o, onClose: n }) => {
+  const r = V(), { debts: t } = C(), [a, i] = x.useState(!1);
   return /* @__PURE__ */ e(
     ie,
     {
       ariaLabelClose: "",
-      isOpen: a,
-      onClose: o,
+      isOpen: 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: [
           /* @__PURE__ */ s(_, { alignItems: "center", pb: 24, children: [
-            /* @__PURE__ */ e(l, { mb: 12, variant: "H3", children: t.snowball_drawer_subtitle }),
-            /* @__PURE__ */ e(l, { color: r.palette.secondary.main, variant: "Small", children: t.snowball_drawer_amount_description }),
-            /* @__PURE__ */ e(Ce, { variant: "H1", children: t.snowball_drawer_savings }),
-            /* @__PURE__ */ e(l, { color: r.palette.secondary.main, variant: "Small", children: t.snowball_drawer_duration_description })
+            /* @__PURE__ */ e(l, { mb: 12, variant: "h3", children: t.snowball_drawer_subtitle }),
+            /* @__PURE__ */ e(l, { color: r.palette.secondary.main, variant: "body2", children: t.snowball_drawer_amount_description }),
+            /* @__PURE__ */ e(Ce, { variant: "h1", children: t.snowball_drawer_savings }),
+            /* @__PURE__ */ e(l, { color: r.palette.secondary.main, variant: "body2", children: t.snowball_drawer_duration_description })
           ] }),
           /* @__PURE__ */ s(we, { sx: { display: "grid", py: 16, px: 24 }, children: [
-            /* @__PURE__ */ e(l, { mb: 4, variant: "H3", children: t.snowball_drawer_question }),
+            /* @__PURE__ */ e(l, { mb: 4, variant: "h3", children: t.snowball_drawer_question }),
             /* @__PURE__ */ e(
               l,
               {
                 color: r.palette.secondary.main,
                 mb: 8,
-                sx: { whiteSpace: n ? "normal" : "nowrap" },
-                variant: "ParagraphSmall",
+                sx: { whiteSpace: a ? "normal" : "nowrap" },
+                variant: "subtitle2",
                 children: t.snowball_drawer_answer
               }
             ),
@@ -245,10 +245,10 @@ const F = () => {
               {
                 bold: !0,
                 color: r.palette.primary.main,
-                onClick: () => i(!n),
+                onClick: () => i(!a),
                 sx: { cursor: "pointer" },
-                variant: "Small",
-                children: n ? t.snowball_drawer_less : t.snowball_drawer_more
+                variant: "body2",
+                children: a ? t.snowball_drawer_less : t.snowball_drawer_more
               }
             )
           ] })
@@ -260,13 +260,13 @@ const F = () => {
               color: r.palette.secondary.main,
               px: 24,
               sx: { textAlign: "center", whiteSpace: "normal" },
-              variant: "Small",
+              variant: "body2",
               children: t.snowball_drawer_disclaimer
             }
           ),
           /* @__PURE__ */ s(_, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
-            /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: E(t.snowball_drawer_month_header, 1) }),
-            /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: t.snowball_drawer_payment_header })
+            /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: E(t.snowball_drawer_month_header, 1) }),
+            /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: t.snowball_drawer_payment_header })
           ] }),
           /* @__PURE__ */ s(_, { bgcolor: r.palette.background.paper, mb: 24, children: [
             /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, children: [
@@ -283,7 +283,7 @@ const F = () => {
                     backgroundColor: r.palette.success.main,
                     marginRight: 12
                   },
-                  children: /* @__PURE__ */ e(l, { color: "white", fontWeight: 700, variant: "Small", children: "✓" })
+                  children: /* @__PURE__ */ e(l, { color: "white", fontWeight: 700, variant: "body2", children: "✓" })
                 }
               ),
               /* @__PURE__ */ s(
@@ -298,8 +298,8 @@ const F = () => {
                   },
                   children: [
                     /* @__PURE__ */ s(_, { flexGrow: 1, children: [
-                      /* @__PURE__ */ e(l, { variant: "Body", children: E(t.snowball_drawer_debt_label, "A") }),
-                      /* @__PURE__ */ s(l, { color: r.palette.secondary.main, variant: "XSmall", children: [
+                      /* @__PURE__ */ e(l, { variant: "body1", children: E(t.snowball_drawer_debt_label, "A") }),
+                      /* @__PURE__ */ s(l, { color: r.palette.secondary.main, variant: "caption", children: [
                         E(
                           t.snowball_drawer_rollover_explainer_pt1,
                           "$100"
@@ -309,14 +309,14 @@ const F = () => {
                       ] })
                     ] }),
                     /* @__PURE__ */ s(_, { children: [
-                      /* @__PURE__ */ e(l, { variant: "Body", children: "$100.00" }),
+                      /* @__PURE__ */ e(l, { variant: "body1", children: "$100.00" }),
                       /* @__PURE__ */ e(
                         l,
                         {
                           bold: !0,
                           color: r.palette.success.main,
                           textAlign: "end",
-                          variant: "Tiny",
+                          variant: "tiny",
                           children: t.snowball_drawer_paid_label
                         }
                       )
@@ -349,8 +349,8 @@ const F = () => {
                     pr: 24
                   },
                   children: [
-                    /* @__PURE__ */ e(l, { flexGrow: 1, variant: "Body", children: E(t.snowball_drawer_debt_label, "B") }),
-                    /* @__PURE__ */ e(l, { variant: "Body", children: "$400.00" })
+                    /* @__PURE__ */ e(l, { flexGrow: 1, variant: "body1", children: E(t.snowball_drawer_debt_label, "B") }),
+                    /* @__PURE__ */ e(l, { variant: "body1", children: "$400.00" })
                   ]
                 }
               )
@@ -369,8 +369,8 @@ const F = () => {
                 }
               ),
               /* @__PURE__ */ s(_, { flexDirection: "row", flexGrow: 1, pr: 24, children: [
-                /* @__PURE__ */ e(l, { flexGrow: 1, variant: "Body", children: E(t.snowball_drawer_debt_label, "C") }),
-                /* @__PURE__ */ e(l, { variant: "Body", children: "$1,000.00" })
+                /* @__PURE__ */ e(l, { flexGrow: 1, variant: "body1", children: E(t.snowball_drawer_debt_label, "C") }),
+                /* @__PURE__ */ e(l, { variant: "body1", children: "$1,000.00" })
               ] })
             ] }),
             /* @__PURE__ */ s(
@@ -385,15 +385,15 @@ const F = () => {
                   borderBottom: `1px solid ${r.palette.border.light}`
                 },
                 children: [
-                  /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: t.snowball_drawer_total_label }),
-                  /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: "$1,500.00" })
+                  /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: t.snowball_drawer_total_label }),
+                  /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: "$1,500.00" })
                 ]
               }
             )
           ] }),
           /* @__PURE__ */ s(_, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
-            /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: E(t.snowball_drawer_month_header, 2) }),
-            /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: t.snowball_drawer_payment_header })
+            /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: E(t.snowball_drawer_month_header, 2) }),
+            /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: t.snowball_drawer_payment_header })
           ] }),
           /* @__PURE__ */ s(_, { bgcolor: r.palette.background.paper, mb: 24, children: [
             /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, children: [
@@ -410,7 +410,7 @@ const F = () => {
                     backgroundColor: r.palette.success.main,
                     marginRight: 12
                   },
-                  children: /* @__PURE__ */ e(l, { color: "white", fontWeight: 700, variant: "Small", children: "✓" })
+                  children: /* @__PURE__ */ e(l, { color: "white", fontWeight: 700, variant: "body2", children: "✓" })
                 }
               ),
               /* @__PURE__ */ s(
@@ -425,8 +425,8 @@ const F = () => {
                   },
                   children: [
                     /* @__PURE__ */ s(_, { flexGrow: 1, children: [
-                      /* @__PURE__ */ e(l, { variant: "Body", children: E(t.snowball_drawer_debt_label, "B") }),
-                      /* @__PURE__ */ s(l, { color: r.palette.secondary.main, variant: "XSmall", children: [
+                      /* @__PURE__ */ e(l, { variant: "body1", children: E(t.snowball_drawer_debt_label, "B") }),
+                      /* @__PURE__ */ s(l, { color: r.palette.secondary.main, variant: "caption", children: [
                         E(
                           t.snowball_drawer_rollover_explainer_pt1,
                           "$500"
@@ -436,14 +436,14 @@ const F = () => {
                       ] })
                     ] }),
                     /* @__PURE__ */ s(_, { children: [
-                      /* @__PURE__ */ e(l, { variant: "Body", children: "$500.00" }),
+                      /* @__PURE__ */ e(l, { variant: "body1", children: "$500.00" }),
                       /* @__PURE__ */ e(
                         l,
                         {
                           bold: !0,
                           color: r.palette.success.main,
                           textAlign: "end",
-                          variant: "Tiny",
+                          variant: "tiny",
                           children: t.snowball_drawer_paid_label
                         }
                       )
@@ -475,8 +475,8 @@ const F = () => {
                     pr: 24
                   },
                   children: [
-                    /* @__PURE__ */ e(l, { flexGrow: 1, variant: "Body", children: E(t.snowball_drawer_debt_label, "C") }),
-                    /* @__PURE__ */ e(l, { variant: "Body", children: "$1,000.00" })
+                    /* @__PURE__ */ e(l, { flexGrow: 1, variant: "body1", children: E(t.snowball_drawer_debt_label, "C") }),
+                    /* @__PURE__ */ e(l, { variant: "body1", children: "$1,000.00" })
                   ]
                 }
               )
@@ -493,15 +493,15 @@ const F = () => {
                   borderBottom: `1px solid ${r.palette.border.light}`
                 },
                 children: [
-                  /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: t.snowball_drawer_total_label }),
-                  /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: "$1,500.00" })
+                  /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: t.snowball_drawer_total_label }),
+                  /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: "$1,500.00" })
                 ]
               }
             )
           ] }),
           /* @__PURE__ */ s(_, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
-            /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: E(t.snowball_drawer_month_header, 3) }),
-            /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: t.snowball_drawer_payment_header })
+            /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: E(t.snowball_drawer_month_header, 3) }),
+            /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: t.snowball_drawer_payment_header })
           ] }),
           /* @__PURE__ */ s(_, { bgcolor: r.palette.background.paper, mb: 24, children: [
             /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, children: [
@@ -518,7 +518,7 @@ const F = () => {
                     backgroundColor: r.palette.success.main,
                     marginRight: 12
                   },
-                  children: /* @__PURE__ */ e(l, { color: "white", fontWeight: 700, variant: "Small", children: "✓" })
+                  children: /* @__PURE__ */ e(l, { color: "white", fontWeight: 700, variant: "body2", children: "✓" })
                 }
               ),
               /* @__PURE__ */ s(
@@ -532,16 +532,16 @@ const F = () => {
                     pr: 24
                   },
                   children: [
-                    /* @__PURE__ */ e(_, { flexGrow: 1, children: /* @__PURE__ */ e(l, { variant: "Body", children: E(t.snowball_drawer_debt_label, "C") }) }),
+                    /* @__PURE__ */ e(_, { flexGrow: 1, children: /* @__PURE__ */ e(l, { variant: "body1", children: E(t.snowball_drawer_debt_label, "C") }) }),
                     /* @__PURE__ */ s(_, { children: [
-                      /* @__PURE__ */ e(l, { variant: "Body", children: "$1,500.00" }),
+                      /* @__PURE__ */ e(l, { variant: "body1", children: "$1,500.00" }),
                       /* @__PURE__ */ e(
                         l,
                         {
                           bold: !0,
                           color: r.palette.success.main,
                           textAlign: "end",
-                          variant: "Tiny",
+                          variant: "tiny",
                           children: t.snowball_drawer_paid_label
                         }
                       )
@@ -562,8 +562,8 @@ const F = () => {
                   borderBottom: `1px solid ${r.palette.border.light}`
                 },
                 children: [
-                  /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: t.snowball_drawer_total_label }),
-                  /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: "$1,500.00" })
+                  /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: t.snowball_drawer_total_label }),
+                  /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: "$1,500.00" })
                 ]
               }
             )
@@ -572,50 +572,50 @@ const F = () => {
       ] })
     }
   );
-}, St = v(Ct), vt = "#FF7B08";
-function Dt(a, o) {
-  const [r, t, n] = a.replace(/^#/, "").match(/.{1,2}/g).map((c) => parseInt(c, 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)))
+}, vt = D(Ct), Dt = "#FF7B08";
+function St(o, n) {
+  const [r, t, a] = o.replace(/^#/, "").match(/.{1,2}/g).map((c) => parseInt(c, 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(a * n)))
   ];
   return `rgb(${i[0]}, ${i[1]}, ${i[2]})`;
 }
 const Ae = ({
-  sx: a,
-  height: o = 500,
+  sx: o,
+  height: n = 500,
   width: r,
   debts: t,
-  hoveredDebtGuid: n,
+  hoveredDebtGuid: a,
   onClickArea: i,
   onHoverArea: c
 }) => {
-  const d = Ze(), { onEvent: p } = R(), h = t.filter((u) => !u.is_impossible), m = [
+  const d = Ze(), { onEvent: p } = B(), m = t.filter((u) => !u.is_impossible), h = [
     ...new Set(
-      h.flatMap((u) => u.dataset.map((f) => new Date(f.x).getTime()))
+      m.flatMap((u) => u.dataset.map((f) => new Date(f.x).getTime()))
     )
-  ].sort((u, f) => u - f).map((u) => new Date(u)), w = h.map((u) => {
+  ].sort((u, f) => u - f).map((u) => new Date(u)), w = m.map((u) => {
     const f = new Map(u.dataset.map((L) => [new Date(L.x).getTime(), L.y]));
-    let A = f.get(m[0].getTime()) ?? 0;
-    const k = m.map((L) => {
+    let A = f.get(h[0].getTime()) ?? 0;
+    const N = h.map((L) => {
       const z = f.get(L.getTime()) ?? A;
       return A = z, { x: L, y: z };
     });
-    return { ...u, dataset: k };
+    return { ...u, dataset: N };
   }), b = w.reduce(
     (u, f) => u + (f.dataset[0]?.y ?? 0),
     0
-  ), B = m.map((u, f) => {
-    const A = f / (m.length - 1), k = b * (1 - A);
-    return { x: u, y: k };
-  }), M = Math.ceil(b / 100) * 100, I = m, S = w.map((u, f) => {
-    const A = 1 - f / w.length * 0.5, k = Dt(vt, A);
+  ), M = h.map((u, f) => {
+    const A = f / (h.length - 1), N = b * (1 - A);
+    return { x: u, y: N };
+  }), k = Math.ceil(b / 100) * 100, I = h, v = w.map((u, f) => {
+    const A = 1 - f / w.length * 0.5, N = St(Dt, A);
     return {
       id: `debt-${f}`,
       guid: u.guid,
       label: u.name,
       data: u.dataset.map((L) => L.y),
-      color: k,
+      color: N,
       curve: "linear",
       type: "line",
       area: !0,
@@ -623,10 +623,10 @@ const Ae = ({
       showMark: !1
     };
   });
-  S.push({
+  v.push({
     id: "payoff-line",
     label: "Payoff Line",
-    data: B.map((u) => u.y),
+    data: M.map((u) => u.y),
     color: d.palette.grey[700],
     curve: "linear",
     type: "line",
@@ -634,7 +634,7 @@ const Ae = ({
     showMark: !1,
     disableHighlight: !0
   });
-  const T = (u) => S.findIndex((f) => f?.guid === u);
+  const T = (u) => v.findIndex((f) => f?.guid === u);
   return /* @__PURE__ */ e(
     le,
     {
@@ -655,19 +655,19 @@ const Ae = ({
         {
           axisHighlight: { x: "none" },
           disableLineItemHighlight: !0,
-          height: o,
+          height: n,
           hideLegend: !0,
           margin: { bottom: 24, left: 32, right: 72, top: 48 },
           onAreaClick: (u, f) => {
             i?.();
-            const A = S.find((k) => k.id === f.seriesId);
-            p(D.DEBTS_CLICK_CHART_AREA, { account_guid: A?.guid });
+            const A = v.find((N) => N.id === f.seriesId);
+            p(S.DEBTS_CLICK_CHART_AREA, { account_guid: A?.guid });
           },
           onHighlightChange: (u) => {
-            const f = S.find((A) => A.id === u?.seriesId)?.guid;
+            const f = v.find((A) => A.id === u?.seriesId)?.guid;
             c?.(f ?? "");
           },
-          series: S,
+          series: v,
           skipAnimation: !0,
           slotProps: { tooltip: { trigger: "none" } },
           sx: {
@@ -687,23 +687,23 @@ const Ae = ({
               strokeDasharray: "10 5",
               strokeWidth: 1
             },
-            [`& .MuiLineElement-series-debt-${T(n ?? "0")}`]: {
+            [`& .MuiLineElement-series-debt-${T(a ?? "0")}`]: {
               opacity: 1
             },
-            [`& .MuiAreaElement-series-debt-${T(n ?? "0")}`]: {
+            [`& .MuiAreaElement-series-debt-${T(a ?? "0")}`]: {
               opacity: 1
             },
             "& .MuiChartsAxis-tickLabel > tspan": {
-              fontFamily: d.typography.Small.fontFamily
+              fontFamily: d.typography.body2.fontFamily
             },
-            ...a
+            ...o
           },
           width: r,
           xAxis: [
             {
               data: I,
               disableTicks: !0,
-              min: m[0],
+              min: h[0],
               scaleType: "time",
               tickLabelMinGap: 24,
               valueFormatter: (u) => Q(u, ee.MONTH_SHORT_YEAR)
@@ -712,9 +712,9 @@ const Ae = ({
           yAxis: [
             {
               min: 0,
-              max: M,
+              max: k,
               disableTicks: !0,
-              valueFormatter: (u) => N(u, "0a")
+              valueFormatter: (u) => R(u, "0a")
             }
           ]
         }
@@ -722,10 +722,10 @@ const Ae = ({
     }
   );
 }, Tt = () => {
-  const a = Y(), { debts: o } = C(), { selectedDebtChartData: r } = F();
+  const o = V(), { debts: n } = C(), { selectedDebtChartData: r } = F();
   return /* @__PURE__ */ s($, { children: [
     /* @__PURE__ */ s(
-      Ke,
+      Ue,
       {
         sx: {
           "& .MuiCardContent-root:last-child": {
@@ -733,70 +733,70 @@ const Ae = ({
           }
         },
         children: [
-          /* @__PURE__ */ e(qe, { sx: { pb: 0 }, title: /* @__PURE__ */ e(Fe, { sx: { pb: 4 }, children: o.details_chart_title }) }),
-          /* @__PURE__ */ e(Ue, { sx: { p: 0 }, children: /* @__PURE__ */ e(Ae, { debts: [r], height: 250 }) })
+          /* @__PURE__ */ e(Xe, { sx: { pb: 0 }, title: /* @__PURE__ */ e(Fe, { sx: { pb: 4 }, children: n.details_chart_title }) }),
+          /* @__PURE__ */ e(qe, { sx: { p: 0 }, children: /* @__PURE__ */ e(Ae, { debts: [r], height: 250 }) })
         ]
       }
     ),
     /* @__PURE__ */ e(
       l,
       {
-        color: a.palette.text.secondary,
+        color: o.palette.text.secondary,
         sx: { whiteSpace: "normal", textAlign: "center", px: 8, py: 12 },
-        variant: "Small",
-        children: o.details_chart_description
+        variant: "body2",
+        children: n.details_chart_description
       }
     )
   ] });
-}, At = v(Tt), Et = () => {
-  const a = Y(), { onEvent: o } = R(), { debts: r } = C(), { selectedDebtChartData: t, showCompleted: n, showError: i } = F();
-  return g.useEffect(() => o(D.DEBT_SCHEDULE_VIEW), []), /* @__PURE__ */ e(Se, { children: i || n ? /* @__PURE__ */ e(
+}, At = D(Tt), Et = () => {
+  const o = V(), { onEvent: n } = B(), { debts: r } = C(), { selectedDebtChartData: t, showCompleted: a, showError: i } = F();
+  return x.useEffect(() => n(S.DEBT_SCHEDULE_VIEW), []), /* @__PURE__ */ e(ve, { children: i || a ? /* @__PURE__ */ e(
     l,
     {
-      color: a.palette.secondary.main,
+      color: o.palette.secondary.main,
       component: "div",
       sx: { p: 32, textAlign: "center", whiteSpace: "normal" },
-      variant: "Small",
+      variant: "body2",
       children: i ? r.schedule_error_message : r.schedule_complete_message
     }
   ) : /* @__PURE__ */ s($, { children: [
-    /* @__PURE__ */ s(x, { 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 })
+    /* @__PURE__ */ s(g, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
+      /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: r.schedule_month_heading }),
+      /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: r.schedule_amount_heading })
     ] }),
-    t.dataset.slice(1).map(({ x: c, y: d, payment: p }) => /* @__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: c, y: d, payment: p }) => /* @__PURE__ */ e(g, { bgcolor: o.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}`,
+          borderBottom: `1px solid ${o.palette.border.light}`,
           flexDirection: "row",
           flexGrow: 1,
           py: 14,
           pr: 24
         },
         children: [
-          /* @__PURE__ */ s(x, { flexGrow: 1, children: [
-            /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: Q(c, ee.MONTH_YEAR) }),
-            /* @__PURE__ */ e(l, { color: a.palette.secondary.main, variant: "XSmall", children: r.schedule_month_label })
+          /* @__PURE__ */ s(g, { flexGrow: 1, children: [
+            /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: Q(c, ee.MONTH_YEAR) }),
+            /* @__PURE__ */ e(l, { color: o.palette.secondary.main, variant: "caption", children: r.schedule_month_label })
           ] }),
-          /* @__PURE__ */ s(x, { children: [
-            /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: N(d, "0,0.00") }),
+          /* @__PURE__ */ s(g, { children: [
+            /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: R(d, "0,0.00") }),
             /* @__PURE__ */ e(
               l,
               {
                 bold: !0,
-                color: a.palette.success.main,
+                color: o.palette.success.main,
                 textAlign: "end",
-                variant: "Tiny",
-                children: `+${N(p, "0,0")}`
+                variant: "tiny",
+                children: `+${R(p, "0,0")}`
               }
             )
           ] })
         ]
       }
     ) }) }, String(c))),
-    /* @__PURE__ */ e(x, { bgcolor: "background.paper", children: /* @__PURE__ */ s(
-      x,
+    /* @__PURE__ */ e(g, { bgcolor: "background.paper", children: /* @__PURE__ */ s(
+      g,
       {
         sx: {
           alignItems: "center",
@@ -806,135 +806,135 @@ const Ae = ({
           px: 24
         },
         children: [
-          /* @__PURE__ */ e(l, { flexGrow: 1, variant: "Body", children: r.schedule_payoff_label }),
-          /* @__PURE__ */ e(l, { variant: "Body", children: "-" })
+          /* @__PURE__ */ e(l, { flexGrow: 1, variant: "body1", children: r.schedule_payoff_label }),
+          /* @__PURE__ */ e(l, { variant: "body1", children: "-" })
         ]
       }
     ) })
   ] }) });
-}, It = v(Et), Bt = v(({ debt: a }) => {
-  const { debts: o } = C(), { updateAccount: r } = re(), { onEvent: t } = R(), [n, i] = g.useState(a.interest_rate ?? 0), c = n < 0, d = async () => {
-    await r({ ...a.account, interest_rate: n }), a.interest_rate = n, t(D.DEBTS_SAVE_RATE_ACTION, { account_guid: a.guid });
+}, It = D(Et), Mt = D(({ debt: o }) => {
+  const { debts: n } = C(), { updateAccount: r } = re(), { onEvent: t } = B(), [a, i] = x.useState(o.interest_rate ?? 0), c = a < 0, d = async () => {
+    await r({ ...o.account, interest_rate: a }), o.interest_rate = a, t(S.DEBTS_SAVE_RATE_ACTION, { account_guid: o.guid });
   }, p = () => {
     setTimeout(() => {
-      i(a.interest_rate ?? 0);
+      i(o.interest_rate ?? 0);
     }, 250);
   };
   return /* @__PURE__ */ e(
-    ae,
+    oe,
     {
       isSaveDisabled: c,
-      label: `${o.details_interest_rate} (%)`,
+      label: `${n.details_interest_rate} (%)`,
       onCancel: p,
       onSave: d,
-      primaryText: o.details_interest_rate,
-      secondaryText: Ge(Number(a.interest_rate) / 100),
-      zeroStateText: a.interest_rate ? void 0 : o.add_interest_rate,
+      primaryText: n.details_interest_rate,
+      secondaryText: Ge(Number(o.interest_rate) / 100),
+      zeroStateText: o.interest_rate ? void 0 : n.add_interest_rate,
       children: /* @__PURE__ */ e(
-        at,
+        ot,
         {
           error: c,
           fullWidth: !0,
-          onChange: (h) => i(isNaN(parseFloat(h.target.value)) ? 0 : parseFloat(h.target.value)),
+          onChange: (m) => i(isNaN(parseFloat(m.target.value)) ? 0 : parseFloat(m.target.value)),
           type: "number",
-          value: n
+          value: a
         }
       )
     }
   );
-}), Mt = v(({ debt: a }) => {
-  const { debts: o } = C(), { updateAccount: r } = re(), { onEvent: t } = R(), [n, i] = g.useState(a.monthly_payment ?? 0), c = n < 0 || n > 9999999999e-2, d = async () => {
-    await r({ ...a.account, minimum_payment: n }), a.monthly_payment = n, t(D.DEBTS_SAVE_PAYMENT_ACTION, { account_guid: a.guid });
+}), kt = D(({ debt: o }) => {
+  const { debts: n } = C(), { updateAccount: r } = re(), { onEvent: t } = B(), [a, i] = x.useState(o.monthly_payment ?? 0), c = a < 0 || a > 9999999999e-2, d = async () => {
+    await r({ ...o.account, minimum_payment: a }), o.monthly_payment = a, t(S.DEBTS_SAVE_PAYMENT_ACTION, { account_guid: o.guid });
   }, p = () => {
     setTimeout(() => {
-      i(a.monthly_payment ?? 0);
+      i(o.monthly_payment ?? 0);
     }, 250);
   };
   return /* @__PURE__ */ e(
-    ae,
+    oe,
     {
       isSaveDisabled: c,
-      label: o.details_monthly_payment,
+      label: n.details_monthly_payment,
       onCancel: p,
       onSave: d,
-      primaryText: o.details_monthly_payment,
-      secondaryText: N(a.monthly_payment, "0,0"),
-      zeroStateText: a.monthly_payment ? void 0 : o.add_monthly_payment,
+      primaryText: n.details_monthly_payment,
+      secondaryText: R(o.monthly_payment, "0,0"),
+      zeroStateText: o.monthly_payment ? void 0 : n.add_monthly_payment,
       children: /* @__PURE__ */ e(
         se,
         {
-          amount: n,
+          amount: a,
           autoFocus: !0,
           error: c,
           fullWidth: !0,
           minAmount: 0,
-          setAmount: (h) => i(isNaN(Number(h)) ? n : Number(h)),
-          sx: { ".MuiTypography-Body": { p: 0 } }
+          setAmount: (m) => i(isNaN(Number(m)) ? a : Number(m)),
+          sx: { ".MuiTypography-body1": { p: 0 } }
         }
       )
     }
   );
-}), kt = v(({ debt: a }) => {
-  const { debts: o } = C(), { updateAccount: r } = re(), { onEvent: t } = R(), [n, i] = g.useState(a.original_balance ?? 0), c = n < 0 || n > 9999999999e-2, d = async () => {
-    await r({ ...a.account, original_balance: n }), a.original_balance = n, t(D.DEBTS_SAVE_BALANCE_ACTION, { account_guid: a.guid });
+}), Nt = D(({ debt: o }) => {
+  const { debts: n } = C(), { updateAccount: r } = re(), { onEvent: t } = B(), [a, i] = x.useState(o.original_balance ?? 0), c = a < 0 || a > 9999999999e-2, d = async () => {
+    await r({ ...o.account, original_balance: a }), o.original_balance = a, t(S.DEBTS_SAVE_BALANCE_ACTION, { account_guid: o.guid });
   }, p = () => {
     setTimeout(() => {
-      i(a.original_balance ?? 0);
+      i(o.original_balance ?? 0);
     }, 250);
   };
   return /* @__PURE__ */ e(
-    ae,
+    oe,
     {
       isSaveDisabled: c,
-      label: o.details_original_balance,
+      label: n.details_original_balance,
       onCancel: p,
       onSave: d,
-      primaryText: o.details_original_balance,
-      secondaryText: N(a.original_balance, "0,0"),
-      zeroStateText: a.original_balance ? void 0 : o.add_original_balance,
+      primaryText: n.details_original_balance,
+      secondaryText: R(o.original_balance, "0,0"),
+      zeroStateText: o.original_balance ? void 0 : n.add_original_balance,
       children: /* @__PURE__ */ e(
         se,
         {
-          amount: n,
+          amount: a,
           autoFocus: !0,
           error: c,
           fullWidth: !0,
           minAmount: 0,
-          setAmount: (h) => i(isNaN(Number(h)) ? n : Number(h)),
-          sx: { ".MuiTypography-Body": { p: 0 } }
+          setAmount: (m) => i(isNaN(Number(m)) ? a : Number(m)),
+          sx: { ".MuiTypography-body1": { p: 0 } }
         }
       )
     }
   );
 }), Pt = () => {
-  const { onEvent: a } = R(), { selectedDebtChartData: o } = F();
-  return g.useEffect(() => a(D.DEBT_DETAILS_VIEW), []), /* @__PURE__ */ s(x, { bgcolor: "background.paper", children: [
-    o?.goal && /* @__PURE__ */ s($, { children: [
-      /* @__PURE__ */ e(et, { goal: o.goal }),
+  const { onEvent: o } = B(), { selectedDebtChartData: n } = F();
+  return x.useEffect(() => o(S.DEBT_DETAILS_VIEW), []), /* @__PURE__ */ s(g, { bgcolor: "background.paper", children: [
+    n?.goal && /* @__PURE__ */ s($, { children: [
+      /* @__PURE__ */ e(et, { goal: n.goal }),
       /* @__PURE__ */ e(G, {}),
-      /* @__PURE__ */ e(tt, { goal: o.goal }),
+      /* @__PURE__ */ e(tt, { goal: n.goal }),
       /* @__PURE__ */ e(G, {}),
-      /* @__PURE__ */ e(rt, { goal: o.goal }),
+      /* @__PURE__ */ e(rt, { goal: n.goal }),
       /* @__PURE__ */ e(G, {})
     ] }),
-    !o?.goal && o?.account && /* @__PURE__ */ s($, { children: [
-      /* @__PURE__ */ e(Mt, { debt: o }),
+    !n?.goal && n?.account && /* @__PURE__ */ s($, { children: [
+      /* @__PURE__ */ e(kt, { debt: n }),
       /* @__PURE__ */ e(G, {}),
-      /* @__PURE__ */ e(Bt, { debt: o }),
+      /* @__PURE__ */ e(Mt, { debt: n }),
       /* @__PURE__ */ e(G, {}),
-      /* @__PURE__ */ e(kt, { debt: o }),
+      /* @__PURE__ */ e(Nt, { debt: n }),
       /* @__PURE__ */ e(G, {})
     ] })
   ] });
-}, Nt = v(Pt), Rt = ({ setTabValue: a, sx: o }) => {
-  const { debts: r } = C(), { showError: t, showCompleted: n } = F();
-  return g.useEffect(() => {
-    t && a(1);
-  }, [t]), !t && !n ? /* @__PURE__ */ e($, {}) : /* @__PURE__ */ s(x, { gap: 16, children: [
-    /* @__PURE__ */ e(ge, { sx: { my: 16, mx: 24, ...o }, children: /* @__PURE__ */ s(
+}, Rt = D(Pt), Bt = ({ setTabValue: o, sx: n }) => {
+  const { debts: r } = C(), { showError: t, showCompleted: a } = F();
+  return x.useEffect(() => {
+    t && o(1);
+  }, [t]), !t && !a ? /* @__PURE__ */ e($, {}) : /* @__PURE__ */ s(g, { gap: 16, children: [
+    /* @__PURE__ */ e(xe, { sx: { my: 16, mx: 24, ...n }, children: /* @__PURE__ */ s(
       ye,
       {
-        icon: t ? /* @__PURE__ */ e(ot, { filled: !0 }) : /* @__PURE__ */ e(ve, { color: "success", filled: !0 }),
+        icon: t ? /* @__PURE__ */ e(nt, { filled: !0 }) : /* @__PURE__ */ e(De, { color: "success", filled: !0 }),
         severity: "error",
         sx: {
           alignItems: "start",
@@ -947,12 +947,12 @@ const Ae = ({
           }
         },
         children: [
-          /* @__PURE__ */ e(fe, { sx: { fontWeight: 600, marginTop: 2 }, variant: "Body", children: t ? r.status_error_title : r.status_complete_title }),
-          /* @__PURE__ */ e(l, { component: "p", sx: { whiteSpace: "wrap" }, variant: "ParagraphSmall", children: t ? r.status_error_description : r.status_complete_description })
+          /* @__PURE__ */ e(fe, { sx: { fontWeight: 600, marginTop: 2 }, variant: "body1", children: t ? r.status_error_title : r.status_complete_title }),
+          /* @__PURE__ */ e(l, { component: "p", sx: { whiteSpace: "wrap" }, variant: "subtitle2", children: t ? r.status_error_description : r.status_complete_description })
         ]
       }
     ) }),
-    t && /* @__PURE__ */ e(ge, { sx: { mb: 16, mt: 100, mx: 24, ...o }, children: /* @__PURE__ */ s(
+    t && /* @__PURE__ */ e(xe, { sx: { mb: 16, mt: 100, mx: 24, ...n }, children: /* @__PURE__ */ s(
       ye,
       {
         icon: /* @__PURE__ */ e($, {}),
@@ -965,22 +965,22 @@ const Ae = ({
           }
         },
         children: [
-          /* @__PURE__ */ e(fe, { sx: { fontWeight: 600, marginTop: 2 }, variant: "Body", children: r.status_info_title }),
-          /* @__PURE__ */ e(l, { component: "p", sx: { whiteSpace: "wrap" }, variant: "ParagraphSmall", children: r.status_info_description })
+          /* @__PURE__ */ e(fe, { sx: { fontWeight: 600, marginTop: 2 }, variant: "body1", children: r.status_info_title }),
+          /* @__PURE__ */ e(l, { component: "p", sx: { whiteSpace: "wrap" }, variant: "subtitle2", children: r.status_info_description })
         ]
       }
     ) })
   ] });
-}, Ft = v(Rt), Lt = () => {
-  const { debts: a } = C(), { showError: o, showCompleted: r } = F(), [t, n] = g.useState(0);
+}, Ft = D(Bt), Lt = () => {
+  const { debts: o } = C(), { showError: n, showCompleted: r } = F(), [t, a] = x.useState(0);
   return /* @__PURE__ */ s($, { children: [
-    (o || r) && /* @__PURE__ */ e(Ft, { setTabValue: n, sx: { mt: -24 } }),
+    (n || r) && /* @__PURE__ */ e(Ft, { setTabValue: a, sx: { mt: -24 } }),
     /* @__PURE__ */ s(
       Qe,
       {
-        "aria-label": a.details_tabs_aria_label,
+        "aria-label": o.details_tabs_aria_label,
         centered: !0,
-        onChange: (i, c) => n(c),
+        onChange: (i, c) => a(c),
         textColor: "primary",
         value: t,
         variant: "fullWidth",
@@ -990,7 +990,7 @@ const Ae = ({
             {
               "aria-controls": "debt-schedule-tabpanel-0",
               id: "debt-schedule-tab-0",
-              label: a.schedule_tab_label
+              label: o.schedule_tab_label
             }
           ),
           /* @__PURE__ */ e(
@@ -998,116 +998,116 @@ const Ae = ({
             {
               "aria-controls": "debt-details-tabpanel-1",
               id: "debt-details-tab-1",
-              label: a.details_tab_label
+              label: o.details_tab_label
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ e(xe, { index: 0, name: "debt-schedule", value: t, children: /* @__PURE__ */ e(It, {}) }),
-    /* @__PURE__ */ e(xe, { index: 1, name: "debt-details", value: t, children: /* @__PURE__ */ e(Nt, {}) })
+    /* @__PURE__ */ e(ge, { index: 0, name: "debt-schedule", value: t, children: /* @__PURE__ */ e(It, {}) }),
+    /* @__PURE__ */ e(ge, { index: 1, name: "debt-details", value: t, children: /* @__PURE__ */ e(Rt, {}) })
   ] });
-}, $t = v(Lt), Ht = ({ isOpen: a, onClose: o }) => {
-  const { debts: r } = C(), { showError: t, showCompleted: n } = F(), i = t || n ? /* @__PURE__ */ e($, {}) : /* @__PURE__ */ e(At, {});
+}, $t = D(Lt), Ot = ({ isOpen: o, onClose: n }) => {
+  const { debts: r } = C(), { showError: t, showCompleted: a } = F(), i = t || a ? /* @__PURE__ */ e($, {}) : /* @__PURE__ */ e(At, {});
   return /* @__PURE__ */ e(
     ie,
     {
       ariaLabelClose: r.details_close_aria,
-      isOpen: a,
-      onClose: o,
+      isOpen: o,
+      onClose: n,
       title: r.details_title,
-      children: /* @__PURE__ */ s(x, { bgcolor: "background.default", children: [
-        /* @__PURE__ */ e(Ye, { customDetailsChart: i }),
+      children: /* @__PURE__ */ s(g, { bgcolor: "background.default", children: [
+        /* @__PURE__ */ e(Ve, { customDetailsChart: i }),
         /* @__PURE__ */ e($t, {})
       ] })
     }
   );
-}, Ot = v(() => {
-  const { debts: a } = C(), { monthlyCashFlowProfile: o, updateMonthlyCashFlowProfile: r } = V(), { onEvent: t } = R(), [n, i] = g.useState(o?.extra_payment ?? 0), c = n < 0 || n > 9999999999e-2, d = async () => {
-    o && (await r({ ...o, extra_payment: n }), o.extra_payment = n, t(D.DEBTS_SAVE_PAYDOWN_ACTION, {
-      user_guid: o?.user_guid
+}, Ht = D(() => {
+  const { debts: o } = C(), { monthlyCashFlowProfile: n, updateMonthlyCashFlowProfile: r } = K(), { onEvent: t } = B(), [a, i] = x.useState(n?.extra_payment ?? 0), c = a < 0 || a > 9999999999e-2, d = async () => {
+    n && (await r({ ...n, extra_payment: a }), n.extra_payment = a, t(S.DEBTS_SAVE_PAYDOWN_ACTION, {
+      user_guid: n?.user_guid
     }));
   }, p = () => {
     setTimeout(() => {
-      i(o?.extra_payment ?? 0);
+      i(n?.extra_payment ?? 0);
     }, 250);
   };
   return /* @__PURE__ */ e(
-    ae,
+    oe,
     {
       isSaveDisabled: c,
-      label: a.paydown_drawer_extra_payment,
+      label: o.paydown_drawer_extra_payment,
       onCancel: p,
       onSave: d,
-      primaryText: a.paydown_drawer_extra_payment,
-      secondaryText: N(o?.extra_payment, "0,0"),
-      zeroStateText: o?.extra_payment ? void 0 : a.add_extra_payment,
+      primaryText: o.paydown_drawer_extra_payment,
+      secondaryText: R(n?.extra_payment, "0,0"),
+      zeroStateText: n?.extra_payment ? void 0 : o.add_extra_payment,
       children: /* @__PURE__ */ e(
         se,
         {
-          amount: n,
+          amount: a,
           autoFocus: !0,
           error: c,
           fullWidth: !0,
           minAmount: 0,
-          setAmount: (h) => i(isNaN(Number(h)) ? n : Number(h)),
-          sx: { ".MuiTypography-Body": { p: 0 } }
+          setAmount: (m) => i(isNaN(Number(m)) ? a : Number(m)),
+          sx: { ".MuiTypography-body1": { p: 0 } }
         }
       )
     }
   );
 }), Wt = () => {
-  const { debts: a } = C(), { totalMonthlyPayments: o } = te(), { monthlyCashFlowProfile: r } = V(), 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: [
-        /* @__PURE__ */ e(l, { variant: "Body", children: a.paydown_drawer_mimimum_label }),
-        /* @__PURE__ */ e(Ce, { bold: !0, variant: "H1", children: N(o, "0,0") }),
-        /* @__PURE__ */ e(l, { textAlign: "center", truncate: !1, variant: "Small", width: 208, children: a.paydown_drawer_minimum_info })
+  const { debts: o } = C(), { totalMonthlyPayments: n } = te(), { monthlyCashFlowProfile: r } = K(), 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: "body1", children: o.paydown_drawer_mimimum_label }),
+        /* @__PURE__ */ e(Ce, { bold: !0, variant: "h1", children: R(n, "0,0") }),
+        /* @__PURE__ */ e(l, { textAlign: "center", truncate: !1, variant: "body2", width: 208, children: o.paydown_drawer_minimum_info })
       ] }),
-      /* @__PURE__ */ s(x, { children: [
-        /* @__PURE__ */ e(l, { variant: "H3", children: a.paydown_drawer_subtitle }),
-        /* @__PURE__ */ e(l, { truncate: !1, variant: "ParagraphSmall", children: a.paydown_drawer_description })
+      /* @__PURE__ */ s(g, { children: [
+        /* @__PURE__ */ e(l, { variant: "h3", children: o.paydown_drawer_subtitle }),
+        /* @__PURE__ */ e(l, { truncate: !1, variant: "subtitle2", children: o.paydown_drawer_description })
       ] })
     ] }),
-    /* @__PURE__ */ e(x, { sx: { backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(Ot, {}) }),
-    /* @__PURE__ */ e(x, { flexDirection: "row-reverse", px: 24, py: 12, children: /* @__PURE__ */ s(x, { gap: 4, children: [
-      /* @__PURE__ */ e(l, { variant: "Small", children: a.paydown_drawer_total_payment }),
-      /* @__PURE__ */ e(l, { bold: !0, textAlign: "right", variant: "Body", children: N(t, "0,0") })
+    /* @__PURE__ */ e(g, { sx: { backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(Ht, {}) }),
+    /* @__PURE__ */ e(g, { flexDirection: "row-reverse", px: 24, py: 12, children: /* @__PURE__ */ s(g, { gap: 4, children: [
+      /* @__PURE__ */ e(l, { variant: "body2", children: o.paydown_drawer_total_payment }),
+      /* @__PURE__ */ e(l, { bold: !0, textAlign: "right", variant: "body1", children: R(t, "0,0") })
     ] }) })
   ] });
-}, Gt = v(Wt), jt = ({ isOpen: a, onClose: o }) => {
+}, Gt = D(Wt), jt = ({ isOpen: o, onClose: n }) => {
   const { debts: r } = C();
   return /* @__PURE__ */ e(
     ie,
     {
       ariaLabelClose: r.paydown_drawer_close_aria,
-      isOpen: a,
-      onClose: o,
+      isOpen: o,
+      onClose: n,
       title: r.paydown_drawer_title,
       children: /* @__PURE__ */ e(Gt, {})
     }
   );
 };
-function zt(a, o) {
+function zt(o, 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(o) - r(n);
 }
-function Xt(a) {
-  return a.is_paid_off ? "✓" : a.priority === void 0 || a.is_impossible ? "!" : a.priority;
+function Yt(o) {
+  return o.is_paid_off ? "✓" : o.priority === void 0 || o.is_impossible ? "!" : o.priority;
 }
-const Yt = (a) => {
-  const o = {
+const Vt = (o) => {
+  const n = {
     text: "#121417",
     background: "#FFB252"
   };
-  return a === "!" && (o.text = "#FFFFFF", o.background = "#DF320C"), a === "✓" && (o.text = "#FFFFFF", o.background = "#09A57F"), o;
-}, Vt = (a) => {
-  const o = String(a.formattedValue), r = Yt(o);
+  return o === "!" && (n.text = "#FFFFFF", n.background = "#DF320C"), o === "✓" && (n.text = "#FFFFFF", n.background = "#09A57F"), n;
+}, Kt = (o) => {
+  const n = String(o.formattedValue), r = Vt(n);
   return /* @__PURE__ */ e(
     le,
     {
@@ -1122,39 +1122,39 @@ const Yt = (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: "body2", children: n })
     }
   );
-}, Kt = (a) => {
-  const o = a.row.account, r = it[o.account_type];
-  return /* @__PURE__ */ s(x, { alignItems: "center", flexDirection: "row", children: [
+}, Ut = (o) => {
+  const n = o.row.account, r = it[n.account_type];
+  return /* @__PURE__ */ s(g, { alignItems: "center", flexDirection: "row", children: [
     /* @__PURE__ */ e(
       Le,
       {
-        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__ */ e(l, { variant: "XSmall", children: r })
+    /* @__PURE__ */ s(g, { ml: 12, children: [
+      /* @__PURE__ */ e(l, { variant: "body2", children: n.name }),
+      /* @__PURE__ */ e(l, { variant: "caption", children: r })
     ] })
   ] });
-}, Ut = ({
-  sx: a = {},
-  debts: o,
+}, qt = ({
+  sx: o = {},
+  debts: n,
   hoveredDebtGuid: r,
   onHoverRow: t,
-  onClickRow: n
+  onClickRow: a
 }) => {
-  const i = Y(), { onEvent: c } = R(), { isMobile: d } = K(), { debts: p, common: h } = C(), [m, w] = g.useState([
+  const i = V(), { onEvent: c } = B(), { isMobile: d } = U(), { debts: p, common: m } = C(), [h, w] = x.useState([
     { field: "priority", sort: "asc" }
   ]), b = [
     {
       field: "priority",
       headerName: p.table_column_priority,
       renderHeader: j,
-      renderCell: Vt,
+      renderCell: Kt,
       sortComparator: zt,
       sortable: !0,
       hideSortIcons: !0,
@@ -1168,7 +1168,7 @@ const Yt = (a) => {
       field: "account",
       headerName: p.table_column_account,
       renderHeader: j,
-      renderCell: Kt,
+      renderCell: Ut,
       sortable: !1,
       type: "custom",
       align: "left",
@@ -1180,7 +1180,7 @@ const Yt = (a) => {
       field: "balance",
       headerName: p.table_column_balance,
       renderHeader: j,
-      renderCell: (y) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: N(y.value, "0,0") }),
+      renderCell: (y) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "body2", children: R(y.value, "0,0") }),
       sortable: !0,
       hideSortIcons: d,
       type: "number",
@@ -1193,7 +1193,7 @@ const Yt = (a) => {
       field: "interest_rate",
       headerName: p.table_column_interest_rate,
       renderHeader: j,
-      renderCell: (y) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: isNaN(y.value) ? "---" : `${Number(y.value).toFixed(2)}%` }),
+      renderCell: (y) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "body2", children: isNaN(y.value) ? "---" : `${Number(y.value).toFixed(2)}%` }),
       sortable: !0,
       hideSortIcons: d,
       type: "number",
@@ -1206,7 +1206,7 @@ const Yt = (a) => {
       field: "projected_payoff_date",
       headerName: p.table_column_payoff_date,
       renderHeader: j,
-      renderCell: (y) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: y.value ? Q(y.value, ee.MONTH_SHORT_YEAR) : "---" }),
+      renderCell: (y) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "body2", children: y.value ? Q(y.value, ee.MONTH_SHORT_YEAR) : "---" }),
       sortable: !0,
       hideSortIcons: d,
       type: "number",
@@ -1219,7 +1219,7 @@ const Yt = (a) => {
       field: "monthly_payment",
       headerName: p.table_column_amount_due,
       renderHeader: j,
-      renderCell: (y) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: typeof y.value == "number" ? N(y.value, "0,0") : "---" }),
+      renderCell: (y) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "body2", children: typeof y.value == "number" ? R(y.value, "0,0") : "---" }),
       sortable: !0,
       hideSortIcons: d,
       type: "number",
@@ -1228,13 +1228,13 @@ const Yt = (a) => {
       minWidth: 122,
       flex: 0.6
     }
-  ], B = [
+  ], M = [
     ...b.slice(0, 3),
     {
       field: "chevron",
       headerClassName: "chevron-header",
       headerName: "",
-      renderCell: () => /* @__PURE__ */ e(_, { "aria-label": h.see_details, role: "button", children: /* @__PURE__ */ e(ne, { name: "chevron_right" }) }),
+      renderCell: () => /* @__PURE__ */ e(_, { "aria-label": m.see_details, role: "button", children: /* @__PURE__ */ e(ae, { name: "chevron_right" }) }),
       sortable: !1,
       hideSortIcons: !0,
       type: "custom",
@@ -1242,18 +1242,18 @@ const Yt = (a) => {
       headerAlign: "right",
       width: 20
     }
-  ], M = g.useMemo(() => o.map((y, u) => ({
+  ], k = x.useMemo(() => n.map((y, u) => ({
     ...y,
     id: u,
-    priority: Xt(y)
-  })), [o]), I = (y) => {
-    const A = y.target.closest("[data-id]")?.getAttribute("data-id"), k = o[Number(A)];
-    t?.(k?.guid ?? "");
-  }, S = (y) => {
+    priority: Yt(y)
+  })), [n]), I = (y) => {
+    const A = y.target.closest("[data-id]")?.getAttribute("data-id"), N = n[Number(A)];
+    t?.(N?.guid ?? "");
+  }, v = (y) => {
     d || I(y);
   }, T = (y) => {
     d && I(y);
-  }, H = (y) => M.find((u) => u.guid === y)?.id;
+  }, O = (y) => k.find((u) => u.guid === y)?.id;
   return /* @__PURE__ */ e(
     le,
     {
@@ -1264,37 +1264,37 @@ const Yt = (a) => {
         overflowX: "auto",
         overflowY: "visible",
         boxShadow: "none",
-        ...a
+        ...o
       },
       children: /* @__PURE__ */ e(
-        nt,
+        at,
         {
-          columns: d ? B : b,
+          columns: d ? M : b,
           disableColumnFilter: !0,
           disableColumnMenu: !0,
           hideFooter: !0,
-          initialState: { sorting: { sortModel: m } },
+          initialState: { sorting: { sortModel: h } },
           onRowClick: (y) => {
-            n(), c(D.DEBTS_CLICK_TABLE_ROW, { account_guid: y.row.guid });
+            a(), c(S.DEBTS_CLICK_TABLE_ROW, { account_guid: y.row.guid });
           },
           onSortModelChange: (y) => {
-            w(y), c(D.DEBTS_CLICK_TABLE_SORT);
+            w(y), c(S.DEBTS_CLICK_TABLE_SORT);
           },
-          rows: M,
+          rows: k,
           slotProps: {
             baseIconButton: { color: "secondary", sx: { ml: 8 } },
             row: {
-              onMouseEnter: S,
+              onMouseEnter: v,
               onMouseLeave: () => !d && t?.(""),
               onTouchStart: T,
               onClick: d ? T : void 0
             }
           },
-          sortModel: m,
+          sortModel: h,
           sortingOrder: ["asc", "desc"],
           sx: {
             "& .chevron-header": { display: "none" },
-            [`& .MuiDataGrid-row[data-id="${H(r)}"]`]: {
+            [`& .MuiDataGrid-row[data-id="${O(r)}"]`]: {
               backgroundColor: i.palette.mode === "light" ? "#f8f9fb" : "#1f2329",
               filter: "brightness(98%)"
             }
@@ -1303,25 +1303,25 @@ const Yt = (a) => {
       )
     }
   );
-}, qt = ({
-  buttonText: a,
-  disabled: o,
+}, Xt = ({
+  buttonText: o,
+  disabled: n,
   isOpen: r,
   onClick: t
 }) => {
-  const { isDesktop: n, isTablet: i } = K(), c = r ? "unfold_less" : "unfold_more";
-  return n || i ? /* @__PURE__ */ e(
-    De,
+  const { isDesktop: a, isTablet: i } = U(), c = r ? "unfold_less" : "unfold_more";
+  return a || i ? /* @__PURE__ */ e(
+    Se,
     {
       "aria-controls": "prioritize-debts",
       "aria-describedby": "prioritize-debts",
       "aria-haspopup": !0,
       "aria-label": "prioritize-debts",
-      disabled: o,
+      disabled: n,
       onClick: t,
-      startIcon: /* @__PURE__ */ e(ne, { name: c }),
+      startIcon: /* @__PURE__ */ e(ae, { name: c }),
       sx: { justifyContent: "start", minWidth: 214, mx: 4 },
-      children: a
+      children: o
     }
   ) : /* @__PURE__ */ e(
     lt,
@@ -1330,13 +1330,13 @@ const Yt = (a) => {
       "aria-describedby": "prioritize-debts",
       "aria-haspopup": !0,
       "aria-label": "prioritize-debts",
-      disabled: o,
+      disabled: n,
       onClick: t,
-      children: /* @__PURE__ */ e(ne, { name: c })
+      children: /* @__PURE__ */ e(ae, { name: c })
     }
   );
-}, Zt = v(({ buttonEl: a, onClose: o }) => {
-  const { onEvent: r } = R(), { debts: t } = C(), { selectedDebtPriority: n, setSelectedDebtPriority: i } = F(), c = !!a, d = [
+}, Zt = D(({ buttonEl: o, onClose: n }) => {
+  const { onEvent: r } = B(), { debts: t } = C(), { selectedDebtPriority: a, setSelectedDebtPriority: i } = F(), c = !!o, d = [
     {
       priority: P.FASTEST_PAYOFF_FIRST,
       text: t.priority_sort_fastest_payoff
@@ -1353,31 +1353,31 @@ const Yt = (a) => {
       priority: P.HIGHEST_BALANCE,
       text: t.priority_sort_highest_balance
     }
-  ], p = (h) => {
-    i(h), r(D.DEBTS_CLICK_PRIORITY, { debts_priority: h });
+  ], p = (m) => {
+    i(m), r(S.DEBTS_CLICK_PRIORITY, { debts_priority: m });
   };
   return /* @__PURE__ */ e(
     ct,
     {
-      anchorEl: a,
+      anchorEl: o,
       anchorOrigin: {
         vertical: "bottom",
         horizontal: "left"
       },
       id: "prioritize-debts",
-      onClose: o,
+      onClose: n,
       open: c,
       transformOrigin: {
         vertical: "top",
         horizontal: "left"
       },
-      children: /* @__PURE__ */ e(Se, { children: d.map(({ priority: h, text: m }) => /* @__PURE__ */ s(
+      children: /* @__PURE__ */ e(ve, { children: d.map(({ priority: m, text: h }) => /* @__PURE__ */ s(
         st,
         {
-          onClick: () => p(h),
+          onClick: () => p(m),
           sx: {
-            bgcolor: n === h ? "primary.main" : void 0,
-            color: n === h ? "#fff" : void 0,
+            bgcolor: a === m ? "primary.main" : void 0,
+            color: a === m ? "#fff" : void 0,
             justifyContent: "space-between",
             minHeight: 44,
             minWidth: 268,
@@ -1390,20 +1390,20 @@ const Yt = (a) => {
             }
           },
           children: [
-            /* @__PURE__ */ e(l, { color: "inherit", variant: "Small", children: m }),
-            n === h && /* @__PURE__ */ e(ve, { color: "inherit", filled: !0, fontSize: "small" })
+            /* @__PURE__ */ e(l, { color: "inherit", variant: "body2", children: h }),
+            a === m && /* @__PURE__ */ e(De, { color: "inherit", filled: !0, fontSize: "small" })
           ]
         },
-        h
+        m
       )) })
     }
   );
-}), Jt = v(({ disabled: a }) => {
-  const { onEvent: o } = R(), { debts: r } = C(), { selectedDebtPriority: t } = F(), [n, i] = g.useState(null), c = (m) => {
-    i(m.currentTarget), o(D.DEBTS_CLICK_PRIORITIZE);
+}), Jt = D(({ disabled: o }) => {
+  const { onEvent: n } = B(), { debts: r } = C(), { selectedDebtPriority: t } = F(), [a, i] = x.useState(null), c = (h) => {
+    i(h.currentTarget), n(S.DEBTS_CLICK_PRIORITIZE);
   }, d = () => {
     i(null);
-  }, p = !!n, h = g.useMemo(() => ({
+  }, p = !!a, m = x.useMemo(() => ({
     [P.FASTEST_PAYOFF_FIRST]: r.priority_sort_fastest_payoff,
     [P.HIGHEST_INTEREST]: r.priority_sort_highest_interest,
     [P.HIGHEST_BALANCE]: r.priority_sort_highest_balance,
@@ -1411,130 +1411,130 @@ const Yt = (a) => {
   })[t] ?? r.priority_sort_lowest_balance, [t]);
   return /* @__PURE__ */ s(_, { children: [
     /* @__PURE__ */ e(
-      qt,
+      Xt,
       {
-        buttonText: h,
-        disabled: a,
+        buttonText: m,
+        disabled: o,
         isOpen: p,
         onClick: c
       }
     ),
-    /* @__PURE__ */ e(Zt, { buttonEl: n, onClose: d })
+    /* @__PURE__ */ e(Zt, { buttonEl: a, onClose: d })
   ] });
-}), Qt = (a, o, r = 0) => {
-  const t = a.map((p) => ({ ...p }));
-  Te(t, o);
-  const n = /* @__PURE__ */ new Date(), i = [];
+}), Qt = (o, n, r = 0) => {
+  const t = o.map((p) => ({ ...p }));
+  Te(t, n);
+  const a = /* @__PURE__ */ new Date(), i = [];
   let c = 0, d = 1;
   for (const p of t)
     i.push({
       ...p,
       // Start with the initial balance
-      dataset: [{ x: new Date(n), y: p.balance }]
+      dataset: [{ x: new Date(a), y: p.balance }]
     });
   for (; t.some((p) => p.balance >= 0.01 && !p.is_impossible); ) {
-    let p = !1, h = !1, m = !1;
+    let p = !1, m = !1, h = !1;
     for (const [w, b] of t.entries()) {
       if (b.balance <= 0.01) continue;
-      const B = i[w].dataset, I = (b.interest_rate ?? 0) / 100 / 12, S = b.balance * I, T = b.monthly_payment ?? 0;
-      let H = T, y = 0;
-      !m && r > 0 && (H += r, m = !0), !h && c > 0 && (y = c, h = !0), b.balance += S;
-      const u = Math.min(b.balance, H + y);
-      if (u <= S) {
-        b.is_impossible = !0, i[w].is_impossible = !0, i[w].priority = void 0, B.push({ x: new Date(n), y: b.balance });
+      const M = i[w].dataset, I = (b.interest_rate ?? 0) / 100 / 12, v = b.balance * I, T = b.monthly_payment ?? 0;
+      let O = T, y = 0;
+      !h && r > 0 && (O += r, h = !0), !m && c > 0 && (y = c, m = !0), b.balance += v;
+      const u = Math.min(b.balance, O + y);
+      if (u <= v) {
+        b.is_impossible = !0, i[w].is_impossible = !0, i[w].priority = void 0, M.push({ x: new Date(a), y: b.balance });
         continue;
       }
-      b.balance -= u, b.balance = b.balance < 0.01 ? 0 : b.balance, B.push({
-        x: new Date(n),
+      b.balance -= u, b.balance = b.balance < 0.01 ? 0 : b.balance, M.push({
+        x: new Date(a),
         y: Math.max(0, b.balance),
         payment: u,
         extra: y
-      }), b.balance <= 0 && (c += T, i[w].projected_payoff_date = new Date(n)), u > 0 && (p = !0);
+      }), b.balance <= 0 && (c += T, i[w].projected_payoff_date = new Date(a)), u > 0 && (p = !0);
     }
-    p && n.setMonth(n.getMonth() + 1);
+    p && a.setMonth(a.getMonth() + 1);
   }
   return i.forEach((p) => {
     (p.interest_rate === void 0 || p.monthly_payment === void 0) && (p.projected_payoff_date = void 0);
   }), i.forEach((p) => {
     p.priority = !p.is_paid_off && !p.is_impossible ? d++ : void 0;
   }), i;
-}, er = (a, o, r) => ({
-  description: o ? a.empty_state_description : a.empty_state_description_no_aggregation,
-  header: o ? a.empty_state_header : a.empty_state_header_no_aggregation,
-  onClickHandler: o ? r : void 0,
-  primaryButton: o ? a.connect_accounts : void 0
-}), tr = v(({ disabled: a, onClick: o }) => {
-  const { debts: r } = C(), { isDesktop: t } = K(), { totalMonthlyPayments: n } = te(), { monthlyCashFlowProfile: i } = V(), c = n + Number(i?.extra_payment), d = t ? r.paydown_button_long : r.paydown_button_short;
+}, er = (o, n, r) => ({
+  description: n ? o.empty_state_description : o.empty_state_description_no_aggregation,
+  header: n ? o.empty_state_header : o.empty_state_header_no_aggregation,
+  onClickHandler: n ? r : void 0,
+  primaryButton: n ? o.connect_accounts : void 0
+}), tr = D(({ disabled: o, onClick: n }) => {
+  const { debts: r } = C(), { isDesktop: t } = U(), { totalMonthlyPayments: a } = te(), { monthlyCashFlowProfile: i } = K(), c = a + Number(i?.extra_payment), d = t ? r.paydown_button_long : r.paydown_button_short;
   return /* @__PURE__ */ e(
-    De,
+    Se,
     {
       "aria-controls": "extra-paydown",
       "aria-describedby": "extra-paydown",
       "aria-haspopup": !0,
       "aria-label": "extra-paydown",
-      disabled: a,
-      onClick: o,
+      disabled: o,
+      onClick: n,
       sx: { justifyContent: "start", minWidth: 100, mx: 4 },
-      children: E(d, N(c, "0,0"))
+      children: E(d, R(c, "0,0"))
     }
   );
-}), rr = ({ onBackClick: a, sx: o }) => {
-  const { isDesktop: r, isMobile: t } = K(), { connect: n, debts: i } = C(), { onEvent: c } = R(), {
+}), rr = ({ onBackClick: o, sx: n }) => {
+  const { isDesktop: r, isMobile: t } = U(), { connect: a, debts: i } = C(), { onEvent: c } = B(), {
     config: { show_connections_widget_in_master: d }
-  } = ze(), { isInitialized: p } = Xe(), { setSelectedAccount: h } = Ve(), { selectedDebtPriority: m, setSelectedDebtChartData: w } = F(), {
+  } = ze(), { isInitialized: p } = Ye(), { setSelectedAccount: m } = Ke(), { selectedDebtPriority: h, setSelectedDebtChartData: w } = F(), {
     isAccountDataLoaded: b,
-    loadAccountData: B,
-    detailedAccounts: M,
+    loadAccountData: M,
+    detailedAccounts: k,
     visibleDebtAccounts: I
-  } = re(), { isAllGoalDataLoaded: S, loadGoalData: T, monthlyCashFlowProfile: H } = V(), { debts: y } = te(), [u, f] = g.useState(!1), [A, k] = g.useState(!1), [L, z] = g.useState(!1), [U, Ee] = g.useState(""), [Ie, ce] = g.useState(!1);
+  } = re(), { isAllGoalDataLoaded: v, loadGoalData: T, monthlyCashFlowProfile: O } = K(), { debts: y } = te(), [u, f] = x.useState(!1), [A, N] = x.useState(!1), [L, z] = x.useState(!1), [q, Ee] = x.useState(""), [Ie, ce] = x.useState(!1);
   pt({
     widgetName: "DebtsWidget",
-    isLoaded: S
+    isLoaded: v
   });
-  const q = g.useMemo(() => {
-    const O = H?.extra_payment ?? 0;
-    return Qt(y, m, O);
-  }, [y, m, H]);
-  g.useEffect(() => {
-    b || B().finally(), c(D.DEBTS_VIEW);
-  }, []), g.useEffect(() => {
+  const X = x.useMemo(() => {
+    const H = O?.extra_payment ?? 0;
+    return Qt(y, h, H);
+  }, [y, h, O]);
+  x.useEffect(() => {
+    b || M().finally(), c(S.DEBTS_VIEW);
+  }, []), x.useEffect(() => {
     p && T().finally();
   }, [p]);
-  const de = (O) => Ee(O), pe = () => {
-    const O = I.find((oe) => oe.guid === U), me = q.find((oe) => oe.guid === U);
-    O && h(O), me && w(me), f(!0);
-  }, Be = () => c(D.DEBTS_CLICK_FILTER), Me = () => {
-    z(!0), c(D.DEBTS_CLICK_SNOWBALL_CTA);
-  }, ke = () => {
-    k(!0), c(D.DEBTS_CLICK_PAYDOWN);
+  const de = (H) => Ee(H), pe = () => {
+    const H = I.find((ne) => ne.guid === q), he = X.find((ne) => ne.guid === q);
+    H && m(H), he && w(he), f(!0);
+  }, Me = () => c(S.DEBTS_CLICK_FILTER), ke = () => {
+    z(!0), c(S.DEBTS_CLICK_SNOWBALL_CTA);
+  }, Ne = () => {
+    N(!0), c(S.DEBTS_CLICK_PAYDOWN);
   };
-  if (!p || !S)
-    return /* @__PURE__ */ e(mt, {});
-  const Pe = M.length === 0, Ne = I.length === 0, Re = y.length === 0, Z = Pe || Ne || Re, J = er(
+  if (!p || !v)
+    return /* @__PURE__ */ e(ht, {});
+  const Pe = k.length === 0, Re = I.length === 0, Be = y.length === 0, Z = Pe || Re || Be, J = er(
     i,
     d,
     () => ce(!0)
   );
   return /* @__PURE__ */ s(
-    ht,
+    mt,
     {
       actions: [
         /* @__PURE__ */ e(Jt, { disabled: Z }, "prioritize-debts"),
-        /* @__PURE__ */ e(tr, { disabled: Z, onClick: ke }, "extra-paydown")
+        /* @__PURE__ */ e(tr, { disabled: Z, onClick: Ne }, "extra-paydown")
       ],
       allowedAccountTypes: [
-        X.CREDIT_CARD,
-        X.LOAN,
-        X.MORTGAGE,
-        X.LINE_OF_CREDIT,
-        X.CHECKING_LINE_OF_CREDIT
+        Y.CREDIT_CARD,
+        Y.LOAN,
+        Y.MORTGAGE,
+        Y.LINE_OF_CREDIT,
+        Y.CHECKING_LINE_OF_CREDIT
       ],
-      onAccountsFilterClick: Be,
-      onBackClick: a,
-      sx: o,
+      onAccountsFilterClick: Me,
+      onBackClick: o,
+      sx: n,
       title: i.title,
       children: [
-        /* @__PURE__ */ s(x, { sx: { pt: 48, px: r ? "48px" : "24px" }, children: [
+        /* @__PURE__ */ s(g, { sx: { pt: 48, px: r ? "48px" : "24px" }, children: [
           Z && /* @__PURE__ */ e(
             ut,
             {
@@ -1548,7 +1548,7 @@ const Yt = (a) => {
           ),
           !Z && /* @__PURE__ */ s($, { children: [
             /* @__PURE__ */ s(
-              x,
+              g,
               {
                 sx: {
                   alignItems: t ? "flex-start" : "flex-end",
@@ -1559,9 +1559,9 @@ const Yt = (a) => {
                   /* @__PURE__ */ e(
                     Ae,
                     {
-                      debts: q,
+                      debts: X,
                       height: t ? 250 : void 0,
-                      hoveredDebtGuid: U,
+                      hoveredDebtGuid: q,
                       onClickArea: pe,
                       onHoverArea: de,
                       sx: { mr: t ? "4px" : "-48px" }
@@ -1570,19 +1570,19 @@ const Yt = (a) => {
                   /* @__PURE__ */ e(
                     wt,
                     {
-                      debts: q,
-                      onClickCta: Me,
+                      debts: X,
+                      onClickCta: ke,
                       sx: { mb: t ? "0px" : "64px" }
                     }
                   )
                 ]
               }
             ),
-            /* @__PURE__ */ e(x, { sx: { mx: t ? "-24px" : 0 }, children: /* @__PURE__ */ e(
-              Ut,
+            /* @__PURE__ */ e(g, { sx: { mx: t ? "-24px" : 0 }, children: /* @__PURE__ */ e(
+              qt,
               {
-                debts: q,
-                hoveredDebtGuid: U,
+                debts: X,
+                hoveredDebtGuid: q,
                 onClickRow: pe,
                 onHoverRow: de
               }
@@ -1590,29 +1590,29 @@ const Yt = (a) => {
           ] })
         ] }),
         /* @__PURE__ */ e(
-          St,
+          vt,
           {
             isOpen: L,
             onClose: () => z(!1)
           }
         ),
-        /* @__PURE__ */ e(Ht, { isOpen: u, onClose: () => f(!1) }),
-        /* @__PURE__ */ e(jt, { isOpen: A, onClose: () => k(!1) }),
+        /* @__PURE__ */ e(Ot, { isOpen: u, onClose: () => f(!1) }),
+        /* @__PURE__ */ e(jt, { isOpen: A, onClose: () => N(!1) }),
         /* @__PURE__ */ e(
           dt,
           {
             onClose: () => ce(!1),
             showConnectWidget: Ie,
-            title: n.mini_title
+            title: a.mini_title
           }
         )
       ]
     }
   );
-}, Qr = v(rr);
+}, Qr = D(rr);
 export {
   Ae as DebtsChart,
-  ra as DebtsStore,
-  Ut as DebtsTable,
+  ro as DebtsStore,
+  qt as DebtsTable,
   Qr as DebtsWidget
 };