@streamlayer/react-ui 1.9.0 → 1.11.0

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

@@ -1,19 +1,19 @@
-import { jsxs as n, Fragment as v, jsx as r } from "react/jsx-runtime";
-import { useRef as g, useState as V, useCallback as y, useEffect as w } from "react";
-import { useStreamLayer as x } from "@streamlayer/react";
-import { StreamLayerSDKAdvertisement as m } from "../../Advertisement/index.js";
-import { StreamLayerThemeProvider as c } from "../../../../ui/theme/index.js";
-import { PromoButton as P, VideoFrame as A, AdvSidebar as C, VideoPlayerWrap as b, AdvBanner as F, AdvContent as S } from "./styles.js";
-const D = ({ isMobileScreen: o, sidebar: s, banner: h, event: a, promotionId: l, layoutMode: t }) => {
-  const e = x(), p = g(null), [u, f] = V(!0), d = y(({ muted: i }) => {
-    f(i);
+import { jsxs as n, Fragment as g, jsx as r } from "react/jsx-runtime";
+import { useRef as V, useState as y, useCallback as w, useEffect as x } from "react";
+import { useStreamLayer as P } from "@streamlayer/react";
+import { StreamLayerSDKAdvertisement as c } from "../../Advertisement/index.js";
+import { StreamLayerThemeProvider as h } from "../../../../ui/theme/index.js";
+import { PromoButton as b, VideoFrame as F, AdvSidebar as S, VideoPlayerWrap as A, AdvBanner as B, AdvContent as C } from "./styles.js";
+const E = ({ isMobileScreen: o, skipAutoClose: a, sidebar: s, banner: p, event: d, promotionId: l, layoutMode: t }) => {
+  const e = P(), u = V(null), [f, v] = y(!0), m = w(({ muted: i }) => {
+    v(i);
   }, []);
-  return w(() => (e == null || e.addVideoPlayerController(d), () => {
-    e == null || e.removeVideoPlayerController(d);
-  }), [e, d]), /* @__PURE__ */ n(v, { children: [
-    l && /* @__PURE__ */ n(P, { onClick: () => {
+  return x(() => (e == null || e.addVideoPlayerController(m), () => {
+    e == null || e.removeVideoPlayerController(m);
+  }), [e, m]), /* @__PURE__ */ n(g, { children: [
+    l && /* @__PURE__ */ n(b, { onClick: () => {
       var i;
-      (i = p.current) == null || i.scrollIntoView({ behavior: "smooth" }), setTimeout(() => {
+      (i = u.current) == null || i.scrollIntoView({ behavior: "smooth" }), setTimeout(() => {
         e == null || e.getFeature(12).background.advertisement.show(l);
       }, 200);
     }, children: [
@@ -22,34 +22,35 @@ const D = ({ isMobileScreen: o, sidebar: s, banner: h, event: a, promotionId: l,
     ] }),
     /* @__PURE__ */ r("h3", { children: "Sidebar On Video View and Banner" }),
     /* @__PURE__ */ r("p", { children: "On desktop, the width limit is 344px, and for mobile screens, it is 300px as designed." }),
-    /* @__PURE__ */ n(A, { ref: p, "data-testid": "video-frame", children: [
+    /* @__PURE__ */ n(F, { ref: u, "data-testid": "video-frame", children: [
       /* @__PURE__ */ r(
-        C,
+        S,
         {
           style: {
             ...t === "cover" ? { position: "absolute" } : {},
             ...s === "left" ? { left: 0 } : { right: 0, order: 3 },
             ...o ? { maxWidth: "calc(300px + env(safe-area-inset-left))" } : {}
           },
-          children: e && /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(
-            m,
+          children: e && /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(
+            c,
             {
               isMobileScreen: o,
-              event: a,
+              event: d,
               sdk: e,
               sidebar: s,
               layoutMode: t,
+              skipAutoClose: a,
               persistent: !0
             }
           ) })
         }
       ),
-      /* @__PURE__ */ n(b, { children: [
+      /* @__PURE__ */ n(A, { children: [
         /* @__PURE__ */ r("div", { className: "divAnchor", children: /* @__PURE__ */ r(
           "video",
           {
             src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
-            muted: u,
+            muted: f,
             width: "100%",
             height: "100%",
             autoplay: "autoplay",
@@ -59,20 +60,21 @@ const D = ({ isMobileScreen: o, sidebar: s, banner: h, event: a, promotionId: l,
           }
         ) }),
         /* @__PURE__ */ r(
-          F,
+          B,
           {
             style: {
               ...t === "cover" ? { position: "absolute" } : {},
-              ...h === "top" ? { top: 0, order: -1 } : { bottom: 0 }
+              ...p === "top" ? { top: 0, order: -1 } : { bottom: 0 }
             },
-            children: e && /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(
-              m,
+            children: e && /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(
+              c,
               {
                 isMobileScreen: o,
-                event: a,
+                event: d,
                 sdk: e,
-                banner: h,
+                banner: p,
                 layoutMode: t,
+                skipAutoClose: a,
                 persistent: !0
               }
             ) })
@@ -80,19 +82,20 @@ const D = ({ isMobileScreen: o, sidebar: s, banner: h, event: a, promotionId: l,
         )
       ] })
     ] }),
-    /* @__PURE__ */ r(S, { children: e && /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(
-      m,
+    /* @__PURE__ */ r(C, { children: e && /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(
+      c,
       {
         isMobileScreen: o,
-        event: a,
+        event: d,
         sdk: e,
         sidebar: s,
         layoutMode: t,
+        skipAutoClose: a,
         persistent: !0
       }
     ) }) })
   ] });
 };
 export {
-  D as Video
+  E as Video
 };

package/lib/app/app/styles.js

@@ -0,0 +1,44 @@
+import { styled as s } from "@linaria/react";
+const i = /* @__PURE__ */ s("div")({
+  name: "SDKContainer",
+  class: "sopqfe6",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "SDKScrollContainer",
+  class: "s102vcph",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("div")({
+  name: "SDKContentContainer",
+  class: "s1meqjjv",
+  propsAsIs: !1
+}), a = () => e, n = /* @__PURE__ */ s(a())({
+  name: "SDKWhiteContainer",
+  class: "s1burm22",
+  propsAsIs: !0
+}), c = /* @__PURE__ */ s("div")({
+  name: "TabsContainer",
+  class: "tm5r3j5",
+  propsAsIs: !1
+}), o = () => n, l = /* @__PURE__ */ s(o())({
+  name: "LeaderboardContainer",
+  class: "lysxwr6",
+  propsAsIs: !0
+}), r = () => n, C = /* @__PURE__ */ s(r())({
+  name: "TabsNavContainer",
+  class: "t9er3b1",
+  propsAsIs: !0
+}), m = /* @__PURE__ */ s("div")({
+  name: "UserSummaryContainer",
+  class: "u19dtrb3",
+  propsAsIs: !1
+});
+export {
+  l as LeaderboardContainer,
+  i as SDKContainer,
+  e as SDKContentContainer,
+  p as SDKScrollContainer,
+  n as SDKWhiteContainer,
+  c as TabsContainer,
+  C as TabsNavContainer,
+  m as UserSummaryContainer
+};

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

@@ -1,19 +1,7 @@
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-/**
- * A hook that provides functionality for managing the StreamLayerSDK in the App app.
- * - On activate FG+ button, the SDK is initialized and the FG+ overlay is opened.
- * - On activate Channels or Leaderboard button, the SDK is disabled and the FG+ overlay is closed.
- * - On sdk status change, if sdk disabled (f.e some errors occurred), the SDK is disabled and the FG+ overlay is closed.
- * @param sdk - The StreamLayerSDK instance to use.
- * @returns An object containing various functions and state values for managing the SDK and app overlays.
- * @returns deactivate - A function that disables the SDK and closes the FG+ overlay.
- * @returns activateEventWithId - A function that initializes the SDK and opens the FG+ overlay.
- * With event (The id of the event to create a session for.) as a parameter.
- */
+import { FeatureType } from '@streamlayer/sdk-web-types';
 export declare const useAppApp: (sdk: StreamLayerSDK) => {
-    sdkEnabled: boolean;
     sdkReady: boolean;
-    activateEventWithId: (event: string) => void;
-    deactivate: () => void;
+    activeFeature: FeatureType | undefined;
     isLogged: boolean;
 };

package/lib/app/app/useApp.js

@@ -1,48 +1,19 @@
-import { useStore as n } from "@nanostores/react";
-import { useRef as m, useState as b, useEffect as s, useCallback as c } from "react";
-import { FeatureType as E } from "@streamlayer/sdk-web-types";
-const F = (e) => {
-  const a = m(""), [o, r] = b(!1), p = n(e.status), l = n(e.sdkStore.slStreamId), i = n(e.userId()), f = n(e.getActiveFeature()), u = p === "ready" && !!l.data;
-  s(() => {
-    const t = e.getFeature(E.GAMES);
-    t && (t.closeQuestion(), t.closeUser());
-  }, [f, e]);
-  const A = c(
-    (t) => {
-      a.current = t, r(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: v, err: d }) => {
-        if (!d && v) {
-          e.isUserAuthorized().then((g) => {
-            g || e.disableApp();
-          });
-          return;
-        }
-      });
-    },
-    [e]
-  ), S = c(() => {
-    r(!1), e.disableApp();
-  }, [e]);
-  return s(() => {
-    if (!i) {
-      u && e.disableApp();
-      return;
-    }
-    if (i && a.current && o) {
-      e.initializeApp({ skipOrganizationSettings: !0 }).then(() => {
-        e.createEventSession(a.current);
-      });
-      return;
-    }
-  }, [i]), s(() => () => {
-    r(!1), e.disableApp();
+import { useStore as o } from "@nanostores/react";
+import { useEffect as S } from "react";
+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;
+  return S(() => {
+    const t = e.getFeature(s.GAMES);
+    t && r !== s.GAMES && (t.closeQuestion(), t.closeUser()), t == null || t.openedQuestionId.subscribe((p) => {
+      p && r !== s.GAMES && e.openFeature(s.GAMES);
+    });
   }, [r, e]), {
-    sdkEnabled: o,
-    sdkReady: u,
-    activateEventWithId: A,
-    deactivate: S,
-    isLogged: !!i
+    sdkReady: n,
+    activeFeature: r,
+    isLogged: !!c
   };
 };
 export {
-  F as useAppApp
+  A as useAppApp
 };

package/lib/app/app/useAppContext.d.ts

@@ -1,7 +1,9 @@
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 export declare const AppContext: import('react').Context<{
     sdk: StreamLayerSDK | null;
+    topNavigation?: boolean;
 }>;
 export declare const useAppContext: () => {
     sdk: StreamLayerSDK | null;
+    topNavigation?: boolean;
 };

package/lib/app/app/useAppContext.js

@@ -1,8 +1,9 @@
-import { createContext as t, useContext as e } from "react";
-const o = t({
-  sdk: null
-}), p = () => e(o);
+import { createContext as t, useContext as o } from "react";
+const e = t({
+  sdk: null,
+  topNavigation: !1
+}), p = () => o(e);
 export {
-  o as AppContext,
+  e as AppContext,
   p as useAppContext
 };

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

@@ -1,5 +1,5 @@
 import { ScrollNodeRef } from '../../..';
-import { ScrollStore } from '../../../useSdkScroll';
+import { ScrollStore } from '../../useSdkScroll';
 import { Gamification } from '@streamlayer/feature-gamification';
 export declare const Leaderboard: React.FC<{
     gamification: Gamification;

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

@@ -1,6 +1,6 @@
 import { AppNodeRef, ScrollNodeRef } from '../../..';
-import { ResponsiveStore } from '../../../useSdkResponsive';
-import { ScrollStore } from '../../../useSdkScroll';
+import { ResponsiveStore } from '../../useSdkResponsive';
+import { ScrollStore } from '../../useSdkScroll';
 import { Gamification } from '@streamlayer/feature-gamification';
 export declare const Tabs: React.FC<{
     appNode: AppNodeRef;

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

@@ -1,7 +1,7 @@
 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 { 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 { ActivePages as a, Tabs as K } from "../../../../ui/gamification/tabs/index.js";
 import { Leaderboard as L } from "./Leaderboard.js";

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

@@ -1,6 +1,6 @@
 import { AppNodeRef, ScrollNodeRef } from '../../..';
-import { ResponsiveStore } from '../../../useSdkResponsive';
-import { ScrollStore } from '../../../useSdkScroll';
+import { ResponsiveStore } from '../../useSdkResponsive';
+import { ScrollStore } from '../../useSdkScroll';
 import { Gamification as GamificationClass } from '@streamlayer/feature-gamification';
 export declare const GamificationOverlay: React.FC<{
     gamification: GamificationClass;

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

@@ -1,7 +1,7 @@
 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 { SDKWhiteContainer as h } from "../../styles.js";
 import { useHideTransition as C } from "../../../../hooks/showIn.js";
 import { VoteHeader as k } from "../../../../ui/gamification/detail/header/index.js";
 import { UserStatistics as S } from "../../../../ui/gamification/user-statistics/index.js";

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

@@ -1,6 +1,6 @@
 import { AppNodeRef, ScrollNodeRef } from '../..';
-import { ResponsiveStore } from '../../useSdkResponsive';
-import { ScrollStore } from '../../useSdkScroll';
+import { ResponsiveStore } from '../useSdkResponsive';
+import { ScrollStore } from '../useSdkScroll';
 import { Features } from '@streamlayer/sdk-web-features';
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 /** render feature by type */

package/lib/app/masters/Navigation/MastersNavigation/index.d.ts

@@ -1,4 +1,4 @@
-import { ResponsiveStore } from '../../../useSdkResponsive';
+import { ResponsiveStore } from '../../useSdkResponsive';
 import { ChannelsButtonId } from '../../../../ui/navigation/button/Channels';
 import { FeaturedGroupsButtonId } from '../../../../ui/navigation/button/FeaturedGroups';
 import { LeaderBoardButtonId } from '../../../../ui/navigation/button/LeaderBoard';

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

@@ -1,5 +1,5 @@
 import { AppNodeRef } from '../../..';
-import { ResponsiveStore } from '../../../useSdkResponsive';
+import { ResponsiveStore } from '../../useSdkResponsive';
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 import { Notification } from '@streamlayer/sdk-web-notifications';
 export declare const Onboarding: React.FC<{

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

@@ -1,8 +1,8 @@
 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 { useImagesPreload as F } from "../../../useImagesPreload.js";
-import { scrollIntoAppView as T } from "../../../useSdkScroll.js";
+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 { FeatureType as j } from "@streamlayer/sdk-web-types";
 import { OnboardingUI as E } from "../../../../ui/gamification/onboarding/index.js";
@@ -118,7 +118,7 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
   const {
     loading: g,
     throttled: V
-  } = F(m);
+  } = T(m);
   return f && o && e && s.current && !V ? /* @__PURE__ */ t(G, {
     container: s,
     useContainer: !a,
@@ -153,7 +153,7 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
           close: r.close,
           action: () => {
             var n;
-            d(!0), (((n = s.current) == null ? void 0 : n.getBoundingClientRect().y) || 0) < 0 && T(s, h.size, {
+            d(!0), (((n = s.current) == null ? void 0 : n.getBoundingClientRect().y) || 0) < 0 && F(s, h.size, {
               behavior: "smooth"
             });
           },

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

@@ -1,6 +1,6 @@
 import { AppNodeRef, ScrollNodeRef, HeaderNodeRef } from '../..';
-import { ResponsiveStore } from '../../useSdkResponsive';
-import { ScrollStore } from '../../useSdkScroll';
+import { ResponsiveStore } from '../useSdkResponsive';
+import { ScrollStore } from '../useSdkScroll';
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 export declare const SDKNotifications: React.FC<{
     sdk: StreamLayerSDK;

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

@@ -2,7 +2,7 @@ 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 { 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 { eventBus as C } from "@streamlayer/sdk-web-interfaces";

package/lib/app/masters/masters.js

@@ -1,25 +1,25 @@
 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 { useSdkFeature as F } from "../useSdkFeature.js";
-import { useSdkResponsive as M } from "../useSdkResponsive.js";
-import { useSdkScroll as b } from "../useSdkScroll.js";
-import { useAnalyticsListener as d, newTabLinkListener as D, appScrollListener as I, appClickListener as B } from "../../hooks/analytics.js";
-import { useRef as S, useMemo as T, useEffect as j } from "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 { resetCss as p } from "../../ui/theme/theme.js";
-import { ActiveFeature as k, StandaloneFeature as E } from "./Features/index.js";
-import { MastersNavigation as K } from "./Navigation/MastersNavigation/index.js";
-import { SDKNotifications as O } from "./Notifications/index.js";
-import { useMastersApp as R } from "./useMastersApp.js";
-import { MastersContext as w } from "./useMastersContext.js";
+import { ActiveFeature as j, StandaloneFeature as k } from "./Features/index.js";
+import { MastersNavigation as E } from "./Navigation/MastersNavigation/index.js";
+import { SDKNotifications as K } from "./Notifications/index.js";
+import { useMastersApp as O } from "./useMastersApp.js";
+import { MastersContext as R } from "./useMastersContext.js";
+import { useSdkResponsive as w } from "./useSdkResponsive.js";
 import { StreamLayerMastersThemeProvider as ce } from "../../ui/theme/masters.js";
 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] = F(e);
+  const [, r] = M(e);
   return /* @__PURE__ */ n(
-    k,
+    j,
     {
       className: i,
       scrollNode: s,
@@ -35,7 +35,7 @@ const W = ({ sdk: e, className: i, scrollStore: l, appNode: t, scrollNode: s, re
   return s ? Array.from(s, (o) => {
     const r = e.getFeature(o);
     return r ? /* @__PURE__ */ n(
-      E,
+      k,
       {
         className: i,
         appNode: l,
@@ -47,24 +47,24 @@ 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] = M(t), [r, f] = b(t, o), { sdkEnabled: a, sdkReady: c, activeOverlay: m, activateAndLoadOverlay: h, activateEventWithId: N, deactivate: g, isLogged: y } = R(e);
-  d(t, { enabled: a, event: "click", listener: D }), d(r, {
+  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, {
     enabled: a,
     event: "scrollend",
-    listener: I,
+    listener: D,
     useDomNode: !0
   }), d(r, {
     enabled: a,
     event: "click",
-    listener: B,
+    listener: I,
     useDomNode: !0
   });
-  const L = T(() => ({ sdk: e }), [e]);
-  return j(() => {
+  const L = B(() => ({ sdk: e }), [e]);
+  return T(() => {
     import("./Features/Gamification/gamification-feature.js");
-  }, []), /* @__PURE__ */ n(w.Provider, { value: L, children: /* @__PURE__ */ v(x, { ref: t, children: [
+  }, []), /* @__PURE__ */ n(R.Provider, { value: L, children: /* @__PURE__ */ v(x, { ref: t, children: [
     a && /* @__PURE__ */ n(
-      K,
+      E,
       {
         ref: s,
         sdkReady: c,
@@ -80,7 +80,7 @@ const W = ({ sdk: e, className: i, scrollStore: l, appNode: t, scrollNode: s, re
     ),
     /* @__PURE__ */ v(A, { className: "sl-hide-on-modal", ref: r, "data-nav": a.toString(), children: [
       c && /* @__PURE__ */ n(
-        O,
+        K,
         {
           sdk: e,
           scrollNode: r,

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

@@ -0,0 +1,20 @@
+export declare const SDKContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SDKScrollContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SDKContentContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SDKWhiteContainer: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const TabsContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const LeaderboardContainer: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const TabsNavContainer: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const UserSummaryContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/app/{styles.js → masters/styles.js}

@@ -1,44 +1,44 @@
 import { styled as s } from "@linaria/react";
 const i = /* @__PURE__ */ s("div")({
   name: "SDKContainer",
-  class: "s2j5adf",
+  class: "s8zgqze",
   propsAsIs: !1
-}), c = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("div")({
   name: "SDKScrollContainer",
-  class: "st9ayqn",
+  class: "s6t897k",
   propsAsIs: !1
 }), a = /* @__PURE__ */ s("div")({
   name: "SDKContentContainer",
-  class: "s6rlym7",
+  class: "sw7pkvp",
   propsAsIs: !1
 }), e = () => a, n = /* @__PURE__ */ s(e())({
   name: "SDKWhiteContainer",
-  class: "s1trfff0",
+  class: "s14gkn7u",
   propsAsIs: !0
-}), l = /* @__PURE__ */ s("div")({
+}), c = /* @__PURE__ */ s("div")({
   name: "TabsContainer",
-  class: "t87r8je",
+  class: "t1yxstm9",
   propsAsIs: !1
-}), o = () => n, p = /* @__PURE__ */ s(o())({
+}), o = () => n, l = /* @__PURE__ */ s(o())({
   name: "LeaderboardContainer",
-  class: "l1aiq1lq",
+  class: "ldpty1s",
   propsAsIs: !0
-}), r = () => n, C = /* @__PURE__ */ s(r())({
+}), t = () => n, C = /* @__PURE__ */ s(t())({
   name: "TabsNavContainer",
-  class: "t1o5m8d1",
+  class: "t136a59y",
   propsAsIs: !0
 }), m = /* @__PURE__ */ s("div")({
   name: "UserSummaryContainer",
-  class: "uqh0y7s",
+  class: "u11vnm9m",
   propsAsIs: !1
 });
 export {
-  p as LeaderboardContainer,
+  l as LeaderboardContainer,
   i as SDKContainer,
   a as SDKContentContainer,
-  c as SDKScrollContainer,
+  p as SDKScrollContainer,
   n as SDKWhiteContainer,
-  l as TabsContainer,
+  c as TabsContainer,
   C as TabsNavContainer,
   m as UserSummaryContainer
 };

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

@@ -0,0 +1,15 @@
+import { AppNodeRef } from '..';
+import { MapStore } from 'nanostores';
+import { BREAKPOINTS } from '../../ui/theme/constants';
+type BREAKPOINTS_KEYS = keyof typeof BREAKPOINTS;
+type ResponsiveData = {
+    screen: {
+        name: BREAKPOINTS_KEYS;
+        size: (typeof BREAKPOINTS)[BREAKPOINTS_KEYS];
+    };
+    sdkInView: boolean;
+    sdkInDesktopView: boolean;
+};
+export type ResponsiveStore = MapStore<ResponsiveData>;
+export declare const useSdkResponsive: (appNode: AppNodeRef) => [ResponsiveStore];
+export {};