@streamlayer/react 1.23.2 → 1.24.0

package/lib/es/index14.js

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