@mx-cartographer/experiences 9.0.17-alpha.al0 → 9.0.17

package/dist/{ViewMoreMicroCard-Dxghxphh.mjs → ViewMoreMicroCard-fnwE0hqd.mjs}

@@ -1,41 +1,41 @@
-import { jsx as o, jsxs as w, Fragment as Te } from "react/jsx-runtime";
-import I, { useEffect as re, useState as ie } from "react";
-import { observer as U } from "mobx-react-lite";
+import { jsx as o, jsxs as N, Fragment as we } from "react/jsx-runtime";
+import E, { useEffect as le, useState as ce } from "react";
+import { observer as z } from "mobx-react-lite";
 import k from "@mui/material/Stack";
-import ke from "@mui/material/Button";
-import { CategoryIcon as Ue, MerchantLogo as ze, InstitutionLogo as Ke, P as pe, Text as me, H3 as Fe } from "@mxenabled/mxui";
-import { Close as He, ChevronLeft as $e, ChevronRight as Re } from "@mxenabled/mx-icons";
-import { L as je } from "./Loader-CxeBwuPG.mjs";
-import ae from "@mui/material/Box";
-import ue from "@mui/material/IconButton";
+import He from "@mui/material/Button";
+import { CategoryIcon as $e, MerchantLogo as je, InstitutionLogo as Ye, P as he, Text as ge, H3 as Xe } from "@mxenabled/mxui";
+import { Close as Ze, ChevronLeft as Qe, ChevronRight as Ne } from "@mxenabled/mx-icons";
+import { L as qe } from "./Loader-CxeBwuPG.mjs";
+import de from "@mui/material/Box";
+import Ie from "@mui/material/IconButton";
 import { useTheme as P, alpha as s } from "@mui/material/styles";
-import { useInView as Oe } from "react-intersection-observer";
+import { useInView as Me } from "react-intersection-observer";
 import { B as c } from "./BeatMaterialIcon-1KOfRZrA.mjs";
-import { C as Ye } from "./Category-DEKZGLYe.mjs";
-import { b as Xe } from "./Localization-DnoVyBNK.mjs";
-import Ze from "@mui/material/CircularProgress";
-import { makeAutoObservable as se, runInAction as We } from "mobx";
-import { a as Qe, u as qe, b as Je } from "./Analytics-CkYXKvco.mjs";
-import { G as Ce, B as he } from "./GlobalCopyApi-wcnDUzMV.mjs";
-import { u as et } from "./useWidgetLoadTimer-B0tB-yzL.mjs";
-import { Card as tt, CardActionArea as ot, Box as nt, IconButton as it, Stack as F, Button as ge } from "@mui/material";
-class rt {
-  copyApi = new Ce("/", "");
+import { C as Je } from "./Category-DEKZGLYe.mjs";
+import { b as et } from "./Localization-DnoVyBNK.mjs";
+import tt from "@mui/material/CircularProgress";
+import { makeAutoObservable as _e, runInAction as ve } from "mobx";
+import { a as ot, u as nt, b as it } from "./Analytics-CkYXKvco.mjs";
+import { G as Ee, B as ye } from "./GlobalCopyApi-wcnDUzMV.mjs";
+import { u as rt } from "./useWidgetLoadTimer-B0tB-yzL.mjs";
+import { Card as at, CardActionArea as st, Box as ct, IconButton as lt, Stack as K, Button as fe } from "@mui/material";
+class dt {
+  copyApi = new Ee("/", "");
   copyObject = {};
   namespace = "experiences";
   translationKey = "micro_insights";
   constructor() {
-    se(this);
+    _e(this);
   }
   // NOTE: Not sure if this is special case, but other stores have this deprecation todo
   // DEPRECATED: Initialize api in constructor and use loadCopy instead
   // TODO: Remove this function
   initialize = async (e, n) => {
-    this.copyApi = new Ce(e, n), await this.loadCopy();
+    this.copyApi = new Ee(e, n), await this.loadCopy();
   };
   loadCopy = async () => {
     const e = await this.copyApi.getGlobalCopy(this.namespace, this.translationKey);
-    We(() => {
+    ve(() => {
       this.copyObject = e[this.translationKey];
     });
   };
@@ -49,7 +49,7 @@ class rt {
     return this.copyObject.zero_state;
   }
 }
-const ce = {
+const pe = {
   BillAmountNotStandard: "BillAmountNotStandard",
   CanadianUpcomingDeadlineAlert: "CanadianUpcomingDeadlineAlert",
   DuplicatePaymentV2: "DuplicatePaymentV2",
@@ -66,42 +66,42 @@ const ce = {
   WeeklyNewMerchantsV2: "WeeklyNewMerchantsV2",
   MonthlySpendComparison: "MonthlySpendComparison",
   MonthlySpendToIncomeComparison: "MonthlySpendToIncomeComparison"
-}, O = window?.app?.clientConfig?.microwidget_instance_id || "", Ie = {
+}, O = window?.app?.clientConfig?.microwidget_instance_id || "", Ae = {
   INSIGHTS_MICRO_WIDGET: "/micro-insights-carousel"
-}, Ne = (t) => `on${t}Click`, we = (t) => `on${t}View`, Me = (t) => `on${t}ViewFirstTime`, le = (t) => t.replace(/([a-z])([A-Z])/g, "$1 $2"), at = () => Object.values(ce).reduce(
+}, be = (t) => `on${t}Click`, Le = (t) => `on${t}View`, xe = (t) => `on${t}ViewFirstTime`, me = (t) => t.replace(/([a-z])([A-Z])/g, "$1 $2"), _t = () => Object.values(pe).reduce(
   (t, e) => ({
     ...t,
-    [Ne(e)]: {
-      action: v.MICRO_BEAT_CLICKED,
+    [be(e)]: {
+      action: L.MICRO_BEAT_CLICKED,
       category: b.BEAT_INTERACTION,
-      label: le(e),
+      label: me(e),
       value: O
     }
   }),
   {}
-), st = () => Object.values(ce).reduce(
+), pt = () => Object.values(pe).reduce(
   (t, e) => ({
     ...t,
-    [we(e)]: {
-      action: v.MICRO_BEAT_DISPLAYED,
+    [Le(e)]: {
+      action: L.MICRO_BEAT_DISPLAYED,
       category: b.BEAT_INTERACTION,
-      label: le(e),
+      label: me(e),
       value: O
     }
   }),
   {}
-), ct = () => Object.values(ce).reduce(
+), mt = () => Object.values(pe).reduce(
   (t, e) => ({
     ...t,
-    [Me(e)]: {
-      action: v.MICRO_BEAT_DISPLAYED_FIRST_TIME,
+    [xe(e)]: {
+      action: L.MICRO_BEAT_DISPLAYED_FIRST_TIME,
       category: b.BEAT_INTERACTION,
-      label: le(e),
+      label: me(e),
       value: O
     }
   }),
   {}
-), L = {
+), v = {
   CAROUSEL_CONTROL: "Carousel Control",
   MICRO_WIDGET: "Micro Widget",
   VIEW_MORE: "View More"
@@ -115,9 +115,9 @@ const ce = {
   ON_CAROUSEL_FORWARD_SWIPE: "onCarouselForwardSwipe",
   ON_NO_RELEVANT_INSIGHTS_CLICKED: "onNoRelevantInsightsClicked",
   ON_VIEW_MORE_CLICKED: "onViewMoreClicked"
-}, Le = {
+}, De = {
   ON_VIEW_MORE_VIEWED: "onViewMoreCardView"
-}, v = {
+}, L = {
   CONTROL_BACKWARD: "Control Backward",
   CONTROL_FORWARD: "Control Forward",
   MICRO_BEAT_CLICKED: "Micro Beat Clicked",
@@ -129,91 +129,91 @@ const ce = {
   MICRO_WIDGET_CAROUSEL: "Micro Widget Carousel",
   MICRO_WIDGET_CAROUSEL_ZERO_STATE: "Micro Widget Carousel Zero State",
   MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS: "Micro Widget Carousel No Relevant Insights"
-}, Ee = {
+}, Se = {
   [B.MICRO_WIDGET_CAROUSEL]: {
-    label: L.MICRO_WIDGET,
+    label: v.MICRO_WIDGET,
     name: B.MICRO_WIDGET_CAROUSEL,
-    path: Ie.INSIGHTS_MICRO_WIDGET,
+    path: Ae.INSIGHTS_MICRO_WIDGET,
     value: O
   },
   // zero state
   [B.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
-    label: L.MICRO_WIDGET,
+    label: v.MICRO_WIDGET,
     name: B.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
-    path: Ie.INSIGHTS_MICRO_WIDGET,
+    path: Ae.INSIGHTS_MICRO_WIDGET,
     value: O
   },
   // no relevant cards
   [B.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
-    label: L.MICRO_WIDGET,
+    label: v.MICRO_WIDGET,
     name: B.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
     path: "/micro-widget",
     value: O
   }
-}, fe = {
+}, Te = {
   // carousel control interaction events - clicks and swipes
   [W.ON_CAROUSEL_BACK_CLICK]: {
-    action: v.CONTROL_BACKWARD,
+    action: L.CONTROL_BACKWARD,
     category: b.MICRO_WIDGET_INTERACTION,
-    label: L.CAROUSEL_CONTROL,
+    label: v.CAROUSEL_CONTROL,
     value: O
   },
   [W.ON_CAROUSEL_FORWARD_CLICK]: {
-    action: v.CONTROL_FORWARD,
+    action: L.CONTROL_FORWARD,
     category: b.MICRO_WIDGET_INTERACTION,
-    label: L.CAROUSEL_CONTROL,
+    label: v.CAROUSEL_CONTROL,
     value: O
   },
   [W.ON_CAROUSEL_BACK_SWIPE]: {
-    action: v.SWIPE_BACKWARD,
+    action: L.SWIPE_BACKWARD,
     category: b.MICRO_WIDGET_INTERACTION,
-    label: L.CAROUSEL_CONTROL,
+    label: v.CAROUSEL_CONTROL,
     value: O
   },
   [W.ON_CAROUSEL_FORWARD_SWIPE]: {
-    action: v.SWIPE_FORWARD,
+    action: L.SWIPE_FORWARD,
     category: b.MICRO_WIDGET_INTERACTION,
-    label: L.CAROUSEL_CONTROL,
+    label: v.CAROUSEL_CONTROL,
     value: O
   },
   // read more card events
   [W.ON_VIEW_MORE_CLICKED]: {
-    action: v.MICRO_BEAT_CLICKED,
+    action: L.MICRO_BEAT_CLICKED,
     category: b.BEAT_INTERACTION,
-    label: L.VIEW_MORE,
+    label: v.VIEW_MORE,
     value: O
   },
-  [Le.ON_VIEW_MORE_VIEWED]: {
-    action: v.MICRO_BEAT_DISPLAYED,
+  [De.ON_VIEW_MORE_VIEWED]: {
+    action: L.MICRO_BEAT_DISPLAYED,
     category: b.BEAT_INTERACTION,
-    label: L.VIEW_MORE,
+    label: v.VIEW_MORE,
     value: O
   },
-  ...at(),
-  ...st(),
-  ...ct()
-}, ye = async (t, e) => !e || !fe[t] ? null : e.sendAnalyticEvent(fe[t]).then((n) => n).catch((n) => {
+  ..._t(),
+  ...pt(),
+  ...mt()
+}, Re = async (t, e) => !e || !Te[t] ? null : e.sendAnalyticEvent(Te[t]).then((n) => n).catch((n) => {
   throw n;
-}), Ae = async (t, e) => !e || !Ee[t] ? null : e.sendAnalyticsPageview(Ee[t]).then((n) => n).catch((n) => {
+}), Oe = async (t, e) => !e || !Se[t] ? null : e.sendAnalyticsPageview(Se[t]).then((n) => n).catch((n) => {
   throw n;
 });
-class lt {
-  onAnalyticEvent = ye;
-  onAnalyticPageView = Ae;
-  beatApi = new he("/", "");
+class ut {
+  onAnalyticEvent = Re;
+  onAnalyticPageView = Oe;
+  beatApi = new ye("/", "");
   constructor() {
-    se(this);
+    _e(this);
   }
   initialize = async (e, n, i) => {
     this.onAnalyticEvent = (a, l) => {
-      ye(a, l).then((r) => r).catch((r) => {
+      Re(a, l).then((r) => r).catch((r) => {
         throw r.status === 401 && i(), r;
       });
     }, this.onAnalyticPageView = (a, l) => {
-      Ae(a, l).then((r) => r).catch((r) => {
+      Oe(a, l).then((r) => r).catch((r) => {
         throw r.status === 401 && i(), r;
       });
-    }, this.beatApi = new he(e, n);
+    }, this.beatApi = new ye(e, n);
   };
   updateBeat = async (e) => {
     this.beatApi.updateBeat(e);
@@ -222,7 +222,7 @@ class lt {
     this.beatApi.updateOffer(e);
   };
 }
-class dt {
+class Ct {
   copyStore;
   endpoint = "/";
   insightsMicroWidgetStore;
@@ -230,28 +230,28 @@ class dt {
   token = "";
   isInitialized = !1;
   constructor() {
-    this.copyStore = new rt(), this.insightsMicroWidgetStore = new lt(), se(this);
+    this.copyStore = new dt(), this.insightsMicroWidgetStore = new ut(), _e(this);
   }
   initialize = async (e, n, i) => {
     await this.copyStore.initialize(e, n), await this.insightsMicroWidgetStore.initialize(e, n, i);
-    const a = await Qe(e, n, "1.0.0", "Micro Insights Carousel");
-    We(() => {
+    const a = await ot(e, n, "1.0.0", "Micro Insights Carousel");
+    ve(() => {
       this.session = a, this.isInitialized = !0;
     });
   };
 }
-const H = I.createContext(null), _t = ({
+const F = E.createContext(null), ht = ({
   onEvent: t,
   onPageview: e,
   store: n,
   children: i
-}) => /* @__PURE__ */ o(H.Provider, { value: { onEvent: t, onPageview: e, store: n, children: i }, children: i }), pt = ({ beat: t }) => {
-  const { primary_category_guid: e, category_guids: n } = t, i = e || n?.[0] || Ye.UNCATEGORIZED;
-  return /* @__PURE__ */ o(Ue, { categoryGuid: i, size: 32, sx: { minWidth: 32 } });
-}, mt = ({ beat: t }) => {
+}) => /* @__PURE__ */ o(F.Provider, { value: { onEvent: t, onPageview: e, store: n, children: i }, children: i }), gt = ({ beat: t }) => {
+  const { primary_category_guid: e, category_guids: n } = t, i = e || n?.[0] || Je.UNCATEGORIZED;
+  return /* @__PURE__ */ o($e, { categoryGuid: i, size: 32, sx: { minWidth: 32 } });
+}, It = ({ beat: t }) => {
   const { category_guids: e, merchant_guids: n, primary_category_guid: i, primary_merchant_guid: a } = t;
   return /* @__PURE__ */ o(
-    ze,
+    je,
     {
       categoryGuid: i || e && e[0] || "",
       merchantGuid: a || n[0],
@@ -263,27 +263,27 @@ const H = I.createContext(null), _t = ({
       }
     }
   );
-}, ut = (t) => t ? t.data ? t.data.map((e) => {
+}, Et = (t) => t ? t.data ? t.data.map((e) => {
   const n = {};
   return t.names?.map((i, a) => {
     n[i] = e[a];
   }), n;
-}) : [] : [], q = "primary", be = "success", ve = "error", De = (t) => {
-  const e = ut(t), n = Math.floor(e.length / 2);
+}) : [] : [], q = "primary", Be = "success", Pe = "error", Ve = (t) => {
+  const e = Et(t), n = Math.floor(e.length / 2);
   if (n === 0 || n === e.length) return q;
   const i = e[0]?.amount, a = e[n]?.amount;
-  return i == null || a == null ? q : i > a ? ve : i < a ? be : q;
-}, Ct = (t, e) => t < e ? be : t > e ? ve : q, ht = ({ beat: t }) => {
-  const e = P(), n = De(t.data_series), i = e.palette[n].main;
+  return i == null || a == null ? q : i > a ? Pe : i < a ? Be : q;
+}, yt = (t, e) => t < e ? Be : t > e ? Pe : q, ft = ({ beat: t }) => {
+  const e = P(), n = Ve(t.data_series), i = e.palette[n].main;
   return /* @__PURE__ */ o(c, { bgColor: s(i, 0.15), iconColor: n, name: "bar_chart" });
-}, gt = ({ beat: t }) => {
+}, At = ({ beat: t }) => {
   const e = P(), n = t.payload?.average_spend || 0;
   let i = 0;
   if (t.data_series?.data && t.data_series.data.length > 0) {
     const r = (t.data_series.names || []).indexOf("amount");
     r !== -1 && (i = t.data_series.data[0][r] || 0);
   }
-  const a = Ct(i, n);
+  const a = yt(i, n);
   return /* @__PURE__ */ o(
     c,
     {
@@ -292,8 +292,8 @@ const H = I.createContext(null), _t = ({
       name: "timeline"
     }
   );
-}, It = ({ beat: t }) => {
-  const e = P(), n = De(t.data_series), i = e.palette[n].main;
+}, St = ({ beat: t }) => {
+  const e = P(), n = Ve(t.data_series), i = e.palette[n].main;
   return /* @__PURE__ */ o(
     c,
     {
@@ -303,11 +303,11 @@ const H = I.createContext(null), _t = ({
       name: "area_chart"
     }
   );
-}, Et = ({ beat: t }) => /* @__PURE__ */ o(Ke, { alt: t.institutionName || "", institutionGuid: t.institutionGuid || "" }), ft = {
+}, Tt = ({ beat: t }) => /* @__PURE__ */ o(Ye, { alt: t.institutionName || "", institutionGuid: t.institutionGuid || "" }), Rt = {
   0: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "error" }),
-  1: (t) => /* @__PURE__ */ o(pt, { beat: t }),
-  2: (t) => /* @__PURE__ */ o(mt, { beat: t }),
-  3: (t) => /* @__PURE__ */ o(ht, { beat: t }),
+  1: (t) => /* @__PURE__ */ o(gt, { beat: t }),
+  2: (t) => /* @__PURE__ */ o(It, { beat: t }),
+  3: (t) => /* @__PURE__ */ o(ft, { beat: t }),
   4: (t, e) => /* @__PURE__ */ o(
     c,
     {
@@ -340,7 +340,7 @@ const H = I.createContext(null), _t = ({
       sx: { color: "text.primary" }
     }
   ),
-  12: (t) => /* @__PURE__ */ o(It, { beat: t }),
+  12: (t) => /* @__PURE__ */ o(St, { beat: t }),
   13: () => /* @__PURE__ */ o(
     c,
     {
@@ -421,7 +421,7 @@ const H = I.createContext(null), _t = ({
   ),
   27: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "directions_car" }),
   28: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "contract" }),
-  29: (t) => /* @__PURE__ */ o(gt, { beat: t }),
+  29: (t) => /* @__PURE__ */ o(At, { beat: t }),
   30: (t, e) => /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "calendar_month" }),
   31: (t, e) => /* @__PURE__ */ o(
     c,
@@ -440,38 +440,38 @@ const H = I.createContext(null), _t = ({
       name: "storefront"
     }
   ),
-  34: (t) => /* @__PURE__ */ o(Et, { beat: t })
-}, yt = ({ beat: t }) => {
-  const e = P(), { icon_type: n } = t, i = n != null ? ft[n] : null;
+  34: (t) => /* @__PURE__ */ o(Tt, { beat: t })
+}, Ot = ({ beat: t }) => {
+  const e = P(), { icon_type: n } = t, i = n != null ? Rt[n] : null;
   return i ? i(t, e) : /* @__PURE__ */ o(c, { bgColor: s(e.palette.primary.main, 0.15), name: "error" });
-}, D = () => {
-  const t = I.useContext(H);
+}, x = () => {
+  const t = E.useContext(F);
   if (!t)
     throw new Error("useCopyStore() must be used within the InsightsMicroWidgetDataProvider");
   return t.store.copyStore;
-}, At = () => {
-  const t = I.useContext(H);
+}, Wt = () => {
+  const t = E.useContext(F);
   if (!t?.store?.insightsMicroWidgetStore)
     throw new Error(
       "useInsightsMicroWidgetStore() must be used within the InsightsMicroWidgetDataProvider"
     );
   return t.store.insightsMicroWidgetStore;
-}, $ = () => {
-  const t = I.useContext(H);
+}, H = () => {
+  const t = E.useContext(F);
   if (!t)
     throw new Error("useEvent() must be used within the InsightsMicroWidgetDataProvider");
   return { onEvent: t.onEvent };
-}, xe = () => {
-  const t = I.useContext(H);
+}, Ge = () => {
+  const t = E.useContext(F);
   if (!t)
     throw new Error("usePageview() must be used within the InsightsMicroWidgetDataProvider");
   return { onPageview: t.onPageview };
-}, St = {
+}, wt = {
   LARGE: 180,
   STANDARD: 154,
   XLARGE: 200,
   XXLARGE: 248
-}, Tt = 50, Be = 1, J = I.forwardRef(
+}, Nt = 50, ke = 1, J = E.forwardRef(
   function({
     ariaLabel: e,
     closeAriaLabel: n,
@@ -479,43 +479,43 @@ const H = I.createContext(null), _t = ({
     elevation: a,
     icon: l,
     isActiveCard: r,
-    heightOverrides: u,
+    heightOverrides: m,
     onClose: C,
-    onCardClick: E,
-    onPrimaryAction: h,
+    onCardClick: h,
+    onPrimaryAction: g,
     onSecondaryAction: d,
     primaryActionText: _,
     secondaryActionText: p,
-    title: g,
+    title: I,
     variant: y,
     widthOverrides: S,
-    ...N
+    ...w
   }, T) {
-    const A = !!(h && _), R = /* @__PURE__ */ w(Te, { children: [
+    const f = !!(g && _), R = /* @__PURE__ */ N(we, { children: [
       C && /* @__PURE__ */ o(
-        it,
+        lt,
         {
           "aria-label": n,
-          onClick: (m) => {
-            m.stopPropagation(), C?.();
+          onClick: (u) => {
+            u.stopPropagation(), C?.();
           },
-          onMouseDown: (m) => {
-            m.stopPropagation();
+          onMouseDown: (u) => {
+            u.stopPropagation();
           },
-          onTouchStart: (m) => {
-            m.stopPropagation();
+          onTouchStart: (u) => {
+            u.stopPropagation();
           },
           sx: { minHeight: 40, minWidth: 40, position: "absolute", right: 4, top: 4 },
-          children: /* @__PURE__ */ o(He, {})
+          children: /* @__PURE__ */ o(Ze, {})
         }
       ),
-      /* @__PURE__ */ w(F, { sx: { gap: 6, height: "100%", justifyContent: "space-between" }, children: [
-        /* @__PURE__ */ w(F, { sx: { flexDirection: "row", gap: 12 }, children: [
+      /* @__PURE__ */ N(K, { sx: { gap: 6, height: "100%", justifyContent: "space-between" }, children: [
+        /* @__PURE__ */ N(K, { sx: { flexDirection: "row", gap: 12 }, children: [
           l && l,
-          /* @__PURE__ */ w(F, { sx: { gap: 6 }, children: [
-            /* @__PURE__ */ o(F, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: /* @__PURE__ */ o(pe, { bold: !0, sx: { lineHeight: "16px" }, variant: "body1", children: g }) }),
+          /* @__PURE__ */ N(K, { sx: { gap: 6 }, children: [
+            /* @__PURE__ */ o(K, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: /* @__PURE__ */ o(he, { bold: !0, sx: { lineHeight: "16px" }, variant: "body1", children: I }) }),
             /* @__PURE__ */ o(
-              pe,
+              he,
               {
                 dangerouslySetInnerHTML: { __html: i },
                 sx: {
@@ -523,7 +523,7 @@ const H = I.createContext(null), _t = ({
                   overflow: "hidden",
                   textOverflow: "ellipsis",
                   WebkitBoxOrient: "vertical",
-                  WebkitLineClamp: A ? 2 : 3,
+                  WebkitLineClamp: f ? 2 : 3,
                   "& .bold-copy": {
                     fontWeight: "bold",
                     fontFamily: "inherit"
@@ -534,8 +534,8 @@ const H = I.createContext(null), _t = ({
             )
           ] })
         ] }),
-        A && /* @__PURE__ */ w(
-          F,
+        f && /* @__PURE__ */ N(
+          K,
           {
             sx: {
               alignItems: "center",
@@ -545,40 +545,40 @@ const H = I.createContext(null), _t = ({
               pl: l ? 36 : 0
             },
             children: [
-              A && /* @__PURE__ */ o(
-                ge,
+              f && /* @__PURE__ */ o(
+                fe,
                 {
-                  onClick: (m) => {
-                    m.stopPropagation(), h?.();
+                  onClick: (u) => {
+                    u.stopPropagation(), g?.();
                   },
-                  onMouseDown: (m) => {
-                    m.stopPropagation();
+                  onMouseDown: (u) => {
+                    u.stopPropagation();
                   },
-                  onTouchStart: (m) => {
-                    m.stopPropagation();
+                  onTouchStart: (u) => {
+                    u.stopPropagation();
                   },
                   size: "small",
                   sx: { px: 8, ml: l ? 0 : -8 },
                   variant: "text",
-                  children: /* @__PURE__ */ o(me, { bold: !0, variant: "body2", children: _ })
+                  children: /* @__PURE__ */ o(ge, { bold: !0, variant: "body2", children: _ })
                 }
               ),
               !!(d && p) && /* @__PURE__ */ o(
-                ge,
+                fe,
                 {
-                  onClick: (m) => {
-                    m.stopPropagation(), d?.();
+                  onClick: (u) => {
+                    u.stopPropagation(), d?.();
                   },
-                  onMouseDown: (m) => {
-                    m.stopPropagation();
+                  onMouseDown: (u) => {
+                    u.stopPropagation();
                   },
-                  onTouchStart: (m) => {
-                    m.stopPropagation();
+                  onTouchStart: (u) => {
+                    u.stopPropagation();
                   },
                   size: "small",
                   sx: { px: 8 },
                   variant: "text",
-                  children: /* @__PURE__ */ o(me, { bold: !0, sx: { color: "text.secondary" }, variant: "body2", children: p })
+                  children: /* @__PURE__ */ o(ge, { bold: !0, sx: { color: "text.secondary" }, variant: "body2", children: p })
                 }
               )
             ]
@@ -587,7 +587,7 @@ const H = I.createContext(null), _t = ({
       ] })
     ] });
     return /* @__PURE__ */ o(
-      tt,
+      at,
       {
         "aria-hidden": !r,
         "aria-label": e,
@@ -596,20 +596,20 @@ const H = I.createContext(null), _t = ({
         role: "group",
         sx: {
           backgroundColor: "background.paper",
-          height: u ? "100%" : 120,
+          height: m ? "100%" : 120,
           minWidth: S ? `${S}px` : "100%",
           position: "relative",
           my: 1,
           borderRadius: 2
         },
-        tabIndex: E || !r ? -1 : 0,
+        tabIndex: h || !r ? -1 : 0,
         variant: y,
-        ...N,
-        children: E ? /* @__PURE__ */ o(
-          ot,
+        ...w,
+        children: h ? /* @__PURE__ */ o(
+          st,
           {
             component: "div",
-            onClick: E,
+            onClick: h,
             sx: {
               pb: 8,
               pt: 16,
@@ -618,11 +618,11 @@ const H = I.createContext(null), _t = ({
             },
             children: R
           }
-        ) : /* @__PURE__ */ o(nt, { sx: { pb: 8, pt: 16, px: 16, height: "100%" }, children: R })
+        ) : /* @__PURE__ */ o(ct, { sx: { pb: 8, pt: 16, px: 16, height: "100%" }, children: R })
       }
     );
   }
-), Rt = ({
+), Mt = ({
   ariaLabel: t,
   beat: e,
   elevation: n,
@@ -630,23 +630,23 @@ const H = I.createContext(null), _t = ({
   isActiveCard: a,
   onCardClick: l,
   posthog: r,
-  widthOverrides: u,
+  widthOverrides: m,
   variant: C,
-  showIcon: E,
-  heightOverrides: h
+  showIcon: h,
+  heightOverrides: g
 }) => {
-  const { ref: d, inView: _ } = Oe({
-    threshold: Be
-  }), { cardsCopy: p } = D(), { onEvent: g } = $(), { updateBeat: y, updateOffer: S } = At();
-  re(() => {
-    _ && (e.has_been_displayed ? g(we(e.template)) : (e.guid.startsWith("OFR") ? S({
+  const { ref: d, inView: _ } = Me({
+    threshold: ke
+  }), { cardsCopy: p } = x(), { onEvent: I } = H(), { updateBeat: y, updateOffer: S } = Wt();
+  le(() => {
+    _ && (e.has_been_displayed ? I(Le(e.template)) : (e.guid.startsWith("OFR") ? S({
       ...e,
       has_been_displayed: !0
     }) : y({
       ...e,
       has_been_displayed: !0
-    }), g(Me(e.template))));
-  }, [_]), re(() => {
+    }), I(xe(e.template))));
+  }, [_]), le(() => {
     if (_ && e)
       if (e.template === "MarketingOffer") {
         const T = e;
@@ -662,8 +662,8 @@ const H = I.createContext(null), _t = ({
           position: i
         });
   }, [e, i, _]);
-  const N = () => {
-    if (l && l(e), g(Ne(e.template)), e.template === "MarketingOffer") {
+  const w = () => {
+    if (l && l(e), I(be(e.template)), e.template === "MarketingOffer") {
       const T = e;
       r?.capture("clicked_messaging_insight", {
         template: e.template,
@@ -684,19 +684,19 @@ const H = I.createContext(null), _t = ({
       ariaLabel: t,
       description: e?.html_micro_description && e?.html_micro_description.length > 0 ? e.html_micro_description : e.html_description || "",
       elevation: n,
-      heightOverrides: h,
-      icon: E && /* @__PURE__ */ o(yt, { beat: e }),
+      heightOverrides: g,
+      icon: h && /* @__PURE__ */ o(Ot, { beat: e }),
       isActiveCard: a,
-      onCardClick: N,
-      onPrimaryAction: N,
+      onCardClick: w,
+      onPrimaryAction: w,
       primaryActionText: e.micro_call_to_action || p?.micro_card_cta,
       ref: d,
       title: e.micro_title && e.micro_title.length > 0 ? e.micro_title : e.title,
       variant: C,
-      widthOverrides: u
+      widthOverrides: m
     }
   );
-}, Ot = ({
+}, vt = ({
   currentBeatIndex: t,
   numBeats: e,
   onNextClick: n,
@@ -704,10 +704,10 @@ const H = I.createContext(null), _t = ({
   scrollRightBoundary: a,
   scrollX: l,
   shouldApplyDotAnimation: r = !1,
-  visibleCardsCount: u = 1
+  visibleCardsCount: m = 1
 }) => {
-  const C = P(), { carouselCopy: E } = D(), h = Math.floor(l) > a || t - u + 1 === 0, d = l < 0 || e - 1 === t, _ = C.palette.grey[500], p = C.palette.primary.main;
-  return /* @__PURE__ */ w(
+  const C = P(), { carouselCopy: h } = x(), g = Math.floor(l) > a || t - m + 1 === 0, d = l < 0 || e - 1 === t, _ = C.palette.grey[500], p = C.palette.primary.main;
+  return /* @__PURE__ */ N(
     k,
     {
       direction: "row",
@@ -723,26 +723,26 @@ const H = I.createContext(null), _t = ({
       },
       children: [
         /* @__PURE__ */ o(
-          ue,
+          Ie,
           {
-            "aria-disabled": h,
-            "aria-label": E?.previous_insight_cta_aria,
-            disabled: h,
+            "aria-disabled": g,
+            "aria-label": h?.previous_insight_cta_aria,
+            disabled: g,
             onClick: i,
             children: /* @__PURE__ */ o(
-              $e,
+              Qe,
               {
                 sx: {
-                  color: h ? _ : p
+                  color: g ? _ : p
                 }
               }
             )
           }
         ),
-        Array.from({ length: e }).map((g, y) => {
+        Array.from({ length: e }).map((I, y) => {
           const S = y === t;
           return /* @__PURE__ */ o(
-            ae,
+            de,
             {
               className: "mx-insights-micro-carousel-dots",
               sx: {
@@ -766,14 +766,14 @@ const H = I.createContext(null), _t = ({
           );
         }),
         /* @__PURE__ */ o(
-          ue,
+          Ie,
           {
             "aria-disabled": d,
-            "aria-label": E?.next_insight_cta_aria,
+            "aria-label": h?.next_insight_cta_aria,
             disabled: d,
             onClick: n,
             children: /* @__PURE__ */ o(
-              Re,
+              Ne,
               {
                 sx: {
                   color: d ? _ : p
@@ -785,7 +785,7 @@ const H = I.createContext(null), _t = ({
       ]
     }
   );
-}, Wt = ({
+}, bt = ({
   activeCardIndex: t,
   beats: e,
   cardWidth: n,
@@ -793,48 +793,48 @@ const H = I.createContext(null), _t = ({
   heightOverrides: a,
   onCardClick: l,
   posthog: r,
-  showIcon: u,
+  showIcon: m,
   variant: C
 }) => {
-  const { carouselCopy: E } = D(), h = {
+  const { carouselCopy: h } = x(), g = {
     elevation: i,
     heightOverrides: a,
     posthog: r,
-    showIcon: u,
+    showIcon: m,
     variant: C
   };
-  return /* @__PURE__ */ w(Te, { children: [
+  return /* @__PURE__ */ N(we, { children: [
     e.map((d, _) => {
-      const p = _ + 1, g = e.length + 1, y = Xe(
-        E?.card_position_in_carousel_aria,
+      const p = _ + 1, I = e.length + 1, y = et(
+        h?.card_position_in_carousel_aria,
         p.toString(),
-        g.toString()
-      ), S = d.micro_title && d.micro_title.length > 0, N = d.micro_description && d.micro_description.length > 0, T = S ? d.micro_title : d.title, A = N ? d.micro_description : d.description;
+        I.toString()
+      ), S = d.micro_title && d.micro_title.length > 0, w = d.micro_description && d.micro_description.length > 0, T = S ? d.micro_title : d.title, f = w ? d.micro_description : d.description;
       return /* @__PURE__ */ o(
-        Rt,
+        Mt,
         {
-          ariaLabel: `${y}: ${T}, ${A}`,
+          ariaLabel: `${y}: ${T}, ${f}`,
           beat: d,
           index: _,
           isActiveCard: _ === t,
           onCardClick: l,
           widthOverrides: n || void 0,
-          ...h
+          ...g
         },
         `${d.guid} ${_}`
       );
     }),
     /* @__PURE__ */ o(
-      Bt,
+      zt,
       {
         isActiveCard: t === e.length,
         onCardClick: l,
         widthOverrides: n || void 0,
-        ...h
+        ...g
       }
     )
   ] });
-}, Nt = ({
+}, Lt = ({
   analyticsMetadata: t,
   allowSingleCardPeeking: e,
   beats: n = [],
@@ -842,49 +842,53 @@ const H = I.createContext(null), _t = ({
   heightOverrides: a,
   onCardClick: l,
   posthog: r,
-  showCarouselControls: u,
+  showCarouselControls: m,
   showIcon: C,
-  showWithMargin: E = !0,
-  variant: h,
+  showWithMargin: h = !0,
+  variant: g,
   widthOverrides: d,
   visibleCardsCount: _ = 1
   // Default to 1 card visible
 }) => {
-  const p = I.useRef(null), g = I.useRef(null), [y, S] = I.useState(0), [N, T] = I.useState(null), [A, ee] = I.useState(null), [R, m] = I.useState(null), { carouselCopy: j } = D(), { onEvent: M } = $();
-  I.useEffect(() => {
-    if (p.current && !e) {
-      const f = p.current.offsetWidth, z = 8;
-      let G;
-      if (_ > 1) {
-        const de = (f - (_ - 1) * z) / _ / 3;
-        G = (f - de - (_ - 1) * z) / _;
-      } else
-        G = f;
-      m(G);
-    }
-  }, [_, p.current?.offsetWidth]), I.useEffect(() => {
-    const f = g.current?.offsetWidth;
-    if (typeof f == "number" && e) {
-      const z = (K) => {
-        const _e = [
+  const p = E.useRef(null), I = E.useRef(null), [y, S] = E.useState(0), [w, T] = E.useState(null), [f, ee] = E.useState(null), [R, u] = E.useState(null), { carouselCopy: $ } = x(), { onEvent: M } = H();
+  E.useEffect(() => {
+    const A = (re) => {
+      const G = I.current;
+      if (!G) return;
+      const U = re ?? G.offsetWidth;
+      if (e) {
+        const Q = [
+          { maxWidth: 320, cardWidth: 220 },
           { maxWidth: 375, cardWidth: 268 },
           { maxWidth: 444, cardWidth: 300 },
           { maxWidth: 599, cardWidth: 350 },
           { maxWidth: 749, cardWidth: 450 },
           { maxWidth: 900, cardWidth: 600 }
-        ].find((Ge) => K <= Ge.maxWidth);
-        return _e ? _e.cardWidth : 750;
-      };
-      m(z(f));
-      const G = () => {
-        const K = g.current?.offsetWidth;
-        typeof K == "number" && m(z(K));
-      };
-      return window.addEventListener("resize", G), () => {
-        window.removeEventListener("resize", G);
-      };
-    }
-  }, [e, g]);
+        ].find((Fe) => U <= Fe.maxWidth);
+        u(Q ? Q.cardWidth : 750);
+        return;
+      }
+      const ae = h ? Math.max(0, U - 32) : U, Ce = 8;
+      let se;
+      if (_ > 1) {
+        const Q = (ae - (_ - 1) * Ce) / _ / 3;
+        se = (ae - Q - (_ - 1) * Ce) / _;
+      } else
+        se = ae;
+      u(Math.max(0, se));
+    };
+    A();
+    const ue = () => A();
+    let ie = null;
+    return typeof ResizeObserver < "u" && I.current ? (ie = new ResizeObserver((re) => {
+      const G = re[0];
+      if (!G) return;
+      const U = G.borderBoxSize?.[0]?.inlineSize ?? G.contentRect.width;
+      A(U);
+    }), ie.observe(I.current)) : window.addEventListener("resize", ue), () => {
+      window.removeEventListener("resize", ue), ie?.disconnect();
+    };
+  }, [e, _, h]);
   const V = () => {
     M(W.ON_CAROUSEL_FORWARD_CLICK, t), p.current && R && p.current.scrollTo({
       left: y + R + 8,
@@ -897,22 +901,22 @@ const H = I.createContext(null), _t = ({
       top: 0,
       behavior: "smooth"
     });
-  }, Y = () => {
+  }, j = () => {
     p.current && S(p.current.scrollLeft);
-  }, X = () => {
-    if (!A || !N) return;
-    A - N > Tt ? M(W.ON_CAROUSEL_FORWARD_SWIPE, t) : M(W.ON_CAROUSEL_BACK_SWIPE, t);
-  }, oe = (f) => {
-    T(f.targetTouches[0].clientX);
-  }, ne = (f) => {
-    T(null), ee(f.targetTouches[0].clientX);
-  }, Z = R ? Math.round(y / (R + 8)) : 0, Q = p.current ? p.current.scrollWidth - p.current.offsetWidth : 0;
-  return /* @__PURE__ */ w(
+  }, Y = () => {
+    if (!f || !w) return;
+    f - w > Nt ? M(W.ON_CAROUSEL_FORWARD_SWIPE, t) : M(W.ON_CAROUSEL_BACK_SWIPE, t);
+  }, oe = (A) => {
+    T(A.targetTouches[0].clientX);
+  }, ne = (A) => {
+    T(null), ee(A.targetTouches[0].clientX);
+  }, X = R ? Math.round(y / (R + 8)) : 0, Z = p.current ? p.current.scrollWidth - p.current.offsetWidth : 0;
+  return /* @__PURE__ */ N(
     k,
     {
-      "aria-label": j?.carousel_title,
+      "aria-label": $?.carousel_title,
       "aria-roledescription": "carousel",
-      ref: g,
+      ref: I,
       role: "region",
       sx: {
         alignItems: "center",
@@ -925,8 +929,8 @@ const H = I.createContext(null), _t = ({
           k,
           {
             direction: "row",
-            onScroll: Y,
-            onTouchEnd: X,
+            onScroll: j,
+            onTouchEnd: Y,
             onTouchMove: oe,
             onTouchStart: ne,
             ref: p,
@@ -936,7 +940,7 @@ const H = I.createContext(null), _t = ({
               gap: 8,
               listStyleType: "none",
               m: 0,
-              maxWidth: E ? "calc(100% - 32px)" : "100%",
+              maxWidth: h ? "calc(100% - 32px)" : "100%",
               overflowX: "auto",
               overflowY: "hidden",
               p: 0,
@@ -948,9 +952,9 @@ const H = I.createContext(null), _t = ({
               }
             },
             children: /* @__PURE__ */ o(
-              Wt,
+              bt,
               {
-                activeCardIndex: Z,
+                activeCardIndex: X,
                 beats: n,
                 cardWidth: R,
                 elevation: i,
@@ -958,19 +962,19 @@ const H = I.createContext(null), _t = ({
                 onCardClick: l,
                 posthog: r,
                 showIcon: C,
-                variant: h
+                variant: g
               }
             )
           }
         ),
-        u && /* @__PURE__ */ o(
-          Ot,
+        m && /* @__PURE__ */ o(
+          vt,
           {
-            currentBeatIndex: Z + _ - 1,
+            currentBeatIndex: X + _ - 1,
             numBeats: n.length + 1,
             onNextClick: V,
             onPreviousClick: te,
-            scrollRightBoundary: Q,
+            scrollRightBoundary: Z,
             scrollX: y,
             shouldApplyDotAnimation: e,
             visibleCardsCount: _
@@ -979,17 +983,17 @@ const H = I.createContext(null), _t = ({
       ]
     }
   );
-}, wt = U(Nt), Mt = ({
+}, xt = z(Lt), Dt = ({
   analyticsMetadata: t,
   onCardClick: e,
   posthog: n,
   widthOverrides: i,
   headerSx: a
 }) => {
-  const { carouselCopy: l } = D(), { onEvent: r } = $(), u = () => {
+  const { carouselCopy: l } = x(), { onEvent: r } = H(), m = () => {
     r && (r(W.ON_VIEW_MORE_CLICKED, t), e(), n?.capture("clicked_view_more"));
   };
-  return l ? /* @__PURE__ */ w(
+  return l ? /* @__PURE__ */ N(
     k,
     {
       alignItems: "center",
@@ -1003,12 +1007,12 @@ const H = I.createContext(null), _t = ({
         ...a
       },
       children: [
-        /* @__PURE__ */ o(Fe, { children: l.carousel_title }),
+        /* @__PURE__ */ o(Xe, { children: l.carousel_title }),
         /* @__PURE__ */ o(
-          ke,
+          He,
           {
-            endIcon: /* @__PURE__ */ o(Re, { size: 20 }),
-            onClick: u,
+            endIcon: /* @__PURE__ */ o(Ne, { size: 20 }),
+            onClick: m,
             size: "small",
             variant: "text",
             children: l.view_all_insights_in_full_feed_cta_aria
@@ -1016,15 +1020,15 @@ const H = I.createContext(null), _t = ({
         )
       ]
     }
-  ) : /* @__PURE__ */ o(je, {});
-}, Lt = U(Mt), bt = ({
+  ) : /* @__PURE__ */ o(qe, {});
+}, Bt = z(Dt), Pt = ({
   heightOverrides: t,
   widthOverrides: e,
   children: n
 }) => {
-  const { carouselCopy: i } = D();
+  const { carouselCopy: i } = x();
   return /* @__PURE__ */ o(
-    ae,
+    de,
     {
       "aria-label": i?.carousel_title,
       "aria-roledescription": "carousel",
@@ -1038,7 +1042,7 @@ const H = I.createContext(null), _t = ({
       children: n
     }
   );
-}, Pe = ({
+}, ze = ({
   ariaLabel: t,
   elevation: e,
   heightOverrides: n,
@@ -1047,12 +1051,12 @@ const H = I.createContext(null), _t = ({
   showIcon: l,
   variant: r
 }) => {
-  const { cardsCopy: u } = D(), C = P(), { onEvent: E } = $(), { onPageview: h } = xe();
-  I.useEffect(() => {
-    h(B.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
+  const { cardsCopy: m } = x(), C = P(), { onEvent: h } = H(), { onPageview: g } = Ge();
+  E.useEffect(() => {
+    g(B.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
   }, []);
   const d = () => {
-    i && i(), E(W.ON_NO_RELEVANT_INSIGHTS_CLICKED), a?.capture("clicked_insight", {
+    i && i(), h(W.ON_NO_RELEVANT_INSIGHTS_CLICKED), a?.capture("clicked_insight", {
       template: "no_relevant_insights"
     });
   };
@@ -1060,18 +1064,18 @@ const H = I.createContext(null), _t = ({
     J,
     {
       ariaLabel: t,
-      description: u.no_relevant_insights_card_description,
+      description: m.no_relevant_insights_card_description,
       elevation: e,
       heightOverrides: n,
       icon: l && /* @__PURE__ */ o(c, { bgColor: s(C.palette.primary.main, 0.15), name: "lightbulb" }),
       onCardClick: d,
       onPrimaryAction: d,
-      primaryActionText: u.micro_card_cta,
-      title: u.no_relevant_insights_card_title,
+      primaryActionText: m.micro_card_cta,
+      title: m.no_relevant_insights_card_title,
       variant: r
     }
   );
-}, io = U(Pe), Ve = ({
+}, lo = z(ze), Ue = ({
   ariaLabel: t,
   elevation: e,
   heightOverrides: n,
@@ -1079,24 +1083,24 @@ const H = I.createContext(null), _t = ({
   showIcon: a,
   variant: l
 }) => {
-  const { onPageview: r } = xe(), { zeroStateCopy: u } = D(), C = P();
-  return I.useEffect(() => {
+  const { onPageview: r } = Ge(), { zeroStateCopy: m } = x(), C = P();
+  return E.useEffect(() => {
     r(B.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
   }, []), /* @__PURE__ */ o(
     J,
     {
       ariaLabel: t,
-      description: u.carousel_zero_state_description,
+      description: m.carousel_zero_state_description,
       elevation: e,
       heightOverrides: n,
       icon: a && /* @__PURE__ */ o(c, { bgColor: s(C.palette.primary.main, 0.15), name: "lightbulb" }),
       onCardClick: i,
-      title: u.carousel_zero_state_title,
+      title: m.carousel_zero_state_title,
       variant: l
     }
   );
-}, ro = U(Ve), vt = () => /* @__PURE__ */ o(
-  ae,
+}, _o = z(Ue), Vt = () => /* @__PURE__ */ o(
+  de,
   {
     sx: {
       alignItems: "center",
@@ -1105,11 +1109,11 @@ const H = I.createContext(null), _t = ({
       justifyContent: "center",
       width: "100%"
     },
-    children: /* @__PURE__ */ o(Ze, {})
+    children: /* @__PURE__ */ o(tt, {})
   }
-), Se = {
+), We = {
   featureVersion: "spendVsIncomeTrends"
-}, x = new dt(), Dt = ({
+}, D = new Ct(), Gt = ({
   allowSingleCardPeeking: t = !0,
   areBeatsLoading: e = !1,
   beats: n = [],
@@ -1118,80 +1122,80 @@ const H = I.createContext(null), _t = ({
   endpoint: a = "/",
   headerSx: l,
   heightOverrides: r,
-  logOutUser: u = () => {
+  logOutUser: m = () => {
   },
   onCardClick: C = () => {
   },
-  onEvent: E = () => {
+  onEvent: h = () => {
   },
-  onPageview: h = () => {
+  onPageview: g = () => {
   },
   posthog: d,
   showCarouselControls: _,
   showHeader: p,
-  showIcon: g,
+  showIcon: I,
   showWithMargin: y = !0,
   token: S = "",
-  userHasFullInsightFeedBeats: N,
+  userHasFullInsightFeedBeats: w,
   visibleCardsCount: T = 1,
-  widthOverrides: A
+  widthOverrides: f
 }) => {
   const R = (() => {
     if (i === "border") return "outlined";
     if (i === "elevation 1") return "elevation";
     if (i !== "flat")
       return "elevation";
-  })(), m = i === "flat" ? 0 : 1, [j, M] = ie("STANDARD"), [V, te] = ie(!1), [Y, X] = ie(!1), oe = qe([E], x), ne = Je([h], x);
-  et({
+  })(), u = i === "flat" ? 0 : 1, [$, M] = ce("STANDARD"), [V, te] = ce(!1), [j, Y] = ce(!1), oe = nt([h], D), ne = it([g], D);
+  rt({
     widgetName: "InsightsMicroWidget",
     isLoaded: V
-  }), I.useEffect(() => {
-    !x.isInitialized && !Y && (x.initialize(a, S, u).catch(() => X(!1)), X(!0));
-  }, [a, S, u, x.isInitialized, Y]), I.useEffect(() => {
-    const f = window.innerHeight;
-    f < 180 ? M("STANDARD") : f >= 180 && f < 200 ? M("LARGE") : f >= 200 && f < 248 ? M("XLARGE") : f >= 248 && M("XXLARGE");
-  }, [window.innerHeight]), I.useEffect(() => {
-    te(!e && x.isInitialized);
-  }, [e, x.isInitialized]);
-  const Z = {
+  }), E.useEffect(() => {
+    !D.isInitialized && !j && (D.initialize(a, S, m).catch(() => Y(!1)), Y(!0));
+  }, [a, S, m, D.isInitialized, j]), E.useEffect(() => {
+    const A = window.innerHeight;
+    A < 180 ? M("STANDARD") : A >= 180 && A < 200 ? M("LARGE") : A >= 200 && A < 248 ? M("XLARGE") : A >= 248 && M("XXLARGE");
+  }, [window.innerHeight]), E.useEffect(() => {
+    te(!e && D.isInitialized);
+  }, [e, D.isInitialized]);
+  const X = {
     heightOverrides: r,
     onCardClick: C,
     posthog: d,
-    showIcon: g,
+    showIcon: I,
     showWithMargin: y,
-    widthOverrides: A
-  }, Q = {
-    carouselSize: j,
-    elevation: m,
+    widthOverrides: f
+  }, Z = {
+    carouselSize: $,
+    elevation: u,
     variant: R,
     heightOverrides: r,
     onCardClick: C,
     posthog: d,
-    showIcon: g
+    showIcon: I
   };
-  return /* @__PURE__ */ o(_t, { onEvent: oe, onPageview: ne, store: x, children: /* @__PURE__ */ w(bt, { heightOverrides: r, widthOverrides: A, children: [
-    !V && /* @__PURE__ */ o(vt, {}),
+  return /* @__PURE__ */ o(ht, { onEvent: oe, onPageview: ne, store: D, children: /* @__PURE__ */ N(Pt, { heightOverrides: r, widthOverrides: f, children: [
+    !V && /* @__PURE__ */ o(Vt, {}),
     V && p && /* @__PURE__ */ o(
-      Lt,
+      Bt,
       {
-        analyticsMetadata: Se,
+        analyticsMetadata: We,
         headerSx: l,
         onCardClick: C,
         posthog: d,
-        widthOverrides: A
+        widthOverrides: f
       }
     ),
     V && !!n.length && /* @__PURE__ */ o(
-      wt,
+      xt,
       {
         allowSingleCardPeeking: t,
-        analyticsMetadata: Se,
+        analyticsMetadata: We,
         beats: n,
-        elevation: m,
+        elevation: u,
         showCarouselControls: _,
         variant: R,
         visibleCardsCount: T,
-        ...Z
+        ...X
       }
     ),
     V && !n.length && /* @__PURE__ */ o(
@@ -1200,22 +1204,22 @@ const H = I.createContext(null), _t = ({
         sx: {
           alignItems: "center",
           height: r,
-          width: A || "100%"
+          width: f || "100%"
         },
         children: /* @__PURE__ */ o(
           k,
           {
             sx: {
-              height: `calc(${St[j]}px - 44px)`,
-              width: y ? `calc(${A}px - 32px)` : "100%"
+              height: `calc(${wt[$]}px - 44px)`,
+              width: y ? `calc(${f}px - 32px)` : "100%"
             },
-            children: N ? /* @__PURE__ */ o(Pe, { ...Q }) : /* @__PURE__ */ o(Ve, { ...Q })
+            children: w ? /* @__PURE__ */ o(ze, { ...Z }) : /* @__PURE__ */ o(Ue, { ...Z })
           }
         )
       }
     )
   ] }) });
-}, ao = U(Dt), xt = ({
+}, po = z(Gt), kt = ({
   ariaLabel: t,
   elevation: e,
   heightOverrides: n,
@@ -1223,18 +1227,18 @@ const H = I.createContext(null), _t = ({
   onCardClick: a,
   posthog: l,
   widthOverrides: r,
-  showIcon: u,
+  showIcon: m,
   variant: C
 }) => {
-  const E = P(), { ref: h, inView: d } = Oe({
-    threshold: Be
-  }), { cardsCopy: _ } = D(), { onEvent: p } = $();
-  re(() => {
-    d && (p(Le.ON_VIEW_MORE_VIEWED), l?.capture("viewed_insight", {
+  const h = P(), { ref: g, inView: d } = Me({
+    threshold: ke
+  }), { cardsCopy: _ } = x(), { onEvent: p } = H();
+  le(() => {
+    d && (p(De.ON_VIEW_MORE_VIEWED), l?.capture("viewed_insight", {
       template: "view_more_card"
     }));
   }, [d]);
-  const g = () => {
+  const I = () => {
     a && a(), p(W.ON_VIEW_MORE_CLICKED), l?.capture("clicked_insight", {
       template: "view_more_card"
     });
@@ -1247,30 +1251,30 @@ const H = I.createContext(null), _t = ({
       description: _?.view_more_card_description,
       elevation: e,
       heightOverrides: n,
-      icon: u && /* @__PURE__ */ o(c, { bgColor: s(E.palette.primary.main, 0.15), name: "show_chart" }),
+      icon: m && /* @__PURE__ */ o(c, { bgColor: s(h.palette.primary.main, 0.15), name: "show_chart" }),
       isActiveCard: i,
-      onCardClick: g,
-      onPrimaryAction: g,
+      onCardClick: I,
+      onPrimaryAction: I,
       primaryActionText: _?.micro_card_cta,
-      ref: h,
+      ref: g,
       title: _?.view_more_card_title,
       variant: C,
       widthOverrides: r
     }
   );
-}, Bt = U(xt);
+}, zt = z(kt);
 export {
-  dt as A,
-  Lt as C,
-  Rt as I,
-  wt as M,
-  io as N,
-  Se as T,
-  Bt as V,
-  ro as Z,
-  ao as a,
-  _t as b,
+  Ct as A,
+  Bt as C,
+  Mt as I,
+  xt as M,
+  lo as N,
+  We as T,
+  zt as V,
+  _o as Z,
+  po as a,
+  ht as b,
   J as c,
-  ht as d
+  ft as d
 };
-//# sourceMappingURL=ViewMoreMicroCard-Dxghxphh.mjs.map
+//# sourceMappingURL=ViewMoreMicroCard-fnwE0hqd.mjs.map