@streamlayer/react-ui 1.18.1 → 1.19.1

package/lib/app/masters/masters.js

@@ -1,124 +1,107 @@
-import { jsxs as d, jsx as n } from "react/jsx-runtime";
-import { SDKContainer as b, SDKScrollContainer as g } from "./styles.js";
+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 L } from "../useSdkFeature.js";
-import { useAnalyticsListener as m, newTabLinkListener as x, appScrollListener as A, appClickListener as I } from "../../hooks/analytics.js";
-import { useRef as f, useState as D, useEffect as S, useMemo as M } from "react";
-import { useStore as l } from "@streamlayer/react-polyfills";
-import { FeatureType as P } from "@streamlayer/sdk-web-types";
-import { resetCss as v } from "../../ui/theme/theme.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 E, StandaloneFeature as k } from "./Features/index.js";
-import { SDKNotifications as j } from "./Notifications/index.js";
-import { MastersContext as B } from "./useMastersContext.js";
-import { useSdkResponsive as K } from "./useSdkResponsive.js";
-import { StreamLayerMastersThemeProvider as ne } from "../../ui/theme/masters.js";
-const O = ({ sdk: e, className: t, scrollStore: s, appNode: a, scrollNode: i, responsiveStore: r }) => {
-  const [, o] = L(e);
-  return /* @__PURE__ */ n(
-    E,
-    {
-      className: t,
-      scrollNode: i,
-      appNode: a,
-      scrollStore: s,
-      feature: o,
-      responsiveStore: r,
-      sdk: e
-    }
-  );
-}, R = ({ sdk: e, className: t, appNode: s, responsiveStore: a }) => {
-  const i = l(e.featuresList.getStore());
-  return i ? Array.from(i, (r) => {
-    const o = e.getFeature(r);
-    return o ? /* @__PURE__ */ n(
-      k,
+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: t,
-        appNode: s,
-        feature: o,
-        responsiveStore: a,
+        className: o,
+        appNode: r,
+        feature: s,
+        responsiveStore: l,
         sdk: e
       },
-      r
+      a
     ) : null;
   }) : null;
-}, G = ({
+}, q = ({
   responsiveStore: e,
-  ...t
+  ...o
 }) => {
-  const { sdkInDesktopView: s } = l(e);
-  return /* @__PURE__ */ n(w, { ...t, isMobile: !s });
-}, te = ({ sdk: e }) => {
-  const t = f(null), [s, a] = D(!0), i = f(null), [r] = K(t), [o, p] = C(t, r), h = l(e.status), y = l(e.sdkStore.slStreamId), u = !!l(e.userId()), c = h === "ready" && !!y.data;
+  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(() => {
     window.requestAnimationFrame(() => {
       e.initializeApp().then(() => {
-        e.openFeature(P.GAMES);
+        e.openFeature(k.GAMES);
       });
     });
-  }, [e]), m(t, { enabled: !0, event: "click", listener: x }), m(o, {
+  }, [e]), p(r, { enabled: !0, event: "click", listener: I }), p(m, {
     enabled: !0,
     event: "scrollend",
-    listener: A,
+    listener: M,
     useDomNode: !0
-  }), m(o, {
+  }), p(m, {
     enabled: !0,
     event: "click",
-    listener: I,
+    listener: P,
     useDomNode: !0
   });
-  const F = M(() => ({ sdk: e }), [e]);
+  const h = g(() => ({ sdk: e }), [e]);
   return S(() => {
     import("./Features/Gamification/gamification-feature.js");
-  }, []), /* @__PURE__ */ d(B.Provider, { value: F, children: [
-    s && u && /* @__PURE__ */ n(
-      G,
+  }, []), /* @__PURE__ */ u(j.Provider, { value: h, children: [
+    l && b && /* @__PURE__ */ t(
+      q,
       {
         sdk: e,
-        onEvent: ({ type: N }) => N === "slOpenGameCenter" ? a(!1) : () => {
+        onEvent: ({ type: L }) => L === "slOpenGameCenter" ? n(!1) : () => {
         },
-        close: () => a(!1),
-        responsiveStore: r
+        close: () => n(!1),
+        responsiveStore: s
       }
     ),
-    !s && u && /* @__PURE__ */ n(b, { ref: t, children: /* @__PURE__ */ d(g, { className: "sl-hide-on-modal", ref: o, children: [
-      c && /* @__PURE__ */ n(
-        j,
-        {
-          sdk: e,
-          scrollNode: o,
-          headerNode: i,
-          appNode: t,
-          scrollStore: p,
-          responsiveStore: r
-        }
-      ),
-      c && /* @__PURE__ */ n(
-        O,
-        {
-          scrollStore: p,
-          responsiveStore: r,
-          scrollNode: o,
-          appNode: t,
-          className: v,
-          sdk: e
-        }
-      ),
-      c && /* @__PURE__ */ n(
-        R,
-        {
-          responsiveStore: r,
-          appNode: t,
-          className: v,
-          sdk: e
-        }
-      )
-    ] }) }),
-    !u && /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "You are not logged in." })
+    !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
+          }
+        )
+      ] })
+    ] })
   ] });
 };
 export {
-  te as MastersApp,
-  ne as StreamLayerMastersThemeProvider
+  ae as MastersApp,
+  me as StreamLayerMastersThemeProvider
 };

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

@@ -1,3 +1,4 @@
 export declare const MastersStory: React.FC<{
     settings?: boolean;
+    betPack?: boolean;
 }>;

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

@@ -1,53 +1,52 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { StreamLayerProvider as t, StreamLayerSDKEvent as l, useStreamLayer as c } from "@streamlayer/react";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { MastersStreamLayerProvider as d, useStreamLayer as c } from "@streamlayer/react/masters";
 import { MastersApp as s } from "../masters.js";
 import { StreamLayerMastersThemeProvider as p } from "../../../ui/theme/masters.js";
 import { useStreamLayerDebug as m, StreamLayerDebug as h } from "../../../utils/debug/index.js";
-import { MastersLogin as u, MobileHeader as y, HostAppContent as d, Body as k, Video as v, Container as L, AppContainer as f, BackToTop as S, BackToTopLink as T } from "./components.js";
-const C = () => {
+import { MastersLogin as u, MobileHeader as y, HostAppContent as i, Body as k, Video as v, Container as L, AppContainer as T, BackToTop as f, BackToTopLink as C } from "./components.js";
+const S = ({ betPack: n }) => {
   const o = c();
-  return o ? /* @__PURE__ */ e(p, { style: { height: "100%" }, children: /* @__PURE__ */ e(s, { sdk: o }) }) : null;
+  return o ? /* @__PURE__ */ e(p, { style: { height: "100%" }, children: /* @__PURE__ */ e(s, { sdk: o, betPack: n }) }) : null;
 }, a = () => {
   console.log("deep link handled cb");
-}, i = () => {
+}, l = () => {
   console.log("video player handled cb");
-}, D = ({ settings: o }) => {
+}, K = ({ settings: n, betPack: o }) => {
   const r = m();
-  return o ? /* @__PURE__ */ n(
-    t,
+  return n ? /* @__PURE__ */ t(
+    d,
     {
       sdkKey: r.sdkKey,
       production: r.env === "production",
       onDeepLinkHandled: a,
-      videoPlayerController: i,
+      videoPlayerController: l,
       children: [
         /* @__PURE__ */ e(u, {}),
         /* @__PURE__ */ e(h, { ...r, standalone: !0, hideAuth: !0 })
       ]
     }
-  ) : /* @__PURE__ */ n(
-    t,
+  ) : /* @__PURE__ */ t(
+    d,
     {
       sdkKey: r.sdkKey,
       production: r.env === "production",
-      autoEnable: !1,
       onDeepLinkHandled: a,
-      videoPlayerController: i,
+      videoPlayerController: l,
+      event: r.event,
       children: [
-        /* @__PURE__ */ e(l, { event: r.event }),
         /* @__PURE__ */ e(y, { children: "header" }),
-        /* @__PURE__ */ e(d, { children: "...host app content..." }),
-        /* @__PURE__ */ n(k, { children: [
+        /* @__PURE__ */ e(i, { children: "...host app content..." }),
+        /* @__PURE__ */ t(k, { children: [
           /* @__PURE__ */ e(v, {}),
-          /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(f, { className: "StreamLayerSDK", children: /* @__PURE__ */ e(C, {}) }) })
+          /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(T, { className: "StreamLayerSDK", children: /* @__PURE__ */ e(S, { betPack: o }) }) })
         ] }),
-        /* @__PURE__ */ e(d, { children: "...host app content..." }),
-        /* @__PURE__ */ e(S, { onClick: () => document.documentElement.scrollTop = 0, children: "BackToTop" }),
-        /* @__PURE__ */ e(T, { href: "#", children: "BackToTop Link" })
+        /* @__PURE__ */ e(i, { children: "...host app content..." }),
+        /* @__PURE__ */ e(f, { onClick: () => document.documentElement.scrollTop = 0, children: "BackToTop" }),
+        /* @__PURE__ */ e(C, { href: "#", children: "BackToTop Link" })
       ]
     }
   );
 };
 export {
-  D as MastersStory
+  K as MastersStory
 };

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

@@ -7,14 +7,4 @@ export declare const SDKWhiteContainer: {
     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/masters/styles.js

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

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-CZvwzN5o.js";
+import { m as l } from "../../index-BEm7B1u1.js";
 const d = Object.keys(r), i = () => {
   const n = window.innerWidth;
   let e = "sm";

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

package/lib/app/useClipboardCopy.js

@@ -1,6 +1,6 @@
 import { jsx as u } from "react/jsx-runtime";
 import { useRef as l, useState as s, useCallback as p, useEffect as f } from "react";
-import { r as m } from "../index-B1QdimmR.js";
+import { r as m } from "../index-DALxy-8N.js";
 import { CopyNotification as b } from "../ui/gamification/copyNotification/index.js";
 const T = (r) => {
   const t = l(), [i, o] = s(null), a = p(

package/lib/app/useSdkResponsive.js

@@ -1,7 +1,7 @@
 import i from "lodash.throttle";
 import { useState as m, useEffect as a } from "react";
 import { BREAKPOINTS as r } from "../ui/theme/constants.js";
-import { m as u } from "../index-CZvwzN5o.js";
+import { m as u } from "../index-BEm7B1u1.js";
 const o = Object.keys(r), c = () => {
   const t = window.innerWidth;
   let e = "sm";

package/lib/app/useSdkScroll.js

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