@pushwoosh/dumb-components 1.1.162 → 1.1.164

package/NativeRichMediaPreview/views/NativeRichMediaCarouselView/styles.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 export const Card = styled.div.withConfig({
   displayName: "Card",
   componentId: "sc-15b2cux-0"
-})(["position:absolute;left:22px;right:22px;top:50%;transform:translateY(-50%);height:461px;border-radius:24px;background:#000;overflow:hidden;box-shadow:0 16px 28px rgba(0,0,0,0.28);"]);
+})(["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"
@@ -11,21 +11,13 @@ export const TextBlock = styled.div.withConfig({
   displayName: "TextBlock",
   componentId: "sc-15b2cux-2"
 })(["position:absolute;left:18px;right:18px;bottom:36px;"]);
-export const TitleText = styled.div.withConfig({
-  displayName: "TitleText",
-  componentId: "sc-15b2cux-3"
-})(["font-size:20px;font-weight:700;color:#FFF;line-height:1.25;"]);
-export const SubtitleText = styled.div.withConfig({
-  displayName: "SubtitleText",
-  componentId: "sc-15b2cux-4"
-})(["font-size:14px;color:rgba(255,255,255,0.85);margin-top:3px;"]);
 export const Dots = styled.div.withConfig({
   displayName: "Dots",
-  componentId: "sc-15b2cux-5"
+  componentId: "sc-15b2cux-3"
 })(["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-6"
-})(["display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 4.5px;cursor:pointer;background:", ";"], ({
+  componentId: "sc-15b2cux-4"
+})(["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/NativeRichMediaCarouselView/types.d.ts

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

package/NativeRichMediaPreview/views/NativeRichMediaFullscreenView/NativeRichMediaFullscreenView.js

@@ -1,42 +1,33 @@
-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 { NativeRichMediaOverlayButtons } from '../../components/NativeRichMediaOverlayButtons';
-import { NativeRichMediaPtLabel } from '../../components/NativeRichMediaPtLabel';
-import { PT } from '../../helpers';
-import { TemplateLayer } from '../../styles';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Vertical } from '@pushwoosh/kit-helpers';
+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 NativeRichMediaFullscreenView(props) {
   const {
     block
   } = props;
-  const hasButtons = (block.buttons || []).length > 0;
-  return _jsxs(TemplateLayer, {
-    children: [_jsx(NativeRichMediaCoverImg, {
-      url: block.image,
-      position: "absolute",
-      inset: true,
-      backgroundColor: "#1A1A1E"
-    }), _jsx(GradientOverlay, {}), _jsxs(TextBlock, {
-      "$bottom": PT.SAFE_BOTTOM + 28,
-      children: [block.title && _jsx(NativeRichMediaPtLabel, {
-        value: block.title,
-        size: 30,
-        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
-      }), hasButtons && _jsx(NativeRichMediaOverlayButtons, {
-        buttons: block.buttons
+  const buttons = asButtonList(block.buttons);
+  const hasButtons = buttons.length > 0;
+  const title = asTextValue(block.title);
+  const message = asTextValue(block.message);
+  return _jsx(_Fragment, {
+    children: _jsxs(TextBlock, {
+      children: [_jsxs(Vertical, {
+        "$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, {
+        "$margin": "16px 0 0",
+        buttons: buttons
       })]
-    }), block.showClose !== false && _jsx(NativeRichMediaCloseChip, {
-      top: PT.SAFE_TOP + 12,
-      right: 16
-    })]
+    })
   });
 }

package/NativeRichMediaPreview/views/NativeRichMediaInvalidView/NativeRichMediaInvalidView.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Placeholder } from './styles';
+import { Placeholder, PlaceholderText } from './styles';
 import { Lang } from '../../polyglot';
 export function NativeRichMediaInvalidView() {
   return _jsx(Placeholder, {
-    children: _jsx(Lang, {
-      message: "DUMB.NATIVE_RICH_MEDIA_PREVIEW.INVALID_CONFIG"
+    children: _jsx(PlaceholderText, {
+      children: _jsx(Lang, {
+        message: "DUMB.NATIVE_RICH_MEDIA_PREVIEW.INVALID_CONFIG"
+      })
     })
   });
 }

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

@@ -1 +1,10 @@
 export declare const Placeholder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PlaceholderText: import("styled-components").StyledComponent<typeof import("@pushwoosh/kit-typography").Footnote, any, {
+    $color?: string;
+    $align?: "center";
+    $clamp?: number;
+    $marginTop?: number;
+} & {
+    $color: string;
+    $align: string;
+}, "$color" | "$align">;

package/NativeRichMediaPreview/views/NativeRichMediaInvalidView/styles.js

@@ -1,6 +1,15 @@
 import styled from 'styled-components';
+import { FontWeight } from '@pushwoosh/kit-constants';
+import { NativeRichMediaText } from '../../components/NativeRichMediaText';
 import { SECONDARY_LABEL } from '../../helpers';
 export const Placeholder = styled.div.withConfig({
   displayName: "Placeholder",
   componentId: "sc-nwhsvi-0"
-})(["position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;font-weight:500;color:", ";background:rgba(118,118,128,0.12);border:1px solid rgba(118,118,128,0.24);padding:22px 16px;"], SECONDARY_LABEL);
+})(["position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:rgba(118,118,128,0.12);border:1px solid rgba(118,118,128,0.24);padding:22px 16px;"]);
+export const PlaceholderText = styled(NativeRichMediaText).attrs({
+  $color: SECONDARY_LABEL,
+  $align: 'center'
+}).withConfig({
+  displayName: "PlaceholderText",
+  componentId: "sc-nwhsvi-1"
+})(["font-weight:", ";"], FontWeight.MEDIUM);

package/NativeRichMediaPreview/views/NativeRichMediaModalView/NativeRichMediaModalView.js

@@ -1,50 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Vertical } from '@pushwoosh/kit-helpers';
 import { Card } 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 NativeRichMediaModalView(props) {
   const {
     block
   } = props;
-  const background = block.background || '#FFFFFF';
-  const hasButtons = (block.buttons || []).length > 0;
-  return _jsx(TemplateLayer, {
-    children: _jsxs(Card, {
-      "$background": background,
-      children: [block.image && _jsx(NativeRichMediaCoverImg, {
-        url: block.image,
-        margin: "14px 14px 0",
-        height: 179,
-        borderRadius: 18
-      }), (block.title || block.message) && _jsxs(Vertical, {
-        "$padding": (block.image ? '20px' : '30px') + ' 24px 0',
-        "$gap": 8,
-        children: [block.title && _jsx(NativeRichMediaPtLabel, {
-          value: block.title,
-          size: 24,
-          weight: 800,
-          fallbackColor: "#000000",
-          align: "center"
-        }), block.message && _jsx(NativeRichMediaPtLabel, {
-          value: block.message,
-          size: 15,
-          weight: 400,
-          fallbackColor: SECONDARY_LABEL,
-          align: "center",
-          lineHeight: "21.5px"
-        })]
-      }), _jsx(NativeRichMediaCardButtons, {
-        buttons: block.buttons,
-        "$padding": hasButtons ? '24px 20px 20px' : '0 0 20px'
-      }), block.showClose !== false && _jsx(NativeRichMediaCloseChip, {
-        top: 20,
-        right: 20
+  const buttons = asButtonList(block.buttons);
+  const hasButtons = buttons.length > 0;
+  const title = asTextValue(block.title);
+  const message = asTextValue(block.message);
+  return _jsxs(Card, {
+    "$background": block.background,
+    children: [block.image && _jsx(NativeRichMediaCoverImg, {
+      url: block.image,
+      margin: "14px 14px 0",
+      height: 179,
+      borderRadius: 18
+    }), (title.text || message.text) && _jsxs(Vertical, {
+      "$padding": (block.image ? '20px' : '30px') + ' 24px 0',
+      "$gap": 4,
+      children: [title.text && _jsx(NativeRichMediaTitle, {
+        "$color": title.color,
+        "$align": "center",
+        children: title.text
+      }), message.text && _jsx(NativeRichMediaText, {
+        "$color": message.color,
+        "$align": "center",
+        children: message.text
       })]
-    })
+    }), _jsx(NativeRichMediaButtonList, {
+      buttons: buttons,
+      "$padding": hasButtons ? '24px 20px 20px' : '0 0 20px'
+    }), block.showClose && _jsx(NativeRichMediaCloseChip, {
+      top: 20,
+      right: 20
+    })]
   });
 }

package/NativeRichMediaPreview/views/NativeRichMediaPipView/NativeRichMediaPipView.js

@@ -4,48 +4,43 @@ import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseC
 import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
 import { NativeRichMediaExpandChip } from '../../components/NativeRichMediaExpandChip';
 import { NativeRichMediaMuteChip } from '../../components/NativeRichMediaMuteChip';
-import { PT } from '../../helpers';
-import { TemplateLayer } from '../../styles';
+import { EDGE_INSET } from '../../helpers';
 export function NativeRichMediaPipView(props) {
   const {
     block
   } = props;
-  const raw = Number.isFinite(block.width) ? block.width : 32;
-  const frac = Math.min(Math.max(raw > 1 ? raw / 100 : raw, 0.15), 0.7);
-  const w = Math.round(PT.W * frac);
+  const rawWidth = Number.isFinite(block.width) ? block.width : 32;
+  const widthPercent = Math.min(Math.max(rawWidth <= 1 ? rawWidth * 100 : rawWidth, 15), 70);
   const aspectRatio = Number.isFinite(block.aspectRatio) ? block.aspectRatio : 0.5625;
-  const h = Math.max(0, Math.round(w * aspectRatio));
-  const cornerRadius = Number.isFinite(block.cornerRadius) ? block.cornerRadius : 16;
-  const r = Math.min(cornerRadius, h / 2);
+  const cornerRadius = Number.isFinite(block.borderRadius) ? block.borderRadius : 16;
   const position = block.position || 'bottom-right';
   const isTop = position.includes('top');
   const isLeft = position.includes('left');
-  return _jsx(TemplateLayer, {
-    children: _jsxs(Frame, {
-      "$width": w,
-      "$height": h,
-      "$radius": r,
-      "$top": isTop ? PT.SAFE_TOP + 14 : undefined,
-      "$bottom": isTop ? undefined : PT.SAFE_BOTTOM + 14,
-      "$left": isLeft ? 14 : undefined,
-      "$right": isLeft ? undefined : 14,
-      children: [block.poster && _jsx(NativeRichMediaCoverImg, {
-        url: block.poster,
-        position: "absolute",
-        inset: true
-      }), block.showClose !== false && _jsx(NativeRichMediaCloseChip, {
-        top: 6,
-        right: 6,
-        small: true
-      }), _jsx(NativeRichMediaMuteChip, {
-        muted: block.muted,
-        small: true,
-        bottom: 6,
-        right: 6
-      }), _jsx(NativeRichMediaExpandChip, {
-        bottom: 6,
-        left: 6
-      })]
-    })
+  return _jsxs(Frame, {
+    "$widthPercent": widthPercent,
+    "$aspectRatio": aspectRatio,
+    "$radius": cornerRadius,
+    "$alignSelf": isLeft ? 'flex-start' : 'flex-end',
+    "$marginTop": isTop ? EDGE_INSET : undefined,
+    "$marginBottom": isTop ? undefined : EDGE_INSET,
+    "$marginLeft": isLeft ? EDGE_INSET : undefined,
+    "$marginRight": isLeft ? undefined : EDGE_INSET,
+    children: [block.poster && _jsx(NativeRichMediaCoverImg, {
+      url: block.poster,
+      position: "absolute",
+      inset: true
+    }), block.showClose && _jsx(NativeRichMediaCloseChip, {
+      top: 6,
+      right: 6,
+      small: true
+    }), _jsx(NativeRichMediaMuteChip, {
+      muted: block.muted,
+      small: true,
+      bottom: 6,
+      right: 6
+    }), _jsx(NativeRichMediaExpandChip, {
+      bottom: 6,
+      left: 6
+    })]
   });
 }

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

@@ -1,9 +1,10 @@
 export declare const Frame: import("styled-components").StyledComponent<"div", any, {
-    $width: number;
-    $height: number;
+    $widthPercent: number;
+    $aspectRatio: number;
     $radius: number;
-    $top?: number;
-    $bottom?: number;
-    $left?: number;
-    $right?: number;
+    $alignSelf: "flex-start" | "flex-end";
+    $marginTop?: number;
+    $marginBottom?: number;
+    $marginLeft?: number;
+    $marginRight?: number;
 }, never>;

package/NativeRichMediaPreview/views/NativeRichMediaPipView/styles.js

@@ -2,18 +2,20 @@ import styled from 'styled-components';
 export const Frame = styled.div.withConfig({
   displayName: "Frame",
   componentId: "sc-hjtwid-0"
-})(["position:absolute;overflow:hidden;background:#000;box-shadow:0 16px 28px rgba(0,0,0,0.28);width:", "px;height:", "px;border-radius:", "px;", " ", " ", " ", ""], ({
-  $width
-}) => $width, ({
-  $height
-}) => $height, ({
+})(["position:relative;overflow:hidden;background:#000;box-shadow:0 16px 28px rgba(0,0,0,0.28);width:", "%;aspect-ratio:1 / ", ";border-radius:", "px;align-self:", ";", " ", " ", " ", ""], ({
+  $widthPercent
+}) => $widthPercent, ({
+  $aspectRatio
+}) => $aspectRatio, ({
   $radius
 }) => $radius, ({
-  $top
-}) => $top !== undefined ? `top: ${$top}px;` : '', ({
-  $bottom
-}) => $bottom !== undefined ? `bottom: ${$bottom}px;` : '', ({
-  $left
-}) => $left !== undefined ? `left: ${$left}px;` : '', ({
-  $right
-}) => $right !== undefined ? `right: ${$right}px;` : '');
+  $alignSelf
+}) => $alignSelf, ({
+  $marginTop
+}) => $marginTop !== undefined ? `margin-top: ${$marginTop}px;` : '', ({
+  $marginBottom
+}) => $marginBottom !== undefined ? `margin-bottom: ${$marginBottom}px;` : '', ({
+  $marginLeft
+}) => $marginLeft !== undefined ? `margin-left: ${$marginLeft}px;` : '', ({
+  $marginRight
+}) => $marginRight !== undefined ? `margin-right: ${$marginRight}px;` : '');

package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/NativeRichMediaScratchcardView.js

@@ -2,67 +2,65 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, HintOverlay, HintText, RevealArea, RevealButtonText, RewardSlot } from './styles';
 import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
 import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
-import { NativeRichMediaPtLabel } from '../../components/NativeRichMediaPtLabel';
 import { NativeRichMediaRewardPanel } from '../../components/NativeRichMediaRewardPanel';
-import { asText, contrastOn, surfaceBackground, surfaceBaseHex, withAlpha } from '../../helpers';
+import { NativeRichMediaText } from '../../components/NativeRichMediaText';
+import { NativeRichMediaTitle } from '../../components/NativeRichMediaTitle';
+import { asButtonValue, asTextValue, contrastOn, surfaceBackground, withAlpha } from '../../helpers';
 import { ScribbleIcon } from '../../icons';
 import { Lang } from '../../polyglot';
-import { TemplateLayer } from '../../styles';
 export function NativeRichMediaScratchcardView(props) {
   const {
     block
   } = props;
-  const baseHex = surfaceBaseHex(block.background) || '#FFFFFF';
-  const cardText = contrastOn(baseHex);
-  const cover = block.cover || {};
-  const coverBase = cover.color || '#C7C7C7';
-  const hintColor = withAlpha(contrastOn(coverBase), 0.45);
-  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"
-      }), _jsxs(RevealArea, {
-        children: [_jsx(RewardSlot, {
-          children: _jsx(NativeRichMediaRewardPanel, {
-            reward: block.reward,
-            onBackgroundHex: "#F7F7F7"
+  const {
+    cover
+  } = block;
+  const hintColor = withAlpha(contrastOn(cover.background), 0.45);
+  const title = asTextValue(block.title);
+  const message = asTextValue(block.message);
+  const revealButton = asButtonValue(block.revealButton);
+  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
+    }), _jsxs(RevealArea, {
+      children: [_jsx(RewardSlot, {
+        children: _jsx(NativeRichMediaRewardPanel, {
+          reward: block.reward,
+          onBackgroundHex: "#F7F7F7"
+        })
+      }), cover.image ? _jsx(NativeRichMediaCoverImg, {
+        url: cover.image,
+        position: "absolute",
+        inset: true,
+        backgroundColor: cover.background
+      }) : _jsxs(HintOverlay, {
+        "$coverBase": cover.background,
+        children: [_jsx(ScribbleIcon, {
+          color: hintColor
+        }), _jsx(HintText, {
+          "$color": hintColor,
+          children: _jsx(Lang, {
+            message: "DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE"
           })
-        }), cover.image ? _jsx(NativeRichMediaCoverImg, {
-          url: cover.image,
-          position: "absolute",
-          inset: true,
-          backgroundColor: cover.color || '#C7C7CC'
-        }) : _jsxs(HintOverlay, {
-          "$coverBase": coverBase,
-          children: [_jsx(ScribbleIcon, {
-            color: hintColor
-          }), _jsx(HintText, {
-            "$color": hintColor,
-            children: _jsx(Lang, {
-              message: "DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE"
-            })
-          })]
         })]
-      }), block.revealButton && _jsx(RevealButtonText, {
-        "$color": withAlpha(cardText, 0.8),
-        children: asText(block.revealButton)
-      }), block.showClose !== false && _jsx(NativeRichMediaCloseChip, {
-        top: 16,
-        right: 16
       })]
-    })
+    }), revealButton && _jsx(RevealButtonText, {
+      "$color": revealButton.text.color,
+      "$background": revealButton.background,
+      "$radius": revealButton.border.radius,
+      "$borderColor": revealButton.border.color,
+      children: revealButton.text.text
+    }), block.showClose && _jsx(NativeRichMediaCloseChip, {
+      top: 16,
+      right: 16
+    })]
   });
 }

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

@@ -9,9 +9,22 @@ export declare const RewardSlot: import("styled-components").StyledComponent<"di
 export declare const HintOverlay: import("styled-components").StyledComponent<"div", any, {
     $coverBase: string;
 }, never>;
-export declare const HintText: import("styled-components").StyledComponent<"div", any, {
-    $color: string;
-}, never>;
-export declare const RevealButtonText: import("styled-components").StyledComponent<"div", any, {
-    $color: string;
+export declare const HintText: import("styled-components").StyledComponent<typeof import("@pushwoosh/kit-typography").Footnote, any, {
+    $color?: string;
+    $align?: "center";
+    $clamp?: number;
+    $marginTop?: number;
 }, never>;
+export declare const RevealButtonText: import("styled-components").StyledComponent<typeof import("@pushwoosh/kit-typography").Footnote, any, {
+    $color?: string;
+    $align?: "center";
+    $clamp?: number;
+    $marginTop?: number;
+} & {
+    $align: string;
+    $marginTop: number;
+} & {
+    $background: string;
+    $radius: number;
+    $borderColor: string;
+}, "$marginTop" | "$align">;

package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/styles.js

@@ -1,4 +1,6 @@
 import styled from 'styled-components';
+import { FontWeight } from '@pushwoosh/kit-constants';
+import { NativeRichMediaText } from '../../components/NativeRichMediaText';
 import { mixHex } from '../../helpers';
 import { Card as SharedCard } from '../shared/styles';
 export const Card = styled(SharedCard).attrs({
@@ -21,15 +23,20 @@ export const HintOverlay = styled.div.withConfig({
 })(["position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:", ";"], ({
   $coverBase
 }) => `linear-gradient(135deg, ${mixHex($coverBase, '#FFFFFF', 0.4)}, ${$coverBase} 45%, ${mixHex($coverBase, '#000000', 0.12)})`);
-export const HintText = styled.div.withConfig({
+export const HintText = styled(NativeRichMediaText).withConfig({
   displayName: "HintText",
   componentId: "sc-nguevq-4"
-})(["font-size:14px;font-weight:600;color:", ";"], ({
-  $color
-}) => $color);
-export const RevealButtonText = styled.div.withConfig({
+})(["font-weight:", ";"], FontWeight.MEDIUM);
+export const RevealButtonText = styled(NativeRichMediaText).attrs({
+  $align: 'center',
+  $marginTop: 14
+}).withConfig({
   displayName: "RevealButtonText",
   componentId: "sc-nguevq-5"
-})(["margin-top:14px;text-align:center;font-size:15px;font-weight:600;color:", ";"], ({
-  $color
-}) => $color);
+})(["font-weight:", ";width:fit-content;margin-left:auto;margin-right:auto;background:", ";border-radius:", "px;padding:10px 16px;border:1px solid ", ";user-select:none;cursor:pointer;"], FontWeight.MEDIUM, ({
+  $background
+}) => $background, ({
+  $radius
+}) => $radius, ({
+  $borderColor
+}) => $borderColor);