@streamlayer/react-ui 1.22.6 → 1.23.0

package/lib/hooks/analytics.js

@@ -1,25 +1,28 @@
 import { useEffect as c } from "react";
-import { eventBus as i } from "@streamlayer/sdk-web-interfaces";
+import { eventBus as a } from "@streamlayer/sdk-web-interfaces";
 import { BREAKPOINTS as s } from "../ui/theme/constants.js";
-const f = (t) => [(r) => (...n) => (t && i.emit(t == null ? void 0 : t.type, t), r ? r(n) : null)], v = (t) => {
+const f = (t) => [(r) => (...n) => (t && a.emit(t == null ? void 0 : t.type, t), r ? r(n) : null)], A = (t) => {
   const e = t.target;
-  e instanceof HTMLAnchorElement && e.target === "_blank" && e.getAttribute("data-analytics") === "web-link" && i.emit("poll", {
+  e instanceof HTMLAnchorElement && e.target === "_blank" && e.getAttribute("data-a") === "web-link" && a.emit("poll", {
     action: "navigated",
     payload: {}
+  }), e instanceof Element && e.getAttribute("data-a") === "intr" && a.emit("interactions", {
+    action: "tap",
+    payload: {}
   });
-}, y = (t, e) => {
+}, b = (t, e) => {
   const r = window.innerWidth < s.xl;
   c(() => {
-    const n = r && e.useDomNode ? document : t.current, a = (l) => {
+    const n = r && e.useDomNode ? document : t.current, i = (l) => {
       e.listener(l, t);
     };
-    return e.enabled && (n == null || n.addEventListener(e.event, a)), () => {
-      n == null || n.removeEventListener(e.event, a);
+    return e.enabled && (n == null || n.addEventListener(e.event, i)), () => {
+      n == null || n.removeEventListener(e.event, i);
     };
   }, [r, e.enabled, e.listener]);
 };
 export {
-  v as newTabLinkListener,
+  A as newTabLinkListener,
   f as useAnalyticsHandle,
-  y as useAnalyticsListener
+  b as useAnalyticsListener
 };

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

@@ -1,7 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
 import { SlideIn as o } from "../../slide-in/index.js";
 import { BannerContainer as m, BannerLink as s } from "./styles.js";
-const u = ({ promotion: n, promotionId: i, hiding: l, direction: d = "bottom" }) => {
+const B = ({ promotion: n, promotionId: i, hiding: l, direction: d = "bottom" }) => {
   var e, t;
   if (!((e = n.additionalBanner) != null && e.imageUrl))
     return null;
@@ -18,11 +18,11 @@ const u = ({ promotion: n, promotionId: i, hiding: l, direction: d = "bottom" })
       },
       "data-promo-id": i,
       "data-promo-type": n.type,
-      "data-analytics": "banner",
+      "data-a": "banner",
       target: "_blank"
     }
   ) }) });
 };
 export {
-  u as Banner
+  B as Banner
 };

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

@@ -4,9 +4,9 @@ import { useRef as L } from "react";
 import { useStore as T } from "@streamlayer/react-polyfills";
 import { PromotionLogoMode as V } from "@streamlayer/sdk-web-types";
 import { PromoOverlay as W, Header as G, HeaderContent as U, headerContentShift as _, ADLogo as $, Media as q, ActionBtnWrap as w, ActionButton as z } from "../styles.js";
-import { CloseButton as y } from "../../../close-btn/index.js";
+import { CloseButton as C } from "../../../close-btn/index.js";
 import { Controls as F } from "./controls.js";
-import { ControlsContainer as J, mediaStyle as C, mediaVisible as g, mediaHidden as P, Container as K, WhyThisAd as Q, VideoControls as X, MuteIcon as Y, PauseIcon as Z } from "./styles.js";
+import { ControlsContainer as J, mediaStyle as y, mediaVisible as g, mediaHidden as P, Container as K, WhyThisAd as Q, VideoControls as X, MuteIcon as Y, PauseIcon as Z } from "./styles.js";
 import { useGAMPlayer as oo } from "./vast-player/useGAMPlayer.js";
 const uo = ({
   promotion: e,
@@ -38,7 +38,7 @@ const uo = ({
       /* @__PURE__ */ a(J, { children: [
         /* @__PURE__ */ o(F, { time: B, adCount: S, adPosition: A }),
         !!c && t && /* @__PURE__ */ o(
-          y,
+          C,
           {
             timerClassName: "SkipTimerCount",
             className: "ClosePromoIcon",
@@ -51,7 +51,7 @@ const uo = ({
           }
         ),
         N && /* @__PURE__ */ o(
-          y,
+          C,
           {
             className: "ClosePromoIcon",
             close: () => {
@@ -61,7 +61,7 @@ const uo = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ o(q, { className: n(C, t && g, !t && P), children: /* @__PURE__ */ a(K, { ref: l, children: [
+    /* @__PURE__ */ o(q, { className: n(y, t && g, !t && P), children: /* @__PURE__ */ a(K, { ref: l, children: [
       r && /* @__PURE__ */ o(Q, { whyThisAd: r }),
       /* @__PURE__ */ a(
         X,
@@ -74,7 +74,7 @@ const uo = ({
         }
       )
     ] }) }),
-    R && /* @__PURE__ */ o(w, { className: n(C, t && g, !t && P), children: /* @__PURE__ */ o(
+    R && /* @__PURE__ */ o(w, { className: n(y, t && g, !t && P), children: /* @__PURE__ */ o(
       z,
       {
         as: "button",
@@ -83,7 +83,7 @@ const uo = ({
           backgroundColor: ((p = (u = e.banner) == null ? void 0 : u.ctaButton) == null ? void 0 : p.color) || "#009dc4",
           color: ((h = (f = e.banner) == null ? void 0 : f.ctaButton) == null ? void 0 : h.textColor) || "#fff"
         },
-        "data-analytics": "button",
+        "data-a": "button",
         "data-promo-id": k,
         "data-promo-type": e.type,
         target: "_blank",

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

@@ -6,7 +6,7 @@ import { PromotionType as K, PromotionLogoMode as s, AutoPlayVideo as ro, Promot
 import { CloseButton as no } from "../../close-btn/index.js";
 import { VideoPlayer as ao } from "../../video-player/index.js";
 import { ExternalAdOverlay as lo } from "./externalAd/index.js";
-import { PromoOverlay as io, Header as so, HeaderContent as mo, headerContentShift as co, SponsorLogo as Q, Sponsor as po, SponsorName as yo, SponsorText as uo, ADLogo as fo, SponsoredText as bo, Media as ho, shiftMedia as Ao, Content as X, PromoImg as To, Title as No, hideOnMobile as Po, Description as vo, ActionBtnWrap as xo, ActionButton as go } from "./styles.js";
+import { PromoOverlay as io, Header as so, HeaderContent as mo, headerContentShift as po, SponsorLogo as Q, Sponsor as co, SponsorName as yo, SponsorText as uo, ADLogo as fo, SponsoredText as bo, Media as ho, shiftMedia as Ao, Content as X, PromoImg as To, Title as No, hideOnMobile as Po, Description as vo, ActionBtnWrap as xo, ActionButton as go } from "./styles.js";
 import { OverlayContainer as ko } from "./styles.js";
 const Ro = (f) => {
   var A, T, N, P, v, x, g, B, C, E, O, L, M, S, I, D, R, U, _, k, F, V, j, G, H, w, W, $, q, z;
@@ -21,7 +21,7 @@ const Ro = (f) => {
     onClose: oo,
     markAsViewed: m,
     externalAd: b
-  } = f, c = o.type === K.INGAME_IAB11_LBAR || o.type === K.INGAME_IAB11, p = ((A = o.sponsor) == null ? void 0 : A.logo) && o.logoMode === s.CENTER, h = !!((N = (T = o.banner) == null ? void 0 : T.video) != null && N.url), i = o.autoPlayVideo === ro.ENABLED;
+  } = f, p = o.type === K.INGAME_IAB11_LBAR || o.type === K.INGAME_IAB11, c = ((A = o.sponsor) == null ? void 0 : A.logo) && o.logoMode === s.CENTER, h = !!((N = (T = o.banner) == null ? void 0 : T.video) != null && N.url), i = o.autoPlayVideo === ro.ENABLED;
   if (u(() => {
     r == null || r(h || i), d == null || d();
   }, []), u(() => {
@@ -35,10 +35,10 @@ const Ro = (f) => {
   let y = !0;
   return h && (!Y || !i ? y = !0 : y = !1), /* @__PURE__ */ t(io, { className: "PromoOverlay", children: [
     /* @__PURE__ */ t(so, { children: [
-      /* @__PURE__ */ t(mo, { className: J(!p && co), children: [
+      /* @__PURE__ */ t(mo, { className: J(!c && po), children: [
         ((v = o.sponsor) == null ? void 0 : v.logo) && o.logoMode === s.LEFT && /* @__PURE__ */ e(Q, { className: "PromoSponsorLogo", src: (x = o.sponsor) == null ? void 0 : x.logo, alt: "promo" }),
         /* @__PURE__ */ t(
-          po,
+          co,
           {
             style: {
               paddingLeft: (g = o.sponsor) != null && g.logo && o.logoMode === s.LEFT ? "0px" : "8px"
@@ -65,13 +65,13 @@ const Ro = (f) => {
       )
     ] }),
     /* @__PURE__ */ t(ho, { children: [
-      p && /* @__PURE__ */ e(Q, { className: Ao, src: (L = o.sponsor) == null ? void 0 : L.logo, alt: "promo" }),
+      c && /* @__PURE__ */ e(Q, { className: Ao, src: (L = o.sponsor) == null ? void 0 : L.logo, alt: "promo" }),
       /* @__PURE__ */ e(X, { children: (S = (M = o.banner) == null ? void 0 : M.video) != null && S.url ? /* @__PURE__ */ e(
         ao,
         {
           source: (D = (I = o.banner) == null ? void 0 : I.video) == null ? void 0 : D.url,
           poster: (U = (R = o.banner) == null ? void 0 : R.video) == null ? void 0 : U.thumbnailUrl,
-          aspectRatio: c ? "1/1" : "16/9",
+          aspectRatio: p ? "1/1" : "16/9",
           onPause: () => {
             i && (r == null || r(!0));
           },
@@ -87,9 +87,9 @@ const Ro = (f) => {
           controlVideo: n,
           autoPlay: i
         }
-      ) : (_ = o.banner) != null && _.imageUrl ? /* @__PURE__ */ e(To, { style: c ? { aspectRatio: "1/1" } : {}, src: (k = o.banner) == null ? void 0 : k.imageUrl, alt: "promo" }) : null }),
-      !c && /* @__PURE__ */ t(X, { children: [
-        ((F = o.banner) == null ? void 0 : F.title) && /* @__PURE__ */ e(No, { className: J("AdvTitle", p && Po), children: (V = o.banner) == null ? void 0 : V.title }),
+      ) : (_ = o.banner) != null && _.imageUrl ? /* @__PURE__ */ e(To, { style: p ? { aspectRatio: "1/1" } : {}, src: (k = o.banner) == null ? void 0 : k.imageUrl, alt: "promo" }) : null }),
+      !p && /* @__PURE__ */ t(X, { children: [
+        ((F = o.banner) == null ? void 0 : F.title) && /* @__PURE__ */ e(No, { className: J("AdvTitle", c && Po), children: (V = o.banner) == null ? void 0 : V.title }),
         ((j = o.banner) == null ? void 0 : j.body) && /* @__PURE__ */ e(vo, { className: "AdvDescription", children: (G = o.banner) == null ? void 0 : G.body })
       ] })
     ] }),
@@ -101,7 +101,7 @@ const Ro = (f) => {
           backgroundColor: ((w = (H = o.banner) == null ? void 0 : H.ctaButton) == null ? void 0 : w.color) || "#009dc4",
           color: (($ = (W = o.banner) == null ? void 0 : W.ctaButton) == null ? void 0 : $.textColor) || "#fff"
         },
-        "data-analytics": "button",
+        "data-a": "button",
         "data-promo-id": l,
         "data-promo-type": o.type,
         target: "_blank",

package/lib/ui/button/index.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { SButton as m, ButtonLabel as e } from "./styles.js";
-const B = ({ disabled: r, variant: o = "primary", onClick: n, children: a, ...i }) => /* @__PURE__ */ t(m, { onClick: n, disabled: r, "data-variant": o, ...i, children: /* @__PURE__ */ t(e, { children: a }) });
+const d = ({ disabled: r, variant: a = "primary", onClick: o, children: n, ...i }) => /* @__PURE__ */ t(m, { "data-a": "intr", onClick: o, disabled: r, "data-variant": a, ...i, children: /* @__PURE__ */ t(e, { children: n }) });
 export {
-  B as Button
+  d as Button
 };

package/lib/ui/close-btn/index.js

@@ -1,9 +1,9 @@
 import { jsx as s, jsxs as f } from "react/jsx-runtime";
 import { styled as t } from "@linaria/react";
-import { useState as u, useEffect as I, useCallback as v } from "react";
-import { CloseTimerAuto as x } from "@streamlayer/sdk-web-types";
-import { SvgIcon as T } from "../icons/index.js";
-import { SimpleTimer as d } from "../timer/index.js";
+import { useState as d, useEffect as u, useCallback as I } from "react";
+import { CloseTimerAuto as v } from "@streamlayer/sdk-web-types";
+import { SvgIcon as x } from "../icons/index.js";
+import { SimpleTimer as T } from "../timer/index.js";
 const g = /* @__PURE__ */ t("div")({
   name: "CloseIconWrap",
   class: "c3v6bv6",
@@ -12,41 +12,44 @@ const g = /* @__PURE__ */ t("div")({
   name: "TimerWrap",
   class: "teuhmro",
   propsAsIs: !1
-}), A = () => T, C = /* @__PURE__ */ t(A())({
+}), A = () => x, C = /* @__PURE__ */ t(A())({
   name: "Icon",
   class: "i17rfxv5",
   propsAsIs: !0
 }), y = ({
   close: r,
-  className: i,
-  timerClassName: c,
+  className: a,
+  timerClassName: m,
   skipIcon: o,
-  isPlaying: p = !0,
+  isPlaying: c = !0,
   duration: e = 0,
-  autoClose: m
+  autoClose: n
 }) => {
-  const [a, n] = u(e === 0);
-  I(() => {
-    n(!e);
+  const [p, i] = d(e === 0);
+  u(() => {
+    i(!e);
   }, [e]);
-  const l = v(() => {
-    m === x.ENABLED ? r == null || r() : n(!0);
-  }, [m, r]);
-  return a ? /* @__PURE__ */ f(g, {
+  const l = I(() => {
+    n === v.ENABLED ? r == null || r() : i(!0);
+  }, [n, r]);
+  return p ? /* @__PURE__ */ f(g, {
+    "data-a": "intr",
     onClick: r,
-    className: i,
+    className: a,
     style: o ? {
       width: "auto"
     } : {},
     children: [o && /* @__PURE__ */ s("span", {
+      "data-a": "intr",
       children: "Skip"
     }), /* @__PURE__ */ s(C, {
+      "data-a": "intr",
       name: o ? "iconSkip" : "icon-cross"
     })]
   }) : /* @__PURE__ */ s(h, {
-    children: /* @__PURE__ */ s(d, {
-      className: c,
-      isPlaying: p,
+    children: /* @__PURE__ */ s(T, {
+      className: m,
+      isPlaying: c,
       duration: e,
       onTimerExpired: l
     })

package/lib/ui/gamification/detail/header/index.js

@@ -1,23 +1,23 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import { QuestionType as e } from "@streamlayer/sdk-web-types";
 import { CloseButton as c } from "../../../close-btn/index.js";
 import { QuestionTypeData as p } from "../../constants.js";
 import { Container as s, QuestionTypeWrap as l, QuestionTypeIcon as m, QuestionTypeTitle as u, CloseIconWrap as C, CloseIcon as f } from "./styles.js";
-const b = ({ type: r, closeTimer: n, close: i, label: d }) => {
-  const o = r ? p[r] : { label: d, iconName: void 0 };
-  return /* @__PURE__ */ a(s, { children: [
-    /* @__PURE__ */ a(l, { children: [
+const b = ({ type: a, closeTimer: n, close: r, label: d }) => {
+  const o = a ? p[a] : { label: d, iconName: void 0 };
+  return /* @__PURE__ */ i(s, { children: [
+    /* @__PURE__ */ i(l, { children: [
       (o == null ? void 0 : o.iconName) && /* @__PURE__ */ t(
         m,
         {
-          "data-type-trivia": r === e.TRIVIA,
-          "data-type-poll": r === e.POLL,
+          "data-type-trivia": a === e.TRIVIA,
+          "data-type-poll": a === e.POLL,
           name: o.iconName
         }
       ),
       (o == null ? void 0 : o.label) && /* @__PURE__ */ t(u, { children: o.label })
     ] }),
-    n != null && n.seconds ? /* @__PURE__ */ t(c, { close: i, autoClose: n.auto, duration: n.seconds }) : /* @__PURE__ */ t(C, { onClick: i, children: /* @__PURE__ */ t(f, { name: "icon-cross" }) })
+    n != null && n.seconds ? /* @__PURE__ */ t(c, { close: r, autoClose: n.auto, duration: n.seconds }) : /* @__PURE__ */ t(C, { "data-a": "intr", onClick: r, children: /* @__PURE__ */ t(f, { "data-a": "intr", name: "icon-cross" }) })
   ] });
 };
 export {

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

@@ -1,22 +1,22 @@
 import { jsxs as e, jsx as t } from "react/jsx-runtime";
 import { QuestionImages as c } from "@streamlayer/sdk-web-types";
-import { Container as h, Graphic as l, Content as C, Title as g, NextIcon as a, InsightIconDefault as I, InsightIconAbsolute as d, InsightIconCircle as u } from "./styles.js";
+import { Container as h, Graphic as l, Content as C, Title as a, NextIcon as g, InsightIconDefault as d, InsightIconAbsolute as I, InsightIconCircle as u } from "./styles.js";
 const v = "data:image/svg+xml,%3csvg%20width='16'%20height='17'%20viewBox='0%200%2016%2017'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Chevron'%3e%3cpath%20id='Chevron_2'%20d='M12%208.17222C12%208.28783%2011.9781%208.39553%2011.9342%208.49533C11.8903%208.59513%2011.822%208.68992%2011.7292%208.7797L6.36949%2013.9439C6.21462%2014.0965%206.02742%2014.1729%205.80787%2014.1729C5.65752%2014.1729%205.52191%2014.1379%205.40104%2014.0679C5.28016%2013.998%205.1831%2013.9039%205.10986%2013.7856C5.03662%2013.6673%205%2013.5345%205%2013.3873C5%2013.1721%205.08288%2012.9818%205.24863%2012.8164L10.0807%208.17095L5.24863%203.52799C5.08288%203.36425%205%203.17439%205%202.95841C5%202.81118%205.03662%202.67842%205.10986%202.56013C5.1831%202.44183%205.28016%202.34771%205.40104%202.27777C5.52191%202.20782%205.65752%202.17285%205.80787%202.17285C6.02742%202.17285%206.21462%202.24731%206.36949%202.39624L11.7292%207.56473C11.8211%207.65451%2011.889%207.74909%2011.9329%207.84846C11.9768%207.94784%2011.9991%208.05576%2012%208.17222Z'%20fill='%23FFFFFF'/%3e%3c/g%3e%3c/svg%3e", x = (i, n) => {
   switch (i) {
     case c.ROUNDED:
       return /* @__PURE__ */ t(u, { alt: "insight-icon", src: n });
     case c.TRANSPARENT:
-      return /* @__PURE__ */ t(d, { alt: "insight-icon", src: n });
-    case c.CENTERED:
       return /* @__PURE__ */ t(I, { alt: "insight-icon", src: n });
+    case c.CENTERED:
+      return /* @__PURE__ */ t(d, { alt: "insight-icon", src: n });
     default:
       return null;
   }
-}, w = ({ title: i, image: n, questionId: r, imageMode: o, openInsight: s }) => /* @__PURE__ */ e(h, { onClick: () => s(r), children: [
+}, w = ({ title: i, image: n, questionId: r, imageMode: o, openInsight: s }) => /* @__PURE__ */ e(h, { "data-a": "intr", onClick: () => s(r), children: [
   /* @__PURE__ */ t(l, { children: n && x(o, n) }),
   /* @__PURE__ */ e(C, { children: [
-    /* @__PURE__ */ t(g, { children: i || "" }),
-    /* @__PURE__ */ t(a, { alt: "next-icon", src: v })
+    /* @__PURE__ */ t(a, { children: i || "" }),
+    /* @__PURE__ */ t(g, { alt: "next-icon", src: v })
   ] })
 ] });
 export {

package/lib/ui/gamification/invite-link/index.js

@@ -10,7 +10,7 @@ const C = ({ title: o, description: t, onClick: r, className: e }) => {
       from: m.TITLE_CARD
     }
   });
-  return /* @__PURE__ */ i(s, { onClick: c(r), className: e, children: [
+  return /* @__PURE__ */ i(s, { "data-a": "intr", onClick: c(r), className: e, children: [
     /* @__PURE__ */ n(l, { name: "icon-friends" }),
     /* @__PURE__ */ i(d, { children: [
       /* @__PURE__ */ n(p, { children: o }),

package/lib/ui/gamification/leaderboard/static.js

@@ -1,4 +1,4 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import { styled as c } from "@linaria/react";
 import { useCallback as f } from "react";
 import m from "react-infinite-scroller";
@@ -9,27 +9,28 @@ const u = /* @__PURE__ */ c("div")({
   propsAsIs: !1
 }), S = ({
   items: s,
-  currentUserId: o,
-  openItemDetail: t,
+  currentUserId: e,
+  openItemDetail: o,
   fetchMore: n,
   scrollNode: i,
-  hasMore: l
+  hasMore: d
 }) => {
-  const d = f((r) => {
+  const l = f((r) => {
     const a = r.target.getAttribute("data-name");
-    a && t(a);
-  }, [t]);
-  return /* @__PURE__ */ e(m, {
+    a && o(a);
+  }, [o]);
+  return /* @__PURE__ */ t(m, {
     loadMore: n,
     initialLoad: !1,
-    hasMore: l,
+    hasMore: d,
     useWindow: !1,
     getScrollParent: () => i.current,
-    children: /* @__PURE__ */ e(u, {
-      onClick: d,
-      children: s.map((r) => /* @__PURE__ */ e(p, {
+    children: /* @__PURE__ */ t(u, {
+      "data-a": "intr",
+      onClick: l,
+      children: s.map((r) => /* @__PURE__ */ t(p, {
         ...r,
-        isCurrentUser: !!o && o === r.userId
+        isCurrentUser: !!e && e === r.userId
       }, r.userId))
     })
   });

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

@@ -11,10 +11,10 @@ const o = {
   steps: !1,
   rules: !1,
   inviteCard: !1
-}, rn = ({
+}, tn = ({
   gamification: I,
   steps: n,
-  rules: r,
+  rules: t,
   rulesBtnLabel: c,
   rulesTitle: T,
   termsTitle: x,
@@ -29,40 +29,40 @@ const o = {
   sdk: C,
   onClose: A
 }) => {
-  const [l, O] = h(0), [a, S] = h(!1), [e, t] = h(o);
+  const [a, O] = h(0), [l, S] = h(!1), [e, r] = h(o);
   v(() => {
-    n != null && n.length ? t({ ...o, steps: !0 }) : r != null && r.length ? t({ ...o, rules: !0 }) : t({ ...o, inviteCard: !0 });
+    n != null && n.length ? r({ ...o, steps: !0 }) : t != null && t.length ? r({ ...o, rules: !0 }) : r({ ...o, inviteCard: !0 });
   }, []);
-  const j = N(() => e.steps && l === 0 ? "Continue" : e.rules ? a || !c ? "Got it" : c : e.inviteCard ? b || "Play Now" : "Next", [e, l, a, c, b]), p = z(() => {
-    n != null && n.length && l < n.length - 1 ? O((m) => ++m) : r != null && r.length && e.steps ? t({ ...o, rules: !0 }) : e.rules && t({ ...o, inviteCard: !0 });
-  }, [l, n == null ? void 0 : n.length, r == null ? void 0 : r.length, e, O, t]), H = async () => {
-    e.inviteCard ? await I.onboardingStatus.submitInplay() : e.rules && a ? S(!1) : p();
+  const j = N(() => e.steps && a === 0 ? "Continue" : e.rules ? l || !c ? "Got it" : c : e.inviteCard ? b || "Play Now" : "Next", [e, a, l, c, b]), p = z(() => {
+    n != null && n.length && a < n.length - 1 ? O((m) => ++m) : t != null && t.length && e.steps ? r({ ...o, rules: !0 }) : e.rules && r({ ...o, inviteCard: !0 });
+  }, [a, n == null ? void 0 : n.length, t == null ? void 0 : t.length, e, O, r]), H = async () => {
+    e.inviteCard ? await I.onboardingStatus.submitInplay() : e.rules && l ? S(!1) : p();
   };
   return v(() => {
     !d && f && C.inviteDisplayed();
   }, [d, f, C]), /* @__PURE__ */ i(E, { children: ({ width: m, height: y }) => /* @__PURE__ */ s(U, { style: { width: m, height: y, maxHeight: y }, children: [
-    /* @__PURE__ */ i(q, { children: /* @__PURE__ */ i(J, { onClick: A, children: /* @__PURE__ */ i(K, { name: "icon-close-btn-gray" }) }) }),
+    /* @__PURE__ */ i(q, { children: /* @__PURE__ */ i(J, { "data-a": "intr", onClick: A, children: /* @__PURE__ */ i(K, { name: "icon-close-btn-gray" }) }) }),
     /* @__PURE__ */ s(Q, { children: [
       e.steps && (n == null ? void 0 : n.length) && /* @__PURE__ */ i(
         G,
         {
           loading: d,
           steps: n,
-          currentStep: l,
+          currentStep: a,
           inviterName: f
         }
       ),
-      e.rules && !a && /* @__PURE__ */ i(
+      e.rules && !l && /* @__PURE__ */ i(
         P,
         {
-          rules: r,
+          rules: t,
           rulesTitle: T,
           termsText: u,
           primaryColor: g,
           openTerms: () => S(!0)
         }
       ),
-      e.rules && a && /* @__PURE__ */ i(R, { termsTitle: x, termsText: u }),
+      e.rules && l && /* @__PURE__ */ i(R, { termsTitle: x, termsText: u }),
       e.inviteCard && /* @__PURE__ */ i(
         M,
         {
@@ -73,9 +73,9 @@ const o = {
         }
       )
     ] }),
-    /* @__PURE__ */ i(V, { children: /* @__PURE__ */ i(F, { loading: d, style: { width: "100%" }, children: /* @__PURE__ */ i(W, { onClick: H, children: j }) }) })
+    /* @__PURE__ */ i(V, { children: /* @__PURE__ */ i(F, { loading: d, style: { width: "100%" }, children: /* @__PURE__ */ i(W, { "data-a": "intr", onClick: H, children: j }) }) })
   ] }) });
 };
 export {
-  rn as OnboardingUI
+  tn as OnboardingUI
 };

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

@@ -6,25 +6,25 @@ import { InvitationFrom as h } from "@streamlayer/sdk-web-types";
 import { Container as y, IconContainer as C, InviteGameIcon as I, Content as k, Heading as u, Subtext as b, LinkContainer as g, LinkInfo as v, LinkTitle as x, LinkAddress as A, LinkIcon as L } from "./styles.js";
 const M = ({
   inviteLink: i,
-  inviteCardTitle: r,
+  inviteCardTitle: e,
   inviteCardSubtext: t,
   primaryColor: c,
-  className: l
+  className: a
 }) => {
-  const e = f(null), [a, d] = s(e), [m] = p({
+  const r = f(null), [l, d] = s(r), [m] = p({
     type: "invitation",
     action: "sent",
     payload: {
       from: h.MENU
     }
   });
-  return /* @__PURE__ */ o(y, { className: l, children: [
+  return /* @__PURE__ */ o(y, { className: a, children: [
     /* @__PURE__ */ n(C, { style: { backgroundColor: c }, children: /* @__PURE__ */ n(I, { name: "invite-game-icon" }) }),
     /* @__PURE__ */ o(k, { children: [
-      /* @__PURE__ */ n(u, { children: r || "" }),
+      /* @__PURE__ */ n(u, { children: e || "" }),
       /* @__PURE__ */ n(b, { children: t || "" })
     ] }),
-    i && /* @__PURE__ */ o(g, { ref: e, onClick: m(() => a(i)), children: [
+    i && /* @__PURE__ */ o(g, { ref: r, "data-a": "intr", onClick: m(() => l(i)), children: [
       /* @__PURE__ */ o(v, { children: [
         /* @__PURE__ */ n(x, { children: "Invite link" }),
         /* @__PURE__ */ n(A, { children: i })

package/lib/ui/gamification/onboarding/slides/onboarding-rules/index.js

@@ -1,21 +1,21 @@
-import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { SvgIcon as a } from "../../../../icons/index.js";
+import { jsxs as t, jsx as n } from "react/jsx-runtime";
+import { SvgIcon as m } from "../../../../icons/index.js";
 import { Container as h, Content as s, Title as p, RulesList as C, RulesItem as R, RuleIcon as u, RuleText as x, TermsButton as T } from "./styles.js";
 const b = ({
   rules: e,
-  rulesTitle: t,
+  rulesTitle: o,
   termsText: i,
   primaryColor: d,
   openTerms: l
-}) => /* @__PURE__ */ r(h, { children: [
-  /* @__PURE__ */ r(s, { children: [
-    /* @__PURE__ */ n(p, { children: t }),
-    /* @__PURE__ */ n(C, { children: e == null ? void 0 : e.map(({ label: c, icon: o }, m) => /* @__PURE__ */ r(R, { children: [
-      o && /* @__PURE__ */ n(u, { style: { backgroundColor: d }, children: /* @__PURE__ */ n(a, { name: o, "data-icon": o }) }),
+}) => /* @__PURE__ */ t(h, { children: [
+  /* @__PURE__ */ t(s, { children: [
+    /* @__PURE__ */ n(p, { children: o }),
+    /* @__PURE__ */ n(C, { children: e == null ? void 0 : e.map(({ label: c, icon: r }, a) => /* @__PURE__ */ t(R, { children: [
+      r && /* @__PURE__ */ n(u, { style: { backgroundColor: d }, children: /* @__PURE__ */ n(m, { name: r, "data-icon": r }) }),
       /* @__PURE__ */ n(x, { children: c })
-    ] }, m)) })
+    ] }, a)) })
   ] }),
-  i && /* @__PURE__ */ n(T, { onClick: l, children: "See Terms and Conditions" })
+  i && /* @__PURE__ */ n(T, { "data-a": "intr", onClick: l, children: "See Terms and Conditions" })
 ] });
 export {
   b as OnboardingRules

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

@@ -25,7 +25,7 @@ const F = ({ title: t, questionType: n, questionTypeData: r }) => /* @__PURE__ *
   let a = I;
   n === c.TWEET && (i != null && i.tweetMedia) && (a = i.tweetMedia.image), f === N.NONE && (a = "");
   const m = r.useMediaFromContent && (e == null ? void 0 : e.image), l = n === c.TWEET && ((s = i == null ? void 0 : i.tweetMedia) == null ? void 0 : s.video) || n === c.FACTOID && (e == null ? void 0 : e.video);
-  return /* @__PURE__ */ o(v, { className: "SL_InApp", onClick: t, children: /* @__PURE__ */ p(A, { style: a ? {} : { paddingLeft: "1.5rem" }, children: [
+  return /* @__PURE__ */ o(v, { "data-a": "intr", className: "SL_InApp", onClick: t, children: /* @__PURE__ */ p(A, { style: a ? {} : { paddingLeft: "1.5rem" }, children: [
     a && !m && /* @__PURE__ */ o(u, { src: a, imageMode: f, withVideo: !!l }),
     m && /* @__PURE__ */ o(u, { src: m, fromInsight: !0, withVideo: !!l }),
     n === c.TWEET ? /* @__PURE__ */ o(L, { tweet: i }) : /* @__PURE__ */ o(F, { questionTypeData: d, questionType: n, title: E }),

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

@@ -1,14 +1,15 @@
 import { jsxs as s, jsx as i } from "react/jsx-runtime";
-import { NotificationContainer as p, IconContainer as h, Icon as l, Body as m, Title as o, TitleIcon as d, Description as f, Button as C, Close as k } from "./styles.js";
+import { NotificationContainer as p, IconContainer as h, Icon as l, Body as d, Title as m, TitleIcon as o, Description as f, Button as C, Close as k } from "./styles.js";
 const I = ({
   open: e,
   close: r,
   ...t
 }) => {
-  var c, a;
+  var n, c;
   return /* @__PURE__ */ s(
     p,
     {
+      "data-a": "intr",
       onClick: () => {
         e == null || e(), t && (t.instantOpen = !0);
       },
@@ -23,21 +24,21 @@ const I = ({
             }
           )
         ] }),
-        /* @__PURE__ */ s(m, { children: [
-          /* @__PURE__ */ s(o, { children: [
-            /* @__PURE__ */ i(d, { name: "icon-trophy-solid" }),
-            (c = t == null ? void 0 : t.titleCard) == null ? void 0 : c.title
+        /* @__PURE__ */ s(d, { children: [
+          /* @__PURE__ */ s(m, { children: [
+            /* @__PURE__ */ i(o, { name: "icon-trophy-solid" }),
+            (n = t == null ? void 0 : t.titleCard) == null ? void 0 : n.title
           ] }),
           /* @__PURE__ */ s(f, { children: [
-            /* @__PURE__ */ i("span", { children: (a = t == null ? void 0 : t.titleCard) == null ? void 0 : a.subtitle }),
+            /* @__PURE__ */ i("span", { children: (c = t == null ? void 0 : t.titleCard) == null ? void 0 : c.subtitle }),
             /* @__PURE__ */ i(C, { name: "inapp-button", children: "Play Now" })
           ] })
         ] }),
         /* @__PURE__ */ i(
           k,
           {
-            close: (n) => {
-              n == null || n.stopPropagation(), r == null || r();
+            close: (a) => {
+              a == null || a.stopPropagation(), r == null || r();
             }
           }
         )