@pushwoosh/dumb-components 1.1.166 → 1.1.168

package/Modal/components/Modal/styles.js

@@ -2,7 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CSSTransition } from 'react-transition-group';
 import styled, { createGlobalStyle } from 'styled-components';
 import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
-const animationTimeout = 300;
+const ENTER_DURATION = 200;
+const EXIT_DURATION = 150;
+const SLIDE_DISTANCE = '16px';
+const VIEWPORT_INSET = '56px';
 export const LockBody = createGlobalStyle(["body{overflow:hidden;position:relative;height:100%;}"]);
 export const ModalBox = styled.div.attrs(({
   $zIndex
@@ -17,7 +20,7 @@ export const ModalBox = styled.div.attrs(({
 export const ModalInner = styled.div.withConfig({
   displayName: "ModalInner",
   componentId: "sc-lejcgu-1"
-})(["display:flex;align-items:flex-start;justify-content:center;width:100vw;height:100vh;padding:56px 0;"]);
+})(["display:flex;align-items:flex-start;justify-content:center;width:100%;height:100%;padding:", ";"], VIEWPORT_INSET);
 function ModalBoxBase(props) {
   const {
     isOpen,
@@ -28,7 +31,11 @@ function ModalBoxBase(props) {
   return _jsx(CSSTransition, {
     appear: true,
     in: isOpen,
-    timeout: animationTimeout,
+    timeout: {
+      appear: ENTER_DURATION,
+      enter: ENTER_DURATION,
+      exit: EXIT_DURATION
+    },
     classNames: className,
     unmountOnExit: true,
     nodeRef: nodeRef,
@@ -40,13 +47,13 @@ const backdropVisible = 'rgb(0 0 0 / 70%)';
 export const ModalBoxTrans = styled(ModalBoxBase).withConfig({
   displayName: "ModalBoxTrans",
   componentId: "sc-lejcgu-2"
-})(["&-appear,&-enter{background-color:", ";", "{opacity:0;transform:scale(0.5);}}&-appear-active,&-enter-active{background-color:", ";transition:background-color ", "ms;", "{opacity:1;transform:scale(1);transition:opacity ", "ms,transform ", "ms;}}&-appear-done,&-enter-done{background-color:", ";}&-exit{background-color:", ";}&-exit-active{background-color:", ";transition:background-color ", "ms;", "{opacity:0;transform:scale(0.5);transition:opacity ", "ms,transform ", "ms;}}"], backdropHidden, ModalInner, backdropVisible, animationTimeout, ModalInner, animationTimeout, animationTimeout, backdropVisible, backdropVisible, backdropHidden, animationTimeout, ModalInner, animationTimeout, animationTimeout);
+})(["&-appear,&-enter{background-color:", ";", "{opacity:0;transform:translateY(", ");}}&-appear-active,&-enter-active{background-color:", ";transition:background-color ", "ms ease-out;", "{opacity:1;transform:translateY(0);transition:opacity ", "ms ease-out,transform ", "ms ease-out;}}&-appear-done,&-enter-done,&-exit{background-color:", ";", "{opacity:1;transform:translateY(0);}}&-exit-active{background-color:", ";transition:background-color ", "ms ease-in;", "{opacity:0;transform:translateY(", ");transition:opacity ", "ms ease-in,transform ", "ms ease-in;}}"], backdropHidden, ModalInner, SLIDE_DISTANCE, backdropVisible, ENTER_DURATION, ModalInner, ENTER_DURATION, ENTER_DURATION, backdropVisible, ModalInner, backdropHidden, EXIT_DURATION, ModalInner, SLIDE_DISTANCE, EXIT_DURATION, EXIT_DURATION);
 export const ModalContainer = styled.div.withConfig({
   displayName: "ModalContainer",
   componentId: "sc-lejcgu-3"
-})(["display:inline-flex;flex-direction:column;align-items:stretch;justify-content:flex-start;position:relative;width:", ";max-height:calc(100vh - 2 * 56px);vertical-align:middle;z-index:10;background:", ";border-radius:", ";& > *{&:first-child{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}}"], ({
+})(["display:flex;flex-direction:column;position:relative;width:", ";max-height:calc(100vh - 2 * ", ");background-color:", ";border-radius:", ";"], ({
   $width
-}) => $width, Color.CLEAR, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG, ShapeRadius.DIALOG);
+}) => $width, VIEWPORT_INSET, Color.CLEAR, ShapeRadius.DIALOG);
 ModalBox.displayName = 'ModalBox';
 ModalInner.displayName = 'ModalInner';
 ModalContainer.displayName = 'ModalContainer';

package/Modal/components/ModalConfirm/ModalConfirm.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
-import { Vertical, Horizontal } from '@pushwoosh/kit-helpers';
+import { Horizontal } from '@pushwoosh/kit-helpers';
 import { Banner } from '../../../Banner';
 import { Button } from '../../../Button';
 import { useLang } from '../../polyglot';
@@ -58,16 +58,13 @@ export function ModalConfirm(props) {
     size: size,
     isOpen: isOpen,
     onClose: onCancel,
-    children: [_jsx(ModalHeader, {
-      children: _jsxs(Vertical, {
-        "$gap": 8,
-        children: [_jsx(ModalTitle, {
-          children: resolvedTitle
-        }), errorMessage && _jsx(Banner, {
-          type: "error",
-          title: errorMessage
-        })]
-      })
+    children: [_jsxs(ModalHeader, {
+      children: [_jsx(ModalTitle, {
+        children: resolvedTitle
+      }), errorMessage && _jsx(Banner, {
+        type: "error",
+        title: errorMessage
+      })]
     }), description && _jsx(ModalBody, {
       children: description
     }), _jsx(ModalFooter, {

package/Modal/components/ModalContent/styles.d.ts

@@ -1,5 +1,24 @@
+import { UnitSize } from '@pushwoosh/kit-constants';
 /** Top section of a {@link Modal}; typically wraps a {@link ModalTitle}. */
-export declare const ModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ModalHeader: 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;
+} & {
+    $gap: number;
+    $padding: {
+        horizontal: UnitSize;
+        top: UnitSize;
+        bottom: number;
+    };
+}, "$gridAutoFlow" | "$padding" | "$gap">;
 /** Groups {@link ModalBodyItem}s with hairline dividers between them, inside a {@link ModalBody}. */
 export declare const ModalBodyGroup: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
     $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue | undefined;
@@ -13,10 +32,8 @@ export declare const ModalBodyGroup: import("styled-components").StyledComponent
 } & {
     $gridAutoFlow: string;
 }, "$gridAutoFlow">;
-/** A single row within a {@link ModalBodyGroup}; pass `$vPadding` to add vertical padding. */
-export declare const ModalBodyItem: import("styled-components").StyledComponent<"div", any, {
-    $vPadding?: boolean;
-}, never>;
+/** A single row within a {@link ModalBodyGroup}, divided from its siblings by hairlines. */
+export declare const ModalBodyItem: import("styled-components").StyledComponent<"div", any, {}, never>;
 /** Scrollable main content area of a {@link Modal}; self-pads unless it holds a {@link ModalBodyGroup}. */
 export declare const ModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;
 /** Bottom action bar of a {@link Modal}, divided from the body; typically holds buttons. */

package/Modal/components/ModalContent/styles.js

@@ -1,34 +1,40 @@
 import styled from 'styled-components';
-import { Color } from '@pushwoosh/kit-constants';
+import { Color, UnitSize } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
 /** Top section of a {@link Modal}; typically wraps a {@link ModalTitle}. */
-export const ModalHeader = styled.div.withConfig({
+export const ModalHeader = styled(Vertical).attrs({
+  $gap: 8,
+  $padding: {
+    horizontal: UnitSize.POPUP_PADDING,
+    top: UnitSize.POPUP_PADDING,
+    bottom: 8
+  }
+}).withConfig({
   displayName: "ModalHeader",
   componentId: "sc-1b5r517-0"
-})(["padding:24px 24px 8px;background-color:", ";"], Color.CLEAR);
+})([""]);
 ModalHeader.displayName = 'ModalHeader';
 /** Groups {@link ModalBodyItem}s with hairline dividers between them, inside a {@link ModalBody}. */
 export const ModalBodyGroup = styled(Vertical).withConfig({
   displayName: "ModalBodyGroup",
   componentId: "sc-1b5r517-1"
-})(["background-color:", ";gap:1px;"], Color.DIVIDER);
+})([""]);
 ModalBodyGroup.displayName = 'ModalBodyGroup';
-/** A single row within a {@link ModalBodyGroup}; pass `$vPadding` to add vertical padding. */
+/** A single row within a {@link ModalBodyGroup}, divided from its siblings by hairlines. */
 export const ModalBodyItem = styled.div.withConfig({
   displayName: "ModalBodyItem",
   componentId: "sc-1b5r517-2"
-})(["padding:", " 24px;background-color:", ";"], ({
-  $vPadding
-}) => $vPadding ? '24px' : 0, Color.CLEAR);
+})(["padding:", ";&:not(:last-child){border-bottom:1px solid ", ";}", " > &:first-child{padding-top:0;}"], UnitSize.POPUP_PADDING, Color.DIVIDER, ModalBodyGroup);
+ModalBodyItem.displayName = 'ModalBodyItem';
 /** Scrollable main content area of a {@link Modal}; self-pads unless it holds a {@link ModalBodyGroup}. */
 export const ModalBody = styled.div.withConfig({
   displayName: "ModalBody",
   componentId: "sc-1b5r517-3"
-})(["background-color:", ";overflow-y:auto;&:not(:has(> ", ")){padding:24px;&:not(:first-child){padding-top:0;}}"], Color.CLEAR, ModalBodyGroup);
+})(["min-height:0;overflow-y:auto;overscroll-behavior:contain;&:not(:has(> ", ")){padding:", ";}", " + &{padding-top:0;}"], ModalBodyGroup, UnitSize.POPUP_PADDING, ModalHeader);
 ModalBody.displayName = 'ModalBody';
 /** Bottom action bar of a {@link Modal}, divided from the body; typically holds buttons. */
 export const ModalFooter = styled.div.withConfig({
   displayName: "ModalFooter",
   componentId: "sc-1b5r517-4"
-})(["padding:24px;background-color:", ";border-top:1px solid ", ";"], Color.CLEAR, Color.DIVIDER);
+})(["padding:", ";border-top:1px solid ", ";"], UnitSize.POPUP_PADDING, Color.DIVIDER);
 ModalFooter.displayName = 'ModalFooter';

package/Modal/components/ModalTitle/ModalTitle.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CloseIcon } from '@pushwoosh/kit-icons';
-import { ModalTitleBox } from './styles';
-import { GhostButton } from '../../../Button';
+import { ModalTitleBox, ModalTitleClose, ModalTitleText } from './styles';
+import { Button } from '../../../Button';
+import { useLang } from '../../polyglot';
 /**
  * Modal heading row with an optional close button; place inside {@link ModalHeader}.
  *
@@ -14,12 +15,22 @@ export function ModalTitle(props) {
     onClose,
     ...rest
   } = props;
+  const lang = useLang();
   return _jsxs(ModalTitleBox, {
     ...rest,
-    children: [children, onClose && _jsx(GhostButton, {
-      onClick: onClose,
-      children: _jsx(CloseIcon, {
-        size: "medium"
+    children: [_jsx(ModalTitleText, {
+      children: children
+    }), onClose && _jsx(ModalTitleClose, {
+      children: _jsx(Button, {
+        color: "secondary",
+        view: "ghost",
+        onClick: onClose,
+        icon: _jsx(CloseIcon, {
+          size: "medium"
+        }),
+        "aria-label": lang({
+          message: 'DUMB.MODAL.CLOSE'
+        })
       })
     })]
   });

package/Modal/components/ModalTitle/styles.d.ts

@@ -1 +1,21 @@
-export declare const ModalTitleBox: import("styled-components").StyledComponent<"h2", any, {}, never>;
+import { H3 } from '@pushwoosh/kit-typography';
+export declare const ModalTitleBox: import("styled-components").StyledComponent<typeof H3, any, {}, never>;
+export declare const ModalTitleText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ModalTitleClose: import("styled-components").StyledComponent<"div", any, import("@pushwoosh/kit-helpers/styled-helpers").CommonBoxProps & {
+    $alignContent?: import("@pushwoosh/kit-helpers/styled-helpers").AlignContentValue;
+    $alignItems?: import("@pushwoosh/kit-helpers/styled-helpers").ItemAlignmentValue;
+    $gap?: import("@pushwoosh/kit-helpers/styled-helpers").StrNum;
+    $justifyContent?: import("@pushwoosh/kit-helpers/styled-helpers").JustifyContentValue;
+} & {
+    $flexDirection?: "row" | "row-reverse" | "column" | "column-reverse";
+    $flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
+} & {
+    $alignItems: string;
+    $justifyContent: string;
+    $shrink: number;
+    $width: number;
+    $height: number;
+    $margin: {
+        left: string;
+    };
+}, "$height" | "$margin" | "$shrink" | "$width" | "$alignItems" | "$justifyContent">;

package/Modal/components/ModalTitle/styles.js

@@ -1,8 +1,29 @@
 import styled from 'styled-components';
-import { Color, FontSize, FontWeight } from '@pushwoosh/kit-constants';
-import { GhostButton } from '../../../Button';
-export const ModalTitleBox = styled.h2.withConfig({
+import { FlexContainer } from '@pushwoosh/kit-helpers';
+import { H3 } from '@pushwoosh/kit-typography';
+const TITLE_GAP = '8px';
+const CLOSE_BOX_SIZE = 24;
+export const ModalTitleBox = styled(H3).withConfig({
   displayName: "ModalTitleBox",
   componentId: "sc-8qbijb-0"
-})(["display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;font-size:", ";font-weight:", ";line-height:22px;letter-spacing:0;margin:0;", "{color:", ";cursor:pointer;&:hover{color:", ";}}"], FontSize.HEADING2, FontWeight.BOLD, GhostButton, Color.LOCKED, Color.MAIN);
-ModalTitleBox.displayName = 'ModalTitleBox';
+})(["display:flex;align-items:center;gap:", ";"], TITLE_GAP);
+ModalTitleBox.displayName = 'ModalTitleBox';
+export const ModalTitleText = styled.span.withConfig({
+  displayName: "ModalTitleText",
+  componentId: "sc-8qbijb-1"
+})(["flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:", ";"], TITLE_GAP);
+ModalTitleText.displayName = 'ModalTitleText';
+export const ModalTitleClose = styled(FlexContainer).attrs({
+  $alignItems: 'center',
+  $justifyContent: 'center',
+  $shrink: 0,
+  $width: CLOSE_BOX_SIZE,
+  $height: CLOSE_BOX_SIZE,
+  $margin: {
+    left: 'auto'
+  }
+}).withConfig({
+  displayName: "ModalTitleClose",
+  componentId: "sc-8qbijb-2"
+})([""]);
+ModalTitleClose.displayName = 'ModalTitleClose';

package/Modal/polyglot/messages_ar.js

@@ -2,5 +2,6 @@ export const messages = {
   'DUMB.MODAL.UNEXPECTED_ERROR': 'حدث خطأ غير متوقع',
   'DUMB.MODAL.CONFIRM_TITLE': 'تأكيد الإجراء',
   'DUMB.MODAL.CONFIRM': 'تأكيد',
-  'DUMB.MODAL.CANCEL': 'إلغاء'
+  'DUMB.MODAL.CANCEL': 'إلغاء',
+  'DUMB.MODAL.CLOSE': 'إغلاق'
 };

package/Modal/polyglot/messages_bn.js

@@ -2,5 +2,6 @@ export const messages = {
   'DUMB.MODAL.UNEXPECTED_ERROR': 'একটি অপ্রত্যাশিত ত্রুটি ঘটেছে',
   'DUMB.MODAL.CONFIRM_TITLE': 'ক্রিয়াটি নিশ্চিত করুন',
   'DUMB.MODAL.CONFIRM': 'নিশ্চিত করুন',
-  'DUMB.MODAL.CANCEL': 'বাতিল করুন'
+  'DUMB.MODAL.CANCEL': 'বাতিল করুন',
+  'DUMB.MODAL.CLOSE': 'বন্ধ করুন'
 };

package/Modal/polyglot/messages_de.js

@@ -2,5 +2,6 @@ export const messages = {
   'DUMB.MODAL.UNEXPECTED_ERROR': 'Ein unerwarteter Fehler ist aufgetreten',
   'DUMB.MODAL.CONFIRM_TITLE': 'Aktion bestätigen',
   'DUMB.MODAL.CONFIRM': 'Bestätigen',
-  'DUMB.MODAL.CANCEL': 'Abbrechen'
+  'DUMB.MODAL.CANCEL': 'Abbrechen',
+  'DUMB.MODAL.CLOSE': 'Schließen'
 };

package/Modal/polyglot/messages_en.js

@@ -2,5 +2,6 @@ export const messages = {
   'DUMB.MODAL.UNEXPECTED_ERROR': 'Unexpected error occurred',
   'DUMB.MODAL.CONFIRM_TITLE': 'Confirm action',
   'DUMB.MODAL.CONFIRM': 'Confirm',
-  'DUMB.MODAL.CANCEL': 'Cancel'
+  'DUMB.MODAL.CANCEL': 'Cancel',
+  'DUMB.MODAL.CLOSE': 'Close'
 };

package/Modal/polyglot/messages_es.js

@@ -2,5 +2,6 @@ export const messages = {
   'DUMB.MODAL.UNEXPECTED_ERROR': 'Se produjo un error inesperado',
   'DUMB.MODAL.CONFIRM_TITLE': 'Confirmar acción',
   'DUMB.MODAL.CONFIRM': 'Confirmar',
-  'DUMB.MODAL.CANCEL': 'Cancelar'
+  'DUMB.MODAL.CANCEL': 'Cancelar',
+  'DUMB.MODAL.CLOSE': 'Cerrar'
 };

package/Modal/polyglot/messages_fr.js

@@ -2,5 +2,6 @@ export const messages = {
   'DUMB.MODAL.UNEXPECTED_ERROR': 'Une erreur inattendue s’est produite',
   'DUMB.MODAL.CONFIRM_TITLE': 'Confirmer l’action',
   'DUMB.MODAL.CONFIRM': 'Confirmer',
-  'DUMB.MODAL.CANCEL': 'Annuler'
+  'DUMB.MODAL.CANCEL': 'Annuler',
+  'DUMB.MODAL.CLOSE': 'Fermer'
 };

package/Modal/polyglot/messages_he.js

@@ -2,5 +2,6 @@ export const messages = {
   'DUMB.MODAL.UNEXPECTED_ERROR': 'אירעה שגיאה בלתי צפויה',
   'DUMB.MODAL.CONFIRM_TITLE': 'אישור פעולה',
   'DUMB.MODAL.CONFIRM': 'אישור',
-  'DUMB.MODAL.CANCEL': 'ביטול'
+  'DUMB.MODAL.CANCEL': 'ביטול',
+  'DUMB.MODAL.CLOSE': 'סגירה'
 };

package/Modal/polyglot/messages_hi.js

@@ -2,5 +2,6 @@ export const messages = {
   'DUMB.MODAL.UNEXPECTED_ERROR': 'एक अप्रत्याशित त्रुटि हुई',
   'DUMB.MODAL.CONFIRM_TITLE': 'कार्रवाई की पुष्टि करें',
   'DUMB.MODAL.CONFIRM': 'पुष्टि करें',
-  'DUMB.MODAL.CANCEL': 'रद्द करें'
+  'DUMB.MODAL.CANCEL': 'रद्द करें',
+  'DUMB.MODAL.CLOSE': 'बंद करें'
 };

package/Modal/polyglot/messages_ja.js

@@ -2,5 +2,6 @@ export const messages = {
   'DUMB.MODAL.UNEXPECTED_ERROR': '予期しないエラーが発生しました',
   'DUMB.MODAL.CONFIRM_TITLE': '操作の確認',
   'DUMB.MODAL.CONFIRM': '確認',
-  'DUMB.MODAL.CANCEL': 'キャンセル'
+  'DUMB.MODAL.CANCEL': 'キャンセル',
+  'DUMB.MODAL.CLOSE': '閉じる'
 };

package/Modal/polyglot/messages_ko.js

@@ -2,5 +2,6 @@ export const messages = {
   'DUMB.MODAL.UNEXPECTED_ERROR': '예기치 않은 오류가 발생했습니다',
   'DUMB.MODAL.CONFIRM_TITLE': '작업 확인',
   'DUMB.MODAL.CONFIRM': '확인',
-  'DUMB.MODAL.CANCEL': '취소'
+  'DUMB.MODAL.CANCEL': '취소',
+  'DUMB.MODAL.CLOSE': '닫기'
 };

package/Modal/polyglot/messages_pt.js

@@ -2,5 +2,6 @@ export const messages = {
   'DUMB.MODAL.UNEXPECTED_ERROR': 'Ocorreu um erro inesperado',
   'DUMB.MODAL.CONFIRM_TITLE': 'Confirmar ação',
   'DUMB.MODAL.CONFIRM': 'Confirmar',
-  'DUMB.MODAL.CANCEL': 'Cancelar'
+  'DUMB.MODAL.CANCEL': 'Cancelar',
+  'DUMB.MODAL.CLOSE': 'Fechar'
 };

package/Modal/polyglot/messages_ru.js

@@ -2,5 +2,6 @@ export const messages = {
   'DUMB.MODAL.UNEXPECTED_ERROR': 'Произошла непредвиденная ошибка',
   'DUMB.MODAL.CONFIRM_TITLE': 'Подтвердите действие',
   'DUMB.MODAL.CONFIRM': 'Подтвердить',
-  'DUMB.MODAL.CANCEL': 'Отмена'
+  'DUMB.MODAL.CANCEL': 'Отмена',
+  'DUMB.MODAL.CLOSE': 'Закрыть'
 };

package/Modal/polyglot/messages_th.js

@@ -2,5 +2,6 @@ export const messages = {
   'DUMB.MODAL.UNEXPECTED_ERROR': 'เกิดข้อผิดพลาดที่ไม่คาดคิด',
   'DUMB.MODAL.CONFIRM_TITLE': 'ยืนยันการดำเนินการ',
   'DUMB.MODAL.CONFIRM': 'ยืนยัน',
-  'DUMB.MODAL.CANCEL': 'ยกเลิก'
+  'DUMB.MODAL.CANCEL': 'ยกเลิก',
+  'DUMB.MODAL.CLOSE': 'ปิด'
 };

package/Modal/polyglot/messages_zh.js

@@ -2,5 +2,6 @@ export const messages = {
   'DUMB.MODAL.UNEXPECTED_ERROR': '发生了意外错误',
   'DUMB.MODAL.CONFIRM_TITLE': '确认操作',
   'DUMB.MODAL.CONFIRM': '确认',
-  'DUMB.MODAL.CANCEL': '取消'
+  'DUMB.MODAL.CANCEL': '取消',
+  'DUMB.MODAL.CLOSE': '关闭'
 };

package/Modal/polyglot/types.d.ts

@@ -4,4 +4,5 @@ export type ModalMessages = {
     'DUMB.MODAL.CONFIRM_TITLE': NoParams;
     'DUMB.MODAL.CONFIRM': NoParams;
     'DUMB.MODAL.CANCEL': NoParams;
+    'DUMB.MODAL.CLOSE': NoParams;
 };

package/NativeRichMediaPreview/NativeRichMediaPreview.js

@@ -8,6 +8,7 @@ import { NativeRichMediaDim } from './components/NativeRichMediaDim';
 import { NativeRichMediaMuteChip } from './components/NativeRichMediaMuteChip';
 import { EDGE_INSET, clampIndex } from './helpers';
 import { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
+import { resolveLocalization } from './resolveLocalization';
 import { BackdropLayer, ContentFlow, PreviewHost, ScrollLayer, SpinnerLayer } from './styles';
 import { NativeRichMediaBannerView, NativeRichMediaCarouselView, NativeRichMediaFullscreenView, NativeRichMediaInvalidView, NativeRichMediaModalView, NativeRichMediaPipView, NativeRichMediaScratchcardView, NativeRichMediaSheetView, NativeRichMediaSpinwheelView, NativeRichMediaStoriesView, NativeRichMediaVideoView } from './views';
 import { GradientOverlay } from './views/shared/styles';
@@ -184,13 +185,21 @@ function renderConfig(config, activeIndex) {
 export function NativeRichMediaPreview(props) {
   const {
     content,
+    localization,
+    language,
     width,
     height,
     activeIndex = 0,
     isLoading = false,
     withBackground = true
   } = props;
-  const config = useMemo(() => parseNativeRichMediaConfig(content), [content]);
+  const config = useMemo(() => {
+    const parsed = parseNativeRichMediaConfig(content);
+    if (!parsed) {
+      return null;
+    }
+    return parseNativeRichMediaConfig(resolveLocalization(parsed, localization, language));
+  }, [content, localization, language]);
   const shouldDim = !isLoading && dimsScreen(config);
   return _jsxs(PreviewHost, {
     width: width,

package/NativeRichMediaPreview/index.d.ts

@@ -1,4 +1,4 @@
-export type { NativeRichMediaConfig, NativeRichMediaDisplayType, NativeRichMediaText, NativeRichMediaBorder, NativeRichMediaCover, NativeRichMediaAction, NativeRichMediaButton, NativeRichMediaReward, NativeRichMediaModalBlock, NativeRichMediaSheetBlock, NativeRichMediaCarouselBlock, NativeRichMediaStoriesBlock, NativeRichMediaBannerBlock, NativeRichMediaFullscreenBlock, NativeRichMediaVideoBlock, NativeRichMediaPipBlock, NativeRichMediaScratchcardBlock, NativeRichMediaSpinwheelBlock, NativeRichMediaPreviewProps, } from './types';
+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 { NATIVE_RICH_MEDIA_DISPLAY_TYPES } from './types';
 export { parseNativeRichMediaConfig } from './parseNativeRichMediaConfig';
 export { NativeRichMediaPreview } from './NativeRichMediaPreview';

package/NativeRichMediaPreview/resolveLocalization.d.ts

@@ -0,0 +1,9 @@
+import type { NativeRichMediaConfig, NativeRichMediaLocalization } from './types';
+/**
+ * Replaces every `{{key|type}}` (or `{{key|type|default}}`) placeholder in a
+ * parsed config with the text from `localization[language][key]`, falling back
+ * to the `default` bucket and then to the placeholder's default segment (or the
+ * key itself when it has none). Returns a new config; non-placeholder (already
+ * literal) values are copied through unchanged.
+ */
+export declare function resolveLocalization(config: NativeRichMediaConfig, localization: NativeRichMediaLocalization | undefined, language: string | undefined): NativeRichMediaConfig;

package/NativeRichMediaPreview/resolveLocalization.js

@@ -0,0 +1,45 @@
+const PLACEHOLDER_RE = /^\{\{([^|}]+)\|[^|}]*(?:\|([^}]*))?\}\}$/;
+function resolveValue(value, localization, language) {
+  var _localization$languag, _localization$default;
+  const match = PLACEHOLDER_RE.exec(value);
+  if (!match) {
+    return value;
+  }
+  const key = match[1];
+  const fallback = match[2] ?? key;
+  const languageValue = language ? localization === null || localization === void 0 || (_localization$languag = localization[language]) === null || _localization$languag === void 0 ? void 0 : _localization$languag[key] : undefined;
+  if (typeof languageValue === 'string') {
+    return languageValue;
+  }
+  const defaultValue = localization === null || localization === void 0 || (_localization$default = localization.default) === null || _localization$default === void 0 ? void 0 : _localization$default[key];
+  if (typeof defaultValue === 'string') {
+    return defaultValue;
+  }
+  return fallback;
+}
+function resolveNode(node, localization, language) {
+  if (typeof node === 'string') {
+    return resolveValue(node, localization, language);
+  }
+  if (Array.isArray(node)) {
+    return node.map(item => resolveNode(item, localization, language));
+  }
+  if (node !== null && typeof node === 'object') {
+    const result = {};
+    Object.entries(node).forEach(([key, value]) => {
+      result[key] = resolveNode(value, localization, language);
+    });
+    return result;
+  }
+  return node;
+}
+/**
+ * Replaces every `{{key|type}}` (or `{{key|type|default}}`) placeholder in a
+ * parsed config with the text from `localization[language][key]`, falling back
+ * to the `default` bucket and then to the placeholder's default segment (or the
+ * key itself when it has none). Returns a new config; non-placeholder (already
+ * literal) values are copied through unchanged.
+ */
+export function resolveLocalization(config, localization, language) {
+  return resolveNode(config, localization, language);
+}

package/NativeRichMediaPreview/types.d.ts

@@ -283,10 +283,20 @@ export type NativeRichMediaConfig = {
 export type NativeRichMediaDisplayType = NativeRichMediaConfig['displayType'];
 /** All supported {@link NativeRichMediaDisplayType} values. */
 export declare const NATIVE_RICH_MEDIA_DISPLAY_TYPES: NativeRichMediaDisplayType[];
+/**
+ * Per-language text for `{{key|type|default}}` placeholders in the config:
+ * `{ [language]: { [key]: text } }`, plus a `default` bucket used as the
+ * fallback. Text lives here rather than inline in `content`.
+ */
+export type NativeRichMediaLocalization = Record<string, Record<string, string>>;
 /** Props of {@link NativeRichMediaPreview}. */
 export type NativeRichMediaPreviewProps = {
     /** Rich media config, as an object or a JSON string. */
     content: string | NativeRichMediaConfig;
+    /** Per-language text for placeholders in `content`; when given, placeholders are resolved for `language` (falling back to `default`). */
+    localization?: NativeRichMediaLocalization;
+    /** Language code to resolve placeholders for; falls back to the `default` bucket. */
+    language?: string;
     /** Preview box width; number is treated as px. */
     width: string | number;
     /** Preview box height; number is treated as px. */

package/index.d.ts

@@ -44,7 +44,7 @@ export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip, type ChipProps, type ChipVariant } from './Chip';
 export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
 export { NativeRichMediaPreview, parseNativeRichMediaConfig, 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, } 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 { RichMessageEditor, RichMessageViewer, type DynamicContent, } from './RichMessageEditor';
 export { FrequencyCappingEdit, FrequencyCappingReadonly, FrequencyCappingInApps, 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.166",
+  "version": "1.1.168",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",