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

package/src/components/CarouselEventCard/CarouselEventCard.tsx

@@ -5,7 +5,6 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { Text } from '../../ui-kit/Text/Text';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 import type { CarouselEventCardContent } from './CarouselEventCardContent';
 
@@ -16,7 +15,7 @@ export const CarouselEventCard = JSX<CarouselEventCardProps>(
     return (
       <BlockWrapper className={style('w-[365px]', className)} {...rest}>
         <LinkWrapper className="flex flex-col" href={href} target={target}>
-          {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+          {icon?.icon ? <Img image={icon} asSVG /> : null}
           {icon?.src ? <Img image={icon} /> : null}
           {title ? (
             <Heading headingType="h6" as="h4" className="text-left pt-3 mb-2" title={title} />

package/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/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/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/src/components/CarouselTariffsCard/CarouselTariffsCard.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { CarouselTariffsCard } from './CarouselTariffsCard';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
 
@@ -27,6 +27,13 @@ const buttonSecondary: ButtonProps = {
   version: 'secondary',
 };
 
+const buttonIcon: ButtonWithIconProps = {
+  text: 'App Store',
+  icon: { icon: 'DocIconMonoColor', iconVersion: 'color' },
+  href: 'rshb.ru',
+  version: 'link',
+};
+
 const cardCells = [
   { title: 'Открытие расчетного счета', description: 'Бесплатно' },
   { title: 'Внутрибанковские платежи', description: '0 ₽' },
@@ -37,6 +44,7 @@ const cardCells = [
     description: '0% - до 100 000 ₽/мес., далее согласно п.2.4. Тарифов Банка',
   },
   { title: 'Зарплатный проект', description: 'Бесплатно' },
+  { buttons: [buttonIcon] },
 ];
 
 export const TARIFFS_CARD: CarouselTariffsCardContent = {

package/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/src/components/CarouselTariffsCard/CarouselTariffsCard.ui.json

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

package/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/src/components/ComparisonTable/HeaderCell.tsx

@@ -4,7 +4,6 @@ import type { Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { BORDER_CLASSES, GRADIENT } from './constants';
 
 export interface HeaderCellProps {
@@ -23,7 +22,7 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
     {icon && !image?.src && (
       <Img
         className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
-        image={getIconWithVersion(icon)}
+        image={icon}
         width="63"
         height="63"
         asSVG

package/src/components/Footer/Footer.mobile.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/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/src/components/LinkDocs/LinkDocs.example.json

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

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

@@ -3,19 +3,9 @@ import { LinkDocs } from './LinkDocs';
 import { linkDocsContentExample } from './linkDocsContentExample';
 
 export default {
-  'vertical (default)': (
+  default: (
     <div className="container grid grid-cols-12">
       <LinkDocs className="col-span-12" {...linkDocsContentExample} />
     </div>
   ),
-  'vertical, no border': (
-    <div className="container grid grid-cols-12">
-      <LinkDocs className="col-span-12" hasBorder={false} {...linkDocsContentExample} />
-    </div>
-  ),
-  'horizontal, swipe list': (
-    <div className="container grid grid-cols-12">
-      <LinkDocs className="col-span-12" {...linkDocsContentExample} orientation="horizontal" />
-    </div>
-  ),
 };

package/src/components/LinkDocs/LinkDocs.mobile.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/src/components/LinkDocs/LinkDocs.tsx

@@ -1,14 +1,15 @@
 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 { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
-import { LinkDocsList } from './LinkDocsList';
+import { LinkDocsListItem } from './LinkDocsListItem';
 
 const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
-  double: 'flex gap-x-5 gap-y-[26px] flex-wrap',
-  single: 'flex gap-3.5 flex-col',
+  double: 'flex-wrap',
+  single: 'flex-col',
 };
 
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
@@ -33,12 +34,26 @@ export const LinkDocs = JSX<LinkDocsProps>(
         headlineVersion="M"
         as="h2"
       />
-      <LinkDocsList
-        className={`mt-8 ${linkColumnsModeStyleMap[columnsMode]}`}
-        columnsMode={columnsMode}
-        documents={documents}
-        icon={icon}
-      />
+      {documents?.length ? (
+        <div className={style('mt-8 flex gap-6', linkColumnsModeStyleMap[columnsMode])} role="list">
+          {documents.map((doc, i) => (
+            <div
+              key={String(i)}
+              className={columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}
+              role="listitem"
+            >
+              <LinkDocsListItem
+                doc={doc}
+                icon={
+                  icon ? (
+                    <Img className="min-w-6 min-h-6" image={icon} width="24" height="24" asSVG />
+                  ) : null
+                }
+              ></LinkDocsListItem>
+            </div>
+          ))}
+        </div>
+      ) : null}
     </BlockWrapper>
   ),
 );

package/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/src/components/LinkDocs/LinkDocsListItem.tsx

@@ -1,14 +1,49 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { LinkDocsListItemProps } from './LinkDocsListItemBase';
-import { LinkDocsListItemBase } from './LinkDocsListItemBase';
-
-export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
-  <LinkDocsListItemBase
-    className={`flex h-full box-border ${className}`}
-    iconClassName="mr-2.5 min-w-6 min-h-6"
-    textClassName="self-center text-l-light"
-    suffixClassName="text-secondary-text group-hover/item:text-primary-main"
-    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/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/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/src/components/RollupItem/RollupItem.mobile.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/src/components/RollupItem/RollupItem.tsx

@@ -10,7 +10,6 @@ import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import type { RollupItemContent } from './RollupItemContent';
 
 export interface RollupItemProps extends RollupItemContent, UniBlockProps {}
@@ -93,6 +92,6 @@ const renderPrimaryFoldButton = ({ label, icon, onToggle }: PrimaryFoldButtonPro
     <Text size="text-xl" font="font-medium">
       {label}
     </Text>
-    {icon ? <Img image={getIconWithVersion({ icon })} width="24" height="24" asSVG /> : null}
+    {icon ? <Img image={{ icon }} width="24" height="24" asSVG /> : null}
   </button>
 );

package/src/components/StepsBlock/StepsBlock.mobile.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