@streamlayer/react 1.23.2 → 1.24.0

package/lib/es/index2.js

@@ -1,1062 +1,923 @@
-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 { 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 { A as L } from "./index9.js";
+import { f as ge, u as Qe, A as Ke, 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 { 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 Ye from "react-infinite-scroller";
+import { I as et, s as tt, e as st } from "./index11.js";
+import "uuid";
+import "@nanostores/query";
 import "./storage.js";
-import "./index7.js";
-import { createPortal } from "react-dom";
-import { e as eventBus } from "./index3.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 "./notification.js";
-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;
+const J = Object.keys(L), Z = () => {
+  const e = window.innerWidth;
+  let t = "sm";
+  for (let s = J.length - 1; s > 0; s--) {
+    const a = J[s];
+    if (!(e < L[a]) && e >= L[a]) {
+      t = a;
       break;
     }
   }
   return {
-    name: e2,
-    size: A$2[e2]
+    name: t,
+    size: L[t]
   };
-}, 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()
+}, X = (e) => (e.current?.getBoundingClientRect().y || 0) < -68, B = () => window.matchMedia("(orientation: landscape)").matches, it = (e) => {
+  const [t] = N(() => ge({
+    screen: Z(),
+    sdkInView: X(e),
+    sdkInDesktopView: B()
   }));
-  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());
+  return b(() => {
+    const s = P(() => {
+      t.setKey("sdkInView", X(e));
+    }, 200), a = P(() => {
+      const o = Z();
+      t.setKey("screen", o), t.setKey("sdkInDesktopView", B());
     }, 200);
-    return window.addEventListener("scroll", n2), window.addEventListener("resize", s2), () => {
-      window.removeEventListener("scroll", n2), window.removeEventListener("resize", s2);
+    return window.addEventListener("scroll", s), window.addEventListener("resize", a), () => {
+      window.removeEventListener("scroll", s), window.removeEventListener("resize", a);
     };
-  }, [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
+  }, [t, e]), [t];
+}, j = (e, t, s) => {
+  const a = t >= L.lg && t < L.xl ? 75 : 52;
+  e.current && window.scrollTo({
+    top: e.current.offsetTop - a,
+    ...s
   });
-}, T = 15, L = (o2, e2) => {
-  const n2 = useRef(null), t2 = useRef(0), [s2] = useState(
-    f$3({
+}, lt = 15, dt = (e, t) => {
+  const s = E(null), a = E(0), [o] = N(
+    ge({
       scrollPosition: 0,
-      tabsShown: true,
+      tabsShown: !0,
       scrollDirection: "forward"
     })
-  ), d2 = useStore(e2);
-  return useEffect(() => {
-    const c2 = w$1() ? n2.current : window;
-    if (!c2)
+  ), r = f(t);
+  return b(() => {
+    const d = B() ? s.current : window;
+    if (!d)
       return () => {
       };
-    const l2 = i$6((p2) => {
-      var f2;
-      const i2 = p2.target;
-      if (!i2)
+    const l = P((i) => {
+      const c = i.target;
+      if (!c)
         return;
-      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))
+      let u = 0;
+      B() ? u = c.scrollTop : u = e.current?.getBoundingClientRect().y || 0;
+      const m = a.current - u;
+      if (lt > Math.abs(m))
         return;
-      const S2 = t2.current < r2 ? "forward" : "backward";
-      t2.current = r2, s2.set({
-        scrollPosition: Math.round(r2),
-        scrollDirection: S2,
-        tabsShown: s2.get().tabsShown
+      const h = a.current < u ? "forward" : "backward";
+      a.current = u, o.set({
+        scrollPosition: Math.round(u),
+        scrollDirection: h,
+        tabsShown: o.get().tabsShown
       });
     }, 200);
-    return c2.addEventListener("scroll", l2), () => {
-      c2.removeEventListener("scroll", l2);
+    return d.addEventListener("scroll", l), () => {
+      d.removeEventListener("scroll", l);
     };
-  }, [s2, o2, d2.screen]), [n2, s2];
-};
-const o$4 = /* @__PURE__ */ styled_default("div")({
+  }, [o, e, r.screen]), [s, o];
+}, F = /* @__PURE__ */ p("div")({
   name: "LoadingContainer",
   class: "lclc0ej",
-  propsAsIs: false
-}), v$2 = ({
-  feature: n2,
-  sdk: a2,
-  children: s2,
-  className: r2,
-  noWait: d2
+  propsAsIs: !1
+}), ct = ({
+  feature: e,
+  sdk: t,
+  children: s,
+  className: a,
+  noWait: 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,
+  const r = f(e.status), d = f(t.sdkStore.slStreamId);
+  if (!o) {
+    if (d?.loading && !d.data)
+      return /* @__PURE__ */ n(F, {
+        className: a,
         children: "Event is loading..."
       });
-    if (!(t2 != null && t2.data))
-      return /* @__PURE__ */ jsx(o$4, {
-        className: r2,
+    if (!d?.data)
+      return /* @__PURE__ */ n(F, {
+        className: a,
         children: "Event is forbidden..."
       });
-    if (f2 !== FeatureStatus.Ready)
-      return /* @__PURE__ */ jsx(o$4, {
-        className: r2,
+    if (r !== Ge.Ready)
+      return /* @__PURE__ */ n(F, {
+        className: a,
         children: "Wait feature..."
       });
   }
-  return s2;
-};
-const t$3 = /* @__PURE__ */ styled_default("div")({
+  return s;
+}, pt = /* @__PURE__ */ p("div")({
   name: "Container",
   class: "c115qtkr",
-  propsAsIs: false
-}), n$3 = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), ut = /* @__PURE__ */ p("div")({
   name: "STabs",
   class: "sxnslc8",
-  propsAsIs: false
-}), o$3 = /* @__PURE__ */ styled_default("button")({
+  propsAsIs: !1
+}), mt = /* @__PURE__ */ p("button")({
   name: "Button",
   class: "b1umzux0",
-  propsAsIs: false
-}), e$6 = /* @__PURE__ */ styled_default("span")({
+  propsAsIs: !1
+}), ht = /* @__PURE__ */ p("span")({
   name: "Title",
   class: "tspsaas",
-  propsAsIs: false
+  propsAsIs: !1
 });
-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(
+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(
     "home"
     /* HOME */
   ) }),
-  /* @__PURE__ */ jsx(
-    o$2,
+  /* @__PURE__ */ n(
+    Y,
     {
       title: "Friends",
-      active: r2 === "leaderboard",
-      onClick: () => e2(
+      active: e === "leaderboard",
+      onClick: () => t(
         "leaderboard"
         /* LEADERBOARD */
       )
     }
   )
-] }) });
-const r$5 = /* @__PURE__ */ styled_default("div")({
+] }) }), vt = /* @__PURE__ */ p("div")({
   name: "Container",
   class: "c1ux29ft",
-  propsAsIs: false
-}), o$1 = () => B1, a$4 = /* @__PURE__ */ styled_default(o$1())({
+  propsAsIs: !1
+}), gt = () => x, It = /* @__PURE__ */ p(gt())({
   name: "FriendsIcon",
   class: "f10ncfg2",
-  propsAsIs: true
-}), p$2 = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !0
+}), bt = /* @__PURE__ */ p("div")({
   name: "Content",
   class: "c1yc07bd",
-  propsAsIs: false
-}), i$5 = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), kt = /* @__PURE__ */ p("div")({
   name: "Title",
   class: "tj6cq7w",
-  propsAsIs: false
-}), l$2 = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), yt = /* @__PURE__ */ p("div")({
   name: "Description",
   class: "d1ag78xo",
-  propsAsIs: false
-}), e$5 = () => B1, I$1 = /* @__PURE__ */ styled_default(e$5())({
+  propsAsIs: !1
+}), Nt = () => x, St = /* @__PURE__ */ p(Nt())({
   name: "ArrowInviteIcon",
   class: "awohrz6",
-  propsAsIs: true
-});
-const C$1 = ({ title: o2, description: t2, onClick: r2, className: e2 }) => {
-  const [c2] = f$4({
+  propsAsIs: !0
+}), $t = ({ title: e, description: t, onClick: s, className: a }) => {
+  const [o] = Qe({
     type: "invitation",
     action: "sent",
     payload: {
-      from: InvitationFrom.TITLE_CARD
+      from: Xe.TITLE_CARD
     }
   });
-  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 })
+  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 })
     ] }),
-    /* @__PURE__ */ jsx(I$1, { name: "icon-copy" })
+    /* @__PURE__ */ n(St, { name: "icon-copy" })
   ] });
 };
-function isRangeVisible(_ref) {
-  var lastRenderedStartIndex = _ref.lastRenderedStartIndex, lastRenderedStopIndex = _ref.lastRenderedStopIndex, startIndex = _ref.startIndex, stopIndex = _ref.stopIndex;
-  return !(startIndex > lastRenderedStopIndex || stopIndex < lastRenderedStartIndex);
+function wt(e) {
+  var t = e.lastRenderedStartIndex, s = e.lastRenderedStopIndex, a = e.startIndex, o = e.stopIndex;
+  return !(a > s || o < t);
 }
-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;
-    }
+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++) {
+    var u = t(c);
+    u ? i !== null && (d.push(l, i), l = i = null) : (i = c, l === null && (l = c));
   }
-  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 (i !== null) {
+    for (var m = Math.min(Math.max(i, l + a - 1), s - 1), h = i + 1; h <= m && !t(h); h++)
+      i = h;
+    d.push(l, i);
   }
-  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 {
+  if (d.length)
+    for (; d[1] - d[0] + 1 < a && d[0] > 0; ) {
+      var g = d[0] - 1;
+      if (!t(g))
+        d[0] = g;
+      else
         break;
-      }
     }
-  }
-  return unloadedRanges;
+  return d;
 }
-var classCallCheck = function(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
+var Ct = function(e, t) {
+  if (!(e instanceof t))
     throw new TypeError("Cannot call a class as a function");
-  }
-};
-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);
+}, 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);
     }
   }
-  return function(Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
+  return function(t, s, a) {
+    return s && e(t.prototype, s), a && e(t, a), t;
   };
-}();
-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, {
+})(), Rt = 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, {
     constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
+      value: e,
+      enumerable: !1,
+      writable: !0,
+      configurable: !0
     }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-};
-var possibleConstructorReturn = function(self, call) {
-  if (!self) {
+  }), t && (Object.setPrototypeOf ? Object.setPrototypeOf(e, t) : e.__proto__ = t);
+}, ee = function(e, t) {
+  if (!e)
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+  return t && (typeof t == "object" || typeof t == "function") ? t : e;
 };
-(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);
+(function(e) {
+  Rt(t, e);
+  function t() {
+    var s, a, o, 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) {
+      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);
   }
-  createClass(InfiniteLoader2, [{
+  return Et(t, [{
     key: "resetloadMoreItemsCache",
-    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);
-      }
+    value: function() {
+      var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1;
+      this._memoizedUnloadedRanges = [], a && this._ensureRowsLoaded(this._lastRenderedStartIndex, this._lastRenderedStopIndex);
     }
   }, {
     key: "componentDidMount",
-    value: function componentDidMount() {
+    value: function() {
     }
   }, {
     key: "render",
-    value: function render() {
-      var children = this.props.children;
-      return children({
+    value: function() {
+      var a = this.props.children;
+      return a({
         onItemsRendered: this._onItemsRendered,
         ref: this._setRef
       });
     }
   }, {
     key: "_ensureRowsLoaded",
-    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)
+    value: function(a, o) {
+      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)
       });
-      if (this._memoizedUnloadedRanges.length !== unloadedRanges.length || this._memoizedUnloadedRanges.some(function(startOrStop, index) {
-        return unloadedRanges[index] !== startOrStop;
-      })) {
-        this._memoizedUnloadedRanges = unloadedRanges;
-        this._loadUnloadedRanges(unloadedRanges);
-      }
+      (this._memoizedUnloadedRanges.length !== h.length || this._memoizedUnloadedRanges.some(function(g, I) {
+        return h[I] !== g;
+      })) && (this._memoizedUnloadedRanges = h, this._loadUnloadedRanges(h));
     }
   }, {
     key: "_loadUnloadedRanges",
-    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);
-      }
+    value: function(a) {
+      for (var o = 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,
+            startIndex: u,
+            stopIndex: m
+          })) {
+            if (o._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());
+          }
+        });
+      }, l = 0; l < a.length; l += 2)
+        d(l);
     }
-  }]);
-  return InfiniteLoader2;
-})(PureComponent);
-const r$4 = /* @__PURE__ */ styled_default("div")({
+  }]), t;
+})(ze);
+const xt = /* @__PURE__ */ p("div")({
   name: "Container",
   class: "culdu4a",
-  propsAsIs: false
-}), t$2 = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), Lt = /* @__PURE__ */ p("div")({
   name: "Position",
   class: "pwf8e69",
-  propsAsIs: false
-}), c$3 = /* @__PURE__ */ styled_default("img")({
+  propsAsIs: !1
+}), Dt = /* @__PURE__ */ p("img")({
   name: "Avatar",
   class: "atf4yh4",
-  propsAsIs: false
-}), p$1 = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), Tt = /* @__PURE__ */ p("div")({
   name: "AvatarPlaceholder",
   class: "a1dg29ja",
-  propsAsIs: false
-}), l$1 = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), Ot = /* @__PURE__ */ p("div")({
   name: "Content",
   class: "c10a68rc",
-  propsAsIs: false
-}), m$2 = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), _t = /* @__PURE__ */ p("div")({
   name: "NameContainer",
   class: "nc4kck5",
-  propsAsIs: false
-}), i$4 = /* @__PURE__ */ styled_default("span")({
+  propsAsIs: !1
+}), Mt = /* @__PURE__ */ p("span")({
   name: "Name",
   class: "njsrqgr",
-  propsAsIs: false
-}), e$4 = () => B1, d$2 = /* @__PURE__ */ styled_default(e$4())({
+  propsAsIs: !1
+}), Bt = () => x, Ut = /* @__PURE__ */ p(Bt())({
   name: "CurrentUserBadge",
   class: "c17uc4zr",
-  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" })
+  propsAsIs: !0
+}), Ft = ({
+  friendsRank: e,
+  avatar: t,
+  name: s,
+  userId: a,
+  points: o,
+  isCurrentUser: r,
+  style: d
+}) => /* @__PURE__ */ v(xt, { "data-name": a, style: d, children: [
+  /* @__PURE__ */ n(Lt, { children: e || 0 }),
+  /* @__PURE__ */ v(Ot, { children: [
+    t ? /* @__PURE__ */ n(Dt, { alt: "leaderboard-item-avatar", src: t }) : /* @__PURE__ */ n(Tt, { children: et(s || "") }),
+    /* @__PURE__ */ v(_t, { children: [
+      /* @__PURE__ */ n(Mt, { children: s || "" }),
+      r && /* @__PURE__ */ n(Ut, { name: "icon-star" })
     ] })
   ] }),
-  /* @__PURE__ */ jsx("div", { children: s(o2) })
-] });
-const u$1 = /* @__PURE__ */ styled_default("div")({
+  /* @__PURE__ */ n("div", { children: tt(o) })
+] }), Pt = /* @__PURE__ */ p("div")({
   name: "Container",
   class: "c16btbfp",
-  propsAsIs: false
-}), S = ({
-  items: s2,
-  currentUserId: e2,
-  openItemDetail: o2,
-  fetchMore: n2,
-  scrollNode: i2,
-  hasMore: d2
+  propsAsIs: !1
+}), zt = ({
+  items: e,
+  currentUserId: t,
+  openItemDetail: s,
+  fetchMore: a,
+  scrollNode: o,
+  hasMore: r
 }) => {
-  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, {
+  const d = z((l) => {
+    const i = l.target.getAttribute("data-name");
+    i && s(i);
+  }, [s]);
+  return /* @__PURE__ */ n(Ye, {
+    loadMore: a,
+    initialLoad: !1,
+    hasMore: r,
+    useWindow: !1,
+    getScrollParent: () => o.current,
+    children: /* @__PURE__ */ n(Pt, {
       "data-a": "intr",
-      onClick: l2,
-      children: s2.map((r2) => /* @__PURE__ */ jsx(N$1, {
-        ...r2,
-        isCurrentUser: !!e2 && e2 === r2.userId
-      }, r2.userId))
+      onClick: d,
+      children: e.map((l) => /* @__PURE__ */ n(Ft, {
+        ...l,
+        isCurrentUser: !!t && t === l.userId
+      }, l.userId))
     })
   });
-};
-const r$3 = /* @__PURE__ */ styled_default("div")({
+}, Vt = /* @__PURE__ */ p("div")({
   name: "InviteFriendsContainer",
   class: "i1c9dygq",
-  propsAsIs: false
-}), a$3 = ({
-  deepLink: i2
-}) => /* @__PURE__ */ jsx(r$3, {
-  children: /* @__PURE__ */ jsx(M$1, {
-    inviteLink: i2,
+  propsAsIs: !1
+}), qt = ({
+  deepLink: e
+}) => /* @__PURE__ */ n(Vt, {
+  children: /* @__PURE__ */ n(Te, {
+    inviteLink: e,
     inviteCardTitle: "It’s More Fun With Friends",
     inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
   })
-});
-const v$1 = /* @__PURE__ */ styled_default("div")({
+}), jt = /* @__PURE__ */ p("div")({
   name: "InviteLinkContainer",
   class: "i1odbhm4",
-  propsAsIs: false
-}), x$3 = ({
-  gamification: r2,
-  scrollNode: t2,
-  scrollStore: o2,
-  leaderboardList: i2
+  propsAsIs: !1
+}), Qt = ({
+  gamification: e,
+  scrollNode: t,
+  scrollStore: s,
+  leaderboardList: a
 }) => {
-  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, {
+  const o = 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, {
+    deepLink: c
+  }) : /* @__PURE__ */ v(R, {
+    children: [/* @__PURE__ */ n(zt, {
+      items: r,
+      scrollNode: t,
+      scrollStore: s,
+      fetchMore: a.fetchMore,
+      hasMore: d,
+      openItemDetail: e.openUser,
+      currentUserId: e.currentUserId.get()
+    }, i), c && /* @__PURE__ */ n(jt, {
+      ref: o,
+      children: /* @__PURE__ */ n($t, {
         "data-a": "intr",
-        onClick: () => c2(n2),
+        onClick: () => u(c),
         title: "Invite Friends",
         description: "Challenge them now!"
       })
-    }), f2]
+    }), m]
   });
-}, 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);
+}, Kt = ({
+  gamification: e,
+  scrollNode: t,
+  scrollStore: s
+}) => e.leaderboardList ? /* @__PURE__ */ n(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 }) => {
+  const [t, s] = N(void 0);
+  return b(() => {
+    const a = e.$store.subscribe((o) => {
+      o && s(o);
     });
     return () => {
-      c2();
+      a();
     };
-  }, [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" });
+  }, [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) => {
+    m(() => {
+      u(k), h === !1 && (o.current?.getBoundingClientRect().y || 0) < 0 && j(o, g.size, { behavior: "instant" });
     });
   };
-  useEffect(() => t2.subscribe((r2) => {
-    if (r2.scrollPosition === 0) {
-      t2.setKey("tabsShown", true);
+  b(() => s.subscribe((k) => {
+    if (k.scrollPosition === 0) {
+      s.setKey("tabsShown", !0);
       return;
     }
-    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,
+    d.get().sdkInDesktopView ? s.setKey("tabsShown", k.scrollDirection === "backward") : s.setKey("tabsShown", k.scrollDirection === "forward");
+  }), [s, d]), b(() => {
+    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(
+      $e,
       {
         style: {
-          top: m2
+          top: A
         },
-        children: /* @__PURE__ */ jsx(b$2, { activePage: a2, toggleActivePage: x2 })
+        children: /* @__PURE__ */ n(ft, { activePage: c, toggleActivePage: I })
       }
     ),
-    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 === 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() }) })
     ] }),
-    a2 === m$3.LEADERBOARD && /* @__PURE__ */ jsx(C$2, { children: /* @__PURE__ */ jsx(E, { scrollStore: t2, scrollNode: y2, gamification: s2 }) })
+    c === D.LEADERBOARD && /* @__PURE__ */ n(Ee, { children: /* @__PURE__ */ n(Kt, { scrollStore: s, scrollNode: a, gamification: e }) })
   ] });
-};
-const R = () => f$5, u = /* @__PURE__ */ styled_default(R())({
+}, Jt = () => V, te = /* @__PURE__ */ p(Jt())({
   name: "OpenedContainer",
   class: "ouvguos",
-  propsAsIs: true
-}), f$2 = "t1eu4lbg", V = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !0
+}), se = "t1eu4lbg", Zt = /* @__PURE__ */ p("div")({
   name: "UserContainer",
   class: "uuv2xqo",
-  propsAsIs: false
-}), j$1 = ({
-  correct: e2,
-  incorrect: t2
+  propsAsIs: !1
+}), Xt = ({
+  correct: e,
+  incorrect: t
 }) => {
-  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 s = e + t;
+  return s === 0 ? 0 : Math.round(e / s * 100);
+}, Tn = ({
+  gamification: e,
+  scrollStore: t,
+  className: s,
+  appNode: a,
+  scrollNode: o,
+  responsiveStore: r
+}) => /* @__PURE__ */ n(Ht, {
+  appNode: a,
+  scrollStore: t,
+  scrollNode: o,
+  className: s,
+  gamification: e,
+  responsiveStore: r
+}), Yt = ({
+  gamification: e,
+  muted: t,
+  sdk: s,
+  className: a,
+  appNode: o,
+  responsiveStore: r
 }) => {
   const {
-    topNavigation: c2
-  } = p$3(), C2 = useStore(e2.openedQuestionId), S2 = useStore(e2.openedQuestion.$store), s2 = useStore(e2.openedUser || createSingleStore(void 0)), {
-    sdkInDesktopView: v2
-  } = useStore(a2, {
+    topNavigation: d
+  } = q(), l = f(e.openedQuestionId), i = f(e.openedQuestion.$store), c = f(e.openedUser || he(void 0)), {
+    sdkInDesktopView: u
+  } = f(r, {
     keys: ["sdkInDesktopView"]
   }), {
-    hiding: m2,
-    onAnimationEnd: d2
-  } = S$2();
-  if (!C2 && !s2)
+    hiding: m,
+    onAnimationEnd: h
+  } = Re();
+  if (!l && !c)
     return null;
-  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
+  const g = i ? /* @__PURE__ */ n(te, {
+    className: $(a, !d && se),
+    hiding: m,
+    onAnimationEnd: h,
+    children: /* @__PURE__ */ n(He, {
+      muted: t,
+      sdk: s,
+      gamification: e
     })
-  }) : s2 ? /* @__PURE__ */ jsx(u, {
-    className: cx_default(r2, !c2 && f$2),
-    hiding: m2,
-    onAnimationEnd: d2,
-    children: /* @__PURE__ */ jsxs(V, {
-      children: [/* @__PURE__ */ jsx(y$1, {
+  }) : c ? /* @__PURE__ */ n(te, {
+    className: $(a, !d && se),
+    hiding: m,
+    onAnimationEnd: h,
+    children: /* @__PURE__ */ v(Zt, {
+      children: [/* @__PURE__ */ n(Ze, {
         label: "Friend's Rank",
-        close: e2.closeUser
-      }), /* @__PURE__ */ jsx(a$5, {
-        children: /* @__PURE__ */ jsx(z$3, {
-          ...s2,
-          successRate: j$1(s2)
+        close: e.closeUser
+      }), /* @__PURE__ */ n(xe, {
+        children: /* @__PURE__ */ n(me, {
+          ...c,
+          successRate: Xt(c)
         })
       })]
     })
   }) : null;
-  return /* @__PURE__ */ jsx(T$2, {
-    container: p2,
-    useContainer: !v2,
-    children: x2
+  return /* @__PURE__ */ n(fe, {
+    container: o,
+    useContainer: !u,
+    children: g
   });
-};
-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,
+}, 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,
     {
-      appNode: o2,
-      scrollStore: e2,
-      scrollNode: a2,
-      className: n2,
-      responsiveStore: l2,
-      gamification: t2
+      appNode: o,
+      scrollStore: a,
+      scrollNode: r,
+      className: s,
+      responsiveStore: d,
+      gamification: t
     }
-  ) }) : null, [i2, t2, n2, l2, e2, a2, o2]);
-  return /* @__PURE__ */ jsx(
-    Suspense,
+  ) }) : null, [e, t, s, d, a, r, o]);
+  return /* @__PURE__ */ n(
+    Ve,
     {
-      fallback: /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
-      children: u2
+      fallback: /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
+      children: l
     }
   );
-}, 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,
+}, ss = ({ feature: e, sdk: t, muted: s, className: a, appNode: o, responsiveStore: r }) => e && e.featureConfig.get().type === y.GAMES ? /* @__PURE__ */ n(
+  Yt,
   {
-    className: e2,
-    appNode: o2,
-    muted: n2,
-    sdk: t2,
-    responsiveStore: a2,
-    gamification: i2
+    className: a,
+    appNode: o,
+    muted: s,
+    sdk: t,
+    responsiveStore: r,
+    gamification: e
   }
 ) : null;
 window.dispatchEvent(new CustomEvent("grpc_devtools_loaded"));
-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
+function ns(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
   // everything except Firefox
-  err.name === "QuotaExceededError" || // Firefox
-  err.name === "NS_ERROR_DOM_QUOTA_REACHED");
+  e.name === "QuotaExceededError" || // Firefox
+  e.name === "NS_ERROR_DOM_QUOTA_REACHED");
 }
-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);
-        }
-      }
-    });
-    __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(key, value);
-      } catch (err) {
-        if (isQuotaExceededError(err) && this.storage === window.sessionStorage) {
-          window.sessionStorage.removeItem("slstreamlogs");
-          this.storage.setItem(key, value);
-        }
-      }
-    });
-    __publicField(this, "read", (...keyParts) => {
-      const value = this.storage.getItem(this.generateKey(keyParts));
-      return value === null ? void 0 : value;
-    });
-    __publicField(this, "remove", (...keyParts) => {
-      this.storage.removeItem(this.generateKey(keyParts));
-    });
-    this.prefix = `sl-sdk${this.delimiter}${prefix}`;
-    this.storage = storage;
+class os {
+  delimiter = ":";
+  prefix;
+  storage;
+  constructor(t = "main", s = window.localStorage) {
+    this.prefix = `sl-sdk${this.delimiter}${t}`, this.storage = s;
   }
+  clear = () => {
+    for (const t in window.localStorage)
+      t.startsWith(this.prefix) && this.storage.removeItem(t);
+  };
+  generateKey = (t) => `${this.prefix}${this.delimiter}${t.join(this.delimiter)}`;
+  write = (...t) => {
+    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));
+    }
+  };
+  read = (...t) => {
+    const s = this.storage.getItem(this.generateKey(t));
+    return s === null ? void 0 : s;
+  };
+  remove = (...t) => {
+    this.storage.removeItem(this.generateKey(t));
+  };
 }
-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 {
+var ne;
+(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";
+})(ne || (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" });
+var S;
+(function(e) {
+  e.SCHEMA = "schema", e.EXTERNAL_TOKEN = "eToken", e.TOKEN = "token";
+})(S || (S = {}));
+class as extends os {
   constructor() {
     super("user");
-    // Schema
-    __publicField(this, "setSchema", (value) => {
-      this.write(KEY_PREFIX$2.SCHEMA, value);
-    });
-    __publicField(this, "getSchema", () => {
-      return this.read(KEY_PREFIX$2.SCHEMA);
-    });
-    // Token
-    __publicField(this, "setToken", (value) => {
-      this.write(KEY_PREFIX$2.TOKEN, value);
-    });
-    __publicField(this, "getToken", () => {
-      return this.read(KEY_PREFIX$2.TOKEN);
-    });
-    // External Token
-    __publicField(this, "setExternalToken", (value) => {
-      this.write(KEY_PREFIX$2.EXTERNAL_TOKEN, value);
-    });
-    __publicField(this, "getExternalToken", () => {
-      return this.read(KEY_PREFIX$2.EXTERNAL_TOKEN);
-    });
-    __publicField(this, "removeToken", () => {
-      this.remove(KEY_PREFIX$2.TOKEN);
-    });
   }
+  // Schema
+  setSchema = (t) => {
+    this.write(S.SCHEMA, t);
+  };
+  getSchema = () => this.read(S.SCHEMA);
+  // Token
+  setToken = (t) => {
+    this.write(S.TOKEN, t);
+  };
+  getToken = () => this.read(S.TOKEN);
+  // External Token
+  setExternalToken = (t) => {
+    this.write(S.EXTERNAL_TOKEN, t);
+  };
+  getExternalToken = () => this.read(S.EXTERNAL_TOKEN);
+  removeToken = () => {
+    this.remove(S.TOKEN);
+  };
 }
-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")({
+var oe;
+(function(e) {
+  e.DISABLED = "disabled", e.INITIALIZATION = "initialization", e.READY = "ready", e.FAILED = "failed", e.SUSPENDED = "suspended";
+})(oe || (oe = {}));
+var ae;
+(function(e) {
+  e.SHOWED = "showed", e.EVENT = "ev";
+})(ae || (ae = {}));
+var re;
+(function(e) {
+  e.ONBOARDING = "onboarding", e.ONBOARDING_IO = "onboarding_io", e.QUESTION_RECEIVED = "q-received", e.QUESTION_OPENED = "q-opened";
+})(re || (re = {}));
+var ie;
+(function(e) {
+  e.ALLOWED = "allowed", e.DISALLOWED = "disallowed";
+})(ie || (ie = {}));
+var le;
+(function(e) {
+  e.UNKNOWN = "unknown", e.ALREADY_VOTED = "already_voted";
+})(le || (le = {}));
+T("deep_link");
+T("bypass");
+new as();
+T("video_player");
+var de;
+(function(e) {
+  e.Unset = "unset", e.Required = "required", e.Optional = "optional", e.Completed = "completed", e.Disabled = "disabled", e.Unavailable = "unavailable";
+})(de || (de = {}));
+U.POLL, U.PREDICTION, U.TRIVIA;
+const rs = {
+  [y.GAMES]: !0
+}, is = /* @__PURE__ */ p("div")({
   name: "Buttons",
   class: "b5o8qbl",
-  propsAsIs: false
-}), i$3 = ({
-  children: o2,
-  className: s2
-}) => /* @__PURE__ */ jsx(n$2, {
-  className: s2,
-  children: o2
-});
-const n$1 = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), ls = ({
+  children: e,
+  className: t
+}) => /* @__PURE__ */ n(is, {
+  className: t,
+  children: e
+}), Ie = /* @__PURE__ */ p("div")({
   name: "Navigation",
   class: "n6tbwuy",
-  propsAsIs: false
-}), t$1 = () => i$3, e$3 = /* @__PURE__ */ styled_default(t$1())({
+  propsAsIs: !1
+}), ds = () => ls, ce = /* @__PURE__ */ p(ds())({
   name: "NavigationItems",
   class: "n1up4z7v",
-  propsAsIs: true
-});
-const o = /* @__PURE__ */ styled_default("button")({
+  propsAsIs: !0
+}), cs = /* @__PURE__ */ p("button")({
   name: "SButton",
   class: "sxxa0c",
-  propsAsIs: false
-}), n = /* @__PURE__ */ styled_default("span")({
+  propsAsIs: !1
+}), ps = /* @__PURE__ */ p("span")({
   name: "ButtonIcon",
   class: "b193dcyu",
-  propsAsIs: false
-}), a$1 = /* @__PURE__ */ styled_default("span")({
+  propsAsIs: !1
+}), us = /* @__PURE__ */ p("span")({
   name: "ButtonLabel",
   class: "b40tuix",
-  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,
+  propsAsIs: !1
+}), ms = "s14xk0af", hs = "ha3mg7c", fs = "h103yr45", _ = ({ disabled: e, active: t, onClick: s, label: a, icon: o, id: r }) => /* @__PURE__ */ n(
+  cs,
   {
-    onClick: a2,
+    onClick: s,
     "data-a": "intr",
-    disabled: n$12,
-    className: cx_default(
-      r2 && e$2,
-      !r2 && (t2 === "channels" || t2 === "featuredGroups") && c$2,
-      !r2 && t2 === "leaderboard" && r$2
+    disabled: e,
+    className: $(
+      t && ms,
+      !t && (r === "channels" || r === "featuredGroups") && hs,
+      !t && r === "leaderboard" && fs
     ),
-    children: /* @__PURE__ */ jsxs(Fragment, { children: [
-      o$12 && /* @__PURE__ */ jsx(n, { children: o$12 }),
-      /* @__PURE__ */ jsx(a$1, { children: c2 })
+    children: /* @__PURE__ */ v(R, { children: [
+      o && /* @__PURE__ */ n(ps, { children: o }),
+      /* @__PURE__ */ n(us, { children: a })
     ] })
   }
-);
-const g = () => B1, x$1 = /* @__PURE__ */ styled_default(g())({
+), vs = () => x, gs = /* @__PURE__ */ p(vs())({
   name: "ButtonIcon",
   class: "b11wpe79",
-  propsAsIs: true
-}), F$1 = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !0
+}), Is = /* @__PURE__ */ p("div")({
   name: "Container",
   class: "calnblm",
-  propsAsIs: false
-}), D$1 = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), bs = /* @__PURE__ */ p("div")({
   name: "Title",
   class: "t1438p52",
-  propsAsIs: false
-}), N = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), ks = /* @__PURE__ */ p("div")({
   name: "CloseIconWrap",
   class: "c17srj38",
-  propsAsIs: false
-}), B$1 = () => B1, j = /* @__PURE__ */ styled_default(B$1())({
+  propsAsIs: !1
+}), ys = () => x, Ns = /* @__PURE__ */ p(ys())({
   name: "CloseIcon",
   class: "clqia8k",
-  propsAsIs: true
-}), w = () => B1, G$1 = /* @__PURE__ */ styled_default(w())({
+  propsAsIs: !0
+}), Ss = () => x, $s = /* @__PURE__ */ p(Ss())({
   name: "DashboardIcon",
   class: "df5w958",
-  propsAsIs: true
-}), M = "h12x6aiv", z$2 = forwardRef(({
-  sdk: s2,
-  className: l2
-}, p2) => {
-  const a2 = () => {
-    s2.closeFeature();
+  propsAsIs: !0
+}), ws = "h12x6aiv", As = ve(({
+  sdk: e,
+  className: t
+}, s) => {
+  const a = () => {
+    e.closeFeature();
   };
-  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, {
+  return /* @__PURE__ */ v(Ie, {
+    className: $(t, ws),
+    children: [/* @__PURE__ */ v(Is, {
+      children: [/* @__PURE__ */ v(bs, {
+        children: [/* @__PURE__ */ n($s, {
           name: "dashboard"
         }), "Dashboard"]
-      }), /* @__PURE__ */ jsx(N, {
+      }), /* @__PURE__ */ n(ks, {
         "data-a": "intr",
-        onClick: a2,
-        children: /* @__PURE__ */ jsx(j, {
+        onClick: a,
+        children: /* @__PURE__ */ n(Ns, {
           name: "icon-cross"
         })
       })]
-    }), /* @__PURE__ */ jsx("div", {
-      ref: p2
+    }), /* @__PURE__ */ n("div", {
+      ref: s
     })]
   });
-}), 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,
+}), Cs = ve(({
+  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;
+    return i?.overlays ? i.overlays : [];
+  }, [a, o]), l = w(() => [...d.filter(({
+    enableSdkButton: i,
+    type: c
+  }) => c === y.GAMES || i).map((i) => ({
+    id: i.type,
+    onClick: () => e.openFeature(i.type),
+    disabled: !(i.type in rs),
+    label: i.name,
+    icon: /* @__PURE__ */ n("img", {
+      src: i.icon,
       alt: ""
     }),
     /** multiplied by 10 to add the ability to insert custom buttons between our buttons */
-    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, {
+    position: i.position * 10
+  }))].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(_, {
         id: "Channels",
-        onClick: () => s2.closeFeature(),
+        onClick: () => e.closeFeature(),
         label: "Channels",
-        active: i2 === 0
-      }, "Channels"), ...d2.map((o2) => o2.id === SdkOverlayType.GAMES ? /* @__PURE__ */ jsx(i$2, {
-        ...o2,
-        active: o2.id === i2,
+        active: r === 0
+      }, "Channels"), ...l.map((i) => i.id === y.GAMES ? /* @__PURE__ */ n(_, {
+        ...i,
+        active: i.id === r,
         label: "StreamLayer +",
         id: "featuredGroups",
-        icon: /* @__PURE__ */ jsx(x$1, {
+        icon: /* @__PURE__ */ n(gs, {
           name: "icon-btn-feature-groups",
-          "data-selected": o2.id === i2
+          "data-selected": i.id === r
         })
-      }, o2.id) : /* @__PURE__ */ jsx(i$2, {
-        ...o2,
+      }, i.id) : /* @__PURE__ */ n(_, {
+        ...i,
         icon: void 0,
-        active: o2.id === i2
-      }, o2.id))]
-    }), !d2.length && /* @__PURE__ */ jsx(e$3, {
-      children: [/* @__PURE__ */ jsx(i$2, {
+        active: i.id === r
+      }, i.id))]
+    }), !l.length && /* @__PURE__ */ n(ce, {
+      children: [/* @__PURE__ */ n(_, {
         id: "empty",
         label: "No Features...",
-        active: false,
-        disabled: true
+        active: !1,
+        disabled: !0
       }, "empty")]
-    }), /* @__PURE__ */ jsx("div", {
-      ref: p2
+    }), /* @__PURE__ */ n("div", {
+      ref: s
     })]
   });
-});
-const a = /* @__PURE__ */ styled_default("div")({
+}), Es = /* @__PURE__ */ p("div")({
   name: "Container",
   class: "c1qjj4d4",
-  propsAsIs: false
-}), c$1 = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), Rs = /* @__PURE__ */ p("div")({
   name: "CloseIconWrap",
   class: "c1lg6b8a",
-  propsAsIs: false
-}), e$1 = () => B1, l = /* @__PURE__ */ styled_default(e$1())({
+  propsAsIs: !1
+}), xs = () => x, Ls = /* @__PURE__ */ p(xs())({
   name: "CloseIcon",
   class: "c159el66",
-  propsAsIs: true
-}), p = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !0
+}), Ds = /* @__PURE__ */ p("div")({
   name: "Title",
   class: "t16xmufv",
-  propsAsIs: false
-}), i$1 = /* @__PURE__ */ styled_default("img")({
+  propsAsIs: !1
+}), Ts = /* @__PURE__ */ p("img")({
   name: "SponsorLogo",
   class: "s83lc21",
-  propsAsIs: false
-}), r$1 = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), Os = /* @__PURE__ */ p("div")({
   name: "PresentsTitle",
   class: "p1p7igia",
-  propsAsIs: false
-}), m$1 = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), _s = /* @__PURE__ */ p("div")({
   name: "Subtitle",
   class: "s1eftsbu",
-  propsAsIs: false
-}), I = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), Ms = /* @__PURE__ */ p("div")({
   name: "Description",
   class: "d8uezec",
-  propsAsIs: false
-}), f$1 = /* @__PURE__ */ styled_default("button")({
+  propsAsIs: !1
+}), Bs = /* @__PURE__ */ p("button")({
   name: "ActionButton",
   class: "a1h1bk90",
-  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" })
-    ] }),
-    ((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" })
-  ] });
-};
-const C = [{
+  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" }) }),
+  s?.titleCard?.media?.sponsorLogo && /* @__PURE__ */ v(Ds, { children: [
+    /* @__PURE__ */ n(Ts, { alt: "sponsor-logo", src: s?.titleCard?.media?.sponsorLogo }),
+    /* @__PURE__ */ n(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 = [{
   graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_1.png",
   tagline: "",
-  headline: /* @__PURE__ */ jsxs(Fragment, {
-    children: ["Welcome to ", /* @__PURE__ */ jsx("br", {}), " Live Challenge"]
+  headline: /* @__PURE__ */ v(R, {
+    children: ["Welcome to ", /* @__PURE__ */ n("br", {}), " Live Challenge"]
   })
 }, {
   graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_2.png",
@@ -1064,51 +925,49 @@ const C = [{
 }, {
   graphicSrc: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/dark/step_3.png",
   headline: "Win points and play against friends."
-}], z$1 = /* @__PURE__ */ styled_default("div")({
+}], Us = /* @__PURE__ */ p("div")({
   name: "OnboardingContainer",
   class: "o1xni1kr",
-  propsAsIs: false
-}), D = () => f$5, G = /* @__PURE__ */ styled_default(D())({
+  propsAsIs: !1
+}), Fs = () => V, Ps = /* @__PURE__ */ p(Fs())({
   name: "OnboardingNotificationContainer",
   class: "o1vnouv7",
-  propsAsIs: true
-}), x = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !0
+}), ue = /* @__PURE__ */ p("div")({
   name: "InnerContainer",
   class: "i59uefw",
-  propsAsIs: false
-}), U$1 = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !1
+}), zs = /* @__PURE__ */ p("div")({
   name: "OnboardingOverlap",
   class: "ovnr8ov",
-  propsAsIs: false
-}), J = ({
-  deepLink: l2,
-  onboardingOpts: e2,
-  notification: o2,
-  gamification: d2,
-  loading: s2,
-  sdk: c2,
-  throttled: I2
+  propsAsIs: !1
+}), Vs = ({
+  deepLink: e,
+  onboardingOpts: t,
+  notification: s,
+  gamification: a,
+  loading: o,
+  sdk: r,
+  throttled: d
 }) => {
-  var a2, b2, h2, f2, v2, t2, m2;
-  const u2 = useStore(d2.friends ? d2.friends.getStore() : createSingleStore({
+  const l = f(a.friends ? a.friends.getStore() : he({
     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);
+  })), [i, c] = N(void 0), u = w(() => {
+    const m = r.getInviter();
+    return m ? l.data?.find(({
+      slId: h
+    }) => h === m)?.name : "";
+  }, [l.data, r]);
+  return b(() => {
+    const m = e.$store.subscribe((h) => {
+      h && c(h.data);
     });
     return () => {
-      i2();
+      m();
     };
-  }, [l2.$store]), /* @__PURE__ */ jsxs(z$1, {
-    children: [/* @__PURE__ */ jsx(tn, {
-      loading: s2,
+  }, [e.$store]), /* @__PURE__ */ v(Us, {
+    children: [/* @__PURE__ */ n(Be, {
+      loading: o,
       rules: [{
         label: "Answer as many questions as you like.",
         icon: "icon-btn-feature-groups"
@@ -1119,396 +978,385 @@ const C = [{
         label: "Top the leader board and best your friends.",
         icon: "icon-trophy"
       }],
-      rulesBtnLabel: (a2 = e2.rules) == null ? void 0 : a2.buttonLabel,
-      rulesTitle: (b2 = e2.rules) == null ? void 0 : b2.heading,
+      rulesBtnLabel: t.rules?.buttonLabel,
+      rulesTitle: t.rules?.heading,
       termsTitle: "Terms and Conditions",
-      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,
+      termsText: t.rules?.terms,
+      steps: be,
+      primaryColor: t.inviteCard?.iconColor,
+      inviteLink: i,
+      inviteCardTitle: t.inviteCard?.heading,
+      inviteCardSubtext: t.inviteCard?.subtext,
+      inviteCardBtnLabel: t.inviteCard?.buttonLabel,
       onClose: () => {
-        var i2;
-        (i2 = o2.close) == null || i2.call(o2);
+        s.close?.();
       },
-      gamification: d2,
-      sdk: c2,
-      inviterName: g2
-    }), I2 && /* @__PURE__ */ jsx(U$1, {})]
+      gamification: a,
+      sdk: r,
+      inviterName: u
+    }), d && /* @__PURE__ */ n(zs, {})]
   });
-}, ie = ({
-  sdk: l2,
-  notification: e2,
-  saveHeight: o2,
-  style: d2,
-  appNode: s2,
-  sdkInDesktopView: c2,
-  responsiveStore: I2
+}, qs = ({
+  sdk: e,
+  notification: t,
+  saveHeight: s,
+  style: a,
+  appNode: o,
+  sdkInDesktopView: r,
+  responsiveStore: d
 }) => {
-  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, {
+  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), []), {
+    screen: g
+  } = f(d, {
     keys: ["screen"]
   });
-  useLayoutEffect(() => {
-    var t2;
-    o2(((t2 = u2.current) == null ? void 0 : t2.getBoundingClientRect().height) || 0);
-  }, [o2]);
+  je(() => {
+    s(l.current?.getBoundingClientRect().height || 0);
+  }, [s]);
   const {
-    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
+    loading: I,
+    throttled: A
+  } = Me(h);
+  return c && m && i && o.current ? /* @__PURE__ */ n(fe, {
+    container: o,
+    useContainer: !r,
+    children: /* @__PURE__ */ n(Vs, {
+      throttled: A,
+      notification: t,
+      setOpened: u,
+      gamification: m,
+      onboardingOpts: i,
+      deepLink: m.deepLink,
+      loading: I,
+      renderToNode: o,
+      sdk: e
     })
-  }) : /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(x, {
-      ref: u2,
+  }) : /* @__PURE__ */ v(R, {
+    children: [/* @__PURE__ */ n(ue, {
+      ref: l,
       style: {
         position: "absolute",
         visibility: "hidden"
       },
-      children: /* @__PURE__ */ jsx(y, {
+      children: /* @__PURE__ */ n(pe, {
         close: () => {
         },
         action: () => {
         },
-        onboarding: r2
+        onboarding: i
       })
-    }), /* @__PURE__ */ jsx(G, {
-      style: d2,
-      hiding: e2.hiding,
-      children: /* @__PURE__ */ jsx(x, {
-        children: /* @__PURE__ */ jsx(y, {
-          close: e2.close,
+    }), /* @__PURE__ */ n(Ps, {
+      style: a,
+      hiding: t.hiding,
+      children: /* @__PURE__ */ n(ue, {
+        children: /* @__PURE__ */ n(pe, {
+          close: t.close,
           action: () => {
-            var m2;
-            g2(true), (((m2 = s2.current) == null ? void 0 : m2.getBoundingClientRect().y) || 0) < 0 && I$2(s2, h2.size, {
+            u(!0), (o.current?.getBoundingClientRect().y || 0) < 0 && j(o, g.size, {
               behavior: "smooth"
             });
           },
-          onboarding: r2
+          onboarding: i
         })
       })
     })]
   });
-};
-const e = () => f$5, c = /* @__PURE__ */ styled_default(e())({
+}, js = () => V, Qs = /* @__PURE__ */ p(js())({
   name: "Container",
   class: "c8ol1ve",
-  propsAsIs: true
-}), t = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !0
+}), ke = /* @__PURE__ */ p("div")({
   name: "InnerContainer",
   class: "iqfywam",
-  propsAsIs: false
-}), i = () => t, m = /* @__PURE__ */ styled_default(i())({
+  propsAsIs: !1
+}), Ks = () => ke, Ws = /* @__PURE__ */ p(Ks())({
   name: "HiddenContainer",
   class: "hokmtod",
-  propsAsIs: true
-}), f = /* @__PURE__ */ styled_default("div")({
+  propsAsIs: !0
+}), Gs = /* @__PURE__ */ p("div")({
   name: "NotificationRefreshing",
   class: "n192d1q8",
-  propsAsIs: false
-}), r = () => f$6, d = /* @__PURE__ */ styled_default(r())({
+  propsAsIs: !1
+}), Hs = () => Ue, Js = /* @__PURE__ */ p(Hs())({
   name: "Pill",
   class: "p1lha68t",
-  propsAsIs: true
-});
-const v = (r2) => {
-  const [e2, d2] = useState(0), i2 = useRef(null), l2 = useMemo(() => new ResizeObserver((n2) => {
+  propsAsIs: !0
+}), Zs = (e) => {
+  const [t, s] = N(0), a = E(null), o = w(() => new ResizeObserver((l) => {
     window.requestAnimationFrame(() => {
-      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);
+      if (Array.isArray(l)) {
+        for (const i of l)
+          if (i.contentBoxSize) {
+            const c = a.current?.getBoundingClientRect();
+            c && s(c.height);
           }
       }
     });
-  }), []), s2 = useCallback((n2) => {
-    i2.current = n2;
-  }, []), a2 = useCallback((n2) => {
-    d2(n2);
+  }), []), r = z((l) => {
+    a.current = l;
+  }, []), d = z((l) => {
+    s(l);
   }, []);
-  return useEffect(() => {
-    const n2 = i2.current;
-    return n2 ? (l2.observe(n2), () => {
-      l2.unobserve(n2);
+  return b(() => {
+    const l = a.current;
+    return l ? (o.observe(l), () => {
+      o.unobserve(l);
     }) : () => {
     };
-  }, [r2]), useEffect(() => () => {
-    l2.disconnect();
-  }), [s2, e2, a2];
-}, Q = ({
-  sdk: r2,
-  notification: e2,
-  appNode: d2,
-  responsiveStore: i2,
-  hasActiveFeature: l2
+  }, [e]), b(() => () => {
+    o.disconnect();
+  }), [r, t, d];
+}, Xs = ({
+  sdk: e,
+  notification: t,
+  appNode: s,
+  responsiveStore: a,
+  hasActiveFeature: o
 }) => {
-  var t$12, m$12;
   const {
-    sdkInDesktopView: s2
-  } = useStore(i2, {
+    sdkInDesktopView: r
+  } = f(a, {
     keys: ["sdkInDesktopView"]
   }), {
-    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
+    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, {
+      ref: l,
+      children: /* @__PURE__ */ n(Q, {
+        ...t
       })
-    }), /* @__PURE__ */ jsxs(c, {
+    }), /* @__PURE__ */ v(Qs, {
       style: {
-        height: e2.hiding ? 0 : o2
+        height: t.hiding ? 0 : u
       },
-      hiding: e2.hiding,
-      children: [/* @__PURE__ */ jsx(t, {
+      hiding: t.hiding,
+      children: [/* @__PURE__ */ n(ke, {
         style: {
           height: "100%"
         },
-        children: /* @__PURE__ */ jsx(w$2, {
-          ...e2,
-          controlVideo: a2 == null ? void 0 : a2.controlVideoPlayer
+        children: /* @__PURE__ */ n(Q, {
+          ...t,
+          controlVideo: d?.controlVideoPlayer
         })
-      }), /* @__PURE__ */ jsx(f, {}, e2.id)]
+      }), /* @__PURE__ */ n(Gs, {}, t.id)]
     })]
-  }) : 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, {
+  }) : t.type === M.QUESTION_RESOLVED && t.data?.question?.predictionResult ? /* @__PURE__ */ n(Fe, {
     style: {
-      height: e2.hiding ? 0 : f$12
+      height: t.hiding ? 0 : i
     },
-    saveHeight: c$12,
-    close: e2.close,
-    hiding: e2.hiding,
-    ...e2.data.question
-  }) : e2.type === NotificationType.ONBOARDING ? /* @__PURE__ */ jsx(ie, {
+    saveHeight: c,
+    close: t.close,
+    hiding: t.hiding,
+    ...t.data.question
+  }) : t.type === M.ONBOARDING ? /* @__PURE__ */ n(qs, {
     style: {
-      height: e2.hiding ? 0 : o2
+      height: t.hiding ? 0 : u
     },
-    saveHeight: c$12,
-    sdk: r2,
-    notification: e2,
-    sdkInDesktopView: s2,
-    appNode: d2,
-    responsiveStore: i2
+    saveHeight: c,
+    sdk: e,
+    notification: t,
+    sdkInDesktopView: r,
+    appNode: s,
+    responsiveStore: a
   }) : null;
-}, F = "p7vfi6t", U = ({
-  pill: r2,
-  setPill: e2,
-  appNode: d$12,
-  headerNode: i2,
-  scrollNode: l2,
-  responsiveStore: s2,
-  scrollStore: a2
+}, Ys = "p7vfi6t", en = ({
+  pill: e,
+  setPill: t,
+  appNode: s,
+  headerNode: a,
+  scrollNode: o,
+  responsiveStore: r,
+  scrollStore: d
 }) => {
-  var t2, m2;
   const {
-    screen: n2
-  } = useStore(s2, {
+    screen: l
+  } = f(r, {
     keys: ["screen"]
   }), {
-    tabsShown: f2,
-    scrollPosition: c2
-  } = useStore(a2, {
+    tabsShown: i,
+    scrollPosition: c
+  } = f(d, {
     keys: ["tabsShown", "scrollPosition"]
   });
-  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"}`,
+  b(() => {
+    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, {
+    title: e.type === M.QUESTION_RESOLVED ? "Prediction result" : `New ${st[e.data?.questionType]?.label || "notification"}`,
     "data-a": "intr",
     onClick: () => {
-      var g2;
-      s2.get().sdkInDesktopView ? (g2 = l2.current) == null || g2.scrollTo({
+      r.get().sdkInDesktopView ? o.current?.scrollTo({
         top: 0,
         behavior: "smooth"
-      }) : I$2(d$12, n2.size, {
+      }) : j(s, l.size, {
         behavior: "smooth"
-      }), e2(null);
+      }), t(null);
     },
-    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
+    className: $(i && Ys, "sl-pill-button")
+  }), u.current);
+}, tn = ({
+  sdk: e,
+  headerNode: t,
+  scrollNode: s,
+  responsiveStore: a,
+  appNode: o,
+  scrollStore: r,
+  hasActiveFeature: d
 }) => {
-  const [n2] = useState(r2.getNotificationsStore()), f2 = useStore(n2), [c2, o2] = useState(null), t2 = useMemo(() => r2.getActiveNotification(), [r2, f2]);
-  return useEffect(() => {
-    t2 && eventBus.emit("notification", {
+  const [l] = N(e.getNotificationsStore()), i = f(l), [c, u] = N(null), m = w(() => e.getActiveNotification(), [e, i]);
+  return b(() => {
+    m && ot.emit("notification", {
       action: "rendered",
       payload: {
-        questionId: t2.data.questionId,
-        questionType: t2.data.questionType
+        questionId: m.data.questionId,
+        questionType: m.data.questionType
       }
     });
-  }, [t2]), useEffect(() => {
+  }, [m]), b(() => {
     const {
-      sdkInDesktopView: m2,
-      sdkInView: g2
-    } = i2.get();
-    t2 && (m2 || g2) && (!m2 && g2 && o2(t2), m2 && window.requestAnimationFrame(() => {
-      s2.get().scrollPosition !== 0 && o2(t2);
+      sdkInDesktopView: h,
+      sdkInView: g
+    } = a.get();
+    m && (h || g) && (!h && g && u(m), h && window.requestAnimationFrame(() => {
+      r.get().scrollPosition !== 0 && u(m);
     }));
-  }, [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
+  }, [m]), b(() => {
+    m || u(null);
+  }, [m]), /* @__PURE__ */ v(R, {
+    children: [!c && m && /* @__PURE__ */ n(Xs, {
+      appNode: o,
+      sdk: e,
+      hasActiveFeature: d,
+      notification: m,
+      responsiveStore: a
+    }), c && /* @__PURE__ */ n(en, {
+      pill: c,
+      setPill: u,
+      appNode: o,
+      notification: m,
+      headerNode: t,
+      scrollNode: s,
+      scrollStore: r,
+      responsiveStore: a
     })]
   });
-};
-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);
+}, 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 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);
     });
-  }, [r2, e2]), {
-    sdkReady: n2,
-    activeFeature: r2,
-    isLogged: !!c2
+  }, [o, e]), {
+    sdkReady: r,
+    activeFeature: o,
+    isLogged: !!a
   };
-};
-const z = ({
-  sdk: e2,
-  className: l2,
-  scrollStore: o2,
-  appNode: a2,
-  scrollNode: m2,
-  responsiveStore: r2
+}, nn = ({
+  sdk: e,
+  className: t,
+  scrollStore: s,
+  appNode: a,
+  scrollNode: o,
+  responsiveStore: r
 }) => {
-  const [, t2] = p$5(e2);
-  return /* @__PURE__ */ jsx(x$2, {
-    className: l2,
-    scrollNode: m2,
-    appNode: a2,
-    scrollStore: o2,
-    feature: t2,
-    responsiveStore: r2,
-    sdk: e2
+  const [, d] = Pe(e);
+  return /* @__PURE__ */ n(ts, {
+    className: t,
+    scrollNode: o,
+    appNode: a,
+    scrollStore: s,
+    feature: d,
+    responsiveStore: r,
+    sdk: e
   });
-}, B = ({
-  sdk: e2,
-  muted: l2,
-  className: o2,
-  appNode: a2,
-  responsiveStore: m2
+}, on = ({
+  sdk: e,
+  muted: t,
+  className: s,
+  appNode: a,
+  responsiveStore: o
 }) => {
-  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;
+  const r = f(e.featuresList.getStore());
+  return r ? Array.from(r, (d) => {
+    const l = e.getFeature(d);
+    return l ? /* @__PURE__ */ n(ss, {
+      className: s,
+      muted: t,
+      appNode: a,
+      feature: l,
+      responsiveStore: o,
+      sdk: e
+    }, d) : null;
   }) : null;
-}, oe = ({
-  sdk: e2,
-  muted: l2,
-  topNavigation: o2
+}, an = ({
+  sdk: e,
+  muted: t,
+  topNavigation: s
 }) => {
-  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,
+  const [a, o] = 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,
     event: "click",
-    listener: A$3
+    listener: We
   });
-  const g2 = useMemo(() => ({
-    sdk: e2,
-    topNavigation: o2
-  }), [e2, o2]);
-  return useEffect(() => {
+  const A = w(() => ({
+    sdk: e,
+    topNavigation: s
+  }), [e, s]);
+  return b(() => {
     import("./gamification-feature.js");
-  }, []), /* @__PURE__ */ jsx(e$8.Provider, {
-    value: g2,
-    children: /* @__PURE__ */ jsxs(p$4, {
-      ref: (S2) => {
-        r2.current = S2, m2(!!S2);
+  }, []), /* @__PURE__ */ n(Je.Provider, {
+    value: A,
+    children: /* @__PURE__ */ v(Le, {
+      ref: (k) => {
+        r.current = k, o(!!k);
       },
-      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: s ? "" : "c10llmat",
+      children: [I && s && d.app && /* @__PURE__ */ n(Cs, {
+        className: $(O, "sl-hide-on-modal"),
+        sdk: e,
+        ref: l
+      }), I && !s && !!h && d.app && /* @__PURE__ */ n(As, {
+        className: $(O, "sl-hide-on-modal"),
+        sdk: e,
+        ref: l
+      }), /* @__PURE__ */ v(De, {
         className: "sl-hide-on-modal",
-        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
+        ref: c,
+        "data-nav": (!!h && I).toString(),
+        children: [I && d.app && /* @__PURE__ */ n(tn, {
+          sdk: e,
+          scrollNode: c,
+          headerNode: l,
+          appNode: r,
+          scrollStore: u,
+          responsiveStore: i,
+          hasActiveFeature: !!h
+        }), I && d.app && /* @__PURE__ */ n(nn, {
+          scrollStore: u,
+          responsiveStore: i,
+          scrollNode: c,
+          appNode: r,
+          className: O,
+          sdk: e
+        }), I && a && /* @__PURE__ */ n(on, {
+          muted: t,
+          responsiveStore: i,
+          appNode: r,
+          className: O,
+          sdk: e
         })]
-      }), s2 && !N2 && a2 && t2.app && /* @__PURE__ */ jsx("div", {
+      }), I && !g && a && d.app && /* @__PURE__ */ n("div", {
         style: {
           display: "flex",
           alignItems: "center",
@@ -1520,14 +1368,13 @@ const z = ({
       })]
     })
   });
-};
-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)
+}, 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)
     throw new Error("Wrap app in `StreamLayerProvider`");
-  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 }) }) });
+  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 }) }) });
 };
 export {
-  B$2 as B,
-  b
+  Tn as B,
+  On as D
 };