@streamlayer/react-ui 1.22.6 → 1.23.1

package/lib/app/app/Advertisement/index.js

@@ -15,13 +15,13 @@ const W = /* @__PURE__ */ L("div")({
   const t = o.target;
   if (t instanceof HTMLAnchorElement && t.target === "_blank") {
     const r = t.getAttribute("data-promo-id") || "", i = t.getAttribute("data-promo-type") || N.UNSET;
-    t.getAttribute("data-analytics") === "button" && h.emit("advertisement", {
+    t.getAttribute("data-a") === "button" && h.emit("advertisement", {
       action: "buttonSelect",
       payload: {
         id: r,
         type: i
       }
-    }), t.getAttribute("data-analytics") === "banner" && h.emit("advertisement", {
+    }), t.getAttribute("data-a") === "banner" && h.emit("advertisement", {
       action: "bannerSelect",
       payload: {
         id: r,
@@ -43,20 +43,20 @@ const W = /* @__PURE__ */ L("div")({
   controlVideo: v
 }) => {
   var y, g, A;
-  const l = I(null), e = S(o.advertisement.$store);
-  P(l, {
+  const m = I(null), e = S(o.advertisement.$store);
+  P(m, {
     enabled: !!e.data,
     event: "click",
     listener: k
   });
-  const m = !d && !s;
+  const l = !d && !s;
   if (e.data === void 0 || !p && e.isViewed)
     return null;
   const n = ((A = (g = (y = e == null ? void 0 : e.data) == null ? void 0 : y.notification) == null ? void 0 : g.promotion) == null ? void 0 : A.mode) === U.LOWER_THIRD;
   return /* @__PURE__ */ a(W, {
-    ref: l,
+    ref: m,
     style: {
-      height: m ? "auto" : "100%"
+      height: l ? "auto" : "100%"
     },
     className: b("SL-AdvertisementUIWrap", u && "mobile-view", n && "SL-AdvertisementUIWrap--lower-third"),
     children: /* @__PURE__ */ a(V, {
@@ -88,7 +88,7 @@ const W = /* @__PURE__ */ L("div")({
   persistent: p,
   notification: f
 }) => {
-  const v = S(o.featuresList.getStore()), [l, e] = w(!r);
+  const v = S(o.featuresList.getStore()), [m, e] = w(!r);
   if (E(() => {
     if (r) {
       const n = document.createElement("script");
@@ -112,9 +112,9 @@ const W = /* @__PURE__ */ L("div")({
     });
   if (!v)
     return null;
-  const m = o.getFeature(T.GAMES);
-  return !m || r && !l ? null : /* @__PURE__ */ a(j, {
-    gamification: m,
+  const l = o.getFeature(T.GAMES);
+  return !l || r && !m ? null : /* @__PURE__ */ a(j, {
+    gamification: l,
     sidebar: t,
     banner: i,
     layoutMode: c,

package/lib/app/app/Features/Gamification/Leaderboard.js

@@ -22,16 +22,16 @@ const C = /* @__PURE__ */ h("div")({
   scrollNode: s,
   scrollStore: p
 }) => {
-  const t = u(null), {
+  const o = u(null), {
     data: i,
     hasMore: d,
     loading: m,
-    key: l
+    key: a
   } = n(e.leaderboardList.$store), {
-    data: o
-  } = n(e.deepLink.$store), [a, c] = k(t);
+    data: t
+  } = n(e.deepLink.$store), [l, c] = k(o);
   return !i.length && !m ? /* @__PURE__ */ r(y, {
-    deepLink: o
+    deepLink: t
   }) : /* @__PURE__ */ f(L, {
     children: [/* @__PURE__ */ r(b, {
       items: i,
@@ -41,10 +41,11 @@ const C = /* @__PURE__ */ h("div")({
       hasMore: d,
       openItemDetail: e.openUser,
       currentUserId: e.currentUserId.get()
-    }, l), o && /* @__PURE__ */ r(C, {
-      ref: t,
+    }, a), t && /* @__PURE__ */ r(C, {
+      ref: o,
       children: /* @__PURE__ */ r(I, {
-        onClick: () => a(o),
+        "data-a": "intr",
+        onClick: () => l(t),
         title: "Invite Friends",
         description: "Challenge them now!"
       })

package/lib/app/app/Navigation/index.js

@@ -47,6 +47,7 @@ const g = () => h, x = /* @__PURE__ */ n(g())({
           name: "dashboard"
         }), "Dashboard"]
       }), /* @__PURE__ */ e(N, {
+        "data-a": "intr",
         onClick: a,
         children: /* @__PURE__ */ e(j, {
           name: "icon-cross"

package/lib/app/app/Notifications/Onboarding/Notification/index.js

@@ -1,16 +1,16 @@
-import { jsxs as S, jsx as e } from "react/jsx-runtime";
-import { Container as L, CloseIconWrap as P, CloseIcon as T, Title as f, SponsorLogo as j, PresentsTitle as k, Subtitle as r, Description as E, ActionButton as I } from "./styles.js";
-const y = ({ close: i, action: x, onboarding: t }) => {
-  var l, s, c, C, p, h, m, u;
-  return /* @__PURE__ */ S(L, { children: [
-    /* @__PURE__ */ e(P, { onClick: i, children: /* @__PURE__ */ e(T, { name: "icon-cross" }) }),
-    ((s = (l = t == null ? void 0 : t.titleCard) == null ? void 0 : l.media) == null ? void 0 : s.sponsorLogo) && /* @__PURE__ */ S(f, { children: [
-      /* @__PURE__ */ e(j, { alt: "sponsor-logo", src: (C = (c = t == null ? void 0 : t.titleCard) == null ? void 0 : c.media) == null ? void 0 : C.sponsorLogo }),
-      /* @__PURE__ */ e(k, { children: "PRESENTS" })
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { Container as x, CloseIconWrap as L, CloseIcon as P, Title as T, SponsorLogo as f, PresentsTitle as j, Subtitle as k, Description as E, ActionButton as I } from "./styles.js";
+const y = ({ close: r, action: S, onboarding: t }) => {
+  var l, s, c, C, p, h, m, i;
+  return /* @__PURE__ */ u(x, { children: [
+    /* @__PURE__ */ e(L, { "data-a": "intr", onClick: r, children: /* @__PURE__ */ e(P, { name: "icon-cross" }) }),
+    ((s = (l = t == null ? void 0 : t.titleCard) == null ? void 0 : l.media) == null ? void 0 : s.sponsorLogo) && /* @__PURE__ */ u(T, { children: [
+      /* @__PURE__ */ e(f, { alt: "sponsor-logo", src: (C = (c = t == null ? void 0 : t.titleCard) == null ? void 0 : c.media) == null ? void 0 : C.sponsorLogo }),
+      /* @__PURE__ */ e(j, { children: "PRESENTS" })
     ] }),
-    ((p = t == null ? void 0 : t.titleCard) == null ? void 0 : p.title) && /* @__PURE__ */ e(r, { children: (h = t == null ? void 0 : t.titleCard) == null ? void 0 : h.title }),
-    ((m = t == null ? void 0 : t.titleCard) == null ? void 0 : m.subtitle) && /* @__PURE__ */ e(E, { children: (u = t == null ? void 0 : t.titleCard) == null ? void 0 : u.subtitle }),
-    /* @__PURE__ */ e(I, { onClick: x, children: "Play Now" })
+    ((p = t == null ? void 0 : t.titleCard) == null ? void 0 : p.title) && /* @__PURE__ */ e(k, { children: (h = t == null ? void 0 : t.titleCard) == null ? void 0 : h.title }),
+    ((m = t == null ? void 0 : t.titleCard) == null ? void 0 : m.subtitle) && /* @__PURE__ */ e(E, { children: (i = t == null ? void 0 : t.titleCard) == null ? void 0 : i.subtitle }),
+    /* @__PURE__ */ e(I, { "data-a": "intr", onClick: S, children: "Play Now" })
   ] });
 };
 export {

package/lib/app/app/Notifications/index.js

@@ -13,26 +13,26 @@ import { PredictionResult as C } from "../../../ui/gamification/question/notific
 import { Onboarding as x } from "./Onboarding/index.js";
 import { HiddenContainer as P, Container as z, InnerContainer as B, NotificationRefreshing as H, Pill as S } from "./styles.js";
 const v = (n) => {
-  const [e, d] = k(0), i = E(null), l = D(() => new ResizeObserver((o) => {
+  const [e, d] = k(0), i = E(null), l = D(() => new ResizeObserver((r) => {
     window.requestAnimationFrame(() => {
       var f;
-      if (Array.isArray(o)) {
-        for (const c of o)
+      if (Array.isArray(r)) {
+        for (const c of r)
           if (c.contentBoxSize) {
-            const r = (f = i.current) == null ? void 0 : f.getBoundingClientRect();
-            r && d(r.height);
+            const o = (f = i.current) == null ? void 0 : f.getBoundingClientRect();
+            o && d(o.height);
           }
       }
     });
-  }), []), s = I((o) => {
-    i.current = o;
-  }, []), a = I((o) => {
-    d(o);
+  }), []), s = I((r) => {
+    i.current = r;
+  }, []), a = I((r) => {
+    d(r);
   }, []);
   return h(() => {
-    const o = i.current;
-    return o ? (l.observe(o), () => {
-      l.unobserve(o);
+    const r = i.current;
+    return r ? (l.observe(r), () => {
+      l.unobserve(r);
     }) : () => {
     };
   }, [n]), h(() => () => {
@@ -52,17 +52,17 @@ const v = (n) => {
     keys: ["sdkInDesktopView"]
   }), {
     sdk: a
-  } = O(), [o, f, c] = v(e.id);
-  let r = f;
-  return l || (r = "auto"), e.type === p.QUESTION ? /* @__PURE__ */ w(b, {
+  } = O(), [r, f, c] = v(e.id);
+  let o = f;
+  return l || (o = "auto"), e.type === p.QUESTION ? /* @__PURE__ */ w(b, {
     children: [/* @__PURE__ */ u(P, {
-      ref: o,
+      ref: r,
       children: /* @__PURE__ */ u(N, {
         ...e
       })
     }), /* @__PURE__ */ w(z, {
       style: {
-        height: e.hiding ? 0 : r
+        height: e.hiding ? 0 : o
       },
       hiding: e.hiding,
       children: [/* @__PURE__ */ u(B, {
@@ -85,7 +85,7 @@ const v = (n) => {
     ...e.data.question
   }) : e.type === p.ONBOARDING ? /* @__PURE__ */ u(x, {
     style: {
-      height: e.hiding ? 0 : r
+      height: e.hiding ? 0 : o
     },
     saveHeight: c,
     sdk: n,
@@ -105,7 +105,7 @@ const v = (n) => {
 }) => {
   var t, m;
   const {
-    screen: o
+    screen: r
   } = y(s, {
     keys: ["screen"]
   }), {
@@ -117,21 +117,22 @@ const v = (n) => {
   h(() => {
     s.get().sdkInDesktopView ? c < 50 && e(null) : c > -50 && e(null);
   }, [c, s, e]);
-  const r = s.get().sdkInDesktopView ? d : i;
-  return !n || !r.current ? null : q.createPortal(/* @__PURE__ */ u(S, {
+  const o = s.get().sdkInDesktopView ? d : i;
+  return !n || !o.current ? null : q.createPortal(/* @__PURE__ */ u(S, {
     title: n.type === p.QUESTION_RESOLVED ? "Prediction result" : `New ${((m = A[(t = n.data) == null ? void 0 : t.questionType]) == null ? void 0 : m.label) || "notification"}`,
+    "data-a": "intr",
     onClick: () => {
       var g;
       s.get().sdkInDesktopView ? (g = l.current) == null || g.scrollTo({
         top: 0,
         behavior: "smooth"
-      }) : T(d, o.size, {
+      }) : T(d, r.size, {
         behavior: "smooth"
       }), e(null);
     },
     className: V(f && F, "sl-pill-button")
-  }), r.current);
-}, oe = ({
+  }), o.current);
+}, re = ({
   sdk: n,
   headerNode: e,
   scrollNode: d,
@@ -140,7 +141,7 @@ const v = (n) => {
   scrollStore: s,
   hasActiveFeature: a
 }) => {
-  const [o] = k(n.getNotificationsStore()), f = y(o), [c, r] = k(null), t = D(() => n.getActiveNotification(), [n, f]);
+  const [r] = k(n.getNotificationsStore()), f = y(r), [c, o] = k(null), t = D(() => n.getActiveNotification(), [n, f]);
   return h(() => {
     t && R.emit("notification", {
       action: "rendered",
@@ -154,11 +155,11 @@ const v = (n) => {
       sdkInDesktopView: m,
       sdkInView: g
     } = i.get();
-    t && (m || g) && (!m && g && r(t), m && window.requestAnimationFrame(() => {
-      s.get().scrollPosition !== 0 && r(t);
+    t && (m || g) && (!m && g && o(t), m && window.requestAnimationFrame(() => {
+      s.get().scrollPosition !== 0 && o(t);
     }));
   }, [t]), h(() => {
-    t || r(null);
+    t || o(null);
   }, [t]), /* @__PURE__ */ w(b, {
     children: [!c && t && /* @__PURE__ */ u(Q, {
       appNode: l,
@@ -168,7 +169,7 @@ const v = (n) => {
       responsiveStore: i
     }), c && /* @__PURE__ */ u(U, {
       pill: c,
-      setPill: r,
+      setPill: o,
       appNode: l,
       notification: t,
       headerNode: e,
@@ -179,5 +180,5 @@ const v = (n) => {
   });
 };
 export {
-  oe as SDKNotifications
+  re as SDKNotifications
 };

package/lib/app/app/Points/index.js

@@ -1,34 +1,40 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useState as a, useEffect as c } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { useState as p, useEffect as c } from "react";
 import { useStore as l } from "@streamlayer/react-polyfills";
-import { FeatureStatus as u, eventBus as i } from "@streamlayer/sdk-web-interfaces";
+import { FeatureStatus as u, eventBus as s } from "@streamlayer/sdk-web-interfaces";
 import { FeatureType as f } from "@streamlayer/sdk-web-types";
-import { Points as S } from "../../../ui/gamification/points/index.js";
-const y = ({ gamification: e }) => {
-  const o = e.userSummary.$store, [t, p] = a(0);
+import { Points as y } from "../../../ui/gamification/points/index.js";
+const S = ({ gamification: e }) => {
+  const n = e.userSummary.$store, [t, m] = p(0);
   return c(() => {
-    const r = o.subscribe((s) => {
-      var n;
-      (n = s == null ? void 0 : s.summary) != null && n.points && p(s.summary.points);
+    const r = n.subscribe((o) => {
+      var i;
+      (i = o == null ? void 0 : o.summary) != null && i.points && m(o.summary.points);
     });
     return () => {
       r();
     };
-  }, [o]), /* @__PURE__ */ m(S, { points: t, onClick: () => {
+  }, [n]), /* @__PURE__ */ a(y, { points: t, onClick: () => {
     const r = e.status.get();
-    r === u.Suspended ? (e.openFeature(), i.emit("app", {
+    r === u.Suspended ? (e.openFeature(), s.emit("app", {
       action: "open",
       payload: {}
-    })) : r === u.Ready && (e.closeFeature(!1), i.emit("app", {
+    }), s.emit("interactions", {
+      action: "tap",
+      payload: {}
+    })) : r === u.Ready && (e.closeFeature(!1), s.emit("app", {
       action: "close",
       payload: {}
+    }), s.emit("interactions", {
+      action: "tap",
+      payload: {}
     }));
   } });
 }, k = ({ sdk: e }) => {
   if (!l(e.featuresList.getStore()))
     return null;
   const t = e.getFeature(f.GAMES);
-  return t ? /* @__PURE__ */ m(y, { gamification: t }) : null;
+  return t ? /* @__PURE__ */ a(S, { gamification: t }) : null;
 };
 export {
   k as StreamLayerSDKPoints

package/lib/app/masters/BetPack/BetPackContent/EndScreen/index.js

@@ -17,6 +17,7 @@ const E = ({ onEvent: s, height: r }) => {
     /* @__PURE__ */ e(
       o,
       {
+        "data-a": "intr",
         onClick: () => {
           d(
             1
@@ -30,7 +31,7 @@ const E = ({ onEvent: s, height: r }) => {
   ] }) }, "end") : /* @__PURE__ */ e(t, { height: r, children: /* @__PURE__ */ n(i, { children: [
     /* @__PURE__ */ e(h, { src: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/bet_pack_end_screen.png" }),
     /* @__PURE__ */ e(c, { children: "Look for more live match insights, predictions and more." }),
-    /* @__PURE__ */ e(o, { onClick: () => s({ type: "slOpenGameCenter" }), children: "Open Game Center" })
+    /* @__PURE__ */ e(o, { "data-a": "intr", onClick: () => s({ type: "slOpenGameCenter" }), children: "Open Game Center" })
   ] }) }, "end");
 };
 export {

package/lib/app/masters/BetPack/BetPackContent/StartScreen/index.js

@@ -1,10 +1,10 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { ScreenContainer as i } from "../ScreenContainer/index.js";
-import { S as c, e as s, a, b as l, c as S, d } from "../../../../../styles-BfnMua4o.js";
+import { S as a, e as c, a as s, b as l, c as S, d } from "../../../../../styles-BfnMua4o.js";
 import { StartScreenSponsor as h, NextButton as p, IconArrowRight as m, StartScreenNote as f } from "./styles.js";
-const v = ({ countQuestionsAvailable: t, sliderRef: o }) => /* @__PURE__ */ e(i, { children: /* @__PURE__ */ r(c, { children: [
-  /* @__PURE__ */ e(s, {}),
-  /* @__PURE__ */ r(a, { children: [
+const v = ({ countQuestionsAvailable: t, sliderRef: o }) => /* @__PURE__ */ e(i, { children: /* @__PURE__ */ r(a, { children: [
+  /* @__PURE__ */ e(c, {}),
+  /* @__PURE__ */ r(s, { children: [
     /* @__PURE__ */ e(h, { children: "FEATURED GROUPS+" }),
     /* @__PURE__ */ e(l, { children: "The First Five" })
   ] }),
@@ -12,6 +12,7 @@ const v = ({ countQuestionsAvailable: t, sliderRef: o }) => /* @__PURE__ */ e(i,
   /* @__PURE__ */ r(
     d,
     {
+      "data-a": "intr",
       onClick: () => {
         var n;
         (n = o.current) == null || n.slideNext();

package/lib/app/masters/BetPack/index.js

@@ -1,67 +1,69 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
 import { cx as P } from "@linaria/core";
-import { forwardRef as b, useState as B, useCallback as F, memo as H, useMemo as L } from "react";
-import { useStore as k } from "@streamlayer/react-polyfills";
+import { forwardRef as b, useState as y, useCallback as I, memo as F, useMemo as H, useEffect as L } from "react";
+import { useStore as B } from "@streamlayer/react-polyfills";
 import { FeatureType as p } from "@streamlayer/sdk-web-types";
-import { BetPackContent as I } from "./BetPackContent/index.js";
-import { EmergencyScreen as M } from "./BetPackContent/EmergencyScreen/index.js";
+import { BetPackContent as M } from "./BetPackContent/index.js";
+import { EmergencyScreen as O } from "./BetPackContent/EmergencyScreen/index.js";
 import { LoaderScreen as x } from "./BetPackContent/LoaderScreen/index.js";
 import { BetPackContainer as R } from "./styles.js";
 import { defaultEventHandler as j } from "./utils.js";
-import { SvgIcon as y } from "../../../ui/icons/index.js";
-import { Container as G, Header as T, HeaderTitle as z, CloseButton as O, Main as U, Footer as Y, SlideSwitchButton as C, IconArrowPrev as q, buttonAvailable as g, IconArrowNext as D } from "./BetPackOverlay/styles.js";
-const er = b(({ sdk: n, onEvent: i, close: t }, a) => {
-  const [e, d] = B(), [o, h] = B(), N = F(
+import { SvgIcon as k } from "../../../ui/icons/index.js";
+import { Container as G, Header as T, HeaderTitle as z, CloseButton as U, Main as Y, Footer as q, SlideSwitchButton as C, IconArrowPrev as D, buttonAvailable as g, IconArrowNext as J } from "./BetPackOverlay/styles.js";
+const nr = b(({ sdk: c, onEvent: a, close: t }, i) => {
+  const [o, m] = y(), [e, h] = y(), w = I(
     (l) => {
       if (l.type === "slBetPackReady") {
-        const { next: s, prev: u, current: f, canNext: w, canPrev: A } = l.payload || {};
-        d({ next: s, prev: u }), h((c) => ({
-          current: c != null && c.current ? c == null ? void 0 : c.current : f,
-          canPrev: c != null && c.current ? c == null ? void 0 : c.canPrev : A,
-          canNext: w
+        const { next: s, prev: u, current: f, canNext: N, canPrev: A } = l.payload || {};
+        m({ next: s, prev: u }), h((n) => ({
+          current: n != null && n.current ? n == null ? void 0 : n.current : f,
+          canPrev: n != null && n.current ? n == null ? void 0 : n.canPrev : A,
+          canNext: N
         }));
       }
       if (l.type === "slBetPackChangeCard") {
         const { current: s, canNext: u, canPrev: f } = l.payload || {};
         h({ current: s, canNext: u, canPrev: f });
       }
-      i == null || i(l);
+      a == null || a(l);
     },
-    [i]
+    [a]
   );
-  return /* @__PURE__ */ m(G, { ref: a, children: [
-    /* @__PURE__ */ m(T, { children: [
-      /* @__PURE__ */ m(z, { children: [
-        /* @__PURE__ */ r(y, { name: "fgIcon" }),
+  return /* @__PURE__ */ d(G, { ref: i, children: [
+    /* @__PURE__ */ d(T, { children: [
+      /* @__PURE__ */ d(z, { children: [
+        /* @__PURE__ */ r(k, { name: "fgIcon" }),
         "Featured Groups+"
       ] }),
-      /* @__PURE__ */ r(O, { onClick: t, children: /* @__PURE__ */ r(y, { name: "icon-close-btn-gray" }) })
+      /* @__PURE__ */ r(U, { "data-a": "intr", onClick: t, children: /* @__PURE__ */ r(k, { name: "icon-close-btn-gray" }) })
     ] }),
-    /* @__PURE__ */ r(U, { children: /* @__PURE__ */ r(K, { sdk: n, onEvent: N, overlay: !0 }) }),
-    /* @__PURE__ */ m(Y, { children: [
-      /* @__PURE__ */ r(C, { onClick: e == null ? void 0 : e.prev, disabled: !(o != null && o.canPrev), children: /* @__PURE__ */ r(q, { name: "iconArrowPrev", className: P((o == null ? void 0 : o.canPrev) && g) }) }),
-      /* @__PURE__ */ r(C, { onClick: e == null ? void 0 : e.next, disabled: !(o != null && o.canNext), children: /* @__PURE__ */ r(D, { name: "iconArrowPrev", className: P((o == null ? void 0 : o.canNext) && g) }) })
+    /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ r(Q, { sdk: c, onEvent: w, overlay: !0 }) }),
+    /* @__PURE__ */ d(q, { children: [
+      /* @__PURE__ */ r(C, { "data-a": "intr", onClick: o == null ? void 0 : o.prev, disabled: !(e != null && e.canPrev), children: /* @__PURE__ */ r(D, { "data-a": "intr", name: "iconArrowPrev", className: P((e == null ? void 0 : e.canPrev) && g) }) }),
+      /* @__PURE__ */ r(C, { "data-a": "intr", onClick: o == null ? void 0 : o.next, disabled: !(e != null && e.canNext), children: /* @__PURE__ */ r(J, { "data-a": "intr", name: "iconArrowPrev", className: P((e == null ? void 0 : e.canNext) && g) }) })
     ] })
   ] });
-}), J = ({ user: n, gamification: i, overlay: t, swipeable: a, onEvent: e }) => n.data ? i ? /* @__PURE__ */ r(I, { overlay: t, gamification: i, onEvent: e, swipeable: a }) : /* @__PURE__ */ r(x, {}) : n.error && !n.loading ? /* @__PURE__ */ r(
-  M,
+}), K = ({ user: c, gamification: a, overlay: t, swipeable: i, onEvent: o }) => c.data ? a ? /* @__PURE__ */ r(M, { overlay: t, gamification: a, onEvent: o, swipeable: i }) : /* @__PURE__ */ r(x, {}) : c.error && !c.loading ? /* @__PURE__ */ r(
+  O,
   {
-    onEvent: e,
-    actionFn: () => e({ type: "slHardRefresh" }),
+    onEvent: o,
+    actionFn: () => o({ type: "slHardRefresh" }),
     description: `You are not authorized to
 view this resource.`
   }
-) : /* @__PURE__ */ r(x, {}), K = H(({ sdk: n, swipeable: i = !0, onEvent: t = j, overlay: a }) => {
-  const e = k(n.featuresList.getStore()), d = L(() => n.getFeature(p.GAMES), [e]), o = k(n.getUserStore());
-  return /* @__PURE__ */ r(
+) : /* @__PURE__ */ r(x, {}), Q = F(({ sdk: c, swipeable: a = !0, onEvent: t = j, overlay: i }) => {
+  const o = B(c.featuresList.getStore()), m = H(() => c.getFeature(p.GAMES), [o]), e = B(c.getUserStore());
+  return L(() => (c.writeOverlaySessionId(), () => {
+    c.writeOverlaySessionId("");
+  }), []), /* @__PURE__ */ r(
     R,
     {
-      className: P("SL-BetPack", a && "SL-BetPack--overlay", !a && "SL-BetPack--standalone"),
-      children: /* @__PURE__ */ r(J, { overlay: a, user: o, gamification: d, onEvent: t, swipeable: i })
+      className: P("SL-BetPack", i && "SL-BetPack--overlay", !i && "SL-BetPack--standalone"),
+      children: /* @__PURE__ */ r(K, { overlay: i, user: e, gamification: m, onEvent: t, swipeable: a })
     }
   );
 });
 export {
-  K as BetPack,
-  er as BetPackOverlay
+  Q as BetPack,
+  nr as BetPackOverlay
 };

package/lib/app/masters/Points/index.js

@@ -1,25 +1,33 @@
 import { jsx as n } from "react/jsx-runtime";
-import { useState as m, useEffect as f } from "react";
-import { useStore as c } from "@streamlayer/react-polyfills";
-import { FeatureType as p } from "@streamlayer/sdk-web-types";
-import { Points as S } from "../../../ui/gamification/points/index.js";
-const a = ({ gamification: r }) => {
-  const o = r.userSummary.$store, [t, u] = m(0);
-  return f(() => {
-    const i = o.subscribe((e) => {
+import { useState as c, useEffect as a, useCallback as f } from "react";
+import { useStore as p } from "@streamlayer/react-polyfills";
+import { eventBus as l } from "@streamlayer/sdk-web-interfaces";
+import { FeatureType as S } from "@streamlayer/sdk-web-types";
+import { Points as y } from "../../../ui/gamification/points/index.js";
+const P = ({ gamification: t }) => {
+  const o = t.userSummary.$store, [r, i] = c(0);
+  a(() => {
+    const u = o.subscribe((e) => {
       var s;
-      (s = e == null ? void 0 : e.summary) != null && s.points && u(e.summary.points);
+      (s = e == null ? void 0 : e.summary) != null && s.points && i(e.summary.points);
     });
     return () => {
-      i();
+      u();
     };
-  }, [o]), /* @__PURE__ */ n(S, { points: t });
-}, b = ({ sdk: r }) => {
-  if (!c(r.featuresList.getStore()))
+  }, [o]);
+  const m = f(() => {
+    l.emit("interactions", {
+      action: "tap",
+      payload: {}
+    });
+  }, []);
+  return /* @__PURE__ */ n(y, { onClick: m, points: r });
+}, x = ({ sdk: t }) => {
+  if (!p(t.featuresList.getStore()))
     return null;
-  const t = r.getFeature(p.GAMES);
-  return t ? /* @__PURE__ */ n(a, { gamification: t }) : null;
+  const r = t.getFeature(S.GAMES);
+  return r ? /* @__PURE__ */ n(P, { gamification: r }) : null;
 };
 export {
-  b as StreamLayerSDKPoints
+  x as StreamLayerSDKPoints
 };