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

package/packages/match-quiz-play/src/components/Shared/FinishedGameWrapper/FinishedGameWrapper.js

@@ -1,854 +0,0 @@
-import { j as e } from "../../../../../../node_modules/react/jsx-runtime.js";
-import Ee from "react";
-import { Box as o, Tabs as _e, TabList as Ae, Tab as ie, tabClasses as ne, Typography as c, TabPanel as le } from "@mui/joy";
-import { useInternalTheme as Fe, isMobile as be, isExtraSmall as ze, useCornerRadius as we, useColors as _, useFontFamily as ce, useSpacingScale as Oe } 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 { useConstantContext as He } from "../../../../../common/src/hooks/useConstantContext.js";
-import "../../../../../common/src/providers/ConstantsProvider.js";
-import "../../../../../common/src/providers/ContainerProvider.js";
-import Ie from "../../../assets/school.svg.js";
-import Pe from "../../../assets/sports_score.svg.js";
-import { MarketEnum as r } from "fansunited-sdk-esm";
-import ae from "../../../../../../node_modules/@mui/icons-material/esm/PersonOutline.js";
-import De from "./EarnedPointsDisplay.js";
-import { MatchQuizConstantsContext as Qe } from "../../../providers/ConstantsProvider.js";
-import { useTranslation as ke } from "../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const et = ({
-  prediction: z,
-  marketsResults: w,
-  resultsTabPanelSxProps: xe,
-  isOverlayVariant: u,
-  children: de,
-  brandingColors: F
-}) => {
-  var Z;
-  const [me, he] = Ee.useState(0), C = Fe(), { t: i } = ke(), { squads: ue, points: fe } = He(Qe), v = be(), p = ze(), $ = we().md, O = u ? C.colorSchemes.dark.textPrimary : _().textPrimary, H = u ? C.colorSchemes.dark.textSecondary : _().textSecondary, A = ce().primary, G = ce().secondary, J = u ? C.colorSchemes.dark.secondaryContainer : _().secondaryContainer, pe = F != null && F.backgroundColor || u ? C.colorSchemes.dark.surfaceVariant : _().surfaceVariant, R = Oe(), ge = _().palette.success.plainColor, ye = _().palette.danger.plainColor, U = u ? C.colorSchemes.dark.outlineEnabledBorder : _().outlineEnabledBorder, X = u ? C.colorSchemes.dark.palette.neutral.softBg : _().palette.neutral.softBg;
-  let q = u ? C.colorSchemes.dark.textPrimary : _().textPrimary;
-  F != null && F.primaryColor && (q = F.primaryColor);
-  const Ce = (Z = fe.find(
-    (a) => a.id === r.CORRECT_SCORE_ADVANCED
-  )) == null ? void 0 : Z.points, Se = (a) => {
-    var ee, te, re, se, oe;
-    const x = (ee = z == null ? void 0 : z.fixtures) == null ? void 0 : ee.find(
-      (n) => n.market === a.market
-    );
-    if (!x) return null;
-    const V = (n) => {
-      switch (n) {
-        case r.CORRECT_SCORE:
-        case r.CORRECT_SCORE_ADVANCED:
-          return i("matchQuiz.fixtures.correctScoreFixtureTitle");
-        case r.CORRECT_SCORE_HT:
-          return i("matchQuiz.fixtures.correctScoreFixtureTitleHT");
-        case r.FT_1X2:
-          return i("matchQuiz.fixtures.oneXTwoFixtureTitle");
-        case r.HT_1X2:
-          return i("matchQuiz.fixtures.oneXTwoFixtureTitleHT");
-        case r.CORNERS_MATCH:
-          return i("matchQuiz.fixtures.cornersFixtureTitle");
-        case r.PLAYER_SCORE_FIRST_GOAL:
-          return i("matchQuiz.fixtures.playerScoreFirstGoalFixtureTitle");
-        case r.PLAYER_SCORE:
-          return i("matchQuiz.fixtures.playerScoreFixtureTitle");
-        case r.PLAYER_YELLOW_CARD:
-          return i("matchQuiz.fixtures.playerYellowCardFixtureTitle");
-        case r.PLAYER_RED_CARD:
-          return i("matchQuiz.fixtures.playerRedCardFixtureTitle");
-        case r.PLAYER_SCORE_HATTRICK:
-          return i("matchQuiz.fixtures.playerScoreHattrickFixtureTitle");
-        case r.PLAYER_SCORE_TWICE:
-          return i("matchQuiz.fixtures.playerScoreTwiceFixtureTitle");
-        case r.PENALTY_MATCH:
-          return i("matchQuiz.fixtures.penaltyFixtureTitle");
-        case r.RED_CARD_MATCH:
-          return i("matchQuiz.fixtures.redCardFixtureTitle");
-        default:
-          if (n.includes("OVER_GOALS")) {
-            const l = n.replace("OVER_GOALS_", "").replace("_", "."), t = Math.floor(parseFloat(l));
-            return i("matchQuiz.fixtures.overGoalsFixtureTitle", { threshold: t });
-          }
-          if (n.includes("OVER_CORNERS")) {
-            const l = n.replace("OVER_CORNERS_", "").replace("_", "."), t = Math.floor(parseFloat(l));
-            return i("matchQuiz.fixtures.overCornersFixtureTitle", {
-              threshold: t
-            });
-          }
-          return "";
-      }
-    }, I = (n, l) => {
-      const t = l.prediction.value, s = n.result;
-      switch (n.market) {
-        case r.CORRECT_SCORE:
-        case r.CORRECT_SCORE_HT:
-        case r.CORRECT_SCORE_ADVANCED:
-          return t === s;
-        case r.FT_1X2:
-        case r.HT_1X2:
-          return t === s;
-        case r.CORNERS_MATCH:
-          return parseInt(t.toString()) === parseInt(s.toString());
-        case r.PENALTY_MATCH:
-        case r.RED_CARD_MATCH:
-          return t === s;
-        case r.PLAYER_SCORE_FIRST_GOAL:
-        case r.PLAYER_SCORE:
-        case r.PLAYER_YELLOW_CARD:
-        case r.PLAYER_RED_CARD:
-        case r.PLAYER_SCORE_HATTRICK:
-        case r.PLAYER_SCORE_TWICE:
-          return Array.isArray(s) ? s.includes(l.prediction.playerId) : !1;
-        default:
-          return n.market.includes("OVER_") ? t === s : !1;
-      }
-    }, Re = (n) => {
-      for (const [, l] of ue.entries()) {
-        const t = l.find((s) => s.id === n);
-        if (t)
-          return t;
-      }
-      return null;
-    }, Te = (n, l) => {
-      var P, D, Q, k, L, Y, N, W, B, m, h, f, M;
-      if (!n) return null;
-      const t = l.market, s = l.matchModel, g = (P = n.prediction) == null ? void 0 : P.value, b = (D = n.prediction) == null ? void 0 : D.playerId, j = {
-        display: "flex",
-        alignItems: "center",
-        gap: R.xs,
-        fontSize: "1em",
-        padding: "2px 6px",
-        minHeight: "20px",
-        borderRadius: $,
-        border: `1px solid ${U}`,
-        backgroundColor: X,
-        width: "fit-content"
-      }, S = {
-        width: p ? "16px" : "20px",
-        height: p ? "16px" : "20px",
-        borderRadius: "50%",
-        overflow: "hidden",
-        flexShrink: 0
-      }, K = {
-        width: p ? "16px" : "20px",
-        height: p ? "16px" : "20px",
-        borderRadius: "50%",
-        backgroundColor: X,
-        color: "#FFFFFF",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        fontFamily: A,
-        fontWeight: 600,
-        fontSize: "0.625em",
-        flexShrink: 0,
-        overflow: "hidden"
-      }, T = {
-        fontFamily: A,
-        fontWeight: 500,
-        fontSize: p ? "0.75em" : "0.875em",
-        color: O
-      };
-      if (t === r.CORRECT_SCORE || t === r.CORRECT_SCORE_HT || t === r.CORRECT_SCORE_ADVANCED) {
-        const d = g || "0:0", [y, E] = d.split(":");
-        return /* @__PURE__ */ e.jsxs(o, { sx: j, children: [
-          ((k = (Q = s == null ? void 0 : s.homeTeam) == null ? void 0 : Q.assets) == null ? void 0 : k.logo) && /* @__PURE__ */ e.jsx(o, { sx: S, children: /* @__PURE__ */ e.jsx(
-            "img",
-            {
-              src: s.homeTeam.assets.logo,
-              alt: s.homeTeam.name,
-              style: {
-                width: "100%",
-                height: "100%",
-                borderRadius: "50%",
-                objectFit: "cover"
-              }
-            }
-          ) }),
-          /* @__PURE__ */ e.jsxs(c, { sx: T, children: [
-            y,
-            ":",
-            E
-          ] }),
-          ((Y = (L = s == null ? void 0 : s.awayTeam) == null ? void 0 : L.assets) == null ? void 0 : Y.logo) && /* @__PURE__ */ e.jsx(o, { sx: S, children: /* @__PURE__ */ e.jsx(
-            "img",
-            {
-              src: s.awayTeam.assets.logo,
-              alt: s.awayTeam.name,
-              style: {
-                width: "100%",
-                height: "100%",
-                borderRadius: "50%",
-                objectFit: "cover"
-              }
-            }
-          ) })
-        ] });
-      }
-      if (t === r.FT_1X2 || t === r.HT_1X2) {
-        const d = g;
-        let y = "", E = null;
-        return d === "1" ? (y = ((N = s == null ? void 0 : s.homeTeam) == null ? void 0 : N.name) || "Home", E = (B = (W = s == null ? void 0 : s.homeTeam) == null ? void 0 : W.assets) == null ? void 0 : B.logo) : d === "x" || d === "X" ? y = i("matchQuiz.fixtures.draw") : d === "2" && (y = ((m = s == null ? void 0 : s.awayTeam) == null ? void 0 : m.name) || "Away", E = (f = (h = s == null ? void 0 : s.awayTeam) == null ? void 0 : h.assets) == null ? void 0 : f.logo), /* @__PURE__ */ e.jsxs(o, { sx: j, children: [
-          E && /* @__PURE__ */ e.jsx(o, { sx: S, children: /* @__PURE__ */ e.jsx(
-            "img",
-            {
-              src: E,
-              alt: y,
-              style: {
-                width: "100%",
-                height: "100%",
-                borderRadius: "50%",
-                objectFit: "cover"
-              }
-            }
-          ) }),
-          /* @__PURE__ */ e.jsx(c, { sx: T, children: y })
-        ] });
-      }
-      if (t.includes("PLAYER_")) {
-        if (!b)
-          return /* @__PURE__ */ e.jsx(o, { sx: j, children: /* @__PURE__ */ e.jsx(c, { sx: T, children: i("matchQuiz.fixtures.noGoalWillBeScored") }) });
-        if (b === "OWN_GOAL")
-          return /* @__PURE__ */ e.jsx(o, { sx: j, children: /* @__PURE__ */ e.jsx(c, { sx: T, children: i("matchQuiz.fixtures.ownGoal") }) });
-        const d = Re(b), y = (d == null ? void 0 : d.name) || "Unknown Player", E = (M = d == null ? void 0 : d.assets) == null ? void 0 : M.headshot;
-        return /* @__PURE__ */ e.jsxs(o, { sx: j, children: [
-          /* @__PURE__ */ e.jsx(o, { sx: K, children: E ? /* @__PURE__ */ e.jsx(
-            "img",
-            {
-              src: E,
-              alt: y,
-              style: {
-                width: "100%",
-                height: "100%",
-                objectFit: "cover",
-                borderRadius: "50%"
-              }
-            }
-          ) : /* @__PURE__ */ e.jsx(
-            ae,
-            {
-              sx: { fontSize: "0.75em", color: H }
-            }
-          ) }),
-          /* @__PURE__ */ e.jsx(c, { sx: T, children: y })
-        ] });
-      }
-      if (t === r.PENALTY_MATCH || t === r.RED_CARD_MATCH || t.includes("OVER_")) {
-        const d = g === !0;
-        return /* @__PURE__ */ e.jsx(o, { sx: j, children: /* @__PURE__ */ e.jsx(c, { sx: T, children: i(d ? "matchQuiz.fixtures.yes" : "matchQuiz.fixtures.no") }) });
-      }
-      if (t === r.CORNERS_MATCH) {
-        const d = g || 6;
-        return /* @__PURE__ */ e.jsx(o, { sx: j, children: /* @__PURE__ */ e.jsx(c, { sx: T, children: d }) });
-      }
-      return null;
-    }, je = (n) => {
-      var K, T, P, D, Q, k, L, Y, N, W, B;
-      const l = n.market, t = n.matchModel, s = n.result, g = {
-        display: "flex",
-        alignItems: "center",
-        gap: R.xs,
-        fontSize: "0.875em",
-        padding: "2px 6px",
-        minHeight: "20px",
-        borderRadius: $,
-        border: `1px solid ${U}`,
-        backgroundColor: X,
-        width: "fit-content"
-      }, b = {
-        width: p ? "16px" : "20px",
-        height: p ? "16px" : "20px",
-        borderRadius: "50%",
-        overflow: "hidden",
-        flexShrink: 0
-      }, j = {
-        width: p ? "16px" : "20px",
-        height: p ? "16px" : "20px",
-        borderRadius: "50%",
-        backgroundColor: X,
-        color: "#FFFFFF",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        fontFamily: A,
-        fontWeight: 600,
-        fontSize: "0.625em",
-        flexShrink: 0,
-        overflow: "hidden"
-      }, S = {
-        fontFamily: A,
-        fontWeight: 500,
-        fontSize: p ? "0.75em" : "0.875em",
-        color: O
-      };
-      if (l === r.CORRECT_SCORE || l === r.CORRECT_SCORE_HT || l === r.CORRECT_SCORE_ADVANCED) {
-        const m = s || "0:0", [h, f] = m.split(":");
-        return /* @__PURE__ */ e.jsxs(o, { sx: g, children: [
-          ((T = (K = t == null ? void 0 : t.homeTeam) == null ? void 0 : K.assets) == null ? void 0 : T.logo) && /* @__PURE__ */ e.jsx(o, { sx: b, children: /* @__PURE__ */ e.jsx(
-            "img",
-            {
-              src: t.homeTeam.assets.logo,
-              alt: t.homeTeam.name,
-              style: {
-                width: "100%",
-                height: "100%",
-                borderRadius: "50%",
-                objectFit: "cover"
-              }
-            }
-          ) }),
-          /* @__PURE__ */ e.jsxs(c, { sx: S, children: [
-            h,
-            ":",
-            f
-          ] }),
-          ((D = (P = t == null ? void 0 : t.awayTeam) == null ? void 0 : P.assets) == null ? void 0 : D.logo) && /* @__PURE__ */ e.jsx(o, { sx: b, children: /* @__PURE__ */ e.jsx(
-            "img",
-            {
-              src: t.awayTeam.assets.logo,
-              alt: t.awayTeam.name,
-              style: {
-                width: "100%",
-                height: "100%",
-                borderRadius: "50%",
-                objectFit: "cover"
-              }
-            }
-          ) })
-        ] });
-      }
-      if (l === r.FT_1X2 || l === r.HT_1X2) {
-        const m = s;
-        let h = "", f = null;
-        return m === "1" ? (h = ((Q = t == null ? void 0 : t.homeTeam) == null ? void 0 : Q.name) || "Home", f = (L = (k = t == null ? void 0 : t.homeTeam) == null ? void 0 : k.assets) == null ? void 0 : L.logo) : m === "x" || m === "X" ? h = i("matchQuiz.fixtures.draw") : m === "2" && (h = ((Y = t == null ? void 0 : t.awayTeam) == null ? void 0 : Y.name) || "Away", f = (W = (N = t == null ? void 0 : t.awayTeam) == null ? void 0 : N.assets) == null ? void 0 : W.logo), /* @__PURE__ */ e.jsxs(o, { sx: g, children: [
-          f && /* @__PURE__ */ e.jsx(o, { sx: b, children: /* @__PURE__ */ e.jsx(
-            "img",
-            {
-              src: f,
-              alt: h,
-              style: {
-                width: "100%",
-                height: "100%",
-                borderRadius: "50%",
-                objectFit: "cover"
-              }
-            }
-          ) }),
-          /* @__PURE__ */ e.jsx(c, { sx: S, children: h })
-        ] });
-      }
-      if (l.includes("PLAYER_")) {
-        if (Array.isArray(s) && n.playerModels) {
-          const m = s.map((f) => {
-            var d;
-            return (d = n.playerModels) == null ? void 0 : d.find(
-              (y) => y.id === f
-            );
-          }).filter(Boolean);
-          if (m.length === 0)
-            return /* @__PURE__ */ e.jsx(o, { sx: g, children: /* @__PURE__ */ e.jsx(c, { sx: S, children: i("matchQuiz.fixtures.noGoalWillBeScored") }) });
-          const h = m[0];
-          return /* @__PURE__ */ e.jsxs(o, { sx: g, children: [
-            /* @__PURE__ */ e.jsx(o, { sx: j, children: (B = h == null ? void 0 : h.assets) != null && B.headshot ? /* @__PURE__ */ e.jsx(
-              "img",
-              {
-                src: h.assets.headshot,
-                alt: h.name,
-                style: {
-                  width: "100%",
-                  height: "100%",
-                  objectFit: "cover",
-                  borderRadius: "50%"
-                }
-              }
-            ) : /* @__PURE__ */ e.jsx(
-              ae,
-              {
-                sx: { fontSize: "0.75em", color: H }
-              }
-            ) }),
-            /* @__PURE__ */ e.jsx(c, { sx: S, children: m.map((f) => f == null ? void 0 : f.name).join(", ") })
-          ] });
-        }
-        return /* @__PURE__ */ e.jsx(o, { sx: g, children: /* @__PURE__ */ e.jsx(c, { sx: S, children: i("matchQuiz.fixtures.noGoalWillBeScored") }) });
-      }
-      if (l === r.PENALTY_MATCH || l === r.RED_CARD_MATCH || l.includes("OVER_")) {
-        const m = s === !0;
-        return /* @__PURE__ */ e.jsx(o, { sx: g, children: /* @__PURE__ */ e.jsx(c, { sx: S, children: i(m ? "matchQuiz.fixtures.yes" : "matchQuiz.fixtures.no") }) });
-      }
-      if (l === r.CORNERS_MATCH) {
-        const m = s || 6;
-        return /* @__PURE__ */ e.jsx(o, { sx: g, children: /* @__PURE__ */ e.jsx(c, { sx: S, children: m }) });
-      }
-      return null;
-    };
-    return /* @__PURE__ */ e.jsx(
-      o,
-      {
-        sx: {
-          borderRadius: $,
-          p: R.md,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          alignSelf: "stretch",
-          gap: R.md,
-          backdropFilter: "blur(4px)",
-          position: "relative",
-          "&::before": {
-            content: '""',
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: pe,
-            opacity: 0.5,
-            borderRadius: "inherit",
-            zIndex: 0,
-            backdropFilter: "blur(4px)"
-          },
-          "& > *": {
-            position: "relative",
-            zIndex: 1
-          }
-        },
-        children: /* @__PURE__ */ e.jsxs(
-          o,
-          {
-            sx: {
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "flex-start",
-              gap: "12px",
-              alignSelf: "stretch"
-            },
-            children: [
-              /* @__PURE__ */ e.jsxs(
-                o,
-                {
-                  sx: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    alignSelf: "stretch"
-                  },
-                  children: [
-                    /* @__PURE__ */ e.jsx(
-                      c,
-                      {
-                        sx: {
-                          color: O,
-                          fontFamily: A,
-                          fontSize: "1.25em",
-                          fontStyle: "normal",
-                          fontWeight: 500,
-                          lineHeight: "120%",
-                          letterSpacing: "0.15px",
-                          flex: 1
-                        },
-                        children: V(a.market)
-                      }
-                    ),
-                    !p && /* @__PURE__ */ e.jsx(
-                      De,
-                      {
-                        market: a.market,
-                        earnedPoints: (te = x == null ? void 0 : x.result) == null ? void 0 : te.points
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ e.jsxs(
-                o,
-                {
-                  sx: {
-                    alignSelf: "stretch",
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: R.xs
-                  },
-                  children: [
-                    /* @__PURE__ */ e.jsxs(
-                      o,
-                      {
-                        sx: {
-                          display: "flex",
-                          alignItems: "center",
-                          gap: R.xs
-                        },
-                        children: [
-                          /* @__PURE__ */ e.jsx(
-                            c,
-                            {
-                              sx: {
-                                color: I(a, x) ? u ? C.colorSchemes.dark.palette.success.plainColor : ge : u ? C.colorSchemes.dark.palette.danger.plainColor : ye,
-                                fontFamily: G,
-                                fontSize: "1em",
-                                fontStyle: "normal",
-                                fontWeight: I(a, x) ? 700 : 600,
-                                lineHeight: "20px",
-                                letterSpacing: "0.15px"
-                              },
-                              children: i("matchQuiz.yourPrediction")
-                            }
-                          ),
-                          Te(x, a)
-                        ]
-                      }
-                    ),
-                    !I(a, x) && /* @__PURE__ */ e.jsxs(
-                      o,
-                      {
-                        sx: {
-                          display: "flex",
-                          alignItems: "center",
-                          gap: R.xs
-                        },
-                        children: [
-                          /* @__PURE__ */ e.jsx(
-                            c,
-                            {
-                              sx: {
-                                color: O,
-                                fontFamily: G,
-                                fontSize: "1em",
-                                fontStyle: "normal",
-                                fontWeight: 600,
-                                lineHeight: "20px",
-                                letterSpacing: "0.15px"
-                              },
-                              children: i("matchQuiz.correctPrediction")
-                            }
-                          ),
-                          je(a)
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ),
-              p && ((re = x == null ? void 0 : x.result) == null ? void 0 : re.points) > 0 && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-                /* @__PURE__ */ e.jsx(
-                  o,
-                  {
-                    sx: {
-                      width: "100%",
-                      height: "1px",
-                      backgroundColor: U
-                    }
-                  }
-                ),
-                /* @__PURE__ */ e.jsx(
-                  o,
-                  {
-                    sx: {
-                      display: "flex",
-                      justifyContent: "flex-start",
-                      alignItems: "center",
-                      alignSelf: "stretch"
-                    },
-                    children: /* @__PURE__ */ e.jsx(
-                      c,
-                      {
-                        sx: {
-                          color: O,
-                          fontFamily: G,
-                          fontSize: "1em",
-                          fontStyle: "normal",
-                          fontWeight: 600,
-                          lineHeight: "20px",
-                          letterSpacing: "0.15px"
-                        },
-                        children: a.market === r.CORRECT_SCORE_ADVANCED ? `${i("matchQuiz.earnedPoints")}: ${(se = x == null ? void 0 : x.result) == null ? void 0 : se.points}/${Ce}` : `${i("matchQuiz.earnedPoints")}: ${(oe = x == null ? void 0 : x.result) == null ? void 0 : oe.points}`
-                      }
-                    )
-                  }
-                )
-              ] })
-            ]
-          },
-          `single-prediction-${a.market}-${a.matchId}`
-        )
-      },
-      `user-prediction-${a.market}-${a.matchId}`
-    );
-  };
-  return /* @__PURE__ */ e.jsx(o, { sx: { width: "100%" }, children: /* @__PURE__ */ e.jsxs(
-    _e,
-    {
-      value: me,
-      onChange: (a, x) => he(x),
-      sx: {
-        borderRadius: $,
-        width: "100%",
-        // Ensure tabs container takes full width
-        backgroundColor: "transparent"
-      },
-      children: [
-        /* @__PURE__ */ e.jsxs(
-          Ae,
-          {
-            sx: {
-              fontSize: v ? "0.75em" : "1em",
-              "--Icon-fontSize": v ? "1em" : "1.25em"
-            },
-            children: [
-              /* @__PURE__ */ e.jsx(
-                ie,
-                {
-                  sx: {
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    flex: 1,
-                    // Make each tab take equal width
-                    borderBottom: "1px solid " + J,
-                    opacity: "60%",
-                    "&:not(.Mui-selected):hover": {
-                      bgcolor: u ? "#FAFAFA14" : "#2121210A"
-                      // Highlight selected tab
-                    },
-                    [`&.${ne.selected}`]: {
-                      bgcolor: u ? "#FAFAFA14" : "#2121210A",
-                      // Highlight selected tab
-                      borderBottom: "3px solid " + q,
-                      opacity: "100%",
-                      mb: "-1px"
-                    }
-                  },
-                  disableIndicator: !0,
-                  children: /* @__PURE__ */ e.jsxs(
-                    o,
-                    {
-                      sx: {
-                        display: "flex",
-                        py: "12px",
-                        px: "16px",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        gap: "8px",
-                        width: "100%"
-                        // Ensure inner box also takes full width
-                      },
-                      children: [
-                        /* @__PURE__ */ e.jsx(
-                          "img",
-                          {
-                            src: Pe,
-                            alt: "results-icon",
-                            style: {
-                              display: "flex",
-                              width: "24px",
-                              height: "24px",
-                              justifyContent: "center",
-                              alignItems: "center",
-                              filter: u || C.mode == "dark" ? "brightness(0) invert(1)" : "none"
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ e.jsx(
-                          c,
-                          {
-                            sx: {
-                              color: H,
-                              fontFamily: A,
-                              fontSize: "1em",
-                              fontStyle: "normal",
-                              fontWeight: 500,
-                              lineHeight: "24px",
-                              letterSpacing: "0.4px",
-                              textTransform: "uppercase"
-                            },
-                            children: i("matchQuiz.leaderboard.title")
-                          }
-                        )
-                      ]
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ e.jsx(
-                ie,
-                {
-                  sx: {
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    flex: 1,
-                    // Make each tab take equal width
-                    borderBottom: "1px solid " + J,
-                    opacity: "60%",
-                    "&:not(.Mui-selected):hover": {
-                      bgcolor: u ? "#FAFAFA14" : "#2121210A"
-                      // Highlight selected tab
-                    },
-                    [`&.${ne.selected}`]: {
-                      bgcolor: u ? "#FAFAFA14" : "#2121210A",
-                      // Highlight selected tab
-                      borderBottom: "3px solid " + q,
-                      opacity: "100%",
-                      mb: "-1px"
-                    }
-                  },
-                  disableIndicator: !0,
-                  children: /* @__PURE__ */ e.jsxs(
-                    o,
-                    {
-                      sx: {
-                        display: "flex",
-                        py: "12px",
-                        px: "16px",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        gap: "8px",
-                        width: "100%"
-                        // Ensure inner box also takes full width
-                      },
-                      children: [
-                        /* @__PURE__ */ e.jsx(
-                          "img",
-                          {
-                            src: Ie,
-                            alt: "predictions-icon",
-                            style: {
-                              display: "flex",
-                              width: "24px",
-                              height: "24px",
-                              justifyContent: "center",
-                              alignItems: "center",
-                              filter: u || C.mode == "dark" ? "brightness(0) invert(1)" : "none"
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ e.jsx(
-                          c,
-                          {
-                            sx: {
-                              color: H,
-                              fontFamily: A,
-                              fontSize: "1em",
-                              fontStyle: "normal",
-                              fontWeight: 500,
-                              lineHeight: "24px",
-                              letterSpacing: "0.4px",
-                              textTransform: "uppercase"
-                            },
-                            children: i("matchQuiz.predictions")
-                          }
-                        )
-                      ]
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ e.jsx(
-          le,
-          {
-            value: 0,
-            sx: {
-              ...xe,
-              fontSize: p ? "0.625em" : v ? "0.75em" : "1em"
-            },
-            children: de
-          }
-        ),
-        /* @__PURE__ */ e.jsx(
-          le,
-          {
-            value: 1,
-            sx: {
-              overflowY: "auto",
-              maxHeight: v ? "auto" : "450px",
-              fontSize: p ? "0.75em" : "1em"
-            },
-            children: /* @__PURE__ */ e.jsx(
-              o,
-              {
-                sx: {
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  gap: "16px",
-                  alignSelf: "stretch"
-                },
-                children: w != null && w.results.some((a) => {
-                  var V;
-                  return (V = z == null ? void 0 : z.fixtures) == null ? void 0 : V.find(
-                    (I) => I.market === a.market
-                  );
-                }) ? w == null ? void 0 : w.results.map((a) => Se(a)) : (
-                  // Empty state when user has no predictions
-                  /* @__PURE__ */ e.jsx(
-                    o,
-                    {
-                      sx: {
-                        display: "flex",
-                        flexDirection: "column",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        gap: R.lg,
-                        alignSelf: "stretch",
-                        minHeight: "200px",
-                        textAlign: "center",
-                        py: R.xl
-                      },
-                      children: /* @__PURE__ */ e.jsxs(
-                        o,
-                        {
-                          sx: {
-                            display: "flex",
-                            flexDirection: "column",
-                            gap: R.xs,
-                            alignItems: "center"
-                          },
-                          children: [
-                            /* @__PURE__ */ e.jsx(
-                              c,
-                              {
-                                sx: {
-                                  color: O,
-                                  fontFamily: A,
-                                  fontSize: "1.25em",
-                                  fontWeight: 600,
-                                  lineHeight: "1.2"
-                                },
-                                children: i("matchQuiz.noPredictions.title")
-                              }
-                            ),
-                            /* @__PURE__ */ e.jsx(
-                              c,
-                              {
-                                sx: {
-                                  color: H,
-                                  fontFamily: G,
-                                  fontSize: "1em",
-                                  fontWeight: 400,
-                                  lineHeight: "1.4"
-                                },
-                                children: i("matchQuiz.noPredictions.description")
-                              }
-                            )
-                          ]
-                        }
-                      )
-                    }
-                  )
-                )
-              }
-            )
-          }
-        )
-      ]
-    }
-  ) });
-};
-export {
-  et as default
-};