@pushwoosh/dumb-components 1.1.232 → 1.1.233

package/NativeRichMediaPreview/NativeRichMediaPreview.d.ts

@@ -1,33 +1,3 @@
 import { type ReactElement } from 'react';
 import type { NativeRichMediaPreviewProps } from './types';
-/**
- * Preview of a native rich media (modal, banner, stories, spinwheel, …)
- * rendered from its JSON config; lays out with plain CSS in the real pixels
- * of the given width/height box, with no fidelity to any phone's pt-metrics
- * since this is a preview and devices vary. Content flows inside a scrollable
- * layer above a static backdrop (the dim overlay or, for
- * `fullscreen`/`video`/`stories`, the full-bleed background image or poster):
- * content taller than the box scrolls, shorter content aligns per display
- * type while the backdrop stays put. Pass `scale` to lay the content out on a
- * larger (or smaller) reference viewport and scale the whole preview to fill
- * the box — the way to cram a phone-sized layout into a small preview box
- * while keeping its proportions. Shows an invalid-config placeholder when the
- * config cannot be parsed or misses required contract fields.
- *
- * @example
- * <NativeRichMediaPreview
- *   width={304}
- *   height={659}
- *   content={{
- *     displayType: 'modal',
- *     modal: {
- *       showClose: true,
- *       dimBackground: true,
- *       background: '#FFFFFFFF',
- *       title: { text: 'Hi', color: '#4B5057FF' },
- *       buttons: [],
- *     },
- *   }}
- * />
- */
 export declare function NativeRichMediaPreview(props: NativeRichMediaPreviewProps): ReactElement;

package/NativeRichMediaPreview/NativeRichMediaPreview.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Spinner } from '../Spinner';
 import { NativeRichMediaCloseChip } from './components/NativeRichMediaCloseChip';
 import { NativeRichMediaCoverImg } from './components/NativeRichMediaCoverImg';
 import { NativeRichMediaDim } from './components/NativeRichMediaDim';
 import { NativeRichMediaMuteChip } from './components/NativeRichMediaMuteChip';
+import { NativeRichMediaThemeChip } from './components/NativeRichMediaThemeChip';
 import { EDGE_INSET, clampIndex } from './helpers';
+import { mergeNativeDarkOverlay } from './mergeNativeDarkOverlay';
 import { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
 import { resolveLocalization } from './resolveLocalization';
 import { BackdropLayer, ContentFlow, PreviewHost, ScaleViewport, ScrollLayer, SpinnerLayer } from './styles';
@@ -180,6 +182,17 @@ function renderConfig(config, activeIndex) {
  *   }}
  * />
  */
+function parseDarkVariant(content, withThemeToggle) {
+  if (!withThemeToggle) {
+    return null;
+  }
+  const merged = mergeNativeDarkOverlay(content);
+  // The merge hands back `content` itself, untouched, whenever there is nothing to apply.
+  if (merged === content) {
+    return null;
+  }
+  return parseNativeRichMediaConfig(merged);
+}
 export function NativeRichMediaPreview(props) {
   const {
     content,
@@ -190,15 +203,25 @@ export function NativeRichMediaPreview(props) {
     scale = 1,
     activeIndex = 0,
     isLoading = false,
-    withBackground = true
+    withBackground = true,
+    withThemeToggle = false
   } = props;
-  const config = useMemo(() => {
-    const parsed = parseNativeRichMediaConfig(content);
-    if (!parsed) {
-      return null;
-    }
-    return parseNativeRichMediaConfig(resolveLocalization(parsed, localization, language));
-  }, [content, localization, language]);
+  const [theme, setTheme] = useState('light');
+  const {
+    config,
+    isDarkRendered,
+    canToggleDark
+  } = useMemo(() => {
+    const lightParsed = parseNativeRichMediaConfig(content);
+    const darkParsed = parseDarkVariant(content, withThemeToggle);
+    const themed = theme === 'dark' && darkParsed ? darkParsed : lightParsed;
+    const resolved = themed ? parseNativeRichMediaConfig(resolveLocalization(themed, localization, language)) : null;
+    return {
+      config: resolved,
+      isDarkRendered: Boolean(resolved) && theme === 'dark' && darkParsed !== null,
+      canToggleDark: darkParsed !== null
+    };
+  }, [content, localization, language, theme, withThemeToggle]);
   const shouldDim = !isLoading && dimsScreen(config);
   return _jsxs(PreviewHost, {
     ...LIGHT_ISLAND_PROPS,
@@ -215,6 +238,10 @@ export function NativeRichMediaPreview(props) {
           children: renderConfig(config, activeIndex)
         })
       }, config.displayType), !isLoading && config && renderChrome(config)]
+    }), !isLoading && config && withThemeToggle && _jsx(NativeRichMediaThemeChip, {
+      theme: isDarkRendered ? 'dark' : 'light',
+      disabled: !canToggleDark,
+      onToggle: () => setTheme(theme === 'dark' ? 'light' : 'dark')
     }), isLoading && _jsx(SpinnerLayer, {
       children: _jsx(Spinner, {
         size: "medium",

package/NativeRichMediaPreview/components/NativeRichMediaThemeChip/NativeRichMediaThemeChip.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { NativeRichMediaThemeChipProps } from './types';
+export declare function NativeRichMediaThemeChip(props: NativeRichMediaThemeChipProps): ReactElement;

package/NativeRichMediaPreview/components/NativeRichMediaThemeChip/NativeRichMediaThemeChip.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeToggleChip } from './styles';
+import { MoonIcon, SunIcon } from '../../icons';
+import { useLang } from '../../polyglot';
+export function NativeRichMediaThemeChip(props) {
+  const {
+    theme,
+    disabled,
+    onToggle
+  } = props;
+  const lang = useLang();
+  return _jsx(ThemeToggleChip, {
+    as: "button",
+    type: "button",
+    "$bottom": 8,
+    "$right": 8,
+    disabled: disabled,
+    "aria-label": lang({
+      message: 'DUMB.NATIVE_RICH_MEDIA_PREVIEW.TOGGLE_THEME'
+    }),
+    "aria-pressed": theme === 'dark',
+    onClick: onToggle,
+    children: theme === 'dark' ? _jsx(MoonIcon, {}) : _jsx(SunIcon, {})
+  });
+}

package/NativeRichMediaPreview/components/NativeRichMediaThemeChip/index.d.ts

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

package/NativeRichMediaPreview/components/NativeRichMediaThemeChip/index.js

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

package/NativeRichMediaPreview/components/NativeRichMediaThemeChip/styles.d.ts

@@ -0,0 +1,8 @@
+/** `Chip` is a `div`; rendered `as="button"` it needs the UA button chrome stripped or it fights `border-radius: 50%`. */
+export declare const ThemeToggleChip: import("styled-components").StyledComponent<"div", any, {
+    $small?: boolean;
+    $top?: number;
+    $right?: number;
+    $bottom?: number;
+    $left?: number;
+}, never>;

package/NativeRichMediaPreview/components/NativeRichMediaThemeChip/styles.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import { Chip } from '../NativeRichMediaCloseChip';
+/** `Chip` is a `div`; rendered `as="button"` it needs the UA button chrome stripped or it fights `border-radius: 50%`. */
+export const ThemeToggleChip = styled(Chip).withConfig({
+  displayName: "ThemeToggleChip",
+  componentId: "sc-e7nbqw-0"
+})(["border:none;padding:0;appearance:none;font:inherit;&:disabled{cursor:default;opacity:0.4;}"]);

package/NativeRichMediaPreview/components/NativeRichMediaThemeChip/types.d.ts

@@ -0,0 +1,8 @@
+export type NativeRichMediaThemeChipProps = {
+    /** Theme actually rendered right now — may lag a click while an overlay applies, or fall back to light. */
+    theme: 'light' | 'dark';
+    /** Disable when the current content has no dark overlay to switch to. */
+    disabled: boolean;
+    /** Flip to the other theme. */
+    onToggle: () => void;
+};

package/NativeRichMediaPreview/components/NativeRichMediaThemeChip/types.js

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

package/NativeRichMediaPreview/icons/MoonIcon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none">
+  <path d="M20.5 14.9A8.6 8.6 0 019.1 3.5a8.6 8.6 0 1011.4 11.4z" fill="#fff"/>
+</svg>

package/NativeRichMediaPreview/icons/SunIcon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none">
+  <circle cx="12" cy="12" r="4.5" fill="#fff"/>
+  <path d="M12 2v2.5M12 19.5V22M4.22 4.22l1.77 1.77M18.01 18.01l1.77 1.77M2 12h2.5M19.5 12H22M4.22 19.78l1.77-1.77M18.01 5.99l1.77-1.77" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/NativeRichMediaPreview/icons/index.d.ts

@@ -1,5 +1,7 @@
 export { default as CopyIcon } from './CopyIcon.svg';
 export { default as ExpandIcon } from './ExpandIcon.svg';
+export { default as MoonIcon } from './MoonIcon.svg';
 export { default as MutedIcon } from './MutedIcon.svg';
 export { default as ScribbleIcon } from './ScribbleIcon.svg';
 export { default as SoundIcon } from './SoundIcon.svg';
+export { default as SunIcon } from './SunIcon.svg';

package/NativeRichMediaPreview/icons/index.js

@@ -1,5 +1,7 @@
 export { default as CopyIcon } from './CopyIcon.svg';
 export { default as ExpandIcon } from './ExpandIcon.svg';
+export { default as MoonIcon } from './MoonIcon.svg';
 export { default as MutedIcon } from './MutedIcon.svg';
 export { default as ScribbleIcon } from './ScribbleIcon.svg';
-export { default as SoundIcon } from './SoundIcon.svg';
+export { default as SoundIcon } from './SoundIcon.svg';
+export { default as SunIcon } from './SunIcon.svg';

package/NativeRichMediaPreview/index.d.ts

@@ -1,5 +1,6 @@
-export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, NativeRichMediaLocalization, } from './types';
+export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaDarkOverlay, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, NativeRichMediaLocalization, } from './types';
 export { NATIVE_RICH_MEDIA_DISPLAY_TYPES, EDITABLE_NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './types';
 export { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
 export { parseLocalizationParams } from './parseLocalizationParams';
 export { NativeRichMediaPreview } from './NativeRichMediaPreview';
+export { mergeNativeDarkOverlay } from './mergeNativeDarkOverlay';

package/NativeRichMediaPreview/index.js

@@ -1,4 +1,5 @@
 export { NATIVE_RICH_MEDIA_DISPLAY_TYPES, EDITABLE_NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './types';
 export { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
 export { parseLocalizationParams } from './parseLocalizationParams';
-export { NativeRichMediaPreview } from './NativeRichMediaPreview';
+export { NativeRichMediaPreview } from './NativeRichMediaPreview';
+export { mergeNativeDarkOverlay } from './mergeNativeDarkOverlay';

package/NativeRichMediaPreview/mergeNativeDarkOverlay.d.ts

@@ -0,0 +1,3 @@
+import type { NativeRichMediaConfig } from './types';
+/** Applies a config's `dark` overlay onto its display block ahead of strict parsing, since the light block may only become valid once the overlay lands; any break returns the input untouched. */
+export declare function mergeNativeDarkOverlay(content: string | NativeRichMediaConfig): string | NativeRichMediaConfig;

package/NativeRichMediaPreview/mergeNativeDarkOverlay.js

@@ -0,0 +1,89 @@
+import { isObject } from './helpers';
+/** Leaves a theme may replace: everything else is content, not appearance. */
+const VISUAL_LEAF_KEYS = new Set(['background', 'color', 'image', 'poster', 'fallback']);
+/** The only arrays that merge; both sides must line up element for element. */
+const POSITIONAL_ARRAY_KEYS = new Set(['buttons', 'items']);
+function overlayOnto(light, dark) {
+  const merged = {
+    ...light
+  };
+  for (const key of Object.keys(dark)) {
+    const darkValue = dark[key];
+    const lightValue = light[key];
+    if (darkValue === null || darkValue === undefined) {
+      continue;
+    }
+    if (POSITIONAL_ARRAY_KEYS.has(key)) {
+      if (!Array.isArray(darkValue) || !Array.isArray(lightValue)) {
+        return null;
+      }
+      if (darkValue.length !== lightValue.length) {
+        return null;
+      }
+      const items = [];
+      for (let i = 0; i < darkValue.length; i += 1) {
+        const darkItem = darkValue[i];
+        const lightItem = lightValue[i];
+        if (!isObject(darkItem) || !isObject(lightItem)) {
+          return null;
+        }
+        const mergedItem = overlayOnto(lightItem, darkItem);
+        if (!mergedItem) {
+          return null;
+        }
+        items.push(mergedItem);
+      }
+      merged[key] = items;
+      continue;
+    }
+    if (isObject(lightValue)) {
+      if (isObject(darkValue)) {
+        const mergedChild = overlayOnto(lightValue, darkValue);
+        if (!mergedChild) {
+          return null;
+        }
+        merged[key] = mergedChild;
+      }
+      continue;
+    }
+    if (VISUAL_LEAF_KEYS.has(key)) {
+      merged[key] = Array.isArray(darkValue) ? [...darkValue] : darkValue;
+    }
+  }
+  return merged;
+}
+/** Applies a config's `dark` overlay onto its display block ahead of strict parsing, since the light block may only become valid once the overlay lands; any break returns the input untouched. */
+export function mergeNativeDarkOverlay(content) {
+  let raw = content;
+  if (typeof content === 'string') {
+    try {
+      raw = JSON.parse(content);
+    } catch {
+      return content;
+    }
+  }
+  if (!isObject(raw)) {
+    return content;
+  }
+  const displayType = raw.displayType;
+  if (typeof displayType !== 'string') {
+    return content;
+  }
+  const block = raw[displayType];
+  if (!isObject(block)) {
+    return content;
+  }
+  const overlay = block.dark;
+  if (!isObject(overlay)) {
+    return content;
+  }
+  const merged = overlayOnto(block, overlay);
+  if (!merged) {
+    return content;
+  }
+  delete merged.dark;
+  return {
+    ...raw,
+    [displayType]: merged
+  };
+}

package/NativeRichMediaPreview/polyglot/messages_ar.js

@@ -1,4 +1,5 @@
 export const messages = {
   'DUMB.NATIVE_RICH_MEDIA_PREVIEW.INVALID_CONFIG': 'تكوين rich media غير صالح',
-  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'اكشط هنا'
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'اكشط هنا',
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.TOGGLE_THEME': 'تبديل الوضع الفاتح والداكن'
 };

package/NativeRichMediaPreview/polyglot/messages_bn.js

@@ -1,4 +1,5 @@
 export const messages = {
   'DUMB.NATIVE_RICH_MEDIA_PREVIEW.INVALID_CONFIG': 'অবৈধ rich media কনফিগারেশন',
-  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'এখানে ঘষুন'
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'এখানে ঘষুন',
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.TOGGLE_THEME': 'হালকা এবং গাঢ় থিমের মধ্যে পরিবর্তন করুন'
 };

package/NativeRichMediaPreview/polyglot/messages_de.js

@@ -1,4 +1,5 @@
 export const messages = {
   'DUMB.NATIVE_RICH_MEDIA_PREVIEW.INVALID_CONFIG': 'Ungültige Rich-Media-Konfiguration',
-  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'Hier freirubbeln'
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'Hier freirubbeln',
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.TOGGLE_THEME': 'Zwischen hellem und dunklem Design wechseln'
 };

package/NativeRichMediaPreview/polyglot/messages_en.js

@@ -1,4 +1,5 @@
 export const messages = {
   'DUMB.NATIVE_RICH_MEDIA_PREVIEW.INVALID_CONFIG': 'Invalid rich media config',
-  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'Scratch here'
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'Scratch here',
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.TOGGLE_THEME': 'Switch light and dark'
 };

package/NativeRichMediaPreview/polyglot/messages_es.js

@@ -1,4 +1,5 @@
 export const messages = {
   'DUMB.NATIVE_RICH_MEDIA_PREVIEW.INVALID_CONFIG': 'Configuración de rich media no válida',
-  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'Rasca aquí'
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'Rasca aquí',
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.TOGGLE_THEME': 'Cambiar entre claro y oscuro'
 };

package/NativeRichMediaPreview/polyglot/messages_fr.js

@@ -1,4 +1,5 @@
 export const messages = {
   'DUMB.NATIVE_RICH_MEDIA_PREVIEW.INVALID_CONFIG': 'Configuration rich media non valide',
-  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'Grattez ici'
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'Grattez ici',
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.TOGGLE_THEME': 'Basculer entre clair et sombre'
 };

package/NativeRichMediaPreview/polyglot/messages_he.js

@@ -1,4 +1,5 @@
 export const messages = {
   'DUMB.NATIVE_RICH_MEDIA_PREVIEW.INVALID_CONFIG': 'תצורת rich media לא חוקית',
-  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'גרדו כאן'
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'גרדו כאן',
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.TOGGLE_THEME': 'החלף בין ערכת נושא בהירה לכהה'
 };

package/NativeRichMediaPreview/polyglot/messages_hi.js

@@ -1,4 +1,5 @@
 export const messages = {
   'DUMB.NATIVE_RICH_MEDIA_PREVIEW.INVALID_CONFIG': 'अमान्य rich media कॉन्फ़िगरेशन',
-  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'यहाँ खरोंचें'
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'यहाँ खरोंचें',
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.TOGGLE_THEME': 'लाइट और डार्क थीम के बीच स्विच करें'
 };

package/NativeRichMediaPreview/polyglot/messages_ja.js

@@ -1,4 +1,5 @@
 export const messages = {
   'DUMB.NATIVE_RICH_MEDIA_PREVIEW.INVALID_CONFIG': 'リッチメディア設定が無効です',
-  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'ここを削ってください'
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'ここを削ってください',
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.TOGGLE_THEME': 'ライトとダークを切り替える'
 };

package/NativeRichMediaPreview/polyglot/messages_ko.js

@@ -1,4 +1,5 @@
 export const messages = {
   'DUMB.NATIVE_RICH_MEDIA_PREVIEW.INVALID_CONFIG': '리치 미디어 구성이 잘못되었습니다',
-  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': '여기를 긁어보세요'
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': '여기를 긁어보세요',
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.TOGGLE_THEME': '라이트와 다크 테마 전환'
 };

package/NativeRichMediaPreview/polyglot/messages_pt.js

@@ -1,4 +1,5 @@
 export const messages = {
   'DUMB.NATIVE_RICH_MEDIA_PREVIEW.INVALID_CONFIG': 'Configuração de rich media inválida',
-  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'Raspe aqui'
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'Raspe aqui',
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.TOGGLE_THEME': 'Alternar entre claro e escuro'
 };

package/NativeRichMediaPreview/polyglot/messages_ru.js

@@ -1,4 +1,5 @@
 export const messages = {
   'DUMB.NATIVE_RICH_MEDIA_PREVIEW.INVALID_CONFIG': 'Некорректная конфигурация rich media',
-  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'Сотрите здесь'
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'Сотрите здесь',
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.TOGGLE_THEME': 'Переключить светлую и тёмную тему'
 };

package/NativeRichMediaPreview/polyglot/messages_th.js

@@ -1,4 +1,5 @@
 export const messages = {
   'DUMB.NATIVE_RICH_MEDIA_PREVIEW.INVALID_CONFIG': 'การกำหนดค่า rich media ไม่ถูกต้อง',
-  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'ขูดที่นี่'
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': 'ขูดที่นี่',
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.TOGGLE_THEME': 'สลับธีมสว่างและมืด'
 };

package/NativeRichMediaPreview/polyglot/messages_zh.js

@@ -1,4 +1,5 @@
 export const messages = {
   'DUMB.NATIVE_RICH_MEDIA_PREVIEW.INVALID_CONFIG': '富媒体配置无效',
-  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': '刮开此处'
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': '刮开此处',
+  'DUMB.NATIVE_RICH_MEDIA_PREVIEW.TOGGLE_THEME': '切换浅色和深色主题'
 };

package/NativeRichMediaPreview/polyglot/types.d.ts

@@ -2,4 +2,5 @@ import type { NoParams } from '../../polyglot';
 export type NativeRichMediaPreviewMessages = {
     'DUMB.NATIVE_RICH_MEDIA_PREVIEW.INVALID_CONFIG': NoParams;
     'DUMB.NATIVE_RICH_MEDIA_PREVIEW.SCRATCH_HERE': NoParams;
+    'DUMB.NATIVE_RICH_MEDIA_PREVIEW.TOGGLE_THEME': NoParams;
 };

package/NativeRichMediaPreview/types.d.ts

@@ -50,6 +50,10 @@ export type NativeRichMediaReward = {
     /** Confirmation button, including its own tap action. */
     button?: NativeRichMediaButton;
 };
+/** Sparse dark overlay over a display block: visual leaves replace, objects merge recursively, `buttons`/`items` positionally; typed loosely because the shape is checked at merge time. */
+export type NativeRichMediaDarkOverlay = {
+    [key: string]: string | string[] | NativeRichMediaDarkOverlay | NativeRichMediaDarkOverlay[] | undefined;
+};
 /** Content of a `banner` rich media. */
 export type NativeRichMediaBannerBlock = {
     /** Show a close (✕) chip. */
@@ -68,6 +72,8 @@ export type NativeRichMediaBannerBlock = {
     action: NativeRichMediaAction;
     /** Auto-dismiss timeout in seconds; omit to keep the banner until closed. */
     autoDismiss?: number;
+    /** Dark-theme overlay merged over this block when the dark variant is shown. */
+    dark?: NativeRichMediaDarkOverlay;
 };
 /** Content of a `carousel` rich media. */
 export type NativeRichMediaCarouselBlock = {
@@ -84,6 +90,8 @@ export type NativeRichMediaCarouselBlock = {
         /** Tap action of the card. */
         action?: NativeRichMediaAction;
     }>;
+    /** Dark-theme overlay merged over this block when the dark variant is shown. */
+    dark?: NativeRichMediaDarkOverlay;
 };
 /** Content of a `modal` rich media. */
 export type NativeRichMediaModalBlock = {
@@ -101,6 +109,8 @@ export type NativeRichMediaModalBlock = {
     message?: NativeRichMediaText;
     /** Action buttons under the message. */
     buttons: Array<NativeRichMediaButton>;
+    /** Dark-theme overlay merged over this block when the dark variant is shown. */
+    dark?: NativeRichMediaDarkOverlay;
 };
 /** Content of a `sheet` rich media. */
 export type NativeRichMediaSheetBlock = {
@@ -118,6 +128,8 @@ export type NativeRichMediaSheetBlock = {
     message?: NativeRichMediaText;
     /** Action buttons under the message. */
     buttons: Array<NativeRichMediaButton>;
+    /** Dark-theme overlay merged over this block when the dark variant is shown. */
+    dark?: NativeRichMediaDarkOverlay;
 };
 /** Content of a `stories` rich media. */
 export type NativeRichMediaStoriesBlock = {
@@ -138,6 +150,8 @@ export type NativeRichMediaStoriesBlock = {
         /** Slide duration in seconds (SDK: default 5, max 30). */
         duration: number;
     }>;
+    /** Dark-theme overlay merged over this block when the dark variant is shown. */
+    dark?: NativeRichMediaDarkOverlay;
 };
 /** Content of a `fullscreen` rich media. */
 export type NativeRichMediaFullscreenBlock = {
@@ -151,6 +165,8 @@ export type NativeRichMediaFullscreenBlock = {
     message?: NativeRichMediaText;
     /** Action buttons at the bottom. */
     buttons: Array<NativeRichMediaButton>;
+    /** Dark-theme overlay merged over this block when the dark variant is shown. */
+    dark?: NativeRichMediaDarkOverlay;
 };
 /** Content of a `video` rich media. */
 export type NativeRichMediaVideoBlock = {
@@ -172,6 +188,8 @@ export type NativeRichMediaVideoBlock = {
     fallback?: string;
     /** Action buttons at the bottom. */
     buttons: Array<NativeRichMediaButton>;
+    /** Dark-theme overlay merged over this block when the dark variant is shown. */
+    dark?: NativeRichMediaDarkOverlay;
 };
 /** Content of a `pip` (picture-in-picture) rich media. */
 export type NativeRichMediaPipBlock = {
@@ -197,6 +215,8 @@ export type NativeRichMediaPipBlock = {
     borderRadius?: number;
     /** Tap action of the pip window itself. */
     action?: NativeRichMediaAction;
+    /** Dark-theme overlay merged over this block when the dark variant is shown. */
+    dark?: NativeRichMediaDarkOverlay;
 };
 /** Content of a `scratchcard` rich media. */
 export type NativeRichMediaScratchcardBlock = {
@@ -216,6 +236,8 @@ export type NativeRichMediaScratchcardBlock = {
     message?: NativeRichMediaText;
     /** Reward revealed under the cover; required by the SDK, may be absent in a draft. */
     reward?: NativeRichMediaReward;
+    /** Dark-theme overlay merged over this block when the dark variant is shown. */
+    dark?: NativeRichMediaDarkOverlay;
 };
 /** Content of a `spinwheel` rich media. */
 export type NativeRichMediaSpinwheelBlock = {
@@ -246,6 +268,8 @@ export type NativeRichMediaSpinwheelBlock = {
         /** Reward granted when the wheel stops on this sector. */
         reward?: NativeRichMediaReward;
     }>;
+    /** Dark-theme overlay merged over this block when the dark variant is shown. */
+    dark?: NativeRichMediaDarkOverlay;
 };
 /** Native rich media config: a display type and the matching content block. */
 export type NativeRichMediaConfig = {
@@ -315,4 +339,6 @@ export type NativeRichMediaPreviewProps = {
     isLoading?: boolean;
     /** Render the container chrome — white backdrop and border (default `true`). Set `false` for a transparent preview over the consumer's own background. */
     withBackground?: boolean;
+    /** Show a chip that switches the preview between the light and dark variants (default `false`). The preview always opens light. */
+    withThemeToggle?: boolean;
 };

package/index.d.ts

@@ -50,7 +50,7 @@ export { Chip, type ChipProps, type ChipVariant } from './Chip';
 export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
 export { SandboxedHtmlFrame, type SandboxedHtmlFrameProps, type IsolatedSandboxedHtmlFrameProps, type InspectableSandboxedHtmlFrameProps, } from './SandboxedHtmlFrame';
 export { NativeRichMediaPreview, parseNativeRichMediaConfig, parseLocalizationParams, NATIVE_RICH_MEDIA_DISPLAY_TYPES, EDITABLE_NATIVE_RICH_MEDIA_DISPLAY_TYPES, } from './NativeRichMediaPreview';
-export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, NativeRichMediaLocalization, } from './NativeRichMediaPreview';
+export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaDarkOverlay, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, NativeRichMediaLocalization, } from './NativeRichMediaPreview';
 export { RichMessageEditor, RichMessageViewer, type DynamicContent, } from './RichMessageEditor';
 export { FrequencyCappingEdit, FrequencyCappingReadonly, FrequencyCappingInApps, CappingCountingMode, CountingMode, type CountingModeProps, type LocalCapping, type CappingInAppBase, } from './FrequencyCapping';
 export { SendRateEdit, SendRateReadonly, type SendRateBase, type SendRateEditProps, type SendRateReadonlyProps, } from './SendRate';

package/package.json

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