@mx-cartographer/experiences 7.12.17 → 7.13.0

package/dist/{StatusIndicator-BV3oFzxo.mjs → StatusIndicator-CIKUOoN_.mjs}

@@ -1,26 +1,26 @@
 import { jsxs as n, jsx as t } from "react/jsx-runtime";
 import u from "react";
 import { observer as D } from "mobx-react-lite";
-import { useVirtualizer as B } from "@tanstack/react-virtual";
-import b from "@mui/material/Box";
-import H from "@mui/material/Divider";
-import W from "@mui/material/List";
-import { G as X, h as E, u as R, g as K } from "./hooks-BxkfR-Ff.mjs";
-import { MerchantLogo as P, Icon as v, Text as l, P as Y, H2 as Z } from "@mxenabled/mxui";
-import F from "@mui/material/ListItemAvatar";
-import q from "@mui/material/ListItemText";
+import { useVirtualizer as H } from "@tanstack/react-virtual";
+import y from "@mui/material/Box";
+import W from "@mui/material/Divider";
+import B from "@mui/material/List";
+import { G as K, h as E, u as R, g as P } from "./hooks-BxkfR-Ff.mjs";
+import { MerchantLogo as Y, Icon as v, Text as l, P as Z, H2 as F } from "@mxenabled/mxui";
+import q from "@mui/material/ListItemAvatar";
+import J from "@mui/material/ListItemText";
 import s from "@mui/material/Stack";
-import { useTheme as J } from "@mui/material/styles";
-import { T as Q, L as ee, O as te } from "./Transaction-CqjlF6SO.mjs";
+import { useTheme as Q } from "@mui/material/styles";
+import { T as X, L as ee, O as te } from "./Transaction-CqjlF6SO.mjs";
 import { f as re } from "./NumberFormatting-QCaNwbjv.mjs";
 import { Receipt as oe } from "@mxenabled/mx-icons";
-import { fromUnixTime as y } from "date-fns/fromUnixTime";
+import { fromUnixTime as w } from "date-fns/fromUnixTime";
 import { isSameDay as z } from "date-fns/isSameDay";
 import { h as ne } from "./DateUtil-wcYTmDRD.mjs";
 import { L as ie } from "./Loader-D3rjKx72.mjs";
 import { A as se } from "./Analytics-BYItVAe-.mjs";
 const C = () => {
-  if (!u.useContext(X))
+  if (!u.useContext(K))
     throw new Error("useTransactionsUiStore() must be used within the GlobalDataContext");
   return E().uiStore;
 };
@@ -39,7 +39,7 @@ function le(e) {
   });
 }
 const de = ({ transaction: e, onClick: r }) => {
-  const c = J().palette.mode === "dark", { associatedBeats: m } = E(), { expandedSplits: h } = C(), { transactions: d } = R(), { showInsights: f } = C(), g = e.transaction_type === Q.CREDIT, _ = u.useMemo(() => m.find((x) => x.associated_transaction_guid === e.guid), [m, e]);
+  const c = Q().palette.mode === "dark", { associatedBeats: p } = E(), { expandedSplits: h } = C(), { transactions: d } = R(), { showInsights: f } = C(), g = e.transaction_type === X.CREDIT, _ = u.useMemo(() => p.find((x) => x.associated_transaction_guid === e.guid), [p, e]);
   return (
     //TODO: implement common/components/ListItemRow.tsx
     /* @__PURE__ */ n(
@@ -48,15 +48,15 @@ const de = ({ transaction: e, onClick: r }) => {
         clickEventName: te.ON_TRANSACTION_LIST_ITEM_CLICK,
         onClick: r ? () => r(e.guid) : void 0,
         children: [
-          /* @__PURE__ */ t(F, { children: e.parent_guid && h.includes(e.parent_guid) ? /* @__PURE__ */ t(u.Fragment, {}) : /* @__PURE__ */ t(
-            P,
+          /* @__PURE__ */ t(q, { children: e.parent_guid && h.includes(e.parent_guid) ? /* @__PURE__ */ t(u.Fragment, {}) : /* @__PURE__ */ t(
+            Y,
             {
               categoryGuid: e.top_level_category_guid || "",
               merchantGuid: e.merchant_guid || ""
             }
           ) }),
           /* @__PURE__ */ t(
-            q,
+            J,
             {
               disableTypography: !0,
               secondary: /* @__PURE__ */ n(s, { direction: "row", justifyContent: "space-between", children: [
@@ -72,7 +72,7 @@ const de = ({ transaction: e, onClick: r }) => {
                   ),
                   e.is_hidden && /* @__PURE__ */ t(v, { name: "visibility_off", size: 16 }),
                   e.has_been_split && /* @__PURE__ */ t(v, { name: "call_split", size: 16 }),
-                  /* @__PURE__ */ t(l, { variant: "XSmall", children: e.has_been_split ? d.split_transaction_category_label : e.category })
+                  /* @__PURE__ */ t(l, { variant: "caption", children: e.has_been_split ? d.split_transaction_category_label : e.category })
                 ] }),
                 _ && f && /* @__PURE__ */ t(
                   l,
@@ -82,13 +82,13 @@ const de = ({ transaction: e, onClick: r }) => {
                     onClick: (x) => {
                       x.stopPropagation(), x.preventDefault(), le(_.guid);
                     },
-                    variant: "XSmall",
+                    variant: "caption",
                     children: _.short_title
                   }
                 )
               ] }),
               children: /* @__PURE__ */ n(s, { direction: "row", justifyContent: "space-between", sx: { gap: 8 }, children: [
-                /* @__PURE__ */ n(l, { bold: !0, variant: "Body", children: [
+                /* @__PURE__ */ n(l, { bold: !0, variant: "body1", children: [
                   e.is_hidden && d.hide_trnx_cancel_hidden_note,
                   e.payee || e.description || e.feed_description
                 ] }),
@@ -98,7 +98,7 @@ const de = ({ transaction: e, onClick: r }) => {
                     bold: !0,
                     color: g ? "success.main" : "text.primary",
                     sx: { flexShrink: 0 },
-                    variant: "Body",
+                    variant: "body1",
                     children: [
                       g ? "+" : "",
                       re(e.amount, "0,0.00")
@@ -112,28 +112,28 @@ const de = ({ transaction: e, onClick: r }) => {
       }
     )
   );
-}, ue = D(de), me = ({
+}, ue = D(de), pe = ({
   bgcolor: e = "background.default",
   children: r
-}) => /* @__PURE__ */ t(b, { display: "inline-block", sx: { bgcolor: e, py: 6, width: "100%" }, children: /* @__PURE__ */ t(l, { bold: !0, sx: { pl: 24 }, variant: "XSmall", children: r }) }), pe = ({ showIcon: e = !0, showSubtitle: r = !0 }) => {
+}) => /* @__PURE__ */ t(y, { display: "inline-block", sx: { bgcolor: e, py: 6, width: "100%" }, children: /* @__PURE__ */ t(l, { bold: !0, sx: { pl: 24 }, variant: "caption", children: r }) }), me = ({ showIcon: e = !0, showSubtitle: r = !0 }) => {
   const { transactions: o } = R();
   return /* @__PURE__ */ n(s, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
     e && /* @__PURE__ */ t(oe, { color: "action", sx: { fontSize: 32 } }),
-    /* @__PURE__ */ t(l, { bold: !0, color: "text.secondary", variant: "Small", children: o.zero_state_no_transactions }),
-    r && /* @__PURE__ */ t(l, { color: "text.secondary", variant: "XSmall", children: o.zero_state_there_are_no_transactions })
+    /* @__PURE__ */ t(l, { bold: !0, color: "text.secondary", variant: "body2", children: o.zero_state_no_transactions }),
+    r && /* @__PURE__ */ t(l, { color: "text.secondary", variant: "caption", children: o.zero_state_there_are_no_transactions })
   ] });
-}, he = D(pe), k = (e, r) => {
-  const o = y(r[e].date), c = y(r[e - 1]?.date);
+}, he = D(me), k = (e, r) => {
+  const o = w(r[e].date), c = w(r[e - 1]?.date);
   return !z(o, c);
 }, fe = (e, r) => {
-  const o = y(r[e].date), c = y(r[e + 1]?.date);
+  const o = w(r[e].date), c = w(r[e + 1]?.date);
   return z(o, c);
 }, A = 65, N = 32, ge = ({
   bgcolor: e,
   filter: r,
   height: o = "calc(100dvh - 36px)",
   loader: c = /* @__PURE__ */ t(ie, { label: "Loading", size: 40 }),
-  onClick: m,
+  onClick: p,
   showInsights: h = !1,
   showLoader: d = !1,
   showHiddenTransactions: f = !1,
@@ -141,11 +141,11 @@ const de = ({ transaction: e, onClick: r }) => {
   width: _ = "100%",
   zeroState: x = /* @__PURE__ */ t(he, {})
 }) => {
-  const { isLoading: w, sortedTransactions: I } = E(), p = u.useMemo(() => {
+  const { isLoading: S, sortedTransactions: I } = E(), m = u.useMemo(() => {
     const i = r ? I.filter(r) : I, a = g ?? i;
-    return f ? a : a.filter((S) => !S.is_hidden);
-  }, [I, f]), { clearExpandedSplits: O, setShowInsights: G, toggleSplit: M } = C(), { onEvent: V } = K(), $ = (i) => {
-    const a = p.find((S) => S.guid === i);
+    return f ? a : a.filter((T) => !T.is_hidden);
+  }, [I, f]), { clearExpandedSplits: O, setShowInsights: G, toggleSplit: M } = C(), { onEvent: V } = P(), $ = (i) => {
+    const a = m.find((T) => T.guid === i);
     if (a?.has_been_split) {
       M(a.guid);
       return;
@@ -153,30 +153,30 @@ const de = ({ transaction: e, onClick: r }) => {
     V(se.ACCOUNT_DETAILS_CLICK_TRANSACTION, {
       account_guid: a?.account_guid,
       transaction_guid: i
-    }), m?.(i);
-  }, L = u.useRef(null), T = B({
-    count: p.length,
+    }), p?.(i);
+  }, L = u.useRef(null), b = H({
+    count: m.length,
     getScrollElement: () => L.current,
-    estimateSize: (i) => A + (k(i, p) ? N : 0),
+    estimateSize: (i) => A + (k(i, m) ? N : 0),
     overscan: 5
   });
-  return u.useEffect(() => T.measure(), [p]), u.useEffect(() => G(h), [h]), u.useEffect(() => () => O(), []), /* @__PURE__ */ t(W, { component: "div", role: "list", sx: { width: _ }, children: /* @__PURE__ */ t(b, { height: o, overflow: "auto", ref: L, role: "presentation", width: _, children: /* @__PURE__ */ n(
-    b,
+  return u.useEffect(() => b.measure(), [m]), u.useEffect(() => G(h), [h]), u.useEffect(() => () => O(), []), /* @__PURE__ */ t(B, { component: "div", role: "list", sx: { width: _ }, children: /* @__PURE__ */ t(y, { height: o, overflow: "auto", ref: L, role: "presentation", width: _, children: /* @__PURE__ */ n(
+    y,
     {
       height: (
         // set the height to auto when there are no transactions so the zero state isn't set to 0
-        T.getVirtualItems().length === 0 ? "auto" : T.getTotalSize()
+        b.getVirtualItems().length === 0 ? "auto" : b.getTotalSize()
       ),
       position: "relative",
       role: "presentation",
       width: "100%",
       children: [
-        (w || d) && c,
-        !w && !d && T.getVirtualItems().length === 0 && x,
-        !w && !d && T.getVirtualItems().length > 0 && T.getVirtualItems().map((i) => {
-          const a = p[i.index], S = k(i.index, p), U = fe(i.index, p), j = A + (S ? N : 0);
+        (S || d) && c,
+        !S && !d && b.getVirtualItems().length === 0 && x,
+        !S && !d && b.getVirtualItems().length > 0 && b.getVirtualItems().map((i) => {
+          const a = m[i.index], T = k(i.index, m), U = fe(i.index, m), j = A + (T ? N : 0);
           return /* @__PURE__ */ n(
-            b,
+            y,
             {
               role: "listitem",
               sx: {
@@ -187,15 +187,15 @@ const de = ({ transaction: e, onClick: r }) => {
                 bgcolor: "background.paper"
               },
               children: [
-                S && /* @__PURE__ */ t(me, { bgcolor: e, children: ne(a.date) }),
+                T && /* @__PURE__ */ t(pe, { bgcolor: e, children: ne(a.date) }),
                 /* @__PURE__ */ t(
                   ue,
                   {
-                    ...m && { onClick: $ },
+                    ...p && { onClick: $ },
                     transaction: a
                   }
                 ),
-                /* @__PURE__ */ t(H, { sx: { ml: U ? 68 : 0 } })
+                /* @__PURE__ */ t(W, { sx: { ml: U ? 68 : 0 } })
               ]
             },
             a.guid
@@ -209,17 +209,17 @@ const de = ({ transaction: e, onClick: r }) => {
   borderRadius: r = "2px",
   completeColor: o = "success.main",
   icon: c,
-  label: m,
+  label: p,
   leftLabel: h,
   percentComplete: d = 0,
   rightLabel: f,
   sx: g
 }) => /* @__PURE__ */ t(s, { sx: { p: 24, width: "100%", ...g }, children: /* @__PURE__ */ n(s, { className: "details-container", sx: { gap: 16 }, children: [
   /* @__PURE__ */ n(s, { sx: { alignItems: "center", flexDirection: "row", gap: 12 }, children: [
-    /* @__PURE__ */ t(b, { children: c }),
+    /* @__PURE__ */ t(y, { children: c }),
     /* @__PURE__ */ n(s, { children: [
-      /* @__PURE__ */ t(Y, { variant: "body2", children: m }),
-      typeof e == "string" ? /* @__PURE__ */ t(Z, { children: e }) : e
+      /* @__PURE__ */ t(Z, { variant: "body2", children: p }),
+      typeof e == "string" ? /* @__PURE__ */ t(F, { children: e }) : e
     ] })
   ] }),
   /* @__PURE__ */ n(s, { sx: { gap: 4 }, children: [
@@ -234,7 +234,7 @@ const de = ({ transaction: e, onClick: r }) => {
           width: "100%"
         },
         children: /* @__PURE__ */ t(
-          b,
+          y,
           {
             sx: {
               bgcolor: o,
@@ -253,7 +253,7 @@ const de = ({ transaction: e, onClick: r }) => {
   ] })
 ] }) }), Ue = _e;
 export {
-  me as S,
+  pe as S,
   $e as T,
   ue as a,
   Ue as b,