@streamlayer/react-ui 0.5.8 → 0.23.0

package/lib/lib/notifications/index.js

@@ -0,0 +1,28 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useStore as p } from "@nanostores/react";
+import { NotificationComponent as n } from "./notification/index.js";
+import { NotificationsContainer as e } from "./styles.js";
+import "@streamlayer/sdk-web-notifications";
+import "react";
+import "./notification/onboarding-inapp/index.js";
+import "./notification/onboarding-inapp/styles.js";
+import "@linaria/react";
+import "./notification/question-inapp/index.js";
+import "../../icon-exit-d3f9fc80.js";
+import "./notification/question-inapp/styles.js";
+import "./notification/styles.js";
+const S = ({ notificationsStore: i }) => {
+  const o = p(i);
+  return /* @__PURE__ */ r(e, { children: o == null ? void 0 : o.map((t, m) => /* @__PURE__ */ r(
+    n,
+    {
+      index: m,
+      total: o.length,
+      ...t
+    },
+    t.id
+  )) });
+};
+export {
+  S as Notifications
+};

package/lib/lib/notifications/notification/index.js

@@ -0,0 +1,36 @@
+import { jsx as n } from "react/jsx-runtime";
+import { NotificationType as i } from "@streamlayer/sdk-web-notifications";
+import { useRef as f, useEffect as s } from "react";
+import { OnBoardingInApp as N } from "./onboarding-inapp/index.js";
+import { QuestionInApp as e } from "./question-inapp/index.js";
+import { NotificationContainer as a } from "./styles.js";
+import "./onboarding-inapp/styles.js";
+import "@linaria/react";
+import "../../../icon-exit-d3f9fc80.js";
+import "./question-inapp/styles.js";
+const l = {
+  [i.ONBOARDING]: N,
+  [i.QUESTION]: e
+}, y = ({
+  index: t,
+  total: m,
+  ...r
+}) => {
+  const o = f(null), p = l[r.type] || e;
+  return s(() => {
+    o.current !== null && r.hiding && o.current.animate([{ right: "0" }, { right: "-100%" }], {
+      duration: 300,
+      fill: "forwards"
+    });
+  }, [r.hiding]), /* @__PURE__ */ n(
+    a,
+    {
+      ref: o,
+      style: { zIndex: t + 1, transform: `translateY(${100 * (m - t - 1)}%)` },
+      children: /* @__PURE__ */ n(p, { ...r })
+    }
+  );
+};
+export {
+  y as NotificationComponent
+};

package/lib/lib/notifications/notification/onboarding-inapp/index.js

@@ -0,0 +1,25 @@
+import { jsxs as n, jsx as i, Fragment as t } from "react/jsx-runtime";
+import { Container as g, CloseBtn as s, IconClose as C, BackgroundBlock as M, Icon as p, ContentWrap as m, SponsorLogo as Z, SponsorText as b, ContentTitle as D, ContentSubtitle as S, ActionBtn as h } from "./styles.js";
+import "@linaria/react";
+const W = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikdyb3VwIDQ2NSI+CjxyZWN0IGlkPSJSZWN0YW5nbGUgMzY4IiB4PSIxLjI1IiB3aWR0aD0iMTIuMzc0NCIgaGVpZ2h0PSIxLjc2Nzc3IiByeD0iMC44ODM4ODQiIHRyYW5zZm9ybT0icm90YXRlKDQ1IDEuMjUgMCkiIGZpbGw9IndoaXRlIi8+CjxyZWN0IGlkPSJSZWN0YW5nbGUgMzY5IiB5PSI4Ljc1IiB3aWR0aD0iMTIuMzc0NCIgaGVpZ2h0PSIxLjc2Nzc3IiByeD0iMC44ODM4ODQiIHRyYW5zZm9ybT0icm90YXRlKC00NSAwIDguNzUpIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+Cjwvc3ZnPgo=", P = ({
+  close: I,
+  action: l,
+  data: { icon: c, header: a, title: e, subtitle: r, graphicBg: d, sponsorLogo: o }
+}) => /* @__PURE__ */ n(g, { children: [
+  /* @__PURE__ */ i(s, { onClick: I, children: /* @__PURE__ */ i(C, { alt: "icon-close-onboarding-inapp", src: W }) }),
+  /* @__PURE__ */ i(M, { style: { backgroundImage: `url(${d || ""})` }, children: c && /* @__PURE__ */ i(p, { alt: "onboarding-inapp-icon", src: c }) }),
+  /* @__PURE__ */ n(m, { children: [
+    /* @__PURE__ */ n("div", { children: [
+      /* @__PURE__ */ i("div", { children: o ? /* @__PURE__ */ n(t, { children: [
+        /* @__PURE__ */ i(Z, { alt: "sponsor-logo", src: o }),
+        /* @__PURE__ */ i(b, { children: "Presents" })
+      ] }) : a || "" }),
+      /* @__PURE__ */ i(D, { children: e || "" }),
+      /* @__PURE__ */ i(S, { children: r || "" })
+    ] }),
+    /* @__PURE__ */ i(h, { onClick: l, children: "Play" })
+  ] })
+] });
+export {
+  P as OnBoardingInApp
+};

package/lib/lib/notifications/notification/onboarding-inapp/styles.js

@@ -0,0 +1,77 @@
+import { styled as o } from "@linaria/react";
+const n = o.div`
+  background-color: var(--color-transparent-onboarding-inapp);
+  max-height: 120px;
+`, r = o.div`
+  background-repeat: no-repeat;
+  background-size: contain;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  width: 72px;
+  display: flex;
+  align-items: center;
+`, e = o.img`
+  width: 56px;
+  margin-left: 8px;
+`, i = o.div`
+  padding: 16px 8px 16px 0px;
+  margin-right: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+`, p = o.img`
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+`, a = o.span`
+  font-style: italic;
+  font-weight: 600;
+  font-size: 8px;
+  text-transform: uppercase;
+`, s = o.div`
+  margin-top: 8px;
+  margin-bottom: 2px;
+  font-size: 14px;
+`, c = o.div`
+  color: var(--color-grey-primary-onboarding-inapp);
+`, d = o.button`
+  border: none;
+  outline: none;
+  background-color: var(--color-green-primary-btn);
+  padding: 8px 16px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  border-radius: 24px;
+`, x = o.button`
+  position: absolute;
+  right: 8px;
+  top: 4px;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  padding: 5px;
+  color: #fff;
+  cursor: pointer;
+  border-radius: 50%;
+`, g = o.img`
+  width: 10px;
+  height: 10px;
+`;
+export {
+  d as ActionBtn,
+  r as BackgroundBlock,
+  x as CloseBtn,
+  n as Container,
+  c as ContentSubtitle,
+  s as ContentTitle,
+  i as ContentWrap,
+  e as Icon,
+  g as IconClose,
+  p as SponsorLogo,
+  a as SponsorText
+};

package/lib/lib/notifications/notification/question-inapp/index.js

@@ -0,0 +1,23 @@
+import { jsxs as t, jsx as n } from "react/jsx-runtime";
+import { useCallback as a } from "react";
+import { c as s } from "../../../../icon-exit-d3f9fc80.js";
+import { Container as d, IconWrap as m, Icon as C, Content as h, TitleWrap as I, Title as f, CloseBtnWrap as k, CloseBtn as u, CloseIcon as x } from "./styles.js";
+import "@linaria/react";
+const B = ({ close: o, action: p, data: { color: r, icon: i, title: c } }) => {
+  const e = a(
+    (l) => {
+      l.stopPropagation(), o == null || o();
+    },
+    [o]
+  );
+  return /* @__PURE__ */ t(d, { onClick: p, children: [
+    /* @__PURE__ */ n(m, { style: r ? { backgroundColor: r } : {}, children: i && /* @__PURE__ */ n(C, { alt: "in-app-icon", src: i }) }),
+    /* @__PURE__ */ t(h, { children: [
+      /* @__PURE__ */ n(I, { children: /* @__PURE__ */ n(f, { id: "in-app-title", children: c || "" }) }),
+      /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(u, { onClick: e, children: /* @__PURE__ */ n(x, { alt: "close-in-app-icon", src: s }) }) })
+    ] })
+  ] });
+};
+export {
+  B as QuestionInApp
+};

package/lib/lib/notifications/notification/question-inapp/styles.js

@@ -0,0 +1,61 @@
+import { styled as e } from "@linaria/react";
+const o = e.div`
+  border: 1px solid var(--color-blue-primary);
+  background-color: var(--color-bg-transparent);
+  cursor: pointer;
+  overflow: hidden;
+`, n = e.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 14px;
+  background-color: var(--color-blue-primary);
+`, i = e.img`
+  max-width: 40px;
+  max-height: 40px;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+`, r = e.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+`, d = e.div`
+  padding-left: 20px;
+  padding-right: 5px;
+  font-weight: 700;
+  font-size: 14px;
+  flex: 1;
+`, l = e.div`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-word;
+  text-overflow: ellipsis;
+`, a = e.div`
+  padding: 20px;
+`, c = e.button`
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`, s = e.img`
+  width: 24px;
+  height: 24px;
+`;
+export {
+  c as CloseBtn,
+  a as CloseBtnWrap,
+  s as CloseIcon,
+  o as Container,
+  r as Content,
+  i as Icon,
+  n as IconWrap,
+  l as Title,
+  d as TitleWrap
+};

package/lib/lib/notifications/notification/styles.js

@@ -0,0 +1,32 @@
+import { styled as i } from "@linaria/react";
+const r = i.div`
+  position: absolute;
+  right: 0;
+  transition: transform 0.3s ease;
+  width: 100%;
+
+  > div {
+    border-radius: 8px;
+    width: 100%;
+    backdrop-filter: blur(10px);
+    display: flex;
+    color: var(--color-white);
+    animation: slide-in 0.3s ease-in;
+    position: relative;
+    box-sizing: border-box;
+    user-select: none;
+  }
+
+  @keyframes slide-in {
+    from {
+      right: -100%;
+    }
+
+    to {
+      right: 0;
+    }
+  }
+`;
+export {
+  r as NotificationContainer
+};

package/lib/lib/notifications/styles.js

@@ -0,0 +1,15 @@
+import { styled as t } from "@linaria/react";
+const o = t.div`
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  max-width: 600px;
+  width: 100%;
+
+  > div {
+    margin-bottom: 10px;
+  }
+`;
+export {
+  o as NotificationsContainer
+};

package/lib/lib/theme/constants.js

@@ -0,0 +1,38 @@
+const R = {
+  BG_TRANSPARENT: "rgba(0,0,0, .8)",
+  BG_TRANSPARENT_VOTE_CONTAINER: "rgba(10, 14, 19, 0.8)",
+  BG_TRANSPARENT_ITEM: "rgba(0, 0, 0, 0.7)",
+  BG_TRANSPARENT_ITEM_VOTE: "rgba(255, 255, 255, 0.1)",
+  BG_TRANSPARENT_ITEM_SUCCESS: "rgba(0, 139, 251, 0.2)",
+  BG_TRANSPARENT_ITEM_ERROR: "rgba(205, 37, 37, 0.2)",
+  BG_TRANSPARENT_VOTE_PROGRESS: "rgba(255, 255, 255, 0.2)",
+  BG_TRANSPARENT_VOTE_PROGRESS_SUCCESS: "rgba(60, 139, 251, 0.5)",
+  BG_TRANSPARENT_VOTE_PROGRESS_ERROR: "rgba(205, 37, 37, 0.5)",
+  BG_TRANSPARENT_USER_CONTAINER: "rgba(255, 255, 255, 0.05)",
+  BG_TRANSPARENT_ONBOARDING_INAPP: "rgba(138, 159, 182, 0.2)",
+  BLUE_PRIMARY: "#1589EE",
+  RED_PRIMARY: "#CD2525",
+  RED_SECONDARY: "#EB5757",
+  BLUE_QUESTION_ACTION_BTN: "#1589ee",
+  WHITE: "#FFFFFF",
+  GREY_1: "#909395",
+  GREY_2: "#22262b",
+  GREY_3: "#2d3135",
+  GREY_4: "#53565a",
+  GREY_PRIMARY_ONBOARDING_INAPP: "#B5B7B8",
+  BLACK_1: "#161a1f",
+  GREEN_1: "#F7B801",
+  RED_1: "#A30000",
+  RED_2: "#FF4170",
+  GREY_PRIMARY: "#909395",
+  DIVIDER_COLOR_PRIMARY: "#2d3135",
+  DIVIDER_COLOR_SECONDARY: "#53565a",
+  GREEN_PRIMARY_BTN: "#009B77"
+}, _ = {
+  FAMILY: "Roboto, sans-serif",
+  COLOR: "#fff"
+};
+export {
+  R as COLORS,
+  _ as FONT
+};

package/lib/lib/theme/index.js

@@ -0,0 +1,8 @@
+import { jsx as m } from "react/jsx-runtime";
+import { theme as e } from "./theme.js";
+import "@linaria/core";
+import "./constants.js";
+const a = ({ children: r }) => /* @__PURE__ */ m("div", { className: e, children: r });
+export {
+  a as StreamLayerThemeProvider
+};

package/lib/lib/theme/theme.js

@@ -0,0 +1,27 @@
+import { css as R } from "@linaria/core";
+import { COLORS as r, FONT as o } from "./constants.js";
+const _ = R`
+  --color-bg-transparent: ${r.BG_TRANSPARENT};
+  --color-transparent-vote-container: ${r.BG_TRANSPARENT_VOTE_CONTAINER};
+  --color-transparent-item: ${r.BG_TRANSPARENT_ITEM};
+  --color-transparent-item-success: ${r.BG_TRANSPARENT_ITEM_SUCCESS};
+  --color-transparent-item-error: ${r.BG_TRANSPARENT_ITEM_ERROR};
+  --color-bg-transparent-item-vote: ${r.BG_TRANSPARENT_ITEM_VOTE};
+  --color-transparent-user-container: ${r.BG_TRANSPARENT_USER_CONTAINER};
+  --color-transparent-onboarding-inapp: ${r.BG_TRANSPARENT_ONBOARDING_INAPP};
+  --color-blue-primary: ${r.BLUE_PRIMARY};
+  --color-red-primary: ${r.RED_PRIMARY};
+  --color-red-secondary: ${r.RED_SECONDARY};
+  --color-blue-question-action-btn: ${r.BLUE_QUESTION_ACTION_BTN};
+  --color-white: ${r.WHITE};
+  --color-red-2: ${r.RED_2};
+  --color-grey-primary: ${r.GREY_PRIMARY};
+  --color-divider-color-primary: ${r.DIVIDER_COLOR_PRIMARY};
+  --color-divider-color-secondary: ${r.DIVIDER_COLOR_SECONDARY};
+  --color-green-primary-btn: ${r.GREEN_PRIMARY_BTN};
+  --font-family: ${o.FAMILY};
+  --font-color: ${o.COLOR};
+`;
+export {
+  _ as theme
+};

package/lib/lib/user-account/index.js

@@ -0,0 +1,27 @@
+import { jsxs as D, jsx as I } from "react/jsx-runtime";
+import { useStore as x } from "@nanostores/react";
+import { abbreviate as o } from "../../utils/common.js";
+import { Container as u, BackBtn as y, ContentWrap as l, UserContainer as n, UserAvatar as t, AvatarPlaceholder as L, UserName as r, LogoutBtn as m, LogoutIcon as z } from "./styles.js";
+import "@linaria/react";
+const S = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNyAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikdyb3VwIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTEyLjUzOTYgMTIuNDMxTDE1Ljg2MDMgOS4wMDE2OUwxMi41Mzk2IDUuNTcyMzkiIHN0cm9rZT0iI0VCNTc1NyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBpZD0iVmVjdG9yXzIiIGQ9Ik0xNS44NjAyIDkuMDAxNTlINS41NzIyNyIgc3Ryb2tlPSIjRUI1NzU3IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGlkPSJWZWN0b3JfMyIgZD0iTTEyLjQzMSAxTDMuMjg2MiAxLjAwMjI5QzIuMDI0MjIgMS4wMDM0MyAxIDIuMDI2NTEgMSAzLjI4ODQ5VjE0LjcxMzhDMSAxNS4zMjAxIDEuMjQwODcgMTUuOTAxNiAxLjY2OTYxIDE2LjMzMDRDMi4wOTgzNiAxNi43NTkxIDIuNjc5ODcgMTcgMy4yODYyIDE3SDEyLjUzOTYiIHN0cm9rZT0iI0VCNTc1NyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo=", d = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxMiAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggaWQ9Ikljb24gLyBjaGV2cm9uLmxlZnQiIGQ9Ik0wIDEwQzAgMTAuMzgxOCAwLjE0NTk5NiAxMC43MDc1IDAuNDQ5MjE5IDEwLjk5OTVMOS4yMDg5OCAxOS41Njg0QzkuNDQ0ODIgMTkuODE1NCA5Ljc1OTI4IDE5LjkzOSAxMC4xMTg3IDE5LjkzOUMxMC44NDg2IDE5LjkzOSAxMS40MjE0IDE5LjM3NzQgMTEuNDIxNCAxOC42MzYyQzExLjQyMTQgMTguMjc2OSAxMS4yNzU0IDE3Ljk1MTIgMTEuMDI4MyAxNy43MDQxTDMuMTMzMyAxMEwxMS4wMjgzIDIuMjk1OUMxMS4yNzU0IDIuMDM3NiAxMS40MjE0IDEuNzExOTEgMTEuNDIxNCAxLjM1MjU0QzExLjQyMTQgMC42MjI1NTkgMTAuODQ4NiAwLjA2MTAzNTIgMTAuMTE4NyAwLjA2MTAzNTJDOS43NTkyOCAwLjA2MTAzNTIgOS40NDQ4MiAwLjE4NDU3IDkuMjA4OTggMC40MzE2NDFMMC40NDkyMTkgOS4wMDA0OUMwLjE0NTk5NiA5LjI5MjQ4IDAuMDExMjMwNSA5LjYxODE2IDAgMTBaIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjYiLz4KPC9zdmc+Cg==", k = ({ toggleAccountPage: i, logout: N, store: A }) => {
+  var j, a, c;
+  const { data: M } = x(A), g = (j = M == null ? void 0 : M.summary) == null ? void 0 : j.avatar, T = (a = M == null ? void 0 : M.summary) == null ? void 0 : a.name;
+  return /* @__PURE__ */ D(u, { children: [
+    /* @__PURE__ */ I(y, { onClick: () => i(!1), children: /* @__PURE__ */ I("img", { alt: "back-icon", src: d }) }),
+    /* @__PURE__ */ D(l, { children: [
+      /* @__PURE__ */ I("span", { children: "Profile" }),
+      /* @__PURE__ */ D(n, { children: [
+        g && /* @__PURE__ */ I(t, { alt: "user-avatar", src: g }),
+        !g && /* @__PURE__ */ I(L, { children: o(T || "") }),
+        /* @__PURE__ */ I(r, { children: (c = M == null ? void 0 : M.summary) == null ? void 0 : c.name })
+      ] })
+    ] }),
+    /* @__PURE__ */ D(m, { onClick: N, children: [
+      /* @__PURE__ */ I(z, { alt: "logout-icon", src: S }),
+      /* @__PURE__ */ I("span", { children: "Log out" })
+    ] })
+  ] });
+};
+export {
+  k as UserAccount
+};

package/lib/lib/user-account/styles.js

@@ -0,0 +1,80 @@
+import { styled as t } from "@linaria/react";
+const e = t.div`
+  display: flex;
+  flex-direction: column;
+  font-size: 18px;
+  font-weight: 700;
+  color: #fff;
+  padding: 24px 15px;
+  position: relative;
+  height: 100%;
+`, o = t.span`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 30px;
+`, r = t.div`
+  margin-top: 31px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`, i = t.img`
+  width: 122px;
+  height: 122px;
+  border-radius: 50%;
+`, a = t.span`
+  font-size: 24px;
+  font-weight: 600;
+  margin-top: 24px;
+`, p = t.button`
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  left: 24px;
+  top: 24px;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+`, s = t.button`
+  padding: 16px;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 0px;
+  display: flex;
+  color: var(--color-red-secondary);
+  margin-left: 40px;
+`, c = t.img`
+  margin-right: 16px;
+`, d = t.div`
+  background: #2d6ffd;
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  text-align: center;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 40px;
+  flex-shrink: 0;
+`;
+export {
+  d as AvatarPlaceholder,
+  p as BackBtn,
+  e as Container,
+  o as ContentWrap,
+  s as LogoutBtn,
+  c as LogoutIcon,
+  i as UserAvatar,
+  r as UserContainer,
+  a as UserName
+};

package/lib/utils/common.js

@@ -0,0 +1,4 @@
+const t = (e) => e.split(/\s+/).map((p) => p[0]).join("").toUpperCase();
+export {
+  t as abbreviate
+};

package/lib/utils/components/bypassLogin.js

@@ -0,0 +1,63 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { styled as c } from "@linaria/react";
+import { useState as a } from "react";
+const d = c.div`
+  display: flex;
+  background: rgb(29, 123, 255);
+  padding: 4px 6px;
+  border-radius: 5px;
+  font-size: 16px;
+
+  input {
+    display: block;
+    width: 100%;
+    color: #fff;
+    font-size: 24px;
+    border: none;
+    padding: 2px;
+    padding-left: 10px;
+    background: linear-gradient(136.45deg, rgba(60, 139, 251, 0.3) 0.57%, rgba(0, 79, 190, 0.3) 100%);
+    border: 1px solid transparent;
+    outline: none;
+
+    &:focus {
+      border-color: rgb(29, 123, 255);
+    }
+  }
+
+  label {
+    margin-right: 4px;
+  }
+
+  button {
+    width: 150px;
+    color: #fff;
+    background: transparent;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    border: none;
+    text-transform: uppercase;
+  }
+
+  margin-bottom: 2px;
+`, x = ({ sdk: l, storage: t }) => {
+  const [n, s] = a(t.getSchema() || ""), [o, p] = a(t.getToken() || "");
+  return /* @__PURE__ */ i("div", { children: [
+    /* @__PURE__ */ i(d, { children: [
+      /* @__PURE__ */ e("label", { children: "Bypass Schema" }),
+      /* @__PURE__ */ e("input", { type: "text", value: n, onChange: (r) => s(r.target.value) }),
+      /* @__PURE__ */ e("button", { style: { visibility: "hidden" }, children: "login" })
+    ] }),
+    /* @__PURE__ */ i(d, { children: [
+      /* @__PURE__ */ e("label", { children: "Bypass Token" }),
+      /* @__PURE__ */ e("input", { type: "text", disabled: !n, value: o, onChange: (r) => p(r.target.value) }),
+      /* @__PURE__ */ e("button", { disabled: !n || !o, onClick: async () => {
+        await l.authorizationBypass(n, o), t.setSchema(n), t.setToken(o);
+      }, children: "login" })
+    ] })
+  ] });
+};
+export {
+  x as BypassLogin
+};

package/lib/utils/components/developer.js

@@ -0,0 +1,76 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { useMemo as l, useState as c } from "react";
+import { useStore as m } from "@nanostores/react";
+import { styled as n } from "@linaria/react";
+import { EventInput as x } from "./eventInput.js";
+import { BypassLogin as f } from "./bypassLogin.js";
+import { DeveloperStorage as u } from "../storage.js";
+import "@streamlayer/sdk-web-storage";
+const g = n.div`
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  padding: 10px;
+  padding-right: 60px;
+  max-width: 600px;
+`, h = n.div`
+  flex-direction: column;
+  gap: 5px;
+`, b = n.button`
+  position: absolute;
+  z-index: 10000;
+  bottom: 10px;
+  right: 10px;
+  width: 40px;
+  height: 40px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  background: rgb(29, 123, 255);
+  border: none;
+  border-radius: 6px;
+  padding: 10px;
+  cursor: pointer;
+  transition: all 0.1s ease;
+
+  &:hover {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  &:active {
+    transform: translateY(4px);
+  }
+
+  &[data-answeredCorrect='false'] {
+    span:nth-child(odd) {
+      opacity: 0;
+    }
+  }
+
+  span {
+    display: block;
+    background: #fff;
+    border-radius: 4px;
+    width: 100%;
+    height: 4px;
+  }
+`, C = ({ sdk: o }) => {
+  var d;
+  const p = l(() => new u(), []), [i, s] = c(!1), { organizationSettings: t } = m(o.sdkStore);
+  return /* @__PURE__ */ r(g, { children: [
+    /* @__PURE__ */ r(b, { "data-opened": i.toString(), onClick: () => s((a) => !a), children: [
+      /* @__PURE__ */ e("span", {}),
+      /* @__PURE__ */ e("span", {}),
+      /* @__PURE__ */ e("span", {})
+    ] }),
+    /* @__PURE__ */ r(h, { style: { display: i ? "flex" : "none" }, children: [
+      /* @__PURE__ */ e(x, { sdk: o, useStreamLayerEventsIds: !((d = t == null ? void 0 : t.data) != null && d.provider), storage: p }),
+      /* @__PURE__ */ e(f, { sdk: o, storage: p })
+    ] })
+  ] });
+};
+export {
+  C as Developer
+};