@streamlayer/react 1.3.0 → 1.3.2

package/lib/es/advertisement.js

@@ -1,335 +1,430 @@
-import { jsx as o, jsxs as d } from "react/jsx-runtime";
-import { useEffect as F, useRef as z, useMemo as W } from "react";
-import { a as A, s as n, c as H, Q as K, e as g, u as I, L as Q } from "./provider.js";
-import { F as J, u as V, d as X } from "./index2.js";
-import { P as u, a as h, S as Y } from "./useStreamLayerApp2.js";
-const Z = /* @__PURE__ */ n("div")({
+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 W, 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 I, a as no, b as so, P as h, c as b, S as io } from "./useStreamLayerApp2.js";
+const ao = /* @__PURE__ */ n("div")({
   name: "Container",
   class: "c5b6wdg",
   propsAsIs: !1
-}), ee = "a1rlj479", oe = "s35f1di", ne = "sj4471g", se = "b12050d8", ae = "b1d5ybek", te = (e) => e === "left" || e === "right" ? oe : se, ie = (e) => e === "left" || e === "right" ? ne : ae, re = (e) => e === "left" ? "avdxyl3" : e === "right" ? "a1bisd08" : e === "top" ? "a1u9y2aj" : "a1qqaks", q = ({
-  children: e,
+}), to = "a1rlj479", ro = "s35f1di", lo = "sj4471g", co = "b12050d8", po = "b1d5ybek", mo = (o) => o === "left" || o === "right" ? ro : co, uo = (o) => o === "left" || o === "right" ? lo : po, vo = (o) => o === "left" ? "avdxyl3" : o === "right" ? "a1bisd08" : o === "top" ? "a1u9y2aj" : "a1qqaks", C = ({
+  children: o,
   style: s,
   className: r,
-  enabled: a = !0,
-  hiding: t,
-  direction: i = "left",
-  onAnimationEnd: l
-}) => /* @__PURE__ */ o(Z, {
+  enabled: i = !0,
+  hiding: a,
+  direction: l = "left",
+  onAnimationEnd: t
+}) => /* @__PURE__ */ e(ao, {
   style: s,
-  className: A(r, ee, re(i), a && !t && te(i), a && t && ie(i)),
-  onAnimationEnd: l,
-  children: e
-}), le = /* @__PURE__ */ n("a")({
+  className: f(r, to, vo(l), i && !a && mo(l), i && a && uo(l)),
+  onAnimationEnd: t,
+  children: o
+}), ho = /* @__PURE__ */ n("a")({
   name: "Link",
   class: "l1sgte8c",
   propsAsIs: !1
-}), de = /* @__PURE__ */ n("div")({
+}), Io = /* @__PURE__ */ n("div")({
   name: "BannerContainer",
   class: "b7yfc72",
   propsAsIs: !1
-}), ce = () => le, pe = /* @__PURE__ */ n(ce())({
+}), go = () => ho, bo = /* @__PURE__ */ n(go())({
   name: "BannerLink",
   class: "bejjq94",
   propsAsIs: !0
-}), me = /* @__PURE__ */ n("img")({
+}), Ao = /* @__PURE__ */ n("img")({
   name: "BannerImg",
   class: "b1j94hdr",
   propsAsIs: !1
-}), ue = ({ promotion: e, promotionId: s, hiding: r, direction: a = "bottom" }) => {
-  var t;
-  return (t = e.additionalBanner) != null && t.imageUrl ? /* @__PURE__ */ o(q, { direction: a, hiding: r, children: /* @__PURE__ */ o(de, { children: /* @__PURE__ */ o(
-    pe,
+}), yo = ({ promotion: o, promotionId: s, hiding: r, direction: i = "bottom" }) => {
+  var a;
+  return (a = o.additionalBanner) != null && a.imageUrl ? /* @__PURE__ */ e(C, { direction: i, hiding: r, children: /* @__PURE__ */ e(Io, { className: "BannerContainer", children: /* @__PURE__ */ e(
+    bo,
     {
-      href: e.additionalBanner.url,
+      className: "BannerLink",
+      href: o.additionalBanner.url,
+      style: { backgroundImage: `url(${o.additionalBanner.imageUrl})` },
       "data-promo-id": s,
-      "data-promo-type": e.type,
+      "data-promo-type": o.type,
       "data-analytics": "banner",
       target: "_blank",
-      children: /* @__PURE__ */ o(me, { src: e.additionalBanner.imageUrl, alt: "promo" })
+      children: /* @__PURE__ */ e(Ao, { src: o.additionalBanner.imageUrl, alt: "promo" })
     }
   ) }) }) : null;
-}, ve = /* @__PURE__ */ n("div")({
+}, fo = /* @__PURE__ */ n("div")({
+  name: "NotificationContent",
+  class: "n1ku6hz",
+  propsAsIs: !1
+}), $o = /* @__PURE__ */ n("div")({
+  name: "NotificationContainer",
+  class: "nbxqmol",
+  propsAsIs: !1
+}), No = /* @__PURE__ */ n("div")({
+  name: "Body",
+  class: "b1gu3eml",
+  propsAsIs: !1
+}), Co = /* @__PURE__ */ n("div")({
+  name: "Title",
+  class: "t1u17zva",
+  propsAsIs: !1
+}), So = /* @__PURE__ */ n("div")({
+  name: "Text",
+  class: "t10ko1g",
+  propsAsIs: !1
+}), S = /* @__PURE__ */ n("div")({
+  name: "Media",
+  class: "mntc42e",
+  propsAsIs: !1
+}), ko = () => S, G = /* @__PURE__ */ n(ko())({
+  name: "MediaImgFit",
+  class: "ml060eo",
+  propsAsIs: !0
+}), Mo = () => S, k = /* @__PURE__ */ n(Mo())({
+  name: "MediaImgCentered",
+  class: "m1vqlvig",
+  propsAsIs: !0
+}), To = () => k, Bo = /* @__PURE__ */ n(To())({
+  name: "MediaImgBottom",
+  class: "m1e7tvi5",
+  propsAsIs: !0
+}), Eo = () => S, Lo = /* @__PURE__ */ n(Eo())({
+  name: "MediaImgSolid",
+  class: "mqvntt2",
+  propsAsIs: !0
+}), xo = () => k, Oo = /* @__PURE__ */ n(xo())({
+  name: "MediaImgMiddle",
+  class: "m12jtj3u",
+  propsAsIs: !0
+}), _o = /* @__PURE__ */ n("button")({
+  name: "Button",
+  class: "bkq1frv",
+  propsAsIs: !1
+}), Po = () => W, jo = /* @__PURE__ */ n(Po())({
+  name: "StyledChevronRight",
+  class: "sis90pl",
+  propsAsIs: !0
+}), Do = /* @__PURE__ */ n("div")({
+  name: "Logo",
+  class: "l9mjmz3",
+  propsAsIs: !1
+}), Ro = {
+  [I.UNSET]: G,
+  [I.FIT]: G,
+  [I.CENTERED]: k,
+  [I.BOTTOM]: Bo,
+  [I.SOLID]: Lo,
+  [I.MIDDLE]: Oo
+}, Fo = ({ 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: m } = o, { sponsorLogo: u, sponsorLogoMode: v, imagePosition: p, ctaButton: d } = m, g = Ro[p];
+  return /* @__PURE__ */ e(C, { 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(g, { children: /* @__PURE__ */ e("img", { src: t, alt: "" }) }),
+      /* @__PURE__ */ c(No, { children: [
+        a && /* @__PURE__ */ e(Co, { children: a }),
+        l && /* @__PURE__ */ e(So, { children: l })
+      ] }),
+      /* @__PURE__ */ e(_o, { 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" })
+    ] })
+  ] }) });
+}, qo = /* @__PURE__ */ n("div")({
   name: "OverlayContainer",
   class: "okzhq2w",
   propsAsIs: !1
-}), he = /* @__PURE__ */ n("div")({
+}), Uo = /* @__PURE__ */ n("div")({
   name: "PromoOverlay",
   class: "pmgz5i",
   propsAsIs: !1
-}), ye = /* @__PURE__ */ n("div")({
+}), wo = /* @__PURE__ */ n("div")({
   name: "Header",
   class: "hyxi3jt",
   propsAsIs: !1
-}), be = /* @__PURE__ */ n("div")({
+}), Go = /* @__PURE__ */ n("div")({
   name: "HeaderContent",
   class: "h149e3gp",
   propsAsIs: !1
-}), Ae = "h10toh7", U = /* @__PURE__ */ n("img")({
+}), zo = "h10toh7", z = /* @__PURE__ */ n("img")({
   name: "SponsorLogo",
   class: "s1jyea6t",
   propsAsIs: !1
-}), ge = /* @__PURE__ */ n("div")({
+}), Ho = /* @__PURE__ */ n("div")({
   name: "SponsorName",
   class: "szpfa3h",
   propsAsIs: !1
-}), Ie = /* @__PURE__ */ n("div")({
+}), Ko = /* @__PURE__ */ n("div")({
   name: "Media",
   class: "m1crmu01",
   propsAsIs: !1
-}), fe = /* @__PURE__ */ n("img")({
+}), Wo = /* @__PURE__ */ n("img")({
   name: "PromoImg",
   class: "p1l37r8s",
   propsAsIs: !1
-}), $e = "s1nmch9k", D = /* @__PURE__ */ n("div")({
+}), Qo = "s1nmch9k", H = /* @__PURE__ */ n("div")({
   name: "Content",
   class: "c1er0ljd",
   propsAsIs: !1
-}), ke = /* @__PURE__ */ n("div")({
+}), Jo = /* @__PURE__ */ n("div")({
   name: "Description",
   class: "dydopmr",
   propsAsIs: !1
-}), Se = /* @__PURE__ */ n("div")({
+}), Vo = /* @__PURE__ */ n("div")({
   name: "Sponsor",
   class: "s1w6nt04",
   propsAsIs: !1
-}), Ce = /* @__PURE__ */ n("div")({
+}), Xo = /* @__PURE__ */ n("div")({
   name: "SponsorText",
   class: "s1evcmtq",
   propsAsIs: !1
-}), Me = /* @__PURE__ */ n("div")({
+}), Yo = /* @__PURE__ */ n("div")({
   name: "ADLogo",
   class: "awodx0x",
   propsAsIs: !1
-}), Ne = /* @__PURE__ */ n("span")({
+}), Zo = /* @__PURE__ */ n("span")({
   name: "SponsoredText",
   class: "s1q3n6oi",
   propsAsIs: !1
-}), Be = /* @__PURE__ */ n("div")({
+}), oe = /* @__PURE__ */ n("div")({
   name: "CloseIconWrap",
   class: "c8d4xfk",
   propsAsIs: !1
-}), Ee = () => H, Te = /* @__PURE__ */ n(Ee())({
+}), ee = () => W, ne = /* @__PURE__ */ n(ee())({
   name: "CloseIcon",
   class: "ct6oobh",
   propsAsIs: !0
-}), Le = /* @__PURE__ */ n("div")({
+}), se = /* @__PURE__ */ n("div")({
   name: "ActionBtnWrap",
   class: "a1gyg7tt",
   propsAsIs: !1
-}), xe = /* @__PURE__ */ n("a")({
+}), ie = /* @__PURE__ */ n("a")({
   name: "ActionButton",
   class: "a17rwbtk",
   propsAsIs: !1
-}), _e = /* @__PURE__ */ n("div")({
+}), ae = /* @__PURE__ */ n("div")({
   name: "Title",
   class: "t3vxzaw",
   propsAsIs: !1
-}), je = "h10f3u0j", G = ({ promotion: e, promotionId: s, onClose: r }) => {
-  var a, t, i, l, p, m, c, v, f, $, k, S, C, M, N, B, E, T, L, x, _, j, P, O, w, R;
-  const y = e.type === u.INGAME_IAB11_LBAR || e.type === u.INGAME_IAB11, b = ((a = e.sponsor) == null ? void 0 : a.logo) && e.logoMode === h.CENTER;
-  return /* @__PURE__ */ d(he, { className: "PromoOverlay", children: [
-    /* @__PURE__ */ d(ye, { children: [
-      /* @__PURE__ */ d(be, { className: A(!b && Ae), children: [
-        ((t = e.sponsor) == null ? void 0 : t.logo) && e.logoMode === h.LEFT && /* @__PURE__ */ o(U, { src: (i = e.sponsor) == null ? void 0 : i.logo, alt: "promo" }),
-        /* @__PURE__ */ d(
-          Se,
+}), te = "h10f3u0j", K = ({ promotion: o, promotionId: s, onClose: r }) => {
+  var i, a, l, t, m, u, v, p, d, g, M, T, B, E, L, x, O, _, P, j, D, R, F, q, U, w;
+  const A = o.type === h.INGAME_IAB11_LBAR || o.type === h.INGAME_IAB11, y = ((i = o.sponsor) == null ? void 0 : i.logo) && o.logoMode === b.CENTER;
+  return /* @__PURE__ */ c(Uo, { className: "PromoOverlay", children: [
+    /* @__PURE__ */ c(wo, { children: [
+      /* @__PURE__ */ c(Go, { className: f(!y && zo), children: [
+        ((a = o.sponsor) == null ? void 0 : a.logo) && o.logoMode === b.LEFT && /* @__PURE__ */ e(z, { src: (l = o.sponsor) == null ? void 0 : l.logo, alt: "promo" }),
+        /* @__PURE__ */ c(
+          Vo,
           {
             style: {
-              paddingLeft: (l = e.sponsor) != null && l.logo && e.logoMode === h.LEFT ? "0px" : "8px"
+              paddingLeft: (t = o.sponsor) != null && t.logo && o.logoMode === b.LEFT ? "0px" : "8px"
             },
             children: [
-              ((p = e.sponsor) == null ? void 0 : p.logo) && e.logoMode === h.LEFT && /* @__PURE__ */ o(ge, { children: (m = e.sponsor) == null ? void 0 : m.name }),
-              /* @__PURE__ */ d(Ce, { children: [
-                /* @__PURE__ */ o(Me, { children: "AD" }),
-                /* @__PURE__ */ o(Ne, { children: "SPONSORED" })
+              ((m = o.sponsor) == null ? void 0 : m.logo) && o.logoMode === b.LEFT && /* @__PURE__ */ e(Ho, { children: (u = o.sponsor) == null ? void 0 : u.name }),
+              /* @__PURE__ */ c(Xo, { className: "SponsorText", children: [
+                /* @__PURE__ */ e(Yo, { children: "AD" }),
+                /* @__PURE__ */ e(Zo, { children: "SPONSORED" })
               ] })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ o(Be, { onClick: r, children: /* @__PURE__ */ o(Te, { name: "icon-cross" }) })
+      /* @__PURE__ */ e(oe, { className: "ClosePromoIcon", onClick: r, children: /* @__PURE__ */ e(ne, { name: "icon-cross" }) })
     ] }),
-    /* @__PURE__ */ d(Ie, { children: [
-      b && /* @__PURE__ */ o(U, { className: $e, src: (c = e.sponsor) == null ? void 0 : c.logo, alt: "promo" }),
-      /* @__PURE__ */ o(D, { children: (f = (v = e.banner) == null ? void 0 : v.video) != null && f.url ? /* @__PURE__ */ o(
-        K,
+    /* @__PURE__ */ c(Ko, { children: [
+      y && /* @__PURE__ */ e(z, { className: Qo, src: (v = o.sponsor) == null ? void 0 : v.logo, alt: "promo" }),
+      /* @__PURE__ */ e(H, { children: (d = (p = o.banner) == null ? void 0 : p.video) != null && d.url ? /* @__PURE__ */ e(
+        X,
         {
-          source: (k = ($ = e.banner) == null ? void 0 : $.video) == null ? void 0 : k.url,
-          poster: (C = (S = e.banner) == null ? void 0 : S.video) == null ? void 0 : C.thumbnailUrl,
-          aspectRatio: y ? "1/1" : "16/9",
+          source: (M = (g = o.banner) == null ? void 0 : g.video) == null ? void 0 : M.url,
+          poster: (B = (T = o.banner) == null ? void 0 : T.video) == null ? void 0 : B.thumbnailUrl,
+          aspectRatio: A ? "1/1" : "16/9",
           onPlay: () => {
-            g.emit("advertisement", {
+            $.emit("advertisement", {
               action: "videoPlay",
               payload: {
                 advertisementId: s,
-                advertisementType: e.type
+                advertisementType: o.type
               }
             });
           }
         }
-      ) : (M = e.banner) != null && M.imageUrl ? /* @__PURE__ */ o(fe, { style: y ? { aspectRatio: "1/1" } : {}, src: (N = e.banner) == null ? void 0 : N.imageUrl, alt: "promo" }) : null }),
-      !y && /* @__PURE__ */ d(D, { children: [
-        ((B = e.banner) == null ? void 0 : B.title) && /* @__PURE__ */ o(_e, { className: A(b && je), children: (E = e.banner) == null ? void 0 : E.title }),
-        ((T = e.banner) == null ? void 0 : T.body) && /* @__PURE__ */ o(ke, { children: (L = e.banner) == null ? void 0 : L.body })
+      ) : (E = o.banner) != null && E.imageUrl ? /* @__PURE__ */ e(Wo, { style: A ? { aspectRatio: "1/1" } : {}, src: (L = o.banner) == null ? void 0 : L.imageUrl, alt: "promo" }) : null }),
+      !A && /* @__PURE__ */ c(H, { children: [
+        ((x = o.banner) == null ? void 0 : x.title) && /* @__PURE__ */ e(ae, { className: f("AdvTitle", y && te), children: (O = o.banner) == null ? void 0 : O.title }),
+        ((_ = o.banner) == null ? void 0 : _.body) && /* @__PURE__ */ e(Jo, { className: "AdvDescription", children: (P = o.banner) == null ? void 0 : P.body })
       ] })
     ] }),
-    /* @__PURE__ */ o(Le, { children: /* @__PURE__ */ o(
-      xe,
+    /* @__PURE__ */ e(se, { children: /* @__PURE__ */ e(
+      ie,
       {
-        href: (x = e.banner) == null ? void 0 : x.url,
+        href: (j = o.banner) == null ? void 0 : j.url,
         style: {
-          backgroundColor: ((j = (_ = e.banner) == null ? void 0 : _.ctaButton) == null ? void 0 : j.color) || "#009dc4",
-          color: ((O = (P = e.banner) == null ? void 0 : P.ctaButton) == null ? void 0 : O.textColor) || "#fff"
+          backgroundColor: ((R = (D = o.banner) == null ? void 0 : D.ctaButton) == null ? void 0 : R.color) || "#009dc4",
+          color: ((q = (F = o.banner) == null ? void 0 : F.ctaButton) == null ? void 0 : q.textColor) || "#fff"
         },
         "data-analytics": "button",
         "data-promo-id": s,
-        "data-promo-type": e.type,
+        "data-promo-type": o.type,
         target: "_blank",
-        children: (R = (w = e.banner) == null ? void 0 : w.ctaButton) == null ? void 0 : R.label
+        children: (w = (U = o.banner) == null ? void 0 : U.ctaButton) == null ? void 0 : w.label
       }
     ) })
   ] });
-}, Pe = /* @__PURE__ */ n("div")({
+}, re = /* @__PURE__ */ n("div")({
   name: "SidebarContainer",
   class: "s1abskp8",
   propsAsIs: !1
-}), Oe = ({
-  children: e,
+}), le = ({
+  children: o,
   direction: s,
   style: r,
-  className: a,
-  hiding: t
-}) => /* @__PURE__ */ o(q, {
+  className: i,
+  hiding: a
+}) => /* @__PURE__ */ e(C, {
   direction: s,
   style: r,
-  hiding: t,
-  className: a,
-  children: /* @__PURE__ */ o(Pe, {
-    children: e
+  hiding: a,
+  className: i,
+  children: /* @__PURE__ */ e(re, {
+    children: o
   })
-}), we = (e) => (e == null ? void 0 : e.type) === u.INGAME_IAB11_LBAR || (e == null ? void 0 : e.type) === u.INGAME_IAB21_LBAR, Re = (e) => (e == null ? void 0 : e.type) === u.INGAME_IAB11 || (e == null ? void 0 : e.type) === u.INGAME_IAB21, Ue = ({ advertisement: e, skipTypeCheck: s, layoutMode: r = "side-by-side", sidebar: a, banner: t }) => {
-  const i = I(e.data);
-  return !i.data && i.loading ? null : i.error ? /* @__PURE__ */ d("div", { children: [
+}), de = (o) => (o == null ? void 0 : o.type) === h.INGAME_IAB11_LBAR || (o == null ? void 0 : o.type) === h.INGAME_IAB21_LBAR, ce = (o) => (o == null ? void 0 : o.type) === h.INGAME_IAB11 || (o == null ? void 0 : o.type) === h.INGAME_IAB21, pe = ({ 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__ */ o("button", { onClick: e.close, children: "close" })
-  ] }) : i.data ? !a && !t && (s || Re(i.data)) ? /* @__PURE__ */ o(ve, { className: "PromoOverlayContainer", children: /* @__PURE__ */ o(G, { promotionId: e.id, promotion: i.data, onClose: e.close }) }) : a && (s || we(i.data)) ? /* @__PURE__ */ o(Oe, { className: "PromoSidebarContainer", direction: a, hiding: e.hiding, children: /* @__PURE__ */ o(G, { promotionId: e.id, promotion: i.data, onClose: e.close }) }) : t ? /* @__PURE__ */ o(ue, { promotionId: e.id, hiding: e.hiding, promotion: i.data, direction: t }) : null : /* @__PURE__ */ d("div", { children: [
+    /* @__PURE__ */ e("button", { onClick: o.close, children: "close" })
+  ] }) : t.data ? a ? /* @__PURE__ */ e(Fo, { notification: t.data.notification, promotionId: o.id }) : !i && !l && (s || ce(t.data.promotions)) ? /* @__PURE__ */ e(qo, { className: "PromoOverlayContainer", children: /* @__PURE__ */ e(K, { promotionId: o.id, promotion: t.data.promotions, onClose: o.close }) }) : i && (s || de(t.data.promotions)) ? /* @__PURE__ */ e(le, { className: "PromoSidebarContainer", direction: i, hiding: o.hiding, children: /* @__PURE__ */ e(K, { promotionId: o.id, promotion: t.data.promotions, onClose: o.close }) }) : l ? /* @__PURE__ */ e(
+    yo,
+    {
+      promotionId: o.id,
+      hiding: o.hiding,
+      promotion: t.data.promotions,
+      direction: l
+    }
+  ) : null : /* @__PURE__ */ c("div", { children: [
     "empty promo ",
-    /* @__PURE__ */ o("button", { onClick: e.close, children: "close" })
+    /* @__PURE__ */ e("button", { onClick: o.close, children: "close" })
   ] });
-}, De = /* @__PURE__ */ n("div")({
+}, me = /* @__PURE__ */ n("div")({
   name: "AdvertisementUIWrap",
   class: "aa6pjif",
   propsAsIs: !1
-}), Ge = (e) => {
-  const s = e.target;
+}), ue = (o) => {
+  const s = o.target;
   if (s instanceof HTMLAnchorElement && s.target === "_blank") {
-    const r = s.getAttribute("data-promo-id") || "", a = s.getAttribute("data-promo-type") || u.UNSET;
-    s.getAttribute("data-analytics") === "button" && g.emit("advertisement", {
+    const r = s.getAttribute("data-promo-id") || "", i = s.getAttribute("data-promo-type") || h.UNSET;
+    s.getAttribute("data-analytics") === "button" && $.emit("advertisement", {
       action: "buttonSelect",
       payload: {
         advertisementId: r,
-        advertisementType: a
+        advertisementType: i
       }
-    }), s.getAttribute("data-analytics") === "banner" && g.emit("advertisement", {
+    }), s.getAttribute("data-analytics") === "banner" && $.emit("advertisement", {
       action: "bannerSelect",
       payload: {
         advertisementId: r,
-        advertisementType: a
+        advertisementType: i
       }
     });
   }
-}, qe = ({
-  gamification: e,
+}, ve = ({
+  gamification: o,
   layoutMode: s,
   skipTypeCheck: r,
-  sidebar: a,
-  banner: t,
-  isMobileScreen: i,
-  persistent: l
+  sidebar: i,
+  banner: a,
+  notification: l,
+  isMobileScreen: t,
+  persistent: m
 }) => {
-  const p = z(null), m = I(e.advertisement.$list), c = W(
-    () => e.advertisement.getActiveAdvertisement(l),
+  const u = J(null), v = N(o.advertisement.$list), p = V(
+    () => o.advertisement.getActiveAdvertisement(m),
     // fire getActiveNotification when notifications were updated
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [m, l]
+    [v, m]
   );
-  return Q(p, {
-    enabled: !!c,
+  return Y(u, {
+    enabled: !!p,
     event: "click",
-    listener: Ge
-  }), c ? /* @__PURE__ */ o(De, {
-    ref: p,
+    listener: ue
+  }), p ? /* @__PURE__ */ e(me, {
+    ref: u,
     style: {
-      height: !t && !a ? "auto" : "100%"
+      height: !a && !i ? "auto" : "100%"
     },
-    className: i ? "mobile-view" : "",
-    children: /* @__PURE__ */ o(Ue, {
+    className: t ? "mobile-view" : "",
+    children: /* @__PURE__ */ e(pe, {
       skipTypeCheck: r,
-      sidebar: a,
-      banner: t,
-      advertisement: c,
-      layoutMode: s
+      sidebar: i,
+      banner: a,
+      advertisement: p,
+      layoutMode: s,
+      isNotification: l
     })
   }) : null;
-}, Fe = ({
-  sdk: e,
+}, he = ({
+  sdk: o,
   sidebar: s,
   banner: r,
-  skipTypeCheck: a,
-  event: t,
-  layoutMode: i,
-  isMobileScreen: l,
-  persistent: p
+  skipTypeCheck: i,
+  event: a,
+  layoutMode: l,
+  isMobileScreen: t,
+  persistent: m,
+  notification: u
 }) => {
   const {
-    deactivate: m
-  } = J(e);
-  F(() => {
-    t ? e.createEventSession(t) : m();
-  }, [t, m, e]);
-  const c = I(e.featuresList.getStore());
+    deactivate: v
+  } = Z(o);
+  Q(() => {
+    a ? o.createEventSession(a) : v();
+  }, [a, v, o]);
+  const p = N(o.featuresList.getStore());
   if (s && r)
-    return /* @__PURE__ */ o("div", {
+    return /* @__PURE__ */ e("div", {
       style: {
         color: "red"
       },
       children: "define either sidebar or banner, not both."
     });
-  if (!c)
+  if (!p)
     return null;
-  const v = e.getFeature(Y.GAMES);
-  return v ? /* @__PURE__ */ o(qe, {
-    gamification: v,
+  const d = o.getFeature(io.GAMES);
+  return d ? /* @__PURE__ */ e(ve, {
+    gamification: d,
     sidebar: s,
     banner: r,
-    layoutMode: i,
-    isMobileScreen: l,
-    persistent: p,
-    skipTypeCheck: a
+    layoutMode: l,
+    isMobileScreen: t,
+    persistent: m,
+    notification: u,
+    skipTypeCheck: i
   }) : null;
-}, Je = ({
-  event: e,
+}, fe = ({
+  event: o,
   sidebar: s,
   banner: r,
-  isMobileScreen: a,
-  persistent: t
+  isMobileScreen: i,
+  persistent: a,
+  notification: l
 }) => {
-  const i = V();
-  return i ? /* @__PURE__ */ o("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ o(X, { children: /* @__PURE__ */ o(
-    Fe,
+  const t = oo();
+  return t ? /* @__PURE__ */ e("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ e(eo, { children: /* @__PURE__ */ e(
+    he,
     {
-      sdk: i,
-      event: e,
+      sdk: t,
+      event: o,
       sidebar: s,
       banner: r,
-      isMobileScreen: a,
-      persistent: t,
+      isMobileScreen: i,
+      persistent: a,
+      notification: l,
       layoutMode: "side-by-side"
     }
   ) }) }) : null;
 };
 export {
-  Je as StreamLayerSDKAdvertisement,
-  Fe as StreamLayerSDKAdvertisementUI
+  fe as StreamLayerSDKAdvertisement,
+  he 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, e 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, g as Ce, S as we, C as $e, h as De, O as le, m as q, l as Le, j as Te, n as Oe, o as de, q as xe, r as Re, t as Ve, v as M, w as Pe, x as ce, y as U, z as qe, A as H, I as O, c 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, a as ue, V as We, W as Be, L as _, _ as Ge, f 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 { 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 { 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"));

package/lib/es/masters2.js

@@ -1,5 +1,5 @@
 import { jsx as n, jsxs as L, Fragment as E } from "react/jsx-runtime";
-import { u as C, F as r2, s as u, T as j, i as i2, p as a2, b as l2, N as d2, k as c2, M as p2, g as u2, S as C2, C as v2, h as h2, O as K, m as x, l as m2, j as g2, n as L2, o as X, q as f2, r as S2, t as y2, v as U, w as k2, x as J, y as _, I as e2, c as P, z as N2, A as b2, B as z, D as A2, E as I2, G as $2, e as E2, H as T, J as q, K as V2, P as w2, R as R2, a as H2, U as Q, V as T2, W as x2, L as F, X as F2, Y as D2, Z as M2, _ as O2, f as D, $ as U2, a0 as _2, a1 as P2, a2 as B2, a3 as G2 } from "./provider.js";
+import { u as C, F as r2, s as u, T as j, i as i2, p as a2, b as l2, N as d2, k as c2, M as p2, f as u2, S as C2, C as v2, g as h2, O as K, m as x, l as m2, h as g2, j as L2, n as X, o as f2, q as S2, r as y2, t as U, w as k2, x as J, y as _, I as e2, a as P, z as N2, A as b2, B as z, D as A2, E as I2, G as $2, e as E2, H as T, J as q, K as V2, P as w2, R as R2, c as H2, U as Q, V as T2, W as x2, L as F, X as F2, Y as D2, Z as M2, _ as O2, v as D, $ as U2, a0 as _2, a1 as P2, a2 as B2, a3 as G2 } from "./provider.js";
 import { createContext as z2, useContext as s2, useRef as $, useState as b, useEffect as k, useTransition as q2, lazy as Q2, useMemo as H, Suspense as Z2, forwardRef as Y2, useLayoutEffect as W2, useCallback as R, Component as j2 } from "react";
 import { Q as K2, S as I } from "./useStreamLayerApp2.js";
 const M = /* @__PURE__ */ u("div")({