@pushwoosh/dumb-components 1.1.232 → 1.1.234

package/NativeRichMediaPreview/NativeRichMediaPreview.d.ts

@@ -13,6 +13,9 @@ import type { NativeRichMediaPreviewProps } from './types';
  * 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.
+ * With `withThemeToggle` the preview carries a chip that flips it between the light
+ * values and the dark overlay merged over them; pass `theme` with `onThemeChange`
+ * to drive that from outside, when a surrounding editor has its own theme switch.
  *
  * @example
  * <NativeRichMediaPreview

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';
@@ -150,6 +152,17 @@ function renderConfig(config, activeIndex) {
       return _jsx(NativeRichMediaInvalidView, {});
   }
 }
+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);
+}
 /**
  * Preview of a native rich media (modal, banner, stories, spinwheel, …)
  * rendered from its JSON config; lays out with plain CSS in the real pixels
@@ -163,6 +176,9 @@ function renderConfig(config, activeIndex) {
  * 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.
+ * With `withThemeToggle` the preview carries a chip that flips it between the light
+ * values and the dark overlay merged over them; pass `theme` with `onThemeChange`
+ * to drive that from outside, when a surrounding editor has its own theme switch.
  *
  * @example
  * <NativeRichMediaPreview
@@ -190,15 +206,37 @@ export function NativeRichMediaPreview(props) {
     scale = 1,
     activeIndex = 0,
     isLoading = false,
-    withBackground = true
+    withBackground = true,
+    withThemeToggle = false,
+    theme: controlledTheme,
+    onThemeChange
   } = props;
-  const config = useMemo(() => {
-    const parsed = parseNativeRichMediaConfig(content);
-    if (!parsed) {
-      return null;
+  const [ownTheme, setOwnTheme] = useState('light');
+  const isControlled = controlledTheme !== undefined;
+  const theme = controlledTheme ?? ownTheme;
+  const toggleTheme = () => {
+    const next = theme === 'dark' ? 'light' : 'dark';
+    if (!isControlled) {
+      setOwnTheme(next);
     }
-    return parseNativeRichMediaConfig(resolveLocalization(parsed, localization, language));
-  }, [content, localization, language]);
+    onThemeChange?.(next);
+  };
+  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 renderedTheme = isDarkRendered ? 'dark' : 'light';
   const shouldDim = !isLoading && dimsScreen(config);
   return _jsxs(PreviewHost, {
     ...LIGHT_ISLAND_PROPS,
@@ -215,6 +253,10 @@ export function NativeRichMediaPreview(props) {
           children: renderConfig(config, activeIndex)
         })
       }, config.displayType), !isLoading && config && renderChrome(config)]
+    }), !isLoading && config && withThemeToggle && _jsx(NativeRichMediaThemeChip, {
+      theme: isControlled ? theme : renderedTheme,
+      disabled: !isControlled && !canToggleDark,
+      onToggle: toggleTheme
     }), isLoading && _jsx(SpinnerLayer, {
       children: _jsx(Spinner, {
         size: "medium",

package/NativeRichMediaPreview/__tests__/NativeRichMediaPreview.test.d.ts

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

package/NativeRichMediaPreview/__tests__/NativeRichMediaPreview.test.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { NativeRichMediaPreview } from '../NativeRichMediaPreview';
+const lightContent = {
+  displayType: 'modal',
+  modal: {
+    showClose: true,
+    dimBackground: true,
+    background: '#FFFFFFFF',
+    title: {
+      text: 'Hi',
+      color: '#4B5057FF'
+    },
+    buttons: []
+  }
+};
+const darkableContent = {
+  ...lightContent,
+  modal: {
+    ...lightContent.modal,
+    dark: {
+      background: '#14161AFF',
+      title: {
+        color: '#F2F4F7FF'
+      }
+    }
+  }
+};
+const themeChip = () => screen.getByLabelText('Switch light and dark');
+const renderPreview = (props = {}) => render(_jsx(NativeRichMediaPreview, {
+  content: darkableContent,
+  width: 304,
+  height: 659,
+  withThemeToggle: true,
+  ...props
+}));
+describe('NativeRichMediaPreview theme toggle', () => {
+  it('keeps its own theme when uncontrolled', () => {
+    renderPreview();
+    expect(themeChip()).toHaveAttribute('aria-pressed', 'false');
+    fireEvent.click(themeChip());
+    expect(themeChip()).toHaveAttribute('aria-pressed', 'true');
+  });
+  it('follows the theme prop instead of a click when controlled', () => {
+    const onThemeChange = jest.fn();
+    const {
+      rerender
+    } = renderPreview({
+      theme: 'dark',
+      onThemeChange
+    });
+    expect(themeChip()).toHaveAttribute('aria-pressed', 'true');
+    fireEvent.click(themeChip());
+    expect(onThemeChange).toHaveBeenCalledWith('light');
+    expect(themeChip()).toHaveAttribute('aria-pressed', 'true');
+    rerender(_jsx(NativeRichMediaPreview, {
+      content: darkableContent,
+      width: 304,
+      height: 659,
+      withThemeToggle: true,
+      theme: "light",
+      onThemeChange: onThemeChange
+    }));
+    expect(themeChip()).toHaveAttribute('aria-pressed', 'false');
+  });
+  it('reports the controlled theme even when the content has no dark overlay', () => {
+    renderPreview({
+      content: lightContent,
+      theme: 'dark',
+      onThemeChange: jest.fn()
+    });
+    expect(themeChip()).toHaveAttribute('aria-pressed', 'true');
+    expect(themeChip()).not.toBeDisabled();
+  });
+  it('disables the chip on content without a dark overlay when uncontrolled', () => {
+    renderPreview({
+      content: lightContent
+    });
+    expect(themeChip()).toBeDisabled();
+  });
+});

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, NativeRichMediaTheme, } 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 = {
@@ -295,6 +319,8 @@ export declare const EDITABLE_NATIVE_RICH_MEDIA_DISPLAY_TYPES: NativeRichMediaDi
  * fallback. Text lives here rather than inline in `content`.
  */
 export type NativeRichMediaLocalization = Record<string, Record<string, string>>;
+/** Colour scheme the preview renders: the light values, or them merged with the dark overlay. */
+export type NativeRichMediaTheme = 'light' | 'dark';
 /** Props of {@link NativeRichMediaPreview}. */
 export type NativeRichMediaPreviewProps = {
     /** Rich media config, as an object or a JSON string. */
@@ -315,4 +341,10 @@ 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`). Uncontrolled, the preview opens light. */
+    withThemeToggle?: boolean;
+    /** Theme to render, making the chip controlled: the preview follows this value, the chip mirrors it (rather than the rendered result, since content without a dark overlay renders identically in both themes) and only reports clicks through `onThemeChange`. Omit to let the preview keep its own state. */
+    theme?: NativeRichMediaTheme;
+    /** Called with the other theme when the chip is clicked; the only way to react to the chip on a controlled preview. */
+    onThemeChange?: (theme: NativeRichMediaTheme) => void;
 };

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, NativeRichMediaTheme, } 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.234",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",