@streamlayer/react-ui 0.92.0 → 0.94.0

package/lib/index.js

@@ -1,9 +1,10 @@
-import { StreamLayerThemeProvider as i } from "./ui/theme/index.js";
+import { StreamLayerThemeProvider as a } from "./ui/theme/index.js";
 import "react/jsx-runtime";
 import "./ui/theme/theme.js";
+import "./ui/theme/breakpoints.js";
 import "./ui/theme/constants.js";
-const m = () => null;
+const t = () => null;
 export {
-  m as Demo,
-  i as StreamLayerThemeProvider
+  t as Demo,
+  a as StreamLayerThemeProvider
 };

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

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

@@ -3,16 +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 "../../../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";
@@ -20,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";
@@ -52,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,21 +1,18 @@
-import { jsxs as d, jsx as t, Fragment as R } from "react/jsx-runtime";
-import { styled as k } from "@linaria/react";
-import { useStore as f } from "@nanostores/react";
-import { useRef as b, useMemo as v, useEffect as F } from "react";
-import { r as I } from "../../../../useClipboardCopy-E5rEe6It.js";
-import { SDKWhiteContainer as O } from "../../styles.js";
-import { VoteHeader as T } from "../../../gamification/detail/header/index.js";
-import { UserStatistics as P } from "../../../gamification/user-statistics/index.js";
-import { ShowIn as Q } from "../../../show-in/index.js";
-import { Question as j } from "./Question.js";
-import { Tabs as A } from "./Tabs.js";
-import "../../../../index-uEuzH3jr.js";
-import "../../../gamification/copyNotification/index.js";
-import "../../../icons/index.js";
-import "../../../gamification/copyNotification/styles.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";
@@ -23,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";
@@ -51,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";
@@ -79,93 +84,76 @@ import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "./UserSummary.js";
-const D = () => Q, S = /* @__PURE__ */ k(D())({
+const F = () => R, d = /* @__PURE__ */ a(F())({
   name: "OpenedContainer",
   class: "oar61gl",
   propsAsIs: !0
-}), E = /* @__PURE__ */ k("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
-  }
-`, dt = ({
+}, lo = ({
   gamification: r,
-  scrollStore: s,
+  scrollStore: p,
   className: o,
   appNode: i,
-  scrollNode: C,
-  headerNode: l,
-  responsiveStore: a
+  scrollNode: f,
+  headerNode: h,
+  responsiveStore: s
 }) => {
-  const c = f(r.openedQuestion.$store), e = f(r.openedUser), {
-    sdkInScrollView: m
-  } = f(a, {
-    keys: ["sdkInScrollView"]
-  }), p = b(0), [U, w] = v(() => {
-    var h;
-    const u = m ? i : l, n = (((h = i.current) == null ? void 0 : h.getBoundingClientRect().y) || 0) < 0;
-    if ((c || e) && u.current) {
-      n && (p.current = window.scrollY);
-      const V = () => (F(() => {
-        const x = setTimeout(() => {
-          var y;
-          (y = i.current) == null || y.scrollIntoView();
-        }, 1e3);
-        return () => {
-          clearTimeout(x), p.current !== 0 && (window.scroll({
-            top: p.current
-          }), p.current = 0);
-        };
-      }, []), /* @__PURE__ */ t("style", {
-        children: z
-      }));
-      return [n, c ? I.createPortal(/* @__PURE__ */ d(S, {
-        className: o,
-        children: [/* @__PURE__ */ t(j, {
-          gamification: r
-        }), n && !m && /* @__PURE__ */ t(V, {})]
-      }), u.current) : e ? I.createPortal(/* @__PURE__ */ t(S, {
-        className: o,
-        children: /* @__PURE__ */ d(E, {
-          children: [/* @__PURE__ */ t(T, {
-            label: "Friend's Rank",
-            close: r.closeUser
-          }), /* @__PURE__ */ t(O, {
-            children: /* @__PURE__ */ t(P, {
-              ...e,
-              successRate: M(e)
-            })
-          })]
-        })
-      }), u.current) : null];
-    }
-    return [n, null];
-  }, [i, o, r, l, c, e, m]);
-  return /* @__PURE__ */ d(R, {
-    children: [w, /* @__PURE__ */ t(A, {
+  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: C,
+      headerNode: h,
+      scrollStore: p,
+      scrollNode: f,
       className: o,
       gamification: r,
-      responsiveStore: a,
-      style: !m && !U && w !== null ? {
-        height: "0",
-        overflow: "hidden"
-      } : {}
+      responsiveStore: s
     })]
   });
 };
 export {
-  dt 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,6 @@ type MastersNavigationProps = {
     setActiveOverlay: (overlay: AvailableOverlays) => void;
     sdkReady: boolean;
     className?: string;
+    responsiveStore: ResponsiveStore;
 };
 export declare const MastersNavigation: import("react").ForwardRefExoticComponent<MastersNavigationProps & import("react").RefAttributes<HTMLDivElement | null>>;