@streamlayer/react-ui 0.100.5 → 1.1.0

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

@@ -0,0 +1,8 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
+export declare const StreamLayerSDKAdvertisement: React.FC<{
+    sdk: StreamLayerSDK;
+    event?: string;
+    sidebar?: 'left' | 'right';
+    banner?: 'top' | 'bottom';
+}>;

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

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

package/lib/{ui → 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/Features/FeatureProvider.js

@@ -1,12 +1,12 @@
-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: "l1p1hxob",
+  class: "lclc0ej",
   propsAsIs: !1
-}), h = ({
+}), v = ({
   feature: n,
   sdk: a,
   children: s,
@@ -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..."
       });
@@ -34,5 +34,5 @@ const e = /* @__PURE__ */ u("div")({
   return s;
 };
 export {
-  h as FeatureProvider
+  v as FeatureProvider
 };

package/lib/{ui → 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/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: "i1xmyxez",
+  class: "i1c9dygq",
   propsAsIs: !1
 }), a = ({
   deepLink: i

package/lib/app/app/Features/Gamification/Leaderboard.d.ts

@@ -0,0 +1,9 @@
+import { ScrollNodeRef } from '../../..';
+import { ScrollStore } from '../../../useSdkScroll';
+import { Gamification } from '@streamlayer/feature-gamification';
+
+export declare const Leaderboard: React.FC<{
+    gamification: Gamification;
+    scrollNode: ScrollNodeRef;
+    scrollStore: ScrollStore;
+}>;

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

@@ -0,0 +1,55 @@
+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 { 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 "../../../../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: "i1odbhm4",
+  propsAsIs: !1
+}), q = ({
+  gamification: e,
+  scrollNode: s,
+  scrollStore: p
+}) => {
+  const t = u(null), {
+    data: n,
+    hasMore: d,
+    loading: m,
+    key: l
+  } = i(e.leaderboardList.$store), {
+    data: o
+  } = i(e.deepLink.$store), [a, c] = k(t);
+  return !n.length && !m ? /* @__PURE__ */ r(y, {
+    deepLink: o
+  }) : /* @__PURE__ */ f(L, {
+    children: [/* @__PURE__ */ r(b, {
+      items: n,
+      scrollNode: s,
+      scrollStore: p,
+      fetchMore: e.leaderboardList.fetchMore,
+      hasMore: d,
+      openItemDetail: e.openUser,
+      currentUserId: e.currentUserId.get()
+    }, l), o && /* @__PURE__ */ r(C, {
+      ref: t,
+      children: /* @__PURE__ */ r(I, {
+        onClick: () => a(o),
+        title: "Invite Friends",
+        description: "Challenge them now!"
+      })
+    }), c]
+  });
+};
+export {
+  q as Leaderboard
+};

package/lib/{ui → 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/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/app/app/Features/Gamification/QuestionsList.js

@@ -0,0 +1,11 @@
+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 "../../../../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 });
+};
+export {
+  a as QuestionsList
+};

package/lib/app/app/Features/Gamification/Tabs.d.ts

@@ -0,0 +1,14 @@
+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;
+    scrollStore: ScrollStore;
+    scrollNode: ScrollNodeRef;
+    responsiveStore: ResponsiveStore;
+    className?: string;
+    style?: React.CSSProperties;
+}>;

package/lib/{ui → 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/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}/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/Features/Gamification/gamification-feature.d.ts

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

package/lib/{ui → 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 '../../masters';
-import { ResponsiveStore } from '../../useSdkResponsive';
-import { ScrollStore } from '../../useSdkScroll';
+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/app/app/Features/Gamification/index.js

@@ -0,0 +1,88 @@
+import { jsx as n, jsxs as f } from "react/jsx-runtime";
+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, u = /* @__PURE__ */ m(y())({
+  name: "OpenedContainer",
+  class: "ouvguos",
+  propsAsIs: !0
+}), O = /* @__PURE__ */ m("div")({
+  name: "UserContainer",
+  class: "u1eu4lbg",
+  propsAsIs: !1
+}), b = ({
+  correct: e,
+  incorrect: r
+}) => {
+  const o = e + r;
+  return o === 0 ? 0 : Math.round(e / o * 100);
+}, E = ({
+  gamification: e,
+  scrollStore: r,
+  className: o,
+  appNode: i,
+  scrollNode: s,
+  responsiveStore: t
+}) => /* @__PURE__ */ n(x, {
+  appNode: i,
+  scrollStore: r,
+  scrollNode: s,
+  className: o,
+  gamification: e,
+  responsiveStore: t
+}), F = ({
+  gamification: e,
+  className: r,
+  appNode: o,
+  responsiveStore: i
+}) => {
+  const s = l(e.openedQuestion.$store), t = l(e.openedUser), {
+    sdkInDesktopView: p
+  } = l(i, {
+    keys: ["sdkInDesktopView"]
+  }), {
+    hiding: a,
+    onAnimationEnd: c
+  } = C();
+  if (!o.current || !s && !t)
+    return null;
+  const d = s ? /* @__PURE__ */ n(u, {
+    className: r,
+    hiding: a,
+    onAnimationEnd: c,
+    children: /* @__PURE__ */ n(v, {
+      gamification: e
+    })
+  }) : t ? /* @__PURE__ */ n(u, {
+    className: r,
+    hiding: a,
+    onAnimationEnd: c,
+    children: /* @__PURE__ */ f(O, {
+      children: [/* @__PURE__ */ n(k, {
+        label: "Friend's Rank",
+        close: e.closeUser
+      }), /* @__PURE__ */ n(h, {
+        children: /* @__PURE__ */ n(S, {
+          ...t,
+          successRate: b(t)
+        })
+      })]
+    })
+  }) : null;
+  return /* @__PURE__ */ n(U, {
+    container: o,
+    useContainer: !p,
+    children: d
+  });
+};
+export {
+  E as GamificationOverlay,
+  F as GamificationOverlayStandalone
+};

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

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import { AppNodeRef, ScrollNodeRef } from '../..';
+import { ResponsiveStore } from '../../useSdkResponsive';
+import { ScrollStore } from '../../useSdkScroll';
 import { Features } from '@streamlayer/sdk-web-features';
-import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-import type { AppNodeRef, ScrollNodeRef } from '../masters';
-import { ResponsiveStore } from '../useSdkResponsive';
-import { ScrollStore } from '../useSdkScroll';
+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/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'];

package/lib/app/app/Notifications/Onboarding/Notification/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const CloseIconWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const CloseIcon: any;
+export declare const Title: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const SponsorLogo: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const PresentsTitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Subtitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Description: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ActionButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;

package/lib/app/app/Notifications/Onboarding/Notification/styles.js

@@ -0,0 +1,50 @@
+import { styled as s } from "@linaria/react";
+import { SvgIcon as o } from "../../../../../ui/icons/index.js";
+const a = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "c1qjj4d4",
+  propsAsIs: !1
+}), c = /* @__PURE__ */ s("div")({
+  name: "CloseIconWrap",
+  class: "c1lg6b8a",
+  propsAsIs: !1
+}), e = () => o, l = /* @__PURE__ */ s(e())({
+  name: "CloseIcon",
+  class: "c159el66",
+  propsAsIs: !0
+}), p = /* @__PURE__ */ s("div")({
+  name: "Title",
+  class: "t16xmufv",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("img")({
+  name: "SponsorLogo",
+  class: "s83lc21",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "PresentsTitle",
+  class: "p1p7igia",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "Subtitle",
+  class: "s1eftsbu",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("div")({
+  name: "Description",
+  class: "d8uezec",
+  propsAsIs: !1
+}), f = /* @__PURE__ */ s("button")({
+  name: "ActionButton",
+  class: "a1h1bk90",
+  propsAsIs: !1
+});
+export {
+  f as ActionButton,
+  l as CloseIcon,
+  c as CloseIconWrap,
+  a as Container,
+  I as Description,
+  r as PresentsTitle,
+  i as SponsorLogo,
+  m as Subtitle,
+  p as Title
+};