@mx-cartographer/experiences 7.10.0 → 7.10.1-alpha-bugtesting-debtstable-ram

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [7.10.1] - 02-06-2026
+
+- **FIXED** - `DebtsTable` Balances Header appear broken | Bug Fixed
+
 ## [7.10.0] - 02-05-2026
 
 - **ADDED** - Migrated `Insights-Ui` source into this codebase

package/dist/debts/index.es.js

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as s, Fragment as O } from "react/jsx-runtime";
-import x from "react";
-import { observer as v } from "mobx-react-lite";
-import g from "@mui/material/Stack";
+import g from "react";
+import { observer as D } from "mobx-react-lite";
+import x from "@mui/material/Stack";
 import { useTheme as V, Card as _e, Stack as _, Box as W } from "@mui/material";
-import { Text as l, P as ye, H3 as Te, InstitutionLogo as Ae, Icon as te } from "@mxenabled/mxui";
+import { Text as l, P as ye, H3 as Te, InstitutionLogo as Ae, Icon as le } from "@mxenabled/mxui";
 import { intervalToDuration as Ee, formatDuration as Ie } from "date-fns";
 import { addMonths as se } from "date-fns/addMonths";
 import { fromUnixTime as ce } from "date-fns/fromUnixTime";
@@ -14,13 +14,13 @@ import { f as N, a as Pe } from "../NumberFormatting-DjTD0t3W.mjs";
 import { f as U, D as q } from "../Dialog-CwiqpTGe.mjs";
 import { G as ke, w as Z, u as S, l as Y, g as F, d as J, b as Ne } from "../hooks-BUCn6FeJ.mjs";
 import { u as K } from "../useScreenSize-B6JyS_Lj.mjs";
-import { D as re } from "../Drawer-DV4NTsFg.mjs";
+import { D as te } from "../Drawer-DV4NTsFg.mjs";
 import { b as E } from "../Localization-2MODESHW.mjs";
 import { A as Re, u as Fe } from "../AccountDetailsHeader-3ZD1Of4i.mjs";
 import Le from "@mui/material/Card";
 import $e from "@mui/material/CardContent";
 import Oe from "@mui/material/CardHeader";
-import ae from "@mui/material/Box";
+import re from "@mui/material/Box";
 import { useTheme as He } from "@mui/material/styles";
 import { LineChart as Ge } from "@mui/x-charts/LineChart";
 import { A as T, W as We } from "../WidgetContainer-BNltq9UG.mjs";
@@ -31,16 +31,16 @@ import j from "@mui/material/Divider";
 import { M as ze, I as Xe, O as Ve } from "../OriginalBalanceAction-CQzvRZ7u.mjs";
 import Ye from "@mui/material/TextField";
 import { L as Q } from "../ListItemAction-pvmKK9RU.mjs";
-import { C as oe } from "../CurrencyInput-BBifPjuC.mjs";
+import { C as ae } from "../CurrencyInput-BBifPjuC.mjs";
 import me from "@mui/material/Alert";
 import he from "@mui/material/AlertTitle";
 import ue from "@mui/material/Paper";
-import { Error as Ke, CheckCircle as ge } from "@mxenabled/mx-icons";
+import { Error as Ke, CheckCircle as xe } from "@mxenabled/mx-icons";
 import { T as be } from "../TabContentContainer-j01JYR_7.mjs";
 import { DataGridPro as Ue } from "@mui/x-data-grid-pro";
 import { H as z } from "../HeaderCell-DjuifqHJ.mjs";
 import { f as qe, A as X } from "../Account-BiB1F8lL.mjs";
-import xe from "@mui/material/Button";
+import ge from "@mui/material/Button";
 import Ze from "@mui/material/IconButton";
 import Je from "@mui/material/ListItem";
 import Qe from "@mui/material/Popover";
@@ -153,11 +153,11 @@ function it(a, o, r = 0) {
   };
 }
 const L = () => {
-  if (!x.useContext(ke))
+  if (!g.useContext(ke))
     throw new Error("useCateUiStore() must be used within the GlobalDataContext");
   return Z().uiStore;
 }, lt = ({ debts: a, onClickCta: o, sx: r }) => {
-  const t = V(), { isMobile: n } = K(), { debts: i } = S(), { selectedDebtPriority: d } = L(), { monthlyCashFlowProfile: c } = Y(), { payoffDate: p, payoffSavings: m, payoffDuration: b } = x.useMemo(() => {
+  const t = V(), { isMobile: n } = K(), { debts: i } = S(), { selectedDebtPriority: d } = L(), { monthlyCashFlowProfile: c } = Y(), { payoffDate: p, payoffSavings: m, payoffDuration: b } = g.useMemo(() => {
     const w = c?.extra_payment ?? 0;
     return it(a, d, w);
   }, [a, d, c]);
@@ -208,10 +208,10 @@ const L = () => {
       ] })
     }
   );
-}, st = v(lt), ct = ({ isOpen: a, onClose: o }) => {
-  const r = V(), { debts: t } = S(), [n, i] = x.useState(!1);
+}, st = D(lt), ct = ({ isOpen: a, onClose: o }) => {
+  const r = V(), { debts: t } = S(), [n, i] = g.useState(!1);
   return /* @__PURE__ */ e(
-    re,
+    te,
     {
       ariaLabelClose: "",
       isOpen: a,
@@ -569,7 +569,7 @@ const L = () => {
       ] })
     }
   );
-}, dt = v(ct), pt = "#FF7B08";
+}, dt = D(ct), pt = "#FF7B08";
 function mt(a, o) {
   const [r, t, n] = a.replace(/^#/, "").match(/.{1,2}/g).map((d) => parseInt(d, 16)), i = [
     Math.max(0, Math.min(255, Math.round(r * o))),
@@ -593,20 +593,20 @@ const Ce = ({
     )
   ].sort((u, f) => u - f).map((u) => new Date(u)), w = m.map((u) => {
     const f = new Map(u.dataset.map(($) => [new Date($.x).getTime(), $.y]));
-    let D = f.get(b[0].getTime()) ?? 0;
+    let v = f.get(b[0].getTime()) ?? 0;
     const P = b.map(($) => {
-      const H = f.get($.getTime()) ?? D;
-      return D = H, { x: $, y: H };
+      const H = f.get($.getTime()) ?? v;
+      return v = H, { x: $, y: H };
     });
     return { ...u, dataset: P };
   }), h = w.reduce(
     (u, f) => u + (f.dataset[0]?.y ?? 0),
     0
   ), A = b.map((u, f) => {
-    const D = f / (b.length - 1), P = h * (1 - D);
+    const v = f / (b.length - 1), P = h * (1 - v);
     return { x: u, y: P };
   }), B = Math.ceil(h / 100) * 100, M = b, C = w.map((u, f) => {
-    const D = 1 - f / w.length * 0.5, P = mt(pt, D);
+    const v = 1 - f / w.length * 0.5, P = mt(pt, v);
     return {
       id: `debt-${f}`,
       guid: u.guid,
@@ -633,7 +633,7 @@ const Ce = ({
   });
   const I = (u) => C.findIndex((f) => f?.guid === u);
   return /* @__PURE__ */ e(
-    ae,
+    re,
     {
       sx: {
         width: "100%",
@@ -657,11 +657,11 @@ const Ce = ({
           margin: { bottom: 24, left: 32, right: 72, top: 48 },
           onAreaClick: (u, f) => {
             i?.();
-            const D = C.find((P) => P.id === f.seriesId);
-            p(T.DEBTS_CLICK_CHART_AREA, { account_guid: D?.guid });
+            const v = C.find((P) => P.id === f.seriesId);
+            p(T.DEBTS_CLICK_CHART_AREA, { account_guid: v?.guid });
           },
           onHighlightChange: (u) => {
-            const f = C.find((D) => D.id === u?.seriesId)?.guid;
+            const f = C.find((v) => v.id === u?.seriesId)?.guid;
             d?.(f ?? "");
           },
           series: C,
@@ -745,9 +745,9 @@ const Ce = ({
       }
     )
   ] });
-}, ut = v(ht), bt = () => {
+}, ut = D(ht), bt = () => {
   const a = V(), { onEvent: o } = F(), { debts: r } = S(), { selectedDebtChartData: t, showCompleted: n, showError: i } = L();
-  return x.useEffect(() => o(T.DEBT_SCHEDULE_VIEW), []), /* @__PURE__ */ e(fe, { children: i || n ? /* @__PURE__ */ e(
+  return g.useEffect(() => o(T.DEBT_SCHEDULE_VIEW), []), /* @__PURE__ */ e(fe, { children: i || n ? /* @__PURE__ */ e(
     l,
     {
       color: a.palette.secondary.main,
@@ -757,12 +757,12 @@ const Ce = ({
       children: i ? r.schedule_error_message : r.schedule_complete_message
     }
   ) : /* @__PURE__ */ s(O, { children: [
-    /* @__PURE__ */ s(g, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, 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 })
     ] }),
-    t.dataset.slice(1).map(({ x: d, y: c, payment: p }) => /* @__PURE__ */ e(g, { bgcolor: a.palette.background.paper, children: /* @__PURE__ */ e(g, { alignItems: "center", flexDirection: "row", pl: 24, children: /* @__PURE__ */ s(
-      g,
+    t.dataset.slice(1).map(({ x: d, y: c, payment: p }) => /* @__PURE__ */ e(x, { bgcolor: a.palette.background.paper, children: /* @__PURE__ */ e(x, { alignItems: "center", flexDirection: "row", pl: 24, children: /* @__PURE__ */ s(
+      x,
       {
         sx: {
           borderBottom: `1px solid ${a.palette.border.light}`,
@@ -772,11 +772,11 @@ const Ce = ({
           pr: 24
         },
         children: [
-          /* @__PURE__ */ s(g, { flexGrow: 1, children: [
+          /* @__PURE__ */ s(x, { flexGrow: 1, children: [
             /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: U(d, q.MONTH_YEAR) }),
             /* @__PURE__ */ e(l, { color: a.palette.secondary.main, variant: "XSmall", children: r.schedule_month_label })
           ] }),
-          /* @__PURE__ */ s(g, { children: [
+          /* @__PURE__ */ s(x, { children: [
             /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: N(c, "0,0.00") }),
             /* @__PURE__ */ e(
               l,
@@ -792,8 +792,8 @@ const Ce = ({
         ]
       }
     ) }) }, String(d))),
-    /* @__PURE__ */ e(g, { bgcolor: "background.paper", children: /* @__PURE__ */ s(
-      g,
+    /* @__PURE__ */ e(x, { bgcolor: "background.paper", children: /* @__PURE__ */ s(
+      x,
       {
         sx: {
           alignItems: "center",
@@ -809,8 +809,8 @@ const Ce = ({
       }
     ) })
   ] }) });
-}, _t = v(bt), yt = v(({ debt: a }) => {
-  const { debts: o } = S(), { updateAccount: r } = J(), { onEvent: t } = F(), [n, i] = x.useState(a.interest_rate ?? 0), d = n < 0, c = async () => {
+}, _t = D(bt), yt = D(({ debt: a }) => {
+  const { debts: o } = S(), { updateAccount: r } = J(), { onEvent: t } = F(), [n, i] = g.useState(a.interest_rate ?? 0), d = n < 0, c = async () => {
     await r({ ...a.account, interest_rate: n }), a.interest_rate = n, t(T.DEBTS_SAVE_RATE_ACTION, { account_guid: a.guid });
   }, p = () => {
     setTimeout(() => {
@@ -839,8 +839,8 @@ const Ce = ({
       )
     }
   );
-}), ft = v(({ debt: a }) => {
-  const { debts: o } = S(), { updateAccount: r } = J(), { onEvent: t } = F(), [n, i] = x.useState(a.monthly_payment ?? 0), d = n < 0 || n > 9999999999e-2, c = async () => {
+}), ft = D(({ debt: a }) => {
+  const { debts: o } = S(), { updateAccount: r } = J(), { onEvent: t } = F(), [n, i] = g.useState(a.monthly_payment ?? 0), d = n < 0 || n > 9999999999e-2, c = async () => {
     await r({ ...a.account, minimum_payment: n }), a.monthly_payment = n, t(T.DEBTS_SAVE_PAYMENT_ACTION, { account_guid: a.guid });
   }, p = () => {
     setTimeout(() => {
@@ -858,7 +858,7 @@ const Ce = ({
       secondaryText: N(a.monthly_payment, "0,0"),
       zeroStateText: a.monthly_payment ? void 0 : o.add_monthly_payment,
       children: /* @__PURE__ */ e(
-        oe,
+        ae,
         {
           amount: n,
           autoFocus: !0,
@@ -871,8 +871,8 @@ const Ce = ({
       )
     }
   );
-}), gt = v(({ debt: a }) => {
-  const { debts: o } = S(), { updateAccount: r } = J(), { onEvent: t } = F(), [n, i] = x.useState(a.original_balance ?? 0), d = n < 0 || n > 9999999999e-2, c = async () => {
+}), xt = D(({ debt: a }) => {
+  const { debts: o } = S(), { updateAccount: r } = J(), { onEvent: t } = F(), [n, i] = g.useState(a.original_balance ?? 0), d = n < 0 || n > 9999999999e-2, c = async () => {
     await r({ ...a.account, original_balance: n }), a.original_balance = n, t(T.DEBTS_SAVE_BALANCE_ACTION, { account_guid: a.guid });
   }, p = () => {
     setTimeout(() => {
@@ -890,7 +890,7 @@ const Ce = ({
       secondaryText: N(a.original_balance, "0,0"),
       zeroStateText: a.original_balance ? void 0 : o.add_original_balance,
       children: /* @__PURE__ */ e(
-        oe,
+        ae,
         {
           amount: n,
           autoFocus: !0,
@@ -903,9 +903,9 @@ const Ce = ({
       )
     }
   );
-}), xt = () => {
+}), gt = () => {
   const { onEvent: a } = F(), { selectedDebtChartData: o } = L();
-  return x.useEffect(() => a(T.DEBT_DETAILS_VIEW), []), /* @__PURE__ */ s(g, { bgcolor: "background.paper", children: [
+  return g.useEffect(() => a(T.DEBT_DETAILS_VIEW), []), /* @__PURE__ */ s(x, { bgcolor: "background.paper", children: [
     o?.goal && /* @__PURE__ */ s(O, { children: [
       /* @__PURE__ */ e(ze, { goal: o.goal }),
       /* @__PURE__ */ e(j, {}),
@@ -919,19 +919,19 @@ const Ce = ({
       /* @__PURE__ */ e(j, {}),
       /* @__PURE__ */ e(yt, { debt: o }),
       /* @__PURE__ */ e(j, {}),
-      /* @__PURE__ */ e(gt, { debt: o }),
+      /* @__PURE__ */ e(xt, { debt: o }),
       /* @__PURE__ */ e(j, {})
     ] })
   ] });
-}, wt = v(xt), Ct = ({ setTabValue: a, sx: o }) => {
+}, wt = D(gt), Ct = ({ setTabValue: a, sx: o }) => {
   const { debts: r } = S(), { showError: t, showCompleted: n } = L();
-  return x.useEffect(() => {
+  return g.useEffect(() => {
     t && a(1);
-  }, [t]), !t && !n ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ s(g, { gap: 16, children: [
+  }, [t]), !t && !n ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ s(x, { gap: 16, children: [
     /* @__PURE__ */ e(ue, { sx: { my: 16, mx: 24, ...o }, children: /* @__PURE__ */ s(
       me,
       {
-        icon: t ? /* @__PURE__ */ e(Ke, { filled: !0 }) : /* @__PURE__ */ e(ge, { color: "success", filled: !0 }),
+        icon: t ? /* @__PURE__ */ e(Ke, { filled: !0 }) : /* @__PURE__ */ e(xe, { color: "success", filled: !0 }),
         severity: "error",
         sx: {
           alignItems: "start",
@@ -968,8 +968,8 @@ const Ce = ({
       }
     ) })
   ] });
-}, St = v(Ct), vt = () => {
-  const { debts: a } = S(), { showError: o, showCompleted: r } = L(), [t, n] = x.useState(0);
+}, St = D(Ct), Dt = () => {
+  const { debts: a } = S(), { showError: o, showCompleted: r } = L(), [t, n] = g.useState(0);
   return /* @__PURE__ */ s(O, { children: [
     (o || r) && /* @__PURE__ */ e(St, { setTabValue: n, sx: { mt: -24 } }),
     /* @__PURE__ */ s(
@@ -1004,23 +1004,23 @@ const Ce = ({
     /* @__PURE__ */ e(be, { index: 0, name: "debt-schedule", value: t, children: /* @__PURE__ */ e(_t, {}) }),
     /* @__PURE__ */ e(be, { index: 1, name: "debt-details", value: t, children: /* @__PURE__ */ e(wt, {}) })
   ] });
-}, Dt = v(vt), Tt = ({ isOpen: a, onClose: o }) => {
+}, vt = D(Dt), Tt = ({ isOpen: a, onClose: o }) => {
   const { debts: r } = S(), { showError: t, showCompleted: n } = L(), i = t || n ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ e(ut, {});
   return /* @__PURE__ */ e(
-    re,
+    te,
     {
       ariaLabelClose: r.details_close_aria,
       isOpen: a,
       onClose: o,
       title: r.details_title,
-      children: /* @__PURE__ */ s(g, { bgcolor: "background.default", children: [
+      children: /* @__PURE__ */ s(x, { bgcolor: "background.default", children: [
         /* @__PURE__ */ e(Re, { customDetailsChart: i }),
-        /* @__PURE__ */ e(Dt, {})
+        /* @__PURE__ */ e(vt, {})
       ] })
     }
   );
-}, At = v(() => {
-  const { debts: a } = S(), { monthlyCashFlowProfile: o, updateMonthlyCashFlowProfile: r } = Y(), { onEvent: t } = F(), [n, i] = x.useState(o?.extra_payment ?? 0), d = n < 0 || n > 9999999999e-2, c = async () => {
+}, At = D(() => {
+  const { debts: a } = S(), { monthlyCashFlowProfile: o, updateMonthlyCashFlowProfile: r } = Y(), { onEvent: t } = F(), [n, i] = g.useState(o?.extra_payment ?? 0), d = n < 0 || n > 9999999999e-2, c = async () => {
     o && (await r({ ...o, extra_payment: n }), o.extra_payment = n, t(T.DEBTS_SAVE_PAYDOWN_ACTION, {
       user_guid: o?.user_guid
     }));
@@ -1040,7 +1040,7 @@ const Ce = ({
       secondaryText: N(o?.extra_payment, "0,0"),
       zeroStateText: o?.extra_payment ? void 0 : a.add_extra_payment,
       children: /* @__PURE__ */ e(
-        oe,
+        ae,
         {
           amount: n,
           autoFocus: !0,
@@ -1055,28 +1055,28 @@ const Ce = ({
   );
 }), Et = () => {
   const { debts: a } = S(), { totalMonthlyPayments: o } = Z(), { monthlyCashFlowProfile: r } = Y(), t = o + 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: [
+  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(ye, { 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 })
       ] }),
-      /* @__PURE__ */ s(g, { children: [
+      /* @__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__ */ e(g, { sx: { backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(At, {}) }),
-    /* @__PURE__ */ e(g, { flexDirection: "row-reverse", px: 24, py: 12, children: /* @__PURE__ */ s(g, { gap: 4, children: [
+    /* @__PURE__ */ e(x, { sx: { backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(At, {}) }),
+    /* @__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") })
     ] }) })
   ] });
-}, It = v(Et), Bt = ({ isOpen: a, onClose: o }) => {
+}, It = D(Et), Bt = ({ isOpen: a, onClose: o }) => {
   const { debts: r } = S();
   return /* @__PURE__ */ e(
-    re,
+    te,
     {
       ariaLabelClose: r.paydown_drawer_close_aria,
       isOpen: a,
@@ -1106,7 +1106,7 @@ const kt = (a) => {
 }, Nt = (a) => {
   const o = String(a.formattedValue), r = kt(o);
   return /* @__PURE__ */ e(
-    ae,
+    re,
     {
       sx: {
         display: "flex",
@@ -1124,7 +1124,7 @@ const kt = (a) => {
   );
 }, Rt = (a) => {
   const o = a.row.account, r = qe[o.account_type];
-  return /* @__PURE__ */ s(g, { alignItems: "center", flexDirection: "row", children: [
+  return /* @__PURE__ */ s(x, { alignItems: "center", flexDirection: "row", children: [
     /* @__PURE__ */ e(
       Ae,
       {
@@ -1132,7 +1132,7 @@ const kt = (a) => {
         institutionGuid: o.institution_guid || ""
       }
     ),
-    /* @__PURE__ */ s(g, { ml: 12, children: [
+    /* @__PURE__ */ s(x, { ml: 12, children: [
       /* @__PURE__ */ e(l, { variant: "Small", children: o.name }),
       /* @__PURE__ */ e(l, { variant: "XSmall", children: r })
     ] })
@@ -1144,7 +1144,7 @@ const kt = (a) => {
   onHoverRow: t,
   onClickRow: n
 }) => {
-  const i = V(), { onEvent: d } = F(), { isMobile: c } = K(), { debts: p } = S(), [m, b] = x.useState([
+  const i = V(), { onEvent: d } = F(), { isMobile: c } = K(), { debts: p } = S(), [m, b] = g.useState([
     { field: "priority", sort: "asc" }
   ]), w = [
     {
@@ -1181,8 +1181,8 @@ const kt = (a) => {
       sortable: !0,
       hideSortIcons: c,
       type: "number",
-      align: c ? "right" : "left",
-      headerAlign: c ? "right" : "left",
+      align: "left",
+      headerAlign: "left",
       minWidth: c ? 70 : 122,
       flex: c ? 0.4 : 0.6
     },
@@ -1225,34 +1225,20 @@ const kt = (a) => {
       minWidth: 122,
       flex: 0.6
     }
-  ], h = [
-    ...w.slice(0, 3),
-    {
-      field: "chevron",
-      headerName: "",
-      renderHeader: void 0,
-      renderCell: () => /* @__PURE__ */ e(te, { name: "chevron_right'" }),
-      sortable: !0,
-      hideSortIcons: !0,
-      type: "custom",
-      align: "right",
-      headerAlign: "right",
-      width: 20
-    }
-  ], A = x.useMemo(() => o.map((y, R) => ({
+  ], h = [...w.slice(0, 3)], A = g.useMemo(() => o.map((y, R) => ({
     ...y,
     id: R,
     priority: Pt(y)
   })), [o]), B = (y) => {
-    const f = y.target.closest("[data-id]")?.getAttribute("data-id"), D = o[Number(f)];
-    t?.(D?.guid ?? "");
+    const f = y.target.closest("[data-id]")?.getAttribute("data-id"), v = o[Number(f)];
+    t?.(v?.guid ?? "");
   }, M = (y) => {
     c || B(y);
   }, C = (y) => {
     c && B(y);
   }, I = (y) => A.find((R) => R.guid === y)?.id;
   return /* @__PURE__ */ e(
-    ae,
+    re,
     {
       sx: {
         height: "100dvh",
@@ -1301,14 +1287,14 @@ const kt = (a) => {
 }, Lt = ({ buttonText: a, isOpen: o, onClick: r }) => {
   const { isDesktop: t, isTablet: n } = K(), i = o ? "unfold_less" : "unfold_more";
   return t || n ? /* @__PURE__ */ e(
-    xe,
+    ge,
     {
       "aria-controls": "prioritize-debts",
       "aria-describedby": "prioritize-debts",
       "aria-haspopup": !0,
       "aria-label": "prioritize-debts",
       onClick: r,
-      startIcon: /* @__PURE__ */ e(te, { name: i }),
+      startIcon: /* @__PURE__ */ e(le, { name: i }),
       sx: { justifyContent: "start", minWidth: 214, mx: 4 },
       children: a
     }
@@ -1320,10 +1306,10 @@ const kt = (a) => {
       "aria-haspopup": !0,
       "aria-label": "prioritize-debts",
       onClick: r,
-      children: /* @__PURE__ */ e(te, { name: i })
+      children: /* @__PURE__ */ e(le, { name: i })
     }
   );
-}, $t = v(({ buttonEl: a, onClose: o }) => {
+}, $t = D(({ buttonEl: a, onClose: o }) => {
   const { onEvent: r } = F(), { debts: t } = S(), { selectedDebtPriority: n, setSelectedDebtPriority: i } = L(), d = !!a, c = [
     {
       priority: k.FASTEST_PAYOFF_FIRST,
@@ -1379,19 +1365,19 @@ const kt = (a) => {
           },
           children: [
             /* @__PURE__ */ e(l, { color: "inherit", variant: "Small", children: b }),
-            n === m && /* @__PURE__ */ e(ge, { color: "inherit", filled: !0, fontSize: "small" })
+            n === m && /* @__PURE__ */ e(xe, { color: "inherit", filled: !0, fontSize: "small" })
           ]
         },
         m
       )) })
     }
   );
-}), Ot = v(() => {
-  const { onEvent: a } = F(), { debts: o } = S(), { selectedDebtPriority: r } = L(), [t, n] = x.useState(null), i = (m) => {
+}), Ot = D(() => {
+  const { onEvent: a } = F(), { debts: o } = S(), { selectedDebtPriority: r } = L(), [t, n] = g.useState(null), i = (m) => {
     n(m.currentTarget), a(T.DEBTS_CLICK_PRIORITIZE);
   }, d = () => {
     n(null);
-  }, c = !!t, p = x.useMemo(() => ({
+  }, c = !!t, p = g.useMemo(() => ({
     [k.FASTEST_PAYOFF_FIRST]: o.priority_sort_fastest_payoff,
     [k.HIGHEST_INTEREST]: o.priority_sort_highest_interest,
     [k.HIGHEST_BALANCE]: o.priority_sort_highest_balance,
@@ -1438,10 +1424,10 @@ const kt = (a) => {
   }), i.forEach((p) => {
     p.priority = !p.is_paid_off && !p.is_impossible ? c++ : void 0;
   }), i;
-}, Gt = v(({ onClick: a }) => {
+}, Gt = D(({ onClick: a }) => {
   const { debts: o } = S(), { isDesktop: r } = K(), { totalMonthlyPayments: t } = Z(), { monthlyCashFlowProfile: n } = Y(), i = t + Number(n?.extra_payment), d = r ? o.paydown_button_long : o.paydown_button_short;
   return /* @__PURE__ */ e(
-    xe,
+    ge,
     {
       "aria-controls": "extra-paydown",
       "aria-describedby": "extra-paydown",
@@ -1453,26 +1439,26 @@ const kt = (a) => {
     }
   );
 }), Wt = ({ onBackClick: a, sx: o }) => {
-  const { isDesktop: r, isMobile: t } = K(), { debts: n } = S(), { onEvent: i } = F(), { isInitialized: d } = Ne(), { setSelectedAccount: c } = Fe(), { selectedDebtPriority: p, setSelectedDebtChartData: m } = L(), { isAccountDataLoaded: b, loadAccountData: w, visibleDebtAccounts: h } = J(), { isAllGoalDataLoaded: A, loadGoalData: B, monthlyCashFlowProfile: M } = Y(), { debts: C } = Z(), [I, y] = x.useState(!1), [R, u] = x.useState(!1), [f, D] = x.useState(!1), [P, $] = x.useState("");
+  const { isDesktop: r, isMobile: t } = K(), { debts: n } = S(), { onEvent: i } = F(), { isInitialized: d } = Ne(), { setSelectedAccount: c } = Fe(), { selectedDebtPriority: p, setSelectedDebtChartData: m } = L(), { isAccountDataLoaded: b, loadAccountData: w, visibleDebtAccounts: h } = J(), { isAllGoalDataLoaded: A, loadGoalData: B, monthlyCashFlowProfile: M } = Y(), { debts: C } = Z(), [I, y] = g.useState(!1), [R, u] = g.useState(!1), [f, v] = g.useState(!1), [P, $] = g.useState("");
   et({
     widgetName: "DebtsWidget",
     isLoaded: A
   });
-  const H = x.useMemo(() => {
+  const H = g.useMemo(() => {
     const G = M?.extra_payment ?? 0;
     return Ht(C, p, G);
   }, [C, p, M]);
-  x.useEffect(() => {
+  g.useEffect(() => {
     b || w().finally(), i(T.DEBTS_VIEW);
-  }, []), x.useEffect(() => {
+  }, []), g.useEffect(() => {
     d && B().finally();
   }, [d]);
-  const ne = (G) => $(G), ie = () => {
-    const G = h.find((ee) => ee.guid === P), le = H.find((ee) => ee.guid === P);
-    G && c(G), le && m(le), y(!0);
-  }, Se = () => i(T.DEBTS_CLICK_FILTER), ve = () => {
-    D(!0), i(T.DEBTS_CLICK_SNOWBALL_CTA);
-  }, De = () => {
+  const oe = (G) => $(G), ne = () => {
+    const G = h.find((ee) => ee.guid === P), ie = H.find((ee) => ee.guid === P);
+    G && c(G), ie && m(ie), y(!0);
+  }, Se = () => i(T.DEBTS_CLICK_FILTER), De = () => {
+    v(!0), i(T.DEBTS_CLICK_SNOWBALL_CTA);
+  }, ve = () => {
     u(!0), i(T.DEBTS_CLICK_PAYDOWN);
   };
   return !d || !A ? /* @__PURE__ */ e(tt, {}) : /* @__PURE__ */ s(
@@ -1480,7 +1466,7 @@ const kt = (a) => {
     {
       actions: [
         /* @__PURE__ */ e(Ot, {}, "prioritize-debts"),
-        /* @__PURE__ */ e(Gt, { onClick: De }, "extra-paydown")
+        /* @__PURE__ */ e(Gt, { onClick: ve }, "extra-paydown")
       ],
       allowedAccountTypes: [
         X.CREDIT_CARD,
@@ -1494,9 +1480,9 @@ const kt = (a) => {
       sx: o,
       title: n.title,
       children: [
-        /* @__PURE__ */ s(g, { sx: { px: r ? "48px" : "24px" }, children: [
+        /* @__PURE__ */ s(x, { sx: { px: r ? "48px" : "24px" }, children: [
           /* @__PURE__ */ s(
-            g,
+            x,
             {
               sx: {
                 alignItems: t ? "flex-start" : "flex-end",
@@ -1510,8 +1496,8 @@ const kt = (a) => {
                     debts: H,
                     height: t ? 250 : void 0,
                     hoveredDebtGuid: P,
-                    onClickArea: ie,
-                    onHoverArea: ne,
+                    onClickArea: ne,
+                    onHoverArea: oe,
                     sx: { mr: t ? "4px" : "-48px" }
                   }
                 ),
@@ -1519,20 +1505,20 @@ const kt = (a) => {
                   st,
                   {
                     debts: H,
-                    onClickCta: ve,
+                    onClickCta: De,
                     sx: { mb: t ? "0px" : "64px" }
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ e(g, { sx: { mx: t ? "-24px" : 0 }, children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(x, { sx: { mx: t ? "-24px" : 0 }, children: /* @__PURE__ */ e(
             Ft,
             {
               debts: H,
               hoveredDebtGuid: P,
-              onClickRow: ie,
-              onHoverRow: ne
+              onClickRow: ne,
+              onHoverRow: oe
             }
           ) })
         ] }),
@@ -1540,7 +1526,7 @@ const kt = (a) => {
           dt,
           {
             isOpen: f,
-            onClose: () => D(!1)
+            onClose: () => v(!1)
           }
         ),
         /* @__PURE__ */ e(Tt, { isOpen: I, onClose: () => y(!1) }),
@@ -1548,7 +1534,7 @@ const kt = (a) => {
       ]
     }
   );
-}, Fr = v(Wt);
+}, Fr = D(Wt);
 export {
   Ce as DebtsChart,
   Or as DebtsStore,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "7.10.0",
+  "version": "7.10.1-alpha-bugtesting-debtstable-ram",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",