@streamlayer/react-ui 0.67.0 → 0.67.1

package/lib/ui/app/Notifications/Onboarding/Notification/styles.js

@@ -2,48 +2,48 @@ import { styled as s } from "@linaria/react";
 import { SvgIcon as o } from "../../../../icons/index.js";
 import "react/jsx-runtime";
 import "react";
-const p = /* @__PURE__ */ s("div")({
+const a = /* @__PURE__ */ s("div")({
   name: "Container",
-  class: "Container_cocfo2g",
+  class: "cocfo2g",
   propsAsIs: !1
-}), a = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "CloseIconWrap",
-  class: "CloseIconWrap_c1pdhxdk",
+  class: "c1pdhxdk",
   propsAsIs: !1
 }), t = () => o, r = /* @__PURE__ */ s(t())({
   name: "CloseIcon",
-  class: "CloseIcon_c1funj3r",
+  class: "c1funj3r",
   propsAsIs: !0
 }), i = /* @__PURE__ */ s("div")({
   name: "Title",
-  class: "Title_t1okg06y",
+  class: "t1okg06y",
   propsAsIs: !1
 }), m = /* @__PURE__ */ s("img")({
   name: "SponsorLogo",
-  class: "SponsorLogo_sb1n923",
+  class: "sb1n923",
   propsAsIs: !1
 }), I = /* @__PURE__ */ s("div")({
   name: "PresentsTitle",
-  class: "PresentsTitle_p1stllxd",
+  class: "p1stllxd",
   propsAsIs: !1
 }), f = /* @__PURE__ */ s("div")({
   name: "Subtitle",
-  class: "Subtitle_s13kvdzw",
+  class: "s13kvdzw",
   propsAsIs: !1
 }), d = /* @__PURE__ */ s("div")({
   name: "Description",
-  class: "Description_dfvmv3t",
+  class: "dfvmv3t",
   propsAsIs: !1
 }), A = /* @__PURE__ */ s("button")({
   name: "ActionButton",
-  class: "ActionButton_ay8e3j9",
+  class: "ay8e3j9",
   propsAsIs: !1
 });
 export {
   A as ActionButton,
   r as CloseIcon,
-  a as CloseIconWrap,
-  p as Container,
+  l as CloseIconWrap,
+  a as Container,
   d as Description,
   I as PresentsTitle,
   m as SponsorLogo,

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

@@ -4,8 +4,8 @@ import { useStore as g } from "@nanostores/react";
 import { useState as y } from "react";
 import { FeatureType as k } from "@streamlayer/sdk-web-types";
 import { Onboarding as w } from "../../../gamification/onboarding/index.js";
-import { ShowIn as C } from "../../../show-in/index.js";
-import { Onboarding as f } from "./Notification/index.js";
+import { ShowIn as f } from "../../../show-in/index.js";
+import { Onboarding as C } from "./Notification/index.js";
 import "react-virtualized-auto-sizer";
 import "../../../gamification/onboarding/slides/onboarding-instructions/index.js";
 import "../../../lottie/index.js";
@@ -21,9 +21,9 @@ import "../../../button/index.js";
 import "../../../button/styles.js";
 import "@linaria/core";
 import "./Notification/styles.js";
-const v = () => C, S = /* @__PURE__ */ u(v())({
+const v = () => f, S = /* @__PURE__ */ u(v())({
   name: "OnboardingContainer",
-  class: "OnboardingContainer_o9squag",
+  class: "o9squag",
   propsAsIs: !0
 }), L = ({
   hiding: n,
@@ -105,7 +105,7 @@ const v = () => C, S = /* @__PURE__ */ u(v())({
   }) : /* @__PURE__ */ o(p, {
     hiding: a,
     children: /* @__PURE__ */ o("div", {
-      children: /* @__PURE__ */ o(f, {
+      children: /* @__PURE__ */ o(C, {
         close: e.close,
         action: () => i(!0),
         onboarding: t

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

@@ -2,11 +2,11 @@ import { styled as o } from "@linaria/react";
 import { ShowIn as t } from "../../show-in/index.js";
 import "react/jsx-runtime";
 import "@linaria/core";
-const r = () => t, c = /* @__PURE__ */ o(r())({
+const r = () => t, m = /* @__PURE__ */ o(r())({
   name: "Container",
-  class: "Container_ctckejh",
+  class: "ctckejh",
   propsAsIs: !0
 });
 export {
-  c as Container
+  m as Container
 };

package/lib/ui/app/masters.js

@@ -1,4 +1,5 @@
-import { jsxs as y, jsx as o } from "react/jsx-runtime";
+import { jsxs as v, jsx as t } from "react/jsx-runtime";
+import { useEffect as y } from "react";
 import { resetCss as a } from "../theme/theme.js";
 import { ActiveFeature as S } from "./Features/index.js";
 import { MastersNavigation as g } from "./Navigation/MastersNavigation/index.js";
@@ -8,9 +9,8 @@ import { useMastersApp as k } from "./useMastersApp.js";
 import { useSdkFeature as A } from "./useSdkFeature.js";
 import { ChannelsButtonId as C } from "../navigation/button/Channels.js";
 import { LeaderBoardButtonId as s } from "../navigation/button/LeaderBoard.js";
-import { FeaturedGroupsButtonId as d } from "../navigation/button/FeaturedGroups.js";
+import { FeaturedGroupsButtonId as x } from "../navigation/button/FeaturedGroups.js";
 import "../theme/constants.js";
-import "react";
 import "@streamlayer/sdk-web-types";
 import "./Features/FeatureProvider.js";
 import "@nanostores/react";
@@ -18,8 +18,8 @@ import "@streamlayer/sdk-web-interfaces";
 import "../navigation/masters.js";
 import "@linaria/react";
 import "../navigation/index.js";
-import "../../index_1ujx5m0-4ed993c7.js";
-import "../../masters_18kvgvj-4ed993c7.js";
+import "../../index_4nhkck-4ed993c7.js";
+import "../../masters_k70xsy-4ed993c7.js";
 import "@streamlayer/sdk-web-notifications";
 import "../gamification/question/notification/index.js";
 import "../gamification/constants.js";
@@ -57,44 +57,46 @@ import "./Notifications/Onboarding/Notification/index.js";
 import "./Notifications/Onboarding/Notification/styles.js";
 import "./Notifications/styles.js";
 import "../navigation/button/styles.js";
-import "../../LeaderBoard_p8tnz3-4ed993c7.js";
+import "../../LeaderBoard_16p26hz-4ed993c7.js";
 import "../navigation/button/index.js";
-const x = ({ sdk: i, className: m }) => {
-  const [, p] = A(i);
-  return /* @__PURE__ */ o(S, { className: m, feature: p, sdk: i });
-}, Lt = ({ sdk: i, overlays: m, children: p }) => {
-  const { sdkEnabled: t, sdkReady: l, activeOverlay: r, activateAndLoadOverlay: c, enableSdk: f, disableSdk: u, isLogged: e } = k(i);
-  return /* @__PURE__ */ y(b, { children: [
-    t && /* @__PURE__ */ o(
+const B = ({ sdk: r, className: i }) => {
+  const [, m] = A(r);
+  return /* @__PURE__ */ t(S, { className: i, feature: m, sdk: r });
+}, Mt = ({ sdk: r, overlays: i, children: m }) => {
+  const { sdkEnabled: p, sdkReady: e, activeOverlay: o, activateAndLoadOverlay: d, enableSdk: l, disableSdk: c, isLogged: f } = k(r);
+  return y(() => {
+    import("./Features/Gamification/gamification-feature.js");
+  }, []), /* @__PURE__ */ v(b, { children: [
+    p && /* @__PURE__ */ t(
       g,
       {
-        sdkReady: l,
-        activeOverlay: r,
+        sdkReady: e,
+        activeOverlay: o,
         className: a,
-        setActiveOverlay: (v) => c("", v)
+        setActiveOverlay: (u) => d("", u)
       }
     ),
-    t && /* @__PURE__ */ o(h, { sdk: i }),
-    /* @__PURE__ */ o(
+    e && /* @__PURE__ */ t(h, { sdk: r }),
+    /* @__PURE__ */ t(
       n,
       {
-        "data-nav": t.toString(),
-        style: { display: !t || r === C ? "block" : "none" },
-        children: p && p({ enableSdk: f, disableSdk: u })
+        "data-nav": p.toString(),
+        style: { display: !p || o === C ? "block" : "none" },
+        children: m && m({ enableSdk: l, disableSdk: c })
       }
     ),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ t(
       n,
       {
-        "data-nav": t.toString(),
-        style: { display: r === s ? "block" : "none" },
-        children: m && r === s && m[r]
+        "data-nav": p.toString(),
+        style: { display: o === s ? "block" : "none" },
+        children: i && o === s && i[o]
       }
     ),
-    e && t && r === d && /* @__PURE__ */ o(x, { className: a, sdk: i }),
-    !e && t && r === d && /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "You are not logged in." })
+    e && o === x && /* @__PURE__ */ t(B, { className: a, sdk: r }),
+    !f && /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "You are not logged in." })
   ] });
 };
 export {
-  Lt as MastersApp
+  Mt as MastersApp
 };

package/lib/ui/app/styles.js

@@ -1,24 +1,24 @@
-import { styled as n } from "@linaria/react";
-const e = /* @__PURE__ */ n("div")({
+import { styled as s } from "@linaria/react";
+const e = /* @__PURE__ */ s("div")({
   name: "SDKContainer",
-  class: "SDKContainer_stu11h7",
+  class: "stu11h7",
   propsAsIs: !1
-}), r = /* @__PURE__ */ n("div")({
+}), r = /* @__PURE__ */ s("div")({
   name: "SDKScrollContainer",
-  class: "SDKScrollContainer_s1ucohr1",
+  class: "s1ucohr1",
   propsAsIs: !1
-}), s = /* @__PURE__ */ n("div")({
+}), n = /* @__PURE__ */ s("div")({
   name: "SDKContentContainer",
-  class: "SDKContentContainer_s1el4wvm",
+  class: "s1el4wvm",
   propsAsIs: !1
-}), o = () => s, a = /* @__PURE__ */ n(o())({
+}), o = () => n, a = /* @__PURE__ */ s(o())({
   name: "SDKWhiteContainer",
-  class: "SDKWhiteContainer_s1oe3036",
+  class: "s1oe3036",
   propsAsIs: !0
 });
 export {
   e as SDKContainer,
-  s as SDKContentContainer,
+  n as SDKContentContainer,
   r as SDKScrollContainer,
   a as SDKWhiteContainer
 };

package/lib/ui/app/useMastersApp.js

@@ -1,48 +1,64 @@
-import { useStore as u } from "@nanostores/react";
-import { useState as l, useCallback as b, useEffect as A } from "react";
-import { FeatureType as v } from "@streamlayer/sdk-web-types";
+import { useStore as m } from "@nanostores/react";
+import { useRef as y, useState as d, useCallback as F, useEffect as A } from "react";
+import { FeatureType as z } from "@streamlayer/sdk-web-types";
 import "react/jsx-runtime";
-import { ChannelsButtonId as m } from "../navigation/button/Channels.js";
-import { FeaturedGroupsButtonId as o } from "../navigation/button/FeaturedGroups.js";
+import { ChannelsButtonId as c } from "../navigation/button/Channels.js";
+import { FeaturedGroupsButtonId as r } from "../navigation/button/FeaturedGroups.js";
 import "@linaria/react";
 import "../icons/index.js";
 import "../navigation/button/styles.js";
-import "../../LeaderBoard_p8tnz3-4ed993c7.js";
-import "../../index_1ujx5m0-4ed993c7.js";
-import "../../masters_18kvgvj-4ed993c7.js";
+import "../../LeaderBoard_16p26hz-4ed993c7.js";
+import "../../index_4nhkck-4ed993c7.js";
+import "../../masters_k70xsy-4ed993c7.js";
 import "../navigation/button/index.js";
-const T = (e) => {
-  const [c, n] = l(!1), d = u(e.status), { data: f } = u(e.getUserStore()), a = d === "ready", [i, p] = l(o), s = b(
-    (t, r) => {
-      p(r), r === o ? (t && e.createEventSession(t), e.openFeature(v.GAMES)) : e.closeFeature();
+const q = (e) => {
+  const s = y(""), [l, f] = d(!1), S = m(e.status), i = m(e.userId()), o = S === "ready", [n, u] = d(r), p = F(
+    (t, a) => {
+      u(a), a === r ? (t && e.createEventSession(t), e.openFeature(z.GAMES)) : e.closeFeature();
     },
     [e]
   );
+  A(() => {
+    !o && n === r && (u(c), e.closeFeature());
+  }, [o, n, e]);
+  const b = (t) => {
+    s.current = t, e.initializeApp().then(({ enabled: a, err: E }) => {
+      if (f(!0), E) {
+        p(t, c);
+        return;
+      }
+      if (a) {
+        e.isUserAuthorized().then((h) => {
+          if (h) {
+            p(t, r);
+            return;
+          } else
+            e.disableApp();
+        });
+        return;
+      }
+    });
+  }, v = () => {
+    f(!1), e.disableApp();
+  };
   return A(() => {
-    !a && i === o && (p(m), e.closeFeature());
-  }, [a, i, e]), {
-    sdkEnabled: c,
-    sdkReady: a,
-    activeOverlay: i,
-    activateAndLoadOverlay: s,
-    enableSdk: (t) => {
-      e.initializeApp().then(({ enabled: r, err: S }) => {
-        if (n(!0), S) {
-          s(t, m);
-          return;
-        }
-        if (r) {
-          s(t, o);
-          return;
-        }
-      });
-    },
-    disableSdk: () => {
-      n(!1), e.disableApp();
-    },
-    isLogged: !!f
+    if (!i) {
+      o && n === r && (u(c), e.disableApp());
+      return;
+    }
+    i && s.current && l && e.initializeApp().then(() => {
+      e.createEventSession(s.current);
+    });
+  }, [i]), {
+    sdkEnabled: l,
+    sdkReady: o,
+    activeOverlay: n,
+    activateAndLoadOverlay: p,
+    enableSdk: b,
+    disableSdk: v,
+    isLogged: !!i
   };
 };
 export {
-  T as useMastersApp
+  q as useMastersApp
 };

package/lib/ui/button/styles.js

@@ -1,11 +1,11 @@
 import { styled as s } from "@linaria/react";
 const o = /* @__PURE__ */ s("button")({
   name: "SButton",
-  class: "SButton_s1nve60q",
+  class: "s1nve60q",
   propsAsIs: !1
 }), n = /* @__PURE__ */ s("span")({
   name: "ButtonLabel",
-  class: "ButtonLabel_b1xoswwx",
+  class: "b1xoswwx",
   propsAsIs: !1
 });
 export {

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

@@ -4,34 +4,34 @@ import "react/jsx-runtime";
 import "react";
 const l = /* @__PURE__ */ s("div")({
   name: "Container",
-  class: "Container_c1vwopgc",
+  class: "c1vwopgc",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("div")({
+}), r = /* @__PURE__ */ s("div")({
   name: "QuestionTypeWrap",
-  class: "QuestionTypeWrap_qyktpt0",
+  class: "qyktpt0",
   propsAsIs: !1
-}), e = () => o, r = /* @__PURE__ */ s(e())({
+}), e = () => o, i = /* @__PURE__ */ s(e())({
   name: "QuestionTypeIcon",
-  class: "QuestionTypeIcon_q951jdx",
+  class: "q951jdx",
   propsAsIs: !0
 }), u = /* @__PURE__ */ s("span")({
   name: "QuestionTypeTitle",
-  class: "QuestionTypeTitle_qss5f0e",
+  class: "qss5f0e",
   propsAsIs: !1
-}), y = /* @__PURE__ */ s("button")({
+}), m = /* @__PURE__ */ s("button")({
   name: "CloseButton",
-  class: "CloseButton_c1ao1jtv",
+  class: "c1ao1jtv",
   propsAsIs: !1
 }), t = () => o, I = /* @__PURE__ */ s(t())({
   name: "CloseIcon",
-  class: "CloseIcon_cvsl7l3",
+  class: "cvsl7l3",
   propsAsIs: !0
 });
 export {
-  y as CloseButton,
+  m as CloseButton,
   I as CloseIcon,
   l as Container,
-  r as QuestionTypeIcon,
+  i as QuestionTypeIcon,
   u as QuestionTypeTitle,
-  i as QuestionTypeWrap
+  r as QuestionTypeWrap
 };

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

@@ -1,16 +1,16 @@
 import { jsx as s } from "react/jsx-runtime";
-import { styled as r } from "@linaria/react";
-const p = /* @__PURE__ */ r("div")({
+import { styled as p } from "@linaria/react";
+const r = /* @__PURE__ */ p("div")({
   name: "SponsorLogoWrap",
-  class: "SponsorLogoWrap_s8p5v5z",
+  class: "s8p5v5z",
   propsAsIs: !1
-}), n = /* @__PURE__ */ r("img")({
+}), n = /* @__PURE__ */ p("img")({
   name: "SponsorLogo",
-  class: "SponsorLogo_s755yti",
+  class: "s755yti",
   propsAsIs: !1
 }), c = ({
   sponsorLogo: o
-}) => o && /* @__PURE__ */ s(p, {
+}) => o && /* @__PURE__ */ s(r, {
   children: /* @__PURE__ */ s(n, {
     alt: "sponsor-logo",
     src: o

package/lib/ui/gamification/insight/styles.js

@@ -1,44 +1,44 @@
 import { styled as s } from "@linaria/react";
-const t = /* @__PURE__ */ s("div")({
+const e = /* @__PURE__ */ s("div")({
   name: "Container",
-  class: "Container_cygkmjj",
+  class: "cygkmjj",
   propsAsIs: !1
-}), e = /* @__PURE__ */ s("div")({
+}), o = /* @__PURE__ */ s("div")({
   name: "Content",
-  class: "Content_c71yvf9",
+  class: "c71yvf9",
   propsAsIs: !1
-}), o = /* @__PURE__ */ s("div")({
+}), t = /* @__PURE__ */ s("div")({
   name: "Graphic",
-  class: "Graphic_gao3b2f",
+  class: "gao3b2f",
   propsAsIs: !1
-}), c = /* @__PURE__ */ s("img")({
+}), a = /* @__PURE__ */ s("img")({
   name: "InsightIconDefault",
-  class: "InsightIconDefault_i1k4eec3",
+  class: "i1k4eec3",
   propsAsIs: !1
-}), a = /* @__PURE__ */ s("img")({
+}), c = /* @__PURE__ */ s("img")({
   name: "InsightIconCircle",
-  class: "InsightIconCircle_i1uhyahn",
+  class: "i1uhyahn",
   propsAsIs: !1
 }), i = /* @__PURE__ */ s("img")({
   name: "InsightIconAbsolute",
-  class: "InsightIconAbsolute_i2ernmy",
+  class: "i2ernmy",
   propsAsIs: !1
 }), l = /* @__PURE__ */ s("div")({
   name: "Title",
-  class: "Title_t12j99pr",
+  class: "t12j99pr",
   propsAsIs: !1
-}), I = /* @__PURE__ */ s("img")({
+}), p = /* @__PURE__ */ s("img")({
   name: "NextIcon",
-  class: "NextIcon_n1uwonpi",
+  class: "n1uwonpi",
   propsAsIs: !1
 });
 export {
-  t as Container,
-  e as Content,
-  o as Graphic,
+  e as Container,
+  o as Content,
+  t as Graphic,
   i as InsightIconAbsolute,
-  a as InsightIconCircle,
-  c as InsightIconDefault,
-  I as NextIcon,
+  c as InsightIconCircle,
+  a as InsightIconDefault,
+  p as NextIcon,
   l as Title
 };

package/lib/ui/gamification/insight-list/styles.js

@@ -1,14 +1,14 @@
 import { styled as s } from "@linaria/react";
-const t = /* @__PURE__ */ s("div")({
+const e = /* @__PURE__ */ s("div")({
   name: "Container",
-  class: "Container_cddmj9e",
+  class: "cddmj9e",
   propsAsIs: !1
 }), n = /* @__PURE__ */ s("div")({
   name: "ItemsContainer",
-  class: "ItemsContainer_i16t83sg",
+  class: "i16t83sg",
   propsAsIs: !1
 });
 export {
-  t as Container,
+  e as Container,
   n as ItemsContainer
 };

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

@@ -1,34 +1,34 @@
 import { styled as s } from "@linaria/react";
 const o = /* @__PURE__ */ s("div")({
   name: "Container",
-  class: "Container_c1ux29ft",
+  class: "c1ux29ft",
   propsAsIs: !1
 }), e = /* @__PURE__ */ s("img")({
   name: "FriendsIcon",
-  class: "FriendsIcon_f10ncfg2",
+  class: "f10ncfg2",
   propsAsIs: !1
 }), t = /* @__PURE__ */ s("div")({
   name: "Content",
-  class: "Content_c1yc07bd",
+  class: "c1yc07bd",
   propsAsIs: !1
 }), c = /* @__PURE__ */ s("div")({
   name: "Title",
-  class: "Title_tj6cq7w",
+  class: "tj6cq7w",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("div")({
+}), a = /* @__PURE__ */ s("div")({
   name: "Description",
-  class: "Description_d1ag78xo",
+  class: "d1ag78xo",
   propsAsIs: !1
 }), i = /* @__PURE__ */ s("img")({
   name: "ArrowInviteIcon",
-  class: "ArrowInviteIcon_awohrz6",
+  class: "awohrz6",
   propsAsIs: !1
 });
 export {
   i as ArrowInviteIcon,
   o as Container,
   t as Content,
-  r as Description,
+  a as Description,
   e as FriendsIcon,
   c as Title
 };

package/lib/ui/gamification/leaderboard/list-item/styles.js

@@ -4,44 +4,44 @@ import "react/jsx-runtime";
 import "react";
 const c = /* @__PURE__ */ s("div")({
   name: "Container",
-  class: "Container_culdu4a",
+  class: "culdu4a",
   propsAsIs: !1
-}), l = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("div")({
   name: "Position",
-  class: "Position_pwf8e69",
+  class: "pwf8e69",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("img")({
+}), l = /* @__PURE__ */ s("img")({
   name: "Avatar",
-  class: "Avatar_atf4yh4",
+  class: "atf4yh4",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("div")({
+}), m = /* @__PURE__ */ s("div")({
   name: "AvatarPlaceholder",
-  class: "AvatarPlaceholder_a1dg29ja",
+  class: "a1dg29ja",
   propsAsIs: !1
-}), m = /* @__PURE__ */ s("div")({
+}), i = /* @__PURE__ */ s("div")({
   name: "Content",
-  class: "Content_c10a68rc",
+  class: "c10a68rc",
   propsAsIs: !1
 }), d = /* @__PURE__ */ s("div")({
   name: "NameContainer",
-  class: "NameContainer_nc4kck5",
+  class: "nc4kck5",
   propsAsIs: !1
 }), A = /* @__PURE__ */ s("span")({
   name: "Name",
-  class: "Name_njsrqgr",
+  class: "njsrqgr",
   propsAsIs: !1
-}), e = () => a, v = /* @__PURE__ */ s(e())({
+}), e = () => a, f = /* @__PURE__ */ s(e())({
   name: "CurrentUserBadge",
-  class: "CurrentUserBadge_c17uc4zr",
+  class: "c17uc4zr",
   propsAsIs: !0
 });
 export {
-  p as Avatar,
-  i as AvatarPlaceholder,
+  l as Avatar,
+  m as AvatarPlaceholder,
   c as Container,
-  m as Content,
-  v as CurrentUserBadge,
+  i as Content,
+  f as CurrentUserBadge,
   A as Name,
   d as NameContainer,
-  l as Position
+  p as Position
 };