@streamlayer/react 0.30.0 → 0.30.2

package/lib/es/gamification-feature.js

@@ -0,0 +1,1443 @@
+import { jsxs as u, jsx as s, Fragment as E } from "react/jsx-runtime";
+import { s as o, i as j } from "./index3.js";
+import { useStore as w } from "@nanostores/react";
+import { o as Ne, r as te, w as $e, A as Re, O as Qe, c as Ue, a as K, n as _e, d as qe } from "./masters2.js";
+import { useState as R, useCallback as V, useMemo as P, createElement as B, PureComponent as Ae } from "react";
+import { QuestionType as x, QuestionStatus as Q, QuestionImages as b, PickHistoryStatus as q } from "@streamlayer/sdk-web-types";
+import { o as ye, i as Te, r as Ye, a as Pe, n as We } from "./common.js";
+import { CountdownCircleTimer as Ve } from "react-countdown-circle-timer";
+import { E as L } 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 Fe = /* @__PURE__ */ o("div")({
+  name: "Container",
+  class: "c1vwopgc",
+  propsAsIs: !1
+}), Be = /* @__PURE__ */ o("div")({
+  name: "QuestionTypeWrap",
+  class: "qyktpt0",
+  propsAsIs: !1
+}), He = () => j, Ze = /* @__PURE__ */ o(He())({
+  name: "QuestionTypeIcon",
+  class: "q951jdx",
+  propsAsIs: !0
+}), Ge = /* @__PURE__ */ o("span")({
+  name: "QuestionTypeTitle",
+  class: "qss5f0e",
+  propsAsIs: !1
+}), Je = /* @__PURE__ */ o("button")({
+  name: "CloseButton",
+  class: "c1ao1jtv",
+  propsAsIs: !1
+}), Ke = () => j, Xe = /* @__PURE__ */ o(Ke())({
+  name: "CloseIcon",
+  class: "cvsl7l3",
+  propsAsIs: !0
+}), De = ({ type: e, close: t, label: n }) => {
+  const i = e ? Ne[e] : { label: n, iconName: void 0 };
+  return /* @__PURE__ */ u(Fe, { children: [
+    /* @__PURE__ */ u(Be, { children: [
+      (i == null ? void 0 : i.iconName) && /* @__PURE__ */ s(Ze, { name: i.iconName }),
+      (i == null ? void 0 : i.label) && /* @__PURE__ */ s(Ge, { children: i.label })
+    ] }),
+    /* @__PURE__ */ s(Je, { onClick: t, children: /* @__PURE__ */ s(Xe, { name: "icon-cross" }) })
+  ] });
+}, et = /* @__PURE__ */ o("div")({
+  name: "Container",
+  class: "c1zy8a",
+  propsAsIs: !1
+}), tt = /* @__PURE__ */ o("div")({
+  name: "Title",
+  class: "t1vih9p5",
+  propsAsIs: !1
+}), nt = /* @__PURE__ */ o("div")({
+  name: "Indicator",
+  class: "i1fbnvpb",
+  propsAsIs: !1
+}), oe = ({ indicator: e, title: t }) => /* @__PURE__ */ u(et, { children: [
+  /* @__PURE__ */ s(tt, { children: t }),
+  /* @__PURE__ */ s(nt, { children: e })
+] }), st = /* @__PURE__ */ o("div")({
+  name: "Container",
+  class: "ctmhwyc",
+  propsAsIs: !1
+}), it = /* @__PURE__ */ o("div")({
+  name: "Indicator",
+  class: "i1jri200",
+  propsAsIs: !1
+}), rt = /* @__PURE__ */ o("div")({
+  name: "Title",
+  class: "t8s05oq",
+  propsAsIs: !1
+}), Y = ({ indicator: e, title: t }) => /* @__PURE__ */ u(st, { children: [
+  /* @__PURE__ */ s(it, { children: e }),
+  /* @__PURE__ */ s(rt, { children: t })
+] }), ot = /* @__PURE__ */ o("div")({
+  name: "Container",
+  class: "c1yrpn9o",
+  propsAsIs: !1
+}), at = /* @__PURE__ */ o("div")({
+  name: "TopInfo",
+  class: "t17fwahh",
+  propsAsIs: !1
+}), lt = /* @__PURE__ */ o("div")({
+  name: "BottomInfo",
+  class: "by6w7e9",
+  propsAsIs: !1
+}), ct = /* @__PURE__ */ o("div")({
+  name: "User",
+  class: "u1g7arbm",
+  propsAsIs: !1
+}), dt = /* @__PURE__ */ o("img")({
+  name: "Avatar",
+  class: "a1ldeata",
+  propsAsIs: !1
+}), ut = /* @__PURE__ */ o("div")({
+  name: "UserInfo",
+  class: "u10d4koz",
+  propsAsIs: !1
+}), pt = /* @__PURE__ */ o("div")({
+  name: "UserName",
+  class: "u1q6roj0",
+  propsAsIs: !1
+}), mt = /* @__PURE__ */ o("div")({
+  name: "UserRating",
+  class: "ui0m425",
+  propsAsIs: !1
+}), It = /* @__PURE__ */ o("img")({
+  name: "TrophyIcon",
+  class: "t1el3mrn",
+  propsAsIs: !1
+}), ht = /* @__PURE__ */ o("div")({
+  name: "Rts",
+  class: "r2vgnxv",
+  propsAsIs: !1
+}), ft = /* @__PURE__ */ o("div")({
+  name: "RtsIndicator",
+  class: "roqn06j",
+  propsAsIs: !1
+}), gt = /* @__PURE__ */ o("div")({
+  name: "RtsLabel",
+  class: "r15adx7c",
+  propsAsIs: !1
+}), Mt = /* @__PURE__ */ o("div")({
+  name: "Divider",
+  class: "dv59lta",
+  propsAsIs: !1
+}), vt = /* @__PURE__ */ o("div")({
+  name: "Ranks",
+  class: "r55lotb",
+  propsAsIs: !1
+}), Nt = /* @__PURE__ */ o("div")({
+  name: "Statistics",
+  class: "s1knfgqt",
+  propsAsIs: !1
+}), At = /* @__PURE__ */ o("div")({
+  name: "AvatarPlaceholder",
+  class: "a1mqo824",
+  propsAsIs: !1
+}), yt = /* @__PURE__ */ o("button")({
+  name: "UserAccountBtn",
+  class: "uxareh6",
+  propsAsIs: !1
+}), Tt = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlRyb3BoeSI+CjxwYXRoIGlkPSJDb21iaW5lZCBTaGFwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjY5MTk3IDQuNjY2NjJDMy42OTE5NyA1Ljk5NzA1IDMuOTI5MTQgNy4xNzc4NyA0LjQwMzUgOC4yMDkxMkMzLjQ5OTY2IDguMDI0NTEgMi43NDQ4NyA3LjY2NDg2IDIuMTM5MSA3LjEzMDE0QzEuNTMzMzMgNi41OTU0MiAxLjIzMDQ2IDYuMDc5OCAxLjIzMDQ2IDUuNTgzMjhWNC42NjY2MkgzLjY5MTk3Wk0xNC43Njg2IDQuNjY2NjJWNS41ODMyOEMxNC43Njg2IDYuMDc5OCAxNC40NjU4IDYuNTk1NDIgMTMuODYgNy4xMzAxNEMxMy4yNTQyIDcuNjY0ODYgMTIuNDk5NCA4LjAyNDUxIDExLjU5NTYgOC4yMDkxMkMxMi4wNjk5IDcuMTc3ODcgMTIuMzA3MSA1Ljk5NzA1IDEyLjMwNzEgNC42NjY2MkgxNC43Njg2Wk0xNS45OTk4IDUuNTgzMjlWNC4zNjEwOEMxNS45OTk4IDQuMTA2NDUgMTUuOTEwMSAzLjg5MDAyIDE1LjczMDYgMy43MTE3OEMxNS41NTExIDMuNTMzNTQgMTUuMzMzMiAzLjQ0NDQyIDE1LjA3NjggMy40NDQ0MkgxMi4zMDc2VjIuNTI3NzZDMTIuMzA3NiAyLjEwNzYzIDEyLjE1NjkgMS43NDc5NyAxMS44NTU2IDEuNDQ4NzhDMTEuNTU0NCAxLjE0OTU5IDExLjE5MjIgMSAxMC43NjkxIDFINS4yMzA3MkM0LjgwNzY0IDEgNC40NDU0NyAxLjE0OTU5IDQuMTQ0MTkgMS40NDg3OEMzLjg0MjkxIDEuNzQ3OTcgMy42OTIyNyAyLjEwNzYzIDMuNjkyMjcgMi41Mjc3NlYzLjQ0NDQySDAuOTIzMDY4QzAuNjY2NjU5IDMuNDQ0NDIgMC40NDg3MTQgMy41MzM1NCAwLjI2OTIyOCAzLjcxMTc4QzAuMDg5NzQxOCAzLjg5MDAyIDAgNC4xMDY0NSAwIDQuMzYxMDhWNS41ODMyOUMwIDYuMDM1MjUgMC4xMzMwMSA2LjQ5MDM5IDAuMzk5MDM0IDYuOTQ4NzJDMC42NjUwNTkgNy40MDcwNSAxLjAyNDAzIDcuODIwODIgMS40NzU5NSA4LjE5MDAzQzEuOTI3ODcgOC41NTkyNCAyLjQ4MjM0IDguODY5NTcgMy4xMzkzOSA5LjEyMTAxQzMuNzk2NDQgOS4zNzI0NiA0LjQ4NzEzIDkuNTE0MDkgNS4yMTE0OSA5LjU0NTkyQzUuNDgwNzEgOS44ODk2NyA1Ljc4NTIgMTAuMTkyIDYuMTI0OTQgMTAuNDUzQzYuMzY4NTMgMTAuNjY5NSA2LjUzNjc5IDEwLjkwMDIgNi42Mjk3NCAxMS4xNDUzQzYuNzIyNjkgMTEuMzkwNCA2Ljc2OTE2IDExLjY3NTIgNi43NjkxNiAxMS45OTk5QzYuNzY5MTYgMTIuMzQzNiA2LjY3MTQxIDEyLjYzMzMgNi40NzU5IDEyLjg2ODhDNi4yODAzOCAxMy4xMDQzIDUuOTY3ODkgMTMuMjIyMSA1LjUzODQxIDEzLjIyMjFDNS4wNTc2NCAxMy4yMjIxIDQuNjI5NzYgMTMuMzY2OSA0LjI1NDc2IDEzLjY1NjZDMy44Nzk3NyAxMy45NDYyIDMuNjkyMjcgMTQuMzEwNiAzLjY5MjI3IDE0Ljc0OTlWMTUuMzYxQzMuNjkyMjcgMTUuNDUwMSAzLjcyMTEyIDE1LjUyMzMgMy43Nzg4MSAxNS41ODA2QzMuODM2NSAxNS42Mzc5IDMuOTEwMjIgMTUuNjY2NSAzLjk5OTk2IDE1LjY2NjVIMTEuOTk5OUMxMi4wODk2IDE1LjY2NjUgMTIuMTYzMyAxNS42Mzc5IDEyLjIyMSAxNS41ODA2QzEyLjI3ODcgMTUuNTIzMyAxMi4zMDc2IDE1LjQ1MDEgMTIuMzA3NiAxNS4zNjFWMTQuNzQ5OUMxMi4zMDc2IDE0LjMxMDYgMTIuMTIwMSAxMy45NDYyIDExLjc0NTEgMTMuNjU2NkMxMS4zNzAxIDEzLjM2NjkgMTAuOTQyMiAxMy4yMjIxIDEwLjQ2MTQgMTMuMjIyMUMxMC4wMzE5IDEzLjIyMjEgOS43MTk0NSAxMy4xMDQzIDkuNTIzOTQgMTIuODY4OEM5LjMyODQzIDEyLjYzMzMgOS4yMzA2OCAxMi4zNDM2IDkuMjMwNjggMTEuOTk5OUM5LjIzMDY4IDExLjY3NTIgOS4yNzcxNSAxMS4zOTA0IDkuMzcwMSAxMS4xNDUzQzkuNDYzMDUgMTAuOTAwMiA5LjYzMTMxIDEwLjY2OTUgOS44NzQ5IDEwLjQ1M0MxMC4yMTQ2IDEwLjE5MiAxMC41MTkxIDkuODg5NjcgMTAuNzg4NCA5LjU0NTkyQzExLjUxMjcgOS41MTQwOSAxMi4yMDM0IDkuMzcyNDYgMTIuODYwNCA5LjEyMTAxQzEzLjUxNzUgOC44Njk1NyAxNC4wNzIgOC41NTkyNCAxNC41MjM5IDguMTkwMDNDMTQuOTc1OCA3LjgyMDgyIDE1LjMzNDggNy40MDcwNSAxNS42MDA4IDYuOTQ4NzJDMTUuODY2OCA2LjQ5MDM5IDE1Ljk5OTggNi4wMzUyNSAxNS45OTk4IDUuNTgzMjlaTTYuNzYwNDcgNy4xNzk4TDguMDUxMDkgNi40OTk5N0w5LjM0MTcgNy4xNzk4TDkuMDk1MjEgNS43Mzk4OUwxMC4xMzkzIDQuNzIwMTVMOC42OTYzOSA0LjUxMDA3TDguMDUxMDkgMy4yTDcuNDA1NzggNC41MTAwN0w1Ljk2MjgzIDQuNzIwMTVMNy4wMDY5NiA1LjczOTg5TDYuNzYwNDcgNy4xNzk4WiIgZmlsbD0iI0YyQzk0QyIvPgo8L2c+Cjwvc3ZnPgo=", Se = ({
+  avatar: e,
+  name: t,
+  points: n,
+  friendsRank: i,
+  rank: r,
+  streak: I,
+  correct: m,
+  incorrect: p,
+  inTop: d,
+  successRate: f
+}) => /* @__PURE__ */ u(ot, { children: [
+  /* @__PURE__ */ s(at, { children: /* @__PURE__ */ u(ct, { children: [
+    /* @__PURE__ */ u(yt, { children: [
+      e && /* @__PURE__ */ s(dt, { alt: "avatar", src: e }),
+      !e && /* @__PURE__ */ s(At, { children: ye(t || "") })
+    ] }),
+    /* @__PURE__ */ u(ut, { children: [
+      /* @__PURE__ */ s(pt, { children: t }),
+      /* @__PURE__ */ u(mt, { children: [
+        /* @__PURE__ */ u(ht, { children: [
+          /* @__PURE__ */ s(It, { alt: "rank-icon", src: Tt }),
+          /* @__PURE__ */ u(ft, { children: [
+            Te(n),
+            /* @__PURE__ */ s(gt, { children: "PTS" })
+          ] })
+        ] }),
+        /* @__PURE__ */ s(Mt, {}),
+        /* @__PURE__ */ u("div", { children: [
+          "TOP ",
+          d || 0,
+          "%"
+        ] })
+      ] })
+    ] })
+  ] }) }),
+  /* @__PURE__ */ u(lt, { children: [
+    /* @__PURE__ */ u(vt, { children: [
+      /* @__PURE__ */ s(oe, { indicator: i || 0, title: "Friends rank" }),
+      /* @__PURE__ */ s(oe, { indicator: r || 0, title: "Global rank" })
+    ] }),
+    /* @__PURE__ */ u(Nt, { children: [
+      /* @__PURE__ */ s(Y, { indicator: I || 0, title: "Win streak" }),
+      /* @__PURE__ */ s(Y, { indicator: m || 0, title: "Correct" }),
+      /* @__PURE__ */ s(Y, { indicator: p || 0, title: "Incorrect" }),
+      /* @__PURE__ */ s(Y, { indicator: `${f || 0}%`, title: "Succ. rate" })
+    ] })
+  ] })
+] }), Dt = /* @__PURE__ */ o("div")({
+  name: "Container",
+  class: "c38csyt",
+  propsAsIs: !1
+}), St = /* @__PURE__ */ o("div")({
+  name: "Title",
+  class: "ty221rx",
+  propsAsIs: !1
+}), zt = /* @__PURE__ */ o("div")({
+  name: "Description",
+  class: "dlaj9xp",
+  propsAsIs: !1
+}), xt = ({ title: e, description: t }) => /* @__PURE__ */ u(Dt, { children: [
+  /* @__PURE__ */ s(j, { name: "icon-check-circle" }),
+  /* @__PURE__ */ s(St, { children: e }),
+  /* @__PURE__ */ s(zt, { children: t })
+] }), jt = /* @__PURE__ */ o("div")({
+  name: "Container",
+  class: "c16sbdnm",
+  propsAsIs: !1
+}), Ot = () => j, kt = /* @__PURE__ */ o(Ot())({
+  name: "IconPrediction",
+  class: "ibhorgl",
+  propsAsIs: !0
+}), ae = /* @__PURE__ */ o("div")({
+  name: "FeedbackIconWrap",
+  class: "f1g20ja7",
+  propsAsIs: !1
+}), le = /* @__PURE__ */ o("div")({
+  name: "FeedbackHeader",
+  class: "f455ozj",
+  propsAsIs: !1
+}), wt = /* @__PURE__ */ o("span")({
+  name: "FeedbackTitle",
+  class: "f1913njx",
+  propsAsIs: !1
+}), H = /* @__PURE__ */ o("span")({
+  name: "FeedbackDescription",
+  class: "fzfk69z",
+  propsAsIs: !1
+}), Ct = /* @__PURE__ */ o("div")({
+  name: "FeedbackText",
+  class: "fx87qaj",
+  propsAsIs: !1
+}), bt = ({
+  feedbackMessages: e,
+  questionVotedCorrectly: t,
+  questionVoted: n,
+  questionType: i,
+  hasCorrectAnswer: r,
+  questionStatus: I
+}) => {
+  const m = n && (i === x.TRIVIA || i === x.PREDICTION);
+  if (!m && I !== Q.RESOLVED)
+    return null;
+  const p = i === x.PREDICTION && !r, d = t ? "correct" : "incorrect", f = t ? e.correctFeedback : e.incorrectFeedback;
+  return /* @__PURE__ */ u(jt, { "data-isPrediction": p, children: [
+    I === Q.RESOLVED && i === x.TRIVIA && !n && /* @__PURE__ */ u(E, { children: [
+      /* @__PURE__ */ s(ae, { children: /* @__PURE__ */ s(j, { name: "questionExpired" }) }),
+      /* @__PURE__ */ u("div", { children: [
+        /* @__PURE__ */ s(le, { children: /* @__PURE__ */ s(H, { children: "Question Expired" }) }),
+        /* @__PURE__ */ s(Ct, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
+      ] })
+    ] }),
+    m && p && /* @__PURE__ */ u(E, { children: [
+      /* @__PURE__ */ s(kt, { name: "icon-prediction" }),
+      /* @__PURE__ */ s(H, { children: "Stay tuned to see if your prediction was correct." })
+    ] }),
+    m && r && /* @__PURE__ */ u(E, { children: [
+      /* @__PURE__ */ s(ae, { "data-feedbackType": d, children: /* @__PURE__ */ s(j, { name: d }) }),
+      /* @__PURE__ */ s("div", { children: /* @__PURE__ */ u(le, { children: [
+        /* @__PURE__ */ s(wt, { "data-feedbackType": d, children: f == null ? void 0 : f.title }),
+        /* @__PURE__ */ s(H, { children: f == null ? void 0 : f.description })
+      ] }) })
+    ] })
+  ] });
+}, Et = /* @__PURE__ */ o("div")({
+  name: "Container",
+  class: "c14ielyq",
+  propsAsIs: !1
+}), Lt = /* @__PURE__ */ o("div")({
+  name: "Content",
+  class: "c1tlqx57",
+  propsAsIs: !1
+}), $t = /* @__PURE__ */ o("div")({
+  name: "Title",
+  class: "t1hq58md",
+  propsAsIs: !1
+}), Rt = /* @__PURE__ */ o("div")({
+  name: "Options",
+  class: "o1c8nxcx",
+  propsAsIs: !1
+}), Qt = /* @__PURE__ */ o("button")({
+  name: "ButtonContainer",
+  class: "b1b6dl8t",
+  propsAsIs: !1
+}), Ut = /* @__PURE__ */ o("div")({
+  name: "ButtonPct",
+  class: "b4iik8i",
+  propsAsIs: !1
+}), _t = /* @__PURE__ */ o("span")({
+  name: "ButtonBody",
+  class: "b1gq1lnf",
+  propsAsIs: !1
+}), qt = /* @__PURE__ */ o("div")({
+  name: "IconContainer",
+  class: "i1j65z51",
+  propsAsIs: !1
+}), Yt = /* @__PURE__ */ o("div")({
+  name: "IconWrap",
+  class: "i19tpfua",
+  propsAsIs: !1
+}), ze = /* @__PURE__ */ o("img")({
+  name: "Icon",
+  class: "i1tubmma",
+  propsAsIs: !1
+}), Pt = () => ze, Wt = /* @__PURE__ */ o(Pt())({
+  name: "IconDefault",
+  class: "i1grrgwj",
+  propsAsIs: !0
+}), Vt = () => ze, Ft = /* @__PURE__ */ o(Vt())({
+  name: "IconCircle",
+  class: "ibemyq8",
+  propsAsIs: !0
+}), Bt = /* @__PURE__ */ o("span")({
+  name: "Title",
+  class: "t1dceht",
+  propsAsIs: !1
+}), Ht = /* @__PURE__ */ o("span")({
+  name: "Indicators",
+  class: "i116q4vq",
+  propsAsIs: !1
+}), Zt = /* @__PURE__ */ o("span")({
+  name: "Percentage",
+  class: "p17ajcu2",
+  propsAsIs: !1
+}), Gt = () => j, Jt = /* @__PURE__ */ o(Gt())({
+  name: "CheckIcon",
+  class: "cu9kmlb",
+  propsAsIs: !0
+}), ce = {
+  [b.CENTERED]: (e) => /* @__PURE__ */ s(Wt, { alt: "option-icon", src: e }),
+  [b.TRANSPARENT]: (e) => /* @__PURE__ */ s(qt, { children: /* @__PURE__ */ s(Yt, { style: { backgroundImage: `url(${e})` } }) }),
+  [b.ROUNDED]: (e) => /* @__PURE__ */ s(Ft, { alt: "option-icon", src: e }),
+  [b.NONE]: () => null,
+  [b.UNSET]: () => null
+}, Kt = ({ questionType: e, hasCorrectAnswer: t, correct: n, youVoted: i, questionVoted: r }) => {
+  if (e === x.POLL && i)
+    return "correct";
+  if (e === x.PREDICTION) {
+    if (t && r)
+      return i ? n ? "correct" : "incorrect" : n ? "correct" : "unset";
+    if (i)
+      return "correct";
+  }
+  return e === x.TRIVIA && r ? i ? n ? "correct" : "incorrect" : n ? "correct" : "unset" : "unset";
+}, Xt = ({
+  questionType: e,
+  questionVoted: t,
+  correct: n,
+  hasCorrectAnswer: i,
+  questionStatus: r
+}) => e === x.TRIVIA ? t && n : e === x.PREDICTION ? t && n && i || r === Q.RESOLVED && n : !1, en = (e) => {
+  var t;
+  const {
+    // option props
+    id: n,
+    icon: i,
+    text: r,
+    percentageDecimal: I,
+    // extra props
+    onVote: m,
+    youSelected: p,
+    questionVoted: d,
+    // ToDo: Figure out why imageMode is not in the response, and delete default value
+    imageMode: f = b.ROUNDED,
+    answerTimeExpired: A,
+    questionStatus: D,
+    isLoading: N,
+    questionType: y,
+    correct: T,
+    hasCorrectAnswer: a
+  } = e, l = Kt(e), c = Xt({ questionType: y, questionVoted: d, correct: T, hasCorrectAnswer: a, questionStatus: D }), h = d || D === Q.RESOLVED && y === x.PREDICTION;
+  return /* @__PURE__ */ u(
+    Qt,
+    {
+      value: n,
+      "data-selected": p,
+      "data-answerState": l,
+      disabled: d || N || A,
+      onClick: m,
+      children: [
+        h && /* @__PURE__ */ s(Ut, { "data-answerState": l, style: { width: `${I}%` } }),
+        /* @__PURE__ */ u(_t, { children: [
+          i && ((t = ce[f]) == null ? void 0 : t.call(ce, i)),
+          /* @__PURE__ */ s(Bt, { children: r }),
+          h && /* @__PURE__ */ u(Ht, { children: [
+            c && /* @__PURE__ */ s(Jt, { name: "selected" }),
+            /* @__PURE__ */ u(Zt, { children: [
+              I,
+              "%"
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}, tn = [L.PRIMARY_GREEN1, L.SECONDARY_RED1, L.SECONDARY_RED1], nn = [10, 10, 0], sn = /* @__PURE__ */ o("div")({
+  name: "RemainingTime",
+  class: "r165427",
+  propsAsIs: !1
+}), rn = L.SECONDARY_GREEN6, de = L.SECONDARY_RED3, on = L.NEUTRALS_GRAY3, an = ({
+  isPlaying: e = !0,
+  duration: t = 30,
+  onTimerExpired: n
+}) => {
+  const [i, r] = R(t > 10 ? rn : de), I = ({
+    remainingTime: d
+  }) => /* @__PURE__ */ s(sn, {
+    children: d
+  }), m = V(() => {
+    n == null || n(), r(on);
+  }, [n, r]), p = V((d) => {
+    d === 10 && r(de);
+  }, [r]);
+  return /* @__PURE__ */ s(Ve, {
+    isPlaying: e,
+    duration: t,
+    colors: tn,
+    colorsTime: nn,
+    size: 32,
+    strokeWidth: 2,
+    trailStrokeWidth: 2,
+    trailColor: i,
+    onComplete: m,
+    onUpdate: p,
+    children: I
+  });
+}, ln = /* @__PURE__ */ o("div")({
+  name: "WinBarContainer",
+  class: "wie6cqo",
+  propsAsIs: !1
+}), cn = /* @__PURE__ */ o("div")({
+  name: "Content",
+  class: "cgizw4u",
+  propsAsIs: !1
+}), dn = /* @__PURE__ */ o("div")({
+  name: "Title",
+  class: "t1l3ucjp",
+  propsAsIs: !1
+}), un = () => j, pn = /* @__PURE__ */ o(un())({
+  name: "WinIcon",
+  class: "wx7j799",
+  propsAsIs: !0
+}), mn = /* @__PURE__ */ o("div")({
+  name: "Points",
+  class: "p4lwuj0",
+  propsAsIs: !1
+}), In = /* @__PURE__ */ o("span")({
+  name: "PointsCount",
+  class: "po9i64o",
+  propsAsIs: !1
+}), hn = /* @__PURE__ */ o("span")({
+  name: "PointsUnits",
+  class: "pe5g05h",
+  propsAsIs: !1
+}), fn = ({ title: e, points: t, isPlayingTimer: n, isTimer: i, onTimerExpired: r }) => /* @__PURE__ */ u(ln, { children: [
+  /* @__PURE__ */ u(cn, { children: [
+    e && /* @__PURE__ */ s(dn, { children: e }),
+    t !== void 0 && /* @__PURE__ */ u(E, { children: [
+      /* @__PURE__ */ s(pn, { name: "icon-trophy" }),
+      /* @__PURE__ */ u(mn, { children: [
+        /* @__PURE__ */ s(In, { children: t }),
+        /* @__PURE__ */ s(hn, { children: "PTS" })
+      ] })
+    ] })
+  ] }),
+  i && /* @__PURE__ */ s(an, { isPlaying: n, onTimerExpired: r })
+] }), gn = ({ openedQuestion: e, vote: t, close: n }) => {
+  var i;
+  const r = e.subject, I = e.type, m = (i = e.options) == null ? void 0 : i.options, [p, d] = R(!1), [f, A] = R(!1), [D, N] = R(""), y = e == null ? void 0 : e.id, T = V(
+    async (v) => {
+      if (y) {
+        const g = v.currentTarget.value;
+        N(g), A(!0), await t(y, g), A(!1);
+      }
+    },
+    [y, N, t]
+  ), a = V(() => {
+    d(!0), setTimeout(n, 3e3);
+  }, [n]), l = P(
+    () => e == null ? void 0 : e.answers.find((v) => v.youVoted === !0),
+    [e]
+  ), c = P(
+    () => !!(e != null && e.answers.find((v) => v.correct === !0)),
+    [e]
+  ), h = P(() => e ? e.answers.map((v) => ({
+    ...v,
+    questionVoted: !!l,
+    youSelected: D === v.id,
+    isLoading: f,
+    hasCorrectAnswer: c,
+    questionType: e.type,
+    answerTimeExpired: p,
+    questionStatus: e.status,
+    // ToDo: Figure out why imageMode is not in the response
+    onVote: T
+  })) : [], [c, p, f, e, l, T, D]), M = m && (m.case === "trivia" || m.case === "prediction") ? m.value : void 0;
+  return /* @__PURE__ */ s(te, { "data-question-header": "true", children: /* @__PURE__ */ s(Et, { children: /* @__PURE__ */ u(Lt, { children: [
+    M && /* @__PURE__ */ s(
+      bt,
+      {
+        feedbackMessages: M,
+        questionVoted: !!l,
+        questionVotedCorrectly: l == null ? void 0 : l.correct,
+        questionType: I,
+        hasCorrectAnswer: c,
+        questionStatus: e.status
+      }
+    ),
+    /* @__PURE__ */ s(
+      fn,
+      {
+        title: p ? "Time expired" : "To win",
+        points: p ? void 0 : 100,
+        onTimerExpired: a,
+        isTimer: !0
+      }
+    ),
+    p ? /* @__PURE__ */ s(
+      xt,
+      {
+        title: "More to come...",
+        description: "Watch for additional enhanced stream interactive experience."
+      }
+    ) : /* @__PURE__ */ u(E, { children: [
+      /* @__PURE__ */ s($t, { children: r }),
+      /* @__PURE__ */ s(Rt, { children: h.map((v) => /* @__PURE__ */ s(en, { ...v }, v.id)) })
+    ] })
+  ] }) }) });
+}, Mn = /* @__PURE__ */ o("div")({
+  name: "Container",
+  class: "cgn5uen",
+  propsAsIs: !1
+}), vn = /* @__PURE__ */ o("div")({
+  name: "Content",
+  class: "c1px8nt6",
+  propsAsIs: !1
+}), Nn = /* @__PURE__ */ o("h3")({
+  name: "Title",
+  class: "t5et2jt",
+  propsAsIs: !1
+}), An = /* @__PURE__ */ o("div")({
+  name: "Description",
+  class: "d1i2kpk2",
+  propsAsIs: !1
+}), yn = /* @__PURE__ */ o("div")({
+  name: "DateWrap",
+  class: "dd3lh3p",
+  propsAsIs: !1
+}), xe = ({ created: e, title: t, instantView: n }) => {
+  const i = P(() => {
+    if (e) {
+      const r = new Date(e);
+      if (Ye(r))
+        return {
+          date: Pe(r),
+          time: We(r)
+        };
+    }
+    return null;
+  }, [e]);
+  return /* @__PURE__ */ u(Mn, { children: [
+    i && /* @__PURE__ */ u(yn, { children: [
+      i.date,
+      " · ",
+      i.time
+    ] }),
+    (n == null ? void 0 : n.video) && /* @__PURE__ */ s($e, { source: n.video.url, poster: n.video.thumbnailUrl }),
+    /* @__PURE__ */ u(vn, { children: [
+      /* @__PURE__ */ s(Nn, { children: (n == null ? void 0 : n.heading) || t }),
+      /* @__PURE__ */ s(An, { children: n == null ? void 0 : n.body })
+    ] })
+  ] });
+}, Tn = /* @__PURE__ */ o("div")({
+  name: "Container",
+  class: "c1euiow",
+  propsAsIs: !1
+}), Dn = /* @__PURE__ */ o("a")({
+  name: "WebLinkBtn",
+  class: "w19zie3h",
+  propsAsIs: !1
+}), Sn = ({ instantView: e, ...t }) => /* @__PURE__ */ u(Tn, { children: [
+  /* @__PURE__ */ s(xe, { instantView: e, ...t }),
+  (e == null ? void 0 : e.webLink) && /* @__PURE__ */ u(Dn, { href: e == null ? void 0 : e.webLink.url, target: "_blank", children: [
+    "Explore more of the Masters History",
+    /* @__PURE__ */ s(j, { name: "icon-external-link" })
+  ] })
+] }), zn = /* @__PURE__ */ o("div")({
+  name: "QuestionContainer",
+  class: "qdri6g3",
+  propsAsIs: !1
+}), xn = ({
+  openedQuestion: e
+}) => {
+  var t;
+  return ((t = e == null ? void 0 : e.attributes) == null ? void 0 : t.attributes.case) === "insight" ? /* @__PURE__ */ s(Sn, {
+    created: e.attributes.created,
+    ...e.attributes.attributes.value
+  }) : null;
+}, jn = ({
+  extendedQuestion: e,
+  vote: t,
+  close: n
+}) => {
+  const {
+    loading: i,
+    data: r
+  } = e;
+  return !i && r ? /* @__PURE__ */ s(gn, {
+    vote: t,
+    close: n,
+    openedQuestion: r
+  }) : null;
+}, On = ({
+  gamification: e
+}) => {
+  var t;
+  const n = w(e.openedQuestion.$store), i = w(e.openedQuestion.$extendedStore);
+  if (!n)
+    return null;
+  const r = n.type;
+  return /* @__PURE__ */ u(zn, {
+    children: [/* @__PURE__ */ s(De, {
+      close: e.closeQuestion,
+      type: ((t = n.attributes) == null ? void 0 : t.type) || x.UNSET
+    }), r === "question" && /* @__PURE__ */ s(jn, {
+      vote: e.submitAnswer,
+      close: e.closeQuestion,
+      extendedQuestion: i
+    }), r !== "question" && /* @__PURE__ */ s(xn, {
+      openedQuestion: n
+    })]
+  });
+}, kn = /* @__PURE__ */ o("div")({
+  name: "Container",
+  class: "c115qtkr",
+  propsAsIs: !1
+}), wn = /* @__PURE__ */ o("div")({
+  name: "STabs",
+  class: "sxnslc8",
+  propsAsIs: !1
+}), Cn = /* @__PURE__ */ o("button")({
+  name: "Button",
+  class: "b1umzux0",
+  propsAsIs: !1
+}), bn = /* @__PURE__ */ o("span")({
+  name: "Title",
+  class: "tspsaas",
+  propsAsIs: !1
+});
+var W = /* @__PURE__ */ ((e) => (e.HOME = "home", e.LEADERBOARD = "leaderboard", e))(W || {});
+const ue = ({ title: e, active: t, onClick: n }) => /* @__PURE__ */ s(Cn, { onClick: n, "data-selected": t, children: /* @__PURE__ */ s(bn, { children: e }) }), En = ({ activePage: e = "home", toggleActivePage: t }) => /* @__PURE__ */ s(kn, { children: /* @__PURE__ */ u(wn, { "data-position": e === "home" ? "left" : "right", children: [
+  /* @__PURE__ */ s(ue, { title: "Home", active: e === "home", onClick: () => t(
+    "home"
+    /* HOME */
+  ) }),
+  /* @__PURE__ */ s(
+    ue,
+    {
+      title: "Leader Board",
+      active: e === "leaderboard",
+      onClick: () => t(
+        "leaderboard"
+        /* LEADERBOARD */
+      )
+    }
+  )
+] }) });
+function X() {
+  return X = Object.assign ? Object.assign.bind() : function(e) {
+    for (var t = 1; t < arguments.length; t++) {
+      var n = arguments[t];
+      for (var i in n)
+        Object.prototype.hasOwnProperty.call(n, i) && (e[i] = n[i]);
+    }
+    return e;
+  }, X.apply(this, arguments);
+}
+function pe(e) {
+  if (e === void 0)
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
+function ee(e, t) {
+  return ee = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(i, r) {
+    return i.__proto__ = r, i;
+  }, ee(e, t);
+}
+function Ln(e, t) {
+  e.prototype = Object.create(t.prototype), e.prototype.constructor = e, ee(e, t);
+}
+var me = Number.isNaN || function(t) {
+  return typeof t == "number" && t !== t;
+};
+function $n(e, t) {
+  return !!(e === t || me(e) && me(t));
+}
+function Rn(e, t) {
+  if (e.length !== t.length)
+    return !1;
+  for (var n = 0; n < e.length; n++)
+    if (!$n(e[n], t[n]))
+      return !1;
+  return !0;
+}
+function Z(e, t) {
+  t === void 0 && (t = Rn);
+  var n, i = [], r, I = !1;
+  function m() {
+    for (var p = [], d = 0; d < arguments.length; d++)
+      p[d] = arguments[d];
+    return I && n === this && t(p, i) || (r = e.apply(this, p), I = !0, n = this, i = p), r;
+  }
+  return m;
+}
+var Qn = typeof performance == "object" && typeof performance.now == "function", Ie = Qn ? function() {
+  return performance.now();
+} : function() {
+  return Date.now();
+};
+function he(e) {
+  cancelAnimationFrame(e.id);
+}
+function Un(e, t) {
+  var n = Ie();
+  function i() {
+    Ie() - n >= t ? e.call(null) : r.id = requestAnimationFrame(i);
+  }
+  var r = {
+    id: requestAnimationFrame(i)
+  };
+  return r;
+}
+var G = -1;
+function fe(e) {
+  if (e === void 0 && (e = !1), G === -1 || e) {
+    var t = document.createElement("div"), n = t.style;
+    n.width = "50px", n.height = "50px", n.overflow = "scroll", document.body.appendChild(t), G = t.offsetWidth - t.clientWidth, document.body.removeChild(t);
+  }
+  return G;
+}
+var C = null;
+function ge(e) {
+  if (e === void 0 && (e = !1), C === null || e) {
+    var t = document.createElement("div"), n = t.style;
+    n.width = "50px", n.height = "50px", n.overflow = "scroll", n.direction = "rtl";
+    var i = document.createElement("div"), r = i.style;
+    return r.width = "100px", r.height = "100px", t.appendChild(i), document.body.appendChild(t), t.scrollLeft > 0 ? C = "positive-descending" : (t.scrollLeft = 1, t.scrollLeft === 0 ? C = "negative" : C = "positive-ascending"), document.body.removeChild(t), C;
+  }
+  return C;
+}
+var _n = 150, qn = function(t, n) {
+  return t;
+};
+function Yn(e) {
+  var t, n = e.getItemOffset, i = e.getEstimatedTotalSize, r = e.getItemSize, I = e.getOffsetForIndexAndAlignment, m = e.getStartIndexForOffset, p = e.getStopIndexForStartIndex, d = e.initInstanceProps, f = e.shouldResetStyleCacheOnItemSizeChange, A = e.validateProps;
+  return t = /* @__PURE__ */ function(D) {
+    Ln(N, D);
+    function N(T) {
+      var a;
+      return a = D.call(this, T) || this, a._instanceProps = d(a.props, pe(a)), a._outerRef = void 0, a._resetIsScrollingTimeoutId = null, a.state = {
+        instance: pe(a),
+        isScrolling: !1,
+        scrollDirection: "forward",
+        scrollOffset: typeof a.props.initialScrollOffset == "number" ? a.props.initialScrollOffset : 0,
+        scrollUpdateWasRequested: !1
+      }, a._callOnItemsRendered = void 0, a._callOnItemsRendered = Z(function(l, c, h, M) {
+        return a.props.onItemsRendered({
+          overscanStartIndex: l,
+          overscanStopIndex: c,
+          visibleStartIndex: h,
+          visibleStopIndex: M
+        });
+      }), a._callOnScroll = void 0, a._callOnScroll = Z(function(l, c, h) {
+        return a.props.onScroll({
+          scrollDirection: l,
+          scrollOffset: c,
+          scrollUpdateWasRequested: h
+        });
+      }), a._getItemStyle = void 0, a._getItemStyle = function(l) {
+        var c = a.props, h = c.direction, M = c.itemSize, v = c.layout, g = a._getItemStyleCache(f && M, f && v, f && h), S;
+        if (g.hasOwnProperty(l))
+          S = g[l];
+        else {
+          var z = n(a.props, l, a._instanceProps), O = r(a.props, l, a._instanceProps), k = h === "horizontal" || v === "horizontal", U = h === "rtl", _ = k ? z : 0;
+          g[l] = S = {
+            position: "absolute",
+            left: U ? void 0 : _,
+            right: U ? _ : void 0,
+            top: k ? 0 : z,
+            height: k ? "100%" : O,
+            width: k ? O : "100%"
+          };
+        }
+        return S;
+      }, a._getItemStyleCache = void 0, a._getItemStyleCache = Z(function(l, c, h) {
+        return {};
+      }), a._onScrollHorizontal = function(l) {
+        var c = l.currentTarget, h = c.clientWidth, M = c.scrollLeft, v = c.scrollWidth;
+        a.setState(function(g) {
+          if (g.scrollOffset === M)
+            return null;
+          var S = a.props.direction, z = M;
+          if (S === "rtl")
+            switch (ge()) {
+              case "negative":
+                z = -M;
+                break;
+              case "positive-descending":
+                z = v - h - M;
+                break;
+            }
+          return z = Math.max(0, Math.min(z, v - h)), {
+            isScrolling: !0,
+            scrollDirection: g.scrollOffset < M ? "forward" : "backward",
+            scrollOffset: z,
+            scrollUpdateWasRequested: !1
+          };
+        }, a._resetIsScrollingDebounced);
+      }, a._onScrollVertical = function(l) {
+        var c = l.currentTarget, h = c.clientHeight, M = c.scrollHeight, v = c.scrollTop;
+        a.setState(function(g) {
+          if (g.scrollOffset === v)
+            return null;
+          var S = Math.max(0, Math.min(v, M - h));
+          return {
+            isScrolling: !0,
+            scrollDirection: g.scrollOffset < S ? "forward" : "backward",
+            scrollOffset: S,
+            scrollUpdateWasRequested: !1
+          };
+        }, a._resetIsScrollingDebounced);
+      }, a._outerRefSetter = function(l) {
+        var c = a.props.outerRef;
+        a._outerRef = l, typeof c == "function" ? c(l) : c != null && typeof c == "object" && c.hasOwnProperty("current") && (c.current = l);
+      }, a._resetIsScrollingDebounced = function() {
+        a._resetIsScrollingTimeoutId !== null && he(a._resetIsScrollingTimeoutId), a._resetIsScrollingTimeoutId = Un(a._resetIsScrolling, _n);
+      }, a._resetIsScrolling = function() {
+        a._resetIsScrollingTimeoutId = null, a.setState({
+          isScrolling: !1
+        }, function() {
+          a._getItemStyleCache(-1, null);
+        });
+      }, a;
+    }
+    N.getDerivedStateFromProps = function(a, l) {
+      return Pn(a, l), A(a), null;
+    };
+    var y = N.prototype;
+    return y.scrollTo = function(a) {
+      a = Math.max(0, a), this.setState(function(l) {
+        return l.scrollOffset === a ? null : {
+          scrollDirection: l.scrollOffset < a ? "forward" : "backward",
+          scrollOffset: a,
+          scrollUpdateWasRequested: !0
+        };
+      }, this._resetIsScrollingDebounced);
+    }, y.scrollToItem = function(a, l) {
+      l === void 0 && (l = "auto");
+      var c = this.props, h = c.itemCount, M = c.layout, v = this.state.scrollOffset;
+      a = Math.max(0, Math.min(a, h - 1));
+      var g = 0;
+      if (this._outerRef) {
+        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() {
+      var a = this.props, l = a.direction, c = a.initialScrollOffset, h = a.layout;
+      if (typeof c == "number" && this._outerRef != null) {
+        var M = this._outerRef;
+        l === "horizontal" || h === "horizontal" ? M.scrollLeft = c : M.scrollTop = c;
+      }
+      this._callPropsCallbacks();
+    }, y.componentDidUpdate = function() {
+      var a = this.props, l = a.direction, c = a.layout, h = this.state, M = h.scrollOffset, v = h.scrollUpdateWasRequested;
+      if (v && this._outerRef != null) {
+        var g = this._outerRef;
+        if (l === "horizontal" || c === "horizontal")
+          if (l === "rtl")
+            switch (ge()) {
+              case "negative":
+                g.scrollLeft = -M;
+                break;
+              case "positive-ascending":
+                g.scrollLeft = M;
+                break;
+              default:
+                var S = g.clientWidth, z = g.scrollWidth;
+                g.scrollLeft = z - S - M;
+                break;
+            }
+          else
+            g.scrollLeft = M;
+        else
+          g.scrollTop = M;
+      }
+      this._callPropsCallbacks();
+    }, y.componentWillUnmount = function() {
+      this._resetIsScrollingTimeoutId !== null && he(this._resetIsScrollingTimeoutId);
+    }, y.render = function() {
+      var a = this.props, l = a.children, c = a.className, h = a.direction, M = a.height, v = a.innerRef, g = a.innerElementType, S = a.innerTagName, z = a.itemCount, O = a.itemData, k = a.itemKey, U = k === void 0 ? qn : k, _ = a.layout, je = a.outerElementType, Oe = a.outerTagName, ke = a.style, we = a.useIsScrolling, Ce = a.width, ne = this.state.isScrolling, F = h === "horizontal" || _ === "horizontal", be = F ? this._onScrollHorizontal : this._onScrollVertical, se = this._getRangeToRender(), Ee = se[0], Le = se[1], ie = [];
+      if (z > 0)
+        for (var $ = Ee; $ <= Le; $++)
+          ie.push(B(l, {
+            data: O,
+            key: U($, O),
+            index: $,
+            isScrolling: we ? ne : void 0,
+            style: this._getItemStyle($)
+          }));
+      var re = i(this.props, this._instanceProps);
+      return B(je || Oe || "div", {
+        className: c,
+        onScroll: be,
+        ref: this._outerRefSetter,
+        style: X({
+          position: "relative",
+          height: M,
+          width: Ce,
+          overflow: "auto",
+          WebkitOverflowScrolling: "touch",
+          willChange: "transform",
+          direction: h
+        }, ke)
+      }, B(g || S || "div", {
+        children: ie,
+        ref: v,
+        style: {
+          height: F ? "100%" : re,
+          pointerEvents: ne ? "none" : void 0,
+          width: F ? re : "100%"
+        }
+      }));
+    }, y._callPropsCallbacks = function() {
+      if (typeof this.props.onItemsRendered == "function") {
+        var a = this.props.itemCount;
+        if (a > 0) {
+          var l = this._getRangeToRender(), c = l[0], h = l[1], M = l[2], v = l[3];
+          this._callOnItemsRendered(c, h, M, v);
+        }
+      }
+      if (typeof this.props.onScroll == "function") {
+        var g = this.state, S = g.scrollDirection, z = g.scrollOffset, O = g.scrollUpdateWasRequested;
+        this._callOnScroll(S, z, O);
+      }
+    }, y._getRangeToRender = function() {
+      var a = this.props, l = a.itemCount, c = a.overscanCount, h = this.state, M = h.isScrolling, v = h.scrollDirection, g = h.scrollOffset;
+      if (l === 0)
+        return [0, 0, 0, 0];
+      var S = m(this.props, g, this._instanceProps), z = p(this.props, S, g, this._instanceProps), O = !M || v === "backward" ? Math.max(1, c) : 1, k = !M || v === "forward" ? Math.max(1, c) : 1;
+      return [Math.max(0, S - O), Math.max(0, Math.min(l - 1, z + k)), S, z];
+    }, N;
+  }(Ae), t.defaultProps = {
+    direction: "ltr",
+    itemData: void 0,
+    layout: "vertical",
+    overscanCount: 2,
+    useIsScrolling: !1
+  }, t;
+}
+var Pn = function(t, n) {
+  t.children, t.direction, t.height, t.layout, t.innerTagName, t.outerTagName, t.width, n.instance;
+}, Wn = /* @__PURE__ */ Yn({
+  getItemOffset: function(t, n) {
+    var i = t.itemSize;
+    return n * i;
+  },
+  getItemSize: function(t, n) {
+    var i = t.itemSize;
+    return i;
+  },
+  getEstimatedTotalSize: function(t) {
+    var n = t.itemCount, i = t.itemSize;
+    return i * n;
+  },
+  getOffsetForIndexAndAlignment: function(t, n, i, r, I, m) {
+    var p = t.direction, d = t.height, f = t.itemCount, A = t.itemSize, D = t.layout, N = t.width, y = p === "horizontal" || D === "horizontal", T = y ? N : d, a = Math.max(0, f * A - T), l = Math.min(a, n * A), c = Math.max(0, n * A - T + A + m);
+    switch (i === "smart" && (r >= c - T && r <= l + T ? i = "auto" : i = "center"), i) {
+      case "start":
+        return l;
+      case "end":
+        return c;
+      case "center": {
+        var h = Math.round(c + (l - c) / 2);
+        return h < Math.ceil(T / 2) ? 0 : h > a + Math.floor(T / 2) ? a : h;
+      }
+      case "auto":
+      default:
+        return r >= c && r <= l ? r : r < c ? c : l;
+    }
+  },
+  getStartIndexForOffset: function(t, n) {
+    var i = t.itemCount, r = t.itemSize;
+    return Math.max(0, Math.min(i - 1, Math.floor(n / r)));
+  },
+  getStopIndexForStartIndex: function(t, n, i) {
+    var r = t.direction, I = t.height, m = t.itemCount, p = t.itemSize, d = t.layout, f = t.width, A = r === "horizontal" || d === "horizontal", D = n * p, N = A ? f : I, y = Math.ceil((N + i - D) / p);
+    return Math.max(0, Math.min(
+      m - 1,
+      n + y - 1
+      // -1 is because stop index is inclusive
+    ));
+  },
+  initInstanceProps: function(t) {
+  },
+  shouldResetStyleCacheOnItemSizeChange: !0,
+  validateProps: function(t) {
+    t.itemSize;
+  }
+});
+function Vn(e) {
+  var t = e.lastRenderedStartIndex, n = e.lastRenderedStopIndex, i = e.startIndex, r = e.stopIndex;
+  return !(i > n || r < t);
+}
+function Fn(e) {
+  for (var t = e.isItemLoaded, n = e.itemCount, i = e.minimumBatchSize, r = e.startIndex, I = e.stopIndex, m = [], p = null, d = null, f = r; f <= I; f++) {
+    var A = t(f);
+    A ? d !== null && (m.push(p, d), p = d = null) : (d = f, p === null && (p = f));
+  }
+  if (d !== null) {
+    for (var D = Math.min(Math.max(d, p + i - 1), n - 1), N = d + 1; N <= D && !t(N); N++)
+      d = N;
+    m.push(p, d);
+  }
+  if (m.length)
+    for (; m[1] - m[0] + 1 < i && m[0] > 0; ) {
+      var y = m[0] - 1;
+      if (!t(y))
+        m[0] = y;
+      else
+        break;
+    }
+  return m;
+}
+var Bn = function(e, t) {
+  if (!(e instanceof t))
+    throw new TypeError("Cannot call a class as a function");
+}, Hn = function() {
+  function e(t, n) {
+    for (var i = 0; i < n.length; i++) {
+      var r = n[i];
+      r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), Object.defineProperty(t, r.key, r);
+    }
+  }
+  return function(t, n, i) {
+    return n && e(t.prototype, n), i && e(t, i), t;
+  };
+}(), Zn = function(e, t) {
+  if (typeof t != "function" && t !== null)
+    throw new TypeError("Super expression must either be null or a function, not " + typeof t);
+  e.prototype = Object.create(t && t.prototype, {
+    constructor: {
+      value: e,
+      enumerable: !1,
+      writable: !0,
+      configurable: !0
+    }
+  }), t && (Object.setPrototypeOf ? Object.setPrototypeOf(e, t) : e.__proto__ = t);
+}, Me = 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;
+}, Gn = function(e) {
+  Zn(t, e);
+  function t() {
+    var n, i, r, I;
+    Bn(this, t);
+    for (var m = arguments.length, p = Array(m), d = 0; d < m; d++)
+      p[d] = arguments[d];
+    return I = (i = (r = Me(this, (n = t.__proto__ || Object.getPrototypeOf(t)).call.apply(n, [this].concat(p))), r), r._lastRenderedStartIndex = -1, r._lastRenderedStopIndex = -1, r._memoizedUnloadedRanges = [], r._onItemsRendered = function(f) {
+      var A = f.visibleStartIndex, D = f.visibleStopIndex;
+      r._lastRenderedStartIndex = A, r._lastRenderedStopIndex = D, r._ensureRowsLoaded(A, D);
+    }, r._setRef = function(f) {
+      r._listRef = f;
+    }, i), Me(r, I);
+  }
+  return Hn(t, [{
+    key: "resetloadMoreItemsCache",
+    value: function() {
+      var i = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1;
+      this._memoizedUnloadedRanges = [], i && this._ensureRowsLoaded(this._lastRenderedStartIndex, this._lastRenderedStopIndex);
+    }
+  }, {
+    key: "componentDidMount",
+    value: function() {
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var i = this.props.children;
+      return i({
+        onItemsRendered: this._onItemsRendered,
+        ref: this._setRef
+      });
+    }
+  }, {
+    key: "_ensureRowsLoaded",
+    value: function(i, r) {
+      var I = this.props, m = I.isItemLoaded, p = I.itemCount, d = I.minimumBatchSize, f = d === void 0 ? 10 : d, A = I.threshold, D = A === void 0 ? 15 : A, N = Fn({
+        isItemLoaded: m,
+        itemCount: p,
+        minimumBatchSize: f,
+        startIndex: Math.max(0, i - D),
+        stopIndex: Math.min(p - 1, r + D)
+      });
+      (this._memoizedUnloadedRanges.length !== N.length || this._memoizedUnloadedRanges.some(function(y, T) {
+        return N[T] !== y;
+      })) && (this._memoizedUnloadedRanges = N, this._loadUnloadedRanges(N));
+    }
+  }, {
+    key: "_loadUnloadedRanges",
+    value: function(i) {
+      for (var r = this, I = this.props.loadMoreItems || this.props.loadMoreRows, m = function(f) {
+        var A = i[f], D = i[f + 1], N = I(A, D);
+        N != null && N.then(function() {
+          if (Vn({
+            lastRenderedStartIndex: r._lastRenderedStartIndex,
+            lastRenderedStopIndex: r._lastRenderedStopIndex,
+            startIndex: A,
+            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());
+          }
+        });
+      }, p = 0; p < i.length; p += 2)
+        m(p);
+    }
+  }]), t;
+}(Ae);
+const Jn = /* @__PURE__ */ o("div")({
+  name: "Container",
+  class: "culdu4a",
+  propsAsIs: !1
+}), Kn = /* @__PURE__ */ o("div")({
+  name: "Position",
+  class: "pwf8e69",
+  propsAsIs: !1
+}), Xn = /* @__PURE__ */ o("img")({
+  name: "Avatar",
+  class: "atf4yh4",
+  propsAsIs: !1
+}), es = /* @__PURE__ */ o("div")({
+  name: "AvatarPlaceholder",
+  class: "a1dg29ja",
+  propsAsIs: !1
+}), ts = /* @__PURE__ */ o("div")({
+  name: "Content",
+  class: "c10a68rc",
+  propsAsIs: !1
+}), ns = /* @__PURE__ */ o("div")({
+  name: "NameContainer",
+  class: "nc4kck5",
+  propsAsIs: !1
+}), ss = /* @__PURE__ */ o("span")({
+  name: "Name",
+  class: "njsrqgr",
+  propsAsIs: !1
+}), is = () => j, rs = /* @__PURE__ */ o(is())({
+  name: "CurrentUserBadge",
+  class: "c17uc4zr",
+  propsAsIs: !0
+}), os = ({
+  rank: e,
+  avatar: t,
+  name: n,
+  points: i,
+  isCurrentUser: r,
+  openItemDetail: I,
+  style: m
+}) => /* @__PURE__ */ u(Jn, { onClick: I, style: m, children: [
+  /* @__PURE__ */ s(Kn, { children: e || 0 }),
+  /* @__PURE__ */ u(ts, { children: [
+    t ? /* @__PURE__ */ s(Xn, { alt: "leaderboard-item-avatar", src: t }) : /* @__PURE__ */ s(es, { children: ye(n || "") }),
+    /* @__PURE__ */ u(ns, { children: [
+      /* @__PURE__ */ s(ss, { children: n || "" }),
+      r && /* @__PURE__ */ s(rs, { name: "icon-star" })
+    ] })
+  ] }),
+  /* @__PURE__ */ s("div", { children: Te(i) })
+] }), as = /* @__PURE__ */ o("div")({
+  name: "ScrollContainer",
+  class: "s13d8sg6",
+  propsAsIs: !1
+}), ls = ({
+  items: e,
+  currentUserId: t,
+  openItemDetail: n,
+  fetchMore: i
+}) => /* @__PURE__ */ s(Re, { children: ({ width: r, height: I }) => /* @__PURE__ */ s(
+  Gn,
+  {
+    isItemLoaded: (m) => m < e.length,
+    itemCount: e.length + 1,
+    loadMoreItems: i,
+    children: ({ onItemsRendered: m, ref: p }) => /* @__PURE__ */ s(as, { children: /* @__PURE__ */ s(
+      Wn,
+      {
+        itemSize: 56,
+        onItemsRendered: m,
+        ref: p,
+        itemCount: e.length,
+        width: r,
+        height: I,
+        children: ({ index: d, style: f }) => /* @__PURE__ */ s(
+          os,
+          {
+            style: { ...f, maxHeight: 48 },
+            ...e[d],
+            openItemDetail: () => n(e[d].userId),
+            isCurrentUser: !!t && t === e[d].userId
+          },
+          e[d].userId
+        )
+      }
+    ) })
+  }
+) }), cs = ({ deepLink: e }) => {
+  const { data: t } = w(e.$store);
+  return /* @__PURE__ */ s(
+    Qe,
+    {
+      inviteLink: t == null ? void 0 : t.url,
+      socialLinks: [
+        {
+          icon: "icon-facebook",
+          link: "https://www.facebook.com/TheMasters",
+          label: "Facebook"
+        },
+        {
+          icon: "icon-twitter",
+          link: "https://twitter.com/@TheMasters",
+          label: "X"
+        }
+      ],
+      inviteCardTitle: "It’s more fun with friends",
+      inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
+    }
+  );
+}, ds = ({ gamification: e }) => {
+  const { data: t } = w(e.leaderboardList.$store);
+  return t != null && t.length ? /* @__PURE__ */ s(
+    ls,
+    {
+      fetchMore: e.leaderboardList.fetchMore,
+      items: t,
+      openItemDetail: e.openUser,
+      currentUserId: e.currentUserId.get()
+    }
+  ) : /* @__PURE__ */ s(cs, { deepLink: e.deepLink });
+}, us = /* @__PURE__ */ o("div")({
+  name: "QuestionItem",
+  class: "q1w97g3p",
+  propsAsIs: !1
+}), ps = /* @__PURE__ */ o("div")({
+  name: "QuestionCaption",
+  class: "q2sl39u",
+  propsAsIs: !1
+}), ms = /* @__PURE__ */ o("div")({
+  name: "QuestionBody",
+  class: "qd5h0uc",
+  propsAsIs: !1
+}), Is = /* @__PURE__ */ o("div")({
+  name: "QuestionAction",
+  class: "q105uluy",
+  propsAsIs: !1
+}), hs = () => j, J = /* @__PURE__ */ o(hs())({
+  name: "QuestionActionIcon",
+  class: "q1fa0b9h",
+  propsAsIs: !0
+}), fs = () => j, gs = /* @__PURE__ */ o(fs())({
+  name: "QuestionTypeIcon",
+  class: "qxlt78s",
+  propsAsIs: !0
+}), Ms = /* @__PURE__ */ o("div")({
+  name: "QuestionTypeLabel",
+  class: "qmg0vkx",
+  propsAsIs: !1
+}), vs = /* @__PURE__ */ o("div")({
+  name: "QuestionContent",
+  class: "q1uz5j1g",
+  propsAsIs: !1
+}), Ns = {
+  [q.LOST]: /* @__PURE__ */ s(J, { name: "icon-cross" }),
+  [q.WON]: /* @__PURE__ */ s(J, { name: "icon-check" }),
+  [q.UNSET]: void 0,
+  [q.DNP]: /* @__PURE__ */ s(J, { name: "icon-arrow" })
+}, As = ({
+  questionId: e,
+  questionType: t,
+  questionStatus: n,
+  subject: i,
+  openForVoting: r,
+  openQuestion: I,
+  status: m
+}) => {
+  const p = Ne[t], d = Ns[m];
+  return p ? /* @__PURE__ */ u(us, { onClick: () => I == null ? void 0 : I(e), children: [
+    /* @__PURE__ */ u(vs, { children: [
+      /* @__PURE__ */ u(ps, { children: [
+        /* @__PURE__ */ s(gs, { name: p.iconName }),
+        /* @__PURE__ */ u(Ms, { children: [
+          p.label,
+          t === x.TRIVIA && n === Q.RESOLVED && " • Expired"
+        ] })
+      ] }),
+      /* @__PURE__ */ s(ms, { children: i || "" })
+    ] }),
+    /* @__PURE__ */ s(Is, { children: d || (r ? /* @__PURE__ */ s(Ue, { children: "Play" }) : null) })
+  ] }) : null;
+}, ys = /* @__PURE__ */ o("div")({
+  name: "Container",
+  class: "cll3md7",
+  propsAsIs: !1
+}), Ts = /* @__PURE__ */ o("button")({
+  name: "ActionBtn",
+  class: "a10g1iik",
+  propsAsIs: !1
+}), Ds = ({
+  openInsight: e,
+  questionId: t,
+  ...n
+}) => /* @__PURE__ */ u(ys, { children: [
+  /* @__PURE__ */ s(xe, { questionId: t, ...n }),
+  e && /* @__PURE__ */ s(Ts, { onClick: () => e(t), children: "View Insight" })
+] }), Ss = /* @__PURE__ */ o("div")({
+  name: "QuestionsContainer",
+  class: "qvghv3l",
+  propsAsIs: !1
+}), zs = ({ questions: e, openQuestion: t }) => /* @__PURE__ */ s(Ss, { 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(As, { openQuestion: t, ...I }, I.questionId);
+  }
+  if (n.type === "insight" && ((r = n.attributes) == null ? void 0 : r.attributes.case) === "insight") {
+    const I = n.attributes.attributes.value;
+    return /* @__PURE__ */ s(Ds, { openInsight: t, ...I }, I.questionId);
+  }
+  return null;
+}) }), xs = ({ store: e, openQuestion: t }) => {
+  const n = w(e);
+  return n != null && n.data ? /* @__PURE__ */ s(zs, { openQuestion: t, questions: n.data }) : /* @__PURE__ */ s("div", { children: "wait questions..." });
+}, js = ({ userSummary: e }) => {
+  var t, n;
+  const i = w(e.getStore());
+  return (t = i.data) != null && t.summary ? /* @__PURE__ */ s(Se, { ...i.data.summary, successRate: (n = i.data.percentage) == null ? void 0 : n.correct }) : /* @__PURE__ */ s("div", { children: "wait user..." });
+}, Os = ({
+  gamification: e
+}) => {
+  const [t, n] = R(W.HOME);
+  return /* @__PURE__ */ u("div", {
+    style: {
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden"
+    },
+    children: [/* @__PURE__ */ s(K, {
+      style: {
+        paddingBottom: "4px"
+      },
+      children: /* @__PURE__ */ s(En, {
+        activePage: t,
+        toggleActivePage: n
+      })
+    }), t === W.HOME && /* @__PURE__ */ u(te, {
+      children: [/* @__PURE__ */ s(K, {
+        style: {
+          paddingTop: "12px"
+        },
+        children: /* @__PURE__ */ s(js, {
+          userSummary: e.userSummary
+        })
+      }), /* @__PURE__ */ s(_e, {
+        children: /* @__PURE__ */ s(xs, {
+          openQuestion: e.openQuestion,
+          store: e.feedList.getStore()
+        })
+      })]
+    }), t === W.LEADERBOARD && /* @__PURE__ */ s("div", {
+      className: "c1bp9dj2",
+      children: /* @__PURE__ */ s(ds, {
+        gamification: e
+      })
+    })]
+  });
+}, ks = () => qe, ve = /* @__PURE__ */ o(ks())({
+  name: "OpenedContainer",
+  class: "oar61gl",
+  propsAsIs: !0
+}), ws = /* @__PURE__ */ o("div")({
+  name: "UserContainer",
+  class: "u14zaal4",
+  propsAsIs: !1
+}), Cs = ({
+  correct: e,
+  incorrect: t
+}) => {
+  const n = e + t;
+  return n === 0 ? 0 : Math.round(e / n * 100);
+}, Bs = ({
+  gamification: e,
+  className: t
+}) => {
+  const n = w(e.openedQuestion.$store), i = w(e.openedUser);
+  return /* @__PURE__ */ u(E, {
+    children: [n && /* @__PURE__ */ s(ve, {
+      className: t,
+      children: /* @__PURE__ */ s(On, {
+        gamification: e
+      })
+    }), i && /* @__PURE__ */ s(ve, {
+      className: t,
+      children: /* @__PURE__ */ u(ws, {
+        children: [/* @__PURE__ */ s(De, {
+          label: "Friend's Rank",
+          close: e.closeUser
+        }), /* @__PURE__ */ s(K, {
+          children: /* @__PURE__ */ s(Se, {
+            ...i,
+            successRate: Cs(i)
+          })
+        })]
+      })
+    }), /* @__PURE__ */ s(te, {
+      className: t,
+      "data-nav": "true",
+      children: /* @__PURE__ */ s(Os, {
+        gamification: e
+      })
+    })]
+  });
+};
+export {
+  Bs as default
+};