@streamlayer/react-ui 0.39.0 → 0.41.0

package/lib/ui/demo/components/Question.js

@@ -1,9 +1,8 @@
 import { jsx as o, jsxs as n } from "react/jsx-runtime";
 import { styled as y } from "@linaria/react";
-import { useState as d, useCallback as x, useMemo as c } from "react";
+import { useState as d, useCallback as x, useMemo as s } from "react";
 import { Vote as g } from "../../gamification/vote/index.js";
 import { VotingHeader as h } from "../../gamification/vote/components/voting-header/index.js";
-import { i as b } from "../../../fedex-a8dcc7b2.js";
 import "@streamlayer/sdk-web-types";
 import "../../../index-7045fbb2.js";
 import "../../gamification/vote/components/voting-option/styles.js";
@@ -16,7 +15,7 @@ import "react-countdown-circle-timer";
 import "../../theme/constants.js";
 import "../../gamification/vote/components/voting-header/components/timer/styles.js";
 import "../../gamification/vote/components/voting-header/styles.js";
-const k = y.div`
+const b = y.div`
   position: absolute;
   top: 0;
   background: var(--color-transparent-item);
@@ -43,28 +42,28 @@ const k = y.div`
       transform: translateX(0);
     }
   }
-`, F = ({ openedQuestion: t, closeQuestion: a, vote: e }) => {
-  var s;
-  const [l, m] = d(!1), p = x(
+`, B = ({ openedQuestion: t, closeQuestion: a, vote: e }) => {
+  var m;
+  const [l, c] = d(!1), p = x(
     (i) => {
-      m(i);
+      c(i);
     },
-    [m]
-  ), r = c(
+    [c]
+  ), r = s(
     () => t == null ? void 0 : t.answers.find((i) => i.youVoted === !0),
     [t]
-  ), f = c(
+  ), f = s(
     () => !!(t != null && t.answers.find((i) => i.correct === !0)),
     [t]
   );
-  return t ? /* @__PURE__ */ o(k, { children: /* @__PURE__ */ n("div", { children: [
+  return t ? /* @__PURE__ */ o(b, { children: /* @__PURE__ */ n("div", { children: [
     /* @__PURE__ */ o(
       h,
       {
         points: (r == null ? void 0 : r.points) || 0,
         questionAnswered: !!r,
         questionAnsweredCorrectly: r == null ? void 0 : r.correct,
-        logo: b,
+        logo: "",
         closeQuestion: a,
         setTimeToExpire: p,
         questionType: t.type
@@ -74,7 +73,7 @@ const k = y.div`
       g,
       {
         title: t.subject,
-        feedbackMessages: (s = t.options) == null ? void 0 : s.options.value,
+        feedbackMessages: (m = t.options) == null ? void 0 : m.options.value,
         questionType: t.type,
         questionId: t.id,
         questionAnswered: !!r,
@@ -98,5 +97,5 @@ const k = y.div`
   ] }) }) : null;
 };
 export {
-  F as Question
+  B as Question
 };

package/lib/ui/demo/components/QuestionsList.js

@@ -1,19 +1,20 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useStore as m } from "@nanostores/react";
-import { QuestionList as p } from "../../gamification/question-list/index.js";
+import { QuestionList as p } from "../../gamification/question/list/index.js";
 import "../../gamification/question/index.js";
 import "@streamlayer/sdk-web-types";
 import "../../button/index.js";
 import "../../button/styles.js";
 import "@linaria/react";
+import "../../gamification/constants.js";
 import "../../gamification/question/styles.js";
 import "../../icons/index.js";
 import "react";
-import "../../gamification/question-list/styles.js";
-const j = ({ store: r, openQuestion: i }) => {
+import "../../gamification/question/list/styles.js";
+const l = ({ store: r, openQuestion: i }) => {
   const t = m(r);
   return t != null && t.data ? /* @__PURE__ */ o(p, { openQuestion: i, questions: t.data }) : /* @__PURE__ */ o("div", { children: "wait questions..." });
 };
 export {
-  j as QuestionsList
+  l as QuestionsList
 };

package/lib/ui/demo/components/UserSummary.js

@@ -5,8 +5,8 @@ import "../../../utils/common.js";
 import "../../gamification/user-statistics/components/rank/index.js";
 import "../../gamification/user-statistics/components/rank/styles.js";
 import "@linaria/react";
-import "../../gamification/user-statistics/components/statistics/index.js";
-import "../../gamification/user-statistics/components/statistics/styles.js";
+import "../../gamification/user-statistics/components/statistic/index.js";
+import "../../gamification/user-statistics/components/statistic/styles.js";
 import "../../gamification/user-statistics/styles.js";
 const S = ({ store: m }) => {
   const { data: r } = o(m);

package/lib/ui/demo/components/index.js

@@ -12,18 +12,19 @@ import "../../../utils/common.js";
 import "../../gamification/user-statistics/components/rank/index.js";
 import "../../gamification/user-statistics/components/rank/styles.js";
 import "@linaria/react";
-import "../../gamification/user-statistics/components/statistics/index.js";
-import "../../gamification/user-statistics/components/statistics/styles.js";
+import "../../gamification/user-statistics/components/statistic/index.js";
+import "../../gamification/user-statistics/components/statistic/styles.js";
 import "../../gamification/user-statistics/styles.js";
-import "../../gamification/question-list/index.js";
+import "../../gamification/question/list/index.js";
 import "../../gamification/question/index.js";
 import "@streamlayer/sdk-web-types";
 import "../../button/index.js";
 import "../../button/styles.js";
+import "../../gamification/constants.js";
 import "../../gamification/question/styles.js";
 import "../../icons/index.js";
 import "react";
-import "../../gamification/question-list/styles.js";
+import "../../gamification/question/list/styles.js";
 import "../../gamification/vote/index.js";
 import "../../../index-7045fbb2.js";
 import "../../gamification/vote/components/voting-option/styles.js";
@@ -37,7 +38,6 @@ import "react-countdown-circle-timer";
 import "../../theme/constants.js";
 import "../../gamification/vote/components/voting-header/components/timer/styles.js";
 import "../../gamification/vote/components/voting-header/styles.js";
-import "../../../fedex-a8dcc7b2.js";
 import "../../gamification/onboarding/components/onboarding-slides/onboarding-instructions/index.js";
 import "../../gamification/onboarding/components/onboarding-slides/onboarding-instructions/styles.js";
 import "../../gamification/onboarding/components/onboarding-slides/onboarding-invite-card/index.js";

package/lib/ui/demo/index.js

@@ -3,8 +3,8 @@ 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 "@streamlayer/sdk-web-storage";
 import "@streamlayer/sdk-web-api";
+import "@streamlayer/sdk-web-storage";
 import { useStore as c } from "@nanostores/react";
 import { Notifications as F } from "../notifications/index.js";
 import { GamificationComponent as w } from "./Gamification.js";
@@ -28,17 +28,18 @@ import "../gamification/user-statistics/index.js";
 import "../../utils/common.js";
 import "../gamification/user-statistics/components/rank/index.js";
 import "../gamification/user-statistics/components/rank/styles.js";
-import "../gamification/user-statistics/components/statistics/index.js";
-import "../gamification/user-statistics/components/statistics/styles.js";
+import "../gamification/user-statistics/components/statistic/index.js";
+import "../gamification/user-statistics/components/statistic/styles.js";
 import "../gamification/user-statistics/styles.js";
 import "./components/QuestionsList.js";
-import "../gamification/question-list/index.js";
+import "../gamification/question/list/index.js";
 import "../gamification/question/index.js";
 import "../button/index.js";
 import "../button/styles.js";
+import "../gamification/constants.js";
 import "../gamification/question/styles.js";
 import "../icons/index.js";
-import "../gamification/question-list/styles.js";
+import "../gamification/question/list/styles.js";
 import "./components/Question.js";
 import "../gamification/vote/index.js";
 import "../../index-7045fbb2.js";
@@ -52,7 +53,6 @@ import "react-countdown-circle-timer";
 import "../theme/constants.js";
 import "../gamification/vote/components/voting-header/components/timer/styles.js";
 import "../gamification/vote/components/voting-header/styles.js";
-import "../../fedex-a8dcc7b2.js";
 import "../gamification/onboarding/index.js";
 import "../gamification/onboarding/components/onboarding-slides/onboarding-instructions/index.js";
 import "../gamification/onboarding/components/onboarding-slides/onboarding-instructions/styles.js";

package/lib/ui/gamification/constants.d.ts

@@ -0,0 +1,6 @@
+import { QuestionType } from '@streamlayer/sdk-web-types';
+import { icons } from '../icons';
+export declare const QuestionTypeData: Record<QuestionType, {
+    label: string;
+    iconName: keyof typeof icons;
+} | undefined>;

package/lib/ui/gamification/constants.js

@@ -0,0 +1,13 @@
+import { QuestionType as i } from "@streamlayer/sdk-web-types";
+const o = {
+  [i.TWEET]: { label: "Insight", iconName: "icon-insight" },
+  [i.PROMOTION]: { label: "Insight", iconName: "icon-insight" },
+  [i.UNSET]: void 0,
+  [i.FACTOID]: { label: "Insight", iconName: "icon-insight" },
+  [i.POLL]: { label: "Poll", iconName: "icon-poll" },
+  [i.TRIVIA]: { label: "Trivia", iconName: "icon-trivia" },
+  [i.PREDICTION]: { label: "Prediction", iconName: "icon-prediction" }
+};
+export {
+  o as QuestionTypeData
+};

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

@@ -8,8 +8,8 @@ import "@linaria/react";
 import "../../../utils/common.js";
 import "../user-statistics/components/rank/index.js";
 import "../user-statistics/components/rank/styles.js";
-import "../user-statistics/components/statistics/index.js";
-import "../user-statistics/components/statistics/styles.js";
+import "../user-statistics/components/statistic/index.js";
+import "../user-statistics/components/statistic/styles.js";
 import "../user-statistics/styles.js";
 const D = ({ comeBack: o, ...t }) => /* @__PURE__ */ m(e, { children: [
   /* @__PURE__ */ r(i, { comeBack: o }),

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

@@ -1,48 +1,41 @@
-import { jsx as n, jsxs as t } from "react/jsx-runtime";
-import { QuestionType as i, PickHistoryStatus as c, QuestionStatus as p } from "@streamlayer/sdk-web-types";
-import { Button as O } from "../../button/index.js";
-import { QuestionTypeIcon as o, QuestionActionIcon as r, QuestionItem as Q, QuestionContent as b, QuestionCaption as E, QuestionTypeLabel as P, QuestionBody as A, QuestionAction as g } from "./styles.js";
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+import { PickHistoryStatus as n, QuestionType as d, QuestionStatus as Q } from "@streamlayer/sdk-web-types";
+import { Button as h } from "../../button/index.js";
+import { QuestionTypeData as y } from "../constants.js";
+import { QuestionActionIcon as r, QuestionItem as I, QuestionContent as T, QuestionCaption as f, QuestionTypeIcon as A, QuestionTypeLabel as S, QuestionBody as x, QuestionAction as D } from "./styles.js";
 import "../../button/styles.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "react";
-const y = {
-  [i.TWEET]: { label: "Insight", Icon: () => /* @__PURE__ */ n(o, { name: "icon-insight" }) },
-  [i.PROMOTION]: { label: "Insight", Icon: () => /* @__PURE__ */ n(o, { name: "icon-insight" }) },
-  [i.UNSET]: void 0,
-  [i.FACTOID]: { label: "Insight", Icon: () => /* @__PURE__ */ n(o, { name: "icon-insight" }) },
-  [i.POLL]: { label: "Poll", Icon: () => /* @__PURE__ */ n(o, { name: "icon-poll" }) },
-  [i.TRIVIA]: { label: "Trivia", Icon: () => /* @__PURE__ */ n(o, { name: "icon-trivia" }) },
-  [i.PREDICTION]: { label: "Prediction", Icon: () => /* @__PURE__ */ n(o, { name: "icon-prediction" }) }
-}, N = {
-  [c.LOST]: /* @__PURE__ */ n(r, { name: "icon-cross" }),
-  [c.WON]: /* @__PURE__ */ n(r, { name: "icon-check" }),
-  [c.UNSET]: void 0,
-  [c.DNP]: /* @__PURE__ */ n(r, { name: "icon-arrow" })
-}, k = ({
-  questionId: I,
-  questionType: l,
+const E = {
+  [n.LOST]: /* @__PURE__ */ o(r, { name: "icon-cross" }),
+  [n.WON]: /* @__PURE__ */ o(r, { name: "icon-check" }),
+  [n.UNSET]: void 0,
+  [n.DNP]: /* @__PURE__ */ o(r, { name: "icon-arrow" })
+}, R = ({
+  questionId: s,
+  questionType: c,
   questionStatus: m,
   subject: u,
-  openForVoting: h,
-  openQuestion: e,
-  status: T
+  openForVoting: a,
+  openQuestion: i,
+  status: l
 }) => {
-  const { Icon: s, label: a } = y[l] || {}, d = N[T];
-  return !a || !s ? null : /* @__PURE__ */ t(Q, { onClick: () => e == null ? void 0 : e(I), children: [
-    /* @__PURE__ */ t(b, { children: [
-      /* @__PURE__ */ t(E, { children: [
-        /* @__PURE__ */ n(s, {}),
-        /* @__PURE__ */ t(P, { children: [
-          a,
-          l === i.TRIVIA && m === p.RESOLVED && " • Expired"
+  const e = y[c], p = E[l];
+  return e ? /* @__PURE__ */ t(I, { onClick: () => i == null ? void 0 : i(s), children: [
+    /* @__PURE__ */ t(T, { children: [
+      /* @__PURE__ */ t(f, { children: [
+        /* @__PURE__ */ o(A, { name: e.iconName }),
+        /* @__PURE__ */ t(S, { children: [
+          e.label,
+          c === d.TRIVIA && m === Q.RESOLVED && " • Expired"
         ] })
       ] }),
-      /* @__PURE__ */ n(A, { children: u || "" })
+      /* @__PURE__ */ o(x, { children: u || "" })
     ] }),
-    /* @__PURE__ */ n(g, { children: d || (h ? /* @__PURE__ */ n(O, { children: "Play" }) : null) })
-  ] });
+    /* @__PURE__ */ o(D, { children: p || (a ? /* @__PURE__ */ o(h, { children: "Play" }) : null) })
+  ] }) : null;
 };
 export {
-  k as Question
+  R as Question
 };

package/lib/ui/gamification/{question-list → question/list}/index.js

@@ -1,14 +1,15 @@
 import { jsx as t } from "react/jsx-runtime";
-import { Question as i } from "../question/index.js";
+import { Question as i } from "../index.js";
 import { QuestionsContainer as p } from "./styles.js";
 import "@streamlayer/sdk-web-types";
-import "../../button/index.js";
-import "../../button/styles.js";
+import "../../../button/index.js";
+import "../../../button/styles.js";
 import "@linaria/react";
-import "../question/styles.js";
-import "../../icons/index.js";
+import "../../constants.js";
+import "../styles.js";
+import "../../../icons/index.js";
 import "react";
-const l = ({ questions: r, openQuestion: m }) => /* @__PURE__ */ t(p, { children: r == null ? void 0 : r.map((o) => /* @__PURE__ */ t(i, { openQuestion: m, ...o }, o.questionId)) });
+const u = ({ questions: r, openQuestion: m }) => /* @__PURE__ */ t(p, { children: r == null ? void 0 : r.map((o) => /* @__PURE__ */ t(i, { openQuestion: m, ...o }, o.questionId)) });
 export {
-  l as QuestionList
+  u as QuestionList
 };

package/lib/ui/gamification/tabs/styles.js

@@ -1,10 +1,5 @@
 import { styled as o } from "@linaria/react";
-const t = o.div`
-  padding-left: var(--container-padding);
-  padding-right: var(--container-padding);
-  padding-bottom: var(--container-padding);
-  background-color: var(--color-neutrals-white);
-`, n = o.div`
+const t = o.div``, e = o.div`
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -36,7 +31,7 @@ const t = o.div`
       transform: translateX(100%);
     }
   }
-`, a = o.button`
+`, n = o.button`
   border: none;
   outline: none;
   background-color: transparent;
@@ -60,13 +55,13 @@ const t = o.div`
     color: var(--color-primary-green1);
     cursor: default;
   }
-`, e = o.span`
+`, i = o.span`
   position: relative;
   z-index: 2;
 `;
 export {
-  a as Button,
+  n as Button,
   t as Container,
-  n as STabs,
-  e as Title
+  e as STabs,
+  i as Title
 };

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>>;