@streamlayer/react 0.26.3 → 0.27.0

package/lib/es/masters.js

@@ -1,14 +1,14 @@
-import { jsx as a, jsxs as d, Fragment as S } from "react/jsx-runtime";
-import { useRef as _, useState as v, useMemo as L, useCallback as E, useEffect as N, useContext as Q } from "react";
-import { s as r, q as f, o as C, Y as R, e as j, j as O, g as q, v as F, h as y, i as M, k as G, l as x, r as A, m as D, f as I, S as B, a as P, b as T, p as z } from "../index-72a4fe17.js";
+import { jsx as a, jsxs as d, Fragment as I } from "react/jsx-runtime";
+import { useRef as C, useState as f, useMemo as R, useCallback as j, useEffect as N, useContext as F } from "react";
+import { s as r, q as v, o as O, Y as q, j as M, d as U, v as _, e as y, g as w, i as G, k as $, r as A, l as D, f as x, S as P, a as T, b as B, p as H } from "../index-ad42babc.js";
 import "react-auth-code-input";
 import "react-phone-number-input";
 import "@connectrpc/connect";
 import "@connectrpc/connect-web";
 import "@streamlayer/sl-eslib/users/users_connect";
 import "react-countdown-circle-timer";
-import { QuestionType as H, FeatureType as w } from "@streamlayer/sdk-web-types";
-import { FeatureStatus as h } from "@streamlayer/sdk-web-interfaces";
+import { QuestionType as z, FeatureType as L } from "@streamlayer/sdk-web-types";
+import { FeatureStatus as b } from "@streamlayer/sdk-web-interfaces";
 import "@streamlayer/sdk-web-features";
 import "@streamlayer/sdk-web-api";
 import "@streamlayer/sdk-web-storage";
@@ -21,62 +21,62 @@ import "@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb";
 import "@streamlayer/sl-eslib/sdkSettings/sdkSettings.common_pb";
 import "@streamlayer/sl-eslib/sports/events/events_connect";
 import "@streamlayer/sl-eslib/sdkSettings/client/client_connect";
-const U = ({ feature: s, sdk: e, children: t, className: n }) => {
-  const l = u(s.status), { slStreamId: o } = u(e.sdkStore);
-  return o != null && o.loading ? /* @__PURE__ */ a("div", { className: n, children: "event is loading..." }) : o != null && o.data ? l !== h.Ready ? /* @__PURE__ */ a("div", { className: n, children: "wait feature..." }) : t : /* @__PURE__ */ a("div", { className: n, children: "event is forbidden..." });
+const K = ({ feature: e, sdk: s, children: n, className: t }) => {
+  const l = u(e.status), { slStreamId: o } = u(s.sdkStore);
+  return o != null && o.loading ? /* @__PURE__ */ a("div", { className: t, children: "event is loading..." }) : o != null && o.data ? l !== b.Ready ? /* @__PURE__ */ a("div", { className: t, children: "wait feature..." }) : n : /* @__PURE__ */ a("div", { className: t, children: "event is forbidden..." });
 };
-const K = /* @__PURE__ */ r("div")({
-  name: "n",
-  class: "n1aopxp8",
-  propsAsIs: !1
-}), V = ({
-  children: s,
-  style: e,
-  className: t
-}) => /* @__PURE__ */ a(K, {
-  style: e,
-  className: t,
-  children: s
-});
-const W = () => f, Y = () => f, Z = /* @__PURE__ */ r("div")({
+const J = () => v, V = () => v, W = /* @__PURE__ */ r("div")({
   name: "a",
   class: "acysrl1",
   propsAsIs: !1
-}), J = /* @__PURE__ */ r("div")({
+}), Y = /* @__PURE__ */ r("div")({
   name: "l",
   class: "lo57cjm",
   propsAsIs: !1
-}), X = /* @__PURE__ */ r(W())({
+}), X = /* @__PURE__ */ r(J())({
   name: "p",
   class: "p14kwh4y",
   propsAsIs: !0
-}), ee = /* @__PURE__ */ r("span")({
+}), Z = /* @__PURE__ */ r("span")({
   name: "s",
   class: "sxun7sq",
   propsAsIs: !1
-}), se = /* @__PURE__ */ r("button")({
+}), ee = /* @__PURE__ */ r("button")({
   name: "c",
   class: "c1i8ida8",
   propsAsIs: !1
-}), ae = /* @__PURE__ */ r(Y())({
+}), se = /* @__PURE__ */ r(V())({
   name: "g",
   class: "g1m0xfmw",
   propsAsIs: !0
-}), te = ({ type: s, close: e }) => {
-  const t = C[s];
-  return /* @__PURE__ */ d(Z, { children: [
-    /* @__PURE__ */ d(J, { children: [
+}), E = ({ type: e, close: s, label: n }) => {
+  const t = e ? O[e] : { label: n, iconName: void 0 };
+  return /* @__PURE__ */ d(W, { children: [
+    /* @__PURE__ */ d(Y, { children: [
       (t == null ? void 0 : t.iconName) && /* @__PURE__ */ a(X, { name: t.iconName }),
-      (t == null ? void 0 : t.label) && /* @__PURE__ */ a(ee, { children: t.label })
+      (t == null ? void 0 : t.label) && /* @__PURE__ */ a(Z, { children: t.label })
     ] }),
-    /* @__PURE__ */ a(se, { onClick: e, children: /* @__PURE__ */ a(ae, { name: "icon-cross" }) })
+    /* @__PURE__ */ a(ee, { onClick: s, children: /* @__PURE__ */ a(se, { name: "icon-cross" }) })
   ] });
 };
+const ae = /* @__PURE__ */ r("div")({
+  name: "n",
+  class: "n1aopxp8",
+  propsAsIs: !1
+}), Q = ({
+  children: e,
+  style: s,
+  className: n
+}) => /* @__PURE__ */ a(ae, {
+  style: s,
+  className: n,
+  children: e
+});
 const ne = /* @__PURE__ */ r("div")({
   name: "i",
   class: "i1bwjtdb",
   propsAsIs: !1
-}), oe = /* @__PURE__ */ r("video")({
+}), te = /* @__PURE__ */ r("video")({
   name: "e",
   class: "enb7moc",
   propsAsIs: !1
@@ -84,275 +84,288 @@ const ne = /* @__PURE__ */ r("div")({
   name: "r",
   class: "r1ws5lyh",
   propsAsIs: !1
-}), le = /* @__PURE__ */ r("div")({
+}), oe = /* @__PURE__ */ r("div")({
   name: "s",
   class: "soibf55",
   propsAsIs: !1
-}), ie = ({ poster: s, source: e }) => {
-  const t = _(null), [n, l] = v(!1), [o, i] = v(!0);
+}), le = ({ poster: e, source: s }) => {
+  const n = C(null), [t, l] = f(!1), [o, i] = f(!0);
   return /* @__PURE__ */ d(ne, { onClick: () => {
-    const c = t == null ? void 0 : t.current;
+    const c = n == null ? void 0 : n.current;
     c && l((p) => p ? (c.pause(), !1) : (c.play(), i(!1), !0));
   }, children: [
     /* @__PURE__ */ a(
-      oe,
+      te,
       {
-        ref: t,
-        src: e,
+        ref: n,
+        src: s,
         onEnded: () => {
           var c;
-          (c = t == null ? void 0 : t.current) == null || c.load(), l(!1), i(!0);
+          (c = n == null ? void 0 : n.current) == null || c.load(), l(!1), i(!0);
         },
         style: { visibility: o ? "hidden" : "visible" }
       }
     ),
-    /* @__PURE__ */ a(re, { src: s, style: { visibility: o ? "visible" : "hidden" } }),
-    /* @__PURE__ */ a(le, { children: !n && /* @__PURE__ */ a(f, { name: "icon-play" }) })
+    /* @__PURE__ */ a(re, { src: e, style: { visibility: o ? "visible" : "hidden" } }),
+    /* @__PURE__ */ a(oe, { children: !t && /* @__PURE__ */ a(v, { name: "icon-play" }) })
   ] });
 };
-const ce = /* @__PURE__ */ r("div")({
+const ie = /* @__PURE__ */ r("div")({
   name: "t",
   class: "t18unvw4",
   propsAsIs: !1
-}), de = /* @__PURE__ */ r("div")({
+}), ce = /* @__PURE__ */ r("div")({
   name: "r",
   class: "rs0uvk8",
   propsAsIs: !1
-}), ue = /* @__PURE__ */ r("h3")({
+}), de = /* @__PURE__ */ r("h3")({
   name: "n",
   class: "n1hem4g7",
   propsAsIs: !1
-}), pe = /* @__PURE__ */ r("div")({
+}), ue = /* @__PURE__ */ r("div")({
   name: "i",
   class: "i193lbwv",
   propsAsIs: !1
-}), me = /* @__PURE__ */ r("a")({
+}), pe = /* @__PURE__ */ r("a")({
   name: "a",
   class: "a1dka9qs",
   propsAsIs: !1
-}), ve = ({ title: s, instantView: e }) => /* @__PURE__ */ d(ce, { children: [
-  (e == null ? void 0 : e.video) && /* @__PURE__ */ a(ie, { source: e.video.url, poster: e.video.thumbnailUrl }),
-  /* @__PURE__ */ d(de, { children: [
-    /* @__PURE__ */ a(ue, { children: (e == null ? void 0 : e.heading) || s }),
-    /* @__PURE__ */ a(pe, { children: e == null ? void 0 : e.body }),
-    (e == null ? void 0 : e.webLink) && /* @__PURE__ */ d(me, { href: "webLink", target: "_blank", children: [
+}), me = ({ title: e, instantView: s }) => /* @__PURE__ */ d(ie, { children: [
+  (s == null ? void 0 : s.video) && /* @__PURE__ */ a(le, { source: s.video.url, poster: s.video.thumbnailUrl }),
+  /* @__PURE__ */ d(ce, { children: [
+    /* @__PURE__ */ a(de, { children: (s == null ? void 0 : s.heading) || e }),
+    /* @__PURE__ */ a(ue, { children: s == null ? void 0 : s.body }),
+    (s == null ? void 0 : s.webLink) && /* @__PURE__ */ d(pe, { href: "webLink", target: "_blank", children: [
       "Explore more of the Masters History",
-      /* @__PURE__ */ a(f, { name: "icon-external-link" })
+      /* @__PURE__ */ a(v, { name: "icon-external-link" })
     ] })
   ] })
 ] });
-const fe = /* @__PURE__ */ r("div")({
+const ve = /* @__PURE__ */ r("div")({
   name: "d",
   class: "dk8r1eq",
   propsAsIs: !1
-}), he = ({
-  openedQuestion: s
+}), fe = ({
+  openedQuestion: e
 }) => {
-  var e;
-  return ((e = s == null ? void 0 : s.attributes) == null ? void 0 : e.attributes.case) === "insight" ? /* @__PURE__ */ a(ve, {
-    ...s.attributes.attributes.value
+  var s;
+  return ((s = e == null ? void 0 : e.attributes) == null ? void 0 : s.attributes.case) === "insight" ? /* @__PURE__ */ a(me, {
+    ...e.attributes.attributes.value
   }) : null;
 }, be = ({
-  extendedQuestion: s,
-  vote: e
+  extendedQuestion: e,
+  vote: s
 }) => {
   const {
-    loading: t,
-    data: n
-  } = s;
-  return !t && n ? /* @__PURE__ */ a(R, {
-    vote: e,
-    openedQuestion: n
+    loading: n,
+    data: t
+  } = e;
+  return !n && t ? /* @__PURE__ */ a(q, {
+    vote: s,
+    openedQuestion: t
   }) : null;
-}, ye = ({
-  gamification: s
+}, he = ({
+  gamification: e
 }) => {
-  var e;
-  const t = u(s.openedQuestion.$store), n = u(s.openedQuestion.$extendedStore);
-  if (!t)
+  var s;
+  const n = u(e.openedQuestion.$store), t = u(e.openedQuestion.$extendedStore);
+  if (!n)
     return null;
-  const l = t.type;
-  return /* @__PURE__ */ d(fe, {
-    children: [/* @__PURE__ */ a(te, {
-      close: s.closeQuestion,
-      type: ((e = t.attributes) == null ? void 0 : e.type) || H.UNSET
+  const l = n.type;
+  return /* @__PURE__ */ d(ve, {
+    children: [/* @__PURE__ */ a(E, {
+      close: e.closeQuestion,
+      type: ((s = n.attributes) == null ? void 0 : s.type) || z.UNSET
     }), l === "question" && /* @__PURE__ */ a(be, {
-      vote: s.submitAnswer,
-      extendedQuestion: n
-    }), l !== "question" && /* @__PURE__ */ a(he, {
-      openedQuestion: t
+      vote: e.submitAnswer,
+      extendedQuestion: t
+    }), l !== "question" && /* @__PURE__ */ a(fe, {
+      openedQuestion: n
     })]
   });
-}, ge = ({ leaderboardList: s }) => {
-  const { data: e } = u(s.$store), [t, n] = v(void 0), l = (o) => {
-    const i = e.find((c) => c.userId === o);
-    n(i);
-  };
-  return /* @__PURE__ */ d(S, { children: [
-    t && /* @__PURE__ */ a(j, { comeBack: () => l(null), ...t }),
-    !t && /* @__PURE__ */ a(O, { fetchMore: s.fetchMore, items: e, openItemDetail: l })
-  ] });
-}, ke = ({ store: s, openQuestion: e }) => {
-  const t = u(s);
-  return t != null && t.data ? /* @__PURE__ */ a(q, { openQuestion: e, questions: t.data }) : /* @__PURE__ */ a("div", { children: "wait questions..." });
-}, Ae = ({ store: s }) => {
-  const { data: e } = u(s);
-  return e != null && e.summary ? /* @__PURE__ */ a(F, { ...e.summary, ...e.percentage }) : /* @__PURE__ */ a("div", { children: "wait user..." });
-}, Se = ({ gamification: s }) => {
-  const [e, t] = v(y.HOME);
+}, ye = ({ leaderboardList: e, openUser: s }) => {
+  const { data: n } = u(e.$store);
+  return /* @__PURE__ */ a(M, { fetchMore: e.fetchMore, items: n, openItemDetail: s });
+}, ge = ({ store: e, openQuestion: s }) => {
+  const n = u(e);
+  return n != null && n.data ? /* @__PURE__ */ a(U, { openQuestion: s, questions: n.data }) : /* @__PURE__ */ a("div", { children: "wait questions..." });
+}, ke = ({ store: e }) => {
+  const { data: s } = u(e);
+  return s != null && s.summary ? /* @__PURE__ */ a(_, { ...s.summary, ...s.percentage }) : /* @__PURE__ */ a("div", { children: "wait user..." });
+}, Ae = ({ gamification: e }) => {
+  const [s, n] = f(y.HOME);
   return /* @__PURE__ */ d("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ d(M, { children: [
-      /* @__PURE__ */ a(G, { activePage: e, toggleActivePage: t }),
-      e === y.HOME && /* @__PURE__ */ a(Ae, { store: s.userSummary.getStore() })
+    /* @__PURE__ */ d(w, { children: [
+      /* @__PURE__ */ a(G, { activePage: s, toggleActivePage: n }),
+      s === y.HOME && /* @__PURE__ */ a(ke, { store: e.userSummary.getStore() })
     ] }),
-    e === y.HOME && /* @__PURE__ */ a(x, { children: /* @__PURE__ */ a(ke, { openQuestion: s.openQuestion, store: s.feedList.getStore() }) }),
-    e === y.LEADERBOARD && /* @__PURE__ */ a(x, { style: { flex: "1 1 auto", paddingTop: 0, paddingBottom: 0 }, children: /* @__PURE__ */ a(ge, { leaderboardList: s.leaderboardList }) })
+    s === y.HOME && /* @__PURE__ */ a($, { children: /* @__PURE__ */ a(ge, { openQuestion: e.openQuestion, store: e.feedList.getStore() }) }),
+    s === y.LEADERBOARD && /* @__PURE__ */ a($, { style: { flex: "1 1 auto", paddingTop: 0, paddingBottom: 0 }, children: /* @__PURE__ */ a(ye, { openUser: e.openUser, leaderboardList: e.leaderboardList }) })
   ] });
 };
-const $e = () => V, xe = /* @__PURE__ */ r($e())({
-  name: "l",
-  class: "l1ph66cs",
+const Se = () => Q, $e = () => Q, xe = /* @__PURE__ */ r(Se())({
+  name: "v",
+  class: "v1ph66cs",
   propsAsIs: !0
-}), Ie = ({
-  gamification: s,
-  className: e
+}), Ie = /* @__PURE__ */ r($e())({
+  name: "x",
+  class: "xorme7i",
+  propsAsIs: !0
+}), Ne = /* @__PURE__ */ r("div")({
+  name: "b",
+  class: "b1tuxhle",
+  propsAsIs: !1
+}), _e = ({
+  gamification: e,
+  className: s
 }) => {
-  const t = u(s.openedQuestion.$store);
-  return /* @__PURE__ */ d(S, {
-    children: [t && /* @__PURE__ */ a(xe, {
-      className: e,
-      children: /* @__PURE__ */ a(ye, {
-        gamification: s
+  const n = u(e.openedQuestion.$store), t = u(e.openedUser);
+  return /* @__PURE__ */ d(I, {
+    children: [n && /* @__PURE__ */ a(xe, {
+      className: s,
+      children: /* @__PURE__ */ a(he, {
+        gamification: e
+      })
+    }), t && /* @__PURE__ */ a(Ie, {
+      children: /* @__PURE__ */ d(Ne, {
+        children: [/* @__PURE__ */ a(E, {
+          label: "Friend's Rank",
+          close: e.closeUser
+        }), /* @__PURE__ */ a(w, {
+          children: /* @__PURE__ */ a(_, {
+            ...t
+          })
+        })]
       })
     }), /* @__PURE__ */ a(A, {
-      className: e,
+      className: s,
       "data-nav": "true",
-      children: /* @__PURE__ */ a(Se, {
-        gamification: s
+      children: /* @__PURE__ */ a(Ae, {
+        gamification: e
       })
     })]
   });
-}, Ne = ({
-  sdk: s,
-  feature: e,
-  className: t
-}) => L(() => e && e.featureConfig.get().type === w.GAMES ? /* @__PURE__ */ a(U, { className: t, sdk: s, feature: e, children: /* @__PURE__ */ a(Ie, { className: t, gamification: e, sdk: s }) }) : null, [s, e, t]);
-const we = /* @__PURE__ */ r("button")({
+}, we = ({
+  sdk: e,
+  feature: s,
+  className: n
+}) => R(() => s && s.featureConfig.get().type === L.GAMES ? /* @__PURE__ */ a(K, { className: n, sdk: e, feature: s, children: /* @__PURE__ */ a(_e, { className: n, gamification: s, sdk: e }) }) : null, [e, s, n]);
+const Le = /* @__PURE__ */ r("button")({
   name: "e",
   class: "enu64b2",
   propsAsIs: !1
-}), _e = /* @__PURE__ */ r("span")({
+}), Ee = /* @__PURE__ */ r("span")({
   name: "t",
   class: "tw2meku",
   propsAsIs: !1
-}), Le = /* @__PURE__ */ r("span")({
+}), Qe = /* @__PURE__ */ r("span")({
   name: "a",
   class: "aka8vam",
   propsAsIs: !1
-}), $ = ({ disabled: s, active: e, onClick: t, label: n, icon: l }) => /* @__PURE__ */ a(we, { onClick: t, disabled: s, "data-selected": e, children: /* @__PURE__ */ d(S, { children: [
-  l && /* @__PURE__ */ a(_e, { children: l }),
-  /* @__PURE__ */ a(Le, { children: n })
+}), S = ({ disabled: e, active: s, onClick: n, label: t, icon: l }) => /* @__PURE__ */ a(Le, { onClick: n, disabled: e, "data-selected": s, children: /* @__PURE__ */ d(I, { children: [
+  l && /* @__PURE__ */ a(Ee, { children: l }),
+  /* @__PURE__ */ a(Qe, { children: t })
 ] }) });
-const Ee = () => f, Qe = /* @__PURE__ */ r(Ee())({
+const Ce = () => v, Re = /* @__PURE__ */ r(Ce())({
   name: "a",
   class: "a10lggiw",
   propsAsIs: !0
-}), b = "channels", Ce = (s) => {
-  var e;
-  return /* @__PURE__ */ a($, {
-    ...s,
+}), h = "channels", je = (e) => {
+  var s;
+  return /* @__PURE__ */ a(S, {
+    ...e,
     id: "channels",
     label: "Channels",
-    icon: /* @__PURE__ */ a(Qe, {
+    icon: /* @__PURE__ */ a(Re, {
       name: "icon-btn-channels",
-      "data-selected": (e = s.active) == null ? void 0 : e.toString()
+      "data-selected": (s = e.active) == null ? void 0 : s.toString()
     })
   });
 };
-const Re = () => f, je = /* @__PURE__ */ r(Re())({
+const Fe = () => v, Oe = /* @__PURE__ */ r(Fe())({
   name: "d",
   class: "d1x5s8ie",
   propsAsIs: !0
-}), m = "featuredGroups", Oe = (s) => {
-  var e;
-  return /* @__PURE__ */ a($, {
-    ...s,
+}), m = "featuredGroups", qe = (e) => {
+  var s;
+  return /* @__PURE__ */ a(S, {
+    ...e,
     label: "FG+",
     id: "featuredGroups",
-    icon: /* @__PURE__ */ a(je, {
+    icon: /* @__PURE__ */ a(Oe, {
       name: "icon-btn-feature-groups",
-      "data-selected": (e = s.active) == null ? void 0 : e.toString()
+      "data-selected": (s = e.active) == null ? void 0 : s.toString()
     })
   });
 };
-const qe = () => f, Fe = /* @__PURE__ */ r(qe())({
+const Me = () => v, Ue = /* @__PURE__ */ r(Me())({
   name: "n",
   class: "ntav86o",
   propsAsIs: !0
-}), g = "leaderboard", Me = (s) => {
-  var e;
-  return /* @__PURE__ */ a($, {
-    ...s,
+}), g = "leaderboard", Ge = (e) => {
+  var s;
+  return /* @__PURE__ */ a(S, {
+    ...e,
     label: "Leader Board",
     id: "leaderboard",
-    icon: /* @__PURE__ */ a(Fe, {
+    icon: /* @__PURE__ */ a(Ue, {
       name: "icon-btn-leaderboard",
-      "data-selected": (e = s.active) == null ? void 0 : e.toString()
+      "data-selected": (s = e.active) == null ? void 0 : s.toString()
     })
   });
 };
-const Ge = /* @__PURE__ */ r("div")({
+const De = /* @__PURE__ */ r("div")({
   name: "n",
   class: "n1rlvhvz",
   propsAsIs: !1
-}), De = ({
-  children: s,
-  className: e
-}) => /* @__PURE__ */ a(Ge, {
-  className: e,
-  children: s
+}), Pe = ({
+  children: e,
+  className: s
+}) => /* @__PURE__ */ a(De, {
+  className: s,
+  children: e
 });
-const Be = () => De, Pe = /* @__PURE__ */ r(Be())({
+const Te = () => Pe, Be = /* @__PURE__ */ r(Te())({
   name: "n",
   class: "n9bnom",
   propsAsIs: !0
-}), Te = ({ activeOverlay: s, setActiveOverlay: e, sdkReady: t, className: n }) => /* @__PURE__ */ d(Pe, { className: n, children: [
-  /* @__PURE__ */ a(Ce, { active: s === b, onClick: () => e(b) }),
+}), He = ({ activeOverlay: e, setActiveOverlay: s, sdkReady: n, className: t }) => /* @__PURE__ */ d(Be, { className: t, children: [
+  /* @__PURE__ */ a(je, { active: e === h, onClick: () => s(h) }),
   /* @__PURE__ */ a(
-    Oe,
+    qe,
     {
-      active: s === m,
-      disabled: !t,
+      active: e === m,
+      disabled: !n,
       onClick: () => {
-        e(m);
+        s(m);
       }
     }
   ),
   /* @__PURE__ */ a(
-    Me,
+    Ge,
     {
-      active: s === g,
-      onClick: () => e(g)
+      active: e === g,
+      onClick: () => s(g)
     }
   )
-] }), ze = (s) => {
-  const [e, t] = v(!1), n = u(s.status) === "ready", [l, o] = v(m), i = E(
+] }), ze = (e) => {
+  const [s, n] = f(!1), t = u(e.status) === "ready", [l, o] = f(m), i = j(
     (c, p) => {
-      o(p), p === m ? (c && s.createEventSession(c), s.openFeature(w.GAMES)) : s.closeFeature();
+      o(p), p === m ? (c && e.createEventSession(c), e.openFeature(L.GAMES)) : e.closeFeature();
     },
-    [s]
+    [e]
   );
   return N(() => {
-    !n && l === m && (o(b), s.closeFeature());
-  }, [n, l, s]), {
-    sdkEnabled: e,
-    sdkReady: n,
+    !t && l === m && (o(h), e.closeFeature());
+  }, [t, l, e]), {
+    sdkEnabled: s,
+    sdkReady: t,
     activeOverlay: l,
     activateAndLoadOverlay: i,
     enableSdk: (c) => {
-      s.initializeApp().then(({ enabled: p, err: k }) => {
-        if (t(!0), k) {
-          i(c, b);
+      e.initializeApp().then(({ enabled: p, err: k }) => {
+        if (n(!0), k) {
+          i(c, h);
           return;
         }
         if (p) {
@@ -362,71 +375,71 @@ const Be = () => De, Pe = /* @__PURE__ */ r(Be())({
       });
     },
     disableSdk: () => {
-      t(!1), s.disableApp();
+      n(!1), e.disableApp();
     }
   };
-}, He = (s) => {
-  const e = u(s.getActiveFeature()), [t, n] = v(null);
+}, Ke = (e) => {
+  const s = u(e.getActiveFeature()), [n, t] = f(null);
   return N(() => {
-    const l = s.getFeatures();
-    if (e)
+    const l = e.getFeatures();
+    if (s)
       for (const [o, i] of l)
-        o === e ? i.status.get() === h.Suspended && (i.enable(), n(i)) : i.status.get() === h.Ready && i.disable();
+        o === s ? i.status.get() === b.Suspended && (i.enable(), t(i)) : i.status.get() === b.Ready && i.disable();
     else {
       for (const [, o] of l)
-        o.status.get() === h.Ready && o.disable();
-      n(null);
+        o.status.get() === b.Ready && o.disable();
+      t(null);
     }
     return () => {
       for (const [, o] of l)
-        o.status.get() === h.Ready && o.disable();
+        o.status.get() === b.Ready && o.disable();
     };
-  }, [e, s]), [e, t];
-}, Ue = ({ sdk: s, className: e }) => {
-  const [, t] = He(s);
-  return /* @__PURE__ */ a(Ne, { className: e, feature: t, sdk: s });
-}, Ke = ({ sdk: s, overlays: e, children: t }) => {
-  const { sdkEnabled: n, sdkReady: l, activeOverlay: o, activateAndLoadOverlay: i, enableSdk: c, disableSdk: p } = ze(s);
+  }, [s, e]), [s, n];
+}, Je = ({ sdk: e, className: s }) => {
+  const [, n] = Ke(e);
+  return /* @__PURE__ */ a(we, { className: s, feature: n, sdk: e });
+}, Ve = ({ sdk: e, overlays: s, children: n }) => {
+  const { sdkEnabled: t, sdkReady: l, activeOverlay: o, activateAndLoadOverlay: i, enableSdk: c, disableSdk: p } = ze(e);
   return /* @__PURE__ */ d(D, { children: [
-    n && /* @__PURE__ */ a(
-      Te,
+    t && /* @__PURE__ */ a(
+      He,
       {
         sdkReady: l,
         activeOverlay: o,
-        className: I,
+        className: x,
         setActiveOverlay: (k) => i("", k)
       }
     ),
     /* @__PURE__ */ a(
       A,
       {
-        "data-nav": n.toString(),
-        style: { display: !n || o === b ? "block" : "none" },
-        children: t && t({ enableSdk: c, disableSdk: p })
+        "data-nav": t.toString(),
+        style: { display: !t || o === h ? "block" : "none" },
+        children: n && n({ enableSdk: c, disableSdk: p })
       }
     ),
     /* @__PURE__ */ a(
       A,
       {
-        "data-nav": n.toString(),
+        "data-nav": t.toString(),
         style: { display: o === g ? "block" : "none" },
-        children: e && o === g && e[o]
+        children: s && o === g && s[o]
       }
     ),
-    n && o === m && /* @__PURE__ */ a(Ue, { className: I, sdk: s })
+    t && o === m && /* @__PURE__ */ a(Je, { className: x, sdk: e })
   ] });
-}, bs = ({
-  sdkKey: s,
-  plugins: e,
-  children: t,
-  production: n = !0
-}) => /* @__PURE__ */ a(B, { sdkKey: s, plugins: e, production: n, autoEnable: !1, children: t }), ys = ({ children: s, overlays: e }) => {
-  const { sdk: t, status: n } = Q(P);
-  if (n === T.UNSET)
+}, gs = ({
+  sdkKey: e,
+  plugins: s,
+  children: n,
+  production: t = !0
+}) => /* @__PURE__ */ a(P, { sdkKey: e, plugins: s, production: t, autoEnable: !1, children: n }), ks = ({ children: e, overlays: s }) => {
+  const { sdk: n, status: t } = F(T);
+  if (t === B.UNSET)
     throw new Error("Wrap app in `StreamLayerProvider`");
-  return t ? /* @__PURE__ */ a("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ a(z, { children: /* @__PURE__ */ a(Ke, { sdk: t, overlays: e, children: s }) }) }) : s({});
+  return n ? /* @__PURE__ */ a("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ a(H, { children: /* @__PURE__ */ a(Ve, { sdk: n, overlays: s, children: e }) }) }) : e({});
 };
 export {
-  bs as MastersStreamLayerProvider,
-  ys as MastersStreamLayerSDKReact
+  gs as MastersStreamLayerProvider,
+  ks as MastersStreamLayerSDKReact
 };