@streamlayer/react-ui 0.91.1 → 0.93.0

package/lib/ui/app/masters.js

@@ -1,16 +1,18 @@
-import { jsxs as c, jsx as m } from "react/jsx-runtime";
-import { useRef as g, useEffect as h } from "react";
-import { resetCss as d } from "../theme/theme.js";
-import { ActiveFeature as y } from "./Features/index.js";
-import { MastersNavigation as N } from "./Navigation/MastersNavigation/index.js";
-import { SDKNotifications as A } from "./Notifications/index.js";
-import { SDKContainer as C, SDKScrollContainer as I } from "./styles.js";
-import { useMastersApp as x } from "./useMastersApp.js";
-import { useSdkFeature as B } from "./useSdkFeature.js";
-import { useSdkScroll as F } from "./useSdkScroll.js";
-import { ChannelsButtonId as j } from "../navigation/button/Channels.js";
-import { LeaderBoardButtonId as D } from "../navigation/button/LeaderBoard.js";
-import { FeaturedGroupsButtonId as E } from "../navigation/button/FeaturedGroups.js";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { useRef as f, useEffect as N } from "react";
+import { resetCss as u } from "../theme/theme.js";
+import { ActiveFeature as A } from "./Features/index.js";
+import { MastersNavigation as C } from "./Navigation/MastersNavigation/index.js";
+import { SDKNotifications as I } from "./Notifications/index.js";
+import { SDKContainer as x, SDKScrollContainer as B } from "./styles.js";
+import { useMastersApp as F } from "./useMastersApp.js";
+import { useSdkFeature as j } from "./useSdkFeature.js";
+import { useSdkResponsive as k } from "./useSdkResponsive.js";
+import { useSdkScroll as D } from "./useSdkScroll.js";
+import { ChannelsButtonId as E } from "../navigation/button/Channels.js";
+import { LeaderBoardButtonId as K } from "../navigation/button/LeaderBoard.js";
+import { FeaturedGroupsButtonId as L } from "../navigation/button/FeaturedGroups.js";
+import "../theme/breakpoints.js";
 import "../theme/constants.js";
 import "@streamlayer/sdk-web-types";
 import "./Features/FeatureProvider.js";
@@ -19,12 +21,12 @@ import "@streamlayer/sdk-web-interfaces";
 import "../navigation/masters.js";
 import "@linaria/react";
 import "../navigation/index.js";
-import "../../index_ej4hfx-w40geAFS.js";
-import "../../masters_m6itlr-w40geAFS.js";
+import "../icons/index.js";
+import "../navigation/button/index.js";
+import "../navigation/button/styles.js";
 import "../../useClipboardCopy-E5rEe6It.js";
 import "../../index-uEuzH3jr.js";
 import "../gamification/copyNotification/index.js";
-import "../icons/index.js";
 import "../gamification/copyNotification/styles.js";
 import "@streamlayer/sdk-web-notifications";
 import "../gamification/constants.js";
@@ -41,20 +43,27 @@ import "../questions/twitter/account/styles.js";
 import "../questions/twitter/styles.js";
 import "../gamification/question/notification/tweet/styles.js";
 import "../gamification/question/notification/prediction-result/index.js";
+import "../animated-counter/index.js";
+import "react-countup";
 import "../gamification/question/notification/prediction-result/animation-lines/index.js";
 import "../gamification/question/notification/prediction-result/animation-lines/styles.js";
 import "../gamification/question/notification/prediction-result/styles.js";
 import "../show-in/index.js";
 import "@linaria/core";
 import "./Notifications/Onboarding/index.js";
+import "./useImagesPreload.js";
 import "../gamification/onboarding/index.js";
 import "react-virtualized-auto-sizer";
+import "../skeleton/index.js";
+import "../skeleton/styles.js";
 import "../gamification/onboarding/slides/onboarding-instructions/index.js";
 import "../gamification/onboarding/slides/onboarding-instructions/styles.js";
 import "../gamification/onboarding/slides/onboarding-invite-card/index.js";
 import "../gamification/onboarding/slides/onboarding-invite-card/styles.js";
 import "../gamification/onboarding/slides/onboarding-rules/index.js";
 import "../gamification/onboarding/slides/onboarding-rules/styles.js";
+import "../gamification/onboarding/slides/onboarding-terms/index.js";
+import "../gamification/onboarding/slides/onboarding-terms/styles.js";
 import "../gamification/onboarding/styles.js";
 import "../button/index.js";
 import "../button/styles.js";
@@ -63,55 +72,68 @@ import "./Notifications/Onboarding/Notification/styles.js";
 import "./Notifications/styles.js";
 import "../gamification/question/notification/pill/index.js";
 import "../gamification/question/notification/pill/styles.js";
-import "../navigation/button/styles.js";
-import "../../LeaderBoard_fzzlxb-w40geAFS.js";
-import "../navigation/button/index.js";
 import "lodash.throttle";
-const K = ({ sdk: t, className: p, scrollStore: e, appNode: r, scrollNode: a }) => {
-  const [, o] = B(t);
-  return /* @__PURE__ */ m(
-    y,
+import "../../index-keh7OLCY.js";
+const M = ({ sdk: r, className: s, scrollStore: n, appNode: t, scrollNode: i, headerNode: m, responsiveStore: p }) => {
+  const [, a] = j(r);
+  return /* @__PURE__ */ o(
+    A,
     {
-      className: p,
-      scrollNode: a,
-      appNode: r,
-      scrollStore: e,
-      feature: o,
-      sdk: t
+      className: s,
+      scrollNode: i,
+      appNode: t,
+      scrollStore: n,
+      feature: a,
+      headerNode: m,
+      responsiveStore: p,
+      sdk: r
     }
   );
-}, Qt = ({ sdk: t, overlays: p, children: e }) => {
-  const [r, a] = F(), o = g(null), { sdkEnabled: s, sdkReady: n, activeOverlay: i, activateAndLoadOverlay: l, activateEventWithId: f, deactivate: u, isLogged: v } = x(t);
-  return h(() => {
+}, or = ({ sdk: r, overlays: s, children: n }) => {
+  const t = f(null), i = f(null), [m] = k(t), [p, a] = D(t, m), { sdkEnabled: d, sdkReady: l, activeOverlay: e, activateAndLoadOverlay: v, activateEventWithId: S, deactivate: h, isLogged: g } = F(r);
+  return N(() => {
     import("./Features/Gamification/gamification-feature.js");
-  }, []), /* @__PURE__ */ c(C, { ref: o, children: [
-    s && /* @__PURE__ */ m(
-      N,
+  }, []), /* @__PURE__ */ c(x, { ref: t, children: [
+    d && /* @__PURE__ */ o(
+      C,
       {
-        sdkReady: n,
-        activeOverlay: i,
-        className: d,
-        setActiveOverlay: (S) => l("", S)
+        ref: i,
+        sdkReady: l,
+        activeOverlay: e,
+        className: u,
+        setActiveOverlay: (y) => v("", y)
       }
     ),
-    /* @__PURE__ */ c(I, { ref: r, "data-nav": s.toString(), children: [
-      n && /* @__PURE__ */ m(A, { sdk: t, scrollNode: r, appNode: o, scrollStore: a }),
-      (!s || i === j) && e && e({ activateEventWithId: f, deactivate: u }),
-      p && i === D && p[i],
-      n && i === E && /* @__PURE__ */ m(
-        K,
+    /* @__PURE__ */ c(B, { ref: p, "data-nav": d.toString(), children: [
+      l && /* @__PURE__ */ o(
+        I,
+        {
+          sdk: r,
+          scrollNode: p,
+          headerNode: i,
+          appNode: t,
+          scrollStore: a,
+          responsiveStore: m
+        }
+      ),
+      /* @__PURE__ */ o("div", { style: !d || e === E ? {} : { display: "none" }, children: n && n({ activateEventWithId: S, deactivate: h }) }),
+      s && e === K && s[e],
+      l && e === L && /* @__PURE__ */ o(
+        M,
         {
           scrollStore: a,
-          scrollNode: r,
-          appNode: o,
-          className: d,
-          sdk: t
+          responsiveStore: m,
+          scrollNode: p,
+          appNode: t,
+          headerNode: i,
+          className: u,
+          sdk: r
         }
       )
     ] }),
-    !v && /* @__PURE__ */ m("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "You are not logged in." })
+    d && !g && /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "You are not logged in." })
   ] });
 };
 export {
-  Qt as MastersApp
+  or as MastersApp
 };

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

@@ -12,3 +12,4 @@ export declare const LeaderboardContainer: import("@linaria/react").WYWEvalMeta
 export declare const TabsNavContainer: import("@linaria/react").WYWEvalMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }>;
+export declare const UserSummaryContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/app/styles.js

@@ -27,6 +27,10 @@ const i = /* @__PURE__ */ s("div")({
   name: "TabsNavContainer",
   class: "tvdam54",
   propsAsIs: !0
+}), m = /* @__PURE__ */ s("div")({
+  name: "UserSummaryContainer",
+  class: "u14fk93k",
+  propsAsIs: !1
 });
 export {
   l as LeaderboardContainer,
@@ -35,5 +39,6 @@ export {
   c as SDKScrollContainer,
   n as SDKWhiteContainer,
   p as TabsContainer,
-  C as TabsNavContainer
+  C as TabsNavContainer,
+  m as UserSummaryContainer
 };

package/lib/ui/app/useClipboardCopy.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
-export declare const useClipboardCopy: (appNode: React.MutableRefObject<HTMLDivElement | null>) => [(link: string | undefined) => Promise<void>, import("react").ReactPortal | null];
+import { HeaderNodeRef, type AppNodeRef } from './masters';
+export declare const useClipboardCopy: (renderToNode: AppNodeRef | HeaderNodeRef) => [(link: string | undefined) => Promise<void>, import("react").ReactPortal | null];

package/lib/ui/app/useImagesPreload.d.ts

@@ -0,0 +1,4 @@
+export declare const useImagesPreload: (images?: string[]) => {
+    loading: boolean;
+    throttled: boolean;
+};

package/lib/ui/app/useImagesPreload.js

@@ -0,0 +1,23 @@
+import { useState as u, useRef as T, useCallback as c, useEffect as p } from "react";
+const I = (e) => {
+  const [i, r] = u(!1), [f, s] = u(!1), t = T(null), a = c(() => {
+    s(!0), t.current && clearTimeout(t.current), t.current = setTimeout(() => {
+      s(!1);
+    }, 1e3);
+  }, []), l = c(async (m) => {
+    r(!0);
+    const d = m.map(
+      (n) => new Promise((g, h) => {
+        const o = new Image();
+        o.onload = () => g(n), o.onerror = () => h(), o.src = n;
+      })
+    );
+    await Promise.allSettled(d), r(!1);
+  }, []);
+  return p(() => {
+    e && (a(), l(e));
+  }, [e, a, l]), { loading: i, throttled: f };
+};
+export {
+  I as useImagesPreload
+};

package/lib/ui/app/useMastersApp.js

@@ -1,18 +1,19 @@
-import { useStore as m } from "@nanostores/react";
+import { useStore as l } from "@nanostores/react";
 import { useRef as h, useState as d, useCallback as F, useEffect as v } from "react";
 import { FeatureType as y } from "@streamlayer/sdk-web-types";
-import "react/jsx-runtime";
-import { ChannelsButtonId as c } from "../navigation/button/Channels.js";
+import "./Navigation/MastersNavigation/index.js";
 import { FeaturedGroupsButtonId as n } from "../navigation/button/FeaturedGroups.js";
+import { ChannelsButtonId as c } from "../navigation/button/Channels.js";
+import "react/jsx-runtime";
+import "../navigation/button/LeaderBoard.js";
 import "@linaria/react";
 import "../icons/index.js";
-import "../navigation/button/styles.js";
-import "../../LeaderBoard_fzzlxb-w40geAFS.js";
-import "../../index_ej4hfx-w40geAFS.js";
-import "../../masters_m6itlr-w40geAFS.js";
 import "../navigation/button/index.js";
-const U = (t) => {
-  const a = h(""), [f, l] = d(!1), A = m(t.status), r = m(t.userId()), i = A === "ready", [s, u] = d(n), p = F(
+import "../navigation/button/styles.js";
+import "../navigation/masters.js";
+import "../navigation/index.js";
+const W = (t) => {
+  const a = h(""), [m, f] = d(!1), A = l(t.status), r = l(t.userId()), i = A === "ready", [s, u] = d(n), p = F(
     (e, o) => {
       u(o), o === n ? (e && t.createEventSession(e), window.requestAnimationFrame(() => {
         t.openFeature(y.GAMES);
@@ -24,7 +25,7 @@ const U = (t) => {
     !i && s === n && (u(c), t.closeFeature(!0));
   }, [i, s, t]);
   const S = (e) => {
-    a.current = e, l(!0), t.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: o, err: b }) => {
+    a.current = e, f(!0), t.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: o, err: b }) => {
       if (b) {
         p(e, c);
         return;
@@ -41,18 +42,18 @@ const U = (t) => {
       }
     });
   }, E = () => {
-    l(!1), t.disableApp();
+    f(!1), t.disableApp();
   };
   return v(() => {
     if (!r) {
       i && (u(c), t.disableApp());
       return;
     }
-    r && a.current && f && t.initializeApp({ skipOrganizationSettings: !0 }).then(() => {
+    r && a.current && m && t.initializeApp({ skipOrganizationSettings: !0 }).then(() => {
       t.createEventSession(a.current);
     });
   }, [r]), {
-    sdkEnabled: f,
+    sdkEnabled: m,
     sdkReady: i,
     activeOverlay: s,
     activateAndLoadOverlay: p,
@@ -62,5 +63,5 @@ const U = (t) => {
   };
 };
 export {
-  U as useMastersApp
+  W as useMastersApp
 };

package/lib/ui/app/useSdkResponsive.d.ts

@@ -0,0 +1,14 @@
+import { MapStore } from 'nanostores';
+import { BREAKPOINTS } from '../theme/constants';
+type BREAKPOINTS_KEYS = keyof typeof BREAKPOINTS;
+type ResponsiveData = {
+    screen: {
+        name: BREAKPOINTS_KEYS;
+        size: (typeof BREAKPOINTS)[BREAKPOINTS_KEYS];
+    };
+    sdkInView?: boolean;
+    sdkInScrollView?: boolean;
+};
+export type ResponsiveStore = MapStore<ResponsiveData>;
+export declare const useSdkResponsive: (appNode: AppNodeRef) => [ResponsiveStore];
+export {};

package/lib/ui/app/useSdkResponsive.js

@@ -0,0 +1,46 @@
+import c from "lodash.throttle";
+import { useState as m, useEffect as k } from "react";
+import { BREAKPOINTS as s } from "../theme/constants.js";
+import { m as u } from "../../index-keh7OLCY.js";
+import "../../index-uEuzH3jr.js";
+const d = Object.keys(s), i = () => {
+  const n = window.innerWidth;
+  let e = "sm";
+  for (let t = d.length - 1; t > 0; t--) {
+    const r = d[t];
+    if (!(n < s[r]) && n >= s[r]) {
+      e = r;
+      break;
+    }
+  }
+  return {
+    name: e,
+    size: s[e]
+  };
+}, w = (n) => {
+  var e;
+  return (((e = n.current) == null ? void 0 : e.getBoundingClientRect().y) || 0) < -68;
+}, l = (n) => n >= s.xl, I = (n) => {
+  const [e] = m(() => {
+    const t = i();
+    return u({
+      screen: i(),
+      sdkInView: w(n),
+      sdkInScrollView: l(t.size)
+    });
+  });
+  return k(() => {
+    const t = c(() => {
+      e.setKey("sdkInView", w(n));
+    }, 200), r = c(() => {
+      const o = i();
+      e.setKey("screen", o), e.setKey("sdkInScrollView", l(o.size));
+    }, 200);
+    return window.addEventListener("scroll", t), window.addEventListener("resize", r), () => {
+      window.removeEventListener("scroll", t), window.removeEventListener("resize", r);
+    };
+  }, [e, n]), [e];
+};
+export {
+  I as useSdkResponsive
+};

package/lib/ui/app/useSdkScroll.d.ts

@@ -1,9 +1,12 @@
 import { MapStore } from 'nanostores';
+import { type ScrollNodeRef } from './masters';
+import { type ResponsiveStore } from './useSdkResponsive';
 type ScrollData = {
     scrollPosition: number;
     tabsShown?: boolean;
     scrollDirection: 'forward' | 'backward';
 };
 export type ScrollStore = MapStore<ScrollData>;
-export declare const useSdkScroll: () => [React.MutableRefObject<HTMLDivElement | null>, ScrollStore];
+export declare const scrollIntoAppView: (appNode: AppNodeRef, options?: ScrollIntoViewOptions) => void;
+export declare const useSdkScroll: (appNode: AppNodeRef, responsiveStore: ResponsiveStore) => [ScrollNodeRef, ScrollStore];
 export {};

package/lib/ui/app/useSdkScroll.js

@@ -1,93 +1,44 @@
-import a from "lodash.throttle";
-import { useRef as f, useState as v, useCallback as p, useEffect as d } from "react";
-import { p as m } from "../../index-uEuzH3jr.js";
-let h = Symbol("clean"), n = [], b = (i, r) => {
-  let l = [], e = {
-    get() {
-      return e.lc || e.listen(() => {
-      })(), e.value;
-    },
-    l: r || 0,
-    lc: 0,
-    listen(o, s) {
-      return e.lc = l.push(o, s || e.l) / 2, () => {
-        let t = l.indexOf(o);
-        ~t && (l.splice(t, 2), --e.lc || e.off());
-      };
-    },
-    notify(o) {
-      let s = !n.length;
-      for (let t = 0; t < l.length; t += 2)
-        n.push(
-          l[t],
-          l[t + 1],
-          e.value,
-          o
-        );
-      if (s) {
-        for (let t = 0; t < n.length; t += 4) {
-          let c;
-          for (let u = t + 1; !c && (u += 4) < n.length; )
-            n[u] < n[t + 1] && (c = n.push(
-              n[t],
-              n[t + 1],
-              n[t + 2],
-              n[t + 3]
-            ));
-          c || n[t](n[t + 2], n[t + 3]);
-        }
-        n.length = 0;
-      }
-    },
-    off() {
-    },
-    /* It will be called on last listener unsubscribing.
-       We will redefine it in onMount and onStop. */
-    set(o) {
-      e.value !== o && (e.value = o, e.notify());
-    },
-    subscribe(o, s) {
-      let t = e.listen(o, s);
-      return o(e.value), t;
-    },
-    value: i
-  };
-  return m.env.NODE_ENV !== "production" && (e[h] = () => {
-    l = [], e.lc = 0, e.off();
-  }), e;
-}, g = (i = {}) => {
-  let r = b(i);
-  return r.setKey = function(l, e) {
-    typeof e > "u" ? l in r.value && (r.value = { ...r.value }, delete r.value[l], r.notify(l)) : r.value[l] !== e && (r.value = {
-      ...r.value,
-      [l]: e
-    }, r.notify(l));
-  }, r;
-};
-const w = () => {
-  const i = f(null), r = f(0), [l] = v(
-    g({
+import { useStore as w } from "@nanostores/react";
+import S from "lodash.throttle";
+import { useRef as f, useState as h, useEffect as g } from "react";
+import { BREAKPOINTS as m } from "../theme/constants.js";
+import { m as v } from "../../index-keh7OLCY.js";
+import "../../index-uEuzH3jr.js";
+const D = (t, n) => {
+  var r;
+  (r = t.current) == null || r.scrollIntoView(n);
+}, I = (t, n) => {
+  const r = f(null), l = f(0), [e] = h(
+    v({
       scrollPosition: 0,
       scrollDirection: "forward"
     })
-  ), e = p(
-    a((o) => {
-      const s = o.target;
-      if (!s)
+  ), c = w(n);
+  return g(() => {
+    const s = window.innerWidth < m.xl ? window : r.current;
+    if (!s)
+      return () => {
+      };
+    const i = S((d) => {
+      var a;
+      const u = d.target;
+      if (!u)
         return;
-      const { scrollTop: t } = s, c = r.current < t ? "forward" : "backward";
-      r.current = t, l.set({ scrollPosition: t, scrollDirection: c, tabsShown: l.get().tabsShown });
-    }, 200),
-    []
-  );
-  return d(() => {
-    const o = i.current;
-    return o ? (o.addEventListener("scroll", e), () => {
-      o.removeEventListener("scroll", e);
-    }) : () => {
+      let o = 0;
+      c.screen.size < m.xl ? o = ((a = t.current) == null ? void 0 : a.getBoundingClientRect().y) || 0 : o = u.scrollTop;
+      const p = l.current < o ? "forward" : "backward";
+      l.current = o, e.set({
+        scrollPosition: Math.round(o),
+        scrollDirection: p,
+        tabsShown: e.get().tabsShown
+      });
+    }, 200);
+    return s.addEventListener("scroll", i), () => {
+      s.removeEventListener("scroll", i);
     };
-  }, [e]), [i, l];
+  }, [e, t, c.screen]), [r, e];
 };
 export {
-  w as useSdkScroll
+  D as scrollIntoAppView,
+  I as useSdkScroll
 };

package/lib/ui/gamification/detail/header/index.js

@@ -1,25 +1,25 @@
-import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { QuestionType as n } from "@streamlayer/sdk-web-types";
 import { QuestionTypeData as c } from "../../constants.js";
-import { Container as l, QuestionTypeWrap as a, QuestionTypeIcon as p, QuestionTypeTitle as s, CloseButton as d, CloseIcon as Q } from "./styles.js";
+import { Container as l, QuestionTypeWrap as a, QuestionTypeIcon as p, QuestionTypeTitle as s, CloseIconWrap as d, CloseIcon as I } from "./styles.js";
 import "@linaria/react";
 import "../../../icons/index.js";
 import "react";
-const N = ({ type: e, close: t, label: m }) => {
-  const o = e ? c[e] : { label: m, iconName: void 0 };
-  return /* @__PURE__ */ r(l, { children: [
-    /* @__PURE__ */ r(a, { children: [
-      (o == null ? void 0 : o.iconName) && /* @__PURE__ */ i(
+const N = ({ type: r, close: m, label: t }) => {
+  const o = r ? c[r] : { label: t, iconName: void 0 };
+  return /* @__PURE__ */ i(l, { children: [
+    /* @__PURE__ */ i(a, { children: [
+      (o == null ? void 0 : o.iconName) && /* @__PURE__ */ e(
         p,
         {
-          "data-type-trivia": e === n.TRIVIA,
-          "data-type-poll": e === n.POLL,
+          "data-type-trivia": r === n.TRIVIA,
+          "data-type-poll": r === n.POLL,
           name: o.iconName
         }
       ),
-      (o == null ? void 0 : o.label) && /* @__PURE__ */ i(s, { children: o.label })
+      (o == null ? void 0 : o.label) && /* @__PURE__ */ e(s, { children: o.label })
     ] }),
-    /* @__PURE__ */ i(d, { onClick: t, children: /* @__PURE__ */ i(Q, { name: "icon-cross" }) })
+    /* @__PURE__ */ e(d, { onClick: m, children: /* @__PURE__ */ e(I, { name: "icon-cross" }) })
   ] });
 };
 export {

package/lib/ui/gamification/detail/header/styles.d.ts

@@ -3,5 +3,5 @@ export declare const Container: import("@linaria/react").StyledComponent<import(
 export declare const QuestionTypeWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const QuestionTypeIcon: any;
 export declare const QuestionTypeTitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
-export declare const CloseButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & 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;

package/lib/ui/gamification/detail/header/styles.js

@@ -2,11 +2,11 @@ import { styled as s } from "@linaria/react";
 import { SvgIcon as o } from "../../../icons/index.js";
 import "react/jsx-runtime";
 import "react";
-const l = /* @__PURE__ */ s("div")({
+const r = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1vwopgc",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "QuestionTypeWrap",
   class: "qyktpt0",
   propsAsIs: !1
@@ -14,24 +14,24 @@ const l = /* @__PURE__ */ s("div")({
   name: "QuestionTypeIcon",
   class: "q951jdx",
   propsAsIs: !0
-}), m = /* @__PURE__ */ s("span")({
+}), I = /* @__PURE__ */ s("span")({
   name: "QuestionTypeTitle",
   class: "qss5f0e",
   propsAsIs: !1
-}), u = /* @__PURE__ */ s("button")({
-  name: "CloseButton",
+}), m = /* @__PURE__ */ s("div")({
+  name: "CloseIconWrap",
   class: "c1ao1jtv",
   propsAsIs: !1
-}), t = () => o, I = /* @__PURE__ */ s(t())({
+}), n = () => o, u = /* @__PURE__ */ s(n())({
   name: "CloseIcon",
   class: "cvsl7l3",
   propsAsIs: !0
 });
 export {
-  u as CloseButton,
-  I as CloseIcon,
-  l as Container,
+  u as CloseIcon,
+  m as CloseIconWrap,
+  r as Container,
   i as QuestionTypeIcon,
-  m as QuestionTypeTitle,
-  r as QuestionTypeWrap
+  I as QuestionTypeTitle,
+  l as QuestionTypeWrap
 };

package/lib/ui/gamification/leaderboard/static.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { type ScrollNodeRef } from '../../app/masters';
 import { ScrollStore } from '../../app/useSdkScroll';
 import { LeaderboardItemProps } from './list-item';
 type LeaderboardListProps = {
@@ -6,7 +7,7 @@ type LeaderboardListProps = {
     currentUserId?: string;
     openItemDetail: (id: string) => void;
     fetchMore: () => void;
-    scrollNode: React.MutableRefObject<HTMLDivElement | null>;
+    scrollNode: ScrollNodeRef;
     scrollStore: ScrollStore;
     hasMore: boolean;
 };

package/lib/ui/gamification/onboarding/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { Gamification } from '@streamlayer/feature-gamification';
+import { HeaderNodeRef, type AppNodeRef } from '../../app/masters';
 import { OnboardingStep } from './slides/onboarding-instructions';
 import { OnboardingInviteCardProps } from './slides/onboarding-invite-card';
 import { OnboardingRule } from './slides/onboarding-rules';
@@ -9,8 +10,12 @@ type OnboardingType = OnboardingInviteCardProps & {
     rules?: OnboardingRule[];
     rulesBtnLabel?: string;
     rulesTitle?: string;
+    termsTitle?: string;
+    termsText?: string;
     primaryColor?: string;
     inviteCardBtnLabel?: string;
+    loading: boolean;
+    renderToNode: AppNodeRef | HeaderNodeRef;
     onClose: () => void;
 };
 export declare const Onboarding: React.FC<OnboardingType>;