@streamlayer/react 0.30.1 → 0.30.3

package/lib/dist/es/gamification-feature.js

@@ -1,6 +1,6 @@
 import { jsxs as I, jsx as r, Fragment as E } from "react/jsx-runtime";
-import { s as a, i as j, o as De, a as Se, b as ze, Q as x, c as q, d as $, E as L, r as xe, e as Ye, f as We, n as Fe, w as Ve, u as w, A as Be, O as He, P as F, g as Ge, h as ee, j as Ze, k as Je } from "./masters.js";
-import U, { useRef as C, useState as R, useCallback as P, useEffect as Ke, useLayoutEffect as Xe, useMemo as B, createElement as G, PureComponent as je } from "react";
+import { s as a, i as j, o as Se, a as ze, b as xe, Q as x, c as _, d as b, E as L, r as se, e as Ye, f as We, n as Fe, w as Ve, u as w, A as Be, O as He, P as W, g as Ge, h as ee, j as Ze, k as Je } from "./masters.js";
+import U, { useRef as C, useState as R, useCallback as q, useEffect as Ke, useLayoutEffect as Xe, useMemo as V, createElement as G, PureComponent as je } from "react";
 const et = /* @__PURE__ */ a("div")({
   name: "Container",
   class: "c1vwopgc",
@@ -26,7 +26,7 @@ const et = /* @__PURE__ */ a("div")({
   class: "cvsl7l3",
   propsAsIs: !0
 }), ke = ({ type: e, close: t, label: n }) => {
-  const s = e ? De[e] : { label: n, iconName: void 0 };
+  const s = e ? Se[e] : { label: n, iconName: void 0 };
   return /* @__PURE__ */ I(et, { children: [
     /* @__PURE__ */ I(tt, { children: [
       (s == null ? void 0 : s.iconName) && /* @__PURE__ */ r(st, { name: s.iconName }),
@@ -46,7 +46,7 @@ const et = /* @__PURE__ */ a("div")({
   name: "Indicator",
   class: "i1fbnvpb",
   propsAsIs: !1
-}), ae = ({ indicator: e, title: t }) => /* @__PURE__ */ I(lt, { children: [
+}), le = ({ indicator: e, title: t }) => /* @__PURE__ */ I(lt, { children: [
   /* @__PURE__ */ r(ct, { children: t }),
   /* @__PURE__ */ r(dt, { children: e })
 ] }), ut = /* @__PURE__ */ a("div")({
@@ -61,7 +61,7 @@ const et = /* @__PURE__ */ a("div")({
   name: "Title",
   class: "t8s05oq",
   propsAsIs: !1
-}), V = ({ indicator: e, title: t }) => /* @__PURE__ */ I(ut, { children: [
+}), F = ({ indicator: e, title: t }) => /* @__PURE__ */ I(ut, { children: [
   /* @__PURE__ */ r(pt, { children: e }),
   /* @__PURE__ */ r(mt, { children: t })
 ] }), ht = /* @__PURE__ */ a("div")({
@@ -147,7 +147,7 @@ const et = /* @__PURE__ */ a("div")({
   /* @__PURE__ */ r(It, { children: /* @__PURE__ */ I(gt, { children: [
     /* @__PURE__ */ I(Ot, { children: [
       e && /* @__PURE__ */ r(Mt, { alt: "avatar", src: e }),
-      !e && /* @__PURE__ */ r(kt, { children: Se(t || "") })
+      !e && /* @__PURE__ */ r(kt, { children: ze(t || "") })
     ] }),
     /* @__PURE__ */ I(vt, { children: [
       /* @__PURE__ */ r(yt, { children: t }),
@@ -155,7 +155,7 @@ const et = /* @__PURE__ */ a("div")({
         /* @__PURE__ */ I(Tt, { children: [
           /* @__PURE__ */ r(At, { alt: "rank-icon", src: wt }),
           /* @__PURE__ */ I(Dt, { children: [
-            ze(n),
+            xe(n),
             /* @__PURE__ */ r(St, { children: "PTS" })
           ] })
         ] }),
@@ -170,32 +170,32 @@ const et = /* @__PURE__ */ a("div")({
   ] }) }),
   /* @__PURE__ */ I(ft, { children: [
     /* @__PURE__ */ I(xt, { children: [
-      /* @__PURE__ */ r(ae, { indicator: s || 0, title: "Friends rank" }),
-      /* @__PURE__ */ r(ae, { indicator: i || 0, title: "Global rank" })
+      /* @__PURE__ */ r(le, { indicator: s || 0, title: "Friends rank" }),
+      /* @__PURE__ */ r(le, { indicator: i || 0, title: "Global rank" })
     ] }),
     /* @__PURE__ */ I(jt, { children: [
-      /* @__PURE__ */ r(V, { indicator: c || 0, title: "Win streak" }),
-      /* @__PURE__ */ r(V, { indicator: l || 0, title: "Correct" }),
-      /* @__PURE__ */ r(V, { indicator: m || 0, title: "Incorrect" }),
-      /* @__PURE__ */ r(V, { indicator: `${f || 0}%`, title: "Succ. rate" })
+      /* @__PURE__ */ r(F, { indicator: c || 0, title: "Win streak" }),
+      /* @__PURE__ */ r(F, { indicator: l || 0, title: "Correct" }),
+      /* @__PURE__ */ r(F, { indicator: m || 0, title: "Incorrect" }),
+      /* @__PURE__ */ r(F, { indicator: `${f || 0}%`, title: "Succ. rate" })
     ] })
   ] })
 ] }), Ct = /* @__PURE__ */ a("div")({
   name: "Container",
   class: "c38csyt",
   propsAsIs: !1
-}), bt = /* @__PURE__ */ a("div")({
+}), $t = /* @__PURE__ */ a("div")({
   name: "Title",
   class: "ty221rx",
   propsAsIs: !1
-}), $t = /* @__PURE__ */ a("div")({
+}), bt = /* @__PURE__ */ a("div")({
   name: "Description",
   class: "dlaj9xp",
   propsAsIs: !1
 }), Et = ({ title: e, description: t }) => /* @__PURE__ */ I(Ct, { children: [
   /* @__PURE__ */ r(j, { name: "icon-check-circle" }),
-  /* @__PURE__ */ r(bt, { children: e }),
-  /* @__PURE__ */ r($t, { children: t })
+  /* @__PURE__ */ r($t, { children: e }),
+  /* @__PURE__ */ r(bt, { children: t })
 ] }), Lt = /* @__PURE__ */ a("div")({
   name: "Container",
   class: "c16sbdnm",
@@ -204,11 +204,11 @@ const et = /* @__PURE__ */ a("div")({
   name: "IconPrediction",
   class: "ibhorgl",
   propsAsIs: !0
-}), le = /* @__PURE__ */ a("div")({
+}), ce = /* @__PURE__ */ a("div")({
   name: "FeedbackIconWrap",
   class: "f1g20ja7",
   propsAsIs: !1
-}), ce = /* @__PURE__ */ a("div")({
+}), de = /* @__PURE__ */ a("div")({
   name: "FeedbackHeader",
   class: "f455ozj",
   propsAsIs: !1
@@ -233,14 +233,14 @@ const et = /* @__PURE__ */ a("div")({
   questionStatus: c
 }) => {
   const l = n && (s === x.TRIVIA || s === x.PREDICTION);
-  if (!l && c !== q.RESOLVED)
+  if (!l && c !== _.RESOLVED)
     return null;
   const m = s === x.PREDICTION && !i, d = t ? "correct" : "incorrect", f = t ? e.correctFeedback : e.incorrectFeedback;
   return /* @__PURE__ */ I(Lt, { "data-isPrediction": m, children: [
-    c === q.RESOLVED && s === x.TRIVIA && !n && /* @__PURE__ */ I(E, { children: [
-      /* @__PURE__ */ r(le, { children: /* @__PURE__ */ r(j, { name: "questionExpired" }) }),
+    c === _.RESOLVED && s === x.TRIVIA && !n && /* @__PURE__ */ I(E, { children: [
+      /* @__PURE__ */ r(ce, { children: /* @__PURE__ */ r(j, { name: "questionExpired" }) }),
       /* @__PURE__ */ I("div", { children: [
-        /* @__PURE__ */ r(ce, { children: /* @__PURE__ */ r(Z, { children: "Question Expired" }) }),
+        /* @__PURE__ */ r(de, { children: /* @__PURE__ */ r(Z, { children: "Question Expired" }) }),
         /* @__PURE__ */ r(_t, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
       ] })
     ] }),
@@ -249,8 +249,8 @@ const et = /* @__PURE__ */ a("div")({
       /* @__PURE__ */ r(Z, { children: "Stay tuned to see if your prediction was correct." })
     ] }),
     l && i && /* @__PURE__ */ I(E, { children: [
-      /* @__PURE__ */ r(le, { "data-feedbackType": d, children: /* @__PURE__ */ r(j, { name: d }) }),
-      /* @__PURE__ */ r("div", { children: /* @__PURE__ */ I(ce, { children: [
+      /* @__PURE__ */ r(ce, { "data-feedbackType": d, children: /* @__PURE__ */ r(j, { name: d }) }),
+      /* @__PURE__ */ r("div", { children: /* @__PURE__ */ I(de, { children: [
         /* @__PURE__ */ r(Ut, { "data-feedbackType": d, children: f == null ? void 0 : f.title }),
         /* @__PURE__ */ r(Z, { children: f == null ? void 0 : f.description })
       ] }) })
@@ -320,12 +320,12 @@ const et = /* @__PURE__ */ a("div")({
   name: "CheckIcon",
   class: "cu9kmlb",
   propsAsIs: !0
-}), de = {
-  [$.CENTERED]: (e) => /* @__PURE__ */ r(Kt, { alt: "option-icon", src: e }),
-  [$.TRANSPARENT]: (e) => /* @__PURE__ */ r(Gt, { children: /* @__PURE__ */ r(Zt, { style: { backgroundImage: `url(${e})` } }) }),
-  [$.ROUNDED]: (e) => /* @__PURE__ */ r(en, { alt: "option-icon", src: e }),
-  [$.NONE]: () => null,
-  [$.UNSET]: () => null
+}), ue = {
+  [b.CENTERED]: (e) => /* @__PURE__ */ r(Kt, { alt: "option-icon", src: e }),
+  [b.TRANSPARENT]: (e) => /* @__PURE__ */ r(Gt, { children: /* @__PURE__ */ r(Zt, { style: { backgroundImage: `url(${e})` } }) }),
+  [b.ROUNDED]: (e) => /* @__PURE__ */ r(en, { alt: "option-icon", src: e }),
+  [b.NONE]: () => null,
+  [b.UNSET]: () => null
 }, an = ({ questionType: e, hasCorrectAnswer: t, correct: n, youVoted: s, questionVoted: i }) => {
   if (e === x.POLL && s)
     return "correct";
@@ -342,7 +342,7 @@ const et = /* @__PURE__ */ a("div")({
   correct: n,
   hasCorrectAnswer: s,
   questionStatus: i
-}) => e === x.TRIVIA ? t && n : e === x.PREDICTION ? t && n && s || i === q.RESOLVED && n : !1, cn = (e) => {
+}) => e === x.TRIVIA ? t && n : e === x.PREDICTION ? t && n && s || i === _.RESOLVED && n : !1, cn = (e) => {
   var t;
   const {
     // option props
@@ -355,14 +355,14 @@ const et = /* @__PURE__ */ a("div")({
     youSelected: m,
     questionVoted: d,
     // ToDo: Figure out why imageMode is not in the response, and delete default value
-    imageMode: f = $.ROUNDED,
+    imageMode: f = b.ROUNDED,
     answerTimeExpired: A,
     questionStatus: v,
     isLoading: g,
     questionType: T,
     correct: D,
     hasCorrectAnswer: o
-  } = e, u = an(e), p = ln({ questionType: T, questionVoted: d, correct: D, hasCorrectAnswer: o, questionStatus: v }), h = d || v === q.RESOLVED && T === x.PREDICTION;
+  } = e, u = an(e), p = ln({ questionType: T, questionVoted: d, correct: D, hasCorrectAnswer: o, questionStatus: v }), h = d || v === _.RESOLVED && T === x.PREDICTION;
   return /* @__PURE__ */ I(
     Vt,
     {
@@ -374,7 +374,7 @@ const et = /* @__PURE__ */ a("div")({
       children: [
         h && /* @__PURE__ */ r(Bt, { "data-answerState": u, style: { width: `${c}%` } }),
         /* @__PURE__ */ I(Ht, { children: [
-          s && ((t = de[f]) == null ? void 0 : t.call(de, s)),
+          s && ((t = ue[f]) == null ? void 0 : t.call(ue, s)),
           /* @__PURE__ */ r(tn, { children: i }),
           h && /* @__PURE__ */ I(nn, { children: [
             p && /* @__PURE__ */ r(on, { name: "selected" }),
@@ -388,7 +388,7 @@ const et = /* @__PURE__ */ a("div")({
     }
   );
 };
-var ue = typeof window > "u" ? Ke : Xe, dn = ({ isPlaying: e, duration: t, startAt: n = 0, updateInterval: s = 0, onComplete: i, onUpdate: c }) => {
+var pe = typeof window > "u" ? Ke : Xe, dn = ({ isPlaying: e, duration: t, startAt: n = 0, updateInterval: s = 0, onComplete: i, onUpdate: c }) => {
   let [l, m] = R(n), d = C(0), f = C(n), A = C(n * -1e3), v = C(null), g = C(null), T = C(null), D = (p) => {
     let h = p / 1e3;
     if (g.current === null) {
@@ -401,27 +401,27 @@ var ue = typeof window > "u" ? Ke : Xe, dn = ({ isPlaying: e, duration: t, start
     m(z ? t : N), z || (v.current = requestAnimationFrame(D));
   }, o = () => {
     v.current && cancelAnimationFrame(v.current), T.current && clearTimeout(T.current), g.current = null;
-  }, u = P((p) => {
+  }, u = q((p) => {
     o(), d.current = 0;
     let h = typeof p == "number" ? p : n;
     f.current = h, m(h), e && (v.current = requestAnimationFrame(D));
   }, [e, n]);
-  return ue(() => {
+  return pe(() => {
     if (c == null || c(l), t && l >= t) {
       A.current += t * 1e3;
       let { shouldRepeat: p = !1, delay: h = 0, newStartAt: M } = (i == null ? void 0 : i(A.current / 1e3)) || {};
       p && (T.current = setTimeout(() => u(M), h * 1e3));
     }
-  }, [l, t]), ue(() => (e && (v.current = requestAnimationFrame(D)), o), [e, t, s]), { elapsedTime: l, reset: u };
+  }, [l, t]), pe(() => (e && (v.current = requestAnimationFrame(D)), o), [e, t, s]), { elapsedTime: l, reset: u };
 }, un = (e, t, n) => {
   let s = e / 2, i = t / 2, c = s - i, l = 2 * c, m = n === "clockwise" ? "1,0" : "0,1", d = 2 * Math.PI * c;
   return { path: `m ${s},${i} a ${c},${c} 0 ${m} 0,${l} a ${c},${c} 0 ${m} 0,-${l}`, pathLength: d };
-}, pe = (e, t) => e === 0 || e === t ? 0 : typeof t == "number" ? e - t : 0, pn = (e) => ({ position: "relative", width: e, height: e }), mn = { display: "flex", justifyContent: "center", alignItems: "center", position: "absolute", left: 0, top: 0, width: "100%", height: "100%" }, Ce = (e, t, n, s, i) => {
+}, me = (e, t) => e === 0 || e === t ? 0 : typeof t == "number" ? e - t : 0, pn = (e) => ({ position: "relative", width: e, height: e }), mn = { display: "flex", justifyContent: "center", alignItems: "center", position: "absolute", left: 0, top: 0, width: "100%", height: "100%" }, Ce = (e, t, n, s, i) => {
   if (s === 0)
     return t;
   let c = (i ? s - e : e) / s;
   return t + n * c;
-}, me = (e) => {
+}, he = (e) => {
   var t, n;
   return (n = (t = e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (s, i, c, l) => `#${i}${i}${c}${c}${l}${l}`).substring(1).match(/.{2}/g)) == null ? void 0 : t.map((s) => parseInt(s, 16))) != null ? n : [];
 }, hn = (e, t) => {
@@ -434,43 +434,43 @@ var ue = typeof window > "u" ? Ke : Xe, dn = ({ isPlaying: e, duration: t, start
     return s[0];
   if (!c)
     return s[l];
-  let m = i[l] - t, d = i[l] - i[l + 1], f = me(s[l]), A = me(s[l + 1]), v = !!e.isGrowing;
+  let m = i[l] - t, d = i[l] - i[l + 1], f = he(s[l]), A = he(s[l + 1]), v = !!e.isGrowing;
   return `rgb(${f.map((g, T) => Ce(m, g, A[T] - g, d, v) | 0).join(",")})`;
 }, In = (e) => {
-  let { duration: t, initialRemainingTime: n, updateInterval: s, size: i = 180, strokeWidth: c = 12, trailStrokeWidth: l, isPlaying: m = !1, isGrowing: d = !1, rotation: f = "clockwise", onComplete: A, onUpdate: v } = e, g = C(), T = Math.max(c, l ?? 0), { path: D, pathLength: o } = un(i, T, f), { elapsedTime: u } = dn({ isPlaying: m, duration: t, startAt: pe(t, n), updateInterval: s, onUpdate: typeof v == "function" ? (h) => {
+  let { duration: t, initialRemainingTime: n, updateInterval: s, size: i = 180, strokeWidth: c = 12, trailStrokeWidth: l, isPlaying: m = !1, isGrowing: d = !1, rotation: f = "clockwise", onComplete: A, onUpdate: v } = e, g = C(), T = Math.max(c, l ?? 0), { path: D, pathLength: o } = un(i, T, f), { elapsedTime: u } = dn({ isPlaying: m, duration: t, startAt: me(t, n), updateInterval: s, onUpdate: typeof v == "function" ? (h) => {
     let M = Math.ceil(t - h);
     M !== g.current && (g.current = M, v(M));
   } : void 0, onComplete: typeof A == "function" ? (h) => {
     var M;
     let { shouldRepeat: y, delay: N, newInitialRemainingTime: S } = (M = A(h)) != null ? M : {};
     if (y)
-      return { shouldRepeat: y, delay: N, newStartAt: pe(t, S) };
+      return { shouldRepeat: y, delay: N, newStartAt: me(t, S) };
   } : void 0 }), p = t - u;
   return { elapsedTime: u, path: D, pathLength: o, remainingTime: Math.ceil(p), rotation: f, size: i, stroke: hn(e, p), strokeDashoffset: Ce(u, 0, o, t, d), strokeWidth: c };
-}, be = (e) => {
+}, $e = (e) => {
   let { children: t, strokeLinecap: n, trailColor: s, trailStrokeWidth: i } = e, { path: c, pathLength: l, stroke: m, strokeDashoffset: d, remainingTime: f, elapsedTime: A, size: v, strokeWidth: g } = In(e);
   return U.createElement("div", { style: pn(v) }, U.createElement("svg", { viewBox: `0 0 ${v} ${v}`, width: v, height: v, xmlns: "http://www.w3.org/2000/svg" }, U.createElement("path", { d: c, fill: "none", stroke: s ?? "#d9d9d9", strokeWidth: i ?? g }), U.createElement("path", { d: c, fill: "none", stroke: m, strokeLinecap: n ?? "round", strokeWidth: g, strokeDasharray: l, strokeDashoffset: d })), typeof t == "function" && U.createElement("div", { style: mn }, t({ remainingTime: f, elapsedTime: A, color: m })));
 };
-be.displayName = "CountdownCircleTimer";
+$e.displayName = "CountdownCircleTimer";
 const fn = [L.PRIMARY_GREEN1, L.SECONDARY_RED1, L.SECONDARY_RED1], gn = [10, 10, 0], Mn = /* @__PURE__ */ a("div")({
   name: "RemainingTime",
   class: "r165427",
   propsAsIs: !1
-}), vn = L.SECONDARY_GREEN6, he = L.SECONDARY_RED3, yn = L.NEUTRALS_GRAY3, Nn = ({
+}), vn = L.SECONDARY_GREEN6, Ie = L.SECONDARY_RED3, yn = L.NEUTRALS_GRAY3, Nn = ({
   isPlaying: e = !0,
   duration: t = 30,
   onTimerExpired: n
 }) => {
-  const [s, i] = R(t > 10 ? vn : he), c = ({
+  const [s, i] = R(t > 10 ? vn : Ie), c = ({
     remainingTime: d
   }) => /* @__PURE__ */ r(Mn, {
     children: d
-  }), l = P(() => {
+  }), l = q(() => {
     n == null || n(), i(yn);
-  }, [n, i]), m = P((d) => {
-    d === 10 && i(he);
+  }, [n, i]), m = q((d) => {
+    d === 10 && i(Ie);
   }, [i]);
-  return /* @__PURE__ */ r(be, {
+  return /* @__PURE__ */ r($e, {
     isPlaying: e,
     duration: t,
     colors: fn,
@@ -525,7 +525,7 @@ const fn = [L.PRIMARY_GREEN1, L.SECONDARY_RED1, L.SECONDARY_RED1], gn = [10, 10,
   s && /* @__PURE__ */ r(Nn, { isPlaying: n, onTimerExpired: i })
 ] }), wn = ({ openedQuestion: e, vote: t, close: n }) => {
   var s;
-  const i = e.subject, c = e.type, l = (s = e.options) == null ? void 0 : s.options, [m, d] = R(!1), [f, A] = R(!1), [v, g] = R(""), T = e == null ? void 0 : e.id, D = P(
+  const i = e.subject, c = e.type, l = (s = e.options) == null ? void 0 : s.options, [m, d] = R(!1), [f, A] = R(!1), [v, g] = R(""), T = e == null ? void 0 : e.id, D = q(
     async (y) => {
       if (T) {
         const N = y.currentTarget.value;
@@ -533,15 +533,15 @@ const fn = [L.PRIMARY_GREEN1, L.SECONDARY_RED1, L.SECONDARY_RED1], gn = [10, 10,
       }
     },
     [T, g, t]
-  ), o = P(() => {
+  ), o = q(() => {
     d(!0), setTimeout(n, 3e3);
-  }, [n]), u = B(
+  }, [n]), u = V(
     () => e == null ? void 0 : e.answers.find((y) => y.youVoted === !0),
     [e]
-  ), p = B(
+  ), p = V(
     () => !!(e != null && e.answers.find((y) => y.correct === !0)),
     [e]
-  ), h = B(() => e ? e.answers.map((y) => ({
+  ), h = V(() => e ? e.answers.map((y) => ({
     ...y,
     questionVoted: !!u,
     youSelected: v === y.id,
@@ -553,7 +553,7 @@ const fn = [L.PRIMARY_GREEN1, L.SECONDARY_RED1, L.SECONDARY_RED1], gn = [10, 10,
     // ToDo: Figure out why imageMode is not in the response
     onVote: D
   })) : [], [p, m, f, e, u, D, v]), M = l && (l.case === "trivia" || l.case === "prediction") ? l.value : void 0;
-  return /* @__PURE__ */ r(xe, { "data-question-header": "true", children: /* @__PURE__ */ r(Pt, { children: /* @__PURE__ */ I(Yt, { children: [
+  return /* @__PURE__ */ r(se, { "data-question-header": "true", children: /* @__PURE__ */ r(Pt, { children: /* @__PURE__ */ I(Yt, { children: [
     M && /* @__PURE__ */ r(
       qt,
       {
@@ -589,11 +589,11 @@ const fn = [L.PRIMARY_GREEN1, L.SECONDARY_RED1, L.SECONDARY_RED1], gn = [10, 10,
   name: "Container",
   class: "cgn5uen",
   propsAsIs: !1
-}), bn = /* @__PURE__ */ a("div")({
+}), $n = /* @__PURE__ */ a("div")({
   name: "Content",
   class: "c1px8nt6",
   propsAsIs: !1
-}), $n = /* @__PURE__ */ a("h3")({
+}), bn = /* @__PURE__ */ a("h3")({
   name: "Title",
   class: "t5et2jt",
   propsAsIs: !1
@@ -605,8 +605,8 @@ const fn = [L.PRIMARY_GREEN1, L.SECONDARY_RED1, L.SECONDARY_RED1], gn = [10, 10,
   name: "DateWrap",
   class: "dd3lh3p",
   propsAsIs: !1
-}), $e = ({ created: e, title: t, instantView: n }) => {
-  const s = B(() => {
+}), be = ({ created: e, title: t, instantView: n }) => {
+  const s = V(() => {
     if (e) {
       const i = new Date(e);
       if (Ye(i))
@@ -624,8 +624,8 @@ const fn = [L.PRIMARY_GREEN1, L.SECONDARY_RED1, L.SECONDARY_RED1], gn = [10, 10,
       s.time
     ] }),
     (n == null ? void 0 : n.video) && /* @__PURE__ */ r(Ve, { source: n.video.url, poster: n.video.thumbnailUrl }),
-    /* @__PURE__ */ I(bn, { children: [
-      /* @__PURE__ */ r($n, { children: (n == null ? void 0 : n.heading) || t }),
+    /* @__PURE__ */ I($n, { children: [
+      /* @__PURE__ */ r(bn, { children: (n == null ? void 0 : n.heading) || t }),
       /* @__PURE__ */ r(En, { children: n == null ? void 0 : n.body })
     ] })
   ] });
@@ -638,7 +638,7 @@ const fn = [L.PRIMARY_GREEN1, L.SECONDARY_RED1, L.SECONDARY_RED1], gn = [10, 10,
   class: "w19zie3h",
   propsAsIs: !1
 }), Un = ({ instantView: e, ...t }) => /* @__PURE__ */ I(Rn, { children: [
-  /* @__PURE__ */ r($e, { instantView: e, ...t }),
+  /* @__PURE__ */ r(be, { instantView: e, ...t }),
   (e == null ? void 0 : e.webLink) && /* @__PURE__ */ I(Qn, { href: e == null ? void 0 : e.webLink.url, target: "_blank", children: [
     "Explore more of the Masters History",
     /* @__PURE__ */ r(j, { name: "icon-external-link" })
@@ -706,14 +706,14 @@ const fn = [L.PRIMARY_GREEN1, L.SECONDARY_RED1, L.SECONDARY_RED1], gn = [10, 10,
   class: "tspsaas",
   propsAsIs: !1
 });
-var _ = /* @__PURE__ */ ((e) => (e.HOME = "home", e.LEADERBOARD = "leaderboard", e))(_ || {});
-const Ie = ({ title: e, active: t, onClick: n }) => /* @__PURE__ */ r(Vn, { onClick: n, "data-selected": t, children: /* @__PURE__ */ r(Bn, { children: e }) }), Hn = ({ activePage: e = "home", toggleActivePage: t }) => /* @__PURE__ */ r(Wn, { children: /* @__PURE__ */ I(Fn, { "data-position": e === "home" ? "left" : "right", children: [
-  /* @__PURE__ */ r(Ie, { title: "Home", active: e === "home", onClick: () => t(
+var B = /* @__PURE__ */ ((e) => (e.HOME = "home", e.LEADERBOARD = "leaderboard", e))(B || {});
+const fe = ({ title: e, active: t, onClick: n }) => /* @__PURE__ */ r(Vn, { onClick: n, "data-selected": t, children: /* @__PURE__ */ r(Bn, { children: e }) }), Hn = ({ activePage: e = "home", toggleActivePage: t }) => /* @__PURE__ */ r(Wn, { children: /* @__PURE__ */ I(Fn, { "data-position": e === "home" ? "left" : "right", children: [
+  /* @__PURE__ */ r(fe, { title: "Home", active: e === "home", onClick: () => t(
     "home"
     /* HOME */
   ) }),
   /* @__PURE__ */ r(
-    Ie,
+    fe,
     {
       title: "Leader Board",
       active: e === "leaderboard",
@@ -734,7 +734,7 @@ function te() {
     return e;
   }, te.apply(this, arguments);
 }
-function fe(e) {
+function ge(e) {
   if (e === void 0)
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   return e;
@@ -747,11 +747,11 @@ function ne(e, t) {
 function Gn(e, t) {
   e.prototype = Object.create(t.prototype), e.prototype.constructor = e, ne(e, t);
 }
-var ge = Number.isNaN || function(t) {
+var Me = Number.isNaN || function(t) {
   return typeof t == "number" && t !== t;
 };
 function Zn(e, t) {
-  return !!(e === t || ge(e) && ge(t));
+  return !!(e === t || Me(e) && Me(t));
 }
 function Jn(e, t) {
   if (e.length !== t.length)
@@ -771,18 +771,18 @@ function J(e, t) {
   }
   return l;
 }
-var Kn = typeof performance == "object" && typeof performance.now == "function", Me = Kn ? function() {
+var Kn = typeof performance == "object" && typeof performance.now == "function", ve = Kn ? function() {
   return performance.now();
 } : function() {
   return Date.now();
 };
-function ve(e) {
+function ye(e) {
   cancelAnimationFrame(e.id);
 }
 function Xn(e, t) {
-  var n = Me();
+  var n = ve();
   function s() {
-    Me() - n >= t ? e.call(null) : i.id = requestAnimationFrame(s);
+    ve() - n >= t ? e.call(null) : i.id = requestAnimationFrame(s);
   }
   var i = {
     id: requestAnimationFrame(s)
@@ -790,22 +790,22 @@ function Xn(e, t) {
   return i;
 }
 var K = -1;
-function ye(e) {
+function Ne(e) {
   if (e === void 0 && (e = !1), K === -1 || e) {
     var t = document.createElement("div"), n = t.style;
     n.width = "50px", n.height = "50px", n.overflow = "scroll", document.body.appendChild(t), K = t.offsetWidth - t.clientWidth, document.body.removeChild(t);
   }
   return K;
 }
-var b = null;
-function Ne(e) {
-  if (e === void 0 && (e = !1), b === null || e) {
+var $ = null;
+function Ae(e) {
+  if (e === void 0 && (e = !1), $ === null || e) {
     var t = document.createElement("div"), n = t.style;
     n.width = "50px", n.height = "50px", n.overflow = "scroll", n.direction = "rtl";
     var s = document.createElement("div"), i = s.style;
-    return i.width = "100px", i.height = "100px", t.appendChild(s), document.body.appendChild(t), t.scrollLeft > 0 ? b = "positive-descending" : (t.scrollLeft = 1, t.scrollLeft === 0 ? b = "negative" : b = "positive-ascending"), document.body.removeChild(t), b;
+    return i.width = "100px", i.height = "100px", t.appendChild(s), document.body.appendChild(t), t.scrollLeft > 0 ? $ = "positive-descending" : (t.scrollLeft = 1, t.scrollLeft === 0 ? $ = "negative" : $ = "positive-ascending"), document.body.removeChild(t), $;
   }
-  return b;
+  return $;
 }
 var es = 150, ts = function(t, n) {
   return t;
@@ -816,8 +816,8 @@ function ns(e) {
     Gn(g, v);
     function g(D) {
       var o;
-      return o = v.call(this, D) || this, o._instanceProps = d(o.props, fe(o)), o._outerRef = void 0, o._resetIsScrollingTimeoutId = null, o.state = {
-        instance: fe(o),
+      return o = v.call(this, D) || this, o._instanceProps = d(o.props, ge(o)), o._outerRef = void 0, o._resetIsScrollingTimeoutId = null, o.state = {
+        instance: ge(o),
         isScrolling: !1,
         scrollDirection: "forward",
         scrollOffset: typeof o.props.initialScrollOffset == "number" ? o.props.initialScrollOffset : 0,
@@ -840,11 +840,11 @@ function ns(e) {
         if (N.hasOwnProperty(u))
           S = N[u];
         else {
-          var z = n(o.props, u, o._instanceProps), k = i(o.props, u, o._instanceProps), O = h === "horizontal" || y === "horizontal", Y = h === "rtl", W = O ? z : 0;
+          var z = n(o.props, u, o._instanceProps), k = i(o.props, u, o._instanceProps), O = h === "horizontal" || y === "horizontal", P = h === "rtl", Y = O ? z : 0;
           N[u] = S = {
             position: "absolute",
-            left: Y ? void 0 : W,
-            right: Y ? W : void 0,
+            left: P ? void 0 : Y,
+            right: P ? Y : void 0,
             top: O ? 0 : z,
             height: O ? "100%" : k,
             width: O ? k : "100%"
@@ -860,7 +860,7 @@ function ns(e) {
             return null;
           var S = o.props.direction, z = M;
           if (S === "rtl")
-            switch (Ne()) {
+            switch (Ae()) {
               case "negative":
                 z = -M;
                 break;
@@ -892,7 +892,7 @@ function ns(e) {
         var p = o.props.outerRef;
         o._outerRef = u, typeof p == "function" ? p(u) : p != null && typeof p == "object" && p.hasOwnProperty("current") && (p.current = u);
       }, o._resetIsScrollingDebounced = function() {
-        o._resetIsScrollingTimeoutId !== null && ve(o._resetIsScrollingTimeoutId), o._resetIsScrollingTimeoutId = Xn(o._resetIsScrolling, es);
+        o._resetIsScrollingTimeoutId !== null && ye(o._resetIsScrollingTimeoutId), o._resetIsScrollingTimeoutId = Xn(o._resetIsScrolling, es);
       }, o._resetIsScrolling = function() {
         o._resetIsScrollingTimeoutId = null, o.setState({
           isScrolling: !1
@@ -920,7 +920,7 @@ function ns(e) {
       var N = 0;
       if (this._outerRef) {
         var S = this._outerRef;
-        M === "vertical" ? N = S.scrollWidth > S.clientWidth ? ye() : 0 : N = S.scrollHeight > S.clientHeight ? ye() : 0;
+        M === "vertical" ? N = S.scrollWidth > S.clientWidth ? Ne() : 0 : N = S.scrollHeight > S.clientHeight ? Ne() : 0;
       }
       this.scrollTo(c(this.props, o, u, y, this._instanceProps, N));
     }, T.componentDidMount = function() {
@@ -936,7 +936,7 @@ function ns(e) {
         var N = this._outerRef;
         if (u === "horizontal" || p === "horizontal")
           if (u === "rtl")
-            switch (Ne()) {
+            switch (Ae()) {
               case "negative":
                 N.scrollLeft = -M;
                 break;
@@ -955,19 +955,19 @@ function ns(e) {
       }
       this._callPropsCallbacks();
     }, T.componentWillUnmount = function() {
-      this._resetIsScrollingTimeoutId !== null && ve(this._resetIsScrollingTimeoutId);
+      this._resetIsScrollingTimeoutId !== null && ye(this._resetIsScrollingTimeoutId);
     }, T.render = function() {
-      var o = this.props, u = o.children, p = o.className, h = o.direction, M = o.height, y = o.innerRef, N = o.innerElementType, S = o.innerTagName, z = o.itemCount, k = o.itemData, O = o.itemKey, Y = O === void 0 ? ts : O, W = o.layout, Ee = o.outerElementType, Le = o.outerTagName, Re = o.style, Qe = o.useIsScrolling, Ue = o.width, se = this.state.isScrolling, H = h === "horizontal" || W === "horizontal", _e = H ? this._onScrollHorizontal : this._onScrollVertical, ie = this._getRangeToRender(), qe = ie[0], Pe = ie[1], re = [];
+      var o = this.props, u = o.children, p = o.className, h = o.direction, M = o.height, y = o.innerRef, N = o.innerElementType, S = o.innerTagName, z = o.itemCount, k = o.itemData, O = o.itemKey, P = O === void 0 ? ts : O, Y = o.layout, Ee = o.outerElementType, Le = o.outerTagName, Re = o.style, Qe = o.useIsScrolling, Ue = o.width, ie = this.state.isScrolling, H = h === "horizontal" || Y === "horizontal", _e = H ? this._onScrollHorizontal : this._onScrollVertical, re = this._getRangeToRender(), qe = re[0], Pe = re[1], oe = [];
       if (z > 0)
         for (var Q = qe; Q <= Pe; Q++)
-          re.push(G(u, {
+          oe.push(G(u, {
             data: k,
-            key: Y(Q, k),
+            key: P(Q, k),
             index: Q,
-            isScrolling: Qe ? se : void 0,
+            isScrolling: Qe ? ie : void 0,
             style: this._getItemStyle(Q)
           }));
-      var oe = s(this.props, this._instanceProps);
+      var ae = s(this.props, this._instanceProps);
       return G(Ee || Le || "div", {
         className: p,
         onScroll: _e,
@@ -982,12 +982,12 @@ function ns(e) {
           direction: h
         }, Re)
       }, G(N || S || "div", {
-        children: re,
+        children: oe,
         ref: y,
         style: {
-          height: H ? "100%" : oe,
-          pointerEvents: se ? "none" : void 0,
-          width: H ? oe : "100%"
+          height: H ? "100%" : ae,
+          pointerEvents: ie ? "none" : void 0,
+          width: H ? ae : "100%"
         }
       }));
     }, T._callPropsCallbacks = function() {
@@ -1115,7 +1115,7 @@ var as = function(e, t) {
       configurable: !0
     }
   }), t && (Object.setPrototypeOf ? Object.setPrototypeOf(e, t) : e.__proto__ = t);
-}, Ae = function(e, t) {
+}, Te = function(e, t) {
   if (!e)
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   return t && (typeof t == "object" || typeof t == "function") ? t : e;
@@ -1126,12 +1126,12 @@ var as = function(e, t) {
     as(this, t);
     for (var l = arguments.length, m = Array(l), d = 0; d < l; d++)
       m[d] = arguments[d];
-    return c = (s = (i = Ae(this, (n = t.__proto__ || Object.getPrototypeOf(t)).call.apply(n, [this].concat(m))), i), i._lastRenderedStartIndex = -1, i._lastRenderedStopIndex = -1, i._memoizedUnloadedRanges = [], i._onItemsRendered = function(f) {
+    return c = (s = (i = Te(this, (n = t.__proto__ || Object.getPrototypeOf(t)).call.apply(n, [this].concat(m))), i), i._lastRenderedStartIndex = -1, i._lastRenderedStopIndex = -1, i._memoizedUnloadedRanges = [], i._onItemsRendered = function(f) {
       var A = f.visibleStartIndex, v = f.visibleStopIndex;
       i._lastRenderedStartIndex = A, i._lastRenderedStopIndex = v, i._ensureRowsLoaded(A, v);
     }, i._setRef = function(f) {
       i._listRef = f;
-    }, s), Ae(i, c);
+    }, s), Te(i, c);
   }
   return ls(t, [{
     key: "resetloadMoreItemsCache",
@@ -1231,14 +1231,18 @@ const us = /* @__PURE__ */ a("div")({
 }) => /* @__PURE__ */ I(us, { onClick: c, style: l, children: [
   /* @__PURE__ */ r(ps, { children: e || 0 }),
   /* @__PURE__ */ I(Is, { children: [
-    t ? /* @__PURE__ */ r(ms, { alt: "leaderboard-item-avatar", src: t }) : /* @__PURE__ */ r(hs, { children: Se(n || "") }),
+    t ? /* @__PURE__ */ r(ms, { alt: "leaderboard-item-avatar", src: t }) : /* @__PURE__ */ r(hs, { children: ze(n || "") }),
     /* @__PURE__ */ I(fs, { children: [
       /* @__PURE__ */ r(gs, { children: n || "" }),
       i && /* @__PURE__ */ r(vs, { name: "icon-star" })
     ] })
   ] }),
-  /* @__PURE__ */ r("div", { children: ze(s) })
-] }), Ns = ({
+  /* @__PURE__ */ r("div", { children: xe(s) })
+] }), Ns = /* @__PURE__ */ a("div")({
+  name: "ScrollContainer",
+  class: "s13d8sg6",
+  propsAsIs: !1
+}), As = ({
   items: e,
   currentUserId: t,
   openItemDetail: n,
@@ -1249,7 +1253,7 @@ const us = /* @__PURE__ */ a("div")({
     isItemLoaded: (l) => l < e.length,
     itemCount: e.length + 1,
     loadMoreItems: s,
-    children: ({ onItemsRendered: l, ref: m }) => /* @__PURE__ */ r(
+    children: ({ onItemsRendered: l, ref: m }) => /* @__PURE__ */ r(Ns, { children: /* @__PURE__ */ r(
       is,
       {
         itemSize: 56,
@@ -1269,9 +1273,9 @@ const us = /* @__PURE__ */ a("div")({
           e[d].userId
         )
       }
-    )
+    ) })
   }
-) }), As = ({ deepLink: e }) => {
+) }), Ts = ({ deepLink: e }) => {
   const { data: t } = w(e.$store);
   return /* @__PURE__ */ r(
     He,
@@ -1293,55 +1297,55 @@ const us = /* @__PURE__ */ a("div")({
       inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
     }
   );
-}, Ts = ({ gamification: e }) => {
+}, Ds = ({ gamification: e }) => {
   const { data: t } = w(e.leaderboardList.$store);
   return t != null && t.length ? /* @__PURE__ */ r(
-    Ns,
+    As,
     {
       fetchMore: e.leaderboardList.fetchMore,
       items: t,
       openItemDetail: e.openUser,
       currentUserId: e.currentUserId.get()
     }
-  ) : /* @__PURE__ */ r(As, { deepLink: e.deepLink });
-}, Ds = /* @__PURE__ */ a("div")({
+  ) : /* @__PURE__ */ r(Ts, { deepLink: e.deepLink });
+}, Ss = /* @__PURE__ */ a("div")({
   name: "QuestionItem",
   class: "q1w97g3p",
   propsAsIs: !1
-}), Ss = /* @__PURE__ */ a("div")({
+}), zs = /* @__PURE__ */ a("div")({
   name: "QuestionCaption",
   class: "q2sl39u",
   propsAsIs: !1
-}), zs = /* @__PURE__ */ a("div")({
+}), xs = /* @__PURE__ */ a("div")({
   name: "QuestionBody",
   class: "qd5h0uc",
   propsAsIs: !1
-}), xs = /* @__PURE__ */ a("div")({
+}), js = /* @__PURE__ */ a("div")({
   name: "QuestionAction",
   class: "q105uluy",
   propsAsIs: !1
-}), js = () => j, X = /* @__PURE__ */ a(js())({
+}), ks = () => j, X = /* @__PURE__ */ a(ks())({
   name: "QuestionActionIcon",
   class: "q1fa0b9h",
   propsAsIs: !0
-}), ks = () => j, Os = /* @__PURE__ */ a(ks())({
+}), Os = () => j, ws = /* @__PURE__ */ a(Os())({
   name: "QuestionTypeIcon",
   class: "qxlt78s",
   propsAsIs: !0
-}), ws = /* @__PURE__ */ a("div")({
+}), Cs = /* @__PURE__ */ a("div")({
   name: "QuestionTypeLabel",
   class: "qmg0vkx",
   propsAsIs: !1
-}), Cs = /* @__PURE__ */ a("div")({
+}), $s = /* @__PURE__ */ a("div")({
   name: "QuestionContent",
   class: "q1uz5j1g",
   propsAsIs: !1
 }), bs = {
-  [F.LOST]: /* @__PURE__ */ r(X, { name: "icon-cross" }),
-  [F.WON]: /* @__PURE__ */ r(X, { name: "icon-check" }),
-  [F.UNSET]: void 0,
-  [F.DNP]: /* @__PURE__ */ r(X, { name: "icon-arrow" })
-}, $s = ({
+  [W.LOST]: /* @__PURE__ */ r(X, { name: "icon-cross" }),
+  [W.WON]: /* @__PURE__ */ r(X, { name: "icon-check" }),
+  [W.UNSET]: void 0,
+  [W.DNP]: /* @__PURE__ */ r(X, { name: "icon-arrow" })
+}, Es = ({
   questionId: e,
   questionType: t,
   questionStatus: n,
@@ -1350,114 +1354,144 @@ const us = /* @__PURE__ */ a("div")({
   openQuestion: c,
   status: l
 }) => {
-  const m = De[t], d = bs[l];
-  return m ? /* @__PURE__ */ I(Ds, { onClick: () => c == null ? void 0 : c(e), children: [
-    /* @__PURE__ */ I(Cs, { children: [
-      /* @__PURE__ */ I(Ss, { children: [
-        /* @__PURE__ */ r(Os, { name: m.iconName }),
-        /* @__PURE__ */ I(ws, { children: [
+  const m = Se[t], d = bs[l];
+  return m ? /* @__PURE__ */ I(Ss, { onClick: () => c == null ? void 0 : c(e), children: [
+    /* @__PURE__ */ I($s, { children: [
+      /* @__PURE__ */ I(zs, { children: [
+        /* @__PURE__ */ r(ws, { name: m.iconName }),
+        /* @__PURE__ */ I(Cs, { children: [
           m.label,
-          t === x.TRIVIA && n === q.RESOLVED && " • Expired"
+          t === x.TRIVIA && n === _.RESOLVED && " • Expired"
         ] })
       ] }),
-      /* @__PURE__ */ r(zs, { children: s || "" })
+      /* @__PURE__ */ r(xs, { children: s || "" })
     ] }),
-    /* @__PURE__ */ r(xs, { children: d || (i ? /* @__PURE__ */ r(Ge, { children: "Play" }) : null) })
+    /* @__PURE__ */ r(js, { children: d || (i ? /* @__PURE__ */ r(Ge, { children: "Play" }) : null) })
   ] }) : null;
-}, Es = /* @__PURE__ */ a("div")({
+}, Ls = /* @__PURE__ */ a("div")({
   name: "Container",
   class: "cll3md7",
   propsAsIs: !1
-}), Ls = /* @__PURE__ */ a("button")({
+}), Rs = /* @__PURE__ */ a("button")({
   name: "ActionBtn",
   class: "a10g1iik",
   propsAsIs: !1
-}), Rs = ({
+}), Qs = ({
   openInsight: e,
   questionId: t,
   ...n
-}) => /* @__PURE__ */ I(Es, { children: [
-  /* @__PURE__ */ r($e, { questionId: t, ...n }),
-  e && /* @__PURE__ */ r(Ls, { onClick: () => e(t), children: "View Insight" })
-] }), Qs = /* @__PURE__ */ a("div")({
+}) => /* @__PURE__ */ I(Ls, { children: [
+  /* @__PURE__ */ r(be, { questionId: t, ...n }),
+  e && /* @__PURE__ */ r(Rs, { onClick: () => e(t), children: "View Insight" })
+] }), Us = /* @__PURE__ */ a("div")({
   name: "QuestionsContainer",
   class: "qvghv3l",
   propsAsIs: !1
-}), Us = ({ questions: e, openQuestion: t }) => /* @__PURE__ */ r(Qs, { children: e == null ? void 0 : e.map((n) => {
+}), _s = ({ questions: e, openQuestion: t }) => /* @__PURE__ */ r(Us, { children: e == null ? void 0 : e.map((n) => {
   var s, i;
   if (n.type === "question" && ((s = n.attributes) == null ? void 0 : s.attributes.case) === "question") {
     const c = n.attributes.attributes.value;
-    return /* @__PURE__ */ r($s, { openQuestion: t, ...c }, c.questionId);
+    return /* @__PURE__ */ r(Es, { openQuestion: t, ...c }, c.questionId);
   }
   if (n.type === "insight" && ((i = n.attributes) == null ? void 0 : i.attributes.case) === "insight") {
     const c = n.attributes.attributes.value;
-    return /* @__PURE__ */ r(Rs, { openInsight: t, ...c }, c.questionId);
+    return /* @__PURE__ */ r(Qs, { openInsight: t, ...c }, c.questionId);
   }
   return null;
-}) }), _s = ({ store: e, openQuestion: t }) => {
+}) }), qs = ({ store: e, openQuestion: t }) => {
   const n = w(e);
-  return n != null && n.data ? /* @__PURE__ */ r(Us, { openQuestion: t, questions: n.data }) : /* @__PURE__ */ r("div", { children: "wait questions..." });
-}, qs = ({ userSummary: e }) => {
+  return n != null && n.data ? /* @__PURE__ */ r(_s, { openQuestion: t, questions: n.data }) : /* @__PURE__ */ r("div", { children: "wait questions..." });
+}, Ps = ({ userSummary: e }) => {
   var t, n;
   const s = w(e.getStore());
   return (t = s.data) != null && t.summary ? /* @__PURE__ */ r(Oe, { ...s.data.summary, successRate: (n = s.data.percentage) == null ? void 0 : n.correct }) : /* @__PURE__ */ r("div", { children: "wait user..." });
-}, Ps = ({ gamification: e }) => {
-  const [t, n] = R(_.HOME);
-  return /* @__PURE__ */ I("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ I(ee, { children: [
-      /* @__PURE__ */ r(Hn, { activePage: t, toggleActivePage: n }),
-      t === _.HOME && /* @__PURE__ */ r(qs, { userSummary: e.userSummary })
-    ] }),
-    t === _.HOME && /* @__PURE__ */ r(Ze, { children: /* @__PURE__ */ r(_s, { openQuestion: e.openQuestion, store: e.feedList.getStore() }) }),
-    t === _.LEADERBOARD && /* @__PURE__ */ r(ee, { style: { flex: "1 1 auto", paddingTop: 0, paddingBottom: 0 }, children: /* @__PURE__ */ r(Ts, { gamification: e }) })
-  ] });
-}, Ys = () => Je, Te = /* @__PURE__ */ a(Ys())({
+}, Ys = ({
+  gamification: e
+}) => {
+  const [t, n] = R(B.HOME);
+  return /* @__PURE__ */ I("div", {
+    style: {
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden"
+    },
+    children: [/* @__PURE__ */ r(ee, {
+      style: {
+        paddingBottom: "4px"
+      },
+      children: /* @__PURE__ */ r(Hn, {
+        activePage: t,
+        toggleActivePage: n
+      })
+    }), t === B.HOME && /* @__PURE__ */ I(se, {
+      children: [/* @__PURE__ */ r(ee, {
+        style: {
+          paddingTop: "12px"
+        },
+        children: /* @__PURE__ */ r(Ps, {
+          userSummary: e.userSummary
+        })
+      }), /* @__PURE__ */ r(Ze, {
+        children: /* @__PURE__ */ r(qs, {
+          openQuestion: e.openQuestion,
+          store: e.feedList.getStore()
+        })
+      })]
+    }), t === B.LEADERBOARD && /* @__PURE__ */ r("div", {
+      className: "c1bp9dj2",
+      children: /* @__PURE__ */ r(Ds, {
+        gamification: e
+      })
+    })]
+  });
+}, Ws = () => Je, De = /* @__PURE__ */ a(Ws())({
   name: "OpenedContainer",
   class: "oar61gl",
   propsAsIs: !0
-}), Ws = /* @__PURE__ */ a("div")({
+}), Fs = /* @__PURE__ */ a("div")({
   name: "UserContainer",
   class: "u14zaal4",
   propsAsIs: !1
-}), Fs = ({
+}), Vs = ({
   correct: e,
   incorrect: t
 }) => {
   const n = e + t;
   return n === 0 ? 0 : Math.round(e / n * 100);
-}, Gs = ({
+}, Zs = ({
   gamification: e,
   className: t
 }) => {
   const n = w(e.openedQuestion.$store), s = w(e.openedUser);
   return /* @__PURE__ */ I(E, {
-    children: [n && /* @__PURE__ */ r(Te, {
+    children: [n && /* @__PURE__ */ r(De, {
       className: t,
       children: /* @__PURE__ */ r(Yn, {
         gamification: e
       })
-    }), s && /* @__PURE__ */ r(Te, {
+    }), s && /* @__PURE__ */ r(De, {
       className: t,
-      children: /* @__PURE__ */ I(Ws, {
+      children: /* @__PURE__ */ I(Fs, {
         children: [/* @__PURE__ */ r(ke, {
           label: "Friend's Rank",
           close: e.closeUser
         }), /* @__PURE__ */ r(ee, {
           children: /* @__PURE__ */ r(Oe, {
             ...s,
-            successRate: Fs(s)
+            successRate: Vs(s)
           })
         })]
       })
-    }), /* @__PURE__ */ r(xe, {
+    }), /* @__PURE__ */ r(se, {
       className: t,
       "data-nav": "true",
-      children: /* @__PURE__ */ r(Ps, {
+      children: /* @__PURE__ */ r(Ys, {
         gamification: e
       })
     })]
   });
 };
 export {
-  Gs as default
+  Zs as default
 };