@pushwoosh/dumb-components 1.1.162 → 1.1.164

package/NativeRichMediaPreview/views/NativeRichMediaSheetView/NativeRichMediaSheetView.js

@@ -1,49 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Vertical } from '@pushwoosh/kit-helpers';
 import { Handle, Sheet } from './styles';
-import { NativeRichMediaCardButtons } from '../../components/NativeRichMediaCardButtons';
+import { NativeRichMediaButtonList } from '../../components/NativeRichMediaButtonList';
 import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
 import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
-import { NativeRichMediaPtLabel } from '../../components/NativeRichMediaPtLabel';
-import { SECONDARY_LABEL } from '../../helpers';
-import { TemplateLayer } from '../../styles';
+import { NativeRichMediaText } from '../../components/NativeRichMediaText';
+import { NativeRichMediaTitle } from '../../components/NativeRichMediaTitle';
+import { asButtonList, asTextValue } from '../../helpers';
 export function NativeRichMediaSheetView(props) {
   const {
     block
   } = props;
-  const background = block.background || '#FFFFFF';
-  const hasButtons = (block.buttons || []).length > 0;
-  return _jsx(TemplateLayer, {
-    children: _jsxs(Sheet, {
-      "$background": background,
-      children: [_jsx(Handle, {}), block.image && _jsx(NativeRichMediaCoverImg, {
-        url: block.image,
-        margin: "26px 14px 0",
-        height: 190,
-        borderRadius: 18
-      }), (block.title || block.message) && _jsxs(Vertical, {
-        "$padding": (block.image ? '16px' : '20px') + ' 24px 0',
-        "$gap": 6,
-        children: [block.title && _jsx(NativeRichMediaPtLabel, {
-          value: block.title,
-          size: 22,
-          weight: 800,
-          fallbackColor: "#000000"
-        }), block.message && _jsx(NativeRichMediaPtLabel, {
-          value: block.message,
-          size: 15,
-          weight: 400,
-          fallbackColor: SECONDARY_LABEL,
-          align: "left",
-          lineHeight: "20px"
-        })]
-      }), hasButtons && _jsx(NativeRichMediaCardButtons, {
-        buttons: block.buttons,
-        "$padding": "24px 20px 0"
-      }), block.showClose !== false && _jsx(NativeRichMediaCloseChip, {
-        top: 16,
-        right: 16
+  const buttons = asButtonList(block.buttons);
+  const hasButtons = buttons.length > 0;
+  const title = asTextValue(block.title);
+  const message = asTextValue(block.message);
+  return _jsxs(Sheet, {
+    "$background": block.background,
+    children: [_jsx(Handle, {}), block.image && _jsx(NativeRichMediaCoverImg, {
+      url: block.image,
+      margin: "26px 14px 0",
+      height: 190,
+      borderRadius: 18
+    }), (title.text || message.text) && _jsxs(Vertical, {
+      "$padding": (block.image ? '16px' : '20px') + ' 24px 0',
+      "$gap": 4,
+      children: [title.text && _jsx(NativeRichMediaTitle, {
+        "$color": title.color,
+        children: title.text
+      }), message.text && _jsx(NativeRichMediaText, {
+        "$color": message.color,
+        children: message.text
       })]
-    })
+    }), hasButtons && _jsx(NativeRichMediaButtonList, {
+      buttons: buttons,
+      "$padding": "24px 20px 0"
+    }), block.showClose && _jsx(NativeRichMediaCloseChip, {
+      top: 16,
+      right: 16
+    })]
   });
 }

package/NativeRichMediaPreview/views/NativeRichMediaSheetView/styles.js

@@ -3,7 +3,7 @@ import { TERTIARY_LABEL } from '../../helpers';
 export const Sheet = styled.div.withConfig({
   displayName: "Sheet",
   componentId: "sc-17o8tnc-0"
-})(["position:absolute;left:0;right:0;bottom:0;border-radius:28px 28px 0 0;box-shadow:0 -16px 28px rgba(0,0,0,0.28);padding-bottom:50px;background:", ";"], ({
+})(["position:relative;border-radius:28px 28px 0 0;box-shadow:0 -16px 28px rgba(0,0,0,0.28);padding-bottom:50px;background:", ";"], ({
   $background
 }) => $background);
 export const Handle = styled.div.withConfig({

package/NativeRichMediaPreview/views/NativeRichMediaSpinwheelView/NativeRichMediaSpinwheelView.js

@@ -2,62 +2,60 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { Card, Hub, Pointer, Ring, SegmentLabel, Tick, Wheel } from './styles';
 import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
-import { NativeRichMediaPtLabel } from '../../components/NativeRichMediaPtLabel';
-import { SEG_FALLBACK, asText, contrastOn, surfaceBackground, surfaceBaseHex, withAlpha } from '../../helpers';
-import { TemplateLayer } from '../../styles';
+import { NativeRichMediaText } from '../../components/NativeRichMediaText';
+import { NativeRichMediaTitle } from '../../components/NativeRichMediaTitle';
+import { SEG_FALLBACK, asButtonValue, asTextValue, surfaceBackground } from '../../helpers';
 export function NativeRichMediaSpinwheelView(props) {
   const {
     block
   } = props;
-  const baseHex = surfaceBaseHex(block.background) || '#FFFFFF';
-  const cardText = contrastOn(baseHex);
   const segs = block.segments;
   const hasSegments = segs.length > 0;
   const per = hasSegments ? 360 / segs.length : 0;
   const fills = segs.map((s, i) => s.color || SEG_FALLBACK[i % SEG_FALLBACK.length]);
   const stops = fills.map((c, i) => `${c} ${i * per}deg ${(i + 1) * per}deg`).join(', ');
-  return _jsx(TemplateLayer, {
-    children: _jsxs(Card, {
-      "$background": surfaceBackground(block.background, '#FFFFFF'),
-      children: [block.title && _jsx(NativeRichMediaPtLabel, {
-        value: block.title,
-        size: 24,
-        weight: 800,
-        fallbackColor: cardText,
-        align: "center"
-      }), block.message && _jsx(NativeRichMediaPtLabel, {
-        value: block.message,
-        size: 15,
-        weight: 400,
-        fallbackColor: withAlpha(cardText, 0.72),
-        align: "center",
-        marginTop: 14,
-        lineHeight: "20px"
-      }), hasSegments && _jsxs(Wheel, {
-        children: [_jsx(Ring, {
-          "$stops": stops,
-          children: segs.map((s, i) => {
-            const theta = -90 + (i + 0.5) * per;
-            return (
-              // eslint-disable-next-line react/no-array-index-key
-              _jsxs(Fragment, {
-                children: [_jsx(Tick, {
-                  "$rotate": i * per - 180
-                }), _jsx(SegmentLabel, {
-                  "$color": s.textColor || contrastOn(fills[i]),
-                  "$rotate": theta,
-                  children: asText(s.text)
-                })]
-              }, `spin-segment-${i}`)
-            );
-          })
-        }), _jsx(Pointer, {}), _jsx(Hub, {
-          children: asText(block.spinButton) || 'SPIN'
-        })]
-      }), block.showClose !== false && _jsx(NativeRichMediaCloseChip, {
-        top: 16,
-        right: 16
+  const title = asTextValue(block.title);
+  const message = asTextValue(block.message);
+  const spinButton = asButtonValue(block.spinButton);
+  return _jsxs(Card, {
+    "$background": surfaceBackground(block.background, '#FFFFFF'),
+    children: [title.text && _jsx(NativeRichMediaTitle, {
+      "$color": title.color,
+      "$align": "center",
+      children: title.text
+    }), message.text && _jsx(NativeRichMediaText, {
+      "$color": message.color,
+      "$marginTop": 4,
+      "$align": "center",
+      children: message.text
+    }), hasSegments && _jsxs(Wheel, {
+      children: [_jsx(Ring, {
+        "$stops": stops,
+        children: segs.map((s, i) => {
+          const theta = -90 + (i + 0.5) * per;
+          const label = asTextValue(s.message);
+          return (
+            // eslint-disable-next-line react/no-array-index-key
+            _jsxs(Fragment, {
+              children: [_jsx(Tick, {
+                "$rotate": i * per - 180
+              }), _jsx(SegmentLabel, {
+                "$color": label.color,
+                "$rotate": theta,
+                children: label.text
+              })]
+            }, `spin-segment-${i}`)
+          );
+        })
+      }), _jsx(Pointer, {}), _jsx(Hub, {
+        "$background": spinButton === null || spinButton === void 0 ? void 0 : spinButton.background,
+        "$color": spinButton === null || spinButton === void 0 ? void 0 : spinButton.text.color,
+        "$borderColor": spinButton === null || spinButton === void 0 ? void 0 : spinButton.border.color,
+        children: (spinButton === null || spinButton === void 0 ? void 0 : spinButton.text.text) || 'SPIN'
       })]
-    })
+    }), block.showClose && _jsx(NativeRichMediaCloseChip, {
+      top: 16,
+      right: 16
+    })]
   });
 }

package/NativeRichMediaPreview/views/NativeRichMediaSpinwheelView/styles.d.ts

@@ -11,9 +11,17 @@ export declare const Ring: import("styled-components").StyledComponent<"div", an
 export declare const Tick: import("styled-components").StyledComponent<"div", any, {
     $rotate: number;
 }, never>;
-export declare const SegmentLabel: import("styled-components").StyledComponent<"div", any, {
-    $color: string;
+export declare const SegmentLabel: import("styled-components").StyledComponent<typeof import("@pushwoosh/kit-typography").Footnote, any, {
+    $color?: string;
+    $align?: "center";
+    $clamp?: number;
+    $marginTop?: number;
+} & {
     $rotate: number;
 }, never>;
 export declare const Pointer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Hub: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Hub: import("styled-components").StyledComponent<"div", any, {
+    $background?: string;
+    $color?: string;
+    $borderColor?: string;
+}, never>;

package/NativeRichMediaPreview/views/NativeRichMediaSpinwheelView/styles.js

@@ -1,4 +1,6 @@
 import styled from 'styled-components';
+import { FontWeight } from '@pushwoosh/kit-constants';
+import { NativeRichMediaText } from '../../components/NativeRichMediaText';
 import { Card as SharedCard } from '../shared/styles';
 export const Card = styled(SharedCard).attrs({
   $padding: '28px 24px 24px'
@@ -9,32 +11,36 @@ export const Card = styled(SharedCard).attrs({
 export const Wheel = styled.div.withConfig({
   displayName: "Wheel",
   componentId: "sc-1tz3wky-1"
-})(["position:relative;margin-top:14px;width:289px;height:289px;"]);
+})(["position:relative;margin:14px auto 0;width:289px;max-width:100%;aspect-ratio:1;container-type:inline-size;"]);
 export const Ring = styled.div.withConfig({
   displayName: "Ring",
   componentId: "sc-1tz3wky-2"
-})(["position:absolute;inset:30px;border-radius:50%;border:1px solid rgba(255,255,255,0.35);background:", ";"], ({
+})(["position:absolute;inset:10.4cqw;border-radius:50%;border:1px solid rgba(255,255,255,0.35);background:", ";"], ({
   $stops
 }) => `conic-gradient(from 0deg, ${$stops})`);
 export const Tick = styled.div.withConfig({
   displayName: "Tick",
   componentId: "sc-1tz3wky-3"
-})(["position:absolute;left:50%;top:50%;width:1px;height:114.5px;background:rgba(255,255,255,0.35);transform-origin:0 0;transform:", ";"], ({
+})(["position:absolute;left:50%;top:50%;width:1px;height:39.6cqw;background:rgba(255,255,255,0.35);transform-origin:0 0;transform:", ";"], ({
   $rotate
 }) => `rotate(${$rotate}deg)`);
-export const SegmentLabel = styled.div.withConfig({
+export const SegmentLabel = styled(NativeRichMediaText).withConfig({
   displayName: "SegmentLabel",
   componentId: "sc-1tz3wky-4"
-})(["position:absolute;left:50%;top:50%;font-size:14px;font-weight:700;white-space:nowrap;max-width:86px;overflow:hidden;text-overflow:ellipsis;color:", ";transform:", ";"], ({
-  $color
-}) => $color, ({
+})(["position:absolute;left:50%;top:50%;font-size:4.2cqw;line-height:1.3;font-weight:", ";white-space:nowrap;max-width:29.8cqw;overflow:hidden;text-overflow:ellipsis;transform:", ";"], FontWeight.BOLD, ({
   $rotate
-}) => `translate(-50%,-50%) rotate(${$rotate}deg) translateX(63px)`);
+}) => `translate(-50%,-50%) rotate(${$rotate}deg) translateX(21.8cqw)`);
 export const Pointer = styled.div.withConfig({
   displayName: "Pointer",
   componentId: "sc-1tz3wky-5"
-})(["position:absolute;top:4px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:26px solid #0F0F0F;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.3));z-index:3;"]);
+})(["position:absolute;top:1.4cqw;left:50%;transform:translateX(-50%);width:0;height:0;border-left:4.5cqw solid transparent;border-right:4.5cqw solid transparent;border-top:9cqw solid #0F0F0F;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.3));z-index:3;"]);
 export const Hub = styled.div.withConfig({
   displayName: "Hub",
   componentId: "sc-1tz3wky-6"
-})(["position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:#FFF;color:#000;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;box-shadow:0 3px 8px rgba(0,0,0,0.25);z-index:2;white-space:nowrap;overflow:hidden;padding:0 6px;"]);
+})(["position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:24.9cqw;height:24.9cqw;border-radius:50%;background:", ";color:", ";", " display:flex;align-items:center;justify-content:center;font-size:4.9cqw;font-weight:", ";box-shadow:0 3px 8px rgba(0,0,0,0.25);z-index:2;white-space:nowrap;overflow:hidden;padding:0 6px;user-select:none;cursor:pointer;"], ({
+  $background
+}) => $background || '#FFF', ({
+  $color
+}) => $color || '#000', ({
+  $borderColor
+}) => $borderColor ? `border: 2px solid ${$borderColor};` : '', FontWeight.BOLD);

package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/NativeRichMediaStoriesView.js

@@ -1,50 +1,41 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { GradientOverlay, ProgressFill, ProgressRow, ProgressTrack, SubtitleText, TextBlock, TitleText } from './styles';
-import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
-import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
-import { PT, asText } from '../../helpers';
-import { ButtonRow, TemplateLayer } from '../../styles';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ProgressFill, ProgressRow, ProgressTrack } from './styles';
+import { NativeRichMediaButtonList } from '../../components/NativeRichMediaButtonList';
+import { NativeRichMediaText } from '../../components/NativeRichMediaText';
+import { NativeRichMediaTitle } from '../../components/NativeRichMediaTitle';
+import { asButtonList, asTextValue, clampIndex } from '../../helpers';
+import { TextBlock } from '../shared/styles';
 export function NativeRichMediaStoriesView(props) {
   const {
     block,
-    activeIndex,
-    onNavigate
+    activeIndex
   } = props;
   const items = block.items;
-  const idx = Math.max(0, Math.min(activeIndex, items.length - 1));
+  const idx = clampIndex(activeIndex, items.length);
   const item = items[idx] || {};
-  return _jsxs(TemplateLayer, {
-    children: [_jsx(NativeRichMediaCoverImg, {
-      url: item.image,
-      position: "absolute",
-      inset: true,
-      backgroundColor: "#000"
-    }), _jsx(GradientOverlay, {}), _jsx(ProgressRow, {
-      "$top": PT.SAFE_TOP + 14,
+  const title = asTextValue(item.title);
+  const message = asTextValue(item.message);
+  const buttons = asButtonList(item.buttons);
+  return _jsxs(_Fragment, {
+    children: [_jsx(ProgressRow, {
       children: items.map((_, i) => _jsxs(ProgressTrack
       // eslint-disable-next-line react/no-array-index-key
       , {
-        onClick: () => onNavigate(i),
         children: [i < idx && _jsx(ProgressFill, {
           "$full": true
         }), i === idx && _jsx(ProgressFill, {})]
       }, `stories-bar-${i}`))
-    }), block.showClose !== false && _jsx(NativeRichMediaCloseChip, {
-      top: PT.SAFE_TOP + 14 + 3 + 10,
-      right: 16
     }), _jsxs(TextBlock, {
-      "$bottom": PT.SAFE_BOTTOM + 24,
-      children: [item.title && _jsx(TitleText, {
-        children: asText(item.title)
-      }), item.subtitle && _jsx(SubtitleText, {
-        children: asText(item.subtitle)
-      }), item.button && item.url && _jsx(ButtonRow, {
-        "$marginTop": 16,
-        "$borderRadius": 26,
-        "$background": "#FFF",
-        "$color": "#0F0F0F",
-        "$boxShadow": "0 6px 14px rgba(0,0,0,0.28)",
-        children: asText(item.button)
+      children: [title.text && _jsx(NativeRichMediaTitle, {
+        "$color": title.color,
+        children: title.text
+      }), message.text && _jsx(NativeRichMediaText, {
+        "$color": message.color,
+        "$marginTop": 4,
+        children: message.text
+      }), buttons.length > 0 && _jsx(NativeRichMediaButtonList, {
+        "$margin": "16px 0 0",
+        buttons: buttons
       })]
     })]
   });

package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/styles.d.ts

@@ -1,11 +1,5 @@
-export { TextBlock } from '../shared/styles';
-export declare const GradientOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ProgressRow: import("styled-components").StyledComponent<"div", any, {
-    $top: number;
-}, never>;
+export declare const ProgressRow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ProgressTrack: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ProgressFill: import("styled-components").StyledComponent<"div", any, {
     $full?: boolean;
 }, never>;
-export declare const TitleText: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SubtitleText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/styles.js

@@ -1,30 +1,16 @@
 import styled from 'styled-components';
-export { TextBlock } from '../shared/styles';
-export const GradientOverlay = styled.div.withConfig({
-  displayName: "GradientOverlay",
-  componentId: "sc-qgnxqx-0"
-})(["position:absolute;left:0;right:0;bottom:0;top:55%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.75));"]);
+import { EDGE_INSET } from '../../helpers';
 export const ProgressRow = styled.div.withConfig({
   displayName: "ProgressRow",
-  componentId: "sc-qgnxqx-1"
-})(["position:absolute;left:12px;right:12px;display:flex;gap:4px;top:", "px;"], ({
-  $top
-}) => $top);
+  componentId: "sc-qgnxqx-0"
+})(["display:flex;gap:4px;margin:", "px 12px 0;"], EDGE_INSET);
 export const ProgressTrack = styled.div.withConfig({
   displayName: "ProgressTrack",
-  componentId: "sc-qgnxqx-2"
-})(["flex:1;height:3px;border-radius:1.5px;background:rgba(255,255,255,0.3);overflow:hidden;cursor:pointer;"]);
+  componentId: "sc-qgnxqx-1"
+})(["flex:1;height:3px;border-radius:1.5px;background:rgba(255,255,255,0.3);overflow:hidden;"]);
 export const ProgressFill = styled.div.withConfig({
   displayName: "ProgressFill",
-  componentId: "sc-qgnxqx-3"
+  componentId: "sc-qgnxqx-2"
 })(["height:100%;background:#FFF;width:", ";"], ({
   $full
-}) => $full ? '100%' : '45%');
-export const TitleText = styled.div.withConfig({
-  displayName: "TitleText",
-  componentId: "sc-qgnxqx-4"
-})(["font-size:23px;font-weight:700;color:#FFF;line-height:1.25;"]);
-export const SubtitleText = styled.div.withConfig({
-  displayName: "SubtitleText",
-  componentId: "sc-qgnxqx-5"
-})(["font-size:14px;color:rgba(255,255,255,0.85);margin-top:6px;"]);
+}) => $full ? '100%' : '45%');

package/NativeRichMediaPreview/views/NativeRichMediaStoriesView/types.d.ts

@@ -2,5 +2,4 @@ import type { NativeRichMediaStoriesBlock } from '../../types';
 export type NativeRichMediaStoriesViewProps = {
     block: NativeRichMediaStoriesBlock;
     activeIndex: number;
-    onNavigate: (index: number) => void;
 };

package/NativeRichMediaPreview/views/NativeRichMediaVideoView/NativeRichMediaVideoView.js

@@ -1,49 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { GradientOverlay, TextBlock } from './styles';
-import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
-import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
-import { NativeRichMediaMuteChip } from '../../components/NativeRichMediaMuteChip';
-import { NativeRichMediaPtLabel } from '../../components/NativeRichMediaPtLabel';
-import { PT, asText } from '../../helpers';
-import { ButtonRow, TemplateLayer } from '../../styles';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { NativeRichMediaButtonList } from '../../components/NativeRichMediaButtonList';
+import { NativeRichMediaText } from '../../components/NativeRichMediaText';
+import { NativeRichMediaTitle } from '../../components/NativeRichMediaTitle';
+import { asButtonList, asTextValue } from '../../helpers';
+import { TextBlock } from '../shared/styles';
 export function NativeRichMediaVideoView(props) {
   const {
     block
   } = props;
-  return _jsxs(TemplateLayer, {
-    children: [_jsx(NativeRichMediaCoverImg, {
-      url: block.poster,
-      position: "absolute",
-      inset: true,
-      backgroundColor: "#000"
-    }), _jsx(GradientOverlay, {}), _jsxs(TextBlock, {
-      "$bottom": PT.SAFE_BOTTOM + 28,
-      children: [block.title && _jsx(NativeRichMediaPtLabel, {
-        value: block.title,
-        size: 28,
-        weight: 700,
-        fallbackColor: "#FFFFFF"
-      }), block.message && _jsx(NativeRichMediaPtLabel, {
-        value: block.message,
-        size: 16,
-        weight: 400,
-        fallbackColor: "rgba(255,255,255,0.85)",
-        align: "left",
-        marginTop: block.title ? 8 : undefined
-      }), block.button && block.action && _jsx(ButtonRow, {
-        "$marginTop": 20,
-        "$borderRadius": 14,
-        "$background": "#FFF",
-        "$color": "#0F0F0F",
-        children: asText(block.button)
+  const title = asTextValue(block.title);
+  const message = asTextValue(block.message);
+  const buttons = asButtonList(block.buttons);
+  return _jsx(_Fragment, {
+    children: _jsxs(TextBlock, {
+      children: [title.text && _jsx(NativeRichMediaTitle, {
+        "$color": title.color,
+        children: title.text
+      }), message.text && _jsx(NativeRichMediaText, {
+        "$color": message.color,
+        "$marginTop": title.text ? 4 : undefined,
+        children: message.text
+      }), buttons.length > 0 && _jsx(NativeRichMediaButtonList, {
+        "$margin": "20px 0 0",
+        buttons: buttons
       })]
-    }), _jsx(NativeRichMediaMuteChip, {
-      muted: block.muted,
-      top: PT.SAFE_TOP + 12,
-      left: 16
-    }), block.showClose !== false && _jsx(NativeRichMediaCloseChip, {
-      top: PT.SAFE_TOP + 12,
-      right: 16
-    })]
+    })
   });
 }

package/NativeRichMediaPreview/views/shared/styles.d.ts

@@ -1,7 +1,7 @@
-export declare const GradientOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TextBlock: import("styled-components").StyledComponent<"div", any, {
-    $bottom: number;
+export declare const GradientOverlay: import("styled-components").StyledComponent<"div", any, {
+    $topOffset?: string;
 }, never>;
+export declare const TextBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Card: import("styled-components").StyledComponent<"div", any, {
     $background: string;
     $padding: string;

package/NativeRichMediaPreview/views/shared/styles.js

@@ -1,18 +1,19 @@
 import styled from 'styled-components';
+import { EDGE_INSET } from '../../helpers';
 export const GradientOverlay = styled.div.withConfig({
   displayName: "GradientOverlay",
   componentId: "sc-x5bn03-0"
-})(["position:absolute;left:0;right:0;bottom:0;top:45%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.75));"]);
+})(["position:absolute;left:0;right:0;bottom:0;top:", ";background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.75));"], ({
+  $topOffset
+}) => $topOffset ?? '45%');
 export const TextBlock = styled.div.withConfig({
   displayName: "TextBlock",
   componentId: "sc-x5bn03-1"
-})(["position:absolute;left:24px;right:24px;bottom:", "px;"], ({
-  $bottom
-}) => $bottom);
+})(["margin:0 ", "px ", "px;"], EDGE_INSET, EDGE_INSET);
 export const Card = styled.div.withConfig({
   displayName: "Card",
   componentId: "sc-x5bn03-2"
-})(["position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:337px;border-radius:24px;box-shadow:0 16px 28px rgba(0,0,0,0.28);padding:", ";background:", ";"], ({
+})(["position:relative;margin:0 12px;border-radius:24px;box-shadow:0 16px 28px rgba(0,0,0,0.28);padding:", ";background:", ";"], ({
   $padding
 }) => $padding, ({
   $background

package/index.d.ts

@@ -44,7 +44,7 @@ export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip, type ChipProps, type ChipVariant } from './Chip';
 export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
 export { NativeRichMediaPreview, parseNativeRichMediaConfig, NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './NativeRichMediaPreview';
-export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaCarouselItem, NativeRichMediaStoriesBlock, NativeRichMediaStoryItem, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaScratchcardCover, NativeRichMediaSpinwheelBlock, NativeRichMediaSpinwheelSegment, NativeRichMediaPreviewProps, } from './NativeRichMediaPreview';
+export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, } from './NativeRichMediaPreview';
 export { RichMessageEditor, RichMessageViewer, type DynamicContent, } from './RichMessageEditor';
 export { FrequencyCappingEdit, FrequencyCappingReadonly, FrequencyCappingInApps, type LocalCapping, type CappingInAppBase, } from './FrequencyCapping';
 export { SendRateEdit, SendRateReadonly, type SendRateBase, type SendRateEditProps, type SendRateReadonlyProps, } from './SendRate';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.162",
+  "version": "1.1.164",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

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

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

package/NativeRichMediaPreview/components/NativeRichMediaCardButtons/NativeRichMediaCardButtons.js

@@ -1,29 +0,0 @@
-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

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

package/NativeRichMediaPreview/components/NativeRichMediaCardButtons/index.js

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

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

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

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

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