@mx-cartographer/experiences 8.0.0-alpha.sms2 → 9.0.0-alpha.mega1

package/dist/ViewMoreMicroCard-CDWR16_h.mjs

@@ -0,0 +1,1147 @@
+import { jsx as i, jsxs as L, Fragment as Se } from "react/jsx-runtime";
+import h, { useEffect as ie, useState as oe } from "react";
+import { observer as U } from "mobx-react-lite";
+import N from "@mui/material/Stack";
+import ne from "@mui/material/Button";
+import { CategoryIcon as be, MerchantLogo as Pe, P as _e, Text as ue, H3 as Be } from "@mxenabled/mxui";
+import { Icon as Ve, Close as Ge, ChevronLeft as ke, ChevronRight as fe } from "@mxenabled/mx-icons";
+import { L as ze } from "./Loader-BSWSYqvn.mjs";
+import Q from "@mui/material/Box";
+import re from "@mui/material/IconButton";
+import { alpha as T, useTheme as H } from "@mui/material/styles";
+import { useInView as Te } from "react-intersection-observer";
+import Ue from "@mui/material/styles/useTheme";
+import { b as Ke } from "./Category-Ccoew_sA.mjs";
+import { b as Fe } from "./Localization-2MODESHW.mjs";
+import He from "@mui/material/CircularProgress";
+import { makeAutoObservable as ae, runInAction as Re } from "mobx";
+import { G as pe, a as $e, u as je, b as Ye } from "./useCombineEvents-CRwX-qWE.mjs";
+import { B as he } from "./BeatApi-De2IaqH2.mjs";
+import { u as Xe } from "./useWidgetLoadTimer-CrUzxN-P.mjs";
+import Ze from "@mui/material/Card";
+import Qe from "@mui/material/CardActionArea";
+import qe from "@mui/material/Avatar";
+const me = {
+  featureVersion: "spendVsIncomeTrends"
+};
+class Je {
+  copyApi = new pe("/", "");
+  copyObject = {};
+  namespace = "experiences";
+  translationKey = "micro_insights";
+  constructor() {
+    ae(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 (e, o) => {
+    this.copyApi = new pe(e, o), await this.loadCopy();
+  };
+  loadCopy = async () => {
+    const e = await this.copyApi.getGlobalCopy(this.namespace, this.translationKey);
+    Re(() => {
+      this.copyObject = e[this.translationKey];
+    });
+  };
+  get cardsCopy() {
+    return this.copyObject.cards;
+  }
+  get carouselCopy() {
+    return this.copyObject.carousel;
+  }
+  get zeroStateCopy() {
+    return this.copyObject.zero_state;
+  }
+}
+const se = {
+  BillAmountNotStandard: "BillAmountNotStandard",
+  CanadianUpcomingDeadlineAlert: "CanadianUpcomingDeadlineAlert",
+  DuplicatePaymentV2: "DuplicatePaymentV2",
+  IntroducePulse: "IntroducePulse",
+  LargeTransaction: "LargeTransaction",
+  MonthlySpendToIncomeComparisonV2: "MonthlySpendToIncomeComparisonV2",
+  QuarterlySummary: "QuarterlySummary",
+  SpendingPlanCategorySpending: "SpendingPlanCategorySpending",
+  SubscriptionPriceIncrease: "SubscriptionPriceIncrease",
+  UncategorizedTransactionsV2: "UncategorizedTransactionsV2",
+  UpcomingBill: "UpcomingBill",
+  UnifiedDeposit: "UnifiedDeposit",
+  WeeklySpendingPlanSummary: "WeeklySpendingPlanSummary",
+  WeeklyNewMerchantsV2: "WeeklyNewMerchantsV2",
+  MonthlySpendComparison: "MonthlySpendComparison",
+  MonthlySpendToIncomeComparison: "MonthlySpendToIncomeComparison"
+}, O = window?.app?.clientConfig?.microwidget_instance_id || "", Ce = {
+  INSIGHTS_MICRO_WIDGET: "/micro-insights-carousel"
+}, Oe = (t) => `on${t}Click`, ye = (t) => `on${t}View`, We = (t) => `on${t}ViewFirstTime`, ce = (t) => t.replace(/([a-z])([A-Z])/g, "$1 $2"), et = () => Object.values(se).reduce(
+  (t, e) => ({
+    ...t,
+    [Oe(e)]: {
+      action: P.MICRO_BEAT_CLICKED,
+      category: b.BEAT_INTERACTION,
+      label: ce(e),
+      value: O
+    }
+  }),
+  {}
+), tt = () => Object.values(se).reduce(
+  (t, e) => ({
+    ...t,
+    [ye(e)]: {
+      action: P.MICRO_BEAT_DISPLAYED,
+      category: b.BEAT_INTERACTION,
+      label: ce(e),
+      value: O
+    }
+  }),
+  {}
+), ot = () => Object.values(se).reduce(
+  (t, e) => ({
+    ...t,
+    [We(e)]: {
+      action: P.MICRO_BEAT_DISPLAYED_FIRST_TIME,
+      category: b.BEAT_INTERACTION,
+      label: ce(e),
+      value: O
+    }
+  }),
+  {}
+), x = {
+  CAROUSEL_CONTROL: "Carousel Control",
+  MICRO_WIDGET: "Micro Widget",
+  VIEW_MORE: "View More"
+}, b = {
+  MICRO_WIDGET_INTERACTION: "Micro Widget Interaction",
+  BEAT_INTERACTION: "Beat Interaction"
+}, y = {
+  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"
+}, Ne = {
+  ON_VIEW_MORE_VIEWED: "onViewMoreCardView"
+}, P = {
+  CONTROL_BACKWARD: "Control Backward",
+  CONTROL_FORWARD: "Control Forward",
+  MICRO_BEAT_CLICKED: "Micro Beat Clicked",
+  MICRO_BEAT_DISPLAYED: "Micro Beat Displayed",
+  MICRO_BEAT_DISPLAYED_FIRST_TIME: "Micro Beat Displayed For First Time",
+  SWIPE_BACKWARD: "Swipe Backward",
+  SWIPE_FORWARD: "Swipe Forward"
+}, k = {
+  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"
+}, Ee = {
+  [k.MICRO_WIDGET_CAROUSEL]: {
+    label: x.MICRO_WIDGET,
+    name: k.MICRO_WIDGET_CAROUSEL,
+    path: Ce.INSIGHTS_MICRO_WIDGET,
+    value: O
+  },
+  // zero state
+  [k.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
+    label: x.MICRO_WIDGET,
+    name: k.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
+    path: Ce.INSIGHTS_MICRO_WIDGET,
+    value: O
+  },
+  // no relevant cards
+  [k.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
+    label: x.MICRO_WIDGET,
+    name: k.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
+    path: "/micro-widget",
+    value: O
+  }
+}, ge = {
+  // carousel control interaction events - clicks and swipes
+  [y.ON_CAROUSEL_BACK_CLICK]: {
+    action: P.CONTROL_BACKWARD,
+    category: b.MICRO_WIDGET_INTERACTION,
+    label: x.CAROUSEL_CONTROL,
+    value: O
+  },
+  [y.ON_CAROUSEL_FORWARD_CLICK]: {
+    action: P.CONTROL_FORWARD,
+    category: b.MICRO_WIDGET_INTERACTION,
+    label: x.CAROUSEL_CONTROL,
+    value: O
+  },
+  [y.ON_CAROUSEL_BACK_SWIPE]: {
+    action: P.SWIPE_BACKWARD,
+    category: b.MICRO_WIDGET_INTERACTION,
+    label: x.CAROUSEL_CONTROL,
+    value: O
+  },
+  [y.ON_CAROUSEL_FORWARD_SWIPE]: {
+    action: P.SWIPE_FORWARD,
+    category: b.MICRO_WIDGET_INTERACTION,
+    label: x.CAROUSEL_CONTROL,
+    value: O
+  },
+  // read more card events
+  [y.ON_VIEW_MORE_CLICKED]: {
+    action: P.MICRO_BEAT_CLICKED,
+    category: b.BEAT_INTERACTION,
+    label: x.VIEW_MORE,
+    value: O
+  },
+  [Ne.ON_VIEW_MORE_VIEWED]: {
+    action: P.MICRO_BEAT_DISPLAYED,
+    category: b.BEAT_INTERACTION,
+    label: x.VIEW_MORE,
+    value: O
+  },
+  ...et(),
+  ...tt(),
+  ...ot()
+}, Ie = async (t, e) => !e || !ge[t] ? null : e.sendAnalyticEvent(ge[t]).then((o) => o).catch((o) => {
+  throw o;
+}), Ae = async (t, e) => !e || !Ee[t] ? null : e.sendAnalyticsPageview(Ee[t]).then((o) => o).catch((o) => {
+  throw o;
+});
+class it {
+  onAnalyticEvent = Ie;
+  onAnalyticPageView = Ae;
+  beatApi = new he("/", "");
+  constructor() {
+    ae(this);
+  }
+  initialize = async (e, o, n) => {
+    this.onAnalyticEvent = (r, a) => {
+      Ie(r, a).then((s) => s).catch((s) => {
+        throw s.status === 401 && n(), s;
+      });
+    }, this.onAnalyticPageView = (r, a) => {
+      Ae(r, a).then((s) => s).catch((s) => {
+        throw s.status === 401 && n(), s;
+      });
+    }, this.beatApi = new he(e, o);
+  };
+  updateBeat = async (e) => {
+    this.beatApi.updateBeat(e);
+  };
+  updateOffer = async (e) => {
+    this.beatApi.updateOffer(e);
+  };
+}
+class nt {
+  copyStore;
+  endpoint = "/";
+  insightsMicroWidgetStore;
+  session = null;
+  token = "";
+  isInitialized = !1;
+  constructor() {
+    this.copyStore = new Je(), this.insightsMicroWidgetStore = new it(), ae(this);
+  }
+  initialize = async (e, o, n) => {
+    await this.copyStore.initialize(e, o), await this.insightsMicroWidgetStore.initialize(e, o, n);
+    const r = await $e(e, o, "1.0.0", "Micro Insights Carousel");
+    Re(() => {
+      this.session = r, this.isInitialized = !0;
+    });
+  };
+}
+const $ = h.createContext(null), rt = ({
+  onEvent: t,
+  onPageview: e,
+  store: o,
+  children: n
+}) => /* @__PURE__ */ i($.Provider, { value: { onEvent: t, onPageview: e, store: o, children: n }, children: n }), at = ({ beat: t }) => {
+  const { primary_category_guid: e, category_guids: o } = t, n = e || o?.[0] || Ke.UNCATEGORIZED;
+  return /* @__PURE__ */ i(be, { categoryGuid: n, size: 32, sx: { minWidth: 32 } });
+}, R = ({
+  bgColor: t,
+  name: e,
+  iconColor: o = "primary"
+}) => /* @__PURE__ */ i(
+  qe,
+  {
+    sx: {
+      bgcolor: t,
+      width: 32,
+      height: 32
+    },
+    variant: "rounded",
+    children: /* @__PURE__ */ i(Ve, { color: o, fill: !0, name: e, size: 20 })
+  }
+), st = ({ beat: t }) => {
+  const { category_guids: e, merchant_guids: o, primary_category_guid: n, primary_merchant_guid: r } = t;
+  return /* @__PURE__ */ i(
+    Pe,
+    {
+      categoryGuid: n || e && e[0] || "",
+      merchantGuid: r || o[0],
+      size: 32,
+      sx: {
+        display: "flex",
+        mt: 2,
+        minWidth: 32
+      }
+    }
+  );
+}, ct = (t) => t ? t.data ? t.data.map((e) => {
+  const o = {};
+  return t.names?.map((n, r) => {
+    o[n] = e[r];
+  }), o;
+}) : [] : [], lt = (t) => {
+  const e = ct(t), o = e.length / 2, n = e.slice(0, o), r = e.slice(o);
+  return !n.length || !r.length ? "primary" : n[0].amount > r[0].amount ? "error" : n[0].amount < r[0].amount ? "success" : "primary";
+}, dt = ({ beat: t }) => {
+  const e = Ue(), o = lt(t.data_series), n = e.palette[o].main;
+  return /* @__PURE__ */ i(R, { bgColor: T(n, 0.15), iconColor: o, name: "bar_chart" });
+}, _t = {
+  0: (t, e) => /* @__PURE__ */ i(R, { bgColor: T(e.palette.primary.main, 0.15), name: "error" }),
+  1: (t) => /* @__PURE__ */ i(at, { beat: t }),
+  2: (t) => /* @__PURE__ */ i(st, { beat: t }),
+  3: (t) => /* @__PURE__ */ i(dt, { beat: t }),
+  4: (t, e) => /* @__PURE__ */ i(
+    R,
+    {
+      bgColor: T(e.palette.secondary.main, 0.15),
+      iconColor: "secondary",
+      name: "info"
+    }
+  ),
+  5: (t, e) => /* @__PURE__ */ i(R, { bgColor: T(e.palette.primary.main, 0.15), name: "campaign" }),
+  // TODO: Waiting for the backend to accommodate icon types 6, 7, 8, and 9
+  6: (t, e) => /* @__PURE__ */ i(
+    R,
+    {
+      bgColor: T(e.palette.success.main, 0.15),
+      iconColor: "success",
+      name: "check_circle"
+    }
+  ),
+  7: (t, e) => /* @__PURE__ */ i(R, { bgColor: T(e.palette.primary.main, 0.15), name: "today" }),
+  8: (t, e) => /* @__PURE__ */ i(R, { bgColor: T(e.palette.primary.main, 0.15), name: "calendar_clock" }),
+  9: (t, e) => /* @__PURE__ */ i(R, { bgColor: T(e.palette.primary.main, 0.15), name: "celebration" })
+}, ut = ({ beat: t }) => {
+  const e = H(), { icon_type: o } = t, n = o != null ? _t[o] : null;
+  return n ? n(t, e) : /* @__PURE__ */ i(R, { bgColor: T(e.palette.primary.main, 0.15), name: "error" });
+}, B = () => {
+  const t = h.useContext($);
+  if (!t)
+    throw new Error("useCopyStore() must be used within the InsightsMicroWidgetDataProvider");
+  return t.store.copyStore;
+}, pt = () => {
+  const t = h.useContext($);
+  if (!t?.store?.insightsMicroWidgetStore)
+    throw new Error(
+      "useInsightsMicroWidgetStore() must be used within the InsightsMicroWidgetDataProvider"
+    );
+  return t.store.insightsMicroWidgetStore;
+}, j = () => {
+  const t = h.useContext($);
+  if (!t)
+    throw new Error("useEvent() must be used within the InsightsMicroWidgetDataProvider");
+  return { onEvent: t.onEvent };
+}, Me = () => {
+  const t = h.useContext($);
+  if (!t)
+    throw new Error("usePageview() must be used within the InsightsMicroWidgetDataProvider");
+  return { onPageview: t.onPageview };
+}, ht = {
+  LARGE: 180,
+  STANDARD: 154,
+  XLARGE: 200,
+  XXLARGE: 248
+}, mt = 50, we = 1, q = h.forwardRef(
+  function({
+    ariaLabel: e,
+    cardSx: o,
+    closeAriaLabel: n,
+    description: r,
+    icon: a,
+    isActiveCard: s,
+    hasCardEffect: p = !1,
+    heightOverrides: m,
+    onClose: C,
+    onCardClick: _,
+    onPrimaryAction: c,
+    onSecondaryAction: d,
+    primaryActionText: l,
+    secondaryActionText: g,
+    title: E,
+    variant: A,
+    widthOverrides: I,
+    ...D
+  }, V) {
+    const S = !!(c && l), f = !!(d && g), M = p ? Ze : Q, w = /* @__PURE__ */ L(Se, { children: [
+      C && /* @__PURE__ */ i(
+        re,
+        {
+          "aria-label": n,
+          onClick: (u) => {
+            u.stopPropagation(), C?.();
+          },
+          onMouseDown: (u) => {
+            u.stopPropagation();
+          },
+          onTouchStart: (u) => {
+            u.stopPropagation();
+          },
+          sx: { minHeight: 40, minWidth: 40, position: "absolute", right: 4, top: 4 },
+          children: /* @__PURE__ */ i(Ge, {})
+        }
+      ),
+      /* @__PURE__ */ L(N, { sx: { gap: 6, height: "100%", justifyContent: "space-between" }, children: [
+        /* @__PURE__ */ L(N, { sx: { flexDirection: "row", gap: 12 }, children: [
+          a && a,
+          /* @__PURE__ */ L(N, { sx: { gap: 6 }, children: [
+            /* @__PURE__ */ i(N, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: /* @__PURE__ */ i(_e, { bold: !0, sx: { lineHeight: "16px" }, variant: "body1", children: E }) }),
+            /* @__PURE__ */ i(
+              _e,
+              {
+                dangerouslySetInnerHTML: { __html: r },
+                sx: {
+                  display: "-webkit-box",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  WebkitBoxOrient: "vertical",
+                  WebkitLineClamp: S ? 2 : 3
+                },
+                variant: "subtitle2"
+              }
+            )
+          ] })
+        ] }),
+        S && /* @__PURE__ */ L(
+          N,
+          {
+            sx: {
+              alignItems: "center",
+              flexDirection: "row",
+              height: 28,
+              pb: 4,
+              pl: a ? 36 : 0
+            },
+            children: [
+              S && /* @__PURE__ */ i(
+                ne,
+                {
+                  onClick: (u) => {
+                    u.stopPropagation(), c?.();
+                  },
+                  onMouseDown: (u) => {
+                    u.stopPropagation();
+                  },
+                  onTouchStart: (u) => {
+                    u.stopPropagation();
+                  },
+                  size: "small",
+                  sx: { px: a ? 8 : 0 },
+                  variant: "text",
+                  children: /* @__PURE__ */ i(ue, { bold: !0, variant: "body2", children: l })
+                }
+              ),
+              f && /* @__PURE__ */ i(
+                ne,
+                {
+                  onClick: (u) => {
+                    u.stopPropagation(), d?.();
+                  },
+                  onMouseDown: (u) => {
+                    u.stopPropagation();
+                  },
+                  onTouchStart: (u) => {
+                    u.stopPropagation();
+                  },
+                  size: "small",
+                  sx: { px: 8 },
+                  variant: "text",
+                  children: /* @__PURE__ */ i(ue, { bold: !0, sx: { color: "text.secondary" }, variant: "body2", children: g })
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    ] });
+    return /* @__PURE__ */ i(
+      M,
+      {
+        "aria-hidden": !s,
+        "aria-label": e,
+        ref: V,
+        role: "group",
+        sx: {
+          backgroundColor: "background.paper",
+          height: m ? "100%" : 124,
+          minWidth: I ? `${I}px` : "100%",
+          position: "relative",
+          ...o
+        },
+        tabIndex: _ || !s ? -1 : 0,
+        variant: A,
+        ...D,
+        children: _ ? /* @__PURE__ */ i(
+          Qe,
+          {
+            onClick: _,
+            sx: {
+              pb: 8,
+              pt: 16,
+              px: 16,
+              height: m ? "100%" : 124
+            },
+            children: w
+          }
+        ) : w
+      }
+    );
+  }
+), Ct = ({
+  ariaLabel: t,
+  beat: e,
+  index: o,
+  isActiveCard: n,
+  onCardClick: r,
+  posthog: a,
+  widthOverrides: s,
+  variant: p,
+  showIcon: m,
+  heightOverrides: C
+}) => {
+  const { ref: _, inView: c } = Te({
+    threshold: we
+  }), { cardsCopy: d } = B(), { onEvent: l } = j(), { updateBeat: g, updateOffer: E } = pt();
+  ie(() => {
+    c && (e.has_been_displayed ? l(ye(e.template)) : (e.guid.startsWith("OFR") ? E({
+      ...e,
+      has_been_displayed: !0
+    }) : g({
+      ...e,
+      has_been_displayed: !0
+    }), l(We(e.template))));
+  }, [c]), ie(() => {
+    if (c && e)
+      if (e.template === "MarketingOffer") {
+        const I = e;
+        a?.capture("viewed_messaging_insight", {
+          template: e.template,
+          campaign_guid: I.campaign_guid,
+          campaign_name: I.pulse_campaign_name
+        });
+      } else
+        a?.capture("viewed_insight", {
+          beat_guid: e.guid,
+          template: e.template,
+          position: o
+        });
+  }, [e, o, c]);
+  const A = () => {
+    if (r && r(e), l(Oe(e.template)), e.template === "MarketingOffer") {
+      const I = e;
+      a?.capture("clicked_messaging_insight", {
+        template: e.template,
+        campaign_guid: I.campaign_guid,
+        campaign_name: I.pulse_campaign_name
+      });
+    } else
+      a?.capture("clicked_insight", {
+        beat_guid: e.guid,
+        template: e.template,
+        position: o
+      });
+  };
+  return /* @__PURE__ */ i(
+    q,
+    {
+      "aria-roledescription": "slide",
+      ariaLabel: t,
+      cardSx: {
+        borderRadius: 2
+      },
+      description: e?.html_micro_description && e?.html_micro_description.length > 0 ? e.html_micro_description : e.html_description || "",
+      hasCardEffect: !0,
+      heightOverrides: C,
+      icon: m && /* @__PURE__ */ i(ut, { beat: e }),
+      isActiveCard: n,
+      onCardClick: A,
+      onPrimaryAction: A,
+      primaryActionText: e.micro_call_to_action || d.micro_card_cta,
+      ref: _,
+      title: e.micro_title && e.micro_title.length > 0 ? e.micro_title : e.title,
+      variant: p,
+      widthOverrides: s
+    }
+  );
+}, Et = ({
+  currentBeatIndex: t,
+  numBeats: e,
+  onNextClick: o,
+  onPreviousClick: n,
+  scrollRightBoundary: r,
+  scrollX: a,
+  shouldApplyDotAnimation: s = !1,
+  visibleCardsCount: p = 1
+}) => {
+  const m = H(), { carouselCopy: C } = B(), _ = Math.floor(a) > r || t - p + 1 === 0, c = a < 0 || e - 1 === t, d = m.palette.grey[500], l = m.palette.primary.main;
+  return /* @__PURE__ */ L(
+    N,
+    {
+      direction: "row",
+      sx: {
+        alignItems: "center",
+        justifyContent: "center",
+        pt: 4,
+        width: "100%",
+        // we were using `gap` instead of margin, but it doesn't work in safari browsers older than iOS 14.1
+        "& button:first-child": {
+          mr: 8
+        }
+      },
+      children: [
+        /* @__PURE__ */ i(
+          re,
+          {
+            "aria-disabled": _,
+            "aria-label": C.previous_insight_cta_aria,
+            disabled: _,
+            onClick: n,
+            children: /* @__PURE__ */ i(
+              ke,
+              {
+                style: {
+                  color: _ ? d : l
+                }
+              }
+            )
+          }
+        ),
+        Array.from({ length: e }).map((g, E) => {
+          const A = E === t;
+          return /* @__PURE__ */ i(
+            Q,
+            {
+              className: "mx-insights-micro-carousel-dots",
+              sx: {
+                bgcolor: A ? l : d,
+                height: 8,
+                mr: 8,
+                // existing comment from meganthan "we were using `gap` instead of margin, but it doesn't work in safari browsers older than iOS 14.1"
+                ...s ? {
+                  borderRadius: "4px",
+                  transformOrigin: "center",
+                  transition: "all 0.5s ease-out",
+                  willChange: "width, background-color"
+                } : {
+                  borderRadius: "50%",
+                  p: 0
+                },
+                width: A && s ? 24 : 8
+              }
+            },
+            `carousel-button-${E}`
+          );
+        }),
+        /* @__PURE__ */ i(
+          re,
+          {
+            "aria-disabled": c,
+            "aria-label": C.next_insight_cta_aria,
+            disabled: c,
+            onClick: o,
+            children: /* @__PURE__ */ i(
+              fe,
+              {
+                style: {
+                  color: c ? d : l
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, gt = ({
+  activeCardIndex: t,
+  beats: e,
+  cardWidth: o,
+  showCTAColocatedWithText: n,
+  heightOverrides: r,
+  onCardClick: a,
+  posthog: s,
+  showIcon: p,
+  variant: m
+}) => {
+  const { carouselCopy: C } = B(), _ = {
+    showCTAColocatedWithText: n,
+    heightOverrides: r,
+    posthog: s,
+    showIcon: p,
+    variant: m
+  };
+  return /* @__PURE__ */ L(Se, { children: [
+    e.map((c, d) => {
+      const l = d + 1, g = e.length + 1, E = Fe(
+        C.card_position_in_carousel_aria,
+        l.toString(),
+        g.toString()
+      ), A = c.micro_title && c.micro_title.length > 0, I = c.micro_description && c.micro_description.length > 0, D = A ? c.micro_title : c.title, V = I ? c.micro_description : c.description;
+      return /* @__PURE__ */ i(
+        Ct,
+        {
+          ariaLabel: `${E}: ${D}, ${V}`,
+          beat: c,
+          index: d,
+          isActiveCard: d === t,
+          onCardClick: a,
+          widthOverrides: o || void 0,
+          ..._
+        },
+        `${c.guid} ${d}`
+      );
+    }),
+    /* @__PURE__ */ i(
+      Wt,
+      {
+        isActiveCard: t === e.length,
+        onCardClick: a,
+        widthOverrides: o || void 0,
+        ..._
+      }
+    )
+  ] });
+}, It = ({
+  analyticsMetadata: t,
+  allowSingleCardPeeking: e = !1,
+  beats: o = [],
+  showCTAColocatedWithText: n,
+  heightOverrides: r,
+  onCardClick: a,
+  posthog: s,
+  showCarouselControls: p,
+  showIcon: m,
+  showWithMargin: C = !0,
+  variant: _,
+  widthOverrides: c,
+  visibleCardsCount: d = 1
+  // Default to 1 card visible
+}) => {
+  const l = h.useRef(null), g = h.useRef(null), [E, A] = h.useState(0), [I, D] = h.useState(null), [V, S] = h.useState(null), [f, M] = h.useState(null), { carouselCopy: w } = B(), { onEvent: u } = j();
+  h.useEffect(() => {
+    if (l.current && !e) {
+      const W = l.current.offsetWidth, K = 8;
+      let z;
+      if (d > 1) {
+        const le = (W - (d - 1) * K) / d / 3;
+        z = (W - le - (d - 1) * K) / d;
+      } else
+        z = W;
+      M(z);
+    }
+  }, [d, l.current?.offsetWidth]), h.useEffect(() => {
+    const W = g.current?.offsetWidth;
+    if (typeof W == "number" && e) {
+      const K = (F) => {
+        const de = [
+          { maxWidth: 375, cardWidth: 268 },
+          { maxWidth: 444, cardWidth: 300 },
+          { maxWidth: 599, cardWidth: 350 },
+          { maxWidth: 749, cardWidth: 450 },
+          { maxWidth: 900, cardWidth: 600 }
+        ].find((xe) => F <= xe.maxWidth);
+        return de ? de.cardWidth : 750;
+      };
+      M(K(W));
+      const z = () => {
+        const F = g.current?.offsetWidth;
+        typeof F == "number" && M(K(F));
+      };
+      return window.addEventListener("resize", z), () => {
+        window.removeEventListener("resize", z);
+      };
+    }
+  }, [e, g]);
+  const Y = () => {
+    u(y.ON_CAROUSEL_FORWARD_CLICK, t), l.current && f && l.current.scrollTo({
+      left: E + f + 8,
+      top: 0,
+      behavior: "smooth"
+    });
+  }, X = () => {
+    u(y.ON_CAROUSEL_BACK_CLICK, t), l.current && f && l.current.scrollTo({
+      left: Math.max(0, E - (f + 8)),
+      top: 0,
+      behavior: "smooth"
+    });
+  }, J = () => {
+    l.current && A(l.current.scrollLeft);
+  }, ee = () => {
+    if (!V || !I) return;
+    V - I > mt ? u(y.ON_CAROUSEL_FORWARD_SWIPE, t) : u(y.ON_CAROUSEL_BACK_SWIPE, t);
+  }, te = (W) => {
+    D(W.targetTouches[0].clientX);
+  }, Z = (W) => {
+    D(null), S(W.targetTouches[0].clientX);
+  }, v = f ? Math.round(E / (f + 8)) : 0, ve = l.current ? l.current.scrollWidth - l.current.offsetWidth : 0;
+  return /* @__PURE__ */ L(
+    N,
+    {
+      "aria-label": w.carousel_title,
+      "aria-roledescription": "carousel",
+      ref: g,
+      role: "group/region",
+      sx: {
+        alignItems: "center",
+        boxSizing: "border-box",
+        height: r,
+        width: c || "100%"
+      },
+      children: [
+        /* @__PURE__ */ i(
+          N,
+          {
+            direction: "row",
+            onScroll: J,
+            onTouchEnd: ee,
+            onTouchMove: te,
+            onTouchStart: Z,
+            ref: l,
+            sx: {
+              alignItems: "center",
+              height: r && "100%",
+              gap: 8,
+              listStyleType: "none",
+              m: 0,
+              maxWidth: C ? "calc(100% - 32px)" : "100%",
+              overflowX: "auto",
+              overflowY: "hidden",
+              p: 0,
+              scrollbarWidth: "none",
+              "-ms-overflow-style": "none",
+              "-webkit-overflow-scrolling": "touch",
+              "&::-webkit-scrollbar": {
+                display: "none"
+              }
+            },
+            children: /* @__PURE__ */ i(
+              gt,
+              {
+                activeCardIndex: v,
+                beats: o,
+                cardWidth: f,
+                heightOverrides: r,
+                onCardClick: a,
+                posthog: s,
+                showCTAColocatedWithText: n,
+                showIcon: m,
+                variant: _
+              }
+            )
+          }
+        ),
+        p && /* @__PURE__ */ i(
+          Et,
+          {
+            currentBeatIndex: v + d - 1,
+            numBeats: o.length + 1,
+            onNextClick: Y,
+            onPreviousClick: X,
+            scrollRightBoundary: ve,
+            scrollX: E,
+            shouldApplyDotAnimation: e,
+            visibleCardsCount: d
+          }
+        )
+      ]
+    }
+  );
+}, At = U(It), St = ({
+  analyticsMetadata: t,
+  onCardClick: e,
+  posthog: o,
+  widthOverrides: n
+}) => {
+  const { carouselCopy: r } = B(), { onEvent: a } = j(), s = () => {
+    a && (a(y.ON_VIEW_MORE_CLICKED, t), e(), o?.capture("clicked_view_more"));
+  };
+  return r ? /* @__PURE__ */ L(
+    N,
+    {
+      alignItems: "center",
+      direction: "row",
+      justifyContent: "space-between",
+      spacing: 2,
+      sx: {
+        p: 16,
+        pb: 8,
+        width: n || void 0
+      },
+      children: [
+        /* @__PURE__ */ i(Be, { children: r.carousel_title }),
+        /* @__PURE__ */ i(
+          ne,
+          {
+            endIcon: /* @__PURE__ */ i(fe, { size: 20 }),
+            onClick: s,
+            size: "small",
+            variant: "text",
+            children: r.view_all_insights_in_full_feed_cta_aria
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ i(ze, {});
+}, ft = U(St), Tt = ({
+  heightOverrides: t,
+  widthOverrides: e,
+  children: o
+}) => {
+  const { carouselCopy: n } = B();
+  return /* @__PURE__ */ i(
+    Q,
+    {
+      "aria-label": n?.carousel_title,
+      "aria-roledescription": "carousel",
+      role: "group",
+      sx: {
+        boxSizing: "border-box",
+        height: t ? void 0 : "100%",
+        m: "0 auto",
+        width: e ? void 0 : "100%"
+      },
+      children: o
+    }
+  );
+}, Le = ({
+  ariaLabel: t,
+  heightOverrides: e,
+  onCardClick: o,
+  posthog: n,
+  showIcon: r,
+  variant: a
+}) => {
+  const { cardsCopy: s } = B(), p = H(), { onEvent: m } = j(), { onPageview: C } = Me();
+  h.useEffect(() => {
+    C(k.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
+  }, []);
+  const _ = () => {
+    o && o(), m(y.ON_NO_RELEVANT_INSIGHTS_CLICKED), n?.capture("clicked_insight", {
+      template: "no_relevant_insights"
+    });
+  };
+  return /* @__PURE__ */ i(
+    q,
+    {
+      ariaLabel: t,
+      cardSx: {
+        borderRadius: 2
+      },
+      description: s.no_relevant_insights_card_description,
+      hasCardEffect: !0,
+      heightOverrides: e,
+      icon: r && /* @__PURE__ */ i(R, { bgColor: T(p.palette.primary.main, 0.15), name: "lightbulb" }),
+      onCardClick: _,
+      onPrimaryAction: _,
+      primaryActionText: s.micro_card_cta,
+      title: s.no_relevant_insights_card_title,
+      variant: a
+    }
+  );
+}, Qt = U(Le), De = ({
+  ariaLabel: t,
+  heightOverrides: e,
+  onCardClick: o,
+  showIcon: n,
+  variant: r
+}) => {
+  const { onPageview: a } = Me(), { zeroStateCopy: s } = B(), p = H();
+  return h.useEffect(() => {
+    a(k.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
+  }, []), /* @__PURE__ */ i(
+    q,
+    {
+      ariaLabel: t,
+      cardSx: {
+        borderRadius: 2
+      },
+      description: s.carousel_zero_state_description,
+      hasCardEffect: !0,
+      heightOverrides: e,
+      icon: n && /* @__PURE__ */ i(R, { bgColor: T(p.palette.primary.main, 0.15), name: "lightbulb" }),
+      onCardClick: o,
+      title: s.carousel_zero_state_title,
+      variant: r
+    }
+  );
+}, qt = U(De), Rt = () => /* @__PURE__ */ i(
+  Q,
+  {
+    sx: {
+      alignItems: "center",
+      display: "flex",
+      height: "100%",
+      justifyContent: "center",
+      width: "100%"
+    },
+    children: /* @__PURE__ */ i(He, {})
+  }
+), G = new nt(), Ot = ({
+  allowSingleCardPeeking: t,
+  areBeatsLoading: e,
+  beats: o = [],
+  // This also determines the length of the carousel controls (beat.length + 1)
+  showCTAColocatedWithText: n = !0,
+  endpoint: r = "/",
+  heightOverrides: a,
+  logOutUser: s,
+  onCardClick: p = () => {
+  },
+  onEvent: m = () => {
+  },
+  onPageview: C = () => {
+  },
+  posthog: _,
+  showBorder: c = !0,
+  showCarouselControls: d,
+  showHeader: l,
+  showIcon: g,
+  showWithMargin: E = !0,
+  token: A = "",
+  userHasFullInsightFeedBeats: I,
+  variant: D,
+  visibleCardsCount: V = 1,
+  widthOverrides: S
+}) => {
+  const [f, M] = oe("STANDARD"), [w, u] = oe(!1), [Y, X] = oe(!1), J = je([m], G), ee = Ye([C], G);
+  Xe({
+    widgetName: "InsightsMicroWidget",
+    isLoaded: w
+  }), h.useEffect(() => {
+    !G.isInitialized && !Y && (G.initialize(r, A, s).catch(() => X(!1)), X(!0));
+  }, [r, A, s, G.isInitialized, Y]), h.useEffect(() => {
+    const v = window.innerHeight;
+    v < 180 ? M("STANDARD") : v >= 180 && v < 200 ? M("LARGE") : v >= 200 && v < 248 ? M("XLARGE") : v >= 248 && M("XXLARGE");
+  }, [window.innerHeight]), h.useEffect(() => {
+    u(!e && G.isInitialized);
+  }, [e, G.isInitialized]);
+  const te = {
+    showCTAColocatedWithText: n,
+    heightOverrides: a,
+    onCardClick: p,
+    posthog: _,
+    showIcon: g,
+    showWithMargin: E,
+    widthOverrides: S
+  }, Z = {
+    carouselSize: f,
+    variant: D,
+    showCTAColocatedWithText: n,
+    heightOverrides: a,
+    onCardClick: p,
+    posthog: _,
+    showIcon: g
+  };
+  return /* @__PURE__ */ i(rt, { onEvent: J, onPageview: ee, store: G, children: /* @__PURE__ */ L(Tt, { heightOverrides: a, widthOverrides: S, children: [
+    !w && /* @__PURE__ */ i(Rt, {}),
+    w && l && /* @__PURE__ */ i(
+      ft,
+      {
+        analyticsMetadata: me,
+        onCardClick: p,
+        posthog: _,
+        widthOverrides: S
+      }
+    ),
+    w && !!o.length && /* @__PURE__ */ i(
+      At,
+      {
+        allowSingleCardPeeking: t,
+        analyticsMetadata: me,
+        beats: o,
+        showCarouselControls: d,
+        variant: c ? D : void 0,
+        visibleCardsCount: V,
+        ...te
+      }
+    ),
+    w && !o.length && /* @__PURE__ */ i(
+      N,
+      {
+        sx: {
+          alignItems: "center",
+          height: a,
+          width: S || "100%"
+        },
+        children: /* @__PURE__ */ i(
+          N,
+          {
+            sx: {
+              height: `calc(${ht[f]}px - 44px)`,
+              width: E ? `calc(${S}px - 32px)` : "100%"
+            },
+            children: I ? /* @__PURE__ */ i(Le, { ...Z }) : /* @__PURE__ */ i(De, { ...Z })
+          }
+        )
+      }
+    )
+  ] }) });
+}, Jt = U(Ot), yt = ({
+  ariaLabel: t,
+  heightOverrides: e,
+  isActiveCard: o,
+  onCardClick: n,
+  posthog: r,
+  widthOverrides: a,
+  showIcon: s,
+  variant: p
+}) => {
+  const m = H(), { ref: C, inView: _ } = Te({
+    threshold: we
+  }), { cardsCopy: c } = B(), { onEvent: d } = j();
+  ie(() => {
+    _ && (d(Ne.ON_VIEW_MORE_VIEWED), r?.capture("viewed_insight", {
+      template: "view_more_card"
+    }));
+  }, [_]);
+  const l = () => {
+    n && n(), d(y.ON_VIEW_MORE_CLICKED), r?.capture("clicked_insight", {
+      template: "view_more_card"
+    });
+  };
+  return /* @__PURE__ */ i(
+    q,
+    {
+      "aria-roledescription": "slide",
+      ariaLabel: t,
+      cardSx: {
+        borderRadius: 2
+      },
+      description: c.view_more_card_description,
+      hasCardEffect: !0,
+      heightOverrides: e,
+      icon: s && /* @__PURE__ */ i(R, { bgColor: T(m.palette.primary.main, 0.15), name: "show_chart" }),
+      isActiveCard: o,
+      onCardClick: l,
+      onPrimaryAction: l,
+      primaryActionText: c.micro_card_cta,
+      ref: C,
+      title: c.view_more_card_title,
+      variant: p,
+      widthOverrides: a
+    }
+  );
+}, Wt = U(yt);
+export {
+  nt as A,
+  R as B,
+  ft as C,
+  Ct as I,
+  At as M,
+  Qt as N,
+  me as T,
+  Wt as V,
+  qt as Z,
+  Jt as a,
+  rt as b,
+  q as c,
+  dt as d
+};