@pushwoosh/dumb-components 1.1.225 → 1.1.226

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;"]);

package/WhatsAppPreview/types.d.ts

@@ -1,8 +1,4 @@
 import type { ReactNode } from 'react';
-/** Who sent the message: `outgoing` is the phone owner (green, right), `incoming` is the business (white, left). */
-export type WhatsAppMessageDirection = 'incoming' | 'outgoing';
-/** Delivery state drawn as ticks next to an outgoing message's time. */
-export type WhatsAppMessageStatus = 'sent' | 'delivered' | 'read';
 /** How WhatsApp draws an attachment: media fills the bubble, a document becomes a card inside it. */
 export type WhatsAppAttachmentKind = 'image' | 'video' | 'document';
 /** File attached to a {@link WhatsAppMessage}. */
@@ -19,46 +15,26 @@ export interface WhatsAppAttachment {
     kind?: WhatsAppAttachmentKind;
     /** Video length in seconds; read from the file itself when omitted. */
     duration?: number;
+    /** Ready-made poster — a document's first page or a video frame — drawn instead of decoding the file itself. */
+    thumbnailSource?: string;
+    /** Page count of the document, shown in the meta line before the size. */
+    pageCount?: number;
 }
-/** One chat bubble of {@link WhatsAppPreview}. */
+/** The message drawn by {@link WhatsAppPreview}. */
 export interface WhatsAppMessage {
-    /** Stable key when the list is re-ordered or edited. */
-    id?: string;
-    /** Bubble side and colour. */
-    direction: WhatsAppMessageDirection;
     /** Message body; WhatsApp markup (`*bold*`, `_italic_`, `~strike~`, `` `mono` ``) is rendered. */
     text?: string;
     /** Custom body rendered instead of `text` — e.g. an inline editor for the welcome message. */
     content?: ReactNode;
-    /** File shown above the text, the way WhatsApp renders images, videos and documents. */
-    attachment?: WhatsAppAttachment;
-    /** Time stamp inside the bubble. */
-    time?: string;
-    /** Tick state; ignored for incoming messages. */
-    status?: WhatsAppMessageStatus;
+    /** Files shown above the text, in order, the way WhatsApp renders images, videos and documents. */
+    attachments?: WhatsAppAttachment[];
 }
 /** Props of {@link WhatsAppPreview}. */
 export interface WhatsAppPreviewProps {
-    /** Chat messages, oldest first. */
-    messages?: WhatsAppMessage[];
-    /** Business name in the chat header. */
-    contactName?: string;
-    /** Caption under the name; defaults to the localized "Business account". */
-    contactSubtitle?: string;
-    /** Business avatar URL; a placeholder glyph is drawn when absent. */
-    avatarUrl?: string;
-    /** Date separator above the first message; hide it with an empty string. */
-    dateLabel?: string;
-    /** Clock in the device status bar. */
-    statusBarTime?: string;
-    /** Chat wallpaper URL replacing the built-in pattern. */
-    wallpaperUrl?: string;
-    /** Text shown on the wallpaper while the chat has no messages. */
+    /** Message to draw; the placeholder is shown while it has neither body nor files. */
+    message?: WhatsAppMessage;
+    /** Text shown while the card has no message to draw. */
     emptyText?: ReactNode;
-    /** CSS width of the device. */
-    width?: string | number;
-    /** CSS height of the device. */
-    height?: string | number;
-    /** Show the loading placeholder instead of the chat. */
+    /** Show the loading placeholder instead of the messages. */
     isLoading?: boolean;
 }

package/index.d.ts

@@ -36,7 +36,7 @@ export { EmailTemplatePreview, NoEmailTemplatePreview, replaceLocalization, repl
 export { PushPreview } from './PushPreview';
 export { InboxPreview, resolveInboxLayout, MAX_CAROUSEL_SLIDES, type InboxLayoutType, type InboxPreviewPlatform, type InboxPreviewContent, type InboxPreviewProps, type InboxPreviewSlide, } from './InboxPreview';
 export { WhatsAppPreview } from './WhatsAppPreview';
-export type { WhatsAppAttachment, WhatsAppAttachmentKind, WhatsAppMessage, WhatsAppMessageDirection, WhatsAppMessageStatus, WhatsAppPreviewProps, } from './WhatsAppPreview';
+export type { WhatsAppAttachment, WhatsAppAttachmentKind, WhatsAppMessage, WhatsAppPreviewProps, } from './WhatsAppPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
 export { ExportResult } from './ExportResult';

package/package.json

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

package/WhatsAppPreview/components/WhatsAppChatHeader/WhatsAppChatHeader.d.ts

@@ -1,4 +0,0 @@
-import { type ReactElement } from 'react';
-import type { WhatsAppChatHeaderProps } from './types';
-/** Chat screen header of the previewed conversation. */
-export declare function WhatsAppChatHeader(props: WhatsAppChatHeaderProps): ReactElement;

package/WhatsAppPreview/components/WhatsAppChatHeader/WhatsAppChatHeader.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
-import { Text } from '@pushwoosh/kit-typography';
-import { HeaderAvatar, HeaderAvatarImage, HeaderBox } from './styles';
-import { WHATSAPP_COLOR } from '../../constants';
-import { WhatsAppAvatarIcon, WhatsAppBackIcon, WhatsAppCallIcon, WhatsAppMenuIcon } from '../../icons';
-/** Chat screen header of the previewed conversation. */
-export function WhatsAppChatHeader(props) {
-  const {
-    name,
-    subtitle,
-    avatarUrl
-  } = props;
-  return _jsxs(HeaderBox, {
-    children: [_jsx(WhatsAppBackIcon, {}), _jsx(HeaderAvatar, {
-      children: avatarUrl ? _jsx(HeaderAvatarImage, {
-        alt: name,
-        src: avatarUrl
-      }) : _jsx(WhatsAppAvatarIcon, {})
-    }), _jsxs(Vertical, {
-      "$minWidth": 0,
-      children: [_jsx(Text, {
-        "$color": WHATSAPP_COLOR.TITLE,
-        "$ellipsis": true,
-        "$variant": "h4",
-        children: name
-      }), _jsx(Text, {
-        "$color": WHATSAPP_COLOR.SUBTITLE,
-        "$ellipsis": true,
-        "$variant": "footnote",
-        children: subtitle
-      })]
-    }), _jsxs(Horizontal, {
-      "$alignItems": "center",
-      "$gap": 14,
-      children: [_jsx(WhatsAppCallIcon, {}), _jsx(WhatsAppMenuIcon, {})]
-    })]
-  });
-}

package/WhatsAppPreview/components/WhatsAppChatHeader/index.d.ts

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

package/WhatsAppPreview/components/WhatsAppChatHeader/index.js

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