@streamlayer/react-ui 0.46.1 → 0.48.0

package/lib/index.js

@@ -1,16 +1,16 @@
-import { QuestionInApp as yo } from "./ui/notifications/notification/question-inapp/index.js";
-import { Login as Uo } from "./ui/login/index.js";
-import { Onboarding as ko } from "./ui/gamification/onboarding/index.js";
-import { ActivePages as wo, Tab as zo, Tabs as Bo } from "./ui/gamification/tabs/index.js";
-import { LeaderboardItemDetail as Eo } from "./ui/gamification/leaderboard-item-detail/index.js";
-import { Question as Go } from "./ui/gamification/question/index.js";
-import { QuestionList as Jo } from "./ui/gamification/question/list/index.js";
-import { UserStatistics as Mo } from "./ui/gamification/user-statistics/index.js";
-import { Vote as Ro } from "./ui/gamification/vote/index.js";
-import { Demo as Xo } from "./ui/demo/index.js";
-import { Points as Zo } from "./ui/gamification/points/index.js";
-import { StreamLayerThemeProvider as $o } from "./ui/theme/index.js";
-import { ThemeVariables as rr, theme as tr, themeStr as mr } from "./ui/theme/theme.js";
+import { QuestionInApp as ko } from "./ui/notifications/notification/question-inapp/index.js";
+import { Login as wo } from "./ui/login/index.js";
+import { Onboarding as Bo } from "./ui/gamification/onboarding/index.js";
+import { ActivePages as Eo, Tab as Fo, Tabs as Go } from "./ui/gamification/tabs/index.js";
+import { LeaderboardItemDetail as Jo } from "./ui/gamification/leaderboard-item-detail/index.js";
+import { Question as Mo } from "./ui/gamification/question/index.js";
+import { QuestionList as Ro } from "./ui/gamification/question/list/index.js";
+import { UserStatistics as Xo } from "./ui/gamification/user-statistics/index.js";
+import { Vote as Zo } from "./ui/gamification/vote/index.js";
+import { Demo as $o } from "./ui/demo/index.js";
+import { Points as rr } from "./ui/gamification/points/index.js";
+import { StreamLayerThemeProvider as mr } from "./ui/theme/index.js";
+import { ThemeVariables as ir, theme as er, themeStr as fr } from "./ui/theme/theme.js";
 import "react/jsx-runtime";
 import "react";
 import "./icon-exit-d3f9fc80.js";
@@ -50,9 +50,11 @@ import "./ui/gamification/user-statistics/components/rank/styles.js";
 import "./ui/gamification/user-statistics/components/statistic/index.js";
 import "./ui/gamification/user-statistics/components/statistic/styles.js";
 import "./ui/gamification/user-statistics/styles.js";
-import "./index-7f3361f2.js";
-import "./ui/gamification/vote/vote-option/styles.js";
+import "./ui/gamification/vote/feedback/index.js";
+import "./ui/gamification/vote/feedback/styles.js";
 import "./ui/gamification/vote/styles.js";
+import "./ui/gamification/vote/vote-option/index.js";
+import "./ui/gamification/vote/vote-option/styles.js";
 import "./ui/gamification/vote/win-bar/index.js";
 import "./ui/gamification/vote/win-bar/styles.js";
 import "@streamlayer/sdk-web-interfaces";
@@ -76,9 +78,11 @@ import "./ui/gamification/insight-list/styles.js";
 import "./ui/gamification/detailed-insight/styles.js";
 import "./ui/demo/components/Leaderboard.js";
 import "./ui/gamification/leaderboard-list/index.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "./ui/gamification/leaderboard-item/index.js";
 import "./ui/gamification/leaderboard-item/styles.js";
-import "./ui/gamification/leaderboard-list/styles.js";
 import "./ui/demo/styles.js";
 import "./ui/demo/Highlights.js";
 import "./ui/demo/components/Insights.js";
@@ -92,21 +96,21 @@ import "./ui/gamification/points/styles.js";
 import "./ui/theme/breakpoints.js";
 import "@linaria/core";
 export {
-  wo as ActivePages,
-  Xo as Demo,
-  Eo as LeaderboardItemDetail,
-  Uo as Login,
-  ko as Onboarding,
-  Zo as Points,
-  Go as Question,
-  yo as QuestionInApp,
-  Jo as QuestionList,
-  $o as StreamLayerThemeProvider,
-  zo as Tab,
-  Bo as Tabs,
-  rr as ThemeVariables,
-  Mo as UserStatistics,
-  Ro as Vote,
-  tr as theme,
-  mr as themeStr
+  Eo as ActivePages,
+  $o as Demo,
+  Jo as LeaderboardItemDetail,
+  wo as Login,
+  Bo as Onboarding,
+  rr as Points,
+  Mo as Question,
+  ko as QuestionInApp,
+  Ro as QuestionList,
+  mr as StreamLayerThemeProvider,
+  Fo as Tab,
+  Go as Tabs,
+  ir as ThemeVariables,
+  Xo as UserStatistics,
+  Zo as Vote,
+  er as theme,
+  fr as themeStr
 };

package/lib/ui/app/Features/Gamification/Leaderboard.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { Gamification } from '@streamlayer/feature-gamification';
 export declare const Leaderboard: React.FC<{
-    store: ReturnType<Exclude<Gamification['leaderboardList'], undefined>['getStore']>;
+    leaderboardList: Gamification['leaderboardList'];
 }>;

package/lib/ui/app/Features/Gamification/Leaderboard.js

@@ -1,40 +1,29 @@
-import { jsx as e, jsxs as l, Fragment as u } from "react/jsx-runtime";
-import { useStore as b } from "@nanostores/react";
+import { jsxs as c, Fragment as n, jsx as m } from "react/jsx-runtime";
+import { useStore as d } from "@nanostores/react";
 import { useState as f } from "react";
-import { LeaderboardItemDetail as I } from "../../../gamification/leaderboard-item-detail/index.js";
-import { LeaderboardList as v } from "../../../gamification/leaderboard-list/index.js";
+import { LeaderboardItemDetail as l } from "../../../gamification/leaderboard-item-detail/index.js";
+import { LeaderboardList as I } from "../../../gamification/leaderboard-list/index.js";
 import "../../../gamification/common-header/index.js";
 import "../../../../icon-exit-d3f9fc80.js";
 import "../../../gamification/common-header/styles.js";
 import "@linaria/react";
 import "../../../gamification/leaderboard-item-detail/styles.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../../../gamification/leaderboard-item/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/leaderboard-item/styles.js";
-import "../../../gamification/leaderboard-list/styles.js";
-const z = ({ store: s }) => {
-  const { data: i = [], loading: d } = b(s), [r, p] = f(void 0);
-  if (d)
-    return /* @__PURE__ */ e("div", { children: "wait leader board..." });
-  const o = (t) => {
-    var a;
-    const n = (a = i.find((c) => {
-      var m;
-      return ((m = c.attributes) == null ? void 0 : m.userId) === t;
-    })) == null ? void 0 : a.attributes;
-    p(n);
+const q = ({ leaderboardList: o }) => {
+  const { data: r } = d(o.$store), [t, i] = f(void 0), e = (p) => {
+    const a = r.find((s) => s.userId === p);
+    i(a);
   };
-  return /* @__PURE__ */ l(u, { children: [
-    r && /* @__PURE__ */ e(I, { comeBack: () => o(null), ...r }),
-    !r && /* @__PURE__ */ e(
-      v,
-      {
-        items: i.filter((t) => t.attributes).map((t) => t.attributes),
-        openItemDetail: o
-      }
-    )
+  return /* @__PURE__ */ c(n, { children: [
+    t && /* @__PURE__ */ m(l, { comeBack: () => e(null), ...t }),
+    !t && /* @__PURE__ */ m(I, { fetchMore: o.fetchMore, items: r, openItemDetail: e })
   ] });
 };
 export {
-  z as Leaderboard
+  q as Leaderboard
 };

package/lib/ui/app/Features/Gamification/Question.js

@@ -1,21 +1,24 @@
-import { jsxs as y, jsx as o } from "react/jsx-runtime";
-import { styled as e } from "@linaria/react";
-import { useState as x, useCallback as g, useMemo as a } from "react";
-import { QuestionType as b } from "@streamlayer/sdk-web-types";
-import { Vote as h } from "../../../gamification/vote/index.js";
-import { VoteHeader as C } from "../../../gamification/vote/header/index.js";
-import "../../../../index-7f3361f2.js";
-import "../../../gamification/vote/vote-option/styles.js";
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { styled as l } from "@linaria/react";
+import { QuestionType as c } from "@streamlayer/sdk-web-types";
+import { VoteHeader as f } from "../../../gamification/detail/header/index.js";
+import { Sponsor as s } from "../../../gamification/detail/sponsor/index.js";
+import { Vote as a } from "../../../gamification/vote/index.js";
+import "../../../gamification/constants.js";
+import "../../../gamification/detail/header/styles.js";
+import "../../../icons/index.js";
+import "react";
+import "../../../gamification/vote/feedback/index.js";
+import "../../../gamification/vote/feedback/styles.js";
 import "../../../gamification/vote/styles.js";
+import "../../../gamification/vote/vote-option/index.js";
+import "../../../gamification/vote/vote-option/styles.js";
 import "../../../gamification/vote/win-bar/index.js";
 import "../../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../../theme/constants.js";
 import "../../../gamification/vote/win-bar/styles.js";
-import "../../../icons/index.js";
-import "../../../gamification/constants.js";
-import "../../../gamification/vote/header/styles.js";
-const T = e.div`
+const x = l.div`
   background: var(--color-transparent-item);
   width: 100%;
   height: 100%;
@@ -24,51 +27,14 @@ const T = e.div`
   align-items: center;
   justify-content: flex-start;
   flex-direction: column;
-`, D = ({ openedQuestion: r, closeQuestion: s, vote: l }) => {
-  var c;
-  const [f, m] = x(!1);
-  g(
-    (t) => {
-      m(t);
-    },
-    [m]
-  );
-  const i = a(
-    () => r == null ? void 0 : r.answers.find((t) => t.youVoted === !0),
-    [r]
-  ), p = a(
-    () => !!(r != null && r.answers.find((t) => t.correct === !0)),
-    [r]
-  );
-  return /* @__PURE__ */ y(T, { children: [
-    /* @__PURE__ */ o(C, { close: s, type: (r == null ? void 0 : r.type) || b.UNSET }),
-    r && /* @__PURE__ */ o(
-      h,
-      {
-        title: r.subject,
-        feedbackMessages: (c = r.options) == null ? void 0 : c.options.value,
-        questionType: r.type,
-        questionId: r.id,
-        questionAnswered: !!i,
-        questionAnsweredCorrectly: i == null ? void 0 : i.correct,
-        options: r.answers.map((t) => ({
-          id: t.id,
-          title: t.text,
-          icon: t.icon,
-          type: r.type,
-          correct: t.correct,
-          percentage: t.percentage,
-          answered: t.youVoted,
-          disabled: !!i || r.marketClosed || f,
-          questionAnswered: !!i,
-          hasCorrectAnswer: p,
-          points: t.points,
-          onVote: l
-        }))
-      }
-    )
+`, B = ({ openedQuestion: r, closeQuestion: m, vote: i }) => {
+  var o;
+  return /* @__PURE__ */ p(x, { children: [
+    /* @__PURE__ */ t(f, { close: m, type: (r == null ? void 0 : r.type) || c.UNSET }),
+    r && /* @__PURE__ */ t(a, { vote: i, openedQuestion: r }),
+    /* @__PURE__ */ t(s, { sponsorLogo: (o = r == null ? void 0 : r.sponsorship) == null ? void 0 : o.logo })
   ] });
 };
 export {
-  D as Question
+  B as Question
 };

package/lib/ui/app/Features/Gamification/Tabs.js

@@ -1,10 +1,10 @@
-import { jsxs as e, Fragment as p, jsx as r } from "react/jsx-runtime";
-import { useState as s } from "react";
-import { SDKWhiteContainer as n, SDKContentContainer as a } from "../../styles.js";
-import { ActivePages as m, Tabs as u } from "../../../gamification/tabs/index.js";
-import { Leaderboard as S } from "./Leaderboard.js";
-import { QuestionsList as d } from "./QuestionsList.js";
-import { UserSummary as g } from "./UserSummary.js";
+import { jsxs as m, Fragment as s, jsx as r } from "react/jsx-runtime";
+import { useState as n } from "react";
+import { SDKWhiteContainer as a, SDKContentContainer as e } from "../../styles.js";
+import { ActivePages as i, Tabs as d } from "../../../gamification/tabs/index.js";
+import { Leaderboard as u } from "./Leaderboard.js";
+import { QuestionsList as l } from "./QuestionsList.js";
+import { UserSummary as c } from "./UserSummary.js";
 import "@linaria/react";
 import "../../../gamification/tabs/styles.js";
 import "@nanostores/react";
@@ -14,10 +14,12 @@ import "../../../../icon-exit-d3f9fc80.js";
 import "../../../gamification/common-header/styles.js";
 import "../../../gamification/leaderboard-item-detail/styles.js";
 import "../../../gamification/leaderboard-list/index.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../../../gamification/leaderboard-item/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/leaderboard-item/styles.js";
-import "../../../gamification/leaderboard-list/styles.js";
 import "../../../gamification/question/list/index.js";
 import "../../../gamification/question/index.js";
 import "@streamlayer/sdk-web-types";
@@ -33,17 +35,17 @@ import "../../../gamification/user-statistics/components/rank/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 V = ({ gamification: t }) => {
-  const [o, i] = s(m.HOME);
-  return /* @__PURE__ */ e(p, { children: [
-    /* @__PURE__ */ e(n, { children: [
-      /* @__PURE__ */ r(u, { activePage: o, toggleActivePage: i }),
-      o === m.HOME && /* @__PURE__ */ r(g, { store: t.userSummary.getStore() })
+const Y = ({ gamification: t }) => {
+  const [o, p] = n(i.HOME);
+  return /* @__PURE__ */ m(s, { children: [
+    /* @__PURE__ */ m(a, { children: [
+      /* @__PURE__ */ r(d, { activePage: o, toggleActivePage: p }),
+      o === i.HOME && /* @__PURE__ */ r(c, { store: t.userSummary.getStore() })
     ] }),
-    o === m.HOME && /* @__PURE__ */ r(a, { children: /* @__PURE__ */ r(d, { openQuestion: t.openQuestion, store: t.questions.getStore() }) }),
-    o === m.LEADERBOARD && /* @__PURE__ */ r(S, { store: t.leaderboardList.getStore() })
+    o === i.HOME && /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(l, { openQuestion: t.openQuestion, store: t.questions.getStore() }) }),
+    o === i.LEADERBOARD && /* @__PURE__ */ r(e, { style: { flex: "1 1 auto" }, children: /* @__PURE__ */ r(u, { leaderboardList: t.leaderboardList }) })
   ] });
 };
 export {
-  V as Tabs
+  Y as Tabs
 };

package/lib/ui/app/Features/Gamification/index.js

@@ -2,24 +2,27 @@ import { jsxs as m, Fragment as p, jsx as r } from "react/jsx-runtime";
 import { styled as e } from "@linaria/react";
 import { useStore as n } from "@nanostores/react";
 import { SDKScrollContainer as s } from "../../styles.js";
-import { ShowIn as a } from "../../../show-in/index.js";
-import { Question as d } from "./Question.js";
-import { Tabs as l } from "./Tabs.js";
-import "react";
+import { ShowIn as l } from "../../../show-in/index.js";
+import { Question as a } from "./Question.js";
+import { Tabs as d } from "./Tabs.js";
 import "@streamlayer/sdk-web-types";
+import "../../../gamification/detail/header/index.js";
+import "../../../gamification/constants.js";
+import "../../../gamification/detail/header/styles.js";
+import "../../../icons/index.js";
+import "react";
+import "../../../gamification/detail/sponsor/index.js";
 import "../../../gamification/vote/index.js";
-import "../../../../index-7f3361f2.js";
-import "../../../gamification/vote/vote-option/styles.js";
+import "../../../gamification/vote/feedback/index.js";
+import "../../../gamification/vote/feedback/styles.js";
 import "../../../gamification/vote/styles.js";
+import "../../../gamification/vote/vote-option/index.js";
+import "../../../gamification/vote/vote-option/styles.js";
 import "../../../gamification/vote/win-bar/index.js";
 import "../../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../../theme/constants.js";
 import "../../../gamification/vote/win-bar/styles.js";
-import "../../../icons/index.js";
-import "../../../gamification/vote/header/index.js";
-import "../../../gamification/constants.js";
-import "../../../gamification/vote/header/styles.js";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";
@@ -29,10 +32,12 @@ import "../../../../icon-exit-d3f9fc80.js";
 import "../../../gamification/common-header/styles.js";
 import "../../../gamification/leaderboard-item-detail/styles.js";
 import "../../../gamification/leaderboard-list/index.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../../../gamification/leaderboard-item/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/leaderboard-item/styles.js";
-import "../../../gamification/leaderboard-list/styles.js";
 import "./QuestionsList.js";
 import "../../../gamification/question/list/index.js";
 import "../../../gamification/question/index.js";
@@ -47,28 +52,28 @@ import "../../../gamification/user-statistics/components/rank/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 u = e(a)`
+const u = e(l)`
   position: absolute;
   inset: 0;
   top: var(--header-height);
   background: var(--color-neutrals-white);
   z-index: 3;
-`, so = ({
+`, ho = ({
   gamification: o
 }) => {
   const { loading: i, data: t } = n(o.openedQuestion);
   return /* @__PURE__ */ m(p, { children: [
     (i || t) && /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(
-      d,
+      a,
       {
         closeQuestion: o.closeQuestion,
         vote: o.submitAnswer,
         openedQuestion: t
       }
     ) }),
-    /* @__PURE__ */ r(s, { "data-nav": "true", children: /* @__PURE__ */ r(l, { gamification: o }) })
+    /* @__PURE__ */ r(s, { "data-nav": "true", style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ r(d, { gamification: o }) })
   ] });
 };
 export {
-  so as GamificationOverlay
+  ho as GamificationOverlay
 };

package/lib/ui/app/Features/index.js

@@ -10,19 +10,22 @@ import "@linaria/react";
 import "../styles.js";
 import "../../show-in/index.js";
 import "./Gamification/Question.js";
+import "../../gamification/detail/header/index.js";
+import "../../gamification/constants.js";
+import "../../gamification/detail/header/styles.js";
+import "../../icons/index.js";
+import "../../gamification/detail/sponsor/index.js";
 import "../../gamification/vote/index.js";
-import "../../../index-7f3361f2.js";
-import "../../gamification/vote/vote-option/styles.js";
+import "../../gamification/vote/feedback/index.js";
+import "../../gamification/vote/feedback/styles.js";
 import "../../gamification/vote/styles.js";
+import "../../gamification/vote/vote-option/index.js";
+import "../../gamification/vote/vote-option/styles.js";
 import "../../gamification/vote/win-bar/index.js";
 import "../../timer/index.js";
 import "react-countdown-circle-timer";
 import "../../theme/constants.js";
 import "../../gamification/vote/win-bar/styles.js";
-import "../../icons/index.js";
-import "../../gamification/vote/header/index.js";
-import "../../gamification/constants.js";
-import "../../gamification/vote/header/styles.js";
 import "./Gamification/Tabs.js";
 import "../../gamification/tabs/index.js";
 import "../../gamification/tabs/styles.js";
@@ -33,10 +36,12 @@ import "../../../icon-exit-d3f9fc80.js";
 import "../../gamification/common-header/styles.js";
 import "../../gamification/leaderboard-item-detail/styles.js";
 import "../../gamification/leaderboard-list/index.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../../gamification/leaderboard-item/index.js";
 import "../../../utils/common.js";
 import "../../gamification/leaderboard-item/styles.js";
-import "../../gamification/leaderboard-list/styles.js";
 import "./Gamification/QuestionsList.js";
 import "../../gamification/question/list/index.js";
 import "../../gamification/question/index.js";
@@ -59,7 +64,7 @@ import "../../gamification/insight-list/index.js";
 import "../../gamification/insight/index.js";
 import "../../gamification/insight/styles.js";
 import "../../gamification/insight-list/styles.js";
-const Fr = ({ sdk: i, feature: r }) => p(() => r ? r.featureConfig.get().type === o.GAMES ? /* @__PURE__ */ t(m, { sdk: i, feature: r, children: /* @__PURE__ */ t(e, { gamification: r, sdk: i }) }) : r.featureConfig.get().type === o.HIGHLIGHTS ? /* @__PURE__ */ t(m, { sdk: i, feature: r, children: /* @__PURE__ */ t(n, { highlights: r, sdk: i }) }) : null : null, [i, r]);
+const xr = ({ sdk: i, feature: r }) => p(() => r ? r.featureConfig.get().type === o.GAMES ? /* @__PURE__ */ t(m, { sdk: i, feature: r, children: /* @__PURE__ */ t(e, { gamification: r, sdk: i }) }) : r.featureConfig.get().type === o.HIGHLIGHTS ? /* @__PURE__ */ t(m, { sdk: i, feature: r, children: /* @__PURE__ */ t(n, { highlights: r, sdk: i }) }) : null : null, [i, r]);
 export {
-  Fr as ActiveFeature
+  xr as ActiveFeature
 };

package/lib/ui/app/masters.js

@@ -21,18 +21,21 @@ import "./Features/Gamification/index.js";
 import "@linaria/react";
 import "../show-in/index.js";
 import "./Features/Gamification/Question.js";
+import "../gamification/detail/header/index.js";
+import "../gamification/constants.js";
+import "../gamification/detail/header/styles.js";
+import "../icons/index.js";
+import "../gamification/detail/sponsor/index.js";
 import "../gamification/vote/index.js";
-import "../../index-7f3361f2.js";
-import "../gamification/vote/vote-option/styles.js";
+import "../gamification/vote/feedback/index.js";
+import "../gamification/vote/feedback/styles.js";
 import "../gamification/vote/styles.js";
+import "../gamification/vote/vote-option/index.js";
+import "../gamification/vote/vote-option/styles.js";
 import "../gamification/vote/win-bar/index.js";
 import "../timer/index.js";
 import "react-countdown-circle-timer";
 import "../gamification/vote/win-bar/styles.js";
-import "../icons/index.js";
-import "../gamification/vote/header/index.js";
-import "../gamification/constants.js";
-import "../gamification/vote/header/styles.js";
 import "./Features/Gamification/Tabs.js";
 import "../gamification/tabs/index.js";
 import "../gamification/tabs/styles.js";
@@ -43,10 +46,12 @@ import "../../icon-exit-d3f9fc80.js";
 import "../gamification/common-header/styles.js";
 import "../gamification/leaderboard-item-detail/styles.js";
 import "../gamification/leaderboard-list/index.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../gamification/leaderboard-item/index.js";
 import "../../utils/common.js";
 import "../gamification/leaderboard-item/styles.js";
-import "../gamification/leaderboard-list/styles.js";
 import "./Features/Gamification/QuestionsList.js";
 import "../gamification/question/list/index.js";
 import "../gamification/question/index.js";
@@ -77,7 +82,7 @@ import "../navigation/button/styles.js";
 const B = ({ sdk: o }) => {
   const [, m] = k(o);
   return /* @__PURE__ */ t(S, { feature: m, sdk: o });
-}, Qr = ({ sdk: o, overlays: m, children: p, event: n }) => {
+}, Zr = ({ sdk: o, overlays: m, children: p, event: n }) => {
   const { sdkEnabled: i, sdkReady: s, activeOverlay: r, activateAndLoadOverlay: d, enableSdk: l, disableSdk: c } = b(
     o,
     n
@@ -111,5 +116,5 @@ const B = ({ sdk: o }) => {
   ] }) });
 };
 export {
-  Qr as MastersApp
+  Zr as MastersApp
 };

package/lib/ui/demo/Gamification.js

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as s, Fragment as z } from "react/jsx-runtime";
 import { FeatureStatus as J } from "@streamlayer/sdk-web-interfaces";
-import { useStore as n } from "@nanostores/react";
+import { useStore as p } from "@nanostores/react";
 import { useState as K } from "react";
 import { ActivePages as a, Tabs as N } from "../gamification/tabs/index.js";
 import { UserSummary as V } from "./components/UserSummary.js";
@@ -13,7 +13,7 @@ import "../gamification/insight-list/styles.js";
 import "../gamification/common-header/styles.js";
 import "../gamification/detailed-insight/styles.js";
 import { Leaderboard as Z } from "./components/Leaderboard.js";
-import { DemoContainer as p, UserStatisticsContainer as _, QuestionsContainer as $ } from "./styles.js";
+import { DemoContainer as m, UserStatisticsContainer as _, QuestionsContainer as $ } from "./styles.js";
 import "../gamification/tabs/styles.js";
 import "@linaria/react";
 import "../gamification/user-statistics/index.js";
@@ -32,9 +32,11 @@ import "../gamification/question/styles.js";
 import "../icons/index.js";
 import "../gamification/question/list/styles.js";
 import "../gamification/vote/index.js";
-import "../../index-7f3361f2.js";
-import "../gamification/vote/vote-option/styles.js";
+import "../gamification/vote/feedback/index.js";
+import "../gamification/vote/feedback/styles.js";
 import "../gamification/vote/styles.js";
+import "../gamification/vote/vote-option/index.js";
+import "../gamification/vote/vote-option/styles.js";
 import "../gamification/vote/win-bar/index.js";
 import "../timer/index.js";
 import "react-countdown-circle-timer";
@@ -52,23 +54,25 @@ import "../gamification/leaderboard-item-detail/index.js";
 import "../gamification/common-header/index.js";
 import "../gamification/leaderboard-item-detail/styles.js";
 import "../gamification/leaderboard-list/index.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../gamification/leaderboard-item/index.js";
 import "../gamification/leaderboard-item/styles.js";
-import "../gamification/leaderboard-list/styles.js";
-const ot = ({
+const nt = ({
   gamification: r,
   sdk: u
 }) => {
   var d, v, c, b, y, g, S, h, C, G, L, Q, A, E, f, w, x, P, F, O, B, D, R;
-  const T = n(r.status), j = n(r.onboardingStatus), l = n(r.openedQuestion), { slStreamId: o } = n(u.sdkStore), e = n(r.featureSettings), [m, q] = K(a.HOME);
+  const T = p(r.status), j = p(r.onboardingStatus), l = p(r.openedQuestion), { slStreamId: o } = p(u.sdkStore), e = p(r.featureSettings), [n, q] = K(a.HOME);
   if (T !== J.Ready)
     return /* @__PURE__ */ t("div", { children: "wait..." });
   if (o != null && o.loading)
-    return /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t("div", { children: "Event is loading" }) });
+    return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { children: "Event is loading" }) });
   if (!(o != null && o.data))
-    return /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
+    return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
   if (!j)
-    return /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(
+    return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(
       Y,
       {
         closeFeature: u.closeFeature,
@@ -92,20 +96,20 @@ const ot = ({
   }, U = (i, k) => {
     r.submitAnswer(i, k);
   };
-  return /* @__PURE__ */ s(p, { children: [
-    /* @__PURE__ */ t(N, { activePage: m, toggleActivePage: (i) => {
+  return /* @__PURE__ */ s(m, { children: [
+    /* @__PURE__ */ t(N, { activePage: n, toggleActivePage: (i) => {
       q(i);
     } }),
-    m === a.HOME && /* @__PURE__ */ s(z, { children: [
+    n === a.HOME && /* @__PURE__ */ s(z, { children: [
       /* @__PURE__ */ t(_, { children: r.userSummary && /* @__PURE__ */ t(V, { store: r.userSummary.getStore() }) }),
       /* @__PURE__ */ s($, { children: [
         r.questions && /* @__PURE__ */ t(W, { openQuestion: H, store: r.questions.getStore() }),
         l && /* @__PURE__ */ t(X, { closeQuestion: M, vote: U, openedQuestion: l })
       ] })
     ] }),
-    m === a.LEADERBOARD && r.leaderboardList && /* @__PURE__ */ t(Z, { store: r.leaderboardList.getStore() })
+    n === a.LEADERBOARD && r.leaderboardList && /* @__PURE__ */ t(Z, { store: r.leaderboardList.getStore() })
   ] });
 };
 export {
-  ot as GamificationComponent
+  nt as GamificationComponent
 };