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

package/packages/event-game-play/src/components/Variants/Overlay/ScoreState/EventGameOverlayScoreState.js

@@ -0,0 +1,141 @@
+import { j as t } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as a } from "@mui/joy";
+import { useInternalTheme as k, useSpacingScale as R, isMobile as B, useImageBackgroundGradient as E } from "../../../../../../common/src/functions/theme.js";
+import { sanitizeBackgroundUrl as G } from "../../../../../../common/src/functions/helpers.js";
+import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { WidgetTemplate as y } from "../../../../../../common/src/enums/enums.js";
+import f from "../../../../../../common/src/components/AdditionalCTA.js";
+import "react";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import F from "../../../../../../common/src/components/Skeletons/Overlay/ScoreState/OverlayScoreStateSkeleton.js";
+import { useImageVariant as O } from "../../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import U from "../../../../assets/default-quiz-bg.png.js";
+import V from "../../../../assets/default-quiz-bg-vertical.jpg.js";
+import { createStyles as M } from "./EventGameOverlayScoreState.styles.js";
+import W from "../../../Shared/AlertMessage.js";
+import w from "../../../Shared/Summary/PredictionSummary.js";
+import { useTranslation as z } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const ie = (e) => {
+  const n = k(), o = R(), { t: i } = z(), r = B(), g = E(
+    y.OVERLAY
+  ), h = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : r ? V : U, S = O(
+    {
+      images: e.eventGame.images,
+      imagePlaceholder: h
+    },
+    y.OVERLAY
+  ), p = G(S), C = n.colorSchemes.dark.textSecondary, s = n.colorSchemes.dark.secondaryContainer, j = n.colorSchemes.dark.textPrimary, c = n.customFontFamily.light.primary, P = n.customRadius.light.md, m = n.customRadius.light.xl, b = n.colorSchemes.dark.surfaceVariant, v = e.eventGame.status === "OPEN" && e.prediction && e.onPredictionUpdate, T = (I) => {
+    console.log(`Edit prediction for fixture at index: ${I}`);
+  }, l = M({
+    spacingScale: o,
+    textPrimary: j,
+    fontFamilyPrimary: c,
+    mdBorderRadius: P,
+    xlBorderRadius: m,
+    contentBgColor: b,
+    onSurfaceColor: n.colorSchemes.dark.onSurface,
+    surfaceVariantColor: n.colorSchemes.dark.surfaceVariant
+  }), d = {
+    display: "flex",
+    py: r ? o.xs : o.sm,
+    px: r ? o.sm : o.md,
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    borderRadius: m,
+    bgcolor: s,
+    "&:hover": {
+      bgcolor: s,
+      opacity: 0.9
+    },
+    fontSize: r ? "0.750em" : "0.8125em",
+    fontWeight: 500,
+    textTransform: "uppercase"
+  }, u = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px"
+  }, x = {
+    color: C,
+    fontFamily: c,
+    fontStyle: "normal",
+    lineHeight: "24px",
+    letterSpacing: "0.40px",
+    textTransform: "uppercase"
+  }, A = () => /* @__PURE__ */ t.jsxs(a, { sx: l.mainContentWrapper, children: [
+    e.isUnauthorized ? /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(
+      W,
+      {
+        variant: "error",
+        title: i("common.authentication.accessRequired"),
+        message: i("common.authentication.invalidOrMissingAuth")
+      }
+    ) }) : /* @__PURE__ */ t.jsx(a, { sx: l.resultsContainer, children: /* @__PURE__ */ t.jsx(a, { sx: l.resultsWrapper, children: v ? /* @__PURE__ */ t.jsx(
+      w,
+      {
+        fixtures: e.eventGame.fixtures,
+        prediction: e.prediction,
+        onEditPrediction: T,
+        onPredictionUpdate: e.onPredictionUpdate,
+        play: e.play,
+        view: "score",
+        isOverlayVariant: !0,
+        onPlayResult: e.onPlayResult
+      }
+    ) : null }) }),
+    r ? /* @__PURE__ */ t.jsx(t.Fragment, { children: e.additionalCTA && /* @__PURE__ */ t.jsx(
+      a,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ t.jsx(
+          f,
+          {
+            additionalCTA: e.additionalCTA,
+            buttonStyle: d,
+            buttonContentStyle: u,
+            textStyle: x
+          }
+        )
+      }
+    ) }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: e.additionalCTA && /* @__PURE__ */ t.jsx(
+      a,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "flex-end"
+        },
+        children: /* @__PURE__ */ t.jsx(
+          f,
+          {
+            additionalCTA: e.additionalCTA,
+            buttonStyle: d,
+            buttonContentStyle: u,
+            textStyle: x
+          }
+        )
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ t.jsx(
+    F,
+    {
+      entity: { ...e.eventGame, labels: null },
+      headline: i("eventGame.headline"),
+      backgroundImage: p,
+      imageBackgroundGradient: g,
+      rulesDisplay: e.rulesDisplay,
+      children: A()
+    }
+  );
+};
+export {
+  ie as default
+};

package/packages/event-game-play/src/components/Variants/Overlay/ScoreState/EventGameOverlayScoreState.styles.js

@@ -0,0 +1,156 @@
+const t = (e) => ({
+  // Main content wrapper
+  mainContentWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "24px",
+    zIndex: 10
+  },
+  resultsContainer: {
+    borderRadius: e.mdBorderRadius,
+    p: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    alignSelf: "stretch",
+    gap: e.spacingScale.md,
+    backdropFilter: "blur(4px)",
+    position: "relative",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: e.contentBgColor,
+      opacity: 0.25,
+      borderRadius: "inherit",
+      zIndex: 0,
+      backdropFilter: "blur(4px)"
+    },
+    "& > *": {
+      position: "relative",
+      zIndex: 1
+    }
+  },
+  resultsWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "stretch"
+  },
+  ctaSection: {
+    borderRadius: e.mdBorderRadius,
+    py: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    alignSelf: "stretch",
+    gap: e.spacingScale.md,
+    backdropFilter: "blur(4px)",
+    position: "relative",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: e.contentBgColor,
+      opacity: 0.25,
+      borderRadius: "inherit",
+      zIndex: 0,
+      backdropFilter: "blur(4px)"
+    },
+    "& > *": {
+      position: "relative",
+      zIndex: 1
+    }
+  },
+  // Buttons container
+  buttonsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale.md
+  },
+  // Play again button
+  playAgainButton: {
+    display: "flex",
+    minHeight: "48px",
+    py: "12px",
+    pr: "24px",
+    pl: "16px",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    borderRadius: e.xlBorderRadius,
+    bgcolor: e.onSurfaceColor,
+    "&:hover": {
+      bgcolor: e.surfaceVariantColor
+    },
+    fontSize: "0.9375em"
+  },
+  // Play again button content
+  playAgainButtonContent: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "8px",
+    alignSelf: "stretch"
+  },
+  // Play again icon
+  playAgainIcon: {
+    display: "flex",
+    width: "24px",
+    height: "24px",
+    justifyContent: "center",
+    alignItems: "center",
+    color: e.textPrimary
+  },
+  // Play again text
+  playAgainText: {
+    color: e.textPrimary,
+    textAlign: "center",
+    fontFamily: e.fontFamilyPrimary,
+    fontSize: "0.9375em",
+    fontStyle: "normal",
+    fontWeight: 500,
+    lineHeight: "24px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase"
+  },
+  // Lead collection container
+  leadCollectionContainer: {
+    borderRadius: e.mdBorderRadius,
+    p: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    alignSelf: "stretch",
+    gap: e.spacingScale.md,
+    backdropFilter: "blur(4px)",
+    position: "relative",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: e.contentBgColor,
+      opacity: 0.25,
+      borderRadius: "inherit",
+      zIndex: 0,
+      backdropFilter: "blur(4px)"
+    },
+    "& > *": {
+      position: "relative",
+      zIndex: 1
+    }
+  }
+});
+export {
+  t as createStyles
+};

package/packages/event-game-play/src/components/Variants/Split/Error/EventGameSplitError.js

@@ -0,0 +1,28 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import "react";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import "@mui/joy";
+import "../../../../../../common/src/providers/ConstantsProvider.js";
+import o from "../../../../../../common/src/components/Skeletons/Split/ApiError/SplitApiErrorSkeleton.js";
+import i from "../../../Shared/MainCard.js";
+import { useTranslation as n } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const y = (r) => {
+  const { t } = n();
+  return /* @__PURE__ */ e.jsx(i, { brandingBorderColor: null, children: /* @__PURE__ */ e.jsx(
+    o,
+    {
+      entity: { ...r.eventGame, labels: null },
+      headline: t("eventGame.headline"),
+      tryAgainButtonText: t("eventGame.buttons.tryAgain"),
+      defaultImagePlaceholderUrl: r.defaultImagePlaceholderUrl,
+      isApiError: r.isApiError,
+      toggleTryAgain: r.toggleTryAgain,
+      renderPresentedBy: (a) => /* @__PURE__ */ e.jsx(e.Fragment, {})
+    }
+  ) });
+};
+export {
+  y as default
+};

package/packages/event-game-play/src/components/Variants/Split/EventGameSplitVariant.js

@@ -0,0 +1,347 @@
+import { j as e } from "../../../../../../node_modules/react/jsx-runtime.js";
+import re, { useCallback as oe, useMemo as U } from "react";
+import { Box as o, Typography as u, Button as k } from "@mui/joy";
+import { isMobile as se, useColors as v, useFontFamily as ae, useCornerRadius as w, useSpacingScale as ce } from "../../../../../common/src/functions/theme.js";
+import { hexToRgb as le } from "../../../../../common/src/functions/helpers.js";
+import "../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { WidgetTemplate as de } from "../../../../../common/src/enums/enums.js";
+import "../../../../../common/src/providers/ConstantsProvider.js";
+import me from "../../../../../common/src/components/Skeletons/Split/SplitSkeleton.js";
+import { useImageVariant as ue } from "../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import xe from "../../Shared/MainCard.js";
+import fe from "../../../assets/default-quiz-bg.png.js";
+import pe from "../../../assets/default-quiz-bg-vertical.jpg.js";
+import { createStyles as ge } from "./EventGameSplitVariant.styles.js";
+import { EventGameOutcomeTypeEnum as f } from "fansunited-sdk-esm";
+import he from "../../Shared/Fixtures/Number/NumberFixture.js";
+import Ce from "../../Shared/Fixtures/Boolean/BooleanFixture.js";
+import L from "../../Shared/Fixtures/Text/TextFixture.js";
+import ve from "../../Shared/Stepper.js";
+import ye from "../../Shared/Countdown.js";
+import Se from "../../Shared/Summary/PredictionSummary.js";
+import { isPredictionsCutoffPassed as je, clampNumberPrediction as be } from "../../../helpers/helpers.js";
+import { useTranslation as Ge } from "../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const Qe = (n) => {
+  const [r, E] = re.useState(1), { t: c } = Ge(), O = se(), M = n.defaultImagePlaceholderUrl ? n.defaultImagePlaceholderUrl : O ? pe : fe, D = ue(
+    {
+      images: n.eventGame.images,
+      imagePlaceholder: M
+    },
+    de.SPLIT
+  ), $ = v().palette.danger.plainColor, z = v().textColor, A = v().textColor, T = ae().primary, _ = v().surfaceVariant, W = w(), p = v().palette.primary.plainColor, g = v().palette.primary.onPrimary, N = w().xl, q = ce(), i = ge({
+    spacingScale: q,
+    borderRadius: W,
+    fontFamilyPrimary: T,
+    bgcolor: le(_ || ""),
+    textColor: z,
+    secondaryColor: A,
+    isMobile: O,
+    dangerColor: $
+  }), I = oe(
+    (t, s) => {
+      n.setPrediction((d) => {
+        const m = { ...d }, l = m.fixtures.find(
+          (x) => x.id === t
+        );
+        return l && (l.prediction = s), m;
+      });
+    },
+    [n.setPrediction]
+  ), h = n.eventGame.fixtures.length + 1, y = n.eventGame.status === "OPEN" && je(n.eventGame.predictionsCutoff || ""), H = () => {
+    var s, d;
+    const t = n.eventGame.fixtures[r - 1];
+    if (t && t.outcomeType === f.NUMBER) {
+      const m = t.validOutcomes, l = (d = (s = n.prediction) == null ? void 0 : s.fixtures) == null ? void 0 : d.find(
+        (x) => x.id === t.id
+      );
+      if (l && typeof l.prediction == "number") {
+        const x = be(
+          l.prediction,
+          m
+        );
+        x !== l.prediction && I(t.id, x);
+      }
+    }
+    r < h ? E(r + 1) : n.play();
+  }, J = (t) => {
+    E(t + 1);
+  }, F = () => {
+    var d, m;
+    if (r === h) return !0;
+    const t = n.eventGame.fixtures[r - 1];
+    if (!t) return !1;
+    const s = (m = (d = n.prediction) == null ? void 0 : d.fixtures) == null ? void 0 : m.find(
+      (l) => l.id === t.id
+    );
+    if (!s) return !1;
+    switch (t.outcomeType) {
+      case f.BOOLEAN:
+        return typeof s.prediction == "boolean";
+      case f.NUMBER:
+        return typeof s.prediction == "number";
+      case f.FREE_INPUT:
+        return typeof s.prediction == "string" && s.prediction.trim().length > 0;
+      case f.ENUM:
+        return typeof s.prediction == "string" && s.prediction.trim().length > 0;
+      default:
+        return !1;
+    }
+  }, K = () => {
+    r > 1 && E(r - 1);
+  }, Q = () => /* @__PURE__ */ e.jsx(o, { sx: i.questionAreaContent, children: /* @__PURE__ */ e.jsx(o, { sx: i.mainContentContainer, children: /* @__PURE__ */ e.jsxs(o, { sx: i.gameStateContainer, children: [
+    /* @__PURE__ */ e.jsx(u, { sx: i.stateTitle, children: c("eventGame.states.pending.title") }),
+    /* @__PURE__ */ e.jsx(u, { sx: i.stateDescription, children: c("eventGame.states.pending.description") })
+  ] }) }) }), X = () => /* @__PURE__ */ e.jsx(o, { sx: i.questionAreaContent, children: /* @__PURE__ */ e.jsx(o, { sx: i.mainContentContainer, children: /* @__PURE__ */ e.jsxs(o, { sx: i.gameStateContainer, children: [
+    /* @__PURE__ */ e.jsxs(o, { sx: i.liveIndicatorContainer, children: [
+      /* @__PURE__ */ e.jsx(o, { sx: i.liveIndicator }),
+      /* @__PURE__ */ e.jsx(u, { sx: i.liveText, children: c("eventGame.states.live.indicator") })
+    ] }),
+    /* @__PURE__ */ e.jsx(u, { sx: i.stateDescription, children: c("eventGame.states.live.description") })
+  ] }) }) }), Y = () => /* @__PURE__ */ e.jsx(o, { sx: i.questionAreaContent, children: /* @__PURE__ */ e.jsx(o, { sx: i.mainContentContainer, children: /* @__PURE__ */ e.jsxs(o, { sx: i.gameStateContainer, children: [
+    /* @__PURE__ */ e.jsx(u, { sx: i.stateTitle, children: c("eventGame.states.closed.title") }),
+    /* @__PURE__ */ e.jsx(u, { sx: i.stateDescription, children: c("eventGame.states.closed.description") })
+  ] }) }) }), Z = () => /* @__PURE__ */ e.jsxs(o, { sx: i.gameStateContainer, children: [
+    /* @__PURE__ */ e.jsx(u, { sx: i.stateTitle, children: c("eventGame.states.open.title") }),
+    /* @__PURE__ */ e.jsx(u, { sx: i.stateDescription, children: c("eventGame.states.open.description") })
+  ] }), C = U(() => n.eventGame.fixtures[r - 1], [n.eventGame.fixtures, r]), S = U(() => C ? {
+    onSelectionChange: (t) => I(C.id, t)
+  } : {}, [C == null ? void 0 : C.id, I]), ee = () => {
+    var s, d, m, l, x, B, R, V;
+    const t = C;
+    if (y)
+      return Z();
+    if (t)
+      switch (t.outcomeType) {
+        case f.NUMBER:
+          const j = (d = (s = n.prediction) == null ? void 0 : s.fixtures) == null ? void 0 : d.find(
+            (a) => a.id === t.id
+          ), ie = t.validOutcomes;
+          return /* @__PURE__ */ e.jsx(
+            he,
+            {
+              prediction: typeof (j == null ? void 0 : j.prediction) == "number" ? j.prediction : 0,
+              isSplitVariant: !0,
+              onChange: (a) => S.onSelectionChange(a),
+              question: t.question,
+              validOutcomes: ie || null,
+              fixtureId: t.id
+            },
+            `${t.id}-${r}`
+          );
+        case f.BOOLEAN:
+          const b = (l = (m = n.prediction) == null ? void 0 : m.fixtures) == null ? void 0 : l.find(
+            (a) => a.id === t.id
+          );
+          return /* @__PURE__ */ e.jsx(
+            Ce,
+            {
+              prediction: typeof (b == null ? void 0 : b.prediction) == "boolean" ? b.prediction : null,
+              isSplitVariant: !0,
+              onSelectionChange: S.onSelectionChange,
+              question: t.question,
+              fixtureId: t.id
+            },
+            t.id
+          );
+        case f.FREE_INPUT:
+          const G = (B = (x = n.prediction) == null ? void 0 : x.fixtures) == null ? void 0 : B.find(
+            (a) => a.id === t.id
+          );
+          return /* @__PURE__ */ e.jsx(
+            L,
+            {
+              question: t.question,
+              prediction: typeof (G == null ? void 0 : G.prediction) == "string" ? G.prediction : null,
+              validOutcomes: null,
+              onTextChange: (a) => S.onSelectionChange(a),
+              isSplitVariant: !0,
+              fixtureId: t.id
+            },
+            `${t.id}-${r}`
+          );
+        case f.ENUM:
+          const P = (V = (R = n.prediction) == null ? void 0 : R.fixtures) == null ? void 0 : V.find(
+            (a) => a.id === t.id
+          );
+          return /* @__PURE__ */ e.jsx(
+            L,
+            {
+              question: t.question,
+              prediction: typeof (P == null ? void 0 : P.prediction) == "string" ? P.prediction : null,
+              validOutcomes: t.validOutcomes,
+              onTextChange: (a) => S.onSelectionChange(a),
+              isSplitVariant: !0,
+              fixtureId: t.id,
+              optionsLayout: n.optionsLayout
+            },
+            `${t.id}-${r}`
+          );
+      }
+  }, te = () => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    n.showCountdown && !y && n.eventGame.status === "OPEN" && /* @__PURE__ */ e.jsx(
+      o,
+      {
+        sx: {
+          my: q.lg
+        },
+        children: /* @__PURE__ */ e.jsx(
+          ye,
+          {
+            predictionsCutoffTime: n.eventGame.predictionsCutoff || "",
+            isSplitVariant: !0
+          }
+        )
+      }
+    ),
+    !y && /* @__PURE__ */ e.jsx(o, { sx: i.paginationContainer, children: /* @__PURE__ */ e.jsx(
+      ve,
+      {
+        eventGame: n.eventGame,
+        currentStep: r,
+        totalSteps: h,
+        isSplitVariant: !0
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(o, { sx: i.questionAreaContent, children: /* @__PURE__ */ e.jsxs(o, { sx: i.mainContentContainer, children: [
+      r === h ? /* @__PURE__ */ e.jsx(
+        Se,
+        {
+          fixtures: n.eventGame.fixtures,
+          prediction: n.prediction,
+          onEditPrediction: J,
+          onPredictionUpdate: n.setPrediction,
+          view: "play",
+          play: async () => n.play(),
+          isSplitVariant: !0
+        }
+      ) : ee(),
+      /* @__PURE__ */ e.jsxs(o, { sx: i.navigationContainer, children: [
+        r > 1 && r < h && /* @__PURE__ */ e.jsx(
+          k,
+          {
+            variant: "outlined",
+            onClick: K,
+            sx: {
+              borderRadius: N,
+              py: "10px",
+              px: "16px",
+              borderColor: p,
+              color: g,
+              transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+              transform: "scale(1)",
+              alignSelf: "center",
+              "&:hover": {
+                borderColor: p,
+                backgroundColor: `${p}10`,
+                transform: "scale(1.02)"
+              },
+              "&:active": {
+                transform: "scale(0.98)"
+              },
+              fontSize: "0.9375em"
+            },
+            children: /* @__PURE__ */ e.jsx(
+              u,
+              {
+                sx: {
+                  fontFamily: T,
+                  fontWeight: 500,
+                  fontSize: "0.9375em",
+                  lineHeight: "24px",
+                  letterSpacing: "0.46px",
+                  textTransform: "uppercase",
+                  gap: "8px",
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: c("eventGame.buttons.back")
+              }
+            )
+          }
+        ),
+        !y && /* @__PURE__ */ e.jsx(
+          k,
+          {
+            variant: "soft",
+            onClick: F() ? H : () => {
+            },
+            loading: n.isPlaying,
+            sx: {
+              cursor: F() ? "pointer" : "not-allowed",
+              opacity: F() ? "1" : "0.5",
+              borderRadius: N,
+              py: "10px",
+              px: "16px",
+              bgcolor: p,
+              color: g,
+              transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+              transform: "scale(1)",
+              alignSelf: "center",
+              "&:hover": {
+                bgcolor: p,
+                transform: "scale(1.02)"
+              },
+              "&:active": {
+                color: g,
+                transform: "scale(0.98)"
+              },
+              "&:disabled": {
+                bgcolor: p,
+                color: g,
+                opacity: "12%"
+              },
+              "--Icon-color": g,
+              fontSize: "0.9375em"
+            },
+            children: /* @__PURE__ */ e.jsx(
+              u,
+              {
+                sx: {
+                  fontFamily: T,
+                  fontWeight: 500,
+                  fontSize: "0.9375em",
+                  lineHeight: "24px",
+                  letterSpacing: "0.46px",
+                  textTransform: "uppercase",
+                  color: g,
+                  gap: "8px",
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: c(r === h ? "eventGame.buttons.play" : "eventGame.buttons.next")
+              }
+            )
+          }
+        )
+      ] })
+    ] }) })
+  ] }), ne = () => {
+    switch (n.eventGame.status) {
+      case "PENDING":
+        return Q();
+      case "LIVE":
+        return X();
+      case "CLOSED":
+        return Y();
+      default:
+        return te();
+    }
+  };
+  return /* @__PURE__ */ e.jsx(xe, { brandingBorderColor: null, children: /* @__PURE__ */ e.jsx(
+    me,
+    {
+      entity: { ...n.eventGame, labels: null },
+      headline: c("eventGame.headline"),
+      finalImage: D,
+      brandingLogo: "",
+      renderPresentedBy: (t) => /* @__PURE__ */ e.jsx(e.Fragment, {}),
+      rulesDisplay: n.rulesDisplay,
+      children: ne()
+    }
+  ) });
+};
+export {
+  Qe as default
+};