fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC7

package/packages/classic-quiz-play/src/components/Shared/ScoreStateWrapper.js

@@ -1,443 +0,0 @@
-import { j as e } from "../../../../../node_modules/react/jsx-runtime.js";
-import $ from "react";
-import { Box as l, Tabs as _, TabList as E, Tab as w, tabClasses as z, Typography as s, TabPanel as C } from "@mui/joy";
-import { useInternalTheme as L, isMobile as U, useCornerRadius as Y, useColors as a, useFontFamily as k, useSpacingScale as v } from "../../../../common/src/functions/theme.js";
-import { stripHtmlTags as G } from "../../../../common/src/functions/helpers.js";
-import "../../../../../node_modules/i18next/dist/esm/i18next.js";
-import "../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import "../../../../common/src/providers/ConstantsProvider.js";
-import "../../../../common/src/providers/ContainerProvider.js";
-import J from "../../assets/school.svg.js";
-import K from "../../assets/sports_score.svg.js";
-import N from "../../assets/info.svg.js";
-import { useTranslation as X } from "../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const ae = ({
-  questions: T,
-  userParticipation: H,
-  resultsTabPanelSxProps: W,
-  isOverlayVariant: o,
-  children: B,
-  brandingColors: i
-}) => {
-  const [d, D] = $.useState(0), n = L(), { t: x } = X(), p = U(), j = Y().md, h = o ? n.colorSchemes.dark.textPrimary : a().textPrimary, g = o ? n.colorSchemes.dark.textSecondary : a().textSecondary, u = k().primary, m = k().secondary, b = o ? n.colorSchemes.dark.secondaryContainer : a().secondaryContainer, P = i != null && i.backgroundColor || o ? n.colorSchemes.dark.surfaceVariant : a().surfaceVariant, y = v(), Q = a().palette.success.plainColor, R = a().palette.danger.plainColor;
-  let S = o ? n.colorSchemes.dark.textPrimary : a().textPrimary;
-  i != null && i.primaryColor && (S = i.primaryColor);
-  const M = (r, f) => {
-    var F, I, A;
-    const t = T.find(
-      (c) => c.questionId === r.questionId
-    );
-    return /* @__PURE__ */ e.jsx(
-      l,
-      {
-        sx: {
-          borderRadius: j,
-          p: y.md,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          alignSelf: "stretch",
-          gap: y.md,
-          backdropFilter: "blur(4px)",
-          position: "relative",
-          "&::before": {
-            content: '""',
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: P,
-            opacity: 0.5,
-            borderRadius: "inherit",
-            zIndex: 0,
-            backdropFilter: "blur(4px)"
-          },
-          "& > *": {
-            position: "relative",
-            zIndex: 1
-          }
-        },
-        children: /* @__PURE__ */ e.jsxs(
-          l,
-          {
-            sx: {
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "flex-start",
-              gap: "12px",
-              alignSelf: "stretch"
-            },
-            children: [
-              /* @__PURE__ */ e.jsxs(
-                l,
-                {
-                  sx: {
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "flex-start",
-                    alignSelf: "stretch"
-                  },
-                  children: [
-                    /* @__PURE__ */ e.jsxs(
-                      s,
-                      {
-                        sx: {
-                          alignSelf: "stretch",
-                          color: g,
-                          fontFamily: m,
-                          fontSize: "0.75em",
-                          fontStyle: "normal",
-                          fontWeight: 500,
-                          lineHeight: "166%",
-                          letterSpacing: "1px",
-                          textTransform: "uppercase"
-                        },
-                        children: [
-                          x("classicQuiz.question"),
-                          " ",
-                          f + 1
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ e.jsx(
-                      s,
-                      {
-                        sx: {
-                          alignSelf: "stretch",
-                          color: h,
-                          fontFamily: u,
-                          fontSize: "1.25em",
-                          fontStyle: "normal",
-                          fontWeight: 500,
-                          lineHeight: "120%",
-                          letterSpacing: "0.15px"
-                        },
-                        children: t == null ? void 0 : t.question
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ e.jsx(l, { sx: { alignSelf: "stretch" }, children: r.correct ? /* @__PURE__ */ e.jsxs(
-                s,
-                {
-                  sx: {
-                    color: o ? n.colorSchemes.dark.palette.success.plainColor : Q,
-                    fontFamily: m,
-                    fontSize: "1em",
-                    fontStyle: "normal",
-                    fontWeight: 700,
-                    lineHeight: "20px",
-                    letterSpacing: "0.15px"
-                  },
-                  children: [
-                    x("classicQuiz.yourAnswer"),
-                    " ",
-                    (F = t == null ? void 0 : t.options.find(
-                      (c) => c.optionId === r.optionId
-                    )) == null ? void 0 : F.option
-                  ]
-                }
-              ) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-                /* @__PURE__ */ e.jsxs(
-                  s,
-                  {
-                    sx: {
-                      color: o ? n.colorSchemes.dark.palette.danger.plainColor : R,
-                      fontFamily: m,
-                      fontSize: "1em",
-                      fontStyle: "normal",
-                      fontWeight: 600,
-                      lineHeight: "20px",
-                      letterSpacing: "0.15px"
-                    },
-                    children: [
-                      x("classicQuiz.yourAnswer"),
-                      " ",
-                      (I = t == null ? void 0 : t.options.find(
-                        (c) => c.optionId === r.optionId
-                      )) == null ? void 0 : I.option
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ e.jsxs(
-                  s,
-                  {
-                    sx: {
-                      color: h,
-                      fontFamily: m,
-                      fontSize: "1em",
-                      fontStyle: "normal",
-                      fontWeight: 600,
-                      lineHeight: "20px",
-                      letterSpacing: "0.15px"
-                    },
-                    children: [
-                      x("classicQuiz.correctAnswer"),
-                      " ",
-                      (A = t == null ? void 0 : t.options.find((c) => c.correct)) == null ? void 0 : A.option
-                    ]
-                  }
-                )
-              ] }) }),
-              t != null && t.explanation ? /* @__PURE__ */ e.jsxs(
-                l,
-                {
-                  sx: {
-                    display: "flex",
-                    py: "4px",
-                    pr: "16px",
-                    pl: "0px",
-                    justifyContent: "center",
-                    gap: "10px",
-                    alignItems: "flex-start",
-                    alignSelf: "stretch"
-                  },
-                  children: [
-                    /* @__PURE__ */ e.jsx(
-                      "img",
-                      {
-                        src: N,
-                        alt: "explanation-icon",
-                        style: {
-                          display: "flex",
-                          width: "20px",
-                          height: "20px",
-                          justifyContent: "center",
-                          alignItems: "center",
-                          filter: o ? "brightness(0) invert(1)" : "none"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ e.jsx(
-                      s,
-                      {
-                        sx: {
-                          flex: "1 0 0",
-                          color: h,
-                          fontFamily: m,
-                          fontSize: "0.875em",
-                          fontStyle: "normal",
-                          fontWeight: 400,
-                          lineHeight: "143%",
-                          letterSpacing: "0.17px"
-                        },
-                        children: G(t == null ? void 0 : t.explanation)
-                      }
-                    )
-                  ]
-                }
-              ) : /* @__PURE__ */ e.jsx(e.Fragment, {})
-            ]
-          },
-          `single-answer-${r.questionId}`
-        )
-      },
-      `user-answer-${r.questionId}`
-    );
-  };
-  return /* @__PURE__ */ e.jsx(l, { sx: { width: "100%" }, children: /* @__PURE__ */ e.jsxs(
-    _,
-    {
-      value: d,
-      onChange: (r, f) => D(f),
-      sx: {
-        borderRadius: j,
-        width: "100%",
-        // Ensure tabs container takes full width
-        backgroundColor: "transparent"
-      },
-      children: [
-        /* @__PURE__ */ e.jsxs(
-          E,
-          {
-            sx: {
-              fontSize: "1em",
-              "--Icon-fontSize": "1.25em",
-              flexDirection: p ? "column" : "row"
-            },
-            children: [
-              /* @__PURE__ */ e.jsx(
-                w,
-                {
-                  sx: {
-                    display: "flex",
-                    flexDirection: "row",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    flex: p ? "0 0 auto" : 1,
-                    width: p ? "100%" : "auto",
-                    borderBottom: "1px solid " + b,
-                    opacity: "60%",
-                    py: "12px",
-                    px: "16px",
-                    gap: "8px",
-                    "&:not(.Mui-selected):hover": {
-                      bgcolor: o ? "#FAFAFA14" : "#2121210A"
-                    },
-                    [`&.${z.selected}`]: {
-                      bgcolor: o ? "#FAFAFA14" : "#2121210A",
-                      borderBottom: "3px solid " + S,
-                      opacity: "100%",
-                      mb: "-1px"
-                    }
-                  },
-                  disableIndicator: !0,
-                  children: /* @__PURE__ */ e.jsxs(
-                    l,
-                    {
-                      sx: {
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        gap: "8px"
-                      },
-                      children: [
-                        /* @__PURE__ */ e.jsx(
-                          "img",
-                          {
-                            src: K,
-                            alt: "answers-icon",
-                            style: {
-                              display: "flex",
-                              width: "24px",
-                              height: "24px",
-                              justifyContent: "center",
-                              alignItems: "center",
-                              filter: o || n.mode == "dark" ? "brightness(0) invert(1)" : "none"
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ e.jsx(
-                          s,
-                          {
-                            sx: {
-                              color: g,
-                              fontFamily: u,
-                              fontSize: "1em",
-                              fontStyle: "normal",
-                              fontWeight: 500,
-                              lineHeight: "24px",
-                              letterSpacing: "0.4px",
-                              textTransform: "uppercase"
-                            },
-                            children: x("classicQuiz.results")
-                          }
-                        )
-                      ]
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ e.jsx(
-                w,
-                {
-                  sx: {
-                    display: "flex",
-                    flexDirection: "row",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    flex: p ? "0 0 auto" : 1,
-                    width: p ? "100%" : "auto",
-                    borderBottom: "1px solid " + b,
-                    opacity: "60%",
-                    py: "12px",
-                    px: "16px",
-                    gap: "8px",
-                    "&:not(.Mui-selected):hover": {
-                      bgcolor: o ? "#FAFAFA14" : "#2121210A"
-                    },
-                    [`&.${z.selected}`]: {
-                      bgcolor: o ? "#FAFAFA14" : "#2121210A",
-                      borderBottom: "3px solid " + S,
-                      opacity: "100%",
-                      mb: "-1px"
-                    }
-                  },
-                  disableIndicator: !0,
-                  children: /* @__PURE__ */ e.jsxs(
-                    l,
-                    {
-                      sx: {
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        gap: "8px"
-                      },
-                      children: [
-                        /* @__PURE__ */ e.jsx(
-                          "img",
-                          {
-                            src: J,
-                            alt: "answers-icon",
-                            style: {
-                              display: "flex",
-                              width: "24px",
-                              height: "24px",
-                              justifyContent: "center",
-                              alignItems: "center",
-                              filter: o || n.mode == "dark" ? "brightness(0) invert(1)" : "none"
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ e.jsx(
-                          s,
-                          {
-                            sx: {
-                              color: g,
-                              fontFamily: u,
-                              fontSize: "1em",
-                              fontStyle: "normal",
-                              fontWeight: 500,
-                              lineHeight: "24px",
-                              letterSpacing: "0.4px",
-                              textTransform: "uppercase"
-                            },
-                            children: x("classicQuiz.answers")
-                          }
-                        )
-                      ]
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        d === 0 && /* @__PURE__ */ e.jsx(C, { value: 0, sx: { ...W, fontSize: "1em" }, children: B }),
-        d === 1 && /* @__PURE__ */ e.jsx(
-          C,
-          {
-            value: 1,
-            sx: {
-              overflowY: "auto",
-              maxHeight: { md: "450px" },
-              fontSize: "1em",
-              display: "flex",
-              flexDirection: "column",
-              p: y.lg
-            },
-            children: /* @__PURE__ */ e.jsx(
-              l,
-              {
-                sx: {
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  gap: "16px",
-                  alignSelf: "stretch"
-                },
-                children: H.map((r, f) => M(r, f))
-              }
-            )
-          }
-        )
-      ]
-    }
-  ) });
-};
-export {
-  ae as default
-};

package/packages/classic-quiz-play/src/components/Shared/Stepper.js

@@ -1,59 +0,0 @@
-import { j as a } from "../../../../../node_modules/react/jsx-runtime.js";
-import { Box as u } from "@mui/joy";
-import { getSpacing as g, useInternalTheme as f } from "../../../../common/src/functions/theme.js";
-import "../../../../../node_modules/i18next/dist/esm/i18next.js";
-import "../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import "react";
-import "../../../../common/src/providers/ConstantsProvider.js";
-import "../../../../common/src/providers/ContainerProvider.js";
-const I = (o) => {
-  const d = () => {
-    const e = f(), m = e.customRadius.light.full, h = o.classicQuiz.questionsCount;
-    return Array.from({ length: h }, (x, i) => {
-      const s = i + 1;
-      let t, r;
-      if (s < o.currentQuestion) {
-        const l = o.userParticipation.find(
-          (c) => c.questionId === o.classicQuiz.questions[i].questionId
-        );
-        if (l) {
-          const n = o.classicQuiz.questions[i].options.find(
-            (p) => p.optionId === l.optionId
-          );
-          n != null && n.correct ? (t = e.colorSchemes.light.palette.success.plainColor, r = e.colorSchemes.light.palette.success.outlinedBorder) : (t = e.colorSchemes.light.palette.danger.plainColor, r = e.colorSchemes.light.palette.danger.outlinedBorder);
-        } else
-          t = e.colorSchemes.light.secondaryContainer, r = e.colorSchemes.light.secondaryContainer;
-      } else s === o.currentQuestion ? (t = o.brandingPrimaryColor || e.colorSchemes.light.palette.primary.plainColor, r = o.brandingPrimaryColor || e.colorSchemes.light.palette.primary.outlinedBorder) : (t = e.colorSchemes.light.secondaryContainer, r = e.colorSchemes.light.outlineEnabledBorder);
-      return /* @__PURE__ */ a.jsx(
-        u,
-        {
-          sx: {
-            maxWidth: "82.67px",
-            width: "100%",
-            height: "8px",
-            borderRadius: m,
-            backgroundColor: t,
-            border: `1px solid ${r}`,
-            transition: "background-color 0.3s ease"
-          }
-        },
-        `step-${s}`
-      );
-    });
-  };
-  return /* @__PURE__ */ a.jsx(
-    u,
-    {
-      sx: {
-        display: "flex",
-        justifyContent: "center",
-        gap: "8px",
-        py: g("xs")
-      },
-      children: d()
-    }
-  );
-};
-export {
-  I as default
-};

package/packages/classic-quiz-play/src/components/Shared/Stopwatch.js

@@ -1,109 +0,0 @@
-import { j as a } from "../../../../../node_modules/react/jsx-runtime.js";
-import { useColors as t, useCornerRadius as h, useFontFamily as T } from "../../../../common/src/functions/theme.js";
-import "../../../../../node_modules/i18next/dist/esm/i18next.js";
-import "../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import { Box as w, Typography as b } from "@mui/joy";
-import { useCallback as S, useEffect as k } from "react";
-import "../../../../common/src/providers/ConstantsProvider.js";
-import "../../../../common/src/providers/ContainerProvider.js";
-import B from "../../../../../node_modules/@mui/icons-material/esm/TimerOutlined.js";
-const E = (o) => {
-  let r;
-  const g = t().palette.danger.softBg, l = t().palette.danger.plainColor, d = t().palette.warning.softBg, s = t().palette.warning.plainColor, f = o.brandingPrimaryColor || t().palette.primary.plainColor, p = h().xl, x = T().secondary, m = t().palette.primary.onPrimary, y = {
-    "@keyframes pulse": {
-      "0%": {
-        transform: "scale(1)"
-      },
-      "50%": {
-        transform: "scale(1.05)"
-      },
-      "100%": {
-        transform: "scale(1)"
-      }
-    }
-  }, c = S(() => {
-    const n = o.quizType === "countdown" ? o.timer - 1 : o.timer + 1;
-    o.onTimeUpdate(n);
-  }, [o.onTimeUpdate]);
-  k(() => (o.isRunning && (r = setInterval(c, 1e3)), () => {
-    r && clearInterval(r);
-  }), [o.isRunning, c, o.timer]);
-  const C = (n) => {
-    const i = Math.floor(n / 60), u = n % 60;
-    return `${i < 10 ? "0" : ""}${i}:${u < 10 ? "0" : ""}${u}${i > 0 ? "m" : "s"}`;
-  }, e = () => {
-    if (o.quizType === "countdown") {
-      const n = o.timer / o.initialTime * 100;
-      if (n <= 30)
-        return {
-          background: g,
-          color: l,
-          iconColor: l,
-          animation: "pulse 1s infinite"
-        };
-      if (n <= 50)
-        return {
-          background: d,
-          color: s,
-          iconColor: s
-        };
-    }
-    return {
-      background: f,
-      color: m,
-      iconColor: m
-    };
-  };
-  return /* @__PURE__ */ a.jsxs(
-    w,
-    {
-      sx: {
-        py: "8px",
-        pl: "12px",
-        pr: "16px",
-        display: "flex",
-        gap: "4px",
-        alignItems: "center",
-        bgcolor: e().background,
-        borderRadius: p,
-        maxWidth: "105px",
-        maxHeight: "40px",
-        transition: "all 0.3s ease",
-        animation: e().animation,
-        ...y,
-        zIndex: 10
-      },
-      children: [
-        /* @__PURE__ */ a.jsx(
-          B,
-          {
-            sx: {
-              width: "24px",
-              height: "24px",
-              color: e().iconColor,
-              transition: "color 0.3s ease"
-            }
-          }
-        ),
-        /* @__PURE__ */ a.jsx(
-          b,
-          {
-            sx: {
-              fontFamily: x,
-              fontWeight: 400,
-              fontSize: "1em",
-              lineHeight: "150%",
-              letterSpacing: "0.15px",
-              color: e().color,
-              transition: "color 0.3s ease"
-            },
-            children: C(o.timer)
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  E as default
-};

package/packages/classic-quiz-play/src/components/Variants/Overlay/Error/OverlayError.js

@@ -1,45 +0,0 @@
-import { j as t } from "../../../../../../../node_modules/react/jsx-runtime.js";
-import { isMobile as n } from "../../../../../../common/src/functions/theme.js";
-import { extractBrandingProperties as s } from "../../../../../../common/src/functions/helpers.js";
-import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
-import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import "@mui/joy";
-import "react";
-import "../../../../../../common/src/providers/ConstantsProvider.js";
-import c from "../../../../../../common/src/components/Skeletons/Overlay/ApiError/OverlayApiErrorSkeleton.js";
-import "../../../../../../common/src/providers/ContainerProvider.js";
-import g from "../../../../assets/default-quiz-bg.png.js";
-import u from "../../../../assets/default-quiz-bg-vertical.jpg.js";
-import d from "../../../Shared/PresentedBy.js";
-import { useTranslation as f } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const U = (r) => {
-  const { t: e } = f(), o = n(), l = r.defaultImagePlaceholderUrl ? r.defaultImagePlaceholderUrl : o ? u : g, { brandingLogo: a } = s(
-    r.classicQuiz.branding || null
-  );
-  return /* @__PURE__ */ t.jsx(
-    c,
-    {
-      entity: r.classicQuiz,
-      headline: e("classicQuiz.headline"),
-      tryAgainButtonText: e("classicQuiz.buttons.tryAgain"),
-      defaultImagePlaceholderUrl: l,
-      isApiError: r.isApiError,
-      toggleTryAgain: r.toggleTryAgain,
-      renderPresentedBy: (m) => {
-        var i;
-        return /* @__PURE__ */ t.jsx(
-          d,
-          {
-            brandingLogo: a,
-            textColor: m,
-            label: ((i = r.classicQuiz.labels) == null ? void 0 : i.sponsor) || null
-          }
-        );
-      },
-      rulesDisplay: r.rulesDisplay
-    }
-  );
-};
-export {
-  U as default
-};

package/packages/classic-quiz-play/src/components/Variants/Overlay/LeadCollection/OverlayLeadAfterCollection.js

@@ -1,35 +0,0 @@
-import { j as i } from "../../../../../../../node_modules/react/jsx-runtime.js";
-import "react";
-import "../../../../../../common/src/providers/ContainerProvider.js";
-import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
-import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import "@mui/joy";
-import "../../../../../../common/src/providers/ConstantsProvider.js";
-import m from "../../../../../../common/src/components/LeadCollection/OverlayLeadAfterCollection.js";
-import r from "../../../../assets/default-quiz-bg.png.js";
-import a from "../../../../assets/default-quiz-bg-vertical.jpg.js";
-import l from "../../../Shared/PresentedBy.js";
-import o from "../../../Leads/CollectLeadWrapper.js";
-import { useTranslation as d } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const P = (e) => {
-  const { t } = d();
-  return /* @__PURE__ */ i.jsx(
-    m,
-    {
-      entity: e.classicQuiz,
-      headline: t("classicQuiz.headline"),
-      sdk: e.sdk,
-      leads: e.leads,
-      defaultImagePlaceholder: e.defaultImagePlaceholderUrl || r,
-      mobileImagePlaceholder: a,
-      onLeadSubmitted: e.onLeadSubmitted,
-      isSubmitting: e.isSubmitting,
-      PresentedBy: l,
-      CollectLeadWrapper: o,
-      rulesDisplay: e.rulesDisplay
-    }
-  );
-};
-export {
-  P as default
-};