@mx-cartographer/experiences 7.0.32 → 7.0.34-alpha.sms1

package/dist/{ViewMoreMicroCard-DFAY0tA8.mjs → ViewMoreMicroCard-CXxtKHUM.mjs}

@@ -1,47 +1,50 @@
 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 je, CategoryIcon as Ye, 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-DaDBSR_1.mjs";
-import { B as Ce } from "./BeatApi-DLu87ijw.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(() => {
-      this.copyObject = o[this.translationKey];
+    We(() => {
+      this.copyObject = o[this.translationKey], console.log("this.copyObject", this.copyObject);
     });
   };
   get cardsCopy() {
@@ -54,7 +57,7 @@ class ct {
     return this.copyObject.zero_state;
   }
 }
-const de = {
+const Ee = {
   BillAmountNotStandard: "BillAmountNotStandard",
   CanadianUpcomingDeadlineAlert: "CanadianUpcomingDeadlineAlert",
   DuplicatePaymentV2: "DuplicatePaymentV2",
@@ -71,47 +74,47 @@ 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)]: {
-      action: x.MICRO_BEAT_CLICKED,
-      category: w.BEAT_INTERACTION,
-      label: he(o),
+    [we(o)]: {
+      action: D.MICRO_BEAT_CLICKED,
+      category: x.BEAT_INTERACTION,
+      label: ue(o),
       value: S
     }
   }),
   {}
-), dt = () => Object.values(de).reduce(
+), dt = () => Object.values(Ee).reduce(
   (i, o) => ({
     ...i,
-    [we(o)]: {
-      action: x.MICRO_BEAT_DISPLAYED,
-      category: w.BEAT_INTERACTION,
-      label: he(o),
+    [xe(o)]: {
+      action: D.MICRO_BEAT_DISPLAYED,
+      category: x.BEAT_INTERACTION,
+      label: ue(o),
       value: S
     }
   }),
   {}
-), ht = () => Object.values(de).reduce(
+), ht = () => Object.values(Ee).reduce(
   (i, o) => ({
     ...i,
-    [xe(o)]: {
-      action: x.MICRO_BEAT_DISPLAYED_FIRST_TIME,
-      category: w.BEAT_INTERACTION,
-      label: he(o),
+    [De(o)]: {
+      action: D.MICRO_BEAT_DISPLAYED_FIRST_TIME,
+      category: x.BEAT_INTERACTION,
+      label: ue(o),
       value: S
     }
   }),
   {}
-), W = {
+), w = {
   CARD: "Card",
   CAROUSEL_CONTROL: "Carousel Control",
   MICRO_WIDGET: "Micro Widget",
   VIEW_MORE: "View More"
-}, w = {
+}, x = {
   MICRO_WIDGET_INTERACTION: "Micro Widget Interaction",
   BEAT_INTERACTION: "Beat Interaction"
 }, M = {
@@ -121,9 +124,9 @@ 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 = {
+}, D = {
   CONTROL_BACKWARD: "Control Backward",
   CONTROL_FORWARD: "Control Forward",
   MICRO_BEAT_CLICKED: "Micro Beat Clicked",
@@ -131,95 +134,95 @@ 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]: {
-    label: W.MICRO_WIDGET,
-    name: H.MICRO_WIDGET_CAROUSEL,
-    path: me.INSIGHTS_MICRO_WIDGET,
+  [k.MICRO_WIDGET_CAROUSEL]: {
+    label: w.MICRO_WIDGET,
+    name: k.MICRO_WIDGET_CAROUSEL,
+    path: ge.INSIGHTS_MICRO_WIDGET,
     value: S
   },
   // zero state
-  [H.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
-    label: W.MICRO_WIDGET,
-    name: H.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
-    path: me.INSIGHTS_MICRO_WIDGET,
+  [k.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
+    label: w.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]: {
-    label: W.MICRO_WIDGET,
-    name: H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
+  [k.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
+    label: w.MICRO_WIDGET,
+    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,
-    category: w.MICRO_WIDGET_INTERACTION,
-    label: W.CAROUSEL_CONTROL,
+    action: D.CONTROL_BACKWARD,
+    category: x.MICRO_WIDGET_INTERACTION,
+    label: w.CAROUSEL_CONTROL,
     value: S
   },
   [M.ON_CAROUSEL_FORWARD_CLICK]: {
-    action: x.CONTROL_FORWARD,
-    category: w.MICRO_WIDGET_INTERACTION,
-    label: W.CAROUSEL_CONTROL,
+    action: D.CONTROL_FORWARD,
+    category: x.MICRO_WIDGET_INTERACTION,
+    label: w.CAROUSEL_CONTROL,
     value: S
   },
   [M.ON_CAROUSEL_BACK_SWIPE]: {
-    action: x.SWIPE_BACKWARD,
-    category: w.MICRO_WIDGET_INTERACTION,
-    label: W.CAROUSEL_CONTROL,
+    action: D.SWIPE_BACKWARD,
+    category: x.MICRO_WIDGET_INTERACTION,
+    label: w.CAROUSEL_CONTROL,
     value: S
   },
   [M.ON_CAROUSEL_FORWARD_SWIPE]: {
-    action: x.SWIPE_FORWARD,
-    category: w.MICRO_WIDGET_INTERACTION,
-    label: W.CAROUSEL_CONTROL,
+    action: D.SWIPE_FORWARD,
+    category: x.MICRO_WIDGET_INTERACTION,
+    label: w.CAROUSEL_CONTROL,
     value: S
   },
   // read more card events
   [M.ON_VIEW_MORE_CLICKED]: {
-    action: x.MICRO_BEAT_CLICKED,
-    category: w.BEAT_INTERACTION,
-    label: W.VIEW_MORE,
+    action: D.MICRO_BEAT_CLICKED,
+    category: x.BEAT_INTERACTION,
+    label: w.VIEW_MORE,
     value: S
   },
-  [De.ON_VIEW_MORE_VIEWED]: {
-    action: x.MICRO_BEAT_DISPLAYED,
-    category: w.BEAT_INTERACTION,
-    label: W.VIEW_MORE,
+  [Le.ON_VIEW_MORE_VIEWED]: {
+    action: D.MICRO_BEAT_DISPLAYED,
+    category: x.BEAT_INTERACTION,
+    label: w.VIEW_MORE,
     value: S
   },
   ...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);
@@ -236,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;
     });
   };
@@ -251,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,
@@ -269,9 +272,9 @@ 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(
-      Ye,
+  }, g) {
+    const y = de(), [L, O] = u.useState(!1), { cardStyle: v, linkTextStyle: B } = f, z = c ? v : { border: "none", boxShadow: "none", ...v }, R = /* @__PURE__ */ e(
+      je,
       {
         className: "mx-micro-card-description",
         color: h.textColor ? "undefined" : "text.primary",
@@ -303,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%",
@@ -319,10 +322,10 @@ 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,
+              border: L ? "1px solid rgba(82, 138, 224, 0.8)" : void 0,
               borderRadius: "8px",
               height: "100%"
             },
@@ -357,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,
                         {
@@ -374,13 +377,13 @@ const $ = u.createContext(null), pt = ({
                           children: /* @__PURE__ */ e(
                             U,
                             {
-                              sx: (L) => ({
-                                color: h.buttonColor ? h.buttonColor : L.palette.primary.main,
+                              sx: (N) => ({
+                                color: h.buttonColor ? h.buttonColor : N.palette.primary.main,
                                 fontSize: 14,
                                 fontWeight: "bold",
                                 px: 28,
-                                fontFamily: L.typography.fontFamily,
-                                ...F
+                                fontFamily: N.typography.fontFamily,
+                                ...B
                               }),
                               children: o
                             }
@@ -398,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 } });
+  }, []), /* @__PURE__ */ e(Ye, { 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,
     {
@@ -418,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,
@@ -444,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",
     {
@@ -1236,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",
@@ -1248,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");
@@ -1260,22 +1263,22 @@ const $ = u.createContext(null), pt = ({
       "useInsightsMicroWidgetStore() must be used within the InsightsMicroWidgetDataProvider"
     );
   return i.store.insightsMicroWidgetStore;
-}, Y = () => {
+}, j = () => {
   const i = u.useContext($);
   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,
@@ -1290,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 } = j(), { updateBeat: y, updateOffer: L } = vt();
+  oe(() => {
+    c && (t.has_been_displayed ? g(xe(t.template)) : (t.guid.startsWith("OFR") ? L({
       ...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;
@@ -1318,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,
@@ -1333,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,
@@ -1341,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,
@@ -1372,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,
     {
@@ -1389,7 +1392,7 @@ const $ = u.createContext(null), pt = ({
       },
       children: [
         /* @__PURE__ */ e(
-          pe,
+          _e,
           {
             "aria-disabled": f,
             "aria-label": C.previous_insight_cta_aria,
@@ -1405,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,
             {
@@ -1428,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
@@ -1469,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, L] = u.useState(0), [O, v] = u.useState(null), [B, z] = u.useState(null), [R, N] = u.useState(null), [le, G] = u.useState(p), { carouselCopy: V } = F(), { onEvent: b } = j();
   u.useEffect(() => {
     if (E.current && !o) {
       const s = E.current.offsetWidth, A = 8;
-      let V;
+      let H;
       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;
+        H = (s - J - (c - 1) * A) / c;
       } else
-        V = s;
-      L(V);
+        H = s;
+      N(H);
     }
   }, [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;
-        typeof Z == "number" && L(A(Z));
+      N(A(s));
+      const H = () => {
+        const Z = g.current?.offsetWidth;
+        typeof Z == "number" && N(A(Z));
       };
-      return window.addEventListener("resize", V), () => {
-        window.removeEventListener("resize", V);
+      return window.addEventListener("resize", H), () => {
+        window.removeEventListener("resize", H);
       };
     }
-  }, [o, R]);
-  const oe = () => {
-    b(M.ON_CAROUSEL_FORWARD_CLICK, i), E.current && g && E.current.scrollTo({
-      left: y + g + 8,
+  }, [o, g]);
+  const Y = () => {
+    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 = () => {
-    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) => {
+  }, ne = () => {
+    E.current && L(E.current.scrollLeft);
+  }, 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": V.carousel_title,
       "aria-roledescription": "carousel",
-      ref: R,
+      ref: g,
       role: "group/region",
       sx: {
         alignItems: "center",
@@ -1552,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",
@@ -1576,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,
-                  V.toString(),
+                const H = A + 1, Z = t.length + 1, J = Je(
+                  V.card_position_in_carousel_aria,
+                  H.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}`
                 );
@@ -1598,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
                 }
               )
             ]
@@ -1611,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: Y,
+            onPreviousClick: X,
             scrollRightBoundary: Ze,
             scrollX: y,
-            shouldApplyNewAnimation: ie,
+            shouldApplyNewAnimation: le,
             visibleCardsCount: c
           }
         )
@@ -1631,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 } = j(), d = () => {
     a && (a(M.ON_VIEW_MORE_CLICKED, i), t(), r?.capture("clicked_view_more"));
   };
   return n ? /* @__PURE__ */ I(
@@ -1647,7 +1650,7 @@ const $ = u.createContext(null), pt = ({
       },
       children: [
         /* @__PURE__ */ e(
-          ue,
+          pe,
           {
             sx: {
               fontSize: 18,
@@ -1675,7 +1678,7 @@ const $ = u.createContext(null), pt = ({
             underline: "none",
             children: [
               /* @__PURE__ */ e(
-                ue,
+                pe,
                 {
                   sx: {
                     color: o?.primary_300,
@@ -1687,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" } })
             ]
           }
         )
@@ -1699,7 +1702,7 @@ const $ = u.createContext(null), pt = ({
   widthOverrides: o,
   children: t
 }) => {
-  const { carouselCopy: r } = k();
+  const { carouselCopy: r } = F();
   return /* @__PURE__ */ e(
     U,
     {
@@ -1715,7 +1718,7 @@ const $ = u.createContext(null), pt = ({
       children: t
     }
   );
-}, ke = ({
+}, Fe = ({
   ariaLabel: i,
   carouselSize: o,
   clientColorScheme: t,
@@ -1727,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 } = j(), { 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", {
@@ -1737,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,
@@ -1752,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%"
           },
@@ -1769,7 +1772,7 @@ const $ = u.createContext(null), pt = ({
       widthOverrides: _
     }
   );
-}, ci = P(ke), Fe = ({
+}, ci = P(Fe), Be = ({
   ariaLabel: i,
   carouselSize: o,
   heightOverrides: t,
@@ -1780,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,
@@ -1797,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%"
           },
@@ -1811,7 +1814,7 @@ const $ = u.createContext(null), pt = ({
       widthOverrides: p
     }
   );
-}, si = P(Fe), Dt = () => /* @__PURE__ */ e(
+}, si = P(Be), Dt = () => /* @__PURE__ */ e(
   U,
   {
     sx: {
@@ -1823,7 +1826,7 @@ const $ = u.createContext(null), pt = ({
     },
     children: /* @__PURE__ */ e(et, {})
   }
-), T = new ut(), Lt = ({
+), W = new ut(), Lt = ({
   allowSingleCardPeeking: i,
   areBeatsLoading: o,
   beats: t = [],
@@ -1845,70 +1848,70 @@ const $ = u.createContext(null), pt = ({
   showBorder: m = !0,
   showCarouselControls: c,
   showHeader: E,
-  showIcon: R,
+  showIcon: g,
   showWithMargin: y = !0,
-  token: D = "",
+  token: L = "",
   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 N = Me(), [le, G] = te("STANDARD"), [V, b] = te(!1), [Y, X] = te(!1), ne = it([_], W), ae = ot([C], W);
   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");
+    !W.isInitialized && !Y && (W.initialize(n, L, d).catch(() => X(!1)), X(!0));
+  }, [n, L, d, W.isInitialized, Y]), 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 && W.isInitialized);
+  }, [o, W.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__ */ I(Ue, { theme: N, 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: W, children: /* @__PURE__ */ I(xt, { heightOverrides: a, widthOverrides: R, children: [
+        (!V || !W.isInitialized) && /* @__PURE__ */ e(Dt, {}),
+        V && E && /* @__PURE__ */ e(
           wt,
           {
-            analyticsMetadata: fe,
+            analyticsMetadata: me,
             clientColorScheme: r,
             onCardClick: p,
             posthog: f,
-            widthOverrides: g
+            widthOverrides: R
           }
         ),
-        B && !!t.length && /* @__PURE__ */ e(
+        V && !!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 })
+        V && !t.length && v && /* @__PURE__ */ e(Fe, { clientColorScheme: r, ...q }),
+        V && !t.length && !v && /* @__PURE__ */ e(Be, { ...q })
       ] }) })
     ] })
   );
@@ -1923,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 } = j();
+  oe(() => {
+    f && (m(Le.ON_VIEW_MORE_VIEWED), n?.capture("viewed_insight", {
       template: "view_more_card"
     }));
   }, [f]);
@@ -1937,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,
@@ -1963,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
 };