@streamlayer/react 1.3.4 → 1.4.0

package/lib/es/advertisement.js

@@ -2,12 +2,12 @@ import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import { useEffect as Q, useRef as J, useMemo as V } from "react";
 import { c as f, s as n, a as K, Q as X, e as $, u as N, L as Y } from "./provider.js";
 import { F as Z, u as oo, d as eo } from "./index2.js";
-import { N as h, a as no, b as so, P as g, c as I, S as io } from "./useStreamLayerApp2.js";
-const ao = /* @__PURE__ */ n("div")({
+import { N as g, a as no, b as so, C as io, P as I, c as h, S as ao } from "./useStreamLayerApp2.js";
+const to = /* @__PURE__ */ n("div")({
   name: "Container",
   class: "c5b6wdg",
   propsAsIs: !1
-}), to = "a1rlj479", ro = "s35f1di", lo = "sj4471g", co = "b12050d8", mo = "b1d5ybek", po = (o) => o === "left" || o === "right" ? ro : co, uo = (o) => o === "left" || o === "right" ? lo : mo, vo = (o) => o === "left" ? "avdxyl3" : o === "right" ? "a1bisd08" : o === "top" ? "a1u9y2aj" : "a1qqaks", k = ({
+}), ro = "a1rlj479", lo = "s35f1di", co = "sj4471g", mo = "b12050d8", po = "b1d5ybek", uo = (o) => o === "left" || o === "right" ? lo : mo, vo = (o) => o === "left" || o === "right" ? co : po, Io = (o) => o === "left" ? "avdxyl3" : o === "right" ? "a1bisd08" : o === "top" ? "a1u9y2aj" : "a1qqaks", C = ({
   children: o,
   style: s,
   className: r,
@@ -15,9 +15,9 @@ const ao = /* @__PURE__ */ n("div")({
   hiding: a,
   direction: l = "left",
   onAnimationEnd: t
-}) => /* @__PURE__ */ e(ao, {
+}) => /* @__PURE__ */ e(to, {
   style: s,
-  className: f(r, to, vo(l), i && !a && po(l), i && a && uo(l)),
+  className: f(r, ro, Io(l), i && !a && uo(l), i && a && vo(l)),
   onAnimationEnd: t,
   children: o
 }), go = /* @__PURE__ */ n("a")({
@@ -28,17 +28,17 @@ const ao = /* @__PURE__ */ n("div")({
   name: "BannerContainer",
   class: "b7yfc72",
   propsAsIs: !1
-}), Io = () => go, bo = /* @__PURE__ */ n(Io())({
+}), Ao = () => go, bo = /* @__PURE__ */ n(Ao())({
   name: "BannerLink",
   class: "bejjq94",
   propsAsIs: !0
-}), Ao = /* @__PURE__ */ n("img")({
+}), yo = /* @__PURE__ */ n("img")({
   name: "BannerImg",
   class: "b1j94hdr",
   propsAsIs: !1
-}), yo = ({ promotion: o, promotionId: s, hiding: r, direction: i = "bottom" }) => {
+}), fo = ({ promotion: o, promotionId: s, hiding: r, direction: i = "bottom" }) => {
   var a;
-  return (a = o.additionalBanner) != null && a.imageUrl ? /* @__PURE__ */ e(k, { direction: i, hiding: r, children: /* @__PURE__ */ e(ho, { className: "BannerContainer", children: /* @__PURE__ */ e(
+  return (a = o.additionalBanner) != null && a.imageUrl ? /* @__PURE__ */ e(C, { direction: i, hiding: r, children: /* @__PURE__ */ e(ho, { className: "BannerContainer", children: /* @__PURE__ */ e(
     bo,
     {
       className: "BannerLink",
@@ -48,200 +48,207 @@ const ao = /* @__PURE__ */ n("div")({
       "data-promo-type": o.type,
       "data-analytics": "banner",
       target: "_blank",
-      children: /* @__PURE__ */ e(Ao, { src: o.additionalBanner.imageUrl, alt: "promo" })
+      children: /* @__PURE__ */ e(yo, { src: o.additionalBanner.imageUrl, alt: "promo" })
     }
   ) }) }) : null;
-}, fo = /* @__PURE__ */ n("div")({
+}, $o = /* @__PURE__ */ n("div")({
   name: "NotificationContent",
   class: "n1ku6hz",
   propsAsIs: !1
-}), $o = /* @__PURE__ */ n("div")({
+}), No = /* @__PURE__ */ n("div")({
   name: "NotificationContainer",
   class: "nbxqmol",
   propsAsIs: !1
-}), No = /* @__PURE__ */ n("div")({
+}), Co = /* @__PURE__ */ n("div")({
   name: "Body",
   class: "b1gu3eml",
   propsAsIs: !1
-}), ko = /* @__PURE__ */ n("div")({
+}), Mo = /* @__PURE__ */ n("div")({
   name: "Title",
   class: "t1u17zva",
   propsAsIs: !1
-}), Co = /* @__PURE__ */ n("div")({
+}), So = /* @__PURE__ */ n("div")({
   name: "Text",
   class: "t10ko1g",
   propsAsIs: !1
-}), b = /* @__PURE__ */ n("div")({
+}), A = /* @__PURE__ */ n("div")({
   name: "Media",
   class: "mntc42e",
   propsAsIs: !1
-}), So = () => b, w = /* @__PURE__ */ n(So())({
+}), To = () => A, w = /* @__PURE__ */ n(To())({
   name: "MediaImgFit",
   class: "ml060eo",
   propsAsIs: !0
-}), Mo = () => b, W = /* @__PURE__ */ n(Mo())({
+}), ko = () => A, W = /* @__PURE__ */ n(ko())({
   name: "MediaImgCentered",
   class: "m1vqlvig",
   propsAsIs: !0
-}), To = () => W, Bo = /* @__PURE__ */ n(To())({
+}), Bo = () => W, Eo = /* @__PURE__ */ n(Bo())({
   name: "MediaImgBottom",
   class: "m1e7tvi5",
   propsAsIs: !0
-}), Eo = () => b, Lo = /* @__PURE__ */ n(Eo())({
+}), Lo = () => A, Oo = /* @__PURE__ */ n(Lo())({
   name: "MediaImgSolid",
   class: "mqvntt2",
   propsAsIs: !0
-}), xo = () => b, Oo = /* @__PURE__ */ n(xo())({
+}), xo = () => A, _o = /* @__PURE__ */ n(xo())({
   name: "MediaImgMiddle",
   class: "m12jtj3u",
   propsAsIs: !0
-}), Po = /* @__PURE__ */ n("button")({
+}), Po = /* @__PURE__ */ n("img")({
+  name: "CtaIcon",
+  class: "ckq1frv",
+  propsAsIs: !1
+}), jo = /* @__PURE__ */ n("button")({
   name: "Button",
-  class: "bkq1frv",
+  class: "bis90pl",
   propsAsIs: !1
-}), _o = () => K, jo = /* @__PURE__ */ n(_o())({
+}), Ro = () => K, Do = /* @__PURE__ */ n(Ro())({
   name: "StyledChevronRight",
-  class: "sis90pl",
+  class: "s9mjmz3",
   propsAsIs: !0
-}), Do = /* @__PURE__ */ n("div")({
+}), qo = /* @__PURE__ */ n("div")({
   name: "Logo",
-  class: "l9mjmz3",
-  propsAsIs: !1
-}), Ro = {
-  [h.UNSET]: w,
-  [h.FIT]: w,
-  [h.CENTERED]: W,
-  [h.BOTTOM]: Bo,
-  [h.SOLID]: Lo,
-  [h.MIDDLE]: Oo
-}, Fo = ({ src: o, imagePosition: s }) => {
-  const r = Ro[s];
+  class: "l1cf50a7",
+  propsAsIs: !1
+}), Fo = {
+  [g.UNSET]: w,
+  [g.FIT]: w,
+  [g.CENTERED]: W,
+  [g.BOTTOM]: Eo,
+  [g.SOLID]: Oo,
+  [g.MIDDLE]: _o
+}, Uo = ({ src: o, imagePosition: s }) => {
+  const r = Fo[s];
   return /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e("img", { src: o, alt: "" }) });
-}, qo = ({ notification: o, promotionId: s, hiding: r, direction: i = "left" }) => {
+}, wo = ({ notification: o, promotionId: s, hiding: r, direction: i = "left" }) => {
   if (!o || !o.promotion || o.enabled !== no.NOTIFICATION_ENABLED)
     return null;
   const { title: a, body: l, image: t, promotion: p } = o, { sponsorLogo: u, sponsorLogoMode: v, imagePosition: m, ctaButton: d } = p;
-  return /* @__PURE__ */ e(k, { direction: i, hiding: r, children: /* @__PURE__ */ c($o, { children: [
-    v !== so.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ e(Do, { children: /* @__PURE__ */ e("img", { src: u, alt: a }) }),
-    /* @__PURE__ */ c(fo, { children: [
-      /* @__PURE__ */ e(Fo, { src: t, imagePosition: m }),
-      /* @__PURE__ */ c(No, { children: [
-        a && /* @__PURE__ */ e(ko, { children: a }),
-        l && /* @__PURE__ */ e(Co, { children: l })
+  return /* @__PURE__ */ e(C, { direction: i, hiding: r, children: /* @__PURE__ */ c(No, { children: [
+    v !== so.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ e(qo, { children: /* @__PURE__ */ e("img", { src: u, alt: a }) }),
+    /* @__PURE__ */ c($o, { children: [
+      /* @__PURE__ */ e(Uo, { src: t, imagePosition: m }),
+      /* @__PURE__ */ c(Co, { children: [
+        a && /* @__PURE__ */ e(Mo, { children: a }),
+        l && /* @__PURE__ */ e(So, { children: l })
       ] }),
-      /* @__PURE__ */ e(Po, { name: "promo-button", style: { color: d == null ? void 0 : d.textColor, backgroundColor: d == null ? void 0 : d.color }, children: (d == null ? void 0 : d.label) || "Open" }),
-      /* @__PURE__ */ e(jo, { name: "chevronRight" })
+      /* @__PURE__ */ c(jo, { name: "promo-button", style: { color: d == null ? void 0 : d.textColor, backgroundColor: d == null ? void 0 : d.color }, children: [
+        (d == null ? void 0 : d.ctaIcon) && (d == null ? void 0 : d.ctaIconMode) === io.CTA_ICON_TRANSPARENT && /* @__PURE__ */ e(Po, { src: d == null ? void 0 : d.ctaIcon, alt: "cta-icon" }),
+        (d == null ? void 0 : d.label) || "Open"
+      ] }),
+      /* @__PURE__ */ e(Do, { name: "chevronRight" })
     ] })
   ] }) });
-}, Uo = /* @__PURE__ */ n("div")({
+}, Go = /* @__PURE__ */ n("div")({
   name: "OverlayContainer",
   class: "okzhq2w",
   propsAsIs: !1
-}), wo = /* @__PURE__ */ n("div")({
+}), zo = /* @__PURE__ */ n("div")({
   name: "PromoOverlay",
   class: "pmgz5i",
   propsAsIs: !1
-}), Go = /* @__PURE__ */ n("div")({
+}), Ho = /* @__PURE__ */ n("div")({
   name: "Header",
   class: "hyxi3jt",
   propsAsIs: !1
-}), zo = /* @__PURE__ */ n("div")({
+}), Ko = /* @__PURE__ */ n("div")({
   name: "HeaderContent",
   class: "h149e3gp",
   propsAsIs: !1
-}), Ho = "h10toh7", G = /* @__PURE__ */ n("img")({
+}), Wo = "h10toh7", G = /* @__PURE__ */ n("img")({
   name: "SponsorLogo",
   class: "s1jyea6t",
   propsAsIs: !1
-}), Ko = /* @__PURE__ */ n("div")({
+}), Qo = /* @__PURE__ */ n("div")({
   name: "SponsorName",
   class: "szpfa3h",
   propsAsIs: !1
-}), Wo = /* @__PURE__ */ n("div")({
+}), Jo = /* @__PURE__ */ n("div")({
   name: "Media",
   class: "m1crmu01",
   propsAsIs: !1
-}), Qo = /* @__PURE__ */ n("img")({
+}), Vo = /* @__PURE__ */ n("img")({
   name: "PromoImg",
   class: "p1l37r8s",
   propsAsIs: !1
-}), Jo = "s1nmch9k", z = /* @__PURE__ */ n("div")({
+}), Xo = "s1nmch9k", z = /* @__PURE__ */ n("div")({
   name: "Content",
   class: "c1er0ljd",
   propsAsIs: !1
-}), Vo = /* @__PURE__ */ n("div")({
+}), Yo = /* @__PURE__ */ n("div")({
   name: "Description",
   class: "dydopmr",
   propsAsIs: !1
-}), Xo = /* @__PURE__ */ n("div")({
+}), Zo = /* @__PURE__ */ n("div")({
   name: "Sponsor",
   class: "s1w6nt04",
   propsAsIs: !1
-}), Yo = /* @__PURE__ */ n("div")({
+}), oe = /* @__PURE__ */ n("div")({
   name: "SponsorText",
   class: "s1evcmtq",
   propsAsIs: !1
-}), Zo = /* @__PURE__ */ n("div")({
+}), ee = /* @__PURE__ */ n("div")({
   name: "ADLogo",
   class: "awodx0x",
   propsAsIs: !1
-}), oe = /* @__PURE__ */ n("span")({
+}), ne = /* @__PURE__ */ n("span")({
   name: "SponsoredText",
   class: "s1q3n6oi",
   propsAsIs: !1
-}), ee = /* @__PURE__ */ n("div")({
+}), se = /* @__PURE__ */ n("div")({
   name: "CloseIconWrap",
   class: "c8d4xfk",
   propsAsIs: !1
-}), ne = () => K, se = /* @__PURE__ */ n(ne())({
+}), ie = () => K, ae = /* @__PURE__ */ n(ie())({
   name: "CloseIcon",
   class: "ct6oobh",
   propsAsIs: !0
-}), ie = /* @__PURE__ */ n("div")({
+}), te = /* @__PURE__ */ n("div")({
   name: "ActionBtnWrap",
   class: "a1gyg7tt",
   propsAsIs: !1
-}), ae = /* @__PURE__ */ n("a")({
+}), re = /* @__PURE__ */ n("a")({
   name: "ActionButton",
   class: "a17rwbtk",
   propsAsIs: !1
-}), te = /* @__PURE__ */ n("div")({
+}), le = /* @__PURE__ */ n("div")({
   name: "Title",
   class: "t3vxzaw",
   propsAsIs: !1
-}), re = "h10f3u0j", H = ({ promotion: o, promotionId: s, onClose: r }) => {
-  var i, a, l, t, p, u, v, m, d, C, S, M, T, B, E, L, x, O, P, _, j, D, R, F, q, U;
-  const A = o.type === g.INGAME_IAB11_LBAR || o.type === g.INGAME_IAB11, y = ((i = o.sponsor) == null ? void 0 : i.logo) && o.logoMode === I.CENTER;
-  return /* @__PURE__ */ c(wo, { className: "PromoOverlay", children: [
-    /* @__PURE__ */ c(Go, { children: [
-      /* @__PURE__ */ c(zo, { className: f(!y && Ho), children: [
-        ((a = o.sponsor) == null ? void 0 : a.logo) && o.logoMode === I.LEFT && /* @__PURE__ */ e(G, { src: (l = o.sponsor) == null ? void 0 : l.logo, alt: "promo" }),
+}), de = "h10f3u0j", H = ({ promotion: o, promotionId: s, onClose: r }) => {
+  var i, a, l, t, p, u, v, m, d, M, S, T, k, B, E, L, O, x, _, P, j, R, D, q, F, U;
+  const b = o.type === I.INGAME_IAB11_LBAR || o.type === I.INGAME_IAB11, y = ((i = o.sponsor) == null ? void 0 : i.logo) && o.logoMode === h.CENTER;
+  return /* @__PURE__ */ c(zo, { className: "PromoOverlay", children: [
+    /* @__PURE__ */ c(Ho, { children: [
+      /* @__PURE__ */ c(Ko, { className: f(!y && Wo), children: [
+        ((a = o.sponsor) == null ? void 0 : a.logo) && o.logoMode === h.LEFT && /* @__PURE__ */ e(G, { src: (l = o.sponsor) == null ? void 0 : l.logo, alt: "promo" }),
         /* @__PURE__ */ c(
-          Xo,
+          Zo,
           {
             style: {
-              paddingLeft: (t = o.sponsor) != null && t.logo && o.logoMode === I.LEFT ? "0px" : "8px"
+              paddingLeft: (t = o.sponsor) != null && t.logo && o.logoMode === h.LEFT ? "0px" : "8px"
             },
             children: [
-              ((p = o.sponsor) == null ? void 0 : p.logo) && o.logoMode === I.LEFT && /* @__PURE__ */ e(Ko, { children: (u = o.sponsor) == null ? void 0 : u.name }),
-              /* @__PURE__ */ c(Yo, { className: "SponsorText", children: [
-                /* @__PURE__ */ e(Zo, { children: "AD" }),
-                /* @__PURE__ */ e(oe, { children: "SPONSORED" })
+              ((p = o.sponsor) == null ? void 0 : p.logo) && o.logoMode === h.LEFT && /* @__PURE__ */ e(Qo, { children: (u = o.sponsor) == null ? void 0 : u.name }),
+              /* @__PURE__ */ c(oe, { className: "SponsorText", children: [
+                /* @__PURE__ */ e(ee, { children: "AD" }),
+                /* @__PURE__ */ e(ne, { children: "SPONSORED" })
               ] })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ e(ee, { className: "ClosePromoIcon", onClick: r, children: /* @__PURE__ */ e(se, { name: "icon-cross" }) })
+      /* @__PURE__ */ e(se, { className: "ClosePromoIcon", onClick: r, children: /* @__PURE__ */ e(ae, { name: "icon-cross" }) })
     ] }),
-    /* @__PURE__ */ c(Wo, { children: [
-      y && /* @__PURE__ */ e(G, { className: Jo, src: (v = o.sponsor) == null ? void 0 : v.logo, alt: "promo" }),
+    /* @__PURE__ */ c(Jo, { children: [
+      y && /* @__PURE__ */ e(G, { className: Xo, src: (v = o.sponsor) == null ? void 0 : v.logo, alt: "promo" }),
       /* @__PURE__ */ e(z, { children: (d = (m = o.banner) == null ? void 0 : m.video) != null && d.url ? /* @__PURE__ */ e(
         X,
         {
-          source: (S = (C = o.banner) == null ? void 0 : C.video) == null ? void 0 : S.url,
-          poster: (T = (M = o.banner) == null ? void 0 : M.video) == null ? void 0 : T.thumbnailUrl,
-          aspectRatio: A ? "1/1" : "16/9",
+          source: (S = (M = o.banner) == null ? void 0 : M.video) == null ? void 0 : S.url,
+          poster: (k = (T = o.banner) == null ? void 0 : T.video) == null ? void 0 : k.thumbnailUrl,
+          aspectRatio: b ? "1/1" : "16/9",
           onPlay: () => {
             $.emit("advertisement", {
               action: "videoPlay",
@@ -252,53 +259,53 @@ const ao = /* @__PURE__ */ n("div")({
             });
           }
         }
-      ) : (B = o.banner) != null && B.imageUrl ? /* @__PURE__ */ e(Qo, { style: A ? { aspectRatio: "1/1" } : {}, src: (E = o.banner) == null ? void 0 : E.imageUrl, alt: "promo" }) : null }),
-      !A && /* @__PURE__ */ c(z, { children: [
-        ((L = o.banner) == null ? void 0 : L.title) && /* @__PURE__ */ e(te, { className: f("AdvTitle", y && re), children: (x = o.banner) == null ? void 0 : x.title }),
-        ((O = o.banner) == null ? void 0 : O.body) && /* @__PURE__ */ e(Vo, { className: "AdvDescription", children: (P = o.banner) == null ? void 0 : P.body })
+      ) : (B = o.banner) != null && B.imageUrl ? /* @__PURE__ */ e(Vo, { style: b ? { aspectRatio: "1/1" } : {}, src: (E = o.banner) == null ? void 0 : E.imageUrl, alt: "promo" }) : null }),
+      !b && /* @__PURE__ */ c(z, { children: [
+        ((L = o.banner) == null ? void 0 : L.title) && /* @__PURE__ */ e(le, { className: f("AdvTitle", y && de), children: (O = o.banner) == null ? void 0 : O.title }),
+        ((x = o.banner) == null ? void 0 : x.body) && /* @__PURE__ */ e(Yo, { className: "AdvDescription", children: (_ = o.banner) == null ? void 0 : _.body })
       ] })
     ] }),
-    /* @__PURE__ */ e(ie, { children: /* @__PURE__ */ e(
-      ae,
+    /* @__PURE__ */ e(te, { children: /* @__PURE__ */ e(
+      re,
       {
-        href: (_ = o.banner) == null ? void 0 : _.url,
+        href: (P = o.banner) == null ? void 0 : P.url,
         style: {
-          backgroundColor: ((D = (j = o.banner) == null ? void 0 : j.ctaButton) == null ? void 0 : D.color) || "#009dc4",
-          color: ((F = (R = o.banner) == null ? void 0 : R.ctaButton) == null ? void 0 : F.textColor) || "#fff"
+          backgroundColor: ((R = (j = o.banner) == null ? void 0 : j.ctaButton) == null ? void 0 : R.color) || "#009dc4",
+          color: ((q = (D = o.banner) == null ? void 0 : D.ctaButton) == null ? void 0 : q.textColor) || "#fff"
         },
         "data-analytics": "button",
         "data-promo-id": s,
         "data-promo-type": o.type,
         target: "_blank",
-        children: (U = (q = o.banner) == null ? void 0 : q.ctaButton) == null ? void 0 : U.label
+        children: (U = (F = o.banner) == null ? void 0 : F.ctaButton) == null ? void 0 : U.label
       }
     ) })
   ] });
-}, le = /* @__PURE__ */ n("div")({
+}, ce = /* @__PURE__ */ n("div")({
   name: "SidebarContainer",
   class: "s1abskp8",
   propsAsIs: !1
-}), de = ({
+}), me = ({
   children: o,
   direction: s,
   style: r,
   className: i,
   hiding: a
-}) => /* @__PURE__ */ e(k, {
+}) => /* @__PURE__ */ e(C, {
   direction: s,
   style: r,
   hiding: a,
   className: i,
-  children: /* @__PURE__ */ e(le, {
+  children: /* @__PURE__ */ e(ce, {
     children: o
   })
-}), ce = (o) => (o == null ? void 0 : o.type) === g.INGAME_IAB11_LBAR || (o == null ? void 0 : o.type) === g.INGAME_IAB21_LBAR, me = (o) => (o == null ? void 0 : o.type) === g.INGAME_IAB11 || (o == null ? void 0 : o.type) === g.INGAME_IAB21, pe = ({ advertisement: o, skipTypeCheck: s, layoutMode: r = "side-by-side", sidebar: i, isNotification: a, banner: l }) => {
+}), pe = (o) => (o == null ? void 0 : o.type) === I.INGAME_IAB11_LBAR || (o == null ? void 0 : o.type) === I.INGAME_IAB21_LBAR, ue = (o) => (o == null ? void 0 : o.type) === I.INGAME_IAB11 || (o == null ? void 0 : o.type) === I.INGAME_IAB21, ve = ({ advertisement: o, skipTypeCheck: s, layoutMode: r = "side-by-side", sidebar: i, isNotification: a, banner: l }) => {
   const t = N(o.data);
   return !t.data && t.loading ? null : t.error ? /* @__PURE__ */ c("div", { children: [
     "error ",
     /* @__PURE__ */ e("button", { onClick: o.close, children: "close" })
-  ] }) : t.data ? a ? /* @__PURE__ */ e(qo, { notification: t.data.notification, promotionId: o.id }) : !i && !l && (s || me(t.data.promotions)) ? /* @__PURE__ */ e(Uo, { className: "PromoOverlayContainer", children: /* @__PURE__ */ e(H, { promotionId: o.id, promotion: t.data.promotions, onClose: o.close }) }) : i && (s || ce(t.data.promotions)) ? /* @__PURE__ */ e(de, { className: "PromoSidebarContainer", direction: i, hiding: o.hiding, children: /* @__PURE__ */ e(H, { promotionId: o.id, promotion: t.data.promotions, onClose: o.close }) }) : l ? /* @__PURE__ */ e(
-    yo,
+  ] }) : t.data ? a ? /* @__PURE__ */ e(wo, { notification: t.data.notification, promotionId: o.id }) : !i && !l && (s || ue(t.data.promotions)) ? /* @__PURE__ */ e(Go, { className: "PromoOverlayContainer", children: /* @__PURE__ */ e(H, { promotionId: o.id, promotion: t.data.promotions, onClose: o.close }) }) : i && (s || pe(t.data.promotions)) ? /* @__PURE__ */ e(me, { className: "PromoSidebarContainer", direction: i, hiding: o.hiding, children: /* @__PURE__ */ e(H, { promotionId: o.id, promotion: t.data.promotions, onClose: o.close }) }) : l ? /* @__PURE__ */ e(
+    fo,
     {
       promotionId: o.id,
       hiding: o.hiding,
@@ -309,14 +316,14 @@ const ao = /* @__PURE__ */ n("div")({
     "empty promo ",
     /* @__PURE__ */ e("button", { onClick: o.close, children: "close" })
   ] });
-}, ue = /* @__PURE__ */ n("div")({
+}, Ie = /* @__PURE__ */ n("div")({
   name: "AdvertisementUIWrap",
   class: "aa6pjif",
   propsAsIs: !1
-}), ve = (o) => {
+}), ge = (o) => {
   const s = o.target;
   if (s instanceof HTMLAnchorElement && s.target === "_blank") {
-    const r = s.getAttribute("data-promo-id") || "", i = s.getAttribute("data-promo-type") || g.UNSET;
+    const r = s.getAttribute("data-promo-id") || "", i = s.getAttribute("data-promo-type") || I.UNSET;
     s.getAttribute("data-analytics") === "button" && $.emit("advertisement", {
       action: "buttonSelect",
       payload: {
@@ -331,7 +338,7 @@ const ao = /* @__PURE__ */ n("div")({
       }
     });
   }
-}, ge = ({
+}, he = ({
   gamification: o,
   layoutMode: s,
   skipTypeCheck: r,
@@ -350,14 +357,14 @@ const ao = /* @__PURE__ */ n("div")({
   return Y(u, {
     enabled: !!m,
     event: "click",
-    listener: ve
-  }), m ? /* @__PURE__ */ e(ue, {
+    listener: ge
+  }), m ? /* @__PURE__ */ e(Ie, {
     ref: u,
     style: {
       height: !a && !i ? "auto" : "100%"
     },
     className: t ? "mobile-view" : "",
-    children: /* @__PURE__ */ e(pe, {
+    children: /* @__PURE__ */ e(ve, {
       skipTypeCheck: r,
       sidebar: i,
       banner: a,
@@ -366,7 +373,7 @@ const ao = /* @__PURE__ */ n("div")({
       isNotification: l
     })
   }) : null;
-}, he = ({
+}, Ae = ({
   sdk: o,
   sidebar: s,
   banner: r,
@@ -393,8 +400,8 @@ const ao = /* @__PURE__ */ n("div")({
     });
   if (!m)
     return null;
-  const d = o.getFeature(io.GAMES);
-  return d ? /* @__PURE__ */ e(ge, {
+  const d = o.getFeature(ao.GAMES);
+  return d ? /* @__PURE__ */ e(he, {
     gamification: d,
     sidebar: s,
     banner: r,
@@ -404,7 +411,7 @@ const ao = /* @__PURE__ */ n("div")({
     notification: u,
     skipTypeCheck: i
   }) : null;
-}, $e = ({
+}, Ce = ({
   event: o,
   sidebar: s,
   banner: r,
@@ -414,7 +421,7 @@ const ao = /* @__PURE__ */ n("div")({
 }) => {
   const t = oo();
   return t ? /* @__PURE__ */ e("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ e(eo, { children: /* @__PURE__ */ e(
-    he,
+    Ae,
     {
       sdk: t,
       event: o,
@@ -428,6 +435,6 @@ const ao = /* @__PURE__ */ n("div")({
   ) }) }) : null;
 };
 export {
-  $e as StreamLayerSDKAdvertisement,
-  he as StreamLayerSDKAdvertisementUI
+  Ce as StreamLayerSDKAdvertisement,
+  Ae as StreamLayerSDKAdvertisementUI
 };

package/lib/es/index2.js

@@ -1,8 +1,8 @@
 var fe = Object.defineProperty;
 var ke = (e, s, n) => s in e ? fe(e, s, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[s] = n;
 var m = (e, s, n) => ke(e, typeof s != "symbol" ? s + "" : s, n);
-import { C, h as G, Q as x, S as w } from "./useStreamLayerApp2.js";
-import { a4 as P, u, F as ye, s as h, T as re, i as Ne, p as be, b as Se, N as Ie, k as Ee, M as Ae, f as Ce, S as we, C as $e, g as De, O as le, m as q, l as Le, h as Te, j as Oe, n as de, o as xe, q as Re, r as Ve, t as M, w as Pe, x as ce, y as U, z as qe, A as H, I as O, a as pe, D as _e, E as Fe, G as Qe, e as Ke, H as R, J as j, K as Me, P as Ue, R as ze, c as ue, V as We, W as Be, L as _, _ as Ge, v as F, $ as He, a0 as je, X as Xe, Y as Ye, Z as Ze, a5 as Je, a2 as he, a3 as X } from "./provider.js";
+import { h as w, i as G, Q as x, S as C } from "./useStreamLayerApp2.js";
+import { a4 as P, u, F as ye, s as h, T as re, i as Ne, p as be, b as Se, N as Ie, k as Ee, M as Ae, f as we, S as Ce, C as $e, g as De, O as le, m as q, l as Le, h as Te, j as Oe, n as de, o as xe, q as Re, r as Ve, t as M, w as Pe, x as ce, y as U, z as qe, A as H, I as O, a as pe, D as _e, E as Fe, G as Qe, e as Ke, H as R, J as j, K as Me, P as Ue, R as ze, c as ue, V as We, W as Be, L as _, _ as Ge, v as F, $ as He, a0 as je, X as Xe, Y as Ye, Z as Ze, a5 as Je, a2 as he, a3 as X } from "./provider.js";
 import { jsx as t, jsxs as g, Fragment as L } from "react/jsx-runtime";
 import { createContext as es, useContext as z, useRef as D, useState as E, useEffect as k, useTransition as ss, lazy as ns, useMemo as $, Suspense as ts, forwardRef as os, useLayoutEffect as is, useCallback as V } from "react";
 window.dispatchEvent(new CustomEvent("grpc_devtools_loaded"));
@@ -46,7 +46,7 @@ var Y;
 (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";
 })(Y || (Y = {}));
-C.Unknown, C.Internal, C.DeadlineExceeded, C.ResourceExhausted, C.FailedPrecondition, C.Unavailable, C.DataLoss;
+w.Unknown, w.Internal, w.DeadlineExceeded, w.ResourceExhausted, w.FailedPrecondition, w.Unavailable, w.DataLoss;
 P("grpc:retry");
 G(10, { description: "Number of attempts to retry" }), G(3e4, { description: "Max delay between retries in milliseconds" });
 var I;
@@ -106,7 +106,7 @@ var te;
 })(te || (te = {}));
 x.POLL, x.PREDICTION, x.TRIVIA;
 const ds = {
-  [w.GAMES]: !0
+  [C.GAMES]: !0
 }, Q = /* @__PURE__ */ h("div")({
   name: "LoadingContainer",
   class: "lclc0ej",
@@ -226,11 +226,11 @@ const ds = {
     key: d
   } = u(e.leaderboardList.$store), {
     data: i
-  } = u(e.deepLink.$store), [c, p] = Ce(o);
+  } = u(e.deepLink.$store), [c, p] = we(o);
   return !a.length && !l ? /* @__PURE__ */ t(gs, {
     deepLink: i
   }) : /* @__PURE__ */ g(L, {
-    children: [/* @__PURE__ */ t(we, {
+    children: [/* @__PURE__ */ t(Ce, {
       items: a,
       scrollNode: s,
       scrollStore: n,
@@ -364,9 +364,9 @@ const ds = {
     useContainer: !l,
     children: c
   });
-}, Cs = ns(() => import("./gamification-feature.js")), ws = ({ sdk: e, feature: s, className: n, scrollStore: o, appNode: a, scrollNode: r, responsiveStore: l }) => {
-  const d = $(() => s && s.featureConfig.get().type === w.GAMES ? /* @__PURE__ */ t(cs, { className: n, sdk: e, feature: s, children: /* @__PURE__ */ t(
-    Cs,
+}, ws = ns(() => import("./gamification-feature.js")), Cs = ({ sdk: e, feature: s, className: n, scrollStore: o, appNode: a, scrollNode: r, responsiveStore: l }) => {
+  const d = $(() => s && s.featureConfig.get().type === C.GAMES ? /* @__PURE__ */ t(cs, { className: n, sdk: e, feature: s, children: /* @__PURE__ */ t(
+    ws,
     {
       appNode: a,
       scrollStore: o,
@@ -383,7 +383,7 @@ const ds = {
       children: d
     }
   );
-}, $s = ({ feature: e, className: s, appNode: n, responsiveStore: o }) => e && e.featureConfig.get().type === w.GAMES ? /* @__PURE__ */ t(
+}, $s = ({ feature: e, className: s, appNode: n, responsiveStore: o }) => e && e.featureConfig.get().type === C.GAMES ? /* @__PURE__ */ t(
   As,
   {
     className: s,
@@ -405,7 +405,7 @@ const ds = {
   }, [o, a]), d = $(() => [...l.filter(({
     enableSdkButton: i,
     type: c
-  }) => c === w.GAMES || i).map((i) => ({
+  }) => c === C.GAMES || i).map((i) => ({
     id: i.type,
     onClick: () => e.openFeature(i.type),
     disabled: !(i.type in ds),
@@ -425,7 +425,7 @@ const ds = {
         onClick: () => e.closeFeature(),
         label: "Channels",
         active: r === 0
-      }, "Channels"), ...d.map((i) => i.id === w.GAMES ? /* @__PURE__ */ t(O, {
+      }, "Channels"), ...d.map((i) => i.id === C.GAMES ? /* @__PURE__ */ t(O, {
         ...i,
         active: i.id === r,
         label: "StreamLayer +",
@@ -592,7 +592,7 @@ const ds = {
   sdkInDesktopView: r,
   responsiveStore: l
 }) => {
-  const d = D(null), i = s.data.onboarding, [c, p] = E(i == null ? void 0 : i.instantOpen), v = e.getFeature(w.GAMES), f = $(() => K == null ? void 0 : K.map(({
+  const d = D(null), i = s.data.onboarding, [c, p] = E(i == null ? void 0 : i.instantOpen), v = e.getFeature(C.GAMES), f = $(() => K == null ? void 0 : K.map(({
     graphicSrc: y
   }) => y), []), {
     screen: N
@@ -819,7 +819,7 @@ const ds = {
 }, an = (e) => {
   const s = D(""), [n, o] = E(!1), a = u(e.status), r = u(e.sdkStore.slStreamId), l = u(e.userId()), d = u(e.getActiveFeature()), i = a === "ready" && !!r.data;
   k(() => {
-    const v = e.getFeature(w.GAMES);
+    const v = e.getFeature(C.GAMES);
     v && (v.closeQuestion(), v.closeUser());
   }, [d, e]);
   const c = V(
@@ -860,7 +860,7 @@ const ds = {
 }, rn = ({ sdk: e, className: s, scrollStore: n, appNode: o, scrollNode: a, responsiveStore: r }) => {
   const [, l] = je(e);
   return /* @__PURE__ */ t(
-    ws,
+    Cs,
     {
       className: s,
       scrollNode: a,