@streamlayer/react-ui 1.15.0 → 1.16.0

package/lib/app/app/Advertisement/index.js

@@ -1,9 +1,9 @@
 import { jsx as s } from "react/jsx-runtime";
 import { cx as b } from "@linaria/core";
 import { styled as L } from "@linaria/react";
-import { useStore as g } from "@nanostores/react";
 import { useAnalyticsListener as P } from "../../../hooks/analytics.js";
 import { useEffect as w, useRef as I } from "react";
+import { useStore as g } from "@streamlayer/react-polyfills";
 import { eventBus as A } from "@streamlayer/sdk-web-interfaces";
 import { FeatureType as E, NotificationPromotionMode as T, PromotionType as U } from "@streamlayer/sdk-web-types";
 import { AdvertisementUI as N } from "../../../ui/advertisement/index.js";

package/lib/app/app/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 i } from "@nanostores/react";
+import { useStore as i } from "@streamlayer/react-polyfills";
 import { FeatureStatus as c } from "@streamlayer/sdk-web-interfaces";
 const o = /* @__PURE__ */ u("div")({
   name: "LoadingContainer",

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

@@ -1,8 +1,8 @@
 import { jsx as r, jsxs as f, Fragment as L } from "react/jsx-runtime";
 import { styled as h } from "@linaria/react";
-import { useStore as n } from "@nanostores/react";
 import { useClipboardCopy as k } from "../../../useClipboardCopy.js";
 import { useRef as u } from "react";
+import { useStore as n } from "@streamlayer/react-polyfills";
 import { InviteLink as I } from "../../../../ui/gamification/invite-link/index.js";
 import "react-virtualized-auto-sizer";
 import "react-window";

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

@@ -1,7 +1,7 @@
 import { jsxs as y, jsx as e } from "react/jsx-runtime";
 import { styled as v } from "@linaria/react";
-import { useStore as d } from "@nanostores/react";
 import { useAppContext as T } from "../../useAppContext.js";
+import { useStore as d } from "@streamlayer/react-polyfills";
 import { QuestionType as V } from "@streamlayer/sdk-web-types";
 import { VoteHeader as h } from "../../../../ui/gamification/detail/header/index.js";
 import { Sponsor as x } from "../../../../ui/gamification/detail/sponsor/index.js";

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

@@ -1,9 +1,9 @@
 import { jsx as s } from "react/jsx-runtime";
-import { useStore as i } from "@nanostores/react";
-import { useAppContext as n } from "../../useAppContext.js";
+import { useAppContext as i } from "../../useAppContext.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/app/Features/Gamification/Tabs.js

@@ -1,9 +1,9 @@
 import { jsxs as f, jsx as e, Fragment as D } from "react/jsx-runtime";
 import { cx as C } from "@linaria/core";
-import { useStore as c } from "@nanostores/react";
 import { TabsContainer as S, TabsNavContainer as E, SDKSummaryContainer as v, UserSummaryContainer as A, SDKContentContainer as I, LeaderboardContainer as L } from "../../styles.js";
 import { scrollIntoAppView as P } from "../../../useSdkScroll.js";
-import { useState as V, useTransition as K, useEffect as l } from "react";
+import { useState as V, useEffect as l } from "react";
+import { useStore as c, useTransition as K } from "@streamlayer/react-polyfills";
 import { ActivePages as n, Tabs as F } from "../../../../ui/gamification/tabs/index.js";
 import { Leaderboard as O } from "./Leaderboard.js";
 import { QuestionsList as H } from "./QuestionsList.js";

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

@@ -1,10 +1,10 @@
 import { jsx as o, jsxs as x } from "react/jsx-runtime";
 import { cx as l } from "@linaria/core";
 import { styled as f } from "@linaria/react";
-import { useStore as c } from "@nanostores/react";
 import { SDKWhiteContainer as k } from "../../styles.js";
 import { useAppContext as v } from "../../useAppContext.js";
 import { useHideTransition as S } from "../../../../hooks/showIn.js";
+import { useStore as c } from "@streamlayer/react-polyfills";
 import { VoteHeader as U } from "../../../../ui/gamification/detail/header/index.js";
 import { UserStatistics as I } from "../../../../ui/gamification/user-statistics/index.js";
 import { ModalPortal as y } from "../../../../ui/modal/index.js";

package/lib/app/app/InApp/index.js

@@ -1,6 +1,6 @@
 import { jsx as i } from "react/jsx-runtime";
-import { useStore as p } from "@nanostores/react";
-import { useState as c, useMemo as s, useEffect as u } from "react";
+import { useState as p, useMemo as c, useEffect as s } from "react";
+import { useStore as u } from "@streamlayer/react-polyfills";
 import { eventBus as f } from "@streamlayer/sdk-web-interfaces";
 import { NotificationType as n } from "@streamlayer/sdk-web-notifications";
 import { FeatureType as m, QuestionType as d } from "@streamlayer/sdk-web-types";
@@ -8,8 +8,8 @@ import { InAppNotification as l } from "../../../ui/gamification/question/inapp/
 import { InAppOnboarding as y } from "../../../ui/gamification/question/inapp/onboarding/index.js";
 import { InAppPredictionResult as I } from "../../../ui/gamification/question/inapp/prediction-result/index.js";
 const R = ({ sdk: o }) => {
-  const [r] = c(o.getNotificationsStore()), a = p(r), e = o.getFeature(m.GAMES), t = s(() => o.getActiveNotification(), [o, a]);
-  return u(() => {
+  const [r] = p(o.getNotificationsStore()), a = u(r), e = o.getFeature(m.GAMES), t = c(() => o.getActiveNotification(), [o, a]);
+  return s(() => {
     t && f.emit("notification", {
       action: "rendered",
       payload: {

package/lib/app/app/Insight/index.js

@@ -1,7 +1,7 @@
 import { jsx as d } from "react/jsx-runtime";
 import { styled as i } from "@linaria/react";
-import { useStore as Q } from "@nanostores/react";
 import { useRef as l, useEffect as m } from "react";
+import { useStore as Q } from "@streamlayer/react-polyfills";
 import { FeatureType as S } from "@streamlayer/sdk-web-types";
 import { Question as y } from "../Features/Gamification/Question.js";
 const I = () => y, b = /* @__PURE__ */ i(I())({

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

@@ -1,8 +1,8 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { cx as S } from "@linaria/core";
 import { styled as n } from "@linaria/react";
-import { useStore as v } from "@nanostores/react";
 import { forwardRef as y, useMemo as u } from "react";
+import { useStore as v } from "@streamlayer/react-polyfills";
 import { AvailableFeatures as b } from "@streamlayer/sdk-web-features";
 import { FeatureType as C } from "@streamlayer/sdk-web-types";
 import { SvgIcon as h } from "../../../ui/icons/index.js";

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

@@ -1,9 +1,9 @@
 import { jsx as n, jsxs as w, Fragment as O } from "react/jsx-runtime";
 import { styled as y } from "@linaria/react";
-import { useStore as T } from "@nanostores/react";
 import { useImagesPreload as _ } from "../../../useImagesPreload.js";
 import { scrollIntoAppView as E } from "../../../useSdkScroll.js";
-import { useRef as M, useState as A, useMemo as F, useLayoutEffect as R, useEffect as V } from "react";
+import { useRef as M, useState as T, useMemo as A, useLayoutEffect as R, useEffect as V } from "react";
+import { useStore as F } from "@streamlayer/react-polyfills";
 import { FeatureType as W } from "@streamlayer/sdk-web-types";
 import { OnboardingUI as $ } from "../../../../ui/gamification/onboarding/index.js";
 import { ModalPortal as j } from "../../../../ui/modal/index.js";
@@ -47,7 +47,7 @@ const C = [{
   throttled: I
 }) => {
   var a, b, h, f, v, t, u;
-  const c = T(p.friends.getStore()), [r, k] = A(void 0), g = F(() => {
+  const c = F(p.friends.getStore()), [r, k] = T(void 0), g = A(() => {
     var m, S;
     const i = d.getInviter();
     return i ? (S = (m = c.data) == null ? void 0 : m.find(({
@@ -102,11 +102,11 @@ const C = [{
   sdkInDesktopView: d,
   responsiveStore: I
 }) => {
-  const c = M(null), r = e.data.onboarding, [k, g] = A(r == null ? void 0 : r.instantOpen), a = l.getFeature(W.GAMES), b = F(() => C == null ? void 0 : C.map(({
+  const c = M(null), r = e.data.onboarding, [k, g] = T(r == null ? void 0 : r.instantOpen), a = l.getFeature(W.GAMES), b = A(() => C == null ? void 0 : C.map(({
     graphicSrc: t
   }) => t), []), {
     screen: h
-  } = T(I, {
+  } = F(I, {
     keys: ["screen"]
   });
   R(() => {

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

@@ -1,10 +1,10 @@
 import { jsxs as k, Fragment as b, jsx as u } from "react/jsx-runtime";
 import { cx as V } from "@linaria/core";
-import { useStore as y } from "@nanostores/react";
 import { useAppContext as O } from "../useAppContext.js";
 import { scrollIntoAppView as T } from "../../useSdkScroll.js";
 import { useState as I, useMemo as D, useEffect as a, useRef as E, useCallback as w } from "react";
 import { r as R } from "../../../index-B1QdimmR.js";
+import { useStore as y } from "@streamlayer/react-polyfills";
 import { eventBus as q } from "@streamlayer/sdk-web-interfaces";
 import { NotificationType as p } from "@streamlayer/sdk-web-notifications";
 import { QuestionTypeData as C } from "../../../ui/gamification/constants.js";

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

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

package/lib/app/app/index.js

@@ -1,12 +1,12 @@
 import { jsx as l, jsxs as f } from "react/jsx-runtime";
 import { cx as v } from "@linaria/core";
-import { useStore as N } from "@nanostores/react";
-import { SDKContainer as A, SDKScrollContainer as F } from "./styles.js";
-import { useSdkFeature as x } from "../useSdkFeature.js";
-import { useSdkResponsive as D } from "../useSdkResponsive.js";
-import { useSdkScroll as L } from "../useSdkScroll.js";
-import { useAnalyticsListener as u, newTabLinkListener as g, appScrollListener as C, appClickListener as b } from "../../hooks/analytics.js";
-import { useRef as p, useMemo as y, useEffect as K } from "react";
+import { SDKContainer as N, SDKScrollContainer as A } from "./styles.js";
+import { useSdkFeature as F } from "../useSdkFeature.js";
+import { useSdkResponsive as x } from "../useSdkResponsive.js";
+import { useSdkScroll as D } from "../useSdkScroll.js";
+import { useAnalyticsListener as u, newTabLinkListener as L, appScrollListener as g, appClickListener as C } from "../../hooks/analytics.js";
+import { useRef as p, useMemo as b, useEffect as y } from "react";
+import { useStore as K } from "@streamlayer/react-polyfills";
 import { resetCss as c } from "../../ui/theme/theme.js";
 import { ActiveFeature as j, StandaloneFeature as R } from "./Features/index.js";
 import { SDKNavigation as w, SDKHeader as E } from "./Navigation/index.js";
@@ -21,7 +21,7 @@ const M = ({
   scrollNode: s,
   responsiveStore: t
 }) => {
-  const [, a] = x(e);
+  const [, a] = F(e);
   return /* @__PURE__ */ l(j, {
     className: n,
     scrollNode: s,
@@ -37,7 +37,7 @@ const M = ({
   appNode: r,
   responsiveStore: i
 }) => {
-  const s = N(e.featuresList.getStore());
+  const s = K(e.featuresList.getStore());
   return s ? Array.from(s, (t) => {
     const a = e.getFeature(t);
     return a ? /* @__PURE__ */ l(R, {
@@ -52,7 +52,7 @@ const M = ({
   sdk: e,
   topNavigation: n
 }) => {
-  const r = p(null), i = p(null), [s] = D(r), [t, a] = L(r, s), {
+  const r = p(null), i = p(null), [s] = x(r), [t, a] = D(r, s), {
     sdkReady: d,
     activeFeature: m,
     isLogged: S
@@ -60,27 +60,27 @@ const M = ({
   u(r, {
     enabled: o,
     event: "click",
-    listener: g
+    listener: L
   }), u(t, {
     enabled: o,
     event: "scrollend",
-    listener: C,
+    listener: g,
     useDomNode: !0
   }), u(t, {
     enabled: o,
     event: "click",
-    listener: b,
+    listener: C,
     useDomNode: !0
   });
-  const h = y(() => ({
+  const h = b(() => ({
     sdk: e,
     topNavigation: n
   }), [e, n]);
-  return K(() => {
+  return y(() => {
     import("./Features/Gamification/gamification-feature.js");
   }, []), /* @__PURE__ */ l(I.Provider, {
     value: h,
-    children: /* @__PURE__ */ f(A, {
+    children: /* @__PURE__ */ f(N, {
       ref: r,
       className: n ? "" : "c10llmat",
       children: [o && n && /* @__PURE__ */ l(w, {
@@ -91,7 +91,7 @@ const M = ({
         className: v(c, "sl-hide-on-modal"),
         sdk: e,
         ref: i
-      }), /* @__PURE__ */ f(F, {
+      }), /* @__PURE__ */ f(A, {
         className: "sl-hide-on-modal",
         ref: t,
         "data-nav": (!!m && o).toString(),

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,8 +1,8 @@
 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";

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

package/lib/app/useSdkScroll.js

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

package/lib/utils/debug/components/eventInput.js

@@ -1,5 +1,5 @@
 import { jsx as n, jsxs as o } from "react/jsx-runtime";
-import { useStore as d } from "@nanostores/react";
+import { useStore as d } from "@streamlayer/react-polyfills";
 import "@streamlayer/sdk-web-core";
 import { InputField as u } from "./styles.js";
 const y = ({ sdk: t, storage: a, event: e, setEvent: l }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -64,18 +64,19 @@
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^1.13.0",
-    "@streamlayer/sdk-web": "^1.7.0",
-    "@streamlayer/sdk-web-analytics": "^1.5.4",
-    "@streamlayer/sdk-web-anonymous-auth": "^1.1.17",
-    "@streamlayer/sdk-web-api": "^1.6.17",
-    "@streamlayer/sdk-web-core": "^1.9.0",
-    "@streamlayer/sdk-web-features": "^1.0.38",
-    "@streamlayer/sdk-web-interfaces": "^1.4.4",
-    "@streamlayer/sdk-web-logger": "^1.0.38",
-    "@streamlayer/sdk-web-notifications": "^1.3.0",
-    "@streamlayer/sdk-web-storage": "^1.0.38",
-    "@streamlayer/sdk-web-types": "^1.9.0"
+    "@streamlayer/sdk-web": "^1.7.1",
+    "@streamlayer/feature-gamification": "^1.13.1",
+    "@streamlayer/sdk-web-analytics": "^1.5.5",
+    "@streamlayer/sdk-web-anonymous-auth": "^1.1.18",
+    "@streamlayer/sdk-web-api": "^1.6.18",
+    "@streamlayer/sdk-web-core": "^1.9.1",
+    "@streamlayer/sdk-web-features": "^1.0.39",
+    "@streamlayer/sdk-web-interfaces": "^1.4.5",
+    "@streamlayer/sdk-web-logger": "^1.0.39",
+    "@streamlayer/sdk-web-notifications": "^1.3.1",
+    "@streamlayer/sdk-web-storage": "^1.0.39",
+    "@streamlayer/sdk-web-types": "^1.9.1",
+    "@streamlayer/react-polyfills": "^0.0.1"
   },
   "nx": {
     "implicitDependencies": [
@@ -90,7 +91,6 @@
     "@linaria/babel-preset": "^5.0.4",
     "@linaria/core": "^6.2.0",
     "@linaria/react": "^6.2.1",
-    "@nanostores/react": "^0.7.2",
     "@storybook/addon-docs": "^8.3.4",
     "@storybook/addon-viewport": "^8.3.4",
     "@storybook/blocks": "^8.3.4",
@@ -116,6 +116,6 @@
     "vite-plugin-svgr": "^4.2.0",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@streamlayer/react": "^1.10.0"
+    "@streamlayer/react": "^1.11.0"
   }
 }