@mx-cartographer/experiences 7.0.0-alpha.mega1 → 7.0.0

package/dist/{ViewMoreMicroCard-CAPFNz-J.mjs → ViewMoreMicroCard-BZI5VMNW.mjs}

@@ -1,30 +1,33 @@
-import { jsx as e, jsxs as R } from "react/jsx-runtime";
-import E, { useState as ae, useEffect as q } from "react";
-import { observer as P } from "mobx-react-lite";
-import Pe from "@mui/material/CssBaseline";
-import { useTheme as ye, ThemeProvider as Ge } from "@mui/material/styles";
-import be from "@mui/material/Link";
-import U from "@mui/material/Stack";
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import u, { useState as ae, useEffect as ee } from "react";
+import { observer as Z } from "mobx-react-lite";
+import be from "@mui/material/CssBaseline";
+import { useTheme as ve, ThemeProvider as Ue } from "@mui/material/styles";
+import ze from "@mui/material/Link";
+import K from "@mui/material/Stack";
 import Ee from "@mui/material/Typography";
-import { ChevronLeft as Ue, ChevronRight as ve } from "@mxenabled/mx-icons";
-import { L as ze } from "./Loader-Dp1P2gNw.mjs";
-import b from "@mui/material/Box";
+import { ChevronLeft as Ke, ChevronRight as Se } from "@mxenabled/mx-icons";
+import { L as $e } from "./Loader-Dp1P2gNw.mjs";
+import U from "@mui/material/Box";
 import ue from "@mui/material/IconButton";
-import { useInView as Se } from "react-intersection-observer";
-import { P as Ke, CategoryIcon as $e, useTokens as Me, MerchantLogo as Ye, Icon as Q } from "@mxenabled/mxui";
-import Ae from "@mui/material/styles/useTheme";
-import { c as je } from "./Category-5S6uwuXz.mjs";
-import { css as Xe } from "@mxenabled/cssinjs";
-import { b as Qe } from "./Localization-2MODESHW.mjs";
-import qe from "@mui/material/CircularProgress";
-import { makeAutoObservable as ce, runInAction as Oe } from "mobx";
-import { G as pe, a as Je, u as et, b as tt } from "./useCombineEvents-DaDBSR_1.mjs";
+import { useInView as Me } from "react-intersection-observer";
+import { P as Ye, CategoryIcon as je, useTokens as Ae, MerchantLogo as Xe, Icon as J } from "@mxenabled/mxui";
+import Oe 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 ce, runInAction as Te } from "mobx";
+import { G as pe, a as tt, u as it, b as ot } from "./useCombineEvents-DaDBSR_1.mjs";
 import { B as _e } from "./BeatApi-DLu87ijw.mjs";
-import it from "@mui/material/Card";
-import ot from "@mui/material/CardActions";
-import rt from "@mui/material/CardContent";
-import lt from "@mui/material/CardHeader";
-class nt {
+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 Ce = {
+  featureVersion: "spendVsIncomeTrends"
+};
+class ct {
   copyApi = new pe("/", "");
   copyObject = {};
   namespace = "experiences";
@@ -37,7 +40,7 @@ class nt {
   };
   loadCopy = async () => {
     const o = await this.copyApi.getGlobalCopy(this.namespace, this.translationKey);
-    Oe(() => {
+    Te(() => {
       this.copyObject = o[this.translationKey];
     });
   };
@@ -68,59 +71,59 @@ const de = {
   WeeklyNewMerchantsV2: "WeeklyNewMerchantsV2",
   MonthlySpendComparison: "MonthlySpendComparison",
   MonthlySpendToIncomeComparison: "MonthlySpendToIncomeComparison"
-}, v = window?.app?.clientConfig?.microwidget_instance_id || "", Ce = {
+}, S = window?.app?.clientConfig?.microwidget_instance_id || "", fe = {
   INSIGHTS_MICRO_WIDGET: "/micro-insights-carousel"
-}, Te = (i) => `on${i}Click`, We = (i) => `on${i}View`, we = (i) => `on${i}ViewFirstTime`, se = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), at = () => Object.values(de).reduce(
+}, We = (i) => `on${i}Click`, we = (i) => `on${i}View`, xe = (i) => `on${i}ViewFirstTime`, se = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), dt = () => Object.values(de).reduce(
   (i, o) => ({
     ...i,
-    [Te(o)]: {
-      action: N.MICRO_BEAT_CLICKED,
-      category: L.BEAT_INTERACTION,
+    [We(o)]: {
+      action: D.MICRO_BEAT_CLICKED,
+      category: x.BEAT_INTERACTION,
       label: se(o),
-      value: v
+      value: S
     }
   }),
   {}
-), ct = () => Object.values(de).reduce(
+), st = () => Object.values(de).reduce(
   (i, o) => ({
     ...i,
-    [We(o)]: {
-      action: N.MICRO_BEAT_DISPLAYED,
-      category: L.BEAT_INTERACTION,
+    [we(o)]: {
+      action: D.MICRO_BEAT_DISPLAYED,
+      category: x.BEAT_INTERACTION,
       label: se(o),
-      value: v
+      value: S
     }
   }),
   {}
-), dt = () => Object.values(de).reduce(
+), ht = () => Object.values(de).reduce(
   (i, o) => ({
     ...i,
-    [we(o)]: {
-      action: N.MICRO_BEAT_DISPLAYED_FIRST_TIME,
-      category: L.BEAT_INTERACTION,
+    [xe(o)]: {
+      action: D.MICRO_BEAT_DISPLAYED_FIRST_TIME,
+      category: x.BEAT_INTERACTION,
       label: se(o),
-      value: v
+      value: S
     }
   }),
   {}
-), D = {
+), w = {
   CARD: "Card",
   CAROUSEL_CONTROL: "Carousel Control",
   MICRO_WIDGET: "Micro Widget",
   VIEW_MORE: "View More"
-}, L = {
+}, x = {
   MICRO_WIDGET_INTERACTION: "Micro Widget Interaction",
   BEAT_INTERACTION: "Beat Interaction"
-}, S = {
+}, M = {
   ON_CAROUSEL_BACK_CLICK: "onCarouselBackClick",
   ON_CAROUSEL_BACK_SWIPE: "onCarouselBackSwipe",
   ON_CAROUSEL_FORWARD_CLICK: "onCarouselForwardClick",
   ON_CAROUSEL_FORWARD_SWIPE: "onCarouselForwardSwipe",
   ON_NO_RELEVANT_INSIGHTS_CLICKED: "onNoRelevantInsightsClicked",
   ON_VIEW_MORE_CLICKED: "onViewMoreClicked"
-}, xe = {
+}, De = {
   ON_VIEW_MORE_VIEWED: "onViewMoreCardView"
-}, N = {
+}, D = {
   CONTROL_BACKWARD: "Control Backward",
   CONTROL_FORWARD: "Control Forward",
   MICRO_BEAT_CLICKED: "Micro Beat Clicked",
@@ -128,92 +131,92 @@ const de = {
   MICRO_BEAT_DISPLAYED_FIRST_TIME: "Micro Beat Displayed For First Time",
   SWIPE_BACKWARD: "Swipe Backward",
   SWIPE_FORWARD: "Swipe Forward"
-}, k = {
+}, V = {
   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"
-}, fe = {
-  [k.MICRO_WIDGET_CAROUSEL]: {
-    label: D.MICRO_WIDGET,
-    name: k.MICRO_WIDGET_CAROUSEL,
-    path: Ce.INSIGHTS_MICRO_WIDGET,
-    value: v
+}, me = {
+  [V.MICRO_WIDGET_CAROUSEL]: {
+    label: w.MICRO_WIDGET,
+    name: V.MICRO_WIDGET_CAROUSEL,
+    path: fe.INSIGHTS_MICRO_WIDGET,
+    value: S
   },
   // zero state
-  [k.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
-    label: D.MICRO_WIDGET,
-    name: k.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
-    path: Ce.INSIGHTS_MICRO_WIDGET,
-    value: v
+  [V.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
+    label: w.MICRO_WIDGET,
+    name: V.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
+    path: fe.INSIGHTS_MICRO_WIDGET,
+    value: S
   },
   // no relevant cards
-  [k.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
-    label: D.MICRO_WIDGET,
-    name: k.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
+  [V.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
+    label: w.MICRO_WIDGET,
+    name: V.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
     path: "/micro-widget",
-    value: v
+    value: S
   }
-}, me = {
+}, Re = {
   // carousel control interaction events - clicks and swipes
-  [S.ON_CAROUSEL_BACK_CLICK]: {
-    action: N.CONTROL_BACKWARD,
-    category: L.MICRO_WIDGET_INTERACTION,
-    label: D.CAROUSEL_CONTROL,
-    value: v
+  [M.ON_CAROUSEL_BACK_CLICK]: {
+    action: D.CONTROL_BACKWARD,
+    category: x.MICRO_WIDGET_INTERACTION,
+    label: w.CAROUSEL_CONTROL,
+    value: S
   },
-  [S.ON_CAROUSEL_FORWARD_CLICK]: {
-    action: N.CONTROL_FORWARD,
-    category: L.MICRO_WIDGET_INTERACTION,
-    label: D.CAROUSEL_CONTROL,
-    value: v
+  [M.ON_CAROUSEL_FORWARD_CLICK]: {
+    action: D.CONTROL_FORWARD,
+    category: x.MICRO_WIDGET_INTERACTION,
+    label: w.CAROUSEL_CONTROL,
+    value: S
   },
-  [S.ON_CAROUSEL_BACK_SWIPE]: {
-    action: N.SWIPE_BACKWARD,
-    category: L.MICRO_WIDGET_INTERACTION,
-    label: D.CAROUSEL_CONTROL,
-    value: v
+  [M.ON_CAROUSEL_BACK_SWIPE]: {
+    action: D.SWIPE_BACKWARD,
+    category: x.MICRO_WIDGET_INTERACTION,
+    label: w.CAROUSEL_CONTROL,
+    value: S
   },
-  [S.ON_CAROUSEL_FORWARD_SWIPE]: {
-    action: N.SWIPE_FORWARD,
-    category: L.MICRO_WIDGET_INTERACTION,
-    label: D.CAROUSEL_CONTROL,
-    value: v
+  [M.ON_CAROUSEL_FORWARD_SWIPE]: {
+    action: D.SWIPE_FORWARD,
+    category: x.MICRO_WIDGET_INTERACTION,
+    label: w.CAROUSEL_CONTROL,
+    value: S
   },
   // read more card events
-  [S.ON_VIEW_MORE_CLICKED]: {
-    action: N.MICRO_BEAT_CLICKED,
-    category: L.BEAT_INTERACTION,
-    label: D.VIEW_MORE,
-    value: v
+  [M.ON_VIEW_MORE_CLICKED]: {
+    action: D.MICRO_BEAT_CLICKED,
+    category: x.BEAT_INTERACTION,
+    label: w.VIEW_MORE,
+    value: S
   },
-  [xe.ON_VIEW_MORE_VIEWED]: {
-    action: N.MICRO_BEAT_DISPLAYED,
-    category: L.BEAT_INTERACTION,
-    label: D.VIEW_MORE,
-    value: v
+  [De.ON_VIEW_MORE_VIEWED]: {
+    action: D.MICRO_BEAT_DISPLAYED,
+    category: x.BEAT_INTERACTION,
+    label: w.VIEW_MORE,
+    value: S
   },
-  ...at(),
-  ...ct(),
-  ...dt()
-}, Re = async (i, o) => !o || !me[i] ? null : o.sendAnalyticEvent(me[i]).then((t) => t).catch((t) => {
+  ...dt(),
+  ...st(),
+  ...ht()
+}, ge = async (i, o) => !o || !Re[i] ? null : o.sendAnalyticEvent(Re[i]).then((t) => t).catch((t) => {
   throw t;
-}), ge = async (i, o) => !o || !fe[i] ? null : o.sendAnalyticsPageview(fe[i]).then((t) => t).catch((t) => {
+}), Ie = async (i, o) => !o || !me[i] ? null : o.sendAnalyticsPageview(me[i]).then((t) => t).catch((t) => {
   throw t;
 });
-class st {
-  onAnalyticEvent = Re;
-  onAnalyticPageView = ge;
+class Et {
+  onAnalyticEvent = ge;
+  onAnalyticPageView = Ie;
   beatApi = new _e("/", "");
   constructor() {
     ce(this);
   }
   initialize = async (o, t, r) => {
     this.onAnalyticEvent = (l, n) => {
-      Re(l, n).then((a) => a).catch((a) => {
+      ge(l, n).then((a) => a).catch((a) => {
         throw a.status === 401 && r(), a;
       });
     }, this.onAnalyticPageView = (l, n) => {
-      ge(l, n).then((a) => a).catch((a) => {
+      Ie(l, n).then((a) => a).catch((a) => {
         throw a.status === 401 && r(), a;
       });
     }, this.beatApi = new _e(o, t);
@@ -225,7 +228,7 @@ class st {
     this.beatApi.updateOffer(o);
   };
 }
-class ht {
+class ut {
   copyStore;
   endpoint = "/";
   insightsMicroWidgetStore;
@@ -233,22 +236,22 @@ class ht {
   token = "";
   isInitialized = !1;
   constructor() {
-    this.copyStore = new nt(), this.insightsMicroWidgetStore = new st(), ce(this);
+    this.copyStore = new ct(), this.insightsMicroWidgetStore = new Et(), ce(this);
   }
   initialize = async (o, t, r) => {
     await this.copyStore.initialize(o, t), await this.insightsMicroWidgetStore.initialize(o, t, r);
-    const l = await Je(o, t, "1.0.0", "Micro Insights Carousel");
-    Oe(() => {
+    const l = await tt(o, t, "1.0.0", "Micro Insights Carousel");
+    Te(() => {
       this.session = l, this.isInitialized = !0;
     });
   };
 }
-const z = E.createContext(null), Et = ({
+const $ = u.createContext(null), pt = ({
   onEvent: i,
   onPageview: o,
   store: t,
   children: r
-}) => /* @__PURE__ */ e(z.Provider, { value: { onEvent: i, onPageview: o, store: t, children: r }, children: r }), J = E.forwardRef(
+}) => /* @__PURE__ */ e($.Provider, { value: { onEvent: i, onPageview: o, store: t, children: r }, children: r }), te = u.forwardRef(
   function({
     actionText: o,
     ariaLabel: t,
@@ -256,30 +259,30 @@ const z = E.createContext(null), Et = ({
     description: l,
     heightOverrides: n,
     icon: a,
-    isActiveCard: _,
-    isZeroState: u,
-    onCardClick: p = () => {
+    isActiveCard: s,
+    isZeroState: p,
+    onCardClick: _ = () => {
     },
     showIcon: C,
     style: f = {},
-    fontColors: s = {},
-    title: d,
+    fontColors: h = {},
+    title: m,
     variant: c,
-    widthOverrides: y
-  }, m) {
-    const [M, A] = E.useState(!1), { cardStyle: T, linkTextStyle: g } = f, G = c ? T : { border: "none", boxShadow: "none", ...T }, I = /* @__PURE__ */ e(
-      Ke,
+    widthOverrides: E
+  }, R) {
+    const [y, O] = u.useState(!1), { cardStyle: T, linkTextStyle: v } = f, k = c ? T : { border: "none", boxShadow: "none", ...T }, P = /* @__PURE__ */ e(
+      Ye,
       {
         className: "mx-micro-card-description",
-        color: s.textColor ? "undefined" : "text.primary",
+        color: h.textColor ? "undefined" : "text.primary",
         sx: {
           display: "-webkit-box",
           fontSize: 13,
           letterSpacing: 0.48,
           lineHeight: "20px",
           overflow: "hidden",
-          pl: u ? 0 : 28,
-          pr: u ? 0 : 8,
+          pl: p ? 0 : 28,
+          pr: p ? 0 : 8,
           WebkitBoxOrient: "vertical",
           WebkitLineClamp: 2,
           wordWrap: "break-word"
@@ -288,37 +291,37 @@ const z = E.createContext(null), Et = ({
       }
     );
     return /* @__PURE__ */ e(
-      b,
+      U,
       {
-        "aria-hidden": !_,
+        "aria-hidden": !s,
         "aria-label": t,
         "aria-labelledby": "divButton",
         "aria-roledescription": "slide",
-        ref: m,
+        ref: R,
         role: "group",
         sx: {
           height: "100%",
-          minWidth: y ? `${y}px` : "100%"
+          minWidth: E ? `${E}px` : "100%"
         },
         children: /* @__PURE__ */ e(
-          b,
+          U,
           {
-            "aria-hidden": !_,
+            "aria-hidden": !s,
             "aria-label": t,
             id: "divButton",
-            onClick: () => p(),
-            onKeyDown: () => A(!1),
-            onKeyUp: () => A(!0),
-            ref: m,
+            onClick: () => _(),
+            onKeyDown: () => O(!1),
+            onKeyUp: () => O(!0),
+            ref: R,
             role: "button",
             sx: {
-              border: M ? "1px solid rgba(82, 138, 224, 0.8)" : void 0,
+              border: y ? "1px solid rgba(82, 138, 224, 0.8)" : void 0,
               borderRadius: "8px",
               height: "100%"
             },
-            tabIndex: _ ? 0 : -1,
+            tabIndex: s ? 0 : -1,
             children: /* @__PURE__ */ e(
-              it,
+              rt,
               {
                 "aria-roledescription": "slide",
                 className: "mx-micro-card",
@@ -328,15 +331,15 @@ const z = E.createContext(null), Et = ({
                   cursor: "pointer",
                   height: n ? "100%" : 124,
                   p: 16,
-                  ...G,
+                  ...k,
                   "& .MuiCardHeader-avatar": {
-                    color: s.iconColor,
+                    color: h.iconColor,
                     mr: "8px"
                   }
                 },
                 variant: c,
-                children: /* @__PURE__ */ R(
-                  U,
+                children: /* @__PURE__ */ g(
+                  K,
                   {
                     sx: {
                       alignItems: "space-between",
@@ -344,33 +347,33 @@ const z = E.createContext(null), Et = ({
                     },
                     children: [
                       /* @__PURE__ */ e(
-                        lt,
+                        at,
                         {
                           avatar: C && a,
-                          subheader: u && I,
-                          sx: { color: s.headerColor, p: 0 },
-                          title: d,
+                          subheader: p && P,
+                          sx: { color: h.headerColor, p: 0 },
+                          title: m,
                           titleTypographyProps: { fontSize: 15, fontWeight: 600, variant: "h3" }
                         }
                       ),
-                      /* @__PURE__ */ e(rt, { sx: { p: 0 }, children: !u && I }),
+                      /* @__PURE__ */ e(nt, { sx: { p: 0 }, children: !p && P }),
                       !!o && /* @__PURE__ */ e(
-                        ot,
+                        lt,
                         {
                           sx: {
                             mt: "auto",
                             p: 0
                           },
                           children: /* @__PURE__ */ e(
-                            b,
+                            U,
                             {
-                              sx: (W) => ({
-                                color: s.buttonColor ? s.buttonColor : W.palette.primary.main,
+                              sx: (I) => ({
+                                color: h.buttonColor ? h.buttonColor : I.palette.primary.main,
                                 // TODO: Per Cameron the theme package in @mxenabled/mxui will be getting a big update and this will be theme.palette.primary_main
                                 fontSize: 14,
                                 fontWeight: "bold",
                                 px: 28,
-                                ...g
+                                ...v
                               }),
                               children: o
                             }
@@ -387,15 +390,15 @@ const z = E.createContext(null), Et = ({
       }
     );
   }
-), ut = ({ beat: i }) => {
-  const [o, t] = ae(je.UNCATEGORIZED);
-  return q(() => {
+), _t = ({ beat: i }) => {
+  const [o, t] = ae(Qe.UNCATEGORIZED);
+  return ee(() => {
     i.primary_category_guid ? t(i.primary_category_guid) : i.category_guids?.length && t(i.category_guids[0]);
-  }, []), /* @__PURE__ */ e($e, { categoryGuid: o, size: 16, sx: { minWidth: 16 } });
-}, pt = ({ beat: i }) => {
-  const o = Me(), t = _t(o);
+  }, []), /* @__PURE__ */ e(je, { categoryGuid: o, size: 16, sx: { minWidth: 16 } });
+}, Ct = ({ beat: i }) => {
+  const o = Ae(), t = ft(o);
   return /* @__PURE__ */ e(
-    Ye,
+    Xe,
     {
       categoryGuid: i.primary_category_guid || i.category_guids && i.category_guids[0] || "",
       className: t,
@@ -403,12 +406,12 @@ const z = E.createContext(null), Et = ({
       size: 16
     }
   );
-}, _t = (i) => Xe({
+}, ft = (i) => qe({
   marginTop: i.Spacing.XTiny,
   "& .kyper-categoryicon": {
     display: "flex"
   }
-}), Ct = P(pt), ft = ({
+}), mt = Z(Ct), Rt = ({
   color: i = "currentColor",
   height: o,
   size: t = 16,
@@ -434,18 +437,18 @@ const z = E.createContext(null), Et = ({
       }
     )
   }
-), mt = (i) => i ? i.data ? i.data.map((o) => {
+), gt = (i) => i ? i.data ? i.data.map((o) => {
   const t = {};
   return i.names?.map((r, l) => {
     t[r] = o[l];
   }), t;
-}) : [] : [], Rt = (i, o) => {
-  const t = mt(i), r = t.length / 2, l = t.slice(0, r), n = t.slice(r);
+}) : [] : [], It = (i, o) => {
+  const t = gt(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;
-}, gt = ({ beat: i }) => {
-  const o = Me(), t = Rt(i.data_series, o);
-  return /* @__PURE__ */ e(Q, { name: "bar_chart", sx: { color: t } });
-}, De = () => /* @__PURE__ */ R("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
+}, yt = ({ beat: i }) => {
+  const o = Ae(), t = It(i.data_series, o);
+  return /* @__PURE__ */ e(J, { name: "bar_chart", sx: { color: t } });
+}, Le = () => /* @__PURE__ */ g("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ e(
     "path",
     {
@@ -689,7 +692,7 @@ const z = E.createContext(null), Et = ({
       fillRule: "evenodd"
     }
   ),
-  /* @__PURE__ */ R("g", { filter: "url(#filter0_d_1565_98011)", children: [
+  /* @__PURE__ */ g("g", { filter: "url(#filter0_d_1565_98011)", children: [
     /* @__PURE__ */ e("mask", { height: "22", id: "mask1_1565_98011", maskUnits: "userSpaceOnUse", width: "17", x: "16", y: "12", children: /* @__PURE__ */ e(
       "path",
       {
@@ -945,10 +948,10 @@ const z = E.createContext(null), Et = ({
     ),
     /* @__PURE__ */ e("path", { d: "M17.9668 31.5737H19.4947", stroke: "#E4E8EE", strokeWidth: "0.264005" })
   ] }),
-  /* @__PURE__ */ R("g", { filter: "url(#filter1_d_1565_98011)", children: [
+  /* @__PURE__ */ g("g", { filter: "url(#filter1_d_1565_98011)", children: [
     /* @__PURE__ */ e("circle", { cx: "15.0441", cy: "16.0441", fill: "#CDD3DD", r: "15.0441" }),
     /* @__PURE__ */ e("mask", { height: "30", id: "mask2_1565_98011", maskUnits: "userSpaceOnUse", width: "30", x: "0", y: "1", children: /* @__PURE__ */ e("circle", { cx: "15.0435", cy: "16.0445", fill: "#F8F9FB", r: "14.3951" }) }),
-    /* @__PURE__ */ R("g", { mask: "url(#mask2_1565_98011)", children: [
+    /* @__PURE__ */ g("g", { mask: "url(#mask2_1565_98011)", children: [
       /* @__PURE__ */ e("rect", { fill: "white", height: "31.1359", transform: "translate(0 0.162598)", width: "31.0101" }),
       /* @__PURE__ */ e("rect", { fill: "#A8B1BD", height: "3.0172", rx: "0.167622", width: "3.0172", x: "3.26953", y: "4.52002" }),
       /* @__PURE__ */ e("rect", { fill: "#A8B1BD", height: "3.0172", rx: "0.167622", width: "3.0172", x: "3.26953", y: "17.1758" }),
@@ -1138,8 +1141,8 @@ const z = E.createContext(null), Et = ({
       fill: "#CDD3DD"
     }
   ),
-  /* @__PURE__ */ R("defs", { children: [
-    /* @__PURE__ */ R(
+  /* @__PURE__ */ g("defs", { children: [
+    /* @__PURE__ */ g(
       "filter",
       {
         colorInterpolationFilters: "sRGB",
@@ -1182,7 +1185,7 @@ const z = E.createContext(null), Et = ({
         ]
       }
     ),
-    /* @__PURE__ */ R(
+    /* @__PURE__ */ g(
       "filter",
       {
         colorInterpolationFilters: "sRGB",
@@ -1226,10 +1229,10 @@ const z = E.createContext(null), Et = ({
       }
     )
   ] })
-] }), Ie = ({ beat: i, clientColorScheme: o, color: t, type: r }) => {
-  const l = Ae(), n = o?.primary_300 ? o.primary_300 : l.palette.primary.main;
-  return r === 0 ? /* @__PURE__ */ e(Q, { fill: !0, name: "error", sx: { color: t || n } }) : r === 1 && i ? /* @__PURE__ */ e(ut, { beat: i }) : r === 2 && i ? /* @__PURE__ */ e(Ct, { beat: i }) : r === 3 && i ? /* @__PURE__ */ e(gt, { beat: i }) : r === 5 && i ? /* @__PURE__ */ e(Q, { name: "campaign" }) : /* @__PURE__ */ e(
-    Q,
+] }), ye = ({ beat: i, clientColorScheme: o, color: t, type: r }) => {
+  const l = Oe(), 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,
     {
       fill: !0,
       name: "info",
@@ -1238,34 +1241,34 @@ const z = E.createContext(null), Et = ({
       }
     }
   );
-}, F = () => {
-  const i = E.useContext(z);
+}, H = () => {
+  const i = u.useContext($);
   if (!i)
     throw new Error("useCopyStore() must be used within the InsightsMicroWidgetDataProvider");
   return i.store.copyStore;
-}, It = () => {
-  const i = E.useContext(z);
+}, vt = () => {
+  const i = u.useContext($);
   if (!i?.store?.insightsMicroWidgetStore)
     throw new Error(
       "useInsightsMicroWidgetStore() must be used within the InsightsMicroWidgetDataProvider"
     );
   return i.store.insightsMicroWidgetStore;
-}, K = () => {
-  const i = E.useContext(z);
+}, Y = () => {
+  const i = u.useContext($);
   if (!i)
     throw new Error("useEvent() must be used within the InsightsMicroWidgetDataProvider");
   return { onEvent: i.onEvent };
-}, Le = () => {
-  const i = E.useContext(z);
+}, Ne = () => {
+  const i = u.useContext($);
   if (!i)
     throw new Error("usePageview() must be used within the InsightsMicroWidgetDataProvider");
   return { onPageview: i.onPageview };
-}, Ne = {
+}, Ve = {
   LARGE: 180,
   STANDARD: 154,
   XLARGE: 200,
   XXLARGE: 248
-}, yt = 50, Ve = 1, vt = ({
+}, St = 50, He = 1, Mt = ({
   ariaLabel: i,
   backgroundColor: o,
   beat: t,
@@ -1273,66 +1276,66 @@ const z = E.createContext(null), Et = ({
   showCTAColocatedWithText: l = !0,
   heightOverrides: n,
   index: a,
-  isActiveCard: _,
-  onCardClick: u,
-  posthog: p,
+  isActiveCard: s,
+  onCardClick: p,
+  posthog: _,
   showIcon: C,
   variant: f,
-  widthOverrides: s
+  widthOverrides: h
 }) => {
-  const { ref: d, inView: c } = Se({
-    threshold: Ve
-  }), { cardsCopy: y } = F(), { onEvent: m } = K(), { updateBeat: M, updateOffer: A } = It();
-  q(() => {
-    c && (t.has_been_displayed ? m(We(t.template)) : (t.guid.startsWith("OFR") ? A({
+  const { ref: m, inView: c } = Me({
+    threshold: He
+  }), { cardsCopy: E } = H(), { onEvent: R } = Y(), { updateBeat: y, updateOffer: O } = vt();
+  ee(() => {
+    c && (t.has_been_displayed ? R(we(t.template)) : (t.guid.startsWith("OFR") ? O({
       ...t,
       has_been_displayed: !0
-    }) : M({
+    }) : y({
       ...t,
       has_been_displayed: !0
-    }), m(we(t.template))));
-  }, [c]), q(() => {
+    }), R(xe(t.template))));
+  }, [c]), ee(() => {
     if (c && t)
       if (t.template === "MarketingOffer") {
-        const g = t;
-        p?.capture("viewed_messaging_insight", {
+        const v = t;
+        _?.capture("viewed_messaging_insight", {
           template: t.template,
-          campaign_guid: g.campaign_guid,
-          campaign_name: g.pulse_campaign_name
+          campaign_guid: v.campaign_guid,
+          campaign_name: v.pulse_campaign_name
         });
       } else
-        p?.capture("viewed_insight", {
+        _?.capture("viewed_insight", {
           beat_guid: t.guid,
           template: t.template,
           position: a
         });
   }, [t, a, c]);
   const T = () => {
-    if (u && u(t), m(Te(t.template)), t.template === "MarketingOffer") {
-      const g = t;
-      p?.capture("clicked_messaging_insight", {
+    if (p && p(t), R(We(t.template)), t.template === "MarketingOffer") {
+      const v = t;
+      _?.capture("clicked_messaging_insight", {
         template: t.template,
-        campaign_guid: g.campaign_guid,
-        campaign_name: g.pulse_campaign_name
+        campaign_guid: v.campaign_guid,
+        campaign_name: v.pulse_campaign_name
       });
     } else
-      p?.capture("clicked_insight", {
+      _?.capture("clicked_insight", {
         beat_guid: t.guid,
         template: t.template,
         position: a
       });
   };
   return /* @__PURE__ */ e(
-    J,
+    te,
     {
-      actionText: t.micro_call_to_action || y.micro_card_cta,
+      actionText: t.micro_call_to_action || E.micro_card_cta,
       ariaLabel: i,
       backgroundColor: o,
       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: Ie && /* @__PURE__ */ e(
-        Ie,
+      icon: ye && /* @__PURE__ */ e(
+        ye,
         {
           beat: t,
           clientColorScheme: r,
@@ -1340,18 +1343,18 @@ const z = E.createContext(null), Et = ({
           type: t?.icon_type
         }
       ),
-      isActiveCard: _,
+      isActiveCard: s,
       onCardClick: T,
-      posthog: p,
-      ref: d,
+      posthog: _,
+      ref: m,
       showCTAColocatedWithText: l,
       showIcon: C,
       title: t.micro_title && t.micro_title.length > 0 ? t.micro_title : t.title,
       variant: f,
-      widthOverrides: s
+      widthOverrides: h
     }
   );
-}, St = ({
+}, At = ({
   clientColorScheme: i,
   currentBeatIndex: o,
   numBeats: t,
@@ -1359,12 +1362,12 @@ const z = E.createContext(null), Et = ({
   onPreviousClick: l,
   scrollRightBoundary: n,
   scrollX: a,
-  shouldApplyNewAnimation: _ = !1,
-  visibleCardsCount: u = 1
+  shouldApplyNewAnimation: s = !1,
+  visibleCardsCount: p = 1
 }) => {
-  const p = ye(), { carouselCopy: C } = F(), f = Math.floor(a) > n || o - u + 1 === 0, s = a < 0 || t - 1 === o, d = p.palette.grey[500], c = i?.primary_300 ?? p.palette.primary.main;
-  return /* @__PURE__ */ R(
-    U,
+  const _ = ve(), { carouselCopy: C } = H(), 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__ */ g(
+    K,
     {
       direction: "row",
       sx: {
@@ -1386,27 +1389,27 @@ const z = E.createContext(null), Et = ({
             disabled: f,
             onClick: l,
             children: /* @__PURE__ */ e(
-              Ue,
+              Ke,
               {
                 style: {
-                  color: f ? d : c
+                  color: f ? m : c
                 }
               }
             )
           }
         ),
-        Array.from({ length: t }).map((y, m) => {
-          const M = m === o;
+        Array.from({ length: t }).map((E, R) => {
+          const y = R === o;
           return /* @__PURE__ */ e(
-            b,
+            U,
             {
               className: "mx-insights-micro-carousel-dots",
               sx: {
-                bgcolor: M ? c : d,
+                bgcolor: y ? c : m,
                 height: 8,
                 mr: 8,
                 // existing comment from meganthan "we were using `gap` instead of margin, but it doesn't work in safari browsers older than iOS 14.1"
-                ..._ ? {
+                ...s ? {
                   borderRadius: "4px",
                   transformOrigin: "center",
                   transition: "all 0.5s ease-out",
@@ -1415,24 +1418,24 @@ const z = E.createContext(null), Et = ({
                   borderRadius: "50%",
                   p: 0
                 },
-                width: M && _ ? 24 : 8
+                width: y && s ? 24 : 8
               }
             },
-            `carousel-button-${m}`
+            `carousel-button-${R}`
           );
         }),
         /* @__PURE__ */ e(
           ue,
           {
-            "aria-disabled": s,
+            "aria-disabled": h,
             "aria-label": C.next_insight_cta_aria,
-            disabled: s,
+            disabled: h,
             onClick: r,
             children: /* @__PURE__ */ e(
-              ve,
+              Se,
               {
                 style: {
-                  color: s ? d : c
+                  color: h ? m : c
                 }
               }
             )
@@ -1441,118 +1444,119 @@ const z = E.createContext(null), Et = ({
       ]
     }
   );
-}, Mt = ({
-  allowSingleCardPeeking: i = !1,
-  beats: o = [],
-  clientColorScheme: t,
-  showCTAColocatedWithText: r,
-  heightOverrides: l,
-  onCardClick: n,
-  posthog: a,
-  shouldApplyNewAnimation: _ = !1,
-  showCarouselControls: u,
-  showIcon: p,
-  showWithMargin: C = !0,
-  variant: f,
-  widthOverrides: s,
-  visibleCardsCount: d = 1
+}, Ot = ({
+  analyticsMetadata: i,
+  allowSingleCardPeeking: o = !1,
+  beats: t = [],
+  clientColorScheme: r,
+  showCTAColocatedWithText: l,
+  heightOverrides: n,
+  onCardClick: a,
+  posthog: s,
+  shouldApplyNewAnimation: p = !1,
+  showCarouselControls: _,
+  showIcon: C,
+  showWithMargin: f = !0,
+  variant: h,
+  widthOverrides: m,
+  visibleCardsCount: c = 1
   // Default to 1 card visible
 }) => {
-  const c = E.useRef(null), y = E.useRef(null), [m, M] = E.useState(0), [A, T] = E.useState(null), [g, G] = E.useState(null), [I, W] = E.useState(null), [ee, te] = E.useState(_), { carouselCopy: B } = F(), { onEvent: w } = K();
-  E.useEffect(() => {
-    if (c.current && !i) {
-      const h = c.current.offsetWidth, O = 8;
-      let H;
-      if (d > 1) {
-        const j = (h - (d - 1) * O) / d / 3;
-        H = (h - j - (d - 1) * O) / d;
+  const E = u.useRef(null), R = u.useRef(null), [y, O] = u.useState(0), [T, v] = u.useState(null), [k, P] = u.useState(null), [I, z] = u.useState(null), [ie, G] = u.useState(p), { carouselCopy: F } = H(), { onEvent: b } = Y();
+  u.useEffect(() => {
+    if (E.current && !o) {
+      const d = E.current.offsetWidth, A = 8;
+      let N;
+      if (c > 1) {
+        const Q = (d - (c - 1) * A) / c / 3;
+        N = (d - Q - (c - 1) * A) / c;
       } else
-        H = h;
-      W(H);
+        N = d;
+      z(N);
     }
-  }, [d, c.current?.offsetWidth]), E.useEffect(() => {
-    const h = y.current?.offsetWidth;
-    if (typeof h == "number" && i) {
-      const O = (Z) => {
-        te(!0);
-        const X = [
+  }, [c, E.current?.offsetWidth]), u.useEffect(() => {
+    const d = R.current?.offsetWidth;
+    if (typeof d == "number" && o) {
+      const A = (B) => {
+        G(!0);
+        const q = [
           { 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 X ? X.cardWidth : 750;
+        ].find((ne) => B <= ne.maxWidth);
+        return q ? q.cardWidth : 750;
       };
-      W(O(h));
-      const H = () => {
-        const Z = y.current?.offsetWidth;
-        typeof Z == "number" && W(O(Z));
+      z(A(d));
+      const N = () => {
+        const B = R.current?.offsetWidth;
+        typeof B == "number" && z(A(B));
       };
-      return window.addEventListener("resize", H), () => {
-        window.removeEventListener("resize", H);
+      return window.addEventListener("resize", N), () => {
+        window.removeEventListener("resize", N);
       };
     }
-  }, [i, y]);
-  const ie = () => {
-    w(S.ON_CAROUSEL_FORWARD_CLICK), c.current && I && c.current.scrollTo({
-      left: m + I + 8,
+  }, [o, R]);
+  const oe = () => {
+    b(M.ON_CAROUSEL_FORWARD_CLICK, i), E.current && I && E.current.scrollTo({
+      left: y + I + 8,
       top: 0,
       behavior: "smooth"
     });
-  }, oe = () => {
-    w(S.ON_CAROUSEL_BACK_CLICK), c.current && I && c.current.scrollTo({
-      left: Math.max(0, m - (I + 8)),
+  }, re = () => {
+    b(M.ON_CAROUSEL_BACK_CLICK, i), E.current && I && E.current.scrollTo({
+      left: Math.max(0, y - (I + 8)),
       top: 0,
       behavior: "smooth"
     });
-  }, re = () => {
-    c.current && M(c.current.scrollLeft);
-  }, $ = () => {
-    if (!g || !A) return;
-    g - A > yt ? w(S.ON_CAROUSEL_FORWARD_SWIPE) : w(S.ON_CAROUSEL_BACK_SWIPE);
-  }, Y = (h) => {
-    T(h.targetTouches[0].clientX);
-  }, V = (h) => {
-    T(null), G(h.targetTouches[0].clientX);
+  }, j = () => {
+    E.current && O(E.current.scrollLeft);
+  }, X = () => {
+    if (!k || !T) return;
+    k - T > St ? b(M.ON_CAROUSEL_FORWARD_SWIPE, i) : b(M.ON_CAROUSEL_BACK_SWIPE, i);
+  }, L = (d) => {
+    v(d.targetTouches[0].clientX);
+  }, Be = (d) => {
+    v(null), P(d.targetTouches[0].clientX);
   }, he = {
-    clientColorScheme: t,
-    showCTAColocatedWithText: r,
-    heightOverrides: l,
-    posthog: a,
-    showIcon: p,
-    variant: f
-  }, le = I ? Math.round(m / (I + 8)) : 0, Fe = c.current ? c.current.scrollWidth - c.current.offsetWidth : 0;
-  return /* @__PURE__ */ R(
-    U,
+    clientColorScheme: r,
+    showCTAColocatedWithText: l,
+    heightOverrides: n,
+    posthog: s,
+    showIcon: C,
+    variant: h
+  }, le = I ? Math.round(y / (I + 8)) : 0, Ze = E.current ? E.current.scrollWidth - E.current.offsetWidth : 0;
+  return /* @__PURE__ */ g(
+    K,
     {
-      "aria-label": B.carousel_title,
+      "aria-label": F.carousel_title,
       "aria-roledescription": "carousel",
-      ref: y,
+      ref: R,
       role: "group/region",
       sx: {
         alignItems: "center",
         boxSizing: "border-box",
-        height: l,
-        width: s || "100%"
+        height: n,
+        width: m || "100%"
       },
       children: [
-        /* @__PURE__ */ R(
-          U,
+        /* @__PURE__ */ g(
+          K,
           {
             direction: "row",
-            onScroll: re,
-            onTouchEnd: $,
-            onTouchMove: Y,
-            onTouchStart: V,
-            ref: c,
+            onScroll: j,
+            onTouchEnd: X,
+            onTouchMove: L,
+            onTouchStart: Be,
+            ref: E,
             sx: {
               alignItems: "center",
-              height: l && "100%",
+              height: n && "100%",
               gap: 8,
               listStyleType: "none",
               m: 0,
-              maxWidth: C ? "calc(100% - 32px)" : "100%",
+              maxWidth: f ? "calc(100% - 32px)" : "100%",
               overflowX: "auto",
               overflowY: "hidden",
               p: 0,
@@ -1564,31 +1568,31 @@ const z = E.createContext(null), Et = ({
               }
             },
             children: [
-              o.map((h, O) => {
-                const H = O + 1, Z = o.length + 1, j = Qe(
-                  B.card_position_in_carousel_aria,
-                  H.toString(),
-                  Z.toString()
-                ), X = h.micro_title && h.micro_title.length > 0, ne = h.micro_description && h.micro_description.length > 0, Be = X ? h.micro_title : h.title, Ze = ne ? h.micro_description : h.description;
+              t.map((d, A) => {
+                const N = A + 1, B = t.length + 1, Q = Je(
+                  F.card_position_in_carousel_aria,
+                  N.toString(),
+                  B.toString()
+                ), q = d.micro_title && d.micro_title.length > 0, ne = d.micro_description && d.micro_description.length > 0, Pe = q ? d.micro_title : d.title, Ge = ne ? d.micro_description : d.description;
                 return /* @__PURE__ */ e(
-                  vt,
+                  Mt,
                   {
-                    ariaLabel: `${j}: ${Be}, ${Ze}`,
-                    beat: h,
-                    index: O,
-                    isActiveCard: O === le,
-                    onCardClick: n,
+                    ariaLabel: `${Q}: ${Pe}, ${Ge}`,
+                    beat: d,
+                    index: A,
+                    isActiveCard: A === le,
+                    onCardClick: a,
                     widthOverrides: I || void 0,
                     ...he
                   },
-                  `${h.guid} ${O}`
+                  `${d.guid} ${A}`
                 );
               }),
               /* @__PURE__ */ e(
-                Lt,
+                Vt,
                 {
-                  isActiveCard: le === o.length,
-                  onCardClick: n,
+                  isActiveCard: le === t.length,
+                  onCardClick: a,
                   widthOverrides: I || void 0,
                   ...he
                 }
@@ -1596,42 +1600,43 @@ const z = E.createContext(null), Et = ({
             ]
           }
         ),
-        u && /* @__PURE__ */ e(
-          St,
+        _ && /* @__PURE__ */ e(
+          At,
           {
-            clientColorScheme: t,
-            currentBeatIndex: le + d - 1,
-            numBeats: o.length + 1,
-            onNextClick: ie,
-            onPreviousClick: oe,
-            scrollRightBoundary: Fe,
-            scrollX: m,
-            shouldApplyNewAnimation: ee,
-            visibleCardsCount: d
+            clientColorScheme: r,
+            currentBeatIndex: le + c - 1,
+            numBeats: t.length + 1,
+            onNextClick: oe,
+            onPreviousClick: re,
+            scrollRightBoundary: Ze,
+            scrollX: y,
+            shouldApplyNewAnimation: ie,
+            visibleCardsCount: c
           }
         )
       ]
     }
   );
-}, At = P(Mt), Ot = ({
-  clientColorScheme: i,
-  onCardClick: o,
-  posthog: t,
-  widthOverrides: r
+}, Tt = Z(Ot), Wt = ({
+  analyticsMetadata: i,
+  clientColorScheme: o,
+  onCardClick: t,
+  posthog: r,
+  widthOverrides: l
 }) => {
-  const { carouselCopy: l } = F(), { onEvent: n } = K(), a = () => {
-    n && (n(S.ON_VIEW_MORE_CLICKED), o(), t?.capture("clicked_view_more"));
+  const { carouselCopy: n } = H(), { onEvent: a } = Y(), s = () => {
+    a && (a(M.ON_VIEW_MORE_CLICKED, i), t(), r?.capture("clicked_view_more"));
   };
-  return l ? /* @__PURE__ */ R(
-    U,
+  return n ? /* @__PURE__ */ g(
+    K,
     {
       alignItems: "center",
       direction: "row",
       justifyContent: "space-between",
       spacing: 2,
       sx: {
-        padding: r ? 0 : 16,
-        width: r || void 0
+        padding: l ? 0 : 16,
+        width: l || void 0
       },
       children: [
         /* @__PURE__ */ e(
@@ -1643,13 +1648,13 @@ const z = E.createContext(null), Et = ({
               lineHeight: "24px"
             },
             variant: "h3",
-            children: l.carousel_title
+            children: n.carousel_title
           }
         ),
-        /* @__PURE__ */ R(
-          be,
+        /* @__PURE__ */ g(
+          ze,
           {
-            onClick: a,
+            onClick: s,
             sx: {
               display: "flex",
               alignItems: "center",
@@ -1666,30 +1671,30 @@ const z = E.createContext(null), Et = ({
                 Ee,
                 {
                   sx: {
-                    color: i?.primary_300,
+                    color: o?.primary_300,
                     fontSize: 15,
                     fontWeight: 600,
                     lineHeight: "20px"
                   },
                   variant: "body1",
-                  children: l.view_all_insights_in_full_feed_cta_aria
+                  children: n.view_all_insights_in_full_feed_cta_aria
                 }
               ),
-              /* @__PURE__ */ e(ve, { sx: { color: i?.primary_300, ml: "8px" } })
+              /* @__PURE__ */ e(Se, { sx: { color: o?.primary_300, ml: "8px" } })
             ]
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ e(ze, {});
-}, Tt = P(Ot), Wt = ({
+  ) : /* @__PURE__ */ e($e, {});
+}, wt = Z(Wt), xt = ({
   heightOverrides: i,
   widthOverrides: o,
   children: t
 }) => {
-  const { carouselCopy: r } = F();
+  const { carouselCopy: r } = H();
   return /* @__PURE__ */ e(
-    b,
+    U,
     {
       "aria-label": r?.carousel_title,
       "aria-roledescription": "carousel",
@@ -1703,7 +1708,7 @@ const z = E.createContext(null), Et = ({
       children: t
     }
   );
-}, He = ({
+}, ke = ({
   ariaLabel: i,
   carouselSize: o,
   clientColorScheme: t,
@@ -1711,38 +1716,38 @@ const z = E.createContext(null), Et = ({
   onCardClick: l,
   posthog: n,
   showIcon: a,
-  showWithMargin: _,
-  variant: u,
-  widthOverrides: p
+  showWithMargin: s,
+  variant: p,
+  widthOverrides: _
 }) => {
-  const { cardsCopy: C } = F(), { onEvent: f } = K(), { onPageview: s } = Le();
-  E.useEffect(() => {
-    s(k.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
+  const { cardsCopy: C } = H(), { onEvent: f } = Y(), { onPageview: h } = Ne();
+  u.useEffect(() => {
+    h(V.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
   }, []);
-  const d = () => {
-    l && l(), f(S.ON_NO_RELEVANT_INSIGHTS_CLICKED), n?.capture("clicked_insight", {
+  const m = () => {
+    l && l(), f(M.ON_NO_RELEVANT_INSIGHTS_CLICKED), n?.capture("clicked_insight", {
       template: "no_relevant_insights"
     });
   };
   return /* @__PURE__ */ e(
-    J,
+    te,
     {
       actionText: C.micro_card_cta,
       ariaLabel: i,
       description: C.no_relevant_insights_card_description,
       fontColors: { buttonColor: t?.primary_300 },
       heightOverrides: r,
-      icon: /* @__PURE__ */ e(De, {}),
+      icon: /* @__PURE__ */ e(Le, {}),
       isZeroState: !0,
-      onCardClick: d,
+      onCardClick: m,
       posthog: n,
       showIcon: a,
       style: {
         cardStyle: {
           card: {
-            height: `calc(${Ne[o]}px - 44px)`,
+            height: `calc(${Ve[o]}px - 44px)`,
             m: "0 auto",
-            width: _ ? "calc(100% - 32px)" : "100%"
+            width: s ? "calc(100% - 32px)" : "100%"
           },
           description: {
             WebkitLineClamp: 4
@@ -1753,11 +1758,11 @@ const z = E.createContext(null), Et = ({
         }
       },
       title: C.no_relevant_insights_card_title,
-      variant: u,
-      widthOverrides: p
+      variant: p,
+      widthOverrides: _
     }
   );
-}, ni = P(He), ke = ({
+}, ci = Z(ke), Fe = ({
   ariaLabel: i,
   carouselSize: o,
   heightOverrides: t,
@@ -1765,19 +1770,19 @@ const z = E.createContext(null), Et = ({
   posthog: l,
   showIcon: n,
   showWithMargin: a,
-  variant: _,
-  widthOverrides: u
+  variant: s,
+  widthOverrides: p
 }) => {
-  const { onPageview: p } = Le(), { zeroStateCopy: C } = F();
-  return E.useEffect(() => {
-    p(k.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
+  const { onPageview: _ } = Ne(), { zeroStateCopy: C } = H();
+  return u.useEffect(() => {
+    _(V.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
   }, []), /* @__PURE__ */ e(
-    J,
+    te,
     {
       ariaLabel: i,
       description: C.carousel_zero_state_description,
       heightOverrides: t,
-      icon: /* @__PURE__ */ e(De, {}),
+      icon: /* @__PURE__ */ e(Le, {}),
       isZeroState: !0,
       onCardClick: r,
       posthog: l,
@@ -1785,7 +1790,7 @@ const z = E.createContext(null), Et = ({
       style: {
         cardStyle: {
           card: {
-            height: `calc(${Ne[o]}px - 44px)`,
+            height: `calc(${Ve[o]}px - 44px)`,
             m: "0 auto",
             width: a ? "calc(100% - 32px)" : "100%"
           },
@@ -1795,12 +1800,12 @@ const z = E.createContext(null), Et = ({
         }
       },
       title: C.carousel_zero_state_title,
-      variant: _,
-      widthOverrides: u
+      variant: s,
+      widthOverrides: p
     }
   );
-}, ai = P(ke), wt = () => /* @__PURE__ */ e(
-  b,
+}, di = Z(Fe), Dt = () => /* @__PURE__ */ e(
+  U,
   {
     sx: {
       alignItems: "center",
@@ -1809,9 +1814,9 @@ const z = E.createContext(null), Et = ({
       justifyContent: "center",
       width: "100%"
     },
-    children: /* @__PURE__ */ e(qe, {})
+    children: /* @__PURE__ */ e(et, {})
   }
-), x = new ht(), xt = ({
+), W = new ut(), Lt = ({
   allowSingleCardPeeking: i,
   areBeatsLoading: o,
   beats: t = [],
@@ -1821,84 +1826,86 @@ const z = E.createContext(null), Et = ({
   showCTAColocatedWithText: l = !0,
   endpoint: n = "/",
   heightOverrides: a,
-  logOutUser: _,
-  onCardClick: u = () => {
+  logOutUser: s,
+  onCardClick: p = () => {
   },
-  onEvent: p = () => {
+  onEvent: _ = () => {
   },
   onPageview: C = () => {
   },
   posthog: f,
-  shouldApplyNewAnimation: s = !1,
-  showBorder: d = !0,
+  shouldApplyNewAnimation: h = !1,
+  showBorder: m = !0,
   showCarouselControls: c,
-  showHeader: y,
-  showIcon: m,
-  showWithMargin: M = !0,
-  token: A = "",
+  showHeader: E,
+  showIcon: R,
+  showWithMargin: y = !0,
+  token: O = "",
   useDarkMode: T,
-  userHasFullInsightFeedBeats: g,
-  variant: G,
-  visibleCardsCount: I = 1,
-  widthOverrides: W
+  userHasFullInsightFeedBeats: v,
+  variant: k,
+  visibleCardsCount: P = 1,
+  widthOverrides: I
 }) => {
-  const ee = ye(), [te, B] = ae("STANDARD"), [w, ie] = ae(!1), oe = et([p], x), re = tt([C], x);
-  E.useEffect(() => {
-    x.isInitialized || x.initialize(n, A, _);
-  }, [n, A, _, x.isInitialized]), E.useEffect(() => {
-    const V = window.innerHeight;
-    V < 180 ? B("STANDARD") : V >= 180 && V < 200 ? B("LARGE") : V >= 200 && V < 248 ? B("XLARGE") : V >= 248 && B("XXLARGE");
-  }, [window.innerHeight]), E.useEffect(() => {
-    ie(!o && x.isInitialized);
-  }, [o, x.isInitialized]);
-  const $ = {
+  const z = ve(), [ie, G] = ae("STANDARD"), [F, b] = ae(!1), oe = it([_], W), re = ot([C], W);
+  u.useEffect(() => {
+    W.isInitialized || W.initialize(n, O, s);
+  }, [n, O, s, W.isInitialized]), u.useEffect(() => {
+    const L = window.innerHeight;
+    L < 180 ? G("STANDARD") : L >= 180 && L < 200 ? G("LARGE") : L >= 200 && L < 248 ? G("XLARGE") : L >= 248 && G("XXLARGE");
+  }, [window.innerHeight]), u.useEffect(() => {
+    b(!o && W.isInitialized);
+  }, [o, W.isInitialized]);
+  const j = {
     showCTAColocatedWithText: l,
     heightOverrides: a,
-    onCardClick: u,
+    onCardClick: p,
     posthog: f,
-    showIcon: m,
-    showWithMargin: M,
+    showIcon: R,
+    showWithMargin: y,
     useDarkMode: T,
-    widthOverrides: W
-  }, Y = {
-    carouselSize: te,
-    variant: G,
-    ...$
+    widthOverrides: I
+  }, X = {
+    carouselSize: ie,
+    variant: k,
+    ...j
   };
   return (
     // The Theme provider must wrap the component so that the styles don't break when imported into other applications.
-    /* @__PURE__ */ R(Ge, { theme: ee, children: [
-      /* @__PURE__ */ e(Pe, {}),
-      /* @__PURE__ */ e(Et, { onEvent: oe, onPageview: re, store: x, children: /* @__PURE__ */ R(Wt, { heightOverrides: a, widthOverrides: W, children: [
-        (o || !x.isInitialized) && /* @__PURE__ */ e(wt, {}),
-        w && y && /* @__PURE__ */ e(
-          Tt,
+    /* @__PURE__ */ g(Ue, { theme: z, children: [
+      /* @__PURE__ */ e(be, {}),
+      /* @__PURE__ */ e(pt, { onEvent: oe, onPageview: re, store: W, children: /* @__PURE__ */ g(xt, { heightOverrides: a, widthOverrides: I, children: [
+        (o || !W.isInitialized) && /* @__PURE__ */ e(Dt, {}),
+        F && E && /* @__PURE__ */ e(
+          wt,
           {
+            analyticsMetadata: Ce,
             clientColorScheme: r,
-            onCardClick: u,
+            onCardClick: p,
             posthog: f,
-            widthOverrides: W
+            widthOverrides: I
           }
         ),
-        w && !!t.length && /* @__PURE__ */ e(
-          At,
+        F && !!t.length && /* @__PURE__ */ e(
+          Tt,
           {
             allowSingleCardPeeking: i,
+            analyticsMetadata: Ce,
             beats: t,
             clientColorScheme: r,
-            shouldApplyNewAnimation: s,
+            shouldApplyNewAnimation: h,
             showCarouselControls: c,
-            variant: d ? G : void 0,
-            visibleCardsCount: I,
-            ...$
+            variant: m ? k : void 0,
+            visibleCardsCount: P,
+            ...j
           }
         ),
-        w && !t.length && g && /* @__PURE__ */ e(He, { clientColorScheme: r, ...Y }),
-        w && !t.length && !g && /* @__PURE__ */ e(ke, { ...Y })
+        F && !t.length && v && /* @__PURE__ */ e(ke, { clientColorScheme: r, ...X }),
+        F && !t.length && !v && /* @__PURE__ */ e(Fe, { ...X })
       ] }) })
     ] })
   );
-}, ci = P(xt), Dt = ({
+}, si = Z(Lt), Nt = ({
   isActiveCard: i,
   ariaLabel: o,
   clientColorScheme: t,
@@ -1906,54 +1913,55 @@ const z = E.createContext(null), Et = ({
   onCardClick: l,
   posthog: n,
   showIcon: a,
-  variant: _,
-  widthOverrides: u
+  variant: s,
+  widthOverrides: p
 }) => {
-  const p = Ae(), { ref: C, inView: f } = Se({
-    threshold: Ve
-  }), { cardsCopy: s } = F(), { onEvent: d } = K();
-  q(() => {
-    f && (d(xe.ON_VIEW_MORE_VIEWED), n?.capture("viewed_insight", {
+  const _ = Oe(), { ref: C, inView: f } = Me({
+    threshold: He
+  }), { cardsCopy: h } = H(), { onEvent: m } = Y();
+  ee(() => {
+    f && (m(De.ON_VIEW_MORE_VIEWED), n?.capture("viewed_insight", {
       template: "view_more_card"
     }));
   }, [f]);
   const c = () => {
-    l && l(), d(S.ON_VIEW_MORE_CLICKED), n?.capture("clicked_insight", {
+    l && l(), m(M.ON_VIEW_MORE_CLICKED), n?.capture("clicked_insight", {
       template: "view_more_card"
     });
   };
   return /* @__PURE__ */ e(
-    J,
+    te,
     {
-      actionText: s.micro_card_cta,
+      actionText: h.micro_card_cta,
       ariaLabel: o,
-      description: s.view_more_card_description,
+      description: h.view_more_card_description,
       fontColors: { buttonColor: t?.primary_300 },
       heightOverrides: r,
-      icon: /* @__PURE__ */ e(ft, { color: t?.primary_300 ?? p.palette.primary.main }),
+      icon: /* @__PURE__ */ e(Rt, { color: t?.primary_300 ?? _.palette.primary.main }),
       isActiveCard: i,
       onCardClick: c,
       posthog: n,
       ref: C,
       showIcon: a,
-      title: s.view_more_card_title,
-      variant: _,
-      widthOverrides: u
+      title: h.view_more_card_title,
+      variant: s,
+      widthOverrides: p
     }
   );
-}, Lt = P(Dt);
+}, Vt = Z(Nt);
 export {
-  ht as A,
-  vt as B,
-  Tt as C,
-  Et as I,
-  At as M,
-  ni as N,
-  Lt as V,
-  ai as Z,
-  J as a,
-  ci as b,
-  ft as c,
-  gt as d,
-  De as e
+  ut as A,
+  Mt as B,
+  wt as C,
+  pt as I,
+  Tt as M,
+  ci as N,
+  Ce as T,
+  Vt as V,
+  di as Z,
+  te as a,
+  si as b,
+  Rt as c,
+  yt as d,
+  Le as e
 };