@mx-cartographer/experiences 8.0.0-alpha.test2 → 8.0.0-alpha.v2

package/dist/ViewMoreMicroCard-YHRLl08A.mjs

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