@streamlayer/react-ui 1.19.1 → 1.21.0

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

@@ -7,7 +7,6 @@ export declare const Onboarding: React.FC<{
     notification: Notification;
     saveHeight: (height: number) => void;
     appNode: AppNodeRef;
-    sdkInDesktopView?: boolean;
     style?: React.CSSProperties;
     responsiveStore: ResponsiveStore;
 }>;

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

@@ -41,26 +41,26 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
   propsAsIs: !1
 }), q = ({
   deepLink: l,
-  onboardingOpts: r,
+  onboardingOpts: C,
   notification: i,
-  gamification: c,
+  gamification: p,
   loading: s,
   sdk: a
 }) => {
-  var d, o, m, h, g, V, L;
-  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(({
+  var o, m, h, g, V, L, n;
+  const d = x(p.friends.getStore()), [e, f] = I(void 0), u = S(() => {
+    var c, b;
+    const r = a.getInviter();
+    return r ? (b = (c = d.data) == null ? void 0 : c.find(({
       slId: k
-    }) => k === C)) == null ? void 0 : b.name : "";
-  }, [p.data, a]);
+    }) => k === r)) == null ? void 0 : b.name : "";
+  }, [d.data, a]);
   return B(() => {
-    const C = l.$store.subscribe((n) => {
-      n && e(n.data);
+    const r = l.$store.subscribe((c) => {
+      c && f(c.data);
     });
     return () => {
-      C();
+      r();
     };
   }, [l.$store]), /* @__PURE__ */ t(W, {
     children: /* @__PURE__ */ t(E, {
@@ -75,45 +75,44 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
         label: "Top the leader board and best your friends.",
         icon: "icon-trophy"
       }],
-      rulesBtnLabel: (d = r.rules) == null ? void 0 : d.buttonLabel,
-      rulesTitle: (o = r.rules) == null ? void 0 : o.heading,
+      rulesBtnLabel: (o = C.rules) == null ? void 0 : o.buttonLabel,
+      rulesTitle: (m = C.rules) == null ? void 0 : m.heading,
       termsTitle: "Terms and Conditions",
-      termsText: (m = r.rules) == null ? void 0 : m.terms,
+      termsText: (h = C.rules) == null ? void 0 : h.terms,
       steps: H,
-      primaryColor: (h = r.inviteCard) == null ? void 0 : h.iconColor,
-      inviteLink: u,
-      inviteCardTitle: (g = r.inviteCard) == null ? void 0 : g.heading,
-      inviteCardSubtext: (V = r.inviteCard) == null ? void 0 : V.subtext,
-      inviteCardBtnLabel: (L = r.inviteCard) == null ? void 0 : L.buttonLabel,
+      primaryColor: (g = C.inviteCard) == null ? void 0 : g.iconColor,
+      inviteLink: e,
+      inviteCardTitle: (V = C.inviteCard) == null ? void 0 : V.heading,
+      inviteCardSubtext: (L = C.inviteCard) == null ? void 0 : L.subtext,
+      inviteCardBtnLabel: (n = C.inviteCard) == null ? void 0 : n.buttonLabel,
       onClose: () => {
-        var C;
-        (C = i.close) == null || C.call(i);
+        var r;
+        (r = i.close) == null || r.call(i);
       },
-      gamification: c,
+      gamification: p,
       sdk: a,
-      inviterName: f
+      inviterName: u
     })
   });
 }, r2 = ({
   sdk: l,
-  notification: r,
+  notification: C,
   saveHeight: i,
-  style: c,
+  style: p,
   appNode: s,
-  sdkInDesktopView: a,
-  responsiveStore: p
+  responsiveStore: a
 }) => {
   var L;
-  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), []), {
+  const d = A(null), e = C.data.onboarding, [f, u] = I(e == null ? void 0 : e.instantOpen), o = l.getFeature(j.GAMES), m = S(() => H == null ? void 0 : H.map(({
+    graphicSrc: n
+  }) => n), []), {
     screen: h
-  } = x(p, {
+  } = x(a, {
     keys: ["screen"]
   });
   (L = e == null ? void 0 : e.titleCard) != null && L.media && (e.titleCard.media.sponsorLogo = R), _(() => {
-    var C;
-    i(((C = u.current) == null ? void 0 : C.getBoundingClientRect().height) || 0);
+    var n;
+    i(((n = d.current) == null ? void 0 : n.getBoundingClientRect().height) || 0);
   }, [i]);
   const {
     loading: g,
@@ -121,10 +120,10 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
   } = T(m);
   return f && o && e && s.current && !V ? /* @__PURE__ */ t(G, {
     container: s,
-    useContainer: !a,
+    useContainer: !1,
     children: /* @__PURE__ */ t(q, {
-      notification: r,
-      setOpened: d,
+      notification: C,
+      setOpened: u,
       gamification: o,
       onboardingOpts: e,
       deepLink: o.deepLink,
@@ -133,7 +132,7 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
     })
   }) : /* @__PURE__ */ Z(w, {
     children: [/* @__PURE__ */ t(y, {
-      ref: u,
+      ref: d,
       style: {
         position: "absolute",
         visibility: "hidden"
@@ -146,14 +145,14 @@ const R = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
         onboarding: e
       })
     }), /* @__PURE__ */ t(O, {
-      style: c,
-      hiding: r.hiding,
+      style: p,
+      hiding: C.hiding,
       children: /* @__PURE__ */ t(y, {
         children: /* @__PURE__ */ t(M, {
-          close: r.close,
+          close: C.close,
           action: () => {
-            var n;
-            d(!0), (((n = s.current) == null ? void 0 : n.getBoundingClientRect().y) || 0) < 0 && F(s, h.size, {
+            var r;
+            u(!0), (((r = s.current) == null ? void 0 : r.getBoundingClientRect().y) || 0) < 0 && F(s, h.size, {
               behavior: "smooth"
             });
           },

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

@@ -1,82 +1,77 @@
-import { jsxs as f, Fragment as D, jsx as c } from "react/jsx-runtime";
-import { cx as N } from "@linaria/core";
+import { jsxs as g, Fragment as V, jsx as c } from "react/jsx-runtime";
+import { cx as D } from "@linaria/core";
 import { useMastersContext as T } from "../useMastersContext.js";
 import { scrollIntoAppView as q } from "../useSdkScroll.js";
-import { useState as p, useMemo as E, useEffect as h, useRef as O, useCallback as w } from "react";
+import { useState as f, useMemo as E, useEffect as h, useRef as O, useCallback as w } from "react";
 import { r as b } from "../../../index-DALxy-8N.js";
-import { useStore as g } from "@streamlayer/react-polyfills";
+import { useStore as p } from "@streamlayer/react-polyfills";
 import { eventBus as C } from "@streamlayer/sdk-web-interfaces";
 import { NotificationType as a } from "@streamlayer/sdk-web-notifications";
 import { QuestionTypeData as R } from "../../../ui/gamification/constants.js";
-import { Notification as V } from "../../../ui/gamification/question/notification/index.js";
+import { Notification as N } from "../../../ui/gamification/question/notification/index.js";
 import { PredictionResult as P } from "../../../ui/gamification/question/notification/prediction-result/index.js";
 import { Onboarding as x } from "./Onboarding/index.js";
 import { HiddenContainer as A, Container as B, InnerContainer as H, NotificationRefreshing as Q, Pill as U } from "./styles.js";
 const j = (n) => {
-  const [t, u] = p(0), i = O(null), d = w((r) => {
-    i.current = r;
+  const [t, u] = f(0), i = O(null), l = w((o) => {
+    i.current = o;
   }, []);
   h(() => {
-    var l;
-    const r = (l = i.current) == null ? void 0 : l.getBoundingClientRect();
-    r && u(r.height);
+    var d;
+    const o = (d = i.current) == null ? void 0 : d.getBoundingClientRect();
+    o && u(o.height);
   }, [n]);
-  const o = w((r) => {
-    u(r);
+  const r = w((o) => {
+    u(o);
   }, []);
-  return [d, t, o];
+  return [l, t, r];
 }, z = ({
   sdk: n,
   notification: t,
   appNode: u,
   responsiveStore: i
 }) => {
-  var s, e;
+  var m, s;
   const {
-    sdkInDesktopView: d
-  } = g(i, {
-    keys: ["sdkInDesktopView"]
-  }), {
-    sdk: o
-  } = T(), [r, l, m] = j(t.id);
-  return t.type === a.QUESTION ? /* @__PURE__ */ f(D, {
+    sdk: l
+  } = T(), [r, o, d] = j(t.id);
+  return t.type === a.QUESTION ? /* @__PURE__ */ g(V, {
     children: [/* @__PURE__ */ c(A, {
       ref: r,
-      children: /* @__PURE__ */ c(V, {
+      children: /* @__PURE__ */ c(N, {
         ...t
       })
-    }), /* @__PURE__ */ f(B, {
+    }), /* @__PURE__ */ g(B, {
       style: {
-        height: t.hiding ? 0 : l
+        height: t.hiding ? 0 : o
       },
       hiding: t.hiding,
       children: [/* @__PURE__ */ c(H, {
         style: {
           height: "100%"
         },
-        children: /* @__PURE__ */ c(V, {
+        children: /* @__PURE__ */ c(N, {
           ...t,
-          controlVideo: o == null ? void 0 : o.controlVideoPlayer
+          controlVideo: l == null ? void 0 : l.controlVideoPlayer
         })
       }), /* @__PURE__ */ c(Q, {}, t.id)]
     })]
-  }) : t.type === a.QUESTION_RESOLVED && ((e = (s = t.data) == null ? void 0 : s.question) != null && e.predictionResult) ? /* @__PURE__ */ c(P, {
+  }) : t.type === a.QUESTION_RESOLVED && ((s = (m = t.data) == null ? void 0 : m.question) != null && s.predictionResult) ? /* @__PURE__ */ c(P, {
     style: {
-      height: t.hiding ? 0 : l
+      height: t.hiding ? 0 : o
     },
-    saveHeight: m,
+    saveHeight: d,
     close: t.close,
     hiding: t.hiding,
     ...t.data.question,
     mastersApp: !0
   }) : t.type === a.ONBOARDING ? /* @__PURE__ */ c(x, {
     style: {
-      height: t.hiding ? 0 : l
+      height: t.hiding ? 0 : o
     },
-    saveHeight: m,
+    saveHeight: d,
     sdk: n,
     notification: t,
-    sdkInDesktopView: d,
     appNode: u,
     responsiveStore: i
   }) : null;
@@ -85,47 +80,47 @@ const j = (n) => {
   setPill: t,
   appNode: u,
   headerNode: i,
-  scrollNode: d,
-  responsiveStore: o,
-  scrollStore: r
+  scrollNode: l,
+  responsiveStore: r,
+  scrollStore: o
 }) => {
-  var k, y;
+  var y, I;
   const {
-    screen: l
-  } = g(o, {
+    screen: d
+  } = p(r, {
     keys: ["screen"]
   }), {
     tabsShown: m,
     scrollPosition: s
-  } = g(r, {
+  } = p(o, {
     keys: ["tabsShown", "scrollPosition"]
   });
   h(() => {
-    o.get().sdkInDesktopView ? s < 50 && t(null) : s > -50 && t(null);
-  }, [s, o, t]);
-  const e = o.get().sdkInDesktopView ? u : i;
+    r.get().sdkInDesktopView ? s < 50 && t(null) : s > -50 && t(null);
+  }, [s, r, t]);
+  const e = r.get().sdkInDesktopView ? u : i;
   return !n || !e.current ? null : b.createPortal(/* @__PURE__ */ c(U, {
-    title: n.type === a.QUESTION_RESOLVED ? "Prediction result" : `New ${((y = R[(k = n.data) == null ? void 0 : k.questionType]) == null ? void 0 : y.label) || "notification"}`,
+    title: n.type === a.QUESTION_RESOLVED ? "Prediction result" : `New ${((I = R[(y = n.data) == null ? void 0 : y.questionType]) == null ? void 0 : I.label) || "notification"}`,
     onClick: () => {
-      var I;
-      o.get().sdkInDesktopView ? (I = d.current) == null || I.scrollTo({
+      var k;
+      r.get().sdkInDesktopView ? (k = l.current) == null || k.scrollTo({
         top: 0,
         behavior: "smooth"
-      }) : q(u, l.size, {
+      }) : q(u, d.size, {
         behavior: "smooth"
       }), t(null);
     },
-    className: N(m && F, "sl-pill-button")
+    className: D(m && F, "sl-pill-button")
   }), e.current);
 }, it = ({
   sdk: n,
   headerNode: t,
   scrollNode: u,
   responsiveStore: i,
-  appNode: d,
-  scrollStore: o
+  appNode: l,
+  scrollStore: r
 }) => {
-  const [r] = p(n.getNotificationsStore()), l = g(r), [m, s] = p(null), e = E(() => n.getActiveNotification(), [n, l]);
+  const [o] = f(n.getNotificationsStore()), d = p(o), [m, s] = f(null), e = E(() => n.getActiveNotification(), [n, d]);
   return h(() => {
     e && C.emit("notification", {
       action: "rendered",
@@ -136,25 +131,25 @@ const j = (n) => {
     });
   }, [e]), h(() => {
     e && (i.get().sdkInDesktopView || i.get().sdkInView) && (!i.get().sdkInDesktopView && i.get().sdkInView && s(e), i.get().sdkInDesktopView && window.requestAnimationFrame(() => {
-      o.get().scrollPosition !== 0 && s(e);
+      r.get().scrollPosition !== 0 && s(e);
     }));
   }, [e]), h(() => {
     e || s(null);
-  }, [e]), /* @__PURE__ */ f(D, {
+  }, [e]), /* @__PURE__ */ g(V, {
     children: [!m && e && /* @__PURE__ */ c(z, {
       headerNode: t,
-      appNode: d,
+      appNode: l,
       sdk: n,
       notification: e,
       responsiveStore: i
     }), m && /* @__PURE__ */ c(L, {
       pill: m,
       setPill: s,
-      appNode: d,
+      appNode: l,
       notification: e,
       headerNode: t,
       scrollNode: u,
-      scrollStore: o,
+      scrollStore: r,
       responsiveStore: i
     })]
   });

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

@@ -1,28 +1,34 @@
-import { jsx as n } from "react/jsx-runtime";
-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] = i(0);
+import { jsx as m } from "react/jsx-runtime";
+import { useState as a, useEffect as c } from "react";
+import { useStore as l } from "@streamlayer/react-polyfills";
+import { FeatureStatus as u, eventBus as n } from "@streamlayer/sdk-web-interfaces";
+import { FeatureType as f } from "@streamlayer/sdk-web-types";
+import { Points as S } from "../../../ui/gamification/points/index.js";
+const y = ({ gamification: e }) => {
+  const s = e.userSummary.$store, [t, p] = a(0);
   return c(() => {
-    const m = s.subscribe((t) => {
+    const i = s.subscribe((r) => {
       var o;
-      (o = t == null ? void 0 : t.summary) != null && o.points && u(t.summary.points);
+      (o = r == null ? void 0 : r.summary) != null && o.points && p(r.summary.points);
     });
     return () => {
-      m();
+      i();
     };
-  }, [s]), /* @__PURE__ */ n(l, { points: r, onClick: () => {
-    e.status.get() === p.Suspended && e.openFeature();
+  }, [s]), /* @__PURE__ */ m(S, { points: t, onClick: () => {
+    e.status.get() === u.Suspended ? (e.openFeature(), n.emit("app", {
+      action: "open",
+      payload: {}
+    })) : e.status.get() === u.Ready && (e.closeFeature(!1), n.emit("app", {
+      action: "close",
+      payload: {}
+    }));
   } });
-}, h = ({ sdk: e }) => {
-  if (!f(e.featuresList.getStore()))
+}, k = ({ sdk: e }) => {
+  if (!l(e.featuresList.getStore()))
     return null;
-  const r = e.getFeature(S.GAMES);
-  return r ? /* @__PURE__ */ n(a, { gamification: r }) : null;
+  const t = e.getFeature(f.GAMES);
+  return t ? /* @__PURE__ */ m(y, { gamification: t }) : null;
 };
 export {
-  h as StreamLayerSDKPoints
+  k as StreamLayerSDKPoints
 };

package/lib/app/masters/masters.js

@@ -1,107 +1,85 @@
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import { cx as x } from "@linaria/core";
-import { SDKContainer as y, SDKScrollContainer as A } from "./styles.js";
-import { useSdkScroll as C } from "./useSdkScroll.js";
-import { useSdkFeature as D } from "../useSdkFeature.js";
-import { useAnalyticsListener as p, newTabLinkListener as I, appScrollListener as M, appClickListener as P } from "../../hooks/analytics.js";
-import { useRef as d, useState as E, useEffect as S, useMemo as g } from "react";
-import { useStore as i } from "@streamlayer/react-polyfills";
-import { FeatureType as k } from "@streamlayer/sdk-web-types";
-import { resetCss as f } from "../../ui/theme/theme.js";
-import { BetPackOverlay as w } from "./BetPack/index.js";
-import { ActiveFeature as K, StandaloneFeature as B } from "./Features/index.js";
-import { SDKHeader as O } from "./Header/index.js";
-import { SDKNotifications as R } from "./Notifications/index.js";
-import { MastersContext as j } from "./useMastersContext.js";
-import { useSdkResponsive as G } from "./useSdkResponsive.js";
-import { StreamLayerMastersThemeProvider as me } from "../../ui/theme/masters.js";
-const T = ({ sdk: e, className: o }) => {
-  const [, r] = D(e);
-  return /* @__PURE__ */ t(K, { className: o, feature: r, sdk: e });
-}, V = ({ sdk: e, className: o, appNode: r, responsiveStore: l }) => {
-  const n = i(e.featuresList.getStore());
-  return n ? Array.from(n, (a) => {
-    const s = e.getFeature(a);
-    return s ? /* @__PURE__ */ t(
-      B,
-      {
-        className: o,
-        appNode: r,
-        feature: s,
-        responsiveStore: l,
-        sdk: e
-      },
-      a
-    ) : null;
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
+import { cx as w } from "@linaria/core";
+import { SDKContainer as L, SDKScrollContainer as N } from "./styles.js";
+import { useSdkScroll as x } from "./useSdkScroll.js";
+import { useSdkFeature as y } from "../useSdkFeature.js";
+import { useAnalyticsListener as h, newTabLinkListener as F } from "../../hooks/analytics.js";
+import A from "lodash.throttle";
+import { useState as b, useMemo as E, useRef as d, useEffect as p } from "react";
+import { useStore as c } from "@streamlayer/react-polyfills";
+import { FeatureType as I } from "@streamlayer/sdk-web-types";
+import { resetCss as u } from "../../ui/theme/theme.js";
+import { BetPackOverlay as M } from "./BetPack/index.js";
+import { ActiveFeature as k, StandaloneFeature as z } from "./Features/index.js";
+import { SDKHeader as C } from "./Header/index.js";
+import { SDKNotifications as P } from "./Notifications/index.js";
+import { MastersContext as g } from "./useMastersContext.js";
+import { checkSdkInDesktopView as S, getScreenSize as v, useSdkResponsive as D } from "./useSdkResponsive.js";
+import { StreamLayerMastersThemeProvider as se } from "../../ui/theme/masters.js";
+const B = ({ sdk: e, className: t }) => {
+  const [, r] = y(e);
+  return /* @__PURE__ */ a(k, { className: t, feature: r, sdk: e });
+}, K = ({ sdk: e, className: t, appNode: r }) => {
+  const o = c(e.featuresList.getStore());
+  return o ? Array.from(o, (n) => {
+    const s = e.getFeature(n);
+    return s ? /* @__PURE__ */ a(z, { className: t, appNode: r, feature: s, sdk: e }, n) : null;
   }) : null;
-}, q = ({
-  responsiveStore: e,
-  ...o
-}) => {
-  const { sdkInDesktopView: r } = i(e);
-  return /* @__PURE__ */ t(w, { ...o, isMobile: !r });
-}, ae = ({ sdk: e, betPack: o }) => {
-  const r = d(null), [l, n] = E(o), a = d(null), [s] = G(r), [m, v] = C(r, s), N = i(e.status), F = i(e.sdkStore.slStreamId), b = !!i(e.userId()), c = N === "ready" && !!F.data;
-  S(() => {
+}, O = (e) => {
+  const [t, r] = b(!S(v().size)), o = d(null);
+  return p(() => {
+    const n = A(() => {
+      const s = v();
+      r(!S(s.size));
+    }, 200);
+    return window.addEventListener("resize", n), () => {
+      window.removeEventListener("resize", n);
+    };
+  }, []), h(o, { enabled: !0, event: "click", listener: F }), /* @__PURE__ */ a(M, { ref: o, ...e, isMobile: t });
+}, R = ({ sdk: e }) => {
+  const t = d(null), r = c(e.status), o = c(e.sdkStore.slStreamId), n = d(null), [s] = D(t), [i, l] = x(t, s), m = r === "ready" && !!o.data;
+  return p(() => {
     window.requestAnimationFrame(() => {
       e.initializeApp().then(() => {
-        e.openFeature(k.GAMES);
+        e.openFeature(I.GAMES);
       });
     });
-  }, [e]), p(r, { enabled: !0, event: "click", listener: I }), p(m, {
-    enabled: !0,
-    event: "scrollend",
-    listener: M,
-    useDomNode: !0
-  }), p(m, {
-    enabled: !0,
-    event: "click",
-    listener: P,
-    useDomNode: !0
-  });
-  const h = g(() => ({ sdk: e }), [e]);
-  return S(() => {
+  }, [e]), h(t, { enabled: !0, event: "click", listener: F }), p(() => {
     import("./Features/Gamification/gamification-feature.js");
-  }, []), /* @__PURE__ */ u(j.Provider, { value: h, children: [
-    l && b && /* @__PURE__ */ t(
-      q,
+  }, []), /* @__PURE__ */ f(L, { ref: t, children: [
+    /* @__PURE__ */ a(C, { className: w(u, "sl-hide-on-modal"), ref: n }),
+    /* @__PURE__ */ f(N, { "data-nav": !0, className: "sl-hide-on-modal", ref: i, children: [
+      m && /* @__PURE__ */ a(
+        P,
+        {
+          sdk: e,
+          scrollNode: i,
+          headerNode: n,
+          appNode: t,
+          scrollStore: l,
+          responsiveStore: s
+        }
+      ),
+      m && /* @__PURE__ */ a(B, { className: u, sdk: e }),
+      m && /* @__PURE__ */ a(K, { appNode: t, className: u, sdk: e })
+    ] })
+  ] });
+}, re = ({ sdk: e, betPack: t }) => {
+  const [r, o] = b(t), s = !!c(e.userId()), i = E(() => ({ sdk: e }), [e]);
+  return /* @__PURE__ */ f(g.Provider, { value: i, children: [
+    r && s && /* @__PURE__ */ a(
+      O,
       {
         sdk: e,
-        onEvent: ({ type: L }) => L === "slOpenGameCenter" ? n(!1) : () => {
+        onEvent: ({ type: l }) => l === "slOpenGameCenter" ? o(!1) : () => {
         },
-        close: () => n(!1),
-        responsiveStore: s
+        close: () => o(!1)
       }
     ),
-    !l && /* @__PURE__ */ u(y, { ref: r, children: [
-      /* @__PURE__ */ t(O, { className: x(f, "sl-hide-on-modal"), ref: a }),
-      /* @__PURE__ */ u(A, { "data-nav": !0, className: "sl-hide-on-modal", ref: m, children: [
-        c && /* @__PURE__ */ t(
-          R,
-          {
-            sdk: e,
-            scrollNode: m,
-            headerNode: a,
-            appNode: r,
-            scrollStore: v,
-            responsiveStore: s
-          }
-        ),
-        c && /* @__PURE__ */ t(T, { className: f, sdk: e }),
-        c && /* @__PURE__ */ t(
-          V,
-          {
-            responsiveStore: s,
-            appNode: r,
-            className: f,
-            sdk: e
-          }
-        )
-      ] })
-    ] })
+    !r && /* @__PURE__ */ a(R, { sdk: e })
   ] });
 };
 export {
-  ae as MastersApp,
-  me as StreamLayerMastersThemeProvider
+  re as MastersApp,
+  se as StreamLayerMastersThemeProvider
 };

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

@@ -0,0 +1,3 @@
+export declare const useOrientation: () => {
+    orientation: string;
+};

package/lib/app/masters/useOrientation.js

@@ -0,0 +1,12 @@
+import { useState as i, useEffect as o } from "react";
+const a = () => {
+  const [t, n] = i(""), e = () => {
+    window.screen.orientation.type.includes("landscape") || Math.abs(window.orientation) === 90 ? n("landscape") : n("portrait");
+  };
+  return o(() => (window.screen.orientation.addEventListener("change", e), window.addEventListener("orientationchange", e), e(), () => {
+    window.screen.orientation.removeEventListener("change", e), window.removeEventListener("orientationchange", e);
+  }), []), { orientation: t };
+};
+export {
+  a as useOrientation
+};

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

@@ -10,6 +10,8 @@ type ResponsiveData = {
     sdkInView: boolean;
     sdkInDesktopView: boolean;
 };
+export declare const getScreenSize: () => ResponsiveData["screen"];
+export declare const checkSdkInDesktopView: (screenSize: number) => boolean;
 export type ResponsiveStore = MapStore<ResponsiveData>;
 export declare const useSdkResponsive: (appNode: AppNodeRef) => [ResponsiveStore];
 export {};

package/lib/app/masters/useSdkResponsive.js

@@ -1,7 +1,7 @@
 import c from "lodash.throttle";
 import { useState as m, useEffect as u } from "react";
 import { BREAKPOINTS as r } from "../../ui/theme/constants.js";
-import { m as l } from "../../index-BEm7B1u1.js";
+import { m as l } from "../../index-CLJzLXks.js";
 const d = Object.keys(r), i = () => {
   const n = window.innerWidth;
   let e = "sm";
@@ -41,5 +41,7 @@ const d = Object.keys(r), i = () => {
   }, [e, n]), [e];
 };
 export {
+  k as checkSdkInDesktopView,
+  i as getScreenSize,
   v as useSdkResponsive
 };

package/lib/app/masters/useSdkScroll.js

@@ -2,7 +2,7 @@ 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-BEm7B1u1.js";
+import { m as v } from "../../index-CLJzLXks.js";
 const C = (o, e, n) => {
   const t = e >= c.lg && e < c.xl ? 75 : 52;
   o.current && window.scrollTo({