@streamlayer/react 1.23.0 → 1.23.2

package/lib/classic/es/index13.js

@@ -0,0 +1,850 @@
+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 "./index8.js";
+import { B as B1 } from "./index4.js";
+import { Q as QuestionType, a as QuestionImages, c as QuestionStatus, b as AdUnit } from "./useStreamLayerApp2.js";
+import { O, L } from "./index10.js";
+import { d as d$6 } from "./index3.js";
+const p$4 = /* @__PURE__ */ styled_default("div")({
+  name: "SDKContainer",
+  class: "sopqfe6",
+  propsAsIs: false
+}), c$4 = /* @__PURE__ */ styled_default("div")({
+  name: "SDKScrollContainer",
+  class: "s102vcph",
+  propsAsIs: false
+}), n$4 = /* @__PURE__ */ styled_default("div")({
+  name: "SDKContentContainer",
+  class: "s1meqjjv",
+  propsAsIs: false
+}), e$2 = () => n$4, a$5 = /* @__PURE__ */ styled_default(e$2())({
+  name: "SDKWhiteContainer",
+  class: "s1burm22",
+  propsAsIs: true
+}), r$6 = () => a$5, m$4 = /* @__PURE__ */ styled_default(r$6())({
+  name: "SDKSummaryContainer",
+  class: "sm5r3j5",
+  propsAsIs: true
+}), l$4 = /* @__PURE__ */ styled_default("div")({
+  name: "TabsContainer",
+  class: "tysxwr6",
+  propsAsIs: false
+}), o$1 = () => n$4, C$2 = /* @__PURE__ */ styled_default(o$1())({
+  name: "LeaderboardContainer",
+  class: "l9er3b1",
+  propsAsIs: true
+}), t$4 = () => a$5, S$2 = /* @__PURE__ */ styled_default(t$4())({
+  name: "TabsNavContainer",
+  class: "t19dtrb3",
+  propsAsIs: true
+}), d$5 = /* @__PURE__ */ styled_default("div")({
+  name: "UserSummaryContainer",
+  class: "u1552n3j",
+  propsAsIs: false
+});
+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() {
+    u$4(this, "observers", /* @__PURE__ */ new Set());
+  }
+  subscribe(e2) {
+    this.observers.add(e2);
+  }
+  unsubscribe(e2) {
+    this.observers.delete(e2);
+  }
+  notify(e2) {
+    this.observers.forEach((s) => s(e2));
+  }
+};
+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 n$3.subscribe(r2), () => {
+      n$3.unsubscribe(r2);
+    };
+  }, []);
+  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 {
+    ...t2,
+    runAnimation: c2,
+    onAnimationEnd: f2
+  };
+};
+const u$3 = /* @__PURE__ */ styled_default("div")({
+  name: "Container",
+  class: "c1pgyo67",
+  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: true
+}), v$2 = ({
+  children: r2,
+  style: e2,
+  enabled: o2,
+  animate: t2,
+  ...s
+}) => {
+  const n2 = useRef(null);
+  return /* @__PURE__ */ jsx(y$2, {
+    ...s,
+    enabled: o2 && t2,
+    style: {
+      ...e2,
+      ...(() => {
+        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__ */ jsx("div", {
+      ref: n2,
+      children: r2
+    })
+  });
+};
+const t$3 = /* @__PURE__ */ styled_default("div")({
+  name: "Container",
+  class: "c1gcvmcj",
+  propsAsIs: false
+}), p$3 = /* @__PURE__ */ styled_default("div")({
+  name: "Title",
+  class: "tnr592a",
+  propsAsIs: false
+}), r$5 = /* @__PURE__ */ styled_default("div")({
+  name: "Description",
+  class: "d1e8jqpv",
+  propsAsIs: false
+}), n$2 = () => B1, a$4 = /* @__PURE__ */ styled_default(n$2())({
+  name: "Icon",
+  class: "i1vs651k",
+  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: true
+}), f$3 = /* @__PURE__ */ styled_default("div")({
+  name: "FeedbackContainer",
+  class: "fbhorgl",
+  propsAsIs: false
+}), m$2 = "s1g20ja7", k = /* @__PURE__ */ styled_default("div")({
+  name: "Container",
+  class: "c455ozj",
+  propsAsIs: false
+}), o = () => B1, b$2 = /* @__PURE__ */ styled_default(o())({
+  name: "IconPrediction",
+  class: "i1913njx",
+  propsAsIs: true
+}), I$3 = /* @__PURE__ */ styled_default("div")({
+  name: "FeedbackIconWrap",
+  class: "fzfk69z",
+  propsAsIs: false
+}), F = /* @__PURE__ */ styled_default("div")({
+  name: "FeedbackHeader",
+  class: "fx87qaj",
+  propsAsIs: false
+}), A$3 = /* @__PURE__ */ styled_default("span")({
+  name: "FeedbackTitle",
+  class: "fvek9ew",
+  propsAsIs: false
+}), e$1 = /* @__PURE__ */ styled_default("span")({
+  name: "FeedbackDescription",
+  class: "f1kbtp09",
+  propsAsIs: false
+}), D = /* @__PURE__ */ styled_default("div")({
+  name: "FeedbackTitleWrap",
+  class: "f4i8rro",
+  propsAsIs: false
+}), v$1 = /* @__PURE__ */ styled_default("div")({
+  name: "FeedbackResultDescriptionWrap",
+  class: "fqyssr",
+  propsAsIs: false
+}), p$2 = () => e$1, x$2 = /* @__PURE__ */ styled_default(p$2())({
+  name: "FeedbackDynamicDescription",
+  class: "fyv794i",
+  propsAsIs: true
+}), r$4 = () => e$1, u$2 = /* @__PURE__ */ styled_default(r$4())({
+  name: "FeedbackResultDescription",
+  class: "f1jkj9vx",
+  propsAsIs: true
+}), y$1 = /* @__PURE__ */ styled_default("div")({
+  name: "FeedbackText",
+  class: "f1pxh3a6",
+  propsAsIs: false
+}), W = /* @__PURE__ */ styled_default("span")({
+  name: "DynamicWrap",
+  class: "d1afvufn",
+  propsAsIs: false
+}), h$1 = /* @__PURE__ */ styled_default("div")({
+  name: "EarlyFeedbackDescription",
+  class: "eq8u24d",
+  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 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: 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 })
+        ] }),
+        !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." })
+          ] })
+        ] }),
+        !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." })
+          ] })
+        ] }),
+        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." })
+          ] })
+        ] }),
+        !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__ */ jsx(W, { children: "We’ll notify you of the result." })
+          ] })
+        ] }),
+        !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." })
+        ] }),
+        !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: ",
+                T == null ? void 0 : T.text
+              ] }),
+              /* @__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;
+};
+const t$2 = /* @__PURE__ */ styled_default("div")({
+  name: "Container",
+  class: "c1hygj0s",
+  propsAsIs: false
+}), a$3 = /* @__PURE__ */ styled_default("div")({
+  name: "Title",
+  class: "t1r84tez",
+  propsAsIs: false
+}), c$2 = /* @__PURE__ */ styled_default("div")({
+  name: "Description",
+  class: "d1aj1a7k",
+  propsAsIs: false
+}), r$3 = /* @__PURE__ */ styled_default("div")({
+  name: "AdditionalDescription",
+  class: "ax09ezs",
+  propsAsIs: false
+}), n$1 = () => B1, p$1 = /* @__PURE__ */ styled_default(n$1())({
+  name: "Icon",
+  class: "inkrac",
+  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: false
+}), e = () => c$4, I$2 = /* @__PURE__ */ styled_default(e())({
+  name: "QuestionScrollContainer",
+  class: "q1tlqx57",
+  propsAsIs: true
+}), A$2 = /* @__PURE__ */ styled_default("div")({
+  name: "TopShadow",
+  class: "t1hq58md",
+  propsAsIs: false
+}), f$2 = /* @__PURE__ */ styled_default("div")({
+  name: "BottomShadow",
+  class: "b1c8nxcx",
+  propsAsIs: false
+}), S = /* @__PURE__ */ styled_default("div")({
+  name: "SponsorLogo",
+  class: "siozuc3",
+  propsAsIs: false
+}), v = /* @__PURE__ */ styled_default("div")({
+  name: "Content",
+  class: "cpnc44r",
+  propsAsIs: false
+}), x = /* @__PURE__ */ styled_default("div")({
+  name: "Title",
+  class: "tq7p3w0",
+  propsAsIs: false
+}), C$1 = /* @__PURE__ */ styled_default("div")({
+  name: "OptionsWrap",
+  class: "o1jlfj9g",
+  propsAsIs: false
+}), u$1 = /* @__PURE__ */ styled_default("div")({
+  name: "Options",
+  class: "o84pmnd",
+  propsAsIs: false
+}), a$2 = () => f$4, w$1 = /* @__PURE__ */ styled_default(a$2())({
+  name: "AlertContainer",
+  class: "a1dybjw9",
+  propsAsIs: true
+}), y2 = /* @__PURE__ */ styled_default("div")({
+  name: "EarlyPrediction",
+  class: "e1l05ict",
+  propsAsIs: false
+}), r$2 = () => B1, h = /* @__PURE__ */ styled_default(r$2())({
+  name: "EarlyPredictionIcon",
+  class: "ez9juex",
+  propsAsIs: true
+}), p = () => B1, q = /* @__PURE__ */ styled_default(p())({
+  name: "SponsorIcon",
+  class: "s8p4aob",
+  propsAsIs: true
+});
+const r$1 = /* @__PURE__ */ styled_default("button")({
+  name: "ButtonContainer",
+  class: "b1b6dl8t",
+  propsAsIs: false
+}), l$1 = /* @__PURE__ */ styled_default("div")({
+  name: "ButtonPctWrap",
+  class: "b4iik8i",
+  propsAsIs: false
+}), I$1 = /* @__PURE__ */ styled_default("div")({
+  name: "ButtonPct",
+  class: "b1gq1lnf",
+  propsAsIs: false
+}), i = /* @__PURE__ */ styled_default("span")({
+  name: "ButtonBody",
+  class: "b1j65z51",
+  propsAsIs: false
+}), m$1 = /* @__PURE__ */ styled_default("div")({
+  name: "IconContainer",
+  class: "i19tpfua",
+  propsAsIs: false
+}), f$1 = /* @__PURE__ */ styled_default("div")({
+  name: "IconWrap",
+  class: "i1tubmma",
+  propsAsIs: false
+}), n = /* @__PURE__ */ styled_default("img")({
+  name: "Icon",
+  class: "i1grrgwj",
+  propsAsIs: false
+}), t$1 = () => n, u = /* @__PURE__ */ styled_default(t$1())({
+  name: "IconDefault",
+  class: "ibemyq8",
+  propsAsIs: true
+}), a$1 = () => n, A$1 = /* @__PURE__ */ styled_default(a$1())({
+  name: "IconCircle",
+  class: "i1dceht",
+  propsAsIs: true
+}), d = /* @__PURE__ */ styled_default("span")({
+  name: "Title",
+  class: "t116q4vq",
+  propsAsIs: false
+}), B = /* @__PURE__ */ styled_default("span")({
+  name: "Indicators",
+  class: "i17ajcu2",
+  propsAsIs: false
+}), P = /* @__PURE__ */ styled_default("div")({
+  name: "PtsWrap",
+  class: "pu9kmlb",
+  propsAsIs: false
+}), b$1 = /* @__PURE__ */ styled_default("span")({
+  name: "Pts",
+  class: "p1j2j0s0",
+  propsAsIs: false
+}), g = /* @__PURE__ */ styled_default("span")({
+  name: "Percentage",
+  class: "p1mzj1sj",
+  propsAsIs: false
+}), c$1 = () => B1, C = /* @__PURE__ */ styled_default(c$1())({
+  name: "CheckIcon",
+  class: "cichgz8",
+  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 (t2 === QuestionType.PREDICTION) {
+    if (!a2 && r2)
+      return i2 ? "voted" : "unset";
+    if (a2 && r2)
+      return i2 ? n2 ? "correct" : "incorrect" : "unset";
+    if (i2)
+      return "correct";
+  }
+  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: a2,
+    icon: n2,
+    text: i$12,
+    percentageDecimal: r2,
+    points: w2,
+    // extra props
+    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);
+    });
+  }, [r2]), /* @__PURE__ */ jsxs(
+    at,
+    {
+      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: (y3) => {
+        g$1(
+          d$12 === QuestionType.PREDICTION ? f2 : p2 === QuestionStatus.RESOLVED
+        ), D2(y3);
+      },
+      "data-is-ad": m2,
+      children: [
+        /* @__PURE__ */ jsx(l$1, { children: /* @__PURE__ */ jsx(
+          I$1,
+          {
+            "data-answer-state": I2,
+            "data-is-not-checked": T,
+            style: { width: `${S2 ? F2 : 0}%` },
+            onTransitionEnd: () => {
+              h2 || l2 == null || l2();
+            },
+            "data-is-ad": m2
+          }
+        ) }),
+        /* @__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" })
+          ] }),
+          S2 && /* @__PURE__ */ jsxs(B, { children: [
+            Q && /* @__PURE__ */ jsx(C, { name: b2 ? "selectedBetPack" : "selected" }),
+            /* @__PURE__ */ jsx(g, { children: /* @__PURE__ */ jsx(d$6, { value: r2, suffix: "%" }) })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+const t = () => v$2, c = /* @__PURE__ */ styled_default(t())({
+  name: "ShowInContainer",
+  class: "sie6cqo",
+  propsAsIs: true
+}), r = /* @__PURE__ */ styled_default("div")({
+  name: "WinBarContainer",
+  class: "wgizw4u",
+  propsAsIs: false
+}), l = /* @__PURE__ */ styled_default("div")({
+  name: "Content",
+  class: "c1l3ucjp",
+  propsAsIs: false
+}), m = /* @__PURE__ */ styled_default("div")({
+  name: "Title",
+  class: "tx7j799",
+  propsAsIs: false
+}), a = () => B1, I = /* @__PURE__ */ styled_default(a())({
+  name: "WinIcon",
+  class: "w4lwuj0",
+  propsAsIs: true
+}), f = /* @__PURE__ */ styled_default("div")({
+  name: "Points",
+  class: "po9i64o",
+  propsAsIs: false
+}), w = /* @__PURE__ */ styled_default("span")({
+  name: "PointsCount",
+  class: "pe5g05h",
+  propsAsIs: false
+}), A = /* @__PURE__ */ styled_default("span")({
+  name: "PointsUnits",
+  class: "p1hdtpmb",
+  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: r$12 === QuestionType.PREDICTION && l$12,
+    animate: h2,
+    children: /* @__PURE__ */ jsxs(
+      r,
+      {
+        style: {
+          justifyContent: r$12 === QuestionType.PREDICTION ? "center" : "space-between"
+        },
+        children: [
+          /* @__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" })
+              ] })
+            ] })
+          ] }),
+          m$12 && r$12 !== QuestionType.PREDICTION && /* @__PURE__ */ jsx(L, { isPlaying: a2, onTimerExpired: C2, duration: d2 })
+        ]
+      }
+    )
+  }
+);
+const Ft = (e2, T) => {
+  switch (e2) {
+    case "already_voted":
+      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";
+  }
+}, 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 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 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);
+  }, [A2]), Z = useCallback(
+    async (s) => {
+      if (!L2.current && (L2.current = true, O2)) {
+        const l2 = s.currentTarget.value;
+        P2(l2);
+        try {
+          await j(O2, l2), g2 && X();
+        } catch (C2) {
+          mt$1(Ft(C2.message, r2)), P2(""), console.error("Error while voting", C2), L2.current = false;
+        }
+      }
+    },
+    [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]
+  );
+  useEffect(() => {
+    t2 && V && !dt && (U.current = setTimeout(Ct, 1e4), Tt(true));
+  }, [t2]), useEffect(() => () => {
+    clearTimeout(U.current), clearTimeout(S$22.current);
+  }, []);
+  const b$12 = useMemo(() => e2 ? e2.answers.map((s) => {
+    var l2;
+    return {
+      ...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
+    };
+  }) : [], [
+    c2,
+    d2,
+    T,
+    e2,
+    t2,
+    v$12,
+    Z,
+    z
+  ]);
+  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.` : 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: s(),
+        description: l2(),
+        ...t2 != null && t2.correct || r2 === QuestionType.POLL || r2 === QuestionType.PREDICTION ? { icon: "icon-correct" } : {},
+        ...r2 === QuestionType.TRIVIA || r2 === QuestionType.PREDICTION ? { additionalDescription: C2() } : {}
+      }
+    ) }) : !a2 && (d2 || k2) ? /* @__PURE__ */ jsx(w$1, { children: /* @__PURE__ */ jsx(
+      d$2,
+      {
+        icon: "icon-check-circle",
+        title: "More to come...",
+        description: k2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          "Stay tuned for more questions ",
+          /* @__PURE__ */ jsx("br", {}),
+          " and insights."
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          "Watch for additional enhanced stream ",
+          /* @__PURE__ */ jsx("br", {}),
+          " interactive experience."
+        ] })
+      }
+    ) }) : null;
+  };
+  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: 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
+        }
+      ),
+      Y && /* @__PURE__ */ jsx(
+        b,
+        {
+          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
+        }
+      ),
+      pt ? Ot() : /* @__PURE__ */ jsxs(Fragment, { children: [
+        a2 && /* @__PURE__ */ jsxs(y2, { children: [
+          /* @__PURE__ */ jsx(h, { name: "iconEarlyPrediction" }),
+          "EARLY PREDICTION"
+        ] }),
+        /* @__PURE__ */ jsx(x, { style: vt ? { marginTop: 0 } : {}, children: H }),
+        a2 && /* @__PURE__ */ jsx(
+          ii,
+          {
+            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__ */ 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,
+            {
+              ...s,
+              firstOption: l2 === 0,
+              markThatVoted: It,
+              onPercentsAnimated: () => G(true),
+              votedAfterQuestionClosed: x$22,
+              enteredAnActiveQuestion: y$12,
+              marketClosed: I2,
+              isEarlyPrediction: a2,
+              isAd: g2,
+              webos: ct
+            },
+            s.id
+          )) }),
+          a2 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(f$2, {}),
+            /* @__PURE__ */ jsx(S, { children: /* @__PURE__ */ jsx(q, { name: "mastersLogoWhite" }) })
+          ] })
+        ] })
+      ] })
+    ] }) })
+  ] });
+};
+export {
+  C$2 as C,
+  S$2 as S,
+  S$1 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
+};