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

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

@@ -1,48 +1,46 @@
-import { jsx as e, jsxs as v } from "react/jsx-runtime";
-import u, { useState as te, useEffect as oe } from "react";
-import { observer as G } from "mobx-react-lite";
-import Pe from "@mui/material/Button";
-import K from "@mui/material/Stack";
-import Ge from "@mui/material/Typography";
-import { ChevronLeft as be, ChevronRight as Se } from "@mxenabled/mx-icons";
-import { L as Ue } from "./Loader-DUaFpDGv.mjs";
-import U from "@mui/material/Box";
-import pe from "@mui/material/IconButton";
-import { useTheme as ze } from "@mui/material/styles";
-import { useInView as Me } from "react-intersection-observer";
-import { P as Ke, CategoryIcon as $e, useTokens as Ae, MerchantLogo as Ye, Icon as ie } from "@mxenabled/mxui";
-import se from "@mui/material/styles/useTheme";
-import { b as je } from "./Category-CevNQ03n.mjs";
-import { css as Xe } from "@mxenabled/cssinjs";
-import { b as Qe } from "./Localization-2MODESHW.mjs";
-import qe from "@mui/material/CircularProgress";
-import { makeAutoObservable as de, runInAction as Oe } from "mobx";
-import { G as _e, a as Je, u as et, b as tt } from "./useCombineEvents-BUDIR1ba.mjs";
-import { B as Ce } from "./BeatApi-DhJpgCLz.mjs";
-import it from "@mui/material/Card";
-import ot from "@mui/material/CardActions";
-import rt from "@mui/material/CardContent";
-import lt from "@mui/material/CardHeader";
-const fe = {
+import { jsx as e, jsxs as g, Fragment as xe } from "react/jsx-runtime";
+import u, { useEffect as te, useState as ee } from "react";
+import { observer as P } from "mobx-react-lite";
+import k from "@mui/material/Stack";
+import De from "@mui/material/Button";
+import Le from "@mui/material/Typography";
+import { BarChart as Ve, Error as ae, Campaign as Ne, ChevronLeft as He, ChevronRight as Ce } from "@mxenabled/mx-icons";
+import { L as ke } from "./Loader-Ckqi9Rx6.mjs";
+import Z from "@mui/material/Box";
+import ce from "@mui/material/IconButton";
+import { useTheme as j } from "@mui/material/styles";
+import { useInView as me } from "react-intersection-observer";
+import { P as Fe, CategoryIcon as Be, MerchantLogo as Ze } from "@mxenabled/mxui";
+import { b as Pe } from "./Category-Ccoew_sA.mjs";
+import { b as be } from "./Localization-2MODESHW.mjs";
+import Ge from "@mui/material/CircularProgress";
+import { makeAutoObservable as ie, runInAction as Re } from "mobx";
+import { G as se, b as Ue, u as ze, a as Ke } from "./useCombineEvents-kNzLTWCp.mjs";
+import { B as de } from "./BeatApi-De2IaqH2.mjs";
+import $e from "@mui/material/Card";
+import Ye from "@mui/material/CardActions";
+import je from "@mui/material/CardContent";
+import Xe from "@mui/material/CardHeader";
+const Ee = {
   featureVersion: "spendVsIncomeTrends"
 };
-class nt {
-  copyApi = new _e("/", "");
+class Qe {
+  copyApi = new se("/", "");
   copyObject = {};
   namespace = "experiences";
   translationKey = "micro_insights";
   constructor() {
-    de(this);
+    ie(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 _e(o, t), await this.loadCopy();
+    this.copyApi = new se(o, t), await this.loadCopy();
   };
   loadCopy = async () => {
     const o = await this.copyApi.getGlobalCopy(this.namespace, this.translationKey);
-    Oe(() => {
+    Re(() => {
       this.copyObject = o[this.translationKey];
     });
   };
@@ -56,7 +54,7 @@ class nt {
     return this.copyObject.zero_state;
   }
 }
-const he = {
+const oe = {
   BillAmountNotStandard: "BillAmountNotStandard",
   CanadianUpcomingDeadlineAlert: "CanadianUpcomingDeadlineAlert",
   DuplicatePaymentV2: "DuplicatePaymentV2",
@@ -73,59 +71,58 @@ const he = {
   WeeklyNewMerchantsV2: "WeeklyNewMerchantsV2",
   MonthlySpendComparison: "MonthlySpendComparison",
   MonthlySpendToIncomeComparison: "MonthlySpendToIncomeComparison"
-}, S = window?.app?.clientConfig?.microwidget_instance_id || "", me = {
+}, y = window?.app?.clientConfig?.microwidget_instance_id || "", he = {
   INSIGHTS_MICRO_WIDGET: "/micro-insights-carousel"
-}, Te = (i) => `on${i}Click`, We = (i) => `on${i}View`, we = (i) => `on${i}ViewFirstTime`, Ee = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), at = () => Object.values(he).reduce(
+}, ge = (i) => `on${i}Click`, Ie = (i) => `on${i}View`, ve = (i) => `on${i}ViewFirstTime`, le = (i) => i.replace(/([a-z])([A-Z])/g, "$1 $2"), qe = () => Object.values(oe).reduce(
   (i, o) => ({
     ...i,
-    [Te(o)]: {
-      action: w.MICRO_BEAT_CLICKED,
-      category: W.BEAT_INTERACTION,
-      label: Ee(o),
-      value: S
+    [ge(o)]: {
+      action: L.MICRO_BEAT_CLICKED,
+      category: D.BEAT_INTERACTION,
+      label: le(o),
+      value: y
     }
   }),
   {}
-), ct = () => Object.values(he).reduce(
+), Je = () => Object.values(oe).reduce(
   (i, o) => ({
     ...i,
-    [We(o)]: {
-      action: w.MICRO_BEAT_DISPLAYED,
-      category: W.BEAT_INTERACTION,
-      label: Ee(o),
-      value: S
+    [Ie(o)]: {
+      action: L.MICRO_BEAT_DISPLAYED,
+      category: D.BEAT_INTERACTION,
+      label: le(o),
+      value: y
     }
   }),
   {}
-), st = () => Object.values(he).reduce(
+), et = () => Object.values(oe).reduce(
   (i, o) => ({
     ...i,
-    [we(o)]: {
-      action: w.MICRO_BEAT_DISPLAYED_FIRST_TIME,
-      category: W.BEAT_INTERACTION,
-      label: Ee(o),
-      value: S
+    [ve(o)]: {
+      action: L.MICRO_BEAT_DISPLAYED_FIRST_TIME,
+      category: D.BEAT_INTERACTION,
+      label: le(o),
+      value: y
     }
   }),
   {}
-), T = {
-  CARD: "Card",
+), x = {
   CAROUSEL_CONTROL: "Carousel Control",
   MICRO_WIDGET: "Micro Widget",
   VIEW_MORE: "View More"
-}, W = {
+}, D = {
   MICRO_WIDGET_INTERACTION: "Micro Widget Interaction",
   BEAT_INTERACTION: "Beat Interaction"
-}, M = {
+}, S = {
   ON_CAROUSEL_BACK_CLICK: "onCarouselBackClick",
   ON_CAROUSEL_BACK_SWIPE: "onCarouselBackSwipe",
   ON_CAROUSEL_FORWARD_CLICK: "onCarouselForwardClick",
   ON_CAROUSEL_FORWARD_SWIPE: "onCarouselForwardSwipe",
   ON_NO_RELEVANT_INSIGHTS_CLICKED: "onNoRelevantInsightsClicked",
   ON_VIEW_MORE_CLICKED: "onViewMoreClicked"
-}, xe = {
+}, ye = {
   ON_VIEW_MORE_VIEWED: "onViewMoreCardView"
-}, w = {
+}, L = {
   CONTROL_BACKWARD: "Control Backward",
   CONTROL_FORWARD: "Control Forward",
   MICRO_BEAT_CLICKED: "Micro Beat Clicked",
@@ -137,91 +134,91 @@ const he = {
   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"
-}, Re = {
+}, ue = {
   [H.MICRO_WIDGET_CAROUSEL]: {
-    label: T.MICRO_WIDGET,
+    label: x.MICRO_WIDGET,
     name: H.MICRO_WIDGET_CAROUSEL,
-    path: me.INSIGHTS_MICRO_WIDGET,
-    value: S
+    path: he.INSIGHTS_MICRO_WIDGET,
+    value: y
   },
   // zero state
   [H.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
-    label: T.MICRO_WIDGET,
+    label: x.MICRO_WIDGET,
     name: H.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
-    path: me.INSIGHTS_MICRO_WIDGET,
-    value: S
+    path: he.INSIGHTS_MICRO_WIDGET,
+    value: y
   },
   // no relevant cards
   [H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
-    label: T.MICRO_WIDGET,
+    label: x.MICRO_WIDGET,
     name: H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
     path: "/micro-widget",
-    value: S
+    value: y
   }
-}, ge = {
+}, pe = {
   // carousel control interaction events - clicks and swipes
-  [M.ON_CAROUSEL_BACK_CLICK]: {
-    action: w.CONTROL_BACKWARD,
-    category: W.MICRO_WIDGET_INTERACTION,
-    label: T.CAROUSEL_CONTROL,
-    value: S
+  [S.ON_CAROUSEL_BACK_CLICK]: {
+    action: L.CONTROL_BACKWARD,
+    category: D.MICRO_WIDGET_INTERACTION,
+    label: x.CAROUSEL_CONTROL,
+    value: y
   },
-  [M.ON_CAROUSEL_FORWARD_CLICK]: {
-    action: w.CONTROL_FORWARD,
-    category: W.MICRO_WIDGET_INTERACTION,
-    label: T.CAROUSEL_CONTROL,
-    value: S
+  [S.ON_CAROUSEL_FORWARD_CLICK]: {
+    action: L.CONTROL_FORWARD,
+    category: D.MICRO_WIDGET_INTERACTION,
+    label: x.CAROUSEL_CONTROL,
+    value: y
   },
-  [M.ON_CAROUSEL_BACK_SWIPE]: {
-    action: w.SWIPE_BACKWARD,
-    category: W.MICRO_WIDGET_INTERACTION,
-    label: T.CAROUSEL_CONTROL,
-    value: S
+  [S.ON_CAROUSEL_BACK_SWIPE]: {
+    action: L.SWIPE_BACKWARD,
+    category: D.MICRO_WIDGET_INTERACTION,
+    label: x.CAROUSEL_CONTROL,
+    value: y
   },
-  [M.ON_CAROUSEL_FORWARD_SWIPE]: {
-    action: w.SWIPE_FORWARD,
-    category: W.MICRO_WIDGET_INTERACTION,
-    label: T.CAROUSEL_CONTROL,
-    value: S
+  [S.ON_CAROUSEL_FORWARD_SWIPE]: {
+    action: L.SWIPE_FORWARD,
+    category: D.MICRO_WIDGET_INTERACTION,
+    label: x.CAROUSEL_CONTROL,
+    value: y
   },
   // read more card events
-  [M.ON_VIEW_MORE_CLICKED]: {
-    action: w.MICRO_BEAT_CLICKED,
-    category: W.BEAT_INTERACTION,
-    label: T.VIEW_MORE,
-    value: S
+  [S.ON_VIEW_MORE_CLICKED]: {
+    action: L.MICRO_BEAT_CLICKED,
+    category: D.BEAT_INTERACTION,
+    label: x.VIEW_MORE,
+    value: y
   },
-  [xe.ON_VIEW_MORE_VIEWED]: {
-    action: w.MICRO_BEAT_DISPLAYED,
-    category: W.BEAT_INTERACTION,
-    label: T.VIEW_MORE,
-    value: S
+  [ye.ON_VIEW_MORE_VIEWED]: {
+    action: L.MICRO_BEAT_DISPLAYED,
+    category: D.BEAT_INTERACTION,
+    label: x.VIEW_MORE,
+    value: y
   },
-  ...at(),
-  ...ct(),
-  ...st()
-}, Ie = async (i, o) => !o || !ge[i] ? null : o.sendAnalyticEvent(ge[i]).then((t) => t).catch((t) => {
+  ...qe(),
+  ...Je(),
+  ...et()
+}, _e = async (i, o) => !o || !pe[i] ? null : o.sendAnalyticEvent(pe[i]).then((t) => t).catch((t) => {
   throw t;
-}), ye = async (i, o) => !o || !Re[i] ? null : o.sendAnalyticsPageview(Re[i]).then((t) => t).catch((t) => {
+}), fe = async (i, o) => !o || !ue[i] ? null : o.sendAnalyticsPageview(ue[i]).then((t) => t).catch((t) => {
   throw t;
 });
-class dt {
-  onAnalyticEvent = Ie;
-  onAnalyticPageView = ye;
-  beatApi = new Ce("/", "");
+class tt {
+  onAnalyticEvent = _e;
+  onAnalyticPageView = fe;
+  beatApi = new de("/", "");
   constructor() {
-    de(this);
+    ie(this);
   }
-  initialize = async (o, t, r) => {
-    this.onAnalyticEvent = (n, l) => {
-      Ie(n, l).then((a) => a).catch((a) => {
-        throw a.status === 401 && r(), a;
+  initialize = async (o, t, l) => {
+    this.onAnalyticEvent = (n, r) => {
+      _e(n, r).then((a) => a).catch((a) => {
+        throw a.status === 401 && l(), a;
       });
-    }, this.onAnalyticPageView = (n, l) => {
-      ye(n, l).then((a) => a).catch((a) => {
-        throw a.status === 401 && r(), a;
+    }, this.onAnalyticPageView = (n, r) => {
+      fe(n, r).then((a) => a).catch((a) => {
+        throw a.status === 401 && l(), a;
       });
-    }, this.beatApi = new Ce(o, t);
+    }, this.beatApi = new de(o, t);
   };
   updateBeat = async (o) => {
     this.beatApi.updateBeat(o);
@@ -230,7 +227,7 @@ class dt {
     this.beatApi.updateOffer(o);
   };
 }
-class ht {
+class it {
   copyStore;
   endpoint = "/";
   insightsMicroWidgetStore;
@@ -238,196 +235,188 @@ class ht {
   token = "";
   isInitialized = !1;
   constructor() {
-    this.copyStore = new nt(), this.insightsMicroWidgetStore = new dt(), de(this);
+    this.copyStore = new Qe(), this.insightsMicroWidgetStore = new tt(), ie(this);
   }
-  initialize = async (o, t, r) => {
-    await this.copyStore.initialize(o, t), await this.insightsMicroWidgetStore.initialize(o, t, r);
-    const n = await Je(o, t, "1.0.0", "Micro Insights Carousel");
-    Oe(() => {
+  initialize = async (o, t, l) => {
+    await this.copyStore.initialize(o, t), await this.insightsMicroWidgetStore.initialize(o, t, l);
+    const n = await Ue(o, t, "1.0.0", "Micro Insights Carousel");
+    Re(() => {
       this.session = n, this.isInitialized = !0;
     });
   };
 }
-const $ = u.createContext(null), Et = ({
+const U = u.createContext(null), ot = ({
   onEvent: i,
   onPageview: o,
   store: t,
-  children: r
-}) => /* @__PURE__ */ e($.Provider, { value: { onEvent: i, onPageview: o, store: t, children: r }, children: r }), re = u.forwardRef(
-  function({
-    actionText: o,
-    ariaLabel: t,
-    backgroundColor: r,
-    description: n,
-    heightOverrides: l,
-    icon: a,
-    isActiveCard: d,
-    isZeroState: p,
-    onCardClick: _ = () => {
-    },
-    showIcon: C,
-    style: f = {},
-    fontColors: h = {},
-    title: m,
-    variant: c,
-    widthOverrides: E
-  }, R) {
-    const I = se(), [x, O] = u.useState(!1), { cardStyle: y, linkTextStyle: F } = f, z = c ? y : { border: "none", boxShadow: "none", ...y }, g = /* @__PURE__ */ e(
-      Ke,
-      {
-        className: "mx-micro-card-description",
-        color: h.textColor ? "undefined" : "text.primary",
-        sx: {
-          display: "-webkit-box",
-          fontSize: 13,
-          letterSpacing: 0.48,
-          lineHeight: "20px",
-          overflow: "hidden",
-          pl: p ? 0 : 28,
-          pr: p ? 0 : 8,
-          WebkitBoxOrient: "vertical",
-          WebkitLineClamp: 2,
-          wordWrap: "break-word"
-        },
-        children: n && /* @__PURE__ */ e(
-          "span",
-          {
-            dangerouslySetInnerHTML: { __html: n },
-            style: { fontFamily: I.typography.fontFamily }
-          }
-        )
-      }
-    );
-    return /* @__PURE__ */ e(
-      U,
-      {
-        "aria-hidden": !d,
-        "aria-label": t,
-        "aria-labelledby": "divButton",
-        "aria-roledescription": "slide",
-        ref: R,
-        role: "group",
-        sx: {
-          height: "100%",
-          minWidth: E ? `${E}px` : "100%",
-          fontFamily: I.typography.fontFamily
-        },
-        children: /* @__PURE__ */ e(
-          U,
-          {
-            "aria-hidden": !d,
-            "aria-label": t,
-            id: "divButton",
-            onClick: () => _(),
-            onKeyDown: () => O(!1),
-            onKeyUp: () => O(!0),
-            ref: R,
-            role: "button",
-            sx: {
-              border: x ? "1px solid rgba(82, 138, 224, 0.8)" : void 0,
-              borderRadius: "8px",
-              height: "100%"
-            },
-            tabIndex: d ? 0 : -1,
-            children: /* @__PURE__ */ e(
-              it,
-              {
-                "aria-roledescription": "slide",
-                className: "mx-micro-card",
-                role: "group",
-                sx: {
-                  backgroundColor: r,
-                  boxSizing: "border-box",
-                  cursor: "pointer",
-                  height: l ? "100%" : 124,
-                  p: 16,
-                  ...z,
-                  "& .MuiCardHeader-avatar": {
-                    color: h.iconColor,
-                    mr: "8px"
-                  }
-                },
-                variant: c,
-                children: /* @__PURE__ */ v(
-                  K,
-                  {
-                    sx: {
-                      alignItems: "space-between",
-                      height: "100%"
-                    },
-                    children: [
-                      /* @__PURE__ */ e(
-                        lt,
-                        {
-                          avatar: C && a,
-                          subheader: p && g,
-                          sx: { color: h.headerColor, p: 0 },
-                          title: m,
-                          titleTypographyProps: { fontSize: 15, fontWeight: 600, variant: "h3" }
-                        }
-                      ),
-                      /* @__PURE__ */ e(rt, { sx: { p: 0 }, children: !p && g }),
-                      !!o && /* @__PURE__ */ e(
-                        ot,
-                        {
-                          sx: {
-                            mt: "auto",
-                            p: 0
-                          },
-                          children: /* @__PURE__ */ e(
-                            U,
-                            {
-                              sx: (D) => ({
-                                color: h.buttonColor ? h.buttonColor : D.palette.primary.main,
-                                fontSize: 14,
-                                fontWeight: "bold",
-                                px: 28,
-                                fontFamily: D.typography.fontFamily,
-                                ...F
-                              }),
-                              children: o
-                            }
-                          )
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            )
-          }
-        )
-      }
-    );
-  }
-), ut = ({ beat: i }) => {
-  const [o, t] = te(je.UNCATEGORIZED);
-  return oe(() => {
-    i.primary_category_guid ? t(i.primary_category_guid) : i.category_guids?.length && t(i.category_guids[0]);
-  }, []), /* @__PURE__ */ e($e, { categoryGuid: o, size: 16, sx: { minWidth: 16 } });
-}, pt = ({ beat: i }) => {
-  const o = Ae(), t = _t(o);
+  children: l
+}) => /* @__PURE__ */ e(U.Provider, { value: { onEvent: i, onPageview: o, store: t, children: l }, children: l }), X = u.forwardRef(function({
+  actionText: o,
+  ariaLabel: t,
+  backgroundColor: l,
+  description: n,
+  heightOverrides: r,
+  icon: a,
+  isActiveCard: s,
+  isZeroState: h,
+  onCardClick: f = () => {
+  },
+  showIcon: p,
+  style: d = {},
+  title: E,
+  variant: c,
+  widthOverrides: C
+}, _) {
+  const R = j(), [O, I] = u.useState(!1), { cardStyle: m, linkTextStyle: T } = d, v = c ? m : { border: "none", boxShadow: "none", ...m }, M = /* @__PURE__ */ e(
+    Fe,
+    {
+      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(
-    Ye,
+    Z,
     {
-      categoryGuid: i.primary_category_guid || i.category_guids && i.category_guids[0] || "",
-      className: t,
-      merchantGuid: i.primary_merchant_guid || i.merchant_guids[0],
-      size: 16
+      "aria-hidden": !s,
+      "aria-label": t,
+      "aria-labelledby": "divButton",
+      "aria-roledescription": "slide",
+      ref: _,
+      role: "group",
+      sx: {
+        height: "100%",
+        minWidth: C ? `${C}px` : "100%",
+        fontFamily: R.typography.fontFamily
+      },
+      children: /* @__PURE__ */ e(
+        Z,
+        {
+          "aria-hidden": !s,
+          "aria-label": t,
+          id: "divButton",
+          onClick: () => f(),
+          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: s ? 0 : -1,
+          children: /* @__PURE__ */ e(
+            $e,
+            {
+              "aria-roledescription": "slide",
+              className: "mx-micro-card",
+              role: "group",
+              sx: {
+                backgroundColor: l,
+                boxSizing: "border-box",
+                cursor: "pointer",
+                height: r ? "100%" : 124,
+                p: 16,
+                ...v,
+                "& .MuiCardHeader-avatar": {
+                  mr: "8px"
+                }
+              },
+              variant: c,
+              children: /* @__PURE__ */ g(
+                k,
+                {
+                  sx: {
+                    alignItems: "space-between",
+                    height: "100%"
+                  },
+                  children: [
+                    /* @__PURE__ */ e(
+                      Xe,
+                      {
+                        avatar: p && a,
+                        subheader: h && M,
+                        sx: { p: 0 },
+                        title: E,
+                        titleTypographyProps: { fontSize: 15, fontWeight: 600, variant: "h3" }
+                      }
+                    ),
+                    /* @__PURE__ */ e(je, { sx: { p: 0 }, children: !h && M }),
+                    !!o && /* @__PURE__ */ e(
+                      Ye,
+                      {
+                        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
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        }
+      )
     }
   );
-}, _t = (i) => Xe({
-  marginTop: i.Spacing.XTiny,
-  "& .kyper-categoryicon": {
-    display: "flex"
-  }
-}), Ct = G(pt), ft = ({
+}), lt = ({ beat: i }) => {
+  const { primary_category_guid: o, category_guids: t } = i, l = o || t?.[0] || Pe.UNCATEGORIZED;
+  return /* @__PURE__ */ e(Be, { categoryGuid: l, size: 16, sx: { minWidth: 16 } });
+}, nt = ({ beat: i }) => {
+  const { category_guids: o, merchant_guids: t, primary_category_guid: l, primary_merchant_guid: n } = i;
+  return /* @__PURE__ */ e(
+    Ze,
+    {
+      categoryGuid: l || o && o[0] || "",
+      merchantGuid: n || t[0],
+      size: 16,
+      sx: {
+        display: "flex",
+        mt: 2
+      }
+    }
+  );
+}, rt = ({
   color: i = "currentColor",
   height: o,
   size: t = 16,
-  styles: r,
+  styles: l,
   viewBox: n = "0 0 16 16",
-  width: l
+  width: r
 }) => /* @__PURE__ */ e(
   "svg",
   {
@@ -435,9 +424,9 @@ const $ = u.createContext(null), Et = ({
     className: "kyper-icon",
     focusable: !1,
     height: o || t,
-    style: r,
+    style: l,
     viewBox: n,
-    width: l || t,
+    width: r || t,
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ e(
       "path",
@@ -447,18 +436,18 @@ const $ = u.createContext(null), Et = ({
       }
     )
   }
-), mt = (i) => i ? i.data ? i.data.map((o) => {
+), at = (i) => i ? i.data ? i.data.map((o) => {
   const t = {};
-  return i.names?.map((r, n) => {
-    t[r] = o[n];
+  return i.names?.map((l, n) => {
+    t[l] = o[n];
   }), t;
-}) : [] : [], Rt = (i, o) => {
-  const t = mt(i), r = t.length / 2, n = t.slice(0, r), l = t.slice(r);
-  return !n.length || !l.length ? o.Color.Primary300 : n[0].amount > l[0].amount ? o.Color.Error300 : n[0].amount < l[0].amount ? o.Color.Success300 : o.Color.Primary300;
-}, gt = ({ beat: i }) => {
-  const o = Ae(), t = Rt(i.data_series, o);
-  return /* @__PURE__ */ e(ie, { name: "bar_chart", sx: { color: t } });
-}, De = () => /* @__PURE__ */ v("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
+}) : [] : [], ct = (i, o) => {
+  const t = at(i), l = t.length / 2, n = t.slice(0, l), r = t.slice(l);
+  return !n.length || !r.length ? o.palette.primary.main : n[0].amount > r[0].amount ? o.palette.error.main : n[0].amount < r[0].amount ? o.palette.success.main : o.palette.primary.main;
+}, st = ({ beat: i }) => {
+  const o = j(), t = ct(i.data_series, o);
+  return /* @__PURE__ */ e(Ve, { sx: { color: t } });
+}, Se = () => /* @__PURE__ */ g("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ e(
     "path",
     {
@@ -702,7 +691,7 @@ const $ = u.createContext(null), Et = ({
       fillRule: "evenodd"
     }
   ),
-  /* @__PURE__ */ v("g", { filter: "url(#filter0_d_1565_98011)", children: [
+  /* @__PURE__ */ g("g", { filter: "url(#filter0_d_1565_98011)", children: [
     /* @__PURE__ */ e("mask", { height: "22", id: "mask1_1565_98011", maskUnits: "userSpaceOnUse", width: "17", x: "16", y: "12", children: /* @__PURE__ */ e(
       "path",
       {
@@ -958,10 +947,10 @@ const $ = u.createContext(null), Et = ({
     ),
     /* @__PURE__ */ e("path", { d: "M17.9668 31.5737H19.4947", stroke: "#E4E8EE", strokeWidth: "0.264005" })
   ] }),
-  /* @__PURE__ */ v("g", { filter: "url(#filter1_d_1565_98011)", children: [
+  /* @__PURE__ */ g("g", { filter: "url(#filter1_d_1565_98011)", children: [
     /* @__PURE__ */ e("circle", { cx: "15.0441", cy: "16.0441", fill: "#CDD3DD", r: "15.0441" }),
     /* @__PURE__ */ e("mask", { height: "30", id: "mask2_1565_98011", maskUnits: "userSpaceOnUse", width: "30", x: "0", y: "1", children: /* @__PURE__ */ e("circle", { cx: "15.0435", cy: "16.0445", fill: "#F8F9FB", r: "14.3951" }) }),
-    /* @__PURE__ */ v("g", { mask: "url(#mask2_1565_98011)", children: [
+    /* @__PURE__ */ g("g", { mask: "url(#mask2_1565_98011)", children: [
       /* @__PURE__ */ e("rect", { fill: "white", height: "31.1359", transform: "translate(0 0.162598)", width: "31.0101" }),
       /* @__PURE__ */ e("rect", { fill: "#A8B1BD", height: "3.0172", rx: "0.167622", width: "3.0172", x: "3.26953", y: "4.52002" }),
       /* @__PURE__ */ e("rect", { fill: "#A8B1BD", height: "3.0172", rx: "0.167622", width: "3.0172", x: "3.26953", y: "17.1758" }),
@@ -1151,8 +1140,8 @@ const $ = u.createContext(null), Et = ({
       fill: "#CDD3DD"
     }
   ),
-  /* @__PURE__ */ v("defs", { children: [
-    /* @__PURE__ */ v(
+  /* @__PURE__ */ g("defs", { children: [
+    /* @__PURE__ */ g(
       "filter",
       {
         colorInterpolationFilters: "sRGB",
@@ -1195,7 +1184,7 @@ const $ = u.createContext(null), Et = ({
         ]
       }
     ),
-    /* @__PURE__ */ v(
+    /* @__PURE__ */ g(
       "filter",
       {
         colorInterpolationFilters: "sRGB",
@@ -1239,145 +1228,133 @@ const $ = u.createContext(null), Et = ({
       }
     )
   ] })
-] }), ve = ({ beat: i, clientColorScheme: o, color: t, type: r }) => {
-  const n = se(), l = o?.primary_300 ? o.primary_300 : n.palette.primary.main;
-  return r === 0 ? /* @__PURE__ */ e(ie, { fill: !0, name: "error", sx: { color: t || l } }) : r === 1 && i ? /* @__PURE__ */ e(ut, { beat: i }) : r === 2 && i ? /* @__PURE__ */ e(Ct, { beat: i }) : r === 3 && i ? /* @__PURE__ */ e(gt, { beat: i }) : r === 5 && i ? /* @__PURE__ */ e(ie, { name: "campaign" }) : /* @__PURE__ */ e(
-    ie,
+] }), dt = ({ beat: i }) => {
+  const { icon_type: o, icon_color: t } = i;
+  return o === 0 ? /* @__PURE__ */ e(ae, { filled: !0, sx: { color: (l) => t || l.palette.primary.main } }) : o === 1 ? /* @__PURE__ */ e(lt, { beat: i }) : o === 2 ? /* @__PURE__ */ e(nt, { beat: i }) : o === 3 ? /* @__PURE__ */ e(st, { beat: i }) : o === 5 ? /* @__PURE__ */ e(Ne, {}) : /* @__PURE__ */ e(
+    ae,
     {
-      fill: !0,
-      name: "info",
+      filled: !0,
       sx: {
-        color: l
+        color: (l) => l.palette.primary.main
       }
     }
   );
-}, k = () => {
-  const i = u.useContext($);
+}, V = () => {
+  const i = u.useContext(U);
   if (!i)
     throw new Error("useCopyStore() must be used within the InsightsMicroWidgetDataProvider");
   return i.store.copyStore;
-}, It = () => {
-  const i = u.useContext($);
+}, Et = () => {
+  const i = u.useContext(U);
   if (!i?.store?.insightsMicroWidgetStore)
     throw new Error(
       "useInsightsMicroWidgetStore() must be used within the InsightsMicroWidgetDataProvider"
     );
   return i.store.insightsMicroWidgetStore;
-}, Y = () => {
-  const i = u.useContext($);
+}, z = () => {
+  const i = u.useContext(U);
   if (!i)
     throw new Error("useEvent() must be used within the InsightsMicroWidgetDataProvider");
   return { onEvent: i.onEvent };
-}, Le = () => {
-  const i = u.useContext($);
+}, Me = () => {
+  const i = u.useContext(U);
   if (!i)
     throw new Error("usePageview() must be used within the InsightsMicroWidgetDataProvider");
   return { onPageview: i.onPageview };
-}, Ne = {
+}, ht = {
   LARGE: 180,
   STANDARD: 154,
   XLARGE: 200,
   XXLARGE: 248
-}, yt = 50, Ve = 1, vt = ({
+}, ut = 50, Ae = 1, pt = ({
   ariaLabel: i,
   backgroundColor: o,
   beat: t,
-  clientColorScheme: r,
-  showCTAColocatedWithText: n = !0,
-  heightOverrides: l,
-  index: a,
-  isActiveCard: d,
-  onCardClick: p,
-  posthog: _,
-  showIcon: C,
-  variant: f,
-  widthOverrides: h
+  showCTAColocatedWithText: l = !0,
+  heightOverrides: n,
+  index: r,
+  isActiveCard: a,
+  onCardClick: s,
+  posthog: h,
+  showIcon: f,
+  variant: p,
+  widthOverrides: d
 }) => {
-  const { ref: m, inView: c } = Me({
-    threshold: Ve
-  }), { cardsCopy: E } = k(), { onEvent: R } = Y(), { updateBeat: I, updateOffer: x } = It();
-  oe(() => {
-    c && (t.has_been_displayed ? R(We(t.template)) : (t.guid.startsWith("OFR") ? x({
+  const { ref: E, inView: c } = me({
+    threshold: Ae
+  }), { cardsCopy: C } = V(), { onEvent: _ } = z(), { updateBeat: R, updateOffer: O } = Et();
+  te(() => {
+    c && (t.has_been_displayed ? _(Ie(t.template)) : (t.guid.startsWith("OFR") ? O({
       ...t,
       has_been_displayed: !0
-    }) : I({
+    }) : R({
       ...t,
       has_been_displayed: !0
-    }), R(we(t.template))));
-  }, [c]), oe(() => {
+    }), _(ve(t.template))));
+  }, [c]), te(() => {
     if (c && t)
       if (t.template === "MarketingOffer") {
-        const y = t;
-        _?.capture("viewed_messaging_insight", {
+        const m = t;
+        h?.capture("viewed_messaging_insight", {
           template: t.template,
-          campaign_guid: y.campaign_guid,
-          campaign_name: y.pulse_campaign_name
+          campaign_guid: m.campaign_guid,
+          campaign_name: m.pulse_campaign_name
         });
       } else
-        _?.capture("viewed_insight", {
+        h?.capture("viewed_insight", {
           beat_guid: t.guid,
           template: t.template,
-          position: a
+          position: r
         });
-  }, [t, a, c]);
-  const O = () => {
-    if (p && p(t), R(Te(t.template)), t.template === "MarketingOffer") {
-      const y = t;
-      _?.capture("clicked_messaging_insight", {
+  }, [t, r, c]);
+  const I = () => {
+    if (s && s(t), _(ge(t.template)), t.template === "MarketingOffer") {
+      const m = t;
+      h?.capture("clicked_messaging_insight", {
         template: t.template,
-        campaign_guid: y.campaign_guid,
-        campaign_name: y.pulse_campaign_name
+        campaign_guid: m.campaign_guid,
+        campaign_name: m.pulse_campaign_name
       });
     } else
-      _?.capture("clicked_insight", {
+      h?.capture("clicked_insight", {
         beat_guid: t.guid,
         template: t.template,
-        position: a
+        position: r
       });
   };
   return /* @__PURE__ */ e(
-    re,
+    X,
     {
-      actionText: t.micro_call_to_action || E.micro_card_cta,
+      actionText: t.micro_call_to_action || C.micro_card_cta,
       ariaLabel: i,
       backgroundColor: o,
       description: t?.html_micro_description && t?.html_micro_description.length > 0 ? t.html_micro_description : t.html_description,
-      fontColors: { buttonColor: r?.primary_300 },
-      heightOverrides: l,
-      icon: ve && /* @__PURE__ */ e(
-        ve,
-        {
-          beat: t,
-          clientColorScheme: r,
-          color: t?.icon_color,
-          type: t?.icon_type
-        }
-      ),
-      isActiveCard: d,
-      onCardClick: O,
-      posthog: _,
-      ref: m,
-      showCTAColocatedWithText: n,
-      showIcon: C,
+      heightOverrides: n,
+      icon: /* @__PURE__ */ e(dt, { beat: t }),
+      isActiveCard: a,
+      onCardClick: I,
+      posthog: h,
+      ref: E,
+      showCTAColocatedWithText: l,
+      showIcon: f,
       title: t.micro_title && t.micro_title.length > 0 ? t.micro_title : t.title,
-      variant: f,
-      widthOverrides: h
+      variant: p,
+      widthOverrides: d
     }
   );
-}, St = ({
-  clientColorScheme: i,
-  currentBeatIndex: o,
-  numBeats: t,
-  onNextClick: r,
-  onPreviousClick: n,
-  scrollRightBoundary: l,
-  scrollX: a,
-  shouldApplyNewAnimation: d = !1,
-  visibleCardsCount: p = 1
+}, _t = ({
+  currentBeatIndex: i,
+  numBeats: o,
+  onNextClick: t,
+  onPreviousClick: l,
+  scrollRightBoundary: n,
+  scrollX: r,
+  shouldApplyDotAnimation: a = !1,
+  visibleCardsCount: s = 1
 }) => {
-  const _ = ze(), { carouselCopy: C } = k(), f = Math.floor(a) > l || o - p + 1 === 0, h = a < 0 || t - 1 === o, m = _.palette.grey[500], c = i?.primary_300 ?? _.palette.primary.main;
-  return /* @__PURE__ */ v(
-    K,
+  const h = j(), { carouselCopy: f } = V(), p = Math.floor(r) > n || i - s + 1 === 0, d = r < 0 || o - 1 === i, E = h.palette.grey[500], c = h.palette.primary.main;
+  return /* @__PURE__ */ g(
+    k,
     {
       direction: "row",
       sx: {
@@ -1392,34 +1369,34 @@ const $ = u.createContext(null), Et = ({
       },
       children: [
         /* @__PURE__ */ e(
-          pe,
+          ce,
           {
-            "aria-disabled": f,
-            "aria-label": C.previous_insight_cta_aria,
-            disabled: f,
-            onClick: n,
+            "aria-disabled": p,
+            "aria-label": f.previous_insight_cta_aria,
+            disabled: p,
+            onClick: l,
             children: /* @__PURE__ */ e(
-              be,
+              He,
               {
-                style: {
-                  color: f ? m : c
+                sx: {
+                  color: p ? E : c
                 }
               }
             )
           }
         ),
-        Array.from({ length: t }).map((E, R) => {
-          const I = R === o;
+        Array.from({ length: o }).map((C, _) => {
+          const R = _ === i;
           return /* @__PURE__ */ e(
-            U,
+            Z,
             {
               className: "mx-insights-micro-carousel-dots",
               sx: {
-                bgcolor: I ? c : m,
+                bgcolor: R ? c : E,
                 height: 8,
                 mr: 8,
                 // existing comment from meganthan "we were using `gap` instead of margin, but it doesn't work in safari browsers older than iOS 14.1"
-                ...d ? {
+                ...a ? {
                   borderRadius: "4px",
                   transformOrigin: "center",
                   transition: "all 0.5s ease-out",
@@ -1428,24 +1405,24 @@ const $ = u.createContext(null), Et = ({
                   borderRadius: "50%",
                   p: 0
                 },
-                width: I && d ? 24 : 8
+                width: R && a ? 24 : 8
               }
             },
-            `carousel-button-${R}`
+            `carousel-button-${_}`
           );
         }),
         /* @__PURE__ */ e(
-          pe,
+          ce,
           {
-            "aria-disabled": h,
-            "aria-label": C.next_insight_cta_aria,
-            disabled: h,
-            onClick: r,
+            "aria-disabled": d,
+            "aria-label": f.next_insight_cta_aria,
+            disabled: d,
+            onClick: t,
             children: /* @__PURE__ */ e(
-              Se,
+              Ce,
               {
-                style: {
-                  color: h ? m : c
+                sx: {
+                  color: d ? E : c
                 }
               }
             )
@@ -1454,115 +1431,154 @@ const $ = u.createContext(null), Et = ({
       ]
     }
   );
-}, Mt = ({
+}, ft = ({
+  activeCardIndex: i,
+  beats: o,
+  cardWidth: t,
+  showCTAColocatedWithText: l,
+  heightOverrides: n,
+  onCardClick: r,
+  posthog: a,
+  showIcon: s,
+  variant: h
+}) => {
+  const { carouselCopy: f } = V(), p = {
+    showCTAColocatedWithText: l,
+    heightOverrides: n,
+    posthog: a,
+    showIcon: s,
+    variant: h
+  };
+  return /* @__PURE__ */ g(xe, { children: [
+    o.map((d, E) => {
+      const c = E + 1, C = o.length + 1, _ = be(
+        f.card_position_in_carousel_aria,
+        c.toString(),
+        C.toString()
+      ), R = d.micro_title && d.micro_title.length > 0, O = d.micro_description && d.micro_description.length > 0, I = R ? d.micro_title : d.title, m = O ? d.micro_description : d.description;
+      return /* @__PURE__ */ e(
+        pt,
+        {
+          ariaLabel: `${_}: ${I}, ${m}`,
+          beat: d,
+          index: E,
+          isActiveCard: E === i,
+          onCardClick: r,
+          widthOverrides: t || void 0,
+          ...p
+        },
+        `${d.guid} ${E}`
+      );
+    }),
+    /* @__PURE__ */ e(
+      Mt,
+      {
+        isActiveCard: i === o.length,
+        onCardClick: r,
+        widthOverrides: t || void 0,
+        ...p
+      }
+    )
+  ] });
+}, Ct = ({
   analyticsMetadata: i,
   allowSingleCardPeeking: o = !1,
   beats: t = [],
-  clientColorScheme: r,
-  showCTAColocatedWithText: n,
-  heightOverrides: l,
-  onCardClick: a,
-  posthog: d,
-  shouldApplyNewAnimation: p = !1,
-  showCarouselControls: _,
-  showIcon: C,
+  showCTAColocatedWithText: l,
+  heightOverrides: n,
+  onCardClick: r,
+  posthog: a,
+  showCarouselControls: s,
+  showIcon: h,
   showWithMargin: f = !0,
-  variant: h,
-  widthOverrides: m,
-  visibleCardsCount: c = 1
+  variant: p,
+  widthOverrides: d,
+  visibleCardsCount: E = 1
   // Default to 1 card visible
 }) => {
-  const E = u.useRef(null), R = u.useRef(null), [I, x] = u.useState(0), [O, y] = u.useState(null), [F, z] = u.useState(null), [g, D] = u.useState(null), [b, B] = u.useState(p), { carouselCopy: j } = k(), { onEvent: Z } = Y();
+  const c = u.useRef(null), C = u.useRef(null), [_, R] = u.useState(0), [O, I] = u.useState(null), [m, T] = u.useState(null), [v, M] = u.useState(null), { carouselCopy: W } = V(), { onEvent: F } = z();
   u.useEffect(() => {
-    if (E.current && !o) {
-      const s = E.current.offsetWidth, A = 8;
-      let N;
-      if (c > 1) {
-        const J = (s - (c - 1) * A) / c / 3;
-        N = (s - J - (c - 1) * A) / c;
+    if (c.current && !o) {
+      const A = c.current.offsetWidth, b = 8;
+      let B;
+      if (E > 1) {
+        const ne = (A - (E - 1) * b) / E / 3;
+        B = (A - ne - (E - 1) * b) / E;
       } else
-        N = s;
-      D(N);
+        B = A;
+      M(B);
     }
-  }, [c, E.current?.offsetWidth]), u.useEffect(() => {
-    const s = R.current?.offsetWidth;
-    if (typeof s == "number" && o) {
-      const A = (P) => {
-        B(!0);
-        const ee = [
+  }, [E, c.current?.offsetWidth]), u.useEffect(() => {
+    const A = C.current?.offsetWidth;
+    if (typeof A == "number" && o) {
+      const b = (G) => {
+        const re = [
           { maxWidth: 375, cardWidth: 268 },
           { maxWidth: 444, cardWidth: 300 },
           { maxWidth: 599, cardWidth: 350 },
           { maxWidth: 749, cardWidth: 450 },
           { maxWidth: 900, cardWidth: 600 }
-        ].find((ce) => P <= ce.maxWidth);
-        return ee ? ee.cardWidth : 750;
+        ].find((we) => G <= we.maxWidth);
+        return re ? re.cardWidth : 750;
       };
-      D(A(s));
-      const N = () => {
-        const P = R.current?.offsetWidth;
-        typeof P == "number" && D(A(P));
+      M(b(A));
+      const B = () => {
+        const G = C.current?.offsetWidth;
+        typeof G == "number" && M(b(G));
       };
-      return window.addEventListener("resize", N), () => {
-        window.removeEventListener("resize", N);
+      return window.addEventListener("resize", B), () => {
+        window.removeEventListener("resize", B);
       };
     }
-  }, [o, R]);
-  const X = () => {
-    Z(M.ON_CAROUSEL_FORWARD_CLICK, i), E.current && g && E.current.scrollTo({
-      left: I + g + 8,
+  }, [o, C]);
+  const K = () => {
+    F(S.ON_CAROUSEL_FORWARD_CLICK, i), c.current && v && c.current.scrollTo({
+      left: _ + v + 8,
       top: 0,
       behavior: "smooth"
     });
-  }, le = () => {
-    Z(M.ON_CAROUSEL_BACK_CLICK, i), E.current && g && E.current.scrollTo({
-      left: Math.max(0, I - (g + 8)),
+  }, $ = () => {
+    F(S.ON_CAROUSEL_BACK_CLICK, i), c.current && v && c.current.scrollTo({
+      left: Math.max(0, _ - (v + 8)),
       top: 0,
       behavior: "smooth"
     });
-  }, ne = () => {
-    E.current && x(E.current.scrollLeft);
   }, Q = () => {
-    if (!F || !O) return;
-    F - O > yt ? Z(M.ON_CAROUSEL_FORWARD_SWIPE, i) : Z(M.ON_CAROUSEL_BACK_SWIPE, i);
-  }, q = (s) => {
-    y(s.targetTouches[0].clientX);
-  }, L = (s) => {
-    y(null), z(s.targetTouches[0].clientX);
-  }, ue = {
-    clientColorScheme: r,
-    showCTAColocatedWithText: n,
-    heightOverrides: l,
-    posthog: d,
-    showIcon: C,
-    variant: h
-  }, ae = g ? Math.round(I / (g + 8)) : 0, Fe = E.current ? E.current.scrollWidth - E.current.offsetWidth : 0;
-  return /* @__PURE__ */ v(
-    K,
+    c.current && R(c.current.scrollLeft);
+  }, q = () => {
+    if (!m || !O) return;
+    m - O > ut ? F(S.ON_CAROUSEL_FORWARD_SWIPE, i) : F(S.ON_CAROUSEL_BACK_SWIPE, i);
+  }, J = (A) => {
+    I(A.targetTouches[0].clientX);
+  }, Y = (A) => {
+    I(null), T(A.targetTouches[0].clientX);
+  }, w = v ? Math.round(_ / (v + 8)) : 0, We = c.current ? c.current.scrollWidth - c.current.offsetWidth : 0;
+  return /* @__PURE__ */ g(
+    k,
     {
-      "aria-label": j.carousel_title,
+      "aria-label": W.carousel_title,
       "aria-roledescription": "carousel",
-      ref: R,
+      ref: C,
       role: "group/region",
       sx: {
         alignItems: "center",
         boxSizing: "border-box",
-        height: l,
-        width: m || "100%"
+        height: n,
+        width: d || "100%"
       },
       children: [
-        /* @__PURE__ */ v(
-          K,
+        /* @__PURE__ */ e(
+          k,
           {
             direction: "row",
-            onScroll: ne,
-            onTouchEnd: Q,
-            onTouchMove: q,
-            onTouchStart: L,
-            ref: E,
+            onScroll: Q,
+            onTouchEnd: q,
+            onTouchMove: J,
+            onTouchStart: Y,
+            ref: c,
             sx: {
               alignItems: "center",
-              height: l && "100%",
+              height: n && "100%",
               gap: 8,
               listStyleType: "none",
               m: 0,
@@ -1577,68 +1593,49 @@ const $ = u.createContext(null), Et = ({
                 display: "none"
               }
             },
-            children: [
-              t.map((s, A) => {
-                const N = A + 1, P = t.length + 1, J = Qe(
-                  j.card_position_in_carousel_aria,
-                  N.toString(),
-                  P.toString()
-                ), ee = s.micro_title && s.micro_title.length > 0, ce = s.micro_description && s.micro_description.length > 0, Be = ee ? s.micro_title : s.title, Ze = ce ? s.micro_description : s.description;
-                return /* @__PURE__ */ e(
-                  vt,
-                  {
-                    ariaLabel: `${J}: ${Be}, ${Ze}`,
-                    beat: s,
-                    index: A,
-                    isActiveCard: A === ae,
-                    onCardClick: a,
-                    widthOverrides: g || void 0,
-                    ...ue
-                  },
-                  `${s.guid} ${A}`
-                );
-              }),
-              /* @__PURE__ */ e(
-                Lt,
-                {
-                  isActiveCard: ae === t.length,
-                  onCardClick: a,
-                  widthOverrides: g || void 0,
-                  ...ue
-                }
-              )
-            ]
+            children: /* @__PURE__ */ e(
+              ft,
+              {
+                activeCardIndex: w,
+                beats: t,
+                cardWidth: v,
+                heightOverrides: n,
+                onCardClick: r,
+                posthog: a,
+                showCTAColocatedWithText: l,
+                showIcon: h,
+                variant: p
+              }
+            )
           }
         ),
-        _ && /* @__PURE__ */ e(
-          St,
+        s && /* @__PURE__ */ e(
+          _t,
           {
-            clientColorScheme: r,
-            currentBeatIndex: ae + c - 1,
+            currentBeatIndex: w + E - 1,
             numBeats: t.length + 1,
-            onNextClick: X,
-            onPreviousClick: le,
-            scrollRightBoundary: Fe,
-            scrollX: I,
-            shouldApplyNewAnimation: b,
-            visibleCardsCount: c
+            onNextClick: K,
+            onPreviousClick: $,
+            scrollRightBoundary: We,
+            scrollX: _,
+            shouldApplyDotAnimation: o,
+            visibleCardsCount: E
           }
         )
       ]
     }
   );
-}, At = G(Mt), Ot = ({
+}, mt = P(Ct), Rt = ({
   analyticsMetadata: i,
-  clientColorScheme: o,
-  onCardClick: t,
-  posthog: r,
-  widthOverrides: n
+  onCardClick: o,
+  posthog: t,
+  widthOverrides: l
 }) => {
-  const { carouselCopy: l } = k(), { onEvent: a } = Y(), d = () => {
-    a && (a(M.ON_VIEW_MORE_CLICKED, i), t(), r?.capture("clicked_view_more"));
+  const { carouselCopy: n } = V(), { onEvent: r } = z(), a = () => {
+    r && (r(S.ON_VIEW_MORE_CLICKED, i), o(), t?.capture("clicked_view_more"));
   };
-  return l ? /* @__PURE__ */ v(
-    K,
+  return n ? /* @__PURE__ */ g(
+    k,
     {
       alignItems: "center",
       direction: "row",
@@ -1646,48 +1643,48 @@ const $ = u.createContext(null), Et = ({
       spacing: 2,
       sx: {
         padding: 16,
-        width: n || void 0
+        width: l || void 0
       },
       children: [
         /* @__PURE__ */ e(
-          Ge,
+          Le,
           {
-            sx: {
-              color: o?.primary_300,
+            sx: (s) => ({
+              color: s.palette.primary.main,
               fontSize: 18,
               fontWeight: 700,
               lineHeight: "24px"
-            },
+            }),
             variant: "h3",
-            children: l.carousel_title
+            children: n.carousel_title
           }
         ),
         /* @__PURE__ */ e(
-          Pe,
+          De,
           {
-            endIcon: /* @__PURE__ */ e(Se, { size: 20 }),
-            onClick: d,
+            endIcon: /* @__PURE__ */ e(Ce, { size: 20 }),
+            onClick: a,
             size: "small",
-            sx: {
-              color: o?.primary_300
-            },
+            sx: (s) => ({
+              color: s.palette.primary.main
+            }),
             variant: "text",
-            children: l.view_all_insights_in_full_feed_cta_aria
+            children: n.view_all_insights_in_full_feed_cta_aria
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ e(Ue, {});
-}, Tt = G(Ot), Wt = ({
+  ) : /* @__PURE__ */ e(ke, {});
+}, gt = P(Rt), It = ({
   heightOverrides: i,
   widthOverrides: o,
   children: t
 }) => {
-  const { carouselCopy: r } = k();
+  const { carouselCopy: l } = V();
   return /* @__PURE__ */ e(
-    U,
+    Z,
     {
-      "aria-label": r?.carousel_title,
+      "aria-label": l?.carousel_title,
       "aria-roledescription": "carousel",
       role: "group",
       sx: {
@@ -1699,104 +1696,72 @@ const $ = u.createContext(null), Et = ({
       children: t
     }
   );
-}, He = ({
+}, Oe = ({
   ariaLabel: i,
-  carouselSize: o,
-  clientColorScheme: t,
-  heightOverrides: r,
-  onCardClick: n,
+  heightOverrides: o,
+  onCardClick: t,
   posthog: l,
-  showIcon: a,
-  showWithMargin: d,
-  variant: p,
-  widthOverrides: _
+  showIcon: n,
+  variant: r
 }) => {
-  const { cardsCopy: C } = k(), { onEvent: f } = Y(), { onPageview: h } = Le();
+  const { cardsCopy: a } = V(), { onEvent: s } = z(), { onPageview: h } = Me();
   u.useEffect(() => {
     h(H.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
   }, []);
-  const m = () => {
-    n && n(), f(M.ON_NO_RELEVANT_INSIGHTS_CLICKED), l?.capture("clicked_insight", {
+  const f = () => {
+    t && t(), s(S.ON_NO_RELEVANT_INSIGHTS_CLICKED), l?.capture("clicked_insight", {
       template: "no_relevant_insights"
     });
   };
   return /* @__PURE__ */ e(
-    re,
+    X,
     {
-      actionText: C.micro_card_cta,
+      actionText: a.micro_card_cta,
       ariaLabel: i,
-      description: C.no_relevant_insights_card_description,
-      fontColors: { buttonColor: t?.primary_300 },
-      heightOverrides: r,
-      icon: /* @__PURE__ */ e(De, {}),
+      description: a.no_relevant_insights_card_description,
+      heightOverrides: o,
+      icon: /* @__PURE__ */ e(Se, {}),
       isZeroState: !0,
-      onCardClick: m,
+      onCardClick: f,
       posthog: l,
-      showIcon: a,
+      showIcon: n,
       style: {
-        cardStyle: {
-          card: {
-            height: `calc(${Ne[o]}px - 44px)`,
-            m: "0 auto",
-            width: d ? "calc(100% - 32px)" : "100%"
-          },
-          description: {
-            WebkitLineClamp: 4
-          }
-        },
         linkTextStyle: {
           ml: 48
         }
       },
-      title: C.no_relevant_insights_card_title,
-      variant: p,
-      widthOverrides: _
+      title: a.no_relevant_insights_card_title,
+      variant: r
     }
   );
-}, li = G(He), ke = ({
+}, jt = P(Oe), Te = ({
   ariaLabel: i,
-  carouselSize: o,
-  heightOverrides: t,
-  onCardClick: r,
-  posthog: n,
-  showIcon: l,
-  showWithMargin: a,
-  variant: d,
-  widthOverrides: p
+  heightOverrides: o,
+  onCardClick: t,
+  posthog: l,
+  showIcon: n,
+  variant: r
 }) => {
-  const { onPageview: _ } = Le(), { zeroStateCopy: C } = k();
+  const { onPageview: a } = Me(), { zeroStateCopy: s } = V();
   return u.useEffect(() => {
-    _(H.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
+    a(H.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
   }, []), /* @__PURE__ */ e(
-    re,
+    X,
     {
       ariaLabel: i,
-      description: C.carousel_zero_state_description,
-      heightOverrides: t,
-      icon: /* @__PURE__ */ e(De, {}),
+      description: s.carousel_zero_state_description,
+      heightOverrides: o,
+      icon: /* @__PURE__ */ e(Se, {}),
       isZeroState: !0,
-      onCardClick: r,
-      posthog: n,
-      showIcon: l,
-      style: {
-        cardStyle: {
-          card: {
-            height: `calc(${Ne[o]}px - 44px)`,
-            m: "0 auto",
-            width: a ? "calc(100% - 32px)" : "100%"
-          },
-          description: {
-            WebkitLineClamp: 4
-          }
-        }
-      },
-      title: C.carousel_zero_state_title,
-      variant: d,
-      widthOverrides: p
+      onCardClick: t,
+      posthog: l,
+      showIcon: n,
+      title: s.carousel_zero_state_title,
+      variant: r
     }
   );
-}, ni = G(ke), wt = () => /* @__PURE__ */ e(
-  U,
+}, Xt = P(Te), vt = () => /* @__PURE__ */ e(
+  Z,
   {
     sx: {
       alignItems: "center",
@@ -1805,148 +1770,160 @@ const $ = u.createContext(null), Et = ({
       justifyContent: "center",
       width: "100%"
     },
-    children: /* @__PURE__ */ e(qe, {})
+    children: /* @__PURE__ */ e(Ge, {})
   }
-), V = new ht(), xt = ({
+), N = new it(), yt = ({
   allowSingleCardPeeking: i,
   areBeatsLoading: o,
   beats: t = [],
   // This also determines the length of the carousel controls (beat.length + 1)
-  clientColorScheme: r,
-  // Allows certain icons, view all and read more button to reflect the clients color scheme. Currently only supports primary_300
-  showCTAColocatedWithText: n = !0,
-  endpoint: l = "/",
-  heightOverrides: a,
-  logOutUser: d,
-  onCardClick: p = () => {
+  showCTAColocatedWithText: l = !0,
+  endpoint: n = "/",
+  heightOverrides: r,
+  logOutUser: a,
+  onCardClick: s = () => {
   },
-  onEvent: _ = () => {
+  onEvent: h = () => {
   },
-  onPageview: C = () => {
+  onPageview: f = () => {
   },
-  posthog: f,
-  shouldApplyNewAnimation: h = !1,
-  showBorder: m = !0,
-  showCarouselControls: c,
-  showHeader: E,
-  showIcon: R,
-  showWithMargin: I = !0,
-  token: x = "",
-  useDarkMode: O,
-  userHasFullInsightFeedBeats: y,
-  variant: F,
-  visibleCardsCount: z = 1,
-  widthOverrides: g
+  posthog: p,
+  showBorder: d = !0,
+  showCarouselControls: E,
+  showHeader: c,
+  showIcon: C,
+  showWithMargin: _ = !0,
+  token: R = "",
+  userHasFullInsightFeedBeats: O,
+  variant: I,
+  visibleCardsCount: m = 1,
+  widthOverrides: T
 }) => {
-  const [D, b] = te("STANDARD"), [B, j] = te(!1), [Z, X] = te(!1), le = et([_], V), ne = tt([C], V);
+  const [v, M] = ee("STANDARD"), [W, F] = ee(!1), [K, $] = ee(!1), Q = ze([h], N), q = Ke([f], N);
   u.useEffect(() => {
-    !V.isInitialized && !Z && (V.initialize(l, x, d).catch(() => X(!1)), X(!0));
-  }, [l, x, d, V.isInitialized, Z]), u.useEffect(() => {
-    const L = window.innerHeight;
-    L < 180 ? b("STANDARD") : L >= 180 && L < 200 ? b("LARGE") : L >= 200 && L < 248 ? b("XLARGE") : L >= 248 && b("XXLARGE");
+    !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");
   }, [window.innerHeight]), u.useEffect(() => {
-    j(!o && V.isInitialized);
-  }, [o, V.isInitialized]);
-  const Q = {
-    showCTAColocatedWithText: n,
-    heightOverrides: a,
-    onCardClick: p,
-    posthog: f,
-    showIcon: R,
-    showWithMargin: I,
-    useDarkMode: O,
-    widthOverrides: g
-  }, q = {
-    carouselSize: D,
-    variant: F,
-    ...Q
+    F(!o && N.isInitialized);
+  }, [o, N.isInitialized]);
+  const J = {
+    showCTAColocatedWithText: l,
+    heightOverrides: r,
+    onCardClick: s,
+    posthog: p,
+    showIcon: C,
+    showWithMargin: _,
+    widthOverrides: T
+  }, Y = {
+    carouselSize: v,
+    variant: I,
+    showCTAColocatedWithText: l,
+    heightOverrides: r,
+    onCardClick: s,
+    posthog: p,
+    showIcon: C
   };
-  return /* @__PURE__ */ e(Et, { onEvent: le, onPageview: ne, store: V, children: /* @__PURE__ */ v(Wt, { heightOverrides: a, widthOverrides: g, children: [
-    !B && /* @__PURE__ */ e(wt, {}),
-    B && E && /* @__PURE__ */ e(
-      Tt,
+  return /* @__PURE__ */ e(ot, { onEvent: Q, onPageview: q, store: N, children: /* @__PURE__ */ g(It, { heightOverrides: r, widthOverrides: T, children: [
+    !W && /* @__PURE__ */ e(vt, {}),
+    W && c && /* @__PURE__ */ e(
+      gt,
       {
-        analyticsMetadata: fe,
-        clientColorScheme: r,
-        onCardClick: p,
-        posthog: f,
-        widthOverrides: g
+        analyticsMetadata: Ee,
+        onCardClick: s,
+        posthog: p,
+        widthOverrides: T
       }
     ),
-    B && !!t.length && /* @__PURE__ */ e(
-      At,
+    W && !!t.length && /* @__PURE__ */ e(
+      mt,
       {
         allowSingleCardPeeking: i,
-        analyticsMetadata: fe,
+        analyticsMetadata: Ee,
         beats: t,
-        clientColorScheme: r,
-        shouldApplyNewAnimation: h,
-        showCarouselControls: c,
-        variant: m ? F : void 0,
-        visibleCardsCount: z,
-        ...Q
+        showCarouselControls: E,
+        variant: d ? I : void 0,
+        visibleCardsCount: m,
+        ...J
       }
     ),
-    B && !t.length && y && /* @__PURE__ */ e(He, { clientColorScheme: r, ...q }),
-    B && !t.length && !y && /* @__PURE__ */ e(ke, { ...q })
+    W && !t.length && /* @__PURE__ */ e(
+      k,
+      {
+        sx: {
+          alignItems: "center",
+          height: r,
+          width: T || "100%"
+        },
+        children: /* @__PURE__ */ e(
+          k,
+          {
+            sx: {
+              height: `calc(${ht[v]}px - 44px)`,
+              width: _ ? `calc(${T}px - 32px)` : "100%"
+            },
+            children: O ? /* @__PURE__ */ e(Oe, { ...Y }) : /* @__PURE__ */ e(Te, { ...Y })
+          }
+        )
+      }
+    )
   ] }) });
-}, ai = G(xt), Dt = ({
+}, Qt = P(yt), St = ({
   isActiveCard: i,
   ariaLabel: o,
-  clientColorScheme: t,
-  heightOverrides: r,
-  onCardClick: n,
-  posthog: l,
-  showIcon: a,
-  variant: d,
-  widthOverrides: p
+  heightOverrides: t,
+  onCardClick: l,
+  posthog: n,
+  showIcon: r,
+  variant: a,
+  widthOverrides: s
 }) => {
-  const _ = se(), { ref: C, inView: f } = Me({
-    threshold: Ve
-  }), { cardsCopy: h } = k(), { onEvent: m } = Y();
-  oe(() => {
-    f && (m(xe.ON_VIEW_MORE_VIEWED), l?.capture("viewed_insight", {
+  const h = j(), { ref: f, inView: p } = me({
+    threshold: Ae
+  }), { cardsCopy: d } = V(), { onEvent: E } = z();
+  te(() => {
+    p && (E(ye.ON_VIEW_MORE_VIEWED), n?.capture("viewed_insight", {
       template: "view_more_card"
     }));
-  }, [f]);
+  }, [p]);
   const c = () => {
-    n && n(), m(M.ON_VIEW_MORE_CLICKED), l?.capture("clicked_insight", {
+    l && l(), E(S.ON_VIEW_MORE_CLICKED), n?.capture("clicked_insight", {
       template: "view_more_card"
     });
   };
   return /* @__PURE__ */ e(
-    re,
+    X,
     {
-      actionText: h.micro_card_cta,
+      actionText: d.micro_card_cta,
       ariaLabel: o,
-      description: h.view_more_card_description,
-      fontColors: { buttonColor: t?.primary_300 },
-      heightOverrides: r,
-      icon: /* @__PURE__ */ e(ft, { color: t?.primary_300 ?? _.palette.primary.main }),
+      description: d.view_more_card_description,
+      heightOverrides: t,
+      icon: /* @__PURE__ */ e(rt, { color: h.palette.primary.main }),
       isActiveCard: i,
       onCardClick: c,
-      posthog: l,
-      ref: C,
-      showIcon: a,
-      title: h.view_more_card_title,
-      variant: d,
-      widthOverrides: p
+      posthog: n,
+      ref: f,
+      showIcon: r,
+      title: d.view_more_card_title,
+      variant: a,
+      widthOverrides: s
     }
   );
-}, Lt = G(Dt);
+}, Mt = P(St);
 export {
-  ht as A,
-  vt as B,
-  Tt as C,
-  Et as I,
-  At as M,
-  li as N,
-  fe as T,
-  Lt as V,
-  ni as Z,
-  re as a,
-  ai as b,
-  ft as c,
-  gt as d,
-  De as e
+  it as A,
+  X as B,
+  gt as C,
+  ot as I,
+  mt as M,
+  jt as N,
+  Ee as T,
+  Mt as V,
+  Xt as Z,
+  pt as a,
+  Qt as b,
+  rt as c,
+  st as d,
+  Se as e
 };