@pushwoosh/dumb-components 1.1.165 → 1.1.167

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/parseNativeRichMediaConfig.d.ts

@@ -3,6 +3,9 @@ import { type NativeRichMediaConfig } from './types';
  * Parses and validates a native rich media config from an object or a JSON
  * string; returns `null` when the input is not a well-formed config — unknown
  * `displayType`, missing block, empty `items`/`segments`, or any required
- * field of the block contract absent or malformed.
+ * field of the block contract absent or malformed. Content that may be
+ * legitimately unfinished in a draft — empty text values, an empty or absent
+ * video `url`, an absent `reward` — is accepted and rendered bare, so live
+ * editor drafts preview without a placeholder.
  */
 export declare function parseNativeRichMediaConfig(content: string | NativeRichMediaConfig): NativeRichMediaConfig | null;

package/NativeRichMediaPreview/parseNativeRichMediaConfig.js

@@ -9,7 +9,13 @@ function isFiniteNumber(value) {
   return typeof value === 'number' && Number.isFinite(value);
 }
 function isText(value) {
-  return isObject(value) && isNonEmptyString(value.text) && isNonEmptyString(value.color);
+  return isObject(value) && typeof value.text === 'string' && isNonEmptyString(value.color);
+}
+function isFilledText(value) {
+  return isText(value) && isNonEmptyString(value.text);
+}
+function isOptionalString(value) {
+  return value === undefined || typeof value === 'string';
 }
 function isOptionalText(value) {
   return value === undefined || isText(value);
@@ -21,7 +27,7 @@ function isAction(value) {
   if (value.type === 'close') {
     return true;
   }
-  return value.type === 'url' && isNonEmptyString(value.url);
+  return value.type === 'url' && isOptionalString(value.url);
 }
 function isOptionalAction(value) {
   return value === undefined || isAction(value);
@@ -45,7 +51,7 @@ function isReward(value) {
   if (!isObject(value)) {
     return false;
   }
-  const hasIdentity = isText(value.title) || isNonEmptyString(value.code);
+  const hasIdentity = isFilledText(value.title) || isNonEmptyString(value.code);
   return hasIdentity && isOptionalText(value.title) && isOptionalText(value.message) && (value.button === undefined || isButton(value.button));
 }
 function isOptionalReward(value) {
@@ -59,18 +65,21 @@ const BLOCK_VALIDATORS = {
   carousel: block => typeof block.showClose === 'boolean' && Array.isArray(block.items) && block.items.length > 0 && block.items.every(item => isObject(item) && isOptionalText(item.title) && isOptionalText(item.message) && isOptionalAction(item.action)),
   fullscreen: block => typeof block.showClose === 'boolean' && isCover(block.cover) && isOptionalText(block.title) && isOptionalText(block.message) && isButtonArray(block.buttons),
   modal: block => typeof block.showClose === 'boolean' && typeof block.dimBackground === 'boolean' && isNonEmptyString(block.background) && isOptionalText(block.title) && isOptionalText(block.message) && isButtonArray(block.buttons),
-  pip: block => typeof block.showClose === 'boolean' && ['bottom-right', 'bottom-left', 'top-right', 'top-left'].includes(block.position) && typeof block.loop === 'boolean' && typeof block.muted === 'boolean' && isNonEmptyString(block.url) && isFiniteNumber(block.width) && isFiniteNumber(block.aspectRatio) && isOptionalAction(block.action),
-  scratchcard: block => typeof block.showClose === 'boolean' && isBackground(block.background) && isFiniteNumber(block.revealThreshold) && isCover(block.cover) && (block.revealButton === undefined || isActionlessButton(block.revealButton)) && isOptionalText(block.title) && isOptionalText(block.message) && isReward(block.reward),
+  pip: block => typeof block.showClose === 'boolean' && ['bottom-right', 'bottom-left', 'top-right', 'top-left'].includes(block.position) && typeof block.loop === 'boolean' && typeof block.muted === 'boolean' && isOptionalString(block.url) && isFiniteNumber(block.width) && isFiniteNumber(block.aspectRatio) && isOptionalAction(block.action),
+  scratchcard: block => typeof block.showClose === 'boolean' && isBackground(block.background) && isFiniteNumber(block.revealThreshold) && isCover(block.cover) && (block.revealButton === undefined || isActionlessButton(block.revealButton)) && isOptionalText(block.title) && isOptionalText(block.message) && isOptionalReward(block.reward),
   sheet: block => typeof block.showClose === 'boolean' && typeof block.dimBackground === 'boolean' && isNonEmptyString(block.background) && isOptionalText(block.title) && isOptionalText(block.message) && isButtonArray(block.buttons),
-  spinwheel: block => typeof block.showClose === 'boolean' && isBackground(block.background) && isFiniteNumber(block.winIndex) && isActionlessButton(block.spinButton) && isOptionalText(block.title) && isOptionalText(block.message) && isReward(block.reward) && isOptionalText(block.loseTitle) && Array.isArray(block.segments) && block.segments.length > 0 && block.segments.every(segment => isObject(segment) && isText(segment.message) && isFiniteNumber(segment.weight) && isOptionalReward(segment.reward)),
+  spinwheel: block => typeof block.showClose === 'boolean' && isBackground(block.background) && isFiniteNumber(block.winIndex) && isActionlessButton(block.spinButton) && isOptionalText(block.title) && isOptionalText(block.message) && isOptionalReward(block.reward) && isOptionalText(block.loseTitle) && Array.isArray(block.segments) && block.segments.length > 0 && block.segments.every(segment => isObject(segment) && isText(segment.message) && isFiniteNumber(segment.weight) && isOptionalReward(segment.reward)),
   stories: block => typeof block.showClose === 'boolean' && typeof block.loop === 'boolean' && Array.isArray(block.items) && block.items.length > 0 && block.items.every(item => isObject(item) && isOptionalText(item.title) && isOptionalText(item.message) && isButtonArray(item.buttons) && isFiniteNumber(item.duration)),
-  video: block => typeof block.showClose === 'boolean' && typeof block.loop === 'boolean' && typeof block.muted === 'boolean' && isNonEmptyString(block.url) && isOptionalText(block.title) && isOptionalText(block.message) && isButtonArray(block.buttons)
+  video: block => typeof block.showClose === 'boolean' && typeof block.loop === 'boolean' && typeof block.muted === 'boolean' && isOptionalString(block.url) && isOptionalText(block.title) && isOptionalText(block.message) && isButtonArray(block.buttons)
 };
 /**
  * Parses and validates a native rich media config from an object or a JSON
  * string; returns `null` when the input is not a well-formed config — unknown
  * `displayType`, missing block, empty `items`/`segments`, or any required
- * field of the block contract absent or malformed.
+ * field of the block contract absent or malformed. Content that may be
+ * legitimately unfinished in a draft — empty text values, an empty or absent
+ * video `url`, an absent `reward` — is accepted and rendered bare, so live
+ * editor drafts preview without a placeholder.
  */
 export function parseNativeRichMediaConfig(content) {
   let raw = content;

package/NativeRichMediaPreview/types.d.ts

@@ -22,9 +22,11 @@ export type NativeRichMediaCover = {
 /** Available actions. */
 export type NativeRichMediaAction = {
     type: 'close';
-} | {
+}
+/** `url` is required by the SDK, but may be empty or absent in a draft. */
+ | {
     type: 'url';
-    url: string;
+    url?: string;
 };
 /** Button block. */
 export type NativeRichMediaButton = {
@@ -162,8 +164,8 @@ export type NativeRichMediaVideoBlock = {
     loop: boolean;
     /** Start playback muted. */
     muted: boolean;
-    /** Video URL. */
-    url: string;
+    /** Video URL; required by the SDK, may be empty or absent in a draft. */
+    url?: string;
     /** Poster image URL shown before playback. */
     poster?: string;
     /** Image URL shown when the video cannot be played. */
@@ -181,8 +183,8 @@ export type NativeRichMediaPipBlock = {
     loop: boolean;
     /** Start playback muted. */
     muted: boolean;
-    /** Video URL. */
-    url: string;
+    /** Video URL; required by the SDK, may be empty or absent in a draft. */
+    url?: string;
     /** Poster image URL shown before playback. */
     poster?: string;
     /** Image URL shown when the video cannot be played. */
@@ -212,8 +214,8 @@ export type NativeRichMediaScratchcardBlock = {
     title?: NativeRichMediaText;
     /** Message. */
     message?: NativeRichMediaText;
-    /** Reward revealed under the cover. */
-    reward: NativeRichMediaReward;
+    /** Reward revealed under the cover; required by the SDK, may be absent in a draft. */
+    reward?: NativeRichMediaReward;
 };
 /** Content of a `spinwheel` rich media. */
 export type NativeRichMediaSpinwheelBlock = {
@@ -229,8 +231,8 @@ export type NativeRichMediaSpinwheelBlock = {
     winIndex: number;
     /** Spin button, including its own tap action. */
     spinButton: Omit<NativeRichMediaButton, 'action'>;
-    /** Reward shown after a winning spin. */
-    reward: NativeRichMediaReward;
+    /** Reward shown after a winning spin; required by the SDK, may be absent in a draft. */
+    reward?: NativeRichMediaReward;
     /** Heading shown after a losing spin. */
     loseTitle?: NativeRichMediaText;
     /** Wheel sectors. */

package/NativeRichMediaPreview/views/NativeRichMediaBannerView/styles.js

@@ -13,4 +13,4 @@ export const Card = styled.div.withConfig({
 export const CloseGlyph = styled.div.withConfig({
   displayName: "CloseGlyph",
   componentId: "sc-1fs78cm-1"
-})(["flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.6);font-size:", ";font-weight:", ";user-select:none;cursor:pointer;"], FontSize.SMALL, FontWeight.BOLD);
+})(["flex:none;margin-left:auto;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.6);font-size:", ";font-weight:", ";user-select:none;cursor:pointer;"], FontSize.SMALL, FontWeight.BOLD);

package/NativeRichMediaPreview/views/NativeRichMediaModalView/styles.js

@@ -5,4 +5,4 @@ export const Card = styled(SharedCard).attrs({
 }).withConfig({
   displayName: "Card",
   componentId: "sc-1std439-0"
-})([""]);
+})(["min-height:70px;"]);

package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/NativeRichMediaScratchcardView.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, HintOverlay, HintText, RevealArea, RevealButtonText, RewardSlot } from './styles';
+import { Card, HintOverlay, HintText, RevealArea, RevealButtonText, RewardSlot, TextBlock } from './styles';
 import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
 import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
 import { NativeRichMediaRewardPanel } from '../../components/NativeRichMediaRewardPanel';
@@ -21,15 +21,17 @@ export function NativeRichMediaScratchcardView(props) {
   const revealButton = asButtonValue(block.revealButton);
   return _jsxs(Card, {
     "$background": surfaceBackground(block.background, '#FFFFFF'),
-    children: [title.text && _jsx(NativeRichMediaTitle, {
-      "$color": title.color,
-      "$align": "center",
-      children: title.text
-    }), message.text && _jsx(NativeRichMediaText, {
-      "$color": message.color,
-      "$marginTop": 4,
-      "$align": "center",
-      children: message.text
+    children: [(title.text || message.text) && _jsxs(TextBlock, {
+      children: [title.text && _jsx(NativeRichMediaTitle, {
+        "$color": title.color,
+        "$align": "center",
+        children: title.text
+      }), message.text && _jsx(NativeRichMediaText, {
+        "$color": message.color,
+        "$marginTop": 4,
+        "$align": "center",
+        children: message.text
+      })]
     }), _jsxs(RevealArea, {
       children: [_jsx(RewardSlot, {
         children: _jsx(NativeRichMediaRewardPanel, {

package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/styles.d.ts

@@ -4,6 +4,7 @@ export declare const Card: import("styled-components").StyledComponent<"div", an
 } & {
     $padding: string;
 }, "$padding">;
+export declare const TextBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const RevealArea: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const RewardSlot: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HintOverlay: import("styled-components").StyledComponent<"div", any, {

package/NativeRichMediaPreview/views/NativeRichMediaScratchcardView/styles.js

@@ -4,35 +4,39 @@ import { NativeRichMediaText } from '../../components/NativeRichMediaText';
 import { mixHex } from '../../helpers';
 import { Card as SharedCard } from '../shared/styles';
 export const Card = styled(SharedCard).attrs({
-  $padding: '28px 24px 16px'
+  $padding: '24px'
 }).withConfig({
   displayName: "Card",
   componentId: "sc-nguevq-0"
 })([""]);
+export const TextBlock = styled.div.withConfig({
+  displayName: "TextBlock",
+  componentId: "sc-nguevq-1"
+})(["margin-bottom:14px;"]);
 export const RevealArea = styled.div.withConfig({
   displayName: "RevealArea",
-  componentId: "sc-nguevq-1"
-})(["position:relative;margin-top:14px;height:179px;border-radius:18px;background:#F7F7F7;overflow:hidden;"]);
+  componentId: "sc-nguevq-2"
+})(["position:relative;height:179px;border-radius:18px;background:#F7F7F7;overflow:hidden;"]);
 export const RewardSlot = styled.div.withConfig({
   displayName: "RewardSlot",
-  componentId: "sc-nguevq-2"
+  componentId: "sc-nguevq-3"
 })(["position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);"]);
 export const HintOverlay = styled.div.withConfig({
   displayName: "HintOverlay",
-  componentId: "sc-nguevq-3"
+  componentId: "sc-nguevq-4"
 })(["position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:", ";"], ({
   $coverBase
 }) => `linear-gradient(135deg, ${mixHex($coverBase, '#FFFFFF', 0.4)}, ${$coverBase} 45%, ${mixHex($coverBase, '#000000', 0.12)})`);
 export const HintText = styled(NativeRichMediaText).withConfig({
   displayName: "HintText",
-  componentId: "sc-nguevq-4"
+  componentId: "sc-nguevq-5"
 })(["font-weight:", ";"], FontWeight.MEDIUM);
 export const RevealButtonText = styled(NativeRichMediaText).attrs({
   $align: 'center',
   $marginTop: 14
 }).withConfig({
   displayName: "RevealButtonText",
-  componentId: "sc-nguevq-5"
+  componentId: "sc-nguevq-6"
 })(["font-weight:", ";width:fit-content;margin-left:auto;margin-right:auto;background:", ";border-radius:", "px;padding:10px 16px;border:1px solid ", ";user-select:none;cursor:pointer;"], FontWeight.MEDIUM, ({
   $background
 }) => $background, ({

package/package.json

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