@pushwoosh/dumb-components 4.2.0 → 4.3.0

package/FrequencyCapping/components/Condition/index.js

@@ -1,9 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Color } from '@pushwoosh/kit-constants';
-import { HelpRoundIcon } from '@pushwoosh/kit-icons';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ChipWithinTextContainer } from './styles';
 import { Chip } from '../../../Chip';
-import { Tooltip } from '../../../Tooltip';
 export function ChipFrequencyCapping({
   text,
   tooltip,
@@ -11,24 +8,11 @@ export function ChipFrequencyCapping({
 }) {
   return _jsx(ChipWithinTextContainer, {
     "$inText": $inText,
-    children: tooltip ? _jsx(Tooltip, {
-      content: tooltip,
-      position: "top-middle",
-      children: _jsxs(Chip, {
-        "$variant": "primary",
-        "$readOnly": true,
-        as: "span",
-        children: [text, _jsx(HelpRoundIcon, {
-          as: "span",
-          size: "small",
-          view: "lined",
-          color: Color.PHANTOM
-        })]
-      })
-    }) : _jsx(Chip, {
+    children: _jsx(Chip, {
       "$variant": "primary",
       "$readOnly": true,
       as: "span",
+      "$tooltip": tooltip,
       children: text
     })
   });

package/FrequencyCapping/helpers/getReadonlyCappingHelpers.js

@@ -49,7 +49,10 @@ export function getReadonlyCappingLabel(cappingOption, isGlobalCappingDisabled,
     children: [lang({
       message: 'DUMB.FREQUENCY_CAPPING.RO.GLOBAL_LABEL'
     }), _jsx(ChipFrequencyCapping, {
-      text: getCappingChipText(lang, 0, 0)
+      text: getCappingChipText(lang, 0, 0),
+      tooltip: lang({
+        message: 'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_UNLIMITED'
+      })
     }), lang({
       message: 'DUMB.FREQUENCY_CAPPING.RO.BECAUSE_UNSET'
     })]

package/FrequencyCapping/polyglot/messages_ar.js

@@ -39,5 +39,6 @@ export const messages = {
   'DUMB.FREQUENCY_CAPPING.RO.GLOBAL_LABEL': 'تحديد التكرار العام:',
   'DUMB.FREQUENCY_CAPPING.RO.BECAUSE_UNSET': 'لأنه لم يتم تعيين حد',
   'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_LIMIT': 'إذا تجاوز المشترك حد الرسائل المستلمة، فلن يستلم هذه الرسالة{% if isInJourney == true %} وسينتقل إلى الخطوة التالية{% endif %}',
-  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'سيستلم المستخدم هذه الرسالة على أي حال، حتى لو تجاوز الحدود المحددة للقناة'
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'سيستلم المستخدم هذه الرسالة على أي حال، حتى لو تجاوز الحدود المحددة للقناة',
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_UNLIMITED': 'لم يتم تعيين حد التكرار العام، لذلك لا يوجد حد لعدد الرسائل التي يتلقاها المشترك'
 };

package/FrequencyCapping/polyglot/messages_bn.js

@@ -39,5 +39,6 @@ export const messages = {
   'DUMB.FREQUENCY_CAPPING.RO.GLOBAL_LABEL': 'গ্লোবাল ফ্রিকোয়েন্সি সীমা:',
   'DUMB.FREQUENCY_CAPPING.RO.BECAUSE_UNSET': 'কারণ সীমা নির্ধারণ করা হয়নি',
   'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_LIMIT': 'সাবস্ক্রাইবার প্রাপ্ত বার্তার সীমা অতিক্রম করলে তিনি এই বার্তাটি পাবেন না{% if isInJourney == true %} এবং পরবর্তী ধাপে এগিয়ে যাবেন{% endif %}',
-  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'ব্যবহারকারী চ্যানেলের জন্য নির্ধারিত সীমা অতিক্রম করলেও যেকোনো অবস্থায় এই বার্তাটি পাবেন'
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'ব্যবহারকারী চ্যানেলের জন্য নির্ধারিত সীমা অতিক্রম করলেও যেকোনো অবস্থায় এই বার্তাটি পাবেন',
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_UNLIMITED': 'গ্লোবাল ফ্রিকোয়েন্সি সীমা সেট করা নেই, তাই একজন সাবস্ক্রাইবার কতগুলি বার্তা পাবেন তা সীমিত নয়'
 };

package/FrequencyCapping/polyglot/messages_de.js

@@ -39,5 +39,6 @@ export const messages = {
   'DUMB.FREQUENCY_CAPPING.RO.GLOBAL_LABEL': 'Globale Frequenzbegrenzung:',
   'DUMB.FREQUENCY_CAPPING.RO.BECAUSE_UNSET': 'da kein Limit festgelegt ist',
   'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_LIMIT': 'Wenn der Abonnent das Limit empfangener Nachrichten überschreitet, erhält er diese Nachricht nicht{% if isInJourney == true %} und fährt mit dem nächsten Schritt fort{% endif %}',
-  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'Der Benutzer erhält diese Nachricht in jedem Fall, auch wenn er die für den Kanal festgelegten Limits überschritten hat'
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'Der Benutzer erhält diese Nachricht in jedem Fall, auch wenn er die für den Kanal festgelegten Limits überschritten hat',
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_UNLIMITED': 'Es ist keine globale Frequenzbegrenzung festgelegt, daher ist die Anzahl der Nachrichten, die ein Abonnent erhält, nicht begrenzt'
 };

package/FrequencyCapping/polyglot/messages_en.js

@@ -39,5 +39,6 @@ export const messages = {
   'DUMB.FREQUENCY_CAPPING.RO.GLOBAL_LABEL': 'Global frequency capping:',
   'DUMB.FREQUENCY_CAPPING.RO.BECAUSE_UNSET': 'because limit isn’t set',
   'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_LIMIT': 'If the subscriber exceeds the limit of received messages, they will not receive this message{% if isInJourney == true %} and will proceed to the next step{% endif %}',
-  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'The user will receive this message regardless, even if they have exceeded the set limits for the channel'
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'The user will receive this message regardless, even if they have exceeded the set limits for the channel',
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_UNLIMITED': 'Global frequency capping isn’t set, so the number of messages a subscriber receives isn’t limited'
 };

package/FrequencyCapping/polyglot/messages_es.js

@@ -39,5 +39,6 @@ export const messages = {
   'DUMB.FREQUENCY_CAPPING.RO.GLOBAL_LABEL': 'Límite de frecuencia global:',
   'DUMB.FREQUENCY_CAPPING.RO.BECAUSE_UNSET': 'porque no se ha establecido un límite',
   'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_LIMIT': 'Si el suscriptor supera el límite de mensajes recibidos, no recibirá este mensaje{% if isInJourney == true %} y pasará al siguiente paso{% endif %}',
-  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'El usuario recibirá este mensaje de todos modos, incluso si ha superado los límites establecidos para el canal'
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'El usuario recibirá este mensaje de todos modos, incluso si ha superado los límites establecidos para el canal',
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_UNLIMITED': 'No hay un límite de frecuencia global, por lo que la cantidad de mensajes que recibe un suscriptor no está limitada'
 };

package/FrequencyCapping/polyglot/messages_fr.js

@@ -39,5 +39,6 @@ export const messages = {
   'DUMB.FREQUENCY_CAPPING.RO.GLOBAL_LABEL': 'Limitation de fréquence globale :',
   'DUMB.FREQUENCY_CAPPING.RO.BECAUSE_UNSET': 'car aucune limite n’est définie',
   'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_LIMIT': 'Si l’abonné dépasse la limite de messages reçus, il ne recevra pas ce message{% if isInJourney == true %} et passera à l’étape suivante{% endif %}',
-  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'L’utilisateur recevra ce message quoi qu’il arrive, même s’il a dépassé les limites définies pour le canal'
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'L’utilisateur recevra ce message quoi qu’il arrive, même s’il a dépassé les limites définies pour le canal',
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_UNLIMITED': 'Aucune limite de fréquence globale n’est définie : le nombre de messages reçus par un abonné n’est donc pas limité'
 };

package/FrequencyCapping/polyglot/messages_he.js

@@ -39,5 +39,6 @@ export const messages = {
   'DUMB.FREQUENCY_CAPPING.RO.GLOBAL_LABEL': 'הגבלת תדירות גלובלית:',
   'DUMB.FREQUENCY_CAPPING.RO.BECAUSE_UNSET': 'מכיוון שלא הוגדרה מגבלה',
   'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_LIMIT': 'אם המנוי יחרוג ממגבלת ההודעות שהתקבלו, הוא לא יקבל הודעה זו{% if isInJourney == true %} ויעבור לשלב הבא{% endif %}',
-  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'המשתמש יקבל הודעה זו בכל מקרה, גם אם חרג מהמגבלות שהוגדרו לערוץ'
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'המשתמש יקבל הודעה זו בכל מקרה, גם אם חרג מהמגבלות שהוגדרו לערוץ',
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_UNLIMITED': 'לא הוגדרה הגבלת תדירות גלובלית, ולכן מספר ההודעות שמנוי מקבל אינו מוגבל'
 };

package/FrequencyCapping/polyglot/messages_hi.js

@@ -39,5 +39,6 @@ export const messages = {
   'DUMB.FREQUENCY_CAPPING.RO.GLOBAL_LABEL': 'वैश्विक आवृत्ति सीमा:',
   'DUMB.FREQUENCY_CAPPING.RO.BECAUSE_UNSET': 'क्योंकि सीमा निर्धारित नहीं है',
   'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_LIMIT': 'यदि सब्सक्राइबर प्राप्त संदेशों की सीमा पार कर लेता है, तो उसे यह संदेश प्राप्त नहीं होगा{% if isInJourney == true %} और वह अगले चरण पर चला जाएगा{% endif %}',
-  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'उपयोगकर्ता को यह संदेश हर हाल में प्राप्त होगा, भले ही उसने चैनल के लिए निर्धारित सीमाएँ पार कर ली हों'
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'उपयोगकर्ता को यह संदेश हर हाल में प्राप्त होगा, भले ही उसने चैनल के लिए निर्धारित सीमाएँ पार कर ली हों',
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_UNLIMITED': 'ग्लोबल फ़्रीक्वेंसी सीमा सेट नहीं है, इसलिए सब्सक्राइबर को मिलने वाले संदेशों की संख्या सीमित नहीं है'
 };

package/FrequencyCapping/polyglot/messages_ja.js

@@ -39,5 +39,6 @@ export const messages = {
   'DUMB.FREQUENCY_CAPPING.RO.GLOBAL_LABEL': 'グローバル頻度制限：',
   'DUMB.FREQUENCY_CAPPING.RO.BECAUSE_UNSET': '制限が設定されていないため',
   'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_LIMIT': '購読者が受信メッセージの上限を超えた場合、このメッセージは届きません{% if isInJourney == true %}。そして次のステップに進みます{% endif %}',
-  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'チャネルに設定された上限を超えていても、ユーザーはこのメッセージを必ず受信します'
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'チャネルに設定された上限を超えていても、ユーザーはこのメッセージを必ず受信します',
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_UNLIMITED': 'グローバルな頻度上限が設定されていないため、購読者が受け取るメッセージ数に制限はありません'
 };

package/FrequencyCapping/polyglot/messages_ko.js

@@ -39,5 +39,6 @@ export const messages = {
   'DUMB.FREQUENCY_CAPPING.RO.GLOBAL_LABEL': '전역 빈도 제한:',
   'DUMB.FREQUENCY_CAPPING.RO.BECAUSE_UNSET': '제한이 설정되지 않았기 때문에',
   'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_LIMIT': '구독자가 수신 메시지 제한을 초과하면 이 메시지를 받지 않습니다{% if isInJourney == true %} 그리고 다음 단계로 진행합니다{% endif %}',
-  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': '사용자가 채널에 설정된 제한을 초과했더라도 이 메시지를 반드시 수신합니다'
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': '사용자가 채널에 설정된 제한을 초과했더라도 이 메시지를 반드시 수신합니다',
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_UNLIMITED': '전역 빈도 제한이 설정되지 않아 구독자가 받는 메시지 수에 제한이 없습니다'
 };

package/FrequencyCapping/polyglot/messages_pt.js

@@ -39,5 +39,6 @@ export const messages = {
   'DUMB.FREQUENCY_CAPPING.RO.GLOBAL_LABEL': 'Limite de frequência global:',
   'DUMB.FREQUENCY_CAPPING.RO.BECAUSE_UNSET': 'porque nenhum limite foi definido',
   'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_LIMIT': 'Se o assinante exceder o limite de mensagens recebidas, ele não receberá esta mensagem{% if isInJourney == true %} e avançará para a próxima etapa{% endif %}',
-  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'O usuário receberá esta mensagem de qualquer forma, mesmo que tenha excedido os limites definidos para o canal'
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'O usuário receberá esta mensagem de qualquer forma, mesmo que tenha excedido os limites definidos para o canal',
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_UNLIMITED': 'O limite de frequência global não está definido, então o número de mensagens que um assinante recebe não é limitado'
 };

package/FrequencyCapping/polyglot/messages_ru.js

@@ -39,5 +39,6 @@ export const messages = {
   'DUMB.FREQUENCY_CAPPING.RO.GLOBAL_LABEL': 'Глобальное ограничение частоты:',
   'DUMB.FREQUENCY_CAPPING.RO.BECAUSE_UNSET': 'так как лимит не задан',
   'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_LIMIT': 'Если подписчик превысит лимит полученных сообщений, он не получит это сообщение{% if isInJourney == true %} и перейдёт к следующему шагу{% endif %}',
-  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'Пользователь получит это сообщение в любом случае, даже если он превысил установленные лимиты для канала'
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'Пользователь получит это сообщение в любом случае, даже если он превысил установленные лимиты для канала',
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_UNLIMITED': 'Глобальное ограничение частоты не задано, поэтому число сообщений, которые получает подписчик, не ограничено'
 };

package/FrequencyCapping/polyglot/messages_th.js

@@ -39,5 +39,6 @@ export const messages = {
   'DUMB.FREQUENCY_CAPPING.RO.GLOBAL_LABEL': 'การจำกัดความถี่ส่วนกลาง:',
   'DUMB.FREQUENCY_CAPPING.RO.BECAUSE_UNSET': 'เนื่องจากยังไม่ได้ตั้งค่าขีดจำกัด',
   'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_LIMIT': 'หากผู้รับเกินขีดจำกัดของข้อความที่ได้รับ ผู้รับจะไม่ได้รับข้อความนี้{% if isInJourney == true %} และจะไปยังขั้นตอนถัดไป{% endif %}',
-  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'ผู้ใช้จะได้รับข้อความนี้ไม่ว่าในกรณีใด แม้ว่าจะเกินขีดจำกัดที่ตั้งไว้สำหรับช่องทางแล้วก็ตาม'
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': 'ผู้ใช้จะได้รับข้อความนี้ไม่ว่าในกรณีใด แม้ว่าจะเกินขีดจำกัดที่ตั้งไว้สำหรับช่องทางแล้วก็ตาม',
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_UNLIMITED': 'ยังไม่ได้ตั้งค่าการจำกัดความถี่ทั่วไป จึงไม่มีการจำกัดจำนวนข้อความที่สมาชิกได้รับ'
 };

package/FrequencyCapping/polyglot/messages_zh.js

@@ -39,5 +39,6 @@ export const messages = {
   'DUMB.FREQUENCY_CAPPING.RO.GLOBAL_LABEL': '全局频率限制：',
   'DUMB.FREQUENCY_CAPPING.RO.BECAUSE_UNSET': '因为未设置限制',
   'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_LIMIT': '如果订阅者超过接收消息的上限，将不会收到此消息{% if isInJourney == true %}，并将进入下一步{% endif %}',
-  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': '无论用户是否超过该渠道设置的上限，都将收到此消息'
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': '无论用户是否超过该渠道设置的上限，都将收到此消息',
+  'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_UNLIMITED': '未设置全局频率上限，因此订阅者接收的消息数量不受限制'
 };

package/FrequencyCapping/polyglot/types.d.ts

@@ -53,4 +53,5 @@ export type FrequencyCappingMessages = {
         isInJourney: boolean;
     };
     'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_IGNORE': NoParams;
+    'DUMB.FREQUENCY_CAPPING.RO.TOOLTIP_UNLIMITED': NoParams;
 };

package/PageHeader/components/PageHeader/PageHeader.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Columns } from '@pushwoosh/kit-helpers';
+import { UnitSize } from '@pushwoosh/kit-constants';
+import { Columns, Horizontal } from '@pushwoosh/kit-helpers';
 import { ArrowRoundIcon } from '@pushwoosh/kit-icons';
 import { H1 } from '@pushwoosh/kit-typography';
 import { Button } from '../../../Button';
 import { PageHeaderError } from '../PageHeaderError';
-import { RootBox, BackButton, TitleBox, DescriptionBox, ActionsBox, MoreActionsBox } from './styles';
+import { RootBox, BackButton, TitleBox, TitleWithExtraBox, TitleWrapBox, TitleExtraBox, DescriptionBox, ActionsBox, MoreActionsBox } from './styles';
 /**
  * Page-level header with a title, optional back arrow, description, inline error bar
  * and submit/cancel/extra actions.
@@ -15,6 +16,7 @@ import { RootBox, BackButton, TitleBox, DescriptionBox, ActionsBox, MoreActionsB
 export function PageHeader(props) {
   const {
     title,
+    titleExtra,
     description,
     error,
     resolveErrorText,
@@ -29,23 +31,36 @@ export function PageHeader(props) {
   } = props;
   const hasActions = Boolean(onSubmit || onCancel);
   const hasActionsBox = hasActions || Boolean(moreActions);
+  const backButton = onBack && _jsx(BackButton, {
+    children: _jsx(Button, {
+      color: "primary",
+      view: "ghost",
+      onClick: onBack,
+      children: _jsx(ArrowRoundIcon, {
+        direction: "left",
+        size: "medium",
+        view: "filled"
+      })
+    })
+  });
   return _jsxs(RootBox, {
     children: [_jsxs(Columns, {
       "$sizes": "minmax(0, 1fr) max-content",
       "$gap": 24,
-      children: [_jsxs(TitleBox, {
-        children: [onBack && _jsx(BackButton, {
-          children: _jsx(Button, {
-            color: "primary",
-            view: "ghost",
-            onClick: onBack,
-            children: _jsx(ArrowRoundIcon, {
-              direction: "left",
-              size: "medium",
-              view: "filled"
+      children: [titleExtra ? _jsxs(TitleWithExtraBox, {
+        children: [backButton, _jsxs(TitleWrapBox, {
+          children: [_jsx(Horizontal, {
+            "$minHeight": UnitSize.FIELD_HEIGHT,
+            "$alignItems": "center",
+            children: _jsx(H1, {
+              children: title
             })
-          })
-        }), _jsx(H1, {
+          }), _jsx(TitleExtraBox, {
+            children: titleExtra
+          })]
+        })]
+      }) : _jsxs(TitleBox, {
+        children: [backButton, _jsx(H1, {
           children: title
         })]
       }), hasActionsBox && _jsxs(ActionsBox, {

package/PageHeader/components/PageHeader/styles.d.ts

@@ -8,6 +8,22 @@ export declare const BackButton: import("styled-components/dist/types").IStyledC
 export declare const TitleBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
+export declare const TitleWithExtraBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
+        [key: `--${string}`]: string | number | undefined;
+    }) | undefined;
+}> & string;
+export declare const TitleWrapBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const TitleExtraBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
 export declare const ActionsBox: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;

package/PageHeader/components/PageHeader/styles.js

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
+import { FontSize, LineHeight, UnitSize } from '@pushwoosh/kit-constants';
 import { Paragraph } from '@pushwoosh/kit-typography';
+import { PAGE_HEADER_INSET_ATTRIBUTE, STEP_CELL_INSET } from '../../constants';
 export const RootBox = styled.div.withConfig({
   displayName: "RootBox",
   componentId: "sc-1qwo99q-0"
@@ -12,17 +14,30 @@ export const TitleBox = styled.div.withConfig({
   displayName: "TitleBox",
   componentId: "sc-1qwo99q-2"
 })(["display:flex;align-items:center;justify-content:start;flex-shrink:0;gap:8px;"]);
+const TITLE_LINE_HEIGHT = `calc(${FontSize.HEADING1} * ${LineHeight.HEADING1})`;
+export const TitleWithExtraBox = styled(TitleBox).withConfig({
+  displayName: "TitleWithExtraBox",
+  componentId: "sc-1qwo99q-3"
+})(["align-items:flex-start;flex-shrink:1;min-width:0;"]);
+export const TitleWrapBox = styled.div.withConfig({
+  displayName: "TitleWrapBox",
+  componentId: "sc-1qwo99q-4"
+})(["display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:calc(8px - (", " - ", ") / 2);min-width:0;&:has([", "]){--page-header-extra-inset:", "px;}"], UnitSize.FIELD_HEIGHT, TITLE_LINE_HEIGHT, PAGE_HEADER_INSET_ATTRIBUTE, STEP_CELL_INSET);
+export const TitleExtraBox = styled.div.withConfig({
+  displayName: "TitleExtraBox",
+  componentId: "sc-1qwo99q-5"
+})(["display:flex;align-items:center;min-width:0;margin-left:calc(-1 * var(--page-header-extra-inset,0px));"]);
 export const ActionsBox = styled.div.withConfig({
   displayName: "ActionsBox",
-  componentId: "sc-1qwo99q-3"
+  componentId: "sc-1qwo99q-6"
 })(["display:flex;justify-content:flex-end;gap:8px;"]);
 export const MoreActionsBox = styled.div.withConfig({
   displayName: "MoreActionsBox",
-  componentId: "sc-1qwo99q-4"
+  componentId: "sc-1qwo99q-7"
 })(["display:flex;margin-right:", ";"], ({
   $hasActions
 }) => $hasActions ? '16px' : '0');
 export const DescriptionBox = styled(Paragraph).withConfig({
   displayName: "DescriptionBox",
-  componentId: "sc-1qwo99q-5"
+  componentId: "sc-1qwo99q-8"
 })(["margin-top:16px;"]);

package/PageHeader/components/PageHeader/types.d.ts

@@ -3,6 +3,8 @@ import type { ReactElement, ReactNode } from 'react';
 export interface PageHeaderProps {
     /** Page title. */
     title: ReactNode;
+    /** Content next to the title, e.g. `Steps`; wraps under the title when the row is too narrow. */
+    titleExtra?: ReactNode;
     /** Subtitle/description under the title. */
     description?: ReactNode | string;
     /** Error message shown in an inline error bar. */

package/PageHeader/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const PAGE_HEADER_INSET_ATTRIBUTE = "data-page-header-inset";
+export declare const STEP_CELL_INSET = 3;

package/PageHeader/constants.js

@@ -0,0 +1,2 @@
+export const PAGE_HEADER_INSET_ATTRIBUTE = 'data-page-header-inset';
+export const STEP_CELL_INSET = 3;

package/Steps/components/Step/Step.d.ts

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

package/Steps/components/Step/Step.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { CheckRoundIcon } from '@pushwoosh/kit-icons';
+import { Text } from '@pushwoosh/kit-typography';
+import { StepBox } from './styles';
+const TONES = {
+  passed: 'success',
+  current: 'primary',
+  'not-passed': 'muted'
+};
+const CELL_TYPES = {
+  passed: 'blank',
+  current: 'dot',
+  'not-passed': 'blank'
+};
+export function Step(props) {
+  const {
+    title,
+    progress,
+    hasError,
+    hasTail,
+    onClick
+  } = props;
+  const isChecked = progress === 'passed' && !hasError;
+  return _jsxs(_Fragment, {
+    children: [_jsxs(StepBox, {
+      as: onClick ? 'button' : 'span',
+      type: onClick ? 'button' : undefined,
+      "$tone": hasError ? 'danger' : TONES[progress],
+      "aria-current": progress === 'current' ? 'step' : undefined,
+      onClick: onClick,
+      children: [_jsx(CheckRoundIcon, {
+        as: "span",
+        size: "medium",
+        type: isChecked ? 'fill' : CELL_TYPES[progress],
+        view: progress === 'current' || isChecked ? 'filled' : 'lined'
+      }), _jsx(Text, {
+        "$variant": "h1",
+        children: title
+      })]
+    }), hasTail && _jsx(Horizontal, {
+      "$width": 16,
+      "$height": 2,
+      "$bgColor": Color.FORM
+    })]
+  });
+}

package/Steps/components/Step/index.d.ts

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

package/Steps/components/Step/index.js

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

package/Steps/components/Step/styles.d.ts

@@ -0,0 +1,6 @@
+import type { StepTone } from './types';
+export declare const StepBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $tone: StepTone;
+}>> & string;

package/Steps/components/Step/styles.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+const COLORS = {
+  muted: {
+    idle: Color.PHANTOM,
+    hover: Color.PRIMARY_HOVER
+  },
+  primary: {
+    idle: Color.PRIMARY,
+    hover: Color.PRIMARY_HOVER
+  },
+  success: {
+    idle: Color.SUCCESS,
+    hover: Color.SUCCESS_HOVER
+  },
+  danger: {
+    idle: Color.DANGER,
+    hover: Color.DANGER_HOVER
+  }
+};
+export const StepBox = styled.button.withConfig({
+  displayName: "StepBox",
+  componentId: "sc-goy1gs-0"
+})(["display:flex;align-items:center;gap:6px;margin:0;padding:0;border:0;background:none;color:", ";white-space:nowrap;button&:hover{color:", ";cursor:pointer;}button&:active{color:", ";opacity:0.5;}&:focus-visible{outline:1px solid ", ";outline-offset:2px;}"], ({
+  $tone
+}) => COLORS[$tone].idle, ({
+  $tone
+}) => COLORS[$tone].hover, ({
+  $tone
+}) => COLORS[$tone].hover, Color.BRIGHT);

package/Steps/components/Step/types.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { StepProgress } from '../../types';
+export type StepTone = 'muted' | 'primary' | 'success' | 'danger';
+export type StepProps = {
+    title: ReactNode;
+    progress: StepProgress;
+    hasError: boolean;
+    hasTail: boolean;
+    onClick?: () => void;
+};

package/Steps/components/Step/types.js

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

package/Steps/components/Steps/Steps.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+import type { StepId, StepsProps } from '../../types';
+/** Wizard progress for `PageHeader` `titleExtra`; spread `stepsProps` of {@link useSteps} into it. */
+export declare function Steps<Id extends StepId>(props: StepsProps<Id>): ReactElement;

package/Steps/components/Steps/Steps.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { DEFAULT_SKELETON_COUNT, INSET_MARK } from '../../constants';
+import { findStepIndex, getStepProgress } from '../../helpers';
+import { Step } from '../Step';
+import { StepsSkeleton } from '../StepsSkeleton';
+/** Wizard progress for `PageHeader` `titleExtra`; spread `stepsProps` of {@link useSteps} into it. */
+export function Steps(props) {
+  const {
+    items,
+    activeStep,
+    onStepClick,
+    isLoading = false,
+    skeletonCount = DEFAULT_SKELETON_COUNT
+  } = props;
+  const activeIndex = findStepIndex(items, activeStep);
+  if (isLoading) {
+    return _jsx(StepsSkeleton, {
+      count: items.length || skeletonCount
+    });
+  }
+  return _jsx(Horizontal, {
+    "$gap": 6,
+    "$alignItems": "center",
+    "$justifyContent": "start",
+    ...INSET_MARK,
+    children: items.map((item, index) => _jsx(Step, {
+      title: item.title,
+      progress: getStepProgress(index, activeIndex),
+      hasError: !!item.hasError,
+      hasTail: index < items.length - 1,
+      onClick: onStepClick && index < activeIndex ? () => onStepClick(item.id) : undefined
+    }, item.id))
+  });
+}

package/Steps/components/Steps/index.d.ts

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

package/Steps/components/Steps/index.js

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

package/Steps/components/StepsSkeleton/StepsSkeleton.d.ts

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

package/Steps/components/StepsSkeleton/StepsSkeleton.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { CircularSkeleton, RectangularSkeleton } from '../../../Skeleton';
+import { INSET_MARK } from '../../constants';
+export function StepsSkeleton({
+  count
+}) {
+  return _jsx(Horizontal, {
+    "$gap": 6,
+    "$alignItems": "center",
+    "$justifyContent": "start",
+    "aria-busy": "true",
+    ...INSET_MARK,
+    children: Array.from({
+      length: count
+    }, (_, index) => _jsxs(Fragment, {
+      children: [_jsx(Horizontal, {
+        "$padding": 3,
+        children: _jsx(CircularSkeleton, {
+          diameter: 18,
+          color: Color.SOFT_LIGHT
+        })
+      }), _jsx(RectangularSkeleton, {
+        width: 87,
+        height: 18,
+        borderRadius: 4,
+        color: Color.SOFT_LIGHT
+      }), index < count - 1 && _jsx(RectangularSkeleton, {
+        width: 16,
+        height: 2,
+        color: Color.SOFT_LIGHT
+      })]
+    }, index))
+  });
+}

package/Steps/components/StepsSkeleton/index.d.ts

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

package/Steps/components/StepsSkeleton/index.js

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

package/Steps/components/StepsSkeleton/types.d.ts

@@ -0,0 +1,3 @@
+export type StepsSkeletonProps = {
+    count: number;
+};

package/Steps/components/StepsSkeleton/types.js

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

package/Steps/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const DEFAULT_SKELETON_COUNT = 3;
+export declare const INSET_MARK: {
+    "data-page-header-inset": boolean;
+};

package/Steps/constants.js

@@ -0,0 +1,5 @@
+import { PAGE_HEADER_INSET_ATTRIBUTE } from '../PageHeader/constants';
+export const DEFAULT_SKELETON_COUNT = 3;
+export const INSET_MARK = {
+  [PAGE_HEADER_INSET_ATTRIBUTE]: true
+};

package/Steps/helpers/index.d.ts

@@ -0,0 +1 @@
+export * from './progress';

package/Steps/helpers/index.js

@@ -0,0 +1 @@
+export * from './progress';

package/Steps/helpers/progress.d.ts

@@ -0,0 +1,3 @@
+import type { StepId, StepItem, StepProgress } from '../types';
+export declare const findStepIndex: <Id extends StepId>(items: ReadonlyArray<StepItem<Id>>, id: Id | undefined) => number;
+export declare const getStepProgress: (index: number, activeIndex: number) => StepProgress;

package/Steps/helpers/progress.js

@@ -0,0 +1,7 @@
+export const findStepIndex = (items, id) => id === undefined ? -1 : items.findIndex(item => item.id === id);
+export const getStepProgress = (index, activeIndex) => {
+  if (activeIndex < 0 || index > activeIndex) {
+    return 'not-passed';
+  }
+  return index === activeIndex ? 'current' : 'passed';
+};

package/Steps/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useSteps';

package/Steps/hooks/index.js

@@ -0,0 +1 @@
+export * from './useSteps';

package/Steps/hooks/useSteps.d.ts

@@ -0,0 +1,3 @@
+import type { StepId, UseStepsOptions, UseStepsResult } from '../types';
+/** Wizard state: a forward move passes `canLeave`, a backward move is never blocked. */
+export declare function useSteps<Id extends StepId>(options: UseStepsOptions<Id>): UseStepsResult<Id>;

package/Steps/hooks/useSteps.js

@@ -0,0 +1,67 @@
+import { useCallback, useRef, useState } from 'react';
+import { findStepIndex } from '../helpers';
+/** Wizard state: a forward move passes `canLeave`, a backward move is never blocked. */
+export function useSteps(options) {
+  const {
+    items,
+    activeStep,
+    onChange,
+    canLeave,
+    onBackward
+  } = options;
+  const activeIndex = findStepIndex(items, activeStep);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const isPendingRef = useRef(false);
+  const goTo = useCallback(async id => {
+    const toIndex = findStepIndex(items, id);
+    if (isPendingRef.current || activeIndex < 0 || toIndex < 0 || toIndex === activeIndex) {
+      return;
+    }
+    if (toIndex < activeIndex) {
+      onBackward?.(activeStep, id);
+      onChange(id);
+      return;
+    }
+    isPendingRef.current = true;
+    setIsTransitioning(true);
+    try {
+      if (!canLeave || (await canLeave(activeStep, id))) {
+        onChange(id);
+      }
+    } catch (error) {
+      console.error('[useSteps]: canLeave threw, the move is refused.', error);
+    } finally {
+      isPendingRef.current = false;
+      setIsTransitioning(false);
+    }
+  }, [items, activeStep, activeIndex, onChange, canLeave, onBackward]);
+  const next = useCallback(async () => {
+    const nextItem = activeIndex >= 0 ? items[activeIndex + 1] : undefined;
+    if (nextItem) {
+      await goTo(nextItem.id);
+    }
+  }, [activeIndex, items, goTo]);
+  const prev = useCallback(() => {
+    const prevItem = activeIndex > 0 ? items[activeIndex - 1] : undefined;
+    if (prevItem) {
+      void goTo(prevItem.id);
+    }
+  }, [activeIndex, items, goTo]);
+  const onStepClick = useCallback(id => {
+    void goTo(id);
+  }, [goTo]);
+  return {
+    activeIndex,
+    isFirst: activeIndex === 0,
+    isLast: activeIndex >= 0 && activeIndex === items.length - 1,
+    goTo,
+    next,
+    prev,
+    isTransitioning,
+    stepsProps: {
+      items,
+      activeStep,
+      onStepClick
+    }
+  };
+}

package/Steps/index.d.ts

@@ -0,0 +1,3 @@
+export { Steps } from './components/Steps';
+export { useSteps } from './hooks';
+export type { StepId, StepItem, StepProgress, StepsProps, UseStepsOptions, UseStepsResult, } from './types';

package/Steps/index.js

@@ -0,0 +1,2 @@
+export { Steps } from './components/Steps';
+export { useSteps } from './hooks';

package/Steps/types.d.ts

@@ -0,0 +1,59 @@
+import type { ReactNode } from 'react';
+/** Identifier of a step: the form's own key, a string or a number. */
+export type StepId = string | number;
+/** One step of a {@link Steps} indicator. */
+export type StepItem<Id extends StepId = StepId> = {
+    /** Stable key of the step; progress is derived from its position in `items`. */
+    id: Id;
+    /** Label: one word or two short ones. */
+    title: ReactNode;
+    /** Paints the step as erroneous; a passed step with an error is shown as not passed. */
+    hasError?: boolean;
+};
+/** Where a step stands relative to the active one. */
+export type StepProgress = 'passed' | 'current' | 'not-passed';
+/** Props of {@link Steps}. */
+export type StepsProps<Id extends StepId = StepId> = {
+    /** Steps in display order, 2 to 5 of them. */
+    items: ReadonlyArray<StepItem<Id>>;
+    /** Id of the current step. */
+    activeStep: Id;
+    /** Makes the steps before the current one clickable; without it no step reacts to clicks. */
+    onStepClick?: (id: Id) => void;
+    /** Shows the skeleton instead of the steps — meant for the first data load only. */
+    isLoading?: boolean;
+    /** Number of skeleton steps when `items` is empty; 3 by default. */
+    skeletonCount?: number;
+};
+/** Options of {@link useSteps}. */
+export type UseStepsOptions<Id extends StepId = StepId> = {
+    /** Steps in display order. */
+    items: ReadonlyArray<StepItem<Id>>;
+    /** Current step, stored by the caller (a form field, a route). */
+    activeStep: Id;
+    /** Called with the step to move to. */
+    onChange: (id: Id) => void;
+    /** Gate of a forward move; a Promise holds the move, `false` or a throw refuses it. */
+    canLeave?: (from: Id, to: Id) => boolean | Promise<boolean>;
+    /** Called before every backward move, which is never blocked; forms clear their errors here. */
+    onBackward?: (from: Id, to: Id) => void;
+};
+/** Result of {@link useSteps}. */
+export type UseStepsResult<Id extends StepId = StepId> = {
+    /** Index of the current step in `items`, -1 when it is not there. */
+    activeIndex: number;
+    /** The current step is the first one. */
+    isFirst: boolean;
+    /** The current step is the last one. */
+    isLast: boolean;
+    /** Moves to a step, through `canLeave` when moving forward; ignored while a move is pending. */
+    goTo: (id: Id) => Promise<void>;
+    /** Moves to the next step; no-op on the last one. */
+    next: () => Promise<void>;
+    /** Moves to the previous step; no-op on the first one. */
+    prev: () => void;
+    /** A forward move is waiting for `canLeave`. */
+    isTransitioning: boolean;
+    /** Ready props for {@link Steps}: `items`, `activeStep`, `onStepClick`. */
+    stepsProps: Pick<StepsProps<Id>, 'items' | 'activeStep' | 'onStepClick'>;
+};

package/Steps/types.js

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

package/index.d.ts

@@ -40,6 +40,8 @@ export { WhatsAppPreview } from './WhatsAppPreview';
 export type { WhatsAppAttachment, WhatsAppAttachmentKind, WhatsAppMessage, WhatsAppPreviewProps, } from './WhatsAppPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
+export { Steps, useSteps } from './Steps';
+export type { StepId, StepItem, StepProgress, StepsProps, UseStepsOptions, UseStepsResult, } from './Steps';
 export { ExportResult } from './ExportResult';
 export { ExternalImagePreview } from './ExternalImagePreview';
 export { NativeInput, NativeTextarea, NativeSelect, NativeTimeInput, } from './native';

package/index.js

@@ -39,6 +39,7 @@ export { InboxPreview, resolveInboxLayout, MAX_CAROUSEL_SLIDES } from './InboxPr
 export { WhatsAppPreview } from './WhatsAppPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
+export { Steps, useSteps } from './Steps';
 export { ExportResult } from './ExportResult';
 export { ExternalImagePreview } from './ExternalImagePreview';
 export { NativeInput, NativeTextarea, NativeSelect, NativeTimeInput } from './native';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -38,7 +38,7 @@
     "@lezer/highlight": "^1.2.1",
     "@pushwoosh/kit-constants": "^3.0.0",
     "@pushwoosh/kit-helpers": "^4.16.0",
-    "@pushwoosh/kit-icons": "^2.3.10",
+    "@pushwoosh/kit-icons": "^2.3.15",
     "@pushwoosh/kit-typography": "^2.0.0",
     "@tippyjs/react": "^4.2.6",
     "@uiw/codemirror-themes": "^4.23.8",