@streamlayer/react-ui 1.2.2 → 1.3.0

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

@@ -1,5 +1,4 @@
 import { Advertisement } from '@streamlayer/feature-gamification';
-
 export declare const AdvertisementUI: React.FC<{
     advertisement: Advertisement & {
         data: Exclude<Advertisement['data'], undefined>;

package/lib/ui/advertisement/index.js

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

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

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

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

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

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

@@ -1,74 +1,77 @@
-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",
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { cx as R } from "@linaria/core";
+import { eventBus as U } from "@streamlayer/sdk-web-interfaces";
+import { PromotionType as D, PromotionLogoMode as n } from "@streamlayer/sdk-web-types";
+import { VideoPlayer as j } from "../../video-player/index.js";
+import { PromoOverlay as G, Header as H, HeaderContent as W, headerContentShift as V, SponsorLogo as F, Sponsor as q, SponsorName as w, SponsorText as z, ADLogo as J, SponsoredText as K, CloseIconWrap as Q, CloseIcon as X, Media as Y, shiftMedia as Z, Content as _, PromoImg as $, Title as ee, hideOnMobile as re, Description as ae, ActionBtnWrap as ne, ActionButton as le } from "./styles.js";
+import { OverlayContainer as ge } from "./styles.js";
+const he = ({ promotion: e, promotionId: t, onClose: k }) => {
+  var s, c, d, i, h, b, y, g, f, p, u, v, m, C, x, M, A, B, N, P, T, E, I, L, S, O;
+  const l = e.type === D.INGAME_IAB11_LBAR || e.type === D.INGAME_IAB11, o = ((s = e.sponsor) == null ? void 0 : s.logo) && e.logoMode === n.CENTER;
+  return /* @__PURE__ */ a(G, { className: "PromoOverlay", children: [
+    /* @__PURE__ */ a(H, { children: [
+      /* @__PURE__ */ a(W, { className: R(!o && V), children: [
+        ((c = e.sponsor) == null ? void 0 : c.logo) && e.logoMode === n.LEFT && /* @__PURE__ */ r(F, { src: (d = e.sponsor) == null ? void 0 : d.logo, alt: "promo" }),
+        /* @__PURE__ */ a(
+          q,
           {
             style: {
-              paddingLeft: (c = e.sponsor) != null && c.logo && e.logoMode === n.LEFT ? "0px" : "8px"
+              paddingLeft: (i = e.sponsor) != null && i.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" })
+              ((h = e.sponsor) == null ? void 0 : h.logo) && e.logoMode === n.LEFT && /* @__PURE__ */ r(w, { children: (b = e.sponsor) == null ? void 0 : b.name }),
+              /* @__PURE__ */ a(z, { children: [
+                /* @__PURE__ */ r(J, { children: "AD" }),
+                /* @__PURE__ */ r(K, { children: "SPONSORED" })
               ] })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ r(H, { onClick: O, children: /* @__PURE__ */ r(W, { name: "icon-cross" }) })
+      /* @__PURE__ */ r(Q, { onClick: k, children: /* @__PURE__ */ r(X, { name: "icon-cross" }) })
     ] }),
-    /* @__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,
+    /* @__PURE__ */ a(Y, { children: [
+      o && /* @__PURE__ */ r(F, { className: Z, src: (y = e.sponsor) == null ? void 0 : y.logo, alt: "promo" }),
+      /* @__PURE__ */ r(_, { children: (f = (g = e.banner) == null ? void 0 : g.video) != null && f.url ? /* @__PURE__ */ r(
+        j,
         {
-          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
+          source: (u = (p = e.banner) == null ? void 0 : p.video) == null ? void 0 : u.url,
+          poster: (m = (v = e.banner) == null ? void 0 : v.video) == null ? void 0 : m.thumbnailUrl,
+          aspectRatio: l ? "1/1" : "16/9",
+          onPlay: () => {
+            U.emit("advertisement", {
+              action: "videoPlay",
+              payload: {
+                advertisementId: t,
+                advertisementType: e.type
+              }
+            });
+          }
         }
-      ) })
-    ] })
+      ) : (C = e.banner) != null && C.imageUrl ? /* @__PURE__ */ r($, { style: l ? { aspectRatio: "1/1" } : {}, src: (x = e.banner) == null ? void 0 : x.imageUrl, alt: "promo" }) : null }),
+      !l && /* @__PURE__ */ a(_, { children: [
+        ((M = e.banner) == null ? void 0 : M.title) && /* @__PURE__ */ r(ee, { className: R(o && re), children: (A = e.banner) == null ? void 0 : A.title }),
+        ((B = e.banner) == null ? void 0 : B.body) && /* @__PURE__ */ r(ae, { children: (N = e.banner) == null ? void 0 : N.body })
+      ] })
+    ] }),
+    /* @__PURE__ */ r(ne, { children: /* @__PURE__ */ r(
+      le,
+      {
+        href: (P = e.banner) == null ? void 0 : P.url,
+        style: {
+          backgroundColor: ((E = (T = e.banner) == null ? void 0 : T.ctaButton) == null ? void 0 : E.color) || "#009dc4",
+          color: ((L = (I = e.banner) == null ? void 0 : I.ctaButton) == null ? void 0 : L.textColor) || "#fff"
+        },
+        "data-analytics": "button",
+        "data-promo-id": t,
+        "data-promo-type": e.type,
+        target: "_blank",
+        children: (O = (S = e.banner) == null ? void 0 : S.ctaButton) == null ? void 0 : O.label
+      }
+    ) })
   ] });
 };
 export {
-  re as Overlay
+  he as Overlay,
+  ge as OverlayContainer
 };

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

@@ -1,18 +1,22 @@
+export declare const OverlayContainer: 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 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 headerContentShift: import('@linaria/core').LinariaClassName;
 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 PromoImg: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const shiftMedia: import('@linaria/core').LinariaClassName;
+export declare const Content: 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 Sponsor: 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>>;
+export declare const hideOnMobile: import('@linaria/core').LinariaClassName;

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

@@ -1,95 +1,103 @@
 import { styled as s } from "@linaria/react";
 import { SvgIcon as o } from "../../icons/index.js";
-const p = /* @__PURE__ */ s("div")({
+const t = /* @__PURE__ */ s("div")({
+  name: "OverlayContainer",
+  class: "okzhq2w",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "PromoOverlay",
+  class: "pmgz5i",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
   name: "Header",
-  class: "hkzhq2w",
+  class: "hyxi3jt",
   propsAsIs: !1
-}), t = /* @__PURE__ */ s("div")({
+}), c = /* @__PURE__ */ s("div")({
   name: "HeaderContent",
-  class: "hmgz5i",
+  class: "h149e3gp",
   propsAsIs: !1
-}), c = /* @__PURE__ */ s("img")({
+}), l = "h10toh7", i = /* @__PURE__ */ s("img")({
   name: "SponsorLogo",
-  class: "syxi3jt",
+  class: "s1jyea6t",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("div")({
+}), m = /* @__PURE__ */ s("div")({
   name: "SponsorName",
-  class: "s149e3gp",
-  propsAsIs: !1
-}), l = /* @__PURE__ */ s("div")({
-  name: "PromoOverlay",
-  class: "p10toh7",
+  class: "szpfa3h",
   propsAsIs: !1
-}), m = /* @__PURE__ */ s("div")({
+}), d = /* @__PURE__ */ s("div")({
   name: "Media",
-  class: "m1jyea6t",
+  class: "m1crmu01",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("div")({
-  name: "Text",
-  class: "tzpfa3h",
+}), I = /* @__PURE__ */ s("img")({
+  name: "PromoImg",
+  class: "p1l37r8s",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("div")({
+}), f = "s1nmch9k", A = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "c1er0ljd",
+  propsAsIs: !1
+}), v = /* @__PURE__ */ s("div")({
   name: "Description",
-  class: "d1crmu01",
+  class: "dydopmr",
   propsAsIs: !1
-}), I = /* @__PURE__ */ s("div")({
+}), g = /* @__PURE__ */ s("div")({
+  name: "Sponsor",
+  class: "s1w6nt04",
+  propsAsIs: !1
+}), h = /* @__PURE__ */ s("div")({
   name: "SponsorText",
-  class: "s1l37r8s",
+  class: "s1evcmtq",
   propsAsIs: !1
-}), A = /* @__PURE__ */ s("div")({
+}), S = /* @__PURE__ */ s("div")({
   name: "ADLogo",
-  class: "a1nmch9k",
+  class: "awodx0x",
   propsAsIs: !1
-}), f = /* @__PURE__ */ s("span")({
+}), x = /* @__PURE__ */ s("span")({
   name: "SponsoredText",
-  class: "s1er0ljd",
+  class: "s1q3n6oi",
   propsAsIs: !1
-}), v = /* @__PURE__ */ s("div")({
+}), C = /* @__PURE__ */ s("div")({
   name: "CloseIconWrap",
-  class: "cydopmr",
+  class: "c8d4xfk",
   propsAsIs: !1
-}), e = () => o, x = /* @__PURE__ */ s(e())({
+}), e = () => o, y = /* @__PURE__ */ s(e())({
   name: "CloseIcon",
-  class: "c1w6nt04",
+  class: "ct6oobh",
   propsAsIs: !0
-}), g = /* @__PURE__ */ s("div")({
-  name: "Content",
-  class: "c1evcmtq",
-  propsAsIs: !1
-}), S = /* @__PURE__ */ s("div")({
+}), T = /* @__PURE__ */ s("div")({
   name: "ActionBtnWrap",
-  class: "awodx0x",
+  class: "a1gyg7tt",
   propsAsIs: !1
-}), C = /* @__PURE__ */ s("a")({
+}), u = /* @__PURE__ */ s("a")({
   name: "ActionButton",
-  class: "a1q3n6oi",
+  class: "a17rwbtk",
   propsAsIs: !1
-}), T = /* @__PURE__ */ s("img")({
-  name: "PromoImg",
-  class: "p8d4xfk",
-  propsAsIs: !1
-}), h = /* @__PURE__ */ s("div")({
+}), w = /* @__PURE__ */ s("div")({
   name: "Title",
-  class: "tt6oobh",
+  class: "t3vxzaw",
   propsAsIs: !1
-});
+}), O = "h10f3u0j";
 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
+  S as ADLogo,
+  T as ActionBtnWrap,
+  u as ActionButton,
+  y as CloseIcon,
+  C as CloseIconWrap,
+  A as Content,
+  v as Description,
+  r as Header,
+  c as HeaderContent,
+  d as Media,
+  t as OverlayContainer,
+  I as PromoImg,
+  p as PromoOverlay,
+  g as Sponsor,
+  i as SponsorLogo,
+  m as SponsorName,
+  h as SponsorText,
+  x as SponsoredText,
+  w as Title,
+  l as headerContentShift,
+  O as hideOnMobile,
+  f as shiftMedia
 };

package/lib/ui/animated-counter/index.d.ts

@@ -1,5 +1,4 @@
 import { CountUpProps } from 'react-countup';
-
 export declare const AnimatedCounter: React.FC<Omit<CountUpProps, 'end' | 'start'> & {
     value?: number;
 }>;

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

@@ -1,6 +1,5 @@
 import { QuestionType } from '@streamlayer/sdk-web-types';
 import { icons } from '../icons';
-
 export declare const QuestionTypeData: Record<QuestionType, {
     label: string;
     iconName: keyof typeof icons;

package/lib/ui/gamification/detail/header/index.d.ts

@@ -1,5 +1,4 @@
 import { QuestionType } from '@streamlayer/sdk-web-types';
-
 interface VoteHeaderProps {
     type?: QuestionType;
     close: () => void;

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

@@ -1,5 +1,4 @@
 import { QuestionImages } from '@streamlayer/sdk-web-types';
-
 type InsightProps = {
     image?: string;
     imageMode: QuestionImages;

package/lib/ui/gamification/insight-list/index.d.ts

@@ -1,5 +1,4 @@
 import { QuestionImages } from '@streamlayer/sdk-web-types';
-
 interface InsightListProps {
     insights?: Array<{
         image?: string;

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

@@ -1,6 +1,5 @@
 import { ListProps } from 'react-window';
 import { LeaderboardItemProps } from './list-item';
-
 type LeaderboardListProps = {
     items: Omit<LeaderboardItemProps, 'openItemDetail'>[];
     currentUserId?: string;

package/lib/ui/gamification/leaderboard/list-item/index.d.ts

@@ -1,5 +1,4 @@
 import { LeaderboardItem as ILeaderboardItem } from '@streamlayer/sdk-web-types';
-
 export type LeaderboardItemProps = Partial<ILeaderboardItem> & {
     userId: string;
     isCurrentUser?: boolean;

package/lib/ui/gamification/leaderboard/static.d.ts

@@ -1,7 +1,6 @@
 import { ScrollNodeRef } from '../../../app/masters';
 import { ScrollStore } from '../../../app/useSdkScroll';
 import { LeaderboardItemProps } from './list-item';
-
 type LeaderboardListProps = {
     items: Omit<LeaderboardItemProps, 'openItemDetail'>[];
     currentUserId?: string;

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

@@ -3,7 +3,6 @@ import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 import { OnboardingStep } from './slides/onboarding-instructions';
 import { OnboardingInviteCardProps } from './slides/onboarding-invite-card';
 import { OnboardingRule } from './slides/onboarding-rules';
-
 type OnboardingType = OnboardingInviteCardProps & {
     gamification: Gamification;
     sdk: StreamLayerSDK;

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/index.d.ts

@@ -1,5 +1,4 @@
 import { ReactElement } from 'react';
-
 type OnboardingInstructionsProps = {
     loading: boolean;
     steps: OnboardingStep[];

package/lib/ui/gamification/onboarding/slides/onboarding-invite-card/index.d.ts

@@ -1,5 +1,4 @@
 import { icons } from '../../../../icons';
-
 export type OnboardingInviteCardProps = {
     inviteLink?: string;
     inviteCardTitle?: string;

package/lib/ui/gamification/onboarding/slides/onboarding-rules/index.d.ts

@@ -1,5 +1,4 @@
 import { icons } from '../../../../icons';
-
 type OnboardingRulesProps = {
     rules?: OnboardingRule[];
     rulesTitle?: string;

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

@@ -1,4 +1,3 @@
 import { PickHistory } from '@streamlayer/sdk-web-types';
-
 export declare const QuestionSkeleton: React.FC;
 export declare const Question: React.FC<PickHistory>;

package/lib/ui/gamification/question/insight/index.d.ts

@@ -1,6 +1,5 @@
 import { InsightContentProps } from '../../../questions/insight';
 import { VideoPlayerProps } from '../../../video-player';
-
 type InsightProps = InsightContentProps & {
     controlVideo: VideoPlayerProps['controlVideo'];
 };

package/lib/ui/gamification/question/list/index.d.ts

@@ -1,6 +1,5 @@
 import { Gamification } from '@streamlayer/feature-gamification';
 import { VideoPlayerProps } from '../../../video-player';
-
 type FeedItem = Exclude<Awaited<ReturnType<Exclude<Gamification['feedList'], undefined>['getValue']>>, undefined>;
 interface QuestionListProps {
     questions: FeedItem;

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

@@ -1,4 +1,3 @@
 import { Notification as NotificationProps } from '@streamlayer/sdk-web-notifications';
 import { VideoPlayerProps } from '../../../video-player';
-
 export declare const Notification: React.FC<NotificationProps & Pick<VideoPlayerProps, 'controlVideo'>>;

package/lib/ui/gamification/question/notification/insight/index.d.ts

@@ -1,7 +1,6 @@
 import { Notification } from '@streamlayer/sdk-web-notifications';
 import { InsightHistory, InstantView } from '@streamlayer/sdk-web-types';
 import { VideoPlayerProps } from '../../../../video-player';
-
 export type InsightProps = InstantView & {
     imageMode?: InsightHistory['imageMode'];
     action: Notification['action'];

package/lib/ui/gamification/question/notification/prediction-result/animation-lines/styles.d.ts

@@ -3,70 +3,70 @@ export declare const BGLineBase: import('@linaria/react').StyledComponent<import
 export declare const BGOneLineOne: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import('react').ElementType;
+    as?: React.ElementType;
 }>;
 export declare const BGOneLineTwo: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import('react').ElementType;
+    as?: React.ElementType;
 }>;
 export declare const BGOneLineThree: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import('react').ElementType;
+    as?: React.ElementType;
 }>;
 export declare const BGTwoLineOne: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import('react').ElementType;
+    as?: React.ElementType;
 }>;
 export declare const BGTwoLineTwo: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import('react').ElementType;
+    as?: React.ElementType;
 }>;
 export declare const BGTwoLineThree: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import('react').ElementType;
+    as?: React.ElementType;
 }>;
 export declare const BGThreeLineOne: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import('react').ElementType;
+    as?: React.ElementType;
 }>;
 export declare const BGThreeLineTwo: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import('react').ElementType;
+    as?: React.ElementType;
 }>;
 export declare const BGThreeLineThree: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import('react').ElementType;
+    as?: React.ElementType;
 }>;
 export declare const BGThreeLineFour: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import('react').ElementType;
+    as?: React.ElementType;
 }>;
 export declare const BGFourLineOne: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import('react').ElementType;
+    as?: React.ElementType;
 }>;
 export declare const BGFourLineTwo: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import('react').ElementType;
+    as?: React.ElementType;
 }>;
 export declare const BGFourLineThree: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import('react').ElementType;
+    as?: React.ElementType;
 }>;
 export declare const BGFourLineFour: {
     __wyw_meta: unknown;
 } & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
-    as?: import('react').ElementType;
+    as?: React.ElementType;
 }>;

package/lib/ui/gamification/question/notification/prediction-result/index.d.ts

@@ -1,5 +1,4 @@
 import { NotificationData } from '@streamlayer/sdk-web-notifications';
-
 export declare const PredictionResult: React.FC<NotificationData['question'] & {
     close?: () => void;
     saveHeight: (h: number) => void;