@streamlayer/react-ui 0.53.0 → 0.54.1

package/lib/index.d.ts

@@ -2,7 +2,6 @@ export * from './ui/notifications/notification/question-inapp';
 export * from './ui/login';
 export * from './ui/gamification/onboarding';
 export * from './ui/gamification/tabs';
-export * from './ui/gamification/leaderboard-item-detail';
 export * from './ui/gamification/question';
 export * from './ui/gamification/question/list';
 export * from './ui/gamification/user-statistics';

package/lib/index.js

@@ -1,16 +1,15 @@
-import { QuestionInApp as jr } from "./ui/notifications/notification/question-inapp/index.js";
-import { Login as qr } from "./ui/login/index.js";
-import { Onboarding as zr } from "./ui/gamification/onboarding/index.js";
-import { ActivePages as Er, Tab as Fr, Tabs as Gr } from "./ui/gamification/tabs/index.js";
-import { LeaderboardItemDetail as Jr } from "./ui/gamification/leaderboard-item-detail/index.js";
-import { Question as Mr } from "./ui/gamification/question/index.js";
-import { QuestionList as Rr } from "./ui/gamification/question/list/index.js";
-import { UserStatistics as Xr } from "./ui/gamification/user-statistics/index.js";
-import { Vote as Zr } from "./ui/gamification/vote/index.js";
-import { Demo as $r } from "./ui/demo/index.js";
-import { Points as oo } from "./ui/gamification/points/index.js";
-import { StreamLayerThemeProvider as mo } from "./ui/theme/index.js";
-import { ThemeVariables as io, resetCss as eo, theme as so, themeStr as fo } from "./ui/theme/theme.js";
+import { QuestionInApp as jo } from "./ui/notifications/notification/question-inapp/index.js";
+import { Login as qo } from "./ui/login/index.js";
+import { Onboarding as zo } from "./ui/gamification/onboarding/index.js";
+import { ActivePages as Eo, Tab as Fo, Tabs as Go } from "./ui/gamification/tabs/index.js";
+import { Question as Jo } from "./ui/gamification/question/index.js";
+import { QuestionList as Mo } from "./ui/gamification/question/list/index.js";
+import { UserStatistics as Ro } from "./ui/gamification/user-statistics/index.js";
+import { Vote as Xo } from "./ui/gamification/vote/index.js";
+import { Demo as Zo } from "./ui/demo/index.js";
+import { Points as $o } from "./ui/gamification/points/index.js";
+import { StreamLayerThemeProvider as rr } from "./ui/theme/index.js";
+import { ThemeVariables as mr, resetCss as pr, theme as ir, themeStr as er } from "./ui/theme/theme.js";
 import "react/jsx-runtime";
 import "react";
 import "./icon-exit-d3f9fc80.js";
@@ -34,9 +33,6 @@ import "./ui/gamification/onboarding/components/onboarding-slides/onboarding-rul
 import "./ui/gamification/onboarding/components/onboarding-slides/onboarding-rules/styles.js";
 import "./ui/gamification/onboarding/styles.js";
 import "./ui/gamification/tabs/styles.js";
-import "./ui/gamification/common-header/index.js";
-import "./ui/gamification/common-header/styles.js";
-import "./ui/gamification/leaderboard-item-detail/styles.js";
 import "@streamlayer/sdk-web-types";
 import "./ui/button/index.js";
 import "./ui/button/styles.js";
@@ -77,42 +73,43 @@ import "./ui/demo/components/UserSummary.js";
 import "./ui/demo/components/QuestionsList.js";
 import "./ui/demo/components/Question.js";
 import "./ui/gamification/insight-list/styles.js";
+import "./ui/gamification/common-header/styles.js";
 import "./ui/gamification/detailed-insight/styles.js";
 import "./ui/demo/components/Leaderboard.js";
-import "./ui/gamification/leaderboard-list/index.js";
+import "./ui/gamification/leaderboard/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-item/index.js";
+import "./ui/gamification/leaderboard/list-item/styles.js";
 import "./ui/demo/styles.js";
 import "./ui/demo/Highlights.js";
 import "./ui/demo/components/Insights.js";
 import "./ui/gamification/insight-list/index.js";
 import "./ui/demo/components/Insight.js";
 import "./ui/gamification/detailed-insight/index.js";
+import "./ui/gamification/common-header/index.js";
 import "./ui/demo/Login.js";
 import "@streamlayer/sdk-web-anonymous-auth";
 import "./ui/gamification/points/styles.js";
 import "./ui/theme/breakpoints.js";
 import "@linaria/core";
 export {
-  Er as ActivePages,
-  $r as Demo,
-  Jr as LeaderboardItemDetail,
-  qr as Login,
-  zr as Onboarding,
-  oo as Points,
-  Mr as Question,
-  jr as QuestionInApp,
-  Rr as QuestionList,
-  mo as StreamLayerThemeProvider,
-  Fr as Tab,
-  Gr as Tabs,
-  io as ThemeVariables,
-  Xr as UserStatistics,
-  Zr as Vote,
-  eo as resetCss,
-  so as theme,
-  fo as themeStr
+  Eo as ActivePages,
+  Zo as Demo,
+  qo as Login,
+  zo as Onboarding,
+  $o as Points,
+  Jo as Question,
+  jo as QuestionInApp,
+  Mo as QuestionList,
+  rr as StreamLayerThemeProvider,
+  Fo as Tab,
+  Go as Tabs,
+  mr as ThemeVariables,
+  Ro as UserStatistics,
+  Xo as Vote,
+  pr as resetCss,
+  ir as theme,
+  er as themeStr
 };

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

@@ -2,4 +2,5 @@
 import type { Gamification } from '@streamlayer/feature-gamification';
 export declare const Leaderboard: React.FC<{
     leaderboardList: Gamification['leaderboardList'];
+    openUser: (userId: string) => void;
 }>;

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

@@ -1,30 +1,19 @@
-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 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 { jsx as m } from "react/jsx-runtime";
+import { useStore as e } from "@nanostores/react";
+import { LeaderboardList as i } from "../../../gamification/leaderboard/index.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
-import "../../../gamification/leaderboard-item/index.js";
+import "../../../gamification/leaderboard/list-item/index.js";
 import "../../../../utils/common.js";
-import "../../../gamification/leaderboard-item/styles.js";
+import "../../../gamification/leaderboard/list-item/styles.js";
+import "@linaria/react";
 import "../../../icons/index.js";
-const w = ({ 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__ */ c(n, { children: [
-    t && /* @__PURE__ */ m(l, { comeBack: () => e(null), ...t }),
-    !t && /* @__PURE__ */ m(I, { fetchMore: o.fetchMore, items: r, openItemDetail: e })
-  ] });
+import "react";
+const b = ({ leaderboardList: o, openUser: r }) => {
+  const { data: t } = e(o.$store);
+  return /* @__PURE__ */ m(i, { fetchMore: o.fetchMore, items: t, openItemDetail: r });
 };
 export {
-  w as Leaderboard
+  b as Leaderboard
 };

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

@@ -1,25 +1,20 @@
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import { useState as s } from "react";
 import { SDKWhiteContainer as n, SDKContentContainer as m } from "../../styles.js";
-import { ActivePages as i, Tabs as a } from "../../../gamification/tabs/index.js";
-import { Leaderboard as d } from "./Leaderboard.js";
+import { ActivePages as e, Tabs as d } from "../../../gamification/tabs/index.js";
+import { Leaderboard as a } from "./Leaderboard.js";
 import { QuestionsList as l } from "./QuestionsList.js";
 import { UserSummary as u } from "./UserSummary.js";
 import "@linaria/react";
 import "../../../gamification/tabs/styles.js";
 import "@nanostores/react";
-import "../../../gamification/leaderboard-item-detail/index.js";
-import "../../../gamification/common-header/index.js";
-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 "../../../gamification/leaderboard/index.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
-import "../../../gamification/leaderboard-item/index.js";
+import "../../../gamification/leaderboard/list-item/index.js";
 import "../../../../utils/common.js";
-import "../../../gamification/leaderboard-item/styles.js";
+import "../../../gamification/leaderboard/list-item/styles.js";
 import "../../../icons/index.js";
 import "../../../gamification/question/list/index.js";
 import "../../../gamification/insight/index.js";
@@ -37,17 +32,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 Z = ({ gamification: r }) => {
-  const [o, p] = s(i.HOME);
-  return /* @__PURE__ */ e("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ e(n, { children: [
-      /* @__PURE__ */ t(a, { activePage: o, toggleActivePage: p }),
-      o === i.HOME && /* @__PURE__ */ t(u, { store: r.userSummary.getStore() })
+const J = ({ gamification: t }) => {
+  const [o, p] = s(e.HOME);
+  return /* @__PURE__ */ i("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ i(n, { children: [
+      /* @__PURE__ */ r(d, { activePage: o, toggleActivePage: p }),
+      o === e.HOME && /* @__PURE__ */ r(u, { store: t.userSummary.getStore() })
     ] }),
-    o === i.HOME && /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(l, { openQuestion: r.openQuestion, store: r.feedList.getStore() }) }),
-    o === i.LEADERBOARD && /* @__PURE__ */ t(m, { style: { flex: "1 1 auto", paddingTop: 0, paddingBottom: 0 }, children: /* @__PURE__ */ t(d, { leaderboardList: r.leaderboardList }) })
+    o === e.HOME && /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(l, { openQuestion: t.openQuestion, store: t.feedList.getStore() }) }),
+    o === e.LEADERBOARD && /* @__PURE__ */ r(m, { style: { flex: "1 1 auto", paddingTop: 0, paddingBottom: 0 }, children: /* @__PURE__ */ r(a, { openUser: t.openUser, leaderboardList: t.leaderboardList }) })
   ] });
 };
 export {
-  Z as Tabs
+  J as Tabs
 };

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

@@ -6,3 +6,4 @@ export declare const GamificationOverlay: React.FC<{
     sdk: StreamLayerSDK;
     className?: string;
 }>;
+export default GamificationOverlay;

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

@@ -1,16 +1,23 @@
-import { jsxs as m, Fragment as p, jsx as o } 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 d } from "../../../show-in/index.js";
-import { Question as a } from "./Question.js";
-import { Tabs as u } from "./Tabs.js";
-import "@streamlayer/sdk-web-types";
-import "../../../gamification/detail/header/index.js";
+import { jsxs as p, Fragment as d, jsx as r } from "react/jsx-runtime";
+import { styled as n } from "@linaria/react";
+import { useStore as e } from "@nanostores/react";
+import { SDKWhiteContainer as l, SDKScrollContainer as a } from "../../styles.js";
+import { VoteHeader as c } from "../../../gamification/detail/header/index.js";
+import { UserStatistics as h } from "../../../gamification/user-statistics/index.js";
+import { ShowIn as u } from "../../../show-in/index.js";
+import { Question as f } from "./Question.js";
+import { Tabs as v } from "./Tabs.js";
 import "../../../gamification/constants.js";
+import "@streamlayer/sdk-web-types";
 import "../../../gamification/detail/header/styles.js";
 import "../../../icons/index.js";
 import "react";
+import "../../../../utils/common.js";
+import "../../../gamification/user-statistics/components/rank/index.js";
+import "../../../gamification/user-statistics/components/rank/styles.js";
+import "../../../gamification/user-statistics/components/statistic/index.js";
+import "../../../gamification/user-statistics/components/statistic/styles.js";
+import "../../../gamification/user-statistics/styles.js";
 import "../../../gamification/vote/index.js";
 import "../../../gamification/vote/feedback/index.js";
 import "../../../gamification/vote/feedback/styles.js";
@@ -29,18 +36,12 @@ import "../../../gamification/vote/insight-details/styles.js";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";
-import "../../../gamification/leaderboard-item-detail/index.js";
-import "../../../gamification/common-header/index.js";
-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 "../../../gamification/leaderboard/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-item/index.js";
+import "../../../gamification/leaderboard/list-item/styles.js";
 import "./QuestionsList.js";
 import "../../../gamification/question/list/index.js";
 import "../../../gamification/insight/index.js";
@@ -51,25 +52,37 @@ import "../../../button/styles.js";
 import "../../../gamification/question/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "./UserSummary.js";
-import "../../../gamification/user-statistics/index.js";
-import "../../../gamification/user-statistics/components/rank/index.js";
-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 l = e(d)`
+const m = n(u)`
   position: absolute;
   inset: 0;
   top: var(--header-height);
   background: var(--color-neutrals-white);
   z-index: 3;
-`, So = ({ gamification: r, className: t }) => {
-  const i = n(r.openedQuestion.$store);
-  return /* @__PURE__ */ m(p, { children: [
-    i && /* @__PURE__ */ o(l, { className: t, children: /* @__PURE__ */ o(a, { gamification: r }) }),
-    /* @__PURE__ */ o(s, { className: t, "data-nav": "true", children: /* @__PURE__ */ o(u, { gamification: r }) })
+`, x = n.div`
+  background: var(--color-transparent-item);
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: column;
+
+  & > div {
+    width: 100%;
+  }
+`, Sr = ({ gamification: t, className: o }) => {
+  const s = e(t.openedQuestion.$store), i = e(t.openedUser);
+  return /* @__PURE__ */ p(d, { children: [
+    s && /* @__PURE__ */ r(m, { className: o, children: /* @__PURE__ */ r(f, { gamification: t }) }),
+    i && /* @__PURE__ */ r(m, { className: o, children: /* @__PURE__ */ p(x, { children: [
+      /* @__PURE__ */ r(c, { label: "Friend's Rank", close: t.closeUser }),
+      /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(h, { ...i }) })
+    ] }) }),
+    /* @__PURE__ */ r(a, { className: o, "data-nav": "true", children: /* @__PURE__ */ r(v, { gamification: t }) })
   ] });
 };
 export {
-  So as GamificationOverlay
+  Sr as GamificationOverlay,
+  Sr as default
 };

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

@@ -1,70 +1,23 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useMemo as m } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { lazy as o, useMemo as l, Suspense as m } from "react";
 import { FeatureType as p } from "@streamlayer/sdk-web-types";
-import { FeatureProvider as e } from "./FeatureProvider.js";
-import { GamificationOverlay as n } from "./Gamification/index.js";
+import { FeatureProvider as c } from "./FeatureProvider.js";
 import "@nanostores/react";
 import "@streamlayer/sdk-web-interfaces";
-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/vote/index.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 "../../gamification/vote/insight-details/index.js";
-import "../../video-player/index.js";
-import "../../video-player/styles.js";
-import "../../gamification/vote/insight-details/styles.js";
-import "./Gamification/Tabs.js";
-import "../../gamification/tabs/index.js";
-import "../../gamification/tabs/styles.js";
-import "./Gamification/Leaderboard.js";
-import "../../gamification/leaderboard-item-detail/index.js";
-import "../../gamification/common-header/index.js";
-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/QuestionsList.js";
-import "../../gamification/question/list/index.js";
-import "../../gamification/insight/index.js";
-import "../../gamification/insight/styles.js";
-import "../../gamification/question/index.js";
-import "../../button/index.js";
-import "../../button/styles.js";
-import "../../gamification/question/styles.js";
-import "../../gamification/question/list/styles.js";
-import "./Gamification/UserSummary.js";
-import "../../gamification/user-statistics/index.js";
-import "../../gamification/user-statistics/components/rank/index.js";
-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 xr = ({
-  sdk: t,
-  feature: r,
-  className: o
-}) => m(() => r && r.featureConfig.get().type === p.GAMES ? /* @__PURE__ */ i(e, { className: o, sdk: t, feature: r, children: /* @__PURE__ */ i(n, { className: o, gamification: r, sdk: t }) }) : null, [t, r, o]);
+const u = o(() => import("./Gamification/index.js")), s = ({
+  sdk: e,
+  feature: t,
+  className: i
+}) => {
+  const n = l(() => t && t.featureConfig.get().type === p.GAMES ? /* @__PURE__ */ r(c, { className: i, sdk: e, feature: t, children: /* @__PURE__ */ r(u, { className: i, gamification: t, sdk: e }) }) : null, [e, t, i]);
+  return /* @__PURE__ */ r(
+    m,
+    {
+      fallback: /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
+      children: n
+    }
+  );
+};
 export {
-  xr as ActiveFeature
+  s as ActiveFeature
 };

package/lib/ui/app/Navigation/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import { Overlays } from '..';
+import { Overlays } from '../../app/masters';
 import { ButtonProps } from '../../navigation/button';
 export declare const SDKNavigation: React.FC<{
     customOverlays: Overlays;

package/lib/ui/app/masters.js

@@ -1,13 +1,13 @@
-import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import { resetCss as e } from "../theme/theme.js";
-import { ActiveFeature as v } from "./Features/index.js";
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
+import { resetCss as m } from "../theme/theme.js";
+import { ActiveFeature as g } from "./Features/index.js";
 import { MastersNavigation as S } from "./Navigation/MastersNavigation/index.js";
-import { SDKContainer as y, SDKScrollContainer as a } from "./styles.js";
+import { SDKContainer as h, SDKScrollContainer as s } from "./styles.js";
 import { useMastersApp as k } from "./useMastersApp.js";
 import { useSdkFeature as b } from "./useSdkFeature.js";
 import { ChannelsButtonId as A } from "../navigation/button/Channels.js";
-import { LeaderBoardButtonId as n } from "../navigation/button/LeaderBoard.js";
-import { FeaturedGroupsButtonId as B } from "../navigation/button/FeaturedGroups.js";
+import { LeaderBoardButtonId as p } from "../navigation/button/LeaderBoard.js";
+import { FeaturedGroupsButtonId as d } from "../navigation/button/FeaturedGroups.js";
 import "@linaria/core";
 import "../theme/constants.js";
 import "react";
@@ -15,98 +15,47 @@ import "@streamlayer/sdk-web-types";
 import "./Features/FeatureProvider.js";
 import "@nanostores/react";
 import "@streamlayer/sdk-web-interfaces";
-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/vote/index.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 "../gamification/vote/insight-details/index.js";
-import "../video-player/index.js";
-import "../video-player/styles.js";
-import "../gamification/vote/insight-details/styles.js";
-import "./Features/Gamification/Tabs.js";
-import "../gamification/tabs/index.js";
-import "../gamification/tabs/styles.js";
-import "./Features/Gamification/Leaderboard.js";
-import "../gamification/leaderboard-item-detail/index.js";
-import "../gamification/common-header/index.js";
-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 "./Features/Gamification/QuestionsList.js";
-import "../gamification/question/list/index.js";
-import "../gamification/insight/index.js";
-import "../gamification/insight/styles.js";
-import "../gamification/question/index.js";
-import "../button/index.js";
-import "../button/styles.js";
-import "../gamification/question/styles.js";
-import "../gamification/question/list/styles.js";
-import "./Features/Gamification/UserSummary.js";
-import "../gamification/user-statistics/index.js";
-import "../gamification/user-statistics/components/rank/index.js";
-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";
 import "../navigation/masters.js";
+import "@linaria/react";
 import "../navigation/index.js";
+import "../icons/index.js";
 import "../navigation/button/index.js";
 import "../navigation/button/styles.js";
-const C = ({ sdk: r, className: m }) => {
-  const [, p] = b(r);
-  return /* @__PURE__ */ i(v, { className: m, feature: p, sdk: r });
-}, Qt = ({ sdk: r, overlays: m, children: p }) => {
-  const { sdkEnabled: o, sdkReady: s, activeOverlay: t, activateAndLoadOverlay: d, enableSdk: l, disableSdk: c } = k(r);
-  return /* @__PURE__ */ f(y, { children: [
-    o && /* @__PURE__ */ i(
+const C = ({ sdk: o, className: i }) => {
+  const [, a] = b(o);
+  return /* @__PURE__ */ e(g, { className: i, feature: a, sdk: o });
+}, U = ({ sdk: o, overlays: i, children: a }) => {
+  const { sdkEnabled: r, sdkReady: l, activeOverlay: t, activateAndLoadOverlay: c, enableSdk: u, disableSdk: f, isLogged: n } = k(o);
+  return /* @__PURE__ */ y(h, { children: [
+    r && /* @__PURE__ */ e(
       S,
       {
-        sdkReady: s,
+        sdkReady: l,
         activeOverlay: t,
-        className: e,
-        setActiveOverlay: (u) => d("", u)
+        className: m,
+        setActiveOverlay: (v) => c("", v)
       }
     ),
-    /* @__PURE__ */ i(
-      a,
+    /* @__PURE__ */ e(
+      s,
       {
-        "data-nav": o.toString(),
-        style: { display: !o || t === A ? "block" : "none" },
-        children: p && p({ enableSdk: l, disableSdk: c })
+        "data-nav": r.toString(),
+        style: { display: !r || t === A ? "block" : "none" },
+        children: a && a({ enableSdk: u, disableSdk: f })
       }
     ),
-    /* @__PURE__ */ i(
-      a,
+    /* @__PURE__ */ e(
+      s,
       {
-        "data-nav": o.toString(),
-        style: { display: t === n ? "block" : "none" },
-        children: m && t === n && m[t]
+        "data-nav": r.toString(),
+        style: { display: t === p ? "block" : "none" },
+        children: i && t === p && i[t]
       }
     ),
-    o && t === B && /* @__PURE__ */ i(C, { className: e, sdk: r })
+    n && r && t === d && /* @__PURE__ */ e(C, { className: m, sdk: o }),
+    !n && r && t === d && /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "You are not logged in." })
   ] });
 };
 export {
-  Qt as MastersApp
+  U as MastersApp
 };

package/lib/ui/app/useMastersApp.d.ts

@@ -18,4 +18,5 @@ export declare const useMastersApp: (sdk: StreamLayerSDK) => {
     activateAndLoadOverlay: (event: string, overlay: AvailableOverlays) => void;
     enableSdk: (event: string) => void;
     disableSdk: () => void;
+    isLogged: boolean;
 };

package/lib/ui/app/useMastersApp.js

@@ -1,8 +1,8 @@
-import { useStore as d } from "@nanostores/react";
-import { useState as u, useCallback as f, useEffect as S } from "react";
-import { FeatureType as b } from "@streamlayer/sdk-web-types";
+import { useStore as u } from "@nanostores/react";
+import { useState as l, useCallback as b, useEffect as A } from "react";
+import { FeatureType as v } from "@streamlayer/sdk-web-types";
 import "react/jsx-runtime";
-import { ChannelsButtonId as l } from "../navigation/button/Channels.js";
+import { ChannelsButtonId as m } from "../navigation/button/Channels.js";
 import { FeaturedGroupsButtonId as o } from "../navigation/button/FeaturedGroups.js";
 import "../navigation/button/LeaderBoard.js";
 import "../navigation/masters.js";
@@ -11,37 +11,38 @@ import "../icons/index.js";
 import "../navigation/button/index.js";
 import "../navigation/button/styles.js";
 import "../navigation/index.js";
-const R = (t) => {
-  const [m, n] = u(!1), a = d(t.status) === "ready", [i, p] = u(o), s = f(
-    (e, r) => {
-      p(r), r === o ? (e && t.createEventSession(e), t.openFeature(b.GAMES)) : t.closeFeature();
+const T = (e) => {
+  const [c, n] = l(!1), d = u(e.status), { data: f } = u(e.getUserStore()), a = d === "ready", [i, p] = l(o), s = b(
+    (t, r) => {
+      p(r), r === o ? (t && e.createEventSession(t), e.openFeature(v.GAMES)) : e.closeFeature();
     },
-    [t]
+    [e]
   );
-  return S(() => {
-    !a && i === o && (p(l), t.closeFeature());
-  }, [a, i, t]), {
-    sdkEnabled: m,
+  return A(() => {
+    !a && i === o && (p(m), e.closeFeature());
+  }, [a, i, e]), {
+    sdkEnabled: c,
     sdkReady: a,
     activeOverlay: i,
     activateAndLoadOverlay: s,
-    enableSdk: (e) => {
-      t.initializeApp().then(({ enabled: r, err: c }) => {
-        if (n(!0), c) {
-          s(e, l);
+    enableSdk: (t) => {
+      e.initializeApp().then(({ enabled: r, err: S }) => {
+        if (n(!0), S) {
+          s(t, m);
           return;
         }
         if (r) {
-          s(e, o);
+          s(t, o);
           return;
         }
       });
     },
     disableSdk: () => {
-      n(!1), t.disableApp();
-    }
+      n(!1), e.disableApp();
+    },
+    isLogged: !!f
   };
 };
 export {
-  R as useMastersApp
+  T as useMastersApp
 };

package/lib/ui/app/useSdkFeature.js

@@ -1,24 +1,24 @@
-import { useStore as i } from "@nanostores/react";
-import { useState as n, useEffect as c } from "react";
-import { FeatureStatus as s } from "@streamlayer/sdk-web-interfaces";
-const m = (a) => {
-  const r = i(a.getActiveFeature()), [o, f] = n(null);
-  return c(() => {
-    const u = a.getFeatures();
-    if (r)
+import { useStore as o } from "@nanostores/react";
+import { useState as c, useEffect as l } from "react";
+import { FeatureStatus as a } from "@streamlayer/sdk-web-interfaces";
+const d = (r) => {
+  const s = o(r.getActiveFeature()), i = o(r.streamStore()), [n, f] = c(null);
+  return l(() => {
+    const u = r.getFeatures();
+    if (s)
       for (const [e, t] of u)
-        e === r ? t.status.get() === s.Suspended && (t.enable(), f(t)) : t.status.get() === s.Ready && t.disable();
+        e === s ? t.status.get() === a.Suspended && (t.enable(), f(t)) : t.status.get() === a.Ready && t.disable();
     else {
       for (const [, e] of u)
-        e.status.get() === s.Ready && e.disable();
+        e.status.get() === a.Ready && e.disable();
       f(null);
     }
     return () => {
       for (const [, e] of u)
-        e.status.get() === s.Ready && e.disable();
+        e.status.get() === a.Ready && e.disable();
     };
-  }, [r, a]), [r, o];
+  }, [s, r, i]), [s, n];
 };
 export {
-  m as useSdkFeature
+  d as useSdkFeature
 };

package/lib/ui/demo/Gamification.js

@@ -52,26 +52,23 @@ import "../gamification/onboarding/components/onboarding-slides/onboarding-invit
 import "../gamification/onboarding/components/onboarding-slides/onboarding-rules/index.js";
 import "../gamification/onboarding/components/onboarding-slides/onboarding-rules/styles.js";
 import "../gamification/onboarding/styles.js";
-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 "../gamification/leaderboard/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";
-const at = ({
+import "../gamification/leaderboard/list-item/index.js";
+import "../gamification/leaderboard/list-item/styles.js";
+const mt = ({
   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 = p(r.status), j = p(r.onboardingStatus), l = p(r.openedQuestion), { slStreamId: e } = p(u.sdkStore), o = p(r.featureSettings), [n, 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 (e != null && e.loading)
+  if (o != null && o.loading)
     return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { children: "Event is loading" }) });
-  if (!(e != null && e.data))
+  if (!(o != null && o.data))
     return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
   if (!j)
     return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(
@@ -79,16 +76,16 @@ const at = ({
       {
         closeFeature: u.closeFeature,
         gamification: r,
-        steps: (v = (d = o.inplayGame) == null ? void 0 : d.onboarding) == null ? void 0 : v.steps,
-        gameIcon: (y = (b = (c = o.inplayGame) == null ? void 0 : c.overview) == null ? void 0 : b.media) == null ? void 0 : y.gameIcon,
-        sponsorLogo: (h = (S = (g = o.inplayGame) == null ? void 0 : g.overview) == null ? void 0 : S.media) == null ? void 0 : h.sponsorLogo,
-        rules: (G = (C = o.inplayGame) == null ? void 0 : C.rules) == null ? void 0 : G.rules,
-        rulesBtnLabel: (Q = (L = o.inplayGame) == null ? void 0 : L.rules) == null ? void 0 : Q.buttonLabel,
-        rulesTitle: (E = (A = o.inplayGame) == null ? void 0 : A.rules) == null ? void 0 : E.heading,
-        primaryColor: (x = (w = (f = o.inplayGame) == null ? void 0 : f.overview) == null ? void 0 : w.appearance) == null ? void 0 : x.primaryColor,
-        inviteCardTitle: (F = (P = o.inplayGame) == null ? void 0 : P.inviteCard) == null ? void 0 : F.heading,
-        inviteCardSubtext: (B = (O = o.inplayGame) == null ? void 0 : O.inviteCard) == null ? void 0 : B.subtext,
-        inviteCardBtnLabel: (R = (D = o.inplayGame) == null ? void 0 : D.inviteCard) == null ? void 0 : R.buttonLabel
+        steps: (v = (d = e.inplayGame) == null ? void 0 : d.onboarding) == null ? void 0 : v.steps,
+        gameIcon: (y = (b = (c = e.inplayGame) == null ? void 0 : c.overview) == null ? void 0 : b.media) == null ? void 0 : y.gameIcon,
+        sponsorLogo: (h = (S = (g = e.inplayGame) == null ? void 0 : g.overview) == null ? void 0 : S.media) == null ? void 0 : h.sponsorLogo,
+        rules: (G = (C = e.inplayGame) == null ? void 0 : C.rules) == null ? void 0 : G.rules,
+        rulesBtnLabel: (Q = (L = e.inplayGame) == null ? void 0 : L.rules) == null ? void 0 : Q.buttonLabel,
+        rulesTitle: (E = (A = e.inplayGame) == null ? void 0 : A.rules) == null ? void 0 : E.heading,
+        primaryColor: (x = (w = (f = e.inplayGame) == null ? void 0 : f.overview) == null ? void 0 : w.appearance) == null ? void 0 : x.primaryColor,
+        inviteCardTitle: (F = (P = e.inplayGame) == null ? void 0 : P.inviteCard) == null ? void 0 : F.heading,
+        inviteCardSubtext: (B = (O = e.inplayGame) == null ? void 0 : O.inviteCard) == null ? void 0 : B.subtext,
+        inviteCardBtnLabel: (R = (D = e.inplayGame) == null ? void 0 : D.inviteCard) == null ? void 0 : R.buttonLabel
       }
     ) });
   const H = (i) => {
@@ -113,5 +110,5 @@ const at = ({
   ] });
 };
 export {
-  at as GamificationComponent
+  mt as GamificationComponent
 };

package/lib/ui/demo/Highlights.js

@@ -17,12 +17,10 @@ import "../gamification/onboarding/components/onboarding-slides/onboarding-rules
 import "../gamification/onboarding/styles.js";
 import { Insights as c } from "./components/Insights.js";
 import { Insight as f } from "./components/Insight.js";
-import "../gamification/common-header/styles.js";
-import "../gamification/leaderboard-item-detail/styles.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
-import "../gamification/leaderboard-item/styles.js";
+import "../gamification/leaderboard/list-item/styles.js";
 import "@linaria/react";
 import "../button/index.js";
 import "../button/styles.js";
@@ -47,8 +45,9 @@ import "../gamification/insight-list/styles.js";
 import "../gamification/detailed-insight/index.js";
 import "../gamification/common-header/index.js";
 import "../../icon-exit-d3f9fc80.js";
+import "../gamification/common-header/styles.js";
 import "../gamification/detailed-insight/styles.js";
-const st = ({ highlights: i, sdk: e }) => {
+const nt = ({ highlights: i, sdk: e }) => {
   const n = m(i.status), r = m(i.openedInsight), { slStreamId: o } = m(e.sdkStore);
   return n !== d.Ready ? /* @__PURE__ */ t("div", { children: "wait..." }) : o != null && o.loading ? /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t("div", { children: "Event is loading" }) }) : o != null && o.data ? i.insights === void 0 ? /* @__PURE__ */ t("div", { children: "wait insights..." }) : /* @__PURE__ */ s(p, { children: [
     !r && /* @__PURE__ */ t(c, { highlights: i, store: i.insights.getStore() }),
@@ -63,5 +62,5 @@ const st = ({ highlights: i, sdk: e }) => {
   ] }) : /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
 };
 export {
-  st as HighlightsComponent
+  nt as HighlightsComponent
 };

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

@@ -1,43 +1,35 @@
-import { jsx as i, jsxs as c, Fragment as l } from "react/jsx-runtime";
+import { jsx as e, Fragment as c } from "react/jsx-runtime";
 import { useStore as u } from "@nanostores/react";
 import { useState as b } from "react";
-import { LeaderboardItemDetail as f } 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 { LeaderboardList as l } from "../../gamification/leaderboard/index.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
-import "../../gamification/leaderboard-item/index.js";
+import "../../gamification/leaderboard/list-item/index.js";
 import "../../../utils/common.js";
-import "../../gamification/leaderboard-item/styles.js";
+import "../../gamification/leaderboard/list-item/styles.js";
+import "@linaria/react";
 import "../../icons/index.js";
-const E = ({ store: p }) => {
-  const { data: r } = u(p), [e, s] = b(void 0);
+const F = ({ store: a }) => {
+  const { data: r } = u(a), [m, s] = b(void 0);
   if (!r)
-    return /* @__PURE__ */ i("div", { children: "wait leader board..." });
-  const o = (t) => {
-    var m;
-    const d = (m = r.find((n) => {
-      var a;
-      return ((a = n.attributes) == null ? void 0 : a.userId) === t;
-    })) == null ? void 0 : m.attributes;
-    s(d);
+    return /* @__PURE__ */ e("div", { children: "wait leader board..." });
+  const d = (t) => {
+    var i;
+    const p = (i = r.find((n) => {
+      var o;
+      return ((o = n.attributes) == null ? void 0 : o.userId) === t;
+    })) == null ? void 0 : i.attributes;
+    s(p);
   };
-  return /* @__PURE__ */ c(l, { children: [
-    e && /* @__PURE__ */ i(f, { comeBack: () => o(null), ...e }),
-    !e && /* @__PURE__ */ i(
-      I,
-      {
-        items: r.filter((t) => t.attributes).map((t) => t.attributes),
-        openItemDetail: o
-      }
-    )
-  ] });
+  return /* @__PURE__ */ e(c, { children: !m && /* @__PURE__ */ e(
+    l,
+    {
+      items: r.filter((t) => t.attributes).map((t) => t.attributes),
+      openItemDetail: d
+    }
+  ) });
 };
 export {
-  E as Leaderboard
+  F as Leaderboard
 };

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

@@ -1,10 +1,10 @@
-import { UserSummary as pr } from "./UserSummary.js";
-import { QuestionsList as er } from "./QuestionsList.js";
-import { Question as fr } from "./Question.js";
-import { Onboarding as nr } from "../../gamification/onboarding/index.js";
-import { Insights as dr } from "./Insights.js";
-import { Insight as ur } from "./Insight.js";
-import { Leaderboard as hr } from "./Leaderboard.js";
+import { UserSummary as tr } from "./UserSummary.js";
+import { QuestionsList as pr } from "./QuestionsList.js";
+import { Question as er } from "./Question.js";
+import { Onboarding as fr } from "../../gamification/onboarding/index.js";
+import { Insights as nr } from "./Insights.js";
+import { Insight as dr } from "./Insight.js";
+import { Leaderboard as ur } from "./Leaderboard.js";
 import "react/jsx-runtime";
 import "@nanostores/react";
 import "../../gamification/user-statistics/index.js";
@@ -53,20 +53,18 @@ import "../../gamification/detailed-insight/index.js";
 import "../../gamification/common-header/index.js";
 import "../../gamification/common-header/styles.js";
 import "../../gamification/detailed-insight/styles.js";
-import "../../gamification/leaderboard-item-detail/index.js";
-import "../../gamification/leaderboard-item-detail/styles.js";
-import "../../gamification/leaderboard-list/index.js";
+import "../../gamification/leaderboard/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-item/index.js";
+import "../../gamification/leaderboard/list-item/styles.js";
 export {
-  ur as Insight,
-  dr as Insights,
-  hr as Leaderboard,
-  nr as Onboarding,
-  fr as Question,
-  er as QuestionsList,
-  pr as UserSummary
+  dr as Insight,
+  nr as Insights,
+  ur as Leaderboard,
+  fr as Onboarding,
+  er as Question,
+  pr as QuestionsList,
+  tr as UserSummary
 };

package/lib/ui/demo/index.js

@@ -70,19 +70,17 @@ import "../gamification/insight-list/styles.js";
 import "../gamification/common-header/styles.js";
 import "../gamification/detailed-insight/styles.js";
 import "./components/Leaderboard.js";
-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 "../gamification/leaderboard/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-item/index.js";
+import "../gamification/leaderboard/list-item/styles.js";
 import "./components/Insights.js";
 import "../gamification/insight-list/index.js";
 import "./components/Insight.js";
 import "../gamification/detailed-insight/index.js";
+import "../gamification/common-header/index.js";
 import "@streamlayer/sdk-web-anonymous-auth";
 import "../login/index.js";
 import "react-auth-code-input";
@@ -170,7 +168,7 @@ const R = ({ activeFeature: o, sdk: r }) => {
     ] }),
     h
   ] });
-}, Sr = ({ sdk: o }) => {
+}, hr = ({ sdk: o }) => {
   const r = f(o.organizationStore()), t = f(o.getUserStore()), a = f(o.getActiveFeature());
   return r.loading ? /* @__PURE__ */ e("div", { children: "authentication..." }) : r.data ? t.loading ? /* @__PURE__ */ e("div", { children: "authentication..." }) : t.data ? /* @__PURE__ */ l(T, { children: [
     /* @__PURE__ */ e(x, { notificationsStore: o.getNotificationsStore() }),
@@ -178,5 +176,5 @@ const R = ({ activeFeature: o, sdk: r }) => {
   ] }) : /* @__PURE__ */ e(H, { sdk: o }) : /* @__PURE__ */ e("div", { children: "wrong sdk key..." });
 };
 export {
-  Sr as Demo
+  hr as Demo
 };

package/lib/ui/gamification/detail/header/index.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { QuestionType } from '@streamlayer/sdk-web-types';
 interface VoteHeaderProps {
-    type: QuestionType;
+    type?: QuestionType;
     close: () => void;
+    label?: string;
 }
 export declare const VoteHeader: React.FC<VoteHeaderProps>;
 export {};

package/lib/ui/gamification/detail/header/index.js

@@ -1,18 +1,18 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { QuestionTypeData as t } from "../../constants.js";
-import { Container as m, QuestionTypeWrap as c, QuestionTypeIcon as l, QuestionTypeTitle as p, CloseButton as s, CloseIcon as a } from "./styles.js";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { QuestionTypeData as c } from "../../constants.js";
+import { Container as t, QuestionTypeWrap as l, QuestionTypeIcon as s, QuestionTypeTitle as p, CloseButton as a, CloseIcon as d } from "./styles.js";
 import "@streamlayer/sdk-web-types";
 import "@linaria/react";
 import "../../../icons/index.js";
 import "react";
-const b = ({ type: n, close: i }) => {
-  const o = t[n];
-  return /* @__PURE__ */ r(m, { children: [
-    /* @__PURE__ */ r(c, { children: [
-      (o == null ? void 0 : o.iconName) && /* @__PURE__ */ e(l, { name: o.iconName }),
+const b = ({ type: r, close: n, label: m }) => {
+  const o = r ? c[r] : { label: m, iconName: void 0 };
+  return /* @__PURE__ */ i(t, { children: [
+    /* @__PURE__ */ i(l, { children: [
+      (o == null ? void 0 : o.iconName) && /* @__PURE__ */ e(s, { name: o.iconName }),
       (o == null ? void 0 : o.label) && /* @__PURE__ */ e(p, { children: o.label })
     ] }),
-    /* @__PURE__ */ e(s, { onClick: i, children: /* @__PURE__ */ e(a, { name: "icon-cross" }) })
+    /* @__PURE__ */ e(a, { onClick: n, children: /* @__PURE__ */ e(d, { name: "icon-cross" }) })
   ] });
 };
 export {

package/lib/ui/gamification/{leaderboard-list → leaderboard}/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { LeaderboardItemProps } from '../../gamification/leaderboard-item';
+import { LeaderboardItemProps } from '../../gamification/leaderboard/list-item';
 type LeaderboardListProps = {
     items: Omit<LeaderboardItemProps, 'openItemDetail'>[];
     openItemDetail: (id: string) => void;

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

@@ -2,9 +2,9 @@ import { jsx as t } from "react/jsx-runtime";
 import l from "react-virtualized-auto-sizer";
 import { FixedSizeList as h } from "react-window";
 import u from "react-window-infinite-loader";
-import { LeaderboardItem as I } from "../leaderboard-item/index.js";
+import { LeaderboardItem as I } from "./list-item/index.js";
 import "../../../utils/common.js";
-import "../leaderboard-item/styles.js";
+import "./list-item/styles.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "react";

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

@@ -1,8 +1,8 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { abbreviate as c, formatDecimals as l } from "../../../utils/common.js";
+import { abbreviate as c, formatDecimals as l } from "../../../../utils/common.js";
 import { Container as s, Position as h, Content as p, Avatar as C, AvatarPlaceholder as b, NameContainer as f, Name as v, CurrentUserBadge as x } from "./styles.js";
 import "@linaria/react";
-import "../../icons/index.js";
+import "../../../icons/index.js";
 import "react";
 const k = ({
   rank: o,

package/lib/ui/gamification/{leaderboard-item → leaderboard/list-item}/styles.js

@@ -1,5 +1,5 @@
 import { styled as r } from "@linaria/react";
-import { SvgIcon as e } from "../../icons/index.js";
+import { SvgIcon as e } from "../../../icons/index.js";
 import "react/jsx-runtime";
 import "react";
 const a = r.div`

package/lib/utils/debug/components/developer.js

@@ -1,16 +1,16 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import { styled as p } from "@linaria/react";
-import { useMemo as f, useState as g } from "react";
-import { DeveloperStorage as u } from "../../storage.js";
-import { BypassLogin as b } from "./bypassLogin.js";
-import { EnvToggle as h } from "./envToggle.js";
-import { EventInput as v } from "./eventInput.js";
-import { SdkKey as y } from "./sdkKey.js";
+import { useMemo as g, useState as u } from "react";
+import { DeveloperStorage as b } from "../../storage.js";
+import { BypassLogin as h } from "./bypassLogin.js";
+import { EnvToggle as v } from "./envToggle.js";
+import { EventInput as y } from "./eventInput.js";
+import { SdkKey as w } from "./sdkKey.js";
 import "@streamlayer/sdk-web-storage";
 import "@nanostores/react";
 import "@streamlayer/sdk-web-core";
 import "./styles.js";
-const w = p.div`
+const D = p.div`
   position: fixed;
   bottom: 0;
   right: 0;
@@ -20,14 +20,14 @@ const w = p.div`
   background: rgba(29, 123, 255, 0.5);
   border-top-left-radius: 10px;
   backdrop-filter: blur(5px);
-`, D = p.div`
+`, j = p.div`
   flex-direction: column;
   gap: 10px;
   margin-right: 60px;
   display: flex;
   margin-left: 10px;
   margin-top: 10px;
-`, j = p.button`
+`, k = p.button`
   position: absolute;
   z-index: 10000;
   bottom: 10px;
@@ -66,22 +66,31 @@ const w = p.div`
     width: 100%;
     height: 4px;
   }
-`, q = ({ sdk: t, sdkKey: d, setSdkKey: i, env: s, setEnv: n, event: m, setEvent: l }) => {
-  const r = f(() => new u(), []), [a, x] = g(!1);
-  return /* @__PURE__ */ e(w, { children: [
-    /* @__PURE__ */ e(j, { "data-opened": a.toString(), onClick: () => x((c) => !c), children: [
+`, A = ({
+  sdk: t,
+  sdkKey: d,
+  setSdkKey: i,
+  env: s,
+  setEnv: n,
+  event: m,
+  setEvent: l,
+  hideAuth: x
+}) => {
+  const r = g(() => new b(), []), [a, c] = u(!1);
+  return /* @__PURE__ */ e(D, { children: [
+    /* @__PURE__ */ e(k, { "data-opened": a.toString(), onClick: () => c((f) => !f), children: [
       /* @__PURE__ */ o("span", {}),
       /* @__PURE__ */ o("span", {}),
       /* @__PURE__ */ o("span", {})
     ] }),
-    a && /* @__PURE__ */ e(D, { children: [
-      n && /* @__PURE__ */ o(h, { env: s, setEnv: n, storage: r }),
-      i && /* @__PURE__ */ o(y, { sdkKey: d, setSdkKey: i, storage: r }),
-      t && /* @__PURE__ */ o(v, { sdk: t, storage: r, event: m, setEvent: l }),
-      t && /* @__PURE__ */ o(b, { sdk: t, storage: r })
+    a && /* @__PURE__ */ e(j, { children: [
+      n && /* @__PURE__ */ o(v, { env: s, setEnv: n, storage: r }),
+      i && /* @__PURE__ */ o(w, { sdkKey: d, setSdkKey: i, storage: r }),
+      t && /* @__PURE__ */ o(y, { sdk: t, storage: r, event: m, setEvent: l }),
+      !x && t && /* @__PURE__ */ o(h, { sdk: t, storage: r })
     ] })
   ] });
 };
 export {
-  q as Developer
+  A as Developer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.53.0",
+  "version": "0.54.1",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -30,16 +30,16 @@
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.20.0",
-    "@streamlayer/sdk-web": "^0.28.13",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.8",
+    "@streamlayer/feature-gamification": "^0.21.1",
+    "@streamlayer/sdk-web": "^0.28.15",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.10",
     "@streamlayer/sdk-web-api": "^0.0.1",
-    "@streamlayer/sdk-web-core": "^0.17.3",
-    "@streamlayer/sdk-web-features": "^0.10.16",
-    "@streamlayer/sdk-web-interfaces": "^0.18.10",
-    "@streamlayer/sdk-web-notifications": "^0.10.9",
-    "@streamlayer/sdk-web-storage": "^0.3.10",
-    "@streamlayer/sdk-web-types": "^0.18.0"
+    "@streamlayer/sdk-web-core": "^0.17.4",
+    "@streamlayer/sdk-web-features": "^0.10.18",
+    "@streamlayer/sdk-web-interfaces": "^0.18.11",
+    "@streamlayer/sdk-web-notifications": "^0.10.10",
+    "@streamlayer/sdk-web-storage": "^0.0.1",
+    "@streamlayer/sdk-web-types": "^0.18.1"
   },
   "nx": {
     "implicitDependencies": [
@@ -78,6 +78,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.26.3"
+    "@streamlayer/react": "^0.27.1"
   }
 }

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

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-type LeaderboardItemDetailProps = {
-    comeBack: () => void;
-};
-export declare const LeaderboardItemDetail: React.FC<LeaderboardItemDetailProps>;
-export {};

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

@@ -1,10 +0,0 @@
-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";
-const f = ({ comeBack: o }) => /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(m, { comeBack: o }) });
-export {
-  f as LeaderboardItemDetail
-};

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

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

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

@@ -1,7 +0,0 @@
-import { styled as o } from "@linaria/react";
-const i = o.div`
-  box-sizing: border-box;
-`;
-export {
-  i as Container
-};