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

package/packages/event-game-play/src/components/Shared/Fixtures/Boolean/BooleanSelector.js

@@ -0,0 +1,108 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { useState as g } from "react";
+import { Box as s, Typography as m } from "@mui/joy";
+import { useColors as f, useCornerRadius as j, useFontFamily as S, useSpacingScale as v, isMobile as w } 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 "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import { createStyles as L } from "./BooleanSelector.styles.js";
+import { useTranslation as b } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const N = (i) => {
+  const { t: l } = b(), o = f(), C = j(), a = S(), u = v(), n = w(), [c, x] = g(
+    i.prediction
+  ), t = L({
+    spacingScale: u,
+    borderRadius: C,
+    fontFamilyPrimary: a.primary,
+    fontFamilySecondary: a.secondary,
+    textPrimary: o.textPrimary,
+    textSecondary: o.textSecondary,
+    neutralSoftBg: o.palette.neutral.softBg,
+    neutralOutlinedBorder: o.palette.neutral.outlinedBorder,
+    neutralPlainHoverBg: o.palette.neutral.plainHoverBg,
+    primary: o.palette.primary.plainColor,
+    onPrimary: o.palette.primary.onPrimary,
+    successMain: o.palette.success.plainColor,
+    dangerMain: o.palette.danger.plainColor,
+    isMobile: n
+  }), p = (r) => {
+    x(r), i.onSelectionChange(r);
+  }, d = {
+    yes: l("eventGame.fixtures.yes"),
+    no: l("eventGame.fixtures.no")
+  }, y = ({ isSelected: r }) => /* @__PURE__ */ e.jsxs(s, { sx: t.optionContainer, children: [
+    /* @__PURE__ */ e.jsx(
+      s,
+      {
+        sx: {
+          ...t.optionIcon,
+          ...r ? t.selectedYesIcon : {},
+          cursor: "pointer"
+        },
+        onClick: () => p(!0),
+        children: /* @__PURE__ */ e.jsx(
+          "svg",
+          {
+            width: n ? "20" : "24",
+            height: n ? "20" : "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ e.jsx(
+              "path",
+              {
+                d: "M7 22H4C3.46957 22 2.96086 21.7893 2.58579 21.4142C2.21071 21.0391 2 20.5304 2 20V13C2 12.4696 2.21071 11.9609 2.58579 11.5858C2.96086 11.2107 3.46957 11 4 11H7M14 9V5C14 4.20435 13.6839 3.44129 13.1213 2.87868C12.5587 2.31607 11.7956 2 11 2L7 11V22H18.28C18.7623 22.0055 19.2304 21.8364 19.5979 21.524C19.9654 21.2116 20.2077 20.7769 20.28 20.3L21.66 11.3C21.7035 11.0134 21.6842 10.7207 21.6033 10.4423C21.5225 10.1638 21.3821 9.90629 21.1919 9.68751C21.0016 9.46873 20.7661 9.29393 20.5016 9.17522C20.2371 9.0565 19.9499 8.99672 19.66 9H14Z",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e.jsx(m, { level: "body-sm", sx: t.optionLabel, children: d.yes })
+  ] }), h = ({ isSelected: r }) => /* @__PURE__ */ e.jsxs(s, { sx: t.optionContainer, children: [
+    /* @__PURE__ */ e.jsx(
+      s,
+      {
+        sx: {
+          ...t.optionIcon,
+          ...r ? t.selectedNoIcon : {},
+          cursor: "pointer"
+        },
+        onClick: () => p(!1),
+        children: /* @__PURE__ */ e.jsx(
+          "svg",
+          {
+            width: n ? "20" : "24",
+            height: n ? "20" : "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ e.jsx(
+              "path",
+              {
+                d: "M17 2H20C20.5304 2 21.0391 2.21071 21.4142 2.58579C21.7893 2.96086 22 3.46957 22 4V11C22 11.5304 21.7893 12.0391 21.4142 12.4142C21.0391 12.7893 20.5304 13 20 13H17M10 15V19C10 19.7956 10.3161 20.5587 10.8787 21.1213C11.4413 21.6839 12.2044 22 13 22L17 13V2H5.72C5.23766 1.99448 4.76962 2.16361 4.40206 2.47596C4.03451 2.78831 3.79232 3.22305 3.72 3.7L2.34 12.7C2.29648 12.9866 2.31583 13.2793 2.39668 13.5577C2.47753 13.8362 2.61793 14.0937 2.80816 14.3125C2.99839 14.5313 3.23394 14.7061 3.49843 14.8248C3.76291 14.9435 4.05011 15.0033 4.34 15H10Z",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e.jsx(m, { level: "body-sm", sx: t.optionLabel, children: d.no })
+  ] });
+  return /* @__PURE__ */ e.jsxs(s, { sx: t.container, children: [
+    /* @__PURE__ */ e.jsx(y, { isSelected: c === !0 }),
+    /* @__PURE__ */ e.jsx(h, { isSelected: c === !1 })
+  ] });
+};
+export {
+  N as default
+};

package/packages/event-game-play/src/components/Shared/Fixtures/Boolean/BooleanSelector.styles.js

@@ -0,0 +1,44 @@
+import { createOptionIconStyles as t } from "../shared.styles.js";
+const a = (e) => {
+  const n = t({
+    spacingScale: e.spacingScale,
+    neutralSoftBg: e.neutralSoftBg,
+    neutralPlainHoverBg: e.neutralPlainHoverBg,
+    isMobile: e.isMobile,
+    primary: e.primary,
+    onPrimary: e.onPrimary,
+    successMain: e.successMain,
+    dangerMain: e.dangerMain
+  });
+  return {
+    container: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: e.isMobile ? e.spacingScale.xl : e.spacingScale["2xl"],
+      pt: e.isMobile ? e.spacingScale.md : e.spacingScale.lg
+    },
+    optionContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: e.spacingScale.sm
+    },
+    optionIcon: {
+      ...n.base,
+      color: e.textSecondary
+    },
+    selectedYesIcon: n.selectedYes,
+    selectedNoIcon: n.selectedNo,
+    optionLabel: {
+      fontFamily: e.fontFamilySecondary,
+      color: e.textPrimary,
+      fontSize: e.isMobile ? "0.875em" : "1em",
+      fontWeight: 600,
+      textAlign: "center"
+    }
+  };
+};
+export {
+  a as createStyles
+};

package/packages/event-game-play/src/components/Shared/Fixtures/Number/NumberFixture.js

@@ -0,0 +1,70 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as r, Typography as v } from "@mui/joy";
+import { useColors as j, isExtraSmall as p, useCornerRadius as C, useFontFamily as b, useSpacingScale as D } 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 F } from "../../../../../../common/src/hooks/useConstantContext.js";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import P from "./NumberSelector.js";
+import { createStyles as E } from "./NumberFixture.styles.js";
+import O from "../PointsDisplay/PointsDisplay.js";
+import { EventGameConstantsContext as V } from "../../../../providers/ConstantsProvider.js";
+import { useTranslation as T } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const Q = (t) => {
+  var u, d;
+  const { t: a } = T(), s = j(), S = p(), g = C(), l = b(), m = D(), { points: h } = F(V), x = t.useExtraSmallLayout !== void 0 ? t.useExtraSmallLayout : S, o = E({
+    spacingScale: m,
+    borderRadius: g,
+    fontFamilyPrimary: l.primary,
+    fontFamilySecondary: l.secondary,
+    textPrimary: s.textPrimary,
+    textSecondary: s.textSecondary,
+    isExtraSmall: x
+  }), c = (() => {
+    if (!t.validOutcomes) return null;
+    const { min: i, max: n } = t.validOutcomes, f = i != null, y = n != null;
+    return f && y ? a("eventGame.fixtures.numberRangeDescription", { min: i, max: n }) : f ? a("eventGame.fixtures.numberMinDescription", { min: i }) : y ? a("eventGame.fixtures.numberMaxDescription", { max: n }) : null;
+  })();
+  return /* @__PURE__ */ e.jsxs(r, { sx: o.container, children: [
+    /* @__PURE__ */ e.jsxs(
+      r,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%",
+          gap: m.sm
+        },
+        children: [
+          x ? /* @__PURE__ */ e.jsx(e.Fragment, {}) : /* @__PURE__ */ e.jsx(r, { sx: { flex: 1 } }),
+          /* @__PURE__ */ e.jsx(v, { level: "h3", sx: o.title, children: t.question }),
+          /* @__PURE__ */ e.jsx(r, { sx: { flex: 1, display: "flex", justifyContent: "flex-end" }, children: t.showPoints !== !1 && h.length > 0 && /* @__PURE__ */ e.jsx(
+            O,
+            {
+              fixtureId: t.fixtureId,
+              brandingPrimaryColor: t.brandingPrimaryColor,
+              isSplitVariant: t.isSplitVariant
+            }
+          ) })
+        ]
+      }
+    ),
+    c && /* @__PURE__ */ e.jsx(v, { level: "body-sm", sx: o.description, children: c }),
+    /* @__PURE__ */ e.jsx(
+      P,
+      {
+        onChange: t.onChange,
+        prediction: t.prediction,
+        minValue: ((u = t.validOutcomes) == null ? void 0 : u.min) ?? void 0,
+        maxValue: ((d = t.validOutcomes) == null ? void 0 : d.max) ?? void 0,
+        isOverlayVariant: t.isOverlayVariant
+      }
+    )
+  ] });
+};
+export {
+  Q as default
+};

package/packages/event-game-play/src/components/Shared/Fixtures/Number/NumberFixture.styles.js

@@ -0,0 +1,37 @@
+import { isMobile as i } 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 x = (t) => {
+  const e = i();
+  return {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    title: {
+      fontFamily: t.fontFamilyPrimary,
+      fontWeight: 600,
+      fontSize: e ? "1.125em" : "1.25em",
+      lineHeight: 1.2,
+      color: t.textPrimary,
+      textAlign: t.isExtraSmall ? "left" : "center"
+    },
+    description: {
+      fontFamily: t.fontFamilySecondary,
+      fontSize: e ? "0.875em" : "0.9375em",
+      color: t.textSecondary,
+      textAlign: "center",
+      mt: t.spacingScale.xs,
+      mb: t.spacingScale.xs
+    }
+  };
+};
+export {
+  x as createStyles
+};

package/packages/event-game-play/src/components/Shared/Fixtures/Number/NumberSelector.js

@@ -0,0 +1,82 @@
+import { j as r } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { useState as F, useRef as I } from "react";
+import { Box as y, IconButton as p, Input as V } from "@mui/joy";
+import { useColors as v, useCornerRadius as B, useFontFamily as j, useSpacingScale as P, isMobile as R, useInternalTheme as z } 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 "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import M from "../../../../../../../node_modules/@mui/icons-material/esm/KeyboardArrowLeft.js";
+import k from "../../../../../../../node_modules/@mui/icons-material/esm/KeyboardArrowRight.js";
+import { createStyles as w } from "./NumberSelector.styles.js";
+const $ = (e) => {
+  const t = v(), h = B(), i = j(), g = P(), m = R(), S = z(), [o, u] = F(e.prediction), l = I(null), c = e.minValue !== void 0 ? e.minValue : -1 / 0, d = e.maxValue !== void 0 ? e.maxValue : 1 / 0, b = S.mode === "dark" || e.isOverlayVariant, a = w({
+    spacingScale: g,
+    borderRadius: h,
+    fontFamilyPrimary: i.primary,
+    fontFamilySecondary: i.secondary,
+    textPrimary: t.textPrimary,
+    textSecondary: t.textSecondary,
+    neutralSoftBg: t.palette.neutral.softBg,
+    neutralOutlinedBorder: t.palette.neutral.outlinedBorder,
+    neutralPlainHoverBg: t.palette.neutral.plainHoverBg,
+    primaryPlainColor: t.palette.primary.plainColor,
+    isMobile: m,
+    iconColor: b ? "#FFFFFF" : t.textPrimary
+  }), f = (s) => {
+    const n = s ? Math.min(o + 1, d) : Math.max(o - 1, c);
+    l.current && (l.current.value = String(n)), u(n), e.onChange(n);
+  }, C = (s) => {
+    const n = s.target.value;
+    if (n === "" || !/^\d+$/.test(n))
+      return;
+    const x = parseInt(n, 10);
+    u(x), e.onChange(x);
+  };
+  return /* @__PURE__ */ r.jsx(y, { sx: a.container, children: /* @__PURE__ */ r.jsxs(y, { sx: a.numberInputContainer, children: [
+    /* @__PURE__ */ r.jsx(
+      p,
+      {
+        size: "sm",
+        variant: "plain",
+        onClick: () => f(!1),
+        sx: a.numberButton,
+        disabled: o <= c,
+        children: /* @__PURE__ */ r.jsx(M, { fontSize: "small" })
+      }
+    ),
+    /* @__PURE__ */ r.jsx(
+      V,
+      {
+        value: o,
+        onChange: C,
+        sx: a.numberDisplay,
+        slotProps: {
+          input: {
+            ref: l,
+            style: {
+              textAlign: "center",
+              fontFamily: i.primary,
+              fontWeight: 600,
+              fontSize: m ? "0.75em" : "1em"
+            }
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ r.jsx(
+      p,
+      {
+        size: "sm",
+        variant: "plain",
+        onClick: () => f(!0),
+        sx: a.numberButton,
+        disabled: o >= d,
+        children: /* @__PURE__ */ r.jsx(k, { fontSize: "small" })
+      }
+    )
+  ] }) });
+};
+export {
+  $ as default
+};

package/packages/event-game-play/src/components/Shared/Fixtures/Number/NumberSelector.styles.js

@@ -0,0 +1,64 @@
+const i = (e) => ({
+  container: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: e.isMobile ? e.spacingScale.md : e.spacingScale.lg,
+    pt: e.isMobile ? e.spacingScale.xs : e.spacingScale.sm
+  },
+  numberInputContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: e.spacingScale.sm
+  },
+  numberButton: {
+    borderRadius: e.borderRadius.sm,
+    minHeight: e.isMobile ? "28px" : "32px",
+    minWidth: e.isMobile ? "28px" : "32px",
+    borderColor: e.neutralOutlinedBorder,
+    color: e.iconColor,
+    "&:hover": {
+      backgroundColor: e.neutralPlainHoverBg,
+      color: e.iconColor
+    },
+    "& svg": {
+      color: e.iconColor
+    }
+  },
+  numberDisplay: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 600,
+    fontSize: e.isMobile ? "1.5em" : "2em",
+    color: e.textPrimary,
+    minWidth: e.isMobile ? "3.5rem" : "4.5rem",
+    maxWidth: e.isMobile ? "5rem" : "6rem",
+    textAlign: "center",
+    bgcolor: e.neutralSoftBg,
+    borderRadius: e.borderRadius.sm,
+    px: e.spacingScale.sm,
+    py: e.spacingScale.xs,
+    border: "none",
+    // Remove Joy UI's default focus outline
+    outline: "none",
+    "&:hover": {
+      bgcolor: e.neutralSoftBg
+    },
+    "&:focus-within": {
+      bgcolor: e.neutralSoftBg,
+      // Add primary color border on focus
+      outline: `2px solid ${e.primaryPlainColor}`,
+      outlineOffset: "2px"
+    },
+    // Override Joy UI Input's internal focus styles
+    "&::before": {
+      display: "none"
+    },
+    "&:focus-within::before": {
+      display: "none"
+    }
+  }
+});
+export {
+  i as createStyles
+};

package/packages/event-game-play/src/components/Shared/Fixtures/PointsDisplay/PointsDisplay.js

@@ -0,0 +1,70 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { useState as b } from "react";
+import { Tooltip as c, IconButton as v, Box as j, Typography as n } from "@mui/joy";
+import { useColors as C, useCornerRadius as S, useFontFamily as h, useSpacingScale as B, isMobile as P } 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 T } from "../../../../../../common/src/hooks/useConstantContext.js";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import g from "../../../../../../../node_modules/@mui/icons-material/esm/HelpOutline.js";
+import { createStyles as F } from "./PointsDisplay.styles.js";
+import { EventGameConstantsContext as I } from "../../../../providers/ConstantsProvider.js";
+import { useTranslation as H } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const J = (s) => {
+  const { t: i } = H(), o = C(), u = S(), l = h(), d = B(), x = P(), [a, p] = b(!1), { points: f } = T(I), t = F({
+    spacingScale: d,
+    borderRadius: u,
+    fontFamilyPrimary: l.primary,
+    fontFamilySecondary: l.secondary,
+    textPrimary: o.textPrimary,
+    textSecondary: o.textSecondary,
+    neutralSoftBg: o.palette.neutral.softBg,
+    neutralOutlinedBorder: o.palette.neutral.outlinedBorder,
+    neutralPlainHoverBg: o.palette.neutral.plainHoverBg
+  }), r = f.find((y) => y.id === s.fixtureId);
+  if (!r)
+    return null;
+  const m = () => /* @__PURE__ */ e.jsx(n, { level: "body-sm", sx: t.tooltipText, children: i("eventGame.points.earnPointsForCorrect", {
+    points: r.points
+  }) });
+  return x || s.isSplitVariant ? /* @__PURE__ */ e.jsx(
+    c,
+    {
+      title: m(),
+      placement: "top-start",
+      variant: "soft",
+      sx: t.tooltip,
+      disablePortal: !0,
+      open: a,
+      onClose: () => p(!1),
+      disableHoverListener: !0,
+      disableFocusListener: !0,
+      disableTouchListener: !0,
+      children: /* @__PURE__ */ e.jsx(
+        v,
+        {
+          onClick: () => p(!a),
+          sx: t.mobileIconButton,
+          children: /* @__PURE__ */ e.jsx(g, { sx: t.mobileIcon })
+        }
+      )
+    }
+  ) : /* @__PURE__ */ e.jsx(
+    c,
+    {
+      title: m(),
+      placement: "top-start",
+      variant: "soft",
+      sx: t.tooltip,
+      disablePortal: !0,
+      children: /* @__PURE__ */ e.jsxs(j, { sx: t.container, children: [
+        /* @__PURE__ */ e.jsx(n, { level: "body-sm", sx: t.pointsText, children: r.points }),
+        /* @__PURE__ */ e.jsx(n, { level: "body-xs", sx: t.ptsLabel, children: i("eventGame.points.pts") })
+      ] })
+    }
+  );
+};
+export {
+  J as default
+};

package/packages/event-game-play/src/components/Shared/Fixtures/PointsDisplay/PointsDisplay.styles.js

@@ -0,0 +1,98 @@
+const e = (t) => ({
+  container: {
+    backgroundColor: t.neutralSoftBg,
+    color: t.textPrimary,
+    borderRadius: t.borderRadius.md,
+    border: `1px solid ${t.neutralOutlinedBorder}`,
+    padding: `${t.spacingScale.xs} ${t.spacingScale.sm}`,
+    display: "flex",
+    alignItems: "center",
+    gap: t.spacingScale.xs,
+    cursor: "default",
+    transition: "all 0.2s ease-in-out",
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+    zIndex: 10,
+    minWidth: "56px",
+    justifyContent: "center",
+    "&:hover": {
+      backgroundColor: t.neutralPlainHoverBg,
+      transform: "scale(1.05)",
+      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.2)"
+    }
+  },
+  pointsText: {
+    fontFamily: t.fontFamilyPrimary,
+    fontWeight: 700,
+    fontSize: "0.875em",
+    lineHeight: 1,
+    color: t.textPrimary
+  },
+  ptsLabel: {
+    fontFamily: t.fontFamilySecondary,
+    fontWeight: 500,
+    fontSize: "0.75em",
+    lineHeight: 1,
+    color: t.textSecondary,
+    opacity: 0.9
+  },
+  tooltip: {
+    maxWidth: "280px",
+    backgroundColor: t.neutralSoftBg,
+    color: t.textPrimary,
+    border: `1px solid ${t.neutralOutlinedBorder}`,
+    borderRadius: t.borderRadius.sm,
+    p: t.spacingScale.xs
+  },
+  tooltipContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: t.spacingScale.xs
+  },
+  tooltipText: {
+    fontFamily: t.fontFamilySecondary,
+    color: t.textPrimary,
+    fontSize: "0.875em",
+    lineHeight: 1.3
+  },
+  tooltipSubtext: {
+    fontFamily: t.fontFamilySecondary,
+    color: t.textSecondary,
+    fontSize: "0.75em",
+    lineHeight: 1.3
+  },
+  tooltipAlternative: {
+    fontFamily: t.fontFamilySecondary,
+    color: t.textPrimary,
+    fontSize: "0.75em",
+    lineHeight: 1.3,
+    paddingLeft: t.spacingScale.xs
+  },
+  // Mobile-specific styles
+  mobileIconButton: {
+    backgroundColor: "transparent",
+    color: t.textPrimary,
+    border: "none",
+    borderRadius: "50%",
+    width: "32px",
+    height: "32px",
+    minHeight: "32px",
+    minWidth: "32px",
+    padding: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "all 0.2s ease-in-out",
+    zIndex: 10,
+    "&:hover": {
+      backgroundColor: "transparent",
+      transform: "scale(1.1)"
+    }
+  },
+  mobileIcon: {
+    fontSize: "1em",
+    color: t.textPrimary
+  }
+});
+export {
+  e as createStyles
+};

package/packages/event-game-play/src/components/Shared/Fixtures/Text/TextFixture.js

@@ -0,0 +1,62 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as o, Typography as c } from "@mui/joy";
+import { useColors as y, isExtraSmall as d, useCornerRadius as u, useFontFamily as f, useSpacingScale as S } 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 p from "./TextSelector.js";
+import { createStyles as C } from "./TextFixture.styles.js";
+import g from "../PointsDisplay/PointsDisplay.js";
+import { EventGameConstantsContext as h } from "../../../../providers/ConstantsProvider.js";
+const q = (t) => {
+  const i = y(), l = d(), m = u(), a = f(), r = S(), { points: x } = j(h), n = t.useExtraSmallLayout !== void 0 ? t.useExtraSmallLayout : l, s = C({
+    spacingScale: r,
+    borderRadius: m,
+    fontFamilyPrimary: a.primary,
+    fontFamilySecondary: a.secondary,
+    textPrimary: i.textPrimary,
+    textSecondary: i.textSecondary,
+    isExtraSmall: n
+  });
+  return /* @__PURE__ */ e.jsxs(o, { sx: s.container, children: [
+    /* @__PURE__ */ e.jsxs(
+      o,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%",
+          gap: r.sm
+        },
+        children: [
+          n ? /* @__PURE__ */ e.jsx(e.Fragment, {}) : /* @__PURE__ */ e.jsx(o, { sx: { flex: 1 } }),
+          /* @__PURE__ */ e.jsx(c, { level: "h3", sx: s.title, children: t.question }),
+          /* @__PURE__ */ e.jsx(o, { sx: { flex: 1, display: "flex", justifyContent: "flex-end" }, children: t.showPoints !== !1 && x.length > 0 && /* @__PURE__ */ e.jsx(
+            g,
+            {
+              fixtureId: t.fixtureId,
+              brandingPrimaryColor: t.brandingPrimaryColor,
+              isSplitVariant: t.isSplitVariant
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      p,
+      {
+        onTextChange: t.onTextChange,
+        prediction: t.prediction,
+        validOutcomes: t.validOutcomes,
+        optionsLayout: t.optionsLayout
+      }
+    )
+  ] });
+};
+export {
+  q as default
+};

package/packages/event-game-play/src/components/Shared/Fixtures/Text/TextFixture.styles.js

@@ -0,0 +1,29 @@
+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"
+    }
+  };
+};
+export {
+  p as createStyles
+};