@streamlayer/react-ui 1.24.0 → 1.25.1

package/lib/app/app/story/promotion-notification/index.d.ts

@@ -0,0 +1,7 @@
+export declare const PromotionStory: React.FC<{
+    isMobileScreen?: boolean;
+    promotionId?: string;
+    sdkKey?: string;
+    eventId?: string;
+    production?: boolean;
+}>;

package/lib/app/app/story/promotion-notification/index.js

@@ -0,0 +1,44 @@
+import { jsx as o } from "react/jsx-runtime";
+import { styled as r } from "@linaria/react";
+import { StreamLayerProvider as d } from "@streamlayer/react";
+import { useStreamLayerDebug as a } from "../../../../utils/debug/index.js";
+import { Video as p } from "./video.js";
+const c = /* @__PURE__ */ r("div")({
+  name: "Body",
+  class: "b1ql7fnw",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ r("div")({
+  name: "Main",
+  class: "m18rqnzu",
+  propsAsIs: !1
+}), h = ({
+  isMobileScreen: t,
+  promotionId: n,
+  sdkKey: s,
+  eventId: i,
+  production: m
+}) => {
+  const e = a({
+    sdkKey: s,
+    eventId: i,
+    production: m
+  });
+  return /* @__PURE__ */ o(l, {
+    children: /* @__PURE__ */ o(d, {
+      sdkKey: e.sdkKey,
+      event: e.event,
+      production: e.env === "production",
+      autoEnable: !0,
+      children: /* @__PURE__ */ o(c, {
+        children: /* @__PURE__ */ o(p, {
+          event: e.event,
+          promotionId: n,
+          isMobileScreen: t
+        })
+      })
+    })
+  });
+};
+export {
+  h as PromotionStory
+};

package/lib/app/app/story/promotion-notification/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const VideoPlayerWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const VideoFrame: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AdvBanner: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const PromoButton: any;

package/lib/app/app/story/promotion-notification/styles.js

@@ -0,0 +1,25 @@
+import { styled as s } from "@linaria/react";
+import { Button as o } from "../../../../ui/button/index.js";
+const n = /* @__PURE__ */ s("div")({
+  name: "VideoPlayerWrap",
+  class: "v1r07g6a",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "VideoFrame",
+  class: "v12tn41r",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "AdvBanner",
+  class: "anaa7x6",
+  propsAsIs: !1
+}), a = () => o, d = /* @__PURE__ */ s(a())({
+  name: "PromoButton",
+  class: "pdzep3d",
+  propsAsIs: !0
+});
+export {
+  p as AdvBanner,
+  d as PromoButton,
+  t as VideoFrame,
+  n as VideoPlayerWrap
+};

package/lib/app/app/story/promotion-notification/video.d.ts

@@ -0,0 +1,5 @@
+export declare const Video: React.FC<{
+    isMobileScreen?: boolean;
+    event?: string;
+    promotionId?: string;
+}>;

package/lib/app/app/story/promotion-notification/video.js

@@ -0,0 +1,52 @@
+import { jsxs as a, Fragment as d, jsx as r } from "react/jsx-runtime";
+import { useRef as u, useState as h, useCallback as p, useEffect as f } from "react";
+import { useStreamLayer as g } from "@streamlayer/react";
+import { StreamLayerSDKAdvertisement as v } from "../../Advertisement/index.js";
+import { StreamLayerThemeProvider as y } from "../../../../ui/theme/index.js";
+import { PromoButton as P, VideoFrame as V, VideoPlayerWrap as S, AdvBanner as b } from "./styles.js";
+const B = ({ isMobileScreen: l, event: m, promotionId: t }) => {
+  const e = g(), n = u(null), [s, c] = h(!1), i = p(({ muted: o }) => {
+    c(o);
+  }, []);
+  return f(() => (e == null || e.addVideoPlayerController(i), () => {
+    e == null || e.removeVideoPlayerController(i);
+  }), [e, i]), /* @__PURE__ */ a(d, { children: [
+    t && /* @__PURE__ */ a(P, { onClick: () => {
+      var o;
+      (o = n.current) == null || o.scrollIntoView({ behavior: "smooth" }), setTimeout(() => {
+        e == null || e.getFeature(12).background.advertisement.show(t);
+      }, 200);
+    }, children: [
+      "open promotion: ",
+      t
+    ] }),
+    /* @__PURE__ */ r(V, { ref: n, "data-testid": "video-frame", children: /* @__PURE__ */ a(S, { children: [
+      /* @__PURE__ */ r("div", { className: "divAnchor", children: /* @__PURE__ */ r(
+        "video",
+        {
+          src: "https://storage.googleapis.com/gvabox/media/samples/stock.mp4",
+          muted: s,
+          width: "100%",
+          height: "100%",
+          autoplay: "autoplay",
+          loop: !0,
+          playsInline: !0,
+          controls: !0
+        }
+      ) }),
+      /* @__PURE__ */ r(b, { children: e && /* @__PURE__ */ r(y, { children: /* @__PURE__ */ r(
+        v,
+        {
+          isMobileScreen: l,
+          event: m,
+          sdk: e,
+          notification: !0,
+          persistent: !0
+        }
+      ) }) })
+    ] }) })
+  ] });
+};
+export {
+  B as Video
+};

package/lib/app/tvos/Advertisement.d.ts

@@ -0,0 +1,10 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export type StreamLayerSDKAdvertisementProps = {
+    persistent?: boolean;
+    sidebar?: 'left' | 'right';
+    banner?: 'top' | 'bottom';
+    skipAutoClose?: boolean;
+};
+export declare const StreamLayerSDKAdvertisementTVOs: React.FC<StreamLayerSDKAdvertisementProps & {
+    sdk: StreamLayerSDK;
+}>;

package/lib/app/tvos/Advertisement.js

@@ -0,0 +1,88 @@
+import { jsx as i } from "react/jsx-runtime";
+import { cx as c } from "@linaria/core";
+import { styled as p } from "@linaria/react";
+import { useAnalyticsListener as f } from "../../hooks/analytics.js";
+import { useRef as v } from "react";
+import { useStore as l } from "@streamlayer/react-polyfills";
+import { eventBus as d } from "@streamlayer/sdk-web-interfaces";
+import { FeatureType as A, PromotionType as y } from "@streamlayer/sdk-web-types";
+import { AdvertisementUI as g } from "./AdvertisementUI.js";
+const S = /* @__PURE__ */ p("div")({
+  name: "AdvertisementUIWrap",
+  class: "a3844y1",
+  propsAsIs: !1
+}), b = (t) => {
+  const e = t.target;
+  if (e instanceof HTMLAnchorElement && e.target === "_blank") {
+    const r = e.getAttribute("data-promo-id") || "", o = e.getAttribute("data-promo-type") || y.UNSET;
+    e.getAttribute("data-a") === "button" && d.emit("advertisement", {
+      action: "buttonSelect",
+      payload: {
+        id: r,
+        type: o
+      }
+    }), e.getAttribute("data-a") === "banner" && d.emit("advertisement", {
+      action: "bannerSelect",
+      payload: {
+        id: r,
+        type: o
+      }
+    });
+  }
+}, L = ({
+  gamification: t,
+  skipAutoClose: e,
+  sidebar: r,
+  banner: o,
+  persistent: s,
+  controlVideo: m
+}) => {
+  const n = v(null), a = l(t.advertisement.$store);
+  f(n, {
+    enabled: !!a.data,
+    event: "click",
+    listener: b
+  });
+  const u = !o && !r;
+  return a.data === void 0 || !s && a.isViewed ? null : /* @__PURE__ */ i(S, {
+    ref: n,
+    style: {
+      height: u ? "auto" : "100%"
+    },
+    className: c("SL-AdvertisementUIWrap", "SL-AdvertisementUIWrap--lower-third"),
+    children: /* @__PURE__ */ i(g, {
+      sidebar: r,
+      banner: o,
+      advertisement: a.data,
+      advertisementPaused: !!a.isPaused,
+      togglePause: a.togglePause || (() => {
+      }),
+      close: a.close,
+      markAsViewed: t.advertisement.markAsViewed,
+      open: t.advertisement.open,
+      skipAutoClose: e,
+      controlVideo: m
+    })
+  });
+}, E = ({
+  sdk: t,
+  sidebar: e,
+  banner: r,
+  skipAutoClose: o,
+  persistent: s
+}) => {
+  if (!l(t.featuresList.getStore()))
+    return null;
+  const n = t.getFeature(A.GAMES);
+  return n ? /* @__PURE__ */ i(L, {
+    gamification: n,
+    sidebar: e,
+    banner: r,
+    persistent: s,
+    skipAutoClose: o,
+    controlVideo: t.controlVideoPlayer
+  }) : null;
+};
+export {
+  E as StreamLayerSDKAdvertisementTVOs
+};

package/lib/app/tvos/AdvertisementUI.d.ts

@@ -0,0 +1,16 @@
+import { Advertisement } from '@streamlayer/feature-gamification';
+import { ControlVideoCb } from '../../ui/video-player';
+export declare const AdvertisementUI: React.FC<{
+    advertisement: Exclude<Advertisement['data'], undefined>;
+    sidebar?: 'left' | 'right';
+    banner?: 'top' | 'bottom';
+    open?: (options?: {
+        fromNotification?: boolean;
+    }) => void;
+    close?: () => void;
+    markAsViewed?: () => void;
+    skipAutoClose?: boolean;
+    controlVideo: ControlVideoCb;
+    advertisementPaused: boolean;
+    togglePause: (flag: boolean) => void;
+}>;

package/lib/app/tvos/AdvertisementUI.js

@@ -0,0 +1,40 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Banner as u } from "../../ui/advertisement/banner/index.js";
+import { Sidebar as c } from "../../ui/advertisement/sidebar/index.js";
+import { TVSidebar as s } from "./ui/Sidebar/index.js";
+const g = ({
+  advertisement: o,
+  close: t,
+  skipAutoClose: m,
+  sidebar: i,
+  banner: n,
+  markAsViewed: p,
+  open: f,
+  controlVideo: l,
+  advertisementPaused: d,
+  togglePause: e
+}) => o.promotion ? i ? /* @__PURE__ */ r(c, { className: "PromoSidebarContainer", direction: i, hiding: !1, children: /* @__PURE__ */ r(
+  s,
+  {
+    markAsViewed: p,
+    promotionId: o.question.id,
+    promotion: o.promotion,
+    onClose: t,
+    open: f,
+    controlVideo: l,
+    skipAutoClose: m,
+    advertisementPaused: d,
+    togglePause: e
+  }
+) }) : n ? /* @__PURE__ */ r(
+  u,
+  {
+    promotionId: o.question.id,
+    hiding: !1,
+    promotion: o.promotion,
+    direction: n
+  }
+) : null : null;
+export {
+  g as AdvertisementUI
+};

package/lib/app/tvos/index.d.ts

@@ -0,0 +1,16 @@
+import { StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+export declare const StreamLayerSDKTv: React.FC<{
+    persistent?: boolean;
+    children: React.ReactNode;
+    sdk: StreamLayerSDK;
+    uiState: {
+        promotionExternalAd?: boolean;
+        promotionSidebar?: boolean;
+        promotionOverlay?: boolean;
+        promotionNotification?: boolean;
+        promotionBanner?: boolean;
+        app?: boolean;
+        appNotification?: boolean;
+        onboardingNotification?: boolean;
+    };
+}>;

package/lib/app/tvos/index.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useStore as n } from "@streamlayer/react-polyfills";
+import { FeatureType as u } from "@streamlayer/sdk-web-types";
+import { StreamLayerSDKAdvertisementTVOs as a } from "./Advertisement.js";
+import { SDKLayout as f } from "./ui/Layout/index.js";
+const l = ({ persistent: t, children: i, sdk: r, uiState: m }) => {
+  if (!n(r.featuresList.getStore()))
+    return null;
+  const o = r.getFeature(u.GAMES);
+  return o ? /* @__PURE__ */ e(
+    f,
+    {
+      gamification: o,
+      sidebar: /* @__PURE__ */ e(a, { sdk: r, persistent: t, sidebar: "right" }),
+      banner: /* @__PURE__ */ e(a, { sdk: r, persistent: t, banner: "bottom" }),
+      video: i,
+      uiState: m
+    }
+  ) : null;
+};
+export {
+  l as StreamLayerSDKTv
+};

package/lib/app/tvos/story.d.ts

@@ -0,0 +1,6 @@
+export declare const TVOsStory: React.FC<{
+    sdkKey?: string;
+    eventId?: string;
+    production?: boolean;
+    persistent?: boolean;
+}>;

package/lib/app/tvos/story.js

@@ -0,0 +1,34 @@
+import { jsx as r } from "react/jsx-runtime";
+import { StreamLayerProvider as n, useStreamLayer as u, useStreamLayerUI as i } from "@streamlayer/react";
+import { useStreamLayerDebug as m } from "../../utils/debug/index.js";
+import { StreamLayerSDKTv as d } from "./index.js";
+const p = ({ persistent: t }) => {
+  const e = u(), o = i();
+  return e ? /* @__PURE__ */ r(d, { sdk: e, persistent: t, uiState: o, children: /* @__PURE__ */ r(
+    "video",
+    {
+      src: "https://storage.googleapis.com/cdn.streamlayer.io/assets/sdk-web/Own%20The%20Game%201080p%20RF18.mp4",
+      style: { width: "100%", height: "100%", borderRadius: 10 },
+      autoPlay: !0,
+      loop: !0,
+      playsInline: !0,
+      controls: !0
+    }
+  ) }) : null;
+}, S = ({ sdkKey: t, eventId: e, persistent: o, production: a }) => {
+  const s = m({ sdkKey: t, eventId: e, production: a });
+  return /* @__PURE__ */ r(
+    n,
+    {
+      event: s.event,
+      sdkKey: s.sdkKey,
+      production: s.env === "production",
+      autoEnable: !0,
+      withAd: !0,
+      children: /* @__PURE__ */ r(p, { persistent: o })
+    }
+  );
+};
+export {
+  S as TVOsStory
+};

package/lib/app/tvos/styles.d.ts

@@ -0,0 +1 @@
+export declare const customTheme: import('@linaria/core').LinariaClassName;

package/lib/app/tvos/styles.js

@@ -0,0 +1,4 @@
+const e = "c1ln9egv";
+export {
+  e as customTheme
+};

package/lib/app/tvos/ui/Layout/index.d.ts

@@ -0,0 +1,21 @@
+import { Gamification } from '@streamlayer/feature-gamification';
+type SDKLayoutProps = {
+    gamification: Gamification & {
+        advertisement: Exclude<Gamification['advertisement'], undefined>;
+    };
+    sidebar?: React.ReactElement;
+    banner?: React.ReactNode;
+    video?: React.ReactNode;
+    uiState: {
+        promotionExternalAd?: boolean;
+        promotionSidebar?: boolean;
+        promotionOverlay?: boolean;
+        promotionNotification?: boolean;
+        promotionBanner?: boolean;
+        app?: boolean;
+        appNotification?: boolean;
+        onboardingNotification?: boolean;
+    };
+};
+export declare const SDKLayout: React.FC<SDKLayoutProps>;
+export {};

package/lib/app/tvos/ui/Layout/index.js

@@ -0,0 +1,76 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { useRef as f, useCallback as x, useEffect as g } from "react";
+import { useStore as N } from "@streamlayer/react-polyfills";
+import { Container as R, ContentContainer as S, VideoContainer as V, AdContainer as k, AdLabel as z, VideoBox as A, VideoPlayer as E, Banner as L, Sidebar as j } from "./styles.js";
+const D = ({ gamification: b, sidebar: p, banner: y, video: C, uiState: l }) => {
+  var m, u;
+  const i = N(b.advertisement.$store), n = f(null), h = f(null), o = x(() => {
+    const e = h.current, r = n.current;
+    if (!e || !r)
+      return;
+    const { width: c, height: B } = e.getBoundingClientRect(), { width: v, height: w } = r.getBoundingClientRect();
+    (c > v || B > w) && (e.style.width === "100%" ? (e.style.height = "100%", e.style.width = "auto") : (e.style.width = "100%", e.style.height = "auto"));
+  }, []);
+  g(() => {
+    if (n.current) {
+      const e = new ResizeObserver((r) => {
+        for (const c of r)
+          c.contentBoxSize && o();
+      });
+      return e.observe(n.current), () => {
+        e.disconnect();
+      };
+    }
+    return () => {
+    };
+  }, [o]), g(o);
+  const a = l.promotionSidebar, s = l.promotionBanner;
+  return /* @__PURE__ */ d(
+    R,
+    {
+      style: { backgroundImage: `url(${(u = (m = i == null ? void 0 : i.data) == null ? void 0 : m.promotion) == null ? void 0 : u.backgroundImageLandscapeUrl})` },
+      className: "Container",
+      children: [
+        /* @__PURE__ */ d(
+          S,
+          {
+            className: "ContentContainer",
+            style: {
+              width: a ? "calc(100% - var(--sidebar-width))" : "100%"
+            },
+            children: [
+              /* @__PURE__ */ d(
+                V,
+                {
+                  className: "VideoContainer",
+                  ref: n,
+                  style: {
+                    height: s ? "calc(100% - var(--banner-height))" : "100%"
+                  },
+                  children: [
+                    /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(z, { children: "Ad" }) }),
+                    /* @__PURE__ */ t(A, { ref: h, className: "VideoBox", children: /* @__PURE__ */ t(E, { className: "VideoPlayer", children: C }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ t(
+                L,
+                {
+                  className: "Banner",
+                  style: {
+                    height: s ? "var(--banner-height)" : "0px"
+                  },
+                  children: s && y
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(j, { style: { width: a ? "var(--sidebar-width)" : "0px" }, className: "Sidebar", children: a && p })
+      ]
+    }
+  );
+};
+export {
+  D as SDKLayout
+};

package/lib/app/tvos/ui/Layout/styles.d.ts

@@ -0,0 +1,11 @@
+export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ContentContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Sidebar: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Banner: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const VideoContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AdSquare: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AdText: import('@linaria/react').StyledComponent<import('react').SVGTextElementAttributes<SVGTextElement> & Record<never, unknown>>;
+export declare const VideoBox: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const VideoPlayer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AdContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const AdLabel: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

package/lib/app/tvos/ui/Layout/styles.js

@@ -0,0 +1,59 @@
+import { styled as s } from "@linaria/react";
+const a = /* @__PURE__ */ s("div")({
+  name: "Container",
+  class: "cheo2r6",
+  propsAsIs: !1
+}), n = /* @__PURE__ */ s("div")({
+  name: "ContentContainer",
+  class: "c1pvfh8e",
+  propsAsIs: !1
+}), o = /* @__PURE__ */ s("div")({
+  name: "Sidebar",
+  class: "s1ew4id0",
+  propsAsIs: !1
+}), r = /* @__PURE__ */ s("div")({
+  name: "Banner",
+  class: "bci5mwc",
+  propsAsIs: !1
+}), t = /* @__PURE__ */ s("div")({
+  name: "VideoContainer",
+  class: "v1y91bzn",
+  propsAsIs: !1
+}), d = /* @__PURE__ */ s("div")({
+  name: "AdSquare",
+  class: "ak4hw4m",
+  propsAsIs: !1
+}), i = /* @__PURE__ */ s("text")({
+  name: "AdText",
+  class: "a7w4ued",
+  propsAsIs: !0
+}), c = /* @__PURE__ */ s("div")({
+  name: "VideoBox",
+  class: "vqmlsjk",
+  propsAsIs: !1
+}), l = /* @__PURE__ */ s("div")({
+  name: "VideoPlayer",
+  class: "vyn4uy0",
+  propsAsIs: !1
+}), p = /* @__PURE__ */ s("div")({
+  name: "AdContainer",
+  class: "a9sufrb",
+  propsAsIs: !1
+}), A = /* @__PURE__ */ s("span")({
+  name: "AdLabel",
+  class: "acv3bdg",
+  propsAsIs: !1
+});
+export {
+  p as AdContainer,
+  A as AdLabel,
+  d as AdSquare,
+  i as AdText,
+  r as Banner,
+  a as Container,
+  n as ContentContainer,
+  o as Sidebar,
+  c as VideoBox,
+  t as VideoContainer,
+  l as VideoPlayer
+};

package/lib/app/tvos/ui/Sidebar/PromoAction.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const PromoAction: React.ForwardRefExoticComponent<Omit<import('@streamlayer/sdk-web-types').RecursiveOmitHelper<import('@streamlayer/sl-eslib/interactive/interactive.common_pb').QuestionOptions_PromotionOptions, "$typeName">, "$typeName"> & React.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;

package/lib/app/tvos/ui/Sidebar/PromoAction.js

@@ -0,0 +1,62 @@
+import { jsxs as c, jsx as n, Fragment as D } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { QRBlock as t, QR as d, QRDescBlock as u, LearnMore as E, QRHint as A, SendToUserButton as O, EnvelopeIcon as f, SendToUserText as x } from "./styles.js";
+const B = S(({ promotion: e }, r) => {
+  var R, C, s, T, N, i, I;
+  const l = e.buttonType, b = e.coupon, a = (R = e.banner) == null ? void 0 : R.url, h = e.type;
+  return l === 1 ? /* @__PURE__ */ c(t, { children: [
+    /* @__PURE__ */ n(d, { value: a, ref: r, tabIndex: 1 }),
+    /* @__PURE__ */ c(u, { children: [
+      /* @__PURE__ */ n(E, { children: "LEARN MORE" }),
+      /* @__PURE__ */ n(A, { children: "SCAN QR CODE WITH YOUR PHONE CAMERA" })
+    ] })
+  ] }) : l === 3 ? /* @__PURE__ */ c(t, { children: [
+    /* @__PURE__ */ n(d, { value: b, ref: r }),
+    /* @__PURE__ */ c(u, { children: [
+      /* @__PURE__ */ n(E, { style: { fontSize: 18, fontWeight: 400 }, children: "ADD TO APPLE WALLET" }),
+      /* @__PURE__ */ n(A, { style: { fontSize: 17 }, children: "SCAN QR CODE WITH YOUR PHONE CAMERA" })
+    ] })
+  ] }) : l === 6 && h !== 4 ? /* @__PURE__ */ c(D, { children: [
+    /* @__PURE__ */ c(
+      O,
+      {
+        ref: r,
+        tabIndex: 1,
+        focusColor: (s = (C = e == null ? void 0 : e.banner) == null ? void 0 : C.ctaButton) == null ? void 0 : s.color,
+        children: [
+          /* @__PURE__ */ n(f, {}),
+          "SEND INFO TO ACCOUNT EMAIL"
+        ]
+      }
+    ),
+    /* @__PURE__ */ c(t, { children: [
+      /* @__PURE__ */ n(d, { value: a }),
+      /* @__PURE__ */ c(u, { children: [
+        /* @__PURE__ */ n(E, { children: "LEARN MORE" }),
+        /* @__PURE__ */ n(A, { children: "SCAN QR CODE WITH YOUR PHONE CAMERA" })
+      ] })
+    ] })
+  ] }) : l === 6 && h === 4 ? /* @__PURE__ */ c(
+    O,
+    {
+      ref: r,
+      tabIndex: 1,
+      focusColor: (N = (T = e == null ? void 0 : e.banner) == null ? void 0 : T.ctaButton) == null ? void 0 : N.color,
+      children: [
+        /* @__PURE__ */ n(f, {}),
+        /* @__PURE__ */ n(x, { children: "SEND INFO TO ACCOUNT EMAIL" })
+      ]
+    }
+  ) : l === 4 ? /* @__PURE__ */ n(
+    O,
+    {
+      ref: r,
+      tabIndex: 1,
+      focusColor: (I = (i = e == null ? void 0 : e.banner) == null ? void 0 : i.ctaButton) == null ? void 0 : I.color,
+      children: "BACK TO VIDEO"
+    }
+  ) : null;
+});
+export {
+  B as PromoAction
+};

package/lib/app/tvos/ui/Sidebar/index.d.ts

@@ -0,0 +1,15 @@
+import { PromotionOptions } from '@streamlayer/sdk-web-types';
+import { ControlVideoCb } from '../../../../ui/video-player';
+export type OverlayProps = {
+    promotionId: string;
+    open?: () => void;
+    promotion: PromotionOptions;
+    onClose?: () => void;
+    markAsViewed?: () => void;
+    skipAutoClose?: boolean;
+    inSidebar?: boolean;
+    controlVideo: ControlVideoCb;
+    advertisementPaused: boolean;
+    togglePause: (flag: boolean) => void;
+};
+export declare const TVSidebar: React.FC<OverlayProps>;