@streamlayer/react-ui 1.1.0 → 1.2.0

package/lib/ui/advertisement/index.js

@@ -1,31 +1,19 @@
-import { jsxs as e, jsx as c, Fragment as d } from "react/jsx-runtime";
-import { useStore as s } from "@nanostores/react";
-import { PromotionType as t } from "@streamlayer/sdk-web-types";
-import { Banner as a } from "./banner/index.js";
+import { jsxs as c, jsx as l } from "react/jsx-runtime";
+import { useStore as a } from "@nanostores/react";
+import { PromotionType as d } from "@streamlayer/sdk-web-types";
+import { Banner as s } from "./banner/index.js";
 import { Overlay as u } from "./overlay/index.js";
-import { Sidebar as h } from "./sidebar/index.js";
-const f = (r) => (r == null ? void 0 : r.type) === t.INGAME_IAB11_LBAR || (r == null ? void 0 : r.type) === t.INGAME_IAB21_LBAR, A = (r) => (r == null ? void 0 : r.type) === t.INGAME_IAB11 || (r == null ? void 0 : r.type) === t.INGAME_IAB21, _ = ({ advertisement: r, sidebar: n, banner: i }) => {
-  const l = s(r.data);
-  return !l.data && l.loading ? /* @__PURE__ */ e("div", { children: [
-    "loading... ",
-    /* @__PURE__ */ c("button", { onClick: r.close, children: "close" })
-  ] }) : l.error ? /* @__PURE__ */ e("div", { children: [
+import { Sidebar as n } from "./sidebar/index.js";
+const f = (r) => (r == null ? void 0 : r.type) === d.INGAME_IAB11_LBAR || (r == null ? void 0 : r.type) === d.INGAME_IAB21_LBAR, y = (r) => (r == null ? void 0 : r.type) === d.INGAME_IAB11 || (r == null ? void 0 : r.type) === d.INGAME_IAB21, C = ({ advertisement: r, layoutMode: A = "side-by-side", sidebar: i, banner: t }) => {
+  const e = a(r.data);
+  return !e.data && e.loading ? null : e.error ? /* @__PURE__ */ c("div", { children: [
     "error ",
-    /* @__PURE__ */ c("button", { onClick: r.close, children: "close" })
-  ] }) : l.data ? i ? /* @__PURE__ */ e(d, { children: [
-    /* @__PURE__ */ c(a, { promotion: l.data, direction: i }),
-    /* @__PURE__ */ c("button", { onClick: r.close, children: "close" })
-  ] }) : n && f(l.data) ? /* @__PURE__ */ e(d, { children: [
-    /* @__PURE__ */ c(h, { direction: n, children: /* @__PURE__ */ c(u, { promotion: l.data }) }),
-    /* @__PURE__ */ c("button", { onClick: r.close, children: "close" })
-  ] }) : !n && A(l.data) ? /* @__PURE__ */ e(d, { children: [
-    /* @__PURE__ */ c(u, { promotion: l.data }),
-    /* @__PURE__ */ c("button", { onClick: r.close, children: "close" })
-  ] }) : null : /* @__PURE__ */ e("div", { children: [
+    /* @__PURE__ */ l("button", { onClick: r.close, children: "close" })
+  ] }) : e.data ? !i && !t && y(e.data) ? /* @__PURE__ */ l(u, { promotion: e.data, onClose: r.close }) : i && f(e.data) ? /* @__PURE__ */ l(n, { direction: i, hiding: r.hiding, children: /* @__PURE__ */ l(u, { promotion: e.data, onClose: r.close, inSidebar: !0 }) }) : t ? /* @__PURE__ */ l(s, { hiding: r.hiding, promotion: e.data, direction: t }) : null : /* @__PURE__ */ c("div", { children: [
     "empty promo ",
-    /* @__PURE__ */ c("button", { onClick: r.close, children: "close" })
+    /* @__PURE__ */ l("button", { onClick: r.close, children: "close" })
   ] });
 };
 export {
-  _ as AdvertisementUI
+  C as AdvertisementUI
 };

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

@@ -1,3 +1,4 @@
 import { PromotionOptions } from '@streamlayer/sdk-web-types';
 
 export declare const promotionMock: PromotionOptions;
+export declare const promotionMockWithVideo: PromotionOptions;

package/lib/ui/advertisement/mock.js

@@ -1,4 +1,4 @@
-import { PromotionType as o, PromotionWallet as e, PromotionLogoMode as a, CtaIconMode as t } from "@streamlayer/sdk-web-types";
+import { PromotionType as o, PromotionWallet as e, PromotionLogoMode as a, CtaIconMode as c } from "@streamlayer/sdk-web-types";
 const d = {
   type: o.INGAME_IAB21_LBAR,
   enableWallet: e.DISABLED,
@@ -11,13 +11,13 @@ const d = {
     name: "Coca Cola"
   },
   banner: {
-    imageUrl: "https://static-next.streamlayer.io/a8b6c1738a31dd0076a01c8807253533/be4af347-d124-4677-b413-cf288dadbdaf/059b6e6f-518d-46e6-b149-7e6afe01f756.png",
+    imageUrl: "https://www.figma.com/file/8XscgUSGOMU6rCYDLBgrAc/image/58f7c29647f7ad5bd447f76534af79609bedc74f",
     url: "google.com",
     ctaButton: {
       label: "Order",
       color: "#1d7bff",
       ctaIcon: "",
-      ctaIconMode: t.CTA_ICON_UNSET,
+      ctaIconMode: c.CTA_ICON_UNSET,
       textColor: "#fff"
     },
     body: "Order pizza",
@@ -27,7 +27,41 @@ const d = {
     imageUrl: "https://static-next.streamlayer.io/a8b6c1738a31dd0076a01c8807253533/42b6d84a-3cca-4eed-98ed-195706b47882/fce903c3-9781-4613-ae1e-4cce7e8cde90.png",
     url: "google.com"
   }
+}, r = {
+  type: o.INGAME_IAB21_LBAR,
+  enableWallet: e.DISABLED,
+  coupon: "",
+  logoMode: a.LEFT,
+  couponZip: "",
+  couponBarcodeUrl: "",
+  sponsor: {
+    logo: "https://static-next.streamlayer.io/a8b6c1738a31dd0076a01c8807253533/f1de6799-4502-4423-9cbe-4804cd0ba769/c911da1a-e4a1-4e9a-8eb2-d1a6aa17e05d.png",
+    name: "Lorem ipsum dolor sit 4434, co"
+  },
+  banner: {
+    imageUrl: "",
+    url: "",
+    video: {
+      id: "1",
+      thumbnailUrl: "https://www.figma.com/file/8XscgUSGOMU6rCYDLBgrAc/image/58f7c29647f7ad5bd447f76534af79609bedc74f",
+      url: "https://static-next.streamlayer.io/2e8700993dd42a9b3283ef7f1b4bddc0/aa7a51c8-b8fb-4e8c-97bd-eebf649fd04d/36163fdd-3d41-447c-a3b2-3faf35ae9235.mp4"
+    },
+    ctaButton: {
+      label: "Lorem ipsum dol",
+      color: "#1d7bff",
+      ctaIcon: "",
+      ctaIconMode: c.CTA_ICON_UNSET,
+      textColor: "#fff"
+    },
+    body: "Lorem ipsum dolor sit 4434, consectetur 1111192392 3333, sed do 4434343 342343 545454344 ut 234323 ",
+    title: "Lorem ipsum dolor sit 4434, co"
+  },
+  additionalBanner: {
+    imageUrl: "https://static-next.streamlayer.io/a8b6c1738a31dd0076a01c8807253533/42b6d84a-3cca-4eed-98ed-195706b47882/fce903c3-9781-4613-ae1e-4cce7e8cde90.png",
+    url: "google.com"
+  }
 };
 export {
-  d as promotionMock
+  d as promotionMock,
+  r as promotionMockWithVideo
 };

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

@@ -2,4 +2,6 @@ import { PromotionOptions } from '@streamlayer/sdk-web-types';
 
 export declare const Overlay: React.FC<{
     promotion: PromotionOptions;
+    onClose?: () => void;
+    inSidebar?: boolean;
 }>;

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

@@ -1,21 +1,74 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-const b = ({ promotion: r }) => {
-  var i, l, n, c, h, a, t, s, v;
-  return /* @__PURE__ */ d("div", { className: "PromoOverlay", children: [
-    /* @__PURE__ */ d("div", { children: [
-      /* @__PURE__ */ d("div", { children: [
-        /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("img", { src: (i = r.sponsor) == null ? void 0 : i.logo, width: 100, height: 50, alt: "promo" }) }),
-        /* @__PURE__ */ e("div", { children: (l = r.sponsor) == null ? void 0 : l.name })
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { PromotionType as N, PromotionLogoMode as n } from "@streamlayer/sdk-web-types";
+import { VideoPlayer as D } from "../../video-player/index.js";
+import { PromoOverlay as F, Header as R, HeaderContent as _, SponsorLogo as S, SponsorName as U, SponsorText as j, ADLogo as m, SponsoredText as G, CloseIconWrap as H, CloseIcon as W, Media as w, Content as V, PromoImg as q, Text as z, Title as J, Description as K, ActionBtnWrap as Q, ActionButton as X } from "./styles.js";
+const re = ({
+  promotion: e,
+  onClose: O,
+  inSidebar: k
+}) => {
+  var a, s, c, d, t, g, h, i, b, u, y, x, f, p, A, C, E, T, B, L, M, v, I, P;
+  const o = e.type === N.INGAME_IAB11_LBAR || e.type === N.INGAME_IAB11;
+  return /* @__PURE__ */ l(F, { className: "PromoOverlay", style: { ...k ? {} : { backgroundColor: "#1E3344" } }, children: [
+    /* @__PURE__ */ l(R, { children: [
+      /* @__PURE__ */ l(_, { children: [
+        ((a = e.sponsor) == null ? void 0 : a.logo) && e.logoMode === n.LEFT && /* @__PURE__ */ r(S, { src: (s = e.sponsor) == null ? void 0 : s.logo, alt: "promo" }),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            style: {
+              paddingLeft: (c = e.sponsor) != null && c.logo && e.logoMode === n.LEFT ? "0px" : "8px"
+            },
+            children: [
+              ((d = e.sponsor) == null ? void 0 : d.logo) && e.logoMode === n.LEFT && /* @__PURE__ */ r(U, { children: (t = e.sponsor) == null ? void 0 : t.name }),
+              /* @__PURE__ */ l(j, { children: [
+                /* @__PURE__ */ r(m, { children: "AD" }),
+                /* @__PURE__ */ r(G, { children: "SPONSORED" })
+              ] })
+            ]
+          }
+        )
       ] }),
-      /* @__PURE__ */ d("div", { children: [
-        /* @__PURE__ */ e("div", { children: "AD" }),
-        /* @__PURE__ */ e("div", { children: "SPONSORED" })
-      ] })
+      /* @__PURE__ */ r(H, { onClick: O, children: /* @__PURE__ */ r(W, { name: "icon-cross" }) })
     ] }),
-    /* @__PURE__ */ e("div", { children: (c = (n = r.banner) == null ? void 0 : n.video) != null && c.url ? /* @__PURE__ */ e("video", { src: r.banner.video.url, width: 250, height: 100, children: /* @__PURE__ */ e("source", { type: "video/streamlayer" }) }) : /* @__PURE__ */ e("img", { src: (h = r.banner) == null ? void 0 : h.imageUrl, width: 250, height: 100, alt: "promo" }) }),
-    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("button", { style: { backgroundColor: (t = (a = r.banner) == null ? void 0 : a.ctaButton) == null ? void 0 : t.color }, children: (v = (s = r.banner) == null ? void 0 : s.ctaButton) == null ? void 0 : v.label }) })
+    /* @__PURE__ */ l(w, { children: [
+      ((g = e.sponsor) == null ? void 0 : g.logo) && e.logoMode === n.CENTER && /* @__PURE__ */ r(S, { src: (h = e.sponsor) == null ? void 0 : h.logo, alt: "promo" }),
+      /* @__PURE__ */ l(V, { children: [
+        (b = (i = e.banner) == null ? void 0 : i.video) != null && b.url ? /* @__PURE__ */ r(
+          D,
+          {
+            source: (y = (u = e.banner) == null ? void 0 : u.video) == null ? void 0 : y.url,
+            poster: (f = (x = e.banner) == null ? void 0 : x.video) == null ? void 0 : f.thumbnailUrl,
+            aspectRatio: o ? "1/1" : "16/9"
+          }
+        ) : (p = e.banner) != null && p.imageUrl ? /* @__PURE__ */ r(
+          q,
+          {
+            style: o ? { width: "268px", height: "268px" } : {},
+            src: (A = e.banner) == null ? void 0 : A.imageUrl,
+            alt: "promo"
+          }
+        ) : null,
+        !o && /* @__PURE__ */ l(z, { children: [
+          /* @__PURE__ */ r(J, { children: (C = e.banner) == null ? void 0 : C.title }),
+          /* @__PURE__ */ r(K, { children: (E = e.banner) == null ? void 0 : E.body })
+        ] })
+      ] }),
+      /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ r(
+        X,
+        {
+          href: (T = e.banner) == null ? void 0 : T.url,
+          style: {
+            backgroundColor: ((L = (B = e.banner) == null ? void 0 : B.ctaButton) == null ? void 0 : L.color) || "#009dc4",
+            color: ((v = (M = e.banner) == null ? void 0 : M.ctaButton) == null ? void 0 : v.textColor) || "#fff"
+          },
+          target: "_blank",
+          children: (P = (I = e.banner) == null ? void 0 : I.ctaButton) == null ? void 0 : P.label
+        }
+      ) })
+    ] })
   ] });
 };
 export {
-  b as Overlay
+  re as Overlay
 };

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

@@ -0,0 +1,18 @@
+export declare const Header: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const HeaderContent: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SponsorLogo: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const SponsorName: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const PromoOverlay: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Media: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Text: 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 SponsorText: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ADLogo: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SponsoredText: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & 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 Content: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ActionBtnWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ActionButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLAnchorElement> & import('react').AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;
+export declare const PromoImg: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const Title: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

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

@@ -0,0 +1,95 @@
+import { styled as s } from "@linaria/react";
+import { SvgIcon as o } from "../../icons/index.js";
+const p = /* @__PURE__ */ s("div")({
+  name: "Header",
+  class: "hkzhq2w",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "HeaderContent",
+  class: "hmgz5i",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("img")({
+  name: "SponsorLogo",
+  class: "syxi3jt",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "SponsorName",
+  class: "s149e3gp",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "PromoOverlay",
+  class: "p10toh7",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "Media",
+  class: "m1jyea6t",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("div")({
+  name: "Text",
+  class: "tzpfa3h",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("div")({
+  name: "Description",
+  class: "d1crmu01",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("div")({
+  name: "SponsorText",
+  class: "s1l37r8s",
+  propsAsIs: !1
+}), A = /* @__PURE__ */ s("div")({
+  name: "ADLogo",
+  class: "a1nmch9k",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ s("span")({
+  name: "SponsoredText",
+  class: "s1er0ljd",
+  propsAsIs: !1
+}), v = /* @__PURE__ */ s("div")({
+  name: "CloseIconWrap",
+  class: "cydopmr",
+  propsAsIs: !1
+}), e = () => o, x = /* @__PURE__ */ s(e())({
+  name: "CloseIcon",
+  class: "c1w6nt04",
+  propsAsIs: !0
+}), g = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "c1evcmtq",
+  propsAsIs: !1
+}), S = /* @__PURE__ */ s("div")({
+  name: "ActionBtnWrap",
+  class: "awodx0x",
+  propsAsIs: !1
+}), C = /* @__PURE__ */ s("a")({
+  name: "ActionButton",
+  class: "a1q3n6oi",
+  propsAsIs: !1
+}), T = /* @__PURE__ */ s("img")({
+  name: "PromoImg",
+  class: "p8d4xfk",
+  propsAsIs: !1
+}), h = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "tt6oobh",
+  propsAsIs: !1
+});
+export {
+  A as ADLogo,
+  S as ActionBtnWrap,
+  C as ActionButton,
+  x as CloseIcon,
+  v as CloseIconWrap,
+  g as Content,
+  d as Description,
+  p as Header,
+  t as HeaderContent,
+  m as Media,
+  T as PromoImg,
+  l as PromoOverlay,
+  c as SponsorLogo,
+  r as SponsorName,
+  I as SponsorText,
+  f as SponsoredText,
+  i as Text,
+  h as Title
+};

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

@@ -3,4 +3,5 @@ export declare const Sidebar: React.FC<{
     direction: 'left' | 'right';
     style?: React.CSSProperties;
     className?: string;
+    hiding?: boolean;
 }>;

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

@@ -1,23 +1,25 @@
 import { jsx as r } from "react/jsx-runtime";
-import { styled as n } from "@linaria/react";
-import { SlideIn as t } from "../../slide-in/index.js";
-const a = /* @__PURE__ */ n("div")({
+import { styled as t } from "@linaria/react";
+import { SlideIn as a } from "../../slide-in/index.js";
+const d = /* @__PURE__ */ t("div")({
   name: "SidebarContainer",
   class: "s1abskp8",
   propsAsIs: !1
-}), l = ({
+}), b = ({
   children: e,
   direction: o,
   style: s,
-  className: i
-}) => /* @__PURE__ */ r(t, {
+  className: i,
+  hiding: n
+}) => /* @__PURE__ */ r(a, {
   direction: o,
   style: s,
+  hiding: n,
   className: i,
-  children: /* @__PURE__ */ r(a, {
+  children: /* @__PURE__ */ r(d, {
     children: e
   })
 });
 export {
-  l as Sidebar
+  b as Sidebar
 };

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

@@ -27,6 +27,7 @@ const C = {
         /* @__PURE__ */ t(
           T,
           {
+            "data-testid": "question-type-icon",
             "data-type-trivia": o === r.TRIVIA,
             "data-type-poll": o === r.POLL,
             name: i.iconName

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

@@ -4,9 +4,9 @@ import { QuestionImages as a, QuestionType as o, QuestionStatus as p } from "@st
 import { AnimatedCounter as W } from "../../../animated-counter/index.js";
 import { IconDefault as $, IconContainer as y, IconWrap as F, IconCircle as M, ButtonContainer as z, ButtonPctWrap as G, ButtonPct as H, ButtonBody as J, Title as K, Pts as X, Indicators as Y, CheckIcon as Z, Percentage as _ } from "./styles.js";
 const h = {
-  [a.CENTERED]: (t) => /* @__PURE__ */ e($, { alt: "option-icon", src: t }),
-  [a.TRANSPARENT]: (t) => /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(F, { style: { backgroundImage: `url(${t})` } }) }),
-  [a.ROUNDED]: (t) => /* @__PURE__ */ e(M, { alt: "option-icon", src: t }),
+  [a.CENTERED]: (t) => /* @__PURE__ */ e($, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
+  [a.TRANSPARENT]: (t) => /* @__PURE__ */ e(y, { "data-testid": "vote-icon", children: /* @__PURE__ */ e(F, { style: { backgroundImage: `url(${t})` } }) }),
+  [a.ROUNDED]: (t) => /* @__PURE__ */ e(M, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
   [a.NONE]: () => null,
   [a.UNSET]: () => null
 }, q = ({ questionType: t, hasCorrectAnswer: c, correct: n, youVoted: r, questionVoted: i }) => {
@@ -45,12 +45,12 @@ const h = {
     questionStatus: P,
     isLoading: g,
     questionType: d,
-    correct: k,
-    hasCorrectAnswer: v,
+    correct: v,
+    hasCorrectAnswer: k,
     votedAfterQuestionClosed: x,
     enteredAnActiveQuestion: R,
     marketClosed: I
-  } = t, [L, T] = j(0), m = q(t), B = tt({ questionType: d, questionVoted: s, correct: k, hasCorrectAnswer: v, questionStatus: P }), u = I && d === o.PREDICTION, N = s || u, Q = d === o.PREDICTION && !s && !I, V = s && !E && m !== "incorrect";
+  } = t, [L, T] = j(0), m = q(t), B = tt({ questionType: d, questionVoted: s, correct: v, hasCorrectAnswer: k, questionStatus: P }), u = I && d === o.PREDICTION, N = s || u, Q = d === o.PREDICTION && !s && !I, V = s && !E && m !== "incorrect";
   return U(() => {
     T(0), requestAnimationFrame(() => {
       T(i);

package/lib/ui/icons/index.js

@@ -213,6 +213,7 @@ const d = (C) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24,
     });
   const r = l[C];
   return /* @__PURE__ */ t(r, {
+    "data-testid": "svg-icon",
     style: i,
     className: n,
     ...o

package/lib/ui/slide-in/index.js

@@ -1,29 +1,24 @@
-import { jsx as m } from "react/jsx-runtime";
-import { cx as a } from "@linaria/core";
-import { styled as c } from "@linaria/react";
-const l = /* @__PURE__ */ c("div")({
+import { jsx as e } from "react/jsx-runtime";
+import { cx as m } from "@linaria/core";
+import { styled as f } from "@linaria/react";
+const u = /* @__PURE__ */ f("div")({
   name: "Container",
   class: "c5b6wdg",
   propsAsIs: !1
-}), d = {
-  left: "l1rlj479",
-  right: "r35f1di",
-  top: "tj4471g",
-  bottom: "b12050d8"
-}, f = "h1d5ybek", h = ({
-  children: o,
-  style: i,
-  className: n,
-  enabled: t = !0,
-  hiding: r,
-  direction: s = "left",
-  onAnimationEnd: e
-}) => /* @__PURE__ */ m(l, {
-  style: i,
-  className: a(n, t && d[s], t && r && f),
-  onAnimationEnd: e,
-  children: o
+}), l = "a1rlj479", c = "s35f1di", b = "sj4471g", p = "b12050d8", A = "b1d5ybek", d = (n) => n === "left" || n === "right" ? c : p, g = (n) => n === "left" || n === "right" ? b : A, h = (n) => n === "left" ? "avdxyl3" : n === "right" ? "a1bisd08" : n === "top" ? "a1u9y2aj" : "a1qqaks", k = ({
+  children: n,
+  style: a,
+  className: i,
+  enabled: r = !0,
+  hiding: s,
+  direction: t = "left",
+  onAnimationEnd: o
+}) => /* @__PURE__ */ e(u, {
+  style: a,
+  className: m(i, l, h(t), r && !s && d(t), r && s && g(t)),
+  onAnimationEnd: o,
+  children: n
 });
 export {
-  h as SlideIn
+  k as SlideIn
 };

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

@@ -0,0 +1 @@
+export declare const ThemeColorsAdvertisement: () => import("react/jsx-runtime").JSX.Element[];

package/lib/ui/theme/ThemeColorsAdvertisement.js

@@ -0,0 +1,15 @@
+import { jsx as t } from "react/jsx-runtime";
+import { ColorItem as e } from "@storybook/blocks";
+import { COLORS_ADVERTISEMENT as r } from "./constants.js";
+const s = Object.keys(r), i = () => s.map((o) => /* @__PURE__ */ t(
+  e,
+  {
+    title: o,
+    subtitle: `--color-${o.toLowerCase().replaceAll("_", "-")}`,
+    colors: [r[o]]
+  },
+  o
+));
+export {
+  i as ThemeColorsAdvertisement
+};

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

@@ -21,6 +21,16 @@ export declare const COLORS: {
     NEUTRALS_GRAY7: string;
     NEUTRALS_GRAY9: string;
 };
+export declare const COLORS_ADVERTISEMENT: {
+    BG_PRIMARY: string;
+    BG_SECONDARY: string;
+    BG_SECONDARY1: string;
+    BORDER_PRIMARY: string;
+    TEXT_PRIMARY: string;
+    TEXT_SECONDARY: string;
+    TEXT_SECONDARY1: string;
+    WHITE: string;
+};
 export declare const TIMER_COLORS: string[];
 export declare const TIMER_GREEN = "#cee5de";
 export declare const TIMER_RED = "#f9d6d8";
@@ -45,3 +55,4 @@ export declare const ORIENTATION: {
     portrait: string;
 };
 export declare const colors: string;
+export declare const colorsAdvertisement: string;

package/lib/ui/theme/constants.js

@@ -1,4 +1,4 @@
-const F = {
+const e = {
   BG_TRANSPARENT: "rgba(0,0,0, .8)",
   BLUE_QUESTION_ACTION_BTN: "#1589ee",
   WHITE: "#FFFFFF",
@@ -20,33 +20,47 @@ const F = {
   NEUTRALS_GRAY6: "#888B8D",
   NEUTRALS_GRAY7: "#6B6F73",
   NEUTRALS_GRAY9: "#25282A"
-}, T = ["#107D57", "#DF2F3B", "#DF2F3B", "#E8E8E8"], _ = "#cee5de", e = "#f9d6d8", N = "#E8E8E8", S = {
+}, T = {
+  BG_PRIMARY: "#13212b",
+  BG_SECONDARY: "#152430",
+  BG_SECONDARY1: "#435059",
+  BORDER_PRIMARY: "rgba(255, 255, 255, 0.1)",
+  TEXT_PRIMARY: "#f9f9f9",
+  TEXT_SECONDARY: "rgba(255, 255, 255, 0.8)",
+  TEXT_SECONDARY1: "#878787",
+  WHITE: "#fff"
+}, _ = ["#107D57", "#DF2F3B", "#DF2F3B", "#E8E8E8"], F = "#cee5de", r = "#f9d6d8", S = "#E8E8E8", s = {
   REGULAR: "'SF Pro Text', Arial, Helvetica, sans-serif",
   SERIF: "'SF Pro Display', Arial, Helvetica, sans-serif",
   COLOR: "#fff",
   WEIGHT_DEFAULT: "500"
-}, s = {
+}, t = {
   xs: 324,
   sm: 576,
   md: 768,
   lg: 992,
   xl: 1200,
   xxl: 1440
-}, t = {
+}, N = {
   landscape: "landscape",
   portrait: "portrait"
-}, o = Object.entries(F).reduce((R, [E, A]) => `
+}, o = Object.entries(e).reduce((R, [E, A]) => `
     ${R}
     --color-${E.toLowerCase().replaceAll("_", "-")}: ${A};
+  `, ""), c = Object.entries(T).reduce((R, [E, A]) => `
+    ${R}
+    --color-adv-${E.toLowerCase().replaceAll("_", "-")}: ${A};
   `, "");
 export {
-  s as BREAKPOINTS,
-  F as COLORS,
-  S as FONT,
-  t as ORIENTATION,
-  T as TIMER_COLORS,
-  N as TIMER_GRAY,
-  _ as TIMER_GREEN,
-  e as TIMER_RED,
-  o as colors
+  t as BREAKPOINTS,
+  e as COLORS,
+  T as COLORS_ADVERTISEMENT,
+  s as FONT,
+  N as ORIENTATION,
+  _ as TIMER_COLORS,
+  S as TIMER_GRAY,
+  F as TIMER_GREEN,
+  r as TIMER_RED,
+  o as colors,
+  c as colorsAdvertisement
 };

package/lib/ui/theme/theme.js

@@ -1,7 +1,8 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { breakpoints as n } from "./breakpoints.js";
-import { colors as h, FONT as t } from "./constants.js";
+import { colors as s, colorsAdvertisement as h, FONT as t } from "./constants.js";
 const l = `
+  ${s}
   ${h}
   --font-family: ${t.REGULAR};
   --font-regular: ${t.REGULAR};
@@ -13,6 +14,8 @@ const l = `
   --header-height: 68px;
   --watch-live-header: 0px;
   --animation-duration: 0.5s;
+  --promo-animation-duration: 0.5s;
+  --promo-animation-function: ease-in;
   --animation-function: ease;
   --container-padding: 16px;
   --border-radius: 8px;
@@ -28,7 +31,7 @@ const l = `
   ${n.intermediate("xl", "lg")`
     --header-offset: 0px;
   `}
-`, p = "StreamLayerCSSReset", m = "ttkj0ah", x = () => /* @__PURE__ */ e("table", {
+`, f = "StreamLayerCSSReset", x = "ttkj0ah", u = () => /* @__PURE__ */ e("table", {
   children: /* @__PURE__ */ r("table", {
     children: [/* @__PURE__ */ e("thead", {
       children: /* @__PURE__ */ r("tr", {
@@ -39,11 +42,11 @@ const l = `
         })]
       })
     }), /* @__PURE__ */ e("tbody", {
-      children: l.split(";").map((a) => {
-        const i = a.trim(), [o, d] = i.split(":");
+      children: l.split(";").map((o) => {
+        const i = o.trim(), [a, d] = i.split(":");
         return /* @__PURE__ */ r("tr", {
           children: [/* @__PURE__ */ e("td", {
-            children: o
+            children: a
           }), /* @__PURE__ */ e("td", {
             children: d
           })]
@@ -53,8 +56,8 @@ const l = `
   })
 });
 export {
-  x as ThemeVariables,
-  p as resetCss,
-  m as theme,
+  u as ThemeVariables,
+  f as resetCss,
+  x as theme,
   l as themeStr
 };

package/lib/ui/video-player/index.d.ts

@@ -5,6 +5,7 @@ export type VideoPlayerProps = {
     poster?: string;
     source?: string;
     controlVideo?: (props: ControlVideoProps) => void;
+    aspectRatio?: string;
 };
 export declare const pauseAllVideos: () => void;
 /**