@streamlayer/react-ui 1.22.4 → 1.22.5

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

@@ -14,4 +14,5 @@ export declare const GamificationOverlayStandalone: React.FC<{
     className?: string;
     responsiveStore: ResponsiveStore;
     appNode: AppNodeRef;
+    useContainer?: boolean;
 }>;

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

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

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

@@ -15,4 +15,5 @@ export declare const StandaloneFeature: React.FC<{
     appNode: AppNodeRef;
     responsiveStore: ResponsiveStore;
     className?: string;
+    useContainer?: boolean;
 }>;

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

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

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

@@ -9,4 +9,5 @@ export declare const SDKNotifications: React.FC<{
     headerNode: HeaderNodeRef;
     scrollStore: ScrollStore;
     responsiveStore: ResponsiveStore;
+    useContainer?: boolean;
 }>;

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

@@ -1,159 +1,162 @@
-import { jsxs as g, Fragment as V, jsx as c } from "react/jsx-runtime";
-import { cx as D } from "@linaria/core";
-import { useMastersContext as T } from "../useMastersContext.js";
-import { scrollIntoAppView as q } from "../useSdkScroll.js";
-import { useState as f, useMemo as E, useEffect as h, useRef as O, useCallback as w } from "react";
-import { r as b } from "../../../index-DALxy-8N.js";
-import { useStore as p } from "@streamlayer/react-polyfills";
+import { jsxs as f, Fragment as D, jsx as l } from "react/jsx-runtime";
+import { cx as T } from "@linaria/core";
+import { useMastersContext as q } from "../useMastersContext.js";
+import { scrollIntoAppView as E } from "../useSdkScroll.js";
+import { useState as p, useMemo as O, useEffect as a, useRef as b, useCallback as N } from "react";
+import { r as R } from "../../../index-DALxy-8N.js";
+import { useStore as y } from "@streamlayer/react-polyfills";
 import { eventBus as C } from "@streamlayer/sdk-web-interfaces";
-import { NotificationType as a } from "@streamlayer/sdk-web-notifications";
-import { QuestionTypeData as R } from "../../../ui/gamification/constants.js";
-import { Notification as N } from "../../../ui/gamification/question/notification/index.js";
-import { PredictionResult as P } from "../../../ui/gamification/question/notification/prediction-result/index.js";
-import { Onboarding as x } from "./Onboarding/index.js";
-import { HiddenContainer as A, Container as B, InnerContainer as H, NotificationRefreshing as Q, Pill as U } from "./styles.js";
-const j = (n) => {
-  const [t, u] = f(0), i = O(null), l = w((o) => {
-    i.current = o;
+import { NotificationType as g } from "@streamlayer/sdk-web-notifications";
+import { QuestionTypeData as P } from "../../../ui/gamification/constants.js";
+import { Notification as V } from "../../../ui/gamification/question/notification/index.js";
+import { PredictionResult as x } from "../../../ui/gamification/question/notification/prediction-result/index.js";
+import { Onboarding as A } from "./Onboarding/index.js";
+import { HiddenContainer as B, Container as H, InnerContainer as Q, NotificationRefreshing as U, Pill as j } from "./styles.js";
+const z = (n) => {
+  const [t, c] = p(0), u = b(null), e = N((o) => {
+    u.current = o;
   }, []);
-  h(() => {
-    var d;
-    const o = (d = i.current) == null ? void 0 : d.getBoundingClientRect();
-    o && u(o.height);
+  a(() => {
+    var s;
+    const o = (s = u.current) == null ? void 0 : s.getBoundingClientRect();
+    o && c(o.height);
   }, [n]);
-  const r = w((o) => {
-    u(o);
+  const r = N((o) => {
+    c(o);
   }, []);
-  return [l, t, r];
-}, z = ({
+  return [e, t, r];
+}, F = ({
   sdk: n,
   notification: t,
-  appNode: u,
-  responsiveStore: i
+  appNode: c,
+  responsiveStore: u
 }) => {
-  var m, s;
+  var h, d;
   const {
-    sdk: l
-  } = T(), [r, o, d] = j(t.id);
-  return t.type === a.QUESTION ? /* @__PURE__ */ g(V, {
-    children: [/* @__PURE__ */ c(A, {
+    sdk: e
+  } = q(), [r, o, s] = z(t.id);
+  return t.type === g.QUESTION ? /* @__PURE__ */ f(D, {
+    children: [/* @__PURE__ */ l(B, {
       ref: r,
-      children: /* @__PURE__ */ c(N, {
+      children: /* @__PURE__ */ l(V, {
         ...t
       })
-    }), /* @__PURE__ */ g(B, {
+    }), /* @__PURE__ */ f(H, {
       style: {
         height: t.hiding ? 0 : o
       },
       hiding: t.hiding,
-      children: [/* @__PURE__ */ c(H, {
+      children: [/* @__PURE__ */ l(Q, {
         style: {
           height: "100%"
         },
-        children: /* @__PURE__ */ c(N, {
+        children: /* @__PURE__ */ l(V, {
           ...t,
-          controlVideo: l == null ? void 0 : l.controlVideoPlayer
+          controlVideo: e == null ? void 0 : e.controlVideoPlayer
         })
-      }), /* @__PURE__ */ c(Q, {}, t.id)]
+      }), /* @__PURE__ */ l(U, {}, t.id)]
     })]
-  }) : t.type === a.QUESTION_RESOLVED && ((s = (m = t.data) == null ? void 0 : m.question) != null && s.predictionResult) ? /* @__PURE__ */ c(P, {
+  }) : t.type === g.QUESTION_RESOLVED && ((d = (h = t.data) == null ? void 0 : h.question) != null && d.predictionResult) ? /* @__PURE__ */ l(x, {
     style: {
       height: t.hiding ? 0 : o
     },
-    saveHeight: d,
+    saveHeight: s,
     close: t.close,
     hiding: t.hiding,
     ...t.data.question,
     mastersApp: !0
-  }) : t.type === a.ONBOARDING ? /* @__PURE__ */ c(x, {
+  }) : t.type === g.ONBOARDING ? /* @__PURE__ */ l(A, {
     style: {
       height: t.hiding ? 0 : o
     },
-    saveHeight: d,
+    saveHeight: s,
     sdk: n,
     notification: t,
-    appNode: u,
-    responsiveStore: i
+    appNode: c,
+    responsiveStore: u
   }) : null;
-}, F = "p1co32q0", L = ({
+}, L = "p1co32q0", M = ({
   pill: n,
   setPill: t,
-  appNode: u,
-  headerNode: i,
-  scrollNode: l,
+  appNode: c,
+  headerNode: u,
+  scrollNode: e,
   responsiveStore: r,
-  scrollStore: o
+  scrollStore: o,
+  useContainer: s
 }) => {
-  var y, I;
+  var I, k;
   const {
-    screen: d
-  } = p(r, {
+    screen: h
+  } = y(r, {
     keys: ["screen"]
   }), {
-    tabsShown: m,
-    scrollPosition: s
-  } = p(o, {
+    tabsShown: d,
+    scrollPosition: m
+  } = y(o, {
     keys: ["tabsShown", "scrollPosition"]
   });
-  h(() => {
-    r.get().sdkInDesktopView ? s < 50 && t(null) : s > -50 && t(null);
-  }, [s, r, t]);
-  const e = r.get().sdkInDesktopView ? u : i;
-  return !n || !e.current ? null : b.createPortal(/* @__PURE__ */ c(U, {
-    title: n.type === a.QUESTION_RESOLVED ? "Prediction result" : `New ${((I = R[(y = n.data) == null ? void 0 : y.questionType]) == null ? void 0 : I.label) || "notification"}`,
+  a(() => {
+    r.get().sdkInDesktopView || s ? m < 50 && t(null) : m > -50 && t(null);
+  }, [m, r, t, s]);
+  const i = r.get().sdkInDesktopView ? c : u;
+  return !n || !i.current ? null : R.createPortal(/* @__PURE__ */ l(j, {
+    title: n.type === g.QUESTION_RESOLVED ? "Prediction result" : `New ${((k = P[(I = n.data) == null ? void 0 : I.questionType]) == null ? void 0 : k.label) || "notification"}`,
     onClick: () => {
-      var k;
-      r.get().sdkInDesktopView ? (k = l.current) == null || k.scrollTo({
+      var w;
+      r.get().sdkInDesktopView ? (w = e.current) == null || w.scrollTo({
         top: 0,
         behavior: "smooth"
-      }) : q(u, d.size, {
+      }) : E(e, h.size, {
         behavior: "smooth"
       }), t(null);
     },
-    className: D(m && F, "sl-pill-button")
-  }), e.current);
-}, it = ({
+    className: T(d && L, "sl-pill-button")
+  }), i.current);
+}, ot = ({
   sdk: n,
   headerNode: t,
-  scrollNode: u,
-  responsiveStore: i,
-  appNode: l,
-  scrollStore: r
+  scrollNode: c,
+  useContainer: u,
+  responsiveStore: e,
+  appNode: r,
+  scrollStore: o
 }) => {
-  const [o] = f(n.getNotificationsStore()), d = p(o), [m, s] = f(null), e = E(() => n.getActiveNotification(), [n, d]);
-  return h(() => {
-    e && C.emit("notification", {
+  const [s] = p(n.getNotificationsStore()), h = y(s), [d, m] = p(null), i = O(() => n.getActiveNotification(), [n, h]);
+  return a(() => {
+    i && C.emit("notification", {
       action: "rendered",
       payload: {
-        questionId: e.data.questionId,
-        questionType: e.data.questionType
+        questionId: i.data.questionId,
+        questionType: i.data.questionType
       }
     });
-  }, [e]), h(() => {
-    e && (i.get().sdkInDesktopView || i.get().sdkInView) && (!i.get().sdkInDesktopView && i.get().sdkInView && s(e), i.get().sdkInDesktopView && window.requestAnimationFrame(() => {
-      r.get().scrollPosition !== 0 && s(e);
+  }, [i]), a(() => {
+    i && (e.get().sdkInDesktopView || e.get().sdkInView) && (!e.get().sdkInDesktopView && e.get().sdkInView && m(i), e.get().sdkInDesktopView && window.requestAnimationFrame(() => {
+      o.get().scrollPosition !== 0 && m(i);
     }));
-  }, [e]), h(() => {
-    e || s(null);
-  }, [e]), /* @__PURE__ */ g(V, {
-    children: [!m && e && /* @__PURE__ */ c(z, {
+  }, [i]), a(() => {
+    i || m(null);
+  }, [i]), /* @__PURE__ */ f(D, {
+    children: [!d && i && /* @__PURE__ */ l(F, {
       headerNode: t,
-      appNode: l,
+      appNode: r,
       sdk: n,
-      notification: e,
-      responsiveStore: i
-    }), m && /* @__PURE__ */ c(L, {
-      pill: m,
-      setPill: s,
-      appNode: l,
-      notification: e,
+      notification: i,
+      responsiveStore: e
+    }), d && /* @__PURE__ */ l(M, {
+      pill: d,
+      setPill: m,
+      appNode: r,
+      notification: i,
       headerNode: t,
-      scrollNode: u,
-      scrollStore: r,
-      responsiveStore: i
+      scrollNode: c,
+      scrollStore: o,
+      useContainer: u,
+      responsiveStore: e
     })]
   });
 };
 export {
-  it as SDKNotifications
+  ot as SDKNotifications
 };

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

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

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

@@ -8,5 +8,6 @@ export type MastersAppChildrenProps = {
 export type MastersAppProps = {
     sdk: StreamLayerSDK;
     betPack?: boolean;
+    useContainer?: boolean;
 };
 export declare const MastersApp: React.FC<MastersAppProps>;

package/lib/app/masters/masters.js

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

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

@@ -1,4 +1,3 @@
 export declare const MastersStory: React.FC<{
-    settings?: boolean;
     betPack?: boolean;
 }>;