@streamlayer/react-ui 0.91.1 → 0.93.0

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

@@ -1,10 +1,15 @@
 /// <reference types="react" />
 import { type Gamification } from '@streamlayer/feature-gamification';
+import type { AppNodeRef, HeaderNodeRef, ScrollNodeRef } from '../../masters';
+import { ResponsiveStore } from '../../useSdkResponsive';
 import { ScrollStore } from '../../useSdkScroll';
 export declare const Tabs: React.FC<{
-    appNode: React.MutableRefObject<HTMLDivElement | null>;
+    appNode: AppNodeRef;
     gamification: Gamification;
     scrollStore: ScrollStore;
-    scrollNode: React.MutableRefObject<HTMLDivElement | null>;
+    scrollNode: ScrollNodeRef;
+    headerNode: HeaderNodeRef;
+    responsiveStore: ResponsiveStore;
     className?: string;
+    style?: React.CSSProperties;
 }>;

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

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

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

@@ -2,13 +2,17 @@ import { GamificationOverlay as o } from "./index.js";
 import "react/jsx-runtime";
 import "@linaria/react";
 import "@nanostores/react";
-import "../../../../useClipboardCopy-E5rEe6It.js";
 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";
@@ -37,7 +41,6 @@ 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";

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

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import { type Gamification as GamificationClass } from '@streamlayer/feature-gamification';
+import type { AppNodeRef, ScrollNodeRef, HeaderNodeRef } from '../../masters';
+import { ResponsiveStore } from '../../useSdkResponsive';
 import { ScrollStore } from '../../useSdkScroll';
 export declare const GamificationOverlay: React.FC<{
     gamification: GamificationClass;
     className?: string;
     scrollStore: ScrollStore;
-    appNode: React.MutableRefObject<HTMLDivElement | null>;
-    scrollNode: React.MutableRefObject<HTMLDivElement | null>;
+    responsiveStore: ResponsiveStore;
+    appNode: AppNodeRef;
+    scrollNode: ScrollNodeRef;
+    headerNode: HeaderNodeRef;
 }>;

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

@@ -1,18 +1,22 @@
-import { jsxs as e, Fragment as d, jsx as t } from "react/jsx-runtime";
-import { styled as l } from "@linaria/react";
-import { useStore as n } from "@nanostores/react";
-import { r as s } from "../../../../useClipboardCopy-E5rEe6It.js";
-import { SDKWhiteContainer as f } from "../../styles.js";
-import { VoteHeader as h } from "../../../gamification/detail/header/index.js";
-import { UserStatistics as U } from "../../../gamification/user-statistics/index.js";
-import { ShowIn as x } from "../../../show-in/index.js";
-import { Question as C } from "./Question.js";
-import { Tabs as S } from "./Tabs.js";
-import "react";
+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 "@streamlayer/sdk-web-types";
 import "../../../gamification/constants.js";
 import "../../../gamification/detail/header/styles.js";
@@ -37,7 +41,6 @@ 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";
@@ -79,56 +82,94 @@ import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "./UserSummary.js";
-const I = () => x, c = /* @__PURE__ */ l(I())({
+const D = () => P, I = /* @__PURE__ */ S(D())({
   name: "OpenedContainer",
   class: "oar61gl",
   propsAsIs: !0
-}), O = /* @__PURE__ */ l("div")({
+}), E = /* @__PURE__ */ S("div")({
   name: "UserContainer",
   class: "u14zaal4",
   propsAsIs: !1
-}), Q = ({
+}), M = ({
   correct: r,
-  incorrect: m
+  incorrect: s
 }) => {
-  const o = r + m;
+  const o = r + s;
   return o === 0 ? 0 : Math.round(r / o * 100);
-}, Yr = ({
+}, z = `
+  body {
+    overflow: hidden
+  }
+`, wt = ({
   gamification: r,
-  scrollStore: m,
+  scrollStore: s,
   className: o,
   appNode: i,
-  scrollNode: a
+  scrollNode: k,
+  headerNode: l,
+  responsiveStore: a
 }) => {
-  const u = n(r.openedQuestion.$store), p = n(r.openedUser);
-  return /* @__PURE__ */ e(d, {
-    children: [u && i.current && s.createPortal(/* @__PURE__ */ t(c, {
-      className: o,
-      children: /* @__PURE__ */ t(C, {
-        gamification: r
-      })
-    }), i.current), p && i.current && s.createPortal(/* @__PURE__ */ t(c, {
-      className: o,
-      children: /* @__PURE__ */ e(O, {
-        children: [/* @__PURE__ */ t(h, {
-          label: "Friend's Rank",
-          close: r.closeUser
-        }), /* @__PURE__ */ t(f, {
-          children: /* @__PURE__ */ t(U, {
-            ...p,
-            successRate: Q(p)
-          })
-        })]
-      })
-    }), i.current), /* @__PURE__ */ t(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, {
       appNode: i,
-      scrollStore: m,
-      scrollNode: a,
+      headerNode: l,
+      scrollStore: s,
+      scrollNode: k,
       className: o,
-      gamification: r
+      gamification: r,
+      responsiveStore: a,
+      style: !e && !C && w !== null ? {
+        height: "0",
+        overflow: "hidden"
+      } : {}
     })]
   });
 };
 export {
-  Yr as GamificationOverlay
+  wt as GamificationOverlay
 };

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

@@ -1,13 +1,17 @@
 /// <reference types="react" />
 import { Features } from '@streamlayer/sdk-web-features';
 import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import type { AppNodeRef, ScrollNodeRef, HeaderNodeRef } from '../masters';
+import { ResponsiveStore } from '../useSdkResponsive';
 import { ScrollStore } from '../useSdkScroll';
 /** render feature by type */
 export declare const ActiveFeature: React.FC<{
     sdk: StreamLayerSDK;
     feature: Features | null;
     scrollStore: ScrollStore;
-    appNode: React.MutableRefObject<HTMLDivElement | null>;
-    scrollNode: React.MutableRefObject<HTMLDivElement | null>;
+    responsiveStore: ResponsiveStore;
+    appNode: AppNodeRef;
+    scrollNode: ScrollNodeRef;
+    headerNode: HeaderNodeRef;
     className?: string;
 }>;

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

@@ -1,28 +1,30 @@
 import { jsx as i } from "react/jsx-runtime";
-import { lazy as l, useMemo as u, Suspense as f } from "react";
-import { FeatureType as a } from "@streamlayer/sdk-web-types";
-import { FeatureProvider as c } from "./FeatureProvider.js";
+import { lazy as f, useMemo as c, Suspense as a } from "react";
+import { FeatureType as g } from "@streamlayer/sdk-web-types";
+import { FeatureProvider as y } from "./FeatureProvider.js";
 import "@nanostores/react";
 import "@streamlayer/sdk-web-interfaces";
-const g = l(() => import("./Gamification/gamification-feature.js")), x = ({ sdk: e, feature: t, className: r, scrollStore: n, appNode: o, scrollNode: m }) => {
-  const p = u(() => t && t.featureConfig.get().type === a.GAMES ? /* @__PURE__ */ i(c, { className: r, sdk: e, feature: t, children: /* @__PURE__ */ i(
-    g,
+const h = f(() => import("./Gamification/gamification-feature.js")), A = ({ sdk: n, feature: t, className: r, scrollStore: e, appNode: o, scrollNode: m, headerNode: l, responsiveStore: p }) => {
+  const u = c(() => t && t.featureConfig.get().type === g.GAMES ? /* @__PURE__ */ i(y, { className: r, sdk: n, feature: t, children: /* @__PURE__ */ i(
+    h,
     {
       appNode: o,
-      scrollStore: n,
+      scrollStore: e,
       scrollNode: m,
+      headerNode: l,
       className: r,
+      responsiveStore: p,
       gamification: t
     }
-  ) }) : null, [e, t, r, n, m, o]);
+  ) }) : null, [n, t, r, p, e, m, o, l]);
   return /* @__PURE__ */ i(
-    f,
+    a,
     {
       fallback: /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
-      children: p
+      children: u
     }
   );
 };
 export {
-  x as ActiveFeature
+  A as ActiveFeature
 };

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

@@ -4,9 +4,10 @@ import { FeaturedGroupsButtonId } from '../../../navigation/button/FeaturedGroup
 import { LeaderBoardButtonId } from '../../../navigation/button/LeaderBoard';
 export { ChannelsButtonId, LeaderBoardButtonId, FeaturedGroupsButtonId };
 export type AvailableOverlays = typeof ChannelsButtonId | typeof LeaderBoardButtonId | typeof FeaturedGroupsButtonId;
-export declare const MastersNavigation: React.FC<{
+type MastersNavigationProps = {
     activeOverlay: AvailableOverlays;
     setActiveOverlay: (overlay: AvailableOverlays) => void;
     sdkReady: boolean;
     className?: string;
-}>;
+};
+export declare const MastersNavigation: import("react").ForwardRefExoticComponent<MastersNavigationProps & import("react").RefAttributes<HTMLDivElement | null>>;

package/lib/ui/app/Navigation/MastersNavigation/index.js

@@ -1,40 +1,46 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { ChannelsButton as u, ChannelsButtonId as i } from "../../../navigation/button/Channels.js";
-import { FeaturedGroupsButton as s, FeaturedGroupsButtonId as m } from "../../../navigation/button/FeaturedGroups.js";
-import { LeaderBoardButton as e, LeaderBoardButtonId as n } from "../../../navigation/button/LeaderBoard.js";
-import { Navigation as B } from "../../../navigation/masters.js";
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { ChannelsButton as s, ChannelsButtonId as n } from "../../../navigation/button/Channels.js";
+import { FeaturedGroupsButton as u, FeaturedGroupsButtonId as m } from "../../../navigation/button/FeaturedGroups.js";
+import { LeaderBoardButtonId as b } from "../../../navigation/button/LeaderBoard.js";
+import { Navigation as f, NavigationItems as B } from "../../../navigation/masters.js";
 import "@linaria/react";
 import "../../../icons/index.js";
-import "react";
 import "../../../navigation/button/index.js";
 import "../../../navigation/button/styles.js";
-import "../../../../LeaderBoard_fzzlxb-w40geAFS.js";
 import "../../../navigation/index.js";
-import "../../../../index_ej4hfx-w40geAFS.js";
-import "../../../../masters_m6itlr-w40geAFS.js";
-const b = ({ activeOverlay: o, setActiveOverlay: t, sdkReady: p, className: d }) => /* @__PURE__ */ a(B, { className: d, children: [
-  /* @__PURE__ */ r(u, { active: o === i, onClick: () => t(i) }),
-  /* @__PURE__ */ r(
-    s,
-    {
-      active: o === m,
-      disabled: !p,
-      onClick: () => {
-        t(m);
+const v = d(
+  ({ activeOverlay: t, setActiveOverlay: r, sdkReady: a, className: e }, p) => /* @__PURE__ */ i(f, { className: e, children: [
+    /* @__PURE__ */ i(B, { children: [
+      /* @__PURE__ */ o(
+        s,
+        {
+          active: t === n,
+          onClick: () => r(n)
+        }
+      ),
+      /* @__PURE__ */ o(
+        u,
+        {
+          active: t === m,
+          disabled: !a,
+          onClick: () => {
+            r(m);
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        ref: p
       }
-    }
-  ),
-  /* @__PURE__ */ r(
-    e,
-    {
-      active: o === n,
-      onClick: () => t(n)
-    }
-  )
-] });
+    )
+  ] })
+);
 export {
-  i as ChannelsButtonId,
+  n as ChannelsButtonId,
   m as FeaturedGroupsButtonId,
-  n as LeaderBoardButtonId,
-  b as MastersNavigation
+  b as LeaderBoardButtonId,
+  v as MastersNavigation
 };

package/lib/ui/app/Navigation/index.js

@@ -1,17 +1,16 @@
 import { jsx as n } from "react/jsx-runtime";
 import { useStore as s } from "@nanostores/react";
-import { useMemo as m } from "react";
+import { useMemo as e } from "react";
 import { AvailableFeatures as d } from "@streamlayer/sdk-web-features";
 import { Navigation as v } from "../../navigation/index.js";
 import { Button as b } from "../../navigation/button/index.js";
 import "@linaria/react";
-import "../../../index_ej4hfx-w40geAFS.js";
 import "../../navigation/button/styles.js";
-const h = ({ customOverlays: p, activeButton: e, sdk: i }) => {
-  const t = s(i.sdkStore.organizationSettings), r = s(i.sdkStore.streamSettings), a = m(() => {
+const N = ({ customOverlays: p, activeButton: m, sdk: i }) => {
+  const t = s(i.sdkStore.organizationSettings), r = s(i.sdkStore.streamSettings), a = e(() => {
     const o = (r == null ? void 0 : r.data) || (t == null ? void 0 : t.data);
     return o != null && o.overlays ? o.overlays : [];
-  }, [t, r]), c = m(
+  }, [t, r]), c = e(
     () => [
       ...a.filter(({ enableSdkButton: o }) => o).map((o) => ({
         id: o.type,
@@ -26,8 +25,8 @@ const h = ({ customOverlays: p, activeButton: e, sdk: i }) => {
     ].sort((o, l) => o.position - l.position),
     [a, i, p]
   );
-  return /* @__PURE__ */ n(v, { children: c.map((o) => /* @__PURE__ */ n(b, { ...o, active: o.id === e })) });
+  return /* @__PURE__ */ n(v, { children: c.map((o) => /* @__PURE__ */ n(b, { ...o, active: o.id === m })) });
 };
 export {
-  h as SDKNavigation
+  N as SDKNavigation
 };

package/lib/ui/app/Notifications/Onboarding/index.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 import { type Notification } from '@streamlayer/sdk-web-notifications';
+import { HeaderNodeRef, type AppNodeRef } from '../../masters';
 export declare const Onboarding: React.FC<{
     sdk: StreamLayerSDK;
     notification: Notification;
     saveHeight: (height: number) => void;
-    appNode: React.MutableRefObject<HTMLDivElement | null>;
+    renderToNode: AppNodeRef | HeaderNodeRef;
     style?: React.CSSProperties;
 }>;