@mx-cartographer/experiences 9.2.6 → 9.2.8

package/dist/trends/index.es.js

@@ -1,69 +1,69 @@
-import { jsxs as C, jsx as e, Fragment as vt } from "react/jsx-runtime";
-import g, { useRef as wt, useState as Dt, useEffect as It } from "react";
-import { observer as A } from "mobx-react-lite";
-import { CategoryIcon as ve, Text as F, Icon as He, H3 as Ge, P as pe } from "@mxenabled/mxui";
-import H from "@mui/material/Box";
+import { jsxs as C, jsx as e, Fragment as xt } from "react/jsx-runtime";
+import p, { useRef as vt, useState as wt, useEffect as Dt } from "react";
+import { observer as R } from "mobx-react-lite";
+import { CategoryIcon as ve, Text as P, Icon as He, H3 as Oe, P as fe } from "@mxenabled/mxui";
+import W from "@mui/material/Box";
 import S from "@mui/material/Stack";
 import Te from "@mui/material/Button";
 import { addSeconds as et } from "date-fns/addSeconds";
 import { differenceInCalendarMonths as Se } from "date-fns/differenceInCalendarMonths";
-import Lt from "numeral";
-import { useTheme as Z, styled as Et, alpha as Mt } from "@mui/material/styles";
-import { useItemTooltip as At, ChartsTooltipContainer as Rt } from "@mui/x-charts/ChartsTooltip";
-import { LineChart as kt } from "@mui/x-charts/LineChart";
-import { u as Q } from "../useScreenSize-mWpmnh5w.mjs";
-import { u as Ht } from "../useDimensions-CeDR9V8N.mjs";
+import It from "numeral";
+import { useTheme as K, styled as Lt, alpha as Et } from "@mui/material/styles";
+import { useItemTooltip as Mt, ChartsTooltipContainer as At } from "@mui/x-charts/ChartsTooltip";
+import { LineChart as Rt } from "@mui/x-charts/LineChart";
+import { u as Y } from "../useScreenSize-mWpmnh5w.mjs";
+import { u as kt } from "../useDimensions-CeDR9V8N.mjs";
 import tt from "@mui/material/Card";
 import ot from "@mui/material/CardContent";
 import Ne from "@mui/material/Divider";
 import Fe from "@mui/material/Grid";
 import { b as nt } from "../Localization-DnoVyBNK.mjs";
-import { u as R, l as q, f as $, a as fe, g as we, c as De, B as ye, D as st, e as Be, i as rt } from "../hooks-97sNJ_lf.mjs";
+import { u as k, l as U, f as V, a as ye, g as we, c as De, B as Ce, D as st, e as Be, i as rt } from "../hooks-97sNJ_lf.mjs";
 import { C as xe } from "../CurrencyText-CCbE6MmF.mjs";
-import { a as Re, C as $e, b as Nt } from "../Category-DEKZGLYe.mjs";
-import { f as X, D as G } from "../DateFormats-HudZ3Bjs.mjs";
-import { f as re, a as Wt } from "../NumberFormatting--XMeeBfr.mjs";
-import { a as Ke, c as Ot, g as Gt } from "../TrendsUtil-D9z3kIj_.mjs";
-import { c as Bt, i as Pt, d as Vt, e as zt, g as at, b as it, f as Ye } from "../SpendingData-Fii_xATx.mjs";
-import Ft from "@mui/material/ToggleButton";
-import $t from "@mui/material/ToggleButtonGroup";
-import { parseISO as lt } from "date-fns/parseISO";
+import { a as Re, C as $e, b as Ht } from "../Category-DEKZGLYe.mjs";
+import { f as j, D as B } from "../DateFormats-HudZ3Bjs.mjs";
+import { f as re, a as Nt } from "../NumberFormatting--XMeeBfr.mjs";
+import { a as je, c as Wt, g as Gt } from "../TrendsUtil-D9z3kIj_.mjs";
+import { c as Ot, i as Bt, d as Pt, e as Vt, g as at, b as it, f as Ke } from "../SpendingData-Fii_xATx.mjs";
+import zt from "@mui/material/ToggleButton";
+import Ft from "@mui/material/ToggleButtonGroup";
+import { parseISO as ct } from "date-fns/parseISO";
 import { H as ke } from "../HeaderCell-P8w6CmfO.mjs";
-import { T as W, a as Kt } from "../ViewMoreMicroCard-B4oeGrbE.mjs";
-import { useGridApiContext as Yt, useGridRootProps as jt, DataGridPro as Ut } from "@mui/x-data-grid-pro";
-import Xt from "@mui/material/Badge";
-import Zt from "@mui/material/IconButton";
-import { A as w } from "../Analytics-D-jdcL72.mjs";
-import { T as ct } from "../EmbeddedCard-CQEnrozC.mjs";
+import { T as O, a as $t } from "../ViewMoreMicroCard-B4oeGrbE.mjs";
+import { useGridApiContext as jt, useGridRootProps as Kt, DataGridPro as Yt } from "@mui/x-data-grid-pro";
+import Ut from "@mui/material/Badge";
+import Xt from "@mui/material/IconButton";
+import { A as D } from "../Analytics-D-jdcL72.mjs";
+import { T as lt } from "../EmbeddedCard-CQEnrozC.mjs";
 import { T as dt } from "../TransactionDetails-CLc7oeHT.mjs";
 import { D as Pe } from "../Drawer-DsnW2o0v.mjs";
 import { u as Ie } from "../useWidgetLoadTimer-B0tB-yzL.mjs";
 import { L as Le } from "../Loader-CxeBwuPG.mjs";
-import { W as ut } from "../WidgetContainer-DvKtBdhn.mjs";
+import { W as ut } from "../WidgetContainer-eosXfD5G.mjs";
 import { L as Ve } from "../LineChart-CUfiH86G.mjs";
-import { M as Qt } from "../MiniWidgetContainer-Bmv_WeUd.mjs";
-import { subMonths as qt } from "date-fns";
-import { TrendingUp as Jt, TrendingDown as eo, MultilineChart as to, ExpandLess as oo, ExpandMore as no, ChevronRight as so, ArrowBack as ro } from "@mxenabled/mx-icons";
-import { M as ao } from "../MicroWidgetContainer-B2NnKBgW.mjs";
-import io from "@mui/material/Collapse";
+import { M as Zt } from "../MiniWidgetContainer-Bmv_WeUd.mjs";
+import { subMonths as Qt } from "date-fns";
+import { TrendingUp as qt, TrendingDown as Jt, MultilineChart as eo, ExpandLess as to, ExpandMore as oo, ChevronRight as no, ArrowBack as so } from "@mxenabled/mx-icons";
+import { M as ro } from "../MicroWidgetContainer-B2NnKBgW.mjs";
+import ao from "@mui/material/Collapse";
 import We from "@mui/material/List";
 import mt from "@mui/material/ListItem";
-import lo from "@mui/material/ListItemButton";
+import io from "@mui/material/ListItemButton";
 import co from "@mui/material/ListItemIcon";
 import ht from "@mui/material/ListItemText";
-import { g as Oe } from "../TransactionUtils-BphBJBbU.mjs";
-import { L as uo } from "../ListItemRow-kH1rn8Xu.mjs";
-import { Stack as mo } from "@mui/material";
-import ho from "@mui/material/ListItemAvatar";
-import { E as go } from "../ExportCsvAction-B_8I-Le6.mjs";
-import { u as po } from "../useInsightsEnabled-D5Sdm0TJ.mjs";
-import { E as fo } from "../EmptyState-CJUDc3kD.mjs";
-import { C as yo } from "../ConnectDrawer-CW4LA3H3.mjs";
+import { g as Ge } from "../TransactionUtils-BphBJBbU.mjs";
+import { L as lo } from "../ListItemRow-kH1rn8Xu.mjs";
+import { Stack as uo } from "@mui/material";
+import mo from "@mui/material/ListItemAvatar";
+import { E as ho } from "../ExportCsvAction-B_8I-Le6.mjs";
+import { u as go } from "../useInsightsEnabled-D5Sdm0TJ.mjs";
+import { E as po } from "../EmptyState-CJUDc3kD.mjs";
+import { C as fo } from "../ConnectDrawer-CW4LA3H3.mjs";
 const gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
-  const { categories: s } = R(), { getCategoryName: o } = q(), r = o(t);
+  const { categories: s } = k(), { getCategoryName: o } = U(), r = o(t);
   return /* @__PURE__ */ C(S, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
     /* @__PURE__ */ e(
-      H,
+      W,
       {
         "aria-label": nt(s.category_icon_label_aria, r),
         mb: 4,
@@ -71,22 +71,22 @@ const gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
         children: /* @__PURE__ */ e(ve, { categoryGuid: n })
       }
     ),
-    /* @__PURE__ */ e(F, { variant: "body1", children: r })
+    /* @__PURE__ */ e(P, { variant: "body1", children: r })
   ] });
-}, Co = ({
+}, yo = ({
   categoryGuids: { guid: t, topLevelGuid: n },
   hoveredAreaData: s,
   cursorPosition: o,
   chartContainerRef: r
 }) => {
-  const c = Z(), a = wt(null), [d, u] = Dt({ x: o.x, y: o.y });
-  if (It(() => {
+  const l = K(), a = vt(null), [c, u] = wt({ x: o.x, y: o.y });
+  if (Dt(() => {
     (() => {
       const m = a.current, _ = r.current;
       if (!m || !_) return;
-      const h = m.getBoundingClientRect(), p = _.getBoundingClientRect();
+      const g = m.getBoundingClientRect(), h = _.getBoundingClientRect();
       let y = o.x, T = o.y;
-      y + h.width * 2 > p.right ? y = o.x - h.width : y - h.width < p.left && (y = o.x), T + h.height * 2 > p.bottom && (T = o.y - h.height), u({ x: y, y: T });
+      y + g.width * 2 > h.right ? y = o.x - g.width : y - g.width < h.left && (y = o.x), T + g.height * 2 > h.bottom && (T = o.y - g.height), u({ x: y, y: T });
     })();
   }, [o, r]), !s) return null;
   const i = s.reduce((f, m) => f + m.y, 0);
@@ -96,22 +96,22 @@ const gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
       ref: a,
       sx: {
         position: "absolute",
-        top: d.y,
-        left: d.x,
+        top: c.y,
+        left: c.x,
         width: 250,
         pointerEvents: "none"
       },
       children: /* @__PURE__ */ C(ot, { children: [
-        /* @__PURE__ */ C(H, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+        /* @__PURE__ */ C(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
           /* @__PURE__ */ e(gt, { categoryGuid: t, topLevelCategoryGuid: n }),
-          /* @__PURE__ */ e(F, { variant: "body2", children: `${s.length}-month total` }),
+          /* @__PURE__ */ e(P, { variant: "body2", children: `${s.length}-month total` }),
           /* @__PURE__ */ e(xe, { amount: i, bold: !0, formatString: "0,0", variant: "body2" })
         ] }),
         /* @__PURE__ */ e(Ne, { sx: { my: 16, width: "100%" } }),
-        /* @__PURE__ */ e(Fe, { container: !0, children: s.map((f, m) => /* @__PURE__ */ C(g.Fragment, { children: [
+        /* @__PURE__ */ e(Fe, { container: !0, children: s.map((f, m) => /* @__PURE__ */ C(p.Fragment, { children: [
           m > 0 && m % 3 === 0 && /* @__PURE__ */ e(Ne, { sx: { my: 16, width: "100%" } }),
-          /* @__PURE__ */ e(Fe, { size: 4, children: /* @__PURE__ */ C(H, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-            /* @__PURE__ */ e(F, { color: c.palette.text.secondary, variant: "caption", children: f.x }),
+          /* @__PURE__ */ e(Fe, { size: 4, children: /* @__PURE__ */ C(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+            /* @__PURE__ */ e(P, { color: l.palette.text.secondary, variant: "caption", children: f.x }),
             /* @__PURE__ */ e(
               xe,
               {
@@ -126,15 +126,15 @@ const gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
       ] })
     }
   );
-}, _o = A(Co), bo = ({
+}, Co = R(yo), _o = ({
   sx: t,
   categoryGuids: n,
   hoveredLegend: s,
   legendRef: o,
   onHoverLegend: r,
-  onClickLegend: c
+  onClickLegend: l
 }) => {
-  const { isMobile: a } = Q(), { getCategoryName: d } = q();
+  const { isMobile: a } = Y(), { getCategoryName: c } = U();
   return /* @__PURE__ */ e(
     S,
     {
@@ -145,11 +145,11 @@ const gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
       ref: o,
       sx: t,
       children: n.map(({ guid: u, top_level_guid: i }) => {
-        const f = s === u, m = Re[u], _ = Re[i], h = m ?? _ ?? Re.default, p = h + "33";
+        const f = s === u, m = Re[u], _ = Re[i], g = m ?? _ ?? Re.default, h = g + "33";
         return /* @__PURE__ */ C(
           Te,
           {
-            onClick: () => c(u),
+            onClick: () => l(u),
             onMouseEnter: () => r(u),
             onMouseLeave: () => r(null),
             sx: {
@@ -165,18 +165,18 @@ const gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
             },
             children: [
               /* @__PURE__ */ e(
-                H,
+                W,
                 {
                   sx: {
                     width: 16,
                     height: 16,
                     marginRight: a ? 5 : 10,
                     borderRadius: "2px",
-                    backgroundColor: s ? f ? h : p : h
+                    backgroundColor: s ? f ? g : h : g
                   }
                 }
               ),
-              /* @__PURE__ */ e(F, { variant: "body1", children: d(u) })
+              /* @__PURE__ */ e(P, { variant: "body1", children: c(u) })
             ]
           },
           u
@@ -184,128 +184,128 @@ const gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
       })
     }
   );
-}, To = ({
+}, bo = ({
   categoryGuids: { guid: t, topLevelGuid: n },
   series: s,
   xData: o
 }) => {
-  const r = At(), c = Z();
+  const r = Mt(), l = K();
   if (!r?.identifier) return null;
-  const { dataIndex: a, seriesId: d } = r.identifier;
-  if (a == null || !d) return null;
-  const i = s.find((m) => m.id === d)?.data?.[a], f = o?.[a];
-  return i === void 0 || !f ? null : /* @__PURE__ */ e(tt, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(ot, { children: /* @__PURE__ */ C(H, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+  const { dataIndex: a, seriesId: c } = r.identifier;
+  if (a == null || !c) return null;
+  const i = s.find((m) => m.id === c)?.data?.[a], f = o?.[a];
+  return i === void 0 || !f ? null : /* @__PURE__ */ e(tt, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(ot, { children: /* @__PURE__ */ C(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
     /* @__PURE__ */ e(gt, { categoryGuid: t, topLevelCategoryGuid: n }),
-    /* @__PURE__ */ e(F, { color: c.palette.text.secondary, variant: "body2", children: X(f, G.MONTH_SHORT_YEAR) }),
+    /* @__PURE__ */ e(P, { color: l.palette.text.secondary, variant: "body2", children: j(f, B.MONTH_SHORT_YEAR) }),
     /* @__PURE__ */ e(xe, { amount: String(i), bold: !0, formatString: "0,0", variant: "body1" })
   ] }) }) });
-}, So = ({
+}, To = ({
   onHoverArea: t,
   onHoverPoint: n,
   onHoverLegend: s,
   onClickLegend: o,
   stackedDatasets: r,
-  unstackedDatasets: c = [],
+  unstackedDatasets: l = [],
   availableHeight: a = 0,
-  minimumHeight: d = 350
+  minimumHeight: c = 350
 }) => {
-  const u = Z(), { isMobile: i } = Q(), [f, { height: m }] = Ht(), _ = g.useRef(null), [h, p] = g.useState(0);
-  g.useEffect(() => {
-    const l = Math.max(a - m, d);
-    p(l);
+  const u = K(), { isMobile: i } = Y(), [f, { height: m }] = kt(), _ = p.useRef(null), [g, h] = p.useState(0);
+  p.useEffect(() => {
+    const d = Math.max(a - m, c);
+    h(d);
   }, [a, m]);
-  const [y, T] = g.useState(null), [N, x] = g.useState({
+  const [y, T] = p.useState(null), [x, H] = p.useState({
     hoveredSeriesId: null,
     hoveredAreaData: null,
     isAreaHovered: !1,
     cursorPos: { x: 0, y: 0 }
-  }), { hoveredSeriesId: L, hoveredAreaData: M, isAreaHovered: E, cursorPos: v } = N, K = E && L && M, ae = !K, Y = [...r, ...c], J = Y[0]?.dataset.length ?? 0, P = Y.flatMap((l) => l.dataset.map((b) => b.x)), V = Y.flatMap((l) => l.dataset.map((b) => b.y)), O = r[0]?.dataset?.map(
-    (l, b) => r.reduce((I, z) => I + z.dataset[b]?.y || 0, 0)
-  ) ?? [0], ee = Math.max(...O), Ce = Math.max(
-    ...c.flatMap((l) => l.dataset.map((b) => b.y))
-  ), ie = Math.floor(Math.min(...V) / 100) * 100, te = Math.ceil(Math.max(ee, Ce) / 100) * 100, j = r.map((l, b) => ({
+  }), { hoveredSeriesId: L, hoveredAreaData: M, isAreaHovered: I, cursorPos: E } = x, X = I && L && M, Z = !X, te = [...r, ...l], oe = te[0]?.dataset.length ?? 0, A = te.flatMap((d) => d.dataset.map((b) => b.x)), de = te.flatMap((d) => d.dataset.map((b) => b.y)), G = r[0]?.dataset?.map(
+    (d, b) => r.reduce((w, $) => w + $.dataset[b]?.y || 0, 0)
+  ) ?? [0], ae = Math.max(...G), ie = Math.max(
+    ...l.flatMap((d) => d.dataset.map((b) => b.y))
+  ), z = Math.floor(Math.min(...de) / 100) * 100, ue = Math.ceil(Math.max(ae, ie) / 100) * 100, Q = r.map((d, b) => ({
     id: `stacked-${b}`,
-    guid: l.category_guid,
-    top_level_guid: l.top_level_category_guid,
+    guid: d.category_guid,
+    top_level_guid: d.top_level_category_guid,
     area: !0,
     color: r[b].category_color ?? u.palette.primary.main,
-    data: l.dataset.map((I) => I.y),
+    data: d.dataset.map((w) => w.y),
     label: r[b].category_name,
     stack: "total",
     type: "line",
     highlightScope: { highlight: "item" },
-    valueFormatter: (I) => re(I, "0,0")
-  })), ne = c.map((l, b) => ({
+    valueFormatter: (w) => re(w, "0,0")
+  })), F = l.map((d, b) => ({
     id: `unstacked-${b}`,
-    guid: l.category_guid,
-    top_level_guid: l.top_level_category_guid,
+    guid: d.category_guid,
+    top_level_guid: d.top_level_category_guid,
     area: !1,
-    color: l.category_color,
-    data: l.dataset.map((I) => I.y),
-    label: l.category_name,
+    color: d.category_color,
+    data: d.dataset.map((w) => w.y),
+    label: d.category_name,
     type: "line",
-    valueFormatter: (I) => re(I, "0,0")
-  })), U = [...j, ...ne], de = [
-    ...j.map(({ guid: l, top_level_guid: b }) => ({
-      guid: l,
+    valueFormatter: (w) => re(w, "0,0")
+  })), ne = [...Q, ...F], q = [
+    ...Q.map(({ guid: d, top_level_guid: b }) => ({
+      guid: d,
       top_level_guid: b
     })),
-    ...ne.map(({ guid: l, top_level_guid: b }) => ({
-      guid: l,
+    ...F.map(({ guid: d, top_level_guid: b }) => ({
+      guid: d,
       top_level_guid: b
     }))
-  ], B = (l) => {
-    const I = l.startsWith("stacked-") ? r[parseInt(l.split("-")[1])] : c[parseInt(l.split("-")[1])];
+  ], J = (d) => {
+    const w = d.startsWith("stacked-") ? r[parseInt(d.split("-")[1])] : l[parseInt(d.split("-")[1])];
     return {
-      guid: I?.category_guid,
-      topLevelGuid: I?.top_level_category_guid
+      guid: w?.category_guid,
+      topLevelGuid: w?.top_level_category_guid
     };
-  }, ue = (l) => {
-    T(l), s?.(l ?? "");
-  }, se = (l) => {
-    o?.(l ?? "");
+  }, se = (d) => {
+    T(d), s?.(d ?? "");
+  }, ce = (d) => {
+    o?.(d ?? "");
   }, le = () => {
-    const l = B(String(L)).guid;
-    l && o?.(l);
-  }, ce = (l) => {
-    const b = String(l?.seriesId), I = B(b).guid, z = U.find((he) => he.id === b), Ee = z && l?.dataIndex !== void 0, _e = z && l?.dataIndex === void 0;
-    if (Ee)
-      x({
+    const d = J(String(L)).guid;
+    d && o?.(d);
+  }, me = (d) => {
+    const b = String(d?.seriesId), w = J(b).guid, $ = ne.find((ge) => ge.id === b), _e = $ && d?.dataIndex !== void 0, Ee = $ && d?.dataIndex === void 0;
+    if (_e)
+      H({
         hoveredSeriesId: b,
         hoveredAreaData: null,
         isAreaHovered: !1,
-        cursorPos: v
-      }), n?.(I);
-    else if (_e) {
-      const he = z?.data.map((Me, Ae) => ({
-        x: P[Ae],
+        cursorPos: E
+      }), n?.(w);
+    else if (Ee) {
+      const ge = $?.data.map((Me, Ae) => ({
+        x: A[Ae],
         y: Me
       })) ?? [];
-      x({
+      H({
         hoveredSeriesId: b,
-        hoveredAreaData: he,
+        hoveredAreaData: ge,
         isAreaHovered: !0,
-        cursorPos: v
-      }), t?.(I);
+        cursorPos: E
+      }), t?.(w);
     } else
-      x({
+      H({
         hoveredSeriesId: null,
         hoveredAreaData: null,
         isAreaHovered: !1,
-        cursorPos: v
+        cursorPos: E
       });
-  }, me = (l) => {
-    if (l.target instanceof Element && l.target.classList[0]?.includes("MuiMarkElement-root"))
+  }, he = (d) => {
+    if (d.target instanceof Element && d.target.classList[0]?.includes("MuiMarkElement-root"))
       return;
-    const b = l.currentTarget.getBoundingClientRect();
-    x((I) => ({
-      ...I,
+    const b = d.currentTarget.getBoundingClientRect();
+    H((w) => ({
+      ...w,
       cursorPos: {
-        x: l.clientX - b.left,
-        y: l.clientY - b.top
+        x: d.clientX - b.left,
+        y: d.clientY - b.top
       }
     }));
-  }, D = {
+  }, v = {
     p: 4,
     "& .MuiBarLabel-root": {
       fontSize: 10,
@@ -321,17 +321,17 @@ const gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
     '& [class*="MuiLineElement-series-unstacked-"]': {
       strokeWidth: 3
     },
-    ...y && j.reduce((l, b, I) => {
-      const z = `.MuiAreaElement-series-stacked-${I}`;
-      return l[z] = {
-        opacity: j[I].guid === y ? 0.9 : 0.2
-      }, l;
+    ...y && Q.reduce((d, b, w) => {
+      const $ = `.MuiAreaElement-series-stacked-${w}`;
+      return d[$] = {
+        opacity: Q[w].guid === y ? 0.9 : 0.2
+      }, d;
     }, {})
   };
   return /* @__PURE__ */ e(
-    H,
+    W,
     {
-      onMouseMove: me,
+      onMouseMove: he,
       ref: _,
       sx: {
         position: "relative",
@@ -352,68 +352,68 @@ const gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
           sx: { width: "100%", position: "relative" },
           children: [
             /* @__PURE__ */ e(
-              kt,
+              Rt,
               {
-                height: h,
+                height: g,
                 hideLegend: !0,
                 margin: { bottom: 24, left: 12, right: 54, top: 48 },
                 onAreaClick: le,
-                onHighlightChange: ce,
-                series: U,
+                onHighlightChange: me,
+                series: ne,
                 skipAnimation: !0,
                 slotProps: {
-                  tooltip: { trigger: ae ? "item" : "none" }
+                  tooltip: { trigger: Z ? "item" : "none" }
                 },
                 slots: {
-                  tooltip: ae && L ? (l) => /* @__PURE__ */ e(Rt, { children: /* @__PURE__ */ e(
-                    To,
+                  tooltip: Z && L ? (d) => /* @__PURE__ */ e(At, { children: /* @__PURE__ */ e(
+                    bo,
                     {
-                      ...l,
-                      categoryGuids: B(L),
-                      series: U,
-                      xData: P
+                      ...d,
+                      categoryGuids: J(L),
+                      series: ne,
+                      xData: A
                     }
                   ) }) : void 0
                 },
-                sx: D,
+                sx: v,
                 xAxis: [
                   {
-                    data: P,
+                    data: A,
                     scaleType: "time",
-                    valueFormatter: (l) => X(l, G.MONTH_SHORT_YEAR),
-                    tickNumber: J
+                    valueFormatter: (d) => j(d, B.MONTH_SHORT_YEAR),
+                    tickNumber: oe
                     // How many ticks to show on the x-axis
                   }
                 ],
                 yAxis: [
                   {
-                    min: ie,
-                    max: te || 100,
-                    valueFormatter: (l) => Lt(l).format("0a")
+                    min: z,
+                    max: ue || 100,
+                    valueFormatter: (d) => It(d).format("0a")
                   }
                 ]
               }
             ),
             /* @__PURE__ */ e(
-              bo,
+              _o,
               {
-                categoryGuids: de,
+                categoryGuids: q,
                 hoveredLegend: y,
                 legendRef: f,
-                onClickLegend: se,
-                onHoverLegend: ue,
+                onClickLegend: ce,
+                onHoverLegend: se,
                 sx: { px: i ? 0 : 24 }
               }
             ),
-            K && /* @__PURE__ */ e(
-              _o,
+            X && /* @__PURE__ */ e(
+              Co,
               {
-                categoryGuids: B(L),
+                categoryGuids: J(L),
                 chartContainerRef: _,
-                cursorPosition: v,
-                hoveredAreaData: M.map((l) => ({
-                  ...l,
-                  x: X(l.x, G.MONTH_SHORT_YEAR)
+                cursorPosition: E,
+                hoveredAreaData: M.map((d) => ({
+                  ...d,
+                  x: j(d.x, B.MONTH_SHORT_YEAR)
                 }))
               }
             )
@@ -423,9 +423,9 @@ const gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
     }
   );
 }, pt = ({ selectedTab: t, onTabChange: n }) => {
-  const { common: s } = R();
+  const { common: s } = k();
   return /* @__PURE__ */ e(
-    $t,
+    Ft,
     {
       "aria-label": s.view_toggle,
       exclusive: !0,
@@ -433,7 +433,7 @@ const gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
       orientation: "horizontal",
       value: t,
       children: ["Chart", "Table"].map((o) => /* @__PURE__ */ e(
-        Ft,
+        zt,
         {
           "aria-label": o === "Chart" ? s.view_chart : s.view_table,
           "aria-pressed": t === o,
@@ -447,22 +447,22 @@ const gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
     }
   );
 }, ft = ({ selectedDateRange: t, selectedCategoryGuid: n }) => {
-  const { trends: s } = R(), { isMobile: o, isDesktop: r } = Q(), { getCategoryName: c } = q(), a = g.useMemo(() => {
-    const i = t.start.getFullYear() === t.end.getFullYear() ? X(
+  const { trends: s } = k(), { isMobile: o, isDesktop: r } = Y(), { getCategoryName: l } = U(), a = p.useMemo(() => {
+    const i = t.start.getFullYear() === t.end.getFullYear() ? j(
       t.start,
-      o ? G.MONTH_SHORT : G.MONTH_LONG
-    ) : X(
+      o ? B.MONTH_SHORT : B.MONTH_LONG
+    ) : j(
       t.start,
-      o ? G.MONTH_SHORT_YEAR : G.MONTH_YEAR
-    ), f = X(
+      o ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
+    ), f = j(
       t.end,
-      o ? G.MONTH_SHORT_YEAR : G.MONTH_YEAR
+      o ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
     );
     return `${i} - ${f}`;
-  }, [t, o]), u = c(n) || (o ? s.sub_title : s.sub_title_by_category);
-  return /* @__PURE__ */ C(H, { children: [
+  }, [t, o]), u = l(n) || (o ? s.sub_title : s.sub_title_by_category);
+  return /* @__PURE__ */ C(W, { children: [
     /* @__PURE__ */ e(
-      Ge,
+      Oe,
       {
         sx: {
           fontSize: r ? null : 15,
@@ -472,40 +472,40 @@ const gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
         children: u
       }
     ),
-    /* @__PURE__ */ e(F, { variant: r ? "subtitle1" : "body2", children: a })
+    /* @__PURE__ */ e(P, { variant: r ? "subtitle1" : "body2", children: a })
   ] });
-}, xo = (t) => {
+}, So = (t) => {
   const n = t.id === "total";
   return /* @__PURE__ */ C(S, { alignItems: "center", direction: "row", role: "rowheader", tabIndex: t.tabIndex, children: [
-    !n && /* @__PURE__ */ e(H, { "aria-hidden": !0, children: /* @__PURE__ */ e(ve, { categoryGuid: t.row.top_level_category_guid, variant: "twotone" }) }),
-    /* @__PURE__ */ e(F, { bold: n, sx: { ml: 12 }, variant: n ? "body1" : "body2", children: t.row.category })
+    !n && /* @__PURE__ */ e(W, { "aria-hidden": !0, children: /* @__PURE__ */ e(ve, { categoryGuid: t.row.top_level_category_guid, variant: "twotone" }) }),
+    /* @__PURE__ */ e(P, { bold: n, sx: { ml: 12 }, variant: n ? "body1" : "body2", children: t.row.category })
   ] });
-}, je = (t) => {
-  const n = t.row.category_guid, s = t.row.top_level_category_guid, o = n === $e.INCOME || s === $e.INCOME, r = t.id === "total", c = t.field === "total", a = c ? t.row[t.field] : t.row.monthlyAmounts[t.field];
+}, Ye = (t) => {
+  const n = t.row.category_guid, s = t.row.top_level_category_guid, o = n === $e.INCOME || s === $e.INCOME, r = t.id === "total", l = t.field === "total", a = l ? t.row[t.field] : t.row.monthlyAmounts[t.field];
   return /* @__PURE__ */ e(S, { alignItems: "flex-end", direction: "row", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(
     xe,
     {
       amount: o ? Math.abs(a) : a,
       isIncome: o,
-      sx: { fontWeight: o || c || r ? 600 : 500 },
+      sx: { fontWeight: o || l || r ? 600 : 500 },
       symbol: o ? "+" : void 0,
       variant: r ? "body1" : "body2"
     }
   ) });
 }, Ue = (t, n) => {
-  const s = X(lt(n.isoDate), G.MONTH_LONG);
+  const s = j(ct(n.isoDate), B.MONTH_LONG);
   return t[s] = n.amount, t;
 }, Xe = (t) => (n, s) => {
-  const o = X(lt(s.isoDate), G.MONTH_LONG);
+  const o = j(ct(s.isoDate), B.MONTH_LONG);
   return n + (t.includes(o) ? s.amount : 0);
-}, vo = (t, n) => {
+}, xo = (t, n) => {
   const s = [], o = new Date(t);
   for (; o <= n; ) {
-    const r = X(o, G.MONTH_LONG);
+    const r = j(o, B.MONTH_LONG);
     s.push(r), o.setMonth(o.getMonth() + 1);
   }
   return s;
-}, wo = (t, n) => {
+}, vo = (t, n) => {
   const s = {
     field: "category",
     flex: 1,
@@ -513,25 +513,25 @@ const gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
     headerName: n.category_title,
     minWidth: 210,
     renderHeader: ke,
-    renderCell: xo,
+    renderCell: So,
     sortable: !0,
-    sortComparator: Ot,
+    sortComparator: Wt,
     type: "string"
-  }, o = t.map((c) => ({
-    field: c,
+  }, o = t.map((l) => ({
+    field: l,
     flex: 1,
     headerClassName: "trends-table-header",
-    headerName: c,
+    headerName: l,
     minWidth: 100,
     renderHeader: ke,
-    renderCell: je,
+    renderCell: Ye,
     align: "center",
     headerAlign: "center",
     sortable: !0,
     hideSortIcons: !1,
     type: "number",
-    sortComparator: Ke,
-    valueGetter: (a, d) => d.monthlyAmounts?.[c] ?? 0
+    sortComparator: je,
+    valueGetter: (a, c) => c.monthlyAmounts?.[l] ?? 0
   })), r = {
     field: "total",
     flex: 1,
@@ -539,31 +539,31 @@ const gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
     headerName: n.table_column_total,
     minWidth: 100,
     renderHeader: ke,
-    renderCell: je,
+    renderCell: Ye,
     align: "center",
     headerAlign: "center",
     sortable: !0,
     hideSortIcons: !1,
     type: "number",
-    sortComparator: Ke
+    sortComparator: je
   };
   return [s, ...o, r];
 }, Ze = (t, n, s, o, r) => {
-  const c = t.filter((a) => a.is_income === s).map((a) => {
-    let d = a.totalMonthlyAmounts;
-    return r && (d = a.monthlyAmounts), {
+  const l = t.filter((a) => a.is_income === s).map((a) => {
+    let c = a.totalMonthlyAmounts;
+    return r && (c = a.monthlyAmounts), {
       id: a.guid,
       category: a.name,
       category_guid: a.guid,
       isParent: !1,
       top_level_category_guid: a.parent_guid || a.guid,
-      total: d.reduce(Xe(o), 0),
-      monthlyAmounts: d.reduce(Ue, {})
+      total: c.reduce(Xe(o), 0),
+      monthlyAmounts: c.reduce(Ue, {})
     };
   });
   if (r && r.is_income === s) {
     const a = r.monthlyAmounts.reduce(Xe(o), 0);
-    a !== 0 && c.push({
+    a !== 0 && l.push({
       id: `sub-${r.guid}`,
       category: nt(n.category_general, r.name),
       category_guid: r.guid,
@@ -573,52 +573,52 @@ const gt = ({ categoryGuid: t, topLevelCategoryGuid: n }) => {
       monthlyAmounts: r.monthlyAmounts.reduce(Ue, {})
     });
   }
-  return c;
-}, Do = Et("div")({
+  return l;
+}, wo = Lt("div")({
   display: "flex",
   visibility: "hidden",
   width: 0
 });
-function Io({
+function Do({
   direction: t,
   index: n,
   sortingOrder: s,
   disabled: o,
   className: r,
-  field: c
+  field: l
 }) {
-  const a = Yt(), d = jt();
+  const a = jt(), c = Kt();
   let u = null;
   const i = {};
-  if (t === "asc" ? u = d.slots.columnSortedAscendingIcon : t === "desc" ? u = d.slots.columnSortedDescendingIcon : (u = d.slots.columnUnsortedIcon ?? null, i.sortingOrder = s), !u) return null;
-  const m = a.current.getColumn(c)?.headerName ?? c;
+  if (t === "asc" ? u = c.slots.columnSortedAscendingIcon : t === "desc" ? u = c.slots.columnSortedDescendingIcon : (u = c.slots.columnUnsortedIcon ?? null, i.sortingOrder = s), !u) return null;
+  const m = a.current.getColumn(l)?.headerName ?? l;
   let _ = "";
   t === "asc" ? _ = ", sorted ascending" : t === "desc" && (_ = ", sorted descending");
-  const h = ["Total", "Category"].includes(m) ? "" : " category totals", p = `Sort by ${m}${h}${_}`, y = /* @__PURE__ */ e(u, { className: "MuiDataGrid-sortIcon", fontSize: "small", ...i }), T = /* @__PURE__ */ e(
-    Zt,
+  const g = ["Total", "Category"].includes(m) ? "" : " category totals", h = `Sort by ${m}${g}${_}`, y = /* @__PURE__ */ e(u, { className: "MuiDataGrid-sortIcon", fontSize: "small", ...i }), T = /* @__PURE__ */ e(
+    Xt,
     {
       disabled: o,
       size: "small",
       tabIndex: -1,
-      ...d.slotProps?.baseIconButton,
-      "aria-label": p,
+      ...c.slotProps?.baseIconButton,
+      "aria-label": h,
       className: `MuiDataGrid-sortButton${r ? ` ${r}` : ""}`,
-      title: p,
+      title: h,
       children: y
     }
   );
-  return /* @__PURE__ */ e(Do, { className: "MuiDataGrid-iconButtonContainer", children: n != null ? /* @__PURE__ */ e(Xt, { badgeContent: n, color: "default", overlap: "circular", children: T }) : T });
+  return /* @__PURE__ */ e(wo, { className: "MuiDataGrid-iconButtonContainer", children: n != null ? /* @__PURE__ */ e(Ut, { badgeContent: n, color: "default", overlap: "circular", children: T }) : T });
 }
-const Lo = g.memo(Io), Qe = ({
+const Io = p.memo(Do), Qe = ({
   columns: t,
   onRowClick: n,
   parentCategory: s,
   rows: o,
   totalRow: r
 }) => {
-  const c = Z(), { onEvent: a } = $(), d = c.palette.mode === "light";
+  const l = K(), { onEvent: a } = V(), c = l.palette.mode === "light";
   return /* @__PURE__ */ e(
-    Ut,
+    Yt,
     {
       columns: t,
       disableColumnFilter: !0,
@@ -626,9 +626,9 @@ const Lo = g.memo(Io), Qe = ({
       hideFooter: !0,
       initialState: { sorting: { sortModel: [{ field: "category", sort: "asc" }] } },
       onRowClick: (u) => {
-        s || n?.(u.row.category_guid), a(w.TRENDS_CLICK_LIST_ITEM, {
-          ...W,
-          listItem: Nt[u.row.category_guid]
+        s || n?.(u.row.category_guid), a(D.TRENDS_CLICK_LIST_ITEM, {
+          ...O,
+          listItem: Ht[u.row.category_guid]
         });
       },
       pinnedRows: {
@@ -637,7 +637,7 @@ const Lo = g.memo(Io), Qe = ({
       rowHeight: 64,
       rows: o,
       slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
-      slots: { columnHeaderSortIcon: Lo },
+      slots: { columnHeaderSortIcon: Io },
       sortingOrder: ["asc", "desc"],
       sx: {
         borderColor: "divider",
@@ -645,11 +645,11 @@ const Lo = g.memo(Io), Qe = ({
         borderStyle: "solid",
         borderRadius: 2,
         "& .MuiDataGrid-columnHeaders": {
-          bgcolor: d ? "neutral.50" : "neutral.800",
+          bgcolor: c ? "neutral.50" : "neutral.800",
           borderBottom: "none"
         },
         "& .trends-table-header": {
-          bgcolor: d ? "neutral.50" : "neutral.800"
+          bgcolor: c ? "neutral.50" : "neutral.800"
         }
       }
     }
@@ -661,28 +661,28 @@ const Lo = g.memo(Io), Qe = ({
   height: o = "100%",
   sx: r = {}
 }) => {
-  const { trends: c } = R(), { trendsCategories: a } = q(), d = g.useMemo(() => vo(t.start, t.end), [t]), u = g.useMemo(() => wo(d, c), [d, c]), i = g.useMemo(() => {
+  const { trends: l } = k(), { trendsCategories: a } = U(), c = p.useMemo(() => xo(t.start, t.end), [t]), u = p.useMemo(() => vo(c, l), [c, l]), i = p.useMemo(() => {
     if (n)
-      return a.find((h) => h.guid === n);
-  }, [n, a]), [f, m] = g.useMemo(() => {
-    let h = a;
-    return i && (h = i.subCategories.filter(
-      (p) => p.monthlyAmounts.some((y) => y.amount !== 0)
+      return a.find((g) => g.guid === n);
+  }, [n, a]), [f, m] = p.useMemo(() => {
+    let g = a;
+    return i && (g = i.subCategories.filter(
+      (h) => h.monthlyAmounts.some((y) => y.amount !== 0)
     )), [
-      Ze(h, c, !0, d, i),
-      Ze(h, c, !1, d, i)
+      Ze(g, l, !0, c, i),
+      Ze(g, l, !1, c, i)
     ];
-  }, [a, d, i, c]), _ = {
+  }, [a, c, i, l]), _ = {
     id: "total",
-    category: c.table_column_total,
+    category: l.table_column_total,
     category_guid: "total",
     isParent: !1,
     top_level_category_guid: "total",
-    total: m.reduce((h, p) => h + p.total, 0),
+    total: m.reduce((g, h) => g + h.total, 0),
     monthlyAmounts: m.reduce(
-      (h, p) => (Object.entries(p.monthlyAmounts).forEach(([y, T]) => {
-        h[y] = (h[y] || 0) + T;
-      }), h),
+      (g, h) => (Object.entries(h.monthlyAmounts).forEach(([y, T]) => {
+        g[y] = (g[y] || 0) + T;
+      }), g),
       {}
     )
   };
@@ -714,26 +714,26 @@ const Lo = g.memo(Io), Qe = ({
       ]
     }
   );
-}, Eo = {
+}, Lo = {
   title: "Transaction List"
-}, Mo = ({
+}, Eo = ({
   categoryGuid: t,
   dateRange: n,
   isOpen: s,
   onClose: o
 }) => {
-  const { onEvent: r } = $(), { selectedAccountGuids: c } = fe(), { common: a } = R(), { setFilter: d, sortedTransactions: u } = we(), [i, f] = g.useState(""), m = g.useMemo(
-    () => u.find((h) => h.guid === i),
+  const { onEvent: r } = V(), { selectedAccountGuids: l } = ye(), { common: a } = k(), { setFilter: c, sortedTransactions: u } = we(), [i, f] = p.useState(""), m = p.useMemo(
+    () => u.find((g) => g.guid === i),
     [i, u]
   );
-  g.useEffect(() => {
-    d({
-      accounts: c,
+  p.useEffect(() => {
+    c({
+      accounts: l,
       dateRange: n,
-      custom: (h) => t === "" || t === h.category_guid || t === h.top_level_category_guid,
+      custom: (g) => t === "" || t === g.category_guid || t === g.top_level_category_guid,
       showSplits: !!t
     });
-  }, [c, t, n]), g.useEffect(() => r(w.TRENDS_VIEW_TRANSACTIONS), []);
+  }, [l, t, n]), p.useEffect(() => r(D.TRENDS_VIEW_TRANSACTIONS), []);
   const _ = () => {
     f(""), o();
   };
@@ -743,97 +743,98 @@ const Lo = g.memo(Io), Qe = ({
       ariaLabelClose: a.close_aria,
       isOpen: s,
       onClose: _,
-      title: Eo.title,
+      title: Lo.title,
       children: [
         m && /* @__PURE__ */ e(dt, { transaction: m }),
-        !m && /* @__PURE__ */ e(ct, { onClick: f })
+        !m && /* @__PURE__ */ e(lt, { onClick: f })
       ]
     }
   );
-}, Ao = A(Mo), Ro = ({ onBackClick: t, onMenuClick: n, sx: s }) => {
-  const { onEvent: o } = $(), { isDesktop: r, isTablet: c, isMobile: a } = Q(), { isAccountDataLoaded: d, loadAccountData: u } = De(), {
+}, Mo = R(Eo), Ao = ({ onBackClick: t, onMenuClick: n, sx: s }) => {
+  const { onEvent: o } = V(), { isDesktop: r, isTablet: l, isMobile: a } = Y(), { isAccountDataLoaded: c, loadAccountData: u } = De(), {
     categoriesLoaded: i,
     loadCategories: f,
-    loadDateRangeCategoryTotals: m,
-    loadMonthlyCategoryTotals: _,
-    monthlyCategoryTotals: h,
-    getCategoryName: p
-  } = q(), {
-    isTransactionDataLoaded: y,
-    loadTransactionData: T,
-    sortedTransactions: N
-  } = we(), { selectedDateRange: x, setSelectedDateRange: L } = ye(), { isInitialized: M, selectedAccounts: E } = fe(), { trends: v } = R(), [K, ae] = g.useState(!1), [Y, J] = g.useState(!1), [P, V] = g.useState("Chart"), [O, ee] = g.useState(""), [Ce, ie] = g.useState(window.innerHeight), j = Ce - (a ? 315 : 345);
+    monthlyCategoryTotals: m,
+    getCategoryName: _,
+    reloadCategoryTotals: g
+  } = U(), {
+    isTransactionDataLoaded: h,
+    loadTransactionData: y,
+    sortedTransactions: T
+  } = we(), { selectedDateRange: x, setSelectedDateRange: H } = Ce(), { isInitialized: L, selectedAccounts: M, selectedAccountGuids: I } = ye(), { trends: E } = k(), [X, Z] = p.useState(!1), [te, oe] = p.useState(!1), [A, de] = p.useState("Chart"), [G, ae] = p.useState(""), [ie, z] = p.useState(window.innerHeight), Q = ie - (a ? 315 : 345);
   Ie({
     widgetName: "TrendsFullWidget",
-    isLoaded: K
-  }), g.useEffect(() => {
-    const D = () => ie(window.innerHeight);
-    return window.addEventListener("resize", D), d || u().finally(), i || f().finally(), y || T().finally(), () => window.removeEventListener("resize", D);
-  }, []), g.useEffect(() => {
-    M && m(E, x.start, x.end).then(() => {
-      _(
-        E,
-        x.start,
-        x.end
-      );
-    }).finally(() => {
-      ae(!0), o(w.TRENDS_LOAD_WIDGET, {
-        ...W,
-        time_period: `${Se(x.end, x.start)}M`
-      });
-    });
-  }, [M, E, x]);
-  const ne = g.useMemo(() => {
-    if (!K) return { stackedDatasets: [], unstackedDatasets: [] };
-    const D = Gt(
-      h,
+    isLoaded: X
+  }), p.useEffect(() => {
+    const v = () => z(window.innerHeight);
+    return window.addEventListener("resize", v), c || u().finally(), i || f().finally(), h || y().finally(), () => window.removeEventListener("resize", v);
+  }, []), p.useEffect(() => {
+    L && c && g(M, x.start, x.end).finally(
+      () => {
+        Z(!0), o(D.TRENDS_LOAD_WIDGET, {
+          ...O,
+          time_period: `${Se(x.end, x.start)}M`
+        });
+      }
+    );
+  }, [
+    L,
+    c,
+    I.join(","),
+    x.start.getTime(),
+    x.end.getTime()
+  ]);
+  const F = p.useMemo(() => {
+    if (!X) return { stackedDatasets: [], unstackedDatasets: [] };
+    const v = Gt(
+      m,
       x.start,
       x.end
-    ), l = O.length ? D.filter(
-      (b) => b.top_level_category_guid === O || b.category_guid === O
-    ) : Bt(D);
+    ), d = G.length ? v.filter(
+      (b) => b.top_level_category_guid === G || b.category_guid === G
+    ) : Ot(v);
     return {
-      stackedDatasets: l.filter(Vt),
-      unstackedDatasets: l.filter(Pt)
+      stackedDatasets: d.filter(Pt),
+      unstackedDatasets: d.filter(Bt)
     };
-  }, [h, O, x]), U = (D, l) => {
-    V(l ?? P), o(w.TRENDS_CLICK_TOGGLE_VIEW);
-  }, de = (D) => {
-    const l = et(D?.[0], 1), b = D?.[1], I = Se(b, l);
-    L({ start: l, end: b }), o(w.TRENDS_CLICK_TIME_WINDOW, {
-      time_period: I + "M"
+  }, [m, G, x]), ne = (v, d) => {
+    de(d ?? A), o(D.TRENDS_CLICK_TOGGLE_VIEW);
+  }, q = (v) => {
+    const d = et(v?.[0], 1), b = v?.[1], w = Se(b, d);
+    H({ start: d, end: b }), o(D.TRENDS_CLICK_TIME_WINDOW, {
+      time_period: w + "M"
     });
-  }, B = () => {
-    o(w.TRENDS_CLICK_FILTER);
-  }, ue = (D) => {
-    ee(D);
-  }, se = (D) => {
-    ee(D), o(w.TRENDS_CLICK_LEGEND, { category: p(D) });
-  }, le = (D) => {
-    o(w.TRENDS_HOVER_LEGEND, { category: p(D) });
-  }, ce = (D) => {
-    o(w.TRENDS_HOVER_AREA, { category: D });
-  }, me = (D) => {
-    o(w.TRENDS_HOVER_POINT, { category: D });
+  }, J = () => {
+    o(D.TRENDS_CLICK_FILTER);
+  }, se = (v) => {
+    ae(v);
+  }, ce = (v) => {
+    ae(v), o(D.TRENDS_CLICK_LEGEND, { category: _(v) });
+  }, le = (v) => {
+    o(D.TRENDS_HOVER_LEGEND, { category: _(v) });
+  }, me = (v) => {
+    o(D.TRENDS_HOVER_AREA, { category: v });
+  }, he = (v) => {
+    o(D.TRENDS_HOVER_POINT, { category: v });
   };
-  return !M || !K ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ C(
+  return !L || !c || !X ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ C(
     ut,
     {
-      calendarActions: { onRangeChanged: de },
+      calendarActions: { onRangeChanged: q },
       dateRange: x,
       dateRangeVariant: "timeframebuttons",
-      onAccountsFilterClick: B,
+      onAccountsFilterClick: J,
       onBackClick: t,
       onMenuClick: n,
       sx: s,
-      title: v.title,
+      title: E.title,
       children: [
         /* @__PURE__ */ C(
           S,
           {
             sx: {
               // eslint-disable-next-line no-nested-ternary
-              px: r ? 48 : c ? 24 : 12
+              px: r ? 48 : l ? 24 : 12
             },
             children: [
               /* @__PURE__ */ C(
@@ -846,39 +847,39 @@ const Lo = g.memo(Io), Qe = ({
                     /* @__PURE__ */ e(
                       ft,
                       {
-                        selectedCategoryGuid: O,
+                        selectedCategoryGuid: G,
                         selectedDateRange: x
                       }
                     ),
-                    /* @__PURE__ */ e(pt, { onTabChange: U, selectedTab: P })
+                    /* @__PURE__ */ e(pt, { onTabChange: ne, selectedTab: A })
                   ]
                 }
               ),
               /* @__PURE__ */ C(S, { alignItems: "center", flexDirection: "row", width: "100%", children: [
-                /* @__PURE__ */ e(H, { flexGrow: 1, children: O && /* @__PURE__ */ C(Te, { onClick: () => ee(""), sx: { p: 0, pr: 5 }, children: [
+                /* @__PURE__ */ e(W, { flexGrow: 1, children: G && /* @__PURE__ */ C(Te, { onClick: () => ae(""), sx: { p: 0, pr: 5 }, children: [
                   /* @__PURE__ */ e(He, { name: "arrow_back" }),
-                  v.all_categories
+                  E.all_categories
                 ] }) }),
-                /* @__PURE__ */ e(Te, { onClick: () => J(!0), sx: { px: 5 }, children: `${v.view_transactions} (${N.length})` })
+                /* @__PURE__ */ e(Te, { onClick: () => oe(!0), sx: { px: 5 }, children: `${E.view_transactions} (${T.length})` })
               ] }),
-              /* @__PURE__ */ C(H, { children: [
-                P === "Chart" && /* @__PURE__ */ e(
-                  So,
+              /* @__PURE__ */ C(W, { children: [
+                A === "Chart" && /* @__PURE__ */ e(
+                  To,
                   {
-                    availableHeight: j,
-                    onClickLegend: se,
-                    onHoverArea: ce,
+                    availableHeight: Q,
+                    onClickLegend: ce,
+                    onHoverArea: me,
                     onHoverLegend: le,
-                    onHoverPoint: me,
-                    stackedDatasets: ne.stackedDatasets,
-                    unstackedDatasets: ne.unstackedDatasets
+                    onHoverPoint: he,
+                    stackedDatasets: F.stackedDatasets,
+                    unstackedDatasets: F.unstackedDatasets
                   }
                 ),
-                P === "Table" && /* @__PURE__ */ e(
+                A === "Table" && /* @__PURE__ */ e(
                   yt,
                   {
-                    onClickRow: ue,
-                    selectedCategory: O,
+                    onClickRow: se,
+                    selectedCategory: G,
                     selectedDateRange: x
                   }
                 )
@@ -887,19 +888,19 @@ const Lo = g.memo(Io), Qe = ({
           }
         ),
         /* @__PURE__ */ e(
-          Ao,
+          Mo,
           {
-            categoryGuid: O,
+            categoryGuid: G,
             dateRange: x,
-            isOpen: Y,
-            onClose: () => J(!1)
+            isOpen: te,
+            onClose: () => oe(!1)
           }
         )
       ]
     }
   );
-}, rs = A(Ro), ko = () => {
-  const { monthlyCategoryTotals: t } = q(), { trends: n } = R(), s = Z(), { availableHeight: o = 300 } = st(), r = g.useMemo(() => zt(t), [t]);
+}, ss = R(Ao), Ro = () => {
+  const { monthlyCategoryTotals: t } = U(), { trends: n } = k(), s = K(), { availableHeight: o = 300 } = st(), r = p.useMemo(() => Vt(t), [t]);
   return /* @__PURE__ */ e(
     Ve,
     {
@@ -916,39 +917,39 @@ const Lo = g.memo(Io), Qe = ({
       valueFormatterString: "0,0"
     }
   );
-}, Ho = A(ko), No = ({ onPrimaryCtaClick: t, sx: n }) => {
-  const { isAccountDataLoaded: s, loadAccountData: o } = De(), { loadMonthlyCategoryTotals: r, monthlyTotalsLoaded: c } = q(), { isInitialized: a } = Be(), { trends: d } = R(), { selectedAccounts: u } = fe();
-  return g.useEffect(() => {
+}, ko = R(Ro), Ho = ({ onPrimaryCtaClick: t, sx: n }) => {
+  const { isAccountDataLoaded: s, loadAccountData: o } = De(), { loadMonthlyCategoryTotals: r, monthlyTotalsLoaded: l } = U(), { isInitialized: a } = Be(), { trends: c } = k(), { selectedAccounts: u } = ye();
+  return p.useEffect(() => {
     s || o().finally();
   }, []), Ie({
     widgetName: "TrendsMiniWidget",
-    isLoaded: c
-  }), g.useEffect(() => {
+    isLoaded: l
+  }), p.useEffect(() => {
     a && s && r(u).finally();
-  }, [s, a, u]), !s || !a || !c ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
-    Qt,
+  }, [s, a, u]), !s || !a || !l ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
+    Zt,
     {
       contentStyles: { height: "calc(100% - 72px)", minHeight: 300, ":last-child": { pb: 0 } },
       onPrimaryCtaClick: t,
-      primaryCtaLabel: d.primary_cta,
-      subTitle: d.sub_title,
+      primaryCtaLabel: c.primary_cta,
+      subTitle: c.sub_title,
       sx: { height: "100%", ...n },
-      title: d.mini_title,
-      children: /* @__PURE__ */ e(Ho, {})
+      title: c.mini_title,
+      children: /* @__PURE__ */ e(ko, {})
     }
   );
-}, as = A(No), Wo = 70, qe = ({
+}, rs = R(Ho), No = 70, qe = ({
   title: t,
   totalAmount: n,
   transactionType: s,
   percentage: o,
   secondaryLabel: r,
-  shouldDisplayPercentage: c
+  shouldDisplayPercentage: l
 }) => {
-  const { availableWidth: a } = st(), d = g.useRef(null), u = g.useRef(null), i = Wt(Number(Math.abs(o)), {
+  const { availableWidth: a } = st(), c = p.useRef(null), u = p.useRef(null), i = Nt(Number(Math.abs(o)), {
     style: "percent",
     minimumIntegerDigits: 1
-  }), f = a === 288 && re(n, "0,0.00").length > 10 ? re(n, "0,0") : re(n, "0,0.00"), m = s === "spending" ? o > 0 : o >= 0, _ = s === "spending" ? "error.main" : "success.main", h = s === "spending" ? "success.main" : "text.secondary", p = d?.current, y = u?.current, T = p && y ? p.scrollWidth > y.clientWidth - Wo : !1;
+  }), f = a === 288 && re(n, "0,0.00").length > 10 ? re(n, "0,0") : re(n, "0,0.00"), m = s === "spending" ? o > 0 : o >= 0, _ = s === "spending" ? "error.main" : "success.main", g = s === "spending" ? "success.main" : "text.secondary", h = c?.current, y = u?.current, T = h && y ? h.scrollWidth > y.clientWidth - No : !1;
   return /* @__PURE__ */ C(
     S,
     {
@@ -971,14 +972,14 @@ const Lo = g.memo(Io), Qe = ({
               justifyContent: "space-between"
             },
             children: [
-              /* @__PURE__ */ e(pe, { color: "text.secondary", variant: "caption", children: t }),
-              c && /* @__PURE__ */ C(S, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
-                m ? /* @__PURE__ */ e(Jt, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e(eo, { size: 20, sx: { color: h } }),
+              /* @__PURE__ */ e(fe, { color: "text.secondary", variant: "caption", children: t }),
+              l && /* @__PURE__ */ C(S, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+                m ? /* @__PURE__ */ e(qt, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e(Jt, { size: 20, sx: { color: g } }),
                 /* @__PURE__ */ e(
-                  pe,
+                  fe,
                   {
                     sx: {
-                      color: m ? _ : h,
+                      color: m ? _ : g,
                       fontWeight: 600
                     },
                     variant: "body2",
@@ -1000,17 +1001,17 @@ const Lo = g.memo(Io), Qe = ({
             },
             children: [
               /* @__PURE__ */ e(
-                H,
+                W,
                 {
-                  ref: d,
+                  ref: c,
                   sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-                  children: /* @__PURE__ */ e(Ge, { children: f })
+                  children: /* @__PURE__ */ e(Oe, { children: f })
                 }
               ),
-              c && a >= 450 && !T && /* @__PURE__ */ e(
-                pe,
+              l && a >= 450 && !T && /* @__PURE__ */ e(
+                fe,
                 {
-                  color: m ? _ : h,
+                  color: m ? _ : g,
                   variant: "caption",
                   children: r
                 }
@@ -1021,54 +1022,54 @@ const Lo = g.memo(Io), Qe = ({
       ]
     }
   );
-}, Oo = A(() => {
-  const { trends: t } = R();
+}, Wo = R(() => {
+  const { trends: t } = k();
   return /* @__PURE__ */ C(S, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
-    /* @__PURE__ */ e(to, { size: 32 }),
+    /* @__PURE__ */ e(eo, { size: 32 }),
     /* @__PURE__ */ C(S, { children: [
-      /* @__PURE__ */ e(pe, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
-      /* @__PURE__ */ e(pe, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
+      /* @__PURE__ */ e(fe, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
+      /* @__PURE__ */ e(fe, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
     ] })
   ] });
-}), is = A(({ onCtaClick: t }) => {
+}), as = R(({ onCtaClick: t }) => {
   const { isAccountDataLoaded: n, loadAccountData: s, visibleAccounts: o } = De();
-  g.useEffect(() => {
+  p.useEffect(() => {
     n || s().finally();
   }, []);
-  const { onEvent: r } = $(), { monthlyCategoryTotals: c, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: d } = q(), u = {
-    start: qt(/* @__PURE__ */ new Date(), 1),
+  const { onEvent: r } = V(), { monthlyCategoryTotals: l, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: c } = U(), u = {
+    start: Qt(/* @__PURE__ */ new Date(), 1),
     end: /* @__PURE__ */ new Date()
-  }, { trends: i } = R(), { selectedAccounts: f, isInitialized: m } = fe();
+  }, { trends: i } = k(), { selectedAccounts: f, isInitialized: m } = ye();
   Ie({
     widgetName: "TrendsMicroWidget",
-    isLoaded: d
-  }), g.useEffect(() => {
+    isLoaded: c
+  }), p.useEffect(() => {
     m && a(f, u.start).then(() => {
-      r(w.TRENDS_LOAD_WIDGET, {
+      r(D.TRENDS_LOAD_WIDGET, {
         state: o?.length ? "default" : "zeroState"
       });
     });
   }, [m, f]);
-  const { spendingData: _, incomeData: h } = g.useMemo(
+  const { spendingData: _, incomeData: g } = p.useMemo(
     () => ({
-      spendingData: it(c, u),
-      incomeData: at(c, u)
+      spendingData: it(l, u),
+      incomeData: at(l, u)
     }),
-    [c, u]
-  ), [p, y] = _, [T, N] = h, x = Ye(y.y, p.y), L = Ye(N.y, T.y), M = m && !o?.length, E = () => {
+    [l, u]
+  ), [h, y] = _, [T, x] = g, H = Ke(y.y, h.y), L = Ke(x.y, T.y), M = m && !o?.length, I = () => {
     r(
-      M ? w.TRENDS_CLICK_GET_STARTED : w.TRENDS_CLICK_VIEW_MORE
+      M ? D.TRENDS_CLICK_GET_STARTED : D.TRENDS_CLICK_VIEW_MORE
     ), t();
   };
-  return !d || !m ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
-    ao,
+  return !c || !m ? /* @__PURE__ */ e(Le, {}) : /* @__PURE__ */ e(
+    ro,
     {
       className: "mx-trends-microwidget",
       ctaLabel: i.micro_primary_cta_label,
-      onCTAClick: E,
+      onCTAClick: I,
       subHeader: M ? void 0 : i.micro_subheader,
       title: i.title,
-      children: M ? /* @__PURE__ */ e(Oo, {}) : /* @__PURE__ */ C(
+      children: M ? /* @__PURE__ */ e(Wo, {}) : /* @__PURE__ */ C(
         S,
         {
           sx: {
@@ -1080,9 +1081,9 @@ const Lo = g.memo(Io), Qe = ({
             /* @__PURE__ */ e(
               qe,
               {
-                percentage: x,
+                percentage: H,
                 secondaryLabel: i.micro_secondary_label,
-                shouldDisplayPercentage: y.y !== 0 && p.y !== 0,
+                shouldDisplayPercentage: y.y !== 0 && h.y !== 0,
                 title: i.spending_label,
                 totalAmount: y.y,
                 transactionType: "spending"
@@ -1093,9 +1094,9 @@ const Lo = g.memo(Io), Qe = ({
               {
                 percentage: L,
                 secondaryLabel: i.micro_secondary_label,
-                shouldDisplayPercentage: N.y !== 0 && T.y !== 0,
+                shouldDisplayPercentage: x.y !== 0 && T.y !== 0,
                 title: i.income_label,
-                totalAmount: N.y,
+                totalAmount: x.y,
                 transactionType: "income"
               }
             )
@@ -1104,17 +1105,17 @@ const Lo = g.memo(Io), Qe = ({
       )
     }
   );
-}), Go = A(
+}), Go = R(
   ({ isExpanded: t, onClick: n }) => {
-    const s = Z();
-    return /* @__PURE__ */ e(mt, { children: /* @__PURE__ */ e(lo, { onClick: n, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
+    const s = K();
+    return /* @__PURE__ */ e(mt, { children: /* @__PURE__ */ e(io, { onClick: n, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
       S,
       {
         sx: { color: s.palette.primary.main, flexDirection: "row", alignItems: "center" },
         children: [
-          /* @__PURE__ */ e(ht, { children: /* @__PURE__ */ e(F, { bold: !0, variant: "body2", children: t ? "View less" : "View more" }) }),
-          /* @__PURE__ */ e(co, { sx: { color: s.palette.primary.main }, children: t ? /* @__PURE__ */ e(oo, {}) : /* @__PURE__ */ e(
-            no,
+          /* @__PURE__ */ e(ht, { children: /* @__PURE__ */ e(P, { bold: !0, variant: "body2", children: t ? "View less" : "View more" }) }),
+          /* @__PURE__ */ e(co, { sx: { color: s.palette.primary.main }, children: t ? /* @__PURE__ */ e(to, {}) : /* @__PURE__ */ e(
+            oo,
             {
               sx: {
                 transition: "transform 0.3s ease-in-out",
@@ -1126,89 +1127,89 @@ const Lo = g.memo(Io), Qe = ({
       }
     ) }) });
   }
-), Je = A(
+), Je = R(
   ({
     totalAmount: t,
     guid: n,
     name: s,
     transactions: o,
     onClick: r,
-    isLastItem: c = !1,
+    isLastItem: l = !1,
     showDivider: a = !0
   }) => {
-    const { trends: d } = R(), { onEvent: u } = $(), i = Z(), f = `${o.length} ${o.length === 1 ? d.transaction : d.transactions}`, m = () => {
-      r?.(), u(w.TRENDS_CLICK_LIST_ITEM, {
-        ...W,
+    const { trends: c } = k(), { onEvent: u } = V(), i = K(), f = `${o.length} ${o.length === 1 ? c.transaction : c.transactions}`, m = () => {
+      r?.(), u(D.TRENDS_CLICK_LIST_ITEM, {
+        ...O,
         listItem: s
       });
     };
-    return /* @__PURE__ */ C(g.Fragment, { children: [
+    return /* @__PURE__ */ C(p.Fragment, { children: [
       /* @__PURE__ */ e(
-        uo,
+        lo,
         {
           leftIcon: n ? /* @__PURE__ */ e(
             ve,
             {
               categoryGuid: n,
               sx: {
-                bgcolor: Mt(Oe(n, i), 0.15),
-                border: `1px solid ${Oe(n, i)}`,
+                bgcolor: Et(Ge(n, i), 0.15),
+                border: `1px solid ${Ge(n, i)}`,
                 color: "text.primary"
               }
             }
           ) : void 0,
           onClick: m,
           rightContent: re(Math.abs(t), "0,0.00"),
-          rightIcon: r ? /* @__PURE__ */ e(so, {}) : void 0,
+          rightIcon: r ? /* @__PURE__ */ e(no, {}) : void 0,
           subtitle: f,
           title: s
         }
       ),
-      a && /* @__PURE__ */ e(Ne, { component: "li", sx: { ml: c ? 24 : 68 } })
+      a && /* @__PURE__ */ e(Ne, { component: "li", sx: { ml: l ? 24 : 68 } })
     ] }, n);
   }
-), Bo = A(
+), Oo = R(
   ({ availableHeight: t = 0, onCategoryClick: n }) => {
-    const { collapsedCategories: s, visibleCategories: o, setVisibleListLength: r } = ye(), { isLargeDesktop: c, isDesktop: a } = Q(), { trends: d } = R(), { onEvent: u } = $(), [i, f] = g.useState(!1), m = a || c;
-    g.useEffect(() => {
-      const p = Math.floor(t / 64) - 1, y = o.length + s.length;
-      p !== o.length && (r(m ? Math.max(p, 5) : 5), f(p >= y));
+    const { collapsedCategories: s, visibleCategories: o, setVisibleListLength: r } = Ce(), { isLargeDesktop: l, isDesktop: a } = Y(), { trends: c } = k(), { onEvent: u } = V(), [i, f] = p.useState(!1), m = a || l;
+    p.useEffect(() => {
+      const h = Math.floor(t / 64) - 1, y = o.length + s.length;
+      h !== o.length && (r(m ? Math.max(h, 5) : 5), f(h >= y));
     }, [t]);
     const _ = () => {
-      f(!i), u(w.TRENDS_CLICK_VIEW_MORE, {
-        ...W
+      f(!i), u(D.TRENDS_CLICK_VIEW_MORE, {
+        ...O
       });
-    }, h = o.length + (i ? s.length : 0);
+    }, g = o.length + (i ? s.length : 0);
     return /* @__PURE__ */ C(S, { sx: { width: "100%" }, children: [
-      /* @__PURE__ */ e(S, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Ge, { children: d.categories }) }),
+      /* @__PURE__ */ e(S, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Oe, { children: c.categories }) }),
       /* @__PURE__ */ C(We, { children: [
-        o.map((p, y) => /* @__PURE__ */ e(
+        o.map((h, y) => /* @__PURE__ */ e(
           Je,
           {
-            ...p,
-            isLastItem: y === h - 1,
-            onClick: p.transactions.length > 0 ? () => n(p) : void 0,
+            ...h,
+            isLastItem: y === g - 1,
+            onClick: h.transactions.length > 0 ? () => n(h) : void 0,
             showDivider: !0
           },
-          p.guid
+          h.guid
         )),
         /* @__PURE__ */ e(
-          io,
+          ao,
           {
             component: "li",
             in: i,
             sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
-            children: /* @__PURE__ */ e(We, { children: s.map((p, y) => {
+            children: /* @__PURE__ */ e(We, { children: s.map((h, y) => {
               const T = o.length + y;
               return /* @__PURE__ */ e(
                 Je,
                 {
-                  ...p,
-                  isLastItem: T === h - 1,
-                  onClick: p.transactions.length > 0 ? () => n(p) : void 0,
+                  ...h,
+                  isLastItem: T === g - 1,
+                  onClick: h.transactions.length > 0 ? () => n(h) : void 0,
                   showDivider: !0
                 },
-                p.guid
+                h.guid
               );
             }) })
           }
@@ -1217,17 +1218,17 @@ const Lo = g.memo(Io), Qe = ({
       ] })
     ] });
   }
-), Po = ({ beats: t, onInsightCardClick: n }) => {
-  const { onEvent: s } = $(), { isMobile: o, isDesktop: r, isLargeDesktop: c } = Q(), { beatStore: a, endpoint: d, sessionToken: u } = Be(), i = r || c, f = i || o ? 1 : 2, m = () => null, _ = (T) => {
-    n?.(T), s(w.TRENDS_CLICK_INSIGHT, W);
-  }, h = i ? 200 : 170, p = i ? 170 : 124, y = t.length > 0 ? h : p;
-  return /* @__PURE__ */ e(mo, { sx: { height: y }, children: /* @__PURE__ */ e(
-    Kt,
+), Bo = ({ beats: t, onInsightCardClick: n }) => {
+  const { onEvent: s } = V(), { isMobile: o, isDesktop: r, isLargeDesktop: l } = Y(), { beatStore: a, endpoint: c, sessionToken: u } = Be(), i = r || l, f = i || o ? 1 : 2, m = () => null, _ = (T) => {
+    n?.(T), s(D.TRENDS_CLICK_INSIGHT, O);
+  }, g = i ? 200 : 170, h = i ? 170 : 124, y = t.length > 0 ? g : h;
+  return /* @__PURE__ */ e(uo, { sx: { height: y }, children: /* @__PURE__ */ e(
+    $t,
     {
       areBeatsLoading: a.isLoading,
       beats: t,
       cardStyle: "border",
-      endpoint: d,
+      endpoint: c,
       headerSx: { p: 0 },
       logOutUser: m,
       onCardClick: _,
@@ -1240,10 +1241,10 @@ const Lo = g.memo(Io), Qe = ({
       visibleCardsCount: f
     }
   ) });
-}, Vo = A(Po), zo = A(({ chartLabel: t, chartColor: n }) => {
-  const { onEvent: s } = $(), {
+}, Po = R(Bo), Vo = R(({ chartLabel: t, chartColor: n }) => {
+  const { onEvent: s } = V(), {
     categoryDetailsChartData: { monthlyAmounts: o, tooltipLabels: r }
-  } = ye();
+  } = Ce();
   return /* @__PURE__ */ e(S, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
     Ve,
     {
@@ -1258,7 +1259,7 @@ const Lo = g.memo(Io), Qe = ({
         stroke: n
       }),
       onItemClick: () => {
-        s(w.TRENDS_CLICK_CHART, W);
+        s(D.TRENDS_CLICK_CHART, O);
       },
       showArea: !0,
       showAverage: !0,
@@ -1273,22 +1274,22 @@ const Lo = g.memo(Io), Qe = ({
       valueFormatterString: "0,0"
     }
   ) });
-}), Fo = A(() => {
-  const t = Z(), { is_mobile_webview: n } = rt(), { isDesktop: s, isSmallTablet: o, isTablet: r } = Q(), { common: c, trends: a } = R(), { selectedCategoryData: d, selectedDateRangeMonthRange: u } = ye(), { sortedTransactions: i } = we(), [f, m] = g.useState(null);
-  if (!d)
+}), zo = R(() => {
+  const t = K(), { is_mobile_webview: n } = rt(), { isDesktop: s, isSmallTablet: o, isTablet: r } = Y(), { common: l, trends: a } = k(), { selectedCategoryData: c, selectedDateRangeMonthRange: u } = Ce(), { sortedTransactions: i } = we(), [f, m] = p.useState(null);
+  if (!c)
     return null;
-  const { guid: _, name: h, is_income: p, totalAmount: y } = d, T = Oe(_, t), N = p ? a.income_label : a.spending_label, x = ` ${d.transactions.length === 1 ? a.transaction : a.transactions} (${d.transactions.length})`, L = g.useMemo(
-    () => i.find((v) => v.guid === f),
+  const { guid: _, name: g, is_income: h, totalAmount: y } = c, T = Ge(_, t), x = h ? a.income_label : a.spending_label, H = ` ${c.transactions.length === 1 ? a.transaction : a.transactions} (${c.transactions.length})`, L = p.useMemo(
+    () => i.find((E) => E.guid === f),
     [f, i]
-  ), M = i.length > 0 && !n && (s || r && !o), E = (v) => v.category_guid === _ || v.top_level_category_guid === _;
+  ), M = i.length > 0 && !n && (s || r && !o), I = (E) => E.category_guid === _ || E.top_level_category_guid === _;
   return /* @__PURE__ */ C(S, { sx: { alignItems: "center", height: "100%" }, children: [
     /* @__PURE__ */ C(S, { sx: { borderRadius: 0, pb: 4, pt: 16, px: 12, width: "100%" }, children: [
       /* @__PURE__ */ e(We, { sx: { px: 12 }, children: /* @__PURE__ */ C(mt, { children: [
-        /* @__PURE__ */ e(ho, { children: /* @__PURE__ */ e(ve, { categoryGuid: _ }) }),
+        /* @__PURE__ */ e(mo, { children: /* @__PURE__ */ e(ve, { categoryGuid: _ }) }),
         /* @__PURE__ */ e(
           ht,
           {
-            primary: h,
+            primary: g,
             secondary: u,
             slotProps: {
               primary: { component: "div", variant: "h3", fontSize: 18, fontWeight: 700 },
@@ -1296,19 +1297,19 @@ const Lo = g.memo(Io), Qe = ({
             }
           }
         ),
-        /* @__PURE__ */ e(F, { component: "div", variant: "h3", children: re(Math.abs(y), "0,0.00") })
+        /* @__PURE__ */ e(P, { component: "div", variant: "h3", children: re(Math.abs(y), "0,0.00") })
       ] }) }),
-      /* @__PURE__ */ e(zo, { chartColor: T, chartLabel: N }),
+      /* @__PURE__ */ e(Vo, { chartColor: T, chartLabel: x }),
       /* @__PURE__ */ C(S, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 12 }, children: [
-        /* @__PURE__ */ e(F, { bold: !0, variant: "body1", children: x }),
-        M && /* @__PURE__ */ e(go, { filter: E })
+        /* @__PURE__ */ e(P, { bold: !0, variant: "body1", children: H }),
+        M && /* @__PURE__ */ e(ho, { filter: I })
       ] })
     ] }),
     /* @__PURE__ */ e(
-      ct,
+      lt,
       {
         bgcolor: "transparent",
-        filter: E,
+        filter: I,
         height: "calc(100vh - 475px)",
         onClick: m
       }
@@ -1316,7 +1317,7 @@ const Lo = g.memo(Io), Qe = ({
     /* @__PURE__ */ e(
       Pe,
       {
-        ariaLabelClose: c.close_aria,
+        ariaLabelClose: l.close_aria,
         isOpen: !!L,
         onClose: () => m(""),
         title: a.transaction,
@@ -1324,30 +1325,30 @@ const Lo = g.memo(Io), Qe = ({
       }
     )
   ] });
-}), $o = (t, n) => {
+}), Fo = (t, n) => {
   const s = at(t, n), o = it(t, n);
   return [s, o].filter((r) => r.length > 0);
-}, Ko = (t, n) => {
-  const [s, o] = t, r = s, c = o ?? s, a = [];
+}, $o = (t, n) => {
+  const [s, o] = t, r = s, l = o ?? s, a = [];
   if (r) {
-    const d = r.reduce((u, i) => u + i.y, 0);
-    a.push({ label: n.income_label, amount: d });
+    const c = r.reduce((u, i) => u + i.y, 0);
+    a.push({ label: n.income_label, amount: c });
   }
-  if (c) {
-    const d = c.reduce((u, i) => u + i.y, 0);
-    a.push({ label: n.spending_label, amount: d });
+  if (l) {
+    const c = l.reduce((u, i) => u + i.y, 0);
+    a.push({ label: n.spending_label, amount: c });
   }
   return a;
-}, Yo = ({
+}, jo = ({
   availableHeight: t = 0,
   minHeight: n = 500,
   selectedDateRange: s,
   totals: o
 }) => {
-  const r = Z(), { onEvent: c } = $(), { trends: a } = R(), { isSmallMobile: d, isMobile: u, isSmallTablet: i, isTablet: f } = Q(), m = [r.palette.chart?.chart1, r.palette.chart?.chart2], _ = $o(o, s), h = Ko(_, a), [p, y] = g.useState(0), T = 458, N = 195, x = 56, L = u || d ? N : i || f ? T : p;
-  return g.useEffect(() => {
-    const E = Math.max(t - x, n);
-    y(E);
+  const r = K(), { onEvent: l } = V(), { trends: a } = k(), { isSmallMobile: c, isMobile: u, isSmallTablet: i, isTablet: f } = Y(), m = [r.palette.chart?.chart1, r.palette.chart?.chart2], _ = Fo(o, s), g = $o(_, a), [h, y] = p.useState(0), T = 458, x = 195, H = 56, L = u || c ? x : i || f ? T : h;
+  return p.useEffect(() => {
+    const I = Math.max(t - H, n);
+    y(I);
   }, [t]), /* @__PURE__ */ e(
     Ve,
     {
@@ -1356,9 +1357,9 @@ const Lo = g.memo(Io), Qe = ({
       curveType: "bump",
       datasets: _,
       height: L,
-      labels: h,
+      labels: g,
       onItemClick: () => {
-        c(w.TRENDS_CLICK_CHART, W);
+        l(D.TRENDS_CLICK_CHART, O);
       },
       showArea: !0,
       showAxisHighlight: !0,
@@ -1371,7 +1372,7 @@ const Lo = g.memo(Io), Qe = ({
       valueFormatterString: "0.0a"
     }
   );
-}, jo = A(Yo), Uo = [
+}, Ko = R(jo), Yo = [
   "BillAmountNotStandard",
   "CategorySpendingV2",
   "CostOfLivingToIncome",
@@ -1405,101 +1406,102 @@ const Lo = g.memo(Io), Qe = ({
   "WeeklyNewMerchantsV2",
   "WeeklyNoSpendDays",
   "WeeklySmallPurchasesSummary"
-], Xo = (t, n, s) => ({
+], Uo = (t, n, s) => ({
   description: n ? t.empty_state_sub_text : t.empty_state_sub_text_no_aggregation,
   header: n ? t.zero_state_content_header : t.zero_state_content_header_no_aggregation,
   onClickHandler: n ? s : void 0,
   primaryButton: n ? t.empty_state_primary : void 0
-}), Zo = ({
+}), Xo = ({
   onBackClick: t,
   onMenuClick: n,
   onInsightCardClick: s,
   sx: o
 }) => {
-  const { onEvent: r } = $(), { config: c } = rt(), { isDesktop: a, isLargeDesktop: d, isMobile: u } = Q(), { isAccountDataLoaded: i, loadAccountData: f, visibleAccounts: m } = De(), {
+  const { onEvent: r } = V(), { config: l } = rt(), { isDesktop: a, isLargeDesktop: c, isMobile: u } = Y(), { isAccountDataLoaded: i, loadAccountData: f, visibleAccounts: m } = De(), {
     categoriesLoaded: _,
-    loadCategories: h,
-    loadDateRangeCategoryTotals: p,
-    loadMonthlyCategoryTotals: y,
-    monthlyCategoryTotals: T,
-    monthlyTotalsLoaded: N
-  } = q(), { isTransactionDataLoaded: x, loadTransactionData: L, setFilter: M } = we(), { selectedCategoryData: E, selectedDateRange: v, setSelectedCategoryData: K, setSelectedDateRange: ae } = ye(), { isInitialized: Y, selectedAccounts: J, selectedAccountGuids: P } = fe(), { trends: V, connect: O } = R(), { beatStore: ee } = Be(), ie = po() && c.show_insights_widget_in_master, te = a || d, [j, ne] = g.useState(!1), [U, de] = g.useState(!1), [B, ue] = g.useState("Chart"), [se, le] = g.useState(""), [ce, me] = g.useState(window.innerHeight), D = te ? 56 : 0, l = ce - 208, b = ce - (ie ? 550 + D : 266), [I, z] = g.useState(!1), Ee = c.show_connections_widget_in_master;
+    loadCategories: g,
+    monthlyCategoryTotals: h,
+    monthlyTotalsLoaded: y,
+    reloadCategoryTotals: T
+  } = U(), { isTransactionDataLoaded: x, loadTransactionData: H, setFilter: L } = we(), { selectedCategoryData: M, selectedDateRange: I, setSelectedCategoryData: E, setSelectedDateRange: X } = Ce(), { isInitialized: Z, selectedAccounts: te, selectedAccountGuids: oe } = ye(), { trends: A, connect: de } = k(), { beatStore: G } = Be(), ie = go() && l.show_insights_widget_in_master, z = a || c, [ue, Q] = p.useState(!1), [F, ne] = p.useState(!1), [q, J] = p.useState("Chart"), [se, ce] = p.useState(""), [le, me] = p.useState(window.innerHeight), he = z ? 56 : 0, v = le - 208, d = le - (ie ? 550 + he : 266), [b, w] = p.useState(!1), $ = l.show_connections_widget_in_master;
   Ie({
     widgetName: "TrendsWidget",
-    isLoaded: j
+    isLoaded: ue
   });
-  const _e = g.useMemo(() => U ? ee.getFilteredBeats({ templates: Uo }) : [], [U]);
-  g.useEffect(() => {
-    const k = () => me(window.innerHeight);
-    return window.addEventListener("resize", k), i || f().finally(), _ || h().finally(), x || L().finally(), () => window.removeEventListener("resize", k);
-  }, []), g.useEffect(() => {
-    Y && i && (ee.loadBeats().finally(() => de(!0)), p(J, v.start, v.end).then(() => {
-      y(
-        J,
-        v.start,
-        v.end
-      ).finally();
-    }).finally(() => {
-      ne(!0), r(w.TRENDS_LOAD_WIDGET, {
-        ...W,
-        time_period: `${Se(v.end, v.start)}M`
-      });
-    }));
-  }, [Y, i, J, v]), g.useEffect(() => {
-    if (T.length !== 0) {
-      const k = {
-        accounts: P,
-        dateRange: { start: v.start, end: v.end }
+  const _e = p.useMemo(() => F ? G.getFilteredBeats({ templates: Yo }) : [], [F]);
+  p.useEffect(() => {
+    const N = () => me(window.innerHeight);
+    return window.addEventListener("resize", N), i || f().finally(), _ || g().finally(), x || H().finally(), () => window.removeEventListener("resize", N);
+  }, []), p.useEffect(() => {
+    Z && i && (G.loadBeats().finally(() => ne(!0)), T(te, I.start, I.end).finally(
+      () => {
+        Q(!0), r(D.TRENDS_LOAD_WIDGET, {
+          ...O,
+          time_period: `${Se(I.end, I.start)}M`
+        });
+      }
+    ));
+  }, [
+    Z,
+    i,
+    oe.join(","),
+    I.start.getTime(),
+    I.end.getTime()
+  ]), p.useEffect(() => {
+    if (h.length !== 0) {
+      const N = {
+        accounts: oe,
+        dateRange: { start: I.start, end: I.end }
       };
-      M({
-        ...k,
-        custom: (oe) => !!T.find(
-          (ge) => ge.top_level_category_guid === oe.top_level_category_guid || ge.category_guid === oe.category_guid
+      L({
+        ...N,
+        custom: (ee) => !!h.find(
+          (pe) => pe.top_level_category_guid === ee.top_level_category_guid || pe.category_guid === ee.category_guid
         )
       });
     }
-  }, [T]);
-  const he = (k) => {
-    K(k);
+  }, [h]);
+  const Ee = (N) => {
+    E(N);
+  }, ge = () => {
+    E(null), r(D.TRENDS_CLICK_BACK, O);
   }, Me = () => {
-    K(null), r(w.TRENDS_CLICK_BACK, W);
-  }, Ae = () => {
-    z(!0), r(w.TRENDS_CLICK_CONNECT_ACCOUNTS);
-  }, Ct = (k, oe) => {
-    ue(oe ?? B), r(w.TRENDS_CLICK_TOGGLE_VIEW, {
-      ...W,
-      toggleView: oe
+    w(!0), r(D.TRENDS_CLICK_CONNECT_ACCOUNTS);
+  }, Ae = (N, ee) => {
+    J(ee ?? q), r(D.TRENDS_CLICK_TOGGLE_VIEW, {
+      ...O,
+      toggleView: ee
     });
-  }, _t = (k) => {
-    const oe = et(k?.[0], 1), ge = k?.[1], xt = Se(ge, oe);
-    ae({ start: oe, end: ge }), r(w.TRENDS_CLICK_TIME_WINDOW, {
-      ...W,
-      time_period: xt + "M"
+  }, Ct = (N) => {
+    const ee = et(N?.[0], 1), pe = N?.[1], St = Se(pe, ee);
+    X({ start: ee, end: pe }), r(D.TRENDS_CLICK_TIME_WINDOW, {
+      ...O,
+      time_period: St + "M"
     });
-  }, bt = (k) => {
-    r(w.TRENDS_CLICK_FILTER, {
-      ...W,
-      filterValue: k
+  }, _t = (N) => {
+    r(D.TRENDS_CLICK_FILTER, {
+      ...O,
+      filterValue: N
     });
-  }, Tt = (k) => {
-    le(k);
-  }, St = () => {
-    le(""), r(w.TRENDS_CLICK_ALL_CATEGORIES, W);
+  }, bt = (N) => {
+    ce(N);
+  }, Tt = () => {
+    ce(""), r(D.TRENDS_CLICK_ALL_CATEGORIES, O);
   };
-  if (!Y || !i || !j || !N)
+  if (!Z || !i || !ue || !y)
     return /* @__PURE__ */ e(Le, {});
-  const ze = m.length === 0 || T.length === 0, be = Xo(V, Ee, Ae);
+  const ze = m.length === 0 || h.length === 0, be = Uo(A, $, Me);
   return /* @__PURE__ */ C(
     ut,
     {
-      calendarActions: { onRangeChanged: _t },
-      dateRange: v,
+      calendarActions: { onRangeChanged: Ct },
+      dateRange: I,
       dateRangeVariant: u ? "timeframetabs" : "timeframebuttons",
-      onAccountsFilterClick: bt,
+      onAccountsFilterClick: _t,
       onBackClick: t,
       onMenuClick: n,
       sx: o,
-      title: V.title,
+      title: A.title,
       children: [
         /* @__PURE__ */ C(
           S,
@@ -1519,96 +1521,96 @@ const Lo = g.memo(Io), Qe = ({
                       ft,
                       {
                         selectedCategoryGuid: se,
-                        selectedDateRange: v
+                        selectedDateRange: I
                       }
                     ),
-                    /* @__PURE__ */ e(pt, { onTabChange: Ct, selectedTab: B })
+                    /* @__PURE__ */ e(pt, { onTabChange: Ae, selectedTab: q })
                   ]
                 }
               ),
-              /* @__PURE__ */ e(S, { alignItems: "center", flexDirection: "row", sx: { pb: 8 }, width: "100%", children: /* @__PURE__ */ e(H, { flexGrow: 1, children: se && /* @__PURE__ */ C(Te, { onClick: St, sx: { p: 0, pr: 5 }, children: [
-                /* @__PURE__ */ e(ro, {}),
-                V.all_categories
+              /* @__PURE__ */ e(S, { alignItems: "center", flexDirection: "row", sx: { pb: 8 }, width: "100%", children: /* @__PURE__ */ e(W, { flexGrow: 1, children: se && /* @__PURE__ */ C(Te, { onClick: Tt, sx: { p: 0, pr: 5 }, children: [
+                /* @__PURE__ */ e(so, {}),
+                A.all_categories
               ] }) }) }),
               ze && /* @__PURE__ */ e(
-                fo,
+                po,
                 {
                   header: be.header,
                   icon: "multiline_chart",
                   onClick: be.onClickHandler,
                   primaryButton: be.primaryButton,
                   subText: be.description,
-                  sx: { height: l, maxWidth: 432 }
+                  sx: { height: v, maxWidth: 432 }
                 }
               ),
-              !ze && /* @__PURE__ */ C(S, { flexDirection: te ? "row" : "column", gap: te ? 48 : 16, children: [
-                B === "Chart" && /* @__PURE__ */ C(vt, { children: [
-                  /* @__PURE__ */ e(H, { sx: { width: te ? "68%" : "100%" }, children: /* @__PURE__ */ e(
-                    jo,
+              !ze && /* @__PURE__ */ C(S, { flexDirection: z ? "row" : "column", gap: z ? 48 : 16, children: [
+                q === "Chart" && /* @__PURE__ */ C(xt, { children: [
+                  /* @__PURE__ */ e(W, { sx: { width: z ? "68%" : "100%" }, children: /* @__PURE__ */ e(
+                    Ko,
                     {
-                      availableHeight: l,
+                      availableHeight: v,
                       minHeight: 450,
-                      selectedDateRange: v,
-                      totals: T
+                      selectedDateRange: I,
+                      totals: h
                     }
                   ) }),
-                  /* @__PURE__ */ C(S, { gap: 16, sx: { width: te ? "32%" : "100%" }, children: [
-                    ie && U && _e.length > 0 && /* @__PURE__ */ e(
-                      Vo,
+                  /* @__PURE__ */ C(S, { gap: 16, sx: { width: z ? "32%" : "100%" }, children: [
+                    ie && F && _e.length > 0 && /* @__PURE__ */ e(
+                      Po,
                       {
                         beats: _e,
                         onInsightCardClick: s
                       }
                     ),
                     /* @__PURE__ */ e(
-                      Bo,
+                      Oo,
                       {
-                        availableHeight: b,
-                        onCategoryClick: he
+                        availableHeight: d,
+                        onCategoryClick: Ee
                       }
                     )
                   ] })
                 ] }),
-                B === "Table" && /* @__PURE__ */ e(H, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
+                q === "Table" && /* @__PURE__ */ e(W, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
                   yt,
                   {
                     height: "unset",
-                    onClickRow: Tt,
+                    onClickRow: bt,
                     selectedCategory: se,
-                    selectedDateRange: v
+                    selectedDateRange: I
                   }
                 ) })
               ] }),
               /* @__PURE__ */ e(
                 Pe,
                 {
-                  ariaLabelClose: V.close_category_details,
-                  isOpen: !!E,
-                  onClose: Me,
+                  ariaLabelClose: A.close_category_details,
+                  isOpen: !!M,
+                  onClose: ge,
                   shouldShowHeaderShadow: !0,
-                  title: E?.is_income ? V.category_income : V.category_spending,
-                  children: E && /* @__PURE__ */ e(Fo, {})
+                  title: M?.is_income ? A.category_income : A.category_spending,
+                  children: M && /* @__PURE__ */ e(zo, {})
                 }
               )
             ]
           }
         ),
         /* @__PURE__ */ e(
-          yo,
+          fo,
           {
-            onClose: () => z(!1),
-            showConnectWidget: I,
-            title: O.mini_title
+            onClose: () => w(!1),
+            showConnectWidget: b,
+            title: de.mini_title
           }
         )
       ]
     }
   );
-}, ls = A(Zo);
+}, is = R(Xo);
 export {
-  rs as TrendsFullWidget,
-  is as TrendsMicroWidget,
-  as as TrendsMiniWidget,
-  ls as TrendsWidget
+  ss as TrendsFullWidget,
+  as as TrendsMicroWidget,
+  rs as TrendsMiniWidget,
+  is as TrendsWidget
 };
 //# sourceMappingURL=index.es.js.map