@mx-cartographer/experiences 7.7.0 → 7.7.1-alpha.san1

package/dist/{ViewMoreMicroCard-CL1_NwLt.mjs → ViewMoreMicroCard-DSLtQ92j.mjs}

@@ -3,14 +3,13 @@ import h, { useEffect as ie, useState as oe } from "react";
 import { observer as U } from "mobx-react-lite";
 import N from "@mui/material/Stack";
 import ne from "@mui/material/Button";
-import be from "@mui/material/Typography";
-import { Icon as Pe, Close as Be, ChevronLeft as Ve, ChevronRight as fe } from "@mxenabled/mx-icons";
-import { L as Ge } from "./Loader-DUaFpDGv.mjs";
+import { CategoryIcon as be, MerchantLogo as Pe, P as _e, Text as ue, H3 as Be } from "@mxenabled/mxui";
+import { Icon as Ve, Close as Ge, ChevronLeft as ke, ChevronRight as Te } from "@mxenabled/mx-icons";
+import { L as ze } from "./Loader-DUaFpDGv.mjs";
 import Q from "@mui/material/Box";
 import re from "@mui/material/IconButton";
-import { alpha as T, useTheme as H } from "@mui/material/styles";
-import { useInView as Te } from "react-intersection-observer";
-import { CategoryIcon as ke, MerchantLogo as ze, P as _e, Text as ue } from "@mxenabled/mxui";
+import { alpha as f, useTheme as H } from "@mui/material/styles";
+import { useInView as fe } from "react-intersection-observer";
 import { b as Ue } from "./Category-CevNQ03n.mjs";
 import Ke from "@mui/material/styles/useTheme";
 import { b as Fe } from "./Localization-2MODESHW.mjs";
@@ -72,27 +71,27 @@ const se = {
   WeeklyNewMerchantsV2: "WeeklyNewMerchantsV2",
   MonthlySpendComparison: "MonthlySpendComparison",
   MonthlySpendToIncomeComparison: "MonthlySpendToIncomeComparison"
-}, y = window?.app?.clientConfig?.microwidget_instance_id || "", Ce = {
+}, O = window?.app?.clientConfig?.microwidget_instance_id || "", Ce = {
   INSIGHTS_MICRO_WIDGET: "/micro-insights-carousel"
-}, ye = (t) => `on${t}Click`, Oe = (t) => `on${t}View`, We = (t) => `on${t}ViewFirstTime`, ce = (t) => t.replace(/([a-z])([A-Z])/g, "$1 $2"), et = () => Object.values(se).reduce(
+}, Oe = (t) => `on${t}Click`, ye = (t) => `on${t}View`, We = (t) => `on${t}ViewFirstTime`, ce = (t) => t.replace(/([a-z])([A-Z])/g, "$1 $2"), et = () => Object.values(se).reduce(
   (t, e) => ({
     ...t,
-    [ye(e)]: {
+    [Oe(e)]: {
       action: B.MICRO_BEAT_CLICKED,
       category: P.BEAT_INTERACTION,
       label: ce(e),
-      value: y
+      value: O
     }
   }),
   {}
 ), tt = () => Object.values(se).reduce(
   (t, e) => ({
     ...t,
-    [Oe(e)]: {
+    [ye(e)]: {
       action: B.MICRO_BEAT_DISPLAYED,
       category: P.BEAT_INTERACTION,
       label: ce(e),
-      value: y
+      value: O
     }
   }),
   {}
@@ -103,7 +102,7 @@ const se = {
       action: B.MICRO_BEAT_DISPLAYED_FIRST_TIME,
       category: P.BEAT_INTERACTION,
       label: ce(e),
-      value: y
+      value: O
     }
   }),
   {}
@@ -115,7 +114,7 @@ const se = {
 }, P = {
   MICRO_WIDGET_INTERACTION: "Micro Widget Interaction",
   BEAT_INTERACTION: "Beat Interaction"
-}, O = {
+}, y = {
   ON_CAROUSEL_BACK_CLICK: "onCarouselBackClick",
   ON_CAROUSEL_BACK_SWIPE: "onCarouselBackSwipe",
   ON_CAROUSEL_FORWARD_CLICK: "onCarouselForwardClick",
@@ -136,72 +135,72 @@ const se = {
   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"
-}, ge = {
+}, Ee = {
   [k.MICRO_WIDGET_CAROUSEL]: {
     label: b.MICRO_WIDGET,
     name: k.MICRO_WIDGET_CAROUSEL,
     path: Ce.INSIGHTS_MICRO_WIDGET,
-    value: y
+    value: O
   },
   // zero state
   [k.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
     label: b.MICRO_WIDGET,
     name: k.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
     path: Ce.INSIGHTS_MICRO_WIDGET,
-    value: y
+    value: O
   },
   // no relevant cards
   [k.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
     label: b.MICRO_WIDGET,
     name: k.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
     path: "/micro-widget",
-    value: y
+    value: O
   }
-}, Ee = {
+}, ge = {
   // carousel control interaction events - clicks and swipes
-  [O.ON_CAROUSEL_BACK_CLICK]: {
+  [y.ON_CAROUSEL_BACK_CLICK]: {
     action: B.CONTROL_BACKWARD,
     category: P.MICRO_WIDGET_INTERACTION,
     label: b.CAROUSEL_CONTROL,
-    value: y
+    value: O
   },
-  [O.ON_CAROUSEL_FORWARD_CLICK]: {
+  [y.ON_CAROUSEL_FORWARD_CLICK]: {
     action: B.CONTROL_FORWARD,
     category: P.MICRO_WIDGET_INTERACTION,
     label: b.CAROUSEL_CONTROL,
-    value: y
+    value: O
   },
-  [O.ON_CAROUSEL_BACK_SWIPE]: {
+  [y.ON_CAROUSEL_BACK_SWIPE]: {
     action: B.SWIPE_BACKWARD,
     category: P.MICRO_WIDGET_INTERACTION,
     label: b.CAROUSEL_CONTROL,
-    value: y
+    value: O
   },
-  [O.ON_CAROUSEL_FORWARD_SWIPE]: {
+  [y.ON_CAROUSEL_FORWARD_SWIPE]: {
     action: B.SWIPE_FORWARD,
     category: P.MICRO_WIDGET_INTERACTION,
     label: b.CAROUSEL_CONTROL,
-    value: y
+    value: O
   },
   // read more card events
-  [O.ON_VIEW_MORE_CLICKED]: {
+  [y.ON_VIEW_MORE_CLICKED]: {
     action: B.MICRO_BEAT_CLICKED,
     category: P.BEAT_INTERACTION,
     label: b.VIEW_MORE,
-    value: y
+    value: O
   },
   [Ne.ON_VIEW_MORE_VIEWED]: {
     action: B.MICRO_BEAT_DISPLAYED,
     category: P.BEAT_INTERACTION,
     label: b.VIEW_MORE,
-    value: y
+    value: O
   },
   ...et(),
   ...tt(),
   ...ot()
-}, Ie = async (t, e) => !e || !Ee[t] ? null : e.sendAnalyticEvent(Ee[t]).then((o) => o).catch((o) => {
+}, Ie = async (t, e) => !e || !ge[t] ? null : e.sendAnalyticEvent(ge[t]).then((o) => o).catch((o) => {
   throw o;
-}), Ae = async (t, e) => !e || !ge[t] ? null : e.sendAnalyticsPageview(ge[t]).then((o) => o).catch((o) => {
+}), Ae = async (t, e) => !e || !Ee[t] ? null : e.sendAnalyticsPageview(Ee[t]).then((o) => o).catch((o) => {
   throw o;
 });
 class it {
@@ -254,12 +253,8 @@ const $ = h.createContext(null), rt = ({
   children: n
 }) => /* @__PURE__ */ i($.Provider, { value: { onEvent: t, onPageview: e, store: o, children: n }, children: n }), at = ({ beat: t }) => {
   const { primary_category_guid: e, category_guids: o } = t, n = e || o?.[0] || Ue.UNCATEGORIZED;
-  return /* @__PURE__ */ i(ke, { categoryGuid: n, size: 32, sx: { minWidth: 32 } });
-}, R = ({
-  bgColor: t,
-  name: e,
-  iconColor: o = "primary"
-}) => /* @__PURE__ */ i(
+  return /* @__PURE__ */ i(be, { categoryGuid: n, size: 32, sx: { minWidth: 32 } });
+}, R = ({ bgColor: t, name: e, iconColor: o = "primary" }) => /* @__PURE__ */ i(
   qe,
   {
     sx: {
@@ -268,12 +263,12 @@ const $ = h.createContext(null), rt = ({
       height: 32
     },
     variant: "rounded",
-    children: /* @__PURE__ */ i(Pe, { color: o, fill: !0, name: e, size: 20 })
+    children: /* @__PURE__ */ i(Ve, { color: o, fill: !0, name: e, size: 20 })
   }
 ), st = ({ beat: t }) => {
   const { category_guids: e, merchant_guids: o, primary_category_guid: n, primary_merchant_guid: r } = t;
   return /* @__PURE__ */ i(
-    ze,
+    Pe,
     {
       categoryGuid: n || e && e[0] || "",
       merchantGuid: r || o[0],
@@ -295,36 +290,36 @@ const $ = h.createContext(null), rt = ({
   return !n.length || !r.length ? "primary" : n[0].amount > r[0].amount ? "error" : n[0].amount < r[0].amount ? "success" : "primary";
 }, dt = ({ beat: t }) => {
   const e = Ke(), o = lt(t.data_series), n = e.palette[o].main;
-  return /* @__PURE__ */ i(R, { bgColor: T(n, 0.15), iconColor: o, name: "bar_chart" });
+  return /* @__PURE__ */ i(R, { bgColor: f(n, 0.15), iconColor: o, name: "bar_chart" });
 }, _t = {
-  0: (t, e) => /* @__PURE__ */ i(R, { bgColor: T(e.palette.primary.main, 0.15), name: "error" }),
+  0: (t, e) => /* @__PURE__ */ i(R, { bgColor: f(e.palette.primary.main, 0.15), name: "error" }),
   1: (t) => /* @__PURE__ */ i(at, { beat: t }),
   2: (t) => /* @__PURE__ */ i(st, { beat: t }),
   3: (t) => /* @__PURE__ */ i(dt, { beat: t }),
   4: (t, e) => /* @__PURE__ */ i(
     R,
     {
-      bgColor: T(e.palette.secondary.main, 0.15),
+      bgColor: f(e.palette.secondary.main, 0.15),
       iconColor: "secondary",
       name: "info"
     }
   ),
-  5: (t, e) => /* @__PURE__ */ i(R, { bgColor: T(e.palette.primary.main, 0.15), name: "campaign" }),
+  5: (t, e) => /* @__PURE__ */ i(R, { bgColor: f(e.palette.primary.main, 0.15), name: "campaign" }),
   // TODO: Waiting for the backend to accommodate icon types 6, 7, 8, and 9
   6: (t, e) => /* @__PURE__ */ i(
     R,
     {
-      bgColor: T(e.palette.success.main, 0.15),
+      bgColor: f(e.palette.success.main, 0.15),
       iconColor: "success",
       name: "check_circle"
     }
   ),
-  7: (t, e) => /* @__PURE__ */ i(R, { bgColor: T(e.palette.primary.main, 0.15), name: "today" }),
-  8: (t, e) => /* @__PURE__ */ i(R, { bgColor: T(e.palette.primary.main, 0.15), name: "calendar_clock" }),
-  9: (t, e) => /* @__PURE__ */ i(R, { bgColor: T(e.palette.primary.main, 0.15), name: "celebration" })
+  7: (t, e) => /* @__PURE__ */ i(R, { bgColor: f(e.palette.primary.main, 0.15), name: "today" }),
+  8: (t, e) => /* @__PURE__ */ i(R, { bgColor: f(e.palette.primary.main, 0.15), name: "calendar_clock" }),
+  9: (t, e) => /* @__PURE__ */ i(R, { bgColor: f(e.palette.primary.main, 0.15), name: "celebration" })
 }, ut = ({ beat: t }) => {
   const e = H(), { icon_type: o } = t, n = o != null ? _t[o] : null;
-  return n ? n(t, e) : /* @__PURE__ */ i(R, { bgColor: T(e.palette.primary.main, 0.15), name: "error" });
+  return n ? n(t, e) : /* @__PURE__ */ i(R, { bgColor: f(e.palette.primary.main, 0.15), name: "error" });
 }, D = () => {
   const t = h.useContext($);
   if (!t)
@@ -360,34 +355,34 @@ const $ = h.createContext(null), rt = ({
     icon: r,
     isActiveCard: s,
     hasCardEffect: a = !1,
-    heightOverrides: _,
+    heightOverrides: p,
     onClose: C,
     onCardClick: m,
-    onPrimaryAction: p,
+    onPrimaryAction: u,
     onSecondaryAction: c,
     primaryActionText: d,
     secondaryActionText: l,
     title: I,
-    variant: g,
-    widthOverrides: E,
+    variant: E,
+    widthOverrides: g,
     ...A
   }, v) {
-    const { cardsCopy: V } = D(), S = !!(p && d), f = !!(c && l), M = a ? Ze : Q, w = /* @__PURE__ */ L(Se, { children: [
+    const { cardsCopy: V } = D(), S = !!(u && d), T = !!(c && l), M = a ? Ze : Q, w = /* @__PURE__ */ L(Se, { children: [
       C && /* @__PURE__ */ i(
         re,
         {
           "aria-label": V.close,
-          onClick: (u) => {
-            u.stopPropagation(), C?.();
+          onClick: (_) => {
+            _.stopPropagation(), C?.();
           },
-          onMouseDown: (u) => {
-            u.stopPropagation();
+          onMouseDown: (_) => {
+            _.stopPropagation();
           },
-          onTouchStart: (u) => {
-            u.stopPropagation();
+          onTouchStart: (_) => {
+            _.stopPropagation();
           },
           sx: { minHeight: 40, minWidth: 40, position: "absolute", right: 4, top: 4 },
-          children: /* @__PURE__ */ i(Be, {})
+          children: /* @__PURE__ */ i(Ge, {})
         }
       ),
       /* @__PURE__ */ L(N, { sx: { gap: 6, height: "100%", justifyContent: "space-between" }, children: [
@@ -425,14 +420,14 @@ const $ = h.createContext(null), rt = ({
               S && /* @__PURE__ */ i(
                 ne,
                 {
-                  onClick: (u) => {
-                    u.stopPropagation(), p?.();
+                  onClick: (_) => {
+                    _.stopPropagation(), u?.();
                   },
-                  onMouseDown: (u) => {
-                    u.stopPropagation();
+                  onMouseDown: (_) => {
+                    _.stopPropagation();
                   },
-                  onTouchStart: (u) => {
-                    u.stopPropagation();
+                  onTouchStart: (_) => {
+                    _.stopPropagation();
                   },
                   size: "small",
                   sx: { px: r ? 8 : 0 },
@@ -440,17 +435,17 @@ const $ = h.createContext(null), rt = ({
                   children: /* @__PURE__ */ i(ue, { bold: !0, variant: "body2", children: d })
                 }
               ),
-              f && /* @__PURE__ */ i(
+              T && /* @__PURE__ */ i(
                 ne,
                 {
-                  onClick: (u) => {
-                    u.stopPropagation(), c?.();
+                  onClick: (_) => {
+                    _.stopPropagation(), c?.();
                   },
-                  onMouseDown: (u) => {
-                    u.stopPropagation();
+                  onMouseDown: (_) => {
+                    _.stopPropagation();
                   },
-                  onTouchStart: (u) => {
-                    u.stopPropagation();
+                  onTouchStart: (_) => {
+                    _.stopPropagation();
                   },
                   size: "small",
                   sx: { px: 8 },
@@ -472,13 +467,13 @@ const $ = h.createContext(null), rt = ({
         role: "group",
         sx: {
           backgroundColor: "background.paper",
-          height: _ ? "100%" : 124,
-          minWidth: E ? `${E}px` : "100%",
+          height: p ? "100%" : 124,
+          minWidth: g ? `${g}px` : "100%",
           position: "relative",
           ...o
         },
         tabIndex: m || !s ? -1 : 0,
-        variant: g,
+        variant: E,
         ...A,
         children: m ? /* @__PURE__ */ i(
           Qe,
@@ -488,7 +483,7 @@ const $ = h.createContext(null), rt = ({
               pb: 8,
               pt: 16,
               px: 16,
-              height: _ ? "100%" : 124
+              height: p ? "100%" : 124
             },
             children: w
           }
@@ -496,7 +491,7 @@ const $ = h.createContext(null), rt = ({
       }
     );
   }
-), q = Ct, gt = ({
+), q = Ct, Et = ({
   ariaLabel: t,
   beat: e,
   index: o,
@@ -504,15 +499,15 @@ const $ = h.createContext(null), rt = ({
   onCardClick: r,
   posthog: s,
   widthOverrides: a,
-  variant: _,
+  variant: p,
   showIcon: C,
   heightOverrides: m
 }) => {
-  const { ref: p, inView: c } = Te({
+  const { ref: u, inView: c } = fe({
     threshold: we
-  }), { cardsCopy: d } = D(), { onEvent: l } = j(), { updateBeat: I, updateOffer: g } = pt();
+  }), { cardsCopy: d } = D(), { onEvent: l } = j(), { updateBeat: I, updateOffer: E } = pt();
   ie(() => {
-    c && (e.has_been_displayed ? l(Oe(e.template)) : (e.guid.startsWith("OFR") ? g({
+    c && (e.has_been_displayed ? l(ye(e.template)) : (e.guid.startsWith("OFR") ? E({
       ...e,
       has_been_displayed: !0
     }) : I({
@@ -535,8 +530,8 @@ const $ = h.createContext(null), rt = ({
           position: o
         });
   }, [e, o, c]);
-  const E = () => {
-    if (r && r(e), l(ye(e.template)), e.template === "MarketingOffer") {
+  const g = () => {
+    if (r && r(e), l(Oe(e.template)), e.template === "MarketingOffer") {
       const A = e;
       s?.capture("clicked_messaging_insight", {
         template: e.template,
@@ -563,16 +558,16 @@ const $ = h.createContext(null), rt = ({
       heightOverrides: m,
       icon: C && /* @__PURE__ */ i(ut, { beat: e }),
       isActiveCard: n,
-      onCardClick: E,
-      onPrimaryAction: E,
+      onCardClick: g,
+      onPrimaryAction: g,
       primaryActionText: e.micro_call_to_action || d.micro_card_cta,
-      ref: p,
+      ref: u,
       title: e.micro_title && e.micro_title.length > 0 ? e.micro_title : e.title,
-      variant: _,
+      variant: p,
       widthOverrides: a
     }
   );
-}, Et = ({
+}, gt = ({
   currentBeatIndex: t,
   numBeats: e,
   onNextClick: o,
@@ -580,9 +575,9 @@ const $ = h.createContext(null), rt = ({
   scrollRightBoundary: r,
   scrollX: s,
   shouldApplyDotAnimation: a = !1,
-  visibleCardsCount: _ = 1
+  visibleCardsCount: p = 1
 }) => {
-  const C = H(), { carouselCopy: m } = D(), p = Math.floor(s) > r || t - _ + 1 === 0, c = s < 0 || e - 1 === t, d = C.palette.grey[500], l = C.palette.primary.main;
+  const C = H(), { carouselCopy: m } = D(), u = Math.floor(s) > r || t - p + 1 === 0, c = s < 0 || e - 1 === t, d = C.palette.grey[500], l = C.palette.primary.main;
   return /* @__PURE__ */ L(
     N,
     {
@@ -601,28 +596,28 @@ const $ = h.createContext(null), rt = ({
         /* @__PURE__ */ i(
           re,
           {
-            "aria-disabled": p,
+            "aria-disabled": u,
             "aria-label": m.previous_insight_cta_aria,
-            disabled: p,
+            disabled: u,
             onClick: n,
             children: /* @__PURE__ */ i(
-              Ve,
+              ke,
               {
                 style: {
-                  color: p ? d : l
+                  color: u ? d : l
                 }
               }
             )
           }
         ),
-        Array.from({ length: e }).map((I, g) => {
-          const E = g === t;
+        Array.from({ length: e }).map((I, E) => {
+          const g = E === t;
           return /* @__PURE__ */ i(
             Q,
             {
               className: "mx-insights-micro-carousel-dots",
               sx: {
-                bgcolor: E ? l : d,
+                bgcolor: g ? l : d,
                 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"
@@ -635,10 +630,10 @@ const $ = h.createContext(null), rt = ({
                   borderRadius: "50%",
                   p: 0
                 },
-                width: E && a ? 24 : 8
+                width: g && a ? 24 : 8
               }
             },
-            `carousel-button-${g}`
+            `carousel-button-${E}`
           );
         }),
         /* @__PURE__ */ i(
@@ -649,7 +644,7 @@ const $ = h.createContext(null), rt = ({
             disabled: c,
             onClick: o,
             children: /* @__PURE__ */ i(
-              fe,
+              Te,
               {
                 style: {
                   color: c ? d : l
@@ -669,33 +664,33 @@ const $ = h.createContext(null), rt = ({
   heightOverrides: r,
   onCardClick: s,
   posthog: a,
-  showIcon: _,
+  showIcon: p,
   variant: C
 }) => {
-  const { carouselCopy: m } = D(), p = {
+  const { carouselCopy: m } = D(), u = {
     showCTAColocatedWithText: n,
     heightOverrides: r,
     posthog: a,
-    showIcon: _,
+    showIcon: p,
     variant: C
   };
   return /* @__PURE__ */ L(Se, { children: [
     e.map((c, d) => {
-      const l = d + 1, I = e.length + 1, g = Fe(
+      const l = d + 1, I = e.length + 1, E = Fe(
         m.card_position_in_carousel_aria,
         l.toString(),
         I.toString()
-      ), E = c.micro_title && c.micro_title.length > 0, A = c.micro_description && c.micro_description.length > 0, v = E ? c.micro_title : c.title, V = A ? c.micro_description : c.description;
+      ), g = c.micro_title && c.micro_title.length > 0, A = c.micro_description && c.micro_description.length > 0, v = g ? c.micro_title : c.title, V = A ? c.micro_description : c.description;
       return /* @__PURE__ */ i(
-        gt,
+        Et,
         {
-          ariaLabel: `${g}: ${v}, ${V}`,
+          ariaLabel: `${E}: ${v}, ${V}`,
           beat: c,
           index: d,
           isActiveCard: d === t,
           onCardClick: s,
           widthOverrides: o || void 0,
-          ...p
+          ...u
         },
         `${c.guid} ${d}`
       );
@@ -706,7 +701,7 @@ const $ = h.createContext(null), rt = ({
         isActiveCard: t === e.length,
         onCardClick: s,
         widthOverrides: o || void 0,
-        ...p
+        ...u
       }
     )
   ] });
@@ -718,15 +713,15 @@ const $ = h.createContext(null), rt = ({
   heightOverrides: r,
   onCardClick: s,
   posthog: a,
-  showCarouselControls: _,
+  showCarouselControls: p,
   showIcon: C,
   showWithMargin: m = !0,
-  variant: p,
+  variant: u,
   widthOverrides: c,
   visibleCardsCount: d = 1
   // Default to 1 card visible
 }) => {
-  const l = h.useRef(null), I = h.useRef(null), [g, E] = h.useState(0), [A, v] = h.useState(null), [V, S] = h.useState(null), [f, M] = h.useState(null), { carouselCopy: w } = D(), { onEvent: u } = j();
+  const l = h.useRef(null), I = h.useRef(null), [E, g] = h.useState(0), [A, v] = h.useState(null), [V, S] = h.useState(null), [T, M] = h.useState(null), { carouselCopy: w } = D(), { onEvent: _ } = j();
   h.useEffect(() => {
     if (l.current && !e) {
       const W = l.current.offsetWidth, K = 8;
@@ -762,27 +757,27 @@ const $ = h.createContext(null), rt = ({
     }
   }, [e, I]);
   const Y = () => {
-    u(O.ON_CAROUSEL_FORWARD_CLICK, t), l.current && f && l.current.scrollTo({
-      left: g + f + 8,
+    _(y.ON_CAROUSEL_FORWARD_CLICK, t), l.current && T && l.current.scrollTo({
+      left: E + T + 8,
       top: 0,
       behavior: "smooth"
     });
   }, X = () => {
-    u(O.ON_CAROUSEL_BACK_CLICK, t), l.current && f && l.current.scrollTo({
-      left: Math.max(0, g - (f + 8)),
+    _(y.ON_CAROUSEL_BACK_CLICK, t), l.current && T && l.current.scrollTo({
+      left: Math.max(0, E - (T + 8)),
       top: 0,
       behavior: "smooth"
     });
   }, J = () => {
-    l.current && E(l.current.scrollLeft);
+    l.current && g(l.current.scrollLeft);
   }, ee = () => {
     if (!V || !A) return;
-    V - A > mt ? u(O.ON_CAROUSEL_FORWARD_SWIPE, t) : u(O.ON_CAROUSEL_BACK_SWIPE, t);
+    V - A > mt ? _(y.ON_CAROUSEL_FORWARD_SWIPE, t) : _(y.ON_CAROUSEL_BACK_SWIPE, t);
   }, te = (W) => {
     v(W.targetTouches[0].clientX);
   }, Z = (W) => {
     v(null), S(W.targetTouches[0].clientX);
-  }, x = f ? Math.round(g / (f + 8)) : 0, ve = l.current ? l.current.scrollWidth - l.current.offsetWidth : 0;
+  }, x = T ? Math.round(E / (T + 8)) : 0, ve = l.current ? l.current.scrollWidth - l.current.offsetWidth : 0;
   return /* @__PURE__ */ L(
     N,
     {
@@ -828,26 +823,26 @@ const $ = h.createContext(null), rt = ({
               {
                 activeCardIndex: x,
                 beats: o,
-                cardWidth: f,
+                cardWidth: T,
                 heightOverrides: r,
                 onCardClick: s,
                 posthog: a,
                 showCTAColocatedWithText: n,
                 showIcon: C,
-                variant: p
+                variant: u
               }
             )
           }
         ),
-        _ && /* @__PURE__ */ i(
-          Et,
+        p && /* @__PURE__ */ i(
+          gt,
           {
             currentBeatIndex: x + d - 1,
             numBeats: o.length + 1,
             onNextClick: Y,
             onPreviousClick: X,
             scrollRightBoundary: ve,
-            scrollX: g,
+            scrollX: E,
             shouldApplyDotAnimation: e,
             visibleCardsCount: d
           }
@@ -855,14 +850,14 @@ const $ = h.createContext(null), rt = ({
       ]
     }
   );
-}, St = U(At), ft = ({
+}, St = U(At), Tt = ({
   analyticsMetadata: t,
   onCardClick: e,
   posthog: o,
   widthOverrides: n
 }) => {
   const { carouselCopy: r } = D(), { onEvent: s } = j(), a = () => {
-    s && (s(O.ON_VIEW_MORE_CLICKED, t), e(), o?.capture("clicked_view_more"));
+    s && (s(y.ON_VIEW_MORE_CLICKED, t), e(), o?.capture("clicked_view_more"));
   };
   return r ? /* @__PURE__ */ L(
     N,
@@ -872,40 +867,26 @@ const $ = h.createContext(null), rt = ({
       justifyContent: "space-between",
       spacing: 2,
       sx: {
-        padding: 16,
+        p: 16,
+        pb: 8,
         width: n || void 0
       },
       children: [
-        /* @__PURE__ */ i(
-          be,
-          {
-            sx: (_) => ({
-              color: _.palette.primary.main,
-              fontSize: 18,
-              fontWeight: 700,
-              lineHeight: "24px"
-            }),
-            variant: "h3",
-            children: r.carousel_title
-          }
-        ),
+        /* @__PURE__ */ i(Be, { children: r.carousel_title }),
         /* @__PURE__ */ i(
           ne,
           {
-            endIcon: /* @__PURE__ */ i(fe, { size: 20 }),
+            endIcon: /* @__PURE__ */ i(Te, { size: 20 }),
             onClick: a,
             size: "small",
-            sx: (_) => ({
-              color: _.palette.primary.main
-            }),
             variant: "text",
             children: r.view_all_insights_in_full_feed_cta_aria
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ i(Ge, {});
-}, Tt = U(ft), Rt = ({
+  ) : /* @__PURE__ */ i(ze, {});
+}, ft = U(Tt), Rt = ({
   heightOverrides: t,
   widthOverrides: e,
   children: o
@@ -934,12 +915,12 @@ const $ = h.createContext(null), rt = ({
   showIcon: r,
   variant: s
 }) => {
-  const { cardsCopy: a } = D(), _ = H(), { onEvent: C } = j(), { onPageview: m } = Me();
+  const { cardsCopy: a } = D(), p = H(), { onEvent: C } = j(), { onPageview: m } = Me();
   h.useEffect(() => {
     m(k.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
   }, []);
-  const p = () => {
-    o && o(), C(O.ON_NO_RELEVANT_INSIGHTS_CLICKED), n?.capture("clicked_insight", {
+  const u = () => {
+    o && o(), C(y.ON_NO_RELEVANT_INSIGHTS_CLICKED), n?.capture("clicked_insight", {
       template: "no_relevant_insights"
     });
   };
@@ -953,22 +934,22 @@ const $ = h.createContext(null), rt = ({
       description: a.no_relevant_insights_card_description,
       hasCardEffect: !0,
       heightOverrides: e,
-      icon: r && /* @__PURE__ */ i(R, { bgColor: T(_.palette.primary.main, 0.15), name: "lightbulb" }),
-      onCardClick: p,
-      onPrimaryAction: p,
+      icon: r && /* @__PURE__ */ i(R, { bgColor: f(p.palette.primary.main, 0.15), name: "lightbulb" }),
+      onCardClick: u,
+      onPrimaryAction: u,
       primaryActionText: a.micro_card_cta,
       title: a.no_relevant_insights_card_title,
       variant: s
     }
   );
-}, Jt = U(Le), De = ({
+}, qt = U(Le), De = ({
   ariaLabel: t,
   heightOverrides: e,
   onCardClick: o,
   showIcon: n,
   variant: r
 }) => {
-  const { onPageview: s } = Me(), { zeroStateCopy: a } = D(), _ = H();
+  const { onPageview: s } = Me(), { zeroStateCopy: a } = D(), p = H();
   return h.useEffect(() => {
     s(k.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
   }, []), /* @__PURE__ */ i(
@@ -981,13 +962,13 @@ const $ = h.createContext(null), rt = ({
       description: a.carousel_zero_state_description,
       hasCardEffect: !0,
       heightOverrides: e,
-      icon: n && /* @__PURE__ */ i(R, { bgColor: T(_.palette.primary.main, 0.15), name: "lightbulb" }),
+      icon: n && /* @__PURE__ */ i(R, { bgColor: f(p.palette.primary.main, 0.15), name: "lightbulb" }),
       onCardClick: o,
       title: a.carousel_zero_state_title,
       variant: r
     }
   );
-}, eo = U(De), yt = () => /* @__PURE__ */ i(
+}, Jt = U(De), Ot = () => /* @__PURE__ */ i(
   Q,
   {
     sx: {
@@ -999,7 +980,7 @@ const $ = h.createContext(null), rt = ({
     },
     children: /* @__PURE__ */ i(He, {})
   }
-), G = new nt(), Ot = ({
+), G = new nt(), yt = ({
   allowSingleCardPeeking: t,
   areBeatsLoading: e,
   beats: o = [],
@@ -1008,61 +989,61 @@ const $ = h.createContext(null), rt = ({
   endpoint: r = "/",
   heightOverrides: s,
   logOutUser: a,
-  onCardClick: _ = () => {
+  onCardClick: p = () => {
   },
   onEvent: C = () => {
   },
   onPageview: m = () => {
   },
-  posthog: p,
+  posthog: u,
   showBorder: c = !0,
   showCarouselControls: d,
   showHeader: l,
   showIcon: I,
-  showWithMargin: g = !0,
-  token: E = "",
+  showWithMargin: E = !0,
+  token: g = "",
   userHasFullInsightFeedBeats: A,
   variant: v,
   visibleCardsCount: V = 1,
   widthOverrides: S
 }) => {
-  const [f, M] = oe("STANDARD"), [w, u] = oe(!1), [Y, X] = oe(!1), J = je([C], G), ee = Ye([m], G);
+  const [T, M] = oe("STANDARD"), [w, _] = oe(!1), [Y, X] = oe(!1), J = je([C], G), ee = Ye([m], G);
   Xe({
     widgetName: "InsightsMicroWidget",
     isLoaded: w
   }), h.useEffect(() => {
-    !G.isInitialized && !Y && (G.initialize(r, E, a).catch(() => X(!1)), X(!0));
-  }, [r, E, a, G.isInitialized, Y]), h.useEffect(() => {
+    !G.isInitialized && !Y && (G.initialize(r, g, a).catch(() => X(!1)), X(!0));
+  }, [r, g, a, G.isInitialized, Y]), h.useEffect(() => {
     const x = window.innerHeight;
     x < 180 ? M("STANDARD") : x >= 180 && x < 200 ? M("LARGE") : x >= 200 && x < 248 ? M("XLARGE") : x >= 248 && M("XXLARGE");
   }, [window.innerHeight]), h.useEffect(() => {
-    u(!e && G.isInitialized);
+    _(!e && G.isInitialized);
   }, [e, G.isInitialized]);
   const te = {
     showCTAColocatedWithText: n,
     heightOverrides: s,
-    onCardClick: _,
-    posthog: p,
+    onCardClick: p,
+    posthog: u,
     showIcon: I,
-    showWithMargin: g,
+    showWithMargin: E,
     widthOverrides: S
   }, Z = {
-    carouselSize: f,
+    carouselSize: T,
     variant: v,
     showCTAColocatedWithText: n,
     heightOverrides: s,
-    onCardClick: _,
-    posthog: p,
+    onCardClick: p,
+    posthog: u,
     showIcon: I
   };
   return /* @__PURE__ */ i(rt, { onEvent: J, onPageview: ee, store: G, children: /* @__PURE__ */ L(Rt, { heightOverrides: s, widthOverrides: S, children: [
-    !w && /* @__PURE__ */ i(yt, {}),
+    !w && /* @__PURE__ */ i(Ot, {}),
     w && l && /* @__PURE__ */ i(
-      Tt,
+      ft,
       {
         analyticsMetadata: me,
-        onCardClick: _,
-        posthog: p,
+        onCardClick: p,
+        posthog: u,
         widthOverrides: S
       }
     ),
@@ -1090,8 +1071,8 @@ const $ = h.createContext(null), rt = ({
           N,
           {
             sx: {
-              height: `calc(${ht[f]}px - 44px)`,
-              width: g ? `calc(${S}px - 32px)` : "100%"
+              height: `calc(${ht[T]}px - 44px)`,
+              width: E ? `calc(${S}px - 32px)` : "100%"
             },
             children: A ? /* @__PURE__ */ i(Le, { ...Z }) : /* @__PURE__ */ i(De, { ...Z })
           }
@@ -1099,7 +1080,7 @@ const $ = h.createContext(null), rt = ({
       }
     )
   ] }) });
-}, to = U(Ot), Wt = ({
+}, eo = U(yt), Wt = ({
   ariaLabel: t,
   heightOverrides: e,
   isActiveCard: o,
@@ -1107,18 +1088,18 @@ const $ = h.createContext(null), rt = ({
   posthog: r,
   widthOverrides: s,
   showIcon: a,
-  variant: _
+  variant: p
 }) => {
-  const C = H(), { ref: m, inView: p } = Te({
+  const C = H(), { ref: m, inView: u } = fe({
     threshold: we
   }), { cardsCopy: c } = D(), { onEvent: d } = j();
   ie(() => {
-    p && (d(Ne.ON_VIEW_MORE_VIEWED), r?.capture("viewed_insight", {
+    u && (d(Ne.ON_VIEW_MORE_VIEWED), r?.capture("viewed_insight", {
       template: "view_more_card"
     }));
-  }, [p]);
+  }, [u]);
   const l = () => {
-    n && n(), d(O.ON_VIEW_MORE_CLICKED), r?.capture("clicked_insight", {
+    n && n(), d(y.ON_VIEW_MORE_CLICKED), r?.capture("clicked_insight", {
       template: "view_more_card"
     });
   };
@@ -1133,29 +1114,29 @@ const $ = h.createContext(null), rt = ({
       description: c.view_more_card_description,
       hasCardEffect: !0,
       heightOverrides: e,
-      icon: a && /* @__PURE__ */ i(R, { bgColor: T(C.palette.primary.main, 0.15), name: "show_chart" }),
+      icon: a && /* @__PURE__ */ i(R, { bgColor: f(C.palette.primary.main, 0.15), name: "show_chart" }),
       isActiveCard: o,
       onCardClick: l,
       onPrimaryAction: l,
       primaryActionText: c.micro_card_cta,
       ref: m,
       title: c.view_more_card_title,
-      variant: _,
+      variant: p,
       widthOverrides: s
     }
   );
 }, Nt = U(Wt);
 export {
   nt as A,
-  Tt as C,
+  ft as C,
   rt as I,
   St as M,
-  Jt as N,
+  qt as N,
   me as T,
   Nt as V,
-  eo as Z,
-  gt as a,
-  to as b,
+  Jt as Z,
+  Et as a,
+  eo as b,
   dt as c,
   q as d
 };

package/dist/microinsights/beaticons/BeatMaterialIcon.d.ts

@@ -1,8 +1,9 @@
 import { default as React } from 'react';
 import { Icon } from '@mxenabled/mx-icons';
-declare const BeatMaterialIcon: ({ bgColor, name, iconColor, }: {
+interface BeatMaterialIconProps {
     bgColor?: string;
     name: string;
-    iconColor?: React.ComponentProps<typeof Icon>["color"];
-}) => import("react/jsx-runtime").JSX.Element;
+    iconColor?: React.ComponentProps<typeof Icon>['color'];
+}
+export declare const BeatMaterialIcon: ({ bgColor, name, iconColor }: BeatMaterialIconProps) => import("react/jsx-runtime").JSX.Element;
 export default BeatMaterialIcon;

package/dist/microinsights/beaticons/index.d.ts

@@ -1,5 +1,5 @@
 export { BeatCategoryIcon } from './BeatCategoryIcon';
-export { default as BeatMaterialIcon } from './BeatMaterialIcon';
+export { BeatMaterialIcon } from './BeatMaterialIcon';
 export { default as BeatMerchantLogo } from './BeatMerchantLogo';
 export { ChartFilledIcon } from './ChartFilledIcon';
 export { MonthlySpendComparisonIcon } from './MonthlySpendComparisonIcon';

package/dist/microinsights/index.es.js

@@ -1,4 +1,4 @@
-import { A as u, C as s, a as c, b as v, I as C, M as R, d as H, c as M, N as F, V, Z as k } from "../ViewMoreMicroCard-CL1_NwLt.mjs";
+import { A as u, C as s, a as c, b as v, I as C, M as R, d as H, c as M, N as F, V, Z as k } from "../ViewMoreMicroCard-DSLtQ92j.mjs";
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
 const a = ({
   color: i = "currentColor",

package/dist/trends/index.es.js

@@ -29,7 +29,7 @@ import { c as Et, i as Dt, d as Mt, e as At, b as tt, g as ot, f as Pe } from ".
 import Rt from "@mui/material/ToggleButton";
 import kt from "@mui/material/ToggleButtonGroup";
 import { DataGridPro as Ht } from "@mui/x-data-grid-pro";
-import { T as V, b as Nt } from "../ViewMoreMicroCard-CL1_NwLt.mjs";
+import { T as V, b as Nt } from "../ViewMoreMicroCard-DSLtQ92j.mjs";
 import { parseISO as nt } from "date-fns/parseISO";
 import { H as Re } from "../HeaderCell-DjuifqHJ.mjs";
 import { A as w, W as st } from "../WidgetContainer-RACapQsn.mjs";

package/package.json

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