@streamlayer/react-ui 1.21.0 → 1.22.0

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

@@ -1,32 +1,32 @@
 import { jsxs as f, jsx as e } from "react/jsx-runtime";
 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 { forwardRef as b, useState as C, useCallback as N, useMemo as A, memo as z, useRef as L, useEffect as O } from "react";
+import { useStore as H } 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 T } from "./BetPackContent/LoaderScreen/index.js";
-import { BetPackContainer as G } from "./styles.js";
+import { BetPackContent as G } from "./BetPackContent/index.js";
+import { EmergencyScreen as T } from "./BetPackContent/EmergencyScreen/index.js";
+import { LoaderScreen as E } from "./BetPackContent/LoaderScreen/index.js";
+import { BetPackContainer as M } 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(
+import { SvgIcon as k } 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 p, IconArrowPrev as W, buttonAvailable as B, IconArrowNext as X } from "./BetPackOverlay/styles.js";
+const ur = b(
   ({ sdk: m, onEvent: o, close: u, isMobile: c }, h) => {
-    const [i, d] = k(), [r, t] = k(), { orientation: s } = Y(), l = N(
+    const [i, d] = C(), [r, t] = C(), { orientation: s } = Y(), l = N(
       (a) => {
         if (a.type === "slBetPackReady") {
-          const { next: P, prev: x, current: p, canNext: b, canPrev: L } = a.payload || {};
+          const { next: P, prev: x, current: w, canNext: F, canPrev: I } = 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
+            current: n != null && n.current ? n == null ? void 0 : n.current : w,
+            canPrev: n != null && n.current ? n == null ? void 0 : n.canPrev : I,
+            canNext: F
           }));
         }
         if (a.type === "slBetPackChangeCard") {
-          const { current: P, canNext: x, canPrev: p } = a.payload || {};
-          t({ current: P, canNext: x, canPrev: p });
+          const { current: P, canNext: x, canPrev: w } = a.payload || {};
+          t({ current: P, canNext: x, canPrev: w });
         }
         o == null || o(a);
       },
@@ -35,11 +35,11 @@ const ur = z(
     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(k, { name: "fgIcon" }),
+          "Featured Groups+",
           " "
         ] }),
-        /* @__PURE__ */ e(K, { onClick: u, children: /* @__PURE__ */ e(C, { name: "icon-close-btn-gray" }) })
+        /* @__PURE__ */ e(K, { onClick: u, children: /* @__PURE__ */ e(k, { name: "icon-close-btn-gray" }) })
       ] }),
       /* @__PURE__ */ e(Q, { children: /* @__PURE__ */ e(
         Z,
@@ -52,13 +52,13 @@ const ur = z(
         }
       ) }),
       !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) }) })
+        /* @__PURE__ */ e(p, { 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(p, { 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) }) })
       ] })
     ] });
   }
-), 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(() => {
+), Z = z(({ sdk: m, swipeable: o = !0, heightOffset: u = 65, onEvent: c = U, centerPadding: h }) => {
+  const i = H(m.featuresList.getStore()), d = A(() => m.getFeature(j.GAMES), [i]), r = H(m.getUserStore()), t = L(null), [s, l] = C(), g = N(() => {
     t.current && l(t.current.clientHeight);
   }, []);
   return O(() => {
@@ -68,8 +68,8 @@ const ur = z(
     return window.addEventListener("resize", a), () => {
       window.removeEventListener("resize", a);
     };
-  }, []), r.data ? d ? /* @__PURE__ */ e(G, { ref: t, className: y("betPack", o && "isMobile"), children: /* @__PURE__ */ e(
-    E,
+  }, []), r.data ? d ? /* @__PURE__ */ e(M, { ref: t, className: y("betPack", o && "isMobile"), children: /* @__PURE__ */ e(
+    G,
     {
       gamification: d,
       onEvent: c,
@@ -79,7 +79,7 @@ const ur = z(
       height: s ? s - u : void 0
     }
   ) }) : /* @__PURE__ */ e("div", { children: "no gamification" }) : r.error && !r.loading ? /* @__PURE__ */ e(
-    M,
+    T,
     {
       actionFn: () => c({ type: "slHardRefresh" }),
       description: `You are not authorized to
@@ -87,7 +87,7 @@ view this resource.`,
       isMobile: o,
       height: s ? s - u : void 0
     }
-  ) : /* @__PURE__ */ e(T, {});
+  ) : /* @__PURE__ */ e(E, {});
 });
 export {
   Z as BetPack,

package/lib/app/masters/BetPack/utils.d.ts

@@ -1,4 +1,4 @@
-export type AllowedMessageType = 'slBetPackReady' | 'slOpenGameCenter' | 'slHardRefresh' | 'slBetPackChangeCard';
+export type AllowedMessageType = 'slBetPackReady' | 'slOpenGameCenter' | 'slHardRefresh' | 'slBetPackChangeCard' | 'slVoted';
 declare global {
     interface Window {
         webkit?: {

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

@@ -1,10 +1,11 @@
-import { createLogger as n } from "@streamlayer/sdk-web-logger";
-const o = "slBetPackCb", w = n("betPack-ui"), d = (e, s = {}) => {
-  var t, i;
-  w.debug({ id: o, type: e, ...s }), (t = window.top) == null || t.postMessage({ id: o, type: e, ...s }, "*"), window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers[o] && window.webkit.messageHandlers[o].postMessage({ type: e, ...s }), (i = window.slBetPackCb) != null && i.postMessage && window.slBetPackCb.postMessage(JSON.stringify({ type: e, ...s, from: "base" }));
-}, a = (e) => {
-  d(e.type);
+import { createLogger as w } from "@streamlayer/sdk-web-logger";
+const o = "slBetPackCb", g = w("betPack-ui"), r = (s, d = {}) => {
+  var a, t;
+  const { questionId: i, answerId: n } = d, e = { questionId: i, answerId: n };
+  g.debug({ id: o, type: s, ...e }), (a = window.top) == null || a.postMessage({ id: o, type: s, ...e }, "*"), window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers[o] && window.webkit.messageHandlers[o].postMessage({ type: s, ...e }), (t = window.slBetPackCb) != null && t.postMessage && window.slBetPackCb.postMessage(JSON.stringify({ type: s, ...e, from: "base" }));
+}, c = (s) => {
+  r(s.type, s.payload);
 };
 export {
-  a as defaultEventHandler
+  c as defaultEventHandler
 };

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

@@ -1,4 +1,5 @@
 import { AppNodeRef } from '../../..';
+import { ResponsiveStore } from '../../useSdkResponsive';
 import { Gamification as GamificationClass } from '@streamlayer/feature-gamification';
 export declare const GamificationOverlay: React.FC<{
     gamification: GamificationClass;
@@ -11,5 +12,6 @@ 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,44 +1,49 @@
 import { jsx as n } from "react/jsx-runtime";
-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())({
+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())({
   name: "OpenedContainer",
   class: "o1seszvt",
   propsAsIs: !0
-}), G = ({
+}), A = ({
   gamification: o,
-  className: r
-}) => /* @__PURE__ */ n(f, {
-  className: r,
+  className: e
+}) => /* @__PURE__ */ n(k, {
+  className: e,
   gamification: o
-}), I = ({
+}), D = ({
   gamification: o,
-  className: r,
-  appNode: e
+  responsiveStore: e,
+  className: i,
+  appNode: r
 }) => {
-  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, {
+  const s = t(o.openedQuestion.$store), {
+    sdkInDesktopView: m
+  } = t(e, {
+    keys: ["sdkInDesktopView"]
+  }), {
+    hiding: a,
+    onAnimationEnd: p
+  } = c();
+  return !r.current || !s ? null : /* @__PURE__ */ n(d, {
+    container: r,
+    useContainer: !m,
+    children: /* @__PURE__ */ n(y, {
+      className: i,
+      hiding: a,
+      onAnimationEnd: p,
+      children: /* @__PURE__ */ n(f, {
         gamification: o
       })
     })
   });
 };
 export {
-  G as GamificationOverlay,
-  I as GamificationOverlayStandalone
+  A as GamificationOverlay,
+  D as GamificationOverlayStandalone
 };

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

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

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

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

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

@@ -1,38 +1,34 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { cx as a } from "@linaria/core";
-import { styled as s } from "@linaria/react";
-import { forwardRef as t } from "react";
-import { SvgIcon as c } from "../../../ui/icons/index.js";
-const i = /* @__PURE__ */ s("div")({
+import { jsxs as r, jsx as s } from "react/jsx-runtime";
+import { cx as t } from "@linaria/core";
+import { styled as o } from "@linaria/react";
+import { forwardRef as a } from "react";
+import { SvgIcon as i } from "../../../ui/icons/index.js";
+const c = /* @__PURE__ */ o("div")({
   name: "Navigation",
   class: "n1o1tw60",
   propsAsIs: !1
-}), m = /* @__PURE__ */ s("div")({
+}), m = /* @__PURE__ */ o("div")({
   name: "Container",
   class: "co2rstw",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ o("div")({
   name: "Title",
   class: "t1bqnx9c",
   propsAsIs: !1
-}), l = () => c, d = /* @__PURE__ */ s(l())({
-  name: "HeaderIcon",
-  class: "hlc2pcy",
-  propsAsIs: !0
-}), f = "h1aqxe8k", g = t(({
-  className: o
-}, n) => /* @__PURE__ */ r(i, {
-  className: a(o, f),
-  children: [/* @__PURE__ */ e(m, {
-    children: /* @__PURE__ */ r(p, {
-      children: [/* @__PURE__ */ e(d, {
-        name: "icon-trivia-transparent"
-      }), "Game Center"]
+}), p = "hlc2pcy", I = a(({
+  className: e
+}, n) => /* @__PURE__ */ r(c, {
+  className: t(e, p),
+  children: [/* @__PURE__ */ s(m, {
+    children: /* @__PURE__ */ r(l, {
+      children: [/* @__PURE__ */ s(i, {
+        name: "fgIcon"
+      }), "FG+ Game Center", " "]
     })
-  }), /* @__PURE__ */ e("div", {
+  }), /* @__PURE__ */ s("div", {
     ref: n
   })]
 }));
 export {
-  g as SDKHeader
+  I as SDKHeader
 };

package/lib/app/masters/masters.js

@@ -1,85 +1,99 @@
 import { jsxs as f, jsx as a } from "react/jsx-runtime";
-import { cx as w } from "@linaria/core";
-import { SDKContainer as L, SDKScrollContainer as N } from "./styles.js";
-import { useSdkScroll as x } from "./useSdkScroll.js";
-import { useSdkFeature as y } from "../useSdkFeature.js";
+import { cx as A } from "@linaria/core";
+import { SDKContainer as E, SDKScrollContainer as L } from "./styles.js";
+import { useSdkScroll as M } from "./useSdkScroll.js";
+import { useSdkFeature as N } from "../useSdkFeature.js";
 import { useAnalyticsListener as h, newTabLinkListener as F } from "../../hooks/analytics.js";
-import A from "lodash.throttle";
-import { useState as b, useMemo as E, useRef as d, useEffect as p } from "react";
-import { useStore as c } from "@streamlayer/react-polyfills";
-import { FeatureType as I } from "@streamlayer/sdk-web-types";
+import x from "lodash.throttle";
+import { useState as b, useMemo as y, useCallback as C, useRef as p, useEffect as S } from "react";
+import { useStore as m } from "@streamlayer/react-polyfills";
+import { FeatureType as w } from "@streamlayer/sdk-web-types";
 import { resetCss as u } from "../../ui/theme/theme.js";
-import { BetPackOverlay as M } from "./BetPack/index.js";
-import { ActiveFeature as k, StandaloneFeature as z } from "./Features/index.js";
-import { SDKHeader as C } from "./Header/index.js";
-import { SDKNotifications as P } from "./Notifications/index.js";
-import { MastersContext as g } from "./useMastersContext.js";
-import { checkSdkInDesktopView as S, getScreenSize as v, useSdkResponsive as D } from "./useSdkResponsive.js";
-import { StreamLayerMastersThemeProvider as se } from "../../ui/theme/masters.js";
-const B = ({ sdk: e, className: t }) => {
-  const [, r] = y(e);
-  return /* @__PURE__ */ a(k, { className: t, feature: r, sdk: e });
-}, K = ({ sdk: e, className: t, appNode: r }) => {
-  const o = c(e.featuresList.getStore());
-  return o ? Array.from(o, (n) => {
-    const s = e.getFeature(n);
-    return s ? /* @__PURE__ */ a(z, { className: t, appNode: r, feature: s, sdk: e }, n) : null;
+import { BetPackOverlay as I } from "./BetPack/index.js";
+import { ActiveFeature as P, StandaloneFeature as z } from "./Features/index.js";
+import { SDKHeader as g } from "./Header/index.js";
+import { SDKNotifications as B } from "./Notifications/index.js";
+import { MastersContext as D } from "./useMastersContext.js";
+import { checkSdkInDesktopView as d, getScreenSize as v, useSdkResponsive as K } from "./useSdkResponsive.js";
+import { StreamLayerMastersThemeProvider as ae } from "../../ui/theme/masters.js";
+const G = ({ sdk: e, className: t }) => {
+  const [, r] = N(e);
+  return /* @__PURE__ */ a(P, { className: t, feature: r, sdk: e });
+}, O = ({ sdk: e, className: t, appNode: r, responsiveStore: i }) => {
+  const n = m(e.featuresList.getStore());
+  return n ? Array.from(n, (o) => {
+    const c = e.getFeature(o);
+    return c ? /* @__PURE__ */ a(
+      z,
+      {
+        responsiveStore: i,
+        className: t,
+        appNode: r,
+        feature: c,
+        sdk: e
+      },
+      o
+    ) : null;
   }) : null;
-}, O = (e) => {
-  const [t, r] = b(!S(v().size)), o = d(null);
-  return p(() => {
-    const n = A(() => {
-      const s = v();
-      r(!S(s.size));
+}, R = (e) => {
+  const [t, r] = b(!d(v().size)), i = p(null);
+  return S(() => {
+    const n = x(() => {
+      const o = v();
+      r(!d(o.size));
     }, 200);
     return window.addEventListener("resize", n), () => {
       window.removeEventListener("resize", n);
     };
-  }, []), h(o, { enabled: !0, event: "click", listener: F }), /* @__PURE__ */ a(M, { ref: o, ...e, isMobile: t });
-}, R = ({ sdk: e }) => {
-  const t = d(null), r = c(e.status), o = c(e.sdkStore.slStreamId), n = d(null), [s] = D(t), [i, l] = x(t, s), m = r === "ready" && !!o.data;
-  return p(() => {
+  }, []), h(i, { enabled: !0, event: "click", listener: F }), /* @__PURE__ */ a(I, { ref: i, ...e, isMobile: t });
+}, j = ({ sdk: e }) => {
+  const t = p(null), r = m(e.status), i = m(e.sdkStore.slStreamId), n = p(null), [o] = K(t), [c, l] = M(t, o), s = r === "ready" && !!i.data;
+  return S(() => {
     window.requestAnimationFrame(() => {
       e.initializeApp().then(() => {
-        e.openFeature(I.GAMES);
+        e.openFeature(w.GAMES);
       });
     });
-  }, [e]), h(t, { enabled: !0, event: "click", listener: F }), p(() => {
+  }, [e]), h(t, { enabled: !0, event: "click", listener: F }), S(() => {
     import("./Features/Gamification/gamification-feature.js");
-  }, []), /* @__PURE__ */ f(L, { ref: t, children: [
-    /* @__PURE__ */ a(C, { className: w(u, "sl-hide-on-modal"), ref: n }),
-    /* @__PURE__ */ f(N, { "data-nav": !0, className: "sl-hide-on-modal", ref: i, children: [
-      m && /* @__PURE__ */ a(
-        P,
+  }, []), /* @__PURE__ */ f(E, { ref: t, children: [
+    /* @__PURE__ */ a(g, { className: A(u), ref: n }),
+    /* @__PURE__ */ f(L, { className: "sl-hide-on-modal", ref: c, children: [
+      s && /* @__PURE__ */ a(
+        B,
         {
           sdk: e,
-          scrollNode: i,
+          scrollNode: c,
           headerNode: n,
           appNode: t,
           scrollStore: l,
-          responsiveStore: s
+          responsiveStore: o
         }
       ),
-      m && /* @__PURE__ */ a(B, { className: u, sdk: e }),
-      m && /* @__PURE__ */ a(K, { appNode: t, className: u, sdk: e })
+      s && /* @__PURE__ */ a(G, { className: u, sdk: e }),
+      s && /* @__PURE__ */ a(O, { responsiveStore: o, appNode: t, className: u, sdk: e })
     ] })
   ] });
-}, re = ({ sdk: e, betPack: t }) => {
-  const [r, o] = b(t), s = !!c(e.userId()), i = E(() => ({ sdk: e }), [e]);
-  return /* @__PURE__ */ f(g.Provider, { value: i, children: [
-    r && s && /* @__PURE__ */ a(
-      O,
+}, oe = ({ sdk: e, betPack: t }) => {
+  const [r, i] = b(t), o = !!m(e.userId()), c = y(() => ({ sdk: e }), [e]), l = C(() => {
+    i(!1);
+    const s = e == null ? void 0 : e.getFeature(w.GAMES);
+    s == null || s.closeQuestion();
+  }, [e]);
+  return /* @__PURE__ */ f(D.Provider, { value: c, children: [
+    r && o && /* @__PURE__ */ a(
+      R,
       {
         sdk: e,
-        onEvent: ({ type: l }) => l === "slOpenGameCenter" ? o(!1) : () => {
+        onEvent: ({ type: s }) => s === "slOpenGameCenter" ? l() : () => {
         },
-        close: () => o(!1)
+        close: () => l()
       }
     ),
-    !r && /* @__PURE__ */ a(R, { sdk: e })
+    !r && /* @__PURE__ */ a(j, { sdk: e })
   ] });
 };
 export {
-  re as MastersApp,
-  se as StreamLayerMastersThemeProvider
+  oe as MastersApp,
+  ae as StreamLayerMastersThemeProvider
 };

package/lib/app/masters/useSdkResponsive.js

@@ -1,7 +1,7 @@
 import c from "lodash.throttle";
 import { useState as m, useEffect as u } from "react";
 import { BREAKPOINTS as r } from "../../ui/theme/constants.js";
-import { m as l } from "../../index-CLJzLXks.js";
+import { m as l } from "../../index-DSi8Qgfs.js";
 const d = Object.keys(r), i = () => {
   const n = window.innerWidth;
   let e = "sm";
@@ -19,7 +19,7 @@ const d = Object.keys(r), i = () => {
 }, w = (n) => {
   var e;
   return (((e = n.current) == null ? void 0 : e.getBoundingClientRect().y) || 0) < -68;
-}, k = (n) => n >= r.xl, v = (n) => {
+}, k = (n) => n >= r.lg, v = (n) => {
   const [e] = m(() => {
     const t = i();
     return l({

package/lib/app/masters/useSdkScroll.js

@@ -1,24 +1,24 @@
 import S from "lodash.throttle";
-import { useRef as m, useState as h, useEffect as b } from "react";
-import { useStore as g } from "@streamlayer/react-polyfills";
+import { useRef as m, useState as g, useEffect as h } from "react";
+import { useStore as b } from "@streamlayer/react-polyfills";
 import { BREAKPOINTS as c } from "../../ui/theme/constants.js";
-import { m as v } from "../../index-CLJzLXks.js";
-const C = (o, e, n) => {
+import { m as v } from "../../index-DSi8Qgfs.js";
+const D = (o, e, n) => {
   const t = e >= c.lg && e < c.xl ? 75 : 52;
   o.current && window.scrollTo({
     top: o.current.offsetTop - t,
     ...n
   });
-}, T = 15, D = (o, e) => {
-  const n = m(null), t = m(0), [s] = h(
+}, T = 15, L = (o, e) => {
+  const n = m(null), t = m(0), [s] = g(
     v({
       scrollPosition: 0,
       tabsShown: !0,
       scrollDirection: "forward"
     })
-  ), i = g(e);
-  return b(() => {
-    const l = window.innerWidth < c.xl ? window : n.current;
+  ), i = b(e);
+  return h(() => {
+    const l = window.innerWidth < c.lg ? window : n.current;
     if (!l)
       return () => {
       };
@@ -28,7 +28,7 @@ const C = (o, e, n) => {
       if (!u)
         return;
       let r = 0;
-      i.screen.size < c.xl ? r = ((a = o.current) == null ? void 0 : a.getBoundingClientRect().y) || 0 : r = u.scrollTop;
+      i.screen.size < c.lg ? r = ((a = o.current) == null ? void 0 : a.getBoundingClientRect().y) || 0 : r = u.scrollTop;
       const w = t.current - r;
       if (T > Math.abs(w))
         return;
@@ -45,6 +45,6 @@ const C = (o, e, n) => {
   }, [s, o, i.screen]), [n, s];
 };
 export {
-  C as scrollIntoAppView,
-  D as useSdkScroll
+  D as scrollIntoAppView,
+  L as useSdkScroll
 };

package/lib/app/useSdkResponsive.js

@@ -1,7 +1,7 @@
 import i from "lodash.throttle";
 import { useState as m, useEffect as a } from "react";
 import { BREAKPOINTS as r } from "../ui/theme/constants.js";
-import { m as u } from "../index-CLJzLXks.js";
+import { m as u } from "../index-DSi8Qgfs.js";
 const o = Object.keys(r), c = () => {
   const t = window.innerWidth;
   let e = "sm";

package/lib/app/useSdkScroll.js

@@ -3,7 +3,7 @@ import { useRef as u, useState as b, useEffect as g } from "react";
 import { useStore as k } from "@streamlayer/react-polyfills";
 import { BREAKPOINTS as a } from "../ui/theme/constants.js";
 import { checkSdkInDesktopView as m } from "./useSdkResponsive.js";
-import { m as v } from "../index-CLJzLXks.js";
+import { m as v } from "../index-DSi8Qgfs.js";
 const I = (o, e, n) => {
   const t = e >= a.lg && e < a.xl ? 75 : 52;
   o.current && window.scrollTo({