@streamlayer/react 1.24.5 → 1.24.6

package/lib/es/index2.js

@@ -1,19 +1,18 @@
 import { h as ye } from "./index7.js";
-import { jsx as n, jsxs as v, Fragment as R } from "react/jsx-runtime";
-import { u as f, s as p, a as Ne, c as $, N as M } from "./sl-types.js";
-import { l as Se, S as $e, m as we, d as Ae, n as Ce, C as Ee, y as Re, a as xe, f as V, p as Le, c as De } from "./index14.js";
-import { M as Te, b as Oe, Q as _e, z as me, c as he, T as fe, I as Me, n as Be, f as Ue, w as Q, a as Fe, p as Pe } from "./index16.js";
-import P from "lodash.throttle";
-import { useState as N, useEffect as b, useRef as E, PureComponent as ze, useCallback as z, useMemo as w, Suspense as Ve, lazy as qe, forwardRef as ve, useLayoutEffect as je, useContext as K } from "react";
+import { jsx as o, jsxs as v, Fragment as R } from "react/jsx-runtime";
+import { u as f, F as Ne, s as p, b as Se, c as w, a as T, N as M } from "./feature.js";
+import { l as we, S as $e, m as Ae, d as Ce, n as Ee, C as Re, y as xe, a as Le, f as V, p as De, c as Te } from "./index13.js";
+import { M as Oe, b as _e, Q as Me, z as me, c as he, T as fe, I as Be, n as Ue, f as Pe, w as Q, a as Fe, p as ze } from "./index16.js";
+import F from "lodash.throttle";
+import { useState as N, useEffect as I, useRef as E, PureComponent as Ve, useCallback as z, useMemo as $, Suspense as qe, lazy as je, forwardRef as ve, useLayoutEffect as Qe, useContext as K } from "react";
 import { A as L } from "./index9.js";
-import { f as ge, u as Qe, A as Ke, a as We } from "./analytics.js";
+import { f as ge, u as Ke, A as He, a as We } from "./analytics.js";
 import { m as O } from "./theme.js";
-import { F as Ge, c as T } from "./feature.js";
 import "nanostores";
-import { p as q, _ as He, e as Je } from "./Question.js";
-import { O as Ze } from "./index13.js";
+import { p as q, _ as Ge, e as Je } from "./Question.js";
+import { O as Ze } from "./index12.js";
 import { B as x } from "./index8.js";
-import { I as Xe, S as y, f as C, h as W, Q as U } from "./useStreamLayerApp2.js";
+import { I as Xe, S as y, f as C, h as H, Q as U } from "./useStreamLayerApp2.js";
 import Ye from "react-infinite-scroller";
 import { I as et, s as tt, e as st } from "./index11.js";
 import "uuid";
@@ -22,7 +21,7 @@ import "./storage.js";
 import "./index6.js";
 import { createPortal as nt } from "react-dom";
 import { e as ot } from "./index3.js";
-import { i as G, q as at, _ as rt, j as H } from "./hooks-n9ax4LRT.js";
+import { i as W, q as at, _ as rt, j as G } from "./hooks-n9ax4LRT.js";
 import "./notification.js";
 const J = Object.keys(L), Z = () => {
   const e = window.innerWidth;
@@ -44,12 +43,12 @@ const J = Object.keys(L), Z = () => {
     sdkInView: X(e),
     sdkInDesktopView: B()
   }));
-  return b(() => {
-    const s = P(() => {
+  return I(() => {
+    const s = F(() => {
       t.setKey("sdkInView", X(e));
-    }, 200), a = P(() => {
-      const o = Z();
-      t.setKey("screen", o), t.setKey("sdkInDesktopView", B());
+    }, 200), a = F(() => {
+      const n = Z();
+      t.setKey("screen", n), t.setKey("sdkInDesktopView", B());
     }, 200);
     return window.addEventListener("scroll", s), window.addEventListener("resize", a), () => {
       window.removeEventListener("scroll", s), window.removeEventListener("resize", a);
@@ -62,19 +61,19 @@ const J = Object.keys(L), Z = () => {
     ...s
   });
 }, lt = 15, dt = (e, t) => {
-  const s = E(null), a = E(0), [o] = N(
+  const s = E(null), a = E(0), [n] = N(
     ge({
       scrollPosition: 0,
       tabsShown: !0,
       scrollDirection: "forward"
     })
   ), r = f(t);
-  return b(() => {
+  return I(() => {
     const d = B() ? s.current : window;
     if (!d)
       return () => {
       };
-    const l = P((i) => {
+    const l = F((i) => {
       const c = i.target;
       if (!c)
         return;
@@ -84,17 +83,17 @@ const J = Object.keys(L), Z = () => {
       if (lt > Math.abs(m))
         return;
       const h = a.current < u ? "forward" : "backward";
-      a.current = u, o.set({
+      a.current = u, n.set({
         scrollPosition: Math.round(u),
         scrollDirection: h,
-        tabsShown: o.get().tabsShown
+        tabsShown: n.get().tabsShown
       });
     }, 200);
     return d.addEventListener("scroll", l), () => {
       d.removeEventListener("scroll", l);
     };
-  }, [o, e, r.screen]), [s, o];
-}, F = /* @__PURE__ */ p("div")({
+  }, [n, e, r.screen]), [s, n];
+}, P = /* @__PURE__ */ p("div")({
   name: "LoadingContainer",
   class: "lclc0ej",
   propsAsIs: !1
@@ -103,22 +102,22 @@ const J = Object.keys(L), Z = () => {
   sdk: t,
   children: s,
   className: a,
-  noWait: o
+  noWait: n
 }) => {
   const r = f(e.status), d = f(t.sdkStore.slStreamId);
-  if (!o) {
+  if (!n) {
     if (d?.loading && !d.data)
-      return /* @__PURE__ */ n(F, {
+      return /* @__PURE__ */ o(P, {
         className: a,
         children: "Event is loading..."
       });
     if (!d?.data)
-      return /* @__PURE__ */ n(F, {
+      return /* @__PURE__ */ o(P, {
         className: a,
         children: "Event is forbidden..."
       });
-    if (r !== Ge.Ready)
-      return /* @__PURE__ */ n(F, {
+    if (r !== Ne.Ready)
+      return /* @__PURE__ */ o(P, {
         className: a,
         children: "Wait feature..."
       });
@@ -142,12 +141,12 @@ const J = Object.keys(L), Z = () => {
   propsAsIs: !1
 });
 var D = /* @__PURE__ */ ((e) => (e.HOME = "home", e.LEADERBOARD = "leaderboard", e))(D || {});
-const Y = ({ title: e, active: t, onClick: s }) => /* @__PURE__ */ n(mt, { "data-a": "intr", onClick: s, "data-selected": t, children: /* @__PURE__ */ n(ht, { "data-a": "intr", children: e }) }), ft = ({ activePage: e = "home", toggleActivePage: t }) => /* @__PURE__ */ n(pt, { children: /* @__PURE__ */ v(ut, { "data-position": e === "home" ? "left" : "right", children: [
-  /* @__PURE__ */ n(Y, { title: "Home", active: e === "home", onClick: () => t(
+const Y = ({ title: e, active: t, onClick: s }) => /* @__PURE__ */ o(mt, { "data-a": "intr", onClick: s, "data-selected": t, children: /* @__PURE__ */ o(ht, { "data-a": "intr", children: e }) }), ft = ({ activePage: e = "home", toggleActivePage: t }) => /* @__PURE__ */ o(pt, { children: /* @__PURE__ */ v(ut, { "data-position": e === "home" ? "left" : "right", children: [
+  /* @__PURE__ */ o(Y, { title: "Home", active: e === "home", onClick: () => t(
     "home"
     /* HOME */
   ) }),
-  /* @__PURE__ */ n(
+  /* @__PURE__ */ o(
     Y,
     {
       title: "Friends",
@@ -166,11 +165,11 @@ const Y = ({ title: e, active: t, onClick: s }) => /* @__PURE__ */ n(mt, { "data
   name: "FriendsIcon",
   class: "f10ncfg2",
   propsAsIs: !0
-}), bt = /* @__PURE__ */ p("div")({
+}), kt = /* @__PURE__ */ p("div")({
   name: "Content",
   class: "c1yc07bd",
   propsAsIs: !1
-}), kt = /* @__PURE__ */ p("div")({
+}), bt = /* @__PURE__ */ p("div")({
   name: "Title",
   class: "tj6cq7w",
   propsAsIs: !1
@@ -182,29 +181,29 @@ const Y = ({ title: e, active: t, onClick: s }) => /* @__PURE__ */ n(mt, { "data
   name: "ArrowInviteIcon",
   class: "awohrz6",
   propsAsIs: !0
-}), $t = ({ title: e, description: t, onClick: s, className: a }) => {
-  const [o] = Qe({
+}), wt = ({ title: e, description: t, onClick: s, className: a }) => {
+  const [n] = Ke({
     type: "invitation",
     action: "sent",
     payload: {
       from: Xe.TITLE_CARD
     }
   });
-  return /* @__PURE__ */ v(vt, { "data-a": "intr", onClick: o(s), className: a, children: [
-    /* @__PURE__ */ n(It, { name: "icon-friends" }),
-    /* @__PURE__ */ v(bt, { children: [
-      /* @__PURE__ */ n(kt, { children: e }),
-      /* @__PURE__ */ n(yt, { children: t })
+  return /* @__PURE__ */ v(vt, { "data-a": "intr", onClick: n(s), className: a, children: [
+    /* @__PURE__ */ o(It, { name: "icon-friends" }),
+    /* @__PURE__ */ v(kt, { children: [
+      /* @__PURE__ */ o(bt, { children: e }),
+      /* @__PURE__ */ o(yt, { children: t })
     ] }),
-    /* @__PURE__ */ n(St, { name: "icon-copy" })
+    /* @__PURE__ */ o(St, { name: "icon-copy" })
   ] });
 };
-function wt(e) {
-  var t = e.lastRenderedStartIndex, s = e.lastRenderedStopIndex, a = e.startIndex, o = e.stopIndex;
-  return !(a > s || o < t);
+function $t(e) {
+  var t = e.lastRenderedStartIndex, s = e.lastRenderedStopIndex, a = e.startIndex, n = e.stopIndex;
+  return !(a > s || n < t);
 }
 function At(e) {
-  for (var t = e.isItemLoaded, s = e.itemCount, a = e.minimumBatchSize, o = e.startIndex, r = e.stopIndex, d = [], l = null, i = null, c = o; c <= r; c++) {
+  for (var t = e.isItemLoaded, s = e.itemCount, a = e.minimumBatchSize, n = e.startIndex, r = e.stopIndex, d = [], l = null, i = null, c = n; c <= r; c++) {
     var u = t(c);
     u ? i !== null && (d.push(l, i), l = i = null) : (i = c, l === null && (l = c));
   }
@@ -229,8 +228,8 @@ var Ct = function(e, t) {
 }, Et = /* @__PURE__ */ (function() {
   function e(t, s) {
     for (var a = 0; a < s.length; a++) {
-      var o = s[a];
-      o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(t, o.key, o);
+      var n = s[a];
+      n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), Object.defineProperty(t, n.key, n);
     }
   }
   return function(t, s, a) {
@@ -255,16 +254,16 @@ var Ct = function(e, t) {
 (function(e) {
   Rt(t, e);
   function t() {
-    var s, a, o, r;
+    var s, a, n, r;
     Ct(this, t);
     for (var d = arguments.length, l = Array(d), i = 0; i < d; i++)
       l[i] = arguments[i];
-    return r = (a = (o = ee(this, (s = t.__proto__ || Object.getPrototypeOf(t)).call.apply(s, [this].concat(l))), o), o._lastRenderedStartIndex = -1, o._lastRenderedStopIndex = -1, o._memoizedUnloadedRanges = [], o._onItemsRendered = function(c) {
+    return r = (a = (n = ee(this, (s = t.__proto__ || Object.getPrototypeOf(t)).call.apply(s, [this].concat(l))), n), n._lastRenderedStartIndex = -1, n._lastRenderedStopIndex = -1, n._memoizedUnloadedRanges = [], n._onItemsRendered = function(c) {
       var u = c.visibleStartIndex, m = c.visibleStopIndex;
-      o._lastRenderedStartIndex = u, o._lastRenderedStopIndex = m, o._ensureRowsLoaded(u, m);
-    }, o._setRef = function(c) {
-      o._listRef = c;
-    }, a), ee(o, r);
+      n._lastRenderedStartIndex = u, n._lastRenderedStopIndex = m, n._ensureRowsLoaded(u, m);
+    }, n._setRef = function(c) {
+      n._listRef = c;
+    }, a), ee(n, r);
   }
   return Et(t, [{
     key: "resetloadMoreItemsCache",
@@ -287,40 +286,40 @@ var Ct = function(e, t) {
     }
   }, {
     key: "_ensureRowsLoaded",
-    value: function(a, o) {
+    value: function(a, n) {
       var r = this.props, d = r.isItemLoaded, l = r.itemCount, i = r.minimumBatchSize, c = i === void 0 ? 10 : i, u = r.threshold, m = u === void 0 ? 15 : u, h = At({
         isItemLoaded: d,
         itemCount: l,
         minimumBatchSize: c,
         startIndex: Math.max(0, a - m),
-        stopIndex: Math.min(l - 1, o + m)
+        stopIndex: Math.min(l - 1, n + m)
       });
-      (this._memoizedUnloadedRanges.length !== h.length || this._memoizedUnloadedRanges.some(function(g, I) {
-        return h[I] !== g;
+      (this._memoizedUnloadedRanges.length !== h.length || this._memoizedUnloadedRanges.some(function(g, k) {
+        return h[k] !== g;
       })) && (this._memoizedUnloadedRanges = h, this._loadUnloadedRanges(h));
     }
   }, {
     key: "_loadUnloadedRanges",
     value: function(a) {
-      for (var o = this, r = this.props.loadMoreItems || this.props.loadMoreRows, d = function(c) {
+      for (var n = this, r = this.props.loadMoreItems || this.props.loadMoreRows, d = function(c) {
         var u = a[c], m = a[c + 1], h = r(u, m);
         h?.then(function() {
-          if (wt({
-            lastRenderedStartIndex: o._lastRenderedStartIndex,
-            lastRenderedStopIndex: o._lastRenderedStopIndex,
+          if ($t({
+            lastRenderedStartIndex: n._lastRenderedStartIndex,
+            lastRenderedStopIndex: n._lastRenderedStopIndex,
             startIndex: u,
             stopIndex: m
           })) {
-            if (o._listRef == null)
+            if (n._listRef == null)
               return;
-            typeof o._listRef.resetAfterIndex == "function" ? o._listRef.resetAfterIndex(u, !0) : (typeof o._listRef._getItemStyleCache == "function" && o._listRef._getItemStyleCache(-1), o._listRef.forceUpdate());
+            typeof n._listRef.resetAfterIndex == "function" ? n._listRef.resetAfterIndex(u, !0) : (typeof n._listRef._getItemStyleCache == "function" && n._listRef._getItemStyleCache(-1), n._listRef.forceUpdate());
           }
         });
       }, l = 0; l < a.length; l += 2)
         d(l);
     }
   }]), t;
-})(ze);
+})(Ve);
 const xt = /* @__PURE__ */ p("div")({
   name: "Container",
   class: "culdu4a",
@@ -353,25 +352,25 @@ const xt = /* @__PURE__ */ p("div")({
   name: "CurrentUserBadge",
   class: "c17uc4zr",
   propsAsIs: !0
-}), Ft = ({
+}), Pt = ({
   friendsRank: e,
   avatar: t,
   name: s,
   userId: a,
-  points: o,
+  points: n,
   isCurrentUser: r,
   style: d
 }) => /* @__PURE__ */ v(xt, { "data-name": a, style: d, children: [
-  /* @__PURE__ */ n(Lt, { children: e || 0 }),
+  /* @__PURE__ */ o(Lt, { children: e || 0 }),
   /* @__PURE__ */ v(Ot, { children: [
-    t ? /* @__PURE__ */ n(Dt, { alt: "leaderboard-item-avatar", src: t }) : /* @__PURE__ */ n(Tt, { children: et(s || "") }),
+    t ? /* @__PURE__ */ o(Dt, { alt: "leaderboard-item-avatar", src: t }) : /* @__PURE__ */ o(Tt, { children: et(s || "") }),
     /* @__PURE__ */ v(_t, { children: [
-      /* @__PURE__ */ n(Mt, { children: s || "" }),
-      r && /* @__PURE__ */ n(Ut, { name: "icon-star" })
+      /* @__PURE__ */ o(Mt, { children: s || "" }),
+      r && /* @__PURE__ */ o(Ut, { name: "icon-star" })
     ] })
   ] }),
-  /* @__PURE__ */ n("div", { children: tt(o) })
-] }), Pt = /* @__PURE__ */ p("div")({
+  /* @__PURE__ */ o("div", { children: tt(n) })
+] }), Ft = /* @__PURE__ */ p("div")({
   name: "Container",
   class: "c16btbfp",
   propsAsIs: !1
@@ -380,23 +379,23 @@ const xt = /* @__PURE__ */ p("div")({
   currentUserId: t,
   openItemDetail: s,
   fetchMore: a,
-  scrollNode: o,
+  scrollNode: n,
   hasMore: r
 }) => {
   const d = z((l) => {
     const i = l.target.getAttribute("data-name");
     i && s(i);
   }, [s]);
-  return /* @__PURE__ */ n(Ye, {
+  return /* @__PURE__ */ o(Ye, {
     loadMore: a,
     initialLoad: !1,
     hasMore: r,
     useWindow: !1,
-    getScrollParent: () => o.current,
-    children: /* @__PURE__ */ n(Pt, {
+    getScrollParent: () => n.current,
+    children: /* @__PURE__ */ o(Ft, {
       "data-a": "intr",
       onClick: d,
-      children: e.map((l) => /* @__PURE__ */ n(Ft, {
+      children: e.map((l) => /* @__PURE__ */ o(Pt, {
         ...l,
         isCurrentUser: !!t && t === l.userId
       }, l.userId))
@@ -408,8 +407,8 @@ const xt = /* @__PURE__ */ p("div")({
   propsAsIs: !1
 }), qt = ({
   deepLink: e
-}) => /* @__PURE__ */ n(Vt, {
-  children: /* @__PURE__ */ n(Te, {
+}) => /* @__PURE__ */ o(Vt, {
+  children: /* @__PURE__ */ o(Oe, {
     inviteLink: e,
     inviteCardTitle: "It’s More Fun With Friends",
     inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
@@ -424,18 +423,18 @@ const xt = /* @__PURE__ */ p("div")({
   scrollStore: s,
   leaderboardList: a
 }) => {
-  const o = E(null), {
+  const n = E(null), {
     data: r,
     hasMore: d,
     loading: l,
     key: i
   } = f(a.$store), {
     data: c
-  } = f(e.deepLink.$store), [u, m] = Oe(o);
-  return !r.length && !l ? /* @__PURE__ */ n(qt, {
+  } = f(e.deepLink.$store), [u, m] = _e(n);
+  return !r.length && !l ? /* @__PURE__ */ o(qt, {
     deepLink: c
   }) : /* @__PURE__ */ v(R, {
-    children: [/* @__PURE__ */ n(zt, {
+    children: [/* @__PURE__ */ o(zt, {
       items: r,
       scrollNode: t,
       scrollStore: s,
@@ -443,9 +442,9 @@ const xt = /* @__PURE__ */ p("div")({
       hasMore: d,
       openItemDetail: e.openUser,
       currentUserId: e.currentUserId.get()
-    }, i), c && /* @__PURE__ */ n(jt, {
-      ref: o,
-      children: /* @__PURE__ */ n($t, {
+    }, i), c && /* @__PURE__ */ o(jt, {
+      ref: n,
+      children: /* @__PURE__ */ o(wt, {
         "data-a": "intr",
         onClick: () => u(c),
         title: "Invite Friends",
@@ -457,55 +456,64 @@ const xt = /* @__PURE__ */ p("div")({
   gamification: e,
   scrollNode: t,
   scrollStore: s
-}) => e.leaderboardList ? /* @__PURE__ */ n(Qt, {
+}) => e.leaderboardList ? /* @__PURE__ */ o(Qt, {
   leaderboardList: e.leaderboardList,
   gamification: e,
   scrollNode: t,
   scrollStore: s
-}) : null, Wt = ({ store: e, openQuestion: t }) => {
-  const { sdk: s } = q(), a = f(e);
-  return /* @__PURE__ */ n(_e, { openQuestion: t, questions: a.data, controlVideo: s?.controlVideoPlayer });
-}, Gt = ({ userSummary: e }) => {
+}) : null, Ht = ({ store: e, openQuestion: t, withPickHistory: s }) => {
+  const { sdk: a } = q(), n = f(e);
+  return I(() => {
+    s.set(!0);
+  }, [s]), /* @__PURE__ */ o(Me, { openQuestion: t, questions: n.data, controlVideo: a?.controlVideoPlayer });
+}, Wt = ({ userSummary: e }) => {
   const [t, s] = N(void 0);
-  return b(() => {
-    const a = e.$store.subscribe((o) => {
-      o && s(o);
+  return I(() => {
+    const a = e.$store.subscribe((n) => {
+      n && s(n);
     });
     return () => {
       a();
     };
-  }, [e]), /* @__PURE__ */ n(me, { loading: !t?.summary, ...t?.summary, successRate: t?.percentage?.correct });
-}, Ht = ({ gamification: e, className: t, scrollStore: s, scrollNode: a, appNode: o, style: r, responsiveStore: d }) => {
-  const { tabsShown: l } = f(s, { keys: ["tabsShown"] }), i = f(e.friendsTabEnabled), [c, u] = N(D.HOME), [, m] = Ne(), { sdkInDesktopView: h, screen: g } = f(d, { keys: ["sdkInDesktopView"] }), I = (k) => {
+  }, [e]), /* @__PURE__ */ o(me, { loading: !t?.summary, ...t?.summary, successRate: t?.percentage?.correct });
+}, Gt = ({ gamification: e, className: t, scrollStore: s, scrollNode: a, appNode: n, style: r, responsiveStore: d }) => {
+  const { tabsShown: l } = f(s, { keys: ["tabsShown"] }), i = f(e.friendsTabEnabled), [c, u] = N(D.HOME), [, m] = Se(), { sdkInDesktopView: h, screen: g } = f(d, { keys: ["sdkInDesktopView"] }), k = (b) => {
     m(() => {
-      u(k), h === !1 && (o.current?.getBoundingClientRect().y || 0) < 0 && j(o, g.size, { behavior: "instant" });
+      u(b), h === !1 && (n.current?.getBoundingClientRect().y || 0) < 0 && j(n, g.size, { behavior: "instant" });
     });
   };
-  b(() => s.subscribe((k) => {
-    if (k.scrollPosition === 0) {
+  I(() => s.subscribe((b) => {
+    if (b.scrollPosition === 0) {
       s.setKey("tabsShown", !0);
       return;
     }
-    d.get().sdkInDesktopView ? s.setKey("tabsShown", k.scrollDirection === "backward") : s.setKey("tabsShown", k.scrollDirection === "forward");
-  }), [s, d]), b(() => {
+    d.get().sdkInDesktopView ? s.setKey("tabsShown", b.scrollDirection === "backward") : s.setKey("tabsShown", b.scrollDirection === "forward");
+  }), [s, d]), I(() => {
     i || u(D.HOME);
   }, [i]);
   let A = "0px";
-  return h ? A = l ? "0px" : "calc(0px - var(--header-height))" : A = l ? "var(--header-height)" : "0px", /* @__PURE__ */ v(Se, { className: $(t, "SL-Tabs", "sl-hide-on-modal"), style: r, children: [
-    i && /* @__PURE__ */ n(
+  return h ? A = l ? "0px" : "calc(0px - var(--header-height))" : A = l ? "var(--header-height)" : "0px", /* @__PURE__ */ v(we, { className: w(t, "SL-Tabs", "sl-hide-on-modal"), style: r, children: [
+    i && /* @__PURE__ */ o(
       $e,
       {
         style: {
           top: A
         },
-        children: /* @__PURE__ */ n(ft, { activePage: c, toggleActivePage: I })
+        children: /* @__PURE__ */ o(ft, { activePage: c, toggleActivePage: k })
       }
     ),
     c === D.HOME && /* @__PURE__ */ v(R, { children: [
-      /* @__PURE__ */ n(we, { children: /* @__PURE__ */ n(Ae, { children: /* @__PURE__ */ n(Gt, { userSummary: e.userSummary }) }) }),
-      /* @__PURE__ */ n(Ce, { style: { flex: 1 }, children: /* @__PURE__ */ n(Wt, { openQuestion: e.openQuestion, store: e.feedList.getStore() }) })
+      /* @__PURE__ */ o(Ae, { children: /* @__PURE__ */ o(Ce, { children: /* @__PURE__ */ o(Wt, { userSummary: e.userSummary }) }) }),
+      /* @__PURE__ */ o(Ee, { style: { flex: 1 }, children: /* @__PURE__ */ o(
+        Ht,
+        {
+          openQuestion: e.openQuestion,
+          store: e.feedList.getStore(),
+          withPickHistory: e.withPickHistory
+        }
+      ) })
     ] }),
-    c === D.LEADERBOARD && /* @__PURE__ */ n(Ee, { children: /* @__PURE__ */ n(Kt, { scrollStore: s, scrollNode: a, gamification: e }) })
+    c === D.LEADERBOARD && /* @__PURE__ */ o(Re, { children: /* @__PURE__ */ o(Kt, { scrollStore: s, scrollNode: a, gamification: e }) })
   ] });
 }, Jt = () => V, te = /* @__PURE__ */ p(Jt())({
   name: "OpenedContainer",
@@ -521,17 +529,17 @@ const xt = /* @__PURE__ */ p("div")({
 }) => {
   const s = e + t;
   return s === 0 ? 0 : Math.round(e / s * 100);
-}, Tn = ({
+}, Dn = ({
   gamification: e,
   scrollStore: t,
   className: s,
   appNode: a,
-  scrollNode: o,
+  scrollNode: n,
   responsiveStore: r
-}) => /* @__PURE__ */ n(Ht, {
+}) => /* @__PURE__ */ o(Gt, {
   appNode: a,
   scrollStore: t,
-  scrollNode: o,
+  scrollNode: n,
   className: s,
   gamification: e,
   responsiveStore: r
@@ -540,7 +548,7 @@ const xt = /* @__PURE__ */ p("div")({
   muted: t,
   sdk: s,
   className: a,
-  appNode: o,
+  appNode: n,
   responsiveStore: r
 }) => {
   const {
@@ -552,63 +560,63 @@ const xt = /* @__PURE__ */ p("div")({
   }), {
     hiding: m,
     onAnimationEnd: h
-  } = Re();
+  } = xe();
   if (!l && !c)
     return null;
-  const g = i ? /* @__PURE__ */ n(te, {
-    className: $(a, !d && se),
+  const g = i ? /* @__PURE__ */ o(te, {
+    className: w(a, !d && se),
     hiding: m,
     onAnimationEnd: h,
-    children: /* @__PURE__ */ n(He, {
+    children: /* @__PURE__ */ o(Ge, {
       muted: t,
       sdk: s,
       gamification: e
     })
-  }) : c ? /* @__PURE__ */ n(te, {
-    className: $(a, !d && se),
+  }) : c ? /* @__PURE__ */ o(te, {
+    className: w(a, !d && se),
     hiding: m,
     onAnimationEnd: h,
     children: /* @__PURE__ */ v(Zt, {
-      children: [/* @__PURE__ */ n(Ze, {
+      children: [/* @__PURE__ */ o(Ze, {
         label: "Friend's Rank",
         close: e.closeUser
-      }), /* @__PURE__ */ n(xe, {
-        children: /* @__PURE__ */ n(me, {
+      }), /* @__PURE__ */ o(Le, {
+        children: /* @__PURE__ */ o(me, {
           ...c,
           successRate: Xt(c)
         })
       })]
     })
   }) : null;
-  return /* @__PURE__ */ n(fe, {
-    container: o,
+  return /* @__PURE__ */ o(fe, {
+    container: n,
     useContainer: !u,
     children: g
   });
-}, es = qe(() => import("./gamification-feature.js")), ts = ({ sdk: e, feature: t, className: s, scrollStore: a, appNode: o, scrollNode: r, responsiveStore: d }) => {
-  const l = w(() => t && t.featureConfig.get().type === y.GAMES ? /* @__PURE__ */ n(ct, { className: s, sdk: e, feature: t, children: /* @__PURE__ */ n(
+}, es = je(() => import("./gamification-feature.js")), ts = ({ sdk: e, feature: t, className: s, scrollStore: a, appNode: n, scrollNode: r, responsiveStore: d }) => {
+  const l = $(() => t && t.featureConfig.get().type === y.GAMES ? /* @__PURE__ */ o(ct, { className: s, sdk: e, feature: t, children: /* @__PURE__ */ o(
     es,
     {
-      appNode: o,
+      appNode: n,
       scrollStore: a,
       scrollNode: r,
       className: s,
       responsiveStore: d,
       gamification: t
     }
-  ) }) : null, [e, t, s, d, a, r, o]);
-  return /* @__PURE__ */ n(
-    Ve,
+  ) }) : null, [e, t, s, d, a, r, n]);
+  return /* @__PURE__ */ o(
+    qe,
     {
-      fallback: /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
+      fallback: /* @__PURE__ */ o("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
       children: l
     }
   );
-}, ss = ({ feature: e, sdk: t, muted: s, className: a, appNode: o, responsiveStore: r }) => e && e.featureConfig.get().type === y.GAMES ? /* @__PURE__ */ n(
+}, ss = ({ feature: e, sdk: t, muted: s, className: a, appNode: n, responsiveStore: r }) => e && e.featureConfig.get().type === y.GAMES ? /* @__PURE__ */ o(
   Yt,
   {
     className: a,
-    appNode: o,
+    appNode: n,
     muted: s,
     sdk: t,
     responsiveStore: r,
@@ -640,8 +648,8 @@ class os {
     const s = t.pop() || "", a = this.generateKey(t);
     try {
       this.storage.setItem(a, s);
-    } catch (o) {
-      ns(o) && this.storage === window.sessionStorage && (window.sessionStorage.removeItem("slstreamlogs"), this.storage.setItem(a, s));
+    } catch (n) {
+      ns(n) && this.storage === window.sessionStorage && (window.sessionStorage.removeItem("slstreamlogs"), this.storage.setItem(a, s));
     }
   };
   read = (...t) => {
@@ -659,7 +667,7 @@ var ne;
 T("grpc:stream");
 C.Unknown, C.Internal, C.DeadlineExceeded, C.ResourceExhausted, C.FailedPrecondition, C.Unavailable, C.DataLoss;
 T("grpc:retry");
-W(10, { description: "Number of attempts to retry" }), W(3e4, { description: "Max delay between retries in milliseconds" });
+H(10, { description: "Number of attempts to retry" }), H(3e4, { description: "Max delay between retries in milliseconds" });
 var S;
 (function(e) {
   e.SCHEMA = "schema", e.EXTERNAL_TOKEN = "eToken", e.TOKEN = "token";
@@ -725,7 +733,7 @@ const rs = {
 }), ls = ({
   children: e,
   className: t
-}) => /* @__PURE__ */ n(is, {
+}) => /* @__PURE__ */ o(is, {
   className: t,
   children: e
 }), Ie = /* @__PURE__ */ p("div")({
@@ -748,20 +756,20 @@ const rs = {
   name: "ButtonLabel",
   class: "b40tuix",
   propsAsIs: !1
-}), ms = "s14xk0af", hs = "ha3mg7c", fs = "h103yr45", _ = ({ disabled: e, active: t, onClick: s, label: a, icon: o, id: r }) => /* @__PURE__ */ n(
+}), ms = "s14xk0af", hs = "ha3mg7c", fs = "h103yr45", _ = ({ disabled: e, active: t, onClick: s, label: a, icon: n, id: r }) => /* @__PURE__ */ o(
   cs,
   {
     onClick: s,
     "data-a": "intr",
     disabled: e,
-    className: $(
+    className: w(
       t && ms,
       !t && (r === "channels" || r === "featuredGroups") && hs,
       !t && r === "leaderboard" && fs
     ),
     children: /* @__PURE__ */ v(R, { children: [
-      o && /* @__PURE__ */ n(ps, { children: o }),
-      /* @__PURE__ */ n(us, { children: a })
+      n && /* @__PURE__ */ o(ps, { children: n }),
+      /* @__PURE__ */ o(us, { children: a })
     ] })
   }
 ), vs = () => x, gs = /* @__PURE__ */ p(vs())({
@@ -772,11 +780,11 @@ const rs = {
   name: "Container",
   class: "calnblm",
   propsAsIs: !1
-}), bs = /* @__PURE__ */ p("div")({
+}), ks = /* @__PURE__ */ p("div")({
   name: "Title",
   class: "t1438p52",
   propsAsIs: !1
-}), ks = /* @__PURE__ */ p("div")({
+}), bs = /* @__PURE__ */ p("div")({
   name: "CloseIconWrap",
   class: "c17srj38",
   propsAsIs: !1
@@ -784,11 +792,11 @@ const rs = {
   name: "CloseIcon",
   class: "clqia8k",
   propsAsIs: !0
-}), Ss = () => x, $s = /* @__PURE__ */ p(Ss())({
+}), Ss = () => x, ws = /* @__PURE__ */ p(Ss())({
   name: "DashboardIcon",
   class: "df5w958",
   propsAsIs: !0
-}), ws = "h12x6aiv", As = ve(({
+}), $s = "h12x6aiv", As = ve(({
   sdk: e,
   className: t
 }, s) => {
@@ -796,20 +804,20 @@ const rs = {
     e.closeFeature();
   };
   return /* @__PURE__ */ v(Ie, {
-    className: $(t, ws),
+    className: w(t, $s),
     children: [/* @__PURE__ */ v(Is, {
-      children: [/* @__PURE__ */ v(bs, {
-        children: [/* @__PURE__ */ n($s, {
+      children: [/* @__PURE__ */ v(ks, {
+        children: [/* @__PURE__ */ o(ws, {
           name: "dashboard"
         }), "Dashboard"]
-      }), /* @__PURE__ */ n(ks, {
+      }), /* @__PURE__ */ o(bs, {
         "data-a": "intr",
         onClick: a,
-        children: /* @__PURE__ */ n(Ns, {
+        children: /* @__PURE__ */ o(Ns, {
           name: "icon-cross"
         })
       })]
-    }), /* @__PURE__ */ n("div", {
+    }), /* @__PURE__ */ o("div", {
       ref: s
     })]
   });
@@ -817,10 +825,10 @@ const rs = {
   sdk: e,
   className: t
 }, s) => {
-  const a = f(e.sdkStore.organizationSettings), o = f(e.sdkStore.streamSettings), r = f(e.getActiveFeature()), d = w(() => {
-    const i = o?.data || a?.data;
+  const a = f(e.sdkStore.organizationSettings), n = f(e.sdkStore.streamSettings), r = f(e.getActiveFeature()), d = $(() => {
+    const i = n?.data || a?.data;
     return i?.overlays ? i.overlays : [];
-  }, [a, o]), l = w(() => [...d.filter(({
+  }, [a, n]), l = $(() => [...d.filter(({
     enableSdkButton: i,
     type: c
   }) => c === y.GAMES || i).map((i) => ({
@@ -828,7 +836,7 @@ const rs = {
     onClick: () => e.openFeature(i.type),
     disabled: !(i.type in rs),
     label: i.name,
-    icon: /* @__PURE__ */ n("img", {
+    icon: /* @__PURE__ */ o("img", {
       src: i.icon,
       alt: ""
     }),
@@ -837,34 +845,34 @@ const rs = {
   }))].sort((i, c) => i.position - c.position), [d, e]);
   return /* @__PURE__ */ v(Ie, {
     className: t,
-    children: [l.length !== 0 && /* @__PURE__ */ n(ce, {
-      children: [/* @__PURE__ */ n(_, {
+    children: [l.length !== 0 && /* @__PURE__ */ o(ce, {
+      children: [/* @__PURE__ */ o(_, {
         id: "Channels",
         onClick: () => e.closeFeature(),
         label: "Channels",
         active: r === 0
-      }, "Channels"), ...l.map((i) => i.id === y.GAMES ? /* @__PURE__ */ n(_, {
+      }, "Channels"), ...l.map((i) => i.id === y.GAMES ? /* @__PURE__ */ o(_, {
         ...i,
         active: i.id === r,
         label: "StreamLayer +",
         id: "featuredGroups",
-        icon: /* @__PURE__ */ n(gs, {
+        icon: /* @__PURE__ */ o(gs, {
           name: "icon-btn-feature-groups",
           "data-selected": i.id === r
         })
-      }, i.id) : /* @__PURE__ */ n(_, {
+      }, i.id) : /* @__PURE__ */ o(_, {
         ...i,
         icon: void 0,
         active: i.id === r
       }, i.id))]
-    }), !l.length && /* @__PURE__ */ n(ce, {
-      children: [/* @__PURE__ */ n(_, {
+    }), !l.length && /* @__PURE__ */ o(ce, {
+      children: [/* @__PURE__ */ o(_, {
         id: "empty",
         label: "No Features...",
         active: !1,
         disabled: !0
       }, "empty")]
-    }), /* @__PURE__ */ n("div", {
+    }), /* @__PURE__ */ o("div", {
       ref: s
     })]
   });
@@ -905,19 +913,19 @@ const rs = {
   class: "a1h1bk90",
   propsAsIs: !1
 }), pe = ({ close: e, action: t, onboarding: s }) => /* @__PURE__ */ v(Es, { children: [
-  /* @__PURE__ */ n(Rs, { "data-a": "intr", onClick: e, children: /* @__PURE__ */ n(Ls, { name: "icon-cross" }) }),
+  /* @__PURE__ */ o(Rs, { "data-a": "intr", onClick: e, children: /* @__PURE__ */ o(Ls, { name: "icon-cross" }) }),
   s?.titleCard?.media?.sponsorLogo && /* @__PURE__ */ v(Ds, { children: [
-    /* @__PURE__ */ n(Ts, { alt: "sponsor-logo", src: s?.titleCard?.media?.sponsorLogo }),
-    /* @__PURE__ */ n(Os, { children: "PRESENTS" })
+    /* @__PURE__ */ o(Ts, { alt: "sponsor-logo", src: s?.titleCard?.media?.sponsorLogo }),
+    /* @__PURE__ */ o(Os, { children: "PRESENTS" })
   ] }),
-  s?.titleCard?.title && /* @__PURE__ */ n(_s, { children: s?.titleCard?.title }),
-  s?.titleCard?.subtitle && /* @__PURE__ */ n(Ms, { children: s?.titleCard?.subtitle }),
-  /* @__PURE__ */ n(Bs, { "data-a": "intr", onClick: t, children: "Play Now" })
-] }), be = [{
+  s?.titleCard?.title && /* @__PURE__ */ o(_s, { children: s?.titleCard?.title }),
+  s?.titleCard?.subtitle && /* @__PURE__ */ o(Ms, { children: s?.titleCard?.subtitle }),
+  /* @__PURE__ */ o(Bs, { "data-a": "intr", onClick: t, children: "Play Now" })
+] }), ke = [{
   graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_1.png",
   tagline: "",
   headline: /* @__PURE__ */ v(R, {
-    children: ["Welcome to ", /* @__PURE__ */ n("br", {}), " Live Challenge"]
+    children: ["Welcome to ", /* @__PURE__ */ o("br", {}), " Live Challenge"]
   })
 }, {
   graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_2.png",
@@ -929,7 +937,7 @@ const rs = {
   name: "OnboardingContainer",
   class: "o1xni1kr",
   propsAsIs: !1
-}), Fs = () => V, Ps = /* @__PURE__ */ p(Fs())({
+}), Ps = () => V, Fs = /* @__PURE__ */ p(Ps())({
   name: "OnboardingNotificationContainer",
   class: "o1vnouv7",
   propsAsIs: !0
@@ -946,19 +954,19 @@ const rs = {
   onboardingOpts: t,
   notification: s,
   gamification: a,
-  loading: o,
+  loading: n,
   sdk: r,
   throttled: d
 }) => {
   const l = f(a.friends ? a.friends.getStore() : he({
     data: []
-  })), [i, c] = N(void 0), u = w(() => {
+  })), [i, c] = N(void 0), u = $(() => {
     const m = r.getInviter();
     return m ? l.data?.find(({
       slId: h
     }) => h === m)?.name : "";
   }, [l.data, r]);
-  return b(() => {
+  return I(() => {
     const m = e.$store.subscribe((h) => {
       h && c(h.data);
     });
@@ -966,8 +974,8 @@ const rs = {
       m();
     };
   }, [e.$store]), /* @__PURE__ */ v(Us, {
-    children: [/* @__PURE__ */ n(Be, {
-      loading: o,
+    children: [/* @__PURE__ */ o(Ue, {
+      loading: n,
       rules: [{
         label: "Answer as many questions as you like.",
         icon: "icon-btn-feature-groups"
@@ -982,7 +990,7 @@ const rs = {
       rulesTitle: t.rules?.heading,
       termsTitle: "Terms and Conditions",
       termsText: t.rules?.terms,
-      steps: be,
+      steps: ke,
       primaryColor: t.inviteCard?.iconColor,
       inviteLink: i,
       inviteCardTitle: t.inviteCard?.heading,
@@ -994,67 +1002,67 @@ const rs = {
       gamification: a,
       sdk: r,
       inviterName: u
-    }), d && /* @__PURE__ */ n(zs, {})]
+    }), d && /* @__PURE__ */ o(zs, {})]
   });
 }, qs = ({
   sdk: e,
   notification: t,
   saveHeight: s,
   style: a,
-  appNode: o,
+  appNode: n,
   sdkInDesktopView: r,
   responsiveStore: d
 }) => {
-  const l = E(null), i = t.data.onboarding, [c, u] = N(i?.instantOpen), m = e.getFeature(y.GAMES), h = w(() => be?.map(({
-    graphicSrc: k
-  }) => k), []), {
+  const l = E(null), i = t.data.onboarding, [c, u] = N(i?.instantOpen), m = e.getFeature(y.GAMES), h = $(() => ke?.map(({
+    graphicSrc: b
+  }) => b), []), {
     screen: g
   } = f(d, {
     keys: ["screen"]
   });
-  je(() => {
+  Qe(() => {
     s(l.current?.getBoundingClientRect().height || 0);
   }, [s]);
   const {
-    loading: I,
+    loading: k,
     throttled: A
-  } = Me(h);
-  return c && m && i && o.current ? /* @__PURE__ */ n(fe, {
-    container: o,
+  } = Be(h);
+  return c && m && i && n.current ? /* @__PURE__ */ o(fe, {
+    container: n,
     useContainer: !r,
-    children: /* @__PURE__ */ n(Vs, {
+    children: /* @__PURE__ */ o(Vs, {
       throttled: A,
       notification: t,
       setOpened: u,
       gamification: m,
       onboardingOpts: i,
       deepLink: m.deepLink,
-      loading: I,
-      renderToNode: o,
+      loading: k,
+      renderToNode: n,
       sdk: e
     })
   }) : /* @__PURE__ */ v(R, {
-    children: [/* @__PURE__ */ n(ue, {
+    children: [/* @__PURE__ */ o(ue, {
       ref: l,
       style: {
         position: "absolute",
         visibility: "hidden"
       },
-      children: /* @__PURE__ */ n(pe, {
+      children: /* @__PURE__ */ o(pe, {
         close: () => {
         },
         action: () => {
         },
         onboarding: i
       })
-    }), /* @__PURE__ */ n(Ps, {
+    }), /* @__PURE__ */ o(Fs, {
       style: a,
       hiding: t.hiding,
-      children: /* @__PURE__ */ n(ue, {
-        children: /* @__PURE__ */ n(pe, {
+      children: /* @__PURE__ */ o(ue, {
+        children: /* @__PURE__ */ o(pe, {
           close: t.close,
           action: () => {
-            u(!0), (o.current?.getBoundingClientRect().y || 0) < 0 && j(o, g.size, {
+            u(!0), (n.current?.getBoundingClientRect().y || 0) < 0 && j(n, g.size, {
               behavior: "smooth"
             });
           },
@@ -1067,24 +1075,24 @@ const rs = {
   name: "Container",
   class: "c8ol1ve",
   propsAsIs: !0
-}), ke = /* @__PURE__ */ p("div")({
+}), be = /* @__PURE__ */ p("div")({
   name: "InnerContainer",
   class: "iqfywam",
   propsAsIs: !1
-}), Ks = () => ke, Ws = /* @__PURE__ */ p(Ks())({
+}), Ks = () => be, Hs = /* @__PURE__ */ p(Ks())({
   name: "HiddenContainer",
   class: "hokmtod",
   propsAsIs: !0
-}), Gs = /* @__PURE__ */ p("div")({
+}), Ws = /* @__PURE__ */ p("div")({
   name: "NotificationRefreshing",
   class: "n192d1q8",
   propsAsIs: !1
-}), Hs = () => Ue, Js = /* @__PURE__ */ p(Hs())({
+}), Gs = () => Pe, Js = /* @__PURE__ */ p(Gs())({
   name: "Pill",
   class: "p1lha68t",
   propsAsIs: !0
 }), Zs = (e) => {
-  const [t, s] = N(0), a = E(null), o = w(() => new ResizeObserver((l) => {
+  const [t, s] = N(0), a = E(null), n = $(() => new ResizeObserver((l) => {
     window.requestAnimationFrame(() => {
       if (Array.isArray(l)) {
         for (const i of l)
@@ -1099,21 +1107,21 @@ const rs = {
   }, []), d = z((l) => {
     s(l);
   }, []);
-  return b(() => {
+  return I(() => {
     const l = a.current;
-    return l ? (o.observe(l), () => {
-      o.unobserve(l);
+    return l ? (n.observe(l), () => {
+      n.unobserve(l);
     }) : () => {
     };
-  }, [e]), b(() => () => {
-    o.disconnect();
+  }, [e]), I(() => () => {
+    n.disconnect();
   }), [r, t, d];
 }, Xs = ({
   sdk: e,
   notification: t,
   appNode: s,
   responsiveStore: a,
-  hasActiveFeature: o
+  hasActiveFeature: n
 }) => {
   const {
     sdkInDesktopView: r
@@ -1123,10 +1131,10 @@ const rs = {
     sdk: d
   } = q(), [l, i, c] = Zs(t.id);
   let u = i;
-  return o || (u = "auto"), t.type === M.QUESTION ? /* @__PURE__ */ v(R, {
-    children: [/* @__PURE__ */ n(Ws, {
+  return n || (u = "auto"), t.type === M.QUESTION ? /* @__PURE__ */ v(R, {
+    children: [/* @__PURE__ */ o(Hs, {
       ref: l,
-      children: /* @__PURE__ */ n(Q, {
+      children: /* @__PURE__ */ o(Q, {
         ...t
       })
     }), /* @__PURE__ */ v(Qs, {
@@ -1134,17 +1142,17 @@ const rs = {
         height: t.hiding ? 0 : u
       },
       hiding: t.hiding,
-      children: [/* @__PURE__ */ n(ke, {
+      children: [/* @__PURE__ */ o(be, {
         style: {
           height: "100%"
         },
-        children: /* @__PURE__ */ n(Q, {
+        children: /* @__PURE__ */ o(Q, {
           ...t,
           controlVideo: d?.controlVideoPlayer
         })
-      }), /* @__PURE__ */ n(Gs, {}, t.id)]
+      }), /* @__PURE__ */ o(Ws, {}, t.id)]
     })]
-  }) : t.type === M.QUESTION_RESOLVED && t.data?.question?.predictionResult ? /* @__PURE__ */ n(Fe, {
+  }) : t.type === M.QUESTION_RESOLVED && t.data?.question?.predictionResult ? /* @__PURE__ */ o(Fe, {
     style: {
       height: t.hiding ? 0 : i
     },
@@ -1152,7 +1160,7 @@ const rs = {
     close: t.close,
     hiding: t.hiding,
     ...t.data.question
-  }) : t.type === M.ONBOARDING ? /* @__PURE__ */ n(qs, {
+  }) : t.type === M.ONBOARDING ? /* @__PURE__ */ o(qs, {
     style: {
       height: t.hiding ? 0 : u
     },
@@ -1168,7 +1176,7 @@ const rs = {
   setPill: t,
   appNode: s,
   headerNode: a,
-  scrollNode: o,
+  scrollNode: n,
   responsiveStore: r,
   scrollStore: d
 }) => {
@@ -1182,34 +1190,34 @@ const rs = {
   } = f(d, {
     keys: ["tabsShown", "scrollPosition"]
   });
-  b(() => {
+  I(() => {
     r.get().sdkInDesktopView ? c < 50 && t(null) : c > -50 && t(null);
   }, [c, r, t]);
   const u = r.get().sdkInDesktopView ? s : a;
-  return !e || !u.current ? null : nt(/* @__PURE__ */ n(Js, {
+  return !e || !u.current ? null : nt(/* @__PURE__ */ o(Js, {
     title: e.type === M.QUESTION_RESOLVED ? "Prediction result" : `New ${st[e.data?.questionType]?.label || "notification"}`,
     "data-a": "intr",
     onClick: () => {
-      r.get().sdkInDesktopView ? o.current?.scrollTo({
+      r.get().sdkInDesktopView ? n.current?.scrollTo({
         top: 0,
         behavior: "smooth"
       }) : j(s, l.size, {
         behavior: "smooth"
       }), t(null);
     },
-    className: $(i && Ys, "sl-pill-button")
+    className: w(i && Ys, "sl-pill-button")
   }), u.current);
 }, tn = ({
   sdk: e,
   headerNode: t,
   scrollNode: s,
   responsiveStore: a,
-  appNode: o,
+  appNode: n,
   scrollStore: r,
   hasActiveFeature: d
 }) => {
-  const [l] = N(e.getNotificationsStore()), i = f(l), [c, u] = N(null), m = w(() => e.getActiveNotification(), [e, i]);
-  return b(() => {
+  const [l] = N(e.getNotificationsStore()), i = f(l), [c, u] = N(null), m = $(() => e.getActiveNotification(), [e, i]);
+  return I(() => {
     m && ot.emit("notification", {
       action: "rendered",
       payload: {
@@ -1217,7 +1225,7 @@ const rs = {
         questionType: m.data.questionType
       }
     });
-  }, [m]), b(() => {
+  }, [m]), I(() => {
     const {
       sdkInDesktopView: h,
       sdkInView: g
@@ -1225,19 +1233,19 @@ const rs = {
     m && (h || g) && (!h && g && u(m), h && window.requestAnimationFrame(() => {
       r.get().scrollPosition !== 0 && u(m);
     }));
-  }, [m]), b(() => {
+  }, [m]), I(() => {
     m || u(null);
   }, [m]), /* @__PURE__ */ v(R, {
-    children: [!c && m && /* @__PURE__ */ n(Xs, {
-      appNode: o,
+    children: [!c && m && /* @__PURE__ */ o(Xs, {
+      appNode: n,
       sdk: e,
       hasActiveFeature: d,
       notification: m,
       responsiveStore: a
-    }), c && /* @__PURE__ */ n(en, {
+    }), c && /* @__PURE__ */ o(en, {
       pill: c,
       setPill: u,
-      appNode: o,
+      appNode: n,
       notification: m,
       headerNode: t,
       scrollNode: s,
@@ -1246,15 +1254,15 @@ const rs = {
     })]
   });
 }, sn = (e) => {
-  const t = f(e.status), s = f(e.sdkStore.slStreamId), a = f(e.userId()), o = f(e.getActiveFeature()), r = t === "ready" && !!s.data;
-  return b(() => {
+  const t = f(e.status), s = f(e.sdkStore.slStreamId), a = f(e.userId()), n = f(e.getActiveFeature()), r = t === "ready" && !!s.data;
+  return I(() => {
     const d = e.getFeature(y.GAMES);
-    d && o !== y.GAMES && (d.closeQuestion(), d.closeUser()), d?.openedQuestionId.subscribe((l) => {
-      l && o !== y.GAMES && e.openFeature(y.GAMES);
+    d && n !== y.GAMES && (d.closeQuestion(), d.closeUser()), d?.openedQuestionId.subscribe((l) => {
+      l && n !== y.GAMES && e.openFeature(y.GAMES);
     });
-  }, [o, e]), {
+  }, [n, e]), {
     sdkReady: r,
-    activeFeature: o,
+    activeFeature: n,
     isLogged: !!a
   };
 }, nn = ({
@@ -1262,13 +1270,13 @@ const rs = {
   className: t,
   scrollStore: s,
   appNode: a,
-  scrollNode: o,
+  scrollNode: n,
   responsiveStore: r
 }) => {
-  const [, d] = Pe(e);
-  return /* @__PURE__ */ n(ts, {
+  const [, d] = ze(e);
+  return /* @__PURE__ */ o(ts, {
     className: t,
-    scrollNode: o,
+    scrollNode: n,
     appNode: a,
     scrollStore: s,
     feature: d,
@@ -1280,17 +1288,17 @@ const rs = {
   muted: t,
   className: s,
   appNode: a,
-  responsiveStore: o
+  responsiveStore: n
 }) => {
   const r = f(e.featuresList.getStore());
   return r ? Array.from(r, (d) => {
     const l = e.getFeature(d);
-    return l ? /* @__PURE__ */ n(ss, {
+    return l ? /* @__PURE__ */ o(ss, {
       className: s,
       muted: t,
       appNode: a,
       feature: l,
-      responsiveStore: o,
+      responsiveStore: n,
       sdk: e
     }, d) : null;
   }) : null;
@@ -1299,42 +1307,42 @@ const rs = {
   muted: t,
   topNavigation: s
 }) => {
-  const [a, o] = N(!0), r = E(null), d = f(e.uiState), l = E(null), [i] = it(r), [c, u] = dt(r, i), {
+  const [a, n] = N(!0), r = E(null), d = f(e.uiState), l = E(null), [i] = it(r), [c, u] = dt(r, i), {
     sdkReady: m,
     activeFeature: h,
     isLogged: g
-  } = sn(e), I = !!m;
-  Ke(r, {
-    enabled: I,
+  } = sn(e), k = !!m;
+  He(r, {
+    enabled: k,
     event: "click",
     listener: We
   });
-  const A = w(() => ({
+  const A = $(() => ({
     sdk: e,
     topNavigation: s
   }), [e, s]);
-  return b(() => {
+  return I(() => {
     import("./gamification-feature.js");
-  }, []), /* @__PURE__ */ n(Je.Provider, {
+  }, []), /* @__PURE__ */ o(Je.Provider, {
     value: A,
-    children: /* @__PURE__ */ v(Le, {
-      ref: (k) => {
-        r.current = k, o(!!k);
+    children: /* @__PURE__ */ v(De, {
+      ref: (b) => {
+        r.current = b, n(!!b);
       },
       className: s ? "" : "c10llmat",
-      children: [I && s && d.app && /* @__PURE__ */ n(Cs, {
-        className: $(O, "sl-hide-on-modal"),
+      children: [k && s && d.app && /* @__PURE__ */ o(Cs, {
+        className: w(O, "sl-hide-on-modal"),
         sdk: e,
         ref: l
-      }), I && !s && !!h && d.app && /* @__PURE__ */ n(As, {
-        className: $(O, "sl-hide-on-modal"),
+      }), k && !s && !!h && d.app && /* @__PURE__ */ o(As, {
+        className: w(O, "sl-hide-on-modal"),
         sdk: e,
         ref: l
-      }), /* @__PURE__ */ v(De, {
+      }), /* @__PURE__ */ v(Te, {
         className: "sl-hide-on-modal",
         ref: c,
-        "data-nav": (!!h && I).toString(),
-        children: [I && d.app && /* @__PURE__ */ n(tn, {
+        "data-nav": (!!h && k).toString(),
+        children: [k && d.app && /* @__PURE__ */ o(tn, {
           sdk: e,
           scrollNode: c,
           headerNode: l,
@@ -1342,21 +1350,21 @@ const rs = {
           scrollStore: u,
           responsiveStore: i,
           hasActiveFeature: !!h
-        }), I && d.app && /* @__PURE__ */ n(nn, {
+        }), k && d.app && /* @__PURE__ */ o(nn, {
           scrollStore: u,
           responsiveStore: i,
           scrollNode: c,
           appNode: r,
           className: O,
           sdk: e
-        }), I && a && /* @__PURE__ */ n(on, {
+        }), k && a && /* @__PURE__ */ o(on, {
           muted: t,
           responsiveStore: i,
           appNode: r,
           className: O,
           sdk: e
         })]
-      }), I && !g && a && d.app && /* @__PURE__ */ n("div", {
+      }), k && !g && a && d.app && /* @__PURE__ */ o("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -1368,13 +1376,13 @@ const rs = {
       })]
     })
   });
-}, On = ({ event: e, topNavigation: t, theme: s, muted: a, withSidebarNotification: o = !0 }) => {
-  const { sdk: r, status: d } = K(G), l = at(), i = rt(), { event: c } = K(G);
-  if (d === H.UNSET)
+}, Tn = ({ event: e, topNavigation: t, theme: s, muted: a, withSidebarNotification: n = !0 }) => {
+  const { sdk: r, status: d } = K(W), l = at(), i = rt(), { event: c } = K(W);
+  if (d === G.UNSET)
     throw new Error("Wrap app in `StreamLayerProvider`");
-  return d === H.CONNECTED ? /* @__PURE__ */ n("div", { className: "StreamLayerSDK", children: "wait" }) : r === null ? /* @__PURE__ */ n("div", { className: "StreamLayerSDK", children: "sdk not initialized" }) : !l.app && !l.appNotification && !l.appSidebar || !l.app && !l.appSidebar && l.appNotification && !o ? null : /* @__PURE__ */ n("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ n(ye, { customTheme: s ?? i.theme, themeMode: i.themeMode, children: /* @__PURE__ */ n(an, { sdk: r, muted: a, event: c?.current || e, topNavigation: t }) }) });
+  return d === G.CONNECTED ? /* @__PURE__ */ o("div", { className: "StreamLayerSDK", children: "wait" }) : r === null ? /* @__PURE__ */ o("div", { className: "StreamLayerSDK", children: "sdk not initialized" }) : !l.app && !l.appNotification && !l.appSidebar || !l.app && !l.appSidebar && l.appNotification && !n ? null : /* @__PURE__ */ o("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ o(ye, { customTheme: s ?? i.theme, themeMode: i.themeMode, children: /* @__PURE__ */ o(an, { sdk: r, muted: a, event: c?.current || e, topNavigation: t }) }) });
 };
 export {
-  Tn as B,
-  On as D
+  Dn as B,
+  Tn as D
 };