@streamlayer/react-ui 1.14.3 → 1.16.0

package/lib/app/app/story/index.js

@@ -1,76 +1,65 @@
-import { jsx as r, jsxs as t } from "react/jsx-runtime";
-import { styled as s } from "@linaria/react";
-import { useEffect as p } from "react";
-import { StreamLayerProvider as m, useStreamLayer as c, StreamLayerSDKEvent as f } from "@streamlayer/react";
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { styled as a } from "@linaria/react";
+import { StreamLayerProvider as l, StreamLayerSDKEvent as d, useStreamLayer as c, useStreamLayerUI as m } from "@streamlayer/react";
 import { App as u } from "../index.js";
-import { StreamLayerThemeProvider as y } from "../../../ui/theme/index.js";
-import { useStreamLayerDebug as h } from "../../../utils/debug/index.js";
-import { Video as k } from "./video.js";
-const a = () => {
+import { useStreamLayerDebug as f } from "../../../utils/debug/index.js";
+import { Video as y } from "./video.js";
+const s = () => {
   console.log("deep link handled cb");
 }, v = () => {
   console.log("video player handled cb");
-}, A = ({
-  event: o
+}, h = ({
+  withSidebarNotification: n
 }) => {
-  const e = c();
-  return p(() => {
-    e && e.openFeature(12);
-  }, [e, o]), e ? /* @__PURE__ */ t(y, {
-    customTheme: "dark",
-    children: [/* @__PURE__ */ r(f, {
-      event: o
-    }), /* @__PURE__ */ r(u, {
-      sdk: e,
-      event: o,
-      onDeepLinkHandled: a
-    })]
-  }) : null;
-}, S = /* @__PURE__ */ s("div")({
+  const r = c(), e = m();
+  return !r || !e.app && !e.appNotification || !e.app && e.appNotification && !n ? null : /* @__PURE__ */ o(u, {
+    sdk: r,
+    onDeepLinkHandled: s
+  });
+}, A = /* @__PURE__ */ a("div")({
   name: "Container",
   class: "c1a4qh28",
   propsAsIs: !1
-}), C = /* @__PURE__ */ s("div")({
+}), S = /* @__PURE__ */ a("div")({
   name: "Body",
   class: "b9h8kuk",
   propsAsIs: !1
-}), L = /* @__PURE__ */ s("div")({
+}), k = /* @__PURE__ */ a("div")({
   name: "AppContainer",
   class: "a1wkro2j",
   propsAsIs: !1
-}), I = ({
-  sdkKey: o,
-  eventId: e,
-  production: d,
-  darkMode: i,
-  friendsTab: l
+}), P = ({
+  sdkKey: n,
+  eventId: r,
+  production: e,
+  friendsTab: p
 }) => {
-  const n = h({
-    sdkKey: o,
-    eventId: e,
-    production: d
+  const t = f({
+    sdkKey: n,
+    eventId: r,
+    production: e
   });
-  return /* @__PURE__ */ r(m, {
-    sdkKey: n.sdkKey,
-    production: n.env === "production",
+  return /* @__PURE__ */ i(l, {
+    sdkKey: t.sdkKey,
+    production: t.env === "production",
     autoEnable: !0,
-    onDeepLinkHandled: a,
+    onDeepLinkHandled: s,
     videoPlayerController: v,
     withAd: !1,
-    friendsTab: l,
-    children: /* @__PURE__ */ t(C, {
-      className: i ? "dark" : "",
-      children: [/* @__PURE__ */ r(k, {}), /* @__PURE__ */ r(S, {
-        children: /* @__PURE__ */ r(L, {
-          className: "StreamLayerSDK",
-          children: /* @__PURE__ */ r(A, {
-            event: n.event
+    friendsTab: p,
+    children: [/* @__PURE__ */ i(S, {
+      children: [/* @__PURE__ */ o(y, {}), /* @__PURE__ */ o(A, {
+        children: /* @__PURE__ */ o(k, {
+          children: /* @__PURE__ */ o(h, {
+            withSidebarNotification: !1
           })
         })
       })]
-    })
+    }), /* @__PURE__ */ o(d, {
+      event: t.event
+    })]
   });
 };
 export {
-  I as AppStory
+  P as AppStory
 };

package/lib/app/app/story/styles.d.ts

@@ -2,3 +2,4 @@ export declare const PointsContainer: import('@linaria/react').StyledComponent<i
 export declare const VideoPlayerWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const VideoFrame: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const LinkToLogin: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLAnchorElement> & import('react').AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;
+export declare const NotificationContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/app/app/story/styles.js

@@ -3,11 +3,11 @@ const o = /* @__PURE__ */ s("div")({
   name: "PointsContainer",
   class: "p10yam33",
   propsAsIs: !1
-}), e = /* @__PURE__ */ s("div")({
+}), n = /* @__PURE__ */ s("div")({
   name: "VideoPlayerWrap",
   class: "v13be41a",
   propsAsIs: !1
-}), n = /* @__PURE__ */ s("div")({
+}), e = /* @__PURE__ */ s("div")({
   name: "VideoFrame",
   class: "v18d3gas",
   propsAsIs: !1
@@ -15,10 +15,15 @@ const o = /* @__PURE__ */ s("div")({
   name: "LinkToLogin",
   class: "l1aq3x2u",
   propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "NotificationContainer",
+  class: "n6hlblg",
+  propsAsIs: !1
 });
 export {
   i as LinkToLogin,
+  r as NotificationContainer,
   o as PointsContainer,
-  n as VideoFrame,
-  e as VideoPlayerWrap
+  e as VideoFrame,
+  n as VideoPlayerWrap
 };

package/lib/app/app/story/video.js

@@ -1,32 +1,35 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { useState as n, useCallback as m, useEffect as s } from "react";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { useState as l, useCallback as m, useEffect as s } from "react";
 import { useStreamLayer as d } from "@streamlayer/react";
-import { StreamLayerSDKPoints as p } from "../Points/index.js";
-import { StreamLayerThemeProvider as u } from "../../../ui/theme/index.js";
-import { VideoFrame as c, PointsContainer as h, VideoPlayerWrap as f, LinkToLogin as y } from "./styles.js";
-const S = () => {
-  const e = d(), [t, i] = n(!0), o = m(({ muted: a }) => {
-    i(a);
+import { StreamLayerSDKNotification as p } from "../InApp/index.js";
+import { StreamLayerSDKPoints as c } from "../Points/index.js";
+import { VideoFrame as u, PointsContainer as f, VideoPlayerWrap as h, NotificationContainer as y, LinkToLogin as g } from "./styles.js";
+const P = () => {
+  const e = d(), [i, a] = l(!0), o = m(({ muted: n }) => {
+    a(n);
   }, []);
   return s(() => (e == null || e.addVideoPlayerController(o), () => {
     e == null || e.removeVideoPlayerController(o);
-  }), [e, o]), /* @__PURE__ */ l(c, { "data-testid": "video-frame", children: [
-    e && /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(p, { sdk: e }) }) }),
-    /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(
-      "video",
-      {
-        src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
-        muted: t,
-        width: "100%",
-        height: "100%",
-        autoplay: "autoplay",
-        loop: !0,
-        playsInline: !0,
-        playing: !0
-      }
-    ) }),
+  }), [e, o]), /* @__PURE__ */ t(u, { "data-testid": "video-frame", children: [
+    e && /* @__PURE__ */ r(f, { children: /* @__PURE__ */ r(c, { sdk: e }) }),
+    /* @__PURE__ */ t(h, { children: [
+      /* @__PURE__ */ r(
+        "video",
+        {
+          src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
+          muted: i,
+          width: "100%",
+          height: "100%",
+          autoplay: "autoplay",
+          loop: !0,
+          playsInline: !0,
+          playing: !0
+        }
+      ),
+      e && /* @__PURE__ */ r(y, { children: /* @__PURE__ */ r(p, { sdk: e }) })
+    ] }),
     /* @__PURE__ */ r(
-      y,
+      g,
       {
         href: "./iframe.html?args=&globals=viewport:appDesktop&id=app-login--login&viewMode=story",
         rel: "noreferrer",
@@ -36,5 +39,5 @@ const S = () => {
   ] });
 };
 export {
-  S as Video
+  P as Video
 };

package/lib/app/app/useApp.d.ts

@@ -1,7 +1,6 @@
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import { FeatureType } from '@streamlayer/sdk-web-types';
 export declare const useAppApp: (sdk: StreamLayerSDK) => {
     sdkReady: boolean;
-    activeFeature: FeatureType | undefined;
+    activeFeature: any;
     isLogged: boolean;
 };

package/lib/app/app/useApp.js

@@ -1,5 +1,5 @@
-import { useStore as o } from "@nanostores/react";
 import { useEffect as S } from "react";
+import { useStore as o } from "@streamlayer/react-polyfills";
 import { FeatureType as s } from "@streamlayer/sdk-web-types";
 const A = (e) => {
   const u = o(e.status), a = o(e.sdkStore.slStreamId), c = o(e.userId()), r = o(e.getActiveFeature()), n = u === "ready" && !!a.data;

package/lib/app/login/demo.js

@@ -1,5 +1,5 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useStore as a } from "@nanostores/react";
+import { useStore as a } from "@streamlayer/react-polyfills";
 import "@streamlayer/sdk-web-anonymous-auth";
 import { Login as s } from "./index.js";
 const y = ({ sdk: o }) => a(o.getUserStore()).data ? /* @__PURE__ */ i("div", { children: [

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

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { styled as u } from "@linaria/react";
-import { useStore as o } from "@nanostores/react";
+import { useStore as o } from "@streamlayer/react-polyfills";
 import { FeatureStatus as p } from "@streamlayer/sdk-web-interfaces";
 const i = /* @__PURE__ */ u("div")({
   name: "LoadingContainer",

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

@@ -1,12 +1,13 @@
 import { jsx as r, jsxs as f, Fragment as L } from "react/jsx-runtime";
 import { styled as h } from "@linaria/react";
-import { useStore as i } from "@nanostores/react";
 import { useClipboardCopy as k } from "../../../useClipboardCopy.js";
 import { useRef as u } from "react";
+import { useStore as i } from "@streamlayer/react-polyfills";
 import { InviteLink as I } from "../../../../ui/gamification/invite-link/index.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
+import "@storybook/blocks";
 import "../../../../ui/icons/index.js";
 import "../../../../ui/gamification/leaderboard/list-item/styles.js";
 /* empty css                                    */
@@ -16,7 +17,7 @@ const b = /* @__PURE__ */ h("div")({
   name: "InviteLinkContainer",
   class: "ij36hcn",
   propsAsIs: !1
-}), q = ({
+}), z = ({
   gamification: e,
   scrollNode: s,
   scrollStore: p
@@ -51,5 +52,5 @@ const b = /* @__PURE__ */ h("div")({
   });
 };
 export {
-  q as Leaderboard
+  z as Leaderboard
 };

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

@@ -1,7 +1,7 @@
 import { jsxs as u, jsx as e } from "react/jsx-runtime";
 import { styled as l } from "@linaria/react";
-import { useStore as n } from "@nanostores/react";
 import { useMastersContext as a } from "../../useMastersContext.js";
+import { useStore as n } from "@streamlayer/react-polyfills";
 import { QuestionType as m } from "@streamlayer/sdk-web-types";
 import { VoteHeader as c } from "../../../../ui/gamification/detail/header/index.js";
 import { Sponsor as p } from "../../../../ui/gamification/detail/sponsor/index.js";

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

@@ -1,9 +1,9 @@
 import { jsx as s } from "react/jsx-runtime";
-import { useStore as i } from "@nanostores/react";
-import { useMastersContext as n } from "../../useMastersContext.js";
+import { useMastersContext as i } from "../../useMastersContext.js";
+import { useStore as n } from "@streamlayer/react-polyfills";
 import { QuestionList as m } from "../../../../ui/gamification/question/list/index.js";
 const a = ({ store: t, openQuestion: r }) => {
-  const { sdk: o } = n(), e = i(t);
+  const { sdk: o } = i(), e = n(t);
   return /* @__PURE__ */ s(m, { openQuestion: r, questions: e.data, controlVideo: o == null ? void 0 : o.controlVideoPlayer });
 };
 export {

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

@@ -1,20 +1,20 @@
 import { jsxs as h, jsx as e, Fragment as x } from "react/jsx-runtime";
-import { useStore as u } from "@nanostores/react";
 import { TabsContainer as D, TabsNavContainer as T, SDKWhiteContainer as v, UserSummaryContainer as C, SDKContentContainer as A, LeaderboardContainer as I } from "../../styles.js";
 import { scrollIntoAppView as P } from "../../useSdkScroll.js";
-import { useState as S, useTransition as V, useEffect as E } from "react";
+import { useState as S, useEffect as V } from "react";
+import { useStore as u, useTransition as E } from "@streamlayer/react-polyfills";
 import { ActivePages as a, Tabs as K } from "../../../../ui/gamification/tabs/index.js";
 import { Leaderboard as L } from "./Leaderboard.js";
 import { QuestionsList as F } from "./QuestionsList.js";
 import { UserSummary as O } from "./UserSummary.js";
 const q = ({ gamification: s, className: f, scrollStore: t, scrollNode: l, appNode: c, style: b, responsiveStore: n }) => {
-  const { tabsShown: d } = u(t, { keys: ["tabsShown"] }), [i, w] = S(a.HOME), [, y] = V(), { sdkInDesktopView: m, screen: g } = u(n, { keys: ["sdkInDesktopView"] }), k = (r) => {
+  const { tabsShown: d } = u(t, { keys: ["tabsShown"] }), [i, w] = S(a.HOME), [, y] = E(), { sdkInDesktopView: m, screen: g } = u(n, { keys: ["sdkInDesktopView"] }), k = (r) => {
     y(() => {
       var p;
       w(r), m === !1 && (((p = c.current) == null ? void 0 : p.getBoundingClientRect().y) || 0) < 0 && P(c, g.size, { behavior: "instant" });
     });
   };
-  E(() => t.subscribe((r) => {
+  V(() => t.subscribe((r) => {
     if (r.scrollPosition === 0) {
       t.setKey("tabsShown", !0);
       return;

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

@@ -1,8 +1,8 @@
 import { jsx as n, jsxs as f } from "react/jsx-runtime";
 import { styled as m } from "@linaria/react";
-import { useStore as a } from "@nanostores/react";
 import { SDKWhiteContainer as h } from "../../styles.js";
 import { useHideTransition as C } from "../../../../hooks/showIn.js";
+import { useStore as a } from "@streamlayer/react-polyfills";
 import { VoteHeader as k } from "../../../../ui/gamification/detail/header/index.js";
 import { UserStatistics as S } from "../../../../ui/gamification/user-statistics/index.js";
 import { ModalPortal as U } from "../../../../ui/modal/index.js";

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

@@ -1,14 +1,14 @@
 import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { useStore as B } from "@nanostores/react";
-import { forwardRef as l } from "react";
+import { forwardRef as B } from "react";
+import { useStore as l } from "@streamlayer/react-polyfills";
 import { ChannelsButton as c, ChannelsButtonId as t } from "../../../../ui/navigation/button/Channels.js";
 import { FeaturedGroupsButton as x, FeaturedGroupsButtonId as n } from "../../../../ui/navigation/button/FeaturedGroups.js";
 import { LeaderBoardButtonId as S } from "../../../../ui/navigation/button/LeaderBoard.js";
 import { Navigation as I, NavigationItems as h } from "../../../../ui/navigation/masters.js";
 import { BREAKPOINTS as d } from "../../../../ui/theme/constants.js";
-const z = l(
+const z = B(
   ({ activeOverlay: o, setActiveOverlay: e, scrollToTop: i, sdkReady: u, className: a, responsiveStore: f }, p) => {
-    const { screen: m } = B(f, { keys: ["screen"] });
+    const { screen: m } = l(f, { keys: ["screen"] });
     return /* @__PURE__ */ s(I, { className: a, children: [
       /* @__PURE__ */ s(h, { children: [
         /* @__PURE__ */ r(

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

@@ -1,9 +1,9 @@
 import { jsx as t, jsxs as Z, Fragment as w } from "react/jsx-runtime";
 import { styled as v } from "@linaria/react";
-import { useStore as I } from "@nanostores/react";
 import { scrollIntoAppView as F } from "../../useSdkScroll.js";
 import { useImagesPreload as T } from "../../../useImagesPreload.js";
-import { useRef as A, useState as S, useMemo as x, useLayoutEffect as _, useEffect as B } from "react";
+import { useRef as A, useState as I, useMemo as S, useLayoutEffect as _, useEffect as B } from "react";
+import { useStore as x } from "@streamlayer/react-polyfills";
 import { FeatureType as j } from "@streamlayer/sdk-web-types";
 import { OnboardingUI as E } from "../../../../ui/gamification/onboarding/index.js";
 import { ModalPortal as G } from "../../../../ui/modal/index.js";
@@ -48,7 +48,7 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
   sdk: a
 }) => {
   var d, o, m, h, g, V, L;
-  const p = I(c.friends.getStore()), [u, e] = S(void 0), f = x(() => {
+  const p = x(c.friends.getStore()), [u, e] = I(void 0), f = S(() => {
     var n, b;
     const C = a.getInviter();
     return C ? (b = (n = p.data) == null ? void 0 : n.find(({
@@ -104,11 +104,11 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
   responsiveStore: p
 }) => {
   var L;
-  const u = A(null), e = r.data.onboarding, [f, d] = S(e == null ? void 0 : e.instantOpen), o = l.getFeature(j.GAMES), m = x(() => H == null ? void 0 : H.map(({
+  const u = A(null), e = r.data.onboarding, [f, d] = I(e == null ? void 0 : e.instantOpen), o = l.getFeature(j.GAMES), m = S(() => H == null ? void 0 : H.map(({
     graphicSrc: C
   }) => C), []), {
     screen: h
-  } = I(p, {
+  } = x(p, {
     keys: ["screen"]
   });
   (L = e == null ? void 0 : e.titleCard) != null && L.media && (e.titleCard.media.sponsorLogo = R), _(() => {

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

@@ -1,10 +1,10 @@
 import { jsxs as f, Fragment as D, jsx as c } from "react/jsx-runtime";
 import { cx as N } from "@linaria/core";
-import { useStore as g } from "@nanostores/react";
 import { useMastersContext as T } from "../useMastersContext.js";
 import { scrollIntoAppView as q } from "../useSdkScroll.js";
 import { useState as p, useMemo as E, useEffect as h, useRef as O, useCallback as w } from "react";
 import { r as b } from "../../../index-B1QdimmR.js";
+import { useStore as g } 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";

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

@@ -1,12 +1,12 @@
 import { jsx as n } from "react/jsx-runtime";
-import { useStore as i } from "@nanostores/react";
-import { useState as c, useEffect as f } from "react";
+import { useState as i, useEffect as c } from "react";
+import { useStore as f } from "@streamlayer/react-polyfills";
 import { FeatureStatus as p } from "@streamlayer/sdk-web-interfaces";
 import { FeatureType as S } from "@streamlayer/sdk-web-types";
 import { Points as l } from "../../../ui/gamification/points/index.js";
 const a = ({ gamification: e }) => {
-  const s = e.userSummary.$store, [r, u] = c(0);
-  return f(() => {
+  const s = e.userSummary.$store, [r, u] = i(0);
+  return c(() => {
     const m = s.subscribe((t) => {
       var o;
       (o = t == null ? void 0 : t.summary) != null && o.points && u(t.summary.points);
@@ -18,7 +18,7 @@ const a = ({ gamification: e }) => {
     e.status.get() === p.Suspended && e.openFeature();
   } });
 }, h = ({ sdk: e }) => {
-  if (!i(e.featuresList.getStore()))
+  if (!f(e.featuresList.getStore()))
     return null;
   const r = e.getFeature(S.GAMES);
   return r ? /* @__PURE__ */ n(a, { gamification: r }) : null;

package/lib/app/masters/masters.js

@@ -1,10 +1,10 @@
 import { jsx as n, jsxs as v } from "react/jsx-runtime";
-import { useStore as C } from "@nanostores/react";
-import { SDKContainer as x, SDKScrollContainer as A } from "./styles.js";
-import { useSdkScroll as F } from "./useSdkScroll.js";
-import { useSdkFeature as M } from "../useSdkFeature.js";
-import { useAnalyticsListener as d, newTabLinkListener as b, appScrollListener as D, appClickListener as I } from "../../hooks/analytics.js";
-import { useRef as S, useMemo as B, useEffect as T } from "react";
+import { SDKContainer as C, SDKScrollContainer as x } from "./styles.js";
+import { useSdkScroll as A } from "./useSdkScroll.js";
+import { useSdkFeature as F } from "../useSdkFeature.js";
+import { useAnalyticsListener as d, newTabLinkListener as M, appScrollListener as b, appClickListener as D } from "../../hooks/analytics.js";
+import { useRef as S, useMemo as I, useEffect as B } from "react";
+import { useStore as T } from "@streamlayer/react-polyfills";
 import { resetCss as p } from "../../ui/theme/theme.js";
 import { ActiveFeature as j, StandaloneFeature as k } from "./Features/index.js";
 import { MastersNavigation as E } from "./Navigation/MastersNavigation/index.js";
@@ -17,7 +17,7 @@ import { ChannelsButtonId as P } from "../../ui/navigation/button/Channels.js";
 import { LeaderBoardButtonId as G } from "../../ui/navigation/button/LeaderBoard.js";
 import { FeaturedGroupsButtonId as V } from "../../ui/navigation/button/FeaturedGroups.js";
 const W = ({ sdk: e, className: i, scrollStore: l, appNode: t, scrollNode: s, responsiveStore: o }) => {
-  const [, r] = M(e);
+  const [, r] = F(e);
   return /* @__PURE__ */ n(
     j,
     {
@@ -31,7 +31,7 @@ const W = ({ sdk: e, className: i, scrollStore: l, appNode: t, scrollNode: s, re
     }
   );
 }, Y = ({ sdk: e, className: i, appNode: l, responsiveStore: t }) => {
-  const s = C(e.featuresList.getStore());
+  const s = T(e.featuresList.getStore());
   return s ? Array.from(s, (o) => {
     const r = e.getFeature(o);
     return r ? /* @__PURE__ */ n(
@@ -47,22 +47,22 @@ const W = ({ sdk: e, className: i, scrollStore: l, appNode: t, scrollNode: s, re
     ) : null;
   }) : null;
 }, ie = ({ sdk: e, overlays: i, children: l }) => {
-  const t = S(null), s = S(null), [o] = w(t), [r, f] = F(t, o), { sdkEnabled: a, sdkReady: c, activeOverlay: m, activateAndLoadOverlay: h, activateEventWithId: N, deactivate: g, isLogged: y } = O(e);
-  d(t, { enabled: a, event: "click", listener: b }), d(r, {
+  const t = S(null), s = S(null), [o] = w(t), [r, f] = A(t, o), { sdkEnabled: a, sdkReady: c, activeOverlay: m, activateAndLoadOverlay: h, activateEventWithId: N, deactivate: g, isLogged: y } = O(e);
+  d(t, { enabled: a, event: "click", listener: M }), d(r, {
     enabled: a,
     event: "scrollend",
-    listener: D,
+    listener: b,
     useDomNode: !0
   }), d(r, {
     enabled: a,
     event: "click",
-    listener: I,
+    listener: D,
     useDomNode: !0
   });
-  const L = B(() => ({ sdk: e }), [e]);
-  return T(() => {
+  const L = I(() => ({ sdk: e }), [e]);
+  return B(() => {
     import("./Features/Gamification/gamification-feature.js");
-  }, []), /* @__PURE__ */ n(R.Provider, { value: L, children: /* @__PURE__ */ v(x, { ref: t, children: [
+  }, []), /* @__PURE__ */ n(R.Provider, { value: L, children: /* @__PURE__ */ v(C, { ref: t, children: [
     a && /* @__PURE__ */ n(
       E,
       {
@@ -78,7 +78,7 @@ const W = ({ sdk: e, className: i, scrollStore: l, appNode: t, scrollNode: s, re
         responsiveStore: o
       }
     ),
-    /* @__PURE__ */ v(A, { className: "sl-hide-on-modal", ref: r, "data-nav": a.toString(), children: [
+    /* @__PURE__ */ v(x, { className: "sl-hide-on-modal", ref: r, "data-nav": a.toString(), children: [
       c && /* @__PURE__ */ n(
         K,
         {

package/lib/app/masters/useMastersApp.js

@@ -1,11 +1,11 @@
-import { useStore as c } from "@nanostores/react";
-import { useRef as z, useState as d, useCallback as v, useEffect as l } from "react";
+import { useRef as z, useState as d, useCallback as v, useEffect as c } from "react";
+import { useStore as l } from "@streamlayer/react-polyfills";
 import { FeatureType as p } from "@streamlayer/sdk-web-types";
 import "./Navigation/MastersNavigation/index.js";
 import { FeaturedGroupsButtonId as f } from "../../ui/navigation/button/FeaturedGroups.js";
 import { ChannelsButtonId as i } from "../../ui/navigation/button/Channels.js";
 const C = (e) => {
-  const m = z(""), [E, a] = d(!1), g = c(e.status), F = c(e.sdkStore.slStreamId), n = c(e.userId()), A = c(e.getActiveFeature()), o = g === "ready" && !!F.data, [S, r] = d(f), s = v(
+  const m = z(""), [E, a] = d(!1), g = l(e.status), F = l(e.sdkStore.slStreamId), n = l(e.userId()), A = l(e.getActiveFeature()), o = g === "ready" && !!F.data, [S, r] = d(f), s = v(
     (t, u) => {
       r(u), t && e.createEventSession(t), u === f ? window.requestAnimationFrame(() => {
         e.openFeature(p.GAMES);
@@ -13,9 +13,9 @@ const C = (e) => {
     },
     [e]
   );
-  l(() => {
+  c(() => {
     !o && S === f && (r(i), e.closeFeature(!0));
-  }, [o, S, e]), l(() => {
+  }, [o, S, e]), c(() => {
     A === p.GAMES ? r(f) : A === p.UNSET && r(i);
     const t = e.getFeature(p.GAMES);
     t && (t.closeQuestion(), t.closeUser());
@@ -43,7 +43,7 @@ const C = (e) => {
   ), I = v(() => {
     a(!1), e.disableApp();
   }, [e]);
-  return l(() => {
+  return c(() => {
     if (!n) {
       o && (r(i), e.disableApp());
       return;
@@ -54,7 +54,7 @@ const C = (e) => {
       });
       return;
     }
-  }, [n]), l(() => () => {
+  }, [n]), c(() => () => {
     a(!1), e.disableApp();
   }, [a, e]), {
     sdkEnabled: E,

package/lib/app/masters/useSdkScroll.js

@@ -1,6 +1,6 @@
-import { useStore as S } from "@nanostores/react";
-import h from "lodash.throttle";
-import { useRef as m, useState as b, useEffect as g } from "react";
+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 { BREAKPOINTS as c } from "../../ui/theme/constants.js";
 import { m as v } from "../../index-CZvwzN5o.js";
 const C = (o, e, n) => {
@@ -10,19 +10,19 @@ const C = (o, e, n) => {
     ...n
   });
 }, T = 15, D = (o, e) => {
-  const n = m(null), t = m(0), [s] = b(
+  const n = m(null), t = m(0), [s] = h(
     v({
       scrollPosition: 0,
       tabsShown: !0,
       scrollDirection: "forward"
     })
-  ), i = S(e);
-  return g(() => {
+  ), i = g(e);
+  return b(() => {
     const l = window.innerWidth < c.xl ? window : n.current;
     if (!l)
       return () => {
       };
-    const f = h((d) => {
+    const f = S((d) => {
       var a;
       const u = d.target;
       if (!u)

package/lib/app/useSdkFeature.js

@@ -1,5 +1,5 @@
-import { useStore as f } from "@nanostores/react";
 import { useState as c, useEffect as l } from "react";
+import { useStore as f } from "@streamlayer/react-polyfills";
 import { FeatureStatus as a } from "@streamlayer/sdk-web-interfaces";
 const p = (t) => {
   const r = f(t.getActiveFeature()), n = f(t.streamStore()), [i, u] = c(null);