@streamlayer/react 0.31.0 → 0.31.1

package/lib/es/gamification-feature.js

@@ -2,18 +2,18 @@ import { jsxs as p, jsx as s, Fragment as b } from "react/jsx-runtime";
 import { s as o, i as j } from "./index4.js";
 import { useStore as k } from "@nanostores/react";
 import { o as Ne, r as te, w as $e, A as Re, O as Qe, a as K, n as Ue, d as _e } from "./masters2.js";
-import { useState as R, useCallback as F, useMemo as W, createElement as H, PureComponent as Ae } from "react";
+import { useState as R, useCallback as F, useMemo as W, createElement as H, PureComponent as ye } from "react";
 import { QuestionType as x, QuestionStatus as Q, QuestionImages as $, PickHistoryStatus as q } from "@streamlayer/sdk-web-types";
 import { m as qe } from "./index3.js";
 import "react-countup";
-import { CountdownCircleTimer as Ye } from "react-countdown-circle-timer";
+import { CountdownCircleTimer as Pe } from "react-countdown-circle-timer";
 import { E } from "./index2.js";
 import "@streamlayer/sdk-web-interfaces";
 import "@streamlayer/sdk-web-notifications";
 import "@lottiefiles/react-lottie-player";
 import "./useStreamLayerApp.js";
 import "@streamlayer/sdk-web";
-const Pe = /* @__PURE__ */ o("div")({
+const Ye = /* @__PURE__ */ o("div")({
   name: "Container",
   class: "c1vwopgc",
   propsAsIs: !1
@@ -37,9 +37,9 @@ const Pe = /* @__PURE__ */ o("div")({
   name: "CloseIcon",
   class: "cvsl7l3",
   propsAsIs: !0
-}), ye = ({ type: e, close: t, label: n }) => {
+}), Ae = ({ type: e, close: t, label: n }) => {
   const i = e ? Ne[e] : { label: n, iconName: void 0 };
-  return /* @__PURE__ */ p(Pe, { children: [
+  return /* @__PURE__ */ p(Ye, { children: [
     /* @__PURE__ */ p(We, { children: [
       (i == null ? void 0 : i.iconName) && /* @__PURE__ */ s(Fe, { name: i.iconName }),
       (i == null ? void 0 : i.label) && /* @__PURE__ */ s(Be, { children: i.label })
@@ -80,7 +80,7 @@ const Pe = /* @__PURE__ */ o("div")({
   name: "Title",
   class: "t8s05oq",
   propsAsIs: !1
-}), Y = ({ indicator: e, title: t }) => /* @__PURE__ */ p(st, { children: [
+}), P = ({ indicator: e, title: t }) => /* @__PURE__ */ p(st, { children: [
   /* @__PURE__ */ s(it, { children: e }),
   /* @__PURE__ */ s(rt, { children: t })
 ] }), ot = /* @__PURE__ */ o("div")({
@@ -143,11 +143,11 @@ const Pe = /* @__PURE__ */ o("div")({
   name: "Statistics",
   class: "s1knfgqt",
   propsAsIs: !1
-}), At = /* @__PURE__ */ o("div")({
+}), yt = /* @__PURE__ */ o("div")({
   name: "AvatarPlaceholder",
   class: "a1mqo824",
   propsAsIs: !1
-}), yt = /* @__PURE__ */ o("button")({
+}), At = /* @__PURE__ */ o("button")({
   name: "UserAccountBtn",
   class: "uxareh6",
   propsAsIs: !1
@@ -157,16 +157,16 @@ const Pe = /* @__PURE__ */ o("div")({
   points: n,
   friendsRank: i,
   rank: r,
-  streak: I,
+  streak: m,
   correct: u,
-  incorrect: m,
+  incorrect: I,
   inTop: d,
   successRate: h
 }) => /* @__PURE__ */ p(ot, { children: [
   /* @__PURE__ */ s(at, { children: /* @__PURE__ */ p(ct, { children: [
-    /* @__PURE__ */ p(yt, { children: [
+    /* @__PURE__ */ p(At, { children: [
       e && /* @__PURE__ */ s(dt, { alt: "avatar", src: e }),
-      !e && /* @__PURE__ */ s(At, { children: Te(t || "") })
+      !e && /* @__PURE__ */ s(yt, { children: Te(t || "") })
     ] }),
     /* @__PURE__ */ p(ut, { children: [
       /* @__PURE__ */ s(pt, { children: t }),
@@ -193,10 +193,10 @@ const Pe = /* @__PURE__ */ o("div")({
       /* @__PURE__ */ s(oe, { indicator: r || 0, title: "Global rank" })
     ] }),
     /* @__PURE__ */ p(Nt, { children: [
-      /* @__PURE__ */ s(Y, { indicator: I || 0, title: "Win streak" }),
-      /* @__PURE__ */ s(Y, { indicator: u || 0, title: "Correct" }),
-      /* @__PURE__ */ s(Y, { indicator: m || 0, title: "Incorrect" }),
-      /* @__PURE__ */ s(Y, { indicator: `${h || 0}%`, title: "Succ. rate" })
+      /* @__PURE__ */ s(P, { indicator: m || 0, title: "Win streak" }),
+      /* @__PURE__ */ s(P, { indicator: u || 0, title: "Correct" }),
+      /* @__PURE__ */ s(P, { indicator: I || 0, title: "Incorrect" }),
+      /* @__PURE__ */ s(P, { indicator: `${h || 0}%`, title: "Succ. rate" })
     ] })
   ] })
 ] }), Dt = /* @__PURE__ */ o("div")({
@@ -249,21 +249,21 @@ const Pe = /* @__PURE__ */ o("div")({
   questionVoted: n,
   questionType: i,
   hasCorrectAnswer: r,
-  questionStatus: I
+  questionStatus: m
 }) => {
   const u = n && (i === x.TRIVIA || i === x.PREDICTION);
-  if (!u && I !== Q.RESOLVED)
+  if (!u && m !== Q.RESOLVED)
     return null;
-  const m = i === x.PREDICTION && !r, d = t ? "correct" : "incorrect", h = t ? e.correctFeedback : e.incorrectFeedback;
-  return /* @__PURE__ */ p(jt, { "data-isPrediction": m, children: [
-    I === Q.RESOLVED && i === x.TRIVIA && !n && /* @__PURE__ */ p(b, { children: [
+  const I = i === x.PREDICTION && !r, d = t ? "correct" : "incorrect", h = t ? e.correctFeedback : e.incorrectFeedback;
+  return /* @__PURE__ */ p(jt, { "data-isPrediction": I, children: [
+    m === Q.RESOLVED && i === x.TRIVIA && !n && /* @__PURE__ */ p(b, { children: [
       /* @__PURE__ */ s(ae, { children: /* @__PURE__ */ s(j, { name: "questionExpired" }) }),
       /* @__PURE__ */ p("div", { children: [
         /* @__PURE__ */ s(le, { children: /* @__PURE__ */ s(Z, { children: "Question Expired" }) }),
         /* @__PURE__ */ s(wt, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
       ] })
     ] }),
-    u && m && /* @__PURE__ */ p(b, { children: [
+    u && I && /* @__PURE__ */ p(b, { children: [
       /* @__PURE__ */ s(Ct, { name: "icon-prediction" }),
       /* @__PURE__ */ s(Z, { children: "Stay tuned to see if your prediction was correct." })
     ] }),
@@ -307,7 +307,7 @@ const Pe = /* @__PURE__ */ o("div")({
   name: "IconContainer",
   class: "i1j65z51",
   propsAsIs: !1
-}), Yt = /* @__PURE__ */ o("div")({
+}), Pt = /* @__PURE__ */ o("div")({
   name: "IconWrap",
   class: "i19tpfua",
   propsAsIs: !1
@@ -315,7 +315,7 @@ const Pe = /* @__PURE__ */ o("div")({
   name: "Icon",
   class: "i1tubmma",
   propsAsIs: !1
-}), Pt = () => ze, Wt = /* @__PURE__ */ o(Pt())({
+}), Yt = () => ze, Wt = /* @__PURE__ */ o(Yt())({
   name: "IconDefault",
   class: "i1grrgwj",
   propsAsIs: !0
@@ -341,7 +341,7 @@ const Pe = /* @__PURE__ */ o("div")({
   propsAsIs: !0
 }), ce = {
   [$.CENTERED]: (e) => /* @__PURE__ */ s(Wt, { alt: "option-icon", src: e }),
-  [$.TRANSPARENT]: (e) => /* @__PURE__ */ s(qt, { children: /* @__PURE__ */ s(Yt, { style: { backgroundImage: `url(${e})` } }) }),
+  [$.TRANSPARENT]: (e) => /* @__PURE__ */ s(qt, { children: /* @__PURE__ */ s(Pt, { style: { backgroundImage: `url(${e})` } }) }),
   [$.ROUNDED]: (e) => /* @__PURE__ */ s(Ft, { alt: "option-icon", src: e }),
   [$.NONE]: () => null,
   [$.UNSET]: () => null
@@ -368,36 +368,36 @@ const Pe = /* @__PURE__ */ o("div")({
     id: n,
     icon: i,
     text: r,
-    percentageDecimal: I,
+    percentageDecimal: m,
     // extra props
     onVote: u,
-    youSelected: m,
+    youSelected: I,
     questionVoted: d,
     // ToDo: Figure out why imageMode is not in the response, and delete default value
     imageMode: h,
-    answerTimeExpired: A,
+    answerTimeExpired: y,
     questionStatus: D,
     isLoading: N,
-    questionType: y,
+    questionType: A,
     correct: T,
     hasCorrectAnswer: a
-  } = e, l = Kt(e), c = Xt({ questionType: y, questionVoted: d, correct: T, hasCorrectAnswer: a, questionStatus: D }), f = d || D === Q.RESOLVED && y === x.PREDICTION;
+  } = e, l = Kt(e), c = Xt({ questionType: A, questionVoted: d, correct: T, hasCorrectAnswer: a, questionStatus: D }), f = d || D === Q.RESOLVED && A === x.PREDICTION;
   return /* @__PURE__ */ p(
     Qt,
     {
       value: n,
-      "data-selected": m,
+      "data-selected": I,
       "data-answerState": l,
-      disabled: d || N || A,
+      disabled: d || N || y,
       onClick: u,
       children: [
-        f && /* @__PURE__ */ s(Ut, { "data-answerState": l, style: { width: `${I}%` } }),
+        f && /* @__PURE__ */ s(Ut, { "data-answerState": l, style: { width: `${m}%` } }),
         /* @__PURE__ */ p(_t, { children: [
           i && h && ((t = ce[h]) == null ? void 0 : t.call(ce, i)),
           /* @__PURE__ */ s(Bt, { children: r }),
           f && /* @__PURE__ */ p(Ht, { children: [
             c && /* @__PURE__ */ s(Jt, { name: "selected" }),
-            /* @__PURE__ */ s(Zt, { children: /* @__PURE__ */ s(qe, { value: I, suffix: "%" }) })
+            /* @__PURE__ */ s(Zt, { children: /* @__PURE__ */ s(qe, { value: m, suffix: "%" }) })
           ] })
         ] })
       ]
@@ -412,16 +412,16 @@ const Pe = /* @__PURE__ */ o("div")({
   duration: t = 30,
   onTimerExpired: n
 }) => {
-  const [i, r] = R(t > 10 ? rn : de), I = ({
+  const [i, r] = R(t > 10 ? rn : de), m = ({
     remainingTime: d
   }) => /* @__PURE__ */ s(sn, {
     children: d
   }), u = F(() => {
     n == null || n(), r(on);
-  }, [n, r]), m = F((d) => {
+  }, [n, r]), I = F((d) => {
     d === 10 && r(de);
   }, [r]);
-  return /* @__PURE__ */ s(Ye, {
+  return /* @__PURE__ */ s(Pe, {
     isPlaying: e,
     duration: t,
     colors: tn,
@@ -431,8 +431,8 @@ const Pe = /* @__PURE__ */ o("div")({
     trailStrokeWidth: 2,
     trailColor: i,
     onComplete: u,
-    onUpdate: m,
-    children: I
+    onUpdate: I,
+    children: m
   });
 }, ln = /* @__PURE__ */ o("div")({
   name: "WinBarContainer",
@@ -462,7 +462,14 @@ const Pe = /* @__PURE__ */ o("div")({
   name: "PointsUnits",
   class: "pe5g05h",
   propsAsIs: !1
-}), fn = ({ title: e, points: t, isPlayingTimer: n, isTimer: i, onTimerExpired: r }) => /* @__PURE__ */ p(ln, { children: [
+}), fn = ({
+  title: e,
+  points: t,
+  isPlayingTimer: n,
+  isTimer: i,
+  timerDuration: r,
+  onTimerExpired: m
+}) => /* @__PURE__ */ p(ln, { children: [
   /* @__PURE__ */ p(cn, { children: [
     e && /* @__PURE__ */ s(dn, { children: e }),
     t !== void 0 && /* @__PURE__ */ p(b, { children: [
@@ -473,17 +480,17 @@ const Pe = /* @__PURE__ */ o("div")({
       ] })
     ] })
   ] }),
-  i && /* @__PURE__ */ s(an, { isPlaying: n, onTimerExpired: r })
+  i && /* @__PURE__ */ s(an, { isPlaying: n, onTimerExpired: m, duration: r })
 ] }), gn = ({ openedQuestion: e, vote: t, close: n }) => {
   var i;
-  const r = e.subject, I = e.type, u = (i = e.options) == null ? void 0 : i.options, [m, d] = R(!1), [h, A] = R(!1), [D, N] = R(""), y = e == null ? void 0 : e.id, T = F(
+  const r = e.subject, m = e.type, u = (i = e.options) == null ? void 0 : i.options, [I, d] = R(!1), [h, y] = R(!1), [D, N] = R(""), A = e == null ? void 0 : e.id, T = F(
     async (v) => {
-      if (y) {
+      if (A) {
         const g = v.currentTarget.value;
-        N(g), A(!0), await t(y, g), A(!1);
+        N(g), y(!0), await t(A, g), y(!1);
       }
     },
-    [y, N, t]
+    [A, N, t]
   ), a = F(() => {
     d(!0), setTimeout(n, 3e3);
   }, [n]), l = W(
@@ -501,13 +508,13 @@ const Pe = /* @__PURE__ */ o("div")({
       isLoading: h,
       hasCorrectAnswer: c,
       questionType: e.type,
-      answerTimeExpired: m,
+      answerTimeExpired: I,
       questionStatus: e.status,
       imageMode: (g = e.appearance) == null ? void 0 : g.images,
       // ToDo: Figure out why imageMode is not in the response
       onVote: T
     };
-  }) : [], [c, m, h, e, l, T, D]), M = u && (u.case === "trivia" || u.case === "prediction") ? u.value : void 0;
+  }) : [], [c, I, h, e, l, T, D]), M = u && (u.case === "trivia" || u.case === "prediction") ? u.value : void 0;
   return /* @__PURE__ */ s(te, { "data-question-header": "true", children: /* @__PURE__ */ s(Et, { children: /* @__PURE__ */ p(Lt, { children: [
     M && /* @__PURE__ */ s(
       bt,
@@ -515,7 +522,7 @@ const Pe = /* @__PURE__ */ o("div")({
         feedbackMessages: M,
         questionVoted: !!l,
         questionVotedCorrectly: l == null ? void 0 : l.correct,
-        questionType: I,
+        questionType: m,
         hasCorrectAnswer: c,
         questionStatus: e.status
       }
@@ -523,13 +530,15 @@ const Pe = /* @__PURE__ */ o("div")({
     e.type !== x.PREDICTION && /* @__PURE__ */ s(
       fn,
       {
-        title: m ? "Time expired" : "To win",
-        points: m ? void 0 : 100,
+        title: I ? "Time expired" : "To win",
+        points: I ? void 0 : 100,
         onTimerExpired: a,
-        isTimer: !0
+        isTimer: !0,
+        isPlayingTimer: !l,
+        timerDuration: l ? 0 : 30
       }
     ),
-    m ? /* @__PURE__ */ s(
+    I ? /* @__PURE__ */ s(
       xt,
       {
         title: "More to come...",
@@ -552,11 +561,11 @@ const Pe = /* @__PURE__ */ o("div")({
   name: "Title",
   class: "t5et2jt",
   propsAsIs: !1
-}), An = /* @__PURE__ */ o("div")({
+}), yn = /* @__PURE__ */ o("div")({
   name: "Description",
   class: "d1i2kpk2",
   propsAsIs: !1
-}), yn = /* @__PURE__ */ o("div")({
+}), An = /* @__PURE__ */ o("div")({
   name: "DateWrap",
   class: "dd3lh3p",
   propsAsIs: !1
@@ -575,18 +584,18 @@ const Pe = /* @__PURE__ */ o("div")({
         };
     }
     return null;
-  }, [e]), I = (i == null ? void 0 : i.image) || t;
+  }, [e]), m = (i == null ? void 0 : i.image) || t;
   return /* @__PURE__ */ p(Mn, { children: [
-    r && /* @__PURE__ */ p(yn, { children: [
+    r && /* @__PURE__ */ p(An, { children: [
       r.date,
       " · ",
       r.time
     ] }),
     (i == null ? void 0 : i.video) && /* @__PURE__ */ s($e, { source: i.video.url, poster: i.video.thumbnailUrl }),
-    I && /* @__PURE__ */ s(Tn, { src: I }),
+    m && /* @__PURE__ */ s(Tn, { src: m }),
     /* @__PURE__ */ p(vn, { children: [
       /* @__PURE__ */ s(Nn, { children: (i == null ? void 0 : i.heading) || n }),
-      /* @__PURE__ */ s(An, { children: i == null ? void 0 : i.body })
+      /* @__PURE__ */ s(yn, { children: i == null ? void 0 : i.body })
     ] })
   ] });
 }, Dn = /* @__PURE__ */ o("div")({
@@ -638,7 +647,7 @@ const Pe = /* @__PURE__ */ o("div")({
     return null;
   const r = n.type;
   return /* @__PURE__ */ p(xn, {
-    children: [/* @__PURE__ */ s(ye, {
+    children: [/* @__PURE__ */ s(Ae, {
       close: e.closeQuestion,
       type: ((t = n.attributes) == null ? void 0 : t.type) || x.UNSET
     }), r === "question" && /* @__PURE__ */ s(On, {
@@ -723,11 +732,11 @@ function Qn(e, t) {
 }
 function G(e, t) {
   t === void 0 && (t = Qn);
-  var n, i = [], r, I = !1;
+  var n, i = [], r, m = !1;
   function u() {
-    for (var m = [], d = 0; d < arguments.length; d++)
-      m[d] = arguments[d];
-    return I && n === this && t(m, i) || (r = e.apply(this, m), I = !0, n = this, i = m), r;
+    for (var I = [], d = 0; d < arguments.length; d++)
+      I[d] = arguments[d];
+    return m && n === this && t(I, i) || (r = e.apply(this, I), m = !0, n = this, i = I), r;
   }
   return u;
 }
@@ -767,11 +776,11 @@ function ge(e) {
   }
   return w;
 }
-var qn = 150, Yn = function(t, n) {
+var qn = 150, Pn = function(t, n) {
   return t;
 };
-function Pn(e) {
-  var t, n = e.getItemOffset, i = e.getEstimatedTotalSize, r = e.getItemSize, I = e.getOffsetForIndexAndAlignment, u = e.getStartIndexForOffset, m = e.getStopIndexForStartIndex, d = e.initInstanceProps, h = e.shouldResetStyleCacheOnItemSizeChange, A = e.validateProps;
+function Yn(e) {
+  var t, n = e.getItemOffset, i = e.getEstimatedTotalSize, r = e.getItemSize, m = e.getOffsetForIndexAndAlignment, u = e.getStartIndexForOffset, I = e.getStopIndexForStartIndex, d = e.initInstanceProps, h = e.shouldResetStyleCacheOnItemSizeChange, y = e.validateProps;
   return t = /* @__PURE__ */ function(D) {
     $n(N, D);
     function N(T) {
@@ -862,10 +871,10 @@ function Pn(e) {
       }, a;
     }
     N.getDerivedStateFromProps = function(a, l) {
-      return Wn(a, l), A(a), null;
+      return Wn(a, l), y(a), null;
     };
-    var y = N.prototype;
-    return y.scrollTo = function(a) {
+    var A = N.prototype;
+    return A.scrollTo = function(a) {
       a = Math.max(0, a), this.setState(function(l) {
         return l.scrollOffset === a ? null : {
           scrollDirection: l.scrollOffset < a ? "forward" : "backward",
@@ -873,7 +882,7 @@ function Pn(e) {
           scrollUpdateWasRequested: !0
         };
       }, this._resetIsScrollingDebounced);
-    }, y.scrollToItem = function(a, l) {
+    }, A.scrollToItem = function(a, l) {
       l === void 0 && (l = "auto");
       var c = this.props, f = c.itemCount, M = c.layout, v = this.state.scrollOffset;
       a = Math.max(0, Math.min(a, f - 1));
@@ -882,15 +891,15 @@ function Pn(e) {
         var S = this._outerRef;
         M === "vertical" ? g = S.scrollWidth > S.clientWidth ? fe() : 0 : g = S.scrollHeight > S.clientHeight ? fe() : 0;
       }
-      this.scrollTo(I(this.props, a, l, v, this._instanceProps, g));
-    }, y.componentDidMount = function() {
+      this.scrollTo(m(this.props, a, l, v, this._instanceProps, g));
+    }, A.componentDidMount = function() {
       var a = this.props, l = a.direction, c = a.initialScrollOffset, f = a.layout;
       if (typeof c == "number" && this._outerRef != null) {
         var M = this._outerRef;
         l === "horizontal" || f === "horizontal" ? M.scrollLeft = c : M.scrollTop = c;
       }
       this._callPropsCallbacks();
-    }, y.componentDidUpdate = function() {
+    }, A.componentDidUpdate = function() {
       var a = this.props, l = a.direction, c = a.layout, f = this.state, M = f.scrollOffset, v = f.scrollUpdateWasRequested;
       if (v && this._outerRef != null) {
         var g = this._outerRef;
@@ -914,10 +923,10 @@ function Pn(e) {
           g.scrollTop = M;
       }
       this._callPropsCallbacks();
-    }, y.componentWillUnmount = function() {
+    }, A.componentWillUnmount = function() {
       this._resetIsScrollingTimeoutId !== null && he(this._resetIsScrollingTimeoutId);
-    }, y.render = function() {
-      var a = this.props, l = a.children, c = a.className, f = a.direction, M = a.height, v = a.innerRef, g = a.innerElementType, S = a.innerTagName, z = a.itemCount, O = a.itemData, C = a.itemKey, U = C === void 0 ? Yn : C, _ = a.layout, je = a.outerElementType, Oe = a.outerTagName, Ce = a.style, ke = a.useIsScrolling, we = a.width, ne = this.state.isScrolling, B = f === "horizontal" || _ === "horizontal", be = B ? this._onScrollHorizontal : this._onScrollVertical, se = this._getRangeToRender(), Ee = se[0], Le = se[1], ie = [];
+    }, A.render = function() {
+      var a = this.props, l = a.children, c = a.className, f = a.direction, M = a.height, v = a.innerRef, g = a.innerElementType, S = a.innerTagName, z = a.itemCount, O = a.itemData, C = a.itemKey, U = C === void 0 ? Pn : C, _ = a.layout, je = a.outerElementType, Oe = a.outerTagName, Ce = a.style, ke = a.useIsScrolling, we = a.width, ne = this.state.isScrolling, B = f === "horizontal" || _ === "horizontal", be = B ? this._onScrollHorizontal : this._onScrollVertical, se = this._getRangeToRender(), Ee = se[0], Le = se[1], ie = [];
       if (z > 0)
         for (var L = Ee; L <= Le; L++)
           ie.push(H(l, {
@@ -950,7 +959,7 @@ function Pn(e) {
           width: B ? re : "100%"
         }
       }));
-    }, y._callPropsCallbacks = function() {
+    }, A._callPropsCallbacks = function() {
       if (typeof this.props.onItemsRendered == "function") {
         var a = this.props.itemCount;
         if (a > 0) {
@@ -962,14 +971,14 @@ function Pn(e) {
         var g = this.state, S = g.scrollDirection, z = g.scrollOffset, O = g.scrollUpdateWasRequested;
         this._callOnScroll(S, z, O);
       }
-    }, y._getRangeToRender = function() {
+    }, A._getRangeToRender = function() {
       var a = this.props, l = a.itemCount, c = a.overscanCount, f = this.state, M = f.isScrolling, v = f.scrollDirection, g = f.scrollOffset;
       if (l === 0)
         return [0, 0, 0, 0];
-      var S = u(this.props, g, this._instanceProps), z = m(this.props, S, g, this._instanceProps), O = !M || v === "backward" ? Math.max(1, c) : 1, C = !M || v === "forward" ? Math.max(1, c) : 1;
+      var S = u(this.props, g, this._instanceProps), z = I(this.props, S, g, this._instanceProps), O = !M || v === "backward" ? Math.max(1, c) : 1, C = !M || v === "forward" ? Math.max(1, c) : 1;
       return [Math.max(0, S - O), Math.max(0, Math.min(l - 1, z + C)), S, z];
     }, N;
-  }(Ae), t.defaultProps = {
+  }(ye), t.defaultProps = {
     direction: "ltr",
     itemData: void 0,
     layout: "vertical",
@@ -979,7 +988,7 @@ function Pn(e) {
 }
 var Wn = function(t, n) {
   t.children, t.direction, t.height, t.layout, t.innerTagName, t.outerTagName, t.width, n.instance;
-}, Vn = /* @__PURE__ */ Pn({
+}, Vn = /* @__PURE__ */ Yn({
   getItemOffset: function(t, n) {
     var i = t.itemSize;
     return n * i;
@@ -992,8 +1001,8 @@ var Wn = function(t, n) {
     var n = t.itemCount, i = t.itemSize;
     return i * n;
   },
-  getOffsetForIndexAndAlignment: function(t, n, i, r, I, u) {
-    var m = t.direction, d = t.height, h = t.itemCount, A = t.itemSize, D = t.layout, N = t.width, y = m === "horizontal" || D === "horizontal", T = y ? N : d, a = Math.max(0, h * A - T), l = Math.min(a, n * A), c = Math.max(0, n * A - T + A + u);
+  getOffsetForIndexAndAlignment: function(t, n, i, r, m, u) {
+    var I = t.direction, d = t.height, h = t.itemCount, y = t.itemSize, D = t.layout, N = t.width, A = I === "horizontal" || D === "horizontal", T = A ? N : d, a = Math.max(0, h * y - T), l = Math.min(a, n * y), c = Math.max(0, n * y - T + y + u);
     switch (i === "smart" && (r >= c - T && r <= l + T ? i = "auto" : i = "center"), i) {
       case "start":
         return l;
@@ -1013,10 +1022,10 @@ var Wn = function(t, n) {
     return Math.max(0, Math.min(i - 1, Math.floor(n / r)));
   },
   getStopIndexForStartIndex: function(t, n, i) {
-    var r = t.direction, I = t.height, u = t.itemCount, m = t.itemSize, d = t.layout, h = t.width, A = r === "horizontal" || d === "horizontal", D = n * m, N = A ? h : I, y = Math.ceil((N + i - D) / m);
+    var r = t.direction, m = t.height, u = t.itemCount, I = t.itemSize, d = t.layout, h = t.width, y = r === "horizontal" || d === "horizontal", D = n * I, N = y ? h : m, A = Math.ceil((N + i - D) / I);
     return Math.max(0, Math.min(
       u - 1,
-      n + y - 1
+      n + A - 1
       // -1 is because stop index is inclusive
     ));
   },
@@ -1032,20 +1041,20 @@ function Fn(e) {
   return !(i > n || r < t);
 }
 function Bn(e) {
-  for (var t = e.isItemLoaded, n = e.itemCount, i = e.minimumBatchSize, r = e.startIndex, I = e.stopIndex, u = [], m = null, d = null, h = r; h <= I; h++) {
-    var A = t(h);
-    A ? d !== null && (u.push(m, d), m = d = null) : (d = h, m === null && (m = h));
+  for (var t = e.isItemLoaded, n = e.itemCount, i = e.minimumBatchSize, r = e.startIndex, m = e.stopIndex, u = [], I = null, d = null, h = r; h <= m; h++) {
+    var y = t(h);
+    y ? d !== null && (u.push(I, d), I = d = null) : (d = h, I === null && (I = h));
   }
   if (d !== null) {
-    for (var D = Math.min(Math.max(d, m + i - 1), n - 1), N = d + 1; N <= D && !t(N); N++)
+    for (var D = Math.min(Math.max(d, I + i - 1), n - 1), N = d + 1; N <= D && !t(N); N++)
       d = N;
-    u.push(m, d);
+    u.push(I, d);
   }
   if (u.length)
     for (; u[1] - u[0] + 1 < i && u[0] > 0; ) {
-      var y = u[0] - 1;
-      if (!t(y))
-        u[0] = y;
+      var A = u[0] - 1;
+      if (!t(A))
+        u[0] = A;
       else
         break;
     }
@@ -1082,16 +1091,16 @@ var Hn = function(e, t) {
 }, Jn = function(e) {
   Gn(t, e);
   function t() {
-    var n, i, r, I;
+    var n, i, r, m;
     Hn(this, t);
-    for (var u = arguments.length, m = Array(u), d = 0; d < u; d++)
-      m[d] = arguments[d];
-    return I = (i = (r = Me(this, (n = t.__proto__ || Object.getPrototypeOf(t)).call.apply(n, [this].concat(m))), r), r._lastRenderedStartIndex = -1, r._lastRenderedStopIndex = -1, r._memoizedUnloadedRanges = [], r._onItemsRendered = function(h) {
-      var A = h.visibleStartIndex, D = h.visibleStopIndex;
-      r._lastRenderedStartIndex = A, r._lastRenderedStopIndex = D, r._ensureRowsLoaded(A, D);
+    for (var u = arguments.length, I = Array(u), d = 0; d < u; d++)
+      I[d] = arguments[d];
+    return m = (i = (r = Me(this, (n = t.__proto__ || Object.getPrototypeOf(t)).call.apply(n, [this].concat(I))), r), r._lastRenderedStartIndex = -1, r._lastRenderedStopIndex = -1, r._memoizedUnloadedRanges = [], r._onItemsRendered = function(h) {
+      var y = h.visibleStartIndex, D = h.visibleStopIndex;
+      r._lastRenderedStartIndex = y, r._lastRenderedStopIndex = D, r._ensureRowsLoaded(y, D);
     }, r._setRef = function(h) {
       r._listRef = h;
-    }, i), Me(r, I);
+    }, i), Me(r, m);
   }
   return Zn(t, [{
     key: "resetloadMoreItemsCache",
@@ -1115,39 +1124,39 @@ var Hn = function(e, t) {
   }, {
     key: "_ensureRowsLoaded",
     value: function(i, r) {
-      var I = this.props, u = I.isItemLoaded, m = I.itemCount, d = I.minimumBatchSize, h = d === void 0 ? 10 : d, A = I.threshold, D = A === void 0 ? 15 : A, N = Bn({
+      var m = this.props, u = m.isItemLoaded, I = m.itemCount, d = m.minimumBatchSize, h = d === void 0 ? 10 : d, y = m.threshold, D = y === void 0 ? 15 : y, N = Bn({
         isItemLoaded: u,
-        itemCount: m,
+        itemCount: I,
         minimumBatchSize: h,
         startIndex: Math.max(0, i - D),
-        stopIndex: Math.min(m - 1, r + D)
+        stopIndex: Math.min(I - 1, r + D)
       });
-      (this._memoizedUnloadedRanges.length !== N.length || this._memoizedUnloadedRanges.some(function(y, T) {
-        return N[T] !== y;
+      (this._memoizedUnloadedRanges.length !== N.length || this._memoizedUnloadedRanges.some(function(A, T) {
+        return N[T] !== A;
       })) && (this._memoizedUnloadedRanges = N, this._loadUnloadedRanges(N));
     }
   }, {
     key: "_loadUnloadedRanges",
     value: function(i) {
-      for (var r = this, I = this.props.loadMoreItems || this.props.loadMoreRows, u = function(h) {
-        var A = i[h], D = i[h + 1], N = I(A, D);
+      for (var r = this, m = this.props.loadMoreItems || this.props.loadMoreRows, u = function(h) {
+        var y = i[h], D = i[h + 1], N = m(y, D);
         N != null && N.then(function() {
           if (Fn({
             lastRenderedStartIndex: r._lastRenderedStartIndex,
             lastRenderedStopIndex: r._lastRenderedStopIndex,
-            startIndex: A,
+            startIndex: y,
             stopIndex: D
           })) {
             if (r._listRef == null)
               return;
-            typeof r._listRef.resetAfterIndex == "function" ? r._listRef.resetAfterIndex(A, !0) : (typeof r._listRef._getItemStyleCache == "function" && r._listRef._getItemStyleCache(-1), r._listRef.forceUpdate());
+            typeof r._listRef.resetAfterIndex == "function" ? r._listRef.resetAfterIndex(y, !0) : (typeof r._listRef._getItemStyleCache == "function" && r._listRef._getItemStyleCache(-1), r._listRef.forceUpdate());
           }
         });
-      }, m = 0; m < i.length; m += 2)
-        u(m);
+      }, I = 0; I < i.length; I += 2)
+        u(I);
     }
   }]), t;
-}(Ae);
+}(ye);
 const Kn = /* @__PURE__ */ o("div")({
   name: "Container",
   class: "culdu4a",
@@ -1186,9 +1195,9 @@ const Kn = /* @__PURE__ */ o("div")({
   name: n,
   points: i,
   isCurrentUser: r,
-  openItemDetail: I,
+  openItemDetail: m,
   style: u
-}) => /* @__PURE__ */ p(Kn, { onClick: I, style: u, children: [
+}) => /* @__PURE__ */ p(Kn, { onClick: m, style: u, children: [
   /* @__PURE__ */ s(Xn, { children: e || 0 }),
   /* @__PURE__ */ p(ns, { children: [
     t ? /* @__PURE__ */ s(es, { alt: "leaderboard-item-avatar", src: t }) : /* @__PURE__ */ s(ts, { children: Te(n || "") }),
@@ -1207,21 +1216,21 @@ const Kn = /* @__PURE__ */ o("div")({
   currentUserId: t,
   openItemDetail: n,
   fetchMore: i
-}) => /* @__PURE__ */ s(Re, { children: ({ width: r, height: I }) => /* @__PURE__ */ s(
+}) => /* @__PURE__ */ s(Re, { children: ({ width: r, height: m }) => /* @__PURE__ */ s(
   Jn,
   {
     isItemLoaded: (u) => u < e.length,
     itemCount: e.length + 1,
     loadMoreItems: i,
-    children: ({ onItemsRendered: u, ref: m }) => /* @__PURE__ */ s(ls, { children: /* @__PURE__ */ s(
+    children: ({ onItemsRendered: u, ref: I }) => /* @__PURE__ */ s(ls, { children: /* @__PURE__ */ s(
       Vn,
       {
         itemSize: 56,
         onItemsRendered: u,
-        ref: m,
+        ref: I,
         itemCount: e.length,
         width: r,
-        height: I,
+        height: m,
         children: ({ index: d, style: h }) => /* @__PURE__ */ s(
           as,
           {
@@ -1284,7 +1293,7 @@ const Kn = /* @__PURE__ */ o("div")({
   name: "QuestionAction",
   class: "q105uluy",
   propsAsIs: !1
-}), fs = () => j, P = /* @__PURE__ */ o(fs())({
+}), fs = () => j, Y = /* @__PURE__ */ o(fs())({
   name: "QuestionActionIcon",
   class: "q1fa0b9h",
   propsAsIs: !0
@@ -1300,37 +1309,37 @@ const Kn = /* @__PURE__ */ o("div")({
   name: "QuestionContent",
   class: "q1uz5j1g",
   propsAsIs: !1
-}), As = /* @__PURE__ */ o("button")({
+}), ys = /* @__PURE__ */ o("button")({
   name: "PlayButton",
   class: "p1pba9p1",
   propsAsIs: !1
-}), ys = {
-  [q.LOST]: /* @__PURE__ */ s(P, { name: "icon-cross" }),
-  [q.WON]: /* @__PURE__ */ s(P, { name: "icon-check" }),
-  [q.UNSET]: /* @__PURE__ */ s(P, { name: "icon-arrow" }),
-  [q.DNP]: /* @__PURE__ */ s(P, { name: "icon-arrow" })
+}), As = {
+  [q.LOST]: /* @__PURE__ */ s(Y, { name: "icon-cross" }),
+  [q.WON]: /* @__PURE__ */ s(Y, { name: "icon-check" }),
+  [q.UNSET]: /* @__PURE__ */ s(Y, { name: "icon-arrow" }),
+  [q.DNP]: /* @__PURE__ */ s(Y, { name: "icon-arrow" })
 }, Ts = ({
   questionId: e,
   questionType: t,
   questionStatus: n,
   subject: i,
   openForVoting: r,
-  openQuestion: I,
+  openQuestion: m,
   status: u
 }) => {
-  const m = Ne[t], d = ys[u];
-  return m ? /* @__PURE__ */ p(ps, { onClick: () => I == null ? void 0 : I(e), children: [
+  const I = Ne[t], d = As[u];
+  return I ? /* @__PURE__ */ p(ps, { onClick: () => m == null ? void 0 : m(e), children: [
     /* @__PURE__ */ p(Ns, { children: [
       /* @__PURE__ */ p(ms, { children: [
-        /* @__PURE__ */ s(Ms, { name: m.iconName }),
+        /* @__PURE__ */ s(Ms, { name: I.iconName }),
         /* @__PURE__ */ p(vs, { children: [
-          m.label,
+          I.label,
           t === x.TRIVIA && n === Q.RESOLVED && " • Expired"
         ] })
       ] }),
       /* @__PURE__ */ s(Is, { children: i || "" })
     ] }),
-    /* @__PURE__ */ s(hs, { children: r ? /* @__PURE__ */ s(As, { children: "Play" }) : d })
+    /* @__PURE__ */ s(hs, { children: r ? /* @__PURE__ */ s(ys, { children: "Play" }) : d })
   ] }) : null;
 }, Ds = /* @__PURE__ */ o("div")({
   name: "Container",
@@ -1354,12 +1363,12 @@ const Kn = /* @__PURE__ */ o("div")({
 }), js = ({ questions: e, openQuestion: t }) => /* @__PURE__ */ s(xs, { children: e == null ? void 0 : e.map((n) => {
   var i, r;
   if (n.type === "question" && ((i = n.attributes) == null ? void 0 : i.attributes.case) === "question") {
-    const I = n.attributes.attributes.value;
-    return /* @__PURE__ */ s(Ts, { openQuestion: t, ...I }, I.questionId);
+    const m = n.attributes.attributes.value;
+    return /* @__PURE__ */ s(Ts, { openQuestion: t, ...m }, m.questionId);
   }
   if (n.type === "insight" && ((r = n.attributes) == null ? void 0 : r.attributes.case) === "insight") {
-    const I = n.attributes.attributes.value;
-    return /* @__PURE__ */ s(zs, { openInsight: t, ...I }, I.questionId);
+    const m = n.attributes.attributes.value;
+    return /* @__PURE__ */ s(zs, { openInsight: t, ...m }, m.questionId);
   }
   return null;
 }) }), Os = ({ store: e, openQuestion: t }) => {
@@ -1437,7 +1446,7 @@ const Kn = /* @__PURE__ */ o("div")({
     }), i && /* @__PURE__ */ s(ve, {
       className: t,
       children: /* @__PURE__ */ p(bs, {
-        children: [/* @__PURE__ */ s(ye, {
+        children: [/* @__PURE__ */ s(Ae, {
           label: "Friend's Rank",
           close: e.closeUser
         }), /* @__PURE__ */ s(K, {