@streamlayer/react 1.4.1 → 1.5.1

package/lib/es/advertisement.js

@@ -1,44 +1,39 @@
-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 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")({
+import { jsx as n, jsxs as p } from "react/jsx-runtime";
+import { useRef as Q } from "react";
+import { f, s as e, c as K, Q as V, g as N, a as H, L as J, u as X, d as Y, S as Z } from "./index2.js";
+import { N as g, a as oo, b as no, C as eo, P as v, c as h, d as so, S as ao } from "./useStreamLayerApp2.js";
+const to = /* @__PURE__ */ e("div")({
   name: "Container",
   class: "c5b6wdg",
   propsAsIs: !1
-}), 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 = ({
+}), io = "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", $ = ({
   children: o,
   style: s,
-  className: r,
+  className: t,
   enabled: i = !0,
   hiding: a,
-  direction: l = "left",
-  onAnimationEnd: t
-}) => /* @__PURE__ */ e(to, {
+  direction: r = "left",
+  onAnimationEnd: l
+}) => /* @__PURE__ */ n(to, {
   style: s,
-  className: f(r, ro, Io(l), i && !a && uo(l), i && a && vo(l)),
-  onAnimationEnd: t,
+  className: f(t, io, vo(r), i && !a && mo(r), i && a && uo(r)),
+  onAnimationEnd: l,
   children: o
-}), go = /* @__PURE__ */ n("a")({
+}), Io = /* @__PURE__ */ e("a")({
   name: "Link",
   class: "l1sgte8c",
   propsAsIs: !1
-}), ho = /* @__PURE__ */ n("div")({
+}), go = /* @__PURE__ */ e("div")({
   name: "BannerContainer",
   class: "b7yfc72",
   propsAsIs: !1
-}), Ao = () => go, bo = /* @__PURE__ */ n(Ao())({
+}), ho = () => Io, bo = /* @__PURE__ */ e(ho())({
   name: "BannerLink",
   class: "bejjq94",
   propsAsIs: !0
-}), yo = /* @__PURE__ */ n("img")({
-  name: "BannerImg",
-  class: "b1j94hdr",
-  propsAsIs: !1
-}), fo = ({ promotion: o, promotionId: s, hiding: r, direction: i = "bottom" }) => {
+}), Ao = ({ promotion: o, promotionId: s, hiding: t, direction: i = "bottom" }) => {
   var a;
-  return (a = o.additionalBanner) != null && a.imageUrl ? /* @__PURE__ */ e(C, { direction: i, hiding: r, children: /* @__PURE__ */ e(ho, { className: "BannerContainer", children: /* @__PURE__ */ e(
+  return (a = o.additionalBanner) != null && a.imageUrl ? /* @__PURE__ */ n($, { direction: i, hiding: t, children: /* @__PURE__ */ n(go, { className: "BannerContainer", children: /* @__PURE__ */ n(
     bo,
     {
       className: "BannerLink",
@@ -47,210 +42,209 @@ const to = /* @__PURE__ */ n("div")({
       "data-promo-id": s,
       "data-promo-type": o.type,
       "data-analytics": "banner",
-      target: "_blank",
-      children: /* @__PURE__ */ e(yo, { src: o.additionalBanner.imageUrl, alt: "promo" })
+      target: "_blank"
     }
   ) }) }) : null;
-}, $o = /* @__PURE__ */ n("div")({
+}, yo = /* @__PURE__ */ e("div")({
   name: "NotificationContent",
   class: "n1ku6hz",
   propsAsIs: !1
-}), No = /* @__PURE__ */ n("div")({
+}), fo = /* @__PURE__ */ e("div")({
   name: "NotificationContainer",
   class: "nbxqmol",
   propsAsIs: !1
-}), Co = /* @__PURE__ */ n("div")({
+}), No = /* @__PURE__ */ e("div")({
   name: "Body",
   class: "b1gu3eml",
   propsAsIs: !1
-}), Mo = /* @__PURE__ */ n("div")({
+}), $o = /* @__PURE__ */ e("div")({
   name: "Title",
   class: "t1u17zva",
   propsAsIs: !1
-}), So = /* @__PURE__ */ n("div")({
+}), Co = /* @__PURE__ */ e("div")({
   name: "Text",
   class: "t10ko1g",
   propsAsIs: !1
-}), A = /* @__PURE__ */ n("div")({
+}), b = /* @__PURE__ */ e("div")({
   name: "Media",
   class: "mntc42e",
   propsAsIs: !1
-}), To = () => A, w = /* @__PURE__ */ n(To())({
+}), So = () => b, w = /* @__PURE__ */ e(So())({
   name: "MediaImgFit",
   class: "ml060eo",
   propsAsIs: !0
-}), ko = () => A, W = /* @__PURE__ */ n(ko())({
+}), To = () => b, W = /* @__PURE__ */ e(To())({
   name: "MediaImgCentered",
   class: "m1vqlvig",
   propsAsIs: !0
-}), Bo = () => W, Eo = /* @__PURE__ */ n(Bo())({
+}), Mo = () => W, ko = /* @__PURE__ */ e(Mo())({
   name: "MediaImgBottom",
   class: "m1e7tvi5",
   propsAsIs: !0
-}), Lo = () => A, Oo = /* @__PURE__ */ n(Lo())({
+}), Bo = () => b, Lo = /* @__PURE__ */ e(Bo())({
   name: "MediaImgSolid",
   class: "mqvntt2",
   propsAsIs: !0
-}), xo = () => A, _o = /* @__PURE__ */ n(xo())({
+}), Eo = () => b, Oo = /* @__PURE__ */ e(Eo())({
   name: "MediaImgMiddle",
   class: "m12jtj3u",
   propsAsIs: !0
-}), Po = /* @__PURE__ */ n("img")({
+}), xo = /* @__PURE__ */ e("img")({
   name: "CtaIcon",
   class: "ckq1frv",
   propsAsIs: !1
-}), jo = /* @__PURE__ */ n("button")({
+}), _o = /* @__PURE__ */ e("button")({
   name: "Button",
   class: "bis90pl",
   propsAsIs: !1
-}), Ro = () => K, Do = /* @__PURE__ */ n(Ro())({
+}), Po = () => K, jo = /* @__PURE__ */ e(Po())({
   name: "StyledChevronRight",
   class: "s9mjmz3",
   propsAsIs: !0
-}), qo = /* @__PURE__ */ n("div")({
+}), qo = /* @__PURE__ */ e("div")({
   name: "Logo",
   class: "l1cf50a7",
   propsAsIs: !1
-}), Fo = {
+}), Do = {
   [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: "" }) });
-}, wo = ({ notification: o, promotionId: s, hiding: r, direction: i = "left" }) => {
-  if (!o || !o.promotion || o.enabled !== no.NOTIFICATION_ENABLED)
+  [g.BOTTOM]: ko,
+  [g.SOLID]: Lo,
+  [g.MIDDLE]: Oo
+}, Ro = ({ src: o, imagePosition: s }) => {
+  const t = Do[s];
+  return /* @__PURE__ */ n(t, { children: /* @__PURE__ */ n("img", { src: o, alt: "" }) });
+}, Uo = ({ notification: o, promotionId: s, hiding: t, direction: i = "left" }) => {
+  if (!o || !o.promotion || o.enabled !== oo.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(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 })
+  const { title: a, body: r, image: l, promotion: m } = o, { sponsorLogo: u, sponsorLogoMode: c, imagePosition: I, ctaButton: d } = m;
+  return /* @__PURE__ */ n($, { direction: i, hiding: t, children: /* @__PURE__ */ p(fo, { children: [
+    c !== no.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ n(qo, { children: /* @__PURE__ */ n("img", { src: u, alt: a }) }),
+    /* @__PURE__ */ p(yo, { children: [
+      /* @__PURE__ */ n(Ro, { src: l, imagePosition: I }),
+      /* @__PURE__ */ p(No, { children: [
+        a && /* @__PURE__ */ n($o, { children: a }),
+        r && /* @__PURE__ */ n(Co, { children: r })
       ] }),
-      /* @__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" }),
+      /* @__PURE__ */ p(_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.ctaIcon) && (d == null ? void 0 : d.ctaIconMode) === eo.CTA_ICON_TRANSPARENT && /* @__PURE__ */ n(xo, { src: d == null ? void 0 : d.ctaIcon, alt: "cta-icon" }),
         (d == null ? void 0 : d.label) || "Open"
       ] }),
-      /* @__PURE__ */ e(Do, { name: "chevronRight" })
+      /* @__PURE__ */ n(jo, { name: "chevronRight" })
     ] })
   ] }) });
-}, Go = /* @__PURE__ */ n("div")({
+}, wo = /* @__PURE__ */ e("div")({
   name: "OverlayContainer",
   class: "okzhq2w",
   propsAsIs: !1
-}), zo = /* @__PURE__ */ n("div")({
+}), Fo = /* @__PURE__ */ e("div")({
   name: "PromoOverlay",
   class: "pmgz5i",
   propsAsIs: !1
-}), Ho = /* @__PURE__ */ n("div")({
+}), Go = /* @__PURE__ */ e("div")({
   name: "Header",
   class: "hyxi3jt",
   propsAsIs: !1
-}), Ko = /* @__PURE__ */ n("div")({
+}), zo = /* @__PURE__ */ e("div")({
   name: "HeaderContent",
   class: "h149e3gp",
   propsAsIs: !1
-}), Wo = "h10toh7", G = /* @__PURE__ */ n("img")({
+}), Ko = "h10toh7", F = /* @__PURE__ */ e("img")({
   name: "SponsorLogo",
   class: "s1jyea6t",
   propsAsIs: !1
-}), Qo = /* @__PURE__ */ n("div")({
+}), Ho = /* @__PURE__ */ e("div")({
   name: "SponsorName",
   class: "szpfa3h",
   propsAsIs: !1
-}), Jo = /* @__PURE__ */ n("div")({
+}), Wo = /* @__PURE__ */ e("div")({
   name: "Media",
   class: "m1crmu01",
   propsAsIs: !1
-}), Vo = /* @__PURE__ */ n("img")({
+}), Qo = /* @__PURE__ */ e("img")({
   name: "PromoImg",
   class: "p1l37r8s",
   propsAsIs: !1
-}), Xo = "s1nmch9k", z = /* @__PURE__ */ n("div")({
+}), Vo = "s1nmch9k", G = /* @__PURE__ */ e("div")({
   name: "Content",
   class: "c1er0ljd",
   propsAsIs: !1
-}), Yo = /* @__PURE__ */ n("div")({
+}), Jo = /* @__PURE__ */ e("div")({
   name: "Description",
   class: "dydopmr",
   propsAsIs: !1
-}), Zo = /* @__PURE__ */ n("div")({
+}), Xo = /* @__PURE__ */ e("div")({
   name: "Sponsor",
   class: "s1w6nt04",
   propsAsIs: !1
-}), oe = /* @__PURE__ */ n("div")({
+}), Yo = /* @__PURE__ */ e("div")({
   name: "SponsorText",
   class: "s1evcmtq",
   propsAsIs: !1
-}), ee = /* @__PURE__ */ n("div")({
+}), Zo = /* @__PURE__ */ e("div")({
   name: "ADLogo",
   class: "awodx0x",
   propsAsIs: !1
-}), ne = /* @__PURE__ */ n("span")({
+}), on = /* @__PURE__ */ e("span")({
   name: "SponsoredText",
   class: "s1q3n6oi",
   propsAsIs: !1
-}), se = /* @__PURE__ */ n("div")({
+}), nn = /* @__PURE__ */ e("div")({
   name: "CloseIconWrap",
   class: "c8d4xfk",
   propsAsIs: !1
-}), ie = () => K, ae = /* @__PURE__ */ n(ie())({
+}), en = () => K, sn = /* @__PURE__ */ e(en())({
   name: "CloseIcon",
   class: "ct6oobh",
   propsAsIs: !0
-}), te = /* @__PURE__ */ n("div")({
+}), an = /* @__PURE__ */ e("div")({
   name: "ActionBtnWrap",
   class: "a1gyg7tt",
   propsAsIs: !1
-}), re = /* @__PURE__ */ n("a")({
+}), tn = /* @__PURE__ */ e("a")({
   name: "ActionButton",
   class: "a17rwbtk",
   propsAsIs: !1
-}), le = /* @__PURE__ */ n("div")({
+}), rn = /* @__PURE__ */ e("div")({
   name: "Title",
   class: "t3vxzaw",
   propsAsIs: !1
-}), 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(
-          Zo,
+}), ln = "h10f3u0j", z = ({ promotion: o, promotionId: s, onClose: t }) => {
+  var i, a, r, l, m, u, c, I, d, C, S, T, M, k, B, L, E, O, x, _, P, j, q, D, R, U;
+  const A = o.type === v.INGAME_IAB11_LBAR || o.type === v.INGAME_IAB11, y = ((i = o.sponsor) == null ? void 0 : i.logo) && o.logoMode === h.CENTER;
+  return /* @__PURE__ */ p(Fo, { className: "PromoOverlay", children: [
+    /* @__PURE__ */ p(Go, { children: [
+      /* @__PURE__ */ p(zo, { className: f(!y && Ko), children: [
+        ((a = o.sponsor) == null ? void 0 : a.logo) && o.logoMode === h.LEFT && /* @__PURE__ */ n(F, { src: (r = o.sponsor) == null ? void 0 : r.logo, alt: "promo" }),
+        /* @__PURE__ */ p(
+          Xo,
           {
             style: {
-              paddingLeft: (t = o.sponsor) != null && t.logo && o.logoMode === h.LEFT ? "0px" : "8px"
+              paddingLeft: (l = o.sponsor) != null && l.logo && o.logoMode === h.LEFT ? "0px" : "8px"
             },
             children: [
-              ((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" })
+              ((m = o.sponsor) == null ? void 0 : m.logo) && o.logoMode === h.LEFT && /* @__PURE__ */ n(Ho, { children: (u = o.sponsor) == null ? void 0 : u.name }),
+              /* @__PURE__ */ p(Yo, { className: "SponsorText", children: [
+                /* @__PURE__ */ n(Zo, { children: "AD" }),
+                /* @__PURE__ */ n(on, { children: "SPONSORED" })
               ] })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ e(se, { className: "ClosePromoIcon", onClick: r, children: /* @__PURE__ */ e(ae, { name: "icon-cross" }) })
+      /* @__PURE__ */ n(nn, { className: "ClosePromoIcon", onClick: t, children: /* @__PURE__ */ n(sn, { name: "icon-cross" }) })
     ] }),
-    /* @__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,
+    /* @__PURE__ */ p(Wo, { children: [
+      y && /* @__PURE__ */ n(F, { className: Vo, src: (c = o.sponsor) == null ? void 0 : c.logo, alt: "promo" }),
+      /* @__PURE__ */ n(G, { children: (d = (I = o.banner) == null ? void 0 : I.video) != null && d.url ? /* @__PURE__ */ n(
+        V,
         {
-          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",
+          source: (S = (C = o.banner) == null ? void 0 : C.video) == null ? void 0 : S.url,
+          poster: (M = (T = o.banner) == null ? void 0 : T.video) == null ? void 0 : M.thumbnailUrl,
+          aspectRatio: A ? "1/1" : "16/9",
           onPlay: () => {
-            $.emit("advertisement", {
+            N.emit("advertisement", {
               action: "videoPlay",
               payload: {
                 advertisementId: s,
@@ -259,182 +253,175 @@ const to = /* @__PURE__ */ n("div")({
             });
           }
         }
-      ) : (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 })
+      ) : (k = o.banner) != null && k.imageUrl ? /* @__PURE__ */ n(Qo, { style: A ? { aspectRatio: "1/1" } : {}, src: (B = o.banner) == null ? void 0 : B.imageUrl, alt: "promo" }) : null }),
+      !A && /* @__PURE__ */ p(G, { children: [
+        ((L = o.banner) == null ? void 0 : L.title) && /* @__PURE__ */ n(rn, { className: f("AdvTitle", y && ln), children: (E = o.banner) == null ? void 0 : E.title }),
+        ((O = o.banner) == null ? void 0 : O.body) && /* @__PURE__ */ n(Jo, { className: "AdvDescription", children: (x = o.banner) == null ? void 0 : x.body })
       ] })
     ] }),
-    /* @__PURE__ */ e(te, { children: /* @__PURE__ */ e(
-      re,
+    o.buttonType !== so.NO_BUTTON && /* @__PURE__ */ n(an, { children: /* @__PURE__ */ n(
+      tn,
       {
-        href: (P = o.banner) == null ? void 0 : P.url,
+        href: (_ = o.banner) == null ? void 0 : _.url,
         style: {
-          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"
+          backgroundColor: ((j = (P = o.banner) == null ? void 0 : P.ctaButton) == null ? void 0 : j.color) || "#009dc4",
+          color: ((D = (q = o.banner) == null ? void 0 : q.ctaButton) == null ? void 0 : D.textColor) || "#fff"
         },
         "data-analytics": "button",
         "data-promo-id": s,
         "data-promo-type": o.type,
         target: "_blank",
-        children: (U = (F = o.banner) == null ? void 0 : F.ctaButton) == null ? void 0 : U.label
+        children: (U = (R = o.banner) == null ? void 0 : R.ctaButton) == null ? void 0 : U.label
       }
     ) })
   ] });
-}, ce = /* @__PURE__ */ n("div")({
+}, dn = /* @__PURE__ */ e("div")({
   name: "SidebarContainer",
   class: "s1abskp8",
   propsAsIs: !1
-}), me = ({
+}), cn = ({
   children: o,
   direction: s,
-  style: r,
+  style: t,
   className: i,
   hiding: a
-}) => /* @__PURE__ */ e(C, {
+}) => /* @__PURE__ */ n($, {
   direction: s,
-  style: r,
+  style: t,
   hiding: a,
   className: i,
-  children: /* @__PURE__ */ e(ce, {
+  children: /* @__PURE__ */ n(dn, {
     children: o
   })
-}), 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(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,
-      promotion: t.data.promotions,
-      direction: l
-    }
-  ) : null : /* @__PURE__ */ c("div", { children: [
-    "empty promo ",
-    /* @__PURE__ */ e("button", { onClick: o.close, children: "close" })
-  ] });
-}, Ie = /* @__PURE__ */ n("div")({
+}), pn = (o) => (o == null ? void 0 : o.type) === v.INGAME_IAB11_LBAR || (o == null ? void 0 : o.type) === v.INGAME_IAB21_LBAR, mn = (o) => (o == null ? void 0 : o.type) === v.INGAME_IAB11 || (o == null ? void 0 : o.type) === v.INGAME_IAB21, un = ({
+  advertisement: o,
+  close: s,
+  skipTypeCheck: t,
+  layoutMode: i = "side-by-side",
+  sidebar: a,
+  isNotification: r,
+  banner: l
+}) => o.promotion ? r && o.notification ? /* @__PURE__ */ n(Uo, { notification: o.notification, promotionId: o.question.id }) : !a && !l && (t || mn(o.promotion)) ? /* @__PURE__ */ n(wo, { className: "PromoOverlayContainer", children: /* @__PURE__ */ n(z, { promotionId: o.question.id, promotion: o.promotion, onClose: s }) }) : a && (t || pn(o.promotion)) ? /* @__PURE__ */ n(cn, { className: "PromoSidebarContainer", direction: a, hiding: !1, children: /* @__PURE__ */ n(z, { promotionId: o.question.id, promotion: o.promotion, onClose: s }) }) : l ? /* @__PURE__ */ n(
+  Ao,
+  {
+    promotionId: o.question.id,
+    hiding: !1,
+    promotion: o.promotion,
+    direction: l
+  }
+) : null : null, vn = /* @__PURE__ */ e("div")({
   name: "AdvertisementUIWrap",
   class: "aa6pjif",
   propsAsIs: !1
-}), ge = (o) => {
+}), In = (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") || I.UNSET;
-    s.getAttribute("data-analytics") === "button" && $.emit("advertisement", {
+    const t = s.getAttribute("data-promo-id") || "", i = s.getAttribute("data-promo-type") || v.UNSET;
+    s.getAttribute("data-analytics") === "button" && N.emit("advertisement", {
       action: "buttonSelect",
       payload: {
-        advertisementId: r,
+        advertisementId: t,
         advertisementType: i
       }
-    }), s.getAttribute("data-analytics") === "banner" && $.emit("advertisement", {
+    }), s.getAttribute("data-analytics") === "banner" && N.emit("advertisement", {
       action: "bannerSelect",
       payload: {
-        advertisementId: r,
+        advertisementId: t,
         advertisementType: i
       }
     });
   }
-}, he = ({
+}, gn = ({
   gamification: o,
   layoutMode: s,
-  skipTypeCheck: r,
+  skipTypeCheck: t,
   sidebar: i,
   banner: a,
-  notification: l,
-  isMobileScreen: t,
-  persistent: p
+  notification: r,
+  isMobileScreen: l,
+  persistent: m
 }) => {
-  const u = J(null), v = N(o.advertisement.$list), m = V(
-    () => o.advertisement.getActiveAdvertisement(p),
-    // fire getActiveNotification when notifications were updated
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [v, p]
-  );
-  return Y(u, {
-    enabled: !!m,
+  const u = Q(null), c = H(o.advertisement.$store);
+  J(u, {
+    enabled: !!c.data,
     event: "click",
-    listener: ge
-  }), m ? /* @__PURE__ */ e(Ie, {
+    listener: In
+  });
+  const I = !a && !i;
+  return c.data === void 0 || !m && c.isViewed ? null : /* @__PURE__ */ n(vn, {
     ref: u,
     style: {
-      height: !a && !i ? "auto" : "100%"
+      height: I ? "auto" : "100%"
     },
-    className: t ? "mobile-view" : "",
-    children: /* @__PURE__ */ e(ve, {
-      skipTypeCheck: r,
+    className: l ? "mobile-view" : "",
+    children: /* @__PURE__ */ n(un, {
+      skipTypeCheck: t,
       sidebar: i,
       banner: a,
-      advertisement: m,
+      advertisement: c.data,
+      close: c.close,
       layoutMode: s,
-      isNotification: l
+      isNotification: r
     })
-  }) : null;
-}, Ae = ({
+  });
+}, hn = ({
   sdk: o,
   sidebar: s,
-  banner: r,
+  banner: t,
   skipTypeCheck: i,
-  event: a,
-  layoutMode: l,
-  isMobileScreen: t,
-  persistent: p,
-  notification: u
+  layoutMode: a,
+  isMobileScreen: r,
+  persistent: l,
+  notification: m
 }) => {
-  const {
-    deactivate: v
-  } = Z(o);
-  Q(() => {
-    a ? o.createEventSession(a) : v();
-  }, [a, v, o]);
-  const m = N(o.featuresList.getStore());
-  if (s && r)
-    return /* @__PURE__ */ e("div", {
+  const u = H(o.featuresList.getStore());
+  if (s && t)
+    return /* @__PURE__ */ n("div", {
       style: {
         color: "red"
       },
       children: "define either sidebar or banner, not both."
     });
-  if (!m)
+  if (!u)
     return null;
-  const d = o.getFeature(ao.GAMES);
-  return d ? /* @__PURE__ */ e(he, {
-    gamification: d,
+  const c = o.getFeature(ao.GAMES);
+  return c ? /* @__PURE__ */ n(gn, {
+    gamification: c,
     sidebar: s,
-    banner: r,
-    layoutMode: l,
-    isMobileScreen: t,
-    persistent: p,
-    notification: u,
+    banner: t,
+    layoutMode: a,
+    isMobileScreen: r,
+    persistent: l,
+    notification: m,
     skipTypeCheck: i
   }) : null;
-}, Ce = ({
+}, Nn = ({
   event: o,
   sidebar: s,
-  banner: r,
+  banner: t,
   isMobileScreen: i,
   persistent: a,
+  theme: r,
   notification: l
 }) => {
-  const t = oo();
-  return t ? /* @__PURE__ */ e("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ e(eo, { children: /* @__PURE__ */ e(
-    Ae,
-    {
-      sdk: t,
-      event: o,
-      sidebar: s,
-      banner: r,
-      isMobileScreen: i,
-      persistent: a,
-      notification: l,
-      layoutMode: "side-by-side"
-    }
-  ) }) }) : null;
+  const m = X();
+  return m ? /* @__PURE__ */ p("div", { className: "StreamLayerSDK", children: [
+    /* @__PURE__ */ n(Y, { customTheme: r, children: /* @__PURE__ */ n(
+      hn,
+      {
+        sdk: m,
+        sidebar: s,
+        banner: t,
+        isMobileScreen: i,
+        persistent: a,
+        notification: l,
+        layoutMode: "side-by-side"
+      }
+    ) }),
+    o !== void 0 && /* @__PURE__ */ n(Z, { event: o })
+  ] }) : null;
 };
 export {
-  Ce as StreamLayerSDKAdvertisement,
-  Ae as StreamLayerSDKAdvertisementUI
+  Nn as StreamLayerSDKAdvertisement,
+  hn as StreamLayerSDKAdvertisementUI
 };