@redneckz/wildless-cms-uni-blocks 0.10.1 → 0.10.2

package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -5,7 +5,6 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
 
@@ -17,7 +16,7 @@ export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
       <BlockWrapper className={style('border border-gray', className)} {...rest}>
         <LinkWrapper className="flex" href={href} target={target}>
           <div className="w-[200px] min-w-[200px] self-center">
-            {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+            {icon?.icon ? <Img image={icon} asSVG /> : null}
             {icon?.src ? <Img image={icon} /> : null}
           </div>
           <div className="p-8 pl-3 w-full">

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -5,7 +5,6 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
@@ -64,7 +63,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
 
 const renderIconBlock = (icon: Picture | undefined) => (
   <div className="absolute bottom-0 right-0">
-    {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+    {icon?.icon ? <Img image={icon} asSVG /> : null}
     {icon?.src ? <Img image={icon} /> : null}
   </div>
 );

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

@@ -24,8 +24,16 @@
       "description": "Описание 1-2"
     },
     {
-      "title": "Ячейка 1-3",
-      "description": "Описание 1-3"
+      "buttons": [
+        {
+          "icon": {
+            "iconVersion": "color",
+            "icon": "DocIconMonoColor"
+          },
+          "version": "link",
+          "text": "Скачать файл"
+        }
+      ]
     }
   ]
 }

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import type { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
@@ -12,9 +12,11 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
-import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import type {
+  CarouselTariffsCardContent,
+  TariffsCardCellProps,
+} from './CarouselTariffsCardContent';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
@@ -58,7 +60,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 const renderIconBlock = (icon?: Picture) => (
   <div className="w-[267px] min-w-[267px] self-center">
     {icon?.src ? <Img image={icon} /> : null}
-    {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+    {icon?.icon ? <Img image={icon} asSVG /> : null}
   </div>
 );
 
@@ -81,16 +83,23 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
   </button>
 );
 
-const renderCardInfo = (cell: HeadlineCommonProps, i: number): VNode => (
-  <div key={String(i)} className="py-5 border-b border-main-divider">
-    {cell?.title ? (
-      <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
-    ) : null}
-    {cell?.description ? (
-      <div className="text-primary-text text-h6 mt-1">{cell.description}</div>
-    ) : null}
-  </div>
-);
+const renderCardInfo = (cell: TariffsCardCellProps, i: number): VNode => {
+  const { title, description, buttons } = cell;
+
+  return (
+    <div key={String(i)} className="py-5 border-b border-main-divider">
+      {title ? (
+        <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
+      ) : null}
+      {description ? (
+        <div className="text-primary-text text-h6 mt-1">{cell.description}</div>
+      ) : null}
+      {buttons?.length ? (
+        <div className="text-primary-main">{renderButtonsSection(buttons)}</div>
+      ) : null}
+    </div>
+  );
+};
 
 const renderHitIcon = (): VNode => (
   <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.ui.json

@@ -1 +1,18 @@
-{}
+{
+  "content": {
+    "cardCells": {
+      "items": {
+        "buttons": {
+          "items": {
+            "icon": {
+              "ui:field": "icon"
+            },
+            "iconRight": {
+              "ui:field": "icon"
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCardContent.ts

@@ -1,7 +1,15 @@
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+export type TariffsCardCellProps = HeadlineCommonProps & {
+  /**
+   * @title Кнопка
+   * @maxItems 1
+   */
+  buttons?: ButtonWithIconProps[];
+};
 
 /**
  * @title Карточка тарифной карусели
@@ -14,5 +22,5 @@ export type CarouselTariffsCardContent = UniBlockContent &
     /** @title Кнопка */
     button?: ButtonProps;
     /** @title Ячейка */
-    cardCells?: HeadlineCommonProps[];
+    cardCells?: TariffsCardCellProps[];
   };

package/mobile/src/components/Footer/Footer.tsx

@@ -7,7 +7,6 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { LinkList } from '../LinkList/LinkList';
 import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
 import { RollupItem } from '../RollupItem/RollupItem';
@@ -56,9 +55,7 @@ const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
 
   return (
     <Button version="link" key={`footer-${i}`} href={href} className="flex text-s mb-4 w-6">
-      {icon ? (
-        <Img className="pr-1" image={getIconWithVersion(icon)} width="24" height="24" asSVG />
-      ) : null}
+      {icon ? <Img className="pr-1" image={icon} width="24" height="24" asSVG /> : null}
       <span className="pl-2.5 font-medium text-primary-text">{text}</span>
     </Button>
   );

package/mobile/src/components/Footer/MediaButton.tsx

@@ -3,7 +3,6 @@ import type { IconProps, Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 
 const ICONS_MAP: Array<{
@@ -68,8 +67,6 @@ export const MediaButton = JSX<MediaButtonProps>(
 
     const iconCustom = getFilteredIcon(icon) ?? iconMapped;
 
-    const iconWithVersion = iconCustom ? getIconWithVersion(iconCustom) : undefined;
-
     return (
       <Button
         className={style(
@@ -88,9 +85,9 @@ export const MediaButton = JSX<MediaButtonProps>(
         version={version}
         {...rest}
       >
-        {iconWithVersion && !text ? (
+        {iconCustom && !text ? (
           <Img
-            image={iconWithVersion}
+            image={iconCustom}
             imageClassName="group-hover/media:text-white"
             width="24"
             height="24"

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

@@ -34,8 +34,6 @@
       }
     ],
     "columnsMode": "double",
-    "orientation": "vertical",
-    "hasBorder": true,
     "align": "text-center"
   }
 }

package/mobile/src/components/LinkDocs/LinkDocs.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import type { LinkDocsContent } from './LinkDocsContent';
-import { LinkDocsHorizontalList } from './LinkDocsHorizontalList';
-import { LinkDocsVerticalList } from './LinkDocsVerticalList';
+import { LinkDocsListItem } from './LinkDocsListItem';
 
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
@@ -14,27 +14,42 @@ export const LinkDocs = JSX<LinkDocsProps>(
     className = '',
     title,
     description,
-    icon = { icon: 'DocIconMonoColor' },
+    icon = { icon: 'DocDownloadIcon', iconVersion: 'black' },
     documents,
-    orientation = 'vertical',
-    hasBorder = true,
     align,
     ...rest
   }) => (
-    <BlockWrapper className={style('py-6 px-4 overflow-x-hidden', className)} {...rest}>
+    <BlockWrapper className={style('py-6 px-4', className)} {...rest}>
       <Headline
-        className={`!p-0 ${description ? 'gap-2' : 'gap-5'}`}
+        isPadding={false}
         title={title}
         description={description}
         align={align}
         headlineVersion="M"
         as="h2"
       />
-      {orientation === 'vertical' ? (
-        <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />
-      ) : (
-        <LinkDocsHorizontalList hasBorder={hasBorder} documents={documents} icon={icon} />
-      )}
+      {documents?.length ? (
+        <div className="mt-5 flex flex-col gap-6" role="list">
+          {documents.map((doc, i) => (
+            <div key={String(i)} role="listitem">
+              <LinkDocsListItem
+                doc={doc}
+                icon={
+                  icon ? (
+                    <Img
+                      className="min-w-11 min-h-11 h-fit p-2.5 bg-main-divider rounded-md"
+                      image={icon}
+                      width="24"
+                      height="24"
+                      asSVG
+                    />
+                  ) : null
+                }
+              />
+            </div>
+          ))}
+        </div>
+      ) : null}
     </BlockWrapper>
   ),
 );

package/mobile/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,7 +1,6 @@
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
-import type { ListOrientation } from '../../model/ListOrientation';
 import type { IconProps } from '../../model/Picture';
 import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
@@ -31,10 +30,6 @@ export type LinkDocsContent = UniBlockContent &
     /** @title Список */
     documents?: LinkDocsItem[];
     columnsMode?: LinkColumnsMode;
-    /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
-    orientation?: ListOrientation; // TODO: мобильный проп
-    /** @title Рамка элементов (моб.) */ // TODO: мобильный проп
-    hasBorder?: boolean;
     /** @title Выравнивание */
     align?: TextAlign;
   };

package/mobile/src/components/LinkDocs/LinkDocsListItem.tsx

@@ -1,12 +1,49 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { LinkDocsListItemBase } from './LinkDocsListItemBase';
-import type { LinkDocsListItemProps } from './LinkDocsListItemBase';
-
-export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
-  <LinkDocsListItemBase
-    className={`flex h-full box-border ${className}`}
-    iconClassName="mr-3 min-w-6 min-h-6"
-    doc={doc}
-    icon={icon}
-  />
-));
+import type { VNode } from '../../model/VNode';
+import { Text } from '../../ui-kit/Text/Text';
+import type { LinkDocsItem } from './LinkDocsContent';
+
+export interface LinkDocsListItemProps {
+  doc: LinkDocsItem;
+  icon?: VNode;
+}
+
+export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ doc, icon }) => {
+  const { text, fileSize, ...linkProps } = doc;
+
+  return (
+    <a
+      className="flex box-border gap-3 group/item h-fit w-fit text-primary-text no-underline hover:text-primary-main"
+      role="link"
+      {...linkProps}
+    >
+      {icon}
+      {text ? (
+        <Text size="text-l" font="font-light">
+          {text}
+          <Text color="text-secondary-text">
+            {linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize)}
+          </Text>
+        </Text>
+      ) : null}
+    </a>
+  );
+});
+
+const formatSuffix = (ext?: string, fileSize?: string) => {
+  const prefix = ext || fileSize ? ',' : '';
+  const extension = ext ? ` ${ext}` : '';
+  const size = fileSize ? ` (${fileSize})` : '';
+
+  return prefix + extension + size;
+};
+
+const getExtFromHref = (href: string) => {
+  if (!href) {
+    return '';
+  }
+
+  const index = href.lastIndexOf('.');
+
+  return index !== -1 ? href.substring(index + 1) : '';
+};

package/mobile/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -3,7 +3,6 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import type {
   OfficeServicesBlockContent,
   OfficeServicesBlockList,
@@ -30,7 +29,7 @@ const renderListItems = (itemList: OfficeServicesBlockList, i: number) => (
         width="24"
         height="24"
         asSVG
-        image={getIconWithVersion(itemList.icon)}
+        image={itemList.icon}
       />
     ) : null}
     {itemList.label ? <span className="text-l-light">{itemList.label}</span> : null}

package/mobile/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -1,17 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { RepresentativeOfficeInfoContent } from './RepresentativeOfficeInfoContent';
-import type { Picture } from '../../model/Picture';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import type { IconName } from '../../icons/IconName';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
+import type { RepresentativeOfficeInfoContent } from './RepresentativeOfficeInfoContent';
 
 export interface RepresentativeOfficeInfoProps
   extends RepresentativeOfficeInfoContent,
@@ -57,7 +56,7 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
 const renderIconBlock = (icon?: Picture) => (
   <div className="self-end">
     {icon?.src ? <Img image={icon} /> : null}
-    {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+    {icon?.icon ? <Img image={icon} asSVG /> : null}
   </div>
 );
 

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -11,7 +11,6 @@ import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps'
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 import type { RollupItemContent } from './RollupItemContent';
 
@@ -112,24 +111,12 @@ const renderPrimaryFoldButton = ({
   >
     <div className="flex group-hover:text-primary-main">
       {primaryIcon ? (
-        <Img
-          image={{ ...getIconWithVersion({ ...primaryIcon } as Picture) }}
-          className="mr-3 flex-shrink-0"
-          width="24"
-          height="24"
-          asSVG
-        />
+        <Img image={primaryIcon} className="mr-3 flex-shrink-0" width="24" height="24" asSVG />
       ) : null}
       <Text size="text-m-title-xs" font="font-medium">
         {label}
       </Text>
     </div>
-    <Img
-      className="flex-shrink-0"
-      image={{ ...getIconWithVersion({ icon: icon }) }}
-      width="24"
-      height="24"
-      asSVG
-    />
+    <Img className="flex-shrink-0" image={{ icon }} width="24" height="24" asSVG />
   </button>
 );

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -7,7 +7,6 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { assertUnreachable } from '../../utils/assertUnreachable';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { checkCanRenderIcon } from './checkCanRenderIcon';
 import type { DefaultStep, Step, StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
@@ -121,6 +120,8 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
   const iconSize = size === 'normal' ? '38' : '27';
   const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
 
+  const iconVersion = version === 'secondary' ? 'white' : 'color';
+
   return (
     <div
       className={`${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
@@ -128,7 +129,7 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
       <span className={`font-medium flex self-center ${iconTextSize}`}>
         {checkCanRenderIcon(step?.icon) ? (
           <Img
-            image={getIconWithVersion({ ...step.icon }, version)}
+            image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
             width={iconSize}
             height={iconSize}
             asSVG

package/mobile/src/components/StepsBlock/checkCanRenderIcon.ts

@@ -1,3 +1,4 @@
 import type { Picture } from '../../model/Picture';
 
-export const checkCanRenderIcon = (icon?: Picture) => Boolean(icon?.icon || icon?.src);
+export const checkCanRenderIcon = (icon?: Picture): icon is Picture & { src: string } =>
+  Boolean(icon?.icon || icon?.src);

package/mobile/src/components/TariffsTable/TariffsTableRow.tsx

@@ -3,7 +3,6 @@ import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Img } from '../../ui-kit/Img/Img';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
 import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
 import { TariffsTableCell } from './TariffsTableCell';
@@ -39,13 +38,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
         <div className={`text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`}>
           <div className="flex items-center text-primary-text" role="cell">
             {header?.icon ? (
-              <Img
-                className="mr-3.5 max-w-6"
-                image={getIconWithVersion(header.icon)}
-                width="24"
-                height="24"
-                asSVG
-              />
+              <Img className="mr-3.5 max-w-6" image={header.icon} width="24" height="24" asSVG />
             ) : null}
             {header?.title ? <div className="text-m-light">{header?.title}</div> : null}
           </div>

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

@@ -11,6 +11,7 @@ import { resizeImg } from './resizeImg';
 import type { TransformationOptions } from './TransformationOptions';
 
 const mkdir = util.promisify(fs.mkdir);
+const copyFile = util.promisify(fs.copyFile);
 
 type ImgOutputPath = string;
 type TransformationTaskKey = ImgOutputPath;
@@ -21,13 +22,19 @@ type TransformImgOptions = TransformationOptions &
 
 const defaultTransformationCache: TransformationTasksCache = new Map();
 
+const isNilTransform = ({ size, containerSize, alignment, format }: TransformImgOptions) =>
+  isPictureSizeEmpty(size) && isPictureSizeEmpty(containerSize) && !alignment && !format;
+
+const isVectorInput = (input: string) =>
+  ['.svg', '.eps', '.epsf', '.epsi', '.pdf'].some((ext) => input.toLowerCase().endsWith(ext));
+
 export function transformImg(
   src: string,
   pagePath: string,
   options: TransformImgOptions,
 ): ImgOutputPath | Promise<ImgOutputPath> {
   if (!src) {
-    return '';
+    return src || '';
   }
 
   const input = path.join(path.dirname(pagePath), src);
@@ -43,9 +50,12 @@ export function transformImg(
   const result = (async () => {
     try {
       await mkdir(path.dirname(output), { recursive: true });
-
-      const chain = await computeTransformationChain(options)(sharp(input));
-      await chain.toFile(output);
+      if (isNilTransform(options) || isVectorInput(src)) {
+        await copyFile(input, output);
+      } else {
+        const chain = await computeTransformationChain(options)(sharp(input));
+        await chain.toFile(output);
+      }
     } catch (e) {
       console.error(e);
     }

package/mobile/src/ui-kit/BenefitItem/BenefitItem.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { Img } from '../Img/Img';
 import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
 
@@ -17,13 +16,16 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
     benefitsVersion = 'normal',
   } = props;
   const listItemAlign = description ? 'items-start' : 'items-center';
-  const calcVersion = benefitsVersion === 'white' ? 'secondary' : 'primary';
 
   return (
     <div className={`flex gap-5 ${listItemAlign} ${className}`}>
       {icon ? (
         <div className={getBenefitIconBgStyle(version, benefitsVersion)}>
-          <Img className="w-6 h-6" image={getIconWithVersion(icon, calcVersion)} asSVG />
+          <Img
+            className="w-6 h-6"
+            image={{ ...icon, iconVersion: icon.iconVersion || benefitsVersion }}
+            asSVG
+          />
         </div>
       ) : null}
       <div className="gap-0.5">

package/mobile/src/ui-kit/Button/ButtonInner.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
+import { style } from '../../utils/style';
 import { iconStyleMap } from './buttonClassNameConstants';
 import type { ButtonWithIconProps } from './ButtonProps';
 
@@ -11,7 +12,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
   const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
 
   return (
-    <div className={getButtonStyle(props)}>
+    <div className={style(getButtonStyle(props), 'flex gap-2')}>
       {appendLeft ? <div className={iconStyleMap[version]}>{appendLeft}</div> : null}
       {isWithText(props) ? (
         <div>
@@ -31,10 +32,10 @@ const getButtonStyle = (props: ButtonInnerProps) => {
     return '';
   }
 
-  const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-4'}`;
+  const withTextStyle = `${aboveText ? 'py-2.5 px-7' : 'py-4 px-4'}`;
 
   return [
-    'group/btn flex items-center justify-center',
+    'group/btn items-center justify-center',
     isWithText(props) ? withTextStyle : 'h-12 w-12',
     rounded ? 'rounded-full' : '',
   ].join(' ');

package/mobile/src/ui-kit/Button/renderButtonsSection.tsx

@@ -24,7 +24,8 @@ const renderButton =
   (buttonClassName = '') =>
   (button?: ButtonWithIconProps, index?: number) => {
     const { text, icon, iconRight, version, ...rest } = button || {};
-    const iconVersion = version === 'secondary' ? 'color' : 'white';
+    const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
+    const iconVersion = icon?.iconVersion ? icon?.iconVersion : iconVersionDefault;
 
     return text || icon?.icon ? (
       <Button

package/mobile/src/ui-kit/Img/ImgInner.tsx

@@ -13,7 +13,7 @@ export const ImgInner = JSX<ImageProps>(
       <Icon
         className={className}
         imageClassName={imageClassName}
-        iconVersion={image?.iconVersion || 'normal'}
+        iconVersion={image?.iconVersion}
         name={image.icon}
         {...iconProps}
       />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "private": false,
   "license": "MIT",
   "author": "ЦК",