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

package/dist/ViewMoreMicroCard-CDWR16_h.mjs

@@ -1,1147 +0,0 @@
-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
-};