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

package/packages/match-quiz-play/src/components/Shared/Fixtures/Corners/CornersSelector.styles.js

@@ -0,0 +1,41 @@
+const i = (e) => ({
+  container: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: e.isMobile ? e.spacingScale.md : e.spacingScale.lg,
+    pt: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
+  },
+  cornersInputContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: e.spacingScale.sm
+  },
+  cornersButton: {
+    borderRadius: e.borderRadius.sm,
+    minHeight: e.isMobile ? "28px" : "32px",
+    minWidth: e.isMobile ? "28px" : "32px",
+    borderColor: e.neutralOutlinedBorder,
+    color: e.textPrimary,
+    "&:hover": {
+      backgroundColor: e.neutralPlainHoverBg,
+      color: e.textPrimary
+    }
+  },
+  cornersDisplay: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 600,
+    fontSize: e.isMobile ? "1.5em" : "2em",
+    color: e.textPrimary,
+    minWidth: e.isMobile ? "2.5rem" : "3rem",
+    textAlign: "center",
+    bgcolor: e.neutralSoftBg,
+    borderRadius: e.borderRadius.sm,
+    px: e.spacingScale.sm,
+    py: e.spacingScale.xs
+  }
+});
+export {
+  i as createStyles
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/CorrectScore/CorrectScoreFixture.js

@@ -0,0 +1,72 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as i, Typography as y } from "@mui/joy";
+import { useColors as f, useCornerRadius as d, useFontFamily as h, useSpacingScale as C, isExtraSmall as g } 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 "react";
+import { useConstantContext as j } from "../../../../../../common/src/hooks/useConstantContext.js";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import E from "./ScoreSelector.js";
+import F from "./ScoreSelectorSplit.js";
+import { createStyles as w } from "./CorrectScoreFixture.styles.js";
+import P from "../PointsDisplay/PointsDisplay.js";
+import { MatchQuizConstantsContext as T } from "../../../../providers/ConstantsProvider.js";
+import { useTranslation as H } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const q = (t) => {
+  const { t: o } = H(), r = f(), c = d(), a = h(), m = C(), s = g(), { points: x } = j(T), n = t.useExtraSmallLayout !== void 0 ? t.useExtraSmallLayout : s, S = t.showPoints === void 0, l = w({
+    spacingScale: m,
+    borderRadius: c,
+    fontFamilyPrimary: a.primary,
+    fontFamilySecondary: a.secondary,
+    textPrimary: r.textPrimary,
+    textSecondary: r.textSecondary,
+    isExtraSmall: n
+  }), u = () => t.market === "CORRECT_SCORE_HT" ? o("matchQuiz.fixtures.correctScoreFixtureTitleHT") : o("matchQuiz.fixtures.correctScoreFixtureTitle");
+  return /* @__PURE__ */ e.jsxs(i, { sx: l.container, children: [
+    /* @__PURE__ */ e.jsxs(
+      i,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%"
+        },
+        children: [
+          n ? /* @__PURE__ */ e.jsx(e.Fragment, {}) : /* @__PURE__ */ e.jsx(i, { sx: { flex: 1 } }),
+          /* @__PURE__ */ e.jsx(y, { level: "h3", sx: l.title, children: u() }),
+          /* @__PURE__ */ e.jsx(i, { sx: { flex: 1, display: "flex", justifyContent: "flex-end" }, children: S && x.length > 0 && /* @__PURE__ */ e.jsx(
+            P,
+            {
+              market: t.market,
+              brandingPrimaryColor: t.brandingPrimaryColor,
+              isSplitVariant: t.isSplitVariant
+            }
+          ) })
+        ]
+      }
+    ),
+    t.isSplitVariant ? /* @__PURE__ */ e.jsx(
+      F,
+      {
+        matchModel: t.matchModel,
+        onScoreChange: t.onScoreChange,
+        initialHomeScore: t.initialHomeScore,
+        initialAwayScore: t.initialAwayScore
+      }
+    ) : /* @__PURE__ */ e.jsx(
+      E,
+      {
+        matchModel: t.matchModel,
+        onScoreChange: t.onScoreChange,
+        initialHomeScore: t.initialHomeScore,
+        initialAwayScore: t.initialAwayScore,
+        useExtraSmallLayout: t.useExtraSmallLayout
+      }
+    )
+  ] });
+};
+export {
+  q as default
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/CorrectScore/CorrectScoreFixture.styles.js

@@ -0,0 +1,30 @@
+import { isMobile as e } 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 "../../../../../../../node_modules/react/jsx-runtime.js";
+import "@mui/joy";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+const p = (t) => {
+  const i = e();
+  return {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    title: {
+      fontFamily: t.fontFamilyPrimary,
+      fontWeight: 600,
+      fontSize: i ? "1.125em" : "1.25em",
+      lineHeight: 1.2,
+      color: t.textPrimary,
+      textAlign: t.isExtraSmall ? "left" : "center",
+      marginLeft: "auto"
+    }
+  };
+};
+export {
+  p as createStyles
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/CorrectScore/ScoreSelector.js

@@ -0,0 +1,179 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { memo as M, useState as p } from "react";
+import { Box as a, Typography as c, IconButton as j } from "@mui/joy";
+import { useColors as L, useCornerRadius as z, useFontFamily as D, useSpacingScale as F, isMobile as R, isExtraSmall as A } 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 H } from "../../../../../../common/src/hooks/useConstantContext.js";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import k from "../../../../../../../node_modules/@mui/icons-material/esm/KeyboardArrowUp.js";
+import E from "../../../../../../../node_modules/@mui/icons-material/esm/KeyboardArrowDown.js";
+import K from "../../../../../../../node_modules/@mui/icons-material/esm/KeyboardArrowLeft.js";
+import P from "../../../../../../../node_modules/@mui/icons-material/esm/KeyboardArrowRight.js";
+import { createStyles as N } from "./ScoreSelector.styles.js";
+import { MatchQuizConstantsContext as O } from "../../../../providers/ConstantsProvider.js";
+const S = M(({ team: t, isHome: l, styles: i, showTeamLabels: d }) => {
+  var u;
+  return /* @__PURE__ */ e.jsxs(a, { sx: l ? i.homeTeamColumn : i.awayTeamColumn, children: [
+    /* @__PURE__ */ e.jsx(a, { sx: i.teamLogo, children: (u = t.assets) != null && u.logo ? /* @__PURE__ */ e.jsx(
+      "img",
+      {
+        src: t.assets.logo,
+        alt: t.name,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "contain"
+        }
+      }
+    ) : /* @__PURE__ */ e.jsx(c, { level: "body-sm", sx: i.teamLogoText, children: t.name }) }),
+    d && /* @__PURE__ */ e.jsx(c, { level: "body-sm", sx: i.teamName, children: t.name })
+  ] });
+});
+S.displayName = "TeamLogo";
+const se = (t) => {
+  const l = L(), i = z(), d = D(), u = F(), C = R(), b = A(), { showTeamLabels: y } = H(O), T = t.useExtraSmallLayout !== void 0 ? t.useExtraSmallLayout : b, [x, v] = p(t.initialHomeScore ?? 0), [h, I] = p(t.initialAwayScore ?? 0), o = N({
+    spacingScale: u,
+    borderRadius: i,
+    fontFamilyPrimary: d.primary,
+    fontFamilySecondary: d.secondary,
+    textPrimary: l.textPrimary,
+    textSecondary: l.textSecondary,
+    neutralSoftBg: l.palette.neutral.softBg,
+    neutralOutlinedBorder: l.palette.neutral.outlinedBorder,
+    neutralPlainHoverBg: l.palette.neutral.plainHoverBg,
+    isMobile: C
+  }), r = (s, m) => {
+    if (s === "home") {
+      const n = m ? Math.min(x + 1, 99) : Math.max(x - 1, 0);
+      v(n), t.onScoreChange(n, h);
+    } else {
+      const n = m ? Math.min(h + 1, 99) : Math.max(h - 1, 0);
+      I(n), t.onScoreChange(x, n);
+    }
+  }, f = ({ score: s, onIncrement: m, onDecrement: n }) => /* @__PURE__ */ e.jsxs(a, { sx: o.scoreInputContainer, children: [
+    /* @__PURE__ */ e.jsx(
+      j,
+      {
+        size: "sm",
+        variant: "plain",
+        onClick: m,
+        sx: o.scoreButton,
+        children: /* @__PURE__ */ e.jsx(k, { fontSize: "small" })
+      }
+    ),
+    /* @__PURE__ */ e.jsx(c, { level: "h2", sx: o.scoreDisplay, children: s }),
+    /* @__PURE__ */ e.jsx(
+      j,
+      {
+        size: "sm",
+        variant: "plain",
+        onClick: n,
+        sx: o.scoreButton,
+        disabled: s === 0,
+        children: /* @__PURE__ */ e.jsx(E, { fontSize: "small" })
+      }
+    )
+  ] }), g = ({ team: s, score: m, onIncrement: n, onDecrement: B }) => {
+    var w;
+    return /* @__PURE__ */ e.jsxs(a, { sx: o.xsRow, children: [
+      /* @__PURE__ */ e.jsxs(a, { sx: o.xsTeamInfo, children: [
+        /* @__PURE__ */ e.jsx(a, { sx: o.xsTeamLogo, children: (w = s.assets) != null && w.logo ? /* @__PURE__ */ e.jsx(
+          "img",
+          {
+            src: s.assets.logo,
+            alt: s.name,
+            style: { width: "100%", height: "100%", objectFit: "contain" }
+          }
+        ) : /* @__PURE__ */ e.jsx(c, { level: "body-sm", sx: o.teamLogoText, children: s.name }) }),
+        y && /* @__PURE__ */ e.jsx(c, { level: "body-sm", sx: o.teamNameInline, children: s.name })
+      ] }),
+      /* @__PURE__ */ e.jsxs(a, { sx: o.scoreInputRow, children: [
+        /* @__PURE__ */ e.jsx(
+          j,
+          {
+            size: "sm",
+            variant: "plain",
+            onClick: B,
+            sx: o.scoreButton,
+            disabled: m === 0,
+            children: /* @__PURE__ */ e.jsx(K, { fontSize: "small" })
+          }
+        ),
+        /* @__PURE__ */ e.jsx(c, { level: "h2", sx: o.scoreDisplay, children: m }),
+        /* @__PURE__ */ e.jsx(
+          j,
+          {
+            size: "sm",
+            variant: "plain",
+            onClick: n,
+            sx: o.scoreButton,
+            children: /* @__PURE__ */ e.jsx(P, { fontSize: "small" })
+          }
+        )
+      ] })
+    ] });
+  };
+  return T ? /* @__PURE__ */ e.jsxs(a, { sx: o.xsContainer, children: [
+    /* @__PURE__ */ e.jsx(
+      g,
+      {
+        team: t.matchModel.homeTeam,
+        score: x,
+        onIncrement: () => r("home", !0),
+        onDecrement: () => r("home", !1)
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      g,
+      {
+        team: t.matchModel.awayTeam,
+        score: h,
+        onIncrement: () => r("away", !0),
+        onDecrement: () => r("away", !1)
+      }
+    )
+  ] }) : /* @__PURE__ */ e.jsxs(a, { sx: o.container, children: [
+    /* @__PURE__ */ e.jsx(
+      S,
+      {
+        team: t.matchModel.homeTeam,
+        isHome: !0,
+        styles: o,
+        showTeamLabels: y
+      }
+    ),
+    /* @__PURE__ */ e.jsxs(a, { sx: o.scoreContainer, children: [
+      /* @__PURE__ */ e.jsx(
+        f,
+        {
+          score: x,
+          onIncrement: () => r("home", !0),
+          onDecrement: () => r("home", !1)
+        }
+      ),
+      /* @__PURE__ */ e.jsx(c, { level: "h2", sx: o.separator, children: ":" }),
+      /* @__PURE__ */ e.jsx(
+        f,
+        {
+          score: h,
+          onIncrement: () => r("away", !0),
+          onDecrement: () => r("away", !1)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e.jsx(
+      S,
+      {
+        team: t.matchModel.awayTeam,
+        isHome: !1,
+        styles: o,
+        showTeamLabels: y
+      }
+    )
+  ] });
+};
+export {
+  se as default
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/CorrectScore/ScoreSelector.styles.js

@@ -0,0 +1,163 @@
+import { createTeamLogoStyles as t } from "../shared.styles.js";
+const n = (e) => {
+  const i = t({
+    spacingScale: e.spacingScale,
+    neutralSoftBg: e.neutralSoftBg,
+    neutralPlainHoverBg: e.neutralPlainHoverBg,
+    isMobile: e.isMobile
+  });
+  return {
+    // Default (non-extra-small) layout: 3-column grid for true centering
+    container: {
+      display: "grid",
+      gridTemplateColumns: "1fr auto 1fr",
+      alignItems: "start",
+      // Changed from "center" to "start" for consistent logo alignment
+      pt: e.isMobile ? e.spacingScale.md : e.spacingScale.lg,
+      width: "100%"
+    },
+    // Extra-small layout container: two stacked rows
+    xsContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale.sm,
+      pt: e.spacingScale.md,
+      width: "100%"
+    },
+    // One row: left team info + right score control
+    xsRow: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: e.spacingScale.sm,
+      width: "100%"
+    },
+    // Left side: logo + team name inline
+    xsTeamInfo: {
+      display: "flex",
+      alignItems: "center",
+      gap: e.spacingScale.sm,
+      minWidth: 0,
+      flex: 1
+    },
+    teamColumn: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: e.spacingScale.xs,
+      minHeight: "80px"
+      // Ensure consistent minimum height for alignment
+    },
+    // Grid positioning for home team (first column, right-aligned)
+    homeTeamColumn: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: e.spacingScale.xs,
+      justifySelf: "end",
+      minHeight: "80px"
+      // Ensure consistent minimum height for alignment
+    },
+    // Grid positioning for away team (third column, left-aligned)
+    awayTeamColumn: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: e.spacingScale.xs,
+      justifySelf: "start",
+      minHeight: "80px"
+      // Ensure consistent minimum height for alignment
+    },
+    teamName: {
+      fontFamily: e.fontFamilySecondary,
+      color: e.textPrimary,
+      fontSize: e.isMobile ? "0.75em" : "0.875em",
+      fontWeight: 600,
+      textAlign: "center",
+      maxWidth: "120px",
+      wordWrap: "break-word",
+      lineHeight: 1.2
+    },
+    teamNameInline: {
+      fontFamily: e.fontFamilySecondary,
+      color: e.textPrimary,
+      fontSize: "0.75em",
+      fontWeight: 600,
+      textAlign: "left",
+      overflow: "hidden"
+    },
+    teamLogo: i.base,
+    // Extra-small: smaller logo with no background
+    xsTeamLogo: {
+      width: "24px",
+      height: "24px",
+      backgroundColor: "transparent",
+      boxShadow: "none",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: 0,
+      flexShrink: 0
+    },
+    teamLogoText: {
+      fontFamily: e.fontFamilySecondary,
+      color: e.textSecondary,
+      fontSize: e.isMobile ? "0.625em" : "0.75em",
+      fontWeight: 600,
+      textAlign: "center"
+    },
+    scoreInputContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: e.spacingScale["2xs"]
+    },
+    // Extra-small: horizontal score input row
+    scoreInputRow: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: e.spacingScale["2xs"]
+    },
+    scoreButton: {
+      borderRadius: e.borderRadius.sm,
+      minHeight: e.isMobile ? "24px" : "28px",
+      minWidth: e.isMobile ? "24px" : "28px",
+      borderColor: e.neutralOutlinedBorder,
+      color: e.textPrimary,
+      "&:hover": {
+        backgroundColor: e.neutralPlainHoverBg,
+        color: e.textPrimary
+      }
+    },
+    scoreDisplay: {
+      fontFamily: e.fontFamilyPrimary,
+      fontWeight: 600,
+      fontSize: e.isMobile ? "1.25em" : "1.5em",
+      color: e.textPrimary,
+      minWidth: e.isMobile ? "1.5rem" : "1.75rem",
+      // Much more compact display
+      textAlign: "center",
+      bgcolor: e.neutralSoftBg,
+      borderRadius: e.borderRadius.sm,
+      padding: e.isMobile ? "4px 8px" : "6px 12px"
+    },
+    separator: {
+      fontFamily: e.fontFamilyPrimary,
+      fontWeight: 400,
+      fontSize: e.isMobile ? "1.25em" : "1.5em",
+      color: e.textSecondary
+    },
+    // Central score container with home score, separator, away score
+    scoreContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: e.isMobile ? e.spacingScale.sm : e.spacingScale.md,
+      mx: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
+    }
+  };
+};
+export {
+  n as createStyles
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/CorrectScore/ScoreSelectorSplit.js

@@ -0,0 +1,103 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { memo as C, useState as p } from "react";
+import { Box as s, Typography as S, IconButton as y } from "@mui/joy";
+import { useColors as B, useCornerRadius as b, useFontFamily as v, useSpacingScale as I, isExtraSmall as M } 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 R } from "../../../../../../common/src/hooks/useConstantContext.js";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import T from "../../../../../../../node_modules/@mui/icons-material/esm/KeyboardArrowLeft.js";
+import F from "../../../../../../../node_modules/@mui/icons-material/esm/KeyboardArrowRight.js";
+import { createSplitStyles as z } from "./ScoreSelectorSplit.styles.js";
+import { MatchQuizConstantsContext as A } from "../../../../providers/ConstantsProvider.js";
+const u = C(({ team: o, score: a, onIncrement: x, onDecrement: i, styles: t, showTeamLabels: d }) => {
+  var r;
+  return /* @__PURE__ */ e.jsxs(s, { sx: t.row, children: [
+    /* @__PURE__ */ e.jsxs(s, { sx: t.teamInfo, children: [
+      /* @__PURE__ */ e.jsx(s, { sx: t.teamLogo, children: (r = o.assets) != null && r.logo ? /* @__PURE__ */ e.jsx(
+        "img",
+        {
+          src: o.assets.logo,
+          alt: o.name,
+          style: { width: "100%", height: "100%", objectFit: "contain" }
+        }
+      ) : /* @__PURE__ */ e.jsx(S, { level: "body-sm", sx: t.teamLogoText, children: o.name }) }),
+      d && /* @__PURE__ */ e.jsx(S, { level: "body-sm", sx: t.teamName, children: o.name })
+    ] }),
+    /* @__PURE__ */ e.jsxs(s, { sx: t.scoreInputRow, children: [
+      /* @__PURE__ */ e.jsx(
+        y,
+        {
+          size: "sm",
+          variant: "plain",
+          onClick: i,
+          sx: t.scoreButton,
+          disabled: a === 0,
+          children: /* @__PURE__ */ e.jsx(T, { fontSize: "small" })
+        }
+      ),
+      /* @__PURE__ */ e.jsx(S, { level: "h2", sx: t.scoreDisplay, children: a }),
+      /* @__PURE__ */ e.jsx(
+        y,
+        {
+          size: "sm",
+          variant: "plain",
+          onClick: x,
+          sx: t.scoreButton,
+          children: /* @__PURE__ */ e.jsx(F, { fontSize: "small" })
+        }
+      )
+    ] })
+  ] });
+});
+u.displayName = "TeamRow";
+const U = (o) => {
+  const a = B(), x = b(), i = v(), t = I(), d = M(), { showTeamLabels: r } = R(A), [m, j] = p(o.initialHomeScore ?? 0), [c, g] = p(o.initialAwayScore ?? 0), h = z({
+    spacingScale: t,
+    borderRadius: x,
+    fontFamilyPrimary: i.primary,
+    fontFamilySecondary: i.secondary,
+    textPrimary: a.textPrimary,
+    textSecondary: a.textSecondary,
+    neutralSoftBg: a.palette.neutral.softBg,
+    neutralOutlinedBorder: a.palette.neutral.outlinedBorder,
+    neutralPlainHoverBg: a.palette.neutral.plainHoverBg,
+    isExtraSmall: d
+  }), l = (w, f) => {
+    if (w === "home") {
+      const n = f ? Math.min(m + 1, 99) : Math.max(m - 1, 0);
+      j(n), o.onScoreChange(n, c);
+    } else {
+      const n = f ? Math.min(c + 1, 99) : Math.max(c - 1, 0);
+      g(n), o.onScoreChange(m, n);
+    }
+  };
+  return /* @__PURE__ */ e.jsxs(s, { sx: h.container, children: [
+    /* @__PURE__ */ e.jsx(
+      u,
+      {
+        team: o.matchModel.homeTeam,
+        score: m,
+        onIncrement: () => l("home", !0),
+        onDecrement: () => l("home", !1),
+        styles: h,
+        showTeamLabels: r
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      u,
+      {
+        team: o.matchModel.awayTeam,
+        score: c,
+        onIncrement: () => l("away", !0),
+        onDecrement: () => l("away", !1),
+        styles: h,
+        showTeamLabels: r
+      }
+    )
+  ] });
+};
+export {
+  U as default
+};

package/packages/match-quiz-play/src/components/Shared/Fixtures/CorrectScore/ScoreSelectorSplit.styles.js

@@ -0,0 +1,86 @@
+const t = (e) => ({
+  // Split variant layout container: two stacked rows
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale.sm,
+    pt: e.spacingScale.md,
+    width: "100%"
+  },
+  // One row: left team info + right score control
+  row: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: e.spacingScale.sm,
+    width: "100%"
+  },
+  // Left side: logo + team name inline
+  teamInfo: {
+    display: "flex",
+    alignItems: "center",
+    gap: e.spacingScale.sm,
+    minWidth: 0,
+    flex: 1
+  },
+  teamName: {
+    fontFamily: e.fontFamilySecondary,
+    color: e.textPrimary,
+    // Keep desktop font size for split variant, only use smaller on extra small
+    fontSize: e.isExtraSmall ? "0.75em" : "0.875em",
+    fontWeight: 600,
+    textAlign: "left",
+    overflow: "hidden"
+  },
+  // Team logo - use smaller size like mobile but keep desktop size for non-extra-small
+  teamLogo: {
+    width: e.isExtraSmall ? "24px" : "32px",
+    height: e.isExtraSmall ? "24px" : "32px",
+    backgroundColor: "transparent",
+    boxShadow: "none",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 0,
+    flexShrink: 0
+  },
+  teamLogoText: {
+    fontFamily: e.fontFamilySecondary,
+    color: e.textSecondary,
+    // Keep desktop font size for split variant, only use smaller on extra small
+    fontSize: e.isExtraSmall ? "0.625em" : "0.75em",
+    fontWeight: 600,
+    textAlign: "center"
+  },
+  // Horizontal score input row
+  scoreInputRow: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  scoreButton: {
+    borderRadius: e.borderRadius.sm,
+    // Keep desktop size for split variant, only use smaller on extra small
+    minHeight: e.isExtraSmall ? "28px" : "32px",
+    minWidth: e.isExtraSmall ? "28px" : "32px",
+    borderColor: e.neutralOutlinedBorder,
+    color: e.textPrimary,
+    "&:hover": {
+      backgroundColor: e.neutralPlainHoverBg
+    }
+  },
+  scoreDisplay: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 600,
+    // Keep desktop font size for split variant, only use smaller on extra small
+    fontSize: e.isExtraSmall ? "1.5em" : "2em",
+    color: e.textPrimary,
+    minWidth: e.isExtraSmall ? "2.5rem" : "3rem",
+    textAlign: "center",
+    bgcolor: e.neutralSoftBg,
+    borderRadius: e.borderRadius.sm
+  }
+});
+export {
+  t as createSplitStyles
+};