@streamlayer/react 1.9.8 → 1.11.0

package/lib/es/advertisement.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as v, Fragment as po } from "react/jsx-runtime";
-import { useRef as F, useState as R, useCallback as Po, useEffect as M } from "react";
-import { e as P, s as n, h as ko, g as mo, i as D, Y as Lo, a as uo, L as Mo, u as Oo, j as _o, b as Bo, S as T, d as xo } from "./index2.js";
-import { N, a as vo, b as Ao, C as go, c as ho, P as L, d as S, A as Ro, e as Do, S as qo } from "./useStreamLayerApp2.js";
+import { useRef as F, useState as R, useCallback as Mo, useEffect as L } from "react";
+import { e as M, s as n, f as Po, g as mo, i as D, Y as ko, a as uo, L as Lo, u as Oo, j as _o, b as Bo, S as T, h as xo } from "./provider.js";
+import { N, a as vo, b as Ao, C as go, c as ho, P as k, d as S, A as Ro, e as Do, S as qo } from "./useStreamLayerApp2.js";
 const wo = /* @__PURE__ */ n("div")({
   name: "Container",
   class: "c5b6wdg",
@@ -16,7 +16,7 @@ const wo = /* @__PURE__ */ n("div")({
   onAnimationEnd: c
 }) => /* @__PURE__ */ e(wo, {
   style: s,
-  className: P(i, Vo, Ho(r), t && !l && Go(r), t && l && Wo(r)),
+  className: M(i, Vo, Ho(r), t && !l && Go(r), t && l && Wo(r)),
   onAnimationEnd: c,
   children: o
 }), Ko = /* @__PURE__ */ n("a")({
@@ -177,15 +177,15 @@ const wo = /* @__PURE__ */ n("div")({
   name: "CtaIcon",
   class: "ckq1frv",
   propsAsIs: !1
-}), Pe = /* @__PURE__ */ n("button")({
+}), Me = /* @__PURE__ */ n("button")({
   name: "Button",
   class: "bis90pl",
   propsAsIs: !1
-}), ke = () => ko, Le = /* @__PURE__ */ n(ke())({
+}), Pe = () => Po, ke = /* @__PURE__ */ n(Pe())({
   name: "StyledChevronRight",
   class: "s9mjmz3",
   propsAsIs: !0
-}), Me = /* @__PURE__ */ n("div")({
+}), Le = /* @__PURE__ */ n("div")({
   name: "Logo",
   class: "l1cf50a7",
   propsAsIs: !1
@@ -206,18 +206,18 @@ const wo = /* @__PURE__ */ n("div")({
     return /* @__PURE__ */ e(ue, { notification: o, open: s });
   const { title: r, body: c, image: m, promotion: A } = o, { sponsorLogo: a, sponsorLogoMode: g, imagePosition: u, ctaButton: p } = A;
   return /* @__PURE__ */ e(z, { className: "SL_Rich_Notification", direction: l, hiding: t, children: /* @__PURE__ */ v(Ae, { onClick: s, children: [
-    g !== Ao.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ e(Me, { children: /* @__PURE__ */ e("img", { src: a, alt: r }) }),
+    g !== Ao.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ e(Le, { children: /* @__PURE__ */ e("img", { src: a, alt: r }) }),
     /* @__PURE__ */ v(ve, { children: [
       /* @__PURE__ */ e(_e, { src: m, imagePosition: u }),
       /* @__PURE__ */ v(ge, { children: [
         r && /* @__PURE__ */ e(he, { children: r }),
         c && /* @__PURE__ */ e(Ie, { children: c })
       ] }),
-      /* @__PURE__ */ v(Pe, { name: "promo-button", style: { color: p == null ? void 0 : p.textColor, backgroundColor: p == null ? void 0 : p.color }, children: [
+      /* @__PURE__ */ v(Me, { name: "promo-button", style: { color: p == null ? void 0 : p.textColor, backgroundColor: p == null ? void 0 : p.color }, children: [
         (p == null ? void 0 : p.ctaIcon) && (p == null ? void 0 : p.ctaIconMode) === go.CTA_ICON_TRANSPARENT && /* @__PURE__ */ e(Ee, { src: p == null ? void 0 : p.ctaIcon, alt: "cta-icon" }),
         (p == null ? void 0 : p.label) || "Open"
       ] }),
-      /* @__PURE__ */ e(Le, { name: "chevronRight" })
+      /* @__PURE__ */ e(ke, { name: "chevronRight" })
     ] })
   ] }) });
 }, xe = /* @__PURE__ */ n("div")({
@@ -359,12 +359,12 @@ const wo = /* @__PURE__ */ n("div")({
   skipAutoClose: r
 }) => {
   var c;
-  const m = F(null), [A, a] = R(!1), [g, u] = R(0), [p, I] = R(0), [$, h] = R(0), y = F(), b = Po(() => {
+  const m = F(null), [A, a] = R(!1), [g, u] = R(0), [p, I] = R(0), [$, h] = R(0), y = F(), b = Mo(() => {
     u(0), I(0), h(0), a(!1), s == null || s({
       muted: !1
     });
   }, [s]);
-  M(() => {
+  L(() => {
     if (l != null && l.url && m.current) {
       b();
       const f = Je(m.current, l.url, {
@@ -391,12 +391,12 @@ const wo = /* @__PURE__ */ n("div")({
       };
     }
   }, [l == null ? void 0 : l.url, s, b, i, o.type, t]);
-  const O = ((c = o.sponsor) == null ? void 0 : c.logo) && o.logoMode === L.CENTER;
+  const O = ((c = o.sponsor) == null ? void 0 : c.logo) && o.logoMode === k.CENTER;
   return /* @__PURE__ */ v(yo, {
     className: "PromoOverlay",
     children: [/* @__PURE__ */ v(bo, {
       children: [/* @__PURE__ */ e(fo, {
-        className: P(!O && No),
+        className: M(!O && No),
         children: /* @__PURE__ */ e(Co, {
           style: {
             transform: "scale(1.5)"
@@ -417,7 +417,7 @@ const wo = /* @__PURE__ */ n("div")({
         })]
       })]
     }), /* @__PURE__ */ e($o, {
-      className: P(Xe, A && on, !A && en),
+      className: M(Xe, A && on, !A && en),
       children: /* @__PURE__ */ e(Ze, {
         ref: m
       })
@@ -436,30 +436,30 @@ const wo = /* @__PURE__ */ n("div")({
     onClose: Eo,
     markAsViewed: w,
     externalAd: so
-  } = o, V = d.type === S.INGAME_IAB11_LBAR || d.type === S.INGAME_IAB11, j = ((s = d.sponsor) == null ? void 0 : s.logo) && d.logoMode === L.CENTER, to = !!((t = (i = d.banner) == null ? void 0 : i.video) != null && t.url), x = d.autoPlayVideo === Ro.ENABLED;
-  if (M(() => {
+  } = o, V = d.type === S.INGAME_IAB11_LBAR || d.type === S.INGAME_IAB11, j = ((s = d.sponsor) == null ? void 0 : s.logo) && d.logoMode === k.CENTER, to = !!((t = (i = d.banner) == null ? void 0 : i.video) != null && t.url), x = d.autoPlayVideo === Ro.ENABLED;
+  if (L(() => {
     E == null || E(to || x), no == null || no();
-  }, []), M(() => {
+  }, []), L(() => {
     B && d.type && w && w();
-  }, [B, d.type, w]), M(() => () => {
+  }, [B, d.type, w]), L(() => () => {
     _ == null || _({ muted: !1 });
   }, [_]), so)
     return /* @__PURE__ */ e(nn, { ...o, externalAd: so });
-  let k = (l = d.banner) == null ? void 0 : l.url;
-  k && k.indexOf("http") !== 0 && (k = `https://${k}`);
+  let P = (l = d.banner) == null ? void 0 : l.url;
+  P && P.indexOf("http") !== 0 && (P = `https://${P}`);
   let U = !0;
   return to && (!To || !x ? U = !0 : U = !1), /* @__PURE__ */ v(yo, { className: "PromoOverlay", children: [
     /* @__PURE__ */ v(bo, { children: [
-      /* @__PURE__ */ v(fo, { className: P(!j && No), children: [
-        ((r = d.sponsor) == null ? void 0 : r.logo) && d.logoMode === L.LEFT && /* @__PURE__ */ e(ao, { className: "PromoSponsorLogo", src: (c = d.sponsor) == null ? void 0 : c.logo, alt: "promo" }),
+      /* @__PURE__ */ v(fo, { className: M(!j && No), children: [
+        ((r = d.sponsor) == null ? void 0 : r.logo) && d.logoMode === k.LEFT && /* @__PURE__ */ e(ao, { className: "PromoSponsorLogo", src: (c = d.sponsor) == null ? void 0 : c.logo, alt: "promo" }),
         /* @__PURE__ */ v(
           Ve,
           {
             style: {
-              paddingLeft: (m = d.sponsor) != null && m.logo && d.logoMode === L.LEFT ? "0px" : "8px"
+              paddingLeft: (m = d.sponsor) != null && m.logo && d.logoMode === k.LEFT ? "0px" : "8px"
             },
             children: [
-              ((A = d.sponsor) == null ? void 0 : A.logo) && d.logoMode === L.LEFT && /* @__PURE__ */ e(Re, { children: (a = d.sponsor) == null ? void 0 : a.name }),
+              ((A = d.sponsor) == null ? void 0 : A.logo) && d.logoMode === k.LEFT && /* @__PURE__ */ e(Re, { children: (a = d.sponsor) == null ? void 0 : a.name }),
               /* @__PURE__ */ v(je, { className: "SponsorText", children: [
                 /* @__PURE__ */ e(Co, { children: "AD" }),
                 /* @__PURE__ */ e(Ue, { children: "SPONSORED" })
@@ -482,7 +482,7 @@ const wo = /* @__PURE__ */ n("div")({
     /* @__PURE__ */ v($o, { children: [
       j && /* @__PURE__ */ e(ao, { className: qe, src: (p = d.sponsor) == null ? void 0 : p.logo, alt: "promo" }),
       /* @__PURE__ */ e(ro, { children: ($ = (I = d.banner) == null ? void 0 : I.video) != null && $.url ? /* @__PURE__ */ e(
-        Lo,
+        ko,
         {
           source: (y = (h = d.banner) == null ? void 0 : h.video) == null ? void 0 : y.url,
           poster: (O = (b = d.banner) == null ? void 0 : b.video) == null ? void 0 : O.thumbnailUrl,
@@ -504,14 +504,14 @@ const wo = /* @__PURE__ */ n("div")({
         }
       ) : (f = d.banner) != null && f.imageUrl ? /* @__PURE__ */ e(De, { style: V ? { aspectRatio: "1/1" } : {}, src: (C = d.banner) == null ? void 0 : C.imageUrl, alt: "promo" }) : null }),
       !V && /* @__PURE__ */ v(ro, { children: [
-        ((W = d.banner) == null ? void 0 : W.title) && /* @__PURE__ */ e(Ge, { className: P("AdvTitle", j && We), children: (H = d.banner) == null ? void 0 : H.title }),
+        ((W = d.banner) == null ? void 0 : W.title) && /* @__PURE__ */ e(Ge, { className: M("AdvTitle", j && We), children: (H = d.banner) == null ? void 0 : H.title }),
         ((K = d.banner) == null ? void 0 : K.body) && /* @__PURE__ */ e(we, { className: "AdvDescription", children: (Y = d.banner) == null ? void 0 : Y.body })
       ] })
     ] }),
     d.buttonType !== Do.NO_BUTTON && /* @__PURE__ */ e(Fe, { children: /* @__PURE__ */ e(
       ze,
       {
-        href: k,
+        href: P,
         style: {
           backgroundColor: ((Z = (J = d.banner) == null ? void 0 : J.ctaButton) == null ? void 0 : Z.color) || "#009dc4",
           color: ((X = (Q = d.banner) == null ? void 0 : Q.ctaButton) == null ? void 0 : X.textColor) || "#fff"
@@ -637,7 +637,7 @@ const wo = /* @__PURE__ */ n("div")({
 }) => {
   var u, p, I;
   const $ = F(null), h = uo(o.advertisement.$store);
-  Mo($, {
+  Lo($, {
     enabled: !!h.data,
     event: "click",
     listener: cn
@@ -651,7 +651,7 @@ const wo = /* @__PURE__ */ n("div")({
     style: {
       height: y ? "auto" : "100%"
     },
-    className: P("SL-AdvertisementUIWrap", m && "mobile-view", b && "SL-AdvertisementUIWrap--lower-third"),
+    className: M("SL-AdvertisementUIWrap", m && "mobile-view", b && "SL-AdvertisementUIWrap--lower-third"),
     children: /* @__PURE__ */ e(ln, {
       skipTypeCheck: t,
       sidebar: l,
@@ -682,7 +682,7 @@ const wo = /* @__PURE__ */ n("div")({
   notification: a
 }) => {
   const g = uo(o.featuresList.getStore());
-  if (M(() => {
+  if (L(() => {
     if (i) {
       const p = document.createElement("script");
       p.async = !0, p.src = "https://imasdk.googleapis.com/js/sdkloader/ima3.js", document.body.appendChild(p);
@@ -731,7 +731,7 @@ const wo = /* @__PURE__ */ n("div")({
 }) => {
   const g = Oo(), u = _o(), p = Bo();
   return g ? a && !u.promotionExternalAd ? o !== void 0 && /* @__PURE__ */ e(T, { event: o }) : !a && u.promotionExternalAd ? o !== void 0 && /* @__PURE__ */ e(T, { event: o }) : s && !u.promotionSidebar ? o !== void 0 && /* @__PURE__ */ e(T, { event: o }) : i && !u.promotionBanner ? o !== void 0 && /* @__PURE__ */ e(T, { event: o }) : m && !u.promotionNotification ? o !== void 0 && /* @__PURE__ */ e(T, { event: o }) : !i && !s && !m && !u.promotionOverlay ? o !== void 0 && /* @__PURE__ */ e(T, { event: o }) : /* @__PURE__ */ v("div", { className: "StreamLayerSDK", children: [
-    /* @__PURE__ */ e(xo, { customTheme: c ?? p, children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(xo, { customTheme: c ?? p.theme, themeMode: p.themeMode, children: /* @__PURE__ */ e(
       mn,
       {
         sdk: g,

package/lib/es/auth.js

@@ -1,5 +1,5 @@
 import { useEffect as o } from "react";
-import { u } from "./index2.js";
+import { u } from "./provider.js";
 const f = ({ token: t, schema: i }) => {
   const r = u();
   return o(() => {

package/lib/es/gamification-feature.js

@@ -1,4 +1,4 @@
-import { P as f } from "./index2.js";
+import { P as f } from "./provider.js";
 export {
   f as default
 };

package/lib/es/index.js

@@ -1,12 +1,16 @@
-import { a0 as S, S as s, a3 as o, d as y, u as L, j as i } from "./index2.js";
+import { a1 as S, S as o, a8 as i, h as s, u as y, b as L, j as p } from "./provider.js";
 import "./useStreamLayerApp2.js";
 import "react/jsx-runtime";
 import "react";
+import { StreamLayerSDKNotification as u, StreamLayerSDKNotificationUI as D } from "./notification.js";
 export {
   S as StreamLayerProvider,
-  s as StreamLayerSDKEvent,
-  o as StreamLayerSDKReact,
-  y as StreamLayerThemeProvider,
-  L as useStreamLayer,
-  i as useStreamLayerUI
+  o as StreamLayerSDKEvent,
+  u as StreamLayerSDKNotification,
+  D as StreamLayerSDKNotificationUI,
+  i as StreamLayerSDKReact,
+  s as StreamLayerThemeProvider,
+  y as useStreamLayer,
+  L as useStreamLayerTheme,
+  p as useStreamLayerUI
 };

package/lib/es/insight.js

@@ -1,8 +1,8 @@
 import { jsx as u, jsxs as c } from "react/jsx-runtime";
-import { useRef as l, useEffect as p } from "react";
-import { a as m, s as h, z as f, u as S, b as I, d as g, S as v } from "./index2.js";
+import { useRef as l, useEffect as h } from "react";
+import { a as m, s as p, z as f, u as S, b as I, h as g, S as v } from "./provider.js";
 import { S as y } from "./useStreamLayerApp2.js";
-const Q = () => f, b = /* @__PURE__ */ h(Q())({
+const Q = () => f, b = /* @__PURE__ */ p(Q())({
   name: "QuestionWrap",
   class: "q10hhsxv",
   propsAsIs: !0
@@ -10,24 +10,24 @@ const Q = () => f, b = /* @__PURE__ */ h(Q())({
   gamification: e,
   persistent: r,
   skipAutoClose: n,
-  hideHeader: a,
+  hideHeader: o,
   insightId: s
 }) => {
   const t = l(""), d = m(e.openedQuestion.$store);
-  return p(() => s ? (!r || e.isOpenedQuestion(s) || (t.current = s, e.getFeedItem(s).then((i) => {
-    var o;
-    t.current === s && ((o = i == null ? void 0 : i.attributes) == null ? void 0 : o.attributes.case) === "insight" && e.openQuestion(s, i);
+  return h(() => s ? (!r || e.isOpenedQuestion(s) || (t.current = s, e.getFeedItem(s).then((i) => {
+    var a;
+    t.current === s && ((a = i == null ? void 0 : i.attributes) == null ? void 0 : a.attributes.case) === "insight" && e.openQuestion(s, i);
   })), () => {
     t.current = "";
   }) : (e.activeQuestionId.subscribe(({
     data: i
   }) => {
-    var o;
-    i && ((o = i.feedItem) == null ? void 0 : o.type) === "insight" && (!r || e.isOpenedQuestion(i.feedItem.id) || (t.current = i.feedItem.id, e.openQuestion(i.feedItem.id, i.feedItem))), !i && t.current && (e.closeQuestion(t.current), t.current = "");
+    var a;
+    i && ((a = i.feedItem) == null ? void 0 : a.type) === "insight" && (!r || e.isOpenedQuestion(i.feedItem.id) || (t.current = i.feedItem.id, e.openQuestion(i.feedItem.id, i.feedItem))), !i && t.current && (e.closeQuestion(t.current), t.current = "");
   }), () => {
   }), [e, r, s]), d ? /* @__PURE__ */ u(b, {
     skipAutoClose: n,
-    hideHeader: a,
+    hideHeader: o,
     gamification: e,
     hideSponsor: !0
   }) : null;
@@ -35,14 +35,14 @@ const Q = () => f, b = /* @__PURE__ */ h(Q())({
   sdk: e,
   persistent: r,
   skipAutoClose: n,
-  insightId: a,
+  insightId: o,
   hideHeader: s
 }) => {
   if (!m(e.featuresList.getStore()))
     return null;
   const t = e.getFeature(y.GAMES);
   return t ? /* @__PURE__ */ u(k, {
-    insightId: a,
+    insightId: o,
     persistent: r,
     hideHeader: s,
     gamification: t,
@@ -52,15 +52,15 @@ const Q = () => f, b = /* @__PURE__ */ h(Q())({
   event: e,
   theme: r,
   hideHeader: n,
-  skipAutoClose: a,
+  skipAutoClose: o,
   persistent: s
 }) => {
   const t = S(), d = I();
   return t ? /* @__PURE__ */ c("div", { className: "StreamLayerSDK", children: [
-    /* @__PURE__ */ u(g, { customTheme: r ?? d, children: /* @__PURE__ */ u(
+    /* @__PURE__ */ u(g, { customTheme: r ?? d.theme, themeMode: d.themeMode, children: /* @__PURE__ */ u(
       A,
       {
-        skipAutoClose: a,
+        skipAutoClose: o,
         sdk: t,
         hideHeader: n,
         persistent: s

package/lib/es/masters.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import { M as o, a as s } from "./masters2.js";
 import "react";
-import "./index2.js";
+import "./provider.js";
 export {
   o as MastersStreamLayerProvider,
   s as MastersStreamLayerSDKReact

package/lib/es/masters2.js

@@ -1,6 +1,6 @@
 import { jsx as n, jsxs as L, Fragment as V } from "react/jsx-runtime";
-import { s as u, k as n2, a as v, N as k, l as G, F as C2, m as o2, n as v2, p as h2, o as m2, q as g2, r as f2, M as L2, T as S2, t as b2, C as y2, v as k2, O as r2, w as M, x as I2, y as N2, A as i2, B as P, I as a2, h as W, D as A2, E as w2, G as E2, H as $2, i as T2, J as H, K as Y, Q as V2, R as x2, U as R2, e as F2, V as T, W as j, L as _, X as H2, Z as D2, _ as M2, f as O, $ as _2, a0 as O2, a1 as U2, a2 as z2 } from "./index2.js";
-import { useRef as E, useState as I, useEffect as b, createContext as G2, useContext as l2, useTransition as B2, lazy as P2, useMemo as F, Suspense as W2, forwardRef as Z2, useLayoutEffect as Q2, useCallback as R, Component as q2 } from "react";
+import { s as u, k as n2, a as v, A as k, l as G, F as C2, m as o2, n as v2, p as h2, o as m2, N as g2, q as f2, M as L2, T as S2, r as b2, C as y2, t as k2, O as r2, v as M, w as I2, x as N2, y as A2, B as i2, D as P, I as a2, f as W, E as w2, G as E2, H as $2, J as T2, i as V2, K as D, Q as Y, R as x2, U as R2, V as F2, e as D2, W as T, X as j, L as _, Z as H2, _ as M2, $ as _2, c as O, a0 as O2, a1 as U2, a2 as z2, a3 as G2 } from "./provider.js";
+import { useRef as E, useState as I, useEffect as b, createContext as B2, useContext as l2, lazy as P2, useMemo as F, Suspense as W2, forwardRef as Z2, useLayoutEffect as Q2, useCallback as R, Component as q2 } from "react";
 import { Q as Y2, S as $ } from "./useStreamLayerApp2.js";
 const j2 = /* @__PURE__ */ u("div")({
   name: "SDKContainer",
@@ -14,7 +14,7 @@ const j2 = /* @__PURE__ */ u("div")({
   name: "SDKContentContainer",
   class: "sw7pkvp",
   propsAsIs: !1
-}), X2 = () => d2, D = /* @__PURE__ */ u(X2())({
+}), X2 = () => d2, H = /* @__PURE__ */ u(X2())({
   name: "SDKWhiteContainer",
   class: "s14gkn7u",
   propsAsIs: !0
@@ -22,11 +22,11 @@ const j2 = /* @__PURE__ */ u("div")({
   name: "TabsContainer",
   class: "t1yxstm9",
   propsAsIs: !1
-}), e0 = () => D, s0 = /* @__PURE__ */ u(e0())({
+}), e0 = () => H, s0 = /* @__PURE__ */ u(e0())({
   name: "LeaderboardContainer",
   class: "ldpty1s",
   propsAsIs: !0
-}), t0 = () => D, n0 = /* @__PURE__ */ u(t0())({
+}), t0 = () => H, n0 = /* @__PURE__ */ u(t0())({
   name: "TabsNavContainer",
   class: "t136a59y",
   propsAsIs: !0
@@ -104,7 +104,7 @@ const j2 = /* @__PURE__ */ u("div")({
       });
   }
   return t;
-}, c2 = G2({
+}, c2 = B2({
   sdk: null
 }), Q = () => l2(c2), l0 = /* @__PURE__ */ u("div")({
   name: "QuestionContainer",
@@ -225,7 +225,7 @@ const j2 = /* @__PURE__ */ u("div")({
     };
   }, [e]), /* @__PURE__ */ n(r2, { loading: !(t != null && t.summary), ...t == null ? void 0 : t.summary, successRate: (s = t == null ? void 0 : t.percentage) == null ? void 0 : s.correct });
 }, f0 = ({ gamification: e, className: s, scrollStore: t, scrollNode: o, appNode: r, style: i, responsiveStore: a }) => {
-  const { tabsShown: p } = v(t, { keys: ["tabsShown"] }), [c, d] = I(M.HOME), [, l] = B2(), { sdkInDesktopView: C, screen: m } = v(a, { keys: ["sdkInDesktopView"] }), S = (f) => {
+  const { tabsShown: p } = v(t, { keys: ["tabsShown"] }), [c, d] = I(M.HOME), [, l] = I2(), { sdkInDesktopView: C, screen: m } = v(a, { keys: ["sdkInDesktopView"] }), S = (f) => {
     l(() => {
       var y;
       d(f), C === !1 && (((y = r.current) == null ? void 0 : y.getBoundingClientRect().y) || 0) < 0 && Z(r, m.size, { behavior: "instant" });
@@ -246,11 +246,11 @@ const j2 = /* @__PURE__ */ u("div")({
         style: {
           top: h
         },
-        children: /* @__PURE__ */ n(I2, { activePage: c, toggleActivePage: S })
+        children: /* @__PURE__ */ n(N2, { activePage: c, toggleActivePage: S })
       }
     ),
     c === M.HOME && /* @__PURE__ */ L(V, { children: [
-      /* @__PURE__ */ n(D, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ n(o0, { children: /* @__PURE__ */ n(g0, { userSummary: e.userSummary }) }) }),
+      /* @__PURE__ */ n(H, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ n(o0, { children: /* @__PURE__ */ n(g0, { userSummary: e.userSummary }) }) }),
       /* @__PURE__ */ n(d2, { style: { flex: 1 }, children: /* @__PURE__ */ n(m0, { openQuestion: e.openQuestion, store: e.feedList.getStore() }) })
     ] }),
     c === M.LEADERBOARD && /* @__PURE__ */ n(s0, { children: /* @__PURE__ */ n(h0, { scrollStore: t, scrollNode: o, gamification: e }) })
@@ -296,7 +296,7 @@ const j2 = /* @__PURE__ */ u("div")({
   }), {
     hiding: p,
     onAnimationEnd: c
-  } = N2();
+  } = A2();
   if (!t.current || !r && !i)
     return null;
   const d = r ? /* @__PURE__ */ n(K, {
@@ -314,7 +314,7 @@ const j2 = /* @__PURE__ */ u("div")({
       children: [/* @__PURE__ */ n(o2, {
         label: "Friend's Rank",
         close: e.closeUser
-      }), /* @__PURE__ */ n(D, {
+      }), /* @__PURE__ */ n(H, {
         children: /* @__PURE__ */ n(r2, {
           ...i,
           successRate: b0(i)
@@ -388,15 +388,15 @@ const j2 = /* @__PURE__ */ u("div")({
   name: "Navigation",
   class: "n19lpak2",
   propsAsIs: !1
-}), F0 = () => A2, H0 = /* @__PURE__ */ u(F0())({
+}), F0 = () => w2, D0 = /* @__PURE__ */ u(F0())({
   name: "NavigationItems",
   class: "n1w473c2",
   propsAsIs: !0
-}), D0 = Z2(
+}), H0 = Z2(
   ({ activeOverlay: e, setActiveOverlay: s, scrollToTop: t, sdkReady: o, className: r, responsiveStore: i }, a) => {
     const { screen: p } = v(i, { keys: ["screen"] });
     return /* @__PURE__ */ L(R0, { className: r, children: [
-      /* @__PURE__ */ L(H0, { children: [
+      /* @__PURE__ */ L(D0, { children: [
         /* @__PURE__ */ n(
           E0,
           {
@@ -528,7 +528,7 @@ const j2 = /* @__PURE__ */ u("div")({
       g();
     };
   }, [e.$store]), /* @__PURE__ */ n(q0, {
-    children: /* @__PURE__ */ n(E2, {
+    children: /* @__PURE__ */ n($2, {
       loading: r,
       rules: [{
         label: "Answer as many questions as you like.",
@@ -583,7 +583,7 @@ const j2 = /* @__PURE__ */ u("div")({
   const {
     loading: f,
     throttled: y
-  } = w2(S);
+  } = E2(S);
   return l && m && d && r.current && !y ? /* @__PURE__ */ n(i2, {
     container: r,
     useContainer: !i,
@@ -643,7 +643,7 @@ const j2 = /* @__PURE__ */ u("div")({
   name: "NotificationRefreshing",
   class: "n13rok4i",
   propsAsIs: !1
-}), o1 = () => $2, r1 = /* @__PURE__ */ u(o1())({
+}), o1 = () => T2, r1 = /* @__PURE__ */ u(o1())({
   name: "Pill",
   class: "pht79xf",
   propsAsIs: !0
@@ -674,7 +674,7 @@ const j2 = /* @__PURE__ */ u("div")({
   }), {
     sdk: p
   } = Q(), [c, d, l] = i1(s.id);
-  return s.type === H.QUESTION ? /* @__PURE__ */ L(V, {
+  return s.type === D.QUESTION ? /* @__PURE__ */ L(V, {
     children: [/* @__PURE__ */ n(t1, {
       ref: c,
       children: /* @__PURE__ */ n(Y, {
@@ -695,7 +695,7 @@ const j2 = /* @__PURE__ */ u("div")({
         })
       }), /* @__PURE__ */ n(n1, {}, s.id)]
     })]
-  }) : s.type === H.QUESTION_RESOLVED && (i = (r = s.data) == null ? void 0 : r.question) != null && i.predictionResult ? /* @__PURE__ */ n(V2, {
+  }) : s.type === D.QUESTION_RESOLVED && (i = (r = s.data) == null ? void 0 : r.question) != null && i.predictionResult ? /* @__PURE__ */ n(x2, {
     style: {
       height: s.hiding ? 0 : d
     },
@@ -704,7 +704,7 @@ const j2 = /* @__PURE__ */ u("div")({
     hiding: s.hiding,
     ...s.data.question,
     mastersApp: !0
-  }) : s.type === H.ONBOARDING ? /* @__PURE__ */ n(X0, {
+  }) : s.type === D.ONBOARDING ? /* @__PURE__ */ n(X0, {
     style: {
       height: s.hiding ? 0 : d
     },
@@ -739,8 +739,8 @@ const j2 = /* @__PURE__ */ u("div")({
     i.get().sdkInDesktopView ? C < 50 && s(null) : C > -50 && s(null);
   }, [C, i, s]);
   const m = i.get().sdkInDesktopView ? t : o;
-  return !e || !m.current ? null : x2.createPortal(/* @__PURE__ */ n(r1, {
-    title: e.type === H.QUESTION_RESOLVED ? "Prediction result" : `New ${((c = R2[(p = e.data) == null ? void 0 : p.questionType]) == null ? void 0 : c.label) || "notification"}`,
+  return !e || !m.current ? null : R2.createPortal(/* @__PURE__ */ n(r1, {
+    title: e.type === D.QUESTION_RESOLVED ? "Prediction result" : `New ${((c = F2[(p = e.data) == null ? void 0 : p.questionType]) == null ? void 0 : c.label) || "notification"}`,
     onClick: () => {
       var S;
       i.get().sdkInDesktopView ? (S = r.current) == null || S.scrollTo({
@@ -750,7 +750,7 @@ const j2 = /* @__PURE__ */ u("div")({
         behavior: "smooth"
       }), s(null);
     },
-    className: F2(l && l1, "sl-pill-button")
+    className: D2(l && l1, "sl-pill-button")
   }), m.current);
 }, c1 = ({
   sdk: e,
@@ -762,7 +762,7 @@ const j2 = /* @__PURE__ */ u("div")({
 }) => {
   const [a] = I(e.getNotificationsStore()), p = v(a), [c, d] = I(null), l = F(() => e.getActiveNotification(), [e, p]);
   return b(() => {
-    l && T2.emit("notification", {
+    l && V2.emit("notification", {
       action: "rendered",
       payload: {
         questionId: l.data.questionId,
@@ -934,7 +934,7 @@ const j2 = /* @__PURE__ */ u("div")({
     --header-offset: 76px;
   `}`;
 const h1 = "m1ojpy2l", m1 = ({ children: e, style: s }) => /* @__PURE__ */ n("div", { className: "StreamLayerSDKTheme", children: /* @__PURE__ */ n("div", { className: h1, style: s, children: e }) }), g1 = ({ sdk: e, className: s, scrollStore: t, appNode: o, scrollNode: r, responsiveStore: i }) => {
-  const [, a] = _2(e);
+  const [, a] = O2(e);
   return /* @__PURE__ */ n(
     I0,
     {
@@ -968,12 +968,12 @@ const h1 = "m1ojpy2l", m1 = ({ children: e, style: s }) => /* @__PURE__ */ n("di
   _(o, { enabled: c, event: "click", listener: H2 }), _(a, {
     enabled: c,
     event: "scrollend",
-    listener: D2,
+    listener: M2,
     useDomNode: !0
   }), _(a, {
     enabled: c,
     event: "click",
-    listener: M2,
+    listener: _2,
     useDomNode: !0
   });
   const f = F(() => ({ sdk: e }), [e]);
@@ -981,7 +981,7 @@ const h1 = "m1ojpy2l", m1 = ({ children: e, style: s }) => /* @__PURE__ */ n("di
     import("./gamification-feature2.js");
   }, []), /* @__PURE__ */ n(c2.Provider, { value: f, children: /* @__PURE__ */ L(j2, { ref: o, children: [
     c && /* @__PURE__ */ n(
-      D0,
+      H0,
       {
         ref: r,
         sdkReady: d,
@@ -1031,7 +1031,7 @@ const h1 = "m1ojpy2l", m1 = ({ children: e, style: s }) => /* @__PURE__ */ n("di
     )
   ] }) });
 }, A1 = ({ sdkKey: e, plugins: s, children: t, onDeepLinkHandled: o, videoPlayerController: r, production: i = !0 }) => /* @__PURE__ */ n(
-  O2,
+  U2,
   {
     sdkKey: e,
     plugins: s,
@@ -1042,8 +1042,8 @@ const h1 = "m1ojpy2l", m1 = ({ children: e, style: s }) => /* @__PURE__ */ n("di
     children: t
   }
 ), S1 = ({ children: e, overlays: s }) => {
-  const { sdk: t, status: o } = l2(U2);
-  return o === z2.UNSET ? (console.error("Wrap app in `StreamLayerProvider`"), e({})) : t ? /* @__PURE__ */ n("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ n(m1, { style: { height: "100%" }, children: /* @__PURE__ */ n(L1, { sdk: t, overlays: s, children: e }) }) }) : e({});
+  const { sdk: t, status: o } = l2(z2);
+  return o === G2.UNSET ? (console.error("Wrap app in `StreamLayerProvider`"), e({})) : t ? /* @__PURE__ */ n("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ n(m1, { style: { height: "100%" }, children: /* @__PURE__ */ n(L1, { sdk: t, overlays: s, children: e }) }) }) : e({});
 };
 class w1 extends q2 {
   constructor(s) {