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

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

@@ -0,0 +1,854 @@
+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
+};