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

package/packages/match-quiz-play/src/components/Variants/Split/ScoreState/MatchQuizSplitScoreState.js

@@ -0,0 +1,164 @@
+import { j as i } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as n } from "@mui/joy";
+import { useInternalTheme as O, isMobile as H, isLarge as N, useColors as s, useFontFamily as G, useCornerRadius as J, useSpacingScale as K, useBorderSize as X } from "../../../../../../common/src/functions/theme.js";
+import { hexToRgb as I } 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 Y } from "../../../../../../common/src/enums/enums.js";
+import Z from "../../../../../../common/src/components/AdditionalCTA.js";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import _ from "../../../../../../common/src/components/Skeletons/Split/ScoreState/SplitScoreStateSkeleton.js";
+import { useImageVariant as ee } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import te from "../../../Shared/MainCard.js";
+import ie from "../../../../assets/default-quiz-bg.png.js";
+import oe from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import M from "../../../Shared/PresentedBy.js";
+import { createStyles as re } from "./MatchQuizSplitScoreState.styles.js";
+import ne from "../../../Shared/AlertMessage.js";
+import ae from "../../../Shared/Summary/PredictionSummary.js";
+import { useTranslation as le } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const Me = (e) => {
+  var x, f, h, S, b, p, z, C, j;
+  const A = O(), { t: c } = le(), r = H(), y = N(), R = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : r ? oe : ie, v = ee(
+    {
+      images: e.matchQuiz.images,
+      imagePlaceholder: R
+    },
+    Y.SPLIT
+  ), t = ((x = e.matchQuiz.branding) == null ? void 0 : x.colors) || null, B = (t == null ? void 0 : t.secondaryColor) || s().textSecondary, m = s().secondaryContainer, L = G().primary, d = (t == null ? void 0 : t.backgroundColor) || s().surfaceVariant, u = J(), w = s().textColor, o = K(), E = X().size, a = r ? ((f = e.matchQuiz.branding) == null ? void 0 : f.images.mobileLogo) || ((h = e.matchQuiz.branding) == null ? void 0 : h.images.mainLogo) || "" : ((S = e.matchQuiz.branding) == null ? void 0 : S.images.mainLogo) || "", F = e.matchQuiz.status === "OPEN" && e.prediction && e.squads && e.onPredictionUpdate, k = (l) => {
+    console.log(`Edit prediction for fixture at index: ${l}`);
+  }, D = !y && a ? /* @__PURE__ */ i.jsx(
+    M,
+    {
+      brandingLogo: a,
+      textColor: (t == null ? void 0 : t.contentColor) || A.colorSchemes.dark.textColor,
+      label: ((b = e.matchQuiz.labels) == null ? void 0 : b.sponsor) || null,
+      primaryUrl: (z = (p = e.matchQuiz.branding) == null ? void 0 : p.urls) == null ? void 0 : z.primaryUrl,
+      secondaryUrl: (j = (C = e.matchQuiz.branding) == null ? void 0 : C.urls) == null ? void 0 : j.secondaryUrl
+    }
+  ) : null, g = re({
+    spacingScale: o,
+    borderRadius: u,
+    bgcolor: I(d || ""),
+    isMobile: r
+  }), $ = {
+    display: "flex",
+    py: r ? o.xs : o.sm,
+    px: r ? o.sm : o.md,
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    borderRadius: u.xl,
+    bgcolor: m,
+    border: `${E} solid ${m}`,
+    "&:hover": {
+      bgcolor: m,
+      opacity: 0.9
+    },
+    fontSize: r ? "0.750em" : "0.8125em",
+    textTransform: "uppercase"
+  }, q = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px"
+  }, V = {
+    color: B,
+    fontFamily: L,
+    fontStyle: "normal",
+    fontWeight: 500,
+    lineHeight: "22px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase"
+  }, W = () => {
+    var l, P, Q, T, U;
+    return /* @__PURE__ */ i.jsx(
+      _,
+      {
+        entity: e.matchQuiz,
+        headline: c("matchQuiz.headline"),
+        finalImage: v,
+        brandingContent: D,
+        isTabulated: !1,
+        alwaysShowImage: !0,
+        rulesDisplay: e.rulesDisplay,
+        children: e.isUnauthorized ? /* @__PURE__ */ i.jsx(n, { sx: g.alertMessageArea, children: /* @__PURE__ */ i.jsx(n, { sx: g.alertMessageWrapper, children: /* @__PURE__ */ i.jsx(
+          ne,
+          {
+            variant: "error",
+            title: c("common.authentication.accessRequired"),
+            message: c("common.authentication.invalidOrMissingAuth")
+          }
+        ) }) }) : /* @__PURE__ */ i.jsxs(n, { sx: g.questionAreaContent, children: [
+          /* @__PURE__ */ i.jsx(
+            n,
+            {
+              sx: {
+                p: o.lg,
+                gap: o.lg,
+                display: "flex",
+                flexDirection: "column",
+                backdropFilter: "blur(4px)",
+                bgcolor: `rgba(${d ? I(d || "").replace(/[^\d,]/g, "") : ""}, 0.5)`,
+                borderRadius: u.sm,
+                position: "relative",
+                overflow: "visible"
+              },
+              children: F ? /* @__PURE__ */ i.jsx(
+                ae,
+                {
+                  fixtures: e.matchQuiz.fixtures,
+                  prediction: e.prediction,
+                  brandingPrimaryColor: t == null ? void 0 : t.primaryColor,
+                  onEditPrediction: k,
+                  onPredictionUpdate: e.onPredictionUpdate,
+                  play: e.play,
+                  view: "score",
+                  isSplitVariant: !0,
+                  onPlayResult: e.onPlayResult
+                }
+              ) : null
+            }
+          ),
+          e.additionalCTA && /* @__PURE__ */ i.jsx(
+            n,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                padding: r ? o.sm : o.md
+              },
+              children: /* @__PURE__ */ i.jsx(
+                Z,
+                {
+                  additionalCTA: e.additionalCTA,
+                  buttonStyle: $,
+                  buttonContentStyle: q,
+                  textStyle: V
+                }
+              )
+            }
+          ),
+          y && a && /* @__PURE__ */ i.jsx(
+            M,
+            {
+              brandingLogo: a,
+              textColor: (t == null ? void 0 : t.contentColor) || w,
+              label: ((l = e.matchQuiz.labels) == null ? void 0 : l.sponsor) || null,
+              primaryUrl: (Q = (P = e.matchQuiz.branding) == null ? void 0 : P.urls) == null ? void 0 : Q.primaryUrl,
+              secondaryUrl: (U = (T = e.matchQuiz.branding) == null ? void 0 : T.urls) == null ? void 0 : U.secondaryUrl
+            }
+          )
+        ] })
+      }
+    );
+  };
+  return /* @__PURE__ */ i.jsx(te, { brandingBorderColor: (t == null ? void 0 : t.borderColor) || null, children: W() });
+};
+export {
+  Me as default
+};

package/packages/match-quiz-play/src/components/Variants/Split/ScoreState/MatchQuizSplitScoreState.styles.js

@@ -0,0 +1,27 @@
+const i = (e) => ({
+  // Question area content wrapper
+  questionAreaContent: {
+    p: e.spacingScale.lg,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    gap: e.spacingScale.lg,
+    flex: 1,
+    height: "100%"
+  },
+  alertMessageArea: {
+    flex: e.isMobile ? 1 : "0 0 50%",
+    width: e.isMobile ? "100%" : "50%",
+    minWidth: e.isMobile ? "100%" : "50%",
+    maxWidth: e.isMobile ? "100%" : "50%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center"
+  },
+  alertMessageWrapper: {
+    p: e.spacingScale.lg
+  }
+});
+export {
+  i as createStyles
+};

package/packages/match-quiz-play/src/components/Variants/Split/SignIn/MatchQuizSplitSignIn.js

@@ -0,0 +1,118 @@
+import { j as i } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Button as a, Typography as r, Box as P } from "@mui/joy";
+import { useInternalTheme as w, isMobile as v, useFontFamily as D, useCornerRadius as F, useColors as y } 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 { WidgetTemplate as M } from "../../../../../../common/src/enums/enums.js";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import R from "../../../../../../common/src/components/Skeletons/Split/SignIn/SplitSignInSkeleton.js";
+import { useImageVariant as _ } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import U from "../../../Shared/MainCard.js";
+import E from "../../../../assets/default-quiz-bg.png.js";
+import V from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import W from "../../../Shared/PresentedBy.js";
+import { createStyles as q } from "./MatchQuizSplitSignIn.styles.js";
+import { useTranslation as G } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const sn = (n) => {
+  var s, m, g, u, c;
+  const b = w(), l = v(), A = n.defaultImagePlaceholderUrl ? n.defaultImagePlaceholderUrl : l ? V : E, j = _(
+    {
+      images: n.matchQuiz.images,
+      imagePlaceholder: A
+    },
+    M.SPLIT
+  ), { t: o } = G(), e = ((s = n.matchQuiz.branding) == null ? void 0 : s.colors) || null, B = l ? ((m = n.matchQuiz.branding) == null ? void 0 : m.images.mobileLogo) || ((g = n.matchQuiz.branding) == null ? void 0 : g.images.mainLogo) || "" : ((u = n.matchQuiz.branding) == null ? void 0 : u.images.mainLogo) || "", z = D().primary, L = F().xl, Q = (e == null ? void 0 : e.primaryColor) || y().palette.primary.plainColor, S = y().palette.primary.onPrimary, t = q({
+    fontFamilyPrimary: z,
+    buttonRadius: L,
+    primaryColor: Q,
+    onPrimaryColor: S
+  }), k = () => {
+    var d, I, f, x;
+    return n.signInCTA ? (d = n.signInCTA) != null && d.component ? n.signInCTA.component : (I = n.signInCTA) != null && I.onClick ? /* @__PURE__ */ i.jsx(
+      a,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton,
+          ...t.pulseAnimation
+        },
+        onClick: n.signInCTA.onClick,
+        children: /* @__PURE__ */ i.jsx(r, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || o("common.signIn") })
+      }
+    ) : (f = n.signInCTA) != null && f.url ? typeof window > "u" ? /* @__PURE__ */ i.jsx(
+      P,
+      {
+        component: "a",
+        href: n.signInCTA.url,
+        target: ((x = n.signInCTA) == null ? void 0 : x.target) || "_self",
+        sx: {
+          ...t.signInButton,
+          ...t.pulseAnimation,
+          textDecoration: "none",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ i.jsx(r, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || o("common.signIn") })
+      }
+    ) : /* @__PURE__ */ i.jsx(
+      a,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton,
+          ...t.pulseAnimation
+        },
+        onClick: () => {
+          var h, C, T;
+          ((h = n.signInCTA) == null ? void 0 : h.target) === "_blank" ? window.open((C = n.signInCTA) == null ? void 0 : C.url, "_blank") : window.location.href = (T = n.signInCTA) == null ? void 0 : T.url;
+        },
+        children: /* @__PURE__ */ i.jsx(r, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || o("common.signIn") })
+      }
+    ) : /* @__PURE__ */ i.jsx(
+      a,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton
+        },
+        disabled: !0,
+        children: /* @__PURE__ */ i.jsx(r, { sx: t.signInButtonText, children: n.signInCTA.defaultLabel || o("common.signIn") })
+      }
+    ) : /* @__PURE__ */ i.jsx(
+      a,
+      {
+        variant: "soft",
+        sx: {
+          ...t.signInButton
+        },
+        disabled: !0,
+        children: /* @__PURE__ */ i.jsx(r, { sx: t.signInButtonText, children: o("common.signIn") })
+      }
+    );
+  };
+  return /* @__PURE__ */ i.jsx(U, { brandingBorderColor: (e == null ? void 0 : e.borderColor) || null, children: /* @__PURE__ */ i.jsx(
+    R,
+    {
+      entity: n.matchQuiz,
+      headline: o("matchQuiz.headline"),
+      finalImage: j,
+      signInContent: k(),
+      brandingContent: /* @__PURE__ */ i.jsx(
+        W,
+        {
+          brandingLogo: B,
+          textColor: (e == null ? void 0 : e.contentColor) || b.colorSchemes.dark.textColor,
+          label: ((c = n.matchQuiz.labels) == null ? void 0 : c.sponsor) || null,
+          isCentered: l
+        }
+      ),
+      rulesDisplay: n.rulesDisplay
+    }
+  ) });
+};
+export {
+  sn as default
+};

package/packages/match-quiz-play/src/components/Variants/Split/SignIn/MatchQuizSplitSignIn.styles.js

@@ -0,0 +1,52 @@
+const o = (r) => ({
+  // Pulse animation for buttons
+  pulseAnimation: {
+    "@keyframes pulse": {
+      "0%": { transform: "scale(1)" },
+      "50%": { transform: "scale(1.05)" },
+      "100%": { transform: "scale(1)" }
+    }
+  },
+  // Sign in button
+  signInButton: {
+    borderRadius: r.buttonRadius,
+    py: "10px",
+    px: "16px",
+    bgcolor: r.primaryColor,
+    color: r.onPrimaryColor,
+    transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+    transform: "scale(1)",
+    alignSelf: "center",
+    "&:hover": {
+      bgcolor: r.primaryColor,
+      transform: "scale(1.02)"
+    },
+    "&:active": {
+      color: r.onPrimaryColor,
+      transform: "scale(0.98)"
+    },
+    "&:disabled": {
+      bgcolor: r.primaryColor,
+      color: r.onPrimaryColor,
+      opacity: "12%"
+    },
+    animation: "pulse 1s infinite",
+    fontSize: "0.9375em"
+  },
+  // Sign in button text
+  signInButtonText: {
+    fontFamily: r.fontFamilyPrimary,
+    fontWeight: 500,
+    fontSize: "0.9375em",
+    lineHeight: "24px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase",
+    color: r.onPrimaryColor,
+    gap: "8px",
+    display: "flex",
+    alignItems: "center"
+  }
+});
+export {
+  o as createStyles
+};

package/packages/match-quiz-play/src/components/Variants/Standard/Error/MatchQuizStandardError.js

@@ -0,0 +1,43 @@
+import { j as t } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { isMobile as u } 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 "@mui/joy";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import s from "../../../../../../common/src/components/Skeletons/Standard/ApiError/StandardApiErrorSkeleton.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import c from "../../../Shared/MainCard.js";
+import h from "../../../Shared/PresentedBy.js";
+import { useTranslation as b } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const M = (i) => {
+  var o, e, n, m;
+  const r = ((o = i.matchQuiz.branding) == null ? void 0 : o.colors) || null, g = u() ? ((e = i.matchQuiz.branding) == null ? void 0 : e.images.mobileLogo) || ((n = i.matchQuiz.branding) == null ? void 0 : n.images.mainLogo) || "" : ((m = i.matchQuiz.branding) == null ? void 0 : m.images.mainLogo) || "", { t: a } = b();
+  return /* @__PURE__ */ t.jsx(c, { brandingBorderColor: (r == null ? void 0 : r.borderColor) || null, children: /* @__PURE__ */ t.jsx(
+    s,
+    {
+      entity: i.matchQuiz,
+      headline: a("matchQuiz.headline"),
+      tryAgainButtonText: a("matchQuiz.buttons.tryAgain"),
+      defaultImagePlaceholderUrl: i.defaultImagePlaceholderUrl,
+      imagePosition: i.imagePosition || "left",
+      isApiError: i.isApiError,
+      toggleTryAgain: i.toggleTryAgain,
+      renderPresentedBy: (d) => {
+        var l;
+        return /* @__PURE__ */ t.jsx(
+          h,
+          {
+            brandingLogo: g,
+            textColor: d,
+            label: ((l = i.matchQuiz.labels) == null ? void 0 : l.sponsor) || null
+          }
+        );
+      },
+      rulesDisplay: i.rulesDisplay
+    }
+  ) });
+};
+export {
+  M as default
+};

package/packages/match-quiz-play/src/components/Variants/Standard/FinishedGame/MatchQuizStandardFinishedGame.js

@@ -0,0 +1,234 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as a, Typography as s } from "@mui/joy";
+import { useInternalTheme as J, isMobile as K, isExtraSmall as X, useColors as n, useFontFamily as D, useCornerRadius as Y, useBorderSize as Z, useSpacingScale as _, useImageBackgroundGradient as ee } from "../../../../../../common/src/functions/theme.js";
+import { hexToRgb as k, stripHtmlTags as y } 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 I } from "../../../../../../common/src/enums/enums.js";
+import f from "../../../../../../common/src/components/Rules.js";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import { useImageVariant as ie } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import te from "../../../Shared/MainCard.js";
+import ae from "../../../Shared/PresentedBy.js";
+import { createStyles as re } from "./MatchQuizStandardFinishedGame.styles.js";
+import { useMatchQuizLeaderboard as se } from "../../../../hooks/useMatchQuizLeaderboard.js";
+import ne from "../../../Shared/Leaderboard/LeaderboardComponent.js";
+import oe from "../../../Shared/Leaderboard/RoundedPagination.js";
+import le from "../../../Shared/FinishedGameWrapper/FinishedGameWrapper.js";
+import { useMatchQuizMarketsResults as ce } from "../../../../hooks/useMatchQuizMarketsResults.js";
+import { useTranslation as me } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const Fe = (i) => {
+  var b, z, Q, S, P;
+  const d = J(), l = ie(
+    {
+      images: i.matchQuiz.images,
+      imagePlaceholder: i.defaultImagePlaceholderUrl ? i.defaultImagePlaceholderUrl : ""
+    },
+    I.STANDARD
+  ), { t: x } = me(), r = ((b = i.matchQuiz.branding) == null ? void 0 : b.colors) || null, o = K(), j = X(), u = o ? ((z = i.matchQuiz.branding) == null ? void 0 : z.images.mobileLogo) || ((Q = i.matchQuiz.branding) == null ? void 0 : Q.images.mainLogo) || "" : ((S = i.matchQuiz.branding) == null ? void 0 : S.images.mainLogo) || "", c = i.imagePosition || "left", M = n().textPrimary, R = (r == null ? void 0 : r.primaryColor) || n().palette.primary.plainColor, p = (r == null ? void 0 : r.contentColor) || n().textColor, F = D().secondary, A = D().primary, B = n().surface, L = `rgba(${k(
+    (r == null ? void 0 : r.backgroundColor) || n().surfaceVariant
+  )}, 0.5)`, v = n().onSurface, V = Y(), w = Z().size, h = _(), H = `rgba(${k(
+    n().surfaceVariant || ""
+  )}, 0.5)`, O = ee(
+    I.STANDARD
+  ), W = "60%", G = (r == null ? void 0 : r.secondaryColor) || n().textColor, { leaderboard: q, userRankings: g, pagination: m, currentPage: E, goToPage: N } = se(i.matchQuiz.id, i.sdk), U = ce(
+    i.matchQuiz.id,
+    i.sdk,
+    i.showPredictionDetails || !1
+  ), t = re({
+    finalImage: l,
+    spacingScale: h,
+    borderRadius: V,
+    fontFamilyPrimary: A,
+    fontFamilySecondary: F,
+    textPrimary: M,
+    primaryColor: R,
+    textColor: p,
+    bgcolor: L,
+    buttonBgColor: B,
+    onSurfaceColor: v,
+    borderSize: w,
+    surfaceVariant: H,
+    brandingColors: r,
+    imagePosition: c,
+    successColor: d.colorSchemes.light.palette.success.plainColor,
+    dangerColor: d.colorSchemes.light.palette.danger.plainColor,
+    onPrimaryColor: d.colorSchemes.light.palette.primary.onPrimary,
+    isMobile: o,
+    imageBackgroundGradient: O,
+    darkTextColor: d.colorSchemes.dark.textColor,
+    opacity: W,
+    secondaryColor: G,
+    isExtraSmall: j
+  }), C = () => {
+    var T;
+    return /* @__PURE__ */ e.jsxs(a, { sx: t.mainContentArea, children: [
+      !o && /* @__PURE__ */ e.jsx(a, { children: /* @__PURE__ */ e.jsx(a, { sx: t.desktopHeadlineContainer, children: /* @__PURE__ */ e.jsxs(a, { children: [
+        /* @__PURE__ */ e.jsxs(
+          a,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: h["3xs"]
+            },
+            children: [
+              /* @__PURE__ */ e.jsx(
+                s,
+                {
+                  level: "body-sm",
+                  sx: t.headlineTypographyDesktop,
+                  children: x("matchQuiz.headline")
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                f,
+                {
+                  rules: i.matchQuiz.rules || "",
+                  rulesDisplay: i.rulesDisplay,
+                  isOverlayVariant: !1
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e.jsxs(a, { sx: t.contentContainer, children: [
+          /* @__PURE__ */ e.jsx(s, { level: "h4", sx: t.titleTypographyDesktop, children: i.matchQuiz.title }),
+          /* @__PURE__ */ e.jsx(s, { sx: t.descriptionTypographyDesktop, children: y(i.matchQuiz.description) })
+        ] })
+      ] }) }) }),
+      /* @__PURE__ */ e.jsx(a, { sx: t.questionArea, children: /* @__PURE__ */ e.jsx(a, { sx: t.questionContainer, children: /* @__PURE__ */ e.jsx(a, { sx: t.questionContentContainer, children: /* @__PURE__ */ e.jsx(
+        ne,
+        {
+          leaderboard: q,
+          userRankings: g,
+          matchQuiz: i.matchQuiz,
+          showHeading: !i.showPredictionDetails
+        }
+      ) }) }) }),
+      u || g && m && m.numberOfPages > 1 ? /* @__PURE__ */ e.jsxs(a, { sx: t.presentedByContainer, children: [
+        u ? /* @__PURE__ */ e.jsx(
+          ae,
+          {
+            brandingLogo: u,
+            textColor: p,
+            label: ((T = i.matchQuiz.labels) == null ? void 0 : T.sponsor) || null
+          }
+        ) : /* @__PURE__ */ e.jsx(e.Fragment, {}),
+        g && m && m.numberOfPages > 1 && /* @__PURE__ */ e.jsx(
+          a,
+          {
+            sx: {
+              ...t.paginationContainer,
+              ml: j ? "0" : "auto"
+            },
+            children: /* @__PURE__ */ e.jsx(
+              oe,
+              {
+                count: m.numberOfPages,
+                page: E,
+                onChange: N,
+                size: o ? "sm" : "md",
+                showFirstButton: !1,
+                showLastButton: !1,
+                siblingCount: o ? 0 : 1
+              }
+            )
+          }
+        )
+      ] }) : /* @__PURE__ */ e.jsx(e.Fragment, {})
+    ] });
+  }, $ = () => o ? l ? /* @__PURE__ */ e.jsx(a, { sx: t.mobileHeadlineWithImage, children: /* @__PURE__ */ e.jsx(a, { sx: t.mobileHeadlineContent, children: /* @__PURE__ */ e.jsxs(a, { children: [
+    /* @__PURE__ */ e.jsxs(
+      a,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: h["3xs"]
+        },
+        children: [
+          /* @__PURE__ */ e.jsx(
+            s,
+            {
+              level: "body-sm",
+              sx: t.headlineTypographyMobileImage,
+              children: x("matchQuiz.headline")
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            f,
+            {
+              rules: i.matchQuiz.rules || "",
+              rulesDisplay: i.rulesDisplay,
+              isOverlayVariant: !1
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e.jsxs(a, { sx: t.contentContainer, children: [
+      /* @__PURE__ */ e.jsx(s, { sx: t.titleTypographyMobileImage, children: i.matchQuiz.title }),
+      /* @__PURE__ */ e.jsx(s, { sx: t.descriptionTypographyMobileImage, children: y(i.matchQuiz.description) })
+    ] })
+  ] }) }) }) : /* @__PURE__ */ e.jsx(a, { sx: t.mobileHeadlineWithoutImage, children: /* @__PURE__ */ e.jsxs(a, { children: [
+    /* @__PURE__ */ e.jsxs(
+      a,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: h["3xs"]
+        },
+        children: [
+          /* @__PURE__ */ e.jsx(s, { level: "body-sm", sx: t.headlineTypography, children: x("matchQuiz.headline") }),
+          /* @__PURE__ */ e.jsx(
+            f,
+            {
+              rules: i.matchQuiz.rules || "",
+              rulesDisplay: i.rulesDisplay,
+              isOverlayVariant: !1
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e.jsxs(a, { sx: t.contentContainer, children: [
+      /* @__PURE__ */ e.jsx(s, { level: "h4", sx: t.titleTypography, children: i.matchQuiz.title }),
+      /* @__PURE__ */ e.jsx(s, { sx: t.descriptionTypography, children: y(i.matchQuiz.description) })
+    ] })
+  ] }) }) : /* @__PURE__ */ e.jsx(e.Fragment, {});
+  return /* @__PURE__ */ e.jsx(te, { brandingBorderColor: (r == null ? void 0 : r.borderColor) || null, children: i.showPredictionDetails ? /* @__PURE__ */ e.jsx(
+    le,
+    {
+      prediction: i.prediction,
+      marketsResults: U,
+      brandingColors: (P = i.matchQuiz.branding) == null ? void 0 : P.colors,
+      resultsTabPanelSxProps: {
+        display: "flex",
+        flexDirection: o ? "column" : "row",
+        px: 0,
+        pb: 0,
+        pt: 0
+      },
+      children: /* @__PURE__ */ e.jsxs(a, { sx: t.scoreStateWrapperContainer, children: [
+        l && c === "left" && /* @__PURE__ */ e.jsx(a, { sx: t.imageContainerLeft, children: /* @__PURE__ */ e.jsx(a, { sx: t.imageSafeArea }) }),
+        C(),
+        l && c === "right" && /* @__PURE__ */ e.jsx(a, { sx: t.imageContainerRight, children: /* @__PURE__ */ e.jsx(a, { sx: t.imageSafeArea }) })
+      ] })
+    }
+  ) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    $(),
+    l && c === "left" && /* @__PURE__ */ e.jsx(a, { sx: t.imageContainerLeft, children: /* @__PURE__ */ e.jsx(a, { sx: t.imageSafeArea }) }),
+    C(),
+    l && c === "right" && /* @__PURE__ */ e.jsx(a, { sx: t.imageContainerRight, children: /* @__PURE__ */ e.jsx(a, { sx: t.imageSafeArea }) })
+  ] }) });
+};
+export {
+  Fe as default
+};