@pushwoosh/dumb-components 1.1.161 → 1.1.163

package/Modal/components/Modal/styles.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CSSTransition } from 'react-transition-group';
 import styled, { createGlobalStyle } from 'styled-components';
-import { ShapeRadius } from '@pushwoosh/kit-constants';
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
 const animationTimeout = 300;
 export const LockBody = createGlobalStyle(["body{overflow:hidden;position:relative;height:100%;}"]);
 export const ModalBox = styled.div.attrs(({
@@ -44,9 +44,9 @@ export const ModalBoxTrans = styled(ModalBoxBase).withConfig({
 export const ModalContainer = styled.div.withConfig({
   displayName: "ModalContainer",
   componentId: "sc-lejcgu-3"
-})(["display:inline-flex;flex-direction:column;align-items:stretch;justify-content:flex-start;position:relative;width:", ";height:calc(100vh - 2 * 56px);vertical-align:middle;z-index:10;& > *{&:first-child{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}}"], ({
+})(["display:inline-flex;flex-direction:column;align-items:stretch;justify-content:flex-start;position:relative;width:", ";height:calc(100vh - 2 * 56px);vertical-align:middle;z-index:10;background:", ";& > *{&:first-child{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}}"], ({
   $width
-}) => $width, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG);
+}) => $width, Color.CLEAR, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG);
 ModalBox.displayName = 'ModalBox';
 ModalInner.displayName = 'ModalInner';
 ModalContainer.displayName = 'ModalContainer';

package/NativeRichMediaPreview/NativeRichMediaPreview.d.ts

@@ -0,0 +1,11 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaPreviewProps } from './types';
+/**
+ * Phone-frame preview of a native rich media (modal, banner, stories,
+ * spinwheel, …) rendered from its JSON config; shows an invalid-config
+ * placeholder when the config cannot be parsed.
+ *
+ * @example
+ * <NativeRichMediaPreview content={'{"displayType":"modal","modal":{"title":{"text":"Hi"}}}'} />
+ */
+export declare function NativeRichMediaPreview(props: NativeRichMediaPreviewProps): ReactElement;

package/NativeRichMediaPreview/NativeRichMediaPreview.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { Spinner } from '../Spinner';
+import { NativeRichMediaDim } from './components/NativeRichMediaDim';
+import { NativeRichMediaPreviewCanvas } from './components/NativeRichMediaPreviewCanvas';
+import { PT } from './helpers';
+import { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
+import { CanvasWrapper, ScaledCanvasHost } from './styles';
+import { NativeRichMediaBannerView, NativeRichMediaCarouselView, NativeRichMediaFullscreenView, NativeRichMediaInvalidView, NativeRichMediaModalView, NativeRichMediaPipView, NativeRichMediaScratchcardView, NativeRichMediaSheetView, NativeRichMediaSpinwheelView, NativeRichMediaStoriesView, NativeRichMediaVideoView } from './views';
+const DEFAULT_WIDTH = 304;
+const DEFAULT_HEIGHT = 659;
+function dimsScreen(config) {
+  if (!config) {
+    return false;
+  }
+  switch (config.displayType) {
+    case 'modal':
+      return config.modal.dimBackground !== false;
+    case 'sheet':
+      return config.sheet.dimBackground !== false;
+    case 'carousel':
+    case 'scratchcard':
+    case 'spinwheel':
+      return true;
+    default:
+      return false;
+  }
+}
+function renderConfig(config, activeIndex, onNavigate) {
+  switch (config.displayType) {
+    case 'modal':
+      return _jsx(NativeRichMediaModalView, {
+        block: config.modal
+      });
+    case 'sheet':
+      return _jsx(NativeRichMediaSheetView, {
+        block: config.sheet
+      });
+    case 'carousel':
+      return _jsx(NativeRichMediaCarouselView, {
+        block: config.carousel,
+        activeIndex: activeIndex,
+        onNavigate: onNavigate
+      });
+    case 'stories':
+      return _jsx(NativeRichMediaStoriesView, {
+        block: config.stories,
+        activeIndex: activeIndex,
+        onNavigate: onNavigate
+      });
+    case 'banner':
+      return _jsx(NativeRichMediaBannerView, {
+        block: config.banner
+      });
+    case 'fullscreen':
+      return _jsx(NativeRichMediaFullscreenView, {
+        block: config.fullscreen
+      });
+    case 'video':
+      return _jsx(NativeRichMediaVideoView, {
+        block: config.video
+      });
+    case 'pip':
+      return _jsx(NativeRichMediaPipView, {
+        block: config.pip
+      });
+    case 'scratchcard':
+      return _jsx(NativeRichMediaScratchcardView, {
+        block: config.scratchcard
+      });
+    case 'spinwheel':
+      return _jsx(NativeRichMediaSpinwheelView, {
+        block: config.spinwheel
+      });
+    default:
+      return _jsx(NativeRichMediaInvalidView, {});
+  }
+}
+/**
+ * Phone-frame preview of a native rich media (modal, banner, stories,
+ * spinwheel, …) rendered from its JSON config; shows an invalid-config
+ * placeholder when the config cannot be parsed.
+ *
+ * @example
+ * <NativeRichMediaPreview content={'{"displayType":"modal","modal":{"title":{"text":"Hi"}}}'} />
+ */
+export function NativeRichMediaPreview(props) {
+  const {
+    content,
+    name,
+    width = DEFAULT_WIDTH,
+    height = DEFAULT_HEIGHT,
+    isLoading = false,
+    withBackground = true
+  } = props;
+  const [activeIndex, setActiveIndex] = useState(0);
+  const config = useMemo(() => parseNativeRichMediaConfig(content), [content]);
+  const hostRef = useRef(null);
+  const isSizeString = typeof width !== 'number' || typeof height !== 'number';
+  const [measuredSize, setMeasuredSize] = useState(null);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!isSizeString || !host) {
+      return undefined;
+    }
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) {
+        const {
+          width: measuredWidth,
+          height: measuredHeight
+        } = entry.contentRect;
+        setMeasuredSize({
+          width: measuredWidth,
+          height: measuredHeight
+        });
+      }
+    });
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, [isSizeString]);
+  const scale = useMemo(() => {
+    const effectiveWidth = typeof width === 'number' ? width : (measuredSize === null || measuredSize === void 0 ? void 0 : measuredSize.width) ?? DEFAULT_WIDTH;
+    const effectiveHeight = typeof height === 'number' ? height : (measuredSize === null || measuredSize === void 0 ? void 0 : measuredSize.height) ?? DEFAULT_HEIGHT;
+    return Math.min(effectiveWidth / PT.W, effectiveHeight / PT.H);
+  }, [width, height, measuredSize]);
+  const shouldDim = !isLoading && dimsScreen(config);
+  return _jsxs(ScaledCanvasHost, {
+    ref: hostRef,
+    width: width,
+    height: height,
+    "$withBackground": withBackground,
+    title: name,
+    children: [shouldDim && _jsx(NativeRichMediaDim, {}), isLoading && _jsx(CanvasWrapper, {
+      "$canvasWidth": PT.W,
+      "$canvasHeight": PT.H,
+      "$scale": scale,
+      children: _jsx(Spinner, {
+        size: "medium",
+        color: Color.LOCKED
+      })
+    }), !isLoading && !config && _jsx(NativeRichMediaInvalidView, {}), !isLoading && config && _jsx(CanvasWrapper, {
+      "$canvasWidth": PT.W,
+      "$canvasHeight": PT.H,
+      "$scale": scale,
+      children: _jsx(NativeRichMediaPreviewCanvas, {
+        children: renderConfig(config, activeIndex, setActiveIndex)
+      }, config.displayType)
+    })]
+  });
+}

package/NativeRichMediaPreview/components/NativeRichMediaCardButtons/NativeRichMediaCardButtons.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaCardButtonsProps } from './types';
+export declare function NativeRichMediaCardButtons(props: NativeRichMediaCardButtonsProps): ReactElement;

package/NativeRichMediaPreview/components/NativeRichMediaCardButtons/NativeRichMediaCardButtons.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Color } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { SECONDARY_LABEL, asText, withAlpha } from '../../helpers';
+import { ButtonRow } from '../../styles';
+export function NativeRichMediaCardButtons(props) {
+  const {
+    buttons,
+    $padding
+  } = props;
+  return _jsx(Vertical, {
+    "$padding": $padding,
+    "$gap": 10,
+    children: (buttons || []).map((b, i) => {
+      const bg = b.background || (i === 0 ? Color.PRIMARY : 'transparent');
+      const color = b.textColor || (b.background || i === 0 ? '#FFFFFF' : SECONDARY_LABEL);
+      const boxShadow = i === 0 && bg !== 'transparent' ? '0 5px 10px ' + withAlpha(bg, 0.28) : undefined;
+      return _jsx(ButtonRow
+      // eslint-disable-next-line react/no-array-index-key
+      , {
+        "$borderRadius": b.cornerRadius !== undefined ? b.cornerRadius : 8,
+        "$background": bg,
+        "$color": color,
+        "$boxShadow": boxShadow,
+        children: asText(b.text)
+      }, `card-btn-${i}`);
+    })
+  });
+}

package/NativeRichMediaPreview/components/NativeRichMediaCardButtons/index.d.ts

@@ -0,0 +1 @@
+export { NativeRichMediaCardButtons } from './NativeRichMediaCardButtons';

package/NativeRichMediaPreview/components/NativeRichMediaCardButtons/index.js

@@ -0,0 +1 @@
+export { NativeRichMediaCardButtons } from './NativeRichMediaCardButtons';

package/NativeRichMediaPreview/components/NativeRichMediaCardButtons/types.d.ts

@@ -0,0 +1,5 @@
+import type { NativeRichMediaButton } from '../../types';
+export type NativeRichMediaCardButtonsProps = {
+    buttons?: NativeRichMediaButton[];
+    $padding: string;
+};

package/NativeRichMediaPreview/components/NativeRichMediaCardButtons/types.js

@@ -0,0 +1 @@
+export {};

package/NativeRichMediaPreview/components/NativeRichMediaCloseChip/NativeRichMediaCloseChip.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaCloseChipProps } from './types';
+export declare function NativeRichMediaCloseChip(props: NativeRichMediaCloseChipProps): ReactElement;

package/NativeRichMediaPreview/components/NativeRichMediaCloseChip/NativeRichMediaCloseChip.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip } from './styles';
+export function NativeRichMediaCloseChip(props) {
+  const {
+    top,
+    right,
+    small
+  } = props;
+  return _jsx(Chip, {
+    "$small": small,
+    "$top": top,
+    "$right": right,
+    children: "\u2715"
+  });
+}

package/NativeRichMediaPreview/components/NativeRichMediaCloseChip/index.d.ts

@@ -0,0 +1,2 @@
+export { NativeRichMediaCloseChip } from './NativeRichMediaCloseChip';
+export { Chip } from './styles';

package/NativeRichMediaPreview/components/NativeRichMediaCloseChip/index.js

@@ -0,0 +1,2 @@
+export { NativeRichMediaCloseChip } from './NativeRichMediaCloseChip';
+export { Chip } from './styles';

package/NativeRichMediaPreview/components/NativeRichMediaCloseChip/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const Chip: import("styled-components").StyledComponent<"div", any, {
+    $small?: boolean;
+    $top?: number;
+    $right?: number;
+    $bottom?: number;
+    $left?: number;
+}, never>;

package/NativeRichMediaPreview/components/NativeRichMediaCloseChip/styles.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+export const Chip = styled.div.withConfig({
+  displayName: "Chip",
+  componentId: "sc-17mcpnr-0"
+})(["position:absolute;width:", ";height:", ";border-radius:50%;background:rgba(70,70,76,0.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#FFF;display:flex;align-items:center;justify-content:center;font-size:", ";font-weight:700;z-index:6;line-height:1;", " ", " ", " ", " svg{display:block;}"], ({
+  $small
+}) => $small ? '26px' : '34px', ({
+  $small
+}) => $small ? '26px' : '34px', ({
+  $small
+}) => $small ? '11px' : '14px', ({
+  $top
+}) => $top !== undefined ? `top: ${$top}px;` : '', ({
+  $right
+}) => $right !== undefined ? `right: ${$right}px;` : '', ({
+  $bottom
+}) => $bottom !== undefined ? `bottom: ${$bottom}px;` : '', ({
+  $left
+}) => $left !== undefined ? `left: ${$left}px;` : '');

package/NativeRichMediaPreview/components/NativeRichMediaCloseChip/types.d.ts

@@ -0,0 +1,5 @@
+export type NativeRichMediaCloseChipProps = {
+    top: number;
+    right: number;
+    small?: boolean;
+};

package/NativeRichMediaPreview/components/NativeRichMediaCloseChip/types.js

@@ -0,0 +1 @@
+export {};

package/NativeRichMediaPreview/components/NativeRichMediaCoverImg/NativeRichMediaCoverImg.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaCoverImgProps } from './types';
+export declare function NativeRichMediaCoverImg(props: NativeRichMediaCoverImgProps): ReactElement;

package/NativeRichMediaPreview/components/NativeRichMediaCoverImg/NativeRichMediaCoverImg.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CoverBox } from './styles';
+export function NativeRichMediaCoverImg(props) {
+  const {
+    url,
+    margin,
+    width,
+    height,
+    borderRadius,
+    position,
+    inset,
+    backgroundColor,
+    flex
+  } = props;
+  const escapedUrl = url ? String(url).replace(/'/g, '%27') : undefined;
+  return _jsx(CoverBox, {
+    "$backgroundImage": escapedUrl,
+    "$backgroundColor": backgroundColor,
+    "$margin": margin,
+    "$width": width,
+    "$height": height,
+    "$borderRadius": borderRadius,
+    "$position": position,
+    "$inset": inset,
+    "$flex": flex
+  });
+}

package/NativeRichMediaPreview/components/NativeRichMediaCoverImg/index.d.ts

@@ -0,0 +1 @@
+export { NativeRichMediaCoverImg } from './NativeRichMediaCoverImg';

package/NativeRichMediaPreview/components/NativeRichMediaCoverImg/index.js

@@ -0,0 +1 @@
+export { NativeRichMediaCoverImg } from './NativeRichMediaCoverImg';

package/NativeRichMediaPreview/components/NativeRichMediaCoverImg/styles.d.ts

@@ -0,0 +1,11 @@
+export declare const CoverBox: import("styled-components").StyledComponent<"div", any, {
+    $backgroundImage?: string;
+    $backgroundColor?: string;
+    $margin?: string;
+    $width?: number;
+    $height?: number;
+    $borderRadius?: number;
+    $position?: "absolute";
+    $inset?: boolean;
+    $flex?: string;
+}, never>;

package/NativeRichMediaPreview/components/NativeRichMediaCoverImg/styles.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+export const CoverBox = styled.div.withConfig({
+  displayName: "CoverBox",
+  componentId: "sc-15zx77-0"
+})(["background-size:cover;background-position:center;background-color:", ";", " ", " ", " ", " ", " ", " ", " ", ""], ({
+  $backgroundColor
+}) => $backgroundColor || 'rgba(116, 116, 128, 0.08)', ({
+  $backgroundImage
+}) => $backgroundImage !== undefined ? `background-image: url('${$backgroundImage}');` : '', ({
+  $margin
+}) => $margin !== undefined ? `margin: ${$margin};` : '', ({
+  $width
+}) => $width !== undefined ? `width: ${$width}px;` : '', ({
+  $height
+}) => $height !== undefined ? `height: ${$height}px;` : '', ({
+  $borderRadius
+}) => $borderRadius !== undefined ? `border-radius: ${$borderRadius}px;` : '', ({
+  $position
+}) => $position !== undefined ? `position: ${$position};` : '', ({
+  $inset
+}) => $inset ? 'inset: 0;' : '', ({
+  $flex
+}) => $flex !== undefined ? `flex: ${$flex};` : '');

package/NativeRichMediaPreview/components/NativeRichMediaCoverImg/types.d.ts

@@ -0,0 +1,11 @@
+export type NativeRichMediaCoverImgProps = {
+    url?: string;
+    margin?: string;
+    width?: number;
+    height?: number;
+    borderRadius?: number;
+    position?: 'absolute';
+    inset?: boolean;
+    backgroundColor?: string;
+    flex?: string;
+};

package/NativeRichMediaPreview/components/NativeRichMediaCoverImg/types.js

@@ -0,0 +1 @@
+export {};

package/NativeRichMediaPreview/components/NativeRichMediaDim/index.d.ts

@@ -0,0 +1 @@
+export { NativeRichMediaDim } from './styles';

package/NativeRichMediaPreview/components/NativeRichMediaDim/index.js

@@ -0,0 +1 @@
+export { NativeRichMediaDim } from './styles';

package/NativeRichMediaPreview/components/NativeRichMediaDim/styles.d.ts

@@ -0,0 +1 @@
+export declare const NativeRichMediaDim: import("styled-components").StyledComponent<"div", any, {}, never>;

package/NativeRichMediaPreview/components/NativeRichMediaDim/styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const NativeRichMediaDim = styled.div.withConfig({
+  displayName: "NativeRichMediaDim",
+  componentId: "sc-1xu35ei-0"
+})(["position:absolute;inset:0;background:rgba(14,14,18,0.42);backdrop-filter:blur(9px) saturate(115%);-webkit-backdrop-filter:blur(9px) saturate(115%);"]);

package/NativeRichMediaPreview/components/NativeRichMediaExpandChip/NativeRichMediaExpandChip.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaExpandChipProps } from './types';
+export declare function NativeRichMediaExpandChip(props: NativeRichMediaExpandChipProps): ReactElement;

package/NativeRichMediaPreview/components/NativeRichMediaExpandChip/NativeRichMediaExpandChip.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ExpandIcon } from '../../icons';
+import { Chip } from '../NativeRichMediaCloseChip';
+export function NativeRichMediaExpandChip(props) {
+  const {
+    bottom,
+    left
+  } = props;
+  return _jsx(Chip, {
+    "$small": true,
+    "$bottom": bottom,
+    "$left": left,
+    children: _jsx(ExpandIcon, {})
+  });
+}

package/NativeRichMediaPreview/components/NativeRichMediaExpandChip/index.d.ts

@@ -0,0 +1 @@
+export { NativeRichMediaExpandChip } from './NativeRichMediaExpandChip';

package/NativeRichMediaPreview/components/NativeRichMediaExpandChip/index.js

@@ -0,0 +1 @@
+export { NativeRichMediaExpandChip } from './NativeRichMediaExpandChip';

package/NativeRichMediaPreview/components/NativeRichMediaExpandChip/types.d.ts

@@ -0,0 +1,4 @@
+export type NativeRichMediaExpandChipProps = {
+    bottom?: number;
+    left?: number;
+};

package/NativeRichMediaPreview/components/NativeRichMediaExpandChip/types.js

@@ -0,0 +1 @@
+export {};

package/NativeRichMediaPreview/components/NativeRichMediaMuteChip/NativeRichMediaMuteChip.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaMuteChipProps } from './types';
+export declare function NativeRichMediaMuteChip(props: NativeRichMediaMuteChipProps): ReactElement;

package/NativeRichMediaPreview/components/NativeRichMediaMuteChip/NativeRichMediaMuteChip.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MutedIcon, SoundIcon } from '../../icons';
+import { Chip } from '../NativeRichMediaCloseChip';
+export function NativeRichMediaMuteChip(props) {
+  const {
+    muted,
+    small,
+    top,
+    right,
+    bottom,
+    left
+  } = props;
+  return _jsx(Chip, {
+    "$small": small,
+    "$top": top,
+    "$right": right,
+    "$bottom": bottom,
+    "$left": left,
+    children: muted === false ? _jsx(SoundIcon, {}) : _jsx(MutedIcon, {})
+  });
+}

package/NativeRichMediaPreview/components/NativeRichMediaMuteChip/index.d.ts

@@ -0,0 +1 @@
+export { NativeRichMediaMuteChip } from './NativeRichMediaMuteChip';

package/NativeRichMediaPreview/components/NativeRichMediaMuteChip/index.js

@@ -0,0 +1 @@
+export { NativeRichMediaMuteChip } from './NativeRichMediaMuteChip';

package/NativeRichMediaPreview/components/NativeRichMediaMuteChip/types.d.ts

@@ -0,0 +1,8 @@
+export type NativeRichMediaMuteChipProps = {
+    muted?: boolean;
+    small?: boolean;
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};

package/NativeRichMediaPreview/components/NativeRichMediaMuteChip/types.js

@@ -0,0 +1 @@
+export {};

package/NativeRichMediaPreview/components/NativeRichMediaOverlayButtons/NativeRichMediaOverlayButtons.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaOverlayButtonsProps } from './types';
+export declare function NativeRichMediaOverlayButtons(props: NativeRichMediaOverlayButtonsProps): ReactElement;

package/NativeRichMediaPreview/components/NativeRichMediaOverlayButtons/NativeRichMediaOverlayButtons.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { asText } from '../../helpers';
+import { ButtonRow } from '../../styles';
+export function NativeRichMediaOverlayButtons(props) {
+  const {
+    buttons
+  } = props;
+  return _jsx(Vertical, {
+    "$margin": {
+      top: 20
+    },
+    "$gap": 10,
+    children: (buttons || []).map((b, i) => {
+      const borderRadius = b.cornerRadius !== undefined ? b.cornerRadius : 8;
+      let background;
+      let color;
+      let border;
+      if (b.background) {
+        background = b.background;
+        color = b.textColor || '#FFFFFF';
+      } else if (i === 0) {
+        background = '#FFFFFF';
+        color = b.textColor || '#0F0F0F';
+      } else {
+        border = '1.5px solid rgba(255,255,255,0.6)';
+        color = b.textColor || '#FFFFFF';
+      }
+      return _jsx(ButtonRow
+      // eslint-disable-next-line react/no-array-index-key
+      , {
+        "$borderRadius": borderRadius,
+        "$background": background,
+        "$color": color,
+        "$border": border,
+        children: asText(b.text)
+      }, `overlay-btn-${i}`);
+    })
+  });
+}

package/NativeRichMediaPreview/components/NativeRichMediaOverlayButtons/index.d.ts

@@ -0,0 +1 @@
+export { NativeRichMediaOverlayButtons } from './NativeRichMediaOverlayButtons';

package/NativeRichMediaPreview/components/NativeRichMediaOverlayButtons/index.js

@@ -0,0 +1 @@
+export { NativeRichMediaOverlayButtons } from './NativeRichMediaOverlayButtons';

package/NativeRichMediaPreview/components/NativeRichMediaOverlayButtons/types.d.ts

@@ -0,0 +1,4 @@
+import type { NativeRichMediaButton } from '../../types';
+export type NativeRichMediaOverlayButtonsProps = {
+    buttons?: NativeRichMediaButton[];
+};

package/NativeRichMediaPreview/components/NativeRichMediaOverlayButtons/types.js

@@ -0,0 +1 @@
+export {};

package/NativeRichMediaPreview/components/NativeRichMediaPreviewCanvas/NativeRichMediaPreviewCanvas.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaPreviewCanvasProps } from './types';
+export declare function NativeRichMediaPreviewCanvas(props: NativeRichMediaPreviewCanvasProps): ReactElement;

package/NativeRichMediaPreview/components/NativeRichMediaPreviewCanvas/NativeRichMediaPreviewCanvas.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Canvas } from './styles';
+export function NativeRichMediaPreviewCanvas(props) {
+  const {
+    children
+  } = props;
+  return _jsx(Canvas, {
+    children: children
+  });
+}

package/NativeRichMediaPreview/components/NativeRichMediaPreviewCanvas/index.d.ts

@@ -0,0 +1 @@
+export { NativeRichMediaPreviewCanvas } from './NativeRichMediaPreviewCanvas';

package/NativeRichMediaPreview/components/NativeRichMediaPreviewCanvas/index.js

@@ -0,0 +1 @@
+export { NativeRichMediaPreviewCanvas } from './NativeRichMediaPreviewCanvas';

package/NativeRichMediaPreview/components/NativeRichMediaPreviewCanvas/styles.d.ts

@@ -0,0 +1 @@
+export declare const Canvas: import("styled-components").StyledComponent<"div", any, {}, never>;

package/NativeRichMediaPreview/components/NativeRichMediaPreviewCanvas/styles.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { PT } from '../../helpers';
+export const Canvas = styled.div.withConfig({
+  displayName: "Canvas",
+  componentId: "sc-1evwb9s-0"
+})(["position:relative;overflow:hidden;width:", "px;height:", "px;font-family:ui-rounded,-apple-system,BlinkMacSystemFont,'SF Pro Rounded','Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;*{box-sizing:border-box;}"], PT.W, PT.H);

package/NativeRichMediaPreview/components/NativeRichMediaPreviewCanvas/types.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export type NativeRichMediaPreviewCanvasProps = {
+    children: ReactNode;
+};

package/NativeRichMediaPreview/components/NativeRichMediaPreviewCanvas/types.js

@@ -0,0 +1 @@
+export {};

package/NativeRichMediaPreview/components/NativeRichMediaPtLabel/NativeRichMediaPtLabel.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaPtLabelProps } from './types';
+export declare function NativeRichMediaPtLabel(props: NativeRichMediaPtLabelProps): ReactElement;