@streamlayer/react-ui 1.26.1 → 1.27.0

package/lib/hooks/analytics.d.ts

@@ -0,0 +1,14 @@
+import { EventBusData } from '@streamlayer/sdk-web-interfaces';
+type Arguments<T> = T extends (...args: infer U) => void ? U : never;
+export declare const useAnalyticsHandle: (options: EventBusData) => (<T extends Function>(callback?: T) => (...args: Arguments<T>) => any)[];
+export declare const newTabLinkListener: (event: Event) => void;
+type AnalyticHookRef = React.MutableRefObject<HTMLElement | null>;
+type AnalyticListener = (event: Event, ref: AnalyticHookRef) => void;
+type AnalyticsHookOptions = {
+    enabled: boolean;
+    event: 'click' | 'scrollend' | 'tap';
+    useDomNode?: boolean;
+    listener: AnalyticListener;
+};
+export declare const useAnalyticsListener: (ref: AnalyticHookRef, options: AnalyticsHookOptions) => void;
+export {};

package/lib/hooks/showIn.d.ts

@@ -0,0 +1,9 @@
+export type AnimationOptions = {
+    delay: number;
+};
+export declare const useHideTransition: () => {
+    runAnimation: (options?: AnimationOptions) => void;
+    onAnimationEnd: () => void;
+    hiding: boolean;
+    finished: boolean;
+};

package/lib/hooks/useKeyboardNavigation.d.ts

@@ -0,0 +1,15 @@
+import { DependencyList } from 'react';
+interface KeyboardNavigationOptions {
+    containerSelector: string;
+    getElements?: (container: HTMLElement) => HTMLElement[];
+    onEscape: () => void;
+    onEnter?: (element: HTMLElement, index: number) => void;
+    initialFocusPriority?: 'close-btn' | 'first' | number;
+    enabled?: boolean;
+    dependencies?: DependencyList;
+    resetFocusOn?: unknown[];
+}
+export declare const useKeyboardNavigation: (options: KeyboardNavigationOptions) => {
+    focusedIndex: import('react').MutableRefObject<number>;
+};
+export {};

package/lib/hooks/useKeyboardNavigation.js

@@ -0,0 +1,74 @@
+import { useRef as m, useEffect as D } from "react";
+const R = (g) => {
+  const {
+    containerSelector: y,
+    getElements: A,
+    onEscape: v,
+    onEnter: a,
+    initialFocusPriority: l = "close-btn",
+    enabled: E = !0,
+    dependencies: h = [],
+    resetFocusOn: f = []
+  } = g, t = m(0), d = m(!1), k = m(f);
+  return f.some((o, p) => o !== k.current[p]) && (d.current = !1, k.current = f), D(() => {
+    if (!E) return;
+    const o = document.querySelector(y);
+    if (!o) return;
+    const b = A || ((e) => Array.from(e.querySelectorAll("button")).filter((r) => !r.disabled));
+    let n = b(o);
+    (() => {
+      var e, c, r;
+      if (n.length !== 0) {
+        if (d.current) {
+          const s = document.activeElement;
+          if (n.includes(s))
+            return;
+        }
+        if (l === "close-btn") {
+          const s = o.querySelector('[data-close-btn="true"]');
+          if (s) {
+            const i = n.indexOf(s);
+            t.current = i !== -1 ? i : 0, s.focus();
+          } else
+            t.current = 0, (e = n[t.current]) == null || e.focus();
+        } else l === "first" ? (t.current = 0, (c = n[t.current]) == null || c.focus()) : typeof l == "number" && (t.current = Math.min(l, n.length - 1), (r = n[t.current]) == null || r.focus());
+        d.current = !0;
+      }
+    })();
+    const w = (e) => {
+      var s, i;
+      if (!o) return;
+      n = b(o);
+      const c = n.length;
+      if (c === 0) return;
+      const r = e.keyCode;
+      if (["ArrowDown", "ArrowRight"].includes(e.key) || r === 40 || r === 39) {
+        t.current = (t.current + 1) % c, (s = n[t.current]) == null || s.focus(), e.preventDefault();
+        return;
+      }
+      if (["ArrowUp", "ArrowLeft"].includes(e.key) || r === 38 || r === 37) {
+        t.current = (t.current - 1 + c) % c, (i = n[t.current]) == null || i.focus(), e.preventDefault();
+        return;
+      }
+      if (e.key === "Enter" || r === 13 || e.key === " ") {
+        const u = n[t.current];
+        if (!u) return;
+        const F = document.activeElement;
+        if (!n.includes(F))
+          return;
+        a ? a(u, t.current) : (u.tagName === "BUTTON" || u.tagName, u.click()), e.preventDefault();
+        return;
+      }
+      if (e.key === "Escape" || e.key === "Backspace" || e.code === "Back" || r === 10009) {
+        v(), e.preventDefault();
+        return;
+      }
+    };
+    return window.addEventListener("keydown", w), () => {
+      window.removeEventListener("keydown", w);
+    };
+  }, [E, y, l, v, a, ...h, ...f]), { focusedIndex: t };
+};
+export {
+  R as useKeyboardNavigation
+};

package/lib/index-T1iiS0ZO.js

@@ -0,0 +1,17 @@
+import { useCallback as r, useSyncExternalStore as y } from "react";
+function f(e, t, u) {
+  let n = new Set(t).add(void 0);
+  return e.listen((i, s, l) => {
+    n.has(l) && u(i, s, l);
+  });
+}
+function S(e, t = {}) {
+  let u = r(
+    (i) => t.keys ? f(e, t.keys, i) : e.listen(i),
+    [t.keys, e]
+  ), n = e.get.bind(e);
+  return y(u, n, n);
+}
+export {
+  S as u
+};

package/lib/ui/advertisement/banner/index.d.ts

@@ -1,7 +1,10 @@
+import { Advertisement } from '@streamlayer/feature-gamification';
 import { PromotionOptions } from '@streamlayer/sdk-web-types';
 export declare const Banner: React.FC<{
     promotion: PromotionOptions;
     promotionId: string;
     direction?: 'top' | 'bottom';
     hiding?: boolean;
+    isEventFired: Advertisement['isEventFired'];
+    fireEvent: Advertisement['fireEvent'];
 }>;

package/lib/ui/advertisement/banner/index.js

@@ -1,28 +1,40 @@
-import { jsx as r } from "react/jsx-runtime";
-import { SlideIn as o } from "../../slide-in/index.js";
-import { BannerContainer as m, BannerLink as s } from "./styles.js";
-const B = ({ promotion: n, promotionId: i, hiding: l, direction: d = "bottom" }) => {
-  var e, t;
-  if (!((e = n.additionalBanner) != null && e.imageUrl))
+import { jsx as m } from "react/jsx-runtime";
+import { useEffect as f } from "react";
+import { eventBus as u } from "@streamlayer/sdk-web-interfaces";
+import { AdUnit as h } from "@streamlayer/sdk-web-types";
+import { SlideIn as p } from "../../slide-in/index.js";
+import { BannerContainer as y, BannerLink as g } from "./styles.js";
+const x = ({ promotion: t, promotionId: l, hiding: n, isEventFired: r, fireEvent: d, direction: c = "bottom" }) => {
+  const s = (t == null ? void 0 : t.adUnit) === h.STANDART, a = s ? t.banner : t.additionalBanner;
+  if (f(() => {
+    a != null && a.imageUrl && t.type && l && (r != null && r("banner-showed") || (u.emit("advertisement", {
+      action: "bannerShown",
+      payload: {
+        id: l,
+        type: t.type
+      }
+    }), d == null || d("banner-showed")));
+  }, [a == null ? void 0 : a.imageUrl, d, r, t.type, l]), !(a != null && a.imageUrl))
     return null;
-  let a = (t = n.additionalBanner) == null ? void 0 : t.url;
-  return a && a.indexOf("http") !== 0 && (a = `https://${a}`), /* @__PURE__ */ r(o, { direction: d, hiding: l, children: /* @__PURE__ */ r(m, { className: "BannerContainer", children: /* @__PURE__ */ r(
-    s,
+  let e = a == null ? void 0 : a.url;
+  return e && e.indexOf("http") !== 0 && (e = `https://${e}`), /* @__PURE__ */ m(p, { direction: c, hiding: n, children: /* @__PURE__ */ m(y, { className: "BannerContainer", "data-is-ad": s, children: /* @__PURE__ */ m(
+    g,
     {
-      as: a ? "a" : "span",
+      as: e ? "a" : "span",
       className: "BannerLink",
-      href: a,
+      href: e,
       style: {
-        backgroundImage: `url(${n.additionalBanner.imageUrl})`,
-        cursor: a ? "pointer" : "default"
+        backgroundImage: `url(${a.imageUrl})`,
+        cursor: e ? "pointer" : "default"
       },
-      "data-promo-id": i,
-      "data-promo-type": n.type,
+      "data-promo-id": l,
+      "data-promo-type": t.type,
       "data-a": "banner",
-      target: "_blank"
+      target: "_blank",
+      "data-is-ad": s
     }
   ) }) });
 };
 export {
-  B as Banner
+  x as Banner
 };

package/lib/ui/advertisement/banner/styles.d.ts

@@ -1,2 +1,6 @@
 export declare const BannerContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const BannerLink: any;
+export declare const BannerLink: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLAnchorElement> & import('react').AnchorHTMLAttributes<HTMLAnchorElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;

package/lib/ui/advertisement/index.d.ts

@@ -16,5 +16,8 @@ export declare const AdvertisementUI: React.FC<{
     externalAd?: Advertisement['externalAd'];
     controlVideo: ControlVideoCb;
     advertisementPaused: boolean;
-    togglePause: (flag: boolean) => void;
+    muted?: boolean;
+    togglePause?: (flag: boolean) => void;
+    isEventFired: Advertisement['isEventFired'];
+    fireEvent: Advertisement['fireEvent'];
 }>;

package/lib/ui/advertisement/index.js

@@ -1,69 +1,81 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as I } from "react/jsx-runtime";
 import { PromotionType as f } from "@streamlayer/sdk-web-types";
-import { Banner as G } from "./banner/index.js";
-import { Notification as S } from "./notification/index.js";
+import { Banner as h } from "./banner/index.js";
+import { Notification as n } from "./notification/index.js";
 import { Overlay as E } from "./overlay/index.js";
-import { Sidebar as q } from "./sidebar/index.js";
-import { OverlayContainer as O } from "./overlay/styles.js";
-const M = (i) => (i == null ? void 0 : i.type) === f.INGAME_IAB11_LBAR || (i == null ? void 0 : i.type) === f.INGAME_IAB21_LBAR, R = (i) => (i == null ? void 0 : i.type) === f.INGAME_IAB11_SIDEBAR || (i == null ? void 0 : i.type) === f.INGAME_IAB21_SIDEBAR, a = (i) => (i == null ? void 0 : i.type) === f.INGAME_IAB11 || (i == null ? void 0 : i.type) === f.INGAME_IAB21, P = ({
+import { Sidebar as C } from "./sidebar/index.js";
+import { OverlayContainer as L } from "./overlay/styles.js";
+const O = (i) => (i == null ? void 0 : i.type) === f.INGAME_IAB11_LBAR || (i == null ? void 0 : i.type) === f.INGAME_IAB21_LBAR, a = (i) => (i == null ? void 0 : i.type) === f.INGAME_IAB11_SIDEBAR || (i == null ? void 0 : i.type) === f.INGAME_IAB21_SIDEBAR, t = (i) => (i == null ? void 0 : i.type) === f.INGAME_IAB11 || (i == null ? void 0 : i.type) === f.INGAME_IAB21, H = ({
   advertisement: i,
-  close: l,
-  skipTypeCheck: y,
-  skipAutoClose: c,
-  layoutMode: h = "side-by-side",
-  sidebar: u,
-  isNotification: o,
+  close: u,
+  skipTypeCheck: _,
+  skipAutoClose: N,
+  layoutMode: D = "side-by-side",
+  sidebar: y,
+  isNotification: R,
   banner: A,
-  markAsViewed: B,
-  open: I,
-  externalAd: _,
-  controlVideo: N,
-  advertisementPaused: n,
-  togglePause: t
-}) => i.promotion ? o && i.notification ? /* @__PURE__ */ r(
-  S,
+  markAsViewed: M,
+  open: r,
+  externalAd: c,
+  controlVideo: G,
+  advertisementPaused: o,
+  togglePause: S,
+  isEventFired: l,
+  fireEvent: B,
+  muted: q
+}) => i.promotion ? R && i.notification ? /* @__PURE__ */ I(
+  n,
   {
-    open: () => I == null ? void 0 : I({ fromNotification: !0 }),
+    open: () => r == null ? void 0 : r({ fromNotification: !0 }),
     notification: i.notification,
-    promotionId: i.question.id
+    promotionId: i.question.id,
+    close: u
   }
-) : !u && !A && (y || a(i.promotion)) ? /* @__PURE__ */ r(O, { className: "PromoOverlayContainer", children: /* @__PURE__ */ r(
+) : !y && !A && (_ || t(i.promotion)) ? /* @__PURE__ */ I(L, { className: "PromoOverlayContainer", children: /* @__PURE__ */ I(
   E,
   {
-    markAsViewed: B,
+    markAsViewed: M,
     promotionId: i.question.id,
     promotion: i.promotion,
-    onClose: l,
-    open: I,
-    skipAutoClose: c,
-    externalAd: _,
-    controlVideo: N,
-    advertisementPaused: n,
-    togglePause: t
+    onClose: u,
+    open: r,
+    skipAutoClose: N,
+    externalAd: c,
+    controlVideo: G,
+    advertisementPaused: o,
+    togglePause: S,
+    isEventFired: l,
+    fireEvent: B,
+    muted: q
   }
-) }) : u && (y || M(i.promotion) || R(i.promotion)) ? /* @__PURE__ */ r(q, { className: "PromoSidebarContainer", direction: u, hiding: !1, children: /* @__PURE__ */ r(
+) }) : y && (_ || O(i.promotion) || a(i.promotion) || c) ? /* @__PURE__ */ I(C, { className: "PromoSidebarContainer", direction: y, hiding: !1, children: /* @__PURE__ */ I(
   E,
   {
-    markAsViewed: B,
+    markAsViewed: M,
     promotionId: i.question.id,
     promotion: i.promotion,
-    externalAd: _,
-    onClose: l,
-    open: I,
-    controlVideo: N,
-    skipAutoClose: c,
-    advertisementPaused: n,
-    togglePause: t
+    externalAd: c,
+    onClose: u,
+    open: r,
+    controlVideo: G,
+    skipAutoClose: N,
+    advertisementPaused: o,
+    togglePause: S,
+    isEventFired: l,
+    fireEvent: B,
+    muted: q
   }
-) }) : A && M(i.promotion) ? /* @__PURE__ */ r(
-  G,
+) }) : A && O(i.promotion) ? /* @__PURE__ */ I(
+  h,
   {
     promotionId: i.question.id,
     hiding: !1,
     promotion: i.promotion,
-    direction: A
+    direction: A,
+    isEventFired: l,
+    fireEvent: B
   }
 ) : null : null;
 export {
-  P as AdvertisementUI
+  H as AdvertisementUI
 };

package/lib/ui/advertisement/notification/index.d.ts

@@ -9,4 +9,6 @@ export declare const Notification: React.FC<{
     direction?: 'left' | 'right';
     hiding?: boolean;
     open?: () => void;
+    close?: () => void;
+    webos?: boolean;
 }>;

package/lib/ui/advertisement/notification/index.js

@@ -1,41 +1,57 @@
-import { jsx as i, jsxs as d } from "react/jsx-runtime";
-import { NotificationPromotionImagePosition as r, NotificationEnabled as T, NotificationPromotionMode as h, NotificationSponsorLogoMode as C, CtaIconMode as O } from "@streamlayer/sdk-web-types";
-import { SlideIn as f } from "../../slide-in/index.js";
-import { LowerThirdNotification as E } from "./lower-third/index.js";
-import { MediaImgFit as I, MediaImgCentered as L, MediaImgBottom as S, MediaImgSolid as _, MediaImgMiddle as R, NotificationContainer as P, Logo as b, NotificationContent as A, Body as D, Title as x, Text as y, Button as F, CtaIcon as j, StyledChevronRight as k } from "./styles.js";
-const v = {
-  [r.UNSET]: I,
-  [r.FIT]: I,
-  [r.CENTERED]: L,
-  [r.BOTTOM]: S,
-  [r.SOLID]: _,
-  [r.MIDDLE]: R
-}, w = ({ src: e, imagePosition: n }) => {
-  const m = v[n];
-  return /* @__PURE__ */ i(m, { children: /* @__PURE__ */ i("img", { src: e, alt: "" }) });
-}, z = ({ notification: e, open: n, promotionId: m, hiding: N, direction: a = "left" }) => {
-  if (!e || !e.promotion || e.enabled !== T.NOTIFICATION_ENABLED)
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import { withFocusable as N } from "../../../app/webos/useTvButton.js";
+import { NotificationPromotionImagePosition as n, NotificationEnabled as E, NotificationPromotionMode as L, NotificationSponsorLogoMode as S, CtaIconMode as _ } from "@streamlayer/sdk-web-types";
+import { SlideIn as D } from "../../slide-in/index.js";
+import { LowerThirdNotification as R } from "./lower-third/index.js";
+import { MediaImgFit as I, MediaImgCentered as P, MediaImgBottom as b, MediaImgSolid as A, MediaImgMiddle as F, NotificationContainer as u, Logo as x, NotificationContent as k, Body as y, Title as W, Text as j, CtaIcon as v, StyledChevronRight as G, DismissButton as H, OpenButton as U } from "./styles.js";
+const q = {
+  [n.UNSET]: I,
+  [n.FIT]: I,
+  [n.CENTERED]: P,
+  [n.BOTTOM]: b,
+  [n.SOLID]: A,
+  [n.MIDDLE]: F
+}, z = ({ src: r, imagePosition: e }) => {
+  const c = q[e];
+  return /* @__PURE__ */ i(c, { children: /* @__PURE__ */ i("img", { src: r, alt: "" }) });
+}, J = N(H), K = N(U), w = ({ notification: r, open: e, promotionId: c, hiding: p, direction: g = "left", close: d, webos: t }) => {
+  if (!r || !r.promotion || r.enabled !== E.NOTIFICATION_ENABLED)
     return null;
-  if (e.promotion.mode === h.LOWER_THIRD)
-    return /* @__PURE__ */ i(E, { notification: e, open: n });
-  const { title: t, body: l, image: s, promotion: g } = e, { sponsorLogo: c, sponsorLogoMode: p, imagePosition: M, ctaButton: o } = g;
-  return /* @__PURE__ */ i(f, { className: "SL_Rich_Notification", direction: a, hiding: N, children: /* @__PURE__ */ d(P, { onClick: n, children: [
-    p !== C.NOTIFICATION_SPONSOR_LOGO_NONE && c && /* @__PURE__ */ i(b, { children: /* @__PURE__ */ i("img", { src: c, alt: t }) }),
-    /* @__PURE__ */ d(A, { children: [
-      /* @__PURE__ */ i(w, { src: s, imagePosition: M }),
-      /* @__PURE__ */ d(D, { children: [
-        t && /* @__PURE__ */ i(x, { children: t }),
-        l && /* @__PURE__ */ i(y, { children: l })
+  if (r.promotion.mode === L.LOWER_THIRD)
+    return /* @__PURE__ */ i(R, { notification: r, open: e, close: d, webos: t });
+  const { title: l, body: s, image: h, promotion: C } = r, { sponsorLogo: a, sponsorLogoMode: O, imagePosition: M, ctaButton: o } = C, T = (f) => {
+    f.stopPropagation(), d == null || d();
+  };
+  return /* @__PURE__ */ i(D, { className: "SL_Rich_Notification", direction: g, hiding: p, children: /* @__PURE__ */ m(u, { onClick: t ? () => {
+  } : e, children: [
+    O !== S.NOTIFICATION_SPONSOR_LOGO_NONE && a && /* @__PURE__ */ i(x, { children: /* @__PURE__ */ i("img", { src: a, alt: l }) }),
+    /* @__PURE__ */ m(k, { children: [
+      /* @__PURE__ */ i(z, { src: h, imagePosition: M }),
+      /* @__PURE__ */ m(y, { children: [
+        l && /* @__PURE__ */ i(W, { children: l }),
+        s && /* @__PURE__ */ i(j, { children: s })
       ] }),
-      /* @__PURE__ */ d(F, { name: "promo-button", style: { color: o == null ? void 0 : o.textColor, backgroundColor: o == null ? void 0 : o.color }, children: [
-        (o == null ? void 0 : o.ctaIcon) && (o == null ? void 0 : o.ctaIconMode) === O.CTA_ICON_TRANSPARENT && /* @__PURE__ */ i(j, { src: o == null ? void 0 : o.ctaIcon, alt: "cta-icon" }),
-        (o == null ? void 0 : o.label) || "Open"
-      ] }),
-      /* @__PURE__ */ i(k, { name: "chevronRight" })
+      t && /* @__PURE__ */ i(J, { webos: !0, onClick: T, children: "Dismiss" }),
+      /* @__PURE__ */ m(
+        K,
+        {
+          webos: t,
+          autoFocus: !0,
+          onClick: t ? e : () => {
+          },
+          name: "promo-button",
+          style: { color: o == null ? void 0 : o.textColor, backgroundColor: o == null ? void 0 : o.color },
+          children: [
+            (o == null ? void 0 : o.ctaIcon) && (o == null ? void 0 : o.ctaIconMode) === _.CTA_ICON_TRANSPARENT && /* @__PURE__ */ i(v, { src: o == null ? void 0 : o.ctaIcon, alt: "cta-icon" }),
+            (o == null ? void 0 : o.label) || "Open"
+          ]
+        }
+      ),
+      /* @__PURE__ */ i(G, { name: "chevronRight" })
     ] })
   ] }) });
 };
 export {
-  z as Notification,
-  w as NotificationMedia
+  w as Notification,
+  z as NotificationMedia
 };

package/lib/ui/advertisement/notification/lower-third/index.d.ts

@@ -6,4 +6,6 @@ export declare const NotificationMedia: React.FC<{
 export declare const LowerThirdNotification: React.FC<{
     notification?: QuestionNotification;
     open?: () => void;
+    close?: () => void;
+    webos?: boolean;
 }>;

package/lib/ui/advertisement/notification/lower-third/index.js

@@ -1,37 +1,53 @@
-import { jsx as i, jsxs as r, Fragment as g } from "react/jsx-runtime";
-import { NotificationPromotionImagePosition as d, NotificationEnabled as O, NotificationSponsorLogoMode as T, CtaIconMode as h } from "@streamlayer/sdk-web-types";
-import { MediaImgBottom as t, MediaImgMiddle as p, NotificationContainer as C, NotificationContent as M, Body as L, Title as f, Text as _, Footer as b, Logo as A, Vector as E, Button as P, CtaIcon as x } from "./styles.js";
-const S = {
-  [d.BOTTOM]: t,
-  [d.MIDDLE]: p
-}, F = ({ src: e, imagePosition: c }) => {
-  const n = S[c] || t;
-  return /* @__PURE__ */ i(n, { children: /* @__PURE__ */ i("img", { src: e, alt: "" }) });
-}, j = ({ notification: e, open: c }) => {
-  if (!e || !e.promotion || e.enabled !== O.NOTIFICATION_ENABLED)
+import { jsx as i, jsxs as e, Fragment as m } from "react/jsx-runtime";
+import { withFocusable as C } from "../../../../app/webos/useTvButton.js";
+import { NotificationPromotionImagePosition as N, NotificationEnabled as t, NotificationSponsorLogoMode as _, CtaIconMode as I } from "@streamlayer/sdk-web-types";
+import { MediaImgBottom as a, MediaImgMiddle as f, NotificationContainer as L, NotificationContent as A, Body as S, Title as E, Text as P, Footer as x, Logo as D, Vector as F, CtaIcon as O, OpenButton as h, DismissButton as k } from "./styles.js";
+const R = {
+  [N.BOTTOM]: a,
+  [N.MIDDLE]: f
+}, w = ({ src: r, imagePosition: n }) => {
+  const l = R[n] || a;
+  return /* @__PURE__ */ i(l, { children: /* @__PURE__ */ i("img", { src: r, alt: "" }) });
+}, y = C(k), j = C(h), q = ({ notification: r, open: n, close: l, webos: c }) => {
+  if (!r || !r.promotion || r.enabled !== t.NOTIFICATION_ENABLED)
     return null;
-  const { title: n, body: l, image: s, promotion: m } = e, { sponsorLogo: a, sponsorLogoMode: N, imagePosition: I, ctaButton: o } = m;
-  return /* @__PURE__ */ r(C, { className: "SL_Lower_Third_Notification", onClick: c, children: [
-    /* @__PURE__ */ r(M, { children: [
-      /* @__PURE__ */ i(F, { src: s, imagePosition: I }),
-      /* @__PURE__ */ r(L, { children: [
-        n && /* @__PURE__ */ i(f, { children: n }),
-        l && /* @__PURE__ */ i(_, { children: l })
+  const { title: s, body: d, image: T, promotion: p } = r, { sponsorLogo: g, sponsorLogoMode: M, imagePosition: b, ctaButton: o } = p;
+  return /* @__PURE__ */ e(L, { className: "SL_Lower_Third_Notification", onClick: c ? void 0 : n, children: [
+    /* @__PURE__ */ e(A, { children: [
+      /* @__PURE__ */ i(w, { src: T, imagePosition: b }),
+      /* @__PURE__ */ e(S, { children: [
+        s && /* @__PURE__ */ i(E, { children: s }),
+        d && /* @__PURE__ */ i(P, { children: d })
       ] })
     ] }),
-    /* @__PURE__ */ r(b, { children: [
-      N !== T.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ r(g, { children: [
-        /* @__PURE__ */ i(A, { children: /* @__PURE__ */ i("img", { src: a, alt: n }) }),
-        /* @__PURE__ */ i(E, {})
+    /* @__PURE__ */ e(x, { children: [
+      M !== _.NOTIFICATION_SPONSOR_LOGO_NONE && /* @__PURE__ */ e(m, { children: [
+        /* @__PURE__ */ i(D, { children: /* @__PURE__ */ i("img", { src: g, alt: s }) }),
+        /* @__PURE__ */ i(F, {})
       ] }),
-      /* @__PURE__ */ r(P, { name: "promo-button", style: { color: o == null ? void 0 : o.textColor, backgroundColor: o == null ? void 0 : o.color }, children: [
-        (o == null ? void 0 : o.ctaIcon) && (o == null ? void 0 : o.ctaIconMode) === h.CTA_ICON_TRANSPARENT && /* @__PURE__ */ i(x, { src: o == null ? void 0 : o.ctaIcon, alt: "cta-icon" }),
+      c ? /* @__PURE__ */ e(m, { children: [
+        /* @__PURE__ */ i(y, { webos: !0, onClick: l, children: "Dismiss" }),
+        /* @__PURE__ */ e(
+          j,
+          {
+            webos: !0,
+            autoFocus: !0,
+            style: { color: o == null ? void 0 : o.textColor, backgroundColor: o == null ? void 0 : o.color },
+            onClick: n,
+            children: [
+              (o == null ? void 0 : o.ctaIcon) && (o == null ? void 0 : o.ctaIconMode) === I.CTA_ICON_TRANSPARENT && /* @__PURE__ */ i(O, { src: o == null ? void 0 : o.ctaIcon, alt: "cta-icon" }),
+              (o == null ? void 0 : o.label) || "Open"
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ e(h, { name: "promo-button", style: { color: o == null ? void 0 : o.textColor, backgroundColor: o == null ? void 0 : o.color }, children: [
+        (o == null ? void 0 : o.ctaIcon) && (o == null ? void 0 : o.ctaIconMode) === I.CTA_ICON_TRANSPARENT && /* @__PURE__ */ i(O, { src: o == null ? void 0 : o.ctaIcon, alt: "cta-icon" }),
         (o == null ? void 0 : o.label) || "Open"
       ] })
     ] })
   ] });
 };
 export {
-  j as LowerThirdNotification,
-  F as NotificationMedia
+  q as LowerThirdNotification,
+  w as NotificationMedia
 };

package/lib/ui/advertisement/notification/lower-third/styles.d.ts

@@ -14,3 +14,14 @@ export declare const Logo: import('@linaria/react').StyledComponent<import('reac
 export declare const Footer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Vector: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const NotificationContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const TVButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
+export declare const DismissButton: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const OpenButton: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;