fansunited-frontend-components 0.0.31-RC4 → 0.0.31-RC5

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

@@ -0,0 +1,511 @@
+import { j as a } from "../../../../../../node_modules/react/jsx-runtime.js";
+import w, { useCallback as Q, useMemo as N } from "react";
+import { Box as l, Typography as C, Button as he } from "@mui/joy";
+import { useInternalTheme as Ne, isMobile as Fe, isLarge as Ge, useColors as E, useFontFamily as Ye, useCornerRadius as xe, useSpacingScale as He } from "../../../../../common/src/functions/theme.js";
+import { hexToRgb as $e } 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 Be } from "../../../../../common/src/enums/enums.js";
+import "../../../../../common/src/providers/ConstantsProvider.js";
+import Ue from "../../../../../common/src/components/Skeletons/Split/SplitSkeleton.js";
+import { useImageVariant as We } from "../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import qe from "../../Shared/MainCard.js";
+import Ke from "../../../assets/default-quiz-bg.png.js";
+import Xe from "../../../assets/default-quiz-bg-vertical.jpg.js";
+import Je from "../../Shared/PresentedBy.js";
+import Ze from "../../Leads/CollectLeadWrapper.js";
+import { createStyles as et } from "./MatchQuizSplitVariant.styles.js";
+import { MarketEnum as r } from "fansunited-sdk-esm";
+import tt from "../../Shared/Fixtures/CorrectScore/CorrectScoreFixture.js";
+import at from "../../Shared/Fixtures/1X2/OneXTwoFixture.js";
+import it from "../../Shared/Fixtures/Corners/CornersFixture.js";
+import rt from "../../Shared/Fixtures/YesNo/YesNoFixture.js";
+import nt from "../../Shared/Fixtures/Players/PlayersFixture.js";
+import ot from "../../Shared/Stepper.js";
+import st from "../../Shared/Countdown.js";
+import ct from "../../Shared/Summary/PredictionSummary.js";
+import { isPredictionsCutoffPassed as lt } from "../../../helpers/helpers.js";
+import { useTranslation as mt } from "../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const Nt = (t) => {
+  var q, K, X, J, Z, ee, te, ae, ie, re, ne, oe, se;
+  const [h, p] = w.useState(1), [fe, F] = w.useState(
+    ((q = t.leads) == null ? void 0 : q.position) === "before" && t.matchQuiz.authRequirement === "LEAD"
+  );
+  w.useEffect(() => {
+    var e;
+    F(
+      ((e = t.leads) == null ? void 0 : e.position) === "before" && t.matchQuiz.authRequirement === "LEAD" || !1
+    );
+  }, [(K = t.leads) == null ? void 0 : K.position, t.matchQuiz.authRequirement]);
+  const Ce = Ne(), { t: x } = mt(), A = Fe(), Se = Ge(), i = ((X = t.matchQuiz.branding) == null ? void 0 : X.colors) || null, L = A ? ((Z = (J = t.matchQuiz.branding) == null ? void 0 : J.images) == null ? void 0 : Z.mobileLogo) || ((te = (ee = t.matchQuiz.branding) == null ? void 0 : ee.images) == null ? void 0 : te.mainLogo) || "" : ((ie = (ae = t.matchQuiz.branding) == null ? void 0 : ae.images) == null ? void 0 : ie.mainLogo) || "", Re = t.defaultImagePlaceholderUrl ? t.defaultImagePlaceholderUrl : A ? Xe : Ke, ge = We(
+    {
+      images: t.matchQuiz.images,
+      imagePlaceholder: Re
+    },
+    Be.SPLIT
+  ), _e = E().palette.danger.plainColor, Ee = (i == null ? void 0 : i.contentColor) || E().textColor, ye = (i == null ? void 0 : i.secondaryColor) || E().textColor, b = Ye().primary, ke = (i == null ? void 0 : i.backgroundColor) || E().surfaceVariant, Oe = xe(), R = (i == null ? void 0 : i.primaryColor) || E().palette.primary.plainColor, y = E().palette.primary.onPrimary, G = xe().xl, k = He(), n = et({
+    spacingScale: k,
+    borderRadius: Oe,
+    fontFamilyPrimary: b,
+    bgcolor: $e(ke || ""),
+    textColor: Ee,
+    secondaryColor: ye,
+    isMobile: A,
+    dangerColor: _e
+  }), je = () => {
+    F(!1);
+  }, Y = Q(
+    (e, s, m) => {
+      const o = `${s}:${m}`;
+      t.setPrediction((c) => {
+        const d = { ...c }, f = d.fixtures.find((g) => g.market === e);
+        return f && (f.prediction.value = o), d;
+      });
+    },
+    [t.setPrediction]
+  ), H = Q(
+    (e, s) => {
+      t.setPrediction((m) => {
+        const o = { ...m }, c = o.fixtures.find(
+          (d) => d.market === e
+        );
+        return c && (c.prediction.value = s), o;
+      });
+    },
+    [t.setPrediction]
+  ), $ = Q(
+    (e, s) => {
+      t.setPrediction((m) => {
+        const o = { ...m }, c = o.fixtures.find(
+          (d) => d.market === e
+        );
+        return c && (c.prediction.playerId = s), o;
+      });
+    },
+    [t.setPrediction]
+  ), B = Q(
+    (e, s) => {
+      t.setPrediction((m) => {
+        const o = { ...m }, c = o.fixtures.find((d) => d.market === e);
+        return c && (c.prediction.value = s), o;
+      });
+    },
+    [t.setPrediction]
+  ), _ = t.matchQuiz.fixtures.length + 1, T = t.matchQuiz.status === "OPEN" && lt(t.matchQuiz.predictionsCutoff), Pe = () => {
+    h < _ ? p(h + 1) : t.play();
+  }, ze = (e) => {
+    p(e + 1);
+  }, Te = () => {
+    var m, o;
+    if (h === _) return !0;
+    const e = t.matchQuiz.fixtures[h - 1];
+    if (!e) return !1;
+    const s = (o = (m = t.prediction) == null ? void 0 : m.fixtures) == null ? void 0 : o.find(
+      (c) => c.market === e.market
+    );
+    return s ? e.market === r.CORRECT_SCORE || e.market === r.CORRECT_SCORE_HT || e.market === r.CORRECT_SCORE_ADVANCED || e.market === r.CORNERS_MATCH ? !0 : e.market === r.PLAYER_SCORE || e.market === r.PLAYER_YELLOW_CARD || e.market === r.PLAYER_RED_CARD || e.market === r.PLAYER_SCORE_FIRST_GOAL || e.market === r.PLAYER_SCORE_HATTRICK || e.market === r.PLAYER_SCORE_TWICE ? s.prediction.playerId !== void 0 : s.prediction.value !== null : !1;
+  }, Qe = () => {
+    h > 1 && p(h - 1);
+  }, U = () => {
+    var o, c, d, f;
+    const e = (o = t.matchQuiz.fixtures[0]) == null ? void 0 : o.matchModel;
+    if (!e || !((c = e.scores) != null && c.ftScore)) return null;
+    const s = e.scores.ftScore.homeGoals || 0, m = e.scores.ftScore.awayGoals || 0;
+    return /* @__PURE__ */ a.jsxs(l, { sx: n.matchResultBadge, children: [
+      ((d = e.homeTeam.assets) == null ? void 0 : d.logo) && /* @__PURE__ */ a.jsx(l, { sx: n.matchResultTeamLogo, children: /* @__PURE__ */ a.jsx(
+        "img",
+        {
+          src: e.homeTeam.assets.logo,
+          alt: e.homeTeam.name,
+          style: {
+            width: "100%",
+            height: "100%",
+            borderRadius: "50%",
+            objectFit: "cover"
+          }
+        }
+      ) }),
+      /* @__PURE__ */ a.jsxs(C, { sx: n.matchResultScoreText, children: [
+        s,
+        " - ",
+        m
+      ] }),
+      ((f = e.awayTeam.assets) == null ? void 0 : f.logo) && /* @__PURE__ */ a.jsx(l, { sx: n.matchResultTeamLogo, children: /* @__PURE__ */ a.jsx(
+        "img",
+        {
+          src: e.awayTeam.assets.logo,
+          alt: e.awayTeam.name,
+          style: {
+            width: "100%",
+            height: "100%",
+            borderRadius: "50%",
+            objectFit: "cover"
+          }
+        }
+      ) })
+    ] });
+  }, pe = () => /* @__PURE__ */ a.jsx(l, { sx: n.questionAreaContent, children: /* @__PURE__ */ a.jsx(l, { sx: n.mainContentContainer, children: /* @__PURE__ */ a.jsxs(l, { sx: n.gameStateContainer, children: [
+    /* @__PURE__ */ a.jsx(C, { sx: n.stateTitle, children: x("matchQuiz.states.pending.title") }),
+    /* @__PURE__ */ a.jsx(C, { sx: n.stateDescription, children: x("matchQuiz.states.pending.description") })
+  ] }) }) }), Ae = () => /* @__PURE__ */ a.jsx(l, { sx: n.questionAreaContent, children: /* @__PURE__ */ a.jsx(l, { sx: n.mainContentContainer, children: /* @__PURE__ */ a.jsxs(l, { sx: n.gameStateContainer, children: [
+    U(),
+    /* @__PURE__ */ a.jsxs(l, { sx: n.liveIndicatorContainer, children: [
+      /* @__PURE__ */ a.jsx(l, { sx: n.liveIndicator }),
+      /* @__PURE__ */ a.jsx(C, { sx: n.liveText, children: x("matchQuiz.states.live.indicator") })
+    ] }),
+    /* @__PURE__ */ a.jsx(C, { sx: n.stateDescription, children: x("matchQuiz.states.live.description") })
+  ] }) }) }), Le = () => /* @__PURE__ */ a.jsx(l, { sx: n.questionAreaContent, children: /* @__PURE__ */ a.jsx(l, { sx: n.mainContentContainer, children: /* @__PURE__ */ a.jsxs(l, { sx: n.gameStateContainer, children: [
+    U(),
+    /* @__PURE__ */ a.jsx(C, { sx: n.stateTitle, children: x("matchQuiz.states.closed.title") }),
+    /* @__PURE__ */ a.jsx(C, { sx: n.stateDescription, children: x("matchQuiz.states.closed.description") })
+  ] }) }) }), be = () => /* @__PURE__ */ a.jsxs(l, { sx: n.gameStateContainer, children: [
+    /* @__PURE__ */ a.jsx(C, { sx: n.stateTitle, children: x("matchQuiz.states.open.title") }),
+    /* @__PURE__ */ a.jsx(C, { sx: n.stateDescription, children: x("matchQuiz.states.open.description") })
+  ] }), u = N(() => t.matchQuiz.fixtures[h - 1], [t.matchQuiz.fixtures, h]), O = N(() => u == null ? void 0 : u.matchModel, [
+    (ne = (re = u == null ? void 0 : u.matchModel) == null ? void 0 : re.homeTeam) == null ? void 0 : ne.id,
+    (se = (oe = u == null ? void 0 : u.matchModel) == null ? void 0 : oe.awayTeam) == null ? void 0 : se.id
+  ]), j = N(() => u ? {
+    onScoreChange: (e, s) => Y(u.market, e, s),
+    onSelectionChange: (e) => H(u.market, e),
+    onCornersChange: (e) => B(u.market, e),
+    onPlayerSelection: (e) => $(u.market, e)
+  } : {}, [
+    u == null ? void 0 : u.market,
+    Y,
+    H,
+    B,
+    $
+  ]), Ve = () => {
+    var s, m, o, c, d, f, g, P, z, ce, le, me, de, ue;
+    const e = u;
+    if (T)
+      return be();
+    if (e)
+      switch (e.market) {
+        case r.CORRECT_SCORE:
+        case r.CORRECT_SCORE_HT:
+        case r.CORRECT_SCORE_ADVANCED:
+          const V = (m = (s = t.prediction) == null ? void 0 : s.fixtures) == null ? void 0 : m.find(
+            (S) => S.market === e.market
+          ), ve = (V == null ? void 0 : V.prediction.value) || "0:0", [Me, we] = ve.split(":").map(Number);
+          return /* @__PURE__ */ a.jsx(
+            tt,
+            {
+              matchModel: O,
+              market: e.market,
+              brandingPrimaryColor: i == null ? void 0 : i.primaryColor,
+              onScoreChange: j.onScoreChange,
+              initialHomeScore: Me,
+              initialAwayScore: we,
+              isSplitVariant: !0
+            },
+            `${e.market}-${h}`
+          );
+        case r.FT_1X2:
+        case r.HT_1X2:
+          const D = (c = (o = t.prediction) == null ? void 0 : o.fixtures) == null ? void 0 : c.find(
+            (S) => S.market === e.market
+          );
+          return /* @__PURE__ */ a.jsx(
+            at,
+            {
+              matchModel: O,
+              market: e.market,
+              brandingPrimaryColor: i == null ? void 0 : i.primaryColor,
+              prediction: ((d = D == null ? void 0 : D.prediction) == null ? void 0 : d.value) || null,
+              isSplitVariant: !0,
+              onSelectionChange: j.onSelectionChange
+            },
+            `${e.market}-${h}`
+          );
+        case r.CORNERS_MATCH:
+          const I = (g = (f = t.prediction) == null ? void 0 : f.fixtures) == null ? void 0 : g.find(
+            (S) => S.market === e.market
+          );
+          return /* @__PURE__ */ a.jsx(
+            it,
+            {
+              matchModel: O,
+              market: e.market,
+              prediction: (P = I == null ? void 0 : I.prediction) == null ? void 0 : P.value,
+              brandingPrimaryColor: i == null ? void 0 : i.primaryColor,
+              isSplitVariant: !0,
+              onCornersChange: j.onCornersChange
+            },
+            `${e.market}-${h}`
+          );
+        case r.OVER_GOALS_0_5:
+        case r.OVER_GOALS_1_5:
+        case r.OVER_GOALS_2_5:
+        case r.OVER_GOALS_3_5:
+        case r.OVER_GOALS_4_5:
+        case r.OVER_GOALS_5_5:
+        case r.OVER_GOALS_6_5:
+        case r.OVER_CORNERS_6_5:
+        case r.OVER_CORNERS_7_5:
+        case r.OVER_CORNERS_8_5:
+        case r.OVER_CORNERS_9_5:
+        case r.OVER_CORNERS_10_5:
+        case r.OVER_CORNERS_11_5:
+        case r.OVER_CORNERS_12_5:
+        case r.OVER_CORNERS_13_5:
+        case r.RED_CARD_MATCH:
+        case r.PENALTY_MATCH:
+          const v = (ce = (z = t.prediction) == null ? void 0 : z.fixtures) == null ? void 0 : ce.find(
+            (S) => S.market === e.market
+          );
+          return /* @__PURE__ */ a.jsx(
+            rt,
+            {
+              matchModel: O,
+              market: e.market,
+              brandingPrimaryColor: i == null ? void 0 : i.primaryColor,
+              prediction: (le = v == null ? void 0 : v.prediction) == null ? void 0 : le.value,
+              isSplitVariant: !0,
+              onSelectionChange: j.onSelectionChange
+            },
+            e.market
+          );
+        case r.PLAYER_SCORE:
+        case r.PLAYER_YELLOW_CARD:
+        case r.PLAYER_RED_CARD:
+        case r.PLAYER_SCORE_FIRST_GOAL:
+        case r.PLAYER_SCORE_HATTRICK:
+        case r.PLAYER_SCORE_TWICE:
+          const M = (de = (me = t.prediction) == null ? void 0 : me.fixtures) == null ? void 0 : de.find(
+            (S) => S.market === e.market
+          );
+          return /* @__PURE__ */ a.jsx(
+            nt,
+            {
+              matchModel: O,
+              market: e.market,
+              brandingPrimaryColor: i == null ? void 0 : i.primaryColor,
+              prediction: (ue = M == null ? void 0 : M.prediction) == null ? void 0 : ue.playerId,
+              isSplitVariant: !0,
+              onPlayerSelection: j.onPlayerSelection
+            },
+            `${e.market}-${h}`
+          );
+        default:
+          return /* @__PURE__ */ a.jsx(a.Fragment, {});
+      }
+  }, De = () => {
+    var e, s, m, o, c, d, f, g, P, z;
+    return /* @__PURE__ */ a.jsx(a.Fragment, { children: fe ? /* @__PURE__ */ a.jsx(
+      l,
+      {
+        sx: {
+          p: k.lg,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          gap: "16px"
+        },
+        children: /* @__PURE__ */ a.jsx(l, { sx: n.leadContentContainer, children: /* @__PURE__ */ a.jsx(
+          Ze,
+          {
+            sdk: t.sdk,
+            startGame: je,
+            contentId: t.matchQuiz.id,
+            contentName: t.matchQuiz.title,
+            brandingColors: (e = t.matchQuiz.branding) == null ? void 0 : e.colors,
+            brandingUrls: (s = t.matchQuiz.branding) == null ? void 0 : s.urls,
+            campaignId: (m = t.leads) == null ? void 0 : m.campaignId,
+            campaignName: (o = t.leads) == null ? void 0 : o.campaignName,
+            fields: (c = t.leads) == null ? void 0 : c.fields,
+            leadTitle: (d = t.matchQuiz.labels) == null ? void 0 : d.leadTitle,
+            leadDescription: (f = t.matchQuiz.labels) == null ? void 0 : f.leadDescription,
+            leadCta: (g = t.matchQuiz.labels) == null ? void 0 : g.leadCta,
+            leadSuccessTitle: (P = t.matchQuiz.labels) == null ? void 0 : P.leadSuccessTitle,
+            leadSuccessDescription: (z = t.matchQuiz.labels) == null ? void 0 : z.leadSuccessDescription
+          }
+        ) })
+      }
+    ) : /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+      t.showCountdown && !T && t.matchQuiz.status === "OPEN" && /* @__PURE__ */ a.jsx(
+        l,
+        {
+          sx: {
+            my: k.lg
+          },
+          children: /* @__PURE__ */ a.jsx(
+            st,
+            {
+              predictionsCutoffTime: t.matchQuiz.predictionsCutoff,
+              brandingPrimaryColor: i == null ? void 0 : i.primaryColor,
+              isSplitVariant: !0
+            }
+          )
+        }
+      ),
+      !T && /* @__PURE__ */ a.jsx(l, { sx: n.paginationContainer, children: /* @__PURE__ */ a.jsx(
+        ot,
+        {
+          matchQuiz: t.matchQuiz,
+          currentStep: h,
+          totalSteps: _,
+          brandingPrimaryColor: i == null ? void 0 : i.primaryColor,
+          isSplitVariant: !0
+        }
+      ) }),
+      /* @__PURE__ */ a.jsx(l, { sx: n.questionAreaContent, children: /* @__PURE__ */ a.jsxs(l, { sx: n.mainContentContainer, children: [
+        h === _ ? /* @__PURE__ */ a.jsx(
+          ct,
+          {
+            fixtures: t.matchQuiz.fixtures,
+            prediction: t.prediction,
+            brandingPrimaryColor: i == null ? void 0 : i.primaryColor,
+            onEditPrediction: ze,
+            onPredictionUpdate: t.setPrediction,
+            view: "play",
+            play: async () => t.play(),
+            isSplitVariant: !0
+          }
+        ) : Ve(),
+        /* @__PURE__ */ a.jsxs(l, { sx: n.navigationContainer, children: [
+          h > 1 && h < _ && /* @__PURE__ */ a.jsx(
+            he,
+            {
+              variant: "outlined",
+              onClick: Qe,
+              sx: {
+                borderRadius: G,
+                py: "10px",
+                px: "16px",
+                borderColor: R,
+                color: R,
+                transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+                transform: "scale(1)",
+                alignSelf: "center",
+                "&:hover": {
+                  borderColor: R,
+                  backgroundColor: `${R}10`,
+                  transform: "scale(1.02)"
+                },
+                "&:active": {
+                  transform: "scale(0.98)"
+                },
+                fontSize: "0.9375em"
+              },
+              children: /* @__PURE__ */ a.jsx(
+                C,
+                {
+                  sx: {
+                    fontFamily: b,
+                    fontWeight: 500,
+                    fontSize: "0.9375em",
+                    lineHeight: "24px",
+                    letterSpacing: "0.46px",
+                    textTransform: "uppercase",
+                    color: R,
+                    gap: "8px",
+                    display: "flex",
+                    alignItems: "center"
+                  },
+                  children: x("matchQuiz.buttons.back")
+                }
+              )
+            }
+          ),
+          !T && /* @__PURE__ */ a.jsx(
+            he,
+            {
+              variant: "soft",
+              onClick: Pe,
+              disabled: !Te(),
+              loading: t.isPlaying,
+              sx: {
+                borderRadius: G,
+                py: "10px",
+                px: "16px",
+                bgcolor: R,
+                color: y,
+                transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+                transform: "scale(1)",
+                alignSelf: "center",
+                "&:hover": {
+                  bgcolor: R,
+                  transform: "scale(1.02)"
+                },
+                "&:active": {
+                  color: y,
+                  transform: "scale(0.98)"
+                },
+                "&:disabled": {
+                  bgcolor: R,
+                  color: y,
+                  opacity: "12%"
+                },
+                "--Icon-color": y,
+                fontSize: "0.9375em"
+              },
+              children: /* @__PURE__ */ a.jsx(
+                C,
+                {
+                  sx: {
+                    fontFamily: b,
+                    fontWeight: 500,
+                    fontSize: "0.9375em",
+                    lineHeight: "24px",
+                    letterSpacing: "0.46px",
+                    textTransform: "uppercase",
+                    color: y,
+                    gap: "8px",
+                    display: "flex",
+                    alignItems: "center"
+                  },
+                  children: x(h === _ ? "matchQuiz.buttons.play" : "matchQuiz.buttons.next")
+                }
+              )
+            }
+          )
+        ] })
+      ] }) })
+    ] }) });
+  }, Ie = () => {
+    switch (t.matchQuiz.status) {
+      case "PENDING":
+        return pe();
+      case "LIVE":
+        return Ae();
+      case "CLOSED":
+        return Le();
+      default:
+        return De();
+    }
+  }, W = (e) => {
+    var s, m, o, c, d;
+    return /* @__PURE__ */ a.jsx(
+      Je,
+      {
+        brandingLogo: L,
+        textColor: e,
+        label: ((s = t.matchQuiz.labels) == null ? void 0 : s.sponsor) || null,
+        primaryUrl: (o = (m = t.matchQuiz.branding) == null ? void 0 : m.urls) == null ? void 0 : o.primaryUrl,
+        secondaryUrl: (d = (c = t.matchQuiz.branding) == null ? void 0 : c.urls) == null ? void 0 : d.secondaryUrl
+      }
+    );
+  };
+  return /* @__PURE__ */ a.jsxs(qe, { brandingBorderColor: (i == null ? void 0 : i.borderColor) || null, children: [
+    /* @__PURE__ */ a.jsx(
+      Ue,
+      {
+        entity: t.matchQuiz,
+        headline: x("matchQuiz.headline"),
+        finalImage: ge,
+        brandingLogo: L,
+        renderPresentedBy: W,
+        rulesDisplay: t.rulesDisplay,
+        children: Ie()
+      }
+    ),
+    L && Se && /* @__PURE__ */ a.jsx(l, { sx: { mb: k.lg, px: k.lg }, children: W(
+      (i == null ? void 0 : i.contentColor) || Ce.colorSchemes.dark.textColor
+    ) })
+  ] });
+};
+export {
+  Nt as default
+};

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

@@ -0,0 +1,149 @@
+const t = (e) => ({
+  // Question area
+  questionArea: {
+    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"
+  },
+  // Lead content container (filter screen)
+  leadContentContainer: {
+    p: e.spacingScale.md,
+    gap: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    backdropFilter: "blur(4px)",
+    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+    borderRadius: e.borderRadius.sm
+  },
+  // Question area content wrapper
+  questionAreaContent: {
+    p: e.spacingScale.lg,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    gap: "16px"
+  },
+  // Main content container
+  mainContentContainer: {
+    p: e.spacingScale.lg,
+    gap: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    backdropFilter: "blur(4px)",
+    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+    borderRadius: e.borderRadius.sm,
+    position: "relative",
+    zIndex: 2
+  },
+  // Game state container
+  gameStateContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale.xs,
+    textAlign: "center"
+  },
+  // State title
+  stateTitle: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 700,
+    fontSize: "1.5em",
+    lineHeight: "133%",
+    letterSpacing: "0.15px",
+    color: e.textColor
+  },
+  // State description
+  stateDescription: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 400,
+    fontSize: "1.25em",
+    lineHeight: "140%",
+    letterSpacing: "0.15px",
+    color: e.secondaryColor,
+    opacity: "60%"
+  },
+  // Live indicator container
+  liveIndicatorContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: e.spacingScale.xs
+  },
+  // Live indicator
+  liveIndicator: {
+    width: "12px",
+    height: "12px",
+    borderRadius: "50%",
+    backgroundColor: e.dangerColor,
+    animation: "pulse 2s infinite",
+    "@keyframes pulse": {
+      "0%": {
+        opacity: 1,
+        transform: "scale(1)"
+      },
+      "50%": {
+        opacity: 0.7,
+        transform: "scale(1.1)"
+      },
+      "100%": {
+        opacity: 1,
+        transform: "scale(1)"
+      }
+    }
+  },
+  // Live text
+  liveText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 600,
+    fontSize: "1em",
+    color: e.dangerColor,
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  },
+  // Pagination container
+  paginationContainer: {
+    display: "flex",
+    justifyContent: "center",
+    px: e.spacingScale.lg
+  },
+  // Navigation container
+  navigationContainer: {
+    display: "flex",
+    gap: e.spacingScale.md,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  matchResultBadge: {
+    display: "flex",
+    alignItems: "center",
+    alignSelf: "center",
+    gap: e.spacingScale.xs,
+    fontSize: "0.75em",
+    padding: "2px 6px",
+    minHeight: "20px",
+    borderRadius: e.borderRadius.sm,
+    border: `1px solid ${e.textColor}20`,
+    backgroundColor: e.textColor + "10",
+    width: "fit-content"
+  },
+  matchResultTeamLogo: {
+    width: "20px",
+    height: "20px",
+    borderRadius: "50%",
+    overflow: "hidden",
+    flexShrink: 0
+  },
+  matchResultScoreText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontSize: "0.75em",
+    fontWeight: 600,
+    color: e.textColor,
+    lineHeight: 1
+  }
+});
+export {
+  t as createStyles
+};