@streamlayer/react-ui 0.92.0 → 0.93.0

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

@@ -1,18 +1,22 @@
-import { jsx as e, jsxs as N, Fragment as b } from "react/jsx-runtime";
+import { jsx as o, jsxs as N, Fragment as T } from "react/jsx-runtime";
 import { useStore as y } from "@nanostores/react";
-import { useState as S, useMemo as O, useEffect as I, useRef as v, useCallback as R } from "react";
-import { r as C } from "../../../useClipboardCopy-E5rEe6It.js";
+import { useState as S, useMemo as k, useEffect as I, useRef as b, useCallback as O } from "react";
+import { r as v } from "../../../useClipboardCopy-E5rEe6It.js";
 import { NotificationType as g } from "@streamlayer/sdk-web-notifications";
+import { scrollIntoAppView as C } from "../useSdkScroll.js";
 import { QuestionTypeData as D } from "../../gamification/constants.js";
-import { Notification as T } from "../../gamification/question/notification/index.js";
+import { Notification as R } from "../../gamification/question/notification/index.js";
 import { PredictionResult as E } from "../../gamification/question/notification/prediction-result/index.js";
 import { Onboarding as x } from "./Onboarding/index.js";
-import { Pill as B, HiddenContainer as H, Container as P, InnerContainer as q, NotificationRefreshing as Q } from "./styles.js";
+import { Pill as B, HiddenContainer as H, Container as P, InnerContainer as q, NotificationRefreshing as A } from "./styles.js";
 import "../../../index-uEuzH3jr.js";
 import "../../gamification/copyNotification/index.js";
 import "../../icons/index.js";
 import "@linaria/react";
 import "../../gamification/copyNotification/styles.js";
+import "lodash.throttle";
+import "../../theme/constants.js";
+import "../../../index-keh7OLCY.js";
 import "@streamlayer/sdk-web-types";
 import "../../gamification/question/notification/insight/index.js";
 import "../../video-player/index.js";
@@ -25,13 +29,18 @@ import "../../questions/twitter/account/index.js";
 import "../../questions/twitter/account/styles.js";
 import "../../questions/twitter/styles.js";
 import "../../gamification/question/notification/tweet/styles.js";
+import "../../animated-counter/index.js";
+import "react-countup";
 import "../../gamification/question/notification/prediction-result/animation-lines/index.js";
 import "../../gamification/question/notification/prediction-result/animation-lines/styles.js";
 import "../../gamification/question/notification/prediction-result/styles.js";
 import "../../show-in/index.js";
 import "@linaria/core";
+import "../useImagesPreload.js";
 import "../../gamification/onboarding/index.js";
 import "react-virtualized-auto-sizer";
+import "../../skeleton/index.js";
+import "../../skeleton/styles.js";
 import "../../gamification/onboarding/slides/onboarding-instructions/index.js";
 import "../../gamification/onboarding/slides/onboarding-instructions/styles.js";
 import "../../gamification/onboarding/slides/onboarding-invite-card/index.js";
@@ -47,36 +56,33 @@ import "./Onboarding/Notification/index.js";
 import "./Onboarding/Notification/styles.js";
 import "../../gamification/question/notification/pill/index.js";
 import "../../gamification/question/notification/pill/styles.js";
-const j = (s) => {
-  const [t, n] = S(0), i = v(null), l = R((r) => {
+const Q = (n) => {
+  const [t, m] = S(0), i = b(null), l = O((r) => {
     i.current = r;
   }, []);
   I(() => {
-    var o;
-    const r = (o = i.current) == null ? void 0 : o.getBoundingClientRect();
-    r && n(r.height);
-  }, [s]);
-  const c = R((r) => {
-    n(r);
+    var e;
+    const r = (e = i.current) == null ? void 0 : e.getBoundingClientRect();
+    r && m(r.height);
+  }, [n]);
+  const c = O((r) => {
+    m(r);
   }, []);
   return [l, t, c];
-}, z = ({
-  sdk: s,
+}, j = ({
+  sdk: n,
   notification: t,
-  appNode: n,
+  appNode: m,
   headerNode: i,
   sdkInScrollView: l
 }) => {
-  var u, m;
-  const [c, r, o] = j(t.id);
+  var u, p;
+  const [c, r, e] = Q(t.id);
   if (t.type === g.QUESTION)
-    return /* @__PURE__ */ N(b, {
-      children: [/* @__PURE__ */ e(H, {
+    return /* @__PURE__ */ N(T, {
+      children: [/* @__PURE__ */ o(H, {
         ref: c,
-        style: {
-          position: "absolute"
-        },
-        children: /* @__PURE__ */ e(T, {
+        children: /* @__PURE__ */ o(R, {
           ...t
         })
       }), /* @__PURE__ */ N(P, {
@@ -84,56 +90,56 @@ const j = (s) => {
           height: t.hiding ? 0 : r
         },
         hiding: t.hiding,
-        children: [/* @__PURE__ */ e(q, {
+        children: [/* @__PURE__ */ o(q, {
           style: {
             height: "100%"
           },
-          children: /* @__PURE__ */ e(T, {
+          children: /* @__PURE__ */ o(R, {
             ...t
           })
-        }), /* @__PURE__ */ e(Q, {}, t.id)]
+        }), /* @__PURE__ */ o(A, {}, t.id)]
       })]
     });
-  if (t.type === g.QUESTION_RESOLVED && ((m = (u = t.data) == null ? void 0 : u.question) != null && m.predictionResult))
-    return /* @__PURE__ */ e(E, {
+  if (t.type === g.QUESTION_RESOLVED && ((p = (u = t.data) == null ? void 0 : u.question) != null && p.predictionResult))
+    return /* @__PURE__ */ o(E, {
       style: {
         height: t.hiding ? 0 : r
       },
-      saveHeight: o,
+      saveHeight: e,
       close: t.close,
       hiding: t.hiding,
       ...t.data.question
     });
   if (t.type === g.ONBOARDING) {
-    const p = l ? n : i;
-    return /* @__PURE__ */ e(x, {
+    const s = l ? m : i;
+    return /* @__PURE__ */ o(x, {
       style: {
         height: t.hiding ? 0 : r
       },
-      saveHeight: o,
-      sdk: s,
+      saveHeight: e,
+      sdk: n,
       notification: t,
-      renderToNode: p
+      renderToNode: s
     });
   }
   return null;
-}, Pt = ({
-  sdk: s,
+}, Kt = ({
+  sdk: n,
   headerNode: t,
-  responsiveStore: n,
+  responsiveStore: m,
   appNode: i,
   scrollStore: l
 }) => {
-  const [c] = S(s.getNotificationsStore()), r = y(c), {
-    tabsShown: o
+  const [c] = S(n.getNotificationsStore()), r = y(c), {
+    tabsShown: e
   } = y(l, {
     keys: ["tabsShown"]
   }), {
     sdkInView: u,
-    sdkInScrollView: m
-  } = y(n, {
+    sdkInScrollView: p
+  } = y(m, {
     keys: ["sdkInView", "sdkInScrollView"]
-  }), [p, a] = S(null), h = O(() => {
+  }), [s, f] = S(null), h = k(() => {
     if (!(r != null && r.size))
       return null;
     for (const d of r.values())
@@ -142,34 +148,33 @@ const j = (s) => {
     return r.values().next().value;
   }, [r]);
   I(() => {
-    h && n.get().sdkInView && a(h);
+    h && m.get().sdkInView && f(h);
   }, [h]), I(() => {
-    u || a(null);
+    u || f(null);
   }, [u]);
-  const V = O(() => {
+  const V = k(() => {
     var d, w;
-    const f = m ? i : t;
-    return p && f.current && C.createPortal(/* @__PURE__ */ e(B, {
-      title: `New ${((w = D[(d = p.data) == null ? void 0 : d.questionType]) == null ? void 0 : w.label) || "notification"}`,
+    const a = p ? i : t;
+    return s && a.current && v.createPortal(/* @__PURE__ */ o(B, {
+      title: `New ${((w = D[(d = s.data) == null ? void 0 : d.questionType]) == null ? void 0 : w.label) || "notification"}`,
       onClick: () => {
-        var k;
-        (k = i.current) == null || k.scrollIntoView({
+        C(i, {
           behavior: "smooth"
-        }), a(null);
+        }), f(null);
       },
-      className: o ? "c1d7yse1" : void 0
-    }), f.current) || null;
-  }, [p, m, i, t, o]);
-  return /* @__PURE__ */ N(b, {
-    children: [!p && h && /* @__PURE__ */ e(z, {
-      sdkInScrollView: m,
+      className: e ? "c1d7yse1" : void 0
+    }), a.current) || null;
+  }, [s, p, i, t, e]);
+  return /* @__PURE__ */ N(T, {
+    children: [!s && h && /* @__PURE__ */ o(j, {
+      sdkInScrollView: p,
       headerNode: t,
       appNode: i,
-      sdk: s,
+      sdk: n,
       notification: h
     }), V]
   });
 };
 export {
-  Pt as SDKNotifications
+  Kt as SDKNotifications
 };

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

@@ -8,6 +8,7 @@ import "@streamlayer/sdk-web-interfaces";
 import "../../animated-counter/index.js";
 import "react-countup";
 import "../../theme/theme.js";
+import "../../theme/breakpoints.js";
 import "../../theme/constants.js";
 import "../../gamification/points/styles.js";
 import "@linaria/react";
@@ -15,18 +16,18 @@ import "../../icons/index.js";
 const S = ({ userSummary: t }) => {
   const [o, r] = p(0);
   return u(() => {
-    const n = t.subscribe((e) => {
-      var i, m;
-      (m = (i = e.data) == null ? void 0 : i.summary) != null && m.points && r(e.data.summary.points);
+    const n = t.subscribe((i) => {
+      var e, m;
+      (m = (e = i.data) == null ? void 0 : e.summary) != null && m.points && r(i.data.summary.points);
     });
     return () => {
       n();
     };
   }, [t]), /* @__PURE__ */ s(f, { points: o });
-}, k = ({ sdk: t }) => {
+}, A = ({ sdk: t }) => {
   const [o, r] = c(t);
   return o !== a.GAMES || !r ? null : /* @__PURE__ */ s(S, { userSummary: r.userSummary.getStore() });
 };
 export {
-  k as StreamLayerSDKPoints
+  A as StreamLayerSDKPoints
 };

package/lib/ui/app/masters.js

@@ -12,6 +12,7 @@ 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/breakpoints.js";
 import "../theme/constants.js";
 import "@streamlayer/sdk-web-types";
 import "./Features/FeatureProvider.js";
@@ -42,14 +43,19 @@ import "../questions/twitter/account/styles.js";
 import "../questions/twitter/styles.js";
 import "../gamification/question/notification/tweet/styles.js";
 import "../gamification/question/notification/prediction-result/index.js";
+import "../animated-counter/index.js";
+import "react-countup";
 import "../gamification/question/notification/prediction-result/animation-lines/index.js";
 import "../gamification/question/notification/prediction-result/animation-lines/styles.js";
 import "../gamification/question/notification/prediction-result/styles.js";
 import "../show-in/index.js";
 import "@linaria/core";
 import "./Notifications/Onboarding/index.js";
+import "./useImagesPreload.js";
 import "../gamification/onboarding/index.js";
 import "react-virtualized-auto-sizer";
+import "../skeleton/index.js";
+import "../skeleton/styles.js";
 import "../gamification/onboarding/slides/onboarding-instructions/index.js";
 import "../gamification/onboarding/slides/onboarding-instructions/styles.js";
 import "../gamification/onboarding/slides/onboarding-invite-card/index.js";
@@ -83,7 +89,7 @@ const M = ({ sdk: r, className: s, scrollStore: n, appNode: t, scrollNode: i, he
       sdk: r
     }
   );
-}, Xt = ({ sdk: r, overlays: s, children: n }) => {
+}, or = ({ 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");
@@ -129,5 +135,5 @@ const M = ({ sdk: r, className: s, scrollStore: n, appNode: t, scrollNode: i, he
   ] });
 };
 export {
-  Xt as MastersApp
+  or as MastersApp
 };

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

@@ -12,3 +12,4 @@ export declare const LeaderboardContainer: import("@linaria/react").WYWEvalMeta
 export declare const TabsNavContainer: import("@linaria/react").WYWEvalMeta & import("react").FunctionComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }>;
+export declare const UserSummaryContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/app/styles.js

@@ -27,6 +27,10 @@ const i = /* @__PURE__ */ s("div")({
   name: "TabsNavContainer",
   class: "tvdam54",
   propsAsIs: !0
+}), m = /* @__PURE__ */ s("div")({
+  name: "UserSummaryContainer",
+  class: "u14fk93k",
+  propsAsIs: !1
 });
 export {
   l as LeaderboardContainer,
@@ -35,5 +39,6 @@ export {
   c as SDKScrollContainer,
   n as SDKWhiteContainer,
   p as TabsContainer,
-  C as TabsNavContainer
+  C as TabsNavContainer,
+  m as UserSummaryContainer
 };

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

@@ -0,0 +1,4 @@
+export declare const useImagesPreload: (images?: string[]) => {
+    loading: boolean;
+    throttled: boolean;
+};

package/lib/ui/app/useImagesPreload.js

@@ -0,0 +1,23 @@
+import { useState as u, useRef as T, useCallback as c, useEffect as p } from "react";
+const I = (e) => {
+  const [i, r] = u(!1), [f, s] = u(!1), t = T(null), a = c(() => {
+    s(!0), t.current && clearTimeout(t.current), t.current = setTimeout(() => {
+      s(!1);
+    }, 1e3);
+  }, []), l = c(async (m) => {
+    r(!0);
+    const d = m.map(
+      (n) => new Promise((g, h) => {
+        const o = new Image();
+        o.onload = () => g(n), o.onerror = () => h(), o.src = n;
+      })
+    );
+    await Promise.allSettled(d), r(!1);
+  }, []);
+  return p(() => {
+    e && (a(), l(e));
+  }, [e, a, l]), { loading: i, throttled: f };
+};
+export {
+  I as useImagesPreload
+};

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 { useState as m, useEffect as k } from "react";
 import { BREAKPOINTS as s } from "../theme/constants.js";
-import { m as k } from "../../index-keh7OLCY.js";
+import { m as u } from "../../index-keh7OLCY.js";
 import "../../index-uEuzH3jr.js";
 const d = Object.keys(s), i = () => {
   const n = window.innerWidth;
@@ -17,26 +17,26 @@ const d = Object.keys(s), i = () => {
     name: e,
     size: s[e]
   };
-}, l = (n) => {
+}, w = (n) => {
   var e;
   return (((e = n.current) == null ? void 0 : e.getBoundingClientRect().y) || 0) < -68;
-}, w = (n) => n >= s.xl, I = (n) => {
+}, l = (n) => n >= s.xl, I = (n) => {
   const [e] = m(() => {
     const t = i();
-    return k({
+    return u({
       screen: i(),
-      sdkInView: l(n),
-      sdkInScrollView: w(t.size)
+      sdkInView: w(n),
+      sdkInScrollView: l(t.size)
     });
   });
-  return u(() => {
+  return k(() => {
     const t = c(() => {
-      e.setKey("sdkInView", l(n));
+      e.setKey("sdkInView", w(n));
     }, 200), r = c(() => {
       const o = i();
-      e.setKey("screen", o), e.setKey("sdkInScrollView", w(o.size));
+      e.setKey("screen", o), e.setKey("sdkInScrollView", l(o.size));
     }, 200);
-    return window.addEventListener("scroll", t), window.addEventListener("resize", r), e.subscribe((o) => console.log(o)), () => {
+    return window.addEventListener("scroll", t), window.addEventListener("resize", r), () => {
       window.removeEventListener("scroll", t), window.removeEventListener("resize", r);
     };
   }, [e, n]), [e];

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,44 @@
-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 { useStore as w } from "@nanostores/react";
+import S from "lodash.throttle";
+import { useRef as f, useState as h, useEffect as g } from "react";
+import { BREAKPOINTS as m } 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(
+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(
     v({
       scrollPosition: 0,
       scrollDirection: "forward"
     })
-  ), l = p(f);
+  ), c = w(n);
   return g(() => {
-    const t = window.innerWidth < 1200 ? window : n.current;
-    if (!t)
+    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((d) => {
+      var a;
+      const u = d.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 p = l.current < o ? "forward" : "backward";
+      l.current = o, e.set({
+        scrollPosition: Math.round(o),
+        scrollDirection: p,
+        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,6 +14,7 @@ type OnboardingType = OnboardingInviteCardProps & {
     termsText?: string;
     primaryColor?: string;
     inviteCardBtnLabel?: string;
+    loading: boolean;
     renderToNode: AppNodeRef | HeaderNodeRef;
     onClose: () => void;
 };