@streamlayer/react-ui 0.5.8 → 0.23.0

package/lib/lib/gamification/onboarding/index.js

@@ -0,0 +1,66 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { useState as g, useEffect as B, useCallback as w } from "react";
+import { c as D } from "../../../icon-exit-d3f9fc80.js";
+import { Container as N, OnboardingHeader as T, LeftBlock as j, GameIcon as p, RightBlock as G, SponsorLogo as R, CloseBtn as A, IconClose as E, Content as H, OnboardingActionBtn as L } from "./styles.js";
+import { OnboardingInstructions as P } from "./components/onboarding-slides/onboarding-instructions/index.js";
+import { OnboardingRules as q } from "./components/onboarding-slides/onboarding-rules/index.js";
+import { OnboardingInviteCard as z } from "./components/onboarding-slides/onboarding-invite-card/index.js";
+import "@linaria/react";
+import "./components/onboarding-slides/onboarding-instructions/styles.js";
+import "./components/onboarding-slides/onboarding-rules/styles.js";
+import "./components/onboarding-slides/onboarding-invite-card/styles.js";
+const e = {
+  steps: !1,
+  rules: !1,
+  inviteCard: !1
+}, _ = ({
+  gamification: f,
+  closeFeature: b,
+  steps: n,
+  gameIcon: c,
+  sponsorLogo: d,
+  rules: i,
+  rulesBtnLabel: C,
+  rulesTitle: u,
+  primaryColor: m,
+  inviteCardTitle: v,
+  inviteCardSubtext: S,
+  inviteCardBtnLabel: y
+}) => {
+  const I = async () => {
+    await f.submitInplay();
+  }, O = () => {
+    b();
+  }, [a, h] = g(0), [o, t] = g(e);
+  B(() => {
+    n != null && n.length ? t({ ...e, steps: !0 }) : i != null && i.length ? t({ ...e, rules: !0 }) : t({ ...e, inviteCard: !0 });
+  }, []);
+  const k = w(() => {
+    n != null && n.length && a < n.length - 1 ? h((x) => ++x) : i != null && i.length && o.steps ? t({ ...e, rules: !0 }) : o.rules && t({ ...e, inviteCard: !0 });
+  }, [a, n == null ? void 0 : n.length, i == null ? void 0 : i.length, o, h, t]);
+  return /* @__PURE__ */ l(N, { children: [
+    /* @__PURE__ */ l(T, { children: [
+      /* @__PURE__ */ r(j, { children: c && /* @__PURE__ */ r(p, { alt: "sponsor-one-onboarding-icon", src: c }) }),
+      /* @__PURE__ */ l(G, { children: [
+        d && /* @__PURE__ */ r(R, { alt: "sponsor-two-onboarding-icon", src: d }),
+        /* @__PURE__ */ r(A, { onClick: O, children: /* @__PURE__ */ r(E, { alt: "icon-close-onboarding", src: D }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ l(H, { children: [
+      o.steps && (n == null ? void 0 : n.length) && /* @__PURE__ */ r(P, { graphic: n[a].graphic, headline: n[a].headline }),
+      o.rules && /* @__PURE__ */ r(q, { rules: i, rulesTitle: u, primaryColor: m }),
+      o.inviteCard && /* @__PURE__ */ r(
+        z,
+        {
+          inviteCardTitle: v,
+          inviteCardSubtext: S,
+          primaryColor: m
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r(L, { onClick: o.inviteCard ? I : k, children: o.rules ? C || "Got it!" : o.inviteCard ? y || "Play now!" : "Next" })
+  ] });
+};
+export {
+  _ as Onboarding
+};

package/lib/lib/gamification/onboarding/styles.js

@@ -0,0 +1,69 @@
+import { styled as t } from "@linaria/react";
+const n = t.div`
+  box-sizing: border-box;
+  display: flex;
+  color: var(--color-white);
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+`, e = t.div`
+  flex: 1;
+  width: 100%;
+  margin-bottom: 20px;
+`, i = t.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 36px;
+  padding: 6px 16px 10px 16px;
+  align-items: center;
+  border-bottom: 1px solid #22262b;
+`, r = t.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, c = t.div`
+  display: flex;
+  align-items: center;
+`, s = t.img`
+  width: 24px;
+  height: 24px;
+`, l = t.img`
+  height: 24px;
+`, d = t.button`
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`, p = t.img`
+  width: 24px;
+  height: 24px;
+`, a = t.button`
+  color: var(--color-white);
+  width: 100%;
+  border: none;
+  outline: none;
+  background-color: var(--color-green-primary-btn);
+  cursor: pointer;
+  padding: 12px 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  border-radius: 6px;
+`;
+export {
+  d as CloseBtn,
+  n as Container,
+  e as Content,
+  s as GameIcon,
+  p as IconClose,
+  r as LeftBlock,
+  a as OnboardingActionBtn,
+  i as OnboardingHeader,
+  c as RightBlock,
+  l as SponsorLogo
+};

package/lib/lib/gamification/question/index.js

@@ -0,0 +1,39 @@
+import { jsxs as z, jsx as M } from "react/jsx-runtime";
+import { QuestionType as N, PickHistoryStatus as D, QuestionStatus as O } from "@streamlayer/sdk-web-types";
+import { i as T } from "../../../icon-chevron-138a557c.js";
+import { Panel as E, QuestionTypeIconWrap as c, QuestionTypeIcon as x, QuestionContent as Q, QuestionTypeLabel as Y, QuestionTypeTitle as C, ExpiredQuestion as S, QuestionSubject as U, QuestionActionTitle as w, QuestionActionIcon as a, QuestionStatusIcon as k } from "./styles.js";
+import "@linaria/react";
+const l = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlBvbGwiPgo8cGF0aCBpZD0iTm90aWZpY2F0aW9uL0ljb24vUG9sbCIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05Ljc3NzggMS42ODQyMVY1LjA1MjYzSDEzLjMzMzNDMTMuODI0MyA1LjA1MjYzIDE0LjIyMjIgNC42NzU2MSAxNC4yMjIyIDQuMjEwNTNWMi41MjYzMkMxNC4yMjIyIDIuMDYxMjMgMTMuODI0MyAxLjY4NDIxIDEzLjMzMzMgMS42ODQyMUg5Ljc3NzhaTTIuNjY2NjcgMEMxLjE5MzkxIDAgMCAxLjEzMTA3IDAgMi41MjYzMlY0LjIxMDUzQzAgNS42MDU3NyAxLjE5MzkxIDYuNzM2ODQgMi42NjY2NyA2LjczNjg0SDEzLjMzMzNDMTQuODA2MSA2LjczNjg0IDE2IDUuNjA1NzcgMTYgNC4yMTA1M1YyLjUyNjMyQzE2IDEuMTMxMDcgMTQuODA2MSAwIDEzLjMzMzMgMEgyLjY2NjY3Wk00LjQ0NDQ2IDEwLjk0NzNIMTMuMzMzM0MxMy44MjQzIDEwLjk0NzMgMTQuMjIyMiAxMS4zMjQzIDE0LjIyMjIgMTEuNzg5NFYxMy40NzM2QzE0LjIyMjIgMTMuOTM4NyAxMy44MjQzIDE0LjMxNTcgMTMuMzMzMyAxNC4zMTU3SDQuNDQ0NDZWMTAuOTQ3M1pNMCAxMS43ODk0QzAgMTAuMzk0MiAxLjE5MzkxIDkuMjYzMSAyLjY2NjY3IDkuMjYzMUgxMy4zMzMzQzE0LjgwNjEgOS4yNjMxIDE2IDEwLjM5NDIgMTYgMTEuNzg5NFYxMy40NzM2QzE2IDE0Ljg2ODkgMTQuODA2MSAxNS45OTk5IDEzLjMzMzMgMTUuOTk5OUgyLjY2NjY3QzEuMTkzOTEgMTUuOTk5OSAwIDE0Ljg2ODkgMCAxMy40NzM2VjExLjc4OTRaIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjUiLz4KPC9nPgo8L3N2Zz4K", n = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikljb24vTm90aWZpY2F0aW9uL1ByZWRpY2l0b24iPgo8cGF0aCBpZD0iSWNvbi9QcmVkaWN0aW9uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE2IDcuMDA1MjJDMTYgNy4wMDUyMiA5LjIwMDQ4IDYuODE2MDcgOS4yMDA0OCAwQzkuMjAwNDggNi4zNjE2OCAzLjI3NzI5IDYuOTUwNTYgMi40ODc1NiA3LjAwMDc4TDIuNDAwOTQgNy4wMDUyMkMyLjQwMDk0IDcuMDA1MjIgOS4yMDA0OCA3LjE5NDM1IDkuMjAwNDggMTQuMDEwNEM5LjIwMDQ4IDcuNjQ4NzcgMTUuMTIzNCA3LjA1OTg5IDE1LjkxMzEgNy4wMDk2NEwxNiA3LjAwNTIyWk02Ljk3MzgyIDEyLjU2NTJDNi45NzM4MiAxMi41NjUyIDMuNDg2OTEgMTIuNDcyNCAzLjQ4NjkxIDkuMTMwMzNDMy40ODY5MSAxMi4yNDk2IDAuNDQ5NDAyIDEyLjUzODQgMC4wNDQ0MTg2IDEyLjU2M0wwIDEyLjU2NTJDMCAxMi41NjUyIDMuNDg2OTEgMTIuNjU3OSAzLjQ4NjkxIDE2QzMuNDg2OTEgMTIuODgwNyA2LjUyNDI5IDEyLjU5MiA2LjkyOTI3IDEyLjU2NzNMNi45NzM4MiAxMi41NjUyWiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC41Ii8+CjwvZz4KPC9zdmc+Cg==", Z = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikljb24vTm90aWZpY2F0aW9uL1RyaXZpYSI+CjxwYXRoIGlkPSJOb3RpZmljYXRpb24vSWNvbi9Ucml2aWEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMi4wMTY2MyAxLjM4MDhDMC43Mzk5MTMgMS41NTU4NiAtMC4xNTMxNTMgMi43MzI3NiAwLjAyMTkxMiA0LjAwOTQ4TDEuMzgwOCAxMy45MTk2QzEuNTU1ODYgMTUuMTk2MyAyLjczMjc2IDE2LjA4OTQgNC4wMDk0OCAxNS45MTQzTDEzLjkxOTYgMTQuNTU1NEMxNS4xOTYzIDE0LjM4MDMgMTYuMDg5NCAxMy4yMDM0IDE1LjkxNDMgMTEuOTI2N0wxNC41NTU0IDIuMDE2NjNDMTQuMzgwMyAwLjczOTkxMyAxMy4yMDM0IC0wLjE1MzE1MyAxMS45MjY3IDAuMDIxOTEyTDIuMDE2NjMgMS4zODA4Wk05LjU5NjEzIDMuNzg4QzkuMTE0MzEgMy40Njk5MSA4LjQ3ODEzIDMuMzAxNTEgNy43NTY2IDMuMzAxNTFDNy41NDM3NyAzLjMwMTUxIDcuMzI2MjUgMy4zMTY3MSA3LjEwODcyIDMuMzQ0NzhDNi4zODgzNiAzLjQ0MDY3IDUuNjg5MDEgMy43OTAzNCA1LjE4OTY1IDQuMzAxMzhDNC42ODQ0NSA0LjgyMDYyIDQuNDM3NyA1LjQ1NTYzIDQuNTE3MjIgNi4wNDE1MUM0LjU3NDUyIDYuNDc0MiA0LjkwMDc4IDYuNzUzNyA1LjM0NjM1IDYuNzUzN0M1LjM5NDI5IDYuNzUzNyA1LjQ0MzQxIDYuNzUwMiA1LjQ5MTM2IDYuNzQ0MzVDNi4wODc3OCA2LjY2NDgzIDYuMjE2NDIgNi4yNTQzNiA2LjM0MDM2IDUuODU2NzVMNi4zNDA0NSA1Ljg1NjQ4QzYuNDgxOTIgNS40MDQwMSA2LjYxNTM0IDQuOTc3MzEgNy4zODU4NSA0Ljg3NDQ0QzcuNDY1MzcgNC44NjM5MSA3LjU0MTM4IDQuODU4MDYgNy42MTUwNiA0Ljg1ODA2QzguMTY5MzkgNC44NTgwNiA4LjUxNDM2IDUuMTUwNDIgOC41ODQ1NCA1LjY4MjUyQzguNjUzNTMgNi4yMDI5MyA4LjI0MzA3IDYuNjE4MDcgNy44MDY4NCA3LjA1NjZMNy44MDM5MyA3LjA1OTU0QzcuMzE1ODIgNy41NTIzMSA2Ljc2MzkgOC4xMDk1IDYuODY4OTUgOC45MDA4M0M2Ljg5NTg1IDkuMTA1NDggNi45ODU5IDkuMjk0OTMgNy4xMjI3MiA5LjQzNjQ0QzcuMjc4MjYgOS41OTkgNy40ODI5IDkuNjg0MzYgNy43MTMzMSA5LjY4NDM2QzcuNzU1NDEgOS42ODQzNiA3Ljc5ODY4IDkuNjgyMDMgNy44NDMxMSA5LjY3NjE4QzguNDY2OTEgOS41OTMyNCA4LjU1MTYyIDkuMjMxMzkgOC42MzMzOCA4Ljg4MjFMOC42MzM2NSA4Ljg4MDk3TDguNjM2NjEgOC44Njg1OUM4LjY2NzIzIDguNzQwMyA4LjY5ODc3IDguNjA4MTMgOC43NTk5NSA4LjQ4ODA0QzguODQ2NDkgOC4zMTYxMyA5LjA2MjgzIDguMTEyNjUgOS4zMTQyOCA3Ljg3ODc1QzkuOTE0MiA3LjMxODU4IDEwLjczNCA2LjU1MTQzIDEwLjU4MiA1LjQxNTg5QzEwLjQ4NzIgNC43MDYwMyAxMC4xNTUxIDQuMTU3NTcgOS41OTYxMSAzLjc4ODAyTDkuNTk2MTMgMy43ODhaTTguMTE2MDUgMTAuMjhDOC4wNjkyNyAxMC4yOCA4LjAyMTMyIDEwLjI4MzYgNy45NzQ1NCAxMC4yODk0QzcuMzgzOTYgMTAuMzY4OSA2Ljk2NzY1IDEwLjkxMjcgNy4wNDU5OSAxMS41MDMzQzcuMTE3MzMgMTIuMDM3NyA3LjU3ODA4IDEyLjQ0MTIgOC4xMTcyIDEyLjQ0MTJDOC4xNjM5NyAxMi40NDEyIDguMjExOTIgMTIuNDM3NyA4LjI1OTg3IDEyLjQzMThDOC44NTA0NSAxMi4zNTIzIDkuMjY1NiAxMS44MDg1IDkuMTg4NDIgMTEuMjE3OUM5LjExNTkxIDEwLjY4MjMgOC42NTUxNyAxMC4yOCA4LjExNjA1IDEwLjI4WiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC41Ii8+CjwvZz4KPC9zdmc+Cg==", o = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkNoZWNrIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTEzLjQzMTUgMy4xODI0Nkw1LjUzMzIxIDExLjA4MDhMMS45OTc3MSA3LjU0NTI3QzEuNTQwNTYgNy4wODgxMSAwLjc5OTkxMyA3LjA4ODExIDAuMzQyODY0IDcuNTQ1MjdDLTAuMTE0Mjg4IDguMDAyNDIgLTAuMTE0Mjg4IDguNzQzMDcgMC4zNDI4NjQgOS4yMDAxMUw0LjcwNTY3IDEzLjU2MjlDNC45MzMzMSAxMy43OTA2IDUuMjM0MTUgMTMuOTA2MyA1LjUzMzA3IDEzLjkwNjNDNS44MzIwMiAxMy45MDYzIDYuMTMwOTYgMTMuNzkyNCA2LjM2MDQ4IDEzLjU2MjlMMTUuMDg2MSA0LjgzNzMxQzE1LjU0MzIgNC4zODAxNiAxNS41NDMyIDMuNjM5NTEgMTUuMDg2MSAzLjE4MjQ2QzE0LjYyOSAyLjcyNTMxIDEzLjg4ODQgMi43MjUzMSAxMy40MzEyIDMuMTgyNDZIMTMuNDMxNVoiIGZpbGw9IiMwMEJENjAiLz4KPC9nPgo8L3N2Zz4K", d = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikdyb3VwIDQ2NSI+CjxyZWN0IGlkPSJSZWN0YW5nbGUgMzY4IiB4PSIyIiB5PSIwLjUwNjEwNCIgd2lkdGg9IjE2LjQ5OTIiIGhlaWdodD0iMi4zNTcwMiIgcng9IjEuMTc4NTEiIHRyYW5zZm9ybT0icm90YXRlKDQ1IDIgMC41MDYxMDQpIiBmaWxsPSIjOWUwYTFmIi8+CjxyZWN0IGlkPSJSZWN0YW5nbGUgMzY5IiB4PSIwLjMzMzAwOCIgeT0iMTIuMTcyOSIgd2lkdGg9IjE2LjQ5OTIiIGhlaWdodD0iMi4zNTcwMiIgcng9IjEuMTc4NTEiIHRyYW5zZm9ybT0icm90YXRlKC00NSAwLjMzMzAwOCAxMi4xNzI5KSIgZmlsbD0iIzllMGExZiIvPgo8L2c+Cjwvc3ZnPgo=", b = {
+  [N.POLL]: { label: "Poll", icon: l },
+  [N.TRIVIA]: { label: "Trivia", icon: Z },
+  [N.PREDICTION]: { label: "Prediction", icon: n }
+}, s = {
+  [D.LOST]: d,
+  [D.WON]: o,
+  [D.UNSET]: T,
+  [D.DNP]: T
+}, P = ({
+  questionId: A,
+  questionType: g,
+  questionStatus: i,
+  subject: y,
+  openForVoting: L,
+  openQuestion: I,
+  status: u
+}) => {
+  const j = b[g];
+  return j === void 0 ? null : /* @__PURE__ */ z(E, { onClick: () => I == null ? void 0 : I(A), children: [
+    /* @__PURE__ */ M(c, { children: /* @__PURE__ */ M(x, { alt: "question-type-icon", src: j.icon }) }),
+    /* @__PURE__ */ z(Q, { children: [
+      /* @__PURE__ */ z(Y, { children: [
+        /* @__PURE__ */ M(C, { children: j.label }),
+        g === N.TRIVIA && i === O.RESOLVED && /* @__PURE__ */ M(S, { children: "Expired" })
+      ] }),
+      /* @__PURE__ */ M(U, { children: y || "" })
+    ] }),
+    L ? /* @__PURE__ */ M(w, { children: "play" }) : /* @__PURE__ */ M(a, { children: /* @__PURE__ */ M(k, { alt: "question-status-icon", src: s[u] }) })
+  ] });
+};
+export {
+  P as Question
+};

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

@@ -1,8 +1,8 @@
-import styled from '@emotion/styled';
-export const Panel = styled.div `
+import { styled as o } from "@linaria/react";
+const t = o.div`
   border-radius: 8px;
   padding: 12px;
-  background-color: ${(props) => props.theme.COLORS.BG_TRANSPARENT_ITEM};
+  background-color: var(--color-transparent-item);
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -10,42 +10,36 @@ export const Panel = styled.div `
   &:hover {
     background: #000;
   }
-`;
-export const QuestionTypeIconWrap = styled.div `
+`, n = o.div`
   padding-right: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
-`;
-export const QuestionTypeIcon = styled.img `
+`, r = o.img`
   width: 16px;
   height: 16px;
-`;
-export const QuestionContent = styled.div `
+`, i = o.div`
   font-weight: 700;
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-`;
-export const QuestionTypeLabel = styled.div `
-  color: ${(props) => props.theme.COLORS.GREY_PRIMARY};
+`, p = o.div`
+  color: var(--color-grey-primary);
   font-size: 10px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding-bottom: 5px;
   text-transform: uppercase;
-`;
-export const QuestionSubject = styled.div `
-  color: ${(props) => props.theme.COLORS.WHITE};
+`, s = o.div`
+  color: var(--color-white);
   font-size: 12px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-`;
-export const QuestionActionTitle = 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;
   font-size: 8px;
@@ -54,8 +48,7 @@ export const QuestionActionTitle = styled.button `
   text-transform: uppercase;
   color: #fff;
   cursor: pointer;
-`;
-export const QuestionActionIcon = styled.button `
+`, c = o.button`
   border: none;
   font-size: 8px;
   padding: 6px;
@@ -63,18 +56,27 @@ export const QuestionActionIcon = styled.button `
   align-items: center;
   background-color: transparent;
   cursor: pointer;
-`;
-export const QuestionStatusIcon = styled.img `
+`, d = o.img`
   width: 16px;
   height: 16px;
-`;
-export const QuestionTypeTitle = styled.span `
+`, l = o.span`
   text-transform: uppercase;
-`;
-export const ExpiredQuestion = styled.span `
+`, x = o.span`
   text-transform: uppercase;
-  border-left: ${(props) => `1px solid ${props.theme.COLORS.GREY_PRIMARY}`};
+  border-left: 1px solid var(--color-grey-primary);
   padding-left: 5px;
   margin-left: 5px;
 `;
-//# sourceMappingURL=styles.js.map
+export {
+  x as ExpiredQuestion,
+  t as Panel,
+  c as QuestionActionIcon,
+  a as QuestionActionTitle,
+  i as QuestionContent,
+  d as QuestionStatusIcon,
+  s as QuestionSubject,
+  r as QuestionTypeIcon,
+  n as QuestionTypeIconWrap,
+  p as QuestionTypeLabel,
+  l as QuestionTypeTitle
+};

package/lib/lib/gamification/question-list/index.js

@@ -0,0 +1,14 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { Question as e } from "../question/index.js";
+import { Container as n, Title as p, ItemsContainer as c } from "./styles.js";
+import "@streamlayer/sdk-web-types";
+import "../../../icon-chevron-138a557c.js";
+import "../question/styles.js";
+import "@linaria/react";
+const C = ({ questions: r, openQuestion: m }) => /* @__PURE__ */ o(n, { children: [
+  /* @__PURE__ */ t(p, { children: "PICK HISTORY" }),
+  /* @__PURE__ */ t(c, { children: r == null ? void 0 : r.map((i) => /* @__PURE__ */ t(e, { openQuestion: m, ...i }, i.questionId)) })
+] });
+export {
+  C as QuestionList
+};

package/{src → lib}/lib/gamification/question-list/styles.js

@@ -1,18 +1,16 @@
-import styled from '@emotion/styled';
-export const Container = styled.div `
+import { styled as o } from "@linaria/react";
+const e = o.div`
   display: flex;
   flex-direction: column;
-  height: calc(100% - 160px);
   border-radius: 13px;
-`;
-export const Title = styled.div `
-  color: ${(props) => props.theme.COLORS.GREY_PRIMARY};
+  height: 100%;
+`, i = o.div`
+  color: var(--color-grey-primary);
   text-transform: uppercase;
   font-size: 12px;
   font-weight: 500;
   margin-bottom: 8px;
-`;
-export const ItemsContainer = styled.div `
+`, r = o.div`
   display: flex;
   flex-direction: column;
   overflow-y: auto;
@@ -22,4 +20,8 @@ export const ItemsContainer = styled.div `
     margin-bottom: 8px;
   }
 `;
-//# sourceMappingURL=styles.js.map
+export {
+  e as Container,
+  r as ItemsContainer,
+  i as Title
+};

package/lib/lib/gamification/user-statistics/components/rank/index.js

@@ -0,0 +1,10 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { Container as t, Title as e, Indicator as c } from "./styles.js";
+import "@linaria/react";
+const p = ({ indicator: i, title: o }) => /* @__PURE__ */ n(t, { children: [
+  /* @__PURE__ */ r(e, { children: o }),
+  /* @__PURE__ */ r(c, { children: i })
+] });
+export {
+  p as Rank
+};

package/{src → lib}/lib/gamification/user-statistics/components/rank/styles.js

@@ -1,15 +1,13 @@
-import styled from '@emotion/styled';
-export const Container = styled.div `
+import { styled as e } from "@linaria/react";
+const t = e.div`
   display: flex;
   justify-content: flex-end;
   align-items: center;
   column-gap: 2px;
   overflow: hidden;
-`;
-export const Title = styled.div `
+`, i = e.div`
   width: 75px;
-`;
-export const Indicator = styled.div `
+`, n = e.div`
   font-size: 14px;
   color: #fff;
   overflow: hidden;
@@ -17,4 +15,8 @@ export const Indicator = styled.div `
   white-space: nowrap;
   width: 25px;
 `;
-//# sourceMappingURL=styles.js.map
+export {
+  t as Container,
+  n as Indicator,
+  i as Title
+};

package/lib/lib/gamification/user-statistics/components/statistics/index.js

@@ -0,0 +1,10 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { Container as n, Indicator as c } from "./styles.js";
+import "@linaria/react";
+const p = ({ indicator: i, title: t }) => /* @__PURE__ */ o(n, { children: [
+  /* @__PURE__ */ r(c, { children: i }),
+  /* @__PURE__ */ r("p", { children: t })
+] });
+export {
+  p as Statistics
+};

package/{src → lib}/lib/gamification/user-statistics/components/statistics/styles.js

@@ -1,14 +1,16 @@
-import styled from '@emotion/styled';
-export const Container = styled.div `
+import { styled as t } from "@linaria/react";
+const o = t.div`
   font-weight: 700;
   display: flex;
   flex-direction: column;
   row-gap: 4px;
   align-items: center;
   text-align: center;
-`;
-export const Indicator = styled.div `
+`, i = t.div`
   font-size: 18px;
   color: #fff;
 `;
-//# sourceMappingURL=styles.js.map
+export {
+  o as Container,
+  i as Indicator
+};

package/lib/lib/gamification/user-statistics/index.js

@@ -0,0 +1,57 @@
+import { jsxs as N, jsx as M } from "react/jsx-runtime";
+import { abbreviate as c } from "../../../utils/common.js";
+import { Statistics as D } from "./components/statistics/index.js";
+import { Rank as A } from "./components/rank/index.js";
+import { Container as x, TopInfo as U, User as w, UserAccountBtn as k, Avatar as r, AvatarPlaceholder as E, UserInfo as Q, UserName as S, UserRating as t, TrophyIcon as C, Rts as Y, RtsIndicator as o, Top as n, Ranks as e, BottomInfo as l } from "./styles.js";
+import "./components/statistics/styles.js";
+import "@linaria/react";
+import "./components/rank/styles.js";
+const a = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlRyb3BoeSI+CjxwYXRoIGlkPSJDb21iaW5lZCBTaGFwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjc2OTE2IDMuNTAwMDJDMi43NjkxNiA0LjQ5Nzg2IDIuOTQ3MDUgNS4zODM0OCAzLjMwMjgyIDYuMTU2OTJDMi42MjQ5MyA2LjAxODQ3IDIuMDU4ODMgNS43NDg3MiAxLjYwNDUgNS4zNDc2OEMxLjE1MDE3IDQuOTQ2NjMgMC45MjMwMDggNC41NTk5MiAwLjkyMzAwOCA0LjE4NzUyVjMuNTAwMDJIMi43NjkxNlpNMTEuMDc2OCAzLjUwMDAyVjQuMTg3NTJDMTEuMDc2OCA0LjU1OTkyIDEwLjg0OTcgNC45NDY2MyAxMC4zOTUzIDUuMzQ3NjhDOS45NDEgNS43NDg3MiA5LjM3NDkgNi4wMTg0NyA4LjY5NzAxIDYuMTU2OTJDOS4wNTI3OCA1LjM4MzQ4IDkuMjMwNjYgNC40OTc4NiA5LjIzMDY2IDMuNTAwMDJIMTEuMDc2OFpNMTIgNC4xODc1VjMuMjcwODNDMTIgMy4wNzk4NiAxMS45MzI3IDIuOTE3NTQgMTEuNzk4MSAyLjc4Mzg1QzExLjY2MzUgMi42NTAxNyAxMS41IDIuNTgzMzMgMTEuMzA3NyAyLjU4MzMzSDkuMjMwNzdWMS44OTU4M0M5LjIzMDc3IDEuNTgwNzMgOS4xMTc3OSAxLjMxMDk4IDguODkxODMgMS4wODY1OUM4LjY2NTg2IDAuODYyMTk1IDguMzk0MjMgMC43NSA4LjA3NjkyIDAuNzVIMy45MjMwOEMzLjYwNTc3IDAuNzUgMy4zMzQxNCAwLjg2MjE5NSAzLjEwODE3IDEuMDg2NTlDMi44ODIyMSAxLjMxMDk4IDIuNzY5MjMgMS41ODA3MyAyLjc2OTIzIDEuODk1ODNWMi41ODMzM0gwLjY5MjMwOEMwLjQ5OTk5OSAyLjU4MzMzIDAuMzM2NTM5IDIuNjUwMTcgMC4yMDE5MjMgMi43ODM4NUMwLjA2NzMwNyAyLjkxNzU0IDAgMy4wNzk4NiAwIDMuMjcwODNWNC4xODc1QzAgNC41MjY0OCAwLjA5OTc1ODYgNC44Njc4NCAwLjI5OTI3OSA1LjIxMTU5QzAuNDk4Nzk5IDUuNTU1MzQgMC43NjgwMjcgNS44NjU2NyAxLjEwNjk3IDYuMTQyNThDMS40NDU5MiA2LjQxOTQ5IDEuODYxNzggNi42NTIyMyAyLjM1NDU3IDYuODQwODJDMi44NDczNiA3LjAyOTQxIDMuMzY1MzggNy4xMzU2MyAzLjkwODY1IDcuMTU5NTFDNC4xMTA1OCA3LjQxNzMyIDQuMzM4OTQgNy42NDQxIDQuNTkzNzUgNy44Mzk4NEM0Ljc3NjQ0IDguMDAyMTcgNC45MDI2NCA4LjE3NTI0IDQuOTcyMzYgOC4zNTkwNUM1LjA0MjA3IDguNTQyODYgNS4wNzY5MiA4Ljc1NjUxIDUuMDc2OTIgOUM1LjA3NjkyIDkuMjU3ODEgNS4wMDM2MSA5LjQ3NTA0IDQuODU2OTcgOS42NTE2OUM0LjcxMDM0IDkuODI4MzQgNC40NzU5NiA5LjkxNjY3IDQuMTUzODUgOS45MTY2N0MzLjc5MzI3IDkuOTE2NjcgMy40NzIzNiAxMC4wMjUzIDMuMTkxMTEgMTAuMjQyNUMyLjkwOTg1IDEwLjQ1OTcgMi43NjkyMyAxMC43MzMxIDIuNzY5MjMgMTEuMDYyNVYxMS41MjA4QzIuNzY5MjMgMTEuNTg3NyAyLjc5MDg3IDExLjY0MjYgMi44MzQxMyAxMS42ODU1QzIuODc3NCAxMS43Mjg1IDIuOTMyNjkgMTEuNzUgMyAxMS43NUg5QzkuMDY3MzEgMTEuNzUgOS4xMjI2IDExLjcyODUgOS4xNjU4NiAxMS42ODU1QzkuMjA5MTMgMTEuNjQyNiA5LjIzMDc3IDExLjU4NzcgOS4yMzA3NyAxMS41MjA4VjExLjA2MjVDOS4yMzA3NyAxMC43MzMxIDkuMDkwMTUgMTAuNDU5NyA4LjgwODg5IDEwLjI0MjVDOC41Mjc2NCAxMC4wMjUzIDguMjA2NzMgOS45MTY2NyA3Ljg0NjE1IDkuOTE2NjdDNy41MjQwNCA5LjkxNjY3IDcuMjg5NjYgOS44MjgzNCA3LjE0MzAzIDkuNjUxNjlDNi45OTYzOSA5LjQ3NTA0IDYuOTIzMDggOS4yNTc4MSA2LjkyMzA4IDlDNi45MjMwOCA4Ljc1NjUxIDYuOTU3OTMgOC41NDI4NiA3LjAyNzY0IDguMzU5MDVDNy4wOTczNiA4LjE3NTI0IDcuMjIzNTYgOC4wMDIxNyA3LjQwNjI1IDcuODM5ODRDNy42NjEwNiA3LjY0NDEgNy44ODk0MiA3LjQxNzMyIDguMDkxMzUgNy4xNTk1MUM4LjYzNDYyIDcuMTM1NjMgOS4xNTI2NCA3LjAyOTQxIDkuNjQ1NDMgNi44NDA4MkMxMC4xMzgyIDYuNjUyMjMgMTAuNTU0MSA2LjQxOTQ5IDEwLjg5MyA2LjE0MjU4QzExLjIzMiA1Ljg2NTY3IDExLjUwMTIgNS41NTUzNCAxMS43MDA3IDUuMjExNTlDMTEuOTAwMiA0Ljg2Nzg0IDEyIDQuNTI2NDggMTIgNC4xODc1Wk01LjA3MDMzIDUuMzg0OTFMNi4wMzgzIDQuODc1MDNMNy4wMDYyNyA1LjM4NDkxTDYuODIxNCA0LjMwNDk3TDcuNjA0NTEgMy41NDAxNkw2LjUyMjI4IDMuMzgyNkw2LjAzODMgMi40MDAwM0w1LjU1NDMxIDMuMzgyNkw0LjQ3MjA5IDMuNTQwMTZMNS4yNTUxOSA0LjMwNDk3TDUuMDcwMzMgNS4zODQ5MVoiIGZpbGw9IiNGMkM5NEMiLz4KPC9nPgo8L3N2Zz4K", V = ({
+  avatar: j,
+  name: I,
+  points: g,
+  grade: T,
+  friendsRank: z,
+  globalRank: O,
+  winStreak: i,
+  correct: u,
+  incorrect: L,
+  successRate: y
+}) => /* @__PURE__ */ N(x, { children: [
+  /* @__PURE__ */ N(U, { children: [
+    /* @__PURE__ */ N(w, { children: [
+      /* @__PURE__ */ N(k, { children: [
+        j && /* @__PURE__ */ M(r, { alt: "avatar", src: j }),
+        !j && /* @__PURE__ */ M(E, { children: c(I) })
+      ] }),
+      /* @__PURE__ */ N(Q, { children: [
+        /* @__PURE__ */ M(S, { children: I }),
+        /* @__PURE__ */ N(t, { children: [
+          /* @__PURE__ */ M(C, { alt: "rank-icon", src: a }),
+          /* @__PURE__ */ N(Y, { children: [
+            /* @__PURE__ */ M(o, { children: g || "-" }),
+            "RTS"
+          ] }),
+          /* @__PURE__ */ N(n, { children: [
+            "TOP ",
+            T,
+            "%"
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ N(e, { children: [
+      /* @__PURE__ */ M(A, { title: "Friends rank", indicator: z || "-" }),
+      /* @__PURE__ */ M(A, { title: "Global rank", indicator: O || "-" })
+    ] })
+  ] }),
+  /* @__PURE__ */ N(l, { children: [
+    /* @__PURE__ */ M(D, { indicator: i || "-", title: "Win streak" }),
+    /* @__PURE__ */ M(D, { indicator: u || "-", title: "Correct" }),
+    /* @__PURE__ */ M(D, { indicator: L || "-", title: "Incorrect" }),
+    /* @__PURE__ */ M(D, { indicator: `${y || "-"}%`, title: "Success rate" })
+  ] })
+] });
+export {
+  V as UserStatistics
+};

package/{src → lib}/lib/gamification/user-statistics/styles.js

@@ -1,87 +1,72 @@
-import styled from '@emotion/styled';
-export const Container = styled.div `
-  background-color: ${(props) => props.theme.COLORS.BG_TRANSPARENT_USER_CONTAINER};
+import { styled as e } from "@linaria/react";
+const t = e.div`
+  background-color: var(--color-transparent-user-container);
   border-radius: 12px;
-  color: ${(props) => props.theme.COLORS.GREY_PRIMARY};
+  color: var(--color-grey-primary);
   font-size: 10px;
   font-weight: 600;
-`;
-export const TopInfo = styled.div `
+`, r = e.div`
   padding: 12px;
-  border-bottom: ${(props) => `1px solid ${props.theme.COLORS.DIVIDER_COLOR_PRIMARY}`};
+  border-bottom: 1px solid var(--color-divider-color-primary);
   display: flex;
   justify-content: space-between;
   align-items: center;
   column-gap: 5px;
-`;
-export const BottomInfo = styled.div `
+`, i = e.div`
   padding: 12px 16px;
   text-transform: uppercase;
   display: flex;
   justify-content: space-between;
   column-gap: 16px;
-`;
-export const User = styled.div `
+`, n = e.div`
   display: flex;
   column-gap: 8px;
   flex: 1;
   overflow: hidden;
-`;
-export const Avatar = styled.img `
+`, a = e.img`
   width: 100%;
   height: 100%;
-  max-width: 48px;
-  max-height: 48px;
   border-radius: 50%;
   object-fit: cover;
   object-position: center;
   flex-shrink: 0;
-`;
-export const UserInfo = styled.div `
+`, p = e.div`
   padding-top: 4px;
   display: flex;
   flex-direction: column;
   row-gap: 4px;
   overflow: hidden;
-`;
-export const UserName = styled.div `
+`, s = e.div`
   font-size: 18px;
-  color: ${(props) => props.theme.COLORS.WHITE};
+  color: var(--color-white);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-`;
-export const UserRating = styled.div `
+`, d = e.div`
   text-transform: uppercase;
   display: flex;
   align-items: center;
-`;
-export const TrophyIcon = styled.img `
+`, c = e.img`
   width: 12px;
   height: 12px;
   margin-right: 4px;
-`;
-export const Rts = styled.div `
+`, l = e.div`
   display: flex;
   align-items: center;
   column-gap: 4px;
-  border-right: ${(props) => `1px solid ${props.theme.COLORS.DIVIDER_COLOR_SECONDARY}`};
+  border-right: 1px solid var(--color-divider-color-secondary);
   padding-right: 5px;
-`;
-export const RtsIndicator = styled.div `
+`, x = e.div`
   font-size: 14px;
-  color: ${(props) => props.theme.COLORS.WHITE};
-`;
-export const Top = styled.div `
+  color: var(--color-white);
+`, f = e.div`
   padding-left: 5px;
-`;
-export const Ranks = styled.div `
+`, g = e.div`
   text-transform: uppercase;
   display: flex;
   flex-direction: column;
   row-gap: 4px;
-`;
-export const AvatarPlaceholder = styled.div `
+`, h = e.div`
   background: #2d6ffd;
   border-radius: 50%;
   width: 48px;
@@ -94,5 +79,35 @@ export const AvatarPlaceholder = styled.div `
   color: #fff;
   font-size: 18px;
   flex-shrink: 0;
+`, m = e.button`
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  max-width: 48px;
+  max-height: 48px;
 `;
-//# sourceMappingURL=styles.js.map
+export {
+  a as Avatar,
+  h as AvatarPlaceholder,
+  i as BottomInfo,
+  t as Container,
+  g as Ranks,
+  l as Rts,
+  x as RtsIndicator,
+  f as Top,
+  r as TopInfo,
+  c as TrophyIcon,
+  n as User,
+  m as UserAccountBtn,
+  p as UserInfo,
+  s as UserName,
+  d as UserRating
+};

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

@@ -0,0 +1,13 @@
+import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { Container as r, Title as t, PointContainer as e, Point as l, PointLabel as c } from "./styles.js";
+import "@linaria/react";
+const s = ({ points: o }) => /* @__PURE__ */ n(r, { children: [
+  /* @__PURE__ */ i(t, { children: "YOU WON" }),
+  /* @__PURE__ */ n(e, { children: [
+    /* @__PURE__ */ i(l, { children: o }),
+    /* @__PURE__ */ i(c, { children: "PTS" })
+  ] })
+] });
+export {
+  s as Points
+};