fansunited-frontend-components 0.0.69 → 0.0.71

package/Leaderboard.js

@@ -1,26 +1,27 @@
-import { jsxs as R, jsx as i, Fragment as se } from "react/jsx-runtime";
-import M, { useState as B, useEffect as Q, useCallback as pe, useMemo as _ } from "react";
-import { u as D, g as fe, C as me, q as he, b as X, c as ce, d as O, f as G, B as L, a as de, k as ge, n as be, y as ye, z as xe, A as Ce, E as ve, D as Te } from "./chunks/PrizeCard-CXjFADAN.js";
-import { a as J } from "./chunks/AlertMessage-X4MQ4qsN.js";
-import { createPortal as Pe } from "react-dom";
-import { F as Se } from "./chunks/FormLabel-C47pX5hN.js";
-import { T as I } from "./chunks/Typography-DFdgIDQS.js";
-import { S as we, a as Re } from "./chunks/Select-BeixD4Vw.js";
-import { P as K } from "./chunks/Person-DB_bEPcg.js";
-import { h as U, s as Ee } from "./chunks/helpers-D8cWUfGf.js";
-import { S as Ae } from "./chunks/Spinner-C219bcnm.js";
-import { S as Ie } from "./chunks/Sheet-vOgATocO.js";
-import { T as Le } from "./chunks/Table-Cx7htUDp.js";
-import { A as ee } from "./chunks/Avatar-RBMU1Gkk.js";
-import { I as H, B as te } from "./chunks/Button-GawVOPKi.js";
-import { C as ze, a as Me } from "./chunks/chevrons-right-CXSpQt9w.js";
-import { C as Be, a as Fe } from "./chunks/chevron-right-eZEqQ93O.js";
-const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()).join(" "), $e = ({
+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 _ } from "react";
+import { u as G, g as fe, C as he, s as ge, b as X, c as de, d as O, f as j, B as L, a as ue, k as be, A as ye, n as xe, D as Ce, E as ve, F as Te, G as Pe, H as Se, I as we, J as Ee } from "./chunks/PrizeCard-CyVJJLo1.js";
+import { a as J } from "./chunks/AlertMessage-DwSmhmHt.js";
+import { createPortal as Ie } from "react-dom";
+import { F as Ae } from "./chunks/FormLabel-DlXT5RZd.js";
+import { T as R } from "./chunks/Typography-B8CtvKkm.js";
+import { S as Re, a as Le } from "./chunks/Select-DyRdhrMr.js";
+import { P as ee } from "./chunks/Person-CLQl7Sxs.js";
+import { h as U, s as Me } from "./chunks/helpers-DgUDSfd1.js";
+import { S as ze } from "./chunks/Spinner-Bb4eb64F.js";
+import { S as Be } from "./chunks/Sheet-sYNAL7gX.js";
+import { T as Fe } from "./chunks/Table-C09wF6nK.js";
+import { A as te } from "./chunks/Avatar-CEbT4X-o.js";
+import { D as H } from "./chunks/DirectionScope-BGDPaR6B.js";
+import { I as k, B as re } from "./chunks/Button-CO-k2gLb.js";
+import { C as Ue, a as $e } from "./chunks/chevrons-right-CXSpQt9w.js";
+import { C as Qe, a as He } from "./chunks/chevron-right-eZEqQ93O.js";
+const ke = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()).join(" "), De = ({
   options: e,
   selectedId: t,
   onChange: a
 }) => {
-  const { t: r } = D(), { shadowRootElement: o } = fe(me), b = he(), y = X(), d = ce(), c = O().primary, h = G(), v = y.textColor, u = {
+  const { t: r } = G(), { shadowRootElement: o } = fe(he), b = ge(), v = X(), d = de(), m = O().primary, c = j(), C = v.textColor, p = {
     background: {
       surface: b.colorSchemes.light.palette.background.surface,
       popup: b.colorSchemes.light.palette.background.popup
@@ -35,18 +36,18 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
     }
   }, x = {
     flexShrink: 0,
-    fontFamily: c,
+    fontFamily: m,
     fontSize: "0.65em",
     fontWeight: 600,
     letterSpacing: "0.05em",
     textTransform: "uppercase",
-    color: u.neutral.outlinedColor,
-    bgcolor: u.neutral.plainHoverBg,
-    border: `1px solid ${u.neutral.outlinedBorder}`,
+    color: p.neutral.outlinedColor,
+    bgcolor: p.neutral.plainHoverBg,
+    border: `1px solid ${p.neutral.outlinedBorder}`,
     borderRadius: d.sm,
-    px: h["2xs"],
-    py: h["3xs"]
-  }, E = (C) => /* @__PURE__ */ R(
+    px: c["2xs"],
+    py: c["3xs"]
+  }, I = (g) => /* @__PURE__ */ E(
     L,
     {
       sx: {
@@ -54,107 +55,107 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         alignItems: "center",
         justifyContent: "space-between",
         width: "100%",
-        gap: h.sm
+        gap: c.sm
       },
       children: [
-        /* @__PURE__ */ i("span", { children: C.label }),
-        C.type && /* @__PURE__ */ i(L, { sx: x, children: Ue(C.type) })
+        /* @__PURE__ */ l("span", { children: g.label }),
+        g.type && /* @__PURE__ */ l(L, { sx: x, children: ke(g.type) })
       ]
     }
-  ), w = {
+  ), P = {
     root: {
       sx: {
-        fontFamily: c,
+        fontFamily: m,
         borderRadius: d.sm,
-        bgcolor: u.background.surface,
-        borderColor: u.neutral.outlinedBorder,
-        color: u.neutral.outlinedColor,
+        bgcolor: p.background.surface,
+        borderColor: p.neutral.outlinedBorder,
+        color: p.neutral.outlinedColor,
         fontSize: "1em",
-        "&:hover": { bgcolor: u.neutral.outlinedHoverBg }
+        "&:hover": { bgcolor: p.neutral.outlinedHoverBg }
       }
     },
     listbox: {
       container: o,
       sx: {
         zIndex: 10,
-        bgcolor: u.background.popup,
-        border: `1px solid ${u.neutral.outlinedBorder}`,
+        bgcolor: p.background.popup,
+        border: `1px solid ${p.neutral.outlinedBorder}`,
         borderRadius: d.sm,
         boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
       }
     }
-  }, p = {
-    fontFamily: c,
-    color: `${u.neutral.outlinedColor} !important`,
+  }, u = {
+    fontFamily: m,
+    color: `${p.neutral.outlinedColor} !important`,
     bgcolor: "transparent",
     "&:hover": {
-      bgcolor: `${u.neutral.plainHoverBg} !important`,
-      color: `${u.neutral.plainHoverColor} !important`
+      bgcolor: `${p.neutral.plainHoverBg} !important`,
+      color: `${p.neutral.plainHoverColor} !important`
     },
     "&.Mui-selected": {
-      bgcolor: `${u.neutral.plainActiveBg} !important`,
-      color: `${u.neutral.outlinedColor} !important`
+      bgcolor: `${p.neutral.plainActiveBg} !important`,
+      color: `${p.neutral.outlinedColor} !important`
     },
     "&.Mui-selected:hover": {
-      bgcolor: `${u.neutral.plainActiveBg} !important`,
-      color: `${u.neutral.outlinedColor} !important`
+      bgcolor: `${p.neutral.plainActiveBg} !important`,
+      color: `${p.neutral.outlinedColor} !important`
     }
   };
-  return /* @__PURE__ */ R(L, { sx: { display: "flex", flexDirection: "column", gap: h["2xs"] }, children: [
-    /* @__PURE__ */ i(
-      Se,
+  return /* @__PURE__ */ E(L, { sx: { display: "flex", flexDirection: "column", gap: c["2xs"] }, children: [
+    /* @__PURE__ */ l(
+      Ae,
       {
         sx: {
-          color: `${v} !important`,
-          fontFamily: c,
+          color: `${C} !important`,
+          fontFamily: m,
           fontSize: "0.875em"
         },
-        children: /* @__PURE__ */ i(
-          I,
+        children: /* @__PURE__ */ l(
+          R,
           {
             sx: {
-              fontFamily: c,
+              fontFamily: m,
               fontSize: "0.875em",
-              color: v
+              color: C
             },
             children: r("leaderboard.selectLabel")
           }
         )
       }
     ),
-    /* @__PURE__ */ i(
-      we,
+    /* @__PURE__ */ l(
+      Re,
       {
         value: t,
-        onChange: (C, P) => P && a(P),
-        slotProps: w,
-        renderValue: (C) => {
-          if (!C) return null;
-          const P = e.find((f) => f.id === C.value);
-          return P ? E(P) : C.label;
+        onChange: (g, S) => S && a(S),
+        slotProps: P,
+        renderValue: (g) => {
+          if (!g) return null;
+          const S = e.find((f) => f.id === g.value);
+          return S ? I(S) : g.label;
         },
-        children: e.map((C) => /* @__PURE__ */ i(Re, { value: C.id, sx: p, children: E(C) }, C.id))
+        children: e.map((g) => /* @__PURE__ */ l(Le, { value: g.id, sx: u, children: I(g) }, g.id))
       }
     )
   ] });
-}, Qe = ({
+}, _e = ({
   leaderboard: e,
   userRank: t,
   showHeading: a,
   title: r,
   description: o,
   isSplitVariant: b,
-  brandingColors: y,
+  brandingColors: v,
   rankStyles: d
 }) => {
-  const { t: c } = D(), h = de(), v = X(), u = (y == null ? void 0 : y.primaryColor) || v.palette.primary.plainColor, x = (y == null ? void 0 : y.contentColor) || v.textColor, E = v.textColor, w = O().primary, p = O().secondary, C = ce(), P = G(), f = ge(), l = v.surfaceVariant, n = h.colorSchemes.light.palette.primary.onPrimary, m = v.outlineEnabledBorder, s = {
+  const { t: m } = G(), c = ue(), C = X(), p = (v == null ? void 0 : v.primaryColor) || C.palette.primary.plainColor, x = (v == null ? void 0 : v.contentColor) || C.textColor, I = 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 = {
     leaderboardContainer: {
       display: "flex",
       flexDirection: "column",
-      gap: P.md
+      gap: S.md
     },
     leaderboardTitle: {
-      fontFamily: w,
+      fontFamily: P,
       fontWeight: 700,
       lineHeight: "133%",
       letterSpacing: "0px",
@@ -164,11 +165,11 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
     },
     tableContainer: {
       overflowX: "auto",
-      borderRadius: C.md,
-      border: `1px solid ${m}`
+      borderRadius: g.md,
+      border: `1px solid ${h}`
     },
     table: {
-      backgroundColor: l,
+      backgroundColor: i,
       "--TableCell-paddingX": "0.5rem",
       "--TableCell-paddingY": "0.375rem",
       cursor: "default",
@@ -176,19 +177,19 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         backgroundColor: "transparent"
       },
       "& > thead > tr > th": {
-        backgroundColor: `rgba(${U(l)}, 0.8)`,
+        backgroundColor: `rgba(${U(i)}, 0.8)`,
         color: x,
-        fontFamily: w,
+        fontFamily: P,
         fontWeight: 600,
         fontSize: "0.875em",
         textAlign: "center",
-        borderBottom: `1px solid ${m}`
+        borderBottom: `1px solid ${h}`
       }
     },
     headerCellPosition: {
-      backgroundColor: `rgba(${U(l)}, 0.8)`,
+      backgroundColor: `rgba(${U(i)}, 0.8)`,
       color: x,
-      fontFamily: w,
+      fontFamily: P,
       fontWeight: 600,
       fontSize: "0.875em",
       textAlign: "center",
@@ -196,9 +197,9 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
       width: "10%"
     },
     headerCellName: {
-      backgroundColor: `rgba(${U(l)}, 0.8)`,
+      backgroundColor: `rgba(${U(i)}, 0.8)`,
       color: x,
-      fontFamily: w,
+      fontFamily: P,
       fontWeight: 600,
       fontSize: "0.875em",
       textAlign: "left",
@@ -206,9 +207,9 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
       width: "80%"
     },
     headerCellPoints: {
-      backgroundColor: `rgba(${U(l)}, 0.8)`,
+      backgroundColor: `rgba(${U(i)}, 0.8)`,
       color: x,
-      fontFamily: w,
+      fontFamily: P,
       fontWeight: 600,
       fontSize: "0.875em",
       textAlign: "center",
@@ -230,23 +231,23 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
       textAlign: "center"
     },
     userRow: {
-      backgroundColor: `rgba(${U(u)}, 0.1)`
+      backgroundColor: `rgba(${U(p)}, 0.1)`
     },
     nameCell: {
       display: "flex",
       alignItems: "center",
-      gap: P.sm
+      gap: S.sm
     },
     leaderboardAvatar: {
       width: "32px",
       height: "32px",
       fontSize: "0.875em",
       fontWeight: 600,
-      backgroundColor: u,
+      backgroundColor: p,
       color: n
     },
     nameText: {
-      fontFamily: w,
+      fontFamily: P,
       fontWeight: 500,
       fontSize: "0.875em",
       color: x,
@@ -255,13 +256,13 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
       whiteSpace: "nowrap"
     },
     positionText: {
-      fontFamily: w,
+      fontFamily: P,
       fontWeight: 600,
       fontSize: "0.875em",
       color: x
     },
     pointsText: {
-      fontFamily: w,
+      fontFamily: P,
       fontWeight: 600,
       fontSize: "0.875em",
       color: x
@@ -271,20 +272,20 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
       color: n
     },
     noLeaderboardText: {
-      fontFamily: p,
+      fontFamily: u,
       fontSize: "1.25em",
       color: x,
       textAlign: "center",
-      marginY: P.md
+      marginY: S.md
     }
   };
   if (!e)
-    return /* @__PURE__ */ i(Ae, { my: 10 });
+    return /* @__PURE__ */ l(ze, { my: 10 });
   if (e.length === 0)
-    return /* @__PURE__ */ i(I, { level: "body-lg", sx: s.noLeaderboardText, children: c("leaderboard.noLeaderboardAvailable") });
-  const T = t, S = T == null ? void 0 : T.profileId, F = S && e.some((g) => g.profileId === S);
-  return /* @__PURE__ */ R(L, { sx: s.leaderboardContainer, children: [
-    a && /* @__PURE__ */ R(
+    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,
       {
         sx: {
@@ -294,8 +295,8 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
           textAlign: "center"
         },
         children: [
-          /* @__PURE__ */ i(
-            I,
+          /* @__PURE__ */ l(
+            R,
             {
               level: "body-sm",
               sx: {
@@ -304,36 +305,36 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
                 letterSpacing: "1px",
                 textTransform: "uppercase",
                 fontSize: "0.75em",
-                color: E,
+                color: I,
                 opacity: "60%",
-                fontFamily: p
+                fontFamily: u
               },
-              children: c("leaderboard.heading")
+              children: m("leaderboard.heading")
             }
           ),
-          /* @__PURE__ */ R(
+          /* @__PURE__ */ E(
             L,
             {
               sx: {
                 display: "flex",
                 flexDirection: "column",
-                gap: P["3xs"]
+                gap: S["3xs"]
               },
               children: [
-                r && /* @__PURE__ */ i(I, { level: "h4", sx: s.leaderboardTitle, children: r }),
-                o && /* @__PURE__ */ i(
-                  I,
+                r && /* @__PURE__ */ l(R, { level: "h4", sx: s.leaderboardTitle, children: r }),
+                o && /* @__PURE__ */ l(
+                  R,
                   {
                     sx: {
                       fontWeight: 400,
                       lineHeight: "140%",
                       letterSpacing: "0.15px",
                       fontSize: "1.25em",
-                      color: E,
+                      color: I,
                       opacity: "60%",
-                      fontFamily: w
+                      fontFamily: P
                     },
-                    children: Ee(o)
+                    children: Me(o)
                   }
                 )
               ]
@@ -342,8 +343,8 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         ]
       }
     ),
-    /* @__PURE__ */ i(Ie, { sx: s.tableContainer, children: /* @__PURE__ */ R(
-      Le,
+    /* @__PURE__ */ l(Be, { sx: s.tableContainer, children: /* @__PURE__ */ E(
+      Fe,
       {
         variant: "outlined",
         hoverRow: !1,
@@ -351,101 +352,101 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         size: "sm",
         sx: s.table,
         children: [
-          /* @__PURE__ */ i("thead", { children: /* @__PURE__ */ R("tr", { children: [
-            /* @__PURE__ */ i("th", { style: s.headerCellPosition, children: f || b ? "" : c("leaderboard.position") }),
-            /* @__PURE__ */ i("th", { style: s.headerCellName, children: c("leaderboard.name") }),
-            /* @__PURE__ */ i("th", { style: s.headerCellPoints, children: f || b ? "🎯" : c("leaderboard.points") })
+          /* @__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__ */ R("tbody", { children: [
-            T && !F && /* @__PURE__ */ R("tr", { style: s.userRow, children: [
-              /* @__PURE__ */ i("td", { style: s.tableCellPosition, children: /* @__PURE__ */ R(I, { sx: s.positionText, children: [
+          /* @__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: [
                 "#",
                 T.position
               ] }) }),
-              /* @__PURE__ */ i("td", { style: s.tableCellName, children: /* @__PURE__ */ R(L, { sx: s.nameCell, children: [
-                /* @__PURE__ */ i(ee, { sx: s.leaderboardAvatar, children: /* @__PURE__ */ i(K, { sx: s.avatarIcon }) }),
-                /* @__PURE__ */ i(I, { sx: s.nameText, children: c("leaderboard.you") })
+              /* @__PURE__ */ l("td", { style: s.tableCellName, children: /* @__PURE__ */ E(L, { 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__ */ i("td", { style: s.tableCellPoints, children: /* @__PURE__ */ i(I, { sx: s.pointsText, children: T.points }) })
+              /* @__PURE__ */ l("td", { style: s.tableCellPoints, children: /* @__PURE__ */ l(R, { sx: s.pointsText, children: T.points }) })
             ] }),
-            e.map((g, A) => {
-              var N, V, Y, q;
-              const z = S === g.profileId, ue = z ? s.userRow : d == null ? void 0 : d[A + 1];
-              return /* @__PURE__ */ R("tr", { style: ue, children: [
-                /* @__PURE__ */ i("td", { style: s.tableCellPosition, children: /* @__PURE__ */ R(I, { sx: s.positionText, children: [
+            e.map((y, A) => {
+              var V, Y, K, q;
+              const M = w === y.profileId, pe = M ? s.userRow : d == null ? void 0 : d[A + 1];
+              return /* @__PURE__ */ E("tr", { style: pe, children: [
+                /* @__PURE__ */ l("td", { style: s.tableCellPosition, children: /* @__PURE__ */ E(R, { sx: s.positionText, children: [
                   "#",
-                  g.position
+                  y.position
                 ] }) }),
-                /* @__PURE__ */ i("td", { style: s.tableCellName, children: /* @__PURE__ */ R(L, { sx: s.nameCell, children: [
-                  /* @__PURE__ */ i(
-                    ee,
+                /* @__PURE__ */ l("td", { style: s.tableCellName, children: /* @__PURE__ */ E(L, { sx: s.nameCell, children: [
+                  /* @__PURE__ */ l(
+                    te,
                     {
-                      src: ((N = g.profileModel) == null ? void 0 : N.avatar) || void 0,
+                      src: ((V = y.profileModel) == null ? void 0 : V.avatar) || void 0,
                       sx: s.leaderboardAvatar,
-                      children: (V = g.profileModel) != null && V.avatar ? /* @__PURE__ */ i(se, {}) : /* @__PURE__ */ i(K, { sx: s.avatarIcon })
+                      children: (Y = y.profileModel) != null && Y.avatar ? /* @__PURE__ */ l(ce, {}) : /* @__PURE__ */ l(ee, { sx: s.avatarIcon })
                     }
                   ),
-                  /* @__PURE__ */ i(I, { sx: s.nameText, children: z ? c("leaderboard.you") : ((Y = g.profileModel) == null ? void 0 : Y.nickname) || ((q = g.profileModel) == null ? void 0 : q.name) || c("leaderboard.anonymous") })
+                  /* @__PURE__ */ l(R, { sx: s.nameText, children: M ? m("leaderboard.you") : ((K = y.profileModel) == null ? void 0 : K.nickname) || ((q = y.profileModel) == null ? void 0 : q.name) || m("leaderboard.anonymous") })
                 ] }) }),
-                /* @__PURE__ */ i("td", { style: s.tableCellPoints, children: /* @__PURE__ */ i(I, { sx: s.pointsText, children: g.points }) })
-              ] }, g.profileId);
+                /* @__PURE__ */ l("td", { style: s.tableCellPoints, children: /* @__PURE__ */ l(R, { sx: s.pointsText, children: y.points }) })
+              ] }, y.profileId);
             })
           ] })
         ]
       }
     ) })
   ] });
-}, He = ({
+}, Oe = ({
   count: e = 10,
   page: t = 1,
   onChange: a,
   siblingCount: r = 1,
   boundaryCount: o = 1,
   showFirstButton: b = !0,
-  showLastButton: y = !0,
+  showLastButton: v = !0,
   size: d = "md",
-  disabled: c = !1,
-  isOverlayVariant: h = !1
+  disabled: m = !1,
+  isOverlayVariant: c = !1
 }) => {
-  const v = de(), u = (l) => {
-    a && l >= 1 && l <= e && a(l);
-  }, x = (l, n) => {
-    const m = [];
-    for (let s = l; s <= n; s++) m.push(s);
-    return m;
-  }, w = (() => {
+  const C = ue(), p = (i) => {
+    a && i >= 1 && i <= e && a(i);
+  }, x = (i, n) => {
+    const h = [];
+    for (let s = i; s <= n; s++) h.push(s);
+    return h;
+  }, P = (() => {
     if (e <= 0) return [];
-    const l = x(1, Math.min(o, e)), n = x(
+    const i = x(1, Math.min(o, e)), n = x(
       Math.max(e - o + 1, o + 1),
       e
-    ), m = Math.max(o + 1, t - r), s = Math.min(e - o, t + r), T = [...l];
-    if (m > o + 1 && T.push("ellipsis-start"), m <= s)
-      for (let S = m; S <= s; S++)
-        T.push(S);
+    ), 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++)
+        T.push(w);
     s < e - o && T.push("ellipsis-end");
-    for (const S of n)
-      T.includes(S) || T.push(S);
+    for (const w of n)
+      T.includes(w) || T.push(w);
     return T;
-  })(), p = d === "sm" ? "sm" : d === "lg" ? "lg" : "md", C = d === "sm" ? 16 : d === "lg" ? 24 : 20, P = (l = !1) => {
-    if (!h)
+  })(), u = d === "sm" ? "sm" : d === "lg" ? "lg" : "md", g = d === "sm" ? 16 : d === "lg" ? 24 : 20, S = (i = !1) => {
+    if (!c)
       return {
         borderRadius: "8px",
         minWidth: "32px",
         minHeight: "32px",
-        fontWeight: l ? 600 : 400
+        fontWeight: i ? 600 : 400
       };
-    const n = v.colorSchemes.dark;
+    const n = C.colorSchemes.dark;
     return {
       borderRadius: "8px",
       minWidth: "32px",
       minHeight: "32px",
-      fontWeight: l ? 600 : 400,
-      backgroundColor: l ? n.palette.neutral.solidBg : "transparent",
-      color: l ? n.palette.neutral.solidColor : n.textColor,
+      fontWeight: i ? 600 : 400,
+      backgroundColor: i ? n.palette.neutral.solidBg : "transparent",
+      color: i ? n.palette.neutral.solidColor : n.textColor,
       border: "none",
       "&:hover": {
         backgroundColor: n.palette.neutral.solidBg,
-        color: l ? n.palette.neutral.solidColor : n.textColor
+        color: i ? n.palette.neutral.solidColor : n.textColor
       },
       "&:active": {
         backgroundColor: n.palette.neutral.plainActiveBg
@@ -457,35 +458,35 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
       }
     };
   }, f = () => {
-    if (!h)
+    if (!c)
       return {
         borderRadius: "8px",
         minWidth: "32px",
         minHeight: "32px"
       };
-    const l = v.colorSchemes.dark;
+    const i = C.colorSchemes.dark;
     return {
       borderRadius: "8px",
       minWidth: "32px",
       minHeight: "32px",
       backgroundColor: "transparent",
-      color: l.textColor,
+      color: i.textColor,
       border: "none",
       "&:hover": {
-        backgroundColor: l.palette.neutral.solidBg,
-        color: l.textColor
+        backgroundColor: i.palette.neutral.solidBg,
+        color: i.textColor
       },
       "&:active": {
-        backgroundColor: l.palette.neutral.plainActiveBg
+        backgroundColor: i.palette.neutral.plainActiveBg
       },
       "&.Mui-disabled": {
         backgroundColor: "transparent",
-        color: l.textDisabled,
+        color: i.textDisabled,
         opacity: 0.5
       }
     };
   };
-  return /* @__PURE__ */ R(
+  return /* @__PURE__ */ E(
     L,
     {
       sx: {
@@ -495,45 +496,45 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         flexWrap: "wrap"
       },
       children: [
-        b && /* @__PURE__ */ i(
-          H,
+        b && /* @__PURE__ */ l(
+          k,
           {
-            size: p,
+            size: u,
             variant: "plain",
             color: "neutral",
-            onClick: () => u(1),
-            disabled: c || t === 1,
+            onClick: () => p(1),
+            disabled: m || t === 1,
             sx: f(),
-            children: /* @__PURE__ */ i(ze, { size: C })
+            children: /* @__PURE__ */ l(H, { children: /* @__PURE__ */ l(Ue, { size: g }) })
           }
         ),
-        /* @__PURE__ */ i(
-          H,
+        /* @__PURE__ */ l(
+          k,
           {
-            size: p,
+            size: u,
             variant: "plain",
             color: "neutral",
-            onClick: () => u(t - 1),
-            disabled: c || t === 1,
+            onClick: () => p(t - 1),
+            disabled: m || t === 1,
             sx: f(),
-            children: /* @__PURE__ */ i(Be, { size: C })
+            children: /* @__PURE__ */ l(H, { children: /* @__PURE__ */ l(Qe, { size: g }) })
           }
         ),
-        w.map((l, n) => {
-          if (typeof l == "string" && l.startsWith("ellipsis"))
-            return /* @__PURE__ */ i(
-              te,
+        P.map((i, n) => {
+          if (typeof i == "string" && i.startsWith("ellipsis"))
+            return /* @__PURE__ */ l(
+              re,
               {
-                size: p,
+                size: u,
                 variant: "plain",
                 color: "neutral",
                 disabled: !0,
                 sx: {
-                  ...P(!1),
+                  ...S(!1),
                   cursor: "default",
-                  "&.Mui-disabled": h ? {
+                  "&.Mui-disabled": c ? {
                     backgroundColor: "transparent",
-                    color: v.colorSchemes.dark.textDisabled,
+                    color: C.colorSchemes.dark.textDisabled,
                     opacity: 0.5
                   } : {
                     opacity: 1,
@@ -542,67 +543,67 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
                 },
                 children: "..."
               },
-              `${l}-${n}`
+              `${i}-${n}`
             );
-          const m = l === t;
-          return /* @__PURE__ */ i(
-            te,
+          const h = i === t;
+          return /* @__PURE__ */ l(
+            re,
             {
-              size: p,
-              variant: m ? "solid" : "plain",
+              size: u,
+              variant: h ? "solid" : "plain",
               color: "neutral",
-              onClick: () => u(l),
-              disabled: c,
-              sx: P(m),
-              children: l
+              onClick: () => p(i),
+              disabled: m,
+              sx: S(h),
+              children: i
             },
-            l
+            i
           );
         }),
-        /* @__PURE__ */ i(
-          H,
+        /* @__PURE__ */ l(
+          k,
           {
-            size: p,
+            size: u,
             variant: "plain",
             color: "neutral",
-            onClick: () => u(t + 1),
-            disabled: c || t === e,
+            onClick: () => p(t + 1),
+            disabled: m || t === e,
             sx: f(),
-            children: /* @__PURE__ */ i(Fe, { size: C })
+            children: /* @__PURE__ */ l(H, { children: /* @__PURE__ */ l(He, { size: g }) })
           }
         ),
-        y && /* @__PURE__ */ i(
-          H,
+        v && /* @__PURE__ */ l(
+          k,
           {
-            size: p,
+            size: u,
             variant: "plain",
             color: "neutral",
-            onClick: () => u(e),
-            disabled: c || t === e,
+            onClick: () => p(e),
+            disabled: m || t === e,
             sx: f(),
-            children: /* @__PURE__ */ i(Me, { size: C })
+            children: /* @__PURE__ */ l(H, { children: /* @__PURE__ */ l($e, { size: g }) })
           }
         )
       ]
     }
   );
-}, $ = "ALL", j = (e) => ({
+}, $ = "ALL", Z = (e) => ({
   currentPage: e.currentPage,
   totalPages: e.numberOfPages,
   totalItems: e.totalItems,
   itemsPerPage: e.itemsPerPage
-}), Z = (e) => e.map((t) => ({
+}), N = (e) => e.map((t) => ({
   position: t.position,
   profileId: t.profileId,
   profileModel: t.profileModel,
   points: t.points
-})), ke = async (e) => {
+})), We = async (e) => {
   try {
     return await e.profile.getOwn().getInfo();
   } catch {
     return null;
   }
-}, re = async (e, t) => e.length === 0 ? [] : (await t.topX.getGames({ gameIds: e })).data.map((r) => {
+}, oe = async (e, t) => e.length === 0 ? [] : (await t.topX.getGames({ gameIds: e })).data.map((r) => {
   var o;
   return {
     id: r.id,
@@ -610,7 +611,7 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
     description: r.description || null,
     branding: ((o = r.branding) == null ? void 0 : o.colors) || null
   };
-}), oe = async (e, t) => e.length === 0 ? [] : (await t.matchQuiz.getGames({ gameIds: e })).data.map((r) => {
+}), ne = async (e, t) => e.length === 0 ? [] : (await t.matchQuiz.getGames({ gameIds: e })).data.map((r) => {
   var o;
   return {
     id: r.id,
@@ -618,7 +619,7 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
     description: r.description || null,
     branding: ((o = r.branding) == null ? void 0 : o.colors) || null
   };
-}), ne = async (e, t) => e.length === 0 ? [] : (await t.loyalty.getTemplates()).data.filter((r) => e.includes(r.id)).map((r) => {
+}), ae = async (e, t) => e.length === 0 ? [] : (await t.loyalty.getTemplates()).data.filter((r) => e.includes(r.id)).map((r) => {
   var o;
   return {
     id: r.id,
@@ -626,7 +627,7 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
     description: r.description || null,
     branding: ((o = r.branding) == null ? void 0 : o.colors) || null
   };
-}), ae = async (e, t) => e.length === 0 ? [] : (await t.miniGames.getClassicQuizzes({
+}), le = async (e, t) => e.length === 0 ? [] : (await t.miniGames.getClassicQuizzes({
   classicQuizIds: e,
   limit: e.length
 })).data.map((r) => {
@@ -637,20 +638,20 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
     description: r.description || null,
     branding: ((o = r.branding) == null ? void 0 : o.colors) || null
   };
-}), _e = async (e, t, a, r) => {
+}), Ge = async (e, t, a, r) => {
   const o = await t.loyalty.getLeaderboardForGame(e, { page: a, limit: r });
   return {
-    leaderboard: Z(o.data),
-    pagination: j(o.meta.pagination)
+    leaderboard: N(o.data),
+    pagination: Z(o.meta.pagination)
   };
-}, Oe = async (e, t, a, r) => {
+}, Xe = async (e, t, a, r) => {
   const o = await t.loyalty.getLeaderboard(
     e,
     { page: a, limit: r }
   );
   return {
-    leaderboard: Z(o.data),
-    pagination: j(o.meta.pagination)
+    leaderboard: N(o.data),
+    pagination: Z(o.meta.pagination)
   };
 }, W = async (e, t, a, r) => {
   const o = await t.miniGames.getLeaderboardForClassicQuizzes({
@@ -659,13 +660,13 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
     limit: r
   });
   return {
-    leaderboard: Z(o.data),
-    pagination: j(o.meta.pagination)
+    leaderboard: N(o.data),
+    pagination: Z(o.meta.pagination)
   };
-}, le = (e, t, a, r) => {
+}, ie = (e, t, a, r) => {
   const o = e.type.toUpperCase();
-  return o === "TOP_X" || o === "MATCH_QUIZ" ? _e(e.id, t, a, r) : o === "TEMPLATE" ? Oe(e.id, t, a, r) : W([e.id], t, a, r);
-}, We = async (e, t, a) => {
+  return o === "TOP_X" || o === "MATCH_QUIZ" ? Ge(e.id, t, a, r) : o === "TEMPLATE" ? Xe(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;
   return d ? {
     position: d.position,
@@ -673,55 +674,55 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
     profileModel: d.profileModel,
     points: d.points
   } : null;
-}, De = async (e, t, a) => {
+}, Ze = async (e, t, a) => {
   const b = (await t.miniGames.getClassicQuizzesUserRanking(
     a,
     void 0,
     !0
-  )).data.find((y) => y.classicQuizId === e) ?? null;
+  )).data.find((v) => v.classicQuizId === e) ?? null;
   return b ? {
     position: b.position,
     profileId: a,
     profileModel: null,
     points: b.points
   } : null;
-}, Xe = (e, t, a) => {
+}, Ne = (e, t, a) => {
   const r = e.type.toUpperCase();
-  return r === "TOP_X" || r === "MATCH_QUIZ" || r === "TEMPLATE" ? We(e.id, t, e.type) : De(e.id, t, a);
-}, Ge = (e, t, a, r = 10) => {
-  const [o, b] = B({}), [y, d] = B(null), [c, h] = B(!1), [v, u] = B(!1), [x, E] = B(
+  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, I] = B(
     null
-  ), [w, p] = B(null);
+  ), [P, u] = B(null);
   Q(() => {
     const f = {
       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)
-    }, l = (n) => n.catch(() => []);
+    }, i = (n) => n.catch(() => []);
     Promise.all([
-      l(re(f.topX, t)),
-      l(oe(f.matchQuiz, t)),
-      l(ne(f.template, t)),
-      l(ae(f.classicQuiz, t))
+      i(oe(f.topX, t)),
+      i(ne(f.matchQuiz, t)),
+      i(ae(f.template, t)),
+      i(le(f.classicQuiz, t))
     ]).then((n) => {
-      const m = {};
+      const h = {};
       n.flat().forEach((s) => {
-        m[s.id] = s;
-      }), b(m);
+        h[s.id] = s;
+      }), b(h);
     });
   }, [e, t]), Q(() => {
-    ke(t).then(E);
+    We(t).then(I);
   }, [t]), Q(() => {
     if (!a || !x) {
-      p(null);
+      u(null);
       return;
     }
-    let f = !1, l;
+    let f = !1, i;
     if (a === $) {
-      const n = e.map((m) => m.id);
-      l = t.miniGames.getClassicQuizzesUserRanking(x.id, void 0, !0).then((m) => {
-        const T = m.data.find((S) => n.includes(S.classicQuizId)) ?? null;
+      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;
         return T ? {
           position: T.position,
           profileId: x.id,
@@ -730,26 +731,26 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         } : null;
       });
     } else {
-      const n = e.find((m) => m.id === a);
+      const n = e.find((h) => h.id === a);
       if (!n) return;
-      l = Xe(n, t, x.id);
+      i = Ne(n, t, x.id);
     }
-    return l.then((n) => {
-      f || p(n);
+    return i.then((n) => {
+      f || u(n);
     }).catch(() => {
-      f || p(null);
+      f || u(null);
     }), () => {
       f = !0;
     };
   }, [a, e, t, x]), Q(() => {
     if (!a) return;
     let f = !1;
-    return h(!0), u(!1), d(null), (async () => {
+    return c(!0), p(!1), d(null), (async () => {
       try {
-        const n = e.length > 1 && e.every((g) => g.type.toUpperCase() === "CLASSIC_QUIZ");
+        const n = e.length > 1 && e.every((y) => y.type.toUpperCase() === "CLASSIC_QUIZ");
         if (a === $ && n) {
-          const g = e.map((z) => z.id), A = await W(
-            g,
+          const y = e.map((M) => M.id), A = await W(
+            y,
             t,
             1,
             r
@@ -763,59 +764,59 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
           });
           return;
         }
-        const m = e.find((g) => g.id === a);
-        if (!m) return;
-        const s = m.type.toUpperCase(), T = s === "TOP_X" ? re([a], t) : s === "MATCH_QUIZ" ? oe([a], t) : s === "TEMPLATE" ? ne([a], t) : ae([a], t), [S, F] = await Promise.all([
-          le(m, t, 1, r),
+        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),
           T.catch(() => [])
         ]);
         if (!f) {
-          const g = F[0];
+          const y = F[0];
           d({
             id: a,
-            title: (g == null ? void 0 : g.title) || a,
-            description: (g == null ? void 0 : g.description) || null,
-            branding: (g == null ? void 0 : g.branding) || null,
-            ...S
+            title: (y == null ? void 0 : y.title) || a,
+            description: (y == null ? void 0 : y.description) || null,
+            branding: (y == null ? void 0 : y.branding) || null,
+            ...w
           });
         }
       } catch (n) {
-        console.error("Failed to fetch leaderboard:", n), f || u(!0);
+        console.error("Failed to fetch leaderboard:", n), f || p(!0);
       } finally {
-        f || h(!1);
+        f || c(!1);
       }
     })(), () => {
       f = !0;
     };
   }, [a, e, t, r]);
-  const C = pe(
+  const g = me(
     async (f) => {
       if (a) {
-        h(!0);
+        c(!0);
         try {
-          let l;
+          let i;
           if (a === $) {
-            const n = e.map((m) => m.id);
-            l = await W(n, t, f, r);
+            const n = e.map((h) => h.id);
+            i = await W(n, t, f, r);
           } else {
-            const n = e.find((m) => m.id === a);
+            const n = e.find((h) => h.id === a);
             if (!n) return;
-            l = await le(n, t, f, r);
+            i = await ie(n, t, f, r);
           }
-          d((n) => n ? { ...n, ...l } : null);
-        } catch (l) {
-          console.error("Failed to fetch page:", l);
+          d((n) => n ? { ...n, ...i } : null);
+        } catch (i) {
+          console.error("Failed to fetch page:", i);
         } finally {
-          h(!1);
+          c(!1);
         }
       }
     },
     [a, e, t, r]
-  ), P = Object.fromEntries(
-    Object.entries(o).map(([f, l]) => [f, l.title])
+  ), S = Object.fromEntries(
+    Object.entries(o).map(([f, i]) => [f, i.title])
   );
-  return { data: y, entityTitles: P, loading: c, error: v, setPage: C, userRank: w };
-}, k = "ALL", ie = ["TOP_X", "MATCH_QUIZ", "TEMPLATE", "CLASSIC_QUIZ"], je = (e, t) => {
+  return { data: v, entityTitles: S, loading: m, error: C, setPage: g, userRank: P };
+}, D = "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();
@@ -829,11 +830,11 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
       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")
       return `Entity at index ${r} is missing a required 'type' string field.`;
-    if (!ie.includes(o.type.toUpperCase()))
-      return `Entity at index ${r} has an invalid type '${o.type}'. Valid values are: ${ie.join(", ")} (case-insensitive).`;
+    if (!se.includes(o.type.toUpperCase()))
+      return `Entity at index ${r} has an invalid type '${o.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;
-}, Ze = ({
+}, Ke = ({
   entities: e,
   sdk: t,
   pageSize: a,
@@ -841,134 +842,143 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
   showOverallOnly: o = !1,
   showHeading: b = !0
 }) => {
-  var g;
-  const { t: y } = D(), d = G(), c = X().surface, h = _(
-    () => je(e, a),
+  var y;
+  const { t: v } = G(), d = j(), m = X().surface, c = _(
+    () => Ye(e, a),
     [e, a]
-  ), v = _(
-    () => !h && e.length > 1 && e.every((A) => A.type.toUpperCase() === "CLASSIC_QUIZ"),
-    [e, h]
-  ), u = o && v, x = v ? k : ((g = e[0]) == null ? void 0 : g.id) || "", [E, w] = B(x);
+  ), C = _(
+    () => !c && e.length > 1 && e.every((A) => A.type.toUpperCase() === "CLASSIC_QUIZ"),
+    [e, c]
+  ), p = o && C, x = C ? D : ((y = e[0]) == null ? void 0 : y.id) || "", [I, P] = B(x);
   Q(() => {
-    E === k || e.some((z) => z.id === E) || w(x);
+    I === D || e.some((M) => M.id === I) || P(x);
   }, [e]);
-  const { data: p, entityTitles: C, loading: P, error: f, setPage: l, userRank: n } = Ge(
-    h ? [] : e,
+  const { data: u, entityTitles: g, loading: S, error: f, setPage: i, userRank: n } = Ve(
+    c ? [] : e,
     t,
-    h ? "" : E,
+    c ? "" : I,
     a
-  ), m = _(() => {
-    if (h) return [];
+  ), h = _(() => {
+    if (c) return [];
     const A = [];
-    return v && A.push({ id: k, label: y("leaderboard.overall") }), e.forEach((z) => {
+    return C && A.push({ id: D, label: v("leaderboard.overall") }), e.forEach((M) => {
       A.push({
-        id: z.id,
-        label: C[z.id] ?? "",
-        type: z.type.toUpperCase()
+        id: M.id,
+        label: g[M.id] ?? "",
+        type: M.type.toUpperCase()
       });
     }), A;
-  }, [e, v, y, C, h]), s = e.every((A) => C[A.id] !== void 0), T = !h && !u && (e.length > 1 || v) && s, S = (p == null ? void 0 : p.pagination) || null, F = E === k ? y("leaderboard.overall") : (p == null ? void 0 : p.title) || null;
-  return h ? /* @__PURE__ */ i(
+  }, [e, C, v, g, c]), s = e.every((A) => g[A.id] !== void 0), T = !c && !p && (e.length > 1 || C) && s, w = (u == null ? void 0 : u.pagination) || null, F = I === D ? v("leaderboard.overall") : (u == null ? void 0 : u.title) || null;
+  return c ? /* @__PURE__ */ l(
     J,
     {
       variant: "error",
       title: "Configuration Error",
-      message: h
+      message: c
     }
-  ) : f ? /* @__PURE__ */ i(
+  ) : f ? /* @__PURE__ */ l(
     J,
     {
       variant: "error",
       title: "Failed to Load Leaderboard",
       message: "One or more entity IDs could not be found. Please verify the provided IDs and try again."
     }
-  ) : /* @__PURE__ */ R(
+  ) : /* @__PURE__ */ E(
     L,
     {
       sx: {
         display: "flex",
         flexDirection: "column",
         gap: d.md,
-        backgroundColor: c,
+        backgroundColor: m,
         padding: d.md
       },
       children: [
-        T && /* @__PURE__ */ i(
-          $e,
+        T && /* @__PURE__ */ l(
+          De,
           {
-            options: m,
-            selectedId: E,
-            onChange: w
+            options: h,
+            selectedId: I,
+            onChange: P
           }
         ),
-        /* @__PURE__ */ i(
-          Qe,
+        /* @__PURE__ */ l(
+          _e,
           {
-            leaderboard: P ? null : (p == null ? void 0 : p.leaderboard) || null,
-            userRank: P ? null : n,
+            leaderboard: S ? null : (u == null ? void 0 : u.leaderboard) || null,
+            userRank: S ? null : n,
             showHeading: b && !T,
             title: F,
-            description: (p == null ? void 0 : p.description) || null,
-            brandingColors: (p == null ? void 0 : p.branding) || null,
+            description: (u == null ? void 0 : u.description) || null,
+            brandingColors: (u == null ? void 0 : u.branding) || null,
             rankStyles: r
           }
         ),
-        !P && S && S.totalPages > 1 && /* @__PURE__ */ i(
-          He,
+        !S && w && w.totalPages > 1 && /* @__PURE__ */ l(
+          Oe,
           {
-            count: S.totalPages,
-            page: S.currentPage,
-            onChange: l
+            count: w.totalPages,
+            page: w.currentPage,
+            onChange: i
           }
         )
       ]
     }
   );
-}, Ne = (e) => {
-  var x;
-  const [t, a] = M.useState(!1), [r, o] = M.useState(!1), b = M.useRef(
+}, qe = (e) => {
+  var P;
+  const [t, a] = z.useState(!1), [r, o] = z.useState(!1), b = ye(e.language), v = z.useRef(
     `leaderboard-shadow-root-${Math.random().toString(36).substring(2, 11)}`
-  ), y = M.useRef(null), d = M.useRef(null), c = M.useRef(null), h = M.useRef(null);
-  M.useEffect(() => {
-    be(e.language || "en").finally(() => o(!0));
-  }, [e.language]), M.useEffect(() => {
-    if (y.current)
-      return y.current.shadowRoot ? (d.current = y.current.shadowRoot, c.current = d.current.getElementById(
-        b.current
-      ), c.current || (c.current = document.createElement("div"), c.current.id = b.current, d.current.appendChild(c.current))) : (d.current = y.current.attachShadow({ mode: "open" }), c.current = document.createElement("div"), c.current.id = b.current, d.current.appendChild(c.current)), h.current || (h.current = ye({
-        key: "leaderboard-css",
-        prepend: !0,
-        container: d.current
-      })), a(!0), () => {
-        a(!1);
-      };
-  }, []);
-  const v = /* @__PURE__ */ i(L, { ref: y }), u = t && r && c.current && h.current ? Pe(
-    /* @__PURE__ */ i(xe, { value: h.current, children: /* @__PURE__ */ i(Ce, { containerRef: y, children: /* @__PURE__ */ i(
-      ve,
+  ), d = z.useRef(null), m = z.useRef(null), c = z.useRef(null), [C, p] = z.useState(null);
+  z.useEffect(() => {
+    xe(e.language || "en").finally(() => o(!0));
+  }, [e.language]), z.useEffect(() => {
+    if (!d.current) return;
+    d.current.shadowRoot ? (m.current = d.current.shadowRoot, c.current = m.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);
+    return p(
+      (g) => (g == null ? void 0 : g.key) === u ? g : ve(
+        "leaderboard",
+        m.current,
+        b
+      )
+    ), a(!0), () => {
+      a(!1);
+    };
+  }, [b]);
+  const x = /* @__PURE__ */ l(L, { ref: d }), I = t && r && c.current && C ? Ie(
+    // 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(
+      Se,
       {
         customTheme: e.themeOptions,
-        mode: (x = e.themeOptions) == null ? void 0 : x.mode,
+        mode: (P = e.themeOptions) == null ? void 0 : P.mode,
         shadowRootElement: c.current,
-        children: /* @__PURE__ */ i(
-          Te,
+        direction: b,
+        children: /* @__PURE__ */ l(
+          we,
           {
             shadowRootElement: c.current,
             leadPhoneCountryCode: null,
             language: e.language,
             optionsLayout: null,
+            direction: b,
             children: e.children
           }
         )
       }
-    ) }) }),
+    ) }) }, C.key),
     c.current
   ) : null;
-  return /* @__PURE__ */ R(se, { children: [
-    v,
-    u
+  return /* @__PURE__ */ E(ce, { children: [
+    x,
+    I
   ] });
-}, Ve = (e) => /* @__PURE__ */ i(Ne, { ...e, children: /* @__PURE__ */ i(Ze, { ...e }) }), ft = Ve;
+}, Je = (e) => /* @__PURE__ */ l(qe, { ...e, children: /* @__PURE__ */ l(Ke, { ...e }) }), yt = Je;
 export {
-  ft as Leaderboard
+  yt as Leaderboard
 };