@mx-cartographer/experiences 7.0.23-alpha.al4 → 7.0.23-alpha.al6

package/dist/trends/index.es.js

@@ -1,69 +1,69 @@
-import { jsx as e, jsxs as f, Fragment as ze } from "react/jsx-runtime";
+import { jsx as e, jsxs as f, Fragment as Fe } from "react/jsx-runtime";
 import i from "react";
 import { observer as M } from "mobx-react-lite";
-import { Icon as re, Text as X, CategoryIcon as Te, P as Y, H3 as De, ChevronRightIcon as Fe } from "@mxenabled/mxui";
+import { Icon as re, Text as X, CategoryIcon as Te, P as Y, H3 as De, ChevronRightIcon as Pe } from "@mxenabled/mxui";
 import O from "@mui/material/Box";
 import _ from "@mui/material/Stack";
 import pe from "@mui/material/Button";
 import { addSeconds as Ie } from "date-fns/addSeconds";
 import { differenceInCalendarMonths as Ce } from "date-fns/differenceInCalendarMonths";
-import { a as Pe, g as Ke, S as $e, L as Ee, u as je } from "../TrendsStore-WrHxzdbQ.mjs";
-import { T as Jn } from "../TrendsStore-WrHxzdbQ.mjs";
-import { i as Ye, c as Ue, d as Xe, e as Ze, f as Qe, h as qe, b as Le, g as xe, j as _e } from "../SpendingData-D5vsfYKo.mjs";
-import Je from "@mui/material/ToggleButton";
-import et from "@mui/material/ToggleButtonGroup";
-import { u as R, k as F, e as H, a as P, f as ae, c as ie, v as q, l as ve, p as tt, m as nt } from "../hooks-DkUqN6JE.mjs";
+import { a as Ke, g as $e, S as je, L as Ee, u as Ye } from "../TrendsStore-WrHxzdbQ.mjs";
+import { T as eo } from "../TrendsStore-WrHxzdbQ.mjs";
+import { i as Ue, c as Xe, d as Ze, e as Qe, f as qe, h as Je, b as Le, g as xe, j as _e } from "../SpendingData-D5vsfYKo.mjs";
+import et from "@mui/material/ToggleButton";
+import tt from "@mui/material/ToggleButtonGroup";
+import { u as R, k as F, e as H, a as P, f as ae, c as ie, v as q, l as ve, p as nt, m as ot } from "../hooks-DkUqN6JE.mjs";
 import { u as K } from "../useScreenSize-B6JyS_Lj.mjs";
 import { f as Z, D as B } from "../Dialog-CWW597AF.mjs";
-import { DataGridPro as ot } from "@mui/x-data-grid-pro";
-import { C as st } from "../CurrencyText-YUhH2caW.mjs";
+import { DataGridPro as st } from "@mui/x-data-grid-pro";
+import { C as rt } from "../CurrencyText-YUhH2caW.mjs";
 import { c as Me } from "../Category-CevNQ03n.mjs";
-import { b as rt } from "../Localization-2MODESHW.mjs";
+import { b as at } from "../Localization-2MODESHW.mjs";
 import { H as be } from "../HeaderCell-DjuifqHJ.mjs";
-import { T as A, b as at } from "../ViewMoreMicroCard-DFAY0tA8.mjs";
+import { T as A, b as it } from "../ViewMoreMicroCard-DFAY0tA8.mjs";
 import { A as y, W as Ae } from "../WidgetContainer-CdBs9WOZ.mjs";
 import { a as Re, T as ke } from "../TransactionDetails-C-z3HGTT.mjs";
 import { D as fe } from "../Drawer-kEE73B87.mjs";
 import { L as Q } from "../Loader-DUaFpDGv.mjs";
 import { useTheme as He } from "@mui/material/styles";
 import { L as ye } from "../LineChart-BWWmmJxV.mjs";
-import { M as it } from "../MiniWidgetContainer-CTyjmE1h.mjs";
-import { subMonths as ct } from "date-fns";
-import { TrendingUp as lt, TrendingDown as dt, MultilineChart as ht, ExpandLess as ut, ExpandMore as mt } from "@mxenabled/mx-icons";
-import { a as gt, f as U } from "../NumberFormatting-CtWHhyBX.mjs";
-import { M as pt } from "../MicroWidgetContainer-Dxz8uBN9.mjs";
-import Ct from "@mui/material/Collapse";
-import ft from "@mui/material/List";
-import Tt from "@mui/material/ListItem";
-import yt from "@mui/material/ListItemButton";
-import _t from "@mui/material/ListItemIcon";
-import bt from "@mui/material/ListItemText";
+import { M as ct } from "../MiniWidgetContainer-CTyjmE1h.mjs";
+import { subMonths as lt } from "date-fns";
+import { TrendingUp as dt, TrendingDown as ht, MultilineChart as ut, ExpandLess as mt, ExpandMore as gt } from "@mxenabled/mx-icons";
+import { a as pt, f as U } from "../NumberFormatting-CtWHhyBX.mjs";
+import { M as Ct } from "../MicroWidgetContainer-Dxz8uBN9.mjs";
+import ft from "@mui/material/Collapse";
+import Tt from "@mui/material/List";
+import yt from "@mui/material/ListItem";
+import _t from "@mui/material/ListItemButton";
+import bt from "@mui/material/ListItemIcon";
+import St from "@mui/material/ListItemText";
 import Ne from "@mui/material/styles/useTheme";
-import St from "@mui/material/Divider";
-import { useTheme as wt, Stack as Dt } from "@mui/material";
-import It from "@mui/material/Paper";
-import { b as Et } from "../CategoryUtil-BR3H5i6n.mjs";
-import { E as Lt } from "../ExportCsvAction-CbMfQ2Wa.mjs";
-import { E as xt } from "../EmptyState-C0lr9E5T.mjs";
+import wt from "@mui/material/Divider";
+import { useTheme as Dt, Stack as It } from "@mui/material";
+import Et from "@mui/material/Paper";
+import { b as Lt } from "../CategoryUtil-BR3H5i6n.mjs";
+import { E as xt } from "../ExportCsvAction-CbMfQ2Wa.mjs";
+import { E as vt } from "../EmptyState-C0lr9E5T.mjs";
 const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
-  et,
+  tt,
   {
     exclusive: !0,
     onChange: o,
     orientation: "horizontal",
     value: n,
-    children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(Je, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(re, { name: "table_chart_view" }) : /* @__PURE__ */ e(re, { name: "format_list_bulleted" }) }, t))
+    children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(et, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(re, { name: "table_chart_view" }) : /* @__PURE__ */ e(re, { name: "format_list_bulleted" }) }, t))
   }
 ), Oe = ({ selectedDateRange: n, selectedCategoryGuid: o }) => {
-  const { trends: t } = R(), { isMobile: s, isDesktop: a } = K(), { getCategoryName: h } = F(), d = i.useMemo(() => {
+  const { trends: t } = R(), { isMobile: s, isDesktop: a } = K(), { getCategoryName: h } = F(), l = i.useMemo(() => {
     const c = Z(
       n.start,
       s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
-    ), l = Z(
+    ), d = Z(
       n.end,
       s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
     );
-    return `${c} - ${l}`;
+    return `${c} - ${d}`;
   }, [n, s]);
   return /* @__PURE__ */ f(O, { sx: { mr: 10, minWidth: "60%" }, children: [
     /* @__PURE__ */ e(
@@ -80,31 +80,31 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         children: h(o) || t.sub_title
       }
     ),
-    /* @__PURE__ */ e(X, { variant: a ? "Body" : "Small", children: d })
+    /* @__PURE__ */ e(X, { variant: a ? "Body" : "Small", children: l })
   ] });
-}, vt = (n) => {
+}, Mt = (n) => {
   const o = n.row[n.field];
-  return /* @__PURE__ */ e(_, { alignItems: "flex-end", tabIndex: n.tabIndex, children: /* @__PURE__ */ e(st, { amount: o, variant: "Small" }) });
-}, Mt = ({ categoryGuid: n, topLevelCategoryGuid: o }) => {
+  return /* @__PURE__ */ e(_, { alignItems: "flex-end", tabIndex: n.tabIndex, children: /* @__PURE__ */ e(rt, { amount: o, variant: "Small" }) });
+}, At = ({ categoryGuid: n, topLevelCategoryGuid: o }) => {
   const { categories: t } = R(), s = t.default_categories[n]?.replace(/&/g, "&") ?? Me[n];
   return /* @__PURE__ */ f(_, { alignItems: "center", direction: "row", justifyContent: "center", children: [
     /* @__PURE__ */ e(
       O,
       {
-        "aria-label": rt(t.category_icon_label_aria, s),
+        "aria-label": at(t.category_icon_label_aria, s),
         role: "img",
         children: /* @__PURE__ */ e(Te, { categoryGuid: o })
       }
     ),
     /* @__PURE__ */ e(X, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
   ] });
-}, At = (n) => /* @__PURE__ */ e(_, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
-  Mt,
+}, Rt = (n) => /* @__PURE__ */ e(_, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
+  At,
   {
     categoryGuid: n.row.category,
     topLevelCategoryGuid: n.row.top_level_category_guid
   }
-) }), Rt = (n, o) => {
+) }), kt = (n, o) => {
   const t = [], s = new Date(n);
   for (; s <= o; ) {
     const a = Z(s, B.MONTH);
@@ -119,16 +119,16 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   height: a = "100dvh",
   sx: h = {}
 }) => {
-  const { onEvent: d } = H(), c = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [l, m] = i.useState([
+  const { onEvent: l } = H(), c = Z(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [d, m] = i.useState([
     { field: c, sort: "desc" }
-  ]), C = i.useMemo(() => Rt(o.start, o.end), [o]), u = [
+  ]), C = i.useMemo(() => kt(o.start, o.end), [o]), u = [
     {
       field: "category",
       flex: 1,
       headerName: "Category",
       minWidth: 175,
       renderHeader: be,
-      renderCell: At,
+      renderCell: Rt,
       sortable: !0,
       type: "string"
     },
@@ -139,18 +139,18 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         headerName: r,
         minWidth: 100,
         renderHeader: be,
-        renderCell: vt,
+        renderCell: Mt,
         align: "right",
         headerAlign: "right",
         sortable: !0,
         hideSortIcons: !1,
         type: "number",
-        sortComparator: Pe
+        sortComparator: Ke
       })
     )
   ], b = i.useMemo(() => {
     const r = n.filter(
-      (p) => !Ye(p) && !Ue(p)
+      (p) => !Ue(p) && !Xe(p)
     ), T = (t ? r.filter(
       (p) => p.category_guid === t || p.top_level_category_guid === t
     ) : r).reduce(
@@ -170,39 +170,39 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     return Object.values(T);
   }, [n, t]);
   return /* @__PURE__ */ e(O, { sx: { height: a, width: "100%", overflowX: "auto", boxShadow: "none", ...h }, children: /* @__PURE__ */ e(
-    ot,
+    st,
     {
       columns: u,
       disableColumnFilter: !0,
       disableColumnMenu: !0,
       hideFooter: !0,
-      initialState: { sorting: { sortModel: l } },
+      initialState: { sorting: { sortModel: d } },
       onRowClick: (r) => {
-        s?.(r.row.category), d(y.TRENDS_CLICK_LIST_ITEM, {
+        s?.(r.row.category), l(y.TRENDS_CLICK_LIST_ITEM, {
           ...A,
           listItem: Me[r.row.category]
         });
       },
       onSortModelChange: (r) => {
-        m(r), d(y.TRENDS_CLICK_TABLE_SORT, A);
+        m(r), l(y.TRENDS_CLICK_TABLE_SORT, A);
       },
       rows: b,
       slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
-      sortModel: l,
+      sortModel: d,
       sortingOrder: ["asc", "desc"]
     }
   ) });
-}, kt = {
+}, Ht = {
   title: "Transaction List"
-}, Ht = ({
+}, Nt = ({
   categoryGuid: n,
   dateRange: o,
   isOpen: t,
   onClose: s
 }) => {
-  const { onEvent: a } = H(), { selectedAccountGuids: h } = P(), { common: d } = R(), { setFilter: c, sortedTransactions: l } = ae(), [m, C] = i.useState(""), u = i.useMemo(
-    () => l.find((r) => r.guid === m),
-    [m, l]
+  const { onEvent: a } = H(), { selectedAccountGuids: h } = P(), { common: l } = R(), { setFilter: c, sortedTransactions: d } = ae(), [m, C] = i.useState(""), u = i.useMemo(
+    () => d.find((r) => r.guid === m),
+    [m, d]
   );
   i.useEffect(() => {
     c({
@@ -218,24 +218,24 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   return /* @__PURE__ */ f(
     fe,
     {
-      ariaLabelClose: d.close_aria,
+      ariaLabelClose: l.close_aria,
       isOpen: t,
       onClose: b,
-      title: kt.title,
+      title: Ht.title,
       children: [
         u && /* @__PURE__ */ e(Re, { transaction: u }),
         !u && /* @__PURE__ */ e(ke, { onClick: C })
       ]
     }
   );
-}, Nt = M(Ht), Wt = ({ onBackClick: n, sx: o }) => {
-  const { onEvent: t } = H(), { isDesktop: s, isTablet: a, isMobile: h } = K(), { visibleAccounts: d } = ie(), { loadMonthlyCategoryTotals: c, monthlyCategoryTotals: l, getCategoryName: m } = F(), { sortedTransactions: C } = ae(), { selectedDateRange: u, setSelectedDateRange: b } = q(), { isCopyLoaded: r, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = P(), { trends: E } = R(), [w, I] = i.useState(!1), [k, D] = i.useState(!1), [N, x] = i.useState("Chart"), [L, $] = i.useState(""), [z, ce] = i.useState(window.innerHeight), ee = z - (h ? 315 : 345);
+}, Wt = M(Nt), Ot = ({ onBackClick: n, sx: o }) => {
+  const { onEvent: t } = H(), { isDesktop: s, isTablet: a, isMobile: h } = K(), { visibleAccounts: l } = ie(), { loadMonthlyCategoryTotals: c, monthlyCategoryTotals: d, getCategoryName: m } = F(), { sortedTransactions: C } = ae(), { selectedDateRange: u, setSelectedDateRange: b } = q(), { isCopyLoaded: r, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = P(), { trends: E } = R(), [w, I] = i.useState(!1), [k, D] = i.useState(!1), [N, x] = i.useState("Chart"), [L, $] = i.useState(""), [z, ce] = i.useState(window.innerHeight), ee = z - (h ? 315 : 345);
   i.useEffect(() => {
     const S = () => ce(window.innerHeight);
     return window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
   }, []), i.useEffect(() => {
-    p(d);
-  }, [d]), i.useEffect(() => {
+    p(l);
+  }, [l]), i.useEffect(() => {
     g && c(
       T,
       u.start,
@@ -246,18 +246,18 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   }, [g, T, u]);
   const te = i.useMemo(() => {
     if (!w) return { stackedDatasets: [], unstackedDatasets: [] };
-    const S = Ke(
-      l,
+    const S = $e(
+      d,
       u.start,
       u.end
     ), W = L.length ? S.filter(
       (G) => G.top_level_category_guid === L || G.category_guid === L
-    ) : Xe(S);
+    ) : Ze(S);
     return {
-      stackedDatasets: W.filter(Ze),
-      unstackedDatasets: W.filter(Qe)
+      stackedDatasets: W.filter(Qe),
+      unstackedDatasets: W.filter(qe)
     };
-  }, [l, L, u]), ne = (S, W) => {
+  }, [d, L, u]), ne = (S, W) => {
     x(W ?? N), t(y.TRENDS_CLICK_TOGGLE_VIEW);
   }, oe = (S) => {
     const W = Ie(S?.[0], 1), G = S?.[1], ge = Ce(G, W);
@@ -280,7 +280,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   return !r || !g || !w ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
     Ae,
     {
-      accountOptions: d,
+      accountOptions: l,
       calendarActions: { onRangeChanged: oe },
       dateRange: u,
       dateRangeVariant: "timeframebuttons",
@@ -324,7 +324,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
               ] }),
               /* @__PURE__ */ f(O, { children: [
                 N === "Chart" && /* @__PURE__ */ e(
-                  $e,
+                  je,
                   {
                     availableHeight: ee,
                     onClickLegend: de,
@@ -338,7 +338,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                 N === "Table" && /* @__PURE__ */ e(
                   Ve,
                   {
-                    monthlyCategoryTotals: l,
+                    monthlyCategoryTotals: d,
                     onClickRow: se,
                     selectedCategory: L,
                     selectedDateRange: u
@@ -349,7 +349,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
           }
         ),
         /* @__PURE__ */ e(
-          Nt,
+          Wt,
           {
             categoryGuid: L,
             dateRange: u,
@@ -360,8 +360,8 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       ]
     }
   );
-}, Yn = M(Wt), Ot = () => {
-  const n = He(), { monthlyCategoryTotals: o } = F(), { trends: t } = R(), s = qe(o);
+}, Un = M(Ot), Vt = () => {
+  const n = He(), { monthlyCategoryTotals: o } = F(), { trends: t } = R(), s = Je(o);
   return /* @__PURE__ */ e(
     ye,
     {
@@ -378,24 +378,24 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       valueFormatterString: "0,0"
     }
   );
-}, Vt = M(Ot), Gt = ({ onPrimaryCtaClick: n, sx: o }) => {
-  const { visibleAccounts: t } = ie(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = F(), { isInitialized: h } = ve(), { trends: d } = R(), { isCopyLoaded: c, selectedAccounts: l, setSelectedAccounts: m } = P();
+}, Gt = M(Vt), Bt = ({ onPrimaryCtaClick: n, sx: o }) => {
+  const { visibleAccounts: t } = ie(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = F(), { isInitialized: h } = ve(), { trends: l } = R(), { isCopyLoaded: c, selectedAccounts: d, setSelectedAccounts: m } = P();
   return i.useEffect(() => {
     m(t);
   }, [t]), i.useEffect(() => {
-    h && s(l).finally();
-  }, [h, l]), !c || !h ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
-    it,
+    h && s(d).finally();
+  }, [h, d]), !c || !h ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
+    ct,
     {
       onPrimaryCtaClick: n,
-      primaryCtaLabel: d.primary_cta,
-      subTitle: d.sub_title,
+      primaryCtaLabel: l.primary_cta,
+      subTitle: l.sub_title,
       sx: o,
-      title: d.mini_title,
-      children: a ? /* @__PURE__ */ e(Vt, {}) : /* @__PURE__ */ e(Q, {})
+      title: l.mini_title,
+      children: a ? /* @__PURE__ */ e(Gt, {}) : /* @__PURE__ */ e(Q, {})
     }
   );
-}, Un = M(Gt), Bt = 70, Se = ({
+}, Xn = M(Bt), zt = 70, Se = ({
   title: n,
   totalAmount: o,
   transactionType: t,
@@ -403,10 +403,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   secondaryLabel: a,
   shouldDisplayPercentage: h
 }) => {
-  const { availableWidth: d } = tt(), c = i.useRef(null), l = i.useRef(null), m = gt(Number(Math.abs(s)), {
+  const { availableWidth: l } = nt(), c = i.useRef(null), d = i.useRef(null), m = pt(Number(Math.abs(s)), {
     style: "percent",
     minimumIntegerDigits: 1
-  }), C = d === 288 && U(o, "0,0.00").length > 10 ? U(o, "0,0") : U(o, "0,0.00"), u = t === "spending" ? s > 0 : s >= 0, b = t === "spending" ? "error.main" : "success.main", r = t === "spending" ? "success.main" : "text.secondary", g = c?.current, T = l?.current, p = g && T ? g.scrollWidth > T.clientWidth - Bt : !1;
+  }), C = l === 288 && U(o, "0,0.00").length > 10 ? U(o, "0,0") : U(o, "0,0.00"), u = t === "spending" ? s > 0 : s >= 0, b = t === "spending" ? "error.main" : "success.main", r = t === "spending" ? "success.main" : "text.secondary", g = c?.current, T = d?.current, p = g && T ? g.scrollWidth > T.clientWidth - zt : !1;
   return /* @__PURE__ */ f(
     _,
     {
@@ -431,7 +431,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
             children: [
               /* @__PURE__ */ e(Y, { color: "text.secondary", variant: "caption", children: n }),
               h && /* @__PURE__ */ f(_, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
-                u ? /* @__PURE__ */ e(lt, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(dt, { size: 20, sx: { color: r } }),
+                u ? /* @__PURE__ */ e(dt, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(ht, { size: 20, sx: { color: r } }),
                 /* @__PURE__ */ e(
                   Y,
                   {
@@ -450,7 +450,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         /* @__PURE__ */ f(
           _,
           {
-            ref: l,
+            ref: d,
             sx: {
               alignItems: "center",
               flexDirection: "row",
@@ -465,7 +465,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                   children: /* @__PURE__ */ e(De, { children: C })
                 }
               ),
-              h && d >= 450 && !p && /* @__PURE__ */ e(
+              h && l >= 450 && !p && /* @__PURE__ */ e(
                 Y,
                 {
                   color: u ? b : r,
@@ -479,49 +479,49 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       ]
     }
   );
-}, zt = M(() => {
+}, Ft = M(() => {
   const { trends: n } = R();
   return /* @__PURE__ */ f(_, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
-    /* @__PURE__ */ e(ht, { size: 32 }),
+    /* @__PURE__ */ e(ut, { size: 32 }),
     /* @__PURE__ */ f(_, { children: [
       /* @__PURE__ */ e(Y, { fontWeight: 600, variant: "body1", children: n.zero_state_content_header }),
       /* @__PURE__ */ e(Y, { color: "text.secondary", variant: "subtitle2", children: n.zero_state_content_description })
     ] })
   ] });
-}), Xn = M(({ onCtaClick: n }) => {
-  const { visibleAccounts: o } = ie(), { onEvent: t } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: h } = F(), d = {
-    start: ct(/* @__PURE__ */ new Date(), 1),
+}), Zn = M(({ onCtaClick: n }) => {
+  const { visibleAccounts: o } = ie(), { onEvent: t } = H(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: h } = F(), l = {
+    start: lt(/* @__PURE__ */ new Date(), 1),
     end: /* @__PURE__ */ new Date()
-  }, { trends: c } = R(), { selectedAccounts: l, setSelectedAccounts: m, isInitialized: C } = P();
+  }, { trends: c } = R(), { selectedAccounts: d, setSelectedAccounts: m, isInitialized: C } = P();
   i.useEffect(() => {
     m(o);
   }, [o]), i.useEffect(() => {
-    C && a(l, d.start).then(() => {
+    C && a(d, l.start).then(() => {
       t(y.TRENDS_LOAD_WIDGET, {
         state: o?.length ? "default" : "zeroState"
       });
     });
-  }, [C, l]);
+  }, [C, d]);
   const { spendingData: u, incomeData: b } = i.useMemo(
     () => ({
-      spendingData: Le(s, d),
-      incomeData: xe(s, d)
+      spendingData: Le(s, l),
+      incomeData: xe(s, l)
     }),
-    [s, d]
+    [s, l]
   ), [r, g] = u, [T, p] = b, E = _e(g.y, r.y), w = _e(p.y, T.y), I = C && !o?.length, k = () => {
     t(
       I ? y.TRENDS_CLICK_GET_STARTED : y.TRENDS_CLICK_VIEW_MORE
     ), n();
   };
   return !h || !C ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
-    pt,
+    Ct,
     {
       className: "mx-trends-microwidget",
       ctaLabel: c.micro_primary_cta_label,
       onCTAClick: k,
       subHeader: I ? void 0 : c.micro_subheader,
       title: c.title,
-      children: I ? /* @__PURE__ */ e(zt, {}) : /* @__PURE__ */ f(
+      children: I ? /* @__PURE__ */ e(Ft, {}) : /* @__PURE__ */ f(
         _,
         {
           sx: {
@@ -557,17 +557,17 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       )
     }
   );
-}), Ft = M(
+}), Pt = M(
   ({ isExpanded: n, onClick: o }) => {
     const t = Ne();
-    return /* @__PURE__ */ e(Tt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(yt, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ f(
+    return /* @__PURE__ */ e(yt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(_t, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ f(
       _,
       {
         sx: { color: t.palette.primary.main, flexDirection: "row", alignItems: "center" },
         children: [
-          /* @__PURE__ */ e(bt, { children: /* @__PURE__ */ e(X, { bold: !0, variant: "body2", children: n ? "View less" : "View more" }) }),
-          /* @__PURE__ */ e(_t, { sx: { color: t.palette.primary.main }, children: n ? /* @__PURE__ */ e(ut, {}) : /* @__PURE__ */ e(
-            mt,
+          /* @__PURE__ */ e(St, { children: /* @__PURE__ */ e(X, { bold: !0, variant: "body2", children: n ? "View less" : "View more" }) }),
+          /* @__PURE__ */ e(bt, { sx: { color: t.palette.primary.main }, children: n ? /* @__PURE__ */ e(mt, {}) : /* @__PURE__ */ e(
+            gt,
             {
               sx: {
                 transition: "transform 0.3s ease-in-out",
@@ -587,10 +587,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     transactions: s,
     onClick: a,
     isLastItem: h = !1,
-    showDivider: d = !0
+    showDivider: l = !0
   }) => {
-    const { trends: c } = R(), { onEvent: l } = H(), m = `${s.length} ${s.length === 1 ? c.transaction : c.transactions}`, C = () => {
-      a?.(), l(y.TRENDS_CLICK_LIST_ITEM, {
+    const { trends: c } = R(), { onEvent: d } = H(), m = `${s.length} ${s.length === 1 ? c.transaction : c.transactions}`, C = () => {
+      a?.(), d(y.TRENDS_CLICK_LIST_ITEM, {
         ...A,
         listItem: t
       });
@@ -602,27 +602,27 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
           leftIcon: o ? /* @__PURE__ */ e(Te, { categoryGuid: o }) : void 0,
           onClick: C,
           rightContent: U(Math.abs(n), "0,0.00"),
-          rightIcon: a ? /* @__PURE__ */ e(Fe, {}) : void 0,
+          rightIcon: a ? /* @__PURE__ */ e(Pe, {}) : void 0,
           subtitle: m,
           title: t
         }
       ),
-      d && /* @__PURE__ */ e(St, { sx: { ml: h ? 24 : 68 } })
+      l && /* @__PURE__ */ e(wt, { sx: { ml: h ? 24 : 68 } })
     ] }, o);
   }
-), Pt = M(
+), Kt = M(
   ({ availableHeight: n = 0, onCategoryClick: o }) => {
-    const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: a } = q(), { isLargeDesktop: h, isDesktop: d } = K(), { trends: c } = R(), { onEvent: l } = H(), [m, C] = i.useState(!1), u = d || h;
+    const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: a } = q(), { isLargeDesktop: h, isDesktop: l } = K(), { trends: c } = R(), { onEvent: d } = H(), [m, C] = i.useState(!1), u = l || h;
     i.useEffect(() => {
       const g = Math.floor(n / 64) - 1, T = s.length + t.length;
       g !== s.length && (a(u ? Math.max(g, 5) : 5), C(g >= T));
     }, [n]);
     const b = () => {
-      C(!m), l(y.TRENDS_CLICK_VIEW_MORE, {
+      C(!m), d(y.TRENDS_CLICK_VIEW_MORE, {
         ...A
       });
     }, r = s.length + (m ? t.length : 0);
-    return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ f(ft, { children: [
+    return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ f(Tt, { children: [
       /* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(De, { children: c.categories }) }),
       s.map((g, T) => /* @__PURE__ */ e(
         we,
@@ -635,7 +635,7 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         g.guid
       )),
       /* @__PURE__ */ e(
-        Ct,
+        ft,
         {
           in: m,
           sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
@@ -654,10 +654,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
           })
         }
       ),
-      t.length > 0 && /* @__PURE__ */ e(Ft, { isExpanded: m, onClick: b })
+      t.length > 0 && /* @__PURE__ */ e(Pt, { isExpanded: m, onClick: b })
     ] }) });
   }
-), Kt = [
+), $t = [
   "BillAmountNotStandard",
   "CategorySpendingV2",
   "CostOfLivingToIncome",
@@ -691,18 +691,18 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   "WeeklyNewMerchantsV2",
   "WeeklyNoSpendDays",
   "WeeklySmallPurchasesSummary"
-], $t = ({ onInsightCardClick: n }) => {
-  const o = wt(), { onEvent: t } = H(), { isMobile: s, isDesktop: a, isLargeDesktop: h } = K(), { beatStore: d, endpoint: c, sessionToken: l } = ve(), { isInitialized: m } = P(), [C, u] = i.useState(!1), b = o.palette.mode === "dark", r = a || h, g = r || s ? 1 : 2;
+], jt = ({ onInsightCardClick: n }) => {
+  const o = Dt(), { onEvent: t } = H(), { isMobile: s, isDesktop: a, isLargeDesktop: h } = K(), { beatStore: l, endpoint: c, sessionToken: d } = ve(), { isInitialized: m } = P(), [C, u] = i.useState(!1), b = o.palette.mode === "dark", r = a || h, g = r || s ? 1 : 2;
   i.useEffect(() => {
-    m && d.loadBeats().finally(() => u(!0));
+    m && l.loadBeats().finally(() => u(!0));
   }, [m]);
-  const T = i.useMemo(() => C ? d.getFilteredBeats({ templates: Kt }) : [], [C]), p = () => null, E = (D) => {
+  const T = i.useMemo(() => C ? l.getFilteredBeats({ templates: $t }) : [], [C]), p = () => null, E = (D) => {
     n?.(D), t(y.TRENDS_CLICK_INSIGHT, A);
   }, w = r ? 200 : 170, I = r ? 170 : 124, k = T.length > 0 ? w : I;
-  return /* @__PURE__ */ e(Dt, { sx: { height: k }, children: /* @__PURE__ */ e(
-    at,
+  return /* @__PURE__ */ e(It, { sx: { height: k }, children: /* @__PURE__ */ e(
+    it,
     {
-      areBeatsLoading: d.isLoading,
+      areBeatsLoading: l.isLoading,
       beats: T,
       endpoint: c,
       logOutUser: p,
@@ -713,14 +713,14 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       showHeader: r,
       showIcon: !0,
       showWithMargin: !1,
-      token: l,
+      token: d,
       useDarkMode: b,
       userHasFullInsightFeedBeats: !1,
       variant: "outlined",
       visibleCardsCount: g
     }
   ) });
-}, jt = M($t), Yt = M(({ chartLabel: n, chartColor: o }) => {
+}, Yt = M(jt), Ut = M(({ chartLabel: n, chartColor: o }) => {
   const { onEvent: t } = H(), {
     categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: a }
   } = q();
@@ -753,13 +753,13 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       valueFormatterString: "0,0"
     }
   ) });
-}), Ut = M(({ onClose: n }) => {
-  const o = Ne(), { onEvent: t } = H(), { common: s, trends: a } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: d } = q(), { sortedTransactions: c } = ae(), [l, m] = i.useState(null);
+}), Xt = M(({ onClose: n }) => {
+  const o = Ne(), { onEvent: t } = H(), { common: s, trends: a } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: l } = q(), { sortedTransactions: c } = ae(), [d, m] = i.useState(null);
   if (!h)
     return null;
-  const { guid: C, name: u, is_income: b, totalAmount: r } = h, g = b ? a.category_income : a.category_spending, T = Et(C, o), p = b ? a.income_label : a.spending_label, E = ` ${h.transactions.length === 1 ? a.transaction : a.transactions} (${h.transactions.length})`, w = i.useMemo(
-    () => c.find((D) => D.guid === l),
-    [l, c]
+  const { guid: C, name: u, is_income: b, totalAmount: r } = h, g = b ? a.category_income : a.category_spending, T = Lt(C, o), p = b ? a.income_label : a.spending_label, E = ` ${h.transactions.length === 1 ? a.transaction : a.transactions} (${h.transactions.length})`, w = i.useMemo(
+    () => c.find((D) => D.guid === d),
+    [d, c]
   ), I = (D) => D.category_guid === C || D.top_level_category_guid === C, k = () => {
     n?.(), t(y.TRENDS_CLICK_BACK, A);
   };
@@ -773,20 +773,20 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       title: g,
       children: [
         /* @__PURE__ */ f(_, { sx: { alignItems: "center", height: "100%" }, children: [
-          /* @__PURE__ */ f(It, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
+          /* @__PURE__ */ f(Et, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
             /* @__PURE__ */ e(
               Ee,
               {
                 leftIcon: /* @__PURE__ */ e(Te, { categoryGuid: C }),
                 rightContent: U(Math.abs(r), "0,0.00"),
-                subtitle: d,
+                subtitle: l,
                 title: u
               }
             ),
-            /* @__PURE__ */ e(Yt, { chartColor: T, chartLabel: p }),
+            /* @__PURE__ */ e(Ut, { chartColor: T, chartLabel: p }),
             /* @__PURE__ */ f(_, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
               /* @__PURE__ */ e(X, { bold: !0, variant: "body1", children: E }),
-              /* @__PURE__ */ e(Lt, { filter: I })
+              /* @__PURE__ */ e(xt, { filter: I })
             ] })
           ] }),
           /* @__PURE__ */ e(
@@ -812,27 +812,27 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       ]
     }
   );
-}), Xt = (n, o) => {
+}), Zt = (n, o) => {
   const t = xe(n, o), s = Le(n, o);
   return [t, s].filter((a) => a.length > 0);
-}, Zt = (n, o) => {
-  const [t, s] = n, a = t, h = s ?? t, d = [];
+}, Qt = (n, o) => {
+  const [t, s] = n, a = t, h = s ?? t, l = [];
   if (a) {
-    const c = a.reduce((l, m) => l + m.y, 0);
-    d.push({ label: o.income_label, amount: c });
+    const c = a.reduce((d, m) => d + m.y, 0);
+    l.push({ label: o.income_label, amount: c });
   }
   if (h) {
-    const c = h.reduce((l, m) => l + m.y, 0);
-    d.push({ label: o.spending_label, amount: c });
+    const c = h.reduce((d, m) => d + m.y, 0);
+    l.push({ label: o.spending_label, amount: c });
   }
-  return d;
-}, Qt = ({
+  return l;
+}, qt = ({
   availableHeight: n = 0,
   minHeight: o = 500,
   selectedDateRange: t,
   totals: s
 }) => {
-  const a = He(), { onEvent: h } = H(), { trends: d } = R(), { isSmallMobile: c, isMobile: l, isSmallTablet: m, isTablet: C } = K(), u = [a.palette.chart?.chart1, a.palette.chart?.chart2], b = Xt(s, t), r = Zt(b, d), [g, T] = i.useState(0), p = 458, E = 195, w = 56, I = l || c ? E : m || C ? p : g;
+  const a = He(), { onEvent: h } = H(), { trends: l } = R(), { isSmallMobile: c, isMobile: d, isSmallTablet: m, isTablet: C } = K(), u = [a.palette.chart?.chart1, a.palette.chart?.chart2], b = Zt(s, t), r = Qt(b, l), [g, T] = i.useState(0), p = 458, E = 195, w = 56, I = d || c ? E : m || C ? p : g;
   return i.useEffect(() => {
     const D = Math.max(n - w, o);
     T(D);
@@ -859,20 +859,21 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       valueFormatterString: "0,0"
     }
   );
-}, qt = M(Qt), Jt = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
-  const { onEvent: s } = H(), { config: a } = nt(), { isLargeDesktop: h, isDesktop: d, isMobile: c } = K(), { visibleAccounts: l } = ie(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: u } = F(), { setFilter: b } = ae(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: T } = q(), {
+}, Jt = M(qt), en = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
+  const { onEvent: s } = H(), { config: a } = ot(), { isLargeDesktop: h, isDesktop: l, isMobile: c } = K(), { visibleAccounts: d } = ie(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: C, monthlyCategoryTotals: u } = F(), { setFilter: b } = ae(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: T } = q(), {
     isCopyLoaded: p,
     isInitialized: E,
     selectedAccounts: w,
     selectedAccountGuids: I,
     setSelectedAccounts: k
-  } = P(), { trends: D } = R(), N = je(), x = d || h, [L, $] = i.useState(!1), [z, ce] = i.useState("Chart"), [J, ee] = i.useState(""), [te, ne] = i.useState(!1), [oe, le] = i.useState(window.innerHeight), se = oe - 208, de = oe - (N ? 494 : 266);
+  } = P(), { trends: D } = R(), N = Ye(), x = l || h, [L, $] = i.useState(!1), [z, ce] = i.useState("Chart"), [J, ee] = i.useState(""), [te, ne] = i.useState(!1), [oe, le] = i.useState(window.innerHeight), se = oe - 208, de = oe - (N ? 494 : 266);
   i.useEffect(() => {
+    console.log("inside first use effect");
     const v = () => le(window.innerHeight);
     return window.addEventListener("resize", v), () => window.removeEventListener("resize", v);
   }, []), i.useEffect(() => {
-    k(l);
-  }, [l]), i.useEffect(() => {
+    k(d);
+  }, [d]), i.useEffect(() => {
     E && m(w, r.start, r.end).then(() => {
       C(
         w,
@@ -909,10 +910,10 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       toggleView: V
     });
   }, S = (v) => {
-    const V = Ie(v?.[0], 1), j = v?.[1], Be = Ce(j, V);
+    const V = Ie(v?.[0], 1), j = v?.[1], ze = Ce(j, V);
     T({ start: V, end: j }), s(y.TRENDS_CLICK_TIME_WINDOW, {
       ...A,
-      time_period: Be + "M"
+      time_period: ze + "M"
     });
   }, W = (v) => {
     s(y.TRENDS_CLICK_FILTER, {
@@ -923,11 +924,11 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     ee(v);
   }, ge = () => {
     ee(""), s(y.TRENDS_CLICK_ALL_CATEGORIES, A);
-  }, Ge = a.show_connections_widget_in_master ? "buttons" : "no-buttons";
-  return !p || !L ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ f(
+  }, Ge = a.show_connections_widget_in_master ? "buttons" : "no-buttons", Be = L && !d?.length;
+  return !p || !L ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
     Ae,
     {
-      accountOptions: l,
+      accountOptions: d,
       calendarActions: { onRangeChanged: S },
       dateRange: r,
       dateRangeVariant: c ? "timeframetabs" : "timeframebuttons",
@@ -935,94 +936,91 @@ const We = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       onBackClick: n,
       sx: t,
       title: D.title,
-      children: [
-        l && L && /* @__PURE__ */ f(
-          _,
-          {
-            sx: {
-              px: c ? 0 : 48
-            },
-            children: [
-              /* @__PURE__ */ f(
-                _,
-                {
-                  flexDirection: "row",
-                  justifyContent: "space-between",
-                  sx: { pb: c ? 12 : 24, pt: c ? 24 : 48 },
-                  children: [
-                    /* @__PURE__ */ e(
-                      Oe,
-                      {
-                        selectedCategoryGuid: J,
-                        selectedDateRange: r
-                      }
-                    ),
-                    /* @__PURE__ */ e(We, { onTabChange: me, selectedTab: z })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ e(_, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: J && /* @__PURE__ */ f(pe, { onClick: ge, sx: { p: 0, pr: 5 }, children: [
-                /* @__PURE__ */ e(re, { name: "arrow_back" }),
-                D.all_categories
-              ] }) }) }),
-              /* @__PURE__ */ f(_, { flexDirection: x ? "row" : "column", gap: x ? 48 : 16, children: [
-                z === "Chart" && /* @__PURE__ */ f(ze, { children: [
-                  /* @__PURE__ */ e(O, { sx: { width: x ? "68%" : "100%" }, children: /* @__PURE__ */ e(
-                    qt,
+      children: Be ? /* @__PURE__ */ e(
+        vt,
+        {
+          header: D.zero_state_content_header,
+          icon: "",
+          onClick: () => {
+          },
+          primaryButton: D.empty_state_primary,
+          subText: D.empty_state_sub_text,
+          sx: { height: se },
+          variant: Ge
+        }
+      ) : /* @__PURE__ */ f(
+        _,
+        {
+          sx: {
+            px: c ? 0 : 48
+          },
+          children: [
+            /* @__PURE__ */ f(
+              _,
+              {
+                flexDirection: "row",
+                justifyContent: "space-between",
+                sx: { pb: c ? 12 : 24, pt: c ? 24 : 48 },
+                children: [
+                  /* @__PURE__ */ e(
+                    Oe,
                     {
-                      availableHeight: se,
-                      minHeight: 450,
-                      selectedDateRange: r,
-                      totals: u
+                      selectedCategoryGuid: J,
+                      selectedDateRange: r
                     }
-                  ) }),
-                  /* @__PURE__ */ f(_, { gap: 16, sx: { width: x ? "32%" : "100%" }, children: [
-                    N && /* @__PURE__ */ e(jt, { onInsightCardClick: o }),
-                    /* @__PURE__ */ e(
-                      Pt,
-                      {
-                        availableHeight: de,
-                        onCategoryClick: he
-                      }
-                    )
-                  ] })
-                ] }),
-                z === "Table" && /* @__PURE__ */ e(O, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
-                  Ve,
+                  ),
+                  /* @__PURE__ */ e(We, { onTabChange: me, selectedTab: z })
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(_, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: J && /* @__PURE__ */ f(pe, { onClick: ge, sx: { p: 0, pr: 5 }, children: [
+              /* @__PURE__ */ e(re, { name: "arrow_back" }),
+              D.all_categories
+            ] }) }) }),
+            /* @__PURE__ */ f(_, { flexDirection: x ? "row" : "column", gap: x ? 48 : 16, children: [
+              z === "Chart" && /* @__PURE__ */ f(Fe, { children: [
+                /* @__PURE__ */ e(O, { sx: { width: x ? "68%" : "100%" }, children: /* @__PURE__ */ e(
+                  Jt,
                   {
-                    height: "unset",
-                    monthlyCategoryTotals: u,
-                    onClickRow: G,
-                    selectedCategory: J,
-                    selectedDateRange: r
+                    availableHeight: se,
+                    minHeight: 450,
+                    selectedDateRange: r,
+                    totals: u
                   }
-                ) })
+                ) }),
+                /* @__PURE__ */ f(_, { gap: 16, sx: { width: x ? "32%" : "100%" }, children: [
+                  N && /* @__PURE__ */ e(Yt, { onInsightCardClick: o }),
+                  /* @__PURE__ */ e(
+                    Kt,
+                    {
+                      availableHeight: de,
+                      onCategoryClick: he
+                    }
+                  )
+                ] })
               ] }),
-              te && /* @__PURE__ */ e(Ut, { onClose: ue })
-            ]
-          }
-        ),
-        l === void 0 && /* @__PURE__ */ e(
-          xt,
-          {
-            header: D.zero_state_content_header,
-            icon: "",
-            onClick: () => {
-            },
-            primaryButton: D.empty_state_primary,
-            subText: D.empty_state_sub_text,
-            sx: { height: se },
-            variant: Ge
-          }
-        )
-      ]
+              z === "Table" && /* @__PURE__ */ e(O, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
+                Ve,
+                {
+                  height: "unset",
+                  monthlyCategoryTotals: u,
+                  onClickRow: G,
+                  selectedCategory: J,
+                  selectedDateRange: r
+                }
+              ) })
+            ] }),
+            te && /* @__PURE__ */ e(Xt, { onClose: ue })
+          ]
+        }
+      )
     }
   );
-}, Zn = M(Jt);
+}, Qn = M(en);
 export {
-  Yn as TrendsFullWidget,
-  Xn as TrendsMicroWidget,
-  Un as TrendsMiniWidget,
-  Jn as TrendsStore,
-  Zn as TrendsWidget
+  Un as TrendsFullWidget,
+  Zn as TrendsMicroWidget,
+  Xn as TrendsMiniWidget,
+  eo as TrendsStore,
+  Qn as TrendsWidget
 };

package/package.json

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