@streamlayer/react-ui 0.24.2 → 0.25.0

package/lib/lib/gamification/common-header/index.js

@@ -1,14 +1,14 @@
-import { jsxs as j, jsx as M } from "react/jsx-runtime";
-import { c as A } from "../../../icon-exit-d3f9fc80.js";
-import { Container as z, Button as g, HeaderIcon as i } from "./styles.js";
+import { jsxs as I, jsx as M } from "react/jsx-runtime";
+import { i } from "../../../icon-exit-6a55bb8f.js";
+import { Container as A, Button as g, HeaderIcon as z } from "./styles.js";
 import "@linaria/react";
-const x = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkNoZXZyb24iPgo8cGF0aCBpZD0iQ2hldnJvbl8yIiBkPSJNNiAxMS45OTlDNiAxMi4xNzI1IDYuMDMxMzQgMTIuMzM0IDYuMDk0MDEgMTIuNDgzN0M2LjE1NjY5IDEyLjYzMzQgNi4yNTQyOCAxMi43NzU2IDYuMzg2OCAxMi45MTAzTDE0LjA0MzYgMjAuNjU2NUMxNC4yNjQ4IDIwLjg4NTUgMTQuNTMyMyAyMSAxNC44NDU5IDIxQzE1LjA2MDcgMjEgMTUuMjU0NCAyMC45NDc1IDE1LjQyNzEgMjAuODQyNkMxNS41OTk4IDIwLjczNzcgMTUuNzM4NCAyMC41OTY1IDE1Ljg0MzEgMjAuNDE5MUMxNS45NDc3IDIwLjI0MTYgMTYgMjAuMDQyNSAxNiAxOS44MjE3QzE2IDE5LjQ5ODkgMTUuODgxNiAxOS4yMTM0IDE1LjY0NDggMTguOTY1NEw4Ljc0MTgzIDExLjk5NzFMMTUuNjQ0OCA1LjAzMjcxQzE1Ljg4MTYgNC43ODcwOSAxNiA0LjUwMjMgMTYgNC4xNzgzNEMxNiAzLjk1NzQ5IDE1Ljk0NzcgMy43NTgzNSAxNS44NDMxIDMuNTgwOTFDMTUuNzM4NCAzLjQwMzQ3IDE1LjU5OTggMy4yNjIyOSAxNS40MjcxIDMuMTU3MzhDMTUuMjU0NCAzLjA1MjQ2IDE1LjA2MDcgMyAxNC44NDU5IDNDMTQuNTMyMyAzIDE0LjI2NDggMy4xMTE2OSAxNC4wNDM2IDMuMzM1MDhMNi4zODY4IDExLjA4NzhDNi4yNTU1MSAxMS4yMjI1IDYuMTU4NTMgMTEuMzY0NCA2LjA5NTg2IDExLjUxMzRDNi4wMzMxOCAxMS42NjI1IDYuMDAxMjMgMTEuODI0NCA2IDExLjk5OVoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9zdmc+Cg==", y = ({ icon: N, comeBack: D, close: I }) => /* @__PURE__ */ j(z, { children: [
-  /* @__PURE__ */ j("div", { children: [
+const x = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkNoZXZyb24iPgo8cGF0aCBpZD0iQ2hldnJvbl8yIiBkPSJNNiAxMS45OTlDNiAxMi4xNzI1IDYuMDMxMzQgMTIuMzM0IDYuMDk0MDEgMTIuNDgzN0M2LjE1NjY5IDEyLjYzMzQgNi4yNTQyOCAxMi43NzU2IDYuMzg2OCAxMi45MTAzTDE0LjA0MzYgMjAuNjU2NUMxNC4yNjQ4IDIwLjg4NTUgMTQuNTMyMyAyMSAxNC44NDU5IDIxQzE1LjA2MDcgMjEgMTUuMjU0NCAyMC45NDc1IDE1LjQyNzEgMjAuODQyNkMxNS41OTk4IDIwLjczNzcgMTUuNzM4NCAyMC41OTY1IDE1Ljg0MzEgMjAuNDE5MUMxNS45NDc3IDIwLjI0MTYgMTYgMjAuMDQyNSAxNiAxOS44MjE3QzE2IDE5LjQ5ODkgMTUuODgxNiAxOS4yMTM0IDE1LjY0NDggMTguOTY1NEw4Ljc0MTgzIDExLjk5NzFMMTUuNjQ0OCA1LjAzMjcxQzE1Ljg4MTYgNC43ODcwOSAxNiA0LjUwMjMgMTYgNC4xNzgzNEMxNiAzLjk1NzQ5IDE1Ljk0NzcgMy43NTgzNSAxNS44NDMxIDMuNTgwOTFDMTUuNzM4NCAzLjQwMzQ3IDE1LjU5OTggMy4yNjIyOSAxNS40MjcxIDMuMTU3MzhDMTUuMjU0NCAzLjA1MjQ2IDE1LjA2MDcgMyAxNC44NDU5IDNDMTQuNTMyMyAzIDE0LjI2NDggMy4xMTE2OSAxNC4wNDM2IDMuMzM1MDhMNi4zODY4IDExLjA4NzhDNi4yNTU1MSAxMS4yMjI1IDYuMTU4NTMgMTEuMzY0NCA2LjA5NTg2IDExLjUxMzRDNi4wMzMxOCAxMS42NjI1IDYuMDAxMjMgMTEuODI0NCA2IDExLjk5OVoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9zdmc+Cg==", E = ({ icon: N, comeBack: D, close: j }) => /* @__PURE__ */ I(A, { children: [
+  /* @__PURE__ */ I("div", { children: [
     D && /* @__PURE__ */ M(g, { onClick: D, children: /* @__PURE__ */ M("img", { alt: "header-back-icon", src: x }) }),
-    N && /* @__PURE__ */ M(i, { alt: "header-icon", src: N })
+    N && /* @__PURE__ */ M(z, { alt: "header-icon", src: N })
   ] }),
-  /* @__PURE__ */ M("div", { children: I && /* @__PURE__ */ M(g, { onClick: I, children: /* @__PURE__ */ M("img", { alt: "header-close-icon", src: A }) }) })
+  /* @__PURE__ */ M("div", { children: j && /* @__PURE__ */ M(g, { onClick: j, children: /* @__PURE__ */ M("img", { alt: "header-close-icon", src: i }) }) })
 ] });
 export {
-  y as CommonHeader
+  E as CommonHeader
 };

package/lib/lib/gamification/detailed-insight/index.js

@@ -1,7 +1,7 @@
 import { jsxs as I, jsx as M } from "react/jsx-runtime";
 import { CommonHeader as Z } from "../common-header/index.js";
 import { Container as g, Image as l, AdditionalContent as o, Title as n, Description as d, AdditionalBtn as r, LinkIcon as a } from "./styles.js";
-import "../../../icon-exit-d3f9fc80.js";
+import "../../../icon-exit-6a55bb8f.js";
 import "../common-header/styles.js";
 import "@linaria/react";
 const u = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjbGFzcz0ic2MtQU5kc04ga1RWV0pFIj48cGF0aCBkPSJNNi42NjY1IDMuMTY2NjlINC45OTk4NEM0LjI2MzQ2IDMuMTY2NjkgMy42NjY1IDMuNzYzNjQgMy42NjY1IDQuNTAwMDJWMTEuNUMzLjY2NjUgMTIuMjM2NCA0LjI2MzQ2IDEyLjgzMzQgNC45OTk4NCAxMi44MzM0SDExLjk5OThDMTIuNzM2MiAxMi44MzM0IDEzLjMzMzIgMTIuMjM2NCAxMy4zMzMyIDExLjVWOS44MzMzNSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+PHBhdGggZD0iTTEzLjMzMzUgNi4xNjY2OVYzLjE2NjY5SDEwLjMzMzUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjxwYXRoIGQ9Ik0xMy4xNjY4IDMuMzMzMzFMOC4zMzM1IDguMTY2NjUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjwvc3ZnPgo=", C = ({

package/lib/lib/gamification/leaderboard-invite-link/index.js

@@ -0,0 +1,15 @@
+import { jsxs as N, jsx as M } from "react/jsx-runtime";
+import { Container as j, IconLink as T, FriendsIcon as A, Content as x, Title as y, Description as z, ArrowInviteIcon as E } from "./styles.js";
+import "@linaria/react";
+const L = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikh5cGVybGluayI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik0xLjUyIDhDMS41MiA2LjYzMiAyLjYzMiA1LjUyIDQgNS41Mkg3LjJWNEw0IDRDMS43OTIgNCAwIDUuNzkyIDAgOEMwIDEwLjIwOCAxLjc5MiAxMiA0IDEySDcuMkw3LjIgMTAuNDhINEMyLjYzMiAxMC40OCAxLjUyIDkuMzY4IDEuNTIgOFpNNC44IDguOEgxMS4yVjcuMkg0LjhWOC44Wk0xMiA0SDguOFY1LjUyTDEyIDUuNTJDMTMuMzY4IDUuNTIgMTQuNDggNi42MzIgMTQuNDggOEMxNC40OCA5LjM2OCAxMy4zNjggMTAuNDggMTIgMTAuNDhIOC44VjEySDEyQzE0LjIwOCAxMiAxNiAxMC4yMDggMTYgOEMxNiA1Ljc5MiAxNC4yMDggNCAxMiA0WiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8L3N2Zz4K", i = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiByeD0iMTYiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuMiIvPgo8cGF0aCBkPSJNMTAuNDYxNSAxMi42ODc1QzkuNDQyMzEgMTIuNjg3NSA4LjYxNTM4IDEzLjQ2NjUgOC42MTUzOCAxNC40MjY2QzguNjE1MzggMTUuMzg2OCA5LjQ0MjMxIDE2LjE2NTggMTAuNDYxNSAxNi4xNjU4QzExLjQ4MDggMTYuMTY1OCAxMi4zMDc3IDE1LjM4NjggMTIuMzA3NyAxNC40MjY2QzEyLjMwNzcgMTMuNDY2NSAxMS40ODA4IDEyLjY4NzUgMTAuNDYxNSAxMi42ODc1Wk0xMC40NjE1IDE2LjE2NThDOS4xMDgxNyAxNi4xNjU4IDggMTcuMjA5NyA4IDE4LjQ4NDZWMTkuNzUyN0M4IDE5Ljc1MjcgOC42MTUzOCAyMC4yMjM3IDEwLjQ2MTUgMjAuMjIzN0MxMi4zMDc3IDIwLjIyMzcgMTIuOTIzMSAxOS43NTI3IDEyLjkyMzEgMTkuNzUyN1YxOC40ODQ2QzEyLjkyMzEgMTcuMjA5NyAxMS44MTQ5IDE2LjE2NTggMTAuNDYxNSAxNi4xNjU4Wk0yMS41Mzg1IDEyLjY4NzVDMjAuNTE5MiAxMi42ODc1IDE5LjY5MjMgMTMuNDY2NSAxOS42OTIzIDE0LjQyNjZDMTkuNjkyMyAxNS4zODY4IDIwLjUxOTIgMTYuMTY1OCAyMS41Mzg1IDE2LjE2NThDMjIuNTU3NyAxNi4xNjU4IDIzLjM4NDYgMTUuMzg2OCAyMy4zODQ2IDE0LjQyNjZDMjMuMzg0NiAxMy40NjY1IDIyLjU1NzcgMTIuNjg3NSAyMS41Mzg1IDEyLjY4NzVaTTIxLjUzODUgMTYuMTY1OEMyMC4xODUxIDE2LjE2NTggMTkuMDc2OSAxNy4yMDk3IDE5LjA3NjkgMTguNDg0NlYxOS43NTI3QzE5LjA3NjkgMTkuNzUyNyAxOS42OTIzIDIwLjIyMzcgMjEuNTM4NSAyMC4yMjM3QzIzLjM4NDYgMjAuMjIzNyAyNCAxOS43NTI3IDI0IDE5Ljc1MjdWMTguNDg0NkMyNCAxNy4yMDk3IDIyLjg5MTggMTYuMTY1OCAyMS41Mzg1IDE2LjE2NThaTTE2IDE1LjAwNjNDMTQuOTgwOCAxNS4wMDYzIDE0LjE1MzggMTUuNzg1MyAxNC4xNTM4IDE2Ljc0NTVDMTQuMTUzOCAxNy43MDU2IDE0Ljk4MDggMTguNDg0NiAxNiAxOC40ODQ2QzE3LjAxOTIgMTguNDg0NiAxNy44NDYyIDE3LjcwNTYgMTcuODQ2MiAxNi43NDU1QzE3Ljg0NjIgMTUuNzg1MyAxNy4wMTkyIDE1LjAwNjMgMTYgMTUuMDA2M1pNMTYgMTguNDg0NkMxNC42NDY2IDE4LjQ4NDYgMTMuNTM4NSAxOS41Mjg1IDEzLjUzODUgMjAuODAzNFYyMi4wNzE1QzEzLjUzODUgMjIuMDcxNSAxNC4xNTM4IDIyLjU0MjUgMTYgMjIuNTQyNUMxNy44NDYyIDIyLjU0MjUgMTguNDYxNSAyMi4wNzE1IDE4LjQ2MTUgMjIuMDcxNVYyMC44MDM0QzE4LjQ2MTUgMTkuNTI4NSAxNy4zNTM0IDE4LjQ4NDYgMTYgMTguNDg0NloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xMy4zODk4IDlDMTIuMzA5MyA5IDExLjQzMjYgOS44MjU4NCAxMS40MzI2IDEwLjg0MzdDMTEuNDMyNiAxMS44NjE2IDEyLjMwOTMgMTIuNjg3NSAxMy4zODk4IDEyLjY4NzVDMTQuNDcwNCAxMi42ODc1IDE1LjM0NyAxMS44NjE2IDE1LjM0NyAxMC44NDM3QzE1LjM0NyA5LjgyNTg0IDE0LjQ3MDQgOSAxMy4zODk4IDlaTTEzLjM4OTggMTIuNjg3NUMxMy4xOTM2IDEyLjY4NzUgMTIuOTk0OCAxMi42ODI3IDEyLjc5ODYgMTIuNzQ1MUMxMy4xOTEgMTMuMjM3MiAxMy4zODk4IDEzLjg1NDIgMTMuMzg5OCAxNC41MzEyQzEzLjM4OTggMTQuNzc2MSAxMy4zMjg3IDE1LjAxNjEgMTMuMzI4NyAxNS4yNjFDMTMuODUxMSAxNC41MjQgMTQuNjk0NiAxNC4wMzkxIDE1LjY3MzIgMTMuOTE2NkMxNS4yMTcgMTMuMTc5NiAxNC4zNjg0IDEyLjY4NzUgMTMuMzg5OCAxMi42ODc1Wk0xOC42MDkgOUMxNy41Mjg1IDkgMTYuNjUxOCA5LjgyNTg0IDE2LjY1MTggMTAuODQzN0MxNi42NTE4IDExLjg2MTYgMTcuNTI4NSAxMi42ODc1IDE4LjYwOSAxMi42ODc1QzE5LjY4OTYgMTIuNjg3NSAyMC41NjYyIDExLjg2MTYgMjAuNTY2MiAxMC44NDM3QzIwLjU2NjIgOS44MjU4NCAxOS42ODk2IDkgMTguNjA5IDlaTTE4LjYwOSAxMi42ODc1QzE3LjYzMDQgMTIuNjg3NSAxNi43ODE4IDEzLjE3OTYgMTYuMzI1NiAxMy45MTY2QzE3LjMwNDIgMTQuMDM5MSAxOC4xNDc4IDE0LjUyNCAxOC42NzAyIDE1LjI2MUMxOC42NzAyIDE1LjAxNjEgMTguNjA5IDE0Ljc3NjEgMTguNjA5IDE0LjUzMTJDMTguNjA5IDEzLjg1NDIgMTguODA3OCAxMy4yMzcyIDE5LjIwMDMgMTIuNzQ1MUMxOS4wMDQgMTIuNjgyNyAxOC44MDUyIDEyLjY4NzUgMTguNjA5IDEyLjY4NzVaIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjQiLz4KPC9zdmc+Cg==", u = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlNoYXJlIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTExIDQuOTY1VjEuMTI1TDE4IDcuODQ1TDExIDE0LjU2NVYxMC42MjlDNiAxMC42MjkgMi41IDEyLjE2NSAwIDE1LjUyNUMxIDEwLjcyNSA0IDUuOTI1IDExIDQuOTY1WiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8L3N2Zz4K", c = ({ title: I, description: D, onClick: g }) => /* @__PURE__ */ N(j, { onClick: g, children: [
+  /* @__PURE__ */ M(T, { alt: "icon-link", src: L }),
+  /* @__PURE__ */ M(A, { alt: "friends-icon", src: i }),
+  /* @__PURE__ */ N(x, { children: [
+    /* @__PURE__ */ M(y, { children: I }),
+    /* @__PURE__ */ M(z, { children: D })
+  ] }),
+  /* @__PURE__ */ M(E, { alt: "arrow-invite-icon", src: u })
+] });
+export {
+  c as LeaderboardInviteLink
+};

package/lib/lib/gamification/leaderboard-invite-link/styles.js

@@ -0,0 +1,59 @@
+import { styled as i } from "@linaria/react";
+const e = i.div`
+  box-sizing: border-box;
+  display: flex;
+  padding: 4px 16px;
+  align-items: center;
+  border-radius: 8px;
+  width: 100%;
+  height: 58px;
+  min-height: 58px;
+  max-height: 58px;
+  background-color: var(--color-blue-primary);
+  overflow: hidden;
+  cursor: pointer;
+`, t = i.img`
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+`, r = i.img`
+  width: 32px;
+  height: 32px;
+  margin-right: 4px;
+`, n = i.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+  margin-right: 4px;
+  padding: 0px 4px;
+`, p = i.div`
+  text-transform: uppercase;
+  overflow: hidden;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--color-leaderboard-unit);
+  margin-bottom: 2px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`, d = i.div`
+  overflow: hidden;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--color-white);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`, x = i.img`
+  width: 18px;
+  height: 18px;
+`;
+export {
+  x as ArrowInviteIcon,
+  e as Container,
+  n as Content,
+  d as Description,
+  r as FriendsIcon,
+  t as IconLink,
+  p as Title
+};

package/lib/lib/gamification/leaderboard-item/index.js

@@ -0,0 +1,18 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { abbreviate as d } from "../../../utils/common.js";
+import { Container as l, RankPosition as c, Avatar as m, AvatarPlaceholder as h, Content as s, NameWrap as p, Name as b, Rank as f, Units as k } from "./styles.js";
+import "@linaria/react";
+const j = ({ rank: t, avatar: i, name: n, points: a, openItemDetail: o }) => /* @__PURE__ */ e(l, { onClick: o, children: [
+  /* @__PURE__ */ r(c, { children: t || 0 }),
+  i ? /* @__PURE__ */ r(m, { alt: "leaderboard-item-avatar", src: i }) : /* @__PURE__ */ r(h, { children: d(n || "") }),
+  /* @__PURE__ */ e(s, { children: [
+    /* @__PURE__ */ r(p, { children: /* @__PURE__ */ r(b, { children: n || "" }) }),
+    /* @__PURE__ */ e(f, { children: [
+      /* @__PURE__ */ r(k, { children: "PTS" }),
+      a || 0
+    ] })
+  ] })
+] });
+export {
+  j as LeaderboardItem
+};

package/lib/lib/gamification/leaderboard-item/styles.js

@@ -0,0 +1,80 @@
+import { styled as e } from "@linaria/react";
+const t = e.div`
+  box-sizing: border-box;
+  display: flex;
+  padding: 8px;
+  align-items: center;
+  border-radius: 8px;
+  width: 100%;
+  min-height: 50px;
+  max-height: 50px;
+  background-color: var(--color-bg-transparent-item-vote);
+  color: var(--color-white);
+  font-size: 14px;
+  font-weight: 600;
+  overflow: hidden;
+  cursor: pointer;
+`, r = e.div`
+  width: 28px;
+  max-width: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 4px;
+  overflow: hidden;
+`, n = e.img`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+`, o = e.div`
+  background: var(--color-grey-primary-onboarding-inapp);
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  text-align: center;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-white);
+  font-size: 12px;
+  flex-shrink: 0;
+`, a = e.div`
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 4px 4px 0px;
+  margin-right: 4px;
+  margin-left: 8px;
+  overflow: hidden;
+`, p = e.div`
+  display: flex;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+`, d = e.span`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-right: 4px;
+`, s = e.div`
+  display: flex;
+  align-items: center;
+  max-width: 75px;
+`, l = e.span`
+  font-size: 10px;
+  color: var(--color-leaderboard-unit);
+  margin-right: 4px;
+`;
+export {
+  n as Avatar,
+  o as AvatarPlaceholder,
+  t as Container,
+  a as Content,
+  d as Name,
+  p as NameWrap,
+  s as Rank,
+  r as RankPosition,
+  l as Units
+};

package/lib/lib/gamification/leaderboard-item-detail/index.js

@@ -0,0 +1,20 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { CommonHeader as i } from "../common-header/index.js";
+import { UserStatistics as p } from "../user-statistics/index.js";
+import { Container as e } from "./styles.js";
+import "../../../icon-exit-6a55bb8f.js";
+import "../common-header/styles.js";
+import "@linaria/react";
+import "../../../utils/common.js";
+import "../user-statistics/components/statistics/index.js";
+import "../user-statistics/components/statistics/styles.js";
+import "../user-statistics/components/rank/index.js";
+import "../user-statistics/components/rank/styles.js";
+import "../user-statistics/styles.js";
+const D = ({ comeBack: o, ...t }) => /* @__PURE__ */ m(e, { children: [
+  /* @__PURE__ */ r(i, { comeBack: o }),
+  /* @__PURE__ */ r(p, { ...t })
+] });
+export {
+  D as LeaderboardItemDetail
+};

package/lib/lib/gamification/leaderboard-item-detail/styles.js

@@ -0,0 +1,7 @@
+import { styled as o } from "@linaria/react";
+const i = o.div`
+  box-sizing: border-box;
+`;
+export {
+  i as Container
+};

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

@@ -0,0 +1,16 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { LeaderboardInviteLink as n } from "../leaderboard-invite-link/index.js";
+import { LeaderboardItem as m } from "../leaderboard-item/index.js";
+import { Container as p } from "./styles.js";
+import "../leaderboard-invite-link/styles.js";
+import "@linaria/react";
+import "../../../utils/common.js";
+import "../leaderboard-item/styles.js";
+const b = ({ items: o, openItemDetail: i }) => /* @__PURE__ */ t(p, { children: [
+  o.map((r) => /* @__PURE__ */ e(m, { ...r, openItemDetail: () => i(r.userId) }, r.userId)),
+  /* @__PURE__ */ e(n, { title: "Invite Link", description: "Challenge friends!", onClick: () => {
+  } })
+] });
+export {
+  b as LeaderboardList
+};

package/lib/lib/gamification/leaderboard-list/styles.js

@@ -0,0 +1,18 @@
+import { styled as o } from "@linaria/react";
+const t = o.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: 100%;
+  overflow-y: auto;
+  width: 100%;
+  padding: 12px 0px;
+
+  & > div {
+    margin-bottom: 8px;
+  }
+`;
+export {
+  t as Container
+};

package/lib/lib/gamification/navigation/index.js

@@ -0,0 +1,34 @@
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { Container as m, PageTitle as l } from "./styles.js";
+import "@linaria/react";
+var t = /* @__PURE__ */ ((r) => (r[r.HOME = 1] = "HOME", r[r.LEADERBOARD = 2] = "LEADERBOARD", r))(t || {});
+const E = ({ activePage: r = 1, toggleActivePage: o }) => /* @__PURE__ */ i(m, { children: [
+  /* @__PURE__ */ n(
+    l,
+    {
+      style: { borderBottom: r === 1 ? "2px solid var(--color-blue-primary)" : "none" },
+      onClick: () => o(
+        1
+        /* HOME */
+      ),
+      children: "Home"
+    }
+  ),
+  /* @__PURE__ */ n(
+    l,
+    {
+      style: {
+        borderBottom: r === 2 ? "2px solid var(--color-blue-primary)" : "none"
+      },
+      onClick: () => o(
+        2
+        /* LEADERBOARD */
+      ),
+      children: "Leader Board"
+    }
+  )
+] });
+export {
+  t as ActivePages,
+  E as Navigation
+};

package/lib/lib/gamification/navigation/styles.js

@@ -0,0 +1,26 @@
+import { styled as e } from "@linaria/react";
+const o = e.div`
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  color: var(--color-white);
+  font-size: 14px;
+  font-weight: 400;
+  overflow: hidden;
+  margin-bottom: 12px;
+  cursor: pointer;
+`, i = e.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 49%;
+  padding: 4px;
+`;
+export {
+  o as Container,
+  i as PageTitle
+};

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

@@ -1,7 +1,7 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { jsxs as l, jsx as t } 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 { i as D } from "../../../icon-exit-6a55bb8f.js";
+import { Container as N, OnboardingHeader as T, LeftBlock as j, GameIcon as p, RightBlock as E, SponsorLogo as G, CloseBtn as R, IconClose as A, 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";
@@ -27,29 +27,29 @@ const e = {
   inviteCardSubtext: S,
   inviteCardBtnLabel: y
 }) => {
-  const I = async () => {
+  const O = async () => {
     await f.submitInplay();
-  }, O = () => {
+  }, k = () => {
     b();
-  }, [a, h] = g(0), [o, t] = g(e);
+  }, [a, h] = g(0), [o, r] = g(e);
   B(() => {
-    n != null && n.length ? t({ ...e, steps: !0 }) : i != null && i.length ? t({ ...e, rules: !0 }) : t({ ...e, inviteCard: !0 });
+    n != null && n.length ? r({ ...e, steps: !0 }) : i != null && i.length ? r({ ...e, rules: !0 }) : r({ ...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]);
+  const x = w(() => {
+    n != null && n.length && a < n.length - 1 ? h((I) => ++I) : i != null && i.length && o.steps ? r({ ...e, rules: !0 }) : o.rules && r({ ...e, inviteCard: !0 });
+  }, [a, n == null ? void 0 : n.length, i == null ? void 0 : i.length, o, h, r]);
   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__ */ t(j, { children: c && /* @__PURE__ */ t(p, { alt: "sponsor-one-onboarding-icon", src: c }) }),
+      /* @__PURE__ */ l(E, { children: [
+        d && /* @__PURE__ */ t(G, { alt: "sponsor-two-onboarding-icon", src: d }),
+        /* @__PURE__ */ t(R, { onClick: k, children: /* @__PURE__ */ t(A, { 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(
+      o.steps && (n == null ? void 0 : n.length) && /* @__PURE__ */ t(P, { graphic: n[a].graphic, headline: n[a].headline }),
+      o.rules && /* @__PURE__ */ t(q, { rules: i, rulesTitle: u, primaryColor: m }),
+      o.inviteCard && /* @__PURE__ */ t(
         z,
         {
           inviteCardTitle: v,
@@ -58,7 +58,7 @@ const e = {
         }
       )
     ] }),
-    /* @__PURE__ */ r(L, { onClick: o.inviteCard ? I : k, children: o.rules ? C || "Got it!" : o.inviteCard ? y || "Play now!" : "Next" })
+    /* @__PURE__ */ t(L, { onClick: o.inviteCard ? O : x, children: o.rules ? C || "Got it!" : o.inviteCard ? y || "Play now!" : "Next" })
   ] });
 };
 export {

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

@@ -10,46 +10,46 @@ const a = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXd
   avatar: j,
   name: I,
   points: g,
-  grade: T,
-  friendsRank: z,
-  globalRank: O,
-  winStreak: i,
-  correct: u,
-  incorrect: L,
-  successRate: y
+  friendsRank: T,
+  rank: z,
+  streak: O,
+  correct: i,
+  incorrect: u,
+  inTop: L,
+  average: 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) })
+        !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 || "-" }),
+            /* @__PURE__ */ M(o, { children: g }),
             "RTS"
           ] }),
           /* @__PURE__ */ N(n, { children: [
             "TOP ",
-            T,
+            L || 0,
             "%"
           ] })
         ] })
       ] })
     ] }),
     /* @__PURE__ */ N(e, { children: [
-      /* @__PURE__ */ M(A, { title: "Friends rank", indicator: z || "-" }),
-      /* @__PURE__ */ M(A, { title: "Global rank", indicator: O || "-" })
+      /* @__PURE__ */ M(A, { title: "Friends rank", indicator: T || 0 }),
+      /* @__PURE__ */ M(A, { title: "Global rank", indicator: z || 0 })
     ] })
   ] }),
   /* @__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" })
+    /* @__PURE__ */ M(D, { indicator: O || 0, title: "Win streak" }),
+    /* @__PURE__ */ M(D, { indicator: i || 0, title: "Correct" }),
+    /* @__PURE__ */ M(D, { indicator: u || 0, title: "Incorrect" }),
+    /* @__PURE__ */ M(D, { indicator: `${y || 0}%`, title: "Success rate" })
   ] })
 ] });
 export {

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

@@ -23,14 +23,14 @@ const t = e.div`
   column-gap: 8px;
   flex: 1;
   overflow: hidden;
-`, a = e.img`
-  width: 100%;
-  height: 100%;
+`, p = e.img`
+  width: 48px;
+  height: 48px;
   border-radius: 50%;
   object-fit: cover;
   object-position: center;
   flex-shrink: 0;
-`, p = e.div`
+`, a = e.div`
   padding-top: 4px;
   display: flex;
   flex-direction: column;
@@ -95,7 +95,7 @@ const t = e.div`
   max-height: 48px;
 `;
 export {
-  a as Avatar,
+  p as Avatar,
   h as AvatarPlaceholder,
   i as BottomInfo,
   t as Container,
@@ -107,7 +107,7 @@ export {
   c as TrophyIcon,
   n as User,
   m as UserAccountBtn,
-  p as UserInfo,
+  a as UserInfo,
   s as UserName,
   d as UserRating
 };

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

@@ -1,6 +1,6 @@
 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 { i as E } from "../../../../../icon-exit-6a55bb8f.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";

package/lib/lib/notifications/decorator.js

@@ -8,7 +8,7 @@ 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 "../../icon-exit-6a55bb8f.js";
 import "./notification/question-inapp/styles.js";
 import "./notification/styles.js";
 import "./styles.js";

package/lib/lib/notifications/index.js

@@ -8,7 +8,7 @@ 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 "../../icon-exit-6a55bb8f.js";
 import "./notification/question-inapp/styles.js";
 import "./notification/styles.js";
 const S = ({ notificationsStore: i }) => {

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

@@ -6,7 +6,7 @@ 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 "../../../icon-exit-6a55bb8f.js";
 import "./question-inapp/styles.js";
 const l = {
   [i.ONBOARDING]: N,

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

@@ -1,19 +1,19 @@
 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 { useCallback as c } from "react";
+import { i as s } from "../../../../icon-exit-6a55bb8f.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(
+const B = ({ close: i, action: p, data: { color: r, icon: o, title: a } }) => {
+  const e = c(
     (l) => {
-      l.stopPropagation(), o == null || o();
+      l.stopPropagation(), i == null || i();
     },
-    [o]
+    [i]
   );
   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__ */ n(m, { style: r ? { backgroundColor: r } : {}, children: o && /* @__PURE__ */ n(C, { alt: "in-app-icon", src: o }) }),
     /* @__PURE__ */ t(h, { children: [
-      /* @__PURE__ */ n(I, { children: /* @__PURE__ */ n(f, { id: "in-app-title", children: c || "" }) }),
+      /* @__PURE__ */ n(I, { children: /* @__PURE__ */ n(f, { id: "in-app-title", children: a || "" }) }),
       /* @__PURE__ */ n(k, { children: /* @__PURE__ */ n(u, { onClick: e, children: /* @__PURE__ */ n(x, { alt: "close-in-app-icon", src: s }) }) })
     ] })
   ] });

package/lib/lib/theme/constants.js

@@ -10,6 +10,7 @@ const R = {
   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)",
+  LEADERBOARD_UNIT: "rgba(255, 255, 255, 0.5)",
   BLUE_PRIMARY: "#1589EE",
   RED_PRIMARY: "#CD2525",
   RED_SECONDARY: "#EB5757",
@@ -28,11 +29,11 @@ const R = {
   DIVIDER_COLOR_PRIMARY: "#2d3135",
   DIVIDER_COLOR_SECONDARY: "#53565a",
   GREEN_PRIMARY_BTN: "#009B77"
-}, _ = {
+}, E = {
   FAMILY: "Roboto, sans-serif",
   COLOR: "#fff"
 };
 export {
   R as COLORS,
-  _ as FONT
+  E as FONT
 };

package/lib/lib/theme/theme.js

@@ -1,6 +1,6 @@
 import { css as R } from "@linaria/core";
 import { COLORS as r, FONT as o } from "./constants.js";
-const _ = R`
+const n = R`
   --color-bg-transparent: ${r.BG_TRANSPARENT};
   --color-transparent-vote-container: ${r.BG_TRANSPARENT_VOTE_CONTAINER};
   --color-transparent-item: ${r.BG_TRANSPARENT_ITEM};
@@ -9,6 +9,7 @@ const _ = R`
   --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-leaderboard-unit: ${r.LEADERBOARD_UNIT};
   --color-blue-primary: ${r.BLUE_PRIMARY};
   --color-red-primary: ${r.RED_PRIMARY};
   --color-red-secondary: ${r.RED_SECONDARY};
@@ -16,6 +17,7 @@ const _ = R`
   --color-white: ${r.WHITE};
   --color-red-2: ${r.RED_2};
   --color-grey-primary: ${r.GREY_PRIMARY};
+  --color-grey-primary-onboarding-inapp: ${r.GREY_PRIMARY_ONBOARDING_INAPP};
   --color-divider-color-primary: ${r.DIVIDER_COLOR_PRIMARY};
   --color-divider-color-secondary: ${r.DIVIDER_COLOR_SECONDARY};
   --color-green-primary-btn: ${r.GREEN_PRIMARY_BTN};
@@ -23,5 +25,5 @@ const _ = R`
   --font-color: ${o.COLOR};
 `;
 export {
-  _ as theme
+  n as theme
 };