@streamlayer/react-ui 1.26.1 → 1.27.0

package/lib/app/app/index.js

@@ -1,112 +1,118 @@
-import { jsx as n, jsxs as u } from "react/jsx-runtime";
-import { cx as h } from "@linaria/core";
-import { SDKContainer as A, SDKScrollContainer as F } from "./styles.js";
-import { useSdkFeature as v } from "../useSdkFeature.js";
-import { useSdkResponsive as x } from "../useSdkResponsive.js";
-import { useSdkScroll as N } from "../useSdkScroll.js";
-import { useAnalyticsListener as g, newTabLinkListener as y } from "../../hooks/analytics.js";
-import { useRef as f, useMemo as C, useEffect as D } from "react";
-import { useStore as K } from "@streamlayer/react-polyfills";
-import { resetCss as m } from "../../ui/theme/theme.js";
-import { ActiveFeature as L, StandaloneFeature as b } from "./Features/index.js";
-import { SDKNavigation as j, SDKHeader as R } from "./Navigation/index.js";
-import { SDKNotifications as w } from "./Notifications/index.js";
-import { useAppApp as E } from "./useApp.js";
-import { AppContext as H } from "./useAppContext.js";
-const I = ({
+import { jsx as n, jsxs as h } from "react/jsx-runtime";
+import { cx as A } from "@linaria/core";
+import { SDKContainer as y, SDKScrollContainer as C } from "./styles.js";
+import { useSdkFeature as D } from "../useSdkFeature.js";
+import { useSdkResponsive as K } from "../useSdkResponsive.js";
+import { useSdkScroll as L } from "../useSdkScroll.js";
+import { useAnalyticsListener as R, newTabLinkListener as b } from "../../hooks/analytics.js";
+import { useState as j, useRef as F, useMemo as w, useEffect as E } from "react";
+import { useStore as v } from "@streamlayer/react-polyfills";
+import { resetCss as u } from "../../ui/theme/theme.js";
+import { ActiveFeature as H, StandaloneFeature as I } from "./Features/index.js";
+import { SDKNavigation as M, SDKHeader as P } from "./Navigation/index.js";
+import { SDKNotifications as V } from "./Notifications/index.js";
+import { useAppApp as Y } from "./useApp.js";
+import { AppContext as q } from "./useAppContext.js";
+const z = ({
   sdk: e,
-  className: t,
-  scrollStore: r,
-  appNode: l,
-  scrollNode: o,
-  responsiveStore: s
+  className: l,
+  scrollStore: o,
+  appNode: a,
+  scrollNode: m,
+  responsiveStore: r
 }) => {
-  const [, i] = v(e);
-  return /* @__PURE__ */ n(L, {
-    className: t,
-    scrollNode: o,
-    appNode: l,
-    scrollStore: r,
-    feature: i,
-    responsiveStore: s,
+  const [, t] = D(e);
+  return /* @__PURE__ */ n(H, {
+    className: l,
+    scrollNode: m,
+    appNode: a,
+    scrollStore: o,
+    feature: t,
+    responsiveStore: r,
     sdk: e
   });
-}, M = ({
+}, B = ({
   sdk: e,
-  className: t,
-  appNode: r,
-  responsiveStore: l
+  muted: l,
+  className: o,
+  appNode: a,
+  responsiveStore: m
 }) => {
-  const o = K(e.featuresList.getStore());
-  return o ? Array.from(o, (s) => {
-    const i = e.getFeature(s);
-    return i ? /* @__PURE__ */ n(b, {
-      className: t,
-      appNode: r,
+  const r = v(e.featuresList.getStore());
+  return r ? Array.from(r, (t) => {
+    const i = e.getFeature(t);
+    return i ? /* @__PURE__ */ n(I, {
+      className: o,
+      muted: l,
+      appNode: a,
       feature: i,
-      responsiveStore: l,
+      responsiveStore: m,
       sdk: e
-    }, s) : null;
+    }, t) : null;
   }) : null;
-}, _ = ({
+}, oe = ({
   sdk: e,
-  topNavigation: t
+  muted: l,
+  topNavigation: o
 }) => {
-  const r = f(null), l = f(null), [o] = x(r), [s, i] = N(r, o), {
-    sdkReady: p,
-    activeFeature: c,
-    isLogged: d
-  } = E(e), a = !!p;
-  g(r, {
-    enabled: a,
+  const [a, m] = j(!0), r = F(null), t = v(e.uiState), i = F(null), [c] = K(r), [p, d] = L(r, c), {
+    sdkReady: x,
+    activeFeature: f,
+    isLogged: N
+  } = Y(e), s = !!x;
+  R(r, {
+    enabled: s,
     event: "click",
-    listener: y
+    listener: b
   });
-  const S = C(() => ({
+  const g = w(() => ({
     sdk: e,
-    topNavigation: t
-  }), [e, t]);
-  return D(() => {
+    topNavigation: o
+  }), [e, o]);
+  return E(() => {
     import("./Features/Gamification/gamification-feature.js");
-  }, []), /* @__PURE__ */ n(H.Provider, {
-    value: S,
-    children: /* @__PURE__ */ u(A, {
-      ref: r,
-      className: t ? "" : "c10llmat",
-      children: [a && t && /* @__PURE__ */ n(j, {
-        className: m,
+  }, []), /* @__PURE__ */ n(q.Provider, {
+    value: g,
+    children: /* @__PURE__ */ h(y, {
+      ref: (S) => {
+        r.current = S, m(!!S);
+      },
+      className: o ? "" : "c10llmat",
+      children: [s && o && t.app && /* @__PURE__ */ n(M, {
+        className: A(u, "sl-hide-on-modal"),
         sdk: e,
-        ref: l
-      }), a && !t && !!c && /* @__PURE__ */ n(R, {
-        className: h(m, "sl-hide-on-modal"),
+        ref: i
+      }), s && !o && !!f && t.app && /* @__PURE__ */ n(P, {
+        className: A(u, "sl-hide-on-modal"),
         sdk: e,
-        ref: l
-      }), /* @__PURE__ */ u(F, {
+        ref: i
+      }), /* @__PURE__ */ h(C, {
         className: "sl-hide-on-modal",
-        ref: s,
-        "data-nav": (!!c && a).toString(),
-        children: [a && /* @__PURE__ */ n(w, {
+        ref: p,
+        "data-nav": (!!f && s).toString(),
+        children: [s && t.app && /* @__PURE__ */ n(V, {
           sdk: e,
-          scrollNode: s,
-          headerNode: l,
+          scrollNode: p,
+          headerNode: i,
           appNode: r,
-          scrollStore: i,
-          responsiveStore: o,
-          hasActiveFeature: !!c
-        }), a && /* @__PURE__ */ n(I, {
-          scrollStore: i,
-          responsiveStore: o,
-          scrollNode: s,
+          scrollStore: d,
+          responsiveStore: c,
+          hasActiveFeature: !!f
+        }), s && t.app && /* @__PURE__ */ n(z, {
+          scrollStore: d,
+          responsiveStore: c,
+          scrollNode: p,
           appNode: r,
-          className: m,
+          className: u,
           sdk: e
-        }), a && /* @__PURE__ */ n(M, {
-          responsiveStore: o,
+        }), s && a && /* @__PURE__ */ n(B, {
+          muted: l,
+          responsiveStore: c,
           appNode: r,
-          className: m,
+          className: u,
           sdk: e
         })]
-      }), a && !d && /* @__PURE__ */ n("div", {
+      }), s && !N && a && t.app && /* @__PURE__ */ n("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -120,5 +126,5 @@ const I = ({
   });
 };
 export {
-  _ as App
+  oe as App
 };

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

@@ -1,65 +1,63 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { styled as a } from "@linaria/react";
-import { StreamLayerProvider as l, StreamLayerSDKEvent as d, useStreamLayer as c, useStreamLayerUI as m } from "@streamlayer/react";
-import { App as u } from "../index.js";
-import { useStreamLayerDebug as f } from "../../../utils/debug/index.js";
-import { Video as y } from "./video.js";
+import { jsxs as i, jsx as t, Fragment as p } from "react/jsx-runtime";
+import { App as m } from "../index.js";
+import { StreamLayerSDKAdvertisement as u } from "../Advertisement/index.js";
+import { StreamLayerSDKNotification as c } from "../InApp/index.js";
+import { Layout as l } from "../Layout/index.js";
+import { useState as f } from "react";
+import { StreamLayerProvider as S, StreamLayerSDKEvent as b, useStreamLayer as d, useStreamLayerUI as h } from "@streamlayer/react";
+import { useStreamLayerDebug as y } from "../../../utils/debug/index.js";
+import { Video as v } from "./video.js";
+import { VideoContainer as A, VideoMuteButton as L } from "./styles.js";
 const s = () => {
   console.log("deep link handled cb");
-}, v = () => {
-  console.log("video player handled cb");
-}, h = ({
-  withSidebarNotification: n
-}) => {
-  const r = c(), e = m();
-  return !r || !e.app && !e.appNotification || !e.app && e.appNotification && !n ? null : /* @__PURE__ */ o(u, {
-    sdk: r,
-    onDeepLinkHandled: s
-  });
-}, A = /* @__PURE__ */ a("div")({
-  name: "Container",
-  class: "c1a4qh28",
-  propsAsIs: !1
-}), S = /* @__PURE__ */ a("div")({
-  name: "Body",
-  class: "b9h8kuk",
-  propsAsIs: !1
-}), k = /* @__PURE__ */ a("div")({
-  name: "AppContainer",
-  class: "a1wkro2j",
-  propsAsIs: !1
-}), P = ({
-  sdkKey: n,
-  eventId: r,
+}, k = ({ withSidebarNotification: r }) => {
+  const o = d(), e = h();
+  return !o || !e.app && !e.appNotification && !e.appSidebar || !e.app && !e.appSidebar && e.appNotification && !r ? null : /* @__PURE__ */ t(m, { sdk: o, onDeepLinkHandled: s });
+}, g = () => {
+  const r = d(), [o, e] = f(!1);
+  return r ? /* @__PURE__ */ t(
+    l,
+    {
+      sdk: r,
+      banner: /* @__PURE__ */ t(u, { sdk: r, banner: "bottom", persistent: !0 }),
+      sidebar: /* @__PURE__ */ i(p, { children: [
+        /* @__PURE__ */ t(u, { sdk: r, sidebar: "right", muted: !o, skipAutoClose: !0, externalAd: !0, persistent: !0 }),
+        /* @__PURE__ */ t(k, { withSidebarNotification: !1 })
+      ] }),
+      notification: /* @__PURE__ */ i(p, { children: [
+        /* @__PURE__ */ t(u, { sdk: r, notification: !0, persistent: !0 }),
+        /* @__PURE__ */ t(c, { sdk: r })
+      ] }),
+      children: /* @__PURE__ */ i(A, { className: "divAnchor", children: [
+        /* @__PURE__ */ t(v, { muted: o, toggleMute: e }),
+        /* @__PURE__ */ t(L, { onClick: () => e((n) => !n), children: o ? "unmute" : "mute" })
+      ] })
+    }
+  ) : null;
+}, M = ({
+  sdkKey: r,
+  eventId: o,
   production: e,
-  friendsTab: p
+  friendsTab: n
 }) => {
-  const t = f({
-    sdkKey: n,
-    eventId: r,
-    production: e
-  });
-  return /* @__PURE__ */ i(l, {
-    sdkKey: t.sdkKey,
-    production: t.env === "production",
-    autoEnable: !0,
-    onDeepLinkHandled: s,
-    videoPlayerController: v,
-    withAd: !1,
-    friendsTab: p,
-    children: [/* @__PURE__ */ i(S, {
-      children: [/* @__PURE__ */ o(y, {}), /* @__PURE__ */ o(A, {
-        children: /* @__PURE__ */ o(k, {
-          children: /* @__PURE__ */ o(h, {
-            withSidebarNotification: !1
-          })
-        })
-      })]
-    }), /* @__PURE__ */ o(d, {
-      event: t.event
-    })]
-  });
+  const a = y({ sdkKey: r, eventId: o, production: e });
+  return /* @__PURE__ */ i(
+    S,
+    {
+      sdkKey: a.sdkKey,
+      production: a.env === "production",
+      autoEnable: !0,
+      onDeepLinkHandled: s,
+      withAd: !0,
+      withAdNotification: !0,
+      friendsTab: n,
+      children: [
+        /* @__PURE__ */ t(g, {}),
+        /* @__PURE__ */ t(b, { event: a.event })
+      ]
+    }
+  );
 };
 export {
-  P as AppStory
+  M as AppStory
 };

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

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

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

@@ -3,4 +3,6 @@ export declare const VideoFrame: import('@linaria/react').StyledComponent<import
 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;
+export declare const PromoButton: {
+    __wyw_meta: unknown;
+} & import('react').FC<import('../../../../ui/button').ButtonProps>;

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

@@ -1,56 +1,71 @@
-import { jsxs as a, Fragment as g, jsx as r } from "react/jsx-runtime";
-import { useRef as y, useState as x, useCallback as P, useEffect as V } from "react";
-import { useStreamLayer as A } from "@streamlayer/react";
-import { StreamLayerSDKAdvertisement as d } from "../../Advertisement/index.js";
-import { StreamLayerThemeProvider as h } from "../../../../ui/theme/index.js";
-import { PromoButton as C, VideoFrame as w, AdvSidebar as F, VideoPlayerWrap as L, AdvBanner as S, AdvContent as T } from "./styles.js";
-const K = ({ isMobileScreen: o, skipAutoClose: n, sidebar: l, banner: p, event: m, promotionId: s, layoutMode: t }) => {
-  const e = A(), u = y(null), [f, v] = x(!1), c = P(({ muted: i }) => {
-    v(i);
+import { jsxs as d, Fragment as g, jsx as r } from "react/jsx-runtime";
+import { useRef as v, useState as y, useCallback as V, useEffect as x } from "react";
+import { useStreamLayer as P } from "@streamlayer/react";
+import { StreamLayerSDKAdvertisement as l } from "../../Advertisement/index.js";
+import { Layout as b } from "../../Layout/index.js";
+import { PromoButton as w, VideoFrame as F } from "./styles.js";
+const D = ({ isMobileScreen: o, skipAutoClose: a, sidebar: u, banner: p, event: m, promotionId: n, layoutMode: i }) => {
+  const e = P(), c = v(null), [h, f] = y(!1), s = V(({ muted: t }) => {
+    f(t);
   }, []);
-  return V(() => (e == null || e.addVideoPlayerController(c), () => {
-    e == null || e.removeVideoPlayerController(c);
-  }), [e, c]), /* @__PURE__ */ a(g, { children: [
-    s && /* @__PURE__ */ a(C, { onClick: () => {
-      var i;
-      (i = u.current) == null || i.scrollIntoView({ behavior: "smooth" }), setTimeout(() => {
-        e == null || e.getFeature(12).background.advertisement.show(s);
+  return x(() => (e == null || e.addVideoPlayerController(s), () => {
+    e == null || e.removeVideoPlayerController(s);
+  }), [e, s]), /* @__PURE__ */ d(g, { children: [
+    n && /* @__PURE__ */ d(w, { onClick: () => {
+      var t;
+      (t = c.current) == null || t.scrollIntoView({ behavior: "smooth" }), setTimeout(() => {
+        e == null || e.getFeature(12).background.advertisement.show(n);
       }, 200);
     }, children: [
       "open promotion: ",
-      s
+      n
     ] }),
-    /* @__PURE__ */ a(w, { ref: u, "data-testid": "video-frame", children: [
-      /* @__PURE__ */ r(
-        F,
-        {
-          style: {
-            ...t === "cover" ? { position: "absolute" } : {},
-            ...l === "left" ? { left: 0 } : { right: 0, order: 3 },
-            ...o ? { maxWidth: "calc(300px + env(safe-area-inset-left))" } : {}
-          },
-          children: e && /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(
-            d,
-            {
-              isMobileScreen: o,
-              event: m,
-              sdk: e,
-              sidebar: l,
-              layoutMode: t,
-              skipAutoClose: n,
-              skipTypeCheck: !0,
-              externalAd: !0,
-              persistent: !0
-            }
-          ) })
-        }
-      ),
-      /* @__PURE__ */ a(L, { children: [
-        /* @__PURE__ */ r("div", { className: "divAnchor", children: /* @__PURE__ */ r(
+    /* @__PURE__ */ r(F, { ref: c, "data-testid": "video-frame", children: e && /* @__PURE__ */ r(
+      b,
+      {
+        sdk: e,
+        sidebar: /* @__PURE__ */ r(
+          l,
+          {
+            isMobileScreen: o,
+            event: m,
+            sdk: e,
+            sidebar: u,
+            layoutMode: i,
+            skipAutoClose: a,
+            externalAd: !0,
+            persistent: !0
+          }
+        ),
+        banner: /* @__PURE__ */ r(
+          l,
+          {
+            isMobileScreen: o,
+            event: m,
+            sdk: e,
+            banner: p,
+            layoutMode: i,
+            skipAutoClose: a,
+            persistent: !0
+          }
+        ),
+        overlay: /* @__PURE__ */ r(
+          l,
+          {
+            isMobileScreen: o,
+            event: m,
+            sdk: e,
+            sidebar: u,
+            layoutMode: i,
+            skipAutoClose: a,
+            persistent: !0
+          }
+        ),
+        children: /* @__PURE__ */ r("div", { className: "divAnchor", children: /* @__PURE__ */ r(
           "video",
           {
             src: "https://storage.googleapis.com/gvabox/media/samples/stock.mp4",
-            muted: f,
+            muted: h,
             width: "100%",
             height: "100%",
             autoplay: "autoplay",
@@ -58,44 +73,11 @@ const K = ({ isMobileScreen: o, skipAutoClose: n, sidebar: l, banner: p, event:
             playsInline: !0,
             controls: !0
           }
-        ) }),
-        /* @__PURE__ */ r(
-          S,
-          {
-            style: {
-              ...t === "cover" ? { position: "absolute" } : {},
-              ...p === "top" ? { top: 0, order: -1 } : { bottom: 0 }
-            },
-            children: e && /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(
-              d,
-              {
-                isMobileScreen: o,
-                event: m,
-                sdk: e,
-                banner: p,
-                layoutMode: t,
-                skipAutoClose: n,
-                persistent: !0
-              }
-            ) })
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ r(T, { children: e && /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(
-      d,
-      {
-        isMobileScreen: o,
-        event: m,
-        sdk: e,
-        sidebar: l,
-        layoutMode: t,
-        skipAutoClose: n,
-        persistent: !0
+        ) })
       }
-    ) }) })
+    ) })
   ] });
 };
 export {
-  K as Video
+  D as Video
 };

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

@@ -1,4 +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 AdvBanner: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const PromoButton: any;
+export declare const PromoButton: {
+    __wyw_meta: unknown;
+} & import('react').FC<import('../../../../ui/button').ButtonProps>;

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

@@ -1,5 +1,9 @@
+export declare const VideoContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const VideoMuteButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
 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 LinkToLogin: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLAnchorElement> & import('react').AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown>>;
-export declare const NotificationContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const VideoTag: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLVideoElement> & import('react').VideoHTMLAttributes<HTMLVideoElement> & Record<never, unknown>>;
+export declare const VideoIFrame: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLIFrameElement> & import('react').IframeHTMLAttributes<HTMLIFrameElement> & Record<never, unknown>>;
+export declare const Preload: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;