@streamlayer/react-ui 0.96.2 → 0.97.0

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

@@ -1,35 +1,32 @@
 import { jsx as i } from "react/jsx-runtime";
-import { OnboardingInviteCard as r } from "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
-import "../../useClipboardCopy.js";
+import { styled as r } from "@linaria/react";
+import { OnboardingInviteCard as o } from "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
+import "../../../../hooks/analytics.js";
+import "lodash.throttle";
 import "react";
+import "@streamlayer/sdk-web-interfaces";
+import "../../../theme/constants.js";
+import "@streamlayer/sdk-web-types";
+import "../../useClipboardCopy.js";
 import "../../../../index-jRXrW6ie.js";
 import "../../../../index-uEuzH3jr.js";
 import "../../../gamification/copyNotification/index.js";
 import "../../../icons/index.js";
-import "@linaria/react";
 import "../../../gamification/copyNotification/styles.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
-const k = ({ renderClipBoardNode: t, deepLink: o }) => /* @__PURE__ */ i(
-  r,
-  {
-    renderToNode: t,
-    inviteLink: o,
-    socialLinks: [
-      {
-        icon: "icon-facebook",
-        link: "https://www.facebook.com/TheMasters",
-        label: "Facebook"
-      },
-      {
-        icon: "icon-twitter",
-        link: "https://twitter.com/@TheMasters",
-        label: "X"
-      }
-    ],
+const e = /* @__PURE__ */ r("div")({
+  name: "InviteFriendsContainer",
+  class: "i1xmyxez",
+  propsAsIs: !1
+}), b = ({
+  deepLink: t
+}) => /* @__PURE__ */ i(e, {
+  children: /* @__PURE__ */ i(o, {
+    inviteLink: t,
     inviteCardTitle: "It’s More Fun With Friends",
     inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
-  }
-);
+  })
+});
 export {
-  k as Friends
+  b as Friends
 };

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

@@ -1,66 +1,72 @@
-import { jsx as t, jsxs as L, Fragment as f } from "react/jsx-runtime";
-import { styled as h } from "@linaria/react";
+import { jsx as t, jsxs as L, Fragment as h } from "react/jsx-runtime";
+import { styled as k } from "@linaria/react";
 import { useStore as p } from "@nanostores/react";
+import { useRef as u } from "react";
 import { useClipboardCopy as I } from "../../useClipboardCopy.js";
-import { InviteLink as k } from "../../../gamification/invite-link/index.js";
+import { InviteLink as y } from "../../../gamification/invite-link/index.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
-import "react";
 import "../../../icons/index.js";
 import "../../../gamification/leaderboard/list-item/styles.js";
 import "../../../../styles_z07sl8-w40geAFS.js";
-import { LeaderboardStaticList as u } from "../../../gamification/leaderboard/static.js";
-import { Friends as y } from "./Friends.js";
+import { LeaderboardStaticList as C } from "../../../gamification/leaderboard/static.js";
+import { Friends as b } from "./Friends.js";
 import "../../../../index-jRXrW6ie.js";
 import "../../../../index-uEuzH3jr.js";
 import "../../../gamification/copyNotification/index.js";
 import "../../../gamification/copyNotification/styles.js";
+import "../../../../hooks/analytics.js";
+import "lodash.throttle";
+import "@streamlayer/sdk-web-interfaces";
+import "../../../theme/constants.js";
+import "@streamlayer/sdk-web-types";
 import "../../../gamification/invite-link/styles.js";
 import "react-infinite-scroller";
 import "../../../gamification/leaderboard/list-item/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
-const b = /* @__PURE__ */ h("div")({
+const v = /* @__PURE__ */ k("div")({
   name: "InviteLinkContainer",
   class: "i1chxfpe",
   propsAsIs: !1
-}), R = ({
+}), Z = ({
   gamification: r,
   scrollNode: m,
   scrollStore: n,
-  renderClipBoardNode: o
+  renderClipBoardNode: s
 }) => {
-  const {
+  const e = u(null), {
     data: i,
-    hasMore: s,
-    loading: d,
+    hasMore: d,
+    loading: l,
     key: a
   } = p(r.leaderboardList.$store), {
-    data: e
-  } = p(r.deepLink.$store), [c, l] = I(o);
-  return !i.length && !d ? /* @__PURE__ */ t(y, {
-    renderClipBoardNode: o,
-    deepLink: e
-  }) : /* @__PURE__ */ L(f, {
-    children: [/* @__PURE__ */ t(u, {
+    data: o
+  } = p(r.deepLink.$store), [c, f] = I(e);
+  return !i.length && !l ? /* @__PURE__ */ t(b, {
+    renderClipBoardNode: s,
+    deepLink: o
+  }) : /* @__PURE__ */ L(h, {
+    children: [/* @__PURE__ */ t(C, {
       items: i,
       scrollNode: m,
       scrollStore: n,
       fetchMore: r.leaderboardList.fetchMore,
-      hasMore: s,
+      hasMore: d,
       openItemDetail: r.openUser,
       currentUserId: r.currentUserId.get()
-    }, a), e && /* @__PURE__ */ t(b, {
-      children: /* @__PURE__ */ t(k, {
-        onClick: () => c(e),
+    }, a), o && /* @__PURE__ */ t(v, {
+      ref: e,
+      children: /* @__PURE__ */ t(y, {
+        onClick: () => c(o),
         title: "Invite Friends",
         description: "Challenge them now!"
       })
-    }), l]
+    }), f]
   });
 };
 export {
-  R as Leaderboard
+  Z as Leaderboard
 };

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

@@ -16,6 +16,8 @@ import "../../../gamification/vote/expired-alert/index.js";
 import "../../../gamification/vote/expired-alert/styles.js";
 import "../../../gamification/vote/feedback/index.js";
 import "../../../gamification/vote/feedback/styles.js";
+import "../../../show-in/index.js";
+import "@linaria/core";
 import "../../../gamification/vote/styles.js";
 import "../../styles.js";
 import "../../../gamification/vote/vote-option/index.js";
@@ -71,7 +73,7 @@ const d = /* @__PURE__ */ n("div")({
     openedQuestion: s,
     isLoading: !!o
   }) : null;
-}, st = ({
+}, pt = ({
   gamification: t
 }) => {
   var s;
@@ -95,5 +97,5 @@ const d = /* @__PURE__ */ n("div")({
   });
 };
 export {
-  st as Question
+  pt as Question
 };

package/lib/ui/app/Features/Gamification/QuestionsList.js

@@ -1,17 +1,20 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as m } from "react/jsx-runtime";
 import { useStore as p } from "@nanostores/react";
-import { useMastersContext as s } from "../../useMastersContext.js";
-import { QuestionList as e } from "../../../gamification/question/list/index.js";
+import { useMastersContext as e } from "../../useMastersContext.js";
+import { QuestionList as s } from "../../../gamification/question/list/index.js";
 import "react";
 import "../../../gamification/question/index.js";
 import "@streamlayer/sdk-web-types";
 import "../../../gamification/constants.js";
-import "../../../gamification/question/styles.js";
+import "../../../skeleton/index.js";
+import "../../../skeleton/styles.js";
 import "@linaria/react";
+import "../../../gamification/question/styles.js";
 import "../../../icons/index.js";
 import "../../../gamification/question/insight/index.js";
 import "../../../questions/insight/index.js";
 import "../../../video-player/index.js";
+import "@linaria/core";
 import "../../../video-player/styles.js";
 import "../../../questions/insight/styles.js";
 import "../../../gamification/question/insight/styles.js";
@@ -25,10 +28,10 @@ import "../../../gamification/question/twitter/styles.js";
 import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/question/list/styles.js";
-const E = ({ store: i, openQuestion: m }) => {
-  const { sdk: t } = s(), o = p(i);
-  return o != null && o.data ? /* @__PURE__ */ r(e, { openQuestion: m, questions: o.data, controlVideo: t == null ? void 0 : t.controlVideoPlayer }) : /* @__PURE__ */ r("div", { children: "wait questions..." });
+const H = ({ store: t, openQuestion: r }) => {
+  const { sdk: o } = e(), i = p(t);
+  return /* @__PURE__ */ m(s, { openQuestion: r, questions: i.data, controlVideo: o == null ? void 0 : o.controlVideoPlayer });
 };
 export {
-  E as QuestionsList
+  H as QuestionsList
 };

package/lib/ui/app/Features/Gamification/Tabs.js

@@ -1,16 +1,16 @@
-import { jsxs as h, jsx as t, Fragment as C } from "react/jsx-runtime";
+import { jsxs as h, jsx as t, Fragment as D } from "react/jsx-runtime";
 import { useStore as f } from "@nanostores/react";
-import { useState as D, useTransition as T, useEffect as v } from "react";
-import { TabsContainer as A, TabsNavContainer as I, SDKWhiteContainer as P, UserSummaryContainer as S, SDKContentContainer as V, LeaderboardContainer as E } from "../../styles.js";
-import { scrollIntoAppView as K } from "../../useSdkScroll.js";
-import { ActivePages as a, Tabs as L } from "../../../gamification/tabs/index.js";
-import { Leaderboard as B } from "./Leaderboard.js";
-import { QuestionsList as F } from "./QuestionsList.js";
-import { UserSummary as O } from "./UserSummary.js";
+import { useState as T, useTransition as v, useEffect as A } from "react";
+import { TabsContainer as I, TabsNavContainer as P, SDKWhiteContainer as S, UserSummaryContainer as V, SDKContentContainer as E, LeaderboardContainer as K } from "../../styles.js";
+import { scrollIntoAppView as L } from "../../useSdkScroll.js";
+import { ActivePages as a, Tabs as B } from "../../../gamification/tabs/index.js";
+import { Leaderboard as F } from "./Leaderboard.js";
+import { QuestionsList as O } from "./QuestionsList.js";
+import { UserSummary as Q } from "./UserSummary.js";
 import "@linaria/react";
 import "lodash.throttle";
 import "../../../theme/constants.js";
-import "../../../../index-keh7OLCY.js";
+import "../../../../index-z0QjLiEL.js";
 import "../../../../index-uEuzH3jr.js";
 import "../../../gamification/tabs/styles.js";
 import "../../useClipboardCopy.js";
@@ -19,6 +19,9 @@ import "../../../gamification/copyNotification/index.js";
 import "../../../icons/index.js";
 import "../../../gamification/copyNotification/styles.js";
 import "../../../gamification/invite-link/index.js";
+import "../../../../hooks/analytics.js";
+import "@streamlayer/sdk-web-interfaces";
+import "@streamlayer/sdk-web-types";
 import "../../../gamification/invite-link/styles.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
@@ -35,12 +38,14 @@ import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js
 import "../../useMastersContext.js";
 import "../../../gamification/question/list/index.js";
 import "../../../gamification/question/index.js";
-import "@streamlayer/sdk-web-types";
 import "../../../gamification/constants.js";
+import "../../../skeleton/index.js";
+import "../../../skeleton/styles.js";
 import "../../../gamification/question/styles.js";
 import "../../../gamification/question/insight/index.js";
 import "../../../questions/insight/index.js";
 import "../../../video-player/index.js";
+import "@linaria/core";
 import "../../../video-player/styles.js";
 import "../../../questions/insight/styles.js";
 import "../../../gamification/question/insight/styles.js";
@@ -59,14 +64,14 @@ import "../../../gamification/user-statistics/components/rank/styles.js";
 import "../../../gamification/user-statistics/components/statistic/index.js";
 import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
-const qt = ({ gamification: o, className: l, scrollStore: r, scrollNode: u, appNode: e, style: b, responsiveStore: m, headerNode: w }) => {
-  const { tabsShown: d } = f(r, { keys: ["tabsShown"] }), [p, y] = D(a.HOME), [, g] = T(), { sdkInDesktopView: n } = f(m, { keys: ["sdkInDesktopView"] }), k = (i) => {
+const Yt = ({ gamification: o, className: l, scrollStore: r, scrollNode: u, appNode: e, style: b, responsiveStore: m, headerNode: w }) => {
+  const { tabsShown: d } = f(r, { keys: ["tabsShown"] }), [p, y] = T(a.HOME), [, g] = v(), { sdkInDesktopView: n, screen: k } = f(m, { keys: ["sdkInDesktopView"] }), x = (i) => {
     g(() => {
       var c;
-      y(i), n === !1 && (((c = e.current) == null ? void 0 : c.getBoundingClientRect().y) || 0) < 0 && K(e, { behavior: "instant" });
+      y(i), n === !1 && (((c = e.current) == null ? void 0 : c.getBoundingClientRect().y) || 0) < 0 && L(e, k.size, { behavior: "instant" });
     });
   };
-  v(() => r.listen((i) => {
+  A(() => r.listen((i) => {
     if (i.scrollPosition === 0) {
       r.setKey("tabsShown", !0);
       return;
@@ -75,25 +80,25 @@ const qt = ({ gamification: o, className: l, scrollStore: r, scrollNode: u, appN
   }), [r, m]);
   let s = "0px";
   n ? s = d ? "0px" : "calc(8px - var(--header-height) - var(--header-offset))" : s = d ? "calc(var(--header-height) + var(--header-offset) - 2px)" : "0px";
-  const x = n ? e : w;
-  return /* @__PURE__ */ h(A, { className: l, style: b, children: [
+  const C = n ? e : w;
+  return /* @__PURE__ */ h(I, { className: l, style: b, children: [
     /* @__PURE__ */ t(
-      I,
+      P,
       {
         style: {
           top: s
         },
-        children: /* @__PURE__ */ t(L, { activePage: p, toggleActivePage: k })
+        children: /* @__PURE__ */ t(B, { activePage: p, toggleActivePage: x })
       }
     ),
-    p === a.HOME && /* @__PURE__ */ h(C, { children: [
-      /* @__PURE__ */ t(P, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(O, { userSummary: o.userSummary }) }) }),
-      /* @__PURE__ */ t(V, { style: { flex: 1 }, children: /* @__PURE__ */ t(F, { openQuestion: o.openQuestion, store: o.feedList.getStore() }) })
+    p === a.HOME && /* @__PURE__ */ h(D, { children: [
+      /* @__PURE__ */ t(S, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ t(V, { children: /* @__PURE__ */ t(Q, { userSummary: o.userSummary }) }) }),
+      /* @__PURE__ */ t(E, { style: { flex: 1 }, children: /* @__PURE__ */ t(O, { openQuestion: o.openQuestion, store: o.feedList.getStore() }) })
     ] }),
-    p === a.LEADERBOARD && /* @__PURE__ */ t(E, { children: /* @__PURE__ */ t(
-      B,
+    p === a.LEADERBOARD && /* @__PURE__ */ t(K, { children: /* @__PURE__ */ t(
+      F,
       {
-        renderClipBoardNode: x,
+        renderClipBoardNode: C,
         scrollStore: r,
         scrollNode: u,
         gamification: o
@@ -102,5 +107,5 @@ const qt = ({ gamification: o, className: l, scrollStore: r, scrollNode: u, appN
   ] });
 };
 export {
-  qt as Tabs
+  Yt as Tabs
 };

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

@@ -1,25 +1,27 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useState as c, useEffect as p } from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { useState as e, useEffect as s } from "react";
 import { UserStatistics as n } from "../../../gamification/user-statistics/index.js";
+import "../../../skeleton/index.js";
+import "../../../skeleton/styles.js";
+import "@linaria/react";
 import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
 import "../../../gamification/user-statistics/components/rank/styles.js";
-import "@linaria/react";
 import "../../../gamification/user-statistics/components/statistic/index.js";
 import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
-const g = ({ userSummary: e }) => {
-  var i;
-  const [r, s] = c(void 0);
-  return p(() => {
-    const m = e.subscribe((t) => {
-      t != null && t.data && s(t.data);
+const E = ({ userSummary: o }) => {
+  var m;
+  const [t, i] = e(void 0);
+  return s(() => {
+    const p = o.subscribe((r) => {
+      r != null && r.data && i(r.data);
     });
     return () => {
-      m();
+      p();
     };
-  }, [e]), r != null && r.summary ? /* @__PURE__ */ o(n, { ...r.summary, successRate: (i = r.percentage) == null ? void 0 : i.correct }) : /* @__PURE__ */ o("div", { children: "wait user..." });
+  }, [o]), /* @__PURE__ */ c(n, { loading: !(t != null && t.summary), ...t == null ? void 0 : t.summary, successRate: (m = t == null ? void 0 : t.percentage) == null ? void 0 : m.correct });
 };
 export {
-  g as UserSummary
+  E as UserSummary
 };

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

@@ -2,14 +2,16 @@ import { GamificationOverlay as o } from "./index.js";
 import "react/jsx-runtime";
 import "@linaria/react";
 import "@nanostores/react";
-import "react";
 import "../../styles.js";
 import "../../../gamification/detail/header/index.js";
 import "@streamlayer/sdk-web-types";
 import "../../../gamification/constants.js";
 import "../../../gamification/detail/header/styles.js";
 import "../../../icons/index.js";
+import "react";
 import "../../../gamification/user-statistics/index.js";
+import "../../../skeleton/index.js";
+import "../../../skeleton/styles.js";
 import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
 import "../../../gamification/user-statistics/components/rank/styles.js";
@@ -54,7 +56,7 @@ import "../../../gamification/vote/twitter-details/styles.js";
 import "./Tabs.js";
 import "../../useSdkScroll.js";
 import "lodash.throttle";
-import "../../../../index-keh7OLCY.js";
+import "../../../../index-z0QjLiEL.js";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";
@@ -62,6 +64,8 @@ import "../../useClipboardCopy.js";
 import "../../../gamification/copyNotification/index.js";
 import "../../../gamification/copyNotification/styles.js";
 import "../../../gamification/invite-link/index.js";
+import "../../../../hooks/analytics.js";
+import "@streamlayer/sdk-web-interfaces";
 import "../../../gamification/invite-link/styles.js";
 import "react-virtualized-auto-sizer";
 import "react-window";

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

@@ -12,3 +12,13 @@ export declare const GamificationOverlay: React.FC<{
     scrollNode: ScrollNodeRef;
     headerNode: HeaderNodeRef;
 }>;
+/**
+ * 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;
+}>;

package/lib/ui/app/Features/Gamification/index.js

@@ -1,18 +1,20 @@
-import { jsx as o, jsxs as c, Fragment as U } from "react/jsx-runtime";
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
 import { styled as a } from "@linaria/react";
-import { useStore as n } from "@nanostores/react";
-import { useMemo as w } from "react";
-import { SDKWhiteContainer as x } from "../../styles.js";
-import { VoteHeader as V } from "../../../gamification/detail/header/index.js";
-import { UserStatistics as y } from "../../../gamification/user-statistics/index.js";
-import { ModalPortal as R } from "../../../modal/index.js";
+import { useStore as s } from "@nanostores/react";
+import { SDKWhiteContainer as h } from "../../styles.js";
+import { VoteHeader as C } from "../../../gamification/detail/header/index.js";
+import { UserStatistics as k } from "../../../gamification/user-statistics/index.js";
+import { ModalPortal as I } from "../../../modal/index.js";
 import { ShowIn as S } from "../../../show-in/index.js";
-import { Question as D } from "./Question.js";
-import { Tabs as F } from "./Tabs.js";
+import { Question as U } from "./Question.js";
+import { Tabs as w } from "./Tabs.js";
 import "@streamlayer/sdk-web-types";
 import "../../../gamification/constants.js";
 import "../../../gamification/detail/header/styles.js";
 import "../../../icons/index.js";
+import "react";
+import "../../../skeleton/index.js";
+import "../../../skeleton/styles.js";
 import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
 import "../../../gamification/user-statistics/components/rank/styles.js";
@@ -53,7 +55,7 @@ import "../../../questions/twitter/styles.js";
 import "../../../gamification/vote/twitter-details/styles.js";
 import "../../useSdkScroll.js";
 import "lodash.throttle";
-import "../../../../index-keh7OLCY.js";
+import "../../../../index-z0QjLiEL.js";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";
@@ -61,6 +63,8 @@ import "../../useClipboardCopy.js";
 import "../../../gamification/copyNotification/index.js";
 import "../../../gamification/copyNotification/styles.js";
 import "../../../gamification/invite-link/index.js";
+import "../../../../hooks/analytics.js";
+import "@streamlayer/sdk-web-interfaces";
 import "../../../gamification/invite-link/styles.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
@@ -85,76 +89,77 @@ import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "./UserSummary.js";
-const M = () => S, d = /* @__PURE__ */ a(M())({
+const x = () => S, c = /* @__PURE__ */ a(x())({
   name: "OpenedContainer",
   class: "oar61gl",
   propsAsIs: !0
-}), O = /* @__PURE__ */ a("div")({
+}), y = /* @__PURE__ */ a("div")({
   name: "UserContainer",
   class: "u14zaal4",
   propsAsIs: !1
-}), Q = ({
+}), V = ({
   correct: r,
-  incorrect: p
+  incorrect: i
 }) => {
-  const t = r + p;
-  return t === 0 ? 0 : Math.round(r / t * 100);
-}, uo = ({
+  const o = r + i;
+  return o === 0 ? 0 : Math.round(r / o * 100);
+}, so = ({
   gamification: r,
-  scrollStore: p,
-  className: t,
-  appNode: i,
-  scrollNode: f,
-  headerNode: h,
-  responsiveStore: s
+  scrollStore: i,
+  className: o,
+  appNode: e,
+  scrollNode: p,
+  headerNode: m,
+  responsiveStore: n
+}) => /* @__PURE__ */ t(w, {
+  appNode: e,
+  headerNode: m,
+  scrollStore: i,
+  scrollNode: p,
+  className: o,
+  gamification: r,
+  responsiveStore: n
+}), lo = ({
+  gamification: r,
+  className: i,
+  appNode: o,
+  responsiveStore: e
 }) => {
-  const e = n(r.openedQuestion.$store), m = n(r.openedUser), {
-    sdkInDesktopView: l
-  } = n(s, {
+  var l;
+  const p = s(r.openedQuestion.$store), m = s(r.openedUser), {
+    sdkInDesktopView: n
+  } = s(e, {
     keys: ["sdkInDesktopView"]
-  }), C = w(() => {
-    var u;
-    const k = (((u = i.current) == null ? void 0 : u.getBoundingClientRect().y) || 0) < 0;
-    if (!i.current || !e && !m)
-      return null;
-    const I = e ? /* @__PURE__ */ o(d, {
-      className: t,
-      children: /* @__PURE__ */ o(D, {
-        gamification: r
-      })
-    }) : m ? /* @__PURE__ */ o(d, {
-      className: t,
-      children: /* @__PURE__ */ c(O, {
-        children: [/* @__PURE__ */ o(V, {
-          label: "Friend's Rank",
-          close: r.closeUser
-        }), /* @__PURE__ */ o(x, {
-          children: /* @__PURE__ */ o(y, {
-            ...m,
-            successRate: Q(m)
-          })
-        })]
-      })
-    }) : null;
-    return /* @__PURE__ */ o(R, {
-      container: i,
-      useContainer: !l,
-      fixedView: k,
-      children: I
-    });
-  }, [i, t, r, e, m, l]);
-  return /* @__PURE__ */ c(U, {
-    children: [C, /* @__PURE__ */ o(F, {
-      appNode: i,
-      headerNode: h,
-      scrollStore: p,
-      scrollNode: f,
-      className: t,
-      gamification: r,
-      responsiveStore: s
-    })]
+  }), u = (((l = o.current) == null ? void 0 : l.getBoundingClientRect().y) || 0) < 0;
+  if (!o.current || !p && !m)
+    return null;
+  const d = p ? /* @__PURE__ */ t(c, {
+    className: i,
+    children: /* @__PURE__ */ t(U, {
+      gamification: r
+    })
+  }) : m ? /* @__PURE__ */ t(c, {
+    className: i,
+    children: /* @__PURE__ */ f(y, {
+      children: [/* @__PURE__ */ t(C, {
+        label: "Friend's Rank",
+        close: r.closeUser
+      }), /* @__PURE__ */ t(h, {
+        children: /* @__PURE__ */ t(k, {
+          ...m,
+          successRate: V(m)
+        })
+      })]
+    })
+  }) : null;
+  return /* @__PURE__ */ t(I, {
+    container: o,
+    useContainer: !n,
+    fixedView: u,
+    children: d
   });
 };
 export {
-  uo as GamificationOverlay
+  so as GamificationOverlay,
+  lo as GamificationOverlayStandalone
 };

package/lib/ui/app/Features/index.d.ts

@@ -15,3 +15,11 @@ export declare const ActiveFeature: React.FC<{
     headerNode: HeaderNodeRef;
     className?: string;
 }>;
+/** render feature by type */
+export declare const StandaloneFeature: React.FC<{
+    sdk: StreamLayerSDK;
+    feature: Features | null;
+    responsiveStore: ResponsiveStore;
+    appNode: AppNodeRef;
+    className?: string;
+}>;