fansunited-frontend-components 0.0.31-RC3 → 0.0.31-RC5

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

@@ -0,0 +1,170 @@
+import { j as t } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as a, Button as _, Typography as l, AspectRatio as G } from "@mui/joy";
+import ue from "react";
+import Y from "../../../../../../node_modules/@mui/icons-material/esm/ArrowRightAlt.js";
+import { useSpacingScale as de, useInternalTheme as xe, isMobile as he, isLarge as ge } from "../../../../../common/src/functions/theme.js";
+import { extractBrandingProperties as fe } 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 { WidgetTemplate as ye } from "../../../../../common/src/enums/enums.js";
+import { useConstantContext as be } from "../../../../../common/src/hooks/useConstantContext.js";
+import { ConstantsContext as Ce } from "../../../../../common/src/providers/ConstantsProvider.js";
+import Qe from "../../../../../common/src/components/Skeletons/Overlay/OverlaySkeleton.js";
+import { useImageUrl as ze } from "../../../../../common/src/hooks/useImageUrl.js";
+import { useImageVariant as je } from "../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import Se from "../../Shared/Answers/Answers.js";
+import qe from "../../Shared/Stopwatch.js";
+import Te from "../../../assets/default-quiz-bg.png.js";
+import we from "../../../assets/default-quiz-bg-vertical.jpg.js";
+import Ie from "../../Shared/PresentedBy.js";
+import ke from "../../Leads/CollectLeadWrapper.js";
+import { quizTypes as Be } from "../../../constants/constants.js";
+import { useEmbedCode as Le } from "../../../hooks/useEmbedCodeContainer.js";
+import { createStyles as Pe } from "./OverlayVariant.styles.js";
+import { useTranslation as Re } from "../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const nt = (e) => {
+  var x, h, g, f, y, b, C, Q, z, j, S, q, T, w, I, k, B, L, P, R, A, U, D, F, v, O;
+  const [c, H] = ue.useState(
+    ((x = e.leads) == null ? void 0 : x.position) === "before" && e.classicQuiz.authRequirement === "LEAD"
+  ), { optionsLayout: J } = be(Ce), K = de(), n = xe(), m = he(), u = ge(), r = ze(e.question.images), { t: o } = Re(), X = Le(
+    e.question.embedCode,
+    e.applyFilterScreen
+  ), { brandingImage: Z, brandingColors: s, brandingLogo: $ } = fe(e.classicQuiz.branding || null), p = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : m ? we : Te, ee = Z || je(
+    {
+      images: e.classicQuiz.images,
+      imagePlaceholder: p
+    },
+    ye.OVERLAY
+  ), te = e.currentQuestion === e.classicQuiz.questionsCount && ((h = e.leads) == null ? void 0 : h.position) === "after" ? o("classicQuiz.buttons.continue") : e.currentQuestion === e.classicQuiz.questionsCount ? o("classicQuiz.buttons.finish") : o("classicQuiz.buttons.next"), ie = n.customRadius.dark.sm, se = (s == null ? void 0 : s.backgroundColor) || ((f = (g = n.colorSchemes) == null ? void 0 : g.dark) == null ? void 0 : f.surfaceVariant), ne = (b = (y = n.customRadius) == null ? void 0 : y.light) == null ? void 0 : b.xl, ae = (s == null ? void 0 : s.primaryColor) || ((j = (z = (Q = (C = n.colorSchemes) == null ? void 0 : C.light) == null ? void 0 : Q.palette) == null ? void 0 : z.primary) == null ? void 0 : j.plainColor), oe = (w = (T = (q = (S = n.colorSchemes) == null ? void 0 : S.light) == null ? void 0 : q.palette) == null ? void 0 : T.primary) == null ? void 0 : w.onPrimary, le = n.customFontFamily.dark.primary, ce = (s == null ? void 0 : s.contentColor) || n.colorSchemes.dark.textColor, re = n.colorSchemes.dark.textColor, i = Pe({
+    spacingScale: K,
+    smBorderRadius: ie,
+    contentBgColor: se,
+    buttonRadius: ne,
+    primaryColor: ae,
+    onPrimaryColor: oe,
+    fontFamilyPrimary: le,
+    secondaryColor: ce,
+    darkTextColor: re,
+    isMobile: m,
+    isLarge: u
+  }), me = () => {
+    H(!1);
+  }, d = () => {
+    var W, E, N, V, M;
+    return /* @__PURE__ */ t.jsx(
+      Ie,
+      {
+        brandingLogo: $,
+        textColor: n.colorSchemes.dark.textColor,
+        label: ((W = e.classicQuiz.labels) == null ? void 0 : W.sponsor) || null,
+        primaryUrl: (N = (E = e.classicQuiz.branding) == null ? void 0 : E.urls) == null ? void 0 : N.primaryUrl,
+        secondaryUrl: (M = (V = e.classicQuiz.branding) == null ? void 0 : V.urls) == null ? void 0 : M.secondaryUrl
+      }
+    );
+  };
+  return /* @__PURE__ */ t.jsx(
+    Qe,
+    {
+      entity: e.classicQuiz,
+      headline: o("classicQuiz.headline"),
+      finalImage: ee,
+      rulesDisplay: e.rulesDisplay,
+      children: e.applyFilterScreen ? /* @__PURE__ */ t.jsxs(a, { sx: i.filterScreenBottomContainer, children: [
+        d(),
+        /* @__PURE__ */ t.jsx(
+          _,
+          {
+            variant: "soft",
+            sx: {
+              ...i.startButton,
+              ...i.pulseAnimation
+            },
+            endDecorator: /* @__PURE__ */ t.jsx(Y, {}),
+            onClick: e.startPlaying,
+            children: /* @__PURE__ */ t.jsx(l, { sx: i.startButtonText, children: o("classicQuiz.buttons.start") })
+          }
+        )
+      ] }) : /* @__PURE__ */ t.jsxs(a, { sx: i.mainContentSection, children: [
+        !c && Be.includes((I = e.classicQuiz.type) == null ? void 0 : I.toLocaleLowerCase()) && /* @__PURE__ */ t.jsx(a, { sx: i.stopwatchContainer, children: /* @__PURE__ */ t.jsx(
+          qe,
+          {
+            brandingPrimaryColor: (s == null ? void 0 : s.primaryColor) || null,
+            isRunning: e.isStopwatchRunning,
+            timer: e.stopwatchTime,
+            quizType: e.classicQuiz.type,
+            onTimeUpdate: e.onTimeUpdate,
+            initialTime: e.classicQuiz.time || 10
+          }
+        ) }),
+        /* @__PURE__ */ t.jsx(a, { sx: i.contentContainerWithBackdrop, children: c ? /* @__PURE__ */ t.jsx(
+          ke,
+          {
+            sdk: e.sdk,
+            startGame: me,
+            contentId: e.classicQuiz.id,
+            contentName: e.classicQuiz.title,
+            brandingColors: (k = e.classicQuiz.branding) == null ? void 0 : k.colors,
+            brandingUrls: (B = e.classicQuiz.branding) == null ? void 0 : B.urls,
+            campaignId: (L = e.leads) == null ? void 0 : L.campaignId,
+            campaignName: (P = e.leads) == null ? void 0 : P.campaignName,
+            fields: (R = e.leads) == null ? void 0 : R.fields,
+            leadTitle: (A = e.classicQuiz.labels) == null ? void 0 : A.leadTitle,
+            leadDescription: (U = e.classicQuiz.labels) == null ? void 0 : U.leadDescription,
+            leadCta: (D = e.classicQuiz.labels) == null ? void 0 : D.leadCta,
+            leadSuccessTitle: (F = e.classicQuiz.labels) == null ? void 0 : F.leadSuccessTitle,
+            leadSuccessDescription: (v = e.classicQuiz.labels) == null ? void 0 : v.leadSuccessDescription,
+            syncWithProfile: (O = e.leads) == null ? void 0 : O.syncWithProfile
+          }
+        ) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          e.question.embedCode && /* @__PURE__ */ t.jsx(G, { ratio: "16/9", sx: i.aspectRatioContainer, children: /* @__PURE__ */ t.jsx(a, { ref: X }) }),
+          !e.question.embedCode && r && /* @__PURE__ */ t.jsx(G, { ratio: "16/9", sx: i.questionImageContainer, children: /* @__PURE__ */ t.jsx(a, { sx: i.questionImageBox, children: /* @__PURE__ */ t.jsx(
+            "img",
+            {
+              src: r,
+              alt: "Question illustration",
+              style: i.questionImage
+            }
+          ) }) }),
+          /* @__PURE__ */ t.jsxs(a, { sx: i.questionSection, children: [
+            /* @__PURE__ */ t.jsxs(l, { level: "body-lg", sx: i.questionStepsText, children: [
+              e.currentQuestion,
+              "/",
+              e.classicQuiz.questionsCount
+            ] }),
+            /* @__PURE__ */ t.jsx(l, { level: "body-lg", sx: i.questionText, children: e.question.question })
+          ] }),
+          /* @__PURE__ */ t.jsx(
+            Se,
+            {
+              options: e.question.options || [],
+              answerQuestion: e.answerQuestion,
+              selectedOption: e.selectedOption,
+              showAnswer: e.showAnswer,
+              optionsLayout: u ? "column" : J ?? "row",
+              questionImage: r,
+              brandingColors: s
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ t.jsxs(a, { sx: i.bottomFooterContainer, children: [
+          d(),
+          !c && /* @__PURE__ */ t.jsx(
+            _,
+            {
+              variant: "soft",
+              disabled: e.selectedOption === null || e.showAnswer || e.isSubmitting,
+              sx: i.nextButton,
+              endDecorator: /* @__PURE__ */ t.jsx(Y, {}),
+              onClick: e.handleNext,
+              children: /* @__PURE__ */ t.jsx(l, { sx: i.nextButtonText, children: te })
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  nt as default
+};

package/packages/classic-quiz-play/src/components/Variants/Overlay/OverlayVariant.styles.js

@@ -0,0 +1,190 @@
+const o = (e) => ({
+  // Pulse animation for buttons
+  pulseAnimation: {
+    "@keyframes pulse": {
+      "0%": { transform: "scale(1)" },
+      "50%": { transform: "scale(1.05)" },
+      "100%": { transform: "scale(1)" }
+    }
+  },
+  // Filter screen bottom container
+  filterScreenBottomContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flexDirection: e.isMobile ? "column-reverse" : "row",
+    gap: e.spacingScale.md
+  },
+  // Start button (filter screen)
+  startButton: {
+    borderRadius: e.buttonRadius,
+    bgcolor: e.primaryColor,
+    color: "#FFFFFF",
+    py: "10px",
+    pr: "12px",
+    pl: "16px",
+    "&:hover": {
+      bgcolor: e.primaryColor
+    },
+    "&:active": {
+      color: e.onPrimaryColor
+    },
+    animation: "pulse 1s infinite",
+    fontSize: "0.9375em",
+    "--Icon-color": e.onPrimaryColor
+  },
+  // Start button text
+  startButtonText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 500,
+    fontSize: "0.9375em",
+    lineHeight: "24px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase",
+    color: e.onPrimaryColor,
+    gap: "8px",
+    display: "flex",
+    alignItems: "center"
+  },
+  // Main content section (non-filter screen)
+  mainContentSection: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "24px"
+  },
+  // Stopwatch container
+  stopwatchContainer: {
+    display: "flex",
+    justifyContent: "center"
+  },
+  // Content container with backdrop
+  contentContainerWithBackdrop: {
+    borderRadius: e.smBorderRadius,
+    p: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale.md,
+    backdropFilter: "blur(4px)",
+    position: "relative",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: e.contentBgColor,
+      opacity: 0.5,
+      borderRadius: "inherit",
+      zIndex: 0
+    },
+    "& > *": {
+      position: "relative",
+      zIndex: 1
+    }
+  },
+  // Aspect ratio container for embed/image
+  aspectRatioContainer: {
+    borderRadius: e.smBorderRadius
+  },
+  // Question image container
+  questionImageContainer: {
+    overflow: "hidden",
+    borderRadius: e.smBorderRadius
+  },
+  // Question image box
+  questionImageBox: {
+    borderRadius: e.smBorderRadius,
+    overflow: "hidden",
+    height: "auto"
+  },
+  // Question image
+  questionImage: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  },
+  // Question section
+  questionSection: {
+    display: e.isLarge ? "block" : "flex",
+    gap: "8px",
+    alignItems: "flex-start",
+    justifyContent: "center"
+  },
+  // Question steps typography
+  questionStepsText: {
+    fontFamily: e.fontFamilyPrimary,
+    lineHeight: "150%",
+    letterSpacing: "0.15px",
+    fontWeight: 500,
+    fontSize: "1.25em",
+    color: e.secondaryColor,
+    opacity: "70%",
+    textAlign: "center"
+  },
+  // Question text
+  questionText: {
+    fontFamily: e.fontFamilyPrimary,
+    lineHeight: "150%",
+    letterSpacing: "0.15px",
+    fontWeight: 500,
+    fontSize: "1.25em",
+    textAlign: "center",
+    color: e.darkTextColor
+  },
+  // Bottom footer container
+  bottomFooterContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: e.isMobile ? "center" : "space-between",
+    flexDirection: e.isMobile ? "column-reverse" : "row",
+    gap: e.spacingScale.md
+  },
+  // Next button
+  nextButton: {
+    borderRadius: e.buttonRadius,
+    py: "10px",
+    pr: "12px",
+    pl: "16px",
+    bgcolor: e.primaryColor,
+    color: e.onPrimaryColor,
+    transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+    transform: "scale(1)",
+    ml: e.isMobile ? 0 : { md: "auto" },
+    "&:hover": {
+      bgcolor: e.primaryColor,
+      transform: "scale(1.02)",
+      boxShadow: "var(--joy-shadow-md)"
+    },
+    "&:active": {
+      color: e.onPrimaryColor,
+      transform: "scale(0.98)",
+      boxShadow: "var(--joy-shadow-md)"
+    },
+    "&:disabled": {
+      bgcolor: e.primaryColor,
+      color: e.onPrimaryColor,
+      opacity: "34%",
+      boxShadow: "var(--joy-shadow-md)"
+    },
+    "--Icon-color": e.onPrimaryColor,
+    fontSize: "0.9375em",
+    boxShadow: "var(--joy-shadow-md)"
+  },
+  // Next button text
+  nextButtonText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 500,
+    fontSize: "0.9375em",
+    lineHeight: "24px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase",
+    color: e.onPrimaryColor,
+    gap: "8px",
+    display: "flex",
+    alignItems: "center"
+  }
+});
+export {
+  o as createStyles
+};

package/packages/classic-quiz-play/src/components/Variants/Overlay/ScoreState/OverlayScoreState.js

@@ -0,0 +1,177 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as a, Typography as n, Button as x } from "@mui/joy";
+import { useInternalTheme as w, useSpacingScale as L, isMobile as M, useImageBackgroundGradient as V } from "../../../../../../common/src/functions/theme.js";
+import { extractBrandingProperties as q, sanitizeBackgroundUrl as U } 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 { WidgetTemplate as c } from "../../../../../../common/src/enums/enums.js";
+import Y from "../../../../../../common/src/components/AdditionalCTA.js";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import G from "../../../../../../common/src/components/Skeletons/Overlay/ScoreState/OverlayScoreStateWrapperSkeleton.js";
+import H from "../../../../../../../node_modules/@mui/icons-material/esm/Replay.js";
+import { useImageVariant as N } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import D from "../../../../../../../node_modules/@mui/icons-material/esm/Share.js";
+import J from "../../../../assets/default-quiz-bg.png.js";
+import K from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import X from "../../../Shared/ScoreStateWrapper.js";
+import Z from "../../../Shared/PresentedBy.js";
+import { createStyles as _ } from "./OverlayScoreState.styles.js";
+import $ from "../../../Shared/AlertMessage.js";
+import { useScoreStateHelpers as ee } from "../../../../hooks/useScoreStateHelpers.js";
+import { useTranslation as te } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const ke = (o) => {
+  var d;
+  const r = w(), h = L(), { t: s } = te(), l = M(), g = V(
+    c.OVERLAY
+  ), y = o.defaultImagePlaceholderUrl ? o.defaultImagePlaceholderUrl : l ? K : J, { brandingImage: S, brandingColors: i, brandingLogo: j } = q(o.classicQuiz.branding || null), p = S || N(
+    {
+      images: o.classicQuiz.images,
+      imagePlaceholder: y
+    },
+    c.OVERLAY
+  ), {
+    getHexagonBackground: C,
+    formatTime: f,
+    displayCongratulations: b,
+    getRandomEmoji: A,
+    shareResult: T,
+    scorePercentage: k
+  } = ee({
+    summary: o.summary,
+    totalTime: o.totalTime,
+    classicQuiz: o.classicQuiz,
+    variant: c.OVERLAY
+  }), z = (i == null ? void 0 : i.primaryColor) || r.colorSchemes.light.palette.primary.plainColor, Q = (i == null ? void 0 : i.secondaryColor) || r.colorSchemes.dark.textSecondary, B = r.colorSchemes.dark.secondaryContainer, v = r.colorSchemes.light.palette.primary.onPrimary, I = r.colorSchemes.dark.textPrimary, P = r.customFontFamily.light.primary, R = r.customFontFamily.light.secondary, W = r.customRadius.light.md, F = r.customRadius.light.xl, E = (i == null ? void 0 : i.backgroundColor) || r.colorSchemes.dark.onSurface, O = U(p), t = _({
+    spacingScale: h,
+    primaryColor: z,
+    secondaryColor: Q,
+    secondaryContainer: B,
+    onPrimaryColor: v,
+    textPrimary: I,
+    fontFamilyPrimary: P,
+    fontFamilySecondary: R,
+    mdBorderRadius: W,
+    xlBorderRadius: F,
+    contentBgColor: E,
+    successColor: r.colorSchemes.dark.palette.success.plainColor,
+    dangerColor: r.colorSchemes.dark.palette.danger.plainColor,
+    onSurfaceColor: r.colorSchemes.dark.onSurface,
+    scorePercentage: k,
+    isMobile: l
+  }), m = () => {
+    var u;
+    return /* @__PURE__ */ e.jsxs(a, { sx: t.mainContentWrapper, children: [
+      o.summary.classicQuizId ? /* @__PURE__ */ e.jsx(a, { sx: t.scoreContainer, children: /* @__PURE__ */ e.jsxs(a, { sx: t.scoreContentWrapper, children: [
+        /* @__PURE__ */ e.jsx(a, { sx: t.scoreSection, children: /* @__PURE__ */ e.jsx(a, { sx: t.scoreSectionWrapper, children: /* @__PURE__ */ e.jsxs(a, { sx: t.textSection, children: [
+          /* @__PURE__ */ e.jsxs(a, { sx: t.achievementBadgeContainer, children: [
+            /* @__PURE__ */ e.jsx(
+              "img",
+              {
+                style: t.hexagonBackground,
+                src: C(),
+                alt: "achievement-badge-background"
+              }
+            ),
+            /* @__PURE__ */ e.jsx(
+              "img",
+              {
+                style: t.achievementEmoji,
+                src: A("dark"),
+                alt: "achievement-badge"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e.jsx(n, { level: "body-lg", sx: t.congratulationsText, children: o.maxAttemptsReached ? s("classicQuiz.maxAttemptsReached") : b() }),
+          /* @__PURE__ */ e.jsx(a, { sx: t.scoreNumbersContainer, children: /* @__PURE__ */ e.jsxs(a, { sx: t.scoreNumbersWrapper, children: [
+            /* @__PURE__ */ e.jsx(n, { level: "h2", sx: t.correctScoreText, children: o.summary.correct }),
+            /* @__PURE__ */ e.jsxs(n, { level: "h2", sx: t.totalScoreText, children: [
+              "/",
+              o.summary.classicQuizQuestions
+            ] })
+          ] }) }),
+          o.classicQuiz.type && o.classicQuiz.type.toLocaleLowerCase() === "timed" ? /* @__PURE__ */ e.jsxs(n, { level: "body-md", sx: t.timeText, children: [
+            s("classicQuiz.youDidItFor"),
+            " ",
+            f()
+          ] }) : null,
+          o.classicQuiz.scored ? /* @__PURE__ */ e.jsxs(n, { level: "body-lg", sx: t.pointsText, children: [
+            s("classicQuiz.youWon"),
+            " ",
+            o.summary.correct * o.classicQuiz.points,
+            " ",
+            s("common.labels.points")
+          ] }) : null
+        ] }) }) }),
+        /* @__PURE__ */ e.jsx(a, { sx: t.ctaSection, children: /* @__PURE__ */ e.jsxs(a, { sx: t.ctaContentWrapper, children: [
+          /* @__PURE__ */ e.jsx(n, { level: "body-lg", sx: t.thanksText, children: s("classicQuiz.thanksForPlaying") }),
+          /* @__PURE__ */ e.jsxs(a, { sx: t.buttonsContainer, children: [
+            !o.maxAttemptsReached && /* @__PURE__ */ e.jsx(
+              x,
+              {
+                sx: t.playAgainButton,
+                onClick: o.playAgain,
+                children: /* @__PURE__ */ e.jsxs(a, { sx: t.playAgainButtonContent, children: [
+                  /* @__PURE__ */ e.jsx(H, { sx: t.playAgainIcon }),
+                  /* @__PURE__ */ e.jsx(n, { sx: t.playAgainText, children: s("classicQuiz.buttons.playAgain") })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ e.jsx(x, { sx: t.shareButton, onClick: T, children: /* @__PURE__ */ e.jsxs(a, { sx: t.shareButtonContent, children: [
+              /* @__PURE__ */ e.jsx(D, { style: t.shareIcon }),
+              /* @__PURE__ */ e.jsx(n, { sx: t.shareText, children: s("classicQuiz.buttons.share") })
+            ] }) }),
+            /* @__PURE__ */ e.jsx(
+              Y,
+              {
+                additionalCTA: o.additionalCTA,
+                buttonStyle: t.additionalCTAButton,
+                buttonContentStyle: t.additionalCTAButtonContent,
+                textStyle: t.additionalCTAText
+              }
+            )
+          ] })
+        ] }) })
+      ] }) }) : /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(
+        $,
+        {
+          variant: "error",
+          title: s("common.authentication.accessRequired"),
+          message: s("common.authentication.invalidOrMissingAuth")
+        }
+      ) }),
+      /* @__PURE__ */ e.jsx(
+        Z,
+        {
+          brandingLogo: j,
+          textColor: r.colorSchemes.dark.textColor,
+          label: ((u = o.classicQuiz.labels) == null ? void 0 : u.sponsor) || null
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ e.jsx(
+    G,
+    {
+      entity: o.classicQuiz,
+      backgroundImage: O,
+      imageBackgroundGradient: g,
+      isWrappedWithScoreStateWrapper: o.showAnswerExplanations,
+      children: o.showAnswerExplanations ? /* @__PURE__ */ e.jsx(
+        X,
+        {
+          questions: o.classicQuiz.questions,
+          userParticipation: o.summary.answers,
+          resultsTabPanelSxProps: { p: 0, fontSize: "1.25em" },
+          isOverlayVariant: !0,
+          brandingColors: (d = o.classicQuiz.branding) == null ? void 0 : d.colors,
+          children: /* @__PURE__ */ e.jsx(a, { sx: t.scoreStateWrapperContent, children: m() })
+        }
+      ) : m()
+    }
+  );
+};
+export {
+  ke as default
+};