@mx-cartographer/experiences 6.26.18-alpha.mega2 → 6.26.18-alpha.mega3

package/dist/dashboard/Dashboard/index.es.js

@@ -0,0 +1,47 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import i from "react";
+import { observer as b } from "mobx-react-lite";
+import c from "@mui/material/Unstable_Grid2";
+import t from "@mui/material/Skeleton";
+import s from "@mui/material/Stack";
+import { Banner as v } from "../../common/components/Banner/index.es.js";
+import D from "../Greeting/index.es.js";
+import { DashboardLocation as a } from "../constants/Dashboard/index.es.js";
+import { useScreenSize as M } from "../../common/hooks/useScreenSize/index.es.js";
+import { useGlobalStore as G, useGlobalUiStore as k, useAccountStore as w } from "../../common/context/hooks/index.es.js";
+const A = ({ widgets: m, isLoading: d }) => {
+  const { isDesktop: l, isMobile: p } = M(), { copyStore: u } = G(), { setSelectedAccounts: f } = k(), { visibleAccounts: h } = w();
+  i.useEffect(() => {
+    f(h);
+  }, [h]);
+  const r = i.useMemo(
+    () => m.filter((e) => e.location !== a.Disabled).sort((e, S) => e.index - S.index),
+    [m]
+  ), g = i.useMemo(
+    () => r.filter((e) => e.location === a.Main),
+    [r]
+  ), x = i.useMemo(
+    () => r.filter((e) => e.location === a.RightSide),
+    [r]
+  );
+  return /* @__PURE__ */ n(c, { container: !0, spacing: p ? 0 : 24, sx: { overflow: "scroll" }, children: [
+    /* @__PURE__ */ o(c, { xs: 12, children: u.isInitialized && /* @__PURE__ */ o(D, {}) }),
+    /* @__PURE__ */ n(c, { lg: 8, xs: 12, children: [
+      /* @__PURE__ */ o(v, {}),
+      d && /* @__PURE__ */ n(s, { direction: "column", spacing: 24, children: [
+        /* @__PURE__ */ o(t, { height: 100, variant: "rounded", width: "100%" }),
+        /* @__PURE__ */ o(t, { height: 300, variant: "rounded", width: "100%" }),
+        /* @__PURE__ */ o(t, { height: 300, variant: "rounded", width: "100%" })
+      ] }),
+      !d && /* @__PURE__ */ o(s, { direction: "column", spacing: 24, children: l ? g.map((e) => /* @__PURE__ */ o(i.Fragment, { children: e.component }, e.index)) : r.map((e) => /* @__PURE__ */ o(i.Fragment, { children: e.component }, e.index)) })
+    ] }),
+    l && /* @__PURE__ */ o(c, { lg: 4, children: d ? /* @__PURE__ */ n(s, { direction: "column", spacing: 24, children: [
+      /* @__PURE__ */ o(t, { height: 200, variant: "rounded", width: "100%" }),
+      /* @__PURE__ */ o(t, { height: 100, variant: "rounded", width: "100%" }),
+      /* @__PURE__ */ o(t, { height: 300, variant: "rounded", width: "100%" })
+    ] }) : /* @__PURE__ */ o(s, { direction: "column", spacing: 24, children: x.map((e) => /* @__PURE__ */ o(i.Fragment, { children: e.component }, e.index)) }) })
+  ] });
+}, q = b(A);
+export {
+  q as default
+};

package/dist/dashboard/Greeting/index.es.js

@@ -0,0 +1,71 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import l from "react";
+import { observer as h } from "mobx-react-lite";
+import r from "@mui/material/Stack";
+import C from "@mui/material/Paper";
+import { H1 as b, P as w } from "@mxenabled/mxui";
+import { useMediaQuery as y } from "@mui/system";
+import S from "../../common/components/addaccounts/AddAccounts/index.es.js";
+import x from "../../common/components/accountfilter/AccountFilter/index.es.js";
+import { useAccountStore as v, useGlobalUiStore as z, useGlobalCopyStore as G, useAppConfig as D } from "../../common/context/hooks/index.es.js";
+import { useScreenSize as F } from "../../common/hooks/useScreenSize/index.es.js";
+import k from "../../common/components/ConnectDrawer/index.es.js";
+const B = () => {
+  const [i, c] = l.useState(!1), u = y("(max-width:320px)"), { visibleAccounts: a } = v(), { selectedAccountGuids: _, setSelectedAccountGuids: m } = z(), { common: t, connect: f } = G(), { config: p } = D(), { isMobile: d } = F(), g = {
+    accountFilterOptionsCopy: {
+      accountTypeAccounts: t.account_filter.account_type_accounts,
+      cancelButton: t.cancel_button,
+      filterButton: t.filter_button,
+      filterButtonAria: t.account_filter.filter_button_generic_aria,
+      selectAllAccounts: t.account_filter.select_all_accounts,
+      toggleAccountTypeAccounts: t.account_filter.toggle_account_type_accounts,
+      unselectAllAccounts: t.account_filter.unselect_all_accounts,
+      zeroStateButton: t.account_filter.zero_state_button,
+      zeroStateDescription: t.account_filter.zero_state_description,
+      zeroStateTitle: t.account_filter.zero_state_title
+    },
+    title: t.filter_button
+  }, A = () => {
+    const o = (/* @__PURE__ */ new Date()).getHours();
+    return o > 1 && o < 12 ? t.good_morning : o >= 12 && o < 18 ? t.good_afternoon : t.good_evening;
+  };
+  return /* @__PURE__ */ n(l.Fragment, { children: [
+    /* @__PURE__ */ e(C, { sx: { gap: 12, mb: d ? 24 : 0, p: 24 }, children: /* @__PURE__ */ n(r, { alignItems: "center", flexDirection: "row", justifyContent: "space-between", children: [
+      /* @__PURE__ */ n(r, { children: [
+        /* @__PURE__ */ e(b, { variant: u ? "H2" : "H1", children: A() }),
+        /* @__PURE__ */ e(w, { color: "text.secondary", children: t.heres_your_spending_overview })
+      ] }),
+      /* @__PURE__ */ n(r, { flexDirection: "row", children: [
+        p.show_connections_widget_in_master && /* @__PURE__ */ e(S, { handleConnectClick: () => c(!0) }),
+        /* @__PURE__ */ e(
+          x,
+          {
+            accounts: a,
+            copy: g,
+            onConnectAccountClick: () => c(!0),
+            onFilterClick: (s) => {
+              m(s);
+            },
+            selectedAccountGuids: _,
+            showAccountNumbers: !1,
+            sx: {
+              maxWidth: "100%"
+            },
+            variant: "text"
+          }
+        )
+      ] })
+    ] }) }),
+    i && /* @__PURE__ */ e(
+      k,
+      {
+        onClose: () => c(!1),
+        showConnectWidget: i,
+        title: f.mini_title
+      }
+    )
+  ] });
+}, $ = h(B);
+export {
+  $ as default
+};

package/dist/dashboard/constants/Dashboard/index.es.js

@@ -0,0 +1,4 @@
+var i = /* @__PURE__ */ ((e) => (e[e.Main = 0] = "Main", e[e.RightSide = 1] = "RightSide", e[e.Disabled = 2] = "Disabled", e))(i || {});
+export {
+  i as DashboardLocation
+};

package/dist/dashboard/index.es.js

@@ -0,0 +1,6 @@
+import { default as r } from "./Dashboard/index.es.js";
+import { DashboardLocation as d } from "./constants/Dashboard/index.es.js";
+export {
+  r as Dashboard,
+  d as DashboardLocation
+};

package/dist/debts/DebtsWidget/index.es.js

@@ -0,0 +1,111 @@
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import e from "react";
+import { observer as N } from "mobx-react-lite";
+import f from "@mui/material/Stack";
+import R from "../components/SnowballCard/index.es.js";
+import z from "../components/SnowballDrawer/index.es.js";
+import K from "../components/DebtDrawer/index.es.js";
+import U from "../components/PaydownDrawer/index.es.js";
+import { DebtsChart as j } from "../components/DebtsChart/index.es.js";
+import { DebtsTable as M } from "../components/DebtsTable/index.es.js";
+import { DebtsPriorityAction as V } from "../components/actions/DebtsPriorityAction/index.es.js";
+import { transformDebtsChartData as Y } from "../utils/DebtsWidget/index.es.js";
+import { useAccountUiStore as $ } from "../../accounts/hooks/useUiStore/index.es.js";
+import { useDebtsUiStore as q } from "../hooks/useDebtsUiStore/index.es.js";
+import { PaydownButton as J } from "../components/debtspaydown/PaydownButton/index.es.js";
+import { useScreenSize as Q } from "../../common/hooks/useScreenSize/index.es.js";
+import { useGlobalCopyStore as X, useEvent as Z, useGlobalUiStore as tt, useAccountStore as et, useGoalStore as ot, useDebtStore as rt } from "../../common/context/hooks/index.es.js";
+import { ANALYTICS_EVENTS as c } from "../../common/constants/Analytics/index.es.js";
+import st from "../../common/components/Loader/index.es.js";
+import nt from "../../common/components/WidgetContainer/index.es.js";
+const it = ({ onBackClick: h, sx: E }) => {
+  const [O, d] = e.useState(!1), [k, u] = e.useState(!1), [I, D] = e.useState(!1), [n, v] = e.useState(""), { isDesktop: L, isMobile: o } = Q(), { debts: P } = X(), { onEvent: i } = Z(), { isCopyLoaded: _, isInitialized: l, setSelectedAccounts: b } = tt(), { setSelectedAccount: T } = $(), { selectedDebtPriority: C, setSelectedDebtChartData: g } = q(), { visibleDebtAccounts: s } = et(), { goalsLoaded: B, loadGoals: G, monthlyCashFlowProfile: S } = ot(), { debts: w } = rt(), a = e.useMemo(() => {
+    const r = S?.extra_payment ?? 0;
+    return Y(w, C, r);
+  }, [w, C, S]);
+  e.useEffect(() => {
+    b(s), i(c.DEBTS_VIEW);
+  }, []), e.useEffect(() => {
+    b(s);
+  }, [s]), e.useEffect(() => {
+    l && G().finally();
+  }, [l]);
+  const x = (r) => v(r), y = () => {
+    const r = s.find((m) => m.guid === n), A = a.find((m) => m.guid === n);
+    r && T(r), A && g(A), d(!0);
+  }, W = () => i(c.DEBTS_CLICK_FILTER), F = () => {
+    D(!0), i(c.DEBTS_CLICK_SNOWBALL_CTA);
+  }, H = () => {
+    u(!0), i(c.DEBTS_CLICK_PAYDOWN);
+  };
+  return !B || !_ || !l ? /* @__PURE__ */ t(st, {}) : /* @__PURE__ */ p(
+    nt,
+    {
+      accountOptions: s,
+      actions: [
+        /* @__PURE__ */ t(V, {}, "prioritize-debts"),
+        /* @__PURE__ */ t(J, { onClick: H }, "extra-paydown")
+      ],
+      onAccountsFilterClick: W,
+      onBackClick: h,
+      sx: E,
+      title: P.title,
+      children: [
+        /* @__PURE__ */ p(f, { sx: { px: L ? "48px" : "24px" }, children: [
+          /* @__PURE__ */ p(
+            f,
+            {
+              sx: {
+                alignItems: o ? "flex-start" : "flex-end",
+                flexDirection: o ? "column" : "row",
+                mx: o ? "-12px" : 0
+              },
+              children: [
+                /* @__PURE__ */ t(
+                  j,
+                  {
+                    debts: a,
+                    height: o ? 250 : void 0,
+                    hoveredDebtGuid: n,
+                    onClickArea: y,
+                    onHoverArea: x,
+                    sx: { mr: o ? "4px" : "-48px" }
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  R,
+                  {
+                    debts: a,
+                    onClickCta: F,
+                    sx: { mb: o ? "0px" : "64px" }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(f, { sx: { mx: o ? "-24px" : 0 }, children: /* @__PURE__ */ t(
+            M,
+            {
+              debts: a,
+              hoveredDebtGuid: n,
+              onClickRow: y,
+              onHoverRow: x
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ t(
+          z,
+          {
+            isOpen: I,
+            onClose: () => D(!1)
+          }
+        ),
+        /* @__PURE__ */ t(K, { isOpen: O, onClose: () => d(!1) }),
+        /* @__PURE__ */ t(U, { isOpen: k, onClose: () => u(!1) })
+      ]
+    }
+  );
+}, It = N(it);
+export {
+  It as default
+};

package/dist/debts/components/DebtDrawer/index.es.js

@@ -0,0 +1,28 @@
+import { jsx as t, jsxs as m, Fragment as c } from "react/jsx-runtime";
+import n from "@mui/material/Stack";
+import { useDebtsUiStore as p } from "../../hooks/useDebtsUiStore/index.es.js";
+import d from "../../../accounts/components/detailsdrawer/Accounts/AccountDetailsHeader/index.es.js";
+import f from "../debtsdrawer/DebtDetailsChart/index.es.js";
+import D from "../debtsdrawer/DebtDetailsContent/index.es.js";
+import { useGlobalCopyStore as b } from "../../../common/context/hooks/index.es.js";
+import h from "../../../common/components/drawer/Drawer/index.es.js";
+const k = ({ isOpen: o, onClose: e, sx: a }) => {
+  const { debts: r } = b(), { showError: s, showCompleted: i } = p(), l = s || i ? /* @__PURE__ */ t(c, {}) : /* @__PURE__ */ t(f, {});
+  return /* @__PURE__ */ t(
+    h,
+    {
+      ariaLabelClose: r.details_close_aria,
+      isOpen: o,
+      onClose: e,
+      sx: { ...a },
+      title: r.details_title,
+      children: /* @__PURE__ */ m(n, { bgcolor: "background.default", children: [
+        /* @__PURE__ */ t(d, { customDetailsChart: l }),
+        /* @__PURE__ */ t(D, {})
+      ] })
+    }
+  );
+};
+export {
+  k as default
+};

package/dist/debts/components/DebtsChart/index.es.js

@@ -0,0 +1,134 @@
+import { jsx as _ } from "react/jsx-runtime";
+import { LineChart as b } from "@mui/x-charts";
+import { useTheme as D } from "@mui/material/styles";
+import { adjustBrightness as L, BASE_LINE_COLOR as k } from "../../utils/DebtsChart/index.es.js";
+import { useEvent as I } from "../../../common/context/hooks/index.es.js";
+import { formatDate as S, DATE_FORMATS_INTL as v } from "../../../common/constants/DateFormats/index.es.js";
+import { formatCurrency as H } from "../../../common/utils/NumberFormatting/index.es.js";
+import { ANALYTICS_EVENTS as w } from "../../../common/constants/Analytics/index.es.js";
+const V = ({
+  sx: p,
+  height: g = 500,
+  width: h,
+  debts: f,
+  hoveredDebtGuid: l,
+  onClickArea: y,
+  onHoverArea: T
+}) => {
+  const A = D(), { onEvent: E } = I(), m = f.filter((e) => !e.is_impossible), r = [
+    ...new Set(
+      m.flatMap((e) => e.dataset.map((t) => new Date(t.x).getTime()))
+    )
+  ].sort((e, t) => e - t).map((e) => new Date(e)), n = m.map((e) => {
+    const t = new Map(e.dataset.map((o) => [new Date(o.x).getTime(), o.y]));
+    let a = t.get(r[0].getTime()) ?? 0;
+    const i = r.map((o) => {
+      const d = t.get(o.getTime()) ?? a;
+      return a = d, { x: o, y: d };
+    });
+    return { ...e, dataset: i };
+  }), c = n.reduce(
+    (e, t) => e + (t.dataset[0]?.y ?? 0),
+    0
+  ), M = r.map((e, t) => {
+    const a = t / (r.length - 1), i = c * (1 - a);
+    return { x: e, y: i };
+  }), x = Math.ceil(c / 100) * 100, C = r, s = n.map((e, t) => {
+    const a = 1 - t / n.length * 0.5, i = L(k, a);
+    return {
+      id: `debt-${t}`,
+      guid: e.guid,
+      label: e.name,
+      data: e.dataset.map((o) => o.y),
+      color: i,
+      curve: "linear",
+      type: "line",
+      area: !0,
+      stack: "total",
+      showMark: !1
+    };
+  });
+  s.push({
+    id: "payoff-line",
+    label: "Payoff Line",
+    data: M.map((e) => e.y),
+    color: A.palette.grey[700],
+    curve: "linear",
+    type: "line",
+    stack: void 0,
+    showMark: !1,
+    disableHighlight: !0
+  });
+  const u = (e) => s.findIndex((t) => t?.guid === e);
+  return /* @__PURE__ */ _(
+    b,
+    {
+      axisHighlight: { x: "none" },
+      disableLineItemHighlight: !0,
+      height: g,
+      onAreaClick: (e, t) => {
+        y?.();
+        const a = s.find((i) => i.id === t.seriesId);
+        E(w.DEBTS_CLICK_CHART_AREA, { account_guid: a?.guid });
+      },
+      onHighlightChange: (e) => {
+        const t = s.find((a) => a.id === e?.seriesId)?.guid;
+        T?.(t ?? "");
+      },
+      series: s,
+      skipAnimation: !0,
+      slotProps: {
+        legend: {
+          hidden: !0
+        }
+      },
+      sx: {
+        p: 4,
+        "& .MuiBarLabel-root": {
+          fontSize: 10,
+          fontWeight: 600
+        },
+        "& .MuiAreaElement-root": {
+          opacity: 0.4,
+          transition: "opacity 0.3s ease"
+        },
+        "& .MuiAreaElement-root:hover": {
+          opacity: 1
+        },
+        "& .MuiLineElement-series-payoff-line": {
+          strokeDasharray: "10 5",
+          strokeWidth: 1
+        },
+        [`& .MuiLineElement-series-debt-${u(l ?? "0")}`]: {
+          opacity: 1
+        },
+        [`& .MuiAreaElement-series-debt-${u(l ?? "0")}`]: {
+          opacity: 1
+        },
+        ...p
+      },
+      tooltip: { trigger: "none" },
+      width: h,
+      xAxis: [
+        {
+          data: C,
+          scaleType: "time",
+          min: r[0],
+          disableTicks: !0,
+          valueFormatter: (e) => S(e, v.MONTH_SHORT_YEAR)
+        }
+      ],
+      yAxis: [
+        {
+          min: 0,
+          max: x,
+          disableTicks: !0,
+          valueFormatter: (e) => H(e, "0a")
+        }
+      ]
+    }
+  );
+};
+export {
+  V as DebtsChart
+};

package/dist/debts/components/DebtsTable/AccountCell/index.es.js

@@ -0,0 +1,24 @@
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import { InstitutionLogo as a, Text as i } from "@mxenabled/mxui";
+import c from "@mui/material/Stack";
+import { AccountTypeName as l } from "../../../../common/types/Account/index.es.js";
+const d = (r) => {
+  const t = r.row.account, e = l[t.account_type];
+  return /* @__PURE__ */ o(c, { alignItems: "center", flexDirection: "row", children: [
+    /* @__PURE__ */ n(
+      a,
+      {
+        alt: `${t.institutionName}`,
+        institutionGuid: t.institution_guid || ""
+      }
+    ),
+    /* @__PURE__ */ o(c, { ml: 12, children: [
+      /* @__PURE__ */ n(i, { variant: "Small", children: t.name }),
+      /* @__PURE__ */ n(i, { variant: "XSmall", children: e })
+    ] })
+  ] });
+};
+export {
+  d as AccountCell,
+  d as default
+};

package/dist/debts/components/DebtsTable/PriorityCell/index.es.js

@@ -0,0 +1,32 @@
+import { jsx as e } from "react/jsx-runtime";
+import n from "@mui/material/Box";
+import { Text as i } from "@mxenabled/mxui";
+const c = (o) => {
+  const t = {
+    text: "#121417",
+    background: "#FFB252"
+  };
+  return o === "!" && (t.text = "#FFFFFF", t.background = "#DF320C"), o === "✓" && (t.text = "#FFFFFF", t.background = "#09A57F"), t;
+}, s = (o) => {
+  const t = String(o.formattedValue), r = c(t);
+  return /* @__PURE__ */ e(
+    n,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 20,
+        // Adjust the size as needed
+        height: 20,
+        borderRadius: "50%",
+        backgroundColor: r.background,
+        marginLeft: "10px"
+      },
+      children: /* @__PURE__ */ e(i, { color: r.text, fontWeight: 700, variant: "Small", children: t })
+    }
+  );
+};
+export {
+  s as PriorityCell
+};

package/dist/debts/components/DebtsTable/index.es.js

@@ -0,0 +1,174 @@
+import { jsx as l } from "react/jsx-runtime";
+import c from "react";
+import { useTheme as E } from "@mui/material";
+import { DataGridPro as I } from "@mui/x-data-grid-pro";
+import T from "@mui/material/Box";
+import { Icon as w } from "@mxenabled/mxui";
+import { priorityComparator as M, getPriorityValue as R } from "../../utils/DebtsTable/index.es.js";
+import { HeaderCell as o } from "../../../trends/components/trendstable/HeaderCell/index.es.js";
+import { PriorityCell as v } from "../debtstable/PriorityCell/index.es.js";
+import { AccountCell as H } from "../debtstable/AccountCell/index.es.js";
+import { useEvent as D, useGlobalCopyStore as F } from "../../../common/context/hooks/index.es.js";
+import { useScreenSize as L } from "../../../common/hooks/useScreenSize/index.es.js";
+import { formatCurrency as f } from "../../../common/utils/NumberFormatting/index.es.js";
+import { formatDate as W, DATE_FORMATS_INTL as O } from "../../../common/constants/DateFormats/index.es.js";
+import { ANALYTICS_EVENTS as h } from "../../../common/constants/Analytics/index.es.js";
+const ee = ({
+  sx: p = {},
+  debts: a,
+  hoveredDebtGuid: g,
+  onHoverRow: n,
+  onClickRow: b
+}) => {
+  const _ = E(), { onEvent: d } = D(), { isMobile: t } = L(), { debts: r } = F(), [m, y] = c.useState([
+    { field: "priority", sort: "asc" }
+  ]), s = [
+    {
+      field: "priority",
+      headerName: r.table_column_priority,
+      renderHeader: o,
+      renderCell: v,
+      sortComparator: M,
+      sortable: !0,
+      hideSortIcons: !0,
+      type: "custom",
+      align: "left",
+      headerAlign: "left",
+      minWidth: t ? 67 : 72,
+      flex: t ? 0.2 : 0.4
+    },
+    {
+      field: "account",
+      headerName: r.table_column_account,
+      renderHeader: o,
+      renderCell: H,
+      sortable: !1,
+      type: "custom",
+      align: "left",
+      headerAlign: "left",
+      minWidth: t ? 180 : 225,
+      flex: 1
+    },
+    {
+      field: "balance",
+      headerName: r.table_column_balance,
+      renderHeader: o,
+      valueFormatter: (e) => f(e, "0,0"),
+      sortable: !0,
+      hideSortIcons: t,
+      type: "number",
+      align: t ? "right" : "left",
+      headerAlign: t ? "right" : "left",
+      minWidth: t ? 70 : 122,
+      flex: t ? 0.4 : 0.6
+    },
+    {
+      field: "interest_rate",
+      headerName: r.table_column_interest_rate,
+      renderHeader: o,
+      valueFormatter: (e) => isNaN(e) ? "---" : `${Number(e).toFixed(2)}%`,
+      sortable: !0,
+      hideSortIcons: t,
+      type: "number",
+      align: "left",
+      headerAlign: "left",
+      minWidth: 122,
+      flex: 0.6
+    },
+    {
+      field: "projected_payoff_date",
+      headerName: r.table_column_payoff_date,
+      renderHeader: o,
+      valueFormatter: (e) => e ? W(e, O.MONTH_SHORT_YEAR) : "---",
+      sortable: !0,
+      hideSortIcons: t,
+      type: "number",
+      align: "left",
+      headerAlign: "left",
+      minWidth: 122,
+      flex: 0.6
+    },
+    {
+      field: "monthly_payment",
+      headerName: r.table_column_amount_due,
+      renderHeader: o,
+      valueFormatter: (e) => typeof e == "number" ? f(e, "0,0") : "---",
+      sortable: !0,
+      hideSortIcons: t,
+      type: "number",
+      align: "left",
+      headerAlign: "left",
+      minWidth: 122,
+      flex: 0.6
+    }
+  ], C = [
+    ...s.slice(0, 3),
+    {
+      field: "chevron",
+      headerName: "",
+      renderHeader: void 0,
+      renderCell: () => /* @__PURE__ */ l(w, { name: "chevron_right'" }),
+      sortable: !0,
+      hideSortIcons: !0,
+      type: "custom",
+      align: "right",
+      headerAlign: "right",
+      width: 20
+    }
+  ], u = c.useMemo(() => a.map((e, i) => ({
+    ...e,
+    id: i,
+    priority: R(e)
+  })), [a]), S = (e) => {
+    const x = e.target.closest("[data-id]")?.getAttribute("data-id"), A = a[Number(x)];
+    n?.(A?.guid ?? "");
+  }, N = (e) => u.find((i) => i.guid === e)?.id;
+  return /* @__PURE__ */ l(
+    T,
+    {
+      sx: {
+        height: "100dvh",
+        width: "100%",
+        mt: "15px",
+        overflowX: "auto",
+        boxShadow: "none",
+        ...p
+      },
+      children: /* @__PURE__ */ l(
+        I,
+        {
+          columns: t ? C : s,
+          disableColumnFilter: !0,
+          disableColumnMenu: !0,
+          hideFooter: !0,
+          initialState: { sorting: { sortModel: m } },
+          onRowClick: (e) => {
+            b(), d(h.TRENDS_CLICK_TABLE_ROW, { account_guid: e.row.guid });
+          },
+          onSortModelChange: (e) => {
+            y(e), d(h.TRENDS_CLICK_TABLE_SORT);
+          },
+          rows: u,
+          slotProps: {
+            baseIconButton: { color: "secondary", sx: { ml: 8 } },
+            row: {
+              onMouseEnter: S,
+              onMouseLeave: () => n?.("")
+            }
+          },
+          sortModel: m,
+          sortingOrder: ["asc", "desc"],
+          sx: {
+            [`& .MuiDataGrid-row[data-id="${N(g)}"]`]: {
+              backgroundColor: _.palette.mode === "light" ? "#f8f9fb" : "#1f2329",
+              filter: "brightness(98%)"
+            }
+          }
+        }
+      )
+    }
+  );
+};
+export {
+  ee as DebtsTable
+};

package/dist/debts/components/PaydownDrawer/index.es.js

@@ -0,0 +1,21 @@
+import { jsx as o } from "react/jsx-runtime";
+import n from "../debtspaydown/PaydownContent/index.es.js";
+import { useGlobalCopyStore as d } from "../../../common/context/hooks/index.es.js";
+import i from "../../../common/components/drawer/Drawer/index.es.js";
+const w = ({ isOpen: e, onClose: t, sx: a }) => {
+  const { debts: r } = d();
+  return /* @__PURE__ */ o(
+    i,
+    {
+      ariaLabelClose: r.paydown_drawer_close_aria,
+      isOpen: e,
+      onClose: t,
+      sx: { ...a },
+      title: r.paydown_drawer_title,
+      children: /* @__PURE__ */ o(n, {})
+    }
+  );
+};
+export {
+  w as default
+};