@mx-cartographer/experiences 8.0.0-alpha.sms2 → 9.0.0-alpha.mega1

package/dist/trends/index.es.js

@@ -1,92 +1,96 @@
-import { jsxs as C, jsx as e, Fragment as dt } from "react/jsx-runtime";
-import c, { useRef as ut, useState as ht, useEffect as gt } from "react";
+import { jsxs as C, jsx as e, Fragment as _t } from "react/jsx-runtime";
+import u, { useRef as Tt, useState as bt, useEffect as St } from "react";
 import { observer as R } from "mobx-react-lite";
-import { CategoryIcon as ve, Text as z, Icon as Se, P as me, H3 as Pe, ChevronRightIcon as mt } from "@mxenabled/mxui";
-import W from "@mui/material/Box";
-import b from "@mui/material/Stack";
+import { CategoryIcon as we, Text as X, Icon as Te, P as fe, H3 as Ue, ChevronRightIcon as xt } from "@mxenabled/mxui";
+import A from "@mui/material/Box";
+import x from "@mui/material/Stack";
 import be from "@mui/material/Button";
-import { addSeconds as Fe } from "date-fns/addSeconds";
-import { differenceInCalendarMonths as Ae } from "date-fns/differenceInCalendarMonths";
-import { useTheme as we } from "@mui/material/styles";
-import { LineChart as pt } from "@mui/x-charts";
-import { u as J } from "../useScreenSize-B6JyS_Lj.mjs";
-import { u as ft } from "../useDimensions-27p2evRx.mjs";
-import Ct from "@mui/material/Card";
-import yt from "@mui/material/CardContent";
-import Re from "@mui/material/Divider";
-import We from "@mui/material/Grid";
-import { u as O, m as Y, g as P, b as fe, h as De, d as Le, w as Ce, q as ze, f as He, n as _t, a as Tt } from "../hooks-C41HAxM5.mjs";
-import { b as $e } from "../Localization-2MODESHW.mjs";
-import { C as xe } from "../CurrencyText-Dr0EZ7bp.mjs";
-import { useTheme as St, Card as bt, CardContent as xt, Box as vt, Stack as wt } from "@mui/material";
-import { f as Q, a as F } from "../Dialog-CDV0kKxj.mjs";
-import { a as Me, c as Dt } from "../Category-Ccoew_sA.mjs";
-import { f as oe, a as Lt } from "../NumberFormatting-DjTD0t3W.mjs";
-import { a as Et, g as It, L as Ke } from "../TrendsStore-_mRaFUdf.mjs";
-import { T as zn } from "../TrendsStore-_mRaFUdf.mjs";
-import { i as Mt, c as At, d as Rt, e as kt, f as Ht, h as Nt, g as je, b as Ye, j as Oe } from "../SpendingData-DPQ96k3x.mjs";
-import Wt from "@mui/material/ToggleButton";
-import Ot from "@mui/material/ToggleButtonGroup";
-import { DataGridPro as Gt } from "@mui/x-data-grid-pro";
-import { H as Ge } from "../HeaderCell-DjuifqHJ.mjs";
-import { T as V, b as Bt } from "../ViewMoreMicroCard-CH9E-jOx.mjs";
-import { A as w, W as Ue } from "../WidgetContainer-B1Jzb4XA.mjs";
-import { a as Xe, T as Ze } from "../TransactionDetails-Duv1X9ec.mjs";
-import { D as ke } from "../Drawer-Dqe5EqvA.mjs";
-import { L as pe } from "../Loader-BSWSYqvn.mjs";
-import { L as Ne } from "../LineChart-bc1D9xBE.mjs";
-import { M as Vt } from "../MiniWidgetContainer-D7MkHG15.mjs";
+import { addSeconds as Xe } from "date-fns/addSeconds";
+import { differenceInCalendarMonths as Se } from "date-fns/differenceInCalendarMonths";
+import wt from "numeral";
+import { useTheme as le } from "@mui/material/styles";
+import { useItemTooltip as vt, ChartsTooltipContainer as Dt } from "@mui/x-charts/ChartsTooltip";
+import { LineChart as Lt } from "@mui/x-charts/LineChart";
+import { u as q } from "../useScreenSize-B6JyS_Lj.mjs";
+import { u as It } from "../useDimensions-27p2evRx.mjs";
+import Ze from "@mui/material/Card";
+import Qe from "@mui/material/CardContent";
+import He from "@mui/material/Divider";
+import Be from "@mui/material/Grid";
+import { u as k, m as J, g as z, b as ye, h as ve, d as De, v as Ce, p as qe, f as We, a as Je } from "../hooks-fY_n74f7.mjs";
+import { b as et } from "../Localization-2MODESHW.mjs";
+import { C as xe } from "../CurrencyText-C-85TnUF.mjs";
+import { a as Re, b as Ve, c as Et } from "../Category-Ccoew_sA.mjs";
+import { f as Q, D as B } from "../Dialog-CWymUiuO.mjs";
+import { f as oe, a as Mt } from "../NumberFormatting-DjTD0t3W.mjs";
+import { a as Fe, c as At, g as Rt, L as tt } from "../TrendsStore-BdsYfCc7.mjs";
+import { T as Zn } from "../TrendsStore-BdsYfCc7.mjs";
+import { c as kt, i as Ht, d as Nt, e as Wt, g as ot, b as nt, f as Pe } from "../SpendingData-B7NuTQ9s.mjs";
+import Ot from "@mui/material/ToggleButton";
+import Gt from "@mui/material/ToggleButtonGroup";
+import { DataGridPro as Bt } from "@mui/x-data-grid-pro";
+import { T as G, a as Vt } from "../ViewMoreMicroCard-CDWR16_h.mjs";
+import { parseISO as st } from "date-fns/parseISO";
+import { H as ke } from "../HeaderCell-DjuifqHJ.mjs";
+import { A as v, W as rt } from "../WidgetContainer-mzejMmz2.mjs";
+import { a as at, T as it } from "../TransactionDetails-CPwv9xtZ.mjs";
+import { D as Ne } from "../Drawer-Bet2ZPJo.mjs";
+import { L as Le } from "../Loader-BSWSYqvn.mjs";
+import { u as Ie } from "../useWidgetLoadTimer-CrUzxN-P.mjs";
+import { L as Oe } from "../LineChart-DHj-Bufi.mjs";
+import { M as Ft } from "../MiniWidgetContainer-DKn7ndO6.mjs";
 import { subMonths as Pt } from "date-fns";
-import { TrendingUp as Ft, TrendingDown as zt, MultilineChart as $t, ExpandLess as Kt, ExpandMore as jt } from "@mxenabled/mx-icons";
-import { M as Yt } from "../MicroWidgetContainer-BGpNl5ZS.mjs";
-import Ut from "@mui/material/Collapse";
-import Xt from "@mui/material/List";
-import Zt from "@mui/material/ListItem";
+import { TrendingUp as zt, TrendingDown as $t, MultilineChart as Kt, ExpandLess as Yt, ExpandMore as jt } from "@mxenabled/mx-icons";
+import { M as Ut } from "../MicroWidgetContainer-DSyYwRCU.mjs";
+import Xt from "@mui/material/Collapse";
+import Zt from "@mui/material/List";
+import Qt from "@mui/material/ListItem";
 import qt from "@mui/material/ListItemButton";
-import Qt from "@mui/material/ListItemIcon";
-import Jt from "@mui/material/ListItemText";
-import qe from "@mui/material/styles/useTheme";
-import eo from "@mui/material/Paper";
-import { b as to } from "../CategoryUtil-DfVKKkRf.mjs";
-import { E as oo } from "../ExportCsvAction-CQ1grpwo.mjs";
-import { u as no } from "../useInsightsEnabled-CNjP5cfR.mjs";
-import { E as so } from "../EmptyState-DoxNUae-.mjs";
-import { l as ao } from "../ConnectDrawer-Dn1MlqLz.mjs";
-const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
-  const { categories: t } = O(), { getCategoryName: n } = Y(), s = n(o);
-  return /* @__PURE__ */ C(b, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
+import Jt from "@mui/material/ListItemIcon";
+import eo from "@mui/material/ListItemText";
+import ct from "@mui/material/styles/useTheme";
+import { Stack as to } from "@mui/material";
+import oo from "@mui/material/Paper";
+import { b as no } from "../CategoryUtil-CFHBvaV4.mjs";
+import { E as so } from "../ExportCsvAction-oG_Mn66T.mjs";
+import { u as ro } from "../useInsightsEnabled-dhmXeSyF.mjs";
+import { E as ao } from "../EmptyState-DoxNUae-.mjs";
+import { b as io } from "../GlobalAccountFilter-BpWlPAl5.mjs";
+const lt = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
+  const { categories: n } = k(), { getCategoryName: t } = J(), r = t(o);
+  return /* @__PURE__ */ C(x, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
     /* @__PURE__ */ e(
-      W,
+      A,
       {
-        "aria-label": $e(t.category_icon_label_aria, s),
+        "aria-label": et(n.category_icon_label_aria, r),
         mb: 4,
         role: "img",
-        children: /* @__PURE__ */ e(ve, { categoryGuid: a })
+        children: /* @__PURE__ */ e(we, { categoryGuid: s })
       }
     ),
-    /* @__PURE__ */ e(z, { variant: "Body", children: s })
+    /* @__PURE__ */ e(X, { variant: "Body", children: r })
   ] });
-}, ro = ({
-  categoryGuids: { guid: o, topLevelGuid: a },
-  hoveredAreaData: t,
-  cursorPosition: n,
-  chartContainerRef: s
+}, co = ({
+  categoryGuids: { guid: o, topLevelGuid: s },
+  hoveredAreaData: n,
+  cursorPosition: t,
+  chartContainerRef: r
 }) => {
-  const l = we(), m = ut(null), [h, i] = ht({ x: n.x, y: n.y });
-  if (gt(() => {
+  const i = le(), d = Tt(null), [h, c] = bt({ x: t.x, y: t.y });
+  if (St(() => {
     (() => {
-      const p = m.current, _ = s.current;
-      if (!p || !_) return;
-      const u = p.getBoundingClientRect(), y = _.getBoundingClientRect();
-      let S = n.x, g = n.y;
-      S + u.width * 2 > y.right ? S = n.x - u.width : S - u.width < y.left && (S = n.x), g + u.height * 2 > y.bottom && (g = n.y - u.height), i({ x: S, y: g });
+      const m = d.current, _ = r.current;
+      if (!m || !_) return;
+      const f = m.getBoundingClientRect(), g = _.getBoundingClientRect();
+      let y = t.x, w = t.y;
+      y + f.width * 2 > g.right ? y = t.x - f.width : y - f.width < g.left && (y = t.x), w + f.height * 2 > g.bottom && (w = t.y - f.height), c({ x: y, y: w });
     })();
-  }, [n, s]), !t) return null;
-  const d = t.reduce((f, p) => f + p.y, 0);
+  }, [t, r]), !n) return null;
+  const l = n.reduce((p, m) => p + m.y, 0);
   return /* @__PURE__ */ e(
-    Ct,
+    Ze,
     {
-      ref: m,
+      ref: d,
       sx: {
         position: "absolute",
         top: h.y,
@@ -94,69 +98,57 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
         width: 250,
         pointerEvents: "none"
       },
-      children: /* @__PURE__ */ C(yt, { children: [
-        /* @__PURE__ */ C(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-          /* @__PURE__ */ e(Qe, { categoryGuid: o, topLevelCategoryGuid: a }),
-          /* @__PURE__ */ e(z, { variant: "Small", children: `${t.length}-month total` }),
-          /* @__PURE__ */ e(xe, { amount: d, bold: !0, formatString: "0,0", variant: "body2" })
+      children: /* @__PURE__ */ C(Qe, { children: [
+        /* @__PURE__ */ C(A, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+          /* @__PURE__ */ e(lt, { categoryGuid: o, topLevelCategoryGuid: s }),
+          /* @__PURE__ */ e(X, { variant: "Small", children: `${n.length}-month total` }),
+          /* @__PURE__ */ e(xe, { amount: l, bold: !0, formatString: "0,0", variant: "body2" })
         ] }),
-        /* @__PURE__ */ e(Re, { sx: { my: 16, width: "100%" } }),
-        /* @__PURE__ */ e(We, { container: !0, children: t.map((f, p) => /* @__PURE__ */ C(c.Fragment, { children: [
-          p > 0 && p % 3 === 0 && /* @__PURE__ */ e(Re, { sx: { my: 16, width: "100%" } }),
-          /* @__PURE__ */ e(We, { item: !0, xs: 4, children: /* @__PURE__ */ C(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-            /* @__PURE__ */ e(z, { color: l.palette.text.secondary, variant: "XSmall", children: f.x }),
+        /* @__PURE__ */ e(He, { sx: { my: 16, width: "100%" } }),
+        /* @__PURE__ */ e(Be, { container: !0, children: n.map((p, m) => /* @__PURE__ */ C(u.Fragment, { children: [
+          m > 0 && m % 3 === 0 && /* @__PURE__ */ e(He, { sx: { my: 16, width: "100%" } }),
+          /* @__PURE__ */ e(Be, { item: !0, xs: 4, children: /* @__PURE__ */ C(A, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+            /* @__PURE__ */ e(X, { color: i.palette.text.secondary, variant: "XSmall", children: p.x }),
             /* @__PURE__ */ e(
               xe,
               {
-                amount: f.y,
+                amount: p.y,
                 bold: !0,
                 formatString: "0,0",
                 variant: "Body"
               }
             )
           ] }) })
-        ] }, p)) })
+        ] }, m)) })
       ] })
     }
   );
-}, io = R(ro), co = ({
-  categoryGuids: { guid: o, topLevelGuid: a },
-  itemData: { dataIndex: t },
-  series: n,
-  xData: s
-}) => {
-  const l = St(), m = n.data[t], h = s[t];
-  return m === void 0 || !h ? null : /* @__PURE__ */ e(bt, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(xt, { children: /* @__PURE__ */ C(vt, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-    /* @__PURE__ */ e(Qe, { categoryGuid: o, topLevelCategoryGuid: a }),
-    /* @__PURE__ */ e(z, { color: l.palette.text.secondary, variant: "Small", children: Q(h, F.MONTH_SHORT_YEAR) }),
-    /* @__PURE__ */ e(xe, { amount: String(m), bold: !0, formatString: "0,0", variant: "Body" })
-  ] }) }) });
-}, lo = ({
+}, lo = R(co), uo = ({
   sx: o,
-  categoryGuids: a,
-  hoveredLegend: t,
-  legendRef: n,
-  onHoverLegend: s,
-  onClickLegend: l
+  categoryGuids: s,
+  hoveredLegend: n,
+  legendRef: t,
+  onHoverLegend: r,
+  onClickLegend: i
 }) => {
-  const { isMobile: m } = J(), { getCategoryName: h } = Y();
+  const { isMobile: d } = q(), { getCategoryName: h } = J();
   return /* @__PURE__ */ e(
-    b,
+    x,
     {
       direction: "row",
       flexWrap: "wrap",
-      gap: m ? 2 : 6,
+      gap: d ? 2 : 6,
       justifyContent: "start",
-      ref: n,
+      ref: t,
       sx: o,
-      children: a.map(({ guid: i, top_level_guid: d }) => {
-        const f = t === i, p = Me[i], _ = Me[d], u = p ?? _ ?? Me.default, y = u + "33";
+      children: s.map(({ guid: c, top_level_guid: l }) => {
+        const p = n === c, m = Re[c], _ = Re[l], f = m ?? _ ?? Re.default, g = f + "33";
         return /* @__PURE__ */ C(
           be,
           {
-            onClick: () => l(i),
-            onMouseEnter: () => s(i),
-            onMouseLeave: () => s(null),
+            onClick: () => i(c),
+            onMouseEnter: () => r(c),
+            onMouseLeave: () => r(null),
             sx: {
               color: "text.primary",
               fontWeight: "normal",
@@ -166,134 +158,151 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
               paddingX: 8,
               paddingY: 4,
               borderRadius: 1,
-              opacity: f ? 1 : 0.7
+              opacity: p ? 1 : 0.7
             },
             children: [
               /* @__PURE__ */ e(
-                W,
+                A,
                 {
                   sx: {
                     width: 16,
                     height: 16,
-                    marginRight: m ? 5 : 10,
+                    marginRight: d ? 5 : 10,
                     borderRadius: "2px",
-                    backgroundColor: t ? f ? u : y : u
+                    backgroundColor: n ? p ? f : g : f
                   }
                 }
               ),
-              /* @__PURE__ */ e(z, { variant: "Body", children: h(i) })
+              /* @__PURE__ */ e(X, { variant: "Body", children: h(c) })
             ]
           },
-          i
+          c
         );
       })
     }
   );
-}, uo = ({
+}, ho = ({
+  categoryGuids: { guid: o, topLevelGuid: s },
+  series: n,
+  xData: t
+}) => {
+  const r = vt(), i = le();
+  if (!r?.identifier) return null;
+  const { dataIndex: d, seriesId: h } = r.identifier;
+  if (d == null || !h) return null;
+  const l = n.find((m) => m.id === h)?.data?.[d], p = t?.[d];
+  return l === void 0 || !p ? null : /* @__PURE__ */ e(Ze, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(Qe, { children: /* @__PURE__ */ C(A, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+    /* @__PURE__ */ e(lt, { categoryGuid: o, topLevelCategoryGuid: s }),
+    /* @__PURE__ */ e(X, { color: i.palette.text.secondary, variant: "Small", children: Q(p, B.MONTH_SHORT_YEAR) }),
+    /* @__PURE__ */ e(xe, { amount: String(l), bold: !0, formatString: "0,0", variant: "Body" })
+  ] }) }) });
+}, go = ({
   onHoverArea: o,
-  onHoverPoint: a,
-  onHoverLegend: t,
-  onClickLegend: n,
-  stackedDatasets: s,
-  unstackedDatasets: l = [],
-  availableHeight: m = 0,
+  onHoverPoint: s,
+  onHoverLegend: n,
+  onClickLegend: t,
+  stackedDatasets: r,
+  unstackedDatasets: i = [],
+  availableHeight: d = 0,
   minimumHeight: h = 350
 }) => {
-  const i = we(), { isMobile: d } = J(), [f, { height: p }] = ft(), _ = c.useRef(null), [u, y] = c.useState(0);
-  c.useEffect(() => {
-    const r = Math.max(m - p, h);
-    y(r);
-  }, [m, p]);
-  const [S, g] = c.useState(null), [v, E] = c.useState({
+  const c = le(), { isMobile: l } = q(), [p, { height: m }] = It(), _ = u.useRef(null), [f, g] = u.useState(0);
+  u.useEffect(() => {
+    const a = Math.max(d - m, h);
+    g(a);
+  }, [d, m]);
+  const [y, w] = u.useState(null), [b, M] = u.useState({
     hoveredSeriesId: null,
     hoveredAreaData: null,
     isAreaHovered: !1,
     cursorPos: { x: 0, y: 0 }
-  }), { hoveredSeriesId: I, hoveredAreaData: x, isAreaHovered: M, cursorPos: k } = v, A = M && I && x, G = !A, ee = [...s, ...l], ne = ee[0]?.dataset.length ?? 0, H = ee.flatMap((r) => r.dataset.map((T) => T.x)), ue = ee.flatMap((r) => r.dataset.map((T) => T.y)), B = s[0]?.dataset?.map(
-    (r, T) => s.reduce((L, j) => L + j.dataset[T]?.y || 0, 0)
-  ) ?? [0], se = Math.max(...B), ae = Math.max(
-    ...l.flatMap((r) => r.dataset.map((T) => T.y))
-  ), $ = Math.floor(Math.min(...ue) / 100) * 100, ye = Math.ceil(Math.max(se, ae) / 100) * 100, U = s.map((r, T) => ({
+  }), { hoveredSeriesId: I, hoveredAreaData: S, isAreaHovered: H, cursorPos: N } = b, $ = H && I && S, V = !$, K = [...r, ...i], E = K[0]?.dataset.length ?? 0, te = K.flatMap((a) => a.dataset.map((T) => T.x)), O = K.flatMap((a) => a.dataset.map((T) => T.y)), ne = r[0]?.dataset?.map(
+    (a, T) => r.reduce((L, U) => L + U.dataset[T]?.y || 0, 0)
+  ) ?? [0], se = Math.max(...ne), Z = Math.max(
+    ...i.flatMap((a) => a.dataset.map((T) => T.y))
+  ), de = Math.floor(Math.min(...O) / 100) * 100, ue = Math.ceil(Math.max(se, Z) / 100) * 100, F = r.map((a, T) => ({
     id: `stacked-${T}`,
-    guid: r.category_guid,
-    top_level_guid: r.top_level_category_guid,
+    guid: a.category_guid,
+    top_level_guid: a.top_level_category_guid,
     area: !0,
-    color: s[T].category_color ?? i.palette.primary.main,
-    data: r.dataset.map((L) => L.y),
-    label: s[T].category_name,
+    color: r[T].category_color ?? c.palette.primary.main,
+    data: a.dataset.map((L) => L.y),
+    label: r[T].category_name,
     stack: "total",
     type: "line",
     highlightScope: { highlight: "item" },
     valueFormatter: (L) => oe(L, "0,0")
-  })), K = l.map((r, T) => ({
+  })), re = i.map((a, T) => ({
     id: `unstacked-${T}`,
-    guid: r.category_guid,
-    top_level_guid: r.top_level_category_guid,
+    guid: a.category_guid,
+    top_level_guid: a.top_level_category_guid,
     area: !1,
-    color: r.category_color,
-    data: r.dataset.map((L) => L.y),
-    label: r.category_name,
+    color: a.category_color,
+    data: a.dataset.map((L) => L.y),
+    label: a.category_name,
     type: "line",
     valueFormatter: (L) => oe(L, "0,0")
-  })), re = [...U, ...K], X = [
-    ...U.map(({ guid: r, top_level_guid: T }) => ({
-      guid: r,
+  })), Y = [...F, ...re], he = [
+    ...F.map(({ guid: a, top_level_guid: T }) => ({
+      guid: a,
       top_level_guid: T
     })),
-    ...K.map(({ guid: r, top_level_guid: T }) => ({
-      guid: r,
+    ...re.map(({ guid: a, top_level_guid: T }) => ({
+      guid: a,
       top_level_guid: T
     }))
-  ], Z = (r) => {
-    const L = r.startsWith("stacked-") ? s[parseInt(r.split("-")[1])] : l[parseInt(r.split("-")[1])];
+  ], j = (a) => {
+    const L = a.startsWith("stacked-") ? r[parseInt(a.split("-")[1])] : i[parseInt(a.split("-")[1])];
     return {
       guid: L?.category_guid,
       topLevelGuid: L?.top_level_category_guid
     };
-  }, te = (r) => {
-    g(r), t?.(r ?? "");
-  }, ie = (r) => {
-    n?.(r ?? "");
-  }, he = () => {
-    const r = Z(String(I)).guid;
-    r && n?.(r);
-  }, ce = (r) => {
-    const T = String(r?.seriesId), L = Z(T).guid, j = re.find((de) => de.id === T), _e = j && r?.dataIndex !== void 0, Ee = j && r?.dataIndex === void 0;
-    if (_e)
-      E({
+  }, ae = (a) => {
+    w(a), n?.(a ?? "");
+  }, ge = (a) => {
+    t?.(a ?? "");
+  }, ie = () => {
+    const a = j(String(I)).guid;
+    a && t?.(a);
+  }, ce = (a) => {
+    const T = String(a?.seriesId), L = j(T).guid, U = Y.find((me) => me.id === T), Ee = U && a?.dataIndex !== void 0, _e = U && a?.dataIndex === void 0;
+    if (Ee)
+      M({
         hoveredSeriesId: T,
         hoveredAreaData: null,
         isAreaHovered: !1,
-        cursorPos: k
-      }), a?.(L);
-    else if (Ee) {
-      const de = j?.data.map((Te, Ie) => ({
-        x: H[Ie],
-        y: Te
+        cursorPos: N
+      }), s?.(L);
+    else if (_e) {
+      const me = U?.data.map((Me, Ae) => ({
+        x: te[Ae],
+        y: Me
       })) ?? [];
-      E({
+      M({
         hoveredSeriesId: T,
-        hoveredAreaData: de,
+        hoveredAreaData: me,
         isAreaHovered: !0,
-        cursorPos: k
+        cursorPos: N
       }), o?.(L);
     } else
-      E({
+      M({
         hoveredSeriesId: null,
         hoveredAreaData: null,
         isAreaHovered: !1,
-        cursorPos: k
+        cursorPos: N
       });
-  }, le = (r) => {
-    const T = r.currentTarget.getBoundingClientRect();
-    E((L) => ({
+  }, D = (a) => {
+    if (a.target instanceof Element && a.target.classList[0]?.includes("MuiMarkElement-root"))
+      return;
+    const T = a.currentTarget.getBoundingClientRect();
+    M((L) => ({
       ...L,
       cursorPos: {
-        x: r.clientX - T.left,
-        y: r.clientY - T.top
+        x: a.clientX - T.left,
+        y: a.clientY - T.top
       }
     }));
-  }, D = {
+  }, P = {
     p: 4,
     "& .MuiBarLabel-root": {
       fontSize: 10,
@@ -309,17 +318,17 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
     '& [class*="MuiLineElement-series-unstacked-"]': {
       strokeWidth: 3
     },
-    ...S && U.reduce((r, T, L) => {
-      const j = `.MuiAreaElement-series-stacked-${L}`;
-      return r[j] = {
-        opacity: U[L].guid === S ? 0.9 : 0.2
-      }, r;
+    ...y && F.reduce((a, T, L) => {
+      const U = `.MuiAreaElement-series-stacked-${L}`;
+      return a[U] = {
+        opacity: F[L].guid === y ? 0.9 : 0.2
+      }, a;
     }, {})
   };
   return /* @__PURE__ */ e(
-    W,
+    A,
     {
-      onMouseMove: le,
+      onMouseMove: D,
       ref: _,
       sx: {
         position: "relative",
@@ -333,77 +342,75 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
         }
       },
       children: /* @__PURE__ */ C(
-        b,
+        x,
         {
           direction: { xs: "column", md: "column" },
           spacing: { xs: 0, md: 4 },
           sx: { width: "100%", position: "relative" },
           children: [
             /* @__PURE__ */ e(
-              pt,
+              Lt,
               {
-                height: u,
-                margin: { bottom: 50 },
-                onAreaClick: he,
+                height: f,
+                hideLegend: !0,
+                margin: { bottom: 24, left: 12, right: 54, top: 48 },
+                onAreaClick: ie,
                 onHighlightChange: ce,
-                series: re,
+                series: Y,
                 skipAnimation: !0,
                 slotProps: {
-                  legend: {
-                    hidden: !0
-                  }
+                  tooltip: { trigger: V ? "item" : "none" }
                 },
                 slots: {
-                  itemContent: (r) => G && I ? /* @__PURE__ */ e(
-                    co,
+                  tooltip: V && I ? (a) => /* @__PURE__ */ e(Dt, { children: /* @__PURE__ */ e(
+                    ho,
                     {
-                      categoryGuids: Z(I),
-                      xData: H,
-                      ...r
+                      ...a,
+                      categoryGuids: j(I),
+                      series: Y,
+                      xData: te
                     }
-                  ) : null
-                },
-                sx: D,
-                tooltip: {
-                  trigger: G ? "item" : "none"
+                  ) }) : void 0
                 },
+                sx: P,
                 xAxis: [
                   {
-                    data: H,
+                    data: te,
                     scaleType: "time",
-                    valueFormatter: (r) => Q(r, F.MONTH_SHORT_YEAR),
-                    tickNumber: ne
+                    valueFormatter: (a) => Q(a, B.MONTH_SHORT_YEAR),
+                    tickNumber: E
                     // How many ticks to show on the x-axis
                   }
                 ],
                 yAxis: [
                   {
-                    min: $,
-                    max: ye || 100
+                    min: de,
+                    max: ue || 100,
+                    valueFormatter: (a) => wt(a).format("0a")
                   }
                 ]
               }
             ),
             /* @__PURE__ */ e(
-              lo,
+              uo,
               {
-                categoryGuids: X,
-                hoveredLegend: S,
-                legendRef: f,
-                onClickLegend: ie,
-                onHoverLegend: te,
-                sx: { px: d ? 0 : 24 }
+                categoryGuids: he,
+                hoveredLegend: y,
+                legendRef: p,
+                onClickLegend: ge,
+                onHoverLegend: ae,
+                sx: { px: l ? 0 : 24 }
               }
             ),
-            A && /* @__PURE__ */ e(
-              io,
+            $ && /* @__PURE__ */ e(
+              lo,
               {
-                categoryGuids: Z(I),
+                categoryGuids: j(I),
                 chartContainerRef: _,
-                cursorPosition: k,
-                hoveredAreaData: x.map((r) => ({
-                  ...r,
-                  x: Q(r.x, F.MONTH_SHORT_YEAR)
+                cursorPosition: N,
+                hoveredAreaData: S.map((a) => ({
+                  ...a,
+                  x: Q(a.x, B.MONTH_SHORT_YEAR)
                 }))
               }
             )
@@ -412,29 +419,47 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       )
     }
   );
-}, Je = ({ selectedTab: o, onTabChange: a }) => /* @__PURE__ */ e(
-  Ot,
-  {
-    exclusive: !0,
-    onChange: a,
-    orientation: "horizontal",
-    value: o,
-    children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(Wt, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(Se, { name: "table_chart_view" }) : /* @__PURE__ */ e(Se, { name: "format_list_bulleted" }) }, t))
-  }
-), et = ({ selectedDateRange: o, selectedCategoryGuid: a }) => {
-  const { trends: t } = O(), { isMobile: n, isDesktop: s } = J(), { getCategoryName: l } = Y(), m = c.useMemo(() => {
-    const h = Q(
+}, dt = ({ selectedTab: o, onTabChange: s }) => {
+  const { common: n } = k();
+  return /* @__PURE__ */ e(
+    Gt,
+    {
+      "aria-label": n.view_toggle,
+      exclusive: !0,
+      onChange: s,
+      orientation: "horizontal",
+      value: o,
+      children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(
+        Ot,
+        {
+          "aria-label": t === "Chart" ? n.view_chart : n.view_table,
+          "aria-pressed": o === t,
+          color: "primary",
+          sx: { width: 56 },
+          value: t,
+          children: t === "Chart" ? /* @__PURE__ */ e(Te, { name: "table_chart_view" }) : /* @__PURE__ */ e(Te, { name: "format_list_bulleted" })
+        },
+        t
+      ))
+    }
+  );
+}, ut = ({ selectedDateRange: o, selectedCategoryGuid: s }) => {
+  const { trends: n } = k(), { isMobile: t, isDesktop: r } = q(), { getCategoryName: i } = J(), d = u.useMemo(() => {
+    const l = o.start.getFullYear() === o.end.getFullYear() ? Q(
+      o.start,
+      t ? B.MONTH_SHORT : B.MONTH_LONG
+    ) : Q(
       o.start,
-      n ? F.MONTH_SHORT_YEAR : F.MONTH_YEAR
-    ), i = Q(
+      t ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
+    ), p = Q(
       o.end,
-      n ? F.MONTH_SHORT_YEAR : F.MONTH_YEAR
+      t ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
     );
-    return `${h} - ${i}`;
-  }, [o, n]);
-  return /* @__PURE__ */ C(W, { sx: { mr: 10, minWidth: "60%" }, children: [
+    return `${l} - ${p}`;
+  }, [o, t]), c = i(s) || (t ? n.sub_title : n.sub_title_by_category);
+  return /* @__PURE__ */ C(A, { children: [
     /* @__PURE__ */ e(
-      z,
+      X,
       {
         display: "block",
         fontWeight: 700,
@@ -443,282 +468,328 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
           overflow: "visible",
           textOverflow: "unset"
         },
-        variant: s ? "H3" : "Body",
-        children: l(a) || t.sub_title
-      }
-    ),
-    /* @__PURE__ */ e(z, { variant: s ? "Body" : "Small", children: m })
-  ] });
-}, ho = (o) => {
-  const a = o.row[o.field];
-  return /* @__PURE__ */ e(b, { alignItems: "flex-end", tabIndex: o.tabIndex, children: /* @__PURE__ */ e(xe, { amount: a, variant: "Small" }) });
-}, go = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
-  const { getCategoryName: t } = Y(), { categories: n } = O(), s = n.default_categories[o]?.replace(/&amp;/g, "&") ?? t(o);
-  return /* @__PURE__ */ C(b, { alignItems: "center", direction: "row", justifyContent: "center", children: [
-    /* @__PURE__ */ e(
-      W,
-      {
-        "aria-label": $e(n.category_icon_label_aria, s),
-        role: "img",
-        children: /* @__PURE__ */ e(ve, { categoryGuid: a })
+        variant: r ? "H3" : "Body",
+        children: c
       }
     ),
-    /* @__PURE__ */ e(z, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
+    /* @__PURE__ */ e(X, { variant: r ? "subtitle1" : "body2", children: d })
   ] });
-}, mo = (o) => /* @__PURE__ */ e(b, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
-  go,
+}, mo = ({ name: o, topLevelCategoryGuid: s }) => /* @__PURE__ */ C(x, { alignItems: "center", direction: "row", justifyContent: "center", children: [
+  /* @__PURE__ */ e(A, { "aria-hidden": !0, children: /* @__PURE__ */ e(we, { categoryGuid: s, variant: "twotone" }) }),
+  /* @__PURE__ */ e(X, { sx: { ml: 12 }, variant: "body2", children: o })
+] }), po = (o) => /* @__PURE__ */ e(x, { alignItems: "center", direction: "row", role: "rowheader", tabIndex: o.tabIndex, children: /* @__PURE__ */ e(
+  mo,
   {
-    categoryGuid: o.row.category,
+    name: o.row.category,
     topLevelCategoryGuid: o.row.top_level_category_guid
   }
-) }), po = (o, a) => {
-  const t = [], n = new Date(o);
-  for (; n <= a; ) {
-    const s = Q(n, F.MONTH);
-    t.push(s), n.setMonth(n.getMonth() + 1);
+) }), ze = (o) => {
+  const s = o.row.category_guid, n = o.row.top_level_category_guid, t = s === Ve.INCOME || n === Ve.INCOME, r = o.row[o.field];
+  return /* @__PURE__ */ e(x, { alignItems: "flex-end", direction: "row", tabIndex: o.tabIndex, children: /* @__PURE__ */ e(
+    xe,
+    {
+      amount: t ? Math.abs(r) : r,
+      isIncome: t,
+      sx: { fontWeight: t ? 600 : 500 },
+      symbol: t ? "+" : void 0,
+      variant: "body2"
+    }
+  ) });
+}, $e = (o, s) => {
+  const n = Q(st(s.isoDate), B.MONTH_LONG);
+  return o[n] = s.amount, o;
+}, Ke = (o) => (s, n) => {
+  const t = Q(st(n.isoDate), B.MONTH_LONG);
+  return s + (o.includes(t) ? n.amount : 0);
+}, fo = (o, s) => {
+  const n = [], t = new Date(o);
+  for (; t <= s; ) {
+    const r = Q(t, B.MONTH_LONG);
+    n.push(r), t.setMonth(t.getMonth() + 1);
+  }
+  return n;
+}, yo = (o, s) => {
+  const n = {
+    field: "category",
+    flex: 1,
+    headerClassName: "trends-table-header",
+    headerName: s.category_title,
+    minWidth: 210,
+    renderHeader: ke,
+    renderCell: po,
+    sortable: !0,
+    sortComparator: At,
+    type: "string"
+  }, t = o.map((i) => ({
+    field: i,
+    flex: 1,
+    headerClassName: "trends-table-header",
+    headerName: i,
+    minWidth: 100,
+    renderHeader: ke,
+    renderCell: ze,
+    align: "right",
+    headerAlign: "right",
+    sortable: !0,
+    hideSortIcons: !1,
+    type: "number",
+    sortComparator: Fe
+  })), r = {
+    field: "total",
+    flex: 1,
+    headerClassName: "trends-table-header",
+    headerName: s.table_column_total,
+    minWidth: 100,
+    renderHeader: ke,
+    renderCell: ze,
+    align: "right",
+    headerAlign: "right",
+    sortable: !0,
+    hideSortIcons: !1,
+    type: "number",
+    sortComparator: Fe
+  };
+  return [n, ...t, r];
+}, Co = (o, s, n, t) => {
+  const r = o.map((i) => {
+    let d = i.totalMonthlyAmounts;
+    return t && (d = i.monthlyAmounts), {
+      id: i.guid,
+      category: i.name,
+      category_guid: i.guid,
+      isParent: !1,
+      top_level_category_guid: i.parent_guid || i.guid,
+      total: d.reduce(Ke(n), 0),
+      ...d.reduce($e, {})
+    };
+  });
+  if (t) {
+    const i = t.monthlyAmounts.reduce(Ke(n), 0);
+    i !== 0 && r.push({
+      id: `sub-${t.guid}`,
+      category: et(s.category_general, t.name),
+      category_guid: t.guid,
+      isParent: !0,
+      top_level_category_guid: t.guid,
+      total: i,
+      ...t.monthlyAmounts.reduce($e, {})
+    });
   }
-  return t;
-}, tt = ({
-  monthlyCategoryTotals: o,
-  selectedDateRange: a,
-  selectedCategory: t,
+  return r;
+}, ht = ({
+  selectedDateRange: o,
+  selectedCategory: s,
   onClickRow: n,
-  height: s = "100dvh",
-  sx: l = {}
+  height: t = "100%",
+  sx: r = {}
 }) => {
-  const { onEvent: m } = P(), h = Q(/* @__PURE__ */ new Date(), F.MONTH_SHORT), [i, d] = c.useState([
-    { field: h, sort: "desc" }
-  ]), f = c.useMemo(() => po(a.start, a.end), [a]), p = [
-    {
-      field: "category",
-      flex: 1,
-      headerName: "Category",
-      minWidth: 175,
-      renderHeader: Ge,
-      renderCell: mo,
-      sortable: !0,
-      type: "string"
-    },
-    ...f.map(
-      (u) => ({
-        field: u,
-        flex: 1,
-        headerName: u,
-        minWidth: 100,
-        renderHeader: Ge,
-        renderCell: ho,
-        align: "right",
-        headerAlign: "right",
-        sortable: !0,
-        hideSortIcons: !1,
-        type: "number",
-        sortComparator: Et
-      })
-    )
-  ], _ = c.useMemo(() => {
-    const u = o.filter(
-      (g) => !Mt(g) && !At(g)
-    ), S = (t ? u.filter(
-      (g) => g.category_guid === t || g.top_level_category_guid === t
-    ) : u).reduce(
-      (g, v) => {
-        const { category_guid: E, top_level_category_guid: I, month: x, total: M, year: k } = v, A = t ? E : I;
-        g[A] || (g[A] = {
-          id: A,
-          category: A,
-          category_guid: E,
-          top_level_category_guid: I
-        });
-        const G = Q(new Date(k, x - 1), F.MONTH_SHORT);
-        return g[A][G] || (g[A][G] = 0), g[A][G] = g[A][G] + Math.abs(M), g;
-      },
-      {}
-    );
-    return Object.values(S);
-  }, [o, t]);
-  return /* @__PURE__ */ e(W, { sx: { height: s, width: "100%", overflowX: "auto", boxShadow: "none", ...l }, children: /* @__PURE__ */ e(
-    Gt,
+  const i = le(), { onEvent: d } = z(), { trends: h } = k(), { trendsCategories: c } = J(), l = u.useMemo(() => fo(o.start, o.end), [o]), p = i.palette.mode === "light", m = u.useMemo(() => yo(l, h), [l, h]), _ = u.useMemo(() => {
+    if (s)
+      return c.find((g) => g.guid === s);
+  }, [s, c]), f = u.useMemo(() => {
+    let g = c;
+    return _ && (g = _.subCategories.filter(
+      (y) => y.monthlyAmounts.some((w) => w.amount !== 0)
+    )), Co(g, h, l, _);
+  }, [c, l, _, h]);
+  return /* @__PURE__ */ e(A, { sx: { height: t, width: "100%", overflowX: "auto", boxShadow: "none", ...r }, children: /* @__PURE__ */ e(
+    Bt,
     {
-      columns: p,
+      columns: m,
       disableColumnFilter: !0,
       disableColumnMenu: !0,
       hideFooter: !0,
-      initialState: { sorting: { sortModel: i } },
-      onRowClick: (u) => {
-        n?.(u.row.category), m(w.TRENDS_CLICK_LIST_ITEM, {
-          ...V,
-          listItem: Dt[u.row.category]
+      initialState: { sorting: { sortModel: [{ field: "category", sort: "asc" }] } },
+      onRowClick: (g) => {
+        _ || n?.(g.row.category_guid), d(v.TRENDS_CLICK_LIST_ITEM, {
+          ...G,
+          listItem: Et[g.row.category_guid]
         });
       },
-      onSortModelChange: (u) => {
-        d(u), m(w.TRENDS_CLICK_TABLE_SORT, V);
-      },
-      rows: _,
+      rowHeight: 64,
+      rows: f,
       slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
-      sortModel: i,
-      sortingOrder: ["asc", "desc"]
+      sortingOrder: ["asc", "desc"],
+      sx: {
+        borderColor: "divider",
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderRadius: 2,
+        "& .MuiDataGrid-columnHeaders": {
+          bgcolor: p ? "neutral.50" : "neutral.800",
+          borderBottom: "none"
+        },
+        "& .trends-table-header": {
+          bgcolor: p ? "neutral.50" : "neutral.800"
+        }
+      }
     }
   ) });
-}, fo = {
+}, _o = {
   title: "Transaction List"
-}, Co = ({
+}, To = ({
   categoryGuid: o,
-  dateRange: a,
-  isOpen: t,
-  onClose: n
+  dateRange: s,
+  isOpen: n,
+  onClose: t
 }) => {
-  const { onEvent: s } = P(), { selectedAccountGuids: l } = fe(), { common: m } = O(), { setFilter: h, sortedTransactions: i } = De(), [d, f] = c.useState(""), p = c.useMemo(
-    () => i.find((u) => u.guid === d),
-    [d, i]
+  const { onEvent: r } = z(), { selectedAccountGuids: i } = ye(), { common: d } = k(), { setFilter: h, sortedTransactions: c } = ve(), [l, p] = u.useState(""), m = u.useMemo(
+    () => c.find((f) => f.guid === l),
+    [l, c]
   );
-  c.useEffect(() => {
+  u.useEffect(() => {
     h({
-      accounts: l,
-      dateRange: a,
-      custom: (u) => o === "" || o === u.category_guid || o === u.top_level_category_guid,
+      accounts: i,
+      dateRange: s,
+      custom: (f) => o === "" || o === f.category_guid || o === f.top_level_category_guid,
       showSplits: !!o
     });
-  }, [l, o, a]), c.useEffect(() => s(w.TRENDS_VIEW_TRANSACTIONS), []);
+  }, [i, o, s]), u.useEffect(() => r(v.TRENDS_VIEW_TRANSACTIONS), []);
   const _ = () => {
-    f(""), n();
+    p(""), t();
   };
   return /* @__PURE__ */ C(
-    ke,
+    Ne,
     {
-      ariaLabelClose: m.close_aria,
-      isOpen: t,
+      ariaLabelClose: d.close_aria,
+      isOpen: n,
       onClose: _,
-      title: fo.title,
+      title: _o.title,
       children: [
-        p && /* @__PURE__ */ e(Xe, { transaction: p }),
-        !p && /* @__PURE__ */ e(Ze, { onClick: f })
+        m && /* @__PURE__ */ e(at, { transaction: m }),
+        !m && /* @__PURE__ */ e(it, { onClick: p })
       ]
     }
   );
-}, yo = R(Co), _o = ({ onBackClick: o, sx: a }) => {
-  const { onEvent: t } = P(), { isDesktop: n, isTablet: s, isMobile: l } = J(), { isAccountDataLoaded: m, loadAccountData: h, visibleAccounts: i } = Le(), {
-    categoriesLoaded: d,
-    loadCategories: f,
-    loadMonthlyCategoryTotals: p,
+}, bo = R(To), So = ({ onBackClick: o, sx: s }) => {
+  const { onEvent: n } = z(), { isDesktop: t, isTablet: r, isMobile: i } = q(), { isAccountDataLoaded: d, loadAccountData: h } = De(), {
+    categoriesLoaded: c,
+    loadCategories: l,
+    loadDateRangeCategoryTotals: p,
+    loadMonthlyCategoryTotals: m,
     monthlyCategoryTotals: _,
-    getCategoryName: u
-  } = Y(), {
-    isTransactionDataLoaded: y,
-    loadTransactionData: S,
-    sortedTransactions: g
-  } = De(), { selectedDateRange: v, setSelectedDateRange: E } = Ce(), { isInitialized: I, selectedAccounts: x, setSelectedAccounts: M } = fe(), { trends: k } = O(), [A, G] = c.useState(!1), [ee, ne] = c.useState(!1), [H, ue] = c.useState("Chart"), [B, se] = c.useState(""), [ae, $] = c.useState(window.innerHeight), U = ae - (l ? 315 : 345);
-  c.useEffect(() => {
-    const D = () => $(window.innerHeight);
-    return window.addEventListener("resize", D), m || h().finally(), d || f().finally(), y || S().finally(), () => window.removeEventListener("resize", D);
-  }, []), c.useEffect(() => {
-    M(i);
-  }, [i]), c.useEffect(() => {
-    I && p(
-      x,
-      v.start,
-      v.end
-    ).finally(() => {
-      G(!0);
+    getCategoryName: f
+  } = J(), {
+    isTransactionDataLoaded: g,
+    loadTransactionData: y,
+    sortedTransactions: w
+  } = ve(), { selectedDateRange: b, setSelectedDateRange: M } = Ce(), { isInitialized: I, selectedAccounts: S } = ye(), { trends: H } = k(), [N, $] = u.useState(!1), [V, K] = u.useState(!1), [E, te] = u.useState("Chart"), [O, ne] = u.useState(""), [se, Z] = u.useState(window.innerHeight), ue = se - (i ? 315 : 345);
+  Ie({
+    widgetName: "TrendsFullWidget",
+    isLoaded: N
+  }), u.useEffect(() => {
+    const D = () => Z(window.innerHeight);
+    return window.addEventListener("resize", D), d || h().finally(), c || l().finally(), g || y().finally(), () => window.removeEventListener("resize", D);
+  }, []), u.useEffect(() => {
+    I && p(S, b.start, b.end).then(() => {
+      m(
+        S,
+        b.start,
+        b.end
+      );
+    }).finally(() => {
+      $(!0), n(v.TRENDS_LOAD_WIDGET, {
+        ...G,
+        time_period: `${Se(b.end, b.start)}M`
+      });
     });
-  }, [I, x, v]);
-  const K = c.useMemo(() => {
-    if (!A) return { stackedDatasets: [], unstackedDatasets: [] };
-    const D = It(
+  }, [I, S, b]);
+  const F = u.useMemo(() => {
+    if (!N) return { stackedDatasets: [], unstackedDatasets: [] };
+    const D = Rt(
       _,
-      v.start,
-      v.end
-    ), r = B.length ? D.filter(
-      (T) => T.top_level_category_guid === B || T.category_guid === B
-    ) : Rt(D);
+      b.start,
+      b.end
+    ), P = O.length ? D.filter(
+      (a) => a.top_level_category_guid === O || a.category_guid === O
+    ) : kt(D);
     return {
-      stackedDatasets: r.filter(Ht),
-      unstackedDatasets: r.filter(kt)
+      stackedDatasets: P.filter(Nt),
+      unstackedDatasets: P.filter(Ht)
     };
-  }, [_, B, v]), re = (D, r) => {
-    ue(r ?? H), t(w.TRENDS_CLICK_TOGGLE_VIEW);
-  }, X = (D) => {
-    const r = Fe(D?.[0], 1), T = D?.[1], L = Ae(T, r);
-    E({ start: r, end: T }), t(w.TRENDS_CLICK_TIME_WINDOW, {
-      time_period: L + "M"
+  }, [_, O, b]), re = (D, P) => {
+    te(P ?? E), n(v.TRENDS_CLICK_TOGGLE_VIEW);
+  }, Y = (D) => {
+    const P = Xe(D?.[0], 1), a = D?.[1], T = Se(a, P);
+    M({ start: P, end: a }), n(v.TRENDS_CLICK_TIME_WINDOW, {
+      time_period: T + "M"
     });
-  }, Z = () => {
-    t(w.TRENDS_CLICK_FILTER);
-  }, te = (D) => {
-    se(D);
+  }, he = () => {
+    n(v.TRENDS_CLICK_FILTER);
+  }, j = (D) => {
+    ne(D);
+  }, ae = (D) => {
+    ne(D), n(v.TRENDS_CLICK_LEGEND, { category: f(D) });
+  }, ge = (D) => {
+    n(v.TRENDS_HOVER_LEGEND, { category: f(D) });
   }, ie = (D) => {
-    se(D), t(w.TRENDS_CLICK_LEGEND, { category: u(D) });
-  }, he = (D) => {
-    t(w.TRENDS_HOVER_LEGEND, { category: u(D) });
+    n(v.TRENDS_HOVER_AREA, { category: D });
   }, ce = (D) => {
-    t(w.TRENDS_HOVER_AREA, { category: D });
-  }, le = (D) => {
-    t(w.TRENDS_HOVER_POINT, { category: D });
+    n(v.TRENDS_HOVER_POINT, { category: D });
   };
-  return !I || !A ? /* @__PURE__ */ e(pe, {}) : /* @__PURE__ */ C(
-    Ue,
+  return !I || !N ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ C(
+    rt,
     {
-      accountOptions: i,
-      calendarActions: { onRangeChanged: X },
-      dateRange: v,
+      calendarActions: { onRangeChanged: Y },
+      dateRange: b,
       dateRangeVariant: "timeframebuttons",
-      onAccountsFilterClick: Z,
+      onAccountsFilterClick: he,
       onBackClick: o,
-      sx: a,
-      title: k.title,
+      sx: s,
+      title: H.title,
       children: [
         /* @__PURE__ */ C(
-          b,
+          x,
           {
             sx: {
               // eslint-disable-next-line no-nested-ternary
-              px: n ? 48 : s ? 24 : 12
+              px: t ? 48 : r ? 24 : 12
             },
             children: [
               /* @__PURE__ */ C(
-                b,
+                x,
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  sx: { pb: l ? 12 : 24, pt: l ? 24 : 48 },
+                  sx: { pb: i ? 12 : 24, pt: i ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
-                      et,
+                      ut,
                       {
-                        selectedCategoryGuid: B,
-                        selectedDateRange: v
+                        selectedCategoryGuid: O,
+                        selectedDateRange: b
                       }
                     ),
-                    /* @__PURE__ */ e(Je, { onTabChange: re, selectedTab: H })
+                    /* @__PURE__ */ e(dt, { onTabChange: re, selectedTab: E })
                   ]
                 }
               ),
-              /* @__PURE__ */ C(b, { alignItems: "center", flexDirection: "row", width: "100%", children: [
-                /* @__PURE__ */ e(W, { flexGrow: 1, children: B && /* @__PURE__ */ C(be, { onClick: () => se(""), sx: { p: 0, pr: 5 }, children: [
-                  /* @__PURE__ */ e(Se, { name: "arrow_back" }),
-                  k.all_categories
+              /* @__PURE__ */ C(x, { alignItems: "center", flexDirection: "row", width: "100%", children: [
+                /* @__PURE__ */ e(A, { flexGrow: 1, children: O && /* @__PURE__ */ C(be, { onClick: () => ne(""), sx: { p: 0, pr: 5 }, children: [
+                  /* @__PURE__ */ e(Te, { name: "arrow_back" }),
+                  H.all_categories
                 ] }) }),
-                /* @__PURE__ */ e(be, { onClick: () => ne(!0), sx: { px: 5 }, children: `${k.view_transactions} (${g.length})` })
+                /* @__PURE__ */ e(be, { onClick: () => K(!0), sx: { px: 5 }, children: `${H.view_transactions} (${w.length})` })
               ] }),
-              /* @__PURE__ */ C(W, { children: [
-                H === "Chart" && /* @__PURE__ */ e(
-                  uo,
+              /* @__PURE__ */ C(A, { children: [
+                E === "Chart" && /* @__PURE__ */ e(
+                  go,
                   {
-                    availableHeight: U,
-                    onClickLegend: ie,
-                    onHoverArea: ce,
-                    onHoverLegend: he,
-                    onHoverPoint: le,
-                    stackedDatasets: K.stackedDatasets,
-                    unstackedDatasets: K.unstackedDatasets
+                    availableHeight: ue,
+                    onClickLegend: ae,
+                    onHoverArea: ie,
+                    onHoverLegend: ge,
+                    onHoverPoint: ce,
+                    stackedDatasets: F.stackedDatasets,
+                    unstackedDatasets: F.unstackedDatasets
                   }
                 ),
-                H === "Table" && /* @__PURE__ */ e(
-                  tt,
+                E === "Table" && /* @__PURE__ */ e(
+                  ht,
                   {
-                    monthlyCategoryTotals: _,
-                    onClickRow: te,
-                    selectedCategory: B,
-                    selectedDateRange: v
+                    onClickRow: j,
+                    selectedCategory: O,
+                    selectedDateRange: b
                   }
                 )
               ] })
@@ -726,27 +797,27 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
           }
         ),
         /* @__PURE__ */ e(
-          yo,
+          bo,
           {
-            categoryGuid: B,
-            dateRange: v,
-            isOpen: ee,
-            onClose: () => ne(!1)
+            categoryGuid: O,
+            dateRange: b,
+            isOpen: V,
+            onClose: () => K(!1)
           }
         )
       ]
     }
   );
-}, On = R(_o), To = () => {
-  const { monthlyCategoryTotals: o } = Y(), { trends: a } = O(), t = we(), { availableHeight: n = 300 } = ze(), s = Nt(o);
+}, $n = R(So), xo = () => {
+  const { monthlyCategoryTotals: o } = J(), { trends: s } = k(), n = le(), { availableHeight: t = 300 } = qe(), r = u.useMemo(() => Wt(o), [o]);
   return /* @__PURE__ */ e(
-    Ne,
+    Oe,
     {
       baseline: "min",
-      colors: [t.palette.primary.main],
-      datasets: [s],
-      height: n,
-      labels: [a.spending_label],
+      colors: [n.palette.primary.main],
+      datasets: [r],
+      height: t,
+      labels: [s.spending_label],
       showArea: !0,
       showAverage: !0,
       showLegend: !0,
@@ -755,40 +826,41 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       valueFormatterString: "0,0"
     }
   );
-}, So = R(To), bo = ({ onPrimaryCtaClick: o, sx: a }) => {
-  const { isAccountDataLoaded: t, loadAccountData: n, visibleAccounts: s } = Le(), { loadMonthlyCategoryTotals: l, monthlyTotalsLoaded: m } = Y(), { isInitialized: h } = He(), { trends: i } = O(), { selectedAccounts: d, setSelectedAccounts: f } = fe();
-  return c.useEffect(() => {
-    t || n().finally();
-  }, []), c.useEffect(() => {
-    f(s);
-  }, [s]), c.useEffect(() => {
-    h && l(d).finally();
-  }, [h, d]), h ? /* @__PURE__ */ e(
-    Vt,
+}, wo = R(xo), vo = ({ onPrimaryCtaClick: o, sx: s }) => {
+  const { isAccountDataLoaded: n, loadAccountData: t } = De(), { loadMonthlyCategoryTotals: r, monthlyTotalsLoaded: i } = J(), { isInitialized: d } = We(), { trends: h } = k(), { selectedAccounts: c } = ye();
+  return u.useEffect(() => {
+    n || t().finally();
+  }, []), Ie({
+    widgetName: "TrendsMiniWidget",
+    isLoaded: i
+  }), u.useEffect(() => {
+    d && n && r(c).finally();
+  }, [n, d, c]), !n || !d || !i ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
+    Ft,
     {
-      contentStyles: { height: "calc(100% - 72px)", ":last-child": { pb: 0 } },
+      contentStyles: { height: "calc(100% - 72px)", minHeight: 300, ":last-child": { pb: 0 } },
       onPrimaryCtaClick: o,
-      primaryCtaLabel: i.primary_cta,
-      subTitle: i.sub_title,
-      sx: { height: "100%", ...a },
-      title: i.mini_title,
-      children: m ? /* @__PURE__ */ e(So, {}) : /* @__PURE__ */ e(pe, {})
+      primaryCtaLabel: h.primary_cta,
+      subTitle: h.sub_title,
+      sx: { height: "100%", ...s },
+      title: h.mini_title,
+      children: /* @__PURE__ */ e(wo, {})
     }
-  ) : /* @__PURE__ */ e(pe, {});
-}, Gn = R(bo), xo = 70, Be = ({
+  );
+}, Kn = R(vo), Do = 70, Ye = ({
   title: o,
-  totalAmount: a,
-  transactionType: t,
-  percentage: n,
-  secondaryLabel: s,
-  shouldDisplayPercentage: l
+  totalAmount: s,
+  transactionType: n,
+  percentage: t,
+  secondaryLabel: r,
+  shouldDisplayPercentage: i
 }) => {
-  const { availableWidth: m } = ze(), h = c.useRef(null), i = c.useRef(null), d = Lt(Number(Math.abs(n)), {
+  const { availableWidth: d } = qe(), h = u.useRef(null), c = u.useRef(null), l = Mt(Number(Math.abs(t)), {
     style: "percent",
     minimumIntegerDigits: 1
-  }), f = m === 288 && oe(a, "0,0.00").length > 10 ? oe(a, "0,0") : oe(a, "0,0.00"), p = t === "spending" ? n > 0 : n >= 0, _ = t === "spending" ? "error.main" : "success.main", u = t === "spending" ? "success.main" : "text.secondary", y = h?.current, S = i?.current, g = y && S ? y.scrollWidth > S.clientWidth - xo : !1;
+  }), p = d === 288 && oe(s, "0,0.00").length > 10 ? oe(s, "0,0") : oe(s, "0,0.00"), m = n === "spending" ? t > 0 : t >= 0, _ = n === "spending" ? "error.main" : "success.main", f = n === "spending" ? "success.main" : "text.secondary", g = h?.current, y = c?.current, w = g && y ? g.scrollWidth > y.clientWidth - Do : !1;
   return /* @__PURE__ */ C(
-    b,
+    x,
     {
       sx: {
         border: 1,
@@ -801,7 +873,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       },
       children: [
         /* @__PURE__ */ C(
-          b,
+          x,
           {
             sx: {
               alignItems: "center",
@@ -809,18 +881,18 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
               justifyContent: "space-between"
             },
             children: [
-              /* @__PURE__ */ e(me, { color: "text.secondary", variant: "caption", children: o }),
-              l && /* @__PURE__ */ C(b, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
-                p ? /* @__PURE__ */ e(Ft, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e(zt, { size: 20, sx: { color: u } }),
+              /* @__PURE__ */ e(fe, { color: "text.secondary", variant: "caption", children: o }),
+              i && /* @__PURE__ */ C(x, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+                m ? /* @__PURE__ */ e(zt, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e($t, { size: 20, sx: { color: f } }),
                 /* @__PURE__ */ e(
-                  me,
+                  fe,
                   {
                     sx: {
-                      color: p ? _ : u,
+                      color: m ? _ : f,
                       fontWeight: 600
                     },
                     variant: "body2",
-                    children: d
+                    children: l
                   }
                 )
               ] })
@@ -828,9 +900,9 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
           }
         ),
         /* @__PURE__ */ C(
-          b,
+          x,
           {
-            ref: i,
+            ref: c,
             sx: {
               alignItems: "center",
               flexDirection: "row",
@@ -838,19 +910,19 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
             },
             children: [
               /* @__PURE__ */ e(
-                W,
+                A,
                 {
                   ref: h,
                   sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-                  children: /* @__PURE__ */ e(Pe, { children: f })
+                  children: /* @__PURE__ */ e(Ue, { children: p })
                 }
               ),
-              l && m >= 450 && !g && /* @__PURE__ */ e(
-                me,
+              i && d >= 450 && !w && /* @__PURE__ */ e(
+                fe,
                 {
-                  color: p ? _ : u,
+                  color: m ? _ : f,
                   variant: "caption",
-                  children: s
+                  children: r
                 }
               )
             ]
@@ -859,54 +931,55 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       ]
     }
   );
-}, vo = R(() => {
-  const { trends: o } = O();
-  return /* @__PURE__ */ C(b, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
-    /* @__PURE__ */ e($t, { size: 32 }),
-    /* @__PURE__ */ C(b, { children: [
-      /* @__PURE__ */ e(me, { fontWeight: 600, variant: "body1", children: o.zero_state_content_header }),
-      /* @__PURE__ */ e(me, { color: "text.secondary", variant: "subtitle2", children: o.zero_state_content_description })
+}, Lo = R(() => {
+  const { trends: o } = k();
+  return /* @__PURE__ */ C(x, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
+    /* @__PURE__ */ e(Kt, { size: 32 }),
+    /* @__PURE__ */ C(x, { children: [
+      /* @__PURE__ */ e(fe, { fontWeight: 600, variant: "body1", children: o.zero_state_content_header }),
+      /* @__PURE__ */ e(fe, { color: "text.secondary", variant: "subtitle2", children: o.zero_state_content_description })
     ] })
   ] });
-}), Bn = R(({ onCtaClick: o }) => {
-  const { isAccountDataLoaded: a, loadAccountData: t, visibleAccounts: n } = Le();
-  c.useEffect(() => {
-    a || t().finally();
+}), Yn = R(({ onCtaClick: o }) => {
+  const { isAccountDataLoaded: s, loadAccountData: n, visibleAccounts: t } = De();
+  u.useEffect(() => {
+    s || n().finally();
   }, []);
-  const { onEvent: s } = P(), { monthlyCategoryTotals: l, loadMonthlyCategoryTotals: m, monthlyTotalsLoaded: h } = Y(), i = {
+  const { onEvent: r } = z(), { monthlyCategoryTotals: i, loadMonthlyCategoryTotals: d, monthlyTotalsLoaded: h } = J(), c = {
     start: Pt(/* @__PURE__ */ new Date(), 1),
     end: /* @__PURE__ */ new Date()
-  }, { trends: d } = O(), { selectedAccounts: f, setSelectedAccounts: p, isInitialized: _ } = fe();
-  c.useEffect(() => {
-    p(n);
-  }, [n]), c.useEffect(() => {
-    _ && m(f, i.start).then(() => {
-      s(w.TRENDS_LOAD_WIDGET, {
-        state: n?.length ? "default" : "zeroState"
+  }, { trends: l } = k(), { selectedAccounts: p, isInitialized: m } = ye();
+  Ie({
+    widgetName: "TrendsMicroWidget",
+    isLoaded: h
+  }), u.useEffect(() => {
+    m && d(p, c.start).then(() => {
+      r(v.TRENDS_LOAD_WIDGET, {
+        state: t?.length ? "default" : "zeroState"
       });
     });
-  }, [_, f]);
-  const { spendingData: u, incomeData: y } = c.useMemo(
+  }, [m, p]);
+  const { spendingData: _, incomeData: f } = u.useMemo(
     () => ({
-      spendingData: Ye(l, i),
-      incomeData: je(l, i)
+      spendingData: nt(i, c),
+      incomeData: ot(i, c)
     }),
-    [l, i]
-  ), [S, g] = u, [v, E] = y, I = Oe(g.y, S.y), x = Oe(E.y, v.y), M = _ && !n?.length, k = () => {
-    s(
-      M ? w.TRENDS_CLICK_GET_STARTED : w.TRENDS_CLICK_VIEW_MORE
+    [i, c]
+  ), [g, y] = _, [w, b] = f, M = Pe(y.y, g.y), I = Pe(b.y, w.y), S = m && !t?.length, H = () => {
+    r(
+      S ? v.TRENDS_CLICK_GET_STARTED : v.TRENDS_CLICK_VIEW_MORE
     ), o();
   };
-  return !h || !_ ? /* @__PURE__ */ e(pe, {}) : /* @__PURE__ */ e(
-    Yt,
+  return !h || !m ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
+    Ut,
     {
       className: "mx-trends-microwidget",
-      ctaLabel: d.micro_primary_cta_label,
-      onCTAClick: k,
-      subHeader: M ? void 0 : d.micro_subheader,
-      title: d.title,
-      children: M ? /* @__PURE__ */ e(vo, {}) : /* @__PURE__ */ C(
-        b,
+      ctaLabel: l.micro_primary_cta_label,
+      onCTAClick: H,
+      subHeader: S ? void 0 : l.micro_subheader,
+      title: l.title,
+      children: S ? /* @__PURE__ */ e(Lo, {}) : /* @__PURE__ */ C(
+        x,
         {
           sx: {
             alignItems: "stretch",
@@ -915,24 +988,24 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
           },
           children: [
             /* @__PURE__ */ e(
-              Be,
+              Ye,
               {
-                percentage: I,
-                secondaryLabel: d.micro_secondary_label,
-                shouldDisplayPercentage: g.y !== 0 && S.y !== 0,
-                title: d.spending_label,
-                totalAmount: g.y,
+                percentage: M,
+                secondaryLabel: l.micro_secondary_label,
+                shouldDisplayPercentage: y.y !== 0 && g.y !== 0,
+                title: l.spending_label,
+                totalAmount: y.y,
                 transactionType: "spending"
               }
             ),
             /* @__PURE__ */ e(
-              Be,
+              Ye,
               {
-                percentage: x,
-                secondaryLabel: d.micro_secondary_label,
-                shouldDisplayPercentage: E.y !== 0 && v.y !== 0,
-                title: d.income_label,
-                totalAmount: E.y,
+                percentage: I,
+                secondaryLabel: l.micro_secondary_label,
+                shouldDisplayPercentage: b.y !== 0 && w.y !== 0,
+                title: l.income_label,
+                totalAmount: b.y,
                 transactionType: "income"
               }
             )
@@ -941,16 +1014,16 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       )
     }
   );
-}), wo = R(
-  ({ isExpanded: o, onClick: a }) => {
-    const t = qe();
-    return /* @__PURE__ */ e(Zt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(qt, { onClick: a, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
-      b,
+}), Io = R(
+  ({ isExpanded: o, onClick: s }) => {
+    const n = ct();
+    return /* @__PURE__ */ e(Qt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(qt, { onClick: s, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
+      x,
       {
-        sx: { color: t.palette.primary.main, flexDirection: "row", alignItems: "center" },
+        sx: { color: n.palette.primary.main, flexDirection: "row", alignItems: "center" },
         children: [
-          /* @__PURE__ */ e(Jt, { children: /* @__PURE__ */ e(z, { bold: !0, variant: "body2", children: o ? "View less" : "View more" }) }),
-          /* @__PURE__ */ e(Qt, { sx: { color: t.palette.primary.main }, children: o ? /* @__PURE__ */ e(Kt, {}) : /* @__PURE__ */ e(
+          /* @__PURE__ */ e(eo, { children: /* @__PURE__ */ e(X, { bold: !0, variant: "body2", children: o ? "View less" : "View more" }) }),
+          /* @__PURE__ */ e(Jt, { sx: { color: n.palette.primary.main }, children: o ? /* @__PURE__ */ e(Yt, {}) : /* @__PURE__ */ e(
             jt,
             {
               sx: {
@@ -963,128 +1036,128 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       }
     ) }) });
   }
-), Ve = R(
+), je = R(
   ({
     totalAmount: o,
-    guid: a,
-    name: t,
-    transactions: n,
-    onClick: s,
-    isLastItem: l = !1,
-    showDivider: m = !0
+    guid: s,
+    name: n,
+    transactions: t,
+    onClick: r,
+    isLastItem: i = !1,
+    showDivider: d = !0
   }) => {
-    const { trends: h } = O(), { onEvent: i } = P(), d = `${n.length} ${n.length === 1 ? h.transaction : h.transactions}`, f = () => {
-      s?.(), i(w.TRENDS_CLICK_LIST_ITEM, {
-        ...V,
-        listItem: t
+    const { trends: h } = k(), { onEvent: c } = z(), l = `${t.length} ${t.length === 1 ? h.transaction : h.transactions}`, p = () => {
+      r?.(), c(v.TRENDS_CLICK_LIST_ITEM, {
+        ...G,
+        listItem: n
       });
     };
-    return /* @__PURE__ */ C(c.Fragment, { children: [
+    return /* @__PURE__ */ C(u.Fragment, { children: [
       /* @__PURE__ */ e(
-        Ke,
+        tt,
         {
-          leftIcon: a ? /* @__PURE__ */ e(ve, { categoryGuid: a }) : void 0,
-          onClick: f,
+          leftIcon: s ? /* @__PURE__ */ e(we, { categoryGuid: s }) : void 0,
+          onClick: p,
           rightContent: oe(Math.abs(o), "0,0.00"),
-          rightIcon: s ? /* @__PURE__ */ e(mt, {}) : void 0,
-          subtitle: d,
-          title: t
+          rightIcon: r ? /* @__PURE__ */ e(xt, {}) : void 0,
+          subtitle: l,
+          title: n
         }
       ),
-      m && /* @__PURE__ */ e(Re, { sx: { ml: l ? 24 : 68 } })
-    ] }, a);
+      d && /* @__PURE__ */ e(He, { sx: { ml: i ? 24 : 68 } })
+    ] }, s);
   }
-), Do = R(
-  ({ availableHeight: o = 0, onCategoryClick: a }) => {
-    const { collapsedCategories: t, visibleCategories: n, setVisibleListLength: s } = Ce(), { isLargeDesktop: l, isDesktop: m } = J(), { trends: h } = O(), { onEvent: i } = P(), [d, f] = c.useState(!1), p = m || l;
-    c.useEffect(() => {
-      const y = Math.floor(o / 64) - 1, S = n.length + t.length;
-      y !== n.length && (s(p ? Math.max(y, 5) : 5), f(y >= S));
+), Eo = R(
+  ({ availableHeight: o = 0, onCategoryClick: s }) => {
+    const { collapsedCategories: n, visibleCategories: t, setVisibleListLength: r } = Ce(), { isLargeDesktop: i, isDesktop: d } = q(), { trends: h } = k(), { onEvent: c } = z(), [l, p] = u.useState(!1), m = d || i;
+    u.useEffect(() => {
+      const g = Math.floor(o / 64) - 1, y = t.length + n.length;
+      g !== t.length && (r(m ? Math.max(g, 5) : 5), p(g >= y));
     }, [o]);
     const _ = () => {
-      f(!d), i(w.TRENDS_CLICK_VIEW_MORE, {
-        ...V
+      p(!l), c(v.TRENDS_CLICK_VIEW_MORE, {
+        ...G
       });
-    }, u = n.length + (d ? t.length : 0);
-    return /* @__PURE__ */ e(b, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ C(Xt, { children: [
-      /* @__PURE__ */ e(b, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Pe, { children: h.categories }) }),
-      n.map((y, S) => /* @__PURE__ */ e(
-        Ve,
+    }, f = t.length + (l ? n.length : 0);
+    return /* @__PURE__ */ e(x, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ C(Zt, { children: [
+      /* @__PURE__ */ e(x, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Ue, { children: h.categories }) }),
+      t.map((g, y) => /* @__PURE__ */ e(
+        je,
         {
-          ...y,
-          isLastItem: S === u - 1,
-          onClick: y.transactions.length > 0 ? () => a(y) : void 0,
+          ...g,
+          isLastItem: y === f - 1,
+          onClick: g.transactions.length > 0 ? () => s(g) : void 0,
           showDivider: !0
         },
-        y.guid
+        g.guid
       )),
       /* @__PURE__ */ e(
-        Ut,
+        Xt,
         {
-          in: d,
+          in: l,
           sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
-          children: t.map((y, S) => {
-            const g = n.length + S;
+          children: n.map((g, y) => {
+            const w = t.length + y;
             return /* @__PURE__ */ e(
-              Ve,
+              je,
               {
-                ...y,
-                isLastItem: g === u - 1,
-                onClick: y.transactions.length > 0 ? () => a(y) : void 0,
+                ...g,
+                isLastItem: w === f - 1,
+                onClick: g.transactions.length > 0 ? () => s(g) : void 0,
                 showDivider: !0
               },
-              y.guid
+              g.guid
             );
           })
         }
       ),
-      t.length > 0 && /* @__PURE__ */ e(wo, { isExpanded: d, onClick: _ })
+      n.length > 0 && /* @__PURE__ */ e(Io, { isExpanded: l, onClick: _ })
     ] }) });
   }
-), Lo = ({ beats: o, onInsightCardClick: a }) => {
-  const { onEvent: t } = P(), { isMobile: n, isDesktop: s, isLargeDesktop: l } = J(), { beatStore: m, endpoint: h, sessionToken: i } = He(), d = s || l, f = d || n ? 1 : 2, p = () => null, _ = (E) => {
-    a?.(E), t(w.TRENDS_CLICK_INSIGHT, V);
-  }, u = d ? 200 : 170, y = d ? 170 : 124, S = d ? 56 : 0, g = o.length > 0 ? u + S : y, v = d && o.length > 0 ? u : void 0;
-  return /* @__PURE__ */ e(wt, { sx: { height: g }, children: /* @__PURE__ */ e(
-    Bt,
+), Mo = ({ beats: o, onInsightCardClick: s }) => {
+  const { onEvent: n } = z(), { isMobile: t, isDesktop: r, isLargeDesktop: i } = q(), { beatStore: d, endpoint: h, sessionToken: c } = We(), l = r || i, p = l || t ? 1 : 2, m = () => null, _ = (M) => {
+    s?.(M), n(v.TRENDS_CLICK_INSIGHT, G);
+  }, f = l ? 200 : 170, g = l ? 170 : 124, y = l ? 56 : 0, w = o.length > 0 ? f + y : g, b = l && o.length > 0 ? f : void 0;
+  return /* @__PURE__ */ e(to, { sx: { height: w }, children: /* @__PURE__ */ e(
+    Vt,
     {
-      areBeatsLoading: m.isLoading,
+      areBeatsLoading: d.isLoading,
       beats: o,
       endpoint: h,
-      heightOverrides: v,
-      logOutUser: p,
+      heightOverrides: b,
+      logOutUser: m,
       onCardClick: _,
       showBorder: !0,
       showCTAColocatedWithText: !1,
       showCarouselControls: !0,
-      showHeader: d,
+      showHeader: l,
       showIcon: !0,
       showWithMargin: !1,
-      token: i,
+      token: c,
       userHasFullInsightFeedBeats: !1,
       variant: "outlined",
-      visibleCardsCount: f
+      visibleCardsCount: p
     }
   ) });
-}, Eo = R(Lo), Io = R(({ chartLabel: o, chartColor: a }) => {
-  const { onEvent: t } = P(), {
-    categoryDetailsChartData: { monthlyAmounts: n, tooltipLabels: s }
+}, Ao = R(Mo), Ro = R(({ chartLabel: o, chartColor: s }) => {
+  const { onEvent: n } = z(), {
+    categoryDetailsChartData: { monthlyAmounts: t, tooltipLabels: r }
   } = Ce();
-  return /* @__PURE__ */ e(b, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
-    Ne,
+  return /* @__PURE__ */ e(x, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
+    Oe,
     {
       baseline: "min",
-      colors: [a],
+      colors: [s],
       curveType: "bump",
-      customTooltipLabels: s,
-      datasets: [n],
+      customTooltipLabels: r,
+      datasets: [t],
       height: 265,
       labels: [o],
       markStyles: () => ({
-        stroke: a
+        stroke: s
       }),
       onItemClick: () => {
-        t(w.TRENDS_CLICK_CHART, V);
+        n(v.TRENDS_CLICK_CHART, G);
       },
       showArea: !0,
       showAverage: !0,
@@ -1099,100 +1172,100 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       valueFormatterString: "0,0"
     }
   ) });
-}), Mo = R(({ onClose: o }) => {
-  const a = qe(), { onEvent: t } = P(), { common: n, trends: s } = O(), { selectedCategoryData: l, selectedDateRangeMonthRange: m } = Ce(), { sortedTransactions: h } = De(), [i, d] = c.useState(null);
+}), ko = R(({ onClose: o }) => {
+  const s = ct(), { is_mobile_webview: n } = Je(), { isDesktop: t, isSmallTablet: r, isTablet: i } = q(), { onEvent: d } = z(), { common: h, trends: c } = k(), { selectedCategoryData: l, selectedDateRangeMonthRange: p } = Ce(), { sortedTransactions: m } = ve(), [_, f] = u.useState(null);
   if (!l)
     return null;
-  const { guid: f, name: p, is_income: _, totalAmount: u } = l, y = _ ? s.category_income : s.category_spending, S = to(f, a), g = _ ? s.income_label : s.spending_label, v = ` ${l.transactions.length === 1 ? s.transaction : s.transactions} (${l.transactions.length})`, E = c.useMemo(
-    () => h.find((M) => M.guid === i),
-    [i, h]
-  ), I = (M) => M.category_guid === f || M.top_level_category_guid === f, x = () => {
-    o?.(), t(w.TRENDS_CLICK_BACK, V);
+  const { guid: g, name: y, is_income: w, totalAmount: b } = l, M = w ? c.category_income : c.category_spending, I = no(g, s), S = w ? c.income_label : c.spending_label, H = ` ${l.transactions.length === 1 ? c.transaction : c.transactions} (${l.transactions.length})`, N = u.useMemo(
+    () => m.find((E) => E.guid === _),
+    [_, m]
+  ), $ = m.length > 0 && !n && (t || i && !r), V = (E) => E.category_guid === g || E.top_level_category_guid === g, K = () => {
+    o?.(), d(v.TRENDS_CLICK_BACK, G);
   };
   return /* @__PURE__ */ C(
-    ke,
+    Ne,
     {
-      ariaLabelClose: s.close_category_details,
+      ariaLabelClose: c.close_category_details,
       isOpen: !0,
-      onClose: x,
+      onClose: K,
       shouldShowHeaderShadow: !0,
-      title: y,
+      title: M,
       children: [
-        /* @__PURE__ */ C(b, { sx: { alignItems: "center", height: "100%" }, children: [
-          /* @__PURE__ */ C(eo, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
+        /* @__PURE__ */ C(x, { sx: { alignItems: "center", height: "100%" }, children: [
+          /* @__PURE__ */ C(oo, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
             /* @__PURE__ */ e(
-              Ke,
+              tt,
               {
-                leftIcon: /* @__PURE__ */ e(ve, { categoryGuid: f }),
-                rightContent: oe(Math.abs(u), "0,0.00"),
-                subtitle: m,
-                title: p
+                leftIcon: /* @__PURE__ */ e(we, { categoryGuid: g }),
+                rightContent: oe(Math.abs(b), "0,0.00"),
+                subtitle: p,
+                title: y
               }
             ),
-            /* @__PURE__ */ e(Io, { chartColor: S, chartLabel: g }),
-            /* @__PURE__ */ C(b, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
-              /* @__PURE__ */ e(z, { bold: !0, variant: "body1", children: v }),
-              /* @__PURE__ */ e(oo, { filter: I })
+            /* @__PURE__ */ e(Ro, { chartColor: I, chartLabel: S }),
+            /* @__PURE__ */ C(x, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
+              /* @__PURE__ */ e(X, { bold: !0, variant: "body1", children: H }),
+              $ && /* @__PURE__ */ e(so, { filter: V })
             ] })
           ] }),
           /* @__PURE__ */ e(
-            Ze,
+            it,
             {
               bgcolor: "transparent",
-              filter: I,
+              filter: V,
               height: "calc(100vh - 475px)",
-              onClick: d
+              onClick: f
             }
           )
         ] }),
         /* @__PURE__ */ e(
-          ke,
+          Ne,
           {
-            ariaLabelClose: n.close_aria,
-            isOpen: !!E,
-            onClose: () => d(""),
-            title: s.transaction,
-            children: E && /* @__PURE__ */ e(Xe, { transaction: E })
+            ariaLabelClose: h.close_aria,
+            isOpen: !!N,
+            onClose: () => f(""),
+            title: c.transaction,
+            children: N && /* @__PURE__ */ e(at, { transaction: N })
           }
         )
       ]
     }
   );
-}), Ao = (o, a) => {
-  const t = je(o, a), n = Ye(o, a);
-  return [t, n].filter((s) => s.length > 0);
-}, Ro = (o, a) => {
-  const [t, n] = o, s = t, l = n ?? t, m = [];
-  if (s) {
-    const h = s.reduce((i, d) => i + d.y, 0);
-    m.push({ label: a.income_label, amount: h });
+}), Ho = (o, s) => {
+  const n = ot(o, s), t = nt(o, s);
+  return [n, t].filter((r) => r.length > 0);
+}, No = (o, s) => {
+  const [n, t] = o, r = n, i = t ?? n, d = [];
+  if (r) {
+    const h = r.reduce((c, l) => c + l.y, 0);
+    d.push({ label: s.income_label, amount: h });
   }
-  if (l) {
-    const h = l.reduce((i, d) => i + d.y, 0);
-    m.push({ label: a.spending_label, amount: h });
+  if (i) {
+    const h = i.reduce((c, l) => c + l.y, 0);
+    d.push({ label: s.spending_label, amount: h });
   }
-  return m;
-}, ko = ({
+  return d;
+}, Wo = ({
   availableHeight: o = 0,
-  minHeight: a = 500,
-  selectedDateRange: t,
-  totals: n
+  minHeight: s = 500,
+  selectedDateRange: n,
+  totals: t
 }) => {
-  const s = we(), { onEvent: l } = P(), { trends: m } = O(), { isSmallMobile: h, isMobile: i, isSmallTablet: d, isTablet: f } = J(), p = [s.palette.chart?.chart1, s.palette.chart?.chart2], _ = Ao(n, t), u = Ro(_, m), [y, S] = c.useState(0), g = 458, v = 195, E = 56, I = i || h ? v : d || f ? g : y;
-  return c.useEffect(() => {
-    const M = Math.max(o - E, a);
-    S(M);
+  const r = le(), { onEvent: i } = z(), { trends: d } = k(), { isSmallMobile: h, isMobile: c, isSmallTablet: l, isTablet: p } = q(), m = [r.palette.chart?.chart1, r.palette.chart?.chart2], _ = Ho(t, n), f = No(_, d), [g, y] = u.useState(0), w = 458, b = 195, M = 56, I = c || h ? b : l || p ? w : g;
+  return u.useEffect(() => {
+    const H = Math.max(o - M, s);
+    y(H);
   }, [o]), /* @__PURE__ */ e(
-    Ne,
+    Oe,
     {
       baseline: "min",
-      colors: p,
+      colors: m,
       curveType: "bump",
       datasets: _,
       height: I,
-      labels: u,
+      labels: f,
       onItemClick: () => {
-        l(w.TRENDS_CLICK_CHART, V);
+        i(v.TRENDS_CLICK_CHART, G);
       },
       showArea: !0,
       showAxisHighlight: !0,
@@ -1205,7 +1278,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       valueFormatterString: "0.0a"
     }
   );
-}, Ho = R(ko), No = [
+}, Oo = R(Wo), Go = [
   "BillAmountNotStandard",
   "CategorySpendingV2",
   "CostOfLivingToIncome",
@@ -1239,188 +1312,189 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
   "WeeklyNewMerchantsV2",
   "WeeklyNoSpendDays",
   "WeeklySmallPurchasesSummary"
-], Wo = ({ onBackClick: o, onInsightCardClick: a, sx: t }) => {
-  const { onEvent: n } = P(), { onLoad: s } = _t(), { config: l } = Tt(), { isLargeDesktop: m, isDesktop: h, isMobile: i } = J(), { isAccountDataLoaded: d, loadAccountData: f, visibleAccounts: p } = Le(), {
-    categoriesLoaded: _,
-    loadCategories: u,
-    loadDateRangeCategoryTotals: y,
-    loadMonthlyCategoryTotals: S,
-    monthlyCategoryTotals: g
-  } = Y(), { isTransactionDataLoaded: v, loadTransactionData: E, setFilter: I } = De(), { selectedDateRange: x, setSelectedCategoryData: M, setSelectedDateRange: k } = Ce(), { isInitialized: A, selectedAccounts: G, selectedAccountGuids: ee, setSelectedAccounts: ne } = fe(), { trends: H, connect: ue } = O(), { beatStore: B } = He(), ae = no() && l.show_insights_widget_in_master, $ = h || m, [ye, U] = c.useState(!1), [K, re] = c.useState(!1), [X, Z] = c.useState("Chart"), [te, ie] = c.useState(""), [he, ce] = c.useState(!1), [le, D] = c.useState(window.innerHeight), r = $ ? 56 : 0, T = le - 208, L = le - (ae ? 550 + r : 266), [j, _e] = c.useState(!1), Ee = l.show_connections_widget_in_master ? "buttons" : "no-buttons", de = c.useMemo(
-    () => p && p.length === 0 || g.length === 0,
-    [p, g]
-  ), Te = c.useMemo(() => K ? B.getFilteredBeats({ templates: No }) : [], [K]);
-  c.useEffect(() => {
-    const N = () => D(window.innerHeight);
-    return window.addEventListener("resize", N), d || f().finally(), _ || u().finally(), v || E().finally(), () => window.removeEventListener("resize", N);
-  }, []), c.useEffect(() => {
-    ne(p);
-  }, [p]), c.useEffect(() => {
-    A && (B.loadBeats().finally(() => re(!0)), y(G, x.start, x.end).then(() => {
-      S(
-        G,
-        x.start,
-        x.end
+], Bo = ({ onBackClick: o, onInsightCardClick: s, sx: n }) => {
+  const { onEvent: t } = z(), { config: r } = Je(), { isDesktop: i, isLargeDesktop: d, isMobile: h } = q(), { isAccountDataLoaded: c, loadAccountData: l, visibleAccounts: p } = De(), {
+    categoriesLoaded: m,
+    loadCategories: _,
+    loadDateRangeCategoryTotals: f,
+    loadMonthlyCategoryTotals: g,
+    monthlyCategoryTotals: y,
+    monthlyTotalsLoaded: w
+  } = J(), { isTransactionDataLoaded: b, loadTransactionData: M, setFilter: I } = ve(), { selectedDateRange: S, setSelectedCategoryData: H, setSelectedDateRange: N } = Ce(), { isInitialized: $, selectedAccounts: V, selectedAccountGuids: K } = ye(), { trends: E, connect: te } = k(), { beatStore: O } = We(), se = ro() && r.show_insights_widget_in_master, Z = i || d, [de, ue] = u.useState(!1), [F, re] = u.useState(!1), [Y, he] = u.useState("Chart"), [j, ae] = u.useState(""), [ge, ie] = u.useState(!1), [ce, D] = u.useState(window.innerHeight), P = Z ? 56 : 0, a = ce - 208, T = ce - (se ? 550 + P : 266), [L, U] = u.useState(!1), Ee = r.show_connections_widget_in_master ? "buttons" : "no-buttons";
+  Ie({
+    widgetName: "TrendsWidget",
+    isLoaded: de
+  });
+  const _e = u.useMemo(() => F ? O.getFilteredBeats({ templates: Go }) : [], [F]);
+  u.useEffect(() => {
+    const W = () => D(window.innerHeight);
+    return window.addEventListener("resize", W), c || l().finally(), m || _().finally(), b || M().finally(), () => window.removeEventListener("resize", W);
+  }, []), u.useEffect(() => {
+    $ && (O.loadBeats().finally(() => re(!0)), f(V, S.start, S.end).then(() => {
+      g(
+        V,
+        S.start,
+        S.end
       );
     }).finally(() => {
-      U(!0), n(w.TRENDS_LOAD_WIDGET, {
-        ...V,
-        time_period: `${Ae(x.end, x.start)}M`
-      }), s?.("TrendsWidget");
+      ue(!0), t(v.TRENDS_LOAD_WIDGET, {
+        ...G,
+        time_period: `${Se(S.end, S.start)}M`
+      });
     }));
-  }, [A, G, x]), c.useEffect(() => {
-    if (g.length !== 0) {
-      const N = {
-        accounts: ee,
-        dateRange: { start: x.start, end: x.end }
+  }, [$, V, S]), u.useEffect(() => {
+    if (y.length !== 0) {
+      const W = {
+        accounts: K,
+        dateRange: { start: S.start, end: S.end }
       };
       I({
-        ...N,
-        custom: (q) => !!g.find(
-          (ge) => ge.top_level_category_guid === q.top_level_category_guid || ge.category_guid === q.category_guid
+        ...W,
+        custom: (ee) => !!y.find(
+          (pe) => pe.top_level_category_guid === ee.top_level_category_guid || pe.category_guid === ee.category_guid
         )
       });
     }
-  }, [g]);
-  const Ie = (N) => {
-    M(N), ce(!0);
-  }, ot = () => {
-    M(null), ce(!1);
-  }, nt = () => {
-    _e(!0), n(w.TRENDS_CLICK_CONNECT_ACCOUNTS);
-  }, st = (N, q) => {
-    Z(q ?? X), n(w.TRENDS_CLICK_TOGGLE_VIEW, {
-      ...V,
-      toggleView: q
+  }, [y]);
+  const me = (W) => {
+    H(W), ie(!0);
+  }, Me = () => {
+    H(null), ie(!1);
+  }, Ae = () => {
+    U(!0), t(v.TRENDS_CLICK_CONNECT_ACCOUNTS);
+  }, gt = (W, ee) => {
+    he(ee ?? Y), t(v.TRENDS_CLICK_TOGGLE_VIEW, {
+      ...G,
+      toggleView: ee
     });
-  }, at = (N) => {
-    const q = Fe(N?.[0], 1), ge = N?.[1], lt = Ae(ge, q);
-    k({ start: q, end: ge }), n(w.TRENDS_CLICK_TIME_WINDOW, {
-      ...V,
-      time_period: lt + "M"
+  }, mt = (W) => {
+    const ee = Xe(W?.[0], 1), pe = W?.[1], Ct = Se(pe, ee);
+    N({ start: ee, end: pe }), t(v.TRENDS_CLICK_TIME_WINDOW, {
+      ...G,
+      time_period: Ct + "M"
     });
-  }, rt = (N) => {
-    n(w.TRENDS_CLICK_FILTER, {
-      ...V,
-      filterValue: N
+  }, pt = (W) => {
+    t(v.TRENDS_CLICK_FILTER, {
+      ...G,
+      filterValue: W
     });
-  }, it = (N) => {
-    ie(N);
-  }, ct = () => {
-    ie(""), n(w.TRENDS_CLICK_ALL_CATEGORIES, V);
+  }, ft = (W) => {
+    ae(W);
+  }, yt = () => {
+    ae(""), t(v.TRENDS_CLICK_ALL_CATEGORIES, G);
   };
-  return !A || !ye ? /* @__PURE__ */ e(pe, {}) : /* @__PURE__ */ C(
-    Ue,
+  if (!$ || !de || !w) return /* @__PURE__ */ e(Le, {});
+  const Ge = p && p.length === 0 || y.length === 0;
+  return /* @__PURE__ */ C(
+    rt,
     {
-      accountOptions: p,
-      calendarActions: { onRangeChanged: at },
-      dateRange: x,
-      dateRangeVariant: i ? "timeframetabs" : "timeframebuttons",
-      onAccountsFilterClick: rt,
+      calendarActions: { onRangeChanged: mt },
+      dateRange: S,
+      dateRangeVariant: h ? "timeframetabs" : "timeframebuttons",
+      onAccountsFilterClick: pt,
       onBackClick: o,
-      sx: t,
-      title: H.title,
+      sx: n,
+      title: E.title,
       children: [
-        de && /* @__PURE__ */ e(
-          so,
+        Ge && /* @__PURE__ */ e(
+          ao,
           {
-            header: H.zero_state_content_header,
+            header: E.zero_state_content_header,
             icon: "",
-            onClick: nt,
-            primaryButton: H.empty_state_primary,
-            subText: H.empty_state_sub_text,
-            sx: { height: T },
+            onClick: Ae,
+            primaryButton: E.empty_state_primary,
+            subText: E.empty_state_sub_text,
+            sx: { height: a },
             variant: Ee
           }
         ),
-        !de && /* @__PURE__ */ C(
-          b,
+        !Ge && /* @__PURE__ */ C(
+          x,
           {
             sx: {
-              px: i ? 0 : 48
+              px: h ? 0 : 48
             },
             children: [
               /* @__PURE__ */ C(
-                b,
+                x,
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  sx: { pb: i ? 12 : 24, pt: i ? 24 : 48 },
+                  sx: { gap: 8, px: h ? 24 : 0, py: 16 },
                   children: [
                     /* @__PURE__ */ e(
-                      et,
+                      ut,
                       {
-                        selectedCategoryGuid: te,
-                        selectedDateRange: x
+                        selectedCategoryGuid: j,
+                        selectedDateRange: S
                       }
                     ),
-                    /* @__PURE__ */ e(Je, { onTabChange: st, selectedTab: X })
+                    /* @__PURE__ */ e(dt, { onTabChange: gt, selectedTab: Y })
                   ]
                 }
               ),
-              /* @__PURE__ */ e(b, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(W, { flexGrow: 1, children: te && /* @__PURE__ */ C(be, { onClick: ct, sx: { p: 0, pr: 5 }, children: [
-                /* @__PURE__ */ e(Se, { name: "arrow_back" }),
-                H.all_categories
+              /* @__PURE__ */ e(x, { alignItems: "center", flexDirection: "row", sx: { pb: 8 }, width: "100%", children: /* @__PURE__ */ e(A, { flexGrow: 1, children: j && /* @__PURE__ */ C(be, { onClick: yt, sx: { p: 0, pr: 5 }, children: [
+                /* @__PURE__ */ e(Te, { name: "arrow_back" }),
+                E.all_categories
               ] }) }) }),
-              /* @__PURE__ */ C(b, { flexDirection: $ ? "row" : "column", gap: $ ? 48 : 16, children: [
-                X === "Chart" && /* @__PURE__ */ C(dt, { children: [
-                  /* @__PURE__ */ e(W, { sx: { width: $ ? "68%" : "100%" }, children: /* @__PURE__ */ e(
-                    Ho,
+              /* @__PURE__ */ C(x, { flexDirection: Z ? "row" : "column", gap: Z ? 48 : 16, children: [
+                Y === "Chart" && /* @__PURE__ */ C(_t, { children: [
+                  /* @__PURE__ */ e(A, { sx: { width: Z ? "68%" : "100%" }, children: /* @__PURE__ */ e(
+                    Oo,
                     {
-                      availableHeight: T,
+                      availableHeight: a,
                       minHeight: 450,
-                      selectedDateRange: x,
-                      totals: g
+                      selectedDateRange: S,
+                      totals: y
                     }
                   ) }),
-                  /* @__PURE__ */ C(b, { gap: 16, sx: { width: $ ? "32%" : "100%" }, children: [
-                    ae && K && Te.length > 0 && /* @__PURE__ */ e(
-                      Eo,
+                  /* @__PURE__ */ C(x, { gap: 16, sx: { width: Z ? "32%" : "100%" }, children: [
+                    se && F && _e.length > 0 && /* @__PURE__ */ e(
+                      Ao,
                       {
-                        beats: Te,
-                        onInsightCardClick: a
+                        beats: _e,
+                        onInsightCardClick: s
                       }
                     ),
                     /* @__PURE__ */ e(
-                      Do,
+                      Eo,
                       {
-                        availableHeight: L,
-                        onCategoryClick: Ie
+                        availableHeight: T,
+                        onCategoryClick: me
                       }
                     )
                   ] })
                 ] }),
-                X === "Table" && /* @__PURE__ */ e(W, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
-                  tt,
+                Y === "Table" && /* @__PURE__ */ e(A, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
+                  ht,
                   {
                     height: "unset",
-                    monthlyCategoryTotals: g,
-                    onClickRow: it,
-                    selectedCategory: te,
-                    selectedDateRange: x
+                    onClickRow: ft,
+                    selectedCategory: j,
+                    selectedDateRange: S
                   }
                 ) })
               ] }),
-              he && /* @__PURE__ */ e(Mo, { onClose: ot })
+              ge && /* @__PURE__ */ e(ko, { onClose: Me })
             ]
           }
         ),
         /* @__PURE__ */ e(
-          ao,
+          io,
           {
-            onClose: () => _e(!1),
-            showConnectWidget: j,
-            title: ue.mini_title
+            onClose: () => U(!1),
+            showConnectWidget: L,
+            title: te.mini_title
           }
         )
       ]
     }
   );
-}, Vn = R(Wo);
+}, jn = R(Bo);
 export {
-  On as TrendsFullWidget,
-  Bn as TrendsMicroWidget,
-  Gn as TrendsMiniWidget,
-  zn as TrendsStore,
-  Vn as TrendsWidget
+  $n as TrendsFullWidget,
+  Yn as TrendsMicroWidget,
+  Kn as TrendsMiniWidget,
+  Zn as TrendsStore,
+  jn as TrendsWidget
 };