@redneckz/wildless-cms-uni-blocks 0.4.4 → 0.4.5

package/mobile/lib/content-page-repository/transformPicture.js

@@ -1,55 +1,30 @@
-import fs from 'fs';
 import path from 'path';
 import sharp from 'sharp';
-import util from 'util';
-const mkdir = util.promisify(fs.mkdir);
+import { transformImg } from './transformImg.js';
 export async function transformPicture(pagePath, picture, options) {
     const sources = picture.sources || [];
     const src = picture?.src || '';
-    const [transformedPicture, ...transformedSources] = await Promise.all([picture].concat(sources).map((_) => transformImg(pagePath, src, { ...options, ..._ })));
+    const transformedPicture = await transformImg({
+        pagePath,
+        src,
+        transformationOptions: { ...options, ...picture },
+    });
+    const { width, height } = await sharp(path.resolve(options.publicDir, transformedPicture)).metadata();
+    const containerSize = width && height ? { width, height } : undefined;
+    const transformedSources = await Promise.all(sources.map((_) => transformImg({
+        pagePath,
+        src,
+        containerSize,
+        transformationOptions: { ...options, ..._ },
+    })));
     return {
         ...picture,
         src: transformedPicture,
         sources: transformedSources.map((_, i) => ({
             ...sources[i],
             src: _,
+            size: { width, height },
         })),
     };
 }
-async function transformImg(pagePath, src, transformationOptions) {
-    const { contentDir, publicDir, format, options, size } = transformationOptions;
-    const pageDir = path.dirname(pagePath);
-    const imgPath = `${pageDir}/${src}`;
-    let chain = sharp(imgPath);
-    if (size) {
-        chain = chain.resize(size?.width, size?.height, {
-            fit: sharp.fit.contain,
-            background: [0, 0, 0, 0],
-        });
-    }
-    if (format) {
-        chain = chain.toFormat(format, options);
-    }
-    const transformedSrc = transformSrc(src, transformationOptions);
-    const transformedImgPath = `${publicDir}/${path.relative(contentDir, `${path.dirname(pagePath)}/${transformedSrc}`)}`;
-    await mkdir(path.dirname(transformedImgPath), { recursive: true });
-    try {
-        await chain.toFile(transformedImgPath);
-    }
-    catch (e) {
-        console.error(e);
-    }
-    return transformedSrc;
-}
-function transformSrc(src, { format, size }) {
-    const noTransform = !format && !size;
-    if (noTransform) {
-        return src;
-    }
-    const fileName = path.basename(src, path.extname(src));
-    const fileSizes = [size?.width, size?.height].filter(Boolean);
-    const suffix = fileSizes.length ? `-${fileSizes.join('-')}` : '';
-    const ext = String(format) || path.extname(src);
-    return `${fileName}${suffix}.${ext}`;
-}
 //# sourceMappingURL=transformPicture.js.map

package/mobile/lib/content-page-repository/transformPicture.js.map

@@ -1 +1 @@
-{"version":3,"file":"transformPicture.js","sourceRoot":"","sources":["../../src/content-page-repository/transformPicture.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"transformPicture.js","sourceRoot":"","sources":["../../src/content-page-repository/transformPicture.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,CAAC,KAAK,UAAU,gBAAgB,CACpC,QAAgB,EAChB,OAAgB,EAChB,OAA8B;IAE9B,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC;IACtC,MAAM,GAAG,GAAG,OAAO,EAAE,GAAG,IAAI,EAAE,CAAC;IAE/B,MAAM,kBAAkB,GAAG,MAAM,YAAY,CAAC;QAC5C,QAAQ;QACR,GAAG;QACH,qBAAqB,EAAE,EAAE,GAAG,OAAO,EAAE,GAAG,OAAO,EAAE;KAClD,CAAC,CAAC;IAEH,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,KAAK,CACnC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,kBAAkB,CAAC,CACpD,CAAC,QAAQ,EAAE,CAAC;IACb,MAAM,aAAa,GAAG,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAEtE,MAAM,kBAAkB,GAAG,MAAM,OAAO,CAAC,GAAG,CAC1C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAChB,YAAY,CAAC;QACX,QAAQ;QACR,GAAG;QACH,aAAa;QACb,qBAAqB,EAAE,EAAE,GAAG,OAAO,EAAE,GAAG,CAAC,EAAE;KAC5C,CAAC,CACH,CACF,CAAC;IAEF,OAAO;QACL,GAAG,OAAO;QACV,GAAG,EAAE,kBAAkB;QACvB,OAAO,EAAE,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;YACzC,GAAG,OAAO,CAAC,CAAC,CAAC;YACb,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;SACxB,CAAC,CAAC;KACJ,CAAC;AACJ,CAAC"}

package/mobile/lib/content-page-repository/transformSrc.d.ts

@@ -0,0 +1,3 @@
+import type { ImgSource } from '../model/Picture';
+import type { TransformationOptions } from './TransformationOptions';
+export declare function transformSrc(src: string, { format, size }: TransformationOptions & ImgSource): string;

package/mobile/lib/content-page-repository/transformSrc.js

@@ -0,0 +1,14 @@
+import path from 'path';
+import { isPictureSizeEmpty } from '../utils/isPictureSizeEmpty.js';
+export function transformSrc(src, { format, size }) {
+    const noTransform = isPictureSizeEmpty(size) && !format;
+    if (noTransform) {
+        return src;
+    }
+    const fileName = path.basename(src, path.extname(src));
+    const fileSizes = [size?.width, size?.height].filter(Boolean);
+    const suffix = fileSizes.length ? `-${fileSizes.join('-')}` : '';
+    const ext = format ? String(format) : 'webp';
+    return `${fileName}${suffix}.${ext}`;
+}
+//# sourceMappingURL=transformSrc.js.map

package/mobile/lib/content-page-repository/transformSrc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformSrc.js","sourceRoot":"","sources":["../../src/content-page-repository/transformSrc.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,MAAM,UAAU,YAAY,CAC1B,GAAW,EACX,EAAE,MAAM,EAAE,IAAI,EAAqC;IAEnD,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IACxD,IAAI,WAAW,EAAE;QACf,OAAO,GAAG,CAAC;KACZ;IAED,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAC9D,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACjE,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAE7C,OAAO,GAAG,QAAQ,GAAG,MAAM,IAAI,GAAG,EAAE,CAAC;AACvC,CAAC"}

package/mobile/lib/model/ImageSize.d.ts

@@ -0,0 +1,6 @@
+export declare type ImageSize = {
+    /** @title Ширина */
+    width: number;
+    /** @title Высота */
+    height: number;
+};

package/mobile/lib/model/ImageSize.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ImageSize.js.map

package/mobile/lib/model/ImageSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSize.js","sourceRoot":"","sources":["../../src/model/ImageSize.ts"],"names":[],"mappings":""}

package/mobile/lib/model/Picture.d.ts

@@ -1,6 +1,23 @@
 import type { IconName } from '../icons/IconName';
 import type { IconVersion } from './IconVersion';
+import { ImageSize } from './ImageSize';
 export declare type ImgFormats = 'jpeg' | 'jpg' | 'png' | 'gif' | 'webp' | 'heif' | 'avif';
+/**
+ * @title Позиционирование
+ * @enumNames [
+ *    "Сверху слева",
+ *    "Сверху по центру",
+ *    "Сверху справа",
+ *    "Посередине слева",
+ *    "Посередине по центру",
+ *    "Посередине справа",
+ *    "Снизу слева",
+ *    "Снизу по центру",
+ *    "Снизу справа"
+ *  ]
+ * @default "center"
+ */
+export declare type ImgAlignment = 'northwest' | 'north' | 'northeast' | 'west' | 'center' | 'east' | 'southwest' | 'south' | 'southeast';
 export interface Img {
     /** @title Картинка */
     src?: string;
@@ -15,6 +32,7 @@ export interface Img {
  */
 export declare type MediaQuery = 1919 | 1439 | 1279;
 export interface ImgSource {
+    alignment?: ImgAlignment;
     /** @title Иконка */
     icon?: IconName;
     iconVersion?: IconVersion;
@@ -26,12 +44,7 @@ export interface ImgSource {
     options?: Record<string, any>;
     media?: MediaQuery;
     /** @title Размер изображения */
-    size?: {
-        /** @title Ширина */
-        width?: number;
-        /** @title Высота */
-        height?: number;
-    };
+    size?: Partial<ImageSize>;
 }
 /** @title Изображение */
 export interface Picture extends Img, ImgSource {

package/mobile/lib/ui-kit/Img/ImgAsPicture.js

@@ -14,14 +14,18 @@ export const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', i
     return (_jsxs("picture", { className: `${pictureStyles} ${className}`, children: [image?.sources?.length
                 ? image.sources
                     .sort(sourcesComparator)
-                    .map(({ src, format, media, size }, index) => (_jsx("source", { srcSet: src, type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...size }, `${index}_${src}`)))
+                    .map(({ src, format, media }, index) => (_jsx("source", { srcSet: src, type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...image.size }, `${index}_${src}`)))
                 : null, renderImg(image, imageClassName, isMobile)] }));
 });
 const renderImg = (image, imageClassName = '', isMobile = false) => {
+    const style = {
+        width: image.size?.width ? `${image.size?.width}px` : '100%',
+        height: image.size?.height ? `${image.size?.height}px` : '100%',
+    };
     const title = image.title || '';
     const alt = image.alt || image.title;
     const imgStyle = isMobile ? 'm-auto' : 'm-0';
-    return (_jsx("img", { src: image.src, className: `${imgStyle} ${imageClassName}`, alt: alt, title: title, ...image.size }));
+    return (_jsx("img", { src: image.src, className: `${imgStyle} ${imageClassName}`, alt: alt, title: title, style: style, ...image.size }));
 };
 export function formatToMimeType(format) {
     return format ? `image/${String(format)}` : undefined;

package/mobile/lib/ui-kit/Img/ImgAsPicture.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImgAsPicture.js","sourceRoot":"","sources":["../../../src/ui-kit/Img/ImgAsPicture.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAIxC,MAAM,iBAAiB,GAAG,CAAC,CAAU,EAAE,CAAU,EAAE,EAAE;IACnD,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,EAAE;QACtB,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;KAC1B;IAED,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAC7B,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,cAAc,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,EAAE,EAAE;IACnE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE;QAC9C,OAAO,IAAI,CAAC;KACb;IAED,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC;IAEtD,OAAO,CACL,mBAAS,SAAS,EAAE,GAAG,aAAa,IAAI,SAAS,EAAE,aAChD,KAAK,EAAE,OAAO,EAAE,MAAM;gBACrB,CAAC,CAAC,KAAK,CAAC,OAAO;qBACV,IAAI,CAAC,iBAAiB,CAAC;qBACvB,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,iBAEE,MAAM,EAAE,GAAG,EACX,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAC9B,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,eAAe,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,KACzC,IAAI,IAJH,GAAG,KAAK,IAAI,GAAG,EAAE,CAKtB,CACH,CAAC;gBACN,CAAC,CAAC,IAAI,EACP,SAAS,CAAC,KAAK,EAAE,cAAc,EAAE,QAAQ,CAAC,IACnC,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,KAAc,EAAE,cAAc,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,EAAE;IAC1E,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;IAChC,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,KAAK,CAAC;IACrC,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAE7C,OAAO,CACL,cACE,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,SAAS,EAAE,GAAG,QAAQ,IAAI,cAAc,EAAE,EAC1C,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,KACR,KAAK,CAAC,IAAI,GACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,gBAAgB,CAAC,MAA2B;IAC1D,OAAO,MAAM,CAAC,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AACxD,CAAC"}
+{"version":3,"file":"ImgAsPicture.js","sourceRoot":"","sources":["../../../src/ui-kit/Img/ImgAsPicture.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAIxC,MAAM,iBAAiB,GAAG,CAAC,CAAU,EAAE,CAAU,EAAE,EAAE;IACnD,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,EAAE;QACtB,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;KAC1B;IAED,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAC7B,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,cAAc,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,EAAE,EAAE;IACnE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE;QAC9C,OAAO,IAAI,CAAC;KACb;IAED,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC;IAEtD,OAAO,CACL,mBAAS,SAAS,EAAE,GAAG,aAAa,IAAI,SAAS,EAAE,aAChD,KAAK,EAAE,OAAO,EAAE,MAAM;gBACrB,CAAC,CAAC,KAAK,CAAC,OAAO;qBACV,IAAI,CAAC,iBAAiB,CAAC;qBACvB,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,iBAEE,MAAM,EAAE,GAAG,EACX,IAAI,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAC9B,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,eAAe,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,KACzC,KAAK,CAAC,IAAI,IAJT,GAAG,KAAK,IAAI,GAAG,EAAE,CAKtB,CACH,CAAC;gBACN,CAAC,CAAC,IAAI,EACP,SAAS,CAAC,KAAK,EAAE,cAAc,EAAE,QAAQ,CAAC,IACnC,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,KAAc,EAAE,cAAc,GAAG,EAAE,EAAE,QAAQ,GAAG,KAAK,EAAE,EAAE;IAC1E,MAAM,KAAK,GAAG;QACZ,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM;QAC5D,MAAM,EAAE,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;KAChE,CAAC;IAEF,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;IAChC,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,KAAK,CAAC;IACrC,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAE7C,OAAO,CACL,cACE,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,SAAS,EAAE,GAAG,QAAQ,IAAI,cAAc,EAAE,EAC1C,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,KACR,KAAK,CAAC,IAAI,GACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,gBAAgB,CAAC,MAA2B;IAC1D,OAAO,MAAM,CAAC,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AACxD,CAAC"}

package/mobile/lib/utils/isPictureSizeEmpty.d.ts

@@ -0,0 +1,2 @@
+import type { Picture } from '../model/Picture';
+export declare function isPictureSizeEmpty(size: Picture['size']): boolean;

package/mobile/lib/utils/isPictureSizeEmpty.js

@@ -0,0 +1,4 @@
+export function isPictureSizeEmpty(size) {
+    return !(size?.width || size?.height);
+}
+//# sourceMappingURL=isPictureSizeEmpty.js.map

package/mobile/lib/utils/isPictureSizeEmpty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isPictureSizeEmpty.js","sourceRoot":"","sources":["../../src/utils/isPictureSizeEmpty.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,kBAAkB,CAAC,IAAqB;IACtD,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,IAAI,IAAI,EAAE,MAAM,CAAC,CAAC;AACxC,CAAC"}

package/mobile/src/components/BenefitsBlock/BenefitsBlock.example.json

@@ -1,5 +1,6 @@
 {
   "title": "Преимущества",
+  "benefitsBlockVersion": "primary",
   "benefitList": [
     {
       "label": "Преимущество №1",

package/mobile/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -3,64 +3,114 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import type { BenefitItemProps, BenefitsBlockContent } from './BenefitsBlockContent';
-import { DescriptionDef, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
+import type { BenefitsBlockContent, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
+import {
+  BenefitBlockItemProps,
+  BenefitsBlockVersion,
+  DescriptionDef,
+} from './BenefitsBlockContent';
+import { Picture } from '../../model/Picture';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
+const benefitsBlockStyleMap = {
+  primary: 'bg-white',
+  secondary: 'bg-primary-main',
+};
+
+const benefitsTextStyleMap = {
+  primary: '',
+  secondary: 'text-white',
+};
+
+const benefitsDescriptionStyleMap = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white opacity-80',
+};
+
+const benefitsIconStyleMap = {
+  primary: 'bg-main-divider text-primary-main',
+  secondary: 'bg-white/30 text-black',
+};
+
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className = '', title, benefitList, ...rest }) => {
+  ({ className = '', title, benefitList, benefitsBlockVersion = 'primary', ...rest }) => {
     return (
       <BlockWrapper
-        className={`font-sans text-primary-text bg-white p-12 flex flex-col items-center ${className}`}
+        className={`font-sans text-primary-text p-12 flex flex-col items-center ${className} ${benefitsBlockStyleMap[benefitsBlockVersion]}`}
         {...rest}
       >
         {title ? (
-          <Heading headingType="h3" as="h2" className="max-w-[47rem] text-center" title={title} />
+          <Heading
+            headingType="h3"
+            as="h2"
+            className={`max-w-[47rem] text-center ${benefitsTextStyleMap[benefitsBlockVersion]}`}
+            title={title}
+          />
         ) : null}
-        {benefitList?.length ? renderBenefits(benefitList) : null}
+        {benefitList?.length ? renderBenefits(benefitList, benefitsBlockVersion) : null}
       </BlockWrapper>
     );
   },
 );
 
-const renderBenefits = (benefits: BenefitItemProps[]) => {
+const renderBenefits = (
+  benefitList: BenefitBlockItemProps[],
+  benefitsBlockVersion: BenefitsBlockVersion,
+) => {
   return (
     <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
-      {benefits.map(renderStep)}
+      {benefitList.map(renderStep(benefitsBlockVersion))}
     </div>
   );
 };
 
-const renderStep = (benefit: BenefitItemProps, i: number) => {
-  const description = benefit?.description || undefined;
+const setIconVersion = (benefitIcon: Picture, benefitsBlockVersion: BenefitsBlockVersion) => {
+  if (!benefitIcon.icon) {
+    return benefitIcon;
+  }
+  benefitIcon.iconVersion = benefitsBlockVersion === 'secondary' ? 'white' : 'normal';
 
-  return (
-    <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
-      {benefit?.icon?.icon ? (
-        <Img
-          className="w-[50px] h-[50px] min-w-[50px] p-3 rounded-full bg-main-divider"
-          image={benefit.icon}
-          asSVG
-        />
-      ) : null}
-      {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
-      <div className="ml-5">
-        {benefit?.label ? <h3 className="text-h6 m-0">{benefit.label}</h3> : null}
-        {renderDescription(description)}
-      </div>
-    </div>
-  );
+  return benefitIcon;
 };
 
-const renderDescription = (description?: DescriptionDef) => {
+const renderStep =
+  (benefitsBlockVersion: BenefitsBlockVersion) => (benefit: BenefitBlockItemProps, i: number) => {
+    const description = (benefit?.description || undefined) as DescriptionDef;
+
+    return (
+      <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
+        {benefit?.icon?.icon ? (
+          <Img
+            className={`w-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[benefitsBlockVersion]}`}
+            image={setIconVersion(benefit.icon, benefitsBlockVersion)}
+            asSVG
+          />
+        ) : null}
+        {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
+        <div className="ml-5">
+          {benefit?.label ? (
+            <h3 className={`text-h6 m-0 ${benefitsTextStyleMap[benefitsBlockVersion]}`}>
+              {benefit.label}
+            </h3>
+          ) : null}
+          {renderDescription(description, benefitsBlockVersion)}
+        </div>
+      </div>
+    );
+  };
+
+const renderDescription = (
+  description: DescriptionDef,
+  benefitsBlockVersion: BenefitsBlockVersion,
+) => {
   const benefitType = description ? description?.benefitType : null;
   if (!benefitType) {
     return null;
   }
 
   return description ? (
-    <div className="text-l-light text-secondary-text mt-2">
+    <div className={`text-l-light mt-2 ${benefitsDescriptionStyleMap[benefitsBlockVersion]}`}>
       {benefitType === 'list'
         ? renderListBenefit(description as ListBenefitDef)
         : renderTextBenefit(description as TextBenefitDef)}

package/mobile/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -37,7 +37,7 @@ export type DescriptionDef = EmptyOption | TextBenefitDef | ListBenefitDef;
 /**
  * @title Преимущество
  */
-export interface BenefitItemProps {
+export interface BenefitBlockItemProps {
   /** @title Название */
   label?: string;
   /** @title Описание */
@@ -45,6 +45,12 @@ export interface BenefitItemProps {
   icon?: Picture;
 }
 
+/**
+ * @title Цвет блока
+ * @enumNames ["Основная", "Второстепенная"]
+ */
+export type BenefitsBlockVersion = 'primary' | 'secondary';
+
 /**
  * @title Блок преимущества
  */
@@ -53,5 +59,7 @@ export type BenefitsBlockContent = TitleProps & {
    * @title Список преимуществ
    * @maxItems 6
    */
-  benefitList?: BenefitItemProps[];
+  benefitList?: BenefitBlockItemProps[];
+  /** @default primary */
+  benefitsBlockVersion?: BenefitsBlockVersion;
 };

package/mobile/src/components/ContentPage/ContentPage.page.json

@@ -1914,8 +1914,7 @@
           "alt": "Варианты потребительского кредита",
           "format": "webp",
           "size": {
-            "width": 400,
-            "height": 300
+            "width": 300
           }
         }
       }

package/mobile/src/components/__snapshots__/Blocks.spec.tsx.snap

@@ -8,7 +8,7 @@ exports[`Blocks Accordion should render block "Accordion" without content 1`] =
 
 exports[`Blocks BenefitsBlock should render block "BenefitsBlock" without content 1`] = `
 <section
-  class="font-sans text-primary-text bg-white p-12 flex flex-col items-center "
+  class="font-sans text-primary-text p-12 flex flex-col items-center  bg-white"
 />
 `;
 

package/mobile/src/content-page-repository/transformContentPage.ts

@@ -18,11 +18,16 @@ export async function transformContentPage(
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   return mapJSON<ContentPageDef>(JSON.parse(content), async (value: any, [key]) => {
     const isMarkdown = typeof value === 'string' && key?.endsWith('__md');
-    const isPicture = value && isLocalPath(value?.src);
+
     if (isMarkdown) {
       return await transformMarkdown(value);
-    } else if (isPicture) {
-      return await transformPicture(pagePath, value as Picture, options);
+    } else if (isPicture(value)) {
+      try {
+        return await transformPicture(pagePath, value, options);
+      } catch (ex) {
+        console.warn('Error while transforming picture on page: %s', pagePath);
+        console.error(ex);
+      }
     }
 
     return value;
@@ -34,3 +39,5 @@ const isLocalPath = (_: any): boolean => isString(_) && _.length < 512 && !isURL
 const isString = (_: any): _ is string => Boolean(_ && typeof _ === 'string');
 
 const isURL = (src: string) => ['data:', 'https:', 'http:'].some((proto) => src.startsWith(proto));
+
+const isPicture = (_: any): _ is Picture => Boolean(_ && isLocalPath(_?.src));

package/mobile/src/content-page-repository/transformImg.ts

@@ -0,0 +1,157 @@
+import fs from 'fs';
+import path from 'path';
+import util from 'util';
+import sharp from 'sharp';
+import type { ResizeOptions, Sharp } from 'sharp';
+import type { ImageSize } from '../model/ImageSize';
+import type { TransformationOptions } from './TransformationOptions';
+import type { ImgAlignment, ImgSource, Picture } from '../model/Picture';
+import { transformSrc } from './transformSrc';
+import { isPictureSizeEmpty } from '../utils/isPictureSizeEmpty';
+
+const mkdir = util.promisify(fs.mkdir);
+
+type TransformImgParams = {
+  pagePath: string;
+  src: string;
+  containerSize?: ImageSize;
+  transformationOptions: TransformationOptions & ImgSource;
+};
+
+export async function transformImg({
+  pagePath,
+  src,
+  containerSize,
+  transformationOptions,
+}: TransformImgParams): Promise<string> {
+  if (!src) {
+    return '';
+  }
+
+  const { contentDir, publicDir, format, options, size, alignment } = transformationOptions;
+
+  const pageDir = path.dirname(pagePath);
+  const imgPath = `${pageDir}/${src}`;
+  let chain = sharp(imgPath);
+
+  const targetSize = getPictureSize(size, containerSize);
+
+  if (targetSize) {
+    chain = resizeImg(chain, targetSize, getResizeFit(targetSize));
+  }
+
+  if (containerSize) {
+    chain = resizeImg(chain, containerSize);
+
+    // Save intermediate transform result to modify further
+    const { data } = await chain.toBuffer({ resolveWithObject: true });
+
+    chain = resizeImg(
+      sharp(data),
+      getCompositionResizeSize(containerSize, targetSize),
+      getResizeFit(targetSize),
+    );
+
+    chain = await compositeImg({ chain, containerSize, alignment });
+  }
+
+  if (format) {
+    chain = chain.toFormat(format, options);
+  }
+
+  const transformedSrc = transformSrc(src, transformationOptions);
+  const transformedImgPath = `${publicDir}/${path.relative(
+    contentDir,
+    `${path.dirname(pagePath)}/${transformedSrc}`,
+  )}`;
+
+  await mkdir(path.dirname(transformedImgPath), { recursive: true });
+
+  try {
+    await chain.toFile(transformedImgPath);
+  } catch (e) {
+    console.error(e);
+  }
+
+  return transformedSrc;
+}
+
+function createBackgroundImageChain({ width, height }: ImageSize) {
+  const channels = 4;
+  const rgbaColor = 0x00000000;
+
+  const canvas = Buffer.alloc(width * height * channels, rgbaColor);
+
+  return sharp(canvas, { raw: { width, height, channels } });
+}
+
+function resizeImg(chain: Sharp, size: Picture['size'], options?: ResizeOptions) {
+  return chain.resize(size?.width, size?.height, {
+    fit: sharp.fit.fill,
+    background: { r: 0, g: 0, b: 0, alpha: 0 },
+    ...options,
+  });
+}
+
+type CompositeImgParams = {
+  chain: Sharp;
+  containerSize: ImageSize;
+  alignment?: ImgAlignment;
+};
+
+async function compositeImg({
+  chain,
+  containerSize,
+  alignment,
+}: CompositeImgParams): Promise<Sharp> {
+  const { data } = await chain.toBuffer({ resolveWithObject: true });
+
+  return createBackgroundImageChain(containerSize).composite([
+    {
+      input: data,
+      gravity: alignment,
+    },
+  ]);
+}
+
+function getPictureSize(size: Picture['size'], containerSize?: ImageSize) {
+  // If containerSize is undefined intrinsic dimensions of image will be used then.
+  return isPictureSizeEmpty(size) ? containerSize : size;
+}
+
+function getCompositionResizeSize(
+  containerSize: ImageSize,
+  size: Picture['size'] = {},
+): Picture['size'] {
+  const { width, height } = size;
+  const { width: containerWidth, height: containerHeight } = containerSize;
+
+  let widthRatio = 0;
+  let heightRatio = 0;
+
+  if (!(width || height)) {
+    return undefined;
+  }
+
+  if (width) {
+    widthRatio = containerWidth / width;
+  }
+
+  if (height) {
+    heightRatio = containerHeight / height;
+  }
+
+  return widthRatio > heightRatio
+    ? { width: Math.min(Number(width), containerWidth) }
+    : { height: Math.min(Number(height), containerHeight) };
+}
+
+function getResizeFit(size: Picture['size']): ResizeOptions {
+  /*
+    Editor behaviour with one dimension present: resize by given dimension maintaining aspect ratio. (fit: contain)
+    With two dimensions present: resize trying to fill given dimensions (fit: fill)
+   */
+  return {
+    fit: size?.width && size?.height ? sharp.fit.fill : sharp.fit.contain,
+  };
+}