@streamlayer/react-ui 0.92.0 → 0.94.0

package/lib/ui/app/useMastersApp.js

@@ -1,9 +1,9 @@
-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 { useStore as d } from "@nanostores/react";
+import { useRef as y, useState as v, useCallback as I, useEffect as c } from "react";
+import { FeatureType as h } from "@streamlayer/sdk-web-types";
 import "./Navigation/MastersNavigation/index.js";
 import { FeaturedGroupsButtonId as n } from "../navigation/button/FeaturedGroups.js";
-import { ChannelsButtonId as c } from "../navigation/button/Channels.js";
+import { ChannelsButtonId as l } from "../navigation/button/Channels.js";
 import "react/jsx-runtime";
 import "../navigation/button/LeaderBoard.js";
 import "@linaria/react";
@@ -12,54 +12,61 @@ import "../navigation/button/index.js";
 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);
-      })) : t.closeFeature(!1);
+import "../theme/constants.js";
+const W = (e) => {
+  const a = y(""), [m, f] = v(!1), A = d(e.status), i = d(e.userId()), r = A === "ready", [s, u] = v(n), p = I(
+    (t, o) => {
+      u(o), o === n ? (t && e.createEventSession(t), window.requestAnimationFrame(() => {
+        e.openFeature(h.GAMES);
+      })) : e.closeFeature(!1);
     },
-    [t]
+    [e]
   );
-  v(() => {
-    !i && s === n && (u(c), t.closeFeature(!0));
-  }, [i, s, t]);
-  const S = (e) => {
-    a.current = e, f(!0), t.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: o, err: b }) => {
-      if (b) {
-        p(e, c);
+  c(() => {
+    !r && s === n && (u(l), e.closeFeature(!0));
+  }, [r, s, e]);
+  const g = (t) => {
+    a.current = t, f(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: o, err: S }) => {
+      if (S) {
+        p(t, l);
         return;
       }
       if (o) {
-        t.isUserAuthorized().then((g) => {
-          if (g) {
-            p(e, n);
+        e.isUserAuthorized().then((E) => {
+          if (E) {
+            p(t, n);
             return;
           } else
-            t.disableApp();
+            e.disableApp();
         });
         return;
       }
     });
-  }, E = () => {
-    f(!1), t.disableApp();
+  }, b = () => {
+    f(!1), e.disableApp();
   };
-  return v(() => {
-    if (!r) {
-      i && (u(c), t.disableApp());
+  return c(() => {
+    if (!i) {
+      r && (u(l), e.disableApp());
       return;
     }
-    r && a.current && m && t.initializeApp({ skipOrganizationSettings: !0 }).then(() => {
-      t.createEventSession(a.current);
-    });
-  }, [r]), {
+    if (i && a.current && m) {
+      e.initializeApp({ skipOrganizationSettings: !0 }).then(() => {
+        e.createEventSession(a.current);
+      });
+      return;
+    }
+  }, [i]), c(() => {
+    const t = e.getInviterId();
+    console.log("you invited by", t), t && e.status.get() === "disabled" && (console.log("deep link cb called"), e.deepLinkHandled());
+  }, [e]), {
     sdkEnabled: m,
-    sdkReady: i,
+    sdkReady: r,
     activeOverlay: s,
     activateAndLoadOverlay: p,
-    activateEventWithId: S,
-    deactivate: E,
-    isLogged: !!r
+    activateEventWithId: g,
+    deactivate: b,
+    isLogged: !!i
   };
 };
 export {

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

@@ -7,7 +7,7 @@ type ResponsiveData = {
         size: (typeof BREAKPOINTS)[BREAKPOINTS_KEYS];
     };
     sdkInView?: boolean;
-    sdkInScrollView?: boolean;
+    sdkInDesktopView?: boolean;
 };
 export type ResponsiveStore = MapStore<ResponsiveData>;
 export declare const useSdkResponsive: (appNode: AppNodeRef) => [ResponsiveStore];

package/lib/ui/app/useSdkResponsive.js

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

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

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

package/lib/ui/app/useSdkScroll.js

@@ -1,36 +1,45 @@
 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 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 "../../index-uEuzH3jr.js";
-const L = (e, f) => {
-  const n = a(null), s = a(0), [o] = S(
-    v({
+const D = (t, n) => {
+  var r;
+  (r = t.current) == null || r.scrollIntoView(n);
+}, I = (t, n) => {
+  const r = f(null), l = f(0), [e] = h(
+    g({
       scrollPosition: 0,
+      tabsShown: !0,
       scrollDirection: "forward"
     })
-  ), l = p(f);
-  return g(() => {
-    const t = window.innerWidth < 1200 ? window : n.current;
-    if (!t)
+  ), c = p(n);
+  return b(() => {
+    const s = window.innerWidth < m.xl ? window : r.current;
+    if (!s)
       return () => {
       };
-    const c = w((m) => {
-      var u;
-      const i = m.target;
-      if (!i)
+    const i = S((w) => {
+      var a;
+      const u = w.target;
+      if (!u)
         return;
-      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 });
+      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),
+        scrollDirection: d,
+        tabsShown: e.get().tabsShown
+      });
     }, 200);
-    return t.addEventListener("scroll", c), () => {
-      t.removeEventListener("scroll", c);
+    return s.addEventListener("scroll", i), () => {
+      s.removeEventListener("scroll", i);
     };
-  }, [o, e, l.screen]), [n, o];
+  }, [e, t, c.screen]), [r, e];
 };
 export {
-  L as useSdkScroll
+  D as scrollIntoAppView,
+  I as useSdkScroll
 };

package/lib/ui/gamification/detail/header/index.js

@@ -1,25 +1,25 @@
-import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { QuestionType as n } from "@streamlayer/sdk-web-types";
 import { QuestionTypeData as c } from "../../constants.js";
-import { Container as l, QuestionTypeWrap as a, QuestionTypeIcon as p, QuestionTypeTitle as s, CloseButton as d, CloseIcon as Q } from "./styles.js";
+import { Container as l, QuestionTypeWrap as a, QuestionTypeIcon as p, QuestionTypeTitle as s, CloseIconWrap as d, CloseIcon as I } from "./styles.js";
 import "@linaria/react";
 import "../../../icons/index.js";
 import "react";
-const N = ({ type: e, close: t, label: m }) => {
-  const o = e ? c[e] : { label: m, iconName: void 0 };
-  return /* @__PURE__ */ r(l, { children: [
-    /* @__PURE__ */ r(a, { children: [
-      (o == null ? void 0 : o.iconName) && /* @__PURE__ */ i(
+const N = ({ type: r, close: m, label: t }) => {
+  const o = r ? c[r] : { label: t, iconName: void 0 };
+  return /* @__PURE__ */ i(l, { children: [
+    /* @__PURE__ */ i(a, { children: [
+      (o == null ? void 0 : o.iconName) && /* @__PURE__ */ e(
         p,
         {
-          "data-type-trivia": e === n.TRIVIA,
-          "data-type-poll": e === n.POLL,
+          "data-type-trivia": r === n.TRIVIA,
+          "data-type-poll": r === n.POLL,
           name: o.iconName
         }
       ),
-      (o == null ? void 0 : o.label) && /* @__PURE__ */ i(s, { children: o.label })
+      (o == null ? void 0 : o.label) && /* @__PURE__ */ e(s, { children: o.label })
     ] }),
-    /* @__PURE__ */ i(d, { onClick: t, children: /* @__PURE__ */ i(Q, { name: "icon-cross" }) })
+    /* @__PURE__ */ e(d, { onClick: m, children: /* @__PURE__ */ e(I, { name: "icon-cross" }) })
   ] });
 };
 export {

package/lib/ui/gamification/detail/header/styles.d.ts

@@ -3,5 +3,5 @@ export declare const Container: import("@linaria/react").StyledComponent<import(
 export declare const QuestionTypeWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const QuestionTypeIcon: any;
 export declare const QuestionTypeTitle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
-export declare const CloseButton: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const CloseIconWrap: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const CloseIcon: any;

package/lib/ui/gamification/detail/header/styles.js

@@ -2,11 +2,11 @@ import { styled as s } from "@linaria/react";
 import { SvgIcon as o } from "../../../icons/index.js";
 import "react/jsx-runtime";
 import "react";
-const l = /* @__PURE__ */ s("div")({
+const r = /* @__PURE__ */ s("div")({
   name: "Container",
   class: "c1vwopgc",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "QuestionTypeWrap",
   class: "qyktpt0",
   propsAsIs: !1
@@ -14,24 +14,24 @@ const l = /* @__PURE__ */ s("div")({
   name: "QuestionTypeIcon",
   class: "q951jdx",
   propsAsIs: !0
-}), m = /* @__PURE__ */ s("span")({
+}), I = /* @__PURE__ */ s("span")({
   name: "QuestionTypeTitle",
   class: "qss5f0e",
   propsAsIs: !1
-}), u = /* @__PURE__ */ s("button")({
-  name: "CloseButton",
+}), m = /* @__PURE__ */ s("div")({
+  name: "CloseIconWrap",
   class: "c1ao1jtv",
   propsAsIs: !1
-}), t = () => o, I = /* @__PURE__ */ s(t())({
+}), n = () => o, u = /* @__PURE__ */ s(n())({
   name: "CloseIcon",
   class: "cvsl7l3",
   propsAsIs: !0
 });
 export {
-  u as CloseButton,
-  I as CloseIcon,
-  l as Container,
+  u as CloseIcon,
+  m as CloseIconWrap,
+  r as Container,
   i as QuestionTypeIcon,
-  m as QuestionTypeTitle,
-  r as QuestionTypeWrap
+  I as QuestionTypeTitle,
+  l as QuestionTypeWrap
 };

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

@@ -14,7 +14,8 @@ type OnboardingType = OnboardingInviteCardProps & {
     termsText?: string;
     primaryColor?: string;
     inviteCardBtnLabel?: string;
-    renderToNode: AppNodeRef | HeaderNodeRef;
+    loading: boolean;
+    renderToNode?: AppNodeRef | HeaderNodeRef;
     onClose: () => void;
 };
 export declare const Onboarding: React.FC<OnboardingType>;

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

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

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 type OnboardingInstructionsProps = OnboardingStep & {
+    loading: boolean;
     stepsCount: number;
     currentStep: number;
 };
 export type OnboardingStep = {
     graphicSrc: string;
     headline?: string;
-    width?: number;
 };
 export declare const OnboardingInstructions: React.FC<OnboardingInstructionsProps>;
 export {};

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

@@ -1,19 +1,21 @@
 import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { Container as d, Content as m, Graphic as s, Headline as p, StepsContainer as h, StepIndicator as l } from "./styles.js";
+import { Skeleton as c } from "../../../../skeleton/index.js";
+import { Container as m, Content as p, Graphic as s, Headline as a, StepsContainer as l, StepIndicator as x } from "./styles.js";
+import "../../../../skeleton/styles.js";
 import "@linaria/react";
-const j = ({
-  width: e,
-  graphicSrc: a,
-  headline: t,
-  stepsCount: c,
-  currentStep: n
-}) => /* @__PURE__ */ o(d, { children: [
-  /* @__PURE__ */ o(m, { children: [
-    /* @__PURE__ */ r(s, { "data-centered": n === 0, children: /* @__PURE__ */ r("img", { src: a, alt: t, width: e || 300 }) }),
-    t && /* @__PURE__ */ r(p, { children: t })
+const v = ({
+  loading: t,
+  graphicSrc: d,
+  headline: i,
+  stepsCount: h,
+  currentStep: e
+}) => /* @__PURE__ */ o(m, { children: [
+  /* @__PURE__ */ o(p, { "data-centered": e === 0, children: [
+    /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r(c, { loading: t, style: { width: "80px", height: "80px" }, children: /* @__PURE__ */ r("img", { src: d, alt: i }) }) }),
+    i && /* @__PURE__ */ r(c, { loading: t, children: /* @__PURE__ */ r(a, { children: i }) })
   ] }),
-  /* @__PURE__ */ r(h, { children: Array.from({ length: c }).map((f, i) => /* @__PURE__ */ r(l, { "data-active": n === i }, i)) })
+  /* @__PURE__ */ r(l, { style: t ? { visibility: "hidden" } : {}, children: Array.from({ length: h }).map((f, n) => /* @__PURE__ */ r(x, { "data-active": e === n }, n)) })
 ] });
 export {
-  j as OnboardingInstructions
+  v as OnboardingInstructions
 };

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

@@ -1,7 +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 Content: 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 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>>;
 export declare const StepIndicator: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

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

@@ -4,16 +4,16 @@ const a = /* @__PURE__ */ s("div")({
   class: "c1htq1lb",
   propsAsIs: !1
 }), e = /* @__PURE__ */ s("div")({
-  name: "Content",
-  class: "cjyzpp7",
+  name: "Graphic",
+  class: "gjyzpp7",
   propsAsIs: !1
 }), o = /* @__PURE__ */ s("div")({
-  name: "Graphic",
-  class: "g16mldgz",
+  name: "Headline",
+  class: "h16mldgz",
   propsAsIs: !1
 }), t = /* @__PURE__ */ s("div")({
-  name: "Headline",
-  class: "h69js65",
+  name: "Content",
+  class: "c69js65",
   propsAsIs: !1
 }), p = /* @__PURE__ */ s("div")({
   name: "StepsContainer",
@@ -26,9 +26,9 @@ const a = /* @__PURE__ */ s("div")({
 });
 export {
   a as Container,
-  e as Content,
-  o as Graphic,
-  t as Headline,
+  t as Content,
+  e as Graphic,
+  o as Headline,
   c as StepIndicator,
   p as StepsContainer
 };