@streamlayer/react-ui 0.27.2 → 0.28.0

package/lib/ui/app/index.js

@@ -0,0 +1,88 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { ActiveFeature as e } from "./Features/index.js";
+import { SDKNavigation as a } from "./Navigation/index.js";
+import { SDKNotifications as c } from "./Notifications/index.js";
+import { useSdkFeature as n } from "./useSdkFeature.js";
+import { SDKContainer as f } from "./styles.js";
+import "@streamlayer/sdk-web-types";
+import "react";
+import "./Features/Gamification/index.js";
+import "@nanostores/react";
+import "./Features/Gamification/Tabs.js";
+import "../gamification/navigation/index.js";
+import "../gamification/navigation/styles.js";
+import "@linaria/react";
+import "./Features/Gamification/UserSummary.js";
+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 "./Features/Gamification/QuestionsList.js";
+import "../gamification/question-list/index.js";
+import "../gamification/question/index.js";
+import "../../icon-chevron-138a557c.js";
+import "../gamification/question/styles.js";
+import "../gamification/question-list/styles.js";
+import "./Features/Gamification/Leaderboard.js";
+import "../gamification/leaderboard-item-detail/index.js";
+import "../gamification/common-header/index.js";
+import "../../icon-exit-6a55bb8f.js";
+import "../gamification/common-header/styles.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 "./Features/Gamification/Question.js";
+import "../gamification/vote/index.js";
+import "../../index-7045fbb2.js";
+import "../gamification/vote/components/voting-option/styles.js";
+import "../gamification/vote/styles.js";
+import "../gamification/vote/components/voting-header/index.js";
+import "../gamification/vote/components/voting-header/components/timer/index.js";
+import "react-countdown-circle-timer";
+import "../theme/constants.js";
+import "../gamification/vote/components/voting-header/components/timer/styles.js";
+import "../gamification/vote/components/voting-header/styles.js";
+import "../gamification/vote/components/voting-header/components/points/index.js";
+import "../gamification/vote/components/voting-header/components/points/styles.js";
+import "../../fedex-a8dcc7b2.js";
+import "./Features/Highlights/index.js";
+import "../demo/components/Insight.js";
+import "../gamification/detailed-insight/index.js";
+import "../gamification/detailed-insight/styles.js";
+import "../demo/components/Insights.js";
+import "../gamification/insight-list/index.js";
+import "../gamification/insight/index.js";
+import "../gamification/insight/styles.js";
+import "../gamification/insight-list/styles.js";
+import "./Features/FeatureProvider.js";
+import "@streamlayer/sdk-web-interfaces";
+import "@streamlayer/sdk-web-features";
+import "../navigation/index.js";
+import "../navigation/styles.js";
+import "../notifications/index.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 "../notifications/notification/question-inapp/index.js";
+import "../notifications/notification/question-inapp/styles.js";
+import "../notifications/notification/styles.js";
+import "../notifications/styles.js";
+const Et = ({ sdk: t, overlays: o = {} }) => {
+  const [i, m] = n(t);
+  return /* @__PURE__ */ p(f, { className: "StreamLayerSDK", children: [
+    /* @__PURE__ */ r(a, { sdk: t, customOverlays: o, activeButton: i }),
+    /* @__PURE__ */ r(c, { sdk: t }),
+    /* @__PURE__ */ r(e, { feature: m, sdk: t })
+  ] });
+};
+export {
+  Et as App
+};

package/lib/ui/app/styles.js

@@ -0,0 +1,8 @@
+import { styled as o } from "@linaria/react";
+const r = o.div`
+  height: 100%;
+  background: #fff;
+`;
+export {
+  r as SDKContainer
+};

package/lib/ui/app/useSdkFeature.js

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

package/lib/ui/demo/DemoPoints.js

@@ -1,23 +1,23 @@
-import { jsx as e } from "react/jsx-runtime";
-import { FeatureType as n } from "@streamlayer/sdk-web-types";
-import { useStore as s } from "@nanostores/react";
-import { styled as p } from "@linaria/react";
-import { Points as u } from "../gamification/points/index.js";
+import { jsx as r } from "react/jsx-runtime";
+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 "../gamification/points/styles.js";
 import "../icons/index.js";
 import "react";
-const a = p.div`
+const d = u.div`
   position: fixed;
   top: 0;
   right: 0;
-`, g = ({ sdk: m }) => {
-  var o, i;
-  const t = m.getFeature(n.GAMES);
-  if (!(t != null && t.userSummary))
-    return null;
-  const r = s(t.userSummary.getStore());
-  return ((i = (o = r.data) == null ? void 0 : o.summary) == null ? void 0 : i.points) === void 0 ? null : /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(u, { points: r.data.summary.points }) });
+`, f = ({ store: o }) => {
+  var e, m, n, i;
+  const t = p(o);
+  return ((m = (e = t.data) == null ? void 0 : e.summary) == null ? void 0 : m.points) === void 0 ? null : /* @__PURE__ */ r(d, { children: ((i = (n = t.data) == null ? void 0 : n.summary) == null ? void 0 : i.points) && /* @__PURE__ */ r(a, { points: t.data.summary.points }) });
+}, v = ({ sdk: o }) => {
+  const t = o.getFeature(s.GAMES);
+  return t != null && t.userSummary ? /* @__PURE__ */ r(f, { store: t.userSummary.getStore() }) : null;
 };
 export {
-  g as DemoPoints
+  v as DemoPoints
 };

package/lib/ui/demo/Gamification.js

@@ -41,6 +41,7 @@ import "../gamification/vote/components/voting-header/components/timer/styles.js
 import "../gamification/vote/components/voting-header/styles.js";
 import "../gamification/vote/components/voting-header/components/points/index.js";
 import "../gamification/vote/components/voting-header/components/points/styles.js";
+import "../../fedex-a8dcc7b2.js";
 import "../gamification/onboarding/styles.js";
 import "../gamification/onboarding/components/onboarding-slides/onboarding-instructions/index.js";
 import "../gamification/onboarding/components/onboarding-slides/onboarding-instructions/styles.js";
@@ -57,7 +58,7 @@ 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 = ({
+const mr = ({
   gamification: t,
   sdk: u
 }) => {
@@ -109,5 +110,5 @@ const pr = ({
   ] });
 };
 export {
-  pr as GamificationComponent
+  mr as GamificationComponent
 };

package/lib/ui/demo/Highlights.js

@@ -37,6 +37,7 @@ import "../gamification/vote/components/voting-header/components/timer/styles.js
 import "../gamification/vote/components/voting-header/styles.js";
 import "../gamification/vote/components/voting-header/components/points/index.js";
 import "../gamification/vote/components/voting-header/components/points/styles.js";
+import "../../fedex-a8dcc7b2.js";
 import "../gamification/insight-list/index.js";
 import "../gamification/insight/index.js";
 import "../gamification/insight/styles.js";
@@ -44,7 +45,7 @@ import "../gamification/insight-list/styles.js";
 import "../gamification/detailed-insight/index.js";
 import "../gamification/common-header/index.js";
 import "../gamification/detailed-insight/styles.js";
-const mt = ({ highlights: i, sdk: e }) => {
+const pt = ({ 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() }),
@@ -59,5 +60,5 @@ const mt = ({ highlights: i, sdk: e }) => {
   ] }) : /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
 };
 export {
-  mt as HighlightsComponent
+  pt as HighlightsComponent
 };

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

@@ -1,8 +1,9 @@
-import { jsx as D, jsxs as t } from "react/jsx-runtime";
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
 import { styled as y } from "@linaria/react";
-import { useState as r, useCallback as u, useMemo as i } from "react";
-import { Vote as L } from "../../gamification/vote/index.js";
-import { VotingHeader as E } from "../../gamification/vote/components/voting-header/index.js";
+import { useState as d, useCallback as x, useMemo as c } from "react";
+import { Vote as g } from "../../gamification/vote/index.js";
+import { VotingHeader as h } from "../../gamification/vote/components/voting-header/index.js";
+import { i as b } from "../../../fedex-a8dcc7b2.js";
 import "@streamlayer/sdk-web-types";
 import "../../../index-7045fbb2.js";
 import "../../gamification/vote/components/voting-option/styles.js";
@@ -15,7 +16,7 @@ import "../../gamification/vote/components/voting-header/components/timer/styles
 import "../../gamification/vote/components/voting-header/styles.js";
 import "../../gamification/vote/components/voting-header/components/points/index.js";
 import "../../gamification/vote/components/voting-header/components/points/styles.js";
-const O = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjgiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCA2OCAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlZlY3RvciI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNTYuNjE1NSA3LjQ0MTQ2SDUwLjcwNjZMNTYuMzA3MiAxMy44NjE1TDUwLjcwNjYgMjAuMjgwNUg1Ni40MzU3TDU5LjE1ODcgMTcuMTM3TDYxLjkwNjggMjAuMjgwNUg2Ny44NEw2Mi4xOSAxMy44MzQ4TDY3Ljc2MzYgNy40NDE0Nkg2Mi4wNjA2TDU5LjM4OTcgMTAuNTYwMkw1Ni42MTU1IDcuNDQxNDZaTTYyLjI3MjEgNy45MTY1OUw1OS4zOTY0IDExLjI3NDdMNTYuNDA5MiA3LjkxNjU5SDUxLjc0NDZMNTYuOTMwNyAxMy44NjE1TDUxLjc0NDcgMTkuODA1NEg1Ni4yMjU3TDU5LjE1NzEgMTYuNDIxM0w2Mi4xMTU2IDE5LjgwNTRINjYuNzk4N0w2MS41NjYgMTMuODM1N0w2Ni43MjYxIDcuOTE2NTlINjIuMjcyMVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDQuMzYzNSA3LjQ0MTQ2VjQuNTY0MDZINTAuNzA2NlYwLjA1NTk5OThIMzkuNzAyVjIwLjI4MDVINTAuNzA2NlYxNS43NjAxSDQ0LjM2MzVWMTEuNzc5NEg1MC43MDY2VjcuNDQxNDZINDQuMzYzNVpNNTAuMjQwOCA3LjkxNjU5SDQzLjg5NzhWNC4wODg5M0g1MC4yNDA4VjAuNTMxMTMySDQwLjE2NzhWMTkuODA1NEg1MC4yNDA4VjE2LjIzNTJINDMuODk3OFYxMS4zMDQzSDUwLjI0MDhWNy45MTY1OVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zNS4wNiAwLjA1NTk5OThWOC4zMzI4MUgzNS4wMDg3QzMzLjk4MDMgNy4xMjc4NyAzMi42OTY2IDYuNzA4ODEgMzEuMjA3IDYuNzA4ODFDMjguMTU1MiA2LjcwODgxIDI1Ljg1NjEgOC44MjYgMjUuMDQ5MyAxMS42MjM2QzI0LjEyOCA4LjU0MDkyIDIxLjc1NDQgNi42NTA4NCAxOC4yMzQ5IDYuNjUwODRDMTUuMzc2OSA2LjY1MDg0IDEzLjExOTcgNy45NTkzNiAxMS45NDIyIDEwLjA5MThWNy40NDE0Nkg2LjAzNDE2VjQuNTY0MDZIMTIuNDgxNVYwLjA1NTk5OThIMC43NjgwMDVWMjAuMjgwNUg2LjAzNDE2VjExLjc3OTRIMTEuMjgzNkMxMS4xMjcgMTIuNDAzNyAxMS4wNDMyIDEzLjA3MjcgMTEuMDQzMiAxMy43Nzg4QzExLjA0MzIgMTcuOTk3IDE0LjIwMzEgMjAuOTU4IDE4LjIzNDkgMjAuOTU4QzIxLjYyNTggMjAuOTU4IDIzLjg2MDcgMTkuMzM0IDI1LjA0MTkgMTYuMzc0SDIwLjUyODRDMTkuOTE4MyAxNy4yNjQ0IDE5LjQ1NTMgMTcuNTI3NiAxOC4yMzQ5IDE3LjUyNzZDMTYuODE5OSAxNy41Mjc2IDE1LjU5OTUgMTYuMjY4NSAxNS41OTk1IDE0Ljc3NTZIMjQuNzg5NEMyNS4xODgxIDE4LjEyNjIgMjcuNzQ3MiAyMS4wMTYgMzEuMjU4MiAyMS4wMTZDMzIuNzczIDIxLjAxNiAzNC4xNjAxIDIwLjI1NTggMzUuMDA3OCAxOC45NzI5SDM1LjA1OVYyMC4yODI0SDM5LjcwMUwzOS43MDIgMC4wNTU5OTk4SDM1LjA2Wk0xNS43NDY3IDExLjgzOTNDMTYuMDM5MiAxMC41NTQ1IDE3LjAxNjQgOS43MTU0NSAxOC4yMzU4IDkuNzE1NDVDMTkuNTc4MiA5LjcxNTQ1IDIwLjUwNTEgMTAuNTI4OSAyMC43NDkyIDExLjgzOTNDMjAuODUxNyAxMS44MzkzIDE1Ljc0NjcgMTEuODM5MyAxNS43NDY3IDExLjgzOTNaTTMyLjI0MiAxNy4yMDE2QzMwLjUzMDcgMTcuMjAxNiAyOS40NjY4IDE1LjU3NDggMjkuNDY2OCAxMy44NzY3QzI5LjQ2NjggMTIuMDYxNyAzMC4zOTE5IDEwLjMxNiAzMi4yNDIgMTAuMzE2QzM0LjE2MDEgMTAuMzE2IDM0LjkyNCAxMi4wNjE3IDM0LjkyNCAxMy44NzY3QzM0LjkyNCAxNS41OTc2IDM0LjExNDQgMTcuMjAxNiAzMi4yNDIgMTcuMjAxNloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9zdmc+Cg==", w = y.div`
+const k = y.div`
   position: absolute;
   top: 0;
   background: var(--color-transparent-item);
@@ -42,60 +43,60 @@ const O = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjgiIGhlaWdodD0iMjIiIHZpZXd
       transform: translateX(0);
     }
   }
-`, Q = ({ openedQuestion: M, closeQuestion: A, vote: g }) => {
-  var I;
-  const [z, T] = r(!1), c = u(
-    (j) => {
-      T(j);
+`, F = ({ openedQuestion: t, closeQuestion: a, vote: e }) => {
+  var s;
+  const [l, m] = d(!1), p = x(
+    (i) => {
+      m(i);
     },
-    [T]
-  ), N = i(
-    () => M == null ? void 0 : M.answers.find((j) => j.youVoted === !0),
-    [M]
-  ), x = i(
-    () => !!(M != null && M.answers.find((j) => j.correct === !0)),
-    [M]
+    [m]
+  ), r = c(
+    () => t == null ? void 0 : t.answers.find((i) => i.youVoted === !0),
+    [t]
+  ), f = c(
+    () => !!(t != null && t.answers.find((i) => i.correct === !0)),
+    [t]
   );
-  return M ? /* @__PURE__ */ D(w, { children: /* @__PURE__ */ t("div", { children: [
-    /* @__PURE__ */ D(
-      E,
+  return t ? /* @__PURE__ */ o(k, { children: /* @__PURE__ */ n("div", { children: [
+    /* @__PURE__ */ o(
+      h,
       {
-        points: (N == null ? void 0 : N.points) || 0,
-        questionAnswered: !!N,
-        questionAnsweredCorrectly: N == null ? void 0 : N.correct,
-        logo: O,
-        closeQuestion: A,
-        setTimeToExpire: c,
-        questionType: M.type
+        points: (r == null ? void 0 : r.points) || 0,
+        questionAnswered: !!r,
+        questionAnsweredCorrectly: r == null ? void 0 : r.correct,
+        logo: b,
+        closeQuestion: a,
+        setTimeToExpire: p,
+        questionType: t.type
       }
     ),
-    /* @__PURE__ */ D("div", { children: /* @__PURE__ */ D(
-      L,
+    /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+      g,
       {
-        title: M.subject,
-        feedbackMessages: (I = M.options) == null ? void 0 : I.options.value,
-        questionType: M.type,
-        questionId: M.id,
-        questionAnswered: !!N,
-        questionAnsweredCorrectly: N == null ? void 0 : N.correct,
-        options: M.answers.map((j) => ({
-          id: j.id,
-          title: j.text,
-          icon: j.icon,
-          type: M.type,
-          correct: j.correct,
-          percentage: j.percentage,
-          answered: j.youVoted,
-          disabled: !!N || M.marketClosed || z,
-          questionAnswered: !!N,
-          hasCorrectAnswer: x,
-          points: j.points,
-          onVote: g
+        title: t.subject,
+        feedbackMessages: (s = t.options) == null ? void 0 : s.options.value,
+        questionType: t.type,
+        questionId: t.id,
+        questionAnswered: !!r,
+        questionAnsweredCorrectly: r == null ? void 0 : r.correct,
+        options: t.answers.map((i) => ({
+          id: i.id,
+          title: i.text,
+          icon: i.icon,
+          type: t.type,
+          correct: i.correct,
+          percentage: i.percentage,
+          answered: i.youVoted,
+          disabled: !!r || t.marketClosed || l,
+          questionAnswered: !!r,
+          hasCorrectAnswer: f,
+          points: i.points,
+          onVote: e
         }))
       }
     ) })
   ] }) }) : null;
 };
 export {
-  Q as Question
+  F as Question
 };

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

@@ -1,10 +1,10 @@
-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 { UserSummary as tr } from "./UserSummary.js";
+import { QuestionsList as pr } from "./QuestionsList.js";
+import { Question as er } from "./Question.js";
+import { Onboarding as fr } from "../../gamification/onboarding/index.js";
+import { Insights as nr } from "./Insights.js";
+import { Insight as dr } from "./Insight.js";
+import { Leaderboard as ur } from "./Leaderboard.js";
 import "react/jsx-runtime";
 import "@nanostores/react";
 import "../../gamification/user-statistics/index.js";
@@ -35,6 +35,7 @@ import "../../gamification/vote/components/voting-header/components/timer/styles
 import "../../gamification/vote/components/voting-header/styles.js";
 import "../../gamification/vote/components/voting-header/components/points/index.js";
 import "../../gamification/vote/components/voting-header/components/points/styles.js";
+import "../../../fedex-a8dcc7b2.js";
 import "../../gamification/onboarding/styles.js";
 import "../../gamification/onboarding/components/onboarding-slides/onboarding-instructions/index.js";
 import "../../gamification/onboarding/components/onboarding-slides/onboarding-instructions/styles.js";
@@ -59,11 +60,11 @@ import "../../gamification/leaderboard-item/index.js";
 import "../../gamification/leaderboard-item/styles.js";
 import "../../gamification/leaderboard-list/styles.js";
 export {
-  ar as Insight,
-  xr as Insights,
-  gr as Leaderboard,
-  sr as Onboarding,
-  ir as Question,
-  mr as QuestionsList,
-  or as UserSummary
+  dr as Insight,
+  nr as Insights,
+  ur as Leaderboard,
+  fr as Onboarding,
+  er as Question,
+  pr as QuestionsList,
+  tr as UserSummary
 };

package/lib/ui/demo/index.js

@@ -48,6 +48,7 @@ import "../gamification/vote/components/voting-header/components/timer/styles.js
 import "../gamification/vote/components/voting-header/styles.js";
 import "../gamification/vote/components/voting-header/components/points/index.js";
 import "../gamification/vote/components/voting-header/components/points/styles.js";
+import "../../fedex-a8dcc7b2.js";
 import "../gamification/onboarding/index.js";
 import "../gamification/onboarding/styles.js";
 import "../gamification/onboarding/components/onboarding-slides/onboarding-instructions/index.js";
@@ -125,7 +126,7 @@ const A = ({ activeFeature: r, sdk: o }) => {
     ] }),
     d
   ] });
-}, mi = ({ sdk: r }) => {
+}, pi = ({ sdk: r }) => {
   const o = c(r.organizationStore()), e = c(r.getUserStore()), n = c(r.getActiveFeature());
   return o.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : o.data ? e.loading ? /* @__PURE__ */ i("div", { children: "authentication..." }) : e.data ? /* @__PURE__ */ f(v, { children: [
     /* @__PURE__ */ i(F, { notificationsStore: r.getNotificationsStore() }),
@@ -133,5 +134,5 @@ const A = ({ activeFeature: r, sdk: o }) => {
   ] }) : /* @__PURE__ */ i(H, { sdk: r }) : /* @__PURE__ */ i("div", { children: "wrong sdk key..." });
 };
 export {
-  mi as Demo
+  pi as Demo
 };

package/lib/ui/navigation/index.js

@@ -0,0 +1,13 @@
+import { jsx as l, jsxs as a } from "react/jsx-runtime";
+import { Buttons as c, Button as d } from "./styles.js";
+import "@linaria/react";
+const s = ({ button: i, active: e }) => /* @__PURE__ */ a(d, { onClick: i.onClick, disabled: i.disabled, "data-selected": e, children: [
+  i.icon && /* @__PURE__ */ l("img", { src: i.icon, alt: i.label || i.icon }),
+  e && i.label && /* @__PURE__ */ l("span", { children: i.label })
+] }), p = ({
+  buttons: i,
+  activeButton: e
+}) => /* @__PURE__ */ l(c, { children: i.map((r) => /* @__PURE__ */ l(s, { button: r, active: r.id === e }, r.id)) });
+export {
+  p as Navigation
+};

package/lib/ui/navigation/styles.js

@@ -0,0 +1,46 @@
+import { styled as o } from "@linaria/react";
+const e = o.div`
+  display: flex;
+  margin-bottom: 10px;
+`, r = o.button`
+  background: rgb(29, 123, 255);
+  border: none;
+  color: #fff;
+  padding: 5px 6px;
+  border-radius: 3px;
+  cursor: pointer;
+  margin-right: 5px;
+  transition: all 0.3s ease-in;
+
+  & > img {
+    max-width: 10px;
+    max-height: 10px;
+    margin-right: 5px;
+  }
+
+  &:enabled:hover {
+    box-shadow: inset 0 0 0 2em rgb(2, 88, 208);
+  }
+
+  &[data-selected='true'] {
+    box-shadow: inset 0 0 0 2em rgb(0, 60, 145);
+
+    &:enabled:hover {
+      box-shadow: inset 0 0 0 2em rgb(0, 60, 145);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    background-color: gray;
+    cursor: default;
+  }
+
+  &[data-enable_sdk_button='false'] {
+    opacity: 0.7;
+  }
+`;
+export {
+  r as Button,
+  e as Buttons
+};

package/lib/utils/components/developer.js

@@ -1,32 +1,38 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { useMemo as c, useState as x } from "react";
-import { styled as n } from "@linaria/react";
-import { EventInput as g } from "./eventInput.js";
-import { BypassLogin as f } from "./bypassLogin.js";
-import { SdkKey as h } from "./sdkKey.js";
-import { EnvToggle as u } from "./envToggle.js";
-import { DeveloperStorage as b } from "../storage.js";
+import { useMemo as x, useState as g } from "react";
+import { styled as i } from "@linaria/react";
+import { DeveloperStorage as h } from "../storage.js";
+import { EventInput as u } from "./eventInput.js";
+import { BypassLogin as b } from "./bypassLogin.js";
+import { SdkKey as v } from "./sdkKey.js";
+import { EnvToggle as y } from "./envToggle.js";
+import "@streamlayer/sdk-web-storage";
 import "@streamlayer/sdk-web-core";
 import "@nanostores/react";
 import "./styles.js";
-import "@streamlayer/sdk-web-storage";
-const v = n.div`
+const w = i.div`
   position: fixed;
   bottom: 0;
   right: 0;
   max-width: 600px;
-`, y = n.div`
+`, D = i.div`
   flex-direction: column;
   gap: 10px;
   margin-right: 60px;
   display: flex;
-  transition: all .3s ease;
+  animation: show-dev-items 0.3s ease-in-out;
   transform-origin: bottom right;
 
-  &[data-opened='false'] {
-    transform: scale(0) translateY(-100%);
+  @keyframes show-dev-items {
+    from {
+      transform: scale(0);
+    }
+
+    to {
+      transform: scale(1);
+    }
   }
-`, w = n.button`
+`, j = i.button`
   position: absolute;
   z-index: 10000;
   bottom: 10px;
@@ -65,22 +71,22 @@ const v = n.div`
     width: 100%;
     height: 4px;
   }
-`, O = ({ sdk: t, sdkKey: s, setSdkKey: i, env: d, setEnv: p }) => {
-  const r = c(() => new b(), []), [a, m] = x(!1);
-  return /* @__PURE__ */ e(v, { children: [
-    /* @__PURE__ */ e(w, { "data-opened": a.toString(), onClick: () => m((l) => !l), children: [
+`, q = ({ sdk: t, sdkKey: s, setSdkKey: n, env: m, setEnv: p, event: d, setEvent: l }) => {
+  const r = x(() => new h(), []), [a, c] = g(!1);
+  return /* @__PURE__ */ e(w, { children: [
+    /* @__PURE__ */ e(j, { "data-opened": a.toString(), onClick: () => c((f) => !f), children: [
       /* @__PURE__ */ o("span", {}),
       /* @__PURE__ */ o("span", {}),
       /* @__PURE__ */ o("span", {})
     ] }),
-    /* @__PURE__ */ e(y, { "data-opened": a.toString(), children: [
-      p && /* @__PURE__ */ o(u, { env: d, setEnv: p, storage: r }),
-      i && /* @__PURE__ */ o(h, { sdkKey: s, setSdkKey: i, storage: r }),
-      t && /* @__PURE__ */ o(g, { sdk: t, storage: r }),
-      t && /* @__PURE__ */ o(f, { sdk: t, storage: r })
+    a && /* @__PURE__ */ e(D, { children: [
+      p && /* @__PURE__ */ o(y, { env: m, setEnv: p, storage: r }),
+      n && /* @__PURE__ */ o(v, { sdkKey: s, setSdkKey: n, storage: r }),
+      t && /* @__PURE__ */ o(u, { sdk: t, storage: r, event: d, setEvent: l }),
+      t && /* @__PURE__ */ o(b, { sdk: t, storage: r })
     ] })
   ] });
 };
 export {
-  O as Developer
+  q as Developer
 };

package/lib/utils/components/envToggle.js

@@ -38,13 +38,13 @@ const d = o.div`
     width: 1rem;
     border-radius: 1em;
     background: gray;
-    box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.3);
+    box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.3);
     transition: all 300ms;
   }
-`, m = ({ env: r, setEnv: i, storage: s }) => /* @__PURE__ */ t(d, { children: [
+`, u = ({ env: r, setEnv: i, storage: s }) => /* @__PURE__ */ t(d, { children: [
   /* @__PURE__ */ e("label", { htmlFor: "slEnvCheckbox", children: "Production:" }),
   /* @__PURE__ */ t(a, { children: [
-    /* @__PURE__ */ e("input", { id: "slEnvCheckbox", type: "checkbox", checked: r === "production", onChange: () => {
+    /* @__PURE__ */ e("input", { id: "slEnvCheckbox", type: "checkbox", checked: r === "production", onChange: (p) => {
       i((c) => {
         const n = c === "production" ? "development" : "production";
         return s.setEnv(n), n;
@@ -54,5 +54,5 @@ const d = o.div`
   ] })
 ] });
 export {
-  m as EnvToggle
+  u as EnvToggle
 };

package/lib/utils/components/eventInput.js

@@ -1,22 +1,22 @@
 import { jsx as t, jsxs as c } from "react/jsx-runtime";
 import "@streamlayer/sdk-web-core";
-import { useState as p, useEffect as d } from "react";
+import { useEffect as d } from "react";
 import { useStore as m } from "@nanostores/react";
 import { InputField as u } from "./styles.js";
 import "@linaria/react";
-const I = ({ sdk: n, storage: s }) => {
-  var i;
-  const { organizationSettings: r } = m(n.sdkStore), v = !((i = r == null ? void 0 : r.data) != null && i.provider), [e, l] = p(s.getEvent() || ""), o = () => {
-    n.createEventSession(e), s.setEvent(e);
+const y = ({ sdk: o, storage: i, event: e, setEvent: l }) => {
+  var n;
+  const { organizationSettings: r } = m(o.sdkStore), a = !((n = r == null ? void 0 : r.data) != null && n.provider), s = () => {
+    o.createEventSession(e), i.setEvent(e);
   };
   return d(() => {
-    e && o();
+    e && s();
   }, []), /* @__PURE__ */ t("div", { children: /* @__PURE__ */ c(u, { children: [
-    /* @__PURE__ */ t("label", { children: v ? "Use StreamLayer event ids" : "Use your provider event ids" }),
-    /* @__PURE__ */ t("input", { type: "text", value: e, onChange: (a) => l(a.target.value) }),
-    /* @__PURE__ */ t("button", { onClick: o, children: "set" })
+    /* @__PURE__ */ t("label", { children: a ? "Use StreamLayer event ids" : "Use your provider event ids" }),
+    /* @__PURE__ */ t("input", { type: "text", value: e, onChange: (p) => l(p.target.value) }),
+    /* @__PURE__ */ t("button", { onClick: s, children: "set" })
   ] }) });
 };
 export {
-  I as EventInput
+  y as EventInput
 };

package/lib/utils/components/sdkKey.js

@@ -10,9 +10,16 @@ const b = ({
   const [e, o] = u(r);
   return /* @__PURE__ */ t("div", { children: /* @__PURE__ */ l(m, { children: [
     /* @__PURE__ */ t("label", { children: "SDK Key" }),
-    /* @__PURE__ */ t("input", { type: "text", value: e, onChange: (s) => {
-      o(s.target.value);
-    } }),
+    /* @__PURE__ */ t(
+      "input",
+      {
+        type: "text",
+        value: e,
+        onChange: (s) => {
+          o(s.target.value);
+        }
+      }
+    ),
     /* @__PURE__ */ t("button", { onClick: () => {
       n.setSdkKey(e), i(e);
     }, children: "set" })