@streamlayer/react-ui 1.26.0 → 1.27.0

package/lib/ui/video-player/index.js

@@ -1,114 +1,193 @@
-import { jsxs as k, jsx as a } from "react/jsx-runtime";
-import { cx as C } from "@linaria/core";
-import { useRef as U, useState as p, useCallback as w, useEffect as O } from "react";
-import { eventBus as F } from "@streamlayer/sdk-web-interfaces";
-import { SvgIcon as T } from "../icons/index.js";
-import { Loader as A } from "../loader/index.js";
-import { Container as B, ToggleIconPause as N, HideControls as q, Player as z, Poster as D, Control as H } from "./styles.js";
-const G = (s) => {
-  for (const r of s)
-    r.isIntersecting ? r.target instanceof HTMLVideoElement && r.target.autoplay && r.target.play() : r.target instanceof HTMLVideoElement && !r.target.paused && r.target.pause();
-}, I = new IntersectionObserver(G, { threshold: 0.5 }), v = /* @__PURE__ */ new Set(), J = (s) => {
-  I.observe(s), v.add(s);
-}, K = (s) => {
-  I.unobserve(s), v.delete(s);
-}, Q = () => {
-  for (const s of v)
-    s instanceof HTMLVideoElement && !s.paused && s.pause();
-}, R = ({
-  poster: s,
-  source: r,
-  aspectRatio: y,
-  controlVideo: n,
-  onPlay: f,
-  onPause: m,
-  autoPlay: x,
-  hideControls: b,
-  className: M
-}) => {
-  const t = U(null), [d, o] = p(!1), [h, L] = p(!1), [E, c] = p(!0), P = w(() => {
-    n == null || n({ muted: !0 });
-  }, [n]), l = w(() => {
-    n == null || n({ muted: !1 });
-  }, [n]), S = (e) => {
-    e.stopPropagation();
-    const i = t == null ? void 0 : t.current;
-    if (i) {
-      if (d)
-        i.pause();
-      else {
-        const u = t == null ? void 0 : t.current;
-        if (!u)
-          return;
-        Q(), u.play().catch((g) => console.log(g)), c(!1);
-      }
-      F.emit("interactions", {
-        action: "tap",
-        payload: {}
-      });
-    }
-  }, j = () => {
-    var e;
-    (e = t == null ? void 0 : t.current) == null || e.load(), c(!0);
-  };
-  return O(() => {
-    const e = t == null ? void 0 : t.current;
-    return () => {
-      e && (e.paused || l());
-    };
-  }, [l]), O(() => {
-    const e = t.current;
-    return e ? (J(e), () => K(e)) : () => {
+import { jsxs as N, jsx as t, Fragment as te } from "react/jsx-runtime";
+import { cx as Z } from "@linaria/core";
+import { withFocusable as re } from "../../app/webos/useTvButton.js";
+import { forwardRef as se, useRef as W, useState as L, useEffect as v, useCallback as T } from "react";
+import { SvgIcon as C } from "../icons/index.js";
+import { Loader as ne } from "../loader/index.js";
+import { ToggleIconPause as ce, HideControls as ie, Player as oe, Poster as ae, Control as P, Container as fe, VideoControls as ue, PauseIcon as le, PlayIcon as me, MuteIcon as de, WebOSIconButtonPlay as Y, WebOSIconButtonPause as be, WebOSIconButtonMute as ge, WebOSIconButtonUnmute as he } from "./styles.js";
+const pe = (r) => {
+  for (const s of r)
+    s.isIntersecting ? s.target instanceof HTMLVideoElement && s.target.autoplay && s.target.play() : s.target instanceof HTMLVideoElement && !s.target.paused && s.target.pause();
+}, _ = new IntersectionObserver(pe, { threshold: 0.5 }), A = /* @__PURE__ */ new Set(), ve = (r) => {
+  _.observe(r), A.add(r);
+}, Ce = (r) => {
+  _.unobserve(r), A.delete(r);
+}, Se = () => {
+  for (const r of A)
+    r instanceof HTMLVideoElement && !r.paused && r.pause();
+};
+function Ie(...r) {
+  return T(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (s) => {
+      for (const c of r)
+        c !== null && (typeof c == "function" ? c(s) : c && (c.current = s));
+    },
+    // Re-run the callback if the array of refs changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [...r]
+  );
+}
+const Oe = re(fe), Le = ({ loading: r, autoPlay: s, played: c, playing: o, isMuted: l, unmute: m, mute: d, togglePlaying: f }) => !r && !s && !c ? /* @__PURE__ */ t(P, { children: o ? /* @__PURE__ */ t(C, { name: "icon-pause" }) : /* @__PURE__ */ t(C, { name: "icon-play" }) }) : c ? /* @__PURE__ */ N(ue, { children: [
+  o ? /* @__PURE__ */ t(le, { onClick: f }) : /* @__PURE__ */ t(me, { onClick: f }),
+  /* @__PURE__ */ t(de, { className: Z(!l && "muted"), onClick: l ? m : d })
+] }) : null, Te = ({ loading: r, autoPlay: s, playMuted: c, playing: o, played: l, isMutedMediaVideo: m, unmute: d, mute: f, isMuted: g }) => /* @__PURE__ */ N(te, { children: [
+  !r && !(s && c) && /* @__PURE__ */ t(P, { "data-control-btn": "true", children: o ? /* @__PURE__ */ t(Y, { children: /* @__PURE__ */ t(C, { name: "icon-play" }) }) : l ? /* @__PURE__ */ t(be, { children: /* @__PURE__ */ t(C, { name: "icon-pause" }) }) : /* @__PURE__ */ t(Y, { name: "icon-play", "data-control-icon": "true" }) }),
+  !r && s && c && m !== void 0 && /* @__PURE__ */ t(P, { children: m ? /* @__PURE__ */ t(ge, { onClick: g ? d : f, children: /* @__PURE__ */ t(C, { name: "iconMute" }) }) : /* @__PURE__ */ t(he, { onClick: g ? d : f, children: /* @__PURE__ */ t(C, { name: "iconUnMute" }) }) })
+] }), Pe = se(
+  ({
+    poster: r,
+    source: s,
+    aspectRatio: c,
+    controlVideo: o,
+    onReplay: l,
+    onPlay: m,
+    onPause: d,
+    onEnd: f,
+    onRender: g,
+    onMute: x,
+    onQuartile: u,
+    autoPlay: S,
+    playMuted: k,
+    className: $,
+    muted: I,
+    webos: B
+  }, V) => {
+    const n = W(null), R = Ie(n, V), E = W(!1), j = W(!1), b = W(/* @__PURE__ */ new Set()), [D, K] = L(!1), [w, y] = L(!1), [M, z] = L(!1), [G, H] = L(!0), [q, F] = L(k);
+    v(() => {
+      s && (F(k), K(!1));
+    }, [s]);
+    const p = T(() => {
+      o == null || o({ muted: !1 });
+    }, [o]), J = T(() => {
+      o == null || o({ muted: !0 });
+    }, [o]), O = T((e) => {
+      e == null || e.stopPropagation(), n.current && (n.current.muted = !0), F(!0);
+    }, []), U = T((e) => {
+      e == null || e.stopPropagation(), n.current && (n.current.muted = !1), F(!1);
+    }, []);
+    v(() => {
+      I !== void 0 && (I ? O() : U());
+    }, [O, I, U]);
+    const X = (e) => {
+      var h;
+      (h = e.stopPropagation) == null || h.call(e);
+      const i = n == null ? void 0 : n.current;
+      if (i)
+        if (w)
+          i.pause();
+        else {
+          const a = n == null ? void 0 : n.current;
+          if (!a)
+            return;
+          Se(), a.play().catch((ee) => console.log(ee)), H(!1);
+        }
+    }, Q = () => {
+      var e;
+      (e = n == null ? void 0 : n.current) == null || e.load(), H(!0);
     };
-  }, []), /* @__PURE__ */ k(
-    B,
-    {
-      onClick: b ? void 0 : S,
-      "data-a": "intr",
-      className: C(d && N, b && q, M),
-      style: y ? { aspectRatio: y } : {},
-      children: [
-        /* @__PURE__ */ a(
-          z,
-          {
-            ref: t,
-            src: r,
-            autoPlay: x,
-            onPlay: () => {
-              P(), o(!0), c(!1), f == null || f();
-            },
-            onError: async (e) => {
-              try {
-                if (e.target instanceof HTMLVideoElement) {
-                  L(!0);
-                  const u = await (await fetch(e.target.src)).blob(), g = URL.createObjectURL(u);
-                  e.target.src = g;
+    return v(() => () => {
+      p();
+    }, [p]), v(() => {
+      const e = n.current;
+      return e ? (j.current = e.muted, F(e.muted), ve(e), () => {
+        Ce(e);
+      }) : () => {
+      };
+    }, []), v(() => {
+      g == null || g();
+    }, [g]), v(() => {
+      b.current.clear(), E.current = !1;
+    }, [s]), /* @__PURE__ */ N(
+      Oe,
+      {
+        webos: B,
+        onClick: S ? void 0 : X,
+        "data-a": "intr",
+        autoFocus: !0,
+        options: { focusKey: "video-play-btn" },
+        className: Z(w && ce, S && ie, $),
+        style: c ? { aspectRatio: c } : {},
+        children: [
+          /* @__PURE__ */ t(
+            oe,
+            {
+              ref: R,
+              src: s,
+              autoPlay: S,
+              onPlay: () => {
+                K(!0), E.current && (l == null || l(), b.current.clear()), y(!0), H(!1), m == null || m(), k ? O() : J();
+              },
+              onTimeUpdate: (e) => {
+                const i = e.target.duration, h = e.target.currentTime;
+                if (i && h) {
+                  const a = Math.floor(h / i * 100);
+                  a >= 25 && a < 50 && !b.current.has(25) ? (u == null || u(25), b.current.add(25)) : a >= 50 && a < 75 && !b.current.has(50) ? (u == null || u(50), b.current.add(50)) : a >= 75 && !b.current.has(75) && (u == null || u(75), b.current.add(75));
                 }
-              } catch (i) {
-                console.error("video fallback fetch failed", i), o(!0), c(!0);
-              } finally {
-                L(!1);
-              }
-            },
-            onPause: () => {
-              l(), o(!1), m == null || m();
-            },
-            onEnded: () => {
-              l(), o(!1), j();
-            },
-            style: { visibility: E ? "hidden" : "visible" },
-            controls: !1,
-            playsInline: !0
-          }
-        ),
-        /* @__PURE__ */ a(D, { src: s, style: { visibility: E ? "visible" : "hidden" } }),
-        !b && !h && /* @__PURE__ */ a(H, { children: d ? /* @__PURE__ */ a(T, { name: "icon-pause" }) : /* @__PURE__ */ a(T, { name: "icon-play" }) }),
-        h && /* @__PURE__ */ a(H, { children: /* @__PURE__ */ a(A, {}) })
-      ]
-    }
-  );
-};
+              },
+              onVolumeChange: (e) => {
+                const i = e.target.muted;
+                j.current !== i && (x == null || x(i), j.current = i, (i !== I || I === void 0) && (i ? p() : J()));
+              },
+              onError: async (e) => {
+                try {
+                  if (e.target instanceof HTMLVideoElement) {
+                    z(!0);
+                    const h = await (await fetch(e.target.src)).blob(), a = URL.createObjectURL(h);
+                    e.target.src = a;
+                  }
+                } catch (i) {
+                  console.error("video fallback fetch failed", i), y(!0), H(!0);
+                } finally {
+                  z(!1), p();
+                }
+              },
+              onPause: () => {
+                y(!1), d == null || d(), p();
+              },
+              onEnded: () => {
+                y(!1), E.current = !0, Q(), f == null || f(), p();
+              },
+              style: { visibility: G ? "hidden" : "visible" },
+              controls: !1,
+              playsInline: !0
+            }
+          ),
+          /* @__PURE__ */ t(ae, { src: r, style: { visibility: G ? "visible" : "hidden" } }),
+          !B && /* @__PURE__ */ t(
+            Le,
+            {
+              loading: M,
+              autoPlay: S,
+              played: D,
+              playing: w,
+              isMuted: q,
+              unmute: U,
+              mute: O,
+              togglePlaying: X
+            }
+          ),
+          B && /* @__PURE__ */ t(
+            Te,
+            {
+              loading: M,
+              autoPlay: S,
+              playMuted: k,
+              playing: w,
+              played: D,
+              isMutedMediaVideo: q,
+              unmute: U,
+              mute: O,
+              isMuted: q
+            }
+          ),
+          M && /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(ne, {}) })
+        ]
+      }
+    );
+  }
+);
 export {
-  R as VideoPlayer,
-  Q as pauseAllVideos
+  Pe as VideoPlayer,
+  Se as pauseAllVideos
 };

package/lib/ui/video-player/styles.d.ts

@@ -4,3 +4,39 @@ export declare const Poster: import('@linaria/react').StyledComponent<import('re
 export declare const Control: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const ToggleIconPause: import('@linaria/core').LinariaClassName;
 export declare const HideControls: import('@linaria/core').LinariaClassName;
+export declare const VideoControls: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const MuteIcon: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const PauseIcon: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const PlayIcon: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const WebOSIconButtonPlay: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const WebOSIconButtonPause: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const WebOSIconButtonMute: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const WebOSIconButtonUnmute: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;

package/lib/ui/video-player/styles.js

@@ -1,26 +1,74 @@
 import { styled as s } from "@linaria/react";
-const e = /* @__PURE__ */ s("div")({
+const I = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1bgb86j",
   propsAsIs: !1
-}), a = /* @__PURE__ */ s("video")({
+}), m = /* @__PURE__ */ s("video")({
   name: "Player",
   class: "p6703cq",
   propsAsIs: !1
-}), n = /* @__PURE__ */ s("img")({
+}), b = /* @__PURE__ */ s("img")({
   name: "Poster",
   class: "p12ow7zo",
   propsAsIs: !1
-}), l = /* @__PURE__ */ s("div")({
+}), A = /* @__PURE__ */ s("div")({
   name: "Control",
   class: "cdpal9o",
   propsAsIs: !1
-}), t = "t1xke4ml", r = "h1yzxv57";
+}), i = "t1xke4ml", y = "h1yzxv57", P = /* @__PURE__ */ s("div")({
+  name: "VideoControls",
+  class: "vxo8xch",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("button")({
+  name: "ControlBtn",
+  class: "coyuzu0",
+  propsAsIs: !1
+}), t = () => n, x = /* @__PURE__ */ s(t())({
+  name: "MuteIcon",
+  class: "musmi9a",
+  propsAsIs: !0
+}), e = () => n, B = /* @__PURE__ */ s(e())({
+  name: "PauseIcon",
+  class: "p1qe7rum",
+  propsAsIs: !0
+}), c = () => n, d = /* @__PURE__ */ s(c())({
+  name: "PlayIcon",
+  class: "psevery",
+  propsAsIs: !0
+}), o = /* @__PURE__ */ s("button")({
+  name: "WebOSIconButton",
+  class: "w1q3u7py",
+  propsAsIs: !1
+}), a = () => o, O = /* @__PURE__ */ s(a())({
+  name: "WebOSIconButtonPlay",
+  class: "wdlqvum",
+  propsAsIs: !0
+}), p = () => o, S = /* @__PURE__ */ s(p())({
+  name: "WebOSIconButtonPause",
+  class: "w1ylz9ea",
+  propsAsIs: !0
+}), l = () => o, W = /* @__PURE__ */ s(l())({
+  name: "WebOSIconButtonMute",
+  class: "w1iylt55",
+  propsAsIs: !0
+}), r = () => o, C = /* @__PURE__ */ s(r())({
+  name: "WebOSIconButtonUnmute",
+  class: "w8h4h7",
+  propsAsIs: !0
+});
 export {
-  e as Container,
-  l as Control,
-  r as HideControls,
-  a as Player,
-  n as Poster,
-  t as ToggleIconPause
+  I as Container,
+  A as Control,
+  y as HideControls,
+  x as MuteIcon,
+  B as PauseIcon,
+  d as PlayIcon,
+  m as Player,
+  b as Poster,
+  i as ToggleIconPause,
+  P as VideoControls,
+  W as WebOSIconButtonMute,
+  S as WebOSIconButtonPause,
+  O as WebOSIconButtonPlay,
+  C as WebOSIconButtonUnmute
 };

package/lib/utils/common.d.ts

@@ -0,0 +1,6 @@
+export declare const abbreviate: (name: string) => string;
+export declare const formatDecimals: (value?: number) => string;
+export declare const formatDate: (date: Date) => string;
+export declare const formatTime: (time: Date) => string;
+export declare const isValidDate: (date: Date) => boolean;
+export declare const getTimeUntilNow: (date: string) => string;

package/lib/utils/createDemo.d.ts

@@ -0,0 +1,12 @@
+import { StoryObj, StoryFn } from '@storybook/react';
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+type Props = {
+    SDK_KEY?: string;
+    production?: boolean;
+};
+type DemoStory = React.FC<Props>;
+export declare function createDemo<T>(Component: React.FC<{
+    Story: StoryFn<T>;
+    sdk: StreamLayerSDK;
+}>, autoEnable?: boolean): StoryObj<DemoStory>;
+export {};

package/lib/utils/debug/components/bypassLogin.d.ts

@@ -0,0 +1,6 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { DeveloperStorage } from '../../storage';
+export declare const BypassLogin: React.FC<{
+    sdk: StreamLayerSDK;
+    storage: DeveloperStorage;
+}>;

package/lib/utils/debug/components/copyLogs.d.ts

@@ -0,0 +1 @@
+export declare const CopyLogs: () => import("react/jsx-runtime").JSX.Element;

package/lib/utils/debug/components/developer.d.ts

@@ -0,0 +1,14 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+type DeveloperProps = {
+    sdk: StreamLayerSDK | null;
+    sdkKey: string;
+    setSdkKey?: (sdkKey: string) => void;
+    env: 'production' | 'development';
+    setEnv?: (value: 'production' | 'development') => void;
+    event: string;
+    setEvent: (event: string) => void;
+    hideAuth?: boolean;
+    standalone?: boolean;
+};
+export declare const Developer: React.FC<DeveloperProps>;
+export {};

package/lib/utils/debug/components/envToggle.d.ts

@@ -0,0 +1,6 @@
+import { DeveloperStorage } from '../../storage';
+export declare const EnvToggle: React.FC<{
+    env: 'production' | 'development';
+    setEnv: any;
+    storage: DeveloperStorage;
+}>;

package/lib/utils/debug/components/eventInput.d.ts

@@ -0,0 +1,8 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { DeveloperStorage } from '../../storage';
+export declare const EventInput: React.FC<{
+    sdk: StreamLayerSDK;
+    storage: DeveloperStorage;
+    event: string;
+    setEvent: (event: string) => void;
+}>;

package/lib/utils/debug/components/sdkKey.d.ts

@@ -0,0 +1,6 @@
+import { DeveloperStorage } from '../../storage';
+export declare const SdkKey: React.FC<{
+    storage: DeveloperStorage;
+    sdkKey: string;
+    setSdkKey: (sdkKey: string) => void;
+}>;

package/lib/utils/debug/components/styles.d.ts

@@ -0,0 +1 @@
+export declare const InputField: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/utils/debug/index.d.ts

@@ -0,0 +1,36 @@
+import { ArgTypes } from '@storybook/react';
+export type DebugProps = {
+    production?: boolean;
+    sdkKey?: string;
+    eventId?: string;
+};
+export declare const storybookOptions: {
+    args: DebugProps;
+    argTypes: ArgTypes<DebugProps>;
+};
+export declare const useStreamLayerDebug: (props?: DebugProps) => {
+    env: "production" | "development";
+    setEnv: import('react').Dispatch<import('react').SetStateAction<"production" | "development">>;
+    sdkKey: string;
+    setSdkKey: import('react').Dispatch<import('react').SetStateAction<string>>;
+    event: string;
+    setEvent: import('react').Dispatch<import('react').SetStateAction<string>>;
+};
+export type StreamLayerDebugProps = ReturnType<typeof useStreamLayerDebug>;
+/**
+ * The `StreamLayerDebug` component is used to debug the StreamLayer SDK.
+ * It is using:
+ * - the `Developer` component to display the different debug options.
+ * - the `useStreamLayerDebug` hook to get the current debug values.
+ * - the `useStreamLayer` hook to get the StreamLayer SDK.
+ * - the `DeveloperStorage` to store the debug values.
+ *
+ * The `Developer` component includes:
+ * - the `EnvToggle` component to switch between the `production` and `development` environments.
+ * - the `SdkKeyInput` component to set the SDK key.
+ * - the `EventInput` component to set the event.
+ * - the `BypassLogin` component to bypass login.
+ *
+ * The `Developer` component can be opened by clicking on the `Debug` button in the bottom right corner of the screen.
+ */
+export declare const StreamLayerDebug: React.FC<StreamLayerDebugProps>;

package/lib/utils/debug/storage.d.ts

@@ -0,0 +1,14 @@
+import { Storage } from '@streamlayer/sdk-web-storage';
+export declare class DeveloperStorage extends Storage {
+    constructor();
+    setSchema: (value: string) => void;
+    getSchema: () => string | undefined;
+    setToken: (value: string) => void;
+    getToken: () => string | undefined;
+    setEvent: (value: string) => void;
+    getEvent: () => string | undefined;
+    setSdkKey: (value: string) => void;
+    getSdkKey: () => string | undefined;
+    setEnv: (value: "production" | "development") => void;
+    getEnv: () => "production" | "development";
+}

package/lib/utils/decorators/container.d.ts

@@ -0,0 +1,6 @@
+import { StoryContext, StoryFn } from '@storybook/react';
+export declare const mastersTheme: (Story: StoryFn, _context: StoryContext) => import("react/jsx-runtime").JSX.Element;
+export declare const theme: (Story: StoryFn, context: StoryContext) => import("react/jsx-runtime").JSX.Element;
+export declare const bgContainer: (Story: StoryFn) => import("react/jsx-runtime").JSX.Element;
+/** @deprecated */
+export declare const container: (Story: StoryFn) => import("react/jsx-runtime").JSX.Element;

package/lib/utils/decorators/container.js

@@ -1,11 +1,11 @@
 import { jsx as e } from "react/jsx-runtime";
 import { StreamLayerThemeProvider as n } from "../../ui/theme/index.js";
-import { StreamLayerMastersThemeProvider as i } from "../../ui/theme/masters.js";
-import { BGContainer as m, AppContainer as c } from "./styles.js";
-const l = (r, t) => /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, {}) }), p = (r, t) => {
-  const o = t.globals.theme || "light";
+import { StreamLayerMastersThemeProvider as m } from "../../ui/theme/masters.js";
+import { BGContainer as i, AppContainer as c } from "./styles.js";
+const l = (r, t) => /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(r, {}) }), p = (r, t) => {
+  const o = t.globals.theme || "dark";
   return /* @__PURE__ */ e(n, { themeMode: o, children: /* @__PURE__ */ e(r, {}) });
-}, f = (r) => /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(r, {}) }), u = (r) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(r, {}) }) }) });
+}, f = (r) => /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, {}) }), u = (r) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(r, {}) }) }) });
 export {
   f as bgContainer,
   u as container,

package/lib/utils/decorators/masters.d.ts

@@ -0,0 +1,2 @@
+import { StoryFn } from '@storybook/react';
+export declare const useMastersFiles: (Story: StoryFn) => import("react/jsx-runtime").JSX.Element;

package/lib/utils/decorators/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const AppContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const BGContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/utils/login.d.ts

@@ -0,0 +1,3 @@
+export declare const requestLoginCode: (host: string, phone: string) => Promise<boolean>;
+export declare const register: (host: string, phone: string) => Promise<boolean>;
+export declare const login: (host: string, phone: string, code: string) => Promise<any>;

package/lib/utils/storage.d.ts

@@ -0,0 +1,14 @@
+import { Storage } from '@streamlayer/sdk-web-storage';
+export declare class DeveloperStorage extends Storage {
+    constructor();
+    setSchema: (value: string) => void;
+    getSchema: () => string | undefined;
+    setToken: (value: string) => void;
+    getToken: () => string | undefined;
+    setEvent: (value: string) => void;
+    getEvent: () => string | undefined;
+    setSdkKey: (value: string) => void;
+    getSdkKey: () => string | undefined;
+    setEnv: (value: "production" | "development") => void;
+    getEnv: () => "production" | "development";
+}