@streamlayer/react-ui 1.12.1 → 1.13.1

package/lib/ui/advertisement/index.d.ts

@@ -13,4 +13,6 @@ export declare const AdvertisementUI: React.FC<{
     skipAutoClose?: boolean;
     externalAd?: Advertisement['externalAd'];
     controlVideo: ControlVideoCb;
+    advertisementPaused: boolean;
+    togglePause: (flag: boolean) => void;
 }>;

package/lib/ui/advertisement/index.js

@@ -1,47 +1,53 @@
 import { jsx as o } from "react/jsx-runtime";
 import { PromotionType as r } from "@streamlayer/sdk-web-types";
-import { Banner as _ } from "./banner/index.js";
-import { Notification as a } from "./notification/index.js";
-import { Overlay as A } from "./overlay/index.js";
-import { Sidebar as M } from "./sidebar/index.js";
-import { OverlayContainer as d } from "./overlay/styles.js";
-const p = (i) => (i == null ? void 0 : i.type) === r.INGAME_IAB11_LBAR || (i == null ? void 0 : i.type) === r.INGAME_IAB21_LBAR, q = (i) => (i == null ? void 0 : i.type) === r.INGAME_IAB11 || (i == null ? void 0 : i.type) === r.INGAME_IAB21, P = ({
+import { Banner as p } from "./banner/index.js";
+import { Notification as q } from "./notification/index.js";
+import { Overlay as N } from "./overlay/index.js";
+import { Sidebar as E } from "./sidebar/index.js";
+import { OverlayContainer as G } from "./overlay/styles.js";
+const O = (i) => (i == null ? void 0 : i.type) === r.INGAME_IAB11_LBAR || (i == null ? void 0 : i.type) === r.INGAME_IAB21_LBAR, a = (i) => (i == null ? void 0 : i.type) === r.INGAME_IAB11 || (i == null ? void 0 : i.type) === r.INGAME_IAB21, x = ({
   advertisement: i,
-  close: t,
+  close: l,
   skipTypeCheck: u,
-  skipAutoClose: l,
-  layoutMode: E = "side-by-side",
+  skipAutoClose: I,
+  layoutMode: d = "side-by-side",
   sidebar: n,
-  isNotification: B,
+  isNotification: _,
   banner: f,
-  markAsViewed: I,
-  open: N,
+  markAsViewed: t,
+  open: M,
   externalAd: y,
-  controlVideo: c
-}) => i.promotion ? B && i.notification ? /* @__PURE__ */ o(a, { open: N, notification: i.notification, promotionId: i.question.id }) : !n && !f && (u || q(i.promotion)) ? /* @__PURE__ */ o(d, { className: "PromoOverlayContainer", children: /* @__PURE__ */ o(
-  A,
+  controlVideo: c,
+  advertisementPaused: A,
+  togglePause: B
+}) => i.promotion ? _ && i.notification ? /* @__PURE__ */ o(q, { open: M, notification: i.notification, promotionId: i.question.id }) : !n && !f && (u || a(i.promotion)) ? /* @__PURE__ */ o(G, { className: "PromoOverlayContainer", children: /* @__PURE__ */ o(
+  N,
   {
-    markAsViewed: I,
+    markAsViewed: t,
     promotionId: i.question.id,
     promotion: i.promotion,
-    onClose: t,
-    skipAutoClose: l,
+    onClose: l,
+    skipAutoClose: I,
     externalAd: y,
-    controlVideo: c
+    controlVideo: c,
+    advertisementPaused: A,
+    togglePause: B
   }
-) }) : n && (u || p(i.promotion)) ? /* @__PURE__ */ o(M, { className: "PromoSidebarContainer", direction: n, hiding: !1, children: /* @__PURE__ */ o(
-  A,
+) }) : n && (u || O(i.promotion)) ? /* @__PURE__ */ o(E, { className: "PromoSidebarContainer", direction: n, hiding: !1, children: /* @__PURE__ */ o(
+  N,
   {
-    markAsViewed: I,
+    markAsViewed: t,
     promotionId: i.question.id,
     promotion: i.promotion,
     externalAd: y,
-    onClose: t,
+    onClose: l,
     controlVideo: c,
-    skipAutoClose: l
+    skipAutoClose: I,
+    advertisementPaused: A,
+    togglePause: B
   }
 ) }) : f ? /* @__PURE__ */ o(
-  _,
+  p,
   {
     promotionId: i.question.id,
     hiding: !1,
@@ -50,5 +56,5 @@ const p = (i) => (i == null ? void 0 : i.type) === r.INGAME_IAB11_LBAR || (i ==
   }
 ) : null : null;
 export {
-  P as AdvertisementUI
+  x as AdvertisementUI
 };

package/lib/ui/advertisement/overlay/index.d.ts

@@ -11,5 +11,7 @@ export type OverlayProps = {
     inSidebar?: boolean;
     externalAd?: Advertisement['externalAd'];
     controlVideo: ControlVideoCb;
+    advertisementPaused: boolean;
+    togglePause: (flag: boolean) => void;
 };
 export declare const Overlay: React.FC<OverlayProps>;

package/lib/ui/advertisement/overlay/index.js

@@ -1,101 +1,113 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { cx as W } from "@linaria/core";
-import { useState as Z, useEffect as $ } from "react";
-import { eventBus as oo } from "@streamlayer/sdk-web-interfaces";
-import { PromotionType as q, PromotionLogoMode as l, AutoPlayVideo as eo, PromotionButtonType as ro } from "@streamlayer/sdk-web-types";
-import { CloseButton as to } from "../../close-btn/index.js";
-import { VideoPlayer as no } from "../../video-player/index.js";
-import { ExternalAdOverlay as ao } from "./externalAd/index.js";
-import { PromoOverlay as lo, Header as io, HeaderContent as so, headerContentShift as mo, SponsorLogo as z, Sponsor as co, SponsorName as po, SponsorText as uo, ADLogo as yo, SponsoredText as fo, Media as bo, shiftMedia as go, Content as J, PromoImg as ho, Title as Po, hideOnMobile as Ao, Description as To, ActionBtnWrap as No, ActionButton as vo } from "./styles.js";
-import { OverlayContainer as _o } from "./styles.js";
-const Do = (c) => {
-  var y, f, b, g, h, P, A, T, N, v, x, B, C, E, O, M, S, L, I, D, R, U, _, k, F, V, j, G, H, w;
-  const { promotion: o, controlVideo: t, skipAutoClose: K, promotionId: a, onClose: Q, markAsViewed: i, externalAd: p } = c, s = o.type === q.INGAME_IAB11_LBAR || o.type === q.INGAME_IAB11, d = ((y = o.sponsor) == null ? void 0 : y.logo) && o.logoMode === l.CENTER, X = !!((b = (f = o.banner) == null ? void 0 : f.video) != null && b.url), m = o.autoPlayVideo === eo.ENABLED, [Y, u] = Z(!X || !m);
-  if ($(() => {
-    a && o.type && i && i();
-  }, [a, o.type, i]), $(() => () => {
-    t == null || t({ muted: !1 });
-  }, [t]), p)
-    return /* @__PURE__ */ e(ao, { ...c, externalAd: p });
-  let n = (g = o.banner) == null ? void 0 : g.url;
-  return n && n.indexOf("http") !== 0 && (n = `https://${n}`), /* @__PURE__ */ r(lo, { className: "PromoOverlay", children: [
-    /* @__PURE__ */ r(io, { children: [
-      /* @__PURE__ */ r(so, { className: W(!d && mo), children: [
-        ((h = o.sponsor) == null ? void 0 : h.logo) && o.logoMode === l.LEFT && /* @__PURE__ */ e(z, { src: (P = o.sponsor) == null ? void 0 : P.logo, alt: "promo" }),
-        /* @__PURE__ */ r(
-          co,
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { cx as $ } from "@linaria/core";
+import { useEffect as c } from "react";
+import { eventBus as Z } from "@streamlayer/sdk-web-interfaces";
+import { PromotionType as q, PromotionLogoMode as i, AutoPlayVideo as oo, PromotionButtonType as eo } from "@streamlayer/sdk-web-types";
+import { CloseButton as ro } from "../../close-btn/index.js";
+import { VideoPlayer as to } from "../../video-player/index.js";
+import { ExternalAdOverlay as no } from "./externalAd/index.js";
+import { PromoOverlay as ao, Header as lo, HeaderContent as io, headerContentShift as so, SponsorLogo as z, Sponsor as mo, SponsorName as po, SponsorText as co, ADLogo as yo, SponsoredText as uo, Media as fo, shiftMedia as bo, Content as J, PromoImg as ho, Title as Ao, hideOnMobile as To, Description as vo, ActionBtnWrap as No, ActionButton as xo } from "./styles.js";
+import { OverlayContainer as Uo } from "./styles.js";
+const Io = (y) => {
+  var f, b, h, A, T, v, N, x, P, B, C, E, g, O, M, L, S, I, D, R, U, _, k, F, V, j, G, H, w, W;
+  const {
+    promotion: o,
+    advertisementPaused: K,
+    togglePause: r,
+    controlVideo: n,
+    skipAutoClose: Q,
+    promotionId: l,
+    onClose: X,
+    markAsViewed: s,
+    externalAd: u
+  } = y, d = o.type === q.INGAME_IAB11_LBAR || o.type === q.INGAME_IAB11, m = ((f = o.sponsor) == null ? void 0 : f.logo) && o.logoMode === i.CENTER, Y = !!((h = (b = o.banner) == null ? void 0 : b.video) != null && h.url), p = o.autoPlayVideo === oo.ENABLED;
+  if (c(() => {
+    r == null || r(Y || p);
+  }, []), c(() => {
+    l && o.type && s && s();
+  }, [l, o.type, s]), c(() => () => {
+    n == null || n({ muted: !1 });
+  }, [n]), u)
+    return /* @__PURE__ */ e(no, { ...y, externalAd: u });
+  let a = (A = o.banner) == null ? void 0 : A.url;
+  return a && a.indexOf("http") !== 0 && (a = `https://${a}`), /* @__PURE__ */ t(ao, { className: "PromoOverlay", children: [
+    /* @__PURE__ */ t(lo, { children: [
+      /* @__PURE__ */ t(io, { className: $(!m && so), children: [
+        ((T = o.sponsor) == null ? void 0 : T.logo) && o.logoMode === i.LEFT && /* @__PURE__ */ e(z, { src: (v = o.sponsor) == null ? void 0 : v.logo, alt: "promo" }),
+        /* @__PURE__ */ t(
+          mo,
           {
             style: {
-              paddingLeft: (A = o.sponsor) != null && A.logo && o.logoMode === l.LEFT ? "0px" : "8px"
+              paddingLeft: (N = o.sponsor) != null && N.logo && o.logoMode === i.LEFT ? "0px" : "8px"
             },
             children: [
-              ((T = o.sponsor) == null ? void 0 : T.logo) && o.logoMode === l.LEFT && /* @__PURE__ */ e(po, { children: (N = o.sponsor) == null ? void 0 : N.name }),
-              /* @__PURE__ */ r(uo, { className: "SponsorText", children: [
+              ((x = o.sponsor) == null ? void 0 : x.logo) && o.logoMode === i.LEFT && /* @__PURE__ */ e(po, { children: (P = o.sponsor) == null ? void 0 : P.name }),
+              /* @__PURE__ */ t(co, { className: "SponsorText", children: [
                 /* @__PURE__ */ e(yo, { children: "AD" }),
-                /* @__PURE__ */ e(fo, { children: "SPONSORED" })
+                /* @__PURE__ */ e(uo, { children: "SPONSORED" })
               ] })
             ]
           }
         )
       ] }),
       /* @__PURE__ */ e(
-        to,
+        ro,
         {
           className: "ClosePromoIcon",
-          close: Q,
-          autoClose: (v = o.closeTimer) == null ? void 0 : v.auto,
-          duration: K ? 0 : (x = o.closeTimer) == null ? void 0 : x.seconds,
-          isPlaying: Y
+          close: X,
+          autoClose: (B = o.closeTimer) == null ? void 0 : B.auto,
+          duration: Q ? 0 : (C = o.closeTimer) == null ? void 0 : C.seconds,
+          isPlaying: !K
         }
       )
     ] }),
-    /* @__PURE__ */ r(bo, { children: [
-      d && /* @__PURE__ */ e(z, { className: go, src: (B = o.sponsor) == null ? void 0 : B.logo, alt: "promo" }),
-      /* @__PURE__ */ e(J, { children: (E = (C = o.banner) == null ? void 0 : C.video) != null && E.url ? /* @__PURE__ */ e(
-        no,
+    /* @__PURE__ */ t(fo, { children: [
+      m && /* @__PURE__ */ e(z, { className: bo, src: (E = o.sponsor) == null ? void 0 : E.logo, alt: "promo" }),
+      /* @__PURE__ */ e(J, { children: (O = (g = o.banner) == null ? void 0 : g.video) != null && O.url ? /* @__PURE__ */ e(
+        to,
         {
-          source: (M = (O = o.banner) == null ? void 0 : O.video) == null ? void 0 : M.url,
-          poster: (L = (S = o.banner) == null ? void 0 : S.video) == null ? void 0 : L.thumbnailUrl,
-          aspectRatio: s ? "1/1" : "16/9",
+          source: (L = (M = o.banner) == null ? void 0 : M.video) == null ? void 0 : L.url,
+          poster: (I = (S = o.banner) == null ? void 0 : S.video) == null ? void 0 : I.thumbnailUrl,
+          aspectRatio: d ? "1/1" : "16/9",
           onPause: () => {
-            m && u(!1);
+            p && (r == null || r(!0));
           },
           onPlay: () => {
-            oo.emit("advertisement", {
+            Z.emit("advertisement", {
               action: "videoPlay",
               payload: {
-                id: a,
+                id: l,
                 type: o.type
               }
-            }), u(!0);
+            }), r == null || r(!1);
           },
-          controlVideo: t,
-          autoPlay: m
+          controlVideo: n,
+          autoPlay: p
         }
-      ) : (I = o.banner) != null && I.imageUrl ? /* @__PURE__ */ e(ho, { style: s ? { aspectRatio: "1/1" } : {}, src: (D = o.banner) == null ? void 0 : D.imageUrl, alt: "promo" }) : null }),
-      !s && /* @__PURE__ */ r(J, { children: [
-        ((R = o.banner) == null ? void 0 : R.title) && /* @__PURE__ */ e(Po, { className: W("AdvTitle", d && Ao), children: (U = o.banner) == null ? void 0 : U.title }),
-        ((_ = o.banner) == null ? void 0 : _.body) && /* @__PURE__ */ e(To, { className: "AdvDescription", children: (k = o.banner) == null ? void 0 : k.body })
+      ) : (D = o.banner) != null && D.imageUrl ? /* @__PURE__ */ e(ho, { style: d ? { aspectRatio: "1/1" } : {}, src: (R = o.banner) == null ? void 0 : R.imageUrl, alt: "promo" }) : null }),
+      !d && /* @__PURE__ */ t(J, { children: [
+        ((U = o.banner) == null ? void 0 : U.title) && /* @__PURE__ */ e(Ao, { className: $("AdvTitle", m && To), children: (_ = o.banner) == null ? void 0 : _.title }),
+        ((k = o.banner) == null ? void 0 : k.body) && /* @__PURE__ */ e(vo, { className: "AdvDescription", children: (F = o.banner) == null ? void 0 : F.body })
       ] })
     ] }),
-    o.buttonType !== ro.NO_BUTTON && /* @__PURE__ */ e(No, { children: /* @__PURE__ */ e(
-      vo,
+    o.buttonType !== eo.NO_BUTTON && /* @__PURE__ */ e(No, { children: /* @__PURE__ */ e(
+      xo,
       {
-        href: n,
+        href: a,
         style: {
-          backgroundColor: ((V = (F = o.banner) == null ? void 0 : F.ctaButton) == null ? void 0 : V.color) || "#009dc4",
-          color: ((G = (j = o.banner) == null ? void 0 : j.ctaButton) == null ? void 0 : G.textColor) || "#fff"
+          backgroundColor: ((j = (V = o.banner) == null ? void 0 : V.ctaButton) == null ? void 0 : j.color) || "#009dc4",
+          color: ((H = (G = o.banner) == null ? void 0 : G.ctaButton) == null ? void 0 : H.textColor) || "#fff"
         },
         "data-analytics": "button",
-        "data-promo-id": a,
+        "data-promo-id": l,
         "data-promo-type": o.type,
         target: "_blank",
-        children: (w = (H = o.banner) == null ? void 0 : H.ctaButton) == null ? void 0 : w.label
+        children: (W = (w = o.banner) == null ? void 0 : w.ctaButton) == null ? void 0 : W.label
       }
     ) })
   ] });
 };
 export {
-  Do as Overlay,
-  _o as OverlayContainer
+  Io as Overlay,
+  Uo as OverlayContainer
 };

package/lib/ui/gamification/question/notification/index.js

@@ -1,37 +1,45 @@
-import { jsxs as t, jsx as a, Fragment as p } from "react/jsx-runtime";
-import { QuestionType as l } from "@streamlayer/sdk-web-types";
-import { QuestionTypeData as T } from "../../constants.js";
-import { Insight as f } from "./insight/index.js";
-import { Container as E, CloseIconWrap as I, CloseIcon as h, Header as C, TypeIcon as A, TypeName as W, Question as s, AnswerButton as x } from "./styles.js";
-import { Tweet as D } from "./tweet/index.js";
-const k = ({
-  close: d,
+import { jsxs as m, jsx as a, Fragment as T } from "react/jsx-runtime";
+import { QuestionType as o } from "@streamlayer/sdk-web-types";
+import { QuestionTypeData as f } from "../../constants.js";
+import { Insight as E } from "./insight/index.js";
+import { Container as I, CloseIconWrap as h, CloseIcon as C, Header as A, TypeIcon as W, TypeName as s, Question as x, AnswerButton as D } from "./styles.js";
+import { Tweet as g } from "./tweet/index.js";
+const w = ({
+  close: i,
   action: n,
   controlVideo: c,
-  data: { questionType: r, question: o, insight: e, tweet: i }
+  data: { questionType: r, question: t, insight: e, tweet: p }
 }) => {
-  const m = T[r];
-  return m ? /* @__PURE__ */ t(E, { style: r === l.TWEET ? { paddingTop: "12px" } : {}, children: [
-    /* @__PURE__ */ a(I, { onClick: d, children: /* @__PURE__ */ a(h, { name: "icon-cross" }) }),
-    r !== l.TWEET && /* @__PURE__ */ t(C, { children: [
+  const l = f[r];
+  return l ? /* @__PURE__ */ m(I, { onClick: n, style: r === o.TWEET ? { paddingTop: "12px" } : {}, children: [
+    /* @__PURE__ */ a(
+      h,
+      {
+        onClick: (d) => {
+          d.stopPropagation(), i && i(d);
+        },
+        children: /* @__PURE__ */ a(C, { name: "icon-cross" })
+      }
+    ),
+    r !== o.TWEET && /* @__PURE__ */ m(A, { children: [
       /* @__PURE__ */ a(
-        A,
+        W,
         {
-          "data-type-trivia": r === l.TRIVIA,
-          "data-type-poll": r === l.POLL,
-          name: m.iconName
+          "data-type-trivia": r === o.TRIVIA,
+          "data-type-poll": r === o.POLL,
+          name: l.iconName
         }
       ),
-      /* @__PURE__ */ a(W, { children: m.label })
+      /* @__PURE__ */ a(s, { children: l.label })
     ] }),
-    r === l.FACTOID && e && /* @__PURE__ */ a(f, { ...e, action: n, controlVideo: c }),
-    r === l.TWEET && i && /* @__PURE__ */ a(D, { ...i, action: n, controlVideo: c }),
-    r !== l.FACTOID && r !== l.TWEET && /* @__PURE__ */ t(p, { children: [
-      /* @__PURE__ */ a(s, { children: o == null ? void 0 : o.title }),
-      /* @__PURE__ */ a(x, { onClick: n, children: "Answer" })
+    r === o.FACTOID && e && /* @__PURE__ */ a(E, { ...e, action: n, controlVideo: c }),
+    r === o.TWEET && p && /* @__PURE__ */ a(g, { ...p, action: n, controlVideo: c }),
+    r !== o.FACTOID && r !== o.TWEET && /* @__PURE__ */ m(T, { children: [
+      /* @__PURE__ */ a(x, { children: t == null ? void 0 : t.title }),
+      /* @__PURE__ */ a(D, { children: "Answer" })
     ] })
   ] }) : null;
 };
 export {
-  k as Notification
+  w as Notification
 };

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

@@ -1,95 +1,97 @@
-import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import { useState as y, useLayoutEffect as U } from "react";
-import { QuestionImages as a, QuestionType as i, QuestionStatus as D } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as W } from "../../../animated-counter/index.js";
-import { IconDefault as $, IconContainer as F, IconWrap as M, IconCircle as z, ButtonContainer as G, ButtonPctWrap as H, ButtonPct as J, ButtonBody as K, Title as X, Pts as Y, Indicators as Z, CheckIcon as _, Percentage as q } from "./styles.js";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { useState as V, useLayoutEffect as W } from "react";
+import { QuestionImages as a, QuestionType as o, QuestionStatus as p } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as $ } from "../../../animated-counter/index.js";
+import { IconDefault as y, IconContainer as F, IconWrap as M, IconCircle as z, ButtonContainer as G, ButtonPctWrap as H, ButtonPct as J, ButtonBody as K, Title as X, Pts as Y, Indicators as Z, CheckIcon as _, Percentage as q } from "./styles.js";
 const E = {
-  [a.CENTERED]: (t) => /* @__PURE__ */ e($, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
+  [a.CENTERED]: (t) => /* @__PURE__ */ e(y, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
   [a.TRANSPARENT]: (t) => /* @__PURE__ */ e(F, { "data-testid": "vote-icon", children: /* @__PURE__ */ e(M, { style: { backgroundImage: `url(${t})` } }) }),
   [a.ROUNDED]: (t) => /* @__PURE__ */ e(z, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
   [a.NONE]: () => null,
   [a.UNSET]: () => null
-}, tt = ({ questionType: t, hasCorrectAnswer: c, correct: n, youVoted: o, questionVoted: r }) => {
-  if (t === i.POLL && o)
+}, tt = ({ questionType: t, hasCorrectAnswer: c, correct: n, youVoted: r, questionVoted: i }) => {
+  if (t === o.POLL && r)
     return "voted";
-  if (t === i.PREDICTION) {
-    if (c && r)
-      return o ? n ? "correct" : "incorrect" : "unset";
-    if (o)
+  if (t === o.PREDICTION) {
+    if (!c && i)
+      return r ? "voted" : "unset";
+    if (c && i)
+      return r ? n ? "correct" : "incorrect" : "unset";
+    if (r)
       return "correct";
   }
-  return t === i.TRIVIA && r && o ? n ? "correct" : "incorrect" : "unset";
+  return t === o.TRIVIA && i && r ? n ? "correct" : "incorrect" : "unset";
 }, et = ({
   questionType: t,
   questionVoted: c,
   correct: n,
-  hasCorrectAnswer: o,
-  questionStatus: r
-}) => t === i.TRIVIA ? c && n : t === i.PREDICTION ? c && n && o || r === D.RESOLVED && n : !1, st = (t) => {
-  var p;
+  hasCorrectAnswer: r,
+  questionStatus: i
+}) => t === o.TRIVIA ? c && n : t === o.PREDICTION ? c && n && r || i === p.RESOLVED && n : !1, st = (t) => {
+  var S;
   const {
     // option props
     id: c,
     icon: n,
-    text: o,
-    percentageDecimal: r,
-    points: g,
+    text: r,
+    percentageDecimal: i,
+    points: D,
     // extra props
-    onVote: w,
-    markThatVoted: A,
-    onPercentsAnimated: I,
-    youSelected: m,
-    youVoted: O,
+    onVote: v,
+    markThatVoted: O,
+    onPercentsAnimated: f,
+    youSelected: h,
+    youVoted: g,
     questionVoted: s,
     imageMode: C,
-    answerTimeExpired: v,
+    answerTimeExpired: w,
     questionStatus: P,
-    isLoading: k,
+    isLoading: A,
     questionType: d,
-    correct: x,
-    hasCorrectAnswer: L,
-    votedAfterQuestionClosed: B,
+    correct: k,
+    hasCorrectAnswer: x,
+    votedAfterQuestionClosed: L,
     enteredAnActiveQuestion: R,
-    marketClosed: h
-  } = t, [Q, T] = y(0), l = tt(t), V = et({ questionType: d, questionVoted: s, correct: x, hasCorrectAnswer: L, questionStatus: P }), u = h && d === i.PREDICTION, N = s || u, b = d === i.PREDICTION && !s && !h, S = s && !m && l !== "incorrect" && !O;
-  return console.log({ isNotChecked: S, questionVoted: s, youSelected: m, answerState: l }), U(() => {
+    marketClosed: I
+  } = t, [B, T] = V(0), m = tt(t), Q = et({ questionType: d, questionVoted: s, correct: k, hasCorrectAnswer: x, questionStatus: P }), u = I && d === o.PREDICTION, N = s || u, b = d === o.PREDICTION && !s && !I, j = s && !h && m !== "incorrect" && !g;
+  return W(() => {
     T(0), requestAnimationFrame(() => {
-      T(r);
+      T(i);
     });
-  }, [r]), /* @__PURE__ */ f(
+  }, [i]), /* @__PURE__ */ l(
     G,
     {
       value: c,
-      "data-selected": m,
-      "data-answer-state": l,
-      disabled: s || k || v || u && !R || u && R && B,
-      "data-is-not-checked": S,
-      onClick: (j) => {
-        A(
-          d === i.PREDICTION ? h : P === D.RESOLVED
-        ), w(j);
+      "data-selected": h,
+      "data-answer-state": m,
+      disabled: s || A || w || u && !R || u && R && L,
+      "data-is-not-checked": j,
+      onClick: (U) => {
+        O(
+          d === o.PREDICTION ? I : P === p.RESOLVED
+        ), v(U);
       },
       children: [
         /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(
           J,
           {
-            "data-answer-state": l,
-            style: { width: `${N ? Q : 0}%` },
+            "data-answer-state": m,
+            style: { width: `${N ? B : 0}%` },
             onTransitionEnd: () => {
-              u || I == null || I();
+              u || f == null || f();
             }
           }
         ) }),
-        /* @__PURE__ */ f(K, { children: [
-          n && C && ((p = E[C]) == null ? void 0 : p.call(E, n)),
-          /* @__PURE__ */ e(X, { children: o }),
-          b && /* @__PURE__ */ f("div", { children: [
-            g,
+        /* @__PURE__ */ l(K, { children: [
+          n && C && ((S = E[C]) == null ? void 0 : S.call(E, n)),
+          /* @__PURE__ */ e(X, { children: r }),
+          b && /* @__PURE__ */ l("div", { children: [
+            D,
             /* @__PURE__ */ e(Y, { children: "pts" })
           ] }),
-          N && /* @__PURE__ */ f(Z, { children: [
-            V && /* @__PURE__ */ e(_, { name: "selected" }),
-            /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(W, { value: r, suffix: "%" }) })
+          N && /* @__PURE__ */ l(Z, { children: [
+            Q && /* @__PURE__ */ e(_, { name: "selected" }),
+            /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e($, { value: i, suffix: "%" }) })
           ] })
         ] })
       ]

package/lib/ui/theme/constants.d.ts

@@ -52,6 +52,9 @@ export declare const COLORS: {
     VOTE_BTN_NOT_SELECTED_BORDER: string;
     VOTE_BTN_SELECTED_BG: string;
     VOTE_BTN_NOT_SELECTED_BG: string;
+    VOTE_BTN_NOT_SELECTED_BG_UNSET: string;
+    VOTED_ANSWER_BG: string;
+    VOTED_BTN_RCT_BG: string;
 };
 export declare const COLORS_ADVERTISEMENT: {
     BG_PRIMARY: string;

package/lib/ui/theme/constants.js

@@ -1,4 +1,4 @@
-const T = {
+const R = {
   BLUE_QUESTION_ACTION_BTN: "#1589ee",
   WHITE: "#FFFFFF",
   BLUE: "#2d6ffd",
@@ -36,7 +36,7 @@ const T = {
   SDK_PREDICTION_FEEDBACK_SUCCESS_ICON: "#107D57",
   SDK_PREDICTION_FEEDBACK_INCORRECT_RECT1: "#CD2525",
   SDK_PREDICTION_FEEDBACK_INCORRECT_RECT2: "#fff",
-  PREDICTION_BG_LINES_CORRECT: "#095CD1",
+  PREDICTION_BG_LINES_CORRECT: "#01AB58",
   PREDICTION_BG_LINES_INCORRECT: "#888B8D",
   SKELETON_COLOR_1: "#f1efef",
   SKELETON_COLOR_2: "#f9f8f8",
@@ -48,12 +48,15 @@ const T = {
   CARD_BORDER: "#fff",
   BORDER: "#E8E8E8",
   VOTE_BTN_BG: "#F7F7F7",
-  VOTE_BTN_BORDER: "transparent",
+  VOTE_BTN_BORDER: "rgb(232, 232, 232)",
   VOTE_BTN_DISABLED_BORDER: "#B1B3B3",
   VOTE_BTN_SELECTED_BORDER: "#25282A",
   VOTE_BTN_NOT_SELECTED_BORDER: "#E8E8E8",
   VOTE_BTN_SELECTED_BG: "#FFFFFF",
-  VOTE_BTN_NOT_SELECTED_BG: "#FFFFFF"
+  VOTE_BTN_NOT_SELECTED_BG: "#FFFFFF",
+  VOTE_BTN_NOT_SELECTED_BG_UNSET: "rgb(196, 196, 196)",
+  VOTED_ANSWER_BG: "#FFFFFF",
+  VOTED_BTN_RCT_BG: "#2d5694"
 }, F = {
   BG_PRIMARY: "#13212b",
   BG_SECONDARY: "#152430",
@@ -64,7 +67,7 @@ const T = {
   TEXT_SECONDARY: "rgba(255, 255, 255, 0.8)",
   TEXT_SECONDARY1: "#878787",
   WHITE: "#fff"
-}, D = ["#107D57", "#DF2F3B", "#DF2F3B", "#E8E8E8"], I = "#cee5de", O = "#f9d6d8", S = "#E8E8E8", A = {
+}, D = ["#107D57", "#DF2F3B", "#DF2F3B", "#E8E8E8"], O = "#cee5de", S = "#f9d6d8", I = "#E8E8E8", A = {
   REGULAR: "'SF Pro Text', Arial, Helvetica, sans-serif",
   SERIF: "'SF Pro Display', Arial, Helvetica, sans-serif",
   COLOR: "#fff",
@@ -77,33 +80,33 @@ const T = {
   SIZE_DEFAULT2: "12px",
   LINE_HEIGHT: "24px",
   MARGIN_TITLE_DEFAULT: "24px 0px"
-}, C = {
+}, N = {
   xs: 324,
   sm: 576,
   md: 768,
   lg: 992,
   xl: 1200,
   xxl: 1440
-}, N = {
+}, C = {
   landscape: "landscape",
   portrait: "portrait"
-}, B = Object.entries(T).reduce((E, [_, R]) => `
+}, B = Object.entries(R).reduce((E, [_, T]) => `
     ${E}
-    --color-${_.toLowerCase().replaceAll("_", "-")}: ${R};
-  `, ""), L = Object.entries(F).reduce((E, [_, R]) => `
+    --color-${_.toLowerCase().replaceAll("_", "-")}: ${T};
+  `, ""), L = Object.entries(F).reduce((E, [_, T]) => `
     ${E}
-    --color-adv-${_.toLowerCase().replaceAll("_", "-")}: ${R};
+    --color-adv-${_.toLowerCase().replaceAll("_", "-")}: ${T};
   `, "");
 export {
-  C as BREAKPOINTS,
-  T as COLORS,
+  N as BREAKPOINTS,
+  R as COLORS,
   F as COLORS_ADVERTISEMENT,
   A as FONT,
-  N as ORIENTATION,
+  C as ORIENTATION,
   D as TIMER_COLORS,
-  S as TIMER_GRAY,
-  I as TIMER_GREEN,
-  O as TIMER_RED,
+  I as TIMER_GRAY,
+  O as TIMER_GREEN,
+  S as TIMER_RED,
   B as colors,
   L as colorsAdvertisement
 };