@streamlayer/react-ui 0.38.0 → 0.40.0

package/lib/ui/gamification/user-statistics/components/rank/styles.js

@@ -1,22 +1,25 @@
 import { styled as e } from "@linaria/react";
 const t = e.div`
   display: flex;
-  justify-content: flex-end;
   align-items: center;
-  column-gap: 2px;
+  flex: 1;
+  justify-content: space-between;
+  padding: 9px 8px;
+  color: var(--color-neutrals-white);
+  border-radius: 4px;
+  background-color: var(--color-primary-green2);
   overflow: hidden;
+`, r = e.div`
+  font-size: 9px;
+  line-height: 14px;
+  text-transform: uppercase;
+  opacity: 0.8;
 `, i = e.div`
-  width: 75px;
-`, n = e.div`
   font-size: 14px;
-  color: #fff;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 25px;
+  line-height: 16px;
 `;
 export {
   t as Container,
-  n as Indicator,
-  i as Title
+  i as Indicator,
+  r as Title
 };

package/lib/ui/gamification/user-statistics/components/statistic/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface StatisticProps {
+    indicator: string | number;
+    title: 'Win streak' | 'Correct' | 'Incorrect' | 'Succ. rate';
+}
+export declare const Statistic: React.FC<StatisticProps>;
+export {};

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

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

package/lib/ui/gamification/user-statistics/components/{statistics → statistic}/styles.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Indicator: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Title: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/gamification/user-statistics/components/statistic/styles.js

@@ -0,0 +1,23 @@
+import { styled as t } from "@linaria/react";
+const i = t.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  row-gap: 4px;
+  padding-top: 2px;
+  color: var(--color-neutrals-white);
+  text-align: center;
+`, o = t.div`
+  font-size: 14px;
+  line-height: 16px;
+`, n = t.div`
+  font-size: 9px;
+  line-height: 14px;
+  text-transform: uppercase;
+  opacity: 0.8;
+`;
+export {
+  i as Container,
+  o as Indicator,
+  n as Title
+};

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

@@ -1,12 +1,12 @@
 import { jsxs as N, jsx as M } from "react/jsx-runtime";
-import { abbreviate as c } from "../../../utils/common.js";
+import { abbreviate as y, formatDecimals as x } from "../../../utils/common.js";
 import { Rank as A } from "./components/rank/index.js";
-import { Statistics as D } from "./components/statistics/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 { Statistic as D } from "./components/statistic/index.js";
+import { Container as U, TopInfo as w, User as k, UserAccountBtn as r, Avatar as t, AvatarPlaceholder as S, UserInfo as E, UserName as Q, UserRating as C, Rts as Y, TrophyIcon as n, RtsIndicator as e, RtsLabel as o, Divider as l, BottomInfo as a, Ranks as d, Statistics as s } from "./styles.js";
 import "./components/rank/styles.js";
 import "@linaria/react";
-import "./components/statistics/styles.js";
-const a = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlRyb3BoeSI+CjxwYXRoIGlkPSJDb21iaW5lZCBTaGFwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjc2OTE2IDMuNTAwMDJDMi43NjkxNiA0LjQ5Nzg2IDIuOTQ3MDUgNS4zODM0OCAzLjMwMjgyIDYuMTU2OTJDMi42MjQ5MyA2LjAxODQ3IDIuMDU4ODMgNS43NDg3MiAxLjYwNDUgNS4zNDc2OEMxLjE1MDE3IDQuOTQ2NjMgMC45MjMwMDggNC41NTk5MiAwLjkyMzAwOCA0LjE4NzUyVjMuNTAwMDJIMi43NjkxNlpNMTEuMDc2OCAzLjUwMDAyVjQuMTg3NTJDMTEuMDc2OCA0LjU1OTkyIDEwLjg0OTcgNC45NDY2MyAxMC4zOTUzIDUuMzQ3NjhDOS45NDEgNS43NDg3MiA5LjM3NDkgNi4wMTg0NyA4LjY5NzAxIDYuMTU2OTJDOS4wNTI3OCA1LjM4MzQ4IDkuMjMwNjYgNC40OTc4NiA5LjIzMDY2IDMuNTAwMDJIMTEuMDc2OFpNMTIgNC4xODc1VjMuMjcwODNDMTIgMy4wNzk4NiAxMS45MzI3IDIuOTE3NTQgMTEuNzk4MSAyLjc4Mzg1QzExLjY2MzUgMi42NTAxNyAxMS41IDIuNTgzMzMgMTEuMzA3NyAyLjU4MzMzSDkuMjMwNzdWMS44OTU4M0M5LjIzMDc3IDEuNTgwNzMgOS4xMTc3OSAxLjMxMDk4IDguODkxODMgMS4wODY1OUM4LjY2NTg2IDAuODYyMTk1IDguMzk0MjMgMC43NSA4LjA3NjkyIDAuNzVIMy45MjMwOEMzLjYwNTc3IDAuNzUgMy4zMzQxNCAwLjg2MjE5NSAzLjEwODE3IDEuMDg2NTlDMi44ODIyMSAxLjMxMDk4IDIuNzY5MjMgMS41ODA3MyAyLjc2OTIzIDEuODk1ODNWMi41ODMzM0gwLjY5MjMwOEMwLjQ5OTk5OSAyLjU4MzMzIDAuMzM2NTM5IDIuNjUwMTcgMC4yMDE5MjMgMi43ODM4NUMwLjA2NzMwNyAyLjkxNzU0IDAgMy4wNzk4NiAwIDMuMjcwODNWNC4xODc1QzAgNC41MjY0OCAwLjA5OTc1ODYgNC44Njc4NCAwLjI5OTI3OSA1LjIxMTU5QzAuNDk4Nzk5IDUuNTU1MzQgMC43NjgwMjcgNS44NjU2NyAxLjEwNjk3IDYuMTQyNThDMS40NDU5MiA2LjQxOTQ5IDEuODYxNzggNi42NTIyMyAyLjM1NDU3IDYuODQwODJDMi44NDczNiA3LjAyOTQxIDMuMzY1MzggNy4xMzU2MyAzLjkwODY1IDcuMTU5NTFDNC4xMTA1OCA3LjQxNzMyIDQuMzM4OTQgNy42NDQxIDQuNTkzNzUgNy44Mzk4NEM0Ljc3NjQ0IDguMDAyMTcgNC45MDI2NCA4LjE3NTI0IDQuOTcyMzYgOC4zNTkwNUM1LjA0MjA3IDguNTQyODYgNS4wNzY5MiA4Ljc1NjUxIDUuMDc2OTIgOUM1LjA3NjkyIDkuMjU3ODEgNS4wMDM2MSA5LjQ3NTA0IDQuODU2OTcgOS42NTE2OUM0LjcxMDM0IDkuODI4MzQgNC40NzU5NiA5LjkxNjY3IDQuMTUzODUgOS45MTY2N0MzLjc5MzI3IDkuOTE2NjcgMy40NzIzNiAxMC4wMjUzIDMuMTkxMTEgMTAuMjQyNUMyLjkwOTg1IDEwLjQ1OTcgMi43NjkyMyAxMC43MzMxIDIuNzY5MjMgMTEuMDYyNVYxMS41MjA4QzIuNzY5MjMgMTEuNTg3NyAyLjc5MDg3IDExLjY0MjYgMi44MzQxMyAxMS42ODU1QzIuODc3NCAxMS43Mjg1IDIuOTMyNjkgMTEuNzUgMyAxMS43NUg5QzkuMDY3MzEgMTEuNzUgOS4xMjI2IDExLjcyODUgOS4xNjU4NiAxMS42ODU1QzkuMjA5MTMgMTEuNjQyNiA5LjIzMDc3IDExLjU4NzcgOS4yMzA3NyAxMS41MjA4VjExLjA2MjVDOS4yMzA3NyAxMC43MzMxIDkuMDkwMTUgMTAuNDU5NyA4LjgwODg5IDEwLjI0MjVDOC41Mjc2NCAxMC4wMjUzIDguMjA2NzMgOS45MTY2NyA3Ljg0NjE1IDkuOTE2NjdDNy41MjQwNCA5LjkxNjY3IDcuMjg5NjYgOS44MjgzNCA3LjE0MzAzIDkuNjUxNjlDNi45OTYzOSA5LjQ3NTA0IDYuOTIzMDggOS4yNTc4MSA2LjkyMzA4IDlDNi45MjMwOCA4Ljc1NjUxIDYuOTU3OTMgOC41NDI4NiA3LjAyNzY0IDguMzU5MDVDNy4wOTczNiA4LjE3NTI0IDcuMjIzNTYgOC4wMDIxNyA3LjQwNjI1IDcuODM5ODRDNy42NjEwNiA3LjY0NDEgNy44ODk0MiA3LjQxNzMyIDguMDkxMzUgNy4xNTk1MUM4LjYzNDYyIDcuMTM1NjMgOS4xNTI2NCA3LjAyOTQxIDkuNjQ1NDMgNi44NDA4MkMxMC4xMzgyIDYuNjUyMjMgMTAuNTU0MSA2LjQxOTQ5IDEwLjg5MyA2LjE0MjU4QzExLjIzMiA1Ljg2NTY3IDExLjUwMTIgNS41NTUzNCAxMS43MDA3IDUuMjExNTlDMTEuOTAwMiA0Ljg2Nzg0IDEyIDQuNTI2NDggMTIgNC4xODc1Wk01LjA3MDMzIDUuMzg0OTFMNi4wMzgzIDQuODc1MDNMNy4wMDYyNyA1LjM4NDkxTDYuODIxNCA0LjMwNDk3TDcuNjA0NTEgMy41NDAxNkw2LjUyMjI4IDMuMzgyNkw2LjAzODMgMi40MDAwM0w1LjU1NDMxIDMuMzgyNkw0LjQ3MjA5IDMuNTQwMTZMNS4yNTUxOSA0LjMwNDk3TDUuMDcwMzMgNS4zODQ5MVoiIGZpbGw9IiNGMkM5NEMiLz4KPC9nPgo8L3N2Zz4K", V = ({
+import "./components/statistic/styles.js";
+const m = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlRyb3BoeSI+CjxwYXRoIGlkPSJDb21iaW5lZCBTaGFwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjc2OTE2IDMuNTAwMDJDMi43NjkxNiA0LjQ5Nzg2IDIuOTQ3MDUgNS4zODM0OCAzLjMwMjgyIDYuMTU2OTJDMi42MjQ5MyA2LjAxODQ3IDIuMDU4ODMgNS43NDg3MiAxLjYwNDUgNS4zNDc2OEMxLjE1MDE3IDQuOTQ2NjMgMC45MjMwMDggNC41NTk5MiAwLjkyMzAwOCA0LjE4NzUyVjMuNTAwMDJIMi43NjkxNlpNMTEuMDc2OCAzLjUwMDAyVjQuMTg3NTJDMTEuMDc2OCA0LjU1OTkyIDEwLjg0OTcgNC45NDY2MyAxMC4zOTUzIDUuMzQ3NjhDOS45NDEgNS43NDg3MiA5LjM3NDkgNi4wMTg0NyA4LjY5NzAxIDYuMTU2OTJDOS4wNTI3OCA1LjM4MzQ4IDkuMjMwNjYgNC40OTc4NiA5LjIzMDY2IDMuNTAwMDJIMTEuMDc2OFpNMTIgNC4xODc1VjMuMjcwODNDMTIgMy4wNzk4NiAxMS45MzI3IDIuOTE3NTQgMTEuNzk4MSAyLjc4Mzg1QzExLjY2MzUgMi42NTAxNyAxMS41IDIuNTgzMzMgMTEuMzA3NyAyLjU4MzMzSDkuMjMwNzdWMS44OTU4M0M5LjIzMDc3IDEuNTgwNzMgOS4xMTc3OSAxLjMxMDk4IDguODkxODMgMS4wODY1OUM4LjY2NTg2IDAuODYyMTk1IDguMzk0MjMgMC43NSA4LjA3NjkyIDAuNzVIMy45MjMwOEMzLjYwNTc3IDAuNzUgMy4zMzQxNCAwLjg2MjE5NSAzLjEwODE3IDEuMDg2NTlDMi44ODIyMSAxLjMxMDk4IDIuNzY5MjMgMS41ODA3MyAyLjc2OTIzIDEuODk1ODNWMi41ODMzM0gwLjY5MjMwOEMwLjQ5OTk5OSAyLjU4MzMzIDAuMzM2NTM5IDIuNjUwMTcgMC4yMDE5MjMgMi43ODM4NUMwLjA2NzMwNyAyLjkxNzU0IDAgMy4wNzk4NiAwIDMuMjcwODNWNC4xODc1QzAgNC41MjY0OCAwLjA5OTc1ODYgNC44Njc4NCAwLjI5OTI3OSA1LjIxMTU5QzAuNDk4Nzk5IDUuNTU1MzQgMC43NjgwMjcgNS44NjU2NyAxLjEwNjk3IDYuMTQyNThDMS40NDU5MiA2LjQxOTQ5IDEuODYxNzggNi42NTIyMyAyLjM1NDU3IDYuODQwODJDMi44NDczNiA3LjAyOTQxIDMuMzY1MzggNy4xMzU2MyAzLjkwODY1IDcuMTU5NTFDNC4xMTA1OCA3LjQxNzMyIDQuMzM4OTQgNy42NDQxIDQuNTkzNzUgNy44Mzk4NEM0Ljc3NjQ0IDguMDAyMTcgNC45MDI2NCA4LjE3NTI0IDQuOTcyMzYgOC4zNTkwNUM1LjA0MjA3IDguNTQyODYgNS4wNzY5MiA4Ljc1NjUxIDUuMDc2OTIgOUM1LjA3NjkyIDkuMjU3ODEgNS4wMDM2MSA5LjQ3NTA0IDQuODU2OTcgOS42NTE2OUM0LjcxMDM0IDkuODI4MzQgNC40NzU5NiA5LjkxNjY3IDQuMTUzODUgOS45MTY2N0MzLjc5MzI3IDkuOTE2NjcgMy40NzIzNiAxMC4wMjUzIDMuMTkxMTEgMTAuMjQyNUMyLjkwOTg1IDEwLjQ1OTcgMi43NjkyMyAxMC43MzMxIDIuNzY5MjMgMTEuMDYyNVYxMS41MjA4QzIuNzY5MjMgMTEuNTg3NyAyLjc5MDg3IDExLjY0MjYgMi44MzQxMyAxMS42ODU1QzIuODc3NCAxMS43Mjg1IDIuOTMyNjkgMTEuNzUgMyAxMS43NUg5QzkuMDY3MzEgMTEuNzUgOS4xMjI2IDExLjcyODUgOS4xNjU4NiAxMS42ODU1QzkuMjA5MTMgMTEuNjQyNiA5LjIzMDc3IDExLjU4NzcgOS4yMzA3NyAxMS41MjA4VjExLjA2MjVDOS4yMzA3NyAxMC43MzMxIDkuMDkwMTUgMTAuNDU5NyA4LjgwODg5IDEwLjI0MjVDOC41Mjc2NCAxMC4wMjUzIDguMjA2NzMgOS45MTY2NyA3Ljg0NjE1IDkuOTE2NjdDNy41MjQwNCA5LjkxNjY3IDcuMjg5NjYgOS44MjgzNCA3LjE0MzAzIDkuNjUxNjlDNi45OTYzOSA5LjQ3NTA0IDYuOTIzMDggOS4yNTc4MSA2LjkyMzA4IDlDNi45MjMwOCA4Ljc1NjUxIDYuOTU3OTMgOC41NDI4NiA3LjAyNzY0IDguMzU5MDVDNy4wOTczNiA4LjE3NTI0IDcuMjIzNTYgOC4wMDIxNyA3LjQwNjI1IDcuODM5ODRDNy42NjEwNiA3LjY0NDEgNy44ODk0MiA3LjQxNzMyIDguMDkxMzUgNy4xNTk1MUM4LjYzNDYyIDcuMTM1NjMgOS4xNTI2NCA3LjAyOTQxIDkuNjQ1NDMgNi44NDA4MkMxMC4xMzgyIDYuNjUyMjMgMTAuNTU0MSA2LjQxOTQ5IDEwLjg5MyA2LjE0MjU4QzExLjIzMiA1Ljg2NTY3IDExLjUwMTIgNS41NTUzNCAxMS43MDA3IDUuMjExNTlDMTEuOTAwMiA0Ljg2Nzg0IDEyIDQuNTI2NDggMTIgNC4xODc1Wk01LjA3MDMzIDUuMzg0OTFMNi4wMzgzIDQuODc1MDNMNy4wMDYyNyA1LjM4NDkxTDYuODIxNCA0LjMwNDk3TDcuNjA0NTEgMy41NDAxNkw2LjUyMjI4IDMuMzgyNkw2LjAzODMgMi40MDAwM0w1LjU1NDMxIDMuMzgyNkw0LjQ3MjA5IDMuNTQwMTZMNS4yNTUxOSA0LjMwNDk3TDUuMDcwMzMgNS4zODQ5MVoiIGZpbGw9IiNGMkM5NEMiLz4KPC9nPgo8L3N2Zz4K", W = ({
   avatar: j,
   name: I,
   points: g,
@@ -16,42 +16,45 @@ const a = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXd
   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 || "") })
-      ] }),
-      /* @__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 ",
-            L || 0,
-            "%"
+  average: c
+}) => /* @__PURE__ */ N(U, { children: [
+  /* @__PURE__ */ M(w, { children: /* @__PURE__ */ N(k, { children: [
+    /* @__PURE__ */ N(r, { children: [
+      j && /* @__PURE__ */ M(t, { alt: "avatar", src: j }),
+      !j && /* @__PURE__ */ M(S, { children: y(I || "") })
+    ] }),
+    /* @__PURE__ */ N(E, { children: [
+      /* @__PURE__ */ M(Q, { children: I }),
+      /* @__PURE__ */ N(C, { children: [
+        /* @__PURE__ */ N(Y, { children: [
+          /* @__PURE__ */ M(n, { alt: "rank-icon", src: m }),
+          /* @__PURE__ */ N(e, { children: [
+            x(g),
+            /* @__PURE__ */ M(o, { children: "PTS" })
           ] })
+        ] }),
+        /* @__PURE__ */ M(l, {}),
+        /* @__PURE__ */ N("div", { children: [
+          "TOP ",
+          L || 0,
+          "%"
         ] })
       ] })
+    ] })
+  ] }) }),
+  /* @__PURE__ */ N(a, { children: [
+    /* @__PURE__ */ N(d, { children: [
+      /* @__PURE__ */ M(A, { indicator: T || 0, title: "Friends rank" }),
+      /* @__PURE__ */ M(A, { indicator: z || 0, title: "Global rank" })
     ] }),
-    /* @__PURE__ */ N(e, { children: [
-      /* @__PURE__ */ M(A, { title: "Friends rank", indicator: T || 0 }),
-      /* @__PURE__ */ M(A, { title: "Global rank", indicator: z || 0 })
+    /* @__PURE__ */ N(s, { children: [
+      /* @__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: `${c || 0}%`, title: "Succ. rate" })
     ] })
-  ] }),
-  /* @__PURE__ */ N(l, { children: [
-    /* @__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 {
-  V as UserStatistics
+  W as UserStatistics
 };

package/lib/ui/gamification/user-statistics/styles.d.ts

@@ -10,7 +10,9 @@ export declare const UserRating: import("@linaria/react").StyledComponent<import
 export declare const TrophyIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
 export declare const Rts: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const RtsIndicator: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Top: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const RtsLabel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Divider: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Ranks: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Statistics: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const AvatarPlaceholder: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const UserAccountBtn: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;

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

@@ -1,72 +1,81 @@
 import { styled as e } from "@linaria/react";
-const t = e.div`
-  background-color: var(--color-transparent-user-container);
-  border-radius: 12px;
-  color: var(--color-grey-primary);
-  font-size: 10px;
-  font-weight: 600;
-`, r = e.div`
+const o = e.div`
   padding: 12px;
-  border-bottom: 1px solid var(--color-divider-color-primary);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  column-gap: 5px;
+  font-weight: var(--font-weight-default);
+  background-color: var(--color-primary-green1);
+  border-radius: 12px;
 `, i = e.div`
-  padding: 12px 16px;
-  text-transform: uppercase;
+  margin-bottom: 12px;
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  column-gap: 16px;
+  column-gap: 8px;
 `, n = e.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+`, r = e.div`
   display: flex;
   column-gap: 8px;
   flex: 1;
   overflow: hidden;
-`, p = e.img`
+`, a = e.img`
   width: 48px;
   height: 48px;
   border-radius: 50%;
   object-fit: cover;
   object-position: center;
   flex-shrink: 0;
-`, a = e.div`
-  padding-top: 4px;
+`, s = e.div`
   display: flex;
   flex-direction: column;
-  row-gap: 4px;
+  row-gap: 6px;
   overflow: hidden;
-`, s = e.div`
-  font-size: 18px;
+`, c = e.div`
   color: var(--color-white);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-`, d = e.div`
-  text-transform: uppercase;
+`, p = e.div`
   display: flex;
   align-items: center;
-`, c = e.img`
-  width: 12px;
-  height: 12px;
-  margin-right: 4px;
-`, l = e.div`
+  column-gap: 8px;
+  height: 14px;
+  color: var(--color-neutrals-white);
+  font-size: 14px;
+  text-transform: uppercase;
+`, l = e.img`
+  width: 15px;
+  height: 15px;
+`, d = e.div`
   display: flex;
   align-items: center;
   column-gap: 4px;
-  border-right: 1px solid var(--color-divider-color-secondary);
-  padding-right: 5px;
 `, x = e.div`
-  font-size: 14px;
-  color: var(--color-white);
+  display: flex;
+  align-items: baseline;
+  column-gap: 4px;
 `, f = e.div`
-  padding-left: 5px;
+  font-size: 9px;
+  opacity: 0.8;
 `, g = e.div`
-  text-transform: uppercase;
-  display: flex;
-  flex-direction: column;
-  row-gap: 4px;
+  width: 1px;
+  height: 10px;
+  background-color: var(--color-white);
+  opacity: 0.2;
 `, h = e.div`
+  display: flex;
+  column-gap: 8px;
+`, u = e.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-radius: 4px;
+  background-color: var(--color-primary-green2);
+`, m = e.div`
   background: #2d6ffd;
   border-radius: 50%;
   width: 48px;
@@ -79,7 +88,7 @@ const t = e.div`
   color: #fff;
   font-size: 18px;
   flex-shrink: 0;
-`, m = e.button`
+`, v = e.button`
   border: none;
   outline: none;
   background-color: transparent;
@@ -95,19 +104,21 @@ const t = e.div`
   max-height: 48px;
 `;
 export {
-  p as Avatar,
-  h as AvatarPlaceholder,
-  i as BottomInfo,
-  t as Container,
-  g as Ranks,
-  l as Rts,
+  a as Avatar,
+  m as AvatarPlaceholder,
+  n as BottomInfo,
+  o as Container,
+  g as Divider,
+  h as Ranks,
+  d as Rts,
   x as RtsIndicator,
-  f as Top,
-  r as TopInfo,
-  c as TrophyIcon,
-  n as User,
-  m as UserAccountBtn,
-  a as UserInfo,
-  s as UserName,
-  d as UserRating
+  f as RtsLabel,
+  u as Statistics,
+  i as TopInfo,
+  l as TrophyIcon,
+  r as User,
+  v as UserAccountBtn,
+  s as UserInfo,
+  c as UserName,
+  p as UserRating
 };

package/lib/ui/icons/index.d.ts

@@ -7,6 +7,7 @@ export declare const icons: {
     'icon-thumb-down': any;
     'icon-star': any;
     'icon-prediction': any;
+    'icon-insight': any;
     'icon-poll': any;
     'icon-masters-logo': any;
     'icon-logout': any;
@@ -23,12 +24,13 @@ export declare const icons: {
     'icon-chevron': any;
     'icon-chevron-white-left': any;
     'icon-chevron-left': any;
-    'icon-check': any;
     'icon-check-white': any;
     'icon-check-green': any;
     'icon-btn-channels': any;
     'icon-btn-feature-groups': any;
     'icon-btn-leaderboard': any;
+    'icon-check': any;
+    'icon-arrow': any;
     fedex: any;
 };
 export declare const Icon: React.FC<{