@streamlayer/react-ui 0.42.1 → 0.44.0

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

@@ -0,0 +1,48 @@
+import { styled as i } from "@linaria/react";
+const t = i.div`
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  width: 100%;
+  height: 58px;
+  min-height: 58px;
+  max-height: 58px;
+  padding: 4px 12px;
+  border-radius: 8px;
+  box-sizing: border-box;
+  background-color: var(--color-primary-green1);
+  overflow: hidden;
+  cursor: pointer;
+`, e = i.img`
+  width: 32px;
+  height: 32px;
+`, r = i.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  row-gap: 6px;
+  padding: 0px 4px;
+  font-weight: var(--font-weight-default);
+`, n = i.div`
+  color: var(--color-neutrals-white);
+  font-size: 11px;
+  line-height: 14px;
+  text-transform: uppercase;
+  opacity: 0.8;
+`, p = i.div`
+  color: var(--color-white);
+  font-size: 14px;
+  line-height: 13px;
+`, x = i.img`
+  margin-right: 8px;
+  width: 18px;
+  height: 18px;
+`;
+export {
+  x as ArrowInviteIcon,
+  t as Container,
+  r as Content,
+  p as Description,
+  e as FriendsIcon,
+  n as Title
+};

package/lib/ui/gamification/leaderboard-item-detail/index.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-import { UserStatisticsProps } from '../../gamification/user-statistics';
-type LeaderboardItemDetailProps = UserStatisticsProps & {
+type LeaderboardItemDetailProps = {
     comeBack: () => void;
 };
 export declare const LeaderboardItemDetail: React.FC<LeaderboardItemDetailProps>;

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

@@ -1,20 +1,10 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { CommonHeader as i } from "../common-header/index.js";
-import { UserStatistics as p } from "../user-statistics/index.js";
-import { Container as e } from "./styles.js";
-import "../../../icon-exit-6a55bb8f.js";
+import { jsx as r } from "react/jsx-runtime";
+import { CommonHeader as m } from "../common-header/index.js";
+import { Container as t } from "./styles.js";
+import "../../../icon-exit-d3f9fc80.js";
 import "../common-header/styles.js";
 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/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 }),
-  /* @__PURE__ */ r(p, { ...t })
-] });
+const f = ({ comeBack: o }) => /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(m, { comeBack: o }) });
 export {
-  D as LeaderboardItemDetail
+  f as LeaderboardItemDetail
 };

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

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

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

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

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

@@ -1,42 +1,42 @@
 import { jsxs as N, jsx as M } from "react/jsx-runtime";
-import { abbreviate as y, formatDecimals as x } from "../../../utils/common.js";
-import { Rank as A } from "./components/rank/index.js";
+import { abbreviate as c, formatDecimals as L } from "../../../utils/common.js";
+import { Rank as j } from "./components/rank/index.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 { Container as k, TopInfo as E, User as Q, UserAccountBtn as Y, Avatar as S, AvatarPlaceholder as r, UserInfo as U, UserName as t, UserRating as w, Rts as C, 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/statistic/styles.js";
-const m = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlRyb3BoeSI+CjxwYXRoIGlkPSJDb21iaW5lZCBTaGFwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjc2OTE2IDMuNTAwMDJDMi43NjkxNiA0LjQ5Nzg2IDIuOTQ3MDUgNS4zODM0OCAzLjMwMjgyIDYuMTU2OTJDMi42MjQ5MyA2LjAxODQ3IDIuMDU4ODMgNS43NDg3MiAxLjYwNDUgNS4zNDc2OEMxLjE1MDE3IDQuOTQ2NjMgMC45MjMwMDggNC41NTk5MiAwLjkyMzAwOCA0LjE4NzUyVjMuNTAwMDJIMi43NjkxNlpNMTEuMDc2OCAzLjUwMDAyVjQuMTg3NTJDMTEuMDc2OCA0LjU1OTkyIDEwLjg0OTcgNC45NDY2MyAxMC4zOTUzIDUuMzQ3NjhDOS45NDEgNS43NDg3MiA5LjM3NDkgNi4wMTg0NyA4LjY5NzAxIDYuMTU2OTJDOS4wNTI3OCA1LjM4MzQ4IDkuMjMwNjYgNC40OTc4NiA5LjIzMDY2IDMuNTAwMDJIMTEuMDc2OFpNMTIgNC4xODc1VjMuMjcwODNDMTIgMy4wNzk4NiAxMS45MzI3IDIuOTE3NTQgMTEuNzk4MSAyLjc4Mzg1QzExLjY2MzUgMi42NTAxNyAxMS41IDIuNTgzMzMgMTEuMzA3NyAyLjU4MzMzSDkuMjMwNzdWMS44OTU4M0M5LjIzMDc3IDEuNTgwNzMgOS4xMTc3OSAxLjMxMDk4IDguODkxODMgMS4wODY1OUM4LjY2NTg2IDAuODYyMTk1IDguMzk0MjMgMC43NSA4LjA3NjkyIDAuNzVIMy45MjMwOEMzLjYwNTc3IDAuNzUgMy4zMzQxNCAwLjg2MjE5NSAzLjEwODE3IDEuMDg2NTlDMi44ODIyMSAxLjMxMDk4IDIuNzY5MjMgMS41ODA3MyAyLjc2OTIzIDEuODk1ODNWMi41ODMzM0gwLjY5MjMwOEMwLjQ5OTk5OSAyLjU4MzMzIDAuMzM2NTM5IDIuNjUwMTcgMC4yMDE5MjMgMi43ODM4NUMwLjA2NzMwNyAyLjkxNzU0IDAgMy4wNzk4NiAwIDMuMjcwODNWNC4xODc1QzAgNC41MjY0OCAwLjA5OTc1ODYgNC44Njc4NCAwLjI5OTI3OSA1LjIxMTU5QzAuNDk4Nzk5IDUuNTU1MzQgMC43NjgwMjcgNS44NjU2NyAxLjEwNjk3IDYuMTQyNThDMS40NDU5MiA2LjQxOTQ5IDEuODYxNzggNi42NTIyMyAyLjM1NDU3IDYuODQwODJDMi44NDczNiA3LjAyOTQxIDMuMzY1MzggNy4xMzU2MyAzLjkwODY1IDcuMTU5NTFDNC4xMTA1OCA3LjQxNzMyIDQuMzM4OTQgNy42NDQxIDQuNTkzNzUgNy44Mzk4NEM0Ljc3NjQ0IDguMDAyMTcgNC45MDI2NCA4LjE3NTI0IDQuOTcyMzYgOC4zNTkwNUM1LjA0MjA3IDguNTQyODYgNS4wNzY5MiA4Ljc1NjUxIDUuMDc2OTIgOUM1LjA3NjkyIDkuMjU3ODEgNS4wMDM2MSA5LjQ3NTA0IDQuODU2OTcgOS42NTE2OUM0LjcxMDM0IDkuODI4MzQgNC40NzU5NiA5LjkxNjY3IDQuMTUzODUgOS45MTY2N0MzLjc5MzI3IDkuOTE2NjcgMy40NzIzNiAxMC4wMjUzIDMuMTkxMTEgMTAuMjQyNUMyLjkwOTg1IDEwLjQ1OTcgMi43NjkyMyAxMC43MzMxIDIuNzY5MjMgMTEuMDYyNVYxMS41MjA4QzIuNzY5MjMgMTEuNTg3NyAyLjc5MDg3IDExLjY0MjYgMi44MzQxMyAxMS42ODU1QzIuODc3NCAxMS43Mjg1IDIuOTMyNjkgMTEuNzUgMyAxMS43NUg5QzkuMDY3MzEgMTEuNzUgOS4xMjI2IDExLjcyODUgOS4xNjU4NiAxMS42ODU1QzkuMjA5MTMgMTEuNjQyNiA5LjIzMDc3IDExLjU4NzcgOS4yMzA3NyAxMS41MjA4VjExLjA2MjVDOS4yMzA3NyAxMC43MzMxIDkuMDkwMTUgMTAuNDU5NyA4LjgwODg5IDEwLjI0MjVDOC41Mjc2NCAxMC4wMjUzIDguMjA2NzMgOS45MTY2NyA3Ljg0NjE1IDkuOTE2NjdDNy41MjQwNCA5LjkxNjY3IDcuMjg5NjYgOS44MjgzNCA3LjE0MzAzIDkuNjUxNjlDNi45OTYzOSA5LjQ3NTA0IDYuOTIzMDggOS4yNTc4MSA2LjkyMzA4IDlDNi45MjMwOCA4Ljc1NjUxIDYuOTU3OTMgOC41NDI4NiA3LjAyNzY0IDguMzU5MDVDNy4wOTczNiA4LjE3NTI0IDcuMjIzNTYgOC4wMDIxNyA3LjQwNjI1IDcuODM5ODRDNy42NjEwNiA3LjY0NDEgNy44ODk0MiA3LjQxNzMyIDguMDkxMzUgNy4xNTk1MUM4LjYzNDYyIDcuMTM1NjMgOS4xNTI2NCA3LjAyOTQxIDkuNjQ1NDMgNi44NDA4MkMxMC4xMzgyIDYuNjUyMjMgMTAuNTU0MSA2LjQxOTQ5IDEwLjg5MyA2LjE0MjU4QzExLjIzMiA1Ljg2NTY3IDExLjUwMTIgNS41NTUzNCAxMS43MDA3IDUuMjExNTlDMTEuOTAwMiA0Ljg2Nzg0IDEyIDQuNTI2NDggMTIgNC4xODc1Wk01LjA3MDMzIDUuMzg0OTFMNi4wMzgzIDQuODc1MDNMNy4wMDYyNyA1LjM4NDkxTDYuODIxNCA0LjMwNDk3TDcuNjA0NTEgMy41NDAxNkw2LjUyMjI4IDMuMzgyNkw2LjAzODMgMi40MDAwM0w1LjU1NDMxIDMuMzgyNkw0LjQ3MjA5IDMuNTQwMTZMNS4yNTUxOSA0LjMwNDk3TDUuMDcwMzMgNS4zODQ5MVoiIGZpbGw9IiNGMkM5NEMiLz4KPC9nPgo8L3N2Zz4K", W = ({
-  avatar: j,
+const m = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlRyb3BoeSI+CjxwYXRoIGlkPSJDb21iaW5lZCBTaGFwZSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjY5MTk3IDQuNjY2NjJDMy42OTE5NyA1Ljk5NzA1IDMuOTI5MTQgNy4xNzc4NyA0LjQwMzUgOC4yMDkxMkMzLjQ5OTY2IDguMDI0NTEgMi43NDQ4NyA3LjY2NDg2IDIuMTM5MSA3LjEzMDE0QzEuNTMzMzMgNi41OTU0MiAxLjIzMDQ2IDYuMDc5OCAxLjIzMDQ2IDUuNTgzMjhWNC42NjY2MkgzLjY5MTk3Wk0xNC43Njg2IDQuNjY2NjJWNS41ODMyOEMxNC43Njg2IDYuMDc5OCAxNC40NjU4IDYuNTk1NDIgMTMuODYgNy4xMzAxNEMxMy4yNTQyIDcuNjY0ODYgMTIuNDk5NCA4LjAyNDUxIDExLjU5NTYgOC4yMDkxMkMxMi4wNjk5IDcuMTc3ODcgMTIuMzA3MSA1Ljk5NzA1IDEyLjMwNzEgNC42NjY2MkgxNC43Njg2Wk0xNS45OTk4IDUuNTgzMjlWNC4zNjEwOEMxNS45OTk4IDQuMTA2NDUgMTUuOTEwMSAzLjg5MDAyIDE1LjczMDYgMy43MTE3OEMxNS41NTExIDMuNTMzNTQgMTUuMzMzMiAzLjQ0NDQyIDE1LjA3NjggMy40NDQ0MkgxMi4zMDc2VjIuNTI3NzZDMTIuMzA3NiAyLjEwNzYzIDEyLjE1NjkgMS43NDc5NyAxMS44NTU2IDEuNDQ4NzhDMTEuNTU0NCAxLjE0OTU5IDExLjE5MjIgMSAxMC43NjkxIDFINS4yMzA3MkM0LjgwNzY0IDEgNC40NDU0NyAxLjE0OTU5IDQuMTQ0MTkgMS40NDg3OEMzLjg0MjkxIDEuNzQ3OTcgMy42OTIyNyAyLjEwNzYzIDMuNjkyMjcgMi41Mjc3NlYzLjQ0NDQySDAuOTIzMDY4QzAuNjY2NjU5IDMuNDQ0NDIgMC40NDg3MTQgMy41MzM1NCAwLjI2OTIyOCAzLjcxMTc4QzAuMDg5NzQxOCAzLjg5MDAyIDAgNC4xMDY0NSAwIDQuMzYxMDhWNS41ODMyOUMwIDYuMDM1MjUgMC4xMzMwMSA2LjQ5MDM5IDAuMzk5MDM0IDYuOTQ4NzJDMC42NjUwNTkgNy40MDcwNSAxLjAyNDAzIDcuODIwODIgMS40NzU5NSA4LjE5MDAzQzEuOTI3ODcgOC41NTkyNCAyLjQ4MjM0IDguODY5NTcgMy4xMzkzOSA5LjEyMTAxQzMuNzk2NDQgOS4zNzI0NiA0LjQ4NzEzIDkuNTE0MDkgNS4yMTE0OSA5LjU0NTkyQzUuNDgwNzEgOS44ODk2NyA1Ljc4NTIgMTAuMTkyIDYuMTI0OTQgMTAuNDUzQzYuMzY4NTMgMTAuNjY5NSA2LjUzNjc5IDEwLjkwMDIgNi42Mjk3NCAxMS4xNDUzQzYuNzIyNjkgMTEuMzkwNCA2Ljc2OTE2IDExLjY3NTIgNi43NjkxNiAxMS45OTk5QzYuNzY5MTYgMTIuMzQzNiA2LjY3MTQxIDEyLjYzMzMgNi40NzU5IDEyLjg2ODhDNi4yODAzOCAxMy4xMDQzIDUuOTY3ODkgMTMuMjIyMSA1LjUzODQxIDEzLjIyMjFDNS4wNTc2NCAxMy4yMjIxIDQuNjI5NzYgMTMuMzY2OSA0LjI1NDc2IDEzLjY1NjZDMy44Nzk3NyAxMy45NDYyIDMuNjkyMjcgMTQuMzEwNiAzLjY5MjI3IDE0Ljc0OTlWMTUuMzYxQzMuNjkyMjcgMTUuNDUwMSAzLjcyMTEyIDE1LjUyMzMgMy43Nzg4MSAxNS41ODA2QzMuODM2NSAxNS42Mzc5IDMuOTEwMjIgMTUuNjY2NSAzLjk5OTk2IDE1LjY2NjVIMTEuOTk5OUMxMi4wODk2IDE1LjY2NjUgMTIuMTYzMyAxNS42Mzc5IDEyLjIyMSAxNS41ODA2QzEyLjI3ODcgMTUuNTIzMyAxMi4zMDc2IDE1LjQ1MDEgMTIuMzA3NiAxNS4zNjFWMTQuNzQ5OUMxMi4zMDc2IDE0LjMxMDYgMTIuMTIwMSAxMy45NDYyIDExLjc0NTEgMTMuNjU2NkMxMS4zNzAxIDEzLjM2NjkgMTAuOTQyMiAxMy4yMjIxIDEwLjQ2MTQgMTMuMjIyMUMxMC4wMzE5IDEzLjIyMjEgOS43MTk0NSAxMy4xMDQzIDkuNTIzOTQgMTIuODY4OEM5LjMyODQzIDEyLjYzMzMgOS4yMzA2OCAxMi4zNDM2IDkuMjMwNjggMTEuOTk5OUM5LjIzMDY4IDExLjY3NTIgOS4yNzcxNSAxMS4zOTA0IDkuMzcwMSAxMS4xNDUzQzkuNDYzMDUgMTAuOTAwMiA5LjYzMTMxIDEwLjY2OTUgOS44NzQ5IDEwLjQ1M0MxMC4yMTQ2IDEwLjE5MiAxMC41MTkxIDkuODg5NjcgMTAuNzg4NCA5LjU0NTkyQzExLjUxMjcgOS41MTQwOSAxMi4yMDM0IDkuMzcyNDYgMTIuODYwNCA5LjEyMTAxQzEzLjUxNzUgOC44Njk1NyAxNC4wNzIgOC41NTkyNCAxNC41MjM5IDguMTkwMDNDMTQuOTc1OCA3LjgyMDgyIDE1LjMzNDggNy40MDcwNSAxNS42MDA4IDYuOTQ4NzJDMTUuODY2OCA2LjQ5MDM5IDE1Ljk5OTggNi4wMzUyNSAxNS45OTk4IDUuNTgzMjlaTTYuNzYwNDcgNy4xNzk4TDguMDUxMDkgNi40OTk5N0w5LjM0MTcgNy4xNzk4TDkuMDk1MjEgNS43Mzk4OUwxMC4xMzkzIDQuNzIwMTVMOC42OTYzOSA0LjUxMDA3TDguMDUxMDkgMy4yTDcuNDA1NzggNC41MTAwN0w1Ljk2MjgzIDQuNzIwMTVMNy4wMDY5NiA1LjczOTg5TDYuNzYwNDcgNy4xNzk4WiIgZmlsbD0iI0YyQzk0QyIvPgo8L2c+Cjwvc3ZnPgo=", v = ({
+  avatar: z,
   name: I,
-  points: g,
-  friendsRank: T,
-  rank: z,
-  streak: O,
-  correct: i,
-  incorrect: u,
-  inTop: L,
-  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 || "") })
+  points: T,
+  friendsRank: g,
+  rank: A,
+  streak: y,
+  correct: u,
+  incorrect: x,
+  inTop: i,
+  average: O
+}) => /* @__PURE__ */ N(k, { children: [
+  /* @__PURE__ */ M(E, { children: /* @__PURE__ */ N(Q, { children: [
+    /* @__PURE__ */ N(Y, { children: [
+      z && /* @__PURE__ */ M(S, { alt: "avatar", src: z }),
+      !z && /* @__PURE__ */ M(r, { children: c(I || "") })
     ] }),
-    /* @__PURE__ */ N(E, { children: [
-      /* @__PURE__ */ M(Q, { children: I }),
-      /* @__PURE__ */ N(C, { children: [
-        /* @__PURE__ */ N(Y, { children: [
+    /* @__PURE__ */ N(U, { children: [
+      /* @__PURE__ */ M(t, { children: I }),
+      /* @__PURE__ */ N(w, { children: [
+        /* @__PURE__ */ N(C, { children: [
           /* @__PURE__ */ M(n, { alt: "rank-icon", src: m }),
           /* @__PURE__ */ N(e, { children: [
-            x(g),
+            L(T),
             /* @__PURE__ */ M(o, { children: "PTS" })
           ] })
         ] }),
         /* @__PURE__ */ M(l, {}),
         /* @__PURE__ */ N("div", { children: [
           "TOP ",
-          L || 0,
+          i || 0,
           "%"
         ] })
       ] })
@@ -44,17 +44,17 @@ const m = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXd
   ] }) }),
   /* @__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__ */ M(j, { indicator: g || 0, title: "Friends rank" }),
+      /* @__PURE__ */ M(j, { indicator: A || 0, title: "Global rank" })
     ] }),
     /* @__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__ */ M(D, { indicator: y || 0, title: "Win streak" }),
+      /* @__PURE__ */ M(D, { indicator: u || 0, title: "Correct" }),
+      /* @__PURE__ */ M(D, { indicator: x || 0, title: "Incorrect" }),
+      /* @__PURE__ */ M(D, { indicator: `${O || 0}%`, title: "Succ. rate" })
     ] })
   ] })
 ] });
 export {
-  W as UserStatistics
+  v as UserStatistics
 };

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

@@ -1,51 +1,58 @@
-import { jsxs as e, jsx as i } from "react/jsx-runtime";
-import { useState as b, useCallback as N, useEffect as s } from "react";
-import { QuestionType as S } from "@streamlayer/sdk-web-types";
-import { V as D, c as j } from "../../../index-7045fbb2.js";
-import { Container as p, Title as M, Options as h, Loader as Z, Feedback as u, FeedbackIcon as L, FeedbackTitle as z, FeedbackDescription as G } from "./styles.js";
-import "./components/voting-option/styles.js";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { useState as p, useCallback as s, useEffect as b } from "react";
+import { QuestionType as N } from "@streamlayer/sdk-web-types";
+import { V as S, c as D } from "../../../index-7f3361f2.js";
+import { Container as j, Title as M, Options as h, Loader as u, Feedback as Z, FeedbackIcon as L, FeedbackTitle as T, FeedbackDescription as z } from "./styles.js";
+import { WinBar as G } from "./win-bar/index.js";
+import "./vote-option/styles.js";
 import "@linaria/react";
-const A = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeT0iMC4wMDE5NTMxMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iMTIiIGZpbGw9IiNGODAwMjIiLz4KPHJlY3QgeD0iOC4yNSIgeT0iNy4wMDE5NSIgd2lkdGg9IjEyLjM3NDQiIGhlaWdodD0iMS43Njc3NyIgcng9IjAuODgzODg0IiB0cmFuc2Zvcm09InJvdGF0ZSg0NSA4LjI1IDcuMDAxOTUpIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSI3IiB5PSIxNS43NTIiIHdpZHRoPSIxMi4zNzQ0IiBoZWlnaHQ9IjEuNzY3NzciIHJ4PSIwLjg4Mzg4NCIgdHJhbnNmb3JtPSJyb3RhdGUoLTQ1IDcgMTUuNzUyKSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==", x = ({
-  title: a,
-  questionId: g,
-  options: t,
+import "../../timer/index.js";
+import "react-countdown-circle-timer";
+import "../../theme/constants.js";
+import "./win-bar/styles.js";
+import "../../icons/index.js";
+const A = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeT0iMC4wMDE5NTMxMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iMTIiIGZpbGw9IiNGODAwMjIiLz4KPHJlY3QgeD0iOC4yNSIgeT0iNy4wMDE5NSIgd2lkdGg9IjEyLjM3NDQiIGhlaWdodD0iMS43Njc3NyIgcng9IjAuODgzODg0IiB0cmFuc2Zvcm09InJvdGF0ZSg0NSA4LjI1IDcuMDAxOTUpIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSI3IiB5PSIxNS43NTIiIHdpZHRoPSIxMi4zNzQ0IiBoZWlnaHQ9IjEuNzY3NzciIHJ4PSIwLjg4Mzg4NCIgdHJhbnNmb3JtPSJyb3RhdGUoLTQ1IDcgMTUuNzUyKSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==", W = ({
+  title: m,
+  questionId: a,
+  options: r,
   questionAnswered: l,
   feedbackMessages: I,
-  questionAnsweredCorrectly: d,
-  questionType: n
+  questionAnsweredCorrectly: t,
+  questionType: d
 }) => {
-  const [m, r] = b(!1), o = N(
-    (c) => {
-      r(c);
+  const [g, n] = p(!1), e = s(
+    (o) => {
+      n(o);
     },
-    [r]
+    [n]
   );
-  return s(() => {
-    o(!1);
-  }, [t, o]), /* @__PURE__ */ e(p, { children: [
-    /* @__PURE__ */ i(M, { children: a }),
-    /* @__PURE__ */ e(h, { children: [
-      m && /* @__PURE__ */ i(Z, { children: "Loading..." }),
-      t.map((c) => /* @__PURE__ */ i(
-        D,
+  return b(() => {
+    e(!1);
+  }, [r, e]), /* @__PURE__ */ c(j, { children: [
+    /* @__PURE__ */ i(G, { title: "To win", points: 100, isTimer: !0 }),
+    /* @__PURE__ */ i(M, { children: m }),
+    /* @__PURE__ */ c(h, { children: [
+      g && /* @__PURE__ */ i(u, { children: "Loading..." }),
+      r.map((o) => /* @__PURE__ */ i(
+        S,
         {
-          toggleIsLoadingSubmitAnswer: o,
-          questionId: g,
-          questionType: n,
-          ...c
+          toggleIsLoadingSubmitAnswer: e,
+          questionId: a,
+          questionType: d,
+          ...o
         },
-        c.id
+        o.id
       ))
     ] }),
-    l && n === S.TRIVIA && /* @__PURE__ */ e(u, { children: [
-      /* @__PURE__ */ i(L, { alt: "reaction-to-answer", src: d ? j : A }),
-      /* @__PURE__ */ e("div", { children: [
-        /* @__PURE__ */ i(z, { children: d ? I.correctFeedback.title : I.incorrectFeedback.title }),
-        /* @__PURE__ */ i(G, { children: d ? I.correctFeedback.description : I.incorrectFeedback.description })
+    l && d === N.TRIVIA && /* @__PURE__ */ c(Z, { children: [
+      /* @__PURE__ */ i(L, { alt: "reaction-to-answer", src: t ? D : A }),
+      /* @__PURE__ */ c("div", { children: [
+        /* @__PURE__ */ i(T, { children: t ? I.correctFeedback.title : I.incorrectFeedback.title }),
+        /* @__PURE__ */ i(z, { children: t ? I.correctFeedback.description : I.incorrectFeedback.description })
       ] })
     ] })
   ] });
 };
 export {
-  x as Vote
+  W as Vote
 };

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

@@ -2,7 +2,7 @@ import { styled as t } from "@linaria/react";
 const e = t.div`
   padding: 16px;
   color: #fff;
-  background: #000;
+  width: 100%;
   font-weight: 700;
   font-size: 14px;
 
@@ -19,7 +19,7 @@ const e = t.div`
   & > div:not(:last-child) {
     margin-bottom: 12px;
   }
-`, a = t.div`
+`, d = t.div`
   position: absolute;
   left: 0px;
   background-color: var(--color-transparent-vote-container);
@@ -29,7 +29,7 @@ const e = t.div`
   display: flex;
   justify-content: center;
   align-items: center;
-`, d = t.div`
+`, a = t.div`
   padding: 14px 12px 14px 16px;
   display: flex;
   align-items: center;
@@ -44,7 +44,7 @@ const e = t.div`
   font-size: 16;
   font-weight: 700;
   margin-bottom: 10px;
-`, r = t.div`
+`, s = t.div`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
@@ -55,11 +55,11 @@ const e = t.div`
 `;
 export {
   e as Container,
-  d as Feedback,
-  r as FeedbackDescription,
+  a as Feedback,
+  s as FeedbackDescription,
   l as FeedbackIcon,
   p as FeedbackTitle,
-  a as Loader,
+  d as Loader,
   n as Options,
   o as Title
 };

package/lib/ui/gamification/vote/{components/voting-option → vote-option}/index.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "@streamlayer/sdk-web-types";
-import { V as n } from "../../../../../index-7045fbb2.js";
+import { V as n } from "../../../../index-7f3361f2.js";
 import "./styles.js";
 import "@linaria/react";
 export {

package/lib/ui/gamification/vote/win-bar/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface WinBarProps {
+    title?: string;
+    points?: number;
+    isPlayingTimer?: boolean;
+    isTimer?: boolean;
+    onTimerExpired?: () => void;
+}
+export declare const WinBar: React.FC<WinBarProps>;
+export {};

package/lib/ui/gamification/vote/win-bar/index.js

@@ -0,0 +1,24 @@
+import { jsxs as r, jsx as i, Fragment as c } from "react/jsx-runtime";
+import { Timer as p } from "../../../timer/index.js";
+import { WinBarContainer as d, Content as h, Title as l, WinIcon as s, Points as a, PointsCount as P, PointsUnits as f } from "./styles.js";
+import "@linaria/react";
+import "react";
+import "react-countdown-circle-timer";
+import "../../../theme/constants.js";
+import "../../../icons/index.js";
+const B = ({ title: n, points: o, isPlayingTimer: t, isTimer: e, onTimerExpired: m }) => /* @__PURE__ */ r(d, { children: [
+  /* @__PURE__ */ r(h, { children: [
+    n && /* @__PURE__ */ i(l, { children: n }),
+    o !== void 0 && /* @__PURE__ */ r(c, { children: [
+      /* @__PURE__ */ i(s, { name: "icon-trophy" }),
+      /* @__PURE__ */ r(a, { children: [
+        /* @__PURE__ */ i(P, { children: o }),
+        /* @__PURE__ */ i(f, { children: "PTS" })
+      ] })
+    ] })
+  ] }),
+  e && /* @__PURE__ */ i(p, { isPlaying: t, onTimerExpired: m })
+] });
+export {
+  B as WinBar
+};

package/lib/ui/gamification/vote/win-bar/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const WinBarContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Content: 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>>;
+export declare const WinIcon: any;
+export declare const Points: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const PointsCount: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const PointsUnits: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

package/lib/ui/gamification/vote/win-bar/styles.js

@@ -0,0 +1,50 @@
+import { styled as t } from "@linaria/react";
+import { SvgIcon as i } from "../../../icons/index.js";
+import "react/jsx-runtime";
+import "react";
+const a = t.div`
+  border: 1px solid var(--color-neutrals-gray3);
+  font-family: var(--font-regular);
+  font-weight: var(--font-weight-default);
+  color: var(--color-neutrals-gray9);
+  width: 100%;
+  min-height: 40px;
+  border-radius: 100px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 3px 3px 3px 11px;
+  font-size: 14px;
+  letter-spacing: -0.15px;
+
+  > div:first-child:last-child {
+    margin-left: auto;
+    margin-right: auto;
+  }
+`, s = t.div`
+  display: flex;
+  align-items: center;
+`, l = t.div`
+  color: var(--color-neutrals-gray7);
+  margin-right: 8px;
+`, p = t(i)`
+  margin-right: 4px;
+`, g = t.div`
+  display: flex;
+  align-items: flex-end;
+`, c = t.span`
+  margin-right: 6px;
+  font-size: 14px;
+  line-height: 14px;
+`, d = t.span`
+  font-size: 10px;
+`;
+export {
+  s as Content,
+  g as Points,
+  c as PointsCount,
+  d as PointsUnits,
+  l as Title,
+  a as WinBarContainer,
+  p as WinIcon
+};

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

@@ -12,7 +12,6 @@ export declare const icons: {
     'icon-masters-logo': any;
     'icon-logout': any;
     'icon-link': any;
-    'icon-invite-link': any;
     'icon-invite-arrow': any;
     'icon-friends': any;
     'icon-exit': any;