@streamlayer/react-ui 1.26.0 → 1.27.0

package/lib/ui/gamification/question/notification/styles.d.ts

@@ -1,8 +1,20 @@
 export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const CloseIconWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const CloseIcon: any;
+export declare const CloseIcon: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../../icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;
 export declare const Header: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const TypeIcon: any;
+export declare const TypeIcon: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../../icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;
 export declare const TypeName: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const Question: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const AnswerButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;

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

@@ -2,9 +2,27 @@ export declare const QuestionItem: import('@linaria/react').StyledComponent<impo
 export declare const QuestionCaption: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const QuestionBody: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const QuestionAction: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const QuestionActionIcon: any;
-export declare const QuestionCheckIcon: any;
-export declare const QuestionTypeIcon: any;
+export declare const QuestionActionIcon: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;
+export declare const QuestionCheckIcon: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;
+export declare const QuestionTypeIcon: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;
 export declare const QuestionTypeLabel: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const QuestionContent: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const QuestionSubject: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
@@ -14,4 +32,8 @@ export declare const QuestionTypeTitle: import('@linaria/react').StyledComponent
 export declare const ExpiredQuestion: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const PlayButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
 export declare const SkeletonContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const SkeletonButton: any;
+export declare const SkeletonButton: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;

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

@@ -1,4 +1,10 @@
 export declare const Container: 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 Description: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Icon: any;
+export declare const Icon: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../../icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;

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

@@ -1,8 +1,25 @@
-export declare const ShowInContainer: any;
+export declare const ShowInContainer: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    children: React.ReactNode | React.ReactNode[];
+    style?: React.CSSProperties;
+    className?: string;
+    enabled?: boolean;
+    hiding?: boolean;
+    onAnimationEnd?: React.AnimationEventHandler;
+} & {
+    animate?: boolean;
+}>;
 export declare const FeedbackContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ShowAnimation: import('@linaria/core').LinariaClassName;
 export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const IconPrediction: any;
+export declare const IconPrediction: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../../icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;
 export declare const FeedbackIconWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const FeedbackHeader: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const FeedbackTitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+type FeedbackAlertProps = {
+    icon?: 'icon-correct';
+    title: string;
+    description: React.ReactElement | string;
+    additionalDescription?: string;
+};
+export declare const FeedbackAlert: React.FC<FeedbackAlertProps>;
+export {};

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

@@ -0,0 +1,11 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { Container as c, Icon as l, Title as d, Description as m, AdditionalDescription as s } from "./styles.js";
+const x = ({ icon: e, title: i, description: t, additionalDescription: n }) => /* @__PURE__ */ o(c, { children: [
+  e && /* @__PURE__ */ r(l, { name: e }),
+  /* @__PURE__ */ r(d, { children: i }),
+  /* @__PURE__ */ r(m, { children: t }),
+  n && /* @__PURE__ */ r(s, { children: n })
+] });
+export {
+  x as FeedbackAlert
+};

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

@@ -0,0 +1,11 @@
+export declare const Container: 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 Description: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AdditionalDescription: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Icon: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../../icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;

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

@@ -0,0 +1,30 @@
+import { styled as s } from "@linaria/react";
+import { SvgIcon as o } from "../../../icons/index.js";
+const t = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "c1hygj0s",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "t1r84tez",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "Description",
+  class: "d1aj1a7k",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "AdditionalDescription",
+  class: "ax09ezs",
+  propsAsIs: !1
+}), n = () => o, p = /* @__PURE__ */ s(n())({
+  name: "Icon",
+  class: "inkrac",
+  propsAsIs: !0
+});
+export {
+  r as AdditionalDescription,
+  t as Container,
+  c as Description,
+  p as Icon,
+  a as Title
+};

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

@@ -3,8 +3,10 @@ interface VoteProps {
     openedQuestion: ExtendedQuestion;
     isLoading: boolean;
     vote: (questionId: string, answerId: string) => void;
-    close: () => void;
+    close: (questionId?: string) => void;
     isEarlyPrediction?: boolean;
+    mastersApp?: boolean;
+    webos?: boolean;
 }
 export declare const VoteSkeleton: React.FC;
 export declare const Vote: React.FC<VoteProps>;

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

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

package/lib/ui/gamification/vote/insight-details/index.js

@@ -1,13 +1,14 @@
-import { jsxs as o, jsx as l } from "react/jsx-runtime";
-import { InsightContent as k } from "../../../questions/insight/index.js";
-import { Container as m, WebLinkBtn as e, WebLinkIcon as c } from "./styles.js";
-const p = ({ instantView: r, ...b }) => /* @__PURE__ */ o(m, { children: [
-  /* @__PURE__ */ l(k, { instantView: r, ...b, isDetail: !0 }),
-  (r == null ? void 0 : r.webLink) && /* @__PURE__ */ o(e, { href: r == null ? void 0 : r.webLink.url, target: "_blank", "data-a": "web-link", children: [
+import { jsxs as b, jsx as l } from "react/jsx-runtime";
+import { InsightContentTV as e } from "../../../../app/webos/ui/insight/index.js";
+import { InsightContent as m } from "../../../questions/insight/index.js";
+import { Container as k, WebLinkBtn as h, WebLinkIcon as c } from "./styles.js";
+const x = ({ instantView: r, ...o }) => /* @__PURE__ */ b(k, { children: [
+  o.webos ? /* @__PURE__ */ l(e, { instantView: r, ...o, isDetail: !0 }) : /* @__PURE__ */ l(m, { instantView: r, ...o, isDetail: !0 }),
+  (r == null ? void 0 : r.webLink) && /* @__PURE__ */ b(h, { href: r == null ? void 0 : r.webLink.url, target: "_blank", "data-a": "web-link", children: [
     r == null ? void 0 : r.webLink.label,
     /* @__PURE__ */ l(c, { name: "icon-external-link" })
   ] })
 ] });
 export {
-  p as InsightDetails
+  x as InsightDetails
 };

package/lib/ui/gamification/vote/insight-details/styles.d.ts

@@ -1,3 +1,9 @@
 export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const WebLinkBtn: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLAnchorElement> & import('react').AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;
-export declare const WebLinkIcon: any;
+export declare const WebLinkIcon: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../../icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;