fansunited-frontend-components 0.0.61 → 0.0.63

package/Leaderboard.js

@@ -1,116 +1,118 @@
 import { jsxs as R, jsx as i, Fragment as se } from "react/jsx-runtime";
-import L, { useState as z, useEffect as F, useCallback as pe, useMemo as k } 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 I, a as de, k as ge, n as be, z as ye, A as xe, D as Ce, E as ve, F as Te } from "./chunks/PrizeCard-C4uB4BtX.js";
-import { a as J } from "./chunks/AlertMessage-BL6P8IGY.js";
+import z, { useState as B, useEffect as Q, useCallback as pe, useMemo as _ } from "react";
+import { u as D, m as fe, n as me, w as he, a as X, c as ce, b as O, e as j, B as L, j as de, q as ge, i as be, f as ye, C as xe, g as Ce, E as ve, h as Te } from "./chunks/PrizeCard-CjZXXFx3.js";
+import { a as J } from "./chunks/AlertMessage-AyMEW3JL.js";
 import { createPortal as Pe } from "react-dom";
-import { F as Se } from "./chunks/FormLabel-BtT3kbwT.js";
-import { T as A, I as $, B as K } from "./chunks/Button-B_IYd2Jd.js";
-import { S as we, a as Re } from "./chunks/Select-U-Jes3gR.js";
-import { S as Ee, T as Ae, P as ee } from "./chunks/Person-FOtZp8_j.js";
-import { h as M, s as Ie } from "./chunks/helpers-B7ClL9wI.js";
-import { S as Le } from "./chunks/Spinner-DN1WtGKZ.js";
-import { A as te } from "./chunks/Avatar-DxI6WjFC.js";
-import { C as ze, a as Me } from "./chunks/chevrons-right-CRIN5sOe.js";
+import { F as Se } from "./chunks/FormLabel-BYtvETHS.js";
+import { T as I } from "./chunks/Typography-DjxaMiey.js";
+import { S as we, a as Re } from "./chunks/Select-B_VR6iKu.js";
+import { P as K } from "./chunks/Person-DvjCrwnY.js";
+import { h as U, s as Ee } from "./chunks/helpers-B7-TtMzO.js";
+import { S as Ae } from "./chunks/Spinner-htM_pA9-.js";
+import { S as Ie, T as Le } from "./chunks/Table-OBls_6ml.js";
+import { A as ee } from "./chunks/Avatar-CBP4sabd.js";
+import { I as H, B as te } from "./chunks/Button-DOVRR2Sy.js";
+import { C as Me, a as ze } from "./chunks/chevrons-right-CRIN5sOe.js";
 import { C as Be, a as Fe } from "./chunks/chevron-right-B3IZtaMT.js";
 const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()).join(" "), $e = ({
   options: e,
   selectedId: t,
   onChange: a
 }) => {
-  const { t: r } = D(), { shadowRootElement: o } = fe(me), g = he(), y = X(), c = ce(), d = O().primary, x = G(), v = y.textColor, f = {
+  const { t: r } = D(), { shadowRootElement: o } = fe(me), b = he(), y = X(), d = ce(), c = O().primary, h = j(), v = y.textColor, u = {
     background: {
-      surface: g.colorSchemes.light.palette.background.surface,
-      popup: g.colorSchemes.light.palette.background.popup
+      surface: b.colorSchemes.light.palette.background.surface,
+      popup: b.colorSchemes.light.palette.background.popup
     },
     neutral: {
-      outlinedBorder: g.colorSchemes.light.palette.neutral.outlinedBorder,
-      outlinedColor: g.colorSchemes.light.palette.neutral.outlinedColor,
-      outlinedHoverBg: g.colorSchemes.light.palette.neutral.outlinedHoverBg,
-      plainActiveBg: g.colorSchemes.light.palette.neutral.plainActiveBg,
-      plainHoverBg: g.colorSchemes.light.palette.neutral.plainHoverBg,
-      plainHoverColor: g.colorSchemes.light.palette.neutral.plainHoverColor
+      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
     }
-  }, u = {
+  }, x = {
     flexShrink: 0,
-    fontFamily: d,
+    fontFamily: c,
     fontSize: "0.65em",
     fontWeight: 600,
     letterSpacing: "0.05em",
     textTransform: "uppercase",
-    color: f.neutral.outlinedColor,
-    bgcolor: f.neutral.plainHoverBg,
-    border: `1px solid ${f.neutral.outlinedBorder}`,
-    borderRadius: c.sm,
-    px: x["2xs"],
-    py: x["3xs"]
+    color: u.neutral.outlinedColor,
+    bgcolor: u.neutral.plainHoverBg,
+    border: `1px solid ${u.neutral.outlinedBorder}`,
+    borderRadius: d.sm,
+    px: h["2xs"],
+    py: h["3xs"]
   }, E = (C) => /* @__PURE__ */ R(
-    I,
+    L,
     {
       sx: {
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",
         width: "100%",
-        gap: x.sm
+        gap: h.sm
       },
       children: [
         /* @__PURE__ */ i("span", { children: C.label }),
-        C.type && /* @__PURE__ */ i(I, { sx: u, children: Ue(C.type) })
+        C.type && /* @__PURE__ */ i(L, { sx: x, children: Ue(C.type) })
       ]
     }
-  ), P = {
+  ), w = {
     root: {
       sx: {
-        fontFamily: d,
-        borderRadius: c.sm,
-        bgcolor: f.background.surface,
-        borderColor: f.neutral.outlinedBorder,
-        color: f.neutral.outlinedColor,
+        fontFamily: c,
+        borderRadius: d.sm,
+        bgcolor: u.background.surface,
+        borderColor: u.neutral.outlinedBorder,
+        color: u.neutral.outlinedColor,
         fontSize: "1em",
-        "&:hover": { bgcolor: f.neutral.outlinedHoverBg }
+        "&:hover": { bgcolor: u.neutral.outlinedHoverBg }
       }
     },
     listbox: {
       container: o,
       sx: {
         zIndex: 10,
-        bgcolor: f.background.popup,
-        border: `1px solid ${f.neutral.outlinedBorder}`,
-        borderRadius: c.sm,
+        bgcolor: u.background.popup,
+        border: `1px solid ${u.neutral.outlinedBorder}`,
+        borderRadius: d.sm,
         boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
       }
     }
-  }, S = {
-    fontFamily: d,
-    color: `${f.neutral.outlinedColor} !important`,
+  }, p = {
+    fontFamily: c,
+    color: `${u.neutral.outlinedColor} !important`,
     bgcolor: "transparent",
     "&:hover": {
-      bgcolor: `${f.neutral.plainHoverBg} !important`,
-      color: `${f.neutral.plainHoverColor} !important`
+      bgcolor: `${u.neutral.plainHoverBg} !important`,
+      color: `${u.neutral.plainHoverColor} !important`
     },
     "&.Mui-selected": {
-      bgcolor: `${f.neutral.plainActiveBg} !important`,
-      color: `${f.neutral.outlinedColor} !important`
+      bgcolor: `${u.neutral.plainActiveBg} !important`,
+      color: `${u.neutral.outlinedColor} !important`
     },
     "&.Mui-selected:hover": {
-      bgcolor: `${f.neutral.plainActiveBg} !important`,
-      color: `${f.neutral.outlinedColor} !important`
+      bgcolor: `${u.neutral.plainActiveBg} !important`,
+      color: `${u.neutral.outlinedColor} !important`
     }
   };
-  return /* @__PURE__ */ R(I, { sx: { display: "flex", flexDirection: "column", gap: x["2xs"] }, children: [
+  return /* @__PURE__ */ R(L, { sx: { display: "flex", flexDirection: "column", gap: h["2xs"] }, children: [
     /* @__PURE__ */ i(
       Se,
       {
         sx: {
           color: `${v} !important`,
-          fontFamily: d,
+          fontFamily: c,
           fontSize: "0.875em"
         },
         children: /* @__PURE__ */ i(
-          A,
+          I,
           {
             sx: {
-              fontFamily: d,
+              fontFamily: c,
               fontSize: "0.875em",
               color: v
             },
@@ -123,14 +125,14 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
       we,
       {
         value: t,
-        onChange: (C, w) => w && a(w),
-        slotProps: P,
+        onChange: (C, P) => P && a(P),
+        slotProps: w,
         renderValue: (C) => {
           if (!C) return null;
-          const w = e.find((m) => m.id === C.value);
-          return w ? E(w) : C.label;
+          const P = e.find((f) => f.id === C.value);
+          return P ? E(P) : C.label;
         },
-        children: e.map((C) => /* @__PURE__ */ i(Re, { value: C.id, sx: S, children: E(C) }, C.id))
+        children: e.map((C) => /* @__PURE__ */ i(Re, { value: C.id, sx: p, children: E(C) }, C.id))
       }
     )
   ] });
@@ -140,29 +142,29 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
   showHeading: a,
   title: r,
   description: o,
-  isSplitVariant: g,
+  isSplitVariant: b,
   brandingColors: y,
-  rankStyles: c
+  rankStyles: d
 }) => {
-  const { t: d } = D(), x = de(), v = X(), f = (y == null ? void 0 : y.primaryColor) || v.palette.primary.plainColor, u = (y == null ? void 0 : y.contentColor) || v.textColor, E = v.textColor, P = O().primary, S = O().secondary, C = ce(), w = G(), m = ge(), l = v.surfaceVariant, n = x.colorSchemes.light.palette.primary.onPrimary, p = v.outlineEnabledBorder, s = {
+  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 = j(), f = ge(), l = v.surfaceVariant, n = h.colorSchemes.light.palette.primary.onPrimary, m = v.outlineEnabledBorder, s = {
     leaderboardContainer: {
       display: "flex",
       flexDirection: "column",
-      gap: w.md
+      gap: P.md
     },
     leaderboardTitle: {
-      fontFamily: P,
+      fontFamily: w,
       fontWeight: 700,
       lineHeight: "133%",
       letterSpacing: "0px",
       fontSize: "1.5em",
-      color: u,
+      color: x,
       textAlign: "center"
     },
     tableContainer: {
       overflowX: "auto",
       borderRadius: C.md,
-      border: `1px solid ${p}`
+      border: `1px solid ${m}`
     },
     table: {
       backgroundColor: l,
@@ -173,19 +175,19 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         backgroundColor: "transparent"
       },
       "& > thead > tr > th": {
-        backgroundColor: `rgba(${M(l)}, 0.8)`,
-        color: u,
-        fontFamily: P,
+        backgroundColor: `rgba(${U(l)}, 0.8)`,
+        color: x,
+        fontFamily: w,
         fontWeight: 600,
         fontSize: "0.875em",
         textAlign: "center",
-        borderBottom: `1px solid ${p}`
+        borderBottom: `1px solid ${m}`
       }
     },
     headerCellPosition: {
-      backgroundColor: `rgba(${M(l)}, 0.8)`,
-      color: u,
-      fontFamily: P,
+      backgroundColor: `rgba(${U(l)}, 0.8)`,
+      color: x,
+      fontFamily: w,
       fontWeight: 600,
       fontSize: "0.875em",
       textAlign: "center",
@@ -193,9 +195,9 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
       width: "10%"
     },
     headerCellName: {
-      backgroundColor: `rgba(${M(l)}, 0.8)`,
-      color: u,
-      fontFamily: P,
+      backgroundColor: `rgba(${U(l)}, 0.8)`,
+      color: x,
+      fontFamily: w,
       fontWeight: 600,
       fontSize: "0.875em",
       textAlign: "left",
@@ -203,9 +205,9 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
       width: "80%"
     },
     headerCellPoints: {
-      backgroundColor: `rgba(${M(l)}, 0.8)`,
-      color: u,
-      fontFamily: P,
+      backgroundColor: `rgba(${U(l)}, 0.8)`,
+      color: x,
+      fontFamily: w,
       fontWeight: 600,
       fontSize: "0.875em",
       textAlign: "center",
@@ -227,62 +229,62 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
       textAlign: "center"
     },
     userRow: {
-      backgroundColor: `rgba(${M(f)}, 0.1)`
+      backgroundColor: `rgba(${U(u)}, 0.1)`
     },
     nameCell: {
       display: "flex",
       alignItems: "center",
-      gap: w.sm
+      gap: P.sm
     },
     leaderboardAvatar: {
       width: "32px",
       height: "32px",
       fontSize: "0.875em",
       fontWeight: 600,
-      backgroundColor: f,
+      backgroundColor: u,
       color: n
     },
     nameText: {
-      fontFamily: P,
+      fontFamily: w,
       fontWeight: 500,
       fontSize: "0.875em",
-      color: u,
+      color: x,
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap"
     },
     positionText: {
-      fontFamily: P,
+      fontFamily: w,
       fontWeight: 600,
       fontSize: "0.875em",
-      color: u
+      color: x
     },
     pointsText: {
-      fontFamily: P,
+      fontFamily: w,
       fontWeight: 600,
       fontSize: "0.875em",
-      color: u
+      color: x
     },
     avatarIcon: {
       fontSize: "1em",
       color: n
     },
     noLeaderboardText: {
-      fontFamily: S,
+      fontFamily: p,
       fontSize: "1.25em",
-      color: u,
+      color: x,
       textAlign: "center",
-      marginY: w.md
+      marginY: P.md
     }
   };
   if (!e)
-    return /* @__PURE__ */ i(Le, { my: 10 });
+    return /* @__PURE__ */ i(Ae, { my: 10 });
   if (e.length === 0)
-    return /* @__PURE__ */ i(A, { level: "body-lg", sx: s.noLeaderboardText, children: d("leaderboard.noLeaderboardAvailable") });
-  const h = t, T = h == null ? void 0 : h.profileId, Q = T && e.some((b) => b.profileId === T);
-  return /* @__PURE__ */ R(I, { sx: s.leaderboardContainer, children: [
+    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(
-      I,
+      L,
       {
         sx: {
           display: "flex",
@@ -292,7 +294,7 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         },
         children: [
           /* @__PURE__ */ i(
-            A,
+            I,
             {
               level: "body-sm",
               sx: {
@@ -303,23 +305,23 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
                 fontSize: "0.75em",
                 color: E,
                 opacity: "60%",
-                fontFamily: S
+                fontFamily: p
               },
-              children: d("leaderboard.heading")
+              children: c("leaderboard.heading")
             }
           ),
           /* @__PURE__ */ R(
-            I,
+            L,
             {
               sx: {
                 display: "flex",
                 flexDirection: "column",
-                gap: w["3xs"]
+                gap: P["3xs"]
               },
               children: [
-                r && /* @__PURE__ */ i(A, { level: "h4", sx: s.leaderboardTitle, children: r }),
+                r && /* @__PURE__ */ i(I, { level: "h4", sx: s.leaderboardTitle, children: r }),
                 o && /* @__PURE__ */ i(
-                  A,
+                  I,
                   {
                     sx: {
                       fontWeight: 400,
@@ -328,9 +330,9 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
                       fontSize: "1.25em",
                       color: E,
                       opacity: "60%",
-                      fontFamily: P
+                      fontFamily: w
                     },
-                    children: Ie(o)
+                    children: Ee(o)
                   }
                 )
               ]
@@ -339,8 +341,8 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         ]
       }
     ),
-    /* @__PURE__ */ i(Ee, { sx: s.tableContainer, children: /* @__PURE__ */ R(
-      Ae,
+    /* @__PURE__ */ i(Ie, { sx: s.tableContainer, children: /* @__PURE__ */ R(
+      Le,
       {
         variant: "outlined",
         hoverRow: !1,
@@ -349,43 +351,43 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         sx: s.table,
         children: [
           /* @__PURE__ */ i("thead", { children: /* @__PURE__ */ R("tr", { children: [
-            /* @__PURE__ */ i("th", { style: s.headerCellPosition, children: m || g ? "" : d("leaderboard.position") }),
-            /* @__PURE__ */ i("th", { style: s.headerCellName, children: d("leaderboard.name") }),
-            /* @__PURE__ */ i("th", { style: s.headerCellPoints, children: m || g ? "🎯" : d("leaderboard.points") })
+            /* @__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__ */ R("tbody", { children: [
-            h && !Q && /* @__PURE__ */ R("tr", { style: s.userRow, children: [
-              /* @__PURE__ */ i("td", { style: s.tableCellPosition, children: /* @__PURE__ */ R(A, { sx: s.positionText, children: [
+            T && !F && /* @__PURE__ */ R("tr", { style: s.userRow, children: [
+              /* @__PURE__ */ i("td", { style: s.tableCellPosition, children: /* @__PURE__ */ R(I, { sx: s.positionText, children: [
                 "#",
-                h.position
+                T.position
               ] }) }),
-              /* @__PURE__ */ i("td", { style: s.tableCellName, children: /* @__PURE__ */ R(I, { sx: s.nameCell, children: [
-                /* @__PURE__ */ i(te, { sx: s.leaderboardAvatar, children: /* @__PURE__ */ i(ee, { sx: s.avatarIcon }) }),
-                /* @__PURE__ */ i(A, { sx: s.nameText, children: d("leaderboard.you") })
+              /* @__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__ */ i("td", { style: s.tableCellPoints, children: /* @__PURE__ */ i(A, { sx: s.pointsText, children: h.points }) })
+              /* @__PURE__ */ i("td", { style: s.tableCellPoints, children: /* @__PURE__ */ i(I, { sx: s.pointsText, children: T.points }) })
             ] }),
-            e.map((b, H) => {
+            e.map((g, A) => {
               var N, V, Y, q;
-              const U = T === b.profileId, ue = U ? s.userRow : c == null ? void 0 : c[H + 1];
+              const M = S === g.profileId, ue = M ? 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(A, { sx: s.positionText, children: [
+                /* @__PURE__ */ i("td", { style: s.tableCellPosition, children: /* @__PURE__ */ R(I, { sx: s.positionText, children: [
                   "#",
-                  b.position
+                  g.position
                 ] }) }),
-                /* @__PURE__ */ i("td", { style: s.tableCellName, children: /* @__PURE__ */ R(I, { sx: s.nameCell, children: [
+                /* @__PURE__ */ i("td", { style: s.tableCellName, children: /* @__PURE__ */ R(L, { sx: s.nameCell, children: [
                   /* @__PURE__ */ i(
-                    te,
+                    ee,
                     {
-                      src: ((N = b.profileModel) == null ? void 0 : N.avatar) || void 0,
+                      src: ((N = g.profileModel) == null ? void 0 : N.avatar) || void 0,
                       sx: s.leaderboardAvatar,
-                      children: (V = b.profileModel) != null && V.avatar ? /* @__PURE__ */ i(se, {}) : /* @__PURE__ */ i(ee, { sx: s.avatarIcon })
+                      children: (V = g.profileModel) != null && V.avatar ? /* @__PURE__ */ i(se, {}) : /* @__PURE__ */ i(K, { sx: s.avatarIcon })
                     }
                   ),
-                  /* @__PURE__ */ i(A, { sx: s.nameText, children: U ? d("leaderboard.you") : ((Y = b.profileModel) == null ? void 0 : Y.nickname) || ((q = b.profileModel) == null ? void 0 : q.name) || d("leaderboard.anonymous") })
+                  /* @__PURE__ */ i(I, { sx: s.nameText, children: M ? c("leaderboard.you") : ((Y = g.profileModel) == null ? void 0 : Y.nickname) || ((q = g.profileModel) == null ? void 0 : q.name) || c("leaderboard.anonymous") })
                 ] }) }),
-                /* @__PURE__ */ i("td", { style: s.tableCellPoints, children: /* @__PURE__ */ i(A, { sx: s.pointsText, children: b.points }) })
-              ] }, b.profileId);
+                /* @__PURE__ */ i("td", { style: s.tableCellPoints, children: /* @__PURE__ */ i(I, { sx: s.pointsText, children: g.points }) })
+              ] }, g.profileId);
             })
           ] })
         ]
@@ -398,33 +400,33 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
   onChange: a,
   siblingCount: r = 1,
   boundaryCount: o = 1,
-  showFirstButton: g = !0,
+  showFirstButton: b = !0,
   showLastButton: y = !0,
-  size: c = "md",
-  disabled: d = !1,
-  isOverlayVariant: x = !1
+  size: d = "md",
+  disabled: c = !1,
+  isOverlayVariant: h = !1
 }) => {
-  const v = de(), f = (l) => {
+  const v = de(), u = (l) => {
     a && l >= 1 && l <= e && a(l);
-  }, u = (l, n) => {
-    const p = [];
-    for (let s = l; s <= n; s++) p.push(s);
-    return p;
-  }, P = (() => {
+  }, x = (l, n) => {
+    const m = [];
+    for (let s = l; s <= n; s++) m.push(s);
+    return m;
+  }, w = (() => {
     if (e <= 0) return [];
-    const l = u(1, Math.min(o, e)), n = u(
+    const l = x(1, Math.min(o, e)), n = x(
       Math.max(e - o + 1, o + 1),
       e
-    ), p = Math.max(o + 1, t - r), s = Math.min(e - o, t + r), h = [...l];
-    if (p > o + 1 && h.push("ellipsis-start"), p <= s)
-      for (let T = p; T <= s; T++)
-        h.push(T);
-    s < e - o && h.push("ellipsis-end");
-    for (const T of n)
-      h.includes(T) || h.push(T);
-    return h;
-  })(), S = c === "sm" ? "sm" : c === "lg" ? "lg" : "md", C = c === "sm" ? 16 : c === "lg" ? 24 : 20, w = (l = !1) => {
-    if (!x)
+    ), 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);
+    s < e - o && T.push("ellipsis-end");
+    for (const S of n)
+      T.includes(S) || T.push(S);
+    return T;
+  })(), p = d === "sm" ? "sm" : d === "lg" ? "lg" : "md", C = d === "sm" ? 16 : d === "lg" ? 24 : 20, P = (l = !1) => {
+    if (!h)
       return {
         borderRadius: "8px",
         minWidth: "32px",
@@ -453,8 +455,8 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         opacity: 0.5
       }
     };
-  }, m = () => {
-    if (!x)
+  }, f = () => {
+    if (!h)
       return {
         borderRadius: "8px",
         minWidth: "32px",
@@ -483,7 +485,7 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
     };
   };
   return /* @__PURE__ */ R(
-    I,
+    L,
     {
       sx: {
         display: "flex",
@@ -492,43 +494,43 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         flexWrap: "wrap"
       },
       children: [
-        g && /* @__PURE__ */ i(
-          $,
+        b && /* @__PURE__ */ i(
+          H,
           {
-            size: S,
+            size: p,
             variant: "plain",
             color: "neutral",
-            onClick: () => f(1),
-            disabled: d || t === 1,
-            sx: m(),
-            children: /* @__PURE__ */ i(ze, { size: C })
+            onClick: () => u(1),
+            disabled: c || t === 1,
+            sx: f(),
+            children: /* @__PURE__ */ i(Me, { size: C })
           }
         ),
         /* @__PURE__ */ i(
-          $,
+          H,
           {
-            size: S,
+            size: p,
             variant: "plain",
             color: "neutral",
-            onClick: () => f(t - 1),
-            disabled: d || t === 1,
-            sx: m(),
+            onClick: () => u(t - 1),
+            disabled: c || t === 1,
+            sx: f(),
             children: /* @__PURE__ */ i(Be, { size: C })
           }
         ),
-        P.map((l, n) => {
+        w.map((l, n) => {
           if (typeof l == "string" && l.startsWith("ellipsis"))
             return /* @__PURE__ */ i(
-              K,
+              te,
               {
-                size: S,
+                size: p,
                 variant: "plain",
                 color: "neutral",
                 disabled: !0,
                 sx: {
-                  ...w(!1),
+                  ...P(!1),
                   cursor: "default",
-                  "&.Mui-disabled": x ? {
+                  "&.Mui-disabled": h ? {
                     backgroundColor: "transparent",
                     color: v.colorSchemes.dark.textDisabled,
                     opacity: 0.5
@@ -541,49 +543,49 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
               },
               `${l}-${n}`
             );
-          const p = l === t;
+          const m = l === t;
           return /* @__PURE__ */ i(
-            K,
+            te,
             {
-              size: S,
-              variant: p ? "solid" : "plain",
+              size: p,
+              variant: m ? "solid" : "plain",
               color: "neutral",
-              onClick: () => f(l),
-              disabled: d,
-              sx: w(p),
+              onClick: () => u(l),
+              disabled: c,
+              sx: P(m),
               children: l
             },
             l
           );
         }),
         /* @__PURE__ */ i(
-          $,
+          H,
           {
-            size: S,
+            size: p,
             variant: "plain",
             color: "neutral",
-            onClick: () => f(t + 1),
-            disabled: d || t === e,
-            sx: m(),
+            onClick: () => u(t + 1),
+            disabled: c || t === e,
+            sx: f(),
             children: /* @__PURE__ */ i(Fe, { size: C })
           }
         ),
         y && /* @__PURE__ */ i(
-          $,
+          H,
           {
-            size: S,
+            size: p,
             variant: "plain",
             color: "neutral",
-            onClick: () => f(e),
-            disabled: d || t === e,
-            sx: m(),
-            children: /* @__PURE__ */ i(Me, { size: C })
+            onClick: () => u(e),
+            disabled: c || t === e,
+            sx: f(),
+            children: /* @__PURE__ */ i(ze, { size: C })
           }
         )
       ]
     }
   );
-}, B = "ALL", j = (e) => ({
+}, $ = "ALL", G = (e) => ({
   currentPage: e.currentPage,
   totalPages: e.numberOfPages,
   totalItems: e.totalItems,
@@ -638,7 +640,7 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
   const o = await t.loyalty.getLeaderboardForGame(e, { page: a, limit: r });
   return {
     leaderboard: Z(o.data),
-    pagination: j(o.meta.pagination)
+    pagination: G(o.meta.pagination)
   };
 }, Oe = async (e, t, a, r) => {
   const o = await t.loyalty.getLeaderboard(
@@ -647,7 +649,7 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
   );
   return {
     leaderboard: Z(o.data),
-    pagination: j(o.meta.pagination)
+    pagination: G(o.meta.pagination)
   };
 }, W = async (e, t, a, r) => {
   const o = await t.miniGames.getLeaderboardForClassicQuizzes({
@@ -657,162 +659,162 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
   });
   return {
     leaderboard: Z(o.data),
-    pagination: j(o.meta.pagination)
+    pagination: G(o.meta.pagination)
   };
 }, le = (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) => {
-  const o = a.toUpperCase() === "TEMPLATE" ? { rankType: "TEMPLATE", leaderboardIds: [e] } : { rankType: "GAME", gameType: a.toUpperCase(), leaderboardIds: [e] }, c = (await t.loyalty.getOwnRankings(o, !0)).data[0] ?? null;
-  return c ? {
-    position: c.position,
-    profileId: c.profileId,
-    profileModel: c.profileModel,
-    points: c.points
+  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,
+    profileId: d.profileId,
+    profileModel: d.profileModel,
+    points: d.points
   } : null;
 }, De = async (e, t, a) => {
-  const g = (await t.miniGames.getClassicQuizzesUserRanking(
+  const b = (await t.miniGames.getClassicQuizzesUserRanking(
     a,
     void 0,
     !0
   )).data.find((y) => y.classicQuizId === e) ?? null;
-  return g ? {
-    position: g.position,
+  return b ? {
+    position: b.position,
     profileId: a,
     profileModel: null,
-    points: g.points
+    points: b.points
   } : null;
 }, Xe = (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, g] = z({}), [y, c] = z(null), [d, x] = z(!1), [v, f] = z(!1), [u, E] = z(
+}, je = (e, t, a, r = 10) => {
+  const [o, b] = B({}), [y, d] = B(null), [c, h] = B(!1), [v, u] = B(!1), [x, E] = B(
     null
-  ), [P, S] = z(null);
-  F(() => {
-    const m = {
+  ), [w, p] = 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(() => []);
     Promise.all([
-      l(re(m.topX, t)),
-      l(oe(m.matchQuiz, t)),
-      l(ne(m.template, t)),
-      l(ae(m.classicQuiz, t))
+      l(re(f.topX, t)),
+      l(oe(f.matchQuiz, t)),
+      l(ne(f.template, t)),
+      l(ae(f.classicQuiz, t))
     ]).then((n) => {
-      const p = {};
+      const m = {};
       n.flat().forEach((s) => {
-        p[s.id] = s;
-      }), g(p);
+        m[s.id] = s;
+      }), b(m);
     });
-  }, [e, t]), F(() => {
+  }, [e, t]), Q(() => {
     ke(t).then(E);
-  }, [t]), F(() => {
-    if (!a || !u) {
-      S(null);
+  }, [t]), Q(() => {
+    if (!a || !x) {
+      p(null);
       return;
     }
-    let m = !1, l;
-    if (a === B) {
-      const n = e.map((p) => p.id);
-      l = t.miniGames.getClassicQuizzesUserRanking(u.id, void 0, !0).then((p) => {
-        const h = p.data.find((T) => n.includes(T.classicQuizId)) ?? null;
-        return h ? {
-          position: h.position,
-          profileId: u.id,
+    let f = !1, l;
+    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;
+        return T ? {
+          position: T.position,
+          profileId: x.id,
           profileModel: null,
-          points: h.points
+          points: T.points
         } : null;
       });
     } else {
-      const n = e.find((p) => p.id === a);
+      const n = e.find((m) => m.id === a);
       if (!n) return;
-      l = Xe(n, t, u.id);
+      l = Xe(n, t, x.id);
     }
     return l.then((n) => {
-      m || S(n);
+      f || p(n);
     }).catch(() => {
-      m || S(null);
+      f || p(null);
     }), () => {
-      m = !0;
+      f = !0;
     };
-  }, [a, e, t, u]), F(() => {
+  }, [a, e, t, x]), Q(() => {
     if (!a) return;
-    let m = !1;
-    return x(!0), f(!1), c(null), (async () => {
+    let f = !1;
+    return h(!0), u(!1), d(null), (async () => {
       try {
-        const n = e.length > 1 && e.every((b) => b.type.toUpperCase() === "CLASSIC_QUIZ");
-        if (a === B && n) {
-          const b = e.map((U) => U.id), H = await W(
-            b,
+        const n = e.length > 1 && e.every((g) => g.type.toUpperCase() === "CLASSIC_QUIZ");
+        if (a === $ && n) {
+          const g = e.map((M) => M.id), A = await W(
+            g,
             t,
             1,
             r
           );
-          m || c({
-            id: B,
-            title: B,
+          f || d({
+            id: $,
+            title: $,
             description: null,
             branding: null,
-            ...H
+            ...A
           });
           return;
         }
-        const p = e.find((b) => b.id === a);
-        if (!p) return;
-        const s = p.type.toUpperCase(), h = s === "TOP_X" ? re([a], t) : s === "MATCH_QUIZ" ? oe([a], t) : s === "TEMPLATE" ? ne([a], t) : ae([a], t), [T, Q] = await Promise.all([
-          le(p, t, 1, r),
-          h.catch(() => [])
+        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),
+          T.catch(() => [])
         ]);
-        if (!m) {
-          const b = Q[0];
-          c({
+        if (!f) {
+          const g = F[0];
+          d({
             id: a,
-            title: (b == null ? void 0 : b.title) || a,
-            description: (b == null ? void 0 : b.description) || null,
-            branding: (b == null ? void 0 : b.branding) || null,
-            ...T
+            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
           });
         }
       } catch (n) {
-        console.error("Failed to fetch leaderboard:", n), m || f(!0);
+        console.error("Failed to fetch leaderboard:", n), f || u(!0);
       } finally {
-        m || x(!1);
+        f || h(!1);
       }
     })(), () => {
-      m = !0;
+      f = !0;
     };
   }, [a, e, t, r]);
   const C = pe(
-    async (m) => {
+    async (f) => {
       if (a) {
-        x(!0);
+        h(!0);
         try {
           let l;
-          if (a === B) {
-            const n = e.map((p) => p.id);
-            l = await W(n, t, m, r);
+          if (a === $) {
+            const n = e.map((m) => m.id);
+            l = await W(n, t, f, r);
           } else {
-            const n = e.find((p) => p.id === a);
+            const n = e.find((m) => m.id === a);
             if (!n) return;
-            l = await le(n, t, m, r);
+            l = await le(n, t, f, r);
           }
-          c((n) => n ? { ...n, ...l } : null);
+          d((n) => n ? { ...n, ...l } : null);
         } catch (l) {
           console.error("Failed to fetch page:", l);
         } finally {
-          x(!1);
+          h(!1);
         }
       }
     },
     [a, e, t, r]
-  ), w = Object.fromEntries(
-    Object.entries(o).map(([m, l]) => [m, l.title])
+  ), P = Object.fromEntries(
+    Object.entries(o).map(([f, l]) => [f, l.title])
   );
-  return { data: y, entityTitles: w, loading: d, error: v, setPage: C, userRank: P };
-}, _ = "ALL", ie = ["TOP_X", "MATCH_QUIZ", "TEMPLATE", "CLASSIC_QUIZ"], je = (e, t) => {
+  return { data: y, entityTitles: P, loading: c, error: v, setPage: C, userRank: w };
+}, k = "ALL", ie = ["TOP_X", "MATCH_QUIZ", "TEMPLATE", "CLASSIC_QUIZ"], Ge = (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();
@@ -834,43 +836,45 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
   entities: e,
   sdk: t,
   pageSize: a,
-  rankStyles: r
+  rankStyles: r,
+  showOverallOnly: o = !1,
+  showHeading: b = !0
 }) => {
-  var s;
-  const { t: o } = D(), g = G(), y = X().surface, c = k(
-    () => je(e, a),
+  var g;
+  const { t: y } = D(), d = j(), c = X().surface, h = _(
+    () => Ge(e, a),
     [e, a]
-  ), d = k(
-    () => !c && e.length > 1 && e.every((h) => h.type.toUpperCase() === "CLASSIC_QUIZ"),
-    [e, c]
-  ), x = d ? _ : ((s = e[0]) == null ? void 0 : s.id) || "", [v, f] = z(x);
-  F(() => {
-    v === _ || e.some((T) => T.id === v) || f(x);
+  ), 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);
+  Q(() => {
+    E === k || e.some((M) => M.id === E) || w(x);
   }, [e]);
-  const { data: u, entityTitles: E, loading: P, error: S, setPage: C, userRank: w } = Ge(
-    c ? [] : e,
+  const { data: p, entityTitles: C, loading: P, error: f, setPage: l, userRank: n } = je(
+    h ? [] : e,
     t,
-    c ? "" : v,
+    h ? "" : E,
     a
-  ), m = k(() => {
-    if (c) return [];
-    const h = [];
-    return d && h.push({ id: _, label: o("leaderboard.overall") }), e.forEach((T) => {
-      h.push({
-        id: T.id,
-        label: E[T.id] ?? "",
-        type: T.type.toUpperCase()
+  ), m = _(() => {
+    if (h) return [];
+    const A = [];
+    return v && A.push({ id: k, label: y("leaderboard.overall") }), e.forEach((M) => {
+      A.push({
+        id: M.id,
+        label: C[M.id] ?? "",
+        type: M.type.toUpperCase()
       });
-    }), h;
-  }, [e, d, o, E, c]), l = e.every((h) => E[h.id] !== void 0), n = !c && (e.length > 1 || d) && l, p = (u == null ? void 0 : u.pagination) || null;
-  return c ? /* @__PURE__ */ i(
+    }), 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(
     J,
     {
       variant: "error",
       title: "Configuration Error",
-      message: c
+      message: h
     }
-  ) : S ? /* @__PURE__ */ i(
+  ) : f ? /* @__PURE__ */ i(
     J,
     {
       variant: "error",
@@ -878,77 +882,77 @@ const Ue = (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__ */ R(
-    I,
+    L,
     {
       sx: {
         display: "flex",
         flexDirection: "column",
-        gap: g.md,
-        backgroundColor: y,
-        padding: g.md
+        gap: d.md,
+        backgroundColor: c,
+        padding: d.md
       },
       children: [
-        n && /* @__PURE__ */ i(
+        T && /* @__PURE__ */ i(
           $e,
           {
             options: m,
-            selectedId: v,
-            onChange: f
+            selectedId: E,
+            onChange: w
           }
         ),
         /* @__PURE__ */ i(
           Qe,
           {
-            leaderboard: P ? null : (u == null ? void 0 : u.leaderboard) || null,
-            userRank: P ? null : w,
-            showHeading: !n,
-            title: (u == null ? void 0 : u.title) || null,
-            description: (u == null ? void 0 : u.description) || null,
-            brandingColors: (u == null ? void 0 : u.branding) || null,
+            leaderboard: P ? null : (p == null ? void 0 : p.leaderboard) || null,
+            userRank: P ? null : n,
+            showHeading: b && !T,
+            title: F,
+            description: (p == null ? void 0 : p.description) || null,
+            brandingColors: (p == null ? void 0 : p.branding) || null,
             rankStyles: r
           }
         ),
-        !P && p && p.totalPages > 1 && /* @__PURE__ */ i(
+        !P && S && S.totalPages > 1 && /* @__PURE__ */ i(
           He,
           {
-            count: p.totalPages,
-            page: p.currentPage,
-            onChange: C
+            count: S.totalPages,
+            page: S.currentPage,
+            onChange: l
           }
         )
       ]
     }
   );
 }, Ne = (e) => {
-  var u;
-  const [t, a] = L.useState(!1), [r, o] = L.useState(!1), g = L.useRef(
+  var x;
+  const [t, a] = z.useState(!1), [r, o] = z.useState(!1), b = z.useRef(
     `leaderboard-shadow-root-${Math.random().toString(36).substring(2, 11)}`
-  ), y = L.useRef(null), c = L.useRef(null), d = L.useRef(null), x = L.useRef(null);
-  L.useEffect(() => {
+  ), y = z.useRef(null), d = z.useRef(null), c = z.useRef(null), h = z.useRef(null);
+  z.useEffect(() => {
     be(e.language || "en").finally(() => o(!0));
-  }, [e.language]), L.useEffect(() => {
+  }, [e.language]), z.useEffect(() => {
     if (y.current)
-      return y.current.shadowRoot ? (c.current = y.current.shadowRoot, d.current = c.current.getElementById(
-        g.current
-      ), d.current || (d.current = document.createElement("div"), d.current.id = g.current, c.current.appendChild(d.current))) : (c.current = y.current.attachShadow({ mode: "open" }), d.current = document.createElement("div"), d.current.id = g.current, c.current.appendChild(d.current)), x.current || (x.current = ye({
+      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: c.current
+        container: d.current
       })), a(!0), () => {
         a(!1);
       };
   }, []);
-  const v = /* @__PURE__ */ i(I, { ref: y }), f = t && r && d.current && x.current ? Pe(
-    /* @__PURE__ */ i(xe, { value: x.current, children: /* @__PURE__ */ i(Ce, { containerRef: y, children: /* @__PURE__ */ i(
+  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,
       {
         customTheme: e.themeOptions,
-        mode: (u = e.themeOptions) == null ? void 0 : u.mode,
-        shadowRootElement: d.current,
+        mode: (x = e.themeOptions) == null ? void 0 : x.mode,
+        shadowRootElement: c.current,
         children: /* @__PURE__ */ i(
           Te,
           {
-            shadowRootElement: d.current,
+            shadowRootElement: c.current,
             leadPhoneCountryCode: null,
             language: e.language,
             optionsLayout: null,
@@ -957,13 +961,13 @@ const Ue = (e) => e.split("_").map((t) => t.charAt(0) + t.slice(1).toLowerCase()
         )
       }
     ) }) }),
-    d.current
+    c.current
   ) : null;
   return /* @__PURE__ */ R(se, { children: [
     v,
-    f
+    u
   ] });
-}, Ve = (e) => /* @__PURE__ */ i(Ne, { ...e, children: /* @__PURE__ */ i(Ze, { ...e }) }), dt = Ve;
+}, Ve = (e) => /* @__PURE__ */ i(Ne, { ...e, children: /* @__PURE__ */ i(Ze, { ...e }) }), pt = Ve;
 export {
-  dt as Leaderboard
+  pt as Leaderboard
 };