@streamlayer/react-ui 0.91.1 → 0.92.0

package/lib/ui/app/masters.js

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

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

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

package/lib/ui/app/useMastersApp.js

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

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

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

package/lib/ui/app/useSdkResponsive.js

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

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

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

package/lib/ui/app/useSdkScroll.js

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

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

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

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

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

package/lib/ui/gamification/onboarding/index.js

@@ -1,10 +1,11 @@
-import { jsx as o, jsxs as g } from "react/jsx-runtime";
-import { useState as h, useEffect as k, useMemo as D, useCallback as T } from "react";
-import j from "react-virtualized-auto-sizer";
-import { OnboardingInstructions as w } from "./slides/onboarding-instructions/index.js";
-import { OnboardingInviteCard as A } from "./slides/onboarding-invite-card/index.js";
-import { OnboardingRules as z } from "./slides/onboarding-rules/index.js";
-import { Container as E, OnboardingHeader as F, CloseBtn as G, IconClose as H, Content as M, OnboardingFooter as P, OnboardingActionBtn as R } from "./styles.js";
+import { jsx as t, jsxs as C } from "react/jsx-runtime";
+import { useState as c, useEffect as j, useMemo as w, useCallback as z } from "react";
+import E from "react-virtualized-auto-sizer";
+import { OnboardingInstructions as F } from "./slides/onboarding-instructions/index.js";
+import { OnboardingInviteCard as G } from "./slides/onboarding-invite-card/index.js";
+import { OnboardingRules as H } from "./slides/onboarding-rules/index.js";
+import { OnboardingTerms as M } from "./slides/onboarding-terms/index.js";
+import { Container as P, OnboardingHeader as R, CloseBtn as q, IconClose as J, Content as K, OnboardingFooter as Q, OnboardingActionBtn as U } from "./styles.js";
 import "./slides/onboarding-instructions/styles.js";
 import "@linaria/react";
 import "../../../useClipboardCopy-E5rEe6It.js";
@@ -14,54 +15,69 @@ import "../../icons/index.js";
 import "../copyNotification/styles.js";
 import "./slides/onboarding-invite-card/styles.js";
 import "./slides/onboarding-rules/styles.js";
+import "./slides/onboarding-terms/styles.js";
 import "../../button/index.js";
 import "../../button/styles.js";
 const a = {
   steps: !1,
   rules: !1,
   inviteCard: !1
-}, oi = ({
-  gamification: u,
-  steps: i,
-  rules: t,
+}, gn = ({
+  gamification: p,
+  steps: n,
+  rules: r,
   rulesBtnLabel: m,
-  rulesTitle: b,
-  primaryColor: d,
-  inviteLink: C,
-  socialLinks: S,
-  inviteCardTitle: p,
-  inviteCardSubtext: y,
-  inviteCardBtnLabel: c,
-  onClose: O
+  rulesTitle: O,
+  termsTitle: S,
+  termsText: f,
+  primaryColor: g,
+  inviteLink: y,
+  socialLinks: v,
+  inviteCardTitle: s,
+  inviteCardSubtext: T,
+  inviteCardBtnLabel: u,
+  renderToNode: I,
+  onClose: N
 }) => {
-  const [r, f] = h(0), [n, e] = h(a);
-  k(() => {
-    i != null && i.length ? e({ ...a, steps: !0 }) : t != null && t.length ? e({ ...a, rules: !0 }) : e({ ...a, inviteCard: !0 });
+  const [o, h] = c(0), [l, b] = c(!1), [i, e] = c(a);
+  j(() => {
+    n != null && n.length ? e({ ...a, steps: !0 }) : r != null && r.length ? e({ ...a, rules: !0 }) : e({ ...a, inviteCard: !0 });
   }, []);
-  const v = D(() => n.steps && r === 0 ? "Continue" : n.rules ? m || "Got it" : n.inviteCard ? c || "Play Now" : "Next", [n, r, m, c]), I = T(() => {
-    i != null && i.length && r < i.length - 1 ? f((l) => ++l) : t != null && t.length && n.steps ? e({ ...a, rules: !0 }) : n.rules && e({ ...a, inviteCard: !0 });
-  }, [r, i == null ? void 0 : i.length, t == null ? void 0 : t.length, n, f, e]), x = async () => {
-    await u.onboardingStatus.submitInplay();
+  const k = w(() => i.steps && o === 0 ? "Continue" : i.rules ? l || !m ? "Got it" : m : i.inviteCard ? u || "Play Now" : "Next", [i, o, l, m, u]), x = z(() => {
+    n != null && n.length && o < n.length - 1 ? h((d) => ++d) : r != null && r.length && i.steps ? e({ ...a, rules: !0 }) : i.rules && e({ ...a, inviteCard: !0 });
+  }, [o, n == null ? void 0 : n.length, r == null ? void 0 : r.length, i, h, e]), A = async () => {
+    i.inviteCard ? await p.onboardingStatus.submitInplay() : i.rules && l ? b(!1) : x();
   };
-  return /* @__PURE__ */ o(j, { children: ({ width: l, height: N }) => /* @__PURE__ */ g(E, { style: { width: l, height: N }, children: [
-    /* @__PURE__ */ o(F, { children: /* @__PURE__ */ o(G, { onClick: O, children: /* @__PURE__ */ o(H, { name: "icon-close-btn-gray" }) }) }),
-    /* @__PURE__ */ g(M, { children: [
-      n.steps && (i == null ? void 0 : i.length) && /* @__PURE__ */ o(w, { stepsCount: i.length, currentStep: r, ...i[r] }),
-      n.rules && /* @__PURE__ */ o(z, { rules: t, rulesTitle: b, primaryColor: d }),
-      n.inviteCard && /* @__PURE__ */ o(
-        A,
+  return /* @__PURE__ */ t(E, { children: ({ width: d, height: D }) => /* @__PURE__ */ C(P, { style: { width: d, height: D }, children: [
+    /* @__PURE__ */ t(R, { children: /* @__PURE__ */ t(q, { onClick: N, children: /* @__PURE__ */ t(J, { name: "icon-close-btn-gray" }) }) }),
+    /* @__PURE__ */ C(K, { children: [
+      i.steps && (n == null ? void 0 : n.length) && /* @__PURE__ */ t(F, { stepsCount: n.length, currentStep: o, ...n[o] }),
+      i.rules && !l && /* @__PURE__ */ t(
+        H,
         {
-          inviteLink: C,
-          inviteCardTitle: p,
-          inviteCardSubtext: y,
-          primaryColor: d,
-          socialLinks: S
+          rules: r,
+          rulesTitle: O,
+          termsText: f,
+          primaryColor: g,
+          openTerms: () => b(!0)
+        }
+      ),
+      i.rules && l && /* @__PURE__ */ t(M, { termsTitle: S, termsText: f }),
+      i.inviteCard && /* @__PURE__ */ t(
+        G,
+        {
+          inviteLink: y,
+          inviteCardTitle: s,
+          inviteCardSubtext: T,
+          primaryColor: g,
+          socialLinks: v,
+          renderToNode: I
         }
       )
     ] }),
-    /* @__PURE__ */ o(P, { children: /* @__PURE__ */ o(R, { onClick: n.inviteCard ? x : I, children: v }) })
+    /* @__PURE__ */ t(Q, { children: /* @__PURE__ */ t(U, { onClick: A, children: k }) })
   ] }) });
 };
 export {
-  oi as Onboarding
+  gn as Onboarding
 };

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type InvitingUserType = {
+    avatar?: string;
+    name?: string;
+};
+export declare const InvitingUser: React.FC<InvitingUserType>;
+export {};

package/lib/ui/gamification/onboarding/invitingUser/index.js

@@ -0,0 +1,16 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { Container as t, Avatar as e, Content as s, Name as m } from "./styles.js";
+import "@linaria/react";
+const f = ({ avatar: i, name: n }) => /* @__PURE__ */ r(t, { children: [
+  i && /* @__PURE__ */ o(e, { src: i }),
+  /* @__PURE__ */ r(s, { children: [
+    /* @__PURE__ */ r(m, { children: [
+      n,
+      " "
+    ] }),
+    "is waiting for you!"
+  ] })
+] });
+export {
+  f as InvitingUser
+};

package/lib/ui/gamification/onboarding/invitingUser/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Avatar: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
+export declare const Content: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Name: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

package/lib/ui/gamification/onboarding/invitingUser/styles.js

@@ -0,0 +1,24 @@
+import { styled as s } from "@linaria/react";
+const n = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "cl51m2q",
+  propsAsIs: !1
+}), e = /* @__PURE__ */ s("img")({
+  name: "Avatar",
+  class: "a2yhhhr",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "Content",
+  class: "c1dtxxlr",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("span")({
+  name: "Name",
+  class: "n12clm3w",
+  propsAsIs: !1
+});
+export {
+  e as Avatar,
+  n as Container,
+  t as Content,
+  o as Name
+};