@pushwoosh/dumb-components 1.1.208 → 1.1.210

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

package/WhatsAppPreview/components/WhatsAppStatusBar/styles.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { WHATSAPP_COLOR } from '../../constants';
+export const StatusBarIndicators = styled(Horizontal).attrs({
+  $alignItems: 'center',
+  $gap: 5
+}).withConfig({
+  displayName: "StatusBarIndicators",
+  componentId: "sc-lua8an-0"
+})(["color:", ";svg{display:block;}"], WHATSAPP_COLOR.STATUS_BAR);

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

@@ -0,0 +1,5 @@
+/** Props of {@link WhatsAppStatusBar}. */
+export interface WhatsAppStatusBarProps {
+    /** Clock shown on the left side of the status bar. */
+    time: string;
+}

package/WhatsAppPreview/components/WhatsAppStatusBar/types.js

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

package/WhatsAppPreview/constants.d.ts

@@ -0,0 +1,26 @@
+/** Colours of the replicated WhatsApp chat UI; they are WhatsApp's, not Pushwoosh design tokens. */
+export declare const WHATSAPP_COLOR: {
+    readonly DEVICE_SHELL: "#DFE2E5";
+    readonly DEVICE_EDGE: "#C7CCD1";
+    readonly SCREEN: "#EFE7DE";
+    readonly HEADER: "#F6F3EF";
+    readonly HEADER_BORDER: "#DAD5CF";
+    readonly ISLAND: "#2B2F33";
+    readonly STATUS_BAR: "#0B0C0D";
+    readonly TITLE: "#111B21";
+    readonly SUBTITLE: "#667781";
+    readonly ACTION: "#3B4A54";
+    readonly AVATAR: "#CFD6DB";
+    readonly AVATAR_GLYPH: "#FFFFFF";
+    readonly INCOMING_BUBBLE: "#FFFFFF";
+    readonly OUTGOING_BUBBLE: "#D9FDD3";
+    readonly BUBBLE_TEXT: "#111B21";
+    readonly BUBBLE_META: "#667781";
+    readonly BUBBLE_SHADOW: "rgba(11, 20, 26, 0.13)";
+    readonly READ_TICK: "#53BDEB";
+    readonly DATE_CHIP_TEXT: "#54656F";
+    readonly WALLPAPER_INK: "#D8CCBD";
+};
+export declare const WHATSAPP_PREVIEW_WIDTH = 340;
+export declare const WHATSAPP_PREVIEW_HEIGHT = 640;
+export declare const WHATSAPP_STATUS_BAR_TIME = "12:02";

package/WhatsAppPreview/constants.js

@@ -0,0 +1,26 @@
+/** Colours of the replicated WhatsApp chat UI; they are WhatsApp's, not Pushwoosh design tokens. */
+export const WHATSAPP_COLOR = {
+  DEVICE_SHELL: '#DFE2E5',
+  DEVICE_EDGE: '#C7CCD1',
+  SCREEN: '#EFE7DE',
+  HEADER: '#F6F3EF',
+  HEADER_BORDER: '#DAD5CF',
+  ISLAND: '#2B2F33',
+  STATUS_BAR: '#0B0C0D',
+  TITLE: '#111B21',
+  SUBTITLE: '#667781',
+  ACTION: '#3B4A54',
+  AVATAR: '#CFD6DB',
+  AVATAR_GLYPH: '#FFFFFF',
+  INCOMING_BUBBLE: '#FFFFFF',
+  OUTGOING_BUBBLE: '#D9FDD3',
+  BUBBLE_TEXT: '#111B21',
+  BUBBLE_META: '#667781',
+  BUBBLE_SHADOW: 'rgba(11, 20, 26, 0.13)',
+  READ_TICK: '#53BDEB',
+  DATE_CHIP_TEXT: '#54656F',
+  WALLPAPER_INK: '#D8CCBD'
+};
+export const WHATSAPP_PREVIEW_WIDTH = 340;
+export const WHATSAPP_PREVIEW_HEIGHT = 640;
+export const WHATSAPP_STATUS_BAR_TIME = '12:02';

package/WhatsAppPreview/helpers.d.ts

@@ -0,0 +1,3 @@
+import type { WhatsAppTextNode } from './components/WhatsAppFormattedText/types';
+/** Splits WhatsApp markup (`*bold*`, `_italic_`, `~strike~`, backtick monospace) into a render tree. */
+export declare function parseWhatsAppMarkup(text: string): WhatsAppTextNode[];

package/WhatsAppPreview/helpers.js

@@ -0,0 +1,56 @@
+const MARKERS = [{
+  style: 'mono',
+  marker: '```'
+}, {
+  style: 'mono',
+  marker: '`'
+}, {
+  style: 'bold',
+  marker: '*'
+}, {
+  style: 'italic',
+  marker: '_'
+}, {
+  style: 'strike',
+  marker: '~'
+}];
+function findMarkerAt(text, index) {
+  return MARKERS.find(({
+    marker
+  }) => text.startsWith(marker, index)) || null;
+}
+/** Splits WhatsApp markup (`*bold*`, `_italic_`, `~strike~`, backtick monospace) into a render tree. */
+export function parseWhatsAppMarkup(text) {
+  const nodes = [];
+  let plain = '';
+  let index = 0;
+  const flush = () => {
+    if (plain) {
+      nodes.push({
+        text: plain
+      });
+      plain = '';
+    }
+  };
+  while (index < text.length) {
+    const found = findMarkerAt(text, index);
+    const openEnd = found ? index + found.marker.length : index;
+    const closeStart = found ? text.indexOf(found.marker, openEnd) : -1;
+    if (!found || closeStart <= openEnd) {
+      plain += text[index];
+      index += 1;
+      continue;
+    }
+    const inner = text.slice(openEnd, closeStart);
+    flush();
+    nodes.push({
+      style: found.style,
+      children: found.style === 'mono' ? [{
+        text: inner
+      }] : parseWhatsAppMarkup(inner)
+    });
+    index = closeStart + found.marker.length;
+  }
+  flush();
+  return nodes;
+}

package/WhatsAppPreview/icons/WhatsAppAvatarIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"><circle cx="12" cy="8.5" r="4"/><path d="M4 20.5c0-3.9 3.6-6.5 8-6.5s8 2.6 8 6.5z"/></svg>

package/WhatsAppPreview/icons/WhatsAppBackIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m9.5 1.5-8 8.5 8 8.5"/></svg>

package/WhatsAppPreview/icons/WhatsAppBatteryIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="12" fill="none"><rect width="21" height="10.8" x=".6" y=".6" stroke="currentColor" stroke-opacity=".4" stroke-width="1.2" rx="3"/><rect width="17.8" height="7.6" x="2.2" y="2.2" fill="currentColor" rx="1.8"/><path fill="currentColor" fill-opacity=".4" d="M23.2 4.2v3.6a2 2 0 0 0 0-3.6"/></svg>

package/WhatsAppPreview/icons/WhatsAppCallIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M6.3 2.5H3.9a1.6 1.6 0 0 0-1.6 1.8c.4 3.4 1.9 6.5 4.3 8.9s5.5 3.9 8.9 4.3a1.6 1.6 0 0 0 1.8-1.6v-2.4a1.2 1.2 0 0 0-1-1.2l-2.3-.4a1.2 1.2 0 0 0-1.2.5l-.8 1.1a10.6 10.6 0 0 1-4.6-4.6l1.1-.8A1.2 1.2 0 0 0 9 6.9l-.4-2.3a1.2 1.2 0 0 0-1.2-1Z"/></svg>

package/WhatsAppPreview/icons/WhatsAppMenuIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"><circle cx="10" cy="4" r="1.7"/><circle cx="10" cy="10" r="1.7"/><circle cx="10" cy="16" r="1.7"/></svg>

package/WhatsAppPreview/icons/WhatsAppSignalIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" fill="currentColor"><rect width="3" height="4" y="8" rx="1"/><rect width="3" height="6.5" x="5" y="5.5" rx="1"/><rect width="3" height="9" x="10" y="3" rx="1"/><rect width="3" height="12" x="15" rx="1"/></svg>

package/WhatsAppPreview/icons/WhatsAppTickIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="11" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"><path d="m1 6.1 2.6 2.7 7-6.8"/></svg>

package/WhatsAppPreview/icons/WhatsAppTicksIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="11" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"><path d="m1 6.1 2.6 2.7L9.2 2M6.4 6.9 8 8.8 14.6 2"/></svg>

package/WhatsAppPreview/icons/WhatsAppWallpaperPattern.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"><defs><pattern id="a" width="150" height="150" patternUnits="userSpaceOnUse"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"><path d="M18 24c-4-4-7-6-7-9a3.2 3.2 0 0 1 5.9-1.6A3.2 3.2 0 0 1 25 15c0 3-3 5-7 9m34-14h16a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-9l-5 4v-4h-2a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3m60 2 2.6 5.4 5.9.8-4.3 4.1 1 5.9-5.2-2.8-5.2 2.8 1-5.9-4.3-4.1 5.9-.8ZM14 56h12v8a6 6 0 0 1-12 0zm12 2h3a3 3 0 0 1 0 6h-3M13 74h14m33-6V54l10-2v14"/><circle cx="57" cy="68" r="3"/><circle cx="67" cy="66" r="3"/><path d="M100 58h4l2-3h8l2 3h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-20a2 2 0 0 1-2-2V60a2 2 0 0 1 2-2"/><circle cx="110" cy="65" r="4.5"/><circle cx="20" cy="105" r="9"/><path d="M16 108a5 5 0 0 0 8 0"/><circle cx="17" cy="102" r=".9"/><circle cx="23" cy="102" r=".9"/><path d="M54 100h18v13H54zm9 0v13m-9-13a4 4 0 0 1 9-2 4 4 0 0 1 9 2m28 10 22-9-9 22-4-9Z"/><circle cx="133" cy="133" r="8"/><path d="M133 128v5l3 2M126 24h10m-5-5v10"/></g></pattern></defs><rect width="100%" height="100%" fill="url(#a)"/></svg>

package/WhatsAppPreview/icons/WhatsAppWifiIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.7"><path d="M1 4.2a11 11 0 0 1 14 0M3.6 7a7.2 7.2 0 0 1 8.8 0M6.2 9.7a3.3 3.3 0 0 1 3.6 0"/></svg>

package/WhatsAppPreview/icons/index.d.ts

@@ -0,0 +1,10 @@
+export { default as WhatsAppAvatarIcon } from './WhatsAppAvatarIcon.svg';
+export { default as WhatsAppBackIcon } from './WhatsAppBackIcon.svg';
+export { default as WhatsAppBatteryIcon } from './WhatsAppBatteryIcon.svg';
+export { default as WhatsAppCallIcon } from './WhatsAppCallIcon.svg';
+export { default as WhatsAppMenuIcon } from './WhatsAppMenuIcon.svg';
+export { default as WhatsAppSignalIcon } from './WhatsAppSignalIcon.svg';
+export { default as WhatsAppTickIcon } from './WhatsAppTickIcon.svg';
+export { default as WhatsAppTicksIcon } from './WhatsAppTicksIcon.svg';
+export { default as WhatsAppWallpaperPattern } from './WhatsAppWallpaperPattern.svg';
+export { default as WhatsAppWifiIcon } from './WhatsAppWifiIcon.svg';

package/WhatsAppPreview/icons/index.js

@@ -0,0 +1,10 @@
+export { default as WhatsAppAvatarIcon } from './WhatsAppAvatarIcon.svg';
+export { default as WhatsAppBackIcon } from './WhatsAppBackIcon.svg';
+export { default as WhatsAppBatteryIcon } from './WhatsAppBatteryIcon.svg';
+export { default as WhatsAppCallIcon } from './WhatsAppCallIcon.svg';
+export { default as WhatsAppMenuIcon } from './WhatsAppMenuIcon.svg';
+export { default as WhatsAppSignalIcon } from './WhatsAppSignalIcon.svg';
+export { default as WhatsAppTickIcon } from './WhatsAppTickIcon.svg';
+export { default as WhatsAppTicksIcon } from './WhatsAppTicksIcon.svg';
+export { default as WhatsAppWallpaperPattern } from './WhatsAppWallpaperPattern.svg';
+export { default as WhatsAppWifiIcon } from './WhatsAppWifiIcon.svg';

package/WhatsAppPreview/index.d.ts

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

package/WhatsAppPreview/index.js

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

package/WhatsAppPreview/polyglot/index.d.ts

@@ -0,0 +1,2 @@
+import { type WhatsAppPreviewMessages } from './types';
+export declare const Lang: import("react").FC<import("../../polyglot").LangProps<WhatsAppPreviewMessages>>, useLang: () => (props: import("../../polyglot").LangProps<WhatsAppPreviewMessages>) => string;

package/WhatsAppPreview/polyglot/index.js

@@ -0,0 +1,34 @@
+import { messages as ar } from './messages_ar';
+import { messages as bn } from './messages_bn';
+import { messages as de } from './messages_de';
+import { messages as en } from './messages_en';
+import { messages as es } from './messages_es';
+import { messages as fr } from './messages_fr';
+import { messages as he } from './messages_he';
+import { messages as hi } from './messages_hi';
+import { messages as ja } from './messages_ja';
+import { messages as ko } from './messages_ko';
+import { messages as pt } from './messages_pt';
+import { messages as ru } from './messages_ru';
+import { messages as th } from './messages_th';
+import { messages as zh } from './messages_zh';
+import { createLang } from '../../polyglot';
+export const {
+  Lang,
+  useLang
+} = createLang({
+  ar,
+  bn,
+  de,
+  en,
+  es,
+  fr,
+  he,
+  hi,
+  ja,
+  ko,
+  pt,
+  ru,
+  th,
+  zh
+});

package/WhatsAppPreview/polyglot/messages_ar.d.ts

@@ -0,0 +1,3 @@
+import { type WhatsAppPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<WhatsAppPreviewMessages>;

package/WhatsAppPreview/polyglot/messages_ar.js

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

package/WhatsAppPreview/polyglot/messages_bn.d.ts

@@ -0,0 +1,3 @@
+import { type WhatsAppPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<WhatsAppPreviewMessages>;

package/WhatsAppPreview/polyglot/messages_bn.js

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

package/WhatsAppPreview/polyglot/messages_de.d.ts

@@ -0,0 +1,3 @@
+import { type WhatsAppPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<WhatsAppPreviewMessages>;

package/WhatsAppPreview/polyglot/messages_de.js

@@ -0,0 +1,5 @@
+export const messages = {
+  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': 'Unternehmenskonto',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'Die Nachricht ist leer…',
+  'DUMB.WHATSAPP_PREVIEW.TODAY': 'Heute'
+};

package/WhatsAppPreview/polyglot/messages_en.d.ts

@@ -0,0 +1,3 @@
+import { type WhatsAppPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<WhatsAppPreviewMessages>;

package/WhatsAppPreview/polyglot/messages_en.js

@@ -0,0 +1,5 @@
+export const messages = {
+  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': 'Business account',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'Message is empty…',
+  'DUMB.WHATSAPP_PREVIEW.TODAY': 'Today'
+};

package/WhatsAppPreview/polyglot/messages_es.d.ts

@@ -0,0 +1,3 @@
+import { type WhatsAppPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<WhatsAppPreviewMessages>;

package/WhatsAppPreview/polyglot/messages_es.js

@@ -0,0 +1,5 @@
+export const messages = {
+  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': 'Cuenta de empresa',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'El mensaje está vacío…',
+  'DUMB.WHATSAPP_PREVIEW.TODAY': 'Hoy'
+};

package/WhatsAppPreview/polyglot/messages_fr.d.ts

@@ -0,0 +1,3 @@
+import { type WhatsAppPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<WhatsAppPreviewMessages>;

package/WhatsAppPreview/polyglot/messages_fr.js

@@ -0,0 +1,5 @@
+export const messages = {
+  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': 'Compte professionnel',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'Le message est vide…',
+  'DUMB.WHATSAPP_PREVIEW.TODAY': 'Aujourd’hui'
+};

package/WhatsAppPreview/polyglot/messages_he.d.ts

@@ -0,0 +1,3 @@
+import { type WhatsAppPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<WhatsAppPreviewMessages>;

package/WhatsAppPreview/polyglot/messages_he.js

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

package/WhatsAppPreview/polyglot/messages_hi.d.ts

@@ -0,0 +1,3 @@
+import { type WhatsAppPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<WhatsAppPreviewMessages>;

package/WhatsAppPreview/polyglot/messages_hi.js

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

package/WhatsAppPreview/polyglot/messages_ja.d.ts

@@ -0,0 +1,3 @@
+import { type WhatsAppPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<WhatsAppPreviewMessages>;

package/WhatsAppPreview/polyglot/messages_ja.js

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

package/WhatsAppPreview/polyglot/messages_ko.d.ts

@@ -0,0 +1,3 @@
+import { type WhatsAppPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<WhatsAppPreviewMessages>;

package/WhatsAppPreview/polyglot/messages_ko.js

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

package/WhatsAppPreview/polyglot/messages_pt.d.ts

@@ -0,0 +1,3 @@
+import { type WhatsAppPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<WhatsAppPreviewMessages>;

package/WhatsAppPreview/polyglot/messages_pt.js

@@ -0,0 +1,5 @@
+export const messages = {
+  'DUMB.WHATSAPP_PREVIEW.BUSINESS_ACCOUNT': 'Conta comercial',
+  'DUMB.WHATSAPP_PREVIEW.EMPTY': 'A mensagem está vazia…',
+  'DUMB.WHATSAPP_PREVIEW.TODAY': 'Hoje'
+};

package/WhatsAppPreview/polyglot/messages_ru.d.ts

@@ -0,0 +1,3 @@
+import { type WhatsAppPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<WhatsAppPreviewMessages>;

package/WhatsAppPreview/polyglot/messages_ru.js

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

package/WhatsAppPreview/polyglot/messages_th.d.ts

@@ -0,0 +1,3 @@
+import { type WhatsAppPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<WhatsAppPreviewMessages>;

package/WhatsAppPreview/polyglot/messages_th.js

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

package/WhatsAppPreview/polyglot/messages_zh.d.ts

@@ -0,0 +1,3 @@
+import { type WhatsAppPreviewMessages } from './types';
+import type { LangMessages } from '../../polyglot';
+export declare const messages: LangMessages<WhatsAppPreviewMessages>;

package/WhatsAppPreview/polyglot/messages_zh.js

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

package/WhatsAppPreview/polyglot/types.d.ts

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

package/WhatsAppPreview/polyglot/types.js

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

package/WhatsAppPreview/styles.d.ts

@@ -0,0 +1,34 @@
+export declare const DeviceBox: 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;
+} & {
+    $sizes: string;
+    $padding: number;
+    $borderRadius: number;
+    $bgColor: "#DFE2E5";
+    $border: string;
+}, "$bgColor" | "$border" | "$borderRadius" | "$padding" | "$sizes">;
+export declare const WallpaperLayer: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $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;
+} & {
+    $position: string;
+    $inset: number;
+}, "$gridAutoFlow" | "$inset" | "$position">;
+export declare const WallpaperImage: import("styled-components").StyledComponent<"img", any, {}, never>;

package/WhatsAppPreview/styles.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { Rows, Vertical } from '@pushwoosh/kit-helpers';
+import { WHATSAPP_COLOR } from './constants';
+export const DeviceBox = styled(Rows).attrs({
+  $sizes: 'minmax(0, 1fr)',
+  $padding: 5,
+  $borderRadius: 44,
+  $bgColor: WHATSAPP_COLOR.DEVICE_SHELL,
+  $border: `1px solid ${WHATSAPP_COLOR.DEVICE_EDGE}`
+}).withConfig({
+  displayName: "DeviceBox",
+  componentId: "sc-15y0kbp-0"
+})(["-webkit-font-smoothing:antialiased;*{box-sizing:border-box;}"]);
+export const WallpaperLayer = styled(Vertical).attrs({
+  $position: 'absolute',
+  $inset: 0
+}).withConfig({
+  displayName: "WallpaperLayer",
+  componentId: "sc-15y0kbp-1"
+})(["color:", ";opacity:0.5;pointer-events:none;svg{display:block;width:100%;height:100%;}"], WHATSAPP_COLOR.WALLPAPER_INK);
+export const WallpaperImage = styled.img.withConfig({
+  displayName: "WallpaperImage",
+  componentId: "sc-15y0kbp-2"
+})(["width:100%;height:100%;object-fit:cover;"]);

package/WhatsAppPreview/types.d.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+/** Who sent the message: `outgoing` is the phone owner (green, right), `incoming` is the business (white, left). */
+export type WhatsAppMessageDirection = 'incoming' | 'outgoing';
+/** Delivery state drawn as ticks next to an outgoing message's time. */
+export type WhatsAppMessageStatus = 'sent' | 'delivered' | 'read';
+/** One chat bubble of {@link WhatsAppPreview}. */
+export interface WhatsAppMessage {
+    /** Stable key when the list is re-ordered or edited. */
+    id?: string;
+    /** Bubble side and colour. */
+    direction: WhatsAppMessageDirection;
+    /** Message body; WhatsApp markup (`*bold*`, `_italic_`, `~strike~`, `` `mono` ``) is rendered. */
+    text?: string;
+    /** Custom body rendered instead of `text` — e.g. an inline editor for the welcome message. */
+    content?: ReactNode;
+    /** Time stamp inside the bubble. */
+    time?: string;
+    /** Tick state; ignored for incoming messages. */
+    status?: WhatsAppMessageStatus;
+}
+/** Props of {@link WhatsAppPreview}. */
+export interface WhatsAppPreviewProps {
+    /** Chat messages, oldest first. */
+    messages?: WhatsAppMessage[];
+    /** Business name in the chat header. */
+    contactName?: string;
+    /** Caption under the name; defaults to the localized "Business account". */
+    contactSubtitle?: string;
+    /** Business avatar URL; a placeholder glyph is drawn when absent. */
+    avatarUrl?: string;
+    /** Date separator above the first message; hide it with an empty string. */
+    dateLabel?: string;
+    /** Clock in the device status bar. */
+    statusBarTime?: string;
+    /** Chat wallpaper URL replacing the built-in pattern. */
+    wallpaperUrl?: string;
+    /** Text shown on the wallpaper while the chat has no messages. */
+    emptyText?: ReactNode;
+    /** CSS width of the device. */
+    width?: string | number;
+    /** CSS height of the device. */
+    height?: string | number;
+    /** Show the loading placeholder instead of the chat. */
+    isLoading?: boolean;
+}

package/WhatsAppPreview/types.js

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

package/index.d.ts

@@ -5,6 +5,7 @@ export { Button, GhostButton, RemoveButton } from './Button';
 export { CardMetric } from './CardMetric';
 export { Checkbox } from './Checkbox';
 export { CrashScreen } from './CrashScreen';
+export { Divider } from './Divider';
 export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs, } from './Drawer';
 export { CalendarSuperForm, CalendarDropdown, addPeriod, compareStructs, dateToStruct, dateToStructTz, getSortedTimezones, getTimezoneOffset, getPeriodEnd, getPeriodStart, structToDate, structToDateTz, stringifyValue, pickDateStruct, type CalendarDropdownProps, type CalendarDropdownRangeDateProps, type CalendarSuperFormProps, type DateStruct, type RangeValue, type TimezoneOption, } from './Calendar';
 export { DatePicker, DatePickerField, DateTimePicker, DateTimePickerField, } from './DateTimePicker';
@@ -33,6 +34,8 @@ export { Link, type LinkPropsWithoutAs, type LinkPropsWithAsTag, type LinkPropsW
 export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview, replaceLocalization, replacePlaceholders } from './EmailTemplatePreview';
 export { PushPreview } from './PushPreview';
+export { WhatsAppPreview } from './WhatsAppPreview';
+export type { WhatsAppMessage, WhatsAppMessageDirection, WhatsAppMessageStatus, WhatsAppPreviewProps, } from './WhatsAppPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
 export { ExportResult } from './ExportResult';

package/index.js

@@ -5,6 +5,7 @@ export { Button, GhostButton, RemoveButton } from './Button';
 export { CardMetric } from './CardMetric';
 export { Checkbox } from './Checkbox';
 export { CrashScreen } from './CrashScreen';
+export { Divider } from './Divider';
 export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs } from './Drawer';
 export { CalendarSuperForm, CalendarDropdown, addPeriod, compareStructs, dateToStruct, dateToStructTz, getSortedTimezones, getTimezoneOffset, getPeriodEnd, getPeriodStart, structToDate, structToDateTz, stringifyValue, pickDateStruct } from './Calendar';
 export { DatePicker, DatePickerField, DateTimePicker, DateTimePickerField } from './DateTimePicker';
@@ -33,6 +34,7 @@ export { Link } from './Link';
 export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview, replaceLocalization, replacePlaceholders } from './EmailTemplatePreview';
 export { PushPreview } from './PushPreview';
+export { WhatsAppPreview } from './WhatsAppPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
 export { ExportResult } from './ExportResult';

package/package.json

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