@mx-cartographer/experiences 6.25.3-alpha.al3 → 6.25.3-alpha.mega2

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

@@ -0,0 +1,347 @@
+import { jsxs as L, jsx as A } from "react/jsx-runtime";
+import i from "react";
+import { observer as J } from "mobx-react-lite";
+import N from "@mui/material/Stack";
+import { CarouselControls as Q } from "./CarouselControls.js";
+import "mobx";
+import "date-fns/getUnixTime";
+import "bowser";
+import "date-fns/intlFormat";
+import "../../../common/constants/Account.js";
+import "../../../common/constants/Category.js";
+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 { buildDynamicCopy as Z } from "../../../common/utils/Localization.js";
+import "numeral";
+import "@mui/material";
+import "@mui/material/Button";
+import "@mxenabled/mxui";
+import "@mui/material/Tooltip";
+import "@mui/material/Box";
+import "@mui/material/IconButton";
+import "../../../common/components/accountfilter/AccountFilterOptions.js";
+import "../../../common/context/GlobalDataProvider.js";
+import "../../../common/context/WidgetContainerProvider.js";
+import "@mui/material/styles/useTheme";
+import "@mui/material/useMediaQuery";
+import "@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 "@mxenabled/mx-icons";
+import "date-fns/isSameDay";
+import "date-fns/isWithinInterval";
+import "d3";
+import "@mui/material/styles";
+import "@mui/x-charts";
+import "../../../common/components/charts/linechart/CustomLegend.js";
+import "@mui/x-charts/ChartsTooltip";
+import "../../../common/components/charts/stackedlinechart/CustomAreaTooltip.js";
+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 "../../../common/components/ErrorBoundary.js";
+import "@mui/material/Card";
+import "@mui/material/CardContent";
+import "@mui/material/CardHeader";
+import "../../../common/components/WidgetContainer.js";
+import "../../../common/components/ConnectDrawer.js";
+import "uuid";
+import "@mui/material/CircularProgress";
+import "../../../common/components/SearchBox.js";
+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 "../../../common/components/ListItemAction.js";
+import "@mui/material/MenuItem";
+import "@mui/material/TextField";
+import "@mui/material/Switch";
+import "../../../accounts/AccountsWidget.js";
+import "../../../accounts/AccountsMiniWidget.js";
+import "../../../accounts/ConnectMiniWidget.js";
+import "../../../accounts/components/detailsdrawer/Accounts/AccountDetailsHeader.js";
+import "../../../accounts/components/detailsdrawer/Accounts/AccountDetailsContent.js";
+import "../../../common/types/Account.js";
+import "posthog-js";
+import "../../../cashflow/CashflowMiniWidget.js";
+import "../../../cashflow/CashflowWidget.js";
+import "../../../cashflow/CashflowOnboarding.js";
+import "date-fns/differenceInDays";
+import "../../../categories/components/CategorySelector.js";
+import "../../../categories/components/CategorySelectorDrawer.js";
+import "../../../categories/components/CategoryRow.js";
+import "../../../debts/DebtsWidget.js";
+import "@mui/x-data-grid-pro";
+import "date-fns";
+import "@mui/material/Divider";
+import "@mui/material/List";
+import "../../../finstrong/components/FinancialStrengthGraph.js";
+import "../../../finstrong/components/CreditScoreGraph.js";
+import "../../../finstrong/FinstrongWidget.js";
+import "../../../goals/GoalsWidget.js";
+import "../../../goals/GoalsMicroWidget.js";
+import "../../../investments/util/InvestmentUtil.js";
+import "../../../merchants/components/MerchantLookup.js";
+import "../../../networth/components/NetWorthChart.js";
+import "../../../networth/components/NetWorthList.js";
+import "../../../networth/components/NetWorthSummary.js";
+import "../../../networth/NetWorthMicroWidget.js";
+import "../../../networth/NetWorthWidget.js";
+import "../../../notifications/components/NotificationList.js";
+import "../../../notifications/components/NotificationDrawer.js";
+import "date-fns/formatISO";
+import "../../../transactions/constants/Analytics.js";
+import "../../../transactions/constants/Transaction.js";
+import "../../../transactions/components/shared/transactionlist/TransactionRow.js";
+import "../../../transactions/components/shared/TransactionList.js";
+import "../../../transactions/components/shared/TransactionTable.js";
+import "../../../transactions/components/shared/TransactionDetails.js";
+import "../../../transactions/components/transactionwidget/AddAccountModal.js";
+import "../../../transactions/TransactionWidget.js";
+import "../../../settings/SettingsWidget.js";
+import "../../../settings/components/SettingsWidgetContents.js";
+import "../../../settings/components/profile/ProfileTab.js";
+import "../../../settings/components/devices/DeviceTab.js";
+import "../../../settings/NotificationSettingsWidget.js";
+import "../../../settings/components/notifications/NotificationSettings.js";
+import "../../../settings/components/notifications/AccountNotificationProfiles.js";
+import "../../../settings/components/notifications/BudgetNotificationProfiles.js";
+import "../../../settings/components/notifications/InsightsNotificationProfiles.js";
+import "../../../settings/components/transactionrules/TransactionRulesTab.js";
+import "../../../recurringtransactions/RecurringTransactionsWidget.js";
+import "../../../recurringtransactions/RecurringTransactionsMiniWidget.js";
+import "../../../recurringtransactions/RecurringTransactionsMicroWidget.js";
+import "date-fns/isAfter";
+import "date-fns/parseISO";
+import "date-fns/subQuarters";
+import "date-fns/lastDayOfMonth";
+import "date-fns/setDayOfYear";
+import "../../../recurringtransactions/components/shared/RecurringSettings.js";
+import "../../../recurringtransactions/components/shared/recurringsettings/ManageIncome.js";
+import "../../../recurringtransactions/components/shared/recurringsettings/ManageExpenses.js";
+import "../../../recurringtransactions/components/shared/recurringsettings/SelectTransaction.js";
+import "../../../recurringtransactions/components/shared/recurringsettings/AddRecurringTransactionDetails.js";
+import "../../../trends/TrendsFullWidget.js";
+import "../../../trends/TrendsMiniWidget.js";
+import "../../../trends/TrendsMicroWidget.js";
+import "../../../trends/TrendsWidget.js";
+import "date-fns/addSeconds";
+import "date-fns/getMonth";
+import { ANALYTICS_CLICK_EVENTS as h } from "../../constants/Analytics.js";
+import "../../context/InsightsMicroWidgetDataProvider.js";
+import { BeatCard as tt } from "../beatCard/BeatCard.js";
+import "../microInsightCard/MicroInsightCard.js";
+import "../carouselheader/CarouselHeader.js";
+import "../insightsmicrowidget/InsightsMicroWidget.js";
+import "../noRelevantInsightsCard/NoRelevantInsightsCard.js";
+import ot from "../viewMoreMicroCard/ViewMoreMicroCard.js";
+import "../zeroStateCard/ZeroStateCard.js";
+import "../beaticons/BeatMerchantLogo.js";
+import { useCopyStore as rt, useEvent as it } from "../../context/hooks.js";
+import { MINIMUM_SWIPE_DISTANCE as mt } from "../../constants/App.js";
+const pt = ({
+  allowSingleCardPeeking: f = !1,
+  beats: c = [],
+  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: m = 1
+  // Default to 1 card visible
+}) => {
+  const o = i.useRef(null), s = i.useRef(null), [l, $] = i.useState(0), [y, w] = i.useState(null), [I, z] = i.useState(null), [p, _] = i.useState(null), [K, U] = i.useState(B), { carouselCopy: T } = rt(), { onEvent: a } = it();
+  i.useEffect(() => {
+    if (o.current && !f) {
+      const t = o.current.offsetWidth, r = 8;
+      let e;
+      if (m > 1) {
+        const d = (t - (m - 1) * r) / m / 3;
+        e = (t - d - (m - 1) * r) / m;
+      } else
+        e = t;
+      _(e);
+    }
+  }, [m, o.current?.offsetWidth]), i.useEffect(() => {
+    const t = s.current?.offsetWidth;
+    if (typeof t == "number" && f) {
+      const r = (n) => {
+        U(!0);
+        const u = [
+          { maxWidth: 375, cardWidth: 268 },
+          { maxWidth: 444, cardWidth: 300 },
+          { maxWidth: 599, cardWidth: 350 },
+          { maxWidth: 749, cardWidth: 450 },
+          { maxWidth: 900, cardWidth: 600 }
+        ].find((x) => n <= x.maxWidth);
+        return u ? u.cardWidth : 750;
+      };
+      _(r(t));
+      const e = () => {
+        const n = s.current?.offsetWidth;
+        typeof n == "number" && _(r(n));
+      };
+      return window.addEventListener("resize", e), () => {
+        window.removeEventListener("resize", e);
+      };
+    }
+  }, [f, s]);
+  const X = () => {
+    a(h.ON_CAROUSEL_FORWARD_CLICK), o.current && p && o.current.scrollTo({
+      left: l + p + 8,
+      top: 0,
+      behavior: "smooth"
+    });
+  }, b = () => {
+    a(h.ON_CAROUSEL_BACK_CLICK), o.current && p && o.current.scrollTo({
+      left: Math.max(0, l - (p + 8)),
+      top: 0,
+      behavior: "smooth"
+    });
+  }, j = () => {
+    o.current && $(o.current.scrollLeft);
+  }, F = () => {
+    if (!I || !y) return;
+    I - y > mt ? a(h.ON_CAROUSEL_FORWARD_SWIPE) : a(h.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 = p ? Math.round(l / (p + 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: s,
+      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: [
+              c.map((t, r) => {
+                const e = r + 1, n = c.length + 1, d = Z(
+                  T.card_position_in_carousel_aria,
+                  e.toString(),
+                  n.toString()
+                ), u = t.micro_title && t.micro_title.length > 0, x = t.micro_description && t.micro_description.length > 0, G = u ? t.micro_title : t.title, H = x ? t.micro_description : t.description;
+                return /* @__PURE__ */ A(
+                  tt,
+                  {
+                    ariaLabel: `${d}: ${G}, ${H}`,
+                    beat: t,
+                    index: r,
+                    isActiveCard: r === S,
+                    onCardClick: g,
+                    widthOverrides: p || void 0,
+                    ...R
+                  },
+                  `${t.guid} ${r}`
+                );
+              }),
+              /* @__PURE__ */ A(
+                ot,
+                {
+                  isActiveCard: S === c.length,
+                  onCardClick: g,
+                  widthOverrides: p || void 0,
+                  ...R
+                }
+              )
+            ]
+          }
+        ),
+        O && /* @__PURE__ */ A(
+          Q,
+          {
+            clientColorScheme: E,
+            currentBeatIndex: S + m - 1,
+            numBeats: c.length + 1,
+            onNextClick: X,
+            onPreviousClick: b,
+            scrollRightBoundary: q,
+            scrollX: l,
+            shouldApplyNewAnimation: K,
+            visibleCardsCount: m
+          }
+        )
+      ]
+    }
+  );
+}, fi = J(pt);
+export {
+  fi as default
+};
+//# sourceMappingURL=MicroBeatCarousel.js.map

package/dist/microinsights/components/microBeatCarousel/MicroBeatCarousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MicroBeatCarousel.js","sources":["../../../../src/microinsights/components/microBeatCarousel/MicroBeatCarousel.tsx"],"sourcesContent":["/* eslint-disable consistent-return */\nimport React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { CarouselControls } from './CarouselControls'\n\nimport { BeatCard, MicroWidgetProps, ViewMoreMicroCard } from '../../'\n\nimport { buildDynamicCopy } from '../../../common/utils/Localization'\n\nimport { useCopyStore, useEvent } from '../../context/hooks'\n\nimport type { Beat } from '../../../common/types/Beat'\n\nimport { ANALYTICS_CLICK_EVENTS } from '../../constants/Analytics'\nimport { MINIMUM_SWIPE_DISTANCE } from '../../constants/App'\n\nexport interface MicroBeatCarouselProps extends MicroWidgetProps {\n  beats?: Beat[]\n  showCarouselControls?: boolean\n  visibleCardsCount?: number\n}\n\nexport interface CarouselDimensions {\n  containerWidth: number\n  cardWidth: number\n  totalCards: number\n  totalScrollWidth: number\n  visibleCardsCount: number\n  gap: number\n  peekAreaWidth: number\n}\n\nconst MicroBeatCarousel: React.FC<MicroBeatCarouselProps> = ({\n  allowSingleCardPeeking = false,\n  beats = [],\n  clientColorScheme,\n  showCTAColocatedWithText,\n  heightOverrides,\n  onCardClick,\n  posthog,\n  shouldApplyNewAnimation = false,\n  showCarouselControls,\n  showIcon,\n  showWithMargin = true,\n  variant,\n  widthOverrides,\n  visibleCardsCount = 1, // Default to 1 card visible\n}) => {\n  // ************** Use Ref Hooks **************************\n  const ref = React.useRef<HTMLDivElement | null>(null)\n  const carouselRef = React.useRef<HTMLDivElement | null>(null)\n\n  // ************** Use States Hooks ***********************\n  const [scrollX, setScrollX] = React.useState<number>(0)\n  const [touchEnd, setTouchEnd] = React.useState<number | null>(null)\n  const [touchStart, setTouchStart] = React.useState<number | null>(null)\n  const [cardWidth, setCardWidth] = React.useState<number | null>(null)\n  const [applyNewAnimation, setApplyNewAnimation] = React.useState<boolean>(shouldApplyNewAnimation)\n\n  // *************** Context functions *********************\n  const { carouselCopy: copy } = useCopyStore()\n  const { onEvent } = useEvent()\n\n  // ************** Use Effects Hooks **********************\n\n  React.useEffect(() => {\n    // Used primarily for Money Dashboard. Calculate card width based on container width and visible cards count\n    if (ref.current && !allowSingleCardPeeking) {\n      const containerWidth = ref.current.offsetWidth\n      const gap = 8 // gap between cards\n\n      // When visibleCardsCount > 1, make each card narrower to fit multiple cards and show a peek of the next card\n      // When visibleCardsCount is 1, use full container width\n      let calculatedCardWidth\n      if (visibleCardsCount > 1) {\n        // First calculate what a single full card width would be\n        const fullCardWidth = (containerWidth - (visibleCardsCount - 1) * gap) / visibleCardsCount\n        // Set the peek area to be 1/3 of a card width instead of fixed 60px\n        const peekAreaWidth = fullCardWidth / 3\n        // Calculate final card width, accounting for the peek area and gaps\n        calculatedCardWidth =\n          (containerWidth - peekAreaWidth - (visibleCardsCount - 1) * gap) / visibleCardsCount\n      } else {\n        calculatedCardWidth = containerWidth\n      }\n\n      setCardWidth(calculatedCardWidth)\n    }\n  }, [visibleCardsCount, ref.current?.offsetWidth])\n\n  React.useEffect(() => {\n    // Used primarily for Pulse clients. Set card with based off of allowSingleCardPeeking\n    const currentWidth = carouselRef.current?.offsetWidth\n    if (typeof currentWidth === 'number' && allowSingleCardPeeking) {\n      interface UpdateCardWidth {\n        (width: number): number\n      }\n\n      const updateCardWidth: UpdateCardWidth = (width: number): number => {\n        setApplyNewAnimation(true)\n\n        // Use until token sizes are actually implemented in the mxui repo\n        const breakpoints = [\n          { maxWidth: 375, cardWidth: 268 },\n          { maxWidth: 444, cardWidth: 300 },\n          { maxWidth: 599, cardWidth: 350 },\n          { maxWidth: 749, cardWidth: 450 },\n          { maxWidth: 900, cardWidth: 600 },\n        ]\n\n        const matchingBreakpoint = breakpoints.find((bp) => width <= bp.maxWidth)\n        return matchingBreakpoint ? matchingBreakpoint.cardWidth : 750\n      }\n\n      setCardWidth(updateCardWidth(currentWidth))\n\n      const handleResize = () => {\n        const resizeWidth = carouselRef.current?.offsetWidth\n        if (typeof resizeWidth === 'number') {\n          setCardWidth(updateCardWidth(resizeWidth))\n        }\n      }\n\n      window.addEventListener('resize', handleResize)\n\n      return () => {\n        window.removeEventListener('resize', handleResize)\n      }\n    }\n  }, [allowSingleCardPeeking, carouselRef])\n\n  // *************** Click handlers ************************\n  const handleNextClick = () => {\n    onEvent(ANALYTICS_CLICK_EVENTS.ON_CAROUSEL_FORWARD_CLICK)\n\n    if (ref.current && cardWidth) {\n      // Scroll by one card width + gap\n      ref.current.scrollTo({\n        left: scrollX + cardWidth + 8,\n        top: 0,\n        behavior: 'smooth',\n      })\n    }\n  }\n\n  const handlePreviousClick = () => {\n    onEvent(ANALYTICS_CLICK_EVENTS.ON_CAROUSEL_BACK_CLICK)\n\n    if (ref.current && cardWidth) {\n      // Scroll by one card width + gap\n      ref.current.scrollTo({\n        left: Math.max(0, scrollX - (cardWidth + 8)),\n        top: 0,\n        behavior: 'smooth',\n      })\n    }\n  }\n\n  const handleScroll = () => {\n    if (ref.current) {\n      setScrollX(ref.current.scrollLeft)\n    }\n  }\n\n  // *************** Mobile handlers ************************\n  const onTouchEnd = () => {\n    if (!touchStart || !touchEnd) return\n    const distance = touchStart - touchEnd\n\n    // swiping left\n    if (distance > MINIMUM_SWIPE_DISTANCE) {\n      onEvent(ANALYTICS_CLICK_EVENTS.ON_CAROUSEL_FORWARD_SWIPE)\n    } else {\n      // swiping right\n      onEvent(ANALYTICS_CLICK_EVENTS.ON_CAROUSEL_BACK_SWIPE)\n    }\n  }\n\n  const onTouchMove = (e: React.TouchEvent) => {\n    setTouchEnd(e.targetTouches[0].clientX)\n  }\n\n  const onTouchStart = (e: React.TouchEvent) => {\n    // otherwise the swipe is fired even with usual touch events\n    setTouchEnd(null)\n    setTouchStart(e.targetTouches[0].clientX)\n  }\n\n  // ************** Spreadable Props ***********************\n  const generalProps = {\n    clientColorScheme,\n    showCTAColocatedWithText,\n    heightOverrides,\n    posthog,\n    showIcon,\n    variant,\n  }\n\n  // Calculate active card index based on scroll position and card width\n  const activeCardIndex = cardWidth ? Math.round(scrollX / (cardWidth + 8)) : 0\n  const scrollBoundry = ref.current ? ref.current.scrollWidth - ref.current.offsetWidth : 0\n\n  return (\n    <Stack\n      aria-label={copy.carousel_title}\n      aria-roledescription=\"carousel\"\n      ref={carouselRef}\n      role=\"group/region\"\n      sx={{\n        alignItems: 'center',\n        boxSizing: 'border-box',\n        height: heightOverrides,\n        width: widthOverrides ? widthOverrides : '100%',\n      }}\n    >\n      <Stack\n        direction=\"row\"\n        onScroll={handleScroll}\n        onTouchEnd={onTouchEnd}\n        onTouchMove={onTouchMove}\n        onTouchStart={onTouchStart}\n        ref={ref}\n        sx={{\n          alignItems: 'center',\n          height: heightOverrides && '100%',\n          gap: 8,\n          listStyleType: 'none',\n          m: 0,\n          maxWidth: showWithMargin ? `calc(100% - 32px)` : '100%',\n          overflowX: 'auto',\n          overflowY: 'hidden',\n          p: 0,\n          scrollbarWidth: 'none',\n          '-ms-overflow-style': 'none',\n          '-webkit-overflow-scrolling': 'touch',\n          '&::-webkit-scrollbar': {\n            display: 'none',\n          },\n        }}\n      >\n        {beats.map((beat: Beat, i) => {\n          const beatPosition = i + 1\n          const totalBeats = beats.length + 1\n          const ariaLabelPositionInCarousel = buildDynamicCopy(\n            copy.card_position_in_carousel_aria,\n            beatPosition.toString(),\n            totalBeats.toString(),\n          )\n\n          const hasMicroTitle = beat.micro_title && beat.micro_title.length > 0\n          const hasMicroDescription = beat.micro_description && beat.micro_description.length > 0\n\n          const beatTitle = hasMicroTitle ? beat.micro_title : beat.title\n          const beatDescription = hasMicroDescription ? beat.micro_description : beat.description\n\n          return (\n            <BeatCard\n              ariaLabel={`${ariaLabelPositionInCarousel}: ${beatTitle}, ${beatDescription}`}\n              beat={beat}\n              index={i}\n              isActiveCard={i === activeCardIndex}\n              key={`${beat.guid} ${i}`}\n              onCardClick={onCardClick}\n              widthOverrides={cardWidth || undefined}\n              {...generalProps}\n            />\n          )\n        })}\n        <ViewMoreMicroCard\n          isActiveCard={activeCardIndex === beats.length}\n          onCardClick={onCardClick}\n          widthOverrides={cardWidth || undefined}\n          {...generalProps}\n        />\n      </Stack>\n      {showCarouselControls && (\n        <CarouselControls\n          clientColorScheme={clientColorScheme}\n          currentBeatIndex={activeCardIndex + visibleCardsCount - 1}\n          numBeats={beats.length + 1}\n          onNextClick={handleNextClick}\n          onPreviousClick={handlePreviousClick}\n          scrollRightBoundary={scrollBoundry}\n          scrollX={scrollX}\n          shouldApplyNewAnimation={applyNewAnimation}\n          visibleCardsCount={visibleCardsCount}\n        />\n      )}\n    </Stack>\n  )\n}\n\nexport default observer(MicroBeatCarousel)\n"],"names":["MicroBeatCarousel","allowSingleCardPeeking","beats","clientColorScheme","showCTAColocatedWithText","heightOverrides","onCardClick","posthog","shouldApplyNewAnimation","showCarouselControls","showIcon","showWithMargin","variant","widthOverrides","visibleCardsCount","ref","React","carouselRef","scrollX","setScrollX","touchEnd","setTouchEnd","touchStart","setTouchStart","cardWidth","setCardWidth","applyNewAnimation","setApplyNewAnimation","copy","useCopyStore","onEvent","useEvent","containerWidth","gap","calculatedCardWidth","peekAreaWidth","currentWidth","updateCardWidth","width","matchingBreakpoint","bp","handleResize","resizeWidth","handleNextClick","ANALYTICS_CLICK_EVENTS","handlePreviousClick","handleScroll","onTouchEnd","MINIMUM_SWIPE_DISTANCE","onTouchMove","e","onTouchStart","generalProps","activeCardIndex","scrollBoundry","jsxs","Stack","beat","i","beatPosition","totalBeats","ariaLabelPositionInCarousel","buildDynamicCopy","hasMicroTitle","hasMicroDescription","beatTitle","beatDescription","jsx","BeatCard","ViewMoreMicroCard","CarouselControls","MicroBeatCarousel$1","observer"],"mappings":"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"}

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

@@ -0,0 +1,153 @@
+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
+};
+//# sourceMappingURL=MicroInsightCard.js.map

package/dist/microinsights/components/microInsightCard/MicroInsightCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MicroInsightCard.js","sources":["../../../../src/microinsights/components/microInsightCard/MicroInsightCard.tsx"],"sourcesContent":["import React from 'react'\nimport { P } from '@mxenabled/mxui'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport CardActions from '@mui/material/CardActions'\nimport CardContent from '@mui/material/CardContent'\nimport CardHeader from '@mui/material/CardHeader'\nimport Stack from '@mui/material/Stack'\n\nimport { MicroWidgetProps, StyleProps } from '../../'\n\ninterface MicroInsightProps extends MicroWidgetProps {\n  actionText?: string\n  backgroundColor?: string\n  description?: string\n  icon: React.ReactNode\n  isZeroState?: boolean\n  fontColors?: fontColors\n  style?: StyleProps\n  title?: string\n}\n\ninterface fontColors {\n  buttonColor?: string\n  headerColor?: string\n  iconColor?: string\n  textColor?: string\n}\n\nexport const MicroInsightCard = React.forwardRef<HTMLDivElement, MicroInsightProps>(\n  function MicroInsight(\n    {\n      actionText,\n      ariaLabel,\n      backgroundColor,\n      description,\n      heightOverrides,\n      icon,\n      isActiveCard,\n      isZeroState,\n      onCardClick = () => {},\n      showIcon,\n      style = {},\n      fontColors = {},\n      title,\n      variant,\n      widthOverrides,\n    },\n    inViewRef,\n  ) {\n    // ************** Use States Hooks ***********************\n    const [isSelected, setIsSelected] = React.useState(false)\n\n    // ************** Style constants ************************\n    // The not variant is necessary to overirde the automatic raised style that defaults when no variant is given.\n    const { cardStyle, linkTextStyle } = style\n    const cardStyles = !variant ? { border: 'none', boxShadow: 'none', ...cardStyle } : cardStyle\n\n    const DescriptionComponent = (\n      <P\n        className=\"mx-micro-card-description\"\n        color={fontColors.textColor ? 'undefined' : 'text.primary'}\n        sx={{\n          display: '-webkit-box',\n          fontSize: 13,\n          letterSpacing: 0.48,\n          lineHeight: '20px',\n          overflow: 'hidden',\n          pl: !isZeroState ? 28 : 0,\n          pr: !isZeroState ? 8 : 0,\n          WebkitBoxOrient: 'vertical',\n          WebkitLineClamp: 2,\n          wordWrap: 'break-word',\n        }}\n      >\n        {description && <span dangerouslySetInnerHTML={{ __html: description }} />}\n      </P>\n    )\n\n    return (\n      <Box\n        aria-hidden={!isActiveCard}\n        aria-label={ariaLabel}\n        aria-labelledby=\"divButton\"\n        aria-roledescription=\"slide\"\n        ref={inViewRef as React.RefObject<HTMLDivElement>}\n        role=\"group\"\n        sx={{\n          height: '100%',\n          minWidth: widthOverrides ? `${widthOverrides}px` : '100%',\n        }}\n      >\n        <Box\n          aria-hidden={!isActiveCard}\n          aria-label={ariaLabel}\n          id=\"divButton\"\n          onClick={() => onCardClick()}\n          onKeyDown={() => setIsSelected(false)}\n          onKeyUp={() => setIsSelected(true)}\n          ref={inViewRef as React.RefObject<HTMLDivElement>}\n          role=\"button\"\n          sx={{\n            border: isSelected ? '1px solid rgba(82, 138, 224, 0.8)' : undefined,\n            borderRadius: '8px',\n            height: '100%',\n          }}\n          tabIndex={isActiveCard ? 0 : -1}\n        >\n          <Card\n            aria-roledescription=\"slide\"\n            className=\"mx-micro-card\"\n            role=\"group\"\n            sx={{\n              backgroundColor,\n              cursor: 'pointer',\n              height: heightOverrides ? '100%' : 124,\n              p: 16,\n              ...cardStyles,\n              '& .MuiCardHeader-avatar': {\n                color: fontColors.iconColor,\n                mr: '8px',\n              },\n            }}\n            variant={variant}\n          >\n            <Stack\n              sx={{\n                alignItems: 'space-between',\n                height: '100%',\n              }}\n            >\n              <CardHeader\n                avatar={showIcon && icon}\n                subheader={isZeroState && DescriptionComponent}\n                sx={{ color: fontColors.headerColor, p: 0 }}\n                title={title}\n                titleTypographyProps={{ fontSize: 15, fontWeight: 600, variant: 'h3' }}\n              />\n              <CardContent sx={{ p: 0 }}>{!isZeroState && DescriptionComponent}</CardContent>\n              {!!actionText && (\n                <CardActions\n                  sx={{\n                    mt: 'auto',\n                    p: 0,\n                  }}\n                >\n                  <Box\n                    sx={(theme) => ({\n                      color: fontColors.buttonColor\n                        ? fontColors.buttonColor\n                        : theme.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\n                      fontSize: 14,\n                      fontWeight: 'bold',\n                      px: 28,\n                      ...linkTextStyle,\n                    })}\n                  >\n                    {actionText}\n                  </Box>\n                </CardActions>\n              )}\n            </Stack>\n          </Card>\n        </Box>\n      </Box>\n    )\n  },\n)\n"],"names":["MicroInsightCard","React","actionText","ariaLabel","backgroundColor","description","heightOverrides","icon","isActiveCard","isZeroState","onCardClick","showIcon","style","fontColors","title","variant","widthOverrides","inViewRef","isSelected","setIsSelected","cardStyle","linkTextStyle","cardStyles","DescriptionComponent","jsx","P","Box","Card","jsxs","Stack","CardHeader","CardContent","CardActions","theme"],"mappings":"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"}

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

@@ -0,0 +1,68 @@
+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.js";
+import { ZeroStateIcon as f } from "../beaticons/ZeroStateIcon.js";
+import { useCopyStore as N, useEvent as T, usePageview as h } from "../../context/hooks.js";
+import { SUPPORTED_CAROUSEL_HEIGHTS as u } from "../../constants/App.js";
+import { ANALYTICS_PAGE_NAMES as v, ANALYTICS_CLICK_EVENTS as A } from "../../constants/Analytics.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
+};
+//# sourceMappingURL=NoRelevantInsightsCard.js.map

package/dist/microinsights/components/noRelevantInsightsCard/NoRelevantInsightsCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoRelevantInsightsCard.js","sources":["../../../../src/microinsights/components/noRelevantInsightsCard/NoRelevantInsightsCard.tsx"],"sourcesContent":["import React from 'react'\n\nimport { observer } from 'mobx-react-lite'\n\nimport { MicroInsightCard } from '../../components/microInsightCard/MicroInsightCard'\nimport { ZeroStateIcon } from '../../components/beaticons/ZeroStateIcon'\n\nimport { useCopyStore, useEvent, usePageview } from '../../context/hooks'\n\nimport { SUPPORTED_CAROUSEL_HEIGHTS } from '../../constants/App'\nimport { ANALYTICS_CLICK_EVENTS, ANALYTICS_PAGE_NAMES } from '../../constants/Analytics'\n\nimport { MicroWidgetProps } from '../../interfaces'\n\nexport interface MicroZeroStateCardProps extends MicroWidgetProps {\n  carouselSize: string\n}\n\nexport const NoRelevantInsightsCard: React.FC<MicroZeroStateCardProps> = ({\n  ariaLabel,\n  carouselSize,\n  clientColorScheme,\n  heightOverrides,\n  onCardClick,\n  posthog,\n  showIcon,\n  showWithMargin,\n  variant,\n  widthOverrides,\n}) => {\n  // *************** Context functions *********************git\n  const { cardsCopy } = useCopyStore()\n  const { onEvent } = useEvent()\n  const { onPageview } = usePageview()\n\n  // ************** Use Effects Hooks **********************\n  React.useEffect(() => {\n    onPageview(ANALYTICS_PAGE_NAMES.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS)\n  }, [])\n\n  // *************** Click handlers ************************\n  const handleClick = () => {\n    if (onCardClick) onCardClick()\n    onEvent(ANALYTICS_CLICK_EVENTS.ON_NO_RELEVANT_INSIGHTS_CLICKED)\n\n    posthog?.capture('clicked_insight', {\n      template: 'no_relevant_insights',\n    })\n  }\n\n  return (\n    <MicroInsightCard\n      actionText={cardsCopy.micro_card_cta}\n      ariaLabel={ariaLabel}\n      description={cardsCopy.no_relevant_insights_card_description}\n      fontColors={{ buttonColor: clientColorScheme?.primary_300 }}\n      heightOverrides={heightOverrides}\n      icon={<ZeroStateIcon />}\n      isZeroState={true}\n      onCardClick={handleClick}\n      posthog={posthog}\n      showIcon={showIcon}\n      style={{\n        cardStyle: {\n          card: {\n            height: `calc(${SUPPORTED_CAROUSEL_HEIGHTS[carouselSize]}px - 44px)`,\n            m: '0 auto',\n            width: showWithMargin ? `calc(100% - 32px)` : '100%',\n          },\n          description: {\n            WebkitLineClamp: 4,\n          },\n        },\n        linkTextStyle: {\n          ml: 48,\n        },\n      }}\n      title={cardsCopy.no_relevant_insights_card_title}\n      variant={variant}\n      widthOverrides={widthOverrides}\n    />\n  )\n}\n\nexport default observer(NoRelevantInsightsCard)\n"],"names":["NoRelevantInsightsCard","ariaLabel","carouselSize","clientColorScheme","heightOverrides","onCardClick","posthog","showIcon","showWithMargin","variant","widthOverrides","cardsCopy","useCopyStore","onEvent","useEvent","onPageview","usePageview","React","ANALYTICS_PAGE_NAMES","handleClick","ANALYTICS_CLICK_EVENTS","jsx","MicroInsightCard","ZeroStateIcon","SUPPORTED_CAROUSEL_HEIGHTS","NoRelevantInsightsCard$1","observer"],"mappings":";;;;;;;;AAkBO,MAAMA,IAA4D,CAAC;AAAA,EACxE,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AACF,MAAM;AAEE,QAAA,EAAE,WAAAC,MAAcC,KAChB,EAAE,SAAAC,MAAYC,KACd,EAAE,YAAAC,MAAeC;AAGvB,EAAAC,EAAM,UAAU,MAAM;AACpB,IAAAF,EAAWG,EAAqB,0CAA0C;AAAA,EAC5E,GAAG,CAAE,CAAA;AAGL,QAAMC,IAAc,MAAM;AACxB,IAAId,KAAyBA,KAC7BQ,EAAQO,EAAuB,+BAA+B,GAE9Dd,GAAS,QAAQ,mBAAmB;AAAA,MAClC,UAAU;AAAA,IAAA,CACX;AAAA,EAAA;AAID,SAAA,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAYX,EAAU;AAAA,MACtB,WAAAV;AAAA,MACA,aAAaU,EAAU;AAAA,MACvB,YAAY,EAAE,aAAaR,GAAmB,YAAY;AAAA,MAC1D,iBAAAC;AAAA,MACA,wBAAOmB,GAAc,EAAA;AAAA,MACrB,aAAa;AAAA,MACb,aAAaJ;AAAA,MACb,SAAAb;AAAA,MACA,UAAAC;AAAA,MACA,OAAO;AAAA,QACL,WAAW;AAAA,UACT,MAAM;AAAA,YACJ,QAAQ,QAAQiB,EAA2BtB,CAAY,CAAC;AAAA,YACxD,GAAG;AAAA,YACH,OAAOM,IAAiB,sBAAsB;AAAA,UAChD;AAAA,UACA,aAAa;AAAA,YACX,iBAAiB;AAAA,UACnB;AAAA,QACF;AAAA,QACA,eAAe;AAAA,UACb,IAAI;AAAA,QACN;AAAA,MACF;AAAA,MACA,OAAOG,EAAU;AAAA,MACjB,SAAAF;AAAA,MACA,gBAAAC;AAAA,IAAA;AAAA,EAAA;AAGN,GAEee,IAAAC,EAAS1B,CAAsB;"}

package/dist/microinsights/components/spinner/Spinner.js

@@ -0,0 +1,20 @@
+import { jsx as r } from "react/jsx-runtime";
+import t from "@mui/material/Box";
+import e from "@mui/material/CircularProgress";
+const s = () => /* @__PURE__ */ r(
+  t,
+  {
+    sx: {
+      alignItems: "center",
+      display: "flex",
+      height: "100%",
+      justifyContent: "center",
+      width: "100%"
+    },
+    children: /* @__PURE__ */ r(e, {})
+  }
+);
+export {
+  s as default
+};
+//# sourceMappingURL=Spinner.js.map