@streamlayer/react-ui 0.51.0 → 0.52.1

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 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 "react/jsx-runtime";
 import "react";
 import "./icon-exit-d3f9fc80.js";
@@ -50,6 +50,7 @@ import "./ui/gamification/user-statistics/components/rank/styles.js";
 import "./ui/gamification/user-statistics/components/statistic/index.js";
 import "./ui/gamification/user-statistics/components/statistic/styles.js";
 import "./ui/gamification/user-statistics/styles.js";
+import "./ui/app/styles.js";
 import "./ui/gamification/vote/feedback/index.js";
 import "./ui/gamification/vote/feedback/styles.js";
 import "./ui/gamification/vote/styles.js";
@@ -96,21 +97,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
+  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
 };

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/Question.js

@@ -8,6 +8,7 @@ import "../../../gamification/constants.js";
 import "../../../gamification/detail/header/styles.js";
 import "../../../icons/index.js";
 import "react";
+import "../../styles.js";
 import "../../../gamification/vote/feedback/index.js";
 import "../../../gamification/vote/feedback/styles.js";
 import "../../../gamification/vote/styles.js";
@@ -27,7 +28,7 @@ const x = l.div`
   align-items: center;
   justify-content: flex-start;
   flex-direction: column;
-`, B = ({ openedQuestion: r, closeQuestion: m, vote: i }) => {
+`, D = ({ openedQuestion: r, closeQuestion: m, vote: i }) => {
   var o;
   return /* @__PURE__ */ p(x, { children: [
     /* @__PURE__ */ t(f, { close: m, type: (r == null ? void 0 : r.type) || c.UNSET }),
@@ -36,5 +37,5 @@ const x = l.div`
   ] });
 };
 export {
-  B as Question
+  D as Question
 };

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

@@ -1,10 +1,12 @@
-import { styled as n } from "@linaria/react";
-const i = n.div`
+import { styled as t } from "@linaria/react";
+const i = t.div`
   height: 100%;
   background: transparent;
   font-family: var(--font-regular);
   position: relative;
-`, r = n.div`
+  min-width: 324px;
+`, r = t.div`
+  width: 100%;
   overflow-y: auto;
   height: 100%;
   transition: transform;
@@ -15,17 +17,22 @@ const i = n.div`
     height: calc(100% - var(--header-height));
     transform: translateY(var(--header-height));
   }
-`, t = n.div`
+
+  &[data-question-header='true'] {
+    height: calc(100% - var(--question-headers-height));
+    transform: translateY(var(--question-headers-height));
+  }
+`, a = t.div`
   display: flex;
   flex-direction: column;
   padding: var(--container-padding);
   gap: var(--container-padding);
-`, o = n(t)`
+`, e = t(a)`
   background-color: var(--color-neutrals-white);
 `;
 export {
   i as SDKContainer,
-  t as SDKContentContainer,
+  a as SDKContentContainer,
   r as SDKScrollContainer,
-  o as SDKWhiteContainer
+  e as SDKWhiteContainer
 };

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
 };