@streamlayer/react-ui 1.20.0 → 1.21.0

package/lib/app/masters/BetPack/BetPackContent/EmergencyScreen/index.d.ts

@@ -2,4 +2,5 @@ export declare const EmergencyScreen: React.FC<{
     actionFn: () => void;
     description: string;
     isMobile?: boolean;
+    height?: number;
 }>;

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

@@ -1,15 +1,15 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { cx as m } from "@linaria/core";
-import { useDynamicParentFont as s } from "../ScreenContainer/useDynamicParentFont.js";
-import { EmergencyContainer as a, EmergencyScreenTitle as l, EmergencyScreenDescription as g, EmergencyScreenButton as y } from "./styles.js";
-const E = ({ actionFn: n, description: r, isMobile: c }) => {
-  const { container: o, fontSize: t } = s();
-  return /* @__PURE__ */ i(a, { style: { fontSize: t }, ref: o, className: m("betPack", !!c && "isMobile"), children: [
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { cx as s } from "@linaria/core";
+import { useDynamicParentFont as a } from "../ScreenContainer/useDynamicParentFont.js";
+import { EmergencyContainer as g, EmergencyScreenTitle as l, EmergencyScreenDescription as y, EmergencyScreenButton as f } from "./styles.js";
+const d = ({ actionFn: r, description: c, isMobile: n, height: t }) => {
+  const { container: o, fontSize: i } = a(t, n);
+  return /* @__PURE__ */ m(g, { style: { fontSize: i }, ref: o, className: s("betPack", !!n && "isMobile"), children: [
     /* @__PURE__ */ e(l, { children: "Something went wrong." }),
-    /* @__PURE__ */ e(g, { children: r }),
-    /* @__PURE__ */ e(y, { onClick: n, children: "Try again" })
+    /* @__PURE__ */ e(y, { children: c }),
+    /* @__PURE__ */ e(f, { onClick: r, children: "Try again" })
   ] });
 };
 export {
-  E as EmergencyScreen
+  d as EmergencyScreen
 };

package/lib/app/masters/BetPack/BetPackContent/ScreenContainer/useDynamicParentFont.js

@@ -1,27 +1,27 @@
-import { useState as T, useRef as p, useEffect as w } from "react";
-const g = "16px", m = 17, S = 21, f = 24, h = (r) => r < 0.9 ? f : r < 1.17 ? S : m, C = (r, E) => {
-  const [v, a] = T(g), [_, u] = T(""), c = p(null), e = p();
-  return w(() => {
+import { useState as T, useRef as h, useEffect as p } from "react";
+const m = "16px", g = 17, f = 21, S = 24, w = (r) => r < 0.9 ? S : r < 1.17 ? f : g, C = (r, E) => {
+  const [v, a] = T(m), [_, u] = T(""), c = h(null), e = h();
+  return p(() => {
     const t = c.current, n = () => {
       e.current && (clearTimeout(e.current), e.current = void 0), e.current = setTimeout(() => {
         if (t) {
-          const o = getComputedStyle(t), d = +o.width.replace("px", ""), O = +o.height.replace("px", "") / d, l = d / h(O);
+          const i = getComputedStyle(t), d = +i.width.replace("px", ""), O = +i.height.replace("px", "") / d, l = d / w(O);
           a(`${l < 20 ? l : 20}px`);
         }
         e.current = void 0;
       }, 200);
     }, s = () => {
-      window.screen.orientation.type.includes("landscape") || String(window.orientation).includes("90") ? u("landscape") : u("portrait");
-    }, i = () => {
+      window.screen.orientation.type.includes("landscape") || Math.abs(window.orientation) === 90 ? u("landscape") : u("portrait");
+    }, o = () => {
       s(), n();
     };
-    return window.screen.orientation.addEventListener("change", i), window.addEventListener("orientationchange", i), window.addEventListener("resize", n), t == null || t.addEventListener("transitionend", n, !1), s(), n(), () => {
-      window.screen.orientation.removeEventListener("change", i), window.removeEventListener("orientationchange", i), window.removeEventListener("resize", n), t == null || t.removeEventListener("transitionend", n), e.current && clearTimeout(e.current);
+    return window.screen.orientation.addEventListener("change", o), window.addEventListener("orientationchange", o), window.addEventListener("resize", n), t == null || t.addEventListener("transitionend", n, !1), s(), n(), () => {
+      window.screen.orientation.removeEventListener("change", o), window.removeEventListener("orientationchange", o), window.removeEventListener("resize", n), t == null || t.removeEventListener("transitionend", n), e.current && clearTimeout(e.current);
     };
-  }, []), w(() => (e.current && (clearTimeout(e.current), e.current = void 0), e.current = setTimeout(() => {
+  }, []), p(() => (e.current && (clearTimeout(e.current), e.current = void 0), e.current = setTimeout(() => {
     if (c.current) {
-      const t = getComputedStyle(c.current), n = +t.width.replace("px", ""), i = +t.height.replace("px", "") / n, o = n / h(i);
-      a(`${o < 20 ? o : 20}px`), e.current = void 0;
+      const t = getComputedStyle(c.current), n = +t.width.replace("px", ""), o = +t.height.replace("px", "") / n, i = n / w(o);
+      a(`${i < 20 ? i : 20}px`), e.current = void 0;
     }
   }, 200), () => {
     e.current && clearTimeout(e.current);

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

@@ -1,38 +1,38 @@
 import { jsx as u, jsxs as R } from "react/jsx-runtime";
 import { ConnectError as T, Code as N } from "@connectrpc/connect";
 import { cx as A } from "@linaria/core";
-import { useCallback as x, useSyncExternalStore as F, useRef as b, useState as I, useMemo as B, useEffect as v } from "react";
+import { useCallback as P, useSyncExternalStore as F, useRef as b, useState as I, useMemo as B, useEffect as v } from "react";
 import { EmergencyScreen as S } from "./EmergencyScreen/index.js";
-import { EndScreen as D } from "./EndScreen/index.js";
-import { LoaderScreen as H } from "./LoaderScreen/index.js";
-import { QuestionScreen as L } from "./QuestionScreen/index.js";
-import { ScreenContainer as V } from "./ScreenContainer/index.js";
-import { StartScreen as w } from "./StartScreen/index.js";
-import { settings as h } from "./constants.js";
-import { Carousel as K, desktopDots as M } from "./styles.js";
-function q(t, o, n) {
-  let a = new Set(o).add(void 0);
-  return t.listen((s, c, p) => {
-    a.has(p) && n(s, c, p);
+import { EndScreen as M } from "./EndScreen/index.js";
+import { LoaderScreen as D } from "./LoaderScreen/index.js";
+import { QuestionScreen as H } from "./QuestionScreen/index.js";
+import { ScreenContainer as L } from "./ScreenContainer/index.js";
+import { StartScreen as V } from "./StartScreen/index.js";
+import { settings as x } from "./constants.js";
+import { Carousel as K, desktopDots as q } from "./styles.js";
+function z(t, s, r) {
+  let a = new Set(s).add(void 0);
+  return t.listen((o, c, p) => {
+    a.has(p) && r(o, c, p);
   });
 }
-function z(t, o = {}) {
-  let n = x(
-    (s) => o.keys ? q(t, o.keys, s) : t.listen(s),
-    [o.keys, t]
+function E(t, s = {}) {
+  let r = P(
+    (o) => s.keys ? z(t, s.keys, o) : t.listen(o),
+    [s.keys, t]
   ), a = t.get.bind(t);
-  return F(n, a, a);
+  return F(r, a, a);
 }
-const re = ({ gamification: t, autoplay: o, swipeable: n, changeHeightOnInit: a, height: s, onEvent: c, centerPadding: p }) => {
-  const i = b(), l = b(null), [P, C] = I(!1), { data: r, error: f, loading: y } = z(t.betPack.getStore()), { listOfQuestions: m, countQuestionsAvailable: O } = B(() => {
-    const e = r ? Object.values(r) : [];
+const re = ({ gamification: t, autoplay: s, swipeable: r, changeHeightOnInit: a, height: o, onEvent: c, centerPadding: p }) => {
+  const i = b(), l = b(null), [C, O] = I(!1), { data: n, error: f, loading: y } = E(t.betPack.getStore()), { listOfQuestions: m, countQuestionsAvailable: Q } = B(() => {
+    const e = n ? Object.values(n) : [];
     return {
       listOfQuestions: e,
       countQuestionsAvailable: e.filter(({ marketClosed: d }) => !d).length
     };
-  }, [r]);
+  }, [n]);
   v(() => {
-    !f && !y && r !== void 0 && !P && c({
+    !f && !y && n !== void 0 && !C && c({
       type: "slBetPackReady",
       payload: {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -52,31 +52,33 @@ const re = ({ gamification: t, autoplay: o, swipeable: n, changeHeightOnInit: a,
         canPrev: !1
       }
     });
-  }, [r, f, y, c]);
-  const Q = x(
+  }, [n, f, y, c]);
+  const h = P(
     async (e, d) => {
       try {
-        C(!0), await t.betPackVote(e, d);
+        O(!0), await t.betPackVote(e, d);
       } finally {
-        i.current && clearTimeout(i.current), o && (i.current = setTimeout(() => {
+        i.current && clearTimeout(i.current), s && (i.current = setTimeout(() => {
           var k;
           (k = l.current) == null || k.slickNext();
         }, 2e3));
       }
     },
-    [t, l, o]
+    [t, l, s]
   );
   if (v(() => () => {
     i.current && clearTimeout(i.current);
   }, []), y)
-    return /* @__PURE__ */ u(H, {});
-  if (!f && (r == null || !Object.keys(r).length))
+    return /* @__PURE__ */ u(D, {});
+  if (!f && (n == null || !Object.keys(n).length))
     return /* @__PURE__ */ u(
       S,
       {
         actionFn: () => c({ type: "slHardRefresh" }),
         description: `It looks like we couldn't
- load the questions.`
+ load the questions.`,
+        isMobile: r,
+        height: o
       }
     );
   if (f)
@@ -86,19 +88,21 @@ const re = ({ gamification: t, autoplay: o, swipeable: n, changeHeightOnInit: a,
         actionFn: () => c({ type: "slHardRefresh" }),
         description: f instanceof T && f.code !== N.InvalidArgument ? `The event ID was not
 specified or is invalid.` : `The server is unable to
-handle this request.`
+handle this request.`,
+        isMobile: r,
+        height: o
       }
     );
-  const g = (e) => {
+  const j = (e) => {
     var d;
     if (c({
       type: "slBetPackChangeCard",
       payload: {
         current: e,
-        canNext: e < Object.keys(r).length + 1,
+        canNext: e < Object.keys(n).length + 1,
         canPrev: e >= 1
       }
-    }), e !== 0 && e !== Object.keys(r).length + 1 && ((d = m[e - 1]) != null && d.id)) {
+    }), e !== 0 && e !== Object.keys(n).length + 1 && ((d = m[e - 1]) != null && d.id)) {
       t.openQuestion(m[e - 1].id, {
         openedFrom: "bet-pack",
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -115,32 +119,32 @@ handle this request.`
       return;
     }
     t.closeQuestion();
-  }, j = (e) => e ? /* @__PURE__ */ u(V, { height: s, swipeable: n, children: /* @__PURE__ */ u(L, { question: e, vote: Q }) }, e.id) : null;
+  }, g = (e) => e ? /* @__PURE__ */ u(L, { height: o, swipeable: r, children: /* @__PURE__ */ u(H, { question: e, vote: h }) }, e.id) : null;
   return /* @__PURE__ */ R(
     K,
     {
-      ...h,
-      swipe: n,
+      ...x,
+      swipe: r,
       onInit: a,
-      centerPadding: p || h.centerPadding,
-      afterChange: g,
+      centerPadding: p || x.centerPadding,
+      afterChange: j,
       beforeChange: () => {
         i.current && clearTimeout(i.current);
       },
       ref: l,
-      className: A(!n && M),
+      className: A(!r && q),
       children: [
         /* @__PURE__ */ u(
-          w,
+          V,
           {
-            height: s,
+            height: o,
             sliderRef: l,
-            countQuestionsAvailable: O,
-            swipeable: n
+            countQuestionsAvailable: Q,
+            swipeable: r
           }
         ),
-        Object.values(r).map(j),
-        /* @__PURE__ */ u(D, { onEvent: c, height: s, swipeable: n })
+        Object.values(n).map(g),
+        /* @__PURE__ */ u(M, { onEvent: c, height: o, swipeable: r })
       ]
     }
   );

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

@@ -1,9 +1,10 @@
 import "react/jsx-runtime";
 import "@linaria/core";
+import "../../useOrientation.js";
 import "react";
-import { BetPackOverlay as a } from "../index.js";
+import { BetPackOverlay as c } from "../index.js";
 import "../../../../ui/icons/index.js";
 import "./styles.js";
 export {
-  a as BetPackOverlay
+  c as BetPackOverlay
 };

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

@@ -1,93 +1,95 @@
 import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import { cx as x } from "@linaria/core";
-import A from "lodash.throttle";
-import { forwardRef as b, useState as y, useCallback as p, memo as L, useMemo as R, useRef as z, useEffect as F } from "react";
-import { useStore as k } from "@streamlayer/react-polyfills";
-import { FeatureType as I } from "@streamlayer/sdk-web-types";
-import { BetPackContent as O } from "./BetPackContent/index.js";
+import { cx as y } from "@linaria/core";
+import R from "lodash.throttle";
+import { forwardRef as z, useState as k, useCallback as N, useMemo as A, memo as F, useRef as I, useEffect as O } from "react";
+import { useStore as w } from "@streamlayer/react-polyfills";
+import { FeatureType as j } from "@streamlayer/sdk-web-types";
+import { BetPackContent as E } from "./BetPackContent/index.js";
 import { EmergencyScreen as M } from "./BetPackContent/EmergencyScreen/index.js";
-import { LoaderScreen as j } from "./BetPackContent/LoaderScreen/index.js";
-import { BetPackContainer as E } from "./styles.js";
-import { defaultEventHandler as T } from "./utils.js";
-import { SvgIcon as w } from "../../../ui/icons/index.js";
-import { Container as G, Header as U, HeaderTitle as Y, CloseButton as q, Main as D, Footer as J, SlideSwitchButton as C, IconArrowPrev as K, buttonAvailable as H, IconArrowNext as Q } from "./BetPackOverlay/styles.js";
-const tr = b(
-  ({ sdk: m, onEvent: o, close: h, isMobile: a }, g) => {
-    const [c, d] = y(), [r, i] = y(), u = p(
-      (t) => {
-        if (t.type === "slBetPackReady") {
-          const { next: l, prev: s, current: P, canNext: B, canPrev: N } = t.payload || {};
-          d({ next: l, prev: s }), i((n) => ({
-            current: n != null && n.current ? n == null ? void 0 : n.current : P,
-            canPrev: n != null && n.current ? n == null ? void 0 : n.canPrev : N,
-            canNext: B
+import { LoaderScreen as T } from "./BetPackContent/LoaderScreen/index.js";
+import { BetPackContainer as G } from "./styles.js";
+import { defaultEventHandler as U } from "./utils.js";
+import { useOrientation as Y } from "../useOrientation.js";
+import { SvgIcon as C } from "../../../ui/icons/index.js";
+import { Container as q, Header as D, HeaderTitle as J, CloseButton as K, Main as Q, Footer as V, SlideSwitchButton as H, IconArrowPrev as W, buttonAvailable as B, IconArrowNext as X } from "./BetPackOverlay/styles.js";
+const ur = z(
+  ({ sdk: m, onEvent: o, close: u, isMobile: c }, h) => {
+    const [i, d] = k(), [r, t] = k(), { orientation: s } = Y(), l = N(
+      (a) => {
+        if (a.type === "slBetPackReady") {
+          const { next: P, prev: x, current: p, canNext: b, canPrev: L } = a.payload || {};
+          d({ next: P, prev: x }), t((n) => ({
+            current: n != null && n.current ? n == null ? void 0 : n.current : p,
+            canPrev: n != null && n.current ? n == null ? void 0 : n.canPrev : L,
+            canNext: b
           }));
         }
-        if (t.type === "slBetPackChangeCard") {
-          const { current: l, canNext: s, canPrev: P } = t.payload || {};
-          i({ current: l, canNext: s, canPrev: P });
+        if (a.type === "slBetPackChangeCard") {
+          const { current: P, canNext: x, canPrev: p } = a.payload || {};
+          t({ current: P, canNext: x, canPrev: p });
         }
-        o == null || o(t);
+        o == null || o(a);
       },
       [o]
-    );
-    return /* @__PURE__ */ f(G, { ref: g, children: [
-      /* @__PURE__ */ f(U, { children: [
-        /* @__PURE__ */ f(Y, { children: [
-          /* @__PURE__ */ e(w, { name: "icon-trophy-bet-pack" }),
+    ), g = A(() => c ? s === "landscape" ? "60px" : "18px" : "30px", [c, s]);
+    return /* @__PURE__ */ f(q, { ref: h, children: [
+      /* @__PURE__ */ f(D, { children: [
+        /* @__PURE__ */ f(J, { children: [
+          /* @__PURE__ */ e(C, { name: "icon-trophy-bet-pack" }),
           "LiveMatch Experience",
           " "
         ] }),
-        /* @__PURE__ */ e(q, { onClick: h, children: /* @__PURE__ */ e(w, { name: "icon-close-btn-gray" }) })
+        /* @__PURE__ */ e(K, { onClick: u, children: /* @__PURE__ */ e(C, { name: "icon-close-btn-gray" }) })
       ] }),
-      /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(
-        V,
+      /* @__PURE__ */ e(Q, { children: /* @__PURE__ */ e(
+        Z,
         {
           sdk: m,
-          onEvent: u,
-          swipeable: !!a,
-          centerPadding: a ? "18px" : "30px",
-          heightOffset: a ? 0 : 48
+          onEvent: l,
+          swipeable: !!c,
+          centerPadding: g,
+          heightOffset: c ? 0 : 48
         }
       ) }),
-      !a && /* @__PURE__ */ f(J, { children: [
-        /* @__PURE__ */ e(C, { onClick: c == null ? void 0 : c.prev, disabled: !(r != null && r.canPrev), children: /* @__PURE__ */ e(K, { name: "iconArrowPrev", className: x((r == null ? void 0 : r.canPrev) && H) }) }),
-        /* @__PURE__ */ e(C, { onClick: c == null ? void 0 : c.next, disabled: !(r != null && r.canNext), children: /* @__PURE__ */ e(Q, { name: "iconArrowPrev", className: x((r == null ? void 0 : r.canNext) && H) }) })
+      !c && /* @__PURE__ */ f(V, { children: [
+        /* @__PURE__ */ e(H, { onClick: i == null ? void 0 : i.prev, disabled: !(r != null && r.canPrev), children: /* @__PURE__ */ e(W, { name: "iconArrowPrev", className: y((r == null ? void 0 : r.canPrev) && B) }) }),
+        /* @__PURE__ */ e(H, { onClick: i == null ? void 0 : i.next, disabled: !(r != null && r.canNext), children: /* @__PURE__ */ e(X, { name: "iconArrowPrev", className: y((r == null ? void 0 : r.canNext) && B) }) })
       ] })
     ] });
   }
-), V = L(({ sdk: m, swipeable: o = !0, heightOffset: h = 65, onEvent: a = T, centerPadding: g }) => {
-  const c = k(m.featuresList.getStore()), d = R(() => m.getFeature(I.GAMES), [c]), r = k(m.getUserStore()), i = z(null), [u, t] = y(), l = p(() => {
-    i.current && t(i.current.clientHeight);
+), Z = F(({ sdk: m, swipeable: o = !0, heightOffset: u = 65, onEvent: c = U, centerPadding: h }) => {
+  const i = w(m.featuresList.getStore()), d = A(() => m.getFeature(j.GAMES), [i]), r = w(m.getUserStore()), t = I(null), [s, l] = k(), g = N(() => {
+    t.current && l(t.current.clientHeight);
   }, []);
-  return F(() => {
-    const s = A(() => {
-      i.current && t(i.current.clientHeight);
+  return O(() => {
+    const a = R(() => {
+      t.current && l(t.current.clientHeight);
     }, 200);
-    return window.addEventListener("resize", s), () => {
-      window.removeEventListener("resize", s);
+    return window.addEventListener("resize", a), () => {
+      window.removeEventListener("resize", a);
     };
-  }, []), r.data ? d ? /* @__PURE__ */ e(E, { ref: i, className: x("betPack", o && "isMobile"), children: /* @__PURE__ */ e(
-    O,
+  }, []), r.data ? d ? /* @__PURE__ */ e(G, { ref: t, className: y("betPack", o && "isMobile"), children: /* @__PURE__ */ e(
+    E,
     {
       gamification: d,
-      onEvent: a,
+      onEvent: c,
       swipeable: o,
-      centerPadding: g,
-      changeHeightOnInit: l,
-      height: u ? u - h : void 0
+      centerPadding: h,
+      changeHeightOnInit: g,
+      height: s ? s - u : void 0
     }
   ) }) : /* @__PURE__ */ e("div", { children: "no gamification" }) : r.error && !r.loading ? /* @__PURE__ */ e(
     M,
     {
-      actionFn: () => a({ type: "slHardRefresh" }),
+      actionFn: () => c({ type: "slHardRefresh" }),
       description: `You are not authorized to
 view this resource.`,
-      isMobile: o
+      isMobile: o,
+      height: s ? s - u : void 0
     }
-  ) : /* @__PURE__ */ e(j, {});
+  ) : /* @__PURE__ */ e(T, {});
 });
 export {
-  V as BetPack,
-  tr as BetPackOverlay
+  Z as BetPack,
+  ur as BetPackOverlay
 };

package/lib/app/masters/Features/Gamification/index.d.ts

@@ -1,5 +1,4 @@
 import { AppNodeRef } from '../../..';
-import { ResponsiveStore } from '../../useSdkResponsive';
 import { Gamification as GamificationClass } from '@streamlayer/feature-gamification';
 export declare const GamificationOverlay: React.FC<{
     gamification: GamificationClass;
@@ -12,6 +11,5 @@ export declare const GamificationOverlay: React.FC<{
 export declare const GamificationOverlayStandalone: React.FC<{
     gamification: GamificationClass;
     className?: string;
-    responsiveStore: ResponsiveStore;
     appNode: AppNodeRef;
 }>;

package/lib/app/masters/Features/Gamification/index.js

@@ -1,49 +1,44 @@
 import { jsx as n } from "react/jsx-runtime";
-import { styled as u } from "@linaria/react";
-import { useHideTransition as c } from "../../../../hooks/showIn.js";
-import { useStore as t } from "@streamlayer/react-polyfills";
-import { ModalPortal as d } from "../../../../ui/modal/index.js";
-import { ShowIn as l } from "../../../../ui/show-in/index.js";
-import { Question as f } from "./Question.js";
-import { Tabs as k } from "./Tabs.js";
-const h = () => l, y = /* @__PURE__ */ u(h())({
+import { styled as m } from "@linaria/react";
+import { useHideTransition as a } from "../../../../hooks/showIn.js";
+import { useStore as l } from "@streamlayer/react-polyfills";
+import { ModalPortal as p } from "../../../../ui/modal/index.js";
+import { ShowIn as u } from "../../../../ui/show-in/index.js";
+import { Question as c } from "./Question.js";
+import { Tabs as f } from "./Tabs.js";
+const d = () => u, h = /* @__PURE__ */ m(d())({
   name: "OpenedContainer",
   class: "o1seszvt",
   propsAsIs: !0
-}), A = ({
+}), G = ({
   gamification: o,
-  className: e
-}) => /* @__PURE__ */ n(k, {
-  className: e,
+  className: r
+}) => /* @__PURE__ */ n(f, {
+  className: r,
   gamification: o
-}), D = ({
+}), I = ({
   gamification: o,
-  className: e,
-  appNode: r,
-  responsiveStore: i
+  className: r,
+  appNode: e
 }) => {
-  const s = t(o.openedQuestion.$store), {
-    sdkInDesktopView: m
-  } = t(i, {
-    keys: ["sdkInDesktopView"]
-  }), {
-    hiding: a,
-    onAnimationEnd: p
-  } = c();
-  return !r.current || !s ? null : /* @__PURE__ */ n(d, {
-    container: r,
-    useContainer: !m,
-    children: /* @__PURE__ */ n(y, {
-      className: e,
-      hiding: a,
-      onAnimationEnd: p,
-      children: /* @__PURE__ */ n(f, {
+  const t = l(o.openedQuestion.$store), {
+    hiding: i,
+    onAnimationEnd: s
+  } = a();
+  return !e.current || !t ? null : /* @__PURE__ */ n(p, {
+    container: e,
+    useContainer: !1,
+    children: /* @__PURE__ */ n(h, {
+      className: r,
+      hiding: i,
+      onAnimationEnd: s,
+      children: /* @__PURE__ */ n(c, {
         gamification: o
       })
     })
   });
 };
 export {
-  A as GamificationOverlay,
-  D as GamificationOverlayStandalone
+  G as GamificationOverlay,
+  I as GamificationOverlayStandalone
 };

package/lib/app/masters/Features/index.d.ts

@@ -1,5 +1,4 @@
 import { AppNodeRef } from '../..';
-import { ResponsiveStore } from '../useSdkResponsive';
 import { Features } from '@streamlayer/sdk-web-features';
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 /** render feature by type */
@@ -12,7 +11,6 @@ export declare const ActiveFeature: React.FC<{
 export declare const StandaloneFeature: React.FC<{
     sdk: StreamLayerSDK;
     feature: Features | null;
-    responsiveStore: ResponsiveStore;
     appNode: AppNodeRef;
     className?: string;
 }>;

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

@@ -1,26 +1,18 @@
 import { jsx as r } from "react/jsx-runtime";
 import { lazy as l, useMemo as a, Suspense as m } from "react";
-import { FeatureType as o } from "@streamlayer/sdk-web-types";
+import { FeatureType as n } from "@streamlayer/sdk-web-types";
 import { FeatureProvider as u } from "./FeatureProvider.js";
 import { GamificationOverlayStandalone as f } from "./Gamification/index.js";
 const c = l(() => import("./Gamification/gamification-feature.js")), h = ({ sdk: e, feature: t, className: i }) => {
-  const n = a(() => t && t.featureConfig.get().type === o.GAMES ? /* @__PURE__ */ r(u, { className: i, sdk: e, feature: t, children: /* @__PURE__ */ r(c, { className: i, gamification: t }) }) : null, [e, t, i]);
+  const o = a(() => t && t.featureConfig.get().type === n.GAMES ? /* @__PURE__ */ r(u, { className: i, sdk: e, feature: t, children: /* @__PURE__ */ r(c, { className: i, gamification: t }) }) : null, [e, t, i]);
   return /* @__PURE__ */ r(
     m,
     {
       fallback: /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
-      children: n
+      children: o
     }
   );
-}, v = ({ feature: e, className: t, appNode: i, responsiveStore: n }) => e && e.featureConfig.get().type === o.GAMES ? /* @__PURE__ */ r(
-  f,
-  {
-    className: t,
-    appNode: i,
-    responsiveStore: n,
-    gamification: e
-  }
-) : null;
+}, v = ({ feature: e, className: t, appNode: i }) => e && e.featureConfig.get().type === n.GAMES ? /* @__PURE__ */ r(f, { className: t, appNode: i, gamification: e }) : null;
 export {
   h as ActiveFeature,
   v as StandaloneFeature

package/lib/app/masters/Notifications/Onboarding/index.d.ts

@@ -7,7 +7,6 @@ export declare const Onboarding: React.FC<{
     notification: Notification;
     saveHeight: (height: number) => void;
     appNode: AppNodeRef;
-    sdkInDesktopView?: boolean;
     style?: React.CSSProperties;
     responsiveStore: ResponsiveStore;
 }>;