@pushwoosh/dumb-components 1.1.162 → 1.1.164

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

@@ -1,11 +1,30 @@
 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.
+ * Preview of a native rich media (modal, banner, stories, spinwheel, …)
+ * rendered from its JSON config; lays out with plain CSS in the real pixels
+ * of the given width/height box — there is no scaling and no fidelity to any
+ * phone's pt-metrics, since this is a preview and devices vary. Content flows
+ * inside a scrollable layer above a static backdrop (the dim overlay or, for
+ * `fullscreen`/`video`/`stories`, the full-bleed background image or poster):
+ * content taller than the box scrolls, shorter content aligns per display
+ * type while the backdrop stays put. Shows an invalid-config placeholder
+ * when the config cannot be parsed or misses required contract fields.
  *
  * @example
- * <NativeRichMediaPreview content={'{"displayType":"modal","modal":{"title":{"text":"Hi"}}}'} />
+ * <NativeRichMediaPreview
+ *   width={304}
+ *   height={659}
+ *   content={{
+ *     displayType: 'modal',
+ *     modal: {
+ *       showClose: true,
+ *       dimBackground: true,
+ *       background: '#FFFFFFFF',
+ *       title: { text: 'Hi', color: '#4B5057FF' },
+ *       buttons: [],
+ *     },
+ *   }}
+ * />
  */
 export declare function NativeRichMediaPreview(props: NativeRichMediaPreviewProps): ReactElement;

package/NativeRichMediaPreview/NativeRichMediaPreview.js

@@ -1,15 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Spinner } from '../Spinner';
+import { NativeRichMediaCloseChip } from './components/NativeRichMediaCloseChip';
+import { NativeRichMediaCoverImg } from './components/NativeRichMediaCoverImg';
 import { NativeRichMediaDim } from './components/NativeRichMediaDim';
-import { NativeRichMediaPreviewCanvas } from './components/NativeRichMediaPreviewCanvas';
-import { PT } from './helpers';
+import { NativeRichMediaMuteChip } from './components/NativeRichMediaMuteChip';
+import { EDGE_INSET, clampIndex } from './helpers';
 import { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
-import { CanvasWrapper, ScaledCanvasHost } from './styles';
+import { BackdropLayer, ContentFlow, PreviewHost, ScrollLayer, SpinnerLayer } from './styles';
 import { NativeRichMediaBannerView, NativeRichMediaCarouselView, NativeRichMediaFullscreenView, NativeRichMediaInvalidView, NativeRichMediaModalView, NativeRichMediaPipView, NativeRichMediaScratchcardView, NativeRichMediaSheetView, NativeRichMediaSpinwheelView, NativeRichMediaStoriesView, NativeRichMediaVideoView } from './views';
-const DEFAULT_WIDTH = 304;
-const DEFAULT_HEIGHT = 659;
+import { GradientOverlay } from './views/shared/styles';
 function dimsScreen(config) {
   if (!config) {
     return false;
@@ -27,7 +28,85 @@ function dimsScreen(config) {
       return false;
   }
 }
-function renderConfig(config, activeIndex, onNavigate) {
+function justifyFor(config) {
+  switch (config.displayType) {
+    case 'modal':
+    case 'carousel':
+    case 'scratchcard':
+    case 'spinwheel':
+      return 'center';
+    case 'stories':
+      return 'space-between';
+    case 'fullscreen':
+    case 'video':
+    case 'sheet':
+      return 'flex-end';
+    case 'banner':
+      return config.banner.position === 'top' ? 'flex-start' : 'flex-end';
+    case 'pip':
+      return config.pip.position.includes('top') ? 'flex-start' : 'flex-end';
+    default:
+      return 'center';
+  }
+}
+function renderCoverBackdrop(url, backgroundColor, overlayTopOffset) {
+  return _jsxs(_Fragment, {
+    children: [_jsx(NativeRichMediaCoverImg, {
+      url: url,
+      position: "absolute",
+      inset: true,
+      backgroundColor: backgroundColor
+    }), _jsx(GradientOverlay, {
+      "$topOffset": overlayTopOffset
+    })]
+  });
+}
+function renderBackdrop(config, activeIndex) {
+  switch (config.displayType) {
+    case 'fullscreen':
+      return renderCoverBackdrop(config.fullscreen.cover.image, config.fullscreen.cover.background);
+    case 'video':
+      return renderCoverBackdrop(config.video.poster, '#000');
+    case 'stories':
+      {
+        var _items$clampIndex;
+        const items = config.stories.items;
+        return renderCoverBackdrop((_items$clampIndex = items[clampIndex(activeIndex, items.length)]) === null || _items$clampIndex === void 0 ? void 0 : _items$clampIndex.image, '#000', '55%');
+      }
+    default:
+      return null;
+  }
+}
+const STORIES_PROGRESS_BAR_HEIGHT = 3;
+const STORIES_CLOSE_CHIP_GAP = 10;
+function renderChrome(config) {
+  switch (config.displayType) {
+    case 'fullscreen':
+      return config.fullscreen.showClose ? _jsx(NativeRichMediaCloseChip, {
+        top: EDGE_INSET,
+        right: 16
+      }) : null;
+    case 'video':
+      return _jsxs(_Fragment, {
+        children: [_jsx(NativeRichMediaMuteChip, {
+          muted: config.video.muted,
+          top: EDGE_INSET,
+          left: 16
+        }), config.video.showClose && _jsx(NativeRichMediaCloseChip, {
+          top: EDGE_INSET,
+          right: 16
+        })]
+      });
+    case 'stories':
+      return config.stories.showClose ? _jsx(NativeRichMediaCloseChip, {
+        top: EDGE_INSET + STORIES_PROGRESS_BAR_HEIGHT + STORIES_CLOSE_CHIP_GAP,
+        right: 16
+      }) : null;
+    default:
+      return null;
+  }
+}
+function renderConfig(config, activeIndex) {
   switch (config.displayType) {
     case 'modal':
       return _jsx(NativeRichMediaModalView, {
@@ -40,14 +119,12 @@ function renderConfig(config, activeIndex, onNavigate) {
     case 'carousel':
       return _jsx(NativeRichMediaCarouselView, {
         block: config.carousel,
-        activeIndex: activeIndex,
-        onNavigate: onNavigate
+        activeIndex: activeIndex
       });
     case 'stories':
       return _jsx(NativeRichMediaStoriesView, {
         block: config.stories,
-        activeIndex: activeIndex,
-        onNavigate: onNavigate
+        activeIndex: activeIndex
       });
     case 'banner':
       return _jsx(NativeRichMediaBannerView, {
@@ -78,74 +155,59 @@ function renderConfig(config, activeIndex, onNavigate) {
   }
 }
 /**
- * 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.
+ * Preview of a native rich media (modal, banner, stories, spinwheel, …)
+ * rendered from its JSON config; lays out with plain CSS in the real pixels
+ * of the given width/height box — there is no scaling and no fidelity to any
+ * phone's pt-metrics, since this is a preview and devices vary. Content flows
+ * inside a scrollable layer above a static backdrop (the dim overlay or, for
+ * `fullscreen`/`video`/`stories`, the full-bleed background image or poster):
+ * content taller than the box scrolls, shorter content aligns per display
+ * type while the backdrop stays put. Shows an invalid-config placeholder
+ * when the config cannot be parsed or misses required contract fields.
  *
  * @example
- * <NativeRichMediaPreview content={'{"displayType":"modal","modal":{"title":{"text":"Hi"}}}'} />
+ * <NativeRichMediaPreview
+ *   width={304}
+ *   height={659}
+ *   content={{
+ *     displayType: 'modal',
+ *     modal: {
+ *       showClose: true,
+ *       dimBackground: true,
+ *       background: '#FFFFFFFF',
+ *       title: { text: 'Hi', color: '#4B5057FF' },
+ *       buttons: [],
+ *     },
+ *   }}
+ * />
  */
 export function NativeRichMediaPreview(props) {
   const {
     content,
-    name,
-    width = DEFAULT_WIDTH,
-    height = DEFAULT_HEIGHT,
+    width,
+    height,
+    activeIndex = 0,
     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,
+  return _jsxs(PreviewHost, {
     width: width,
     height: height,
     "$withBackground": withBackground,
-    title: name,
-    children: [shouldDim && _jsx(NativeRichMediaDim, {}), isLoading && _jsx(CanvasWrapper, {
-      "$canvasWidth": PT.W,
-      "$canvasHeight": PT.H,
-      "$scale": scale,
+    children: [_jsxs(BackdropLayer, {
+      children: [shouldDim && _jsx(NativeRichMediaDim, {}), !isLoading && config && renderBackdrop(config, activeIndex)]
+    }), isLoading && _jsx(SpinnerLayer, {
       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)
-    })]
+    }), !isLoading && !config && _jsx(NativeRichMediaInvalidView, {}), !isLoading && config && _jsx(ScrollLayer, {
+      children: _jsx(ContentFlow, {
+        "$justify": justifyFor(config),
+        children: renderConfig(config, activeIndex)
+      })
+    }, config.displayType), !isLoading && config && renderChrome(config)]
   });
 }

package/NativeRichMediaPreview/components/NativeRichMediaButtonList/NativeRichMediaButtonList.d.ts

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

package/NativeRichMediaPreview/components/NativeRichMediaButtonList/NativeRichMediaButtonList.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { ButtonRow } from '../../styles';
+export function NativeRichMediaButtonList(props) {
+  const {
+    buttons,
+    $padding,
+    $margin
+  } = props;
+  return _jsx(Vertical, {
+    "$padding": $padding,
+    "$margin": $margin,
+    "$gap": 10,
+    children: (buttons || []).map((b, i) => _jsx(ButtonRow
+    // eslint-disable-next-line react/no-array-index-key
+    , {
+      "$borderRadius": b.border.radius,
+      "$background": b.background,
+      "$color": b.text.color,
+      "$border": `1px solid ${b.border.color}`,
+      children: b.text.text
+    }, `btn-${i}`))
+  });
+}

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

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

package/NativeRichMediaPreview/components/NativeRichMediaButtonList/index.js

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

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

@@ -0,0 +1,6 @@
+import type { NativeRichMediaButtonValue } from '../../helpers';
+export type NativeRichMediaButtonListProps = {
+    buttons?: NativeRichMediaButtonValue[];
+    $padding?: string;
+    $margin?: string;
+};

package/NativeRichMediaPreview/components/NativeRichMediaCloseChip/styles.js

@@ -1,14 +1,13 @@
 import styled from 'styled-components';
+import { FontSize, FontWeight } from '@pushwoosh/kit-constants';
 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;}"], ({
+})(["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:", ";z-index:6;line-height:1;user-select:none;cursor:pointer;", " ", " ", " ", " svg{display:block;}"], ({
   $small
-}) => $small ? '26px' : '34px', ({
+}) => $small ? '26px' : '30px', ({
   $small
-}) => $small ? '26px' : '34px', ({
-  $small
-}) => $small ? '11px' : '14px', ({
+}) => $small ? '26px' : '30px', FontSize.SMALL, FontWeight.BOLD, ({
   $top
 }) => $top !== undefined ? `top: ${$top}px;` : '', ({
   $right

package/NativeRichMediaPreview/components/NativeRichMediaRewardPanel/NativeRichMediaRewardPanel.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Color } from '@pushwoosh/kit-constants';
-import { SECONDARY_LABEL, asText, contrastOn, isLightHex, withAlpha } from '../../helpers';
+import { CodeBox, CodeText, RewardMessage, RewardTitle } from './styles';
+import { SECONDARY_LABEL, asButtonValue, asText, asTextValue, contrastOn, isLightHex, withAlpha } from '../../helpers';
 import { CopyIcon } from '../../icons';
 import { ButtonRow } from '../../styles';
-import { NativeRichMediaPtLabel } from '../NativeRichMediaPtLabel';
-import { CodeBox, CodeText } from './styles';
 export function NativeRichMediaRewardPanel(props) {
   const {
     reward,
@@ -14,27 +12,28 @@ export function NativeRichMediaRewardPanel(props) {
     return null;
   }
   const primary = contrastOn(onBackgroundHex);
-  const codeColor = reward.title && reward.title.color || primary;
+  const title = asTextValue(reward.title);
+  const message = asTextValue(reward.message);
+  const button = asButtonValue(reward.button);
+  const codeColor = title.color || primary;
   const messageColor = isLightHex(onBackgroundHex) ? SECONDARY_LABEL : 'rgba(255,255,255,0.72)';
   const codeBackground = isLightHex(onBackgroundHex) ? 'rgba(0,0,0,0.06)' : 'rgba(255,255,255,0.16)';
-  const visibleOrder = [reward.title && 'title', reward.message && 'message', reward.code && 'code', reward.button && 'button'].filter(Boolean);
+  const visibleOrder = [title.text && 'title', message.text && 'message', reward.code && 'code', button && 'button'].filter(Boolean);
   const firstVisible = visibleOrder[0];
-  const marginFor = key => key === firstVisible ? undefined : 12;
+  const marginFor = key => {
+    if (key === firstVisible) return undefined;
+    if (key === 'message' && title.text) return 4;
+    return 12;
+  };
   return _jsxs("div", {
-    children: [reward.title && _jsx(NativeRichMediaPtLabel, {
-      value: reward.title,
-      size: 22,
-      weight: 800,
-      fallbackColor: primary,
-      align: "center",
-      marginTop: marginFor('title')
-    }), reward.message && _jsx(NativeRichMediaPtLabel, {
-      value: reward.message,
-      size: 15,
-      weight: 400,
-      fallbackColor: messageColor,
-      align: "center",
-      marginTop: marginFor('message')
+    children: [title.text && _jsx(RewardTitle, {
+      "$color": title.color || primary,
+      "$marginTop": marginFor('title'),
+      children: title.text
+    }), message.text && _jsx(RewardMessage, {
+      "$color": message.color || messageColor,
+      "$marginTop": marginFor('message'),
+      children: message.text
     }), reward.code && _jsxs(CodeBox, {
       "$marginTop": marginFor('code'),
       "$background": codeBackground,
@@ -45,12 +44,13 @@ export function NativeRichMediaRewardPanel(props) {
       }), _jsx(CopyIcon, {
         color: withAlpha(codeColor, 0.7)
       })]
-    }), reward.button && _jsx(ButtonRow, {
+    }), button && _jsx(ButtonRow, {
       "$marginTop": marginFor('button'),
-      "$borderRadius": 14,
-      "$background": Color.PRIMARY,
-      "$color": "#FFF",
-      children: asText(reward.button)
+      "$borderRadius": button.border.radius,
+      "$background": button.background,
+      "$color": button.text.color,
+      "$border": `1px solid ${button.border.color}`,
+      children: button.text.text
     })]
   });
 }

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

@@ -4,5 +4,32 @@ export declare const CodeBox: import("styled-components").StyledComponent<"div",
     $marginTop?: number;
 }, never>;
 export declare const CodeText: import("styled-components").StyledComponent<"span", any, {
-    $color: string;
-}, never>;
+    $color?: string | undefined;
+    $uppercase?: boolean | undefined;
+    $ellipsis?: boolean | undefined;
+    $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
+} & {
+    $variant: string;
+}, "$variant">;
+export declare const RewardTitle: import("styled-components").StyledComponent<"span", any, {
+    $color?: string | undefined;
+    $uppercase?: boolean | undefined;
+    $ellipsis?: boolean | undefined;
+    $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
+} & {
+    $color?: string;
+    $align?: "center";
+    $marginTop?: number;
+    $size?: "h3" | "h4";
+    $truncate?: boolean;
+} & {
+    $align: string;
+}, "$align">;
+export declare const RewardMessage: import("styled-components").StyledComponent<typeof import("@pushwoosh/kit-typography").Footnote, any, {
+    $color?: string;
+    $align?: "center";
+    $clamp?: number;
+    $marginTop?: number;
+} & {
+    $align: string;
+}, "$align">;

package/NativeRichMediaPreview/components/NativeRichMediaRewardPanel/styles.js

@@ -1,4 +1,7 @@
 import styled from 'styled-components';
+import { Text } from '@pushwoosh/kit-typography';
+import { NativeRichMediaText } from '../NativeRichMediaText';
+import { NativeRichMediaTitle } from '../NativeRichMediaTitle';
 export const CodeBox = styled.div.withConfig({
   displayName: "CodeBox",
   componentId: "sc-z83bc4-0"
@@ -9,9 +12,21 @@ export const CodeBox = styled.div.withConfig({
 }) => $border, ({
   $marginTop
 }) => $marginTop !== undefined ? `margin-top: ${$marginTop}px;` : '');
-export const CodeText = styled.span.withConfig({
+export const CodeText = styled(Text).attrs({
+  $variant: 'h3'
+}).withConfig({
   displayName: "CodeText",
   componentId: "sc-z83bc4-1"
-})(["font-size:17px;font-weight:700;color:", ";"], ({
-  $color
-}) => $color);
+})([""]);
+export const RewardTitle = styled(NativeRichMediaTitle).attrs({
+  $align: 'center'
+}).withConfig({
+  displayName: "RewardTitle",
+  componentId: "sc-z83bc4-2"
+})([""]);
+export const RewardMessage = styled(NativeRichMediaText).attrs({
+  $align: 'center'
+}).withConfig({
+  displayName: "RewardMessage",
+  componentId: "sc-z83bc4-3"
+})([""]);

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

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

package/NativeRichMediaPreview/components/NativeRichMediaText/index.js

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

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

@@ -0,0 +1,7 @@
+import { Footnote } from '@pushwoosh/kit-typography';
+export declare const NativeRichMediaText: import("styled-components").StyledComponent<typeof Footnote, any, {
+    $color?: string;
+    $align?: "center";
+    $clamp?: number;
+    $marginTop?: number;
+}, never>;

package/NativeRichMediaPreview/components/NativeRichMediaText/styles.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+import { Footnote } from '@pushwoosh/kit-typography';
+export const NativeRichMediaText = styled(Footnote).withConfig({
+  displayName: "NativeRichMediaText",
+  componentId: "sc-1e1cjl8-0"
+})(["display:block;color:", ";", " ", " ", ""], ({
+  $color
+}) => $color, ({
+  $align
+}) => $align ? `text-align: ${$align};` : '', ({
+  $marginTop
+}) => $marginTop !== undefined ? `margin-top: ${$marginTop}px;` : '', ({
+  $clamp
+}) => $clamp ? `
+    display: -webkit-box;
+    -webkit-line-clamp: ${$clamp};
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  ` : '');

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

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

package/NativeRichMediaPreview/components/NativeRichMediaTitle/index.js

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

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

@@ -0,0 +1,12 @@
+export declare const NativeRichMediaTitle: import("styled-components").StyledComponent<"span", any, {
+    $color?: string | undefined;
+    $uppercase?: boolean | undefined;
+    $ellipsis?: boolean | undefined;
+    $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
+} & {
+    $color?: string;
+    $align?: "center";
+    $marginTop?: number;
+    $size?: "h3" | "h4";
+    $truncate?: boolean;
+}, never>;

package/NativeRichMediaPreview/components/NativeRichMediaTitle/styles.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import { Text } from '@pushwoosh/kit-typography';
+export const NativeRichMediaTitle = styled(Text).attrs(({
+  $size
+}) => ({
+  $variant: $size === 'h4' ? 'h4' : 'h3'
+})).withConfig({
+  displayName: "NativeRichMediaTitle",
+  componentId: "sc-1oklc22-0"
+})(["display:block;color:", ";", " ", " ", ""], ({
+  $color
+}) => $color, ({
+  $align
+}) => $align ? `text-align: ${$align};` : '', ({
+  $marginTop
+}) => $marginTop !== undefined ? `margin-top: ${$marginTop}px;` : '', ({
+  $truncate
+}) => $truncate ? `
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  ` : '');

package/NativeRichMediaPreview/helpers.d.ts

@@ -1,9 +1,5 @@
-export declare const PT: {
-    W: number;
-    H: number;
-    SAFE_TOP: number;
-    SAFE_BOTTOM: number;
-};
+import type { NativeRichMediaAction } from './types';
+export declare const EDGE_INSET = 24;
 export declare const SEG_FALLBACK: string[];
 export declare const SECONDARY_LABEL = "rgba(60,60,67,0.6)";
 export declare const TERTIARY_LABEL = "rgba(60,60,67,0.3)";
@@ -14,4 +10,24 @@ export declare function withAlpha(hex: string, a: number): string;
 export declare function mixHex(hex: string, target: string, t: number): string;
 export declare function surfaceBackground(background: string | string[] | undefined, fallbackHex: string): string;
 export declare function asText(value: unknown): string;
+export type NativeRichMediaTextValue = {
+    text: string;
+    color?: string;
+};
+export declare function asTextValue(value: unknown): NativeRichMediaTextValue;
+export type NativeRichMediaButtonValue = {
+    text: {
+        text: string;
+        color: string;
+    };
+    background: string;
+    border: {
+        color: string;
+        radius: number;
+    };
+    action?: NativeRichMediaAction;
+};
+export declare function asButtonValue(value: unknown): NativeRichMediaButtonValue | null;
+export declare function asButtonList(value: unknown): NativeRichMediaButtonValue[];
 export declare function surfaceBaseHex(background: string | string[] | undefined): string | null;
+export declare function clampIndex(index: number, length: number): number;