@streamlayer/react-ui 0.50.0 → 0.52.0

package/lib/index.js

@@ -1,16 +1,16 @@
-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 { QuestionInApp as Ur } from "./ui/notifications/notification/question-inapp/index.js";
+import { Login as kr } from "./ui/login/index.js";
+import { Onboarding as wr } from "./ui/gamification/onboarding/index.js";
+import { ActivePages as Br, Tab as Er, Tabs as Fr } from "./ui/gamification/tabs/index.js";
+import { LeaderboardItemDetail as Hr } from "./ui/gamification/leaderboard-item-detail/index.js";
+import { Question as Kr } from "./ui/gamification/question/index.js";
+import { QuestionList as Nr } from "./ui/gamification/question/list/index.js";
+import { UserStatistics as Wr } from "./ui/gamification/user-statistics/index.js";
+import { Vote as Yr } from "./ui/gamification/vote/index.js";
+import { Demo as _r } from "./ui/demo/index.js";
+import { Points as ro } from "./ui/gamification/points/index.js";
+import { StreamLayerThemeProvider as to } from "./ui/theme/index.js";
+import { ThemeVariables as po, resetCss as io, theme as eo, themeStr as so } from "./ui/theme/theme.js";
 import "react/jsx-runtime";
 import "react";
 import "./icon-exit-d3f9fc80.js";
@@ -96,21 +96,22 @@ import "./ui/gamification/points/styles.js";
 import "./ui/theme/breakpoints.js";
 import "@linaria/core";
 export {
-  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
+  Br as ActivePages,
+  _r as Demo,
+  Hr as LeaderboardItemDetail,
+  kr as Login,
+  wr as Onboarding,
+  ro as Points,
+  Kr as Question,
+  Ur as QuestionInApp,
+  Nr as QuestionList,
+  to as StreamLayerThemeProvider,
+  Er as Tab,
+  Fr as Tabs,
+  po as ThemeVariables,
+  Wr as UserStatistics,
+  Yr as Vote,
+  io as resetCss,
+  eo as theme,
+  so as themeStr
 };

package/lib/ui/app/Features/FeatureProvider.d.ts

@@ -6,4 +6,5 @@ export declare const FeatureProvider: React.FC<{
     feature: Features;
     children: React.ReactNode;
     sdk: StreamLayerSDK;
+    className?: string;
 }>;

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

@@ -1,13 +1,9 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useStore as e } from "@nanostores/react";
-import { FeatureStatus as u } from "@streamlayer/sdk-web-interfaces";
-const c = ({
-  feature: i,
-  sdk: o,
-  children: n
-}) => {
-  const d = e(i.status), { slStreamId: r } = e(o.sdkStore);
-  return r != null && r.loading ? /* @__PURE__ */ t("div", { children: "event is loading..." }) : r != null && r.data ? d !== u.Ready ? /* @__PURE__ */ t("div", { children: "wait feature..." }) : n : /* @__PURE__ */ t("div", { children: "event is forbidden..." });
+import { jsx as e } from "react/jsx-runtime";
+import { useStore as i } from "@nanostores/react";
+import { FeatureStatus as f } from "@streamlayer/sdk-web-interfaces";
+const c = ({ feature: o, sdk: n, children: d, className: t }) => {
+  const u = i(o.status), { slStreamId: r } = i(n.sdkStore);
+  return r != null && r.loading ? /* @__PURE__ */ e("div", { className: t, children: "event is loading..." }) : r != null && r.data ? u !== f.Ready ? /* @__PURE__ */ e("div", { className: t, children: "wait feature..." }) : d : /* @__PURE__ */ e("div", { className: t, children: "event is forbidden..." });
 };
 export {
   c as FeatureProvider

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

@@ -14,7 +14,8 @@ import "react-window-infinite-loader";
 import "../../../gamification/leaderboard-item/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/leaderboard-item/styles.js";
-const q = ({ leaderboardList: o }) => {
+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);
@@ -25,5 +26,5 @@ const q = ({ leaderboardList: o }) => {
   ] });
 };
 export {
-  q as Leaderboard
+  w as Leaderboard
 };

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

@@ -20,6 +20,7 @@ import "react-window-infinite-loader";
 import "../../../gamification/leaderboard-item/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/leaderboard-item/styles.js";
+import "../../../icons/index.js";
 import "../../../gamification/question/list/index.js";
 import "../../../gamification/question/index.js";
 import "@streamlayer/sdk-web-types";
@@ -27,7 +28,6 @@ import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/constants.js";
 import "../../../gamification/question/styles.js";
-import "../../../icons/index.js";
 import "../../../gamification/question/list/styles.js";
 import "../../../gamification/user-statistics/index.js";
 import "../../../gamification/user-statistics/components/rank/index.js";

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

@@ -4,4 +4,5 @@ import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 export declare const GamificationOverlay: React.FC<{
     gamification: GamificationClass;
     sdk: StreamLayerSDK;
+    className?: string;
 }>;

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

@@ -1,10 +1,10 @@
-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 l } from "../../../show-in/index.js";
-import { Question as a } from "./Question.js";
-import { Tabs as d } from "./Tabs.js";
+import { jsxs as p, Fragment as e, jsx as r } from "react/jsx-runtime";
+import { styled as n } from "@linaria/react";
+import { useStore as s } from "@nanostores/react";
+import { SDKScrollContainer as l } from "../../styles.js";
+import { ShowIn as d } from "../../../show-in/index.js";
+import { Question as u } from "./Question.js";
+import { Tabs as a } from "./Tabs.js";
 import "@streamlayer/sdk-web-types";
 import "../../../gamification/detail/header/index.js";
 import "../../../gamification/constants.js";
@@ -52,28 +52,26 @@ 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(l)`
+const c = n(d)`
   position: absolute;
   inset: 0;
   top: var(--header-height);
   background: var(--color-neutrals-white);
   z-index: 3;
-`, ho = ({
-  gamification: o
-}) => {
-  const { loading: i, data: t } = n(o.openedQuestion);
-  return /* @__PURE__ */ m(p, { children: [
-    (i || t) && /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(
-      a,
+`, fo = ({ gamification: o, className: t }) => {
+  const { loading: m, data: i } = s(o.openedQuestion);
+  return /* @__PURE__ */ p(e, { children: [
+    (m || i) && /* @__PURE__ */ r(c, { className: t, children: /* @__PURE__ */ r(
+      u,
       {
         closeQuestion: o.closeQuestion,
         vote: o.submitAnswer,
-        openedQuestion: t
+        openedQuestion: i
       }
     ) }),
-    /* @__PURE__ */ r(s, { "data-nav": "true", style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ r(d, { gamification: o }) })
+    /* @__PURE__ */ r(l, { className: t, "data-nav": "true", style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ r(a, { gamification: o }) })
   ] });
 };
 export {
-  ho as GamificationOverlay
+  fo as GamificationOverlay
 };

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

@@ -4,4 +4,5 @@ import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 export declare const HighlightsOverlay: React.FC<{
     highlights: Highlights;
     sdk: StreamLayerSDK;
+    className?: string;
 }>;

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

@@ -1,7 +1,7 @@
-import { jsxs as i, Fragment as e, jsx as r } from "react/jsx-runtime";
-import { useStore as m } from "@nanostores/react";
-import { Insight as p } from "../../../demo/components/Insight.js";
-import { Insights as s } from "../../../demo/components/Insights.js";
+import { jsxs as e, Fragment as m, jsx as i } from "react/jsx-runtime";
+import { useStore as p } from "@nanostores/react";
+import { Insight as s } from "../../../demo/components/Insight.js";
+import { Insights as n } from "../../../demo/components/Insights.js";
 import "../../../gamification/detailed-insight/index.js";
 import "../../../gamification/common-header/index.js";
 import "../../../../icon-exit-d3f9fc80.js";
@@ -13,13 +13,17 @@ import "../../../gamification/insight/index.js";
 import "@streamlayer/sdk-web-types";
 import "../../../gamification/insight/styles.js";
 import "../../../gamification/insight-list/styles.js";
-const y = ({ highlights: o }) => {
-  const t = m(o.openedInsight);
-  return /* @__PURE__ */ i(e, { children: [
-    !t && o.insights && /* @__PURE__ */ r(s, { highlights: o, store: o.insights.getStore() }),
-    t && /* @__PURE__ */ r(
-      p,
+const O = ({
+  highlights: o,
+  className: r
+}) => {
+  const t = p(o.openedInsight);
+  return /* @__PURE__ */ e(m, { children: [
+    !t && o.insights && /* @__PURE__ */ i(n, { className: r, highlights: o, store: o.insights.getStore() }),
+    t && /* @__PURE__ */ i(
+      s,
       {
+        className: r,
         openedInsight: t,
         closeHighlights: o.closeFeature,
         closeInsight: o.closeHighlight
@@ -28,5 +32,5 @@ const y = ({ highlights: o }) => {
   ] });
 };
 export {
-  y as HighlightsOverlay
+  O as HighlightsOverlay
 };

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

@@ -5,4 +5,5 @@ import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 export declare const ActiveFeature: React.FC<{
     sdk: StreamLayerSDK;
     feature: Features | null;
+    className?: string;
 }>;

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

@@ -1,9 +1,9 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useMemo as p } from "react";
-import { FeatureType as o } from "@streamlayer/sdk-web-types";
-import { FeatureProvider as m } from "./FeatureProvider.js";
-import { GamificationOverlay as e } from "./Gamification/index.js";
-import { HighlightsOverlay as n } from "./Highlights/index.js";
+import { jsx as o } from "react/jsx-runtime";
+import { useMemo as e } from "react";
+import { FeatureType as m } from "@streamlayer/sdk-web-types";
+import { FeatureProvider as p } from "./FeatureProvider.js";
+import { GamificationOverlay as n } from "./Gamification/index.js";
+import { HighlightsOverlay as g } from "./Highlights/index.js";
 import "@nanostores/react";
 import "@streamlayer/sdk-web-interfaces";
 import "@linaria/react";
@@ -64,7 +64,11 @@ import "../../gamification/insight-list/index.js";
 import "../../gamification/insight/index.js";
 import "../../gamification/insight/styles.js";
 import "../../gamification/insight-list/styles.js";
-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]);
+const Ir = ({
+  sdk: i,
+  feature: r,
+  className: t
+}) => e(() => r ? r.featureConfig.get().type === m.GAMES ? /* @__PURE__ */ o(p, { className: t, sdk: i, feature: r, children: /* @__PURE__ */ o(n, { className: t, gamification: r, sdk: i }) }) : r.featureConfig.get().type === m.HIGHLIGHTS ? /* @__PURE__ */ o(p, { className: t, sdk: i, feature: r, children: /* @__PURE__ */ o(g, { className: t, highlights: r, sdk: i }) }) : null : null, [i, r]);
 export {
-  xr as ActiveFeature
+  Ir as ActiveFeature
 };

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

@@ -8,4 +8,5 @@ export declare const MastersNavigation: React.FC<{
     activeOverlay: AvailableOverlays;
     setActiveOverlay: (overlay: AvailableOverlays) => void;
     sdkReady: boolean;
+    className?: string;
 }>;

package/lib/ui/app/Navigation/MastersNavigation/index.js

@@ -1,18 +1,18 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { ChannelsButton as a, ChannelsButtonId as i } from "../../../navigation/button/Channels.js";
-import { FeaturedGroupsButton as u, FeaturedGroupsButtonId as n } from "../../../navigation/button/FeaturedGroups.js";
-import { LeaderBoardButton as s, LeaderBoardButtonId as m } from "../../../navigation/button/LeaderBoard.js";
-import { Navigation as e } from "../../../navigation/masters.js";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { ChannelsButton as u, ChannelsButtonId as i } from "../../../navigation/button/Channels.js";
+import { FeaturedGroupsButton as s, FeaturedGroupsButtonId as n } from "../../../navigation/button/FeaturedGroups.js";
+import { LeaderBoardButton as e, LeaderBoardButtonId as m } from "../../../navigation/button/LeaderBoard.js";
+import { Navigation as B } from "../../../navigation/masters.js";
 import "@linaria/react";
 import "../../../icons/index.js";
 import "react";
 import "../../../navigation/button/index.js";
 import "../../../navigation/button/styles.js";
 import "../../../navigation/index.js";
-const F = ({ activeOverlay: o, setActiveOverlay: t, sdkReady: p }) => /* @__PURE__ */ d(e, { children: [
-  /* @__PURE__ */ r(a, { active: o === i, onClick: () => t(i) }),
+const G = ({ activeOverlay: o, setActiveOverlay: t, sdkReady: p, className: d }) => /* @__PURE__ */ a(B, { className: d, children: [
+  /* @__PURE__ */ r(u, { active: o === i, onClick: () => t(i) }),
   /* @__PURE__ */ r(
-    u,
+    s,
     {
       active: o === n,
       disabled: !p,
@@ -22,7 +22,7 @@ const F = ({ activeOverlay: o, setActiveOverlay: t, sdkReady: p }) => /* @__PURE
     }
   ),
   /* @__PURE__ */ r(
-    s,
+    e,
     {
       active: o === m,
       onClick: () => t(m)
@@ -33,5 +33,5 @@ export {
   i as ChannelsButtonId,
   n as FeaturedGroupsButtonId,
   m as LeaderBoardButtonId,
-  F as MastersNavigation
+  G as MastersNavigation
 };

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

@@ -2,12 +2,11 @@
 import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 export type Overlays = {};
 export type MastersAppChildrenProps = {
-    enableSdk: () => void;
+    enableSdk: (event: string) => void;
     disableSdk: () => void;
 };
 export type MastersAppProps = {
     sdk: StreamLayerSDK;
-    event: string;
     overlays?: Overlays;
     children: (methods: MastersAppChildrenProps) => React.ReactNode;
 };

package/lib/ui/app/masters.js

@@ -1,14 +1,13 @@
-import { jsx as r, jsxs as u } from "react/jsx-runtime";
-import { StreamLayerThemeProvider as f } from "../theme/index.js";
+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 { MastersNavigation as S } from "./Navigation/MastersNavigation/index.js";
-import { SDKContainer as y, SDKScrollContainer as e } from "./styles.js";
-import { useMastersApp as h } from "./useMastersApp.js";
-import { useSdkFeature as k } from "./useSdkFeature.js";
-import { ChannelsButtonId as b } from "../navigation/button/Channels.js";
-import { LeaderBoardButtonId as a } from "../navigation/button/LeaderBoard.js";
-import { FeaturedGroupsButtonId as A } from "../navigation/button/FeaturedGroups.js";
-import "../theme/theme.js";
+import { SDKContainer as y, SDKScrollContainer as a } 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 "@linaria/core";
 import "../theme/constants.js";
 import "react";
@@ -78,42 +77,40 @@ import "../navigation/masters.js";
 import "../navigation/index.js";
 import "../navigation/button/index.js";
 import "../navigation/button/styles.js";
-const g = ({ sdk: o }) => {
-  const [, m] = k(o);
-  return /* @__PURE__ */ r(v, { feature: m, sdk: o });
-}, Xt = ({ sdk: o, overlays: m, children: p, event: n }) => {
-  const { sdkEnabled: i, sdkReady: d, activeOverlay: t, activateAndLoadOverlay: s, enableSdk: l, disableSdk: c } = h(
-    o,
-    n
-  );
-  return /* @__PURE__ */ r(f, { style: { height: "100%" }, children: /* @__PURE__ */ u(y, { children: [
-    i && /* @__PURE__ */ r(
+const C = ({ sdk: r, className: m }) => {
+  const [, p] = b(r);
+  return /* @__PURE__ */ i(v, { className: m, feature: p, sdk: r });
+}, Wt = ({ 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(
       S,
       {
-        sdkReady: d,
+        sdkReady: s,
         activeOverlay: t,
-        setActiveOverlay: s
+        className: e,
+        setActiveOverlay: (u) => d("", u)
       }
     ),
-    /* @__PURE__ */ r(
-      e,
+    /* @__PURE__ */ i(
+      a,
       {
-        "data-nav": i.toString(),
-        style: { display: !i || t === b ? "block" : "none" },
+        "data-nav": o.toString(),
+        style: { display: !o || t === A ? "block" : "none" },
         children: p && p({ enableSdk: l, disableSdk: c })
       }
     ),
-    /* @__PURE__ */ r(
-      e,
+    /* @__PURE__ */ i(
+      a,
       {
-        "data-nav": i.toString(),
-        style: { display: t === a ? "block" : "none" },
-        children: m && t === a && m[t]
+        "data-nav": o.toString(),
+        style: { display: t === n ? "block" : "none" },
+        children: m && t === n && m[t]
       }
     ),
-    i && t === A && /* @__PURE__ */ r(g, { sdk: o })
-  ] }) });
+    o && t === B && /* @__PURE__ */ i(C, { className: e, sdk: r })
+  ] });
 };
 export {
-  Xt as MastersApp
+  Wt as MastersApp
 };

package/lib/ui/app/styles.js

@@ -4,6 +4,7 @@ const i = n.div`
   background: transparent;
   font-family: var(--font-regular);
   position: relative;
+  min-width: 324px;
 `, r = n.div`
   overflow-y: auto;
   height: 100%;

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

@@ -6,16 +6,16 @@ import { AvailableOverlays } from './Navigation/MastersNavigation';
  * - On activate Channels or Leaderboard button, the SDK is disabled and the FG+ overlay is closed.
  * - On sdk status change, if sdk disabled (f.e some errors occurred), the SDK is disabled and the FG+ overlay is closed.
  * @param sdk - The StreamLayerSDK instance to use.
- * @param event - The name of the event to create a session for.
  * @returns An object containing various functions and state values for managing the SDK and app overlays.
  * @returns disableSdk - A function that disables the SDK and closes the FG+ overlay.
  * @returns enableSdk - A function that initializes the SDK and opens the FG+ overlay.
+ * With event (The id of the event to create a session for.) as a parameter.
  */
-export declare const useMastersApp: (sdk: StreamLayerSDK, event: string) => {
+export declare const useMastersApp: (sdk: StreamLayerSDK) => {
     sdkEnabled: boolean;
     sdkReady: boolean;
     activeOverlay: any;
-    activateAndLoadOverlay: (overlay: AvailableOverlays) => void;
-    enableSdk: () => void;
+    activateAndLoadOverlay: (event: string, overlay: AvailableOverlays) => void;
+    enableSdk: (event: string) => void;
     disableSdk: () => void;
 };

package/lib/ui/app/useMastersApp.js

@@ -3,7 +3,7 @@ import { useState as u, useCallback as f, useEffect as S } from "react";
 import { FeatureType as b } from "@streamlayer/sdk-web-types";
 import "react/jsx-runtime";
 import { ChannelsButtonId as l } from "../navigation/button/Channels.js";
-import { FeaturedGroupsButtonId as r } from "../navigation/button/FeaturedGroups.js";
+import { FeaturedGroupsButtonId as o } from "../navigation/button/FeaturedGroups.js";
 import "../navigation/button/LeaderBoard.js";
 import "../navigation/masters.js";
 import "@linaria/react";
@@ -11,34 +11,34 @@ import "../icons/index.js";
 import "../navigation/button/index.js";
 import "../navigation/button/styles.js";
 import "../navigation/index.js";
-const R = (e, s) => {
-  const [m, n] = u(!1), o = d(e.status) === "ready", [a, p] = u(r), i = f(
-    (t) => {
-      p(t), t === r ? (e.createEventSession(s), e.openFeature(b.GAMES)) : e.closeFeature();
+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();
     },
-    [s, e]
+    [t]
   );
   return S(() => {
-    !o && a === r && (p(l), e.closeFeature());
-  }, [o, a, e]), {
+    !a && i === o && (p(l), t.closeFeature());
+  }, [a, i, t]), {
     sdkEnabled: m,
-    sdkReady: o,
-    activeOverlay: a,
-    activateAndLoadOverlay: i,
-    enableSdk: () => {
-      e.initializeApp().then(({ enabled: t, err: c }) => {
+    sdkReady: a,
+    activeOverlay: i,
+    activateAndLoadOverlay: s,
+    enableSdk: (e) => {
+      t.initializeApp().then(({ enabled: r, err: c }) => {
         if (n(!0), c) {
-          i(l);
+          s(e, l);
           return;
         }
-        if (t) {
-          i(r);
+        if (r) {
+          s(e, o);
           return;
         }
       });
     },
     disableSdk: () => {
-      n(!1), e.disableApp();
+      n(!1), t.disableApp();
     }
   };
 };

package/lib/ui/demo/DemoPoints.js

@@ -3,12 +3,14 @@ import { FeatureType as s } from "@streamlayer/sdk-web-types";
 import { useStore as p } from "@nanostores/react";
 import { styled as u } from "@linaria/react";
 import { Points as a } from "../gamification/points/index.js";
+import "../theme/theme.js";
+import "@linaria/core";
+import "../theme/constants.js";
 import "../../utils/common.js";
 import "../gamification/points/styles.js";
 import "../icons/index.js";
 import "react";
 import "../theme/breakpoints.js";
-import "../theme/constants.js";
 const d = u.div`
   position: fixed;
   top: 0;
@@ -17,10 +19,10 @@ const d = u.div`
   var m, i, e, n;
   const t = p(o);
   return ((i = (m = t.data) == null ? void 0 : m.summary) == null ? void 0 : i.points) === void 0 ? null : /* @__PURE__ */ r(d, { children: ((n = (e = t.data) == null ? void 0 : e.summary) == null ? void 0 : n.points) && /* @__PURE__ */ r(a, { points: t.data.summary.points }) });
-}, F = ({ sdk: o }) => {
+}, A = ({ sdk: o }) => {
   const t = o.getFeature(s.GAMES);
   return t != null && t.userSummary ? /* @__PURE__ */ r(f, { store: t.userSummary.getStore() }) : null;
 };
 export {
-  F as DemoPoints
+  A as DemoPoints
 };

package/lib/ui/demo/components/Insight.d.ts

@@ -4,4 +4,5 @@ export declare const Insight: React.FC<{
     openedInsight: Exclude<Highlights['openedInsight']['value'], undefined>;
     closeHighlights: () => void;
     closeInsight: () => void;
+    className?: string;
 }>;

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

@@ -1,24 +1,25 @@
-import { jsx as p } from "react/jsx-runtime";
-import { DetailedInsight as L } from "../../gamification/detailed-insight/index.js";
+import { jsx as L } from "react/jsx-runtime";
+import { DetailedInsight as c } from "../../gamification/detailed-insight/index.js";
 import "../../gamification/common-header/index.js";
 import "../../../icon-exit-d3f9fc80.js";
 import "../../gamification/common-header/styles.js";
 import "@linaria/react";
 import "../../gamification/detailed-insight/styles.js";
-const j = ({ openedInsight: o, closeHighlights: r, closeInsight: s }) => {
+const x = ({ openedInsight: o, closeHighlights: r, closeInsight: s, className: l }) => {
   var t, a, b, n, e;
   const i = ((t = o.options) == null ? void 0 : t.options.case) === "factoid" ? {
     image: o.options.options.value.image,
     body: o.options.options.value.body,
     webLink: (a = o.options.options.value.webLink) == null ? void 0 : a.url,
     webLinkLabel: (b = o.options.options.value.webLink) == null ? void 0 : b.label
-  } : {}, l = o.subject || ((n = o.notification) == null ? void 0 : n.title), m = i.body || ((e = o.notification) == null ? void 0 : e.body);
-  return /* @__PURE__ */ p(
-    L,
+  } : {}, m = o.subject || ((n = o.notification) == null ? void 0 : n.title), p = i.body || ((e = o.notification) == null ? void 0 : e.body);
+  return /* @__PURE__ */ L(
+    c,
     {
+      className: l,
       image: i.image,
-      title: l,
-      description: m,
+      title: m,
+      description: p,
       webLink: i.webLink,
       webLinkLabel: i.webLinkLabel,
       closeInsight: s,
@@ -27,5 +28,5 @@ const j = ({ openedInsight: o, closeHighlights: r, closeInsight: s }) => {
   );
 };
 export {
-  j as Insight
+  x as Insight
 };

package/lib/ui/demo/components/Insights.d.ts

@@ -3,4 +3,5 @@ import type { Highlights } from '@streamlayer/feature-gamification';
 export declare const Insights: React.FC<{
     highlights: Highlights;
     store: ReturnType<Exclude<Highlights['insights'], undefined>['getStore']>;
+    className?: string;
 }>;

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

@@ -1,15 +1,15 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useStore as s } from "@nanostores/react";
-import { InsightList as n } from "../../gamification/insight-list/index.js";
+import { jsx as r } from "react/jsx-runtime";
+import { useStore as p } from "@nanostores/react";
+import { InsightList as s } from "../../gamification/insight-list/index.js";
 import "../../gamification/insight/index.js";
 import "@streamlayer/sdk-web-types";
 import "../../gamification/insight/styles.js";
 import "@linaria/react";
 import "../../gamification/insight-list/styles.js";
-const d = ({ highlights: r, store: o }) => {
-  const { data: t } = s(o);
-  return t ? /* @__PURE__ */ i(n, { insights: t, openInsight: r.openHighlight }) : /* @__PURE__ */ i("div", { children: "wait insights..." });
+const c = ({ highlights: o, store: n, className: t }) => {
+  const { data: i } = p(n);
+  return i ? /* @__PURE__ */ r(s, { className: t, insights: i, openInsight: o.openHighlight }) : /* @__PURE__ */ r("div", { className: t, children: "wait insights..." });
 };
 export {
-  d as Insights
+  c as Insights
 };

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

@@ -14,7 +14,8 @@ import "react-window-infinite-loader";
 import "../../gamification/leaderboard-item/index.js";
 import "../../../utils/common.js";
 import "../../gamification/leaderboard-item/styles.js";
-const C = ({ store: p }) => {
+import "../../icons/index.js";
+const E = ({ store: p }) => {
   const { data: r } = u(p), [e, s] = b(void 0);
   if (!r)
     return /* @__PURE__ */ i("div", { children: "wait leader board..." });
@@ -38,5 +39,5 @@ const C = ({ store: p }) => {
   ] });
 };
 export {
-  C as Leaderboard
+  E as Leaderboard
 };

package/lib/ui/gamification/detailed-insight/index.d.ts

@@ -7,6 +7,7 @@ type DetailedInsightProps = {
     webLink?: string;
     closeHighlights: () => void;
     closeInsight: () => void;
+    className?: string;
 };
 export declare const DetailedInsight: React.FC<DetailedInsightProps>;
 export {};

package/lib/ui/gamification/detailed-insight/index.js

@@ -1,29 +1,30 @@
 import { jsxs as I, jsx as M } from "react/jsx-runtime";
-import { CommonHeader as Z } from "../common-header/index.js";
-import { Container as g, Image as l, AdditionalContent as o, Title as n, Description as d, AdditionalBtn as r, LinkIcon as a } from "./styles.js";
+import { CommonHeader as g } from "../common-header/index.js";
+import { Container as l, Image as o, AdditionalContent as n, Title as d, Description as r, AdditionalBtn as a, LinkIcon as u } from "./styles.js";
 import "../../../icon-exit-d3f9fc80.js";
 import "../common-header/styles.js";
 import "@linaria/react";
-const u = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjbGFzcz0ic2MtQU5kc04ga1RWV0pFIj48cGF0aCBkPSJNNi42NjY1IDMuMTY2NjlINC45OTk4NEM0LjI2MzQ2IDMuMTY2NjkgMy42NjY1IDMuNzYzNjQgMy42NjY1IDQuNTAwMDJWMTEuNUMzLjY2NjUgMTIuMjM2NCA0LjI2MzQ2IDEyLjgzMzQgNC45OTk4NCAxMi44MzM0SDExLjk5OThDMTIuNzM2MiAxMi44MzM0IDEzLjMzMzIgMTIuMjM2NCAxMy4zMzMyIDExLjVWOS44MzMzNSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+PHBhdGggZD0iTTEzLjMzMzUgNi4xNjY2OVYzLjE2NjY5SDEwLjMzMzUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjxwYXRoIGQ9Ik0xMy4xNjY4IDMuMzMzMzFMOC4zMzM1IDguMTY2NjUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjwvc3ZnPgo=", C = ({
+const b = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjbGFzcz0ic2MtQU5kc04ga1RWV0pFIj48cGF0aCBkPSJNNi42NjY1IDMuMTY2NjlINC45OTk4NEM0LjI2MzQ2IDMuMTY2NjkgMy42NjY1IDMuNzYzNjQgMy42NjY1IDQuNTAwMDJWMTEuNUMzLjY2NjUgMTIuMjM2NCA0LjI2MzQ2IDEyLjgzMzQgNC45OTk4NCAxMi44MzM0SDExLjk5OThDMTIuNzM2MiAxMi44MzM0IDEzLjMzMzIgMTIuMjM2NCAxMy4zMzMyIDExLjVWOS44MzMzNSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+PHBhdGggZD0iTTEzLjMzMzUgNi4xNjY2OVYzLjE2NjY5SDEwLjMzMzUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjxwYXRoIGQ9Ik0xMy4xNjY4IDMuMzMzMzFMOC4zMzM1IDguMTY2NjUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PC9wYXRoPjwvc3ZnPgo=", L = ({
   image: i,
   title: j,
   description: m,
   webLinkLabel: z,
   webLink: c,
   closeHighlights: t,
-  closeInsight: N
-}) => /* @__PURE__ */ I(g, { children: [
-  /* @__PURE__ */ M(Z, { close: t, comeBack: N }),
-  i && /* @__PURE__ */ M(l, { alt: "detail-insight-image", src: i }),
-  /* @__PURE__ */ I(o, { children: [
-    j && /* @__PURE__ */ M(n, { children: j }),
-    m && /* @__PURE__ */ M(d, { children: m })
+  closeInsight: N,
+  className: Z
+}) => /* @__PURE__ */ I(l, { className: Z, children: [
+  /* @__PURE__ */ M(g, { close: t, comeBack: N }),
+  i && /* @__PURE__ */ M(o, { alt: "detail-insight-image", src: i }),
+  /* @__PURE__ */ I(n, { children: [
+    j && /* @__PURE__ */ M(d, { children: j }),
+    m && /* @__PURE__ */ M(r, { children: m })
   ] }),
-  c && z && /* @__PURE__ */ I(r, { href: c, target: "_blank", children: [
+  c && z && /* @__PURE__ */ I(a, { href: c, target: "_blank", children: [
     z,
-    /* @__PURE__ */ M(a, { alt: "link-icon", src: u })
+    /* @__PURE__ */ M(u, { alt: "link-icon", src: b })
   ] })
 ] });
 export {
-  C as DetailedInsight
+  L as DetailedInsight
 };

package/lib/ui/gamification/insight-list/index.d.ts

@@ -8,6 +8,7 @@ interface InsightListProps {
         title: string;
     }>;
     openInsight: (insightId: string) => void;
+    className?: string;
 }
 export declare const InsightList: React.FC<InsightListProps>;
 export {};

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

@@ -1,10 +1,10 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Insight as e } from "../insight/index.js";
-import { Container as n, ItemsContainer as i } from "./styles.js";
+import { Insight as n } from "../insight/index.js";
+import { Container as i, ItemsContainer as p } from "./styles.js";
 import "@streamlayer/sdk-web-types";
 import "../insight/styles.js";
 import "@linaria/react";
-const l = ({ insights: r, openInsight: m }) => /* @__PURE__ */ o(n, { children: /* @__PURE__ */ o(i, { children: r == null ? void 0 : r.map((t) => /* @__PURE__ */ o(e, { openInsight: m, ...t }, t.questionId)) }) });
+const u = ({ insights: r, openInsight: m, className: e }) => /* @__PURE__ */ o(i, { className: e, children: /* @__PURE__ */ o(p, { children: r == null ? void 0 : r.map((t) => /* @__PURE__ */ o(n, { openInsight: m, ...t }, t.questionId)) }) });
 export {
-  l as InsightList
+  u as InsightList
 };

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

@@ -2,6 +2,7 @@
 import type { LeaderboardItem as ILeaderboardItem } from '@streamlayer/sdk-web-types';
 export type LeaderboardItemProps = Partial<ILeaderboardItem> & {
     userId: string;
+    isCurrentUser: boolean;
     openItemDetail: () => void;
     style?: React.CSSProperties;
 };

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

@@ -1,25 +1,28 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { abbreviate as l } from "../../../utils/common.js";
-import { Container as c, RankPosition as m, Avatar as h, AvatarPlaceholder as s, Content as p, NameWrap as b, Name as f, Rank as k, Units as v } from "./styles.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";
-const A = ({
-  rank: t,
+import "../../icons/index.js";
+import "react";
+const k = ({
+  rank: o,
   avatar: i,
-  name: n,
+  name: t,
   points: a,
-  openItemDetail: o,
+  isCurrentUser: n,
+  openItemDetail: m,
   style: d
-}) => /* @__PURE__ */ e(c, { onClick: o, style: d, children: [
-  /* @__PURE__ */ r(m, { children: t || 0 }),
-  i ? /* @__PURE__ */ r(h, { alt: "leaderboard-item-avatar", src: i }) : /* @__PURE__ */ r(s, { children: l(n || "") }),
+}) => /* @__PURE__ */ e(s, { onClick: m, style: d, children: [
+  /* @__PURE__ */ r(h, { children: o || 0 }),
   /* @__PURE__ */ e(p, { children: [
-    /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(f, { children: n || "" }) }),
-    /* @__PURE__ */ e(k, { children: [
-      /* @__PURE__ */ r(v, { children: "PTS" }),
-      a || 0
+    i ? /* @__PURE__ */ r(C, { alt: "leaderboard-item-avatar", src: i }) : /* @__PURE__ */ r(b, { children: c(t || "") }),
+    /* @__PURE__ */ e(f, { children: [
+      /* @__PURE__ */ r(v, { children: t || "" }),
+      n && /* @__PURE__ */ r(x, { name: "icon-star" })
     ] })
-  ] })
+  ] }),
+  /* @__PURE__ */ r("div", { children: l(a) })
 ] });
 export {
-  A as LeaderboardItem
+  k as LeaderboardItem
 };

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

@@ -1,10 +1,9 @@
 /// <reference types="react" />
 export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const RankPosition: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Position: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Avatar: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
 export declare const AvatarPlaceholder: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const NameWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const NameContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Name: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
-export declare const Rank: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Units: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
+export declare const CurrentUserBadge: any;

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

@@ -1,78 +1,69 @@
-import { styled as e } from "@linaria/react";
-const t = e.div`
-  box-sizing: border-box;
+import { styled as r } from "@linaria/react";
+import { SvgIcon as e } from "../../icons/index.js";
+import "react/jsx-runtime";
+import "react";
+const a = r.div`
   display: flex;
-  padding: 8px;
   align-items: center;
+  column-gap: 4px;
+  padding: 8px 16px 8px 8px;
+  color: var(--color-neutrals-gray9);
+  font-size: 12px;
+  font-weight: var(--font-weight-default);
+  line-height: 16px;
+  border: 1px solid var(--color-neutrals-gray3);
   border-radius: 8px;
-  width: 100%;
-  min-height: 50px;
-  max-height: 50px;
-  background-color: #fff;
-  color: #000;
-  font-size: 14px;
-  font-weight: 600;
-  overflow: hidden;
+  background-color: var(--color-neutrals-white);
   cursor: pointer;
-`, n = e.div`
-  width: 28px;
-  max-width: 28px;
+
+  &:hover {
+    color: var(--color-primary-green1);
+    border-color: var(--color-neutrals-gray5);
+  }
+`, l = r.div`
+  min-width: 28px;
+  text-align: center;
+`, p = r.img`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+`, s = r.div`
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  margin-right: 4px;
-  overflow: hidden;
-`, r = e.img`
   width: 32px;
   height: 32px;
+  color: var(--color-neutrals-gray9);
+  font-size: 12px;
   border-radius: 50%;
-`, o = e.div`
   background: var(--color-grey-primary-onboarding-inapp);
-  border-radius: 50%;
-  width: 32px;
-  height: 32px;
   text-align: center;
   text-transform: uppercase;
+`, c = r.div`
   display: flex;
+  flex-grow: 1;
   align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  flex-shrink: 0;
-`, a = e.div`
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
+  column-gap: 8px;
+`, d = r.div`
+  display: grid;
   align-items: center;
-  padding: 4px 4px 4px 0px;
-  margin-right: 4px;
-  margin-left: 8px;
-  overflow: hidden;
-`, p = e.div`
-  display: flex;
-  align-items: center;
-  flex: 1;
-  overflow: hidden;
-`, d = e.span`
-  overflow: hidden;
-  white-space: nowrap;
+  column-gap: 4px;
+  grid-template-columns: 1fr auto;
+`, g = r.span`
   text-overflow: ellipsis;
-  margin-right: 4px;
-`, s = e.div`
-  display: flex;
-  align-items: center;
-  max-width: 75px;
-`, x = e.span`
-  font-size: 10px;
-  margin-right: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+`, x = r(e)`
+  flex-shrink: 0;
 `;
 export {
-  r as Avatar,
-  o as AvatarPlaceholder,
-  t as Container,
-  a as Content,
-  d as Name,
-  p as NameWrap,
-  s as Rank,
-  n as RankPosition,
-  x as Units
+  p as Avatar,
+  s as AvatarPlaceholder,
+  a as Container,
+  c as Content,
+  x as CurrentUserBadge,
+  g as Name,
+  d as NameContainer,
+  l as Position
 };

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

@@ -1,4 +1,4 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import l from "react-virtualized-auto-sizer";
 import { FixedSizeList as u } from "react-window";
 import I from "react-window-infinite-loader";
@@ -6,34 +6,36 @@ import { LeaderboardItem as f } from "../leaderboard-item/index.js";
 import "../../../utils/common.js";
 import "../leaderboard-item/styles.js";
 import "@linaria/react";
-const C = ({ items: r, openItemDetail: i, fetchMore: m }) => /* @__PURE__ */ e(l, { children: ({ width: d, height: n }) => /* @__PURE__ */ e(
+import "../../icons/index.js";
+import "react";
+const x = ({ items: r, openItemDetail: i, fetchMore: m }) => /* @__PURE__ */ o(l, { children: ({ width: d, height: n }) => /* @__PURE__ */ o(
   I,
   {
-    isItemLoaded: (o) => o < r.length,
+    isItemLoaded: (t) => t < r.length,
     itemCount: r.length + 1,
     loadMoreItems: m,
-    children: ({ onItemsRendered: o, ref: p }) => /* @__PURE__ */ e(
+    children: ({ onItemsRendered: t, ref: p }) => /* @__PURE__ */ o(
       u,
       {
         itemSize: 58,
-        onItemsRendered: o,
+        onItemsRendered: t,
         ref: p,
         itemCount: r.length,
         width: d,
         height: n,
-        children: ({ index: t, style: a }) => /* @__PURE__ */ e(
+        children: ({ index: e, style: a }) => /* @__PURE__ */ o(
           f,
           {
             style: a,
-            ...r[t],
-            openItemDetail: () => i(r[t].userId)
+            ...r[e],
+            openItemDetail: () => i(r[e].userId)
           },
-          r[t].userId
+          r[e].userId
         )
       }
     )
   }
 ) });
 export {
-  C as LeaderboardList
+  x as LeaderboardList
 };

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

@@ -1,18 +1,20 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { formatDecimals as r } from "../../../utils/common.js";
-import { PointsContainer as n, PointsIcon as m, PointsSvg as s, PointsBody as e, PointsTitle as p, PointsValue as c } from "./styles.js";
+import { resetCss as r } from "../../theme/theme.js";
+import { formatDecimals as n } from "../../../utils/common.js";
+import { PointsContainer as m, PointsIcon as s, PointsSvg as e, PointsBody as p, PointsTitle as c, PointsValue as l } from "./styles.js";
+import "@linaria/core";
+import "../../theme/constants.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "react";
 import "../../theme/breakpoints.js";
-import "../../theme/constants.js";
-const u = ({ points: t }) => /* @__PURE__ */ i(n, { children: [
-  /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(s, { name: "icon-trophy" }) }),
-  /* @__PURE__ */ i(e, { children: [
-    /* @__PURE__ */ o(p, { children: "Total points" }),
-    /* @__PURE__ */ o(c, { children: r(t) })
+const T = ({ points: t }) => /* @__PURE__ */ i(m, { className: r, children: [
+  /* @__PURE__ */ o(s, { children: /* @__PURE__ */ o(e, { name: "icon-trophy" }) }),
+  /* @__PURE__ */ i(p, { children: [
+    /* @__PURE__ */ o(c, { children: "Total points" }),
+    /* @__PURE__ */ o(l, { children: n(t) })
   ] })
 ] });
 export {
-  u as Points
+  T as Points
 };

package/lib/ui/theme/index.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import { theme as o } from "./theme.js";
 import "@linaria/core";
 import "./constants.js";
-const s = ({ children: r, style: m }) => /* @__PURE__ */ e("div", { className: o, style: m, children: r });
+const p = ({ children: r, style: m }) => /* @__PURE__ */ e("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ e("div", { className: o, style: m, children: r }) });
 export {
-  s as StreamLayerThemeProvider
+  p as StreamLayerThemeProvider
 };

package/lib/ui/theme/theme.d.ts

@@ -1,3 +1,7 @@
 export declare const themeStr: string;
+/**
+ * @link https://stackoverflow.com/a/65560812
+ */
+export declare const resetCss = "StreamLayerCSSReset";
 export declare const theme: import("@linaria/core").LinariaClassName;
 export declare const ThemeVariables: () => import("react/jsx-runtime").JSX.Element;

package/lib/ui/theme/theme.js

@@ -1,36 +1,37 @@
-import { jsx as t, jsxs as r } from "react/jsx-runtime";
-import { css as d } from "@linaria/core";
-import { colors as c, FONT as e } from "./constants.js";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { css as l } from "@linaria/core";
+import { colors as c, FONT as t } from "./constants.js";
 const i = `
   ${c}
-  --font-family: ${e.REGULAR};
-  --font-regular: ${e.REGULAR};
-  --font-color: ${e.COLOR};
-  --font-serif: ${e.SERIF};
-  --font-weight-default: ${e.WEIGHT_DEFAULT};
+  --font-family: ${t.REGULAR};
+  --font-regular: ${t.REGULAR};
+  --font-color: ${t.COLOR};
+  --font-serif: ${t.SERIF};
+  --font-weight-default: ${t.WEIGHT_DEFAULT};
 
   --header-height: 68px;
   --animation-duration: 0.5s;
   --animation-function: ease;
   --container-padding: 16px;
   --border-radius: 8px;
-`, f = d`
+`, f = "StreamLayerCSSReset", p = l`
   ${i}
-`, p = () => /* @__PURE__ */ t("table", { children: /* @__PURE__ */ r("table", { children: [
-  /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ r("tr", { children: [
-    /* @__PURE__ */ t("th", { children: "name" }),
-    /* @__PURE__ */ t("th", { children: "value" })
+`, u = () => /* @__PURE__ */ e("table", { children: /* @__PURE__ */ r("table", { children: [
+  /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ r("tr", { children: [
+    /* @__PURE__ */ e("th", { children: "name" }),
+    /* @__PURE__ */ e("th", { children: "value" })
   ] }) }),
-  /* @__PURE__ */ t("tbody", { children: i.split(";").map((o) => {
-    const n = o.trim(), [a, l] = n.split(":");
+  /* @__PURE__ */ e("tbody", { children: i.split(";").map((o) => {
+    const n = o.trim(), [a, s] = n.split(":");
     return /* @__PURE__ */ r("tr", { children: [
-      /* @__PURE__ */ t("td", { children: a }),
-      /* @__PURE__ */ t("td", { children: l })
+      /* @__PURE__ */ e("td", { children: a }),
+      /* @__PURE__ */ e("td", { children: s })
     ] }, n);
   }) })
 ] }) });
 export {
-  p as ThemeVariables,
-  f as theme,
+  u as ThemeVariables,
+  f as resetCss,
+  p as theme,
   i as themeStr
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.50.0",
+  "version": "0.52.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -26,20 +26,20 @@
     "package.json"
   ],
   "peerDependencies": {
-    "@streamlayer/sl-eslib": "^5.52.0",
+    "@streamlayer/sl-eslib": "^5.53.5",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.19.2",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.4",
-    "@streamlayer/sdk-web": "^0.28.9",
-    "@streamlayer/sdk-web-api": "^0.1.0",
-    "@streamlayer/sdk-web-core": "^0.17.0",
-    "@streamlayer/sdk-web-features": "^0.10.12",
-    "@streamlayer/sdk-web-interfaces": "^0.18.8",
-    "@streamlayer/sdk-web-notifications": "^0.10.7",
-    "@streamlayer/sdk-web-storage": "^0.3.9",
-    "@streamlayer/sdk-web-types": "^0.17.0"
+    "@streamlayer/feature-gamification": "^0.19.3",
+    "@streamlayer/sdk-web": "^0.28.10",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.5",
+    "@streamlayer/sdk-web-api": "^0.0.1",
+    "@streamlayer/sdk-web-core": "^0.17.1",
+    "@streamlayer/sdk-web-features": "^0.10.13",
+    "@streamlayer/sdk-web-interfaces": "^0.18.9",
+    "@streamlayer/sdk-web-notifications": "^0.10.8",
+    "@streamlayer/sdk-web-types": "^0.17.1",
+    "@streamlayer/sdk-web-storage": "^0.3.10"
   },
   "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.25.0"
+    "@streamlayer/react": "^0.26.0"
   }
 }