@mx-cartographer/experiences 7.4.1 → 7.4.2

package/dist/trends/index.es.js

@@ -1,37 +1,37 @@
-import { jsxs as f, jsx as e, Fragment as rt } from "react/jsx-runtime";
-import d, { useRef as at, useState as it, useEffect as ct } from "react";
-import { observer as H } from "mobx-react-lite";
-import { CategoryIcon as Se, Text as K, Icon as fe, P as he, H3 as Pe, ChevronRightIcon as lt } from "@mxenabled/mxui";
-import W from "@mui/material/Box";
+import { jsxs as f, jsx as e, Fragment as st } from "react/jsx-runtime";
+import l, { useRef as rt, useState as at, useEffect as it } from "react";
+import { observer as k } from "mobx-react-lite";
+import { CategoryIcon as Se, Text as K, Icon as fe, P as he, H3 as Pe, ChevronRightIcon as ct } from "@mxenabled/mxui";
+import N from "@mui/material/Box";
 import b from "@mui/material/Stack";
 import _e from "@mui/material/Button";
 import { addSeconds as $e } from "date-fns/addSeconds";
 import { differenceInCalendarMonths as Ae } from "date-fns/differenceInCalendarMonths";
 import { useTheme as be } from "@mui/material/styles";
-import { LineChart as dt } from "@mui/x-charts";
+import { LineChart as lt } from "@mui/x-charts";
 import { u as ee } from "../useScreenSize-B6JyS_Lj.mjs";
-import { u as ut } from "../useDimensions-27p2evRx.mjs";
-import ht from "@mui/material/Card";
-import gt from "@mui/material/CardContent";
+import { u as dt } from "../useDimensions-27p2evRx.mjs";
+import ut from "@mui/material/Card";
+import ht from "@mui/material/CardContent";
 import Re from "@mui/material/Divider";
 import We from "@mui/material/Grid";
-import { u as O, m as U, g as P, b as me, h as xe, d as ve, w as pe, f as He, q as mt, n as pt, a as Ct } from "../hooks-C41HAxM5.mjs";
+import { u as W, m as U, g as P, b as me, h as xe, d as ve, w as pe, f as He, q as gt, n as mt, a as pt } from "../hooks-C41HAxM5.mjs";
 import { b as Fe } from "../Localization-2MODESHW.mjs";
 import { C as Te } from "../CurrencyText-kyC1aseI.mjs";
-import { useTheme as ze, Card as yt, CardContent as ft, Box as _t, Stack as Tt } from "@mui/material";
+import { useTheme as Ct, Card as yt, CardContent as ft, Box as _t, Stack as Tt } from "@mui/material";
 import { f as J, a as z } from "../Dialog-BPTr3qHE.mjs";
 import { C as Me, c as St } from "../Category-CevNQ03n.mjs";
 import { f as oe, a as bt } from "../NumberFormatting-Buh7u8Oi.mjs";
-import { a as xt, g as vt, L as Ke } from "../TrendsStore-BW9FGQeE.mjs";
+import { a as xt, g as vt, L as ze } from "../TrendsStore-BW9FGQeE.mjs";
 import { T as Gn } from "../TrendsStore-BW9FGQeE.mjs";
-import { i as wt, c as Dt, d as It, e as Et, f as Lt, h as Mt, b as je, g as Ye, j as Oe } from "../SpendingData-BuJ03S9d.mjs";
+import { i as wt, c as Dt, d as It, e as Et, f as Lt, h as Mt, b as Ke, g as je, j as Oe } from "../SpendingData-BuJ03S9d.mjs";
 import At from "@mui/material/ToggleButton";
 import Rt from "@mui/material/ToggleButtonGroup";
 import { DataGridPro as kt } from "@mui/x-data-grid-pro";
 import { H as Ge } from "../HeaderCell-DjuifqHJ.mjs";
-import { T as G, b as Ht } from "../ViewMoreMicroCard-dHzKolxh.mjs";
-import { A as w, W as Ue } from "../WidgetContainer-6dsjtOVg.mjs";
-import { a as Xe, T as Ze } from "../TransactionDetails-CtbBBSoU.mjs";
+import { T as G, b as Ht } from "../ViewMoreMicroCard-C0832BMe.mjs";
+import { A as v, W as Ye } from "../WidgetContainer-6dsjtOVg.mjs";
+import { a as Ue, T as Xe } from "../TransactionDetails-CtbBBSoU.mjs";
 import { D as ke } from "../Drawer-BEtCk82g.mjs";
 import { L as ge } from "../Loader-DUaFpDGv.mjs";
 import { L as Ne } from "../LineChart-DttMO7uS.mjs";
@@ -45,18 +45,18 @@ import Kt from "@mui/material/ListItem";
 import jt from "@mui/material/ListItemButton";
 import Yt from "@mui/material/ListItemIcon";
 import Ut from "@mui/material/ListItemText";
-import qe from "@mui/material/styles/useTheme";
+import Ze from "@mui/material/styles/useTheme";
 import Xt from "@mui/material/Paper";
 import { b as Zt } from "../CategoryUtil-DUM8NuGO.mjs";
 import { E as qt } from "../ExportCsvAction-DzTrtPzk.mjs";
 import { u as Qt } from "../useInsightsEnabled-CNjP5cfR.mjs";
 import { E as Jt } from "../EmptyState-DoxNUae-.mjs";
 import { l as eo } from "../ConnectDrawer-CuUj16NH.mjs";
-const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
-  const { categories: t } = O(), { getCategoryName: n } = U(), r = n(o);
+const qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
+  const { categories: t } = W(), { getCategoryName: n } = U(), r = n(o);
   return /* @__PURE__ */ f(b, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
     /* @__PURE__ */ e(
-      W,
+      N,
       {
         "aria-label": Fe(t.category_icon_label_aria, r),
         mb: 4,
@@ -72,21 +72,21 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
   cursorPosition: n,
   chartContainerRef: r
 }) => {
-  const u = be(), h = at(null), [g, c] = it({ x: n.x, y: n.y });
-  if (ct(() => {
+  const d = be(), u = rt(null), [g, c] = at({ x: n.x, y: n.y });
+  if (it(() => {
     (() => {
-      const l = h.current, _ = r.current;
-      if (!l || !_) return;
-      const m = l.getBoundingClientRect(), i = _.getBoundingClientRect();
+      const p = u.current, _ = r.current;
+      if (!p || !_) return;
+      const m = p.getBoundingClientRect(), i = _.getBoundingClientRect();
       let T = n.x, y = n.y;
       T + m.width * 2 > i.right ? T = n.x - m.width : T - m.width < i.left && (T = n.x), y + m.height * 2 > i.bottom && (y = n.y - m.height), c({ x: T, y });
     })();
   }, [n, r]), !t) return null;
-  const p = t.reduce((C, l) => C + l.y, 0);
+  const h = t.reduce((C, p) => C + p.y, 0);
   return /* @__PURE__ */ e(
-    ht,
+    ut,
     {
-      ref: h,
+      ref: u,
       sx: {
         position: "absolute",
         top: g.y,
@@ -94,17 +94,17 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
         width: 250,
         pointerEvents: "none"
       },
-      children: /* @__PURE__ */ f(gt, { children: [
-        /* @__PURE__ */ f(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-          /* @__PURE__ */ e(Qe, { categoryGuid: o, topLevelCategoryGuid: s }),
+      children: /* @__PURE__ */ f(ht, { children: [
+        /* @__PURE__ */ f(N, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+          /* @__PURE__ */ e(qe, { categoryGuid: o, topLevelCategoryGuid: s }),
           /* @__PURE__ */ e(K, { variant: "Small", children: `${t.length}-month total` }),
-          /* @__PURE__ */ e(Te, { amount: p, bold: !0, formatString: "0,0", variant: "body2" })
+          /* @__PURE__ */ e(Te, { amount: h, bold: !0, formatString: "0,0", variant: "body2" })
         ] }),
         /* @__PURE__ */ e(Re, { sx: { my: 16, width: "100%" } }),
-        /* @__PURE__ */ e(We, { container: !0, children: t.map((C, l) => /* @__PURE__ */ f(d.Fragment, { children: [
-          l > 0 && l % 3 === 0 && /* @__PURE__ */ e(Re, { sx: { my: 16, width: "100%" } }),
-          /* @__PURE__ */ e(We, { item: !0, xs: 4, children: /* @__PURE__ */ f(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-            /* @__PURE__ */ e(K, { color: u.palette.text.secondary, variant: "XSmall", children: C.x }),
+        /* @__PURE__ */ e(We, { container: !0, children: t.map((C, p) => /* @__PURE__ */ f(l.Fragment, { children: [
+          p > 0 && p % 3 === 0 && /* @__PURE__ */ e(Re, { sx: { my: 16, width: "100%" } }),
+          /* @__PURE__ */ e(We, { item: !0, xs: 4, children: /* @__PURE__ */ f(N, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+            /* @__PURE__ */ e(K, { color: d.palette.text.secondary, variant: "XSmall", children: C.x }),
             /* @__PURE__ */ e(
               Te,
               {
@@ -115,21 +115,21 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
               }
             )
           ] }) })
-        ] }, l)) })
+        ] }, p)) })
       ] })
     }
   );
-}, oo = H(to), no = ({
+}, oo = k(to), no = ({
   categoryGuids: { guid: o, topLevelGuid: s },
   itemData: { dataIndex: t },
   series: n,
   xData: r
 }) => {
-  const u = ze(), h = n.data[t], g = r[t];
-  return h === void 0 || !g ? null : /* @__PURE__ */ e(yt, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(ft, { children: /* @__PURE__ */ f(_t, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-    /* @__PURE__ */ e(Qe, { categoryGuid: o, topLevelCategoryGuid: s }),
-    /* @__PURE__ */ e(K, { color: u.palette.text.secondary, variant: "Small", children: J(g, z.MONTH_SHORT_YEAR) }),
-    /* @__PURE__ */ e(Te, { amount: String(h), bold: !0, formatString: "0,0", variant: "Body" })
+  const d = Ct(), u = n.data[t], g = r[t];
+  return u === void 0 || !g ? null : /* @__PURE__ */ e(yt, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(ft, { children: /* @__PURE__ */ f(_t, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+    /* @__PURE__ */ e(qe, { categoryGuid: o, topLevelCategoryGuid: s }),
+    /* @__PURE__ */ e(K, { color: d.palette.text.secondary, variant: "Small", children: J(g, z.MONTH_SHORT_YEAR) }),
+    /* @__PURE__ */ e(Te, { amount: String(u), bold: !0, formatString: "0,0", variant: "Body" })
   ] }) }) });
 }, so = ({
   sx: o,
@@ -137,24 +137,24 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
   hoveredLegend: t,
   legendRef: n,
   onHoverLegend: r,
-  onClickLegend: u
+  onClickLegend: d
 }) => {
-  const { isMobile: h } = ee(), { getCategoryName: g } = U();
+  const { isMobile: u } = ee(), { getCategoryName: g } = U();
   return /* @__PURE__ */ e(
     b,
     {
       direction: "row",
       flexWrap: "wrap",
-      gap: h ? 2 : 6,
+      gap: u ? 2 : 6,
       justifyContent: "start",
       ref: n,
       sx: o,
-      children: s.map(({ guid: c, top_level_guid: p }) => {
-        const C = t === c, l = Me[c], _ = Me[p], m = l ?? _ ?? Me.default, i = m + "33";
+      children: s.map(({ guid: c, top_level_guid: h }) => {
+        const C = t === c, p = Me[c], _ = Me[h], m = p ?? _ ?? Me.default, i = m + "33";
         return /* @__PURE__ */ f(
           _e,
           {
-            onClick: () => u(c),
+            onClick: () => d(c),
             onMouseEnter: () => r(c),
             onMouseLeave: () => r(null),
             sx: {
@@ -170,12 +170,12 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
             },
             children: [
               /* @__PURE__ */ e(
-                W,
+                N,
                 {
                   sx: {
                     width: 16,
                     height: 16,
-                    marginRight: h ? 5 : 10,
+                    marginRight: u ? 5 : 10,
                     borderRadius: "2px",
                     backgroundColor: t ? C ? m : i : m
                   }
@@ -195,24 +195,24 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
   onHoverLegend: t,
   onClickLegend: n,
   stackedDatasets: r,
-  unstackedDatasets: u = [],
-  availableHeight: h = 0,
+  unstackedDatasets: d = [],
+  availableHeight: u = 0,
   minimumHeight: g = 350
 }) => {
-  const c = be(), { isMobile: p } = ee(), [C, { height: l }] = ut(), _ = d.useRef(null), [m, i] = d.useState(0);
-  d.useEffect(() => {
-    const a = Math.max(h - l, g);
+  const c = be(), { isMobile: h } = ee(), [C, { height: p }] = dt(), _ = l.useRef(null), [m, i] = l.useState(0);
+  l.useEffect(() => {
+    const a = Math.max(u - p, g);
     i(a);
-  }, [h, l]);
-  const [T, y] = d.useState(null), [L, x] = d.useState({
+  }, [u, p]);
+  const [T, y] = l.useState(null), [L, x] = l.useState({
     hoveredSeriesId: null,
     hoveredAreaData: null,
     isAreaHovered: !1,
     cursorPos: { x: 0, y: 0 }
-  }), { hoveredSeriesId: v, hoveredAreaData: A, isAreaHovered: R, cursorPos: M } = L, k = R && v && A, E = !k, X = [...r, ...u], ne = X[0]?.dataset.length ?? 0, B = X.flatMap((a) => a.dataset.map((S) => S.x)), Ce = X.flatMap((a) => a.dataset.map((S) => S.y)), ae = r[0]?.dataset?.map(
+  }), { hoveredSeriesId: D, hoveredAreaData: O, isAreaHovered: A, cursorPos: M } = L, R = A && D && O, E = !R, X = [...r, ...d], ne = X[0]?.dataset.length ?? 0, B = X.flatMap((a) => a.dataset.map((S) => S.x)), Ce = X.flatMap((a) => a.dataset.map((S) => S.y)), ae = r[0]?.dataset?.map(
     (a, S) => r.reduce((I, Y) => I + Y.dataset[S]?.y || 0, 0)
   ) ?? [0], Z = Math.max(...ae), ie = Math.max(
-    ...u.flatMap((a) => a.dataset.map((S) => S.y))
+    ...d.flatMap((a) => a.dataset.map((S) => S.y))
   ), q = Math.floor(Math.min(...Ce) / 100) * 100, ce = Math.ceil(Math.max(Z, ie) / 100) * 100, $ = r.map((a, S) => ({
     id: `stacked-${S}`,
     guid: a.category_guid,
@@ -225,7 +225,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
     type: "line",
     highlightScope: { highlight: "item" },
     valueFormatter: (I) => oe(I, "0,0")
-  })), te = u.map((a, S) => ({
+  })), te = d.map((a, S) => ({
     id: `unstacked-${S}`,
     guid: a.category_guid,
     top_level_guid: a.top_level_category_guid,
@@ -245,17 +245,17 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       top_level_guid: S
     }))
   ], j = (a) => {
-    const I = a.startsWith("stacked-") ? r[parseInt(a.split("-")[1])] : u[parseInt(a.split("-")[1])];
+    const I = a.startsWith("stacked-") ? r[parseInt(a.split("-")[1])] : d[parseInt(a.split("-")[1])];
     return {
       guid: I?.category_guid,
       topLevelGuid: I?.top_level_category_guid
     };
-  }, D = (a) => {
+  }, w = (a) => {
     y(a), t?.(a ?? "");
   }, V = (a) => {
     n?.(a ?? "");
   }, F = () => {
-    const a = j(String(v)).guid;
+    const a = j(String(D)).guid;
     a && n?.(a);
   }, le = (a) => {
     const S = String(a?.seriesId), I = j(S).guid, Y = se.find((de) => de.id === S), De = Y && a?.dataIndex !== void 0, Ie = Y && a?.dataIndex === void 0;
@@ -317,7 +317,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
     }, {})
   };
   return /* @__PURE__ */ e(
-    W,
+    N,
     {
       onMouseMove: we,
       ref: _,
@@ -340,7 +340,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
           sx: { width: "100%", position: "relative" },
           children: [
             /* @__PURE__ */ e(
-              dt,
+              lt,
               {
                 height: m,
                 margin: { bottom: 50 },
@@ -354,10 +354,10 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
                   }
                 },
                 slots: {
-                  itemContent: (a) => E && v ? /* @__PURE__ */ e(
+                  itemContent: (a) => E && D ? /* @__PURE__ */ e(
                     no,
                     {
-                      categoryGuids: j(v),
+                      categoryGuids: j(D),
                       xData: B,
                       ...a
                     }
@@ -391,17 +391,17 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
                 hoveredLegend: T,
                 legendRef: C,
                 onClickLegend: V,
-                onHoverLegend: D,
-                sx: { px: p ? 0 : 24 }
+                onHoverLegend: w,
+                sx: { px: h ? 0 : 24 }
               }
             ),
-            k && /* @__PURE__ */ e(
+            R && /* @__PURE__ */ e(
               oo,
               {
-                categoryGuids: j(v),
+                categoryGuids: j(D),
                 chartContainerRef: _,
                 cursorPosition: M,
-                hoveredAreaData: A.map((a) => ({
+                hoveredAreaData: O.map((a) => ({
                   ...a,
                   x: J(a.x, z.MONTH_SHORT_YEAR)
                 }))
@@ -412,7 +412,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       )
     }
   );
-}, Je = ({ selectedTab: o, onTabChange: s }) => /* @__PURE__ */ e(
+}, Qe = ({ selectedTab: o, onTabChange: s }) => /* @__PURE__ */ e(
   Rt,
   {
     exclusive: !0,
@@ -421,8 +421,8 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
     value: o,
     children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(At, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(fe, { name: "table_chart_view" }) : /* @__PURE__ */ e(fe, { name: "format_list_bulleted" }) }, t))
   }
-), et = ({ selectedDateRange: o, selectedCategoryGuid: s }) => {
-  const { trends: t } = O(), { isMobile: n, isDesktop: r } = ee(), { getCategoryName: u } = U(), h = d.useMemo(() => {
+), Je = ({ selectedDateRange: o, selectedCategoryGuid: s }) => {
+  const { trends: t } = W(), { isMobile: n, isDesktop: r } = ee(), { getCategoryName: d } = U(), u = l.useMemo(() => {
     const g = J(
       o.start,
       n ? z.MONTH_SHORT_YEAR : z.MONTH_YEAR
@@ -432,7 +432,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
     );
     return `${g} - ${c}`;
   }, [o, n]);
-  return /* @__PURE__ */ f(W, { sx: { mr: 10, minWidth: "60%" }, children: [
+  return /* @__PURE__ */ f(N, { sx: { mr: 10, minWidth: "60%" }, children: [
     /* @__PURE__ */ e(
       K,
       {
@@ -444,19 +444,19 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
           textOverflow: "unset"
         },
         variant: r ? "H3" : "Body",
-        children: u(s) || t.sub_title
+        children: d(s) || t.sub_title
       }
     ),
-    /* @__PURE__ */ e(K, { variant: r ? "Body" : "Small", children: h })
+    /* @__PURE__ */ e(K, { variant: r ? "Body" : "Small", children: u })
   ] });
 }, ao = (o) => {
   const s = o.row[o.field];
   return /* @__PURE__ */ e(b, { alignItems: "flex-end", tabIndex: o.tabIndex, children: /* @__PURE__ */ e(Te, { amount: s, variant: "Small" }) });
 }, io = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
-  const { getCategoryName: t } = U(), { categories: n } = O(), r = n.default_categories[o]?.replace(/&amp;/g, "&") ?? t(o);
+  const { getCategoryName: t } = U(), { categories: n } = W(), r = n.default_categories[o]?.replace(/&amp;/g, "&") ?? t(o);
   return /* @__PURE__ */ f(b, { alignItems: "center", direction: "row", justifyContent: "center", children: [
     /* @__PURE__ */ e(
-      W,
+      N,
       {
         "aria-label": Fe(n.category_icon_label_aria, r),
         role: "img",
@@ -478,17 +478,17 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
     t.push(r), n.setMonth(n.getMonth() + 1);
   }
   return t;
-}, tt = ({
+}, et = ({
   monthlyCategoryTotals: o,
   selectedDateRange: s,
   selectedCategory: t,
   onClickRow: n,
   height: r = "100dvh",
-  sx: u = {}
+  sx: d = {}
 }) => {
-  const { onEvent: h } = P(), g = J(/* @__PURE__ */ new Date(), z.MONTH_SHORT), [c, p] = d.useState([
+  const { onEvent: u } = P(), g = J(/* @__PURE__ */ new Date(), z.MONTH_SHORT), [c, h] = l.useState([
     { field: g, sort: "desc" }
-  ]), C = d.useMemo(() => lo(s.start, s.end), [s]), l = [
+  ]), C = l.useMemo(() => lo(s.start, s.end), [s]), p = [
     {
       field: "category",
       flex: 1,
@@ -515,43 +515,43 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
         sortComparator: xt
       })
     )
-  ], _ = d.useMemo(() => {
+  ], _ = l.useMemo(() => {
     const m = o.filter(
       (y) => !wt(y) && !Dt(y)
     ), T = (t ? m.filter(
       (y) => y.category_guid === t || y.top_level_category_guid === t
     ) : m).reduce(
       (y, L) => {
-        const { category_guid: x, top_level_category_guid: v, month: A, total: R, year: M } = L, k = t ? x : v;
-        y[k] || (y[k] = {
-          id: k,
-          category: k,
+        const { category_guid: x, top_level_category_guid: D, month: O, total: A, year: M } = L, R = t ? x : D;
+        y[R] || (y[R] = {
+          id: R,
+          category: R,
           category_guid: x,
-          top_level_category_guid: v
+          top_level_category_guid: D
         });
-        const E = J(new Date(M, A - 1), z.MONTH_SHORT);
-        return y[k][E] || (y[k][E] = 0), y[k][E] = y[k][E] + Math.abs(R), y;
+        const E = J(new Date(M, O - 1), z.MONTH_SHORT);
+        return y[R][E] || (y[R][E] = 0), y[R][E] = y[R][E] + Math.abs(A), y;
       },
       {}
     );
     return Object.values(T);
   }, [o, t]);
-  return /* @__PURE__ */ e(W, { sx: { height: r, width: "100%", overflowX: "auto", boxShadow: "none", ...u }, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(N, { sx: { height: r, width: "100%", overflowX: "auto", boxShadow: "none", ...d }, children: /* @__PURE__ */ e(
     kt,
     {
-      columns: l,
+      columns: p,
       disableColumnFilter: !0,
       disableColumnMenu: !0,
       hideFooter: !0,
       initialState: { sorting: { sortModel: c } },
       onRowClick: (m) => {
-        n?.(m.row.category), h(w.TRENDS_CLICK_LIST_ITEM, {
+        n?.(m.row.category), u(v.TRENDS_CLICK_LIST_ITEM, {
           ...G,
           listItem: St[m.row.category]
         });
       },
       onSortModelChange: (m) => {
-        p(m), h(w.TRENDS_CLICK_TABLE_SORT, G);
+        h(m), u(v.TRENDS_CLICK_TABLE_SORT, G);
       },
       rows: _,
       slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
@@ -567,89 +567,89 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
   isOpen: t,
   onClose: n
 }) => {
-  const { onEvent: r } = P(), { selectedAccountGuids: u } = me(), { common: h } = O(), { setFilter: g, sortedTransactions: c } = xe(), [p, C] = d.useState(""), l = d.useMemo(
-    () => c.find((m) => m.guid === p),
-    [p, c]
+  const { onEvent: r } = P(), { selectedAccountGuids: d } = me(), { common: u } = W(), { setFilter: g, sortedTransactions: c } = xe(), [h, C] = l.useState(""), p = l.useMemo(
+    () => c.find((m) => m.guid === h),
+    [h, c]
   );
-  d.useEffect(() => {
+  l.useEffect(() => {
     g({
-      accounts: u,
+      accounts: d,
       dateRange: s,
       custom: (m) => o === "" || o === m.category_guid || o === m.top_level_category_guid,
       showSplits: !!o
     });
-  }, [u, o, s]), d.useEffect(() => r(w.TRENDS_VIEW_TRANSACTIONS), []);
+  }, [d, o, s]), l.useEffect(() => r(v.TRENDS_VIEW_TRANSACTIONS), []);
   const _ = () => {
     C(""), n();
   };
   return /* @__PURE__ */ f(
     ke,
     {
-      ariaLabelClose: h.close_aria,
+      ariaLabelClose: u.close_aria,
       isOpen: t,
       onClose: _,
       title: uo.title,
       children: [
-        l && /* @__PURE__ */ e(Xe, { transaction: l }),
-        !l && /* @__PURE__ */ e(Ze, { onClick: C })
+        p && /* @__PURE__ */ e(Ue, { transaction: p }),
+        !p && /* @__PURE__ */ e(Xe, { onClick: C })
       ]
     }
   );
-}, go = H(ho), mo = ({ onBackClick: o, sx: s }) => {
-  const { onEvent: t } = P(), { isDesktop: n, isTablet: r, isMobile: u } = ee(), { visibleAccounts: h } = ve(), { loadMonthlyCategoryTotals: g, monthlyCategoryTotals: c, getCategoryName: p } = U(), { sortedTransactions: C } = xe(), { selectedDateRange: l, setSelectedDateRange: _ } = pe(), { isCopyLoaded: m, isInitialized: i, selectedAccounts: T, setSelectedAccounts: y } = me(), { trends: L } = O(), [x, v] = d.useState(!1), [A, R] = d.useState(!1), [M, k] = d.useState("Chart"), [E, X] = d.useState(""), [ne, B] = d.useState(window.innerHeight), ae = ne - (u ? 315 : 345);
-  d.useEffect(() => {
-    const D = () => B(window.innerHeight);
-    return window.addEventListener("resize", D), () => window.removeEventListener("resize", D);
-  }, []), d.useEffect(() => {
-    y(h);
-  }, [h]), d.useEffect(() => {
+}, go = k(ho), mo = ({ onBackClick: o, sx: s }) => {
+  const { onEvent: t } = P(), { isDesktop: n, isTablet: r, isMobile: d } = ee(), { visibleAccounts: u } = ve(), { loadMonthlyCategoryTotals: g, monthlyCategoryTotals: c, getCategoryName: h } = U(), { sortedTransactions: C } = xe(), { selectedDateRange: p, setSelectedDateRange: _ } = pe(), { isCopyLoaded: m, isInitialized: i, selectedAccounts: T, setSelectedAccounts: y } = me(), { trends: L } = W(), [x, D] = l.useState(!1), [O, A] = l.useState(!1), [M, R] = l.useState("Chart"), [E, X] = l.useState(""), [ne, B] = l.useState(window.innerHeight), ae = ne - (d ? 315 : 345);
+  l.useEffect(() => {
+    const w = () => B(window.innerHeight);
+    return window.addEventListener("resize", w), () => window.removeEventListener("resize", w);
+  }, []), l.useEffect(() => {
+    y(u);
+  }, [u]), l.useEffect(() => {
     i && g(
       T,
-      l.start,
-      l.end
+      p.start,
+      p.end
     ).finally(() => {
-      v(!0);
+      D(!0);
     });
-  }, [i, T, l]);
-  const Z = d.useMemo(() => {
+  }, [i, T, p]);
+  const Z = l.useMemo(() => {
     if (!x) return { stackedDatasets: [], unstackedDatasets: [] };
-    const D = vt(
+    const w = vt(
       c,
-      l.start,
-      l.end
-    ), V = E.length ? D.filter(
+      p.start,
+      p.end
+    ), V = E.length ? w.filter(
       (F) => F.top_level_category_guid === E || F.category_guid === E
-    ) : It(D);
+    ) : It(w);
     return {
       stackedDatasets: V.filter(Et),
       unstackedDatasets: V.filter(Lt)
     };
-  }, [c, E, l]), ie = (D, V) => {
-    k(V ?? M), t(w.TRENDS_CLICK_TOGGLE_VIEW);
-  }, q = (D) => {
-    const V = $e(D?.[0], 1), F = D?.[1], le = Ae(F, V);
-    _({ start: V, end: F }), t(w.TRENDS_CLICK_TIME_WINDOW, {
+  }, [c, E, p]), ie = (w, V) => {
+    R(V ?? M), t(v.TRENDS_CLICK_TOGGLE_VIEW);
+  }, q = (w) => {
+    const V = $e(w?.[0], 1), F = w?.[1], le = Ae(F, V);
+    _({ start: V, end: F }), t(v.TRENDS_CLICK_TIME_WINDOW, {
       time_period: le + "M"
     });
   }, ce = () => {
-    t(w.TRENDS_CLICK_FILTER);
-  }, $ = (D) => {
-    X(D);
-  }, te = (D) => {
-    X(D), t(w.TRENDS_CLICK_LEGEND, { category: p(D) });
-  }, se = (D) => {
-    t(w.TRENDS_HOVER_LEGEND, { category: p(D) });
-  }, re = (D) => {
-    t(w.TRENDS_HOVER_AREA, { category: D });
-  }, j = (D) => {
-    t(w.TRENDS_HOVER_POINT, { category: D });
+    t(v.TRENDS_CLICK_FILTER);
+  }, $ = (w) => {
+    X(w);
+  }, te = (w) => {
+    X(w), t(v.TRENDS_CLICK_LEGEND, { category: h(w) });
+  }, se = (w) => {
+    t(v.TRENDS_HOVER_LEGEND, { category: h(w) });
+  }, re = (w) => {
+    t(v.TRENDS_HOVER_AREA, { category: w });
+  }, j = (w) => {
+    t(v.TRENDS_HOVER_POINT, { category: w });
   };
   return !m || !i || !x ? /* @__PURE__ */ e(ge, {}) : /* @__PURE__ */ f(
-    Ue,
+    Ye,
     {
-      accountOptions: h,
+      accountOptions: u,
       calendarActions: { onRangeChanged: q },
-      dateRange: l,
+      dateRange: p,
       dateRangeVariant: "timeframebuttons",
       onAccountsFilterClick: ce,
       onBackClick: o,
@@ -669,27 +669,27 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
                 {
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  sx: { pb: u ? 12 : 24, pt: u ? 24 : 48 },
+                  sx: { pb: d ? 12 : 24, pt: d ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
-                      et,
+                      Je,
                       {
                         selectedCategoryGuid: E,
-                        selectedDateRange: l
+                        selectedDateRange: p
                       }
                     ),
-                    /* @__PURE__ */ e(Je, { onTabChange: ie, selectedTab: M })
+                    /* @__PURE__ */ e(Qe, { onTabChange: ie, selectedTab: M })
                   ]
                 }
               ),
               /* @__PURE__ */ f(b, { alignItems: "center", flexDirection: "row", width: "100%", children: [
-                /* @__PURE__ */ e(W, { flexGrow: 1, children: E && /* @__PURE__ */ f(_e, { onClick: () => X(""), sx: { p: 0, pr: 5 }, children: [
+                /* @__PURE__ */ e(N, { flexGrow: 1, children: E && /* @__PURE__ */ f(_e, { onClick: () => X(""), sx: { p: 0, pr: 5 }, children: [
                   /* @__PURE__ */ e(fe, { name: "arrow_back" }),
                   L.all_categories
                 ] }) }),
-                /* @__PURE__ */ e(_e, { onClick: () => R(!0), sx: { px: 5 }, children: `${L.view_transactions} (${C.length})` })
+                /* @__PURE__ */ e(_e, { onClick: () => A(!0), sx: { px: 5 }, children: `${L.view_transactions} (${C.length})` })
               ] }),
-              /* @__PURE__ */ f(W, { children: [
+              /* @__PURE__ */ f(N, { children: [
                 M === "Chart" && /* @__PURE__ */ e(
                   ro,
                   {
@@ -703,12 +703,12 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
                   }
                 ),
                 M === "Table" && /* @__PURE__ */ e(
-                  tt,
+                  et,
                   {
                     monthlyCategoryTotals: c,
                     onClickRow: $,
                     selectedCategory: E,
-                    selectedDateRange: l
+                    selectedDateRange: p
                   }
                 )
               ] })
@@ -719,16 +719,16 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
           go,
           {
             categoryGuid: E,
-            dateRange: l,
-            isOpen: A,
-            onClose: () => R(!1)
+            dateRange: p,
+            isOpen: O,
+            onClose: () => A(!1)
           }
         )
       ]
     }
   );
-}, Rn = H(mo), po = () => {
-  const o = be(), { monthlyCategoryTotals: s } = U(), { trends: t } = O(), n = Mt(s);
+}, Rn = k(mo), po = () => {
+  const o = be(), { monthlyCategoryTotals: s } = U(), { trends: t } = W(), n = Mt(s);
   return /* @__PURE__ */ e(
     Ne,
     {
@@ -745,35 +745,35 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       valueFormatterString: "0,0"
     }
   );
-}, Co = H(po), yo = ({ onPrimaryCtaClick: o, sx: s }) => {
-  const { visibleAccounts: t } = ve(), { loadMonthlyCategoryTotals: n, monthlyTotalsLoaded: r } = U(), { isInitialized: u } = He(), { trends: h } = O(), { isCopyLoaded: g, selectedAccounts: c, setSelectedAccounts: p } = me();
-  return d.useEffect(() => {
-    p(t);
-  }, [t]), d.useEffect(() => {
-    u && n(c).finally();
-  }, [u, c]), !g || !u ? /* @__PURE__ */ e(ge, {}) : /* @__PURE__ */ e(
+}, Co = k(po), yo = ({ onPrimaryCtaClick: o, sx: s }) => {
+  const { visibleAccounts: t } = ve(), { loadMonthlyCategoryTotals: n, monthlyTotalsLoaded: r } = U(), { isInitialized: d } = He(), { trends: u } = W(), { isCopyLoaded: g, selectedAccounts: c, setSelectedAccounts: h } = me();
+  return l.useEffect(() => {
+    h(t);
+  }, [t]), l.useEffect(() => {
+    d && n(c).finally();
+  }, [d, c]), !g || !d ? /* @__PURE__ */ e(ge, {}) : /* @__PURE__ */ e(
     Nt,
     {
       onPrimaryCtaClick: o,
-      primaryCtaLabel: h.primary_cta,
-      subTitle: h.sub_title,
+      primaryCtaLabel: u.primary_cta,
+      subTitle: u.sub_title,
       sx: s,
-      title: h.mini_title,
+      title: u.mini_title,
       children: r ? /* @__PURE__ */ e(Co, {}) : /* @__PURE__ */ e(ge, {})
     }
   );
-}, kn = H(yo), fo = 70, Be = ({
+}, kn = k(yo), fo = 70, Be = ({
   title: o,
   totalAmount: s,
   transactionType: t,
   percentage: n,
   secondaryLabel: r,
-  shouldDisplayPercentage: u
+  shouldDisplayPercentage: d
 }) => {
-  const { availableWidth: h } = mt(), g = d.useRef(null), c = d.useRef(null), p = bt(Number(Math.abs(n)), {
+  const { availableWidth: u } = gt(), g = l.useRef(null), c = l.useRef(null), h = bt(Number(Math.abs(n)), {
     style: "percent",
     minimumIntegerDigits: 1
-  }), C = h === 288 && oe(s, "0,0.00").length > 10 ? oe(s, "0,0") : oe(s, "0,0.00"), l = t === "spending" ? n > 0 : n >= 0, _ = t === "spending" ? "error.main" : "success.main", m = t === "spending" ? "success.main" : "text.secondary", i = g?.current, T = c?.current, y = i && T ? i.scrollWidth > T.clientWidth - fo : !1;
+  }), C = u === 288 && oe(s, "0,0.00").length > 10 ? oe(s, "0,0") : oe(s, "0,0.00"), p = t === "spending" ? n > 0 : n >= 0, _ = t === "spending" ? "error.main" : "success.main", m = t === "spending" ? "success.main" : "text.secondary", i = g?.current, T = c?.current, y = i && T ? i.scrollWidth > T.clientWidth - fo : !1;
   return /* @__PURE__ */ f(
     b,
     {
@@ -797,17 +797,17 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
             },
             children: [
               /* @__PURE__ */ e(he, { color: "text.secondary", variant: "caption", children: o }),
-              u && /* @__PURE__ */ f(b, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
-                l ? /* @__PURE__ */ e(Ot, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e(Gt, { size: 20, sx: { color: m } }),
+              d && /* @__PURE__ */ f(b, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+                p ? /* @__PURE__ */ e(Ot, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e(Gt, { size: 20, sx: { color: m } }),
                 /* @__PURE__ */ e(
                   he,
                   {
                     sx: {
-                      color: l ? _ : m,
+                      color: p ? _ : m,
                       fontWeight: 600
                     },
                     variant: "body2",
-                    children: p
+                    children: h
                   }
                 )
               ] })
@@ -825,17 +825,17 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
             },
             children: [
               /* @__PURE__ */ e(
-                W,
+                N,
                 {
                   ref: g,
                   sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
                   children: /* @__PURE__ */ e(Pe, { children: C })
                 }
               ),
-              u && h >= 450 && !y && /* @__PURE__ */ e(
+              d && u >= 450 && !y && /* @__PURE__ */ e(
                 he,
                 {
-                  color: l ? _ : m,
+                  color: p ? _ : m,
                   variant: "caption",
                   children: r
                 }
@@ -846,8 +846,8 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       ]
     }
   );
-}, _o = H(() => {
-  const { trends: o } = O();
+}, _o = k(() => {
+  const { trends: o } = W();
   return /* @__PURE__ */ f(b, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
     /* @__PURE__ */ e(Bt, { size: 32 }),
     /* @__PURE__ */ f(b, { children: [
@@ -855,40 +855,40 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       /* @__PURE__ */ e(he, { color: "text.secondary", variant: "subtitle2", children: o.zero_state_content_description })
     ] })
   ] });
-}), Hn = H(({ onCtaClick: o }) => {
-  const { visibleAccounts: s } = ve(), { onEvent: t } = P(), { monthlyCategoryTotals: n, loadMonthlyCategoryTotals: r, monthlyTotalsLoaded: u } = U(), h = {
+}), Hn = k(({ onCtaClick: o }) => {
+  const { visibleAccounts: s } = ve(), { onEvent: t } = P(), { monthlyCategoryTotals: n, loadMonthlyCategoryTotals: r, monthlyTotalsLoaded: d } = U(), u = {
     start: Wt(/* @__PURE__ */ new Date(), 1),
     end: /* @__PURE__ */ new Date()
-  }, { trends: g } = O(), { selectedAccounts: c, setSelectedAccounts: p, isInitialized: C } = me();
-  d.useEffect(() => {
-    p(s);
-  }, [s]), d.useEffect(() => {
-    C && r(c, h.start).then(() => {
-      t(w.TRENDS_LOAD_WIDGET, {
+  }, { trends: g } = W(), { selectedAccounts: c, setSelectedAccounts: h, isInitialized: C } = me();
+  l.useEffect(() => {
+    h(s);
+  }, [s]), l.useEffect(() => {
+    C && r(c, u.start).then(() => {
+      t(v.TRENDS_LOAD_WIDGET, {
         state: s?.length ? "default" : "zeroState"
       });
     });
   }, [C, c]);
-  const { spendingData: l, incomeData: _ } = d.useMemo(
+  const { spendingData: p, incomeData: _ } = l.useMemo(
     () => ({
-      spendingData: je(n, h),
-      incomeData: Ye(n, h)
+      spendingData: Ke(n, u),
+      incomeData: je(n, u)
     }),
-    [n, h]
-  ), [m, i] = l, [T, y] = _, L = Oe(i.y, m.y), x = Oe(y.y, T.y), v = C && !s?.length, A = () => {
+    [n, u]
+  ), [m, i] = p, [T, y] = _, L = Oe(i.y, m.y), x = Oe(y.y, T.y), D = C && !s?.length, O = () => {
     t(
-      v ? w.TRENDS_CLICK_GET_STARTED : w.TRENDS_CLICK_VIEW_MORE
+      D ? v.TRENDS_CLICK_GET_STARTED : v.TRENDS_CLICK_VIEW_MORE
     ), o();
   };
-  return !u || !C ? /* @__PURE__ */ e(ge, {}) : /* @__PURE__ */ e(
+  return !d || !C ? /* @__PURE__ */ e(ge, {}) : /* @__PURE__ */ e(
     $t,
     {
       className: "mx-trends-microwidget",
       ctaLabel: g.micro_primary_cta_label,
-      onCTAClick: A,
-      subHeader: v ? void 0 : g.micro_subheader,
+      onCTAClick: O,
+      subHeader: D ? void 0 : g.micro_subheader,
       title: g.title,
-      children: v ? /* @__PURE__ */ e(_o, {}) : /* @__PURE__ */ f(
+      children: D ? /* @__PURE__ */ e(_o, {}) : /* @__PURE__ */ f(
         b,
         {
           sx: {
@@ -924,9 +924,9 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       )
     }
   );
-}), To = H(
+}), To = k(
   ({ isExpanded: o, onClick: s }) => {
-    const t = qe();
+    const t = Ze();
     return /* @__PURE__ */ e(Kt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(jt, { onClick: s, sx: { justifyContent: "center" }, children: /* @__PURE__ */ f(
       b,
       {
@@ -946,49 +946,49 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       }
     ) }) });
   }
-), Ve = H(
+), Ve = k(
   ({
     totalAmount: o,
     guid: s,
     name: t,
     transactions: n,
     onClick: r,
-    isLastItem: u = !1,
-    showDivider: h = !0
+    isLastItem: d = !1,
+    showDivider: u = !0
   }) => {
-    const { trends: g } = O(), { onEvent: c } = P(), p = `${n.length} ${n.length === 1 ? g.transaction : g.transactions}`, C = () => {
-      r?.(), c(w.TRENDS_CLICK_LIST_ITEM, {
+    const { trends: g } = W(), { onEvent: c } = P(), h = `${n.length} ${n.length === 1 ? g.transaction : g.transactions}`, C = () => {
+      r?.(), c(v.TRENDS_CLICK_LIST_ITEM, {
         ...G,
         listItem: t
       });
     };
-    return /* @__PURE__ */ f(d.Fragment, { children: [
+    return /* @__PURE__ */ f(l.Fragment, { children: [
       /* @__PURE__ */ e(
-        Ke,
+        ze,
         {
           leftIcon: s ? /* @__PURE__ */ e(Se, { categoryGuid: s }) : void 0,
           onClick: C,
           rightContent: oe(Math.abs(o), "0,0.00"),
-          rightIcon: r ? /* @__PURE__ */ e(lt, {}) : void 0,
-          subtitle: p,
+          rightIcon: r ? /* @__PURE__ */ e(ct, {}) : void 0,
+          subtitle: h,
           title: t
         }
       ),
-      h && /* @__PURE__ */ e(Re, { sx: { ml: u ? 24 : 68 } })
+      u && /* @__PURE__ */ e(Re, { sx: { ml: d ? 24 : 68 } })
     ] }, s);
   }
-), So = H(
+), So = k(
   ({ availableHeight: o = 0, onCategoryClick: s }) => {
-    const { collapsedCategories: t, visibleCategories: n, setVisibleListLength: r } = pe(), { isLargeDesktop: u, isDesktop: h } = ee(), { trends: g } = O(), { onEvent: c } = P(), [p, C] = d.useState(!1), l = h || u;
-    d.useEffect(() => {
+    const { collapsedCategories: t, visibleCategories: n, setVisibleListLength: r } = pe(), { isLargeDesktop: d, isDesktop: u } = ee(), { trends: g } = W(), { onEvent: c } = P(), [h, C] = l.useState(!1), p = u || d;
+    l.useEffect(() => {
       const i = Math.floor(o / 64) - 1, T = n.length + t.length;
-      i !== n.length && (r(l ? Math.max(i, 5) : 5), C(i >= T));
+      i !== n.length && (r(p ? Math.max(i, 5) : 5), C(i >= T));
     }, [o]);
     const _ = () => {
-      C(!p), c(w.TRENDS_CLICK_VIEW_MORE, {
+      C(!h), c(v.TRENDS_CLICK_VIEW_MORE, {
         ...G
       });
-    }, m = n.length + (p ? t.length : 0);
+    }, m = n.length + (h ? t.length : 0);
     return /* @__PURE__ */ e(b, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ f(zt, { children: [
       /* @__PURE__ */ e(b, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Pe, { children: g.categories }) }),
       n.map((i, T) => /* @__PURE__ */ e(
@@ -1004,7 +1004,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       /* @__PURE__ */ e(
         Ft,
         {
-          in: p,
+          in: h,
           sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
           children: t.map((i, T) => {
             const y = n.length + T;
@@ -1021,36 +1021,35 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
           })
         }
       ),
-      t.length > 0 && /* @__PURE__ */ e(To, { isExpanded: p, onClick: _ })
+      t.length > 0 && /* @__PURE__ */ e(To, { isExpanded: h, onClick: _ })
     ] }) });
   }
 ), bo = ({ beats: o, onInsightCardClick: s }) => {
-  const t = ze(), { onEvent: n } = P(), { isMobile: r, isDesktop: u, isLargeDesktop: h } = ee(), { beatStore: g, endpoint: c, sessionToken: p } = He(), C = t.palette.mode === "dark", l = u || h, _ = l || r ? 1 : 2, m = () => null, i = (A) => {
-    s?.(A), n(w.TRENDS_CLICK_INSIGHT, G);
-  }, T = l ? 200 : 170, y = l ? 170 : 124, L = l ? 56 : 0, x = o.length > 0 ? T + L : y, v = l && o.length > 0 ? T : void 0;
-  return /* @__PURE__ */ e(Tt, { sx: { height: x }, children: /* @__PURE__ */ e(
+  const { onEvent: t } = P(), { isMobile: n, isDesktop: r, isLargeDesktop: d } = ee(), { beatStore: u, endpoint: g, sessionToken: c } = He(), h = r || d, C = h || n ? 1 : 2, p = () => null, _ = (x) => {
+    s?.(x), t(v.TRENDS_CLICK_INSIGHT, G);
+  }, m = h ? 200 : 170, i = h ? 170 : 124, T = h ? 56 : 0, y = o.length > 0 ? m + T : i, L = h && o.length > 0 ? m : void 0;
+  return /* @__PURE__ */ e(Tt, { sx: { height: y }, children: /* @__PURE__ */ e(
     Ht,
     {
-      areBeatsLoading: g.isLoading,
+      areBeatsLoading: u.isLoading,
       beats: o,
-      endpoint: c,
-      heightOverrides: v,
-      logOutUser: m,
-      onCardClick: i,
+      endpoint: g,
+      heightOverrides: L,
+      logOutUser: p,
+      onCardClick: _,
       showBorder: !0,
       showCTAColocatedWithText: !1,
       showCarouselControls: !0,
-      showHeader: l,
+      showHeader: h,
       showIcon: !0,
       showWithMargin: !1,
-      token: p,
-      useDarkMode: C,
+      token: c,
       userHasFullInsightFeedBeats: !1,
       variant: "outlined",
-      visibleCardsCount: _
+      visibleCardsCount: C
     }
   ) });
-}, xo = H(bo), vo = H(({ chartLabel: o, chartColor: s }) => {
+}, xo = k(bo), vo = k(({ chartLabel: o, chartColor: s }) => {
   const { onEvent: t } = P(), {
     categoryDetailsChartData: { monthlyAmounts: n, tooltipLabels: r }
   } = pe();
@@ -1068,7 +1067,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
         stroke: s
       }),
       onItemClick: () => {
-        t(w.TRENDS_CLICK_CHART, G);
+        t(v.TRENDS_CLICK_CHART, G);
       },
       showArea: !0,
       showAverage: !0,
@@ -1083,49 +1082,49 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       valueFormatterString: "0,0"
     }
   ) });
-}), wo = H(({ onClose: o }) => {
-  const s = qe(), { onEvent: t } = P(), { common: n, trends: r } = O(), { selectedCategoryData: u, selectedDateRangeMonthRange: h } = pe(), { sortedTransactions: g } = xe(), [c, p] = d.useState(null);
-  if (!u)
+}), wo = k(({ onClose: o }) => {
+  const s = Ze(), { onEvent: t } = P(), { common: n, trends: r } = W(), { selectedCategoryData: d, selectedDateRangeMonthRange: u } = pe(), { sortedTransactions: g } = xe(), [c, h] = l.useState(null);
+  if (!d)
     return null;
-  const { guid: C, name: l, is_income: _, totalAmount: m } = u, i = _ ? r.category_income : r.category_spending, T = Zt(C, s), y = _ ? r.income_label : r.spending_label, L = ` ${u.transactions.length === 1 ? r.transaction : r.transactions} (${u.transactions.length})`, x = d.useMemo(
-    () => g.find((R) => R.guid === c),
+  const { guid: C, name: p, is_income: _, totalAmount: m } = d, i = _ ? r.category_income : r.category_spending, T = Zt(C, s), y = _ ? r.income_label : r.spending_label, L = ` ${d.transactions.length === 1 ? r.transaction : r.transactions} (${d.transactions.length})`, x = l.useMemo(
+    () => g.find((A) => A.guid === c),
     [c, g]
-  ), v = (R) => R.category_guid === C || R.top_level_category_guid === C, A = () => {
-    o?.(), t(w.TRENDS_CLICK_BACK, G);
+  ), D = (A) => A.category_guid === C || A.top_level_category_guid === C, O = () => {
+    o?.(), t(v.TRENDS_CLICK_BACK, G);
   };
   return /* @__PURE__ */ f(
     ke,
     {
       ariaLabelClose: r.close_category_details,
       isOpen: !0,
-      onClose: A,
+      onClose: O,
       shouldShowHeaderShadow: !0,
       title: i,
       children: [
         /* @__PURE__ */ f(b, { sx: { alignItems: "center", height: "100%" }, children: [
           /* @__PURE__ */ f(Xt, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
             /* @__PURE__ */ e(
-              Ke,
+              ze,
               {
                 leftIcon: /* @__PURE__ */ e(Se, { categoryGuid: C }),
                 rightContent: oe(Math.abs(m), "0,0.00"),
-                subtitle: h,
-                title: l
+                subtitle: u,
+                title: p
               }
             ),
             /* @__PURE__ */ e(vo, { chartColor: T, chartLabel: y }),
             /* @__PURE__ */ f(b, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
               /* @__PURE__ */ e(K, { bold: !0, variant: "body1", children: L }),
-              /* @__PURE__ */ e(qt, { filter: v })
+              /* @__PURE__ */ e(qt, { filter: D })
             ] })
           ] }),
           /* @__PURE__ */ e(
-            Ze,
+            Xe,
             {
               bgcolor: "transparent",
-              filter: v,
+              filter: D,
               height: "calc(100vh - 475px)",
-              onClick: p
+              onClick: h
             }
           )
         ] }),
@@ -1134,49 +1133,49 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
           {
             ariaLabelClose: n.close_aria,
             isOpen: !!x,
-            onClose: () => p(""),
+            onClose: () => h(""),
             title: r.transaction,
-            children: x && /* @__PURE__ */ e(Xe, { transaction: x })
+            children: x && /* @__PURE__ */ e(Ue, { transaction: x })
           }
         )
       ]
     }
   );
 }), Do = (o, s) => {
-  const t = Ye(o, s), n = je(o, s);
+  const t = je(o, s), n = Ke(o, s);
   return [t, n].filter((r) => r.length > 0);
 }, Io = (o, s) => {
-  const [t, n] = o, r = t, u = n ?? t, h = [];
+  const [t, n] = o, r = t, d = n ?? t, u = [];
   if (r) {
-    const g = r.reduce((c, p) => c + p.y, 0);
-    h.push({ label: s.income_label, amount: g });
+    const g = r.reduce((c, h) => c + h.y, 0);
+    u.push({ label: s.income_label, amount: g });
   }
-  if (u) {
-    const g = u.reduce((c, p) => c + p.y, 0);
-    h.push({ label: s.spending_label, amount: g });
+  if (d) {
+    const g = d.reduce((c, h) => c + h.y, 0);
+    u.push({ label: s.spending_label, amount: g });
   }
-  return h;
+  return u;
 }, Eo = ({
   availableHeight: o = 0,
   minHeight: s = 500,
   selectedDateRange: t,
   totals: n
 }) => {
-  const r = be(), { onEvent: u } = P(), { trends: h } = O(), { isSmallMobile: g, isMobile: c, isSmallTablet: p, isTablet: C } = ee(), l = [r.palette.chart?.chart1, r.palette.chart?.chart2], _ = Do(n, t), m = Io(_, h), [i, T] = d.useState(0), y = 458, L = 195, x = 56, v = c || g ? L : p || C ? y : i;
-  return d.useEffect(() => {
-    const R = Math.max(o - x, s);
-    T(R);
+  const r = be(), { onEvent: d } = P(), { trends: u } = W(), { isSmallMobile: g, isMobile: c, isSmallTablet: h, isTablet: C } = ee(), p = [r.palette.chart?.chart1, r.palette.chart?.chart2], _ = Do(n, t), m = Io(_, u), [i, T] = l.useState(0), y = 458, L = 195, x = 56, D = c || g ? L : h || C ? y : i;
+  return l.useEffect(() => {
+    const A = Math.max(o - x, s);
+    T(A);
   }, [o]), /* @__PURE__ */ e(
     Ne,
     {
       baseline: "min",
-      colors: l,
+      colors: p,
       curveType: "bump",
       datasets: _,
-      height: v,
+      height: D,
       labels: m,
       onItemClick: () => {
-        u(w.TRENDS_CLICK_CHART, G);
+        d(v.TRENDS_CLICK_CHART, G);
       },
       showArea: !0,
       showAxisHighlight: !0,
@@ -1189,7 +1188,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
       valueFormatterString: "0.0a"
     }
   );
-}, Lo = H(Eo), Mo = [
+}, Lo = k(Eo), Mo = [
   "BillAmountNotStandard",
   "CategorySpendingV2",
   "CostOfLivingToIncome",
@@ -1224,83 +1223,83 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
   "WeeklyNoSpendDays",
   "WeeklySmallPurchasesSummary"
 ], Ao = ({ onBackClick: o, onInsightCardClick: s, sx: t }) => {
-  const { onEvent: n } = P(), { onLoad: r } = pt(), { config: u } = Ct(), { isLargeDesktop: h, isDesktop: g, isMobile: c } = ee(), { visibleAccounts: p } = ve(), { loadDateRangeCategoryTotals: C, loadMonthlyCategoryTotals: l, monthlyCategoryTotals: _ } = U(), { setFilter: m } = xe(), { selectedDateRange: i, setSelectedCategoryData: T, setSelectedDateRange: y } = pe(), {
+  const { onEvent: n } = P(), { onLoad: r } = mt(), { config: d } = pt(), { isLargeDesktop: u, isDesktop: g, isMobile: c } = ee(), { visibleAccounts: h } = ve(), { loadDateRangeCategoryTotals: C, loadMonthlyCategoryTotals: p, monthlyCategoryTotals: _ } = U(), { setFilter: m } = xe(), { selectedDateRange: i, setSelectedCategoryData: T, setSelectedDateRange: y } = pe(), {
     isCopyLoaded: L,
     isInitialized: x,
-    selectedAccounts: v,
-    selectedAccountGuids: A,
-    setSelectedAccounts: R
-  } = me(), { trends: M, connect: k } = O(), { beatStore: E } = He(), ne = Qt() && u.show_insights_widget_in_master, B = g || h, [Ce, ae] = d.useState(!1), [Z, ie] = d.useState(!1), [q, ce] = d.useState("Chart"), [$, te] = d.useState(""), [se, re] = d.useState(!1), [j, D] = d.useState(window.innerHeight), V = B ? 56 : 0, F = j - 208, le = j - (ne ? 550 + V : 266), [we, ye] = d.useState(!1), a = u.show_connections_widget_in_master ? "buttons" : "no-buttons", S = d.useMemo(
-    () => p && p.length === 0 || _.length === 0,
-    [p, _]
+    selectedAccounts: D,
+    selectedAccountGuids: O,
+    setSelectedAccounts: A
+  } = me(), { trends: M, connect: R } = W(), { beatStore: E } = He(), ne = Qt() && d.show_insights_widget_in_master, B = g || u, [Ce, ae] = l.useState(!1), [Z, ie] = l.useState(!1), [q, ce] = l.useState("Chart"), [$, te] = l.useState(""), [se, re] = l.useState(!1), [j, w] = l.useState(window.innerHeight), V = B ? 56 : 0, F = j - 208, le = j - (ne ? 550 + V : 266), [we, ye] = l.useState(!1), a = d.show_connections_widget_in_master ? "buttons" : "no-buttons", S = l.useMemo(
+    () => h && h.length === 0 || _.length === 0,
+    [h, _]
   );
-  d.useEffect(() => {
+  l.useEffect(() => {
     x && E.loadBeats().finally(() => ie(!0));
   }, [x]);
-  const I = d.useMemo(() => Z ? E.getFilteredBeats({ templates: Mo }) : [], [Z]);
-  d.useEffect(() => {
-    const N = () => D(window.innerHeight);
-    return window.addEventListener("resize", N), () => window.removeEventListener("resize", N);
-  }, []), d.useEffect(() => {
-    R(p);
-  }, [p]), d.useEffect(() => {
-    x && C(v, i.start, i.end).then(() => {
-      l(
-        v,
+  const I = l.useMemo(() => Z ? E.getFilteredBeats({ templates: Mo }) : [], [Z]);
+  l.useEffect(() => {
+    const H = () => w(window.innerHeight);
+    return window.addEventListener("resize", H), () => window.removeEventListener("resize", H);
+  }, []), l.useEffect(() => {
+    A(h);
+  }, [h]), l.useEffect(() => {
+    x && C(D, i.start, i.end).then(() => {
+      p(
+        D,
         i.start,
         i.end
       );
     }).finally(() => {
-      ae(!0), n(w.TRENDS_LOAD_WIDGET, {
+      ae(!0), n(v.TRENDS_LOAD_WIDGET, {
         ...G,
         time_period: `${Ae(i.end, i.start)}M`
       }), r?.("TrendsWidget");
     });
-  }, [x, v, i]), d.useEffect(() => {
+  }, [x, D, i]), l.useEffect(() => {
     if (_.length !== 0) {
-      const N = {
-        accounts: A,
+      const H = {
+        accounts: O,
         dateRange: { start: i.start, end: i.end }
       };
       m({
-        ...N,
+        ...H,
         custom: (Q) => !!_.find(
           (ue) => ue.top_level_category_guid === Q.top_level_category_guid || ue.category_guid === Q.category_guid
         )
       });
     }
   }, [_]);
-  const Y = (N) => {
-    T(N), re(!0);
+  const Y = (H) => {
+    T(H), re(!0);
   }, De = () => {
     T(null), re(!1);
   }, Ie = () => {
-    ye(!0), n(w.TRENDS_CLICK_CONNECT_ACCOUNTS);
-  }, de = (N, Q) => {
-    ce(Q ?? q), n(w.TRENDS_CLICK_TOGGLE_VIEW, {
+    ye(!0), n(v.TRENDS_CLICK_CONNECT_ACCOUNTS);
+  }, de = (H, Q) => {
+    ce(Q ?? q), n(v.TRENDS_CLICK_TOGGLE_VIEW, {
       ...G,
       toggleView: Q
     });
-  }, Ee = (N) => {
-    const Q = $e(N?.[0], 1), ue = N?.[1], st = Ae(ue, Q);
-    y({ start: Q, end: ue }), n(w.TRENDS_CLICK_TIME_WINDOW, {
+  }, Ee = (H) => {
+    const Q = $e(H?.[0], 1), ue = H?.[1], nt = Ae(ue, Q);
+    y({ start: Q, end: ue }), n(v.TRENDS_CLICK_TIME_WINDOW, {
       ...G,
-      time_period: st + "M"
+      time_period: nt + "M"
     });
-  }, Le = (N) => {
-    n(w.TRENDS_CLICK_FILTER, {
+  }, Le = (H) => {
+    n(v.TRENDS_CLICK_FILTER, {
       ...G,
-      filterValue: N
+      filterValue: H
     });
-  }, ot = (N) => {
-    te(N);
-  }, nt = () => {
-    te(""), n(w.TRENDS_CLICK_ALL_CATEGORIES, G);
+  }, tt = (H) => {
+    te(H);
+  }, ot = () => {
+    te(""), n(v.TRENDS_CLICK_ALL_CATEGORIES, G);
   };
   return !L || !Ce ? /* @__PURE__ */ e(ge, {}) : /* @__PURE__ */ f(
-    Ue,
+    Ye,
     {
-      accountOptions: p,
+      accountOptions: h,
       calendarActions: { onRangeChanged: Ee },
       dateRange: i,
       dateRangeVariant: c ? "timeframetabs" : "timeframebuttons",
@@ -1336,23 +1335,23 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
                   sx: { pb: c ? 12 : 24, pt: c ? 24 : 48 },
                   children: [
                     /* @__PURE__ */ e(
-                      et,
+                      Je,
                       {
                         selectedCategoryGuid: $,
                         selectedDateRange: i
                       }
                     ),
-                    /* @__PURE__ */ e(Je, { onTabChange: de, selectedTab: q })
+                    /* @__PURE__ */ e(Qe, { onTabChange: de, selectedTab: q })
                   ]
                 }
               ),
-              /* @__PURE__ */ e(b, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(W, { flexGrow: 1, children: $ && /* @__PURE__ */ f(_e, { onClick: nt, sx: { p: 0, pr: 5 }, children: [
+              /* @__PURE__ */ e(b, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(N, { flexGrow: 1, children: $ && /* @__PURE__ */ f(_e, { onClick: ot, sx: { p: 0, pr: 5 }, children: [
                 /* @__PURE__ */ e(fe, { name: "arrow_back" }),
                 M.all_categories
               ] }) }) }),
               /* @__PURE__ */ f(b, { flexDirection: B ? "row" : "column", gap: B ? 48 : 16, children: [
-                q === "Chart" && /* @__PURE__ */ f(rt, { children: [
-                  /* @__PURE__ */ e(W, { sx: { width: B ? "68%" : "100%" }, children: /* @__PURE__ */ e(
+                q === "Chart" && /* @__PURE__ */ f(st, { children: [
+                  /* @__PURE__ */ e(N, { sx: { width: B ? "68%" : "100%" }, children: /* @__PURE__ */ e(
                     Lo,
                     {
                       availableHeight: F,
@@ -1378,12 +1377,12 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
                     )
                   ] })
                 ] }),
-                q === "Table" && /* @__PURE__ */ e(W, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
-                  tt,
+                q === "Table" && /* @__PURE__ */ e(N, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
+                  et,
                   {
                     height: "unset",
                     monthlyCategoryTotals: _,
-                    onClickRow: ot,
+                    onClickRow: tt,
                     selectedCategory: $,
                     selectedDateRange: i
                   }
@@ -1398,13 +1397,13 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: s }) => {
           {
             onClose: () => ye(!1),
             showConnectWidget: we,
-            title: k.mini_title
+            title: R.mini_title
           }
         )
       ]
     }
   );
-}, Nn = H(Ao);
+}, Nn = k(Ao);
 export {
   Rn as TrendsFullWidget,
   Hn as TrendsMicroWidget,