@streamlayer/react-ui 0.24.3 → 0.25.0

package/lib/{icon-exit-d3f9fc80.js → icon-exit-6a55bb8f.js}

@@ -1,4 +1,4 @@
 const I = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSIxMiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC4xIi8+CiAgPHJlY3QgeD0iOC4yNSIgeT0iNyIgd2lkdGg9IjEyLjM3NDQiIGhlaWdodD0iMS43Njc3NyIgcng9IjAuODgzODg0IiB0cmFuc2Zvcm09InJvdGF0ZSg0NSA4LjI1IDcpIiBmaWxsPSJ3aGl0ZSIvPgogIDxyZWN0IHg9IjciIHk9IjE1Ljc1IiB3aWR0aD0iMTIuMzc0NCIgaGVpZ2h0PSIxLjc2Nzc3IiByeD0iMC44ODM4ODQiIHRyYW5zZm9ybT0icm90YXRlKC00NSA3IDE1Ljc1KSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==";
 export {
-  I as c
+  I as i
 };

package/lib/index.js

@@ -1,16 +1,18 @@
-import { QuestionInApp as ho } from "./lib/notifications/notification/question-inapp/index.js";
-import { Login as bo } from "./lib/login/index.js";
-import { Onboarding as vo } from "./lib/gamification/onboarding/index.js";
-import { Question as Ao } from "./lib/gamification/question/index.js";
-import { QuestionList as Io } from "./lib/gamification/question-list/index.js";
-import { UserStatistics as Po } from "./lib/gamification/user-statistics/index.js";
-import { Vote as Uo } from "./lib/gamification/vote/index.js";
-import { Demo as jo } from "./lib/demo/index.js";
-import { StreamLayerThemeProvider as lo } from "./lib/theme/index.js";
-import { theme as wo } from "./lib/theme/theme.js";
+import { QuestionInApp as lo } from "./lib/notifications/notification/question-inapp/index.js";
+import { Login as No } from "./lib/login/index.js";
+import { Onboarding as To } from "./lib/gamification/onboarding/index.js";
+import { ActivePages as Vo, Navigation as jo } from "./lib/gamification/navigation/index.js";
+import { LeaderboardItemDetail as qo } from "./lib/gamification/leaderboard-item-detail/index.js";
+import { Question as zo } from "./lib/gamification/question/index.js";
+import { QuestionList as Co } from "./lib/gamification/question-list/index.js";
+import { UserStatistics as Fo } from "./lib/gamification/user-statistics/index.js";
+import { Vote as Ho } from "./lib/gamification/vote/index.js";
+import { Demo as Ko } from "./lib/demo/index.js";
+import { StreamLayerThemeProvider as Ro } from "./lib/theme/index.js";
+import { theme as Xo } from "./lib/theme/theme.js";
 import "react/jsx-runtime";
 import "react";
-import "./icon-exit-d3f9fc80.js";
+import "./icon-exit-6a55bb8f.js";
 import "./lib/notifications/notification/question-inapp/styles.js";
 import "@linaria/react";
 import "react-phone-number-input";
@@ -31,6 +33,10 @@ import "./lib/gamification/onboarding/components/onboarding-slides/onboarding-ru
 import "./lib/gamification/onboarding/components/onboarding-slides/onboarding-rules/styles.js";
 import "./lib/gamification/onboarding/components/onboarding-slides/onboarding-invite-card/index.js";
 import "./lib/gamification/onboarding/components/onboarding-slides/onboarding-invite-card/styles.js";
+import "./lib/gamification/navigation/styles.js";
+import "./lib/gamification/common-header/index.js";
+import "./lib/gamification/common-header/styles.js";
+import "./lib/gamification/leaderboard-item-detail/styles.js";
 import "@streamlayer/sdk-web-types";
 import "./icon-chevron-138a557c.js";
 import "./lib/gamification/question/styles.js";
@@ -64,8 +70,14 @@ import "./lib/gamification/vote/components/voting-header/components/points/index
 import "./lib/gamification/vote/components/voting-header/components/points/styles.js";
 import "./lib/gamification/insight/styles.js";
 import "./lib/gamification/insight-list/styles.js";
-import "./lib/gamification/common-header/styles.js";
 import "./lib/gamification/detailed-insight/styles.js";
+import "./lib/demo/components/Leaderboard.js";
+import "./lib/gamification/leaderboard-list/index.js";
+import "./lib/gamification/leaderboard-invite-link/index.js";
+import "./lib/gamification/leaderboard-invite-link/styles.js";
+import "./lib/gamification/leaderboard-item/index.js";
+import "./lib/gamification/leaderboard-item/styles.js";
+import "./lib/gamification/leaderboard-list/styles.js";
 import "./lib/demo/styles.js";
 import "./lib/demo/Highlights.js";
 import "./lib/demo/components/Insights.js";
@@ -73,18 +85,20 @@ import "./lib/gamification/insight-list/index.js";
 import "./lib/gamification/insight/index.js";
 import "./lib/demo/components/Insight.js";
 import "./lib/gamification/detailed-insight/index.js";
-import "./lib/gamification/common-header/index.js";
 import "./lib/demo/Login.js";
 import "@linaria/core";
 export {
-  jo as Demo,
-  bo as Login,
-  vo as Onboarding,
-  Ao as Question,
-  ho as QuestionInApp,
-  Io as QuestionList,
-  lo as StreamLayerThemeProvider,
-  Po as UserStatistics,
-  Uo as Vote,
-  wo as theme
+  Vo as ActivePages,
+  Ko as Demo,
+  qo as LeaderboardItemDetail,
+  No as Login,
+  jo as Navigation,
+  To as Onboarding,
+  zo as Question,
+  lo as QuestionInApp,
+  Co as QuestionList,
+  Ro as StreamLayerThemeProvider,
+  Fo as UserStatistics,
+  Ho as Vote,
+  Xo as theme
 };

package/lib/lib/demo/Gamification.js

@@ -1,21 +1,25 @@
-import { jsx as t, jsxs as T } from "react/jsx-runtime";
+import { jsx as r, jsxs as s, Fragment as k } from "react/jsx-runtime";
 import { FeatureStatus as z } from "@streamlayer/sdk-web-interfaces";
-import { useStore as i } from "@nanostores/react";
-import { UserSummary as H } from "./components/UserSummary.js";
-import { QuestionsList as J } from "./components/QuestionsList.js";
-import { Question as K } from "./components/Question.js";
-import { Onboarding as M } from "../gamification/onboarding/index.js";
+import { useStore as p } from "@nanostores/react";
+import { useState as J } from "react";
+import { ActivePages as a, Navigation as K } from "../gamification/navigation/index.js";
+import { UserSummary as V } from "./components/UserSummary.js";
+import { QuestionsList as W } from "./components/QuestionsList.js";
+import { Question as X } from "./components/Question.js";
+import { Onboarding as Y } from "../gamification/onboarding/index.js";
 import "@streamlayer/sdk-web-types";
 import "../gamification/insight/styles.js";
 import "../gamification/insight-list/styles.js";
 import "../gamification/common-header/styles.js";
 import "../gamification/detailed-insight/styles.js";
-import { DemoContainer as n, UserStatisticsContainer as N, QuestionsContainer as P } from "./styles.js";
+import { Leaderboard as Z } from "./components/Leaderboard.js";
+import { DemoContainer as m, UserStatisticsContainer as _, QuestionsContainer as $ } from "./styles.js";
+import "../gamification/navigation/styles.js";
+import "@linaria/react";
 import "../gamification/user-statistics/index.js";
 import "../../utils/common.js";
 import "../gamification/user-statistics/components/statistics/index.js";
 import "../gamification/user-statistics/components/statistics/styles.js";
-import "@linaria/react";
 import "../gamification/user-statistics/components/rank/index.js";
 import "../gamification/user-statistics/components/rank/styles.js";
 import "../gamification/user-statistics/styles.js";
@@ -24,13 +28,12 @@ import "../gamification/question/index.js";
 import "../../icon-chevron-138a557c.js";
 import "../gamification/question/styles.js";
 import "../gamification/question-list/styles.js";
-import "react";
 import "../gamification/vote/index.js";
 import "../../index-d5620d2c.js";
 import "../gamification/vote/components/voting-option/styles.js";
 import "../gamification/vote/styles.js";
 import "../gamification/vote/components/voting-header/index.js";
-import "../../icon-exit-d3f9fc80.js";
+import "../../icon-exit-6a55bb8f.js";
 import "../gamification/vote/components/voting-header/components/timer/index.js";
 import "react-countdown-circle-timer";
 import "../theme/constants.js";
@@ -45,51 +48,66 @@ import "../gamification/onboarding/components/onboarding-slides/onboarding-rules
 import "../gamification/onboarding/components/onboarding-slides/onboarding-rules/styles.js";
 import "../gamification/onboarding/components/onboarding-slides/onboarding-invite-card/index.js";
 import "../gamification/onboarding/components/onboarding-slides/onboarding-invite-card/styles.js";
-const zr = ({
-  gamification: r,
-  sdk: m
+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-invite-link/index.js";
+import "../gamification/leaderboard-invite-link/styles.js";
+import "../gamification/leaderboard-item/index.js";
+import "../gamification/leaderboard-item/styles.js";
+import "../gamification/leaderboard-list/styles.js";
+const pr = ({
+  gamification: t,
+  sdk: u
 }) => {
-  var a, u, l, d, v, c, y, b, C, h, G, S, Q, L, g, w, x, f, F, j, q, B, E;
-  const U = i(r.status), A = i(r.onboardingStatus), s = i(r.openedQuestion), { slStreamId: e } = i(m.sdkStore), o = i(r.featureSettings);
-  if (U !== z.Ready)
-    return /* @__PURE__ */ t("div", { children: "wait..." });
-  if (e != null && e.loading)
-    return /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t("div", { children: "Event is loading" }) });
-  if (!(e != null && e.data))
-    return /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
-  if (!A)
-    return /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(
-      M,
+  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 j = p(t.status), q = p(t.onboardingStatus), l = p(t.openedQuestion), { slStreamId: o } = p(u.sdkStore), e = p(t.featureSettings), [n, H] = J(a.HOME);
+  if (j !== z.Ready)
+    return /* @__PURE__ */ r("div", { children: "wait..." });
+  if (o != null && o.loading)
+    return /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r("div", { children: "Event is loading" }) });
+  if (!(o != null && o.data))
+    return /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r("div", { children: "Event is forbidden" }) });
+  if (!q)
+    return /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(
+      Y,
       {
-        closeFeature: m.closeFeature,
-        gamification: r,
-        steps: (u = (a = o.inplayGame) == null ? void 0 : a.onboarding) == null ? void 0 : u.steps,
-        gameIcon: (v = (d = (l = o.inplayGame) == null ? void 0 : l.overview) == null ? void 0 : d.media) == null ? void 0 : v.gameIcon,
-        sponsorLogo: (b = (y = (c = o.inplayGame) == null ? void 0 : c.overview) == null ? void 0 : y.media) == null ? void 0 : b.sponsorLogo,
-        rules: (h = (C = o.inplayGame) == null ? void 0 : C.rules) == null ? void 0 : h.rules,
-        rulesBtnLabel: (S = (G = o.inplayGame) == null ? void 0 : G.rules) == null ? void 0 : S.buttonLabel,
-        rulesTitle: (L = (Q = o.inplayGame) == null ? void 0 : Q.rules) == null ? void 0 : L.heading,
-        primaryColor: (x = (w = (g = o.inplayGame) == null ? void 0 : g.overview) == null ? void 0 : w.appearance) == null ? void 0 : x.primaryColor,
-        inviteCardTitle: (F = (f = o.inplayGame) == null ? void 0 : f.inviteCard) == null ? void 0 : F.heading,
-        inviteCardSubtext: (q = (j = o.inplayGame) == null ? void 0 : j.inviteCard) == null ? void 0 : q.subtext,
-        inviteCardBtnLabel: (E = (B = o.inplayGame) == null ? void 0 : B.inviteCard) == null ? void 0 : E.buttonLabel
+        closeFeature: u.closeFeature,
+        gamification: t,
+        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 D = (p) => {
-    r.openQuestion(p);
-  }, O = () => {
-    r.closeQuestion();
-  }, R = (p, k) => {
-    r.submitAnswer(p, k);
+  const M = (i) => {
+    t.openQuestion(i);
+  }, T = () => {
+    t.closeQuestion();
+  }, U = (i, N) => {
+    t.submitAnswer(i, N);
   };
-  return /* @__PURE__ */ T(n, { children: [
-    /* @__PURE__ */ t(N, { children: r.userSummary && /* @__PURE__ */ t(H, { store: r.userSummary.getStore() }) }),
-    /* @__PURE__ */ T(P, { children: [
-      r.questions && /* @__PURE__ */ t(J, { openQuestion: D, store: r.questions.getStore() }),
-      s && /* @__PURE__ */ t(K, { closeQuestion: O, vote: R, openedQuestion: s })
-    ] })
+  return /* @__PURE__ */ s(m, { children: [
+    /* @__PURE__ */ r(K, { activePage: n, toggleActivePage: (i) => {
+      H(i);
+    } }),
+    n === a.HOME && /* @__PURE__ */ s(k, { children: [
+      /* @__PURE__ */ r(_, { children: t.userSummary && /* @__PURE__ */ r(V, { store: t.userSummary.getStore() }) }),
+      /* @__PURE__ */ s($, { children: [
+        t.questions && /* @__PURE__ */ r(W, { openQuestion: M, store: t.questions.getStore() }),
+        l && /* @__PURE__ */ r(X, { closeQuestion: T, vote: U, openedQuestion: l })
+      ] })
+    ] }),
+    n === a.LEADERBOARD && t.leaderboardList && /* @__PURE__ */ r(Z, { store: t.leaderboardList.getStore() })
   ] });
 };
 export {
-  zr as GamificationComponent
+  pr as GamificationComponent
 };

package/lib/lib/demo/Highlights.js

@@ -15,6 +15,11 @@ import "../gamification/onboarding/components/onboarding-slides/onboarding-rules
 import "../gamification/onboarding/components/onboarding-slides/onboarding-invite-card/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 "../gamification/leaderboard-invite-link/styles.js";
+import "../gamification/leaderboard-item/styles.js";
+import "../gamification/leaderboard-list/styles.js";
 import "@linaria/react";
 import "@streamlayer/sdk-web-types";
 import "../../icon-chevron-138a557c.js";
@@ -24,7 +29,7 @@ import "../../index-d5620d2c.js";
 import "../gamification/vote/components/voting-option/styles.js";
 import "../gamification/vote/styles.js";
 import "../gamification/vote/components/voting-header/index.js";
-import "../../icon-exit-d3f9fc80.js";
+import "../../icon-exit-6a55bb8f.js";
 import "../gamification/vote/components/voting-header/components/timer/index.js";
 import "react-countdown-circle-timer";
 import "../theme/constants.js";
@@ -38,9 +43,8 @@ import "../gamification/insight/styles.js";
 import "../gamification/insight-list/styles.js";
 import "../gamification/detailed-insight/index.js";
 import "../gamification/common-header/index.js";
-import "../gamification/common-header/styles.js";
 import "../gamification/detailed-insight/styles.js";
-const tt = ({ highlights: i, sdk: e }) => {
+const mt = ({ 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() }),
@@ -55,5 +59,5 @@ const tt = ({ highlights: i, sdk: e }) => {
   ] }) : /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
 };
 export {
-  tt as HighlightsComponent
+  mt as HighlightsComponent
 };

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

@@ -1,7 +1,7 @@
 import { jsx as p } from "react/jsx-runtime";
 import { DetailedInsight as L } from "../../gamification/detailed-insight/index.js";
 import "../../gamification/common-header/index.js";
-import "../../../icon-exit-d3f9fc80.js";
+import "../../../icon-exit-6a55bb8f.js";
 import "../../gamification/common-header/styles.js";
 import "@linaria/react";
 import "../../gamification/detailed-insight/styles.js";

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

@@ -0,0 +1,48 @@
+import { jsx as e, jsxs as c, Fragment as l } 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-6a55bb8f.js";
+import "../../gamification/common-header/styles.js";
+import "@linaria/react";
+import "../../gamification/user-statistics/index.js";
+import "../../../utils/common.js";
+import "../../gamification/user-statistics/components/statistics/index.js";
+import "../../gamification/user-statistics/components/statistics/styles.js";
+import "../../gamification/user-statistics/components/rank/index.js";
+import "../../gamification/user-statistics/components/rank/styles.js";
+import "../../gamification/user-statistics/styles.js";
+import "../../gamification/leaderboard-item-detail/styles.js";
+import "../../gamification/leaderboard-invite-link/index.js";
+import "../../gamification/leaderboard-invite-link/styles.js";
+import "../../gamification/leaderboard-item/index.js";
+import "../../gamification/leaderboard-item/styles.js";
+import "../../gamification/leaderboard-list/styles.js";
+const M = ({ store: p }) => {
+  const { data: r } = u(p), [i, s] = b(void 0);
+  if (!r)
+    return /* @__PURE__ */ e("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__ */ c(l, { children: [
+    i && /* @__PURE__ */ e(f, { comeBack: () => o(null), ...i }),
+    !i && /* @__PURE__ */ e(
+      I,
+      {
+        items: r.filter((t) => t.attributes).map((t) => t.attributes),
+        openItemDetail: o
+      }
+    )
+  ] });
+};
+export {
+  M as Leaderboard
+};

package/lib/lib/demo/components/Question.js

@@ -7,7 +7,7 @@ import "@streamlayer/sdk-web-types";
 import "../../../index-d5620d2c.js";
 import "../../gamification/vote/components/voting-option/styles.js";
 import "../../gamification/vote/styles.js";
-import "../../../icon-exit-d3f9fc80.js";
+import "../../../icon-exit-6a55bb8f.js";
 import "../../gamification/vote/components/voting-header/components/timer/index.js";
 import "react-countdown-circle-timer";
 import "../../theme/constants.js";

package/lib/lib/demo/components/UserSummary.js

@@ -1,6 +1,6 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useStore as e } from "@nanostores/react";
-import { UserStatistics as s } from "../../gamification/user-statistics/index.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useStore as o } from "@nanostores/react";
+import { UserStatistics as i } from "../../gamification/user-statistics/index.js";
 import "../../../utils/common.js";
 import "../../gamification/user-statistics/components/statistics/index.js";
 import "../../gamification/user-statistics/components/statistics/styles.js";
@@ -8,25 +8,16 @@ import "@linaria/react";
 import "../../gamification/user-statistics/components/rank/index.js";
 import "../../gamification/user-statistics/components/rank/styles.js";
 import "../../gamification/user-statistics/styles.js";
-const g = ({ store: t }) => {
-  var m;
-  const { data: r } = e(t);
-  return r != null && r.summary ? /* @__PURE__ */ a(
-    s,
+const S = ({ store: m }) => {
+  const { data: r } = o(m);
+  return r != null && r.summary ? /* @__PURE__ */ t(
+    i,
     {
-      avatar: r.summary.avatar,
-      name: r.summary.name,
-      points: r.summary.points,
-      grade: "0",
-      friendsRank: r.summary.friendsRank,
-      globalRank: r.summary.rank,
-      winStreak: r.summary.streak,
-      correct: r.summary.correct,
-      incorrect: r.summary.incorrect,
-      successRate: (m = r.percentage) == null ? void 0 : m.average
+      ...r.summary,
+      ...r.percentage
     }
-  ) : /* @__PURE__ */ a("div", { children: "wait user..." });
+  ) : /* @__PURE__ */ t("div", { children: "wait user..." });
 };
 export {
-  g as UserSummary
+  S as UserSummary
 };

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

@@ -1,9 +1,10 @@
-import { UserSummary as V } from "./UserSummary.js";
-import { QuestionsList as X } from "./QuestionsList.js";
-import { Question as Z } from "./Question.js";
-import { Onboarding as $ } from "../../gamification/onboarding/index.js";
-import { Insights as ro } from "./Insights.js";
-import { Insight as mo } from "./Insight.js";
+import { UserSummary as or } from "./UserSummary.js";
+import { QuestionsList as mr } from "./QuestionsList.js";
+import { Question as ir } from "./Question.js";
+import { Onboarding as sr } from "../../gamification/onboarding/index.js";
+import { Insights as xr } from "./Insights.js";
+import { Insight as ar } from "./Insight.js";
+import { Leaderboard as gr } from "./Leaderboard.js";
 import "react/jsx-runtime";
 import "@nanostores/react";
 import "../../gamification/user-statistics/index.js";
@@ -26,7 +27,7 @@ import "../../../index-d5620d2c.js";
 import "../../gamification/vote/components/voting-option/styles.js";
 import "../../gamification/vote/styles.js";
 import "../../gamification/vote/components/voting-header/index.js";
-import "../../../icon-exit-d3f9fc80.js";
+import "../../../icon-exit-6a55bb8f.js";
 import "../../gamification/vote/components/voting-header/components/timer/index.js";
 import "react-countdown-circle-timer";
 import "../../theme/constants.js";
@@ -49,11 +50,20 @@ 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-invite-link/index.js";
+import "../../gamification/leaderboard-invite-link/styles.js";
+import "../../gamification/leaderboard-item/index.js";
+import "../../gamification/leaderboard-item/styles.js";
+import "../../gamification/leaderboard-list/styles.js";
 export {
-  mo as Insight,
-  ro as Insights,
-  $ as Onboarding,
-  Z as Question,
-  X as QuestionsList,
-  V as UserSummary
+  ar as Insight,
+  xr as Insights,
+  gr as Leaderboard,
+  sr as Onboarding,
+  ir as Question,
+  mr as QuestionsList,
+  or as UserSummary
 };

package/lib/lib/demo/index.js

@@ -1,24 +1,26 @@
-import { jsx as i, jsxs as l, Fragment as S } from "react/jsx-runtime";
+import { jsx as i, jsxs as l, Fragment as v } from "react/jsx-runtime";
 import { FeatureStatus as f } from "@streamlayer/sdk-web-interfaces";
-import { FeatureType as s } from "@streamlayer/sdk-web-types";
-import { AvailableFeatures as v } from "@streamlayer/sdk-web-features";
+import { FeatureType as c } from "@streamlayer/sdk-web-types";
+import { AvailableFeatures as S } from "@streamlayer/sdk-web-features";
 import { useState as b, useMemo as d, useEffect as C } from "react";
-import { useStore as c } from "@nanostores/react";
+import { useStore as s } from "@nanostores/react";
 import { Notifications as F } from "../notifications/index.js";
 import { GamificationComponent as w } from "./Gamification.js";
-import { HighlightsComponent as B } from "./Highlights.js";
-import { LoginComponent as G } from "./Login.js";
-import { Buttons as H, Button as g } from "./styles.js";
+import { HighlightsComponent as G } from "./Highlights.js";
+import { LoginComponent as H } from "./Login.js";
+import { Buttons as x, Button as g } from "./styles.js";
 import "../notifications/notification/index.js";
 import "@streamlayer/sdk-web-notifications";
 import "../notifications/notification/onboarding-inapp/index.js";
 import "../notifications/notification/onboarding-inapp/styles.js";
 import "@linaria/react";
 import "../notifications/notification/question-inapp/index.js";
-import "../../icon-exit-d3f9fc80.js";
+import "../../icon-exit-6a55bb8f.js";
 import "../notifications/notification/question-inapp/styles.js";
 import "../notifications/notification/styles.js";
 import "../notifications/styles.js";
+import "../gamification/navigation/index.js";
+import "../gamification/navigation/styles.js";
 import "./components/UserSummary.js";
 import "../gamification/user-statistics/index.js";
 import "../../utils/common.js";
@@ -58,12 +60,21 @@ import "../gamification/insight/styles.js";
 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-invite-link/index.js";
+import "../gamification/leaderboard-invite-link/styles.js";
+import "../gamification/leaderboard-item/index.js";
+import "../gamification/leaderboard-item/styles.js";
+import "../gamification/leaderboard-list/styles.js";
 import "./components/Insights.js";
 import "../gamification/insight-list/index.js";
 import "../gamification/insight/index.js";
 import "./components/Insight.js";
 import "../gamification/detailed-insight/index.js";
-import "../gamification/common-header/index.js";
 import "../login/index.js";
 import "react-phone-number-input";
 import "react-auth-code-input";
@@ -72,36 +83,36 @@ import "@connectrpc/connect-web";
 import "@connectrpc/connect";
 import "@streamlayer/sl-eslib/users/users_connect";
 import "../login/styles.js";
-const x = ({ activeFeature: o, sdk: r }) => {
-  const [e, p] = b(null), { organizationSettings: a, streamSettings: u } = c(r.sdkStore), h = d(() => {
+const A = ({ activeFeature: o, sdk: r }) => {
+  const [e, n] = b(null), { organizationSettings: a, streamSettings: u } = s(r.sdkStore), h = d(() => {
     const t = (u == null ? void 0 : u.data) || (a == null ? void 0 : a.data);
     return t != null && t.overlays ? t.overlays : [];
   }, [a, u]);
   C(() => {
     const t = r.getFeatures();
     if (o)
-      for (const [m, n] of t)
-        m === o ? n.status.get() === f.Suspended && (n.enable(), p(n)) : n.status.get() === f.Ready && n.disable();
+      for (const [m, p] of t)
+        m === o ? p.status.get() === f.Suspended && (p.enable(), n(p)) : p.status.get() === f.Ready && p.disable();
     else {
       for (const [, m] of t)
         m.status.get() === f.Ready && m.disable();
-      p(null);
+      n(null);
     }
     return () => {
       for (const [, m] of t)
         m.status.get() === f.Ready && m.disable();
     };
   }, [o, r]);
-  const y = d(() => e ? e.featureConfig.get().type === s.GAMES ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(w, { gamification: e, sdk: r }) }) : /* @__PURE__ */ i("div", { children: "wait gamification..." }) : e.featureConfig.get().type === s.HIGHLIGHTS ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(B, { highlights: e, sdk: r }) }) : /* @__PURE__ */ i("div", { children: "wait highlights..." }) : /* @__PURE__ */ i("div", { children: "unknown feature" }) : null, [r, e]);
+  const y = d(() => e ? e.featureConfig.get().type === c.GAMES ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(w, { gamification: e, sdk: r }) }) : /* @__PURE__ */ i("div", { children: "wait gamification..." }) : e.featureConfig.get().type === c.HIGHLIGHTS ? e ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(G, { highlights: e, sdk: r }) }) : /* @__PURE__ */ i("div", { children: "wait highlights..." }) : /* @__PURE__ */ i("div", { children: "unknown feature" }) : null, [r, e]);
   return /* @__PURE__ */ l("div", { children: [
-    /* @__PURE__ */ l(H, { children: [
+    /* @__PURE__ */ l(x, { children: [
       /* @__PURE__ */ i(g, { onClick: () => r.logout(), children: "logout" }),
       h.map((t) => /* @__PURE__ */ l(
         g,
         {
           onClick: () => r.openFeature(t.type),
-          disabled: !(t.type in v),
-          "data-enableSdkButton": t.enableSdkButton.toString(),
+          disabled: !(t.type in S),
+          "data-enable_sdk_button": t.enableSdkButton.toString(),
           "data-selected": t.type === o,
           children: [
             /* @__PURE__ */ i("img", { src: t.icon, alt: "" }),
@@ -113,13 +124,13 @@ const x = ({ activeFeature: o, sdk: r }) => {
     ] }),
     y
   ] });
-}, Yt = ({ sdk: o }) => {
-  const r = c(o.organizationStore()), e = c(o.getUserStore()), p = c(o.getActiveFeature());
-  return r.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : r.data ? e.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : e.data ? /* @__PURE__ */ l(S, { children: [
+}, mi = ({ sdk: o }) => {
+  const r = s(o.organizationStore()), e = s(o.getUserStore()), n = s(o.getActiveFeature());
+  return r.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : r.data ? e.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : e.data ? /* @__PURE__ */ l(v, { children: [
     /* @__PURE__ */ i(F, { notificationsStore: o.getNotificationsStore() }),
-    /* @__PURE__ */ i(x, { sdk: o, activeFeature: p })
-  ] }) : /* @__PURE__ */ i(G, { sdk: o }) : /* @__PURE__ */ i("div", { children: "wrong sdk key..." });
+    /* @__PURE__ */ i(A, { sdk: o, activeFeature: n })
+  ] }) : /* @__PURE__ */ i(H, { sdk: o }) : /* @__PURE__ */ i("div", { children: "wrong sdk key..." });
 };
 export {
-  Yt as Demo
+  mi as Demo
 };

package/lib/lib/demo/styles.js

@@ -45,7 +45,7 @@ const e = o.div`
     cursor: default;
   }
 
-  &[data-enableSdkButton='false'] {
+  &[data-enable_sdk_button='false'] {
     opacity: 0.7;
   }
 `;