@pushwoosh/dumb-components 1.1.172 → 1.1.173

package/NativeRichMediaPreview/NativeRichMediaPreview.js

@@ -11,7 +11,6 @@ import { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
 import { resolveLocalization } from './resolveLocalization';
 import { BackdropLayer, ContentFlow, PreviewHost, ScrollLayer, SpinnerLayer } from './styles';
 import { NativeRichMediaBannerView, NativeRichMediaCarouselView, NativeRichMediaFullscreenView, NativeRichMediaInvalidView, NativeRichMediaModalView, NativeRichMediaPipView, NativeRichMediaScratchcardView, NativeRichMediaSheetView, NativeRichMediaSpinwheelView, NativeRichMediaStoriesView, NativeRichMediaVideoView } from './views';
-import { GradientOverlay } from './views/shared/styles';
 function dimsScreen(config) {
   if (!config) {
     return false;
@@ -50,16 +49,12 @@ function justifyFor(config) {
       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 renderCoverBackdrop(url, backgroundColor) {
+  return _jsx(NativeRichMediaCoverImg, {
+    url: url,
+    position: "absolute",
+    inset: true,
+    backgroundColor: backgroundColor
   });
 }
 function renderBackdrop(config, activeIndex) {
@@ -72,7 +67,7 @@ function renderBackdrop(config, activeIndex) {
       {
         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%');
+        return renderCoverBackdrop((_items$clampIndex = items[clampIndex(activeIndex, items.length)]) === null || _items$clampIndex === void 0 ? void 0 : _items$clampIndex.image, '#000');
       }
     default:
       return null;

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/NativeRichMediaContentImg.d.ts

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

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/NativeRichMediaContentImg.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Img } from './styles';
+export function NativeRichMediaContentImg(props) {
+  const {
+    url,
+    margin,
+    borderRadius = 18
+  } = props;
+  return _jsx(Horizontal, {
+    "$margin": margin,
+    "$borderRadius": borderRadius,
+    "$bgColor": Color.FROZEN,
+    "$overflow": "hidden",
+    children: _jsx(Img, {
+      src: url,
+      alt: ""
+    })
+  });
+}

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

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

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/index.js

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

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

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

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const Img = styled.img.withConfig({
+  displayName: "Img",
+  componentId: "sc-1q27duj-0"
+})(["display:block;width:100%;height:auto;"]);

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

@@ -0,0 +1,5 @@
+export type NativeRichMediaContentImgProps = {
+    url?: string;
+    margin?: string;
+    borderRadius?: number;
+};

package/NativeRichMediaPreview/components/NativeRichMediaContentImg/types.js

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

package/NativeRichMediaPreview/views/NativeRichMediaCarouselView/NativeRichMediaCarouselView.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Card, Dot, Dots, GradientOverlay, TextBlock } from './styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, Dot, Dots, TextBlock } from './styles';
 import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
 import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
 import { NativeRichMediaText } from '../../components/NativeRichMediaText';
@@ -20,15 +20,13 @@ export function NativeRichMediaCarouselView(props) {
       url: item.image,
       position: "absolute",
       inset: true
-    }), (title.text || message.text) && _jsxs(_Fragment, {
-      children: [_jsx(GradientOverlay, {}), _jsxs(TextBlock, {
-        children: [title.text && _jsx(NativeRichMediaTitle, {
-          "$color": title.color,
-          children: title.text
-        }), message.text && _jsx(NativeRichMediaText, {
-          "$color": message.color,
-          children: message.text
-        })]
+    }), (title.text || message.text) && _jsxs(TextBlock, {
+      children: [title.text && _jsx(NativeRichMediaTitle, {
+        "$color": title.color,
+        children: title.text
+      }), message.text && _jsx(NativeRichMediaText, {
+        "$color": message.color,
+        children: message.text
       })]
     }), items.length > 1 && _jsx(Dots, {
       children: items.map((_, i) => _jsx(Dot

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

@@ -1,5 +1,4 @@
 export declare const Card: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const GradientOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Dots: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Dot: import("styled-components").StyledComponent<"div", any, {

package/NativeRichMediaPreview/views/NativeRichMediaCarouselView/styles.js

@@ -3,21 +3,17 @@ export const Card = styled.div.withConfig({
   displayName: "Card",
   componentId: "sc-15b2cux-0"
 })(["position:relative;margin:0 12px;height:461px;border-radius:24px;background:#000;overflow:hidden;box-shadow:0 16px 28px rgba(0,0,0,0.28);"]);
-export const GradientOverlay = styled.div.withConfig({
-  displayName: "GradientOverlay",
-  componentId: "sc-15b2cux-1"
-})(["position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.75));"]);
 export const TextBlock = styled.div.withConfig({
   displayName: "TextBlock",
-  componentId: "sc-15b2cux-2"
+  componentId: "sc-15b2cux-1"
 })(["position:absolute;left:18px;right:18px;bottom:36px;"]);
 export const Dots = styled.div.withConfig({
   displayName: "Dots",
-  componentId: "sc-15b2cux-3"
+  componentId: "sc-15b2cux-2"
 })(["position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:0;"]);
 export const Dot = styled.div.withConfig({
   displayName: "Dot",
-  componentId: "sc-15b2cux-4"
+  componentId: "sc-15b2cux-3"
 })(["display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 4.5px;background:", ";"], ({
   $active
 }) => $active ? '#FFF' : 'rgba(255,255,255,0.4)');

package/NativeRichMediaPreview/views/NativeRichMediaModalView/NativeRichMediaModalView.js

@@ -3,7 +3,7 @@ import { Vertical } from '@pushwoosh/kit-helpers';
 import { Card } from './styles';
 import { NativeRichMediaButtonList } from '../../components/NativeRichMediaButtonList';
 import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
-import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
+import { NativeRichMediaContentImg } from '../../components/NativeRichMediaContentImg';
 import { NativeRichMediaText } from '../../components/NativeRichMediaText';
 import { NativeRichMediaTitle } from '../../components/NativeRichMediaTitle';
 import { asButtonList, asTextValue } from '../../helpers';
@@ -17,10 +17,9 @@ export function NativeRichMediaModalView(props) {
   const message = asTextValue(block.message);
   return _jsxs(Card, {
     "$background": block.background,
-    children: [block.image && _jsx(NativeRichMediaCoverImg, {
+    children: [block.image && _jsx(NativeRichMediaContentImg, {
       url: block.image,
       margin: "14px 14px 0",
-      height: 179,
       borderRadius: 18
     }), (title.text || message.text) && _jsxs(Vertical, {
       "$padding": (block.image ? '20px' : '30px') + ' 24px 0',

package/NativeRichMediaPreview/views/NativeRichMediaSheetView/NativeRichMediaSheetView.js

@@ -3,7 +3,7 @@ import { Vertical } from '@pushwoosh/kit-helpers';
 import { Handle, Sheet } from './styles';
 import { NativeRichMediaButtonList } from '../../components/NativeRichMediaButtonList';
 import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
-import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
+import { NativeRichMediaContentImg } from '../../components/NativeRichMediaContentImg';
 import { NativeRichMediaText } from '../../components/NativeRichMediaText';
 import { NativeRichMediaTitle } from '../../components/NativeRichMediaTitle';
 import { asButtonList, asTextValue } from '../../helpers';
@@ -17,10 +17,9 @@ export function NativeRichMediaSheetView(props) {
   const message = asTextValue(block.message);
   return _jsxs(Sheet, {
     "$background": block.background,
-    children: [_jsx(Handle, {}), block.image && _jsx(NativeRichMediaCoverImg, {
+    children: [_jsx(Handle, {}), block.image && _jsx(NativeRichMediaContentImg, {
       url: block.image,
       margin: "26px 14px 0",
-      height: 190,
       borderRadius: 18
     }), (title.text || message.text) && _jsxs(Vertical, {
       "$padding": (block.image ? '16px' : '20px') + ' 24px 0',

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

@@ -1,6 +1,3 @@
-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;

package/NativeRichMediaPreview/views/shared/styles.js

@@ -1,18 +1,12 @@
 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:", ";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"
+  componentId: "sc-x5bn03-0"
 })(["margin:0 ", "px ", "px;"], EDGE_INSET, EDGE_INSET);
 export const Card = styled.div.withConfig({
   displayName: "Card",
-  componentId: "sc-x5bn03-2"
+  componentId: "sc-x5bn03-1"
 })(["position:relative;margin:0 12px;border-radius:24px;box-shadow:0 16px 28px rgba(0,0,0,0.28);padding:", ";background:", ";"], ({
   $padding
 }) => $padding, ({

package/package.json

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