@streamlayer/react-ui 0.5.8 → 0.23.0

package/{src → lib}/lib/gamification/vote/components/voting-header/components/points/styles.js

@@ -1,30 +1,32 @@
-import styled from '@emotion/styled';
-export const Container = styled.div `
+import { styled as i } from "@linaria/react";
+const n = i.div`
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   margin-right: 10px;
   font-weight: 700;
-`;
-export const Title = styled.div `
+`, e = i.div`
   color: rgba(255, 255, 255, 0.8);
   font-size: 8px;
   line-height: 12px;
   text-align: right;
-`;
-export const PointContainer = styled.div `
+`, o = i.div`
   text-align: right;
-`;
-export const Point = styled.span `
+`, l = i.span`
   color: rgba(255, 255, 255, 0.9);
   font-size: 14px;
   line-height: 16px;
   margin-right: 2px;
-`;
-export const PointLabel = styled.span `
+`, r = i.span`
   color: white;
   font-size: 10px;
   font-weight: 600;
   line-height: 16px;
 `;
-//# sourceMappingURL=styles.js.map
+export {
+  n as Container,
+  l as Point,
+  o as PointContainer,
+  r as PointLabel,
+  e as Title
+};

package/lib/lib/gamification/vote/components/voting-header/components/timer/index.js

@@ -0,0 +1,28 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useEffect as R } from "react";
+import { CountdownCircleTimer as m } from "react-countdown-circle-timer";
+import { COLORS as r } from "../../../../../../theme/constants.js";
+import { RemainingTime as s } from "./styles.js";
+import "@linaria/react";
+const E = [r.BLUE_PRIMARY, r.GREEN_1, r.RED_1], T = [10, 6, 0], _ = 30, l = 32, I = 4, O = 0, h = ({ isPlaying: i = !0, duration: n = _, setTimeToExpire: o }) => {
+  const c = ({ remainingTime: t }) => /* @__PURE__ */ e(s, { style: { color: t ? "inherit" : void 0 }, children: t });
+  return R(() => {
+    o(!1);
+  }, [o]), /* @__PURE__ */ e(
+    m,
+    {
+      isPlaying: i,
+      duration: n,
+      colors: E,
+      colorsTime: T,
+      size: l,
+      strokeWidth: I,
+      trailStrokeWidth: O,
+      onComplete: () => o(!0),
+      children: c
+    }
+  );
+};
+export {
+  h as Timer
+};

package/lib/lib/gamification/vote/components/voting-header/components/timer/styles.js

@@ -0,0 +1,8 @@
+import { styled as o } from "@linaria/react";
+const e = o.div`
+  color: var(--color-red-2);
+  font-size: 12px;
+`;
+export {
+  e as RemainingTime
+};

package/lib/lib/gamification/vote/components/voting-header/index.js

@@ -0,0 +1,44 @@
+import { jsxs as N, jsx as M, Fragment as O } from "react/jsx-runtime";
+import { QuestionType as j } from "@streamlayer/sdk-web-types";
+import { c as E } from "../../../../../icon-exit-d3f9fc80.js";
+import { Timer as k } from "./components/timer/index.js";
+import { Container as C, RightBlock as w, Interactive as Y, ReactionIconWrap as c, ReactionIcon as y, ExitBtn as o, ExitIcon as r, Logo as a } from "./styles.js";
+import { Points as z } from "./components/points/index.js";
+import "react";
+import "react-countdown-circle-timer";
+import "../../../../theme/constants.js";
+import "./components/timer/styles.js";
+import "@linaria/react";
+import "./components/points/styles.js";
+const n = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxnIGlkPSJUcm9waHkiPgogICAgICA8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMi43NjkxNiAzLjUwMDAyQzIuNzY5MTYgNC40OTc4NiAyLjk0NzA1IDUuMzgzNDggMy4zMDI4MiA2LjE1NjkyQzIuNjI0OTMgNi4wMTg0NyAyLjA1ODgzIDUuNzQ4NzIgMS42MDQ1IDUuMzQ3NjhDMS4xNTAxNyA0Ljk0NjYzIDAuOTIzMDA4IDQuNTU5OTIgMC45MjMwMDggNC4xODc1MlYzLjUwMDAySDIuNzY5MTZaTTExLjA3NjggMy41MDAwMlY0LjE4NzUyQzExLjA3NjggNC41NTk5MiAxMC44NDk3IDQuOTQ2NjMgMTAuMzk1MyA1LjM0NzY4QzkuOTQxIDUuNzQ4NzIgOS4zNzQ5IDYuMDE4NDcgOC42OTcwMSA2LjE1NjkyQzkuMDUyNzggNS4zODM0OCA5LjIzMDY2IDQuNDk3ODYgOS4yMzA2NiAzLjUwMDAySDExLjA3NjhaTTEyIDQuMTg3NVYzLjI3MDgzQzEyIDMuMDc5ODYgMTEuOTMyNyAyLjkxNzU0IDExLjc5ODEgMi43ODM4NUMxMS42NjM1IDIuNjUwMTcgMTEuNSAyLjU4MzMzIDExLjMwNzcgMi41ODMzM0g5LjIzMDc3VjEuODk1ODNDOS4yMzA3NyAxLjU4MDczIDkuMTE3NzkgMS4zMTA5OCA4Ljg5MTgzIDEuMDg2NTlDOC42NjU4NiAwLjg2MjE5NSA4LjM5NDIzIDAuNzUgOC4wNzY5MiAwLjc1SDMuOTIzMDhDMy42MDU3NyAwLjc1IDMuMzM0MTQgMC44NjIxOTUgMy4xMDgxNyAxLjA4NjU5QzIuODgyMjEgMS4zMTA5OCAyLjc2OTIzIDEuNTgwNzMgMi43NjkyMyAxLjg5NTgzVjIuNTgzMzNIMC42OTIzMDhDMC40OTk5OTkgMi41ODMzMyAwLjMzNjUzOSAyLjY1MDE3IDAuMjAxOTIzIDIuNzgzODVDMC4wNjczMDcgMi45MTc1NCAwIDMuMDc5ODYgMCAzLjI3MDgzVjQuMTg3NUMwIDQuNTI2NDggMC4wOTk3NTg2IDQuODY3ODQgMC4yOTkyNzkgNS4yMTE1OUMwLjQ5ODc5OSA1LjU1NTM0IDAuNzY4MDI3IDUuODY1NjcgMS4xMDY5NyA2LjE0MjU4QzEuNDQ1OTIgNi40MTk0OSAxLjg2MTc4IDYuNjUyMjMgMi4zNTQ1NyA2Ljg0MDgyQzIuODQ3MzYgNy4wMjk0MSAzLjM2NTM4IDcuMTM1NjMgMy45MDg2NSA3LjE1OTUxQzQuMTEwNTggNy40MTczMiA0LjMzODk0IDcuNjQ0MSA0LjU5Mzc1IDcuODM5ODRDNC43NzY0NCA4LjAwMjE3IDQuOTAyNjQgOC4xNzUyNCA0Ljk3MjM2IDguMzU5MDVDNS4wNDIwNyA4LjU0Mjg2IDUuMDc2OTIgOC43NTY1MSA1LjA3NjkyIDlDNS4wNzY5MiA5LjI1NzgxIDUuMDAzNjEgOS40NzUwNCA0Ljg1Njk3IDkuNjUxNjlDNC43MTAzNCA5LjgyODM0IDQuNDc1OTYgOS45MTY2NyA0LjE1Mzg1IDkuOTE2NjdDMy43OTMyNyA5LjkxNjY3IDMuNDcyMzYgMTAuMDI1MyAzLjE5MTExIDEwLjI0MjVDMi45MDk4NSAxMC40NTk3IDIuNzY5MjMgMTAuNzMzMSAyLjc2OTIzIDExLjA2MjVWMTEuNTIwOEMyLjc2OTIzIDExLjU4NzcgMi43OTA4NyAxMS42NDI2IDIuODM0MTMgMTEuNjg1NUMyLjg3NzQgMTEuNzI4NSAyLjkzMjY5IDExLjc1IDMgMTEuNzVIOUM5LjA2NzMxIDExLjc1IDkuMTIyNiAxMS43Mjg1IDkuMTY1ODYgMTEuNjg1NUM5LjIwOTEzIDExLjY0MjYgOS4yMzA3NyAxMS41ODc3IDkuMjMwNzcgMTEuNTIwOFYxMS4wNjI1QzkuMjMwNzcgMTAuNzMzMSA5LjA5MDE1IDEwLjQ1OTcgOC44MDg4OSAxMC4yNDI1QzguNTI3NjQgMTAuMDI1MyA4LjIwNjczIDkuOTE2NjcgNy44NDYxNSA5LjkxNjY3QzcuNTI0MDQgOS45MTY2NyA3LjI4OTY2IDkuODI4MzQgNy4xNDMwMyA5LjY1MTY5QzYuOTk2MzkgOS40NzUwNCA2LjkyMzA4IDkuMjU3ODEgNi45MjMwOCA5QzYuOTIzMDggOC43NTY1MSA2Ljk1NzkzIDguNTQyODYgNy4wMjc2NCA4LjM1OTA1QzcuMDk3MzYgOC4xNzUyNCA3LjIyMzU2IDguMDAyMTcgNy40MDYyNSA3LjgzOTg0QzcuNjYxMDYgNy42NDQxIDcuODg5NDIgNy40MTczMiA4LjA5MTM1IDcuMTU5NTFDOC42MzQ2MiA3LjEzNTYzIDkuMTUyNjQgNy4wMjk0MSA5LjY0NTQzIDYuODQwODJDMTAuMTM4MiA2LjY1MjIzIDEwLjU1NDEgNi40MTk0OSAxMC44OTMgNi4xNDI1OEMxMS4yMzIgNS44NjU2NyAxMS41MDEyIDUuNTU1MzQgMTEuNzAwNyA1LjIxMTU5QzExLjkwMDIgNC44Njc4NCAxMiA0LjUyNjQ4IDEyIDQuMTg3NVpNNS4wNzAzMyA1LjM4NDkxTDYuMDM4MyA0Ljg3NTAzTDcuMDA2MjcgNS4zODQ5MUw2LjgyMTQgNC4zMDQ5N0w3LjYwNDUxIDMuNTQwMTZMNi41MjIyOCAzLjM4MjZMNi4wMzgzIDIuNDAwMDNMNS41NTQzMSAzLjM4MjZMNC40NzIwOSAzLjU0MDE2TDUuMjU1MTkgNC4zMDQ5N0w1LjA3MDMzIDUuMzg0OTFaIiBmaWxsPSJ3aGl0ZSIvPgogICAgPC9nPgogIDwvc3ZnPgo=", t = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDIyIDIyIiBmaWxsPSJub25lIj4KICAgIDxwYXRoIGQ9Ik01LjUgMi43ODg2N1YxMi40MTM3QzUuNSAxMy4xNzI5IDQuODg0MjYgMTMuNzUgNC4xMjUgMTMuNzVIMS4zNzVDMC42MTU3NDIgMTMuNzUgMCAxMy4xMzQzIDAgMTIuNDEzN1YyLjgyNzM0QzAgMi4wNjgwOCAwLjYxNTc0MiAxLjQ5MTAyIDEuMzc1IDEuNDkxMDJINC4xMjVDNC44ODU1NSAxLjQxMzY3IDUuNSAxLjk5Mzc1IDUuNSAyLjc4ODY3Wk0yMiAxMi4zNzA3QzIyIDEzLjUwOTQgMjEuMDc3IDE0LjQzMjMgMTkuOTM3NSAxNC40MzIzSDEzLjY0MjZDMTQuNjIxIDE2LjA2MTMgMTUuMTI1OSAxNy45MDc3IDE1LjEyNTkgMTguNTU4MkMxNS4xMjUgMTkuNTcxNCAxNC4zMzAxIDIwLjYyNSAxMi45OTggMjAuNjI1QzEwLjI4NTQgMjAuNjI1IDExLjg2NTQgMTcuMzUyOSA4LjM0ODgzIDE0LjU0MDZMNy42NDg0NCAxMy45ODJDNy4xNDE0MSAxMy41NzM4IDYuODgzNTkgMTIuOTc2NiA2Ljg3OTMgMTIuMzc1QzYuODc4MjkgMTIuMzc0IDYuODc5MyAxMi4zNzUgNi44NzkzIDEyLjM3NUw2Ljg3NSA1LjVDNi44NzUgNC44NTExNyA3LjE4MDY0IDQuMjM5NzMgNy43IDMuODUwNDNMOS4xNjY5NSAyLjc1MDg2QzEwLjM1NTUgMS44NTYyNSAxMS44MDM1IDEuMzc1IDEzLjI5MDIgMS4zNzVIMTUuODEyNUMxNi45NTIgMS4zNzUgMTcuODc1IDIuMjk3NTQgMTcuODc1IDMuNDM2NjRDMTcuODc1IDMuNTkyODMgMTcuODU0NCAzLjc0MzU3IDE3LjgyMTUgMy44ODk5NkMxOC42NDg0IDQuMTU5MzcgMTkuMjUgNC45MjQyMiAxOS4yNSA1Ljg0Mzc1QzE5LjI1IDYuMjM2ODMgMTkuMTM0MSA2LjYwMDQzIDE4Ljk0MzIgNi45MTI4MUMxOS44OTg4IDcuMDg5ODQgMjAuNjI1IDcuOTI3NzMgMjAuNjI1IDguOTMzMkMyMC42MjUgOS40NzAzMSAyMC40MTQ4IDkuOTU1IDIwLjA3ODQgMTAuMzIyQzIxLjE0OTIgMTAuMzk0MSAyMiAxMS4yNzkzIDIyIDEyLjM3MDdaIiBmaWxsPSJ3aGl0ZSIvPgogIDwvc3ZnPgo=", R = ({
+  logo: g,
+  points: T,
+  questionAnswered: D,
+  questionAnsweredCorrectly: A,
+  questionType: I,
+  closeQuestion: L,
+  setTimeToExpire: i
+}) => {
+  const x = !D && I !== j.PREDICTION, u = D && I === j.TRIVIA, S = u && A, Q = u && !A, U = D && I === j.PREDICTION;
+  return /* @__PURE__ */ N(C, { children: [
+    /* @__PURE__ */ N(w, { children: [
+      /* @__PURE__ */ N(Y, { children: [
+        x && /* @__PURE__ */ M(k, { setTimeToExpire: i }),
+        S && /* @__PURE__ */ N(O, { children: [
+          /* @__PURE__ */ M(z, { points: T }),
+          /* @__PURE__ */ M(c, { isSuccess: !0, children: /* @__PURE__ */ M(y, { alt: "reaction-icon", src: n }) })
+        ] }),
+        Q && /* @__PURE__ */ N(O, { children: [
+          /* @__PURE__ */ M(z, { points: 0 }),
+          /* @__PURE__ */ M(c, { isSuccess: !1, children: /* @__PURE__ */ M(y, { alt: "reaction-icon", src: t }) })
+        ] }),
+        U && /* @__PURE__ */ M(z, { points: T })
+      ] }),
+      /* @__PURE__ */ M(o, { onClick: L, children: /* @__PURE__ */ M(r, { alt: "exit-icon", src: E }) })
+    ] }),
+    g && /* @__PURE__ */ M(a, { src: g })
+  ] });
+};
+export {
+  R as VotingHeader
+};

package/{src → lib}/lib/gamification/vote/components/voting-header/styles.js

@@ -1,23 +1,21 @@
-import styled from '@emotion/styled';
-export const Container = styled.div `
+import { styled as t } from "@linaria/react";
+const n = t.div`
   box-sizing: border-box;
   background-color: transparent;
-  color: ${(props) => props.theme.COLORS.WHITE};
+  color: var(--color-white);
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   padding: 0px 16px;
   align-items: center;
-`;
-export const Logo = styled.img `
+  min-height: 40px;
+`, o = t.img`
   width: 60px;
   height: 80%;
-`;
-export const RightBlock = styled.div `
+`, r = t.div`
   display: flex;
   align-items: center;
-`;
-export const ExitBtn = styled.button `
+`, c = t.button`
   border: none;
   outline: none;
   background-color: transparent;
@@ -27,28 +25,33 @@ export const ExitBtn = styled.button `
   height: 24px;
   margin-left: 25px;
   cursor: pointer;
-`;
-export const ExitIcon = styled.img `
+`, d = t.img`
   width: 24px;
   height: 24px;
-`;
-export const Interactive = styled.div `
+`, p = t.div`
   display: flex;
   align-items: center;
   padding: 4px 0px;
   margin-left: 10px;
-`;
-export const ReactionIconWrap = styled.div `
-  background-color: ${(props) => (props.isSuccess ? '#f1be1c' : '#da3732')};
+`, a = t.div`
+  background-color: ${(e) => e.isSuccess ? "#f1be1c" : "#da3732"};
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
-`;
-export const ReactionIcon = styled.img `
+`, s = t.img`
   width: 20px;
   height: 20px;
 `;
-//# sourceMappingURL=styles.js.map
+export {
+  n as Container,
+  c as ExitBtn,
+  d as ExitIcon,
+  p as Interactive,
+  o as Logo,
+  s as ReactionIcon,
+  a as ReactionIconWrap,
+  r as RightBlock
+};

package/lib/lib/gamification/vote/components/voting-option/index.js

@@ -0,0 +1,8 @@
+import "react/jsx-runtime";
+import "@streamlayer/sdk-web-types";
+import { V as n } from "../../../../../index-d5620d2c.js";
+import "./styles.js";
+import "@linaria/react";
+export {
+  n as VotingOption
+};

package/lib/lib/gamification/vote/components/voting-option/styles.js

@@ -0,0 +1,96 @@
+import { styled as r } from "@linaria/react";
+const o = r.div`
+  box-sizing: border-box;
+  border-radius: 4px;
+  background-color: var(--color-bg-transparent-item-vote);
+  border: 2px solid transparent;
+  position: relative;
+
+  &[data-questionAnswered='false'] {
+    &:hover {
+      border-color: inherit;
+    }
+  }
+`, t = r(o)`
+  border: 2px solid;
+
+  &[data-answeredCorrect='true'] {
+    background-color: var(--color-transparent-item-success);
+    border-color: var(--color-blue-primary);
+
+    &:hover {
+      border-color: var(--color-blue-primary);
+    }
+  }
+
+  &[data-answeredCorrect='false'] {
+    background-color: var(--color-transparent-item-error);
+    border-color: var(--color-red-primary);
+
+    &:hover {
+      border-color: var(--color-red-primary);
+    }
+  }
+`, i = r.div`
+  position: absolute;
+  left: 0;
+  border-radius: 2px;
+  z-index: 0;
+  height: 100%;
+  background-color: inherit;
+  transition: all 1s ease-in;
+`, n = r.button`
+  border-radius: 20px;
+  position: relative;
+  background-color: transparent;
+  padding: 0px 16px;
+  display: flex;
+  align-items: center;
+  border: none;
+  outline: none;
+  width: 100%;
+  color: var(--color-white);
+  font-weight: 700;
+  font-size: 14px;
+  height: 100%;
+  border-radius: 2px;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+  }
+`, a = r.img`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  margin-right: 8px;
+`, d = r.span`
+  overflow: hidden;
+  word-break: break-all;
+  padding: 12px 0px;
+  flex: 1;
+  text-align: left;
+`, s = r.span`
+  display: flex;
+`, c = r.div`
+  width: 16px;
+  height: 16px;
+  margin-left: 8px;
+`, l = r.div`
+  margin-left: 12px;
+`, p = r.img`
+  width: 16px;
+  height: 16px;
+`;
+export {
+  t as AnsweredContainer,
+  n as Button,
+  i as ButtonPct,
+  p as CheckIcon,
+  c as CheckIconWrap,
+  o as Container,
+  a as Icon,
+  s as Indicators,
+  l as Percentage,
+  d as Title
+};

package/lib/lib/gamification/vote/index.js

@@ -0,0 +1,51 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import { QuestionType as b } from "@streamlayer/sdk-web-types";
+import { useState as N, useCallback as s, useEffect as S } from "react";
+import { V as D, c as j } from "../../../index-d5620d2c.js";
+import { Container as p, Title as M, Options as h, Loader as Z, Feedback as u, FeedbackIcon as L, FeedbackTitle as z, FeedbackDescription as G } from "./styles.js";
+import "./components/voting-option/styles.js";
+import "@linaria/react";
+const A = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeT0iMC4wMDE5NTMxMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iMTIiIGZpbGw9IiNGODAwMjIiLz4KPHJlY3QgeD0iOC4yNSIgeT0iNy4wMDE5NSIgd2lkdGg9IjEyLjM3NDQiIGhlaWdodD0iMS43Njc3NyIgcng9IjAuODgzODg0IiB0cmFuc2Zvcm09InJvdGF0ZSg0NSA4LjI1IDcuMDAxOTUpIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSI3IiB5PSIxNS43NTIiIHdpZHRoPSIxMi4zNzQ0IiBoZWlnaHQ9IjEuNzY3NzciIHJ4PSIwLjg4Mzg4NCIgdHJhbnNmb3JtPSJyb3RhdGUoLTQ1IDcgMTUuNzUyKSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==", x = ({
+  title: a,
+  questionId: g,
+  options: t,
+  questionAnswered: l,
+  feedbackMessages: I,
+  questionAnsweredCorrectly: d,
+  questionType: n
+}) => {
+  const [m, r] = N(!1), o = s(
+    (c) => {
+      r(c);
+    },
+    [r]
+  );
+  return S(() => {
+    o(!1);
+  }, [t, o]), /* @__PURE__ */ e(p, { children: [
+    /* @__PURE__ */ i(M, { children: a }),
+    /* @__PURE__ */ e(h, { children: [
+      m && /* @__PURE__ */ i(Z, { children: "Loading..." }),
+      t.map((c) => /* @__PURE__ */ i(
+        D,
+        {
+          toggleIsLoadingSubmitAnswer: o,
+          questionId: g,
+          questionType: n,
+          ...c
+        },
+        c.id
+      ))
+    ] }),
+    l && n === b.TRIVIA && /* @__PURE__ */ e(u, { children: [
+      /* @__PURE__ */ i(L, { alt: "reaction-to-answer", src: d ? j : A }),
+      /* @__PURE__ */ e("div", { children: [
+        /* @__PURE__ */ i(z, { children: d ? I.correctFeedback.title : I.incorrectFeedback.title }),
+        /* @__PURE__ */ i(G, { children: d ? I.correctFeedback.description : I.incorrectFeedback.description })
+      ] })
+    ] })
+  ] });
+};
+export {
+  x as Vote
+};

package/{src → lib}/lib/gamification/vote/styles.js

@@ -1,18 +1,16 @@
-import styled from '@emotion/styled';
-export const Container = styled.div `
+import { styled as t } from "@linaria/react";
+const e = t.div`
   padding: 16px;
-  color: ${(props) => props.theme.COLORS.WHITE};
+  color: var(--color-white);
   font-weight: 700;
   font-size: 14px;
 
   & > div:not(:last-child) {
     margin-bottom: 16px;
   }
-`;
-export const Title = styled.div `
+`, o = t.div`
   font-size: 16px;
-`;
-export const Options = styled.div `
+`, n = t.div`
   overflow-y: auto;
   max-height: 220px;
   position: relative;
@@ -20,37 +18,32 @@ export const Options = styled.div `
   & > div:not(:last-child) {
     margin-bottom: 12px;
   }
-`;
-export const Loader = styled.div `
+`, a = t.div`
   position: absolute;
   left: 0px;
-  background-color: ${(props) => props.theme.COLORS.BG_TRANSPARENT_VOTE_CONTAINER};
+  background-color: var(--color-transparent-vote-container);
   width: 100%;
   height: 100%;
   z-index: 1;
   display: flex;
   justify-content: center;
   align-items: center;
-`;
-export const Feedback = styled.div `
+`, l = t.div`
   padding: 14px 12px 14px 16px;
   display: flex;
   align-items: center;
-`;
-export const FeedbackIcon = styled.img `
+`, r = t.img`
   width: 24px;
   height: 24px;
   margin-right: 12px;
-`;
-export const FeedbackTitle = styled.div `
+`, d = t.div`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 16;
   font-weight: 700;
   margin-bottom: 10px;
-`;
-export const FeedbackDescription = styled.div `
+`, p = t.div`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
@@ -59,4 +52,13 @@ export const FeedbackDescription = styled.div `
   font-size: 14;
   font-weight: 500;
 `;
-//# sourceMappingURL=styles.js.map
+export {
+  e as Container,
+  l as Feedback,
+  p as FeedbackDescription,
+  r as FeedbackIcon,
+  d as FeedbackTitle,
+  a as Loader,
+  n as Options,
+  o as Title
+};

package/lib/lib/gamification/vote/types.d.js

@@ -0,0 +1 @@
+

package/lib/lib/login/index.js

@@ -0,0 +1,70 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useState as a } from "react";
+import w, { isValidPhoneNumber as P, formatPhoneNumberIntl as F } from "react-phone-number-input";
+import v from "react-auth-code-input";
+import { requestLoginCode as D, register as I, login as k } from "../../utils/login.js";
+import { Timer as x } from "../gamification/vote/components/voting-header/components/timer/index.js";
+import { Panel as E, Form as p, FormTitle as u, FormDescription as d, FormInputContainer as S, FormSubmit as m, Digits as T } from "./styles.js";
+import "@connectrpc/connect-web";
+import "@connectrpc/connect";
+import "@streamlayer/sl-eslib/users/users_connect";
+import "react-countdown-circle-timer";
+import "../theme/constants.js";
+import "../gamification/vote/components/voting-header/components/timer/styles.js";
+import "@linaria/react";
+const Q = ({ login: s, anonymousLogin: h, host: c }) => {
+  const [n, g] = a(""), [i, b] = a(""), [l, f] = a(""), y = async (o) => {
+    o.preventDefault();
+    try {
+      const r = n.replaceAll("+", "");
+      try {
+        await D(c, r);
+      } catch {
+        await I(c, r);
+      }
+      b(r);
+    } catch (r) {
+      window.alert(r);
+    }
+  }, C = async (o) => {
+    if (o.preventDefault(), i && l)
+      try {
+        const r = await k(c, i, l);
+        r && s ? await s(r) : console.log("token", r);
+      } catch (r) {
+        window.alert(r);
+      }
+  };
+  return /* @__PURE__ */ t(E, { children: [
+    !i && /* @__PURE__ */ t("div", { children: [
+      /* @__PURE__ */ t(p, { onSubmit: y, children: [
+        /* @__PURE__ */ e(u, { children: "Enter your phone number" }),
+        /* @__PURE__ */ e(d, { children: "Enter your phone up for number to log in or sign an account." }),
+        /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(w, { value: n, onChange: (o) => g(`${o}`) }) }),
+        /* @__PURE__ */ e(m, { disabled: !P(n), type: "submit", children: "request code" })
+      ] }),
+      h && /* @__PURE__ */ e(m, { style: { display: "block", margin: "auto" }, onClick: h, children: "anonymous login" })
+    ] }),
+    i && /* @__PURE__ */ t(p, { onSubmit: C, children: [
+      /* @__PURE__ */ e(u, { children: "Enter Verification Code" }),
+      /* @__PURE__ */ t(d, { children: [
+        "Please enter the verification code ",
+        /* @__PURE__ */ e("br", {}),
+        "sent to ",
+        /* @__PURE__ */ e("b", { children: F(n) })
+      ] }),
+      /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(v, { autoFocus: !0, allowedCharacters: "numeric", length: 4, onChange: f }) }),
+      /* @__PURE__ */ e(m, { disabled: l.length !== 4, type: "submit", children: "login" }),
+      /* @__PURE__ */ t(d, { children: [
+        "Didn't get 59 the code? ",
+        /* @__PURE__ */ e("br", {}),
+        "Resend Code in",
+        /* @__PURE__ */ e(x, { duration: 30, setTimeToExpire: () => {
+        }, isPlaying: !0 })
+      ] })
+    ] })
+  ] });
+};
+export {
+  Q as Login
+};

package/{src/lib/gamification → lib/lib}/login/styles.js

@@ -1,33 +1,29 @@
-import styled from '@emotion/styled';
-export const Panel = styled.div `
+import { styled as o } from "@linaria/react";
+const n = o.div`
   border-radius: 8px;
   padding: 0 12px;
-  background-color: ${(props) => props.theme.COLORS.BG_TRANSPARENT_ITEM};
+  background-color: var(--color-transparent-item);
   display: flex;
   align-items: center;
   height: 100%;
-`;
-export const Form = styled.form `
+`, r = o.form`
   display: flex;
   margin: auto;
   flex-direction: column;
   align-items: center;
   text-align: center;
-`;
-export const FormTitle = styled.div `
+`, i = o.div`
   margin-bottom: 20px;
   font-size: 18px;
-`;
-export const FormDescription = styled.div `
+`, e = o.div`
   margin-bottom: 10px;
   font-size: 14px;
 
   display: flex;
   align-items: center;
   flex-direction: column;
-`;
-export const FormSubmit = styled.button `
-  background-color: ${(props) => props.theme.COLORS.BLUE_QUESTION_ACTION_BTN};
+`, a = o.button`
+  background-color: var(--color-blue-question-action-btn);
   border: none;
   border-radius: 2px;
   padding: 6px;
@@ -40,8 +36,7 @@ export const FormSubmit = styled.button `
     cursor: default;
   }
   margin-bottom: 20px;
-`;
-export const FormInputContainer = styled.div `
+`, p = o.div`
   input {
     font-size: 20px;
     background: transparent;
@@ -52,11 +47,12 @@ export const FormInputContainer = styled.div `
 
   margin-bottom: 40px;
   border-bottom: 1px solid white;
-`;
-export const Digits = styled.div `
-  display: flex;
-  gap: 10px;
-  margin-bottom: 20px;
+`, d = o.div`
+  > div {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+  }
 
   input {
     width: 20px;
@@ -64,4 +60,12 @@ export const Digits = styled.div `
     font-size: 40px;
   }
 `;
-//# sourceMappingURL=styles.js.map
+export {
+  d as Digits,
+  r as Form,
+  e as FormDescription,
+  p as FormInputContainer,
+  a as FormSubmit,
+  i as FormTitle,
+  n as Panel
+};

package/lib/lib/notifications/decorator.js

@@ -0,0 +1,64 @@
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { NotificationType as o, Notifications as m } from "@streamlayer/sdk-web-notifications";
+import { styled as b } from "@linaria/react";
+import { useMemo as f, useRef as a } from "react";
+import { Notifications as l } from "./index.js";
+import "@nanostores/react";
+import "./notification/index.js";
+import "./notification/onboarding-inapp/index.js";
+import "./notification/onboarding-inapp/styles.js";
+import "./notification/question-inapp/index.js";
+import "../../icon-exit-d3f9fc80.js";
+import "./notification/question-inapp/styles.js";
+import "./notification/styles.js";
+import "./styles.js";
+const c = b.button`
+  border: none;
+  outline: none;
+  background-color: var(--color-green-primary-btn);
+  color: var(--color-white);
+  cursor: pointer;
+  padding: 5px;
+  min-width: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  margin-top: 10px;
+`, u = {
+  [o.QUESTION]: {
+    icon: "https://static-next.streamlayer.io/1a0525a58e123d342ed43ebdf5bacc9c/f2147312-357a-4cb6-a6fa-879472609344/e675f428-d234-40fd-95db-e09bc2143852.png"
+  },
+  [o.ONBOARDING]: {
+    header: "Header",
+    subtitle: "Free to Play Interactive game",
+    graphicBg: "https://storage.googleapis.com/cdn.streamlayer.io/organization/studioicons/oval.png",
+    icon: "https://static-next.streamlayer.io/1a0525a58e123d342ed43ebdf5bacc9c/6bde38a5-d5da-4f8d-b491-601370372695/6996bc2d-a8b0-4b93-82d6-015bc981e666.png",
+    sponsorLogo: "https://static-next.streamlayer.io/1a0525a58e123d342ed43ebdf5bacc9c/95da4770-fb56-4bb7-bba6-94f97e6f1fea/8c6a2184-453e-47d2-aa77-5478da0ebb51.png",
+    primaryColor: "#9c0061"
+  }
+}, R = (g, { args: t }) => {
+  console.log("NotificationsList", t);
+  const e = f(
+    () => new m({ concurrency: t.concurrency || 1, animationDelay: 300 }),
+    [t.concurrency]
+  ), d = a(0), s = a(0), r = (i) => {
+    e.add({
+      type: i,
+      autoHideDuration: 5e3,
+      id: Date.now().toString(),
+      data: {
+        ...u[i],
+        title: i === o.ONBOARDING ? `Onboarding ${++s.current}` : `Question ${++d.current}`
+      }
+    });
+  };
+  return /* @__PURE__ */ p("div", { children: [
+    /* @__PURE__ */ n(l, { notificationsStore: e.getQueueStore() }),
+    /* @__PURE__ */ n(c, { onClick: () => r(o.QUESTION), children: "Add question" }),
+    /* @__PURE__ */ n(c, { onClick: () => r(o.ONBOARDING), children: "Add onboarding" })
+  ] });
+};
+export {
+  R as NotificationsList
+};