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

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

@@ -0,0 +1,344 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { useState as M } from "react";
+import { useTheme as L, Box as a, Select as E, Option as G, Input as Y, Typography as k } from "@mui/joy";
+import { useColors as _, useCornerRadius as q, useFontFamily as J, useSpacingScale as K, isMobile as N, useInternalTheme as Q, useBorderSize 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 { useConstantContext as V } from "../../../../../../common/src/hooks/useConstantContext.js";
+import { ConstantsContext as X } from "../../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../../common/src/providers/ContainerProvider.js";
+import { createStyles as Z } from "./TextSelector.styles.js";
+import { useTranslation as oo } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const xo = (r) => {
+  const { t: B } = oo(), f = _(), p = q(), d = J(), n = K(), g = N(), { shadowRootElement: w } = V(X), s = L(), F = Q(), j = U().size, [b, y] = M(r.prediction || ""), o = {
+    background: {
+      surface: s.colorSchemes.light.palette.background.surface,
+      popup: s.colorSchemes.light.palette.background.popup
+    },
+    neutral: {
+      outlinedBorder: s.colorSchemes.light.palette.neutral.outlinedBorder,
+      outlinedColor: s.colorSchemes.light.palette.neutral.outlinedColor,
+      outlinedHoverBg: s.colorSchemes.light.palette.neutral.outlinedHoverBg,
+      plainHoverBg: s.colorSchemes.light.palette.neutral.plainHoverBg,
+      plainHoverColor: s.colorSchemes.light.palette.neutral.plainHoverColor,
+      plainActiveBg: s.colorSchemes.light.palette.neutral.plainActiveBg
+    }
+  }, $ = {
+    fontFamily: d.secondary,
+    borderRadius: p.md,
+    bgcolor: o.background.surface,
+    borderColor: o.neutral.outlinedBorder,
+    color: o.neutral.outlinedColor,
+    fontSize: g ? "0.875em" : "1em",
+    lineHeight: "1.5",
+    "&:hover": {
+      bgcolor: o.neutral.outlinedHoverBg
+    },
+    "& input:-webkit-autofill": {
+      WebkitBoxShadow: `0 0 0 1000px ${o.background.surface} inset !important`,
+      WebkitTextFillColor: `${o.neutral.outlinedColor} !important`,
+      caretColor: o.neutral.outlinedColor,
+      borderRadius: p.md
+    },
+    "& input:-webkit-autofill:hover": {
+      WebkitBoxShadow: `0 0 0 1000px ${o.background.surface} inset !important`,
+      WebkitTextFillColor: `${o.neutral.outlinedColor} !important`
+    },
+    "& input:-webkit-autofill:focus": {
+      WebkitBoxShadow: `0 0 0 1000px ${o.background.surface} inset !important`,
+      WebkitTextFillColor: `${o.neutral.outlinedColor} !important`
+    },
+    "& input:-webkit-autofill:active": {
+      WebkitBoxShadow: `0 0 0 1000px ${o.background.surface} inset !important`,
+      WebkitTextFillColor: `${o.neutral.outlinedColor} !important`
+    },
+    "& input:-moz-autofill": {
+      backgroundColor: `${o.background.surface} !important`,
+      color: `${o.neutral.outlinedColor} !important`
+    },
+    "& input:autofill": {
+      backgroundColor: `${o.background.surface} !important`,
+      color: `${o.neutral.outlinedColor} !important`
+    }
+  }, H = {
+    root: {
+      sx: {
+        ...$,
+        "&:hover": { bgcolor: o.neutral.outlinedHoverBg }
+      }
+    },
+    listbox: {
+      container: w,
+      sx: {
+        maxHeight: g ? "200px" : "300px",
+        overflowY: "auto",
+        zIndex: 1300,
+        bgcolor: o.background.popup,
+        border: `1px solid ${o.neutral.outlinedBorder}`,
+        borderRadius: p.sm,
+        boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+      }
+    }
+  }, T = {
+    fontFamily: d.secondary,
+    fontSize: g ? "0.875em" : "1em",
+    color: `${o.neutral.outlinedColor} !important`,
+    bgcolor: `${o.background.popup} !important`,
+    "&:hover": {
+      bgcolor: `${o.neutral.outlinedHoverBg} !important`,
+      color: `${o.neutral.outlinedColor} !important`
+    },
+    "&.Mui-selected": {
+      bgcolor: `${o.neutral.plainActiveBg} !important`,
+      color: `${o.neutral.outlinedColor} !important`
+    },
+    "&.Mui-selected:hover": {
+      bgcolor: `${o.neutral.outlinedHoverBg} !important`,
+      color: `${o.neutral.outlinedColor} !important`
+    }
+  }, C = Z({
+    spacingScale: n,
+    borderRadius: p,
+    fontFamilyPrimary: d.primary,
+    fontFamilySecondary: d.secondary,
+    textPrimary: o.neutral.outlinedColor,
+    textSecondary: o.neutral.outlinedColor,
+    neutralSoftBg: o.background.surface,
+    neutralOutlinedBorder: o.neutral.outlinedBorder,
+    neutralPlainHoverBg: o.neutral.outlinedHoverBg,
+    primary: f.palette.primary.plainColor,
+    onPrimary: f.palette.primary.onPrimary,
+    isMobile: g
+  }), O = (u) => {
+    const i = u.target.value;
+    y(i), r.onTextChange(i);
+  }, z = (u, i) => {
+    i !== null && (y(i), r.onTextChange(i));
+  }, c = r.validOutcomes ? typeof r.validOutcomes == "object" && "options" in r.validOutcomes ? r.validOutcomes.options : Array.isArray(r.validOutcomes) ? r.validOutcomes : null : null, W = c && c.length > 0, A = () => {
+    if (!c || !r.optionsLayout) return null;
+    const u = f.palette.primary.plainColor, i = f.palette.primary.onPrimary, P = F.colorSchemes.light.textColor, S = (t) => b === t ? {
+      bgcolor: u,
+      boxShadow: `inset 0 0 0 ${j} ${u}`,
+      color: i
+    } : {
+      bgcolor: "#FFFFFF",
+      color: P,
+      boxShadow: "none"
+    }, v = (t) => {
+      y(t), r.onTextChange(t);
+    };
+    if (r.optionsLayout === "twoByTwo") {
+      const t = [];
+      for (let l = 0; l < c.length; l += 2) {
+        const m = c.slice(l, l + 2);
+        t.push(m);
+      }
+      return /* @__PURE__ */ e.jsx(a, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: t.map((l, m) => /* @__PURE__ */ e.jsx(
+        a,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: g ? "column" : "row",
+            gap: 2
+          },
+          children: l.map((x, h) => {
+            const { bgcolor: R, color: D, boxShadow: I } = S(x);
+            return /* @__PURE__ */ e.jsx(
+              a,
+              {
+                sx: {
+                  borderRadius: p.sm,
+                  flex: 1,
+                  p: n.xs,
+                  gap: n.xs,
+                  bgcolor: R,
+                  cursor: "pointer",
+                  transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+                  transform: "scale(1)",
+                  boxShadow: I,
+                  "&:hover": {
+                    transform: "scale(1.02)"
+                  },
+                  "&:active": {
+                    transform: "scale(0.98)"
+                  },
+                  display: "flex",
+                  flexDirection: "column"
+                },
+                onClick: () => v(x),
+                children: /* @__PURE__ */ e.jsx(
+                  k,
+                  {
+                    level: "body-md",
+                    sx: {
+                      fontFamily: d.primary,
+                      fontWeight: 500,
+                      fontSize: "0.935em",
+                      lineHeight: "16px",
+                      letterSpacing: "0.46px",
+                      textAlign: "center",
+                      color: D,
+                      px: n["2xs"],
+                      my: "auto"
+                    },
+                    children: x
+                  }
+                )
+              },
+              h
+            );
+          })
+        },
+        `row-${m}`
+      )) });
+    }
+    return r.optionsLayout === "column" ? /* @__PURE__ */ e.jsx(a, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: c.map((t, l) => {
+      const { bgcolor: m, color: x, boxShadow: h } = S(t);
+      return /* @__PURE__ */ e.jsx(
+        a,
+        {
+          sx: {
+            borderRadius: p.sm,
+            flex: 1,
+            p: n.xs,
+            gap: n.xs,
+            bgcolor: m,
+            cursor: "pointer",
+            transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+            transform: "scale(1)",
+            boxShadow: h,
+            "&:hover": {
+              transform: "scale(1.02)"
+            },
+            "&:active": {
+              transform: "scale(0.98)"
+            },
+            display: "flex",
+            flexDirection: "column"
+          },
+          onClick: () => v(t),
+          children: /* @__PURE__ */ e.jsx(
+            k,
+            {
+              level: "body-md",
+              sx: {
+                fontFamily: d.primary,
+                fontWeight: 500,
+                fontSize: "0.935em",
+                lineHeight: "16px",
+                letterSpacing: "0.46px",
+                textAlign: "center",
+                color: x,
+                px: n["2xs"],
+                my: "auto"
+              },
+              children: t
+            }
+          )
+        },
+        l
+      );
+    }) }) : /* @__PURE__ */ e.jsx(
+      a,
+      {
+        sx: {
+          display: "flex",
+          flexWrap: "wrap",
+          flexDirection: g ? "column" : "row",
+          gap: 2
+        },
+        children: c.map((t, l) => {
+          const { bgcolor: m, color: x, boxShadow: h } = S(t);
+          return /* @__PURE__ */ e.jsx(
+            a,
+            {
+              sx: {
+                borderRadius: p.sm,
+                flex: 1,
+                p: n.xs,
+                gap: n.xs,
+                bgcolor: m,
+                cursor: "pointer",
+                transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+                transform: "scale(1)",
+                boxShadow: h,
+                "&:hover": {
+                  transform: "scale(1.02)"
+                },
+                "&:active": {
+                  transform: "scale(0.98)"
+                },
+                display: "flex",
+                flexDirection: "column"
+              },
+              onClick: () => v(t),
+              children: /* @__PURE__ */ e.jsx(
+                k,
+                {
+                  level: "body-md",
+                  sx: {
+                    fontFamily: d.primary,
+                    fontWeight: 500,
+                    fontSize: "0.935em",
+                    lineHeight: "16px",
+                    letterSpacing: "0.46px",
+                    textAlign: "center",
+                    color: x,
+                    px: n["2xs"],
+                    my: "auto"
+                  },
+                  children: t
+                }
+              )
+            },
+            l
+          );
+        })
+      }
+    );
+  };
+  return /* @__PURE__ */ e.jsx(a, { sx: C.container, children: W ? /* @__PURE__ */ e.jsx(a, { sx: C.selectContainer, children: r.optionsLayout ? (
+    // If optionsLayout is provided, render button-based options
+    A()
+  ) : (
+    // Otherwise, render select dropdown (default behavior)
+    /* @__PURE__ */ e.jsx(
+      E,
+      {
+        value: b || null,
+        onChange: z,
+        placeholder: B("eventGame.fixtures.textSelectPlaceholder"),
+        slotProps: H,
+        children: c.map((u, i) => /* @__PURE__ */ e.jsx(G, { value: u, sx: T, children: u }, i))
+      }
+    )
+  ) }) : /* @__PURE__ */ e.jsx(a, { sx: C.inputContainer, children: /* @__PURE__ */ e.jsx(
+    Y,
+    {
+      value: b,
+      onChange: O,
+      placeholder: B("eventGame.fixtures.textInputPlaceholder"),
+      sx: {
+        ...$,
+        // Remove Joy UI's default focus outline
+        outline: "none",
+        "&:focus-within": {
+          bgcolor: o.background.surface,
+          // Add primary color border on focus
+          outline: `2px solid ${f.palette.primary.plainColor}`,
+          outlineOffset: "2px"
+        },
+        // Override Joy UI Input's internal focus styles
+        "&::before": {
+          display: "none"
+        },
+        "&:focus-within::before": {
+          display: "none"
+        }
+      }
+    }
+  ) }) });
+};
+export {
+  xo as default
+};

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

@@ -0,0 +1,70 @@
+const e = (t) => ({
+  container: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    pt: t.isMobile ? t.spacingScale.md : t.spacingScale.lg
+  },
+  inputContainer: {
+    width: "100%",
+    maxWidth: t.isMobile ? "100%" : "500px"
+  },
+  textInput: {
+    fontFamily: t.fontFamilySecondary,
+    fontSize: t.isMobile ? "0.875em" : "1em",
+    lineHeight: "1.5",
+    color: `${t.textPrimary} !important`,
+    backgroundColor: `${t.neutralSoftBg} !important`,
+    borderColor: `${t.neutralOutlinedBorder} !important`,
+    borderRadius: t.borderRadius.md,
+    transition: "all 0.2s ease-in-out",
+    "&:hover": {
+      backgroundColor: `${t.neutralPlainHoverBg} !important`
+    },
+    "&::placeholder": {
+      color: t.textSecondary,
+      opacity: 0.6
+    }
+  },
+  selectContainer: {
+    width: "100%",
+    maxWidth: t.isMobile ? "100%" : "500px"
+  },
+  select: {
+    fontFamily: t.fontFamilySecondary,
+    fontSize: t.isMobile ? "0.875em" : "1em",
+    color: `${t.textPrimary} !important`,
+    backgroundColor: `${t.neutralSoftBg} !important`,
+    borderColor: `${t.neutralOutlinedBorder} !important`,
+    borderRadius: t.borderRadius.md,
+    "&:hover": {
+      backgroundColor: `${t.neutralPlainHoverBg} !important`
+    },
+    "& .MuiSelect-indicator": {
+      color: `${t.textPrimary} !important`
+    }
+  },
+  option: {
+    fontFamily: t.fontFamilySecondary,
+    fontSize: t.isMobile ? "0.875em" : "1em",
+    color: `${t.textPrimary} !important`,
+    bgcolor: "transparent",
+    "&:hover": {
+      bgcolor: `${t.neutralPlainHoverBg} !important`,
+      color: `${t.textPrimary} !important`
+    },
+    "&[aria-selected='true']": {
+      bgcolor: `${t.neutralPlainHoverBg} !important`,
+      color: `${t.textPrimary} !important`,
+      fontWeight: 600
+    },
+    "&[aria-selected='true']:hover": {
+      bgcolor: `${t.neutralPlainHoverBg} !important`,
+      color: `${t.textPrimary} !important`
+    }
+  }
+});
+export {
+  e as createStyles
+};

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

@@ -0,0 +1,63 @@
+const a = (e) => ({
+  base: {
+    width: e.isMobile ? "48px" : "64px",
+    height: e.isMobile ? "48px" : "64px",
+    backgroundColor: e.neutralSoftBg,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    padding: e.isMobile ? e.spacingScale.xs : e.spacingScale.sm,
+    borderRadius: e.spacingScale.sm,
+    boxShadow: "0 5px 15px 0 rgba(49, 84, 139, .1)",
+    flexShrink: 0,
+    transition: "all 0.2s ease-in-out",
+    "&:hover": {
+      backgroundColor: e.neutralPlainHoverBg
+    }
+  },
+  selected: e.primary ? {
+    backgroundColor: e.primary,
+    "&:hover": {
+      backgroundColor: e.primary
+    },
+    borderRadius: e.spacingScale.sm
+  } : {
+    borderRadius: e.spacingScale.sm
+  },
+  text: {
+    fontFamily: "inherit",
+    fontSize: e.isMobile ? "0.625em" : "0.75em",
+    fontWeight: 600,
+    textAlign: "center"
+  },
+  selectedText: e.onPrimary ? {
+    color: e.onPrimary
+  } : {}
+}), n = (e) => ({
+  ...a(e),
+  selectedYes: e.successMain ? {
+    backgroundColor: e.successMain,
+    color: "white",
+    "&:hover": {
+      backgroundColor: e.successMain
+    },
+    borderRadius: e.spacingScale.sm
+  } : {
+    borderRadius: e.spacingScale.sm
+  },
+  selectedNo: e.dangerMain ? {
+    backgroundColor: e.dangerMain,
+    color: "white",
+    "&:hover": {
+      backgroundColor: e.dangerMain
+    },
+    borderRadius: e.spacingScale.sm
+  } : {
+    borderRadius: e.spacingScale.sm
+  }
+});
+export {
+  n as createOptionIconStyles,
+  a as createTeamLogoStyles
+};

package/packages/event-game-play/src/components/Shared/Leaderboard/LeaderboardComponent.js

@@ -0,0 +1,220 @@
+import { j as e } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Typography as n, Box as p, Sheet as B, Table as N, Avatar as P } from "@mui/joy";
+import w from "../../../../../../node_modules/@mui/icons-material/esm/Person.js";
+import { useInternalTheme as E, useColors as L, useFontFamily as A, useCornerRadius as M, useSpacingScale as k, isExtraSmall as R } from "../../../../../common/src/functions/theme.js";
+import { hexToRgb as d } 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 U from "../../../../../common/src/components/Spinner.js";
+import "react";
+import "../../../../../common/src/providers/ConstantsProvider.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import { useTranslation as X } from "../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
+const oe = ({
+  leaderboard: m,
+  userRanking: i,
+  showHeading: F,
+  isSplitVariant: f,
+  loading: z = !1
+}) => {
+  const { t: a } = X(), W = E(), c = L(), b = c.palette.primary.plainColor, r = c.textColor, l = A().primary, I = A().secondary, G = M(), x = k(), g = R(), s = c.surfaceVariant, C = W.colorSchemes.light.palette.primary.onPrimary, y = c.outlineEnabledBorder, o = {
+    leaderboardContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: x.md
+    },
+    leaderboardTitle: {
+      fontFamily: l,
+      fontWeight: 700,
+      fontSize: "1.25em",
+      color: r,
+      textAlign: "center",
+      marginBottom: x.sm
+    },
+    tableContainer: {
+      overflowX: "auto",
+      borderRadius: G.md,
+      border: `1px solid ${y}`
+    },
+    table: {
+      backgroundColor: s,
+      "--TableCell-paddingX": "0.5rem",
+      "--TableCell-paddingY": "0.375rem",
+      cursor: "default",
+      "& > tbody > tr:hover": {
+        backgroundColor: "transparent"
+      },
+      "& > thead > tr > th": {
+        backgroundColor: `rgba(${d(s)}, 0.8)`,
+        color: r,
+        fontFamily: l,
+        fontWeight: 600,
+        fontSize: "0.875em",
+        textAlign: "center",
+        borderBottom: `1px solid ${y}`
+      }
+    },
+    headerCellPosition: {
+      backgroundColor: `rgba(${d(s)}, 0.8)`,
+      color: r,
+      fontFamily: l,
+      fontWeight: 600,
+      fontSize: "0.875em",
+      textAlign: "center",
+      padding: "0.375rem 0.5rem",
+      width: "10%"
+    },
+    headerCellName: {
+      backgroundColor: `rgba(${d(s)}, 0.8)`,
+      color: r,
+      fontFamily: l,
+      fontWeight: 600,
+      fontSize: "0.875em",
+      textAlign: "left",
+      padding: "0.375rem 0.5rem",
+      width: "80%"
+    },
+    headerCellPoints: {
+      backgroundColor: `rgba(${d(s)}, 0.8)`,
+      color: r,
+      fontFamily: l,
+      fontWeight: 600,
+      fontSize: "0.875em",
+      textAlign: "center",
+      padding: "0.375rem 0.5rem",
+      width: "10%"
+    },
+    tableCellPosition: {
+      padding: "0.375rem 0.5rem",
+      width: "10%",
+      textAlign: "center"
+    },
+    tableCellName: {
+      padding: "0.375rem 0.5rem",
+      width: "80%"
+    },
+    tableCellPoints: {
+      padding: "0.375rem 0.5rem",
+      width: "10%",
+      textAlign: "center"
+    },
+    userRow: {
+      backgroundColor: `rgba(${d(b)}, 0.1)`
+    },
+    nameCell: {
+      display: "flex",
+      alignItems: "center",
+      gap: x.sm
+    },
+    leaderboardAvatar: {
+      width: "32px",
+      height: "32px",
+      fontSize: "0.875em",
+      fontWeight: 600,
+      backgroundColor: b,
+      color: C
+    },
+    nameText: {
+      fontFamily: l,
+      fontWeight: 500,
+      fontSize: "0.875em",
+      color: r,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    positionText: {
+      fontFamily: l,
+      fontWeight: 600,
+      fontSize: "0.875em",
+      color: r
+    },
+    pointsText: {
+      fontFamily: l,
+      fontWeight: 600,
+      fontSize: "0.875em",
+      color: r
+    },
+    avatarIcon: {
+      fontSize: "1em",
+      color: C
+    },
+    noLeaderboardText: {
+      fontFamily: I,
+      fontSize: "1.25em",
+      color: r,
+      textAlign: "center",
+      marginY: x.md
+    }
+  };
+  if (z || !m)
+    return /* @__PURE__ */ e.jsx(U, { my: 10 });
+  if (m.length === 0)
+    return /* @__PURE__ */ e.jsx(n, { level: "body-lg", sx: o.noLeaderboardText, children: a("eventGame.leaderboard.noLeaderboardAvailable") });
+  const h = i == null ? void 0 : i.position, $ = h && m.some((t) => t.position === h);
+  return /* @__PURE__ */ e.jsxs(p, { sx: o.leaderboardContainer, children: [
+    F && /* @__PURE__ */ e.jsx(n, { level: "h4", sx: o.leaderboardTitle, children: a("eventGame.leaderboard.title") }),
+    /* @__PURE__ */ e.jsx(B, { sx: o.tableContainer, children: /* @__PURE__ */ e.jsxs(
+      N,
+      {
+        variant: "outlined",
+        hoverRow: !1,
+        borderAxis: "bothBetween",
+        size: "sm",
+        sx: o.table,
+        children: [
+          /* @__PURE__ */ e.jsx("thead", { children: /* @__PURE__ */ e.jsxs("tr", { children: [
+            /* @__PURE__ */ e.jsx("th", { style: o.headerCellPosition, children: g || f ? "" : a("eventGame.leaderboard.position") }),
+            /* @__PURE__ */ e.jsx("th", { style: o.headerCellName, children: a("eventGame.leaderboard.name") }),
+            /* @__PURE__ */ e.jsx("th", { style: o.headerCellPoints, children: g || f ? "🎯" : a("eventGame.leaderboard.points") })
+          ] }) }),
+          /* @__PURE__ */ e.jsxs("tbody", { children: [
+            i && !$ && /* @__PURE__ */ e.jsxs("tr", { style: o.userRow, children: [
+              /* @__PURE__ */ e.jsx("td", { style: o.tableCellPosition, children: /* @__PURE__ */ e.jsxs(n, { sx: o.positionText, children: [
+                "#",
+                i.position
+              ] }) }),
+              /* @__PURE__ */ e.jsx("td", { style: o.tableCellName, children: /* @__PURE__ */ e.jsxs(p, { sx: o.nameCell, children: [
+                /* @__PURE__ */ e.jsx(P, { sx: o.leaderboardAvatar, children: /* @__PURE__ */ e.jsx(w, { sx: o.avatarIcon }) }),
+                /* @__PURE__ */ e.jsx(n, { sx: o.nameText, children: a("eventGame.leaderboard.you") })
+              ] }) }),
+              /* @__PURE__ */ e.jsx("td", { style: o.tableCellPoints, children: /* @__PURE__ */ e.jsx(n, { sx: o.pointsText, children: i.totalPoints }) })
+            ] }),
+            m.map((t) => {
+              var u, v, S, T;
+              const j = h === t.position;
+              return /* @__PURE__ */ e.jsxs(
+                "tr",
+                {
+                  style: j ? o.userRow : void 0,
+                  children: [
+                    /* @__PURE__ */ e.jsx("td", { style: o.tableCellPosition, children: /* @__PURE__ */ e.jsxs(n, { sx: o.positionText, children: [
+                      "#",
+                      t.position
+                    ] }) }),
+                    /* @__PURE__ */ e.jsx("td", { style: o.tableCellName, children: /* @__PURE__ */ e.jsxs(p, { sx: o.nameCell, children: [
+                      /* @__PURE__ */ e.jsx(
+                        P,
+                        {
+                          src: ((u = t.profileModel) == null ? void 0 : u.avatar) || void 0,
+                          sx: o.leaderboardAvatar,
+                          children: (v = t.profileModel) != null && v.avatar ? /* @__PURE__ */ e.jsx(e.Fragment, {}) : /* @__PURE__ */ e.jsx(w, { sx: o.avatarIcon })
+                        }
+                      ),
+                      /* @__PURE__ */ e.jsx(n, { sx: o.nameText, children: j ? a("eventGame.leaderboard.you") : ((S = t.profileModel) == null ? void 0 : S.nickname) || ((T = t.profileModel) == null ? void 0 : T.name) })
+                    ] }) }),
+                    /* @__PURE__ */ e.jsx("td", { style: o.tableCellPoints, children: /* @__PURE__ */ e.jsx(n, { sx: o.pointsText, children: t.totalPoints }) })
+                  ]
+                },
+                t.profileId
+              );
+            })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  oe as default
+};