@streamlayer/react-ui 0.93.0 → 0.95.0

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

@@ -1,15 +1,16 @@
 import { jsx as i } from "react/jsx-runtime";
-import { OnboardingInviteCard as e } from "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
-import "../../../../useClipboardCopy-E5rEe6It.js";
+import { OnboardingInviteCard as r } from "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
+import "../../useClipboardCopy.js";
 import "react";
+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 h = ({ renderClipBoardNode: t, deepLink: o }) => /* @__PURE__ */ i(
-  e,
+const k = ({ renderClipBoardNode: t, deepLink: o }) => /* @__PURE__ */ i(
+  r,
   {
     renderToNode: t,
     inviteLink: o,
@@ -30,5 +31,5 @@ const h = ({ renderClipBoardNode: t, deepLink: o }) => /* @__PURE__ */ i(
   }
 );
 export {
-  h as Friends
+  k as Friends
 };

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

@@ -1,7 +1,7 @@
 import { jsx as t, jsxs as L, Fragment as f } from "react/jsx-runtime";
 import { styled as h } from "@linaria/react";
 import { useStore as p } from "@nanostores/react";
-import { u as I } from "../../../../useClipboardCopy-E5rEe6It.js";
+import { useClipboardCopy as I } from "../../useClipboardCopy.js";
 import { InviteLink as k } from "../../../gamification/invite-link/index.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
@@ -12,6 +12,7 @@ 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 "../../../../index-jRXrW6ie.js";
 import "../../../../index-uEuzH3jr.js";
 import "../../../gamification/copyNotification/index.js";
 import "../../../gamification/copyNotification/styles.js";
@@ -25,7 +26,7 @@ const b = /* @__PURE__ */ h("div")({
   name: "InviteLinkContainer",
   class: "i1chxfpe",
   propsAsIs: !1
-}), Q = ({
+}), R = ({
   gamification: r,
   scrollNode: m,
   scrollStore: n,
@@ -61,5 +62,5 @@ const b = /* @__PURE__ */ h("div")({
   });
 };
 export {
-  Q as Leaderboard
+  R as Leaderboard
 };

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

@@ -1,9 +1,9 @@
 import { jsxs as p, jsx as o } from "react/jsx-runtime";
 import { styled as u } from "@linaria/react";
 import { useStore as m } from "@nanostores/react";
-import { QuestionType as a } from "@streamlayer/sdk-web-types";
-import { VoteHeader as n } from "../../../gamification/detail/header/index.js";
-import { Sponsor as l } from "../../../gamification/detail/sponsor/index.js";
+import { QuestionType as n } from "@streamlayer/sdk-web-types";
+import { VoteHeader as l } from "../../../gamification/detail/header/index.js";
+import { Sponsor as a } from "../../../gamification/detail/sponsor/index.js";
 import { Vote as c } from "../../../gamification/vote/index.js";
 import { InsightDetails as b } from "../../../gamification/vote/insight-details/index.js";
 import { TwitterDetails as f } from "../../../gamification/vote/twitter-details/index.js";
@@ -29,27 +29,25 @@ import "../../../gamification/vote/win-bar/styles.js";
 import "../../../questions/insight/index.js";
 import "../../../video-player/index.js";
 import "../../../video-player/styles.js";
-import "../../../../utils/common.js";
 import "../../../questions/insight/styles.js";
 import "../../../gamification/vote/insight-details/styles.js";
 import "../../../questions/twitter/index.js";
 import "../../../questions/twitter/account/index.js";
+import "../../../../utils/common.js";
 import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
 import "../../../gamification/vote/twitter-details/styles.js";
-const d = /* @__PURE__ */ u("div")({
+const y = /* @__PURE__ */ u("div")({
   name: "QuestionContainer",
   class: "qdri6g3",
   propsAsIs: !1
-}), y = ({
+}), d = ({
   openedQuestion: t
 }) => {
   var r, i;
   return ((r = t == null ? void 0 : t.attributes) == null ? void 0 : r.attributes.case) === "insight" ? /* @__PURE__ */ o(b, {
-    created: t.attributes.created,
     ...t.attributes.attributes.value
   }) : ((i = t == null ? void 0 : t.attributes) == null ? void 0 : i.attributes.case) === "tweet" ? /* @__PURE__ */ o(f, {
-    created: t.attributes.created,
     ...t.attributes.attributes.value
   }) : null;
 }, h = ({
@@ -58,34 +56,34 @@ const d = /* @__PURE__ */ u("div")({
   close: i
 }) => {
   const {
-    loading: s,
-    data: e
+    loading: e,
+    data: s
   } = t;
-  return e ? /* @__PURE__ */ o(c, {
+  return s ? /* @__PURE__ */ o(c, {
     vote: r,
     close: i,
-    openedQuestion: e,
-    isLoading: !!s
+    openedQuestion: s,
+    isLoading: !!e
   }) : null;
 }, it = ({
   gamification: t
 }) => {
-  var e;
+  var s;
   const r = m(t.openedQuestion.$store), i = m(t.openedQuestion.$extendedStore);
   if (!r)
     return null;
-  const s = r.type;
-  return /* @__PURE__ */ p(d, {
-    children: [/* @__PURE__ */ o(n, {
+  const e = r.type;
+  return /* @__PURE__ */ p(y, {
+    children: [/* @__PURE__ */ o(l, {
       close: t.closeQuestion,
-      type: ((e = r.attributes) == null ? void 0 : e.type) || a.UNSET
-    }), s === "question" && /* @__PURE__ */ o(h, {
+      type: ((s = r.attributes) == null ? void 0 : s.type) || n.UNSET
+    }), e === "question" && /* @__PURE__ */ o(h, {
       vote: t.submitAnswer,
       close: t.closeQuestion,
       extendedQuestion: i
-    }), s !== "question" && /* @__PURE__ */ o(y, {
+    }), e !== "question" && /* @__PURE__ */ o(d, {
       openedQuestion: r
-    }), /* @__PURE__ */ o(l, {
+    }), /* @__PURE__ */ o(a, {
       sponsorLogo: ""
     })]
   });

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

@@ -12,12 +12,12 @@ import "../../../gamification/question/insight/index.js";
 import "../../../questions/insight/index.js";
 import "../../../video-player/index.js";
 import "../../../video-player/styles.js";
-import "../../../../utils/common.js";
 import "../../../questions/insight/styles.js";
 import "../../../gamification/question/insight/styles.js";
 import "../../../gamification/question/twitter/index.js";
 import "../../../questions/twitter/index.js";
 import "../../../questions/twitter/account/index.js";
+import "../../../../utils/common.js";
 import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
 import "../../../gamification/question/twitter/styles.js";

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

@@ -1,19 +1,20 @@
-import { jsxs as f, jsx as r, Fragment as S } from "react/jsx-runtime";
-import { useStore as A } from "@nanostores/react";
-import { useState as h, useTransition as D, useEffect as P } from "react";
-import { TabsContainer as k, TabsNavContainer as E, SDKWhiteContainer as I, UserSummaryContainer as L, SDKContentContainer as V, LeaderboardContainer as K } from "../../styles.js";
-import { scrollIntoAppView as B } from "../../useSdkScroll.js";
-import { ActivePages as n, Tabs as F } from "../../../gamification/tabs/index.js";
-import { Leaderboard as O } from "./Leaderboard.js";
-import { QuestionsList as Q } from "./QuestionsList.js";
-import { UserSummary as R } from "./UserSummary.js";
+import { jsxs as h, jsx as t, Fragment as C } 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 "@linaria/react";
 import "lodash.throttle";
 import "../../../theme/constants.js";
 import "../../../../index-keh7OLCY.js";
 import "../../../../index-uEuzH3jr.js";
 import "../../../gamification/tabs/styles.js";
-import "../../../../useClipboardCopy-E5rEe6It.js";
+import "../../useClipboardCopy.js";
+import "../../../../index-jRXrW6ie.js";
 import "../../../gamification/copyNotification/index.js";
 import "../../../icons/index.js";
 import "../../../gamification/copyNotification/styles.js";
@@ -57,50 +58,48 @@ 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 qr = ({ gamification: i, className: u, scrollStore: o, scrollNode: b, appNode: e, style: g, responsiveStore: T, headerNode: y }) => {
-  const [a, v] = h(!1), [m, w] = h(n.HOME), [, l] = D(), { sdkInScrollView: p } = A(T, { keys: ["sdkInScrollView"] }), x = (t) => {
-    l(() => {
+const $t = ({ 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) => {
+    g(() => {
       var c;
-      w(t), p === !1 && (((c = e.current) == null ? void 0 : c.getBoundingClientRect().y) || 0) < 0 && B(e, { behavior: "instant" });
+      y(i), n === !1 && (((c = e.current) == null ? void 0 : c.getBoundingClientRect().y) || 0) < 0 && K(e, { behavior: "instant" });
     });
-  }, d = (t) => {
-    l(() => v(t));
   };
-  P(() => o.listen((t) => {
-    if (t.scrollPosition === 0) {
-      d(!1), o.setKey("tabsShown", !1);
+  v(() => r.listen((i) => {
+    if (i.scrollPosition === 0) {
+      r.setKey("tabsShown", !0);
       return;
     }
-    d(t.scrollDirection === "forward"), o.setKey("tabsShown", t.scrollDirection !== "forward");
-  }), [o]);
+    m.get().sdkInDesktopView ? r.setKey("tabsShown", i.scrollDirection === "backward") : r.setKey("tabsShown", i.scrollDirection === "forward");
+  }), [r, m]);
   let s = "0px";
-  p ? s = a ? "calc(8px - var(--header-height) - var(--header-offset))" : "0px" : s = a ? "calc(var(--header-height) + var(--header-offset))" : "0px";
-  const C = p ? e : y;
-  return /* @__PURE__ */ f(k, { className: u, style: g, children: [
-    /* @__PURE__ */ r(
-      E,
+  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: [
+    /* @__PURE__ */ t(
+      I,
       {
         style: {
           top: s
         },
-        children: /* @__PURE__ */ r(F, { activePage: m, toggleActivePage: x })
+        children: /* @__PURE__ */ t(L, { activePage: p, toggleActivePage: k })
       }
     ),
-    m === n.HOME && /* @__PURE__ */ f(S, { children: [
-      /* @__PURE__ */ r(I, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ r(L, { children: /* @__PURE__ */ r(R, { userSummary: i.userSummary }) }) }),
-      /* @__PURE__ */ r(V, { style: { flex: 1 }, children: /* @__PURE__ */ r(Q, { openQuestion: i.openQuestion, store: i.feedList.getStore() }) })
+    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() }) })
     ] }),
-    m === n.LEADERBOARD && /* @__PURE__ */ r(K, { children: /* @__PURE__ */ r(
-      O,
+    p === a.LEADERBOARD && /* @__PURE__ */ t(E, { children: /* @__PURE__ */ t(
+      B,
       {
-        renderClipBoardNode: C,
-        scrollStore: o,
-        scrollNode: b,
-        gamification: i
+        renderClipBoardNode: x,
+        scrollStore: r,
+        scrollNode: u,
+        gamification: o
       }
     ) })
   ] });
 };
 export {
-  qr as Tabs
+  $t as Tabs
 };

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

@@ -3,20 +3,12 @@ import "react/jsx-runtime";
 import "@linaria/react";
 import "@nanostores/react";
 import "react";
-import "../../../../useClipboardCopy-E5rEe6It.js";
-import "../../../../index-uEuzH3jr.js";
-import "../../../gamification/copyNotification/index.js";
-import "../../../icons/index.js";
-import "../../../gamification/copyNotification/styles.js";
 import "../../styles.js";
-import "../../useSdkScroll.js";
-import "lodash.throttle";
-import "../../../theme/constants.js";
-import "../../../../index-keh7OLCY.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 "../../../gamification/user-statistics/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
@@ -24,8 +16,11 @@ 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";
-import "../../../show-in/index.js";
+import "../../../modal/index.js";
 import "@linaria/core";
+import "../../../../index-jRXrW6ie.js";
+import "../../../../index-uEuzH3jr.js";
+import "../../../show-in/index.js";
 import "./Question.js";
 import "../../../gamification/detail/sponsor/index.js";
 import "../../../gamification/vote/index.js";
@@ -41,6 +36,7 @@ import "../../../gamification/vote/vote-option/styles.js";
 import "../../../gamification/vote/win-bar/index.js";
 import "../../../timer/index.js";
 import "react-countdown-circle-timer";
+import "../../../theme/constants.js";
 import "../../../gamification/vote/win-bar/styles.js";
 import "../../../gamification/vote/insight-details/index.js";
 import "../../../questions/insight/index.js";
@@ -55,9 +51,15 @@ import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
 import "../../../gamification/vote/twitter-details/styles.js";
 import "./Tabs.js";
+import "../../useSdkScroll.js";
+import "lodash.throttle";
+import "../../../../index-keh7OLCY.js";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";
+import "../../useClipboardCopy.js";
+import "../../../gamification/copyNotification/index.js";
+import "../../../gamification/copyNotification/styles.js";
 import "../../../gamification/invite-link/index.js";
 import "../../../gamification/invite-link/styles.js";
 import "react-virtualized-auto-sizer";

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

@@ -1,25 +1,18 @@
-import { jsxs as d, jsx as t, Fragment as b } from "react/jsx-runtime";
-import { styled as S } from "@linaria/react";
-import { useStore as f } from "@nanostores/react";
-import { useRef as v, useMemo as x, useEffect as R } from "react";
-import { r as y } from "../../../../useClipboardCopy-E5rEe6It.js";
-import { SDKWhiteContainer as F } from "../../styles.js";
-import { scrollIntoAppView as O } from "../../useSdkScroll.js";
-import { VoteHeader as T } from "../../../gamification/detail/header/index.js";
-import { UserStatistics as A } from "../../../gamification/user-statistics/index.js";
-import { ShowIn as P } from "../../../show-in/index.js";
-import { Question as Q } from "./Question.js";
-import { Tabs as j } from "./Tabs.js";
-import "../../../../index-uEuzH3jr.js";
-import "../../../gamification/copyNotification/index.js";
-import "../../../icons/index.js";
-import "../../../gamification/copyNotification/styles.js";
-import "lodash.throttle";
-import "../../../theme/constants.js";
-import "../../../../index-keh7OLCY.js";
+import { jsx as t, jsxs as c, Fragment as U } 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 { createModal as M } from "../../../modal/index.js";
+import { ShowIn as R } from "../../../show-in/index.js";
+import { Question as S } from "./Question.js";
+import { Tabs as D } from "./Tabs.js";
 import "@streamlayer/sdk-web-types";
 import "../../../gamification/constants.js";
 import "../../../gamification/detail/header/styles.js";
+import "../../../icons/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
 import "../../../gamification/user-statistics/components/rank/styles.js";
@@ -27,6 +20,8 @@ import "../../../gamification/user-statistics/components/statistic/index.js";
 import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
 import "@linaria/core";
+import "../../../../index-jRXrW6ie.js";
+import "../../../../index-uEuzH3jr.js";
 import "../../../gamification/detail/sponsor/index.js";
 import "../../../gamification/vote/index.js";
 import "../../../gamification/vote/expired-alert/index.js";
@@ -41,6 +36,7 @@ import "../../../gamification/vote/vote-option/styles.js";
 import "../../../gamification/vote/win-bar/index.js";
 import "../../../timer/index.js";
 import "react-countdown-circle-timer";
+import "../../../theme/constants.js";
 import "../../../gamification/vote/win-bar/styles.js";
 import "../../../gamification/vote/insight-details/index.js";
 import "../../../questions/insight/index.js";
@@ -54,9 +50,15 @@ import "../../../questions/twitter/account/index.js";
 import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
 import "../../../gamification/vote/twitter-details/styles.js";
+import "../../useSdkScroll.js";
+import "lodash.throttle";
+import "../../../../index-keh7OLCY.js";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";
+import "../../useClipboardCopy.js";
+import "../../../gamification/copyNotification/index.js";
+import "../../../gamification/copyNotification/styles.js";
 import "../../../gamification/invite-link/index.js";
 import "../../../gamification/invite-link/styles.js";
 import "react-virtualized-auto-sizer";
@@ -82,94 +84,76 @@ import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "./UserSummary.js";
-const D = () => P, I = /* @__PURE__ */ S(D())({
+const F = () => R, d = /* @__PURE__ */ a(F())({
   name: "OpenedContainer",
   class: "oar61gl",
   propsAsIs: !0
-}), E = /* @__PURE__ */ S("div")({
+}), O = /* @__PURE__ */ a("div")({
   name: "UserContainer",
   class: "u14zaal4",
   propsAsIs: !1
-}), M = ({
+}), Q = ({
   correct: r,
-  incorrect: s
+  incorrect: p
 }) => {
-  const o = r + s;
+  const o = r + p;
   return o === 0 ? 0 : Math.round(r / o * 100);
-}, z = `
-  body {
-    overflow: hidden
-  }
-`, wt = ({
+}, lo = ({
   gamification: r,
-  scrollStore: s,
+  scrollStore: p,
   className: o,
   appNode: i,
-  scrollNode: k,
-  headerNode: l,
-  responsiveStore: a
+  scrollNode: f,
+  headerNode: h,
+  responsiveStore: s
 }) => {
-  const c = f(r.openedQuestion.$store), m = f(r.openedUser), {
-    sdkInScrollView: e
-  } = f(a, {
-    keys: ["sdkInScrollView"]
-  }), p = v(0), [C, w] = x(() => {
-    var h;
-    const u = e ? i : l, n = (((h = i.current) == null ? void 0 : h.getBoundingClientRect().y) || 0) < 0;
-    if ((c || m) && u.current) {
-      n && (p.current = window.scrollY);
-      const U = () => (R(() => {
-        const V = setTimeout(() => {
-          O(i, {
-            behavior: "instant"
-          });
-        }, 1e3);
-        return () => {
-          clearTimeout(V), p.current !== 0 && (window.scroll({
-            top: p.current
-          }), p.current = 0);
-        };
-      }, []), /* @__PURE__ */ t("style", {
-        children: z
-      }));
-      return [n, c ? y.createPortal(/* @__PURE__ */ d(I, {
-        className: o,
-        children: [/* @__PURE__ */ t(Q, {
-          gamification: r
-        }), n && !e && /* @__PURE__ */ t(U, {})]
-      }), u.current) : m ? y.createPortal(/* @__PURE__ */ t(I, {
-        className: o,
-        children: /* @__PURE__ */ d(E, {
-          children: [/* @__PURE__ */ t(T, {
-            label: "Friend's Rank",
-            close: r.closeUser
-          }), /* @__PURE__ */ t(F, {
-            children: /* @__PURE__ */ t(A, {
-              ...m,
-              successRate: M(m)
-            })
-          })]
-        })
-      }), u.current) : null];
-    }
-    return [n, null];
-  }, [i, o, r, l, c, m, e]);
-  return /* @__PURE__ */ d(b, {
-    children: [w, /* @__PURE__ */ t(j, {
+  const e = n(r.openedQuestion.$store), m = n(r.openedUser), {
+    sdkInDesktopView: l
+  } = n(s, {
+    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__ */ t(d, {
+      className: o,
+      children: /* @__PURE__ */ t(S, {
+        gamification: r
+      })
+    }) : m ? /* @__PURE__ */ t(d, {
+      className: o,
+      children: /* @__PURE__ */ c(O, {
+        children: [/* @__PURE__ */ t(V, {
+          label: "Friend's Rank",
+          close: r.closeUser
+        }), /* @__PURE__ */ t(x, {
+          children: /* @__PURE__ */ t(y, {
+            ...m,
+            successRate: Q(m)
+          })
+        })]
+      })
+    }) : null;
+    return M({
+      Modal: I,
+      container: i,
+      useContainer: !l,
+      fixedView: k
+    });
+  }, [i, o, r, e, m, l]);
+  return /* @__PURE__ */ c(U, {
+    children: [C, /* @__PURE__ */ t(D, {
       appNode: i,
-      headerNode: l,
-      scrollStore: s,
-      scrollNode: k,
+      headerNode: h,
+      scrollStore: p,
+      scrollNode: f,
       className: o,
       gamification: r,
-      responsiveStore: a,
-      style: !e && !C && w !== null ? {
-        height: "0",
-        overflow: "hidden"
-      } : {}
+      responsiveStore: s
     })]
   });
 };
 export {
-  wt as GamificationOverlay
+  lo as GamificationOverlay
 };

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { ResponsiveStore } from '../../useSdkResponsive';
 import { ChannelsButtonId } from '../../../navigation/button/Channels';
 import { FeaturedGroupsButtonId } from '../../../navigation/button/FeaturedGroups';
 import { LeaderBoardButtonId } from '../../../navigation/button/LeaderBoard';
@@ -9,5 +10,7 @@ type MastersNavigationProps = {
     setActiveOverlay: (overlay: AvailableOverlays) => void;
     sdkReady: boolean;
     className?: string;
+    responsiveStore: ResponsiveStore;
+    scrollToTop: () => void;
 };
 export declare const MastersNavigation: import("react").ForwardRefExoticComponent<MastersNavigationProps & import("react").RefAttributes<HTMLDivElement | null>>;