@mx-cartographer/experiences 7.0.23-alpha.al14 → 7.0.23-alpha.al2

package/dist/trends/index.es.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as f, Fragment as Pe } from "react/jsx-runtime";
 import r from "react";
 import { observer as M } from "mobx-react-lite";
-import { Icon as re, Text as X, CategoryIcon as Te, P as Y, H3 as De, ChevronRightIcon as Ke } from "@mxenabled/mxui";
+import { Icon as ae, Text as X, CategoryIcon as Te, P as Y, H3 as De, ChevronRightIcon as Ke } from "@mxenabled/mxui";
 import O from "@mui/material/Box";
 import _ from "@mui/material/Stack";
 import pe from "@mui/material/Button";
@@ -12,7 +12,7 @@ import { T as to } from "../TrendsStore-WrHxzdbQ.mjs";
 import { i as Xe, c as Ze, d as Qe, e as qe, f as Je, h as et, b as Le, g as xe, j as _e } from "../SpendingData-D5vsfYKo.mjs";
 import tt from "@mui/material/ToggleButton";
 import nt from "@mui/material/ToggleButtonGroup";
-import { u as R, k as F, e as H, a as P, f as ie, c as ce, v as q, l as ve, p as ot, m as st } from "../hooks-DkUqN6JE.mjs";
+import { u as R, k as F, e as H, a as P, f as re, c as ie, v as q, l as ve, p as ot, m as st } 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 at } from "@mui/x-data-grid-pro";
@@ -29,7 +29,7 @@ import { useTheme as He } from "@mui/material/styles";
 import { L as ye } from "../LineChart-BWWmmJxV.mjs";
 import { M as lt } from "../MiniWidgetContainer-CTyjmE1h.mjs";
 import { subMonths as dt } from "date-fns";
-import { TrendingUp as ht, TrendingDown as ut, MultilineChart as mt, ExpandLess as gt, ExpandMore as pt } from "@mxenabled/mx-icons";
+import { TrendingUp as ht, TrendingDown as ut, MultilineChart as gt, ExpandLess as mt, ExpandMore as pt } from "@mxenabled/mx-icons";
 import { a as Ct, f as U } from "../NumberFormatting-CtWHhyBX.mjs";
 import { M as ft } from "../MicroWidgetContainer-Dxz8uBN9.mjs";
 import Tt from "@mui/material/Collapse";
@@ -52,7 +52,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     onChange: o,
     orientation: "horizontal",
     value: n,
-    children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(tt, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(re, { name: "table_chart_view" }) : /* @__PURE__ */ e(re, { name: "format_list_bulleted" }) }, t))
+    children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(tt, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(ae, { name: "table_chart_view" }) : /* @__PURE__ */ e(ae, { name: "format_list_bulleted" }) }, t))
   }
 ), Oe = ({ selectedDateRange: n, selectedCategoryGuid: o }) => {
   const { trends: t } = R(), { isMobile: s, isDesktop: i } = K(), { getCategoryName: h } = F(), d = r.useMemo(() => {
@@ -119,7 +119,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   height: i = "100dvh",
   sx: h = {}
 }) => {
-  const { onEvent: d } = H(), l = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [c, m] = r.useState([
+  const { onEvent: d } = H(), l = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [c, g] = r.useState([
     { field: l, sort: "desc" }
   ]), C = r.useMemo(() => Ht(o.start, o.end), [o]), u = [
     {
@@ -154,16 +154,16 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     ), T = (t ? a.filter(
       (p) => p.category_guid === t || p.top_level_category_guid === t
     ) : a).reduce(
-      (p, L) => {
-        const { category_guid: w, top_level_category_guid: E, month: k, total: D, year: N } = L, x = t ? w : E;
-        p[x] || (p[x] = {
-          id: x,
-          category: x,
+      (p, E) => {
+        const { category_guid: w, top_level_category_guid: I, month: k, total: D, year: N } = E, L = t ? w : I;
+        p[L] || (p[L] = {
+          id: L,
+          category: L,
           category_guid: w,
-          top_level_category_guid: E
+          top_level_category_guid: I
         });
-        const I = Z(new Date(N, k - 1), B.MONTH_SHORT);
-        return p[x][I] || (p[x][I] = 0), p[x][I] = p[x][I] + Math.abs(D), p;
+        const x = Z(new Date(N, k - 1), B.MONTH_SHORT);
+        return p[L][x] || (p[L][x] = 0), p[L][x] = p[L][x] + Math.abs(D), p;
       },
       {}
     );
@@ -184,7 +184,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         });
       },
       onSortModelChange: (a) => {
-        m(a), d(y.TRENDS_CLICK_TABLE_SORT, A);
+        g(a), d(y.TRENDS_CLICK_TABLE_SORT, A);
       },
       rows: b,
       slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
@@ -200,9 +200,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   isOpen: t,
   onClose: s
 }) => {
-  const { onEvent: i } = H(), { selectedAccountGuids: h } = P(), { common: d } = R(), { setFilter: l, sortedTransactions: c } = ie(), [m, C] = r.useState(""), u = r.useMemo(
-    () => c.find((a) => a.guid === m),
-    [m, c]
+  const { onEvent: i } = H(), { selectedAccountGuids: h } = P(), { common: d } = R(), { setFilter: l, sortedTransactions: c } = re(), [g, C] = r.useState(""), u = r.useMemo(
+    () => c.find((a) => a.guid === g),
+    [g, c]
   );
   r.useEffect(() => {
     l({
@@ -229,65 +229,65 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     }
   );
 }, Ot = M(Wt), Vt = ({ onBackClick: n, sx: o }) => {
-  const { onEvent: t } = H(), { isDesktop: s, isTablet: i, isMobile: h } = K(), { visibleAccounts: d } = ce(), { loadMonthlyCategoryTotals: l, monthlyCategoryTotals: c, getCategoryName: m } = F(), { sortedTransactions: C } = ie(), { selectedDateRange: u, setSelectedDateRange: b } = q(), { isCopyLoaded: a, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = P(), { trends: L } = R(), [w, E] = r.useState(!1), [k, D] = r.useState(!1), [N, x] = r.useState("Chart"), [I, $] = r.useState(""), [z, le] = r.useState(window.innerHeight), ee = z - (h ? 315 : 345);
+  const { onEvent: t } = H(), { isDesktop: s, isTablet: i, isMobile: h } = K(), { visibleAccounts: d } = ie(), { loadMonthlyCategoryTotals: l, monthlyCategoryTotals: c, getCategoryName: g } = F(), { sortedTransactions: C } = re(), { selectedDateRange: u, setSelectedDateRange: b } = q(), { isCopyLoaded: a, isInitialized: m, selectedAccounts: T, setSelectedAccounts: p } = P(), { trends: E } = R(), [w, I] = r.useState(!1), [k, D] = r.useState(!1), [N, L] = r.useState("Chart"), [x, $] = r.useState(""), [z, ce] = r.useState(window.innerHeight), ee = z - (h ? 315 : 345);
   r.useEffect(() => {
-    const S = () => le(window.innerHeight);
+    const S = () => ce(window.innerHeight);
     return window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
   }, []), r.useEffect(() => {
     p(d);
   }, [d]), r.useEffect(() => {
-    g && l(
+    m && l(
       T,
       u.start,
       u.end
     ).finally(() => {
-      E(!0);
+      I(!0);
     });
-  }, [g, T, u]);
+  }, [m, T, u]);
   const te = r.useMemo(() => {
     if (!w) return { stackedDatasets: [], unstackedDatasets: [] };
     const S = je(
       c,
       u.start,
       u.end
-    ), W = I.length ? S.filter(
-      (G) => G.top_level_category_guid === I || G.category_guid === I
+    ), W = x.length ? S.filter(
+      (G) => G.top_level_category_guid === x || G.category_guid === x
     ) : Qe(S);
     return {
       stackedDatasets: W.filter(qe),
       unstackedDatasets: W.filter(Je)
     };
-  }, [c, I, u]), ne = (S, W) => {
-    x(W ?? N), t(y.TRENDS_CLICK_TOGGLE_VIEW);
+  }, [c, x, u]), ne = (S, W) => {
+    L(W ?? N), t(y.TRENDS_CLICK_TOGGLE_VIEW);
   }, oe = (S) => {
-    const W = Ie(S?.[0], 1), G = S?.[1], ge = Ce(G, W);
+    const W = Ie(S?.[0], 1), G = S?.[1], me = Ce(G, W);
     b({ start: W, end: G }), t(y.TRENDS_CLICK_TIME_WINDOW, {
-      time_period: ge + "M"
+      time_period: me + "M"
     });
-  }, de = () => {
+  }, le = () => {
     t(y.TRENDS_CLICK_FILTER);
   }, se = (S) => {
     $(S);
+  }, de = (S) => {
+    $(S), t(y.TRENDS_CLICK_LEGEND, { category: g(S) });
   }, he = (S) => {
-    $(S), t(y.TRENDS_CLICK_LEGEND, { category: m(S) });
-  }, ae = (S) => {
-    t(y.TRENDS_HOVER_LEGEND, { category: m(S) });
+    t(y.TRENDS_HOVER_LEGEND, { category: g(S) });
   }, ue = (S) => {
     t(y.TRENDS_HOVER_AREA, { category: S });
-  }, me = (S) => {
+  }, ge = (S) => {
     t(y.TRENDS_HOVER_POINT, { category: S });
   };
-  return !a || !g || !w ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
+  return !a || !m || !w ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
     Ae,
     {
       accountOptions: d,
       calendarActions: { onRangeChanged: oe },
       dateRange: u,
       dateRangeVariant: "timeframebuttons",
-      onAccountsFilterClick: de,
+      onAccountsFilterClick: le,
       onBackClick: n,
       sx: o,
-      title: L.title,
+      title: E.title,
       children: [
         /* @__PURE__ */ f(
           _,
@@ -307,7 +307,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                     /* @__PURE__ */ e(
                       Oe,
                       {
-                        selectedCategoryGuid: I,
+                        selectedCategoryGuid: x,
                         selectedDateRange: u
                       }
                     ),
@@ -316,21 +316,21 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                 }
               ),
               /* @__PURE__ */ f(_, { alignItems: "center", flexDirection: "row", width: "100%", children: [
-                /* @__PURE__ */ e(O, { flexGrow: 1, children: I && /* @__PURE__ */ f(pe, { onClick: () => $(""), sx: { p: 0, pr: 5 }, children: [
-                  /* @__PURE__ */ e(re, { name: "arrow_back" }),
-                  L.all_categories
+                /* @__PURE__ */ e(O, { flexGrow: 1, children: x && /* @__PURE__ */ f(pe, { onClick: () => $(""), sx: { p: 0, pr: 5 }, children: [
+                  /* @__PURE__ */ e(ae, { name: "arrow_back" }),
+                  E.all_categories
                 ] }) }),
-                /* @__PURE__ */ e(pe, { onClick: () => D(!0), sx: { px: 5 }, children: `${L.view_transactions} (${C.length})` })
+                /* @__PURE__ */ e(pe, { onClick: () => D(!0), sx: { px: 5 }, children: `${E.view_transactions} (${C.length})` })
               ] }),
               /* @__PURE__ */ f(O, { children: [
                 N === "Chart" && /* @__PURE__ */ e(
                   Ye,
                   {
                     availableHeight: ee,
-                    onClickLegend: he,
+                    onClickLegend: de,
                     onHoverArea: ue,
-                    onHoverLegend: ae,
-                    onHoverPoint: me,
+                    onHoverLegend: he,
+                    onHoverPoint: ge,
                     stackedDatasets: te.stackedDatasets,
                     unstackedDatasets: te.unstackedDatasets
                   }
@@ -340,7 +340,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                   {
                     monthlyCategoryTotals: c,
                     onClickRow: se,
-                    selectedCategory: I,
+                    selectedCategory: x,
                     selectedDateRange: u
                   }
                 )
@@ -351,7 +351,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         /* @__PURE__ */ e(
           Ot,
           {
-            categoryGuid: I,
+            categoryGuid: x,
             dateRange: u,
             isOpen: k,
             onClose: () => D(!1)
@@ -379,9 +379,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     }
   );
 }, Bt = M(Gt), zt = ({ onPrimaryCtaClick: n, sx: o }) => {
-  const { visibleAccounts: t } = ce(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: i } = F(), { isInitialized: h } = ve(), { trends: d } = R(), { isCopyLoaded: l, selectedAccounts: c, setSelectedAccounts: m } = P();
+  const { visibleAccounts: t } = ie(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: i } = F(), { isInitialized: h } = ve(), { trends: d } = R(), { isCopyLoaded: l, selectedAccounts: c, setSelectedAccounts: g } = P();
   return r.useEffect(() => {
-    m(t);
+    g(t);
   }, [t]), r.useEffect(() => {
     h && s(c).finally();
   }, [h, c]), !l || !h ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
@@ -403,10 +403,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   secondaryLabel: i,
   shouldDisplayPercentage: h
 }) => {
-  const { availableWidth: d } = ot(), l = r.useRef(null), c = r.useRef(null), m = Ct(Number(Math.abs(s)), {
+  const { availableWidth: d } = ot(), l = r.useRef(null), c = r.useRef(null), g = Ct(Number(Math.abs(s)), {
     style: "percent",
     minimumIntegerDigits: 1
-  }), C = d === 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", a = t === "spending" ? "success.main" : "text.secondary", g = l?.current, T = c?.current, p = g && T ? g.scrollWidth > T.clientWidth - Ft : !1;
+  }), C = d === 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", a = t === "spending" ? "success.main" : "text.secondary", m = l?.current, T = c?.current, p = m && T ? m.scrollWidth > T.clientWidth - Ft : !1;
   return /* @__PURE__ */ f(
     _,
     {
@@ -440,7 +440,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                       fontWeight: 600
                     },
                     variant: "body2",
-                    children: m
+                    children: g
                   }
                 )
               ] })
@@ -482,19 +482,19 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
 }, Pt = M(() => {
   const { trends: n } = R();
   return /* @__PURE__ */ f(_, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
-    /* @__PURE__ */ e(mt, { size: 32 }),
+    /* @__PURE__ */ e(gt, { size: 32 }),
     /* @__PURE__ */ f(_, { 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 })
     ] })
   ] });
 }), Qn = M(({ onCtaClick: n }) => {
-  const { visibleAccounts: o } = ce(), { onEvent: t } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: i, monthlyTotalsLoaded: h } = F(), d = {
+  const { visibleAccounts: o } = ie(), { onEvent: t } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: i, monthlyTotalsLoaded: h } = F(), d = {
     start: dt(/* @__PURE__ */ new Date(), 1),
     end: /* @__PURE__ */ new Date()
-  }, { trends: l } = R(), { selectedAccounts: c, setSelectedAccounts: m, isInitialized: C } = P();
+  }, { trends: l } = R(), { selectedAccounts: c, setSelectedAccounts: g, isInitialized: C } = P();
   r.useEffect(() => {
-    m(o);
+    g(o);
   }, [o]), r.useEffect(() => {
     C && i(c, d.start).then(() => {
       t(y.TRENDS_LOAD_WIDGET, {
@@ -508,9 +508,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       incomeData: xe(s, d)
     }),
     [s, d]
-  ), [a, g] = u, [T, p] = b, L = _e(g.y, a.y), w = _e(p.y, T.y), E = C && !o?.length, k = () => {
+  ), [a, m] = u, [T, p] = b, E = _e(m.y, a.y), w = _e(p.y, T.y), I = C && !o?.length, k = () => {
     t(
-      E ? y.TRENDS_CLICK_GET_STARTED : y.TRENDS_CLICK_VIEW_MORE
+      I ? y.TRENDS_CLICK_GET_STARTED : y.TRENDS_CLICK_VIEW_MORE
     ), n();
   };
   return !h || !C ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
@@ -519,9 +519,9 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       className: "mx-trends-microwidget",
       ctaLabel: l.micro_primary_cta_label,
       onCTAClick: k,
-      subHeader: E ? void 0 : l.micro_subheader,
+      subHeader: I ? void 0 : l.micro_subheader,
       title: l.title,
-      children: E ? /* @__PURE__ */ e(Pt, {}) : /* @__PURE__ */ f(
+      children: I ? /* @__PURE__ */ e(Pt, {}) : /* @__PURE__ */ f(
         _,
         {
           sx: {
@@ -533,11 +533,11 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
             /* @__PURE__ */ e(
               Se,
               {
-                percentage: L,
+                percentage: E,
                 secondaryLabel: l.micro_secondary_label,
-                shouldDisplayPercentage: g.y !== 0 && a.y !== 0,
+                shouldDisplayPercentage: m.y !== 0 && a.y !== 0,
                 title: l.spending_label,
-                totalAmount: g.y,
+                totalAmount: m.y,
                 transactionType: "spending"
               }
             ),
@@ -566,7 +566,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         sx: { color: t.palette.primary.main, flexDirection: "row", alignItems: "center" },
         children: [
           /* @__PURE__ */ e(wt, { children: /* @__PURE__ */ e(X, { bold: !0, variant: "body2", children: n ? "View less" : "View more" }) }),
-          /* @__PURE__ */ e(St, { sx: { color: t.palette.primary.main }, children: n ? /* @__PURE__ */ e(gt, {}) : /* @__PURE__ */ e(
+          /* @__PURE__ */ e(St, { sx: { color: t.palette.primary.main }, children: n ? /* @__PURE__ */ e(mt, {}) : /* @__PURE__ */ e(
             pt,
             {
               sx: {
@@ -589,7 +589,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     isLastItem: h = !1,
     showDivider: d = !0
   }) => {
-    const { trends: l } = R(), { onEvent: c } = H(), m = `${s.length} ${s.length === 1 ? l.transaction : l.transactions}`, C = () => {
+    const { trends: l } = R(), { onEvent: c } = H(), g = `${s.length} ${s.length === 1 ? l.transaction : l.transactions}`, C = () => {
       i?.(), c(y.TRENDS_CLICK_LIST_ITEM, {
         ...A,
         listItem: t
@@ -603,7 +603,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
           onClick: C,
           rightContent: U(Math.abs(n), "0,0.00"),
           rightIcon: i ? /* @__PURE__ */ e(Ke, {}) : void 0,
-          subtitle: m,
+          subtitle: g,
           title: t
         }
       ),
@@ -612,49 +612,49 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   }
 ), $t = M(
   ({ availableHeight: n = 0, onCategoryClick: o }) => {
-    const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: i } = q(), { isLargeDesktop: h, isDesktop: d } = K(), { trends: l } = R(), { onEvent: c } = H(), [m, C] = r.useState(!1), u = d || h;
+    const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: i } = q(), { isLargeDesktop: h, isDesktop: d } = K(), { trends: l } = R(), { onEvent: c } = H(), [g, C] = r.useState(!1), u = d || h;
     r.useEffect(() => {
-      const g = Math.floor(n / 64) - 1, T = s.length + t.length;
-      g !== s.length && (i(u ? Math.max(g, 5) : 5), C(g >= T));
+      const m = Math.floor(n / 64) - 1, T = s.length + t.length;
+      m !== s.length && (i(u ? Math.max(m, 5) : 5), C(m >= T));
     }, [n]);
     const b = () => {
-      C(!m), c(y.TRENDS_CLICK_VIEW_MORE, {
+      C(!g), c(y.TRENDS_CLICK_VIEW_MORE, {
         ...A
       });
-    }, a = s.length + (m ? t.length : 0);
+    }, a = s.length + (g ? t.length : 0);
     return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ f(yt, { children: [
       /* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(De, { children: l.categories }) }),
-      s.map((g, T) => /* @__PURE__ */ e(
+      s.map((m, T) => /* @__PURE__ */ e(
         we,
         {
-          ...g,
+          ...m,
           isLastItem: T === a - 1,
-          onClick: g.transactions.length > 0 ? () => o(g) : void 0,
+          onClick: m.transactions.length > 0 ? () => o(m) : void 0,
           showDivider: !0
         },
-        g.guid
+        m.guid
       )),
       /* @__PURE__ */ e(
         Tt,
         {
-          in: m,
+          in: g,
           sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
-          children: t.map((g, T) => {
+          children: t.map((m, T) => {
             const p = s.length + T;
             return /* @__PURE__ */ e(
               we,
               {
-                ...g,
+                ...m,
                 isLastItem: p === a - 1,
-                onClick: g.transactions.length > 0 ? () => o(g) : void 0,
+                onClick: m.transactions.length > 0 ? () => o(m) : void 0,
                 showDivider: !0
               },
-              g.guid
+              m.guid
             );
           })
         }
       ),
-      t.length > 0 && /* @__PURE__ */ e(Kt, { isExpanded: m, onClick: b })
+      t.length > 0 && /* @__PURE__ */ e(Kt, { isExpanded: g, onClick: b })
     ] }) });
   }
 ), jt = [
@@ -692,13 +692,13 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   "WeeklyNoSpendDays",
   "WeeklySmallPurchasesSummary"
 ], Yt = ({ onInsightCardClick: n }) => {
-  const o = It(), { onEvent: t } = H(), { isMobile: s, isDesktop: i, isLargeDesktop: h } = K(), { beatStore: d, endpoint: l, sessionToken: c } = ve(), { isInitialized: m } = P(), [C, u] = r.useState(!1), b = o.palette.mode === "dark", a = i || h, g = a || s ? 1 : 2;
+  const o = It(), { onEvent: t } = H(), { isMobile: s, isDesktop: i, isLargeDesktop: h } = K(), { beatStore: d, endpoint: l, sessionToken: c } = ve(), { isInitialized: g } = P(), [C, u] = r.useState(!1), b = o.palette.mode === "dark", a = i || h, m = a || s ? 1 : 2;
   r.useEffect(() => {
-    m && d.loadBeats().finally(() => u(!0));
-  }, [m]);
-  const T = r.useMemo(() => C ? d.getFilteredBeats({ templates: jt }) : [], [C]), p = () => null, L = (D) => {
+    g && d.loadBeats().finally(() => u(!0));
+  }, [g]);
+  const T = r.useMemo(() => C ? d.getFilteredBeats({ templates: jt }) : [], [C]), p = () => null, E = (D) => {
     n?.(D), t(y.TRENDS_CLICK_INSIGHT, A);
-  }, w = a ? 200 : 170, E = a ? 170 : 124, k = T.length > 0 ? w : E;
+  }, w = a ? 200 : 170, I = a ? 170 : 124, k = T.length > 0 ? w : I;
   return /* @__PURE__ */ e(Et, { sx: { height: k }, children: /* @__PURE__ */ e(
     ct,
     {
@@ -706,7 +706,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       beats: T,
       endpoint: l,
       logOutUser: p,
-      onCardClick: L,
+      onCardClick: E,
       showBorder: !0,
       showCTAColocatedWithText: !1,
       showCarouselControls: !0,
@@ -717,7 +717,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       useDarkMode: b,
       userHasFullInsightFeedBeats: !1,
       variant: "outlined",
-      visibleCardsCount: g
+      visibleCardsCount: m
     }
   ) });
 }, Ut = M(Yt), Xt = M(({ chartLabel: n, chartColor: o }) => {
@@ -754,13 +754,13 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     }
   ) });
 }), Zt = M(({ onClose: n }) => {
-  const o = Ne(), { onEvent: t } = H(), { common: s, trends: i } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: d } = q(), { sortedTransactions: l } = ie(), [c, m] = r.useState(null);
+  const o = Ne(), { onEvent: t } = H(), { common: s, trends: i } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: d } = q(), { sortedTransactions: l } = re(), [c, g] = r.useState(null);
   if (!h)
     return null;
-  const { guid: C, name: u, is_income: b, totalAmount: a } = h, g = b ? i.category_income : i.category_spending, T = xt(C, o), p = b ? i.income_label : i.spending_label, L = ` ${h.transactions.length === 1 ? i.transaction : i.transactions} (${h.transactions.length})`, w = r.useMemo(
+  const { guid: C, name: u, is_income: b, totalAmount: a } = h, m = b ? i.category_income : i.category_spending, T = xt(C, o), p = b ? i.income_label : i.spending_label, E = ` ${h.transactions.length === 1 ? i.transaction : i.transactions} (${h.transactions.length})`, w = r.useMemo(
     () => l.find((D) => D.guid === c),
     [c, l]
-  ), E = (D) => D.category_guid === C || D.top_level_category_guid === C, k = () => {
+  ), I = (D) => D.category_guid === C || D.top_level_category_guid === C, k = () => {
     n?.(), t(y.TRENDS_CLICK_BACK, A);
   };
   return /* @__PURE__ */ f(
@@ -770,7 +770,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       isOpen: !0,
       onClose: k,
       shouldShowHeaderShadow: !0,
-      title: g,
+      title: m,
       children: [
         /* @__PURE__ */ f(_, { sx: { alignItems: "center", height: "100%" }, children: [
           /* @__PURE__ */ f(Lt, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
@@ -785,17 +785,17 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
             ),
             /* @__PURE__ */ e(Xt, { chartColor: T, chartLabel: p }),
             /* @__PURE__ */ f(_, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
-              /* @__PURE__ */ e(X, { bold: !0, variant: "body1", children: L }),
-              /* @__PURE__ */ e(vt, { filter: E })
+              /* @__PURE__ */ e(X, { bold: !0, variant: "body1", children: E }),
+              /* @__PURE__ */ e(vt, { filter: I })
             ] })
           ] }),
           /* @__PURE__ */ e(
             ke,
             {
               bgcolor: "transparent",
-              filter: E,
+              filter: I,
               height: "calc(100vh - 475px)",
-              onClick: m
+              onClick: g
             }
           )
         ] }),
@@ -804,7 +804,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
           {
             ariaLabelClose: s.close_aria,
             isOpen: !!w,
-            onClose: () => m(""),
+            onClose: () => g(""),
             title: i.transaction,
             children: w && /* @__PURE__ */ e(Re, { transaction: w })
           }
@@ -818,11 +818,11 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
 }, qt = (n, o) => {
   const [t, s] = n, i = t, h = s ?? t, d = [];
   if (i) {
-    const l = i.reduce((c, m) => c + m.y, 0);
+    const l = i.reduce((c, g) => c + g.y, 0);
     d.push({ label: o.income_label, amount: l });
   }
   if (h) {
-    const l = h.reduce((c, m) => c + m.y, 0);
+    const l = h.reduce((c, g) => c + g.y, 0);
     d.push({ label: o.spending_label, amount: l });
   }
   return d;
@@ -832,7 +832,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   selectedDateRange: t,
   totals: s
 }) => {
-  const i = He(), { onEvent: h } = H(), { trends: d } = R(), { isSmallMobile: l, isMobile: c, isSmallTablet: m, isTablet: C } = K(), u = [i.palette.chart?.chart1, i.palette.chart?.chart2], b = Qt(s, t), a = qt(b, d), [g, T] = r.useState(0), p = 458, L = 195, w = 56, E = c || l ? L : m || C ? p : g;
+  const i = He(), { onEvent: h } = H(), { trends: d } = R(), { isSmallMobile: l, isMobile: c, isSmallTablet: g, isTablet: C } = K(), u = [i.palette.chart?.chart1, i.palette.chart?.chart2], b = Qt(s, t), a = qt(b, d), [m, T] = r.useState(0), p = 458, E = 195, w = 56, I = c || l ? E : g || C ? p : m;
   return r.useEffect(() => {
     const D = Math.max(n - w, o);
     T(D);
@@ -843,7 +843,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       colors: u,
       curveType: "bump",
       datasets: b,
-      height: E,
+      height: I,
       labels: a,
       onItemClick: () => {
         h(y.TRENDS_CLICK_CHART, A);
@@ -860,20 +860,22 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     }
   );
 }, en = M(Jt), tn = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
-  const { onEvent: s } = H(), { config: i } = st(), { isLargeDesktop: h, isDesktop: d, isMobile: l } = K(), { visibleAccounts: c } = ce(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: u } = F(), { setFilter: b } = ie(), { selectedDateRange: a, setSelectedCategoryData: g, setSelectedDateRange: T } = q(), {
+  const { onEvent: s } = H(), { config: i } = st(), { isLargeDesktop: h, isDesktop: d, isMobile: l } = K(), { visibleAccounts: c } = ie(), { loadDateRangeCategoryTotals: g, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: u } = F(), { setFilter: b } = re(), { selectedDateRange: a, setSelectedCategoryData: m, setSelectedDateRange: T } = q(), {
     isCopyLoaded: p,
-    isInitialized: L,
+    isInitialized: E,
     selectedAccounts: w,
-    selectedAccountGuids: E,
+    selectedAccountGuids: I,
     setSelectedAccounts: k
-  } = P(), { trends: D } = R(), N = Ue(), x = d || h, [I, $] = r.useState(!1), [z, le] = r.useState("Chart"), [J, ee] = r.useState(""), [te, ne] = r.useState(!1), [oe, de] = r.useState(!0), [se, he] = r.useState(window.innerHeight), ae = se - 208, ue = se - (N ? 494 : 266);
+  } = P(), { trends: D } = R(), N = Ue(), L = d || h, [x, $] = r.useState(!1), [z, ce] = r.useState("Chart"), [J, ee] = r.useState(""), [te, ne] = r.useState(!1), [oe, le] = r.useState(window.innerHeight), se = oe - 208, de = oe - (N ? 494 : 266), [he, ue] = r.useState(!1);
   r.useEffect(() => {
-    const v = () => he(window.innerHeight);
+    const v = () => le(window.innerHeight);
     return window.addEventListener("resize", v), () => window.removeEventListener("resize", v);
   }, []), r.useEffect(() => {
-    k(c);
+    console.log("accounts changed: ", c.length), k(c);
   }, [c]), r.useEffect(() => {
-    L && m(w, a.start, a.end).then(() => {
+    console.log("first load: ", c.length), c || ue(!0);
+  }, []), r.useEffect(() => {
+    E && g(w, a.start, a.end).then(() => {
       C(
         w,
         a.start,
@@ -885,12 +887,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         time_period: `${Ce(a.end, a.start)}M`
       });
     });
-  }, [L, w, a]), r.useEffect(() => {
-    console.log("inside new use effect"), console.log(I && (c?.length ?? 0) > 0), I && (c?.length ?? 0) > 0 && de(!1);
-  }, [I, c]), r.useEffect(() => {
+  }, [E, w, a]), r.useEffect(() => {
     if (u.length !== 0) {
       const v = {
-        accounts: E,
+        accounts: I,
         dateRange: { start: a.start, end: a.end }
       };
       b({
@@ -901,12 +901,12 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       });
     }
   }, [u]);
-  const me = (v) => {
-    g(v), ne(!0);
+  const ge = (v) => {
+    m(v), ne(!0);
   }, S = () => {
-    g(null), ne(!1);
+    m(null), ne(!1);
   }, W = (v, V) => {
-    le(V ?? z), s(y.TRENDS_CLICK_TOGGLE_VIEW, {
+    ce(V ?? z), s(y.TRENDS_CLICK_TOGGLE_VIEW, {
       ...A,
       toggleView: V
     });
@@ -916,7 +916,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       ...A,
       time_period: Fe + "M"
     });
-  }, ge = (v) => {
+  }, me = (v) => {
     s(y.TRENDS_CLICK_FILTER, {
       ...A,
       filterValue: v
@@ -926,19 +926,20 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   }, Be = () => {
     ee(""), s(y.TRENDS_CLICK_ALL_CATEGORIES, A);
   }, ze = i.show_connections_widget_in_master ? "buttons" : "no-buttons";
-  return !p || !I ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
+  return /* @__PURE__ */ f(
     Ae,
     {
       accountOptions: c,
       calendarActions: { onRangeChanged: G },
       dateRange: a,
       dateRangeVariant: l ? "timeframetabs" : "timeframebuttons",
-      onAccountsFilterClick: ge,
+      onAccountsFilterClick: me,
       onBackClick: n,
       sx: t,
       title: D.title,
       children: [
-        oe && /* @__PURE__ */ e(
+        !p || !x && /* @__PURE__ */ e(Q, {}),
+        he ? /* @__PURE__ */ e(
           Mt,
           {
             header: D.zero_state_content_header,
@@ -947,11 +948,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
             },
             primaryButton: D.empty_state_primary,
             subText: D.empty_state_sub_text,
-            sx: { height: ae },
+            sx: { height: se },
             variant: ze
           }
-        ),
-        !oe && /* @__PURE__ */ f(
+        ) : /* @__PURE__ */ f(
           _,
           {
             sx: {
@@ -977,27 +977,27 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                 }
               ),
               /* @__PURE__ */ e(_, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: J && /* @__PURE__ */ f(pe, { onClick: Be, sx: { p: 0, pr: 5 }, children: [
-                /* @__PURE__ */ e(re, { name: "arrow_back" }),
+                /* @__PURE__ */ e(ae, { name: "arrow_back" }),
                 D.all_categories
               ] }) }) }),
-              /* @__PURE__ */ f(_, { flexDirection: x ? "row" : "column", gap: x ? 48 : 16, children: [
+              /* @__PURE__ */ f(_, { flexDirection: L ? "row" : "column", gap: L ? 48 : 16, children: [
                 z === "Chart" && /* @__PURE__ */ f(Pe, { children: [
-                  /* @__PURE__ */ e(O, { sx: { width: x ? "68%" : "100%" }, children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e(O, { sx: { width: L ? "68%" : "100%" }, children: /* @__PURE__ */ e(
                     en,
                     {
-                      availableHeight: ae,
+                      availableHeight: se,
                       minHeight: 450,
                       selectedDateRange: a,
                       totals: u
                     }
                   ) }),
-                  /* @__PURE__ */ f(_, { gap: 16, sx: { width: x ? "32%" : "100%" }, children: [
+                  /* @__PURE__ */ f(_, { gap: 16, sx: { width: L ? "32%" : "100%" }, children: [
                     N && /* @__PURE__ */ e(Ut, { onInsightCardClick: o }),
                     /* @__PURE__ */ e(
                       $t,
                       {
-                        availableHeight: ue,
-                        onCategoryClick: me
+                        availableHeight: de,
+                        onCategoryClick: ge
                       }
                     )
                   ] })

package/package.json

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