@streamlayer/react 1.23.1 → 1.23.2

package/lib/es/index11.js

@@ -1,817 +1,832 @@
-import { jsx as e, jsxs as d, Fragment as z } from "react/jsx-runtime";
-import { useState as b, useRef as ee, useEffect as H, useCallback as j, useLayoutEffect as Ue, useMemo as _ } from "react";
-import { s as n, c as ue } from "./sl-types.js";
-import { i as le } from "./index9.js";
-import { B as w } from "./index6.js";
-import { Q as i, d as J, a as se, A as Ke } from "./useStreamLayerApp2.js";
-import { O as _e, L as He } from "./index14.js";
-import { d as Ee } from "./index5.js";
-const Qn = /* @__PURE__ */ n("div")({
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback, useLayoutEffect, useMemo } from "react";
+import { s as styled_default, c as cx_default } from "./sl-types.js";
+import { i as i$1 } from "./index9.js";
+import { B as B1 } from "./index6.js";
+import { Q as QuestionType, d as QuestionImages, a as QuestionStatus, A as AdUnit } from "./useStreamLayerApp2.js";
+import { O, L } from "./index14.js";
+import { d as d$6 } from "./index5.js";
+const p$4 = /* @__PURE__ */ styled_default("div")({
   name: "SDKContainer",
   class: "sopqfe6",
-  propsAsIs: !1
-}), Ge = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), c$4 = /* @__PURE__ */ styled_default("div")({
   name: "SDKScrollContainer",
   class: "s102vcph",
-  propsAsIs: !1
-}), be = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), n$4 = /* @__PURE__ */ styled_default("div")({
   name: "SDKContentContainer",
   class: "s1meqjjv",
-  propsAsIs: !1
-}), Je = () => be, we = /* @__PURE__ */ n(Je())({
+  propsAsIs: false
+}), e$2 = () => n$4, a$5 = /* @__PURE__ */ styled_default(e$2())({
   name: "SDKWhiteContainer",
   class: "s1burm22",
-  propsAsIs: !0
-}), Xe = () => we, Fn = /* @__PURE__ */ n(Xe())({
+  propsAsIs: true
+}), r$6 = () => a$5, m$4 = /* @__PURE__ */ styled_default(r$6())({
   name: "SDKSummaryContainer",
   class: "sm5r3j5",
-  propsAsIs: !0
-}), Wn = /* @__PURE__ */ n("div")({
+  propsAsIs: true
+}), l$4 = /* @__PURE__ */ styled_default("div")({
   name: "TabsContainer",
   class: "tysxwr6",
-  propsAsIs: !1
-}), Ze = () => be, Bn = /* @__PURE__ */ n(Ze())({
+  propsAsIs: false
+}), o$1 = () => n$4, C$2 = /* @__PURE__ */ styled_default(o$1())({
   name: "LeaderboardContainer",
   class: "l9er3b1",
-  propsAsIs: !0
-}), es = () => we, Yn = /* @__PURE__ */ n(es())({
+  propsAsIs: true
+}), t$4 = () => a$5, S$2 = /* @__PURE__ */ styled_default(t$4())({
   name: "TabsNavContainer",
   class: "t19dtrb3",
-  propsAsIs: !0
-}), zn = /* @__PURE__ */ n("div")({
+  propsAsIs: true
+}), d$5 = /* @__PURE__ */ styled_default("div")({
   name: "UserSummaryContainer",
   class: "u1552n3j",
-  propsAsIs: !1
+  propsAsIs: false
 });
-var ss = Object.defineProperty, ns = (s, t, r) => t in s ? ss(s, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : s[t] = r, ts = (s, t, r) => ns(s, t + "", r);
-let is = class {
+var l$3 = Object.defineProperty;
+var d$4 = (t2, e2, s) => e2 in t2 ? l$3(t2, e2, { enumerable: true, configurable: true, writable: true, value: s }) : t2[e2] = s;
+var u$4 = (t2, e2, s) => d$4(t2, e2 + "", s);
+let y$3 = class y {
   constructor() {
-    ts(this, "observers", /* @__PURE__ */ new Set());
+    u$4(this, "observers", /* @__PURE__ */ new Set());
   }
-  subscribe(t) {
-    this.observers.add(t);
+  subscribe(e2) {
+    this.observers.add(e2);
   }
-  unsubscribe(t) {
-    this.observers.delete(t);
+  unsubscribe(e2) {
+    this.observers.delete(e2);
   }
-  notify(t) {
-    this.observers.forEach((r) => r(t));
+  notify(e2) {
+    this.observers.forEach((s) => s(e2));
   }
 };
-const X = new is(), rs = { hiding: !1, finished: !1 }, os = () => {
-  const [s, t] = b(rs), r = ee(null);
-  H(() => {
-    const p = (h) => {
-      t(h);
+const n$3 = new y$3(), m$3 = { hiding: false, finished: false }, S$1 = () => {
+  const [t2, e2] = useState(m$3), s = useRef(null);
+  useEffect(() => {
+    const r2 = (i2) => {
+      e2(i2);
     };
-    return X.subscribe(p), () => {
-      X.unsubscribe(p);
+    return n$3.subscribe(r2), () => {
+      n$3.unsubscribe(r2);
     };
   }, []);
-  const l = j((p) => {
-    const h = { hiding: !0, finished: !1 };
-    r.current && clearTimeout(r.current), p != null && p.delay ? r.current = setTimeout(() => {
-      X.notify(h);
-    }, p == null ? void 0 : p.delay) : X.notify(h);
-  }, []), o = j(() => {
-    s.hiding && (r.current = null, X.notify({ hiding: !1, finished: !0 }));
-  }, [s.hiding]);
+  const c2 = useCallback((r2) => {
+    const i2 = { hiding: true, finished: false };
+    s.current && clearTimeout(s.current), r2 != null && r2.delay ? s.current = setTimeout(() => {
+      n$3.notify(i2);
+    }, r2 == null ? void 0 : r2.delay) : n$3.notify(i2);
+  }, []), f2 = useCallback(() => {
+    t2.hiding && (s.current = null, n$3.notify({ hiding: false, finished: true }));
+  }, [t2.hiding]);
   return {
-    ...s,
-    runAnimation: l,
-    onAnimationEnd: o
+    ...t2,
+    runAnimation: c2,
+    onAnimationEnd: f2
   };
-}, as = /* @__PURE__ */ n("div")({
+};
+const u$3 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "c1pgyo67",
-  propsAsIs: !1
-}), cs = "sx17qu6", ds = "h1692c5m", ge = ({
-  children: s,
-  style: t,
-  className: r,
-  enabled: l = !0,
-  hiding: o,
-  onAnimationEnd: p
-}) => /* @__PURE__ */ e(as, {
-  style: t,
-  className: ue(r, l && cs, l && o && ds),
-  onAnimationEnd: p,
-  children: s
-}), ls = () => ge, ps = /* @__PURE__ */ n(ls())({
+  propsAsIs: false
+}), h$2 = "sx17qu6", w$2 = "h1692c5m", f$4 = ({
+  children: r2,
+  style: e2,
+  className: o2,
+  enabled: t2 = true,
+  hiding: s,
+  onAnimationEnd: n2
+}) => /* @__PURE__ */ jsx(u$3, {
+  style: e2,
+  className: cx_default(o2, t2 && h$2, t2 && s && w$2),
+  onAnimationEnd: n2,
+  children: r2
+}), d$3 = () => f$4, y$2 = /* @__PURE__ */ styled_default(d$3())({
   name: "GrowingContainer",
   class: "gck55ev",
-  propsAsIs: !0
-}), Pe = ({
-  children: s,
-  style: t,
-  enabled: r,
-  animate: l,
-  ...o
+  propsAsIs: true
+}), v$2 = ({
+  children: r2,
+  style: e2,
+  enabled: o2,
+  animate: t2,
+  ...s
 }) => {
-  const p = ee(null);
-  return /* @__PURE__ */ e(ps, {
-    ...o,
-    enabled: r && l,
+  const n2 = useRef(null);
+  return /* @__PURE__ */ jsx(y$2, {
+    ...s,
+    enabled: o2 && t2,
     style: {
-      ...t,
+      ...e2,
       ...(() => {
-        const h = p == null ? void 0 : p.current, f = h && window.getComputedStyle(h), P = f == null ? void 0 : f.getPropertyValue("height");
-        return r ? {
-          height: l ? P : 0
+        const m2 = n2 == null ? void 0 : n2.current, i2 = m2 && window.getComputedStyle(m2), a2 = i2 == null ? void 0 : i2.getPropertyValue("height");
+        return o2 ? {
+          height: t2 ? a2 : 0
         } : {};
       })()
     },
-    children: /* @__PURE__ */ e("div", {
-      ref: p,
-      children: s
+    children: /* @__PURE__ */ jsx("div", {
+      ref: n2,
+      children: r2
     })
   });
-}, us = /* @__PURE__ */ n("div")({
+};
+const t$3 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "c1gcvmcj",
-  propsAsIs: !1
-}), ms = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), p$3 = /* @__PURE__ */ styled_default("div")({
   name: "Title",
   class: "tnr592a",
-  propsAsIs: !1
-}), hs = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), r$5 = /* @__PURE__ */ styled_default("div")({
   name: "Description",
   class: "d1e8jqpv",
-  propsAsIs: !1
-}), Is = () => w, vs = /* @__PURE__ */ n(Is())({
+  propsAsIs: false
+}), n$2 = () => B1, a$4 = /* @__PURE__ */ styled_default(n$2())({
   name: "Icon",
   class: "i1vs651k",
-  propsAsIs: !0
-}), As = ({ icon: s, title: t, description: r }) => /* @__PURE__ */ d(us, { children: [
-  /* @__PURE__ */ e(vs, { name: s }),
-  /* @__PURE__ */ e(ms, { children: t }),
-  /* @__PURE__ */ e(hs, { children: r })
-] }), ys = () => Pe, fs = /* @__PURE__ */ n(ys())({
+  propsAsIs: true
+});
+const d$2 = ({ icon: e2, title: n2, description: i2 }) => /* @__PURE__ */ jsxs(t$3, { children: [
+  /* @__PURE__ */ jsx(a$4, { name: e2 }),
+  /* @__PURE__ */ jsx(p$3, { children: n2 }),
+  /* @__PURE__ */ jsx(r$5, { children: i2 })
+] });
+const c$3 = () => v$2, l$2 = /* @__PURE__ */ styled_default(c$3())({
   name: "ShowInContainer",
   class: "s16sbdnm",
-  propsAsIs: !0
-}), B = /* @__PURE__ */ n("div")({
+  propsAsIs: true
+}), f$3 = /* @__PURE__ */ styled_default("div")({
   name: "FeedbackContainer",
   class: "fbhorgl",
-  propsAsIs: !1
-}), ye = "s1g20ja7", Cs = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), m$2 = "s1g20ja7", k = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "c455ozj",
-  propsAsIs: !1
-}), Ts = () => w, fe = /* @__PURE__ */ n(Ts())({
+  propsAsIs: false
+}), o = () => B1, b$2 = /* @__PURE__ */ styled_default(o())({
   name: "IconPrediction",
   class: "i1913njx",
-  propsAsIs: !0
-}), Z = /* @__PURE__ */ n("div")({
+  propsAsIs: true
+}), I$3 = /* @__PURE__ */ styled_default("div")({
   name: "FeedbackIconWrap",
   class: "fzfk69z",
-  propsAsIs: !1
-}), ie = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), F = /* @__PURE__ */ styled_default("div")({
   name: "FeedbackHeader",
   class: "fx87qaj",
-  propsAsIs: !1
-}), $s = /* @__PURE__ */ n("span")({
+  propsAsIs: false
+}), A$3 = /* @__PURE__ */ styled_default("span")({
   name: "FeedbackTitle",
   class: "fvek9ew",
-  propsAsIs: !1
-}), Y = /* @__PURE__ */ n("span")({
+  propsAsIs: false
+}), e$1 = /* @__PURE__ */ styled_default("span")({
   name: "FeedbackDescription",
   class: "f1kbtp09",
-  propsAsIs: !1
-}), Es = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), D = /* @__PURE__ */ styled_default("div")({
   name: "FeedbackTitleWrap",
   class: "f4i8rro",
-  propsAsIs: !1
-}), bs = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), v$1 = /* @__PURE__ */ styled_default("div")({
   name: "FeedbackResultDescriptionWrap",
   class: "fqyssr",
-  propsAsIs: !1
-}), ws = () => Y, gs = /* @__PURE__ */ n(ws())({
+  propsAsIs: false
+}), p$2 = () => e$1, x$2 = /* @__PURE__ */ styled_default(p$2())({
   name: "FeedbackDynamicDescription",
   class: "fyv794i",
-  propsAsIs: !0
-}), Ps = () => Y, Rs = /* @__PURE__ */ n(Ps())({
+  propsAsIs: true
+}), r$4 = () => e$1, u$2 = /* @__PURE__ */ styled_default(r$4())({
   name: "FeedbackResultDescription",
   class: "f1jkj9vx",
-  propsAsIs: !0
-}), pe = /* @__PURE__ */ n("div")({
+  propsAsIs: true
+}), y$1 = /* @__PURE__ */ styled_default("div")({
   name: "FeedbackText",
   class: "f1pxh3a6",
-  propsAsIs: !1
-}), Ds = /* @__PURE__ */ n("span")({
+  propsAsIs: false
+}), W = /* @__PURE__ */ styled_default("span")({
   name: "DynamicWrap",
   class: "d1afvufn",
-  propsAsIs: !1
-}), qs = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), h$1 = /* @__PURE__ */ styled_default("div")({
   name: "EarlyFeedbackDescription",
   class: "eq8u24d",
-  propsAsIs: !1
-}), Ce = ({
-  feedbackMessages: s,
-  questionVotedCorrectly: t,
-  questionVoted: r,
-  questionType: l,
-  hasCorrectAnswer: o,
-  showExpiredNotification: p,
-  showClosedNotificationTrivia: h,
-  votedInCurrentRender: f,
-  votedAfterQuestionClosed: P,
-  voteErrorMessage: I,
-  enteredAnActiveQuestion: a,
-  marketClosed: R,
-  percentsAnimated: E,
-  votedAnswer: y,
-  isEarlyPrediction: m,
-  correctAnswer: q,
-  onAnimationEnd: x
+  propsAsIs: false
+});
+const ii = ({
+  feedbackMessages: t2,
+  questionVotedCorrectly: S2,
+  questionVoted: k$1,
+  questionType: d2,
+  hasCorrectAnswer: r2,
+  showExpiredNotification: I2,
+  showClosedNotificationTrivia: D$1,
+  votedInCurrentRender: b2,
+  votedAfterQuestionClosed: y3,
+  voteErrorMessage: e2,
+  enteredAnActiveQuestion: B2,
+  marketClosed: H,
+  percentsAnimated: z,
+  votedAnswer: T,
+  isEarlyPrediction: n2,
+  correctAnswer: a2,
+  onAnimationEnd: G
 }) => {
-  const g = r && (l === i.TRIVIA || l === i.PREDICTION), T = l === i.PREDICTION && !o, N = R && l === i.PREDICTION && !r || l === i.PREDICTION && P && f && a, k = g && T, S = g && o, D = l === i.PREDICTION && r && f && o, O = r && l === i.POLL && f, v = t ? "correct" : "incorrect", V = t ? s == null ? void 0 : s.correctFeedback : s == null ? void 0 : s.incorrectFeedback;
-  return p || h || k || S || N || O || D || I ? /* @__PURE__ */ e(
-    fs,
+  const W$1 = k$1 && (d2 === QuestionType.TRIVIA || d2 === QuestionType.PREDICTION), f2 = d2 === QuestionType.PREDICTION && !r2, R = H && d2 === QuestionType.PREDICTION && !k$1 || d2 === QuestionType.PREDICTION && y3 && b2 && B2, N = W$1 && f2, Q = W$1 && r2, C2 = d2 === QuestionType.PREDICTION && k$1 && b2 && r2, P2 = k$1 && d2 === QuestionType.POLL && b2, m2 = S2 ? "correct" : "incorrect", o2 = S2 ? t2 == null ? void 0 : t2.correctFeedback : t2 == null ? void 0 : t2.incorrectFeedback;
+  return I2 || D$1 || N || Q || R || P2 || C2 || e2 ? /* @__PURE__ */ jsx(
+    l$2,
     {
-      enabled: f,
-      animate: !I && p ? !0 : E,
-      onAnimationEnd: x,
-      children: /* @__PURE__ */ d(Cs, { "data-prediction": T, children: [
-        I && !N && /* @__PURE__ */ d(B, { children: [
-          !m && /* @__PURE__ */ e(fe, { name: "questionExpired" }),
-          /* @__PURE__ */ e(Y, { children: I })
+      enabled: b2,
+      animate: !e2 && I2 ? true : z,
+      onAnimationEnd: G,
+      children: /* @__PURE__ */ jsxs(k, { "data-prediction": f2, children: [
+        e2 && !R && /* @__PURE__ */ jsxs(f$3, { children: [
+          !n2 && /* @__PURE__ */ jsx(b$2, { name: "questionExpired" }),
+          /* @__PURE__ */ jsx(e$1, { children: e2 })
         ] }),
-        !I && p && /* @__PURE__ */ d(B, { children: [
-          !m && /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(w, { name: "questionExpired" }) }),
-          /* @__PURE__ */ d("div", { children: [
-            /* @__PURE__ */ e(ie, { children: /* @__PURE__ */ e(Y, { children: "Question Expired" }) }),
-            /* @__PURE__ */ e(pe, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
+        !e2 && I2 && /* @__PURE__ */ jsxs(f$3, { children: [
+          !n2 && /* @__PURE__ */ jsx(I$3, { children: /* @__PURE__ */ jsx(B1, { name: "questionExpired" }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(F, { children: /* @__PURE__ */ jsx(e$1, { children: "Question Expired" }) }),
+            /* @__PURE__ */ jsx(y$1, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
           ] })
         ] }),
-        !I && h && /* @__PURE__ */ d(B, { className: ue(ye), children: [
-          /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(w, { name: "questionExpired" }) }),
-          /* @__PURE__ */ d("div", { children: [
-            /* @__PURE__ */ e(ie, { children: /* @__PURE__ */ e(Y, { children: "Question Closed" }) }),
-            /* @__PURE__ */ e(pe, { children: "This question was answered after the moderator closed the question. So the points for this answer won’t tally." })
+        !e2 && D$1 && /* @__PURE__ */ jsxs(f$3, { className: cx_default(m$2), children: [
+          /* @__PURE__ */ jsx(I$3, { children: /* @__PURE__ */ jsx(B1, { name: "questionExpired" }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(F, { children: /* @__PURE__ */ jsx(e$1, { children: "Question Closed" }) }),
+            /* @__PURE__ */ jsx(y$1, { children: "This question was answered after the moderator closed the question. So the points for this answer won’t tally." })
           ] })
         ] }),
-        N && /* @__PURE__ */ d(B, { children: [
-          !m && /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(w, { name: "questionExpired" }) }),
-          /* @__PURE__ */ d("div", { children: [
-            /* @__PURE__ */ e(ie, { children: /* @__PURE__ */ e(Y, { children: m ? o ? "The results are already in!" : "Question is Closed" : "Question Closed" }) }),
-            /* @__PURE__ */ e(pe, { children: m ? /* @__PURE__ */ e(qs, { children: o ? `Correct: ${q == null ? void 0 : q.text}` : "Event affecting the outcome has occurred." }) : "This event has already taken place, so the ability to make a prediction on its outcome is no longer available." })
+        R && /* @__PURE__ */ jsxs(f$3, { children: [
+          !n2 && /* @__PURE__ */ jsx(I$3, { children: /* @__PURE__ */ jsx(B1, { name: "questionExpired" }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(F, { children: /* @__PURE__ */ jsx(e$1, { children: n2 ? r2 ? "The results are already in!" : "Question is Closed" : "Question Closed" }) }),
+            /* @__PURE__ */ jsx(y$1, { children: n2 ? /* @__PURE__ */ jsx(h$1, { children: r2 ? `Correct: ${a2 == null ? void 0 : a2.text}` : "Event affecting the outcome has occurred." }) : "This event has already taken place, so the ability to make a prediction on its outcome is no longer available." })
           ] })
         ] }),
-        !I && k && /* @__PURE__ */ d(B, { children: [
-          !m && /* @__PURE__ */ e(fe, { name: "icon-prediction" }),
-          /* @__PURE__ */ d(gs, { children: [
+        !e2 && N && /* @__PURE__ */ jsxs(f$3, { children: [
+          !n2 && /* @__PURE__ */ jsx(b$2, { name: "icon-prediction" }),
+          /* @__PURE__ */ jsxs(x$2, { children: [
             "Your pick has been recorded. ",
-            /* @__PURE__ */ e(Ds, { children: "We’ll notify you of the result." })
+            /* @__PURE__ */ jsx(W, { children: "We’ll notify you of the result." })
           ] })
         ] }),
-        !I && O && /* @__PURE__ */ d(B, { children: [
-          !m && /* @__PURE__ */ e(Z, { "data-feedback-type": "correct", children: /* @__PURE__ */ e(w, { name: "correct" }) }),
-          /* @__PURE__ */ e(Y, { children: "Thanks for answering. Please stay tuned for the next question." })
+        !e2 && P2 && /* @__PURE__ */ jsxs(f$3, { children: [
+          !n2 && /* @__PURE__ */ jsx(I$3, { "data-feedback-type": "correct", children: /* @__PURE__ */ jsx(B1, { name: "correct" }) }),
+          /* @__PURE__ */ jsx(e$1, { children: "Thanks for answering. Please stay tuned for the next question." })
         ] }),
-        !I && (S || D) && /* @__PURE__ */ d(B, { className: ue(h && ye), children: [
-          !m && /* @__PURE__ */ e(Z, { "data-feedback-type": v, children: /* @__PURE__ */ e(w, { name: v }) }),
-          /* @__PURE__ */ e("div", { children: /* @__PURE__ */ d(ie, { children: [
-            m ? /* @__PURE__ */ e(Es, { children: v === "incorrect" ? /* @__PURE__ */ d(z, { children: [
-              /* @__PURE__ */ e("div", { children: "So close!" }),
-              /* @__PURE__ */ e("div", { children: "Better luck next time" })
-            ] }) : /* @__PURE__ */ d(z, { children: [
-              /* @__PURE__ */ e("div", { children: "That’s correct!" }),
-              /* @__PURE__ */ e("div", { children: "You chose wisely." })
-            ] }) }) : /* @__PURE__ */ e($s, { "data-feedback-type": v, children: V == null ? void 0 : V.title }),
-            m ? /* @__PURE__ */ d(bs, { children: [
-              /* @__PURE__ */ d("div", { children: [
+        !e2 && (Q || C2) && /* @__PURE__ */ jsxs(f$3, { className: cx_default(D$1 && m$2), children: [
+          !n2 && /* @__PURE__ */ jsx(I$3, { "data-feedback-type": m2, children: /* @__PURE__ */ jsx(B1, { name: m2 }) }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(F, { children: [
+            n2 ? /* @__PURE__ */ jsx(D, { children: m2 === "incorrect" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { children: "So close!" }),
+              /* @__PURE__ */ jsx("div", { children: "Better luck next time" })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { children: "That’s correct!" }),
+              /* @__PURE__ */ jsx("div", { children: "You chose wisely." })
+            ] }) }) : /* @__PURE__ */ jsx(A$3, { "data-feedback-type": m2, children: o2 == null ? void 0 : o2.title }),
+            n2 ? /* @__PURE__ */ jsxs(v$1, { children: [
+              /* @__PURE__ */ jsxs("div", { children: [
                 "Your pick: ",
-                y == null ? void 0 : y.text
+                T == null ? void 0 : T.text
               ] }),
-              /* @__PURE__ */ e("div", { children: v === "incorrect" ? `Correct: ${q == null ? void 0 : q.text}` : "" })
-            ] }) : /* @__PURE__ */ e(Rs, { children: V == null ? void 0 : V.description })
+              /* @__PURE__ */ jsx("div", { children: m2 === "incorrect" ? `Correct: ${a2 == null ? void 0 : a2.text}` : "" })
+            ] }) : /* @__PURE__ */ jsx(u$2, { children: o2 == null ? void 0 : o2.description })
           ] }) })
         ] })
       ] })
     }
   ) : null;
-}, xs = /* @__PURE__ */ n("div")({
+};
+const t$2 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "c1hygj0s",
-  propsAsIs: !1
-}), ks = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), a$3 = /* @__PURE__ */ styled_default("div")({
   name: "Title",
   class: "t1r84tez",
-  propsAsIs: !1
-}), Os = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), c$2 = /* @__PURE__ */ styled_default("div")({
   name: "Description",
   class: "d1aj1a7k",
-  propsAsIs: !1
-}), Ns = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), r$3 = /* @__PURE__ */ styled_default("div")({
   name: "AdditionalDescription",
   class: "ax09ezs",
-  propsAsIs: !1
-}), Ss = () => w, Vs = /* @__PURE__ */ n(Ss())({
+  propsAsIs: false
+}), n$1 = () => B1, p$1 = /* @__PURE__ */ styled_default(n$1())({
   name: "Icon",
   class: "inkrac",
-  propsAsIs: !0
-}), js = ({ icon: s, title: t, description: r, additionalDescription: l }) => /* @__PURE__ */ d(xs, { children: [
-  s && /* @__PURE__ */ e(Vs, { name: s }),
-  /* @__PURE__ */ e(ks, { children: t }),
-  /* @__PURE__ */ e(Os, { children: r }),
-  l && /* @__PURE__ */ e(Ns, { children: l })
-] }), Re = /* @__PURE__ */ n("div")({
+  propsAsIs: true
+});
+const x$1 = ({ icon: e2, title: i2, description: t2, additionalDescription: n2 }) => /* @__PURE__ */ jsxs(t$2, { children: [
+  e2 && /* @__PURE__ */ jsx(p$1, { name: e2 }),
+  /* @__PURE__ */ jsx(a$3, { children: i2 }),
+  /* @__PURE__ */ jsx(c$2, { children: t2 }),
+  n2 && /* @__PURE__ */ jsx(r$3, { children: n2 })
+] });
+const d$1 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "c14ielyq",
-  propsAsIs: !1
-}), Ls = () => Ge, Qs = /* @__PURE__ */ n(Ls())({
+  propsAsIs: false
+}), e = () => c$4, I$2 = /* @__PURE__ */ styled_default(e())({
   name: "QuestionScrollContainer",
   class: "q1tlqx57",
-  propsAsIs: !0
-}), Fs = /* @__PURE__ */ n("div")({
+  propsAsIs: true
+}), A$2 = /* @__PURE__ */ styled_default("div")({
   name: "TopShadow",
   class: "t1hq58md",
-  propsAsIs: !1
-}), Ws = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), f$2 = /* @__PURE__ */ styled_default("div")({
   name: "BottomShadow",
   class: "b1c8nxcx",
-  propsAsIs: !1
-}), Bs = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), S = /* @__PURE__ */ styled_default("div")({
   name: "SponsorLogo",
   class: "siozuc3",
-  propsAsIs: !1
-}), De = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), v = /* @__PURE__ */ styled_default("div")({
   name: "Content",
   class: "cpnc44r",
-  propsAsIs: !1
-}), Ys = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), x = /* @__PURE__ */ styled_default("div")({
   name: "Title",
   class: "tq7p3w0",
-  propsAsIs: !1
-}), zs = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), C$1 = /* @__PURE__ */ styled_default("div")({
   name: "OptionsWrap",
   class: "o1jlfj9g",
-  propsAsIs: !1
-}), qe = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), u$1 = /* @__PURE__ */ styled_default("div")({
   name: "Options",
   class: "o84pmnd",
-  propsAsIs: !1
-}), Ms = () => ge, Te = /* @__PURE__ */ n(Ms())({
+  propsAsIs: false
+}), a$2 = () => f$4, w$1 = /* @__PURE__ */ styled_default(a$2())({
   name: "AlertContainer",
   class: "a1dybjw9",
-  propsAsIs: !0
-}), Us = /* @__PURE__ */ n("div")({
+  propsAsIs: true
+}), y2 = /* @__PURE__ */ styled_default("div")({
   name: "EarlyPrediction",
   class: "e1l05ict",
-  propsAsIs: !1
-}), Ks = () => w, _s = /* @__PURE__ */ n(Ks())({
+  propsAsIs: false
+}), r$2 = () => B1, h = /* @__PURE__ */ styled_default(r$2())({
   name: "EarlyPredictionIcon",
   class: "ez9juex",
-  propsAsIs: !0
-}), Hs = () => w, Gs = /* @__PURE__ */ n(Hs())({
+  propsAsIs: true
+}), p = () => B1, q = /* @__PURE__ */ styled_default(p())({
   name: "SponsorIcon",
   class: "s8p4aob",
-  propsAsIs: !0
-}), Js = /* @__PURE__ */ n("button")({
+  propsAsIs: true
+});
+const r$1 = /* @__PURE__ */ styled_default("button")({
   name: "ButtonContainer",
   class: "b1b6dl8t",
-  propsAsIs: !1
-}), Xs = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), l$1 = /* @__PURE__ */ styled_default("div")({
   name: "ButtonPctWrap",
   class: "b4iik8i",
-  propsAsIs: !1
-}), Zs = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), I$1 = /* @__PURE__ */ styled_default("div")({
   name: "ButtonPct",
   class: "b1gq1lnf",
-  propsAsIs: !1
-}), en = /* @__PURE__ */ n("span")({
+  propsAsIs: false
+}), i = /* @__PURE__ */ styled_default("span")({
   name: "ButtonBody",
   class: "b1j65z51",
-  propsAsIs: !1
-}), sn = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), m$1 = /* @__PURE__ */ styled_default("div")({
   name: "IconContainer",
   class: "i19tpfua",
-  propsAsIs: !1
-}), nn = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), f$1 = /* @__PURE__ */ styled_default("div")({
   name: "IconWrap",
   class: "i1tubmma",
-  propsAsIs: !1
-}), xe = /* @__PURE__ */ n("img")({
+  propsAsIs: false
+}), n = /* @__PURE__ */ styled_default("img")({
   name: "Icon",
   class: "i1grrgwj",
-  propsAsIs: !1
-}), tn = () => xe, rn = /* @__PURE__ */ n(tn())({
+  propsAsIs: false
+}), t$1 = () => n, u = /* @__PURE__ */ styled_default(t$1())({
   name: "IconDefault",
   class: "ibemyq8",
-  propsAsIs: !0
-}), on = () => xe, an = /* @__PURE__ */ n(on())({
+  propsAsIs: true
+}), a$1 = () => n, A$1 = /* @__PURE__ */ styled_default(a$1())({
   name: "IconCircle",
   class: "i1dceht",
-  propsAsIs: !0
-}), cn = /* @__PURE__ */ n("span")({
+  propsAsIs: true
+}), d = /* @__PURE__ */ styled_default("span")({
   name: "Title",
   class: "t116q4vq",
-  propsAsIs: !1
-}), dn = /* @__PURE__ */ n("span")({
+  propsAsIs: false
+}), B = /* @__PURE__ */ styled_default("span")({
   name: "Indicators",
   class: "i17ajcu2",
-  propsAsIs: !1
-}), ln = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), P = /* @__PURE__ */ styled_default("div")({
   name: "PtsWrap",
   class: "pu9kmlb",
-  propsAsIs: !1
-}), pn = /* @__PURE__ */ n("span")({
+  propsAsIs: false
+}), b$1 = /* @__PURE__ */ styled_default("span")({
   name: "Pts",
   class: "p1j2j0s0",
-  propsAsIs: !1
-}), un = /* @__PURE__ */ n("span")({
+  propsAsIs: false
+}), g = /* @__PURE__ */ styled_default("span")({
   name: "Percentage",
   class: "p1mzj1sj",
-  propsAsIs: !1
-}), mn = () => w, hn = /* @__PURE__ */ n(mn())({
+  propsAsIs: false
+}), c$1 = () => B1, C = /* @__PURE__ */ styled_default(c$1())({
   name: "CheckIcon",
   class: "cichgz8",
-  propsAsIs: !0
-}), $e = {
-  [J.CENTERED]: (s) => /* @__PURE__ */ e(rn, { "data-testid": "vote-icon", alt: "option-icon", src: s }),
-  [J.TRANSPARENT]: (s) => /* @__PURE__ */ e(sn, { "data-testid": "vote-icon", children: /* @__PURE__ */ e(nn, { style: { backgroundImage: `url(${s})` } }) }),
-  [J.ROUNDED]: (s) => /* @__PURE__ */ e(an, { "data-testid": "vote-icon", alt: "option-icon", src: s }),
-  [J.NONE]: () => null,
-  [J.UNSET]: () => null
-}, In = ({ questionType: s, hasCorrectAnswer: t, correct: r, youVoted: l, questionVoted: o }) => {
-  if (s === i.POLL && l)
+  propsAsIs: true
+});
+const E = {
+  [QuestionImages.CENTERED]: (t2) => /* @__PURE__ */ jsx(u, { "data-testid": "vote-icon", alt: "option-icon", src: t2 }),
+  [QuestionImages.TRANSPARENT]: (t2) => /* @__PURE__ */ jsx(m$1, { "data-testid": "vote-icon", children: /* @__PURE__ */ jsx(f$1, { style: { backgroundImage: `url(${t2})` } }) }),
+  [QuestionImages.ROUNDED]: (t2) => /* @__PURE__ */ jsx(A$1, { "data-testid": "vote-icon", alt: "option-icon", src: t2 }),
+  [QuestionImages.NONE]: () => null,
+  [QuestionImages.UNSET]: () => null
+}, rt = ({ questionType: t2, hasCorrectAnswer: a2, correct: n2, youVoted: i2, questionVoted: r2 }) => {
+  if (t2 === QuestionType.POLL && i2)
     return "voted";
-  if (s === i.PREDICTION) {
-    if (!t && o)
-      return l ? "voted" : "unset";
-    if (t && o)
-      return l ? r ? "correct" : "incorrect" : "unset";
-    if (l)
+  if (t2 === QuestionType.PREDICTION) {
+    if (!a2 && r2)
+      return i2 ? "voted" : "unset";
+    if (a2 && r2)
+      return i2 ? n2 ? "correct" : "incorrect" : "unset";
+    if (i2)
       return "correct";
   }
-  return s === i.TRIVIA && o && l ? r ? "correct" : "incorrect" : "unset";
-}, vn = ({
-  questionType: s,
-  questionVoted: t,
-  correct: r,
-  hasCorrectAnswer: l,
-  questionStatus: o
-}) => s === i.TRIVIA ? t && r : s === i.PREDICTION ? t && r && l || o === se.RESOLVED && r : !1, An = _e(Js), yn = (s) => {
-  var t;
+  return t2 === QuestionType.TRIVIA && r2 && i2 ? n2 ? "correct" : "incorrect" : "unset";
+}, ot = ({
+  questionType: t2,
+  questionVoted: a2,
+  correct: n2,
+  hasCorrectAnswer: i2,
+  questionStatus: r2
+}) => t2 === QuestionType.TRIVIA ? a2 && n2 : t2 === QuestionType.PREDICTION ? a2 && n2 && i2 || r2 === QuestionStatus.RESOLVED && n2 : false, at = O(r$1), mt = (t2) => {
+  var N;
   const {
     // option props
-    id: r,
-    icon: l,
-    text: o,
-    percentageDecimal: p,
-    points: h,
+    id: a2,
+    icon: n2,
+    text: i$12,
+    percentageDecimal: r2,
+    points: w2,
     // extra props
-    onVote: f,
-    markThatVoted: P,
-    firstOption: I,
-    onPercentsAnimated: a,
-    youSelected: R,
-    youVoted: E,
-    questionVoted: y,
-    imageMode: m,
-    answerTimeExpired: q,
-    questionStatus: x,
-    isLoading: g,
-    questionType: T,
-    correct: N,
-    hasCorrectAnswer: k,
-    marketClosed: S,
-    isEarlyPrediction: D,
-    isAd: O,
-    webos: v
-  } = s, [V, M] = b(0), G = In(s), ne = vn({ questionType: T, questionVoted: y, correct: N, hasCorrectAnswer: k, questionStatus: x }), L = S && T === i.PREDICTION, Q = y || L, re = T === i.PREDICTION && !y && !S && !O, F = y && !R && G !== "incorrect" && !E;
-  return Ue(() => {
-    M(0), requestAnimationFrame(() => {
-      M(p);
+    onVote: D2,
+    markThatVoted: g$1,
+    firstOption: k2,
+    onPercentsAnimated: l2,
+    youSelected: P$1,
+    youVoted: v2,
+    questionVoted: s,
+    imageMode: C$12,
+    answerTimeExpired: A2,
+    questionStatus: p2,
+    isLoading: B$1,
+    questionType: d$12,
+    correct: x2,
+    hasCorrectAnswer: L2,
+    marketClosed: f2,
+    isEarlyPrediction: b2,
+    isAd: m2,
+    webos: W2
+  } = t2, [F2, R] = useState(0), I2 = rt(t2), Q = ot({ questionType: d$12, questionVoted: s, correct: x2, hasCorrectAnswer: L2, questionStatus: p2 }), h2 = f2 && d$12 === QuestionType.PREDICTION, S2 = s || h2, j = d$12 === QuestionType.PREDICTION && !s && !f2 && !m2, T = s && !P$1 && I2 !== "incorrect" && !v2;
+  return useLayoutEffect(() => {
+    R(0), requestAnimationFrame(() => {
+      R(r2);
     });
-  }, [p]), /* @__PURE__ */ d(
-    An,
+  }, [r2]), /* @__PURE__ */ jsxs(
+    at,
     {
-      value: r,
-      webos: v,
-      autoFocus: I,
-      "data-selected": R,
-      "data-answer-state": G,
-      disabled: y || g || q || L,
-      "data-is-not-checked": F,
+      value: a2,
+      webos: W2,
+      autoFocus: k2,
+      "data-selected": P$1,
+      "data-answer-state": I2,
+      disabled: s || B$1 || A2 || h2,
+      "data-is-not-checked": T,
       "data-a": "intr",
-      onClick: (te) => {
-        P(
-          T === i.PREDICTION ? S : x === se.RESOLVED
-        ), f(te);
+      onClick: (y3) => {
+        g$1(
+          d$12 === QuestionType.PREDICTION ? f2 : p2 === QuestionStatus.RESOLVED
+        ), D2(y3);
       },
-      "data-is-ad": O,
+      "data-is-ad": m2,
       children: [
-        /* @__PURE__ */ e(Xs, { children: /* @__PURE__ */ e(
-          Zs,
+        /* @__PURE__ */ jsx(l$1, { children: /* @__PURE__ */ jsx(
+          I$1,
           {
-            "data-answer-state": G,
-            "data-is-not-checked": F,
-            style: { width: `${Q ? V : 0}%` },
+            "data-answer-state": I2,
+            "data-is-not-checked": T,
+            style: { width: `${S2 ? F2 : 0}%` },
             onTransitionEnd: () => {
-              L || a == null || a();
+              h2 || l2 == null || l2();
             },
-            "data-is-ad": O
+            "data-is-ad": m2
           }
         ) }),
-        /* @__PURE__ */ d(en, { "data-a": "intr", children: [
-          l && m && ((t = $e[m]) == null ? void 0 : t.call($e, l)),
-          /* @__PURE__ */ e(cn, { "data-a": "intr", children: o }),
-          re && /* @__PURE__ */ d(ln, { children: [
-            h,
-            /* @__PURE__ */ e(pn, { children: "pts" })
+        /* @__PURE__ */ jsxs(i, { "data-a": "intr", children: [
+          n2 && C$12 && ((N = E[C$12]) == null ? void 0 : N.call(E, n2)),
+          /* @__PURE__ */ jsx(d, { "data-a": "intr", children: i$12 }),
+          j && /* @__PURE__ */ jsxs(P, { children: [
+            w2,
+            /* @__PURE__ */ jsx(b$1, { children: "pts" })
           ] }),
-          Q && /* @__PURE__ */ d(dn, { children: [
-            ne && /* @__PURE__ */ e(hn, { name: D ? "selectedBetPack" : "selected" }),
-            /* @__PURE__ */ e(un, { children: /* @__PURE__ */ e(Ee, { value: p, suffix: "%" }) })
+          S2 && /* @__PURE__ */ jsxs(B, { children: [
+            Q && /* @__PURE__ */ jsx(C, { name: b2 ? "selectedBetPack" : "selected" }),
+            /* @__PURE__ */ jsx(g, { children: /* @__PURE__ */ jsx(d$6, { value: r2, suffix: "%" }) })
           ] })
         ] })
       ]
     }
   );
-}, fn = () => Pe, Cn = /* @__PURE__ */ n(fn())({
+};
+const t = () => v$2, c = /* @__PURE__ */ styled_default(t())({
   name: "ShowInContainer",
   class: "sie6cqo",
-  propsAsIs: !0
-}), Tn = /* @__PURE__ */ n("div")({
+  propsAsIs: true
+}), r = /* @__PURE__ */ styled_default("div")({
   name: "WinBarContainer",
   class: "wgizw4u",
-  propsAsIs: !1
-}), $n = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), l = /* @__PURE__ */ styled_default("div")({
   name: "Content",
   class: "c1l3ucjp",
-  propsAsIs: !1
-}), En = /* @__PURE__ */ n("div")({
+  propsAsIs: false
+}), m = /* @__PURE__ */ styled_default("div")({
   name: "Title",
   class: "tx7j799",
-  propsAsIs: !1
-}), bn = () => w, wn = /* @__PURE__ */ n(bn())({
+  propsAsIs: false
+}), a = () => B1, I = /* @__PURE__ */ styled_default(a())({
   name: "WinIcon",
   class: "w4lwuj0",
-  propsAsIs: !0
-}), gn = /* @__PURE__ */ n("div")({
+  propsAsIs: true
+}), f = /* @__PURE__ */ styled_default("div")({
   name: "Points",
   class: "po9i64o",
-  propsAsIs: !1
-}), Pn = /* @__PURE__ */ n("span")({
+  propsAsIs: false
+}), w = /* @__PURE__ */ styled_default("span")({
   name: "PointsCount",
   class: "pe5g05h",
-  propsAsIs: !1
-}), Rn = /* @__PURE__ */ n("span")({
+  propsAsIs: false
+}), A = /* @__PURE__ */ styled_default("span")({
   name: "PointsUnits",
   class: "p1hdtpmb",
-  propsAsIs: !1
-}), Dn = ({
-  title: s,
-  points: t,
-  isPlayingTimer: r,
-  isTimer: l,
-  animatePoints: o,
-  questionType: p,
-  timerDuration: h,
-  votedInCurrentRender: f,
-  percentsAnimated: P,
-  onTimerExpired: I
-}) => /* @__PURE__ */ e(
-  Cn,
+  propsAsIs: false
+});
+const b = ({
+  title: o2,
+  points: t2,
+  isPlayingTimer: a2,
+  isTimer: m$12,
+  animatePoints: c$12,
+  questionType: r$12,
+  timerDuration: d2,
+  votedInCurrentRender: l$12,
+  percentsAnimated: h2,
+  onTimerExpired: C2
+}) => /* @__PURE__ */ jsx(
+  c,
   {
-    enabled: p === i.PREDICTION && f,
-    animate: P,
-    children: /* @__PURE__ */ d(
-      Tn,
+    enabled: r$12 === QuestionType.PREDICTION && l$12,
+    animate: h2,
+    children: /* @__PURE__ */ jsxs(
+      r,
       {
         style: {
-          justifyContent: p === i.PREDICTION ? "center" : "space-between"
+          justifyContent: r$12 === QuestionType.PREDICTION ? "center" : "space-between"
         },
         children: [
-          /* @__PURE__ */ d($n, { children: [
-            s && /* @__PURE__ */ e(En, { children: s }),
-            t !== void 0 && p !== i.POLL && /* @__PURE__ */ d(z, { children: [
-              /* @__PURE__ */ e(wn, { name: "icon-trophy" }),
-              /* @__PURE__ */ d(gn, { children: [
-                /* @__PURE__ */ e(Pn, { children: o ? /* @__PURE__ */ e(Ee, { value: t, delay: 0.3 }) : t }),
-                /* @__PURE__ */ e(Rn, { children: "PTS" })
+          /* @__PURE__ */ jsxs(l, { children: [
+            o2 && /* @__PURE__ */ jsx(m, { children: o2 }),
+            t2 !== void 0 && r$12 !== QuestionType.POLL && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(I, { name: "icon-trophy" }),
+              /* @__PURE__ */ jsxs(f, { children: [
+                /* @__PURE__ */ jsx(w, { children: c$12 ? /* @__PURE__ */ jsx(d$6, { value: t2, delay: 0.3 }) : t2 }),
+                /* @__PURE__ */ jsx(A, { children: "PTS" })
               ] })
             ] })
           ] }),
-          l && p !== i.PREDICTION && /* @__PURE__ */ e(He, { isPlaying: r, onTimerExpired: I, duration: h })
+          m$12 && r$12 !== QuestionType.PREDICTION && /* @__PURE__ */ jsx(L, { isPlaying: a2, onTimerExpired: C2, duration: d2 })
         ]
       }
     )
   }
-), qn = (s, t) => {
-  switch (s) {
+);
+const Ft = (e2, T) => {
+  switch (e2) {
     case "already_voted":
-      return t === i.POLL ? "You’ve already answered this question on another device." : "You’ve already answered this question on another device. So the points for this answer won't tally.";
+      return T === QuestionType.POLL ? "You’ve already answered this question on another device." : "You’ve already answered this question on another device. So the points for this answer won't tally.";
     default:
       return "Something went wrong, please try again";
   }
-}, Un = () => /* @__PURE__ */ e(Re, { children: /* @__PURE__ */ d(De, { children: [
-  /* @__PURE__ */ e(le, { loading: !0, style: { height: "40px", borderRadius: "100px" } }),
-  /* @__PURE__ */ e(le, { loading: !0, style: { height: "24px", margin: "16px 0" } }),
-  /* @__PURE__ */ e(qe, { children: Array.from({ length: 5 }).map((s, t) => /* @__PURE__ */ e(le, { loading: !0, style: { height: "44px" } }, t)) })
-] }) }), Kn = ({
-  openedQuestion: s,
-  isLoading: t,
-  vote: r,
-  close: l,
-  isEarlyPrediction: o,
-  mastersApp: p,
-  webos: h
+}, te = () => /* @__PURE__ */ jsx(d$1, { children: /* @__PURE__ */ jsxs(v, { children: [
+  /* @__PURE__ */ jsx(i$1, { loading: true, style: { height: "40px", borderRadius: "100px" } }),
+  /* @__PURE__ */ jsx(i$1, { loading: true, style: { height: "24px", margin: "16px 0" } }),
+  /* @__PURE__ */ jsx(u$1, { children: Array.from({ length: 5 }).map((e2, T) => /* @__PURE__ */ jsx(i$1, { loading: true, style: { height: "44px" } }, T)) })
+] }) }), ee = ({
+  openedQuestion: e2,
+  isLoading: T,
+  vote: j,
+  close: F2,
+  isEarlyPrediction: a2,
+  mastersApp: at2,
+  webos: ct
 }) => {
-  var f, P;
-  const I = s.subject, a = s.type, R = s.status, E = (f = s.options) == null ? void 0 : f.options, y = s.marketClosed, m = s.id, q = ee(), x = ee(), g = p ? !1 : (s == null ? void 0 : s.adUnit) === Ke.STANDART, [T, N] = b(!1), [k, S] = b(!1), [D, O] = b(!0), [v, V] = b(!1), [M, G] = b(!1), [ne, L] = b(""), [Q, re] = b(""), [F, te] = b(!1), [ke, Oe] = b(!1), [me, Ne] = b(!1), { runAnimation: U, finished: he } = os();
-  H(() => {
-    he && l(m);
-  }, [l, he]), H(() => {
-    a === i.PREDICTION ? y && O(!1) : R === se.RESOLVED && O(!1);
+  var tt, et;
+  const H = e2.subject, r2 = e2.type, v$12 = e2.status, f2 = (tt = e2.options) == null ? void 0 : tt.options, I2 = e2.marketClosed, O2 = e2.id, U = useRef(), S$22 = useRef(), g2 = at2 ? false : (e2 == null ? void 0 : e2.adUnit) === AdUnit.STANDART, [V, _] = useState(false), [x$22, lt] = useState(false), [y$12, $] = useState(true), [d2, ft] = useState(false), [k2, ut] = useState(false), [z, P2] = useState(""), [D2, mt$1] = useState(""), [E2, G] = useState(false), [dt, Tt] = useState(false), [J, ht] = useState(false), { runAnimation: A2, finished: K } = S$1();
+  useEffect(() => {
+    K && F2(O2);
+  }, [F2, K]), useEffect(() => {
+    r2 === QuestionType.PREDICTION ? I2 && $(false) : v$12 === QuestionStatus.RESOLVED && $(false);
   }, []);
-  const Se = j((u) => {
-    S(u), N(!0);
-  }, []), Ve = j(() => {
-    o && N(!1);
-  }, [o]), oe = ee(!1), Ie = j(() => {
-    x.current && clearTimeout(x.current), x.current = setTimeout(() => {
-      Ne(!0), U({ delay: 5500 });
+  const It = useCallback((s) => {
+    lt(s), _(true);
+  }, []), gt = useCallback(() => {
+    a2 && _(false);
+  }, [a2]), L2 = useRef(false), X = useCallback(() => {
+    S$22.current && clearTimeout(S$22.current), S$22.current = setTimeout(() => {
+      ht(true), A2({ delay: 5500 });
     }, 4e3);
-  }, [U]), ve = j(
-    async (u) => {
-      if (!oe.current && (oe.current = !0, m)) {
-        const $ = u.currentTarget.value;
-        L($);
+  }, [A2]), Z = useCallback(
+    async (s) => {
+      if (!L2.current && (L2.current = true, O2)) {
+        const l2 = s.currentTarget.value;
+        P2(l2);
         try {
-          await r(m, $), g && Ie();
-        } catch (K) {
-          re(qn(K.message, a)), L(""), console.error("Error while voting", K), oe.current = !1;
+          await j(O2, l2), g2 && X();
+        } catch (C2) {
+          mt$1(Ft(C2.message, r2)), P2(""), console.error("Error while voting", C2), L2.current = false;
         }
       }
     },
-    [a, m, L, r, g, Ie]
-  ), je = j(() => {
-    V(!0), U({ delay: 3500 });
-  }, [U]), Le = j(() => {
-    G(!0), U({ delay: 3500 });
-  }, [U]), c = s == null ? void 0 : s.answers.find((u) => u.youVoted === !0), C = _(
-    () => !!(s != null && s.answers.find((u) => u.correct === !0)),
-    [s]
-  ), A = _(
-    () => s == null ? void 0 : s.answers.find((u) => u.correct === !0),
-    [s]
+    [r2, O2, P2, j, g2, X]
+  ), At = useCallback(() => {
+    ft(true), A2({ delay: 3500 });
+  }, [A2]), Ct = useCallback(() => {
+    ut(true), A2({ delay: 3500 });
+  }, [A2]), t2 = e2 == null ? void 0 : e2.answers.find((s) => s.youVoted === true), c2 = useMemo(
+    () => !!(e2 != null && e2.answers.find((s) => s.correct === true)),
+    [e2]
+  ), o2 = useMemo(
+    () => e2 == null ? void 0 : e2.answers.find((s) => s.correct === true),
+    [e2]
   );
-  H(() => {
-    c && T && !ke && (q.current = setTimeout(Le, 1e4), Oe(!0));
-  }, [c]), H(() => () => {
-    clearTimeout(q.current), clearTimeout(x.current);
+  useEffect(() => {
+    t2 && V && !dt && (U.current = setTimeout(Ct, 1e4), Tt(true));
+  }, [t2]), useEffect(() => () => {
+    clearTimeout(U.current), clearTimeout(S$22.current);
   }, []);
-  const ae = _(() => s ? s.answers.map((u) => {
-    var $;
+  const b$12 = useMemo(() => e2 ? e2.answers.map((s) => {
+    var l2;
     return {
-      ...u,
-      questionVoted: !!c,
-      youSelected: ne === u.id,
-      isLoading: t,
-      hasCorrectAnswer: C,
-      questionType: s.type,
-      answerTimeExpired: v,
-      questionStatus: R,
-      imageMode: ($ = s.appearance) == null ? void 0 : $.images,
-      onVote: ve
+      ...s,
+      questionVoted: !!t2,
+      youSelected: z === s.id,
+      isLoading: T,
+      hasCorrectAnswer: c2,
+      questionType: e2.type,
+      answerTimeExpired: d2,
+      questionStatus: v$12,
+      imageMode: (l2 = e2.appearance) == null ? void 0 : l2.images,
+      onVote: Z
     };
   }) : [], [
-    C,
-    v,
-    t,
-    s,
-    c,
-    R,
-    ve,
-    ne
+    c2,
+    d2,
+    T,
+    e2,
+    t2,
+    v$12,
+    Z,
+    z
   ]);
-  H(() => {
-    const u = ae.some(({ percentageDecimal: K }) => K !== 0), $ = c && a === i.PREDICTION;
-    Q && (o || !u || y && $) && te(!0);
-  }, [ae, Q, o, y, a, c]);
-  const Ae = E && (E.case === "trivia" || E.case === "prediction") ? E.value : void 0, W = R === se.RESOLVED && a === i.TRIVIA && !c && !D, ce = a === i.TRIVIA && k, de = _(() => g ? !1 : a === i.PREDICTION ? o ? !1 : !!(c && !C || c && C && A != null && A.youVoted) : !0, [a, c, C, A, o, g]), Qe = _(() => {
-    if (a === i.PREDICTION && c && (!C || C && A != null && A.youVoted))
-      return c.points;
-    if (!(W || v))
-      return c ? c.correct ? c.pointsEarned : 0 : A == null ? void 0 : A.points;
-  }, [v, c, A, W, a, C]), Fe = _(() => a === i.PREDICTION && c ? C ? C && A != null && A.youVoted ? "You won" : "" : "To win" : W || v ? "Time expired" : a === i.POLL ? "Time remaining" : c ? "You won" : "To win", [v, a, c, W, C, A]), We = !de || de && a === i.PREDICTION && T && !F, Be = (a === i.TRIVIA || a === i.PREDICTION) && c && C && (A == null ? void 0 : A.youVoted), Ye = c || W || ce || a === i.TRIVIA && R === se.RESOLVED && D, ze = !o && (v || M) || me, Me = () => {
-    const u = () => a === i.TRIVIA ? c != null && c.correct ? `That's correct!
+  useEffect(() => {
+    const s = b$12.some(({ percentageDecimal: C2 }) => C2 !== 0), l2 = t2 && r2 === QuestionType.PREDICTION;
+    D2 && (a2 || !s || I2 && l2) && G(true);
+  }, [b$12, D2, a2, I2, r2, t2]);
+  const Q = f2 && (f2.case === "trivia" || f2.case === "prediction") ? f2.value : void 0, h$12 = v$12 === QuestionStatus.RESOLVED && r2 === QuestionType.TRIVIA && !t2 && !y$12, W2 = r2 === QuestionType.TRIVIA && x$22, Y = useMemo(() => g2 ? false : r2 === QuestionType.PREDICTION ? a2 ? false : !!(t2 && !c2 || t2 && c2 && (o2 != null && o2.youVoted)) : true, [r2, t2, c2, o2, a2, g2]), Rt = useMemo(() => {
+    if (r2 === QuestionType.PREDICTION && t2 && (!c2 || c2 && (o2 != null && o2.youVoted)))
+      return t2.points;
+    if (!(h$12 || d2))
+      return t2 ? t2.correct ? t2.pointsEarned : 0 : o2 == null ? void 0 : o2.points;
+  }, [d2, t2, o2, h$12, r2, c2]), wt = useMemo(() => r2 === QuestionType.PREDICTION && t2 ? c2 ? c2 && (o2 != null && o2.youVoted) ? "You won" : "" : "To win" : h$12 || d2 ? "Time expired" : r2 === QuestionType.POLL ? "Time remaining" : t2 ? "You won" : "To win", [d2, r2, t2, h$12, c2, o2]), vt = !Y || Y && r2 === QuestionType.PREDICTION && V && !E2, Vt = (r2 === QuestionType.TRIVIA || r2 === QuestionType.PREDICTION) && t2 && c2 && (o2 == null ? void 0 : o2.youVoted), yt = t2 || h$12 || W2 || r2 === QuestionType.TRIVIA && v$12 === QuestionStatus.RESOLVED && y$12, pt = !a2 && (d2 || k2) || J, Ot = () => {
+    const s = () => r2 === QuestionType.TRIVIA ? t2 != null && t2.correct ? `That's correct!
 You chose wisely.` : `So close!
-Better luck next time.` : a === i.POLL ? `Thanks for answering.
-Please stay tuned for the next question.` : a === i.PREDICTION ? "Stay tuned to see if your prediction was correct." : "", $ = () => a === i.TRIVIA ? `Your Pick: ${A == null ? void 0 : A.text}` : a === i.POLL || a === i.PREDICTION ? `Your Pick: ${c == null ? void 0 : c.text}` : "", K = () => a === i.TRIVIA && (E == null ? void 0 : E.case) === "trivia" ? E == null ? void 0 : E.value.explanation : a === i.PREDICTION ? I : "";
-    return me ? /* @__PURE__ */ e(Te, { children: /* @__PURE__ */ e(
-      js,
+Better luck next time.` : r2 === QuestionType.POLL ? `Thanks for answering.
+Please stay tuned for the next question.` : r2 === QuestionType.PREDICTION ? "Stay tuned to see if your prediction was correct." : "", l2 = () => r2 === QuestionType.TRIVIA ? `Your Pick: ${o2 == null ? void 0 : o2.text}` : r2 === QuestionType.POLL || r2 === QuestionType.PREDICTION ? `Your Pick: ${t2 == null ? void 0 : t2.text}` : "", C2 = () => r2 === QuestionType.TRIVIA && (f2 == null ? void 0 : f2.case) === "trivia" ? f2 == null ? void 0 : f2.value.explanation : r2 === QuestionType.PREDICTION ? H : "";
+    return J ? /* @__PURE__ */ jsx(w$1, { children: /* @__PURE__ */ jsx(
+      x$1,
       {
-        title: u(),
-        description: $(),
-        ...c != null && c.correct || a === i.POLL || a === i.PREDICTION ? { icon: "icon-correct" } : {},
-        ...a === i.TRIVIA || a === i.PREDICTION ? { additionalDescription: K() } : {}
+        title: s(),
+        description: l2(),
+        ...t2 != null && t2.correct || r2 === QuestionType.POLL || r2 === QuestionType.PREDICTION ? { icon: "icon-correct" } : {},
+        ...r2 === QuestionType.TRIVIA || r2 === QuestionType.PREDICTION ? { additionalDescription: C2() } : {}
       }
-    ) }) : !o && (v || M) ? /* @__PURE__ */ e(Te, { children: /* @__PURE__ */ e(
-      As,
+    ) }) : !a2 && (d2 || k2) ? /* @__PURE__ */ jsx(w$1, { children: /* @__PURE__ */ jsx(
+      d$2,
       {
         icon: "icon-check-circle",
         title: "More to come...",
-        description: M ? /* @__PURE__ */ d(z, { children: [
+        description: k2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
           "Stay tuned for more questions ",
-          /* @__PURE__ */ e("br", {}),
+          /* @__PURE__ */ jsx("br", {}),
           " and insights."
-        ] }) : /* @__PURE__ */ d(z, { children: [
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           "Watch for additional enhanced stream ",
-          /* @__PURE__ */ e("br", {}),
+          /* @__PURE__ */ jsx("br", {}),
           " interactive experience."
         ] })
       }
     ) }) : null;
   };
-  return /* @__PURE__ */ d(Qs, { children: [
-    o && /* @__PURE__ */ e(Fs, {}),
-    /* @__PURE__ */ e(Re, { style: o ? { marginTop: "-40px" } : {}, children: /* @__PURE__ */ d(De, { children: [
-      !o && !g && /* @__PURE__ */ e(
-        Ce,
+  return /* @__PURE__ */ jsxs(I$2, { children: [
+    a2 && /* @__PURE__ */ jsx(A$2, {}),
+    /* @__PURE__ */ jsx(d$1, { style: a2 ? { marginTop: "-40px" } : {}, children: /* @__PURE__ */ jsxs(v, { children: [
+      !a2 && !g2 && /* @__PURE__ */ jsx(
+        ii,
         {
-          feedbackMessages: Ae,
-          questionVoted: !!c,
-          questionVotedCorrectly: c == null ? void 0 : c.correct,
-          questionType: a,
-          hasCorrectAnswer: C,
-          showExpiredNotification: W,
-          showClosedNotificationTrivia: ce,
-          votedInCurrentRender: T,
-          votedAfterQuestionClosed: k,
-          enteredAnActiveQuestion: D,
-          marketClosed: y,
-          percentsAnimated: F,
-          voteErrorMessage: Q,
-          votedAnswer: c
+          feedbackMessages: Q,
+          questionVoted: !!t2,
+          questionVotedCorrectly: t2 == null ? void 0 : t2.correct,
+          questionType: r2,
+          hasCorrectAnswer: c2,
+          showExpiredNotification: h$12,
+          showClosedNotificationTrivia: W2,
+          votedInCurrentRender: V,
+          votedAfterQuestionClosed: x$22,
+          enteredAnActiveQuestion: y$12,
+          marketClosed: I2,
+          percentsAnimated: E2,
+          voteErrorMessage: D2,
+          votedAnswer: t2
         }
       ),
-      de && /* @__PURE__ */ e(
-        Dn,
+      Y && /* @__PURE__ */ jsx(
+        b,
         {
-          title: Fe,
-          points: Qe,
-          onTimerExpired: je,
-          questionType: s.type,
-          isTimer: !t,
-          isPlayingTimer: !c,
-          animatePoints: Be,
-          timerDuration: Ye ? 0 : Number(((P = s == null ? void 0 : s.appearance) == null ? void 0 : P.autoHideInterval) || "30"),
-          votedInCurrentRender: T,
-          percentsAnimated: F
+          title: wt,
+          points: Rt,
+          onTimerExpired: At,
+          questionType: e2.type,
+          isTimer: !T,
+          isPlayingTimer: !t2,
+          animatePoints: Vt,
+          timerDuration: yt ? 0 : Number(((et = e2 == null ? void 0 : e2.appearance) == null ? void 0 : et.autoHideInterval) || "30"),
+          votedInCurrentRender: V,
+          percentsAnimated: E2
         }
       ),
-      ze ? Me() : /* @__PURE__ */ d(z, { children: [
-        o && /* @__PURE__ */ d(Us, { children: [
-          /* @__PURE__ */ e(_s, { name: "iconEarlyPrediction" }),
+      pt ? Ot() : /* @__PURE__ */ jsxs(Fragment, { children: [
+        a2 && /* @__PURE__ */ jsxs(y2, { children: [
+          /* @__PURE__ */ jsx(h, { name: "iconEarlyPrediction" }),
           "EARLY PREDICTION"
         ] }),
-        /* @__PURE__ */ e(Ys, { style: We ? { marginTop: 0 } : {}, children: I }),
-        o && /* @__PURE__ */ e(
-          Ce,
+        /* @__PURE__ */ jsx(x, { style: vt ? { marginTop: 0 } : {}, children: H }),
+        a2 && /* @__PURE__ */ jsx(
+          ii,
           {
-            feedbackMessages: Ae,
-            questionVoted: !!c,
-            questionVotedCorrectly: c == null ? void 0 : c.correct,
-            questionType: a,
-            hasCorrectAnswer: C,
-            showExpiredNotification: W,
-            showClosedNotificationTrivia: ce,
-            votedInCurrentRender: T,
-            votedAfterQuestionClosed: k,
-            enteredAnActiveQuestion: D,
-            marketClosed: y,
-            percentsAnimated: F,
-            voteErrorMessage: Q,
-            isEarlyPrediction: o,
-            correctAnswer: A,
-            votedAnswer: c,
-            onAnimationEnd: Ve
+            feedbackMessages: Q,
+            questionVoted: !!t2,
+            questionVotedCorrectly: t2 == null ? void 0 : t2.correct,
+            questionType: r2,
+            hasCorrectAnswer: c2,
+            showExpiredNotification: h$12,
+            showClosedNotificationTrivia: W2,
+            votedInCurrentRender: V,
+            votedAfterQuestionClosed: x$22,
+            enteredAnActiveQuestion: y$12,
+            marketClosed: I2,
+            percentsAnimated: E2,
+            voteErrorMessage: D2,
+            isEarlyPrediction: a2,
+            correctAnswer: o2,
+            votedAnswer: t2,
+            onAnimationEnd: gt
           }
         ),
-        /* @__PURE__ */ d(zs, { children: [
-          /* @__PURE__ */ e(qe, { children: ae.sort((u, $) => u.id > $.id ? 1 : -1).map((u, $) => /* @__PURE__ */ e(
-            yn,
+        /* @__PURE__ */ jsxs(C$1, { children: [
+          /* @__PURE__ */ jsx(u$1, { children: b$12.sort((s, l2) => s.id > l2.id ? 1 : -1).map((s, l2) => /* @__PURE__ */ jsx(
+            mt,
             {
-              ...u,
-              firstOption: $ === 0,
-              markThatVoted: Se,
-              onPercentsAnimated: () => te(!0),
-              votedAfterQuestionClosed: k,
-              enteredAnActiveQuestion: D,
-              marketClosed: y,
-              isEarlyPrediction: o,
-              isAd: g,
-              webos: h
+              ...s,
+              firstOption: l2 === 0,
+              markThatVoted: It,
+              onPercentsAnimated: () => G(true),
+              votedAfterQuestionClosed: x$22,
+              enteredAnActiveQuestion: y$12,
+              marketClosed: I2,
+              isEarlyPrediction: a2,
+              isAd: g2,
+              webos: ct
             },
-            u.id
+            s.id
           )) }),
-          o && /* @__PURE__ */ d(z, { children: [
-            /* @__PURE__ */ e(Ws, {}),
-            /* @__PURE__ */ e(Bs, { children: /* @__PURE__ */ e(Gs, { name: "mastersLogoWhite" }) })
+          a2 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(f$2, {}),
+            /* @__PURE__ */ jsx(S, { children: /* @__PURE__ */ jsx(q, { name: "mastersLogoWhite" }) })
           ] })
         ] })
       ] })
@@ -819,17 +834,17 @@ Please stay tuned for the next question.` : a === i.PREDICTION ? "Stay tuned to
   ] });
 };
 export {
-  Bn as C,
-  os as S,
-  Yn as a,
-  we as b,
-  Ge as c,
-  zn as d,
-  Kn as e,
-  ge as f,
-  Wn as l,
-  Fn as m,
-  be as n,
-  Qn as p,
-  Un as t
+  C$2 as C,
+  S$1 as S,
+  S$2 as a,
+  a$5 as b,
+  c$4 as c,
+  d$5 as d,
+  ee as e,
+  f$4 as f,
+  l$4 as l,
+  m$4 as m,
+  n$4 as n,
+  p$4 as p,
+  te as t
 };