@mx-cartographer/experiences 9.0.1 → 9.0.2

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [9.0.2] - 05-18-2026
+
+- **UPDATED** - Widget size changed event to return content size instead of container size
+
 ## [9.0.1] - 05-15-2026
 
 - **FIXED** - Bug Fixed - Edit Budget Dialog was cutting out of the frame for smaller devices - Bug Fixed

package/dist/{WidgetContainer-BU3nCHZo.mjs → WidgetContainer-CmbU4CBH.mjs}

@@ -1,56 +1,56 @@
-import { jsxs as g, jsx as e } from "react/jsx-runtime";
-import u from "react";
-import { observer as ne } from "mobx-react-lite";
-import H from "@mui/material/Button";
-import de from "@mui/material/Card";
-import me from "@mui/material/CardContent";
-import ce from "@mui/material/Divider";
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import p from "react";
+import { observer as ie } from "mobx-react-lite";
+import z from "@mui/material/Button";
+import pe from "@mui/material/Card";
+import he from "@mui/material/CardContent";
+import ge from "@mui/material/Divider";
 import $ from "@mui/material/IconButton";
-import ue from "@mui/material/Paper";
-import B from "@mui/material/Stack";
-import { ChevronLeft as pe } from "@mxenabled/mx-icons";
-import { Icon as D, Text as W, DateRangePicker as Z } from "@mxenabled/mxui";
-import { u as ge } from "./useDimensions-CeDR9V8N.mjs";
-import { G as he } from "./GlobalAccountFilter-7Cg2-9A5.mjs";
-import { b as ie, u as se, g as fe, a as be, W as _e } from "./hooks-BaO_gOI6.mjs";
-import { addMonths as J } from "date-fns/addMonths";
-import { addDays as Re } from "date-fns/addDays";
-import { addYears as ee } from "date-fns/addYears";
-import { differenceInCalendarDays as Ce } from "date-fns/differenceInCalendarDays";
-import { endOfDay as xe } from "date-fns/endOfDay";
-import { endOfMonth as z } from "date-fns/endOfMonth";
-import { endOfToday as te } from "date-fns/endOfToday";
-import { endOfYear as De } from "date-fns/endOfYear";
-import { startOfMonth as ye } from "date-fns/startOfMonth";
-import { startOfToday as ke } from "date-fns/startOfToday";
-import { startOfYear as Te } from "date-fns/startOfYear";
+import fe from "@mui/material/Paper";
+import Y from "@mui/material/Stack";
+import { ChevronLeft as be } from "@mxenabled/mx-icons";
+import { Icon as x, Text as F, DateRangePicker as Z } from "@mxenabled/mxui";
+import { u as J } from "./useDimensions-CeDR9V8N.mjs";
+import { G as _e } from "./GlobalAccountFilter-7Cg2-9A5.mjs";
+import { b as se, u as le, g as Re, a as Ce, W as xe } from "./hooks-BaO_gOI6.mjs";
+import { addMonths as ee } from "date-fns/addMonths";
+import { addDays as De } from "date-fns/addDays";
+import { addYears as te } from "date-fns/addYears";
+import { differenceInCalendarDays as ye } from "date-fns/differenceInCalendarDays";
+import { endOfDay as ke } from "date-fns/endOfDay";
+import { endOfMonth as W } from "date-fns/endOfMonth";
+import { endOfToday as ae } from "date-fns/endOfToday";
+import { endOfYear as Te } from "date-fns/endOfYear";
+import { startOfMonth as ve } from "date-fns/startOfMonth";
+import { startOfToday as Me } from "date-fns/startOfToday";
+import { startOfYear as Pe } from "date-fns/startOfYear";
 import { subMonths as K } from "date-fns/subMonths";
-import { subDays as ve } from "date-fns/subDays";
-import { subYears as ae } from "date-fns/subYears";
-import re from "@mui/material/Box";
-import Me from "@mui/material/ButtonGroup";
-import Pe from "@mui/material/Tab";
-import Se from "@mui/material/Tabs";
-import Ee from "@mui/material/ToggleButton";
-import Ye from "@mui/material/ToggleButtonGroup";
-import { useTheme as Le } from "@mui/material/styles";
-import { u as Ae } from "./useAriaLive-MkYebyUR.mjs";
-import { D as Be } from "./Dialog-Bvd2n8hz.mjs";
-import { D as we } from "./Drawer-BXqqBMxg.mjs";
-import { u as le } from "./useScreenSize-mWpmnh5w.mjs";
-import { f as P, D as S } from "./DateFormats-HudZ3Bjs.mjs";
-import { L as Ne } from "./Loader-CxeBwuPG.mjs";
-import Oe from "@mui/material/useMediaQuery";
-import { A as oe } from "./Analytics-CzGzz_sE.mjs";
-const Ie = (n) => {
-  const { isDesktop: d, isMobile: a, isSmallTablet: m, isTablet: r } = le(n), i = Oe("(min-width:900px)"), _ = 24;
-  let s = 48, y = 32, h = 0, c = "h1", R = !1;
+import { subDays as Se } from "date-fns/subDays";
+import { subYears as re } from "date-fns/subYears";
+import oe from "@mui/material/Box";
+import Ee from "@mui/material/ButtonGroup";
+import Ye from "@mui/material/Tab";
+import Le from "@mui/material/Tabs";
+import Ae from "@mui/material/ToggleButton";
+import we from "@mui/material/ToggleButtonGroup";
+import { useTheme as Be } from "@mui/material/styles";
+import { u as Ne } from "./useAriaLive-MkYebyUR.mjs";
+import { D as Oe } from "./Dialog-Bvd2n8hz.mjs";
+import { D as Ie } from "./Drawer-BXqqBMxg.mjs";
+import { u as de } from "./useScreenSize-mWpmnh5w.mjs";
+import { f as M, D as P } from "./DateFormats-HudZ3Bjs.mjs";
+import { L as Ge } from "./Loader-CxeBwuPG.mjs";
+import He from "@mui/material/useMediaQuery";
+import { A as ne } from "./Analytics-CzGzz_sE.mjs";
+const We = (n) => {
+  const { isDesktop: d, isMobile: a, isSmallTablet: m, isTablet: r } = de(n), s = He("(min-width:900px)"), _ = 24;
+  let l = 48, D = 32, g = 0, c = "h1", R = !1;
   const o = a || m;
-  r && !m ? (s = 24, y = 24, c = "h2") : o && (s = 8, y = 10, h = 10, c = "h3", R = !0);
-  const A = {
+  r && !m ? (l = 24, D = 24, c = "h2") : o && (l = 8, D = 10, g = 10, c = "h3", R = !0);
+  const S = {
     pb: o ? 12 : 0,
     ...o && {
-      px: s,
+      px: l,
       "& .mx-cmn-date-range-selector": { m: 0, width: "100%" },
       "& .mx-cmn-date-range-selector > .MuiBox-root": { display: "flex", justifyContent: "center" },
       "& .MuiButtonGroup-root": { width: "100%" },
@@ -62,24 +62,24 @@ const Ie = (n) => {
     actionsFlex: o ? 0 : 1,
     containerSquareCorners: R,
     headerHeadingLevel: c,
-    headerPaddingBottom: h,
-    headerPaddingTop: y,
-    headerPaddingX: s,
+    headerPaddingBottom: g,
+    headerPaddingTop: D,
+    headerPaddingX: l,
     iconSize: _,
     isCompact: o,
     isDesktop: d,
-    isViewportAbove900: i,
-    slotSx: A
+    isViewportAbove900: s,
+    slotSx: S
   };
-}, Ge = ({
+}, ze = ({
   calendarActions: n,
   color: d = "primary",
   copy: a,
-  range: m = [ye(ke()), z(te())],
+  range: m = [ve(Me()), W(ae())],
   shouldShrinkToIcon: r = !0,
-  variant: i = "outlined"
+  variant: s = "outlined"
 }) => {
-  const _ = Le(), { isMobile: s } = le(), { announce: y, ariaLive: h } = Ae(), [c, R] = u.useState(m), [o, A] = u.useState(a.dateRangePickerCopy.dateRangeThisMonth), [C, w] = u.useState(c), [k, x] = u.useState(!1), [N, F] = u.useState(!0), [E, j] = u.useState(6), O = {
+  const _ = Be(), { isMobile: l } = de(), { announce: D, ariaLive: g } = Ne(), [c, R] = p.useState(m), [o, S] = p.useState(a.dateRangePickerCopy.dateRangeThisMonth), [C, L] = p.useState(c), [E, y] = p.useState(!1), [j, A] = p.useState(!0), [k, w] = p.useState(6), B = {
     buttons: [
       { ariaLabel: "3 Months", label: "3M", value: 3 },
       { ariaLabel: "6 Months", label: "6M", value: 6 },
@@ -93,47 +93,47 @@ const Ie = (n) => {
       { label: "1 Year", value: 12 }
     ]
   };
-  u.useEffect(() => {
-    R(m), w(m);
-  }, [m]), u.useEffect(() => {
-    (i === "timeframebuttons" || i === "timeframetabs") && n.onRangeChanged(V());
-  }, [E]);
+  p.useEffect(() => {
+    R(m), L(m);
+  }, [m]), p.useEffect(() => {
+    (s === "timeframebuttons" || s === "timeframetabs") && n.onRangeChanged(V());
+  }, [k]);
   const V = () => {
-    const t = z(te());
-    return [z(K(t, E)), t];
-  }, I = (t) => {
-    const [l, p] = c, f = t === "previous";
+    const t = W(ae());
+    return [W(K(t, k)), t];
+  }, N = (t) => {
+    const [i, u] = c, f = t === "previous";
     let b;
     if (o === a.dateRangePickerCopy.dateRangeThisMonth || o === a.dateRangePickerCopy.dateRangeLastMonth)
       b = [
-        f ? K(l, 1) : J(l, 1),
-        z(f ? K(p, 1) : J(p, 1))
+        f ? K(i, 1) : ee(i, 1),
+        W(f ? K(u, 1) : ee(u, 1))
       ];
     else if (o === a.dateRangePickerCopy.dateRangeYTD || o === a.dateRangePickerCopy.dateRangeLastYear) {
-      const v = Te(l), M = De(l);
+      const T = Pe(i), v = Te(i);
       b = [
-        f ? ae(v, 1) : ee(v, 1),
-        f ? ae(M, 1) : ee(M, 1)
+        f ? re(T, 1) : te(T, 1),
+        f ? re(v, 1) : te(v, 1)
       ];
     } else {
-      const v = Ce(p, l), M = f ? ve : Re;
-      b = [M(l, v), M(p, v)];
+      const T = ye(u, i), v = f ? Se : De;
+      b = [v(i, T), v(u, T)];
     }
     R(b), n.onRangeChanged(b);
-  }, Y = () => {
-    R(C), F(
+  }, O = () => {
+    R(C), A(
       o === a.dateRangePickerCopy.dateRangeThisMonth || o === a.dateRangePickerCopy.dateRangeLastMonth
     ), n.onRangeChanged(C);
-  }, T = (t, l) => {
+  }, I = (t, i) => {
     t[1] = t[1] ?? t[0];
-    const p = [t[0], t[1] ? xe(t[1]) : t[1]], f = P(p[0], S.MONTH_DAY_YEAR), b = P(p[1], S.MONTH_DAY_YEAR);
-    w(p), A(l), y(`${a.dateRangePickerCopy}: ${f} - ${b}`);
-  }, L = (t) => {
-    j(t);
+    const u = [t[0], t[1] ? ke(t[1]) : t[1]], f = M(u[0], P.MONTH_DAY_YEAR), b = M(u[1], P.MONTH_DAY_YEAR);
+    L(u), S(i), D(`${a.dateRangePickerCopy}: ${f} - ${b}`);
+  }, G = (t) => {
+    w(t);
   };
-  return /* @__PURE__ */ g(re, { className: "mx-cmn-date-range-selector", m: 4, children: [
-    /* @__PURE__ */ g(
-      re,
+  return /* @__PURE__ */ h(oe, { className: "mx-cmn-date-range-selector", m: 4, children: [
+    /* @__PURE__ */ h(
+      oe,
       {
         sx: {
           [_.breakpoints.down("sm")]: {
@@ -143,81 +143,81 @@ const Ie = (n) => {
           [_.breakpoints.up("sm")]: { display: "inline-flex" }
         },
         children: [
-          i === "readonly" && /* @__PURE__ */ g(B, { alignItems: "center", direction: "row", gap: 8, children: [
-            /* @__PURE__ */ e(D, { name: "calendar_month", size: 24 }),
-            /* @__PURE__ */ e(W, { bold: !0, children: P(C[0], S.MONTH_DAY) }),
-            /* @__PURE__ */ e(D, { name: "remove" }),
-            /* @__PURE__ */ e(W, { bold: !0, children: P(C[1], S.MONTH_DAY_YEAR) })
+          s === "readonly" && /* @__PURE__ */ h(Y, { alignItems: "center", direction: "row", gap: 8, children: [
+            /* @__PURE__ */ e(x, { name: "calendar_month", size: 24 }),
+            /* @__PURE__ */ e(F, { bold: !0, children: M(C[0], P.MONTH_DAY) }),
+            /* @__PURE__ */ e(x, { name: "remove" }),
+            /* @__PURE__ */ e(F, { bold: !0, children: M(C[1], P.MONTH_DAY_YEAR) })
           ] }),
-          i !== "readonly" && i !== "timeframebuttons" && i !== "timeframetabs" && /* @__PURE__ */ g(
-            Me,
+          s !== "readonly" && s !== "timeframebuttons" && s !== "timeframetabs" && /* @__PURE__ */ h(
+            Ee,
             {
               color: d,
               sx: {
                 "& .MuiButtonGroup-grouped": {
-                  padding: s ? 0 : 12
+                  padding: l ? 0 : 12
                 },
                 "& .MuiButtonGroup-middleButton": {
                   px: 24
                 },
                 height: 44
               },
-              variant: i,
+              variant: s,
               children: [
                 /* @__PURE__ */ e(
-                  H,
+                  z,
                   {
                     "aria-disabled": n.shouldDisablePrevious,
                     "aria-label": a.dateRangePreviousAria,
                     color: n.shouldDisablePrevious ? "secondary" : "primary",
-                    onClick: () => n.shouldDisablePrevious ? null : I("previous"),
-                    children: /* @__PURE__ */ e(D, { name: "chevron_left", size: 20 })
+                    onClick: () => n.shouldDisablePrevious ? null : N("previous"),
+                    children: /* @__PURE__ */ e(x, { name: "chevron_left", size: 20 })
                   }
                 ),
                 /* @__PURE__ */ e(
-                  H,
+                  z,
                   {
                     "aria-disabled": n.shouldDisablePicker,
                     color: d,
-                    onClick: () => n.shouldDisablePicker ? null : x(!0),
-                    startIcon: /* @__PURE__ */ e(D, { name: "calendar_month", size: 20 }),
+                    onClick: () => n.shouldDisablePicker ? null : y(!0),
+                    startIcon: /* @__PURE__ */ e(x, { name: "calendar_month", size: 20 }),
                     sx: {
-                      p: s ? 0 : 8
+                      p: l ? 0 : 8
                     },
-                    children: N ? P(c[0], S.MONTH_YEAR) : /* @__PURE__ */ g("span", { children: [
-                      P(c[0], S.MONTH_DAY_YEAR),
+                    children: j ? M(c[0], P.MONTH_YEAR) : /* @__PURE__ */ h("span", { children: [
+                      M(c[0], P.MONTH_DAY_YEAR),
                       " -",
                       " ",
-                      P(c[1], S.MONTH_DAY_YEAR)
+                      M(c[1], P.MONTH_DAY_YEAR)
                     ] })
                   }
                 ),
                 /* @__PURE__ */ e(
-                  H,
+                  z,
                   {
                     "aria-disabled": n.shouldDisableNext,
                     "aria-label": a.dateRangeNextAria,
                     color: n.shouldDisableNext ? "secondary" : "primary",
-                    onClick: () => n.shouldDisableNext ? null : I("next"),
-                    children: /* @__PURE__ */ e(D, { name: "chevron_right", size: 20 })
+                    onClick: () => n.shouldDisableNext ? null : N("next"),
+                    children: /* @__PURE__ */ e(x, { name: "chevron_right", size: 20 })
                   }
                 )
               ]
             }
           ),
-          i === "timeframebuttons" && /* @__PURE__ */ e(
-            Ye,
+          s === "timeframebuttons" && /* @__PURE__ */ e(
+            we,
             {
               "aria-label": a.dateRangeEditTitle,
               color: d,
               exclusive: !0,
               orientation: "horizontal",
-              value: E,
-              children: O.buttons.map((t) => /* @__PURE__ */ e(
-                Ee,
+              value: k,
+              children: B.buttons.map((t) => /* @__PURE__ */ e(
+                Ae,
                 {
                   "aria-label": t.ariaLabel,
-                  onClick: () => L(t.value),
+                  onClick: () => G(t.value),
                   sx: { width: 56 },
                   value: t.value,
                   children: t.label
@@ -226,18 +226,18 @@ const Ie = (n) => {
               ))
             }
           ),
-          i === "timeframetabs" && /* @__PURE__ */ e(
-            Se,
+          s === "timeframetabs" && /* @__PURE__ */ e(
+            Le,
             {
               indicatorColor: "primary",
-              onChange: (t, l) => L(l),
+              onChange: (t, i) => G(i),
               textColor: "primary",
-              value: E,
+              value: k,
               variant: "fullWidth",
-              children: O.tabs.map((t) => /* @__PURE__ */ e(
-                Pe,
+              children: B.tabs.map((t) => /* @__PURE__ */ e(
+                Ye,
                 {
-                  label: /* @__PURE__ */ e(W, { bold: !0, variant: "body1", children: t.label }),
+                  label: /* @__PURE__ */ e(F, { bold: !0, variant: "body1", children: t.label }),
                   sx: { minWidth: 80 },
                   value: t.value
                 },
@@ -248,25 +248,25 @@ const Ie = (n) => {
         ]
       }
     ),
-    k && s && /* @__PURE__ */ g(
-      we,
+    E && l && /* @__PURE__ */ h(
+      Ie,
       {
         ariaLabelClose: a.dateRangeCloseAria,
-        isOpen: k,
-        onClose: () => x(!1),
+        isOpen: E,
+        onClose: () => y(!1),
         onPrimaryAction: () => {
-          Y(), x(!1);
+          O(), y(!1);
         },
         primaryText: a.dateRangeEditApply,
         title: a.dateRangeEditTitle,
         children: [
-          h,
+          g,
           /* @__PURE__ */ e(
             Z,
             {
               copy: a.dateRangePickerCopy,
               dateRange: C,
-              onRangeChanged: T,
+              onRangeChanged: I,
               selectedShortcut: o,
               sx: { p: 0 }
             }
@@ -274,13 +274,13 @@ const Ie = (n) => {
         ]
       }
     ),
-    k && !s && /* @__PURE__ */ g(
-      Be,
+    E && !l && /* @__PURE__ */ h(
+      Oe,
       {
         copy: { title: a.dateRangeEditTitle },
         isOpen: !0,
-        onClose: () => x(!1),
-        onPrimaryAction: () => Y(),
+        onClose: () => y(!1),
+        onPrimaryAction: () => O(),
         primaryText: a.dateRangeEditApply,
         sx: {
           "& .MuiDialogContent-root": {
@@ -288,13 +288,13 @@ const Ie = (n) => {
           }
         },
         children: [
-          h,
+          g,
           /* @__PURE__ */ e(
             Z,
             {
               copy: a.dateRangePickerCopy,
               dateRange: C,
-              onRangeChanged: T,
+              onRangeChanged: I,
               selectedShortcut: o,
               sx: {
                 pt: 0,
@@ -308,9 +308,9 @@ const Ie = (n) => {
       }
     )
   ] });
-}, ze = ne(
+}, Fe = ie(
   ({ calendarActions: n, dateRange: d, dateRangeVariant: a }) => {
-    const { displayedDateRange: m } = ie(), { common: r } = se(), i = {
+    const { displayedDateRange: m } = se(), { common: r } = le(), s = {
       dateRangePickerCopy: {
         dateRangeFrom: r.date_range_picker.from,
         dateRangeTo: r.date_range_picker.to,
@@ -328,92 +328,95 @@ const Ie = (n) => {
       dateRangeEditTitle: r.date_range_picker.edit_title,
       dateRangeNextAria: r.date_range_picker.next_aria,
       dateRangePreviousAria: r.date_range_picker.previous_aria
-    }, _ = d ? d.start : m.start, s = d ? d.end : m.end;
+    }, _ = d ? d.start : m.start, l = d ? d.end : m.end;
     return /* @__PURE__ */ e(
-      Ge,
+      ze,
       {
         calendarActions: n,
-        copy: i,
-        range: [_, s],
+        copy: s,
+        range: [_, l],
         shouldShrinkToIcon: !1,
         variant: a
       }
     );
   }
-), Yt = ne(
+), wt = ie(
   ({
     actions: n,
     allowedAccountTypes: d,
     calendarActions: a,
     children: m,
     className: r = "mx-cmn-widget",
-    dateRange: i,
+    dateRange: s,
     dateRangeVariant: _,
-    hasDivider: s = !1,
-    onAccountsFilterClick: y,
-    onBackClick: h,
+    hasDivider: l = !1,
+    onAccountsFilterClick: D,
+    onBackClick: g,
     onMenuClick: c,
     showAccountFilter: R = !0,
     slotComponent: o,
-    sx: A = {},
+    sx: S = {},
     title: C = ""
   }) => {
-    const [w, { height: k, width: x }] = ge(), { onEvent: N } = fe(), {
-      actionsFlex: F,
-      containerSquareCorners: E,
-      headerHeadingLevel: j,
+    const [L, { height: E, width: y }] = J(), [j, { height: A, width: k }] = J(), { onEvent: w } = Re(), {
+      actionsFlex: B,
+      containerSquareCorners: V,
+      headerHeadingLevel: N,
       headerPaddingBottom: O,
-      headerPaddingTop: V,
-      headerPaddingX: I,
-      iconSize: Y,
-      isCompact: T,
-      isDesktop: L,
-      isViewportAbove900: t,
-      slotSx: l
-    } = Ie(x), { isCopyLoaded: p } = ie(), { common: f } = se(), {
-      config: { display_widget_headings: b }
-    } = be(), v = () => {
-      h && (h(), N(oe.WIDGET_BACK_CLICK));
+      headerPaddingTop: I,
+      headerPaddingX: G,
+      iconSize: t,
+      isCompact: i,
+      isDesktop: u,
+      isViewportAbove900: f,
+      slotSx: b
+    } = We(y), { isCopyLoaded: T } = se(), { common: v } = le(), {
+      config: { display_widget_headings: me }
+    } = Ce(), ce = () => {
+      g && (g(), w(ne.WIDGET_BACK_CLICK));
     };
-    if (u.useEffect(() => {
-      N(oe.WIDGET_SIZE_CHANGED, { height: k, width: x });
-    }, [k]), !p)
-      return /* @__PURE__ */ e(Ne, {});
-    const M = () => c && T && !t ? /* @__PURE__ */ e($, { color: "primary", onClick: c, sx: { p: 10 }, children: /* @__PURE__ */ e(D, { name: "menu_open", size: Y, sx: { transform: "rotate(180deg)" } }) }) : h ? /* @__PURE__ */ e(
+    if (p.useEffect(() => {
+      w(ne.WIDGET_SIZE_CHANGED, {
+        height: A,
+        width: k
+      });
+    }, [A, k]), !T)
+      return /* @__PURE__ */ e(Ge, {});
+    const ue = () => c && i && !f ? /* @__PURE__ */ e($, { color: "primary", onClick: c, sx: { p: 10 }, children: /* @__PURE__ */ e(x, { name: "menu_open", size: t, sx: { transform: "rotate(180deg)" } }) }) : g ? /* @__PURE__ */ e(
       $,
       {
-        "aria-label": f.back_to_dashboard,
+        "aria-label": v.back_to_dashboard,
         color: "primary",
-        onClick: v,
+        onClick: ce,
         sx: { p: 10 },
-        children: /* @__PURE__ */ e(pe, { size: 24 })
+        children: /* @__PURE__ */ e(be, { size: 24 })
       }
-    ) : null, X = a && /* @__PURE__ */ e(B, { alignItems: "center", sx: l, children: /* @__PURE__ */ e(
-      ze,
+    ) : null, X = a && /* @__PURE__ */ e(Y, { alignItems: "center", sx: b, children: /* @__PURE__ */ e(
+      Fe,
       {
         calendarActions: a,
-        dateRange: i,
+        dateRange: s,
         dateRangeVariant: _
       }
     ) });
     return /* @__PURE__ */ e(
-      ue,
+      fe,
       {
         className: r,
         elevation: 1,
-        ref: w,
-        square: E,
+        ref: L,
+        square: V,
         sx: {
           borderBottomLeftRadius: 0,
           borderBottomRightRadius: 0,
           margin: 0,
           overflowY: "auto",
           height: "100%",
-          ...A
+          ...S
         },
-        children: /* @__PURE__ */ g(de, { children: [
-          /* @__PURE__ */ g(
-            B,
+        children: /* @__PURE__ */ h(pe, { children: [
+          /* @__PURE__ */ h(
+            Y,
             {
               alignItems: "center",
               alignSelf: "stretch",
@@ -421,42 +424,42 @@ const Ie = (n) => {
               justifyContent: "space-between",
               sx: {
                 pb: O,
-                pt: V,
-                px: I
+                pt: I,
+                px: G
               },
               children: [
-                M(),
-                /* @__PURE__ */ e(B, { alignItems: "flex-start", minWidth: 0, sx: { flex: 1 }, children: b && /* @__PURE__ */ e(W, { sx: { width: "100%" }, truncate: !0, variant: j, children: C }) }),
-                !T && (o || X),
-                /* @__PURE__ */ g(
-                  B,
+                ue(),
+                /* @__PURE__ */ e(Y, { alignItems: "flex-start", minWidth: 0, sx: { flex: 1 }, children: me && /* @__PURE__ */ e(F, { sx: { width: "100%" }, truncate: !0, variant: N, children: C }) }),
+                !i && (o || X),
+                /* @__PURE__ */ h(
+                  Y,
                   {
                     alignItems: "center",
                     direction: "row",
                     justifyContent: "flex-end",
-                    sx: { flex: F, flexShrink: 0 },
+                    sx: { flex: B, flexShrink: 0 },
                     children: [
                       R && /* @__PURE__ */ e(
-                        he,
+                        _e,
                         {
                           allowedAccountTypes: d,
-                          isDesktop: L,
-                          onAccountFilterClick: y
+                          isDesktop: u,
+                          onAccountFilterClick: D
                         }
                       ),
                       n?.map((q) => {
-                        if (u.isValidElement(q))
-                          return u.cloneElement(q, { isDesktop: L });
-                        const { iconName: G, onClick: Q, label: U } = q;
-                        return L ? /* @__PURE__ */ e(
-                          H,
+                        if (p.isValidElement(q))
+                          return p.cloneElement(q, { isDesktop: u });
+                        const { iconName: H, onClick: Q, label: U } = q;
+                        return u ? /* @__PURE__ */ e(
+                          z,
                           {
                             onClick: Q,
-                            startIcon: /* @__PURE__ */ e(D, { name: G, size: Y }),
+                            startIcon: /* @__PURE__ */ e(x, { name: H, size: t }),
                             children: U
                           },
-                          G
-                        ) : /* @__PURE__ */ e($, { "aria-label": U, color: "primary", onClick: Q, children: /* @__PURE__ */ e(D, { name: G, size: Y }) }, G);
+                          H
+                        ) : /* @__PURE__ */ e($, { "aria-label": U, color: "primary", onClick: Q, children: /* @__PURE__ */ e(x, { name: H, size: t }) }, H);
                       })
                     ]
                   }
@@ -464,16 +467,16 @@ const Ie = (n) => {
               ]
             }
           ),
-          T && (o || X),
-          T && s && /* @__PURE__ */ e(ce, {}),
-          /* @__PURE__ */ e(me, { sx: { p: 0 }, children: /* @__PURE__ */ e(_e, { availableHeight: k, availableWidth: x, children: m }) })
+          i && (o || X),
+          i && l && /* @__PURE__ */ e(ge, {}),
+          /* @__PURE__ */ e(he, { ref: j, sx: { p: 0 }, children: /* @__PURE__ */ e(xe, { availableHeight: E, availableWidth: y, children: m }) })
         ] })
       }
     );
   }
 );
 export {
-  Ge as D,
-  Yt as W,
-  Ie as u
+  ze as D,
+  wt as W,
+  We as u
 };

package/dist/accounts/index.es.js

@@ -62,7 +62,7 @@ import { C as s3 } from "../ConnectionsDrawer-CtfPXk0M.mjs";
 import { u as V1 } from "../useScreenSize-mWpmnh5w.mjs";
 import { u as o1 } from "../useWidgetLoadTimer-CJb-RELP.mjs";
 import { L as i1 } from "../Loader-CxeBwuPG.mjs";
-import { W as l3 } from "../WidgetContainer-BU3nCHZo.mjs";
+import { W as l3 } from "../WidgetContainer-CmbU4CBH.mjs";
 import { M as A1 } from "../MiniWidgetContainer-BdPiUU-u.mjs";
 const r3 = (t, o) => {
   const n = g1.includes(o) ? S1(t) : [], c = H1.includes(o) ? T1(t) : [], i = v1.includes(o) ? D1(t) : [];

package/dist/budgets/index.es.js

@@ -47,7 +47,7 @@ import { subDays as rt } from "date-fns/subDays";
 import st from "@mui/material/IconButton";
 import { M as it } from "../ManageIncome-D1yBODQi.mjs";
 import { u as je } from "../useWidgetLoadTimer-CJb-RELP.mjs";
-import { W as ct } from "../WidgetContainer-BU3nCHZo.mjs";
+import { W as ct } from "../WidgetContainer-CmbU4CBH.mjs";
 import { g as lt, a as dt } from "../BudgetUtil-Bg2AQJpQ.mjs";
 import { M as ut } from "../MiniWidgetContainer-BdPiUU-u.mjs";
 import { b as mt } from "../CurrencyDialog-DumQCTPO.mjs";

package/dist/cashflow/index.es.js

@@ -38,7 +38,7 @@ import { M as rt, S as st, i as ct, b as we, c as lt } from "../ManageIncome-D1y
 import { D as He } from "../Drawer-BXqqBMxg.mjs";
 import { subDays as We } from "date-fns/subDays";
 import { endOfToday as dt } from "date-fns/endOfToday";
-import { W as mt } from "../WidgetContainer-BU3nCHZo.mjs";
+import { W as mt } from "../WidgetContainer-CmbU4CBH.mjs";
 import { A as X } from "../Account-BaJmiJAG.mjs";
 import { A as Se } from "../Analytics-CzGzz_sE.mjs";
 import { formatISO as ut } from "date-fns/formatISO";

package/dist/common/index.es.js

@@ -4,7 +4,7 @@ import { f as j, b as V, a as K, c as Z, g as J, d as X } from "../NumberFormatt
 import { C as rr, a as er, b as or } from "../CurrencyDialog-DumQCTPO.mjs";
 import { C as ar } from "../CurrencyInput-adTIRtL3.mjs";
 import { D as nr, S as ir } from "../Select-BFt-HD-L.mjs";
-import { D as lr, W as mr, u as dr } from "../WidgetContainer-BU3nCHZo.mjs";
+import { D as lr, W as mr, u as dr } from "../WidgetContainer-CmbU4CBH.mjs";
 import { D as fr } from "../Dialog-Bvd2n8hz.mjs";
 import { D as yr } from "../Donut-SzzfZDHF.mjs";
 import { D as xr } from "../Drawer-BXqqBMxg.mjs";

package/dist/debts/index.es.js

@@ -42,7 +42,7 @@ import it from "@mui/material/ListItem";
 import lt from "@mui/material/Popover";
 import { u as st } from "../useWidgetLoadTimer-CJb-RELP.mjs";
 import { L as ct } from "../Loader-CxeBwuPG.mjs";
-import { W as dt } from "../WidgetContainer-BU3nCHZo.mjs";
+import { W as dt } from "../WidgetContainer-CmbU4CBH.mjs";
 import { E as pt } from "../EmptyState-CJUDc3kD.mjs";
 import { C as ut } from "../ConnectDrawer-Cnjr3Ddg.mjs";
 function ht(r, n, o = 0) {

package/dist/finstrong/index.es.js

@@ -78,7 +78,7 @@ import So from "@mui/material/Accordion";
 import vo from "@mui/material/AccordionDetails";
 import wo from "@mui/material/AccordionSummary";
 import { u as ko } from "../useWidgetLoadTimer-CJb-RELP.mjs";
-import { W as Mo } from "../WidgetContainer-BU3nCHZo.mjs";
+import { W as Mo } from "../WidgetContainer-CmbU4CBH.mjs";
 const Ae = {
   creditScore: {
     poor: 600,

package/dist/goals/index.es.js

@@ -51,7 +51,7 @@ import { D as pt } from "../Dialog-Bvd2n8hz.mjs";
 import { u as Me } from "../useWidgetLoadTimer-CJb-RELP.mjs";
 import { A as $ } from "../Analytics-CzGzz_sE.mjs";
 import { L as Le } from "../Loader-CxeBwuPG.mjs";
-import { W as ht } from "../WidgetContainer-BU3nCHZo.mjs";
+import { W as ht } from "../WidgetContainer-CmbU4CBH.mjs";
 import { E as bt } from "../EmptyState-CJUDc3kD.mjs";
 import ft from "@mui/material/Box";
 import { useTheme as gt } from "@mui/material/styles";

package/dist/help/index.es.js

@@ -4,7 +4,7 @@ import { H as s } from "../Help-DJ8PrVHX.mjs";
 import { b as a } from "../hooks-BaO_gOI6.mjs";
 import { u as p } from "../useWidgetLoadTimer-CJb-RELP.mjs";
 import { L as d } from "../Loader-CxeBwuPG.mjs";
-import { W as f } from "../WidgetContainer-BU3nCHZo.mjs";
+import { W as f } from "../WidgetContainer-CmbU4CBH.mjs";
 const L = m(({ onBackClick: e, onMenuClick: i, sx: t }) => {
   const { isInitialized: o } = a();
   return p({

package/dist/investments/index.es.js

@@ -38,7 +38,7 @@ import { DataGridPro as $e } from "@mui/x-data-grid-pro";
 import { Stack as Pe } from "@mui/material";
 import { L as De } from "../Loader-CxeBwuPG.mjs";
 import { u as qe } from "../useWidgetLoadTimer-CJb-RELP.mjs";
-import { W as Ke } from "../WidgetContainer-BU3nCHZo.mjs";
+import { W as Ke } from "../WidgetContainer-CmbU4CBH.mjs";
 import { A as Ye } from "../Account-BaJmiJAG.mjs";
 import { E as Qe } from "../EmptyState-CJUDc3kD.mjs";
 const me = ({ sx: t = {} }) => {

package/dist/networth/index.es.js

@@ -32,7 +32,7 @@ import xe from "@mui/material/Collapse";
 import K from "@mui/material/ListItemIcon";
 import { g as U } from "../NetWorthUtils-DilGN1nW.mjs";
 import { D as V } from "../Drawer-BXqqBMxg.mjs";
-import { W as ge } from "../WidgetContainer-BU3nCHZo.mjs";
+import { W as ge } from "../WidgetContainer-CmbU4CBH.mjs";
 import { E as ye } from "../EmptyState-CJUDc3kD.mjs";
 const Ce = ({ amount: t, copy: s, trendValue: i }) => {
   const n = i > 0, o = i === 0 ? "trending_flat" : n ? "trending_up" : "trending_down";

package/dist/recurringtransactions/index.es.js

@@ -56,7 +56,7 @@ import { S as Le } from "../StatusBar-CPfSXe80.mjs";
 import { S as ve } from "../SkeletonLoader-BaNboJjD.mjs";
 import { u as oe } from "../useWidgetLoadTimer-CJb-RELP.mjs";
 import { L as ae } from "../Loader-CxeBwuPG.mjs";
-import { W as ht } from "../WidgetContainer-BU3nCHZo.mjs";
+import { W as ht } from "../WidgetContainer-CmbU4CBH.mjs";
 import { M as ft } from "../MiniWidgetContainer-BdPiUU-u.mjs";
 import { u as xt } from "../useDimensions-CeDR9V8N.mjs";
 import { M as bt } from "../MicroWidgetContainer-CfKdQfhi.mjs";

package/dist/settings/index.es.js

@@ -42,7 +42,7 @@ import { ChevronRight as Le } from "@mxenabled/mx-icons";
 import { D as Be } from "../Drawer-BXqqBMxg.mjs";
 import { u as ne } from "../useWidgetLoadTimer-CJb-RELP.mjs";
 import { H as He } from "../Help-DJ8PrVHX.mjs";
-import { W as q } from "../WidgetContainer-BU3nCHZo.mjs";
+import { W as q } from "../WidgetContainer-CmbU4CBH.mjs";
 const Oe = ({ availableWidth: t, handleOnLeavClick: r }) => {
   const i = L(), { common: o, settings: n } = w(), { isDesktop: u, isMobile: s, isSmallMobile: a, isTablet: l } = O(t), { config: b } = G(), { updateUser: _ } = E(), { user: d } = Ce(), [p, k] = m.useState({
     first_name: d.first_name,

package/dist/spending/index.es.js

@@ -31,7 +31,7 @@ import { D as tt } from "../Drawer-BXqqBMxg.mjs";
 import { C as w } from "../Category-DEKZGLYe.mjs";
 import { parseISO as et } from "date-fns/parseISO";
 import { A as nt } from "../Analytics-CzGzz_sE.mjs";
-import { W as It } from "../WidgetContainer-BU3nCHZo.mjs";
+import { W as It } from "../WidgetContainer-CmbU4CBH.mjs";
 const G = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y, { direction: "column", children: [
   /* @__PURE__ */ t(T, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: d }),
   /* @__PURE__ */ t(T, { variant: "caption", children: k(n, o === "mini" ? "0,0" : "0,0.00") })

package/dist/transactions/index.es.js

@@ -37,7 +37,7 @@ import { u as ut } from "../useAriaLive-MkYebyUR.mjs";
 import { S as mt } from "../SkeletonLoader-BaNboJjD.mjs";
 import { u as _t } from "../useScreenSize-mWpmnh5w.mjs";
 import { u as pt } from "../useWidgetLoadTimer-CJb-RELP.mjs";
-import { W as gt } from "../WidgetContainer-BU3nCHZo.mjs";
+import { W as gt } from "../WidgetContainer-CmbU4CBH.mjs";
 import { S as ht } from "../SearchBox-Cpgu_gdO.mjs";
 import { D as te } from "../Drawer-BXqqBMxg.mjs";
 const ft = (t) => /* @__PURE__ */ m(y, { tabIndex: t.tabIndex, variant: "body2", children: [

package/dist/trends/index.es.js

@@ -39,7 +39,7 @@ import { T as dt } from "../TransactionDetails-DctXr07p.mjs";
 import { D as Pe } from "../Drawer-BXqqBMxg.mjs";
 import { u as Ie } from "../useWidgetLoadTimer-CJb-RELP.mjs";
 import { L as Le } from "../Loader-CxeBwuPG.mjs";
-import { W as ut } from "../WidgetContainer-BU3nCHZo.mjs";
+import { W as ut } from "../WidgetContainer-CmbU4CBH.mjs";
 import { L as Ve } from "../LineChart-CejWS_rh.mjs";
 import { M as Qt } from "../MiniWidgetContainer-BdPiUU-u.mjs";
 import { subMonths as qt } from "date-fns";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "9.0.1",
+  "version": "9.0.2",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",