@streamlayer/react-ui 1.32.4 → 1.33.2

package/lib/app/masters/masters.js

@@ -1,34 +1,35 @@
 import { jsxs as p, jsx as n } from "react/jsx-runtime";
 import { cx as d } from "@linaria/core";
-import { SDKContainer as A, mobileSdkContainer as h, SDKScrollContainer as x } from "./styles.js";
-import { useSdkScroll as y } from "./useSdkScroll.js";
-import { useSdkFeature as P } from "../useSdkFeature.js";
+import { SDKContainer as x, mobileSdkContainer as y, SDKScrollContainer as A } from "./styles.js";
+import { useSdkScroll as P } from "./useSdkScroll.js";
+import { useSdkFeature as h } from "../useSdkFeature.js";
 import { useAnalyticsListener as F, newTabLinkListener as N } from "../../hooks/analytics.js";
-import { useState as C, useMemo as E, useCallback as L, useRef as S, useEffect as v } from "react";
+import { useState as L, useMemo as M, useCallback as C, useRef as S, useEffect as v } from "react";
 import { useStore as u } from "@streamlayer/react-polyfills";
 import { FeatureType as b } from "@streamlayer/sdk-web-types";
 import { resetCss as f } from "../../ui/theme/theme.js";
-import { BetPackOverlay as M } from "./BetPack/index.js";
+import { BetPackOverlay as E } from "./BetPack/index.js";
 import { ActiveFeature as B, StandaloneFeature as D } from "./Features/index.js";
 import { SDKHeader as I } from "./Header/index.js";
 import { SDKNotifications as K } from "./Notifications/index.js";
 import { MastersContext as g } from "./useMastersContext.js";
 import { useSdkResponsive as w } from "./useSdkResponsive.js";
 import { StreamLayerMastersThemeProvider as ne } from "../../ui/theme/masters.js";
-const G = ({ sdk: e, className: t }) => {
-  const [, r] = P(e);
-  return /* @__PURE__ */ n(B, { className: t, feature: r, sdk: e });
-}, O = ({ sdk: e, className: t, appNode: r, responsiveStore: l, useContainer: m }) => {
-  const c = u(e.featuresList.getStore());
-  return c ? Array.from(c, (a) => {
+import { MastersStreamLayerProvider as se } from "./provider.js";
+const G = ({ sdk: e, className: r }) => {
+  const [, t] = h(e);
+  return /* @__PURE__ */ n(B, { className: r, feature: t, sdk: e });
+}, O = ({ sdk: e, className: r, appNode: t, responsiveStore: l, useContainer: c }) => {
+  const m = u(e.featuresList.getStore());
+  return m ? Array.from(m, (a) => {
     const s = e.getFeature(a);
     return s ? /* @__PURE__ */ n(
       D,
       {
-        useContainer: m,
+        useContainer: c,
         responsiveStore: l,
-        className: t,
-        appNode: r,
+        className: r,
+        appNode: t,
         feature: s,
         sdk: e
       },
@@ -36,31 +37,31 @@ const G = ({ sdk: e, className: t }) => {
     ) : null;
   }) : null;
 }, R = (e) => {
-  const t = S(null);
-  return F(t, { enabled: !0, event: "click", listener: N }), /* @__PURE__ */ n(M, { ref: t, ...e });
-}, j = ({ sdk: e, useContainer: t }) => {
-  const r = S(null), l = u(e.status), m = u(e.sdkStore.slStreamId), c = S(null), [a] = w(r), [s, i] = y(r, a, t), o = l === "ready" && !!m.data;
+  const r = S(null);
+  return F(r, { enabled: !0, event: "click", listener: N }), /* @__PURE__ */ n(E, { ref: r, ...e });
+}, j = ({ sdk: e, useContainer: r }) => {
+  const t = S(null), l = u(e.status), c = u(e.sdkStore.slStreamId), m = S(null), [a] = w(t), [s, i] = P(t, a, r), o = l === "ready" && !!c.data;
   return v(() => {
     window.requestAnimationFrame(() => {
       e.initializeApp().then(() => {
         e.openFeature(b.GAMES);
       });
     });
-  }, [e]), F(r, { enabled: !0, event: "click", listener: N }), v(() => {
+  }, [e]), F(t, { enabled: !0, event: "click", listener: N }), v(() => {
     import("./Features/Gamification/gamification-feature.js");
-  }, []), /* @__PURE__ */ p(A, { className: d("SDKContainer", !t && h), ref: r, children: [
-    /* @__PURE__ */ n(I, { className: d(f), ref: c }),
-    /* @__PURE__ */ p(x, { className: "sl-hide-on-modal", ref: s, children: [
+  }, []), /* @__PURE__ */ p(x, { className: d("SDKContainer", !r && y), ref: t, children: [
+    /* @__PURE__ */ n(I, { className: d(f), ref: m }),
+    /* @__PURE__ */ p(A, { className: "sl-hide-on-modal", ref: s, children: [
       o && /* @__PURE__ */ n(
         K,
         {
           sdk: e,
           scrollNode: s,
-          headerNode: c,
-          appNode: r,
+          headerNode: m,
+          appNode: t,
           scrollStore: i,
           responsiveStore: a,
-          useContainer: t
+          useContainer: r
         }
       ),
       o && /* @__PURE__ */ n(G, { className: f, sdk: e }),
@@ -68,17 +69,17 @@ const G = ({ sdk: e, className: t }) => {
         O,
         {
           responsiveStore: a,
-          appNode: r,
+          appNode: t,
           className: f,
           sdk: e,
-          useContainer: t
+          useContainer: r
         }
       )
     ] })
   ] });
-}, te = ({ sdk: e, betPack: t, useContainer: r }) => {
-  const [l, m] = C(t), a = !!u(e.userId()), s = E(() => ({ sdk: e }), [e]), i = L(() => {
-    m(!1);
+}, re = ({ sdk: e, betPack: r, useContainer: t }) => {
+  const [l, c] = L(r), a = !!u(e.userId()), s = M(() => ({ sdk: e }), [e]), i = C(() => {
+    c(!1);
     const o = e == null ? void 0 : e.getFeature(b.GAMES);
     o == null || o.closeQuestion();
   }, [e]);
@@ -92,10 +93,11 @@ const G = ({ sdk: e, className: t }) => {
         close: () => i()
       }
     ),
-    !l && /* @__PURE__ */ n(j, { sdk: e, useContainer: r })
+    !l && /* @__PURE__ */ n(j, { sdk: e, useContainer: t })
   ] });
 };
 export {
-  te as MastersApp,
+  re as MastersApp,
+  se as MastersStreamLayerProvider,
   ne as StreamLayerMastersThemeProvider
 };

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

@@ -0,0 +1,4 @@
+import { StreamLayerProps } from '../../core/provider';
+export declare const MastersStreamLayerProvider: React.FC<Omit<StreamLayerProps, 'autoEnable' | 'friendsTab' | 'hideFriends'> & {
+    children: React.ReactNode;
+}>;

package/lib/app/masters/provider.js

@@ -0,0 +1,23 @@
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import { d as m, e as u } from "../../hooks-B0Qttldg.js";
+const S = ({ sdkKey: r, plugins: e, children: a, event: t, onDeepLinkHandled: s, videoPlayerController: i, production: d = !0 }) => /* @__PURE__ */ o(
+  m,
+  {
+    sdkKey: r,
+    plugins: e,
+    production: d,
+    autoEnable: !0,
+    onDeepLinkHandled: s,
+    videoPlayerController: i,
+    friendsTab: "disabled",
+    skipOnboarding: !0,
+    hideFriends: !0,
+    children: [
+      /* @__PURE__ */ n(u, { event: t }),
+      a
+    ]
+  }
+);
+export {
+  S as MastersStreamLayerProvider
+};

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

@@ -1,96 +1,95 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { styled as s } from "@linaria/react";
-import { useState as d, useCallback as v, useEffect as b } from "react";
-import { useStreamLayer as h } from "@streamlayer/react";
-import { StreamLayerLogin as g } from "@streamlayer/react/auth";
+import { styled as o } from "@linaria/react";
+import { u as d } from "../../../hooks-B0Qttldg.js";
+import { useState as u, useCallback as v, useEffect as b } from "react";
 import { storage as a } from "@streamlayer/sdk-web-core";
-import { StreamLayerSDKPoints as y } from "../Points/index.js";
-import { StreamLayerMastersThemeProvider as k } from "../../../ui/theme/masters.js";
-const A = /* @__PURE__ */ s("div")({
+import { StreamLayerSDKPoints as g } from "../Points/index.js";
+import { StreamLayerMastersThemeProvider as y } from "../../../ui/theme/masters.js";
+const k = /* @__PURE__ */ o("div")({
   name: "PointsContainer",
   class: "p1ibyybw",
   propsAsIs: !1
-}), M = /* @__PURE__ */ s("div")({
+}), w = /* @__PURE__ */ o("div")({
   name: "Container",
   class: "cwn5esv",
   propsAsIs: !1
-}), H = /* @__PURE__ */ s("div")({
+}), F = /* @__PURE__ */ o("div")({
   name: "HostAppContent",
   class: "h1wlm0i9",
   propsAsIs: !1
-}), U = /* @__PURE__ */ s("div")({
+}), M = /* @__PURE__ */ o("div")({
   name: "AppContainer",
   class: "al0jzb8",
   propsAsIs: !1
-}), D = /* @__PURE__ */ s("div")({
+}), H = /* @__PURE__ */ o("div")({
   name: "MobileHeader",
   class: "m1pnv6pj",
   propsAsIs: !1
-}), E = /* @__PURE__ */ s("div")({
+}), U = /* @__PURE__ */ o("div")({
   name: "Body",
   class: "b1brtptg",
   propsAsIs: !1
-}), C = /* @__PURE__ */ s("div")({
+}), A = /* @__PURE__ */ o("div")({
   name: "VideoFrame",
   class: "v19mta0g",
   propsAsIs: !1
-}), T = /* @__PURE__ */ s("video")({
+}), C = /* @__PURE__ */ o("video")({
   name: "VideoPlayer",
   class: "v17i6v46",
   propsAsIs: !1
-}), I = /* @__PURE__ */ s("div")({
+}), T = /* @__PURE__ */ o("div")({
   name: "LoginContainer",
   class: "lf71eub",
   propsAsIs: !1
-}), z = /* @__PURE__ */ s("button")({
+}), D = /* @__PURE__ */ o("button")({
   name: "BackToTop",
   class: "b1xvh1fy",
   propsAsIs: !1
-}), K = /* @__PURE__ */ s("a")({
+}), E = /* @__PURE__ */ o("a")({
   name: "BackToTopLink",
   class: "b1jcte5i",
   propsAsIs: !1
-}), N = () => {
-  const o = h(), [r, i] = d(!1), t = v(({
-    muted: c
+}), z = () => {
+  const s = d(), [r, i] = u(!1), t = v(({
+    muted: l
   }) => {
-    i(c);
+    i(l ?? !1);
   }, []);
-  return b(() => (o == null || o.addVideoPlayerController(t), () => {
-    o == null || o.removeVideoPlayerController(t);
-  }), [o, t]), /* @__PURE__ */ n(C, {
-    children: [o && /* @__PURE__ */ e(k, {
-      children: /* @__PURE__ */ e(A, {
-        children: /* @__PURE__ */ e(y, {
-          sdk: o
+  return b(() => (s == null || s.addVideoPlayerController(t), () => {
+    s == null || s.removeVideoPlayerController(t);
+  }), [s, t]), /* @__PURE__ */ n(A, {
+    children: [s && /* @__PURE__ */ e(y, {
+      children: /* @__PURE__ */ e(k, {
+        children: /* @__PURE__ */ e(g, {
+          sdk: s
         })
       })
-    }), /* @__PURE__ */ e(I, {
-      children: /* @__PURE__ */ e(L, {
+    }), /* @__PURE__ */ e(T, {
+      children: /* @__PURE__ */ e(I, {
         hideUser: !0
       })
-    }), /* @__PURE__ */ e(T, {
+    }), /* @__PURE__ */ e(C, {
       src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
       muted: r,
       controls: !0
     })]
   });
-}, L = ({
-  hideUser: o
+}, I = ({
+  hideUser: s
 }) => {
-  var l;
-  const [r, i] = d({
+  var c;
+  const [r, i] = u({
     token: a.getExternalToken(),
     schema: a.getSchema()
-  }), t = h();
+  }), t = d();
   return /* @__PURE__ */ n("div", {
     children: [/* @__PURE__ */ n("form", {
       className: "auth-form",
       onSubmit: (m) => {
         m.preventDefault();
-        const p = new FormData(m.currentTarget), u = p.get("token"), f = p.get("schema");
+        const p = new FormData(m.currentTarget), h = p.get("token"), f = p.get("schema");
         i({
-          token: u,
+          token: h,
           schema: f
         });
       },
@@ -102,7 +101,7 @@ const A = /* @__PURE__ */ s("div")({
           type: "text",
           id: "token",
           name: "token",
-          placeholder: "..." + ((l = a.getExternalToken()) == null ? void 0 : l.slice(-8))
+          placeholder: "..." + ((c = a.getExternalToken()) == null ? void 0 : c.slice(-8))
         })]
       }), /* @__PURE__ */ n("div", {
         children: [/* @__PURE__ */ e("label", {
@@ -120,13 +119,10 @@ const A = /* @__PURE__ */ s("div")({
           children: "submit"
         })
       })]
-    }), /* @__PURE__ */ e(g, {
-      token: r.token,
-      schema: r.schema
     }), /* @__PURE__ */ e("button", {
       onClick: () => t == null ? void 0 : t.logout(),
       children: "logout"
-    }), !o && /* @__PURE__ */ n("div", {
+    }), !s && /* @__PURE__ */ n("div", {
       children: [/* @__PURE__ */ e("div", {
         children: "user"
       }), /* @__PURE__ */ e("textarea", {
@@ -139,13 +135,13 @@ const A = /* @__PURE__ */ s("div")({
   });
 };
 export {
-  U as AppContainer,
-  z as BackToTop,
-  K as BackToTopLink,
-  E as Body,
-  M as Container,
-  H as HostAppContent,
-  L as MastersLogin,
-  D as MobileHeader,
-  N as Video
+  M as AppContainer,
+  D as BackToTop,
+  E as BackToTopLink,
+  U as Body,
+  w as Container,
+  F as HostAppContent,
+  I as MastersLogin,
+  H as MobileHeader,
+  z as Video
 };

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

@@ -1,23 +1,24 @@
 import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { useState as l, Fragment as c } from "react";
-import { MastersStreamLayerProvider as s, useStreamLayer as a } from "@streamlayer/react/masters";
-import { MastersApp as p } from "../masters.js";
+import { u as l } from "../../../hooks-B0Qttldg.js";
+import { useState as s, Fragment as a } from "react";
+import { MastersApp as c } from "../masters.js";
+import { MastersStreamLayerProvider as p } from "../provider.js";
 import { StreamLayerMastersThemeProvider as m } from "../../../ui/theme/masters.js";
 import { useStreamLayerDebug as h } from "../../../utils/debug/index.js";
-import { MobileHeader as u, Body as y, Container as k, AppContainer as T, HostAppContent as f, BackToTop as v, BackToTopLink as C } from "./components.js";
+import { MobileHeader as u, Body as y, Container as k, AppContainer as f, HostAppContent as T, BackToTop as v, BackToTopLink as C } from "./components.js";
 const L = ({ betPack: o }) => {
-  const r = a();
-  return r ? /* @__PURE__ */ e(m, { style: { height: "100%" }, children: /* @__PURE__ */ e(p, { sdk: r, betPack: o, useContainer: !0 }) }) : null;
+  const r = l();
+  return r ? /* @__PURE__ */ e(m, { style: { height: "100%" }, children: /* @__PURE__ */ e(c, { sdk: r, betPack: o, useContainer: !0 }) }) : null;
 }, S = () => {
   console.log("deep link handled cb");
 }, g = () => {
   console.log("video player handled cb");
-}, H = ({ betPack: o }) => {
-  const r = h(), [n, t] = l(0), i = () => {
-    t(n + 1);
+}, K = ({ betPack: o }) => {
+  const r = h(), [t, n] = s(0), i = () => {
+    n(t + 1);
   };
-  return /* @__PURE__ */ e(c, { children: /* @__PURE__ */ d(
-    s,
+  return /* @__PURE__ */ e(a, { children: /* @__PURE__ */ d(
+    p,
     {
       sdkKey: r.sdkKey,
       production: r.env === "production",
@@ -26,14 +27,14 @@ const L = ({ betPack: o }) => {
       event: r.event,
       children: [
         /* @__PURE__ */ e(u, { onClick: () => i(), children: "header" }),
-        /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(T, { className: "StreamLayerSDK", children: /* @__PURE__ */ e(L, { betPack: o }) }) }) }) }),
-        /* @__PURE__ */ e(f, { style: { height: 3e3 }, children: "...host app content..." }),
+        /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(f, { className: "StreamLayerSDK", children: /* @__PURE__ */ e(L, { betPack: o }) }) }) }) }),
+        /* @__PURE__ */ e(T, { style: { height: 3e3 }, children: "...host app content..." }),
         /* @__PURE__ */ e(v, { onClick: () => document.documentElement.scrollTop = 0, children: "BackToTop" }),
         /* @__PURE__ */ e(C, { href: "#", children: "BackToTop Link" })
       ]
     }
-  ) }, n);
+  ) }, t);
 };
 export {
-  H as MastersStory
+  K as MastersStory
 };

package/lib/app/tgl/index.d.ts

@@ -8,4 +8,5 @@ export declare const TGLStory: React.FC<{
     persistent?: boolean;
     sidebar: 'left' | 'right';
     banner: 'top' | 'bottom';
+    layoutMode?: 'cover' | 'side-by-side';
 }>;

package/lib/app/tgl/index.js

@@ -1,49 +1,48 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { styled as o } from "@linaria/react";
-import { StreamLayerProvider as l } from "@streamlayer/react";
+import { d as l } from "../../hooks-B0Qttldg.js";
 import { useStreamLayerDebug as u } from "../../utils/debug/index.js";
-import { Video as v } from "./video.js";
-const f = /* @__PURE__ */ o("div")({
+import { Video as f } from "./video.js";
+const b = /* @__PURE__ */ o("div")({
   name: "Body",
   class: "b1ssmzei",
   propsAsIs: !1
-}), b = /* @__PURE__ */ o("div")({
+}), v = /* @__PURE__ */ o("div")({
   name: "Main",
   class: "me6bye3",
   propsAsIs: !1
 }), k = ({
   isMobileScreen: s,
   persistent: t,
-  insightId: n,
-  promotionId: i,
-  sdkKey: d,
+  insightId: i,
+  promotionId: d,
+  sdkKey: n,
   eventId: m,
   sidebar: a,
   production: p,
   banner: c,
   layoutMode: y = "side-by-side"
 }) => {
-  const e = u({
-    sdkKey: d,
+  const r = u({
+    sdkKey: n,
     eventId: m,
     production: p
   });
-  return /* @__PURE__ */ r(b, {
-    children: /* @__PURE__ */ r(l, {
-      sdkKey: e.sdkKey,
-      event: e.event,
-      production: e.env === "production",
+  return /* @__PURE__ */ e(v, {
+    children: /* @__PURE__ */ e(l, {
+      sdkKey: r.sdkKey,
+      event: r.event,
+      production: r.env === "production",
       autoEnable: !0,
-      children: /* @__PURE__ */ r(f, {
-        children: /* @__PURE__ */ r(v, {
-          event: e.event,
+      children: /* @__PURE__ */ e(b, {
+        children: /* @__PURE__ */ e(f, {
           banner: c,
           sidebar: a,
           layoutMode: y,
-          promotionId: i,
+          promotionId: d,
           isMobileScreen: s,
           persistent: t,
-          insightId: n
+          insightId: i
         })
       })
     })

package/lib/app/tgl/video.d.ts

@@ -4,7 +4,6 @@ export declare const Video: React.FC<{
     layoutMode: 'cover' | 'side-by-side';
     isMobileScreen?: boolean;
     persistent?: boolean;
-    event?: string;
     promotionId?: string;
     insightId?: string;
 }>;

package/lib/app/tgl/video.js

@@ -1,58 +1,58 @@
-import { jsxs as o, Fragment as P, jsx as r } from "react/jsx-runtime";
-import { useRef as V, useState as T, useCallback as w, useEffect as x } from "react";
-import { useStreamLayer as A } from "@streamlayer/react";
+import { jsxs as t, Fragment as T, jsx as r } from "react/jsx-runtime";
+import { u as w } from "../../hooks-B0Qttldg.js";
+import { useRef as x, useState as A, useCallback as S, useEffect as F } from "react";
 import { StreamLayerSDKAdvertisement as s } from "../app/Advertisement/index.js";
-import { StreamLayerSDKInsight as g } from "../app/Insight/index.js";
-import { StreamLayerThemeProvider as h } from "../../ui/theme/index.js";
-import { PromoButton as S, VideoFrame as F, AdvSidebar as L, customTheme as u, VideoPlayerWrap as k, AdvBanner as R, AdvContent as b } from "./styles.js";
-const O = ({ isMobileScreen: m, sidebar: l, banner: p, event: n, persistent: t, insightId: f, promotionId: c, layoutMode: a }) => {
-  const e = A(), v = V(null), [y, C] = T(!0), d = w(({ muted: i }) => {
-    C(i);
+import { StreamLayerSDKInsight as C } from "../app/Insight/index.js";
+import { StreamLayerThemeProvider as d } from "../../ui/theme/index.js";
+import { PromoButton as L, VideoFrame as k, AdvSidebar as R, customTheme as h, VideoPlayerWrap as b, AdvBanner as j, AdvContent as B } from "./styles.js";
+const z = ({ isMobileScreen: l, sidebar: n, banner: u, persistent: o, insightId: p, promotionId: m, layoutMode: a }) => {
+  const e = w(), f = x(null), [P, V] = A(!0), c = S(({ muted: i }) => {
+    V(i ?? !1);
   }, []);
-  return x(() => (e == null || e.addVideoPlayerController(d), () => {
-    e == null || e.removeVideoPlayerController(d);
-  }), [e, d]), /* @__PURE__ */ o(P, { children: [
-    c && /* @__PURE__ */ o(S, { onClick: () => {
+  return F(() => (e == null || e.addVideoPlayerController(c), () => {
+    e == null || e.removeVideoPlayerController(c);
+  }), [e, c]), /* @__PURE__ */ t(T, { children: [
+    m && /* @__PURE__ */ t(L, { onClick: () => {
       var i;
-      (i = v.current) == null || i.scrollIntoView({ behavior: "smooth" }), setTimeout(() => {
-        e == null || e.getFeature(12).background.advertisement.show(c);
+      (i = f.current) == null || i.scrollIntoView({ behavior: "smooth" }), setTimeout(() => {
+        var v, g, y;
+        m && ((y = (g = (v = e == null ? void 0 : e.getFeature(12)) == null ? void 0 : v.background) == null ? void 0 : g.advertisement) == null || y.show(m));
       }, 200);
     }, children: [
       "open promotion: ",
-      c
+      m
     ] }),
-    /* @__PURE__ */ o(F, { ref: v, "data-testid": "video-frame", children: [
+    /* @__PURE__ */ t(k, { ref: f, "data-testid": "video-frame", children: [
       /* @__PURE__ */ r(
-        L,
+        R,
         {
           style: {
             ...a === "cover" ? { position: "absolute" } : {},
-            ...l === "left" ? { left: 0 } : { right: 0, order: 3 },
-            ...m ? { maxWidth: "calc(300px + env(safe-area-inset-left))" } : {}
+            ...n === "left" ? { left: 0 } : { right: 0, order: 3 },
+            ...l ? { maxWidth: "calc(300px + env(safe-area-inset-left))" } : {}
           },
-          children: e && /* @__PURE__ */ o(h, { customTheme: u, children: [
+          children: e && /* @__PURE__ */ t(d, { customTheme: h, children: [
             /* @__PURE__ */ r(
               s,
               {
-                isMobileScreen: m,
-                event: n,
+                isMobileScreen: l,
                 sdk: e,
-                sidebar: l,
+                sidebar: n,
                 layoutMode: a,
-                persistent: t,
+                persistent: o,
                 skipTypeCheck: !0
               }
             ),
-            /* @__PURE__ */ r(g, { insightId: f, sdk: e, persistent: t })
+            /* @__PURE__ */ r(C, { insightId: p, sdk: e, persistent: o })
           ] })
         }
       ),
-      /* @__PURE__ */ o(k, { children: [
+      /* @__PURE__ */ t(b, { 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: y,
+            muted: P,
             width: "100%",
             height: "100%",
             autoplay: "autoplay",
@@ -62,44 +62,42 @@ const O = ({ isMobileScreen: m, sidebar: l, banner: p, event: n, persistent: t,
           }
         ) }),
         /* @__PURE__ */ r(
-          R,
+          j,
           {
             style: {
               ...a === "cover" ? { position: "absolute" } : {},
-              ...p === "top" ? { top: 0, order: -1 } : { bottom: 0 }
+              ...u === "top" ? { top: 0, order: -1 } : { bottom: 0 }
             },
-            children: e && /* @__PURE__ */ r(h, { customTheme: u, children: /* @__PURE__ */ r(
+            children: e && /* @__PURE__ */ r(d, { customTheme: h, children: /* @__PURE__ */ r(
               s,
               {
-                isMobileScreen: m,
-                event: n,
+                isMobileScreen: l,
                 sdk: e,
-                banner: p,
+                banner: u,
                 layoutMode: a,
-                persistent: t
+                persistent: o
               }
             ) })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ r(b, { children: e && /* @__PURE__ */ o(h, { customTheme: u, children: [
+    /* @__PURE__ */ r(B, { children: e && /* @__PURE__ */ t(d, { customTheme: h, children: [
       /* @__PURE__ */ r(
         s,
         {
-          isMobileScreen: m,
-          event: n,
+          isMobileScreen: l,
           sdk: e,
-          sidebar: l,
+          sidebar: n,
           layoutMode: a,
-          persistent: t,
+          persistent: o,
           skipTypeCheck: !0
         }
       ),
-      /* @__PURE__ */ r(g, { insightId: f, sdk: e, persistent: t })
+      /* @__PURE__ */ r(C, { insightId: p, sdk: e, persistent: o })
     ] }) })
   ] });
 };
 export {
-  O as Video
+  z as Video
 };