@streamlayer/react-ui 1.0.0 → 1.2.0

package/lib/app/app/Advertisement/index.d.ts

@@ -0,0 +1,10 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
+export declare const AdvertisementUIWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const StreamLayerSDKAdvertisement: React.FC<{
+    sdk: StreamLayerSDK;
+    event?: string;
+    sidebar?: 'left' | 'right';
+    banner?: 'top' | 'bottom';
+    layoutMode?: 'cover' | 'side-by-side';
+}>;

package/lib/app/app/Advertisement/index.js

@@ -0,0 +1,89 @@
+import { jsx as s } from "react/jsx-runtime";
+import { styled as c } from "@linaria/react";
+import { useStore as m } from "@nanostores/react";
+import { useAnalyticsListener as f } from "../../../hooks/analytics.js";
+import { useEffect as u, useRef as v, useMemo as d } from "react";
+import { eventBus as p } from "@streamlayer/sdk-web-interfaces";
+import { FeatureType as A } from "@streamlayer/sdk-web-types";
+import { useAppApp as y } from "../useApp.js";
+import { AdvertisementUI as g } from "../../../ui/advertisement/index.js";
+const h = /* @__PURE__ */ c("div")({
+  name: "AdvertisementUIWrap",
+  class: "aa6pjif",
+  propsAsIs: !1
+}), S = (e) => {
+  const t = e.target;
+  t instanceof HTMLAnchorElement && t.target === "_blank" && t.getAttribute("data-analytics") === "web-link" && p.emit("poll", {
+    action: "navigated",
+    payload: {}
+  });
+}, L = ({
+  gamification: e,
+  layoutMode: t,
+  sidebar: r,
+  banner: i
+}) => {
+  const o = v(null), a = m(e.advertisement.$list), n = d(
+    () => e.advertisement.getActiveAdvertisement(),
+    // fire getActiveNotification when notifications were updated
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [a]
+  );
+  return f(o, {
+    enabled: !!n,
+    event: "click",
+    listener: S
+  }), n ? /* @__PURE__ */ s(h, {
+    ref: o,
+    style: {
+      height: !i && !r ? "auto" : "100%"
+    },
+    children: /* @__PURE__ */ s(g, {
+      sidebar: r,
+      banner: i,
+      advertisement: n,
+      layoutMode: t
+    })
+  }) : null;
+}, K = ({
+  sdk: e,
+  sidebar: t,
+  banner: r,
+  event: i,
+  layoutMode: o
+}) => {
+  const {
+    deactivate: a
+  } = y(e);
+  u(() => {
+    i ? e.createEventSession(i) : a();
+  }, [i, a, e]);
+  const n = m(e.featuresList.getStore());
+  if (t && r)
+    return /* @__PURE__ */ s("div", {
+      style: {
+        color: "red"
+      },
+      children: "define either sidebar or banner, not both."
+    });
+  if (!t && !r && o)
+    return /* @__PURE__ */ s("div", {
+      style: {
+        color: "red"
+      },
+      children: "layoutMode property unavailable for the overlay mode."
+    });
+  if (!n)
+    return null;
+  const l = e.getFeature(A.GAMES);
+  return l ? /* @__PURE__ */ s(L, {
+    gamification: l,
+    sidebar: t,
+    banner: r,
+    layoutMode: o
+  }) : null;
+};
+export {
+  h as AdvertisementUIWrap,
+  K as StreamLayerSDKAdvertisement
+};

package/lib/{ui/app/masters → app/app}/Features/FeatureProvider.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { Features } from '@streamlayer/sdk-web-features';
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
 /** Here we check data, render loaders, load data and perform some side effects for the active feature */
 export declare const FeatureProvider: React.FC<{
     feature: Features;

package/lib/{ui/app → app}/app/Features/FeatureProvider.js

@@ -1,10 +1,10 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { styled as u } from "@linaria/react";
 import { useStore as i } from "@nanostores/react";
-import { FeatureStatus as p } from "@streamlayer/sdk-web-interfaces";
-const e = /* @__PURE__ */ u("div")({
+import { FeatureStatus as c } from "@streamlayer/sdk-web-interfaces";
+const o = /* @__PURE__ */ u("div")({
   name: "LoadingContainer",
-  class: "l1a1b29x",
+  class: "lclc0ej",
   propsAsIs: !1
 }), v = ({
   feature: n,
@@ -16,17 +16,17 @@ const e = /* @__PURE__ */ u("div")({
   const f = i(n.status), t = i(a.sdkStore.slStreamId);
   if (!d) {
     if (t != null && t.loading && !t.data)
-      return /* @__PURE__ */ o(e, {
+      return /* @__PURE__ */ e(o, {
         className: r,
         children: "Event is loading..."
       });
     if (!(t != null && t.data))
-      return /* @__PURE__ */ o(e, {
+      return /* @__PURE__ */ e(o, {
         className: r,
         children: "Event is forbidden..."
       });
-    if (f !== p.Ready)
-      return /* @__PURE__ */ o(e, {
+    if (f !== c.Ready)
+      return /* @__PURE__ */ e(o, {
         className: r,
         children: "Wait feature..."
       });

package/lib/{ui/app → app}/app/Features/Gamification/Friends.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Friends: React.FC<{
     deepLink?: string;
 }>;

package/lib/{ui/app → app}/app/Features/Gamification/Friends.js

@@ -1,9 +1,9 @@
 import { jsx as e } from "react/jsx-runtime";
 import { styled as n } from "@linaria/react";
-import { OnboardingInviteCard as t } from "../../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
+import { OnboardingInviteCard as t } from "../../../../ui/gamification/onboarding/slides/onboarding-invite-card/index.js";
 const r = /* @__PURE__ */ n("div")({
   name: "InviteFriendsContainer",
-  class: "i1d1hf8u",
+  class: "i1c9dygq",
   propsAsIs: !1
 }), a = ({
   deepLink: i

package/lib/{ui/app → app}/app/Features/Gamification/Leaderboard.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import type { Gamification } from '@streamlayer/feature-gamification';
-import type { ScrollNodeRef } from '../../..';
+import { ScrollNodeRef } from '../../..';
 import { ScrollStore } from '../../../useSdkScroll';
+import { Gamification } from '@streamlayer/feature-gamification';
+
 export declare const Leaderboard: React.FC<{
     gamification: Gamification;
     scrollNode: ScrollNodeRef;

package/lib/{ui/app → app}/app/Features/Gamification/Leaderboard.js

@@ -1,38 +1,38 @@
 import { jsx as r, jsxs as f, Fragment as L } from "react/jsx-runtime";
 import { styled as h } from "@linaria/react";
 import { useStore as i } from "@nanostores/react";
-import { useRef as k } from "react";
-import { useClipboardCopy as u } from "../../../useClipboardCopy.js";
-import { InviteLink as I } from "../../../../gamification/invite-link/index.js";
+import { useClipboardCopy as k } from "../../../useClipboardCopy.js";
+import { useRef as u } from "react";
+import { InviteLink as I } from "../../../../ui/gamification/invite-link/index.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
-import "../../../../icons/index.js";
-import "../../../../gamification/leaderboard/list-item/styles.js";
-import "../../../../../styles_z07sl8-l0sNRNKZ.js";
-import { LeaderboardStaticList as v } from "../../../../gamification/leaderboard/static.js";
+import "../../../../ui/icons/index.js";
+import "../../../../ui/gamification/leaderboard/list-item/styles.js";
+/* empty css                                    */
+import { LeaderboardStaticList as b } from "../../../../ui/gamification/leaderboard/static.js";
 import { Friends as y } from "./Friends.js";
 const C = /* @__PURE__ */ h("div")({
   name: "InviteLinkContainer",
-  class: "i9tvant",
+  class: "i1odbhm4",
   propsAsIs: !1
 }), q = ({
   gamification: e,
   scrollNode: s,
   scrollStore: p
 }) => {
-  const o = k(null), {
+  const t = u(null), {
     data: n,
     hasMore: d,
     loading: m,
     key: l
   } = i(e.leaderboardList.$store), {
-    data: t
-  } = i(e.deepLink.$store), [a, c] = u(o);
+    data: o
+  } = i(e.deepLink.$store), [a, c] = k(t);
   return !n.length && !m ? /* @__PURE__ */ r(y, {
-    deepLink: t
+    deepLink: o
   }) : /* @__PURE__ */ f(L, {
-    children: [/* @__PURE__ */ r(v, {
+    children: [/* @__PURE__ */ r(b, {
       items: n,
       scrollNode: s,
       scrollStore: p,
@@ -40,10 +40,10 @@ const C = /* @__PURE__ */ h("div")({
       hasMore: d,
       openItemDetail: e.openUser,
       currentUserId: e.currentUserId.get()
-    }, l), t && /* @__PURE__ */ r(C, {
-      ref: o,
+    }, l), o && /* @__PURE__ */ r(C, {
+      ref: t,
       children: /* @__PURE__ */ r(I, {
-        onClick: () => a(t),
+        onClick: () => a(o),
         title: "Invite Friends",
         description: "Challenge them now!"
       })

package/lib/{ui/app/masters → app/app}/Features/Gamification/Question.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { Gamification } from '@streamlayer/feature-gamification';
+
 export declare const Question: React.FC<{
     gamification: Gamification;
 }>;

package/lib/app/app/Features/Gamification/Question.js

@@ -0,0 +1,69 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { styled as c } from "@linaria/react";
+import { useStore as u } from "@nanostores/react";
+import { useAppContext as m } from "../../useAppContext.js";
+import { QuestionType as p } from "@streamlayer/sdk-web-types";
+import { VoteHeader as f } from "../../../../ui/gamification/detail/header/index.js";
+import { Sponsor as b } from "../../../../ui/gamification/detail/sponsor/index.js";
+import { Vote as y, VoteSkeleton as V } from "../../../../ui/gamification/vote/index.js";
+import { InsightDetails as d } from "../../../../ui/gamification/vote/insight-details/index.js";
+import { TwitterDetails as h } from "../../../../ui/gamification/vote/twitter-details/index.js";
+const x = /* @__PURE__ */ c("div")({
+  name: "QuestionContainer",
+  class: "q14ckf9e",
+  propsAsIs: !1
+}), S = ({
+  openedQuestion: t
+}) => {
+  var e, s;
+  const {
+    sdk: o
+  } = m();
+  return ((e = t == null ? void 0 : t.attributes) == null ? void 0 : e.attributes.case) === "insight" ? /* @__PURE__ */ r(d, {
+    ...t.attributes.attributes.value,
+    controlVideo: o == null ? void 0 : o.controlVideoPlayer
+  }) : ((s = t == null ? void 0 : t.attributes) == null ? void 0 : s.attributes.case) === "tweet" ? /* @__PURE__ */ r(h, {
+    ...t.attributes.attributes.value,
+    controlVideo: o == null ? void 0 : o.controlVideoPlayer
+  }) : null;
+}, g = ({
+  extendedQuestion: t,
+  vote: o,
+  close: e
+}) => {
+  const {
+    loading: s,
+    data: i
+  } = t;
+  return i ? /* @__PURE__ */ r(y, {
+    vote: o,
+    close: e,
+    openedQuestion: i,
+    isLoading: !!s
+  }) : /* @__PURE__ */ r(V, {});
+}, I = ({
+  gamification: t
+}) => {
+  var i, n, l;
+  const o = u(t.openedQuestion.$store), e = u(t.openedQuestion.$extendedStore);
+  if (!o)
+    return null;
+  const s = o.type;
+  return /* @__PURE__ */ a(x, {
+    children: [/* @__PURE__ */ r(f, {
+      close: t.closeQuestion,
+      type: ((i = o.attributes) == null ? void 0 : i.type) || p.UNSET
+    }), s === "question" && /* @__PURE__ */ r(g, {
+      vote: t.submitAnswer,
+      close: t.closeQuestion,
+      extendedQuestion: e
+    }), s !== "question" && /* @__PURE__ */ r(S, {
+      openedQuestion: o
+    }), /* @__PURE__ */ r(b, {
+      sponsorLogo: (l = (n = e.data) == null ? void 0 : n.sponsorship) == null ? void 0 : l.logo
+    })]
+  });
+};
+export {
+  I as Question
+};

package/lib/{ui/app → app}/app/Features/Gamification/QuestionsList.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import type { Gamification } from '@streamlayer/feature-gamification';
+import { Gamification } from '@streamlayer/feature-gamification';
+
 export declare const QuestionsList: React.FC<{
     store: ReturnType<Exclude<Gamification['feedList'], undefined>['getStore']>;
     openQuestion: (questionId: string) => void;

package/lib/{ui/app → app}/app/Features/Gamification/QuestionsList.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
 import { useStore as i } from "@nanostores/react";
 import { useAppContext as n } from "../../useAppContext.js";
-import { QuestionList as m } from "../../../../gamification/question/list/index.js";
+import { QuestionList as m } from "../../../../ui/gamification/question/list/index.js";
 const a = ({ store: t, openQuestion: r }) => {
   const { sdk: o } = n(), e = i(t);
   return /* @__PURE__ */ s(m, { openQuestion: r, questions: e.data, controlVideo: o == null ? void 0 : o.controlVideoPlayer });

package/lib/{ui/app/masters → app/app}/Features/Gamification/Tabs.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { type Gamification } from '@streamlayer/feature-gamification';
-import type { AppNodeRef, ScrollNodeRef } from '../../..';
+import { AppNodeRef, ScrollNodeRef } from '../../..';
 import { ResponsiveStore } from '../../../useSdkResponsive';
 import { ScrollStore } from '../../../useSdkScroll';
+import { Gamification } from '@streamlayer/feature-gamification';
+
 export declare const Tabs: React.FC<{
     appNode: AppNodeRef;
     gamification: Gamification;

package/lib/{ui/app → app}/app/Features/Gamification/Tabs.js

@@ -1,20 +1,20 @@
 import { jsxs as h, jsx as e, Fragment as x } from "react/jsx-runtime";
 import { useStore as u } from "@nanostores/react";
-import { useState as D, useTransition as T, useEffect as v } from "react";
-import { TabsContainer as C, TabsNavContainer as A, SDKWhiteContainer as I, UserSummaryContainer as P, SDKContentContainer as S, LeaderboardContainer as V } from "../../../styles.js";
-import { scrollIntoAppView as E } from "../../../useSdkScroll.js";
-import { ActivePages as a, Tabs as K } from "../../../../gamification/tabs/index.js";
+import { TabsContainer as D, TabsNavContainer as T, SDKWhiteContainer as v, UserSummaryContainer as C, SDKContentContainer as A, LeaderboardContainer as I } from "../../../styles.js";
+import { scrollIntoAppView as P } from "../../../useSdkScroll.js";
+import { useState as S, useTransition as V, useEffect as E } from "react";
+import { ActivePages as a, Tabs as K } from "../../../../ui/gamification/tabs/index.js";
 import { Leaderboard as L } from "./Leaderboard.js";
 import { QuestionsList as F } from "./QuestionsList.js";
 import { UserSummary as O } from "./UserSummary.js";
 const q = ({ gamification: s, className: f, scrollStore: t, scrollNode: l, appNode: c, style: b, responsiveStore: n }) => {
-  const { tabsShown: d } = u(t, { keys: ["tabsShown"] }), [i, w] = D(a.HOME), [, y] = T(), { sdkInDesktopView: m, screen: g } = u(n, { keys: ["sdkInDesktopView"] }), k = (r) => {
+  const { tabsShown: d } = u(t, { keys: ["tabsShown"] }), [i, w] = S(a.HOME), [, y] = V(), { sdkInDesktopView: m, screen: g } = u(n, { keys: ["sdkInDesktopView"] }), k = (r) => {
     y(() => {
       var p;
-      w(r), m === !1 && (((p = c.current) == null ? void 0 : p.getBoundingClientRect().y) || 0) < 0 && E(c, g.size, { behavior: "instant" });
+      w(r), m === !1 && (((p = c.current) == null ? void 0 : p.getBoundingClientRect().y) || 0) < 0 && P(c, g.size, { behavior: "instant" });
     });
   };
-  v(() => t.subscribe((r) => {
+  E(() => t.subscribe((r) => {
     if (r.scrollPosition === 0) {
       t.setKey("tabsShown", !0);
       return;
@@ -22,9 +22,9 @@ const q = ({ gamification: s, className: f, scrollStore: t, scrollNode: l, appNo
     n.get().sdkInDesktopView ? t.setKey("tabsShown", r.scrollDirection === "backward") : t.setKey("tabsShown", r.scrollDirection === "forward");
   }), [t, n]);
   let o = "0px";
-  return m ? o = d ? "0px" : "calc(8px - var(--header-height) - var(--header-offset))" : o = d ? "calc(var(--header-height) + var(--header-offset) - 2px)" : "0px", /* @__PURE__ */ h(C, { className: f, style: b, children: [
+  return m ? o = d ? "0px" : "calc(8px - var(--header-height) - var(--header-offset))" : o = d ? "calc(var(--header-height) + var(--header-offset) - 2px)" : "0px", /* @__PURE__ */ h(D, { className: f, style: b, children: [
     /* @__PURE__ */ e(
-      A,
+      T,
       {
         style: {
           top: o
@@ -33,10 +33,10 @@ const q = ({ gamification: s, className: f, scrollStore: t, scrollNode: l, appNo
       }
     ),
     i === a.HOME && /* @__PURE__ */ h(x, { children: [
-      /* @__PURE__ */ e(I, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(O, { userSummary: s.userSummary }) }) }),
-      /* @__PURE__ */ e(S, { style: { flex: 1 }, children: /* @__PURE__ */ e(F, { openQuestion: s.openQuestion, store: s.feedList.getStore() }) })
+      /* @__PURE__ */ e(v, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(O, { userSummary: s.userSummary }) }) }),
+      /* @__PURE__ */ e(A, { style: { flex: 1 }, children: /* @__PURE__ */ e(F, { openQuestion: s.openQuestion, store: s.feedList.getStore() }) })
     ] }),
-    i === a.LEADERBOARD && /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(L, { scrollStore: t, scrollNode: l, gamification: s }) })
+    i === a.LEADERBOARD && /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(L, { scrollStore: t, scrollNode: l, gamification: s }) })
   ] });
 };
 export {

package/lib/{ui/app → app}/app/Features/Gamification/UserSummary.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import type { Gamification } from '@streamlayer/feature-gamification';
+import { Gamification } from '@streamlayer/feature-gamification';
+
 export declare const UserSummary: React.FC<{
     userSummary: Exclude<Gamification['userSummary'], undefined>;
 }>;

package/lib/{ui/app/masters → app/app}/Features/Gamification/UserSummary.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { useState as i, useEffect as n } from "react";
-import { UserStatistics as a } from "../../../../gamification/user-statistics/index.js";
+import { UserStatistics as a } from "../../../../ui/gamification/user-statistics/index.js";
 const b = ({ userSummary: r }) => {
   var e;
   const [t, s] = i(void 0);

package/lib/{ui/app → app}/app/Features/Gamification/gamification-feature.d.ts

@@ -1,2 +1,3 @@
 import { GamificationOverlay } from './';
+
 export default GamificationOverlay;

package/lib/{ui/app → app}/app/Features/Gamification/index.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { type Gamification as GamificationClass } from '@streamlayer/feature-gamification';
-import type { AppNodeRef, ScrollNodeRef } from '../../..';
+import { AppNodeRef, ScrollNodeRef } from '../../..';
 import { ResponsiveStore } from '../../../useSdkResponsive';
 import { ScrollStore } from '../../../useSdkScroll';
+import { Gamification as GamificationClass } from '@streamlayer/feature-gamification';
+
 export declare const GamificationOverlay: React.FC<{
     gamification: GamificationClass;
     className?: string;

package/lib/{ui/app/masters → app/app}/Features/Gamification/index.js

@@ -1,23 +1,23 @@
 import { jsx as n, jsxs as f } from "react/jsx-runtime";
-import { styled as p } from "@linaria/react";
-import { useStore as a } from "@nanostores/react";
-import { useHideTransition as h } from "../../../../../hooks/showIn.js";
-import { SDKWhiteContainer as k } from "../../../styles.js";
-import { VoteHeader as C } from "../../../../gamification/detail/header/index.js";
-import { UserStatistics as S } from "../../../../gamification/user-statistics/index.js";
-import { ModalPortal as U } from "../../../../modal/index.js";
-import { ShowIn as I } from "../../../../show-in/index.js";
+import { styled as m } from "@linaria/react";
+import { useStore as l } from "@nanostores/react";
+import { SDKWhiteContainer as h } from "../../../styles.js";
+import { useHideTransition as C } from "../../../../hooks/showIn.js";
+import { VoteHeader as k } from "../../../../ui/gamification/detail/header/index.js";
+import { UserStatistics as S } from "../../../../ui/gamification/user-statistics/index.js";
+import { ModalPortal as U } from "../../../../ui/modal/index.js";
+import { ShowIn as I } from "../../../../ui/show-in/index.js";
 import { Question as v } from "./Question.js";
 import { Tabs as x } from "./Tabs.js";
-const y = () => I, m = /* @__PURE__ */ p(y())({
+const y = () => I, u = /* @__PURE__ */ m(y())({
   name: "OpenedContainer",
-  class: "o11khimm",
+  class: "ouvguos",
   propsAsIs: !0
-}), O = /* @__PURE__ */ p("div")({
+}), O = /* @__PURE__ */ m("div")({
   name: "UserContainer",
-  class: "u1u71vrh",
+  class: "u1eu4lbg",
   propsAsIs: !1
-}), w = ({
+}), b = ({
   correct: e,
   incorrect: r
 }) => {
@@ -43,42 +43,42 @@ const y = () => I, m = /* @__PURE__ */ p(y())({
   appNode: o,
   responsiveStore: i
 }) => {
-  const s = a(e.openedQuestion.$store), t = a(e.openedUser), {
-    sdkInDesktopView: u
-  } = a(i, {
+  const s = l(e.openedQuestion.$store), t = l(e.openedUser), {
+    sdkInDesktopView: p
+  } = l(i, {
     keys: ["sdkInDesktopView"]
   }), {
-    hiding: c,
-    onAnimationEnd: l
-  } = h();
+    hiding: a,
+    onAnimationEnd: c
+  } = C();
   if (!o.current || !s && !t)
     return null;
-  const d = s ? /* @__PURE__ */ n(m, {
+  const d = s ? /* @__PURE__ */ n(u, {
     className: r,
-    hiding: c,
-    onAnimationEnd: l,
+    hiding: a,
+    onAnimationEnd: c,
     children: /* @__PURE__ */ n(v, {
       gamification: e
     })
-  }) : t ? /* @__PURE__ */ n(m, {
+  }) : t ? /* @__PURE__ */ n(u, {
     className: r,
-    hiding: c,
-    onAnimationEnd: l,
+    hiding: a,
+    onAnimationEnd: c,
     children: /* @__PURE__ */ f(O, {
-      children: [/* @__PURE__ */ n(C, {
+      children: [/* @__PURE__ */ n(k, {
         label: "Friend's Rank",
         close: e.closeUser
-      }), /* @__PURE__ */ n(k, {
+      }), /* @__PURE__ */ n(h, {
         children: /* @__PURE__ */ n(S, {
           ...t,
-          successRate: w(t)
+          successRate: b(t)
         })
       })]
     })
   }) : null;
   return /* @__PURE__ */ n(U, {
     container: o,
-    useContainer: !u,
+    useContainer: !p,
     children: d
   });
 };

package/lib/{ui/app/masters → app/app}/Features/index.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import { Features } from '@streamlayer/sdk-web-features';
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import type { AppNodeRef, ScrollNodeRef } from '../..';
+import { AppNodeRef, ScrollNodeRef } from '../..';
 import { ResponsiveStore } from '../../useSdkResponsive';
 import { ScrollStore } from '../../useSdkScroll';
+import { Features } from '@streamlayer/sdk-web-features';
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
 /** render feature by type */
 export declare const ActiveFeature: React.FC<{
     sdk: StreamLayerSDK;

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

@@ -0,0 +1,6 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
+export declare const SDKNavigation: import('react').ForwardRefExoticComponent<{
+    sdk: StreamLayerSDK;
+    className?: string;
+} & import('react').RefAttributes<HTMLDivElement | null>>;

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

@@ -0,0 +1,64 @@
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
+import { styled as u } from "@linaria/react";
+import { useStore as n } from "@nanostores/react";
+import { forwardRef as y, useMemo as p } from "react";
+import { AvailableFeatures as S } from "@streamlayer/sdk-web-features";
+import { FeatureType as g } from "@streamlayer/sdk-web-types";
+import { SvgIcon as h } from "../../../ui/icons/index.js";
+import { Button as s } from "../../../ui/navigation/button/index.js";
+import { Navigation as C, NavigationItems as F } from "../../../ui/navigation/masters.js";
+const x = () => h, A = /* @__PURE__ */ u(x())({
+  name: "ButtonIcon",
+  class: "b11wpe79",
+  propsAsIs: !0
+}), K = y(({
+  sdk: e,
+  className: l
+}, m) => {
+  const r = n(e.sdkStore.organizationSettings), t = n(e.sdkStore.streamSettings), a = n(e.getActiveFeature()), c = p(() => {
+    const o = (t == null ? void 0 : t.data) || (r == null ? void 0 : r.data);
+    return o != null && o.overlays ? o.overlays : [];
+  }, [r, t]), d = p(() => [...c.filter(({
+    enableSdkButton: o
+  }) => o).map((o) => ({
+    id: o.type,
+    onClick: () => e.openFeature(o.type),
+    disabled: !(o.type in S),
+    label: o.name,
+    icon: /* @__PURE__ */ i("img", {
+      src: o.icon,
+      alt: ""
+    }),
+    /** multiplied by 10 to add the ability to insert custom buttons between our buttons */
+    position: o.position * 10
+  }))].sort((o, v) => o.position - v.position), [c, e]);
+  return /* @__PURE__ */ f(C, {
+    className: l,
+    children: [/* @__PURE__ */ i(F, {
+      children: [/* @__PURE__ */ i(s, {
+        id: "Channels",
+        onClick: () => e.closeFeature(),
+        label: "Channels",
+        active: a === 0
+      }, "Channels"), ...d.map((o) => o.id === g.GAMES ? /* @__PURE__ */ i(s, {
+        ...o,
+        active: o.id === a,
+        label: "StreamLayer +",
+        id: "featuredGroups",
+        icon: /* @__PURE__ */ i(A, {
+          name: "icon-btn-feature-groups",
+          "data-selected": o.id === a
+        })
+      }, o.id) : /* @__PURE__ */ i(s, {
+        ...o,
+        icon: void 0,
+        active: o.id === a
+      }, o.id))]
+    }), /* @__PURE__ */ i("div", {
+      ref: m
+    })]
+  });
+});
+export {
+  K as SDKNavigation
+};

package/lib/{ui/app → app}/app/Notifications/Onboarding/Notification/index.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import type { Notification } from '@streamlayer/sdk-web-notifications';
+import { Notification } from '@streamlayer/sdk-web-notifications';
 import { GameSettings } from '@streamlayer/sdk-web-types';
+
 export declare const Onboarding: React.FC<{
     close: Notification['close'];
     action: Notification['action'];