@pushwoosh/dumb-components 1.1.224 → 1.1.226

package/Switch/Switch.d.ts

@@ -1,7 +1,7 @@
 import { type ReactElement } from 'react';
 import type { SwitchProps } from './types';
 /**
- * Toggle switch for a boolean value, with an optional label on either side.
+ * Toggle switch for a boolean value, with an optional label on either side; a click anywhere flips it.
  *
  * @example
  * <Switch enabled={on} onChange={() => setOn((v) => !v)}>Notifications</Switch>

package/Switch/Switch.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import { Container, Box, Circle, Label } from './styles';
 /**
- * Toggle switch for a boolean value, with an optional label on either side.
+ * Toggle switch for a boolean value, with an optional label on either side; a click anywhere flips it.
  *
  * @example
  * <Switch enabled={on} onChange={() => setOn((v) => !v)}>Notifications</Switch>
@@ -13,12 +14,18 @@ export function Switch({
   children,
   onChange
 }) {
+  const handleClick = useCallback(() => {
+    if (!isDisabled) {
+      onChange();
+    }
+  }, [isDisabled, onChange]);
   return _jsxs(Container, {
     labelPosition: labelPosition,
+    isDisabled: isDisabled,
+    onClick: handleClick,
     children: [_jsx(Box, {
       enabled: enabled,
       isDisabled: isDisabled,
-      onClick: onChange,
       children: _jsx(Circle, {
         enabled: enabled,
         isDisabled: isDisabled

package/Switch/__tests__/Switch.test.d.ts

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

package/Switch/__tests__/Switch.test.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Switch } from '../Switch';
+describe('Switch', () => {
+  it('flips on a click on the label, not only on the toggle', () => {
+    const onChange = jest.fn();
+    render(_jsx(Switch, {
+      enabled: false,
+      onChange: onChange,
+      children: "Save inbox"
+    }));
+    fireEvent.click(screen.getByText('Save inbox'));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+  it('flips on a click on the toggle', () => {
+    const onChange = jest.fn();
+    const {
+      container
+    } = render(_jsx(Switch, {
+      enabled: true,
+      onChange: onChange,
+      children: "Save inbox"
+    }));
+    const box = container.querySelector('[tabindex="0"]');
+    if (!box) {
+      throw new Error('toggle not rendered');
+    }
+    fireEvent.click(box);
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+  it('stays silent while disabled, label and toggle alike', () => {
+    const onChange = jest.fn();
+    const {
+      container
+    } = render(_jsx(Switch, {
+      isDisabled: true,
+      onChange: onChange,
+      children: "Save inbox"
+    }));
+    fireEvent.click(screen.getByText('Save inbox'));
+    fireEvent.click(container.querySelector('[tabindex="0"]'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/Switch/styles.js

@@ -37,9 +37,11 @@ const cssActive = css(["&:active{background:", ";border:2px solid ", ";}"], Colo
 export const Container = styled.div.withConfig({
   displayName: "Container",
   componentId: "sc-csdrg2-0"
-})(["display:flex;align-items:center;flex-direction:", ";"], ({
+})(["display:flex;align-items:center;flex-direction:", ";cursor:", ";"], ({
   labelPosition
-}) => labelPosition === 'left' ? 'row-reverse' : 'row');
+}) => labelPosition === 'left' ? 'row-reverse' : 'row', ({
+  isDisabled
+}) => isDisabled ? 'not-allowed' : 'pointer');
 export const Box = styled.div.attrs({
   tabIndex: '0'
 }).withConfig({

package/Switch/types.d.ts

@@ -12,9 +12,10 @@ export interface SwitchProps {
     /** Fires when the toggle is clicked; flip `enabled` in the handler. */
     onChange: () => void;
 }
-/** Internal style prop carrying the label side. */
+/** Internal style props carrying the label side and the disabled state. */
 export interface AlignProps {
     labelPosition?: string;
+    isDisabled?: boolean;
 }
 /** Internal style prop carrying the toggle state. */
 export interface ComponentProps {

package/WhatsAppPreview/WhatsAppPreview.d.ts

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
 import type { WhatsAppPreviewProps } from './types';
-/** Renders a WhatsApp conversation the way the recipient sees it, WhatsApp markup included. */
+/** Renders a WhatsApp message the way the recipient sees it, WhatsApp markup and attachments included. */
 export declare function WhatsAppPreview(props: WhatsAppPreviewProps): ReactElement;

package/WhatsAppPreview/WhatsAppPreview.js

@@ -1,105 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Color } from '@pushwoosh/kit-constants';
-import { Horizontal, Rows, Vertical } from '@pushwoosh/kit-helpers';
-import { Text } from '@pushwoosh/kit-typography';
-import { WhatsAppChatHeader } from './components/WhatsAppChatHeader';
-import { WhatsAppDateChip } from './components/WhatsAppDateChip';
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
 import { WhatsAppMessageBubble } from './components/WhatsAppMessageBubble';
-import { WhatsAppStatusBar } from './components/WhatsAppStatusBar';
-import { WHATSAPP_COLOR, WHATSAPP_PREVIEW_HEIGHT, WHATSAPP_PREVIEW_WIDTH, WHATSAPP_STATUS_BAR_TIME } from './constants';
+import { WHATSAPP_BACKDROP_PADDING, WHATSAPP_BACKDROP_WIDTH, WHATSAPP_BUBBLE_PADDING } from './constants';
 import { isMessageDrawable } from './helpers';
-import { WhatsAppWallpaperPattern } from './icons';
 import { Lang } from './polyglot';
-import { DeviceBox, WallpaperImage, WallpaperLayer } from './styles';
+import { Backdrop, Bubble, PreviewText } from './styles';
 import { Spinner } from '../Spinner';
-/** Renders a WhatsApp conversation the way the recipient sees it, WhatsApp markup included. */
+/** Renders a WhatsApp message the way the recipient sees it, WhatsApp markup and attachments included. */
 export function WhatsAppPreview(props) {
   const {
-    messages = [],
-    contactName = '',
-    contactSubtitle,
-    avatarUrl,
-    dateLabel,
-    statusBarTime = WHATSAPP_STATUS_BAR_TIME,
-    wallpaperUrl,
+    message,
     emptyText,
-    width = WHATSAPP_PREVIEW_WIDTH,
-    height = WHATSAPP_PREVIEW_HEIGHT,
     isLoading = false
   } = props;
-  const drawnMessages = messages.filter(isMessageDrawable);
-  const separator = dateLabel === undefined ? _jsx(Lang, {
-    message: "DUMB.WHATSAPP_PREVIEW.TODAY"
-  }) : dateLabel;
-  return _jsx(DeviceBox, {
-    "$height": height,
-    "$width": width,
-    children: _jsxs(Rows, {
-      "$bgColor": WHATSAPP_COLOR.HEADER,
-      "$borderRadius": 39,
-      "$overflow": "hidden",
-      "$sizes": "auto auto minmax(0, 1fr)",
-      children: [_jsx(WhatsAppStatusBar, {
-        time: statusBarTime
-      }), _jsx(WhatsAppChatHeader, {
-        avatarUrl: avatarUrl,
-        name: contactName,
-        subtitle: contactSubtitle ?? _jsx(Lang, {
-          message: "DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT"
+  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, {
+      "$alignItems": "center",
+      "$justifyContent": "center",
+      "$padding": WHATSAPP_BUBBLE_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"
         })
-      }), _jsxs(Vertical, {
-        "$bgColor": WHATSAPP_COLOR.SCREEN,
-        "$overflow": "hidden",
-        "$position": "relative",
-        children: [_jsx(WallpaperLayer, {
-          children: wallpaperUrl ? _jsx(WallpaperImage, {
-            alt: "",
-            src: wallpaperUrl
-          }) : _jsx(WhatsAppWallpaperPattern, {})
-        }), isLoading && _jsx(Horizontal, {
-          "$alignItems": "center",
-          "$inset": 0,
-          "$justifyContent": "center",
-          "$position": "absolute",
-          children: _jsx(Spinner, {
-            color: Color.LOCKED,
-            size: "medium"
-          })
-        }), !isLoading && drawnMessages.length === 0 && _jsx(Horizontal, {
-          "$alignItems": "center",
-          "$inset": 0,
-          "$justifyContent": "center",
-          "$padding": 24,
-          "$position": "absolute",
-          children: _jsx(Text, {
-            "$color": WHATSAPP_COLOR.SUBTITLE,
-            "$variant": "footnote",
-            children: emptyText ?? _jsx(Lang, {
-              message: "DUMB.WHATSAPP_PREVIEW.EMPTY"
-            })
-          })
-        }), !isLoading && drawnMessages.length > 0 && _jsx(Vertical, {
-          "$inset": 0,
-          "$overflowY": "auto",
-          "$position": "absolute",
-          children: _jsxs(Vertical, {
-            "$alignContent": "start",
-            "$gap": 8,
-            "$minHeight": "100%",
-            "$padding": {
-              top: 12,
-              right: 9,
-              bottom: 16,
-              left: 9
-            },
-            children: [separator && _jsx(WhatsAppDateChip, {
-              children: separator
-            }), drawnMessages.map((message, index) => _jsx(WhatsAppMessageBubble, {
-              message: message
-            }, message.id ?? index))]
-          })
-        })]
-      })]
-    })
+      })
+    }), !isLoading && isDrawable && _jsx(WhatsAppMessageBubble, {
+      message: message
+    })]
   });
 }

package/WhatsAppPreview/__tests__/attachment.test.js

@@ -53,6 +53,18 @@ describe('attachment meta', () => {
       source: SOURCE
     })).toBe('');
   });
+  it('falls back to the MIME subtype when the name has no extension', () => {
+    expect(getAttachmentExtension({
+      name: 'Title',
+      source: SOURCE,
+      mimeType: 'application/PDF'
+    })).toBe('pdf');
+    expect(getAttachmentExtension({
+      name: 'Title.docx',
+      source: SOURCE,
+      mimeType: 'application/pdf'
+    })).toBe('docx');
+  });
   it('writes sizes the way WhatsApp does', () => {
     expect(formatAttachmentSize(912)).toBe('912 B');
     expect(formatAttachmentSize(69_632)).toBe('68 kB');
@@ -70,28 +82,22 @@ describe('attachment meta', () => {
 describe('isMessageDrawable', () => {
   it('keeps a message that has a body or a file', () => {
     expect(isMessageDrawable({
-      direction: 'incoming',
       text: 'hi'
     })).toBe(true);
     expect(isMessageDrawable({
-      direction: 'incoming',
-      attachment: {
+      attachments: [{
         name: 'a.jpg',
         source: SOURCE
-      }
+      }]
     })).toBe(true);
   });
   it('drops a message with nothing to show', () => {
+    expect(isMessageDrawable({})).toBe(false);
     expect(isMessageDrawable({
-      direction: 'incoming',
-      time: '11:06'
-    })).toBe(false);
-    expect(isMessageDrawable({
-      direction: 'incoming',
-      attachment: {
+      attachments: [{
         name: 'a.jpg',
         source: ''
-      }
+      }]
     })).toBe(false);
   });
 });

package/WhatsAppPreview/components/WhatsAppAttachment/WhatsAppAttachment.js

@@ -1,29 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
-import { Vertical } from '@pushwoosh/kit-helpers';
-import { Text } from '@pushwoosh/kit-typography';
-import { DocumentBox, DocumentGlyph, MediaBox, MediaDuration, MediaMeta, MediaOverlay, PlayButton, PlayGlyph } from './styles';
-import { WHATSAPP_COLOR } from '../../constants';
+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 { formatAttachmentDuration, formatAttachmentSize, getAttachmentExtension, resolveAttachmentKind, toVideoPosterSource } from '../../helpers';
 import { WhatsAppDocumentIcon, WhatsAppPlayIcon, WhatsAppVideoIcon } from '../../icons';
-const DOCUMENT_GLYPH_COLOR = {
-  pdf: WHATSAPP_COLOR.DOCUMENT_PDF,
-  doc: WHATSAPP_COLOR.DOCUMENT_TEXT,
-  docx: WHATSAPP_COLOR.DOCUMENT_TEXT
-};
+import { useLang } from '../../polyglot';
+import { PreviewText } from '../../styles';
 /** Draws an attached file inside a chat bubble: image, video with its play badge, or a document card. */
 export function WhatsAppAttachment(props) {
   const {
-    attachment,
-    meta,
-    hasCaption = false
+    attachment
   } = props;
   const {
     name,
     source,
     size,
-    duration
+    duration,
+    thumbnailSource,
+    pageCount
   } = attachment;
+  const lang = useLang();
   const [readDuration, setReadDuration] = useState(null);
   const kind = resolveAttachmentKind(attachment);
   const extension = getAttachmentExtension(attachment);
@@ -34,24 +31,32 @@ export function WhatsAppAttachment(props) {
     setReadDuration(Number.isFinite(length) ? length : null);
   }, []);
   if (kind === 'document') {
-    const meaning = [size === undefined ? '' : formatAttachmentSize(size), extension].filter(Boolean);
+    const meaning = [pageCount === undefined ? '' : lang({
+      message: 'DUMB.WHATSAPP_PREVIEW.DOCUMENT_PAGES',
+      count: pageCount
+    }), size === undefined ? '' : formatAttachmentSize(size), extension].filter(Boolean);
     return _jsxs(DocumentBox, {
-      "$hasCaption": hasCaption,
-      children: [_jsx(DocumentGlyph, {
-        "$color": DOCUMENT_GLYPH_COLOR[extension] ?? WHATSAPP_COLOR.DOCUMENT_GENERIC,
-        children: _jsx(WhatsAppDocumentIcon, {})
-      }), _jsxs(Vertical, {
-        "$gap": 1,
-        "$minWidth": 0,
-        children: [_jsx(Text, {
-          "$color": WHATSAPP_COLOR.BUBBLE_TEXT,
-          "$ellipsis": true,
-          "$variant": "standard",
-          children: name
-        }), meaning.length > 0 && _jsx(Text, {
-          "$color": WHATSAPP_COLOR.BUBBLE_META,
-          "$variant": "footnote",
-          children: meaning.join(' · ')
+      children: [thumbnailSource && _jsx(DocumentThumbnail, {
+        alt: name,
+        src: thumbnailSource
+      }), _jsxs(Columns, {
+        "$alignItems": "center",
+        "$gap": 10,
+        "$padding": "8px 10px",
+        "$sizes": "auto minmax(0, 1fr)",
+        "$width": "100%",
+        children: [_jsx(DocumentGlyph, {
+          children: _jsx(WhatsAppDocumentIcon, {})
+        }), _jsxs(Vertical, {
+          "$gap": 1,
+          "$minWidth": 0,
+          children: [_jsx(PreviewText, {
+            "$ellipsis": true,
+            children: name
+          }), meaning.length > 0 && _jsx(PreviewText, {
+            "$color": Color.LOCKED,
+            children: meaning.join(' • ')
+          })]
         })]
       })]
     });
@@ -59,8 +64,8 @@ export function WhatsAppAttachment(props) {
   const length = duration ?? readDuration;
   const isVideo = kind === 'video';
   return _jsxs(MediaBox, {
-    "$hasCaption": hasCaption,
-    children: [isVideo ? _jsx("video", {
+    "$hasOverlay": isVideo,
+    children: [isVideo && !thumbnailSource ? _jsx("video", {
       muted: true,
       playsInline: true,
       onLoadedMetadata: handleLoadedMetadata,
@@ -68,17 +73,15 @@ export function WhatsAppAttachment(props) {
       src: toVideoPosterSource(source)
     }) : _jsx("img", {
       alt: name,
-      src: source
+      src: thumbnailSource ?? source
     }), isVideo && _jsx(PlayButton, {
       children: _jsx(PlayGlyph, {
         children: _jsx(WhatsAppPlayIcon, {})
       })
-    }), (isVideo || meta) && _jsxs(MediaOverlay, {
-      children: [isVideo ? _jsxs(MediaDuration, {
+    }), isVideo && _jsx(MediaOverlay, {
+      children: _jsxs(MediaDuration, {
         children: [_jsx(WhatsAppVideoIcon, {}), length === null ? null : formatAttachmentDuration(length)]
-      }) : _jsx("span", {}), _jsx(MediaMeta, {
-        children: meta
-      })]
+      })
     })]
   });
 }

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

@@ -12,9 +12,11 @@ export declare const MediaBox: import("styled-components").StyledComponent<"div"
 } & {
     $position: string;
     $bgColor: "#0B141A";
+    $borderRadius: number;
+    $justifyItems: string;
 } & {
-    $hasCaption: boolean;
-}, "$gridAutoFlow" | "$bgColor" | "$position">;
+    $hasOverlay: boolean;
+}, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$position" | "$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;
@@ -61,18 +63,16 @@ export declare const MediaOverlay: import("styled-components").StyledComponent<"
     $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;
+    $gridAutoFlow: string;
 } & {
     $alignItems: string;
-    $gap: number;
-    $sizes: string;
     $padding: {
         top: number;
         right: number;
         bottom: number;
         left: number;
     };
-}, "$padding" | "$alignItems" | "$gap" | "$sizes">;
+}, "$gridAutoFlow" | "$padding" | "$alignItems">;
 export declare const MediaDuration: import("styled-components").StyledComponent<"span", any, {
     $color?: string | undefined;
     $uppercase?: boolean | undefined;
@@ -82,20 +82,6 @@ export declare const MediaDuration: import("styled-components").StyledComponent<
     $variant: "footnote";
     $color: "#FFFFFF";
 }, "$color" | "$variant">;
-export declare const MediaMeta: 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;
-} & {
-    $justifyContent: string;
-}, "$gridAutoFlow" | "$justifyContent">;
 export declare const DocumentBox: 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;
@@ -106,16 +92,13 @@ export declare const DocumentBox: import("styled-components").StyledComponent<"d
     $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;
+    $gridAutoFlow: string;
 } & {
-    $alignItems: string;
-    $gap: number;
-    $sizes: string;
-    $padding: string;
     $bgColor: "#F5F6F6";
-} & {
-    $hasCaption: boolean;
-}, "$bgColor" | "$padding" | "$alignItems" | "$gap" | "$sizes">;
+    $borderRadius: number;
+    $width: string;
+}, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$width">;
+export declare const DocumentThumbnail: import("styled-components").StyledComponent<"img", any, {}, never>;
 export declare const DocumentGlyph: 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;
@@ -127,6 +110,4 @@ export declare const DocumentGlyph: import("styled-components").StyledComponent<
     $placeItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue | undefined;
 } & {
     $gridAutoFlow: string;
-} & {
-    $color: string;
 }, "$gridAutoFlow">;

package/WhatsAppPreview/components/WhatsAppAttachment/styles.js

@@ -1,17 +1,18 @@
-import styled, { css } from 'styled-components';
-import { Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import styled from 'styled-components';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { Text } from '@pushwoosh/kit-typography';
-import { WHATSAPP_COLOR, WHATSAPP_MEDIA_MAX_HEIGHT } from '../../constants';
-const bubbleInset = css(["margin:-3px -5px ", ";border-radius:6px;overflow:hidden;"], ({
-  $hasCaption
-}) => $hasCaption ? '5px' : '-4px');
+import { WHATSAPP_COLOR, WHATSAPP_MEDIA_MAX_HEIGHT, WHATSAPP_MEDIA_MIN_HEIGHT, WHATSAPP_MEDIA_RADIUS } from '../../constants';
 export const MediaBox = styled(Vertical).attrs({
   $position: 'relative',
-  $bgColor: WHATSAPP_COLOR.MEDIA_BACKDROP
+  $bgColor: WHATSAPP_COLOR.MEDIA_BACKDROP,
+  $borderRadius: WHATSAPP_MEDIA_RADIUS,
+  $justifyItems: 'start'
 }).withConfig({
   displayName: "MediaBox",
   componentId: "sc-1uezfps-0"
-})(["", " img,video{display:block;width:100%;max-height:", "px;object-fit:cover;}"], bubbleInset, WHATSAPP_MEDIA_MAX_HEIGHT);
+})(["overflow:hidden;width:fit-content;max-width:100%;img,video{display:block;width:auto;max-width:100%;max-height:", "px;", "}"], WHATSAPP_MEDIA_MAX_HEIGHT, ({
+  $hasOverlay
+}) => $hasOverlay ? `min-height: ${WHATSAPP_MEDIA_MIN_HEIGHT}px;` : '');
 export const PlayButton = styled(Horizontal).attrs({
   $alignItems: 'center',
   $justifyContent: 'center',
@@ -32,20 +33,18 @@ export const PlayGlyph = styled(Horizontal).attrs({
   displayName: "PlayGlyph",
   componentId: "sc-1uezfps-2"
 })(["color:", ";svg{display:block;margin-left:3px;}"], WHATSAPP_COLOR.PLAY_GLYPH);
-export const MediaOverlay = styled(Columns).attrs({
+export const MediaOverlay = styled(Horizontal).attrs({
   $alignItems: 'end',
-  $gap: 8,
-  $sizes: 'auto minmax(0, 1fr)',
   $padding: {
-    top: 24,
+    top: 12,
     right: 8,
-    bottom: 5,
+    bottom: 4,
     left: 8
   }
 }).withConfig({
   displayName: "MediaOverlay",
   componentId: "sc-1uezfps-3"
-})(["position:absolute;right:0;bottom:0;left:0;background:linear-gradient(to top,", ",transparent);pointer-events:none;"], WHATSAPP_COLOR.MEDIA_SCRIM);
+})(["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
@@ -53,25 +52,19 @@ export const MediaDuration = styled(Text).attrs({
   displayName: "MediaDuration",
   componentId: "sc-1uezfps-4"
 })(["display:inline-flex;align-items:center;gap:4px;svg{display:block;}"]);
-export const MediaMeta = styled(Horizontal).attrs({
-  $justifyContent: 'end'
-}).withConfig({
-  displayName: "MediaMeta",
-  componentId: "sc-1uezfps-5"
-})(["color:", ";svg{color:", ";}"], WHATSAPP_COLOR.MEDIA_META, WHATSAPP_COLOR.MEDIA_META);
-export const DocumentBox = styled(Columns).attrs({
-  $alignItems: 'center',
-  $gap: 10,
-  $sizes: 'auto minmax(0, 1fr)',
-  $padding: '8px 10px',
-  $bgColor: WHATSAPP_COLOR.DOCUMENT_CARD
+export const DocumentBox = styled(Vertical).attrs({
+  $bgColor: WHATSAPP_COLOR.DOCUMENT_CARD,
+  $borderRadius: WHATSAPP_MEDIA_RADIUS,
+  $width: '100%'
 }).withConfig({
   displayName: "DocumentBox",
+  componentId: "sc-1uezfps-5"
+})(["overflow:hidden;"]);
+export const DocumentThumbnail = styled.img.withConfig({
+  displayName: "DocumentThumbnail",
   componentId: "sc-1uezfps-6"
-})(["", ""], bubbleInset);
+})(["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"
-})(["color:", ";svg{display:block;}"], ({
-  $color
-}) => $color);
+})(["color:", ";svg{display:block;}"], WHATSAPP_COLOR.DOCUMENT_GLYPH);

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

@@ -1,11 +1,6 @@
-import type { ReactNode } from 'react';
 import type { WhatsAppAttachment } from '../../types';
 /** Props of {@link WhatsAppAttachment}. */
 export interface WhatsAppAttachmentProps {
     /** File to draw. */
     attachment: WhatsAppAttachment;
-    /** Time and ticks overlaid on the media; pass it only when the bubble has no caption below. */
-    meta?: ReactNode;
-    /** Keep the bottom inset of the bubble instead of hugging its padding. */
-    hasCaption?: boolean;
 }

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

@@ -1,4 +1,4 @@
 import { type ReactElement } from 'react';
 import type { WhatsAppMessageBubbleProps } from './types';
-/** Single chat bubble: attachment, body, time and — for outgoing messages — the delivery ticks. */
+/** Single chat bubble: attachments on top, message body underneath. */
 export declare function WhatsAppMessageBubble(props: WhatsAppMessageBubbleProps): ReactElement;