@pushwoosh/dumb-components 1.1.227 → 1.1.228

package/WhatsAppPreview/WhatsAppPreview.js

@@ -1,43 +1,62 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
-import { Horizontal } from '@pushwoosh/kit-helpers';
-import { WhatsAppMessageBubble } from './components/WhatsAppMessageBubble';
-import { WHATSAPP_BACKDROP_PADDING, WHATSAPP_BACKDROP_WIDTH, WHATSAPP_BUBBLE_PADDING } from './constants';
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { CloseIcon, WhatsappIcon } from '@pushwoosh/kit-icons';
+import { WhatsAppMessageContent } from './components/WhatsAppMessageContent';
+import { WHATSAPP_CARD_PADDING } from './constants';
 import { isMessageDrawable } from './helpers';
 import { Lang } from './polyglot';
-import { Backdrop, Bubble, PreviewText } from './styles';
+import { AppBar, AppName, Card, MissedGlyph, MissedHint, MissedRow, MissedTitle, PreviewText } from './styles';
 import { Spinner } from '../Spinner';
 /** Renders a WhatsApp message the way the recipient sees it, WhatsApp markup and attachments included. */
 export function WhatsAppPreview(props) {
   const {
     message,
     emptyText,
-    isLoading = false
+    isLoading = false,
+    applicationName,
+    isContentMissing = false
   } = props;
-  const isDrawable = message !== undefined && isMessageDrawable(message);
-  return _jsxs(Backdrop, {
-    "$alignContent": "start",
-    "$bgColor": Color.SOFT_LIGHT,
-    "$borderRadius": ShapeRadius.SECTION,
-    "$padding": WHATSAPP_BACKDROP_PADDING,
-    "$width": WHATSAPP_BACKDROP_WIDTH,
-    children: [isLoading && _jsx(Horizontal, {
+  const isDrawable = !isContentMissing && message !== undefined && isMessageDrawable(message);
+  return _jsxs(Card, {
+    children: [applicationName && _jsxs(AppBar, {
+      children: [_jsx(WhatsappIcon, {
+        size: "small",
+        view: "filled"
+      }), _jsx(AppName, {
+        children: applicationName
+      })]
+    }), isLoading && _jsx(Horizontal, {
       "$alignItems": "center",
       "$justifyContent": "center",
-      "$padding": WHATSAPP_BUBBLE_PADDING,
+      "$padding": WHATSAPP_CARD_PADDING,
       children: _jsx(Spinner, {
         color: Color.LOCKED,
         size: "medium"
       })
-    }), !isLoading && !isDrawable && _jsx(Bubble, {
-      children: _jsx(PreviewText, {
-        "$color": Color.LOCKED,
-        "$ellipsis": true,
-        children: emptyText ?? _jsx(Lang, {
-          message: "DUMB.WHATSAPP_PREVIEW.EMPTY"
+    }), !isLoading && isContentMissing && _jsxs(MissedRow, {
+      children: [_jsx(MissedGlyph, {
+        children: _jsx(CloseIcon, {
+          size: "medium"
         })
+      }), _jsxs(Vertical, {
+        children: [_jsx(MissedTitle, {
+          children: _jsx(Lang, {
+            message: "DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE"
+          })
+        }), _jsx(MissedHint, {
+          children: _jsx(Lang, {
+            message: "DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT"
+          })
+        })]
+      })]
+    }), !isLoading && !isContentMissing && !isDrawable && _jsx(PreviewText, {
+      "$color": Color.LOCKED,
+      "$ellipsis": true,
+      children: emptyText ?? _jsx(Lang, {
+        message: "DUMB.WHATSAPP_PREVIEW.EMPTY"
       })
-    }), !isLoading && isDrawable && _jsx(WhatsAppMessageBubble, {
+    }), !isLoading && isDrawable && _jsx(WhatsAppMessageContent, {
       message: message
     })]
   });

package/WhatsAppPreview/__tests__/WhatsAppAttachment.test.d.ts

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

package/WhatsAppPreview/__tests__/WhatsAppAttachment.test.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { WhatsAppAttachment } from '../components/WhatsAppAttachment';
+const IMAGE = {
+  name: 'promo.jpg',
+  source: 'https://example.invalid/promo.jpg',
+  kind: 'image'
+};
+describe('WhatsAppAttachment', () => {
+  it('labels a loading image without leaking the file name', () => {
+    render(_jsx(WhatsAppAttachment, {
+      attachment: IMAGE
+    }));
+    const image = screen.getByRole('img');
+    expect(image).toHaveAttribute('alt', 'Attached image');
+    expect(image.getAttribute('alt')).not.toContain('promo.jpg');
+  });
+  it('drops the image for the placeholder once the source fails', () => {
+    render(_jsx(WhatsAppAttachment, {
+      attachment: IMAGE
+    }));
+    fireEvent.error(screen.getByRole('img'));
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+  it('retries a corrected source instead of keeping the placeholder', () => {
+    const {
+      rerender
+    } = render(_jsx(WhatsAppAttachment, {
+      attachment: IMAGE
+    }));
+    fireEvent.error(screen.getByRole('img'));
+    rerender(_jsx(WhatsAppAttachment, {
+      attachment: {
+        ...IMAGE,
+        source: 'https://example.invalid/fixed.jpg'
+      }
+    }));
+    expect(screen.getByRole('img')).toHaveAttribute('src', 'https://example.invalid/fixed.jpg');
+  });
+  it('hides an unreachable document poster but keeps the card', () => {
+    render(_jsx(WhatsAppAttachment, {
+      attachment: {
+        name: 'Price list.pdf',
+        source: 'https://example.invalid/price.pdf',
+        kind: 'document',
+        thumbnailSource: 'https://example.invalid/poster.jpg'
+      }
+    }));
+    fireEvent.error(screen.getByRole('img'));
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+    expect(screen.getByText('Price list.pdf')).toBeInTheDocument();
+  });
+});

package/WhatsAppPreview/__tests__/WhatsAppPreview.test.d.ts

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

package/WhatsAppPreview/__tests__/WhatsAppPreview.test.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { WhatsAppPreview } from '../WhatsAppPreview';
+describe('WhatsAppPreview', () => {
+  it('heads the card with the application it sends from', () => {
+    const {
+      container
+    } = render(_jsx(WhatsAppPreview, {
+      applicationName: "The canary",
+      message: {
+        text: 'Hi'
+      }
+    }));
+    expect(screen.getByText('The canary')).toBeInTheDocument();
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+  it('keeps the header on the empty card', () => {
+    render(_jsx(WhatsAppPreview, {
+      applicationName: "The canary",
+      emptyText: "Nothing yet"
+    }));
+    expect(screen.getByText('The canary')).toBeInTheDocument();
+    expect(screen.getByText('Nothing yet')).toBeInTheDocument();
+  });
+  it('draws no header without an application', () => {
+    const {
+      container
+    } = render(_jsx(WhatsAppPreview, {
+      message: {
+        text: 'Hi'
+      }
+    }));
+    expect(container.querySelector('svg')).not.toBeInTheDocument();
+    expect(screen.getByText('Hi')).toBeInTheDocument();
+  });
+  it('replaces the message with the unavailable-content row', () => {
+    render(_jsx(WhatsAppPreview, {
+      isContentMissing: true,
+      message: {
+        text: 'Stale promo'
+      }
+    }));
+    expect(screen.getByText('Content missed')).toBeInTheDocument();
+    expect(screen.getByText('Might be old data or deleted presets')).toBeInTheDocument();
+    expect(screen.queryByText('Stale promo')).not.toBeInTheDocument();
+  });
+  it('keeps the application header above the unavailable-content row', () => {
+    render(_jsx(WhatsAppPreview, {
+      applicationName: "The canary",
+      isContentMissing: true
+    }));
+    expect(screen.getByText('The canary')).toBeInTheDocument();
+    expect(screen.getByText('Content missed')).toBeInTheDocument();
+  });
+});

package/WhatsAppPreview/components/WhatsAppAttachment/WhatsAppAttachment.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Columns, Vertical } from '@pushwoosh/kit-helpers';
-import { DocumentBox, DocumentGlyph, DocumentThumbnail, MediaBox, MediaDuration, MediaOverlay, PlayButton, PlayGlyph } from './styles';
+import { ImageIcon } from '@pushwoosh/kit-icons';
+import { DocumentBox, DocumentGlyph, DocumentThumbnail, MediaBox, MediaDuration, MediaFallback, MediaOverlay, PlayButton, PlayGlyph } from './styles';
 import { formatAttachmentDuration, formatAttachmentSize, getAttachmentExtension, resolveAttachmentKind, toVideoPosterSource } from '../../helpers';
 import { WhatsAppDocumentIcon, WhatsAppPlayIcon, WhatsAppVideoIcon } from '../../icons';
 import { useLang } from '../../polyglot';
@@ -22,8 +23,11 @@ export function WhatsAppAttachment(props) {
   } = attachment;
   const lang = useLang();
   const [readDuration, setReadDuration] = useState(null);
+  const [hasFailed, setHasFailed] = useState(false);
   const kind = resolveAttachmentKind(attachment);
   const extension = getAttachmentExtension(attachment);
+  useEffect(() => setHasFailed(false), [source, thumbnailSource]);
+  const handleError = useCallback(() => setHasFailed(true), []);
   const handleLoadedMetadata = useCallback(event => {
     const {
       duration: length
@@ -36,9 +40,12 @@ export function WhatsAppAttachment(props) {
       count: pageCount
     }), size === undefined ? '' : formatAttachmentSize(size), extension].filter(Boolean);
     return _jsxs(DocumentBox, {
-      children: [thumbnailSource && _jsx(DocumentThumbnail, {
-        alt: name,
-        src: thumbnailSource
+      children: [thumbnailSource && !hasFailed && _jsx(DocumentThumbnail, {
+        alt: lang({
+          message: 'DUMB.WHATSAPP_PREVIEW.DOCUMENT_ALT'
+        }),
+        src: thumbnailSource,
+        onError: handleError
       }), _jsxs(Columns, {
         "$alignItems": "center",
         "$gap": 10,
@@ -63,16 +70,28 @@ export function WhatsAppAttachment(props) {
   }
   const length = duration ?? readDuration;
   const isVideo = kind === 'video';
+  if (hasFailed) {
+    return _jsx(MediaFallback, {
+      children: _jsx(ImageIcon, {
+        size: "medium",
+        view: "lined"
+      })
+    });
+  }
   return _jsxs(MediaBox, {
     "$hasOverlay": isVideo,
     children: [isVideo && !thumbnailSource ? _jsx("video", {
       muted: true,
       playsInline: true,
+      onError: handleError,
       onLoadedMetadata: handleLoadedMetadata,
       preload: "metadata",
       src: toVideoPosterSource(source)
     }) : _jsx("img", {
-      alt: name,
+      alt: lang({
+        message: 'DUMB.WHATSAPP_PREVIEW.IMAGE_ALT'
+      }),
+      onError: handleError,
       src: thumbnailSource ?? source
     }), isVideo && _jsx(PlayButton, {
       children: _jsx(PlayGlyph, {

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

@@ -1,3 +1,4 @@
+import { Color } from '@pushwoosh/kit-constants';
 export declare const MediaBox: 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;
@@ -11,12 +12,32 @@ export declare const MediaBox: import("styled-components").StyledComponent<"div"
     $gridAutoFlow: string;
 } & {
     $position: string;
+    $alignContent: string;
     $bgColor: "#0B141A";
     $borderRadius: number;
     $justifyItems: string;
 } & {
     $hasOverlay: boolean;
-}, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$position" | "$justifyItems">;
+}, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$position" | "$alignContent" | "$justifyItems">;
+export declare const MediaFallback: 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;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
+} & {
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $alignContent: string;
+    $justifyItems: string;
+    $bgColor: Color;
+    $borderRadius: number;
+    $height: number;
+    $width: string;
+}, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$height" | "$width" | "$alignContent" | "$justifyItems">;
 export declare const PlayButton: 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;

package/WhatsAppPreview/components/WhatsAppAttachment/styles.js

@@ -1,18 +1,31 @@
 import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { Text } from '@pushwoosh/kit-typography';
-import { WHATSAPP_COLOR, WHATSAPP_MEDIA_MAX_HEIGHT, WHATSAPP_MEDIA_MIN_HEIGHT, WHATSAPP_MEDIA_RADIUS } from '../../constants';
+import { WHATSAPP_COLOR, WHATSAPP_MEDIA_FALLBACK_HEIGHT, WHATSAPP_MEDIA_MAX_HEIGHT, WHATSAPP_MEDIA_MIN_HEIGHT, WHATSAPP_MEDIA_RADIUS } from '../../constants';
 export const MediaBox = styled(Vertical).attrs({
   $position: 'relative',
+  $alignContent: 'center',
   $bgColor: WHATSAPP_COLOR.MEDIA_BACKDROP,
   $borderRadius: WHATSAPP_MEDIA_RADIUS,
-  $justifyItems: 'start'
+  $justifyItems: 'center'
 }).withConfig({
   displayName: "MediaBox",
   componentId: "sc-1uezfps-0"
-})(["overflow:hidden;width:fit-content;max-width:100%;img,video{display:block;width:auto;max-width:100%;max-height:", "px;", "}"], WHATSAPP_MEDIA_MAX_HEIGHT, ({
+})(["overflow:hidden;width:100%;", " img,video{display:block;width:auto;height:auto;max-width:100%;max-height:", "px;}"], ({
   $hasOverlay
-}) => $hasOverlay ? `min-height: ${WHATSAPP_MEDIA_MIN_HEIGHT}px;` : '');
+}) => $hasOverlay ? `min-height: ${WHATSAPP_MEDIA_MIN_HEIGHT}px;` : '', WHATSAPP_MEDIA_MAX_HEIGHT);
+export const MediaFallback = styled(Vertical).attrs({
+  $alignContent: 'center',
+  $justifyItems: 'center',
+  $bgColor: Color.FROZEN,
+  $borderRadius: WHATSAPP_MEDIA_RADIUS,
+  $height: WHATSAPP_MEDIA_FALLBACK_HEIGHT,
+  $width: '100%'
+}).withConfig({
+  displayName: "MediaFallback",
+  componentId: "sc-1uezfps-1"
+})(["color:", ";svg{display:block;}"], Color.LOCKED);
 export const PlayButton = styled(Horizontal).attrs({
   $alignItems: 'center',
   $justifyContent: 'center',
@@ -20,7 +33,7 @@ export const PlayButton = styled(Horizontal).attrs({
   $inset: 0
 }).withConfig({
   displayName: "PlayButton",
-  componentId: "sc-1uezfps-1"
+  componentId: "sc-1uezfps-2"
 })(["pointer-events:none;"]);
 export const PlayGlyph = styled(Horizontal).attrs({
   $alignItems: 'center',
@@ -31,7 +44,7 @@ export const PlayGlyph = styled(Horizontal).attrs({
   $bgColor: WHATSAPP_COLOR.PLAY_BUTTON
 }).withConfig({
   displayName: "PlayGlyph",
-  componentId: "sc-1uezfps-2"
+  componentId: "sc-1uezfps-3"
 })(["color:", ";svg{display:block;margin-left:3px;}"], WHATSAPP_COLOR.PLAY_GLYPH);
 export const MediaOverlay = styled(Horizontal).attrs({
   $alignItems: 'end',
@@ -43,14 +56,14 @@ export const MediaOverlay = styled(Horizontal).attrs({
   }
 }).withConfig({
   displayName: "MediaOverlay",
-  componentId: "sc-1uezfps-3"
+  componentId: "sc-1uezfps-4"
 })(["position:absolute;right:0;bottom:0;left:0;max-height:100%;overflow:hidden;background:linear-gradient(to top,", ",transparent);pointer-events:none;"], WHATSAPP_COLOR.MEDIA_SCRIM);
 export const MediaDuration = styled(Text).attrs({
   $variant: 'footnote',
   $color: WHATSAPP_COLOR.MEDIA_META
 }).withConfig({
   displayName: "MediaDuration",
-  componentId: "sc-1uezfps-4"
+  componentId: "sc-1uezfps-5"
 })(["display:inline-flex;align-items:center;gap:4px;svg{display:block;}"]);
 export const DocumentBox = styled(Vertical).attrs({
   $bgColor: WHATSAPP_COLOR.DOCUMENT_CARD,
@@ -58,13 +71,13 @@ export const DocumentBox = styled(Vertical).attrs({
   $width: '100%'
 }).withConfig({
   displayName: "DocumentBox",
-  componentId: "sc-1uezfps-5"
+  componentId: "sc-1uezfps-6"
 })(["overflow:hidden;"]);
 export const DocumentThumbnail = styled.img.withConfig({
   displayName: "DocumentThumbnail",
-  componentId: "sc-1uezfps-6"
+  componentId: "sc-1uezfps-7"
 })(["display:block;width:100%;max-height:", "px;object-fit:cover;"], WHATSAPP_MEDIA_MAX_HEIGHT);
 export const DocumentGlyph = styled(Horizontal).withConfig({
   displayName: "DocumentGlyph",
-  componentId: "sc-1uezfps-7"
+  componentId: "sc-1uezfps-8"
 })(["color:", ";svg{display:block;}"], WHATSAPP_COLOR.DOCUMENT_GLYPH);

package/WhatsAppPreview/components/WhatsAppMessageContent/WhatsAppMessageContent.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { WhatsAppMessageContentProps } from './types';
+/** Card body: attachments on top, message text underneath. */
+export declare function WhatsAppMessageContent(props: WhatsAppMessageContentProps): ReactElement;

package/WhatsAppPreview/components/{WhatsAppMessageBubble/WhatsAppMessageBubble.js → WhatsAppMessageContent/WhatsAppMessageContent.js}

@@ -1,11 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BubbleText } from './styles';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageText } from './styles';
 import { drawableAttachments } from '../../helpers';
-import { Bubble } from '../../styles';
 import { WhatsAppAttachment } from '../WhatsAppAttachment';
 import { WhatsAppFormattedText } from '../WhatsAppFormattedText';
-/** Single chat bubble: attachments on top, message body underneath. */
-export function WhatsAppMessageBubble(props) {
+/** Card body: attachments on top, message text underneath. */
+export function WhatsAppMessageContent(props) {
   const {
     message
   } = props;
@@ -15,10 +14,10 @@ export function WhatsAppMessageBubble(props) {
   } = message;
   const hasBody = Boolean(text || content);
   const attachments = drawableAttachments(message);
-  return _jsxs(Bubble, {
+  return _jsxs(_Fragment, {
     children: [attachments.map((attachment, index) => _jsx(WhatsAppAttachment, {
       attachment: attachment
-    }, `${attachment.name}:${attachment.source}:${String(index)}`)), hasBody && _jsx(BubbleText, {
+    }, `${attachment.name}:${attachment.source}:${String(index)}`)), hasBody && _jsx(MessageText, {
       children: content ?? _jsx(WhatsAppFormattedText, {
         text: text
       })

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

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

package/WhatsAppPreview/components/WhatsAppMessageContent/index.js

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

package/WhatsAppPreview/components/{WhatsAppMessageBubble → WhatsAppMessageContent}/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const BubbleText: import("styled-components").StyledComponent<"span", any, {
+export declare const MessageText: import("styled-components").StyledComponent<"span", any, {
     $color?: string | undefined;
     $uppercase?: boolean | undefined;
     $ellipsis?: boolean | undefined;

package/WhatsAppPreview/components/WhatsAppMessageContent/styles.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { PreviewText } from '../../styles';
+export const MessageText = styled(PreviewText).withConfig({
+  displayName: "MessageText",
+  componentId: "sc-jigutj-0"
+})(["white-space:pre-wrap;"]);

package/WhatsAppPreview/components/WhatsAppMessageContent/types.d.ts

@@ -0,0 +1,6 @@
+import type { WhatsAppMessage } from '../../types';
+/** Props of {@link WhatsAppMessageContent}. */
+export interface WhatsAppMessageContentProps {
+    /** Message rendered inside the card. */
+    message: WhatsAppMessage;
+}

package/WhatsAppPreview/constants.d.ts

@@ -10,15 +10,22 @@ export declare const WHATSAPP_COLOR: {
     readonly DOCUMENT_GLYPH: "#8696A0";
     readonly OUTGOING_BUBBLE: "#D9FDD3";
 };
-/** 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;
+/** Card geometry from the design: 280px of content inside a 12px padding and a 1px border, border-box. */
+export declare const WHATSAPP_CARD_WIDTH = 306;
+export declare const WHATSAPP_CARD_PADDING = 12;
+export declare const WHATSAPP_APP_BAR_GAP = 6;
+export declare const WHATSAPP_APP_BAR_PADDING: {
+    vertical: number;
+    horizontal: number;
+};
+export declare const WHATSAPP_MISSED_GLYPH_SIZE = 40;
+export declare const WHATSAPP_MISSED_GAP = 12;
 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. */
+/** Play button and duration badge need room, so the video frame — not the poster — never draws shorter. */
 export declare const WHATSAPP_MEDIA_MIN_HEIGHT = 48;
 export declare const WHATSAPP_MEDIA_RADIUS = 4;
+/** Unreachable media keeps the bubble at its full width instead of collapsing to a broken-image glyph. */
+export declare const WHATSAPP_MEDIA_FALLBACK_HEIGHT = 160;
 export declare const WHATSAPP_ATTACHMENT_EXTENSIONS: {
     readonly image: string[];
     readonly video: string[];

package/WhatsAppPreview/constants.js

@@ -10,15 +10,22 @@ export const WHATSAPP_COLOR = {
   DOCUMENT_GLYPH: '#8696A0',
   OUTGOING_BUBBLE: '#D9FDD3'
 };
-/** 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;
+/** Card geometry from the design: 280px of content inside a 12px padding and a 1px border, border-box. */
+export const WHATSAPP_CARD_WIDTH = 306;
+export const WHATSAPP_CARD_PADDING = 12;
+export const WHATSAPP_APP_BAR_GAP = 6;
+export const WHATSAPP_APP_BAR_PADDING = {
+  vertical: 8,
+  horizontal: 12
+};
+export const WHATSAPP_MISSED_GLYPH_SIZE = 40;
+export const WHATSAPP_MISSED_GAP = 12;
 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. */
+/** Play button and duration badge need room, so the video frame — not the poster — never draws shorter. */
 export const WHATSAPP_MEDIA_MIN_HEIGHT = 48;
 export const WHATSAPP_MEDIA_RADIUS = 4;
+/** Unreachable media keeps the bubble at its full width instead of collapsing to a broken-image glyph. */
+export const WHATSAPP_MEDIA_FALLBACK_HEIGHT = 160;
 const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
 const VIDEO_EXTENSIONS = ['mp4', 'mov', 'webm', '3gp'];
 export const WHATSAPP_ATTACHMENT_EXTENSIONS = {

package/WhatsAppPreview/polyglot/messages_ar.js

@@ -1,4 +1,8 @@
 export const messages = {
   'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} صفحة',
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_ALT': 'معاينة المستند',
+  'DUMB.WHATSAPP_PREVIEW.IMAGE_ALT': 'صورة مرفقة',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE': 'المحتوى غير متوفر',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT': 'قد تكون بيانات قديمة أو قوالب محذوفة',
   'DUMB.WHATSAPP_PREVIEW.EMPTY': 'الرسالة فارغة…'
 };

package/WhatsAppPreview/polyglot/messages_bn.js

@@ -1,4 +1,8 @@
 export const messages = {
   'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}}টি পৃষ্ঠা',
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_ALT': 'ডকুমেন্ট প্রিভিউ',
+  'DUMB.WHATSAPP_PREVIEW.IMAGE_ALT': 'সংযুক্ত ছবি',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE': 'কন্টেন্ট পাওয়া যায়নি',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT': 'সম্ভবত এটি পুরোনো ডেটা বা মুছে ফেলা প্রিসেট',
   'DUMB.WHATSAPP_PREVIEW.EMPTY': 'বার্তাটি খালি…'
 };

package/WhatsAppPreview/polyglot/messages_de.js

@@ -1,4 +1,8 @@
 export const messages = {
   'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} {{count | pluralize: "Seite", "Seiten"}}',
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_ALT': 'Dokumentvorschau',
+  'DUMB.WHATSAPP_PREVIEW.IMAGE_ALT': 'Angehängtes Bild',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE': 'Inhalt fehlt',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT': 'Möglicherweise alte Daten oder gelöschte Vorlagen',
   'DUMB.WHATSAPP_PREVIEW.EMPTY': 'Die Nachricht ist leer…'
 };

package/WhatsAppPreview/polyglot/messages_en.js

@@ -1,4 +1,8 @@
 export const messages = {
   'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} {{count | pluralize: "page", "pages"}}',
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_ALT': 'Document preview',
+  'DUMB.WHATSAPP_PREVIEW.IMAGE_ALT': 'Attached image',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE': 'Content missed',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT': 'Might be old data or deleted presets',
   'DUMB.WHATSAPP_PREVIEW.EMPTY': 'Message is empty…'
 };

package/WhatsAppPreview/polyglot/messages_es.js

@@ -1,4 +1,8 @@
 export const messages = {
   'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} {{count | pluralize: "página", "páginas"}}',
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_ALT': 'Vista previa del documento',
+  'DUMB.WHATSAPP_PREVIEW.IMAGE_ALT': 'Imagen adjunta',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE': 'Contenido no disponible',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT': 'Puede tratarse de datos antiguos o plantillas eliminadas',
   'DUMB.WHATSAPP_PREVIEW.EMPTY': 'El mensaje está vacío…'
 };

package/WhatsAppPreview/polyglot/messages_fr.js

@@ -1,4 +1,8 @@
 export const messages = {
   'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} {{count | pluralize: "page", "pages"}}',
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_ALT': 'Aperçu du document',
+  'DUMB.WHATSAPP_PREVIEW.IMAGE_ALT': 'Image jointe',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE': 'Contenu indisponible',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT': 'Il s’agit peut-être d’anciennes données ou de modèles supprimés',
   'DUMB.WHATSAPP_PREVIEW.EMPTY': 'Le message est vide…'
 };

package/WhatsAppPreview/polyglot/messages_he.js

@@ -1,4 +1,8 @@
 export const messages = {
   'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} עמודים',
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_ALT': 'תצוגה מקדימה של המסמך',
+  'DUMB.WHATSAPP_PREVIEW.IMAGE_ALT': 'תמונה מצורפת',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE': 'התוכן אינו זמין',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT': 'ייתכן שמדובר בנתונים ישנים או בתבניות שנמחקו',
   'DUMB.WHATSAPP_PREVIEW.EMPTY': 'ההודעה ריקה…'
 };

package/WhatsAppPreview/polyglot/messages_hi.js

@@ -1,4 +1,8 @@
 export const messages = {
   'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} पृष्ठ',
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_ALT': 'दस्तावेज़ पूर्वावलोकन',
+  'DUMB.WHATSAPP_PREVIEW.IMAGE_ALT': 'संलग्न छवि',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE': 'कॉन्टेंट उपलब्ध नहीं',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT': 'हो सकता है कि यह पुराना डेटा या हटाए गए प्रीसेट हों',
   'DUMB.WHATSAPP_PREVIEW.EMPTY': 'संदेश खाली है…'
 };

package/WhatsAppPreview/polyglot/messages_ja.js

@@ -1,4 +1,8 @@
 export const messages = {
   'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} ページ',
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_ALT': 'ドキュメントのプレビュー',
+  'DUMB.WHATSAPP_PREVIEW.IMAGE_ALT': '添付画像',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE': 'コンテンツがありません',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT': '古いデータか削除されたプリセットの可能性があります',
   'DUMB.WHATSAPP_PREVIEW.EMPTY': 'メッセージが空です…'
 };

package/WhatsAppPreview/polyglot/messages_ko.js

@@ -1,4 +1,8 @@
 export const messages = {
   'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}}페이지',
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_ALT': '문서 미리보기',
+  'DUMB.WHATSAPP_PREVIEW.IMAGE_ALT': '첨부된 이미지',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE': '콘텐츠를 찾을 수 없음',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT': '오래된 데이터이거나 삭제된 프리셋일 수 있습니다',
   'DUMB.WHATSAPP_PREVIEW.EMPTY': '메시지가 비어 있습니다…'
 };

package/WhatsAppPreview/polyglot/messages_pt.js

@@ -1,4 +1,8 @@
 export const messages = {
   'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} {{count | pluralize: "página", "páginas"}}',
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_ALT': 'Pré-visualização do documento',
+  'DUMB.WHATSAPP_PREVIEW.IMAGE_ALT': 'Imagem anexada',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE': 'Conteúdo indisponível',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT': 'Podem ser dados antigos ou modelos excluídos',
   'DUMB.WHATSAPP_PREVIEW.EMPTY': 'A mensagem está vazia…'
 };

package/WhatsAppPreview/polyglot/messages_ru.js

@@ -1,4 +1,8 @@
 export const messages = {
   'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} {{count | pluralize: "страница", "страницы", "страниц"}}',
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_ALT': 'Превью документа',
+  'DUMB.WHATSAPP_PREVIEW.IMAGE_ALT': 'Вложенное изображение',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE': 'Контент недоступен',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT': 'Возможно, это старые данные или удалённые пресеты',
   'DUMB.WHATSAPP_PREVIEW.EMPTY': 'Сообщение пустое…'
 };

package/WhatsAppPreview/polyglot/messages_th.js

@@ -1,4 +1,8 @@
 export const messages = {
   'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} หน้า',
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_ALT': 'ตัวอย่างเอกสาร',
+  'DUMB.WHATSAPP_PREVIEW.IMAGE_ALT': 'รูปภาพที่แนบ',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE': 'ไม่พบเนื้อหา',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT': 'อาจเป็นข้อมูลเก่าหรือพรีเซ็ตที่ถูกลบ',
   'DUMB.WHATSAPP_PREVIEW.EMPTY': 'ข้อความว่างเปล่า…'
 };

package/WhatsAppPreview/polyglot/messages_zh.js

@@ -1,4 +1,8 @@
 export const messages = {
   'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': '{{count}} 页',
+  'DUMB.WHATSAPP_PREVIEW.DOCUMENT_ALT': '文档预览',
+  'DUMB.WHATSAPP_PREVIEW.IMAGE_ALT': '附件图片',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE': '内容不可用',
+  'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT': '可能是旧数据或已删除的模板',
   'DUMB.WHATSAPP_PREVIEW.EMPTY': '消息为空…'
 };

package/WhatsAppPreview/polyglot/types.d.ts

@@ -3,5 +3,9 @@ export type WhatsAppPreviewMessages = {
     'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES': {
         count: number;
     };
+    'DUMB.WHATSAPP_PREVIEW.DOCUMENT_ALT': NoParams;
+    'DUMB.WHATSAPP_PREVIEW.IMAGE_ALT': NoParams;
+    'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_TITLE': NoParams;
+    'DUMB.WHATSAPP_PREVIEW.CONTENT_MISSED_HINT': NoParams;
     'DUMB.WHATSAPP_PREVIEW.EMPTY': NoParams;
 };

package/WhatsAppPreview/styles.d.ts

@@ -1,5 +1,5 @@
 import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
-export declare const Backdrop: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+export declare const Card: 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;
@@ -10,8 +10,67 @@ export declare const Backdrop: import("styled-components").StyledComponent<"div"
     $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
 } & {
     $gridAutoFlow: string;
-}, "$gridAutoFlow">;
-export declare const Bubble: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+} & {
+    $alignContent: string;
+    $bgColor: Color;
+    $border: string;
+    $borderRadius: ShapeRadius;
+    $gap: number;
+    $padding: number;
+    $width: number;
+}, "$gridAutoFlow" | "$bgColor" | "$border" | "$borderRadius" | "$padding" | "$width" | "$alignContent" | "$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;
+}, never>;
+export declare const AppBar: 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;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
+} & {
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+    $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $alignItems: string;
+    $justifyContent: string;
+    $gap: number;
+    $padding: {
+        vertical: number;
+        horizontal: number;
+    };
+}, "$gridAutoFlow" | "$padding" | "$alignItems" | "$gap" | "$justifyContent">;
+export declare const AppName: import("styled-components").StyledComponent<"span", any, {
+    $color?: string | undefined;
+    $uppercase?: boolean | undefined;
+    $ellipsis?: boolean | undefined;
+    $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
+} & {
+    $color: Color;
+    $ellipsis: boolean;
+}, "$color" | "$ellipsis">;
+export declare const MissedRow: 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;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue | undefined;
+} & {
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $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;
+} & {
+    $alignItems: string;
+    $gap: number;
+    $sizes: string;
+}, "$alignItems" | "$gap" | "$sizes">;
+export declare const MissedGlyph: 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;
@@ -23,16 +82,27 @@ export declare const Bubble: import("styled-components").StyledComponent<"div",
 } & {
     $gridAutoFlow: string;
 } & {
+    $alignItems: string;
+    $justifyContent: string;
     $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, {
+    $height: number;
+}, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$height" | "$width" | "$alignItems" | "$justifyContent">;
+export declare const MissedTitle: import("styled-components").StyledComponent<"span", any, {
     $color?: string | undefined;
     $uppercase?: boolean | undefined;
     $ellipsis?: boolean | undefined;
     $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
-}, never>;
+} & {
+    $color: Color;
+    $ellipsis: boolean;
+}, "$color" | "$ellipsis">;
+export declare const MissedHint: import("styled-components").StyledComponent<"span", any, {
+    $color?: string | undefined;
+    $uppercase?: boolean | undefined;
+    $ellipsis?: boolean | undefined;
+    $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
+} & {
+    $color: Color;
+}, "$color">;

package/WhatsAppPreview/styles.js

@@ -1,23 +1,20 @@
 import styled from 'styled-components';
-import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
-import { Vertical } from '@pushwoosh/kit-helpers';
+import { Color, FontFamily, FontSize, FontWeight, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Columns, Horizontal, 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 Bubble = styled(Vertical).attrs({
+import { WHATSAPP_APP_BAR_GAP, WHATSAPP_APP_BAR_PADDING, WHATSAPP_CARD_PADDING, WHATSAPP_CARD_WIDTH, WHATSAPP_MISSED_GAP, WHATSAPP_MISSED_GLYPH_SIZE } from './constants';
+export const Card = styled(Vertical).attrs({
+  $alignContent: 'start',
   $bgColor: Color.CLEAR,
   $border: `1px solid ${Color.DIVIDER}`,
   $borderRadius: ShapeRadius.SECTION,
-  $gap: WHATSAPP_BUBBLE_PADDING,
-  $padding: WHATSAPP_BUBBLE_PADDING,
-  $width: WHATSAPP_BUBBLE_WIDTH
+  $gap: WHATSAPP_CARD_PADDING,
+  $padding: WHATSAPP_CARD_PADDING,
+  $width: WHATSAPP_CARD_WIDTH
 }).withConfig({
-  displayName: "Bubble",
-  componentId: "sc-15y0kbp-1"
-})(["box-shadow:", ";overflow-wrap:anywhere;"], Shadow.LARGE);
+  displayName: "Card",
+  componentId: "sc-15y0kbp-0"
+})(["-webkit-font-smoothing:antialiased;box-shadow:", ";overflow-wrap:anywhere;&,*{box-sizing:border-box;}"], Shadow.LARGE);
 // styled-components merges attrs OVER incoming props, so a plain object here would
 // silently clobber every call-site `$color`; the callback keeps MAIN as a default only.
 export const PreviewText = styled(Text).attrs(props => ({
@@ -25,5 +22,53 @@ export const PreviewText = styled(Text).attrs(props => ({
   $color: props.$color ?? Color.MAIN
 })).withConfig({
   displayName: "PreviewText",
+  componentId: "sc-15y0kbp-1"
+})(["overflow:hidden;line-height:18px;text-overflow:ellipsis;"]);
+export const AppBar = styled(Horizontal).attrs({
+  $alignItems: 'center',
+  $justifyContent: 'start',
+  $gap: WHATSAPP_APP_BAR_GAP,
+  $padding: WHATSAPP_APP_BAR_PADDING
+}).withConfig({
+  displayName: "AppBar",
   componentId: "sc-15y0kbp-2"
-})(["overflow:hidden;line-height:18px;text-overflow:ellipsis;"]);
+})(["margin:-", "px -", "px 0;border-bottom:1px solid ", ";color:", ";svg{display:block;}"], WHATSAPP_CARD_PADDING, WHATSAPP_CARD_PADDING, Color.DIVIDER, Color.SUCCESS);
+export const AppName = styled(Text).attrs({
+  $color: Color.MAIN,
+  $ellipsis: true
+}).withConfig({
+  displayName: "AppName",
+  componentId: "sc-15y0kbp-3"
+})(["overflow:hidden;font-family:", ";font-size:", ";font-style:normal;font-weight:", ";line-height:18px;text-overflow:ellipsis;"], FontFamily.MAIN, FontSize.SMALL, FontWeight.MEDIUM);
+export const MissedRow = styled(Columns).attrs({
+  $alignItems: 'center',
+  $gap: WHATSAPP_MISSED_GAP,
+  $sizes: `${WHATSAPP_MISSED_GLYPH_SIZE}px minmax(0, 1fr)`
+}).withConfig({
+  displayName: "MissedRow",
+  componentId: "sc-15y0kbp-4"
+})([""]);
+export const MissedGlyph = styled(Horizontal).attrs({
+  $alignItems: 'center',
+  $justifyContent: 'center',
+  $bgColor: Color.FROZEN,
+  $borderRadius: ShapeRadius.SECTION,
+  $width: WHATSAPP_MISSED_GLYPH_SIZE,
+  $height: WHATSAPP_MISSED_GLYPH_SIZE
+}).withConfig({
+  displayName: "MissedGlyph",
+  componentId: "sc-15y0kbp-5"
+})(["color:", ";svg{display:block;}"], Color.LOCKED);
+export const MissedTitle = styled(Text).attrs({
+  $color: Color.MAIN,
+  $ellipsis: true
+}).withConfig({
+  displayName: "MissedTitle",
+  componentId: "sc-15y0kbp-6"
+})(["overflow:hidden;font-family:", ";font-size:", ";font-weight:", ";line-height:18px;text-overflow:ellipsis;"], FontFamily.MAIN, FontSize.SMALL, FontWeight.MEDIUM);
+export const MissedHint = styled(Text).attrs({
+  $color: Color.LOCKED
+}).withConfig({
+  displayName: "MissedHint",
+  componentId: "sc-15y0kbp-7"
+})(["font-family:", ";font-size:", ";font-weight:", ";line-height:18px;"], FontFamily.MAIN, FontSize.SMALL, FontWeight.REGULAR);

package/WhatsAppPreview/types.d.ts

@@ -37,4 +37,8 @@ export interface WhatsAppPreviewProps {
     emptyText?: ReactNode;
     /** Show the loading placeholder instead of the messages. */
     isLoading?: boolean;
+    /** Application the message is sent from; drawn as the card header, which is skipped without it. */
+    applicationName?: string;
+    /** Draw the unavailable-content row instead of the message: the address is stale or invalid. */
+    isContentMissing?: boolean;
 }

package/package.json

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

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

@@ -1,4 +0,0 @@
-import { type ReactElement } from 'react';
-import type { WhatsAppMessageBubbleProps } from './types';
-/** Single chat bubble: attachments on top, message body underneath. */
-export declare function WhatsAppMessageBubble(props: WhatsAppMessageBubbleProps): ReactElement;

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

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

package/WhatsAppPreview/components/WhatsAppMessageBubble/index.js

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

package/WhatsAppPreview/components/WhatsAppMessageBubble/styles.js

@@ -1,6 +0,0 @@
-import styled from 'styled-components';
-import { PreviewText } from '../../styles';
-export const BubbleText = styled(PreviewText).withConfig({
-  displayName: "BubbleText",
-  componentId: "sc-va3yjo-0"
-})(["white-space:pre-wrap;"]);

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

@@ -1,6 +0,0 @@
-import type { WhatsAppMessage } from '../../types';
-/** Props of {@link WhatsAppMessageBubble}. */
-export interface WhatsAppMessageBubbleProps {
-    /** Message rendered by the bubble. */
-    message: WhatsAppMessage;
-}