@mx-cartographer/experiences 7.0.65 → 7.0.66-alpha.mega1

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [7.0.66] - 11-03-2025
+
+- **FIXED** - Subcategories visibility on `Trends`
+
 ## [7.0.65] - 10-31-2025
 
 - **FIXED** - BUG Fixed - Networth Y axis label

package/dist/trends/index.es.js

@@ -1,31 +1,31 @@
-import { jsx as e, jsxs as C, Fragment as qe } from "react/jsx-runtime";
+import { jsx as e, jsxs as C, Fragment as Qe } from "react/jsx-runtime";
 import i from "react";
 import { observer as v } from "mobx-react-lite";
-import { Icon as ae, Text as Q, CategoryIcon as fe, P as X, H3 as xe, ChevronRightIcon as Je } from "@mxenabled/mxui";
+import { Icon as ae, Text as Q, CategoryIcon as fe, P as X, H3 as xe, ChevronRightIcon as qe } from "@mxenabled/mxui";
 import W from "@mui/material/Box";
 import _ from "@mui/material/Stack";
 import me from "@mui/material/Button";
 import { addSeconds as ve } from "date-fns/addSeconds";
 import { differenceInCalendarMonths as pe } from "date-fns/differenceInCalendarMonths";
-import { a as et, g as tt, S as nt, L as Me } from "../TrendsStore-ZZ8X36lJ.mjs";
+import { a as Je, g as et, S as tt, L as Me } from "../TrendsStore-ZZ8X36lJ.mjs";
 import { T as mo } from "../TrendsStore-ZZ8X36lJ.mjs";
-import { i as ot, c as st, d as rt, e as at, f as it, h as ct, b as Ae, g as Re, j as De } from "../SpendingData-D5vsfYKo.mjs";
-import lt from "@mui/material/ToggleButton";
-import dt from "@mui/material/ToggleButtonGroup";
-import { u as R, m as K, g as N, b as ee, h as ie, d as ce, v as te, f as Te, p as ht, a as ut } from "../hooks-CE2TKk4a.mjs";
+import { i as nt, c as ot, d as st, e as rt, f as at, h as it, b as Ae, g as Re, j as De } from "../SpendingData-D5vsfYKo.mjs";
+import ct from "@mui/material/ToggleButton";
+import lt from "@mui/material/ToggleButtonGroup";
+import { u as R, m as P, g as N, b as ee, h as ie, d as ce, v as te, f as Te, p as dt, a as ht } from "../hooks-CE2TKk4a.mjs";
 import { u as $ } from "../useScreenSize-B6JyS_Lj.mjs";
 import { f as q, D as z } from "../Dialog-CWW597AF.mjs";
-import { DataGridPro as gt } from "@mui/x-data-grid-pro";
-import { C as mt } from "../CurrencyText-kyC1aseI.mjs";
-import { c as ke } from "../Category-CevNQ03n.mjs";
-import { b as pt } from "../Localization-2MODESHW.mjs";
+import { DataGridPro as ut } from "@mui/x-data-grid-pro";
+import { C as gt } from "../CurrencyText-kyC1aseI.mjs";
+import { b as mt } from "../Localization-2MODESHW.mjs";
 import { H as Ie } from "../HeaderCell-DjuifqHJ.mjs";
-import { T as A, b as Ct } from "../ViewMoreMicroCard-BAz2NyEO.mjs";
-import { A as y, W as Ne } from "../WidgetContainer-B8MRJ5Y1.mjs";
-import { a as He, T as We } from "../TransactionDetails-B2Z5S7FM.mjs";
+import { T as A, b as pt } from "../ViewMoreMicroCard-BAz2NyEO.mjs";
+import { A as y, W as ke } from "../WidgetContainer-B8MRJ5Y1.mjs";
+import { c as Ct } from "../Category-CevNQ03n.mjs";
+import { a as Ne, T as He } from "../TransactionDetails-B2Z5S7FM.mjs";
 import { D as Ce } from "../Drawer-kEE73B87.mjs";
 import { L as J } from "../Loader-DUaFpDGv.mjs";
-import { useTheme as Oe } from "@mui/material/styles";
+import { useTheme as We } from "@mui/material/styles";
 import { L as ye } from "../LineChart-B35qvXik.mjs";
 import { M as ft } from "../MiniWidgetContainer-DTQdRK-3.mjs";
 import { subMonths as Tt } from "date-fns";
@@ -38,7 +38,7 @@ import xt from "@mui/material/ListItem";
 import vt from "@mui/material/ListItemButton";
 import Mt from "@mui/material/ListItemIcon";
 import At from "@mui/material/ListItemText";
-import Ve from "@mui/material/styles/useTheme";
+import Oe from "@mui/material/styles/useTheme";
 import Rt from "@mui/material/Divider";
 import { useTheme as kt, Stack as Nt } from "@mui/material";
 import Ht from "@mui/material/Paper";
@@ -47,17 +47,17 @@ import { E as Ot } from "../ExportCsvAction-CBJAfyAw.mjs";
 import { u as Vt } from "../useInsightsEnabled-DSnpkUq0.mjs";
 import { E as Gt } from "../EmptyState-DA_lfRBv.mjs";
 import { k as Bt } from "../ConnectDrawer-DJA_S-rX.mjs";
-const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
-  dt,
+const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
+  lt,
   {
     exclusive: !0,
     onChange: o,
     orientation: "horizontal",
     value: t,
-    children: ["Chart", "Table"].map((n) => /* @__PURE__ */ e(lt, { color: "primary", sx: { width: 56 }, value: n, children: n === "Chart" ? /* @__PURE__ */ e(ae, { name: "table_chart_view" }) : /* @__PURE__ */ e(ae, { name: "format_list_bulleted" }) }, n))
+    children: ["Chart", "Table"].map((n) => /* @__PURE__ */ e(ct, { color: "primary", sx: { width: 56 }, value: n, children: n === "Chart" ? /* @__PURE__ */ e(ae, { name: "table_chart_view" }) : /* @__PURE__ */ e(ae, { name: "format_list_bulleted" }) }, n))
   }
-), Be = ({ selectedDateRange: t, selectedCategoryGuid: o }) => {
-  const { trends: n } = R(), { isMobile: s, isDesktop: a } = $(), { getCategoryName: h } = K(), u = i.useMemo(() => {
+), Ge = ({ selectedDateRange: t, selectedCategoryGuid: o }) => {
+  const { trends: n } = R(), { isMobile: s, isDesktop: r } = $(), { getCategoryName: h } = P(), u = i.useMemo(() => {
     const d = q(
       t.start,
       s ? z.MONTH_SHORT_YEAR : z.MONTH_YEAR
@@ -78,27 +78,27 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
           overflow: "visible",
           textOverflow: "unset"
         },
-        variant: a ? "H3" : "Body",
+        variant: r ? "H3" : "Body",
         children: h(o) || n.sub_title
       }
     ),
-    /* @__PURE__ */ e(Q, { variant: a ? "Body" : "Small", children: u })
+    /* @__PURE__ */ e(Q, { variant: r ? "Body" : "Small", children: u })
   ] });
 }, zt = (t) => {
   const o = t.row[t.field];
-  return /* @__PURE__ */ e(_, { alignItems: "flex-end", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(mt, { amount: o, variant: "Small" }) });
+  return /* @__PURE__ */ e(_, { alignItems: "flex-end", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(gt, { amount: o, variant: "Small" }) });
 }, Pt = ({ categoryGuid: t, topLevelCategoryGuid: o }) => {
-  const { categories: n } = R(), s = n.default_categories[t]?.replace(/&/g, "&") ?? ke[t];
+  const { getCategoryName: n } = P(), { categories: s } = R(), r = s.default_categories[t]?.replace(/&/g, "&") ?? n(t);
   return /* @__PURE__ */ C(_, { alignItems: "center", direction: "row", justifyContent: "center", children: [
     /* @__PURE__ */ e(
       W,
       {
-        "aria-label": pt(n.category_icon_label_aria, s),
+        "aria-label": mt(s.category_icon_label_aria, r),
         role: "img",
         children: /* @__PURE__ */ e(fe, { categoryGuid: o })
       }
     ),
-    /* @__PURE__ */ e(Q, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
+    /* @__PURE__ */ e(Q, { sx: { ml: 12, pb: 6 }, variant: "Small", children: r })
   ] });
 }, Ft = (t) => /* @__PURE__ */ e(_, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
   Pt,
@@ -109,16 +109,16 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
 ) }), Kt = (t, o) => {
   const n = [], s = new Date(t);
   for (; s <= o; ) {
-    const a = q(s, z.MONTH);
-    n.push(a), s.setMonth(s.getMonth() + 1);
+    const r = q(s, z.MONTH);
+    n.push(r), s.setMonth(s.getMonth() + 1);
   }
   return n;
-}, ze = ({
+}, Be = ({
   monthlyCategoryTotals: t,
   selectedDateRange: o,
   selectedCategory: n,
   onClickRow: s,
-  height: a = "100dvh",
+  height: r = "100dvh",
   sx: h = {}
 }) => {
   const { onEvent: u } = N(), d = q(/* @__PURE__ */ new Date(), z.MONTH_SHORT), [l, m] = i.useState([
@@ -135,10 +135,10 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
       type: "string"
     },
     ...f.map(
-      (r) => ({
-        field: r,
+      (a) => ({
+        field: a,
         flex: 1,
-        headerName: r,
+        headerName: a,
         minWidth: 100,
         renderHeader: Ie,
         renderCell: zt,
@@ -147,15 +147,15 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
         sortable: !0,
         hideSortIcons: !1,
         type: "number",
-        sortComparator: et
+        sortComparator: Je
       })
     )
   ], b = i.useMemo(() => {
-    const r = t.filter(
-      (p) => !ot(p) && !st(p)
-    ), T = (n ? r.filter(
+    const a = t.filter(
+      (p) => !nt(p) && !ot(p)
+    ), T = (n ? a.filter(
       (p) => p.category_guid === n || p.top_level_category_guid === n
-    ) : r).reduce(
+    ) : a).reduce(
       (p, D) => {
         const { category_guid: w, top_level_category_guid: I, month: k, total: E, year: O } = D, M = n ? w : I;
         p[M] || (p[M] = {
@@ -171,22 +171,22 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
     );
     return Object.values(T);
   }, [t, n]);
-  return /* @__PURE__ */ e(W, { sx: { height: a, width: "100%", overflowX: "auto", boxShadow: "none", ...h }, children: /* @__PURE__ */ e(
-    gt,
+  return /* @__PURE__ */ e(W, { sx: { height: r, width: "100%", overflowX: "auto", boxShadow: "none", ...h }, children: /* @__PURE__ */ e(
+    ut,
     {
       columns: c,
       disableColumnFilter: !0,
       disableColumnMenu: !0,
       hideFooter: !0,
       initialState: { sorting: { sortModel: l } },
-      onRowClick: (r) => {
-        s?.(r.row.category), u(y.TRENDS_CLICK_LIST_ITEM, {
+      onRowClick: (a) => {
+        s?.(a.row.category), u(y.TRENDS_CLICK_LIST_ITEM, {
           ...A,
-          listItem: ke[r.row.category]
+          listItem: Ct[a.row.category]
         });
       },
-      onSortModelChange: (r) => {
-        m(r), u(y.TRENDS_CLICK_TABLE_SORT, A);
+      onSortModelChange: (a) => {
+        m(a), u(y.TRENDS_CLICK_TABLE_SORT, A);
       },
       rows: b,
       slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
@@ -202,18 +202,18 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   isOpen: n,
   onClose: s
 }) => {
-  const { onEvent: a } = N(), { selectedAccountGuids: h } = ee(), { common: u } = R(), { setFilter: d, sortedTransactions: l } = ie(), [m, f] = i.useState(""), c = i.useMemo(
-    () => l.find((r) => r.guid === m),
+  const { onEvent: r } = N(), { selectedAccountGuids: h } = ee(), { common: u } = R(), { setFilter: d, sortedTransactions: l } = ie(), [m, f] = i.useState(""), c = i.useMemo(
+    () => l.find((a) => a.guid === m),
     [m, l]
   );
   i.useEffect(() => {
     d({
       accounts: h,
       dateRange: o,
-      custom: (r) => t === "" || t === r.category_guid || t === r.top_level_category_guid,
+      custom: (a) => t === "" || t === a.category_guid || t === a.top_level_category_guid,
       showSplits: !!t
     });
-  }, [h, t, o]), i.useEffect(() => a(y.TRENDS_VIEW_TRANSACTIONS), []);
+  }, [h, t, o]), i.useEffect(() => r(y.TRENDS_VIEW_TRANSACTIONS), []);
   const b = () => {
     f(""), s();
   };
@@ -225,13 +225,13 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
       onClose: b,
       title: $t.title,
       children: [
-        c && /* @__PURE__ */ e(He, { transaction: c }),
-        !c && /* @__PURE__ */ e(We, { onClick: f })
+        c && /* @__PURE__ */ e(Ne, { transaction: c }),
+        !c && /* @__PURE__ */ e(He, { onClick: f })
       ]
     }
   );
 }, Yt = v(jt), Ut = ({ onBackClick: t, sx: o }) => {
-  const { onEvent: n } = N(), { isDesktop: s, isTablet: a, isMobile: h } = $(), { visibleAccounts: u } = ce(), { loadMonthlyCategoryTotals: d, monthlyCategoryTotals: l, getCategoryName: m } = K(), { sortedTransactions: f } = ie(), { selectedDateRange: c, setSelectedDateRange: b } = te(), { isCopyLoaded: r, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = ee(), { trends: D } = R(), [w, I] = i.useState(!1), [k, E] = i.useState(!1), [O, M] = i.useState("Chart"), [L, P] = i.useState(""), [G, le] = i.useState(window.innerHeight), j = G - (h ? 315 : 345);
+  const { onEvent: n } = N(), { isDesktop: s, isTablet: r, isMobile: h } = $(), { visibleAccounts: u } = ce(), { loadMonthlyCategoryTotals: d, monthlyCategoryTotals: l, getCategoryName: m } = P(), { sortedTransactions: f } = ie(), { selectedDateRange: c, setSelectedDateRange: b } = te(), { isCopyLoaded: a, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = ee(), { trends: D } = R(), [w, I] = i.useState(!1), [k, E] = i.useState(!1), [O, M] = i.useState("Chart"), [L, F] = i.useState(""), [G, le] = i.useState(window.innerHeight), j = G - (h ? 315 : 345);
   i.useEffect(() => {
     const S = () => le(window.innerHeight);
     return window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
@@ -248,18 +248,18 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   }, [g, T, c]);
   const ne = i.useMemo(() => {
     if (!w) return { stackedDatasets: [], unstackedDatasets: [] };
-    const S = tt(
+    const S = et(
       l,
       c.start,
       c.end
     ), H = L.length ? S.filter(
       (B) => B.top_level_category_guid === L || B.category_guid === L
-    ) : rt(S);
+    ) : st(S);
     return {
-      stackedDatasets: H.filter(at),
-      unstackedDatasets: H.filter(it)
+      stackedDatasets: H.filter(rt),
+      unstackedDatasets: H.filter(at)
     };
-  }, [l, L, c]), F = (S, H) => {
+  }, [l, L, c]), K = (S, H) => {
     M(H ?? O), n(y.TRENDS_CLICK_TOGGLE_VIEW);
   }, de = (S) => {
     const H = ve(S?.[0], 1), B = S?.[1], ge = pe(B, H);
@@ -269,9 +269,9 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   }, Y = () => {
     n(y.TRENDS_CLICK_FILTER);
   }, oe = (S) => {
-    P(S);
+    F(S);
   }, he = (S) => {
-    P(S), n(y.TRENDS_CLICK_LEGEND, { category: m(S) });
+    F(S), n(y.TRENDS_CLICK_LEGEND, { category: m(S) });
   }, se = (S) => {
     n(y.TRENDS_HOVER_LEGEND, { category: m(S) });
   }, re = (S) => {
@@ -279,8 +279,8 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   }, ue = (S) => {
     n(y.TRENDS_HOVER_POINT, { category: S });
   };
-  return !r || !g || !w ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ C(
-    Ne,
+  return !a || !g || !w ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ C(
+    ke,
     {
       accountOptions: u,
       calendarActions: { onRangeChanged: de },
@@ -296,7 +296,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
           {
             sx: {
               // eslint-disable-next-line no-nested-ternary
-              px: s ? 48 : a ? 24 : 12
+              px: s ? 48 : r ? 24 : 12
             },
             children: [
               /* @__PURE__ */ C(
@@ -307,18 +307,18 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
                   sx: { pb: h ? 12 : 24, pt: h ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
-                      Be,
+                      Ge,
                       {
                         selectedCategoryGuid: L,
                         selectedDateRange: c
                       }
                     ),
-                    /* @__PURE__ */ e(Ge, { onTabChange: F, selectedTab: O })
+                    /* @__PURE__ */ e(Ve, { onTabChange: K, selectedTab: O })
                   ]
                 }
               ),
               /* @__PURE__ */ C(_, { alignItems: "center", flexDirection: "row", width: "100%", children: [
-                /* @__PURE__ */ e(W, { flexGrow: 1, children: L && /* @__PURE__ */ C(me, { onClick: () => P(""), sx: { p: 0, pr: 5 }, children: [
+                /* @__PURE__ */ e(W, { flexGrow: 1, children: L && /* @__PURE__ */ C(me, { onClick: () => F(""), sx: { p: 0, pr: 5 }, children: [
                   /* @__PURE__ */ e(ae, { name: "arrow_back" }),
                   D.all_categories
                 ] }) }),
@@ -326,7 +326,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
               ] }),
               /* @__PURE__ */ C(W, { children: [
                 O === "Chart" && /* @__PURE__ */ e(
-                  nt,
+                  tt,
                   {
                     availableHeight: j,
                     onClickLegend: he,
@@ -338,7 +338,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
                   }
                 ),
                 O === "Table" && /* @__PURE__ */ e(
-                  ze,
+                  Be,
                   {
                     monthlyCategoryTotals: l,
                     onClickRow: oe,
@@ -363,7 +363,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
     }
   );
 }, io = v(Ut), Xt = () => {
-  const t = Oe(), { monthlyCategoryTotals: o } = K(), { trends: n } = R(), s = ct(o);
+  const t = We(), { monthlyCategoryTotals: o } = P(), { trends: n } = R(), s = it(o);
   return /* @__PURE__ */ e(
     ye,
     {
@@ -381,7 +381,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
     }
   );
 }, Zt = v(Xt), Qt = ({ onPrimaryCtaClick: t, sx: o }) => {
-  const { visibleAccounts: n } = ce(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = K(), { isInitialized: h } = Te(), { trends: u } = R(), { isCopyLoaded: d, selectedAccounts: l, setSelectedAccounts: m } = ee();
+  const { visibleAccounts: n } = ce(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: r } = P(), { isInitialized: h } = Te(), { trends: u } = R(), { isCopyLoaded: d, selectedAccounts: l, setSelectedAccounts: m } = ee();
   return i.useEffect(() => {
     m(n);
   }, [n]), i.useEffect(() => {
@@ -394,7 +394,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
       subTitle: u.sub_title,
       sx: o,
       title: u.mini_title,
-      children: a ? /* @__PURE__ */ e(Zt, {}) : /* @__PURE__ */ e(J, {})
+      children: r ? /* @__PURE__ */ e(Zt, {}) : /* @__PURE__ */ e(J, {})
     }
   );
 }, co = v(Qt), qt = 70, Ee = ({
@@ -402,13 +402,13 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   totalAmount: o,
   transactionType: n,
   percentage: s,
-  secondaryLabel: a,
+  secondaryLabel: r,
   shouldDisplayPercentage: h
 }) => {
-  const { availableWidth: u } = ht(), d = i.useRef(null), l = i.useRef(null), m = Dt(Number(Math.abs(s)), {
+  const { availableWidth: u } = dt(), d = i.useRef(null), l = i.useRef(null), m = Dt(Number(Math.abs(s)), {
     style: "percent",
     minimumIntegerDigits: 1
-  }), f = u === 288 && Z(o, "0,0.00").length > 10 ? Z(o, "0,0") : Z(o, "0,0.00"), c = n === "spending" ? s > 0 : s >= 0, b = n === "spending" ? "error.main" : "success.main", r = n === "spending" ? "success.main" : "text.secondary", g = d?.current, T = l?.current, p = g && T ? g.scrollWidth > T.clientWidth - qt : !1;
+  }), f = u === 288 && Z(o, "0,0.00").length > 10 ? Z(o, "0,0") : Z(o, "0,0.00"), c = n === "spending" ? s > 0 : s >= 0, b = n === "spending" ? "error.main" : "success.main", a = n === "spending" ? "success.main" : "text.secondary", g = d?.current, T = l?.current, p = g && T ? g.scrollWidth > T.clientWidth - qt : !1;
   return /* @__PURE__ */ C(
     _,
     {
@@ -433,12 +433,12 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
             children: [
               /* @__PURE__ */ e(X, { color: "text.secondary", variant: "caption", children: t }),
               h && /* @__PURE__ */ C(_, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
-                c ? /* @__PURE__ */ e(yt, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(_t, { size: 20, sx: { color: r } }),
+                c ? /* @__PURE__ */ e(yt, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(_t, { size: 20, sx: { color: a } }),
                 /* @__PURE__ */ e(
                   X,
                   {
                     sx: {
-                      color: c ? b : r,
+                      color: c ? b : a,
                       fontWeight: 600
                     },
                     variant: "body2",
@@ -470,9 +470,9 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
               h && u >= 450 && !p && /* @__PURE__ */ e(
                 X,
                 {
-                  color: c ? b : r,
+                  color: c ? b : a,
                   variant: "caption",
-                  children: a
+                  children: r
                 }
               )
             ]
@@ -491,14 +491,14 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
     ] })
   ] });
 }), lo = v(({ onCtaClick: t }) => {
-  const { visibleAccounts: o } = ce(), { onEvent: n } = N(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: h } = K(), u = {
+  const { visibleAccounts: o } = ce(), { onEvent: n } = N(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: r, monthlyTotalsLoaded: h } = P(), u = {
     start: Tt(/* @__PURE__ */ new Date(), 1),
     end: /* @__PURE__ */ new Date()
   }, { trends: d } = R(), { selectedAccounts: l, setSelectedAccounts: m, isInitialized: f } = ee();
   i.useEffect(() => {
     m(o);
   }, [o]), i.useEffect(() => {
-    f && a(l, u.start).then(() => {
+    f && r(l, u.start).then(() => {
       n(y.TRENDS_LOAD_WIDGET, {
         state: o?.length ? "default" : "zeroState"
       });
@@ -510,7 +510,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
       incomeData: Re(s, u)
     }),
     [s, u]
-  ), [r, g] = c, [T, p] = b, D = De(g.y, r.y), w = De(p.y, T.y), I = f && !o?.length, k = () => {
+  ), [a, g] = c, [T, p] = b, D = De(g.y, a.y), w = De(p.y, T.y), I = f && !o?.length, k = () => {
     n(
       I ? y.TRENDS_CLICK_GET_STARTED : y.TRENDS_CLICK_VIEW_MORE
     ), t();
@@ -537,7 +537,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
               {
                 percentage: D,
                 secondaryLabel: d.micro_secondary_label,
-                shouldDisplayPercentage: g.y !== 0 && r.y !== 0,
+                shouldDisplayPercentage: g.y !== 0 && a.y !== 0,
                 title: d.spending_label,
                 totalAmount: g.y,
                 transactionType: "spending"
@@ -561,7 +561,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   );
 }), en = v(
   ({ isExpanded: t, onClick: o }) => {
-    const n = Ve();
+    const n = Oe();
     return /* @__PURE__ */ e(xt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(vt, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
       _,
       {
@@ -587,12 +587,12 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
     guid: o,
     name: n,
     transactions: s,
-    onClick: a,
+    onClick: r,
     isLastItem: h = !1,
     showDivider: u = !0
   }) => {
     const { trends: d } = R(), { onEvent: l } = N(), m = `${s.length} ${s.length === 1 ? d.transaction : d.transactions}`, f = () => {
-      a?.(), l(y.TRENDS_CLICK_LIST_ITEM, {
+      r?.(), l(y.TRENDS_CLICK_LIST_ITEM, {
         ...A,
         listItem: n
       });
@@ -604,7 +604,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
           leftIcon: o ? /* @__PURE__ */ e(fe, { categoryGuid: o }) : void 0,
           onClick: f,
           rightContent: Z(Math.abs(t), "0,0.00"),
-          rightIcon: a ? /* @__PURE__ */ e(Je, {}) : void 0,
+          rightIcon: r ? /* @__PURE__ */ e(qe, {}) : void 0,
           subtitle: m,
           title: n
         }
@@ -614,23 +614,23 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   }
 ), tn = v(
   ({ availableHeight: t = 0, onCategoryClick: o }) => {
-    const { collapsedCategories: n, visibleCategories: s, setVisibleListLength: a } = te(), { isLargeDesktop: h, isDesktop: u } = $(), { trends: d } = R(), { onEvent: l } = N(), [m, f] = i.useState(!1), c = u || h;
+    const { collapsedCategories: n, visibleCategories: s, setVisibleListLength: r } = te(), { isLargeDesktop: h, isDesktop: u } = $(), { trends: d } = R(), { onEvent: l } = N(), [m, f] = i.useState(!1), c = u || h;
     i.useEffect(() => {
       const g = Math.floor(t / 64) - 1, T = s.length + n.length;
-      g !== s.length && (a(c ? Math.max(g, 5) : 5), f(g >= T));
+      g !== s.length && (r(c ? Math.max(g, 5) : 5), f(g >= T));
     }, [t]);
     const b = () => {
       f(!m), l(y.TRENDS_CLICK_VIEW_MORE, {
         ...A
       });
-    }, r = s.length + (m ? n.length : 0);
+    }, a = s.length + (m ? n.length : 0);
     return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ C(Lt, { children: [
       /* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(xe, { children: d.categories }) }),
       s.map((g, T) => /* @__PURE__ */ e(
         Le,
         {
           ...g,
-          isLastItem: T === r - 1,
+          isLastItem: T === a - 1,
           onClick: g.transactions.length > 0 ? () => o(g) : void 0,
           showDivider: !0
         },
@@ -647,7 +647,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
               Le,
               {
                 ...g,
-                isLastItem: p === r - 1,
+                isLastItem: p === a - 1,
                 onClick: g.transactions.length > 0 ? () => o(g) : void 0,
                 showDivider: !0
               },
@@ -660,17 +660,17 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
     ] }) });
   }
 ), nn = ({ beats: t, onInsightCardClick: o }) => {
-  const n = kt(), { onEvent: s } = N(), { isMobile: a, isDesktop: h, isLargeDesktop: u } = $(), { beatStore: d, endpoint: l, sessionToken: m } = Te(), f = n.palette.mode === "dark", c = h || u, b = c || a ? 1 : 2, r = () => null, g = (k) => {
+  const n = kt(), { onEvent: s } = N(), { isMobile: r, isDesktop: h, isLargeDesktop: u } = $(), { beatStore: d, endpoint: l, sessionToken: m } = Te(), f = n.palette.mode === "dark", c = h || u, b = c || r ? 1 : 2, a = () => null, g = (k) => {
     o?.(k), s(y.TRENDS_CLICK_INSIGHT, A);
   }, T = c ? 200 : 170, p = c ? 170 : 124, D = c ? 56 : 0, w = t.length > 0 ? T + D : p, I = c && t.length > 0 ? T : void 0;
   return /* @__PURE__ */ e(Nt, { sx: { height: w }, children: /* @__PURE__ */ e(
-    Ct,
+    pt,
     {
       areBeatsLoading: d.isLoading,
       beats: t,
       endpoint: l,
       heightOverrides: I,
-      logOutUser: r,
+      logOutUser: a,
       onCardClick: g,
       showBorder: !0,
       showCTAColocatedWithText: !1,
@@ -687,7 +687,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   ) });
 }, on = v(nn), sn = v(({ chartLabel: t, chartColor: o }) => {
   const { onEvent: n } = N(), {
-    categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: a }
+    categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: r }
   } = te();
   return /* @__PURE__ */ e(_, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
     ye,
@@ -695,7 +695,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
       baseline: "min",
       colors: [o],
       curveType: "bump",
-      customTooltipLabels: a,
+      customTooltipLabels: r,
       datasets: [s],
       height: 265,
       labels: [t],
@@ -719,10 +719,10 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
     }
   ) });
 }), rn = v(({ onClose: t }) => {
-  const o = Ve(), { onEvent: n } = N(), { common: s, trends: a } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: u } = te(), { sortedTransactions: d } = ie(), [l, m] = i.useState(null);
+  const o = Oe(), { onEvent: n } = N(), { common: s, trends: r } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: u } = te(), { sortedTransactions: d } = ie(), [l, m] = i.useState(null);
   if (!h)
     return null;
-  const { guid: f, name: c, is_income: b, totalAmount: r } = h, g = b ? a.category_income : a.category_spending, T = Wt(f, o), p = b ? a.income_label : a.spending_label, D = ` ${h.transactions.length === 1 ? a.transaction : a.transactions} (${h.transactions.length})`, w = i.useMemo(
+  const { guid: f, name: c, is_income: b, totalAmount: a } = h, g = b ? r.category_income : r.category_spending, T = Wt(f, o), p = b ? r.income_label : r.spending_label, D = ` ${h.transactions.length === 1 ? r.transaction : r.transactions} (${h.transactions.length})`, w = i.useMemo(
     () => d.find((E) => E.guid === l),
     [l, d]
   ), I = (E) => E.category_guid === f || E.top_level_category_guid === f, k = () => {
@@ -731,7 +731,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   return /* @__PURE__ */ C(
     Ce,
     {
-      ariaLabelClose: a.close_category_details,
+      ariaLabelClose: r.close_category_details,
       isOpen: !0,
       onClose: k,
       shouldShowHeaderShadow: !0,
@@ -743,7 +743,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
               Me,
               {
                 leftIcon: /* @__PURE__ */ e(fe, { categoryGuid: f }),
-                rightContent: Z(Math.abs(r), "0,0.00"),
+                rightContent: Z(Math.abs(a), "0,0.00"),
                 subtitle: u,
                 title: c
               }
@@ -755,7 +755,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
             ] })
           ] }),
           /* @__PURE__ */ e(
-            We,
+            He,
             {
               bgcolor: "transparent",
               filter: I,
@@ -770,8 +770,8 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
             ariaLabelClose: s.close_aria,
             isOpen: !!w,
             onClose: () => m(""),
-            title: a.transaction,
-            children: w && /* @__PURE__ */ e(He, { transaction: w })
+            title: r.transaction,
+            children: w && /* @__PURE__ */ e(Ne, { transaction: w })
           }
         )
       ]
@@ -779,11 +779,11 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   );
 }), an = (t, o) => {
   const n = Re(t, o), s = Ae(t, o);
-  return [n, s].filter((a) => a.length > 0);
+  return [n, s].filter((r) => r.length > 0);
 }, cn = (t, o) => {
-  const [n, s] = t, a = n, h = s ?? n, u = [];
-  if (a) {
-    const d = a.reduce((l, m) => l + m.y, 0);
+  const [n, s] = t, r = n, h = s ?? n, u = [];
+  if (r) {
+    const d = r.reduce((l, m) => l + m.y, 0);
     u.push({ label: o.income_label, amount: d });
   }
   if (h) {
@@ -797,7 +797,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   selectedDateRange: n,
   totals: s
 }) => {
-  const a = Oe(), { onEvent: h } = N(), { trends: u } = R(), { isSmallMobile: d, isMobile: l, isSmallTablet: m, isTablet: f } = $(), c = [a.palette.chart?.chart1, a.palette.chart?.chart2], b = an(s, n), r = cn(b, u), [g, T] = i.useState(0), p = 458, D = 195, w = 56, I = l || d ? D : m || f ? p : g;
+  const r = We(), { onEvent: h } = N(), { trends: u } = R(), { isSmallMobile: d, isMobile: l, isSmallTablet: m, isTablet: f } = $(), c = [r.palette.chart?.chart1, r.palette.chart?.chart2], b = an(s, n), a = cn(b, u), [g, T] = i.useState(0), p = 458, D = 195, w = 56, I = l || d ? D : m || f ? p : g;
   return i.useEffect(() => {
     const E = Math.max(t - w, o);
     T(E);
@@ -809,7 +809,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
       curveType: "bump",
       datasets: b,
       height: I,
-      labels: r,
+      labels: a,
       onItemClick: () => {
         h(y.TRENDS_CLICK_CHART, A);
       },
@@ -859,13 +859,13 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   "WeeklyNoSpendDays",
   "WeeklySmallPurchasesSummary"
 ], un = ({ onBackClick: t, onInsightCardClick: o, sx: n }) => {
-  const { onEvent: s } = N(), { config: a } = ut(), { isLargeDesktop: h, isDesktop: u, isMobile: d } = $(), { visibleAccounts: l } = ce(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: f, monthlyCategoryTotals: c } = K(), { setFilter: b } = ie(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: T } = te(), {
+  const { onEvent: s } = N(), { config: r } = ht(), { isLargeDesktop: h, isDesktop: u, isMobile: d } = $(), { visibleAccounts: l } = ce(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: f, monthlyCategoryTotals: c } = P(), { setFilter: b } = ie(), { selectedDateRange: a, setSelectedCategoryData: g, setSelectedDateRange: T } = te(), {
     isCopyLoaded: p,
     isInitialized: D,
     selectedAccounts: w,
     selectedAccountGuids: I,
     setSelectedAccounts: k
-  } = ee(), { trends: E, connect: O } = R(), { beatStore: M } = Te(), P = Vt() && a.show_insights_widget_in_master, G = u || h, [le, _e] = i.useState(!1), [j, ne] = i.useState(!1), [F, de] = i.useState("Chart"), [Y, oe] = i.useState(""), [he, se] = i.useState(!1), [re, ue] = i.useState(window.innerHeight), S = G ? 56 : 0, H = re - 208, B = re - (P ? 550 + S : 266), [ge, be] = i.useState(!1), Pe = a.show_connections_widget_in_master ? "buttons" : "no-buttons", Se = i.useMemo(
+  } = ee(), { trends: E, connect: O } = R(), { beatStore: M } = Te(), F = Vt() && r.show_insights_widget_in_master, G = u || h, [le, _e] = i.useState(!1), [j, ne] = i.useState(!1), [K, de] = i.useState("Chart"), [Y, oe] = i.useState(""), [he, se] = i.useState(!1), [re, ue] = i.useState(window.innerHeight), S = G ? 56 : 0, H = re - 208, B = re - (F ? 550 + S : 266), [ge, be] = i.useState(!1), ze = r.show_connections_widget_in_master ? "buttons" : "no-buttons", Se = i.useMemo(
     () => l && l.length === 0 || c.length === 0,
     [l, c]
   );
@@ -879,23 +879,23 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   }, []), i.useEffect(() => {
     k(l);
   }, [l]), i.useEffect(() => {
-    D && m(w, r.start, r.end).then(() => {
+    D && m(w, a.start, a.end).then(() => {
       f(
         w,
-        r.start,
-        r.end
+        a.start,
+        a.end
       );
     }).finally(() => {
       _e(!0), s(y.TRENDS_LOAD_WIDGET, {
         ...A,
-        time_period: `${pe(r.end, r.start)}M`
+        time_period: `${pe(a.end, a.start)}M`
       });
     });
-  }, [D, w, r]), i.useEffect(() => {
+  }, [D, w, a]), i.useEffect(() => {
     if (c.length !== 0) {
       const x = {
         accounts: I,
-        dateRange: { start: r.start, end: r.end }
+        dateRange: { start: a.start, end: a.end }
       };
       b({
         ...x,
@@ -905,41 +905,41 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
       });
     }
   }, [c]);
-  const Fe = (x) => {
+  const Pe = (x) => {
     g(x), se(!0);
-  }, Ke = () => {
+  }, Fe = () => {
     g(null), se(!1);
-  }, $e = () => {
+  }, Ke = () => {
     be(!0), s(y.TRENDS_CLICK_CONNECT_ACCOUNTS);
-  }, je = (x, V) => {
-    de(V ?? F), s(y.TRENDS_CLICK_TOGGLE_VIEW, {
+  }, $e = (x, V) => {
+    de(V ?? K), s(y.TRENDS_CLICK_TOGGLE_VIEW, {
       ...A,
       toggleView: V
     });
-  }, Ye = (x) => {
-    const V = ve(x?.[0], 1), U = x?.[1], Qe = pe(U, V);
+  }, je = (x) => {
+    const V = ve(x?.[0], 1), U = x?.[1], Ze = pe(U, V);
     T({ start: V, end: U }), s(y.TRENDS_CLICK_TIME_WINDOW, {
       ...A,
-      time_period: Qe + "M"
+      time_period: Ze + "M"
     });
-  }, Ue = (x) => {
+  }, Ye = (x) => {
     s(y.TRENDS_CLICK_FILTER, {
       ...A,
       filterValue: x
     });
-  }, Xe = (x) => {
+  }, Ue = (x) => {
     oe(x);
-  }, Ze = () => {
+  }, Xe = () => {
     oe(""), s(y.TRENDS_CLICK_ALL_CATEGORIES, A);
   };
   return !p || !le ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ C(
-    Ne,
+    ke,
     {
       accountOptions: l,
-      calendarActions: { onRangeChanged: Ye },
-      dateRange: r,
+      calendarActions: { onRangeChanged: je },
+      dateRange: a,
       dateRangeVariant: d ? "timeframetabs" : "timeframebuttons",
-      onAccountsFilterClick: Ue,
+      onAccountsFilterClick: Ye,
       onBackClick: t,
       sx: n,
       title: E.title,
@@ -949,11 +949,11 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
           {
             header: E.zero_state_content_header,
             icon: "",
-            onClick: $e,
+            onClick: Ke,
             primaryButton: E.empty_state_primary,
             subText: E.empty_state_sub_text,
             sx: { height: H },
-            variant: Pe
+            variant: ze
           }
         ),
         !Se && /* @__PURE__ */ C(
@@ -971,33 +971,33 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
                   sx: { pb: d ? 12 : 24, pt: d ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
-                      Be,
+                      Ge,
                       {
                         selectedCategoryGuid: Y,
-                        selectedDateRange: r
+                        selectedDateRange: a
                       }
                     ),
-                    /* @__PURE__ */ e(Ge, { onTabChange: je, selectedTab: F })
+                    /* @__PURE__ */ e(Ve, { onTabChange: $e, selectedTab: K })
                   ]
                 }
               ),
-              /* @__PURE__ */ e(_, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(W, { flexGrow: 1, children: Y && /* @__PURE__ */ C(me, { onClick: Ze, sx: { p: 0, pr: 5 }, children: [
+              /* @__PURE__ */ e(_, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(W, { flexGrow: 1, children: Y && /* @__PURE__ */ C(me, { onClick: Xe, sx: { p: 0, pr: 5 }, children: [
                 /* @__PURE__ */ e(ae, { name: "arrow_back" }),
                 E.all_categories
               ] }) }) }),
               /* @__PURE__ */ C(_, { flexDirection: G ? "row" : "column", gap: G ? 48 : 16, children: [
-                F === "Chart" && /* @__PURE__ */ C(qe, { children: [
+                K === "Chart" && /* @__PURE__ */ C(Qe, { children: [
                   /* @__PURE__ */ e(W, { sx: { width: G ? "68%" : "100%" }, children: /* @__PURE__ */ e(
                     dn,
                     {
                       availableHeight: H,
                       minHeight: 450,
-                      selectedDateRange: r,
+                      selectedDateRange: a,
                       totals: c
                     }
                   ) }),
                   /* @__PURE__ */ C(_, { gap: 16, sx: { width: G ? "32%" : "100%" }, children: [
-                    P && j && we.length > 0 && /* @__PURE__ */ e(
+                    F && j && we.length > 0 && /* @__PURE__ */ e(
                       on,
                       {
                         beats: we,
@@ -1008,23 +1008,23 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
                       tn,
                       {
                         availableHeight: B,
-                        onCategoryClick: Fe
+                        onCategoryClick: Pe
                       }
                     )
                   ] })
                 ] }),
-                F === "Table" && /* @__PURE__ */ e(W, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
-                  ze,
+                K === "Table" && /* @__PURE__ */ e(W, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
+                  Be,
                   {
                     height: "unset",
                     monthlyCategoryTotals: c,
-                    onClickRow: Xe,
+                    onClickRow: Ue,
                     selectedCategory: Y,
-                    selectedDateRange: r
+                    selectedDateRange: a
                   }
                 ) })
               ] }),
-              he && /* @__PURE__ */ e(rn, { onClose: Ke })
+              he && /* @__PURE__ */ e(rn, { onClose: Fe })
             ]
           }
         ),

package/package.json

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