@pushwoosh/smart-components-kit 1.3.36 → 1.4.0

package/MediaStorage/MediaStorage.js

@@ -7,9 +7,9 @@ import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import { CreateCropDrawer } from './CreateCropDrawer';
 import { useDeleteMediaFile, useDeleteMediaFiles } from './hooks';
-import { formatBytes, getCropCaption, getThumbUrl } from './mediaFile.utils';
+import { formatBytes, getCropCaption, getSourceLabel, getThumbUrl, hasVersions } from './mediaFile.utils';
 import { Lang, useLang } from './polyglot';
-import { CropBadge, Dropzone, EmptyState, Grid, HiddenInput, SelectionBar, SelectionCount, Tile, TileActions, TileCheckbox, TileImage, UsageLine, WarningBadge } from './styles';
+import { CountBadge, Dropzone, EmptyState, Grid, HiddenInput, SelectionBar, SelectionCount, SourceBadge, Tile, TileActions, TileBadges, TileCheckbox, TileImage, UsageLine, WarningBadge } from './styles';
 const UPLOAD_PATH = '/api/media/upload';
 const ALLOWED_IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
 const isAllowedImage = file => {
@@ -314,6 +314,7 @@ export const MediaStorage = ({
       children: files.map(file => {
         const crops = cropsByUuid[file.uuid] ?? [];
         const warning = fileWarning?.(file);
+        const sourceLabel = getSourceLabel(file);
         return _jsxs(Tile, {
           "$selected": selectedUuids.includes(file.uuid),
           children: [_jsx(TileImage, {
@@ -328,11 +329,20 @@ export const MediaStorage = ({
               isDisabled: isBulkDeleting,
               onChange: () => toggleSelected(file.uuid)
             })
-          }), crops.length > 0 && _jsx(CropBadge, {
-            children: lang({
-              message: 'SMART.MEDIA_STORAGE.CROPS_BADGE',
-              count: crops.length
-            })
+          }), _jsxs(TileBadges, {
+            children: [sourceLabel && _jsx(SourceBadge, {
+              children: sourceLabel
+            }), hasVersions(file) && _jsx(CountBadge, {
+              children: lang({
+                message: 'SMART.MEDIA_STORAGE.VERSIONS_BADGE',
+                count: file.versionsCount
+              })
+            }), crops.length > 0 && _jsx(CountBadge, {
+              children: lang({
+                message: 'SMART.MEDIA_STORAGE.CROPS_BADGE',
+                count: crops.length
+              })
+            })]
           }), warning && _jsx(WarningBadge, {
             title: warning,
             children: warning
@@ -442,7 +452,7 @@ export const MediaStorage = ({
         message: 'SMART.MEDIA_STORAGE.DELETE_CONFIRM.TITLE'
       }),
       description: lang({
-        message: 'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION'
+        message: pendingDelete && hasVersions(pendingDelete) ? 'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION' : 'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION'
       }),
       confirmButtonText: lang({
         message: 'SMART.MEDIA_STORAGE.DELETE_CONFIRM.BUTTON'

package/MediaStorage/mediaFile.utils.d.ts

@@ -3,5 +3,9 @@ import type { MediaFile } from '@pushwoosh/rpc-v2-http-api-data/media_files';
 export declare const getThumbUrl: (file: MediaFile) => string;
 /** Caption for a crop: ratio + pixel size (e.g. "16:9 · 1080×608"); filename fallback. */
 export declare const getCropCaption: (file: MediaFile) => string;
+/** Brand name of the service an image was imported from; undefined for a file uploaded from disk. */
+export declare const getSourceLabel: (file: MediaFile) => string | undefined;
+/** True for an image that has been edited at least once, so older versions exist behind it. */
+export declare const hasVersions: (file: MediaFile) => boolean;
 /** Human-readable byte size, e.g. 4404019 -> "4.2 MB". */
 export declare const formatBytes: (bytes: number) => string;

package/MediaStorage/mediaFile.utils.js

@@ -11,6 +11,14 @@ export const getCropCaption = file => {
   const size = `${width}×${height}`;
   return ratio ? `${ratio} · ${size}` : size;
 };
+const SOURCE_LABELS = {
+  canva: 'Canva',
+  figma: 'Figma'
+};
+/** Brand name of the service an image was imported from; undefined for a file uploaded from disk. */
+export const getSourceLabel = file => file.source ? SOURCE_LABELS[file.source] : undefined;
+/** True for an image that has been edited at least once, so older versions exist behind it. */
+export const hasVersions = file => file.versionsCount > 1;
 const BYTE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];
 /** Human-readable byte size, e.g. 4404019 -> "4.2 MB". */
 export const formatBytes = bytes => {

package/MediaStorage/polyglot/messages_ar.js

@@ -12,6 +12,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'تم رفع الصورة',
   'SMART.MEDIA_STORAGE.USAGE': 'الملفات: {{count}} · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': 'اقتصاصات: {{count}}',
+  'SMART.MEDIA_STORAGE.VERSIONS_BADGE': 'إصدارات: {{count}}',
+  'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'سيتم حذف هذا الإصدار واقتصاصاته فقط، وسيظهر الإصدار السابق بدلًا منه. لا يمكن التراجع عن هذا الإجراء.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'الأصل',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'إنشاء اقتصاصات',
   'SMART.MEDIA_STORAGE.DELETE_HINT': 'حذف',

package/MediaStorage/polyglot/messages_bn.js

@@ -12,6 +12,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'ছবি আপলোড হয়েছে',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}}টি ফাইল · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}}টি ক্রপ',
+  'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}}টি সংস্করণ',
+  'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'শুধু এই সংস্করণ এবং এর ক্রপ মুছে যাবে; এর জায়গায় আগের সংস্করণটি দেখানো হবে। এটি পূর্বাবস্থায় ফেরানো যাবে না।',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'মূল',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'ক্রপ তৈরি করুন',
   'SMART.MEDIA_STORAGE.DELETE_HINT': 'মুছুন',

package/MediaStorage/polyglot/messages_de.js

@@ -12,6 +12,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Bild hochgeladen',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} Dateien · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} Zuschn.',
+  'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} Vers.',
+  'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'Nur diese Version und ihre Zuschnitte werden gelöscht; stattdessen wird die vorherige Version angezeigt. Dies kann nicht rückgängig gemacht werden.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'Original',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'Zuschnitte erstellen',
   'SMART.MEDIA_STORAGE.DELETE_HINT': 'Löschen',

package/MediaStorage/polyglot/messages_en.js

@@ -12,6 +12,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Image uploaded',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} files · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} cr.',
+  'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} ver.',
+  'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'Only this version and its crops are deleted; the previous version is shown instead. This can’t be undone.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'Original',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'Create crops',
   'SMART.MEDIA_STORAGE.DELETE_HINT': 'Delete',

package/MediaStorage/polyglot/messages_es.js

@@ -12,6 +12,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Imagen subida',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} archivos · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} rec.',
+  'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} vers.',
+  'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'Solo se eliminan esta versión y sus recortes; en su lugar se muestra la versión anterior. Esta acción no se puede deshacer.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'Original',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'Crear recortes',
   'SMART.MEDIA_STORAGE.DELETE_HINT': 'Eliminar',

package/MediaStorage/polyglot/messages_fr.js

@@ -12,6 +12,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Image importée',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} fichiers · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} recadr.',
+  'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} vers.',
+  'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'Seuls cette version et ses recadrages sont supprimés ; la version précédente s’affiche à la place. Cette action est irréversible.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'Original',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'Créer des recadrages',
   'SMART.MEDIA_STORAGE.DELETE_HINT': 'Supprimer',

package/MediaStorage/polyglot/messages_he.js

@@ -12,6 +12,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'התמונה הועלתה',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} קבצים · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} חית.',
+  'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} גרס.',
+  'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'רק הגרסה הזו והחיתוכים שלה יימחקו; במקומה תוצג הגרסה הקודמת. לא ניתן לבטל פעולה זו.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'מקורי',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'יצירת חיתוכים',
   'SMART.MEDIA_STORAGE.DELETE_HINT': 'מחיקה',

package/MediaStorage/polyglot/messages_hi.js

@@ -12,6 +12,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'छवि अपलोड हो गई',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} फ़ाइलें · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} क्रॉप',
+  'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} संस्करण',
+  'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'केवल यह संस्करण और इसके क्रॉप हटेंगे; इसकी जगह पिछला संस्करण दिखाया जाएगा। इसे पूर्ववत नहीं किया जा सकता।',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'मूल',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'क्रॉप बनाएँ',
   'SMART.MEDIA_STORAGE.DELETE_HINT': 'हटाएँ',

package/MediaStorage/polyglot/messages_ja.js

@@ -12,6 +12,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': '画像をアップロードしました',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}}ファイル · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': 'トリミング{{count}}',
+  'SMART.MEDIA_STORAGE.VERSIONS_BADGE': 'バージョン{{count}}',
+  'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'このバージョンとそのトリミングのみが削除され、代わりに以前のバージョンが表示されます。この操作は元に戻せません。',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'オリジナル',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'トリミングを作成',
   'SMART.MEDIA_STORAGE.DELETE_HINT': '削除',

package/MediaStorage/polyglot/messages_ko.js

@@ -12,6 +12,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': '이미지가 업로드되었습니다',
   'SMART.MEDIA_STORAGE.USAGE': '파일 {{count}}개 · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '크롭 {{count}}개',
+  'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '버전 {{count}}개',
+  'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': '이 버전과 해당 크롭만 삭제되며 대신 이전 버전이 표시됩니다. 이 작업은 되돌릴 수 없습니다.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': '원본',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': '크롭 만들기',
   'SMART.MEDIA_STORAGE.DELETE_HINT': '삭제',

package/MediaStorage/polyglot/messages_pt.js

@@ -12,6 +12,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Imagem enviada',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} arquivos · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} rec.',
+  'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} vers.',
+  'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'Apenas esta versão e seus recortes são excluídos; a versão anterior é exibida no lugar. Esta ação não pode ser desfeita.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'Original',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'Criar recortes',
   'SMART.MEDIA_STORAGE.DELETE_HINT': 'Excluir',

package/MediaStorage/polyglot/messages_ru.js

@@ -12,6 +12,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Изображение загружено',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} файлов · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} кр.',
+  'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} вер.',
+  'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'Удалится только эта версия и её кропы, вместо неё снова появится предыдущая. Действие необратимо.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'Оригинал',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'Создать кропы',
   'SMART.MEDIA_STORAGE.DELETE_HINT': 'Удалить',

package/MediaStorage/polyglot/messages_th.js

@@ -12,6 +12,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'อัปโหลดรูปภาพแล้ว',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} ไฟล์ · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} ครอป',
+  'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} เวอร์ชัน',
+  'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'จะลบเฉพาะเวอร์ชันนี้และครอปของเวอร์ชันนี้ และจะแสดงเวอร์ชันก่อนหน้าแทน การดำเนินการนี้ไม่สามารถย้อนกลับได้',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'ต้นฉบับ',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'สร้างครอป',
   'SMART.MEDIA_STORAGE.DELETE_HINT': 'ลบ',

package/MediaStorage/polyglot/messages_zh.js

@@ -12,6 +12,8 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': '图片已上传',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} 个文件 · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} 个裁剪图',
+  'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} 个版本',
+  'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': '仅删除此版本及其裁剪图，并改为显示上一个版本。此操作无法撤销。',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': '原图',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': '创建裁剪图',
   'SMART.MEDIA_STORAGE.DELETE_HINT': '删除',

package/MediaStorage/polyglot/types.d.ts

@@ -18,6 +18,10 @@ export type MediaStorageMessages = {
     'SMART.MEDIA_STORAGE.CROPS_BADGE': {
         count: number;
     };
+    'SMART.MEDIA_STORAGE.VERSIONS_BADGE': {
+        count: number;
+    };
+    'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': NoParams;
     'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': NoParams;
     'SMART.MEDIA_STORAGE.DELETE_HINT': NoParams;

package/MediaStorage/styles.d.ts

@@ -3,7 +3,9 @@ export declare const Tile: import("styled-components").StyledComponent<"div", an
     $selected?: boolean;
 }, never>;
 export declare const TileImage: import("styled-components").StyledComponent<"img", any, {}, never>;
-export declare const CropBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TileBadges: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SourceBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const CountBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const WarningBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const TileCheckbox: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SelectionBar: import("styled-components").StyledComponent<"div", any, {}, never>;

package/MediaStorage/styles.js

@@ -17,37 +17,45 @@ export const TileImage = styled.img.withConfig({
   displayName: "TileImage",
   componentId: "sc-uu3cbo-2"
 })(["width:100%;aspect-ratio:1;object-fit:cover;display:block;"]);
-export const CropBadge = styled.span.withConfig({
-  displayName: "CropBadge",
+export const TileBadges = styled.div.withConfig({
+  displayName: "TileBadges",
   componentId: "sc-uu3cbo-3"
-})(["position:absolute;top:6px;right:6px;font-size:10px;font-weight:", ";line-height:1;color:", ";background:", ";border-radius:20px;padding:3px 7px;pointer-events:none;"], FontWeight.BOLD, Color.CLEAR, Color.PRIMARY);
+})(["position:absolute;top:6px;right:6px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;z-index:2;pointer-events:none;"]);
+export const SourceBadge = styled.span.withConfig({
+  displayName: "SourceBadge",
+  componentId: "sc-uu3cbo-4"
+})(["font-size:10px;font-weight:", ";line-height:1;color:", ";background:", ";border-radius:20px;padding:3px 7px;"], FontWeight.BOLD, Color.MAIN, Color.CLEAR);
+export const CountBadge = styled.span.withConfig({
+  displayName: "CountBadge",
+  componentId: "sc-uu3cbo-5"
+})(["font-size:10px;font-weight:", ";line-height:1;color:", ";background:", ";border-radius:20px;padding:3px 7px;"], FontWeight.BOLD, Color.CLEAR, Color.PRIMARY);
 export const WarningBadge = styled.span.withConfig({
   displayName: "WarningBadge",
-  componentId: "sc-uu3cbo-4"
+  componentId: "sc-uu3cbo-6"
 })(["position:absolute;bottom:0;left:0;right:0;font-size:10px;line-height:1.2;text-align:center;color:", ";background:", ";padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;"], Color.CLEAR, Color.WARNING);
 export const TileCheckbox = styled.div.withConfig({
   displayName: "TileCheckbox",
-  componentId: "sc-uu3cbo-5"
+  componentId: "sc-uu3cbo-7"
 })(["position:absolute;top:6px;left:6px;z-index:2;padding:2px;border-radius:4px;background:", ";"], Color.CLEAR);
 export const SelectionBar = styled.div.withConfig({
   displayName: "SelectionBar",
-  componentId: "sc-uu3cbo-6"
+  componentId: "sc-uu3cbo-8"
 })(["display:flex;align-items:center;gap:12px;min-height:32px;margin-bottom:12px;"]);
 export const SelectionCount = styled.span.withConfig({
   displayName: "SelectionCount",
-  componentId: "sc-uu3cbo-7"
+  componentId: "sc-uu3cbo-9"
 })(["font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
 export const TileActions = styled.div.withConfig({
   displayName: "TileActions",
-  componentId: "sc-uu3cbo-8"
+  componentId: "sc-uu3cbo-10"
 })(["position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(0,0,0,0.45);backdrop-filter:blur(2px);opacity:0;transition:opacity 0.15s;", ":hover &{opacity:1;}@media (hover:none){opacity:1;}"], Tile);
 export const EmptyState = styled.div.withConfig({
   displayName: "EmptyState",
-  componentId: "sc-uu3cbo-9"
+  componentId: "sc-uu3cbo-11"
 })(["text-align:center;padding:48px 16px;color:", ";"], Color.LOCKED);
 export const Dropzone = styled.button.withConfig({
   displayName: "Dropzone",
-  componentId: "sc-uu3cbo-10"
+  componentId: "sc-uu3cbo-12"
 })(["width:100%;min-height:96px;margin-bottom:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;font:inherit;font-size:13px;color:", ";cursor:pointer;border:2px dashed ", ";border-radius:8px;background:", ";transition:border-color 0.15s,background 0.15s;&:hover{border-color:", ";}&:disabled{cursor:default;opacity:0.7;}"], Color.LOCKED, ({
   $dragOver
 }) => $dragOver ? Color.PRIMARY : Color.DIVIDER, ({
@@ -55,46 +63,46 @@ export const Dropzone = styled.button.withConfig({
 }) => $dragOver ? Color.SOFT_LIGHT : Color.CLEAR, Color.PRIMARY);
 export const HiddenInput = styled.input.withConfig({
   displayName: "HiddenInput",
-  componentId: "sc-uu3cbo-11"
+  componentId: "sc-uu3cbo-13"
 })(["display:none;"]);
 export const UsageLine = styled.div.withConfig({
   displayName: "UsageLine",
-  componentId: "sc-uu3cbo-12"
+  componentId: "sc-uu3cbo-14"
 })(["margin-left:auto;font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
 /* ---------- CreateCropDrawer ---------- */
 export const PreviewStage = styled.div.withConfig({
   displayName: "PreviewStage",
-  componentId: "sc-uu3cbo-13"
+  componentId: "sc-uu3cbo-15"
 })(["display:flex;align-items:center;justify-content:center;min-height:200px;max-height:360px;padding:12px;border:1px solid ", ";border-radius:6px;overflow:hidden;background:", ";"], Color.DIVIDER, Color.SOFT_LIGHT);
 export const PreviewFrame = styled.div.withConfig({
   displayName: "PreviewFrame",
-  componentId: "sc-uu3cbo-14"
+  componentId: "sc-uu3cbo-16"
 })(["aspect-ratio:", ";max-width:100%;max-height:336px;overflow:hidden;border-radius:4px;"], ({
   $ratio
 }) => $ratio);
 export const PreviewImage = styled.img.withConfig({
   displayName: "PreviewImage",
-  componentId: "sc-uu3cbo-15"
+  componentId: "sc-uu3cbo-17"
 })(["width:100%;height:100%;object-fit:cover;display:block;"]);
 export const FieldLabel = styled.div.withConfig({
   displayName: "FieldLabel",
-  componentId: "sc-uu3cbo-16"
+  componentId: "sc-uu3cbo-18"
 })(["font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:", ";margin-bottom:6px;"], Color.LOCKED);
 export const SizeInput = styled(NativeInput).withConfig({
   displayName: "SizeInput",
-  componentId: "sc-uu3cbo-17"
+  componentId: "sc-uu3cbo-19"
 })(["&[readonly]{background:", ";color:", ";}"], Color.SOFT_LIGHT, Color.LOCKED);
 export const Chips = styled.div.withConfig({
   displayName: "Chips",
-  componentId: "sc-uu3cbo-18"
+  componentId: "sc-uu3cbo-20"
 })(["display:flex;flex-wrap:wrap;gap:7px;"]);
 export const Segment = styled.div.withConfig({
   displayName: "Segment",
-  componentId: "sc-uu3cbo-19"
+  componentId: "sc-uu3cbo-21"
 })(["display:inline-flex;border:1px solid ", ";border-radius:6px;overflow:hidden;"], Color.DIVIDER);
 export const SegmentItem = styled.button.withConfig({
   displayName: "SegmentItem",
-  componentId: "sc-uu3cbo-20"
+  componentId: "sc-uu3cbo-22"
 })(["font:inherit;font-size:13px;cursor:pointer;padding:7px 14px;border:none;background:", ";color:", ";& + &{border-left:1px solid ", ";}"], ({
   $active
 }) => $active ? Color.PRIMARY : Color.CLEAR, ({
@@ -102,17 +110,17 @@ export const SegmentItem = styled.button.withConfig({
 }) => $active ? Color.CLEAR : Color.MAIN, Color.DIVIDER);
 export const CropStrip = styled.div.withConfig({
   displayName: "CropStrip",
-  componentId: "sc-uu3cbo-21"
+  componentId: "sc-uu3cbo-23"
 })(["display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;"]);
 export const CropThumb = styled.div.withConfig({
   displayName: "CropThumb",
-  componentId: "sc-uu3cbo-22"
+  componentId: "sc-uu3cbo-24"
 })(["position:relative;width:88px;border:1px solid ", ";border-radius:6px;overflow:hidden;background:", ";"], Color.DIVIDER, Color.SOFT_LIGHT);
 export const CropThumbDelete = styled.div.withConfig({
   displayName: "CropThumbDelete",
-  componentId: "sc-uu3cbo-23"
+  componentId: "sc-uu3cbo-25"
 })(["position:absolute;top:4px;right:4px;opacity:0;transition:opacity 0.15s;", ":hover &{opacity:1;}@media (hover:none){opacity:1;}"], CropThumb);
 export const CropThumbCaption = styled.div.withConfig({
   displayName: "CropThumbCaption",
-  componentId: "sc-uu3cbo-24"
+  componentId: "sc-uu3cbo-26"
 })(["font-size:10px;text-align:center;padding:3px 2px;color:", ";"], Color.LOCKED);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/smart-components-kit",
-  "version": "1.3.36",
+  "version": "1.4.0",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",
@@ -17,12 +17,12 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^2.9.12",
+    "@pushwoosh/dumb-components": "^2.9.13",
     "@pushwoosh/kit-constants": "^2.1.0",
     "@pushwoosh/kit-helpers": "^4.12.7",
     "@pushwoosh/kit-icons": "^2.3.3",
     "@pushwoosh/kit-typography": "^1.8.7",
-    "@pushwoosh/rpc-v2-http-api-data": "^0.2.151",
+    "@pushwoosh/rpc-v2-http-api-data": "^0.2.376",
     "@pushwoosh/spa-context": "^1.8.1",
     "idb-keyval": "^6.2.2",
     "jwt-decode": "^4.0.0",
@@ -30,8 +30,9 @@
     "react-router-dom": "^5.3.4"
   },
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^3.1.3",
+    "@pushwoosh/frontend-builder-engine": "^3.1.4",
     "@svgr/webpack": "^8.1.0",
+    "@types/node": "^24.19.1",
     "@types/react": "^18.3.31",
     "@types/react-dom": "^18.3.7",
     "@types/react-router-dom": "^5.3.3",
@@ -40,7 +41,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "styled-components": "^5.3.11",
-    "vitest": "^3.2.4"
+    "vitest": "^4.1.10"
   },
   "peerDependencies": {
     "react": "^18.0.0",

package/ProductUpdates/parseContent.test.d.ts

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

package/ProductUpdates/parseContent.test.js

@@ -1,59 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { parseContent } from './parseContent';
-// Compact projection: `**bold**` becomes [bold] so a case reads as one line.
-function sketch(blocks) {
-  return blocks.map(block => {
-    const lines = block.lines.map(line => line.nodes.map(node => node.type === 'bold' ? `[${node.value}]` : node.value).join(''));
-    return block.type === 'list' ? `ul: ${lines.join(' | ')}` : `p: ${lines.join(' / ')}`;
-  });
-}
-describe('parseContent', () => {
-  it('splits paragraphs on a blank line', () => {
-    expect(sketch(parseContent('first\n\nsecond'))).toEqual(['p: first', 'p: second']);
-  });
-  it('keeps a single newline inside one paragraph', () => {
-    expect(sketch(parseContent('first\nsecond'))).toEqual(['p: first / second']);
-  });
-  it('collects consecutive bullets into one list', () => {
-    expect(sketch(parseContent('- one\n- two\n- three'))).toEqual(['ul: one | two | three']);
-  });
-  it('reads bold inside a list item', () => {
-    expect(sketch(parseContent('- plain **loud**'))).toEqual(['ul: plain [loud]']);
-  });
-  it('separates a lead-in line from the bullets that follow it', () => {
-    expect(sketch(parseContent('what changed:\n- one\n- two\nand that is all'))).toEqual(['p: what changed:', 'ul: one | two', 'p: and that is all']);
-  });
-  it('treats three or more newlines as a single paragraph break', () => {
-    expect(sketch(parseContent('first\n\n\n\nsecond'))).toEqual(['p: first', 'p: second']);
-  });
-  it('ignores blank lines around the content', () => {
-    expect(sketch(parseContent('\n\n  text  \n\n'))).toEqual(['p: text']);
-  });
-  it('leaves a lone asterisk as text', () => {
-    expect(sketch(parseContent('2 * 3 = 6'))).toEqual(['p: 2 * 3 = 6']);
-  });
-  it('does not read `* ` as a bullet marker', () => {
-    expect(sketch(parseContent('* one\n* two'))).toEqual(['p: * one / * two']);
-  });
-  it('leaves an unclosed bold marker as text', () => {
-    expect(sketch(parseContent('**loud and then not'))).toEqual(['p: **loud and then not']);
-  });
-  it('leaves an empty bold marker as text', () => {
-    expect(sketch(parseContent('nothing **** here'))).toEqual(['p: nothing **** here']);
-  });
-  it('reads several bold runs in one line', () => {
-    expect(sketch(parseContent('**a** and **b**'))).toEqual(['p: [a] and [b]']);
-  });
-  it('leaves HTML as text', () => {
-    expect(sketch(parseContent('<b>test</b>'))).toEqual(['p: <b>test</b>']);
-  });
-  it('returns nothing for empty or blank content', () => {
-    expect(parseContent('')).toEqual([]);
-    expect(parseContent('   \n  \n')).toEqual([]);
-  });
-  it('gives every block, line and node a unique id', () => {
-    const blocks = parseContent('lead **in**\n- one **two**\n- three\n\ntail');
-    const ids = blocks.flatMap(block => [block.id, ...block.lines.flatMap(line => [line.id, ...line.nodes.map(node => node.id)])]);
-    expect(new Set(ids).size).toBe(ids.length);
-  });
-});

package/Table/styles.test.d.ts

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

package/Table/styles.test.js

@@ -1,48 +0,0 @@
-import { createElement } from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
-import { ServerStyleSheet } from 'styled-components';
-import { describe, expect, it } from 'vitest';
-import { Table } from './styles';
-const render = () => {
-  const sheet = new ServerStyleSheet();
-  try {
-    const html = renderToStaticMarkup(sheet.collectStyles(createElement(Table, {
-      columns: '1fr 340px',
-      width: '100%',
-      isBordered: true
-    })));
-    return {
-      html,
-      css: sheet.getStyleTags()
-    };
-  } finally {
-    sheet.seal();
-  }
-};
-describe('Table', () => {
-  it('denies columns and isBordered in shouldForwardProp, which SC 6 uses instead of isPropValid', () => {
-    const {
-      shouldForwardProp
-    } = Table;
-    expect(shouldForwardProp?.('columns')).toBe(false);
-    expect(shouldForwardProp?.('isBordered')).toBe(false);
-    expect(shouldForwardProp?.('width')).toBe(true);
-  });
-  it('does not forward columns and isBordered to the DOM', () => {
-    const {
-      html
-    } = render();
-    expect(html).not.toMatch(/columns=/i);
-    expect(html).not.toMatch(/isbordered=/i);
-  });
-  it('keeps width as a DOM attribute', () => {
-    expect(render().html).toContain('width="100%"');
-  });
-  it('still styles from columns and isBordered', () => {
-    const {
-      css
-    } = render();
-    expect(css).toContain('--table-columns:1fr 340px');
-    expect(css).toMatch(/border:1px solid/);
-  });
-});

package/staffImpersonation/isStaffImpersonation.test.d.ts

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

package/staffImpersonation/isStaffImpersonation.test.js

@@ -1,49 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { isStaffImpersonation } from './isStaffImpersonation';
-function tokenWith(claims) {
-  const payload = Buffer.from(JSON.stringify(claims)).toString('base64url');
-  return `eyJhbGciOiJub25lIn0.${payload}.signature`;
-}
-function clientWith(token) {
-  return {
-    getAccessToken: async () => {
-      if (token instanceof Error) {
-        throw token;
-      }
-      return token;
-    }
-  };
-}
-describe('isStaffImpersonation', () => {
-  it('is false for a plain client login', async () => {
-    await expect(isStaffImpersonation(clientWith(tokenWith({
-      account_id: 42
-    })))).resolves.toBe(false);
-  });
-  it('is true for staff impersonation without parent_user_id', async () => {
-    await expect(isStaffImpersonation(clientWith(tokenWith({
-      is_su: true
-    })))).resolves.toBe(true);
-  });
-  it('is true for staff impersonation with parent_user_id "0"', async () => {
-    await expect(isStaffImpersonation(clientWith(tokenWith({
-      is_su: true,
-      parent_user_id: '0'
-    })))).resolves.toBe(true);
-  });
-  it('is false for a client switched into their own child account', async () => {
-    await expect(isStaffImpersonation(clientWith(tokenWith({
-      is_su: true,
-      parent_user_id: '77123'
-    })))).resolves.toBe(false);
-  });
-  it('is false when the token carries no claims at all', async () => {
-    await expect(isStaffImpersonation(clientWith(tokenWith({})))).resolves.toBe(false);
-  });
-  it('is false for a garbage token', async () => {
-    await expect(isStaffImpersonation(clientWith('not-a-jwt'))).resolves.toBe(false);
-  });
-  it('is false when there is no token to read', async () => {
-    await expect(isStaffImpersonation(clientWith(new Error('Unauthorized!')))).resolves.toBe(false);
-  });
-});