@mx-cartographer/experiences 4.0.14-alpha.JB0 → 4.0.14-alpha.JB2

package/dist/index.es17.js

@@ -0,0 +1,1904 @@
+import { makeAutoObservable as Q, runInAction as Ee } from "mobx";
+import "bowser";
+import { G as ie, b as ve, u as Se, a as Me } from "./useCombineEvents-CZUDHE96.mjs";
+import "date-fns/intlFormat";
+import { V as Ae, a6 as Oe } from "./ConnectMiniWidget-Ep65CtHH.mjs";
+import C, { useState as Y, useEffect as Z } from "react";
+import "@honeybadger-io/react";
+import "numeral";
+import "date-fns/addMonths";
+import "date-fns/addQuarters";
+import "date-fns/addWeeks";
+import "date-fns/addYears";
+import "date-fns/getDay";
+import "date-fns/isBefore";
+import "date-fns/nextDay";
+import "date-fns/setDate";
+import "date-fns/startOfToday";
+import "date-fns/fromUnixTime";
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import "@mui/material/Button";
+import { CategoryIcon as Te, useTokens as q, MerchantLogo as we, Icon as X, P as xe, createMXTheme as De } from "@kyper/mui";
+import "@mui/material/Tooltip";
+import J from "@mui/material/Box";
+import oe from "@mui/material/IconButton";
+import We from "@mui/material/styles/useTheme";
+import "@mui/material/useMediaQuery";
+import { css as U } from "@mxenabled/cssinjs";
+import "date-fns/addDays";
+import "date-fns/eachDayOfInterval";
+import "date-fns/eachWeekOfInterval";
+import "date-fns/endOfMonth";
+import "date-fns/format";
+import "date-fns/isSameMonth";
+import "date-fns/startOfMonth";
+import "date-fns/subMonths";
+import "@mui/material/Paper";
+import "@mui/icons-material/KeyboardArrowLeftRounded";
+import "@mui/icons-material/KeyboardArrowRightRounded";
+import "date-fns/isSameDay";
+import "date-fns/isWithinInterval";
+import "d3";
+import { ThemeProvider as Le } from "@mui/material/styles";
+import "@mui/x-charts";
+import Ne from "@mui/material/Stack";
+import "@mui/material";
+import "date-fns/differenceInCalendarDays";
+import "date-fns/endOfToday";
+import "date-fns/endOfYear";
+import "date-fns/startOfYear";
+import "date-fns/subDays";
+import "date-fns/subYears";
+import "@mui/material/ButtonGroup";
+import "@mui/material/Tab";
+import "@mui/material/Tabs";
+import "@mui/material/ToggleButton";
+import "@mui/material/ToggleButtonGroup";
+import "@mui/material/Dialog";
+import "@mui/material/DialogContent";
+import "@mui/icons-material/ArrowBackOutlined";
+import Ve from "@mui/material/Card";
+import He from "@mui/material/CardHeader";
+import "@mui/material/CardContent";
+import "uuid";
+import ke from "@mui/material/CircularProgress";
+import "@mui/material/FormControlLabel";
+import "@mui/material/Radio";
+import "@mui/material/Avatar";
+import "@mui/material/ListItem";
+import "@mui/material/ListItemAvatar";
+import "@mui/material/ListItemButton";
+import "@mui/material/ListItemText";
+import "@mui/material/ListItemIcon";
+import "date-fns/getUnixTime";
+import "date-fns/differenceInDays";
+import "@mui/x-data-grid-pro";
+import "date-fns";
+import "date-fns/getMonth";
+import "date-fns/isAfter";
+import "date-fns/parseISO";
+import "date-fns/subWeeks";
+import "date-fns/formatISO";
+import { B as re } from "./BeatApi-BxXgbSJY.mjs";
+import { useInView as ue } from "react-intersection-observer";
+import { observer as N } from "mobx-react-lite";
+import Fe from "@mui/icons-material/ChevronLeft";
+import he from "@mui/icons-material/ChevronRight";
+import Be from "@mui/material/CardActions";
+import Ze from "@mui/material/Link";
+import le from "@mui/material/Typography";
+import Pe from "@mui/material/CssBaseline";
+class Ge {
+  copyApi = new ie("/", "");
+  copyObject = {};
+  namespace = "experiences";
+  translationKey = "micro_insights";
+  constructor() {
+    Q(this);
+  }
+  initialize = async (o, i) => {
+    this.copyApi = new ie(o, i), await this.loadCopy();
+  };
+  loadCopy = async () => {
+    const o = await this.copyApi.getGlobalCopy(this.namespace, this.translationKey);
+    Ee(() => {
+      this.copyObject = o[this.translationKey];
+    });
+  };
+  get cardsCopy() {
+    return this.copyObject.cards;
+  }
+  get carouselCopy() {
+    return this.copyObject.carousel;
+  }
+  get zeroStateCopy() {
+    return this.copyObject.zero_state;
+  }
+}
+const ee = {
+  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"
+}, g = window?.app?.clientConfig?.microwidget_instance_id || "", ne = {
+  INSIGHTS_MICRO_WIDGET: "/micro-insights-carousel"
+}, Ce = (t) => `on${t}Click`, _e = (t) => `on${t}View`, me = (t) => `on${t}ViewFirstTime`, te = (t) => t.replace(/([a-z])([A-Z])/g, "$1 $2"), be = () => Object.values(ee).reduce(
+  (t, o) => ({
+    ...t,
+    [Ce(o)]: {
+      action: w.MICRO_BEAT_CLICKED,
+      category: T.BEAT_INTERACTION,
+      label: te(o),
+      value: g
+    }
+  }),
+  {}
+), Ue = () => Object.values(ee).reduce(
+  (t, o) => ({
+    ...t,
+    [_e(o)]: {
+      action: w.MICRO_BEAT_DISPLAYED,
+      category: T.BEAT_INTERACTION,
+      label: te(o),
+      value: g
+    }
+  }),
+  {}
+), ze = () => Object.values(ee).reduce(
+  (t, o) => ({
+    ...t,
+    [me(o)]: {
+      action: w.MICRO_BEAT_DISPLAYED_FIRST_TIME,
+      category: T.BEAT_INTERACTION,
+      label: te(o),
+      value: g
+    }
+  }),
+  {}
+), O = {
+  CARD: "Card",
+  CAROUSEL_CONTROL: "Carousel Control",
+  MICRO_WIDGET: "Micro Widget",
+  VIEW_MORE: "View More"
+}, T = {
+  MICRO_WIDGET_INTERACTION: "Micro Widget Interaction",
+  BEAT_INTERACTION: "Beat Interaction"
+}, R = {
+  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"
+}, fe = {
+  ON_VIEW_MORE_VIEWED: "onViewMoreCardView"
+}, w = {
+  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"
+}, W = {
+  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"
+}, ae = {
+  [W.MICRO_WIDGET_CAROUSEL]: {
+    label: O.MICRO_WIDGET,
+    name: W.MICRO_WIDGET_CAROUSEL,
+    path: ne.INSIGHTS_MICRO_WIDGET,
+    value: g
+  },
+  // zero state
+  [W.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
+    label: O.MICRO_WIDGET,
+    name: W.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
+    path: ne.INSIGHTS_MICRO_WIDGET,
+    value: g
+  },
+  // no relevant cards
+  [W.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
+    label: O.MICRO_WIDGET,
+    name: W.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
+    path: "/micro-widget",
+    value: g
+  }
+}, ce = {
+  // carousel control interaction events - clicks and swipes
+  [R.ON_CAROUSEL_BACK_CLICK]: {
+    action: w.CONTROL_BACKWARD,
+    category: T.MICRO_WIDGET_INTERACTION,
+    label: O.CAROUSEL_CONTROL,
+    value: g
+  },
+  [R.ON_CAROUSEL_FORWARD_CLICK]: {
+    action: w.CONTROL_FORWARD,
+    category: T.MICRO_WIDGET_INTERACTION,
+    label: O.CAROUSEL_CONTROL,
+    value: g
+  },
+  [R.ON_CAROUSEL_BACK_SWIPE]: {
+    action: w.SWIPE_BACKWARD,
+    category: T.MICRO_WIDGET_INTERACTION,
+    label: O.CAROUSEL_CONTROL,
+    value: g
+  },
+  [R.ON_CAROUSEL_FORWARD_SWIPE]: {
+    action: w.SWIPE_FORWARD,
+    category: T.MICRO_WIDGET_INTERACTION,
+    label: O.CAROUSEL_CONTROL,
+    value: g
+  },
+  // read more card events
+  [R.ON_VIEW_MORE_CLICKED]: {
+    action: w.MICRO_BEAT_CLICKED,
+    category: T.BEAT_INTERACTION,
+    label: O.VIEW_MORE,
+    value: g
+  },
+  [fe.ON_VIEW_MORE_VIEWED]: {
+    action: w.MICRO_BEAT_DISPLAYED,
+    category: T.BEAT_INTERACTION,
+    label: O.VIEW_MORE,
+    value: g
+  },
+  ...be(),
+  ...Ue(),
+  ...ze()
+}, de = async (t, o) => !o || !ce[t] ? null : o.sendAnalyticEvent(ce[t]).then((i) => i).catch((i) => {
+  throw i;
+}), se = async (t, o) => !o || !ae[t] ? null : o.sendAnalyticsPageview(ae[t]).then((i) => i).catch((i) => {
+  throw i;
+});
+class Ke {
+  onAnalyticEvent = de;
+  onAnalyticPageView = se;
+  beatApi = new re("/", "");
+  constructor() {
+    Q(this);
+  }
+  initialize = async (o, i, r) => {
+    this.onAnalyticEvent = (n, l) => {
+      de(n, l).then((c) => c).catch((c) => {
+        throw c.status === 401 && r(), c;
+      });
+    }, this.onAnalyticPageView = (n, l) => {
+      se(n, l).then((c) => c).catch((c) => {
+        throw c.status === 401 && r(), c;
+      });
+    }, this.beatApi = new re(o, i);
+  };
+  updateBeat = async (o) => {
+    this.beatApi.updateBeat(o);
+  };
+}
+class $e {
+  copyStore;
+  endpoint = "/";
+  insightsMicroWidgetStore;
+  session = null;
+  token = "";
+  isInitialized = !1;
+  constructor() {
+    this.copyStore = new Ge(), this.insightsMicroWidgetStore = new Ke(), Q(this);
+  }
+  initialize = async (o, i, r) => {
+    await this.copyStore.initialize(o, i), await this.insightsMicroWidgetStore.initialize(o, i, r), this.session = await ve(o, i, "1.0.0", "Micro Insights Carousel"), Ee(() => {
+      this.isInitialized = !0;
+    });
+  };
+}
+const P = C.createContext(null), je = ({
+  onEvent: t,
+  onPageview: o,
+  store: i,
+  children: r
+}) => /* @__PURE__ */ e(P.Provider, { value: { onEvent: t, onPageview: o, store: i, children: r }, children: r }), Ye = ({ beat: t }) => {
+  const [o, i] = Y(Ae.UNCATEGORIZED);
+  return Z(() => {
+    t.primary_category_guid ? i(t.primary_category_guid) : t.category_guids?.length && i(t.category_guids[0]);
+  }, []), /* @__PURE__ */ e(Te, { categoryGuid: o, size: 16, sx: { minWidth: 16 } });
+}, Xe = ({ beat: t }) => {
+  const o = q(), i = Qe(o);
+  return /* @__PURE__ */ e(
+    we,
+    {
+      categoryGuid: t.primary_category_guid || t.category_guids && t.category_guids[0] || "",
+      className: i,
+      merchantGuid: t.primary_merchant_guid || t.merchant_guids[0],
+      size: 16
+    }
+  );
+}, Qe = (t) => U({
+  marginTop: t.Spacing.XTiny,
+  "& .kyper-categoryicon": {
+    display: "flex"
+  }
+}), qe = N(Xe), Je = ({
+  color: t = "currentColor",
+  height: o,
+  size: i = 16,
+  styles: r,
+  viewBox: n = "0 0 16 16",
+  width: l
+}) => /* @__PURE__ */ e(
+  "svg",
+  {
+    "aria-hidden": !0,
+    className: "kyper-icon",
+    focusable: !1,
+    height: o || i,
+    style: r,
+    viewBox: n,
+    width: l || i,
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M16 1.5C16 0.671573 15.3284 0 14.5 0H1.5C0.671573 0 0 0.671573 0 1.5V14.5C0 15.3284 0.671573 16 1.5 16H14.5C15.3284 16 16 15.3284 16 14.5V1.5ZM12.8 5.1C13.0209 5.26568 13.0657 5.57909 12.9 5.8L9.90003 9.8C9.71746 10.0434 9.36163 10.0687 9.14648 9.85355L6.55413 7.2612L3.90003 10.8C3.73434 11.0209 3.42094 11.0657 3.20003 10.9C2.97912 10.7343 2.93434 10.4209 3.10003 10.2L6.10003 6.2C6.28259 5.95658 6.63843 5.93129 6.85358 6.14645L9.44593 8.7388L12.1 5.2C12.2657 4.97908 12.5791 4.93431 12.8 5.1Z",
+        fill: t
+      }
+    )
+  }
+), et = (t) => t ? t.data ? t.data.map((o) => {
+  const i = {};
+  return t.names?.map((r, n) => {
+    i[r] = o[n];
+  }), i;
+}) : [] : [], tt = (t, o) => {
+  const i = et(t), r = i.length / 2, n = i.slice(0, r), l = i.slice(r);
+  return !n.length || !l.length ? o.Color.Primary300 : n[0].amount > l[0].amount ? o.Color.Error300 : n[0].amount < l[0].amount ? o.Color.Success300 : o.Color.Primary300;
+}, it = ({ beat: t }) => {
+  const o = q(), i = tt(t.data_series, o);
+  return /* @__PURE__ */ e(X, { name: "bar_chart", sx: { color: i } });
+}, ge = () => /* @__PURE__ */ m("svg", { fill: "none", height: "36", viewBox: "0 0 40 36", width: "40", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M24.9618 32.6003H9.92084C9.60559 32.6003 9.34766 32.3424 9.34766 32.0271V18.3125C9.34766 17.9972 9.60559 17.7393 9.92084 17.7393H24.9618C25.2771 17.7393 25.535 17.9972 25.535 18.3125V32.0271C25.535 32.3424 25.2771 32.6003 24.9618 32.6003Z",
+      fill: "#CDD3DD",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M25.535 18.3124V19.5952H9.34766V18.3124C9.34766 17.9974 9.6055 17.7393 9.92084 17.7393H24.9618C25.2771 17.7393 25.535 17.9974 25.535 18.3124Z",
+      fill: "#E8F6FF",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M10.8689 18.7157C10.8689 18.96 10.6709 19.158 10.4266 19.158C10.1824 19.158 9.98438 18.96 9.98438 18.7157C9.98438 18.4714 10.1824 18.2734 10.4266 18.2734C10.6709 18.2734 10.8689 18.4714 10.8689 18.7157Z",
+      fill: "#C3E4FF",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M12.2986 18.7157C12.2986 18.96 12.1006 19.158 11.8563 19.158C11.6121 19.158 11.4141 18.96 11.4141 18.7157C11.4141 18.4714 11.6121 18.2734 11.8563 18.2734C12.1006 18.2734 12.2986 18.4714 12.2986 18.7157Z",
+      fill: "#C3E4FF",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M13.7263 18.7157C13.7263 18.96 13.5283 19.158 13.2841 19.158C13.0398 19.158 12.8418 18.96 12.8418 18.7157C12.8418 18.4714 13.0398 18.2734 13.2841 18.2734C13.5283 18.2734 13.7263 18.4714 13.7263 18.7157Z",
+      fill: "#C3E4FF",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M26.7313 35.6692H11.6904C11.3751 35.6692 11.1172 35.4112 11.1172 35.096V21.3813C11.1172 21.0661 11.3751 20.8081 11.6904 20.8081H26.7313C27.0466 20.8081 27.3045 21.0661 27.3045 21.3813V35.096C27.3045 35.4112 27.0466 35.6692 26.7313 35.6692Z",
+      fill: "#E4E8EE",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M27.3045 21.3813V22.6641H11.1172V21.3813C11.1172 21.0662 11.375 20.8081 11.6904 20.8081H26.7313C27.0467 20.8081 27.3045 21.0662 27.3045 21.3813Z",
+      fill: "#E8F6FF",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M12.6404 21.7846C12.6404 22.0288 12.4424 22.2268 12.1981 22.2268C11.9539 22.2268 11.7559 22.0288 11.7559 21.7846C11.7559 21.5403 11.9539 21.3423 12.1981 21.3423C12.4424 21.3423 12.6404 21.5403 12.6404 21.7846Z",
+      fill: "#C3E4FF",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M14.0701 21.7846C14.0701 22.0288 13.8721 22.2268 13.6278 22.2268C13.3836 22.2268 13.1855 22.0288 13.1855 21.7846C13.1855 21.5403 13.3836 21.3423 13.6278 21.3423C13.8721 21.3423 14.0701 21.5403 14.0701 21.7846Z",
+      fill: "#C3E4FF",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M15.4959 21.7846C15.4959 22.0288 15.2979 22.2268 15.0536 22.2268C14.8094 22.2268 14.6113 22.0288 14.6113 21.7846C14.6113 21.5403 14.8094 21.3423 15.0536 21.3423C15.2979 21.3423 15.4959 21.5403 15.4959 21.7846Z",
+      fill: "#C3E4FF",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M38.0145 25.175H22.9736C22.6584 25.175 22.4004 24.9171 22.4004 24.6018V10.8871C22.4004 10.5719 22.6584 10.314 22.9736 10.314H38.0145C38.3298 10.314 38.5878 10.5719 38.5878 10.8871V24.6018C38.5878 24.9171 38.3298 25.175 38.0145 25.175Z",
+      fill: "#EEF1F6",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e("mask", { height: "3", id: "mask0_1565_98011", maskUnits: "userSpaceOnUse", width: "17", x: "22", y: "10", children: /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M22.4004 10.3022H38.5878V12.1582H22.4004V10.3022Z",
+      fill: "white",
+      fillRule: "evenodd"
+    }
+  ) }),
+  /* @__PURE__ */ e("g", { mask: "url(#mask0_1565_98011)", children: /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M38.5878 10.8754V12.1582H22.4004V10.8754C22.4004 10.5604 22.6582 10.3022 22.9736 10.3022H38.0146C38.3299 10.3022 38.5878 10.5604 38.5878 10.8754Z",
+      fill: "#CDD3DD",
+      fillRule: "evenodd"
+    }
+  ) }),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M23.9099 11.2802C23.9099 11.5244 23.7119 11.7224 23.4677 11.7224C23.2234 11.7224 23.0254 11.5244 23.0254 11.2802C23.0254 11.0359 23.2234 10.8379 23.4677 10.8379C23.7119 10.8379 23.9099 11.0359 23.9099 11.2802Z",
+      fill: "#C3E4FF",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M25.3377 11.2802C25.3377 11.5244 25.1397 11.7224 24.8954 11.7224C24.6511 11.7224 24.4531 11.5244 24.4531 11.2802C24.4531 11.0359 24.6511 10.8379 24.8954 10.8379C25.1397 10.8379 25.3377 11.0359 25.3377 11.2802Z",
+      fill: "#C3E4FF",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M26.7654 11.2802C26.7654 11.5244 26.5674 11.7224 26.3231 11.7224C26.0789 11.7224 25.8809 11.5244 25.8809 11.2802C25.8809 11.0359 26.0789 10.8379 26.3231 10.8379C26.5674 10.8379 26.7654 11.0359 26.7654 11.2802Z",
+      fill: "#C3E4FF",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M29.1719 27.6866H32.7022V27.0142H29.1719V27.6866Z",
+      fill: "#C3E4FF",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M29.1719 28.6871H39.2264V28.3726H29.1719V28.6871Z",
+      fill: "#EEF1F6",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M29.1719 30.5064H39.5626V30.1919H29.1719V30.5064Z",
+      fill: "#EEF1F6",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M29.1719 31.4156H40.0029V31.1011H29.1719V31.4156Z",
+      fill: "#EEF1F6",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M29.1719 32.3253H35.7521V32.0107H29.1719V32.3253Z",
+      fill: "#EEF1F6",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M29.1719 29.5953H40.0029V29.2808H29.1719V29.5953Z",
+      fill: "#EEF1F6",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M9.98438 11.9322H13.1338V11.2598H9.98438V11.9322Z",
+      fill: "#C3E4FF",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M9.98438 12.9327H18.954V12.6182H9.98438V12.9327Z",
+      fill: "#D6EEFF",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M9.98438 14.7506H19.254V14.436H9.98438V14.7506Z",
+      fill: "#D6EEFF",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M9.98438 15.6602H16.8127V15.3457H9.98438V15.6602Z",
+      fill: "#D6EEFF",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M9.98438 13.8409H19.6468V13.5264H9.98438V13.8409Z",
+      fill: "#D6EEFF",
+      fillRule: "evenodd"
+    }
+  ),
+  /* @__PURE__ */ m("g", { filter: "url(#filter0_d_1565_98011)", children: [
+    /* @__PURE__ */ e("mask", { height: "22", id: "mask1_1565_98011", maskUnits: "userSpaceOnUse", width: "17", x: "16", y: "12", children: /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M16.5098 12.2725H32.8412V33.707H16.5098V12.2725Z",
+        fill: "white",
+        fillRule: "evenodd"
+      }
+    ) }),
+    /* @__PURE__ */ e("g", { mask: "url(#mask1_1565_98011)", children: /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M32.3427 33.707H17.0083C16.7341 33.707 16.5098 33.4827 16.5098 33.2086V12.7709C16.5098 12.4968 16.7341 12.2725 17.0083 12.2725H32.3427C32.6169 12.2725 32.8412 12.4968 32.8412 12.7709V33.2086C32.8412 33.4827 32.6169 33.707 32.3427 33.707Z",
+        fill: "white",
+        fillRule: "evenodd"
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M20.875 21.5786H31.134V21.1816H20.875V21.5786Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M20.875 22.4077H28.1023V22.0107H20.875V22.4077Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M20.875 31.8461H27.8799V31.3003H20.875V31.8461Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M18.7308 22.7869C18.1849 22.7869 17.7383 22.3404 17.7383 21.7946C17.7383 21.2488 18.1849 20.8022 18.7308 20.8022C19.2767 20.8022 19.7233 21.2488 19.7233 21.7946C19.7233 22.3404 19.2767 22.7869 18.7308 22.7869Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd",
+        stroke: "#E4E8EE",
+        strokeWidth: "0.176004"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M18.7308 29.3841C18.1849 29.3841 17.7383 28.9375 17.7383 28.3917C17.7383 27.8459 18.1849 27.3994 18.7308 27.3994C19.2767 27.3994 19.7233 27.8459 19.7233 28.3917C19.7233 28.9375 19.2767 29.3841 18.7308 29.3841Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd",
+        stroke: "#E4E8EE",
+        strokeWidth: "0.176004"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M18.7308 26.0862C18.1849 26.0862 17.7383 25.6397 17.7383 25.0939C17.7383 24.5481 18.1849 24.1016 18.7308 24.1016C19.2767 24.1016 19.7233 24.5481 19.7233 25.0939C19.7233 25.6397 19.2767 26.0862 18.7308 26.0862Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd",
+        stroke: "#E4E8EE",
+        strokeWidth: "0.176004"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M20.875 24.8764H31.134V24.4795H20.875V24.8764Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M20.875 25.707H28.1023V25.3101H20.875V25.707Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M20.875 28.1758H31.134V27.7788H20.875V28.1758Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M20.875 29.0049H28.1023V28.6079H20.875V29.0049Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M17.7383 18.0811L18.4668 18.657L19.758 17.1641",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M17.7383 18.0811L18.4668 18.657L19.758 17.1641",
+        stroke: "#E4E8EE",
+        strokeWidth: "0.264005"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M17.7383 14.7823L18.4668 15.3582L19.758 13.8652",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M17.7383 14.7823L18.4668 15.3582L19.758 13.8652",
+        stroke: "#E4E8EE",
+        strokeWidth: "0.264005"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M20.875 14.3389H31.134V13.8369H20.875V14.3389Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M20.875 15.3878H28.1023V14.8857H20.875V15.3878Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M20.4648 14.0869H31.545H20.4648Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e("path", { d: "M20.4648 14.0869H31.545", stroke: "#E4E8EE", strokeWidth: "0.0880018" }),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M20.4648 15.1372H28.4939H20.4648Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e("path", { d: "M20.4648 15.1372H28.4939", stroke: "#E4E8EE", strokeWidth: "0.0880018" }),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M20.875 17.6368H31.134V17.1348H20.875V17.6368Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M20.875 18.6861H28.1023V18.1841H20.875V18.6861Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M20.4648 17.3858H31.545H20.4648Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e("path", { d: "M20.4648 17.3858H31.545", stroke: "#E4E8EE", strokeWidth: "0.0880018" }),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M20.4648 18.4356H28.4939H20.4648Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e("path", { d: "M20.4648 18.4356H28.4939", stroke: "#E4E8EE", strokeWidth: "0.0880018" }),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M18.2832 19.8984H31.0117H18.2832Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e("path", { d: "M18.2832 19.8984H31.0117", stroke: "#E4E8EE", strokeWidth: "0.0880018" }),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M18.7295 30.8101V32.3377V30.8101Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e("path", { d: "M18.7295 30.8101V32.3377", stroke: "#E4E8EE", strokeWidth: "0.264005" }),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M17.9668 31.5737H19.4947H17.9668Z",
+        fill: "#E4E8EE",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ e("path", { d: "M17.9668 31.5737H19.4947", stroke: "#E4E8EE", strokeWidth: "0.264005" })
+  ] }),
+  /* @__PURE__ */ m("g", { filter: "url(#filter1_d_1565_98011)", children: [
+    /* @__PURE__ */ e("circle", { cx: "15.0441", cy: "16.0441", fill: "#CDD3DD", r: "15.0441" }),
+    /* @__PURE__ */ e("mask", { height: "30", id: "mask2_1565_98011", maskUnits: "userSpaceOnUse", width: "30", x: "0", y: "1", children: /* @__PURE__ */ e("circle", { cx: "15.0435", cy: "16.0445", fill: "#F8F9FB", r: "14.3951" }) }),
+    /* @__PURE__ */ m("g", { mask: "url(#mask2_1565_98011)", children: [
+      /* @__PURE__ */ e("rect", { fill: "white", height: "31.1359", transform: "translate(0 0.162598)", width: "31.0101" }),
+      /* @__PURE__ */ e("rect", { fill: "#A8B1BD", height: "3.0172", rx: "0.167622", width: "3.0172", x: "3.26953", y: "4.52002" }),
+      /* @__PURE__ */ e("rect", { fill: "#A8B1BD", height: "3.0172", rx: "0.167622", width: "3.0172", x: "3.26953", y: "17.1758" }),
+      /* @__PURE__ */ e("rect", { fill: "#A8B1BD", height: "3.0172", rx: "0.167622", width: "3.0172", x: "3.26953", y: "26.0186" }),
+      /* @__PURE__ */ e("rect", { fill: "#A8B1BD", height: "3.0172", rx: "0.167622", width: "3.0172", x: "3.26953", y: "9.04541" }),
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          fill: "#CDD3DD",
+          height: "1.17336",
+          rx: "0.167622",
+          width: "10.9793",
+          x: "6.87305",
+          y: "4.52002"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          fill: "#CDD3DD",
+          height: "1.17336",
+          rx: "0.167622",
+          width: "10.9793",
+          x: "6.87305",
+          y: "17.1758"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          fill: "#CDD3DD",
+          height: "1.17336",
+          rx: "0.167622",
+          width: "10.9793",
+          x: "6.87305",
+          y: "26.0186"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          fill: "#CDD3DD",
+          height: "1.17336",
+          rx: "0.167622",
+          width: "10.9793",
+          x: "6.87305",
+          y: "9.04541"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          fill: "#EEF1F6",
+          height: "0.880018",
+          rx: "0.167622",
+          width: "10.9793",
+          x: "3.26953",
+          y: "2.34131"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          fill: "#EEF1F6",
+          height: "0.880018",
+          rx: "0.167622",
+          width: "10.9793",
+          x: "3.26953",
+          y: "14.9971"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          fill: "#EEF1F6",
+          height: "0.880018",
+          rx: "0.167622",
+          width: "10.9793",
+          x: "3.26953",
+          y: "23.8389"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          fill: "#EEF1F6",
+          height: "1.17336",
+          rx: "0.167622",
+          width: "8.50684",
+          x: "6.87305",
+          y: "6.36377"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          fill: "#EEF1F6",
+          height: "1.17336",
+          rx: "0.167622",
+          width: "8.50684",
+          x: "6.87305",
+          y: "19.0195"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          fill: "#EEF1F6",
+          height: "1.17336",
+          rx: "0.167622",
+          width: "8.50684",
+          x: "6.87305",
+          y: "27.8613"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          fill: "#EEF1F6",
+          height: "1.17336",
+          rx: "0.167622",
+          width: "8.50684",
+          x: "6.87305",
+          y: "10.8892"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          fill: "#A8B1BD",
+          height: "1.17336",
+          rx: "0.167622",
+          width: "5.15439",
+          x: "21.666",
+          y: "5.44238"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          fill: "#A8B1BD",
+          height: "1.17336",
+          rx: "0.167622",
+          width: "5.15439",
+          x: "21.666",
+          y: "18.0972"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          fill: "#A8B1BD",
+          height: "1.17336",
+          rx: "0.167622",
+          width: "5.15439",
+          x: "21.666",
+          y: "26.9399"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          fill: "#A8B1BD",
+          height: "1.17336",
+          rx: "0.167622",
+          width: "5.15439",
+          x: "21.666",
+          y: "9.96826"
+        }
+      ),
+      /* @__PURE__ */ e("path", { d: "M2.64062 8.25H27.4487", stroke: "#E4E8EE", strokeWidth: "0.0838112" }),
+      /* @__PURE__ */ e("path", { d: "M2.64062 20.9058H27.4487", stroke: "#E4E8EE", strokeWidth: "0.0838112" }),
+      /* @__PURE__ */ e("path", { d: "M2.64062 29.7476H27.4487", stroke: "#E4E8EE", strokeWidth: "0.0838112" }),
+      /* @__PURE__ */ e("path", { d: "M2.64062 12.7759H27.4487", stroke: "#E4E8EE", strokeWidth: "0.0838112" }),
+      /* @__PURE__ */ e("path", { d: "M2.64062 3.72412H27.4487", stroke: "#E4E8EE", strokeWidth: "0.0838112" }),
+      /* @__PURE__ */ e("path", { d: "M2.64062 16.3799H27.4487", stroke: "#E4E8EE", strokeWidth: "0.0838112" }),
+      /* @__PURE__ */ e("path", { d: "M2.64062 25.2217H27.4487", stroke: "#E4E8EE", strokeWidth: "0.0838112" }),
+      /* @__PURE__ */ e("path", { d: "M2.64062 8.25H27.4487", stroke: "#E4E8EE", strokeWidth: "0.0838112" }),
+      /* @__PURE__ */ e("path", { d: "M2.64062 20.9058H27.4487", stroke: "#E4E8EE", strokeWidth: "0.0838112" }),
+      /* @__PURE__ */ e("path", { d: "M2.64062 29.7476H27.4487", stroke: "#E4E8EE", strokeWidth: "0.0838112" })
+    ] })
+  ] }),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M24.1888 27.3166L24.4326 27.0728L25.6395 27.8404L32.2915 34.4924C32.4911 34.6919 32.4911 35.0154 32.2915 35.215C32.092 35.4145 31.7685 35.4145 31.569 35.215L24.9487 28.5947L24.1888 27.3166Z",
+      fill: "#CDD3DD"
+    }
+  ),
+  /* @__PURE__ */ m("defs", { children: [
+    /* @__PURE__ */ m(
+      "filter",
+      {
+        colorInterpolationFilters: "sRGB",
+        filterUnits: "userSpaceOnUse",
+        height: "22.1051",
+        id: "filter0_d_1565_98011",
+        width: "17.0025",
+        x: "16.1745",
+        y: "12.0629",
+        children: [
+          /* @__PURE__ */ e("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+          /* @__PURE__ */ e(
+            "feColorMatrix",
+            {
+              in: "SourceAlpha",
+              result: "hardAlpha",
+              type: "matrix",
+              values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            }
+          ),
+          /* @__PURE__ */ e("feOffset", { dy: "0.125717" }),
+          /* @__PURE__ */ e("feGaussianBlur", { stdDeviation: "0.167622" }),
+          /* @__PURE__ */ e(
+            "feColorMatrix",
+            {
+              type: "matrix",
+              values: "0 0 0 0 0.341176 0 0 0 0 0.4 0 0 0 0 0.458824 0 0 0 0.15 0"
+            }
+          ),
+          /* @__PURE__ */ e("feBlend", { in2: "BackgroundImageFix", mode: "normal", result: "effect1_dropShadow_1565_98011" }),
+          /* @__PURE__ */ e(
+            "feBlend",
+            {
+              in: "SourceGraphic",
+              in2: "effect1_dropShadow_1565_98011",
+              mode: "normal",
+              result: "shape"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ m(
+      "filter",
+      {
+        colorInterpolationFilters: "sRGB",
+        filterUnits: "userSpaceOnUse",
+        height: "31.7646",
+        id: "filter1_d_1565_98011",
+        width: "31.7641",
+        x: "-0.838112",
+        y: "0.580944",
+        children: [
+          /* @__PURE__ */ e("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+          /* @__PURE__ */ e(
+            "feColorMatrix",
+            {
+              in: "SourceAlpha",
+              result: "hardAlpha",
+              type: "matrix",
+              values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            }
+          ),
+          /* @__PURE__ */ e("feOffset", { dy: "0.419056" }),
+          /* @__PURE__ */ e("feGaussianBlur", { stdDeviation: "0.419056" }),
+          /* @__PURE__ */ e(
+            "feColorMatrix",
+            {
+              type: "matrix",
+              values: "0 0 0 0 0.341176 0 0 0 0 0.4 0 0 0 0 0.458824 0 0 0 0.16 0"
+            }
+          ),
+          /* @__PURE__ */ e("feBlend", { in2: "BackgroundImageFix", mode: "normal", result: "effect1_dropShadow_1565_98011" }),
+          /* @__PURE__ */ e(
+            "feBlend",
+            {
+              in: "SourceGraphic",
+              in2: "effect1_dropShadow_1565_98011",
+              mode: "normal",
+              result: "shape"
+            }
+          )
+        ]
+      }
+    )
+  ] })
+] }), pe = ({ beat: t, clientColorScheme: o, color: i, type: r }) => {
+  const n = We(), l = o?.primary_300 ? o.primary_300 : n.palette.primary.main;
+  return r === 0 ? /* @__PURE__ */ e(X, { fill: !0, name: "error", sx: { color: i || l } }) : r === 1 && t ? /* @__PURE__ */ e(Ye, { beat: t }) : r === 2 && t ? /* @__PURE__ */ e(qe, { beat: t }) : r === 3 && t ? /* @__PURE__ */ e(it, { beat: t }) : /* @__PURE__ */ e(
+    X,
+    {
+      fill: !0,
+      name: "info",
+      sx: {
+        color: l
+      }
+    }
+  );
+}, Re = {
+  LARGE: 180,
+  STANDARD: 154,
+  XLARGE: 200,
+  XXLARGE: 248
+}, ot = 50, Ie = 1, V = () => {
+  const t = C.useContext(P);
+  if (!t)
+    throw new Error("useCopyStore() must be used within the InsightsMicroWidgetDataProvider");
+  return t.store.copyStore;
+}, rt = () => {
+  const t = C.useContext(P);
+  if (!t?.store?.insightsMicroWidgetStore)
+    throw new Error(
+      "useInsightsMicroWidgetStore() must be used within the InsightsMicroWidgetDataProvider"
+    );
+  return t.store.insightsMicroWidgetStore;
+}, G = () => {
+  const t = C.useContext(P);
+  if (!t)
+    throw new Error("useEvent() must be used within the InsightsMicroWidgetDataProvider");
+  return { onEvent: t.onEvent };
+}, ye = () => {
+  const t = C.useContext(P);
+  if (!t)
+    throw new Error("usePageview() must be used within the InsightsMicroWidgetDataProvider");
+  return { onPageview: t.onPageview };
+}, lt = ({
+  ariaLabel: t,
+  backgroundColor: o,
+  beat: i,
+  clientColorScheme: r,
+  showCTAColocatedWithText: n = !0,
+  heightOverrides: l,
+  index: c,
+  isActiveCard: E,
+  onCardClick: u,
+  posthog: p,
+  showIcon: d,
+  variant: f,
+  widthOverrides: a
+}) => {
+  const s = window.app?.config.client_guid, { ref: _, inView: h } = ue({
+    threshold: Ie
+  }), { cardsCopy: v } = V(), { onEvent: I } = G(), { updateBeat: S } = rt();
+  Z(() => {
+    h && (i.has_been_displayed ? I(_e(i.template)) : (S({
+      ...i,
+      has_been_displayed: !0
+    }), I(me(i.template))));
+  }, [h]), Z(() => {
+    p?.capture && h && i && s && p.capture("micro_widget_viewed_insight", {
+      beat_guid: i.guid,
+      insight_template: i.template,
+      position: c,
+      $groups: { client: s }
+    });
+  }, [i, s, p, c, h]);
+  const M = () => {
+    u && u(i), I(Ce(i.template)), p?.capture && s && p.capture("micro_widget_clicked_insight", {
+      beat_guid: i.guid,
+      insight_template: i.template,
+      position: c,
+      $groups: { client: s }
+    });
+  };
+  return /* @__PURE__ */ e(
+    z,
+    {
+      actionText: i.micro_call_to_action || v.micro_card_cta,
+      ariaLabel: t,
+      backgroundColor: o,
+      description: i?.html_micro_description && i?.html_micro_description.length > 0 ? i.html_micro_description : i.html_description,
+      fontColors: { buttonColor: r?.primary_300 },
+      heightOverrides: l,
+      icon: pe && /* @__PURE__ */ e(
+        pe,
+        {
+          beat: i,
+          clientColorScheme: r,
+          color: i?.icon_color,
+          type: i?.icon_type
+        }
+      ),
+      isActiveCard: E,
+      onCardClick: M,
+      ref: _,
+      showCTAColocatedWithText: n,
+      showIcon: d,
+      title: i.micro_title && i.micro_title.length > 0 ? i.micro_title : i.title,
+      variant: f,
+      widthOverrides: a
+    }
+  );
+}, nt = ({
+  clientColorScheme: t,
+  currentBeatIndex: o,
+  numBeats: i,
+  onNextClick: r,
+  onPreviousClick: n,
+  scrollRightBoundary: l,
+  scrollX: c
+}) => {
+  const E = at(), { carouselCopy: u } = V(), p = Math.floor(c) > l || o === 0, d = c < 0 || i - 1 === o, f = "#BBBCBC", a = t?.primary_300 ? t?.primary_300 : "#2D64EF";
+  return /* @__PURE__ */ m(J, { className: E, children: [
+    /* @__PURE__ */ e(
+      oe,
+      {
+        "aria-label": u.previous_insight_cta_aria,
+        disabled: p,
+        onClick: n,
+        children: /* @__PURE__ */ e(
+          Fe,
+          {
+            style: {
+              color: p ? f : a
+            }
+          }
+        )
+      }
+    ),
+    Array.from({ length: i }).map((s, _) => /* @__PURE__ */ e(
+      "div",
+      {
+        className: "mx-insights-micro-carousel-dots",
+        style: {
+          backgroundColor: _ === o ? a : f
+        }
+      },
+      `carousel-button-${_}`
+    )),
+    /* @__PURE__ */ e(
+      oe,
+      {
+        "aria-label": u.next_insight_cta_aria,
+        disabled: d,
+        onClick: r,
+        children: /* @__PURE__ */ e(
+          he,
+          {
+            style: {
+              color: d ? f : a
+            }
+          }
+        )
+      }
+    )
+  ] });
+}, at = () => U({
+  alignItems: "center",
+  display: "flex",
+  justifyContent: "center",
+  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": {
+    marginRight: 8
+  },
+  "& .mx-insights-micro-carousel-dots": {
+    borderRadius: "50%",
+    height: 8,
+    padding: 0,
+    width: 8,
+    // we were using `gap` instead of margin, but it doesn't work in safari browsers older than iOS 14.1
+    marginRight: 8
+  }
+}), ct = ({
+  beats: t = [],
+  clientColorScheme: o,
+  showCTAColocatedWithText: i,
+  heightOverrides: r,
+  onCardClick: n,
+  posthog: l,
+  showCarouselControls: c,
+  showIcon: E,
+  showWithMargin: u,
+  variant: p,
+  widthOverrides: d
+}) => {
+  const f = st(r, u, d), a = C.useRef(null), [s, _] = C.useState(0), [h, v] = C.useState(null), [I, S] = C.useState(null), { carouselCopy: M } = V(), { onEvent: y } = G(), F = () => {
+    y(R.ON_CAROUSEL_FORWARD_CLICK), a.current && a.current.scrollTo({
+      left: (
+        // Adds the flex gap to the carousel ulRef's width
+        (a.current.offsetWidth + 8) * (Math.floor(s / (a.current.offsetWidth + 8)) + 1)
+      ),
+      top: 0,
+      behavior: "smooth"
+    });
+  }, x = () => {
+    y(R.ON_CAROUSEL_BACK_CLICK), a.current && a.current.scrollTo({
+      left: (a.current.offsetWidth + 8) * (Math.floor(s / (a.current.offsetWidth + 8)) - 1),
+      top: 0,
+      behavior: "smooth"
+    });
+  }, H = () => {
+    a.current && _(a.current.scrollLeft);
+  }, K = () => {
+    if (!I || !h) return;
+    I - h > ot ? y(R.ON_CAROUSEL_FORWARD_SWIPE) : y(R.ON_CAROUSEL_BACK_SWIPE);
+  }, $ = (L) => {
+    v(L.targetTouches[0].clientX);
+  }, j = (L) => {
+    v(null), S(L.targetTouches[0].clientX);
+  }, B = {
+    clientColorScheme: o,
+    showCTAColocatedWithText: i,
+    heightOverrides: r,
+    showIcon: E,
+    variant: p,
+    widthOverrides: d
+  }, k = a.current && a.current.offsetWidth ? Math.round(s / a.current.offsetWidth) : 0, D = a.current ? a.current.scrollWidth - a.current.offsetWidth : 0;
+  return /* @__PURE__ */ m("div", { className: f, children: [
+    /* @__PURE__ */ m(
+      "ul",
+      {
+        className: "mx-insights-micro-carousel-container",
+        onScroll: H,
+        onTouchEnd: K,
+        onTouchMove: $,
+        onTouchStart: j,
+        ref: a,
+        children: [
+          t.map((L, b) => /* @__PURE__ */ e(
+            lt,
+            {
+              ariaLabel: Oe(
+                M.card_position_in_carousel_aria,
+                b + 1,
+                t.length + 1
+              ),
+              beat: L,
+              index: b,
+              isActiveCard: b === k,
+              onCardClick: n,
+              posthog: l,
+              ...B
+            },
+            `${L.guid} ${b}`
+          )),
+          /* @__PURE__ */ e(
+            gt,
+            {
+              isActiveCard: k === t.length,
+              onCardClick: n,
+              ...B
+            }
+          )
+        ]
+      }
+    ),
+    c && /* @__PURE__ */ e(
+      nt,
+      {
+        clientColorScheme: o,
+        currentBeatIndex: k,
+        numBeats: t.length + 1,
+        onNextClick: F,
+        onPreviousClick: x,
+        scrollRightBoundary: D,
+        scrollX: s
+      }
+    )
+  ] });
+}, dt = N(ct), st = (t, o = !0, i) => U({
+  alignItems: "center",
+  boxSizing: "border-box",
+  display: "flex",
+  flexDirection: "column",
+  height: t,
+  width: i || "100%",
+  "& .mx-insights-micro-carousel-container": {
+    alignItems: "center",
+    display: "flex",
+    gap: 8,
+    height: t && "100%",
+    maxWidth: o ? "calc(100% - 32px)" : "100%",
+    overflowX: "auto",
+    overflowY: "hidden",
+    scrollbarWidth: "none",
+    "-ms-overflow-style": "none",
+    "-webkit-overflow-scrolling": "touch",
+    margin: 0,
+    padding: 0,
+    listStyleType: "none",
+    "&::-webkit-scrollbar": {
+      display: "none"
+    }
+  }
+}), z = C.forwardRef(
+  function({
+    actionText: o,
+    ariaLabel: i,
+    backgroundColor: r,
+    showCTAColocatedWithText: n,
+    description: l,
+    heightOverrides: c,
+    icon: E,
+    isActiveCard: u,
+    onCardClick: p = () => {
+    },
+    showIcon: d,
+    style: f = {},
+    fontColors: a = {},
+    title: s,
+    variant: _,
+    widthOverrides: h
+  }, v) {
+    const [I, S] = C.useState(1);
+    C.useEffect(() => {
+      h && h <= 325 && S(3), h && h > 325 && S(2);
+    }, [h]);
+    const { cardStyle: M, linkTextStyle: y } = f, F = _ ? M : { border: "none", boxShadow: "none", ...M }, x = pt(
+      F,
+      n,
+      a,
+      I,
+      y,
+      c
+    );
+    return /* @__PURE__ */ m(
+      "li",
+      {
+        "aria-hidden": !u,
+        className: x,
+        onClick: () => p(),
+        ref: v,
+        role: "button",
+        tabIndex: u ? 0 : -1,
+        children: [
+          i && /* @__PURE__ */ e("span", { "aria-label": i, style: { visibility: "hidden" } }),
+          /* @__PURE__ */ m(Ve, { className: "mx-micro-card", sx: { backgroundColor: r }, variant: _, children: [
+            /* @__PURE__ */ e(
+              He,
+              {
+                avatar: d && E,
+                subheader: /* @__PURE__ */ e("div", { className: "mx-micro-content-container", children: /* @__PURE__ */ e(
+                  xe,
+                  {
+                    className: "mx-micro-card-description",
+                    color: a.textColor ? "undefined" : "text.primary",
+                    children: l && /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: l } })
+                  }
+                ) }),
+                title: s
+              }
+            ),
+            !!o && /* @__PURE__ */ e(Be, { sx: { paddingLeft: 0 }, children: /* @__PURE__ */ e("div", { className: "mx-insights-micro-card-link-text", children: o }) })
+          ] })
+        ]
+      }
+    );
+  }
+), pt = (t, o, i, r, n, l) => U({
+  height: "100%",
+  listStyleType: "none",
+  userSelect: "none",
+  minWidth: "100%",
+  "& .mx-micro-card": {
+    borderRadius: 8,
+    cursor: "pointer",
+    display: "flex",
+    flexDirection: "column",
+    height: l ? "100%" : 124,
+    justifyContent: !o && "space-between",
+    width: "100%",
+    padding: 16,
+    ...t
+  },
+  "& .mx-micro-content-container": {
+    height: "100%"
+  },
+  "& .mx-micro-card-description": {
+    letterSpacing: 0.48,
+    color: i.textColor ? i.textColor : "",
+    display: "-webkit-box",
+    fontSize: 13,
+    lineHeight: "20px",
+    overflow: "hidden",
+    WebkitLineClamp: r,
+    WebkitBoxOrient: "vertical",
+    wordWrap: "break-word"
+  },
+  "& .mx-insights-micro-card-link-text": {
+    color: i.buttonColor ? i.buttonColor : "#2D64EF",
+    fontSize: 14,
+    fontWeight: "bold",
+    marginLeft: 24,
+    ...n
+  },
+  "& .MuiCardHeader-avatar": {
+    color: i.iconColor,
+    marginBottom: "auto",
+    marginRight: "8px !important",
+    paddingTop: 2
+  },
+  "& .MuiCardHeader-root": {
+    padding: 0
+  },
+  "& .MuiCardHeader-title": {
+    fontSize: 15,
+    fontWeight: "bold",
+    color: i.headerColor,
+    paddingBottom: 8,
+    WebkitLineClamp: 2
+  },
+  "& .MuiCardContent-root": {
+    // Needed to override padding for standard and first and last child conditions
+    padding: "0 !important"
+  }
+}), Et = ({
+  clientColorScheme: t,
+  onCardClick: o,
+  posthog: i,
+  widthOverrides: r
+}) => {
+  const { carouselCopy: n } = V(), { onEvent: l } = G(), c = window.app?.config.client_guid, E = () => {
+    l && (l(R.ON_VIEW_MORE_CLICKED), i?.capture && c && (o(), i.capture("micro_widget_clicked_insight", {
+      insight_template: "view_all",
+      $groups: { client: c }
+    })));
+  };
+  return /* @__PURE__ */ m(
+    Ne,
+    {
+      alignItems: "center",
+      direction: "row",
+      justifyContent: "space-between",
+      spacing: 2,
+      sx: {
+        padding: r ? 0 : 16,
+        width: r || void 0
+      },
+      children: [
+        /* @__PURE__ */ e(
+          le,
+          {
+            sx: {
+              fontSize: 18,
+              fontWeight: 700,
+              lineHeight: "24px"
+            },
+            variant: "h3",
+            children: n.carousel_title
+          }
+        ),
+        /* @__PURE__ */ m(
+          Ze,
+          {
+            onClick: E,
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              "&.MuiLink-underlineNone": {
+                textDecoration: "none",
+                ":hover": {
+                  borderBottom: "none"
+                }
+              }
+            },
+            underline: "none",
+            children: [
+              /* @__PURE__ */ e(
+                le,
+                {
+                  sx: {
+                    color: t?.primary_300,
+                    fontSize: 15,
+                    fontWeight: 600,
+                    lineHeight: "20px"
+                  },
+                  variant: "body1",
+                  children: n.view_all_insights_in_full_feed_cta_aria
+                }
+              ),
+              /* @__PURE__ */ e(he, { sx: { color: t?.primary_300, ml: "8px" } })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, ut = N(Et), ht = () => /* @__PURE__ */ e(
+  J,
+  {
+    sx: {
+      alignItems: "center",
+      display: "flex",
+      height: "100%",
+      justifyContent: "center",
+      width: "100%"
+    },
+    children: /* @__PURE__ */ e(ke, {})
+  }
+), A = new $e(), Ct = ({
+  areBeatsLoading: t,
+  beats: o = [],
+  // This also determines the length of the carousel controls (beat.length + 1)
+  clientColorScheme: i,
+  // Allows certain icons, view all and read more button to reflect the clients color scheme. Currently only supports primary_300
+  showCTAColocatedWithText: r = !0,
+  endpoint: n = "/",
+  heightOverrides: l,
+  logOutUser: c,
+  onCardClick: E = () => {
+  },
+  onEvent: u = () => {
+  },
+  onPageview: p = () => {
+  },
+  posthog: d,
+  showBorder: f = !0,
+  showCarouselControls: a,
+  showHeader: s,
+  showIcon: _,
+  showWithMargin: h = !0,
+  token: v = "",
+  useDarkMode: I,
+  userHasFullInsightFeedBeats: S,
+  variant: M,
+  widthOverrides: y
+}) => {
+  const [F, x] = Y("STANDARD"), [H, K] = Y(!1), $ = Se([u], A), j = Me([p], A);
+  C.useEffect(() => {
+    A.isInitialized || A.initialize(n, v, c);
+  }, [n, v, c, A.isInitialized]), C.useEffect(() => {
+    const D = window.innerHeight;
+    D < 180 ? x("STANDARD") : D >= 180 && D < 200 ? x("LARGE") : D >= 200 && D < 248 ? x("XLARGE") : D >= 248 && x("XXLARGE");
+  }, [window.innerHeight]), C.useEffect(() => {
+    K(!t && A.isInitialized);
+  }, [t, A.isInitialized]);
+  const B = {
+    showCTAColocatedWithText: r,
+    heightOverrides: l,
+    onCardClick: E,
+    showIcon: _,
+    showWithMargin: h,
+    useDarkMode: I,
+    widthOverrides: y
+  }, k = {
+    carouselSize: F,
+    posthog: d,
+    variant: M,
+    ...B
+  };
+  return (
+    // The Theme provider must wrap the component so that the styles don't break when imported into other applications.
+    /* @__PURE__ */ m(Le, { theme: De(I ? "dark" : "light"), children: [
+      /* @__PURE__ */ e(Pe, {}),
+      /* @__PURE__ */ e(je, { onEvent: $, onPageview: j, store: A, children: /* @__PURE__ */ m(
+        J,
+        {
+          sx: {
+            boxSizing: "border-box",
+            height: l ? void 0 : "100%",
+            margin: "0 auto",
+            width: y ? void 0 : "100%"
+          },
+          children: [
+            (t || !A.isInitialized) && /* @__PURE__ */ e(ht, {}),
+            H && s && /* @__PURE__ */ e(
+              ut,
+              {
+                clientColorScheme: i,
+                onCardClick: E,
+                posthog: d,
+                widthOverrides: y
+              }
+            ),
+            H && !!o.length && /* @__PURE__ */ e(
+              dt,
+              {
+                beats: o,
+                clientColorScheme: i,
+                showCarouselControls: a,
+                variant: f ? M : void 0,
+                ...B
+              }
+            ),
+            H && !o.length && S && /* @__PURE__ */ e(mt, { clientColorScheme: i, ...k }),
+            H && !o.length && !S && /* @__PURE__ */ e(It, { ...k })
+          ]
+        }
+      ) })
+    ] })
+  );
+}, ro = N(Ct), _t = ({
+  ariaLabel: t,
+  carouselSize: o,
+  clientColorScheme: i,
+  heightOverrides: r,
+  onCardClick: n,
+  posthog: l,
+  showIcon: c,
+  showWithMargin: E,
+  variant: u,
+  widthOverrides: p
+}) => {
+  const { cardsCopy: d } = V(), { onEvent: f } = G(), { onPageview: a } = ye(), s = window.app?.config.client_guid;
+  C.useEffect(() => {
+    a(W.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
+  }, []);
+  const _ = () => {
+    n && n(), f(R.ON_NO_RELEVANT_INSIGHTS_CLICKED), l?.capture && s && l.capture("micro_widget_clicked_insight", {
+      insight_template: "no_relevant_insights",
+      $groups: { client: s }
+    });
+  };
+  return /* @__PURE__ */ e(
+    z,
+    {
+      actionText: d.micro_card_cta,
+      ariaLabel: t,
+      description: d.no_relevant_insights_card_description,
+      fontColors: { buttonColor: i?.primary_300 },
+      heightOverrides: r,
+      icon: /* @__PURE__ */ e(ge, {}),
+      onCardClick: _,
+      showIcon: c,
+      style: {
+        cardStyle: {
+          card: {
+            height: `calc(${Re[o]}px - 44px)`,
+            margin: "0 auto",
+            width: E ? "calc(100% - 32px)" : "100%"
+          },
+          description: {
+            WebkitLineClamp: 4
+          }
+        },
+        linkTextStyle: {
+          marginLeft: 48
+        }
+      },
+      title: d.no_relevant_insights_card_title,
+      variant: u,
+      widthOverrides: p
+    }
+  );
+}, mt = N(_t), ft = ({
+  isActiveCard: t,
+  ariaLabel: o,
+  clientColorScheme: i,
+  heightOverrides: r,
+  onCardClick: n,
+  posthog: l,
+  showIcon: c,
+  variant: E,
+  widthOverrides: u
+}) => {
+  const p = q(), d = window.app?.config.client_guid, { ref: f, inView: a } = ue({
+    threshold: Ie
+  }), { cardsCopy: s } = V(), { onEvent: _ } = G();
+  Z(() => {
+    a && _(fe.ON_VIEW_MORE_VIEWED);
+  }, [a]), Z(() => {
+    l?.capture && a && d && l.capture("micro_widget_viewed_insight", {
+      insight_template: "read_more_card",
+      $groups: { client: d }
+    });
+  }, [d, l, a]);
+  const h = () => {
+    n && n(), _(R.ON_VIEW_MORE_CLICKED), l?.capture && d && l.capture("micro_widget_clicked_insight", {
+      insight_template: "read_more_card",
+      $groups: { client: d }
+    });
+  };
+  return /* @__PURE__ */ e(
+    z,
+    {
+      actionText: s.micro_card_cta,
+      ariaLabel: o,
+      description: s.view_more_card_description,
+      fontColors: { buttonColor: i?.primary_300 },
+      heightOverrides: r,
+      icon: /* @__PURE__ */ e(
+        Je,
+        {
+          color: i?.primary_300 ? i?.primary_300 : p.Color.Primary300
+        }
+      ),
+      isActiveCard: t,
+      onCardClick: h,
+      ref: f,
+      showIcon: c,
+      title: s.view_more_card_title,
+      variant: E,
+      widthOverrides: u
+    }
+  );
+}, gt = N(ft), Rt = ({
+  ariaLabel: t,
+  carouselSize: o,
+  heightOverrides: i,
+  onCardClick: r,
+  showIcon: n,
+  showWithMargin: l,
+  variant: c,
+  widthOverrides: E
+}) => {
+  const { onPageview: u } = ye(), { zeroStateCopy: p } = V();
+  return C.useEffect(() => {
+    u(W.MICRO_WIDGET_CAROUSEL_ZERO_STATE);
+  }, []), /* @__PURE__ */ e(
+    z,
+    {
+      ariaLabel: t,
+      description: p.carousel_zero_state_description,
+      heightOverrides: i,
+      icon: /* @__PURE__ */ e(ge, {}),
+      onCardClick: r,
+      showIcon: n,
+      style: {
+        cardStyle: {
+          card: {
+            height: `calc(${Re[o]}px - 44px)`,
+            margin: "0 auto",
+            width: l ? "calc(100% - 32px)" : "100%"
+          },
+          description: {
+            WebkitLineClamp: 4
+          }
+        }
+      },
+      title: p.carousel_zero_state_title,
+      variant: c,
+      widthOverrides: E
+    }
+  );
+}, It = N(Rt);
+export {
+  $e as AppStore,
+  lt as BeatCard,
+  ut as CarouselHeader,
+  Je as ChartFilledIcon,
+  ro as InsightsMicroWidget,
+  je as InsightsMicroWidgetDataProvider,
+  dt as MicroBeatCarousel,
+  z as MicroInsightCard,
+  it as MonthlySpendComparisonIcon,
+  mt as NoRelevantInsightsCard,
+  gt as ViewMoreMicroCard,
+  It as ZeroStateCard,
+  ge as ZeroStateIcon
+};
+//# sourceMappingURL=index.es17.js.map