@mx-cartographer/experiences 7.2.5-alpha.mm0 → 7.2.5-alpha.mm2

package/dist/{ViewMoreMicroCard-BxRNJMMm.mjs → ViewMoreMicroCard-vWvKWBNw.mjs}

@@ -1,15 +1,15 @@
 import { jsx as e, jsxs as v } from "react/jsx-runtime";
-import u, { useState as te, useEffect as oe } from "react";
+import p, { useState as te, useEffect as oe } from "react";
 import { observer as G } from "mobx-react-lite";
 import Pe from "@mui/material/Button";
 import K from "@mui/material/Stack";
 import Ge from "@mui/material/Typography";
-import { ChevronLeft as Ue, ChevronRight as Se } from "@mxenabled/mx-icons";
+import { ChevronLeft as Ue, ChevronRight as Me } from "@mxenabled/mx-icons";
 import { L as be } from "./Loader-DUaFpDGv.mjs";
 import b from "@mui/material/Box";
 import pe from "@mui/material/IconButton";
 import { useTheme as ze } from "@mui/material/styles";
-import { useInView as Me } from "react-intersection-observer";
+import { useInView as Se } from "react-intersection-observer";
 import { P as Ke, CategoryIcon as $e, useTokens as Ae, MerchantLogo as Ye, Icon as ie } from "@mxenabled/mxui";
 import se from "@mui/material/styles/useTheme";
 import { b as je } from "./Category-CevNQ03n.mjs";
@@ -21,8 +21,8 @@ import { G as _e, a as Je, u as et, b as tt } from "./useCombineEvents-BUDIR1ba.
 import { B as Ce } from "./BeatApi-DhJpgCLz.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";
+import lt from "@mui/material/CardContent";
+import rt from "@mui/material/CardHeader";
 const fe = {
   featureVersion: "spendVsIncomeTrends"
 };
@@ -56,7 +56,7 @@ class nt {
     return this.copyObject.zero_state;
   }
 }
-const he = {
+const Ee = {
   BillAmountNotStandard: "BillAmountNotStandard",
   CanadianUpcomingDeadlineAlert: "CanadianUpcomingDeadlineAlert",
   DuplicatePaymentV2: "DuplicatePaymentV2",
@@ -73,38 +73,38 @@ const he = {
   WeeklyNewMerchantsV2: "WeeklyNewMerchantsV2",
   MonthlySpendComparison: "MonthlySpendComparison",
   MonthlySpendToIncomeComparison: "MonthlySpendToIncomeComparison"
-}, S = window?.app?.clientConfig?.microwidget_instance_id || "", me = {
+}, M = window?.app?.clientConfig?.microwidget_instance_id || "", me = {
   INSIGHTS_MICRO_WIDGET: "/micro-insights-carousel"
-}, Te = (i) => `on${i}Click`, We = (i) => `on${i}View`, we = (i) => `on${i}ViewFirstTime`, Ee = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), at = () => Object.values(he).reduce(
+}, Te = (i) => `on${i}Click`, We = (i) => `on${i}View`, we = (i) => `on${i}ViewFirstTime`, he = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), at = () => Object.values(Ee).reduce(
   (i, o) => ({
     ...i,
     [Te(o)]: {
       action: w.MICRO_BEAT_CLICKED,
       category: W.BEAT_INTERACTION,
-      label: Ee(o),
-      value: S
+      label: he(o),
+      value: M
     }
   }),
   {}
-), ct = () => Object.values(he).reduce(
+), ct = () => Object.values(Ee).reduce(
   (i, o) => ({
     ...i,
     [We(o)]: {
       action: w.MICRO_BEAT_DISPLAYED,
       category: W.BEAT_INTERACTION,
-      label: Ee(o),
-      value: S
+      label: he(o),
+      value: M
     }
   }),
   {}
-), st = () => Object.values(he).reduce(
+), st = () => Object.values(Ee).reduce(
   (i, o) => ({
     ...i,
     [we(o)]: {
       action: w.MICRO_BEAT_DISPLAYED_FIRST_TIME,
       category: W.BEAT_INTERACTION,
-      label: Ee(o),
-      value: S
+      label: he(o),
+      value: M
     }
   }),
   {}
@@ -116,14 +116,14 @@ const he = {
 }, W = {
   MICRO_WIDGET_INTERACTION: "Micro Widget Interaction",
   BEAT_INTERACTION: "Beat Interaction"
-}, M = {
+}, S = {
   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"
-}, De = {
+}, xe = {
   ON_VIEW_MORE_VIEWED: "onViewMoreCardView"
 }, w = {
   CONTROL_BACKWARD: "Control Backward",
@@ -142,60 +142,60 @@ const he = {
     label: T.MICRO_WIDGET,
     name: H.MICRO_WIDGET_CAROUSEL,
     path: me.INSIGHTS_MICRO_WIDGET,
-    value: S
+    value: M
   },
   // zero state
   [H.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
     label: T.MICRO_WIDGET,
     name: H.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
     path: me.INSIGHTS_MICRO_WIDGET,
-    value: S
+    value: M
   },
   // no relevant cards
   [H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
     label: T.MICRO_WIDGET,
     name: H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
     path: "/micro-widget",
-    value: S
+    value: M
   }
 }, Re = {
   // carousel control interaction events - clicks and swipes
-  [M.ON_CAROUSEL_BACK_CLICK]: {
+  [S.ON_CAROUSEL_BACK_CLICK]: {
     action: w.CONTROL_BACKWARD,
     category: W.MICRO_WIDGET_INTERACTION,
     label: T.CAROUSEL_CONTROL,
-    value: S
+    value: M
   },
-  [M.ON_CAROUSEL_FORWARD_CLICK]: {
+  [S.ON_CAROUSEL_FORWARD_CLICK]: {
     action: w.CONTROL_FORWARD,
     category: W.MICRO_WIDGET_INTERACTION,
     label: T.CAROUSEL_CONTROL,
-    value: S
+    value: M
   },
-  [M.ON_CAROUSEL_BACK_SWIPE]: {
+  [S.ON_CAROUSEL_BACK_SWIPE]: {
     action: w.SWIPE_BACKWARD,
     category: W.MICRO_WIDGET_INTERACTION,
     label: T.CAROUSEL_CONTROL,
-    value: S
+    value: M
   },
-  [M.ON_CAROUSEL_FORWARD_SWIPE]: {
+  [S.ON_CAROUSEL_FORWARD_SWIPE]: {
     action: w.SWIPE_FORWARD,
     category: W.MICRO_WIDGET_INTERACTION,
     label: T.CAROUSEL_CONTROL,
-    value: S
+    value: M
   },
   // read more card events
-  [M.ON_VIEW_MORE_CLICKED]: {
+  [S.ON_VIEW_MORE_CLICKED]: {
     action: w.MICRO_BEAT_CLICKED,
     category: W.BEAT_INTERACTION,
     label: T.VIEW_MORE,
-    value: S
+    value: M
   },
-  [De.ON_VIEW_MORE_VIEWED]: {
+  [xe.ON_VIEW_MORE_VIEWED]: {
     action: w.MICRO_BEAT_DISPLAYED,
     category: W.BEAT_INTERACTION,
     label: T.VIEW_MORE,
-    value: S
+    value: M
   },
   ...at(),
   ...ct(),
@@ -212,14 +212,14 @@ class dt {
   constructor() {
     de(this);
   }
-  initialize = async (o, t, r) => {
-    this.onAnalyticEvent = (n, l) => {
-      Ie(n, l).then((a) => a).catch((a) => {
-        throw a.status === 401 && r(), a;
+  initialize = async (o, t, l) => {
+    this.onAnalyticEvent = (n, r) => {
+      Ie(n, r).then((a) => a).catch((a) => {
+        throw a.status === 401 && l(), a;
       });
-    }, this.onAnalyticPageView = (n, l) => {
-      ye(n, l).then((a) => a).catch((a) => {
-        throw a.status === 401 && r(), a;
+    }, this.onAnalyticPageView = (n, r) => {
+      ye(n, r).then((a) => a).catch((a) => {
+        throw a.status === 401 && l(), a;
       });
     }, this.beatApi = new Ce(o, t);
   };
@@ -230,7 +230,7 @@ class dt {
     this.beatApi.updateOffer(o);
   };
 }
-class ht {
+class Et {
   copyStore;
   endpoint = "/";
   insightsMicroWidgetStore;
@@ -240,39 +240,40 @@ class ht {
   constructor() {
     this.copyStore = new nt(), this.insightsMicroWidgetStore = new dt(), de(this);
   }
-  initialize = async (o, t, r) => {
-    await this.copyStore.initialize(o, t), await this.insightsMicroWidgetStore.initialize(o, t, r);
+  initialize = async (o, t, l) => {
+    await this.copyStore.initialize(o, t), await this.insightsMicroWidgetStore.initialize(o, t, l);
     const n = await Je(o, t, "1.0.0", "Micro Insights Carousel");
     Oe(() => {
       this.session = n, this.isInitialized = !0;
     });
   };
 }
-const $ = u.createContext(null), Et = ({
+const $ = p.createContext(null), ht = ({
   onEvent: i,
   onPageview: o,
   store: t,
-  children: r
-}) => /* @__PURE__ */ e($.Provider, { value: { onEvent: i, onPageview: o, store: t, children: r }, children: r }), re = u.forwardRef(
+  children: l
+}) => /* @__PURE__ */ e($.Provider, { value: { onEvent: i, onPageview: o, store: t, children: l }, children: l }), le = p.forwardRef(
   function({
     actionText: o,
     ariaLabel: t,
-    backgroundColor: r,
+    backgroundColor: l,
     description: n,
-    heightOverrides: l,
+    heightOverrides: r,
     icon: a,
     isActiveCard: d,
-    isZeroState: p,
-    onCardClick: _ = () => {
+    isZeroState: _,
+    onCardClick: E = () => {
     },
     showIcon: C,
     style: f = {},
     fontColors: h = {},
     title: m,
     variant: c,
-    widthOverrides: E
+    widthOverrides: u
   }, g) {
-    const I = se(), [D, O] = u.useState(!1), { cardStyle: y, linkTextStyle: F } = f, z = c ? y : { border: "none", boxShadow: "none", ...y }, R = /* @__PURE__ */ e(
+    console.log("MicroInsightCard", { heightOverrides: r });
+    const I = se(), [x, O] = p.useState(!1), { cardStyle: y, linkTextStyle: F } = f, z = c ? y : { border: "none", boxShadow: "none", ...y }, R = /* @__PURE__ */ e(
       Ke,
       {
         className: "mx-micro-card-description",
@@ -283,8 +284,8 @@ const $ = u.createContext(null), Et = ({
           letterSpacing: 0.48,
           lineHeight: "20px",
           overflow: "hidden",
-          pl: p ? 0 : 28,
-          pr: p ? 0 : 8,
+          pl: _ ? 0 : 28,
+          pr: _ ? 0 : 8,
           WebkitBoxOrient: "vertical",
           WebkitLineClamp: 2,
           wordWrap: "break-word"
@@ -309,7 +310,7 @@ const $ = u.createContext(null), Et = ({
         role: "group",
         sx: {
           height: "100%",
-          minWidth: E ? `${E}px` : "100%",
+          minWidth: u ? `${u}px` : "100%",
           fontFamily: I.typography.fontFamily
         },
         children: /* @__PURE__ */ e(
@@ -318,13 +319,13 @@ const $ = u.createContext(null), Et = ({
             "aria-hidden": !d,
             "aria-label": t,
             id: "divButton",
-            onClick: () => _(),
+            onClick: () => E(),
             onKeyDown: () => O(!1),
             onKeyUp: () => O(!0),
             ref: g,
             role: "button",
             sx: {
-              border: D ? "1px solid rgba(82, 138, 224, 0.8)" : void 0,
+              border: x ? "1px solid rgba(82, 138, 224, 0.8)" : void 0,
               borderRadius: "8px",
               height: "100%"
             },
@@ -334,11 +335,12 @@ const $ = u.createContext(null), Et = ({
               {
                 "aria-roledescription": "slide",
                 className: "mx-micro-card",
+                id: "MicroInsightCard",
                 role: "group",
                 sx: {
-                  backgroundColor: r,
+                  backgroundColor: l,
                   cursor: "pointer",
-                  height: l ? "100%" : 124,
+                  height: r ? "100%" : 124,
                   p: 16,
                   ...z,
                   "& .MuiCardHeader-avatar": {
@@ -356,16 +358,16 @@ const $ = u.createContext(null), Et = ({
                     },
                     children: [
                       /* @__PURE__ */ e(
-                        lt,
+                        rt,
                         {
                           avatar: C && a,
-                          subheader: p && R,
+                          subheader: _ && R,
                           sx: { color: h.headerColor, p: 0 },
                           title: m,
                           titleTypographyProps: { fontSize: 15, fontWeight: 600, variant: "h3" }
                         }
                       ),
-                      /* @__PURE__ */ e(rt, { sx: { p: 0 }, children: !p && R }),
+                      /* @__PURE__ */ e(lt, { sx: { p: 0 }, children: !_ && R }),
                       !!o && /* @__PURE__ */ e(
                         ot,
                         {
@@ -376,12 +378,12 @@ const $ = u.createContext(null), Et = ({
                           children: /* @__PURE__ */ e(
                             b,
                             {
-                              sx: (x) => ({
-                                color: h.buttonColor ? h.buttonColor : x.palette.primary.main,
+                              sx: (D) => ({
+                                color: h.buttonColor ? h.buttonColor : D.palette.primary.main,
                                 fontSize: 14,
                                 fontWeight: "bold",
                                 px: 28,
-                                fontFamily: x.typography.fontFamily,
+                                fontFamily: D.typography.fontFamily,
                                 ...F
                               }),
                               children: o
@@ -424,9 +426,9 @@ const $ = u.createContext(null), Et = ({
   color: i = "currentColor",
   height: o,
   size: t = 16,
-  styles: r,
+  styles: l,
   viewBox: n = "0 0 16 16",
-  width: l
+  width: r
 }) => /* @__PURE__ */ e(
   "svg",
   {
@@ -434,9 +436,9 @@ const $ = u.createContext(null), Et = ({
     className: "kyper-icon",
     focusable: !1,
     height: o || t,
-    style: r,
+    style: l,
     viewBox: n,
-    width: l || t,
+    width: r || t,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ e(
       "path",
@@ -448,16 +450,16 @@ const $ = u.createContext(null), Et = ({
   }
 ), mt = (i) => i ? i.data ? i.data.map((o) => {
   const t = {};
-  return i.names?.map((r, n) => {
-    t[r] = o[n];
+  return i.names?.map((l, n) => {
+    t[l] = o[n];
   }), t;
 }) : [] : [], gt = (i, o) => {
-  const t = mt(i), r = t.length / 2, n = t.slice(0, r), l = t.slice(r);
-  return !n.length || !l.length ? o.Color.Primary300 : n[0].amount > l[0].amount ? o.Color.Error300 : n[0].amount < l[0].amount ? o.Color.Success300 : o.Color.Primary300;
+  const t = mt(i), l = t.length / 2, n = t.slice(0, l), r = t.slice(l);
+  return !n.length || !r.length ? o.Color.Primary300 : n[0].amount > r[0].amount ? o.Color.Error300 : n[0].amount < r[0].amount ? o.Color.Success300 : o.Color.Primary300;
 }, Rt = ({ beat: i }) => {
   const o = Ae(), t = gt(i.data_series, o);
   return /* @__PURE__ */ e(ie, { name: "bar_chart", sx: { color: t } });
-}, xe = () => /* @__PURE__ */ v("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
+}, De = () => /* @__PURE__ */ v("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ e(
     "path",
     {
@@ -1238,37 +1240,37 @@ const $ = u.createContext(null), Et = ({
       }
     )
   ] })
-] }), ve = ({ beat: i, clientColorScheme: o, color: t, type: r }) => {
-  const n = se(), l = o?.primary_300 ? o.primary_300 : n.palette.primary.main;
-  return r === 0 ? /* @__PURE__ */ e(ie, { fill: !0, name: "error", sx: { color: t || l } }) : r === 1 && i ? /* @__PURE__ */ e(ut, { beat: i }) : r === 2 && i ? /* @__PURE__ */ e(Ct, { beat: i }) : r === 3 && i ? /* @__PURE__ */ e(Rt, { beat: i }) : r === 5 && i ? /* @__PURE__ */ e(ie, { name: "campaign" }) : /* @__PURE__ */ e(
+] }), ve = ({ beat: i, clientColorScheme: o, color: t, type: l }) => {
+  const n = se(), r = o?.primary_300 ? o.primary_300 : n.palette.primary.main;
+  return l === 0 ? /* @__PURE__ */ e(ie, { fill: !0, name: "error", sx: { color: t || r } }) : l === 1 && i ? /* @__PURE__ */ e(ut, { beat: i }) : l === 2 && i ? /* @__PURE__ */ e(Ct, { beat: i }) : l === 3 && i ? /* @__PURE__ */ e(Rt, { beat: i }) : l === 5 && i ? /* @__PURE__ */ e(ie, { name: "campaign" }) : /* @__PURE__ */ e(
     ie,
     {
       fill: !0,
       name: "info",
       sx: {
-        color: l
+        color: r
       }
     }
   );
 }, k = () => {
-  const i = u.useContext($);
+  const i = p.useContext($);
   if (!i)
     throw new Error("useCopyStore() must be used within the InsightsMicroWidgetDataProvider");
   return i.store.copyStore;
 }, It = () => {
-  const i = u.useContext($);
+  const i = p.useContext($);
   if (!i?.store?.insightsMicroWidgetStore)
     throw new Error(
       "useInsightsMicroWidgetStore() must be used within the InsightsMicroWidgetDataProvider"
     );
   return i.store.insightsMicroWidgetStore;
 }, Y = () => {
-  const i = u.useContext($);
+  const i = p.useContext($);
   if (!i)
     throw new Error("useEvent() must be used within the InsightsMicroWidgetDataProvider");
   return { onEvent: i.onEvent };
 }, Le = () => {
-  const i = u.useContext($);
+  const i = p.useContext($);
   if (!i)
     throw new Error("usePageview() must be used within the InsightsMicroWidgetDataProvider");
   return { onPageview: i.onPageview };
@@ -1281,22 +1283,23 @@ const $ = u.createContext(null), Et = ({
   ariaLabel: i,
   backgroundColor: o,
   beat: t,
-  clientColorScheme: r,
+  clientColorScheme: l,
   showCTAColocatedWithText: n = !0,
-  heightOverrides: l,
+  heightOverrides: r,
   index: a,
   isActiveCard: d,
-  onCardClick: p,
-  posthog: _,
+  onCardClick: _,
+  posthog: E,
   showIcon: C,
   variant: f,
   widthOverrides: h
 }) => {
-  const { ref: m, inView: c } = Me({
+  console.log("BeatCard", { heightOverrides: r });
+  const { ref: m, inView: c } = Se({
     threshold: Ve
-  }), { cardsCopy: E } = k(), { onEvent: g } = Y(), { updateBeat: I, updateOffer: D } = It();
+  }), { cardsCopy: u } = k(), { onEvent: g } = Y(), { updateBeat: I, updateOffer: x } = It();
   oe(() => {
-    c && (t.has_been_displayed ? g(We(t.template)) : (t.guid.startsWith("OFR") ? D({
+    c && (t.has_been_displayed ? g(We(t.template)) : (t.guid.startsWith("OFR") ? x({
       ...t,
       has_been_displayed: !0
     }) : I({
@@ -1307,54 +1310,54 @@ const $ = u.createContext(null), Et = ({
     if (c && t)
       if (t.template === "MarketingOffer") {
         const y = t;
-        _?.capture("viewed_messaging_insight", {
+        E?.capture("viewed_messaging_insight", {
           template: t.template,
           campaign_guid: y.campaign_guid,
           campaign_name: y.pulse_campaign_name
         });
       } else
-        _?.capture("viewed_insight", {
+        E?.capture("viewed_insight", {
           beat_guid: t.guid,
           template: t.template,
           position: a
         });
   }, [t, a, c]);
   const O = () => {
-    if (p && p(t), g(Te(t.template)), t.template === "MarketingOffer") {
+    if (_ && _(t), g(Te(t.template)), t.template === "MarketingOffer") {
       const y = t;
-      _?.capture("clicked_messaging_insight", {
+      E?.capture("clicked_messaging_insight", {
         template: t.template,
         campaign_guid: y.campaign_guid,
         campaign_name: y.pulse_campaign_name
       });
     } else
-      _?.capture("clicked_insight", {
+      E?.capture("clicked_insight", {
         beat_guid: t.guid,
         template: t.template,
         position: a
       });
   };
   return /* @__PURE__ */ e(
-    re,
+    le,
     {
-      actionText: t.micro_call_to_action || E.micro_card_cta,
+      actionText: t.micro_call_to_action || u.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: l,
+      fontColors: { buttonColor: l?.primary_300 },
+      heightOverrides: r,
       icon: ve && /* @__PURE__ */ e(
         ve,
         {
           beat: t,
-          clientColorScheme: r,
+          clientColorScheme: l,
           color: t?.icon_color,
           type: t?.icon_type
         }
       ),
       isActiveCard: d,
       onCardClick: O,
-      posthog: _,
+      posthog: E,
       ref: m,
       showCTAColocatedWithText: n,
       showIcon: C,
@@ -1363,18 +1366,18 @@ const $ = u.createContext(null), Et = ({
       widthOverrides: h
     }
   );
-}, St = ({
+}, Mt = ({
   clientColorScheme: i,
   currentBeatIndex: o,
   numBeats: t,
-  onNextClick: r,
+  onNextClick: l,
   onPreviousClick: n,
-  scrollRightBoundary: l,
+  scrollRightBoundary: r,
   scrollX: a,
   shouldApplyNewAnimation: d = !1,
-  visibleCardsCount: p = 1
+  visibleCardsCount: _ = 1
 }) => {
-  const _ = ze(), { carouselCopy: C } = k(), f = Math.floor(a) > l || o - p + 1 === 0, h = a < 0 || t - 1 === o, m = _.palette.grey[500], c = i?.primary_300 ?? _.palette.primary.main;
+  const E = ze(), { carouselCopy: C } = k(), f = Math.floor(a) > r || o - _ + 1 === 0, h = a < 0 || t - 1 === o, m = E.palette.grey[500], c = i?.primary_300 ?? E.palette.primary.main;
   return /* @__PURE__ */ v(
     K,
     {
@@ -1407,7 +1410,7 @@ const $ = u.createContext(null), Et = ({
             )
           }
         ),
-        Array.from({ length: t }).map((E, g) => {
+        Array.from({ length: t }).map((u, g) => {
           const I = g === o;
           return /* @__PURE__ */ e(
             b,
@@ -1439,9 +1442,9 @@ const $ = u.createContext(null), Et = ({
             "aria-disabled": h,
             "aria-label": C.next_insight_cta_aria,
             disabled: h,
-            onClick: r,
+            onClick: l,
             children: /* @__PURE__ */ e(
-              Se,
+              Me,
               {
                 style: {
                   color: h ? m : c
@@ -1453,17 +1456,17 @@ const $ = u.createContext(null), Et = ({
       ]
     }
   );
-}, Mt = ({
+}, St = ({
   analyticsMetadata: i,
   allowSingleCardPeeking: o = !1,
   beats: t = [],
-  clientColorScheme: r,
+  clientColorScheme: l,
   showCTAColocatedWithText: n,
-  heightOverrides: l,
+  heightOverrides: r,
   onCardClick: a,
   posthog: d,
-  shouldApplyNewAnimation: p = !1,
-  showCarouselControls: _,
+  shouldApplyNewAnimation: _ = !1,
+  showCarouselControls: E,
   showIcon: C,
   showWithMargin: f = !0,
   variant: h,
@@ -1471,20 +1474,20 @@ const $ = u.createContext(null), Et = ({
   visibleCardsCount: c = 1
   // Default to 1 card visible
 }) => {
-  console.log("MicroBeatCarousel", { heightOverrides: l });
-  const E = u.useRef(null), g = u.useRef(null), [I, D] = u.useState(0), [O, y] = u.useState(null), [F, z] = u.useState(null), [R, x] = u.useState(null), [U, B] = u.useState(p), { carouselCopy: j } = k(), { onEvent: Z } = Y();
-  u.useEffect(() => {
-    if (E.current && !o) {
-      const s = E.current.offsetWidth, A = 8;
+  console.log("MicroBeatCarousel", { heightOverrides: r });
+  const u = p.useRef(null), g = p.useRef(null), [I, x] = p.useState(0), [O, y] = p.useState(null), [F, z] = p.useState(null), [R, D] = p.useState(null), [U, B] = p.useState(_), { carouselCopy: j } = k(), { onEvent: Z } = Y();
+  p.useEffect(() => {
+    if (u.current && !o) {
+      const s = u.current.offsetWidth, A = 8;
       let N;
       if (c > 1) {
         const J = (s - (c - 1) * A) / c / 3;
         N = (s - J - (c - 1) * A) / c;
       } else
         N = s;
-      x(N);
+      D(N);
     }
-  }, [c, E.current?.offsetWidth]), u.useEffect(() => {
+  }, [c, u.current?.offsetWidth]), p.useEffect(() => {
     const s = g.current?.offsetWidth;
     if (typeof s == "number" && o) {
       const A = (P) => {
@@ -1498,10 +1501,10 @@ const $ = u.createContext(null), Et = ({
         ].find((ce) => P <= ce.maxWidth);
         return ee ? ee.cardWidth : 750;
       };
-      x(A(s));
+      D(A(s));
       const N = () => {
         const P = g.current?.offsetWidth;
-        typeof P == "number" && x(A(P));
+        typeof P == "number" && D(A(P));
       };
       return window.addEventListener("resize", N), () => {
         window.removeEventListener("resize", N);
@@ -1509,45 +1512,46 @@ const $ = u.createContext(null), Et = ({
     }
   }, [o, g]);
   const X = () => {
-    Z(M.ON_CAROUSEL_FORWARD_CLICK, i), E.current && R && E.current.scrollTo({
+    Z(S.ON_CAROUSEL_FORWARD_CLICK, i), u.current && R && u.current.scrollTo({
       left: I + R + 8,
       top: 0,
       behavior: "smooth"
     });
-  }, le = () => {
-    Z(M.ON_CAROUSEL_BACK_CLICK, i), E.current && R && E.current.scrollTo({
+  }, re = () => {
+    Z(S.ON_CAROUSEL_BACK_CLICK, i), u.current && R && u.current.scrollTo({
       left: Math.max(0, I - (R + 8)),
       top: 0,
       behavior: "smooth"
     });
   }, ne = () => {
-    E.current && D(E.current.scrollLeft);
+    u.current && x(u.current.scrollLeft);
   }, Q = () => {
     if (!F || !O) return;
-    F - O > yt ? Z(M.ON_CAROUSEL_FORWARD_SWIPE, i) : Z(M.ON_CAROUSEL_BACK_SWIPE, i);
+    F - O > yt ? Z(S.ON_CAROUSEL_FORWARD_SWIPE, i) : Z(S.ON_CAROUSEL_BACK_SWIPE, i);
   }, q = (s) => {
     y(s.targetTouches[0].clientX);
   }, L = (s) => {
     y(null), z(s.targetTouches[0].clientX);
   }, ue = {
-    clientColorScheme: r,
+    clientColorScheme: l,
     showCTAColocatedWithText: n,
-    heightOverrides: l,
+    heightOverrides: r,
     posthog: d,
     showIcon: C,
     variant: h
-  }, ae = R ? Math.round(I / (R + 8)) : 0, Fe = E.current ? E.current.scrollWidth - E.current.offsetWidth : 0;
+  }, ae = R ? Math.round(I / (R + 8)) : 0, Fe = u.current ? u.current.scrollWidth - u.current.offsetWidth : 0;
   return /* @__PURE__ */ v(
     K,
     {
       "aria-label": j.carousel_title,
       "aria-roledescription": "carousel",
+      id: "MicroBeatCarousel",
       ref: g,
       role: "group/region",
       sx: {
         alignItems: "center",
         boxSizing: "border-box",
-        height: l,
+        height: r,
         width: m || "100%"
       },
       children: [
@@ -1559,10 +1563,13 @@ const $ = u.createContext(null), Et = ({
             onTouchEnd: Q,
             onTouchMove: q,
             onTouchStart: L,
-            ref: E,
+            ref: u,
             sx: {
               alignItems: "center",
-              height: l && "100%",
+              height: (
+                // eslint-disable-next-line no-nested-ternary
+                r && E ? "calc(100% - 48px)" : r ? "100%" : void 0
+              ),
               gap: 8,
               listStyleType: "none",
               m: 0,
@@ -1610,14 +1617,14 @@ const $ = u.createContext(null), Et = ({
             ]
           }
         ),
-        _ && /* @__PURE__ */ e(
-          St,
+        E && /* @__PURE__ */ e(
+          Mt,
           {
-            clientColorScheme: r,
+            clientColorScheme: l,
             currentBeatIndex: ae + c - 1,
             numBeats: t.length + 1,
             onNextClick: X,
-            onPreviousClick: le,
+            onPreviousClick: re,
             scrollRightBoundary: Fe,
             scrollX: I,
             shouldApplyNewAnimation: U,
@@ -1627,17 +1634,17 @@ const $ = u.createContext(null), Et = ({
       ]
     }
   );
-}, At = G(Mt), Ot = ({
+}, At = G(St), Ot = ({
   analyticsMetadata: i,
   clientColorScheme: o,
   onCardClick: t,
-  posthog: r,
+  posthog: l,
   widthOverrides: n
 }) => {
-  const { carouselCopy: l } = k(), { onEvent: a } = Y(), d = () => {
-    a && (a(M.ON_VIEW_MORE_CLICKED, i), t(), r?.capture("clicked_view_more"));
+  const { carouselCopy: r } = k(), { onEvent: a } = Y(), d = () => {
+    a && (a(S.ON_VIEW_MORE_CLICKED, i), t(), l?.capture("clicked_view_more"));
   };
-  return l ? /* @__PURE__ */ v(
+  return r ? /* @__PURE__ */ v(
     K,
     {
       alignItems: "center",
@@ -1659,20 +1666,20 @@ const $ = u.createContext(null), Et = ({
               lineHeight: "24px"
             },
             variant: "h3",
-            children: l.carousel_title
+            children: r.carousel_title
           }
         ),
         /* @__PURE__ */ e(
           Pe,
           {
-            endIcon: /* @__PURE__ */ e(Se, { size: 20 }),
+            endIcon: /* @__PURE__ */ e(Me, { size: 20 }),
             onClick: d,
             size: "small",
             sx: {
               color: o?.primary_300
             },
             variant: "text",
-            children: l.view_all_insights_in_full_feed_cta_aria
+            children: r.view_all_insights_in_full_feed_cta_aria
           }
         )
       ]
@@ -1684,11 +1691,12 @@ const $ = u.createContext(null), Et = ({
   children: t
 }) => {
   console.log("MicroWidgetContainer", { heightOverrides: i });
-  const { carouselCopy: r } = k();
+  const { carouselCopy: l } = k();
   return /* @__PURE__ */ e(
     b,
     {
-      "aria-label": r?.carousel_title,
+      id: "MicroWidgetContainer",
+      "aria-label": l?.carousel_title,
       "aria-roledescription": "carousel",
       role: "group",
       sx: {
@@ -1704,35 +1712,35 @@ const $ = u.createContext(null), Et = ({
   ariaLabel: i,
   carouselSize: o,
   clientColorScheme: t,
-  heightOverrides: r,
+  heightOverrides: l,
   onCardClick: n,
-  posthog: l,
+  posthog: r,
   showIcon: a,
   showWithMargin: d,
-  variant: p,
-  widthOverrides: _
+  variant: _,
+  widthOverrides: E
 }) => {
   const { cardsCopy: C } = k(), { onEvent: f } = Y(), { onPageview: h } = Le();
-  u.useEffect(() => {
+  p.useEffect(() => {
     h(H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
   }, []);
   const m = () => {
-    n && n(), f(M.ON_NO_RELEVANT_INSIGHTS_CLICKED), l?.capture("clicked_insight", {
+    n && n(), f(S.ON_NO_RELEVANT_INSIGHTS_CLICKED), r?.capture("clicked_insight", {
       template: "no_relevant_insights"
     });
   };
   return /* @__PURE__ */ e(
-    re,
+    le,
     {
       actionText: C.micro_card_cta,
       ariaLabel: i,
       description: C.no_relevant_insights_card_description,
       fontColors: { buttonColor: t?.primary_300 },
-      heightOverrides: r,
-      icon: /* @__PURE__ */ e(xe, {}),
+      heightOverrides: l,
+      icon: /* @__PURE__ */ e(De, {}),
       isZeroState: !0,
       onCardClick: m,
-      posthog: l,
+      posthog: r,
       showIcon: a,
       style: {
         cardStyle: {
@@ -1750,35 +1758,35 @@ const $ = u.createContext(null), Et = ({
         }
       },
       title: C.no_relevant_insights_card_title,
-      variant: p,
-      widthOverrides: _
+      variant: _,
+      widthOverrides: E
     }
   );
-}, li = G(He), ke = ({
+}, ri = G(He), ke = ({
   ariaLabel: i,
   carouselSize: o,
   heightOverrides: t,
-  onCardClick: r,
+  onCardClick: l,
   posthog: n,
-  showIcon: l,
+  showIcon: r,
   showWithMargin: a,
   variant: d,
-  widthOverrides: p
+  widthOverrides: _
 }) => {
-  const { onPageview: _ } = Le(), { zeroStateCopy: C } = k();
-  return u.useEffect(() => {
-    _(H.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
+  const { onPageview: E } = Le(), { zeroStateCopy: C } = k();
+  return p.useEffect(() => {
+    E(H.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
   }, []), /* @__PURE__ */ e(
-    re,
+    le,
     {
       ariaLabel: i,
       description: C.carousel_zero_state_description,
       heightOverrides: t,
-      icon: /* @__PURE__ */ e(xe, {}),
+      icon: /* @__PURE__ */ e(De, {}),
       isZeroState: !0,
-      onCardClick: r,
+      onCardClick: l,
       posthog: n,
-      showIcon: l,
+      showIcon: r,
       style: {
         cardStyle: {
           card: {
@@ -1793,7 +1801,7 @@ const $ = u.createContext(null), Et = ({
       },
       title: C.carousel_zero_state_title,
       variant: d,
-      widthOverrides: p
+      widthOverrides: _
     }
   );
 }, ni = G(ke), wt = () => /* @__PURE__ */ e(
@@ -1808,20 +1816,20 @@ const $ = u.createContext(null), Et = ({
     },
     children: /* @__PURE__ */ e(qe, {})
   }
-), V = new ht(), Dt = ({
+), V = new Et(), xt = ({
   allowSingleCardPeeking: i,
   areBeatsLoading: o,
   beats: t = [],
   // This also determines the length of the carousel controls (beat.length + 1)
-  clientColorScheme: r,
+  clientColorScheme: l,
   // Allows certain icons, view all and read more button to reflect the clients color scheme. Currently only supports primary_300
   showCTAColocatedWithText: n = !0,
-  endpoint: l = "/",
+  endpoint: r = "/",
   heightOverrides: a,
   logOutUser: d,
-  onCardClick: p = () => {
+  onCardClick: _ = () => {
   },
-  onEvent: _ = () => {
+  onEvent: E = () => {
   },
   onPageview: C = () => {
   },
@@ -1829,10 +1837,10 @@ const $ = u.createContext(null), Et = ({
   shouldApplyNewAnimation: h = !1,
   showBorder: m = !0,
   showCarouselControls: c,
-  showHeader: E,
+  showHeader: u,
   showIcon: g,
   showWithMargin: I = !0,
-  token: D = "",
+  token: x = "",
   useDarkMode: O,
   userHasFullInsightFeedBeats: y,
   variant: F,
@@ -1840,37 +1848,37 @@ const $ = u.createContext(null), Et = ({
   widthOverrides: R
 }) => {
   console.log("InsightsMicroWidget", { heightOverrides: a });
-  const [x, U] = te("STANDARD"), [B, j] = te(!1), [Z, X] = te(!1), le = et([_], V), ne = tt([C], V);
-  u.useEffect(() => {
-    !V.isInitialized && !Z && (V.initialize(l, D, d).catch(() => X(!1)), X(!0));
-  }, [l, D, d, V.isInitialized, Z]), u.useEffect(() => {
+  const [D, U] = te("STANDARD"), [B, j] = te(!1), [Z, X] = te(!1), re = et([E], V), ne = tt([C], V);
+  p.useEffect(() => {
+    !V.isInitialized && !Z && (V.initialize(r, x, d).catch(() => X(!1)), X(!0));
+  }, [r, x, d, V.isInitialized, Z]), p.useEffect(() => {
     const L = window.innerHeight;
     L < 180 ? U("STANDARD") : L >= 180 && L < 200 ? U("LARGE") : L >= 200 && L < 248 ? U("XLARGE") : L >= 248 && U("XXLARGE");
-  }, [window.innerHeight]), u.useEffect(() => {
+  }, [window.innerHeight]), p.useEffect(() => {
     j(!o && V.isInitialized);
   }, [o, V.isInitialized]);
   const Q = {
     showCTAColocatedWithText: n,
     heightOverrides: a,
-    onCardClick: p,
+    onCardClick: _,
     posthog: f,
     showIcon: g,
     showWithMargin: I,
     useDarkMode: O,
     widthOverrides: R
   }, q = {
-    carouselSize: x,
+    carouselSize: D,
     variant: F,
     ...Q
   };
-  return /* @__PURE__ */ e(Et, { onEvent: le, onPageview: ne, store: V, children: /* @__PURE__ */ v(Wt, { heightOverrides: a, widthOverrides: R, children: [
+  return /* @__PURE__ */ e(ht, { onEvent: re, onPageview: ne, store: V, children: /* @__PURE__ */ v(Wt, { heightOverrides: a, widthOverrides: R, children: [
     !B && /* @__PURE__ */ e(wt, {}),
-    B && E && /* @__PURE__ */ e(
+    B && u && /* @__PURE__ */ e(
       Tt,
       {
         analyticsMetadata: fe,
-        clientColorScheme: r,
-        onCardClick: p,
+        clientColorScheme: l,
+        onCardClick: _,
         posthog: f,
         widthOverrides: R
       }
@@ -1881,7 +1889,7 @@ const $ = u.createContext(null), Et = ({
         allowSingleCardPeeking: i,
         analyticsMetadata: fe,
         beats: t,
-        clientColorScheme: r,
+        clientColorScheme: l,
         shouldApplyNewAnimation: h,
         showCarouselControls: c,
         variant: m ? F : void 0,
@@ -1889,66 +1897,66 @@ const $ = u.createContext(null), Et = ({
         ...Q
       }
     ),
-    B && !t.length && y && /* @__PURE__ */ e(He, { clientColorScheme: r, ...q }),
+    B && !t.length && y && /* @__PURE__ */ e(He, { clientColorScheme: l, ...q }),
     B && !t.length && !y && /* @__PURE__ */ e(ke, { ...q })
   ] }) });
-}, ai = G(Dt), xt = ({
+}, ai = G(xt), Dt = ({
   isActiveCard: i,
   ariaLabel: o,
   clientColorScheme: t,
-  heightOverrides: r,
+  heightOverrides: l,
   onCardClick: n,
-  posthog: l,
+  posthog: r,
   showIcon: a,
   variant: d,
-  widthOverrides: p
+  widthOverrides: _
 }) => {
-  const _ = se(), { ref: C, inView: f } = Me({
+  const E = se(), { ref: C, inView: f } = Se({
     threshold: Ve
   }), { cardsCopy: h } = k(), { onEvent: m } = Y();
   oe(() => {
-    f && (m(De.ON_VIEW_MORE_VIEWED), l?.capture("viewed_insight", {
+    f && (m(xe.ON_VIEW_MORE_VIEWED), r?.capture("viewed_insight", {
       template: "view_more_card"
     }));
   }, [f]);
   const c = () => {
-    n && n(), m(M.ON_VIEW_MORE_CLICKED), l?.capture("clicked_insight", {
+    n && n(), m(S.ON_VIEW_MORE_CLICKED), r?.capture("clicked_insight", {
       template: "view_more_card"
     });
   };
   return /* @__PURE__ */ e(
-    re,
+    le,
     {
       actionText: h.micro_card_cta,
       ariaLabel: o,
       description: h.view_more_card_description,
       fontColors: { buttonColor: t?.primary_300 },
-      heightOverrides: r,
-      icon: /* @__PURE__ */ e(ft, { color: t?.primary_300 ?? _.palette.primary.main }),
+      heightOverrides: l,
+      icon: /* @__PURE__ */ e(ft, { color: t?.primary_300 ?? E.palette.primary.main }),
       isActiveCard: i,
       onCardClick: c,
-      posthog: l,
+      posthog: r,
       ref: C,
       showIcon: a,
       title: h.view_more_card_title,
       variant: d,
-      widthOverrides: p
+      widthOverrides: _
     }
   );
-}, Lt = G(xt);
+}, Lt = G(Dt);
 export {
-  ht as A,
+  Et as A,
   vt as B,
   Tt as C,
-  Et as I,
+  ht as I,
   At as M,
-  li as N,
+  ri as N,
   fe as T,
   Lt as V,
   ni as Z,
-  re as a,
+  le as a,
   ai as b,
   ft as c,
   Rt as d,
-  xe as e
+  De as e
 };

package/dist/microinsights/index.es.js

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

package/dist/trends/index.es.js

@@ -19,7 +19,7 @@ import { DataGridPro as mt } from "@mui/x-data-grid-pro";
 import { C as pt } from "../CurrencyText-kyC1aseI.mjs";
 import { b as Ct } from "../Localization-2MODESHW.mjs";
 import { H as Ie } from "../HeaderCell-DjuifqHJ.mjs";
-import { T as M, b as ft } from "../ViewMoreMicroCard-BxRNJMMm.mjs";
+import { T as M, b as ft } from "../ViewMoreMicroCard-vWvKWBNw.mjs";
 import { A as _, W as ke } from "../WidgetContainer-C88Ecu2W.mjs";
 import { c as Tt } from "../Category-CevNQ03n.mjs";
 import { a as Ne, T as He } from "../TransactionDetails-BWffqew4.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "7.2.5-alpha.mm0",
+  "version": "7.2.5-alpha.mm2",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",