@mx-cartographer/experiences 8.0.0-alpha.bb4 → 8.0.0-alpha.sms1

package/dist/{ViewMoreMicroCard-DAkyNRlD.mjs → ViewMoreMicroCard-C0832BMe.mjs}

@@ -1,31 +1,32 @@
-import { jsx as e, jsxs as g, Fragment as xe } from "react/jsx-runtime";
-import u, { useEffect as te, useState as ee } from "react";
+import { jsx as e, jsxs as g, Fragment as De } from "react/jsx-runtime";
+import u, { useEffect as ee, useState as J } from "react";
 import { observer as P } from "mobx-react-lite";
 import k from "@mui/material/Stack";
-import De from "@mui/material/Button";
+import xe from "@mui/material/Button";
 import Le from "@mui/material/Typography";
-import { BarChart as Ve, Error as ae, Campaign as Ne, ChevronLeft as He, ChevronRight as Ce } from "@mxenabled/mx-icons";
-import { L as ke } from "./Loader-Ckqi9Rx6.mjs";
+import { BarChart as Ve, Error as ae, Campaign as Ne, ChevronLeft as He, ChevronRight as fe } from "@mxenabled/mx-icons";
+import { L as ke } from "./Loader-DUaFpDGv.mjs";
 import Z from "@mui/material/Box";
-import ce from "@mui/material/IconButton";
-import { useTheme as j } from "@mui/material/styles";
+import se from "@mui/material/IconButton";
+import { useTheme as Fe } from "@mui/material/styles";
 import { useInView as me } from "react-intersection-observer";
-import { P as Fe, CategoryIcon as Be, MerchantLogo as Ze } from "@mxenabled/mxui";
-import { b as Pe } from "./Category-Ccoew_sA.mjs";
-import { b as be } from "./Localization-2MODESHW.mjs";
-import Ge from "@mui/material/CircularProgress";
+import { P as Be, CategoryIcon as Ze, MerchantLogo as Pe } from "@mxenabled/mxui";
+import { b as be } from "./Category-CevNQ03n.mjs";
+import te from "@mui/material/styles/useTheme";
+import { b as Ge } from "./Localization-2MODESHW.mjs";
+import Ue from "@mui/material/CircularProgress";
 import { makeAutoObservable as ie, runInAction as Re } from "mobx";
-import { G as se, b as Ue, u as ze, a as Ke } from "./useCombineEvents-kNzLTWCp.mjs";
+import { G as ce, a as ze, u as Ke, b as $e } from "./useCombineEvents-CRwX-qWE.mjs";
 import { B as de } from "./BeatApi-De2IaqH2.mjs";
-import $e from "@mui/material/Card";
-import Ye from "@mui/material/CardActions";
-import je from "@mui/material/CardContent";
-import Xe from "@mui/material/CardHeader";
+import Ye from "@mui/material/Card";
+import je from "@mui/material/CardActions";
+import Xe from "@mui/material/CardContent";
+import Qe from "@mui/material/CardHeader";
 const Ee = {
   featureVersion: "spendVsIncomeTrends"
 };
-class Qe {
-  copyApi = new se("/", "");
+class qe {
+  copyApi = new ce("/", "");
   copyObject = {};
   namespace = "experiences";
   translationKey = "micro_insights";
@@ -36,7 +37,7 @@ class Qe {
   // DEPRECATED: Initialize api in constructor and use loadCopy instead
   // TODO: Remove this function
   initialize = async (o, t) => {
-    this.copyApi = new se(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);
@@ -71,46 +72,47 @@ const oe = {
   WeeklyNewMerchantsV2: "WeeklyNewMerchantsV2",
   MonthlySpendComparison: "MonthlySpendComparison",
   MonthlySpendToIncomeComparison: "MonthlySpendToIncomeComparison"
-}, y = window?.app?.clientConfig?.microwidget_instance_id || "", he = {
+}, v = window?.app?.clientConfig?.microwidget_instance_id || "", he = {
   INSIGHTS_MICRO_WIDGET: "/micro-insights-carousel"
-}, ge = (i) => `on${i}Click`, Ie = (i) => `on${i}View`, ve = (i) => `on${i}ViewFirstTime`, le = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), qe = () => Object.values(oe).reduce(
+}, ge = (i) => `on${i}Click`, Ie = (i) => `on${i}View`, ye = (i) => `on${i}ViewFirstTime`, le = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), Je = () => Object.values(oe).reduce(
   (i, o) => ({
     ...i,
     [ge(o)]: {
       action: L.MICRO_BEAT_CLICKED,
-      category: D.BEAT_INTERACTION,
+      category: x.BEAT_INTERACTION,
       label: le(o),
-      value: y
+      value: v
     }
   }),
   {}
-), Je = () => Object.values(oe).reduce(
+), et = () => Object.values(oe).reduce(
   (i, o) => ({
     ...i,
     [Ie(o)]: {
       action: L.MICRO_BEAT_DISPLAYED,
-      category: D.BEAT_INTERACTION,
+      category: x.BEAT_INTERACTION,
       label: le(o),
-      value: y
+      value: v
     }
   }),
   {}
-), et = () => Object.values(oe).reduce(
+), tt = () => Object.values(oe).reduce(
   (i, o) => ({
     ...i,
-    [ve(o)]: {
+    [ye(o)]: {
       action: L.MICRO_BEAT_DISPLAYED_FIRST_TIME,
-      category: D.BEAT_INTERACTION,
+      category: x.BEAT_INTERACTION,
       label: le(o),
-      value: y
+      value: v
     }
   }),
   {}
-), x = {
+), D = {
+  CARD: "Card",
   CAROUSEL_CONTROL: "Carousel Control",
   MICRO_WIDGET: "Micro Widget",
   VIEW_MORE: "View More"
-}, D = {
+}, x = {
   MICRO_WIDGET_INTERACTION: "Micro Widget Interaction",
   BEAT_INTERACTION: "Beat Interaction"
 }, S = {
@@ -120,7 +122,7 @@ const oe = {
   ON_CAROUSEL_FORWARD_SWIPE: "onCarouselForwardSwipe",
   ON_NO_RELEVANT_INSIGHTS_CLICKED: "onNoRelevantInsightsClicked",
   ON_VIEW_MORE_CLICKED: "onViewMoreClicked"
-}, ye = {
+}, ve = {
   ON_VIEW_MORE_VIEWED: "onViewMoreCardView"
 }, L = {
   CONTROL_BACKWARD: "Control Backward",
@@ -136,75 +138,75 @@ const oe = {
   MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS: "Micro Widget Carousel No Relevant Insights"
 }, ue = {
   [H.MICRO_WIDGET_CAROUSEL]: {
-    label: x.MICRO_WIDGET,
+    label: D.MICRO_WIDGET,
     name: H.MICRO_WIDGET_CAROUSEL,
     path: he.INSIGHTS_MICRO_WIDGET,
-    value: y
+    value: v
   },
   // zero state
   [H.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
-    label: x.MICRO_WIDGET,
+    label: D.MICRO_WIDGET,
     name: H.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
     path: he.INSIGHTS_MICRO_WIDGET,
-    value: y
+    value: v
   },
   // no relevant cards
   [H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
-    label: x.MICRO_WIDGET,
+    label: D.MICRO_WIDGET,
     name: H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
     path: "/micro-widget",
-    value: y
+    value: v
   }
 }, pe = {
   // carousel control interaction events - clicks and swipes
   [S.ON_CAROUSEL_BACK_CLICK]: {
     action: L.CONTROL_BACKWARD,
-    category: D.MICRO_WIDGET_INTERACTION,
-    label: x.CAROUSEL_CONTROL,
-    value: y
+    category: x.MICRO_WIDGET_INTERACTION,
+    label: D.CAROUSEL_CONTROL,
+    value: v
   },
   [S.ON_CAROUSEL_FORWARD_CLICK]: {
     action: L.CONTROL_FORWARD,
-    category: D.MICRO_WIDGET_INTERACTION,
-    label: x.CAROUSEL_CONTROL,
-    value: y
+    category: x.MICRO_WIDGET_INTERACTION,
+    label: D.CAROUSEL_CONTROL,
+    value: v
   },
   [S.ON_CAROUSEL_BACK_SWIPE]: {
     action: L.SWIPE_BACKWARD,
-    category: D.MICRO_WIDGET_INTERACTION,
-    label: x.CAROUSEL_CONTROL,
-    value: y
+    category: x.MICRO_WIDGET_INTERACTION,
+    label: D.CAROUSEL_CONTROL,
+    value: v
   },
   [S.ON_CAROUSEL_FORWARD_SWIPE]: {
     action: L.SWIPE_FORWARD,
-    category: D.MICRO_WIDGET_INTERACTION,
-    label: x.CAROUSEL_CONTROL,
-    value: y
+    category: x.MICRO_WIDGET_INTERACTION,
+    label: D.CAROUSEL_CONTROL,
+    value: v
   },
   // read more card events
   [S.ON_VIEW_MORE_CLICKED]: {
     action: L.MICRO_BEAT_CLICKED,
-    category: D.BEAT_INTERACTION,
-    label: x.VIEW_MORE,
-    value: y
+    category: x.BEAT_INTERACTION,
+    label: D.VIEW_MORE,
+    value: v
   },
-  [ye.ON_VIEW_MORE_VIEWED]: {
+  [ve.ON_VIEW_MORE_VIEWED]: {
     action: L.MICRO_BEAT_DISPLAYED,
-    category: D.BEAT_INTERACTION,
-    label: x.VIEW_MORE,
-    value: y
+    category: x.BEAT_INTERACTION,
+    label: D.VIEW_MORE,
+    value: v
   },
-  ...qe(),
   ...Je(),
-  ...et()
+  ...et(),
+  ...tt()
 }, _e = async (i, o) => !o || !pe[i] ? null : o.sendAnalyticEvent(pe[i]).then((t) => t).catch((t) => {
   throw t;
-}), fe = async (i, o) => !o || !ue[i] ? null : o.sendAnalyticsPageview(ue[i]).then((t) => t).catch((t) => {
+}), Ce = async (i, o) => !o || !ue[i] ? null : o.sendAnalyticsPageview(ue[i]).then((t) => t).catch((t) => {
   throw t;
 });
-class tt {
+class it {
   onAnalyticEvent = _e;
-  onAnalyticPageView = fe;
+  onAnalyticPageView = Ce;
   beatApi = new de("/", "");
   constructor() {
     ie(this);
@@ -215,7 +217,7 @@ class tt {
         throw a.status === 401 && l(), a;
       });
     }, this.onAnalyticPageView = (n, r) => {
-      fe(n, r).then((a) => a).catch((a) => {
+      Ce(n, r).then((a) => a).catch((a) => {
         throw a.status === 401 && l(), a;
       });
     }, this.beatApi = new de(o, t);
@@ -227,7 +229,7 @@ class tt {
     this.beatApi.updateOffer(o);
   };
 }
-class it {
+class ot {
   copyStore;
   endpoint = "/";
   insightsMicroWidgetStore;
@@ -235,40 +237,40 @@ class it {
   token = "";
   isInitialized = !1;
   constructor() {
-    this.copyStore = new Qe(), this.insightsMicroWidgetStore = new tt(), ie(this);
+    this.copyStore = new qe(), this.insightsMicroWidgetStore = new it(), ie(this);
   }
   initialize = async (o, t, l) => {
     await this.copyStore.initialize(o, t), await this.insightsMicroWidgetStore.initialize(o, t, l);
-    const n = await Ue(o, t, "1.0.0", "Micro Insights Carousel");
+    const n = await ze(o, t, "1.0.0", "Micro Insights Carousel");
     Re(() => {
       this.session = n, this.isInitialized = !0;
     });
   };
 }
-const U = u.createContext(null), ot = ({
+const U = u.createContext(null), lt = ({
   onEvent: i,
   onPageview: o,
   store: t,
   children: l
-}) => /* @__PURE__ */ e(U.Provider, { value: { onEvent: i, onPageview: o, store: t, children: l }, children: l }), X = u.forwardRef(function({
+}) => /* @__PURE__ */ e(U.Provider, { value: { onEvent: i, onPageview: o, store: t, children: l }, children: l }), j = u.forwardRef(function({
   actionText: o,
   ariaLabel: t,
   backgroundColor: l,
   description: n,
   heightOverrides: r,
   icon: a,
-  isActiveCard: s,
+  isActiveCard: c,
   isZeroState: h,
-  onCardClick: f = () => {
+  onCardClick: C = () => {
   },
   showIcon: p,
   style: d = {},
   title: E,
-  variant: c,
-  widthOverrides: C
+  variant: s,
+  widthOverrides: f
 }, _) {
-  const R = j(), [O, I] = u.useState(!1), { cardStyle: m, linkTextStyle: T } = d, v = c ? m : { border: "none", boxShadow: "none", ...m }, M = /* @__PURE__ */ e(
-    Fe,
+  const R = te(), [O, I] = u.useState(!1), { cardStyle: m, linkTextStyle: T } = d, y = s ? m : { border: "none", boxShadow: "none", ...m }, M = /* @__PURE__ */ e(
+    Be,
     {
       className: "mx-micro-card-description",
       color: "text.primary",
@@ -296,7 +298,7 @@ const U = u.createContext(null), ot = ({
   return /* @__PURE__ */ e(
     Z,
     {
-      "aria-hidden": !s,
+      "aria-hidden": !c,
       "aria-label": t,
       "aria-labelledby": "divButton",
       "aria-roledescription": "slide",
@@ -304,16 +306,16 @@ const U = u.createContext(null), ot = ({
       role: "group",
       sx: {
         height: "100%",
-        minWidth: C ? `${C}px` : "100%",
+        minWidth: f ? `${f}px` : "100%",
         fontFamily: R.typography.fontFamily
       },
       children: /* @__PURE__ */ e(
         Z,
         {
-          "aria-hidden": !s,
+          "aria-hidden": !c,
           "aria-label": t,
           id: "divButton",
-          onClick: () => f(),
+          onClick: () => C(),
           onKeyDown: () => I(!1),
           onKeyUp: () => I(!0),
           ref: _,
@@ -323,9 +325,9 @@ const U = u.createContext(null), ot = ({
             borderRadius: "8px",
             height: "100%"
           },
-          tabIndex: s ? 0 : -1,
+          tabIndex: c ? 0 : -1,
           children: /* @__PURE__ */ e(
-            $e,
+            Ye,
             {
               "aria-roledescription": "slide",
               className: "mx-micro-card",
@@ -336,12 +338,12 @@ const U = u.createContext(null), ot = ({
                 cursor: "pointer",
                 height: r ? "100%" : 124,
                 p: 16,
-                ...v,
+                ...y,
                 "& .MuiCardHeader-avatar": {
                   mr: "8px"
                 }
               },
-              variant: c,
+              variant: s,
               children: /* @__PURE__ */ g(
                 k,
                 {
@@ -351,7 +353,7 @@ const U = u.createContext(null), ot = ({
                   },
                   children: [
                     /* @__PURE__ */ e(
-                      Xe,
+                      Qe,
                       {
                         avatar: p && a,
                         subheader: h && M,
@@ -360,9 +362,9 @@ const U = u.createContext(null), ot = ({
                         titleTypographyProps: { fontSize: 15, fontWeight: 600, variant: "h3" }
                       }
                     ),
-                    /* @__PURE__ */ e(je, { sx: { p: 0 }, children: !h && M }),
+                    /* @__PURE__ */ e(Xe, { sx: { p: 0 }, children: !h && M }),
                     !!o && /* @__PURE__ */ e(
-                      Ye,
+                      je,
                       {
                         sx: {
                           mt: "auto",
@@ -393,13 +395,13 @@ const U = u.createContext(null), ot = ({
       )
     }
   );
-}), lt = ({ beat: i }) => {
-  const { primary_category_guid: o, category_guids: t } = i, l = o || t?.[0] || Pe.UNCATEGORIZED;
-  return /* @__PURE__ */ e(Be, { categoryGuid: l, size: 16, sx: { minWidth: 16 } });
-}, nt = ({ beat: i }) => {
+}), nt = ({ beat: i }) => {
+  const { primary_category_guid: o, category_guids: t } = i, l = o || t?.[0] || be.UNCATEGORIZED;
+  return /* @__PURE__ */ e(Ze, { categoryGuid: l, size: 16, sx: { minWidth: 16 } });
+}, rt = ({ beat: i }) => {
   const { category_guids: o, merchant_guids: t, primary_category_guid: l, primary_merchant_guid: n } = i;
   return /* @__PURE__ */ e(
-    Ze,
+    Pe,
     {
       categoryGuid: l || o && o[0] || "",
       merchantGuid: n || t[0],
@@ -410,7 +412,7 @@ const U = u.createContext(null), ot = ({
       }
     }
   );
-}, rt = ({
+}, at = ({
   color: i = "currentColor",
   height: o,
   size: t = 16,
@@ -436,16 +438,16 @@ const U = u.createContext(null), ot = ({
       }
     )
   }
-), at = (i) => i ? i.data ? i.data.map((o) => {
+), st = (i) => i ? i.data ? i.data.map((o) => {
   const t = {};
   return i.names?.map((l, n) => {
     t[l] = o[n];
   }), t;
 }) : [] : [], ct = (i, o) => {
-  const t = at(i), l = t.length / 2, n = t.slice(0, l), r = t.slice(l);
+  const t = st(i), l = t.length / 2, n = t.slice(0, l), r = t.slice(l);
   return !n.length || !r.length ? o.palette.primary.main : n[0].amount > r[0].amount ? o.palette.error.main : n[0].amount < r[0].amount ? o.palette.success.main : o.palette.primary.main;
-}, st = ({ beat: i }) => {
-  const o = j(), t = ct(i.data_series, o);
+}, dt = ({ beat: i }) => {
+  const o = te(), t = ct(i.data_series, o);
   return /* @__PURE__ */ e(Ve, { sx: { color: t } });
 }, Se = () => /* @__PURE__ */ g("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ e(
@@ -1228,9 +1230,9 @@ const U = u.createContext(null), ot = ({
       }
     )
   ] })
-] }), dt = ({ beat: i }) => {
+] }), Et = ({ beat: i }) => {
   const { icon_type: o, icon_color: t } = i;
-  return o === 0 ? /* @__PURE__ */ e(ae, { filled: !0, sx: { color: (l) => t || l.palette.primary.main } }) : o === 1 ? /* @__PURE__ */ e(lt, { beat: i }) : o === 2 ? /* @__PURE__ */ e(nt, { beat: i }) : o === 3 ? /* @__PURE__ */ e(st, { beat: i }) : o === 5 ? /* @__PURE__ */ e(Ne, {}) : /* @__PURE__ */ e(
+  return o === 0 ? /* @__PURE__ */ e(ae, { filled: !0, sx: { color: (l) => t || l.palette.primary.main } }) : o === 1 ? /* @__PURE__ */ e(nt, { beat: i }) : o === 2 ? /* @__PURE__ */ e(rt, { beat: i }) : o === 3 ? /* @__PURE__ */ e(dt, { beat: i }) : o === 5 ? /* @__PURE__ */ e(Ne, {}) : /* @__PURE__ */ e(
     ae,
     {
       filled: !0,
@@ -1244,7 +1246,7 @@ const U = u.createContext(null), ot = ({
   if (!i)
     throw new Error("useCopyStore() must be used within the InsightsMicroWidgetDataProvider");
   return i.store.copyStore;
-}, Et = () => {
+}, ht = () => {
   const i = u.useContext(U);
   if (!i?.store?.insightsMicroWidgetStore)
     throw new Error(
@@ -1261,12 +1263,12 @@ const U = u.createContext(null), ot = ({
   if (!i)
     throw new Error("usePageview() must be used within the InsightsMicroWidgetDataProvider");
   return { onPageview: i.onPageview };
-}, ht = {
+}, ut = {
   LARGE: 180,
   STANDARD: 154,
   XLARGE: 200,
   XXLARGE: 248
-}, ut = 50, Ae = 1, pt = ({
+}, pt = 50, Ae = 1, _t = ({
   ariaLabel: i,
   backgroundColor: o,
   beat: t,
@@ -1274,25 +1276,25 @@ const U = u.createContext(null), ot = ({
   heightOverrides: n,
   index: r,
   isActiveCard: a,
-  onCardClick: s,
+  onCardClick: c,
   posthog: h,
-  showIcon: f,
+  showIcon: C,
   variant: p,
   widthOverrides: d
 }) => {
-  const { ref: E, inView: c } = me({
+  const { ref: E, inView: s } = me({
     threshold: Ae
-  }), { cardsCopy: C } = V(), { onEvent: _ } = z(), { updateBeat: R, updateOffer: O } = Et();
-  te(() => {
-    c && (t.has_been_displayed ? _(Ie(t.template)) : (t.guid.startsWith("OFR") ? O({
+  }), { cardsCopy: f } = V(), { onEvent: _ } = z(), { updateBeat: R, updateOffer: O } = ht();
+  ee(() => {
+    s && (t.has_been_displayed ? _(Ie(t.template)) : (t.guid.startsWith("OFR") ? O({
       ...t,
       has_been_displayed: !0
     }) : R({
       ...t,
       has_been_displayed: !0
-    }), _(ve(t.template))));
-  }, [c]), te(() => {
-    if (c && t)
+    }), _(ye(t.template))));
+  }, [s]), ee(() => {
+    if (s && t)
       if (t.template === "MarketingOffer") {
         const m = t;
         h?.capture("viewed_messaging_insight", {
@@ -1306,9 +1308,9 @@ const U = u.createContext(null), ot = ({
           template: t.template,
           position: r
         });
-  }, [t, r, c]);
+  }, [t, r, s]);
   const I = () => {
-    if (s && s(t), _(ge(t.template)), t.template === "MarketingOffer") {
+    if (c && c(t), _(ge(t.template)), t.template === "MarketingOffer") {
       const m = t;
       h?.capture("clicked_messaging_insight", {
         template: t.template,
@@ -1323,26 +1325,26 @@ const U = u.createContext(null), ot = ({
       });
   };
   return /* @__PURE__ */ e(
-    X,
+    j,
     {
-      actionText: t.micro_call_to_action || C.micro_card_cta,
+      actionText: t.micro_call_to_action || f.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,
       heightOverrides: n,
-      icon: /* @__PURE__ */ e(dt, { beat: t }),
+      icon: /* @__PURE__ */ e(Et, { beat: t }),
       isActiveCard: a,
       onCardClick: I,
       posthog: h,
       ref: E,
       showCTAColocatedWithText: l,
-      showIcon: f,
+      showIcon: C,
       title: t.micro_title && t.micro_title.length > 0 ? t.micro_title : t.title,
       variant: p,
       widthOverrides: d
     }
   );
-}, _t = ({
+}, Ct = ({
   currentBeatIndex: i,
   numBeats: o,
   onNextClick: t,
@@ -1350,9 +1352,9 @@ const U = u.createContext(null), ot = ({
   scrollRightBoundary: n,
   scrollX: r,
   shouldApplyDotAnimation: a = !1,
-  visibleCardsCount: s = 1
+  visibleCardsCount: c = 1
 }) => {
-  const h = j(), { carouselCopy: f } = V(), p = Math.floor(r) > n || i - s + 1 === 0, d = r < 0 || o - 1 === i, E = h.palette.grey[500], c = h.palette.primary.main;
+  const h = Fe(), { carouselCopy: C } = V(), p = Math.floor(r) > n || i - c + 1 === 0, d = r < 0 || o - 1 === i, E = h.palette.grey[500], s = h.palette.primary.main;
   return /* @__PURE__ */ g(
     k,
     {
@@ -1369,30 +1371,30 @@ const U = u.createContext(null), ot = ({
       },
       children: [
         /* @__PURE__ */ e(
-          ce,
+          se,
           {
             "aria-disabled": p,
-            "aria-label": f.previous_insight_cta_aria,
+            "aria-label": C.previous_insight_cta_aria,
             disabled: p,
             onClick: l,
             children: /* @__PURE__ */ e(
               He,
               {
-                sx: {
-                  color: p ? E : c
+                style: {
+                  color: p ? E : s
                 }
               }
             )
           }
         ),
-        Array.from({ length: o }).map((C, _) => {
+        Array.from({ length: o }).map((f, _) => {
           const R = _ === i;
           return /* @__PURE__ */ e(
             Z,
             {
               className: "mx-insights-micro-carousel-dots",
               sx: {
-                bgcolor: R ? c : E,
+                bgcolor: R ? s : E,
                 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"
@@ -1412,17 +1414,17 @@ const U = u.createContext(null), ot = ({
           );
         }),
         /* @__PURE__ */ e(
-          ce,
+          se,
           {
             "aria-disabled": d,
-            "aria-label": f.next_insight_cta_aria,
+            "aria-label": C.next_insight_cta_aria,
             disabled: d,
             onClick: t,
             children: /* @__PURE__ */ e(
-              Ce,
+              fe,
               {
-                sx: {
-                  color: d ? E : c
+                style: {
+                  color: d ? E : s
                 }
               }
             )
@@ -1439,25 +1441,25 @@ const U = u.createContext(null), ot = ({
   heightOverrides: n,
   onCardClick: r,
   posthog: a,
-  showIcon: s,
+  showIcon: c,
   variant: h
 }) => {
-  const { carouselCopy: f } = V(), p = {
+  const { carouselCopy: C } = V(), p = {
     showCTAColocatedWithText: l,
     heightOverrides: n,
     posthog: a,
-    showIcon: s,
+    showIcon: c,
     variant: h
   };
-  return /* @__PURE__ */ g(xe, { children: [
+  return /* @__PURE__ */ g(De, { children: [
     o.map((d, E) => {
-      const c = E + 1, C = o.length + 1, _ = be(
-        f.card_position_in_carousel_aria,
-        c.toString(),
-        C.toString()
+      const s = E + 1, f = o.length + 1, _ = Ge(
+        C.card_position_in_carousel_aria,
+        s.toString(),
+        f.toString()
       ), R = d.micro_title && d.micro_title.length > 0, O = d.micro_description && d.micro_description.length > 0, I = R ? d.micro_title : d.title, m = O ? d.micro_description : d.description;
       return /* @__PURE__ */ e(
-        pt,
+        _t,
         {
           ariaLabel: `${_}: ${I}, ${m}`,
           beat: d,
@@ -1471,7 +1473,7 @@ const U = u.createContext(null), ot = ({
       );
     }),
     /* @__PURE__ */ e(
-      Mt,
+      At,
       {
         isActiveCard: i === o.length,
         onCardClick: r,
@@ -1480,7 +1482,7 @@ const U = u.createContext(null), ot = ({
       }
     )
   ] });
-}, Ct = ({
+}, mt = ({
   analyticsMetadata: i,
   allowSingleCardPeeking: o = !1,
   beats: t = [],
@@ -1488,18 +1490,18 @@ const U = u.createContext(null), ot = ({
   heightOverrides: n,
   onCardClick: r,
   posthog: a,
-  showCarouselControls: s,
+  showCarouselControls: c,
   showIcon: h,
-  showWithMargin: f = !0,
+  showWithMargin: C = !0,
   variant: p,
   widthOverrides: d,
   visibleCardsCount: E = 1
   // Default to 1 card visible
 }) => {
-  const c = u.useRef(null), C = u.useRef(null), [_, R] = u.useState(0), [O, I] = u.useState(null), [m, T] = u.useState(null), [v, M] = u.useState(null), { carouselCopy: W } = V(), { onEvent: F } = z();
+  const s = u.useRef(null), f = u.useRef(null), [_, R] = u.useState(0), [O, I] = u.useState(null), [m, T] = u.useState(null), [y, M] = u.useState(null), { carouselCopy: W } = V(), { onEvent: F } = z();
   u.useEffect(() => {
-    if (c.current && !o) {
-      const A = c.current.offsetWidth, b = 8;
+    if (s.current && !o) {
+      const A = s.current.offsetWidth, b = 8;
       let B;
       if (E > 1) {
         const ne = (A - (E - 1) * b) / E / 3;
@@ -1508,8 +1510,8 @@ const U = u.createContext(null), ot = ({
         B = A;
       M(B);
     }
-  }, [E, c.current?.offsetWidth]), u.useEffect(() => {
-    const A = C.current?.offsetWidth;
+  }, [E, s.current?.offsetWidth]), u.useEffect(() => {
+    const A = f.current?.offsetWidth;
     if (typeof A == "number" && o) {
       const b = (G) => {
         const re = [
@@ -1523,42 +1525,42 @@ const U = u.createContext(null), ot = ({
       };
       M(b(A));
       const B = () => {
-        const G = C.current?.offsetWidth;
+        const G = f.current?.offsetWidth;
         typeof G == "number" && M(b(G));
       };
       return window.addEventListener("resize", B), () => {
         window.removeEventListener("resize", B);
       };
     }
-  }, [o, C]);
+  }, [o, f]);
   const K = () => {
-    F(S.ON_CAROUSEL_FORWARD_CLICK, i), c.current && v && c.current.scrollTo({
-      left: _ + v + 8,
+    F(S.ON_CAROUSEL_FORWARD_CLICK, i), s.current && y && s.current.scrollTo({
+      left: _ + y + 8,
       top: 0,
       behavior: "smooth"
     });
   }, $ = () => {
-    F(S.ON_CAROUSEL_BACK_CLICK, i), c.current && v && c.current.scrollTo({
-      left: Math.max(0, _ - (v + 8)),
+    F(S.ON_CAROUSEL_BACK_CLICK, i), s.current && y && s.current.scrollTo({
+      left: Math.max(0, _ - (y + 8)),
       top: 0,
       behavior: "smooth"
     });
+  }, X = () => {
+    s.current && R(s.current.scrollLeft);
   }, Q = () => {
-    c.current && R(c.current.scrollLeft);
-  }, q = () => {
     if (!m || !O) return;
-    m - O > ut ? F(S.ON_CAROUSEL_FORWARD_SWIPE, i) : F(S.ON_CAROUSEL_BACK_SWIPE, i);
-  }, J = (A) => {
+    m - O > pt ? F(S.ON_CAROUSEL_FORWARD_SWIPE, i) : F(S.ON_CAROUSEL_BACK_SWIPE, i);
+  }, q = (A) => {
     I(A.targetTouches[0].clientX);
   }, Y = (A) => {
     I(null), T(A.targetTouches[0].clientX);
-  }, w = v ? Math.round(_ / (v + 8)) : 0, We = c.current ? c.current.scrollWidth - c.current.offsetWidth : 0;
+  }, w = y ? Math.round(_ / (y + 8)) : 0, We = s.current ? s.current.scrollWidth - s.current.offsetWidth : 0;
   return /* @__PURE__ */ g(
     k,
     {
       "aria-label": W.carousel_title,
       "aria-roledescription": "carousel",
-      ref: C,
+      ref: f,
       role: "group/region",
       sx: {
         alignItems: "center",
@@ -1571,18 +1573,18 @@ const U = u.createContext(null), ot = ({
           k,
           {
             direction: "row",
-            onScroll: Q,
-            onTouchEnd: q,
-            onTouchMove: J,
+            onScroll: X,
+            onTouchEnd: Q,
+            onTouchMove: q,
             onTouchStart: Y,
-            ref: c,
+            ref: s,
             sx: {
               alignItems: "center",
               height: n && "100%",
               gap: 8,
               listStyleType: "none",
               m: 0,
-              maxWidth: f ? "calc(100% - 32px)" : "100%",
+              maxWidth: C ? "calc(100% - 32px)" : "100%",
               overflowX: "auto",
               overflowY: "hidden",
               p: 0,
@@ -1598,7 +1600,7 @@ const U = u.createContext(null), ot = ({
               {
                 activeCardIndex: w,
                 beats: t,
-                cardWidth: v,
+                cardWidth: y,
                 heightOverrides: n,
                 onCardClick: r,
                 posthog: a,
@@ -1609,8 +1611,8 @@ const U = u.createContext(null), ot = ({
             )
           }
         ),
-        s && /* @__PURE__ */ e(
-          _t,
+        c && /* @__PURE__ */ e(
+          Ct,
           {
             currentBeatIndex: w + E - 1,
             numBeats: t.length + 1,
@@ -1625,7 +1627,7 @@ const U = u.createContext(null), ot = ({
       ]
     }
   );
-}, mt = P(Ct), Rt = ({
+}, Rt = P(mt), gt = ({
   analyticsMetadata: i,
   onCardClick: o,
   posthog: t,
@@ -1649,8 +1651,8 @@ const U = u.createContext(null), ot = ({
         /* @__PURE__ */ e(
           Le,
           {
-            sx: (s) => ({
-              color: s.palette.primary.main,
+            sx: (c) => ({
+              color: c.palette.primary.main,
               fontSize: 18,
               fontWeight: 700,
               lineHeight: "24px"
@@ -1660,13 +1662,13 @@ const U = u.createContext(null), ot = ({
           }
         ),
         /* @__PURE__ */ e(
-          De,
+          xe,
           {
-            endIcon: /* @__PURE__ */ e(Ce, { size: 20 }),
+            endIcon: /* @__PURE__ */ e(fe, { size: 20 }),
             onClick: a,
             size: "small",
-            sx: (s) => ({
-              color: s.palette.primary.main
+            sx: (c) => ({
+              color: c.palette.primary.main
             }),
             variant: "text",
             children: n.view_all_insights_in_full_feed_cta_aria
@@ -1675,7 +1677,7 @@ const U = u.createContext(null), ot = ({
       ]
     }
   ) : /* @__PURE__ */ e(ke, {});
-}, gt = P(Rt), It = ({
+}, It = P(gt), yt = ({
   heightOverrides: i,
   widthOverrides: o,
   children: t
@@ -1704,17 +1706,17 @@ const U = u.createContext(null), ot = ({
   showIcon: n,
   variant: r
 }) => {
-  const { cardsCopy: a } = V(), { onEvent: s } = z(), { onPageview: h } = Me();
+  const { cardsCopy: a } = V(), { onEvent: c } = z(), { onPageview: h } = Me();
   u.useEffect(() => {
     h(H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
   }, []);
-  const f = () => {
-    t && t(), s(S.ON_NO_RELEVANT_INSIGHTS_CLICKED), l?.capture("clicked_insight", {
+  const C = () => {
+    t && t(), c(S.ON_NO_RELEVANT_INSIGHTS_CLICKED), l?.capture("clicked_insight", {
       template: "no_relevant_insights"
     });
   };
   return /* @__PURE__ */ e(
-    X,
+    j,
     {
       actionText: a.micro_card_cta,
       ariaLabel: i,
@@ -1722,7 +1724,7 @@ const U = u.createContext(null), ot = ({
       heightOverrides: o,
       icon: /* @__PURE__ */ e(Se, {}),
       isZeroState: !0,
-      onCardClick: f,
+      onCardClick: C,
       posthog: l,
       showIcon: n,
       style: {
@@ -1734,7 +1736,7 @@ const U = u.createContext(null), ot = ({
       variant: r
     }
   );
-}, jt = P(Oe), Te = ({
+}, Qt = P(Oe), Te = ({
   ariaLabel: i,
   heightOverrides: o,
   onCardClick: t,
@@ -1742,25 +1744,25 @@ const U = u.createContext(null), ot = ({
   showIcon: n,
   variant: r
 }) => {
-  const { onPageview: a } = Me(), { zeroStateCopy: s } = V();
+  const { onPageview: a } = Me(), { zeroStateCopy: c } = V();
   return u.useEffect(() => {
     a(H.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
   }, []), /* @__PURE__ */ e(
-    X,
+    j,
     {
       ariaLabel: i,
-      description: s.carousel_zero_state_description,
+      description: c.carousel_zero_state_description,
       heightOverrides: o,
       icon: /* @__PURE__ */ e(Se, {}),
       isZeroState: !0,
       onCardClick: t,
       posthog: l,
       showIcon: n,
-      title: s.carousel_zero_state_title,
+      title: c.carousel_zero_state_title,
       variant: r
     }
   );
-}, Xt = P(Te), vt = () => /* @__PURE__ */ e(
+}, qt = P(Te), vt = () => /* @__PURE__ */ e(
   Z,
   {
     sx: {
@@ -1770,9 +1772,9 @@ const U = u.createContext(null), ot = ({
       justifyContent: "center",
       width: "100%"
     },
-    children: /* @__PURE__ */ e(Ge, {})
+    children: /* @__PURE__ */ e(Ue, {})
   }
-), N = new it(), yt = ({
+), N = new ot(), St = ({
   allowSingleCardPeeking: i,
   areBeatsLoading: o,
   beats: t = [],
@@ -1781,17 +1783,17 @@ const U = u.createContext(null), ot = ({
   endpoint: n = "/",
   heightOverrides: r,
   logOutUser: a,
-  onCardClick: s = () => {
+  onCardClick: c = () => {
   },
   onEvent: h = () => {
   },
-  onPageview: f = () => {
+  onPageview: C = () => {
   },
   posthog: p,
   showBorder: d = !0,
   showCarouselControls: E,
-  showHeader: c,
-  showIcon: C,
+  showHeader: s,
+  showIcon: f,
   showWithMargin: _ = !0,
   token: R = "",
   userHasFullInsightFeedBeats: O,
@@ -1799,7 +1801,7 @@ const U = u.createContext(null), ot = ({
   visibleCardsCount: m = 1,
   widthOverrides: T
 }) => {
-  const [v, M] = ee("STANDARD"), [W, F] = ee(!1), [K, $] = ee(!1), Q = ze([h], N), q = Ke([f], N);
+  const [y, M] = J("STANDARD"), [W, F] = J(!1), [K, $] = J(!1), X = Ke([h], N), Q = $e([C], N);
   u.useEffect(() => {
     !N.isInitialized && !K && (N.initialize(n, R, a).catch(() => $(!1)), $(!0));
   }, [n, R, a, N.isInitialized, K]), u.useEffect(() => {
@@ -1808,36 +1810,36 @@ const U = u.createContext(null), ot = ({
   }, [window.innerHeight]), u.useEffect(() => {
     F(!o && N.isInitialized);
   }, [o, N.isInitialized]);
-  const J = {
+  const q = {
     showCTAColocatedWithText: l,
     heightOverrides: r,
-    onCardClick: s,
+    onCardClick: c,
     posthog: p,
-    showIcon: C,
+    showIcon: f,
     showWithMargin: _,
     widthOverrides: T
   }, Y = {
-    carouselSize: v,
+    carouselSize: y,
     variant: I,
     showCTAColocatedWithText: l,
     heightOverrides: r,
-    onCardClick: s,
+    onCardClick: c,
     posthog: p,
-    showIcon: C
+    showIcon: f
   };
-  return /* @__PURE__ */ e(ot, { onEvent: Q, onPageview: q, store: N, children: /* @__PURE__ */ g(It, { heightOverrides: r, widthOverrides: T, children: [
+  return /* @__PURE__ */ e(lt, { onEvent: X, onPageview: Q, store: N, children: /* @__PURE__ */ g(yt, { heightOverrides: r, widthOverrides: T, children: [
     !W && /* @__PURE__ */ e(vt, {}),
-    W && c && /* @__PURE__ */ e(
-      gt,
+    W && s && /* @__PURE__ */ e(
+      It,
       {
         analyticsMetadata: Ee,
-        onCardClick: s,
+        onCardClick: c,
         posthog: p,
         widthOverrides: T
       }
     ),
     W && !!t.length && /* @__PURE__ */ e(
-      mt,
+      Rt,
       {
         allowSingleCardPeeking: i,
         analyticsMetadata: Ee,
@@ -1845,7 +1847,7 @@ const U = u.createContext(null), ot = ({
         showCarouselControls: E,
         variant: d ? I : void 0,
         visibleCardsCount: m,
-        ...J
+        ...q
       }
     ),
     W && !t.length && /* @__PURE__ */ e(
@@ -1860,7 +1862,7 @@ const U = u.createContext(null), ot = ({
           k,
           {
             sx: {
-              height: `calc(${ht[v]}px - 44px)`,
+              height: `calc(${ut[y]}px - 44px)`,
               width: _ ? `calc(${T}px - 32px)` : "100%"
             },
             children: O ? /* @__PURE__ */ e(Oe, { ...Y }) : /* @__PURE__ */ e(Te, { ...Y })
@@ -1869,7 +1871,7 @@ const U = u.createContext(null), ot = ({
       }
     )
   ] }) });
-}, Qt = P(yt), St = ({
+}, Jt = P(St), Mt = ({
   isActiveCard: i,
   ariaLabel: o,
   heightOverrides: t,
@@ -1877,53 +1879,53 @@ const U = u.createContext(null), ot = ({
   posthog: n,
   showIcon: r,
   variant: a,
-  widthOverrides: s
+  widthOverrides: c
 }) => {
-  const h = j(), { ref: f, inView: p } = me({
+  const h = te(), { ref: C, inView: p } = me({
     threshold: Ae
   }), { cardsCopy: d } = V(), { onEvent: E } = z();
-  te(() => {
-    p && (E(ye.ON_VIEW_MORE_VIEWED), n?.capture("viewed_insight", {
+  ee(() => {
+    p && (E(ve.ON_VIEW_MORE_VIEWED), n?.capture("viewed_insight", {
       template: "view_more_card"
     }));
   }, [p]);
-  const c = () => {
+  const s = () => {
     l && l(), E(S.ON_VIEW_MORE_CLICKED), n?.capture("clicked_insight", {
       template: "view_more_card"
     });
   };
   return /* @__PURE__ */ e(
-    X,
+    j,
     {
       actionText: d.micro_card_cta,
       ariaLabel: o,
       description: d.view_more_card_description,
       heightOverrides: t,
-      icon: /* @__PURE__ */ e(rt, { color: h.palette.primary.main }),
+      icon: /* @__PURE__ */ e(at, { color: h.palette.primary.main }),
       isActiveCard: i,
-      onCardClick: c,
+      onCardClick: s,
       posthog: n,
-      ref: f,
+      ref: C,
       showIcon: r,
       title: d.view_more_card_title,
       variant: a,
-      widthOverrides: s
+      widthOverrides: c
     }
   );
-}, Mt = P(St);
+}, At = P(Mt);
 export {
-  it as A,
-  X as B,
-  gt as C,
-  ot as I,
-  mt as M,
-  jt as N,
+  ot as A,
+  j as B,
+  It as C,
+  lt as I,
+  Rt as M,
+  Qt as N,
   Ee as T,
-  Mt as V,
-  Xt as Z,
-  pt as a,
-  Qt as b,
-  rt as c,
-  st as d,
+  At as V,
+  qt as Z,
+  _t as a,
+  Jt as b,
+  at as c,
+  dt as d,
   Se as e
 };