@pushwoosh/smart-components-kit 1.24.0 → 2.0.0

package/CampaignsConfigurationDrawer/CampaignsConfigurationDrawer.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Drawer, DrawerBody, DrawerHeader } from '@pushwoosh/dumb-components';
+import { Drawer, DrawerBody, DrawerHeader, DrawerTitle } from '@pushwoosh/dumb-components';
 import { Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { CloseIcon, EmailIcon, MobileIcon, PushIcon, SmsIcon, WhatsappIcon } from '@pushwoosh/kit-icons';
-import { H1, H3 } from '@pushwoosh/kit-typography';
+import { H2 } from '@pushwoosh/kit-typography';
 import { Card } from './components/Card';
 import { useCanSendMessages } from './hooks';
 import { useLang } from './polyglot';
@@ -29,7 +29,7 @@ export function CampaignsConfigurationDrawer(props) {
         "$justifyContent": "space-between",
         "$alignItems": "center",
         "$margin": "0 0 4px",
-        children: [_jsx(H1, {
+        children: [_jsx(DrawerTitle, {
           children: lang({
             message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.HEADING'
           })
@@ -66,7 +66,7 @@ export function CampaignsConfigurationDrawer(props) {
           })]
         }), _jsxs(Vertical, {
           "$gap": "8px",
-          children: [_jsx(H3, {
+          children: [_jsx(H2, {
             children: lang({
               message: 'SMART.CAMPAIGNS_CONFIGURATION_DRAWER.ADVANCED_HEADING'
             })

package/CampaignsConfigurationDrawer/components/Card/styles.d.ts

@@ -1,4 +1,4 @@
-import { H4 } from '@pushwoosh/kit-typography';
+import { H3 } from '@pushwoosh/kit-typography';
 export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
@@ -8,6 +8,7 @@ export declare const IconWrap: import("styled-components/dist/types").IStyledCom
 export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     readonly boxRef?: import("react").Ref<HTMLHeadingElement>;
     readonly children: import("react").ReactNode;
+    readonly $textTransform?: import("react").CSSProperties["textTransform"];
 }, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string & Omit<typeof H4, keyof import("react").Component<any, {}, any>>;
+}> & string & Omit<typeof H3, keyof import("react").Component<any, {}, any>>;

package/CampaignsConfigurationDrawer/components/Card/styles.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { Color, ShapeRadius, Shadow } from '@pushwoosh/kit-constants';
-import { H4 } from '@pushwoosh/kit-typography';
+import { H3 } from '@pushwoosh/kit-typography';
 export const Container = styled.a.withConfig({
   displayName: "Container",
   componentId: "sc-1r8stxq-0"
@@ -9,7 +9,7 @@ export const IconWrap = styled.div.withConfig({
   displayName: "IconWrap",
   componentId: "sc-1r8stxq-1"
 })(["padding:4px;border-radius:", ";background-color:", ";margin-bottom:8px;width:fit-content;"], ShapeRadius.CONTROL, Color.BRIGHT_LIGHT);
-export const Title = styled(H4).withConfig({
+export const Title = styled(H3).withConfig({
   displayName: "Title",
   componentId: "sc-1r8stxq-2"
 })(["margin-bottom:2px;color:", ";"], Color.MAIN);

package/DynamicContentPicker/DynamicContentPicker.js

@@ -89,7 +89,7 @@ export const DynamicContentPicker = ({
           "$alignItems": "center",
           "$gap": 8,
           children: [icon && icon, _jsx(Text, {
-            "$variant": "h4",
+            "$variant": "h3",
             children: title
           })]
         }), error && _jsxs(Horizontal, {

package/ExportCSV/ExportCsvBanner/ExportCsvBanner.js

@@ -131,7 +131,7 @@ export const ExportCsvBanner = ({
       percentValue: progress,
       rightSlot: _jsx(Text, {
         "$color": Color.WARNING,
-        "$variant": "h5",
+        "$variant": "h4",
         "$textTransform": "uppercase",
         children: lang({
           message: 'SMART.EXPORT_CSV.KEEP_PAGE_OPEN'

package/LanguagesSelector/LanguagesSelectForm.d.ts

@@ -1,10 +1,6 @@
 import { type FC } from 'react';
 import { type LanguageAudience } from './platforms';
-type LanguageItem = {
-    code: string;
-    name: string;
-    subscribers: number;
-};
+import { type LanguageItem } from './utils';
 type LanguagesSelectProps = {
     allLanguageItems: LanguageItem[];
     langs: string[];

package/LanguagesSelector/LanguagesSelectForm.js

@@ -5,8 +5,9 @@ import { Color } from '@pushwoosh/kit-constants';
 import { Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { Text } from '@pushwoosh/kit-typography';
 import { useLang } from './polyglot';
-import { ActionButton } from './styles';
-import { fetchLastSelection, useGetLangName } from './utils';
+import { ActionButton, HiddenMatchesHint } from './styles';
+import { fetchLastSelection, splitLanguageMatches, useGetLangName } from './utils';
+const HIDDEN_MATCHES_PREVIEW = 5;
 const AUDIENCE_HINT_MESSAGE = {
   email: 'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.EMAIL',
   sms: 'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.SMS',
@@ -27,16 +28,11 @@ export const LanguagesSelectForm = ({
   const getLangName = useGetLangName(systemLanguage);
   const [lastSelection] = useState(fetchLastSelection);
   const [search, setSearch] = useState('');
-  const [showAllLanguages, setShowAllLanguages] = useState(false);
-  const filteredLanguages = useMemo(() => {
-    const languageItems = showAllLanguages ? allLanguageItems : allLanguageItems.filter(item => item.subscribers > 0 || langs.includes(item.code));
-    if (!search) {
-      return languageItems;
-    }
-    return languageItems.filter(item => {
-      return item.name.toLowerCase().includes(search.toLowerCase());
-    });
-  }, [allLanguageItems, search, showAllLanguages, langs]);
+  const [includeWithoutDevices, setIncludeWithoutDevices] = useState(false);
+  const {
+    visible: filteredLanguages,
+    hidden: hiddenMatches
+  } = useMemo(() => splitLanguageMatches(allLanguageItems, langs, search, includeWithoutDevices), [allLanguageItems, langs, search, includeWithoutDevices]);
   return _jsxs(Vertical, {
     "$gap": 8,
     children: [_jsx(Text, {
@@ -54,6 +50,7 @@ export const LanguagesSelectForm = ({
       })
     }), _jsxs(Horizontal, {
       "$justifyContent": "space-between",
+      "$alignItems": "center",
       children: [_jsxs(Horizontal, {
         "$gap": 16,
         "$justifyContent": "start",
@@ -71,47 +68,59 @@ export const LanguagesSelectForm = ({
           children: lang({
             message: 'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL'
           })
+        }), lastSelection.length > 0 && _jsx(ActionButton, {
+          onClick: () => {
+            onChange(lastSelection);
+          },
+          children: lang({
+            message: 'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST'
+          })
         })]
-      }), lastSelection.length > 0 && _jsx(ActionButton, {
-        onClick: () => {
-          onChange(lastSelection);
-        },
-        children: lang({
-          message: 'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST'
+      }), _jsx(Checkbox, {
+        name: "includeWithoutDevices",
+        isChecked: includeWithoutDevices,
+        onChange: setIncludeWithoutDevices,
+        label: lang({
+          message: 'SMART.LANGUAGES_SELECTOR.INCLUDE_WITHOUT_DEVICES'
         })
       })]
-    }), _jsxs(Vertical, {
-      "$gap": 24,
-      children: [_jsx(Columns, {
-        "$sizes": 3,
-        "$gap": 8,
-        children: filteredLanguages.map(item => _jsx(Checkbox, {
-          name: "languages",
-          value: item.code,
-          isChecked: langs.includes(item.code),
-          onChange: isChecked => {
-            if (isChecked) {
-              onChange([...langs, item.code]);
-            } else {
-              onChange(langs.filter(code => code !== item.code));
-            }
-          },
-          label: lang({
-            message: 'SMART.LANGUAGES_SELECTOR.CHECKBOX_LABEL',
-            name: getLangName(item.code),
-            subscribers: item.subscribers
-          })
-        }, item.code))
-      }), _jsx("div", {
-        children: _jsx(ActionButton, {
-          onClick: () => setShowAllLanguages(x => !x),
-          children: showAllLanguages ? lang({
-            message: 'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS'
-          }) : lang({
-            message: 'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL'
-          })
+    }), hiddenMatches.length > 0 && _jsxs(HiddenMatchesHint, {
+      children: [_jsxs(Text, {
+        "$variant": "footnote",
+        "$color": Color.MAIN,
+        children: [filteredLanguages.length === 0 && `${lang({
+          message: 'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.NONE_WITH_DEVICES',
+          search: search.trim()
+        })} `, lang({
+          message: 'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.LIST',
+          names: hiddenMatches.slice(0, HIDDEN_MATCHES_PREVIEW).map(item => item.name).join(', ') + (hiddenMatches.length > HIDDEN_MATCHES_PREVIEW ? ', …' : '')
+        })]
+      }), _jsx(ActionButton, {
+        onClick: () => setIncludeWithoutDevices(true),
+        children: lang({
+          message: 'SMART.LANGUAGES_SELECTOR.INCLUDE_WITHOUT_DEVICES'
         })
       })]
+    }), _jsx(Columns, {
+      "$sizes": 3,
+      "$gap": 8,
+      children: filteredLanguages.map(item => _jsx(Checkbox, {
+        name: "languages",
+        value: item.code,
+        isChecked: langs.includes(item.code),
+        onChange: isChecked => {
+          if (isChecked) {
+            onChange([...langs, item.code]);
+          } else {
+            onChange(langs.filter(code => code !== item.code));
+          }
+        },
+        label: lang({
+          message: 'SMART.LANGUAGES_SELECTOR.CHECKBOX_LABEL',
+          name: getLangName(item.code),
+          subscribers: item.subscribers
+        })
+      }, item.code))
     })]
   });
 };

package/LanguagesSelector/polyglot/messages_ar.js

@@ -6,8 +6,9 @@ export const messages = {
   'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': 'تحديد الكل',
   'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': 'إلغاء تحديد الكل',
   'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': 'إعادة استخدام التحديد الأخير',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': 'عرض كل اللغات',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': 'عرض اللغات التي لديها مشتركون فقط',
+  'SMART.LANGUAGES_SELECTOR.INCLUDE_WITHOUT_DEVICES': 'تضمين اللغات التي لا توجد بها أجهزة',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.NONE_WITH_DEVICES': 'لا توجد لغات بها أجهزة تطابق "{{search}}".',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.LIST': 'لغات بلا أجهزة تطابق البحث: {{names}}',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.EMAIL': 'تمثل الأرقام جهات اتصال البريد الإلكتروني التي يحتوي وسم Language لديها على هذه القيمة.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.SMS': 'تمثل الأرقام جهات اتصال SMS التي يحتوي وسم Language لديها على هذه القيمة.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.LINE': 'تمثل الأرقام جهات اتصال LINE التي يحتوي وسم Language لديها على هذه القيمة.',

package/LanguagesSelector/polyglot/messages_bn.js

@@ -6,8 +6,9 @@ export const messages = {
   'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': 'সব নির্বাচন',
   'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': 'সব অনির্বাচন',
   'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': 'শেষ নির্বাচন পুনরায় ব্যবহার',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': 'সব ভাষা দেখান',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': 'শুধু সাবস্ক্রাইবারসহ ভাষা দেখান',
+  'SMART.LANGUAGES_SELECTOR.INCLUDE_WITHOUT_DEVICES': 'ডিভাইস নেই এমন ভাষাগুলিও দেখান',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.NONE_WITH_DEVICES': 'ডিভাইস আছে এমন কোনো ভাষা “{{search}}”-এর সাথে মেলে না।',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.LIST': 'মিলে যাওয়া ডিভাইসবিহীন ভাষা: {{names}}',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.EMAIL': 'সংখ্যাগুলো হলো সেই ইমেল কন্টাক্ট, যাদের Language Tag-এ এই মান রয়েছে।',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.SMS': 'সংখ্যাগুলো হলো সেই SMS কন্টাক্ট, যাদের Language Tag-এ এই মান রয়েছে।',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.LINE': 'সংখ্যাগুলো হলো সেই LINE কন্টাক্ট, যাদের Language Tag-এ এই মান রয়েছে।',

package/LanguagesSelector/polyglot/messages_de.js

@@ -6,8 +6,9 @@ export const messages = {
   'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': 'alle auswählen',
   'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': 'alle abwählen',
   'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': 'letzte Auswahl übernehmen',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': 'Alle Sprachen anzeigen',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': 'Nur Sprachen mit Abonnenten anzeigen',
+  'SMART.LANGUAGES_SELECTOR.INCLUDE_WITHOUT_DEVICES': 'Sprachen ohne Geräte einbeziehen',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.NONE_WITH_DEVICES': 'Keine Sprachen mit Geräten passen zu „{{search}}“.',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.LIST': 'Passende Sprachen ohne Geräte: {{names}}',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.EMAIL': 'Zahlen sind E-Mail-Kontakte, deren Language-Tag diesen Wert hat.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.SMS': 'Zahlen sind SMS-Kontakte, deren Language-Tag diesen Wert hat.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.LINE': 'Zahlen sind LINE-Kontakte, deren Language-Tag diesen Wert hat.',

package/LanguagesSelector/polyglot/messages_en.js

@@ -6,8 +6,9 @@ export const messages = {
   'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': 'select all',
   'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': 'deselect all',
   'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': 'reuse last selection',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': 'Show all languages',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': 'Show only languages with subscribers',
+  'SMART.LANGUAGES_SELECTOR.INCLUDE_WITHOUT_DEVICES': 'Include languages without devices',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.NONE_WITH_DEVICES': 'No languages with devices match “{{search}}”.',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.LIST': 'Languages without devices that match: {{names}}',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.EMAIL': 'Numbers are email contacts whose Language tag holds this value.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.SMS': 'Numbers are SMS contacts whose Language tag holds this value.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.LINE': 'Numbers are LINE contacts whose Language tag holds this value.',

package/LanguagesSelector/polyglot/messages_es.js

@@ -6,8 +6,9 @@ export const messages = {
   'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': 'seleccionar todo',
   'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': 'deseleccionar todo',
   'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': 'reutilizar la última selección',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': 'Mostrar todos los idiomas',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': 'Mostrar solo idiomas con suscriptores',
+  'SMART.LANGUAGES_SELECTOR.INCLUDE_WITHOUT_DEVICES': 'Incluir idiomas sin dispositivos',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.NONE_WITH_DEVICES': 'Ningún idioma con dispositivos coincide con «{{search}}».',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.LIST': 'Idiomas sin dispositivos que coinciden: {{names}}',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.EMAIL': 'Los números son contactos de correo electrónico cuya etiqueta Language tiene este valor.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.SMS': 'Los números son contactos de SMS cuya etiqueta Language tiene este valor.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.LINE': 'Los números son contactos de LINE cuya etiqueta Language tiene este valor.',

package/LanguagesSelector/polyglot/messages_fr.js

@@ -6,8 +6,9 @@ export const messages = {
   'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': 'tout sélectionner',
   'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': 'tout désélectionner',
   'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': 'réutiliser la dernière sélection',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': 'Afficher toutes les langues',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': 'Afficher uniquement les langues avec des abonnés',
+  'SMART.LANGUAGES_SELECTOR.INCLUDE_WITHOUT_DEVICES': 'Inclure les langues sans appareils',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.NONE_WITH_DEVICES': 'Aucune langue avec des appareils ne correspond à « {{search}} ».',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.LIST': 'Langues sans appareils correspondantes : {{names}}',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.EMAIL': 'Les nombres correspondent aux contacts e-mail dont le tag Language a cette valeur.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.SMS': 'Les nombres correspondent aux contacts SMS dont le tag Language a cette valeur.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.LINE': 'Les nombres correspondent aux contacts LINE dont le tag Language a cette valeur.',

package/LanguagesSelector/polyglot/messages_he.js

@@ -6,8 +6,9 @@ export const messages = {
   'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': 'בחר הכול',
   'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': 'בטל בחירת הכול',
   'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': 'השתמש בבחירה האחרונה',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': 'הצג את כל השפות',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': 'הצג רק שפות עם מנויים',
+  'SMART.LANGUAGES_SELECTOR.INCLUDE_WITHOUT_DEVICES': 'לכלול שפות ללא מכשירים',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.NONE_WITH_DEVICES': 'אין שפות עם מכשירים שתואמות ל-"{{search}}".',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.LIST': 'שפות ללא מכשירים שתואמות: {{names}}',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.EMAIL': 'המספרים הם אנשי קשר באימייל שתגית Language שלהם מכילה ערך זה.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.SMS': 'המספרים הם אנשי קשר ב-SMS שתגית Language שלהם מכילה ערך זה.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.LINE': 'המספרים הם אנשי קשר ב-LINE שתגית Language שלהם מכילה ערך זה.',

package/LanguagesSelector/polyglot/messages_hi.js

@@ -6,8 +6,9 @@ export const messages = {
   'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': 'सभी चुनें',
   'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': 'सभी अचयनित करें',
   'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': 'पिछला चयन दोबारा उपयोग करें',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': 'सभी भाषाएँ दिखाएँ',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': 'केवल सब्सक्राइबर वाली भाषाएँ दिखाएँ',
+  'SMART.LANGUAGES_SELECTOR.INCLUDE_WITHOUT_DEVICES': 'बिना डिवाइस वाली भाषाएँ भी शामिल करें',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.NONE_WITH_DEVICES': 'डिवाइस वाली कोई भाषा “{{search}}” से मेल नहीं खाती।',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.LIST': 'मेल खाने वाली बिना डिवाइस की भाषाएँ: {{names}}',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.EMAIL': 'संख्याएँ उन ईमेल संपर्कों की हैं जिनके Language Tag में यह मान है।',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.SMS': 'संख्याएँ उन SMS संपर्कों की हैं जिनके Language Tag में यह मान है।',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.LINE': 'संख्याएँ उन LINE संपर्कों की हैं जिनके Language Tag में यह मान है।',

package/LanguagesSelector/polyglot/messages_ja.js

@@ -6,8 +6,9 @@ export const messages = {
   'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': 'すべて選択',
   'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': 'すべて解除',
   'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': '前回の選択を再利用',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': 'すべての言語を表示',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': '購読者がいる言語のみ表示',
+  'SMART.LANGUAGES_SELECTOR.INCLUDE_WITHOUT_DEVICES': 'デバイスのない言語も含める',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.NONE_WITH_DEVICES': '「{{search}}」に一致するデバイスのある言語はありません。',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.LIST': '一致するデバイスのない言語: {{names}}',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.EMAIL': '数値は、Language タグがこの値のメール連絡先の数です。',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.SMS': '数値は、Language タグがこの値のSMS 連絡先の数です。',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.LINE': '数値は、Language タグがこの値のLINE 連絡先の数です。',

package/LanguagesSelector/polyglot/messages_ko.js

@@ -6,8 +6,9 @@ export const messages = {
   'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': '모두 선택',
   'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': '모두 선택 해제',
   'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': '마지막 선택 재사용',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': '모든 언어 표시',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': '구독자가 있는 언어만 표시',
+  'SMART.LANGUAGES_SELECTOR.INCLUDE_WITHOUT_DEVICES': '기기가 없는 언어 포함',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.NONE_WITH_DEVICES': '“{{search}}”와(과) 일치하는 기기 보유 언어가 없습니다.',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.LIST': '일치하는 기기 없는 언어: {{names}}',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.EMAIL': '숫자는 Language Tag 값이 이 값인 이메일 연락처 수입니다.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.SMS': '숫자는 Language Tag 값이 이 값인 SMS 연락처 수입니다.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.LINE': '숫자는 Language Tag 값이 이 값인 LINE 연락처 수입니다.',

package/LanguagesSelector/polyglot/messages_pt.js

@@ -6,8 +6,9 @@ export const messages = {
   'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': 'selecionar tudo',
   'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': 'desmarcar tudo',
   'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': 'reutilizar a última seleção',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': 'Mostrar todos os idiomas',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': 'Mostrar apenas idiomas com assinantes',
+  'SMART.LANGUAGES_SELECTOR.INCLUDE_WITHOUT_DEVICES': 'Incluir idiomas sem dispositivos',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.NONE_WITH_DEVICES': 'Nenhum idioma com dispositivos corresponde a “{{search}}”.',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.LIST': 'Idiomas sem dispositivos correspondentes: {{names}}',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.EMAIL': 'Os números são contatos de e-mail cuja tag Language tem este valor.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.SMS': 'Os números são contatos de SMS cuja tag Language tem este valor.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.LINE': 'Os números são contatos do LINE cuja tag Language tem este valor.',

package/LanguagesSelector/polyglot/messages_ru.js

@@ -6,8 +6,9 @@ export const messages = {
   'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': 'выбрать все',
   'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': 'снять все',
   'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': 'повторить прошлый выбор',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': 'Показать все языки',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': 'Только языки с подписчиками',
+  'SMART.LANGUAGES_SELECTOR.INCLUDE_WITHOUT_DEVICES': 'Включить языки без устройств',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.NONE_WITH_DEVICES': 'Среди языков с устройствами нет совпадений с «{{search}}».',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.LIST': 'Совпадают языки без устройств: {{names}}',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.EMAIL': 'Числа — email-контакты, у которых тег Language равен этому значению.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.SMS': 'Числа — SMS-контакты, у которых тег Language равен этому значению.',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.LINE': 'Числа — контакты LINE, у которых тег Language равен этому значению.',

package/LanguagesSelector/polyglot/messages_th.js

@@ -6,8 +6,9 @@ export const messages = {
   'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': 'เลือกทั้งหมด',
   'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': 'ยกเลิกการเลือกทั้งหมด',
   'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': 'ใช้การเลือกล่าสุดอีกครั้ง',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': 'แสดงทุกภาษา',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': 'แสดงเฉพาะภาษาที่มีผู้ติดตาม',
+  'SMART.LANGUAGES_SELECTOR.INCLUDE_WITHOUT_DEVICES': 'รวมภาษาที่ไม่มีอุปกรณ์',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.NONE_WITH_DEVICES': 'ไม่มีภาษาที่มีอุปกรณ์ตรงกับ “{{search}}”',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.LIST': 'ภาษาที่ไม่มีอุปกรณ์ซึ่งตรงกัน: {{names}}',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.EMAIL': 'ตัวเลขคือจำนวนผู้ติดต่ออีเมล ที่ Tag Language มีค่านี้',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.SMS': 'ตัวเลขคือจำนวนผู้ติดต่อ SMS ที่ Tag Language มีค่านี้',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.LINE': 'ตัวเลขคือจำนวนผู้ติดต่อ LINE ที่ Tag Language มีค่านี้',

package/LanguagesSelector/polyglot/messages_zh.js

@@ -6,8 +6,9 @@ export const messages = {
   'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': '全选',
   'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': '取消全选',
   'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': '沿用上次选择',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': '显示所有语言',
-  'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': '仅显示有订阅者的语言',
+  'SMART.LANGUAGES_SELECTOR.INCLUDE_WITHOUT_DEVICES': '包含没有设备的语言',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.NONE_WITH_DEVICES': '没有含设备的语言与“{{search}}”匹配。',
+  'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.LIST': '匹配的无设备语言：{{names}}',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.EMAIL': '数字表示 Language 标签为此值的电子邮件联系人。',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.SMS': '数字表示 Language 标签为此值的SMS 联系人。',
   'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.LINE': '数字表示 Language 标签为此值的LINE 联系人。',

package/LanguagesSelector/polyglot/types.d.ts

@@ -7,8 +7,13 @@ export type LanguagesSelectorMessages = {
     'SMART.LANGUAGES_SELECTOR.ACTION.SELECT_ALL': NoParams;
     'SMART.LANGUAGES_SELECTOR.ACTION.DESELECT_ALL': NoParams;
     'SMART.LANGUAGES_SELECTOR.ACTION.REUSE_LAST': NoParams;
-    'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_ALL': NoParams;
-    'SMART.LANGUAGES_SELECTOR.ACTION.SHOW_WITH_SUBSCRIBERS': NoParams;
+    'SMART.LANGUAGES_SELECTOR.INCLUDE_WITHOUT_DEVICES': NoParams;
+    'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.NONE_WITH_DEVICES': {
+        search: string;
+    };
+    'SMART.LANGUAGES_SELECTOR.HIDDEN_MATCHES.LIST': {
+        names: string;
+    };
     'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.EMAIL': NoParams;
     'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.SMS': NoParams;
     'SMART.LANGUAGES_SELECTOR.AUDIENCE_HINT.LINE': NoParams;

package/LanguagesSelector/styles.d.ts

@@ -47,3 +47,6 @@ export declare const ButtonGroup: import("styled-components/dist/types").IStyled
 export declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
+export declare const HiddenMatchesHint: 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/LanguagesSelector/styles.js

@@ -8,4 +8,8 @@ export const ButtonGroup = styled(Horizontal).withConfig({
 export const ActionButton = styled.button.withConfig({
   displayName: "ActionButton",
   componentId: "sc-1damw8z-1"
-})(["display:grid;grid-auto-flow:column;align-items:center;gap:4px;text-transform:uppercase;color:", ";background-color:transparent;height:16px;padding:0;border:none;font-size:12px;font-style:normal;font-weight:500;line-height:16px;transition:box-shadow 0.5s;cursor:pointer;&:hover{color:", ";}&:active{box-shadow:inset 0 0 0 2em ", ";}"], Color.SOFT, Color.SOFT_HOVER, Color.SOFT_LIGHT);
+})(["display:grid;grid-auto-flow:column;align-items:center;gap:4px;text-transform:uppercase;color:", ";background-color:transparent;height:16px;padding:0;border:none;font-size:12px;font-style:normal;font-weight:500;line-height:16px;transition:box-shadow 0.5s;cursor:pointer;&:hover{color:", ";}&:active{box-shadow:inset 0 0 0 2em ", ";}"], Color.SOFT, Color.SOFT_HOVER, Color.SOFT_LIGHT);
+export const HiddenMatchesHint = styled.div.withConfig({
+  displayName: "HiddenMatchesHint",
+  componentId: "sc-1damw8z-2"
+})(["display:grid;justify-items:start;gap:8px;padding:12px;border-radius:4px;background-color:", ";"], Color.FROZEN);

package/LanguagesSelector/utils.d.ts

@@ -1,3 +1,13 @@
+export type LanguageItem = {
+    code: string;
+    name: string;
+    subscribers: number;
+};
+/** Splits languages into the visible list and the search matches hidden only because they have no devices. */
+export declare function splitLanguageMatches(items: LanguageItem[], selected: string[], search: string, includeWithoutDevices: boolean): {
+    visible: LanguageItem[];
+    hidden: LanguageItem[];
+};
 /**
  * Normalizes a language code to its canonical form (e.g. `zh-hant` -> `zh-Hant`).
  * Canonicalization (rather than lowercasing) keeps codes in the same form that

package/LanguagesSelector/utils.js

@@ -1,6 +1,16 @@
 import { useState } from 'react';
 import { languages } from '@pushwoosh/kit-constants';
 import { LAST_SELECTION_KEY } from './constants';
+/** Splits languages into the visible list and the search matches hidden only because they have no devices. */
+export function splitLanguageMatches(items, selected, search, includeWithoutDevices) {
+  const query = search.trim().toLowerCase();
+  const matches = item => !query || item.name.toLowerCase().includes(query) || item.code.toLowerCase() === query;
+  const shown = item => includeWithoutDevices || item.subscribers > 0 || selected.includes(item.code);
+  return {
+    visible: items.filter(item => shown(item) && matches(item)),
+    hidden: query ? items.filter(item => !shown(item) && matches(item)) : []
+  };
+}
 /**
  * Normalizes a language code to its canonical form (e.g. `zh-hant` -> `zh-Hant`).
  * Canonicalization (rather than lowercasing) keeps codes in the same form that

package/ModalCloningJourney/ModalCloningJourney.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
-import { FieldBox, Modal, ModalBody, ModalHeader, ModalFooter, NativeInput, Select, Button, Banner } from '@pushwoosh/dumb-components';
+import { FieldBox, Modal, ModalBody, ModalHeader, ModalTitle, ModalFooter, NativeInput, Select, Button, Banner } from '@pushwoosh/dumb-components';
 import { Horizontal, trackEvent, useAsync, Vertical } from '@pushwoosh/kit-helpers';
-import { H3, Paragraph } from '@pushwoosh/kit-typography';
+import { Paragraph } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import { useLang } from './polyglot';
 export function ModalCloningJourney({
@@ -188,7 +188,7 @@ export function ModalCloningJourney({
     size: "medium",
     isOpen: isOpen,
     children: [_jsx(ModalHeader, {
-      children: _jsx(H3, {
+      children: _jsx(ModalTitle, {
         children: lang({
           message: 'SMART.MODAL_CLONING_JOURNEY.HEADING'
         })

package/OpenActions/components/OpenActionsSummary/OpenActionsSummary.js

@@ -75,7 +75,7 @@ export const OpenActionsSummary = ({
           type: icon,
           color: Color.LOCKED
         }), _jsxs(Text, {
-          "$variant": "h4",
+          "$variant": "h3",
           "$color": Color.LOCKED,
           "$textTransform": "uppercase",
           children: [labelText, ' ', label]

package/PlatformsConfigurationDrawer/components/DesktopPage/DesktopPage.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '@pushwoosh/dumb-components';
+import { Button, DrawerTitle } from '@pushwoosh/dumb-components';
 import { Color, AllPlatforms } from '@pushwoosh/kit-constants';
 import { Vertical, Columns } from '@pushwoosh/kit-helpers';
 import { ArrowRoundIcon, CloseIcon, PlatformLogoIcon } from '@pushwoosh/kit-icons';
-import { H2, H4, Text } from '@pushwoosh/kit-typography';
+import { H3, Text } from '@pushwoosh/kit-typography';
 import { useLang } from '../../polyglot';
 import { ColumnsWrapper, BreadCrumbs, Header, Close, Card, CardIcon } from '../../styles';
 export function DesktopPage(props) {
@@ -31,7 +31,7 @@ export function DesktopPage(props) {
               size: "medium",
               view: "filled"
             })
-          }), _jsx(H2, {
+          }), _jsx(DrawerTitle, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.DESKTOP.HEADING'
             })
@@ -89,7 +89,7 @@ export function DesktopPage(props) {
     }), _jsxs(Vertical, {
       "$padding": "12px 0 0",
       "$gap": 8,
-      children: [_jsx(H4, {
+      children: [_jsx(H3, {
         children: lang({
           message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.PLATFORM_QUESTION'
         })
@@ -104,7 +104,7 @@ export function DesktopPage(props) {
               type: "windows",
               size: "medium"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.WINDOWS'
             })
@@ -117,7 +117,7 @@ export function DesktopPage(props) {
               type: "macos",
               size: "medium"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.MACOS'
             })

package/PlatformsConfigurationDrawer/components/MainPage/MainPage.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '@pushwoosh/dumb-components';
+import { Button, DrawerTitle } from '@pushwoosh/dumb-components';
 import { Color, AllPlatforms } from '@pushwoosh/kit-constants';
 import { Vertical, Columns } from '@pushwoosh/kit-helpers';
 import { CloseIcon, DeviceIcon, EmailIcon, WhatsappIcon, SmsIcon } from '@pushwoosh/kit-icons';
-import { H2, Paragraph, H4, Text } from '@pushwoosh/kit-typography';
+import { Paragraph, H3, Text } from '@pushwoosh/kit-typography';
 import { useLang } from '../../polyglot';
 import { Header, Close, Card, CardIcon } from '../../styles';
 export function MainPage(props) {
@@ -19,7 +19,7 @@ export function MainPage(props) {
     children: [_jsxs(Header, {
       children: [_jsxs(Vertical, {
         "$gap": 4,
-        children: [_jsx(H2, {
+        children: [_jsx(DrawerTitle, {
           children: lang({
             message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.MAIN.HEADING'
           })
@@ -76,7 +76,7 @@ export function MainPage(props) {
     }), _jsxs(Vertical, {
       "$padding": "12px 0 0",
       "$gap": 8,
-      children: [_jsx(H4, {
+      children: [_jsx(H3, {
         children: lang({
           message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.MAIN.QUESTION'
         })
@@ -92,7 +92,7 @@ export function MainPage(props) {
               size: "medium",
               view: "filled"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.MOBILE'
             })
@@ -106,7 +106,7 @@ export function MainPage(props) {
               size: "medium",
               view: "filled"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.DESKTOP'
             })
@@ -120,7 +120,7 @@ export function MainPage(props) {
               size: "medium",
               view: "filled"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.WEBSITE'
             })
@@ -133,7 +133,7 @@ export function MainPage(props) {
               size: "medium",
               view: "filled"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.EMAILS'
             })
@@ -146,7 +146,7 @@ export function MainPage(props) {
               size: "medium",
               view: "filled"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.WHATSAPP'
             })
@@ -160,7 +160,7 @@ export function MainPage(props) {
               size: "medium",
               view: "filled"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.SMS'
             })

package/PlatformsConfigurationDrawer/components/MobilePage/MobilePage.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '@pushwoosh/dumb-components';
+import { Button, DrawerTitle } from '@pushwoosh/dumb-components';
 import { Color } from '@pushwoosh/kit-constants';
 import { Columns, Vertical } from '@pushwoosh/kit-helpers';
 import { ArrowRoundIcon, CloseIcon, PlatformLogoIcon } from '@pushwoosh/kit-icons';
-import { H2, H4, Text } from '@pushwoosh/kit-typography';
+import { H3, Text } from '@pushwoosh/kit-typography';
 import { useLang } from '../../polyglot';
 import { ColumnsWrapper, BreadCrumbs, Header, Close, Card, CardIcon } from '../../styles';
 export function MobilePage(props) {
@@ -29,7 +29,7 @@ export function MobilePage(props) {
               size: "medium",
               view: "filled"
             })
-          }), _jsx(H2, {
+          }), _jsx(DrawerTitle, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.MOBILE.HEADING'
             })
@@ -87,7 +87,7 @@ export function MobilePage(props) {
     }), _jsxs(Vertical, {
       "$padding": "12px 0 0",
       "$gap": 8,
-      children: [_jsx(H4, {
+      children: [_jsx(H3, {
         children: lang({
           message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.PLATFORM_QUESTION'
         })
@@ -102,7 +102,7 @@ export function MobilePage(props) {
               type: "apple",
               size: "medium"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.IOS'
             })
@@ -115,7 +115,7 @@ export function MobilePage(props) {
               type: "android",
               size: "medium"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.ANDROID'
             })
@@ -128,7 +128,7 @@ export function MobilePage(props) {
               type: "huawei",
               size: "medium"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.HUAWEI'
             })
@@ -141,7 +141,7 @@ export function MobilePage(props) {
               type: "amazon",
               size: "medium"
             })
-          }), _jsx(H4, {
+          }), _jsx(H3, {
             children: lang({
               message: 'SMART.PLATFORMS_CONFIGURATION_DRAWER.CARD.AMAZON'
             })

package/ProductUpdates/ProductUpdateCard.js

@@ -56,7 +56,7 @@ export function ProductUpdateCard({
           })]
         }), _jsxs(Vertical, {
           children: [_jsx(Text, {
-            "$variant": "h4",
+            "$variant": "h3",
             children: update.title
           }), update.content && renderContent(update.content)]
         })]

package/Table/styles.js

@@ -36,7 +36,7 @@ export const Tr = styled(Horizontal).attrs({
 export const Th = styled(Td).withConfig({
   displayName: "Th",
   componentId: "sc-1vdjaze-4"
-})(["padding:8px 12px;color:", ";font-weight:", ";font-size:", ";line-height:", ";text-transform:uppercase;"], Color.LOCKED, FontWeight.MEDIUM, FontSize.HEADING5, LineHeight.HEADING5);
+})(["padding:8px 12px;color:", ";font-weight:", ";font-size:", ";line-height:", ";text-transform:uppercase;"], Color.LOCKED, FontWeight.MEDIUM, FontSize.HEADING4, LineHeight.HEADING4);
 export const ItemName = styled.div.withConfig({
   displayName: "ItemName",
   componentId: "sc-1vdjaze-5"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/smart-components-kit",
-  "version": "1.24.0",
+  "version": "2.0.0",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",
@@ -17,17 +17,17 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^3.4.0",
-    "@pushwoosh/kit-constants": "^2.1.1",
+    "@pushwoosh/dumb-components": "^4.0.0",
+    "@pushwoosh/kit-constants": "^3.0.0",
     "@pushwoosh/kit-helpers": "^4.16.0",
     "@pushwoosh/kit-icons": "^2.3.10",
-    "@pushwoosh/kit-typography": "^1.13.0",
+    "@pushwoosh/kit-typography": "^2.0.0",
     "@pushwoosh/rpc-v2-http-api-data": "^0.2.409",
     "jwt-decode": "^4.0.0",
     "react-hook-form": "^7.68.0"
   },
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^3.1.6",
+    "@pushwoosh/frontend-builder-engine": "^4.0.0",
     "@pushwoosh/spa-context": "^3.3.0",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^24.19.1",