@pushwoosh/dumb-components 1.1.209 → 1.1.210

package/WhatsAppPreview/WhatsAppPreview.d.ts

@@ -0,0 +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. */
+export declare function WhatsAppPreview(props: WhatsAppPreviewProps): ReactElement;

package/WhatsAppPreview/WhatsAppPreview.js

@@ -0,0 +1,103 @@
+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 { 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 { WhatsAppWallpaperPattern } from './icons';
+import { Lang } from './polyglot';
+import { DeviceBox, WallpaperImage, WallpaperLayer } from './styles';
+import { Spinner } from '../Spinner';
+/** Renders a WhatsApp conversation the way the recipient sees it, WhatsApp markup included. */
+export function WhatsAppPreview(props) {
+  const {
+    messages = [],
+    contactName = '',
+    contactSubtitle,
+    avatarUrl,
+    dateLabel,
+    statusBarTime = WHATSAPP_STATUS_BAR_TIME,
+    wallpaperUrl,
+    emptyText,
+    width = WHATSAPP_PREVIEW_WIDTH,
+    height = WHATSAPP_PREVIEW_HEIGHT,
+    isLoading = false
+  } = props;
+  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"
+        })
+      }), _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 && messages.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 && messages.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
+            }), messages.map((message, index) => _jsx(WhatsAppMessageBubble, {
+              message: message
+            }, message.id ?? index))]
+          })
+        })]
+      })]
+    })
+  });
+}

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

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

package/WhatsAppPreview/__tests__/parseWhatsAppMarkup.test.js

@@ -0,0 +1,59 @@
+import { parseWhatsAppMarkup } from '../helpers';
+describe('parseWhatsAppMarkup', () => {
+  it('keeps plain text as a single node', () => {
+    expect(parseWhatsAppMarkup('Hi there')).toEqual([{
+      text: 'Hi there'
+    }]);
+  });
+  it('marks bold, italic and strikethrough runs', () => {
+    expect(parseWhatsAppMarkup('*a* _b_ ~c~')).toEqual([{
+      style: 'bold',
+      children: [{
+        text: 'a'
+      }]
+    }, {
+      text: ' '
+    }, {
+      style: 'italic',
+      children: [{
+        text: 'b'
+      }]
+    }, {
+      text: ' '
+    }, {
+      style: 'strike',
+      children: [{
+        text: 'c'
+      }]
+    }]);
+  });
+  it('nests styles', () => {
+    expect(parseWhatsAppMarkup('*bold _both_*')).toEqual([{
+      style: 'bold',
+      children: [{
+        text: 'bold '
+      }, {
+        style: 'italic',
+        children: [{
+          text: 'both'
+        }]
+      }]
+    }]);
+  });
+  it('keeps monospace content literal', () => {
+    expect(parseWhatsAppMarkup('```*raw*```')).toEqual([{
+      style: 'mono',
+      children: [{
+        text: '*raw*'
+      }]
+    }]);
+  });
+  it('leaves unpaired and empty markers as text', () => {
+    expect(parseWhatsAppMarkup('2 * 3 = 6')).toEqual([{
+      text: '2 * 3 = 6'
+    }]);
+    expect(parseWhatsAppMarkup('**')).toEqual([{
+      text: '**'
+    }]);
+  });
+});

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,39 @@
+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

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

package/WhatsAppPreview/components/WhatsAppChatHeader/index.js

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

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

@@ -0,0 +1,47 @@
+export declare const HeaderBox: 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;
+    $padding: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    $bgColor: "#F6F3EF";
+    $border: {
+        bottom: string;
+    };
+}, "$bgColor" | "$border" | "$padding" | "$alignItems" | "$gap" | "$sizes">;
+export declare const HeaderAvatar: 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;
+    $width: number;
+    $height: number;
+    $borderRadius: string;
+    $overflow: string;
+    $bgColor: "#CFD6DB";
+}, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$height" | "$overflow" | "$width" | "$alignItems" | "$justifyContent">;
+export declare const HeaderAvatarImage: import("styled-components").StyledComponent<"img", any, {}, never>;

package/WhatsAppPreview/components/WhatsAppChatHeader/styles.js

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import { Columns, Horizontal } from '@pushwoosh/kit-helpers';
+import { WHATSAPP_COLOR } from '../../constants';
+export const HeaderBox = styled(Columns).attrs({
+  $alignItems: 'center',
+  $gap: 10,
+  $sizes: 'auto auto minmax(0, 1fr) auto',
+  $padding: {
+    top: 6,
+    right: 14,
+    bottom: 10,
+    left: 14
+  },
+  $bgColor: WHATSAPP_COLOR.HEADER,
+  $border: {
+    bottom: `1px solid ${WHATSAPP_COLOR.HEADER_BORDER}`
+  }
+}).withConfig({
+  displayName: "HeaderBox",
+  componentId: "sc-7fu7hq-0"
+})(["color:", ";svg{display:block;}"], WHATSAPP_COLOR.ACTION);
+export const HeaderAvatar = styled(Horizontal).attrs({
+  $alignItems: 'center',
+  $justifyContent: 'center',
+  $width: 34,
+  $height: 34,
+  $borderRadius: '50%',
+  $overflow: 'hidden',
+  $bgColor: WHATSAPP_COLOR.AVATAR
+}).withConfig({
+  displayName: "HeaderAvatar",
+  componentId: "sc-7fu7hq-1"
+})(["color:", ";"], WHATSAPP_COLOR.AVATAR_GLYPH);
+export const HeaderAvatarImage = styled.img.withConfig({
+  displayName: "HeaderAvatarImage",
+  componentId: "sc-7fu7hq-2"
+})(["width:100%;height:100%;object-fit:cover;"]);

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+/** Props of {@link WhatsAppChatHeader}. */
+export interface WhatsAppChatHeaderProps {
+    /** Business name. */
+    name: string;
+    /** Caption under the name. */
+    subtitle: ReactNode;
+    /** Avatar image URL; a glyph is drawn when absent. */
+    avatarUrl?: string;
+}

package/WhatsAppPreview/components/WhatsAppChatHeader/types.js

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

package/WhatsAppPreview/components/WhatsAppDateChip/WhatsAppDateChip.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { WhatsAppDateChipProps } from './types';
+/** Date separator drawn above the first message of a day. */
+export declare function WhatsAppDateChip(props: WhatsAppDateChipProps): ReactElement;

package/WhatsAppPreview/components/WhatsAppDateChip/WhatsAppDateChip.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ShapeRadius } from '@pushwoosh/kit-constants';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { DateChipText } from './styles';
+import { WHATSAPP_COLOR } from '../../constants';
+/** Date separator drawn above the first message of a day. */
+export function WhatsAppDateChip(props) {
+  const {
+    children
+  } = props;
+  return _jsx(Horizontal, {
+    "$justifyContent": "center",
+    children: _jsx(Vertical, {
+      "$bgColor": WHATSAPP_COLOR.INCOMING_BUBBLE,
+      "$borderRadius": ShapeRadius.SECTION,
+      "$boxShadow": `0 1px 0.5px ${WHATSAPP_COLOR.BUBBLE_SHADOW}`,
+      "$padding": {
+        vertical: 5,
+        horizontal: 12
+      },
+      children: _jsx(DateChipText, {
+        "$color": WHATSAPP_COLOR.DATE_CHIP_TEXT,
+        "$variant": "footnote",
+        children: children
+      })
+    })
+  });
+}

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

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

package/WhatsAppPreview/components/WhatsAppDateChip/index.js

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

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

@@ -0,0 +1,6 @@
+export declare const DateChipText: import("styled-components").StyledComponent<"span", any, {
+    $color?: string | undefined;
+    $uppercase?: boolean | undefined;
+    $ellipsis?: boolean | undefined;
+    $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
+}, never>;

package/WhatsAppPreview/components/WhatsAppDateChip/styles.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { Text } from '@pushwoosh/kit-typography';
+export const DateChipText = styled(Text).withConfig({
+  displayName: "DateChipText",
+  componentId: "sc-1n9qlgp-0"
+})(["display:block;&::first-letter{text-transform:uppercase;}"]);

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

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+/** Props of {@link WhatsAppDateChip}. */
+export interface WhatsAppDateChipProps {
+    /** Label inside the chip, e.g. `Today`. */
+    children: ReactNode;
+}

package/WhatsAppPreview/components/WhatsAppDateChip/types.js

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

package/WhatsAppPreview/components/WhatsAppFormattedText/WhatsAppFormattedText.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { WhatsAppFormattedTextProps } from './types';
+/** Renders message text with WhatsApp inline markup applied. */
+export declare function WhatsAppFormattedText(props: WhatsAppFormattedTextProps): ReactElement;

package/WhatsAppPreview/components/WhatsAppFormattedText/WhatsAppFormattedText.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { Text } from '@pushwoosh/kit-typography';
+import { parseWhatsAppMarkup } from '../../helpers';
+const TAGS = {
+  bold: 'b',
+  italic: 'i',
+  strike: 's'
+};
+function renderNodes(nodes) {
+  return nodes.map((node, index) => {
+    const key = `${index}-${node.style || 'text'}`;
+    if (!node.style) {
+      return _jsx(Fragment, {
+        children: node.text
+      }, key);
+    }
+    if (node.style === 'mono') {
+      return _jsx(Text, {
+        "$variant": "code",
+        as: "code",
+        children: renderNodes(node.children || [])
+      }, key);
+    }
+    const Tag = TAGS[node.style];
+    return _jsx(Tag, {
+      children: renderNodes(node.children || [])
+    }, key);
+  });
+}
+/** Renders message text with WhatsApp inline markup applied. */
+export function WhatsAppFormattedText(props) {
+  const {
+    text
+  } = props;
+  return _jsx(_Fragment, {
+    children: renderNodes(parseWhatsAppMarkup(text))
+  });
+}

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

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

package/WhatsAppPreview/components/WhatsAppFormattedText/index.js

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

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

@@ -0,0 +1,16 @@
+/** Inline style WhatsApp markup can apply to a text run. */
+export type WhatsAppTextStyle = 'bold' | 'italic' | 'strike' | 'mono';
+/** Node of the tree produced by `parseWhatsAppMarkup`. */
+export interface WhatsAppTextNode {
+    /** Style applied to `children`; absent on a plain text run. */
+    style?: WhatsAppTextStyle;
+    /** Literal text of a leaf node. */
+    text?: string;
+    /** Nested runs of a styled node. */
+    children?: WhatsAppTextNode[];
+}
+/** Props of {@link WhatsAppFormattedText}. */
+export interface WhatsAppFormattedTextProps {
+    /** Raw message text with WhatsApp markup. */
+    text: string;
+}

package/WhatsAppPreview/components/WhatsAppFormattedText/types.js

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

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

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

package/WhatsAppPreview/components/WhatsAppMessageBubble/WhatsAppMessageBubble.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Columns } from '@pushwoosh/kit-helpers';
+import { BubbleBox, BubbleMeta, BubbleText } from './styles';
+import { WhatsAppTickIcon, WhatsAppTicksIcon } from '../../icons';
+import { WhatsAppFormattedText } from '../WhatsAppFormattedText';
+/** Single chat bubble: body, time and — for outgoing messages — the delivery ticks. */
+export function WhatsAppMessageBubble(props) {
+  const {
+    message
+  } = props;
+  const {
+    direction,
+    text = '',
+    content,
+    time,
+    status
+  } = message;
+  const showTicks = direction === 'outgoing' && Boolean(status);
+  return _jsx(Columns, {
+    "$justifyItems": direction === 'outgoing' ? 'end' : 'start',
+    "$sizes": "minmax(0, 1fr)",
+    children: _jsxs(BubbleBox, {
+      "$direction": direction,
+      children: [_jsx(BubbleText, {
+        children: content ?? _jsx(WhatsAppFormattedText, {
+          text: text
+        })
+      }), (time || showTicks) && _jsxs(BubbleMeta, {
+        "$read": showTicks && status === 'read',
+        children: [time, showTicks && status === 'sent' && _jsx(WhatsAppTickIcon, {}), showTicks && status !== 'sent' && _jsx(WhatsAppTicksIcon, {})]
+      })]
+    })
+  });
+}

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

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

package/WhatsAppPreview/components/WhatsAppMessageBubble/index.js

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

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

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

package/WhatsAppPreview/components/WhatsAppMessageBubble/styles.js

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

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

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

package/WhatsAppPreview/components/WhatsAppMessageBubble/types.js

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

package/WhatsAppPreview/components/WhatsAppStatusBar/WhatsAppStatusBar.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { WhatsAppStatusBarProps } from './types';
+/** iOS status bar of the previewed device: clock, dynamic island and the signal indicators. */
+export declare function WhatsAppStatusBar(props: WhatsAppStatusBarProps): ReactElement;

package/WhatsAppPreview/components/WhatsAppStatusBar/WhatsAppStatusBar.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Text } from '@pushwoosh/kit-typography';
+import { StatusBarIndicators } from './styles';
+import { WHATSAPP_COLOR } from '../../constants';
+import { WhatsAppBatteryIcon, WhatsAppSignalIcon, WhatsAppWifiIcon } from '../../icons';
+/** iOS status bar of the previewed device: clock, dynamic island and the signal indicators. */
+export function WhatsAppStatusBar(props) {
+  const {
+    time
+  } = props;
+  return _jsxs(Horizontal, {
+    "$alignItems": "center",
+    "$height": 44,
+    "$justifyContent": "space-between",
+    "$padding": {
+      left: 28,
+      right: 22
+    },
+    "$position": "relative",
+    children: [_jsx(Text, {
+      "$color": WHATSAPP_COLOR.STATUS_BAR,
+      "$variant": "h4",
+      children: time
+    }), _jsx(Horizontal, {
+      "$bgColor": WHATSAPP_COLOR.ISLAND,
+      "$borderRadius": 13,
+      "$height": 26,
+      "$left": "calc(50% - 46px)",
+      "$position": "absolute",
+      "$top": 8,
+      "$width": 92
+    }), _jsxs(StatusBarIndicators, {
+      children: [_jsx(WhatsAppSignalIcon, {}), _jsx(WhatsAppWifiIcon, {}), _jsx(WhatsAppBatteryIcon, {})]
+    })]
+  });
+}

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

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

package/WhatsAppPreview/components/WhatsAppStatusBar/index.js

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

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

@@ -0,0 +1,15 @@
+export declare const StatusBarIndicators: 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;
+    $gap: number;
+}, "$gridAutoFlow" | "$alignItems" | "$gap">;