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

package/packages/match-quiz-play/src/components/MatchQuizPlay.js

@@ -0,0 +1,490 @@
+import { j as a } from "../../../../node_modules/react/jsx-runtime.js";
+import { useState as P, useEffect as H } from "react";
+import { WidgetTemplate as u } from "../../../common/src/enums/enums.js";
+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 V from "../../../common/src/components/Spinner.js";
+import "@mui/joy";
+import "../../../common/src/providers/ConstantsProvider.js";
+import { useMatchQuizById as K } from "../hooks/useMatchQuiz.js";
+import { useMatchQuizPrediction as W } from "../hooks/useMatchQuizPrediction.js";
+import B from "./Variants/Overlay/MatchQuizOverlayVariant.js";
+import _ from "./Variants/Standard/MatchQuizStandardVariant.js";
+import J from "./Variants/Split/MatchQuizSplitVariant.js";
+import X from "./Variants/Standard/ScoreState/MatchQuizStandardScoreState.js";
+import Z from "./Variants/Split/ScoreState/MatchQuizSplitScoreState.js";
+import $ from "./Variants/Split/FinishedGame/MatchQuizSplitFinishedGame.js";
+import p from "./Variants/Overlay/FinishedGame/MatchQuizOverlayFinishedGame.js";
+import ee from "./Variants/Overlay/ScoreState/MatchQuizOverlayScoreState.js";
+import ae from "./MatchQuizNotFound.js";
+import te from "./Variants/Standard/Error/MatchQuizStandardError.js";
+import ie from "./Variants/Split/Error/MatchQuizSplitError.js";
+import le from "./Variants/Overlay/Error/MatchQuizOverlayError.js";
+import re from "./Variants/Standard/SignIn/MatchQuizStandardSignIn.js";
+import se from "./Variants/Split/SignIn/MatchQuizSplitSignIn.js";
+import de from "./Variants/Overlay/SignIn/MatchQuizOverlaySignIn.js";
+import ne from "./Variants/Standard/LeadCollection/StandardLeadAfterCollection.js";
+import oe from "./Variants/Split/LeadCollection/SplitLeadAfterCollection.js";
+import ue from "./Variants/Overlay/LeadCollection/OverlayLeadAfterCollection.js";
+import { PredictionRequestModel as N, MarketEnum as ce } from "fansunited-sdk-esm";
+import { isPlayersMarket as k, isCorrectScore as me } from "../helpers/helpers.js";
+import { MatchQuizConstantsProvider as h } from "../providers/ConstantsProvider.js";
+import he from "./Variants/Standard/FinishedGame/MatchQuizStandardFinishedGame.js";
+import S from "./Shared/Notification.js";
+import { useTranslation as fe } from "../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+function I(e) {
+  return e.template === u.STANDARD;
+}
+const ge = (e, s) => {
+  const t = (l) => me(l) ? "0:0" : k(l) ? !0 : l === ce.CORNERS_MATCH ? 6 : null, r = new N();
+  return r.gameInstanceId = e, r.fixtures = s.map((l) => {
+    const n = t(l.market);
+    return {
+      matchId: l.matchModel.id,
+      matchType: l.matchType,
+      market: l.market,
+      prediction: {
+        value: n,
+        playerId: void 0
+      }
+    };
+  }), r;
+}, Ze = (e) => {
+  const { t: s } = fe(), {
+    game: t,
+    squads: r,
+    points: l
+  } = K(e.entityId, e.sdk, e.showPoints), {
+    myPrediction: n,
+    setMyPrediction: M,
+    isUnauthorized: x,
+    isApiError: T,
+    setIsApiError: j,
+    setIsUnauthorized: D
+  } = W(e.entityId, e.sdk), [z, E] = P(!1), [f, c] = P(
+    new N()
+  ), [Q, R] = P(!1), [v, F] = P(!1), [Y, q] = P(!1), [U, O] = P({
+    open: !1,
+    variant: "success",
+    title: "",
+    message: ""
+  }), g = (o, d, i) => {
+    O({
+      open: !0,
+      variant: o,
+      title: d,
+      message: i
+    });
+  }, L = () => {
+    O((o) => ({ ...o, open: !1 }));
+  }, C = (o) => {
+    o.success ? g(
+      "success",
+      s("matchQuiz.alerts.play.success.title"),
+      s("matchQuiz.alerts.play.success.message")
+    ) : g(
+      "error",
+      s("matchQuiz.alerts.play.error.title"),
+      s("matchQuiz.alerts.play.error.message")
+    );
+  };
+  if (H(() => {
+    t && t.status === "OPEN" && c(
+      ge(e.entityId, t.fixtures)
+    );
+  }, [t == null ? void 0 : t.status]), !t || !r || !l)
+    return /* @__PURE__ */ a.jsx(V, { my: 20 });
+  if (!t.id)
+    return /* @__PURE__ */ a.jsx(ae, {});
+  if (t.authRequirement === "REGISTERED" && !e.userIsLoggedIn)
+    return I(e) ? /* @__PURE__ */ a.jsx(
+      re,
+      {
+        matchQuiz: t,
+        imagePosition: e.imagePosition,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        signInCTA: e.signInCTA,
+        rulesDisplay: e.rulesDisplay
+      }
+    ) : e.template === u.OVERLAY ? /* @__PURE__ */ a.jsx(
+      de,
+      {
+        matchQuiz: t,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        signInCTA: e.signInCTA,
+        rulesDisplay: e.rulesDisplay
+      }
+    ) : /* @__PURE__ */ a.jsx(
+      se,
+      {
+        matchQuiz: t,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        signInCTA: e.signInCTA,
+        rulesDisplay: e.rulesDisplay
+      }
+    );
+  const b = () => {
+    j(!1), D(!1);
+  };
+  if (x || T)
+    return I(e) ? /* @__PURE__ */ a.jsx(
+      te,
+      {
+        matchQuiz: t,
+        imagePosition: e.imagePosition,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        isApiError: T,
+        toggleTryAgain: b,
+        rulesDisplay: e.rulesDisplay
+      }
+    ) : e.template === u.OVERLAY ? /* @__PURE__ */ a.jsx(
+      le,
+      {
+        matchQuiz: t,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        isApiError: T,
+        toggleTryAgain: b,
+        rulesDisplay: e.rulesDisplay
+      }
+    ) : /* @__PURE__ */ a.jsx(
+      ie,
+      {
+        matchQuiz: t,
+        defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+        isApiError: T,
+        toggleTryAgain: b,
+        rulesDisplay: e.rulesDisplay
+      }
+    );
+  const y = async () => {
+    var d;
+    if (((d = e.leads) == null ? void 0 : d.position) === "after" && t.authRequirement === "LEAD" && !v && !n) {
+      q(!0);
+      return;
+    }
+    E(!0);
+    let o = {
+      gameInstanceId: e.entityId,
+      fixtures: []
+    };
+    n ? o.fixtures = n.fixtures.map((i) => ({
+      matchId: i.matchId,
+      matchType: i.matchType,
+      market: i.market,
+      prediction: k(i.market) ? {
+        value: i.prediction.value,
+        playerId: i.prediction.playerId
+      } : {
+        value: i.prediction.value
+      }
+    })) : o = {
+      ...f,
+      fixtures: f.fixtures.map((i) => ({
+        ...i,
+        prediction: k(i.market) ? i.prediction : {
+          value: i.prediction.value
+        }
+      }))
+    };
+    try {
+      const i = await e.sdk.matchQuiz.play(o);
+      M(i), g(
+        "success",
+        s("matchQuiz.alerts.play.success.title"),
+        s("matchQuiz.alerts.play.success.message")
+      );
+    } catch (i) {
+      if (e.sdk.helpers.getSDKConfiguration().errorHandlingMode === "standard") {
+        const w = i;
+        w.error.code === 401 || w.error.code === 403 ? D(!0) : g(
+          "error",
+          s("matchQuiz.alerts.play.error.title"),
+          s("matchQuiz.alerts.play.error.message")
+        );
+      } else {
+        const w = i;
+        w.data.error.code === 401 || w.data.error.code === 403 ? D(!0) : g(
+          "error",
+          s("matchQuiz.alerts.play.error.title"),
+          s("matchQuiz.alerts.play.error.message")
+        );
+      }
+    } finally {
+      E(!1);
+    }
+  }, A = async () => {
+    R(!0);
+    let o = {
+      gameInstanceId: e.entityId,
+      fixtures: f.fixtures.map((d) => ({
+        ...d,
+        prediction: k(d.market) ? d.prediction : {
+          value: d.prediction.value
+        }
+      }))
+    };
+    try {
+      const d = await e.sdk.matchQuiz.play(o);
+      M(d), g(
+        "success",
+        s("matchQuiz.alerts.play.success.title"),
+        s("matchQuiz.alerts.play.success.message")
+      );
+    } catch (d) {
+      if (e.sdk.helpers.getSDKConfiguration().errorHandlingMode === "standard") {
+        const m = d;
+        m.error.code === 401 || m.error.code === 403 ? D(!0) : j(!0);
+      } else {
+        const m = d;
+        m.data.error.code === 401 || m.data.error.code === 403 ? D(!0) : j(!0);
+      }
+    } finally {
+      R(!1), F(!0);
+    }
+  }, G = () => e.template === u.OVERLAY ? /* @__PURE__ */ a.jsx(
+    B,
+    {
+      isPlaying: z,
+      prediction: f,
+      sdk: e.sdk,
+      leads: e.leads,
+      matchQuiz: t,
+      play: y,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      setPrediction: c,
+      showCountdown: e.showCountdown,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) : I(e) ? /* @__PURE__ */ a.jsx(
+    _,
+    {
+      isPlaying: z,
+      sdk: e.sdk,
+      leads: e.leads,
+      matchQuiz: t,
+      play: y,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      imagePosition: e.imagePosition,
+      prediction: f,
+      setPrediction: c,
+      showCountdown: e.showCountdown,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) : /* @__PURE__ */ a.jsx(
+    J,
+    {
+      isPlaying: z,
+      prediction: f,
+      sdk: e.sdk,
+      leads: e.leads,
+      matchQuiz: t,
+      play: y,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      setPrediction: c,
+      showCountdown: e.showCountdown,
+      rulesDisplay: e.rulesDisplay
+    }
+  );
+  return t.status === "SETTLED" ? I(e) ? /* @__PURE__ */ a.jsx(
+    h,
+    {
+      showTeamLabels: e.showTeamLabels,
+      points: l,
+      squads: r,
+      children: /* @__PURE__ */ a.jsx(
+        he,
+        {
+          sdk: e.sdk,
+          matchQuiz: t,
+          prediction: n,
+          showPredictionDetails: e.showPredictionDetails,
+          defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+          imagePosition: e.imagePosition,
+          rulesDisplay: e.rulesDisplay
+        }
+      )
+    }
+  ) : e.template === u.OVERLAY ? /* @__PURE__ */ a.jsx(
+    h,
+    {
+      showTeamLabels: e.showTeamLabels,
+      points: l,
+      squads: r,
+      children: /* @__PURE__ */ a.jsx(
+        p,
+        {
+          sdk: e.sdk,
+          matchQuiz: t,
+          prediction: n,
+          showPredictionDetails: e.showPredictionDetails,
+          defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+          rulesDisplay: e.rulesDisplay
+        }
+      )
+    }
+  ) : /* @__PURE__ */ a.jsx(
+    h,
+    {
+      showTeamLabels: e.showTeamLabels,
+      points: l,
+      squads: r,
+      children: /* @__PURE__ */ a.jsx(
+        $,
+        {
+          sdk: e.sdk,
+          matchQuiz: t,
+          prediction: n,
+          showPredictionDetails: e.showPredictionDetails,
+          defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+          rulesDisplay: e.rulesDisplay
+        }
+      )
+    }
+  ) : Y && !v ? I(e) ? /* @__PURE__ */ a.jsx(
+    ne,
+    {
+      matchQuiz: t,
+      sdk: e.sdk,
+      leads: e.leads,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      imagePosition: e.imagePosition,
+      onLeadSubmitted: A,
+      isSubmitting: Q,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) : e.template === u.SPLIT ? /* @__PURE__ */ a.jsx(
+    oe,
+    {
+      matchQuiz: t,
+      sdk: e.sdk,
+      leads: e.leads,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      onLeadSubmitted: A,
+      isSubmitting: Q,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) : e.template === u.OVERLAY ? /* @__PURE__ */ a.jsx(
+    ue,
+    {
+      matchQuiz: t,
+      sdk: e.sdk,
+      leads: e.leads,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      onLeadSubmitted: A,
+      isSubmitting: Q,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) : /* @__PURE__ */ a.jsx(V, { my: 20 }) : n ? e.template === u.OVERLAY ? /* @__PURE__ */ a.jsxs(
+    h,
+    {
+      showTeamLabels: e.showTeamLabels,
+      points: l,
+      squads: r,
+      children: [
+        /* @__PURE__ */ a.jsx(
+          ee,
+          {
+            sdk: e.sdk,
+            leads: e.leads,
+            defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+            isUnauthorized: x,
+            matchQuiz: t,
+            squads: r,
+            prediction: n,
+            showTeamLabels: e.showTeamLabels,
+            onPredictionUpdate: c,
+            play: y,
+            onPlayResult: C,
+            additionalCTA: e.additionalCTA,
+            rulesDisplay: e.rulesDisplay
+          }
+        ),
+        /* @__PURE__ */ a.jsx(
+          S,
+          {
+            notification: U,
+            onClose: L
+          }
+        )
+      ]
+    }
+  ) : I(e) ? /* @__PURE__ */ a.jsxs(
+    h,
+    {
+      showTeamLabels: e.showTeamLabels,
+      points: l,
+      squads: r,
+      children: [
+        /* @__PURE__ */ a.jsx(
+          X,
+          {
+            imagePosition: e.imagePosition || "left",
+            matchQuiz: t,
+            sdk: e.sdk,
+            leads: e.leads,
+            defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+            isUnauthorized: x,
+            squads: r,
+            prediction: n,
+            showTeamLabels: e.showTeamLabels,
+            onPredictionUpdate: c,
+            play: y,
+            onPlayResult: C,
+            additionalCTA: e.additionalCTA,
+            rulesDisplay: e.rulesDisplay
+          }
+        ),
+        /* @__PURE__ */ a.jsx(
+          S,
+          {
+            notification: U,
+            onClose: L
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ a.jsxs(
+    h,
+    {
+      showTeamLabels: e.showTeamLabels,
+      points: l,
+      squads: r,
+      children: [
+        /* @__PURE__ */ a.jsx(
+          Z,
+          {
+            matchQuiz: t,
+            sdk: e.sdk,
+            leads: e.leads,
+            defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+            isUnauthorized: x,
+            squads: r,
+            prediction: n,
+            showTeamLabels: e.showTeamLabels,
+            onPredictionUpdate: c,
+            play: y,
+            onPlayResult: C,
+            additionalCTA: e.additionalCTA,
+            rulesDisplay: e.rulesDisplay
+          }
+        ),
+        /* @__PURE__ */ a.jsx(S, { notification: U, onClose: L })
+      ]
+    }
+  ) : /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+    /* @__PURE__ */ a.jsx(
+      h,
+      {
+        showTeamLabels: e.showTeamLabels,
+        points: l,
+        squads: r,
+        children: G()
+      }
+    ),
+    /* @__PURE__ */ a.jsx(S, { notification: U, onClose: L })
+  ] });
+};
+export {
+  Ze as default
+};

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

@@ -0,0 +1,93 @@
+import { j as e } from "../../../../../node_modules/react/jsx-runtime.js";
+import { useInternalTheme as f, useCornerRadius as d, useFontFamily as p, isMobile as u } 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 { Alert as x, Stack as h, Typography as s } from "@mui/joy";
+import "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import y from "../../../../../node_modules/@mui/icons-material/esm/CheckCircle.js";
+import g from "../../../../../node_modules/@mui/icons-material/esm/Info.js";
+import j from "../../../../../node_modules/@mui/icons-material/esm/Warning.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+const S = (o, r) => {
+  switch (o) {
+    case "success":
+      return /* @__PURE__ */ e.jsx(y, {});
+    case "error":
+      return /* @__PURE__ */ e.jsx(j, { sx: { color: r } });
+    case "info":
+      return /* @__PURE__ */ e.jsx(g, {});
+  }
+}, b = (o) => {
+  switch (o) {
+    case "success":
+      return "success";
+    case "error":
+      return "danger";
+    case "info":
+      return "primary";
+  }
+}, W = ({
+  variant: o,
+  title: r,
+  message: m,
+  description: n
+}) => {
+  const l = f(), a = d(), t = p().secondary, c = u(), i = b(o);
+  return /* @__PURE__ */ e.jsx(
+    x,
+    {
+      variant: "soft",
+      color: i,
+      startDecorator: S(
+        o,
+        l.colorSchemes.light.palette.danger.plainColor
+      ),
+      sx: {
+        gap: 1,
+        borderRadius: a.sm,
+        fontSize: c ? "0.75em" : "0.875em",
+        "--Icon-fontSize": c ? "1em" : "1.25em"
+      },
+      children: /* @__PURE__ */ e.jsxs(
+        h,
+        {
+          sx: {
+            fontSize: "1.5em"
+          },
+          children: [
+            r && /* @__PURE__ */ e.jsx(
+              s,
+              {
+                level: "title-md",
+                color: i,
+                fontWeight: "bold",
+                sx: { fontFamily: t, fontSize: "0.875em" },
+                children: r
+              }
+            ),
+            /* @__PURE__ */ e.jsx(
+              s,
+              {
+                level: "body-sm",
+                sx: { fontFamily: t, fontSize: "0.675em" },
+                children: m
+              }
+            ),
+            n && /* @__PURE__ */ e.jsx(
+              s,
+              {
+                level: "body-xs",
+                sx: { fontFamily: t, fontSize: "0.6em" },
+                children: n
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  W as default
+};

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

@@ -0,0 +1,125 @@
+import { j as t } from "../../../../../node_modules/react/jsx-runtime.js";
+import { useColors as T, useCornerRadius as b, useFontFamily as w, useSpacingScale as C, isMobile 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 { Box as a, Typography as i } from "@mui/joy";
+import { useState as F, useCallback as I, useEffect as R } from "react";
+import "../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../common/src/providers/ContainerProvider.js";
+import { useTranslation as L } from "../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const P = (x) => {
+  const { t: c } = L(), l = T(), h = b(), m = w(), n = C(), o = z() || x.isSplitVariant, [s, p] = F({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+    total: 0
+  }), u = I(() => {
+    const d = (/* @__PURE__ */ new Date()).getTime(), r = new Date(x.predictionsCutoffTime).getTime() - d;
+    if (r <= 0)
+      return { days: 0, hours: 0, minutes: 0, seconds: 0, total: 0 };
+    const y = Math.floor(r / (1e3 * 60 * 60 * 24)), g = Math.floor(
+      r % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60)
+    ), j = Math.floor(r % (1e3 * 60 * 60) / (1e3 * 60)), S = Math.floor(r % (1e3 * 60) / 1e3);
+    return { days: y, hours: g, minutes: j, seconds: S, total: r };
+  }, [x.predictionsCutoffTime]);
+  if (R(() => {
+    const d = () => {
+      p(u());
+    };
+    d();
+    const f = setInterval(d, 1e3);
+    return () => clearInterval(f);
+  }, [u]), s.total <= 0)
+    return null;
+  const e = {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: n.sm,
+      pt: o ? 0 : n.md,
+      px: n.md,
+      zIndex: 1
+    },
+    participationText: {
+      fontFamily: m.primary,
+      fontWeight: 500,
+      fontSize: o ? "1.125em" : "1.25em",
+      lineHeight: 1.2,
+      color: l.textPrimary,
+      textAlign: "center"
+    },
+    countdownContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: o ? n.xs : n.sm
+    },
+    timeUnit: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: n["2xs"],
+      bgcolor: l.palette.neutral.softBg,
+      borderRadius: h.sm,
+      minWidth: o ? n["2xl"] : n["3xl"],
+      px: o ? n["2xs"] : n.xs,
+      py: o ? n["3xs"] : n["2xs"]
+    },
+    timeValue: {
+      fontFamily: m.primary,
+      fontWeight: 500,
+      fontSize: o ? "1em" : "1.5em",
+      color: l.textPrimary
+    },
+    timeLabel: {
+      fontFamily: m.secondary,
+      fontWeight: 400,
+      fontSize: o ? "0.625em" : "0.75em",
+      color: l.textSecondary
+    },
+    separator: {
+      fontFamily: m.primary,
+      fontWeight: 400,
+      fontSize: o ? "1em" : "1.25em",
+      color: l.textSecondary,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "auto",
+      flexShrink: 0
+    }
+  };
+  return /* @__PURE__ */ t.jsxs(a, { sx: e.container, children: [
+    /* @__PURE__ */ t.jsx(i, { sx: e.participationText, children: c("matchQuiz.countdown.participationTimeLeft") }),
+    /* @__PURE__ */ t.jsxs(a, { sx: e.countdownContainer, children: [
+      s.days > 0 && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        /* @__PURE__ */ t.jsxs(a, { sx: e.timeUnit, children: [
+          /* @__PURE__ */ t.jsx(i, { sx: e.timeValue, children: s.days.toString().padStart(2, "0") }),
+          /* @__PURE__ */ t.jsx(i, { sx: e.timeLabel, children: c("matchQuiz.countdown.daysShort") })
+        ] }),
+        /* @__PURE__ */ t.jsx(i, { sx: e.separator, children: ":" })
+      ] }),
+      (s.days > 0 || s.hours > 0) && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        /* @__PURE__ */ t.jsxs(a, { sx: e.timeUnit, children: [
+          /* @__PURE__ */ t.jsx(i, { sx: e.timeValue, children: s.hours.toString().padStart(2, "0") }),
+          /* @__PURE__ */ t.jsx(i, { sx: e.timeLabel, children: c("matchQuiz.countdown.hoursShort") })
+        ] }),
+        /* @__PURE__ */ t.jsx(i, { sx: e.separator, children: ":" })
+      ] }),
+      /* @__PURE__ */ t.jsxs(a, { sx: e.timeUnit, children: [
+        /* @__PURE__ */ t.jsx(i, { sx: e.timeValue, children: s.minutes.toString().padStart(2, "0") }),
+        /* @__PURE__ */ t.jsx(i, { sx: e.timeLabel, children: c("matchQuiz.countdown.minutesShort") })
+      ] }),
+      /* @__PURE__ */ t.jsx(i, { sx: e.separator, children: ":" }),
+      /* @__PURE__ */ t.jsxs(a, { sx: e.timeUnit, children: [
+        /* @__PURE__ */ t.jsx(i, { sx: e.timeValue, children: s.seconds.toString().padStart(2, "0") }),
+        /* @__PURE__ */ t.jsx(i, { sx: e.timeLabel, children: c("matchQuiz.countdown.secondsShort") })
+      ] })
+    ] })
+  ] });
+};
+export {
+  P as default
+};