@streamlayer/react-ui 0.100.5 → 1.1.0

package/lib/app/app/story/video.js

@@ -0,0 +1,96 @@
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { styled as s } from "@linaria/react";
+import { useState as v, useCallback as y, useEffect as A } from "react";
+import { useStreamLayer as g } from "@streamlayer/react";
+import { StreamLayerSDKAdvertisement as i } from "../Advertisement/index.js";
+import { StreamLayerSDKPoints as h } from "../Points/index.js";
+import { StreamLayerThemeProvider as S } from "../../../ui/theme/index.js";
+import { AppLogin as C } from "./login.js";
+const P = /* @__PURE__ */ s("div")({
+  name: "PointsContainer",
+  class: "pvt3dlv",
+  propsAsIs: !1
+}), V = /* @__PURE__ */ s("video")({
+  name: "VideoPlayer",
+  class: "v1jvtznw",
+  propsAsIs: !1
+}), B = /* @__PURE__ */ s("div")({
+  name: "VideoFrame",
+  class: "v13gbl05",
+  propsAsIs: !1
+}), I = /* @__PURE__ */ s("div")({
+  name: "LoginContainer",
+  class: "l65nrgs",
+  propsAsIs: !1
+}), L = /* @__PURE__ */ s("button")({
+  name: "FullscreenButton",
+  class: "f1jxc34p",
+  propsAsIs: !1
+}), b = /* @__PURE__ */ s("div")({
+  name: "AdvSidebar",
+  class: "ayq9x9m",
+  propsAsIs: !1
+}), x = /* @__PURE__ */ s("div")({
+  name: "AdvBanner",
+  class: "am90851",
+  propsAsIs: !1
+}), E = ({
+  toggleFullscreen: m,
+  hideLogin: c,
+  hidePoints: d,
+  sidebar: t,
+  banner: n,
+  event: a
+}) => {
+  const e = g(), [p, f] = v(!1), r = y(({
+    muted: u
+  }) => {
+    f(u);
+  }, []);
+  return A(() => (e == null || e.addVideoPlayerController(r), () => {
+    e == null || e.removeVideoPlayerController(r);
+  }), [e, r]), /* @__PURE__ */ l(B, {
+    children: [e && /* @__PURE__ */ l(S, {
+      children: [!d && /* @__PURE__ */ o(P, {
+        children: /* @__PURE__ */ o(h, {
+          sdk: e
+        })
+      }), /* @__PURE__ */ o(b, {
+        style: t === "left" ? {
+          left: 0
+        } : {
+          right: 0
+        },
+        children: /* @__PURE__ */ o(i, {
+          event: a,
+          sdk: e,
+          sidebar: t
+        })
+      }), /* @__PURE__ */ o(x, {
+        style: n === "top" ? {
+          top: 0
+        } : {
+          bottom: 0
+        },
+        children: /* @__PURE__ */ o(i, {
+          event: a,
+          sdk: e,
+          banner: n
+        })
+      })]
+    }), !c && /* @__PURE__ */ o(I, {
+      children: /* @__PURE__ */ o(C, {})
+    }), /* @__PURE__ */ o(V, {
+      src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+      muted: p,
+      controls: !0
+    }), /* @__PURE__ */ o(L, {
+      onClick: m,
+      children: "fullscreen"
+    })]
+  });
+};
+export {
+  E as Video,
+  V as VideoPlayer
+};

package/lib/app/app/useApp.d.ts

@@ -0,0 +1,20 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
+/**
+ * A hook that provides functionality for managing the StreamLayerSDK in the App app.
+ * - On activate FG+ button, the SDK is initialized and the FG+ overlay is opened.
+ * - On activate Channels or Leaderboard button, the SDK is disabled and the FG+ overlay is closed.
+ * - On sdk status change, if sdk disabled (f.e some errors occurred), the SDK is disabled and the FG+ overlay is closed.
+ * @param sdk - The StreamLayerSDK instance to use.
+ * @returns An object containing various functions and state values for managing the SDK and app overlays.
+ * @returns deactivate - A function that disables the SDK and closes the FG+ overlay.
+ * @returns activateEventWithId - A function that initializes the SDK and opens the FG+ overlay.
+ * With event (The id of the event to create a session for.) as a parameter.
+ */
+export declare const useAppApp: (sdk: StreamLayerSDK) => {
+    sdkEnabled: boolean;
+    sdkReady: boolean;
+    activateEventWithId: (event: string) => void;
+    deactivate: () => void;
+    isLogged: boolean;
+};

package/lib/app/app/useApp.js

@@ -0,0 +1,48 @@
+import { useStore as n } from "@nanostores/react";
+import { useRef as m, useState as b, useEffect as s, useCallback as c } from "react";
+import { FeatureType as E } from "@streamlayer/sdk-web-types";
+const F = (e) => {
+  const a = m(""), [o, r] = b(!1), p = n(e.status), l = n(e.sdkStore.slStreamId), i = n(e.userId()), f = n(e.getActiveFeature()), u = p === "ready" && !!l.data;
+  s(() => {
+    const t = e.getFeature(E.GAMES);
+    t && (t.closeQuestion(), t.closeUser());
+  }, [f, e]);
+  const A = c(
+    (t) => {
+      a.current = t, r(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: v, err: d }) => {
+        if (!d && v) {
+          e.isUserAuthorized().then((g) => {
+            g || e.disableApp();
+          });
+          return;
+        }
+      });
+    },
+    [e]
+  ), S = c(() => {
+    r(!1), e.disableApp();
+  }, [e]);
+  return s(() => {
+    if (!i) {
+      u && e.disableApp();
+      return;
+    }
+    if (i && a.current && o) {
+      e.initializeApp({ skipOrganizationSettings: !0 }).then(() => {
+        e.createEventSession(a.current);
+      });
+      return;
+    }
+  }, [i]), s(() => () => {
+    r(!1), e.disableApp();
+  }, [r, e]), {
+    sdkEnabled: o,
+    sdkReady: u,
+    activateEventWithId: A,
+    deactivate: S,
+    isLogged: !!i
+  };
+};
+export {
+  F as useAppApp
+};

package/lib/app/app/useAppContext.d.ts

@@ -0,0 +1,8 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
+export declare const AppContext: import('react').Context<{
+    sdk: StreamLayerSDK | null;
+}>;
+export declare const useAppContext: () => {
+    sdk: StreamLayerSDK | null;
+};

package/lib/app/app/useAppContext.js

@@ -0,0 +1,8 @@
+import { createContext as t, useContext as e } from "react";
+const o = t({
+  sdk: null
+}), p = () => e(o);
+export {
+  o as AppContext,
+  p as useAppContext
+};

package/lib/app/index.d.ts

@@ -0,0 +1,6 @@
+export type AppNode = HTMLDivElement | null;
+export type AppNodeRef = React.MutableRefObject<AppNode>;
+export type ScrollNode = HTMLDivElement | null;
+export type ScrollNodeRef = React.MutableRefObject<ScrollNode>;
+export type HeaderNode = HTMLDivElement | null;
+export type HeaderNodeRef = React.MutableRefObject<HeaderNode>;

package/lib/app/login/demo.d.ts

@@ -0,0 +1,5 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+
+export declare const LoginComponent: React.FC<{
+    sdk: StreamLayerSDK;
+}>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Login: React.FC<{
     login: (token: string) => Promise<void>;
     anonymousLogin?: () => Promise<void>;

package/lib/{ui → app}/login/index.js

@@ -2,7 +2,7 @@ import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { useState as a } from "react";
 import w from "react-auth-code-input";
 import P, { isValidPhoneNumber as F, formatPhoneNumberIntl as v } from "react-phone-number-input";
-import { Timer as D } from "../timer/index.js";
+import { Timer as D } from "../../ui/timer/index.js";
 import { requestLoginCode as I, register as k, login as S } from "../../utils/login.js";
 import { Panel as q, Form as m, FormTitle as p, FormDescription as d, FormInputContainer as x, FormSubmit as s, Digits as E } from "./styles.js";
 const z = ({ login: h, anonymousLogin: u, host: c }) => {

package/lib/app/login/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const Panel: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Form: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLFormElement> & import('react').FormHTMLAttributes<HTMLFormElement> & Record<never, unknown>>;
+export declare const FormTitle: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const FormDescription: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const FormSubmit: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const FormInputContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Digits: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/app/login/styles.js

@@ -0,0 +1,39 @@
+import { styled as s } from "@linaria/react";
+const r = /* @__PURE__ */ s("div")({
+  name: "Panel",
+  class: "p1xyiqdq",
+  propsAsIs: !1
+}), a = /* @__PURE__ */ s("form")({
+  name: "Form",
+  class: "f8dvpyp",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "FormTitle",
+  class: "f11rdqjl",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "FormDescription",
+  class: "f1grgxkj",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("button")({
+  name: "FormSubmit",
+  class: "f1qnbttk",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "FormInputContainer",
+  class: "fqfb0ax",
+  propsAsIs: !1
+}), m = /* @__PURE__ */ s("div")({
+  name: "Digits",
+  class: "dl335k4",
+  propsAsIs: !1
+});
+export {
+  m as Digits,
+  a as Form,
+  t as FormDescription,
+  p as FormInputContainer,
+  e as FormSubmit,
+  n as FormTitle,
+  r as Panel
+};

package/lib/app/masters/Features/FeatureProvider.d.ts

@@ -0,0 +1,11 @@
+import { Features } from '@streamlayer/sdk-web-features';
+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;
+    children: React.ReactNode;
+    sdk: StreamLayerSDK;
+    className?: string;
+    noWait?: boolean;
+}>;

package/lib/app/masters/Features/FeatureProvider.js

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

package/lib/app/masters/Features/Gamification/Friends.d.ts

@@ -0,0 +1,3 @@
+export declare const Friends: React.FC<{
+    deepLink?: string;
+}>;

package/lib/app/masters/Features/Gamification/Friends.js

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+import { styled as i } from "@linaria/react";
+import { OnboardingInviteCard as n } from "../../../../ui/gamification/onboarding/slides/onboarding-invite-card/index.js";
+const r = /* @__PURE__ */ i("div")({
+  name: "InviteFriendsContainer",
+  class: "i1b9agwt",
+  propsAsIs: !1
+}), d = ({
+  deepLink: t
+}) => /* @__PURE__ */ e(r, {
+  children: /* @__PURE__ */ e(n, {
+    inviteLink: t,
+    inviteCardTitle: "It’s More Fun With Friends",
+    inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
+  })
+});
+export {
+  d as Friends
+};

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

@@ -1,34 +1,34 @@
 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 y } from "../../../gamification/leaderboard/static.js";
+import "../../../../ui/icons/index.js";
+import "../../../../ui/gamification/leaderboard/list-item/styles.js";
+/* empty css                                    */
+import { LeaderboardStaticList as y } from "../../../../ui/gamification/leaderboard/static.js";
 import { Friends as C } from "./Friends.js";
 const b = /* @__PURE__ */ h("div")({
   name: "InviteLinkContainer",
-  class: "i1chxfpe",
+  class: "ij36hcn",
   propsAsIs: !1
 }), q = ({
   gamification: e,
   scrollNode: s,
   scrollStore: p
 }) => {
-  const o = k(null), {
+  const o = u(null), {
     data: n,
     hasMore: d,
     loading: m,
     key: l
   } = i(e.leaderboardList.$store), {
     data: t
-  } = i(e.deepLink.$store), [a, c] = u(o);
+  } = i(e.deepLink.$store), [a, c] = k(o);
   return !n.length && !m ? /* @__PURE__ */ r(C, {
     deepLink: t
   }) : /* @__PURE__ */ f(L, {

package/lib/app/masters/Features/Gamification/Question.d.ts

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

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

@@ -1,16 +1,16 @@
 import { jsxs as u, jsx as e } from "react/jsx-runtime";
 import { styled as l } from "@linaria/react";
 import { useStore as n } from "@nanostores/react";
-import { QuestionType as a } from "@streamlayer/sdk-web-types";
-import { useMastersContext as m } from "../../useMastersContext.js";
-import { VoteHeader as c } from "../../../gamification/detail/header/index.js";
-import { Sponsor as p } from "../../../gamification/detail/sponsor/index.js";
-import { Vote as f, VoteSkeleton as b } from "../../../gamification/vote/index.js";
-import { InsightDetails as y } from "../../../gamification/vote/insight-details/index.js";
-import { TwitterDetails as V } from "../../../gamification/vote/twitter-details/index.js";
-const d = /* @__PURE__ */ l("div")({
+import { useMastersContext as a } from "../../useMastersContext.js";
+import { QuestionType as m } from "@streamlayer/sdk-web-types";
+import { VoteHeader as c } from "../../../../ui/gamification/detail/header/index.js";
+import { Sponsor as p } from "../../../../ui/gamification/detail/sponsor/index.js";
+import { Vote as f, VoteSkeleton as b } from "../../../../ui/gamification/vote/index.js";
+import { InsightDetails as y } from "../../../../ui/gamification/vote/insight-details/index.js";
+import { TwitterDetails as V } from "../../../../ui/gamification/vote/twitter-details/index.js";
+const h = /* @__PURE__ */ l("div")({
   name: "QuestionContainer",
-  class: "qdri6g3",
+  class: "qwgkhsv",
   propsAsIs: !1
 }), x = ({
   openedQuestion: t
@@ -18,7 +18,7 @@ const d = /* @__PURE__ */ l("div")({
   var s, o;
   const {
     sdk: r
-  } = m();
+  } = a();
   return ((s = t == null ? void 0 : t.attributes) == null ? void 0 : s.attributes.case) === "insight" ? /* @__PURE__ */ e(y, {
     ...t.attributes.attributes.value,
     controlVideo: r == null ? void 0 : r.controlVideoPlayer
@@ -26,7 +26,7 @@ const d = /* @__PURE__ */ l("div")({
     ...t.attributes.attributes.value,
     controlVideo: r == null ? void 0 : r.controlVideoPlayer
   }) : null;
-}, h = ({
+}, d = ({
   extendedQuestion: t,
   vote: r,
   close: s
@@ -49,18 +49,18 @@ const d = /* @__PURE__ */ l("div")({
   if (!r)
     return null;
   const o = r.type;
-  return /* @__PURE__ */ u(d, {
+  return /* @__PURE__ */ u(h, {
     children: [/* @__PURE__ */ e(c, {
       close: t.closeQuestion,
-      type: ((i = r.attributes) == null ? void 0 : i.type) || a.UNSET
-    }), o === "question" && /* @__PURE__ */ e(h, {
+      type: ((i = r.attributes) == null ? void 0 : i.type) || m.UNSET
+    }), o === "question" && /* @__PURE__ */ e(d, {
       vote: t.submitAnswer,
       close: t.closeQuestion,
       extendedQuestion: s
     }), o !== "question" && /* @__PURE__ */ e(x, {
       openedQuestion: r
     }), /* @__PURE__ */ e(p, {
-      sponsorLogo: ""
+      mastersLogo: !0
     })]
   });
 };

package/lib/app/masters/Features/Gamification/QuestionsList.d.ts

@@ -0,0 +1,6 @@
+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/masters}/Features/Gamification/QuestionsList.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
 import { useStore as i } from "@nanostores/react";
 import { useMastersContext as n } from "../../useMastersContext.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/app/masters/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/app/masters/Features/Gamification/Tabs.js

@@ -0,0 +1,44 @@
+import { jsxs as h, jsx as e, Fragment as x } from "react/jsx-runtime";
+import { useStore as u } from "@nanostores/react";
+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] = 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 && P(c, g.size, { behavior: "instant" });
+    });
+  };
+  E(() => t.subscribe((r) => {
+    if (r.scrollPosition === 0) {
+      t.setKey("tabsShown", !0);
+      return;
+    }
+    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(D, { className: f, style: b, children: [
+    /* @__PURE__ */ e(
+      T,
+      {
+        style: {
+          top: o
+        },
+        children: /* @__PURE__ */ e(K, { activePage: i, toggleActivePage: k })
+      }
+    ),
+    i === a.HOME && /* @__PURE__ */ h(x, { children: [
+      /* @__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(I, { children: /* @__PURE__ */ e(L, { scrollStore: t, scrollNode: l, gamification: s }) })
+  ] });
+};
+export {
+  q as Tabs
+};

package/lib/app/masters/Features/Gamification/UserSummary.d.ts

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

package/lib/app/masters/Features/Gamification/UserSummary.js

@@ -0,0 +1,18 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useState as i, useEffect as n } from "react";
+import { UserStatistics as a } from "../../../../ui/gamification/user-statistics/index.js";
+const b = ({ userSummary: r }) => {
+  var e;
+  const [t, s] = i(void 0);
+  return n(() => {
+    const c = r.$store.subscribe((o) => {
+      o && s(o);
+    });
+    return () => {
+      c();
+    };
+  }, [r]), /* @__PURE__ */ m(a, { loading: !(t != null && t.summary), ...t == null ? void 0 : t.summary, successRate: (e = t == null ? void 0 : t.percentage) == null ? void 0 : e.correct });
+};
+export {
+  b as UserSummary
+};

package/lib/app/masters/Features/Gamification/gamification-feature.d.ts

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

package/lib/app/masters/Features/Gamification/gamification-feature.js

@@ -0,0 +1,4 @@
+import { GamificationOverlay as i } from "./index.js";
+export {
+  i as default
+};

package/lib/app/masters/Features/Gamification/index.d.ts

@@ -0,0 +1,23 @@
+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;
+    scrollStore: ScrollStore;
+    responsiveStore: ResponsiveStore;
+    appNode: AppNodeRef;
+    scrollNode: ScrollNodeRef;
+}>;
+/**
+ * Standalone version of the gamification overlay
+ * includes the question and user details, which are shown in a modal and should be available on any overlay
+ */
+export declare const GamificationOverlayStandalone: React.FC<{
+    gamification: GamificationClass;
+    className?: string;
+    responsiveStore: ResponsiveStore;
+    appNode: AppNodeRef;
+}>;