@streamlayer/react-ui 0.96.2 → 0.97.0

package/lib/ui/app/useMastersApp.js

@@ -2,35 +2,36 @@ import { useStore as A } from "@nanostores/react";
 import { useRef as y, useState as d, useCallback as z, useEffect as u } from "react";
 import { FeatureType as v } from "@streamlayer/sdk-web-types";
 import "./Navigation/MastersNavigation/index.js";
-import { FeaturedGroupsButtonId as i } from "../navigation/button/FeaturedGroups.js";
-import { ChannelsButtonId as p } from "../navigation/button/Channels.js";
+import { FeaturedGroupsButtonId as p } from "../navigation/button/FeaturedGroups.js";
+import { ChannelsButtonId as i } from "../navigation/button/Channels.js";
 import "react/jsx-runtime";
 import "../navigation/button/LeaderBoard.js";
 import "@linaria/react";
 import "../icons/index.js";
 import "../navigation/button/index.js";
+import "@linaria/core";
 import "../navigation/button/styles.js";
 import "../navigation/masters.js";
 import "../navigation/index.js";
 import "../theme/constants.js";
-const j = (e) => {
-  const c = y(""), [S, o] = d(!1), E = A(e.status), a = A(e.userId()), f = A(e.getActiveFeature()), n = E === "ready", [l, r] = d(i), m = z(
+const D = (e) => {
+  const c = y(""), [S, o] = d(!1), E = A(e.status), a = A(e.userId()), f = A(e.getActiveFeature()), n = E === "ready", [l, r] = d(p), m = z(
     (t, s) => {
-      r(s), s === i ? (t && e.createEventSession(t), window.requestAnimationFrame(() => {
+      r(s), t && e.createEventSession(t), s === p ? window.requestAnimationFrame(() => {
         e.openFeature(v.GAMES);
-      })) : e.closeFeature(!1);
+      }) : e.closeFeature(!1);
     },
     [e]
   );
   u(() => {
-    !n && l === i && (r(p), e.closeFeature(!0));
+    !n && l === p && (r(i), e.closeFeature(!0));
   }, [n, l, e]), u(() => {
-    f === v.GAMES ? r(i) : f === v.UNSET && r(p);
+    f === v.GAMES ? r(p) : f === v.UNSET && r(i);
   }, [f]);
   const F = (t) => {
     c.current = t, o(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: s, err: g }) => {
       if (g) {
-        m(t, p);
+        m(t, i);
         return;
       }
       if (s) {
@@ -49,7 +50,7 @@ const j = (e) => {
   };
   return u(() => {
     if (!a) {
-      n && (r(p), e.disableApp());
+      n && (r(i), e.disableApp());
       return;
     }
     if (a && c.current && S) {
@@ -71,5 +72,5 @@ const j = (e) => {
   };
 };
 export {
-  j as useMastersApp
+  D as useMastersApp
 };

package/lib/ui/app/useSdkFeature.js

@@ -1,24 +1,21 @@
-import { useStore as o } from "@nanostores/react";
+import { useStore as f } from "@nanostores/react";
 import { useState as c, useEffect as l } from "react";
 import { FeatureStatus as a } from "@streamlayer/sdk-web-interfaces";
-const d = (r) => {
-  const s = o(r.getActiveFeature()), i = o(r.streamStore()), [n, f] = c(null);
+const p = (t) => {
+  const r = f(t.getActiveFeature()), n = f(t.streamStore()), [i, u] = c(null);
   return l(() => {
-    const u = r.getFeatures();
-    if (s)
-      for (const [e, t] of u)
-        e === s ? (t.status.get() === a.Suspended && t.enable(), f(t)) : t.status.get() === a.Ready && t.disable();
-    else {
-      for (const [, e] of u)
-        e.status.get() === a.Ready && e.disable();
-      f(null);
-    }
+    const o = t.getFeatures();
+    if (!r)
+      u(null);
+    else
+      for (const [s, e] of o)
+        s === r ? (e.status.get() === a.Suspended && e.enable(), u(e)) : e.status.get() === a.Ready && e.disable();
     return () => {
-      for (const [, e] of u)
-        e.status.get() === a.Ready && e.disable();
+      for (const [, s] of o)
+        s.status.get() === a.Ready && s.disable();
     };
-  }, [s, r, i]), [s, n];
+  }, [r, t, n]), [r, i];
 };
 export {
-  d as useSdkFeature
+  p as useSdkFeature
 };

package/lib/ui/app/useSdkResponsive.js

@@ -1,7 +1,7 @@
 import c from "lodash.throttle";
 import { useState as m, useEffect as u } from "react";
 import { BREAKPOINTS as r } from "../theme/constants.js";
-import { m as p } from "../../index-keh7OLCY.js";
+import { m as p } from "../../index-z0QjLiEL.js";
 import "../../index-uEuzH3jr.js";
 const d = Object.keys(r), i = () => {
   const t = window.innerWidth;

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

@@ -7,6 +7,6 @@ type ScrollData = {
     scrollDirection: 'forward' | 'backward';
 };
 export type ScrollStore = MapStore<ScrollData>;
-export declare const scrollIntoAppView: (appNode: AppNodeRef, options?: ScrollIntoViewOptions) => void;
+export declare const scrollIntoAppView: (appNode: AppNodeRef, screenSize: number, options?: ScrollIntoViewOptions) => void;
 export declare const useSdkScroll: (appNode: AppNodeRef, responsiveStore: ResponsiveStore) => [ScrollNodeRef, ScrollStore];
 export {};

package/lib/ui/app/useSdkScroll.js

@@ -1,43 +1,46 @@
 import { useStore as p } from "@nanostores/react";
 import S from "lodash.throttle";
-import { useRef as f, useState as h, useEffect as b } from "react";
-import { BREAKPOINTS as m } from "../theme/constants.js";
-import { m as g } from "../../index-keh7OLCY.js";
+import { useRef as m, useState as h, useEffect as g } from "react";
+import { BREAKPOINTS as l } from "../theme/constants.js";
+import { m as T } from "../../index-z0QjLiEL.js";
 import "../../index-uEuzH3jr.js";
-const C = (t, n) => {
-  var r;
-  (r = t.current) == null || r.scrollIntoView(n), window.scrollBy({ top: -52 });
-}, D = (t, n) => {
-  const r = f(null), l = f(0), [e] = h(
-    g({
+const C = (o, t, e) => {
+  const n = t >= l.lg && t < l.xl ? 75 : 52;
+  o.current && window.scrollTo({
+    top: o.current.offsetTop - n,
+    ...e
+  });
+}, D = (o, t) => {
+  const e = m(null), n = m(0), [s] = h(
+    T({
       scrollPosition: 0,
       tabsShown: !0,
       scrollDirection: "forward"
     })
-  ), c = p(n);
-  return b(() => {
-    const s = window.innerWidth < m.xl ? window : r.current;
-    if (!s)
+  ), i = p(t);
+  return g(() => {
+    const c = window.innerWidth < l.xl ? window : e.current;
+    if (!c)
       return () => {
       };
-    const i = S((w) => {
+    const u = S((w) => {
       var a;
-      const u = w.target;
-      if (!u)
+      const f = w.target;
+      if (!f)
         return;
-      let o = 0;
-      c.screen.size < m.xl ? o = ((a = t.current) == null ? void 0 : a.getBoundingClientRect().y) || 0 : o = u.scrollTop;
-      const d = l.current < o ? "forward" : "backward";
-      l.current = o, e.set({
-        scrollPosition: Math.round(o),
+      let r = 0;
+      i.screen.size < l.xl ? r = ((a = o.current) == null ? void 0 : a.getBoundingClientRect().y) || 0 : r = f.scrollTop;
+      const d = n.current < r ? "forward" : "backward";
+      n.current = r, s.set({
+        scrollPosition: Math.round(r),
         scrollDirection: d,
-        tabsShown: e.get().tabsShown
+        tabsShown: s.get().tabsShown
       });
     }, 200);
-    return s.addEventListener("scroll", i), () => {
-      s.removeEventListener("scroll", i);
+    return c.addEventListener("scroll", u), () => {
+      c.removeEventListener("scroll", u);
     };
-  }, [e, t, c.screen]), [r, e];
+  }, [s, o, i.screen]), [e, s];
 };
 export {
   C as scrollIntoAppView,

package/lib/ui/gamification/invite-link/index.js

@@ -1,16 +1,30 @@
-import { jsxs as i, jsx as C } from "react/jsx-runtime";
-import { Container as o, FriendsIcon as c, Content as l, Title as s, Description as h, ArrowInviteIcon as d } from "./styles.js";
+import { jsxs as C, jsx as i } from "react/jsx-runtime";
+import { useAnalyticsHandle as c } from "../../../hooks/analytics.js";
+import { InvitationFrom as l } from "@streamlayer/sdk-web-types";
+import { Container as m, FriendsIcon as s, Content as p, Title as a, Description as d, ArrowInviteIcon as h } from "./styles.js";
+import "lodash.throttle";
+import "react";
+import "@streamlayer/sdk-web-interfaces";
+import "../../theme/constants.js";
 import "@linaria/react";
 import "../../icons/index.js";
-import "react";
-const p = "data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='32'%20height='32'%20rx='16'%20fill='white'/%3e%3cpath%20d='M10.4615%2012.6875C9.44231%2012.6875%208.61538%2013.4665%208.61538%2014.4266C8.61538%2015.3868%209.44231%2016.1658%2010.4615%2016.1658C11.4808%2016.1658%2012.3077%2015.3868%2012.3077%2014.4266C12.3077%2013.4665%2011.4808%2012.6875%2010.4615%2012.6875ZM10.4615%2016.1658C9.10817%2016.1658%208%2017.2097%208%2018.4846V19.7527C8%2019.7527%208.61538%2020.2237%2010.4615%2020.2237C12.3077%2020.2237%2012.9231%2019.7527%2012.9231%2019.7527V18.4846C12.9231%2017.2097%2011.8149%2016.1658%2010.4615%2016.1658ZM21.5385%2012.6875C20.5192%2012.6875%2019.6923%2013.4665%2019.6923%2014.4266C19.6923%2015.3868%2020.5192%2016.1658%2021.5385%2016.1658C22.5577%2016.1658%2023.3846%2015.3868%2023.3846%2014.4266C23.3846%2013.4665%2022.5577%2012.6875%2021.5385%2012.6875ZM21.5385%2016.1658C20.1851%2016.1658%2019.0769%2017.2097%2019.0769%2018.4846V19.7527C19.0769%2019.7527%2019.6923%2020.2237%2021.5385%2020.2237C23.3846%2020.2237%2024%2019.7527%2024%2019.7527V18.4846C24%2017.2097%2022.8918%2016.1658%2021.5385%2016.1658ZM16%2015.0063C14.9808%2015.0063%2014.1538%2015.7853%2014.1538%2016.7455C14.1538%2017.7056%2014.9808%2018.4846%2016%2018.4846C17.0192%2018.4846%2017.8462%2017.7056%2017.8462%2016.7455C17.8462%2015.7853%2017.0192%2015.0063%2016%2015.0063ZM16%2018.4846C14.6466%2018.4846%2013.5385%2019.5285%2013.5385%2020.8034V22.0715C13.5385%2022.0715%2014.1538%2022.5425%2016%2022.5425C17.8462%2022.5425%2018.4615%2022.0715%2018.4615%2022.0715V20.8034C18.4615%2019.5285%2017.3534%2018.4846%2016%2018.4846Z'%20fill='%23107D57'/%3e%3cpath%20opacity='0.5'%20d='M13.3908%209C12.3103%209%2011.4336%209.82584%2011.4336%2010.8437C11.4336%2011.8616%2012.3103%2012.6875%2013.3908%2012.6875C14.4713%2012.6875%2015.348%2011.8616%2015.348%2010.8437C15.348%209.82584%2014.4713%209%2013.3908%209ZM13.3908%2012.6875C13.1946%2012.6875%2012.9958%2012.6827%2012.7996%2012.7451C13.192%2013.2372%2013.3908%2013.8542%2013.3908%2014.5312C13.3908%2014.7761%2013.3296%2015.0161%2013.3296%2015.261C13.8521%2014.524%2014.6956%2014.0391%2015.6742%2013.9166C15.218%2013.1796%2014.3694%2012.6875%2013.3908%2012.6875ZM18.61%209C17.5295%209%2016.6528%209.82584%2016.6528%2010.8437C16.6528%2011.8616%2017.5295%2012.6875%2018.61%2012.6875C19.6905%2012.6875%2020.5672%2011.8616%2020.5672%2010.8437C20.5672%209.82584%2019.6905%209%2018.61%209ZM18.61%2012.6875C17.6314%2012.6875%2016.7828%2013.1796%2016.3266%2013.9166C17.3052%2014.0391%2018.1487%2014.524%2018.6712%2015.261C18.6712%2015.0161%2018.61%2014.7761%2018.61%2014.5312C18.61%2013.8542%2018.8088%2013.2372%2019.2012%2012.7451C19.005%2012.6827%2018.8062%2012.6875%2018.61%2012.6875Z'%20fill='%23107D57'/%3e%3c/svg%3e", f = ({ title: t, description: e, onClick: n, className: r }) => /* @__PURE__ */ i(o, { onClick: n, className: r, children: [
-  /* @__PURE__ */ C(c, { alt: "friends-icon", src: p }),
-  /* @__PURE__ */ i(l, { children: [
-    /* @__PURE__ */ C(s, { children: t }),
-    /* @__PURE__ */ C(h, { children: e })
-  ] }),
-  /* @__PURE__ */ C(d, { name: "icon-copy" })
-] });
+const f = "data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='32'%20height='32'%20rx='16'%20fill='white'/%3e%3cpath%20d='M10.4615%2012.6875C9.44231%2012.6875%208.61538%2013.4665%208.61538%2014.4266C8.61538%2015.3868%209.44231%2016.1658%2010.4615%2016.1658C11.4808%2016.1658%2012.3077%2015.3868%2012.3077%2014.4266C12.3077%2013.4665%2011.4808%2012.6875%2010.4615%2012.6875ZM10.4615%2016.1658C9.10817%2016.1658%208%2017.2097%208%2018.4846V19.7527C8%2019.7527%208.61538%2020.2237%2010.4615%2020.2237C12.3077%2020.2237%2012.9231%2019.7527%2012.9231%2019.7527V18.4846C12.9231%2017.2097%2011.8149%2016.1658%2010.4615%2016.1658ZM21.5385%2012.6875C20.5192%2012.6875%2019.6923%2013.4665%2019.6923%2014.4266C19.6923%2015.3868%2020.5192%2016.1658%2021.5385%2016.1658C22.5577%2016.1658%2023.3846%2015.3868%2023.3846%2014.4266C23.3846%2013.4665%2022.5577%2012.6875%2021.5385%2012.6875ZM21.5385%2016.1658C20.1851%2016.1658%2019.0769%2017.2097%2019.0769%2018.4846V19.7527C19.0769%2019.7527%2019.6923%2020.2237%2021.5385%2020.2237C23.3846%2020.2237%2024%2019.7527%2024%2019.7527V18.4846C24%2017.2097%2022.8918%2016.1658%2021.5385%2016.1658ZM16%2015.0063C14.9808%2015.0063%2014.1538%2015.7853%2014.1538%2016.7455C14.1538%2017.7056%2014.9808%2018.4846%2016%2018.4846C17.0192%2018.4846%2017.8462%2017.7056%2017.8462%2016.7455C17.8462%2015.7853%2017.0192%2015.0063%2016%2015.0063ZM16%2018.4846C14.6466%2018.4846%2013.5385%2019.5285%2013.5385%2020.8034V22.0715C13.5385%2022.0715%2014.1538%2022.5425%2016%2022.5425C17.8462%2022.5425%2018.4615%2022.0715%2018.4615%2022.0715V20.8034C18.4615%2019.5285%2017.3534%2018.4846%2016%2018.4846Z'%20fill='%23107D57'/%3e%3cpath%20opacity='0.5'%20d='M13.3908%209C12.3103%209%2011.4336%209.82584%2011.4336%2010.8437C11.4336%2011.8616%2012.3103%2012.6875%2013.3908%2012.6875C14.4713%2012.6875%2015.348%2011.8616%2015.348%2010.8437C15.348%209.82584%2014.4713%209%2013.3908%209ZM13.3908%2012.6875C13.1946%2012.6875%2012.9958%2012.6827%2012.7996%2012.7451C13.192%2013.2372%2013.3908%2013.8542%2013.3908%2014.5312C13.3908%2014.7761%2013.3296%2015.0161%2013.3296%2015.261C13.8521%2014.524%2014.6956%2014.0391%2015.6742%2013.9166C15.218%2013.1796%2014.3694%2012.6875%2013.3908%2012.6875ZM18.61%209C17.5295%209%2016.6528%209.82584%2016.6528%2010.8437C16.6528%2011.8616%2017.5295%2012.6875%2018.61%2012.6875C19.6905%2012.6875%2020.5672%2011.8616%2020.5672%2010.8437C20.5672%209.82584%2019.6905%209%2018.61%209ZM18.61%2012.6875C17.6314%2012.6875%2016.7828%2013.1796%2016.3266%2013.9166C17.3052%2014.0391%2018.1487%2014.524%2018.6712%2015.261C18.6712%2015.0161%2018.61%2014.7761%2018.61%2014.5312C18.61%2013.8542%2018.8088%2013.2372%2019.2012%2012.7451C19.005%2012.6827%2018.8062%2012.6875%2018.61%2012.6875Z'%20fill='%23107D57'/%3e%3c/svg%3e", D = ({ title: t, description: n, onClick: o, className: r }) => {
+  const [e] = c({
+    type: "invitation",
+    action: "sent",
+    payload: {
+      from: l.TITLE_CARD
+    }
+  });
+  return /* @__PURE__ */ C(m, { onClick: e(o), className: r, children: [
+    /* @__PURE__ */ i(s, { alt: "friends-icon", src: f }),
+    /* @__PURE__ */ C(p, { children: [
+      /* @__PURE__ */ i(a, { children: t }),
+      /* @__PURE__ */ i(d, { children: n })
+    ] }),
+    /* @__PURE__ */ i(h, { name: "icon-copy" })
+  ] });
+};
 export {
-  f as InviteLink
+  D as InviteLink
 };

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { Gamification } from '@streamlayer/feature-gamification';
 import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
-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';
@@ -17,7 +16,6 @@ type OnboardingType = OnboardingInviteCardProps & {
     primaryColor?: string;
     inviteCardBtnLabel?: string;
     loading: boolean;
-    renderToNode?: AppNodeRef | HeaderNodeRef;
     inviterName?: string;
     onClose: () => void;
 };

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

@@ -1,18 +1,23 @@
 import { jsx as t, jsxs as y } from "react/jsx-runtime";
-import { useState as h, useEffect as s, useMemo as E, useCallback as F } from "react";
-import G from "react-virtualized-auto-sizer";
-import { Skeleton as M } from "../../skeleton/index.js";
-import { OnboardingInstructions as P } from "./slides/onboarding-instructions/index.js";
-import { OnboardingInviteCard as R } from "./slides/onboarding-invite-card/index.js";
-import { OnboardingRules as U } from "./slides/onboarding-rules/index.js";
-import { OnboardingTerms as q } from "./slides/onboarding-terms/index.js";
-import { Container as J, OnboardingHeader as K, CloseBtn as Q, IconClose as V, Content as W, OnboardingFooter as X, OnboardingActionBtn as Y } from "./styles.js";
+import { useState as p, useEffect as s, useMemo as N, useCallback as z } from "react";
+import E from "react-virtualized-auto-sizer";
+import { Skeleton as F } from "../../skeleton/index.js";
+import { OnboardingInstructions as G } from "./slides/onboarding-instructions/index.js";
+import { OnboardingInviteCard as M } from "./slides/onboarding-invite-card/index.js";
+import { OnboardingRules as P } from "./slides/onboarding-rules/index.js";
+import { OnboardingTerms as R } from "./slides/onboarding-terms/index.js";
+import { Container as U, OnboardingHeader as q, CloseBtn as J, IconClose as K, Content as Q, OnboardingFooter as V, OnboardingActionBtn as W } from "./styles.js";
 import "../../skeleton/styles.js";
 import "@linaria/react";
 import "./invitingUser/index.js";
 import "../../../utils/common.js";
 import "./invitingUser/styles.js";
 import "./slides/onboarding-instructions/styles.js";
+import "../../../hooks/analytics.js";
+import "lodash.throttle";
+import "@streamlayer/sdk-web-interfaces";
+import "../../theme/constants.js";
+import "@streamlayer/sdk-web-types";
 import "../../app/useClipboardCopy.js";
 import "../../../index-jRXrW6ie.js";
 import "../../../index-uEuzH3jr.js";
@@ -24,80 +29,75 @@ import "./slides/onboarding-rules/styles.js";
 import "./slides/onboarding-terms/styles.js";
 import "../../button/index.js";
 import "../../button/styles.js";
-const m = {
+const e = {
   steps: !1,
   rules: !1,
   inviteCard: !1
-}, si = ({
+}, Ti = ({
   gamification: v,
   steps: i,
-  rules: r,
+  rules: o,
   rulesBtnLabel: d,
   rulesTitle: I,
   termsTitle: T,
-  termsText: p,
+  termsText: h,
   primaryColor: u,
   inviteLink: x,
-  socialLinks: D,
-  inviteCardTitle: k,
-  inviteCardSubtext: w,
+  inviteCardTitle: D,
+  inviteCardSubtext: k,
   inviteCardBtnLabel: g,
   loading: a,
-  renderToNode: A,
   inviterName: c,
   sdk: b,
-  onClose: j
+  onClose: w
 }) => {
-  const [o, C] = h(0), [l, O] = h(!1), [n, e] = h(m);
+  const [m, C] = p(0), [l, O] = p(!1), [r, n] = p(e);
   s(() => {
-    i != null && i.length ? e({ ...m, steps: !0 }) : r != null && r.length ? e({ ...m, rules: !0 }) : e({ ...m, inviteCard: !0 });
+    i != null && i.length ? n({ ...e, steps: !0 }) : o != null && o.length ? n({ ...e, rules: !0 }) : n({ ...e, inviteCard: !0 });
   }, []);
-  const H = E(() => n.steps && o === 0 ? "Continue" : n.rules ? l || !d ? "Got it" : d : n.inviteCard ? g || "Play Now" : "Next", [n, o, l, d, g]), N = F(() => {
-    i != null && i.length && o < i.length - 1 ? C((f) => ++f) : r != null && r.length && n.steps ? e({ ...m, rules: !0 }) : n.rules && e({ ...m, inviteCard: !0 });
-  }, [o, i == null ? void 0 : i.length, r == null ? void 0 : r.length, n, C, e]), z = async () => {
-    n.inviteCard ? await v.onboardingStatus.submitInplay() : n.rules && l ? O(!1) : N();
+  const A = N(() => r.steps && m === 0 ? "Continue" : r.rules ? l || !d ? "Got it" : d : r.inviteCard ? g || "Play Now" : "Next", [r, m, l, d, g]), j = z(() => {
+    i != null && i.length && m < i.length - 1 ? C((f) => ++f) : o != null && o.length && r.steps ? n({ ...e, rules: !0 }) : r.rules && n({ ...e, inviteCard: !0 });
+  }, [m, i == null ? void 0 : i.length, o == null ? void 0 : o.length, r, C, n]), H = async () => {
+    r.inviteCard ? await v.onboardingStatus.submitInplay() : r.rules && l ? O(!1) : j();
   };
   return s(() => {
     !a && c && b.inviteDisplayed();
-  }, [a, c, b]), /* @__PURE__ */ t(G, { children: ({ width: f, height: S }) => /* @__PURE__ */ y(J, { style: { width: f, height: S, maxHeight: S }, children: [
-    /* @__PURE__ */ t(K, { children: /* @__PURE__ */ t(Q, { onClick: j, children: /* @__PURE__ */ t(V, { name: "icon-close-btn-gray" }) }) }),
-    /* @__PURE__ */ y(W, { children: [
-      n.steps && (i == null ? void 0 : i.length) && /* @__PURE__ */ t(
-        P,
+  }, [a, c, b]), /* @__PURE__ */ t(E, { children: ({ width: f, height: S }) => /* @__PURE__ */ y(U, { style: { width: f, height: S, maxHeight: S }, children: [
+    /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(J, { onClick: w, children: /* @__PURE__ */ t(K, { name: "icon-close-btn-gray" }) }) }),
+    /* @__PURE__ */ y(Q, { children: [
+      r.steps && (i == null ? void 0 : i.length) && /* @__PURE__ */ t(
+        G,
         {
           loading: a,
-          stepsCount: i.length,
-          currentStep: o,
-          inviterName: c,
-          ...i[o]
+          steps: i,
+          currentStep: m,
+          inviterName: c
         }
       ),
-      n.rules && !l && /* @__PURE__ */ t(
-        U,
+      r.rules && !l && /* @__PURE__ */ t(
+        P,
         {
-          rules: r,
+          rules: o,
           rulesTitle: I,
-          termsText: p,
+          termsText: h,
           primaryColor: u,
           openTerms: () => O(!0)
         }
       ),
-      n.rules && l && /* @__PURE__ */ t(q, { termsTitle: T, termsText: p }),
-      n.inviteCard && /* @__PURE__ */ t(
-        R,
+      r.rules && l && /* @__PURE__ */ t(R, { termsTitle: T, termsText: h }),
+      r.inviteCard && /* @__PURE__ */ t(
+        M,
         {
           inviteLink: x,
-          inviteCardTitle: k,
-          inviteCardSubtext: w,
-          primaryColor: u,
-          socialLinks: D,
-          renderToNode: A
+          inviteCardTitle: D,
+          inviteCardSubtext: k,
+          primaryColor: u
         }
       )
     ] }),
-    /* @__PURE__ */ t(X, { children: /* @__PURE__ */ t(M, { loading: a, style: { width: "100%" }, children: /* @__PURE__ */ t(Y, { onClick: z, children: H }) }) })
+    /* @__PURE__ */ t(V, { children: /* @__PURE__ */ t(F, { loading: a, style: { width: "100%" }, children: /* @__PURE__ */ t(W, { onClick: H, children: A }) }) })
   ] }) });
 };
 export {
-  si as OnboardingUI
+  Ti as OnboardingUI
 };

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-type OnboardingInstructionsProps = OnboardingStep & {
+type OnboardingInstructionsProps = {
     loading: boolean;
-    stepsCount: number;
+    steps: OnboardingStep[];
     currentStep: number;
     inviterName?: string;
 };

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/index.js

@@ -1,26 +1,27 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { InvitingUser as s } from "../../invitingUser/index.js";
-import { Skeleton as p } from "../../../../skeleton/index.js";
-import { Container as h, Content as a, Graphic as l, Headline as f, InvitingUserWrap as x, StepsContainer as g, StepIndicator as y } from "./styles.js";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { InvitingUser as h } from "../../invitingUser/index.js";
+import { Skeleton as d } from "../../../../skeleton/index.js";
+import { Container as l, Content as p, Graphic as s, GraphicImage as f, Headline as I, InvitingUserWrap as g, StepsContainer as v, StepIndicator as x } from "./styles.js";
 import "../../../../../utils/common.js";
 import "../../invitingUser/styles.js";
 import "@linaria/react";
 import "../../../../skeleton/styles.js";
-const G = ({
-  loading: i,
-  graphicSrc: c,
-  headline: t,
-  stepsCount: d,
-  currentStep: n,
-  inviterName: e
-}) => /* @__PURE__ */ m(h, { children: [
-  /* @__PURE__ */ m(a, { "data-centered": n === 0, children: [
-    /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(p, { loading: i, style: { width: "80px", height: "80px" }, children: /* @__PURE__ */ r("img", { src: c, alt: t }) }) }),
-    t && /* @__PURE__ */ r(p, { loading: i, children: /* @__PURE__ */ r(f, { children: t }) })
-  ] }),
-  e && n === 0 && /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(s, { name: e }) }),
-  /* @__PURE__ */ r(g, { style: i ? { visibility: "hidden" } : {}, children: Array.from({ length: d }).map((I, o) => /* @__PURE__ */ r(y, { "data-active": n === o }, o)) })
-] });
+const A = ({
+  loading: e,
+  steps: o,
+  currentStep: r,
+  inviterName: t
+}) => {
+  const { headline: a } = o[r];
+  return /* @__PURE__ */ c(l, { children: [
+    /* @__PURE__ */ c(p, { "data-welcome-screen": r === 0, children: [
+      /* @__PURE__ */ i(s, { children: /* @__PURE__ */ i(d, { loading: e, children: o.map(({ graphicSrc: m }, n) => /* @__PURE__ */ i(f, { src: m, "data-active": r === n })) }) }),
+      a && /* @__PURE__ */ i(d, { loading: e, children: /* @__PURE__ */ i(I, { children: a }) })
+    ] }),
+    t && r === 0 && /* @__PURE__ */ i(g, { children: /* @__PURE__ */ i(h, { name: t }) }),
+    /* @__PURE__ */ i(v, { style: e ? { visibility: "hidden" } : {}, children: Array.from({ length: o.length }).map((m, n) => /* @__PURE__ */ i(x, { "data-active": r === n }, n)) })
+  ] });
+};
 export {
-  G as OnboardingInstructions
+  A as OnboardingInstructions
 };

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/styles.d.ts

@@ -1,6 +1,7 @@
 /// <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 Graphic: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const GraphicImage: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;
 export declare const Headline: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & 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 StepsContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/gamification/onboarding/slides/onboarding-instructions/styles.js

@@ -1,5 +1,5 @@
 import { styled as s } from "@linaria/react";
-const a = /* @__PURE__ */ s("div")({
+const n = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1htq1lb",
   propsAsIs: !1
@@ -7,33 +7,38 @@ const a = /* @__PURE__ */ s("div")({
   name: "Graphic",
   class: "gjyzpp7",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("img")({
+  name: "GraphicImage",
+  class: "g16mldgz",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
   name: "Headline",
-  class: "h16mldgz",
+  class: "h69js65",
   propsAsIs: !1
 }), t = /* @__PURE__ */ s("div")({
   name: "Content",
-  class: "c69js65",
+  class: "cmm7qmo",
   propsAsIs: !1
-}), o = /* @__PURE__ */ s("div")({
+}), i = /* @__PURE__ */ s("div")({
   name: "StepsContainer",
-  class: "smm7qmo",
+  class: "s17knuw2",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("span")({
+}), r = /* @__PURE__ */ s("span")({
   name: "StepIndicator",
-  class: "s17knuw2",
+  class: "s1b74psg",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("div")({
+}), c = /* @__PURE__ */ s("div")({
   name: "InvitingUserWrap",
-  class: "i1b74psg",
+  class: "i1y99ug7",
   propsAsIs: !1
 });
 export {
-  a as Container,
+  n as Container,
   t as Content,
   e as Graphic,
-  p as Headline,
-  r as InvitingUserWrap,
-  i as StepIndicator,
-  o as StepsContainer
+  p as GraphicImage,
+  o as Headline,
+  c as InvitingUserWrap,
+  r as StepIndicator,
+  i as StepsContainer
 };

package/lib/ui/gamification/onboarding/slides/onboarding-invite-card/index.d.ts

@@ -1,13 +1,10 @@
 /// <reference types="react" />
-import { HeaderNodeRef, type AppNodeRef } from '../../../../app/masters';
 import { icons } from '../../../../icons';
 export type OnboardingInviteCardProps = {
-    renderToNode: AppNodeRef | HeaderNodeRef;
     inviteLink?: string;
     inviteCardTitle?: string;
     inviteCardSubtext?: string;
     primaryColor?: string;
-    socialLinks?: InviteCardSocialLink[];
     className?: string;
 };
 export type InviteCardSocialLink = {