@streamlayer/react-ui 0.54.0 → 0.55.0

package/lib/index.js

@@ -1,15 +1,15 @@
-import { QuestionInApp as jo } from "./ui/notifications/notification/question-inapp/index.js";
-import { Login as qo } from "./ui/login/index.js";
-import { Onboarding as zo } from "./ui/gamification/onboarding/index.js";
-import { ActivePages as Eo, Tab as Fo, Tabs as Go } from "./ui/gamification/tabs/index.js";
-import { Question as Jo } from "./ui/gamification/question/index.js";
-import { QuestionList as Mo } from "./ui/gamification/question/list/index.js";
-import { UserStatistics as Ro } from "./ui/gamification/user-statistics/index.js";
-import { Vote as Xo } from "./ui/gamification/vote/index.js";
-import { Demo as Zo } from "./ui/demo/index.js";
-import { Points as $o } from "./ui/gamification/points/index.js";
-import { StreamLayerThemeProvider as rr } from "./ui/theme/index.js";
-import { ThemeVariables as mr, resetCss as pr, theme as ir, themeStr as er } from "./ui/theme/theme.js";
+import { QuestionInApp as zo } from "./ui/notifications/notification/question-inapp/index.js";
+import { Login as Eo } from "./ui/login/index.js";
+import { Onboarding as Go } from "./ui/gamification/onboarding/index.js";
+import { ActivePages as Jo, Tab as Ko, Tabs as Mo } from "./ui/gamification/tabs/index.js";
+import { Question as Ro } from "./ui/gamification/question/index.js";
+import { QuestionList as Xo } from "./ui/gamification/question/list/index.js";
+import { UserStatistics as Zo } from "./ui/gamification/user-statistics/index.js";
+import { Vote as $o } from "./ui/gamification/vote/index.js";
+import { Demo as rr } from "./ui/demo/index.js";
+import { Points as mr } from "./ui/gamification/points/index.js";
+import { StreamLayerThemeProvider as ir } from "./ui/theme/index.js";
+import { ThemeVariables as sr, resetCss as fr, theme as xr, themeStr as ar } from "./ui/theme/theme.js";
 import "react/jsx-runtime";
 import "react";
 import "./icon-exit-d3f9fc80.js";
@@ -39,8 +39,10 @@ import "./ui/button/styles.js";
 import "./ui/gamification/constants.js";
 import "./ui/gamification/question/styles.js";
 import "./ui/icons/index.js";
-import "./ui/gamification/insight/index.js";
-import "./ui/gamification/insight/styles.js";
+import "./ui/gamification/question/insight/index.js";
+import "./ui/video-player/index.js";
+import "./ui/video-player/styles.js";
+import "./ui/gamification/question/insight/styles.js";
 import "./ui/gamification/question/list/styles.js";
 import "./utils/common.js";
 import "./ui/gamification/user-statistics/components/rank/index.js";
@@ -72,6 +74,7 @@ import "./ui/demo/Gamification.js";
 import "./ui/demo/components/UserSummary.js";
 import "./ui/demo/components/QuestionsList.js";
 import "./ui/demo/components/Question.js";
+import "./ui/gamification/insight/styles.js";
 import "./ui/gamification/insight-list/styles.js";
 import "./ui/gamification/common-header/styles.js";
 import "./ui/gamification/detailed-insight/styles.js";
@@ -86,6 +89,7 @@ import "./ui/demo/styles.js";
 import "./ui/demo/Highlights.js";
 import "./ui/demo/components/Insights.js";
 import "./ui/gamification/insight-list/index.js";
+import "./ui/gamification/insight/index.js";
 import "./ui/demo/components/Insight.js";
 import "./ui/gamification/detailed-insight/index.js";
 import "./ui/gamification/common-header/index.js";
@@ -95,21 +99,21 @@ import "./ui/gamification/points/styles.js";
 import "./ui/theme/breakpoints.js";
 import "@linaria/core";
 export {
-  Eo as ActivePages,
-  Zo as Demo,
-  qo as Login,
-  zo as Onboarding,
-  $o as Points,
-  Jo as Question,
-  jo as QuestionInApp,
-  Mo as QuestionList,
-  rr as StreamLayerThemeProvider,
-  Fo as Tab,
-  Go as Tabs,
-  mr as ThemeVariables,
-  Ro as UserStatistics,
-  Xo as Vote,
-  pr as resetCss,
-  ir as theme,
-  er as themeStr
+  Jo as ActivePages,
+  rr as Demo,
+  Eo as Login,
+  Go as Onboarding,
+  mr as Points,
+  Ro as Question,
+  zo as QuestionInApp,
+  Xo as QuestionList,
+  ir as StreamLayerThemeProvider,
+  Ko as Tab,
+  Mo as Tabs,
+  sr as ThemeVariables,
+  Zo as UserStatistics,
+  $o as Vote,
+  fr as resetCss,
+  xr as theme,
+  ar as themeStr
 };

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

@@ -1,4 +1,4 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import { styled as p } from "@linaria/react";
 import { useStore as n } from "@nanostores/react";
 import { QuestionType as u } from "@streamlayer/sdk-web-types";
@@ -34,20 +34,20 @@ const d = p.div`
   flex-direction: column;
 `, f = ({ openedQuestion: t }) => {
   var r;
-  return ((r = t == null ? void 0 : t.attributes) == null ? void 0 : r.attributes.case) === "insight" ? /* @__PURE__ */ e(c, { ...t.attributes.attributes.value }) : null;
-}, h = ({ extendedQuestion: t, vote: r }) => {
-  const { loading: i, data: o } = t;
-  return !i && o ? /* @__PURE__ */ e(a, { vote: r, openedQuestion: o }) : null;
+  return ((r = t == null ? void 0 : t.attributes) == null ? void 0 : r.attributes.case) === "insight" ? /* @__PURE__ */ o(c, { created: t.attributes.created, ...t.attributes.attributes.value }) : null;
+}, b = ({ extendedQuestion: t, vote: r }) => {
+  const { loading: i, data: e } = t;
+  return !i && e ? /* @__PURE__ */ o(a, { vote: r, openedQuestion: e }) : null;
 }, F = ({ gamification: t }) => {
   var s;
   const r = n(t.openedQuestion.$store), i = n(t.openedQuestion.$extendedStore);
   if (!r)
     return null;
-  const o = r.type;
+  const e = r.type;
   return /* @__PURE__ */ m(d, { children: [
-    /* @__PURE__ */ e(l, { close: t.closeQuestion, type: ((s = r.attributes) == null ? void 0 : s.type) || u.UNSET }),
-    o === "question" && /* @__PURE__ */ e(h, { vote: t.submitAnswer, extendedQuestion: i }),
-    o !== "question" && /* @__PURE__ */ e(f, { openedQuestion: r })
+    /* @__PURE__ */ o(l, { close: t.closeQuestion, type: ((s = r.attributes) == null ? void 0 : s.type) || u.UNSET }),
+    e === "question" && /* @__PURE__ */ o(b, { vote: t.submitAnswer, extendedQuestion: i }),
+    e !== "question" && /* @__PURE__ */ o(f, { openedQuestion: r })
   ] });
 };
 export {

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

@@ -1,22 +1,24 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useStore as m } from "@nanostores/react";
 import { QuestionList as p } from "../../../gamification/question/list/index.js";
-import "../../../gamification/insight/index.js";
-import "@streamlayer/sdk-web-types";
-import "../../../gamification/insight/styles.js";
-import "@linaria/react";
 import "../../../gamification/question/index.js";
+import "@streamlayer/sdk-web-types";
 import "../../../button/index.js";
 import "../../../button/styles.js";
+import "@linaria/react";
 import "../../../gamification/constants.js";
 import "../../../gamification/question/styles.js";
 import "../../../icons/index.js";
 import "react";
+import "../../../gamification/question/insight/index.js";
+import "../../../video-player/index.js";
+import "../../../video-player/styles.js";
+import "../../../gamification/question/insight/styles.js";
 import "../../../gamification/question/list/styles.js";
-const w = ({ store: r, openQuestion: i }) => {
+const S = ({ store: r, openQuestion: i }) => {
   const t = m(r);
   return t != null && t.data ? /* @__PURE__ */ o(p, { openQuestion: i, questions: t.data }) : /* @__PURE__ */ o("div", { children: "wait questions..." });
 };
 export {
-  w as QuestionsList
+  S as QuestionsList
 };

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

@@ -17,14 +17,16 @@ import "../../../../utils/common.js";
 import "../../../gamification/leaderboard/list-item/styles.js";
 import "../../../icons/index.js";
 import "../../../gamification/question/list/index.js";
-import "../../../gamification/insight/index.js";
-import "@streamlayer/sdk-web-types";
-import "../../../gamification/insight/styles.js";
 import "../../../gamification/question/index.js";
+import "@streamlayer/sdk-web-types";
 import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/constants.js";
 import "../../../gamification/question/styles.js";
+import "../../../gamification/question/insight/index.js";
+import "../../../video-player/index.js";
+import "../../../video-player/styles.js";
+import "../../../gamification/question/insight/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "../../../gamification/user-statistics/index.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
@@ -32,7 +34,7 @@ import "../../../gamification/user-statistics/components/rank/styles.js";
 import "../../../gamification/user-statistics/components/statistic/index.js";
 import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
-const J = ({ gamification: t }) => {
+const V = ({ gamification: t }) => {
   const [o, p] = s(e.HOME);
   return /* @__PURE__ */ i("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
     /* @__PURE__ */ i(n, { children: [
@@ -44,5 +46,5 @@ const J = ({ gamification: t }) => {
   ] });
 };
 export {
-  J as Tabs
+  V as Tabs
 };

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

@@ -6,3 +6,4 @@ export declare const GamificationOverlay: React.FC<{
     sdk: StreamLayerSDK;
     className?: string;
 }>;
+export default GamificationOverlay;

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

@@ -1,12 +1,12 @@
 import { jsxs as p, Fragment as d, jsx as r } from "react/jsx-runtime";
-import { styled as t } from "@linaria/react";
-import { useStore as m } from "@nanostores/react";
-import { SDKWhiteContainer as a, SDKScrollContainer as l } from "../../styles.js";
+import { styled as n } from "@linaria/react";
+import { useStore as e } from "@nanostores/react";
+import { SDKWhiteContainer as l, SDKScrollContainer as a } from "../../styles.js";
 import { VoteHeader as c } from "../../../gamification/detail/header/index.js";
 import { UserStatistics as h } from "../../../gamification/user-statistics/index.js";
-import { ShowIn as n } from "../../../show-in/index.js";
-import { Question as u } from "./Question.js";
-import { Tabs as f } from "./Tabs.js";
+import { ShowIn as u } from "../../../show-in/index.js";
+import { Question as f } from "./Question.js";
+import { Tabs as v } from "./Tabs.js";
 import "../../../gamification/constants.js";
 import "@streamlayer/sdk-web-types";
 import "../../../gamification/detail/header/styles.js";
@@ -44,27 +44,21 @@ import "../../../gamification/leaderboard/list-item/index.js";
 import "../../../gamification/leaderboard/list-item/styles.js";
 import "./QuestionsList.js";
 import "../../../gamification/question/list/index.js";
-import "../../../gamification/insight/index.js";
-import "../../../gamification/insight/styles.js";
 import "../../../gamification/question/index.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/question/styles.js";
+import "../../../gamification/question/insight/index.js";
+import "../../../gamification/question/insight/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "./UserSummary.js";
-const v = t(n)`
+const m = n(u)`
   position: absolute;
   inset: 0;
   top: var(--header-height);
   background: var(--color-neutrals-white);
   z-index: 3;
-`, x = t(n)`
-  position: absolute;
-  inset: 0;
-  top: var(--header-height);
-  background: var(--color-neutrals-white);
-  z-index: 3;
-`, b = t.div`
+`, x = n.div`
   background: var(--color-transparent-item);
   width: 100%;
   height: 100%;
@@ -77,17 +71,18 @@ const v = t(n)`
   & > div {
     width: 100%;
   }
-`, Sr = ({ gamification: o, className: i }) => {
-  const s = m(o.openedQuestion.$store), e = m(o.openedUser);
+`, Sr = ({ gamification: t, className: o }) => {
+  const s = e(t.openedQuestion.$store), i = e(t.openedUser);
   return /* @__PURE__ */ p(d, { children: [
-    s && /* @__PURE__ */ r(v, { className: i, children: /* @__PURE__ */ r(u, { gamification: o }) }),
-    e && /* @__PURE__ */ r(x, { children: /* @__PURE__ */ p(b, { children: [
-      /* @__PURE__ */ r(c, { label: "Friend's Rank", close: o.closeUser }),
-      /* @__PURE__ */ r(a, { children: /* @__PURE__ */ r(h, { ...e }) })
+    s && /* @__PURE__ */ r(m, { className: o, children: /* @__PURE__ */ r(f, { gamification: t }) }),
+    i && /* @__PURE__ */ r(m, { className: o, children: /* @__PURE__ */ p(x, { children: [
+      /* @__PURE__ */ r(c, { label: "Friend's Rank", close: t.closeUser }),
+      /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(h, { ...i }) })
     ] }) }),
-    /* @__PURE__ */ r(l, { className: i, "data-nav": "true", children: /* @__PURE__ */ r(f, { gamification: o }) })
+    /* @__PURE__ */ r(a, { className: o, "data-nav": "true", children: /* @__PURE__ */ r(v, { gamification: t }) })
   ] });
 };
 export {
-  Sr as GamificationOverlay
+  Sr as GamificationOverlay,
+  Sr as default
 };

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

@@ -1,65 +1,23 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useMemo as m } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { lazy as o, useMemo as l, Suspense as m } from "react";
 import { FeatureType as p } from "@streamlayer/sdk-web-types";
-import { FeatureProvider as e } from "./FeatureProvider.js";
-import { GamificationOverlay as n } from "./Gamification/index.js";
+import { FeatureProvider as c } from "./FeatureProvider.js";
 import "@nanostores/react";
 import "@streamlayer/sdk-web-interfaces";
-import "@linaria/react";
-import "../styles.js";
-import "../../gamification/detail/header/index.js";
-import "../../gamification/constants.js";
-import "../../gamification/detail/header/styles.js";
-import "../../icons/index.js";
-import "../../gamification/user-statistics/index.js";
-import "../../../utils/common.js";
-import "../../gamification/user-statistics/components/rank/index.js";
-import "../../gamification/user-statistics/components/rank/styles.js";
-import "../../gamification/user-statistics/components/statistic/index.js";
-import "../../gamification/user-statistics/components/statistic/styles.js";
-import "../../gamification/user-statistics/styles.js";
-import "../../show-in/index.js";
-import "./Gamification/Question.js";
-import "../../gamification/vote/index.js";
-import "../../gamification/vote/feedback/index.js";
-import "../../gamification/vote/feedback/styles.js";
-import "../../gamification/vote/styles.js";
-import "../../gamification/vote/vote-option/index.js";
-import "../../gamification/vote/vote-option/styles.js";
-import "../../gamification/vote/win-bar/index.js";
-import "../../timer/index.js";
-import "react-countdown-circle-timer";
-import "../../theme/constants.js";
-import "../../gamification/vote/win-bar/styles.js";
-import "../../gamification/vote/insight-details/index.js";
-import "../../video-player/index.js";
-import "../../video-player/styles.js";
-import "../../gamification/vote/insight-details/styles.js";
-import "./Gamification/Tabs.js";
-import "../../gamification/tabs/index.js";
-import "../../gamification/tabs/styles.js";
-import "./Gamification/Leaderboard.js";
-import "../../gamification/leaderboard/index.js";
-import "react-virtualized-auto-sizer";
-import "react-window";
-import "react-window-infinite-loader";
-import "../../gamification/leaderboard/list-item/index.js";
-import "../../gamification/leaderboard/list-item/styles.js";
-import "./Gamification/QuestionsList.js";
-import "../../gamification/question/list/index.js";
-import "../../gamification/insight/index.js";
-import "../../gamification/insight/styles.js";
-import "../../gamification/question/index.js";
-import "../../button/index.js";
-import "../../button/styles.js";
-import "../../gamification/question/styles.js";
-import "../../gamification/question/list/styles.js";
-import "./Gamification/UserSummary.js";
-const lr = ({
-  sdk: t,
-  feature: r,
-  className: o
-}) => m(() => r && r.featureConfig.get().type === p.GAMES ? /* @__PURE__ */ i(e, { className: o, sdk: t, feature: r, children: /* @__PURE__ */ i(n, { className: o, gamification: r, sdk: t }) }) : null, [t, r, o]);
+const u = o(() => import("./Gamification/index.js")), s = ({
+  sdk: e,
+  feature: t,
+  className: i
+}) => {
+  const n = l(() => t && t.featureConfig.get().type === p.GAMES ? /* @__PURE__ */ r(c, { className: i, sdk: e, feature: t, children: /* @__PURE__ */ r(u, { className: i, gamification: t, sdk: e }) }) : null, [e, t, i]);
+  return /* @__PURE__ */ r(
+    m,
+    {
+      fallback: /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
+      children: n
+    }
+  );
+};
 export {
-  lr as ActiveFeature
+  s as ActiveFeature
 };

package/lib/ui/app/Navigation/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import { Overlays } from '..';
+import { Overlays } from '../../app/masters';
 import { ButtonProps } from '../../navigation/button';
 export declare const SDKNavigation: React.FC<{
     customOverlays: Overlays;

package/lib/ui/app/masters.js

@@ -1,13 +1,13 @@
-import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import { resetCss as e } from "../theme/theme.js";
-import { ActiveFeature as v } from "./Features/index.js";
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
+import { resetCss as m } from "../theme/theme.js";
+import { ActiveFeature as g } from "./Features/index.js";
 import { MastersNavigation as S } from "./Navigation/MastersNavigation/index.js";
-import { SDKContainer as y, SDKScrollContainer as a } from "./styles.js";
+import { SDKContainer as h, SDKScrollContainer as s } from "./styles.js";
 import { useMastersApp as k } from "./useMastersApp.js";
 import { useSdkFeature as b } from "./useSdkFeature.js";
 import { ChannelsButtonId as A } from "../navigation/button/Channels.js";
-import { LeaderBoardButtonId as n } from "../navigation/button/LeaderBoard.js";
-import { FeaturedGroupsButtonId as B } from "../navigation/button/FeaturedGroups.js";
+import { LeaderBoardButtonId as p } from "../navigation/button/LeaderBoard.js";
+import { FeaturedGroupsButtonId as d } from "../navigation/button/FeaturedGroups.js";
 import "@linaria/core";
 import "../theme/constants.js";
 import "react";
@@ -15,93 +15,47 @@ import "@streamlayer/sdk-web-types";
 import "./Features/FeatureProvider.js";
 import "@nanostores/react";
 import "@streamlayer/sdk-web-interfaces";
-import "./Features/Gamification/index.js";
-import "@linaria/react";
-import "../gamification/detail/header/index.js";
-import "../gamification/constants.js";
-import "../gamification/detail/header/styles.js";
-import "../icons/index.js";
-import "../gamification/user-statistics/index.js";
-import "../../utils/common.js";
-import "../gamification/user-statistics/components/rank/index.js";
-import "../gamification/user-statistics/components/rank/styles.js";
-import "../gamification/user-statistics/components/statistic/index.js";
-import "../gamification/user-statistics/components/statistic/styles.js";
-import "../gamification/user-statistics/styles.js";
-import "../show-in/index.js";
-import "./Features/Gamification/Question.js";
-import "../gamification/vote/index.js";
-import "../gamification/vote/feedback/index.js";
-import "../gamification/vote/feedback/styles.js";
-import "../gamification/vote/styles.js";
-import "../gamification/vote/vote-option/index.js";
-import "../gamification/vote/vote-option/styles.js";
-import "../gamification/vote/win-bar/index.js";
-import "../timer/index.js";
-import "react-countdown-circle-timer";
-import "../gamification/vote/win-bar/styles.js";
-import "../gamification/vote/insight-details/index.js";
-import "../video-player/index.js";
-import "../video-player/styles.js";
-import "../gamification/vote/insight-details/styles.js";
-import "./Features/Gamification/Tabs.js";
-import "../gamification/tabs/index.js";
-import "../gamification/tabs/styles.js";
-import "./Features/Gamification/Leaderboard.js";
-import "../gamification/leaderboard/index.js";
-import "react-virtualized-auto-sizer";
-import "react-window";
-import "react-window-infinite-loader";
-import "../gamification/leaderboard/list-item/index.js";
-import "../gamification/leaderboard/list-item/styles.js";
-import "./Features/Gamification/QuestionsList.js";
-import "../gamification/question/list/index.js";
-import "../gamification/insight/index.js";
-import "../gamification/insight/styles.js";
-import "../gamification/question/index.js";
-import "../button/index.js";
-import "../button/styles.js";
-import "../gamification/question/styles.js";
-import "../gamification/question/list/styles.js";
-import "./Features/Gamification/UserSummary.js";
 import "../navigation/masters.js";
+import "@linaria/react";
 import "../navigation/index.js";
+import "../icons/index.js";
 import "../navigation/button/index.js";
 import "../navigation/button/styles.js";
-const C = ({ sdk: r, className: m }) => {
-  const [, p] = b(r);
-  return /* @__PURE__ */ i(v, { className: m, feature: p, sdk: r });
-}, wt = ({ sdk: r, overlays: m, children: p }) => {
-  const { sdkEnabled: o, sdkReady: s, activeOverlay: t, activateAndLoadOverlay: d, enableSdk: l, disableSdk: c } = k(r);
-  return /* @__PURE__ */ f(y, { children: [
-    o && /* @__PURE__ */ i(
+const C = ({ sdk: o, className: i }) => {
+  const [, a] = b(o);
+  return /* @__PURE__ */ e(g, { className: i, feature: a, sdk: o });
+}, U = ({ sdk: o, overlays: i, children: a }) => {
+  const { sdkEnabled: r, sdkReady: l, activeOverlay: t, activateAndLoadOverlay: c, enableSdk: u, disableSdk: f, isLogged: n } = k(o);
+  return /* @__PURE__ */ y(h, { children: [
+    r && /* @__PURE__ */ e(
       S,
       {
-        sdkReady: s,
+        sdkReady: l,
         activeOverlay: t,
-        className: e,
-        setActiveOverlay: (u) => d("", u)
+        className: m,
+        setActiveOverlay: (v) => c("", v)
       }
     ),
-    /* @__PURE__ */ i(
-      a,
+    /* @__PURE__ */ e(
+      s,
       {
-        "data-nav": o.toString(),
-        style: { display: !o || t === A ? "block" : "none" },
-        children: p && p({ enableSdk: l, disableSdk: c })
+        "data-nav": r.toString(),
+        style: { display: !r || t === A ? "block" : "none" },
+        children: a && a({ enableSdk: u, disableSdk: f })
       }
     ),
-    /* @__PURE__ */ i(
-      a,
+    /* @__PURE__ */ e(
+      s,
       {
-        "data-nav": o.toString(),
-        style: { display: t === n ? "block" : "none" },
-        children: m && t === n && m[t]
+        "data-nav": r.toString(),
+        style: { display: t === p ? "block" : "none" },
+        children: i && t === p && i[t]
       }
     ),
-    o && t === B && /* @__PURE__ */ i(C, { className: e, sdk: r })
+    n && r && t === d && /* @__PURE__ */ e(C, { className: m, sdk: o }),
+    !n && r && t === d && /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "You are not logged in." })
   ] });
 };
 export {
-  wt as MastersApp
+  U as MastersApp
 };

package/lib/ui/app/useMastersApp.d.ts

@@ -18,4 +18,5 @@ export declare const useMastersApp: (sdk: StreamLayerSDK) => {
     activateAndLoadOverlay: (event: string, overlay: AvailableOverlays) => void;
     enableSdk: (event: string) => void;
     disableSdk: () => void;
+    isLogged: boolean;
 };

package/lib/ui/app/useMastersApp.js

@@ -1,8 +1,8 @@
-import { useStore as d } from "@nanostores/react";
-import { useState as u, useCallback as f, useEffect as S } from "react";
-import { FeatureType as b } from "@streamlayer/sdk-web-types";
+import { useStore as u } from "@nanostores/react";
+import { useState as l, useCallback as b, useEffect as A } from "react";
+import { FeatureType as v } from "@streamlayer/sdk-web-types";
 import "react/jsx-runtime";
-import { ChannelsButtonId as l } from "../navigation/button/Channels.js";
+import { ChannelsButtonId as m } from "../navigation/button/Channels.js";
 import { FeaturedGroupsButtonId as o } from "../navigation/button/FeaturedGroups.js";
 import "../navigation/button/LeaderBoard.js";
 import "../navigation/masters.js";
@@ -11,37 +11,38 @@ import "../icons/index.js";
 import "../navigation/button/index.js";
 import "../navigation/button/styles.js";
 import "../navigation/index.js";
-const R = (t) => {
-  const [m, n] = u(!1), a = d(t.status) === "ready", [i, p] = u(o), s = f(
-    (e, r) => {
-      p(r), r === o ? (e && t.createEventSession(e), t.openFeature(b.GAMES)) : t.closeFeature();
+const T = (e) => {
+  const [c, n] = l(!1), d = u(e.status), { data: f } = u(e.getUserStore()), a = d === "ready", [i, p] = l(o), s = b(
+    (t, r) => {
+      p(r), r === o ? (t && e.createEventSession(t), e.openFeature(v.GAMES)) : e.closeFeature();
     },
-    [t]
+    [e]
   );
-  return S(() => {
-    !a && i === o && (p(l), t.closeFeature());
-  }, [a, i, t]), {
-    sdkEnabled: m,
+  return A(() => {
+    !a && i === o && (p(m), e.closeFeature());
+  }, [a, i, e]), {
+    sdkEnabled: c,
     sdkReady: a,
     activeOverlay: i,
     activateAndLoadOverlay: s,
-    enableSdk: (e) => {
-      t.initializeApp().then(({ enabled: r, err: c }) => {
-        if (n(!0), c) {
-          s(e, l);
+    enableSdk: (t) => {
+      e.initializeApp().then(({ enabled: r, err: S }) => {
+        if (n(!0), S) {
+          s(t, m);
           return;
         }
         if (r) {
-          s(e, o);
+          s(t, o);
           return;
         }
       });
     },
     disableSdk: () => {
-      n(!1), t.disableApp();
-    }
+      n(!1), e.disableApp();
+    },
+    isLogged: !!f
   };
 };
 export {
-  R as useMastersApp
+  T as useMastersApp
 };

package/lib/ui/app/useSdkFeature.js

@@ -1,24 +1,24 @@
-import { useStore as i } from "@nanostores/react";
-import { useState as n, useEffect as c } from "react";
-import { FeatureStatus as s } from "@streamlayer/sdk-web-interfaces";
-const m = (a) => {
-  const r = i(a.getActiveFeature()), [o, f] = n(null);
-  return c(() => {
-    const u = a.getFeatures();
-    if (r)
+import { useStore as o } from "@nanostores/react";
+import { useState as c, useEffect as l } from "react";
+import { FeatureStatus as a } from "@streamlayer/sdk-web-interfaces";
+const d = (r) => {
+  const s = o(r.getActiveFeature()), i = o(r.streamStore()), [n, f] = c(null);
+  return l(() => {
+    const u = r.getFeatures();
+    if (s)
       for (const [e, t] of u)
-        e === r ? t.status.get() === s.Suspended && (t.enable(), f(t)) : t.status.get() === s.Ready && t.disable();
+        e === s ? t.status.get() === a.Suspended && (t.enable(), f(t)) : t.status.get() === a.Ready && t.disable();
     else {
       for (const [, e] of u)
-        e.status.get() === s.Ready && e.disable();
+        e.status.get() === a.Ready && e.disable();
       f(null);
     }
     return () => {
       for (const [, e] of u)
-        e.status.get() === s.Ready && e.disable();
+        e.status.get() === a.Ready && e.disable();
     };
-  }, [r, a]), [r, o];
+  }, [s, r, i]), [s, n];
 };
 export {
-  m as useSdkFeature
+  d as useSdkFeature
 };