@pushwoosh/smart-components-kit 1.1.1 → 1.1.2

package/MediaStore/{CreateVariantDrawer.d.ts → CreateCropDrawer.d.ts}

@@ -1,12 +1,12 @@
 import { type FC } from 'react';
 import type { MediaFile } from '@pushwoosh/rpc-v2-http-api-data/media_files';
-type CreateVariantDrawerProps = {
+type CreateCropDrawerProps = {
     application: string;
     original: MediaFile | null;
     isOpen: boolean;
-    existingVariants: MediaFile[];
+    existingCrops: MediaFile[];
     onClose: () => void;
-    onCreated: (parentUuid: string, variant: MediaFile) => void;
+    onCreated: (parentUuid: string, crop: MediaFile) => void;
 };
-export declare const CreateVariantDrawer: FC<CreateVariantDrawerProps>;
+export declare const CreateCropDrawer: FC<CreateCropDrawerProps>;
 export {};

package/MediaStore/{CreateVariantDrawer.js → CreateCropDrawer.js}

@@ -7,7 +7,7 @@ import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import { getRatioLabel, getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
-import { Chip, Chips, FieldLabel, PreviewFrame, PreviewImage, PreviewStage, Segment, SegmentItem, TileImage, VariantStrip, VariantThumb, VariantThumbCaption } from './styled';
+import { Chip, Chips, CropStrip, CropThumb, CropThumbCaption, FieldLabel, PreviewFrame, PreviewImage, PreviewStage, Segment, SegmentItem, TileImage } from './styled';
 const RATIOS = [{
   value: 'ASPECT_RATIO_1_1',
   label: '1:1',
@@ -48,11 +48,11 @@ const RATIOS = [{
 const DEFAULT_RATIO = 'ASPECT_RATIO_16_9';
 const DEFAULT_SIZE = '1080';
 const DEFAULT_QUALITY = '90';
-export const CreateVariantDrawer = ({
+export const CreateCropDrawer = ({
   application,
   original,
   isOpen,
-  existingVariants,
+  existingCrops,
   onClose,
   onCreated
 }) => {
@@ -87,14 +87,14 @@ export const CreateVariantDrawer = ({
   const selectedRatio = RATIOS.find(item => item.value === ratio) ?? RATIOS[0];
   const outputWidth = dimension === 'width' ? sizeValue : Math.round(sizeValue * selectedRatio.ar);
   const outputHeight = dimension === 'height' ? sizeValue : Math.round(sizeValue / selectedRatio.ar);
-  const ratioExists = existingVariants.some(variant => {
-    var _variant$meta;
-    return ((_variant$meta = variant.meta) === null || _variant$meta === void 0 ? void 0 : _variant$meta.type) === 'imageMeta' && variant.meta.data.ratio === selectedRatio.label;
+  const ratioExists = existingCrops.some(crop => {
+    var _crop$meta;
+    return ((_crop$meta = crop.meta) === null || _crop$meta === void 0 ? void 0 : _crop$meta.type) === 'imageMeta' && crop.meta.data.ratio === selectedRatio.label;
   });
   const handleCreate = async () => {
     if (!original || !isSizeValid || !isQualityValid || ratioExists) return;
     // Capture the parent up front so a concurrent reopen for another image
-    // can't misroute the created variant.
+    // can't misroute the created crop.
     const parent = original;
     setIsCreating(true);
     try {
@@ -112,7 +112,7 @@ export const CreateVariantDrawer = ({
       });
       openToast({
         title: lang({
-          message: 'SMART.MEDIA_STORE.CREATE_VARIANT.SUCCESS'
+          message: 'SMART.MEDIA_STORE.CREATE_CROP.SUCCESS'
         }),
         type: 'success'
       });
@@ -120,7 +120,7 @@ export const CreateVariantDrawer = ({
     } catch (error) {
       openToast({
         title: error.message || lang({
-          message: 'SMART.MEDIA_STORE.CREATE_VARIANT.ERROR'
+          message: 'SMART.MEDIA_STORE.CREATE_CROP.ERROR'
         }),
         type: 'error'
       });
@@ -136,7 +136,7 @@ export const CreateVariantDrawer = ({
       children: _jsxs(DrawerTitle, {
         children: [_jsx("span", {
           children: lang({
-            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.TITLE'
+            message: 'SMART.MEDIA_STORE.CREATE_CROP.TITLE'
           })
         }), _jsx(Button, {
           view: "ghost",
@@ -146,7 +146,7 @@ export const CreateVariantDrawer = ({
             size: "small"
           }),
           "aria-label": lang({
-            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.CLOSE'
+            message: 'SMART.MEDIA_STORE.CREATE_CROP.CLOSE'
           }),
           onClick: onClose
         })]
@@ -157,7 +157,7 @@ export const CreateVariantDrawer = ({
         children: [_jsxs("div", {
           children: [_jsx(FieldLabel, {
             children: lang({
-              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_LABEL'
+              message: 'SMART.MEDIA_STORE.CREATE_CROP.RATIO_LABEL'
             })
           }), _jsx(Chips, {
             children: RATIOS.map(item => _jsx(Chip, {
@@ -170,7 +170,7 @@ export const CreateVariantDrawer = ({
         }), _jsxs("div", {
           children: [_jsx(FieldLabel, {
             children: lang({
-              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.SIZE_LABEL'
+              message: 'SMART.MEDIA_STORE.CREATE_CROP.SIZE_LABEL'
             })
           }), _jsxs(Columns, {
             "$sizes": "auto 1fr",
@@ -182,14 +182,14 @@ export const CreateVariantDrawer = ({
                 "$active": dimension === 'width',
                 onClick: () => setDimension('width'),
                 children: lang({
-                  message: 'SMART.MEDIA_STORE.CREATE_VARIANT.WIDTH'
+                  message: 'SMART.MEDIA_STORE.CREATE_CROP.WIDTH'
                 })
               }), _jsx(SegmentItem, {
                 type: "button",
                 "$active": dimension === 'height',
                 onClick: () => setDimension('height'),
                 children: lang({
-                  message: 'SMART.MEDIA_STORE.CREATE_VARIANT.HEIGHT'
+                  message: 'SMART.MEDIA_STORE.CREATE_CROP.HEIGHT'
                 })
               })]
             }), _jsx(NativeInput, {
@@ -216,7 +216,7 @@ export const CreateVariantDrawer = ({
         }), isJpeg && _jsxs("div", {
           children: [_jsx(FieldLabel, {
             children: lang({
-              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.QUALITY_LABEL'
+              message: 'SMART.MEDIA_STORE.CREATE_CROP.QUALITY_LABEL'
             })
           }), _jsx(NativeInput, {
             type: "number",
@@ -228,7 +228,7 @@ export const CreateVariantDrawer = ({
           })]
         }), ratioExists && _jsx(Text, {
           children: lang({
-            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_EXISTS'
+            message: 'SMART.MEDIA_STORE.CREATE_CROP.RATIO_EXISTS'
           })
         }), _jsx(Button, {
           color: "primary",
@@ -237,26 +237,26 @@ export const CreateVariantDrawer = ({
           isLoading: isCreating,
           onClick: () => void handleCreate(),
           children: lang({
-            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.CREATE_BUTTON'
+            message: 'SMART.MEDIA_STORE.CREATE_CROP.CREATE_BUTTON'
           })
         }), _jsxs("div", {
           children: [_jsx(FieldLabel, {
             children: lang({
-              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.EXISTING_LABEL'
+              message: 'SMART.MEDIA_STORE.CREATE_CROP.EXISTING_LABEL'
             })
-          }), existingVariants.length === 0 ? _jsx(Text, {
+          }), existingCrops.length === 0 ? _jsx(Text, {
             children: lang({
-              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.NO_VARIANTS'
+              message: 'SMART.MEDIA_STORE.CREATE_CROP.NO_CROPS'
             })
-          }) : _jsx(VariantStrip, {
-            children: existingVariants.map(variant => _jsxs(VariantThumb, {
+          }) : _jsx(CropStrip, {
+            children: existingCrops.map(crop => _jsxs(CropThumb, {
               children: [_jsx(TileImage, {
-                src: getThumbUrl(variant),
-                alt: variant.filename
-              }), _jsx(VariantThumbCaption, {
-                children: getRatioLabel(variant) || variant.filename
+                src: getThumbUrl(crop),
+                alt: crop.filename
+              }), _jsx(CropThumbCaption, {
+                children: getRatioLabel(crop) || crop.filename
               })]
-            }, variant.uuid))
+            }, crop.uuid))
           })]
         })]
       })

package/MediaStore/MediaStore.d.ts

@@ -3,6 +3,6 @@ import type { MediaStoreProps } from './types';
 /**
  * Controlled media gallery: the parent owns the current page (and page size)
  * and is notified of navigation via `onPageChange`. For a self-contained
- * variant that keeps the page in internal state, use `MediaStorePaginated`.
+ * version that keeps the page in internal state, use `MediaStorePaginated`.
  */
 export declare const MediaStore: FC<MediaStoreProps>;

package/MediaStore/MediaStore.js

@@ -5,15 +5,15 @@ import { Horizontal, useAsync } from '@pushwoosh/kit-helpers';
 import { CheckIcon, EditIcon, UploadIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
-import { CreateVariantDrawer } from './CreateVariantDrawer';
+import { CreateCropDrawer } from './CreateCropDrawer';
 import { getRatioLabel, getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
-import { Dropzone, EmptyState, Grid, HiddenInput, Tile, TileActions, TileImage, VariantBadge } from './styled';
+import { CropBadge, Dropzone, EmptyState, Grid, HiddenInput, Tile, TileActions, TileImage } from './styled';
 const UPLOAD_PATH = '/api/media/upload';
 /**
  * Controlled media gallery: the parent owns the current page (and page size)
  * and is notified of navigation via `onPageChange`. For a self-contained
- * variant that keeps the page in internal state, use `MediaStorePaginated`.
+ * version that keeps the page in internal state, use `MediaStorePaginated`.
  */
 export const MediaStore = ({
   application,
@@ -39,13 +39,13 @@ export const MediaStore = ({
   // the post-upload decision isn't made on a value captured at click time.
   const pageRef = useRef(page);
   pageRef.current = page;
-  const [variantsByUuid, setVariantsByUuid] = useState({});
+  const [cropsByUuid, setCropsByUuid] = useState({});
   // Bumped to force a reload of the current page (e.g. after an upload) when
   // the page prop itself does not change.
   const [reloadToken, setReloadToken] = useState(0);
   const [isUploading, setIsUploading] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
-  const [createVariantFor, setCreateVariantFor] = useState(null);
+  const [createCropFor, setCreateCropFor] = useState(null);
   const listAsync = useAsync(async () => {
     const response = await rpcGateway.mediaFiles.List({
       application,
@@ -73,15 +73,15 @@ export const MediaStore = ({
       });
     }
   }, [listAsync.error, openToast, lang]);
-  // The List of originals carries no variant count, so once a page of originals
-  // resolves, fetch each one's variants in the background and let the
-  // "N variants" badge appear per file as soon as its request resolves. The
+  // The List of originals carries no crop count, so once a page of originals
+  // resolves, fetch each one's crops in the background and let the
+  // "N crops" badge appear per file as soon as its request resolves. The
   // cleanup flag drops results of a page that has since been replaced.
   useEffect(() => {
     var _listAsync$value3;
     const originals = (_listAsync$value3 = listAsync.value) === null || _listAsync$value3 === void 0 ? void 0 : _listAsync$value3.files;
     if (!originals) return undefined;
-    setVariantsByUuid({});
+    setCropsByUuid({});
     let cancelled = false;
     originals.forEach(file => {
       void (async () => {
@@ -91,7 +91,7 @@ export const MediaStore = ({
             parentUuid: file.uuid
           });
           if (cancelled) return;
-          setVariantsByUuid(prev => ({
+          setCropsByUuid(prev => ({
             ...prev,
             [file.uuid]: response.files ?? []
           }));
@@ -152,10 +152,10 @@ export const MediaStore = ({
       setIsUploading(false);
     }
   };
-  const handleVariantCreated = (parentUuid, variant) => {
-    setVariantsByUuid(prev => ({
+  const handleCropCreated = (parentUuid, crop) => {
+    setCropsByUuid(prev => ({
       ...prev,
-      [parentUuid]: [...(prev[parentUuid] ?? []), variant]
+      [parentUuid]: [...(prev[parentUuid] ?? []), crop]
     }));
   };
   const totalPages = Math.ceil(total / perPage);
@@ -203,18 +203,18 @@ export const MediaStore = ({
     }), !loading && files.length > 0 && _jsxs(_Fragment, {
       children: [_jsx(Grid, {
         children: files.map(file => {
-          const variants = variantsByUuid[file.uuid] ?? [];
+          const crops = cropsByUuid[file.uuid] ?? [];
           return _jsxs(Tile, {
             children: [_jsx(TileImage, {
               src: getThumbUrl(file),
               alt: file.filename
-            }), variants.length > 0 && _jsx(VariantBadge, {
+            }), crops.length > 0 && _jsx(CropBadge, {
               children: lang({
-                message: 'SMART.MEDIA_STORE.VARIANTS_BADGE',
-                count: variants.length
+                message: 'SMART.MEDIA_STORE.CROPS_BADGE',
+                count: crops.length
               })
             }), _jsxs(TileActions, {
-              children: [variants.length > 0 ? _jsx(DropdownMenuButton, {
+              children: [crops.length > 0 ? _jsx(DropdownMenuButton, {
                 color: "secondary",
                 size: "compact",
                 icon: _jsx(CheckIcon, {
@@ -227,10 +227,10 @@ export const MediaStore = ({
                     children: lang({
                       message: 'SMART.MEDIA_STORE.SELECT_ORIGINAL'
                     })
-                  }), variants.map(variant => _jsx(DropdownMenuItem, {
-                    onClick: () => onSelect(variant.url),
-                    children: getRatioLabel(variant) || variant.filename
-                  }, variant.uuid))]
+                  }), crops.map(crop => _jsx(DropdownMenuItem, {
+                    onClick: () => onSelect(crop.url),
+                    children: getRatioLabel(crop) || crop.filename
+                  }, crop.uuid))]
                 })
               }) : _jsx(Button, {
                 color: "secondary",
@@ -250,9 +250,9 @@ export const MediaStore = ({
                   view: "lined"
                 }),
                 "aria-label": lang({
-                  message: 'SMART.MEDIA_STORE.CREATE_VARIANT_HINT'
+                  message: 'SMART.MEDIA_STORE.CREATE_CROP_HINT'
                 }),
-                onClick: () => setCreateVariantFor(file)
+                onClick: () => setCreateCropFor(file)
               })]
             })]
           }, file.uuid);
@@ -286,13 +286,13 @@ export const MediaStore = ({
           })
         })]
       })]
-    }), _jsx(CreateVariantDrawer, {
+    }), _jsx(CreateCropDrawer, {
       application: application,
-      original: createVariantFor,
-      isOpen: createVariantFor !== null,
-      existingVariants: createVariantFor ? variantsByUuid[createVariantFor.uuid] ?? [] : [],
-      onClose: () => setCreateVariantFor(null),
-      onCreated: handleVariantCreated
+      original: createCropFor,
+      isOpen: createCropFor !== null,
+      existingCrops: createCropFor ? cropsByUuid[createCropFor.uuid] ?? [] : [],
+      onClose: () => setCreateCropFor(null),
+      onCreated: handleCropCreated
     })]
   });
 };

package/MediaStore/mediaFile.utils.d.ts

@@ -1,5 +1,5 @@
 import type { MediaFile } from '@pushwoosh/rpc-v2-http-api-data/media_files';
 /** Thumbnail URL from image meta, falling back to the full-size URL. */
 export declare const getThumbUrl: (file: MediaFile) => string;
-/** Aspect-ratio label (e.g. "16:9") for a variant; empty for originals. */
+/** Aspect-ratio label (e.g. "16:9") for a crop; empty for originals. */
 export declare const getRatioLabel: (file: MediaFile) => string;

package/MediaStore/mediaFile.utils.js

@@ -3,7 +3,7 @@ export const getThumbUrl = file => {
   var _file$meta;
   return ((_file$meta = file.meta) === null || _file$meta === void 0 ? void 0 : _file$meta.type) === 'imageMeta' ? file.meta.data.thumbnailUrl : file.url;
 };
-/** Aspect-ratio label (e.g. "16:9") for a variant; empty for originals. */
+/** Aspect-ratio label (e.g. "16:9") for a crop; empty for originals. */
 export const getRatioLabel = file => {
   var _file$meta2;
   return ((_file$meta2 = file.meta) === null || _file$meta2 === void 0 ? void 0 : _file$meta2.type) === 'imageMeta' ? file.meta.data.ratio : '';

package/MediaStore/polyglot/messages_en.js

@@ -9,20 +9,20 @@ export const messages = {
   'SMART.MEDIA_STORE.LOAD_ERROR': 'Failed to load media files',
   'SMART.MEDIA_STORE.UPLOAD_ERROR': 'Failed to upload image',
   'SMART.MEDIA_STORE.UPLOAD_SUCCESS': 'Image uploaded',
-  'SMART.MEDIA_STORE.VARIANTS_BADGE': '{{count}} var.',
+  'SMART.MEDIA_STORE.CROPS_BADGE': '{{count}} cr.',
   'SMART.MEDIA_STORE.SELECT_ORIGINAL': 'Original',
-  'SMART.MEDIA_STORE.CREATE_VARIANT_HINT': 'Create variants',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.TITLE': 'Create variant',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.CLOSE': 'Close',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_LABEL': 'Aspect ratio',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.SIZE_LABEL': 'Size',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.WIDTH': 'Width',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.HEIGHT': 'Height',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.QUALITY_LABEL': 'JPEG quality (1–100)',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.CREATE_BUTTON': 'Create variant',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_EXISTS': 'A variant with this aspect ratio already exists',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.EXISTING_LABEL': 'Existing variants',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.NO_VARIANTS': 'No variants yet',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.SUCCESS': 'Variant created',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.ERROR': 'Failed to create variant'
+  'SMART.MEDIA_STORE.CREATE_CROP_HINT': 'Create crops',
+  'SMART.MEDIA_STORE.CREATE_CROP.TITLE': 'Create crop',
+  'SMART.MEDIA_STORE.CREATE_CROP.CLOSE': 'Close',
+  'SMART.MEDIA_STORE.CREATE_CROP.RATIO_LABEL': 'Aspect ratio',
+  'SMART.MEDIA_STORE.CREATE_CROP.SIZE_LABEL': 'Size',
+  'SMART.MEDIA_STORE.CREATE_CROP.WIDTH': 'Width',
+  'SMART.MEDIA_STORE.CREATE_CROP.HEIGHT': 'Height',
+  'SMART.MEDIA_STORE.CREATE_CROP.QUALITY_LABEL': 'JPEG quality (1–100)',
+  'SMART.MEDIA_STORE.CREATE_CROP.CREATE_BUTTON': 'Create crop',
+  'SMART.MEDIA_STORE.CREATE_CROP.RATIO_EXISTS': 'A crop with this aspect ratio already exists',
+  'SMART.MEDIA_STORE.CREATE_CROP.EXISTING_LABEL': 'Existing crops',
+  'SMART.MEDIA_STORE.CREATE_CROP.NO_CROPS': 'No crops yet',
+  'SMART.MEDIA_STORE.CREATE_CROP.SUCCESS': 'Crop created',
+  'SMART.MEDIA_STORE.CREATE_CROP.ERROR': 'Failed to create crop'
 };

package/MediaStore/polyglot/messages_ru.js

@@ -9,20 +9,20 @@ export const messages = {
   'SMART.MEDIA_STORE.LOAD_ERROR': 'Не удалось загрузить медиафайлы',
   'SMART.MEDIA_STORE.UPLOAD_ERROR': 'Не удалось загрузить изображение',
   'SMART.MEDIA_STORE.UPLOAD_SUCCESS': 'Изображение загружено',
-  'SMART.MEDIA_STORE.VARIANTS_BADGE': '{{count}} вар.',
+  'SMART.MEDIA_STORE.CROPS_BADGE': '{{count}} кр.',
   'SMART.MEDIA_STORE.SELECT_ORIGINAL': 'Оригинал',
-  'SMART.MEDIA_STORE.CREATE_VARIANT_HINT': 'Создать варианты',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.TITLE': 'Создание варианта',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.CLOSE': 'Закрыть',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_LABEL': 'Соотношение сторон',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.SIZE_LABEL': 'Размер',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.WIDTH': 'Ширина',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.HEIGHT': 'Высота',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.QUALITY_LABEL': 'Качество JPEG (1–100)',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.CREATE_BUTTON': 'Создать вариант',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_EXISTS': 'Вариант с таким соотношением сторон уже существует',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.EXISTING_LABEL': 'Созданные варианты',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.NO_VARIANTS': 'Вариантов пока нет',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.SUCCESS': 'Вариант создан',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.ERROR': 'Не удалось создать вариант'
+  'SMART.MEDIA_STORE.CREATE_CROP_HINT': 'Создать кропы',
+  'SMART.MEDIA_STORE.CREATE_CROP.TITLE': 'Создание кропа',
+  'SMART.MEDIA_STORE.CREATE_CROP.CLOSE': 'Закрыть',
+  'SMART.MEDIA_STORE.CREATE_CROP.RATIO_LABEL': 'Соотношение сторон',
+  'SMART.MEDIA_STORE.CREATE_CROP.SIZE_LABEL': 'Размер',
+  'SMART.MEDIA_STORE.CREATE_CROP.WIDTH': 'Ширина',
+  'SMART.MEDIA_STORE.CREATE_CROP.HEIGHT': 'Высота',
+  'SMART.MEDIA_STORE.CREATE_CROP.QUALITY_LABEL': 'Качество JPEG (1–100)',
+  'SMART.MEDIA_STORE.CREATE_CROP.CREATE_BUTTON': 'Создать кроп',
+  'SMART.MEDIA_STORE.CREATE_CROP.RATIO_EXISTS': 'Кроп с таким соотношением сторон уже существует',
+  'SMART.MEDIA_STORE.CREATE_CROP.EXISTING_LABEL': 'Созданные кропы',
+  'SMART.MEDIA_STORE.CREATE_CROP.NO_CROPS': 'Кропов пока нет',
+  'SMART.MEDIA_STORE.CREATE_CROP.SUCCESS': 'Кроп создан',
+  'SMART.MEDIA_STORE.CREATE_CROP.ERROR': 'Не удалось создать кроп'
 };

package/MediaStore/polyglot/types.d.ts

@@ -10,22 +10,22 @@ export type MediaStoreMessages = {
     'SMART.MEDIA_STORE.LOAD_ERROR': NoParams;
     'SMART.MEDIA_STORE.UPLOAD_ERROR': NoParams;
     'SMART.MEDIA_STORE.UPLOAD_SUCCESS': NoParams;
-    'SMART.MEDIA_STORE.VARIANTS_BADGE': {
+    'SMART.MEDIA_STORE.CROPS_BADGE': {
         count: number;
     };
     'SMART.MEDIA_STORE.SELECT_ORIGINAL': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT_HINT': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.TITLE': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.CLOSE': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_LABEL': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.SIZE_LABEL': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.WIDTH': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.HEIGHT': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.QUALITY_LABEL': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.CREATE_BUTTON': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_EXISTS': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.EXISTING_LABEL': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.NO_VARIANTS': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.SUCCESS': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.ERROR': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP_HINT': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.TITLE': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.CLOSE': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.RATIO_LABEL': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.SIZE_LABEL': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.WIDTH': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.HEIGHT': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.QUALITY_LABEL': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.CREATE_BUTTON': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.RATIO_EXISTS': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.EXISTING_LABEL': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.NO_CROPS': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.SUCCESS': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.ERROR': NoParams;
 };

package/MediaStore/styled.d.ts

@@ -1,7 +1,7 @@
 export declare const Grid: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Tile: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TileImage: import("styled-components").StyledComponent<"img", any, {}, never>;
-export declare const VariantBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const CropBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const TileActions: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const EmptyState: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Dropzone: import("styled-components").StyledComponent<"button", any, {
@@ -22,6 +22,6 @@ export declare const Segment: import("styled-components").StyledComponent<"div",
 export declare const SegmentItem: import("styled-components").StyledComponent<"button", any, {
     $active?: boolean;
 }, never>;
-export declare const VariantStrip: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const VariantThumb: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const VariantThumbCaption: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CropStrip: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CropThumb: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CropThumbCaption: import("styled-components").StyledComponent<"div", any, {}, never>;

package/MediaStore/styled.js

@@ -12,8 +12,8 @@ export const TileImage = styled.img.withConfig({
   displayName: "TileImage",
   componentId: "sc-1d9kmgw-2"
 })(["width:100%;aspect-ratio:1;object-fit:cover;display:block;"]);
-export const VariantBadge = styled.span.withConfig({
-  displayName: "VariantBadge",
+export const CropBadge = styled.span.withConfig({
+  displayName: "CropBadge",
   componentId: "sc-1d9kmgw-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);
 export const TileActions = styled.div.withConfig({
@@ -36,7 +36,7 @@ export const HiddenInput = styled.input.withConfig({
   displayName: "HiddenInput",
   componentId: "sc-1d9kmgw-7"
 })(["display:none;"]);
-/* ---------- CreateVariantDrawer ---------- */
+/* ---------- CreateCropDrawer ---------- */
 export const PreviewStage = styled.div.withConfig({
   displayName: "PreviewStage",
   componentId: "sc-1d9kmgw-8"
@@ -81,15 +81,15 @@ export const SegmentItem = styled.button.withConfig({
 }) => $active ? Color.PRIMARY : Color.CLEAR, ({
   $active
 }) => $active ? Color.CLEAR : Color.MAIN, Color.DIVIDER);
-export const VariantStrip = styled.div.withConfig({
-  displayName: "VariantStrip",
+export const CropStrip = styled.div.withConfig({
+  displayName: "CropStrip",
   componentId: "sc-1d9kmgw-16"
 })(["display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;"]);
-export const VariantThumb = styled.div.withConfig({
-  displayName: "VariantThumb",
+export const CropThumb = styled.div.withConfig({
+  displayName: "CropThumb",
   componentId: "sc-1d9kmgw-17"
 })(["width:88px;border:1px solid ", ";border-radius:6px;overflow:hidden;background:", ";"], Color.DIVIDER, Color.SOFT_LIGHT);
-export const VariantThumbCaption = styled.div.withConfig({
-  displayName: "VariantThumbCaption",
+export const CropThumbCaption = styled.div.withConfig({
+  displayName: "CropThumbCaption",
   componentId: "sc-1d9kmgw-18"
 })(["font-size:10px;text-align:center;padding:3px 2px;color:", ";"], Color.LOCKED);

package/MediaStore/types.d.ts

@@ -7,7 +7,7 @@ export type MediaStoreProps = {
     perPage: number;
     /** Called when the user requests a different page. */
     onPageChange: (page: number) => void;
-    /** Called with the chosen file URL (original or variant). */
+    /** Called with the chosen file URL (original or crop). */
     onSelect: (url: string) => void;
 };
 export type MediaStorePaginatedProps = {
@@ -17,6 +17,6 @@ export type MediaStorePaginatedProps = {
     initialPage?: number;
     /** Page size. Defaults to 30. */
     perPage?: number;
-    /** Called with the chosen file URL (original or variant). */
+    /** Called with the chosen file URL (original or crop). */
     onSelect: (url: string) => void;
 };

package/package.json

@@ -49,5 +49,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.1.1"
+  "version": "1.1.2"
 }