fansunited-frontend-components 0.0.89 → 0.0.90

package/Leaderboard.js

@@ -1,43 +1,43 @@
 import { jsxs as E, jsx as l, Fragment as ce } from "react/jsx-runtime";
 import z, { useState as B, useEffect as Q, useCallback as me, useMemo as D } from "react";
-import { a as X, b as fe, v as he, x as ge, g as G, f as de, u as O, d as j, B as L, c as ue, m as be, p as ye, o as xe, q as Ce, r as ve, C as Te, s as Pe, E as Se, t as we, w as Ee } from "./chunks/PrizeCard-Cb1YuuYM.js";
+import { a as X, b as fe, v as he, x as ge, g as G, f as de, u as O, d as j, B as I, c as ue, m as be, p as ye, o as xe, q as Ce, r as ve, C as Te, s as Pe, E as Se, t as we, w as Ee } from "./chunks/PrizeCard-BIJVHmYW.js";
 import { createPortal as Ae } from "react-dom";
-import { A as J } from "./chunks/AlertMessage-CieUTNsw.js";
-import { F as Ie } from "./chunks/FormLabel-D3_mG4D1.js";
-import { T as R } from "./chunks/Typography-nBRgZwsp.js";
-import { S as Re, a as Le } from "./chunks/Select-DXJCZ6D3.js";
-import { P as ee } from "./chunks/Person-DWyYenEx.js";
-import { h as U, a as Me } from "./chunks/helpers-BX3cctTx.js";
-import { S as ze } from "./chunks/Spinner-pC2OM4AI.js";
-import { S as Be } from "./chunks/Sheet-MP2rgW4b.js";
-import { T as Fe } from "./chunks/Table-hk72eRqw.js";
-import { A as te } from "./chunks/Avatar-5aOX2Vb1.js";
-import { D as H } from "./chunks/DirectionScope-eDYFWvxN.js";
-import { I as k, B as re } from "./chunks/Button-3riWYmL7.js";
+import { A as J } from "./chunks/AlertMessage-aNev3ob9.js";
+import { F as Re } from "./chunks/FormLabel-BhUVGv0u.js";
+import { T as L } from "./chunks/Typography-CHHyHOvn.js";
+import { S as Le, a as Ie } from "./chunks/Select-Be-2TLJx.js";
+import { P as ee } from "./chunks/Person-CuxlprBB.js";
+import { h as U, a as Me } from "./chunks/helpers-BjZ558HQ.js";
+import { S as ze } from "./chunks/Spinner-DQytYdCL.js";
+import { S as Be } from "./chunks/Sheet-DHMJRANx.js";
+import { T as Fe } from "./chunks/Table-D3ou_zxz.js";
+import { A as te } from "./chunks/Avatar-Ck9sDlUF.js";
+import { D as H } from "./chunks/DirectionScope-Ty03Pl0K.js";
+import { I as k, B as re } from "./chunks/Button-C5sVDXUr.js";
 import { C as Ue, a as $e } from "./chunks/chevrons-right-CXSpQt9w.js";
 import { C as Qe } from "./chunks/chevron-left-CxfCSZcr.js";
 import { C as He } from "./chunks/chevron-right-BEQMacFn.js";
 const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()).join(" "), _e = ({
   options: e,
   selectedId: t,
-  onChange: a
+  onChange: o
 }) => {
-  const { t: r } = X(), { shadowRootElement: o } = fe(he), b = ge(), v = G(), d = de(), m = O().primary, c = j(), C = v.textColor, p = {
+  const { t: r } = X(), { shadowRootElement: a } = fe(he), h = ge(), v = G(), y = de(), d = O().primary, c = j(), C = v.textColor, p = {
     background: {
-      surface: b.colorSchemes.light.palette.background.surface,
-      popup: b.colorSchemes.light.palette.background.popup
+      surface: h.colorSchemes.light.palette.background.surface,
+      popup: h.colorSchemes.light.palette.background.popup
     },
     neutral: {
-      outlinedBorder: b.colorSchemes.light.palette.neutral.outlinedBorder,
-      outlinedColor: b.colorSchemes.light.palette.neutral.outlinedColor,
-      outlinedHoverBg: b.colorSchemes.light.palette.neutral.outlinedHoverBg,
-      plainActiveBg: b.colorSchemes.light.palette.neutral.plainActiveBg,
-      plainHoverBg: b.colorSchemes.light.palette.neutral.plainHoverBg,
-      plainHoverColor: b.colorSchemes.light.palette.neutral.plainHoverColor
+      outlinedBorder: h.colorSchemes.light.palette.neutral.outlinedBorder,
+      outlinedColor: h.colorSchemes.light.palette.neutral.outlinedColor,
+      outlinedHoverBg: h.colorSchemes.light.palette.neutral.outlinedHoverBg,
+      plainActiveBg: h.colorSchemes.light.palette.neutral.plainActiveBg,
+      plainHoverBg: h.colorSchemes.light.palette.neutral.plainHoverBg,
+      plainHoverColor: h.colorSchemes.light.palette.neutral.plainHoverColor
     }
   }, x = {
     flexShrink: 0,
-    fontFamily: m,
+    fontFamily: d,
     fontSize: "0.65em",
     fontWeight: 600,
     letterSpacing: "0.05em",
@@ -45,11 +45,11 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
     color: p.neutral.outlinedColor,
     bgcolor: p.neutral.plainHoverBg,
     border: `1px solid ${p.neutral.outlinedBorder}`,
-    borderRadius: d.sm,
+    borderRadius: y.sm,
     px: c["2xs"],
     py: c["3xs"]
   }, A = (g) => /* @__PURE__ */ E(
-    L,
+    I,
     {
       sx: {
         display: "flex",
@@ -60,14 +60,14 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
       },
       children: [
         /* @__PURE__ */ l("span", { children: g.label }),
-        g.type && /* @__PURE__ */ l(L, { sx: x, children: ke(g.type) })
+        g.type && /* @__PURE__ */ l(I, { sx: x, children: ke(g.type) })
       ]
     }
   ), P = {
     root: {
       sx: {
-        fontFamily: m,
-        borderRadius: d.sm,
+        fontFamily: d,
+        borderRadius: y.sm,
         bgcolor: p.background.surface,
         borderColor: p.neutral.outlinedBorder,
         color: p.neutral.outlinedColor,
@@ -76,17 +76,17 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
       }
     },
     listbox: {
-      container: o,
+      container: a,
       sx: {
         zIndex: 10,
         bgcolor: p.background.popup,
         border: `1px solid ${p.neutral.outlinedBorder}`,
-        borderRadius: d.sm,
+        borderRadius: y.sm,
         boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
       }
     }
   }, u = {
-    fontFamily: m,
+    fontFamily: d,
     color: `${p.neutral.outlinedColor} !important`,
     bgcolor: "transparent",
     "&:hover": {
@@ -102,20 +102,20 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
       color: `${p.neutral.outlinedColor} !important`
     }
   };
-  return /* @__PURE__ */ E(L, { sx: { display: "flex", flexDirection: "column", gap: c["2xs"] }, children: [
+  return /* @__PURE__ */ E(I, { sx: { display: "flex", flexDirection: "column", gap: c["2xs"] }, children: [
     /* @__PURE__ */ l(
-      Ie,
+      Re,
       {
         sx: {
           color: `${C} !important`,
-          fontFamily: m,
+          fontFamily: d,
           fontSize: "0.875em"
         },
         children: /* @__PURE__ */ l(
-          R,
+          L,
           {
             sx: {
-              fontFamily: m,
+              fontFamily: d,
               fontSize: "0.875em",
               color: C
             },
@@ -125,31 +125,31 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
       }
     ),
     /* @__PURE__ */ l(
-      Re,
+      Le,
       {
         value: t,
-        onChange: (g, S) => S && a(S),
+        onChange: (g, S) => S && o(S),
         slotProps: P,
         renderValue: (g) => {
           if (!g) return null;
-          const S = e.find((f) => f.id === g.value);
+          const S = e.find((m) => m.id === g.value);
           return S ? A(S) : g.label;
         },
-        children: e.map((g) => /* @__PURE__ */ l(Le, { value: g.id, sx: u, children: A(g) }, g.id))
+        children: e.map((g) => /* @__PURE__ */ l(Ie, { value: g.id, sx: u, children: A(g) }, g.id))
       }
     )
   ] });
 }, De = ({
   leaderboard: e,
   userRank: t,
-  showHeading: a,
+  showHeading: o,
   title: r,
-  description: o,
-  isSplitVariant: b,
+  description: a,
+  isSplitVariant: h,
   brandingColors: v,
-  rankStyles: d
+  rankStyles: y
 }) => {
-  const { t: m } = X(), c = ue(), C = G(), p = (v == null ? void 0 : v.primaryColor) || C.palette.primary.plainColor, x = (v == null ? void 0 : v.contentColor) || C.textColor, A = C.textColor, P = O().primary, u = O().secondary, g = de(), S = j(), f = be(), i = C.surfaceVariant, n = c.colorSchemes.light.palette.primary.onPrimary, h = C.outlineEnabledBorder, s = {
+  const { t: d } = X(), c = ue(), C = G(), p = (v == null ? void 0 : v.primaryColor) || C.palette.primary.plainColor, x = (v == null ? void 0 : v.contentColor) || C.textColor, A = C.textColor, P = O().primary, u = O().secondary, g = de(), S = j(), m = be(), i = C.surfaceVariant, n = c.colorSchemes.light.palette.primary.onPrimary, f = C.outlineEnabledBorder, s = {
     leaderboardContainer: {
       display: "flex",
       flexDirection: "column",
@@ -167,7 +167,7 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
     tableContainer: {
       overflowX: "auto",
       borderRadius: g.md,
-      border: `1px solid ${h}`
+      border: `1px solid ${f}`
     },
     table: {
       backgroundColor: i,
@@ -184,7 +184,7 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         fontWeight: 600,
         fontSize: "0.875em",
         textAlign: "center",
-        borderBottom: `1px solid ${h}`
+        borderBottom: `1px solid ${f}`
       }
     },
     headerCellPosition: {
@@ -283,11 +283,11 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
   if (!e)
     return /* @__PURE__ */ l(ze, { my: 10 });
   if (e.length === 0)
-    return /* @__PURE__ */ l(R, { level: "body-lg", sx: s.noLeaderboardText, children: m("leaderboard.noLeaderboardAvailable") });
-  const T = t, w = T == null ? void 0 : T.profileId, F = w && e.some((y) => y.profileId === w);
-  return /* @__PURE__ */ E(L, { sx: s.leaderboardContainer, children: [
-    a && /* @__PURE__ */ E(
-      L,
+    return /* @__PURE__ */ l(L, { level: "body-lg", sx: s.noLeaderboardText, children: d("leaderboard.noLeaderboardAvailable") });
+  const T = t, w = T == null ? void 0 : T.profileId, F = w && e.some((b) => b.profileId === w);
+  return /* @__PURE__ */ E(I, { sx: s.leaderboardContainer, children: [
+    o && /* @__PURE__ */ E(
+      I,
       {
         sx: {
           display: "flex",
@@ -297,7 +297,7 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         },
         children: [
           /* @__PURE__ */ l(
-            R,
+            L,
             {
               level: "body-sm",
               sx: {
@@ -310,11 +310,11 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
                 opacity: "60%",
                 fontFamily: u
               },
-              children: m("leaderboard.heading")
+              children: d("leaderboard.heading")
             }
           ),
           /* @__PURE__ */ E(
-            L,
+            I,
             {
               sx: {
                 display: "flex",
@@ -322,9 +322,9 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
                 gap: S["3xs"]
               },
               children: [
-                r && /* @__PURE__ */ l(R, { level: "h4", sx: s.leaderboardTitle, children: r }),
-                o && /* @__PURE__ */ l(
-                  R,
+                r && /* @__PURE__ */ l(L, { level: "h4", sx: s.leaderboardTitle, children: r }),
+                a && /* @__PURE__ */ l(
+                  L,
                   {
                     sx: {
                       fontWeight: 400,
@@ -335,7 +335,7 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
                       opacity: "60%",
                       fontFamily: P
                     },
-                    children: Me(o)
+                    children: Me(a)
                   }
                 )
               ]
@@ -354,43 +354,43 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         sx: s.table,
         children: [
           /* @__PURE__ */ l("thead", { children: /* @__PURE__ */ E("tr", { children: [
-            /* @__PURE__ */ l("th", { style: s.headerCellPosition, children: f || b ? "" : m("leaderboard.position") }),
-            /* @__PURE__ */ l("th", { style: s.headerCellName, children: m("leaderboard.name") }),
-            /* @__PURE__ */ l("th", { style: s.headerCellPoints, children: f || b ? "🎯" : m("leaderboard.points") })
+            /* @__PURE__ */ l("th", { style: s.headerCellPosition, children: m || h ? "" : d("leaderboard.position") }),
+            /* @__PURE__ */ l("th", { style: s.headerCellName, children: d("leaderboard.name") }),
+            /* @__PURE__ */ l("th", { style: s.headerCellPoints, children: m || h ? "🎯" : d("leaderboard.points") })
           ] }) }),
           /* @__PURE__ */ E("tbody", { children: [
             T && !F && /* @__PURE__ */ E("tr", { style: s.userRow, children: [
-              /* @__PURE__ */ l("td", { style: s.tableCellPosition, children: /* @__PURE__ */ E(R, { sx: s.positionText, children: [
+              /* @__PURE__ */ l("td", { style: s.tableCellPosition, children: /* @__PURE__ */ E(L, { sx: s.positionText, children: [
                 "#",
                 T.position
               ] }) }),
-              /* @__PURE__ */ l("td", { style: s.tableCellName, children: /* @__PURE__ */ E(L, { sx: s.nameCell, children: [
+              /* @__PURE__ */ l("td", { style: s.tableCellName, children: /* @__PURE__ */ E(I, { sx: s.nameCell, children: [
                 /* @__PURE__ */ l(te, { sx: s.leaderboardAvatar, children: /* @__PURE__ */ l(ee, { sx: s.avatarIcon }) }),
-                /* @__PURE__ */ l(R, { sx: s.nameText, children: m("leaderboard.you") })
+                /* @__PURE__ */ l(L, { sx: s.nameText, children: d("leaderboard.you") })
               ] }) }),
-              /* @__PURE__ */ l("td", { style: s.tableCellPoints, children: /* @__PURE__ */ l(R, { sx: s.pointsText, children: T.points }) })
+              /* @__PURE__ */ l("td", { style: s.tableCellPoints, children: /* @__PURE__ */ l(L, { sx: s.pointsText, children: T.points }) })
             ] }),
-            e.map((y, I) => {
+            e.map((b, R) => {
               var V, Y, q, K;
-              const M = w === y.profileId, pe = M ? s.userRow : d == null ? void 0 : d[I + 1];
+              const M = w === b.profileId, pe = M ? s.userRow : y == null ? void 0 : y[R + 1];
               return /* @__PURE__ */ E("tr", { style: pe, children: [
-                /* @__PURE__ */ l("td", { style: s.tableCellPosition, children: /* @__PURE__ */ E(R, { sx: s.positionText, children: [
+                /* @__PURE__ */ l("td", { style: s.tableCellPosition, children: /* @__PURE__ */ E(L, { sx: s.positionText, children: [
                   "#",
-                  y.position
+                  b.position
                 ] }) }),
-                /* @__PURE__ */ l("td", { style: s.tableCellName, children: /* @__PURE__ */ E(L, { sx: s.nameCell, children: [
+                /* @__PURE__ */ l("td", { style: s.tableCellName, children: /* @__PURE__ */ E(I, { sx: s.nameCell, children: [
                   /* @__PURE__ */ l(
                     te,
                     {
-                      src: ((V = y.profileModel) == null ? void 0 : V.avatar) || void 0,
+                      src: ((V = b.profileModel) == null ? void 0 : V.avatar) || void 0,
                       sx: s.leaderboardAvatar,
-                      children: (Y = y.profileModel) != null && Y.avatar ? /* @__PURE__ */ l(ce, {}) : /* @__PURE__ */ l(ee, { sx: s.avatarIcon })
+                      children: (Y = b.profileModel) != null && Y.avatar ? /* @__PURE__ */ l(ce, {}) : /* @__PURE__ */ l(ee, { sx: s.avatarIcon })
                     }
                   ),
-                  /* @__PURE__ */ l(R, { sx: s.nameText, children: M ? m("leaderboard.you") : ((q = y.profileModel) == null ? void 0 : q.nickname) || ((K = y.profileModel) == null ? void 0 : K.name) || m("leaderboard.anonymous") })
+                  /* @__PURE__ */ l(L, { sx: s.nameText, children: M ? d("leaderboard.you") : ((q = b.profileModel) == null ? void 0 : q.nickname) || ((K = b.profileModel) == null ? void 0 : K.name) || d("leaderboard.anonymous") })
                 ] }) }),
-                /* @__PURE__ */ l("td", { style: s.tableCellPoints, children: /* @__PURE__ */ l(R, { sx: s.pointsText, children: y.points }) })
-              ] }, y.profileId);
+                /* @__PURE__ */ l("td", { style: s.tableCellPoints, children: /* @__PURE__ */ l(L, { sx: s.pointsText, children: b.points }) })
+              ] }, b.profileId);
             })
           ] })
         ]
@@ -400,35 +400,35 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
 }, Oe = ({
   count: e = 10,
   page: t = 1,
-  onChange: a,
+  onChange: o,
   siblingCount: r = 1,
-  boundaryCount: o = 1,
-  showFirstButton: b = !0,
+  boundaryCount: a = 1,
+  showFirstButton: h = !0,
   showLastButton: v = !0,
-  size: d = "md",
-  disabled: m = !1,
+  size: y = "md",
+  disabled: d = !1,
   isOverlayVariant: c = !1
 }) => {
   const C = ue(), p = (i) => {
-    a && i >= 1 && i <= e && a(i);
+    o && i >= 1 && i <= e && o(i);
   }, x = (i, n) => {
-    const h = [];
-    for (let s = i; s <= n; s++) h.push(s);
-    return h;
+    const f = [];
+    for (let s = i; s <= n; s++) f.push(s);
+    return f;
   }, P = (() => {
     if (e <= 0) return [];
-    const i = x(1, Math.min(o, e)), n = x(
-      Math.max(e - o + 1, o + 1),
+    const i = x(1, Math.min(a, e)), n = x(
+      Math.max(e - a + 1, a + 1),
       e
-    ), h = Math.max(o + 1, t - r), s = Math.min(e - o, t + r), T = [...i];
-    if (h > o + 1 && T.push("ellipsis-start"), h <= s)
-      for (let w = h; w <= s; w++)
+    ), f = Math.max(a + 1, t - r), s = Math.min(e - a, t + r), T = [...i];
+    if (f > a + 1 && T.push("ellipsis-start"), f <= s)
+      for (let w = f; w <= s; w++)
         T.push(w);
-    s < e - o && T.push("ellipsis-end");
+    s < e - a && T.push("ellipsis-end");
     for (const w of n)
       T.includes(w) || T.push(w);
     return T;
-  })(), u = d === "sm" ? "sm" : d === "lg" ? "lg" : "md", g = d === "sm" ? 16 : d === "lg" ? 24 : 20, S = (i = !1) => {
+  })(), u = y === "sm" ? "sm" : y === "lg" ? "lg" : "md", g = y === "sm" ? 16 : y === "lg" ? 24 : 20, S = (i = !1) => {
     if (!c)
       return {
         borderRadius: "8px",
@@ -458,7 +458,7 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         opacity: 0.5
       }
     };
-  }, f = () => {
+  }, m = () => {
     if (!c)
       return {
         borderRadius: "8px",
@@ -488,7 +488,7 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
     };
   };
   return /* @__PURE__ */ E(
-    L,
+    I,
     {
       sx: {
         display: "flex",
@@ -497,15 +497,15 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         flexWrap: "wrap"
       },
       children: [
-        b && /* @__PURE__ */ l(
+        h && /* @__PURE__ */ l(
           k,
           {
             size: u,
             variant: "plain",
             color: "neutral",
             onClick: () => p(1),
-            disabled: m || t === 1,
-            sx: f(),
+            disabled: d || t === 1,
+            sx: m(),
             children: /* @__PURE__ */ l(H, { children: /* @__PURE__ */ l(Ue, { size: g }) })
           }
         ),
@@ -516,8 +516,8 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
             variant: "plain",
             color: "neutral",
             onClick: () => p(t - 1),
-            disabled: m || t === 1,
-            sx: f(),
+            disabled: d || t === 1,
+            sx: m(),
             children: /* @__PURE__ */ l(H, { children: /* @__PURE__ */ l(Qe, { size: g }) })
           }
         ),
@@ -546,16 +546,16 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
               },
               `${i}-${n}`
             );
-          const h = i === t;
+          const f = i === t;
           return /* @__PURE__ */ l(
             re,
             {
               size: u,
-              variant: h ? "solid" : "plain",
+              variant: f ? "solid" : "plain",
               color: "neutral",
               onClick: () => p(i),
-              disabled: m,
-              sx: S(h),
+              disabled: d,
+              sx: S(f),
               children: i
             },
             i
@@ -568,8 +568,8 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
             variant: "plain",
             color: "neutral",
             onClick: () => p(t + 1),
-            disabled: m || t === e,
-            sx: f(),
+            disabled: d || t === e,
+            sx: m(),
             children: /* @__PURE__ */ l(H, { children: /* @__PURE__ */ l(He, { size: g }) })
           }
         ),
@@ -580,8 +580,8 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
             variant: "plain",
             color: "neutral",
             onClick: () => p(e),
-            disabled: m || t === e,
-            sx: f(),
+            disabled: d || t === e,
+            sx: m(),
             children: /* @__PURE__ */ l(H, { children: /* @__PURE__ */ l($e, { size: g }) })
           }
         )
@@ -605,125 +605,125 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
     return null;
   }
 }, oe = async (e, t) => e.length === 0 ? [] : (await t.topX.getGames({ gameIds: e })).data.map((r) => {
-  var o;
+  var a;
   return {
     id: r.id,
     title: r.title,
     description: r.description || null,
-    branding: ((o = r.branding) == null ? void 0 : o.colors) || null
+    branding: ((a = r.branding) == null ? void 0 : a.colors) || null
   };
 }), ne = async (e, t) => e.length === 0 ? [] : (await t.matchQuiz.getGames({ gameIds: e })).data.map((r) => {
-  var o;
+  var a;
   return {
     id: r.id,
     title: r.title,
     description: r.description || null,
-    branding: ((o = r.branding) == null ? void 0 : o.colors) || null
+    branding: ((a = r.branding) == null ? void 0 : a.colors) || null
   };
 }), ae = async (e, t) => e.length === 0 ? [] : (await t.loyalty.getTemplates()).data.filter((r) => e.includes(r.id)).map((r) => {
-  var o;
+  var a;
   return {
     id: r.id,
     title: r.title || r.name,
     description: r.description || null,
-    branding: ((o = r.branding) == null ? void 0 : o.colors) || null
+    branding: ((a = r.branding) == null ? void 0 : a.colors) || null
   };
 }), le = async (e, t) => e.length === 0 ? [] : (await t.miniGames.getClassicQuizzes({
   classicQuizIds: e,
   limit: e.length
 })).data.map((r) => {
-  var o;
+  var a;
   return {
     id: r.id,
     title: r.title || r.name,
     description: r.description || null,
-    branding: ((o = r.branding) == null ? void 0 : o.colors) || null
+    branding: ((a = r.branding) == null ? void 0 : a.colors) || null
   };
-}), Xe = async (e, t, a, r) => {
-  const o = await t.loyalty.getLeaderboardForGame(e, { page: a, limit: r });
+}), Xe = async (e, t, o, r) => {
+  const a = await t.loyalty.getLeaderboardForGame(e, { page: o, limit: r });
   return {
-    leaderboard: N(o.data),
-    pagination: Z(o.meta.pagination)
+    leaderboard: N(a.data),
+    pagination: Z(a.meta.pagination)
   };
-}, Ge = async (e, t, a, r) => {
-  const o = await t.loyalty.getLeaderboard(
+}, Ge = async (e, t, o, r) => {
+  const a = await t.loyalty.getLeaderboard(
     e,
-    { page: a, limit: r }
+    { page: o, limit: r }
   );
   return {
-    leaderboard: N(o.data),
-    pagination: Z(o.meta.pagination)
+    leaderboard: N(a.data),
+    pagination: Z(a.meta.pagination)
   };
-}, W = async (e, t, a, r) => {
-  const o = await t.miniGames.getLeaderboardForClassicQuizzes({
+}, W = async (e, t, o, r) => {
+  const a = await t.miniGames.getLeaderboardForClassicQuizzes({
     classicQuizIds: e,
-    page: a,
+    page: o,
     limit: r
   });
   return {
-    leaderboard: N(o.data),
-    pagination: Z(o.meta.pagination)
+    leaderboard: N(a.data),
+    pagination: Z(a.meta.pagination)
   };
-}, ie = (e, t, a, r) => {
-  const o = e.type.toUpperCase();
-  return o === "TOP_X" || o === "MATCH_QUIZ" ? Xe(e.id, t, a, r) : o === "TEMPLATE" ? Ge(e.id, t, a, r) : W([e.id], t, a, r);
-}, je = async (e, t, a) => {
-  const o = a.toUpperCase() === "TEMPLATE" ? { rankType: "TEMPLATE", leaderboardIds: [e] } : { rankType: "GAME", gameType: a.toUpperCase(), leaderboardIds: [e] }, d = (await t.loyalty.getOwnRankings(o, !0)).data[0] ?? null;
+}, ie = (e, t, o, r) => {
+  const a = e.type.toUpperCase();
+  return a === "TOP_X" || a === "MATCH_QUIZ" ? Xe(e.id, t, o, r) : a === "TEMPLATE" ? Ge(e.id, t, o, r) : W([e.id], t, o, r);
+}, je = async (e, t, o, r) => {
+  const h = o.toUpperCase() === "TEMPLATE" ? { rankType: "TEMPLATE", leaderboardIds: [e] } : { rankType: "GAME", gameType: o.toUpperCase(), leaderboardIds: [e] }, d = (await t.loyalty.getOwnRankings(h, !0)).data[0] ?? null;
   return d ? {
     position: d.position,
-    profileId: d.profileId,
-    profileModel: d.profileModel,
+    profileId: r,
+    profileModel: null,
     points: d.points
   } : null;
-}, Ze = async (e, t, a) => {
-  const b = (await t.miniGames.getClassicQuizzesUserRanking(
-    a,
+}, Ze = async (e, t, o) => {
+  const h = (await t.miniGames.getClassicQuizzesUserRanking(
+    o,
     void 0,
     !0
   )).data.find((v) => v.classicQuizId === e) ?? null;
-  return b ? {
-    position: b.position,
-    profileId: a,
+  return h ? {
+    position: h.position,
+    profileId: o,
     profileModel: null,
-    points: b.points
+    points: h.points
   } : null;
-}, Ne = (e, t, a) => {
+}, Ne = (e, t, o) => {
   const r = e.type.toUpperCase();
-  return r === "TOP_X" || r === "MATCH_QUIZ" || r === "TEMPLATE" ? je(e.id, t, e.type) : Ze(e.id, t, a);
-}, Ve = (e, t, a, r = 10) => {
-  const [o, b] = B({}), [v, d] = B(null), [m, c] = B(!1), [C, p] = B(!1), [x, A] = B(
+  return r === "TOP_X" || r === "MATCH_QUIZ" || r === "TEMPLATE" ? je(e.id, t, e.type, o) : Ze(e.id, t, o);
+}, Ve = (e, t, o, r = 10) => {
+  const [a, h] = B({}), [v, y] = B(null), [d, c] = B(!1), [C, p] = B(!1), [x, A] = B(
     null
   ), [P, u] = B(null);
   Q(() => {
-    const f = {
+    const m = {
       topX: e.filter((n) => n.type.toUpperCase() === "TOP_X").map((n) => n.id),
       matchQuiz: e.filter((n) => n.type.toUpperCase() === "MATCH_QUIZ").map((n) => n.id),
       template: e.filter((n) => n.type.toUpperCase() === "TEMPLATE").map((n) => n.id),
       classicQuiz: e.filter((n) => n.type.toUpperCase() === "CLASSIC_QUIZ").map((n) => n.id)
     }, i = (n) => n.catch(() => []);
     Promise.all([
-      i(oe(f.topX, t)),
-      i(ne(f.matchQuiz, t)),
-      i(ae(f.template, t)),
-      i(le(f.classicQuiz, t))
+      i(oe(m.topX, t)),
+      i(ne(m.matchQuiz, t)),
+      i(ae(m.template, t)),
+      i(le(m.classicQuiz, t))
     ]).then((n) => {
-      const h = {};
+      const f = {};
       n.flat().forEach((s) => {
-        h[s.id] = s;
-      }), b(h);
+        f[s.id] = s;
+      }), h(f);
     });
   }, [e, t]), Q(() => {
     We(t).then(A);
   }, [t]), Q(() => {
-    if (!a || !x) {
+    if (!o || !x) {
       u(null);
       return;
     }
-    let f = !1, i;
-    if (a === $) {
-      const n = e.map((h) => h.id);
-      i = t.miniGames.getClassicQuizzesUserRanking(x.id, void 0, !0).then((h) => {
-        const T = h.data.find((w) => n.includes(w.classicQuizId)) ?? null;
+    let m = !1, i;
+    if (o === $) {
+      const n = e.map((f) => f.id);
+      i = t.miniGames.getClassicQuizzesUserRanking(x.id, void 0, !0).then((f) => {
+        const T = f.data.find((w) => n.includes(w.classicQuizId)) ?? null;
         return T ? {
           position: T.position,
           profileId: x.id,
@@ -732,79 +732,79 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         } : null;
       });
     } else {
-      const n = e.find((h) => h.id === a);
+      const n = e.find((f) => f.id === o);
       if (!n) return;
       i = Ne(n, t, x.id);
     }
     return i.then((n) => {
-      f || u(n);
+      m || u(n);
     }).catch(() => {
-      f || u(null);
+      m || u(null);
     }), () => {
-      f = !0;
+      m = !0;
     };
-  }, [a, e, t, x]), Q(() => {
-    if (!a) return;
-    let f = !1;
-    return c(!0), p(!1), d(null), (async () => {
+  }, [o, e, t, x]), Q(() => {
+    if (!o) return;
+    let m = !1;
+    return c(!0), p(!1), y(null), (async () => {
       try {
-        const n = e.length > 1 && e.every((y) => y.type.toUpperCase() === "CLASSIC_QUIZ");
-        if (a === $ && n) {
-          const y = e.map((M) => M.id), I = await W(
-            y,
+        const n = e.length > 1 && e.every((b) => b.type.toUpperCase() === "CLASSIC_QUIZ");
+        if (o === $ && n) {
+          const b = e.map((M) => M.id), R = await W(
+            b,
             t,
             1,
             r
           );
-          f || d({
+          m || y({
             id: $,
             title: $,
             description: null,
             branding: null,
-            ...I
+            ...R
           });
           return;
         }
-        const h = e.find((y) => y.id === a);
-        if (!h) return;
-        const s = h.type.toUpperCase(), T = s === "TOP_X" ? oe([a], t) : s === "MATCH_QUIZ" ? ne([a], t) : s === "TEMPLATE" ? ae([a], t) : le([a], t), [w, F] = await Promise.all([
-          ie(h, t, 1, r),
+        const f = e.find((b) => b.id === o);
+        if (!f) return;
+        const s = f.type.toUpperCase(), T = s === "TOP_X" ? oe([o], t) : s === "MATCH_QUIZ" ? ne([o], t) : s === "TEMPLATE" ? ae([o], t) : le([o], t), [w, F] = await Promise.all([
+          ie(f, t, 1, r),
           T.catch(() => [])
         ]);
-        if (!f) {
-          const y = F[0];
-          d({
-            id: a,
-            title: (y == null ? void 0 : y.title) || a,
-            description: (y == null ? void 0 : y.description) || null,
-            branding: (y == null ? void 0 : y.branding) || null,
+        if (!m) {
+          const b = F[0];
+          y({
+            id: o,
+            title: (b == null ? void 0 : b.title) || o,
+            description: (b == null ? void 0 : b.description) || null,
+            branding: (b == null ? void 0 : b.branding) || null,
             ...w
           });
         }
       } catch (n) {
-        console.error("Failed to fetch leaderboard:", n), f || p(!0);
+        console.error("Failed to fetch leaderboard:", n), m || p(!0);
       } finally {
-        f || c(!1);
+        m || c(!1);
       }
     })(), () => {
-      f = !0;
+      m = !0;
     };
-  }, [a, e, t, r]);
+  }, [o, e, t, r]);
   const g = me(
-    async (f) => {
-      if (a) {
+    async (m) => {
+      if (o) {
         c(!0);
         try {
           let i;
-          if (a === $) {
-            const n = e.map((h) => h.id);
-            i = await W(n, t, f, r);
+          if (o === $) {
+            const n = e.map((f) => f.id);
+            i = await W(n, t, m, r);
           } else {
-            const n = e.find((h) => h.id === a);
+            const n = e.find((f) => f.id === o);
             if (!n) return;
-            i = await ie(n, t, f, r);
+            i = await ie(n, t, m, r);
           }
-          d((n) => n ? { ...n, ...i } : null);
+          y((n) => n ? { ...n, ...i } : null);
         } catch (i) {
           console.error("Failed to fetch page:", i);
         } finally {
@@ -812,64 +812,64 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         }
       }
     },
-    [a, e, t, r]
+    [o, e, t, r]
   ), S = Object.fromEntries(
-    Object.entries(o).map(([f, i]) => [f, i.title])
+    Object.entries(a).map(([m, i]) => [m, i.title])
   );
-  return { data: v, entityTitles: S, loading: m, error: C, setPage: g, userRank: P };
+  return { data: v, entityTitles: S, loading: d, error: C, setPage: g, userRank: P };
 }, _ = "ALL", se = ["TOP_X", "MATCH_QUIZ", "TEMPLATE", "CLASSIC_QUIZ"], Ye = (e, t) => {
   if (!Array.isArray(e) || e.length === 0)
     return "The 'entities' setting is required and must be a non-empty array.";
-  const a = /* @__PURE__ */ new Set();
+  const o = /* @__PURE__ */ new Set();
   for (let r = 0; r < e.length; r++) {
-    const o = e[r];
-    if (!o || typeof o != "object")
+    const a = e[r];
+    if (!a || typeof a != "object")
       return `Entity at index ${r} must be an object with 'id' and 'type' fields.`;
-    if (!o.id || typeof o.id != "string")
+    if (!a.id || typeof a.id != "string")
       return `Entity at index ${r} is missing a required 'id' string field.`;
-    if (a.has(o.id))
-      return `Duplicate entity id '${o.id}' found at index ${r}. Each entity must have a unique id.`;
-    if (a.add(o.id), !o.type || typeof o.type != "string")
+    if (o.has(a.id))
+      return `Duplicate entity id '${a.id}' found at index ${r}. Each entity must have a unique id.`;
+    if (o.add(a.id), !a.type || typeof a.type != "string")
       return `Entity at index ${r} is missing a required 'type' string field.`;
-    if (!se.includes(o.type.toUpperCase()))
-      return `Entity at index ${r} has an invalid type '${o.type}'. Valid values are: ${se.join(", ")} (case-insensitive).`;
+    if (!se.includes(a.type.toUpperCase()))
+      return `Entity at index ${r} has an invalid type '${a.type}'. Valid values are: ${se.join(", ")} (case-insensitive).`;
   }
   return t !== void 0 && (typeof t != "number" || !Number.isInteger(t) || t < 1 || t > 50) ? "The 'pageSize' setting must be an integer between 1 and 50." : null;
 }, qe = ({
   entities: e,
   sdk: t,
-  pageSize: a,
+  pageSize: o,
   rankStyles: r,
-  showOverallOnly: o = !1,
-  showHeading: b = !0
+  showOverallOnly: a = !1,
+  showHeading: h = !0
 }) => {
-  var y;
-  const { t: v } = X(), d = j(), m = G().surface, c = D(
-    () => Ye(e, a),
-    [e, a]
+  var b;
+  const { t: v } = X(), y = j(), d = G().surface, c = D(
+    () => Ye(e, o),
+    [e, o]
   ), C = D(
-    () => !c && e.length > 1 && e.every((I) => I.type.toUpperCase() === "CLASSIC_QUIZ"),
+    () => !c && e.length > 1 && e.every((R) => R.type.toUpperCase() === "CLASSIC_QUIZ"),
     [e, c]
-  ), p = o && C, x = C ? _ : ((y = e[0]) == null ? void 0 : y.id) || "", [A, P] = B(x);
+  ), p = a && C, x = C ? _ : ((b = e[0]) == null ? void 0 : b.id) || "", [A, P] = B(x);
   Q(() => {
     A === _ || e.some((M) => M.id === A) || P(x);
   }, [e]);
-  const { data: u, entityTitles: g, loading: S, error: f, setPage: i, userRank: n } = Ve(
+  const { data: u, entityTitles: g, loading: S, error: m, setPage: i, userRank: n } = Ve(
     c ? [] : e,
     t,
     c ? "" : A,
-    a
-  ), h = D(() => {
+    o
+  ), f = D(() => {
     if (c) return [];
-    const I = [];
-    return C && I.push({ id: _, label: v("leaderboard.overall") }), e.forEach((M) => {
-      I.push({
+    const R = [];
+    return C && R.push({ id: _, label: v("leaderboard.overall") }), e.forEach((M) => {
+      R.push({
         id: M.id,
         label: g[M.id] ?? "",
         type: M.type.toUpperCase()
       });
-    }), I;
-  }, [e, C, v, g, c]), s = e.every((I) => g[I.id] !== void 0), T = !c && !p && (e.length > 1 || C) && s, w = (u == null ? void 0 : u.pagination) || null, F = A === _ ? v("leaderboard.overall") : (u == null ? void 0 : u.title) || null;
+    }), R;
+  }, [e, C, v, g, c]), s = e.every((R) => g[R.id] !== void 0), T = !c && !p && (e.length > 1 || C) && s, w = (u == null ? void 0 : u.pagination) || null, F = A === _ ? v("leaderboard.overall") : (u == null ? void 0 : u.title) || null;
   return c ? /* @__PURE__ */ l(
     J,
     {
@@ -877,7 +877,7 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
       title: "Configuration Error",
       message: c
     }
-  ) : f ? /* @__PURE__ */ l(
+  ) : m ? /* @__PURE__ */ l(
     J,
     {
       variant: "error",
@@ -885,20 +885,20 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
       message: "One or more entity IDs could not be found. Please verify the provided IDs and try again."
     }
   ) : /* @__PURE__ */ E(
-    L,
+    I,
     {
       sx: {
         display: "flex",
         flexDirection: "column",
-        gap: d.md,
-        backgroundColor: m,
-        padding: d.md
+        gap: y.md,
+        backgroundColor: d,
+        padding: y.md
       },
       children: [
         T && /* @__PURE__ */ l(
           _e,
           {
-            options: h,
+            options: f,
             selectedId: A,
             onChange: P
           }
@@ -908,7 +908,7 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
           {
             leaderboard: S ? null : (u == null ? void 0 : u.leaderboard) || null,
             userRank: S ? null : n,
-            showHeading: b && !T,
+            showHeading: h && !T,
             title: F,
             description: (u == null ? void 0 : u.description) || null,
             brandingColors: (u == null ? void 0 : u.branding) || null,
@@ -928,38 +928,38 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
   );
 }, Ke = (e) => {
   var P;
-  const [t, a] = z.useState(!1), [r, o] = z.useState(!1), b = ye(e.language), v = z.useRef(
+  const [t, o] = z.useState(!1), [r, a] = z.useState(!1), h = ye(e.language), v = z.useRef(
     `leaderboard-shadow-root-${Math.random().toString(36).substring(2, 11)}`
-  ), d = z.useRef(null), m = z.useRef(null), c = z.useRef(null), [C, p] = z.useState(null);
+  ), y = z.useRef(null), d = z.useRef(null), c = z.useRef(null), [C, p] = z.useState(null);
   z.useEffect(() => {
-    xe(e.language || "en").finally(() => o(!0));
+    xe(e.language || "en").finally(() => a(!0));
   }, [e.language]), z.useEffect(() => {
-    if (!d.current) return;
-    d.current.shadowRoot ? (m.current = d.current.shadowRoot, c.current = m.current.getElementById(
+    if (!y.current) return;
+    y.current.shadowRoot ? (d.current = y.current.shadowRoot, c.current = d.current.getElementById(
       v.current
-    ), c.current || (c.current = document.createElement("div"), c.current.id = v.current, m.current.appendChild(c.current))) : (m.current = d.current.attachShadow({ mode: "open" }), c.current = document.createElement("div"), c.current.id = v.current, m.current.appendChild(c.current)), Ce(c.current, b);
-    const u = Ee("leaderboard", b);
+    ), c.current || (c.current = document.createElement("div"), c.current.id = v.current, d.current.appendChild(c.current))) : (d.current = y.current.attachShadow({ mode: "open" }), c.current = document.createElement("div"), c.current.id = v.current, d.current.appendChild(c.current)), Ce(c.current, h);
+    const u = Ee("leaderboard", h);
     return p(
       (g) => (g == null ? void 0 : g.key) === u ? g : ve(
         "leaderboard",
-        m.current,
-        b
+        d.current,
+        h
       )
-    ), a(!0), () => {
-      a(!1);
+    ), o(!0), () => {
+      o(!1);
     };
-  }, [b]);
-  const x = /* @__PURE__ */ l(L, { ref: d, lang: e.language || "en" }), A = t && r && c.current && C ? Ae(
+  }, [h]);
+  const x = /* @__PURE__ */ l(I, { ref: y, lang: e.language || "en" }), A = t && r && c.current && C ? Ae(
     // Keyed on the cache, not on `direction`: it must change in the same
     // render that adopts the new cache, or CssVarsProvider writes its CSS
     // variables into the outgoing cache and never repeats.
-    /* @__PURE__ */ l(Te, { value: C, children: /* @__PURE__ */ l(Pe, { containerRef: d, children: /* @__PURE__ */ l(
+    /* @__PURE__ */ l(Te, { value: C, children: /* @__PURE__ */ l(Pe, { containerRef: y, children: /* @__PURE__ */ l(
       Se,
       {
         customTheme: e.themeOptions,
         mode: (P = e.themeOptions) == null ? void 0 : P.mode,
         shadowRootElement: c.current,
-        direction: b,
+        direction: h,
         children: /* @__PURE__ */ l(
           we,
           {
@@ -967,7 +967,7 @@ const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
             leadPhoneCountryCode: null,
             language: e.language,
             optionsLayout: null,
-            direction: b,
+            direction: h,
             children: e.children
           }
         )