@mx-cartographer/experiences 7.0.22-alpha.san2 → 7.0.22-alpha.san3

package/dist/trends/index.es.js

@@ -3,16 +3,16 @@ import i from "react";
 import { observer as M } from "mobx-react-lite";
 import { Icon as se, Text as X, CategoryIcon as ye, P as Y, H3 as Ie, ChevronRightIcon as Pe } from "@mxenabled/mxui";
 import O from "@mui/material/Box";
-import _ from "@mui/material/Stack";
+import b from "@mui/material/Stack";
 import Ce from "@mui/material/Button";
 import { addSeconds as Ee } from "date-fns/addSeconds";
 import { differenceInCalendarMonths as fe } from "date-fns/differenceInCalendarMonths";
 import { a as Ke, g as $e, S as je, L as Le, u as Ye } from "../TrendsStore-WrHxzdbQ.mjs";
 import { T as eo } from "../TrendsStore-WrHxzdbQ.mjs";
-import { i as Ue, c as Xe, d as Ze, e as Qe, f as qe, h as Je, b as xe, g as ve, j as be } from "../SpendingData-D5vsfYKo.mjs";
+import { i as Ue, c as Xe, d as Ze, e as Je, f as Qe, h as qe, b as xe, g as ve, j as be } from "../SpendingData-D5vsfYKo.mjs";
 import et from "@mui/material/ToggleButton";
 import tt from "@mui/material/ToggleButtonGroup";
-import { u as k, k as F, e as H, a as P, f as re, c as ae, v as q, l as Me, p as nt, m as ot } from "../hooks-DkUqN6JE.mjs";
+import { u as k, k as F, e as N, a as P, f as re, c as ae, v as Q, l as Me, p as nt, m as ot } from "../hooks-DkUqN6JE.mjs";
 import { u as K } from "../useScreenSize-B6JyS_Lj.mjs";
 import { f as Z, D as B } from "../Dialog-CWW597AF.mjs";
 import { DataGridPro as st } from "@mui/x-data-grid-pro";
@@ -21,11 +21,11 @@ import { c as Ae } from "../Category-CevNQ03n.mjs";
 import { b as at } from "../Localization-2MODESHW.mjs";
 import { H as Se } from "../HeaderCell-DjuifqHJ.mjs";
 import { T as R, b as it } from "../ViewMoreMicroCard-DFAY0tA8.mjs";
-import { A as y, W as Re } from "../WidgetContainer-CdBs9WOZ.mjs";
-import { a as ke, T as He } from "../TransactionDetails-C-z3HGTT.mjs";
+import { A as _, W as Re } from "../WidgetContainer-CdBs9WOZ.mjs";
+import { a as ke, T as Ne } from "../TransactionDetails-C-z3HGTT.mjs";
 import { D as Te } from "../Drawer-kEE73B87.mjs";
-import { L as Q } from "../Loader-DUaFpDGv.mjs";
-import { useTheme as Ne } from "@mui/material/styles";
+import { L as J } from "../Loader-DUaFpDGv.mjs";
+import { useTheme as He } from "@mui/material/styles";
 import { L as _e } from "../LineChart-BWWmmJxV.mjs";
 import { M as ct } from "../MiniWidgetContainer-CTyjmE1h.mjs";
 import { subMonths as lt } from "date-fns";
@@ -84,10 +84,10 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   ] });
 }, Mt = (n) => {
   const o = n.row[n.field];
-  return /* @__PURE__ */ e(_, { alignItems: "flex-end", tabIndex: n.tabIndex, children: /* @__PURE__ */ e(rt, { amount: o, variant: "Small" }) });
+  return /* @__PURE__ */ e(b, { alignItems: "flex-end", tabIndex: n.tabIndex, children: /* @__PURE__ */ e(rt, { amount: o, variant: "Small" }) });
 }, At = ({ categoryGuid: n, topLevelCategoryGuid: o }) => {
   const { categories: t } = k(), s = t.default_categories[n]?.replace(/&/g, "&") ?? Ae[n];
-  return /* @__PURE__ */ C(_, { alignItems: "center", direction: "row", justifyContent: "center", children: [
+  return /* @__PURE__ */ C(b, { alignItems: "center", direction: "row", justifyContent: "center", children: [
     /* @__PURE__ */ e(
       O,
       {
@@ -98,7 +98,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     ),
     /* @__PURE__ */ e(X, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
   ] });
-}, Rt = (n) => /* @__PURE__ */ e(_, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
+}, Rt = (n) => /* @__PURE__ */ e(b, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
   At,
   {
     categoryGuid: n.row.category,
@@ -119,7 +119,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   height: a = "100dvh",
   sx: h = {}
 }) => {
-  const { onEvent: l } = H(), c = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [d, m] = i.useState([
+  const { onEvent: l } = N(), c = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [d, m] = i.useState([
     { field: c, sort: "desc" }
   ]), f = i.useMemo(() => kt(o.start, o.end), [o]), u = [
     {
@@ -148,21 +148,21 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         sortComparator: Ke
       })
     )
-  ], b = i.useMemo(() => {
+  ], y = i.useMemo(() => {
     const r = n.filter(
       (p) => !Ue(p) && !Xe(p)
     ), T = (t ? r.filter(
       (p) => p.category_guid === t || p.top_level_category_guid === t
     ) : r).reduce(
       (p, E) => {
-        const { category_guid: w, top_level_category_guid: I, month: A, total: D, year: N } = E, x = t ? w : I;
+        const { category_guid: w, top_level_category_guid: I, month: A, total: D, year: H } = E, x = t ? w : I;
         p[x] || (p[x] = {
           id: x,
           category: x,
           category_guid: w,
           top_level_category_guid: I
         });
-        const L = Z(new Date(N, A - 1), B.MONTH_SHORT);
+        const L = Z(new Date(H, A - 1), B.MONTH_SHORT);
         return p[x][L] || (p[x][L] = 0), p[x][L] = p[x][L] + Math.abs(D), p;
       },
       {}
@@ -178,29 +178,29 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       hideFooter: !0,
       initialState: { sorting: { sortModel: d } },
       onRowClick: (r) => {
-        s?.(r.row.category), l(y.TRENDS_CLICK_LIST_ITEM, {
+        s?.(r.row.category), l(_.TRENDS_CLICK_LIST_ITEM, {
           ...R,
           listItem: Ae[r.row.category]
         });
       },
       onSortModelChange: (r) => {
-        m(r), l(y.TRENDS_CLICK_TABLE_SORT, R);
+        m(r), l(_.TRENDS_CLICK_TABLE_SORT, R);
       },
-      rows: b,
+      rows: y,
       slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
       sortModel: d,
       sortingOrder: ["asc", "desc"]
     }
   ) });
-}, Ht = {
+}, Nt = {
   title: "Transaction List"
-}, Nt = ({
+}, Ht = ({
   categoryGuid: n,
   dateRange: o,
   isOpen: t,
   onClose: s
 }) => {
-  const { onEvent: a } = H(), { selectedAccountGuids: h } = P(), { common: l } = k(), { setFilter: c, sortedTransactions: d } = re(), [m, f] = i.useState(""), u = i.useMemo(
+  const { onEvent: a } = N(), { selectedAccountGuids: h } = P(), { common: l } = k(), { setFilter: c, sortedTransactions: d } = re(), [m, f] = i.useState(""), u = i.useMemo(
     () => d.find((r) => r.guid === m),
     [m, d]
   );
@@ -211,8 +211,8 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       custom: (r) => n === "" || n === r.category_guid || n === r.top_level_category_guid,
       showSplits: !!n
     });
-  }, [h, n, o]), i.useEffect(() => a(y.TRENDS_VIEW_TRANSACTIONS), []);
-  const b = () => {
+  }, [h, n, o]), i.useEffect(() => a(_.TRENDS_VIEW_TRANSACTIONS), []);
+  const y = () => {
     f(""), s();
   };
   return /* @__PURE__ */ C(
@@ -220,16 +220,16 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     {
       ariaLabelClose: l.close_aria,
       isOpen: t,
-      onClose: b,
-      title: Ht.title,
+      onClose: y,
+      title: Nt.title,
       children: [
         u && /* @__PURE__ */ e(ke, { transaction: u }),
-        !u && /* @__PURE__ */ e(He, { onClick: f })
+        !u && /* @__PURE__ */ e(Ne, { onClick: f })
       ]
     }
   );
-}, Wt = M(Nt), Ot = ({ onBackClick: n, sx: o }) => {
-  const { onEvent: t } = H(), { isDesktop: s, isTablet: a, isMobile: h } = K(), { visibleAccounts: l } = ae(), { loadMonthlyCategoryTotals: c, monthlyCategoryTotals: d, getCategoryName: m } = F(), { sortedTransactions: f } = re(), { selectedDateRange: u, setSelectedDateRange: b } = q(), { isCopyLoaded: r, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = P(), { trends: E } = k(), [w, I] = i.useState(!1), [A, D] = i.useState(!1), [N, x] = i.useState("Chart"), [L, $] = i.useState(""), [z, ie] = i.useState(window.innerHeight), ee = z - (h ? 315 : 345);
+}, Wt = M(Ht), Ot = ({ onBackClick: n, sx: o }) => {
+  const { onEvent: t } = N(), { isDesktop: s, isTablet: a, isMobile: h } = K(), { visibleAccounts: l } = ae(), { loadMonthlyCategoryTotals: c, monthlyCategoryTotals: d, getCategoryName: m } = F(), { sortedTransactions: f } = re(), { selectedDateRange: u, setSelectedDateRange: y } = Q(), { isCopyLoaded: r, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = P(), { trends: E } = k(), [w, I] = i.useState(!1), [A, D] = i.useState(!1), [H, x] = i.useState("Chart"), [L, $] = i.useState(""), [z, ie] = i.useState(window.innerHeight), ee = z - (h ? 315 : 345);
   i.useEffect(() => {
     const S = () => ie(window.innerHeight);
     return window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
@@ -254,30 +254,30 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       (G) => G.top_level_category_guid === L || G.category_guid === L
     ) : Ze(S);
     return {
-      stackedDatasets: W.filter(Qe),
-      unstackedDatasets: W.filter(qe)
+      stackedDatasets: W.filter(Je),
+      unstackedDatasets: W.filter(Qe)
     };
   }, [d, L, u]), ne = (S, W) => {
-    x(W ?? N), t(y.TRENDS_CLICK_TOGGLE_VIEW);
+    x(W ?? H), t(_.TRENDS_CLICK_TOGGLE_VIEW);
   }, oe = (S) => {
     const W = Ee(S?.[0], 1), G = S?.[1], ge = fe(G, W);
-    b({ start: W, end: G }), t(y.TRENDS_CLICK_TIME_WINDOW, {
+    y({ start: W, end: G }), t(_.TRENDS_CLICK_TIME_WINDOW, {
       time_period: ge + "M"
     });
   }, ce = () => {
-    t(y.TRENDS_CLICK_FILTER);
+    t(_.TRENDS_CLICK_FILTER);
   }, le = (S) => {
     $(S);
   }, de = (S) => {
-    $(S), t(y.TRENDS_CLICK_LEGEND, { category: m(S) });
+    $(S), t(_.TRENDS_CLICK_LEGEND, { category: m(S) });
   }, he = (S) => {
-    t(y.TRENDS_HOVER_LEGEND, { category: m(S) });
+    t(_.TRENDS_HOVER_LEGEND, { category: m(S) });
   }, ue = (S) => {
-    t(y.TRENDS_HOVER_AREA, { category: S });
+    t(_.TRENDS_HOVER_AREA, { category: S });
   }, me = (S) => {
-    t(y.TRENDS_HOVER_POINT, { category: S });
+    t(_.TRENDS_HOVER_POINT, { category: S });
   };
-  return !r || !g || !w ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ C(
+  return !r || !g || !w ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ C(
     Re,
     {
       accountOptions: l,
@@ -290,7 +290,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       title: E.title,
       children: [
         /* @__PURE__ */ C(
-          _,
+          b,
           {
             sx: {
               // eslint-disable-next-line no-nested-ternary
@@ -298,7 +298,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
             },
             children: [
               /* @__PURE__ */ C(
-                _,
+                b,
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
@@ -311,11 +311,11 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                         selectedDateRange: u
                       }
                     ),
-                    /* @__PURE__ */ e(Oe, { onTabChange: ne, selectedTab: N })
+                    /* @__PURE__ */ e(Oe, { onTabChange: ne, selectedTab: H })
                   ]
                 }
               ),
-              /* @__PURE__ */ C(_, { alignItems: "center", flexDirection: "row", width: "100%", children: [
+              /* @__PURE__ */ C(b, { alignItems: "center", flexDirection: "row", width: "100%", children: [
                 /* @__PURE__ */ e(O, { flexGrow: 1, children: L && /* @__PURE__ */ C(Ce, { onClick: () => $(""), sx: { p: 0, pr: 5 }, children: [
                   /* @__PURE__ */ e(se, { name: "arrow_back" }),
                   E.all_categories
@@ -323,7 +323,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                 /* @__PURE__ */ e(Ce, { onClick: () => D(!0), sx: { px: 5 }, children: `${E.view_transactions} (${f.length})` })
               ] }),
               /* @__PURE__ */ C(O, { children: [
-                N === "Chart" && /* @__PURE__ */ e(
+                H === "Chart" && /* @__PURE__ */ e(
                   je,
                   {
                     availableHeight: ee,
@@ -335,7 +335,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                     unstackedDatasets: te.unstackedDatasets
                   }
                 ),
-                N === "Table" && /* @__PURE__ */ e(
+                H === "Table" && /* @__PURE__ */ e(
                   Ge,
                   {
                     monthlyCategoryTotals: d,
@@ -361,7 +361,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     }
   );
 }, Un = M(Ot), Vt = () => {
-  const n = Ne(), { monthlyCategoryTotals: o } = F(), { trends: t } = k(), s = Je(o);
+  const n = He(), { monthlyCategoryTotals: o } = F(), { trends: t } = k(), s = qe(o);
   return /* @__PURE__ */ e(
     _e,
     {
@@ -384,7 +384,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     m(t);
   }, [t]), i.useEffect(() => {
     h && s(d).finally();
-  }, [h, d]), !c || !h ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
+  }, [h, d]), !c || !h ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ e(
     ct,
     {
       onPrimaryCtaClick: n,
@@ -392,7 +392,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       subTitle: l.sub_title,
       sx: o,
       title: l.mini_title,
-      children: a ? /* @__PURE__ */ e(Gt, {}) : /* @__PURE__ */ e(Q, {})
+      children: a ? /* @__PURE__ */ e(Gt, {}) : /* @__PURE__ */ e(J, {})
     }
   );
 }, Xn = M(Bt), zt = 70, we = ({
@@ -406,9 +406,9 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   const { availableWidth: l } = nt(), c = i.useRef(null), d = i.useRef(null), m = pt(Number(Math.abs(s)), {
     style: "percent",
     minimumIntegerDigits: 1
-  }), f = l === 288 && U(o, "0,0.00").length > 10 ? U(o, "0,0") : U(o, "0,0.00"), u = t === "spending" ? s > 0 : s >= 0, b = t === "spending" ? "error.main" : "success.main", r = t === "spending" ? "success.main" : "text.secondary", g = c?.current, T = d?.current, p = g && T ? g.scrollWidth > T.clientWidth - zt : !1;
+  }), f = l === 288 && U(o, "0,0.00").length > 10 ? U(o, "0,0") : U(o, "0,0.00"), u = t === "spending" ? s > 0 : s >= 0, y = t === "spending" ? "error.main" : "success.main", r = t === "spending" ? "success.main" : "text.secondary", g = c?.current, T = d?.current, p = g && T ? g.scrollWidth > T.clientWidth - zt : !1;
   return /* @__PURE__ */ C(
-    _,
+    b,
     {
       sx: {
         border: 1,
@@ -421,7 +421,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       },
       children: [
         /* @__PURE__ */ C(
-          _,
+          b,
           {
             sx: {
               alignItems: "center",
@@ -430,13 +430,13 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
             },
             children: [
               /* @__PURE__ */ e(Y, { color: "text.secondary", variant: "caption", children: n }),
-              h && /* @__PURE__ */ C(_, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
-                u ? /* @__PURE__ */ e(dt, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(ht, { size: 20, sx: { color: r } }),
+              h && /* @__PURE__ */ C(b, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+                u ? /* @__PURE__ */ e(dt, { size: 20, sx: { color: y } }) : /* @__PURE__ */ e(ht, { size: 20, sx: { color: r } }),
                 /* @__PURE__ */ e(
                   Y,
                   {
                     sx: {
-                      color: u ? b : r,
+                      color: u ? y : r,
                       fontWeight: 600
                     },
                     variant: "body2",
@@ -448,7 +448,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
           }
         ),
         /* @__PURE__ */ C(
-          _,
+          b,
           {
             ref: d,
             sx: {
@@ -468,7 +468,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
               h && l >= 450 && !p && /* @__PURE__ */ e(
                 Y,
                 {
-                  color: u ? b : r,
+                  color: u ? y : r,
                   variant: "caption",
                   children: a
                 }
@@ -481,15 +481,15 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   );
 }, Ft = M(() => {
   const { trends: n } = k();
-  return /* @__PURE__ */ C(_, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
+  return /* @__PURE__ */ C(b, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
     /* @__PURE__ */ e(ut, { size: 32 }),
-    /* @__PURE__ */ C(_, { children: [
+    /* @__PURE__ */ C(b, { children: [
       /* @__PURE__ */ e(Y, { fontWeight: 600, variant: "body1", children: n.zero_state_content_header }),
       /* @__PURE__ */ e(Y, { color: "text.secondary", variant: "subtitle2", children: n.zero_state_content_description })
     ] })
   ] });
 }), Zn = M(({ onCtaClick: n }) => {
-  const { visibleAccounts: o } = ae(), { onEvent: t } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: h } = F(), l = {
+  const { visibleAccounts: o } = ae(), { onEvent: t } = N(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: h } = F(), l = {
     start: lt(/* @__PURE__ */ new Date(), 1),
     end: /* @__PURE__ */ new Date()
   }, { trends: c } = k(), { selectedAccounts: d, setSelectedAccounts: m, isInitialized: f } = P();
@@ -497,23 +497,23 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     m(o);
   }, [o]), i.useEffect(() => {
     f && a(d, l.start).then(() => {
-      t(y.TRENDS_LOAD_WIDGET, {
+      t(_.TRENDS_LOAD_WIDGET, {
         state: o?.length ? "default" : "zeroState"
       });
     });
   }, [f, d]);
-  const { spendingData: u, incomeData: b } = i.useMemo(
+  const { spendingData: u, incomeData: y } = i.useMemo(
     () => ({
       spendingData: xe(s, l),
       incomeData: ve(s, l)
     }),
     [s, l]
-  ), [r, g] = u, [T, p] = b, E = be(g.y, r.y), w = be(p.y, T.y), I = f && !o?.length, A = () => {
+  ), [r, g] = u, [T, p] = y, E = be(g.y, r.y), w = be(p.y, T.y), I = f && !o?.length, A = () => {
     t(
-      I ? y.TRENDS_CLICK_GET_STARTED : y.TRENDS_CLICK_VIEW_MORE
+      I ? _.TRENDS_CLICK_GET_STARTED : _.TRENDS_CLICK_VIEW_MORE
     ), n();
   };
-  return !h || !f ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
+  return !h || !f ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ e(
     Ct,
     {
       className: "mx-trends-microwidget",
@@ -522,7 +522,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       subHeader: I ? void 0 : c.micro_subheader,
       title: c.title,
       children: I ? /* @__PURE__ */ e(Ft, {}) : /* @__PURE__ */ C(
-        _,
+        b,
         {
           sx: {
             alignItems: "stretch",
@@ -561,7 +561,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   ({ isExpanded: n, onClick: o }) => {
     const t = We();
     return /* @__PURE__ */ e(yt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(_t, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
-      _,
+      b,
       {
         sx: { color: t.palette.primary.main, flexDirection: "row", alignItems: "center" },
         children: [
@@ -589,8 +589,8 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     isLastItem: h = !1,
     showDivider: l = !0
   }) => {
-    const { trends: c } = k(), { onEvent: d } = H(), m = `${s.length} ${s.length === 1 ? c.transaction : c.transactions}`, f = () => {
-      a?.(), d(y.TRENDS_CLICK_LIST_ITEM, {
+    const { trends: c } = k(), { onEvent: d } = N(), m = `${s.length} ${s.length === 1 ? c.transaction : c.transactions}`, f = () => {
+      a?.(), d(_.TRENDS_CLICK_LIST_ITEM, {
         ...R,
         listItem: t
       });
@@ -612,18 +612,18 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   }
 ), Kt = M(
   ({ availableHeight: n = 0, onCategoryClick: o }) => {
-    const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: a } = q(), { isLargeDesktop: h, isDesktop: l } = K(), { trends: c } = k(), { onEvent: d } = H(), [m, f] = i.useState(!1), u = l || h;
+    const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: a } = Q(), { isLargeDesktop: h, isDesktop: l } = K(), { trends: c } = k(), { onEvent: d } = N(), [m, f] = i.useState(!1), u = l || h;
     i.useEffect(() => {
       const g = Math.floor(n / 64) - 1, T = s.length + t.length;
       g !== s.length && (a(u ? Math.max(g, 5) : 5), f(g >= T));
     }, [n]);
-    const b = () => {
-      f(!m), d(y.TRENDS_CLICK_VIEW_MORE, {
+    const y = () => {
+      f(!m), d(_.TRENDS_CLICK_VIEW_MORE, {
         ...R
       });
     }, r = s.length + (m ? t.length : 0);
-    return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ C(Tt, { children: [
-      /* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Ie, { children: c.categories }) }),
+    return /* @__PURE__ */ e(b, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ C(Tt, { children: [
+      /* @__PURE__ */ e(b, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Ie, { children: c.categories }) }),
       s.map((g, T) => /* @__PURE__ */ e(
         De,
         {
@@ -654,7 +654,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
           })
         }
       ),
-      t.length > 0 && /* @__PURE__ */ e(Pt, { isExpanded: m, onClick: b })
+      t.length > 0 && /* @__PURE__ */ e(Pt, { isExpanded: m, onClick: y })
     ] }) });
   }
 ), $t = [
@@ -692,12 +692,12 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   "WeeklyNoSpendDays",
   "WeeklySmallPurchasesSummary"
 ], jt = ({ onInsightCardClick: n }) => {
-  const o = Dt(), { onEvent: t } = H(), { isMobile: s, isDesktop: a, isLargeDesktop: h } = K(), { beatStore: l, endpoint: c, sessionToken: d } = Me(), { isInitialized: m } = P(), [f, u] = i.useState(!1), b = o.palette.mode === "dark", r = a || h, g = r || s ? 1 : 2;
+  const o = Dt(), { onEvent: t } = N(), { isMobile: s, isDesktop: a, isLargeDesktop: h } = K(), { beatStore: l, endpoint: c, sessionToken: d } = Me(), { isInitialized: m } = P(), [f, u] = i.useState(!1), y = o.palette.mode === "dark", r = a || h, g = r || s ? 1 : 2;
   i.useEffect(() => {
     m && l.loadBeats().finally(() => u(!0));
   }, [m]);
   const T = i.useMemo(() => f ? l.getFilteredBeats({ templates: $t }) : [], [f]), p = () => null, E = (D) => {
-    n?.(D), t(y.TRENDS_CLICK_INSIGHT, R);
+    n?.(D), t(_.TRENDS_CLICK_INSIGHT, R);
   }, w = r ? 200 : 170, I = r ? 170 : 124, A = T.length > 0 ? w : I;
   return /* @__PURE__ */ e(It, { sx: { height: A }, children: /* @__PURE__ */ e(
     it,
@@ -714,17 +714,17 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       showIcon: !0,
       showWithMargin: !1,
       token: d,
-      useDarkMode: b,
+      useDarkMode: y,
       userHasFullInsightFeedBeats: !1,
       variant: "outlined",
       visibleCardsCount: g
     }
   ) });
 }, Yt = M(jt), Ut = M(({ chartLabel: n, chartColor: o }) => {
-  const { onEvent: t } = H(), {
+  const { onEvent: t } = N(), {
     categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: a }
-  } = q();
-  return /* @__PURE__ */ e(_, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
+  } = Q();
+  return /* @__PURE__ */ e(b, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
     _e,
     {
       baseline: "min",
@@ -738,7 +738,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         stroke: o
       }),
       onItemClick: () => {
-        t(y.TRENDS_CLICK_CHART, R);
+        t(_.TRENDS_CLICK_CHART, R);
       },
       showArea: !0,
       showAverage: !0,
@@ -754,14 +754,14 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     }
   ) });
 }), Xt = M(({ onClose: n }) => {
-  const o = We(), { onEvent: t } = H(), { common: s, trends: a } = k(), { selectedCategoryData: h, selectedDateRangeMonthRange: l } = q(), { sortedTransactions: c } = re(), [d, m] = i.useState(null);
+  const o = We(), { onEvent: t } = N(), { common: s, trends: a } = k(), { selectedCategoryData: h, selectedDateRangeMonthRange: l } = Q(), { sortedTransactions: c } = re(), [d, m] = i.useState(null);
   if (!h)
     return null;
-  const { guid: f, name: u, is_income: b, totalAmount: r } = h, g = b ? a.category_income : a.category_spending, T = Lt(f, o), p = b ? a.income_label : a.spending_label, E = ` ${h.transactions.length === 1 ? a.transaction : a.transactions} (${h.transactions.length})`, w = i.useMemo(
+  const { guid: f, name: u, is_income: y, totalAmount: r } = h, g = y ? a.category_income : a.category_spending, T = Lt(f, o), p = y ? a.income_label : a.spending_label, E = ` ${h.transactions.length === 1 ? a.transaction : a.transactions} (${h.transactions.length})`, w = i.useMemo(
     () => c.find((D) => D.guid === d),
     [d, c]
   ), I = (D) => D.category_guid === f || D.top_level_category_guid === f, A = () => {
-    n?.(), t(y.TRENDS_CLICK_BACK, R);
+    n?.(), t(_.TRENDS_CLICK_BACK, R);
   };
   return /* @__PURE__ */ C(
     Te,
@@ -772,7 +772,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       shouldShowHeaderShadow: !0,
       title: g,
       children: [
-        /* @__PURE__ */ C(_, { sx: { alignItems: "center", height: "100%" }, children: [
+        /* @__PURE__ */ C(b, { sx: { alignItems: "center", height: "100%" }, children: [
           /* @__PURE__ */ C(Et, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
             /* @__PURE__ */ e(
               Le,
@@ -784,13 +784,13 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
               }
             ),
             /* @__PURE__ */ e(Ut, { chartColor: T, chartLabel: p }),
-            /* @__PURE__ */ C(_, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
+            /* @__PURE__ */ C(b, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
               /* @__PURE__ */ e(X, { bold: !0, variant: "body1", children: E }),
               /* @__PURE__ */ e(xt, { filter: I })
             ] })
           ] }),
           /* @__PURE__ */ e(
-            He,
+            Ne,
             {
               bgcolor: "transparent",
               filter: I,
@@ -815,7 +815,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
 }), Zt = (n, o) => {
   const t = ve(n, o), s = xe(n, o);
   return [t, s].filter((a) => a.length > 0);
-}, Qt = (n, o) => {
+}, Jt = (n, o) => {
   const [t, s] = n, a = t, h = s ?? t, l = [];
   if (a) {
     const c = a.reduce((d, m) => d + m.y, 0);
@@ -826,21 +826,21 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     l.push({ label: o.spending_label, amount: c });
   }
   return l;
-}, qt = ({
+}, Qt = ({
   availableHeight: n = 0,
   minHeight: o = 500,
   selectedDateRange: t,
   totals: s
 }) => {
-  const a = Ne(), { onEvent: h } = H(), { trends: l } = k(), { isSmallMobile: c, isMobile: d, isSmallTablet: m, isTablet: f } = K(), u = [a.palette.chart?.chart1, a.palette.chart?.chart2], b = Zt(s, t), r = Qt(b, l), [g, T] = i.useState(0), p = 458, E = 195, w = 56, I = d || c ? E : m || f ? p : g;
+  const a = He(), { onEvent: h } = N(), { trends: l } = k(), { isSmallMobile: c, isMobile: d, isSmallTablet: m, isTablet: f } = K(), u = [a.palette.chart?.chart1, a.palette.chart?.chart2], y = Zt(s, t), r = Jt(y, l), [g, T] = i.useState(0), p = 458, E = 195, w = 56, I = d || c ? E : m || f ? p : g;
   i.useEffect(() => {
     const D = Math.max(n - w, o);
     T(D);
   }, [n]);
   const A = () => {
-    h(y.TRENDS_CLICK_CHART, R);
+    h(_.TRENDS_CLICK_CHART, R);
   };
-  return console.log("test"), /* @__PURE__ */ C(pe, { children: [
+  return console.log("test", JSON.stringify(y)), /* @__PURE__ */ C(pe, { children: [
     /* @__PURE__ */ e(pe, { children: "test" }),
     /* @__PURE__ */ e(
       _e,
@@ -848,7 +848,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         baseline: "min",
         colors: u,
         curveType: "bump",
-        datasets: b,
+        datasets: y,
         height: I,
         labels: r,
         onItemClick: A,
@@ -860,18 +860,18 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         showXAxisTicks: !0,
         showYAxis: !0,
         showYAxisTicks: !0,
-        valueFormatterString: "0a"
+        valueFormatterString: "0.0a"
       }
     )
   ] });
-}, Jt = M(qt), en = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
-  const { onEvent: s } = H(), { config: a } = ot(), { isLargeDesktop: h, isDesktop: l, isMobile: c } = K(), { visibleAccounts: d } = ae(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: f, monthlyCategoryTotals: u } = F(), { setFilter: b } = re(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: T } = q(), {
+}, qt = M(Qt), en = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
+  const { onEvent: s } = N(), { config: a } = ot(), { isLargeDesktop: h, isDesktop: l, isMobile: c } = K(), { visibleAccounts: d } = ae(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: f, monthlyCategoryTotals: u } = F(), { setFilter: y } = re(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: T } = Q(), {
     isCopyLoaded: p,
     isInitialized: E,
     selectedAccounts: w,
     selectedAccountGuids: I,
     setSelectedAccounts: A
-  } = P(), { trends: D } = k(), N = Ye(), x = l || h, [L, $] = i.useState(!1), [z, ie] = i.useState("Chart"), [J, ee] = i.useState(""), [te, ne] = i.useState(!1), [oe, ce] = i.useState(window.innerHeight), le = oe - 208, de = oe - (N ? 494 : 266);
+  } = P(), { trends: D } = k(), H = Ye(), x = l || h, [L, $] = i.useState(!1), [z, ie] = i.useState("Chart"), [q, ee] = i.useState(""), [te, ne] = i.useState(!1), [oe, ce] = i.useState(window.innerHeight), le = oe - 208, de = oe - (H ? 494 : 266);
   i.useEffect(() => {
     const v = () => ce(window.innerHeight);
     return window.addEventListener("resize", v), () => window.removeEventListener("resize", v);
@@ -885,7 +885,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         r.end
       );
     }).finally(() => {
-      $(!0), s(y.TRENDS_LOAD_WIDGET, {
+      $(!0), s(_.TRENDS_LOAD_WIDGET, {
         ...R,
         time_period: `${fe(r.end, r.start)}M`
       });
@@ -896,7 +896,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         accounts: I,
         dateRange: { start: r.start, end: r.end }
       };
-      b({
+      y({
         ...v,
         custom: (V) => !!u.find(
           (j) => j.top_level_category_guid === V.top_level_category_guid || j.category_guid === V.category_guid
@@ -909,27 +909,27 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   }, ue = () => {
     g(null), ne(!1);
   }, me = (v, V) => {
-    ie(V ?? z), s(y.TRENDS_CLICK_TOGGLE_VIEW, {
+    ie(V ?? z), s(_.TRENDS_CLICK_TOGGLE_VIEW, {
       ...R,
       toggleView: V
     });
   }, S = (v) => {
     const V = Ee(v?.[0], 1), j = v?.[1], Fe = fe(j, V);
-    T({ start: V, end: j }), s(y.TRENDS_CLICK_TIME_WINDOW, {
+    T({ start: V, end: j }), s(_.TRENDS_CLICK_TIME_WINDOW, {
       ...R,
       time_period: Fe + "M"
     });
   }, W = (v) => {
-    s(y.TRENDS_CLICK_FILTER, {
+    s(_.TRENDS_CLICK_FILTER, {
       ...R,
       filterValue: v
     });
   }, G = (v) => {
     ee(v);
   }, ge = () => {
-    ee(""), s(y.TRENDS_CLICK_ALL_CATEGORIES, R);
+    ee(""), s(_.TRENDS_CLICK_ALL_CATEGORIES, R);
   };
-  if (!p || !L) return /* @__PURE__ */ e(Q, {});
+  if (!p || !L) return /* @__PURE__ */ e(J, {});
   const Be = a.show_connections_widget_in_master ? "buttons" : "no-buttons", ze = L && d.length === 0;
   return /* @__PURE__ */ C(
     Re,
@@ -944,14 +944,14 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       title: D.title,
       children: [
         /* @__PURE__ */ C(
-          _,
+          b,
           {
             sx: {
               px: c ? 0 : 48
             },
             children: [
               /* @__PURE__ */ C(
-                _,
+                b,
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
@@ -960,7 +960,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                     /* @__PURE__ */ e(
                       Ve,
                       {
-                        selectedCategoryGuid: J,
+                        selectedCategoryGuid: q,
                         selectedDateRange: r
                       }
                     ),
@@ -980,14 +980,14 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                   variant: Be
                 }
               ),
-              /* @__PURE__ */ e(_, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: J && /* @__PURE__ */ C(Ce, { onClick: ge, sx: { p: 0, pr: 5 }, children: [
+              /* @__PURE__ */ e(b, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: q && /* @__PURE__ */ C(Ce, { onClick: ge, sx: { p: 0, pr: 5 }, children: [
                 /* @__PURE__ */ e(se, { name: "arrow_back" }),
                 D.all_categories
               ] }) }) }),
-              /* @__PURE__ */ C(_, { flexDirection: x ? "row" : "column", gap: x ? 48 : 16, children: [
+              /* @__PURE__ */ C(b, { flexDirection: x ? "row" : "column", gap: x ? 48 : 16, children: [
                 z === "Chart" && /* @__PURE__ */ C(pe, { children: [
                   /* @__PURE__ */ e(O, { sx: { width: x ? "68%" : "100%" }, children: /* @__PURE__ */ e(
-                    Jt,
+                    qt,
                     {
                       availableHeight: le,
                       minHeight: 450,
@@ -995,8 +995,8 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                       totals: u
                     }
                   ) }),
-                  /* @__PURE__ */ C(_, { gap: 16, sx: { width: x ? "32%" : "100%" }, children: [
-                    N && /* @__PURE__ */ e(Yt, { onInsightCardClick: o }),
+                  /* @__PURE__ */ C(b, { gap: 16, sx: { width: x ? "32%" : "100%" }, children: [
+                    H && /* @__PURE__ */ e(Yt, { onInsightCardClick: o }),
                     /* @__PURE__ */ e(
                       Kt,
                       {
@@ -1012,7 +1012,7 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                     height: "unset",
                     monthlyCategoryTotals: u,
                     onClickRow: G,
-                    selectedCategory: J,
+                    selectedCategory: q,
                     selectedDateRange: r
                   }
                 ) })
@@ -1024,11 +1024,11 @@ const Oe = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       ]
     }
   );
-}, Qn = M(en);
+}, Jn = M(en);
 export {
   Un as TrendsFullWidget,
   Zn as TrendsMicroWidget,
   Xn as TrendsMiniWidget,
   eo as TrendsStore,
-  Qn as TrendsWidget
+  Jn as TrendsWidget
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "7.0.22-alpha.san2",
+  "version": "7.0.22-alpha.san3",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",