@mx-cartographer/experiences 8.0.0-alpha.sms1 → 8.0.0-alpha.sms2

package/dist/trends/index.es.js

@@ -1,11 +1,11 @@
 import { jsxs as C, jsx as e, Fragment as dt } from "react/jsx-runtime";
 import c, { useRef as ut, useState as ht, useEffect as gt } from "react";
 import { observer as R } from "mobx-react-lite";
-import { CategoryIcon as ve, Text as F, Icon as Se, P as me, H3 as Pe, ChevronRightIcon as mt } from "@mxenabled/mxui";
+import { CategoryIcon as ve, Text as z, Icon as Se, P as me, H3 as Pe, ChevronRightIcon as mt } from "@mxenabled/mxui";
 import W from "@mui/material/Box";
 import b from "@mui/material/Stack";
 import be from "@mui/material/Button";
-import { addSeconds as $e } from "date-fns/addSeconds";
+import { addSeconds as Fe } from "date-fns/addSeconds";
 import { differenceInCalendarMonths as Ae } from "date-fns/differenceInCalendarMonths";
 import { useTheme as we } from "@mui/material/styles";
 import { LineChart as pt } from "@mui/x-charts";
@@ -15,30 +15,30 @@ import Ct from "@mui/material/Card";
 import yt from "@mui/material/CardContent";
 import Re from "@mui/material/Divider";
 import We from "@mui/material/Grid";
-import { u as O, m as Y, g as P, b as fe, h as De, d as Le, w as Ce, q as Fe, f as He, n as _t, a as Tt } from "../hooks-C41HAxM5.mjs";
-import { b as ze } from "../Localization-2MODESHW.mjs";
+import { u as O, m as Y, g as P, b as fe, h as De, d as Le, w as Ce, q as ze, f as He, n as _t, a as Tt } from "../hooks-C41HAxM5.mjs";
+import { b as $e } from "../Localization-2MODESHW.mjs";
 import { C as xe } from "../CurrencyText-Dr0EZ7bp.mjs";
 import { useTheme as St, Card as bt, CardContent as xt, Box as vt, Stack as wt } from "@mui/material";
-import { f as Q, a as $ } from "../Dialog-BPTr3qHE.mjs";
-import { C as Me, c as Dt } from "../Category-CevNQ03n.mjs";
+import { f as Q, a as F } from "../Dialog-CDV0kKxj.mjs";
+import { a as Me, c as Dt } from "../Category-Ccoew_sA.mjs";
 import { f as oe, a as Lt } from "../NumberFormatting-DjTD0t3W.mjs";
-import { a as Et, g as It, L as Ke } from "../TrendsStore-BW9FGQeE.mjs";
-import { T as Fn } from "../TrendsStore-BW9FGQeE.mjs";
-import { i as Mt, c as At, d as Rt, e as kt, f as Ht, h as Nt, b as je, g as Ye, j as Oe } from "../SpendingData-BuJ03S9d.mjs";
+import { a as Et, g as It, L as Ke } from "../TrendsStore-_mRaFUdf.mjs";
+import { T as zn } from "../TrendsStore-_mRaFUdf.mjs";
+import { i as Mt, c as At, d as Rt, e as kt, f as Ht, h as Nt, g as je, b as Ye, j as Oe } from "../SpendingData-DPQ96k3x.mjs";
 import Wt from "@mui/material/ToggleButton";
 import Ot from "@mui/material/ToggleButtonGroup";
 import { DataGridPro as Gt } from "@mui/x-data-grid-pro";
 import { H as Ge } from "../HeaderCell-DjuifqHJ.mjs";
-import { T as V, b as Bt } from "../ViewMoreMicroCard-C0832BMe.mjs";
-import { A as w, W as Ue } from "../WidgetContainer-BhQ1Kx2z.mjs";
-import { a as Xe, T as Ze } from "../TransactionDetails-5M2vfr59.mjs";
-import { D as ke } from "../Drawer-BEtCk82g.mjs";
-import { L as pe } from "../Loader-DUaFpDGv.mjs";
+import { T as V, b as Bt } from "../ViewMoreMicroCard-CH9E-jOx.mjs";
+import { A as w, W as Ue } from "../WidgetContainer-B1Jzb4XA.mjs";
+import { a as Xe, T as Ze } from "../TransactionDetails-Duv1X9ec.mjs";
+import { D as ke } from "../Drawer-Dqe5EqvA.mjs";
+import { L as pe } from "../Loader-BSWSYqvn.mjs";
 import { L as Ne } from "../LineChart-bc1D9xBE.mjs";
-import { M as Vt } from "../MiniWidgetContainer-CmXpTylX.mjs";
+import { M as Vt } from "../MiniWidgetContainer-D7MkHG15.mjs";
 import { subMonths as Pt } from "date-fns";
-import { TrendingUp as $t, TrendingDown as Ft, MultilineChart as zt, ExpandLess as Kt, ExpandMore as jt } from "@mxenabled/mx-icons";
-import { M as Yt } from "../MicroWidgetContainer-DEiRnYVa.mjs";
+import { TrendingUp as Ft, TrendingDown as zt, MultilineChart as $t, ExpandLess as Kt, ExpandMore as jt } from "@mxenabled/mx-icons";
+import { M as Yt } from "../MicroWidgetContainer-BGpNl5ZS.mjs";
 import Ut from "@mui/material/Collapse";
 import Xt from "@mui/material/List";
 import Zt from "@mui/material/ListItem";
@@ -47,24 +47,24 @@ import Qt from "@mui/material/ListItemIcon";
 import Jt from "@mui/material/ListItemText";
 import qe from "@mui/material/styles/useTheme";
 import eo from "@mui/material/Paper";
-import { b as to } from "../CategoryUtil-C5cR-nfQ.mjs";
-import { E as oo } from "../ExportCsvAction-DzTrtPzk.mjs";
+import { b as to } from "../CategoryUtil-DfVKKkRf.mjs";
+import { E as oo } from "../ExportCsvAction-CQ1grpwo.mjs";
 import { u as no } from "../useInsightsEnabled-CNjP5cfR.mjs";
 import { E as so } from "../EmptyState-DoxNUae-.mjs";
-import { l as ao } from "../ConnectDrawer-BIbTqYOH.mjs";
+import { l as ao } from "../ConnectDrawer-Dn1MlqLz.mjs";
 const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
   const { categories: t } = O(), { getCategoryName: n } = Y(), s = n(o);
   return /* @__PURE__ */ C(b, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
     /* @__PURE__ */ e(
       W,
       {
-        "aria-label": ze(t.category_icon_label_aria, s),
+        "aria-label": $e(t.category_icon_label_aria, s),
         mb: 4,
         role: "img",
         children: /* @__PURE__ */ e(ve, { categoryGuid: a })
       }
     ),
-    /* @__PURE__ */ e(F, { variant: "Body", children: s })
+    /* @__PURE__ */ e(z, { variant: "Body", children: s })
   ] });
 }, ro = ({
   categoryGuids: { guid: o, topLevelGuid: a },
@@ -97,14 +97,14 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       children: /* @__PURE__ */ C(yt, { children: [
         /* @__PURE__ */ C(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
           /* @__PURE__ */ e(Qe, { categoryGuid: o, topLevelCategoryGuid: a }),
-          /* @__PURE__ */ e(F, { variant: "Small", children: `${t.length}-month total` }),
+          /* @__PURE__ */ e(z, { variant: "Small", children: `${t.length}-month total` }),
           /* @__PURE__ */ e(xe, { amount: d, bold: !0, formatString: "0,0", variant: "body2" })
         ] }),
         /* @__PURE__ */ e(Re, { sx: { my: 16, width: "100%" } }),
         /* @__PURE__ */ e(We, { container: !0, children: t.map((f, p) => /* @__PURE__ */ C(c.Fragment, { children: [
           p > 0 && p % 3 === 0 && /* @__PURE__ */ e(Re, { sx: { my: 16, width: "100%" } }),
           /* @__PURE__ */ e(We, { item: !0, xs: 4, children: /* @__PURE__ */ C(W, { alignItems: "center", display: "flex", flexDirection: "column", children: [
-            /* @__PURE__ */ e(F, { color: l.palette.text.secondary, variant: "XSmall", children: f.x }),
+            /* @__PURE__ */ e(z, { color: l.palette.text.secondary, variant: "XSmall", children: f.x }),
             /* @__PURE__ */ e(
               xe,
               {
@@ -128,7 +128,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
   const l = St(), m = n.data[t], h = s[t];
   return m === void 0 || !h ? null : /* @__PURE__ */ e(bt, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ e(xt, { children: /* @__PURE__ */ C(vt, { alignItems: "center", display: "flex", flexDirection: "column", children: [
     /* @__PURE__ */ e(Qe, { categoryGuid: o, topLevelCategoryGuid: a }),
-    /* @__PURE__ */ e(F, { color: l.palette.text.secondary, variant: "Small", children: Q(h, $.MONTH_SHORT_YEAR) }),
+    /* @__PURE__ */ e(z, { color: l.palette.text.secondary, variant: "Small", children: Q(h, F.MONTH_SHORT_YEAR) }),
     /* @__PURE__ */ e(xe, { amount: String(m), bold: !0, formatString: "0,0", variant: "Body" })
   ] }) }) });
 }, lo = ({
@@ -181,7 +181,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
                   }
                 }
               ),
-              /* @__PURE__ */ e(F, { variant: "Body", children: h(i) })
+              /* @__PURE__ */ e(z, { variant: "Body", children: h(i) })
             ]
           },
           i
@@ -213,7 +213,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
     (r, T) => s.reduce((L, j) => L + j.dataset[T]?.y || 0, 0)
   ) ?? [0], se = Math.max(...B), ae = Math.max(
     ...l.flatMap((r) => r.dataset.map((T) => T.y))
-  ), z = Math.floor(Math.min(...ue) / 100) * 100, ye = Math.ceil(Math.max(se, ae) / 100) * 100, U = s.map((r, T) => ({
+  ), $ = Math.floor(Math.min(...ue) / 100) * 100, ye = Math.ceil(Math.max(se, ae) / 100) * 100, U = s.map((r, T) => ({
     id: `stacked-${T}`,
     guid: r.category_guid,
     top_level_guid: r.top_level_category_guid,
@@ -371,14 +371,14 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
                   {
                     data: H,
                     scaleType: "time",
-                    valueFormatter: (r) => Q(r, $.MONTH_SHORT_YEAR),
+                    valueFormatter: (r) => Q(r, F.MONTH_SHORT_YEAR),
                     tickNumber: ne
                     // How many ticks to show on the x-axis
                   }
                 ],
                 yAxis: [
                   {
-                    min: z,
+                    min: $,
                     max: ye || 100
                   }
                 ]
@@ -403,7 +403,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
                 cursorPosition: k,
                 hoveredAreaData: x.map((r) => ({
                   ...r,
-                  x: Q(r.x, $.MONTH_SHORT_YEAR)
+                  x: Q(r.x, F.MONTH_SHORT_YEAR)
                 }))
               }
             )
@@ -425,16 +425,16 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
   const { trends: t } = O(), { isMobile: n, isDesktop: s } = J(), { getCategoryName: l } = Y(), m = c.useMemo(() => {
     const h = Q(
       o.start,
-      n ? $.MONTH_SHORT_YEAR : $.MONTH_YEAR
+      n ? F.MONTH_SHORT_YEAR : F.MONTH_YEAR
     ), i = Q(
       o.end,
-      n ? $.MONTH_SHORT_YEAR : $.MONTH_YEAR
+      n ? F.MONTH_SHORT_YEAR : F.MONTH_YEAR
     );
     return `${h} - ${i}`;
   }, [o, n]);
   return /* @__PURE__ */ C(W, { sx: { mr: 10, minWidth: "60%" }, children: [
     /* @__PURE__ */ e(
-      F,
+      z,
       {
         display: "block",
         fontWeight: 700,
@@ -447,7 +447,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
         children: l(a) || t.sub_title
       }
     ),
-    /* @__PURE__ */ e(F, { variant: s ? "Body" : "Small", children: m })
+    /* @__PURE__ */ e(z, { variant: s ? "Body" : "Small", children: m })
   ] });
 }, ho = (o) => {
   const a = o.row[o.field];
@@ -458,12 +458,12 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
     /* @__PURE__ */ e(
       W,
       {
-        "aria-label": ze(n.category_icon_label_aria, s),
+        "aria-label": $e(n.category_icon_label_aria, s),
         role: "img",
         children: /* @__PURE__ */ e(ve, { categoryGuid: a })
       }
     ),
-    /* @__PURE__ */ e(F, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
+    /* @__PURE__ */ e(z, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
   ] });
 }, mo = (o) => /* @__PURE__ */ e(b, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
   go,
@@ -474,7 +474,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
 ) }), po = (o, a) => {
   const t = [], n = new Date(o);
   for (; n <= a; ) {
-    const s = Q(n, $.MONTH);
+    const s = Q(n, F.MONTH);
     t.push(s), n.setMonth(n.getMonth() + 1);
   }
   return t;
@@ -486,7 +486,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
   height: s = "100dvh",
   sx: l = {}
 }) => {
-  const { onEvent: m } = P(), h = Q(/* @__PURE__ */ new Date(), $.MONTH_SHORT), [i, d] = c.useState([
+  const { onEvent: m } = P(), h = Q(/* @__PURE__ */ new Date(), F.MONTH_SHORT), [i, d] = c.useState([
     { field: h, sort: "desc" }
   ]), f = c.useMemo(() => po(a.start, a.end), [a]), p = [
     {
@@ -529,7 +529,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
           category_guid: E,
           top_level_category_guid: I
         });
-        const G = Q(new Date(k, x - 1), $.MONTH_SHORT);
+        const G = Q(new Date(k, x - 1), F.MONTH_SHORT);
         return g[A][G] || (g[A][G] = 0), g[A][G] = g[A][G] + Math.abs(M), g;
       },
       {}
@@ -606,9 +606,9 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
     isTransactionDataLoaded: y,
     loadTransactionData: S,
     sortedTransactions: g
-  } = De(), { selectedDateRange: v, setSelectedDateRange: E } = Ce(), { isInitialized: I, selectedAccounts: x, setSelectedAccounts: M } = fe(), { trends: k } = O(), [A, G] = c.useState(!1), [ee, ne] = c.useState(!1), [H, ue] = c.useState("Chart"), [B, se] = c.useState(""), [ae, z] = c.useState(window.innerHeight), U = ae - (l ? 315 : 345);
+  } = De(), { selectedDateRange: v, setSelectedDateRange: E } = Ce(), { isInitialized: I, selectedAccounts: x, setSelectedAccounts: M } = fe(), { trends: k } = O(), [A, G] = c.useState(!1), [ee, ne] = c.useState(!1), [H, ue] = c.useState("Chart"), [B, se] = c.useState(""), [ae, $] = c.useState(window.innerHeight), U = ae - (l ? 315 : 345);
   c.useEffect(() => {
-    const D = () => z(window.innerHeight);
+    const D = () => $(window.innerHeight);
     return window.addEventListener("resize", D), m || h().finally(), d || f().finally(), y || S().finally(), () => window.removeEventListener("resize", D);
   }, []), c.useEffect(() => {
     M(i);
@@ -631,13 +631,13 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       (T) => T.top_level_category_guid === B || T.category_guid === B
     ) : Rt(D);
     return {
-      stackedDatasets: r.filter(kt),
-      unstackedDatasets: r.filter(Ht)
+      stackedDatasets: r.filter(Ht),
+      unstackedDatasets: r.filter(kt)
     };
   }, [_, B, v]), re = (D, r) => {
     ue(r ?? H), t(w.TRENDS_CLICK_TOGGLE_VIEW);
   }, X = (D) => {
-    const r = $e(D?.[0], 1), T = D?.[1], L = Ae(T, r);
+    const r = Fe(D?.[0], 1), T = D?.[1], L = Ae(T, r);
     E({ start: r, end: T }), t(w.TRENDS_CLICK_TIME_WINDOW, {
       time_period: L + "M"
     });
@@ -738,7 +738,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
     }
   );
 }, On = R(_o), To = () => {
-  const { monthlyCategoryTotals: o } = Y(), { trends: a } = O(), t = we(), { availableHeight: n = 300 } = Fe(), s = Nt(o);
+  const { monthlyCategoryTotals: o } = Y(), { trends: a } = O(), t = we(), { availableHeight: n = 300 } = ze(), s = Nt(o);
   return /* @__PURE__ */ e(
     Ne,
     {
@@ -783,7 +783,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
   secondaryLabel: s,
   shouldDisplayPercentage: l
 }) => {
-  const { availableWidth: m } = Fe(), h = c.useRef(null), i = c.useRef(null), d = Lt(Number(Math.abs(n)), {
+  const { availableWidth: m } = ze(), h = c.useRef(null), i = c.useRef(null), d = Lt(Number(Math.abs(n)), {
     style: "percent",
     minimumIntegerDigits: 1
   }), f = m === 288 && oe(a, "0,0.00").length > 10 ? oe(a, "0,0") : oe(a, "0,0.00"), p = t === "spending" ? n > 0 : n >= 0, _ = t === "spending" ? "error.main" : "success.main", u = t === "spending" ? "success.main" : "text.secondary", y = h?.current, S = i?.current, g = y && S ? y.scrollWidth > S.clientWidth - xo : !1;
@@ -811,7 +811,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
             children: [
               /* @__PURE__ */ e(me, { color: "text.secondary", variant: "caption", children: o }),
               l && /* @__PURE__ */ C(b, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
-                p ? /* @__PURE__ */ e($t, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e(Ft, { size: 20, sx: { color: u } }),
+                p ? /* @__PURE__ */ e(Ft, { size: 20, sx: { color: _ } }) : /* @__PURE__ */ e(zt, { size: 20, sx: { color: u } }),
                 /* @__PURE__ */ e(
                   me,
                   {
@@ -862,7 +862,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
 }, vo = R(() => {
   const { trends: o } = O();
   return /* @__PURE__ */ C(b, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
-    /* @__PURE__ */ e(zt, { size: 32 }),
+    /* @__PURE__ */ e($t, { size: 32 }),
     /* @__PURE__ */ C(b, { children: [
       /* @__PURE__ */ e(me, { fontWeight: 600, variant: "body1", children: o.zero_state_content_header }),
       /* @__PURE__ */ e(me, { color: "text.secondary", variant: "subtitle2", children: o.zero_state_content_description })
@@ -888,8 +888,8 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
   }, [_, f]);
   const { spendingData: u, incomeData: y } = c.useMemo(
     () => ({
-      spendingData: je(l, i),
-      incomeData: Ye(l, i)
+      spendingData: Ye(l, i),
+      incomeData: je(l, i)
     }),
     [l, i]
   ), [S, g] = u, [v, E] = y, I = Oe(g.y, S.y), x = Oe(E.y, v.y), M = _ && !n?.length, k = () => {
@@ -949,7 +949,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       {
         sx: { color: t.palette.primary.main, flexDirection: "row", alignItems: "center" },
         children: [
-          /* @__PURE__ */ e(Jt, { children: /* @__PURE__ */ e(F, { bold: !0, variant: "body2", children: o ? "View less" : "View more" }) }),
+          /* @__PURE__ */ e(Jt, { children: /* @__PURE__ */ e(z, { bold: !0, variant: "body2", children: o ? "View less" : "View more" }) }),
           /* @__PURE__ */ e(Qt, { sx: { color: t.palette.primary.main }, children: o ? /* @__PURE__ */ e(Kt, {}) : /* @__PURE__ */ e(
             jt,
             {
@@ -1131,7 +1131,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
             ),
             /* @__PURE__ */ e(Io, { chartColor: S, chartLabel: g }),
             /* @__PURE__ */ C(b, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
-              /* @__PURE__ */ e(F, { bold: !0, variant: "body1", children: v }),
+              /* @__PURE__ */ e(z, { bold: !0, variant: "body1", children: v }),
               /* @__PURE__ */ e(oo, { filter: I })
             ] })
           ] }),
@@ -1159,7 +1159,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
     }
   );
 }), Ao = (o, a) => {
-  const t = Ye(o, a), n = je(o, a);
+  const t = je(o, a), n = Ye(o, a);
   return [t, n].filter((s) => s.length > 0);
 }, Ro = (o, a) => {
   const [t, n] = o, s = t, l = n ?? t, m = [];
@@ -1246,7 +1246,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
     loadDateRangeCategoryTotals: y,
     loadMonthlyCategoryTotals: S,
     monthlyCategoryTotals: g
-  } = Y(), { isTransactionDataLoaded: v, loadTransactionData: E, setFilter: I } = De(), { selectedDateRange: x, setSelectedCategoryData: M, setSelectedDateRange: k } = Ce(), { isInitialized: A, selectedAccounts: G, selectedAccountGuids: ee, setSelectedAccounts: ne } = fe(), { trends: H, connect: ue } = O(), { beatStore: B } = He(), ae = no() && l.show_insights_widget_in_master, z = h || m, [ye, U] = c.useState(!1), [K, re] = c.useState(!1), [X, Z] = c.useState("Chart"), [te, ie] = c.useState(""), [he, ce] = c.useState(!1), [le, D] = c.useState(window.innerHeight), r = z ? 56 : 0, T = le - 208, L = le - (ae ? 550 + r : 266), [j, _e] = c.useState(!1), Ee = l.show_connections_widget_in_master ? "buttons" : "no-buttons", de = c.useMemo(
+  } = Y(), { isTransactionDataLoaded: v, loadTransactionData: E, setFilter: I } = De(), { selectedDateRange: x, setSelectedCategoryData: M, setSelectedDateRange: k } = Ce(), { isInitialized: A, selectedAccounts: G, selectedAccountGuids: ee, setSelectedAccounts: ne } = fe(), { trends: H, connect: ue } = O(), { beatStore: B } = He(), ae = no() && l.show_insights_widget_in_master, $ = h || m, [ye, U] = c.useState(!1), [K, re] = c.useState(!1), [X, Z] = c.useState("Chart"), [te, ie] = c.useState(""), [he, ce] = c.useState(!1), [le, D] = c.useState(window.innerHeight), r = $ ? 56 : 0, T = le - 208, L = le - (ae ? 550 + r : 266), [j, _e] = c.useState(!1), Ee = l.show_connections_widget_in_master ? "buttons" : "no-buttons", de = c.useMemo(
     () => p && p.length === 0 || g.length === 0,
     [p, g]
   ), Te = c.useMemo(() => K ? B.getFilteredBeats({ templates: No }) : [], [K]);
@@ -1294,7 +1294,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
       toggleView: q
     });
   }, at = (N) => {
-    const q = $e(N?.[0], 1), ge = N?.[1], lt = Ae(ge, q);
+    const q = Fe(N?.[0], 1), ge = N?.[1], lt = Ae(ge, q);
     k({ start: q, end: ge }), n(w.TRENDS_CLICK_TIME_WINDOW, {
       ...V,
       time_period: lt + "M"
@@ -1362,9 +1362,9 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
                 /* @__PURE__ */ e(Se, { name: "arrow_back" }),
                 H.all_categories
               ] }) }) }),
-              /* @__PURE__ */ C(b, { flexDirection: z ? "row" : "column", gap: z ? 48 : 16, children: [
+              /* @__PURE__ */ C(b, { flexDirection: $ ? "row" : "column", gap: $ ? 48 : 16, children: [
                 X === "Chart" && /* @__PURE__ */ C(dt, { children: [
-                  /* @__PURE__ */ e(W, { sx: { width: z ? "68%" : "100%" }, children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e(W, { sx: { width: $ ? "68%" : "100%" }, children: /* @__PURE__ */ e(
                     Ho,
                     {
                       availableHeight: T,
@@ -1373,7 +1373,7 @@ const Qe = ({ categoryGuid: o, topLevelCategoryGuid: a }) => {
                       totals: g
                     }
                   ) }),
-                  /* @__PURE__ */ C(b, { gap: 16, sx: { width: z ? "32%" : "100%" }, children: [
+                  /* @__PURE__ */ C(b, { gap: 16, sx: { width: $ ? "32%" : "100%" }, children: [
                     ae && K && Te.length > 0 && /* @__PURE__ */ e(
                       Eo,
                       {
@@ -1421,6 +1421,6 @@ export {
   On as TrendsFullWidget,
   Bn as TrendsMicroWidget,
   Gn as TrendsMiniWidget,
-  Fn as TrendsStore,
+  zn as TrendsStore,
   Vn as TrendsWidget
 };

package/dist/{useAccountDisplayName-CFNF8766.mjs → useAccountDisplayName-usSZCQ7I.mjs}

@@ -1,5 +1,5 @@
 import s from "react";
-import { g as e } from "./ConnectDrawer-BIbTqYOH.mjs";
+import { g as e } from "./ConnectDrawer-Dn1MlqLz.mjs";
 import { a as n } from "./hooks-C41HAxM5.mjs";
 const i = (o) => {
   const { config: a } = n();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "8.0.0-alpha.sms1",
+  "version": "8.0.0-alpha.sms2",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",
@@ -204,15 +204,10 @@
   "devDependencies": {
     "@babel/core": "^7.26.10",
     "@babel/eslint-parser": "^7.26.10",
-    "@storybook/addon-a11y": "^8.6.4",
-    "@storybook/addon-essentials": "^8.6.4",
-    "@storybook/addon-interactions": "^8.6.4",
-    "@storybook/addon-links": "^8.6.4",
-    "@storybook/blocks": "^8.6.4",
-    "@storybook/react": "^8.6.4",
-    "@storybook/react-vite": "^8.6.4",
-    "@storybook/test": "^8.6.4",
-    "@storybook/theming": "^8.6.4",
+    "@storybook/addon-a11y": "9.1.16",
+    "@storybook/addon-docs": "9.1.16",
+    "@storybook/addon-links": "9.1.16",
+    "@storybook/react-vite": "9.1.16",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -227,10 +222,11 @@
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^3.0.8",
-    "@vitest/ui": "^3.0.8",
-    "@yarnpkg/sdks": "^3.2.1",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/coverage-v8": "^4.0.15",
+    "@vitest/ui": "^4.0.15",
+    "@vueless/storybook-dark-mode": "^10.0.4",
+    "@yarnpkg/sdks": "^3.2.3",
     "css-mediaquery": "^0.1.2",
     "eslint": "^8.56.0",
     "eslint-config-mx": "^4.0.0",
@@ -239,7 +235,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-storybook": "9.1.16",
     "global-jsdom": "^9.2.0",
     "husky": "^9.1.7",
     "jsdom": "^23.0.1",
@@ -247,15 +243,14 @@
     "path": "^0.12.7",
     "prettier": "^3.5.3",
     "prop-types": "^15.8.1",
-    "storybook": "^8.6.4",
-    "storybook-addon-mock": "^5.0.0",
-    "storybook-dark-mode": "4.0.1",
+    "storybook": "9.1.16",
+    "storybook-addon-mock": "^6.0.1",
     "typescript": "^5.8.2",
     "vi-canvas-mock": "^1.0.0",
-    "vite": "^5.4.21",
-    "vite-plugin-dts": "^4.5.3",
+    "vite": "^7.2.7",
+    "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.8"
+    "vitest": "^4.0.15"
   },
   "peerDependencies": {
     "@mui/material": "^5",

package/dist/MicroWidgetContainer-DEiRnYVa.mjs

@@ -1,45 +0,0 @@
-import { jsx as r, jsxs as p, Fragment as f } from "react/jsx-runtime";
-import x from "@mui/material/Button";
-import C from "@mui/material/Card";
-import g from "@mui/material/CardContent";
-import b from "@mui/material/CardHeader";
-import { P as u, H3 as v } from "@mxenabled/mxui";
-import { ChevronRight as W } from "@mxenabled/mx-icons";
-import { u as M } from "./useDimensions-27p2evRx.mjs";
-import { W as w } from "./hooks-C41HAxM5.mjs";
-const H = ({
-  children: e,
-  className: o,
-  ctaLabel: n,
-  onCTAClick: a,
-  subHeader: t,
-  sx: s,
-  title: c,
-  variant: d = "borderless"
-}) => {
-  const [m, { height: l, width: h }] = M(), i = /* @__PURE__ */ p(f, { children: [
-    /* @__PURE__ */ r(
-      b,
-      {
-        action: /* @__PURE__ */ r(
-          x,
-          {
-            endIcon: /* @__PURE__ */ r(W, { size: 20 }),
-            onClick: a,
-            size: "small",
-            variant: "text",
-            children: n
-          }
-        ),
-        subheader: t && /* @__PURE__ */ r(u, { sx: { color: "text.secondary" }, variant: "body2", children: t }),
-        sx: { p: 0, pb: 8, width: "calc(100% - 8px)", "& .MuiCardHeader-action": { mt: 0 } },
-        title: /* @__PURE__ */ r(v, { sx: { width: "calc(100% - 10px)" }, children: c })
-      }
-    ),
-    /* @__PURE__ */ r(g, { ref: m, sx: { p: 0, ":last-child": { pb: 0 } }, children: /* @__PURE__ */ r(w, { availableHeight: l, availableWidth: h, children: e }) })
-  ] });
-  return d === "borderless" ? i : /* @__PURE__ */ r(C, { className: o, sx: { alignItems: "center", p: 16, ...s }, children: i });
-}, F = H;
-export {
-  F as M
-};

package/dist/MiniWidgetContainer-CmXpTylX.mjs

@@ -1,56 +0,0 @@
-import { jsxs as r, jsx as i, Fragment as g } from "react/jsx-runtime";
-import x from "@mui/material/Box";
-import C from "@mui/material/Button";
-import u from "@mui/material/Card";
-import v from "@mui/material/CardHeader";
-import b from "@mui/material/CardContent";
-import W from "@mui/material/IconButton";
-import { Icon as z, ChevronRight as H } from "@mxenabled/mx-icons";
-import { H3 as I, Text as B, P as M } from "@mxenabled/mxui";
-import { u as S } from "./useDimensions-27p2evRx.mjs";
-import { W as j } from "./hooks-C41HAxM5.mjs";
-const w = ({
-  children: a,
-  className: m = "mx-cmn-mini-widget",
-  closeLabel: l,
-  contentStyles: d,
-  onClose: e,
-  onPrimaryCtaClick: o,
-  primaryCtaLabel: s = "",
-  subTitle: n = "",
-  sx: c = {},
-  title: t = ""
-}) => {
-  const [p, { height: h, width: f }] = S();
-  return /* @__PURE__ */ r(u, { className: m, sx: { ...c }, children: [
-    /* @__PURE__ */ i(
-      v,
-      {
-        sx: { pb: 8 },
-        title: /* @__PURE__ */ r(g, { children: [
-          /* @__PURE__ */ r(
-            x,
-            {
-              sx: {
-                alignItems: "center",
-                display: "grid",
-                gap: 2,
-                gridTemplateColumns: "1fr auto",
-                pb: 4
-              },
-              children: [
-                t && /* @__PURE__ */ i(I, { children: t }),
-                e ? /* @__PURE__ */ i(W, { "aria-label": l, onClick: e, size: "small", children: /* @__PURE__ */ i(z, { name: "close", size: 24 }) }) : o && /* @__PURE__ */ i(C, { endIcon: /* @__PURE__ */ i(H, {}), onClick: o, size: "small", children: /* @__PURE__ */ i(B, { bold: !0, variant: "Small", children: s }) })
-              ]
-            }
-          ),
-          n && /* @__PURE__ */ i(M, { color: "text.secondary", sx: { fontSize: 15, lineHeight: "20px" }, variant: "Small", children: n })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ i(b, { ref: p, sx: { p: 0, ...d }, children: /* @__PURE__ */ i(j, { availableHeight: h, availableWidth: f, children: a }) })
-  ] });
-}, G = w;
-export {
-  G as M
-};