@streamlayer/react-ui 1.31.5 → 1.31.7

package/lib/app/app/Notifications/index.js

@@ -1,45 +1,45 @@
 import { jsxs as w, Fragment as b, jsx as u } from "react/jsx-runtime";
-import { cx as V } from "@linaria/core";
+import { cx as D } from "@linaria/core";
 import { useAppContext as O } from "../useAppContext.js";
 import { scrollIntoAppView as T } from "../../useSdkScroll.js";
-import { useState as k, useMemo as D, useEffect as h, useRef as E, useCallback as I } from "react";
-import { r as q } from "../../../index-DALxy-8N.js";
+import { useState as k, useMemo as V, useEffect as h, useRef as q, useCallback as I } from "react";
+import { createPortal as E } from "react-dom";
 import { useStore as y } from "@streamlayer/react-polyfills";
 import { eventBus as R } from "@streamlayer/sdk-web-interfaces";
 import { NotificationType as p } from "@streamlayer/sdk-web-notifications";
 import { QuestionTypeData as A } from "../../../ui/gamification/constants.js";
 import { Notification as N } from "../../../ui/gamification/question/notification/index.js";
 import { PredictionResult as C } from "../../../ui/gamification/question/notification/prediction-result/index.js";
-import { Onboarding as x } from "./Onboarding/index.js";
-import { HiddenContainer as P, Container as z, InnerContainer as B, NotificationRefreshing as H, Pill as S } from "./styles.js";
-const v = (n) => {
-  const [e, d] = k(0), i = E(null), l = D(() => new ResizeObserver((r) => {
+import { Onboarding as P } from "./Onboarding/index.js";
+import { HiddenContainer as x, Container as z, InnerContainer as B, NotificationRefreshing as H, Pill as S } from "./styles.js";
+const v = (r) => {
+  const [e, d] = k(0), i = q(null), l = V(() => new ResizeObserver((n) => {
     window.requestAnimationFrame(() => {
       var f;
-      if (Array.isArray(r)) {
-        for (const c of r)
+      if (Array.isArray(n)) {
+        for (const c of n)
           if (c.contentBoxSize) {
             const o = (f = i.current) == null ? void 0 : f.getBoundingClientRect();
             o && d(o.height);
           }
       }
     });
-  }), []), s = I((r) => {
-    i.current = r;
-  }, []), a = I((r) => {
-    d(r);
+  }), []), s = I((n) => {
+    i.current = n;
+  }, []), a = I((n) => {
+    d(n);
   }, []);
   return h(() => {
-    const r = i.current;
-    return r ? (l.observe(r), () => {
-      l.unobserve(r);
+    const n = i.current;
+    return n ? (l.observe(n), () => {
+      l.unobserve(n);
     }) : () => {
     };
-  }, [n]), h(() => () => {
+  }, [r]), h(() => () => {
     l.disconnect();
   }), [s, e, a];
 }, Q = ({
-  sdk: n,
+  sdk: r,
   notification: e,
   appNode: d,
   responsiveStore: i,
@@ -52,11 +52,11 @@ const v = (n) => {
     keys: ["sdkInDesktopView"]
   }), {
     sdk: a
-  } = O(), [r, f, c] = v(e.id);
+  } = O(), [n, f, c] = v(e.id);
   let o = f;
   return l || (o = "auto"), e.type === p.QUESTION ? /* @__PURE__ */ w(b, {
-    children: [/* @__PURE__ */ u(P, {
-      ref: r,
+    children: [/* @__PURE__ */ u(x, {
+      ref: n,
       children: /* @__PURE__ */ u(N, {
         ...e
       })
@@ -83,19 +83,19 @@ const v = (n) => {
     close: e.close,
     hiding: e.hiding,
     ...e.data.question
-  }) : e.type === p.ONBOARDING ? /* @__PURE__ */ u(x, {
+  }) : e.type === p.ONBOARDING ? /* @__PURE__ */ u(P, {
     style: {
       height: e.hiding ? 0 : o
     },
     saveHeight: c,
-    sdk: n,
+    sdk: r,
     notification: e,
     sdkInDesktopView: s,
     appNode: d,
     responsiveStore: i
   }) : null;
 }, F = "p7vfi6t", U = ({
-  pill: n,
+  pill: r,
   setPill: e,
   appNode: d,
   headerNode: i,
@@ -105,7 +105,7 @@ const v = (n) => {
 }) => {
   var t, m;
   const {
-    screen: r
+    screen: n
   } = y(s, {
     keys: ["screen"]
   }), {
@@ -118,22 +118,22 @@ const v = (n) => {
     s.get().sdkInDesktopView ? c < 50 && e(null) : c > -50 && e(null);
   }, [c, s, e]);
   const o = s.get().sdkInDesktopView ? d : i;
-  return !n || !o.current ? null : q.createPortal(/* @__PURE__ */ u(S, {
-    title: n.type === p.QUESTION_RESOLVED ? "Prediction result" : `New ${((m = A[(t = n.data) == null ? void 0 : t.questionType]) == null ? void 0 : m.label) || "notification"}`,
+  return !r || !o.current ? null : E(/* @__PURE__ */ u(S, {
+    title: r.type === p.QUESTION_RESOLVED ? "Prediction result" : `New ${((m = A[(t = r.data) == null ? void 0 : t.questionType]) == null ? void 0 : m.label) || "notification"}`,
     "data-a": "intr",
     onClick: () => {
       var g;
       s.get().sdkInDesktopView ? (g = l.current) == null || g.scrollTo({
         top: 0,
         behavior: "smooth"
-      }) : T(d, r.size, {
+      }) : T(d, n.size, {
         behavior: "smooth"
       }), e(null);
     },
-    className: V(f && F, "sl-pill-button")
+    className: D(f && F, "sl-pill-button")
   }), o.current);
-}, re = ({
-  sdk: n,
+}, ne = ({
+  sdk: r,
   headerNode: e,
   scrollNode: d,
   responsiveStore: i,
@@ -141,7 +141,7 @@ const v = (n) => {
   scrollStore: s,
   hasActiveFeature: a
 }) => {
-  const [r] = k(n.getNotificationsStore()), f = y(r), [c, o] = k(null), t = D(() => n.getActiveNotification(), [n, f]);
+  const [n] = k(r.getNotificationsStore()), f = y(n), [c, o] = k(null), t = V(() => r.getActiveNotification(), [r, f]);
   return h(() => {
     t && R.emit("notification", {
       action: "rendered",
@@ -163,7 +163,7 @@ const v = (n) => {
   }, [t]), /* @__PURE__ */ w(b, {
     children: [!c && t && /* @__PURE__ */ u(Q, {
       appNode: l,
-      sdk: n,
+      sdk: r,
       hasActiveFeature: a,
       notification: t,
       responsiveStore: i
@@ -180,5 +180,5 @@ const v = (n) => {
   });
 };
 export {
-  re as SDKNotifications
+  ne as SDKNotifications
 };

package/lib/app/masters/Notifications/index.js

@@ -1,32 +1,32 @@
 import { jsxs as f, Fragment as D, jsx as l } from "react/jsx-runtime";
 import { cx as T } from "@linaria/core";
 import { useMastersContext as q } from "../useMastersContext.js";
-import { scrollIntoAppView as E } from "../useSdkScroll.js";
-import { useState as p, useMemo as O, useEffect as a, useRef as b, useCallback as N } from "react";
-import { r as R } from "../../../index-DALxy-8N.js";
+import { scrollIntoAppView as O } from "../useSdkScroll.js";
+import { useState as p, useMemo as b, useEffect as g, useRef as E, useCallback as N } from "react";
+import { createPortal as R } from "react-dom";
 import { useStore as y } from "@streamlayer/react-polyfills";
 import { eventBus as C } from "@streamlayer/sdk-web-interfaces";
-import { NotificationType as g } from "@streamlayer/sdk-web-notifications";
+import { NotificationType as a } from "@streamlayer/sdk-web-notifications";
 import { QuestionTypeData as P } from "../../../ui/gamification/constants.js";
 import { Notification as V } from "../../../ui/gamification/question/notification/index.js";
 import { PredictionResult as x } from "../../../ui/gamification/question/notification/prediction-result/index.js";
 import { Onboarding as A } from "./Onboarding/index.js";
 import { HiddenContainer as B, Container as H, InnerContainer as Q, NotificationRefreshing as U, Pill as j } from "./styles.js";
-const z = (n) => {
-  const [t, c] = p(0), u = b(null), e = N((o) => {
-    u.current = o;
+const z = (o) => {
+  const [t, c] = p(0), u = E(null), e = N((n) => {
+    u.current = n;
   }, []);
-  a(() => {
+  g(() => {
     var s;
-    const o = (s = u.current) == null ? void 0 : s.getBoundingClientRect();
-    o && c(o.height);
-  }, [n]);
-  const r = N((o) => {
-    c(o);
+    const n = (s = u.current) == null ? void 0 : s.getBoundingClientRect();
+    n && c(n.height);
+  }, [o]);
+  const r = N((n) => {
+    c(n);
   }, []);
   return [e, t, r];
 }, F = ({
-  sdk: n,
+  sdk: o,
   notification: t,
   appNode: c,
   responsiveStore: u
@@ -34,8 +34,8 @@ const z = (n) => {
   var h, d;
   const {
     sdk: e
-  } = q(), [r, o, s] = z(t.id);
-  return t.type === g.QUESTION ? /* @__PURE__ */ f(D, {
+  } = q(), [r, n, s] = z(t.id);
+  return t.type === a.QUESTION ? /* @__PURE__ */ f(D, {
     children: [/* @__PURE__ */ l(B, {
       ref: r,
       children: /* @__PURE__ */ l(V, {
@@ -43,7 +43,7 @@ const z = (n) => {
       })
     }), /* @__PURE__ */ f(H, {
       style: {
-        height: t.hiding ? 0 : o
+        height: t.hiding ? 0 : n
       },
       hiding: t.hiding,
       children: [/* @__PURE__ */ l(Q, {
@@ -56,33 +56,33 @@ const z = (n) => {
         })
       }), /* @__PURE__ */ l(U, {}, t.id)]
     })]
-  }) : t.type === g.QUESTION_RESOLVED && ((d = (h = t.data) == null ? void 0 : h.question) != null && d.predictionResult) ? /* @__PURE__ */ l(x, {
+  }) : t.type === a.QUESTION_RESOLVED && ((d = (h = t.data) == null ? void 0 : h.question) != null && d.predictionResult) ? /* @__PURE__ */ l(x, {
     style: {
-      height: t.hiding ? 0 : o
+      height: t.hiding ? 0 : n
     },
     saveHeight: s,
     close: t.close,
     hiding: t.hiding,
     ...t.data.question,
     mastersApp: !0
-  }) : t.type === g.ONBOARDING ? /* @__PURE__ */ l(A, {
+  }) : t.type === a.ONBOARDING ? /* @__PURE__ */ l(A, {
     style: {
-      height: t.hiding ? 0 : o
+      height: t.hiding ? 0 : n
     },
     saveHeight: s,
-    sdk: n,
+    sdk: o,
     notification: t,
     appNode: c,
     responsiveStore: u
   }) : null;
 }, L = "p1co32q0", M = ({
-  pill: n,
+  pill: o,
   setPill: t,
   appNode: c,
   headerNode: u,
   scrollNode: e,
   responsiveStore: r,
-  scrollStore: o,
+  scrollStore: n,
   useContainer: s
 }) => {
   var I, k;
@@ -93,37 +93,37 @@ const z = (n) => {
   }), {
     tabsShown: d,
     scrollPosition: m
-  } = y(o, {
+  } = y(n, {
     keys: ["tabsShown", "scrollPosition"]
   });
-  a(() => {
+  g(() => {
     r.get().sdkInDesktopView || s ? m < 50 && t(null) : m > -50 && t(null);
   }, [m, r, t, s]);
   const i = r.get().sdkInDesktopView ? c : u;
-  return !n || !i.current ? null : R.createPortal(/* @__PURE__ */ l(j, {
-    title: n.type === g.QUESTION_RESOLVED ? "Prediction result" : `New ${((k = P[(I = n.data) == null ? void 0 : I.questionType]) == null ? void 0 : k.label) || "notification"}`,
+  return !o || !i.current ? null : R(/* @__PURE__ */ l(j, {
+    title: o.type === a.QUESTION_RESOLVED ? "Prediction result" : `New ${((k = P[(I = o.data) == null ? void 0 : I.questionType]) == null ? void 0 : k.label) || "notification"}`,
     onClick: () => {
       var w;
       r.get().sdkInDesktopView ? (w = e.current) == null || w.scrollTo({
         top: 0,
         behavior: "smooth"
-      }) : E(e, h.size, {
+      }) : O(e, h.size, {
         behavior: "smooth"
       }), t(null);
     },
     className: T(d && L, "sl-pill-button")
   }), i.current);
-}, ot = ({
-  sdk: n,
+}, nt = ({
+  sdk: o,
   headerNode: t,
   scrollNode: c,
   useContainer: u,
   responsiveStore: e,
   appNode: r,
-  scrollStore: o
+  scrollStore: n
 }) => {
-  const [s] = p(n.getNotificationsStore()), h = y(s), [d, m] = p(null), i = O(() => n.getActiveNotification(), [n, h]);
-  return a(() => {
+  const [s] = p(o.getNotificationsStore()), h = y(s), [d, m] = p(null), i = b(() => o.getActiveNotification(), [o, h]);
+  return g(() => {
     i && C.emit("notification", {
       action: "rendered",
       payload: {
@@ -131,17 +131,17 @@ const z = (n) => {
         questionType: i.data.questionType
       }
     });
-  }, [i]), a(() => {
+  }, [i]), g(() => {
     i && (e.get().sdkInDesktopView || e.get().sdkInView) && (!e.get().sdkInDesktopView && e.get().sdkInView && m(i), e.get().sdkInDesktopView && window.requestAnimationFrame(() => {
-      o.get().scrollPosition !== 0 && m(i);
+      n.get().scrollPosition !== 0 && m(i);
     }));
-  }, [i]), a(() => {
+  }, [i]), g(() => {
     i || m(null);
   }, [i]), /* @__PURE__ */ f(D, {
     children: [!d && i && /* @__PURE__ */ l(F, {
       headerNode: t,
       appNode: r,
-      sdk: n,
+      sdk: o,
       notification: i,
       responsiveStore: e
     }), d && /* @__PURE__ */ l(M, {
@@ -151,12 +151,12 @@ const z = (n) => {
       notification: i,
       headerNode: t,
       scrollNode: c,
-      scrollStore: o,
+      scrollStore: n,
       useContainer: u,
       responsiveStore: e
     })]
   });
 };
 export {
-  ot as SDKNotifications
+  nt as SDKNotifications
 };

package/lib/app/useClipboardCopy.js

@@ -1,15 +1,15 @@
 import { jsx as u } from "react/jsx-runtime";
-import { useRef as l, useState as s, useCallback as p, useEffect as f } from "react";
-import { r as m } from "../index-DALxy-8N.js";
+import { useRef as l, useState as s, useCallback as f, useEffect as p } from "react";
+import { createPortal as m } from "react-dom";
 import { CopyNotification as b } from "../ui/gamification/copyNotification/index.js";
 const T = (r) => {
-  const t = l(), [i, o] = s(null), a = p(
+  const t = l(), [c, o] = s(null), a = f(
     async (e) => {
-      var c;
-      if (e && ((c = navigator == null ? void 0 : navigator.clipboard) != null && c.writeText)) {
+      var i;
+      if (e && ((i = navigator == null ? void 0 : navigator.clipboard) != null && i.writeText)) {
         t.current && (clearTimeout(t.current), o(null));
         try {
-          await navigator.clipboard.writeText(e), r.current && (o(m.createPortal(/* @__PURE__ */ u(b, {}), r.current)), t.current = setTimeout(() => {
+          await navigator.clipboard.writeText(e), r.current && (o(m(/* @__PURE__ */ u(b, {}), r.current)), t.current = setTimeout(() => {
             o(null);
           }, 1e3));
         } catch (n) {
@@ -19,9 +19,9 @@ const T = (r) => {
     },
     [r]
   );
-  return f(() => () => {
+  return p(() => () => {
     clearTimeout(t.current);
-  }, []), [a, i];
+  }, []), [a, c];
 };
 export {
   T as useClipboardCopy

package/lib/app/webos/ExposedPauseAd/PauseAd.js

@@ -1,66 +1,65 @@
 import { jsx as e, jsxs as g } from "react/jsx-runtime";
-import { cx as L } from "@linaria/core";
-import { useFocusable as D } from "@noriginmedia/norigin-spatial-navigation";
+import { cx as D } from "@linaria/core";
+import { useFocusable as L } from "@noriginmedia/norigin-spatial-navigation";
 import { useState as x, useRef as k, useEffect as h } from "react";
 import { useStore as G } from "@streamlayer/react-polyfills";
 import { eventBus as S } from "@streamlayer/sdk-web-interfaces";
 import { useLoadGAMStatic as B } from "../../../ui/advertisement/overlay/externalAd/vast-player/useGAMStatic.js";
-import { PauseAdOverlay as M, PauseAdContent as F, PauseAdGradientLeft as I, PauseAdGradientRight as j, PauseAdGradientBottom as K, PauseAdTopLeft as N, PauseAdTitle as $, PauseAdCaption as O, PauseAdBottomLeft as V, PauseAdPlayButton as _, PauseAdSidebar as q, ExternalAdContainer as b } from "./styles.js";
+import { PauseAdOverlay as M, PauseAdContent as F, PauseAdGradientRight as I, PauseAdGradientBottom as j, PauseAdTopLeft as K, PauseAdTitle as N, PauseAdCaption as $, PauseAdBottomLeft as O, PauseAdPlayButton as V, PauseAdSidebar as _, PauseAdTitleDescription as q, ExternalAdContainer as b } from "./styles.js";
 const z = ({ vastUrl: t }) => {
-  var n;
+  var s;
   const [, d] = B(), u = G(d, { keys: [t] });
-  return (n = u == null ? void 0 : u[t]) != null && n.imageSrc ? u[t].adUrl ? /* @__PURE__ */ e("a", { href: u[t].adUrl, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ e(b, { src: u[t].imageSrc }) }) : /* @__PURE__ */ e(b, { src: u[t].imageSrc }) : null;
-}, H = ({ isClosing: t, title: d, caption: u, onPlay: n, onClose: o, vastUrl: a, options: r }) => {
-  const f = (r == null ? void 0 : r.showPauseButton) ?? !0, { ref: s, focusSelf: m } = D({
+  return (s = u == null ? void 0 : u[t]) != null && s.imageSrc ? u[t].adUrl ? /* @__PURE__ */ e("a", { href: u[t].adUrl, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ e(b, { src: u[t].imageSrc }) }) : /* @__PURE__ */ e(b, { src: u[t].imageSrc }) : null;
+}, H = ({ isClosing: t, title: d, caption: u, onPlay: s, onClose: f, vastUrl: a, options: r }) => {
+  const m = (r == null ? void 0 : r.showPauseButton) ?? !0, { ref: n, focusSelf: l } = L({
     focusKey: "sl-pause-ad-play",
-    onEnterRelease: n,
+    onEnterRelease: s,
     isFocusBoundary: !0,
     forceFocus: !0
   });
   return h(() => {
-    s.current && m();
-  }, [s, m]), h(() => {
-    const P = (l) => {
-      const p = l.keyCode;
-      if (p === 461 || p === 10009 || p === 27) {
-        l.preventDefault(), l.stopPropagation(), l.stopImmediatePropagation(), o == null || o();
+    n.current && l();
+  }, [n, l]), h(() => {
+    const P = (p) => {
+      const o = p.keyCode;
+      if (o === 461 || o === 10009 || o === 27 || o === 8) {
+        p.preventDefault(), p.stopPropagation(), p.stopImmediatePropagation(), f == null || f();
         return;
       }
     };
     return window.addEventListener("keydown", P, { capture: !0 }), () => window.removeEventListener("keydown", P, { capture: !0 });
-  }, [o]), /* @__PURE__ */ e(M, { className: L(t && "pause-ad-closing"), children: /* @__PURE__ */ g(F, { children: [
+  }, [f]), /* @__PURE__ */ e(M, { className: D(t && "pause-ad-closing"), children: /* @__PURE__ */ g(F, { children: [
     /* @__PURE__ */ e(I, {}),
     /* @__PURE__ */ e(j, {}),
-    /* @__PURE__ */ e(K, {}),
-    /* @__PURE__ */ g(N, { children: [
-      /* @__PURE__ */ e($, { children: d }),
-      /* @__PURE__ */ e(O, { children: u })
+    /* @__PURE__ */ g(K, { children: [
+      /* @__PURE__ */ e(N, { children: d }),
+      /* @__PURE__ */ e($, { children: u })
     ] }),
-    f && /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(
-      _,
+    m && /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(
+      V,
       {
-        ref: s,
-        onClick: n,
-        onMouseEnter: () => s.current.focus(),
+        ref: n,
+        onClick: s,
+        onMouseEnter: () => n.current.focus(),
         "aria-label": "Resume playback"
       }
     ) }),
-    /* @__PURE__ */ g(q, { children: [
+    /* @__PURE__ */ g(_, { children: [
       a && /* @__PURE__ */ e(z, { vastUrl: a }),
-      /* @__PURE__ */ e("span", { children: "ADVERTISEMENT" })
+      /* @__PURE__ */ e(q, { children: "ADVERTISEMENT" })
     ] })
   ] }) });
 }, U = ({
   showPauseAd: t,
   vastUrls: d,
   title: u,
-  caption: n,
-  onPlay: o,
+  caption: s,
+  onPlay: f,
   onClose: a,
   onRender: r,
-  options: f
+  options: m
 }) => {
-  const s = (f == null ? void 0 : f.pauseAdDelay) ?? 5e3, [m, P] = x(!1), [l, p] = x(!1), c = k(), i = d == null ? void 0 : d[0].url, y = k(i);
+  const n = (m == null ? void 0 : m.pauseAdDelay) ?? 5e3, [l, P] = x(!1), [p, o] = x(!1), c = k(), i = d == null ? void 0 : d[0].url, y = k(i);
   y.current = i;
   const [T, E] = B();
   return h(() => {
@@ -75,7 +74,7 @@ const z = ({ vastUrl: t }) => {
       });
       const w = () => {
         var A;
-        (A = E.get()[y.current]) != null && A.imageSrc ? (clearTimeout(c.current), p(!1), P(!0), S.emit("exposedPauseAd", {
+        (A = E.get()[y.current]) != null && A.imageSrc ? (clearTimeout(c.current), o(!1), P(!0), S.emit("exposedPauseAd", {
           action: "rendered",
           payload: {}
         })) : c.current = setTimeout(() => {
@@ -84,31 +83,31 @@ const z = ({ vastUrl: t }) => {
       };
       c.current = setTimeout(() => {
         w();
-      }, s);
+      }, n);
     } else
       S.emit("exposedPauseAd", {
         action: "disabled",
         payload: {}
-      }), p(!0), c.current = setTimeout(() => {
+      }), o(!0), c.current = setTimeout(() => {
         P(!1);
       }, 400);
     return () => {
       c.current && clearTimeout(c.current);
     };
-  }, [E, T, a, s, t, i]), h(() => {
-    r == null || r({ rendered: m });
-  }, [m, r]), h(() => () => {
+  }, [E, T, a, n, t, i]), h(() => {
+    r == null || r({ rendered: l });
+  }, [l, r]), h(() => () => {
     r == null || r({ rendered: !1 });
-  }, [r]), m ? /* @__PURE__ */ e(
+  }, [r]), l ? /* @__PURE__ */ e(
     H,
     {
       onClose: a,
-      isClosing: l,
+      isClosing: p,
       title: u,
-      caption: n,
-      onPlay: o,
+      caption: s,
+      onPlay: f,
       vastUrl: i,
-      options: f
+      options: m
     }
   ) : null;
 };

package/lib/app/webos/ExposedPauseAd/styles.d.ts

@@ -1,6 +1,5 @@
 export declare const PauseAdOverlay: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const PauseAdContent: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const PauseAdGradientLeft: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const PauseAdGradientRight: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const PauseAdGradientBottom: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const PauseAdTopLeft: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
@@ -9,4 +8,5 @@ export declare const PauseAdCaption: import('@linaria/react').StyledComponent<im
 export declare const PauseAdBottomLeft: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const PauseAdPlayButton: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & Record<never, unknown>>;
 export declare const PauseAdSidebar: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const PauseAdTitleDescription: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const ExternalAdContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLImageElement> & import('react').ImgHTMLAttributes<HTMLImageElement> & Record<never, unknown>>;

package/lib/app/webos/ExposedPauseAd/styles.js

@@ -8,39 +8,39 @@ const e = /* @__PURE__ */ s("div")({
   class: "p8lpomy",
   propsAsIs: !1
 }), o = /* @__PURE__ */ s("div")({
-  name: "PauseAdGradientLeft",
-  class: "pv7u167",
-  propsAsIs: !1
-}), n = /* @__PURE__ */ s("div")({
   name: "PauseAdGradientRight",
-  class: "p1kh2yb0",
+  class: "pv7u167",
   propsAsIs: !1
 }), p = /* @__PURE__ */ s("div")({
   name: "PauseAdGradientBottom",
-  class: "pl8f94x",
+  class: "p1kh2yb0",
   propsAsIs: !1
-}), d = /* @__PURE__ */ s("div")({
+}), n = /* @__PURE__ */ s("div")({
   name: "PauseAdTopLeft",
-  class: "p1m6zmrt",
+  class: "pl8f94x",
   propsAsIs: !1
-}), l = /* @__PURE__ */ s("h2")({
+}), d = /* @__PURE__ */ s("h2")({
   name: "PauseAdTitle",
-  class: "pm3vwfa",
+  class: "p1m6zmrt",
   propsAsIs: !1
-}), A = /* @__PURE__ */ s("p")({
+}), l = /* @__PURE__ */ s("p")({
   name: "PauseAdCaption",
-  class: "p1tibuhw",
+  class: "pm3vwfa",
   propsAsIs: !1
-}), r = /* @__PURE__ */ s("div")({
+}), A = /* @__PURE__ */ s("div")({
   name: "PauseAdBottomLeft",
-  class: "ptqqrqd",
+  class: "p1tibuhw",
   propsAsIs: !1
-}), i = /* @__PURE__ */ s("button")({
+}), r = /* @__PURE__ */ s("button")({
   name: "PauseAdPlayButton",
-  class: "p14estxv",
+  class: "ptqqrqd",
   propsAsIs: !1
-}), u = /* @__PURE__ */ s("div")({
+}), i = /* @__PURE__ */ s("div")({
   name: "PauseAdSidebar",
+  class: "p14estxv",
+  propsAsIs: !1
+}), u = /* @__PURE__ */ s("span")({
+  name: "PauseAdTitleDescription",
   class: "p1dpvfl1",
   propsAsIs: !1
 }), c = /* @__PURE__ */ s("img")({
@@ -50,15 +50,15 @@ const e = /* @__PURE__ */ s("div")({
 });
 export {
   c as ExternalAdContainer,
-  r as PauseAdBottomLeft,
-  A as PauseAdCaption,
+  A as PauseAdBottomLeft,
+  l as PauseAdCaption,
   t as PauseAdContent,
   p as PauseAdGradientBottom,
-  o as PauseAdGradientLeft,
-  n as PauseAdGradientRight,
+  o as PauseAdGradientRight,
   e as PauseAdOverlay,
-  i as PauseAdPlayButton,
-  u as PauseAdSidebar,
-  l as PauseAdTitle,
-  d as PauseAdTopLeft
+  r as PauseAdPlayButton,
+  i as PauseAdSidebar,
+  d as PauseAdTitle,
+  u as PauseAdTitleDescription,
+  n as PauseAdTopLeft
 };