@streamlayer/react-ui 1.17.0 → 1.18.1

package/lib/ui/gamification/vote/feedback/index.d.ts

@@ -1,4 +1,4 @@
-import { QuestionType } from '@streamlayer/sdk-web-types';
+import { ExtendedQuestionAnswer, QuestionType } from '@streamlayer/sdk-web-types';
 interface FeedbackProps {
     feedbackMessages?: Partial<Record<'correctFeedback' | 'incorrectFeedback', {
         description: string;
@@ -16,6 +16,8 @@ interface FeedbackProps {
     voteErrorMessage: string;
     marketClosed: boolean;
     percentsAnimated: boolean;
+    isEarlyPrediction?: boolean;
+    correctAnswer?: ExtendedQuestionAnswer;
 }
 export declare const Feedback: React.FC<FeedbackProps>;
 export {};

package/lib/ui/gamification/vote/feedback/index.js

@@ -1,69 +1,71 @@
-import { jsx as i, jsxs as n } from "react/jsx-runtime";
-import { QuestionType as d } from "@streamlayer/sdk-web-types";
-import { SvgIcon as h } from "../../../icons/index.js";
-import { ShowInContainer as j, Container as E, FeedbackContainer as r, IconPrediction as C, FeedbackDescription as l, FeedbackIconWrap as a, FeedbackHeader as F, FeedbackText as P, DynamicWrap as L, FeedbackTitle as Y } from "./styles.js";
-const J = ({
-  feedbackMessages: t,
-  questionVotedCorrectly: u,
-  questionVoted: m,
-  questionType: e,
-  hasCorrectAnswer: b,
-  showExpiredNotification: w,
-  showClosedNotificationTrivia: x,
-  votedInCurrentRender: p,
-  votedAfterQuestionClosed: S,
+import { jsx as n, jsxs as i } from "react/jsx-runtime";
+import { QuestionType as l } from "@streamlayer/sdk-web-types";
+import { SvgIcon as m } from "../../../icons/index.js";
+import { ShowInContainer as y, Container as H, FeedbackContainer as t, IconPrediction as W, FeedbackDescription as h, FeedbackIconWrap as p, FeedbackHeader as k, FeedbackText as f, EarlyFeedbackDescription as $, DynamicWrap as z, FeedbackTitle as B } from "./styles.js";
+const Z = ({
+  feedbackMessages: o,
+  questionVotedCorrectly: D,
+  questionVoted: F,
+  questionType: d,
+  hasCorrectAnswer: r,
+  showExpiredNotification: T,
+  showClosedNotificationTrivia: O,
+  votedInCurrentRender: b,
+  votedAfterQuestionClosed: j,
   voteErrorMessage: c,
-  enteredAnActiveQuestion: D,
-  marketClosed: W,
-  percentsAnimated: Q
+  enteredAnActiveQuestion: P,
+  marketClosed: L,
+  percentsAnimated: Y,
+  isEarlyPrediction: e,
+  correctAnswer: u
 }) => {
-  const y = m && (e === d.TRIVIA || e === d.PREDICTION), O = e === d.PREDICTION && !b, k = W && e === d.PREDICTION && !m && !D || e === d.PREDICTION && S && p && D, T = y && O, N = y && b, R = e === d.PREDICTION && m && p && b, f = m && e === d.POLL && p, I = u ? "correct" : "incorrect", o = u ? t == null ? void 0 : t.correctFeedback : t == null ? void 0 : t.incorrectFeedback;
-  return w || x || T || N || k || f || R || c ? /* @__PURE__ */ i(j, { enabled: p, animate: Q, children: /* @__PURE__ */ n(E, { "data-prediction": O, children: [
-    c && !k && /* @__PURE__ */ n(r, { children: [
-      /* @__PURE__ */ i(C, { name: "questionExpired" }),
-      /* @__PURE__ */ i(l, { children: c })
+  const C = F && (d === l.TRIVIA || d === l.PREDICTION), N = d === l.PREDICTION && !r, I = L && d === l.PREDICTION && !F && !P || d === l.PREDICTION && j && b && P, R = C && N, w = C && r, Q = d === l.PREDICTION && F && b && r, S = F && d === l.POLL && b, x = D ? "correct" : "incorrect", a = D ? o == null ? void 0 : o.correctFeedback : o == null ? void 0 : o.incorrectFeedback;
+  return T || O || R || w || I || S || Q || c ? /* @__PURE__ */ n(y, { enabled: b, animate: Y, children: /* @__PURE__ */ i(H, { "data-prediction": N, id: "feedbackContainer", children: [
+    c && !I && /* @__PURE__ */ i(t, { children: [
+      !e && /* @__PURE__ */ n(W, { name: "questionExpired" }),
+      /* @__PURE__ */ n(h, { children: c })
     ] }),
-    !c && w && /* @__PURE__ */ n(r, { children: [
-      /* @__PURE__ */ i(a, { children: /* @__PURE__ */ i(h, { name: "questionExpired" }) }),
-      /* @__PURE__ */ n("div", { children: [
-        /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(l, { children: "Question Expired" }) }),
-        /* @__PURE__ */ i(P, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
+    !c && T && /* @__PURE__ */ i(t, { children: [
+      !e && /* @__PURE__ */ n(p, { children: /* @__PURE__ */ n(m, { name: "questionExpired" }) }),
+      /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(h, { children: "Question Expired" }) }),
+        /* @__PURE__ */ n(f, { children: "You can still answer to see if you're correct, but no points are awarded for expired questions." })
       ] })
     ] }),
-    !c && x && /* @__PURE__ */ n(r, { children: [
-      /* @__PURE__ */ i(a, { children: /* @__PURE__ */ i(h, { name: "questionExpired" }) }),
-      /* @__PURE__ */ n("div", { children: [
-        /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(l, { children: "Question Closed" }) }),
-        /* @__PURE__ */ i(P, { children: "This question was answered after the moderator closed the question. So the points for this answer won’t tally." })
+    !c && O && /* @__PURE__ */ i(t, { children: [
+      /* @__PURE__ */ n(p, { children: /* @__PURE__ */ n(m, { name: "questionExpired" }) }),
+      /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(h, { children: "Question Closed" }) }),
+        /* @__PURE__ */ n(f, { children: "This question was answered after the moderator closed the question. So the points for this answer won’t tally." })
       ] })
     ] }),
-    k && /* @__PURE__ */ n(r, { children: [
-      /* @__PURE__ */ i(a, { children: /* @__PURE__ */ i(h, { name: "questionExpired" }) }),
-      /* @__PURE__ */ n("div", { children: [
-        /* @__PURE__ */ i(F, { children: /* @__PURE__ */ i(l, { children: "Question Closed" }) }),
-        /* @__PURE__ */ i(P, { children: "This event has already taken place, so the ability to make a prediction on its outcome is no longer available." })
+    I && /* @__PURE__ */ i(t, { children: [
+      !e && /* @__PURE__ */ n(p, { children: /* @__PURE__ */ n(m, { name: "questionExpired" }) }),
+      /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(h, { children: e ? r ? "The results are already in!" : "Question is Closed" : "Question Closed" }) }),
+        /* @__PURE__ */ n(f, { id: "feedbackText", children: e ? /* @__PURE__ */ n($, { children: r ? `Correct: ${u == null ? void 0 : u.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." })
       ] })
     ] }),
-    !c && T && /* @__PURE__ */ n(r, { children: [
-      /* @__PURE__ */ i(C, { name: "icon-prediction" }),
-      /* @__PURE__ */ n(l, { children: [
+    !c && R && /* @__PURE__ */ i(t, { children: [
+      !e && /* @__PURE__ */ n(W, { name: "icon-prediction" }),
+      /* @__PURE__ */ i(h, { children: [
         "Your pick has been recorded. ",
-        /* @__PURE__ */ i(L, { children: "We’ll notify you of the result." })
+        /* @__PURE__ */ n(z, { children: "We’ll notify you of the result." })
       ] })
     ] }),
-    !c && f && /* @__PURE__ */ n(r, { children: [
-      /* @__PURE__ */ i(a, { "data-feedback-type": "correct", children: /* @__PURE__ */ i(h, { name: "correct" }) }),
-      /* @__PURE__ */ i(l, { children: "Thanks for answering. Please stay tuned for the next question." })
+    !c && S && /* @__PURE__ */ i(t, { children: [
+      !e && /* @__PURE__ */ n(p, { "data-feedback-type": "correct", children: /* @__PURE__ */ n(m, { name: "correct" }) }),
+      /* @__PURE__ */ n(h, { children: "Thanks for answering. Please stay tuned for the next question." })
     ] }),
-    !c && (N || R) && /* @__PURE__ */ n(r, { children: [
-      /* @__PURE__ */ i(a, { "data-feedback-type": I, children: /* @__PURE__ */ i(h, { name: I }) }),
-      /* @__PURE__ */ i("div", { children: /* @__PURE__ */ n(F, { children: [
-        /* @__PURE__ */ i(Y, { "data-feedback-type": I, children: o == null ? void 0 : o.title }),
-        /* @__PURE__ */ i(l, { children: o == null ? void 0 : o.description })
+    !c && (w || Q) && /* @__PURE__ */ i(t, { children: [
+      !e && /* @__PURE__ */ n(p, { "data-feedback-type": x, children: /* @__PURE__ */ n(m, { name: x }) }),
+      /* @__PURE__ */ n("div", { children: /* @__PURE__ */ i(k, { children: [
+        /* @__PURE__ */ n(B, { "data-feedback-type": x, children: a == null ? void 0 : a.title }),
+        /* @__PURE__ */ n(h, { children: a == null ? void 0 : a.description })
       ] }) })
     ] })
   ] }) }) : null;
 };
 export {
-  J as Feedback
+  Z as Feedback
 };

package/lib/ui/gamification/vote/feedback/styles.d.ts

@@ -8,3 +8,4 @@ export declare const FeedbackTitle: import('@linaria/react').StyledComponent<imp
 export declare const FeedbackDescription: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const FeedbackText: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const DynamicWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const EarlyFeedbackDescription: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/gamification/vote/feedback/styles.js

@@ -41,10 +41,15 @@ const n = () => a, t = /* @__PURE__ */ s(n())({
   name: "DynamicWrap",
   class: "d4i8rro",
   propsAsIs: !1
+}), A = /* @__PURE__ */ s("div")({
+  name: "EarlyFeedbackDescription",
+  class: "eqyssr",
+  propsAsIs: !1
 });
 export {
   d as Container,
   F as DynamicWrap,
+  A as EarlyFeedbackDescription,
   i as FeedbackContainer,
   b as FeedbackDescription,
   f as FeedbackHeader,

package/lib/ui/gamification/vote/index.d.ts

@@ -4,6 +4,7 @@ interface VoteProps {
     isLoading: boolean;
     vote: (questionId: string, answerId: string) => void;
     close: () => void;
+    isEarlyPrediction?: boolean;
 }
 export declare const VoteSkeleton: React.FC;
 export declare const Vote: React.FC<VoteProps>;

package/lib/ui/gamification/vote/index.js

@@ -1,167 +1,191 @@
-import { jsx as s, jsxs as y, Fragment as D } from "react/jsx-runtime";
-import { useHideTransition as ht } from "../../../hooks/showIn.js";
-import { useRef as J, useState as c, useEffect as g, useCallback as w, useMemo as u } from "react";
-import { QuestionType as a, QuestionStatus as k } from "@streamlayer/sdk-web-types";
-import { Skeleton as N } from "../../skeleton/index.js";
-import { Alert as Tt } from "./alert/index.js";
-import { Feedback as gt } from "./feedback/index.js";
-import { Container as K, Content as U, Options as X, QuestionScrollContainer as yt, AlertContainer as It, Title as Vt } from "./styles.js";
-import { VotingOption as Ct } from "./vote-option/index.js";
-import { WinBar as Et } from "./win-bar/index.js";
-const vt = (t, l) => {
-  switch (t) {
+import { jsx as n, jsxs as h, Fragment as N } from "react/jsx-runtime";
+import { useHideTransition as gt } from "../../../hooks/showIn.js";
+import { useRef as U, useState as c, useEffect as y, useCallback as O, useMemo as g } from "react";
+import { QuestionType as a, QuestionStatus as b } from "@streamlayer/sdk-web-types";
+import { Skeleton as L } from "../../skeleton/index.js";
+import { Alert as It } from "./alert/index.js";
+import { Feedback as X } from "./feedback/index.js";
+import { Container as Z, Content as $, Options as Q, QuestionScrollContainer as Ct, AlertContainer as Vt, EarlyPrediction as yt, EarlyPredictionIcon as vt, Title as pt, OptionsWrap as Et, SponsorLogo as At, SponsorIcon as wt } from "./styles.js";
+import { VotingOption as Rt } from "./vote-option/index.js";
+import { WinBar as Ot } from "./win-bar/index.js";
+const xt = (e, m) => {
+  switch (e) {
     case "already_voted":
-      return l === a.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 m === a.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";
   }
-}, kt = () => /* @__PURE__ */ s(K, { children: /* @__PURE__ */ y(U, { children: [
-  /* @__PURE__ */ s(N, { loading: !0, style: { height: "40px", borderRadius: "100px" } }),
-  /* @__PURE__ */ s(N, { loading: !0, style: { height: "24px", margin: "16px 0" } }),
-  /* @__PURE__ */ s(X, { children: Array.from({ length: 5 }).map((t, l) => /* @__PURE__ */ s(N, { loading: !0, style: { height: "44px" } }, l)) })
-] }) }), Nt = ({ openedQuestion: t, isLoading: l, vote: b, close: M }) => {
-  var z, G;
-  const Z = t.subject, r = t.type, h = t.status, I = (z = t.options) == null ? void 0 : z.options, T = t.marketClosed, A = t.id, L = J(), [V, $] = c(!1), [R, Q] = c(!1), [C, B] = c(!0), [f, tt] = c(!1), [W, et] = c(!1), [Y, p] = c(""), [x, rt] = c(""), [O, j] = c(!1), [it, nt] = c(!1), { runAnimation: E, finished: H } = ht();
-  g(() => {
-    H && M();
-  }, [M, H]), g(() => {
-    r === a.PREDICTION ? T && B(!1) : h === k.RESOLVED && B(!1);
+}, Yt = () => /* @__PURE__ */ n(Z, { children: /* @__PURE__ */ h($, { children: [
+  /* @__PURE__ */ n(L, { loading: !0, style: { height: "40px", borderRadius: "100px" } }),
+  /* @__PURE__ */ n(L, { loading: !0, style: { height: "24px", margin: "16px 0" } }),
+  /* @__PURE__ */ n(Q, { children: Array.from({ length: 5 }).map((e, m) => /* @__PURE__ */ n(L, { loading: !0, style: { height: "44px" } }, m)) })
+] }) }), Bt = ({ openedQuestion: e, isLoading: m, vote: M, close: W, isEarlyPrediction: l }) => {
+  var J, K;
+  const tt = e.subject, r = e.type, I = e.status, v = (J = e.options) == null ? void 0 : J.options, T = e.marketClosed, x = e.id, Y = U(), [C, et] = c(!1), [p, rt] = c(!1), [V, B] = c(!0), [f, nt] = c(!1), [j, it] = c(!1), [H, S] = c(""), [E, ot] = c(""), [A, F] = c(!1), [st, at] = c(!1), { runAnimation: w, finished: _ } = gt();
+  y(() => {
+    _ && W();
+  }, [W, _]), y(() => {
+    r === a.PREDICTION ? T && B(!1) : I === b.RESOLVED && B(!1);
   }, []);
-  const st = w((n) => {
-    Q(n), $(!0);
-  }, []), P = J(!1), F = w(
-    async (n) => {
-      if (!P.current && (P.current = !0, A)) {
-        const m = n.currentTarget.value;
-        p(m);
+  const ct = O((o) => {
+    rt(o), et(!0);
+  }, []), q = U(!1), z = O(
+    async (o) => {
+      if (!q.current && (q.current = !0, x)) {
+        const d = o.currentTarget.value;
+        S(d);
         try {
-          await b(A, m);
-        } catch (v) {
-          rt(vt(v.message, r)), p(""), console.error("Error while voting", v), P.current = !1;
+          await M(x, d);
+        } catch (R) {
+          ot(xt(R.message, r)), S(""), console.error("Error while voting", R), q.current = !1;
         }
       }
     },
-    [r, A, p, b]
-  ), ot = w(() => {
-    tt(!0), E({ delay: 3500 });
-  }, [E]), at = w(() => {
-    et(!0), E({ delay: 3500 });
-  }, [E]), e = u(
-    () => t == null ? void 0 : t.answers.find((n) => n.youVoted === !0),
-    [t]
-  ), o = u(
-    () => !!(t != null && t.answers.find((n) => n.correct === !0)),
-    [t]
-  ), i = u(
-    () => t == null ? void 0 : t.answers.find((n) => n.correct === !0),
-    [t]
+    [r, x, S, M]
+  ), lt = O(() => {
+    nt(!0), w({ delay: 3500 });
+  }, [w]), mt = O(() => {
+    it(!0), w({ delay: 3500 });
+  }, [w]), t = e == null ? void 0 : e.answers.find((o) => o.youVoted === !0), s = g(
+    () => !!(e != null && e.answers.find((o) => o.correct === !0)),
+    [e]
+  ), i = g(
+    () => e == null ? void 0 : e.answers.find((o) => o.correct === !0),
+    [e]
   );
-  g(() => {
-    e && V && !it && (L.current = setTimeout(at, 1e4), nt(!0));
-  }, [e]), g(() => () => {
-    clearTimeout(L.current);
+  y(() => {
+    t && C && !st && (Y.current = setTimeout(mt, 1e4), at(!0));
+  }, [t]), y(() => () => {
+    clearTimeout(Y.current);
   }, []);
-  const S = u(() => t ? t.answers.map((n) => {
-    var m;
+  const D = g(() => e ? e.answers.map((o) => {
+    var d;
     return {
-      ...n,
-      questionVoted: !!e,
-      youSelected: Y === n.id,
-      isLoading: l,
-      hasCorrectAnswer: o,
-      questionType: t.type,
+      ...o,
+      questionVoted: !!t,
+      youSelected: H === o.id,
+      isLoading: m,
+      hasCorrectAnswer: s,
+      questionType: e.type,
       answerTimeExpired: f,
-      questionStatus: h,
-      imageMode: (m = t.appearance) == null ? void 0 : m.images,
-      onVote: F
+      questionStatus: I,
+      imageMode: (d = e.appearance) == null ? void 0 : d.images,
+      onVote: z
     };
   }) : [], [
-    o,
+    s,
     f,
-    l,
-    t,
+    m,
     e,
-    h,
-    F,
-    Y
+    t,
+    I,
+    z,
+    H
   ]);
-  g(() => {
-    const n = S.some(({ percentageDecimal: v }) => v !== 0), m = e && r === a.PREDICTION;
-    x && (!n || T && m) && j(!0);
-  }, [S, x, T, r, e]);
-  const ct = I && (I.case === "trivia" || I.case === "prediction") ? I.value : void 0, d = h === k.RESOLVED && r === a.TRIVIA && !e && !C, _ = r === a.TRIVIA && R, q = u(() => r === a.PREDICTION ? !!(e && !o || e && o && (i != null && i.youVoted)) : !0, [r, e, o, i]), lt = u(() => {
-    if (r === a.PREDICTION && e && (!o || o && (i != null && i.youVoted)))
-      return e.points;
-    if (!(d || f))
-      return e ? e.correct ? e.pointsEarned : 0 : i == null ? void 0 : i.points;
-  }, [f, e, i, d, r, o]), ft = u(() => r === a.PREDICTION && e ? o ? o && (i != null && i.youVoted) ? "You won" : "" : "To win" : d || f ? "Time expired" : r === a.POLL ? "Time remaining" : e ? "You won" : "To win", [f, r, e, d, o, i]), mt = !q || q && r === a.PREDICTION && V && !O, ut = (r === a.TRIVIA || r === a.PREDICTION) && e && o && (i == null ? void 0 : i.youVoted), dt = e || d || _ || r === a.TRIVIA && h === k.RESOLVED && C;
-  return /* @__PURE__ */ s(yt, { children: /* @__PURE__ */ s(K, { children: /* @__PURE__ */ y(U, { children: [
-    /* @__PURE__ */ s(
-      gt,
+  y(() => {
+    const o = D.some(({ percentageDecimal: R }) => R !== 0), d = t && r === a.PREDICTION;
+    E && (!o || T && d) && F(!0);
+  }, [D, E, T, r, t]);
+  const G = v && (v.case === "trivia" || v.case === "prediction") ? v.value : void 0, u = I === b.RESOLVED && r === a.TRIVIA && !t && !V, P = r === a.TRIVIA && p, k = g(() => r === a.PREDICTION ? l ? !1 : !!(t && !s || t && s && (i != null && i.youVoted)) : !0, [r, t, s, i, l]), ft = g(() => {
+    if (r === a.PREDICTION && t && (!s || s && (i != null && i.youVoted)))
+      return t.points;
+    if (!(u || f))
+      return t ? t.correct ? t.pointsEarned : 0 : i == null ? void 0 : i.points;
+  }, [f, t, i, u, r, s]), ut = g(() => r === a.PREDICTION && t ? s ? s && (i != null && i.youVoted) ? "You won" : "" : "To win" : u || f ? "Time expired" : r === a.POLL ? "Time remaining" : t ? "You won" : "To win", [f, r, t, u, s, i]), dt = !k || k && r === a.PREDICTION && C && !A, ht = (r === a.TRIVIA || r === a.PREDICTION) && t && s && (i == null ? void 0 : i.youVoted), Tt = t || u || P || r === a.TRIVIA && I === b.RESOLVED && V;
+  return /* @__PURE__ */ n(Ct, { children: /* @__PURE__ */ n(Z, { children: /* @__PURE__ */ h($, { children: [
+    !l && /* @__PURE__ */ n(
+      X,
       {
-        feedbackMessages: ct,
-        questionVoted: !!e,
-        questionVotedCorrectly: e == null ? void 0 : e.correct,
+        feedbackMessages: G,
+        questionVoted: !!t,
+        questionVotedCorrectly: t == null ? void 0 : t.correct,
         questionType: r,
-        hasCorrectAnswer: o,
-        showExpiredNotification: d,
-        showClosedNotificationTrivia: _,
-        votedInCurrentRender: V,
-        votedAfterQuestionClosed: R,
-        enteredAnActiveQuestion: C,
+        hasCorrectAnswer: s,
+        showExpiredNotification: u,
+        showClosedNotificationTrivia: P,
+        votedInCurrentRender: C,
+        votedAfterQuestionClosed: p,
+        enteredAnActiveQuestion: V,
         marketClosed: T,
-        percentsAnimated: O,
-        voteErrorMessage: x
+        percentsAnimated: A,
+        voteErrorMessage: E
       }
     ),
-    q && /* @__PURE__ */ s(
-      Et,
+    k && /* @__PURE__ */ n(
+      Ot,
       {
-        title: ft,
-        points: lt,
-        onTimerExpired: ot,
-        questionType: t.type,
-        isTimer: !l,
-        isPlayingTimer: !e,
-        animatePoints: ut,
-        timerDuration: dt ? 0 : Number(((G = t == null ? void 0 : t.appearance) == null ? void 0 : G.autoHideInterval) || "30"),
-        votedInCurrentRender: V,
-        percentsAnimated: O
+        title: ut,
+        points: ft,
+        onTimerExpired: lt,
+        questionType: e.type,
+        isTimer: !m,
+        isPlayingTimer: !t,
+        animatePoints: ht,
+        timerDuration: Tt ? 0 : Number(((K = e == null ? void 0 : e.appearance) == null ? void 0 : K.autoHideInterval) || "30"),
+        votedInCurrentRender: C,
+        percentsAnimated: A
       }
     ),
-    f || W ? /* @__PURE__ */ s(It, { children: /* @__PURE__ */ s(
-      Tt,
+    !l && (f || j) ? /* @__PURE__ */ n(Vt, { children: /* @__PURE__ */ n(
+      It,
       {
         icon: "icon-check-circle",
         title: "More to come...",
-        description: W ? /* @__PURE__ */ y(D, { children: [
+        description: j ? /* @__PURE__ */ h(N, { children: [
           "Stay tuned for more questions ",
-          /* @__PURE__ */ s("br", {}),
+          /* @__PURE__ */ n("br", {}),
           " and insights."
-        ] }) : /* @__PURE__ */ y(D, { children: [
+        ] }) : /* @__PURE__ */ h(N, { children: [
           "Watch for additional enhanced stream ",
-          /* @__PURE__ */ s("br", {}),
+          /* @__PURE__ */ n("br", {}),
           " interactive experience."
         ] })
       }
-    ) }) : /* @__PURE__ */ y(D, { children: [
-      /* @__PURE__ */ s(Vt, { style: mt ? { marginTop: 0 } : {}, children: Z }),
-      /* @__PURE__ */ s(X, { children: S.map((n) => /* @__PURE__ */ s(
-        Ct,
+    ) }) : /* @__PURE__ */ h(N, { children: [
+      l && /* @__PURE__ */ h(yt, { children: [
+        /* @__PURE__ */ n(vt, { name: "iconEarlyPrediction" }),
+        "EARLY PREDICTION"
+      ] }),
+      /* @__PURE__ */ n(pt, { style: dt ? { marginTop: 0 } : {}, id: "voteTitle", children: tt }),
+      l && /* @__PURE__ */ n(
+        X,
         {
-          ...n,
-          markThatVoted: st,
-          onPercentsAnimated: () => j(!0),
-          votedAfterQuestionClosed: R,
-          enteredAnActiveQuestion: C,
-          marketClosed: T
-        },
-        n.id
-      )) })
+          feedbackMessages: G,
+          questionVoted: !!t,
+          questionVotedCorrectly: t == null ? void 0 : t.correct,
+          questionType: r,
+          hasCorrectAnswer: s,
+          showExpiredNotification: u,
+          showClosedNotificationTrivia: P,
+          votedInCurrentRender: C,
+          votedAfterQuestionClosed: p,
+          enteredAnActiveQuestion: V,
+          marketClosed: T,
+          percentsAnimated: A,
+          voteErrorMessage: E,
+          isEarlyPrediction: l,
+          correctAnswer: i
+        }
+      ),
+      /* @__PURE__ */ h(Et, { children: [
+        /* @__PURE__ */ n(Q, { id: "voteOptions", children: D.map((o) => /* @__PURE__ */ n(
+          Rt,
+          {
+            ...o,
+            markThatVoted: ct,
+            onPercentsAnimated: () => F(!0),
+            votedAfterQuestionClosed: p,
+            enteredAnActiveQuestion: V,
+            marketClosed: T
+          },
+          o.id
+        )) }),
+        l && /* @__PURE__ */ n(At, { children: /* @__PURE__ */ n(wt, { name: "mastersLogoWhite" }) })
+      ] })
     ] })
   ] }) }) });
 };
 export {
-  Nt as Vote,
-  kt as VoteSkeleton
+  Bt as Vote,
+  Yt as VoteSkeleton
 };

package/lib/ui/gamification/vote/styles.d.ts

@@ -2,5 +2,10 @@ export declare const Container: import('@linaria/react').StyledComponent<import(
 export declare const QuestionScrollContainer: any;
 export declare const Content: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Title: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const OptionsWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Options: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const AlertContainer: any;
+export declare const EarlyPrediction: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const EarlyPredictionIcon: any;
+export declare const SponsorIcon: any;
+export declare const SponsorLogo: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/gamification/vote/styles.js

@@ -1,36 +1,62 @@
 import { styled as s } from "@linaria/react";
-import { SDKScrollContainer as o } from "../../../app/app/styles.js";
-import { ShowIn as n } from "../../show-in/index.js";
-const l = /* @__PURE__ */ s("div")({
+import { SDKScrollContainer as n } from "../../../app/app/styles.js";
+import { SvgIcon as o } from "../../icons/index.js";
+import { ShowIn as t } from "../../show-in/index.js";
+const I = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c14ielyq",
   propsAsIs: !1
-}), t = () => o, i = /* @__PURE__ */ s(t())({
+}), r = () => n, d = /* @__PURE__ */ s(r())({
   name: "QuestionScrollContainer",
   class: "q1tlqx57",
   propsAsIs: !0
-}), p = /* @__PURE__ */ s("div")({
+}), A = /* @__PURE__ */ s("div")({
   name: "Content",
   class: "c1hq58md",
   propsAsIs: !1
-}), m = /* @__PURE__ */ s("div")({
+}), f = /* @__PURE__ */ s("div")({
   name: "Title",
   class: "t1c8nxcx",
   propsAsIs: !1
+}), S = /* @__PURE__ */ s("div")({
+  name: "OptionsWrap",
+  class: "oiozuc3",
+  propsAsIs: !1
 }), C = /* @__PURE__ */ s("div")({
   name: "Options",
-  class: "oiozuc3",
+  class: "opnc44r",
   propsAsIs: !1
-}), e = () => n, A = /* @__PURE__ */ s(e())({
+}), e = () => t, v = /* @__PURE__ */ s(e())({
   name: "AlertContainer",
-  class: "apnc44r",
+  class: "aq7p3w0",
   propsAsIs: !0
+}), x = /* @__PURE__ */ s("div")({
+  name: "EarlyPrediction",
+  class: "e1jlfj9g",
+  propsAsIs: !1
+}), c = () => o, u = /* @__PURE__ */ s(c())({
+  name: "EarlyPredictionIcon",
+  class: "e84pmnd",
+  propsAsIs: !0
+}), p = () => o, y = /* @__PURE__ */ s(p())({
+  name: "SponsorIcon",
+  class: "s1dybjw9",
+  propsAsIs: !0
+}), q = /* @__PURE__ */ s("div")({
+  name: "SponsorLogo",
+  class: "s1l05ict",
+  propsAsIs: !1
 });
 export {
-  A as AlertContainer,
-  l as Container,
-  p as Content,
+  v as AlertContainer,
+  I as Container,
+  A as Content,
+  x as EarlyPrediction,
+  u as EarlyPredictionIcon,
   C as Options,
-  i as QuestionScrollContainer,
-  m as Title
+  S as OptionsWrap,
+  d as QuestionScrollContainer,
+  y as SponsorIcon,
+  q as SponsorLogo,
+  f as Title
 };