@streamlayer/react-ui 1.22.3 → 1.22.5

package/lib/app/masters/BetPack/BetPackContent/styles.d.ts

@@ -1,6 +1,98 @@
-export declare const Carousel: any;
-export declare const Dot: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Dots: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Carousel: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').RefAttributes<import('swiper/react').SwiperRef> & Omit<import('react').HTMLAttributes<HTMLElement>, "onClick" | "onProgress" | "onTouchEnd" | "onTouchMove" | "onTouchStart" | "onTransitionEnd" | "onKeyPress" | "onDoubleClick" | "onScroll" | "onResize"> & import('swiper/types').SwiperOptions & {
+    tag?: string;
+    wrapperTag?: string;
+    onSwiper?: (swiper: import('swiper/types').Swiper) => void;
+    onAutoplayStart?: (swiper: import('swiper/types').Swiper) => void;
+    onAutoplayStop?: (swiper: import('swiper/types').Swiper) => void;
+    onAutoplayPause?: (swiper: import('swiper/types').Swiper) => void;
+    onAutoplayResume?: (swiper: import('swiper/types').Swiper) => void;
+    onAutoplayTimeLeft?: (swiper: import('swiper/types').Swiper, timeLeft: number, percentage: number) => void;
+    onAutoplay?: (swiper: import('swiper/types').Swiper) => void;
+    onHashChange?: (swiper: import('swiper/types').Swiper) => void;
+    onHashSet?: (swiper: import('swiper/types').Swiper) => void;
+    onScroll?: (swiper: import('swiper/types').Swiper, event: WheelEvent) => void;
+    onKeyPress?: (swiper: import('swiper/types').Swiper, keyCode: string) => void;
+    onNavigationHide?: (swiper: import('swiper/types').Swiper) => void;
+    onNavigationShow?: (swiper: import('swiper/types').Swiper) => void;
+    onNavigationPrev?: (swiper: import('swiper/types').Swiper) => void;
+    onNavigationNext?: (swiper: import('swiper/types').Swiper) => void;
+    onPaginationRender?: (swiper: import('swiper/types').Swiper, paginationEl: HTMLElement) => void;
+    onPaginationUpdate?: (swiper: import('swiper/types').Swiper, paginationEl: HTMLElement) => void;
+    onPaginationHide?: (swiper: import('swiper/types').Swiper) => void;
+    onPaginationShow?: (swiper: import('swiper/types').Swiper) => void;
+    onScrollbarDragStart?: (swiper: import('swiper/types').Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onScrollbarDragMove?: (swiper: import('swiper/types').Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onScrollbarDragEnd?: (swiper: import('swiper/types').Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onZoomChange?: (swiper: import('swiper/types').Swiper, scale: number, imageEl: HTMLElement, slideEl: HTMLElement) => void;
+    onInit?: (swiper: import('swiper/types').Swiper) => any;
+    onBeforeDestroy?: (swiper: import('swiper/types').Swiper) => void;
+    onSlidesUpdated?: (swiper: import('swiper/types').Swiper) => void;
+    onSlideChange?: (swiper: import('swiper/types').Swiper) => void;
+    onSlideChangeTransitionStart?: (swiper: import('swiper/types').Swiper) => void;
+    onSlideChangeTransitionEnd?: (swiper: import('swiper/types').Swiper) => void;
+    onSlideNextTransitionStart?: (swiper: import('swiper/types').Swiper) => void;
+    onSlideNextTransitionEnd?: (swiper: import('swiper/types').Swiper) => void;
+    onSlidePrevTransitionStart?: (swiper: import('swiper/types').Swiper) => void;
+    onSlidePrevTransitionEnd?: (swiper: import('swiper/types').Swiper) => void;
+    onTransitionStart?: (swiper: import('swiper/types').Swiper) => void;
+    onTransitionEnd?: (swiper: import('swiper/types').Swiper) => void;
+    onTouchStart?: (swiper: import('swiper/types').Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onTouchMove?: (swiper: import('swiper/types').Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onTouchMoveOpposite?: (swiper: import('swiper/types').Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onSliderMove?: (swiper: import('swiper/types').Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onTouchEnd?: (swiper: import('swiper/types').Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onClick?: (swiper: import('swiper/types').Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onTap?: (swiper: import('swiper/types').Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onDoubleTap?: (swiper: import('swiper/types').Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onProgress?: (swiper: import('swiper/types').Swiper, progress: number) => void;
+    onReachBeginning?: (swiper: import('swiper/types').Swiper) => void;
+    onReachEnd?: (swiper: import('swiper/types').Swiper) => void;
+    onToEdge?: (swiper: import('swiper/types').Swiper) => void;
+    onFromEdge?: (swiper: import('swiper/types').Swiper) => void;
+    onSetTranslate?: (swiper: import('swiper/types').Swiper, translate: number) => void;
+    onSetTransition?: (swiper: import('swiper/types').Swiper, transition: number) => void;
+    onResize?: (swiper: import('swiper/types').Swiper) => void;
+    onObserverUpdate?: (swiper: import('swiper/types').Swiper) => void;
+    onBeforeLoopFix?: (swiper: import('swiper/types').Swiper) => void;
+    onLoopFix?: (swiper: import('swiper/types').Swiper) => void;
+    onBreakpoint?: (swiper: import('swiper/types').Swiper, breakpointParams: import('swiper/types').SwiperOptions) => void;
+    _beforeBreakpoint?: (swiper: import('swiper/types').Swiper, breakpointParams: import('swiper/types').SwiperOptions) => void;
+    _containerClasses?: (swiper: import('swiper/types').Swiper, classNames: string) => void;
+    _slideClass?: (swiper: import('swiper/types').Swiper, slideEl: HTMLElement, classNames: string) => void;
+    _slideClasses?: (swiper: import('swiper/types').Swiper, slides: {
+        slideEl: HTMLElement;
+        classNames: string;
+        index: number;
+    }[]) => void;
+    _swiper?: (swiper: import('swiper/types').Swiper) => void;
+    _freeModeNoMomentumRelease?: (swiper: import('swiper/types').Swiper) => void;
+    onActiveIndexChange?: (swiper: import('swiper/types').Swiper) => void;
+    onSnapIndexChange?: (swiper: import('swiper/types').Swiper) => void;
+    onRealIndexChange?: (swiper: import('swiper/types').Swiper) => void;
+    onAfterInit?: (swiper: import('swiper/types').Swiper) => void;
+    onBeforeInit?: (swiper: import('swiper/types').Swiper) => void;
+    onBeforeResize?: (swiper: import('swiper/types').Swiper) => void;
+    onBeforeSlideChangeStart?: (swiper: import('swiper/types').Swiper) => void;
+    onBeforeTransitionStart?: (swiper: import('swiper/types').Swiper, speed: number, internal: any) => void;
+    onChangeDirection?: (swiper: import('swiper/types').Swiper) => void;
+    onDoubleClick?: (swiper: import('swiper/types').Swiper, event: MouseEvent | TouchEvent | PointerEvent) => void;
+    onDestroy?: (swiper: import('swiper/types').Swiper) => void;
+    onMomentumBounce?: (swiper: import('swiper/types').Swiper) => void;
+    onOrientationchange?: (swiper: import('swiper/types').Swiper) => void;
+    onSlideResetTransitionStart?: (swiper: import('swiper/types').Swiper) => void;
+    onSlideResetTransitionEnd?: (swiper: import('swiper/types').Swiper) => void;
+    onSliderFirstMove?: (swiper: import('swiper/types').Swiper, event: TouchEvent) => void;
+    onSlidesLengthChange?: (swiper: import('swiper/types').Swiper) => void;
+    onSlidesGridLengthChange?: (swiper: import('swiper/types').Swiper) => void;
+    onSnapGridLengthChange?: (swiper: import('swiper/types').Swiper) => void;
+    onUpdate?: (swiper: import('swiper/types').Swiper) => void;
+    onLock?: (swiper: import('swiper/types').Swiper) => void;
+    onUnlock?: (swiper: import('swiper/types').Swiper) => void;
+} & {
+    children?: import('react').ReactNode | undefined;
+}>;
 export declare const ScreenWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const SponsorIcon: React.FC<{
     style?: React.CSSProperties;

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

@@ -1,59 +1,13 @@
-import { jsx as n } from "react/jsx-runtime";
-import { styled as s } from "@linaria/react";
-import r from "react-slick";
-import { SvgIcon as c } from "../../../../ui/icons/index.js";
-const t = () => r, S = /* @__PURE__ */ s(t())({
-  name: "Carousel",
-  class: "c1f9jjsn",
-  propsAsIs: !0
-}), d = /* @__PURE__ */ s("div")({
-  name: "Dot",
-  class: "d25r51y",
-  propsAsIs: !1
-}), f = /* @__PURE__ */ s("div")({
-  name: "Dots",
-  class: "d1lvrmx8",
-  propsAsIs: !1
-}), v = /* @__PURE__ */ s("div")({
-  name: "ScreenWrap",
-  class: "s11xps29",
-  propsAsIs: !1
-}), p = () => c, a = /* @__PURE__ */ s(p())({
-  name: "SponsorIconI",
-  class: "s14qstuv",
-  propsAsIs: !0
-}), A = ({
-  style: o,
-  className: e
-}) => /* @__PURE__ */ n(a, {
-  className: e,
-  style: o,
-  name: "icon-masters-logo"
-}), u = /* @__PURE__ */ s("div")({
-  name: "ScreenTextBlock",
-  class: "s14mdh2e",
-  propsAsIs: !1
-}), x = /* @__PURE__ */ s("div")({
-  name: "ScreenTitle",
-  class: "sqtjig9",
-  propsAsIs: !1
-}), D = /* @__PURE__ */ s("div")({
-  name: "ScreenDescription",
-  class: "ss0mt",
-  propsAsIs: !1
-}), j = /* @__PURE__ */ s("button")({
-  name: "ScreenButton",
-  class: "s10dmski",
-  propsAsIs: !1
-});
+import "react/jsx-runtime";
+import "@linaria/react";
+import { C as c, d as n, c as t, a as p, b as S, S as i, e as m } from "../../../../styles-BfnMua4o.js";
+import "../../../../ui/icons/index.js";
 export {
-  S as Carousel,
-  d as Dot,
-  f as Dots,
-  j as ScreenButton,
-  D as ScreenDescription,
-  u as ScreenTextBlock,
-  x as ScreenTitle,
-  v as ScreenWrap,
-  A as SponsorIcon
+  c as Carousel,
+  n as ScreenButton,
+  t as ScreenDescription,
+  p as ScreenTextBlock,
+  S as ScreenTitle,
+  i as ScreenWrap,
+  m as SponsorIcon
 };

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>;