@mx-cartographer/experiences 7.0.33 → 7.0.34

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [7.0.34] - 09-30-2025
+
+- **FIXED** - Initialize InsightsMicroWidget only once
+
 ## [7.0.33] - 09-29-2025
 
 - **ADDED** - Global onError handler to GlobalStore and passed to stores that make API calls

package/dist/{ViewMoreMicroCard-C66pzgfS.mjs → ViewMoreMicroCard-B-3SFewe.mjs}

@@ -1,49 +1,49 @@
 import { jsx as e, jsxs as I } from "react/jsx-runtime";
-import u, { useState as ae, useEffect as ee } from "react";
+import u, { useState as te, useEffect as oe } from "react";
 import { observer as P } from "mobx-react-lite";
 import be from "@mui/material/CssBaseline";
-import { useTheme as Se, ThemeProvider as Ue } from "@mui/material/styles";
+import { useTheme as Me, ThemeProvider as Ue } from "@mui/material/styles";
 import ze from "@mui/material/Link";
 import K from "@mui/material/Stack";
-import ue from "@mui/material/Typography";
-import { ChevronLeft as Ke, ChevronRight as Me } from "@mxenabled/mx-icons";
+import pe from "@mui/material/Typography";
+import { ChevronLeft as Ke, ChevronRight as Ae } from "@mxenabled/mx-icons";
 import { L as $e } from "./Loader-DUaFpDGv.mjs";
 import U from "@mui/material/Box";
-import pe from "@mui/material/IconButton";
-import { useInView as Ae } from "react-intersection-observer";
-import { P as Ye, CategoryIcon as je, useTokens as Oe, MerchantLogo as Xe, Icon as J } from "@mxenabled/mxui";
-import ce from "@mui/material/styles/useTheme";
+import _e from "@mui/material/IconButton";
+import { useInView as Oe } from "react-intersection-observer";
+import { P as Ye, CategoryIcon as je, useTokens as Te, MerchantLogo as Xe, Icon as ie } from "@mxenabled/mxui";
+import de from "@mui/material/styles/useTheme";
 import { b as Qe } from "./Category-CevNQ03n.mjs";
 import { css as qe } from "@mxenabled/cssinjs";
 import { b as Je } from "./Localization-2MODESHW.mjs";
 import et from "@mui/material/CircularProgress";
-import { makeAutoObservable as se, runInAction as Te } from "mobx";
-import { G as _e, a as tt, u as it, b as ot } from "./useCombineEvents-BUDIR1ba.mjs";
-import { B as Ce } from "./BeatApi-DhJpgCLz.mjs";
+import { makeAutoObservable as he, runInAction as We } from "mobx";
+import { G as Ce, a as tt, u as it, b as ot } from "./useCombineEvents-BUDIR1ba.mjs";
+import { B as fe } from "./BeatApi-DhJpgCLz.mjs";
 import rt from "@mui/material/Card";
 import lt from "@mui/material/CardActions";
 import nt from "@mui/material/CardContent";
 import at from "@mui/material/CardHeader";
-const fe = {
+const me = {
   featureVersion: "spendVsIncomeTrends"
 };
 class ct {
-  copyApi = new _e("/", "");
+  copyApi = new Ce("/", "");
   copyObject = {};
   namespace = "experiences";
   translationKey = "micro_insights";
   constructor() {
-    se(this);
+    he(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 (o, t) => {
-    this.copyApi = new _e(o, t), await this.loadCopy();
+    this.copyApi = new Ce(o, t), await this.loadCopy();
   };
   loadCopy = async () => {
     const o = await this.copyApi.getGlobalCopy(this.namespace, this.translationKey);
-    Te(() => {
+    We(() => {
       this.copyObject = o[this.translationKey];
     });
   };
@@ -57,7 +57,7 @@ class ct {
     return this.copyObject.zero_state;
   }
 }
-const de = {
+const Ee = {
   BillAmountNotStandard: "BillAmountNotStandard",
   CanadianUpcomingDeadlineAlert: "CanadianUpcomingDeadlineAlert",
   DuplicatePaymentV2: "DuplicatePaymentV2",
@@ -74,37 +74,37 @@ const de = {
   WeeklyNewMerchantsV2: "WeeklyNewMerchantsV2",
   MonthlySpendComparison: "MonthlySpendComparison",
   MonthlySpendToIncomeComparison: "MonthlySpendToIncomeComparison"
-}, S = window?.app?.clientConfig?.microwidget_instance_id || "", me = {
+}, S = window?.app?.clientConfig?.microwidget_instance_id || "", ge = {
   INSIGHTS_MICRO_WIDGET: "/micro-insights-carousel"
-}, We = (i) => `on${i}Click`, we = (i) => `on${i}View`, xe = (i) => `on${i}ViewFirstTime`, he = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), st = () => Object.values(de).reduce(
+}, we = (i) => `on${i}Click`, xe = (i) => `on${i}View`, De = (i) => `on${i}ViewFirstTime`, ue = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), st = () => Object.values(Ee).reduce(
   (i, o) => ({
     ...i,
-    [We(o)]: {
+    [we(o)]: {
       action: x.MICRO_BEAT_CLICKED,
       category: w.BEAT_INTERACTION,
-      label: he(o),
+      label: ue(o),
       value: S
     }
   }),
   {}
-), dt = () => Object.values(de).reduce(
+), dt = () => Object.values(Ee).reduce(
   (i, o) => ({
     ...i,
-    [we(o)]: {
+    [xe(o)]: {
       action: x.MICRO_BEAT_DISPLAYED,
       category: w.BEAT_INTERACTION,
-      label: he(o),
+      label: ue(o),
       value: S
     }
   }),
   {}
-), ht = () => Object.values(de).reduce(
+), ht = () => Object.values(Ee).reduce(
   (i, o) => ({
     ...i,
-    [xe(o)]: {
+    [De(o)]: {
       action: x.MICRO_BEAT_DISPLAYED_FIRST_TIME,
       category: w.BEAT_INTERACTION,
-      label: he(o),
+      label: ue(o),
       value: S
     }
   }),
@@ -124,7 +124,7 @@ const de = {
   ON_CAROUSEL_FORWARD_SWIPE: "onCarouselForwardSwipe",
   ON_NO_RELEVANT_INSIGHTS_CLICKED: "onNoRelevantInsightsClicked",
   ON_VIEW_MORE_CLICKED: "onViewMoreClicked"
-}, De = {
+}, Le = {
   ON_VIEW_MORE_VIEWED: "onViewMoreCardView"
 }, x = {
   CONTROL_BACKWARD: "Control Backward",
@@ -134,32 +134,32 @@ const de = {
   MICRO_BEAT_DISPLAYED_FIRST_TIME: "Micro Beat Displayed For First Time",
   SWIPE_BACKWARD: "Swipe Backward",
   SWIPE_FORWARD: "Swipe Forward"
-}, H = {
+}, k = {
   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"
 }, Re = {
-  [H.MICRO_WIDGET_CAROUSEL]: {
+  [k.MICRO_WIDGET_CAROUSEL]: {
     label: W.MICRO_WIDGET,
-    name: H.MICRO_WIDGET_CAROUSEL,
-    path: me.INSIGHTS_MICRO_WIDGET,
+    name: k.MICRO_WIDGET_CAROUSEL,
+    path: ge.INSIGHTS_MICRO_WIDGET,
     value: S
   },
   // zero state
-  [H.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
+  [k.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
     label: W.MICRO_WIDGET,
-    name: H.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
-    path: me.INSIGHTS_MICRO_WIDGET,
+    name: k.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
+    path: ge.INSIGHTS_MICRO_WIDGET,
     value: S
   },
   // no relevant cards
-  [H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
+  [k.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
     label: W.MICRO_WIDGET,
-    name: H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
+    name: k.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
     path: "/micro-widget",
     value: S
   }
-}, ge = {
+}, Ie = {
   // carousel control interaction events - clicks and swipes
   [M.ON_CAROUSEL_BACK_CLICK]: {
     action: x.CONTROL_BACKWARD,
@@ -192,7 +192,7 @@ const de = {
     label: W.VIEW_MORE,
     value: S
   },
-  [De.ON_VIEW_MORE_VIEWED]: {
+  [Le.ON_VIEW_MORE_VIEWED]: {
     action: x.MICRO_BEAT_DISPLAYED,
     category: w.BEAT_INTERACTION,
     label: W.VIEW_MORE,
@@ -201,28 +201,28 @@ const de = {
   ...st(),
   ...dt(),
   ...ht()
-}, Ie = async (i, o) => !o || !ge[i] ? null : o.sendAnalyticEvent(ge[i]).then((t) => t).catch((t) => {
+}, ye = async (i, o) => !o || !Ie[i] ? null : o.sendAnalyticEvent(Ie[i]).then((t) => t).catch((t) => {
   throw t;
-}), ye = async (i, o) => !o || !Re[i] ? null : o.sendAnalyticsPageview(Re[i]).then((t) => t).catch((t) => {
+}), ve = async (i, o) => !o || !Re[i] ? null : o.sendAnalyticsPageview(Re[i]).then((t) => t).catch((t) => {
   throw t;
 });
 class Et {
-  onAnalyticEvent = Ie;
-  onAnalyticPageView = ye;
-  beatApi = new Ce("/", "");
+  onAnalyticEvent = ye;
+  onAnalyticPageView = ve;
+  beatApi = new fe("/", "");
   constructor() {
-    se(this);
+    he(this);
   }
   initialize = async (o, t, r) => {
     this.onAnalyticEvent = (l, n) => {
-      Ie(l, n).then((a) => a).catch((a) => {
+      ye(l, n).then((a) => a).catch((a) => {
         throw a.status === 401 && r(), a;
       });
     }, this.onAnalyticPageView = (l, n) => {
-      ye(l, n).then((a) => a).catch((a) => {
+      ve(l, n).then((a) => a).catch((a) => {
         throw a.status === 401 && r(), a;
       });
-    }, this.beatApi = new Ce(o, t);
+    }, this.beatApi = new fe(o, t);
   };
   updateBeat = async (o) => {
     this.beatApi.updateBeat(o);
@@ -239,12 +239,12 @@ class ut {
   token = "";
   isInitialized = !1;
   constructor() {
-    this.copyStore = new ct(), this.insightsMicroWidgetStore = new Et(), se(this);
+    this.copyStore = new ct(), this.insightsMicroWidgetStore = new Et(), he(this);
   }
   initialize = async (o, t, r) => {
     await this.copyStore.initialize(o, t), await this.insightsMicroWidgetStore.initialize(o, t, r);
     const l = await tt(o, t, "1.0.0", "Micro Insights Carousel");
-    Te(() => {
+    We(() => {
       this.session = l, this.isInitialized = !0;
     });
   };
@@ -254,7 +254,7 @@ const $ = u.createContext(null), pt = ({
   onPageview: o,
   store: t,
   children: r
-}) => /* @__PURE__ */ e($.Provider, { value: { onEvent: i, onPageview: o, store: t, children: r }, children: r }), te = u.forwardRef(
+}) => /* @__PURE__ */ e($.Provider, { value: { onEvent: i, onPageview: o, store: t, children: r }, children: r }), re = u.forwardRef(
   function({
     actionText: o,
     ariaLabel: t,
@@ -272,8 +272,8 @@ const $ = u.createContext(null), pt = ({
     title: m,
     variant: c,
     widthOverrides: E
-  }, R) {
-    const y = ce(), [D, O] = u.useState(!1), { cardStyle: v, linkTextStyle: F } = f, z = c ? v : { border: "none", boxShadow: "none", ...v }, g = /* @__PURE__ */ e(
+  }, g) {
+    const y = de(), [D, O] = u.useState(!1), { cardStyle: v, linkTextStyle: B } = f, z = c ? v : { border: "none", boxShadow: "none", ...v }, R = /* @__PURE__ */ e(
       Ye,
       {
         className: "mx-micro-card-description",
@@ -306,7 +306,7 @@ const $ = u.createContext(null), pt = ({
         "aria-label": t,
         "aria-labelledby": "divButton",
         "aria-roledescription": "slide",
-        ref: R,
+        ref: g,
         role: "group",
         sx: {
           height: "100%",
@@ -322,7 +322,7 @@ const $ = u.createContext(null), pt = ({
             onClick: () => _(),
             onKeyDown: () => O(!1),
             onKeyUp: () => O(!0),
-            ref: R,
+            ref: g,
             role: "button",
             sx: {
               border: D ? "1px solid rgba(82, 138, 224, 0.8)" : void 0,
@@ -360,13 +360,13 @@ const $ = u.createContext(null), pt = ({
                         at,
                         {
                           avatar: C && a,
-                          subheader: p && g,
+                          subheader: p && R,
                           sx: { color: h.headerColor, p: 0 },
                           title: m,
                           titleTypographyProps: { fontSize: 15, fontWeight: 600, variant: "h3" }
                         }
                       ),
-                      /* @__PURE__ */ e(nt, { sx: { p: 0 }, children: !p && g }),
+                      /* @__PURE__ */ e(nt, { sx: { p: 0 }, children: !p && R }),
                       !!o && /* @__PURE__ */ e(
                         lt,
                         {
@@ -383,7 +383,7 @@ const $ = u.createContext(null), pt = ({
                                 fontWeight: "bold",
                                 px: 28,
                                 fontFamily: L.typography.fontFamily,
-                                ...F
+                                ...B
                               }),
                               children: o
                             }
@@ -401,12 +401,12 @@ const $ = u.createContext(null), pt = ({
     );
   }
 ), _t = ({ beat: i }) => {
-  const [o, t] = ae(Qe.UNCATEGORIZED);
-  return ee(() => {
+  const [o, t] = te(Qe.UNCATEGORIZED);
+  return oe(() => {
     i.primary_category_guid ? t(i.primary_category_guid) : i.category_guids?.length && t(i.category_guids[0]);
   }, []), /* @__PURE__ */ e(je, { categoryGuid: o, size: 16, sx: { minWidth: 16 } });
 }, Ct = ({ beat: i }) => {
-  const o = Oe(), t = ft(o);
+  const o = Te(), t = ft(o);
   return /* @__PURE__ */ e(
     Xe,
     {
@@ -421,7 +421,7 @@ const $ = u.createContext(null), pt = ({
   "& .kyper-categoryicon": {
     display: "flex"
   }
-}), mt = P(Ct), Rt = ({
+}), mt = P(Ct), gt = ({
   color: i = "currentColor",
   height: o,
   size: t = 16,
@@ -447,18 +447,18 @@ const $ = u.createContext(null), pt = ({
       }
     )
   }
-), gt = (i) => i ? i.data ? i.data.map((o) => {
+), Rt = (i) => i ? i.data ? i.data.map((o) => {
   const t = {};
   return i.names?.map((r, l) => {
     t[r] = o[l];
   }), t;
 }) : [] : [], It = (i, o) => {
-  const t = gt(i), r = t.length / 2, l = t.slice(0, r), n = t.slice(r);
+  const t = Rt(i), r = t.length / 2, l = t.slice(0, r), n = t.slice(r);
   return !l.length || !n.length ? o.Color.Primary300 : l[0].amount > n[0].amount ? o.Color.Error300 : l[0].amount < n[0].amount ? o.Color.Success300 : o.Color.Primary300;
 }, yt = ({ beat: i }) => {
-  const o = Oe(), t = It(i.data_series, o);
-  return /* @__PURE__ */ e(J, { name: "bar_chart", sx: { color: t } });
-}, Le = () => /* @__PURE__ */ I("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
+  const o = Te(), t = It(i.data_series, o);
+  return /* @__PURE__ */ e(ie, { name: "bar_chart", sx: { color: t } });
+}, Ne = () => /* @__PURE__ */ I("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ e(
     "path",
     {
@@ -1239,10 +1239,10 @@ const $ = u.createContext(null), pt = ({
       }
     )
   ] })
-] }), ve = ({ beat: i, clientColorScheme: o, color: t, type: r }) => {
-  const l = ce(), n = o?.primary_300 ? o.primary_300 : l.palette.primary.main;
-  return r === 0 ? /* @__PURE__ */ e(J, { fill: !0, name: "error", sx: { color: t || n } }) : r === 1 && i ? /* @__PURE__ */ e(_t, { beat: i }) : r === 2 && i ? /* @__PURE__ */ e(mt, { beat: i }) : r === 3 && i ? /* @__PURE__ */ e(yt, { beat: i }) : r === 5 && i ? /* @__PURE__ */ e(J, { name: "campaign" }) : /* @__PURE__ */ e(
-    J,
+] }), Se = ({ beat: i, clientColorScheme: o, color: t, type: r }) => {
+  const l = de(), n = o?.primary_300 ? o.primary_300 : l.palette.primary.main;
+  return r === 0 ? /* @__PURE__ */ e(ie, { fill: !0, name: "error", sx: { color: t || n } }) : r === 1 && i ? /* @__PURE__ */ e(_t, { beat: i }) : r === 2 && i ? /* @__PURE__ */ e(mt, { beat: i }) : r === 3 && i ? /* @__PURE__ */ e(yt, { beat: i }) : r === 5 && i ? /* @__PURE__ */ e(ie, { name: "campaign" }) : /* @__PURE__ */ e(
+    ie,
     {
       fill: !0,
       name: "info",
@@ -1251,7 +1251,7 @@ const $ = u.createContext(null), pt = ({
       }
     }
   );
-}, k = () => {
+}, F = () => {
   const i = u.useContext($);
   if (!i)
     throw new Error("useCopyStore() must be used within the InsightsMicroWidgetDataProvider");
@@ -1268,17 +1268,17 @@ const $ = u.createContext(null), pt = ({
   if (!i)
     throw new Error("useEvent() must be used within the InsightsMicroWidgetDataProvider");
   return { onEvent: i.onEvent };
-}, Ne = () => {
+}, Ve = () => {
   const i = u.useContext($);
   if (!i)
     throw new Error("usePageview() must be used within the InsightsMicroWidgetDataProvider");
   return { onPageview: i.onPageview };
-}, Ve = {
+}, He = {
   LARGE: 180,
   STANDARD: 154,
   XLARGE: 200,
   XXLARGE: 248
-}, St = 50, He = 1, Mt = ({
+}, St = 50, ke = 1, Mt = ({
   ariaLabel: i,
   backgroundColor: o,
   beat: t,
@@ -1293,18 +1293,18 @@ const $ = u.createContext(null), pt = ({
   variant: f,
   widthOverrides: h
 }) => {
-  const { ref: m, inView: c } = Ae({
-    threshold: He
-  }), { cardsCopy: E } = k(), { onEvent: R } = Y(), { updateBeat: y, updateOffer: D } = vt();
-  ee(() => {
-    c && (t.has_been_displayed ? R(we(t.template)) : (t.guid.startsWith("OFR") ? D({
+  const { ref: m, inView: c } = Oe({
+    threshold: ke
+  }), { cardsCopy: E } = F(), { onEvent: g } = Y(), { updateBeat: y, updateOffer: D } = vt();
+  oe(() => {
+    c && (t.has_been_displayed ? g(xe(t.template)) : (t.guid.startsWith("OFR") ? D({
       ...t,
       has_been_displayed: !0
     }) : y({
       ...t,
       has_been_displayed: !0
-    }), R(xe(t.template))));
-  }, [c]), ee(() => {
+    }), g(De(t.template))));
+  }, [c]), oe(() => {
     if (c && t)
       if (t.template === "MarketingOffer") {
         const v = t;
@@ -1321,7 +1321,7 @@ const $ = u.createContext(null), pt = ({
         });
   }, [t, a, c]);
   const O = () => {
-    if (p && p(t), R(We(t.template)), t.template === "MarketingOffer") {
+    if (p && p(t), g(we(t.template)), t.template === "MarketingOffer") {
       const v = t;
       _?.capture("clicked_messaging_insight", {
         template: t.template,
@@ -1336,7 +1336,7 @@ const $ = u.createContext(null), pt = ({
       });
   };
   return /* @__PURE__ */ e(
-    te,
+    re,
     {
       actionText: t.micro_call_to_action || E.micro_card_cta,
       ariaLabel: i,
@@ -1344,8 +1344,8 @@ const $ = u.createContext(null), pt = ({
       description: t?.html_micro_description && t?.html_micro_description.length > 0 ? t.html_micro_description : t.html_description,
       fontColors: { buttonColor: r?.primary_300 },
       heightOverrides: n,
-      icon: ve && /* @__PURE__ */ e(
-        ve,
+      icon: Se && /* @__PURE__ */ e(
+        Se,
         {
           beat: t,
           clientColorScheme: r,
@@ -1375,7 +1375,7 @@ const $ = u.createContext(null), pt = ({
   shouldApplyNewAnimation: d = !1,
   visibleCardsCount: p = 1
 }) => {
-  const _ = Se(), { carouselCopy: C } = k(), f = Math.floor(a) > n || o - p + 1 === 0, h = a < 0 || t - 1 === o, m = _.palette.grey[500], c = i?.primary_300 ?? _.palette.primary.main;
+  const _ = Me(), { carouselCopy: C } = F(), f = Math.floor(a) > n || o - p + 1 === 0, h = a < 0 || t - 1 === o, m = _.palette.grey[500], c = i?.primary_300 ?? _.palette.primary.main;
   return /* @__PURE__ */ I(
     K,
     {
@@ -1392,7 +1392,7 @@ const $ = u.createContext(null), pt = ({
       },
       children: [
         /* @__PURE__ */ e(
-          pe,
+          _e,
           {
             "aria-disabled": f,
             "aria-label": C.previous_insight_cta_aria,
@@ -1408,8 +1408,8 @@ const $ = u.createContext(null), pt = ({
             )
           }
         ),
-        Array.from({ length: t }).map((E, R) => {
-          const y = R === o;
+        Array.from({ length: t }).map((E, g) => {
+          const y = g === o;
           return /* @__PURE__ */ e(
             U,
             {
@@ -1431,18 +1431,18 @@ const $ = u.createContext(null), pt = ({
                 width: y && d ? 24 : 8
               }
             },
-            `carousel-button-${R}`
+            `carousel-button-${g}`
           );
         }),
         /* @__PURE__ */ e(
-          pe,
+          _e,
           {
             "aria-disabled": h,
             "aria-label": C.next_insight_cta_aria,
             disabled: h,
             onClick: r,
             children: /* @__PURE__ */ e(
-              Me,
+              Ae,
               {
                 style: {
                   color: h ? m : c
@@ -1472,77 +1472,77 @@ const $ = u.createContext(null), pt = ({
   visibleCardsCount: c = 1
   // Default to 1 card visible
 }) => {
-  const E = u.useRef(null), R = u.useRef(null), [y, D] = u.useState(0), [O, v] = u.useState(null), [F, z] = u.useState(null), [g, L] = u.useState(null), [ie, G] = u.useState(p), { carouselCopy: B } = k(), { onEvent: b } = Y();
+  const E = u.useRef(null), g = u.useRef(null), [y, D] = u.useState(0), [O, v] = u.useState(null), [B, z] = u.useState(null), [R, L] = u.useState(null), [le, G] = u.useState(p), { carouselCopy: N } = F(), { onEvent: b } = Y();
   u.useEffect(() => {
     if (E.current && !o) {
       const s = E.current.offsetWidth, A = 8;
       let V;
       if (c > 1) {
-        const Q = (s - (c - 1) * A) / c / 3;
-        V = (s - Q - (c - 1) * A) / c;
+        const J = (s - (c - 1) * A) / c / 3;
+        V = (s - J - (c - 1) * A) / c;
       } else
         V = s;
       L(V);
     }
   }, [c, E.current?.offsetWidth]), u.useEffect(() => {
-    const s = R.current?.offsetWidth;
+    const s = g.current?.offsetWidth;
     if (typeof s == "number" && o) {
       const A = (Z) => {
         G(!0);
-        const q = [
+        const ee = [
           { maxWidth: 375, cardWidth: 268 },
           { maxWidth: 444, cardWidth: 300 },
           { maxWidth: 599, cardWidth: 350 },
           { maxWidth: 749, cardWidth: 450 },
           { maxWidth: 900, cardWidth: 600 }
-        ].find((ne) => Z <= ne.maxWidth);
-        return q ? q.cardWidth : 750;
+        ].find((se) => Z <= se.maxWidth);
+        return ee ? ee.cardWidth : 750;
       };
       L(A(s));
       const V = () => {
-        const Z = R.current?.offsetWidth;
+        const Z = g.current?.offsetWidth;
         typeof Z == "number" && L(A(Z));
       };
       return window.addEventListener("resize", V), () => {
         window.removeEventListener("resize", V);
       };
     }
-  }, [o, R]);
-  const oe = () => {
-    b(M.ON_CAROUSEL_FORWARD_CLICK, i), E.current && g && E.current.scrollTo({
-      left: y + g + 8,
+  }, [o, g]);
+  const j = () => {
+    b(M.ON_CAROUSEL_FORWARD_CLICK, i), E.current && R && E.current.scrollTo({
+      left: y + R + 8,
       top: 0,
       behavior: "smooth"
     });
-  }, re = () => {
-    b(M.ON_CAROUSEL_BACK_CLICK, i), E.current && g && E.current.scrollTo({
-      left: Math.max(0, y - (g + 8)),
+  }, X = () => {
+    b(M.ON_CAROUSEL_BACK_CLICK, i), E.current && R && E.current.scrollTo({
+      left: Math.max(0, y - (R + 8)),
       top: 0,
       behavior: "smooth"
     });
-  }, j = () => {
+  }, ne = () => {
     E.current && D(E.current.scrollLeft);
-  }, X = () => {
-    if (!F || !O) return;
-    F - O > St ? b(M.ON_CAROUSEL_FORWARD_SWIPE, i) : b(M.ON_CAROUSEL_BACK_SWIPE, i);
-  }, N = (s) => {
+  }, ae = () => {
+    if (!B || !O) return;
+    B - O > St ? b(M.ON_CAROUSEL_FORWARD_SWIPE, i) : b(M.ON_CAROUSEL_BACK_SWIPE, i);
+  }, Q = (s) => {
     v(s.targetTouches[0].clientX);
-  }, Be = (s) => {
+  }, q = (s) => {
     v(null), z(s.targetTouches[0].clientX);
-  }, Ee = {
+  }, T = {
     clientColorScheme: r,
     showCTAColocatedWithText: l,
     heightOverrides: n,
     posthog: d,
     showIcon: C,
     variant: h
-  }, le = g ? Math.round(y / (g + 8)) : 0, Ze = E.current ? E.current.scrollWidth - E.current.offsetWidth : 0;
+  }, ce = R ? Math.round(y / (R + 8)) : 0, Ze = E.current ? E.current.scrollWidth - E.current.offsetWidth : 0;
   return /* @__PURE__ */ I(
     K,
     {
-      "aria-label": B.carousel_title,
+      "aria-label": N.carousel_title,
       "aria-roledescription": "carousel",
-      ref: R,
+      ref: g,
       role: "group/region",
       sx: {
         alignItems: "center",
@@ -1555,10 +1555,10 @@ const $ = u.createContext(null), pt = ({
           K,
           {
             direction: "row",
-            onScroll: j,
-            onTouchEnd: X,
-            onTouchMove: N,
-            onTouchStart: Be,
+            onScroll: ne,
+            onTouchEnd: ae,
+            onTouchMove: Q,
+            onTouchStart: q,
             ref: E,
             sx: {
               alignItems: "center",
@@ -1579,21 +1579,21 @@ const $ = u.createContext(null), pt = ({
             },
             children: [
               t.map((s, A) => {
-                const V = A + 1, Z = t.length + 1, Q = Je(
-                  B.card_position_in_carousel_aria,
+                const V = A + 1, Z = t.length + 1, J = Je(
+                  N.card_position_in_carousel_aria,
                   V.toString(),
                   Z.toString()
-                ), q = s.micro_title && s.micro_title.length > 0, ne = s.micro_description && s.micro_description.length > 0, Pe = q ? s.micro_title : s.title, Ge = ne ? s.micro_description : s.description;
+                ), ee = s.micro_title && s.micro_title.length > 0, se = s.micro_description && s.micro_description.length > 0, Pe = ee ? s.micro_title : s.title, Ge = se ? s.micro_description : s.description;
                 return /* @__PURE__ */ e(
                   Mt,
                   {
-                    ariaLabel: `${Q}: ${Pe}, ${Ge}`,
+                    ariaLabel: `${J}: ${Pe}, ${Ge}`,
                     beat: s,
                     index: A,
-                    isActiveCard: A === le,
+                    isActiveCard: A === ce,
                     onCardClick: a,
-                    widthOverrides: g || void 0,
-                    ...Ee
+                    widthOverrides: R || void 0,
+                    ...T
                   },
                   `${s.guid} ${A}`
                 );
@@ -1601,10 +1601,10 @@ const $ = u.createContext(null), pt = ({
               /* @__PURE__ */ e(
                 Vt,
                 {
-                  isActiveCard: le === t.length,
+                  isActiveCard: ce === t.length,
                   onCardClick: a,
-                  widthOverrides: g || void 0,
-                  ...Ee
+                  widthOverrides: R || void 0,
+                  ...T
                 }
               )
             ]
@@ -1614,13 +1614,13 @@ const $ = u.createContext(null), pt = ({
           At,
           {
             clientColorScheme: r,
-            currentBeatIndex: le + c - 1,
+            currentBeatIndex: ce + c - 1,
             numBeats: t.length + 1,
-            onNextClick: oe,
-            onPreviousClick: re,
+            onNextClick: j,
+            onPreviousClick: X,
             scrollRightBoundary: Ze,
             scrollX: y,
-            shouldApplyNewAnimation: ie,
+            shouldApplyNewAnimation: le,
             visibleCardsCount: c
           }
         )
@@ -1634,7 +1634,7 @@ const $ = u.createContext(null), pt = ({
   posthog: r,
   widthOverrides: l
 }) => {
-  const { carouselCopy: n } = k(), { onEvent: a } = Y(), d = () => {
+  const { carouselCopy: n } = F(), { onEvent: a } = Y(), d = () => {
     a && (a(M.ON_VIEW_MORE_CLICKED, i), t(), r?.capture("clicked_view_more"));
   };
   return n ? /* @__PURE__ */ I(
@@ -1650,7 +1650,7 @@ const $ = u.createContext(null), pt = ({
       },
       children: [
         /* @__PURE__ */ e(
-          ue,
+          pe,
           {
             sx: {
               fontSize: 18,
@@ -1678,7 +1678,7 @@ const $ = u.createContext(null), pt = ({
             underline: "none",
             children: [
               /* @__PURE__ */ e(
-                ue,
+                pe,
                 {
                   sx: {
                     color: o?.primary_300,
@@ -1690,7 +1690,7 @@ const $ = u.createContext(null), pt = ({
                   children: n.view_all_insights_in_full_feed_cta_aria
                 }
               ),
-              /* @__PURE__ */ e(Me, { sx: { color: o?.primary_300, ml: "8px" } })
+              /* @__PURE__ */ e(Ae, { sx: { color: o?.primary_300, ml: "8px" } })
             ]
           }
         )
@@ -1702,7 +1702,7 @@ const $ = u.createContext(null), pt = ({
   widthOverrides: o,
   children: t
 }) => {
-  const { carouselCopy: r } = k();
+  const { carouselCopy: r } = F();
   return /* @__PURE__ */ e(
     U,
     {
@@ -1718,7 +1718,7 @@ const $ = u.createContext(null), pt = ({
       children: t
     }
   );
-}, ke = ({
+}, Fe = ({
   ariaLabel: i,
   carouselSize: o,
   clientColorScheme: t,
@@ -1730,9 +1730,9 @@ const $ = u.createContext(null), pt = ({
   variant: p,
   widthOverrides: _
 }) => {
-  const { cardsCopy: C } = k(), { onEvent: f } = Y(), { onPageview: h } = Ne();
+  const { cardsCopy: C } = F(), { onEvent: f } = Y(), { onPageview: h } = Ve();
   u.useEffect(() => {
-    h(H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
+    h(k.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
   }, []);
   const m = () => {
     l && l(), f(M.ON_NO_RELEVANT_INSIGHTS_CLICKED), n?.capture("clicked_insight", {
@@ -1740,14 +1740,14 @@ const $ = u.createContext(null), pt = ({
     });
   };
   return /* @__PURE__ */ e(
-    te,
+    re,
     {
       actionText: C.micro_card_cta,
       ariaLabel: i,
       description: C.no_relevant_insights_card_description,
       fontColors: { buttonColor: t?.primary_300 },
       heightOverrides: r,
-      icon: /* @__PURE__ */ e(Le, {}),
+      icon: /* @__PURE__ */ e(Ne, {}),
       isZeroState: !0,
       onCardClick: m,
       posthog: n,
@@ -1755,7 +1755,7 @@ const $ = u.createContext(null), pt = ({
       style: {
         cardStyle: {
           card: {
-            height: `calc(${Ve[o]}px - 44px)`,
+            height: `calc(${He[o]}px - 44px)`,
             m: "0 auto",
             width: d ? "calc(100% - 32px)" : "100%"
           },
@@ -1772,7 +1772,7 @@ const $ = u.createContext(null), pt = ({
       widthOverrides: _
     }
   );
-}, ci = P(ke), Fe = ({
+}, ci = P(Fe), Be = ({
   ariaLabel: i,
   carouselSize: o,
   heightOverrides: t,
@@ -1783,16 +1783,16 @@ const $ = u.createContext(null), pt = ({
   variant: d,
   widthOverrides: p
 }) => {
-  const { onPageview: _ } = Ne(), { zeroStateCopy: C } = k();
+  const { onPageview: _ } = Ve(), { zeroStateCopy: C } = F();
   return u.useEffect(() => {
-    _(H.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
+    _(k.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
   }, []), /* @__PURE__ */ e(
-    te,
+    re,
     {
       ariaLabel: i,
       description: C.carousel_zero_state_description,
       heightOverrides: t,
-      icon: /* @__PURE__ */ e(Le, {}),
+      icon: /* @__PURE__ */ e(Ne, {}),
       isZeroState: !0,
       onCardClick: r,
       posthog: l,
@@ -1800,7 +1800,7 @@ const $ = u.createContext(null), pt = ({
       style: {
         cardStyle: {
           card: {
-            height: `calc(${Ve[o]}px - 44px)`,
+            height: `calc(${He[o]}px - 44px)`,
             m: "0 auto",
             width: a ? "calc(100% - 32px)" : "100%"
           },
@@ -1814,7 +1814,7 @@ const $ = u.createContext(null), pt = ({
       widthOverrides: p
     }
   );
-}, si = P(Fe), Dt = () => /* @__PURE__ */ e(
+}, si = P(Be), Dt = () => /* @__PURE__ */ e(
   U,
   {
     sx: {
@@ -1826,7 +1826,7 @@ const $ = u.createContext(null), pt = ({
     },
     children: /* @__PURE__ */ e(et, {})
   }
-), T = new ut(), Lt = ({
+), H = new ut(), Lt = ({
   allowSingleCardPeeking: i,
   areBeatsLoading: o,
   beats: t = [],
@@ -1848,70 +1848,70 @@ const $ = u.createContext(null), pt = ({
   showBorder: m = !0,
   showCarouselControls: c,
   showHeader: E,
-  showIcon: R,
+  showIcon: g,
   showWithMargin: y = !0,
   token: D = "",
   useDarkMode: O,
   userHasFullInsightFeedBeats: v,
-  variant: F,
+  variant: B,
   visibleCardsCount: z = 1,
-  widthOverrides: g
+  widthOverrides: R
 }) => {
-  const L = Se(), [ie, G] = ae("STANDARD"), [B, b] = ae(!1), oe = it([_], T), re = ot([C], T);
+  const L = Me(), [le, G] = te("STANDARD"), [N, b] = te(!1), [j, X] = te(!1), ne = it([_], H), ae = ot([C], H);
   u.useEffect(() => {
-    T.isInitialized || T.initialize(n, D, d);
-  }, [n, D, d, T.isInitialized]), u.useEffect(() => {
-    const N = window.innerHeight;
-    N < 180 ? G("STANDARD") : N >= 180 && N < 200 ? G("LARGE") : N >= 200 && N < 248 ? G("XLARGE") : N >= 248 && G("XXLARGE");
+    !H.isInitialized && !j && (H.initialize(n, D, d).catch(() => X(!1)), X(!0));
+  }, [n, D, d, H.isInitialized, j]), u.useEffect(() => {
+    const T = window.innerHeight;
+    T < 180 ? G("STANDARD") : T >= 180 && T < 200 ? G("LARGE") : T >= 200 && T < 248 ? G("XLARGE") : T >= 248 && G("XXLARGE");
   }, [window.innerHeight]), u.useEffect(() => {
-    b(!o && T.isInitialized);
-  }, [o, T.isInitialized]);
-  const j = {
+    b(!o && H.isInitialized);
+  }, [o, H.isInitialized]);
+  const Q = {
     showCTAColocatedWithText: l,
     heightOverrides: a,
     onCardClick: p,
     posthog: f,
-    showIcon: R,
+    showIcon: g,
     showWithMargin: y,
     useDarkMode: O,
-    widthOverrides: g
-  }, X = {
-    carouselSize: ie,
-    variant: F,
-    ...j
+    widthOverrides: R
+  }, q = {
+    carouselSize: le,
+    variant: B,
+    ...Q
   };
   return (
     // The Theme provider must wrap the component so that the styles don't break when imported into other applications.
     /* @__PURE__ */ I(Ue, { theme: L, children: [
       /* @__PURE__ */ e(be, {}),
-      /* @__PURE__ */ e(pt, { onEvent: oe, onPageview: re, store: T, children: /* @__PURE__ */ I(xt, { heightOverrides: a, widthOverrides: g, children: [
-        (o || !T.isInitialized) && /* @__PURE__ */ e(Dt, {}),
-        B && E && /* @__PURE__ */ e(
+      /* @__PURE__ */ e(pt, { onEvent: ne, onPageview: ae, store: H, children: /* @__PURE__ */ I(xt, { heightOverrides: a, widthOverrides: R, children: [
+        !N && /* @__PURE__ */ e(Dt, {}),
+        N && E && /* @__PURE__ */ e(
           wt,
           {
-            analyticsMetadata: fe,
+            analyticsMetadata: me,
             clientColorScheme: r,
             onCardClick: p,
             posthog: f,
-            widthOverrides: g
+            widthOverrides: R
           }
         ),
-        B && !!t.length && /* @__PURE__ */ e(
+        N && !!t.length && /* @__PURE__ */ e(
           Tt,
           {
             allowSingleCardPeeking: i,
-            analyticsMetadata: fe,
+            analyticsMetadata: me,
             beats: t,
             clientColorScheme: r,
             shouldApplyNewAnimation: h,
             showCarouselControls: c,
-            variant: m ? F : void 0,
+            variant: m ? B : void 0,
             visibleCardsCount: z,
-            ...j
+            ...Q
           }
         ),
-        B && !t.length && v && /* @__PURE__ */ e(ke, { clientColorScheme: r, ...X }),
-        B && !t.length && !v && /* @__PURE__ */ e(Fe, { ...X })
+        N && !t.length && v && /* @__PURE__ */ e(Fe, { clientColorScheme: r, ...q }),
+        N && !t.length && !v && /* @__PURE__ */ e(Be, { ...q })
       ] }) })
     ] })
   );
@@ -1926,11 +1926,11 @@ const $ = u.createContext(null), pt = ({
   variant: d,
   widthOverrides: p
 }) => {
-  const _ = ce(), { ref: C, inView: f } = Ae({
-    threshold: He
-  }), { cardsCopy: h } = k(), { onEvent: m } = Y();
-  ee(() => {
-    f && (m(De.ON_VIEW_MORE_VIEWED), n?.capture("viewed_insight", {
+  const _ = de(), { ref: C, inView: f } = Oe({
+    threshold: ke
+  }), { cardsCopy: h } = F(), { onEvent: m } = Y();
+  oe(() => {
+    f && (m(Le.ON_VIEW_MORE_VIEWED), n?.capture("viewed_insight", {
       template: "view_more_card"
     }));
   }, [f]);
@@ -1940,14 +1940,14 @@ const $ = u.createContext(null), pt = ({
     });
   };
   return /* @__PURE__ */ e(
-    te,
+    re,
     {
       actionText: h.micro_card_cta,
       ariaLabel: o,
       description: h.view_more_card_description,
       fontColors: { buttonColor: t?.primary_300 },
       heightOverrides: r,
-      icon: /* @__PURE__ */ e(Rt, { color: t?.primary_300 ?? _.palette.primary.main }),
+      icon: /* @__PURE__ */ e(gt, { color: t?.primary_300 ?? _.palette.primary.main }),
       isActiveCard: i,
       onCardClick: c,
       posthog: n,
@@ -1966,12 +1966,12 @@ export {
   pt as I,
   Tt as M,
   ci as N,
-  fe as T,
+  me as T,
   Vt as V,
   si as Z,
-  te as a,
+  re as a,
   di as b,
-  Rt as c,
+  gt as c,
   yt as d,
-  Le as e
+  Ne as e
 };

package/dist/microinsights/index.es.js

@@ -1,4 +1,4 @@
-import { A as s, B as e, C as o, c as t, b as i, I as d, M as n, a as C, d as c, N as I, V as M, Z as g, e as h } from "../ViewMoreMicroCard-C66pzgfS.mjs";
+import { A as s, B as e, C as o, c as t, b as i, I as d, M as n, a as C, d as c, N as I, V as M, Z as g, e as h } from "../ViewMoreMicroCard-B-3SFewe.mjs";
 export {
   s as AppStore,
   e as BeatCard,

package/dist/trends/index.es.js

@@ -20,7 +20,7 @@ import { C as st } from "../CurrencyText-YUhH2caW.mjs";
 import { c as Me } from "../Category-CevNQ03n.mjs";
 import { b as rt } from "../Localization-2MODESHW.mjs";
 import { H as be } from "../HeaderCell-DjuifqHJ.mjs";
-import { T as A, b as at } from "../ViewMoreMicroCard-C66pzgfS.mjs";
+import { T as A, b as at } from "../ViewMoreMicroCard-B-3SFewe.mjs";
 import { A as y, W as Ae } from "../WidgetContainer-CPBhSP3k.mjs";
 import { a as Re, T as ke } from "../TransactionDetails-BafSm7_T.mjs";
 import { D as fe } from "../Drawer-kEE73B87.mjs";

package/package.json

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