@streamlayer/react 1.0.0 → 1.1.0

package/lib/es/app.js

@@ -1,12 +1,12 @@
-var he = Object.defineProperty;
-var ve = (e, s, n) => s in e ? he(e, s, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[s] = n;
-var g = (e, s, n) => (ve(e, typeof s != "symbol" ? s + "" : s, n), n);
-import { jsx as t, jsxs as y, Fragment as D } from "react/jsx-runtime";
-import { a3 as V, u, F as ge, s as h, T as ie, c as me, x as ye, a as ke, N as fe, k as Ne, M as be, b as Se, e as Ie, g as $e, f as Ce, O as re, m as q, h as Ee, C as we, i as Ae, n as ae, j as Le, l as De, o as Te, q as U, t as xe, v as le, w as F, I as Oe, y as Re, r as Ve, A as qe, B as Pe, D as Qe, E as _e, G as Ue, H as O, J as B, $ as Fe, P as Ke, K as Me, L as ze, R as Be, U as We, V as P, Z as je, _ as Ge, p as W, a0 as He, W as Xe, X as Ye, Y as Ze, a4 as Je, a1 as de, a2 as j } from "./index2.js";
-import { createContext as es, useContext as K, useRef as L, useState as $, useEffect as k, useTransition as ss, lazy as ns, useMemo as w, Suspense as ts, useLayoutEffect as os, useCallback as G } from "react";
-import { C as E, c as H, Q as R, S as x } from "./useStreamLayerApp2.js";
+var ge = Object.defineProperty;
+var me = (e, s, n) => s in e ? ge(e, s, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[s] = n;
+var g = (e, s, n) => me(e, typeof s != "symbol" ? s + "" : s, n);
+import { jsx as t, jsxs as m, Fragment as L } from "react/jsx-runtime";
+import { a3 as V, u, F as fe, s as h, T as re, i as ke, x as ye, a as Ne, N as be, k as Se, M as Ie, b as Ee, e as we, C as Ae, f as Ce, O as ae, m as P, l as $e, g as Le, h as De, n as le, j as Te, o as xe, q as Oe, r as M, t as Re, v as de, w as U, y as Ve, z as Pe, I as Q, c as ce, B as Qe, D as _e, E as qe, G as Fe, H as x, J as G, K as Ke, L as Me, P as Ue, Q as ze, U as Be, V as We, W as _, _ as Ge, p as q, $ as He, a0 as je, X as Xe, Y as Ye, Z as Ze, a4 as Je, a1 as pe, a2 as H } from "./index2.js";
+import { createContext as es, useContext as z, useRef as $, useState as E, useEffect as k, useTransition as ss, lazy as ns, useMemo as C, Suspense as ts, forwardRef as os, useLayoutEffect as is, useCallback as R } from "react";
+import { C as A, c as j, Q as O, S as D } from "./useStreamLayerApp2.js";
 window.dispatchEvent(new CustomEvent("grpc_devtools_loaded"));
-function is(e) {
+function rs(e) {
   return e instanceof DOMException && // everything except Firefox
   (e.code === 22 || // Firefox
   e.code === 1014 || // test name field too, because code might not be present
@@ -14,7 +14,7 @@ function is(e) {
   e.name === "QuotaExceededError" || // Firefox
   e.name === "NS_ERROR_DOM_QUOTA_REACHED");
 }
-class rs {
+class as {
   constructor(s = "main", n = window.localStorage) {
     g(this, "delimiter", ":");
     g(this, "prefix");
@@ -28,8 +28,8 @@ class rs {
       const n = s.pop() || "", o = this.generateKey(s);
       try {
         this.storage.setItem(o, n);
-      } catch (r) {
-        is(r) && this.storage === window.sessionStorage && (window.sessionStorage.removeItem("slstreamlogs"), this.storage.setItem(o, n));
+      } catch (i) {
+        rs(i) && this.storage === window.sessionStorage && (window.sessionStorage.removeItem("slstreamlogs"), this.storage.setItem(o, n));
       }
     });
     g(this, "read", (...s) => {
@@ -46,14 +46,14 @@ var X;
 (function(e) {
   e.Init = "init", e.Ready = "ready", e.Connecting = "connecting", e.Connected = "connected", e.Disconnected = "disconnected", e.Failed = "failed", e.Reconnect = "reconnect", e.Reconnecting = "reconnecting";
 })(X || (X = {}));
-E.Unknown, E.Internal, E.DeadlineExceeded, E.ResourceExhausted, E.FailedPrecondition, E.Unavailable, E.DataLoss;
+A.Unknown, A.Internal, A.DeadlineExceeded, A.ResourceExhausted, A.FailedPrecondition, A.Unavailable, A.DataLoss;
 V("grpc:retry");
-H(10, { description: "Number of attempts to retry" }), H(3e4, { description: "Max delay between retries in milliseconds" });
+j(10, { description: "Number of attempts to retry" }), j(3e4, { description: "Max delay between retries in milliseconds" });
 var I;
 (function(e) {
   e.SCHEMA = "schema", e.EXTERNAL_TOKEN = "eToken", e.TOKEN = "token";
 })(I || (I = {}));
-class as extends rs {
+class ls extends as {
   constructor() {
     super("user");
     // Schema
@@ -82,391 +82,415 @@ var Y;
 })(Y || (Y = {}));
 V("deep_link");
 V("bypass");
-new as();
+new ls();
 V("video_player");
 var Z;
 (function(e) {
-  e.ALLOWED = "allowed", e.DISALLOWED = "disallowed";
+  e.SHOWED = "showed";
 })(Z || (Z = {}));
 var J;
 (function(e) {
-  e.UNKNOWN = "unknown", e.ALREADY_VOTED = "already_voted";
+  e.ALLOWED = "allowed", e.DISALLOWED = "disallowed";
 })(J || (J = {}));
 var ee;
 (function(e) {
-  e.ONBOARDING = "onboarding", e.ONBOARDING_IO = "onboarding_io";
+  e.UNKNOWN = "unknown", e.ALREADY_VOTED = "already_voted";
 })(ee || (ee = {}));
 var se;
 (function(e) {
-  e.Unset = "unset", e.Required = "required", e.Optional = "optional", e.Completed = "completed", e.Disabled = "disabled", e.Unavailable = "unavailable";
+  e.ONBOARDING = "onboarding", e.ONBOARDING_IO = "onboarding_io";
 })(se || (se = {}));
-R.POLL, R.PREDICTION, R.TRIVIA;
-const ls = {
-  [x.GAMES]: !0
-}, Q = /* @__PURE__ */ h("div")({
+var ne;
+(function(e) {
+  e.Unset = "unset", e.Required = "required", e.Optional = "optional", e.Completed = "completed", e.Disabled = "disabled", e.Unavailable = "unavailable";
+})(ne || (ne = {}));
+O.POLL, O.PREDICTION, O.TRIVIA;
+const ds = {
+  [D.GAMES]: !0
+}, F = /* @__PURE__ */ h("div")({
   name: "LoadingContainer",
-  class: "l1a1b29x",
+  class: "lclc0ej",
   propsAsIs: !1
-}), ds = ({
+}), cs = ({
   feature: e,
   sdk: s,
   children: n,
   className: o,
-  noWait: r
+  noWait: i
 }) => {
-  const a = u(e.status), i = u(s.sdkStore.slStreamId);
-  if (!r) {
-    if (i != null && i.loading && !i.data)
-      return /* @__PURE__ */ t(Q, {
+  const a = u(e.status), l = u(s.sdkStore.slStreamId);
+  if (!i) {
+    if (l != null && l.loading && !l.data)
+      return /* @__PURE__ */ t(F, {
         className: o,
         children: "Event is loading..."
       });
-    if (!(i != null && i.data))
-      return /* @__PURE__ */ t(Q, {
+    if (!(l != null && l.data))
+      return /* @__PURE__ */ t(F, {
         className: o,
         children: "Event is forbidden..."
       });
-    if (a !== ge.Ready)
-      return /* @__PURE__ */ t(Q, {
+    if (a !== fe.Ready)
+      return /* @__PURE__ */ t(F, {
         className: o,
         children: "Wait feature..."
       });
   }
   return n;
-}, ce = es({
+}, ue = es({
   sdk: null
-}), M = () => K(ce), cs = /* @__PURE__ */ h("div")({
+}), B = () => z(ue), ps = /* @__PURE__ */ h("div")({
   name: "QuestionContainer",
-  class: "qfnqmpg",
+  class: "q14ckf9e",
   propsAsIs: !1
-}), ps = ({
+}), us = ({
   openedQuestion: e
 }) => {
   var s, n;
   const {
     sdk: o
-  } = M();
+  } = B();
   return ((s = e == null ? void 0 : e.attributes) == null ? void 0 : s.attributes.case) === "insight" ? /* @__PURE__ */ t(ye, {
     ...e.attributes.attributes.value,
     controlVideo: o == null ? void 0 : o.controlVideoPlayer
-  }) : ((n = e == null ? void 0 : e.attributes) == null ? void 0 : n.attributes.case) === "tweet" ? /* @__PURE__ */ t(ke, {
+  }) : ((n = e == null ? void 0 : e.attributes) == null ? void 0 : n.attributes.case) === "tweet" ? /* @__PURE__ */ t(Ne, {
     ...e.attributes.attributes.value,
     controlVideo: o == null ? void 0 : o.controlVideoPlayer
   }) : null;
-}, us = ({
+}, hs = ({
   extendedQuestion: e,
   vote: s,
   close: n
 }) => {
   const {
     loading: o,
-    data: r
+    data: i
   } = e;
-  return r ? /* @__PURE__ */ t(fe, {
+  return i ? /* @__PURE__ */ t(be, {
     vote: s,
     close: n,
-    openedQuestion: r,
+    openedQuestion: i,
     isLoading: !!o
-  }) : /* @__PURE__ */ t(Ne, {});
-}, hs = ({
+  }) : /* @__PURE__ */ t(Se, {});
+}, vs = ({
   gamification: e
 }) => {
-  var s;
-  const n = u(e.openedQuestion.$store), o = u(e.openedQuestion.$extendedStore);
-  if (!n)
+  var s, n, o;
+  const i = u(e.openedQuestion.$store), a = u(e.openedQuestion.$extendedStore);
+  if (!i)
     return null;
-  const r = n.type;
-  return /* @__PURE__ */ y(cs, {
-    children: [/* @__PURE__ */ t(ie, {
+  const l = i.type;
+  return /* @__PURE__ */ m(ps, {
+    children: [/* @__PURE__ */ t(re, {
       close: e.closeQuestion,
-      type: ((s = n.attributes) == null ? void 0 : s.type) || R.UNSET
-    }), r === "question" && /* @__PURE__ */ t(us, {
+      type: ((s = i.attributes) == null ? void 0 : s.type) || O.UNSET
+    }), l === "question" && /* @__PURE__ */ t(hs, {
       vote: e.submitAnswer,
       close: e.closeQuestion,
-      extendedQuestion: o
-    }), r !== "question" && /* @__PURE__ */ t(ps, {
-      openedQuestion: n
-    }), /* @__PURE__ */ t(me, {
-      sponsorLogo: ""
+      extendedQuestion: a
+    }), l !== "question" && /* @__PURE__ */ t(us, {
+      openedQuestion: i
+    }), /* @__PURE__ */ t(ke, {
+      sponsorLogo: (o = (n = a.data) == null ? void 0 : n.sponsorship) == null ? void 0 : o.logo
     })]
   });
-}, vs = /* @__PURE__ */ h("div")({
+}, gs = /* @__PURE__ */ h("div")({
   name: "InviteFriendsContainer",
-  class: "i1d1hf8u",
+  class: "i1c9dygq",
   propsAsIs: !1
-}), gs = ({
+}), ms = ({
   deepLink: e
-}) => /* @__PURE__ */ t(vs, {
-  children: /* @__PURE__ */ t(be, {
+}) => /* @__PURE__ */ t(gs, {
+  children: /* @__PURE__ */ t(Ie, {
     inviteLink: e,
     inviteCardTitle: "It’s More Fun With Friends",
     inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
   })
-}), ms = /* @__PURE__ */ h("div")({
+}), fs = /* @__PURE__ */ h("div")({
   name: "InviteLinkContainer",
-  class: "i9tvant",
+  class: "i1odbhm4",
   propsAsIs: !1
-}), ys = ({
+}), ks = ({
   gamification: e,
   scrollNode: s,
   scrollStore: n
 }) => {
-  const o = L(null), {
-    data: r,
+  const o = $(null), {
+    data: i,
     hasMore: a,
-    loading: i,
-    key: l
+    loading: l,
+    key: d
   } = u(e.leaderboardList.$store), {
-    data: c
-  } = u(e.deepLink.$store), [d, p] = Se(o);
-  return !r.length && !i ? /* @__PURE__ */ t(gs, {
-    deepLink: c
-  }) : /* @__PURE__ */ y(D, {
-    children: [/* @__PURE__ */ t(Ie, {
-      items: r,
+    data: r
+  } = u(e.deepLink.$store), [p, c] = Ee(o);
+  return !i.length && !l ? /* @__PURE__ */ t(ms, {
+    deepLink: r
+  }) : /* @__PURE__ */ m(L, {
+    children: [/* @__PURE__ */ t(we, {
+      items: i,
       scrollNode: s,
       scrollStore: n,
       fetchMore: e.leaderboardList.fetchMore,
       hasMore: a,
       openItemDetail: e.openUser,
       currentUserId: e.currentUserId.get()
-    }, l), c && /* @__PURE__ */ t(ms, {
+    }, d), r && /* @__PURE__ */ t(fs, {
       ref: o,
-      children: /* @__PURE__ */ t($e, {
-        onClick: () => d(c),
+      children: /* @__PURE__ */ t(Ae, {
+        onClick: () => p(r),
         title: "Invite Friends",
         description: "Challenge them now!"
       })
-    }), p]
+    }), c]
   });
-}, ks = ({ store: e, openQuestion: s }) => {
-  const { sdk: n } = M(), o = u(e);
+}, ys = ({ store: e, openQuestion: s }) => {
+  const { sdk: n } = B(), o = u(e);
   return /* @__PURE__ */ t(Ce, { openQuestion: s, questions: o.data, controlVideo: n == null ? void 0 : n.controlVideoPlayer });
-}, fs = ({ userSummary: e }) => {
+}, Ns = ({ userSummary: e }) => {
   var s;
-  const [n, o] = $(void 0);
+  const [n, o] = E(void 0);
   return k(() => {
-    const r = e.$store.subscribe((a) => {
+    const i = e.$store.subscribe((a) => {
       a && o(a);
     });
     return () => {
-      r();
+      i();
     };
-  }, [e]), /* @__PURE__ */ t(re, { loading: !(n != null && n.summary), ...n == null ? void 0 : n.summary, successRate: (s = n == null ? void 0 : n.percentage) == null ? void 0 : s.correct });
-}, Ns = ({ gamification: e, className: s, scrollStore: n, scrollNode: o, appNode: r, style: a, responsiveStore: i }) => {
-  const { tabsShown: l } = u(n, { keys: ["tabsShown"] }), [c, d] = $(q.HOME), [, p] = ss(), { sdkInDesktopView: v, screen: m } = u(i, { keys: ["sdkInDesktopView"] }), f = (b) => {
-    p(() => {
-      var A;
-      d(b), v === !1 && (((A = r.current) == null ? void 0 : A.getBoundingClientRect().y) || 0) < 0 && U(r, m.size, { behavior: "instant" });
+  }, [e]), /* @__PURE__ */ t(ae, { loading: !(n != null && n.summary), ...n == null ? void 0 : n.summary, successRate: (s = n == null ? void 0 : n.percentage) == null ? void 0 : s.correct });
+}, bs = ({ gamification: e, className: s, scrollStore: n, scrollNode: o, appNode: i, style: a, responsiveStore: l }) => {
+  const { tabsShown: d } = u(n, { keys: ["tabsShown"] }), [r, p] = E(P.HOME), [, c] = ss(), { sdkInDesktopView: v, screen: f } = u(l, { keys: ["sdkInDesktopView"] }), N = (S) => {
+    c(() => {
+      var y;
+      p(S), v === !1 && (((y = i.current) == null ? void 0 : y.getBoundingClientRect().y) || 0) < 0 && M(i, f.size, { behavior: "instant" });
     });
   };
-  k(() => n.subscribe((b) => {
-    if (b.scrollPosition === 0) {
+  k(() => n.subscribe((S) => {
+    if (S.scrollPosition === 0) {
       n.setKey("tabsShown", !0);
       return;
     }
-    i.get().sdkInDesktopView ? n.setKey("tabsShown", b.scrollDirection === "backward") : n.setKey("tabsShown", b.scrollDirection === "forward");
-  }), [n, i]);
-  let N = "0px";
-  return v ? N = l ? "0px" : "calc(8px - var(--header-height) - var(--header-offset))" : N = l ? "calc(var(--header-height) + var(--header-offset) - 2px)" : "0px", /* @__PURE__ */ y(Ee, { className: s, style: a, children: [
+    l.get().sdkInDesktopView ? n.setKey("tabsShown", S.scrollDirection === "backward") : n.setKey("tabsShown", S.scrollDirection === "forward");
+  }), [n, l]);
+  let b = "0px";
+  return v ? b = d ? "0px" : "calc(8px - var(--header-height) - var(--header-offset))" : b = d ? "calc(var(--header-height) + var(--header-offset) - 2px)" : "0px", /* @__PURE__ */ m($e, { className: s, style: a, children: [
     /* @__PURE__ */ t(
-      we,
+      Le,
       {
         style: {
-          top: N
+          top: b
         },
-        children: /* @__PURE__ */ t(Ae, { activePage: c, toggleActivePage: f })
+        children: /* @__PURE__ */ t(De, { activePage: r, toggleActivePage: N })
       }
     ),
-    c === q.HOME && /* @__PURE__ */ y(D, { children: [
-      /* @__PURE__ */ t(ae, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ t(Le, { children: /* @__PURE__ */ t(fs, { userSummary: e.userSummary }) }) }),
-      /* @__PURE__ */ t(De, { style: { flex: 1 }, children: /* @__PURE__ */ t(ks, { openQuestion: e.openQuestion, store: e.feedList.getStore() }) })
+    r === P.HOME && /* @__PURE__ */ m(L, { children: [
+      /* @__PURE__ */ t(le, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ t(Te, { children: /* @__PURE__ */ t(Ns, { userSummary: e.userSummary }) }) }),
+      /* @__PURE__ */ t(xe, { style: { flex: 1 }, children: /* @__PURE__ */ t(ys, { openQuestion: e.openQuestion, store: e.feedList.getStore() }) })
     ] }),
-    c === q.LEADERBOARD && /* @__PURE__ */ t(Te, { children: /* @__PURE__ */ t(ys, { scrollStore: n, scrollNode: o, gamification: e }) })
+    r === P.LEADERBOARD && /* @__PURE__ */ t(Oe, { children: /* @__PURE__ */ t(ks, { scrollStore: n, scrollNode: o, gamification: e }) })
   ] });
-}, bs = () => F, ne = /* @__PURE__ */ h(bs())({
+}, Ss = () => U, te = /* @__PURE__ */ h(Ss())({
   name: "OpenedContainer",
-  class: "o1o2cpiy",
+  class: "ouvguos",
   propsAsIs: !0
-}), Ss = /* @__PURE__ */ h("div")({
+}), Is = /* @__PURE__ */ h("div")({
   name: "UserContainer",
-  class: "u1ob6f8q",
+  class: "u1eu4lbg",
   propsAsIs: !1
-}), Is = ({
+}), Es = ({
   correct: e,
   incorrect: s
 }) => {
   const n = e + s;
   return n === 0 ? 0 : Math.round(e / n * 100);
-}, gn = ({
+}, mn = ({
   gamification: e,
   scrollStore: s,
   className: n,
   appNode: o,
-  scrollNode: r,
+  scrollNode: i,
   responsiveStore: a
-}) => /* @__PURE__ */ t(Ns, {
+}) => /* @__PURE__ */ t(bs, {
   appNode: o,
   scrollStore: s,
-  scrollNode: r,
+  scrollNode: i,
   className: n,
   gamification: e,
   responsiveStore: a
-}), $s = ({
+}), ws = ({
   gamification: e,
   className: s,
   appNode: n,
   responsiveStore: o
 }) => {
-  const r = u(e.openedQuestion.$store), a = u(e.openedUser), {
-    sdkInDesktopView: i
+  const i = u(e.openedQuestion.$store), a = u(e.openedUser), {
+    sdkInDesktopView: l
   } = u(o, {
     keys: ["sdkInDesktopView"]
   }), {
-    hiding: l,
-    onAnimationEnd: c
-  } = xe();
-  if (!n.current || !r && !a)
+    hiding: d,
+    onAnimationEnd: r
+  } = Re();
+  if (!n.current || !i && !a)
     return null;
-  const d = r ? /* @__PURE__ */ t(ne, {
+  const p = i ? /* @__PURE__ */ t(te, {
     className: s,
-    hiding: l,
-    onAnimationEnd: c,
-    children: /* @__PURE__ */ t(hs, {
+    hiding: d,
+    onAnimationEnd: r,
+    children: /* @__PURE__ */ t(vs, {
       gamification: e
     })
-  }) : a ? /* @__PURE__ */ t(ne, {
+  }) : a ? /* @__PURE__ */ t(te, {
     className: s,
-    hiding: l,
-    onAnimationEnd: c,
-    children: /* @__PURE__ */ y(Ss, {
-      children: [/* @__PURE__ */ t(ie, {
+    hiding: d,
+    onAnimationEnd: r,
+    children: /* @__PURE__ */ m(Is, {
+      children: [/* @__PURE__ */ t(re, {
         label: "Friend's Rank",
         close: e.closeUser
-      }), /* @__PURE__ */ t(ae, {
-        children: /* @__PURE__ */ t(re, {
+      }), /* @__PURE__ */ t(le, {
+        children: /* @__PURE__ */ t(ae, {
           ...a,
-          successRate: Is(a)
+          successRate: Es(a)
         })
       })]
     })
   }) : null;
-  return /* @__PURE__ */ t(le, {
+  return /* @__PURE__ */ t(de, {
     container: n,
-    useContainer: !i,
-    children: d
+    useContainer: !l,
+    children: p
   });
-}, Cs = ns(() => import("./gamification-feature.js")), Es = ({ sdk: e, feature: s, className: n, scrollStore: o, appNode: r, scrollNode: a, responsiveStore: i }) => {
-  const l = w(() => s && s.featureConfig.get().type === x.GAMES ? /* @__PURE__ */ t(ds, { className: n, sdk: e, feature: s, children: /* @__PURE__ */ t(
-    Cs,
+}, As = ns(() => import("./gamification-feature.js")), Cs = ({ sdk: e, feature: s, className: n, scrollStore: o, appNode: i, scrollNode: a, responsiveStore: l }) => {
+  const d = C(() => s && s.featureConfig.get().type === D.GAMES ? /* @__PURE__ */ t(cs, { className: n, sdk: e, feature: s, children: /* @__PURE__ */ t(
+    As,
     {
-      appNode: r,
+      appNode: i,
       scrollStore: o,
       scrollNode: a,
       className: n,
-      responsiveStore: i,
+      responsiveStore: l,
       gamification: s
     }
-  ) }) : null, [e, s, n, i, o, a, r]);
+  ) }) : null, [e, s, n, l, o, a, i]);
   return /* @__PURE__ */ t(
     ts,
     {
       fallback: /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
-      children: l
+      children: d
     }
   );
-}, ws = ({ feature: e, className: s, appNode: n, responsiveStore: o }) => e && e.featureConfig.get().type === x.GAMES ? /* @__PURE__ */ t(
-  $s,
+}, $s = ({ feature: e, className: s, appNode: n, responsiveStore: o }) => e && e.featureConfig.get().type === D.GAMES ? /* @__PURE__ */ t(
+  ws,
   {
     className: s,
     appNode: n,
     responsiveStore: o,
     gamification: e
   }
-) : null, As = () => Re, Ls = /* @__PURE__ */ h(As())({
-  name: "Container",
-  class: "ckodz37",
+) : null, Ls = () => ce, Ds = /* @__PURE__ */ h(Ls())({
+  name: "ButtonIcon",
+  class: "b11wpe79",
   propsAsIs: !0
-}), Ds = ({
-  sdk: e
-}) => {
-  const s = u(e.sdkStore.organizationSettings), n = u(e.sdkStore.streamSettings), o = u(e.getActiveFeature()), r = w(() => {
-    const i = (n == null ? void 0 : n.data) || (s == null ? void 0 : s.data);
-    return i != null && i.overlays ? i.overlays : [];
-  }, [s, n]), a = w(() => [...r.filter(({
-    enableSdkButton: i
-  }) => i).map((i) => ({
-    id: i.type,
-    onClick: () => e.openFeature(i.type),
-    disabled: !(i.type in ls),
-    label: i.name,
+}), Ts = os(({
+  sdk: e,
+  className: s
+}, n) => {
+  const o = u(e.sdkStore.organizationSettings), i = u(e.sdkStore.streamSettings), a = u(e.getActiveFeature()), l = C(() => {
+    const r = (i == null ? void 0 : i.data) || (o == null ? void 0 : o.data);
+    return r != null && r.overlays ? r.overlays : [];
+  }, [o, i]), d = C(() => [...l.filter(({
+    enableSdkButton: r
+  }) => r).map((r) => ({
+    id: r.type,
+    onClick: () => e.openFeature(r.type),
+    disabled: !(r.type in ds),
+    label: r.name,
     icon: /* @__PURE__ */ t("img", {
-      src: i.icon,
+      src: r.icon,
       alt: ""
     }),
     /** multiplied by 10 to add the ability to insert custom buttons between our buttons */
-    position: i.position * 10
-  }))].sort((i, l) => i.position - l.position), [r, e]);
-  return /* @__PURE__ */ t(Ls, {
-    children: a.map((i) => /* @__PURE__ */ t(Oe, {
-      ...i,
-      icon: void 0,
-      active: i.id === o
-    }, i.id))
+    position: r.position * 10
+  }))].sort((r, p) => r.position - p.position), [l, e]);
+  return /* @__PURE__ */ m(Ve, {
+    className: s,
+    children: [/* @__PURE__ */ t(Pe, {
+      children: [/* @__PURE__ */ t(Q, {
+        id: "Channels",
+        onClick: () => e.closeFeature(),
+        label: "Channels",
+        active: a === 0
+      }, "Channels"), ...d.map((r) => r.id === D.GAMES ? /* @__PURE__ */ t(Q, {
+        ...r,
+        active: r.id === a,
+        label: "StreamLayer +",
+        id: "featuredGroups",
+        icon: /* @__PURE__ */ t(Ds, {
+          name: "icon-btn-feature-groups",
+          "data-selected": r.id === a
+        })
+      }, r.id) : /* @__PURE__ */ t(Q, {
+        ...r,
+        icon: void 0,
+        active: r.id === a
+      }, r.id))]
+    }), /* @__PURE__ */ t("div", {
+      ref: n
+    })]
   });
-}, Ts = /* @__PURE__ */ h("div")({
+}), xs = /* @__PURE__ */ h("div")({
   name: "Container",
-  class: "c3q0amv",
+  class: "c1qjj4d4",
   propsAsIs: !1
-}), xs = /* @__PURE__ */ h("div")({
+}), Os = /* @__PURE__ */ h("div")({
   name: "CloseIconWrap",
-  class: "cqihknq",
+  class: "c1lg6b8a",
   propsAsIs: !1
-}), Os = () => Ve, Rs = /* @__PURE__ */ h(Os())({
+}), Rs = () => ce, Vs = /* @__PURE__ */ h(Rs())({
   name: "CloseIcon",
-  class: "cl5ln9o",
+  class: "c159el66",
   propsAsIs: !0
-}), Vs = /* @__PURE__ */ h("div")({
+}), Ps = /* @__PURE__ */ h("div")({
   name: "Title",
-  class: "t1bejf60",
+  class: "t16xmufv",
   propsAsIs: !1
-}), qs = /* @__PURE__ */ h("img")({
+}), Qs = /* @__PURE__ */ h("img")({
   name: "SponsorLogo",
-  class: "sb0t4y8",
+  class: "s83lc21",
   propsAsIs: !1
-}), Ps = /* @__PURE__ */ h("div")({
+}), _s = /* @__PURE__ */ h("div")({
   name: "PresentsTitle",
-  class: "p1nmyo08",
+  class: "p1p7igia",
   propsAsIs: !1
-}), Qs = /* @__PURE__ */ h("div")({
+}), qs = /* @__PURE__ */ h("div")({
   name: "Subtitle",
-  class: "sgd2pup",
+  class: "s1eftsbu",
   propsAsIs: !1
-}), _s = /* @__PURE__ */ h("div")({
+}), Fs = /* @__PURE__ */ h("div")({
   name: "Description",
-  class: "d6e19hw",
+  class: "d8uezec",
   propsAsIs: !1
-}), Us = /* @__PURE__ */ h("button")({
+}), Ks = /* @__PURE__ */ h("button")({
   name: "ActionButton",
-  class: "a17h53j4",
+  class: "a1h1bk90",
   propsAsIs: !1
-}), te = ({ close: e, action: s, onboarding: n }) => {
-  var o, r, a, i, l, c, d, p;
-  return /* @__PURE__ */ y(Ts, { children: [
-    /* @__PURE__ */ t(xs, { onClick: e, children: /* @__PURE__ */ t(Rs, { name: "icon-cross" }) }),
-    ((r = (o = n == null ? void 0 : n.titleCard) == null ? void 0 : o.media) == null ? void 0 : r.sponsorLogo) && /* @__PURE__ */ y(Vs, { children: [
-      /* @__PURE__ */ t(qs, { alt: "sponsor-logo", src: (i = (a = n == null ? void 0 : n.titleCard) == null ? void 0 : a.media) == null ? void 0 : i.sponsorLogo }),
-      /* @__PURE__ */ t(Ps, { children: "PRESENTS" })
+}), oe = ({ close: e, action: s, onboarding: n }) => {
+  var o, i, a, l, d, r, p, c;
+  return /* @__PURE__ */ m(xs, { children: [
+    /* @__PURE__ */ t(Os, { onClick: e, children: /* @__PURE__ */ t(Vs, { name: "icon-cross" }) }),
+    ((i = (o = n == null ? void 0 : n.titleCard) == null ? void 0 : o.media) == null ? void 0 : i.sponsorLogo) && /* @__PURE__ */ m(Ps, { children: [
+      /* @__PURE__ */ t(Qs, { alt: "sponsor-logo", src: (l = (a = n == null ? void 0 : n.titleCard) == null ? void 0 : a.media) == null ? void 0 : l.sponsorLogo }),
+      /* @__PURE__ */ t(_s, { children: "PRESENTS" })
     ] }),
-    ((l = n == null ? void 0 : n.titleCard) == null ? void 0 : l.title) && /* @__PURE__ */ t(Qs, { children: (c = n == null ? void 0 : n.titleCard) == null ? void 0 : c.title }),
-    ((d = n == null ? void 0 : n.titleCard) == null ? void 0 : d.subtitle) && /* @__PURE__ */ t(_s, { children: (p = n == null ? void 0 : n.titleCard) == null ? void 0 : p.subtitle }),
-    /* @__PURE__ */ t(Us, { onClick: s, children: "Play Now" })
+    ((d = n == null ? void 0 : n.titleCard) == null ? void 0 : d.title) && /* @__PURE__ */ t(qs, { children: (r = n == null ? void 0 : n.titleCard) == null ? void 0 : r.title }),
+    ((p = n == null ? void 0 : n.titleCard) == null ? void 0 : p.subtitle) && /* @__PURE__ */ t(Fs, { children: (c = n == null ? void 0 : n.titleCard) == null ? void 0 : c.subtitle }),
+    /* @__PURE__ */ t(Ks, { onClick: s, children: "Play Now" })
   ] });
-}, _ = [{
-  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_1.png",
-  tagline: "Featured groups+ experience",
-  headline: /* @__PURE__ */ y(D, {
-    children: ["Welcome to ", /* @__PURE__ */ t("br", {}), " Featured Groups +"]
+}, K = [{
+  graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_0.png",
+  tagline: "",
+  headline: /* @__PURE__ */ m(L, {
+    children: ["Welcome to ", /* @__PURE__ */ t("br", {}), " StreamLayer +"]
   })
 }, {
   graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_2.png",
@@ -480,46 +504,44 @@ const ls = {
 }, {
   graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/step_5.png",
   headline: "Compete against friends on the leaderboard"
-}], Fs = /* @__PURE__ */ h("div")({
+}], Ms = /* @__PURE__ */ h("div")({
   name: "OnboardingContainer",
-  class: "o1xcysoz",
+  class: "o1xni1kr",
   propsAsIs: !1
-}), Ks = () => F, Ms = /* @__PURE__ */ h(Ks())({
+}), Us = () => U, zs = /* @__PURE__ */ h(Us())({
   name: "OnboardingNotificationContainer",
-  class: "oejzp3v",
+  class: "o1vnouv7",
   propsAsIs: !0
-}), oe = /* @__PURE__ */ h("div")({
+}), ie = /* @__PURE__ */ h("div")({
   name: "InnerContainer",
-  class: "i134gfua",
+  class: "i59uefw",
   propsAsIs: !1
-}), zs = ({
+}), Bs = ({
   deepLink: e,
   onboardingOpts: s,
   notification: n,
   gamification: o,
-  loading: r,
-  renderToNode: a,
-  sdk: i
+  loading: i,
+  sdk: a
 }) => {
-  var l, c, d, p, v, m, f;
-  const N = u(o.friends.getStore()), [b, A] = $(void 0), S = w(() => {
-    var C, T;
-    const z = i.getInviter();
-    return z ? (T = (C = N.data) == null ? void 0 : C.find(({
-      slId: ue
-    }) => ue === z)) == null ? void 0 : T.name : "";
-  }, [N.data, i]);
+  var l, d, r, p, c, v, f;
+  const N = u(o.friends.getStore()), [b, S] = E(void 0), y = C(() => {
+    var w, T;
+    const W = a.getInviter();
+    return W ? (T = (w = N.data) == null ? void 0 : w.find(({
+      slId: ve
+    }) => ve === W)) == null ? void 0 : T.name : "";
+  }, [N.data, a]);
   return k(() => {
-    const C = e.$store.subscribe((T) => {
-      T && A(T.data);
+    const w = e.$store.subscribe((T) => {
+      T && S(T.data);
     });
     return () => {
-      C();
+      w();
     };
-  }, [e.$store]), /* @__PURE__ */ t(Fs, {
-    children: /* @__PURE__ */ t(Qe, {
-      loading: r,
-      renderToNode: a,
+  }, [e.$store]), /* @__PURE__ */ t(Ms, {
+    children: /* @__PURE__ */ t(_e, {
+      loading: i,
       rules: [{
         label: "Answer as many questions as you like.",
         icon: "icon-btn-feature-groups"
@@ -531,372 +553,374 @@ const ls = {
         icon: "icon-trophy"
       }],
       rulesBtnLabel: (l = s.rules) == null ? void 0 : l.buttonLabel,
-      rulesTitle: (c = s.rules) == null ? void 0 : c.heading,
+      rulesTitle: (d = s.rules) == null ? void 0 : d.heading,
       termsTitle: "Terms and Conditions",
-      termsText: (d = s.rules) == null ? void 0 : d.terms,
-      steps: _,
+      termsText: (r = s.rules) == null ? void 0 : r.terms,
+      steps: K,
       primaryColor: (p = s.inviteCard) == null ? void 0 : p.iconColor,
       inviteLink: b,
-      inviteCardTitle: (v = s.inviteCard) == null ? void 0 : v.heading,
-      inviteCardSubtext: (m = s.inviteCard) == null ? void 0 : m.subtext,
+      inviteCardTitle: (c = s.inviteCard) == null ? void 0 : c.heading,
+      inviteCardSubtext: (v = s.inviteCard) == null ? void 0 : v.subtext,
       inviteCardBtnLabel: (f = s.inviteCard) == null ? void 0 : f.buttonLabel,
       onClose: () => {
-        var C;
-        (C = n.close) == null || C.call(n);
+        var w;
+        (w = n.close) == null || w.call(n);
       },
       gamification: o,
-      sdk: i,
-      inviterName: S
+      sdk: a,
+      inviterName: y
     })
   });
-}, Bs = ({
+}, Ws = ({
   sdk: e,
   notification: s,
   saveHeight: n,
   style: o,
-  appNode: r,
+  appNode: i,
   sdkInDesktopView: a,
-  responsiveStore: i
+  responsiveStore: l
 }) => {
-  var l;
-  const c = L(null), d = s.data.onboarding, [p, v] = $(d == null ? void 0 : d.instantOpen), m = e.getFeature(x.GAMES), f = w(() => _ == null ? void 0 : _.map(({
-    graphicSrc: S
-  }) => S), []), {
+  const d = $(null), r = s.data.onboarding, [p, c] = E(r == null ? void 0 : r.instantOpen), v = e.getFeature(D.GAMES), f = C(() => K == null ? void 0 : K.map(({
+    graphicSrc: y
+  }) => y), []), {
     screen: N
-  } = u(i, {
+  } = u(l, {
     keys: ["screen"]
   });
-  (l = d == null ? void 0 : d.titleCard) != null && l.media && (d.titleCard.media.sponsorLogo = qe), os(() => {
-    var S;
-    n(((S = c.current) == null ? void 0 : S.getBoundingClientRect().height) || 0);
+  is(() => {
+    var y;
+    n(((y = d.current) == null ? void 0 : y.getBoundingClientRect().height) || 0);
   }, [n]);
   const {
     loading: b,
-    throttled: A
-  } = Pe(f);
-  return p && m && d && r.current && !A ? /* @__PURE__ */ t(le, {
-    container: r,
+    throttled: S
+  } = Qe(f);
+  return p && v && r && i.current && !S ? /* @__PURE__ */ t(de, {
+    container: i,
     useContainer: !a,
-    children: /* @__PURE__ */ t(zs, {
+    children: /* @__PURE__ */ t(Bs, {
       notification: s,
-      setOpened: v,
-      gamification: m,
-      onboardingOpts: d,
-      deepLink: m.deepLink,
+      setOpened: c,
+      gamification: v,
+      onboardingOpts: r,
+      deepLink: v.deepLink,
       loading: b,
-      renderToNode: r,
+      renderToNode: i,
       sdk: e
     })
-  }) : /* @__PURE__ */ y(D, {
-    children: [/* @__PURE__ */ t(oe, {
-      ref: c,
+  }) : /* @__PURE__ */ m(L, {
+    children: [/* @__PURE__ */ t(ie, {
+      ref: d,
       style: {
         position: "absolute",
         visibility: "hidden"
       },
-      children: /* @__PURE__ */ t(te, {
+      children: /* @__PURE__ */ t(oe, {
         close: () => {
         },
         action: () => {
         },
-        onboarding: d
+        onboarding: r
       })
-    }), /* @__PURE__ */ t(Ms, {
+    }), /* @__PURE__ */ t(zs, {
       style: o,
       hiding: s.hiding,
-      children: /* @__PURE__ */ t(oe, {
-        children: /* @__PURE__ */ t(te, {
+      children: /* @__PURE__ */ t(ie, {
+        children: /* @__PURE__ */ t(oe, {
           close: s.close,
           action: () => {
-            var S;
-            v(!0), (((S = r.current) == null ? void 0 : S.getBoundingClientRect().y) || 0) < 0 && U(r, N.size, {
+            var y;
+            c(!0), (((y = i.current) == null ? void 0 : y.getBoundingClientRect().y) || 0) < 0 && M(i, N.size, {
               behavior: "smooth"
             });
           },
-          onboarding: d
+          onboarding: r
         })
       })
     })]
   });
-}, Ws = () => F, js = /* @__PURE__ */ h(Ws())({
+}, Gs = () => U, Hs = /* @__PURE__ */ h(Gs())({
   name: "Container",
-  class: "c1cu0box",
+  class: "c8ol1ve",
   propsAsIs: !0
-}), pe = /* @__PURE__ */ h("div")({
+}), he = /* @__PURE__ */ h("div")({
   name: "InnerContainer",
-  class: "i1p534h4",
+  class: "iqfywam",
   propsAsIs: !1
-}), Gs = () => pe, Hs = /* @__PURE__ */ h(Gs())({
+}), js = () => he, Xs = /* @__PURE__ */ h(js())({
   name: "HiddenContainer",
-  class: "hyh76ez",
+  class: "hokmtod",
   propsAsIs: !0
-}), Xs = /* @__PURE__ */ h("div")({
+}), Ys = /* @__PURE__ */ h("div")({
   name: "NotificationRefreshing",
-  class: "n1pj3cvw",
+  class: "n192d1q8",
   propsAsIs: !1
-}), Ys = () => _e, Zs = /* @__PURE__ */ h(Ys())({
+}), Zs = () => qe, Js = /* @__PURE__ */ h(Zs())({
   name: "Pill",
-  class: "pk13by5",
+  class: "p1lha68t",
   propsAsIs: !0
-}), Js = (e) => {
-  const [s, n] = $(0), o = L(null), r = G((i) => {
-    o.current = i;
+}), en = (e) => {
+  const [s, n] = E(0), o = $(null), i = R((l) => {
+    o.current = l;
   }, []);
   k(() => {
-    var i;
-    const l = (i = o.current) == null ? void 0 : i.getBoundingClientRect();
-    l && n(l.height);
+    var l;
+    const d = (l = o.current) == null ? void 0 : l.getBoundingClientRect();
+    d && n(d.height);
   }, [e]);
-  const a = G((i) => {
-    n(i);
+  const a = R((l) => {
+    n(l);
   }, []);
-  return [r, s, a];
-}, en = ({
+  return [i, s, a];
+}, sn = ({
   sdk: e,
   notification: s,
   appNode: n,
   responsiveStore: o
 }) => {
-  var r, a;
+  var i, a;
   const {
-    sdkInDesktopView: i
+    sdkInDesktopView: l
   } = u(o, {
     keys: ["sdkInDesktopView"]
   }), {
-    sdk: l
-  } = M(), [c, d, p] = Js(s.id);
-  return s.type === O.QUESTION ? /* @__PURE__ */ y(D, {
-    children: [/* @__PURE__ */ t(Hs, {
-      ref: c,
-      children: /* @__PURE__ */ t(B, {
+    sdk: d
+  } = B(), [r, p, c] = en(s.id);
+  return s.type === x.QUESTION ? /* @__PURE__ */ m(L, {
+    children: [/* @__PURE__ */ t(Xs, {
+      ref: r,
+      children: /* @__PURE__ */ t(G, {
         ...s
       })
-    }), /* @__PURE__ */ y(js, {
+    }), /* @__PURE__ */ m(Hs, {
       style: {
-        height: s.hiding ? 0 : d
+        height: s.hiding ? 0 : p
       },
       hiding: s.hiding,
-      children: [/* @__PURE__ */ t(pe, {
+      children: [/* @__PURE__ */ t(he, {
         style: {
           height: "100%"
         },
-        children: /* @__PURE__ */ t(B, {
+        children: /* @__PURE__ */ t(G, {
           ...s,
-          controlVideo: l == null ? void 0 : l.controlVideoPlayer
+          controlVideo: d == null ? void 0 : d.controlVideoPlayer
         })
-      }), /* @__PURE__ */ t(Xs, {}, s.id)]
+      }), /* @__PURE__ */ t(Ys, {}, s.id)]
     })]
-  }) : s.type === O.QUESTION_RESOLVED && (a = (r = s.data) == null ? void 0 : r.question) != null && a.predictionResult ? /* @__PURE__ */ t(Fe, {
+  }) : s.type === x.QUESTION_RESOLVED && (a = (i = s.data) == null ? void 0 : i.question) != null && a.predictionResult ? /* @__PURE__ */ t(Ke, {
     style: {
-      height: s.hiding ? 0 : d
+      height: s.hiding ? 0 : p
     },
-    saveHeight: p,
+    saveHeight: c,
     close: s.close,
     hiding: s.hiding,
     ...s.data.question
-  }) : s.type === O.ONBOARDING ? /* @__PURE__ */ t(Bs, {
+  }) : s.type === x.ONBOARDING ? /* @__PURE__ */ t(Ws, {
     style: {
-      height: s.hiding ? 0 : d
+      height: s.hiding ? 0 : p
     },
-    saveHeight: p,
+    saveHeight: c,
     sdk: e,
     notification: s,
-    sdkInDesktopView: i,
+    sdkInDesktopView: l,
     appNode: n,
     responsiveStore: o
   }) : null;
-}, sn = "p6vl6vu", nn = ({
+}, nn = "p7vfi6t", tn = ({
   pill: e,
   setPill: s,
   appNode: n,
   headerNode: o,
-  scrollNode: r,
+  scrollNode: i,
   responsiveStore: a,
-  scrollStore: i
+  scrollStore: l
 }) => {
-  var l, c;
+  var d, r;
   const {
-    screen: d
+    screen: p
   } = u(a, {
     keys: ["screen"]
   }), {
-    tabsShown: p,
+    tabsShown: c,
     scrollPosition: v
-  } = u(i, {
+  } = u(l, {
     keys: ["tabsShown", "scrollPosition"]
   });
   k(() => {
     a.get().sdkInDesktopView ? v < 50 && s(null) : v > -50 && s(null);
   }, [v, a, s]);
-  const m = a.get().sdkInDesktopView ? n : o;
-  return !e || !m.current ? null : Ke.createPortal(/* @__PURE__ */ t(Zs, {
-    title: e.type === O.QUESTION_RESOLVED ? "Prediction result" : `New ${((c = Me[(l = e.data) == null ? void 0 : l.questionType]) == null ? void 0 : c.label) || "notification"}`,
+  const f = a.get().sdkInDesktopView ? n : o;
+  return !e || !f.current ? null : Me.createPortal(/* @__PURE__ */ t(Js, {
+    title: e.type === x.QUESTION_RESOLVED ? "Prediction result" : `New ${((r = Ue[(d = e.data) == null ? void 0 : d.questionType]) == null ? void 0 : r.label) || "notification"}`,
     onClick: () => {
-      var f;
-      a.get().sdkInDesktopView ? (f = r.current) == null || f.scrollTo({
+      var N;
+      a.get().sdkInDesktopView ? (N = i.current) == null || N.scrollTo({
         top: 0,
         behavior: "smooth"
-      }) : U(n, d.size, {
+      }) : M(n, p.size, {
         behavior: "smooth"
       }), s(null);
     },
-    className: ze(p && sn, "sl-pill-button")
-  }), m.current);
-}, tn = ({
+    className: ze(c && nn, "sl-pill-button")
+  }), f.current);
+}, on = ({
   sdk: e,
   headerNode: s,
   scrollNode: n,
   responsiveStore: o,
-  appNode: r,
+  appNode: i,
   scrollStore: a
 }) => {
-  const [i] = $(e.getNotificationsStore()), l = u(i), [c, d] = $(null), p = w(() => e.getActiveNotification(), [e, l]);
+  const [l] = E(e.getNotificationsStore()), d = u(l), [r, p] = E(null), c = C(() => e.getActiveNotification(), [e, d]);
   return k(() => {
-    p && Ue.emit("notification", {
+    c && Fe.emit("notification", {
       action: "rendered",
       payload: {
-        questionId: p.data.questionId,
-        questionType: p.data.questionType
+        questionId: c.data.questionId,
+        questionType: c.data.questionType
       }
     });
-  }, [p]), k(() => {
-    p && (o.get().sdkInDesktopView || o.get().sdkInView) && (!o.get().sdkInDesktopView && o.get().sdkInView && d(p), o.get().sdkInDesktopView && window.requestAnimationFrame(() => {
-      a.get().scrollPosition !== 0 && d(p);
+  }, [c]), k(() => {
+    c && (o.get().sdkInDesktopView || o.get().sdkInView) && (!o.get().sdkInDesktopView && o.get().sdkInView && p(c), o.get().sdkInDesktopView && window.requestAnimationFrame(() => {
+      a.get().scrollPosition !== 0 && p(c);
     }));
-  }, [p]), k(() => {
-    p || d(null);
-  }, [p]), /* @__PURE__ */ y(D, {
-    children: [!c && p && /* @__PURE__ */ t(en, {
+  }, [c]), k(() => {
+    c || p(null);
+  }, [c]), /* @__PURE__ */ m(L, {
+    children: [!r && c && /* @__PURE__ */ t(sn, {
       headerNode: s,
-      appNode: r,
+      appNode: i,
       sdk: e,
-      notification: p,
+      notification: c,
       responsiveStore: o
-    }), c && /* @__PURE__ */ t(nn, {
-      pill: c,
-      setPill: d,
-      appNode: r,
-      notification: p,
+    }), r && /* @__PURE__ */ t(tn, {
+      pill: r,
+      setPill: p,
+      appNode: i,
+      notification: c,
       headerNode: s,
       scrollNode: n,
       scrollStore: a,
       responsiveStore: o
     })]
   });
-}, on = (e) => {
-  const s = L(""), [n, o] = $(!1), r = u(e.status), a = u(e.sdkStore.slStreamId), i = u(e.userId()), l = u(e.getActiveFeature()), c = r === "ready" && !!a.data;
+}, rn = (e) => {
+  const s = $(""), [n, o] = E(!1), i = u(e.status), a = u(e.sdkStore.slStreamId), l = u(e.userId()), d = u(e.getActiveFeature()), r = i === "ready" && !!a.data;
   k(() => {
-    const v = e.getFeature(x.GAMES);
+    const v = e.getFeature(D.GAMES);
     v && (v.closeQuestion(), v.closeUser());
-  }, [l, e]);
-  const d = (v) => {
-    s.current = v, o(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: m, err: f }) => {
-      if (!f && m) {
-        e.isUserAuthorized().then((N) => {
-          N || e.disableApp();
-        });
-        return;
-      }
-    });
-  }, p = () => {
+  }, [d, e]);
+  const p = R(
+    (v) => {
+      s.current = v, o(!0), e.initializeApp({ skipOrganizationSettings: !0 }).then(({ enabled: f, err: N }) => {
+        if (!N && f) {
+          e.isUserAuthorized().then((b) => {
+            b || e.disableApp();
+          });
+          return;
+        }
+      });
+    },
+    [e]
+  ), c = R(() => {
     o(!1), e.disableApp();
-  };
+  }, [e]);
   return k(() => {
-    if (!i) {
-      c && e.disableApp();
+    if (!l) {
+      r && e.disableApp();
       return;
     }
-    if (i && s.current && n) {
+    if (l && s.current && n) {
       e.initializeApp({ skipOrganizationSettings: !0 }).then(() => {
         e.createEventSession(s.current);
       });
       return;
     }
-  }, [i]), k(() => () => {
+  }, [l]), k(() => () => {
     o(!1), e.disableApp();
   }, [o, e]), {
     sdkEnabled: n,
-    sdkReady: c,
-    activateEventWithId: d,
-    deactivate: p,
-    isLogged: !!i
+    sdkReady: r,
+    activateEventWithId: p,
+    deactivate: c,
+    isLogged: !!l
   };
-}, rn = ({ sdk: e, className: s, scrollStore: n, appNode: o, scrollNode: r, responsiveStore: a }) => {
-  const [, i] = He(e);
+}, an = ({ sdk: e, className: s, scrollStore: n, appNode: o, scrollNode: i, responsiveStore: a }) => {
+  const [, l] = je(e);
   return /* @__PURE__ */ t(
-    Es,
+    Cs,
     {
       className: s,
-      scrollNode: r,
+      scrollNode: i,
       appNode: o,
       scrollStore: n,
-      feature: i,
+      feature: l,
       responsiveStore: a,
       sdk: e
     }
   );
-}, an = ({ sdk: e, className: s, appNode: n, responsiveStore: o }) => {
-  const r = u(e.featuresList.getStore());
-  return r ? Array.from(r, (a) => {
-    const i = e.getFeature(a);
-    return i ? /* @__PURE__ */ t(
-      ws,
+}, ln = ({ sdk: e, className: s, appNode: n, responsiveStore: o }) => {
+  const i = u(e.featuresList.getStore());
+  return i ? Array.from(i, (a) => {
+    const l = e.getFeature(a);
+    return l ? /* @__PURE__ */ t(
+      $s,
       {
         className: s,
         appNode: n,
-        feature: i,
+        feature: l,
         responsiveStore: o,
         sdk: e
       },
       a
     ) : null;
   }) : null;
-}, ln = ({ sdk: e, event: s }) => {
-  const n = L(null), o = L(null), [r] = Be(n), [a, i] = We(n, r), { sdkEnabled: l, sdkReady: c, activateEventWithId: d, deactivate: p, isLogged: v } = on(e);
+}, dn = ({ sdk: e, event: s }) => {
+  const n = $(null), o = $(null), [i] = Be(n), [a, l] = We(n, i), { sdkEnabled: d, sdkReady: r, activateEventWithId: p, deactivate: c, isLogged: v } = rn(e);
   k(() => {
-    s ? (e.createEventSession(s), d(s)) : p();
-  }, [s, d, p, e]), P(n, { enabled: l, event: "click", listener: Xe }), P(a, {
-    enabled: l,
+    s ? (e.createEventSession(s), p(s)) : c();
+  }, [s, p, c, e]), _(n, { enabled: d, event: "click", listener: Xe }), _(a, {
+    enabled: d,
     event: "scrollend",
     listener: Ye,
     useDomNode: !0
-  }), P(a, {
-    enabled: l,
+  }), _(a, {
+    enabled: d,
     event: "click",
     listener: Ze,
     useDomNode: !0
   });
-  const m = w(() => ({ sdk: e }), [e]);
+  const f = C(() => ({ sdk: e }), [e]);
   return k(() => {
     import("./gamification-feature.js");
-  }, []), /* @__PURE__ */ t(ce.Provider, { value: m, children: /* @__PURE__ */ y(je, { ref: n, children: [
-    l && /* @__PURE__ */ t(Ds, { sdk: e }),
-    /* @__PURE__ */ y(Ge, { className: "sl-hide-on-modal", ref: a, "data-nav": l.toString(), children: [
-      c && /* @__PURE__ */ t(
-        tn,
+  }, []), /* @__PURE__ */ t(ue.Provider, { value: f, children: /* @__PURE__ */ m(Ge, { ref: n, children: [
+    d && /* @__PURE__ */ t(Ts, { className: q, sdk: e, ref: o }),
+    /* @__PURE__ */ m(He, { className: "sl-hide-on-modal", ref: a, "data-nav": d.toString(), children: [
+      r && /* @__PURE__ */ t(
+        on,
         {
           sdk: e,
           scrollNode: a,
           headerNode: o,
           appNode: n,
-          scrollStore: i,
-          responsiveStore: r
+          scrollStore: l,
+          responsiveStore: i
         }
       ),
-      c && /* @__PURE__ */ t(
-        rn,
+      r && /* @__PURE__ */ t(
+        an,
         {
-          scrollStore: i,
-          responsiveStore: r,
+          scrollStore: l,
+          responsiveStore: i,
           scrollNode: a,
           appNode: n,
-          className: W,
+          className: q,
           sdk: e
         }
       ),
-      c && /* @__PURE__ */ t(an, { responsiveStore: r, appNode: n, className: W, sdk: e })
+      r && /* @__PURE__ */ t(ln, { responsiveStore: i, appNode: n, className: q, sdk: e })
     ] }),
-    l && !v && /* @__PURE__ */ t(
+    d && !v && /* @__PURE__ */ t(
       "div",
       {
         style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" },
@@ -904,18 +928,18 @@ const ls = {
       }
     )
   ] }) });
-}, dn = ({ children: e, style: s }) => /* @__PURE__ */ t("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ t("div", { className: Je, style: s, children: e }) }), mn = () => {
-  const { sdk: e } = K(de);
+}, cn = ({ children: e, style: s }) => /* @__PURE__ */ t("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ t("div", { className: Je, style: s, children: e }) }), fn = () => {
+  const { sdk: e } = z(pe);
   return e;
-}, yn = ({ event: e }) => {
-  const { sdk: s, status: n } = K(de);
-  if (n === j.UNSET)
+}, kn = ({ event: e }) => {
+  const { sdk: s, status: n } = z(pe);
+  if (n === H.UNSET)
     throw new Error("Wrap app in `StreamLayerProvider`");
-  return n === j.CONNECTED ? /* @__PURE__ */ t("div", { className: "StreamLayerSDK", children: "wait" }) : s === null ? /* @__PURE__ */ t("div", { className: "StreamLayerSDK", children: "sdk not initialized" }) : /* @__PURE__ */ t("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ t(dn, { children: /* @__PURE__ */ t(ln, { sdk: s, event: e }) }) });
+  return n === H.CONNECTED ? /* @__PURE__ */ t("div", { className: "StreamLayerSDK", children: "wait" }) : s === null ? /* @__PURE__ */ t("div", { className: "StreamLayerSDK", children: "sdk not initialized" }) : /* @__PURE__ */ t("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ t(cn, { children: /* @__PURE__ */ t(dn, { sdk: s, event: e }) }) });
 };
 export {
-  yn as S,
-  dn as i,
-  gn as q,
-  mn as u
+  mn as E,
+  kn as S,
+  cn as i,
+  fn as u
 };