@mx-cartographer/experiences 8.0.0-alpha.bb4 → 8.0.0-alpha.sms1

package/dist/{AccountDetailsHeader-DRjFuyJT.mjs → AccountDetailsHeader-i3KFhNuo.mjs}

@@ -4,20 +4,20 @@ import e from "@mui/material/Stack";
 import { H3 as _, InstitutionLogo as x, Text as a, H2 as T } from "@mxenabled/mxui";
 import d from "react";
 import { G as N, d as f, m as D, f as w, u as E } from "./hooks-C41HAxM5.mjs";
-import { g as I } from "./AccountFields-Cl4KHoSj.mjs";
+import { g as I } from "./AccountFields-QZspYAji.mjs";
 import G from "@mui/material/Card";
 import v from "@mui/material/CardContent";
 import O from "@mui/material/CardHeader";
-import { L as H } from "./Loader-Ckqi9Rx6.mjs";
-import { f as M, a as P } from "./Dialog-CDV0kKxj.mjs";
-import { I as L, P as U, S as j } from "./Account-B4CDD-zq.mjs";
-import { u as z } from "./useAccountDisplayName-CcIp09Xc.mjs";
-import { f as Y } from "./NumberFormatting-DjTD0t3W.mjs";
+import { L as H } from "./Loader-DUaFpDGv.mjs";
+import { f as M, a as P } from "./Dialog-BPTr3qHE.mjs";
+import { I as L, P as U, S as j } from "./Account-BDXA6PWh.mjs";
+import { u as z } from "./useAccountDisplayName-CFNF8766.mjs";
+import { f as B } from "./NumberFormatting-DjTD0t3W.mjs";
 const p = () => {
   if (!d.useContext(N))
     throw new Error("useCategoryUiStore() must be used within the GlobalDataContext");
   return f().uiStore;
-}, k = ({ sx: n, ChartComponent: s }) => {
+}, Y = ({ sx: n, ChartComponent: s }) => {
   const { loadMonthlyCategoryTotals: c } = D(), { isInitialized: o } = w(), { selectedAccount: r } = p(), [l, u] = d.useState(!1);
   return d.useEffect(() => {
     o && c([r]).finally(() => {
@@ -44,17 +44,17 @@ const p = () => {
       ]
     }
   );
-}, B = m(k), R = ({
+}, k = m(Y), R = ({
   customDetailsChart: n,
   ChartComponent: s
 }) => {
-  const { institutions: c } = f(), { selectedAccount: o } = p(), { accounts: r } = E(), { firstSubtitle: l, firstValue: u, hasAvailableBalance: b, secondSubtitle: C, secondValue: h } = I(o, r), y = c.find(
-    (g) => g.guid === o?.institution_guid
+  const { institutions: c } = f(), { selectedAccount: o } = p(), { accounts: r } = E(), { firstSubtitle: l, firstValue: u, hasAvailableBalance: C, secondSubtitle: h, secondValue: S } = I(o, r), b = c.find(
+    (y) => y.guid === o?.institution_guid
   ), A = [
     ...L,
     ...U,
     ...j
-  ].includes(o.account_type), S = z(o);
+  ].includes(o.account_type), g = z(o);
   return /* @__PURE__ */ i(e, { bgcolor: "background.default", p: 24, children: [
     /* @__PURE__ */ i(e, { gap: 12, children: [
       /* @__PURE__ */ t(
@@ -65,20 +65,20 @@ const p = () => {
           size: 64
         }
       ),
-      /* @__PURE__ */ t(a, { variant: "body2", children: y?.name })
+      /* @__PURE__ */ t(a, { variant: "Small", children: b?.name })
     ] }),
     /* @__PURE__ */ i(e, { gap: 8, mb: 24, mt: 4, children: [
-      /* @__PURE__ */ t(T, { children: S }),
+      /* @__PURE__ */ t(T, { children: g }),
       /* @__PURE__ */ i(e, { direction: "row", justifyContent: "space-between", children: [
-        /* @__PURE__ */ t(a, { bold: b, variant: "body1", children: l }),
-        /* @__PURE__ */ t(a, { bold: !0, variant: "body1", children: Y(u, "0,0.00") })
+        /* @__PURE__ */ t(a, { bold: C, variant: "Body", children: l }),
+        /* @__PURE__ */ t(a, { bold: !0, variant: "Body", children: B(u, "0,0.00") })
       ] }),
       /* @__PURE__ */ i(e, { direction: "row", justifyContent: "space-between", children: [
-        /* @__PURE__ */ t(a, { variant: "body2", children: C }),
-        /* @__PURE__ */ t(a, { variant: "body2", children: h })
+        /* @__PURE__ */ t(a, { variant: "Small", children: h }),
+        /* @__PURE__ */ t(a, { variant: "Small", children: S })
       ] })
     ] }),
-    A && /* @__PURE__ */ t(e, { children: n || /* @__PURE__ */ t(B, { ChartComponent: s }) })
+    A && /* @__PURE__ */ t(e, { children: n || /* @__PURE__ */ t(k, { ChartComponent: s }) })
   ] });
 }, rt = m(R);
 export {

package/dist/{AccountFields-Cl4KHoSj.mjs → AccountFields-QZspYAji.mjs}

@@ -1,10 +1,10 @@
 import { jsx as u } from "react/jsx-runtime";
-import { Text as y, Icon as p } from "@mxenabled/mxui";
-import { F as m, A as d, a as v, P as h, b as F } from "./ConnectDrawer-DVp54lUH.mjs";
-import { i as T, u as A, a as D, b as g, c as O } from "./Accounts-CRUehOiy.mjs";
-import { f as _, a as N, i as b, b as C } from "./NumberFormatting-DjTD0t3W.mjs";
+import { Icon as p, Text as y } from "@mxenabled/mxui";
+import { F as m, A as d, a as v, P as h, b as F } from "./ConnectDrawer-BIbTqYOH.mjs";
+import { i as T, u as A, a as D, b as g, c as O } from "./Accounts-DXfZotRC.mjs";
+import { f as _, i as b, a as N, b as S } from "./NumberFormatting-DjTD0t3W.mjs";
 import { b as i } from "./Localization-2MODESHW.mjs";
-import { f as o, a as f } from "./Dialog-CDV0kKxj.mjs";
+import { f as o, a as f } from "./Dialog-BPTr3qHE.mjs";
 const w = (l, e) => {
   const r = [
     {
@@ -87,7 +87,7 @@ const w = (l, e) => {
     type: m.Date,
     valueFormatter: (a) => i(
       e.day_of_every_month,
-      C(a <= 31 ? a : new Date(a).getDate())
+      S(a <= 31 ? a : new Date(a).getDate())
     )
   })), g(l) && r.push({
     label: e.credit_limit,
@@ -103,20 +103,18 @@ const w = (l, e) => {
     type: m.Currency,
     valueFormatter: (a) => _(a, "0,0.00")
   }), r;
-}, S = (l, e) => {
+}, C = (l, e) => {
   let r = "", a = null, t = null, n = null, s = !1;
   switch (l.account_type) {
-    // checking or savings
     case 1:
     case 2: {
       l.available_balance ? (r = e.available_balance, a = l.available_balance, t = l.available_balance ? e.current_balance : null, n = _(l.balance, "0,0.00"), s = !0) : (r = e.current_balance, a = l.balance);
       break;
     }
-    // credit cards, loans, investments, etc
     default:
       if (r = e.current_balance, a = l.balance, l.minimum_payment && l.payment_due_at) {
         const c = typeof l.payment_due_at == "number" ? new Date(l.payment_due_at * 1e3) : l.payment_due_at;
-        t = /* @__PURE__ */ u(y, { component: "strong", variant: "caption", children: i(
+        t = /* @__PURE__ */ u(y, { component: "strong", variant: "XSmall", children: i(
           e.payment_due_on,
           _(l.minimum_payment, "0,0.00"),
           o(c, f.FULL_MONTH_DAY)
@@ -131,11 +129,11 @@ const w = (l, e) => {
     hasAvailableBalance: s
   };
 }, x = (l, e) => l.reduce((a, t) => {
-  const s = S(t, e).firstValue || 0;
+  const s = C(t, e).firstValue || 0;
   return a + s;
 }, 0);
 export {
   x as a,
   w as b,
-  S as g
+  C as g
 };

package/dist/AccountListItem-DX5upmCS.mjs

@@ -0,0 +1,90 @@
+import { jsx as e, jsxs as r, Fragment as l } from "react/jsx-runtime";
+import { observer as b } from "mobx-react-lite";
+import I from "@mui/material/Badge";
+import m from "@mui/material/Box";
+import S from "@mui/material/ListItem";
+import v from "@mui/material/ListItemAvatar";
+import C from "@mui/material/ListItemButton";
+import _ from "@mui/material/ListItemText";
+import B from "@mui/material/styles/useTheme";
+import { InstitutionLogo as L, Text as o } from "@mxenabled/mxui";
+import { Error as A } from "@mxenabled/mx-icons";
+import { I as j } from "./IconBacking-B9oC6uL2.mjs";
+import { g as T } from "./AccountFields-QZspYAji.mjs";
+import { u as X } from "./useAccountDisplayName-CFNF8766.mjs";
+import { u as $ } from "./hooks-C41HAxM5.mjs";
+import { C as d } from "./ConnectDrawer-BIbTqYOH.mjs";
+import { f as k } from "./NumberFormatting-DjTD0t3W.mjs";
+const w = {
+  gridRow: 1,
+  gridColumn: 1,
+  zIndex: 2
+}, E = ({ size: t = 20 }) => /* @__PURE__ */ e(j, { size: t, children: /* @__PURE__ */ e(A, { color: "error", filled: !0, sx: { fontSize: t, ...w } }) }), M = ({
+  account: t,
+  onRowClick: s,
+  listItemProps: c,
+  shouldShowConnectionStatus: p = !1
+}) => {
+  const u = B(), f = X(t), { accounts: i } = $(), { firstSubtitle: h, firstValue: g, secondSubtitle: x, secondValue: y } = T(
+    t,
+    i
+  );
+  let n;
+  (t.connectionStatus === d.Error || t.connectionStatus === d.RequiresMfa) && (n = /* @__PURE__ */ e(E, { size: 16 }));
+  const a = /* @__PURE__ */ r(l, { children: [
+    /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(
+      I,
+      {
+        badgeContent: p ? n : void 0,
+        sx: {
+          "& .MuiBadge-badge": {
+            right: -1
+          }
+        },
+        children: /* @__PURE__ */ e(L, { alt: "MX", institutionGuid: t.institution_guid || "" })
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      _,
+      {
+        disableTypography: !0,
+        primary: /* @__PURE__ */ r(
+          o,
+          {
+            bold: !0,
+            color: t.is_hidden ? u.palette.text.secondary : void 0,
+            sx: { whiteSpace: "normal" },
+            variant: "Body",
+            children: [
+              `${f} ${t.account_number ? `*${t.account_number}` : ""}`,
+              " ",
+              t.is_hidden && !t.is_closed && i.is_hidden,
+              t.is_closed && i.is_closed
+            ]
+          }
+        ),
+        secondary: /* @__PURE__ */ r(l, { children: [
+          /* @__PURE__ */ r(m, { sx: { alignItems: "center", display: "flex", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ e(o, { variant: "XSmall", children: h }),
+            /* @__PURE__ */ e(o, { bold: !0, variant: "Small", children: k(g, "0,0.00") })
+          ] }),
+          /* @__PURE__ */ r(m, { sx: { alignItems: "center", display: "flex", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ e(o, { variant: "XSmall", children: x }),
+            /* @__PURE__ */ e(o, { ml: "auto", variant: "XSmall", children: y })
+          ] })
+        ] })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ e(
+    S,
+    {
+      sx: { backgroundColor: "background.paper", color: t.is_closed ? "grey.700" : "" },
+      ...c,
+      children: s ? /* @__PURE__ */ e(C, { alignItems: "flex-start", onClick: s, sx: { px: 24 }, children: a }) : a
+    }
+  );
+}, Z = b(M);
+export {
+  Z as A
+};

package/dist/{AccountStore-HbVblv86.mjs → AccountStore-BcnDpyLL.mjs}

@@ -1,8 +1,8 @@
 import { makeAutoObservable as l, runInAction as a } from "mobx";
-import { i as A } from "./User-BklmOUSd.mjs";
+import { i as A } from "./User-wXzDI4M8.mjs";
 import { F as g, A as i } from "./Fetch-DecPFeGU.mjs";
-import { d as m } from "./Accounts-CRUehOiy.mjs";
-import { A as c, j as u } from "./ConnectDrawer-DVp54lUH.mjs";
+import { d as m } from "./Accounts-DXfZotRC.mjs";
+import { A as c, j as u } from "./ConnectDrawer-BIbTqYOH.mjs";
 class d {
   fetchInstance;
   constructor(t, e, s) {

package/dist/{Accounts-CRUehOiy.mjs → Accounts-DXfZotRC.mjs}

@@ -1,4 +1,4 @@
-import { A as e, C as u, E as r, c as p, M as y } from "./ConnectDrawer-DVp54lUH.mjs";
+import { A as e, C as u, E as r, c as p, M as y } from "./ConnectDrawer-BIbTqYOH.mjs";
 const l = (t) => t && (t.account_type === e.CREDIT_CARD || t.account_type === e.LOAN || t.account_type === e.MORTGAGE || t.account_type === e.LINE_OF_CREDIT || t.account_type === e.CHECKING_LINE_OF_CREDIT), I = (t) => t.is_manual || !t.guid, R = (t) => t.account_type === e.LINE_OF_CREDIT || t.account_type === e.CREDIT_CARD || t.account_type === e.CHECKING_LINE_OF_CREDIT, f = (t) => t.account_type === e.SAVINGS || t.account_type === e.CHECKING || t.account_type === e.LINE_OF_CREDIT || t.account_type === e.CREDIT_CARD || t.account_type === e.LOAN || t.account_type === e.MORTGAGE, m = (t) => t.account_type === e.LOAN || t.account_type === e.MORTGAGE, A = (t, n, s, _) => t.filter((i) => !(i.member_is_managed_by_user && _)).sort(d).map((i) => {
   const c = n.find((a) => a.guid === i.institution_guid), o = s.find((a) => a.guid === i.member_guid);
   return E(i, c, o);

package/dist/{BudgetUtil-Jv8h9H9l.mjs → BudgetUtil-Df2nII9u.mjs}

@@ -1,58 +1,58 @@
 import { i as _ } from "./hooks-C41HAxM5.mjs";
-import { b as d } from "./Category-Ccoew_sA.mjs";
+import { b as d } from "./Category-CevNQ03n.mjs";
 import { b as f } from "./Localization-2MODESHW.mjs";
 import { f as l } from "./NumberFormatting-DjTD0t3W.mjs";
 const p = (n, e) => n.find((t) => t.guid === e), B = (n, e) => n.find((t) => t.guid === e), T = (n, e) => {
-  const t = n.find((o) => o.subCategories.find((a) => a.guid === e));
+  const t = n.find((r) => r.subCategories.find((a) => a.guid === e));
   if (t)
-    return t.subCategories.find((o) => o.guid === e);
+    return t.subCategories.find((r) => r.guid === e);
 }, k = (n, e) => {
   const t = [];
-  for (const o of e) {
-    const a = p(n, o.category_guid);
+  for (const r of e) {
+    const a = p(n, r.category_guid);
     if (!a) continue;
-    const r = a.parent_guid ?? a.guid, s = p(n, r);
+    const o = a.parent_guid ?? a.guid, s = p(n, o);
     if (!s) continue;
     const u = {
-      amount: o.total,
+      amount: r.total,
       category: a,
       guid: a.guid,
       subCategoryTotals: []
-    }, i = t.find((g) => g.guid === r);
-    i ? (i.amount += o.total, i.subCategoryTotals.push(u)) : t.push({
-      amount: o.total,
+    }, i = t.find((g) => g.guid === o);
+    i ? (i.amount += r.total, i.subCategoryTotals.push(u)) : t.push({
+      amount: r.total,
       category: s,
-      guid: r,
+      guid: o,
       subCategoryTotals: [u]
     });
   }
   return t;
 }, w = (n, e) => {
-  const t = n.find((o) => o.guid === e);
+  const t = n.find((r) => r.guid === e);
   return t ? t.guid === d.INCOME || t.parent_guid === d.INCOME : !1;
 }, y = (n, e) => !n && !e ? 0 : !n && e ? 101 : e / n * 100, b = (n, e) => {
   const t = {
     background: e.palette.success.main,
     description: n <= 100 ? e.palette.text.secondary : e.palette.error.main,
     text: e.palette.common.white,
-    mercury: e.palette.success.light
+    mercury: e.palette.success.lighter
   };
-  return n > 100 ? (t.background = e.palette.error.main, t.mercury = e.palette.error.light) : n > 80 && (t.background = e.palette.warning.main, t.text = e.palette.grey[900], t.mercury = e.palette.warning.light), t;
+  return n > 100 ? (t.background = e.palette.error.main, t.mercury = e.palette.error.lighter) : n > 80 && (t.background = e.palette.warning.main, t.text = e.palette.grey[900], t.mercury = e.palette.warning.lighter), t;
 }, G = () => {
   const { detailedBudgets: n } = _();
   return n.map((t) => {
-    const o = t.transaction_total;
-    return t.amount - o;
-  }).reduce((t, o) => t + o, 0);
-}, I = (n, e, t, o) => {
+    const r = t.transaction_total;
+    return t.amount - r;
+  }).reduce((t, r) => t + r, 0);
+}, I = (n, e, t, r) => {
   const a = [];
-  for (const r of n) {
-    const s = B(e, r.category_guid);
+  for (const o of n) {
+    const s = B(e, o.category_guid);
     if (!s) continue;
-    const u = s.totalAmount, i = y(r.amount, u), g = r.amount - u;
+    const u = s.totalAmount, i = y(o.amount, u), g = o.amount - u;
     a.push({
-      ...r,
-      budgetColors: b(i, o),
+      ...o,
+      budgetColors: b(i, r),
       category: s,
       description: f(
         g < 0 ? t.budget_remaining_over : t.budget_remaining_left,
@@ -63,15 +63,15 @@ const p = (n, e) => n.find((t) => t.guid === e), B = (n, e) => n.find((t) => t.g
       transaction_total: u
     });
   }
-  for (const r of n) {
-    const s = T(e, r.category_guid);
+  for (const o of n) {
+    const s = T(e, o.category_guid);
     if (!s) continue;
     const u = s.currentAmount, i = a.find((C) => C.category_guid === s.parent_guid);
     if (!i) continue;
-    const g = r.amount - u, c = y(r.amount, u);
+    const g = o.amount - u, c = y(o.amount, u);
     i && i.subBudgets.push({
-      ...r,
-      budgetColors: b(c, o),
+      ...o,
+      budgetColors: b(c, r),
       category: s,
       description: f(
         g < 0 ? t.budget_remaining_over : t.budget_remaining_left,
@@ -84,9 +84,9 @@ const p = (n, e) => n.find((t) => t.guid === e), B = (n, e) => n.find((t) => t.g
   }
   return a;
 }, m = (n, e) => n.find((t) => t.guid === e), S = (n, e, t) => {
-  const o = m(n, t);
-  if (o)
-    return m(o.subBudgets, e);
+  const r = m(n, t);
+  if (r)
+    return m(r.subBudgets, e);
 };
 export {
   S as a,

package/dist/{CashflowStore-CA190BPF.mjs → CashflowStore-D9Dpuz7X.mjs}

@@ -2,40 +2,47 @@ import { jsx as t, jsxs as a } from "react/jsx-runtime";
 import c from "@mui/material/IconButton";
 import m from "@mui/material/Stack";
 import l from "@mui/material/Tooltip";
-import { Icon as p, Text as n } from "@mxenabled/mxui";
+import { Text as s, Icon as p, IconWeight as h } from "@mxenabled/mxui";
 import { makeAutoObservable as i } from "mobx";
 import { addDays as d } from "date-fns/addDays";
-import { differenceInDays as h } from "date-fns/differenceInDays";
-import { endOfMonth as f } from "date-fns/endOfMonth";
-import { isBefore as x } from "date-fns/isBefore";
+import { differenceInDays as f } from "date-fns/differenceInDays";
+import { endOfMonth as x } from "date-fns/endOfMonth";
+import { isBefore as u } from "date-fns/isBefore";
 import { startOfToday as r } from "date-fns/startOfToday";
-const U = ({
+const g = ({
   body: o,
   iconName: e = "info",
-  title: s
+  title: n
 }) => /* @__PURE__ */ t(
   l,
   {
     enterTouchDelay: 500,
     title: /* @__PURE__ */ a(m, { gap: 2, p: 12, sx: { textOverflow: "none" }, children: [
-      /* @__PURE__ */ t(n, { bold: !0, variant: "body1", children: s }),
-      /* @__PURE__ */ t(n, { sx: { whiteSpace: "unset" }, variant: "body2", children: o })
+      /* @__PURE__ */ t(s, { bold: !0, variant: "Body", children: n }),
+      /* @__PURE__ */ t(s, { sx: { whiteSpace: "unset" }, variant: "Small", children: o })
     ] }),
     children: /* @__PURE__ */ t(
       c,
       {
-        "aria-label": s,
+        "aria-label": n,
         sx: {
           minHeight: 0,
           minWidth: 0,
           p: 0
         },
-        children: /* @__PURE__ */ t(p, { name: e, sx: { color: "primary.main", fontSize: 16 } })
+        children: /* @__PURE__ */ t(
+          p,
+          {
+            name: e,
+            sx: { color: "primary.main", fontSize: 16 },
+            weight: h.Dark
+          }
+        )
       }
     )
   }
-);
-class u {
+), E = g;
+class I {
   // Cashflow is hard-coded to display 30 days starting from today
   dateRange = { start: r(), end: d(r(), 30) };
   isDirty = !1;
@@ -47,13 +54,13 @@ class u {
   }
   // Returns the number of days until the next income activity or 0 if there is no income activity
   get daysUntilNextIncome() {
-    return this.nextIncome ? Math.abs(h(r(), this.nextIncome.expectedDate)) : 0;
+    return this.nextIncome ? Math.abs(f(r(), this.nextIncome.expectedDate)) : 0;
   }
   // Returns the expenses (Activities) until the  next income activity or the end of the month
   // if there is no income activity
   get expensesTilNextIncome() {
     return this.upcomingExpenses.filter(
-      (e) => x(e.expectedDate, this.nextIncome?.expectedDate || f(/* @__PURE__ */ new Date()))
+      (e) => u(e.expectedDate, this.nextIncome?.expectedDate || x(/* @__PURE__ */ new Date()))
     );
   }
   setNextIncome = (e) => {
@@ -64,11 +71,11 @@ class u {
   };
   setSelectedCashAccounts = (e) => this.selectedCashAccounts = e;
 }
-class A {
+class _ {
   globalStore;
   uiStore;
   constructor(e) {
-    this.globalStore = e, this.uiStore = new u(), i(this);
+    this.globalStore = e, this.uiStore = new I(), i(this);
   }
   completeOnboarding = async () => {
     const e = {
@@ -79,6 +86,6 @@ class A {
   };
 }
 export {
-  A as C,
-  U as I
+  _ as C,
+  E as I
 };

package/dist/{Category-Ccoew_sA.mjs → Category-CevNQ03n.mjs}

@@ -293,9 +293,9 @@ const A = {
   UNKNOWN: "help"
 };
 export {
-  E as C,
+  T as C,
   e as P,
-  T as a,
+  E as a,
   A as b,
   a as c
 };