@streamlayer/react-ui 0.98.1 → 0.99.0

package/lib/ui/questions/twitter/account/index.js

@@ -1,31 +1,29 @@
 import { jsxs as r, jsx as t } from "react/jsx-runtime";
 import { SvgIcon as a } from "../../../icons/index.js";
 import { getTimeUntilNow as l } from "../../../../utils/common.js";
-import { Container as p, ImageContainer as s, Image as d, TwitterIcon as f, Details as h, Name as D, UserNameAndDate as I } from "./styles.js";
-import "@linaria/react";
-import "react";
-const C = ({ image: i, name: o, userName: e, verified: c, createdTweet: n }) => {
-  const m = n && l(n);
-  return /* @__PURE__ */ r(p, { children: [
-    i && /* @__PURE__ */ r(s, { children: [
-      /* @__PURE__ */ t(d, { src: i }),
+import { Container as s, ImageContainer as d, Image as p, TwitterIcon as f, Details as h, Name as D, UserNameAndDate as I } from "./styles.js";
+const v = ({ image: e, name: i, userName: n, verified: m, createdTweet: o }) => {
+  const c = o && l(o);
+  return /* @__PURE__ */ r(s, { children: [
+    e && /* @__PURE__ */ r(d, { children: [
+      /* @__PURE__ */ t(p, { src: e }),
       /* @__PURE__ */ t(f, { name: "twitter" })
     ] }),
     /* @__PURE__ */ r(h, { children: [
-      o && /* @__PURE__ */ r(D, { children: [
-        o,
+      i && /* @__PURE__ */ r(D, { children: [
+        i,
         " ",
-        c && /* @__PURE__ */ t(a, { name: "icon-twitter-verified" })
+        m && /* @__PURE__ */ t(a, { name: "icon-twitter-verified" })
       ] }),
-      e && /* @__PURE__ */ r(I, { children: [
+      n && /* @__PURE__ */ r(I, { children: [
         "@",
-        e,
+        n,
         " ",
-        m && `･ ${m}`
+        c && `･ ${c}`
       ] })
     ] })
   ] });
 };
 export {
-  C as Account
+  v as Account
 };

package/lib/ui/questions/twitter/account/styles.js

@@ -1,42 +1,40 @@
 import { styled as s } from "@linaria/react";
 import { SvgIcon as e } from "../../../icons/index.js";
-import "react/jsx-runtime";
-import "react";
-const m = /* @__PURE__ */ s("div")({
+const t = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "cjq447q",
   propsAsIs: !1
-}), c = /* @__PURE__ */ s("div")({
+}), r = /* @__PURE__ */ s("div")({
   name: "ImageContainer",
   class: "i14egogb",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("img")({
+}), c = /* @__PURE__ */ s("img")({
   name: "Image",
   class: "i2g9g4l",
   propsAsIs: !1
-}), a = () => e, p = /* @__PURE__ */ s(a())({
+}), a = () => e, m = /* @__PURE__ */ s(a())({
   name: "TwitterIcon",
   class: "t1c454nm",
   propsAsIs: !0
-}), l = /* @__PURE__ */ s("div")({
+}), i = /* @__PURE__ */ s("div")({
   name: "Details",
   class: "d11nigc3",
   propsAsIs: !1
-}), I = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("div")({
   name: "Name",
   class: "nrxa4k8",
   propsAsIs: !1
-}), g = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "UserNameAndDate",
   class: "u1p051g3",
   propsAsIs: !1
 });
 export {
-  m as Container,
-  l as Details,
-  i as Image,
-  c as ImageContainer,
-  I as Name,
-  p as TwitterIcon,
-  g as UserNameAndDate
+  t as Container,
+  i as Details,
+  c as Image,
+  r as ImageContainer,
+  p as Name,
+  m as TwitterIcon,
+  l as UserNameAndDate
 };

package/lib/ui/questions/twitter/index.js

@@ -1,33 +1,26 @@
-import { jsxs as t, jsx as n, Fragment as j } from "react/jsx-runtime";
+import { jsxs as c, jsx as n, Fragment as j } from "react/jsx-runtime";
 import { VideoPlayer as k } from "../../video-player/index.js";
 import { Account as x } from "./account/index.js";
-import { Container as B, Details as E, Body as N, ImagesContainer as c, ImageFullSize as i, ImageHalfSize as e, ImagesBlock as m } from "./styles.js";
-import "@linaria/core";
-import "react";
-import "../../icons/index.js";
-import "@linaria/react";
-import "../../video-player/styles.js";
-import "../../../utils/common.js";
-import "./account/styles.js";
-const R = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), S = (o) => o == null ? void 0 : o.replace(R, ""), K = ({
-  image: o,
+import { Container as B, Details as E, Body as N, ImagesContainer as i, ImageFullSize as l, ImageHalfSize as p, ImagesBlock as a } from "./styles.js";
+const R = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), S = (t) => t == null ? void 0 : t.replace(R, ""), V = ({
+  image: t,
   body: C,
   account: z,
   accountVerified: F,
   tweet: s,
-  isDetail: a,
+  isDetail: d,
   controlVideo: T
 }) => {
-  var h, g, H, U, f, u, v, I, y;
-  const r = (g = (h = s == null ? void 0 : s.meta) == null ? void 0 : h.extendedEntities) == null ? void 0 : g.media, l = r == null ? void 0 : r.find(({ type: p }) => p === "photo"), d = (u = (f = (U = (H = r == null ? void 0 : r[0]) == null ? void 0 : H.videoInfo) == null ? void 0 : U.variants) == null ? void 0 : f.find(
-    ({ contentType: p }) => p === "video/mp4"
+  var m, g, H, U, f, u, v, I, y;
+  const r = (g = (m = s == null ? void 0 : s.meta) == null ? void 0 : m.extendedEntities) == null ? void 0 : g.media, o = r == null ? void 0 : r.find(({ type: e }) => e === "photo"), h = (u = (f = (U = (H = r == null ? void 0 : r[0]) == null ? void 0 : H.videoInfo) == null ? void 0 : U.variants) == null ? void 0 : f.find(
+    ({ contentType: e }) => e === "video/mp4"
   )) == null ? void 0 : u.url;
-  return /* @__PURE__ */ t(B, { children: [
-    /* @__PURE__ */ t(E, { children: [
+  return /* @__PURE__ */ c(B, { children: [
+    /* @__PURE__ */ c(E, { children: [
       /* @__PURE__ */ n(
         x,
         {
-          image: o,
+          image: t,
           name: (v = s == null ? void 0 : s.meta) == null ? void 0 : v.accountName,
           userName: z,
           verified: F,
@@ -35,35 +28,35 @@ const R = new RegExp("\\s?https?://t.co[^\\s]+(\\s+)?$"), S = (o) => o == null ?
         }
       ),
       /* @__PURE__ */ n(N, { children: S(C) }),
-      !a && l && /* @__PURE__ */ n(c, { children: /* @__PURE__ */ n(i, { src: r == null ? void 0 : r[0].mediaUrlHttps }) }),
-      a && l && /* @__PURE__ */ t(j, { children: [
-        (r == null ? void 0 : r.length) === 1 && /* @__PURE__ */ n(c, { children: /* @__PURE__ */ n(i, { src: r[0].mediaUrlHttps }) }),
-        (r == null ? void 0 : r.length) === 2 && /* @__PURE__ */ t(c, { children: [
-          /* @__PURE__ */ n(e, { src: r[0].mediaUrlHttps }),
-          /* @__PURE__ */ n(e, { src: r[1].mediaUrlHttps })
+      !d && o && /* @__PURE__ */ n(i, { children: /* @__PURE__ */ n(l, { src: r == null ? void 0 : r[0].mediaUrlHttps }) }),
+      d && o && /* @__PURE__ */ c(j, { children: [
+        (r == null ? void 0 : r.length) === 1 && /* @__PURE__ */ n(i, { children: /* @__PURE__ */ n(l, { src: r[0].mediaUrlHttps }) }),
+        (r == null ? void 0 : r.length) === 2 && /* @__PURE__ */ c(i, { children: [
+          /* @__PURE__ */ n(p, { src: r[0].mediaUrlHttps }),
+          /* @__PURE__ */ n(p, { src: r[1].mediaUrlHttps })
         ] }),
-        (r == null ? void 0 : r.length) === 3 && /* @__PURE__ */ t(c, { children: [
-          /* @__PURE__ */ n(e, { src: r[0].mediaUrlHttps }),
-          /* @__PURE__ */ t(m, { children: [
-            /* @__PURE__ */ n(i, { src: r[1].mediaUrlHttps }),
-            /* @__PURE__ */ n(i, { src: r[2].mediaUrlHttps })
+        (r == null ? void 0 : r.length) === 3 && /* @__PURE__ */ c(i, { children: [
+          /* @__PURE__ */ n(p, { src: r[0].mediaUrlHttps }),
+          /* @__PURE__ */ c(a, { children: [
+            /* @__PURE__ */ n(l, { src: r[1].mediaUrlHttps }),
+            /* @__PURE__ */ n(l, { src: r[2].mediaUrlHttps })
           ] })
         ] }),
-        (r == null ? void 0 : r.length) === 4 && /* @__PURE__ */ t(c, { children: [
-          /* @__PURE__ */ t(m, { children: [
-            /* @__PURE__ */ n(i, { src: r[0].mediaUrlHttps }),
-            /* @__PURE__ */ n(i, { src: r[1].mediaUrlHttps })
+        (r == null ? void 0 : r.length) === 4 && /* @__PURE__ */ c(i, { children: [
+          /* @__PURE__ */ c(a, { children: [
+            /* @__PURE__ */ n(l, { src: r[0].mediaUrlHttps }),
+            /* @__PURE__ */ n(l, { src: r[1].mediaUrlHttps })
           ] }),
-          /* @__PURE__ */ t(m, { children: [
-            /* @__PURE__ */ n(i, { src: r[2].mediaUrlHttps }),
-            /* @__PURE__ */ n(i, { src: r[3].mediaUrlHttps })
+          /* @__PURE__ */ c(a, { children: [
+            /* @__PURE__ */ n(l, { src: r[2].mediaUrlHttps }),
+            /* @__PURE__ */ n(l, { src: r[3].mediaUrlHttps })
           ] })
         ] })
       ] })
     ] }),
-    !l && (((I = r == null ? void 0 : r[0]) == null ? void 0 : I.type) === "video" || ((y = r == null ? void 0 : r[0]) == null ? void 0 : y.type) === "animated_gif") && d && /* @__PURE__ */ n(k, { source: d, poster: r[0].mediaUrlHttps, controlVideo: T })
+    !o && (((I = r == null ? void 0 : r[0]) == null ? void 0 : I.type) === "video" || ((y = r == null ? void 0 : r[0]) == null ? void 0 : y.type) === "animated_gif") && h && /* @__PURE__ */ n(k, { source: h, poster: r[0].mediaUrlHttps, controlVideo: T })
   ] });
 };
 export {
-  K as TwitterContent
+  V as TwitterContent
 };

package/lib/ui/skeleton/index.js

@@ -1,7 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Container as m } from "./styles.js";
-import "@linaria/react";
-const f = ({ children: r, style: o, loading: t }) => t ? /* @__PURE__ */ e(m, { style: o, children: r }) : r;
+import { Container as n } from "./styles.js";
+const i = ({ children: r, style: o, loading: t }) => t ? /* @__PURE__ */ e(n, { style: o, children: r }) : r;
 export {
-  f as Skeleton
+  i as Skeleton
 };

package/lib/ui/theme/index.js

@@ -1,8 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import { theme as o } from "./theme.js";
-import "./breakpoints.js";
-import "./constants.js";
-const p = ({ children: r, style: m }) => /* @__PURE__ */ e("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ e("div", { className: o, style: m, children: r }) });
+import { theme as a } from "./theme.js";
+const i = ({ children: r, style: m }) => /* @__PURE__ */ e("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ e("div", { className: a, style: m, children: r }) });
 export {
-  p as StreamLayerThemeProvider
+  i as StreamLayerThemeProvider
 };

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

@@ -1,71 +1,77 @@
-import { jsxs as w, jsx as n } from "react/jsx-runtime";
-import { cx as x } from "@linaria/core";
-import { useRef as C, useState as p, useCallback as g, useEffect as v } from "react";
-import { SvgIcon as d } from "../icons/index.js";
-import { Container as E, ToggleIconPause as S, Player as T, Poster as L, Control as j } from "./styles.js";
-import "@linaria/react";
-const k = (s, o) => {
+import { jsxs as x, jsx as n } from "react/jsx-runtime";
+import { cx as C } from "@linaria/core";
+import { useRef as E, useState as g, useCallback as v, useEffect as d } from "react";
+import { eventBus as S } from "@streamlayer/sdk-web-interfaces";
+import { SvgIcon as y } from "../icons/index.js";
+import { Container as T, ToggleIconPause as L, Player as j, Poster as k, Control as H } from "./styles.js";
+const M = (s, a) => {
   for (const t of s)
-    t.isIntersecting || t.target instanceof HTMLVideoElement && !t.target.paused && (o.unobserve(t.target), t.target.pause());
-}, y = new IntersectionObserver(k, { threshold: 0.5 }), f = /* @__PURE__ */ new Set(), H = (s) => {
-  y.observe(s), f.add(s);
-}, u = (s) => {
-  y.unobserve(s), f.delete(s);
-}, M = () => {
+    t.isIntersecting || t.target instanceof HTMLVideoElement && !t.target.paused && (a.unobserve(t.target), t.target.pause());
+}, P = new IntersectionObserver(M, { threshold: 0.5 }), f = /* @__PURE__ */ new Set(), A = (s) => {
+  P.observe(s), f.add(s);
+}, o = (s) => {
+  P.unobserve(s), f.delete(s);
+}, B = () => {
   for (const s of f)
-    s instanceof HTMLVideoElement && !s.paused && (s.pause(), u(s));
-}, D = ({ poster: s, source: o, controlVideo: t }) => {
-  const e = C(null), [a, c] = p(!1), [m, b] = p(!0), P = g(() => {
+    s instanceof HTMLVideoElement && !s.paused && (s.pause(), o(s));
+}, J = ({ poster: s, source: a, controlVideo: t }) => {
+  const e = E(null), [u, c] = g(!1), [m, p] = g(!0), h = v(() => {
     t == null || t({ muted: !0 });
-  }, [t]), i = g(() => {
+  }, [t]), i = v(() => {
     t == null || t({ muted: !1 });
-  }, [t]), h = () => {
-    const r = e == null ? void 0 : e.current;
-    if (r)
-      if (a)
-        r.pause(), e.current && u(e.current);
+  }, [t]), I = (r) => {
+    r.stopPropagation();
+    const b = e == null ? void 0 : e.current;
+    if (b) {
+      if (u)
+        b.pause(), e.current && o(e.current);
       else {
         const l = e == null ? void 0 : e.current;
         if (!l)
           return;
-        M(), H(l), l.play().catch((O) => console.log(O)), b(!1);
+        B(), A(l), l.play().catch((w) => console.log(w)), p(!1);
       }
-  }, I = () => {
+      S.emit("interactions", {
+        action: "tap",
+        payload: {}
+      });
+    }
+  }, O = () => {
     var r;
-    e.current && u(e.current), (r = e == null ? void 0 : e.current) == null || r.load(), b(!0);
+    e.current && o(e.current), (r = e == null ? void 0 : e.current) == null || r.load(), p(!0);
   };
-  return v(() => {
-    e.current && u(e.current);
-  }, []), v(() => {
+  return d(() => {
+    e.current && o(e.current);
+  }, []), d(() => {
     const r = e == null ? void 0 : e.current;
     return () => {
-      r && (r.paused || i(), u(r));
+      r && (r.paused || i(), o(r));
     };
-  }, [i]), /* @__PURE__ */ w(E, { onClick: h, className: x(a && S), children: [
+  }, [i]), /* @__PURE__ */ x(T, { onClick: I, className: C(u && L), children: [
     /* @__PURE__ */ n(
-      T,
+      j,
       {
         ref: e,
-        src: o,
+        src: a,
         onPlay: () => {
-          P(), c(!0);
+          h(), c(!0);
         },
         onPause: () => {
           i(), c(!1);
         },
         onEnded: () => {
-          i(), c(!1), I();
+          i(), c(!1), O();
         },
         style: { visibility: m ? "hidden" : "visible" },
         controls: !1,
         playsInline: !0
       }
     ),
-    /* @__PURE__ */ n(L, { src: s, style: { visibility: m ? "visible" : "hidden" } }),
-    /* @__PURE__ */ n(j, { children: a ? /* @__PURE__ */ n(d, { name: "icon-pause" }) : /* @__PURE__ */ n(d, { name: "icon-play" }) })
+    /* @__PURE__ */ n(k, { src: s, style: { visibility: m ? "visible" : "hidden" } }),
+    /* @__PURE__ */ n(H, { children: u ? /* @__PURE__ */ n(y, { name: "icon-pause" }) : /* @__PURE__ */ n(y, { name: "icon-play" }) })
   ] });
 };
 export {
-  D as VideoPlayer,
-  M as pauseAllVideos
+  J as VideoPlayer,
+  B as pauseAllVideos
 };

package/lib/utils/createDemo.js

@@ -1,45 +1,35 @@
-import { jsx as e, jsxs as g, Fragment as y } from "react/jsx-runtime";
-import { useMemo as u, useState as i, useEffect as E } from "react";
+import { jsx as t, jsxs as g, Fragment as y } from "react/jsx-runtime";
+import { useMemo as p, useState as c, useEffect as E } from "react";
 import { useStreamLayerApp as l } from "@streamlayer/react/useStreamLayerApp";
 import { anonymous as D } from "@streamlayer/sdk-web-anonymous-auth";
 import { Developer as w } from "./debug/components/developer.js";
 import { DeveloperStorage as x } from "./storage.js";
-import "@linaria/react";
-import "./debug/components/bypassLogin.js";
-import "./debug/components/copyLogs.js";
-import "./debug/components/styles.js";
-import "./debug/components/envToggle.js";
-import "./debug/components/eventInput.js";
-import "@nanostores/react";
-import "@streamlayer/sdk-web-core";
-import "./debug/components/sdkKey.js";
-import "@streamlayer/sdk-web-storage";
 function K({
   Component: o,
   Story: r,
   args: n,
   autoEnable: a
 }) {
-  const s = u(() => new x(), []), [p, f] = i(s.getEnv()), [c, v] = i(s.getSdkKey() || "set-sdk-key"), [m, k] = i(s.getEvent() || ""), S = u(() => {
-    const d = /* @__PURE__ */ new Set();
-    return d.add(D), d;
-  }, []), t = l({
-    sdkKey: c,
+  const s = p(() => new x(), []), [i, f] = c(s.getEnv()), [d, v] = c(s.getSdkKey() || "set-sdk-key"), [m, k] = c(s.getEvent() || ""), S = p(() => {
+    const u = /* @__PURE__ */ new Set();
+    return u.add(D), u;
+  }, []), e = l({
+    sdkKey: d,
     plugins: S,
-    production: p === "production",
+    production: i === "production",
     autoEnable: a
   });
   return E(() => {
-    m && t && t.createEventSession(m);
-  }, [t]), /* @__PURE__ */ g(y, { children: [
-    t ? /* @__PURE__ */ e(o, { Story: r, sdk: t, args: n }) : /* @__PURE__ */ e("div", { children: "wait sdk..." }),
-    /* @__PURE__ */ e(
+    m && e && e.createEventSession(m);
+  }, [e]), /* @__PURE__ */ g(y, { children: [
+    e ? /* @__PURE__ */ t(o, { Story: r, sdk: e, args: n }) : /* @__PURE__ */ t("div", { children: "wait sdk..." }),
+    /* @__PURE__ */ t(
       w,
       {
-        sdk: t,
-        sdkKey: c,
+        sdk: e,
+        sdkKey: d,
         setSdkKey: v,
-        env: p,
+        env: i,
         setEnv: f,
         event: m,
         setEvent: k
@@ -47,13 +37,13 @@ function K({
     )
   ] });
 }
-function O(o, r = !0) {
+function b(o, r = !0) {
   return {
     decorators: [
-      (n) => /* @__PURE__ */ e(K, { Story: n, Component: o, autoEnable: r })
+      (n) => /* @__PURE__ */ t(K, { Story: n, Component: o, autoEnable: r })
     ]
   };
 }
 export {
-  O as createDemo
+  b as createDemo
 };

package/lib/utils/debug/components/copyLogs.js

@@ -1,7 +1,6 @@
 import { jsxs as t, jsx as o } from "react/jsx-runtime";
 import { InputField as r } from "./styles.js";
-import "@linaria/react";
-const p = () => /* @__PURE__ */ t(r, { children: [
+const n = () => /* @__PURE__ */ t(r, { children: [
   /* @__PURE__ */ o("label", { children: "Subscription Logs" }),
   /* @__PURE__ */ o("button", { onClick: () => {
     navigator.clipboard.writeText(sessionStorage.getItem("slstreamlogs") || "").then(() => {
@@ -10,5 +9,5 @@ const p = () => /* @__PURE__ */ t(r, { children: [
   }, children: "Copy" })
 ] });
 export {
-  p as CopyLogs
+  n as CopyLogs
 };

package/lib/utils/debug/components/developer.js

@@ -1,5 +1,5 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { styled as n } from "@linaria/react";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { styled as s } from "@linaria/react";
 import { useMemo as b, useState as h } from "react";
 import { DeveloperStorage as q } from "../../storage.js";
 import { BypassLogin as u } from "./bypassLogin.js";
@@ -7,70 +7,66 @@ import { CopyLogs as D } from "./copyLogs.js";
 import { EnvToggle as I } from "./envToggle.js";
 import { EventInput as B } from "./eventInput.js";
 import { SdkKey as v } from "./sdkKey.js";
-import "@streamlayer/sdk-web-storage";
-import "./styles.js";
-import "@nanostores/react";
-import "@streamlayer/sdk-web-core";
-const A = /* @__PURE__ */ n("div")({
+const A = /* @__PURE__ */ s("div")({
   name: "DeveloperContainer",
   class: "d1sqxt7l",
   propsAsIs: !1
-}), x = /* @__PURE__ */ n("div")({
+}), x = /* @__PURE__ */ s("div")({
   name: "DeveloperItems",
   class: "d1a3478s",
   propsAsIs: !1
-}), L = /* @__PURE__ */ n("button")({
+}), L = /* @__PURE__ */ s("button")({
   name: "BurgerBtn",
   class: "butjcq8",
   propsAsIs: !1
-}), P = ({
+}), G = ({
   sdk: r,
-  sdkKey: s,
+  sdkKey: m,
   setSdkKey: p,
-  env: i,
+  env: a,
   setEnv: t,
-  event: a,
+  event: i,
   setEvent: l,
   hideAuth: c,
   standalone: f = !1
 }) => {
   const e = b(() => new q(), []), [g, C] = h(f);
-  return f ? /* @__PURE__ */ m(x, {
+  return f ? /* @__PURE__ */ n(x, {
     children: [t && /* @__PURE__ */ o(I, {
-      env: i,
+      env: a,
       setEnv: t,
       storage: e
     }), p && /* @__PURE__ */ o(v, {
-      sdkKey: s,
+      sdkKey: m,
       setSdkKey: p,
       storage: e
     }), r && /* @__PURE__ */ o(B, {
       sdk: r,
       storage: e,
-      event: a,
+      event: i,
       setEvent: l
     }), !c && r && /* @__PURE__ */ o(u, {
       sdk: r,
       storage: e
     }), /* @__PURE__ */ o(D, {})]
-  }) : /* @__PURE__ */ m(A, {
-    children: [/* @__PURE__ */ m(L, {
+  }) : /* @__PURE__ */ n(A, {
+    children: [/* @__PURE__ */ n(L, {
       "data-opened": g.toString(),
       onClick: () => C((j) => !j),
       children: [/* @__PURE__ */ o("span", {}), /* @__PURE__ */ o("span", {}), /* @__PURE__ */ o("span", {})]
-    }), g && /* @__PURE__ */ m(x, {
+    }), g && /* @__PURE__ */ n(x, {
       children: [t && /* @__PURE__ */ o(I, {
-        env: i,
+        env: a,
         setEnv: t,
         storage: e
       }), p && /* @__PURE__ */ o(v, {
-        sdkKey: s,
+        sdkKey: m,
         setSdkKey: p,
         storage: e
       }), r && /* @__PURE__ */ o(B, {
         sdk: r,
         storage: e,
-        event: a,
+        event: i,
         setEvent: l
       }), !c && r && /* @__PURE__ */ o(u, {
         sdk: r,
@@ -80,5 +76,5 @@ const A = /* @__PURE__ */ n("div")({
   });
 };
 export {
-  P as Developer
+  G as Developer
 };

package/lib/utils/debug/components/eventInput.js

@@ -1,27 +1,26 @@
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as o } from "react/jsx-runtime";
 import { useStore as d } from "@nanostores/react";
 import "@streamlayer/sdk-web-core";
-import { InputField as m } from "./styles.js";
-import "@linaria/react";
-const I = ({ sdk: t, storage: a, event: e, setEvent: l }) => {
+import { InputField as u } from "./styles.js";
+const y = ({ sdk: t, storage: a, event: e, setEvent: l }) => {
   var i;
   const s = d(t.sdkStore.providerStreamId), r = d(t.sdkStore.organizationSettings), c = !((i = r == null ? void 0 : r.data) != null && i.provider);
-  return /* @__PURE__ */ o("div", { children: /* @__PURE__ */ n(m, { children: [
-    /* @__PURE__ */ n("label", { children: [
+  return /* @__PURE__ */ n("div", { children: /* @__PURE__ */ o(u, { children: [
+    /* @__PURE__ */ o("label", { children: [
       c ? "Use StreamLayer event ids" : "Use your provider event ids",
       ", ",
-      /* @__PURE__ */ n("b", { children: [
+      /* @__PURE__ */ o("b", { children: [
         "currently configured (",
         s,
         ")"
       ] })
     ] }),
-    /* @__PURE__ */ o("input", { type: "text", value: e, onChange: (p) => l(p.target.value) }),
-    /* @__PURE__ */ o("button", { onClick: () => {
+    /* @__PURE__ */ n("input", { type: "text", value: e, onChange: (p) => l(p.target.value) }),
+    /* @__PURE__ */ n("button", { onClick: () => {
       t.createEventSession(e), a.setEvent(e);
     }, disabled: s === e, children: "set" })
   ] }) });
 };
 export {
-  I as EventInput
+  y as EventInput
 };

package/lib/utils/debug/components/sdkKey.js

@@ -1,14 +1,13 @@
 import { jsx as t, jsxs as l } from "react/jsx-runtime";
 import { useState as u } from "react";
-import { InputField as m } from "./styles.js";
-import "@linaria/react";
-const b = ({
-  sdkKey: r,
-  setSdkKey: i,
-  storage: n
+import { InputField as c } from "./styles.js";
+const h = ({
+  sdkKey: n,
+  setSdkKey: r,
+  storage: i
 }) => {
-  const [e, o] = u(r);
-  return /* @__PURE__ */ t("div", { children: /* @__PURE__ */ l(m, { children: [
+  const [e, o] = u(n);
+  return /* @__PURE__ */ t("div", { children: /* @__PURE__ */ l(c, { children: [
     /* @__PURE__ */ t("label", { children: "SDK Key" }),
     /* @__PURE__ */ t(
       "input",
@@ -21,10 +20,10 @@ const b = ({
       }
     ),
     /* @__PURE__ */ t("button", { onClick: () => {
-      n.setSdkKey(e), i(e);
+      i.setSdkKey(e), r(e);
     }, children: "set" })
   ] }) });
 };
 export {
-  b as SdkKey
+  h as SdkKey
 };