@streamlayer/react-ui 0.39.0 → 0.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/lib/index.js +2 -2
  2. package/lib/ui/app/Features/Gamification/Leaderboard.js +2 -2
  3. package/lib/ui/app/Features/Gamification/Tabs.js +15 -15
  4. package/lib/ui/app/Features/Gamification/UserSummary.js +2 -2
  5. package/lib/ui/app/Features/Gamification/index.js +2 -2
  6. package/lib/ui/app/Features/index.js +2 -2
  7. package/lib/ui/app/masters.js +2 -2
  8. package/lib/ui/app/styles.d.ts +3 -0
  9. package/lib/ui/app/styles.js +13 -8
  10. package/lib/ui/demo/Gamification.js +2 -2
  11. package/lib/ui/demo/Highlights.js +1 -1
  12. package/lib/ui/demo/components/Leaderboard.js +2 -2
  13. package/lib/ui/demo/components/UserSummary.js +2 -2
  14. package/lib/ui/demo/components/index.js +2 -2
  15. package/lib/ui/demo/index.js +2 -2
  16. package/lib/ui/gamification/leaderboard-item-detail/index.js +2 -2
  17. package/lib/ui/gamification/tabs/styles.js +6 -11
  18. package/lib/ui/gamification/user-statistics/components/rank/styles.js +14 -11
  19. package/lib/ui/gamification/user-statistics/components/statistic/index.d.ts +7 -0
  20. package/lib/ui/gamification/user-statistics/components/statistic/index.js +10 -0
  21. package/lib/ui/gamification/user-statistics/components/{statistics → statistic}/styles.d.ts +1 -0
  22. package/lib/ui/gamification/user-statistics/components/statistic/styles.js +23 -0
  23. package/lib/ui/gamification/user-statistics/index.js +38 -35
  24. package/lib/ui/gamification/user-statistics/styles.d.ts +3 -1
  25. package/lib/ui/gamification/user-statistics/styles.js +63 -52
  26. package/lib/ui/navigation/masters.js +4 -3
  27. package/lib/ui/theme/constants.d.ts +0 -2
  28. package/lib/ui/theme/constants.js +4 -6
  29. package/lib/utils/common.js +3 -2
  30. package/package.json +4 -4
  31. package/lib/ui/gamification/user-statistics/components/statistics/index.d.ts +0 -7
  32. package/lib/ui/gamification/user-statistics/components/statistics/index.js +0 -10
  33. package/lib/ui/gamification/user-statistics/components/statistics/styles.js +0 -16
package/lib/index.js CHANGED
@@ -47,8 +47,8 @@ import "./ui/gamification/question-list/styles.js";
47
47
  import "./utils/common.js";
48
48
  import "./ui/gamification/user-statistics/components/rank/index.js";
49
49
  import "./ui/gamification/user-statistics/components/rank/styles.js";
50
- import "./ui/gamification/user-statistics/components/statistics/index.js";
51
- import "./ui/gamification/user-statistics/components/statistics/styles.js";
50
+ import "./ui/gamification/user-statistics/components/statistic/index.js";
51
+ import "./ui/gamification/user-statistics/components/statistic/styles.js";
52
52
  import "./ui/gamification/user-statistics/styles.js";
53
53
  import "./index-7045fbb2.js";
54
54
  import "./ui/gamification/vote/components/voting-option/styles.js";
package/lib/ui/app/Features/Gamification/Leaderboard.js CHANGED
@@ -11,8 +11,8 @@ import "../../../gamification/user-statistics/index.js";
11
11
  import "../../../../utils/common.js";
12
12
  import "../../../gamification/user-statistics/components/rank/index.js";
13
13
  import "../../../gamification/user-statistics/components/rank/styles.js";
14
- import "../../../gamification/user-statistics/components/statistics/index.js";
15
- import "../../../gamification/user-statistics/components/statistics/styles.js";
14
+ import "../../../gamification/user-statistics/components/statistic/index.js";
15
+ import "../../../gamification/user-statistics/components/statistic/styles.js";
16
16
  import "../../../gamification/user-statistics/styles.js";
17
17
  import "../../../gamification/leaderboard-item-detail/styles.js";
18
18
  import "../../../gamification/leaderboard-invite-link/index.js";
package/lib/ui/app/Features/Gamification/Tabs.js CHANGED
@@ -1,10 +1,10 @@
1
- import { jsxs as e, Fragment as p, jsx as t } from "react/jsx-runtime";
1
+ import { jsxs as e, Fragment as p, jsx as r } from "react/jsx-runtime";
2
2
  import { useState as s } from "react";
3
- import { SDKContentContainer as n } from "../../styles.js";
4
- import { ActivePages as m, Tabs as a } from "../../../gamification/tabs/index.js";
5
- import { Leaderboard as u } from "./Leaderboard.js";
6
- import { QuestionsList as g } from "./QuestionsList.js";
7
- import { UserSummary as S } from "./UserSummary.js";
3
+ import { SDKWhiteContainer as n, SDKContentContainer as a } from "../../styles.js";
4
+ import { ActivePages as m, Tabs as u } from "../../../gamification/tabs/index.js";
5
+ import { Leaderboard as S } from "./Leaderboard.js";
6
+ import { QuestionsList as d } from "./QuestionsList.js";
7
+ import { UserSummary as g } from "./UserSummary.js";
8
8
  import "@linaria/react";
9
9
  import "../../../gamification/tabs/styles.js";
10
10
  import "@nanostores/react";
@@ -16,8 +16,8 @@ import "../../../gamification/user-statistics/index.js";
16
16
  import "../../../../utils/common.js";
17
17
  import "../../../gamification/user-statistics/components/rank/index.js";
18
18
  import "../../../gamification/user-statistics/components/rank/styles.js";
19
- import "../../../gamification/user-statistics/components/statistics/index.js";
20
- import "../../../gamification/user-statistics/components/statistics/styles.js";
19
+ import "../../../gamification/user-statistics/components/statistic/index.js";
20
+ import "../../../gamification/user-statistics/components/statistic/styles.js";
21
21
  import "../../../gamification/user-statistics/styles.js";
22
22
  import "../../../gamification/leaderboard-item-detail/styles.js";
23
23
  import "../../../gamification/leaderboard-list/index.js";
@@ -34,17 +34,17 @@ import "../../../button/styles.js";
34
34
  import "../../../gamification/question/styles.js";
35
35
  import "../../../icons/index.js";
36
36
  import "../../../gamification/question-list/styles.js";
37
- const W = ({ gamification: r }) => {
37
+ const X = ({ gamification: t }) => {
38
38
  const [o, i] = s(m.HOME);
39
39
  return /* @__PURE__ */ e(p, { children: [
40
- /* @__PURE__ */ t(a, { activePage: o, toggleActivePage: i }),
41
- o === m.HOME && /* @__PURE__ */ e(n, { children: [
42
- /* @__PURE__ */ t(S, { store: r.userSummary.getStore() }),
43
- /* @__PURE__ */ t(g, { openQuestion: r.openQuestion, store: r.questions.getStore() })
40
+ /* @__PURE__ */ e(n, { children: [
41
+ /* @__PURE__ */ r(u, { activePage: o, toggleActivePage: i }),
42
+ o === m.HOME && /* @__PURE__ */ r(g, { store: t.userSummary.getStore() })
44
43
  ] }),
45
- o === m.LEADERBOARD && /* @__PURE__ */ t(u, { store: r.leaderboardList.getStore() })
44
+ o === m.HOME && /* @__PURE__ */ r(a, { children: /* @__PURE__ */ r(d, { openQuestion: t.openQuestion, store: t.questions.getStore() }) }),
45
+ o === m.LEADERBOARD && /* @__PURE__ */ r(S, { store: t.leaderboardList.getStore() })
46
46
  ] });
47
47
  };
48
48
  export {
49
- W as Tabs
49
+ X as Tabs
50
50
  };
package/lib/ui/app/Features/Gamification/UserSummary.js CHANGED
@@ -5,8 +5,8 @@ import "../../../../utils/common.js";
5
5
  import "../../../gamification/user-statistics/components/rank/index.js";
6
6
  import "../../../gamification/user-statistics/components/rank/styles.js";
7
7
  import "@linaria/react";
8
- import "../../../gamification/user-statistics/components/statistics/index.js";
9
- import "../../../gamification/user-statistics/components/statistics/styles.js";
8
+ import "../../../gamification/user-statistics/components/statistic/index.js";
9
+ import "../../../gamification/user-statistics/components/statistic/styles.js";
10
10
  import "../../../gamification/user-statistics/styles.js";
11
11
  const S = ({ store: m }) => {
12
12
  const { data: r } = o(m);
package/lib/ui/app/Features/Gamification/index.js CHANGED
@@ -30,8 +30,8 @@ import "../../../gamification/user-statistics/index.js";
30
30
  import "../../../../utils/common.js";
31
31
  import "../../../gamification/user-statistics/components/rank/index.js";
32
32
  import "../../../gamification/user-statistics/components/rank/styles.js";
33
- import "../../../gamification/user-statistics/components/statistics/index.js";
34
- import "../../../gamification/user-statistics/components/statistics/styles.js";
33
+ import "../../../gamification/user-statistics/components/statistic/index.js";
34
+ import "../../../gamification/user-statistics/components/statistic/styles.js";
35
35
  import "../../../gamification/user-statistics/styles.js";
36
36
  import "../../../gamification/leaderboard-item-detail/styles.js";
37
37
  import "../../../gamification/leaderboard-list/index.js";
package/lib/ui/app/Features/index.js CHANGED
@@ -34,8 +34,8 @@ import "../../gamification/user-statistics/index.js";
34
34
  import "../../../utils/common.js";
35
35
  import "../../gamification/user-statistics/components/rank/index.js";
36
36
  import "../../gamification/user-statistics/components/rank/styles.js";
37
- import "../../gamification/user-statistics/components/statistics/index.js";
38
- import "../../gamification/user-statistics/components/statistics/styles.js";
37
+ import "../../gamification/user-statistics/components/statistic/index.js";
38
+ import "../../gamification/user-statistics/components/statistic/styles.js";
39
39
  import "../../gamification/user-statistics/styles.js";
40
40
  import "../../gamification/leaderboard-item-detail/styles.js";
41
41
  import "../../gamification/leaderboard-list/index.js";
package/lib/ui/app/masters.js CHANGED
@@ -44,8 +44,8 @@ import "../gamification/user-statistics/index.js";
44
44
  import "../../utils/common.js";
45
45
  import "../gamification/user-statistics/components/rank/index.js";
46
46
  import "../gamification/user-statistics/components/rank/styles.js";
47
- import "../gamification/user-statistics/components/statistics/index.js";
48
- import "../gamification/user-statistics/components/statistics/styles.js";
47
+ import "../gamification/user-statistics/components/statistic/index.js";
48
+ import "../gamification/user-statistics/components/statistic/styles.js";
49
49
  import "../gamification/user-statistics/styles.js";
50
50
  import "../gamification/leaderboard-item-detail/styles.js";
51
51
  import "../gamification/leaderboard-list/index.js";
package/lib/ui/app/styles.d.ts CHANGED
@@ -2,3 +2,6 @@
2
2
  export declare const SDKContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
3
3
  export declare const SDKScrollContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
4
4
  export declare const SDKContentContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
5
+ export declare const SDKWhiteContainer: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
6
+ as?: import("react").ElementType<any> | undefined;
7
+ }>;
package/lib/ui/app/styles.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { styled as n } from "@linaria/react";
2
- const a = n.div`
2
+ const i = n.div`
3
3
  height: 100%;
4
4
  background: transparent;
5
5
  font-family: var(--font-regular);
6
6
  position: relative;
7
- `, i = n.div`
7
+ `, r = n.div`
8
8
  overflow-y: auto;
9
9
  height: 100%;
10
10
  transition: transform;
@@ -15,12 +15,17 @@ const a = n.div`
15
15
  height: calc(100% - var(--header-height));
16
16
  transform: translateY(var(--header-height));
17
17
  }
18
- `, r = n.div`
19
- padding-left: var(--container-padding);
20
- padding-right: var(--container-padding);
18
+ `, t = n.div`
19
+ display: flex;
20
+ flex-direction: column;
21
+ padding: var(--container-padding);
22
+ gap: var(--container-padding);
23
+ `, o = n(t)`
24
+ background-color: var(--color-neutrals-white);
21
25
  `;
22
26
  export {
23
- a as SDKContainer,
24
- r as SDKContentContainer,
25
- i as SDKScrollContainer
27
+ i as SDKContainer,
28
+ t as SDKContentContainer,
29
+ r as SDKScrollContainer,
30
+ o as SDKWhiteContainer
26
31
  };
package/lib/ui/demo/Gamification.js CHANGED
@@ -20,8 +20,8 @@ import "../gamification/user-statistics/index.js";
20
20
  import "../../utils/common.js";
21
21
  import "../gamification/user-statistics/components/rank/index.js";
22
22
  import "../gamification/user-statistics/components/rank/styles.js";
23
- import "../gamification/user-statistics/components/statistics/index.js";
24
- import "../gamification/user-statistics/components/statistics/styles.js";
23
+ import "../gamification/user-statistics/components/statistic/index.js";
24
+ import "../gamification/user-statistics/components/statistic/styles.js";
25
25
  import "../gamification/user-statistics/styles.js";
26
26
  import "../gamification/question-list/index.js";
27
27
  import "../gamification/question/index.js";
package/lib/ui/demo/Highlights.js CHANGED
@@ -3,7 +3,7 @@ import { FeatureStatus as d } from "@streamlayer/sdk-web-interfaces";
3
3
  import { useStore as m } from "@nanostores/react";
4
4
  import { DemoContainer as p } from "./styles.js";
5
5
  import "../gamification/user-statistics/components/rank/styles.js";
6
- import "../gamification/user-statistics/components/statistics/styles.js";
6
+ import "../gamification/user-statistics/components/statistic/styles.js";
7
7
  import "../gamification/user-statistics/styles.js";
8
8
  import "../gamification/question/index.js";
9
9
  import "../gamification/question-list/styles.js";
package/lib/ui/demo/components/Leaderboard.js CHANGED
@@ -11,8 +11,8 @@ import "../../gamification/user-statistics/index.js";
11
11
  import "../../../utils/common.js";
12
12
  import "../../gamification/user-statistics/components/rank/index.js";
13
13
  import "../../gamification/user-statistics/components/rank/styles.js";
14
- import "../../gamification/user-statistics/components/statistics/index.js";
15
- import "../../gamification/user-statistics/components/statistics/styles.js";
14
+ import "../../gamification/user-statistics/components/statistic/index.js";
15
+ import "../../gamification/user-statistics/components/statistic/styles.js";
16
16
  import "../../gamification/user-statistics/styles.js";
17
17
  import "../../gamification/leaderboard-item-detail/styles.js";
18
18
  import "../../gamification/leaderboard-invite-link/index.js";
package/lib/ui/demo/components/UserSummary.js CHANGED
@@ -5,8 +5,8 @@ import "../../../utils/common.js";
5
5
  import "../../gamification/user-statistics/components/rank/index.js";
6
6
  import "../../gamification/user-statistics/components/rank/styles.js";
7
7
  import "@linaria/react";
8
- import "../../gamification/user-statistics/components/statistics/index.js";
9
- import "../../gamification/user-statistics/components/statistics/styles.js";
8
+ import "../../gamification/user-statistics/components/statistic/index.js";
9
+ import "../../gamification/user-statistics/components/statistic/styles.js";
10
10
  import "../../gamification/user-statistics/styles.js";
11
11
  const S = ({ store: m }) => {
12
12
  const { data: r } = o(m);
package/lib/ui/demo/components/index.js CHANGED
@@ -12,8 +12,8 @@ import "../../../utils/common.js";
12
12
  import "../../gamification/user-statistics/components/rank/index.js";
13
13
  import "../../gamification/user-statistics/components/rank/styles.js";
14
14
  import "@linaria/react";
15
- import "../../gamification/user-statistics/components/statistics/index.js";
16
- import "../../gamification/user-statistics/components/statistics/styles.js";
15
+ import "../../gamification/user-statistics/components/statistic/index.js";
16
+ import "../../gamification/user-statistics/components/statistic/styles.js";
17
17
  import "../../gamification/user-statistics/styles.js";
18
18
  import "../../gamification/question-list/index.js";
19
19
  import "../../gamification/question/index.js";
package/lib/ui/demo/index.js CHANGED
@@ -28,8 +28,8 @@ import "../gamification/user-statistics/index.js";
28
28
  import "../../utils/common.js";
29
29
  import "../gamification/user-statistics/components/rank/index.js";
30
30
  import "../gamification/user-statistics/components/rank/styles.js";
31
- import "../gamification/user-statistics/components/statistics/index.js";
32
- import "../gamification/user-statistics/components/statistics/styles.js";
31
+ import "../gamification/user-statistics/components/statistic/index.js";
32
+ import "../gamification/user-statistics/components/statistic/styles.js";
33
33
  import "../gamification/user-statistics/styles.js";
34
34
  import "./components/QuestionsList.js";
35
35
  import "../gamification/question-list/index.js";
package/lib/ui/gamification/leaderboard-item-detail/index.js CHANGED
@@ -8,8 +8,8 @@ import "@linaria/react";
8
8
  import "../../../utils/common.js";
9
9
  import "../user-statistics/components/rank/index.js";
10
10
  import "../user-statistics/components/rank/styles.js";
11
- import "../user-statistics/components/statistics/index.js";
12
- import "../user-statistics/components/statistics/styles.js";
11
+ import "../user-statistics/components/statistic/index.js";
12
+ import "../user-statistics/components/statistic/styles.js";
13
13
  import "../user-statistics/styles.js";
14
14
  const D = ({ comeBack: o, ...t }) => /* @__PURE__ */ m(e, { children: [
15
15
  /* @__PURE__ */ r(i, { comeBack: o }),
package/lib/ui/gamification/tabs/styles.js CHANGED
@@ -1,10 +1,5 @@
1
1
  import { styled as o } from "@linaria/react";
2
- const t = o.div`
3
- padding-left: var(--container-padding);
4
- padding-right: var(--container-padding);
5
- padding-bottom: var(--container-padding);
6
- background-color: var(--color-neutrals-white);
7
- `, n = o.div`
2
+ const t = o.div``, e = o.div`
8
3
  position: relative;
9
4
  box-sizing: border-box;
10
5
  width: 100%;
@@ -36,7 +31,7 @@ const t = o.div`
36
31
  transform: translateX(100%);
37
32
  }
38
33
  }
39
- `, a = o.button`
34
+ `, n = o.button`
40
35
  border: none;
41
36
  outline: none;
42
37
  background-color: transparent;
@@ -60,13 +55,13 @@ const t = o.div`
60
55
  color: var(--color-primary-green1);
61
56
  cursor: default;
62
57
  }
63
- `, e = o.span`
58
+ `, i = o.span`
64
59
  position: relative;
65
60
  z-index: 2;
66
61
  `;
67
62
  export {
68
- a as Button,
63
+ n as Button,
69
64
  t as Container,
70
- n as STabs,
71
- e as Title
65
+ e as STabs,
66
+ i as Title
72
67
  };
package/lib/ui/gamification/user-statistics/components/rank/styles.js CHANGED
@@ -1,22 +1,25 @@
1
1
  import { styled as e } from "@linaria/react";
2
2
  const t = e.div`
3
3
  display: flex;
4
- justify-content: flex-end;
5
4
  align-items: center;
6
- column-gap: 2px;
5
+ flex: 1;
6
+ justify-content: space-between;
7
+ padding: 9px 8px;
8
+ color: var(--color-neutrals-white);
9
+ border-radius: 4px;
10
+ background-color: var(--color-primary-green2);
7
11
  overflow: hidden;
12
+ `, r = e.div`
13
+ font-size: 9px;
14
+ line-height: 14px;
15
+ text-transform: uppercase;
16
+ opacity: 0.8;
8
17
  `, i = e.div`
9
- width: 75px;
10
- `, n = e.div`
11
18
  font-size: 14px;
12
- color: #fff;
13
- overflow: hidden;
14
- text-overflow: ellipsis;
15
- white-space: nowrap;
16
- width: 25px;
19
+ line-height: 16px;
17
20
  `;
18
21
  export {
19
22
  t as Container,
20
- n as Indicator,
21
- i as Title
23
+ i as Indicator,
24
+ r as Title
22
25
  };
package/lib/ui/gamification/user-statistics/components/statistic/index.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ interface StatisticProps {
3
+ indicator: string | number;
4
+ title: 'Win streak' | 'Correct' | 'Incorrect' | 'Succ. rate';
5
+ }
6
+ export declare const Statistic: React.FC<StatisticProps>;
7
+ export {};
package/lib/ui/gamification/user-statistics/components/statistic/index.js ADDED
@@ -0,0 +1,10 @@
1
+ import { jsxs as o, jsx as i } from "react/jsx-runtime";
2
+ import { Container as n, Indicator as c, Title as e } from "./styles.js";
3
+ import "@linaria/react";
4
+ const l = ({ indicator: r, title: t }) => /* @__PURE__ */ o(n, { children: [
5
+ /* @__PURE__ */ i(c, { children: r }),
6
+ /* @__PURE__ */ i(e, { children: t })
7
+ ] });
8
+ export {
9
+ l as Statistic
10
+ };
package/lib/ui/gamification/user-statistics/components/{statistics → statistic}/styles.d.ts RENAMED
@@ -1,3 +1,4 @@
1
1
  /// <reference types="react" />
2
2
  export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
3
3
  export declare const Indicator: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
4
+ 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 ADDED
@@ -0,0 +1,23 @@
1
+ import { styled as t } from "@linaria/react";
2
+ const i = t.div`
3
+ display: flex;
4
+ align-items: center;
5
+ flex-direction: column;
6
+ row-gap: 4px;
7
+ padding-top: 2px;
8
+ color: var(--color-neutrals-white);
9
+ text-align: center;
10
+ `, o = t.div`
11
+ font-size: 14px;
12
+ line-height: 16px;
13
+ `, n = t.div`
14
+ font-size: 9px;
15
+ line-height: 14px;
16
+ text-transform: uppercase;
17
+ opacity: 0.8;
18
+ `;
19
+ export {
20
+ i as Container,
21
+ o as Indicator,
22
+ n as Title
23
+ };
package/lib/ui/gamification/user-statistics/index.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { jsxs as N, jsx as M } from "react/jsx-runtime";
2
- import { abbreviate as c } from "../../../utils/common.js";
2
+ import { abbreviate as y, formatDecimals as x } from "../../../utils/common.js";
3
3
  import { Rank as A } from "./components/rank/index.js";
4
- import { Statistics as D } from "./components/statistics/index.js";
5
- 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";
4
+ import { Statistic as D } from "./components/statistic/index.js";
5
+ 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";
6
6
  import "./components/rank/styles.js";
7
7
  import "@linaria/react";
8
- import "./components/statistics/styles.js";
9
- const a = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlRyb3BoeSI+CjxwYXRoIGlkPSJDb21iaW5lZCBTaGFwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjc2OTE2IDMuNTAwMDJDMi43NjkxNiA0LjQ5Nzg2IDIuOTQ3MDUgNS4zODM0OCAzLjMwMjgyIDYuMTU2OTJDMi42MjQ5MyA2LjAxODQ3IDIuMDU4ODMgNS43NDg3MiAxLjYwNDUgNS4zNDc2OEMxLjE1MDE3IDQuOTQ2NjMgMC45MjMwMDggNC41NTk5MiAwLjkyMzAwOCA0LjE4NzUyVjMuNTAwMDJIMi43NjkxNlpNMTEuMDc2OCAzLjUwMDAyVjQuMTg3NTJDMTEuMDc2OCA0LjU1OTkyIDEwLjg0OTcgNC45NDY2MyAxMC4zOTUzIDUuMzQ3NjhDOS45NDEgNS43NDg3MiA5LjM3NDkgNi4wMTg0NyA4LjY5NzAxIDYuMTU2OTJDOS4wNTI3OCA1LjM4MzQ4IDkuMjMwNjYgNC40OTc4NiA5LjIzMDY2IDMuNTAwMDJIMTEuMDc2OFpNMTIgNC4xODc1VjMuMjcwODNDMTIgMy4wNzk4NiAxMS45MzI3IDIuOTE3NTQgMTEuNzk4MSAyLjc4Mzg1QzExLjY2MzUgMi42NTAxNyAxMS41IDIuNTgzMzMgMTEuMzA3NyAyLjU4MzMzSDkuMjMwNzdWMS44OTU4M0M5LjIzMDc3IDEuNTgwNzMgOS4xMTc3OSAxLjMxMDk4IDguODkxODMgMS4wODY1OUM4LjY2NTg2IDAuODYyMTk1IDguMzk0MjMgMC43NSA4LjA3NjkyIDAuNzVIMy45MjMwOEMzLjYwNTc3IDAuNzUgMy4zMzQxNCAwLjg2MjE5NSAzLjEwODE3IDEuMDg2NTlDMi44ODIyMSAxLjMxMDk4IDIuNzY5MjMgMS41ODA3MyAyLjc2OTIzIDEuODk1ODNWMi41ODMzM0gwLjY5MjMwOEMwLjQ5OTk5OSAyLjU4MzMzIDAuMzM2NTM5IDIuNjUwMTcgMC4yMDE5MjMgMi43ODM4NUMwLjA2NzMwNyAyLjkxNzU0IDAgMy4wNzk4NiAwIDMuMjcwODNWNC4xODc1QzAgNC41MjY0OCAwLjA5OTc1ODYgNC44Njc4NCAwLjI5OTI3OSA1LjIxMTU5QzAuNDk4Nzk5IDUuNTU1MzQgMC43NjgwMjcgNS44NjU2NyAxLjEwNjk3IDYuMTQyNThDMS40NDU5MiA2LjQxOTQ5IDEuODYxNzggNi42NTIyMyAyLjM1NDU3IDYuODQwODJDMi44NDczNiA3LjAyOTQxIDMuMzY1MzggNy4xMzU2MyAzLjkwODY1IDcuMTU5NTFDNC4xMTA1OCA3LjQxNzMyIDQuMzM4OTQgNy42NDQxIDQuNTkzNzUgNy44Mzk4NEM0Ljc3NjQ0IDguMDAyMTcgNC45MDI2NCA4LjE3NTI0IDQuOTcyMzYgOC4zNTkwNUM1LjA0MjA3IDguNTQyODYgNS4wNzY5MiA4Ljc1NjUxIDUuMDc2OTIgOUM1LjA3NjkyIDkuMjU3ODEgNS4wMDM2MSA5LjQ3NTA0IDQuODU2OTcgOS42NTE2OUM0LjcxMDM0IDkuODI4MzQgNC40NzU5NiA5LjkxNjY3IDQuMTUzODUgOS45MTY2N0MzLjc5MzI3IDkuOTE2NjcgMy40NzIzNiAxMC4wMjUzIDMuMTkxMTEgMTAuMjQyNUMyLjkwOTg1IDEwLjQ1OTcgMi43NjkyMyAxMC43MzMxIDIuNzY5MjMgMTEuMDYyNVYxMS41MjA4QzIuNzY5MjMgMTEuNTg3NyAyLjc5MDg3IDExLjY0MjYgMi44MzQxMyAxMS42ODU1QzIuODc3NCAxMS43Mjg1IDIuOTMyNjkgMTEuNzUgMyAxMS43NUg5QzkuMDY3MzEgMTEuNzUgOS4xMjI2IDExLjcyODUgOS4xNjU4NiAxMS42ODU1QzkuMjA5MTMgMTEuNjQyNiA5LjIzMDc3IDExLjU4NzcgOS4yMzA3NyAxMS41MjA4VjExLjA2MjVDOS4yMzA3NyAxMC43MzMxIDkuMDkwMTUgMTAuNDU5NyA4LjgwODg5IDEwLjI0MjVDOC41Mjc2NCAxMC4wMjUzIDguMjA2NzMgOS45MTY2NyA3Ljg0NjE1IDkuOTE2NjdDNy41MjQwNCA5LjkxNjY3IDcuMjg5NjYgOS44MjgzNCA3LjE0MzAzIDkuNjUxNjlDNi45OTYzOSA5LjQ3NTA0IDYuOTIzMDggOS4yNTc4MSA2LjkyMzA4IDlDNi45MjMwOCA4Ljc1NjUxIDYuOTU3OTMgOC41NDI4NiA3LjAyNzY0IDguMzU5MDVDNy4wOTczNiA4LjE3NTI0IDcuMjIzNTYgOC4wMDIxNyA3LjQwNjI1IDcuODM5ODRDNy42NjEwNiA3LjY0NDEgNy44ODk0MiA3LjQxNzMyIDguMDkxMzUgNy4xNTk1MUM4LjYzNDYyIDcuMTM1NjMgOS4xNTI2NCA3LjAyOTQxIDkuNjQ1NDMgNi44NDA4MkMxMC4xMzgyIDYuNjUyMjMgMTAuNTU0MSA2LjQxOTQ5IDEwLjg5MyA2LjE0MjU4QzExLjIzMiA1Ljg2NTY3IDExLjUwMTIgNS41NTUzNCAxMS43MDA3IDUuMjExNTlDMTEuOTAwMiA0Ljg2Nzg0IDEyIDQuNTI2NDggMTIgNC4xODc1Wk01LjA3MDMzIDUuMzg0OTFMNi4wMzgzIDQuODc1MDNMNy4wMDYyNyA1LjM4NDkxTDYuODIxNCA0LjMwNDk3TDcuNjA0NTEgMy41NDAxNkw2LjUyMjI4IDMuMzgyNkw2LjAzODMgMi40MDAwM0w1LjU1NDMxIDMuMzgyNkw0LjQ3MjA5IDMuNTQwMTZMNS4yNTUxOSA0LjMwNDk3TDUuMDcwMzMgNS4zODQ5MVoiIGZpbGw9IiNGMkM5NEMiLz4KPC9nPgo8L3N2Zz4K", V = ({
8
+ import "./components/statistic/styles.js";
9
+ const m = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlRyb3BoeSI+CjxwYXRoIGlkPSJDb21iaW5lZCBTaGFwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjc2OTE2IDMuNTAwMDJDMi43NjkxNiA0LjQ5Nzg2IDIuOTQ3MDUgNS4zODM0OCAzLjMwMjgyIDYuMTU2OTJDMi42MjQ5MyA2LjAxODQ3IDIuMDU4ODMgNS43NDg3MiAxLjYwNDUgNS4zNDc2OEMxLjE1MDE3IDQuOTQ2NjMgMC45MjMwMDggNC41NTk5MiAwLjkyMzAwOCA0LjE4NzUyVjMuNTAwMDJIMi43NjkxNlpNMTEuMDc2OCAzLjUwMDAyVjQuMTg3NTJDMTEuMDc2OCA0LjU1OTkyIDEwLjg0OTcgNC45NDY2MyAxMC4zOTUzIDUuMzQ3NjhDOS45NDEgNS43NDg3MiA5LjM3NDkgNi4wMTg0NyA4LjY5NzAxIDYuMTU2OTJDOS4wNTI3OCA1LjM4MzQ4IDkuMjMwNjYgNC40OTc4NiA5LjIzMDY2IDMuNTAwMDJIMTEuMDc2OFpNMTIgNC4xODc1VjMuMjcwODNDMTIgMy4wNzk4NiAxMS45MzI3IDIuOTE3NTQgMTEuNzk4MSAyLjc4Mzg1QzExLjY2MzUgMi42NTAxNyAxMS41IDIuNTgzMzMgMTEuMzA3NyAyLjU4MzMzSDkuMjMwNzdWMS44OTU4M0M5LjIzMDc3IDEuNTgwNzMgOS4xMTc3OSAxLjMxMDk4IDguODkxODMgMS4wODY1OUM4LjY2NTg2IDAuODYyMTk1IDguMzk0MjMgMC43NSA4LjA3NjkyIDAuNzVIMy45MjMwOEMzLjYwNTc3IDAuNzUgMy4zMzQxNCAwLjg2MjE5NSAzLjEwODE3IDEuMDg2NTlDMi44ODIyMSAxLjMxMDk4IDIuNzY5MjMgMS41ODA3MyAyLjc2OTIzIDEuODk1ODNWMi41ODMzM0gwLjY5MjMwOEMwLjQ5OTk5OSAyLjU4MzMzIDAuMzM2NTM5IDIuNjUwMTcgMC4yMDE5MjMgMi43ODM4NUMwLjA2NzMwNyAyLjkxNzU0IDAgMy4wNzk4NiAwIDMuMjcwODNWNC4xODc1QzAgNC41MjY0OCAwLjA5OTc1ODYgNC44Njc4NCAwLjI5OTI3OSA1LjIxMTU5QzAuNDk4Nzk5IDUuNTU1MzQgMC43NjgwMjcgNS44NjU2NyAxLjEwNjk3IDYuMTQyNThDMS40NDU5MiA2LjQxOTQ5IDEuODYxNzggNi42NTIyMyAyLjM1NDU3IDYuODQwODJDMi44NDczNiA3LjAyOTQxIDMuMzY1MzggNy4xMzU2MyAzLjkwODY1IDcuMTU5NTFDNC4xMTA1OCA3LjQxNzMyIDQuMzM4OTQgNy42NDQxIDQuNTkzNzUgNy44Mzk4NEM0Ljc3NjQ0IDguMDAyMTcgNC45MDI2NCA4LjE3NTI0IDQuOTcyMzYgOC4zNTkwNUM1LjA0MjA3IDguNTQyODYgNS4wNzY5MiA4Ljc1NjUxIDUuMDc2OTIgOUM1LjA3NjkyIDkuMjU3ODEgNS4wMDM2MSA5LjQ3NTA0IDQuODU2OTcgOS42NTE2OUM0LjcxMDM0IDkuODI4MzQgNC40NzU5NiA5LjkxNjY3IDQuMTUzODUgOS45MTY2N0MzLjc5MzI3IDkuOTE2NjcgMy40NzIzNiAxMC4wMjUzIDMuMTkxMTEgMTAuMjQyNUMyLjkwOTg1IDEwLjQ1OTcgMi43NjkyMyAxMC43MzMxIDIuNzY5MjMgMTEuMDYyNVYxMS41MjA4QzIuNzY5MjMgMTEuNTg3NyAyLjc5MDg3IDExLjY0MjYgMi44MzQxMyAxMS42ODU1QzIuODc3NCAxMS43Mjg1IDIuOTMyNjkgMTEuNzUgMyAxMS43NUg5QzkuMDY3MzEgMTEuNzUgOS4xMjI2IDExLjcyODUgOS4xNjU4NiAxMS42ODU1QzkuMjA5MTMgMTEuNjQyNiA5LjIzMDc3IDExLjU4NzcgOS4yMzA3NyAxMS41MjA4VjExLjA2MjVDOS4yMzA3NyAxMC43MzMxIDkuMDkwMTUgMTAuNDU5NyA4LjgwODg5IDEwLjI0MjVDOC41Mjc2NCAxMC4wMjUzIDguMjA2NzMgOS45MTY2NyA3Ljg0NjE1IDkuOTE2NjdDNy41MjQwNCA5LjkxNjY3IDcuMjg5NjYgOS44MjgzNCA3LjE0MzAzIDkuNjUxNjlDNi45OTYzOSA5LjQ3NTA0IDYuOTIzMDggOS4yNTc4MSA2LjkyMzA4IDlDNi45MjMwOCA4Ljc1NjUxIDYuOTU3OTMgOC41NDI4NiA3LjAyNzY0IDguMzU5MDVDNy4wOTczNiA4LjE3NTI0IDcuMjIzNTYgOC4wMDIxNyA3LjQwNjI1IDcuODM5ODRDNy42NjEwNiA3LjY0NDEgNy44ODk0MiA3LjQxNzMyIDguMDkxMzUgNy4xNTk1MUM4LjYzNDYyIDcuMTM1NjMgOS4xNTI2NCA3LjAyOTQxIDkuNjQ1NDMgNi44NDA4MkMxMC4xMzgyIDYuNjUyMjMgMTAuNTU0MSA2LjQxOTQ5IDEwLjg5MyA2LjE0MjU4QzExLjIzMiA1Ljg2NTY3IDExLjUwMTIgNS41NTUzNCAxMS43MDA3IDUuMjExNTlDMTEuOTAwMiA0Ljg2Nzg0IDEyIDQuNTI2NDggMTIgNC4xODc1Wk01LjA3MDMzIDUuMzg0OTFMNi4wMzgzIDQuODc1MDNMNy4wMDYyNyA1LjM4NDkxTDYuODIxNCA0LjMwNDk3TDcuNjA0NTEgMy41NDAxNkw2LjUyMjI4IDMuMzgyNkw2LjAzODMgMi40MDAwM0w1LjU1NDMxIDMuMzgyNkw0LjQ3MjA5IDMuNTQwMTZMNS4yNTUxOSA0LjMwNDk3TDUuMDcwMzMgNS4zODQ5MVoiIGZpbGw9IiNGMkM5NEMiLz4KPC9nPgo8L3N2Zz4K", W = ({
10
10
  avatar: j,
11
11
  name: I,
12
12
  points: g,
@@ -16,42 +16,45 @@ const a = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXd
16
16
  correct: i,
17
17
  incorrect: u,
18
18
  inTop: L,
19
- average: y
20
- }) => /* @__PURE__ */ N(x, { children: [
21
- /* @__PURE__ */ N(U, { children: [
22
- /* @__PURE__ */ N(w, { children: [
23
- /* @__PURE__ */ N(k, { children: [
24
- j && /* @__PURE__ */ M(r, { alt: "avatar", src: j }),
25
- !j && /* @__PURE__ */ M(E, { children: c(I || "") })
26
- ] }),
27
- /* @__PURE__ */ N(Q, { children: [
28
- /* @__PURE__ */ M(S, { children: I }),
29
- /* @__PURE__ */ N(t, { children: [
30
- /* @__PURE__ */ M(C, { alt: "rank-icon", src: a }),
31
- /* @__PURE__ */ N(Y, { children: [
32
- /* @__PURE__ */ M(o, { children: g }),
33
- "RTS"
34
- ] }),
35
- /* @__PURE__ */ N(n, { children: [
36
- "TOP ",
37
- L || 0,
38
- "%"
19
+ average: c
20
+ }) => /* @__PURE__ */ N(U, { children: [
21
+ /* @__PURE__ */ M(w, { children: /* @__PURE__ */ N(k, { children: [
22
+ /* @__PURE__ */ N(r, { children: [
23
+ j && /* @__PURE__ */ M(t, { alt: "avatar", src: j }),
24
+ !j && /* @__PURE__ */ M(S, { children: y(I || "") })
25
+ ] }),
26
+ /* @__PURE__ */ N(E, { children: [
27
+ /* @__PURE__ */ M(Q, { children: I }),
28
+ /* @__PURE__ */ N(C, { children: [
29
+ /* @__PURE__ */ N(Y, { children: [
30
+ /* @__PURE__ */ M(n, { alt: "rank-icon", src: m }),
31
+ /* @__PURE__ */ N(e, { children: [
32
+ x(g),
33
+ /* @__PURE__ */ M(o, { children: "PTS" })
39
34
  ] })
35
+ ] }),
36
+ /* @__PURE__ */ M(l, {}),
37
+ /* @__PURE__ */ N("div", { children: [
38
+ "TOP ",
39
+ L || 0,
40
+ "%"
40
41
  ] })
41
42
  ] })
43
+ ] })
44
+ ] }) }),
45
+ /* @__PURE__ */ N(a, { children: [
46
+ /* @__PURE__ */ N(d, { children: [
47
+ /* @__PURE__ */ M(A, { indicator: T || 0, title: "Friends rank" }),
48
+ /* @__PURE__ */ M(A, { indicator: z || 0, title: "Global rank" })
42
49
  ] }),
43
- /* @__PURE__ */ N(e, { children: [
44
- /* @__PURE__ */ M(A, { title: "Friends rank", indicator: T || 0 }),
45
- /* @__PURE__ */ M(A, { title: "Global rank", indicator: z || 0 })
50
+ /* @__PURE__ */ N(s, { children: [
51
+ /* @__PURE__ */ M(D, { indicator: O || 0, title: "Win streak" }),
52
+ /* @__PURE__ */ M(D, { indicator: i || 0, title: "Correct" }),
53
+ /* @__PURE__ */ M(D, { indicator: u || 0, title: "Incorrect" }),
54
+ /* @__PURE__ */ M(D, { indicator: `${c || 0}%`, title: "Succ. rate" })
46
55
  ] })
47
- ] }),
48
- /* @__PURE__ */ N(l, { children: [
49
- /* @__PURE__ */ M(D, { indicator: O || 0, title: "Win streak" }),
50
- /* @__PURE__ */ M(D, { indicator: i || 0, title: "Correct" }),
51
- /* @__PURE__ */ M(D, { indicator: u || 0, title: "Incorrect" }),
52
- /* @__PURE__ */ M(D, { indicator: `${y || 0}%`, title: "Success rate" })
53
56
  ] })
54
57
  ] });
55
58
  export {
56
- V as UserStatistics
59
+ W as UserStatistics
57
60
  };
package/lib/ui/gamification/user-statistics/styles.d.ts CHANGED
@@ -10,7 +10,9 @@ export declare const UserRating: import("@linaria/react").StyledComponent<import
10
10
  export declare const TrophyIcon: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
11
11
  export declare const Rts: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
12
12
  export declare const RtsIndicator: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
13
- export declare const Top: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
13
+ export declare const RtsLabel: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
14
+ export declare const Divider: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
14
15
  export declare const Ranks: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
16
+ export declare const Statistics: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
15
17
  export declare const AvatarPlaceholder: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
16
18
  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 CHANGED
@@ -1,72 +1,81 @@
1
1
  import { styled as e } from "@linaria/react";
2
- const t = e.div`
3
- background-color: var(--color-transparent-user-container);
4
- border-radius: 12px;
5
- color: var(--color-grey-primary);
6
- font-size: 10px;
7
- font-weight: 600;
8
- `, r = e.div`
2
+ const o = e.div`
9
3
  padding: 12px;
10
- border-bottom: 1px solid var(--color-divider-color-primary);
11
- display: flex;
12
- justify-content: space-between;
13
- align-items: center;
14
- column-gap: 5px;
4
+ font-weight: var(--font-weight-default);
5
+ background-color: var(--color-primary-green1);
6
+ border-radius: 12px;
15
7
  `, i = e.div`
16
- padding: 12px 16px;
17
- text-transform: uppercase;
8
+ margin-bottom: 12px;
18
9
  display: flex;
10
+ align-items: center;
19
11
  justify-content: space-between;
20
- column-gap: 16px;
12
+ column-gap: 8px;
21
13
  `, n = e.div`
14
+ display: flex;
15
+ flex-direction: column;
16
+ row-gap: 8px;
17
+ `, r = e.div`
22
18
  display: flex;
23
19
  column-gap: 8px;
24
20
  flex: 1;
25
21
  overflow: hidden;
26
- `, p = e.img`
22
+ `, a = e.img`
27
23
  width: 48px;
28
24
  height: 48px;
29
25
  border-radius: 50%;
30
26
  object-fit: cover;
31
27
  object-position: center;
32
28
  flex-shrink: 0;
33
- `, a = e.div`
34
- padding-top: 4px;
29
+ `, s = e.div`
35
30
  display: flex;
36
31
  flex-direction: column;
37
- row-gap: 4px;
32
+ row-gap: 6px;
38
33
  overflow: hidden;
39
- `, s = e.div`
40
- font-size: 18px;
34
+ `, c = e.div`
41
35
  color: var(--color-white);
36
+ font-size: 16px;
37
+ font-weight: 400;
38
+ line-height: 24px;
42
39
  overflow: hidden;
43
40
  text-overflow: ellipsis;
44
41
  white-space: nowrap;
45
- `, d = e.div`
46
- text-transform: uppercase;
42
+ `, p = e.div`
47
43
  display: flex;
48
44
  align-items: center;
49
- `, c = e.img`
50
- width: 12px;
51
- height: 12px;
52
- margin-right: 4px;
53
- `, l = e.div`
45
+ column-gap: 8px;
46
+ height: 14px;
47
+ color: var(--color-neutrals-white);
48
+ font-size: 14px;
49
+ text-transform: uppercase;
50
+ `, l = e.img`
51
+ width: 15px;
52
+ height: 15px;
53
+ `, d = e.div`
54
54
  display: flex;
55
55
  align-items: center;
56
56
  column-gap: 4px;
57
- border-right: 1px solid var(--color-divider-color-secondary);
58
- padding-right: 5px;
59
57
  `, x = e.div`
60
- font-size: 14px;
61
- color: var(--color-white);
58
+ display: flex;
59
+ align-items: baseline;
60
+ column-gap: 4px;
62
61
  `, f = e.div`
63
- padding-left: 5px;
62
+ font-size: 9px;
63
+ opacity: 0.8;
64
64
  `, g = e.div`
65
- text-transform: uppercase;
66
- display: flex;
67
- flex-direction: column;
68
- row-gap: 4px;
65
+ width: 1px;
66
+ height: 10px;
67
+ background-color: var(--color-white);
68
+ opacity: 0.2;
69
69
  `, h = e.div`
70
+ display: flex;
71
+ column-gap: 8px;
72
+ `, u = e.div`
73
+ display: flex;
74
+ justify-content: space-between;
75
+ padding: 8px 12px;
76
+ border-radius: 4px;
77
+ background-color: var(--color-primary-green2);
78
+ `, m = e.div`
70
79
  background: #2d6ffd;
71
80
  border-radius: 50%;
72
81
  width: 48px;
@@ -79,7 +88,7 @@ const t = e.div`
79
88
  color: #fff;
80
89
  font-size: 18px;
81
90
  flex-shrink: 0;
82
- `, m = e.button`
91
+ `, v = e.button`
83
92
  border: none;
84
93
  outline: none;
85
94
  background-color: transparent;
@@ -95,19 +104,21 @@ const t = e.div`
95
104
  max-height: 48px;
96
105
  `;
97
106
  export {
98
- p as Avatar,
99
- h as AvatarPlaceholder,
100
- i as BottomInfo,
101
- t as Container,
102
- g as Ranks,
103
- l as Rts,
107
+ a as Avatar,
108
+ m as AvatarPlaceholder,
109
+ n as BottomInfo,
110
+ o as Container,
111
+ g as Divider,
112
+ h as Ranks,
113
+ d as Rts,
104
114
  x as RtsIndicator,
105
- f as Top,
106
- r as TopInfo,
107
- c as TrophyIcon,
108
- n as User,
109
- m as UserAccountBtn,
110
- a as UserInfo,
111
- s as UserName,
112
- d as UserRating
115
+ f as RtsLabel,
116
+ u as Statistics,
117
+ i as TopInfo,
118
+ l as TrophyIcon,
119
+ r as User,
120
+ v as UserAccountBtn,
121
+ s as UserInfo,
122
+ c as UserName,
123
+ p as UserRating
113
124
  };
package/lib/ui/navigation/masters.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { styled as o } from "@linaria/react";
2
2
  import { Navigation as i } from "./index.js";
3
3
  import "react/jsx-runtime";
4
- const r = o(i)`
4
+ const n = o(i)`
5
5
  position: absolute;
6
6
  top: 0;
7
7
  left: 0;
@@ -14,7 +14,8 @@ const r = o(i)`
14
14
  animation: show-nav 0.5s ease;
15
15
  animation-fill-mode: forwards;
16
16
 
17
- padding: 16px;
17
+ padding: var(--container-padding);
18
+ border-bottom: 1px solid var(--color-neutrals-gray3);
18
19
 
19
20
  & > button:not(:last-child) {
20
21
  margin-right: 8px;
@@ -32,5 +33,5 @@ const r = o(i)`
32
33
  }
33
34
  `;
34
35
  export {
35
- r as Navigation
36
+ n as Navigation
36
37
  };
package/lib/ui/theme/constants.d.ts CHANGED
@@ -29,7 +29,6 @@ export declare const COLORS: {
29
29
  BG_TRANSPARENT_VOTE_PROGRESS: string;
30
30
  BG_TRANSPARENT_VOTE_PROGRESS_SUCCESS: string;
31
31
  BG_TRANSPARENT_VOTE_PROGRESS_ERROR: string;
32
- BG_TRANSPARENT_USER_CONTAINER: string;
33
32
  BG_TRANSPARENT_ONBOARDING_INAPP: string;
34
33
  LEADERBOARD_UNIT: string;
35
34
  BLUE_PRIMARY: string;
@@ -47,7 +46,6 @@ export declare const COLORS: {
47
46
  RED_1: string;
48
47
  RED_2: string;
49
48
  GREY_PRIMARY: string;
50
- DIVIDER_COLOR_PRIMARY: string;
51
49
  DIVIDER_COLOR_SECONDARY: string;
52
50
  GREEN_PRIMARY_BTN: string;
53
51
  } & {
package/lib/ui/theme/constants.js CHANGED
@@ -8,7 +8,6 @@ const N = {
8
8
  BG_TRANSPARENT_VOTE_PROGRESS: "rgba(255, 255, 255, 0.2)",
9
9
  BG_TRANSPARENT_VOTE_PROGRESS_SUCCESS: "rgba(60, 139, 251, 0.5)",
10
10
  BG_TRANSPARENT_VOTE_PROGRESS_ERROR: "rgba(205, 37, 37, 0.5)",
11
- BG_TRANSPARENT_USER_CONTAINER: "rgba(255, 255, 255, 0.05)",
12
11
  BG_TRANSPARENT_ONBOARDING_INAPP: "rgba(138, 159, 182, 0.2)",
13
12
  LEADERBOARD_UNIT: "rgba(255, 255, 255, 0.5)",
14
13
  BLUE_PRIMARY: "#1589EE",
@@ -26,7 +25,6 @@ const N = {
26
25
  RED_1: "#A30000",
27
26
  RED_2: "#FF4170",
28
27
  GREY_PRIMARY: "#909395",
29
- DIVIDER_COLOR_PRIMARY: "#2d3135",
30
28
  DIVIDER_COLOR_SECONDARY: "#53565a",
31
29
  GREEN_PRIMARY_BTN: "#009B77"
32
30
  }, T = {
@@ -54,11 +52,11 @@ const N = {
54
52
  SERIF: "'Tiempos', 'Tiempos Text', SL-FONT2, Times New Roman, serif",
55
53
  COLOR: "#fff",
56
54
  WEIGHT_DEFAULT: "500"
57
- }, O = Object.keys(E).reduce((_, R) => {
58
- const A = E[R];
55
+ }, O = Object.keys(E).reduce((A, R) => {
56
+ const _ = E[R];
59
57
  return `
60
- ${_}
61
- --color-${R.toLowerCase().replaceAll("_", "-")}: ${A};
58
+ ${A}
59
+ --color-${R.toLowerCase().replaceAll("_", "-")}: ${_};
62
60
  `;
63
61
  }, "");
64
62
  export {
package/lib/utils/common.js CHANGED
@@ -1,4 +1,5 @@
1
- const t = (e) => e.split(/\s+/).map((p) => p[0]).join("").toUpperCase();
1
+ const e = (t) => t.split(/\s+/).map((o) => o[0]).join("").toUpperCase(), a = (t) => t ? t.toLocaleString("en-US") : "0";
2
2
  export {
3
- t as abbreviate
3
+ e as abbreviate,
4
+ a as formatDecimals
4
5
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamlayer/react-ui",
3
- "version": "0.39.0",
3
+ "version": "0.40.0",
4
4
  "type": "module",
5
5
  "main": "./src/index.js",
6
6
  "typings": "./lib/index.d.ts",
@@ -27,10 +27,10 @@
27
27
  ],
28
28
  "peerDependencies": {
29
29
  "@streamlayer/sl-eslib": "^5.52.0",
30
- "@streamlayer/sdk-web": "^0.28.2",
31
30
  "@streamlayer/feature-gamification": "^0.18.0",
32
- "@streamlayer/sdk-web-anonymous-auth": "^0.10.11",
31
+ "@streamlayer/sdk-web": "^0.28.2",
33
32
  "@streamlayer/sdk-web-api": "^0.0.6",
33
+ "@streamlayer/sdk-web-anonymous-auth": "^0.10.11",
34
34
  "@streamlayer/sdk-web-core": "^0.14.2",
35
35
  "@streamlayer/sdk-web-features": "^0.10.5",
36
36
  "@streamlayer/sdk-web-interfaces": "^0.18.4",
@@ -73,6 +73,6 @@
73
73
  "vite-plugin-svgr": "^4.1.0",
74
74
  "vite-svg-loader": "^4.0.0",
75
75
  "vite-tsconfig-paths": "^4.2.1",
76
- "@streamlayer/react": "^0.23.4"
76
+ "@streamlayer/react": "^0.23.5"
77
77
  }
78
78
  }
package/lib/ui/gamification/user-statistics/components/statistics/index.d.ts DELETED
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- interface StatisticsProps {
3
- indicator: string | number;
4
- title: 'Win streak' | 'Correct' | 'Incorrect' | 'Success rate';
5
- }
6
- export declare const Statistics: React.FC<StatisticsProps>;
7
- export {};
package/lib/ui/gamification/user-statistics/components/statistics/index.js DELETED
@@ -1,10 +0,0 @@
1
- import { jsxs as o, jsx as r } from "react/jsx-runtime";
2
- import { Container as n, Indicator as c } from "./styles.js";
3
- import "@linaria/react";
4
- const p = ({ indicator: i, title: t }) => /* @__PURE__ */ o(n, { children: [
5
- /* @__PURE__ */ r(c, { children: i }),
6
- /* @__PURE__ */ r("p", { children: t })
7
- ] });
8
- export {
9
- p as Statistics
10
- };
package/lib/ui/gamification/user-statistics/components/statistics/styles.js DELETED
@@ -1,16 +0,0 @@
1
- import { styled as t } from "@linaria/react";
2
- const o = t.div`
3
- font-weight: 700;
4
- display: flex;
5
- flex-direction: column;
6
- row-gap: 4px;
7
- align-items: center;
8
- text-align: center;
9
- `, i = t.div`
10
- font-size: 18px;
11
- color: #fff;
12
- `;
13
- export {
14
- o as Container,
15
- i as Indicator
16
- };