@mx-cartographer/experiences 7.0.58-alpha.mm1 → 7.0.58-alpha.mm2

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 ie, Text as Q, CategoryIcon as fe, P as X, H3 as Le, ChevronRightIcon as qe } from "@mxenabled/mxui";
+import { Icon as ie, Text as Q, CategoryIcon as fe, P as X, H3 as Le, ChevronRightIcon as Je } from "@mxenabled/mxui";
 import W from "@mui/material/Box";
-import _ from "@mui/material/Stack";
+import b from "@mui/material/Stack";
 import ge from "@mui/material/Button";
 import { addSeconds as xe } from "date-fns/addSeconds";
 import { differenceInCalendarMonths as pe } from "date-fns/differenceInCalendarMonths";
-import { a as Je, g as et, S as tt, L as ve } from "../TrendsStore-BKBnNQba.mjs";
+import { a as et, g as tt, S as nt, L as ve } from "../TrendsStore-BKBnNQba.mjs";
 import { T as mo } from "../TrendsStore-BKBnNQba.mjs";
-import { i as nt, c as ot, d as st, e as rt, f as at, h as it, b as Me, g as Ae, j as we } from "../SpendingData-D5vsfYKo.mjs";
-import ct from "@mui/material/ToggleButton";
-import lt from "@mui/material/ToggleButtonGroup";
-import { u as R, m as K, g as k, b as ee, h as ce, d as le, v as te, f as Te, p as dt, a as ht } from "../hooks-CE2TKk4a.mjs";
+import { i as ot, c as st, d as rt, e as at, f as it, h as ct, b as Me, g as Ae, j as we } 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 k, b as ee, h as ce, d as le, v as te, f as Te, p as ht, a as Re } from "../hooks-CE2TKk4a.mjs";
 import { u as $ } from "../useScreenSize-B6JyS_Lj.mjs";
 import { f as q, D as B } from "../Dialog-CWW597AF.mjs";
 import { DataGridPro as ut } from "@mui/x-data-grid-pro";
 import { C as mt } from "../CurrencyText-YUhH2caW.mjs";
-import { c as Re } from "../Category-CevNQ03n.mjs";
+import { c as ke } from "../Category-CevNQ03n.mjs";
 import { b as gt } from "../Localization-2MODESHW.mjs";
 import { H as De } from "../HeaderCell-DjuifqHJ.mjs";
 import { T as A, b as pt } from "../ViewMoreMicroCard-BAz2NyEO.mjs";
-import { A as T, W as ke } from "../WidgetContainer-B8MRJ5Y1.mjs";
-import { a as Ne, T as He } from "../TransactionDetails-DAp_CPCP.mjs";
+import { A as y, W as Ne } from "../WidgetContainer-B8MRJ5Y1.mjs";
+import { a as He, T as We } from "../TransactionDetails-DAp_CPCP.mjs";
 import { D as Ce } from "../Drawer-kEE73B87.mjs";
 import { L as J } from "../Loader-DUaFpDGv.mjs";
-import { useTheme as We } from "@mui/material/styles";
+import { useTheme as Oe } from "@mui/material/styles";
 import { L as ye } from "../LineChart-B2Y7zwMu.mjs";
 import { M as Ct } from "../MiniWidgetContainer-DTQdRK-3.mjs";
 import { subMonths as ft } from "date-fns";
@@ -38,7 +38,7 @@ import Lt from "@mui/material/ListItem";
 import xt from "@mui/material/ListItemButton";
 import vt from "@mui/material/ListItemIcon";
 import Mt from "@mui/material/ListItemText";
-import Oe from "@mui/material/styles/useTheme";
+import Ve from "@mui/material/styles/useTheme";
 import At from "@mui/material/Divider";
 import { useTheme as Rt, Stack as kt } from "@mui/material";
 import Nt from "@mui/material/Paper";
@@ -47,17 +47,17 @@ import { E as Wt } from "../ExportCsvAction-CBJAfyAw.mjs";
 import { u as Ot } from "../useInsightsEnabled-DSnpkUq0.mjs";
 import { E as Vt } from "../EmptyState-w2yYDuKG.mjs";
 import { k as Gt } from "../ConnectDrawer-DJA_S-rX.mjs";
-const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
-  lt,
+const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
+  dt,
   {
     exclusive: !0,
     onChange: o,
     orientation: "horizontal",
     value: t,
-    children: ["Chart", "Table"].map((n) => /* @__PURE__ */ e(ct, { color: "primary", sx: { width: 56 }, value: n, children: n === "Chart" ? /* @__PURE__ */ e(ie, { name: "table_chart_view" }) : /* @__PURE__ */ e(ie, { name: "format_list_bulleted" }) }, n))
+    children: ["Chart", "Table"].map((n) => /* @__PURE__ */ e(lt, { color: "primary", sx: { width: 56 }, value: n, children: n === "Chart" ? /* @__PURE__ */ e(ie, { name: "table_chart_view" }) : /* @__PURE__ */ e(ie, { name: "format_list_bulleted" }) }, n))
   }
-), Ge = ({ selectedDateRange: t, selectedCategoryGuid: o }) => {
-  const { trends: n } = R(), { isMobile: s, isDesktop: a } = $(), { getCategoryName: h } = K(), u = i.useMemo(() => {
+), Be = ({ selectedDateRange: t, selectedCategoryGuid: o }) => {
+  const { trends: n } = R(), { isMobile: s, isDesktop: a } = $(), { getCategoryName: d } = K(), h = i.useMemo(() => {
     const l = q(
       t.start,
       s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
@@ -79,17 +79,17 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
           textOverflow: "unset"
         },
         variant: a ? "H3" : "Body",
-        children: h(o) || n.sub_title
+        children: d(o) || n.sub_title
       }
     ),
-    /* @__PURE__ */ e(Q, { variant: a ? "Body" : "Small", children: u })
+    /* @__PURE__ */ e(Q, { variant: a ? "Body" : "Small", children: h })
   ] });
 }, Bt = (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(b, { alignItems: "flex-end", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(mt, { amount: o, variant: "Small" }) });
 }, zt = ({ categoryGuid: t, topLevelCategoryGuid: o }) => {
-  const { categories: n } = R(), s = n.default_categories[t]?.replace(/&/g, "&") ?? Re[t];
-  return /* @__PURE__ */ C(_, { alignItems: "center", direction: "row", justifyContent: "center", children: [
+  const { categories: n } = R(), s = n.default_categories[t]?.replace(/&/g, "&") ?? ke[t];
+  return /* @__PURE__ */ C(b, { alignItems: "center", direction: "row", justifyContent: "center", children: [
     /* @__PURE__ */ e(
       W,
       {
@@ -100,7 +100,7 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
     ),
     /* @__PURE__ */ e(Q, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
   ] });
-}, Ft = (t) => /* @__PURE__ */ e(_, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
+}, Ft = (t) => /* @__PURE__ */ e(b, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
   zt,
   {
     categoryGuid: t.row.category,
@@ -113,17 +113,17 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
     n.push(a), s.setMonth(s.getMonth() + 1);
   }
   return n;
-}, Be = ({
+}, ze = ({
   monthlyCategoryTotals: t,
   selectedDateRange: o,
   selectedCategory: n,
   onClickRow: s,
   height: a = "100dvh",
-  sx: h = {}
+  sx: d = {}
 }) => {
-  const { onEvent: u } = k(), l = q(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [c, g] = i.useState([
+  const { onEvent: h } = k(), l = q(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [c, g] = i.useState([
     { field: l, sort: "desc" }
-  ]), f = i.useMemo(() => Pt(o.start, o.end), [o]), d = [
+  ]), f = i.useMemo(() => Pt(o.start, o.end), [o]), u = [
     {
       field: "category",
       flex: 1,
@@ -147,48 +147,48 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
         sortable: !0,
         hideSortIcons: !1,
         type: "number",
-        sortComparator: Je
+        sortComparator: et
       })
     )
-  ], b = i.useMemo(() => {
+  ], T = i.useMemo(() => {
     const r = t.filter(
-      (p) => !nt(p) && !ot(p)
-    ), y = (n ? r.filter(
+      (p) => !ot(p) && !st(p)
+    ), _ = (n ? r.filter(
       (p) => p.category_guid === n || p.top_level_category_guid === n
     ) : r).reduce(
       (p, D) => {
-        const { category_guid: w, top_level_category_guid: E, month: N, total: I, year: O } = D, M = n ? w : E;
+        const { category_guid: w, top_level_category_guid: I, month: N, total: E, year: O } = D, M = n ? w : I;
         p[M] || (p[M] = {
           id: M,
           category: M,
           category_guid: w,
-          top_level_category_guid: E
+          top_level_category_guid: I
         });
         const L = q(new Date(O, N - 1), B.MONTH_SHORT);
-        return p[M][L] || (p[M][L] = 0), p[M][L] = p[M][L] + Math.abs(I), p;
+        return p[M][L] || (p[M][L] = 0), p[M][L] = p[M][L] + Math.abs(E), p;
       },
       {}
     );
-    return Object.values(y);
+    return Object.values(_);
   }, [t, n]);
-  return /* @__PURE__ */ e(W, { sx: { height: a, width: "100%", overflowX: "auto", boxShadow: "none", ...h }, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(W, { sx: { height: a, width: "100%", overflowX: "auto", boxShadow: "none", ...d }, children: /* @__PURE__ */ e(
     ut,
     {
-      columns: d,
+      columns: u,
       disableColumnFilter: !0,
       disableColumnMenu: !0,
       hideFooter: !0,
       initialState: { sorting: { sortModel: c } },
       onRowClick: (r) => {
-        s?.(r.row.category), u(T.TRENDS_CLICK_LIST_ITEM, {
+        s?.(r.row.category), h(y.TRENDS_CLICK_LIST_ITEM, {
           ...A,
-          listItem: Re[r.row.category]
+          listItem: ke[r.row.category]
         });
       },
       onSortModelChange: (r) => {
-        g(r), u(T.TRENDS_CLICK_TABLE_SORT, A);
+        g(r), h(y.TRENDS_CLICK_TABLE_SORT, A);
       },
-      rows: b,
+      rows: T,
       slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
       sortModel: c,
       sortingOrder: ["asc", "desc"]
@@ -202,89 +202,89 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   isOpen: n,
   onClose: s
 }) => {
-  const { onEvent: a } = k(), { selectedAccountGuids: h } = ee(), { common: u } = R(), { setFilter: l, sortedTransactions: c } = ce(), [g, f] = i.useState(""), d = i.useMemo(
+  const { onEvent: a } = k(), { selectedAccountGuids: d } = ee(), { common: h } = R(), { setFilter: l, sortedTransactions: c } = ce(), [g, f] = i.useState(""), u = i.useMemo(
     () => c.find((r) => r.guid === g),
     [g, c]
   );
   i.useEffect(() => {
     l({
-      accounts: h,
+      accounts: d,
       dateRange: o,
       custom: (r) => t === "" || t === r.category_guid || t === r.top_level_category_guid,
       showSplits: !!t
     });
-  }, [h, t, o]), i.useEffect(() => a(T.TRENDS_VIEW_TRANSACTIONS), []);
-  const b = () => {
+  }, [d, t, o]), i.useEffect(() => a(y.TRENDS_VIEW_TRANSACTIONS), []);
+  const T = () => {
     f(""), s();
   };
   return /* @__PURE__ */ C(
     Ce,
     {
-      ariaLabelClose: u.close_aria,
+      ariaLabelClose: h.close_aria,
       isOpen: n,
-      onClose: b,
+      onClose: T,
       title: Kt.title,
       children: [
-        d && /* @__PURE__ */ e(Ne, { transaction: d }),
-        !d && /* @__PURE__ */ e(He, { onClick: f })
+        u && /* @__PURE__ */ e(He, { transaction: u }),
+        !u && /* @__PURE__ */ e(We, { onClick: f })
       ]
     }
   );
 }, jt = v($t), Yt = ({ onBackClick: t, sx: o }) => {
-  const { onEvent: n } = k(), { isDesktop: s, isTablet: a, isMobile: h } = $(), { visibleAccounts: u } = le(), { loadMonthlyCategoryTotals: l, monthlyCategoryTotals: c, getCategoryName: g } = K(), { sortedTransactions: f } = ce(), { selectedDateRange: d, setSelectedDateRange: b } = te(), { isCopyLoaded: r, isInitialized: m, selectedAccounts: y, setSelectedAccounts: p } = ee(), { trends: D } = R(), [w, E] = i.useState(!1), [N, I] = i.useState(!1), [O, M] = i.useState("Chart"), [L, z] = i.useState(""), [F, de] = i.useState(window.innerHeight), j = F - (h ? 315 : 345);
+  const { onEvent: n } = k(), { isDesktop: s, isTablet: a, isMobile: d } = $(), { visibleAccounts: h } = le(), { loadMonthlyCategoryTotals: l, monthlyCategoryTotals: c, getCategoryName: g } = K(), { sortedTransactions: f } = ce(), { selectedDateRange: u, setSelectedDateRange: T } = te(), { isCopyLoaded: r, isInitialized: m, selectedAccounts: _, setSelectedAccounts: p } = ee(), { trends: D } = R(), [w, I] = i.useState(!1), [N, E] = i.useState(!1), [O, M] = i.useState("Chart"), [L, z] = i.useState(""), [F, de] = i.useState(window.innerHeight), j = F - (d ? 315 : 345);
   i.useEffect(() => {
     const S = () => de(window.innerHeight);
     return window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
   }, []), i.useEffect(() => {
-    p(u);
-  }, [u]), i.useEffect(() => {
+    p(h);
+  }, [h]), i.useEffect(() => {
     m && l(
-      y,
-      d.start,
-      d.end
+      _,
+      u.start,
+      u.end
     ).finally(() => {
-      E(!0);
+      I(!0);
     });
-  }, [m, y, d]);
+  }, [m, _, u]);
   const ne = i.useMemo(() => {
     if (!w) return { stackedDatasets: [], unstackedDatasets: [] };
-    const S = et(
+    const S = tt(
       c,
-      d.start,
-      d.end
+      u.start,
+      u.end
     ), H = L.length ? S.filter(
       (G) => G.top_level_category_guid === L || G.category_guid === L
-    ) : st(S);
+    ) : rt(S);
     return {
-      stackedDatasets: H.filter(rt),
-      unstackedDatasets: H.filter(at)
+      stackedDatasets: H.filter(at),
+      unstackedDatasets: H.filter(it)
     };
-  }, [c, L, d]), P = (S, H) => {
-    M(H ?? O), n(T.TRENDS_CLICK_TOGGLE_VIEW);
+  }, [c, L, u]), P = (S, H) => {
+    M(H ?? O), n(y.TRENDS_CLICK_TOGGLE_VIEW);
   }, he = (S) => {
     const H = xe(S?.[0], 1), G = S?.[1], ae = pe(G, H);
-    b({ start: H, end: G }), n(T.TRENDS_CLICK_TIME_WINDOW, {
+    T({ start: H, end: G }), n(y.TRENDS_CLICK_TIME_WINDOW, {
       time_period: ae + "M"
     });
   }, Y = () => {
-    n(T.TRENDS_CLICK_FILTER);
+    n(y.TRENDS_CLICK_FILTER);
   }, oe = (S) => {
     z(S);
   }, ue = (S) => {
-    z(S), n(T.TRENDS_CLICK_LEGEND, { category: g(S) });
+    z(S), n(y.TRENDS_CLICK_LEGEND, { category: g(S) });
   }, se = (S) => {
-    n(T.TRENDS_HOVER_LEGEND, { category: g(S) });
+    n(y.TRENDS_HOVER_LEGEND, { category: g(S) });
   }, re = (S) => {
-    n(T.TRENDS_HOVER_AREA, { category: S });
+    n(y.TRENDS_HOVER_AREA, { category: S });
   }, me = (S) => {
-    n(T.TRENDS_HOVER_POINT, { category: S });
+    n(y.TRENDS_HOVER_POINT, { category: S });
   };
   return !r || !m || !w ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ C(
-    ke,
+    Ne,
     {
-      accountOptions: u,
+      accountOptions: h,
       calendarActions: { onRangeChanged: he },
-      dateRange: d,
+      dateRange: u,
       dateRangeVariant: "timeframebuttons",
       onAccountsFilterClick: Y,
       onBackClick: t,
@@ -292,7 +292,7 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
       title: D.title,
       children: [
         /* @__PURE__ */ C(
-          _,
+          b,
           {
             sx: {
               // eslint-disable-next-line no-nested-ternary
@@ -300,33 +300,33 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
             },
             children: [
               /* @__PURE__ */ C(
-                _,
+                b,
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  sx: { pb: h ? 12 : 24, pt: h ? 24 : 48 },
+                  sx: { pb: d ? 12 : 24, pt: d ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
-                      Ge,
+                      Be,
                       {
                         selectedCategoryGuid: L,
-                        selectedDateRange: d
+                        selectedDateRange: u
                       }
                     ),
-                    /* @__PURE__ */ e(Ve, { onTabChange: P, selectedTab: O })
+                    /* @__PURE__ */ e(Ge, { onTabChange: P, selectedTab: O })
                   ]
                 }
               ),
-              /* @__PURE__ */ C(_, { alignItems: "center", flexDirection: "row", width: "100%", children: [
+              /* @__PURE__ */ C(b, { alignItems: "center", flexDirection: "row", width: "100%", children: [
                 /* @__PURE__ */ e(W, { flexGrow: 1, children: L && /* @__PURE__ */ C(ge, { onClick: () => z(""), sx: { p: 0, pr: 5 }, children: [
                   /* @__PURE__ */ e(ie, { name: "arrow_back" }),
                   D.all_categories
                 ] }) }),
-                /* @__PURE__ */ e(ge, { onClick: () => I(!0), sx: { px: 5 }, children: `${D.view_transactions} (${f.length})` })
+                /* @__PURE__ */ e(ge, { onClick: () => E(!0), sx: { px: 5 }, children: `${D.view_transactions} (${f.length})` })
               ] }),
               /* @__PURE__ */ C(W, { children: [
                 O === "Chart" && /* @__PURE__ */ e(
-                  tt,
+                  nt,
                   {
                     availableHeight: j,
                     onClickLegend: ue,
@@ -338,12 +338,12 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
                   }
                 ),
                 O === "Table" && /* @__PURE__ */ e(
-                  Be,
+                  ze,
                   {
                     monthlyCategoryTotals: c,
                     onClickRow: oe,
                     selectedCategory: L,
-                    selectedDateRange: d
+                    selectedDateRange: u
                   }
                 )
               ] })
@@ -354,16 +354,16 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
           jt,
           {
             categoryGuid: L,
-            dateRange: d,
+            dateRange: u,
             isOpen: N,
-            onClose: () => I(!1)
+            onClose: () => E(!1)
           }
         )
       ]
     }
   );
 }, ao = v(Yt), Ut = () => {
-  const t = We(), { monthlyCategoryTotals: o } = K(), { trends: n } = R(), s = it(o);
+  const t = Oe(), { monthlyCategoryTotals: o } = K(), { trends: n } = R(), s = ct(o);
   return /* @__PURE__ */ e(
     ye,
     {
@@ -381,19 +381,19 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
     }
   );
 }, Xt = v(Ut), Zt = ({ onPrimaryCtaClick: t, sx: o }) => {
-  const { visibleAccounts: n } = le(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = K(), { isInitialized: h } = Te(), { trends: u } = R(), { isCopyLoaded: l, selectedAccounts: c, setSelectedAccounts: g } = ee();
+  const { visibleAccounts: n } = le(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = K(), { isInitialized: d } = Te(), { trends: h } = R(), { isCopyLoaded: l, selectedAccounts: c, setSelectedAccounts: g } = ee();
   return i.useEffect(() => {
     g(n);
   }, [n]), i.useEffect(() => {
-    h && s(c).finally();
-  }, [h, c]), !l || !h ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ e(
+    d && s(c).finally();
+  }, [d, c]), !l || !d ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ e(
     Ct,
     {
       onPrimaryCtaClick: t,
-      primaryCtaLabel: u.primary_cta,
-      subTitle: u.sub_title,
+      primaryCtaLabel: h.primary_cta,
+      subTitle: h.sub_title,
       sx: o,
-      title: u.mini_title,
+      title: h.mini_title,
       children: a ? /* @__PURE__ */ e(Xt, {}) : /* @__PURE__ */ e(J, {})
     }
   );
@@ -403,14 +403,14 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   transactionType: n,
   percentage: s,
   secondaryLabel: a,
-  shouldDisplayPercentage: h
+  shouldDisplayPercentage: d
 }) => {
-  const { availableWidth: u } = dt(), l = i.useRef(null), c = i.useRef(null), g = wt(Number(Math.abs(s)), {
+  const { availableWidth: h } = ht(), l = i.useRef(null), c = i.useRef(null), g = wt(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"), d = n === "spending" ? s > 0 : s >= 0, b = n === "spending" ? "error.main" : "success.main", r = n === "spending" ? "success.main" : "text.secondary", m = l?.current, y = c?.current, p = m && y ? m.scrollWidth > y.clientWidth - Qt : !1;
+  }), f = h === 288 && Z(o, "0,0.00").length > 10 ? Z(o, "0,0") : Z(o, "0,0.00"), u = n === "spending" ? s > 0 : s >= 0, T = n === "spending" ? "error.main" : "success.main", r = n === "spending" ? "success.main" : "text.secondary", m = l?.current, _ = c?.current, p = m && _ ? m.scrollWidth > _.clientWidth - Qt : !1;
   return /* @__PURE__ */ C(
-    _,
+    b,
     {
       sx: {
         border: 1,
@@ -423,7 +423,7 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
       },
       children: [
         /* @__PURE__ */ C(
-          _,
+          b,
           {
             sx: {
               alignItems: "center",
@@ -432,13 +432,13 @@ const Ve = ({ 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: [
-                d ? /* @__PURE__ */ e(Tt, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(yt, { size: 20, sx: { color: r } }),
+              d && /* @__PURE__ */ C(b, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+                u ? /* @__PURE__ */ e(Tt, { size: 20, sx: { color: T } }) : /* @__PURE__ */ e(yt, { size: 20, sx: { color: r } }),
                 /* @__PURE__ */ e(
                   X,
                   {
                     sx: {
-                      color: d ? b : r,
+                      color: u ? T : r,
                       fontWeight: 600
                     },
                     variant: "body2",
@@ -450,7 +450,7 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
           }
         ),
         /* @__PURE__ */ C(
-          _,
+          b,
           {
             ref: c,
             sx: {
@@ -467,10 +467,10 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
                   children: /* @__PURE__ */ e(Le, { children: f })
                 }
               ),
-              h && u >= 450 && !p && /* @__PURE__ */ e(
+              d && h >= 450 && !p && /* @__PURE__ */ e(
                 X,
                 {
-                  color: d ? b : r,
+                  color: u ? T : r,
                   variant: "caption",
                   children: a
                 }
@@ -483,48 +483,48 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   );
 }, qt = v(() => {
   const { trends: t } = R();
-  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(_t, { size: 32 }),
-    /* @__PURE__ */ C(_, { children: [
+    /* @__PURE__ */ C(b, { children: [
       /* @__PURE__ */ e(X, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
       /* @__PURE__ */ e(X, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
     ] })
   ] });
 }), co = v(({ onCtaClick: t }) => {
-  const { visibleAccounts: o } = le(), { onEvent: n } = k(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: h } = K(), u = {
+  const { visibleAccounts: o } = le(), { onEvent: n } = k(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: d } = K(), h = {
     start: ft(/* @__PURE__ */ new Date(), 1),
     end: /* @__PURE__ */ new Date()
   }, { trends: l } = R(), { selectedAccounts: c, setSelectedAccounts: g, isInitialized: f } = ee();
   i.useEffect(() => {
     g(o);
   }, [o]), i.useEffect(() => {
-    f && a(c, u.start).then(() => {
-      n(T.TRENDS_LOAD_WIDGET, {
+    f && a(c, h.start).then(() => {
+      n(y.TRENDS_LOAD_WIDGET, {
         state: o?.length ? "default" : "zeroState"
       });
     });
   }, [f, c]);
-  const { spendingData: d, incomeData: b } = i.useMemo(
+  const { spendingData: u, incomeData: T } = i.useMemo(
     () => ({
-      spendingData: Me(s, u),
-      incomeData: Ae(s, u)
+      spendingData: Me(s, h),
+      incomeData: Ae(s, h)
     }),
-    [s, u]
-  ), [r, m] = d, [y, p] = b, D = we(m.y, r.y), w = we(p.y, y.y), E = f && !o?.length, N = () => {
+    [s, h]
+  ), [r, m] = u, [_, p] = T, D = we(m.y, r.y), w = we(p.y, _.y), I = f && !o?.length, N = () => {
     n(
-      E ? T.TRENDS_CLICK_GET_STARTED : T.TRENDS_CLICK_VIEW_MORE
+      I ? y.TRENDS_CLICK_GET_STARTED : y.TRENDS_CLICK_VIEW_MORE
     ), t();
   };
-  return !h || !f ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ e(
+  return !d || !f ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ e(
     Dt,
     {
       className: "mx-trends-microwidget",
       ctaLabel: l.micro_primary_cta_label,
       onCTAClick: N,
-      subHeader: E ? void 0 : l.micro_subheader,
+      subHeader: I ? void 0 : l.micro_subheader,
       title: l.title,
-      children: E ? /* @__PURE__ */ e(qt, {}) : /* @__PURE__ */ C(
-        _,
+      children: I ? /* @__PURE__ */ e(qt, {}) : /* @__PURE__ */ C(
+        b,
         {
           sx: {
             alignItems: "stretch",
@@ -548,7 +548,7 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
               {
                 percentage: w,
                 secondaryLabel: l.micro_secondary_label,
-                shouldDisplayPercentage: p.y !== 0 && y.y !== 0,
+                shouldDisplayPercentage: p.y !== 0 && _.y !== 0,
                 title: l.income_label,
                 totalAmount: p.y,
                 transactionType: "income"
@@ -561,9 +561,9 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   );
 }), Jt = v(
   ({ isExpanded: t, onClick: o }) => {
-    const n = Oe();
+    const n = Ve();
     return /* @__PURE__ */ e(Lt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(xt, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
-      _,
+      b,
       {
         sx: { color: n.palette.primary.main, flexDirection: "row", alignItems: "center" },
         children: [
@@ -588,11 +588,11 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
     name: n,
     transactions: s,
     onClick: a,
-    isLastItem: h = !1,
-    showDivider: u = !0
+    isLastItem: d = !1,
+    showDivider: h = !0
   }) => {
     const { trends: l } = R(), { onEvent: c } = k(), g = `${s.length} ${s.length === 1 ? l.transaction : l.transactions}`, f = () => {
-      a?.(), c(T.TRENDS_CLICK_LIST_ITEM, {
+      a?.(), c(y.TRENDS_CLICK_LIST_ITEM, {
         ...A,
         listItem: n
       });
@@ -604,33 +604,33 @@ const Ve = ({ 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(qe, {}) : void 0,
+          rightIcon: a ? /* @__PURE__ */ e(Je, {}) : void 0,
           subtitle: g,
           title: n
         }
       ),
-      u && /* @__PURE__ */ e(At, { sx: { ml: h ? 24 : 68 } })
+      h && /* @__PURE__ */ e(At, { sx: { ml: d ? 24 : 68 } })
     ] }, o);
   }
 ), en = v(
   ({ availableHeight: t = 0, onCategoryClick: o }) => {
-    const { collapsedCategories: n, visibleCategories: s, setVisibleListLength: a } = te(), { isLargeDesktop: h, isDesktop: u } = $(), { trends: l } = R(), { onEvent: c } = k(), [g, f] = i.useState(!1), d = u || h;
+    const { collapsedCategories: n, visibleCategories: s, setVisibleListLength: a } = te(), { isLargeDesktop: d, isDesktop: h } = $(), { trends: l } = R(), { onEvent: c } = k(), [g, f] = i.useState(!1), u = h || d;
     i.useEffect(() => {
-      const m = Math.floor(t / 64) - 1, y = s.length + n.length;
-      m !== s.length && (a(d ? Math.max(m, 5) : 5), f(m >= y));
+      const m = Math.floor(t / 64) - 1, _ = s.length + n.length;
+      m !== s.length && (a(u ? Math.max(m, 5) : 5), f(m >= _));
     }, [t]);
-    const b = () => {
-      f(!g), c(T.TRENDS_CLICK_VIEW_MORE, {
+    const T = () => {
+      f(!g), c(y.TRENDS_CLICK_VIEW_MORE, {
         ...A
       });
     }, r = s.length + (g ? n.length : 0);
-    return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ C(Et, { children: [
-      /* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Le, { children: l.categories }) }),
-      s.map((m, y) => /* @__PURE__ */ e(
+    return /* @__PURE__ */ e(b, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ C(Et, { children: [
+      /* @__PURE__ */ e(b, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Le, { children: l.categories }) }),
+      s.map((m, _) => /* @__PURE__ */ e(
         Ee,
         {
           ...m,
-          isLastItem: y === r - 1,
+          isLastItem: _ === r - 1,
           onClick: m.transactions.length > 0 ? () => o(m) : void 0,
           showDivider: !0
         },
@@ -641,8 +641,8 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
         {
           in: g,
           sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
-          children: n.map((m, y) => {
-            const p = s.length + y;
+          children: n.map((m, _) => {
+            const p = s.length + _;
             return /* @__PURE__ */ e(
               Ee,
               {
@@ -656,39 +656,40 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
           })
         }
       ),
-      n.length > 0 && /* @__PURE__ */ e(Jt, { isExpanded: g, onClick: b })
+      n.length > 0 && /* @__PURE__ */ e(Jt, { isExpanded: g, onClick: T })
     ] }) });
   }
 ), tn = ({ beats: t, onInsightCardClick: o }) => {
-  const n = Rt(), { onEvent: s } = k(), { isMobile: a, isDesktop: h, isLargeDesktop: u } = $(), { beatStore: l, endpoint: c, sessionToken: g } = Te(), f = n.palette.mode === "dark", d = h || u, b = d || a ? 1 : 2, r = () => null, m = (w) => {
-    o?.(w), s(T.TRENDS_CLICK_INSIGHT, A);
-  }, y = d ? 262 : 170, p = d ? 170 : 124, D = t.length > 0 ? y : p;
-  return /* @__PURE__ */ e(kt, { sx: { height: D }, children: /* @__PURE__ */ e(
+  const n = Rt(), { onEvent: s } = k(), { is_mobile_webview: a } = Re(), { isMobile: d, isDesktop: h, isLargeDesktop: l } = $(), { beatStore: c, endpoint: g, sessionToken: f } = Te(), u = n.palette.mode === "dark", T = h || l, r = T || d ? 1 : 2, m = () => null, _ = (I) => {
+    o?.(I), s(y.TRENDS_CLICK_INSIGHT, A);
+  }, p = T ? 200 : 170, D = T ? 170 : 124, w = t.length > 0 ? p : D;
+  return /* @__PURE__ */ e(kt, { sx: { height: w }, children: /* @__PURE__ */ e(
     pt,
     {
-      areBeatsLoading: l.isLoading,
+      areBeatsLoading: c.isLoading,
       beats: t,
-      endpoint: c,
-      logOutUser: r,
-      onCardClick: m,
+      endpoint: g,
+      heightOverrides: !T && a ? p : void 0,
+      logOutUser: m,
+      onCardClick: _,
       showBorder: !0,
       showCTAColocatedWithText: !1,
       showCarouselControls: !0,
-      showHeader: d,
+      showHeader: T,
       showIcon: !0,
       showWithMargin: !1,
-      token: g,
-      useDarkMode: f,
+      token: f,
+      useDarkMode: u,
       userHasFullInsightFeedBeats: !1,
       variant: "outlined",
-      visibleCardsCount: b
+      visibleCardsCount: r
     }
   ) });
 }, nn = v(tn), on = v(({ chartLabel: t, chartColor: o }) => {
   const { onEvent: n } = k(), {
     categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: a }
   } = te();
-  return /* @__PURE__ */ e(_, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(b, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
     ye,
     {
       baseline: "min",
@@ -702,7 +703,7 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
         stroke: o
       }),
       onItemClick: () => {
-        n(T.TRENDS_CLICK_CHART, A);
+        n(y.TRENDS_CLICK_CHART, A);
       },
       showArea: !0,
       showAverage: !0,
@@ -718,14 +719,14 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
     }
   ) });
 }), sn = v(({ onClose: t }) => {
-  const o = Oe(), { onEvent: n } = k(), { common: s, trends: a } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: u } = te(), { sortedTransactions: l } = ce(), [c, g] = i.useState(null);
-  if (!h)
+  const o = Ve(), { onEvent: n } = k(), { common: s, trends: a } = R(), { selectedCategoryData: d, selectedDateRangeMonthRange: h } = te(), { sortedTransactions: l } = ce(), [c, g] = i.useState(null);
+  if (!d)
     return null;
-  const { guid: f, name: d, is_income: b, totalAmount: r } = h, m = b ? a.category_income : a.category_spending, y = Ht(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(
-    () => l.find((I) => I.guid === c),
+  const { guid: f, name: u, is_income: T, totalAmount: r } = d, m = T ? a.category_income : a.category_spending, _ = Ht(f, o), p = T ? a.income_label : a.spending_label, D = ` ${d.transactions.length === 1 ? a.transaction : a.transactions} (${d.transactions.length})`, w = i.useMemo(
+    () => l.find((E) => E.guid === c),
     [c, l]
-  ), E = (I) => I.category_guid === f || I.top_level_category_guid === f, N = () => {
-    t?.(), n(T.TRENDS_CLICK_BACK, A);
+  ), I = (E) => E.category_guid === f || E.top_level_category_guid === f, N = () => {
+    t?.(), n(y.TRENDS_CLICK_BACK, A);
   };
   return /* @__PURE__ */ C(
     Ce,
@@ -736,28 +737,28 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
       shouldShowHeaderShadow: !0,
       title: m,
       children: [
-        /* @__PURE__ */ C(_, { sx: { alignItems: "center", height: "100%" }, children: [
+        /* @__PURE__ */ C(b, { sx: { alignItems: "center", height: "100%" }, children: [
           /* @__PURE__ */ C(Nt, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
             /* @__PURE__ */ e(
               ve,
               {
                 leftIcon: /* @__PURE__ */ e(fe, { categoryGuid: f }),
                 rightContent: Z(Math.abs(r), "0,0.00"),
-                subtitle: u,
-                title: d
+                subtitle: h,
+                title: u
               }
             ),
-            /* @__PURE__ */ e(on, { chartColor: y, chartLabel: p }),
-            /* @__PURE__ */ C(_, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
+            /* @__PURE__ */ e(on, { chartColor: _, chartLabel: p }),
+            /* @__PURE__ */ C(b, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
               /* @__PURE__ */ e(Q, { bold: !0, variant: "body1", children: D }),
-              /* @__PURE__ */ e(Wt, { filter: E })
+              /* @__PURE__ */ e(Wt, { filter: I })
             ] })
           ] }),
           /* @__PURE__ */ e(
-            He,
+            We,
             {
               bgcolor: "transparent",
-              filter: E,
+              filter: I,
               height: "calc(100vh - 475px)",
               onClick: g
             }
@@ -770,7 +771,7 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
             isOpen: !!w,
             onClose: () => g(""),
             title: a.transaction,
-            children: w && /* @__PURE__ */ e(Ne, { transaction: w })
+            children: w && /* @__PURE__ */ e(He, { transaction: w })
           }
         )
       ]
@@ -780,37 +781,37 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   const n = Ae(t, o), s = Me(t, o);
   return [n, s].filter((a) => a.length > 0);
 }, an = (t, o) => {
-  const [n, s] = t, a = n, h = s ?? n, u = [];
+  const [n, s] = t, a = n, d = s ?? n, h = [];
   if (a) {
     const l = a.reduce((c, g) => c + g.y, 0);
-    u.push({ label: o.income_label, amount: l });
+    h.push({ label: o.income_label, amount: l });
   }
-  if (h) {
-    const l = h.reduce((c, g) => c + g.y, 0);
-    u.push({ label: o.spending_label, amount: l });
+  if (d) {
+    const l = d.reduce((c, g) => c + g.y, 0);
+    h.push({ label: o.spending_label, amount: l });
   }
-  return u;
+  return h;
 }, cn = ({
   availableHeight: t = 0,
   minHeight: o = 500,
   selectedDateRange: n,
   totals: s
 }) => {
-  const a = We(), { onEvent: h } = k(), { trends: u } = R(), { isSmallMobile: l, isMobile: c, isSmallTablet: g, isTablet: f } = $(), d = [a.palette.chart?.chart1, a.palette.chart?.chart2], b = rn(s, n), r = an(b, u), [m, y] = i.useState(0), p = 458, D = 195, w = 56, E = c || l ? D : g || f ? p : m;
+  const a = Oe(), { onEvent: d } = k(), { trends: h } = R(), { isSmallMobile: l, isMobile: c, isSmallTablet: g, isTablet: f } = $(), u = [a.palette.chart?.chart1, a.palette.chart?.chart2], T = rn(s, n), r = an(T, h), [m, _] = i.useState(0), p = 458, D = 195, w = 56, I = c || l ? D : g || f ? p : m;
   return i.useEffect(() => {
-    const I = Math.max(t - w, o);
-    y(I);
+    const E = Math.max(t - w, o);
+    _(E);
   }, [t]), /* @__PURE__ */ e(
     ye,
     {
       baseline: "min",
-      colors: d,
+      colors: u,
       curveType: "bump",
-      datasets: b,
-      height: E,
+      datasets: T,
+      height: I,
       labels: r,
       onItemClick: () => {
-        h(T.TRENDS_CLICK_CHART, A);
+        d(y.TRENDS_CLICK_CHART, A);
       },
       showArea: !0,
       showAxisHighlight: !0,
@@ -858,15 +859,15 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
   "WeeklyNoSpendDays",
   "WeeklySmallPurchasesSummary"
 ], hn = ({ onBackClick: t, onInsightCardClick: o, sx: n }) => {
-  const { onEvent: s } = k(), { config: a } = ht(), { isLargeDesktop: h, isDesktop: u, isMobile: l } = $(), { visibleAccounts: c } = le(), { loadDateRangeCategoryTotals: g, loadMonthlyCategoryTotals: f, monthlyCategoryTotals: d } = K(), { setFilter: b } = ce(), { selectedDateRange: r, setSelectedCategoryData: m, setSelectedDateRange: y } = te(), {
+  const { onEvent: s } = k(), { config: a } = Re(), { isLargeDesktop: d, isDesktop: h, isMobile: l } = $(), { visibleAccounts: c } = le(), { loadDateRangeCategoryTotals: g, loadMonthlyCategoryTotals: f, monthlyCategoryTotals: u } = K(), { setFilter: T } = ce(), { selectedDateRange: r, setSelectedCategoryData: m, setSelectedDateRange: _ } = te(), {
     isCopyLoaded: p,
     isInitialized: D,
     selectedAccounts: w,
-    selectedAccountGuids: E,
+    selectedAccountGuids: I,
     setSelectedAccounts: N
-  } = ee(), { trends: I, connect: O } = R(), { beatStore: M } = Te(), z = Ot() && a.show_insights_widget_in_master, F = u || h, [de, _e] = i.useState(!1), [j, ne] = i.useState(!1), [P, he] = i.useState("Chart"), [Y, oe] = i.useState(""), [ue, se] = i.useState(!1), [re, me] = i.useState(window.innerHeight), S = re - 208, H = re - (z ? 494 : 266), [G, ae] = i.useState(!1), ze = a.show_connections_widget_in_master ? "buttons" : "no-buttons", be = i.useMemo(
-    () => c && c.length === 0 || d.length === 0,
-    [c, d]
+  } = ee(), { trends: E, connect: O } = R(), { beatStore: M } = Te(), z = Ot() && a.show_insights_widget_in_master, F = h || d, [de, _e] = i.useState(!1), [j, ne] = i.useState(!1), [P, he] = i.useState("Chart"), [Y, oe] = i.useState(""), [ue, se] = i.useState(!1), [re, me] = i.useState(window.innerHeight), S = re - 208, H = re - (z ? 494 : 266), [G, ae] = i.useState(!1), Fe = a.show_connections_widget_in_master ? "buttons" : "no-buttons", be = i.useMemo(
+    () => c && c.length === 0 || u.length === 0,
+    [c, u]
   );
   i.useEffect(() => {
     D && M.loadBeats().finally(() => ne(!0));
@@ -885,117 +886,117 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
         r.end
       );
     }).finally(() => {
-      _e(!0), s(T.TRENDS_LOAD_WIDGET, {
+      _e(!0), s(y.TRENDS_LOAD_WIDGET, {
         ...A,
         time_period: `${pe(r.end, r.start)}M`
       });
     });
   }, [D, w, r]), i.useEffect(() => {
-    if (d.length !== 0) {
+    if (u.length !== 0) {
       const x = {
-        accounts: E,
+        accounts: I,
         dateRange: { start: r.start, end: r.end }
       };
-      b({
+      T({
         ...x,
-        custom: (V) => !!d.find(
+        custom: (V) => !!u.find(
           (U) => U.top_level_category_guid === V.top_level_category_guid || U.category_guid === V.category_guid
         )
       });
     }
-  }, [d]);
-  const Fe = (x) => {
+  }, [u]);
+  const Pe = (x) => {
     m(x), se(!0);
-  }, Pe = () => {
-    m(null), se(!1);
   }, Ke = () => {
-    ae(!0), s(T.TRENDS_CLICK_CONNECT_ACCOUNTS);
-  }, $e = (x, V) => {
-    he(V ?? P), s(T.TRENDS_CLICK_TOGGLE_VIEW, {
+    m(null), se(!1);
+  }, $e = () => {
+    ae(!0), s(y.TRENDS_CLICK_CONNECT_ACCOUNTS);
+  }, je = (x, V) => {
+    he(V ?? P), s(y.TRENDS_CLICK_TOGGLE_VIEW, {
       ...A,
       toggleView: V
     });
-  }, je = (x) => {
-    const V = xe(x?.[0], 1), U = x?.[1], Ze = pe(U, V);
-    y({ start: V, end: U }), s(T.TRENDS_CLICK_TIME_WINDOW, {
+  }, Ye = (x) => {
+    const V = xe(x?.[0], 1), U = x?.[1], Qe = pe(U, V);
+    _({ start: V, end: U }), s(y.TRENDS_CLICK_TIME_WINDOW, {
       ...A,
-      time_period: Ze + "M"
+      time_period: Qe + "M"
     });
-  }, Ye = (x) => {
-    s(T.TRENDS_CLICK_FILTER, {
+  }, Ue = (x) => {
+    s(y.TRENDS_CLICK_FILTER, {
       ...A,
       filterValue: x
     });
-  }, Ue = (x) => {
+  }, Xe = (x) => {
     oe(x);
-  }, Xe = () => {
-    oe(""), s(T.TRENDS_CLICK_ALL_CATEGORIES, A);
+  }, Ze = () => {
+    oe(""), s(y.TRENDS_CLICK_ALL_CATEGORIES, A);
   };
   return !p || !de ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ C(
-    ke,
+    Ne,
     {
       accountOptions: c,
-      calendarActions: { onRangeChanged: je },
+      calendarActions: { onRangeChanged: Ye },
       dateRange: r,
       dateRangeVariant: l ? "timeframetabs" : "timeframebuttons",
-      onAccountsFilterClick: Ye,
+      onAccountsFilterClick: Ue,
       onBackClick: t,
       sx: n,
-      title: I.title,
+      title: E.title,
       children: [
         be && /* @__PURE__ */ e(
           Vt,
           {
-            header: I.zero_state_content_header,
+            header: E.zero_state_content_header,
             icon: "",
-            onClick: Ke,
-            primaryButton: I.empty_state_primary,
-            subText: I.empty_state_sub_text,
+            onClick: $e,
+            primaryButton: E.empty_state_primary,
+            subText: E.empty_state_sub_text,
             sx: { height: S },
-            variant: ze
+            variant: Fe
           }
         ),
         !be && /* @__PURE__ */ C(
-          _,
+          b,
           {
             sx: {
               px: l ? 0 : 48
             },
             children: [
               /* @__PURE__ */ C(
-                _,
+                b,
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
                   sx: { pb: l ? 12 : 24, pt: l ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
-                      Ge,
+                      Be,
                       {
                         selectedCategoryGuid: Y,
                         selectedDateRange: r
                       }
                     ),
-                    /* @__PURE__ */ e(Ve, { onTabChange: $e, selectedTab: P })
+                    /* @__PURE__ */ e(Ge, { onTabChange: je, selectedTab: P })
                   ]
                 }
               ),
-              /* @__PURE__ */ e(_, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(W, { flexGrow: 1, children: Y && /* @__PURE__ */ C(ge, { onClick: Xe, sx: { p: 0, pr: 5 }, children: [
+              /* @__PURE__ */ e(b, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(W, { flexGrow: 1, children: Y && /* @__PURE__ */ C(ge, { onClick: Ze, sx: { p: 0, pr: 5 }, children: [
                 /* @__PURE__ */ e(ie, { name: "arrow_back" }),
-                I.all_categories
+                E.all_categories
               ] }) }) }),
-              /* @__PURE__ */ C(_, { flexDirection: F ? "row" : "column", gap: F ? 48 : 16, children: [
-                P === "Chart" && /* @__PURE__ */ C(Qe, { children: [
+              /* @__PURE__ */ C(b, { flexDirection: F ? "row" : "column", gap: F ? 48 : 16, children: [
+                P === "Chart" && /* @__PURE__ */ C(qe, { children: [
                   /* @__PURE__ */ e(W, { sx: { width: F ? "68%" : "100%" }, children: /* @__PURE__ */ e(
                     ln,
                     {
                       availableHeight: S,
                       minHeight: 450,
                       selectedDateRange: r,
-                      totals: d
+                      totals: u
                     }
                   ) }),
-                  /* @__PURE__ */ C(_, { gap: 16, sx: { width: F ? "32%" : "100%" }, children: [
+                  /* @__PURE__ */ C(b, { gap: 16, sx: { width: F ? "32%" : "100%" }, children: [
                     z && j && Se.length > 0 && /* @__PURE__ */ e(
                       nn,
                       {
@@ -1007,23 +1008,23 @@ const Ve = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
                       en,
                       {
                         availableHeight: H,
-                        onCategoryClick: Fe
+                        onCategoryClick: Pe
                       }
                     )
                   ] })
                 ] }),
                 P === "Table" && /* @__PURE__ */ e(W, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
-                  Be,
+                  ze,
                   {
                     height: "unset",
-                    monthlyCategoryTotals: d,
-                    onClickRow: Ue,
+                    monthlyCategoryTotals: u,
+                    onClickRow: Xe,
                     selectedCategory: Y,
                     selectedDateRange: r
                   }
                 ) })
               ] }),
-              ue && /* @__PURE__ */ e(sn, { onClose: Pe })
+              ue && /* @__PURE__ */ e(sn, { onClose: Ke })
             ]
           }
         ),

package/package.json

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