@streamlayer/react 1.23.0 → 1.23.2

package/lib/es/index2.js

@@ -1,933 +1,1062 @@
-var Ce = Object.defineProperty;
-var Ee = (e, t, n) => t in e ? Ce(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var k = (e, t, n) => Ee(e, typeof t != "symbol" ? t + "" : t, n);
-import { useState as S, useEffect as y, useRef as L, PureComponent as Re, useCallback as j, lazy as xe, useMemo as C, Suspense as Le, forwardRef as be, useLayoutEffect as Te, useContext as Y } from "react";
-import { c as Z, F as De, z as Oe, Y as X } from "./hooks-B0Qttldg.js";
-import { jsx as i, jsxs as f, Fragment as T } from "react/jsx-runtime";
-import { I as _e, S as N, f as x, h as ee, Q as w } from "./useStreamLayerApp2.js";
-import { h as Me } from "./index7.js";
-import { A as O, u as v, s as u, b as Ue, c as E, a as P } from "./sl-types.js";
-import { l as Be, a as Fe, m as ze, d as Pe, n as Ve, C as qe, S as je, b as Ke, f as W, p as Qe, c as We } from "./index10.js";
-import { M as Ge, a as He, k as Je, z as ke, c as ye, T as Ne, I as Ye, t as Ze, f as Xe, w as te, D as et, p as tt } from "./index15.js";
-import K from "lodash.throttle";
-import { f as Se, a as nt, b as st, A as ot } from "./analytics.js";
-import { m as F } from "./theme.js";
-import { F as it, c as U, e as at } from "./index3.js";
-import "nanostores";
-import { p as G, h as rt, e as lt } from "./Question.js";
-import { y as dt } from "./index9.js";
-import { B as D } from "./index6.js";
-import ct from "react-infinite-scroller";
-import { I as pt, s as ut, e as mt } from "./index11.js";
-import "uuid";
-import "@nanostores/query";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { M as M$1, a as T$1, k, z as z$3, c as createSingleStore, T as T$2, I as I$4, t as tn, f as f$6, w as w$2, D as D$2, p as p$5 } from "./index16.js";
+import { useState, useEffect, useRef, PureComponent, useCallback, lazy, useMemo, Suspense, forwardRef, useLayoutEffect, useContext } from "react";
+import { i as i$7, F as F$2, z as z$4, Y } from "./hooks-WfHlJH12.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { I as InvitationFrom, S as SdkOverlayType, f as Code, i as createContextKey, Q as QuestionType } from "./useStreamLayerApp2.js";
+import { h as h$1 } from "./index8.js";
+import { A as A$2, u as useStore, s as styled_default, b as useTransition, c as cx_default, a as NotificationType } from "./sl-types.js";
+import { l as l$3, a as S$1, m as m$5, d as d$4, n as n$4, C as C$2, S as S$2, b as a$5, f as f$5, p as p$4, c as c$5 } from "./index11.js";
+import i$6 from "lodash.throttle";
+import { f as f$3, a as f$4, b as b$3, A as A$3 } from "./analytics.js";
+import { m as m$6 } from "./theme.js";
+import { F as FeatureStatus, c as createLogger } from "./feature.js";
+import { p as p$3, h as ht, e as e$8 } from "./Question.js";
+import { y as y$1 } from "./index10.js";
+import { B as B1 } from "./index6.js";
+import m$4 from "react-infinite-scroller";
+import { I as I$3, s, e as e$7 } from "./index12.js";
 import "./storage.js";
-import { createPortal as ht } from "react-dom";
+import "./index7.js";
+import { createPortal } from "react-dom";
+import { e as eventBus } from "./index3.js";
 import "./notification.js";
-const ne = Object.keys(O), se = () => {
-  const e = window.innerWidth;
-  let t = "sm";
-  for (let n = ne.length - 1; n > 0; n--) {
-    const o = ne[n];
-    if (!(e < O[o]) && e >= O[o]) {
-      t = o;
+const o$5 = Object.keys(A$2), c$4 = () => {
+  const t2 = window.innerWidth;
+  let e2 = "sm";
+  for (let n2 = o$5.length - 1; n2 > 0; n2--) {
+    const s2 = o$5[n2];
+    if (!(t2 < A$2[s2]) && t2 >= A$2[s2]) {
+      e2 = s2;
       break;
     }
   }
   return {
-    name: t,
-    size: O[t]
+    name: e2,
+    size: A$2[e2]
   };
-}, oe = (e) => {
-  var t;
-  return (((t = e.current) == null ? void 0 : t.getBoundingClientRect().y) || 0) < -68;
-}, V = () => window.matchMedia("(orientation: landscape)").matches, vt = (e) => {
-  const [t] = S(() => Se({
-    screen: se(),
-    sdkInView: oe(e),
-    sdkInDesktopView: V()
+}, d$3 = (t2) => {
+  var e2;
+  return (((e2 = t2.current) == null ? void 0 : e2.getBoundingClientRect().y) || 0) < -68;
+}, w$1 = () => window.matchMedia("(orientation: landscape)").matches, h = (t2) => {
+  const [e2] = useState(() => f$3({
+    screen: c$4(),
+    sdkInView: d$3(t2),
+    sdkInDesktopView: w$1()
   }));
-  return y(() => {
-    const n = K(() => {
-      t.setKey("sdkInView", oe(e));
-    }, 200), o = K(() => {
-      const s = se();
-      t.setKey("screen", s), t.setKey("sdkInDesktopView", V());
+  return useEffect(() => {
+    const n2 = i$6(() => {
+      e2.setKey("sdkInView", d$3(t2));
+    }, 200), s2 = i$6(() => {
+      const k2 = c$4();
+      e2.setKey("screen", k2), e2.setKey("sdkInDesktopView", w$1());
     }, 200);
-    return window.addEventListener("scroll", n), window.addEventListener("resize", o), () => {
-      window.removeEventListener("scroll", n), window.removeEventListener("resize", o);
+    return window.addEventListener("scroll", n2), window.addEventListener("resize", s2), () => {
+      window.removeEventListener("scroll", n2), window.removeEventListener("resize", s2);
     };
-  }, [t, e]), [t];
-}, H = (e, t, n) => {
-  const o = t >= O.lg && t < O.xl ? 75 : 52;
-  e.current && window.scrollTo({
-    top: e.current.offsetTop - o,
-    ...n
+  }, [e2, t2]), [e2];
+};
+const I$2 = (o2, e2, n2) => {
+  const t2 = e2 >= A$2.lg && e2 < A$2.xl ? 75 : 52;
+  o2.current && window.scrollTo({
+    top: o2.current.offsetTop - t2,
+    ...n2
   });
-}, ft = 15, gt = (e, t) => {
-  const n = L(null), o = L(0), [s] = S(
-    Se({
+}, T = 15, L = (o2, e2) => {
+  const n2 = useRef(null), t2 = useRef(0), [s2] = useState(
+    f$3({
       scrollPosition: 0,
-      tabsShown: !0,
+      tabsShown: true,
       scrollDirection: "forward"
     })
-  ), r = v(t);
-  return y(() => {
-    const l = V() ? n.current : window;
-    if (!l)
+  ), d2 = useStore(e2);
+  return useEffect(() => {
+    const c2 = w$1() ? n2.current : window;
+    if (!c2)
       return () => {
       };
-    const d = K((a) => {
-      var c;
-      const m = a.target;
-      if (!m)
+    const l2 = i$6((p2) => {
+      var f2;
+      const i2 = p2.target;
+      if (!i2)
         return;
-      let p = 0;
-      V() ? p = m.scrollTop : p = ((c = e.current) == null ? void 0 : c.getBoundingClientRect().y) || 0;
-      const h = o.current - p;
-      if (ft > Math.abs(h))
+      let r2 = 0;
+      w$1() ? r2 = i2.scrollTop : r2 = ((f2 = o2.current) == null ? void 0 : f2.getBoundingClientRect().y) || 0;
+      const w2 = t2.current - r2;
+      if (T > Math.abs(w2))
         return;
-      const g = o.current < p ? "forward" : "backward";
-      o.current = p, s.set({
-        scrollPosition: Math.round(p),
-        scrollDirection: g,
-        tabsShown: s.get().tabsShown
+      const S2 = t2.current < r2 ? "forward" : "backward";
+      t2.current = r2, s2.set({
+        scrollPosition: Math.round(r2),
+        scrollDirection: S2,
+        tabsShown: s2.get().tabsShown
       });
     }, 200);
-    return l.addEventListener("scroll", d), () => {
-      l.removeEventListener("scroll", d);
+    return c2.addEventListener("scroll", l2), () => {
+      c2.removeEventListener("scroll", l2);
     };
-  }, [s, e, r.screen]), [n, s];
-}, q = /* @__PURE__ */ u("div")({
+  }, [s2, o2, d2.screen]), [n2, s2];
+};
+const o$4 = /* @__PURE__ */ styled_default("div")({
   name: "LoadingContainer",
   class: "lclc0ej",
-  propsAsIs: !1
-}), It = ({
-  feature: e,
-  sdk: t,
-  children: n,
-  className: o,
-  noWait: s
+  propsAsIs: false
+}), v$2 = ({
+  feature: n2,
+  sdk: a2,
+  children: s2,
+  className: r2,
+  noWait: d2
 }) => {
-  const r = v(e.status), l = v(t.sdkStore.slStreamId);
-  if (!s) {
-    if (l != null && l.loading && !l.data)
-      return /* @__PURE__ */ i(q, {
-        className: o,
+  const f2 = useStore(n2.status), t2 = useStore(a2.sdkStore.slStreamId);
+  if (!d2) {
+    if (t2 != null && t2.loading && !t2.data)
+      return /* @__PURE__ */ jsx(o$4, {
+        className: r2,
         children: "Event is loading..."
       });
-    if (!(l != null && l.data))
-      return /* @__PURE__ */ i(q, {
-        className: o,
+    if (!(t2 != null && t2.data))
+      return /* @__PURE__ */ jsx(o$4, {
+        className: r2,
         children: "Event is forbidden..."
       });
-    if (r !== it.Ready)
-      return /* @__PURE__ */ i(q, {
-        className: o,
+    if (f2 !== FeatureStatus.Ready)
+      return /* @__PURE__ */ jsx(o$4, {
+        className: r2,
         children: "Wait feature..."
       });
   }
-  return n;
-}, bt = /* @__PURE__ */ u("div")({
+  return s2;
+};
+const t$3 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "c115qtkr",
-  propsAsIs: !1
-}), kt = /* @__PURE__ */ u("div")({
+  propsAsIs: false
+}), n$3 = /* @__PURE__ */ styled_default("div")({
   name: "STabs",
   class: "sxnslc8",
-  propsAsIs: !1
-}), yt = /* @__PURE__ */ u("button")({
+  propsAsIs: false
+}), o$3 = /* @__PURE__ */ styled_default("button")({
   name: "Button",
   class: "b1umzux0",
-  propsAsIs: !1
-}), Nt = /* @__PURE__ */ u("span")({
+  propsAsIs: false
+}), e$6 = /* @__PURE__ */ styled_default("span")({
   name: "Title",
   class: "tspsaas",
-  propsAsIs: !1
+  propsAsIs: false
 });
-var M = /* @__PURE__ */ ((e) => (e.HOME = "home", e.LEADERBOARD = "leaderboard", e))(M || {});
-const ie = ({ title: e, active: t, onClick: n }) => /* @__PURE__ */ i(yt, { "data-a": "intr", onClick: n, "data-selected": t, children: /* @__PURE__ */ i(Nt, { "data-a": "intr", children: e }) }), St = ({ activePage: e = "home", toggleActivePage: t }) => /* @__PURE__ */ i(bt, { children: /* @__PURE__ */ f(kt, { "data-position": e === "home" ? "left" : "right", children: [
-  /* @__PURE__ */ i(ie, { title: "Home", active: e === "home", onClick: () => t(
+var m$3 = /* @__PURE__ */ ((r2) => (r2.HOME = "home", r2.LEADERBOARD = "leaderboard", r2))(m$3 || {});
+const o$2 = ({ title: r2, active: e2, onClick: n2 }) => /* @__PURE__ */ jsx(o$3, { "data-a": "intr", onClick: n2, "data-selected": e2, children: /* @__PURE__ */ jsx(e$6, { "data-a": "intr", children: r2 }) }), b$2 = ({ activePage: r2 = "home", toggleActivePage: e2 }) => /* @__PURE__ */ jsx(t$3, { children: /* @__PURE__ */ jsxs(n$3, { "data-position": r2 === "home" ? "left" : "right", children: [
+  /* @__PURE__ */ jsx(o$2, { title: "Home", active: r2 === "home", onClick: () => e2(
     "home"
     /* HOME */
   ) }),
-  /* @__PURE__ */ i(
-    ie,
+  /* @__PURE__ */ jsx(
+    o$2,
     {
       title: "Friends",
-      active: e === "leaderboard",
-      onClick: () => t(
+      active: r2 === "leaderboard",
+      onClick: () => e2(
         "leaderboard"
         /* LEADERBOARD */
       )
     }
   )
-] }) }), $t = /* @__PURE__ */ u("div")({
+] }) });
+const r$5 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "c1ux29ft",
-  propsAsIs: !1
-}), At = () => D, wt = /* @__PURE__ */ u(At())({
+  propsAsIs: false
+}), o$1 = () => B1, a$4 = /* @__PURE__ */ styled_default(o$1())({
   name: "FriendsIcon",
   class: "f10ncfg2",
-  propsAsIs: !0
-}), Ct = /* @__PURE__ */ u("div")({
+  propsAsIs: true
+}), p$2 = /* @__PURE__ */ styled_default("div")({
   name: "Content",
   class: "c1yc07bd",
-  propsAsIs: !1
-}), Et = /* @__PURE__ */ u("div")({
+  propsAsIs: false
+}), i$5 = /* @__PURE__ */ styled_default("div")({
   name: "Title",
   class: "tj6cq7w",
-  propsAsIs: !1
-}), Rt = /* @__PURE__ */ u("div")({
+  propsAsIs: false
+}), l$2 = /* @__PURE__ */ styled_default("div")({
   name: "Description",
   class: "d1ag78xo",
-  propsAsIs: !1
-}), xt = () => D, Lt = /* @__PURE__ */ u(xt())({
+  propsAsIs: false
+}), e$5 = () => B1, I$1 = /* @__PURE__ */ styled_default(e$5())({
   name: "ArrowInviteIcon",
   class: "awohrz6",
-  propsAsIs: !0
-}), Tt = ({ title: e, description: t, onClick: n, className: o }) => {
-  const [s] = nt({
+  propsAsIs: true
+});
+const C$1 = ({ title: o2, description: t2, onClick: r2, className: e2 }) => {
+  const [c2] = f$4({
     type: "invitation",
     action: "sent",
     payload: {
-      from: _e.TITLE_CARD
+      from: InvitationFrom.TITLE_CARD
     }
   });
-  return /* @__PURE__ */ f($t, { "data-a": "intr", onClick: s(n), className: o, children: [
-    /* @__PURE__ */ i(wt, { name: "icon-friends" }),
-    /* @__PURE__ */ f(Ct, { children: [
-      /* @__PURE__ */ i(Et, { children: e }),
-      /* @__PURE__ */ i(Rt, { children: t })
+  return /* @__PURE__ */ jsxs(r$5, { "data-a": "intr", onClick: c2(r2), className: e2, children: [
+    /* @__PURE__ */ jsx(a$4, { name: "icon-friends" }),
+    /* @__PURE__ */ jsxs(p$2, { children: [
+      /* @__PURE__ */ jsx(i$5, { children: o2 }),
+      /* @__PURE__ */ jsx(l$2, { children: t2 })
     ] }),
-    /* @__PURE__ */ i(Lt, { name: "icon-copy" })
+    /* @__PURE__ */ jsx(I$1, { name: "icon-copy" })
   ] });
 };
-function Dt(e) {
-  var t = e.lastRenderedStartIndex, n = e.lastRenderedStopIndex, o = e.startIndex, s = e.stopIndex;
-  return !(o > n || s < t);
+function isRangeVisible(_ref) {
+  var lastRenderedStartIndex = _ref.lastRenderedStartIndex, lastRenderedStopIndex = _ref.lastRenderedStopIndex, startIndex = _ref.startIndex, stopIndex = _ref.stopIndex;
+  return !(startIndex > lastRenderedStopIndex || stopIndex < lastRenderedStartIndex);
 }
-function Ot(e) {
-  for (var t = e.isItemLoaded, n = e.itemCount, o = e.minimumBatchSize, s = e.startIndex, r = e.stopIndex, l = [], d = null, a = null, c = s; c <= r; c++) {
-    var m = t(c);
-    m ? a !== null && (l.push(d, a), d = a = null) : (a = c, d === null && (d = c));
+function scanForUnloadedRanges(_ref) {
+  var isItemLoaded = _ref.isItemLoaded, itemCount = _ref.itemCount, minimumBatchSize = _ref.minimumBatchSize, startIndex = _ref.startIndex, stopIndex = _ref.stopIndex;
+  var unloadedRanges = [];
+  var rangeStartIndex = null;
+  var rangeStopIndex = null;
+  for (var _index = startIndex; _index <= stopIndex; _index++) {
+    var loaded = isItemLoaded(_index);
+    if (!loaded) {
+      rangeStopIndex = _index;
+      if (rangeStartIndex === null) {
+        rangeStartIndex = _index;
+      }
+    } else if (rangeStopIndex !== null) {
+      unloadedRanges.push(rangeStartIndex, rangeStopIndex);
+      rangeStartIndex = rangeStopIndex = null;
+    }
   }
-  if (a !== null) {
-    for (var p = Math.min(Math.max(a, d + o - 1), n - 1), h = a + 1; h <= p && !t(h); h++)
-      a = h;
-    l.push(d, a);
+  if (rangeStopIndex !== null) {
+    var potentialStopIndex = Math.min(Math.max(rangeStopIndex, rangeStartIndex + minimumBatchSize - 1), itemCount - 1);
+    for (var _index2 = rangeStopIndex + 1; _index2 <= potentialStopIndex; _index2++) {
+      if (!isItemLoaded(_index2)) {
+        rangeStopIndex = _index2;
+      } else {
+        break;
+      }
+    }
+    unloadedRanges.push(rangeStartIndex, rangeStopIndex);
   }
-  if (l.length)
-    for (; l[1] - l[0] + 1 < o && l[0] > 0; ) {
-      var g = l[0] - 1;
-      if (!t(g))
-        l[0] = g;
-      else
+  if (unloadedRanges.length) {
+    while (unloadedRanges[1] - unloadedRanges[0] + 1 < minimumBatchSize && unloadedRanges[0] > 0) {
+      var _index3 = unloadedRanges[0] - 1;
+      if (!isItemLoaded(_index3)) {
+        unloadedRanges[0] = _index3;
+      } else {
         break;
+      }
     }
-  return l;
+  }
+  return unloadedRanges;
 }
-var _t = function(e, t) {
-  if (!(e instanceof t))
+var classCallCheck = function(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
-}, Mt = /* @__PURE__ */ function() {
-  function e(t, n) {
-    for (var o = 0; o < n.length; o++) {
-      var s = n[o];
-      s.enumerable = s.enumerable || !1, s.configurable = !0, "value" in s && (s.writable = !0), Object.defineProperty(t, s.key, s);
+  }
+};
+var createClass = /* @__PURE__ */ function() {
+  function defineProperties(target, props) {
+    for (var i2 = 0; i2 < props.length; i2++) {
+      var descriptor = props[i2];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
     }
   }
-  return function(t, n, o) {
-    return n && e(t.prototype, n), o && e(t, o), t;
+  return function(Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
   };
-}(), Ut = function(e, t) {
-  if (typeof t != "function" && t !== null)
-    throw new TypeError("Super expression must either be null or a function, not " + typeof t);
-  e.prototype = Object.create(t && t.prototype, {
+}();
+var inherits = function(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+  }
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
     constructor: {
-      value: e,
-      enumerable: !1,
-      writable: !0,
-      configurable: !0
+      value: subClass,
+      enumerable: false,
+      writable: true,
+      configurable: true
     }
-  }), t && (Object.setPrototypeOf ? Object.setPrototypeOf(e, t) : e.__proto__ = t);
-}, ae = function(e, t) {
-  if (!e)
+  });
+  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+};
+var possibleConstructorReturn = function(self, call) {
+  if (!self) {
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  return t && (typeof t == "object" || typeof t == "function") ? t : e;
+  }
+  return call && (typeof call === "object" || typeof call === "function") ? call : self;
 };
-(function(e) {
-  Ut(t, e);
-  function t() {
-    var n, o, s, r;
-    _t(this, t);
-    for (var l = arguments.length, d = Array(l), a = 0; a < l; a++)
-      d[a] = arguments[a];
-    return r = (o = (s = ae(this, (n = t.__proto__ || Object.getPrototypeOf(t)).call.apply(n, [this].concat(d))), s), s._lastRenderedStartIndex = -1, s._lastRenderedStopIndex = -1, s._memoizedUnloadedRanges = [], s._onItemsRendered = function(c) {
-      var m = c.visibleStartIndex, p = c.visibleStopIndex;
-      s._lastRenderedStartIndex = m, s._lastRenderedStopIndex = p, s._ensureRowsLoaded(m, p);
-    }, s._setRef = function(c) {
-      s._listRef = c;
-    }, o), ae(s, r);
+(function(_PureComponent) {
+  inherits(InfiniteLoader2, _PureComponent);
+  function InfiniteLoader2() {
+    var _ref;
+    var _temp, _this, _ret;
+    classCallCheck(this, InfiniteLoader2);
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = InfiniteLoader2.__proto__ || Object.getPrototypeOf(InfiniteLoader2)).call.apply(_ref, [this].concat(args))), _this), _this._lastRenderedStartIndex = -1, _this._lastRenderedStopIndex = -1, _this._memoizedUnloadedRanges = [], _this._onItemsRendered = function(_ref2) {
+      var visibleStartIndex = _ref2.visibleStartIndex, visibleStopIndex = _ref2.visibleStopIndex;
+      _this._lastRenderedStartIndex = visibleStartIndex;
+      _this._lastRenderedStopIndex = visibleStopIndex;
+      _this._ensureRowsLoaded(visibleStartIndex, visibleStopIndex);
+    }, _this._setRef = function(listRef) {
+      _this._listRef = listRef;
+    }, _temp), possibleConstructorReturn(_this, _ret);
   }
-  return Mt(t, [{
+  createClass(InfiniteLoader2, [{
     key: "resetloadMoreItemsCache",
-    value: function() {
-      var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1;
-      this._memoizedUnloadedRanges = [], o && this._ensureRowsLoaded(this._lastRenderedStartIndex, this._lastRenderedStopIndex);
+    value: function resetloadMoreItemsCache() {
+      var autoReload = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+      this._memoizedUnloadedRanges = [];
+      if (autoReload) {
+        this._ensureRowsLoaded(this._lastRenderedStartIndex, this._lastRenderedStopIndex);
+      }
     }
   }, {
     key: "componentDidMount",
-    value: function() {
+    value: function componentDidMount() {
     }
   }, {
     key: "render",
-    value: function() {
-      var o = this.props.children;
-      return o({
+    value: function render() {
+      var children = this.props.children;
+      return children({
         onItemsRendered: this._onItemsRendered,
         ref: this._setRef
       });
     }
   }, {
     key: "_ensureRowsLoaded",
-    value: function(o, s) {
-      var r = this.props, l = r.isItemLoaded, d = r.itemCount, a = r.minimumBatchSize, c = a === void 0 ? 10 : a, m = r.threshold, p = m === void 0 ? 15 : m, h = Ot({
-        isItemLoaded: l,
-        itemCount: d,
-        minimumBatchSize: c,
-        startIndex: Math.max(0, o - p),
-        stopIndex: Math.min(d - 1, s + p)
+    value: function _ensureRowsLoaded(startIndex, stopIndex) {
+      var _props = this.props, isItemLoaded = _props.isItemLoaded, itemCount = _props.itemCount, _props$minimumBatchSi = _props.minimumBatchSize, minimumBatchSize = _props$minimumBatchSi === void 0 ? 10 : _props$minimumBatchSi, _props$threshold = _props.threshold, threshold = _props$threshold === void 0 ? 15 : _props$threshold;
+      var unloadedRanges = scanForUnloadedRanges({
+        isItemLoaded,
+        itemCount,
+        minimumBatchSize,
+        startIndex: Math.max(0, startIndex - threshold),
+        stopIndex: Math.min(itemCount - 1, stopIndex + threshold)
       });
-      (this._memoizedUnloadedRanges.length !== h.length || this._memoizedUnloadedRanges.some(function(g, b) {
-        return h[b] !== g;
-      })) && (this._memoizedUnloadedRanges = h, this._loadUnloadedRanges(h));
+      if (this._memoizedUnloadedRanges.length !== unloadedRanges.length || this._memoizedUnloadedRanges.some(function(startOrStop, index) {
+        return unloadedRanges[index] !== startOrStop;
+      })) {
+        this._memoizedUnloadedRanges = unloadedRanges;
+        this._loadUnloadedRanges(unloadedRanges);
+      }
     }
   }, {
     key: "_loadUnloadedRanges",
-    value: function(o) {
-      for (var s = this, r = this.props.loadMoreItems || this.props.loadMoreRows, l = function(c) {
-        var m = o[c], p = o[c + 1], h = r(m, p);
-        h != null && h.then(function() {
-          if (Dt({
-            lastRenderedStartIndex: s._lastRenderedStartIndex,
-            lastRenderedStopIndex: s._lastRenderedStopIndex,
-            startIndex: m,
-            stopIndex: p
-          })) {
-            if (s._listRef == null)
-              return;
-            typeof s._listRef.resetAfterIndex == "function" ? s._listRef.resetAfterIndex(m, !0) : (typeof s._listRef._getItemStyleCache == "function" && s._listRef._getItemStyleCache(-1), s._listRef.forceUpdate());
-          }
-        });
-      }, d = 0; d < o.length; d += 2)
-        l(d);
+    value: function _loadUnloadedRanges(unloadedRanges) {
+      var _this2 = this;
+      var loadMoreItems = this.props.loadMoreItems || this.props.loadMoreRows;
+      var _loop = function _loop2(i22) {
+        var startIndex = unloadedRanges[i22];
+        var stopIndex = unloadedRanges[i22 + 1];
+        var promise = loadMoreItems(startIndex, stopIndex);
+        if (promise != null) {
+          promise.then(function() {
+            if (isRangeVisible({
+              lastRenderedStartIndex: _this2._lastRenderedStartIndex,
+              lastRenderedStopIndex: _this2._lastRenderedStopIndex,
+              startIndex,
+              stopIndex
+            })) {
+              if (_this2._listRef == null) {
+                return;
+              }
+              if (typeof _this2._listRef.resetAfterIndex === "function") {
+                _this2._listRef.resetAfterIndex(startIndex, true);
+              } else {
+                if (typeof _this2._listRef._getItemStyleCache === "function") {
+                  _this2._listRef._getItemStyleCache(-1);
+                }
+                _this2._listRef.forceUpdate();
+              }
+            }
+          });
+        }
+      };
+      for (var i2 = 0; i2 < unloadedRanges.length; i2 += 2) {
+        _loop(i2);
+      }
     }
-  }]), t;
-})(Re);
-const Bt = /* @__PURE__ */ u("div")({
+  }]);
+  return InfiniteLoader2;
+})(PureComponent);
+const r$4 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "culdu4a",
-  propsAsIs: !1
-}), Ft = /* @__PURE__ */ u("div")({
+  propsAsIs: false
+}), t$2 = /* @__PURE__ */ styled_default("div")({
   name: "Position",
   class: "pwf8e69",
-  propsAsIs: !1
-}), zt = /* @__PURE__ */ u("img")({
+  propsAsIs: false
+}), c$3 = /* @__PURE__ */ styled_default("img")({
   name: "Avatar",
   class: "atf4yh4",
-  propsAsIs: !1
-}), Pt = /* @__PURE__ */ u("div")({
+  propsAsIs: false
+}), p$1 = /* @__PURE__ */ styled_default("div")({
   name: "AvatarPlaceholder",
   class: "a1dg29ja",
-  propsAsIs: !1
-}), Vt = /* @__PURE__ */ u("div")({
+  propsAsIs: false
+}), l$1 = /* @__PURE__ */ styled_default("div")({
   name: "Content",
   class: "c10a68rc",
-  propsAsIs: !1
-}), qt = /* @__PURE__ */ u("div")({
+  propsAsIs: false
+}), m$2 = /* @__PURE__ */ styled_default("div")({
   name: "NameContainer",
   class: "nc4kck5",
-  propsAsIs: !1
-}), jt = /* @__PURE__ */ u("span")({
+  propsAsIs: false
+}), i$4 = /* @__PURE__ */ styled_default("span")({
   name: "Name",
   class: "njsrqgr",
-  propsAsIs: !1
-}), Kt = () => D, Qt = /* @__PURE__ */ u(Kt())({
+  propsAsIs: false
+}), e$4 = () => B1, d$2 = /* @__PURE__ */ styled_default(e$4())({
   name: "CurrentUserBadge",
   class: "c17uc4zr",
-  propsAsIs: !0
-}), Wt = ({
-  friendsRank: e,
-  avatar: t,
-  name: n,
-  userId: o,
-  points: s,
-  isCurrentUser: r,
-  style: l
-}) => /* @__PURE__ */ f(Bt, { "data-name": o, style: l, children: [
-  /* @__PURE__ */ i(Ft, { children: e || 0 }),
-  /* @__PURE__ */ f(Vt, { children: [
-    t ? /* @__PURE__ */ i(zt, { alt: "leaderboard-item-avatar", src: t }) : /* @__PURE__ */ i(Pt, { children: pt(n || "") }),
-    /* @__PURE__ */ f(qt, { children: [
-      /* @__PURE__ */ i(jt, { children: n || "" }),
-      r && /* @__PURE__ */ i(Qt, { name: "icon-star" })
+  propsAsIs: true
+});
+const N$1 = ({
+  friendsRank: i2,
+  avatar: a2,
+  name: t2,
+  userId: n2,
+  points: o2,
+  isCurrentUser: d2,
+  style: m2
+}) => /* @__PURE__ */ jsxs(r$4, { "data-name": n2, style: m2, children: [
+  /* @__PURE__ */ jsx(t$2, { children: i2 || 0 }),
+  /* @__PURE__ */ jsxs(l$1, { children: [
+    a2 ? /* @__PURE__ */ jsx(c$3, { alt: "leaderboard-item-avatar", src: a2 }) : /* @__PURE__ */ jsx(p$1, { children: I$3(t2 || "") }),
+    /* @__PURE__ */ jsxs(m$2, { children: [
+      /* @__PURE__ */ jsx(i$4, { children: t2 || "" }),
+      d2 && /* @__PURE__ */ jsx(d$2, { name: "icon-star" })
     ] })
   ] }),
-  /* @__PURE__ */ i("div", { children: ut(s) })
-] }), Gt = /* @__PURE__ */ u("div")({
+  /* @__PURE__ */ jsx("div", { children: s(o2) })
+] });
+const u$1 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "c16btbfp",
-  propsAsIs: !1
-}), Ht = ({
-  items: e,
-  currentUserId: t,
-  openItemDetail: n,
-  fetchMore: o,
-  scrollNode: s,
-  hasMore: r
+  propsAsIs: false
+}), S = ({
+  items: s2,
+  currentUserId: e2,
+  openItemDetail: o2,
+  fetchMore: n2,
+  scrollNode: i2,
+  hasMore: d2
 }) => {
-  const l = j((d) => {
-    const a = d.target.getAttribute("data-name");
-    a && n(a);
-  }, [n]);
-  return /* @__PURE__ */ i(ct, {
-    loadMore: o,
-    initialLoad: !1,
-    hasMore: r,
-    useWindow: !1,
-    getScrollParent: () => s.current,
-    children: /* @__PURE__ */ i(Gt, {
+  const l2 = useCallback((r2) => {
+    const a2 = r2.target.getAttribute("data-name");
+    a2 && o2(a2);
+  }, [o2]);
+  return /* @__PURE__ */ jsx(m$4, {
+    loadMore: n2,
+    initialLoad: false,
+    hasMore: d2,
+    useWindow: false,
+    getScrollParent: () => i2.current,
+    children: /* @__PURE__ */ jsx(u$1, {
       "data-a": "intr",
-      onClick: l,
-      children: e.map((d) => /* @__PURE__ */ i(Wt, {
-        ...d,
-        isCurrentUser: !!t && t === d.userId
-      }, d.userId))
+      onClick: l2,
+      children: s2.map((r2) => /* @__PURE__ */ jsx(N$1, {
+        ...r2,
+        isCurrentUser: !!e2 && e2 === r2.userId
+      }, r2.userId))
     })
   });
-}, Jt = /* @__PURE__ */ u("div")({
+};
+const r$3 = /* @__PURE__ */ styled_default("div")({
   name: "InviteFriendsContainer",
   class: "i1c9dygq",
-  propsAsIs: !1
-}), Yt = ({
-  deepLink: e
-}) => /* @__PURE__ */ i(Jt, {
-  children: /* @__PURE__ */ i(Ge, {
-    inviteLink: e,
+  propsAsIs: false
+}), a$3 = ({
+  deepLink: i2
+}) => /* @__PURE__ */ jsx(r$3, {
+  children: /* @__PURE__ */ jsx(M$1, {
+    inviteLink: i2,
     inviteCardTitle: "It’s More Fun With Friends",
     inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
   })
-}), Zt = /* @__PURE__ */ u("div")({
+});
+const v$1 = /* @__PURE__ */ styled_default("div")({
   name: "InviteLinkContainer",
   class: "i1odbhm4",
-  propsAsIs: !1
-}), Xt = ({
-  gamification: e,
-  scrollNode: t,
-  scrollStore: n,
-  leaderboardList: o
+  propsAsIs: false
+}), x$3 = ({
+  gamification: r2,
+  scrollNode: t2,
+  scrollStore: o2,
+  leaderboardList: i2
 }) => {
-  const s = L(null), {
-    data: r,
-    hasMore: l,
-    loading: d,
-    key: a
-  } = v(o.$store), {
-    data: c
-  } = v(e.deepLink.$store), [m, p] = He(s);
-  return !r.length && !d ? /* @__PURE__ */ i(Yt, {
-    deepLink: c
-  }) : /* @__PURE__ */ f(T, {
-    children: [/* @__PURE__ */ i(Ht, {
-      items: r,
-      scrollNode: t,
-      scrollStore: n,
-      fetchMore: o.fetchMore,
-      hasMore: l,
-      openItemDetail: e.openUser,
-      currentUserId: e.currentUserId.get()
-    }, a), c && /* @__PURE__ */ i(Zt, {
-      ref: s,
-      children: /* @__PURE__ */ i(Tt, {
+  const s2 = useRef(null), {
+    data: d2,
+    hasMore: m2,
+    loading: a2,
+    key: l2
+  } = useStore(i2.$store), {
+    data: n2
+  } = useStore(r2.deepLink.$store), [c2, f2] = T$1(s2);
+  return !d2.length && !a2 ? /* @__PURE__ */ jsx(a$3, {
+    deepLink: n2
+  }) : /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(S, {
+      items: d2,
+      scrollNode: t2,
+      scrollStore: o2,
+      fetchMore: i2.fetchMore,
+      hasMore: m2,
+      openItemDetail: r2.openUser,
+      currentUserId: r2.currentUserId.get()
+    }, l2), n2 && /* @__PURE__ */ jsx(v$1, {
+      ref: s2,
+      children: /* @__PURE__ */ jsx(C$1, {
         "data-a": "intr",
-        onClick: () => m(c),
+        onClick: () => c2(n2),
         title: "Invite Friends",
         description: "Challenge them now!"
       })
-    }), p]
+    }), f2]
   });
-}, en = ({
-  gamification: e,
-  scrollNode: t,
-  scrollStore: n
-}) => e.leaderboardList ? /* @__PURE__ */ i(Xt, {
-  leaderboardList: e.leaderboardList,
-  gamification: e,
-  scrollNode: t,
-  scrollStore: n
-}) : null, tn = ({ store: e, openQuestion: t }) => {
-  const { sdk: n } = G(), o = v(e);
-  return /* @__PURE__ */ i(Je, { openQuestion: t, questions: o.data, controlVideo: n == null ? void 0 : n.controlVideoPlayer });
-}, nn = ({ userSummary: e }) => {
-  var t;
-  const [n, o] = S(void 0);
-  return y(() => {
-    const s = e.$store.subscribe((r) => {
-      r && o(r);
+}, E = ({
+  gamification: r2,
+  scrollNode: t2,
+  scrollStore: o2
+}) => r2.leaderboardList ? /* @__PURE__ */ jsx(x$3, {
+  leaderboardList: r2.leaderboardList,
+  gamification: r2,
+  scrollNode: t2,
+  scrollStore: o2
+}) : null;
+const a$2 = ({ store: t2, openQuestion: r2 }) => {
+  const { sdk: o2 } = p$3(), e2 = useStore(t2);
+  return /* @__PURE__ */ jsx(k, { openQuestion: r2, questions: e2.data, controlVideo: o2 == null ? void 0 : o2.controlVideoPlayer });
+};
+const b$1 = ({ userSummary: r2 }) => {
+  var e2;
+  const [t2, s2] = useState(void 0);
+  return useEffect(() => {
+    const c2 = r2.$store.subscribe((o2) => {
+      o2 && s2(o2);
     });
     return () => {
-      s();
+      c2();
     };
-  }, [e]), /* @__PURE__ */ i(ke, { loading: !(n != null && n.summary), ...n == null ? void 0 : n.summary, successRate: (t = n == null ? void 0 : n.percentage) == null ? void 0 : t.correct });
-}, sn = ({ gamification: e, className: t, scrollStore: n, scrollNode: o, appNode: s, style: r, responsiveStore: l }) => {
-  const { tabsShown: d } = v(n, { keys: ["tabsShown"] }), a = v(e.friendsTabEnabled), [c, m] = S(M.HOME), [, p] = Ue(), { sdkInDesktopView: h, screen: g } = v(l, { keys: ["sdkInDesktopView"] }), b = (I) => {
-    p(() => {
-      var B;
-      m(I), h === !1 && (((B = s.current) == null ? void 0 : B.getBoundingClientRect().y) || 0) < 0 && H(s, g.size, { behavior: "instant" });
+  }, [r2]), /* @__PURE__ */ jsx(z$3, { loading: !(t2 != null && t2.summary), ...t2 == null ? void 0 : t2.summary, successRate: (e2 = t2 == null ? void 0 : t2.percentage) == null ? void 0 : e2.correct });
+};
+const W = ({ gamification: s2, className: w2, scrollStore: t2, scrollNode: y2, appNode: c2, style: k2, responsiveStore: i2 }) => {
+  const { tabsShown: u2 } = useStore(t2, { keys: ["tabsShown"] }), o2 = useStore(s2.friendsTabEnabled), [a2, h2] = useState(m$3.HOME), [, T2] = useTransition(), { sdkInDesktopView: l2, screen: g2 } = useStore(i2, { keys: ["sdkInDesktopView"] }), x2 = (r2) => {
+    T2(() => {
+      var b2;
+      h2(r2), l2 === false && (((b2 = c2.current) == null ? void 0 : b2.getBoundingClientRect().y) || 0) < 0 && I$2(c2, g2.size, { behavior: "instant" });
     });
   };
-  y(() => n.subscribe((I) => {
-    if (I.scrollPosition === 0) {
-      n.setKey("tabsShown", !0);
+  useEffect(() => t2.subscribe((r2) => {
+    if (r2.scrollPosition === 0) {
+      t2.setKey("tabsShown", true);
       return;
     }
-    l.get().sdkInDesktopView ? n.setKey("tabsShown", I.scrollDirection === "backward") : n.setKey("tabsShown", I.scrollDirection === "forward");
-  }), [n, l]), y(() => {
-    a || m(M.HOME);
-  }, [a]);
-  let $ = "0px";
-  return h ? $ = d ? "0px" : "calc(0px - var(--header-height))" : $ = d ? "var(--header-height)" : "0px", /* @__PURE__ */ f(Be, { className: E(t, "SL-Tabs", "sl-hide-on-modal"), style: r, children: [
-    a && /* @__PURE__ */ i(
-      Fe,
+    i2.get().sdkInDesktopView ? t2.setKey("tabsShown", r2.scrollDirection === "backward") : t2.setKey("tabsShown", r2.scrollDirection === "forward");
+  }), [t2, i2]), useEffect(() => {
+    o2 || h2(m$3.HOME);
+  }, [o2]);
+  let m2 = "0px";
+  return l2 ? m2 = u2 ? "0px" : "calc(0px - var(--header-height))" : m2 = u2 ? "var(--header-height)" : "0px", /* @__PURE__ */ jsxs(l$3, { className: cx_default(w2, "SL-Tabs", "sl-hide-on-modal"), style: k2, children: [
+    o2 && /* @__PURE__ */ jsx(
+      S$1,
       {
         style: {
-          top: $
+          top: m2
         },
-        children: /* @__PURE__ */ i(St, { activePage: c, toggleActivePage: b })
+        children: /* @__PURE__ */ jsx(b$2, { activePage: a2, toggleActivePage: x2 })
       }
     ),
-    c === M.HOME && /* @__PURE__ */ f(T, { children: [
-      /* @__PURE__ */ i(ze, { children: /* @__PURE__ */ i(Pe, { children: /* @__PURE__ */ i(nn, { userSummary: e.userSummary }) }) }),
-      /* @__PURE__ */ i(Ve, { style: { flex: 1 }, children: /* @__PURE__ */ i(tn, { openQuestion: e.openQuestion, store: e.feedList.getStore() }) })
+    a2 === m$3.HOME && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(m$5, { children: /* @__PURE__ */ jsx(d$4, { children: /* @__PURE__ */ jsx(b$1, { userSummary: s2.userSummary }) }) }),
+      /* @__PURE__ */ jsx(n$4, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(a$2, { openQuestion: s2.openQuestion, store: s2.feedList.getStore() }) })
     ] }),
-    c === M.LEADERBOARD && /* @__PURE__ */ i(qe, { children: /* @__PURE__ */ i(en, { scrollStore: n, scrollNode: o, gamification: e }) })
+    a2 === m$3.LEADERBOARD && /* @__PURE__ */ jsx(C$2, { children: /* @__PURE__ */ jsx(E, { scrollStore: t2, scrollNode: y2, gamification: s2 }) })
   ] });
-}, on = () => W, re = /* @__PURE__ */ u(on())({
+};
+const R = () => f$5, u = /* @__PURE__ */ styled_default(R())({
   name: "OpenedContainer",
   class: "ouvguos",
-  propsAsIs: !0
-}), le = "t1eu4lbg", an = /* @__PURE__ */ u("div")({
+  propsAsIs: true
+}), f$2 = "t1eu4lbg", V = /* @__PURE__ */ styled_default("div")({
   name: "UserContainer",
   class: "uuv2xqo",
-  propsAsIs: !1
-}), rn = ({
-  correct: e,
-  incorrect: t
+  propsAsIs: false
+}), j$1 = ({
+  correct: e2,
+  incorrect: t2
 }) => {
-  const n = e + t;
-  return n === 0 ? 0 : Math.round(e / n * 100);
-}, Fs = ({
-  gamification: e,
-  scrollStore: t,
-  className: n,
-  appNode: o,
-  scrollNode: s,
-  responsiveStore: r
-}) => /* @__PURE__ */ i(sn, {
-  appNode: o,
-  scrollStore: t,
-  scrollNode: s,
-  className: n,
-  gamification: e,
-  responsiveStore: r
-}), ln = ({
-  gamification: e,
-  muted: t,
-  sdk: n,
-  className: o,
-  appNode: s,
-  responsiveStore: r
+  const n2 = e2 + t2;
+  return n2 === 0 ? 0 : Math.round(e2 / n2 * 100);
+}, B$2 = ({
+  gamification: e2,
+  scrollStore: t2,
+  className: n2,
+  appNode: r2,
+  scrollNode: p2,
+  responsiveStore: a2
+}) => /* @__PURE__ */ jsx(W, {
+  appNode: r2,
+  scrollStore: t2,
+  scrollNode: p2,
+  className: n2,
+  gamification: e2,
+  responsiveStore: a2
+}), J$2 = ({
+  gamification: e2,
+  muted: t2,
+  sdk: n2,
+  className: r2,
+  appNode: p2,
+  responsiveStore: a2
 }) => {
   const {
-    topNavigation: l
-  } = G(), d = v(e.openedQuestionId), a = v(e.openedQuestion.$store), c = v(e.openedUser || ye(void 0)), {
-    sdkInDesktopView: m
-  } = v(r, {
+    topNavigation: c2
+  } = p$3(), C2 = useStore(e2.openedQuestionId), S2 = useStore(e2.openedQuestion.$store), s2 = useStore(e2.openedUser || createSingleStore(void 0)), {
+    sdkInDesktopView: v2
+  } = useStore(a2, {
     keys: ["sdkInDesktopView"]
   }), {
-    hiding: p,
-    onAnimationEnd: h
-  } = je();
-  if (!d && !c)
+    hiding: m2,
+    onAnimationEnd: d2
+  } = S$2();
+  if (!C2 && !s2)
     return null;
-  const g = a ? /* @__PURE__ */ i(re, {
-    className: E(o, !l && le),
-    hiding: p,
-    onAnimationEnd: h,
-    children: /* @__PURE__ */ i(rt, {
-      muted: t,
-      sdk: n,
-      gamification: e
+  const x2 = S2 ? /* @__PURE__ */ jsx(u, {
+    className: cx_default(r2, !c2 && f$2),
+    hiding: m2,
+    onAnimationEnd: d2,
+    children: /* @__PURE__ */ jsx(ht, {
+      muted: t2,
+      sdk: n2,
+      gamification: e2
     })
-  }) : c ? /* @__PURE__ */ i(re, {
-    className: E(o, !l && le),
-    hiding: p,
-    onAnimationEnd: h,
-    children: /* @__PURE__ */ f(an, {
-      children: [/* @__PURE__ */ i(dt, {
+  }) : s2 ? /* @__PURE__ */ jsx(u, {
+    className: cx_default(r2, !c2 && f$2),
+    hiding: m2,
+    onAnimationEnd: d2,
+    children: /* @__PURE__ */ jsxs(V, {
+      children: [/* @__PURE__ */ jsx(y$1, {
         label: "Friend's Rank",
-        close: e.closeUser
-      }), /* @__PURE__ */ i(Ke, {
-        children: /* @__PURE__ */ i(ke, {
-          ...c,
-          successRate: rn(c)
+        close: e2.closeUser
+      }), /* @__PURE__ */ jsx(a$5, {
+        children: /* @__PURE__ */ jsx(z$3, {
+          ...s2,
+          successRate: j$1(s2)
         })
       })]
     })
   }) : null;
-  return /* @__PURE__ */ i(Ne, {
-    container: s,
-    useContainer: !m,
-    children: g
+  return /* @__PURE__ */ jsx(T$2, {
+    container: p2,
+    useContainer: !v2,
+    children: x2
   });
-}, dn = xe(() => import("./gamification-feature.js")), cn = ({ sdk: e, feature: t, className: n, scrollStore: o, appNode: s, scrollNode: r, responsiveStore: l }) => {
-  const d = C(() => t && t.featureConfig.get().type === N.GAMES ? /* @__PURE__ */ i(It, { className: n, sdk: e, feature: t, children: /* @__PURE__ */ i(
-    dn,
+};
+const d$1 = lazy(() => import("./gamification-feature.js")), x$2 = ({ sdk: i2, feature: t2, className: n2, scrollStore: e2, appNode: o2, scrollNode: a2, responsiveStore: l2 }) => {
+  const u2 = useMemo(() => t2 && t2.featureConfig.get().type === SdkOverlayType.GAMES ? /* @__PURE__ */ jsx(v$2, { className: n2, sdk: i2, feature: t2, children: /* @__PURE__ */ jsx(
+    d$1,
     {
-      appNode: s,
-      scrollStore: o,
-      scrollNode: r,
-      className: n,
-      responsiveStore: l,
-      gamification: t
+      appNode: o2,
+      scrollStore: e2,
+      scrollNode: a2,
+      className: n2,
+      responsiveStore: l2,
+      gamification: t2
     }
-  ) }) : null, [e, t, n, l, o, r, s]);
-  return /* @__PURE__ */ i(
-    Le,
+  ) }) : null, [i2, t2, n2, l2, e2, a2, o2]);
+  return /* @__PURE__ */ jsx(
+    Suspense,
     {
-      fallback: /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
-      children: d
+      fallback: /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
+      children: u2
     }
   );
-}, pn = ({ feature: e, sdk: t, muted: n, className: o, appNode: s, responsiveStore: r }) => e && e.featureConfig.get().type === N.GAMES ? /* @__PURE__ */ i(
-  ln,
+}, A$1 = ({ feature: i2, sdk: t2, muted: n2, className: e2, appNode: o2, responsiveStore: a2 }) => i2 && i2.featureConfig.get().type === SdkOverlayType.GAMES ? /* @__PURE__ */ jsx(
+  J$2,
   {
-    className: o,
-    appNode: s,
-    muted: n,
-    sdk: t,
-    responsiveStore: r,
-    gamification: e
+    className: e2,
+    appNode: o2,
+    muted: n2,
+    sdk: t2,
+    responsiveStore: a2,
+    gamification: i2
   }
 ) : null;
 window.dispatchEvent(new CustomEvent("grpc_devtools_loaded"));
-function un(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
+function isQuotaExceededError(err) {
+  return err instanceof DOMException && // everything except Firefox
+  (err.code === 22 || // Firefox
+  err.code === 1014 || // test name field too, because code might not be present
   // everything except Firefox
-  e.name === "QuotaExceededError" || // Firefox
-  e.name === "NS_ERROR_DOM_QUOTA_REACHED");
+  err.name === "QuotaExceededError" || // Firefox
+  err.name === "NS_ERROR_DOM_QUOTA_REACHED");
 }
-class mn {
-  constructor(t = "main", n = window.localStorage) {
-    k(this, "delimiter", ":");
-    k(this, "prefix");
-    k(this, "storage");
-    k(this, "clear", () => {
-      for (const t in window.localStorage)
-        t.startsWith(this.prefix) && this.storage.removeItem(t);
+class Storage {
+  constructor(prefix = "main", storage = window.localStorage) {
+    __publicField(this, "delimiter", ":");
+    __publicField(this, "prefix");
+    __publicField(this, "storage");
+    __publicField(this, "clear", () => {
+      for (const key in window.localStorage) {
+        if (key.startsWith(this.prefix)) {
+          this.storage.removeItem(key);
+        }
+      }
     });
-    k(this, "generateKey", (t) => `${this.prefix}${this.delimiter}${t.join(this.delimiter)}`);
-    k(this, "write", (...t) => {
-      const n = t.pop() || "", o = this.generateKey(t);
+    __publicField(this, "generateKey", (keyParts) => `${this.prefix}${this.delimiter}${keyParts.join(this.delimiter)}`);
+    __publicField(this, "write", (...keyParts) => {
+      const value = keyParts.pop() || "";
+      const key = this.generateKey(keyParts);
       try {
-        this.storage.setItem(o, n);
-      } catch (s) {
-        un(s) && this.storage === window.sessionStorage && (window.sessionStorage.removeItem("slstreamlogs"), this.storage.setItem(o, n));
+        this.storage.setItem(key, value);
+      } catch (err) {
+        if (isQuotaExceededError(err) && this.storage === window.sessionStorage) {
+          window.sessionStorage.removeItem("slstreamlogs");
+          this.storage.setItem(key, value);
+        }
       }
     });
-    k(this, "read", (...t) => {
-      const n = this.storage.getItem(this.generateKey(t));
-      return n === null ? void 0 : n;
+    __publicField(this, "read", (...keyParts) => {
+      const value = this.storage.getItem(this.generateKey(keyParts));
+      return value === null ? void 0 : value;
     });
-    k(this, "remove", (...t) => {
-      this.storage.removeItem(this.generateKey(t));
+    __publicField(this, "remove", (...keyParts) => {
+      this.storage.removeItem(this.generateKey(keyParts));
     });
-    this.prefix = `sl-sdk${this.delimiter}${t}`, this.storage = n;
+    this.prefix = `sl-sdk${this.delimiter}${prefix}`;
+    this.storage = storage;
   }
 }
-var de;
-(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";
-})(de || (de = {}));
-U("grpc:stream");
-x.Unknown, x.Internal, x.DeadlineExceeded, x.ResourceExhausted, x.FailedPrecondition, x.Unavailable, x.DataLoss;
-U("grpc:retry");
-ee(10, { description: "Number of attempts to retry" }), ee(3e4, { description: "Max delay between retries in milliseconds" });
-var A;
-(function(e) {
-  e.SCHEMA = "schema", e.EXTERNAL_TOKEN = "eToken", e.TOKEN = "token";
-})(A || (A = {}));
-class hn extends mn {
+var ServerStreamSubscriptionStatus;
+(function(ServerStreamSubscriptionStatus2) {
+  ServerStreamSubscriptionStatus2["Init"] = "init";
+  ServerStreamSubscriptionStatus2["Ready"] = "ready";
+  ServerStreamSubscriptionStatus2["Connecting"] = "connecting";
+  ServerStreamSubscriptionStatus2["Connected"] = "connected";
+  ServerStreamSubscriptionStatus2["Disconnected"] = "disconnected";
+  ServerStreamSubscriptionStatus2["Failed"] = "failed";
+  ServerStreamSubscriptionStatus2["Reconnect"] = "reconnect";
+  ServerStreamSubscriptionStatus2["Reconnecting"] = "reconnecting";
+})(ServerStreamSubscriptionStatus || (ServerStreamSubscriptionStatus = {}));
+createLogger("grpc:stream");
+/* @__PURE__ */ new Set([
+  Code.Unknown,
+  Code.Internal,
+  Code.DeadlineExceeded,
+  Code.ResourceExhausted,
+  Code.FailedPrecondition,
+  Code.Unavailable,
+  Code.DataLoss
+]);
+createLogger("grpc:retry");
+({
+  retryAttempts: createContextKey(10, { description: "Number of attempts to retry" }),
+  retryDelay: createContextKey(3e4, { description: "Max delay between retries in milliseconds" })
+});
+var KEY_PREFIX$2;
+(function(KEY_PREFIX2) {
+  KEY_PREFIX2["SCHEMA"] = "schema";
+  KEY_PREFIX2["EXTERNAL_TOKEN"] = "eToken";
+  KEY_PREFIX2["TOKEN"] = "token";
+})(KEY_PREFIX$2 || (KEY_PREFIX$2 = {}));
+class UserStorage extends Storage {
   constructor() {
     super("user");
     // Schema
-    k(this, "setSchema", (n) => {
-      this.write(A.SCHEMA, n);
+    __publicField(this, "setSchema", (value) => {
+      this.write(KEY_PREFIX$2.SCHEMA, value);
+    });
+    __publicField(this, "getSchema", () => {
+      return this.read(KEY_PREFIX$2.SCHEMA);
     });
-    k(this, "getSchema", () => this.read(A.SCHEMA));
     // Token
-    k(this, "setToken", (n) => {
-      this.write(A.TOKEN, n);
+    __publicField(this, "setToken", (value) => {
+      this.write(KEY_PREFIX$2.TOKEN, value);
+    });
+    __publicField(this, "getToken", () => {
+      return this.read(KEY_PREFIX$2.TOKEN);
     });
-    k(this, "getToken", () => this.read(A.TOKEN));
     // External Token
-    k(this, "setExternalToken", (n) => {
-      this.write(A.EXTERNAL_TOKEN, n);
+    __publicField(this, "setExternalToken", (value) => {
+      this.write(KEY_PREFIX$2.EXTERNAL_TOKEN, value);
+    });
+    __publicField(this, "getExternalToken", () => {
+      return this.read(KEY_PREFIX$2.EXTERNAL_TOKEN);
     });
-    k(this, "getExternalToken", () => this.read(A.EXTERNAL_TOKEN));
-    k(this, "removeToken", () => {
-      this.remove(A.TOKEN);
+    __publicField(this, "removeToken", () => {
+      this.remove(KEY_PREFIX$2.TOKEN);
     });
   }
 }
-var ce;
-(function(e) {
-  e.DISABLED = "disabled", e.INITIALIZATION = "initialization", e.READY = "ready", e.FAILED = "failed", e.SUSPENDED = "suspended";
-})(ce || (ce = {}));
-var pe;
-(function(e) {
-  e.SHOWED = "showed", e.EVENT = "ev";
-})(pe || (pe = {}));
-var ue;
-(function(e) {
-  e.ONBOARDING = "onboarding", e.ONBOARDING_IO = "onboarding_io", e.QUESTION_RECEIVED = "q-received", e.QUESTION_OPENED = "q-opened";
-})(ue || (ue = {}));
-var me;
-(function(e) {
-  e.ALLOWED = "allowed", e.DISALLOWED = "disallowed";
-})(me || (me = {}));
-var he;
-(function(e) {
-  e.UNKNOWN = "unknown", e.ALREADY_VOTED = "already_voted";
-})(he || (he = {}));
-U("deep_link");
-U("bypass");
-new hn();
-U("video_player");
-w.FACTOID + "", w.POLL + "", w.TRIVIA + "", w.PREDICTION + "", w.TWEET + "";
-var ve;
-(function(e) {
-  e.Unset = "unset", e.Required = "required", e.Optional = "optional", e.Completed = "completed", e.Disabled = "disabled", e.Unavailable = "unavailable";
-})(ve || (ve = {}));
-w.POLL, w.PREDICTION, w.TRIVIA;
-const vn = {
-  [N.GAMES]: !0
-}, fn = /* @__PURE__ */ u("div")({
+var CoreStatus;
+(function(CoreStatus2) {
+  CoreStatus2["DISABLED"] = "disabled";
+  CoreStatus2["INITIALIZATION"] = "initialization";
+  CoreStatus2["READY"] = "ready";
+  CoreStatus2["FAILED"] = "failed";
+  CoreStatus2["SUSPENDED"] = "suspended";
+})(CoreStatus || (CoreStatus = {}));
+var KEY_PREFIX$1;
+(function(KEY_PREFIX2) {
+  KEY_PREFIX2["SHOWED"] = "showed";
+  KEY_PREFIX2["EVENT"] = "ev";
+})(KEY_PREFIX$1 || (KEY_PREFIX$1 = {}));
+var KEY_PREFIX;
+(function(KEY_PREFIX2) {
+  KEY_PREFIX2["ONBOARDING"] = "onboarding";
+  KEY_PREFIX2["ONBOARDING_IO"] = "onboarding_io";
+  KEY_PREFIX2["QUESTION_RECEIVED"] = "q-received";
+  KEY_PREFIX2["QUESTION_OPENED"] = "q-opened";
+})(KEY_PREFIX || (KEY_PREFIX = {}));
+var InteractiveAllowed;
+(function(InteractiveAllowed2) {
+  InteractiveAllowed2["ALLOWED"] = "allowed";
+  InteractiveAllowed2["DISALLOWED"] = "disallowed";
+})(InteractiveAllowed || (InteractiveAllowed = {}));
+var ERROR;
+(function(ERROR2) {
+  ERROR2["UNKNOWN"] = "unknown";
+  ERROR2["ALREADY_VOTED"] = "already_voted";
+})(ERROR || (ERROR = {}));
+createLogger("deep_link");
+createLogger("bypass");
+new UserStorage();
+createLogger("video_player");
+var OnboardingStatus;
+(function(OnboardingStatus2) {
+  OnboardingStatus2["Unset"] = "unset";
+  OnboardingStatus2["Required"] = "required";
+  OnboardingStatus2["Optional"] = "optional";
+  OnboardingStatus2["Completed"] = "completed";
+  OnboardingStatus2["Disabled"] = "disabled";
+  OnboardingStatus2["Unavailable"] = "unavailable";
+})(OnboardingStatus || (OnboardingStatus = {}));
+/* @__PURE__ */ new Set([QuestionType.POLL, QuestionType.PREDICTION, QuestionType.TRIVIA]);
+const AvailableFeatures = {
+  [SdkOverlayType.GAMES]: true
+};
+const n$2 = /* @__PURE__ */ styled_default("div")({
   name: "Buttons",
   class: "b5o8qbl",
-  propsAsIs: !1
-}), gn = ({
-  children: e,
-  className: t
-}) => /* @__PURE__ */ i(fn, {
-  className: t,
-  children: e
-}), $e = /* @__PURE__ */ u("div")({
+  propsAsIs: false
+}), i$3 = ({
+  children: o2,
+  className: s2
+}) => /* @__PURE__ */ jsx(n$2, {
+  className: s2,
+  children: o2
+});
+const n$1 = /* @__PURE__ */ styled_default("div")({
   name: "Navigation",
   class: "n6tbwuy",
-  propsAsIs: !1
-}), In = () => gn, fe = /* @__PURE__ */ u(In())({
+  propsAsIs: false
+}), t$1 = () => i$3, e$3 = /* @__PURE__ */ styled_default(t$1())({
   name: "NavigationItems",
   class: "n1up4z7v",
-  propsAsIs: !0
-}), bn = /* @__PURE__ */ u("button")({
+  propsAsIs: true
+});
+const o = /* @__PURE__ */ styled_default("button")({
   name: "SButton",
   class: "sxxa0c",
-  propsAsIs: !1
-}), kn = /* @__PURE__ */ u("span")({
+  propsAsIs: false
+}), n = /* @__PURE__ */ styled_default("span")({
   name: "ButtonIcon",
   class: "b193dcyu",
-  propsAsIs: !1
-}), yn = /* @__PURE__ */ u("span")({
+  propsAsIs: false
+}), a$1 = /* @__PURE__ */ styled_default("span")({
   name: "ButtonLabel",
   class: "b40tuix",
-  propsAsIs: !1
-}), Nn = "s14xk0af", Sn = "ha3mg7c", $n = "h103yr45", z = ({ disabled: e, active: t, onClick: n, label: o, icon: s, id: r }) => /* @__PURE__ */ i(
-  bn,
+  propsAsIs: false
+}), e$2 = "s14xk0af", c$2 = "ha3mg7c", r$2 = "h103yr45";
+const i$2 = ({ disabled: n$12, active: r2, onClick: a2, label: c2, icon: o$12, id: t2 }) => /* @__PURE__ */ jsx(
+  o,
   {
-    onClick: n,
+    onClick: a2,
     "data-a": "intr",
-    disabled: e,
-    className: E(
-      t && Nn,
-      !t && (r === "channels" || r === "featuredGroups") && Sn,
-      !t && r === "leaderboard" && $n
+    disabled: n$12,
+    className: cx_default(
+      r2 && e$2,
+      !r2 && (t2 === "channels" || t2 === "featuredGroups") && c$2,
+      !r2 && t2 === "leaderboard" && r$2
     ),
-    children: /* @__PURE__ */ f(T, { children: [
-      s && /* @__PURE__ */ i(kn, { children: s }),
-      /* @__PURE__ */ i(yn, { children: o })
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      o$12 && /* @__PURE__ */ jsx(n, { children: o$12 }),
+      /* @__PURE__ */ jsx(a$1, { children: c2 })
     ] })
   }
-), An = () => D, wn = /* @__PURE__ */ u(An())({
+);
+const g = () => B1, x$1 = /* @__PURE__ */ styled_default(g())({
   name: "ButtonIcon",
   class: "b11wpe79",
-  propsAsIs: !0
-}), Cn = /* @__PURE__ */ u("div")({
+  propsAsIs: true
+}), F$1 = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "calnblm",
-  propsAsIs: !1
-}), En = /* @__PURE__ */ u("div")({
+  propsAsIs: false
+}), D$1 = /* @__PURE__ */ styled_default("div")({
   name: "Title",
   class: "t1438p52",
-  propsAsIs: !1
-}), Rn = /* @__PURE__ */ u("div")({
+  propsAsIs: false
+}), N = /* @__PURE__ */ styled_default("div")({
   name: "CloseIconWrap",
   class: "c17srj38",
-  propsAsIs: !1
-}), xn = () => D, Ln = /* @__PURE__ */ u(xn())({
+  propsAsIs: false
+}), B$1 = () => B1, j = /* @__PURE__ */ styled_default(B$1())({
   name: "CloseIcon",
   class: "clqia8k",
-  propsAsIs: !0
-}), Tn = () => D, Dn = /* @__PURE__ */ u(Tn())({
+  propsAsIs: true
+}), w = () => B1, G$1 = /* @__PURE__ */ styled_default(w())({
   name: "DashboardIcon",
   class: "df5w958",
-  propsAsIs: !0
-}), On = "h12x6aiv", _n = be(({
-  sdk: e,
-  className: t
-}, n) => {
-  const o = () => {
-    e.closeFeature();
+  propsAsIs: true
+}), M = "h12x6aiv", z$2 = forwardRef(({
+  sdk: s2,
+  className: l2
+}, p2) => {
+  const a2 = () => {
+    s2.closeFeature();
   };
-  return /* @__PURE__ */ f($e, {
-    className: E(t, On),
-    children: [/* @__PURE__ */ f(Cn, {
-      children: [/* @__PURE__ */ f(En, {
-        children: [/* @__PURE__ */ i(Dn, {
+  return /* @__PURE__ */ jsxs(n$1, {
+    className: cx_default(l2, M),
+    children: [/* @__PURE__ */ jsxs(F$1, {
+      children: [/* @__PURE__ */ jsxs(D$1, {
+        children: [/* @__PURE__ */ jsx(G$1, {
           name: "dashboard"
         }), "Dashboard"]
-      }), /* @__PURE__ */ i(Rn, {
+      }), /* @__PURE__ */ jsx(N, {
         "data-a": "intr",
-        onClick: o,
-        children: /* @__PURE__ */ i(Ln, {
+        onClick: a2,
+        children: /* @__PURE__ */ jsx(j, {
           name: "icon-cross"
         })
       })]
-    }), /* @__PURE__ */ i("div", {
-      ref: n
+    }), /* @__PURE__ */ jsx("div", {
+      ref: p2
     })]
   });
-}), Mn = be(({
-  sdk: e,
-  className: t
-}, n) => {
-  const o = v(e.sdkStore.organizationSettings), s = v(e.sdkStore.streamSettings), r = v(e.getActiveFeature()), l = C(() => {
-    const a = (s == null ? void 0 : s.data) || (o == null ? void 0 : o.data);
-    return a != null && a.overlays ? a.overlays : [];
-  }, [o, s]), d = C(() => [...l.filter(({
-    enableSdkButton: a,
-    type: c
-  }) => c === N.GAMES || a).map((a) => ({
-    id: a.type,
-    onClick: () => e.openFeature(a.type),
-    disabled: !(a.type in vn),
-    label: a.name,
-    icon: /* @__PURE__ */ i("img", {
-      src: a.icon,
+}), J$1 = forwardRef(({
+  sdk: s2,
+  className: l2
+}, p2) => {
+  const a2 = useStore(s2.sdkStore.organizationSettings), r2 = useStore(s2.sdkStore.streamSettings), i2 = useStore(s2.getActiveFeature()), f2 = useMemo(() => {
+    const o2 = (r2 == null ? void 0 : r2.data) || (a2 == null ? void 0 : a2.data);
+    return o2 != null && o2.overlays ? o2.overlays : [];
+  }, [a2, r2]), d2 = useMemo(() => [...f2.filter(({
+    enableSdkButton: o2,
+    type: m2
+  }) => m2 === SdkOverlayType.GAMES || o2).map((o2) => ({
+    id: o2.type,
+    onClick: () => s2.openFeature(o2.type),
+    disabled: !(o2.type in AvailableFeatures),
+    label: o2.name,
+    icon: /* @__PURE__ */ jsx("img", {
+      src: o2.icon,
       alt: ""
     }),
     /** multiplied by 10 to add the ability to insert custom buttons between our buttons */
-    position: a.position * 10
-  }))].sort((a, c) => a.position - c.position), [l, e]);
-  return /* @__PURE__ */ f($e, {
-    className: t,
-    children: [d.length !== 0 && /* @__PURE__ */ i(fe, {
-      children: [/* @__PURE__ */ i(z, {
+    position: o2.position * 10
+  }))].sort((o2, m2) => o2.position - m2.position), [f2, s2]);
+  return /* @__PURE__ */ jsxs(n$1, {
+    className: l2,
+    children: [d2.length !== 0 && /* @__PURE__ */ jsx(e$3, {
+      children: [/* @__PURE__ */ jsx(i$2, {
         id: "Channels",
-        onClick: () => e.closeFeature(),
+        onClick: () => s2.closeFeature(),
         label: "Channels",
-        active: r === 0
-      }, "Channels"), ...d.map((a) => a.id === N.GAMES ? /* @__PURE__ */ i(z, {
-        ...a,
-        active: a.id === r,
+        active: i2 === 0
+      }, "Channels"), ...d2.map((o2) => o2.id === SdkOverlayType.GAMES ? /* @__PURE__ */ jsx(i$2, {
+        ...o2,
+        active: o2.id === i2,
         label: "StreamLayer +",
         id: "featuredGroups",
-        icon: /* @__PURE__ */ i(wn, {
+        icon: /* @__PURE__ */ jsx(x$1, {
           name: "icon-btn-feature-groups",
-          "data-selected": a.id === r
+          "data-selected": o2.id === i2
         })
-      }, a.id) : /* @__PURE__ */ i(z, {
-        ...a,
+      }, o2.id) : /* @__PURE__ */ jsx(i$2, {
+        ...o2,
         icon: void 0,
-        active: a.id === r
-      }, a.id))]
-    }), !d.length && /* @__PURE__ */ i(fe, {
-      children: [/* @__PURE__ */ i(z, {
+        active: o2.id === i2
+      }, o2.id))]
+    }), !d2.length && /* @__PURE__ */ jsx(e$3, {
+      children: [/* @__PURE__ */ jsx(i$2, {
         id: "empty",
         label: "No Features...",
-        active: !1,
-        disabled: !0
+        active: false,
+        disabled: true
       }, "empty")]
-    }), /* @__PURE__ */ i("div", {
-      ref: n
+    }), /* @__PURE__ */ jsx("div", {
+      ref: p2
     })]
   });
-}), Un = /* @__PURE__ */ u("div")({
+});
+const a = /* @__PURE__ */ styled_default("div")({
   name: "Container",
   class: "c1qjj4d4",
-  propsAsIs: !1
-}), Bn = /* @__PURE__ */ u("div")({
+  propsAsIs: false
+}), c$1 = /* @__PURE__ */ styled_default("div")({
   name: "CloseIconWrap",
   class: "c1lg6b8a",
-  propsAsIs: !1
-}), Fn = () => D, zn = /* @__PURE__ */ u(Fn())({
+  propsAsIs: false
+}), e$1 = () => B1, l = /* @__PURE__ */ styled_default(e$1())({
   name: "CloseIcon",
   class: "c159el66",
-  propsAsIs: !0
-}), Pn = /* @__PURE__ */ u("div")({
+  propsAsIs: true
+}), p = /* @__PURE__ */ styled_default("div")({
   name: "Title",
   class: "t16xmufv",
-  propsAsIs: !1
-}), Vn = /* @__PURE__ */ u("img")({
+  propsAsIs: false
+}), i$1 = /* @__PURE__ */ styled_default("img")({
   name: "SponsorLogo",
   class: "s83lc21",
-  propsAsIs: !1
-}), qn = /* @__PURE__ */ u("div")({
+  propsAsIs: false
+}), r$1 = /* @__PURE__ */ styled_default("div")({
   name: "PresentsTitle",
   class: "p1p7igia",
-  propsAsIs: !1
-}), jn = /* @__PURE__ */ u("div")({
+  propsAsIs: false
+}), m$1 = /* @__PURE__ */ styled_default("div")({
   name: "Subtitle",
   class: "s1eftsbu",
-  propsAsIs: !1
-}), Kn = /* @__PURE__ */ u("div")({
+  propsAsIs: false
+}), I = /* @__PURE__ */ styled_default("div")({
   name: "Description",
   class: "d8uezec",
-  propsAsIs: !1
-}), Qn = /* @__PURE__ */ u("button")({
+  propsAsIs: false
+}), f$1 = /* @__PURE__ */ styled_default("button")({
   name: "ActionButton",
   class: "a1h1bk90",
-  propsAsIs: !1
-}), ge = ({ close: e, action: t, onboarding: n }) => {
-  var o, s, r, l, d, a, c, m;
-  return /* @__PURE__ */ f(Un, { children: [
-    /* @__PURE__ */ i(Bn, { "data-a": "intr", onClick: e, children: /* @__PURE__ */ i(zn, { name: "icon-cross" }) }),
-    ((s = (o = n == null ? void 0 : n.titleCard) == null ? void 0 : o.media) == null ? void 0 : s.sponsorLogo) && /* @__PURE__ */ f(Pn, { children: [
-      /* @__PURE__ */ i(Vn, { alt: "sponsor-logo", src: (l = (r = n == null ? void 0 : n.titleCard) == null ? void 0 : r.media) == null ? void 0 : l.sponsorLogo }),
-      /* @__PURE__ */ i(qn, { children: "PRESENTS" })
+  propsAsIs: false
+});
+const y = ({ close: r2, action: S2, onboarding: t2 }) => {
+  var l$12, s2, c2, C2, p$12, h2, m2, i2;
+  return /* @__PURE__ */ jsxs(a, { children: [
+    /* @__PURE__ */ jsx(c$1, { "data-a": "intr", onClick: r2, children: /* @__PURE__ */ jsx(l, { name: "icon-cross" }) }),
+    ((s2 = (l$12 = t2 == null ? void 0 : t2.titleCard) == null ? void 0 : l$12.media) == null ? void 0 : s2.sponsorLogo) && /* @__PURE__ */ jsxs(p, { children: [
+      /* @__PURE__ */ jsx(i$1, { alt: "sponsor-logo", src: (C2 = (c2 = t2 == null ? void 0 : t2.titleCard) == null ? void 0 : c2.media) == null ? void 0 : C2.sponsorLogo }),
+      /* @__PURE__ */ jsx(r$1, { children: "PRESENTS" })
     ] }),
-    ((d = n == null ? void 0 : n.titleCard) == null ? void 0 : d.title) && /* @__PURE__ */ i(jn, { children: (a = n == null ? void 0 : n.titleCard) == null ? void 0 : a.title }),
-    ((c = n == null ? void 0 : n.titleCard) == null ? void 0 : c.subtitle) && /* @__PURE__ */ i(Kn, { children: (m = n == null ? void 0 : n.titleCard) == null ? void 0 : m.subtitle }),
-    /* @__PURE__ */ i(Qn, { "data-a": "intr", onClick: t, children: "Play Now" })
+    ((p$12 = t2 == null ? void 0 : t2.titleCard) == null ? void 0 : p$12.title) && /* @__PURE__ */ jsx(m$1, { children: (h2 = t2 == null ? void 0 : t2.titleCard) == null ? void 0 : h2.title }),
+    ((m2 = t2 == null ? void 0 : t2.titleCard) == null ? void 0 : m2.subtitle) && /* @__PURE__ */ jsx(I, { children: (i2 = t2 == null ? void 0 : t2.titleCard) == null ? void 0 : i2.subtitle }),
+    /* @__PURE__ */ jsx(f$1, { "data-a": "intr", onClick: S2, children: "Play Now" })
   ] });
-}, Q = [{
+};
+const C = [{
   graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_1.png",
   tagline: "",
-  headline: /* @__PURE__ */ f(T, {
-    children: ["Welcome to ", /* @__PURE__ */ i("br", {}), " Live Challenge"]
+  headline: /* @__PURE__ */ jsxs(Fragment, {
+    children: ["Welcome to ", /* @__PURE__ */ jsx("br", {}), " Live Challenge"]
   })
 }, {
   graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_2.png",
@@ -935,51 +1064,51 @@ const vn = {
 }, {
   graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_3.png",
   headline: "Win points and play against friends."
-}], Wn = /* @__PURE__ */ u("div")({
+}], z$1 = /* @__PURE__ */ styled_default("div")({
   name: "OnboardingContainer",
   class: "o1xni1kr",
-  propsAsIs: !1
-}), Gn = () => W, Hn = /* @__PURE__ */ u(Gn())({
+  propsAsIs: false
+}), D = () => f$5, G = /* @__PURE__ */ styled_default(D())({
   name: "OnboardingNotificationContainer",
   class: "o1vnouv7",
-  propsAsIs: !0
-}), Ie = /* @__PURE__ */ u("div")({
+  propsAsIs: true
+}), x = /* @__PURE__ */ styled_default("div")({
   name: "InnerContainer",
   class: "i59uefw",
-  propsAsIs: !1
-}), Jn = /* @__PURE__ */ u("div")({
+  propsAsIs: false
+}), U$1 = /* @__PURE__ */ styled_default("div")({
   name: "OnboardingOverlap",
   class: "ovnr8ov",
-  propsAsIs: !1
-}), Yn = ({
-  deepLink: e,
-  onboardingOpts: t,
-  notification: n,
-  gamification: o,
-  loading: s,
-  sdk: r,
-  throttled: l
+  propsAsIs: false
+}), J = ({
+  deepLink: l2,
+  onboardingOpts: e2,
+  notification: o2,
+  gamification: d2,
+  loading: s2,
+  sdk: c2,
+  throttled: I2
 }) => {
-  var d, a, c, m, p, h, g;
-  const b = v(o.friends ? o.friends.getStore() : ye({
+  var a2, b2, h2, f2, v2, t2, m2;
+  const u2 = useStore(d2.friends ? d2.friends.getStore() : createSingleStore({
     data: []
-  })), [$, I] = S(void 0), B = C(() => {
-    var R, _;
-    const J = r.getInviter();
-    return J ? (_ = (R = b.data) == null ? void 0 : R.find(({
-      slId: we
-    }) => we === J)) == null ? void 0 : _.name : "";
-  }, [b.data, r]);
-  return y(() => {
-    const R = e.$store.subscribe((_) => {
-      _ && I(_.data);
+  })), [r2, S2] = useState(void 0), g2 = useMemo(() => {
+    var p2, w2;
+    const i2 = c2.getInviter();
+    return i2 ? (w2 = (p2 = u2.data) == null ? void 0 : p2.find(({
+      slId: B2
+    }) => B2 === i2)) == null ? void 0 : w2.name : "";
+  }, [u2.data, c2]);
+  return useEffect(() => {
+    const i2 = l2.$store.subscribe((p2) => {
+      p2 && S2(p2.data);
     });
     return () => {
-      R();
+      i2();
     };
-  }, [e.$store]), /* @__PURE__ */ f(Wn, {
-    children: [/* @__PURE__ */ i(Ze, {
-      loading: s,
+  }, [l2.$store]), /* @__PURE__ */ jsxs(z$1, {
+    children: [/* @__PURE__ */ jsx(tn, {
+      loading: s2,
       rules: [{
         label: "Answer as many questions as you like.",
         icon: "icon-btn-feature-groups"
@@ -990,392 +1119,396 @@ const vn = {
         label: "Top the leader board and best your friends.",
         icon: "icon-trophy"
       }],
-      rulesBtnLabel: (d = t.rules) == null ? void 0 : d.buttonLabel,
-      rulesTitle: (a = t.rules) == null ? void 0 : a.heading,
+      rulesBtnLabel: (a2 = e2.rules) == null ? void 0 : a2.buttonLabel,
+      rulesTitle: (b2 = e2.rules) == null ? void 0 : b2.heading,
       termsTitle: "Terms and Conditions",
-      termsText: (c = t.rules) == null ? void 0 : c.terms,
-      steps: Q,
-      primaryColor: (m = t.inviteCard) == null ? void 0 : m.iconColor,
-      inviteLink: $,
-      inviteCardTitle: (p = t.inviteCard) == null ? void 0 : p.heading,
-      inviteCardSubtext: (h = t.inviteCard) == null ? void 0 : h.subtext,
-      inviteCardBtnLabel: (g = t.inviteCard) == null ? void 0 : g.buttonLabel,
+      termsText: (h2 = e2.rules) == null ? void 0 : h2.terms,
+      steps: C,
+      primaryColor: (f2 = e2.inviteCard) == null ? void 0 : f2.iconColor,
+      inviteLink: r2,
+      inviteCardTitle: (v2 = e2.inviteCard) == null ? void 0 : v2.heading,
+      inviteCardSubtext: (t2 = e2.inviteCard) == null ? void 0 : t2.subtext,
+      inviteCardBtnLabel: (m2 = e2.inviteCard) == null ? void 0 : m2.buttonLabel,
       onClose: () => {
-        var R;
-        (R = n.close) == null || R.call(n);
+        var i2;
+        (i2 = o2.close) == null || i2.call(o2);
       },
-      gamification: o,
-      sdk: r,
-      inviterName: B
-    }), l && /* @__PURE__ */ i(Jn, {})]
+      gamification: d2,
+      sdk: c2,
+      inviterName: g2
+    }), I2 && /* @__PURE__ */ jsx(U$1, {})]
   });
-}, Zn = ({
-  sdk: e,
-  notification: t,
-  saveHeight: n,
-  style: o,
-  appNode: s,
-  sdkInDesktopView: r,
-  responsiveStore: l
+}, ie = ({
+  sdk: l2,
+  notification: e2,
+  saveHeight: o2,
+  style: d2,
+  appNode: s2,
+  sdkInDesktopView: c2,
+  responsiveStore: I2
 }) => {
-  const d = L(null), a = t.data.onboarding, [c, m] = S(a == null ? void 0 : a.instantOpen), p = e.getFeature(N.GAMES), h = C(() => Q == null ? void 0 : Q.map(({
-    graphicSrc: I
-  }) => I), []), {
-    screen: g
-  } = v(l, {
+  const u2 = useRef(null), r2 = e2.data.onboarding, [S2, g2] = useState(r2 == null ? void 0 : r2.instantOpen), a2 = l2.getFeature(SdkOverlayType.GAMES), b2 = useMemo(() => C == null ? void 0 : C.map(({
+    graphicSrc: t2
+  }) => t2), []), {
+    screen: h2
+  } = useStore(I2, {
     keys: ["screen"]
   });
-  Te(() => {
-    var I;
-    n(((I = d.current) == null ? void 0 : I.getBoundingClientRect().height) || 0);
-  }, [n]);
+  useLayoutEffect(() => {
+    var t2;
+    o2(((t2 = u2.current) == null ? void 0 : t2.getBoundingClientRect().height) || 0);
+  }, [o2]);
   const {
-    loading: b,
-    throttled: $
-  } = Ye(h);
-  return c && p && a && s.current ? /* @__PURE__ */ i(Ne, {
-    container: s,
-    useContainer: !r,
-    children: /* @__PURE__ */ i(Yn, {
-      throttled: $,
-      notification: t,
-      setOpened: m,
-      gamification: p,
-      onboardingOpts: a,
-      deepLink: p.deepLink,
-      loading: b,
-      renderToNode: s,
-      sdk: e
+    loading: f2,
+    throttled: v2
+  } = I$4(b2);
+  return S2 && a2 && r2 && s2.current ? /* @__PURE__ */ jsx(T$2, {
+    container: s2,
+    useContainer: !c2,
+    children: /* @__PURE__ */ jsx(J, {
+      throttled: v2,
+      notification: e2,
+      setOpened: g2,
+      gamification: a2,
+      onboardingOpts: r2,
+      deepLink: a2.deepLink,
+      loading: f2,
+      renderToNode: s2,
+      sdk: l2
     })
-  }) : /* @__PURE__ */ f(T, {
-    children: [/* @__PURE__ */ i(Ie, {
-      ref: d,
+  }) : /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(x, {
+      ref: u2,
       style: {
         position: "absolute",
         visibility: "hidden"
       },
-      children: /* @__PURE__ */ i(ge, {
+      children: /* @__PURE__ */ jsx(y, {
         close: () => {
         },
         action: () => {
         },
-        onboarding: a
+        onboarding: r2
       })
-    }), /* @__PURE__ */ i(Hn, {
-      style: o,
-      hiding: t.hiding,
-      children: /* @__PURE__ */ i(Ie, {
-        children: /* @__PURE__ */ i(ge, {
-          close: t.close,
+    }), /* @__PURE__ */ jsx(G, {
+      style: d2,
+      hiding: e2.hiding,
+      children: /* @__PURE__ */ jsx(x, {
+        children: /* @__PURE__ */ jsx(y, {
+          close: e2.close,
           action: () => {
-            var I;
-            m(!0), (((I = s.current) == null ? void 0 : I.getBoundingClientRect().y) || 0) < 0 && H(s, g.size, {
+            var m2;
+            g2(true), (((m2 = s2.current) == null ? void 0 : m2.getBoundingClientRect().y) || 0) < 0 && I$2(s2, h2.size, {
               behavior: "smooth"
             });
           },
-          onboarding: a
+          onboarding: r2
         })
       })
     })]
   });
-}, Xn = () => W, es = /* @__PURE__ */ u(Xn())({
+};
+const e = () => f$5, c = /* @__PURE__ */ styled_default(e())({
   name: "Container",
   class: "c8ol1ve",
-  propsAsIs: !0
-}), Ae = /* @__PURE__ */ u("div")({
+  propsAsIs: true
+}), t = /* @__PURE__ */ styled_default("div")({
   name: "InnerContainer",
   class: "iqfywam",
-  propsAsIs: !1
-}), ts = () => Ae, ns = /* @__PURE__ */ u(ts())({
+  propsAsIs: false
+}), i = () => t, m = /* @__PURE__ */ styled_default(i())({
   name: "HiddenContainer",
   class: "hokmtod",
-  propsAsIs: !0
-}), ss = /* @__PURE__ */ u("div")({
+  propsAsIs: true
+}), f = /* @__PURE__ */ styled_default("div")({
   name: "NotificationRefreshing",
   class: "n192d1q8",
-  propsAsIs: !1
-}), os = () => Xe, is = /* @__PURE__ */ u(os())({
+  propsAsIs: false
+}), r = () => f$6, d = /* @__PURE__ */ styled_default(r())({
   name: "Pill",
   class: "p1lha68t",
-  propsAsIs: !0
-}), as = (e) => {
-  const [t, n] = S(0), o = L(null), s = C(() => new ResizeObserver((d) => {
+  propsAsIs: true
+});
+const v = (r2) => {
+  const [e2, d2] = useState(0), i2 = useRef(null), l2 = useMemo(() => new ResizeObserver((n2) => {
     window.requestAnimationFrame(() => {
-      var a;
-      if (Array.isArray(d)) {
-        for (const c of d)
-          if (c.contentBoxSize) {
-            const m = (a = o.current) == null ? void 0 : a.getBoundingClientRect();
-            m && n(m.height);
+      var f2;
+      if (Array.isArray(n2)) {
+        for (const c2 of n2)
+          if (c2.contentBoxSize) {
+            const o2 = (f2 = i2.current) == null ? void 0 : f2.getBoundingClientRect();
+            o2 && d2(o2.height);
           }
       }
     });
-  }), []), r = j((d) => {
-    o.current = d;
-  }, []), l = j((d) => {
-    n(d);
+  }), []), s2 = useCallback((n2) => {
+    i2.current = n2;
+  }, []), a2 = useCallback((n2) => {
+    d2(n2);
   }, []);
-  return y(() => {
-    const d = o.current;
-    return d ? (s.observe(d), () => {
-      s.unobserve(d);
+  return useEffect(() => {
+    const n2 = i2.current;
+    return n2 ? (l2.observe(n2), () => {
+      l2.unobserve(n2);
     }) : () => {
     };
-  }, [e]), y(() => () => {
-    s.disconnect();
-  }), [r, t, l];
-}, rs = ({
-  sdk: e,
-  notification: t,
-  appNode: n,
-  responsiveStore: o,
-  hasActiveFeature: s
+  }, [r2]), useEffect(() => () => {
+    l2.disconnect();
+  }), [s2, e2, a2];
+}, Q = ({
+  sdk: r2,
+  notification: e2,
+  appNode: d2,
+  responsiveStore: i2,
+  hasActiveFeature: l2
 }) => {
-  var r, l;
+  var t$12, m$12;
   const {
-    sdkInDesktopView: d
-  } = v(o, {
+    sdkInDesktopView: s2
+  } = useStore(i2, {
     keys: ["sdkInDesktopView"]
   }), {
-    sdk: a
-  } = G(), [c, m, p] = as(t.id);
-  let h = m;
-  return s || (h = "auto"), t.type === P.QUESTION ? /* @__PURE__ */ f(T, {
-    children: [/* @__PURE__ */ i(ns, {
-      ref: c,
-      children: /* @__PURE__ */ i(te, {
-        ...t
+    sdk: a2
+  } = p$3(), [n2, f$12, c$12] = v(e2.id);
+  let o2 = f$12;
+  return l2 || (o2 = "auto"), e2.type === NotificationType.QUESTION ? /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(m, {
+      ref: n2,
+      children: /* @__PURE__ */ jsx(w$2, {
+        ...e2
       })
-    }), /* @__PURE__ */ f(es, {
+    }), /* @__PURE__ */ jsxs(c, {
       style: {
-        height: t.hiding ? 0 : h
+        height: e2.hiding ? 0 : o2
       },
-      hiding: t.hiding,
-      children: [/* @__PURE__ */ i(Ae, {
+      hiding: e2.hiding,
+      children: [/* @__PURE__ */ jsx(t, {
         style: {
           height: "100%"
         },
-        children: /* @__PURE__ */ i(te, {
-          ...t,
-          controlVideo: a == null ? void 0 : a.controlVideoPlayer
+        children: /* @__PURE__ */ jsx(w$2, {
+          ...e2,
+          controlVideo: a2 == null ? void 0 : a2.controlVideoPlayer
         })
-      }), /* @__PURE__ */ i(ss, {}, t.id)]
+      }), /* @__PURE__ */ jsx(f, {}, e2.id)]
     })]
-  }) : t.type === P.QUESTION_RESOLVED && (l = (r = t.data) == null ? void 0 : r.question) != null && l.predictionResult ? /* @__PURE__ */ i(et, {
+  }) : e2.type === NotificationType.QUESTION_RESOLVED && ((m$12 = (t$12 = e2.data) == null ? void 0 : t$12.question) != null && m$12.predictionResult) ? /* @__PURE__ */ jsx(D$2, {
     style: {
-      height: t.hiding ? 0 : m
+      height: e2.hiding ? 0 : f$12
     },
-    saveHeight: p,
-    close: t.close,
-    hiding: t.hiding,
-    ...t.data.question
-  }) : t.type === P.ONBOARDING ? /* @__PURE__ */ i(Zn, {
+    saveHeight: c$12,
+    close: e2.close,
+    hiding: e2.hiding,
+    ...e2.data.question
+  }) : e2.type === NotificationType.ONBOARDING ? /* @__PURE__ */ jsx(ie, {
     style: {
-      height: t.hiding ? 0 : h
+      height: e2.hiding ? 0 : o2
     },
-    saveHeight: p,
-    sdk: e,
-    notification: t,
-    sdkInDesktopView: d,
-    appNode: n,
-    responsiveStore: o
+    saveHeight: c$12,
+    sdk: r2,
+    notification: e2,
+    sdkInDesktopView: s2,
+    appNode: d2,
+    responsiveStore: i2
   }) : null;
-}, ls = "p7vfi6t", ds = ({
-  pill: e,
-  setPill: t,
-  appNode: n,
-  headerNode: o,
-  scrollNode: s,
-  responsiveStore: r,
-  scrollStore: l
+}, F = "p7vfi6t", U = ({
+  pill: r2,
+  setPill: e2,
+  appNode: d$12,
+  headerNode: i2,
+  scrollNode: l2,
+  responsiveStore: s2,
+  scrollStore: a2
 }) => {
-  var d, a;
+  var t2, m2;
   const {
-    screen: c
-  } = v(r, {
+    screen: n2
+  } = useStore(s2, {
     keys: ["screen"]
   }), {
-    tabsShown: m,
-    scrollPosition: p
-  } = v(l, {
+    tabsShown: f2,
+    scrollPosition: c2
+  } = useStore(a2, {
     keys: ["tabsShown", "scrollPosition"]
   });
-  y(() => {
-    r.get().sdkInDesktopView ? p < 50 && t(null) : p > -50 && t(null);
-  }, [p, r, t]);
-  const h = r.get().sdkInDesktopView ? n : o;
-  return !e || !h.current ? null : ht(/* @__PURE__ */ i(is, {
-    title: e.type === P.QUESTION_RESOLVED ? "Prediction result" : `New ${((a = mt[(d = e.data) == null ? void 0 : d.questionType]) == null ? void 0 : a.label) || "notification"}`,
+  useEffect(() => {
+    s2.get().sdkInDesktopView ? c2 < 50 && e2(null) : c2 > -50 && e2(null);
+  }, [c2, s2, e2]);
+  const o2 = s2.get().sdkInDesktopView ? d$12 : i2;
+  return !r2 || !o2.current ? null : createPortal(/* @__PURE__ */ jsx(d, {
+    title: r2.type === NotificationType.QUESTION_RESOLVED ? "Prediction result" : `New ${((m2 = e$7[(t2 = r2.data) == null ? void 0 : t2.questionType]) == null ? void 0 : m2.label) || "notification"}`,
     "data-a": "intr",
     onClick: () => {
-      var g;
-      r.get().sdkInDesktopView ? (g = s.current) == null || g.scrollTo({
+      var g2;
+      s2.get().sdkInDesktopView ? (g2 = l2.current) == null || g2.scrollTo({
         top: 0,
         behavior: "smooth"
-      }) : H(n, c.size, {
+      }) : I$2(d$12, n2.size, {
         behavior: "smooth"
-      }), t(null);
+      }), e2(null);
     },
-    className: E(m && ls, "sl-pill-button")
-  }), h.current);
-}, cs = ({
-  sdk: e,
-  headerNode: t,
-  scrollNode: n,
-  responsiveStore: o,
-  appNode: s,
-  scrollStore: r,
-  hasActiveFeature: l
+    className: cx_default(f2 && F, "sl-pill-button")
+  }), o2.current);
+}, ne = ({
+  sdk: r2,
+  headerNode: e2,
+  scrollNode: d2,
+  responsiveStore: i2,
+  appNode: l2,
+  scrollStore: s2,
+  hasActiveFeature: a2
 }) => {
-  const [d] = S(e.getNotificationsStore()), a = v(d), [c, m] = S(null), p = C(() => e.getActiveNotification(), [e, a]);
-  return y(() => {
-    p && at.emit("notification", {
+  const [n2] = useState(r2.getNotificationsStore()), f2 = useStore(n2), [c2, o2] = useState(null), t2 = useMemo(() => r2.getActiveNotification(), [r2, f2]);
+  return useEffect(() => {
+    t2 && eventBus.emit("notification", {
       action: "rendered",
       payload: {
-        questionId: p.data.questionId,
-        questionType: p.data.questionType
+        questionId: t2.data.questionId,
+        questionType: t2.data.questionType
       }
     });
-  }, [p]), y(() => {
+  }, [t2]), useEffect(() => {
     const {
-      sdkInDesktopView: h,
-      sdkInView: g
-    } = o.get();
-    p && (h || g) && (!h && g && m(p), h && window.requestAnimationFrame(() => {
-      r.get().scrollPosition !== 0 && m(p);
+      sdkInDesktopView: m2,
+      sdkInView: g2
+    } = i2.get();
+    t2 && (m2 || g2) && (!m2 && g2 && o2(t2), m2 && window.requestAnimationFrame(() => {
+      s2.get().scrollPosition !== 0 && o2(t2);
     }));
-  }, [p]), y(() => {
-    p || m(null);
-  }, [p]), /* @__PURE__ */ f(T, {
-    children: [!c && p && /* @__PURE__ */ i(rs, {
-      appNode: s,
-      sdk: e,
-      hasActiveFeature: l,
-      notification: p,
-      responsiveStore: o
-    }), c && /* @__PURE__ */ i(ds, {
-      pill: c,
-      setPill: m,
-      appNode: s,
-      notification: p,
-      headerNode: t,
-      scrollNode: n,
-      scrollStore: r,
-      responsiveStore: o
+  }, [t2]), useEffect(() => {
+    t2 || o2(null);
+  }, [t2]), /* @__PURE__ */ jsxs(Fragment, {
+    children: [!c2 && t2 && /* @__PURE__ */ jsx(Q, {
+      appNode: l2,
+      sdk: r2,
+      hasActiveFeature: a2,
+      notification: t2,
+      responsiveStore: i2
+    }), c2 && /* @__PURE__ */ jsx(U, {
+      pill: c2,
+      setPill: o2,
+      appNode: l2,
+      notification: t2,
+      headerNode: e2,
+      scrollNode: d2,
+      scrollStore: s2,
+      responsiveStore: i2
     })]
   });
-}, ps = (e) => {
-  const t = v(e.status), n = v(e.sdkStore.slStreamId), o = v(e.userId()), s = v(e.getActiveFeature()), r = t === "ready" && !!n.data;
-  return y(() => {
-    const l = e.getFeature(N.GAMES);
-    l && s !== N.GAMES && (l.closeQuestion(), l.closeUser()), l == null || l.openedQuestionId.subscribe((d) => {
-      d && s !== N.GAMES && e.openFeature(N.GAMES);
+};
+const A = (e2) => {
+  const u2 = useStore(e2.status), a2 = useStore(e2.sdkStore.slStreamId), c2 = useStore(e2.userId()), r2 = useStore(e2.getActiveFeature()), n2 = u2 === "ready" && !!a2.data;
+  return useEffect(() => {
+    const t2 = e2.getFeature(SdkOverlayType.GAMES);
+    t2 && r2 !== SdkOverlayType.GAMES && (t2.closeQuestion(), t2.closeUser()), t2 == null || t2.openedQuestionId.subscribe((p2) => {
+      p2 && r2 !== SdkOverlayType.GAMES && e2.openFeature(SdkOverlayType.GAMES);
     });
-  }, [s, e]), {
-    sdkReady: r,
-    activeFeature: s,
-    isLogged: !!o
+  }, [r2, e2]), {
+    sdkReady: n2,
+    activeFeature: r2,
+    isLogged: !!c2
   };
-}, us = ({
-  sdk: e,
-  className: t,
-  scrollStore: n,
-  appNode: o,
-  scrollNode: s,
-  responsiveStore: r
+};
+const z = ({
+  sdk: e2,
+  className: l2,
+  scrollStore: o2,
+  appNode: a2,
+  scrollNode: m2,
+  responsiveStore: r2
 }) => {
-  const [, l] = tt(e);
-  return /* @__PURE__ */ i(cn, {
-    className: t,
-    scrollNode: s,
-    appNode: o,
-    scrollStore: n,
-    feature: l,
-    responsiveStore: r,
-    sdk: e
+  const [, t2] = p$5(e2);
+  return /* @__PURE__ */ jsx(x$2, {
+    className: l2,
+    scrollNode: m2,
+    appNode: a2,
+    scrollStore: o2,
+    feature: t2,
+    responsiveStore: r2,
+    sdk: e2
   });
-}, ms = ({
-  sdk: e,
-  muted: t,
-  className: n,
-  appNode: o,
-  responsiveStore: s
+}, B = ({
+  sdk: e2,
+  muted: l2,
+  className: o2,
+  appNode: a2,
+  responsiveStore: m2
 }) => {
-  const r = v(e.featuresList.getStore());
-  return r ? Array.from(r, (l) => {
-    const d = e.getFeature(l);
-    return d ? /* @__PURE__ */ i(pn, {
-      className: n,
-      muted: t,
-      appNode: o,
-      feature: d,
-      responsiveStore: s,
-      sdk: e
-    }, l) : null;
+  const r2 = useStore(e2.featuresList.getStore());
+  return r2 ? Array.from(r2, (t2) => {
+    const i2 = e2.getFeature(t2);
+    return i2 ? /* @__PURE__ */ jsx(A$1, {
+      className: o2,
+      muted: l2,
+      appNode: a2,
+      feature: i2,
+      responsiveStore: m2,
+      sdk: e2
+    }, t2) : null;
   }) : null;
-}, hs = ({
-  sdk: e,
-  muted: t,
-  topNavigation: n
+}, oe = ({
+  sdk: e2,
+  muted: l2,
+  topNavigation: o2
 }) => {
-  const [o, s] = S(!0), r = L(null), l = v(e.uiState), d = L(null), [a] = vt(r), [c, m] = gt(r, a), {
-    sdkReady: p,
-    activeFeature: h,
-    isLogged: g
-  } = ps(e), b = !!p;
-  st(r, {
-    enabled: b,
+  const [a2, m2] = useState(true), r2 = useRef(null), t2 = useStore(e2.uiState), i2 = useRef(null), [c2] = h(r2), [p2, d2] = L(r2, c2), {
+    sdkReady: x2,
+    activeFeature: f2,
+    isLogged: N2
+  } = A(e2), s2 = !!x2;
+  b$3(r2, {
+    enabled: s2,
     event: "click",
-    listener: ot
+    listener: A$3
   });
-  const $ = C(() => ({
-    sdk: e,
-    topNavigation: n
-  }), [e, n]);
-  return y(() => {
+  const g2 = useMemo(() => ({
+    sdk: e2,
+    topNavigation: o2
+  }), [e2, o2]);
+  return useEffect(() => {
     import("./gamification-feature.js");
-  }, []), /* @__PURE__ */ i(lt.Provider, {
-    value: $,
-    children: /* @__PURE__ */ f(Qe, {
-      ref: (I) => {
-        r.current = I, s(!!I);
+  }, []), /* @__PURE__ */ jsx(e$8.Provider, {
+    value: g2,
+    children: /* @__PURE__ */ jsxs(p$4, {
+      ref: (S2) => {
+        r2.current = S2, m2(!!S2);
       },
-      className: n ? "" : "c10llmat",
-      children: [b && n && l.app && /* @__PURE__ */ i(Mn, {
-        className: E(F, "sl-hide-on-modal"),
-        sdk: e,
-        ref: d
-      }), b && !n && !!h && l.app && /* @__PURE__ */ i(_n, {
-        className: E(F, "sl-hide-on-modal"),
-        sdk: e,
-        ref: d
-      }), /* @__PURE__ */ f(We, {
+      className: o2 ? "" : "c10llmat",
+      children: [s2 && o2 && t2.app && /* @__PURE__ */ jsx(J$1, {
+        className: cx_default(m$6, "sl-hide-on-modal"),
+        sdk: e2,
+        ref: i2
+      }), s2 && !o2 && !!f2 && t2.app && /* @__PURE__ */ jsx(z$2, {
+        className: cx_default(m$6, "sl-hide-on-modal"),
+        sdk: e2,
+        ref: i2
+      }), /* @__PURE__ */ jsxs(c$5, {
         className: "sl-hide-on-modal",
-        ref: c,
-        "data-nav": (!!h && b).toString(),
-        children: [b && l.app && /* @__PURE__ */ i(cs, {
-          sdk: e,
-          scrollNode: c,
-          headerNode: d,
-          appNode: r,
-          scrollStore: m,
-          responsiveStore: a,
-          hasActiveFeature: !!h
-        }), b && l.app && /* @__PURE__ */ i(us, {
-          scrollStore: m,
-          responsiveStore: a,
-          scrollNode: c,
-          appNode: r,
-          className: F,
-          sdk: e
-        }), b && o && /* @__PURE__ */ i(ms, {
-          muted: t,
-          responsiveStore: a,
-          appNode: r,
-          className: F,
-          sdk: e
+        ref: p2,
+        "data-nav": (!!f2 && s2).toString(),
+        children: [s2 && t2.app && /* @__PURE__ */ jsx(ne, {
+          sdk: e2,
+          scrollNode: p2,
+          headerNode: i2,
+          appNode: r2,
+          scrollStore: d2,
+          responsiveStore: c2,
+          hasActiveFeature: !!f2
+        }), s2 && t2.app && /* @__PURE__ */ jsx(z, {
+          scrollStore: d2,
+          responsiveStore: c2,
+          scrollNode: p2,
+          appNode: r2,
+          className: m$6,
+          sdk: e2
+        }), s2 && a2 && /* @__PURE__ */ jsx(B, {
+          muted: l2,
+          responsiveStore: c2,
+          appNode: r2,
+          className: m$6,
+          sdk: e2
         })]
-      }), b && !g && o && l.app && /* @__PURE__ */ i("div", {
+      }), s2 && !N2 && a2 && t2.app && /* @__PURE__ */ jsx("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -1387,13 +1520,14 @@ const vn = {
       })]
     })
   });
-}, zs = ({ event: e, topNavigation: t, theme: n, muted: o, withSidebarNotification: s = !0 }) => {
-  const { sdk: r, status: l } = Y(Z), d = De(), a = Oe(), { event: c } = Y(Z);
-  if (l === X.UNSET)
+};
+const b = ({ event: p2, topNavigation: S2, theme: c2, muted: u2, withSidebarNotification: d2 = true }) => {
+  const { sdk: t2, status: i2 } = useContext(i$7), e2 = F$2(), m2 = z$4(), { event: a2 } = useContext(i$7);
+  if (i2 === Y.UNSET)
     throw new Error("Wrap app in `StreamLayerProvider`");
-  return l === X.CONNECTED ? /* @__PURE__ */ i("div", { className: "StreamLayerSDK", children: "wait" }) : r === null ? /* @__PURE__ */ i("div", { className: "StreamLayerSDK", children: "sdk not initialized" }) : !d.app && !d.appNotification && !d.appSidebar || !d.app && !d.appSidebar && d.appNotification && !s ? null : /* @__PURE__ */ i("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ i(Me, { customTheme: n ?? a.theme, themeMode: a.themeMode, children: /* @__PURE__ */ i(hs, { sdk: r, muted: o, event: (c == null ? void 0 : c.current) || e, topNavigation: t }) }) });
+  return i2 === Y.CONNECTED ? /* @__PURE__ */ jsx("div", { className: "StreamLayerSDK", children: "wait" }) : t2 === null ? /* @__PURE__ */ jsx("div", { className: "StreamLayerSDK", children: "sdk not initialized" }) : !e2.app && !e2.appNotification && !e2.appSidebar || !e2.app && !e2.appSidebar && e2.appNotification && !d2 ? null : /* @__PURE__ */ jsx("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ jsx(h$1, { customTheme: c2 ?? m2.theme, themeMode: m2.themeMode, children: /* @__PURE__ */ jsx(oe, { sdk: t2, muted: u2, event: (a2 == null ? void 0 : a2.current) || p2, topNavigation: S2 }) }) });
 };
 export {
-  Fs as B,
-  zs as b
+  B$2 as B,
+  b
 };