@mx-cartographer/experiences 8.0.0-alpha.bb4 → 8.0.0-alpha.mega1

package/dist/trends/index.es.js

@@ -1,160 +1,153 @@
-import { jsxs as y, jsx as e, Fragment as lt } from "react/jsx-runtime";
-import c, { useRef as dt, useState as ut, useEffect as ht } from "react";
+import { jsxs as y, jsx as e, Fragment as dt } from "react/jsx-runtime";
+import u, { useRef as ut, useState as ht, useEffect as gt } from "react";
 import { observer as R } from "mobx-react-lite";
-import { CategoryIcon as we, Text as z, Icon as Se, P as pe, H3 as Pe } from "@mxenabled/mxui";
-import W from "@mui/material/Box";
+import { CategoryIcon as Se, Text as P, Icon as _e, P as ge, H3 as Ye, ChevronRightIcon as mt } from "@mxenabled/mxui";
+import k from "@mui/material/Box";
 import S from "@mui/material/Stack";
-import xe from "@mui/material/Button";
-import { addSeconds as Fe } from "date-fns/addSeconds";
-import { differenceInCalendarMonths as Ae } from "date-fns/differenceInCalendarMonths";
-import { useTheme as ue } from "@mui/material/styles";
-import { LineChart as gt } from "@mui/x-charts";
-import { u as J } from "../useScreenSize-B5afALev.mjs";
-import { u as mt } from "../useDimensions-27p2evRx.mjs";
-import pt from "@mui/material/Card";
-import ft 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 ye, h as De, d as Le, w as Ce, q as ze, f as He, n as yt, a as Ct } from "../hooks-C41HAxM5.mjs";
-import { b as $e } from "../Localization-2MODESHW.mjs";
-import { C as ve } from "../CurrencyText-Dr0EZ7bp.mjs";
-import { useTheme as _t, Card as Tt, CardContent as bt, Box as St, Stack as xt } from "@mui/material";
-import { f as Q, a as F } from "../Dialog-CDV0kKxj.mjs";
-import { a as Me, c as vt } from "../Category-Ccoew_sA.mjs";
-import { f as oe, a as wt } from "../NumberFormatting-DjTD0t3W.mjs";
-import { a as Dt, g as Lt, L as Ke } from "../TrendsStore-_mRaFUdf.mjs";
-import { T as Pn } from "../TrendsStore-_mRaFUdf.mjs";
-import { i as Et, c as It, d as Mt, e as At, f as Rt, h as kt, g as je, b as Ye, j as Oe } from "../SpendingData-DPQ96k3x.mjs";
-import Ht from "@mui/material/ToggleButton";
-import Nt from "@mui/material/ToggleButtonGroup";
-import { DataGridPro as Wt } from "@mui/x-data-grid-pro";
-import { H as Ge } from "../HeaderCell-P8w6CmfO.mjs";
-import { T as V, b as Ot } from "../ViewMoreMicroCard-DAkyNRlD.mjs";
-import { A as w, W as Ue } from "../WidgetContainer-CDh9fjpR.mjs";
-import { a as Xe, T as Ze } from "../TransactionDetails-Bn0qY5Hw.mjs";
-import { D as ke } from "../Drawer-BF40nbsH.mjs";
-import { L as fe } from "../Loader-Ckqi9Rx6.mjs";
-import { L as Ne } from "../LineChart-C1PxNf7P.mjs";
-import { M as Gt } from "../MiniWidgetContainer-CKzf_Ira.mjs";
-import { subMonths as Bt } from "date-fns";
-import { TrendingUp as Vt, TrendingDown as Pt, MultilineChart as Ft, ExpandLess as zt, ExpandMore as $t, ChevronRight as Kt } from "@mxenabled/mx-icons";
-import { M as jt } from "../MicroWidgetContainer-BGpNl5ZS.mjs";
-import Yt from "@mui/material/Collapse";
-import Ut from "@mui/material/List";
-import Xt from "@mui/material/ListItem";
-import Zt from "@mui/material/ListItemButton";
-import qt from "@mui/material/ListItemIcon";
-import Qt from "@mui/material/ListItemText";
-import Jt from "@mui/material/Paper";
-import { b as eo } from "../CategoryUtil-DfVKKkRf.mjs";
-import { E as to } from "../ExportCsvAction-QhQK4_FU.mjs";
-import { u as oo } from "../useInsightsEnabled-CNjP5cfR.mjs";
-import { E as no } from "../EmptyState-DoxNUae-.mjs";
-import { l as so } from "../ConnectDrawer-DVp54lUH.mjs";
-const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
-  const { categories: t } = O(), { getCategoryName: n } = Y(), s = n(o);
+import be from "@mui/material/Button";
+import { addSeconds as je } from "date-fns/addSeconds";
+import { differenceInCalendarMonths as Re } from "date-fns/differenceInCalendarMonths";
+import pt from "numeral";
+import { useTheme as ce } from "@mui/material/styles";
+import { useItemTooltip as Ct, ChartsTooltipContainer as ft } from "@mui/x-charts/ChartsTooltip";
+import { LineChart as yt } from "@mui/x-charts/LineChart";
+import { u as ee } from "../useScreenSize-B6JyS_Lj.mjs";
+import { u as _t } from "../useDimensions-27p2evRx.mjs";
+import Ue from "@mui/material/Card";
+import Xe from "@mui/material/CardContent";
+import He from "@mui/material/Divider";
+import Ge from "@mui/material/Grid";
+import { u as H, m as $, g as V, b as pe, h as xe, d as ve, v as Ce, p as Ze, f as We, a as bt } from "../hooks-ZMp65DFz.mjs";
+import { b as Tt } from "../Localization-2MODESHW.mjs";
+import { C as Te } from "../CurrencyText-Dr0EZ7bp.mjs";
+import { C as Ae, b as Be, c as St } from "../Category-CevNQ03n.mjs";
+import { f as U, a as G } from "../Dialog-BPTr3qHE.mjs";
+import { f as se, a as xt } from "../NumberFormatting-DjTD0t3W.mjs";
+import { c as vt, a as Ve, g as wt, L as Qe } from "../TrendsStore-yO7qYv97.mjs";
+import { T as Fn } from "../TrendsStore-yO7qYv97.mjs";
+import { c as It, i as Lt, d as Et, e as Dt, b as qe, g as Je, f as Fe } from "../SpendingData-DQ1b9uqq.mjs";
+import Mt from "@mui/material/ToggleButton";
+import At from "@mui/material/ToggleButtonGroup";
+import { parseISO as Pe } from "date-fns/parseISO";
+import { DataGridPro as kt } from "@mui/x-data-grid-pro";
+import { H as ke } from "../HeaderCell-DjuifqHJ.mjs";
+import { T as B, b as Rt } from "../ViewMoreMicroCard-DwR0v_ll.mjs";
+import { A as I, W as et } from "../WidgetContainer-CoFDmQRE.mjs";
+import { a as tt, T as ot } from "../TransactionDetails-m5PddMQn.mjs";
+import { D as Ne } from "../Drawer-By9V-B5L.mjs";
+import { u as we } from "../useWidgetLoadTimer-hIOioiKx.mjs";
+import { L as me } from "../Loader-DUaFpDGv.mjs";
+import { L as Oe } from "../LineChart-KpPw1phO.mjs";
+import { M as Ht } from "../MiniWidgetContainer-Bg02sF1Y.mjs";
+import { subMonths as Nt } from "date-fns";
+import { TrendingUp as Wt, TrendingDown as Ot, MultilineChart as Gt, ExpandLess as Bt, ExpandMore as Vt } from "@mxenabled/mx-icons";
+import { M as Ft } from "../MicroWidgetContainer-r6mtxRer.mjs";
+import Pt from "@mui/material/Collapse";
+import $t from "@mui/material/List";
+import zt from "@mui/material/ListItem";
+import Kt from "@mui/material/ListItemButton";
+import Yt from "@mui/material/ListItemIcon";
+import jt from "@mui/material/ListItemText";
+import nt from "@mui/material/styles/useTheme";
+import { Stack as Ut } from "@mui/material";
+import Xt from "@mui/material/Paper";
+import { b as Zt } from "../CategoryUtil-DUM8NuGO.mjs";
+import { E as Qt } from "../ExportCsvAction-Cglo8Mca.mjs";
+import { u as qt } from "../useInsightsEnabled-B7dxpDrX.mjs";
+import { E as Jt } from "../EmptyState-DoxNUae-.mjs";
+import { l as eo } from "../ConnectDrawer-BkvlItWx.mjs";
+const st = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
+  const { categories: n } = H(), { getCategoryName: o } = $(), s = o(t);
   return /* @__PURE__ */ y(S, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
     /* @__PURE__ */ e(
-      W,
+      k,
       {
-        "aria-label": $e(t.category_icon_label_aria, s),
+        "aria-label": Tt(n.category_icon_label_aria, s),
         mb: 4,
         role: "img",
-        children: /* @__PURE__ */ e(we, { categoryGuid: a })
+        children: /* @__PURE__ */ e(Se, { categoryGuid: r })
       }
     ),
-    /* @__PURE__ */ e(z, { variant: "body1", children: s })
+    /* @__PURE__ */ e(P, { variant: "Body", children: s })
   ] });
-}, ao = ({
-  categoryGuids: { guid: o, topLevelGuid: a },
-  hoveredAreaData: t,
-  cursorPosition: n,
+}, to = ({
+  categoryGuids: { guid: t, topLevelGuid: r },
+  hoveredAreaData: n,
+  cursorPosition: o,
   chartContainerRef: s
 }) => {
-  const l = ue(), m = dt(null), [h, i] = ut({ x: n.x, y: n.y });
-  if (ht(() => {
+  const h = ce(), g = ut(null), [d, l] = ht({ x: o.x, y: o.y });
+  if (gt(() => {
     (() => {
-      const p = m.current, _ = s.current;
-      if (!p || !_) return;
-      const u = p.getBoundingClientRect(), C = _.getBoundingClientRect();
-      let b = n.x, g = n.y;
-      b + u.width * 2 > C.right ? b = n.x - u.width : b - u.width < C.left && (b = n.x), g + u.height * 2 > C.bottom && (g = n.y - u.height), i({ x: b, y: g });
+      const i = g.current, b = s.current;
+      if (!i || !b) return;
+      const c = i.getBoundingClientRect(), f = b.getBoundingClientRect();
+      let C = o.x, _ = o.y;
+      C + c.width * 2 > f.right ? C = o.x - c.width : C - c.width < f.left && (C = o.x), _ + c.height * 2 > f.bottom && (_ = o.y - c.height), l({ x: C, y: _ });
     })();
-  }, [n, s]), !t) return null;
-  const d = t.reduce((f, p) => f + p.y, 0);
+  }, [o, s]), !n) return null;
+  const m = n.reduce((p, i) => p + i.y, 0);
   return /* @__PURE__ */ e(
-    pt,
+    Ue,
     {
-      ref: m,
+      ref: g,
       sx: {
         position: "absolute",
-        top: h.y,
-        left: h.x,
+        top: d.y,
+        left: d.x,
         width: 250,
         pointerEvents: "none"
       },
-      children: /* @__PURE__ */ y(ft, { children: [
-        /* @__PURE__ */ y(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-          /* @__PURE__ */ e(qe, { categoryGuid: o, topLevelCategoryGuid: a }),
-          /* @__PURE__ */ e(z, { variant: "body2", children: `${t.length}-month total` }),
-          /* @__PURE__ */ e(ve, { amount: d, bold: !0, formatString: "0,0", variant: "body2" })
+      children: /* @__PURE__ */ y(Xe, { children: [
+        /* @__PURE__ */ y(k, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+          /* @__PURE__ */ e(st, { categoryGuid: t, topLevelCategoryGuid: r }),
+          /* @__PURE__ */ e(P, { variant: "Small", children: `${n.length}-month total` }),
+          /* @__PURE__ */ e(Te, { amount: m, 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__ */ y(c.Fragment, { children: [
-          p > 0 && p % 3 === 0 && /* @__PURE__ */ e(Re, { sx: { my: 16, width: "100%" } }),
-          /* @__PURE__ */ e(We, { size: { xs: 4 }, children: /* @__PURE__ */ y(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-            /* @__PURE__ */ e(z, { color: l.palette.text.secondary, variant: "caption", children: f.x }),
+        /* @__PURE__ */ e(He, { sx: { my: 16, width: "100%" } }),
+        /* @__PURE__ */ e(Ge, { container: !0, children: n.map((p, i) => /* @__PURE__ */ y(u.Fragment, { children: [
+          i > 0 && i % 3 === 0 && /* @__PURE__ */ e(He, { sx: { my: 16, width: "100%" } }),
+          /* @__PURE__ */ e(Ge, { item: !0, xs: 4, children: /* @__PURE__ */ y(k, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+            /* @__PURE__ */ e(P, { color: h.palette.text.secondary, variant: "XSmall", children: p.x }),
             /* @__PURE__ */ e(
-              ve,
+              Te,
               {
-                amount: f.y,
+                amount: p.y,
                 bold: !0,
                 formatString: "0,0",
-                variant: "body1"
+                variant: "Body"
               }
             )
           ] }) })
-        ] }, p)) })
+        ] }, i)) })
       ] })
     }
   );
-}, ro = R(ao), io = ({
-  categoryGuids: { guid: o, topLevelGuid: a },
-  itemData: { dataIndex: t },
-  series: n,
-  xData: s
-}) => {
-  const l = _t(), m = n.data[t], h = s[t];
-  return m === void 0 || !h ? null : /* @__PURE__ */ e(Tt, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(bt, { children: /* @__PURE__ */ y(St, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-    /* @__PURE__ */ e(qe, { categoryGuid: o, topLevelCategoryGuid: a }),
-    /* @__PURE__ */ e(z, { color: l.palette.text.secondary, variant: "body2", children: Q(h, F.MONTH_SHORT_YEAR) }),
-    /* @__PURE__ */ e(ve, { amount: String(m), bold: !0, formatString: "0,0", variant: "body1" })
-  ] }) }) });
-}, co = ({
-  sx: o,
-  categoryGuids: a,
-  hoveredLegend: t,
-  legendRef: n,
+}, oo = R(to), no = ({
+  sx: t,
+  categoryGuids: r,
+  hoveredLegend: n,
+  legendRef: o,
   onHoverLegend: s,
-  onClickLegend: l
+  onClickLegend: h
 }) => {
-  const { isMobile: m } = J(), { getCategoryName: h } = Y();
+  const { isMobile: g } = ee(), { getCategoryName: d } = $();
   return /* @__PURE__ */ e(
     S,
     {
       direction: "row",
       flexWrap: "wrap",
-      gap: m ? 2 : 6,
+      gap: g ? 2 : 6,
       justifyContent: "start",
-      ref: n,
-      sx: o,
-      children: a.map(({ guid: i, top_level_guid: d }) => {
-        const f = t === i, p = Me[i], _ = Me[d], u = p ?? _ ?? Me.default, C = u + "33";
+      ref: o,
+      sx: t,
+      children: r.map(({ guid: l, top_level_guid: m }) => {
+        const p = n === l, i = Ae[l], b = Ae[m], c = i ?? b ?? Ae.default, f = c + "33";
         return /* @__PURE__ */ y(
-          xe,
+          be,
           {
-            onClick: () => l(i),
-            onMouseEnter: () => s(i),
+            onClick: () => h(l),
+            onMouseEnter: () => s(l),
             onMouseLeave: () => s(null),
             sx: {
               color: "text.primary",
@@ -165,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,
+                k,
                 {
                   sx: {
                     width: 16,
                     height: 16,
-                    marginRight: m ? 5 : 10,
+                    marginRight: g ? 5 : 10,
                     borderRadius: "2px",
-                    backgroundColor: t ? f ? u : C : u
+                    backgroundColor: n ? p ? c : f : c
                   }
                 }
               ),
-              /* @__PURE__ */ e(z, { variant: "body1", children: h(i) })
+              /* @__PURE__ */ e(P, { variant: "Body", children: d(l) })
             ]
           },
-          i
+          l
         );
       })
     }
   );
-}, lo = ({
-  onHoverArea: o,
-  onHoverPoint: a,
-  onHoverLegend: t,
-  onClickLegend: n,
+}, so = ({
+  categoryGuids: { guid: t, topLevelGuid: r },
+  series: n,
+  xData: o
+}) => {
+  const s = Ct(), h = ce();
+  if (!s?.identifier) return null;
+  const { dataIndex: g, seriesId: d } = s.identifier;
+  if (g == null || !d) return null;
+  const m = n.find((i) => i.id === d)?.data?.[g], p = o?.[g];
+  return m === void 0 || !p ? null : /* @__PURE__ */ e(Ue, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(Xe, { children: /* @__PURE__ */ y(k, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+    /* @__PURE__ */ e(st, { categoryGuid: t, topLevelCategoryGuid: r }),
+    /* @__PURE__ */ e(P, { color: h.palette.text.secondary, variant: "Small", children: U(p, G.MONTH_SHORT_YEAR) }),
+    /* @__PURE__ */ e(Te, { amount: String(m), bold: !0, formatString: "0,0", variant: "Body" })
+  ] }) }) });
+}, ro = ({
+  onHoverArea: t,
+  onHoverPoint: r,
+  onHoverLegend: n,
+  onClickLegend: o,
   stackedDatasets: s,
-  unstackedDatasets: l = [],
-  availableHeight: m = 0,
-  minimumHeight: h = 350
+  unstackedDatasets: h = [],
+  availableHeight: g = 0,
+  minimumHeight: d = 350
 }) => {
-  const i = ue(), { isMobile: d } = J(), [f, { height: p }] = mt(), _ = c.useRef(null), [u, C] = c.useState(0);
-  c.useEffect(() => {
-    const r = Math.max(m - p, h);
-    C(r);
-  }, [m, p]);
-  const [b, g] = c.useState(null), [v, E] = c.useState({
+  const l = ce(), { isMobile: m } = ee(), [p, { height: i }] = _t(), b = u.useRef(null), [c, f] = u.useState(0);
+  u.useEffect(() => {
+    const a = Math.max(g - i, d);
+    f(a);
+  }, [g, i]);
+  const [C, _] = u.useState(null), [x, v] = 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)), he = 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(...he) / 100) * 100, _e = Math.ceil(Math.max(se, ae) / 100) * 100, U = s.map((r, T) => ({
+  }), { hoveredSeriesId: D, hoveredAreaData: M, isAreaHovered: L, cursorPos: A } = x, te = L && D && M, W = !te, F = [...s, ...h], z = F[0]?.dataset.length ?? 0, X = F.flatMap((a) => a.dataset.map((T) => T.x)), fe = F.flatMap((a) => a.dataset.map((T) => T.y)), oe = s[0]?.dataset?.map(
+    (a, T) => s.reduce((E, j) => E + j.dataset[T]?.y || 0, 0)
+  ) ?? [0], re = Math.max(...oe), Z = Math.max(
+    ...h.flatMap((a) => a.dataset.map((T) => T.y))
+  ), le = Math.floor(Math.min(...fe) / 100) * 100, ne = Math.ceil(Math.max(re, Z) / 100) * 100, K = s.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),
+    color: s[T].category_color ?? l.palette.primary.main,
+    data: a.dataset.map((E) => E.y),
     label: s[T].category_name,
     stack: "total",
     type: "line",
     highlightScope: { highlight: "item" },
-    valueFormatter: (L) => oe(L, "0,0")
-  })), K = l.map((r, T) => ({
+    valueFormatter: (E) => se(E, "0,0")
+  })), ae = h.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((E) => E.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,
+    valueFormatter: (E) => se(E, "0,0")
+  })), Q = [...K, ...ae], ie = [
+    ...K.map(({ guid: a, top_level_guid: T }) => ({
+      guid: a,
       top_level_guid: T
     })),
-    ...K.map(({ guid: r, top_level_guid: T }) => ({
-      guid: r,
+    ...ae.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])];
+  ], q = (a) => {
+    const E = a.startsWith("stacked-") ? s[parseInt(a.split("-")[1])] : h[parseInt(a.split("-")[1])];
     return {
-      guid: L?.category_guid,
-      topLevelGuid: L?.top_level_category_guid
+      guid: E?.category_guid,
+      topLevelGuid: E?.top_level_category_guid
     };
-  }, te = (r) => {
-    g(r), t?.(r ?? "");
-  }, ie = (r) => {
-    n?.(r ?? "");
-  }, ge = () => {
-    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), Te = j && r?.dataIndex !== void 0, Ee = j && r?.dataIndex === void 0;
-    if (Te)
-      E({
+  }, w = (a) => {
+    _(a), n?.(a ?? "");
+  }, O = (a) => {
+    o?.(a ?? "");
+  }, Y = () => {
+    const a = q(String(D)).guid;
+    a && o?.(a);
+  }, de = (a) => {
+    const T = String(a?.seriesId), E = q(T).guid, j = Q.find((ue) => ue.id === T), Le = j && a?.dataIndex !== void 0, Ee = j && a?.dataIndex === void 0;
+    if (Le)
+      v({
         hoveredSeriesId: T,
         hoveredAreaData: null,
         isAreaHovered: !1,
-        cursorPos: k
-      }), a?.(L);
+        cursorPos: A
+      }), r?.(E);
     else if (Ee) {
-      const de = j?.data.map((be, Ie) => ({
-        x: H[Ie],
-        y: be
+      const ue = j?.data.map((De, Me) => ({
+        x: X[Me],
+        y: De
       })) ?? [];
-      E({
+      v({
         hoveredSeriesId: T,
-        hoveredAreaData: de,
+        hoveredAreaData: ue,
         isAreaHovered: !0,
-        cursorPos: k
-      }), o?.(L);
+        cursorPos: A
+      }), t?.(E);
     } else
-      E({
+      v({
         hoveredSeriesId: null,
         hoveredAreaData: null,
         isAreaHovered: !1,
-        cursorPos: k
+        cursorPos: A
       });
-  }, le = (r) => {
-    const T = r.currentTarget.getBoundingClientRect();
-    E((L) => ({
-      ...L,
+  }, ye = (a) => {
+    if (a.target instanceof Element && a.target.classList[0]?.includes("MuiMarkElement-root"))
+      return;
+    const T = a.currentTarget.getBoundingClientRect();
+    v((E) => ({
+      ...E,
       cursorPos: {
-        x: r.clientX - T.left,
-        y: r.clientY - T.top
+        x: a.clientX - T.left,
+        y: a.clientY - T.top
       }
     }));
-  }, D = {
+  }, Ie = {
     p: 4,
     "& .MuiBarLabel-root": {
       fontSize: 10,
@@ -308,18 +318,18 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
     '& [class*="MuiLineElement-series-unstacked-"]': {
       strokeWidth: 3
     },
-    ...b && U.reduce((r, T, L) => {
-      const j = `.MuiAreaElement-series-stacked-${L}`;
-      return r[j] = {
-        opacity: U[L].guid === b ? 0.9 : 0.2
-      }, r;
+    ...C && K.reduce((a, T, E) => {
+      const j = `.MuiAreaElement-series-stacked-${E}`;
+      return a[j] = {
+        opacity: K[E].guid === C ? 0.9 : 0.2
+      }, a;
     }, {})
   };
   return /* @__PURE__ */ e(
-    W,
+    k,
     {
-      onMouseMove: le,
-      ref: _,
+      onMouseMove: ye,
+      ref: b,
       sx: {
         position: "relative",
         touchAction: "pan-y",
@@ -339,70 +349,68 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
           sx: { width: "100%", position: "relative" },
           children: [
             /* @__PURE__ */ e(
-              gt,
+              yt,
               {
-                height: u,
-                margin: { bottom: 50 },
-                onAreaClick: ge,
-                onHighlightChange: ce,
-                series: re,
+                height: c,
+                hideLegend: !0,
+                margin: { bottom: 24, left: 12, right: 54, top: 48 },
+                onAreaClick: Y,
+                onHighlightChange: de,
+                series: Q,
                 skipAnimation: !0,
                 slotProps: {
-                  legend: {
-                    hidden: !0
-                  }
+                  tooltip: { trigger: W ? "item" : "none" }
                 },
                 slots: {
-                  itemContent: (r) => G && I ? /* @__PURE__ */ e(
-                    io,
+                  tooltip: W && D ? (a) => /* @__PURE__ */ e(ft, { children: /* @__PURE__ */ e(
+                    so,
                     {
-                      categoryGuids: Z(I),
-                      xData: H,
-                      ...r
+                      ...a,
+                      categoryGuids: q(D),
+                      series: Q,
+                      xData: X
                     }
-                  ) : null
-                },
-                sx: D,
-                tooltip: {
-                  trigger: G ? "item" : "none"
+                  ) }) : void 0
                 },
+                sx: Ie,
                 xAxis: [
                   {
-                    data: H,
+                    data: X,
                     scaleType: "time",
-                    valueFormatter: (r) => Q(r, F.MONTH_SHORT_YEAR),
-                    tickNumber: ne
+                    valueFormatter: (a) => U(a, G.MONTH_SHORT_YEAR),
+                    tickNumber: z
                     // How many ticks to show on the x-axis
                   }
                 ],
                 yAxis: [
                   {
-                    min: $,
-                    max: _e || 100
+                    min: le,
+                    max: ne || 100,
+                    valueFormatter: (a) => pt(a).format("0a")
                   }
                 ]
               }
             ),
             /* @__PURE__ */ e(
-              co,
+              no,
               {
-                categoryGuids: X,
-                hoveredLegend: b,
-                legendRef: f,
-                onClickLegend: ie,
-                onHoverLegend: te,
-                sx: { px: d ? 0 : 24 }
+                categoryGuids: ie,
+                hoveredLegend: C,
+                legendRef: p,
+                onClickLegend: O,
+                onHoverLegend: w,
+                sx: { px: m ? 0 : 24 }
               }
             ),
-            A && /* @__PURE__ */ e(
-              ro,
+            te && /* @__PURE__ */ e(
+              oo,
               {
-                categoryGuids: Z(I),
-                chartContainerRef: _,
-                cursorPosition: k,
-                hoveredAreaData: x.map((r) => ({
-                  ...r,
-                  x: Q(r.x, F.MONTH_SHORT_YEAR)
+                categoryGuids: q(D),
+                chartContainerRef: b,
+                cursorPosition: A,
+                hoveredAreaData: M.map((a) => ({
+                  ...a,
+                  x: U(a.x, G.MONTH_SHORT_YEAR)
                 }))
               }
             )
@@ -411,29 +419,32 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       )
     }
   );
-}, Qe = ({ selectedTab: o, onTabChange: a }) => /* @__PURE__ */ e(
-  Nt,
+}, rt = ({ selectedTab: t, onTabChange: r }) => /* @__PURE__ */ e(
+  At,
   {
     exclusive: !0,
-    onChange: a,
+    onChange: r,
     orientation: "horizontal",
-    value: o,
-    children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(Ht, { 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))
+    value: t,
+    children: ["Chart", "Table"].map((n) => /* @__PURE__ */ e(Mt, { color: "primary", sx: { width: 56 }, value: n, children: n === "Chart" ? /* @__PURE__ */ e(_e, { name: "table_chart_view" }) : /* @__PURE__ */ e(_e, { name: "format_list_bulleted" }) }, n))
   }
-), Je = ({ selectedDateRange: o, selectedCategoryGuid: a }) => {
-  const { trends: t } = O(), { isMobile: n, isDesktop: s } = J(), { getCategoryName: l } = Y(), m = c.useMemo(() => {
-    const h = Q(
-      o.start,
-      n ? F.MONTH_SHORT_YEAR : F.MONTH_YEAR
-    ), i = Q(
-      o.end,
-      n ? F.MONTH_SHORT_YEAR : F.MONTH_YEAR
+), at = ({ selectedDateRange: t, selectedCategoryGuid: r }) => {
+  const { trends: n } = H(), { isMobile: o, isDesktop: s } = ee(), { getCategoryName: h } = $(), g = u.useMemo(() => {
+    const d = t.start.getFullYear() === t.end.getFullYear() ? U(
+      t.start,
+      o ? G.MONTH_SHORT : G.MONTH_LONG
+    ) : U(
+      t.start,
+      o ? G.MONTH_SHORT_YEAR : G.MONTH_YEAR
+    ), l = U(
+      t.end,
+      o ? G.MONTH_SHORT_YEAR : G.MONTH_YEAR
     );
-    return `${h} - ${i}`;
-  }, [o, n]);
-  return /* @__PURE__ */ y(W, { sx: { mr: 10, minWidth: "60%" }, children: [
+    return `${d} - ${l}`;
+  }, [t, o]);
+  return /* @__PURE__ */ y(k, { sx: { mr: 10, minWidth: "60%" }, children: [
     /* @__PURE__ */ e(
-      z,
+      P,
       {
         display: "block",
         fontWeight: 700,
@@ -442,235 +453,263 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
           overflow: "visible",
           textOverflow: "unset"
         },
-        variant: s ? "h3" : "body1",
-        children: l(a) || t.sub_title
+        variant: s ? "H3" : "Body",
+        children: h(r) || n.sub_title
       }
     ),
-    /* @__PURE__ */ e(z, { variant: s ? "body1" : "body2", children: m })
+    /* @__PURE__ */ e(P, { variant: s ? "subtitle1" : "body2", children: g })
   ] });
-}, uo = (o) => {
-  const a = o.row[o.field];
-  return /* @__PURE__ */ e(S, { alignItems: "flex-end", tabIndex: o.tabIndex, children: /* @__PURE__ */ e(ve, { amount: a, variant: "body2" }) });
-}, ho = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
-  const { getCategoryName: t } = Y(), { categories: n } = O(), s = n.default_categories[o]?.replace(/&amp;/g, "&") ?? t(o);
+}, $e = (t) => {
+  const r = t.row.category_guid, n = t.row.top_level_category_guid, o = r === Be.INCOME || n === Be.INCOME, s = t.row[t.field];
+  return /* @__PURE__ */ e(S, { alignItems: "flex-end", direction: "row", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(
+    Te,
+    {
+      amount: s,
+      isIncome: o,
+      sx: { fontWeight: o ? 600 : 500 },
+      symbol: o ? "+" : void 0,
+      variant: "body2"
+    }
+  ) });
+}, ao = ({ categoryGuid: t, topLevelCategoryGuid: r }) => {
+  const { getCategoryName: n } = $(), { categories: o } = H(), s = o.default_categories[t]?.replace(/&amp;/g, "&") ?? n(t);
   return /* @__PURE__ */ y(S, { alignItems: "center", direction: "row", justifyContent: "center", children: [
-    /* @__PURE__ */ e(
-      W,
-      {
-        "aria-label": $e(n.category_icon_label_aria, s),
-        role: "img",
-        children: /* @__PURE__ */ e(we, { categoryGuid: a })
-      }
-    ),
-    /* @__PURE__ */ e(z, { sx: { ml: 12, pb: 6 }, variant: "body2", children: s })
+    /* @__PURE__ */ e(k, { "aria-hidden": !0, children: /* @__PURE__ */ e(Se, { categoryGuid: r, variant: "twotone" }) }),
+    /* @__PURE__ */ e(P, { sx: { ml: 12 }, variant: "body2", children: s })
   ] });
-}, go = (o) => /* @__PURE__ */ e(S, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
-  ho,
+}, io = (t) => /* @__PURE__ */ e(S, { alignItems: "center", direction: "row", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(
+  ao,
   {
-    categoryGuid: o.row.category,
-    topLevelCategoryGuid: o.row.top_level_category_guid
+    categoryGuid: t.row.category,
+    topLevelCategoryGuid: t.row.top_level_category_guid
   }
-) }), mo = (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);
+) }), co = (t, r) => {
+  const n = [], o = new Date(t);
+  for (; o <= r; ) {
+    const s = U(o, G.MONTH_LONG);
+    n.push(s), o.setMonth(o.getMonth() + 1);
   }
-  return t;
-}, et = ({
-  monthlyCategoryTotals: o,
-  selectedDateRange: a,
-  selectedCategory: t,
+  return n;
+}, it = ({
+  selectedDateRange: t,
+  selectedCategory: r,
   onClickRow: n,
-  height: s = "100dvh",
-  sx: l = {}
+  height: o = "100%",
+  sx: s = {}
 }) => {
-  const { onEvent: m } = P(), h = Q(/* @__PURE__ */ new Date(), F.MONTH_SHORT), [i, d] = c.useState([
-    { field: h, sort: "desc" }
-  ]), f = c.useMemo(() => mo(a.start, a.end), [a]), p = [
+  const h = ce(), { onEvent: g } = V(), { transactions: d, spending: l } = H(), { trendsCategories: m } = $(), p = u.useMemo(() => co(t.start, t.end), [t]), i = h.palette.mode === "light", b = [
     {
       field: "category",
       flex: 1,
-      headerName: "Category",
+      headerClassName: "trends-table-header",
+      headerName: d.category_title,
       minWidth: 175,
-      renderHeader: Ge,
-      renderCell: go,
+      renderHeader: ke,
+      renderCell: io,
       sortable: !0,
+      sortComparator: vt,
       type: "string"
     },
-    ...f.map(
-      (u) => ({
-        field: u,
+    ...p.map(
+      (C) => ({
+        field: C,
         flex: 1,
-        headerName: u,
+        headerClassName: "trends-table-header",
+        headerName: C,
         minWidth: 100,
-        renderHeader: Ge,
-        renderCell: uo,
+        renderHeader: ke,
+        renderCell: $e,
         align: "right",
         headerAlign: "right",
         sortable: !0,
         hideSortIcons: !1,
         type: "number",
-        sortComparator: Dt
+        sortComparator: Ve
       })
-    )
-  ], _ = c.useMemo(() => {
-    const u = o.filter(
-      (g) => !Et(g) && !It(g)
-    ), b = (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(b);
-  }, [o, t]);
-  return /* @__PURE__ */ e(W, { sx: { height: s, width: "100%", overflowX: "auto", boxShadow: "none", ...l }, children: /* @__PURE__ */ e(
-    Wt,
+    ),
+    {
+      field: "total",
+      flex: 1,
+      headerClassName: "trends-table-header",
+      headerName: `${l.total[0].toUpperCase()}${l.total.slice(1)}`,
+      minWidth: 100,
+      renderHeader: ke,
+      renderCell: $e,
+      align: "right",
+      headerAlign: "right",
+      sortable: !0,
+      hideSortIcons: !1,
+      type: "number",
+      sortComparator: Ve
+    }
+  ], c = u.useMemo(() => {
+    if (r)
+      return m.find((C) => C.guid === r);
+  }, [r, m]), f = u.useMemo(() => {
+    let C = m;
+    return c && (C = c.subCategories.filter(
+      (_) => _.monthlyAmounts.some((x) => x.amount !== 0)
+    )), C.map((_) => {
+      let x = _.totalMonthlyAmounts;
+      c && (x = _.monthlyAmounts);
+      const v = x.reduce(
+        (M, L) => {
+          const A = U(Pe(L.isoDate), G.MONTH_LONG);
+          return M[A] = L.amount, M;
+        },
+        {}
+      ), D = x.reduce((M, L) => {
+        const A = U(Pe(L.isoDate), G.MONTH_LONG);
+        return M + (p.includes(A) ? L.amount : 0);
+      }, 0);
+      return {
+        id: _.guid,
+        category: _.guid,
+        top_level_category_guid: _.parent_guid || _.guid,
+        total: D,
+        ...v
+      };
+    });
+  }, [m]);
+  return /* @__PURE__ */ e(k, { sx: { height: o, width: "100%", overflowX: "auto", boxShadow: "none", ...s }, children: /* @__PURE__ */ e(
+    kt,
     {
-      columns: p,
+      columns: b,
       disableColumnFilter: !0,
       disableColumnMenu: !0,
       hideFooter: !0,
-      initialState: { sorting: { sortModel: i } },
-      onRowClick: (u) => {
-        n?.(u.row.category), m(w.TRENDS_CLICK_LIST_ITEM, {
-          ...V,
-          listItem: vt[u.row.category]
+      initialState: { sorting: { sortModel: [{ field: "category", sort: "asc" }] } },
+      onRowClick: (C) => {
+        c || n?.(C.row.category), g(I.TRENDS_CLICK_LIST_ITEM, {
+          ...B,
+          listItem: St[C.row.category]
         });
       },
-      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: i ? "neutral.50" : "neutral.800",
+          borderBottom: "none"
+        },
+        "& .trends-table-header": {
+          bgcolor: i ? "neutral.50" : "neutral.800"
+        }
+      }
     }
   ) });
-}, po = {
+}, lo = {
   title: "Transaction List"
-}, fo = ({
-  categoryGuid: o,
-  dateRange: a,
-  isOpen: t,
-  onClose: n
+}, uo = ({
+  categoryGuid: t,
+  dateRange: r,
+  isOpen: n,
+  onClose: o
 }) => {
-  const { onEvent: s } = P(), { selectedAccountGuids: l } = ye(), { 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: s } = V(), { selectedAccountGuids: h } = pe(), { common: g } = H(), { setFilter: d, sortedTransactions: l } = xe(), [m, p] = u.useState(""), i = u.useMemo(
+    () => l.find((c) => c.guid === m),
+    [m, l]
   );
-  c.useEffect(() => {
-    h({
-      accounts: l,
-      dateRange: a,
-      custom: (u) => o === "" || o === u.category_guid || o === u.top_level_category_guid,
-      showSplits: !!o
+  u.useEffect(() => {
+    d({
+      accounts: h,
+      dateRange: r,
+      custom: (c) => t === "" || t === c.category_guid || t === c.top_level_category_guid,
+      showSplits: !!t
     });
-  }, [l, o, a]), c.useEffect(() => s(w.TRENDS_VIEW_TRANSACTIONS), []);
-  const _ = () => {
-    f(""), n();
+  }, [h, t, r]), u.useEffect(() => s(I.TRENDS_VIEW_TRANSACTIONS), []);
+  const b = () => {
+    p(""), o();
   };
   return /* @__PURE__ */ y(
-    ke,
+    Ne,
     {
-      ariaLabelClose: m.close_aria,
-      isOpen: t,
-      onClose: _,
-      title: po.title,
+      ariaLabelClose: g.close_aria,
+      isOpen: n,
+      onClose: b,
+      title: lo.title,
       children: [
-        p && /* @__PURE__ */ e(Xe, { transaction: p }),
-        !p && /* @__PURE__ */ e(Ze, { onClick: f })
+        i && /* @__PURE__ */ e(tt, { transaction: i }),
+        !i && /* @__PURE__ */ e(ot, { onClick: p })
       ]
     }
   );
-}, yo = R(fo), Co = ({ 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,
-    monthlyCategoryTotals: _,
-    getCategoryName: u
-  } = Y(), {
-    isTransactionDataLoaded: C,
-    loadTransactionData: b,
-    sortedTransactions: g
-  } = De(), { selectedDateRange: v, setSelectedDateRange: E } = Ce(), { isInitialized: I, selectedAccounts: x, setSelectedAccounts: M } = ye(), { trends: k } = O(), [A, G] = c.useState(!1), [ee, ne] = c.useState(!1), [H, he] = 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(), C || b().finally(), () => window.removeEventListener("resize", D);
-  }, []), c.useEffect(() => {
-    M(i);
-  }, [i]), c.useEffect(() => {
-    I && p(
-      x,
-      v.start,
-      v.end
+}, ho = R(uo), go = ({ onBackClick: t, sx: r }) => {
+  const { onEvent: n } = V(), { isDesktop: o, isTablet: s, isMobile: h } = ee(), { visibleAccounts: g } = ve(), { loadMonthlyCategoryTotals: d, monthlyCategoryTotals: l, getCategoryName: m } = $(), { sortedTransactions: p } = xe(), { selectedDateRange: i, setSelectedDateRange: b } = Ce(), { isCopyLoaded: c, isInitialized: f, selectedAccounts: C, setSelectedAccounts: _ } = pe(), { trends: x } = H(), [v, D] = u.useState(!1), [M, L] = u.useState(!1), [A, te] = u.useState("Chart"), [W, F] = u.useState(""), [z, X] = u.useState(window.innerHeight), oe = z - (h ? 315 : 345);
+  we({
+    widgetName: "TrendsFullWidget",
+    isLoaded: v
+  }), u.useEffect(() => {
+    const w = () => X(window.innerHeight);
+    return window.addEventListener("resize", w), () => window.removeEventListener("resize", w);
+  }, []), u.useEffect(() => {
+    _(g);
+  }, [g]), u.useEffect(() => {
+    f && d(
+      C,
+      i.start,
+      i.end
     ).finally(() => {
-      G(!0);
+      D(!0);
     });
-  }, [I, x, v]);
-  const K = c.useMemo(() => {
-    if (!A) return { stackedDatasets: [], unstackedDatasets: [] };
-    const D = Lt(
-      _,
-      v.start,
-      v.end
-    ), r = B.length ? D.filter(
-      (T) => T.top_level_category_guid === B || T.category_guid === B
-    ) : Mt(D);
+  }, [f, C, i]);
+  const re = u.useMemo(() => {
+    if (!v) return { stackedDatasets: [], unstackedDatasets: [] };
+    const w = wt(
+      l,
+      i.start,
+      i.end
+    ), O = W.length ? w.filter(
+      (Y) => Y.top_level_category_guid === W || Y.category_guid === W
+    ) : It(w);
     return {
-      stackedDatasets: r.filter(Rt),
-      unstackedDatasets: r.filter(At)
+      stackedDatasets: O.filter(Lt),
+      unstackedDatasets: O.filter(Et)
     };
-  }, [_, B, v]), re = (D, r) => {
-    he(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"
+  }, [l, W, i]), Z = (w, O) => {
+    te(O ?? A), n(I.TRENDS_CLICK_TOGGLE_VIEW);
+  }, le = (w) => {
+    const O = je(w?.[0], 1), Y = w?.[1], de = Re(Y, O);
+    b({ start: O, end: Y }), n(I.TRENDS_CLICK_TIME_WINDOW, {
+      time_period: de + "M"
     });
-  }, Z = () => {
-    t(w.TRENDS_CLICK_FILTER);
-  }, te = (D) => {
-    se(D);
-  }, ie = (D) => {
-    se(D), t(w.TRENDS_CLICK_LEGEND, { category: u(D) });
-  }, ge = (D) => {
-    t(w.TRENDS_HOVER_LEGEND, { category: u(D) });
-  }, ce = (D) => {
-    t(w.TRENDS_HOVER_AREA, { category: D });
-  }, le = (D) => {
-    t(w.TRENDS_HOVER_POINT, { category: D });
+  }, ne = () => {
+    n(I.TRENDS_CLICK_FILTER);
+  }, K = (w) => {
+    F(w);
+  }, ae = (w) => {
+    F(w), n(I.TRENDS_CLICK_LEGEND, { category: m(w) });
+  }, Q = (w) => {
+    n(I.TRENDS_HOVER_LEGEND, { category: m(w) });
+  }, ie = (w) => {
+    n(I.TRENDS_HOVER_AREA, { category: w });
+  }, q = (w) => {
+    n(I.TRENDS_HOVER_POINT, { category: w });
   };
-  return !I || !A ? /* @__PURE__ */ e(fe, {}) : /* @__PURE__ */ y(
-    Ue,
+  return !c || !f || !v ? /* @__PURE__ */ e(me, {}) : /* @__PURE__ */ y(
+    et,
     {
-      accountOptions: i,
-      calendarActions: { onRangeChanged: X },
-      dateRange: v,
+      accountOptions: g,
+      calendarActions: { onRangeChanged: le },
+      dateRange: i,
       dateRangeVariant: "timeframebuttons",
-      onAccountsFilterClick: Z,
-      onBackClick: o,
-      sx: a,
-      title: k.title,
+      onAccountsFilterClick: ne,
+      onBackClick: t,
+      sx: r,
+      title: x.title,
       children: [
         /* @__PURE__ */ y(
           S,
           {
             sx: {
               // eslint-disable-next-line no-nested-ternary
-              px: n ? 48 : s ? 24 : 12
+              px: o ? 48 : s ? 24 : 12
             },
             children: [
               /* @__PURE__ */ y(
@@ -678,46 +717,45 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  sx: { pb: l ? 12 : 24, pt: l ? 24 : 48 },
+                  sx: { pb: h ? 12 : 24, pt: h ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
-                      Je,
+                      at,
                       {
-                        selectedCategoryGuid: B,
-                        selectedDateRange: v
+                        selectedCategoryGuid: W,
+                        selectedDateRange: i
                       }
                     ),
-                    /* @__PURE__ */ e(Qe, { onTabChange: re, selectedTab: H })
+                    /* @__PURE__ */ e(rt, { onTabChange: Z, selectedTab: A })
                   ]
                 }
               ),
               /* @__PURE__ */ y(S, { alignItems: "center", flexDirection: "row", width: "100%", children: [
-                /* @__PURE__ */ e(W, { flexGrow: 1, children: B && /* @__PURE__ */ y(xe, { onClick: () => se(""), sx: { p: 0, pr: 5 }, children: [
-                  /* @__PURE__ */ e(Se, { name: "arrow_back" }),
-                  k.all_categories
+                /* @__PURE__ */ e(k, { flexGrow: 1, children: W && /* @__PURE__ */ y(be, { onClick: () => F(""), sx: { p: 0, pr: 5 }, children: [
+                  /* @__PURE__ */ e(_e, { name: "arrow_back" }),
+                  x.all_categories
                 ] }) }),
-                /* @__PURE__ */ e(xe, { onClick: () => ne(!0), sx: { px: 5 }, children: `${k.view_transactions} (${g.length})` })
+                /* @__PURE__ */ e(be, { onClick: () => L(!0), sx: { px: 5 }, children: `${x.view_transactions} (${p.length})` })
               ] }),
-              /* @__PURE__ */ y(W, { children: [
-                H === "Chart" && /* @__PURE__ */ e(
-                  lo,
+              /* @__PURE__ */ y(k, { children: [
+                A === "Chart" && /* @__PURE__ */ e(
+                  ro,
                   {
-                    availableHeight: U,
-                    onClickLegend: ie,
-                    onHoverArea: ce,
-                    onHoverLegend: ge,
-                    onHoverPoint: le,
-                    stackedDatasets: K.stackedDatasets,
-                    unstackedDatasets: K.unstackedDatasets
+                    availableHeight: oe,
+                    onClickLegend: ae,
+                    onHoverArea: ie,
+                    onHoverLegend: Q,
+                    onHoverPoint: q,
+                    stackedDatasets: re.stackedDatasets,
+                    unstackedDatasets: re.unstackedDatasets
                   }
                 ),
-                H === "Table" && /* @__PURE__ */ e(
-                  et,
+                A === "Table" && /* @__PURE__ */ e(
+                  it,
                   {
-                    monthlyCategoryTotals: _,
-                    onClickRow: te,
-                    selectedCategory: B,
-                    selectedDateRange: v
+                    onClickRow: K,
+                    selectedCategory: W,
+                    selectedDateRange: i
                   }
                 )
               ] })
@@ -725,27 +763,27 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
           }
         ),
         /* @__PURE__ */ e(
-          yo,
+          ho,
           {
-            categoryGuid: B,
-            dateRange: v,
-            isOpen: ee,
-            onClose: () => ne(!1)
+            categoryGuid: W,
+            dateRange: i,
+            isOpen: M,
+            onClose: () => L(!1)
           }
         )
       ]
     }
   );
-}, Nn = R(Co), _o = () => {
-  const { monthlyCategoryTotals: o } = Y(), { trends: a } = O(), t = ue(), { availableHeight: n = 300 } = ze(), s = kt(o);
+}, Nn = R(go), mo = () => {
+  const { monthlyCategoryTotals: t } = $(), { trends: r } = H(), n = ce(), { availableHeight: o = 300 } = Ze(), s = Dt(t);
   return /* @__PURE__ */ e(
-    Ne,
+    Oe,
     {
       baseline: "min",
-      colors: [t.palette.primary.main],
+      colors: [n.palette.primary.main],
       datasets: [s],
-      height: n,
-      labels: [a.spending_label],
+      height: o,
+      labels: [r.spending_label],
       showArea: !0,
       showAverage: !0,
       showLegend: !0,
@@ -754,38 +792,39 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       valueFormatterString: "0,0"
     }
   );
-}, To = R(_o), 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 } = ye();
-  return c.useEffect(() => {
-    t || n().finally();
-  }, []), c.useEffect(() => {
-    f(s);
-  }, [s]), c.useEffect(() => {
-    h && l(d).finally();
-  }, [h, d]), h ? /* @__PURE__ */ e(
-    Gt,
+}, po = R(mo), Co = ({ onPrimaryCtaClick: t, sx: r }) => {
+  const { visibleAccounts: n } = ve(), { loadMonthlyCategoryTotals: o, monthlyTotalsLoaded: s } = $(), { isInitialized: h } = We(), { trends: g } = H(), { isCopyLoaded: d, selectedAccounts: l, setSelectedAccounts: m } = pe();
+  return we({
+    widgetName: "TrendsMiniWidget",
+    isLoaded: s
+  }), u.useEffect(() => {
+    m(n);
+  }, [n]), u.useEffect(() => {
+    h && o(l).finally();
+  }, [h, l]), !d || !h ? /* @__PURE__ */ e(me, {}) : /* @__PURE__ */ e(
+    Ht,
     {
       contentStyles: { height: "calc(100% - 72px)", ":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(To, {}) : /* @__PURE__ */ e(fe, {})
+      onPrimaryCtaClick: t,
+      primaryCtaLabel: g.primary_cta,
+      subTitle: g.sub_title,
+      sx: { height: "100%", ...r },
+      title: g.mini_title,
+      children: s ? /* @__PURE__ */ e(po, {}) : /* @__PURE__ */ e(me, {})
     }
-  ) : /* @__PURE__ */ e(fe, {});
-}, Wn = R(bo), So = 70, Be = ({
-  title: o,
-  totalAmount: a,
-  transactionType: t,
-  percentage: n,
+  );
+}, Wn = R(Co), fo = 70, ze = ({
+  title: t,
+  totalAmount: r,
+  transactionType: n,
+  percentage: o,
   secondaryLabel: s,
-  shouldDisplayPercentage: l
+  shouldDisplayPercentage: h
 }) => {
-  const { availableWidth: m } = ze(), h = c.useRef(null), i = c.useRef(null), d = wt(Number(Math.abs(n)), {
+  const { availableWidth: g } = Ze(), d = u.useRef(null), l = u.useRef(null), m = xt(Number(Math.abs(o)), {
     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", C = h?.current, b = i?.current, g = C && b ? C.scrollWidth > b.clientWidth - So : !1;
+  }), p = g === 288 && se(r, "0,0.00").length > 10 ? se(r, "0,0") : se(r, "0,0.00"), i = n === "spending" ? o > 0 : o >= 0, b = n === "spending" ? "error.main" : "success.main", c = n === "spending" ? "success.main" : "text.secondary", f = d?.current, C = l?.current, _ = f && C ? f.scrollWidth > C.clientWidth - fo : !1;
   return /* @__PURE__ */ y(
     S,
     {
@@ -808,18 +847,18 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
               justifyContent: "space-between"
             },
             children: [
-              /* @__PURE__ */ e(pe, { color: "text.secondary", variant: "caption", children: o }),
-              l && /* @__PURE__ */ y(S, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
-                p ? /* @__PURE__ */ e(Vt, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e(Pt, { size: 20, sx: { color: u } }),
+              /* @__PURE__ */ e(ge, { color: "text.secondary", variant: "caption", children: t }),
+              h && /* @__PURE__ */ y(S, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+                i ? /* @__PURE__ */ e(Wt, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(Ot, { size: 20, sx: { color: c } }),
                 /* @__PURE__ */ e(
-                  pe,
+                  ge,
                   {
                     sx: {
-                      color: p ? _ : u,
+                      color: i ? b : c,
                       fontWeight: 600
                     },
                     variant: "body2",
-                    children: d
+                    children: m
                   }
                 )
               ] })
@@ -829,7 +868,7 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
         /* @__PURE__ */ y(
           S,
           {
-            ref: i,
+            ref: l,
             sx: {
               alignItems: "center",
               flexDirection: "row",
@@ -837,17 +876,17 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
             },
             children: [
               /* @__PURE__ */ e(
-                W,
+                k,
                 {
-                  ref: h,
+                  ref: d,
                   sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-                  children: /* @__PURE__ */ e(Pe, { children: f })
+                  children: /* @__PURE__ */ e(Ye, { children: p })
                 }
               ),
-              l && m >= 450 && !g && /* @__PURE__ */ e(
-                pe,
+              h && g >= 450 && !_ && /* @__PURE__ */ e(
+                ge,
                 {
-                  color: p ? _ : u,
+                  color: i ? b : c,
                   variant: "caption",
                   children: s
                 }
@@ -858,53 +897,52 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       ]
     }
   );
-}, xo = R(() => {
-  const { trends: o } = O();
+}, yo = R(() => {
+  const { trends: t } = H();
   return /* @__PURE__ */ y(S, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
-    /* @__PURE__ */ e(Ft, { size: 32 }),
+    /* @__PURE__ */ e(Gt, { size: 32 }),
     /* @__PURE__ */ y(S, { children: [
-      /* @__PURE__ */ e(pe, { fontWeight: 600, variant: "body1", children: o.zero_state_content_header }),
-      /* @__PURE__ */ e(pe, { color: "text.secondary", variant: "subtitle2", children: o.zero_state_content_description })
+      /* @__PURE__ */ e(ge, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
+      /* @__PURE__ */ e(ge, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
     ] })
   ] });
-}), On = R(({ onCtaClick: o }) => {
-  const { isAccountDataLoaded: a, loadAccountData: t, visibleAccounts: n } = Le();
-  c.useEffect(() => {
-    a || t().finally();
-  }, []);
-  const { onEvent: s } = P(), { monthlyCategoryTotals: l, loadMonthlyCategoryTotals: m, monthlyTotalsLoaded: h } = Y(), i = {
-    start: Bt(/* @__PURE__ */ new Date(), 1),
+}), On = R(({ onCtaClick: t }) => {
+  const { visibleAccounts: r } = ve(), { onEvent: n } = V(), { monthlyCategoryTotals: o, loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: h } = $(), g = {
+    start: Nt(/* @__PURE__ */ new Date(), 1),
     end: /* @__PURE__ */ new Date()
-  }, { trends: d } = O(), { selectedAccounts: f, setSelectedAccounts: p, isInitialized: _ } = ye();
-  c.useEffect(() => {
-    p(n);
-  }, [n]), c.useEffect(() => {
-    _ && m(f, i.start).then(() => {
-      s(w.TRENDS_LOAD_WIDGET, {
-        state: n?.length ? "default" : "zeroState"
+  }, { trends: d } = H(), { selectedAccounts: l, setSelectedAccounts: m, isInitialized: p } = pe();
+  we({
+    widgetName: "TrendsMicroWidget",
+    isLoaded: h
+  }), u.useEffect(() => {
+    m(r);
+  }, [r]), u.useEffect(() => {
+    p && s(l, g.start).then(() => {
+      n(I.TRENDS_LOAD_WIDGET, {
+        state: r?.length ? "default" : "zeroState"
       });
     });
-  }, [_, f]);
-  const { spendingData: u, incomeData: C } = c.useMemo(
+  }, [p, l]);
+  const { spendingData: i, incomeData: b } = u.useMemo(
     () => ({
-      spendingData: Ye(l, i),
-      incomeData: je(l, i)
+      spendingData: qe(o, g),
+      incomeData: Je(o, g)
     }),
-    [l, i]
-  ), [b, g] = u, [v, E] = C, I = Oe(g.y, b.y), x = Oe(E.y, v.y), M = _ && !n?.length, k = () => {
-    s(
-      M ? w.TRENDS_CLICK_GET_STARTED : w.TRENDS_CLICK_VIEW_MORE
-    ), o();
+    [o, g]
+  ), [c, f] = i, [C, _] = b, x = Fe(f.y, c.y), v = Fe(_.y, C.y), D = p && !r?.length, M = () => {
+    n(
+      D ? I.TRENDS_CLICK_GET_STARTED : I.TRENDS_CLICK_VIEW_MORE
+    ), t();
   };
-  return !h || !_ ? /* @__PURE__ */ e(fe, {}) : /* @__PURE__ */ e(
-    jt,
+  return !h || !p ? /* @__PURE__ */ e(me, {}) : /* @__PURE__ */ e(
+    Ft,
     {
       className: "mx-trends-microwidget",
       ctaLabel: d.micro_primary_cta_label,
-      onCTAClick: k,
-      subHeader: M ? void 0 : d.micro_subheader,
+      onCTAClick: M,
+      subHeader: D ? void 0 : d.micro_subheader,
       title: d.title,
-      children: M ? /* @__PURE__ */ e(xo, {}) : /* @__PURE__ */ y(
+      children: D ? /* @__PURE__ */ e(yo, {}) : /* @__PURE__ */ y(
         S,
         {
           sx: {
@@ -914,24 +952,24 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
           },
           children: [
             /* @__PURE__ */ e(
-              Be,
+              ze,
               {
-                percentage: I,
+                percentage: x,
                 secondaryLabel: d.micro_secondary_label,
-                shouldDisplayPercentage: g.y !== 0 && b.y !== 0,
+                shouldDisplayPercentage: f.y !== 0 && c.y !== 0,
                 title: d.spending_label,
-                totalAmount: g.y,
+                totalAmount: f.y,
                 transactionType: "spending"
               }
             ),
             /* @__PURE__ */ e(
-              Be,
+              ze,
               {
-                percentage: x,
+                percentage: v,
                 secondaryLabel: d.micro_secondary_label,
-                shouldDisplayPercentage: E.y !== 0 && v.y !== 0,
+                shouldDisplayPercentage: _.y !== 0 && C.y !== 0,
                 title: d.income_label,
-                totalAmount: E.y,
+                totalAmount: _.y,
                 transactionType: "income"
               }
             )
@@ -940,21 +978,21 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       )
     }
   );
-}), vo = R(
-  ({ isExpanded: o, onClick: a }) => {
-    const t = ue();
-    return /* @__PURE__ */ e(Xt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(Zt, { onClick: a, sx: { justifyContent: "center" }, children: /* @__PURE__ */ y(
+}), _o = R(
+  ({ isExpanded: t, onClick: r }) => {
+    const n = nt();
+    return /* @__PURE__ */ e(zt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(Kt, { onClick: r, sx: { justifyContent: "center" }, children: /* @__PURE__ */ y(
       S,
       {
-        sx: { color: t.palette.primary.main, flexDirection: "row", alignItems: "center" },
+        sx: { color: n.palette.primary.main, flexDirection: "row", alignItems: "center" },
         children: [
-          /* @__PURE__ */ e(Qt, { 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(zt, {}) : /* @__PURE__ */ e(
-            $t,
+          /* @__PURE__ */ e(jt, { children: /* @__PURE__ */ e(P, { bold: !0, variant: "body2", children: t ? "View less" : "View more" }) }),
+          /* @__PURE__ */ e(Yt, { sx: { color: n.palette.primary.main }, children: t ? /* @__PURE__ */ e(Bt, {}) : /* @__PURE__ */ e(
+            Vt,
             {
               sx: {
                 transition: "transform 0.3s ease-in-out",
-                transform: o ? "rotate(180deg)" : "rotate(0deg)"
+                transform: t ? "rotate(180deg)" : "rotate(0deg)"
               }
             }
           ) })
@@ -962,128 +1000,128 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       }
     ) }) });
   }
-), Ve = R(
+), Ke = R(
   ({
-    totalAmount: o,
-    guid: a,
-    name: t,
-    transactions: n,
+    totalAmount: t,
+    guid: r,
+    name: n,
+    transactions: o,
     onClick: s,
-    isLastItem: l = !1,
-    showDivider: m = !0
+    isLastItem: h = !1,
+    showDivider: g = !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: d } = H(), { onEvent: l } = V(), m = `${o.length} ${o.length === 1 ? d.transaction : d.transactions}`, p = () => {
+      s?.(), l(I.TRENDS_CLICK_LIST_ITEM, {
+        ...B,
+        listItem: n
       });
     };
-    return /* @__PURE__ */ y(c.Fragment, { children: [
+    return /* @__PURE__ */ y(u.Fragment, { children: [
       /* @__PURE__ */ e(
-        Ke,
+        Qe,
         {
-          leftIcon: a ? /* @__PURE__ */ e(we, { categoryGuid: a }) : void 0,
-          onClick: f,
-          rightContent: oe(Math.abs(o), "0,0.00"),
-          rightIcon: s ? /* @__PURE__ */ e(Kt, {}) : void 0,
-          subtitle: d,
-          title: t
+          leftIcon: r ? /* @__PURE__ */ e(Se, { categoryGuid: r }) : void 0,
+          onClick: p,
+          rightContent: se(Math.abs(t), "0,0.00"),
+          rightIcon: s ? /* @__PURE__ */ e(mt, {}) : void 0,
+          subtitle: m,
+          title: n
         }
       ),
-      m && /* @__PURE__ */ e(Re, { sx: { ml: l ? 24 : 68 } })
-    ] }, a);
+      g && /* @__PURE__ */ e(He, { sx: { ml: h ? 24 : 68 } })
+    ] }, r);
   }
-), wo = 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 C = Math.floor(o / 64) - 1, b = n.length + t.length;
-      C !== n.length && (s(p ? Math.max(C, 5) : 5), f(C >= b));
-    }, [o]);
-    const _ = () => {
-      f(!d), i(w.TRENDS_CLICK_VIEW_MORE, {
-        ...V
+), bo = R(
+  ({ availableHeight: t = 0, onCategoryClick: r }) => {
+    const { collapsedCategories: n, visibleCategories: o, setVisibleListLength: s } = Ce(), { isLargeDesktop: h, isDesktop: g } = ee(), { trends: d } = H(), { onEvent: l } = V(), [m, p] = u.useState(!1), i = g || h;
+    u.useEffect(() => {
+      const f = Math.floor(t / 64) - 1, C = o.length + n.length;
+      f !== o.length && (s(i ? Math.max(f, 5) : 5), p(f >= C));
+    }, [t]);
+    const b = () => {
+      p(!m), l(I.TRENDS_CLICK_VIEW_MORE, {
+        ...B
       });
-    }, u = n.length + (d ? t.length : 0);
-    return /* @__PURE__ */ e(S, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ y(Ut, { children: [
-      /* @__PURE__ */ e(S, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Pe, { children: h.categories }) }),
-      n.map((C, b) => /* @__PURE__ */ e(
-        Ve,
+    }, c = o.length + (m ? n.length : 0);
+    return /* @__PURE__ */ e(S, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ y($t, { children: [
+      /* @__PURE__ */ e(S, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Ye, { children: d.categories }) }),
+      o.map((f, C) => /* @__PURE__ */ e(
+        Ke,
         {
-          ...C,
-          isLastItem: b === u - 1,
-          onClick: C.transactions.length > 0 ? () => a(C) : void 0,
+          ...f,
+          isLastItem: C === c - 1,
+          onClick: f.transactions.length > 0 ? () => r(f) : void 0,
           showDivider: !0
         },
-        C.guid
+        f.guid
       )),
       /* @__PURE__ */ e(
-        Yt,
+        Pt,
         {
-          in: d,
+          in: m,
           sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
-          children: t.map((C, b) => {
-            const g = n.length + b;
+          children: n.map((f, C) => {
+            const _ = o.length + C;
             return /* @__PURE__ */ e(
-              Ve,
+              Ke,
               {
-                ...C,
-                isLastItem: g === u - 1,
-                onClick: C.transactions.length > 0 ? () => a(C) : void 0,
+                ...f,
+                isLastItem: _ === c - 1,
+                onClick: f.transactions.length > 0 ? () => r(f) : void 0,
                 showDivider: !0
               },
-              C.guid
+              f.guid
             );
           })
         }
       ),
-      t.length > 0 && /* @__PURE__ */ e(vo, { isExpanded: d, onClick: _ })
+      n.length > 0 && /* @__PURE__ */ e(_o, { isExpanded: m, onClick: b })
     ] }) });
   }
-), Do = ({ 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, C = d ? 170 : 124, b = d ? 56 : 0, g = o.length > 0 ? u + b : C, v = d && o.length > 0 ? u : void 0;
-  return /* @__PURE__ */ e(xt, { sx: { height: g }, children: /* @__PURE__ */ e(
-    Ot,
+), To = ({ beats: t, onInsightCardClick: r }) => {
+  const { onEvent: n } = V(), { isMobile: o, isDesktop: s, isLargeDesktop: h } = ee(), { beatStore: g, endpoint: d, sessionToken: l } = We(), m = s || h, p = m || o ? 1 : 2, i = () => null, b = (v) => {
+    r?.(v), n(I.TRENDS_CLICK_INSIGHT, B);
+  }, c = m ? 200 : 170, f = m ? 170 : 124, C = m ? 56 : 0, _ = t.length > 0 ? c + C : f, x = m && t.length > 0 ? c : void 0;
+  return /* @__PURE__ */ e(Ut, { sx: { height: _ }, children: /* @__PURE__ */ e(
+    Rt,
     {
-      areBeatsLoading: m.isLoading,
-      beats: o,
-      endpoint: h,
-      heightOverrides: v,
-      logOutUser: p,
-      onCardClick: _,
+      areBeatsLoading: g.isLoading,
+      beats: t,
+      endpoint: d,
+      heightOverrides: x,
+      logOutUser: i,
+      onCardClick: b,
       showBorder: !0,
       showCTAColocatedWithText: !1,
       showCarouselControls: !0,
-      showHeader: d,
+      showHeader: m,
       showIcon: !0,
       showWithMargin: !1,
-      token: i,
+      token: l,
       userHasFullInsightFeedBeats: !1,
       variant: "outlined",
-      visibleCardsCount: f
+      visibleCardsCount: p
     }
   ) });
-}, Lo = R(Do), Eo = R(({ chartLabel: o, chartColor: a }) => {
-  const { onEvent: t } = P(), {
-    categoryDetailsChartData: { monthlyAmounts: n, tooltipLabels: s }
+}, So = R(To), xo = R(({ chartLabel: t, chartColor: r }) => {
+  const { onEvent: n } = V(), {
+    categoryDetailsChartData: { monthlyAmounts: o, tooltipLabels: s }
   } = Ce();
   return /* @__PURE__ */ e(S, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
-    Ne,
+    Oe,
     {
       baseline: "min",
-      colors: [a],
+      colors: [r],
       curveType: "bump",
       customTooltipLabels: s,
-      datasets: [n],
+      datasets: [o],
       height: 265,
-      labels: [o],
+      labels: [t],
       markStyles: () => ({
-        stroke: a
+        stroke: r
       }),
       onItemClick: () => {
-        t(w.TRENDS_CLICK_CHART, V);
+        n(I.TRENDS_CLICK_CHART, B);
       },
       showArea: !0,
       showAverage: !0,
@@ -1098,100 +1136,100 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       valueFormatterString: "0,0"
     }
   ) });
-}), Io = R(({ onClose: o }) => {
-  const a = ue(), { onEvent: t } = P(), { common: n, trends: s } = O(), { selectedCategoryData: l, selectedDateRangeMonthRange: m } = Ce(), { sortedTransactions: h } = De(), [i, d] = c.useState(null);
-  if (!l)
+}), vo = R(({ onClose: t }) => {
+  const r = nt(), { onEvent: n } = V(), { common: o, trends: s } = H(), { selectedCategoryData: h, selectedDateRangeMonthRange: g } = Ce(), { sortedTransactions: d } = xe(), [l, m] = u.useState(null);
+  if (!h)
     return null;
-  const { guid: f, name: p, is_income: _, totalAmount: u } = l, C = _ ? s.category_income : s.category_spending, b = eo(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: p, name: i, is_income: b, totalAmount: c } = h, f = b ? s.category_income : s.category_spending, C = Zt(p, r), _ = b ? s.income_label : s.spending_label, x = ` ${h.transactions.length === 1 ? s.transaction : s.transactions} (${h.transactions.length})`, v = u.useMemo(
+    () => d.find((L) => L.guid === l),
+    [l, d]
+  ), D = (L) => L.category_guid === p || L.top_level_category_guid === p, M = () => {
+    t?.(), n(I.TRENDS_CLICK_BACK, B);
   };
   return /* @__PURE__ */ y(
-    ke,
+    Ne,
     {
       ariaLabelClose: s.close_category_details,
       isOpen: !0,
-      onClose: x,
+      onClose: M,
       shouldShowHeaderShadow: !0,
-      title: C,
+      title: f,
       children: [
         /* @__PURE__ */ y(S, { sx: { alignItems: "center", height: "100%" }, children: [
-          /* @__PURE__ */ y(Jt, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
+          /* @__PURE__ */ y(Xt, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
             /* @__PURE__ */ e(
-              Ke,
+              Qe,
               {
-                leftIcon: /* @__PURE__ */ e(we, { categoryGuid: f }),
-                rightContent: oe(Math.abs(u), "0,0.00"),
-                subtitle: m,
-                title: p
+                leftIcon: /* @__PURE__ */ e(Se, { categoryGuid: p }),
+                rightContent: se(Math.abs(c), "0,0.00"),
+                subtitle: g,
+                title: i
               }
             ),
-            /* @__PURE__ */ e(Eo, { chartColor: b, chartLabel: g }),
+            /* @__PURE__ */ e(xo, { chartColor: C, chartLabel: _ }),
             /* @__PURE__ */ y(S, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
-              /* @__PURE__ */ e(z, { bold: !0, variant: "body1", children: v }),
-              /* @__PURE__ */ e(to, { filter: I })
+              /* @__PURE__ */ e(P, { bold: !0, variant: "body1", children: x }),
+              /* @__PURE__ */ e(Qt, { filter: D })
             ] })
           ] }),
           /* @__PURE__ */ e(
-            Ze,
+            ot,
             {
               bgcolor: "transparent",
-              filter: I,
+              filter: D,
               height: "calc(100vh - 475px)",
-              onClick: d
+              onClick: m
             }
           )
         ] }),
         /* @__PURE__ */ e(
-          ke,
+          Ne,
           {
-            ariaLabelClose: n.close_aria,
-            isOpen: !!E,
-            onClose: () => d(""),
+            ariaLabelClose: o.close_aria,
+            isOpen: !!v,
+            onClose: () => m(""),
             title: s.transaction,
-            children: E && /* @__PURE__ */ e(Xe, { transaction: E })
+            children: v && /* @__PURE__ */ e(tt, { transaction: v })
           }
         )
       ]
     }
   );
-}), Mo = (o, a) => {
-  const t = je(o, a), n = Ye(o, a);
-  return [t, n].filter((s) => s.length > 0);
-}, Ao = (o, a) => {
-  const [t, n] = o, s = t, l = n ?? t, m = [];
+}), wo = (t, r) => {
+  const n = Je(t, r), o = qe(t, r);
+  return [n, o].filter((s) => s.length > 0);
+}, Io = (t, r) => {
+  const [n, o] = t, s = n, h = o ?? n, g = [];
   if (s) {
-    const h = s.reduce((i, d) => i + d.y, 0);
-    m.push({ label: a.income_label, amount: h });
+    const d = s.reduce((l, m) => l + m.y, 0);
+    g.push({ label: r.income_label, amount: d });
   }
-  if (l) {
-    const h = l.reduce((i, d) => i + d.y, 0);
-    m.push({ label: a.spending_label, amount: h });
+  if (h) {
+    const d = h.reduce((l, m) => l + m.y, 0);
+    g.push({ label: r.spending_label, amount: d });
   }
-  return m;
-}, Ro = ({
-  availableHeight: o = 0,
-  minHeight: a = 500,
-  selectedDateRange: t,
-  totals: n
+  return g;
+}, Lo = ({
+  availableHeight: t = 0,
+  minHeight: r = 500,
+  selectedDateRange: n,
+  totals: o
 }) => {
-  const s = ue(), { onEvent: l } = P(), { trends: m } = O(), { isSmallMobile: h, isMobile: i, isSmallTablet: d, isTablet: f } = J(), p = [s.palette.chart?.chart1, s.palette.chart?.chart2], _ = Mo(n, t), u = Ao(_, m), [C, b] = c.useState(0), g = 458, v = 195, E = 56, I = i || h ? v : d || f ? g : C;
-  return c.useEffect(() => {
-    const M = Math.max(o - E, a);
-    b(M);
-  }, [o]), /* @__PURE__ */ e(
-    Ne,
+  const s = ce(), { onEvent: h } = V(), { trends: g } = H(), { isSmallMobile: d, isMobile: l, isSmallTablet: m, isTablet: p } = ee(), i = [s.palette.chart?.chart1, s.palette.chart?.chart2], b = wo(o, n), c = Io(b, g), [f, C] = u.useState(0), _ = 458, x = 195, v = 56, D = l || d ? x : m || p ? _ : f;
+  return u.useEffect(() => {
+    const L = Math.max(t - v, r);
+    C(L);
+  }, [t]), /* @__PURE__ */ e(
+    Oe,
     {
       baseline: "min",
-      colors: p,
+      colors: i,
       curveType: "bump",
-      datasets: _,
-      height: I,
-      labels: u,
+      datasets: b,
+      height: D,
+      labels: c,
       onItemClick: () => {
-        l(w.TRENDS_CLICK_CHART, V);
+        h(I.TRENDS_CLICK_CHART, B);
       },
       showArea: !0,
       showAxisHighlight: !0,
@@ -1204,7 +1242,7 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       valueFormatterString: "0.0a"
     }
   );
-}, ko = R(Ro), Ho = [
+}, Eo = R(Lo), Do = [
   "BillAmountNotStandard",
   "CategorySpendingV2",
   "CostOfLivingToIncome",
@@ -1238,105 +1276,113 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
   "WeeklyNewMerchantsV2",
   "WeeklyNoSpendDays",
   "WeeklySmallPurchasesSummary"
-], No = ({ onBackClick: o, onInsightCardClick: a, sx: t }) => {
-  const { onEvent: n } = P(), { onLoad: s } = yt(), { config: l } = Ct(), { isLargeDesktop: m, isDesktop: h, isMobile: i } = J(), { isAccountDataLoaded: d, loadAccountData: f, visibleAccounts: p } = Le(), {
-    categoriesLoaded: _,
-    loadCategories: u,
-    loadDateRangeCategoryTotals: C,
-    loadMonthlyCategoryTotals: b,
-    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 } = ye(), { trends: H, connect: he } = O(), { beatStore: B } = He(), ae = oo() && l.show_insights_widget_in_master, $ = h || m, [_e, U] = c.useState(!1), [K, re] = c.useState(!1), [X, Z] = c.useState("Chart"), [te, ie] = c.useState(""), [ge, ce] = c.useState(!1), [le, D] = c.useState(window.innerHeight), r = $ ? 56 : 0, T = le - 208, L = le - (ae ? 550 + r : 266), [j, Te] = 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]
-  ), be = c.useMemo(() => K ? B.getFilteredBeats({ templates: Ho }) : [], [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)), C(G, x.start, x.end).then(() => {
-      b(
-        G,
-        x.start,
-        x.end
-      );
-    }).finally(() => {
-      U(!0), n(w.TRENDS_LOAD_WIDGET, {
-        ...V,
-        time_period: `${Ae(x.end, x.start)}M`
-      }), s?.("TrendsWidget");
-    }));
-  }, [A, G, x]), c.useEffect(() => {
-    if (g.length !== 0) {
+], Mo = ({ onBackClick: t, onInsightCardClick: r, sx: n }) => {
+  const { onEvent: o } = V(), { config: s } = bt(), { isLargeDesktop: h, isDesktop: g, isMobile: d } = ee(), { visibleAccounts: l } = ve(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: p, monthlyCategoryTotals: i } = $(), { setFilter: b } = xe(), { selectedDateRange: c, setSelectedCategoryData: f, setSelectedDateRange: C } = Ce(), {
+    isCopyLoaded: _,
+    isInitialized: x,
+    selectedAccounts: v,
+    selectedAccountGuids: D,
+    setSelectedAccounts: M
+  } = pe(), { trends: L, connect: A } = H(), { beatStore: te } = We(), F = qt() && s.show_insights_widget_in_master, z = g || h, [X, fe] = u.useState(!1), [oe, re] = u.useState(!1), [Z, le] = u.useState("Chart"), [ne, K] = u.useState(""), [ae, Q] = u.useState(!1), [ie, q] = u.useState(window.innerHeight), w = z ? 56 : 0, O = ie - 208, Y = ie - (F ? 550 + w : 266), [de, ye] = u.useState(!1), Ie = s.show_connections_widget_in_master ? "buttons" : "no-buttons", a = u.useMemo(
+    () => l && l.length === 0 || i.length === 0,
+    [l, i]
+  );
+  we({
+    widgetName: "TrendsWidget",
+    isLoaded: X
+  }), u.useEffect(() => {
+    x && te.loadBeats().finally(() => re(!0));
+  }, [x]);
+  const T = u.useMemo(() => oe ? te.getFilteredBeats({ templates: Do }) : [], [oe]);
+  u.useEffect(() => {
+    const N = () => q(window.innerHeight);
+    return window.addEventListener("resize", N), () => window.removeEventListener("resize", N);
+  }, []), u.useEffect(() => {
+    M(l);
+  }, [l]), u.useEffect(() => {
+    x && Promise.all([
+      m(
+        v,
+        c.start,
+        c.end
+      ),
+      p(v, c.start, c.end)
+    ]).finally(() => {
+      fe(!0), o(I.TRENDS_LOAD_WIDGET, {
+        ...B,
+        time_period: `${Re(c.end, c.start)}M`
+      });
+    });
+  }, [x, v, c]), u.useEffect(() => {
+    if (i.length !== 0) {
       const N = {
-        accounts: ee,
-        dateRange: { start: x.start, end: x.end }
+        accounts: D,
+        dateRange: { start: c.start, end: c.end }
       };
-      I({
+      b({
         ...N,
-        custom: (q) => !!g.find(
-          (me) => me.top_level_category_guid === q.top_level_category_guid || me.category_guid === q.category_guid
+        custom: (J) => !!i.find(
+          (he) => he.top_level_category_guid === J.top_level_category_guid || he.category_guid === J.category_guid
         )
       });
     }
-  }, [g]);
-  const Ie = (N) => {
-    M(N), ce(!0);
-  }, tt = () => {
-    M(null), ce(!1);
-  }, ot = () => {
-    Te(!0), n(w.TRENDS_CLICK_CONNECT_ACCOUNTS);
-  }, nt = (N, q) => {
-    Z(q ?? X), n(w.TRENDS_CLICK_TOGGLE_VIEW, {
-      ...V,
-      toggleView: q
+  }, [i]);
+  const E = (N) => {
+    f(N), Q(!0);
+  }, j = () => {
+    f(null), Q(!1);
+  }, Le = () => {
+    ye(!0), o(I.TRENDS_CLICK_CONNECT_ACCOUNTS);
+  }, Ee = (N, J) => {
+    le(J ?? Z), o(I.TRENDS_CLICK_TOGGLE_VIEW, {
+      ...B,
+      toggleView: J
     });
-  }, st = (N) => {
-    const q = Fe(N?.[0], 1), me = N?.[1], ct = Ae(me, q);
-    k({ start: q, end: me }), n(w.TRENDS_CLICK_TIME_WINDOW, {
-      ...V,
-      time_period: ct + "M"
+  }, ue = (N) => {
+    const J = je(N?.[0], 1), he = N?.[1], lt = Re(he, J);
+    C({ start: J, end: he }), o(I.TRENDS_CLICK_TIME_WINDOW, {
+      ...B,
+      time_period: lt + "M"
     });
-  }, at = (N) => {
-    n(w.TRENDS_CLICK_FILTER, {
-      ...V,
+  }, De = (N) => {
+    o(I.TRENDS_CLICK_FILTER, {
+      ...B,
       filterValue: N
     });
-  }, rt = (N) => {
-    ie(N);
-  }, it = () => {
-    ie(""), n(w.TRENDS_CLICK_ALL_CATEGORIES, V);
+  }, Me = (N) => {
+    K(N);
+  }, ct = () => {
+    K(""), o(I.TRENDS_CLICK_ALL_CATEGORIES, B);
   };
-  return !A || !_e ? /* @__PURE__ */ e(fe, {}) : /* @__PURE__ */ y(
-    Ue,
+  return !_ || !X ? /* @__PURE__ */ e(me, {}) : /* @__PURE__ */ y(
+    et,
     {
-      accountOptions: p,
-      calendarActions: { onRangeChanged: st },
-      dateRange: x,
-      dateRangeVariant: i ? "timeframetabs" : "timeframebuttons",
-      onAccountsFilterClick: at,
-      onBackClick: o,
-      sx: t,
-      title: H.title,
+      accountOptions: l,
+      calendarActions: { onRangeChanged: ue },
+      dateRange: c,
+      dateRangeVariant: d ? "timeframetabs" : "timeframebuttons",
+      onAccountsFilterClick: De,
+      onBackClick: t,
+      sx: n,
+      title: L.title,
       children: [
-        de && /* @__PURE__ */ e(
-          no,
+        a && /* @__PURE__ */ e(
+          Jt,
           {
-            header: H.zero_state_content_header,
+            header: L.zero_state_content_header,
             icon: "",
-            onClick: ot,
-            primaryButton: H.empty_state_primary,
-            subText: H.empty_state_sub_text,
-            sx: { height: T },
-            variant: Ee
+            onClick: Le,
+            primaryButton: L.empty_state_primary,
+            subText: L.empty_state_sub_text,
+            sx: { height: O },
+            variant: Ie
           }
         ),
-        !de && /* @__PURE__ */ y(
+        !a && /* @__PURE__ */ y(
           S,
           {
             sx: {
-              px: i ? 0 : 48
+              px: d ? 0 : 48
             },
             children: [
               /* @__PURE__ */ y(
@@ -1344,82 +1390,81 @@ const qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  sx: { pb: i ? 12 : 24, pt: i ? 24 : 48 },
+                  sx: { pb: d ? 12 : 24, pt: d ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
-                      Je,
+                      at,
                       {
-                        selectedCategoryGuid: te,
-                        selectedDateRange: x
+                        selectedCategoryGuid: ne,
+                        selectedDateRange: c
                       }
                     ),
-                    /* @__PURE__ */ e(Qe, { onTabChange: nt, selectedTab: X })
+                    /* @__PURE__ */ e(rt, { onTabChange: Ee, selectedTab: Z })
                   ]
                 }
               ),
-              /* @__PURE__ */ e(S, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(W, { flexGrow: 1, children: te && /* @__PURE__ */ y(xe, { onClick: it, sx: { p: 0, pr: 5 }, children: [
-                /* @__PURE__ */ e(Se, { name: "arrow_back" }),
-                H.all_categories
+              /* @__PURE__ */ e(S, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(k, { flexGrow: 1, children: ne && /* @__PURE__ */ y(be, { onClick: ct, sx: { p: 0, pr: 5 }, children: [
+                /* @__PURE__ */ e(_e, { name: "arrow_back" }),
+                L.all_categories
               ] }) }) }),
-              /* @__PURE__ */ y(S, { flexDirection: $ ? "row" : "column", gap: $ ? 48 : 16, children: [
-                X === "Chart" && /* @__PURE__ */ y(lt, { children: [
-                  /* @__PURE__ */ e(W, { sx: { width: $ ? "68%" : "100%" }, children: /* @__PURE__ */ e(
-                    ko,
+              /* @__PURE__ */ y(S, { flexDirection: z ? "row" : "column", gap: z ? 48 : 16, children: [
+                Z === "Chart" && /* @__PURE__ */ y(dt, { children: [
+                  /* @__PURE__ */ e(k, { sx: { width: z ? "68%" : "100%" }, children: /* @__PURE__ */ e(
+                    Eo,
                     {
-                      availableHeight: T,
+                      availableHeight: O,
                       minHeight: 450,
-                      selectedDateRange: x,
-                      totals: g
+                      selectedDateRange: c,
+                      totals: i
                     }
                   ) }),
-                  /* @__PURE__ */ y(S, { gap: 16, sx: { width: $ ? "32%" : "100%" }, children: [
-                    ae && K && be.length > 0 && /* @__PURE__ */ e(
-                      Lo,
+                  /* @__PURE__ */ y(S, { gap: 16, sx: { width: z ? "32%" : "100%" }, children: [
+                    F && oe && T.length > 0 && /* @__PURE__ */ e(
+                      So,
                       {
-                        beats: be,
-                        onInsightCardClick: a
+                        beats: T,
+                        onInsightCardClick: r
                       }
                     ),
                     /* @__PURE__ */ e(
-                      wo,
+                      bo,
                       {
-                        availableHeight: L,
-                        onCategoryClick: Ie
+                        availableHeight: Y,
+                        onCategoryClick: E
                       }
                     )
                   ] })
                 ] }),
-                X === "Table" && /* @__PURE__ */ e(W, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
-                  et,
+                Z === "Table" && /* @__PURE__ */ e(k, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
+                  it,
                   {
                     height: "unset",
-                    monthlyCategoryTotals: g,
-                    onClickRow: rt,
-                    selectedCategory: te,
-                    selectedDateRange: x
+                    onClickRow: Me,
+                    selectedCategory: ne,
+                    selectedDateRange: c
                   }
                 ) })
               ] }),
-              ge && /* @__PURE__ */ e(Io, { onClose: tt })
+              ae && /* @__PURE__ */ e(vo, { onClose: j })
             ]
           }
         ),
         /* @__PURE__ */ e(
-          so,
+          eo,
           {
-            onClose: () => Te(!1),
-            showConnectWidget: j,
-            title: he.mini_title
+            onClose: () => ye(!1),
+            showConnectWidget: de,
+            title: A.mini_title
           }
         )
       ]
     }
   );
-}, Gn = R(No);
+}, Gn = R(Mo);
 export {
   Nn as TrendsFullWidget,
   On as TrendsMicroWidget,
   Wn as TrendsMiniWidget,
-  Pn as TrendsStore,
+  Fn as TrendsStore,
   Gn as TrendsWidget
 };