@mx-cartographer/experiences 7.6.18 → 7.6.19-alpha.mega1

package/dist/{ViewMoreMicroCard-rY-kN9MP.mjs → ViewMoreMicroCard-FlFj-I3z.mjs}

@@ -1,49 +1,48 @@
-import { jsx as e, jsxs as g, Fragment as xe } from "react/jsx-runtime";
-import u, { useEffect as ee, useState as J } from "react";
-import { observer as b } from "mobx-react-lite";
-import k from "@mui/material/Stack";
-import Le from "@mui/material/Button";
-import Ve from "@mui/material/Typography";
-import { BarChart as Ne, Error as Ce, Campaign as He, ChevronLeft as ke, ChevronRight as fe } from "@mxenabled/mx-icons";
-import { L as Fe } from "./Loader-DUaFpDGv.mjs";
-import Z from "@mui/material/Box";
-import ae from "@mui/material/IconButton";
-import { useTheme as me } from "@mui/material/styles";
-import { useInView as Re } from "react-intersection-observer";
-import { P as Be, CategoryIcon as Ze, MerchantLogo as be } from "@mxenabled/mxui";
-import { b as Pe } 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 ge } from "mobx";
-import { G as se, a as ze, u as Ke, b as $e } from "./useCombineEvents-CRwX-qWE.mjs";
-import { B as ce } from "./BeatApi-De2IaqH2.mjs";
-import { u as Ye } from "./useWidgetLoadTimer-hIOioiKx.mjs";
-import je from "@mui/material/Card";
-import Xe from "@mui/material/CardActions";
-import Qe from "@mui/material/CardContent";
-import qe from "@mui/material/CardHeader";
-const de = {
+import { jsx as e, jsxs as _, Fragment as Ne } from "react/jsx-runtime";
+import u, { useEffect as ie, useState as te } from "react";
+import { observer as Z } from "mobx-react-lite";
+import S from "@mui/material/Stack";
+import oe from "@mui/material/Button";
+import He from "@mui/material/Typography";
+import { Icon as ke, Close as Fe, Error as Be, ChevronLeft as be, ChevronRight as Ie } from "@mxenabled/mx-icons";
+import { L as Pe } from "./Loader-DUaFpDGv.mjs";
+import X from "@mui/material/Box";
+import re from "@mui/material/IconButton";
+import { alpha as W, useTheme as le } from "@mui/material/styles";
+import { useInView as ve } from "react-intersection-observer";
+import { CategoryIcon as Ze, MerchantLogo as Ge, P as he, Text as Ee } from "@mxenabled/mxui";
+import { b as Ue } from "./Category-CevNQ03n.mjs";
+import ze from "@mui/material/styles/useTheme";
+import { b as Ke } from "./Localization-2MODESHW.mjs";
+import $e from "@mui/material/CircularProgress";
+import { makeAutoObservable as ne, runInAction as ye } from "mobx";
+import { G as ue, a as je, u as Ye, b as Xe } from "./useCombineEvents-CRwX-qWE.mjs";
+import { B as pe } from "./BeatApi-De2IaqH2.mjs";
+import { u as Qe } from "./useWidgetLoadTimer-hIOioiKx.mjs";
+import qe from "@mui/material/Card";
+import { CardActionArea as Je } from "@mui/material";
+import et from "@mui/material/Avatar";
+const _e = {
   featureVersion: "spendVsIncomeTrends"
 };
-class Je {
-  copyApi = new se("/", "");
+class tt {
+  copyApi = new ue("/", "");
   copyObject = {};
   namespace = "experiences";
   translationKey = "micro_insights";
   constructor() {
-    ie(this);
+    ne(this);
   }
   // NOTE: Not sure if this is special case, but other stores have this deprecation todo
   // DEPRECATED: Initialize api in constructor and use loadCopy instead
   // TODO: Remove this function
-  initialize = async (o, t) => {
-    this.copyApi = new se(o, t), await this.loadCopy();
+  initialize = async (t, o) => {
+    this.copyApi = new ue(t, o), await this.loadCopy();
   };
   loadCopy = async () => {
-    const o = await this.copyApi.getGlobalCopy(this.namespace, this.translationKey);
-    ge(() => {
-      this.copyObject = o[this.translationKey];
+    const t = await this.copyApi.getGlobalCopy(this.namespace, this.translationKey);
+    ye(() => {
+      this.copyObject = t[this.translationKey];
     });
   };
   get cardsCopy() {
@@ -56,7 +55,7 @@ class Je {
     return this.copyObject.zero_state;
   }
 }
-const oe = {
+const ae = {
   BillAmountNotStandard: "BillAmountNotStandard",
   CanadianUpcomingDeadlineAlert: "CanadianUpcomingDeadlineAlert",
   DuplicatePaymentV2: "DuplicatePaymentV2",
@@ -73,59 +72,59 @@ const oe = {
   WeeklyNewMerchantsV2: "WeeklyNewMerchantsV2",
   MonthlySpendComparison: "MonthlySpendComparison",
   MonthlySpendToIncomeComparison: "MonthlySpendToIncomeComparison"
-}, v = window?.app?.clientConfig?.microwidget_instance_id || "", Ee = {
+}, I = window?.app?.clientConfig?.microwidget_instance_id || "", Ce = {
   INSIGHTS_MICRO_WIDGET: "/micro-insights-carousel"
-}, Ie = (i) => `on${i}Click`, ye = (i) => `on${i}View`, ve = (i) => `on${i}ViewFirstTime`, le = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), et = () => Object.values(oe).reduce(
-  (i, o) => ({
+}, Ae = (i) => `on${i}Click`, Me = (i) => `on${i}View`, Se = (i) => `on${i}ViewFirstTime`, ce = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), it = () => Object.values(ae).reduce(
+  (i, t) => ({
     ...i,
-    [Ie(o)]: {
-      action: L.MICRO_BEAT_CLICKED,
-      category: x.BEAT_INTERACTION,
-      label: le(o),
-      value: v
+    [Ae(t)]: {
+      action: N.MICRO_BEAT_CLICKED,
+      category: L.BEAT_INTERACTION,
+      label: ce(t),
+      value: I
     }
   }),
   {}
-), tt = () => Object.values(oe).reduce(
-  (i, o) => ({
+), ot = () => Object.values(ae).reduce(
+  (i, t) => ({
     ...i,
-    [ye(o)]: {
-      action: L.MICRO_BEAT_DISPLAYED,
-      category: x.BEAT_INTERACTION,
-      label: le(o),
-      value: v
+    [Me(t)]: {
+      action: N.MICRO_BEAT_DISPLAYED,
+      category: L.BEAT_INTERACTION,
+      label: ce(t),
+      value: I
     }
   }),
   {}
-), it = () => Object.values(oe).reduce(
-  (i, o) => ({
+), rt = () => Object.values(ae).reduce(
+  (i, t) => ({
     ...i,
-    [ve(o)]: {
-      action: L.MICRO_BEAT_DISPLAYED_FIRST_TIME,
-      category: x.BEAT_INTERACTION,
-      label: le(o),
-      value: v
+    [Se(t)]: {
+      action: N.MICRO_BEAT_DISPLAYED_FIRST_TIME,
+      category: L.BEAT_INTERACTION,
+      label: ce(t),
+      value: I
     }
   }),
   {}
-), D = {
+), V = {
   CARD: "Card",
   CAROUSEL_CONTROL: "Carousel Control",
   MICRO_WIDGET: "Micro Widget",
   VIEW_MORE: "View More"
-}, x = {
+}, L = {
   MICRO_WIDGET_INTERACTION: "Micro Widget Interaction",
   BEAT_INTERACTION: "Beat Interaction"
-}, S = {
+}, v = {
   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"
-}, Se = {
+}, Oe = {
   ON_VIEW_MORE_VIEWED: "onViewMoreCardView"
-}, L = {
+}, N = {
   CONTROL_BACKWARD: "Control Backward",
   CONTROL_FORWARD: "Control Forward",
   MICRO_BEAT_CLICKED: "Micro Beat Clicked",
@@ -133,104 +132,104 @@ const oe = {
   MICRO_BEAT_DISPLAYED_FIRST_TIME: "Micro Beat Displayed For First Time",
   SWIPE_BACKWARD: "Swipe Backward",
   SWIPE_FORWARD: "Swipe Forward"
-}, H = {
+}, F = {
   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"
-}, he = {
-  [H.MICRO_WIDGET_CAROUSEL]: {
-    label: D.MICRO_WIDGET,
-    name: H.MICRO_WIDGET_CAROUSEL,
-    path: Ee.INSIGHTS_MICRO_WIDGET,
-    value: v
+}, fe = {
+  [F.MICRO_WIDGET_CAROUSEL]: {
+    label: V.MICRO_WIDGET,
+    name: F.MICRO_WIDGET_CAROUSEL,
+    path: Ce.INSIGHTS_MICRO_WIDGET,
+    value: I
   },
   // zero state
-  [H.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
-    label: D.MICRO_WIDGET,
-    name: H.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
-    path: Ee.INSIGHTS_MICRO_WIDGET,
-    value: v
+  [F.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
+    label: V.MICRO_WIDGET,
+    name: F.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
+    path: Ce.INSIGHTS_MICRO_WIDGET,
+    value: I
   },
   // no relevant cards
-  [H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
-    label: D.MICRO_WIDGET,
-    name: H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
+  [F.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
+    label: V.MICRO_WIDGET,
+    name: F.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
     path: "/micro-widget",
-    value: v
+    value: I
   }
-}, ue = {
+}, me = {
   // carousel control interaction events - clicks and swipes
-  [S.ON_CAROUSEL_BACK_CLICK]: {
-    action: L.CONTROL_BACKWARD,
-    category: x.MICRO_WIDGET_INTERACTION,
-    label: D.CAROUSEL_CONTROL,
-    value: v
+  [v.ON_CAROUSEL_BACK_CLICK]: {
+    action: N.CONTROL_BACKWARD,
+    category: L.MICRO_WIDGET_INTERACTION,
+    label: V.CAROUSEL_CONTROL,
+    value: I
   },
-  [S.ON_CAROUSEL_FORWARD_CLICK]: {
-    action: L.CONTROL_FORWARD,
-    category: x.MICRO_WIDGET_INTERACTION,
-    label: D.CAROUSEL_CONTROL,
-    value: v
+  [v.ON_CAROUSEL_FORWARD_CLICK]: {
+    action: N.CONTROL_FORWARD,
+    category: L.MICRO_WIDGET_INTERACTION,
+    label: V.CAROUSEL_CONTROL,
+    value: I
   },
-  [S.ON_CAROUSEL_BACK_SWIPE]: {
-    action: L.SWIPE_BACKWARD,
-    category: x.MICRO_WIDGET_INTERACTION,
-    label: D.CAROUSEL_CONTROL,
-    value: v
+  [v.ON_CAROUSEL_BACK_SWIPE]: {
+    action: N.SWIPE_BACKWARD,
+    category: L.MICRO_WIDGET_INTERACTION,
+    label: V.CAROUSEL_CONTROL,
+    value: I
   },
-  [S.ON_CAROUSEL_FORWARD_SWIPE]: {
-    action: L.SWIPE_FORWARD,
-    category: x.MICRO_WIDGET_INTERACTION,
-    label: D.CAROUSEL_CONTROL,
-    value: v
+  [v.ON_CAROUSEL_FORWARD_SWIPE]: {
+    action: N.SWIPE_FORWARD,
+    category: L.MICRO_WIDGET_INTERACTION,
+    label: V.CAROUSEL_CONTROL,
+    value: I
   },
   // read more card events
-  [S.ON_VIEW_MORE_CLICKED]: {
-    action: L.MICRO_BEAT_CLICKED,
-    category: x.BEAT_INTERACTION,
-    label: D.VIEW_MORE,
-    value: v
+  [v.ON_VIEW_MORE_CLICKED]: {
+    action: N.MICRO_BEAT_CLICKED,
+    category: L.BEAT_INTERACTION,
+    label: V.VIEW_MORE,
+    value: I
   },
-  [Se.ON_VIEW_MORE_VIEWED]: {
-    action: L.MICRO_BEAT_DISPLAYED,
-    category: x.BEAT_INTERACTION,
-    label: D.VIEW_MORE,
-    value: v
+  [Oe.ON_VIEW_MORE_VIEWED]: {
+    action: N.MICRO_BEAT_DISPLAYED,
+    category: L.BEAT_INTERACTION,
+    label: V.VIEW_MORE,
+    value: I
   },
-  ...et(),
-  ...tt(),
-  ...it()
-}, pe = async (i, o) => !o || !ue[i] ? null : o.sendAnalyticEvent(ue[i]).then((t) => t).catch((t) => {
-  throw t;
-}), _e = async (i, o) => !o || !he[i] ? null : o.sendAnalyticsPageview(he[i]).then((t) => t).catch((t) => {
-  throw t;
+  ...it(),
+  ...ot(),
+  ...rt()
+}, Re = async (i, t) => !t || !me[i] ? null : t.sendAnalyticEvent(me[i]).then((o) => o).catch((o) => {
+  throw o;
+}), ge = async (i, t) => !t || !fe[i] ? null : t.sendAnalyticsPageview(fe[i]).then((o) => o).catch((o) => {
+  throw o;
 });
-class ot {
-  onAnalyticEvent = pe;
-  onAnalyticPageView = _e;
-  beatApi = new ce("/", "");
+class lt {
+  onAnalyticEvent = Re;
+  onAnalyticPageView = ge;
+  beatApi = new pe("/", "");
   constructor() {
-    ie(this);
+    ne(this);
   }
-  initialize = async (o, t, l) => {
-    this.onAnalyticEvent = (n, r) => {
-      pe(n, r).then((a) => a).catch((a) => {
-        throw a.status === 401 && l(), a;
+  initialize = async (t, o, r) => {
+    this.onAnalyticEvent = (l, n) => {
+      Re(l, n).then((a) => a).catch((a) => {
+        throw a.status === 401 && r(), a;
       });
-    }, this.onAnalyticPageView = (n, r) => {
-      _e(n, r).then((a) => a).catch((a) => {
-        throw a.status === 401 && l(), a;
+    }, this.onAnalyticPageView = (l, n) => {
+      ge(l, n).then((a) => a).catch((a) => {
+        throw a.status === 401 && r(), a;
       });
-    }, this.beatApi = new ce(o, t);
+    }, this.beatApi = new pe(t, o);
   };
-  updateBeat = async (o) => {
-    this.beatApi.updateBeat(o);
+  updateBeat = async (t) => {
+    this.beatApi.updateBeat(t);
   };
-  updateOffer = async (o) => {
-    this.beatApi.updateOffer(o);
+  updateOffer = async (t) => {
+    this.beatApi.updateOffer(t);
   };
 }
-class lt {
+class nt {
   copyStore;
   endpoint = "/";
   insightsMicroWidgetStore;
@@ -238,219 +237,66 @@ class lt {
   token = "";
   isInitialized = !1;
   constructor() {
-    this.copyStore = new Je(), this.insightsMicroWidgetStore = new ot(), ie(this);
+    this.copyStore = new tt(), this.insightsMicroWidgetStore = new lt(), ne(this);
   }
-  initialize = async (o, t, l) => {
-    await this.copyStore.initialize(o, t), await this.insightsMicroWidgetStore.initialize(o, t, l);
-    const n = await ze(o, t, "1.0.0", "Micro Insights Carousel");
-    ge(() => {
-      this.session = n, this.isInitialized = !0;
+  initialize = async (t, o, r) => {
+    await this.copyStore.initialize(t, o), await this.insightsMicroWidgetStore.initialize(t, o, r);
+    const l = await je(t, o, "1.0.0", "Micro Insights Carousel");
+    ye(() => {
+      this.session = l, this.isInitialized = !0;
     });
   };
 }
-const U = u.createContext(null), nt = ({
+const z = u.createContext(null), at = ({
   onEvent: i,
-  onPageview: o,
-  store: t,
-  children: l
-}) => /* @__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: c,
-  isZeroState: h,
-  onCardClick: C = () => {
-  },
-  showIcon: p,
-  style: d = {},
-  title: E,
-  variant: s,
-  widthOverrides: f
-}, _) {
-  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",
-      sx: {
-        display: "-webkit-box",
-        fontSize: 13,
-        letterSpacing: 0.48,
-        lineHeight: "20px",
-        overflow: "hidden",
-        pl: h ? 0 : 28,
-        pr: h ? 0 : 8,
-        WebkitBoxOrient: "vertical",
-        WebkitLineClamp: 2,
-        wordWrap: "break-word"
-      },
-      children: n && /* @__PURE__ */ e(
-        "span",
-        {
-          dangerouslySetInnerHTML: { __html: n },
-          style: { fontFamily: R.typography.fontFamily }
-        }
-      )
-    }
-  );
-  return /* @__PURE__ */ e(
-    Z,
-    {
-      "aria-hidden": !c,
-      "aria-label": t,
-      "aria-labelledby": "divButton",
-      "aria-roledescription": "slide",
-      ref: _,
-      role: "group",
-      sx: {
-        height: "100%",
-        minWidth: f ? `${f}px` : "100%",
-        fontFamily: R.typography.fontFamily
-      },
-      children: /* @__PURE__ */ e(
-        Z,
-        {
-          "aria-hidden": !c,
-          "aria-label": t,
-          id: "divButton",
-          onClick: () => C(),
-          onKeyDown: () => I(!1),
-          onKeyUp: () => I(!0),
-          ref: _,
-          role: "button",
-          sx: {
-            border: O ? "1px solid rgba(82, 138, 224, 0.8)" : void 0,
-            borderRadius: "8px",
-            height: "100%"
-          },
-          tabIndex: c ? 0 : -1,
-          children: /* @__PURE__ */ e(
-            je,
-            {
-              "aria-roledescription": "slide",
-              className: "mx-micro-card",
-              role: "group",
-              sx: {
-                backgroundColor: l,
-                boxSizing: "border-box",
-                cursor: "pointer",
-                height: r ? "100%" : 124,
-                p: 16,
-                ...y,
-                "& .MuiCardHeader-avatar": {
-                  mr: "8px"
-                }
-              },
-              variant: s,
-              children: /* @__PURE__ */ g(
-                k,
-                {
-                  sx: {
-                    alignItems: "space-between",
-                    height: "100%"
-                  },
-                  children: [
-                    /* @__PURE__ */ e(
-                      qe,
-                      {
-                        avatar: p && a,
-                        subheader: h && M,
-                        sx: { p: 0 },
-                        title: E,
-                        titleTypographyProps: { fontSize: 15, fontWeight: 600, variant: "h3" }
-                      }
-                    ),
-                    /* @__PURE__ */ e(Qe, { sx: { p: 0 }, children: !h && M }),
-                    !!o && /* @__PURE__ */ e(
-                      Xe,
-                      {
-                        sx: {
-                          mt: "auto",
-                          p: 0
-                        },
-                        children: /* @__PURE__ */ e(
-                          Z,
-                          {
-                            sx: (W) => ({
-                              color: W.palette.primary.main,
-                              fontSize: 14,
-                              fontWeight: "bold",
-                              px: 28,
-                              fontFamily: W.typography.fontFamily,
-                              ...T
-                            }),
-                            children: o
-                          }
-                        )
-                      }
-                    )
-                  ]
-                }
-              )
-            }
-          )
-        }
-      )
-    }
-  );
-}), rt = ({ beat: i }) => {
-  const { primary_category_guid: o, category_guids: t } = i, l = o || t?.[0] || Pe.UNCATEGORIZED;
-  return /* @__PURE__ */ e(Ze, { categoryGuid: l, size: 16, sx: { minWidth: 16 } });
-}, at = ({ beat: i }) => {
-  const { category_guids: o, merchant_guids: t, primary_category_guid: l, primary_merchant_guid: n } = i;
+  onPageview: t,
+  store: o,
+  children: r
+}) => /* @__PURE__ */ e(z.Provider, { value: { onEvent: i, onPageview: t, store: o, children: r }, children: r }), ct = ({ beat: i }) => {
+  const { primary_category_guid: t, category_guids: o } = i, r = t || o?.[0] || Ue.UNCATEGORIZED;
+  return /* @__PURE__ */ e(Ze, { categoryGuid: r, size: 32, sx: { minWidth: 32 } });
+}, w = ({
+  bgColor: i,
+  name: t,
+  iconColor: o = "primary"
+}) => /* @__PURE__ */ e(
+  et,
+  {
+    sx: {
+      bgcolor: i,
+      width: 32,
+      height: 32
+    },
+    variant: "rounded",
+    children: /* @__PURE__ */ e(ke, { color: o, fill: !0, name: t, size: 20 })
+  }
+), st = ({ beat: i }) => {
+  const { category_guids: t, merchant_guids: o, primary_category_guid: r, primary_merchant_guid: l } = i;
   return /* @__PURE__ */ e(
-    be,
+    Ge,
     {
-      categoryGuid: l || o && o[0] || "",
-      merchantGuid: n || t[0],
-      size: 16,
+      categoryGuid: r || t && t[0] || "",
+      merchantGuid: l || o[0],
+      size: 32,
       sx: {
         display: "flex",
-        mt: 2
+        mt: 2,
+        minWidth: 32
       }
     }
   );
-}, st = ({
-  color: i = "currentColor",
-  height: o,
-  size: t = 16,
-  styles: l,
-  viewBox: n = "0 0 16 16",
-  width: r
-}) => /* @__PURE__ */ e(
-  "svg",
-  {
-    "aria-hidden": !0,
-    className: "kyper-icon",
-    focusable: !1,
-    height: o || t,
-    style: l,
-    viewBox: n,
-    width: r || t,
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ e(
-      "path",
-      {
-        d: "M16 1.5C16 0.671573 15.3284 0 14.5 0H1.5C0.671573 0 0 0.671573 0 1.5V14.5C0 15.3284 0.671573 16 1.5 16H14.5C15.3284 16 16 15.3284 16 14.5V1.5ZM12.8 5.1C13.0209 5.26568 13.0657 5.57909 12.9 5.8L9.90003 9.8C9.71746 10.0434 9.36163 10.0687 9.14648 9.85355L6.55413 7.2612L3.90003 10.8C3.73434 11.0209 3.42094 11.0657 3.20003 10.9C2.97912 10.7343 2.93434 10.4209 3.10003 10.2L6.10003 6.2C6.28259 5.95658 6.63843 5.93129 6.85358 6.14645L9.44593 8.7388L12.1 5.2C12.2657 4.97908 12.5791 4.93431 12.8 5.1Z",
-        fill: i
-      }
-    )
-  }
-), ct = (i) => i ? i.data ? i.data.map((o) => {
-  const t = {};
-  return i.names?.map((l, n) => {
-    t[l] = o[n];
-  }), t;
-}) : [] : [], dt = (i, o) => {
-  const t = ct(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;
+}, dt = (i) => i ? i.data ? i.data.map((t) => {
+  const o = {};
+  return i.names?.map((r, l) => {
+    o[r] = t[l];
+  }), o;
+}) : [] : [], ht = (i) => {
+  const t = dt(i), o = t.length / 2, r = t.slice(0, o), l = t.slice(o);
+  return !r.length || !l.length ? "primary" : r[0].amount > l[0].amount ? "error" : r[0].amount < l[0].amount ? "success" : "primary";
 }, Et = ({ beat: i }) => {
-  const o = te(), t = dt(i.data_series, o);
-  return /* @__PURE__ */ e(Ne, { sx: { color: t } });
-}, Me = () => /* @__PURE__ */ g("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
+  const t = ze(), o = ht(i.data_series), r = t.palette[o].main;
+  return /* @__PURE__ */ e(w, { bgColor: W(r, 0.15), iconColor: o, name: "bar_chart" });
+}, Te = () => /* @__PURE__ */ _("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ e(
     "path",
     {
@@ -694,7 +540,7 @@ const U = u.createContext(null), nt = ({
       fillRule: "evenodd"
     }
   ),
-  /* @__PURE__ */ g("g", { filter: "url(#filter0_d_1565_98011)", children: [
+  /* @__PURE__ */ _("g", { filter: "url(#filter0_d_1565_98011)", children: [
     /* @__PURE__ */ e("mask", { height: "22", id: "mask1_1565_98011", maskUnits: "userSpaceOnUse", width: "17", x: "16", y: "12", children: /* @__PURE__ */ e(
       "path",
       {
@@ -950,10 +796,10 @@ const U = u.createContext(null), nt = ({
     ),
     /* @__PURE__ */ e("path", { d: "M17.9668 31.5737H19.4947", stroke: "#E4E8EE", strokeWidth: "0.264005" })
   ] }),
-  /* @__PURE__ */ g("g", { filter: "url(#filter1_d_1565_98011)", children: [
+  /* @__PURE__ */ _("g", { filter: "url(#filter1_d_1565_98011)", children: [
     /* @__PURE__ */ e("circle", { cx: "15.0441", cy: "16.0441", fill: "#CDD3DD", r: "15.0441" }),
     /* @__PURE__ */ e("mask", { height: "30", id: "mask2_1565_98011", maskUnits: "userSpaceOnUse", width: "30", x: "0", y: "1", children: /* @__PURE__ */ e("circle", { cx: "15.0435", cy: "16.0445", fill: "#F8F9FB", r: "14.3951" }) }),
-    /* @__PURE__ */ g("g", { mask: "url(#mask2_1565_98011)", children: [
+    /* @__PURE__ */ _("g", { mask: "url(#mask2_1565_98011)", children: [
       /* @__PURE__ */ e("rect", { fill: "white", height: "31.1359", transform: "translate(0 0.162598)", width: "31.0101" }),
       /* @__PURE__ */ e("rect", { fill: "#A8B1BD", height: "3.0172", rx: "0.167622", width: "3.0172", x: "3.26953", y: "4.52002" }),
       /* @__PURE__ */ e("rect", { fill: "#A8B1BD", height: "3.0172", rx: "0.167622", width: "3.0172", x: "3.26953", y: "17.1758" }),
@@ -1143,8 +989,8 @@ const U = u.createContext(null), nt = ({
       fill: "#CDD3DD"
     }
   ),
-  /* @__PURE__ */ g("defs", { children: [
-    /* @__PURE__ */ g(
+  /* @__PURE__ */ _("defs", { children: [
+    /* @__PURE__ */ _(
       "filter",
       {
         colorInterpolationFilters: "sRGB",
@@ -1187,7 +1033,7 @@ const U = u.createContext(null), nt = ({
         ]
       }
     ),
-    /* @__PURE__ */ g(
+    /* @__PURE__ */ _(
       "filter",
       {
         colorInterpolationFilters: "sRGB",
@@ -1231,167 +1077,232 @@ const U = u.createContext(null), nt = ({
       }
     )
   ] })
-] }), ht = {
-  0: (i) => /* @__PURE__ */ e(Ce, { filled: !0, sx: { color: i.icon_color || "primary.main" } }),
-  1: (i) => /* @__PURE__ */ e(rt, { beat: i }),
-  2: (i) => /* @__PURE__ */ e(at, { beat: i }),
+] }), ut = {
+  0: (i, t) => /* @__PURE__ */ e(w, { bgColor: W(t.palette.primary.main, 0.15), name: "error" }),
+  1: (i) => /* @__PURE__ */ e(ct, { beat: i }),
+  2: (i) => /* @__PURE__ */ e(st, { beat: i }),
   3: (i) => /* @__PURE__ */ e(Et, { beat: i }),
-  // 4: (_, theme) => {
-  //   return (
-  //     <BeatMaterialIcon
-  //       bgColor={alpha(theme.palette.secondary.main, 0.15)}
-  //       iconColor="secondary"
-  //       name="info"
-  //     />
-  //   )
-  // },
-  5: () => /* @__PURE__ */ e(He, {})
+  4: (i, t) => /* @__PURE__ */ e(
+    w,
+    {
+      bgColor: W(t.palette.secondary.main, 0.15),
+      iconColor: "secondary",
+      name: "info"
+    }
+  ),
+  5: (i, t) => /* @__PURE__ */ e(w, { bgColor: W(t.palette.primary.main, 0.15), name: "campaign" }),
   // TODO: Waiting for the backend to accommodate icon types 6, 7, 8, and 9
-  // 6: (_, theme) => {
-  //   return (
-  //     <BeatMaterialIcon
-  //       bgColor={alpha(theme.palette.success.main, 0.15)}
-  //       iconColor="success"
-  //       name="check_circle"
-  //     />
-  //   )
-  // },
-  // 7: (_, theme) => (
-  //   <BeatMaterialIcon bgColor={alpha(theme.palette.primary.main, 0.15)} name="today" />
-  // ),
-  // 8: (_, theme) => (
-  //   <BeatMaterialIcon bgColor={alpha(theme.palette.primary.main, 0.15)} name="calendar_clock" />
-  // ),
-  // 9: (_, theme) => (
-  //   <BeatMaterialIcon bgColor={alpha(theme.palette.primary.main, 0.15)} name="celebration" />
-  // ),
-}, ut = ({ beat: i }) => {
-  const o = me(), { icon_type: t } = i, l = t != null ? ht[t] : null;
-  return l ? l(i, o) : /* @__PURE__ */ e(
-    Ce,
+  6: (i, t) => /* @__PURE__ */ e(
+    w,
     {
-      filled: !0,
-      sx: {
-        color: "primary.main"
-      }
+      bgColor: W(t.palette.success.main, 0.15),
+      iconColor: "success",
+      name: "check_circle"
     }
-  );
-}, V = () => {
-  const i = u.useContext(U);
+  ),
+  7: (i, t) => /* @__PURE__ */ e(w, { bgColor: W(t.palette.primary.main, 0.15), name: "today" }),
+  8: (i, t) => /* @__PURE__ */ e(w, { bgColor: W(t.palette.primary.main, 0.15), name: "calendar_clock" }),
+  9: (i, t) => /* @__PURE__ */ e(w, { bgColor: W(t.palette.primary.main, 0.15), name: "celebration" })
+}, pt = ({ beat: i }) => {
+  const t = le(), { icon_type: o } = i, r = o != null ? ut[o] : null;
+  return r ? r(i, t) : /* @__PURE__ */ e(w, { bgColor: W(t.palette.primary.main, 0.15), name: "error" });
+}, H = () => {
+  const i = u.useContext(z);
   if (!i)
     throw new Error("useCopyStore() must be used within the InsightsMicroWidgetDataProvider");
   return i.store.copyStore;
-}, pt = () => {
-  const i = u.useContext(U);
+}, _t = () => {
+  const i = u.useContext(z);
   if (!i?.store?.insightsMicroWidgetStore)
     throw new Error(
       "useInsightsMicroWidgetStore() must be used within the InsightsMicroWidgetDataProvider"
     );
   return i.store.insightsMicroWidgetStore;
-}, z = () => {
-  const i = u.useContext(U);
+}, K = () => {
+  const i = u.useContext(z);
   if (!i)
     throw new Error("useEvent() must be used within the InsightsMicroWidgetDataProvider");
   return { onEvent: i.onEvent };
-}, Ae = () => {
-  const i = u.useContext(U);
+}, We = () => {
+  const i = u.useContext(z);
   if (!i)
     throw new Error("usePageview() must be used within the InsightsMicroWidgetDataProvider");
   return { onPageview: i.onPageview };
-}, _t = {
+}, Ct = {
   LARGE: 180,
   STANDARD: 154,
   XLARGE: 200,
   XXLARGE: 248
-}, Ct = 50, Oe = 1, ft = ({
+}, ft = 50, we = 1, mt = {
+  close: "Close"
+}, Rt = u.forwardRef(
+  function({
+    ariaLabel: t,
+    cardSx: o,
+    description: r,
+    icon: l = /* @__PURE__ */ e(Be, {}),
+    isActiveCard: n,
+    hasCardEffect: a = !1,
+    heightOverrides: h,
+    onClose: p,
+    onCardClick: f,
+    onPrimaryAction: E,
+    onSecondaryAction: c,
+    primaryActionText: d,
+    secondaryActionText: s,
+    showIcon: R = !0,
+    title: C,
+    variant: g,
+    widthOverrides: m
+  }, x) {
+    const O = !!(E && d), T = !!(c && s), A = /* @__PURE__ */ _(
+      a ? qe : X,
+      {
+        "aria-hidden": !n,
+        "aria-label": t,
+        ref: x,
+        sx: {
+          backgroundColor: "background.paper",
+          height: h ? "100%" : 124,
+          minWidth: m ? `${m}px` : "100%",
+          pb: 8,
+          position: "relative",
+          pt: 16,
+          px: 16,
+          ...o
+        },
+        tabIndex: n ? 0 : -1,
+        variant: g,
+        children: [
+          p && /* @__PURE__ */ e(
+            re,
+            {
+              "aria-label": mt.close,
+              onClick: p,
+              sx: { minHeight: 40, minWidth: 40, position: "absolute", right: 4, top: 4 },
+              children: /* @__PURE__ */ e(Fe, {})
+            }
+          ),
+          /* @__PURE__ */ _(S, { sx: { gap: 6, height: "100%", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ _(S, { sx: { flexDirection: "row", gap: 12 }, children: [
+              R && l,
+              /* @__PURE__ */ _(S, { sx: { gap: 6 }, children: [
+                /* @__PURE__ */ e(S, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: /* @__PURE__ */ e(he, { bold: !0, sx: { lineHeight: "16px" }, variant: "body1", children: C }) }),
+                /* @__PURE__ */ e(
+                  he,
+                  {
+                    dangerouslySetInnerHTML: { __html: r },
+                    sx: {
+                      display: "-webkit-box",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      WebkitBoxOrient: "vertical",
+                      WebkitLineClamp: O ? 2 : 3
+                    },
+                    variant: "subtitle2"
+                  }
+                )
+              ] })
+            ] }),
+            O && /* @__PURE__ */ _(S, { sx: { alignItems: "center", flexDirection: "row", height: 28, pb: 4, pl: 36 }, children: [
+              O && /* @__PURE__ */ e(oe, { onClick: E, size: "small", sx: { px: 8 }, variant: "text", children: /* @__PURE__ */ e(Ee, { bold: !0, variant: "body2", children: d }) }),
+              T && /* @__PURE__ */ e(oe, { onClick: c, size: "small", sx: { px: 8 }, variant: "text", children: /* @__PURE__ */ e(Ee, { bold: !0, sx: { color: "text.secondary" }, variant: "body2", children: s }) })
+            ] })
+          ] })
+        ]
+      }
+    );
+    return f ? /* @__PURE__ */ e(Je, { onClick: f, children: A }) : A;
+  }
+), Q = Rt, gt = ({
   ariaLabel: i,
-  backgroundColor: o,
   beat: t,
-  showCTAColocatedWithText: l = !0,
-  heightOverrides: n,
-  index: r,
-  isActiveCard: a,
-  onCardClick: c,
-  posthog: h,
-  showIcon: C,
-  variant: p,
-  widthOverrides: d
+  index: o,
+  isActiveCard: r,
+  onCardClick: l,
+  posthog: n,
+  widthOverrides: a,
+  variant: h,
+  showIcon: p,
+  heightOverrides: f
 }) => {
-  const { ref: E, inView: s } = Re({
-    threshold: Oe
-  }), { cardsCopy: f } = V(), { onEvent: _ } = z(), { updateBeat: R, updateOffer: O } = pt();
-  ee(() => {
-    s && (t.has_been_displayed ? _(ye(t.template)) : (t.guid.startsWith("OFR") ? O({
+  const { ref: E, inView: c } = ve({
+    threshold: we
+  }), { cardsCopy: d } = H(), { onEvent: s } = K(), { updateBeat: R, updateOffer: C } = _t();
+  ie(() => {
+    c && (t.has_been_displayed ? s(Me(t.template)) : (t.guid.startsWith("OFR") ? C({
       ...t,
       has_been_displayed: !0
     }) : R({
       ...t,
       has_been_displayed: !0
-    }), _(ve(t.template))));
-  }, [s]), ee(() => {
-    if (s && t)
+    }), s(Se(t.template))));
+  }, [c]), ie(() => {
+    if (c && t)
       if (t.template === "MarketingOffer") {
         const m = t;
-        h?.capture("viewed_messaging_insight", {
+        n?.capture("viewed_messaging_insight", {
           template: t.template,
           campaign_guid: m.campaign_guid,
           campaign_name: m.pulse_campaign_name
         });
       } else
-        h?.capture("viewed_insight", {
+        n?.capture("viewed_insight", {
           beat_guid: t.guid,
           template: t.template,
-          position: r
+          position: o
         });
-  }, [t, r, s]);
-  const I = () => {
-    if (c && c(t), _(Ie(t.template)), t.template === "MarketingOffer") {
+  }, [t, o, c]);
+  const g = () => {
+    if (l && l(t), s(Ae(t.template)), t.template === "MarketingOffer") {
       const m = t;
-      h?.capture("clicked_messaging_insight", {
+      n?.capture("clicked_messaging_insight", {
         template: t.template,
         campaign_guid: m.campaign_guid,
         campaign_name: m.pulse_campaign_name
       });
     } else
-      h?.capture("clicked_insight", {
+      n?.capture("clicked_insight", {
         beat_guid: t.guid,
         template: t.template,
-        position: r
+        position: o
       });
   };
   return /* @__PURE__ */ e(
-    j,
+    Q,
     {
-      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(ut, { beat: t }),
-      isActiveCard: a,
-      onCardClick: I,
-      posthog: h,
+      cardSx: {
+        borderRadius: 2
+      },
+      description: t?.html_micro_description && t?.html_micro_description.length > 0 ? t.html_micro_description : t.html_description || "",
+      hasCardEffect: !0,
+      heightOverrides: f,
+      icon: /* @__PURE__ */ e(pt, { beat: t }),
+      isActiveCard: r,
+      onCardClick: g,
+      onPrimaryAction: g,
+      primaryActionText: t.micro_call_to_action || d.micro_card_cta,
       ref: E,
-      showCTAColocatedWithText: l,
-      showIcon: C,
+      showIcon: p,
       title: t.micro_title && t.micro_title.length > 0 ? t.micro_title : t.title,
-      variant: p,
-      widthOverrides: d
+      variant: h,
+      widthOverrides: a
     }
   );
-}, mt = ({
+}, It = ({
   currentBeatIndex: i,
-  numBeats: o,
-  onNextClick: t,
-  onPreviousClick: l,
-  scrollRightBoundary: n,
-  scrollX: r,
+  numBeats: t,
+  onNextClick: o,
+  onPreviousClick: r,
+  scrollRightBoundary: l,
+  scrollX: n,
   shouldApplyDotAnimation: a = !1,
-  visibleCardsCount: c = 1
+  visibleCardsCount: h = 1
 }) => {
-  const h = me(), { 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,
+  const p = le(), { carouselCopy: f } = H(), E = Math.floor(n) > l || i - h + 1 === 0, c = n < 0 || t - 1 === i, d = p.palette.grey[500], s = p.palette.primary.main;
+  return /* @__PURE__ */ _(
+    S,
     {
       direction: "row",
       sx: {
@@ -1406,30 +1317,30 @@ const U = u.createContext(null), nt = ({
       },
       children: [
         /* @__PURE__ */ e(
-          ae,
+          re,
           {
-            "aria-disabled": p,
-            "aria-label": C.previous_insight_cta_aria,
-            disabled: p,
-            onClick: l,
+            "aria-disabled": E,
+            "aria-label": f.previous_insight_cta_aria,
+            disabled: E,
+            onClick: r,
             children: /* @__PURE__ */ e(
-              ke,
+              be,
               {
                 style: {
-                  color: p ? E : s
+                  color: E ? d : s
                 }
               }
             )
           }
         ),
-        Array.from({ length: o }).map((f, _) => {
-          const R = _ === i;
+        Array.from({ length: t }).map((R, C) => {
+          const g = C === i;
           return /* @__PURE__ */ e(
-            Z,
+            X,
             {
               className: "mx-insights-micro-carousel-dots",
               sx: {
-                bgcolor: R ? s : E,
+                bgcolor: g ? s : 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"
@@ -1442,24 +1353,24 @@ const U = u.createContext(null), nt = ({
                   borderRadius: "50%",
                   p: 0
                 },
-                width: R && a ? 24 : 8
+                width: g && a ? 24 : 8
               }
             },
-            `carousel-button-${_}`
+            `carousel-button-${C}`
           );
         }),
         /* @__PURE__ */ e(
-          ae,
+          re,
           {
-            "aria-disabled": d,
-            "aria-label": C.next_insight_cta_aria,
-            disabled: d,
-            onClick: t,
+            "aria-disabled": c,
+            "aria-label": f.next_insight_cta_aria,
+            disabled: c,
+            onClick: o,
             children: /* @__PURE__ */ e(
-              fe,
+              Ie,
               {
                 style: {
-                  color: d ? E : s
+                  color: c ? d : s
                 }
               }
             )
@@ -1468,158 +1379,158 @@ const U = u.createContext(null), nt = ({
       ]
     }
   );
-}, Rt = ({
+}, vt = ({
   activeCardIndex: i,
-  beats: o,
-  cardWidth: t,
-  showCTAColocatedWithText: l,
-  heightOverrides: n,
-  onCardClick: r,
+  beats: t,
+  cardWidth: o,
+  showCTAColocatedWithText: r,
+  heightOverrides: l,
+  onCardClick: n,
   posthog: a,
-  showIcon: c,
-  variant: h
+  showIcon: h,
+  variant: p
 }) => {
-  const { carouselCopy: C } = V(), p = {
-    showCTAColocatedWithText: l,
-    heightOverrides: n,
+  const { carouselCopy: f } = H(), E = {
+    showCTAColocatedWithText: r,
+    heightOverrides: l,
     posthog: a,
-    showIcon: c,
-    variant: h
+    showIcon: h,
+    variant: p
   };
-  return /* @__PURE__ */ g(xe, { children: [
-    o.map((d, E) => {
-      const s = E + 1, f = o.length + 1, _ = Ge(
-        C.card_position_in_carousel_aria,
+  return /* @__PURE__ */ _(Ne, { children: [
+    t.map((c, d) => {
+      const s = d + 1, R = t.length + 1, C = Ke(
+        f.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;
+        R.toString()
+      ), g = c.micro_title && c.micro_title.length > 0, m = c.micro_description && c.micro_description.length > 0, x = g ? c.micro_title : c.title, O = m ? c.micro_description : c.description;
       return /* @__PURE__ */ e(
-        ft,
+        gt,
         {
-          ariaLabel: `${_}: ${I}, ${m}`,
-          beat: d,
-          index: E,
-          isActiveCard: E === i,
-          onCardClick: r,
-          widthOverrides: t || void 0,
-          ...p
+          ariaLabel: `${C}: ${x}, ${O}`,
+          beat: c,
+          index: d,
+          isActiveCard: d === i,
+          onCardClick: n,
+          widthOverrides: o || void 0,
+          ...E
         },
-        `${d.guid} ${E}`
+        `${c.guid} ${d}`
       );
     }),
     /* @__PURE__ */ e(
-      Tt,
+      xt,
       {
-        isActiveCard: i === o.length,
-        onCardClick: r,
-        widthOverrides: t || void 0,
-        ...p
+        isActiveCard: i === t.length,
+        onCardClick: n,
+        widthOverrides: o || void 0,
+        ...E
       }
     )
   ] });
-}, gt = ({
+}, yt = ({
   analyticsMetadata: i,
-  allowSingleCardPeeking: o = !1,
-  beats: t = [],
-  showCTAColocatedWithText: l,
-  heightOverrides: n,
-  onCardClick: r,
+  allowSingleCardPeeking: t = !1,
+  beats: o = [],
+  showCTAColocatedWithText: r,
+  heightOverrides: l,
+  onCardClick: n,
   posthog: a,
-  showCarouselControls: c,
-  showIcon: h,
-  showWithMargin: C = !0,
-  variant: p,
-  widthOverrides: d,
-  visibleCardsCount: E = 1
+  showCarouselControls: h,
+  showIcon: p,
+  showWithMargin: f = !0,
+  variant: E,
+  widthOverrides: c,
+  visibleCardsCount: d = 1
   // Default to 1 card visible
 }) => {
-  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();
+  const s = u.useRef(null), R = u.useRef(null), [C, g] = u.useState(0), [m, x] = u.useState(null), [O, T] = u.useState(null), [y, A] = u.useState(null), { carouselCopy: B } = H(), { onEvent: b } = K();
   u.useEffect(() => {
-    if (s.current && !o) {
-      const A = s.current.offsetWidth, P = 8;
-      let B;
-      if (E > 1) {
-        const ne = (A - (E - 1) * P) / E / 3;
-        B = (A - ne - (E - 1) * P) / E;
+    if (s.current && !t) {
+      const M = s.current.offsetWidth, G = 8;
+      let P;
+      if (d > 1) {
+        const se = (M - (d - 1) * G) / d / 3;
+        P = (M - se - (d - 1) * G) / d;
       } else
-        B = A;
-      M(B);
+        P = M;
+      A(P);
     }
-  }, [E, s.current?.offsetWidth]), u.useEffect(() => {
-    const A = f.current?.offsetWidth;
-    if (typeof A == "number" && o) {
-      const P = (G) => {
-        const re = [
+  }, [d, s.current?.offsetWidth]), u.useEffect(() => {
+    const M = R.current?.offsetWidth;
+    if (typeof M == "number" && t) {
+      const G = (U) => {
+        const de = [
           { maxWidth: 375, cardWidth: 268 },
           { maxWidth: 444, cardWidth: 300 },
           { maxWidth: 599, cardWidth: 350 },
           { maxWidth: 749, cardWidth: 450 },
           { maxWidth: 900, cardWidth: 600 }
-        ].find((De) => G <= De.maxWidth);
-        return re ? re.cardWidth : 750;
+        ].find((Le) => U <= Le.maxWidth);
+        return de ? de.cardWidth : 750;
       };
-      M(P(A));
-      const B = () => {
-        const G = f.current?.offsetWidth;
-        typeof G == "number" && M(P(G));
+      A(G(M));
+      const P = () => {
+        const U = R.current?.offsetWidth;
+        typeof U == "number" && A(G(U));
       };
-      return window.addEventListener("resize", B), () => {
-        window.removeEventListener("resize", B);
+      return window.addEventListener("resize", P), () => {
+        window.removeEventListener("resize", P);
       };
     }
-  }, [o, f]);
-  const K = () => {
-    F(S.ON_CAROUSEL_FORWARD_CLICK, i), s.current && y && s.current.scrollTo({
-      left: _ + y + 8,
+  }, [t, R]);
+  const $ = () => {
+    b(v.ON_CAROUSEL_FORWARD_CLICK, i), s.current && y && s.current.scrollTo({
+      left: C + y + 8,
       top: 0,
       behavior: "smooth"
     });
-  }, $ = () => {
-    F(S.ON_CAROUSEL_BACK_CLICK, i), s.current && y && s.current.scrollTo({
-      left: Math.max(0, _ - (y + 8)),
+  }, j = () => {
+    b(v.ON_CAROUSEL_BACK_CLICK, i), s.current && y && s.current.scrollTo({
+      left: Math.max(0, C - (y + 8)),
       top: 0,
       behavior: "smooth"
     });
-  }, X = () => {
-    s.current && R(s.current.scrollLeft);
-  }, Q = () => {
-    if (!m || !O) return;
-    m - O > Ct ? 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 = y ? Math.round(_ / (y + 8)) : 0, we = s.current ? s.current.scrollWidth - s.current.offsetWidth : 0;
-  return /* @__PURE__ */ g(
-    k,
+  }, q = () => {
+    s.current && g(s.current.scrollLeft);
+  }, J = () => {
+    if (!O || !m) return;
+    O - m > ft ? b(v.ON_CAROUSEL_FORWARD_SWIPE, i) : b(v.ON_CAROUSEL_BACK_SWIPE, i);
+  }, ee = (M) => {
+    x(M.targetTouches[0].clientX);
+  }, Y = (M) => {
+    x(null), T(M.targetTouches[0].clientX);
+  }, D = y ? Math.round(C / (y + 8)) : 0, Ve = s.current ? s.current.scrollWidth - s.current.offsetWidth : 0;
+  return /* @__PURE__ */ _(
+    S,
     {
-      "aria-label": W.carousel_title,
+      "aria-label": B.carousel_title,
       "aria-roledescription": "carousel",
-      ref: f,
+      ref: R,
       role: "group/region",
       sx: {
         alignItems: "center",
         boxSizing: "border-box",
-        height: n,
-        width: d || "100%"
+        height: l,
+        width: c || "100%"
       },
       children: [
         /* @__PURE__ */ e(
-          k,
+          S,
           {
             direction: "row",
-            onScroll: X,
-            onTouchEnd: Q,
-            onTouchMove: q,
+            onScroll: q,
+            onTouchEnd: J,
+            onTouchMove: ee,
             onTouchStart: Y,
             ref: s,
             sx: {
               alignItems: "center",
-              height: n && "100%",
+              height: l && "100%",
               gap: 8,
               listStyleType: "none",
               m: 0,
-              maxWidth: C ? "calc(100% - 32px)" : "100%",
+              maxWidth: f ? "calc(100% - 32px)" : "100%",
               overflowX: "auto",
               overflowY: "hidden",
               p: 0,
@@ -1631,48 +1542,48 @@ const U = u.createContext(null), nt = ({
               }
             },
             children: /* @__PURE__ */ e(
-              Rt,
+              vt,
               {
-                activeCardIndex: w,
-                beats: t,
+                activeCardIndex: D,
+                beats: o,
                 cardWidth: y,
-                heightOverrides: n,
-                onCardClick: r,
+                heightOverrides: l,
+                onCardClick: n,
                 posthog: a,
-                showCTAColocatedWithText: l,
-                showIcon: h,
-                variant: p
+                showCTAColocatedWithText: r,
+                showIcon: p,
+                variant: E
               }
             )
           }
         ),
-        c && /* @__PURE__ */ e(
-          mt,
+        h && /* @__PURE__ */ e(
+          It,
           {
-            currentBeatIndex: w + E - 1,
-            numBeats: t.length + 1,
-            onNextClick: K,
-            onPreviousClick: $,
-            scrollRightBoundary: we,
-            scrollX: _,
-            shouldApplyDotAnimation: o,
-            visibleCardsCount: E
+            currentBeatIndex: D + d - 1,
+            numBeats: o.length + 1,
+            onNextClick: $,
+            onPreviousClick: j,
+            scrollRightBoundary: Ve,
+            scrollX: C,
+            shouldApplyDotAnimation: t,
+            visibleCardsCount: d
           }
         )
       ]
     }
   );
-}, It = b(gt), yt = ({
+}, At = Z(yt), Mt = ({
   analyticsMetadata: i,
-  onCardClick: o,
-  posthog: t,
-  widthOverrides: l
+  onCardClick: t,
+  posthog: o,
+  widthOverrides: r
 }) => {
-  const { carouselCopy: n } = V(), { onEvent: r } = z(), a = () => {
-    r && (r(S.ON_VIEW_MORE_CLICKED, i), o(), t?.capture("clicked_view_more"));
+  const { carouselCopy: l } = H(), { onEvent: n } = K(), a = () => {
+    n && (n(v.ON_VIEW_MORE_CLICKED, i), t(), o?.capture("clicked_view_more"));
   };
-  return n ? /* @__PURE__ */ g(
-    k,
+  return l ? /* @__PURE__ */ _(
+    S,
     {
       alignItems: "center",
       direction: "row",
@@ -1680,125 +1591,122 @@ const U = u.createContext(null), nt = ({
       spacing: 2,
       sx: {
         padding: 16,
-        width: l || void 0
+        width: r || void 0
       },
       children: [
         /* @__PURE__ */ e(
-          Ve,
+          He,
           {
-            sx: (c) => ({
-              color: c.palette.primary.main,
+            sx: (h) => ({
+              color: h.palette.primary.main,
               fontSize: 18,
               fontWeight: 700,
               lineHeight: "24px"
             }),
             variant: "h3",
-            children: n.carousel_title
+            children: l.carousel_title
           }
         ),
         /* @__PURE__ */ e(
-          Le,
+          oe,
           {
-            endIcon: /* @__PURE__ */ e(fe, { size: 20 }),
+            endIcon: /* @__PURE__ */ e(Ie, { size: 20 }),
             onClick: a,
             size: "small",
-            sx: (c) => ({
-              color: c.palette.primary.main
+            sx: (h) => ({
+              color: h.palette.primary.main
             }),
             variant: "text",
-            children: n.view_all_insights_in_full_feed_cta_aria
+            children: l.view_all_insights_in_full_feed_cta_aria
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ e(Fe, {});
-}, vt = b(yt), St = ({
+  ) : /* @__PURE__ */ e(Pe, {});
+}, St = Z(Mt), Ot = ({
   heightOverrides: i,
-  widthOverrides: o,
-  children: t
+  widthOverrides: t,
+  children: o
 }) => {
-  const { carouselCopy: l } = V();
+  const { carouselCopy: r } = H();
   return /* @__PURE__ */ e(
-    Z,
+    X,
     {
-      "aria-label": l?.carousel_title,
+      "aria-label": r?.carousel_title,
       "aria-roledescription": "carousel",
       role: "group",
       sx: {
         boxSizing: "border-box",
         height: i ? void 0 : "100%",
         m: "0 auto",
-        width: o ? void 0 : "100%"
+        width: t ? void 0 : "100%"
       },
-      children: t
+      children: o
     }
   );
-}, Te = ({
+}, xe = ({
   ariaLabel: i,
-  heightOverrides: o,
-  onCardClick: t,
-  posthog: l,
-  showIcon: n,
-  variant: r
+  heightOverrides: t,
+  onCardClick: o,
+  posthog: r,
+  variant: l
 }) => {
-  const { cardsCopy: a } = V(), { onEvent: c } = z(), { onPageview: h } = Ae();
+  const { cardsCopy: n } = H(), { onEvent: a } = K(), { onPageview: h } = We();
   u.useEffect(() => {
-    h(H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
+    h(F.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
   }, []);
-  const C = () => {
-    t && t(), c(S.ON_NO_RELEVANT_INSIGHTS_CLICKED), l?.capture("clicked_insight", {
+  const p = () => {
+    o && o(), a(v.ON_NO_RELEVANT_INSIGHTS_CLICKED), r?.capture("clicked_insight", {
       template: "no_relevant_insights"
     });
   };
   return /* @__PURE__ */ e(
-    j,
+    Q,
     {
-      actionText: a.micro_card_cta,
       ariaLabel: i,
-      description: a.no_relevant_insights_card_description,
-      heightOverrides: o,
-      icon: /* @__PURE__ */ e(Me, {}),
-      isZeroState: !0,
-      onCardClick: C,
-      posthog: l,
-      showIcon: n,
-      style: {
-        linkTextStyle: {
-          ml: 48
-        }
+      cardSx: {
+        borderRadius: 2
       },
-      title: a.no_relevant_insights_card_title,
-      variant: r
+      description: n.no_relevant_insights_card_description,
+      hasCardEffect: !0,
+      heightOverrides: t,
+      icon: /* @__PURE__ */ e(Te, {}),
+      onCardClick: p,
+      onPrimaryAction: p,
+      primaryActionText: n.micro_card_cta,
+      title: n.no_relevant_insights_card_title,
+      variant: l
     }
   );
-}, ei = b(Te), We = ({
+}, ii = Z(xe), De = ({
   ariaLabel: i,
-  heightOverrides: o,
-  onCardClick: t,
-  posthog: l,
-  showIcon: n,
-  variant: r
+  heightOverrides: t,
+  onCardClick: o,
+  showIcon: r,
+  variant: l
 }) => {
-  const { onPageview: a } = Ae(), { zeroStateCopy: c } = V();
+  const { onPageview: n } = We(), { zeroStateCopy: a } = H();
   return u.useEffect(() => {
-    a(H.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
+    n(F.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
   }, []), /* @__PURE__ */ e(
-    j,
+    Q,
     {
       ariaLabel: i,
-      description: c.carousel_zero_state_description,
-      heightOverrides: o,
-      icon: /* @__PURE__ */ e(Me, {}),
-      isZeroState: !0,
-      onCardClick: t,
-      posthog: l,
-      showIcon: n,
-      title: c.carousel_zero_state_title,
-      variant: r
+      cardSx: {
+        borderRadius: 2
+      },
+      description: a.carousel_zero_state_description,
+      hasCardEffect: !0,
+      heightOverrides: t,
+      icon: /* @__PURE__ */ e(Te, {}),
+      onCardClick: o,
+      showIcon: r,
+      title: a.carousel_zero_state_title,
+      variant: l
     }
   );
-}, ti = b(We), Mt = () => /* @__PURE__ */ e(
-  Z,
+}, oi = Z(De), Tt = () => /* @__PURE__ */ e(
+  X,
   {
     sx: {
       alignItems: "center",
@@ -1807,163 +1715,166 @@ const U = u.createContext(null), nt = ({
       justifyContent: "center",
       width: "100%"
     },
-    children: /* @__PURE__ */ e(Ue, {})
+    children: /* @__PURE__ */ e($e, {})
   }
-), N = new lt(), At = ({
+), k = new nt(), Wt = ({
   allowSingleCardPeeking: i,
-  areBeatsLoading: o,
-  beats: t = [],
+  areBeatsLoading: t,
+  beats: o = [],
   // This also determines the length of the carousel controls (beat.length + 1)
-  showCTAColocatedWithText: l = !0,
-  endpoint: n = "/",
-  heightOverrides: r,
+  showCTAColocatedWithText: r = !0,
+  endpoint: l = "/",
+  heightOverrides: n,
   logOutUser: a,
-  onCardClick: c = () => {
+  onCardClick: h = () => {
   },
-  onEvent: h = () => {
+  onEvent: p = () => {
   },
-  onPageview: C = () => {
+  onPageview: f = () => {
   },
-  posthog: p,
-  showBorder: d = !0,
-  showCarouselControls: E,
+  posthog: E,
+  showBorder: c = !0,
+  showCarouselControls: d,
   showHeader: s,
-  showIcon: f,
-  showWithMargin: _ = !0,
-  token: R = "",
-  userHasFullInsightFeedBeats: O,
-  variant: I,
-  visibleCardsCount: m = 1,
+  showIcon: R,
+  showWithMargin: C = !0,
+  token: g = "",
+  userHasFullInsightFeedBeats: m,
+  variant: x,
+  visibleCardsCount: O = 1,
   widthOverrides: T
 }) => {
-  const [y, M] = J("STANDARD"), [W, F] = J(!1), [K, $] = J(!1), X = Ke([h], N), Q = $e([C], N);
-  Ye({
+  const [y, A] = te("STANDARD"), [B, b] = te(!1), [$, j] = te(!1), q = Ye([p], k), J = Xe([f], k);
+  Qe({
     widgetName: "InsightsMicroWidget",
-    isLoaded: W
+    isLoaded: B
   }), u.useEffect(() => {
-    !N.isInitialized && !K && (N.initialize(n, R, a).catch(() => $(!1)), $(!0));
-  }, [n, R, a, N.isInitialized, K]), u.useEffect(() => {
-    const w = window.innerHeight;
-    w < 180 ? M("STANDARD") : w >= 180 && w < 200 ? M("LARGE") : w >= 200 && w < 248 ? M("XLARGE") : w >= 248 && M("XXLARGE");
+    !k.isInitialized && !$ && (k.initialize(l, g, a).catch(() => j(!1)), j(!0));
+  }, [l, g, a, k.isInitialized, $]), u.useEffect(() => {
+    const D = window.innerHeight;
+    D < 180 ? A("STANDARD") : D >= 180 && D < 200 ? A("LARGE") : D >= 200 && D < 248 ? A("XLARGE") : D >= 248 && A("XXLARGE");
   }, [window.innerHeight]), u.useEffect(() => {
-    F(!o && N.isInitialized);
-  }, [o, N.isInitialized]);
-  const q = {
-    showCTAColocatedWithText: l,
-    heightOverrides: r,
-    onCardClick: c,
-    posthog: p,
-    showIcon: f,
-    showWithMargin: _,
+    b(!t && k.isInitialized);
+  }, [t, k.isInitialized]);
+  const ee = {
+    showCTAColocatedWithText: r,
+    heightOverrides: n,
+    onCardClick: h,
+    posthog: E,
+    showIcon: R,
+    showWithMargin: C,
     widthOverrides: T
   }, Y = {
     carouselSize: y,
-    variant: I,
-    showCTAColocatedWithText: l,
-    heightOverrides: r,
-    onCardClick: c,
-    posthog: p,
-    showIcon: f
+    variant: x,
+    showCTAColocatedWithText: r,
+    heightOverrides: n,
+    onCardClick: h,
+    posthog: E,
+    showIcon: R
   };
-  return /* @__PURE__ */ e(nt, { onEvent: X, onPageview: Q, store: N, children: /* @__PURE__ */ g(St, { heightOverrides: r, widthOverrides: T, children: [
-    !W && /* @__PURE__ */ e(Mt, {}),
-    W && s && /* @__PURE__ */ e(
-      vt,
+  return /* @__PURE__ */ e(at, { onEvent: q, onPageview: J, store: k, children: /* @__PURE__ */ _(Ot, { heightOverrides: n, widthOverrides: T, children: [
+    !B && /* @__PURE__ */ e(Tt, {}),
+    B && s && /* @__PURE__ */ e(
+      St,
       {
-        analyticsMetadata: de,
-        onCardClick: c,
-        posthog: p,
+        analyticsMetadata: _e,
+        onCardClick: h,
+        posthog: E,
         widthOverrides: T
       }
     ),
-    W && !!t.length && /* @__PURE__ */ e(
-      It,
+    B && !!o.length && /* @__PURE__ */ e(
+      At,
       {
         allowSingleCardPeeking: i,
-        analyticsMetadata: de,
-        beats: t,
-        showCarouselControls: E,
-        variant: d ? I : void 0,
-        visibleCardsCount: m,
-        ...q
+        analyticsMetadata: _e,
+        beats: o,
+        showCarouselControls: d,
+        variant: c ? x : void 0,
+        visibleCardsCount: O,
+        ...ee
       }
     ),
-    W && !t.length && /* @__PURE__ */ e(
-      k,
+    B && !o.length && /* @__PURE__ */ e(
+      S,
       {
         sx: {
           alignItems: "center",
-          height: r,
+          height: n,
           width: T || "100%"
         },
         children: /* @__PURE__ */ e(
-          k,
+          S,
           {
             sx: {
-              height: `calc(${_t[y]}px - 44px)`,
-              width: _ ? `calc(${T}px - 32px)` : "100%"
+              height: `calc(${Ct[y]}px - 44px)`,
+              width: C ? `calc(${T}px - 32px)` : "100%"
             },
-            children: O ? /* @__PURE__ */ e(Te, { ...Y }) : /* @__PURE__ */ e(We, { ...Y })
+            children: m ? /* @__PURE__ */ e(xe, { ...Y }) : /* @__PURE__ */ e(De, { ...Y })
           }
         )
       }
     )
   ] }) });
-}, ii = b(At), Ot = ({
-  isActiveCard: i,
-  ariaLabel: o,
+}, ri = Z(Wt), wt = ({
+  ariaLabel: i,
   heightOverrides: t,
-  onCardClick: l,
-  posthog: n,
-  showIcon: r,
-  variant: a,
-  widthOverrides: c
+  isActiveCard: o,
+  onCardClick: r,
+  posthog: l,
+  widthOverrides: n,
+  showIcon: a,
+  variant: h
 }) => {
-  const h = te(), { ref: C, inView: p } = Re({
-    threshold: Oe
-  }), { cardsCopy: d } = V(), { onEvent: E } = z();
-  ee(() => {
-    p && (E(Se.ON_VIEW_MORE_VIEWED), n?.capture("viewed_insight", {
+  const p = le(), { ref: f, inView: E } = ve({
+    threshold: we
+  }), { cardsCopy: c } = H(), { onEvent: d } = K();
+  ie(() => {
+    E && (d(Oe.ON_VIEW_MORE_VIEWED), l?.capture("viewed_insight", {
       template: "view_more_card"
     }));
-  }, [p]);
+  }, [E]);
   const s = () => {
-    l && l(), E(S.ON_VIEW_MORE_CLICKED), n?.capture("clicked_insight", {
+    r && r(), d(v.ON_VIEW_MORE_CLICKED), l?.capture("clicked_insight", {
       template: "view_more_card"
     });
   };
   return /* @__PURE__ */ e(
-    j,
+    Q,
     {
-      actionText: d.micro_card_cta,
-      ariaLabel: o,
-      description: d.view_more_card_description,
+      ariaLabel: i,
+      cardSx: {
+        borderRadius: 2
+      },
+      description: c.view_more_card_description,
+      hasCardEffect: !0,
       heightOverrides: t,
-      icon: /* @__PURE__ */ e(st, { color: h.palette.primary.main }),
-      isActiveCard: i,
+      icon: /* @__PURE__ */ e(w, { bgColor: W(p.palette.primary.main, 0.15), name: "show_chart" }),
+      isActiveCard: o,
       onCardClick: s,
-      posthog: n,
-      ref: C,
-      showIcon: r,
-      title: d.view_more_card_title,
-      variant: a,
-      widthOverrides: c
+      onPrimaryAction: s,
+      primaryActionText: c.micro_card_cta,
+      ref: f,
+      showIcon: a,
+      title: c.view_more_card_title,
+      variant: h,
+      widthOverrides: n
     }
   );
-}, Tt = b(Ot);
+}, xt = Z(wt);
 export {
-  lt as A,
-  j as B,
-  vt as C,
-  nt as I,
-  It as M,
-  ei as N,
-  de as T,
-  Tt as V,
-  ti as Z,
-  ft as a,
-  ii as b,
-  st as c,
-  Et as d,
-  Me as e
+  nt as A,
+  St as C,
+  at as I,
+  At as M,
+  ii as N,
+  _e as T,
+  xt as V,
+  oi as Z,
+  gt as a,
+  ri as b,
+  Et as c,
+  Te as d,
+  Q as e
 };