@streamlayer/react-ui 0.24.3 → 0.25.1

package/lib/{lib → ui}/demo/index.js

@@ -1,24 +1,26 @@
-import { jsx as i, jsxs as l, Fragment as S } from "react/jsx-runtime";
-import { FeatureStatus as f } from "@streamlayer/sdk-web-interfaces";
-import { FeatureType as s } from "@streamlayer/sdk-web-types";
-import { AvailableFeatures as v } from "@streamlayer/sdk-web-features";
-import { useState as b, useMemo as d, useEffect as C } from "react";
+import { jsx as i, jsxs as f, Fragment as v } from "react/jsx-runtime";
+import { FeatureStatus as l } from "@streamlayer/sdk-web-interfaces";
+import { FeatureType as g } from "@streamlayer/sdk-web-types";
+import { AvailableFeatures as S } from "@streamlayer/sdk-web-features";
+import { useState as b, useMemo as h, useEffect as C } from "react";
 import { useStore as c } from "@nanostores/react";
 import { Notifications as F } from "../notifications/index.js";
 import { GamificationComponent as w } from "./Gamification.js";
-import { HighlightsComponent as B } from "./Highlights.js";
-import { LoginComponent as G } from "./Login.js";
-import { Buttons as H, Button as g } from "./styles.js";
+import { HighlightsComponent as G } from "./Highlights.js";
+import { LoginComponent as H } from "./Login.js";
+import { Buttons as x, Button as s } from "./styles.js";
 import "../notifications/notification/index.js";
 import "@streamlayer/sdk-web-notifications";
 import "../notifications/notification/onboarding-inapp/index.js";
 import "../notifications/notification/onboarding-inapp/styles.js";
 import "@linaria/react";
 import "../notifications/notification/question-inapp/index.js";
-import "../../icon-exit-d3f9fc80.js";
+import "../../icon-exit-6a55bb8f.js";
 import "../notifications/notification/question-inapp/styles.js";
 import "../notifications/notification/styles.js";
 import "../notifications/styles.js";
+import "../gamification/navigation/index.js";
+import "../gamification/navigation/styles.js";
 import "./components/UserSummary.js";
 import "../gamification/user-statistics/index.js";
 import "../../utils/common.js";
@@ -35,7 +37,7 @@ import "../gamification/question/styles.js";
 import "../gamification/question-list/styles.js";
 import "./components/Question.js";
 import "../gamification/vote/index.js";
-import "../../index-d5620d2c.js";
+import "../../index-7045fbb2.js";
 import "../gamification/vote/components/voting-option/styles.js";
 import "../gamification/vote/styles.js";
 import "../gamification/vote/components/voting-header/index.js";
@@ -58,12 +60,21 @@ import "../gamification/insight/styles.js";
 import "../gamification/insight-list/styles.js";
 import "../gamification/common-header/styles.js";
 import "../gamification/detailed-insight/styles.js";
+import "./components/Leaderboard.js";
+import "../gamification/leaderboard-item-detail/index.js";
+import "../gamification/common-header/index.js";
+import "../gamification/leaderboard-item-detail/styles.js";
+import "../gamification/leaderboard-list/index.js";
+import "../gamification/leaderboard-invite-link/index.js";
+import "../gamification/leaderboard-invite-link/styles.js";
+import "../gamification/leaderboard-item/index.js";
+import "../gamification/leaderboard-item/styles.js";
+import "../gamification/leaderboard-list/styles.js";
 import "./components/Insights.js";
 import "../gamification/insight-list/index.js";
 import "../gamification/insight/index.js";
 import "./components/Insight.js";
 import "../gamification/detailed-insight/index.js";
-import "../gamification/common-header/index.js";
 import "../login/index.js";
 import "react-phone-number-input";
 import "react-auth-code-input";
@@ -72,37 +83,38 @@ import "@connectrpc/connect-web";
 import "@connectrpc/connect";
 import "@streamlayer/sl-eslib/users/users_connect";
 import "../login/styles.js";
-const x = ({ activeFeature: o, sdk: r }) => {
-  const [e, p] = b(null), { organizationSettings: a, streamSettings: u } = c(r.sdkStore), h = d(() => {
+const A = ({ activeFeature: r, sdk: o }) => {
+  const [e, n] = b(null), { organizationSettings: a, streamSettings: u } = c(o.sdkStore), y = h(() => {
     const t = (u == null ? void 0 : u.data) || (a == null ? void 0 : a.data);
     return t != null && t.overlays ? t.overlays : [];
   }, [a, u]);
   C(() => {
-    const t = r.getFeatures();
-    if (o)
-      for (const [m, n] of t)
-        m === o ? n.status.get() === f.Suspended && (n.enable(), p(n)) : n.status.get() === f.Ready && n.disable();
+    const t = o.getFeatures();
+    if (r)
+      for (const [m, p] of t)
+        m === r ? p.status.get() === l.Suspended && (p.enable(), n(p)) : p.status.get() === l.Ready && p.disable();
     else {
       for (const [, m] of t)
-        m.status.get() === f.Ready && m.disable();
-      p(null);
+        m.status.get() === l.Ready && m.disable();
+      n(null);
     }
     return () => {
       for (const [, m] of t)
-        m.status.get() === f.Ready && m.disable();
+        m.status.get() === l.Ready && m.disable();
     };
-  }, [o, r]);
-  const y = d(() => e ? e.featureConfig.get().type === s.GAMES ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(w, { gamification: e, sdk: r }) }) : /* @__PURE__ */ i("div", { children: "wait gamification..." }) : e.featureConfig.get().type === s.HIGHLIGHTS ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(B, { highlights: e, sdk: r }) }) : /* @__PURE__ */ i("div", { children: "wait highlights..." }) : /* @__PURE__ */ i("div", { children: "unknown feature" }) : null, [r, e]);
-  return /* @__PURE__ */ l("div", { children: [
-    /* @__PURE__ */ l(H, { children: [
-      /* @__PURE__ */ i(g, { onClick: () => r.logout(), children: "logout" }),
-      h.map((t) => /* @__PURE__ */ l(
-        g,
+  }, [r, o]);
+  const d = h(() => e ? e.featureConfig.get().type === g.GAMES ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(w, { gamification: e, sdk: o }) }) : /* @__PURE__ */ i("div", { children: "wait gamification..." }) : e.featureConfig.get().type === g.HIGHLIGHTS ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(G, { highlights: e, sdk: o }) }) : /* @__PURE__ */ i("div", { children: "wait highlights..." }) : /* @__PURE__ */ i("div", { children: "unknown feature" }) : null, [o, e]);
+  return /* @__PURE__ */ f("div", { children: [
+    /* @__PURE__ */ f(x, { children: [
+      /* @__PURE__ */ i(s, { onClick: () => o.closeFeature(), disabled: !d, children: "close" }),
+      /* @__PURE__ */ i(s, { onClick: () => o.logout(), children: "logout" }),
+      y.map((t) => /* @__PURE__ */ f(
+        s,
         {
-          onClick: () => r.openFeature(t.type),
-          disabled: !(t.type in v),
-          "data-enableSdkButton": t.enableSdkButton.toString(),
-          "data-selected": t.type === o,
+          onClick: () => o.openFeature(t.type),
+          disabled: !(t.type in S),
+          "data-enable_sdk_button": t.enableSdkButton.toString(),
+          "data-selected": t.type === r,
           children: [
             /* @__PURE__ */ i("img", { src: t.icon, alt: "" }),
             t.name
@@ -111,15 +123,15 @@ const x = ({ activeFeature: o, sdk: r }) => {
         t.name
       ))
     ] }),
-    y
+    d
   ] });
-}, Yt = ({ sdk: o }) => {
-  const r = c(o.organizationStore()), e = c(o.getUserStore()), p = c(o.getActiveFeature());
-  return r.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : r.data ? e.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : e.data ? /* @__PURE__ */ l(S, { children: [
-    /* @__PURE__ */ i(F, { notificationsStore: o.getNotificationsStore() }),
-    /* @__PURE__ */ i(x, { sdk: o, activeFeature: p })
-  ] }) : /* @__PURE__ */ i(G, { sdk: o }) : /* @__PURE__ */ i("div", { children: "wrong sdk key..." });
+}, mi = ({ sdk: r }) => {
+  const o = c(r.organizationStore()), e = c(r.getUserStore()), n = c(r.getActiveFeature());
+  return o.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : o.data ? e.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : e.data ? /* @__PURE__ */ f(v, { children: [
+    /* @__PURE__ */ i(F, { notificationsStore: r.getNotificationsStore() }),
+    /* @__PURE__ */ i(A, { sdk: r, activeFeature: n })
+  ] }) : /* @__PURE__ */ i(H, { sdk: r }) : /* @__PURE__ */ i("div", { children: "wrong sdk key..." });
 };
 export {
-  Yt as Demo
+  mi as Demo
 };

package/lib/{lib → ui}/demo/styles.js

@@ -45,7 +45,7 @@ const e = o.div`
     cursor: default;
   }
 
-  &[data-enableSdkButton='false'] {
+  &[data-enable_sdk_button='false'] {
     opacity: 0.7;
   }
 `;

package/lib/{lib → ui}/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 → ui}/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/ui/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/ui/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/ui/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/ui/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/ui/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/ui/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/ui/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/ui/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/ui/gamification/navigation/index.js

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

package/lib/ui/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 → ui}/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 → ui}/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 {