@mx-cartographer/experiences 6.26.18-alpha.mega3 → 6.26.18-alpha.mega4

package/dist/microinsights/components/carouselheader/CarouselHeader/index.es.js

@@ -1,82 +0,0 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { observer as p } from "mobx-react-lite";
-import m from "@mui/material/Link";
-import f from "@mui/material/Stack";
-import a from "@mui/material/Typography";
-import { ChevronRight as d } from "@mxenabled/mx-icons";
-import { useCopyStore as _, useEvent as u } from "../../../context/hooks/index.es.js";
-import { ANALYTICS_CLICK_EVENTS as h } from "../../../constants/Analytics/index.es.js";
-import x from "../../../../common/components/Loader/index.es.js";
-const C = ({
-  clientColorScheme: i,
-  onCardClick: l,
-  posthog: s,
-  widthOverrides: o
-}) => {
-  const { carouselCopy: r } = _(), { onEvent: n } = u(), c = () => {
-    n && (n(h.ON_VIEW_MORE_CLICKED), l(), s?.capture("clicked_view_more"));
-  };
-  return r ? /* @__PURE__ */ t(
-    f,
-    {
-      alignItems: "center",
-      direction: "row",
-      justifyContent: "space-between",
-      spacing: 2,
-      sx: {
-        padding: o ? 0 : 16,
-        width: o || void 0
-      },
-      children: [
-        /* @__PURE__ */ e(
-          a,
-          {
-            sx: {
-              fontSize: 18,
-              fontWeight: 700,
-              lineHeight: "24px"
-            },
-            variant: "h3",
-            children: r.carousel_title
-          }
-        ),
-        /* @__PURE__ */ t(
-          m,
-          {
-            onClick: c,
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              "&.MuiLink-underlineNone": {
-                textDecoration: "none",
-                ":hover": {
-                  borderBottom: "none"
-                }
-              }
-            },
-            underline: "none",
-            children: [
-              /* @__PURE__ */ e(
-                a,
-                {
-                  sx: {
-                    color: i?.primary_300,
-                    fontSize: 15,
-                    fontWeight: 600,
-                    lineHeight: "20px"
-                  },
-                  variant: "body1",
-                  children: r.view_all_insights_in_full_feed_cta_aria
-                }
-              ),
-              /* @__PURE__ */ e(d, { sx: { color: i?.primary_300, ml: "8px" } })
-            ]
-          }
-        )
-      ]
-    }
-  ) : /* @__PURE__ */ e(x, {});
-}, w = p(C);
-export {
-  w as default
-};

package/dist/microinsights/components/insightsmicrowidget/InsightsMicroWidget/index.es.js

@@ -1,105 +0,0 @@
-import { jsxs as v, jsx as i } from "react/jsx-runtime";
-import a, { useState as A } from "react";
-import { observer as $ } from "mobx-react-lite";
-import b from "@mui/material/CssBaseline";
-import { useTheme as q, ThemeProvider as y } from "@mui/material/styles";
-import { InsightsMicroWidgetDataProvider as J } from "../../../context/InsightsMicroWidgetDataProvider/index.es.js";
-import K from "../../carouselheader/CarouselHeader/index.es.js";
-import Q from "../../MicroWidgetContainer/index.es.js";
-import V from "../../microBeatCarousel/MicroBeatCarousel/index.es.js";
-import { NoRelevantInsightsCard as Y } from "../../noRelevantInsightsCard/NoRelevantInsightsCard/index.es.js";
-import { ZeroStateCard as _ } from "../../zeroStateCard/ZeroStateCard/index.es.js";
-import B from "../../spinner/Spinner/index.es.js";
-import { AppStore as U } from "../../../stores/AppStore/index.es.js";
-import { useCombineEvents as k, useCombinePageviews as F } from "../../../../common/hooks/useCombineEvents/index.es.js";
-const e = new U(), O = ({
-  allowSingleCardPeeking: P,
-  areBeatsLoading: n,
-  beats: t = [],
-  // This also determines the length of the carousel controls (beat.length + 1)
-  clientColorScheme: m,
-  // Allows certain icons, view all and read more button to reflect the clients color scheme. Currently only supports primary_300
-  showCTAColocatedWithText: R = !0,
-  endpoint: c = "/",
-  heightOverrides: p,
-  logOutUser: l,
-  onCardClick: d = () => {
-  },
-  onEvent: S = () => {
-  },
-  onPageview: w = () => {
-  },
-  posthog: g,
-  shouldApplyNewAnimation: C = !1,
-  showBorder: D = !0,
-  showCarouselControls: M,
-  showHeader: T,
-  showIcon: W,
-  showWithMargin: x = !0,
-  token: u = "",
-  useDarkMode: G,
-  userHasFullInsightFeedBeats: z,
-  variant: E,
-  visibleCardsCount: H = 1,
-  widthOverrides: f
-}) => {
-  const L = q(), [N, r] = A("STANDARD"), [s, X] = A(!1), j = k([S], e), Z = F([w], e);
-  a.useEffect(() => {
-    e.isInitialized || e.initialize(c, u, l);
-  }, [c, u, l, e.isInitialized]), a.useEffect(() => {
-    const o = window.innerHeight;
-    o < 180 ? r("STANDARD") : o >= 180 && o < 200 ? r("LARGE") : o >= 200 && o < 248 ? r("XLARGE") : o >= 248 && r("XXLARGE");
-  }, [window.innerHeight]), a.useEffect(() => {
-    X(!n && e.isInitialized);
-  }, [n, e.isInitialized]);
-  const I = {
-    showCTAColocatedWithText: R,
-    heightOverrides: p,
-    onCardClick: d,
-    posthog: g,
-    showIcon: W,
-    showWithMargin: x,
-    useDarkMode: G,
-    widthOverrides: f
-  }, h = {
-    carouselSize: N,
-    variant: E,
-    ...I
-  };
-  return (
-    // The Theme provider must wrap the component so that the styles don't break when imported into other applications.
-    /* @__PURE__ */ v(y, { theme: L, children: [
-      /* @__PURE__ */ i(b, {}),
-      /* @__PURE__ */ i(J, { onEvent: j, onPageview: Z, store: e, children: /* @__PURE__ */ v(Q, { heightOverrides: p, widthOverrides: f, children: [
-        (n || !e.isInitialized) && /* @__PURE__ */ i(B, {}),
-        s && T && /* @__PURE__ */ i(
-          K,
-          {
-            clientColorScheme: m,
-            onCardClick: d,
-            posthog: g,
-            widthOverrides: f
-          }
-        ),
-        s && !!t.length && /* @__PURE__ */ i(
-          V,
-          {
-            allowSingleCardPeeking: P,
-            beats: t,
-            clientColorScheme: m,
-            shouldApplyNewAnimation: C,
-            showCarouselControls: M,
-            variant: D ? E : void 0,
-            visibleCardsCount: H,
-            ...I
-          }
-        ),
-        s && !t.length && z && /* @__PURE__ */ i(Y, { clientColorScheme: m, ...h }),
-        s && !t.length && !z && /* @__PURE__ */ i(_, { ...h })
-      ] }) })
-    ] })
-  );
-}, ge = $(O);
-export {
-  ge as default
-};

package/dist/microinsights/components/microBeatCarousel/CarouselControls/index.es.js

@@ -1,101 +0,0 @@
-import { jsxs as _, jsx as r } from "react/jsx-runtime";
-import y from "@mui/material/Box";
-import x from "@mui/material/Stack";
-import p from "@mui/material/IconButton";
-import { useTheme as O } from "@mui/material/styles";
-import { ChevronLeft as R, ChevronRight as L } from "@mxenabled/mx-icons";
-import { useCopyStore as k } from "../../../context/hooks/index.es.js";
-const E = ({
-  clientColorScheme: f,
-  currentBeatIndex: o,
-  numBeats: a,
-  onNextClick: b,
-  onPreviousClick: C,
-  scrollRightBoundary: g,
-  scrollX: l,
-  shouldApplyNewAnimation: n = !1,
-  visibleCardsCount: u = 1
-}) => {
-  const c = O(), { carouselCopy: m } = k(), t = Math.floor(l) > g || o - u + 1 === 0, i = l < 0 || a - 1 === o, e = c.palette.grey[500], s = f?.primary_300 ?? c.palette.primary.main;
-  return /* @__PURE__ */ _(
-    x,
-    {
-      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__ */ r(
-          p,
-          {
-            "aria-disabled": t,
-            "aria-label": m.previous_insight_cta_aria,
-            disabled: t,
-            onClick: C,
-            children: /* @__PURE__ */ r(
-              R,
-              {
-                style: {
-                  color: t ? e : s
-                }
-              }
-            )
-          }
-        ),
-        Array.from({ length: a }).map((v, d) => {
-          const h = d === o;
-          return /* @__PURE__ */ r(
-            y,
-            {
-              className: "mx-insights-micro-carousel-dots",
-              sx: {
-                bgcolor: h ? s : e,
-                height: 8,
-                mr: 8,
-                // existing comment from meganthan "we were using `gap` instead of margin, but it doesn't work in safari browsers older than iOS 14.1"
-                ...n ? {
-                  borderRadius: "4px",
-                  transformOrigin: "center",
-                  transition: "all 0.5s ease-out",
-                  willChange: "width, background-color"
-                } : {
-                  borderRadius: "50%",
-                  p: 0
-                },
-                width: h && n ? 24 : 8
-              }
-            },
-            `carousel-button-${d}`
-          );
-        }),
-        /* @__PURE__ */ r(
-          p,
-          {
-            "aria-disabled": i,
-            "aria-label": m.next_insight_cta_aria,
-            disabled: i,
-            onClick: b,
-            children: /* @__PURE__ */ r(
-              L,
-              {
-                style: {
-                  color: i ? e : s
-                }
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  E as CarouselControls
-};

package/dist/microinsights/components/microBeatCarousel/MicroBeatCarousel/index.es.js

@@ -1,187 +0,0 @@
-import { jsxs as L, jsx as A } from "react/jsx-runtime";
-import r from "react";
-import { observer as J } from "mobx-react-lite";
-import N from "@mui/material/Stack";
-import { CarouselControls as Q } from "../CarouselControls/index.es.js";
-import { BeatCard as Z } from "../../beatCard/BeatCard/index.es.js";
-import tt from "../../viewMoreMicroCard/ViewMoreMicroCard/index.es.js";
-import { buildDynamicCopy as ot } from "../../../../common/utils/Localization/index.es.js";
-import { useCopyStore as et, useEvent as rt } from "../../../context/hooks/index.es.js";
-import { ANALYTICS_CLICK_EVENTS as m } from "../../../constants/Analytics/index.es.js";
-import { MINIMUM_SWIPE_DISTANCE as nt } from "../../../constants/App/index.es.js";
-const it = ({
-  allowSingleCardPeeking: p = !1,
-  beats: l = [],
-  clientColorScheme: E,
-  showCTAColocatedWithText: v,
-  heightOverrides: W,
-  onCardClick: g,
-  posthog: M,
-  shouldApplyNewAnimation: B = !1,
-  showCarouselControls: O,
-  showIcon: k,
-  showWithMargin: D = !0,
-  variant: P,
-  widthOverrides: C,
-  visibleCardsCount: n = 1
-  // Default to 1 card visible
-}) => {
-  const o = r.useRef(null), a = r.useRef(null), [d, $] = r.useState(0), [y, w] = r.useState(null), [I, z] = r.useState(null), [i, _] = r.useState(null), [K, U] = r.useState(B), { carouselCopy: T } = et(), { onEvent: u } = rt();
-  r.useEffect(() => {
-    if (o.current && !p) {
-      const t = o.current.offsetWidth, e = 8;
-      let c;
-      if (n > 1) {
-        const h = (t - (n - 1) * e) / n / 3;
-        c = (t - h - (n - 1) * e) / n;
-      } else
-        c = t;
-      _(c);
-    }
-  }, [n, o.current?.offsetWidth]), r.useEffect(() => {
-    const t = a.current?.offsetWidth;
-    if (typeof t == "number" && p) {
-      const e = (s) => {
-        U(!0);
-        const f = [
-          { maxWidth: 375, cardWidth: 268 },
-          { maxWidth: 444, cardWidth: 300 },
-          { maxWidth: 599, cardWidth: 350 },
-          { maxWidth: 749, cardWidth: 450 },
-          { maxWidth: 900, cardWidth: 600 }
-        ].find((x) => s <= x.maxWidth);
-        return f ? f.cardWidth : 750;
-      };
-      _(e(t));
-      const c = () => {
-        const s = a.current?.offsetWidth;
-        typeof s == "number" && _(e(s));
-      };
-      return window.addEventListener("resize", c), () => {
-        window.removeEventListener("resize", c);
-      };
-    }
-  }, [p, a]);
-  const X = () => {
-    u(m.ON_CAROUSEL_FORWARD_CLICK), o.current && i && o.current.scrollTo({
-      left: d + i + 8,
-      top: 0,
-      behavior: "smooth"
-    });
-  }, b = () => {
-    u(m.ON_CAROUSEL_BACK_CLICK), o.current && i && o.current.scrollTo({
-      left: Math.max(0, d - (i + 8)),
-      top: 0,
-      behavior: "smooth"
-    });
-  }, j = () => {
-    o.current && $(o.current.scrollLeft);
-  }, F = () => {
-    if (!I || !y) return;
-    I - y > nt ? u(m.ON_CAROUSEL_FORWARD_SWIPE) : u(m.ON_CAROUSEL_BACK_SWIPE);
-  }, V = (t) => {
-    w(t.targetTouches[0].clientX);
-  }, Y = (t) => {
-    w(null), z(t.targetTouches[0].clientX);
-  }, R = {
-    clientColorScheme: E,
-    showCTAColocatedWithText: v,
-    heightOverrides: W,
-    posthog: M,
-    showIcon: k,
-    variant: P
-  }, S = i ? Math.round(d / (i + 8)) : 0, q = o.current ? o.current.scrollWidth - o.current.offsetWidth : 0;
-  return /* @__PURE__ */ L(
-    N,
-    {
-      "aria-label": T.carousel_title,
-      "aria-roledescription": "carousel",
-      ref: a,
-      role: "group/region",
-      sx: {
-        alignItems: "center",
-        boxSizing: "border-box",
-        height: W,
-        width: C || "100%"
-      },
-      children: [
-        /* @__PURE__ */ L(
-          N,
-          {
-            direction: "row",
-            onScroll: j,
-            onTouchEnd: F,
-            onTouchMove: V,
-            onTouchStart: Y,
-            ref: o,
-            sx: {
-              alignItems: "center",
-              height: W && "100%",
-              gap: 8,
-              listStyleType: "none",
-              m: 0,
-              maxWidth: D ? "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: [
-              l.map((t, e) => {
-                const c = e + 1, s = l.length + 1, h = ot(
-                  T.card_position_in_carousel_aria,
-                  c.toString(),
-                  s.toString()
-                ), f = t.micro_title && t.micro_title.length > 0, x = t.micro_description && t.micro_description.length > 0, G = f ? t.micro_title : t.title, H = x ? t.micro_description : t.description;
-                return /* @__PURE__ */ A(
-                  Z,
-                  {
-                    ariaLabel: `${h}: ${G}, ${H}`,
-                    beat: t,
-                    index: e,
-                    isActiveCard: e === S,
-                    onCardClick: g,
-                    widthOverrides: i || void 0,
-                    ...R
-                  },
-                  `${t.guid} ${e}`
-                );
-              }),
-              /* @__PURE__ */ A(
-                tt,
-                {
-                  isActiveCard: S === l.length,
-                  onCardClick: g,
-                  widthOverrides: i || void 0,
-                  ...R
-                }
-              )
-            ]
-          }
-        ),
-        O && /* @__PURE__ */ A(
-          Q,
-          {
-            clientColorScheme: E,
-            currentBeatIndex: S + n - 1,
-            numBeats: l.length + 1,
-            onNextClick: X,
-            onPreviousClick: b,
-            scrollRightBoundary: q,
-            scrollX: d,
-            shouldApplyNewAnimation: K,
-            visibleCardsCount: n
-          }
-        )
-      ]
-    }
-  );
-}, _t = J(it);
-export {
-  _t as default
-};

package/dist/microinsights/components/microInsightCard/MicroInsightCard/index.es.js

@@ -1,152 +0,0 @@
-import { jsx as r, jsxs as v } from "react/jsx-runtime";
-import x from "react";
-import { P as B } from "@mxenabled/mxui";
-import i from "@mui/material/Box";
-import H from "@mui/material/Card";
-import M from "@mui/material/CardActions";
-import z from "@mui/material/CardContent";
-import j from "@mui/material/CardHeader";
-import D from "@mui/material/Stack";
-const E = x.forwardRef(
-  function({
-    actionText: n,
-    ariaLabel: a,
-    backgroundColor: b,
-    description: d,
-    heightOverrides: f,
-    icon: u,
-    isActiveCard: t,
-    isZeroState: o,
-    onCardClick: g = () => {
-    },
-    showIcon: y,
-    style: S = {},
-    fontColors: e = {},
-    title: C,
-    variant: l,
-    widthOverrides: p
-  }, c) {
-    const [k, s] = x.useState(!1), { cardStyle: m, linkTextStyle: w } = S, I = l ? m : { border: "none", boxShadow: "none", ...m }, h = /* @__PURE__ */ r(
-      B,
-      {
-        className: "mx-micro-card-description",
-        color: e.textColor ? "undefined" : "text.primary",
-        sx: {
-          display: "-webkit-box",
-          fontSize: 13,
-          letterSpacing: 0.48,
-          lineHeight: "20px",
-          overflow: "hidden",
-          pl: o ? 0 : 28,
-          pr: o ? 0 : 8,
-          WebkitBoxOrient: "vertical",
-          WebkitLineClamp: 2,
-          wordWrap: "break-word"
-        },
-        children: d && /* @__PURE__ */ r("span", { dangerouslySetInnerHTML: { __html: d } })
-      }
-    );
-    return /* @__PURE__ */ r(
-      i,
-      {
-        "aria-hidden": !t,
-        "aria-label": a,
-        "aria-labelledby": "divButton",
-        "aria-roledescription": "slide",
-        ref: c,
-        role: "group",
-        sx: {
-          height: "100%",
-          minWidth: p ? `${p}px` : "100%"
-        },
-        children: /* @__PURE__ */ r(
-          i,
-          {
-            "aria-hidden": !t,
-            "aria-label": a,
-            id: "divButton",
-            onClick: () => g(),
-            onKeyDown: () => s(!1),
-            onKeyUp: () => s(!0),
-            ref: c,
-            role: "button",
-            sx: {
-              border: k ? "1px solid rgba(82, 138, 224, 0.8)" : void 0,
-              borderRadius: "8px",
-              height: "100%"
-            },
-            tabIndex: t ? 0 : -1,
-            children: /* @__PURE__ */ r(
-              H,
-              {
-                "aria-roledescription": "slide",
-                className: "mx-micro-card",
-                role: "group",
-                sx: {
-                  backgroundColor: b,
-                  cursor: "pointer",
-                  height: f ? "100%" : 124,
-                  p: 16,
-                  ...I,
-                  "& .MuiCardHeader-avatar": {
-                    color: e.iconColor,
-                    mr: "8px"
-                  }
-                },
-                variant: l,
-                children: /* @__PURE__ */ v(
-                  D,
-                  {
-                    sx: {
-                      alignItems: "space-between",
-                      height: "100%"
-                    },
-                    children: [
-                      /* @__PURE__ */ r(
-                        j,
-                        {
-                          avatar: y && u,
-                          subheader: o && h,
-                          sx: { color: e.headerColor, p: 0 },
-                          title: C,
-                          titleTypographyProps: { fontSize: 15, fontWeight: 600, variant: "h3" }
-                        }
-                      ),
-                      /* @__PURE__ */ r(z, { sx: { p: 0 }, children: !o && h }),
-                      !!n && /* @__PURE__ */ r(
-                        M,
-                        {
-                          sx: {
-                            mt: "auto",
-                            p: 0
-                          },
-                          children: /* @__PURE__ */ r(
-                            i,
-                            {
-                              sx: (W) => ({
-                                color: e.buttonColor ? e.buttonColor : W.palette.primary.main,
-                                // TODO: Per Cameron the theme package in @mxenabled/mxui will be getting a big update and this will be theme.palette.primary_main
-                                fontSize: 14,
-                                fontWeight: "bold",
-                                px: 28,
-                                ...w
-                              }),
-                              children: n
-                            }
-                          )
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            )
-          }
-        )
-      }
-    );
-  }
-);
-export {
-  E as MicroInsightCard
-};

package/dist/microinsights/components/noRelevantInsightsCard/NoRelevantInsightsCard/index.es.js

@@ -1,67 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import S from "react";
-import { observer as d } from "mobx-react-lite";
-import { MicroInsightCard as I } from "../../microInsightCard/MicroInsightCard/index.es.js";
-import { ZeroStateIcon as f } from "../../beaticons/ZeroStateIcon/index.es.js";
-import { useCopyStore as N, useEvent as T, usePageview as h } from "../../../context/hooks/index.es.js";
-import { SUPPORTED_CAROUSEL_HEIGHTS as u } from "../../../constants/App/index.es.js";
-import { ANALYTICS_PAGE_NAMES as v, ANALYTICS_CLICK_EVENTS as A } from "../../../constants/Analytics/index.es.js";
-const g = ({
-  ariaLabel: i,
-  carouselSize: n,
-  clientColorScheme: a,
-  heightOverrides: c,
-  onCardClick: e,
-  posthog: o,
-  showIcon: s,
-  showWithMargin: _,
-  variant: l,
-  widthOverrides: m
-}) => {
-  const { cardsCopy: t } = N(), { onEvent: p } = T(), { onPageview: C } = h();
-  S.useEffect(() => {
-    C(v.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
-  }, []);
-  const E = () => {
-    e && e(), p(A.ON_NO_RELEVANT_INSIGHTS_CLICKED), o?.capture("clicked_insight", {
-      template: "no_relevant_insights"
-    });
-  };
-  return /* @__PURE__ */ r(
-    I,
-    {
-      actionText: t.micro_card_cta,
-      ariaLabel: i,
-      description: t.no_relevant_insights_card_description,
-      fontColors: { buttonColor: a?.primary_300 },
-      heightOverrides: c,
-      icon: /* @__PURE__ */ r(f, {}),
-      isZeroState: !0,
-      onCardClick: E,
-      posthog: o,
-      showIcon: s,
-      style: {
-        cardStyle: {
-          card: {
-            height: `calc(${u[n]}px - 44px)`,
-            m: "0 auto",
-            width: _ ? "calc(100% - 32px)" : "100%"
-          },
-          description: {
-            WebkitLineClamp: 4
-          }
-        },
-        linkTextStyle: {
-          ml: 48
-        }
-      },
-      title: t.no_relevant_insights_card_title,
-      variant: l,
-      widthOverrides: m
-    }
-  );
-}, H = d(g);
-export {
-  g as NoRelevantInsightsCard,
-  H as default
-};