@streamlayer/react-ui 1.2.2 → 1.3.0

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

@@ -1,113 +1,68 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { styled as d } from "@linaria/react";
-import { useRef as A, useState as L, useEffect as m } from "react";
-import t from "screenfull";
-import { StreamLayerProvider as u, useStreamLayer as C } from "@streamlayer/react";
-import { App as S } from "../index.js";
-import { StreamLayerThemeProvider as E } from "../../../ui/theme/index.js";
-import { useStreamLayerDebug as F, StreamLayerDebug as x } from "../../../utils/debug/index.js";
-import { Content as P } from "./content.js";
-import { AppLogin as K } from "./login.js";
-import { Video as D } from "./video.js";
-const l = () => {
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { styled as t } from "@linaria/react";
+import { useEffect as i } from "react";
+import { StreamLayerProvider as l, useStreamLayer as p } from "@streamlayer/react";
+import { App as c } from "../index.js";
+import { StreamLayerThemeProvider as m } from "../../../ui/theme/index.js";
+import { useStreamLayerDebug as f } from "../../../utils/debug/index.js";
+import { Video as u } from "./video.js";
+const s = () => {
   console.log("deep link handled cb");
-}, p = () => {
+}, y = () => {
   console.log("video player handled cb");
-}, I = ({
-  event: s
+}, v = ({
+  event: o
 }) => {
-  const r = C();
-  return m(() => {
-    r && r.openFeature(12);
-  }, [r]), r ? /* @__PURE__ */ e(E, {
-    children: /* @__PURE__ */ e(S, {
-      sdk: r,
-      event: s,
-      onDeepLinkHandled: l
+  const e = p();
+  return i(() => {
+    e && e.openFeature(12);
+  }, [e]), e ? /* @__PURE__ */ r(m, {
+    children: /* @__PURE__ */ r(c, {
+      sdk: e,
+      event: o,
+      onDeepLinkHandled: s
     })
   }) : null;
-}, j = /* @__PURE__ */ d("div")({
+}, h = /* @__PURE__ */ t("div")({
   name: "Container",
   class: "c1a4qh28",
   propsAsIs: !1
-}), T = /* @__PURE__ */ d("div")({
+}), k = /* @__PURE__ */ t("div")({
   name: "Body",
   class: "b9h8kuk",
   propsAsIs: !1
-}), q = /* @__PURE__ */ d("div")({
+}), A = /* @__PURE__ */ t("div")({
   name: "AppContainer",
   class: "a1wkro2j",
   propsAsIs: !1
-}), Q = ({
-  settings: s,
-  hideSdk: r,
-  hideLogin: f,
-  promotionId: y,
-  hidePoints: v,
-  sidebar: h,
-  banner: b,
-  layoutMode: g
+}), D = ({
+  sdkKey: o,
+  eventId: e,
+  production: a
 }) => {
-  const o = F(), a = A(), [w, c] = L(!1);
-  if (m(() => {
-    const n = () => {
-      window.orientation !== 0 ? (document.body.style.height = window.outerHeight + 50 + "px", document.body.style.overflow = "hidden", c(!0)) : (document.body.style.height = "auto", document.body.style.overflow = "auto", c(!1)), setTimeout(function() {
-        window.scrollTo(0, 0);
-      }, 1e3);
-    };
-    return t.isEnabled || window.addEventListener("orientationchange", n), () => {
-      t.isEnabled || window.removeEventListener("orientationchange", n);
-    };
-  }, []), s)
-    return /* @__PURE__ */ i(u, {
-      sdkKey: o.sdkKey,
-      production: o.env === "production",
-      autoEnable: !1,
-      onDeepLinkHandled: l,
-      videoPlayerController: p,
-      children: [/* @__PURE__ */ e(K, {}), /* @__PURE__ */ e(x, {
-        ...o,
-        standalone: !0,
-        hideAuth: !0
-      })]
-    });
-  const k = () => {
-    const n = a.current;
-    t.isEnabled || alert("Fullscreen is not supported in your browser, rotate your device to landscape mode"), t.isFullscreen ? t.exit() : t.request(n, {
-      navigationUI: "hide"
-    });
-  };
-  return /* @__PURE__ */ i(u, {
-    sdkKey: o.sdkKey,
-    production: o.env === "production",
+  const n = f({
+    sdkKey: o,
+    eventId: e,
+    production: a
+  });
+  return /* @__PURE__ */ r(l, {
+    sdkKey: n.sdkKey,
+    production: n.env === "production",
     autoEnable: !0,
-    onDeepLinkHandled: l,
-    videoPlayerController: p,
-    children: [/* @__PURE__ */ i(T, {
-      ref: a,
-      children: [/* @__PURE__ */ e(D, {
-        event: o.event,
-        hideLogin: f,
-        toggleFullscreen: k,
-        banner: b,
-        sidebar: h,
-        hidePoints: v,
-        layoutMode: g,
-        promotionId: y,
-        fullscreen: w
-      }), !r && /* @__PURE__ */ e(j, {
-        children: /* @__PURE__ */ e(q, {
+    onDeepLinkHandled: s,
+    videoPlayerController: y,
+    children: /* @__PURE__ */ d(k, {
+      children: [/* @__PURE__ */ r(u, {}), /* @__PURE__ */ r(h, {
+        children: /* @__PURE__ */ r(A, {
           className: "StreamLayerSDK",
-          children: /* @__PURE__ */ e(I, {
-            event: o.event
+          children: /* @__PURE__ */ r(v, {
+            event: n.event
           })
         })
       })]
-    }), /* @__PURE__ */ e(P, {
-      event: o.event
-    })]
+    })
   });
 };
 export {
-  Q as AppStory
+  D as AppStory
 };

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

@@ -0,0 +1,8 @@
+export declare const InsightStory: React.FC<{
+    sdkKey?: string;
+    eventId?: string;
+    production?: boolean;
+    onlyInsight?: boolean;
+    hideHeader?: boolean;
+    layoutMode?: 'side-by-side' | 'cover';
+}>;

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

@@ -0,0 +1,57 @@
+import { jsx as e } from "react/jsx-runtime";
+import { styled as d } from "@linaria/react";
+import { StreamLayerProvider as a, useStreamLayer as u } from "@streamlayer/react";
+import { StreamLayerSDKInsight as p } from "../../Insight/index.js";
+import { StreamLayerThemeProvider as c } from "../../../../ui/theme/index.js";
+import { useStreamLayerDebug as y } from "../../../../utils/debug/index.js";
+import { customTheme as f } from "./styles.js";
+import { Video as h } from "./video.js";
+const l = /* @__PURE__ */ d("div")({
+  name: "Body",
+  class: "buit6hv",
+  propsAsIs: !1
+}), v = ({
+  event: o,
+  hideHeader: m
+}) => {
+  const r = u();
+  return r ? /* @__PURE__ */ e(c, {
+    customTheme: f,
+    children: /* @__PURE__ */ e(p, {
+      hideHeader: m,
+      event: o,
+      sdk: r,
+      persistent: !0
+    })
+  }) : null;
+}, B = ({
+  sdkKey: o,
+  eventId: m,
+  layoutMode: r,
+  production: n,
+  onlyInsight: s,
+  hideHeader: i
+}) => {
+  const t = y({
+    sdkKey: o,
+    eventId: m,
+    production: n
+  });
+  return /* @__PURE__ */ e(a, {
+    sdkKey: t.sdkKey,
+    production: t.env === "production",
+    autoEnable: !0,
+    children: s ? /* @__PURE__ */ e(v, {
+      hideHeader: i,
+      event: t.event
+    }) : /* @__PURE__ */ e(l, {
+      children: /* @__PURE__ */ e(h, {
+        layoutMode: r,
+        event: t.event
+      })
+    })
+  });
+};
+export {
+  B as InsightStory
+};

package/lib/app/app/story/insight/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const customTheme: import('@linaria/core').LinariaClassName;
+export declare const VideoPlayerWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const VideoFrame: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const InsightContainerLBar: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const InsightContainerOverlay: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const InsightContainerMobile: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/app/app/story/insight/styles.js

@@ -0,0 +1,30 @@
+import { styled as s } from "@linaria/react";
+const a = "c1bibvvs", n = /* @__PURE__ */ s("div")({
+  name: "VideoPlayerWrap",
+  class: "v1kn8kyk",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("div")({
+  name: "VideoFrame",
+  class: "v1i1m23p",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "InsightContainerLBar",
+  class: "i1gjlsv0",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "InsightContainerOverlay",
+  class: "iz2841u",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "InsightContainerMobile",
+  class: "i16grq96",
+  propsAsIs: !1
+});
+export {
+  o as InsightContainerLBar,
+  t as InsightContainerMobile,
+  r as InsightContainerOverlay,
+  i as VideoFrame,
+  n as VideoPlayerWrap,
+  a as customTheme
+};

package/lib/app/app/story/insight/video.d.ts

@@ -0,0 +1,4 @@
+export declare const Video: React.FC<{
+    event?: string;
+    layoutMode?: 'side-by-side' | 'cover';
+}>;

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

@@ -0,0 +1,30 @@
+import { jsxs as o, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { useRef as h } from "react";
+import { useStreamLayer as l } from "@streamlayer/react";
+import { StreamLayerSDKInsight as i } from "../../Insight/index.js";
+import { StreamLayerThemeProvider as n } from "../../../../ui/theme/index.js";
+import { VideoFrame as c, customTheme as s, VideoPlayerWrap as p, InsightContainerMobile as u, InsightContainerOverlay as g, InsightContainerLBar as f } from "./styles.js";
+const x = ({ event: t, layoutMode: a }) => {
+  const r = l(), m = h(null);
+  return /* @__PURE__ */ o(d, { children: [
+    /* @__PURE__ */ o(c, { ref: m, "data-testid": "video-frame", children: [
+      /* @__PURE__ */ e(a === "cover" ? g : f, { children: r && /* @__PURE__ */ e(n, { customTheme: s, children: /* @__PURE__ */ e(i, { event: t, sdk: r, persistent: !0 }) }) }),
+      /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e("div", { className: "divAnchor", children: /* @__PURE__ */ e(
+        "video",
+        {
+          src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
+          width: "100%",
+          height: "100%",
+          autoplay: "autoplay",
+          loop: !0,
+          playsInline: !0,
+          controls: !0
+        }
+      ) }) })
+    ] }),
+    /* @__PURE__ */ e(u, { children: r && /* @__PURE__ */ e(n, { customTheme: s, children: /* @__PURE__ */ e(i, { event: t, sdk: r, persistent: !0 }) }) })
+  ] });
+};
+export {
+  x as Video
+};

package/lib/app/app/story/promotion/content.d.ts

@@ -0,0 +1,3 @@
+export declare const Content: React.FC<{
+    event?: string;
+}>;

package/lib/app/app/story/{content.js → promotion/content.js}

@@ -1,30 +1,34 @@
 import { jsxs as e, jsx as t } from "react/jsx-runtime";
-import { styled as s } from "@linaria/react";
-import { useStreamLayer as m } from "@streamlayer/react";
-import { StreamLayerSDKAdvertisement as o } from "../Advertisement/index.js";
-import { theme as i } from "../../../ui/theme/theme.js";
-const a = /* @__PURE__ */ s("div")({
+import { styled as r } from "@linaria/react";
+import { useStreamLayer as o } from "@streamlayer/react";
+import { StreamLayerSDKAdvertisement as i } from "../../Advertisement/index.js";
+import { theme as a } from "../../../../ui/theme/theme.js";
+const d = /* @__PURE__ */ r("div")({
   name: "Container",
-  class: "c15py6sl",
+  class: "c1g3vhjc",
   propsAsIs: !1
-}), c = ({
-  event: r
+}), n = /* @__PURE__ */ r("div")({
+  name: "Div",
+  class: "d1626h38",
+  propsAsIs: !1
+}), h = ({
+  event: m
 }) => {
-  const n = m();
-  return n ? /* @__PURE__ */ e(a, {
-    className: i,
+  const s = o();
+  return s ? /* @__PURE__ */ e(d, {
+    className: a,
     "data-testid": "overlay",
-    children: [/* @__PURE__ */ e("div", {
+    children: [/* @__PURE__ */ e(n, {
       children: ["Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ", /* @__PURE__ */ t("br", {}), "-------------"]
-    }), /* @__PURE__ */ t(o, {
-      event: r,
-      sdk: n
-    }), /* @__PURE__ */ e("div", {
+    }), /* @__PURE__ */ t(i, {
+      event: m,
+      sdk: s,
+      persistent: !0
+    }), /* @__PURE__ */ e(n, {
       children: ["-------------", /* @__PURE__ */ t("br", {}), "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."]
     })]
   }) : null;
 };
 export {
-  a as Container,
-  c as Content
+  h as Content
 };

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

@@ -0,0 +1,9 @@
+export declare const PromotionStory: React.FC<{
+    isMobileScreen?: boolean;
+    promotionId?: string;
+    sdkKey?: string;
+    eventId?: string;
+    production?: boolean;
+    sidebar: 'left' | 'right';
+    banner: 'top' | 'bottom';
+}>;

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

@@ -0,0 +1,54 @@
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { styled as r } from "@linaria/react";
+import { StreamLayerProvider as l } from "@streamlayer/react";
+import { useStreamLayerDebug as y } from "../../../../utils/debug/index.js";
+import { Content as u } from "./content.js";
+import { Video as v } from "./video.js";
+const b = /* @__PURE__ */ r("div")({
+  name: "Body",
+  class: "bqh4lcc",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ r("div")({
+  name: "Main",
+  class: "mgga81b",
+  propsAsIs: !1
+}), j = ({
+  isMobileScreen: t,
+  promotionId: s,
+  sdkKey: n,
+  eventId: i,
+  sidebar: d,
+  production: a,
+  banner: m,
+  layoutMode: c = "side-by-side"
+}) => {
+  const o = y({
+    sdkKey: n,
+    eventId: i,
+    production: a
+  });
+  return /* @__PURE__ */ e(f, {
+    children: /* @__PURE__ */ p(l, {
+      sdkKey: o.sdkKey,
+      production: o.env === "production",
+      autoEnable: !0,
+      children: [/* @__PURE__ */ e(b, {
+        children: /* @__PURE__ */ e(v, {
+          event: o.event,
+          banner: m,
+          sidebar: d,
+          layoutMode: c,
+          promotionId: s,
+          isMobileScreen: t
+        })
+      }), /* @__PURE__ */ e("h3", {
+        children: "Overlay View (should appear between two text blocks)"
+      }), /* @__PURE__ */ e(u, {
+        event: o.event
+      })]
+    })
+  });
+};
+export {
+  j as PromotionStory
+};

package/lib/app/app/story/promotion/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const VideoPlayerWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const VideoFrame: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AdvSidebar: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AdvContent: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AdvBanner: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const PromoButton: any;

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

@@ -0,0 +1,35 @@
+import { styled as s } from "@linaria/react";
+import { Button as o } from "../../../../ui/button/index.js";
+const r = /* @__PURE__ */ s("div")({
+  name: "VideoPlayerWrap",
+  class: "v579p4x",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "VideoFrame",
+  class: "v1kdno04",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("div")({
+  name: "AdvSidebar",
+  class: "a5twsnq",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "AdvContent",
+  class: "ak0dmp5",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "AdvBanner",
+  class: "avdjm8e",
+  propsAsIs: !1
+}), a = () => o, c = /* @__PURE__ */ s(a())({
+  name: "PromoButton",
+  class: "p1cdpa00",
+  propsAsIs: !0
+});
+export {
+  m as AdvBanner,
+  p as AdvContent,
+  d as AdvSidebar,
+  c as PromoButton,
+  t as VideoFrame,
+  r as VideoPlayerWrap
+};

package/lib/app/app/story/promotion/video.d.ts

@@ -0,0 +1,8 @@
+export declare const Video: React.FC<{
+    sidebar: 'left' | 'right';
+    banner: 'top' | 'bottom';
+    layoutMode: 'cover' | 'side-by-side';
+    isMobileScreen?: boolean;
+    event?: string;
+    promotionId?: string;
+}>;

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

@@ -0,0 +1,98 @@
+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);
+  }, []);
+  return w(() => (e == null || e.addVideoPlayerController(d), () => {
+    e == null || e.removeVideoPlayerController(d);
+  }), [e, d]), /* @__PURE__ */ n(v, { children: [
+    l && /* @__PURE__ */ n(P, { onClick: () => {
+      var i;
+      (i = p.current) == null || i.scrollIntoView({ behavior: "smooth" }), setTimeout(() => {
+        e == null || e.getFeature(12).background.advertisement.show(l);
+      }, 200);
+    }, children: [
+      "open promotion: ",
+      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__ */ r(
+        C,
+        {
+          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,
+            {
+              isMobileScreen: o,
+              event: a,
+              sdk: e,
+              sidebar: s,
+              layoutMode: t,
+              persistent: !0
+            }
+          ) })
+        }
+      ),
+      /* @__PURE__ */ n(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: u,
+            width: "100%",
+            height: "100%",
+            autoplay: "autoplay",
+            loop: !0,
+            playsInline: !0,
+            controls: !0
+          }
+        ) }),
+        /* @__PURE__ */ r(
+          F,
+          {
+            style: {
+              ...t === "cover" ? { position: "absolute" } : {},
+              ...h === "top" ? { top: 0, order: -1 } : { bottom: 0 }
+            },
+            children: e && /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(
+              m,
+              {
+                isMobileScreen: o,
+                event: a,
+                sdk: e,
+                banner: h,
+                layoutMode: t,
+                persistent: !0
+              }
+            ) })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ r(S, { children: e && /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(
+      m,
+      {
+        isMobileScreen: o,
+        event: a,
+        sdk: e,
+        sidebar: s,
+        layoutMode: t,
+        persistent: !0
+      }
+    ) }) })
+  ] });
+};
+export {
+  D as Video
+};

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

@@ -0,0 +1 @@
+export declare const SettingsStory: React.FC;

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

@@ -0,0 +1,14 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { StreamLayerProvider as o } from "@streamlayer/react";
+import { useStreamLayerDebug as n, StreamLayerDebug as a } from "../../../../utils/debug/index.js";
+import { AppLogin as i } from "./login.js";
+const p = () => {
+  const r = n();
+  return /* @__PURE__ */ t(o, { sdkKey: r.sdkKey, production: r.env === "production", autoEnable: !1, children: [
+    /* @__PURE__ */ e(i, {}),
+    /* @__PURE__ */ e(a, { ...r, standalone: !0, hideAuth: !0 })
+  ] });
+};
+export {
+  p as SettingsStory
+};

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

@@ -1,9 +1,4 @@
 export declare const PointsContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const VideoPlayerWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const VideoFrame: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const LoginContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const FullscreenButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
-export declare const AdvSidebar: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const AdvContent: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const AdvBanner: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const PromoButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const LinkToLogin: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLAnchorElement> & import('react').AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;