@pushwoosh/dumb-components 1.1.224 → 1.1.226

package/WhatsAppPreview/components/WhatsAppMessageBubble/WhatsAppMessageBubble.js

@@ -1,46 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Columns } from '@pushwoosh/kit-helpers';
-import { BubbleBox, BubbleMeta, BubbleText } from './styles';
-import { resolveAttachmentKind } from '../../helpers';
-import { WhatsAppTickIcon, WhatsAppTicksIcon } from '../../icons';
+import { BubbleText } from './styles';
+import { drawableAttachments } from '../../helpers';
+import { Bubble } from '../../styles';
 import { WhatsAppAttachment } from '../WhatsAppAttachment';
 import { WhatsAppFormattedText } from '../WhatsAppFormattedText';
-/** Single chat bubble: attachment, body, time and — for outgoing messages — the delivery ticks. */
+/** Single chat bubble: attachments on top, message body underneath. */
 export function WhatsAppMessageBubble(props) {
   const {
     message
   } = props;
   const {
-    direction,
     text = '',
-    content,
-    attachment,
-    time,
-    status
+    content
   } = message;
-  const showTicks = direction === 'outgoing' && Boolean(status);
   const hasBody = Boolean(text || content);
-  const drawnAttachment = attachment?.source ? attachment : undefined;
-  const isMediaOnly = drawnAttachment !== undefined && !hasBody && resolveAttachmentKind(drawnAttachment) !== 'document';
-  const meta = time || showTicks ? _jsxs(BubbleMeta, {
-    "$overlaid": isMediaOnly,
-    "$read": showTicks && status === 'read',
-    children: [time, showTicks && status === 'sent' && _jsx(WhatsAppTickIcon, {}), showTicks && status !== 'sent' && _jsx(WhatsAppTicksIcon, {})]
-  }) : null;
-  return _jsx(Columns, {
-    "$justifyItems": direction === 'outgoing' ? 'end' : 'start',
-    "$sizes": "minmax(0, 1fr)",
-    children: _jsxs(BubbleBox, {
-      "$direction": direction,
-      children: [drawnAttachment && _jsx(WhatsAppAttachment, {
-        attachment: drawnAttachment,
-        hasCaption: hasBody,
-        meta: isMediaOnly ? meta : undefined
-      }), hasBody && _jsx(BubbleText, {
-        children: content ?? _jsx(WhatsAppFormattedText, {
-          text: text
-        })
-      }), !isMediaOnly && meta]
-    })
+  const attachments = drawableAttachments(message);
+  return _jsxs(Bubble, {
+    children: [attachments.map((attachment, index) => _jsx(WhatsAppAttachment, {
+      attachment: attachment
+    }, `${attachment.name}:${attachment.source}:${String(index)}`)), hasBody && _jsx(BubbleText, {
+      children: content ?? _jsx(WhatsAppFormattedText, {
+        text: text
+      })
+    })]
   });
 }

package/WhatsAppPreview/components/WhatsAppMessageBubble/styles.d.ts

@@ -1,23 +1,9 @@
-import type { WhatsAppMessageDirection } from '../../types';
-export declare const BubbleBox: import("styled-components").StyledComponent<"div", any, {
-    $direction: WhatsAppMessageDirection;
-}, never>;
 export declare const BubbleText: import("styled-components").StyledComponent<"span", any, {
     $color?: string | undefined;
     $uppercase?: boolean | undefined;
     $ellipsis?: boolean | undefined;
     $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
-} & {
-    $color: "#111B21";
-}, "$color">;
-export declare const BubbleMeta: import("styled-components").StyledComponent<"span", any, {
-    $color?: string | undefined;
-    $uppercase?: boolean | undefined;
-    $ellipsis?: boolean | undefined;
-    $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
 } & {
     $variant: "footnote";
-} & {
-    $read: boolean;
-    $overlaid?: boolean;
-}, "$variant">;
+    $color: import("@pushwoosh/kit-constants").Color;
+}, "$color" | "$variant">;

package/WhatsAppPreview/components/WhatsAppMessageBubble/styles.js

@@ -1,34 +1,6 @@
-import styled, { css } from 'styled-components';
-import { ShapeRadius } from '@pushwoosh/kit-constants';
-import { Text } from '@pushwoosh/kit-typography';
-import { WHATSAPP_COLOR } from '../../constants';
-export const BubbleBox = styled.div.withConfig({
-  displayName: "BubbleBox",
-  componentId: "sc-va3yjo-0"
-})(["display:flow-root;max-width:82%;padding:6px 8px 7px;box-shadow:0 1px 0.5px ", ";overflow-wrap:anywhere;", ""], WHATSAPP_COLOR.BUBBLE_SHADOW, ({
-  $direction
-}) => $direction === 'outgoing' ? css(["border-radius:", " 2px ", " ", ";background:", ";"], ShapeRadius.SECTION, ShapeRadius.SECTION, ShapeRadius.SECTION, WHATSAPP_COLOR.OUTGOING_BUBBLE) : css(["border-radius:2px ", " ", " ", ";background:", ";"], ShapeRadius.SECTION, ShapeRadius.SECTION, ShapeRadius.SECTION, WHATSAPP_COLOR.INCOMING_BUBBLE));
-export const BubbleText = styled(Text).attrs({
-  $color: WHATSAPP_COLOR.BUBBLE_TEXT
-}).withConfig({
+import styled from 'styled-components';
+import { PreviewText } from '../../styles';
+export const BubbleText = styled(PreviewText).withConfig({
   displayName: "BubbleText",
-  componentId: "sc-va3yjo-1"
-})(["white-space:pre-wrap;"]);
-export const BubbleMeta = styled(Text).attrs({
-  $variant: 'footnote'
-}).withConfig({
-  displayName: "BubbleMeta",
-  componentId: "sc-va3yjo-2"
-})(["display:inline-flex;align-items:center;gap:3px;color:", ";", " svg{display:block;color:", ";}"], ({
-  $overlaid
-}) => $overlaid ? 'inherit' : WHATSAPP_COLOR.BUBBLE_META, ({
-  $overlaid
-}) => !$overlaid && css(["float:right;margin:6px 0 -2px 8px;"]), ({
-  $read,
-  $overlaid
-}) => {
-  if ($read) {
-    return WHATSAPP_COLOR.READ_TICK;
-  }
-  return $overlaid ? 'inherit' : WHATSAPP_COLOR.BUBBLE_META;
-});
+  componentId: "sc-va3yjo-0"
+})(["white-space:pre-wrap;"]);

package/WhatsAppPreview/constants.d.ts

@@ -1,17 +1,5 @@
-/** Colours of the replicated WhatsApp chat UI; they are WhatsApp's, not Pushwoosh design tokens. */
+/** Colours of the replicated WhatsApp bubble; they are WhatsApp's, not Pushwoosh design tokens. */
 export declare const WHATSAPP_COLOR: {
-    readonly DEVICE_SHELL: "#DFE2E5";
-    readonly DEVICE_EDGE: "#C7CCD1";
-    readonly SCREEN: "#EFE7DE";
-    readonly HEADER: "#F6F3EF";
-    readonly HEADER_BORDER: "#DAD5CF";
-    readonly ISLAND: "#2B2F33";
-    readonly STATUS_BAR: "#0B0C0D";
-    readonly TITLE: "#111B21";
-    readonly SUBTITLE: "#667781";
-    readonly ACTION: "#3B4A54";
-    readonly AVATAR: "#CFD6DB";
-    readonly AVATAR_GLYPH: "#FFFFFF";
     readonly INCOMING_BUBBLE: "#FFFFFF";
     readonly MEDIA_BACKDROP: "#0B141A";
     readonly MEDIA_META: "#FFFFFF";
@@ -19,36 +7,18 @@ export declare const WHATSAPP_COLOR: {
     readonly PLAY_BUTTON: "rgba(255, 255, 255, 0.85)";
     readonly PLAY_GLYPH: "#111B21";
     readonly DOCUMENT_CARD: "#F5F6F6";
-    readonly DOCUMENT_PDF: "#E7554B";
-    readonly DOCUMENT_TEXT: "#2E7CD6";
-    readonly DOCUMENT_GENERIC: "#8696A0";
+    readonly DOCUMENT_GLYPH: "#8696A0";
     readonly OUTGOING_BUBBLE: "#D9FDD3";
-    readonly BUBBLE_TEXT: "#111B21";
-    readonly BUBBLE_META: "#667781";
-    readonly BUBBLE_SHADOW: "rgba(11, 20, 26, 0.13)";
-    readonly READ_TICK: "#53BDEB";
-    readonly DATE_CHIP_TEXT: "#54656F";
-    readonly WALLPAPER_INK: "#D8CCBD";
 };
-export declare const WHATSAPP_PREVIEW_WIDTH = 340;
-export declare const WHATSAPP_PREVIEW_HEIGHT = 640;
-export declare const WHATSAPP_DEVICE_PADDING = 5;
-export declare const WHATSAPP_DEVICE_BORDER = 1;
-export declare const WHATSAPP_SCREEN_WIDTH: number;
-/** Status bar geometry at {@link WHATSAPP_SCREEN_WIDTH}; a narrower device gets the same layout scaled down. */
-export declare const WHATSAPP_STATUS_BAR: {
-    readonly HEIGHT: 44;
-    readonly PADDING_LEFT: 28;
-    readonly PADDING_RIGHT: 22;
-    readonly CLOCK_FONT_SIZE: 14;
-    readonly ISLAND_WIDTH: 92;
-    readonly ISLAND_HEIGHT: 26;
-    readonly ISLAND_TOP: 8;
-    readonly INDICATOR_GAP: 5;
-    readonly INDICATOR_HEIGHT: 12;
-};
-export declare const WHATSAPP_STATUS_BAR_TIME = "12:02";
+/** Bubble geometry from the design: 280px of content inside a 12px padding and a 1px border, border-box. */
+export declare const WHATSAPP_BUBBLE_WIDTH = 306;
+export declare const WHATSAPP_BUBBLE_PADDING = 12;
+export declare const WHATSAPP_BACKDROP_PADDING = 24;
+export declare const WHATSAPP_BACKDROP_WIDTH: number;
 export declare const WHATSAPP_MEDIA_MAX_HEIGHT = 320;
+/** A tiny or very wide file still has to fit the duration badge, so media never draws thinner than this. */
+export declare const WHATSAPP_MEDIA_MIN_HEIGHT = 48;
+export declare const WHATSAPP_MEDIA_RADIUS = 4;
 export declare const WHATSAPP_ATTACHMENT_EXTENSIONS: {
     readonly image: string[];
     readonly video: string[];

package/WhatsAppPreview/constants.js

@@ -1,17 +1,5 @@
-/** Colours of the replicated WhatsApp chat UI; they are WhatsApp's, not Pushwoosh design tokens. */
+/** Colours of the replicated WhatsApp bubble; they are WhatsApp's, not Pushwoosh design tokens. */
 export const WHATSAPP_COLOR = {
-  DEVICE_SHELL: '#DFE2E5',
-  DEVICE_EDGE: '#C7CCD1',
-  SCREEN: '#EFE7DE',
-  HEADER: '#F6F3EF',
-  HEADER_BORDER: '#DAD5CF',
-  ISLAND: '#2B2F33',
-  STATUS_BAR: '#0B0C0D',
-  TITLE: '#111B21',
-  SUBTITLE: '#667781',
-  ACTION: '#3B4A54',
-  AVATAR: '#CFD6DB',
-  AVATAR_GLYPH: '#FFFFFF',
   INCOMING_BUBBLE: '#FFFFFF',
   MEDIA_BACKDROP: '#0B141A',
   MEDIA_META: '#FFFFFF',
@@ -19,36 +7,18 @@ export const WHATSAPP_COLOR = {
   PLAY_BUTTON: 'rgba(255, 255, 255, 0.85)',
   PLAY_GLYPH: '#111B21',
   DOCUMENT_CARD: '#F5F6F6',
-  DOCUMENT_PDF: '#E7554B',
-  DOCUMENT_TEXT: '#2E7CD6',
-  DOCUMENT_GENERIC: '#8696A0',
-  OUTGOING_BUBBLE: '#D9FDD3',
-  BUBBLE_TEXT: '#111B21',
-  BUBBLE_META: '#667781',
-  BUBBLE_SHADOW: 'rgba(11, 20, 26, 0.13)',
-  READ_TICK: '#53BDEB',
-  DATE_CHIP_TEXT: '#54656F',
-  WALLPAPER_INK: '#D8CCBD'
+  DOCUMENT_GLYPH: '#8696A0',
+  OUTGOING_BUBBLE: '#D9FDD3'
 };
-export const WHATSAPP_PREVIEW_WIDTH = 340;
-export const WHATSAPP_PREVIEW_HEIGHT = 640;
-export const WHATSAPP_DEVICE_PADDING = 5;
-export const WHATSAPP_DEVICE_BORDER = 1;
-export const WHATSAPP_SCREEN_WIDTH = WHATSAPP_PREVIEW_WIDTH - (WHATSAPP_DEVICE_PADDING + WHATSAPP_DEVICE_BORDER) * 2;
-/** Status bar geometry at {@link WHATSAPP_SCREEN_WIDTH}; a narrower device gets the same layout scaled down. */
-export const WHATSAPP_STATUS_BAR = {
-  HEIGHT: 44,
-  PADDING_LEFT: 28,
-  PADDING_RIGHT: 22,
-  CLOCK_FONT_SIZE: 14,
-  ISLAND_WIDTH: 92,
-  ISLAND_HEIGHT: 26,
-  ISLAND_TOP: 8,
-  INDICATOR_GAP: 5,
-  INDICATOR_HEIGHT: 12
-};
-export const WHATSAPP_STATUS_BAR_TIME = '12:02';
+/** Bubble geometry from the design: 280px of content inside a 12px padding and a 1px border, border-box. */
+export const WHATSAPP_BUBBLE_WIDTH = 306;
+export const WHATSAPP_BUBBLE_PADDING = 12;
+export const WHATSAPP_BACKDROP_PADDING = 24;
+export const WHATSAPP_BACKDROP_WIDTH = WHATSAPP_BUBBLE_WIDTH + WHATSAPP_BACKDROP_PADDING * 2;
 export const WHATSAPP_MEDIA_MAX_HEIGHT = 320;
+/** A tiny or very wide file still has to fit the duration badge, so media never draws thinner than this. */
+export const WHATSAPP_MEDIA_MIN_HEIGHT = 48;
+export const WHATSAPP_MEDIA_RADIUS = 4;
 const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
 const VIDEO_EXTENSIONS = ['mp4', 'mov', 'webm', '3gp'];
 export const WHATSAPP_ATTACHMENT_EXTENSIONS = {

package/WhatsAppPreview/helpers.d.ts

@@ -2,12 +2,14 @@ import type { WhatsAppTextNode } from './components/WhatsAppFormattedText/types'
 import type { WhatsAppAttachment, WhatsAppAttachmentKind, WhatsAppMessage } from './types';
 /** Splits WhatsApp markup (`*bold*`, `_italic_`, `~strike~`, backtick monospace) into a render tree. */
 export declare function parseWhatsAppMarkup(text: string): WhatsAppTextNode[];
-/** Extension of the attached file, lowercase and without the dot; empty when the name carries none. */
+/** File type shown on a document card: the name extension, or the MIME subtype when the name carries none. */
 export declare function getAttachmentExtension(attachment: WhatsAppAttachment): string;
 /** Picks how the attachment is drawn: explicit `kind` first, then the MIME type, then the extension. */
 export declare function resolveAttachmentKind(attachment: WhatsAppAttachment): WhatsAppAttachmentKind;
 /** Whether the message has anything to show; a bubble with neither body nor file content is not drawn at all. */
 export declare function isMessageDrawable(message: WhatsAppMessage): boolean;
+/** Attachments that have something to render; a file without a source is skipped. */
+export declare function drawableAttachments(message: WhatsAppMessage): WhatsAppAttachment[];
 /** File size the way WhatsApp writes it on a document card: `912 B`, `68 kB`, `1.4 MB`. */
 export declare function formatAttachmentSize(size: number): string;
 /** Video length as the `m:ss` badge of a WhatsApp video bubble. */

package/WhatsAppPreview/helpers.js

@@ -55,13 +55,17 @@ export function parseWhatsAppMarkup(text) {
   flush();
   return nodes;
 }
-/** Extension of the attached file, lowercase and without the dot; empty when the name carries none. */
+/** File type shown on a document card: the name extension, or the MIME subtype when the name carries none. */
 export function getAttachmentExtension(attachment) {
   const {
-    name
+    name,
+    mimeType = ''
   } = attachment;
   const dot = name.lastIndexOf('.');
-  return dot > 0 ? name.slice(dot + 1).toLowerCase() : '';
+  if (dot > 0) {
+    return name.slice(dot + 1).toLowerCase();
+  }
+  return mimeType.split('/')[1]?.toLowerCase() || '';
 }
 /** Picks how the attachment is drawn: explicit `kind` first, then the MIME type, then the extension. */
 export function resolveAttachmentKind(attachment) {
@@ -86,7 +90,11 @@ export function resolveAttachmentKind(attachment) {
 }
 /** Whether the message has anything to show; a bubble with neither body nor file content is not drawn at all. */
 export function isMessageDrawable(message) {
-  return Boolean(message.text || message.content || message.attachment?.source);
+  return Boolean(message.text || message.content || drawableAttachments(message).length);
+}
+/** Attachments that have something to render; a file without a source is skipped. */
+export function drawableAttachments(message) {
+  return (message.attachments || []).filter(attachment => attachment.source);
 }
 /** File size the way WhatsApp writes it on a document card: `912 B`, `68 kB`, `1.4 MB`. */
 export function formatAttachmentSize(size) {

package/WhatsAppPreview/icons/index.d.ts

@@ -1,13 +1,3 @@
-export { default as WhatsAppAvatarIcon } from './WhatsAppAvatarIcon.svg';
-export { default as WhatsAppBackIcon } from './WhatsAppBackIcon.svg';
-export { default as WhatsAppBatteryIcon } from './WhatsAppBatteryIcon.svg';
-export { default as WhatsAppCallIcon } from './WhatsAppCallIcon.svg';
 export { default as WhatsAppDocumentIcon } from './WhatsAppDocumentIcon.svg';
-export { default as WhatsAppMenuIcon } from './WhatsAppMenuIcon.svg';
 export { default as WhatsAppPlayIcon } from './WhatsAppPlayIcon.svg';
-export { default as WhatsAppSignalIcon } from './WhatsAppSignalIcon.svg';
-export { default as WhatsAppTickIcon } from './WhatsAppTickIcon.svg';
-export { default as WhatsAppTicksIcon } from './WhatsAppTicksIcon.svg';
 export { default as WhatsAppVideoIcon } from './WhatsAppVideoIcon.svg';
-export { default as WhatsAppWallpaperPattern } from './WhatsAppWallpaperPattern.svg';
-export { default as WhatsAppWifiIcon } from './WhatsAppWifiIcon.svg';

package/WhatsAppPreview/icons/index.js

@@ -1,13 +1,3 @@
-export { default as WhatsAppAvatarIcon } from './WhatsAppAvatarIcon.svg';
-export { default as WhatsAppBackIcon } from './WhatsAppBackIcon.svg';
-export { default as WhatsAppBatteryIcon } from './WhatsAppBatteryIcon.svg';
-export { default as WhatsAppCallIcon } from './WhatsAppCallIcon.svg';
 export { default as WhatsAppDocumentIcon } from './WhatsAppDocumentIcon.svg';
-export { default as WhatsAppMenuIcon } from './WhatsAppMenuIcon.svg';
 export { default as WhatsAppPlayIcon } from './WhatsAppPlayIcon.svg';
-export { default as WhatsAppSignalIcon } from './WhatsAppSignalIcon.svg';
-export { default as WhatsAppTickIcon } from './WhatsAppTickIcon.svg';
-export { default as WhatsAppTicksIcon } from './WhatsAppTicksIcon.svg';
-export { default as WhatsAppVideoIcon } from './WhatsAppVideoIcon.svg';
-export { default as WhatsAppWallpaperPattern } from './WhatsAppWallpaperPattern.svg';
-export { default as WhatsAppWifiIcon } from './WhatsAppWifiIcon.svg';
+export { default as WhatsAppVideoIcon } from './WhatsAppVideoIcon.svg';

package/WhatsAppPreview/index.d.ts

@@ -1,2 +1,2 @@
 export { WhatsAppPreview } from './WhatsAppPreview';
-export type { WhatsAppAttachment, WhatsAppAttachmentKind, WhatsAppMessage, WhatsAppMessageDirection, WhatsAppMessageStatus, WhatsAppPreviewProps, } from './types';
+export type { WhatsAppAttachment, WhatsAppAttachmentKind, WhatsAppMessage, WhatsAppPreviewProps, } from './types';

package/WhatsAppPreview/polyglot/messages_ar.js

@@ -1,5 +1,4 @@
 export const messages = {
-  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': 'حساب أعمال',
-  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'الرسالة فارغة…',
-  'DUMB.WHATSAPP_PREVIEW.TODAY': 'اليوم'
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} صفحة',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'الرسالة فارغة…'
 };

package/WhatsAppPreview/polyglot/messages_bn.js

@@ -1,5 +1,4 @@
 export const messages = {
-  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': 'ব্যবসায়িক অ্যাকাউন্ট',
-  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'বার্তাটি খালি…',
-  'DUMB.WHATSAPP_PREVIEW.TODAY': 'আজ'
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}}টি পৃষ্ঠা',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'বার্তাটি খালি…'
 };

package/WhatsAppPreview/polyglot/messages_de.js

@@ -1,5 +1,4 @@
 export const messages = {
-  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': 'Unternehmenskonto',
-  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'Die Nachricht ist leer…',
-  'DUMB.WHATSAPP_PREVIEW.TODAY': 'Heute'
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} {{count | pluralize: "Seite", "Seiten"}}',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'Die Nachricht ist leer…'
 };

package/WhatsAppPreview/polyglot/messages_en.js

@@ -1,5 +1,4 @@
 export const messages = {
-  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': 'Business account',
-  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'Message is empty…',
-  'DUMB.WHATSAPP_PREVIEW.TODAY': 'Today'
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} {{count | pluralize: "page", "pages"}}',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'Message is empty…'
 };

package/WhatsAppPreview/polyglot/messages_es.js

@@ -1,5 +1,4 @@
 export const messages = {
-  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': 'Cuenta de empresa',
-  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'El mensaje está vacío…',
-  'DUMB.WHATSAPP_PREVIEW.TODAY': 'Hoy'
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} {{count | pluralize: "página", "páginas"}}',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'El mensaje está vacío…'
 };

package/WhatsAppPreview/polyglot/messages_fr.js

@@ -1,5 +1,4 @@
 export const messages = {
-  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': 'Compte professionnel',
-  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'Le message est vide…',
-  'DUMB.WHATSAPP_PREVIEW.TODAY': 'Aujourd’hui'
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} {{count | pluralize: "page", "pages"}}',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'Le message est vide…'
 };

package/WhatsAppPreview/polyglot/messages_he.js

@@ -1,5 +1,4 @@
 export const messages = {
-  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': 'חשבון עסקי',
-  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'ההודעה ריקה…',
-  'DUMB.WHATSAPP_PREVIEW.TODAY': 'היום'
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} עמודים',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'ההודעה ריקה…'
 };

package/WhatsAppPreview/polyglot/messages_hi.js

@@ -1,5 +1,4 @@
 export const messages = {
-  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': 'व्यवसाय खाता',
-  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'संदेश खाली है…',
-  'DUMB.WHATSAPP_PREVIEW.TODAY': 'आज'
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} पृष्ठ',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'संदेश खाली है…'
 };

package/WhatsAppPreview/polyglot/messages_ja.js

@@ -1,5 +1,4 @@
 export const messages = {
-  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': 'ビジネスアカウント',
-  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'メッセージが空です…',
-  'DUMB.WHATSAPP_PREVIEW.TODAY': '今日'
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} ページ',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'メッセージが空です…'
 };

package/WhatsAppPreview/polyglot/messages_ko.js

@@ -1,5 +1,4 @@
 export const messages = {
-  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': '비즈니스 계정',
-  'DUMB.WHATSAPP_PREVIEW.EMPTY': '메시지가 비어 있습니다…',
-  'DUMB.WHATSAPP_PREVIEW.TODAY': '오늘'
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}}페이지',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': '메시지가 비어 있습니다…'
 };

package/WhatsAppPreview/polyglot/messages_pt.js

@@ -1,5 +1,4 @@
 export const messages = {
-  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': 'Conta comercial',
-  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'A mensagem está vazia…',
-  'DUMB.WHATSAPP_PREVIEW.TODAY': 'Hoje'
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} {{count | pluralize: "página", "páginas"}}',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'A mensagem está vazia…'
 };

package/WhatsAppPreview/polyglot/messages_ru.js

@@ -1,5 +1,4 @@
 export const messages = {
-  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': 'Бизнес-аккаунт',
-  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'Сообщение пустое…',
-  'DUMB.WHATSAPP_PREVIEW.TODAY': 'Сегодня'
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} {{count | pluralize: "страница", "страницы", "страниц"}}',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'Сообщение пустое…'
 };

package/WhatsAppPreview/polyglot/messages_th.js

@@ -1,5 +1,4 @@
 export const messages = {
-  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': 'บัญชีธุรกิจ',
-  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'ข้อความว่างเปล่า…',
-  'DUMB.WHATSAPP_PREVIEW.TODAY': 'วันนี้'
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} หน้า',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'ข้อความว่างเปล่า…'
 };

package/WhatsAppPreview/polyglot/messages_zh.js

@@ -1,5 +1,4 @@
 export const messages = {
-  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': '商业账号',
-  'DUMB.WHATSAPP_PREVIEW.EMPTY': '消息为空…',
-  'DUMB.WHATSAPP_PREVIEW.TODAY': '今天'
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} 页',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': '消息为空…'
 };

package/WhatsAppPreview/polyglot/types.d.ts

@@ -1,6 +1,7 @@
 import type { NoParams } from '../../polyglot';
 export type WhatsAppPreviewMessages = {
-    'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': NoParams;
+    'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': {
+        count: number;
+    };
     'DUMB.WHATSAPP_PREVIEW.EMPTY': NoParams;
-    'DUMB.WHATSAPP_PREVIEW.TODAY': NoParams;
 };

package/WhatsAppPreview/styles.d.ts

@@ -1,4 +1,5 @@
-export declare const DeviceBox: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+export declare const Backdrop: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
     $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
     $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
     $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
@@ -8,15 +9,9 @@ export declare const DeviceBox: import("styled-components").StyledComponent<"div
     $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
     $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
 } & {
-    $sizes: import("@pushwoosh/kit-helpers/styled-helpers").StrNum;
-} & {
-    $sizes: string;
-    $padding: number;
-    $borderRadius: number;
-    $bgColor: "#DFE2E5";
-    $border: string;
-}, "$bgColor" | "$border" | "$borderRadius" | "$padding" | "$sizes">;
-export declare const WallpaperLayer: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $gridAutoFlow: string;
+}, "$gridAutoFlow">;
+export declare const Bubble: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
     $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
     $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
     $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum | undefined;
@@ -28,7 +23,19 @@ export declare const WallpaperLayer: import("styled-components").StyledComponent
 } & {
     $gridAutoFlow: string;
 } & {
-    $position: string;
-    $inset: number;
-}, "$gridAutoFlow" | "$inset" | "$position">;
-export declare const WallpaperImage: import("styled-components").StyledComponent<"img", any, {}, never>;
+    $bgColor: Color;
+    $border: string;
+    $borderRadius: ShapeRadius;
+    $gap: number;
+    $padding: number;
+    $width: number;
+}, "$gridAutoFlow" | "$bgColor" | "$border" | "$borderRadius" | "$padding" | "$width" | "$gap">;
+export declare const PreviewText: import("styled-components").StyledComponent<"span", any, {
+    $color?: string | undefined;
+    $uppercase?: boolean | undefined;
+    $ellipsis?: boolean | undefined;
+    $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
+} & {
+    $variant: "footnote";
+    $color: Color;
+}, "$color" | "$variant">;

package/WhatsAppPreview/styles.js

@@ -1,24 +1,27 @@
 import styled from 'styled-components';
-import { Rows, Vertical } from '@pushwoosh/kit-helpers';
-import { WHATSAPP_COLOR, WHATSAPP_DEVICE_BORDER, WHATSAPP_DEVICE_PADDING } from './constants';
-export const DeviceBox = styled(Rows).attrs({
-  $sizes: 'minmax(0, 1fr)',
-  $padding: WHATSAPP_DEVICE_PADDING,
-  $borderRadius: 44,
-  $bgColor: WHATSAPP_COLOR.DEVICE_SHELL,
-  $border: `${WHATSAPP_DEVICE_BORDER}px solid ${WHATSAPP_COLOR.DEVICE_EDGE}`
-}).withConfig({
-  displayName: "DeviceBox",
+import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { Text } from '@pushwoosh/kit-typography';
+import { WHATSAPP_BUBBLE_PADDING, WHATSAPP_BUBBLE_WIDTH } from './constants';
+export const Backdrop = styled(Vertical).withConfig({
+  displayName: "Backdrop",
   componentId: "sc-15y0kbp-0"
-})(["-webkit-font-smoothing:antialiased;*{box-sizing:border-box;}"]);
-export const WallpaperLayer = styled(Vertical).attrs({
-  $position: 'absolute',
-  $inset: 0
+})(["-webkit-font-smoothing:antialiased;&,*{box-sizing:border-box;}"]);
+export const Bubble = styled(Vertical).attrs({
+  $bgColor: Color.CLEAR,
+  $border: `1px solid ${Color.DIVIDER}`,
+  $borderRadius: ShapeRadius.SECTION,
+  $gap: WHATSAPP_BUBBLE_PADDING,
+  $padding: WHATSAPP_BUBBLE_PADDING,
+  $width: WHATSAPP_BUBBLE_WIDTH
 }).withConfig({
-  displayName: "WallpaperLayer",
+  displayName: "Bubble",
   componentId: "sc-15y0kbp-1"
-})(["color:", ";opacity:0.5;pointer-events:none;svg{display:block;width:100%;height:100%;}"], WHATSAPP_COLOR.WALLPAPER_INK);
-export const WallpaperImage = styled.img.withConfig({
-  displayName: "WallpaperImage",
+})(["box-shadow:", ";overflow-wrap:anywhere;"], Shadow.LARGE);
+export const PreviewText = styled(Text).attrs({
+  $variant: 'footnote',
+  $color: Color.MAIN
+}).withConfig({
+  displayName: "PreviewText",
   componentId: "sc-15y0kbp-2"
-})(["width:100%;height:100%;object-fit:cover;"]);
+})(["overflow:hidden;line-height:18px;text-overflow:ellipsis;"]);