@streamlayer/react 0.25.1 → 0.26.0

package/lib/es/masters.js

@@ -1,396 +1,401 @@
-import { jsx as t, jsxs as c, Fragment as g } from "react/jsx-runtime";
-import { s as o, Y as y, o as E, X as w, f as C, x as Q, u as F, v as O, h as b, p as R, d as M, j as q, e as G, S as H, a as N, b as j } from "../provider-a6b36c89.js";
-import { useState as h, useMemo as B, useCallback as D, useEffect as L, useContext as P } from "react";
-import { QuestionType as T, FeatureType as A } from "@streamlayer/sdk-web-types";
-import { useStore as d } from "@nanostores/react";
-import { FeatureStatus as v } from "@streamlayer/sdk-web-interfaces";
-import "react-countdown-circle-timer";
+import { jsx as a, jsxs as i, Fragment as g } from "react/jsx-runtime";
+import { useState as h, useMemo as E, useCallback as C, useEffect as L, useContext as w } from "react";
+import { s as r, Y as y, o as O, X as Q, d as R, x as F, u as M, v as q, h as b, e as G, i as H, j, f as N, S as D, a as B, b as P, p as T } from "../index-98996b43.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 z, FeatureType as A } from "@streamlayer/sdk-web-types";
+import { FeatureStatus as v } from "@streamlayer/sdk-web-interfaces";
 import "@streamlayer/sdk-web-features";
 import "@streamlayer/sdk-web-api";
 import "@streamlayer/sdk-web-storage";
+import { useStore as p } from "@nanostores/react";
 import "@streamlayer/sdk-web-notifications";
+import "./useStreamLayerApp.js";
+import "@streamlayer/sdk-web";
 import "@streamlayer/sl-eslib/interactive/interactive.common_pb";
 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";
-import "./useStreamLayerApp.js";
-import "@streamlayer/sdk-web";
-const _ = ({
-  feature: e,
-  sdk: s,
-  children: n
-}) => {
-  const r = d(e.status), { slStreamId: a } = d(s.sdkStore);
-  return a != null && a.loading ? /* @__PURE__ */ t("div", { children: "event is loading..." }) : a != null && a.data ? r !== v.Ready ? /* @__PURE__ */ t("div", { children: "wait feature..." }) : n : /* @__PURE__ */ t("div", { children: "event is forbidden..." });
+const _ = ({ feature: e, sdk: s, children: t, className: n }) => {
+  const l = p(e.status), { slStreamId: o } = p(s.sdkStore);
+  return o != null && o.loading ? /* @__PURE__ */ a("div", { className: n, children: "event is loading..." }) : o != null && o.data ? l !== v.Ready ? /* @__PURE__ */ a("div", { className: n, children: "wait feature..." }) : t : /* @__PURE__ */ a("div", { className: n, children: "event is forbidden..." });
 };
-const z = () => x, Y = /* @__PURE__ */ o("div")({
+const Y = () => x, K = /* @__PURE__ */ r("div")({
   name: "i",
   class: "idhrx8x",
   propsAsIs: !1
-}), $ = /* @__PURE__ */ o("div")({
+}), $ = /* @__PURE__ */ r("div")({
   name: "r",
   class: "r1k6v4ep",
   propsAsIs: !1
-}), x = /* @__PURE__ */ o("div")({
+}), x = /* @__PURE__ */ r("div")({
   name: "t",
   class: "t1v8kucd",
   propsAsIs: !1
-}), U = /* @__PURE__ */ o(z())({
+}), U = /* @__PURE__ */ r(Y())({
   name: "o",
   class: "o16yw7z1",
   propsAsIs: !0
 });
-const X = /* @__PURE__ */ o("div")({
+const W = /* @__PURE__ */ r("div")({
   name: "n",
   class: "n1aopxp8",
   propsAsIs: !1
-}), K = ({
+}), X = ({
   children: e,
   style: s,
-  className: n
-}) => /* @__PURE__ */ t(X, {
+  className: t
+}) => /* @__PURE__ */ a(W, {
   style: s,
-  className: n,
+  className: t,
   children: e
 });
-const W = () => y, J = () => y, V = /* @__PURE__ */ o("div")({
+const J = () => y, V = () => y, Z = /* @__PURE__ */ r("div")({
   name: "a",
   class: "acysrl1",
   propsAsIs: !1
-}), Z = /* @__PURE__ */ o("div")({
+}), ee = /* @__PURE__ */ r("div")({
   name: "l",
   class: "lo57cjm",
   propsAsIs: !1
-}), ee = /* @__PURE__ */ o(W())({
+}), se = /* @__PURE__ */ r(J())({
   name: "p",
   class: "p14kwh4y",
   propsAsIs: !0
-}), se = /* @__PURE__ */ o("span")({
+}), ae = /* @__PURE__ */ r("span")({
   name: "s",
   class: "sxun7sq",
   propsAsIs: !1
-}), te = /* @__PURE__ */ o("button")({
+}), te = /* @__PURE__ */ r("button")({
   name: "c",
   class: "c1i8ida8",
   propsAsIs: !1
-}), ne = /* @__PURE__ */ o(J())({
+}), ne = /* @__PURE__ */ r(V())({
   name: "g",
   class: "g1m0xfmw",
   propsAsIs: !0
-}), ae = ({ type: e, close: s }) => {
-  const n = E[e];
-  return /* @__PURE__ */ c(V, { children: [
-    /* @__PURE__ */ c(Z, { children: [
-      (n == null ? void 0 : n.iconName) && /* @__PURE__ */ t(ee, { name: n.iconName }),
-      (n == null ? void 0 : n.label) && /* @__PURE__ */ t(se, { children: n.label })
+}), oe = ({ type: e, close: s }) => {
+  const t = O[e];
+  return /* @__PURE__ */ i(Z, { children: [
+    /* @__PURE__ */ i(ee, { children: [
+      (t == null ? void 0 : t.iconName) && /* @__PURE__ */ a(se, { name: t.iconName }),
+      (t == null ? void 0 : t.label) && /* @__PURE__ */ a(ae, { children: t.label })
     ] }),
-    /* @__PURE__ */ t(te, { onClick: s, children: /* @__PURE__ */ t(ne, { name: "icon-cross" }) })
+    /* @__PURE__ */ a(te, { onClick: s, children: /* @__PURE__ */ a(ne, { name: "icon-cross" }) })
   ] });
 };
-const oe = /* @__PURE__ */ o("div")({
+const re = /* @__PURE__ */ r("div")({
   name: "r",
   class: "ruyb9yw",
   propsAsIs: !1
-}), re = /* @__PURE__ */ o("img")({
+}), le = /* @__PURE__ */ r("img")({
   name: "i",
   class: "imbcgl0",
   propsAsIs: !1
-}), ie = ({
+}), ce = ({
   sponsorLogo: e
-}) => e && /* @__PURE__ */ t(oe, {
-  children: /* @__PURE__ */ t(re, {
+}) => e && /* @__PURE__ */ a(re, {
+  children: /* @__PURE__ */ a(le, {
     alt: "sponsor-logo",
     src: e
   })
 });
-const le = /* @__PURE__ */ o("div")({
+const ie = /* @__PURE__ */ r("div")({
   name: "x",
   class: "xk8r1eq",
   propsAsIs: !1
-}), ce = ({
+}), de = ({
   openedQuestion: e,
   closeQuestion: s,
-  vote: n
+  vote: t
 }) => {
-  var r;
-  return /* @__PURE__ */ c(le, {
-    children: [/* @__PURE__ */ t(ae, {
+  var n;
+  return /* @__PURE__ */ i(ie, {
+    children: [/* @__PURE__ */ a(oe, {
       close: s,
-      type: (e == null ? void 0 : e.type) || T.UNSET
-    }), e && /* @__PURE__ */ t(w, {
-      vote: n,
+      type: (e == null ? void 0 : e.type) || z.UNSET
+    }), e && /* @__PURE__ */ a(Q, {
+      vote: t,
       openedQuestion: e
-    }), /* @__PURE__ */ t(ie, {
-      sponsorLogo: (r = e == null ? void 0 : e.sponsorship) == null ? void 0 : r.logo
+    }), /* @__PURE__ */ a(ce, {
+      sponsorLogo: (n = e == null ? void 0 : e.sponsorship) == null ? void 0 : n.logo
     })]
   });
-}, de = ({ leaderboardList: e }) => {
-  const { data: s } = d(e.$store), [n, r] = h(void 0), a = (l) => {
-    const i = s.find((p) => p.userId === l);
-    r(i);
+}, pe = ({ leaderboardList: e }) => {
+  const { data: s } = p(e.$store), [t, n] = h(void 0), l = (o) => {
+    const c = s.find((d) => d.userId === o);
+    n(c);
   };
-  return /* @__PURE__ */ c(g, { children: [
-    n && /* @__PURE__ */ t(C, { comeBack: () => a(null), ...n }),
-    !n && /* @__PURE__ */ t(Q, { fetchMore: e.fetchMore, items: s, openItemDetail: a })
+  return /* @__PURE__ */ i(g, { children: [
+    t && /* @__PURE__ */ a(R, { comeBack: () => l(null), ...t }),
+    !t && /* @__PURE__ */ a(F, { fetchMore: e.fetchMore, items: s, openItemDetail: l })
   ] });
-}, pe = ({ store: e, openQuestion: s }) => {
-  const n = d(e);
-  return n != null && n.data ? /* @__PURE__ */ t(F, { openQuestion: s, questions: n.data }) : /* @__PURE__ */ t("div", { children: "wait questions..." });
-}, ue = ({ store: e }) => {
-  const { data: s } = d(e);
-  return s != null && s.summary ? /* @__PURE__ */ t(O, { ...s.summary, ...s.percentage }) : /* @__PURE__ */ t("div", { children: "wait user..." });
-}, me = ({ gamification: e }) => {
-  const [s, n] = h(b.HOME);
-  return /* @__PURE__ */ c(g, { children: [
-    /* @__PURE__ */ c(U, { children: [
-      /* @__PURE__ */ t(R, { activePage: s, toggleActivePage: n }),
-      s === b.HOME && /* @__PURE__ */ t(ue, { store: e.userSummary.getStore() })
+}, ue = ({ store: e, openQuestion: s }) => {
+  const t = p(e);
+  return t != null && t.data ? /* @__PURE__ */ a(M, { openQuestion: s, questions: t.data }) : /* @__PURE__ */ a("div", { children: "wait questions..." });
+}, me = ({ store: e }) => {
+  const { data: s } = p(e);
+  return s != null && s.summary ? /* @__PURE__ */ a(q, { ...s.summary, ...s.percentage }) : /* @__PURE__ */ a("div", { children: "wait user..." });
+}, ve = ({ gamification: e }) => {
+  const [s, t] = h(b.HOME);
+  return /* @__PURE__ */ i(g, { children: [
+    /* @__PURE__ */ i(U, { children: [
+      /* @__PURE__ */ a(G, { activePage: s, toggleActivePage: t }),
+      s === b.HOME && /* @__PURE__ */ a(me, { store: e.userSummary.getStore() })
     ] }),
-    s === b.HOME && /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(pe, { openQuestion: e.openQuestion, store: e.questions.getStore() }) }),
-    s === b.LEADERBOARD && /* @__PURE__ */ t(x, { style: { flex: "1 1 auto" }, children: /* @__PURE__ */ t(de, { leaderboardList: e.leaderboardList }) })
+    s === b.HOME && /* @__PURE__ */ a(x, { children: /* @__PURE__ */ a(ue, { openQuestion: e.openQuestion, store: e.questions.getStore() }) }),
+    s === b.LEADERBOARD && /* @__PURE__ */ a(x, { style: { flex: "1 1 auto" }, children: /* @__PURE__ */ a(pe, { leaderboardList: e.leaderboardList }) })
   ] });
 };
-const ve = () => K, he = /* @__PURE__ */ o(ve())({
-  name: "u",
-  class: "u1ph66cs",
+const he = () => X, fe = /* @__PURE__ */ r(he())({
+  name: "c",
+  class: "c1ph66cs",
   propsAsIs: !0
-}), fe = ({
-  gamification: e
+}), ge = ({
+  gamification: e,
+  className: s
 }) => {
   const {
-    loading: s,
+    loading: t,
     data: n
-  } = d(e.openedQuestion);
-  return /* @__PURE__ */ c(g, {
-    children: [(s || n) && /* @__PURE__ */ t(he, {
-      children: /* @__PURE__ */ t(ce, {
+  } = p(e.openedQuestion);
+  return /* @__PURE__ */ i(g, {
+    children: [(t || n) && /* @__PURE__ */ a(fe, {
+      className: s,
+      children: /* @__PURE__ */ a(de, {
         closeQuestion: e.closeQuestion,
         vote: e.submitAnswer,
         openedQuestion: n
       })
-    }), /* @__PURE__ */ t($, {
+    }), /* @__PURE__ */ a($, {
+      className: s,
       "data-nav": "true",
       style: {
         display: "flex",
         flexDirection: "column"
       },
-      children: /* @__PURE__ */ t(me, {
+      children: /* @__PURE__ */ a(ve, {
         gamification: e
       })
     })]
   });
-}, ge = ({ highlights: e }) => {
-  const s = d(e.openedInsight);
-  return /* @__PURE__ */ c(g, { children: [
-    !s && e.insights && /* @__PURE__ */ t(M, { highlights: e, store: e.insights.getStore() }),
-    s && /* @__PURE__ */ t(
-      q,
+}, ye = ({
+  highlights: e,
+  className: s
+}) => {
+  const t = p(e.openedInsight);
+  return /* @__PURE__ */ i(g, { children: [
+    !t && e.insights && /* @__PURE__ */ a(H, { className: s, highlights: e, store: e.insights.getStore() }),
+    t && /* @__PURE__ */ a(
+      j,
       {
-        openedInsight: s,
+        className: s,
+        openedInsight: t,
         closeHighlights: e.closeFeature,
         closeInsight: e.closeHighlight
       }
     )
   ] });
-}, ye = ({ sdk: e, feature: s }) => B(() => s ? s.featureConfig.get().type === A.GAMES ? /* @__PURE__ */ t(_, { sdk: e, feature: s, children: /* @__PURE__ */ t(fe, { gamification: s, sdk: e }) }) : s.featureConfig.get().type === A.HIGHLIGHTS ? /* @__PURE__ */ t(_, { sdk: e, feature: s, children: /* @__PURE__ */ t(ge, { highlights: s, sdk: e }) }) : null : null, [e, s]);
-const be = /* @__PURE__ */ o("button")({
+}, be = ({
+  sdk: e,
+  feature: s,
+  className: t
+}) => E(() => s ? s.featureConfig.get().type === A.GAMES ? /* @__PURE__ */ a(_, { className: t, sdk: e, feature: s, children: /* @__PURE__ */ a(ge, { className: t, gamification: s, sdk: e }) }) : s.featureConfig.get().type === A.HIGHLIGHTS ? /* @__PURE__ */ a(_, { className: t, sdk: e, feature: s, children: /* @__PURE__ */ a(ye, { className: t, highlights: s, sdk: e }) }) : null : null, [e, s]);
+const ke = /* @__PURE__ */ r("button")({
   name: "e",
   class: "enu64b2",
   propsAsIs: !1
-}), ke = /* @__PURE__ */ o("span")({
+}), Se = /* @__PURE__ */ r("span")({
   name: "t",
   class: "tw2meku",
   propsAsIs: !1
-}), Se = /* @__PURE__ */ o("span")({
+}), Ae = /* @__PURE__ */ r("span")({
   name: "a",
   class: "aka8vam",
   propsAsIs: !1
-}), I = ({ disabled: e, active: s, onClick: n, label: r, icon: a }) => /* @__PURE__ */ t(be, { onClick: n, disabled: e, "data-selected": s, children: /* @__PURE__ */ c(g, { children: [
-  a && /* @__PURE__ */ t(ke, { children: a }),
-  /* @__PURE__ */ t(Se, { children: r })
+}), I = ({ disabled: e, active: s, onClick: t, label: n, icon: l }) => /* @__PURE__ */ a(ke, { onClick: t, disabled: e, "data-selected": s, children: /* @__PURE__ */ i(g, { children: [
+  l && /* @__PURE__ */ a(Se, { children: l }),
+  /* @__PURE__ */ a(Ae, { children: n })
 ] }) });
-const Ae = () => y, $e = /* @__PURE__ */ o(Ae())({
+const $e = () => y, xe = /* @__PURE__ */ r($e())({
   name: "a",
   class: "a10lggiw",
   propsAsIs: !0
-}), f = "channels", xe = (e) => {
+}), f = "channels", Ie = (e) => {
   var s;
-  return /* @__PURE__ */ t(I, {
+  return /* @__PURE__ */ a(I, {
     ...e,
     id: "channels",
     label: "Channels",
-    icon: /* @__PURE__ */ t($e, {
+    icon: /* @__PURE__ */ a(xe, {
       name: "icon-btn-channels",
       "data-selected": (s = e.active) == null ? void 0 : s.toString()
     })
   });
 };
-const Ie = () => y, _e = /* @__PURE__ */ o(Ie())({
+const Ne = () => y, _e = /* @__PURE__ */ r(Ne())({
   name: "d",
   class: "d1x5s8ie",
   propsAsIs: !0
 }), u = "featuredGroups", Le = (e) => {
   var s;
-  return /* @__PURE__ */ t(I, {
+  return /* @__PURE__ */ a(I, {
     ...e,
     label: "FG+",
     id: "featuredGroups",
-    icon: /* @__PURE__ */ t(_e, {
+    icon: /* @__PURE__ */ a(_e, {
       name: "icon-btn-feature-groups",
       "data-selected": (s = e.active) == null ? void 0 : s.toString()
     })
   });
 };
-const Ee = () => y, we = /* @__PURE__ */ o(Ee())({
+const Ee = () => y, Ce = /* @__PURE__ */ r(Ee())({
   name: "n",
   class: "ntav86o",
   propsAsIs: !0
-}), k = "leaderboard", Ce = (e) => {
+}), k = "leaderboard", we = (e) => {
   var s;
-  return /* @__PURE__ */ t(I, {
+  return /* @__PURE__ */ a(I, {
     ...e,
     label: "Leader Board",
     id: "leaderboard",
-    icon: /* @__PURE__ */ t(we, {
+    icon: /* @__PURE__ */ a(Ce, {
       name: "icon-btn-leaderboard",
       "data-selected": (s = e.active) == null ? void 0 : s.toString()
     })
   });
 };
-const Qe = /* @__PURE__ */ o("div")({
+const Oe = /* @__PURE__ */ r("div")({
   name: "n",
   class: "n1rlvhvz",
   propsAsIs: !1
-}), Fe = ({
+}), Qe = ({
   children: e,
   className: s
-}) => /* @__PURE__ */ t(Qe, {
+}) => /* @__PURE__ */ a(Oe, {
   className: s,
   children: e
 });
-const Oe = () => Fe, Re = /* @__PURE__ */ o(Oe())({
+const Re = () => Qe, Fe = /* @__PURE__ */ r(Re())({
   name: "n",
   class: "n9bnom",
   propsAsIs: !0
-}), Me = ({ activeOverlay: e, setActiveOverlay: s, sdkReady: n }) => /* @__PURE__ */ c(Re, { children: [
-  /* @__PURE__ */ t(xe, { active: e === f, onClick: () => s(f) }),
-  /* @__PURE__ */ t(
+}), Me = ({ activeOverlay: e, setActiveOverlay: s, sdkReady: t, className: n }) => /* @__PURE__ */ i(Fe, { className: n, children: [
+  /* @__PURE__ */ a(Ie, { active: e === f, onClick: () => s(f) }),
+  /* @__PURE__ */ a(
     Le,
     {
       active: e === u,
-      disabled: !n,
+      disabled: !t,
       onClick: () => {
         s(u);
       }
     }
   ),
-  /* @__PURE__ */ t(
-    Ce,
+  /* @__PURE__ */ a(
+    we,
     {
       active: e === k,
       onClick: () => s(k)
     }
   )
-] }), qe = (e, s) => {
-  const [n, r] = h(!1), a = d(e.status) === "ready", [l, i] = h(u), p = D(
-    (m) => {
-      i(m), m === u ? (e.createEventSession(s), e.openFeature(A.GAMES)) : e.closeFeature();
+] }), qe = (e) => {
+  const [s, t] = h(!1), n = p(e.status) === "ready", [l, o] = h(u), c = C(
+    (d, m) => {
+      o(m), m === u ? (d && e.createEventSession(d), e.openFeature(A.GAMES)) : e.closeFeature();
     },
-    [s, e]
+    [e]
   );
   return L(() => {
-    !a && l === u && (i(f), e.closeFeature());
-  }, [a, l, e]), {
-    sdkEnabled: n,
-    sdkReady: a,
+    !n && l === u && (o(f), e.closeFeature());
+  }, [n, l, e]), {
+    sdkEnabled: s,
+    sdkReady: n,
     activeOverlay: l,
-    activateAndLoadOverlay: p,
-    enableSdk: () => {
+    activateAndLoadOverlay: c,
+    enableSdk: (d) => {
       e.initializeApp().then(({ enabled: m, err: S }) => {
-        if (r(!0), S) {
-          p(f);
+        if (t(!0), S) {
+          c(d, f);
           return;
         }
         if (m) {
-          p(u);
+          c(d, u);
           return;
         }
       });
     },
     disableSdk: () => {
-      r(!1), e.disableApp();
+      t(!1), e.disableApp();
     }
   };
 }, Ge = (e) => {
-  const s = d(e.getActiveFeature()), [n, r] = h(null);
+  const s = p(e.getActiveFeature()), [t, n] = h(null);
   return L(() => {
-    const a = e.getFeatures();
+    const l = e.getFeatures();
     if (s)
-      for (const [l, i] of a)
-        l === s ? i.status.get() === v.Suspended && (i.enable(), r(i)) : i.status.get() === v.Ready && i.disable();
+      for (const [o, c] of l)
+        o === s ? c.status.get() === v.Suspended && (c.enable(), n(c)) : c.status.get() === v.Ready && c.disable();
     else {
-      for (const [, l] of a)
-        l.status.get() === v.Ready && l.disable();
-      r(null);
+      for (const [, o] of l)
+        o.status.get() === v.Ready && o.disable();
+      n(null);
     }
     return () => {
-      for (const [, l] of a)
-        l.status.get() === v.Ready && l.disable();
+      for (const [, o] of l)
+        o.status.get() === v.Ready && o.disable();
     };
-  }, [s, e]), [s, n];
-}, He = ({ sdk: e }) => {
-  const [, s] = Ge(e);
-  return /* @__PURE__ */ t(ye, { feature: s, sdk: e });
-}, Ne = ({ sdk: e, overlays: s, children: n, event: r }) => {
-  const { sdkEnabled: a, sdkReady: l, activeOverlay: i, activateAndLoadOverlay: p, enableSdk: m, disableSdk: S } = qe(
-    e,
-    r
-  );
-  return /* @__PURE__ */ t(G, { style: { height: "100%" }, children: /* @__PURE__ */ c(Y, { children: [
-    a && /* @__PURE__ */ t(
+  }, [s, e]), [s, t];
+}, He = ({ sdk: e, className: s }) => {
+  const [, t] = Ge(e);
+  return /* @__PURE__ */ a(be, { className: s, feature: t, sdk: e });
+}, je = ({ sdk: e, overlays: s, children: t }) => {
+  const { sdkEnabled: n, sdkReady: l, activeOverlay: o, activateAndLoadOverlay: c, enableSdk: d, disableSdk: m } = qe(e);
+  return /* @__PURE__ */ i(K, { children: [
+    n && /* @__PURE__ */ a(
       Me,
       {
         sdkReady: l,
-        activeOverlay: i,
-        setActiveOverlay: p
+        activeOverlay: o,
+        className: N,
+        setActiveOverlay: (S) => c("", S)
       }
     ),
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ a(
       $,
       {
-        "data-nav": a.toString(),
-        style: { display: !a || i === f ? "block" : "none" },
-        children: n && n({ enableSdk: m, disableSdk: S })
+        "data-nav": n.toString(),
+        style: { display: !n || o === f ? "block" : "none" },
+        children: t && t({ enableSdk: d, disableSdk: m })
       }
     ),
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ a(
       $,
       {
-        "data-nav": a.toString(),
-        style: { display: i === k ? "block" : "none" },
-        children: s && i === k && s[i]
+        "data-nav": n.toString(),
+        style: { display: o === k ? "block" : "none" },
+        children: s && o === k && s[o]
       }
     ),
-    a && i === u && /* @__PURE__ */ t(He, { sdk: e })
-  ] }) });
-}, cs = ({
+    n && o === u && /* @__PURE__ */ a(He, { className: N, sdk: e })
+  ] });
+}, ds = ({
   sdkKey: e,
   plugins: s,
-  children: n,
-  production: r = !0
-}) => /* @__PURE__ */ t(H, { sdkKey: e, plugins: s, production: r, autoEnable: !1, children: n }), ds = ({ children: e, event: s, overlays: n }) => {
-  const { sdk: r, status: a } = P(N);
-  if (a === j.UNSET)
+  children: t,
+  production: n = !0
+}) => /* @__PURE__ */ a(D, { sdkKey: e, plugins: s, production: n, autoEnable: !1, children: t }), ps = ({ children: e, overlays: s }) => {
+  const { sdk: t, status: n } = w(B);
+  if (n === P.UNSET)
     throw new Error("Wrap app in `StreamLayerProvider`");
-  return r ? /* @__PURE__ */ t(Ne, { sdk: r, event: s, overlays: n, children: e }) : e({});
+  return t ? /* @__PURE__ */ a("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ a(T, { children: /* @__PURE__ */ a(je, { sdk: t, overlays: s, children: e }) }) }) : e({});
 };
 export {
-  cs as MastersStreamLayerProvider,
-  ds as MastersStreamLayerSDKReact
+  ds as MastersStreamLayerProvider,
+  ps as MastersStreamLayerSDKReact
 };