@redneckz/wildless-cms-uni-blocks 0.12.5 → 0.12.6

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

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import type { SizeVersion } from '../../model/SizeVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -8,63 +7,71 @@ import { Img } from '../../ui-kit/Img/Img';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import { checkCanRenderIcon } from './checkCanRenderIcon';
-import type { DefaultStep, Step, StepsBlockContent } from './StepsBlockContent';
+import type { DefaultStep, Step } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
+import { style } from '../../utils/style';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { StepsBlockContent } from './StepsBlockContent';
+import { UniBlockProps } from '../../model/JSXBlock';
 
-export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
+type StepIconVersion = Record<'icon' | 'image', string>;
 
-const STEPS_SIZE_MAP: Record<SizeVersion, string> = {
-  normal: 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]',
-  small: 'h-12 w-12 min-w-12 min-h-12',
+const STEPS_SIZE_MAP: Record<SizeVersion, StepIconVersion> = {
+  normal: { icon: 'h-11 w-11', image: 'h-14 w-14' },
+  small: { icon: 'h-12 w-12', image: 'h-14 w-14' },
 };
 
 const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
-  normal: 'min-h-[70px]',
+  normal: '',
   small: 'min-h-12',
 };
 
 const styleMap = STEPS_BLOCK_STYLE;
 
+export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
+
 export const StepsBlock = JSX<StepsBlockProps>(
   ({
     className = '',
     title,
     description,
-    showLines = true,
     steps,
+    buttons,
     size = 'normal',
     version = 'primary',
     ...rest
   }) => (
     <BlockWrapper
-      className={`box-border flex flex-col ${className}`}
-      defaultPadding="px-4 py-6"
+      className={style('box-border flex flex-col gap-2', className)}
+      defaultPadding="p-default"
       version={version}
       {...rest}
     >
-      {title ? <Heading headingType="h3" className="text-center" title={title} /> : null}
+      {title ? <Heading headingType="h3" className="text-left" title={title} /> : null}
       {description ? (
-        <p className={`text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
-          {description}
-        </p>
+        <Paragraph size="text-xl" font="font-light">
+          <span className={styleMap.description}>{description}</span>
+        </Paragraph>
       ) : null}
       {steps?.length ? (
-        <div className={`box-border py-0.5 mb-0.5 mt-5`}>
-          <div className="flex flex-col justify-between gap-x-[101px]">
-            {steps.map(renderStep(size, version, showLines))}
+        <div className="box-border">
+          <div className="flex flex-col justify-between">
+            {steps.map(renderStep(size, version))}
           </div>
         </div>
       ) : null}
+      {renderButtonsSection(buttons, { className: 'mt-3', isVertical: true })}
     </BlockWrapper>
   ),
 );
 
 // TODO: Create universal function for this case
 const renderStep =
-  (size: SizeVersion, version: BlockVersion, showLines: boolean) =>
+  (size: SizeVersion, version: BlockVersion) =>
   // Linter doesn't understand that switch processes all cases
   // eslint-disable-next-line consistent-return
-  (step: Step, i: number, steps: Step[]) => {
+  (step: Step, i: number) => {
     const { type } = step;
 
     if (!(type === 'default' || type === 'rte')) {
@@ -73,7 +80,7 @@ const renderStep =
 
     switch (type) {
       case 'default':
-        return renderDefaultStep(size, version, showLines)(step, i, steps);
+        return renderDefaultStep(size, version)(step, i);
       case 'rte':
         return <RichText __html={step.__html} />;
       default:
@@ -82,52 +89,46 @@ const renderStep =
   };
 
 const renderDefaultStep =
-  (size: SizeVersion, version: BlockVersion, showLines: boolean) =>
-  (step: DefaultStep, i: number, steps: Step[]) => {
-    const isLastStep = steps.length - 1 === i;
-    const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
-
-    return (
-      <div key={String(i)}>
-        <div className="flex flex-row text-center relative">
-          <div className="overflow-hidden flex-shrink-0">
+  (size: SizeVersion, version: BlockVersion) => (step: DefaultStep, i: number) =>
+    (
+      <div key={String(i)} className="contents">
+        <div className="flex flex-row text-center relative py-3">
+          <div className="overflow-hidden flex flex-shrink-0 items-center">
             {renderIconArea(size, version)(step, i)}
-            {isLastStep ? null : (
-              <div
-                className={`min-h-8 h-full w-0.5 ${
-                  showLines ? styleMap.iconConnector : ''
-                } ${margin}`}
-              />
-            )}
           </div>
           <div
-            className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
+            className={style(
+              'flex flex-col justify-center h-fit',
+              STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size],
+            )}
           >
-            {step.label ? (
-              <div className="text-m-title-xs font-medium m-0 text-left mb-1">{step.label}</div>
-            ) : null}
+            {step.label ? <div className="text-l m-0 text-left">{step.label}</div> : null}
             {step.description ? (
-              <div className={`text-s ${styleMap.description} text-left`}>{step.description}</div>
+              <div className={style('text-s font-light text-left', styleMap.description)}>
+                {step.description}
+              </div>
             ) : null}
           </div>
         </div>
       </div>
     );
-  };
 
 const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step, i: number) => {
-  const iconAreaSize = STEPS_SIZE_MAP[size];
-
-  const iconSize = size === 'normal' ? '38' : '27';
-  const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
-
+  const iconSize = size === 'normal' ? '38' : '24';
   const iconVersion = version === 'secondary' ? 'white' : 'color';
+  const isImg = Boolean(step?.icon?.src);
+  const iconAreaSize = STEPS_SIZE_MAP[size][isImg ? 'image' : 'icon'];
+  const containerStyle = isImg ? '' : `rounded-md ${styleMap.iconBackground}`;
 
   return (
     <div
-      className={`${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
+      className={style(
+        iconAreaSize,
+        containerStyle,
+        'z-10 mr-3 flex justify-center content-center',
+      )}
     >
-      <span className={`font-medium flex self-center ${iconTextSize}`}>
+      <span className="flex self-center text-h4 text-secondary-text group-data-secondary:text-white">
         {checkCanRenderIcon(step?.icon) ? (
           <Img
             image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}

package/src/components/Tile/Tile.example.json

@@ -1,11 +1,12 @@
 {
   "content": {
     "title": "Плитка",
-    "headingType": "h3",
+    "headlineVersion": "S",
     "__html": "<p>Описание</p>",
     "image": {
       "format": "webp",
       "size": {
+        "format": "webp",
         "width": 445
       }
     },
@@ -19,6 +20,9 @@
       }
     ],
     "version": "primary",
-    "directionRight": true
+    "imageOptions": {
+      "directionRight": true,
+      "imageAlign": "end"
+    }
   }
 }

package/src/components/Tile/Tile.fixture.tsx

@@ -115,7 +115,7 @@ export default {
   ecosystem: (
     <div className="container grid grid-cols-12">
       <Tile
-        className="col-span-12 pr-28"
+        className="col-span-12"
         title="Экосистема «СВОЕ», созданная для людей"
         items={[
           'Качественные фермерские продукты напрямую от производителей',

package/src/components/Tile/Tile.tsx

@@ -7,14 +7,15 @@ import type { TileContent } from './TileContent';
 export interface TileProps extends TileContent, UniBlockProps {}
 
 export const Tile = JSX<TileProps>(
-  ({ className, headlineVersion = 'S', listItemSize = 'M', ...rest }) => (
-    <BlockWrapper className={className} {...rest}>
+  ({ className, padding, headlineVersion = 'S', listItemSize = 'M', ...rest }) => (
+    <BlockWrapper className={className} padding="p-0" {...rest}>
       <BaseProductTile
         className="h-full"
+        defaultPadding="p-m"
+        padding={padding}
         headlineVersion={headlineVersion}
         listItemSize={listItemSize}
         {...rest}
-        imageOptions={{ imageAlign: 'end', ...rest.imageOptions }}
       />
     </BlockWrapper>
   ),

package/src/icons/BelarusianFlag.svg

@@ -0,0 +1,4 @@
+<svg title="Белорусский флаг" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M56.3125 -1.57031H-22.3125V25.5725H56.3125V-1.57031Z" fill="#CE1720"/>
+  <path d="M-13.1406 16.5234H56.3111V25.5713H-13.1406V16.5234Z" fill="#007C30"/>
+</svg>

package/src/icons/IconName.ts

@@ -3,15 +3,15 @@
 /* eslint-disable max-len, max-lines */
 
 export const IconsWithoutInversion = new Set([
-  'ActualBalanceIcon', 'AirPlaneIcon', 'BagIcon', 'BriefcaseIcon', 'CardWithGemIcon', 'CarIcon', 'ChevronLeft', 'CinemaIcon', 'ClientIcon', 'ClockIcon', 'ComfortableCompIcon', 'CreditCardsIcon', 'DocsIcon', 'DollarIcon', 'DoneIcon', 'EarthIcon', 'EuroIcon', 'FullScreenIcon', 'GlassIcon', 'HeadphonesIcon', 'HeartIcon', 'HuaweiIcon', 'InterestGrowthIcon', 'JCBIcon', 'MailIcon', 'MapMarkerClusterIcon', 'MapMarkerSingleIcon', 'MasterCardIcon', 'MirIcon', 'MoneyInsuranceIcon', 'NewDocIcon', 'OfficeIcon', 'PackA4Icon', 'PassSendIcon', 'PercentIcon', 'PhoneIcon', 'PowerIcon', 'PumpkinIcon', 'ResponceFailIcon', 'ResponceOKIcon', 'SignDocsIcon', 'SoundIcon', 'UnionPayIcon', 'UserGeoLocationIcon', 'VisaIcon', 'WateringCanIcon'
+  'ActualBalanceIcon', 'AirPlaneIcon', 'BagIcon', 'BelarusianFlag', 'BriefcaseIcon', 'CardWithGemIcon', 'CarIcon', 'ChevronLeft', 'CinemaIcon', 'ClientIcon', 'ClockIcon', 'ComfortableCompIcon', 'CreditCardsIcon', 'DocsIcon', 'DollarIcon', 'DoneIcon', 'EarthIcon', 'EuroIcon', 'FullScreenIcon', 'GlassIcon', 'HeadphonesIcon', 'HeartIcon', 'HuaweiIcon', 'InterestGrowthIcon', 'JCBIcon', 'MailIcon', 'MapMarkerClusterIcon', 'MapMarkerSingleIcon', 'MasterCardIcon', 'MirIcon', 'MoneyInsuranceIcon', 'NewDocIcon', 'OfficeIcon', 'PackA4Icon', 'PassSendIcon', 'PercentIcon', 'PhoneIcon', 'PowerIcon', 'PumpkinIcon', 'ResponceFailIcon', 'ResponceOKIcon', 'SignDocsIcon', 'SoundIcon', 'UnionPayIcon', 'UserGeoLocationIcon', 'VisaIcon', 'WateringCanIcon'
 ]);
 
 export enum IconMap {
-  ActualBalanceIcon = 'ActualBalanceIcon', AirPlaneIcon = 'AirPlaneIcon', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowDownSolidIcon = 'ArrowDownSolidIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowRightIcon = 'ArrowRightIcon', ArrowTopRightIcon = 'ArrowTopRightIcon', ArrowUpIcon = 'ArrowUpIcon', ArrowUpSolidIcon = 'ArrowUpSolidIcon', AtmIcon = 'AtmIcon', BagIcon = 'BagIcon', BankIcon = 'BankIcon', BriefcaseIcon = 'BriefcaseIcon', BuildingIcon = 'BuildingIcon', BurgerIcon = 'BurgerIcon', Calendar2Icon = 'Calendar2Icon', CalendarCircleIcon = 'CalendarCircleIcon', CalendarIcon = 'CalendarIcon', CalendarTickIcon = 'CalendarTickIcon', Car2Icon = 'Car2Icon', CardIcon = 'CardIcon', CardPosIcon = 'CardPosIcon', CardTickIcon = 'CardTickIcon', CardWithGemIcon = 'CardWithGemIcon', CarIcon = 'CarIcon', ChartSquareIcon = 'ChartSquareIcon', ChevronLeft = 'ChevronLeft', CinemaIcon = 'CinemaIcon', ClientIcon = 'ClientIcon', ClockIcon = 'ClockIcon', CloseIcon = 'CloseIcon', ComfortableCompIcon = 'ComfortableCompIcon', CreditCardsIcon = 'CreditCardsIcon', DiscountShapeIcon = 'DiscountShapeIcon', DocDownloadIcon = 'DocDownloadIcon', DocIcon = 'DocIcon', DocIconMonoColor = 'DocIconMonoColor', DocsIcon = 'DocsIcon', DocumentText2Icon = 'DocumentText2Icon', DocumentTextIcon = 'DocumentTextIcon', DollarIcon = 'DollarIcon', DoneIcon = 'DoneIcon', DoneSimpleIcon = 'DoneSimpleIcon', EarthIcon = 'EarthIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', EmptyWalletIcon = 'EmptyWalletIcon', EuroIcon = 'EuroIcon', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'GeolocationIcon', GlassIcon = 'GlassIcon', GlobalIcon = 'GlobalIcon', GpsIcon = 'GpsIcon', GridIcon = 'GridIcon', HeadphonesIcon = 'HeadphonesIcon', HeartIcon = 'HeartIcon', HuaweiIcon = 'HuaweiIcon', InterestGrowthIcon = 'InterestGrowthIcon', InterestIcon = 'InterestIcon', JCBIcon = 'JCBIcon', LogoIcon = 'LogoIcon', LoupeIcon = 'LoupeIcon', MailIcon = 'MailIcon', MapMarkerClusterIcon = 'MapMarkerClusterIcon', MapMarkerSingleIcon = 'MapMarkerSingleIcon', MasterCardIcon = 'MasterCardIcon', MetroIcon = 'MetroIcon', MinusIcon = 'MinusIcon', MirIcon = 'MirIcon', MoneyIcon = 'MoneyIcon', MoneyInsuranceIcon = 'MoneyInsuranceIcon', MoneysIcon = 'MoneysIcon', MonitorMobileIcon = 'MonitorMobileIcon', NewDocIcon = 'NewDocIcon', OfficeIcon = 'OfficeIcon', OkIcon = 'OkIcon', PackA4Icon = 'PackA4Icon', PassSendIcon = 'PassSendIcon', PercentageRoundIcon = 'PercentageRoundIcon', PercentageSquareIcon = 'PercentageSquareIcon', PercentIcon = 'PercentIcon', PersonalCardIcon = 'PersonalCardIcon', PhoneIcon = 'PhoneIcon', PlayMarketIcon = 'PlayMarketIcon', PlusIcon = 'PlusIcon', PowerIcon = 'PowerIcon', Profile2UserIcon = 'Profile2UserIcon', ProfileIcon = 'ProfileIcon', PumpkinIcon = 'PumpkinIcon', ResponceFailIcon = 'ResponceFailIcon', ResponceOKIcon = 'ResponceOKIcon', RoundRubleIcon = 'RoundRubleIcon', SafeIcon = 'SafeIcon', ShieldTickIcon = 'ShieldTickIcon', SignDocsIcon = 'SignDocsIcon', SmallClockIcon = 'SmallClockIcon', SoundIcon = 'SoundIcon', StrongBoxIcon = 'StrongBoxIcon', TelegramIcon = 'TelegramIcon', UnionPayIcon = 'UnionPayIcon', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'UserSquareIcon', UserTickIcon = 'UserTickIcon', VisaIcon = 'VisaIcon', VKIcon = 'VKIcon', WalletAdd2Icon = 'WalletAdd2Icon', WalletAddIcon = 'WalletAddIcon', WalletIcon = 'WalletIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WateringCanIcon = 'WateringCanIcon', YoutubeIcon = 'YoutubeIcon'
+  ActualBalanceIcon = 'ActualBalanceIcon', AirPlaneIcon = 'AirPlaneIcon', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowDownSolidIcon = 'ArrowDownSolidIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowRightIcon = 'ArrowRightIcon', ArrowTopRightIcon = 'ArrowTopRightIcon', ArrowUpIcon = 'ArrowUpIcon', ArrowUpSolidIcon = 'ArrowUpSolidIcon', AtmIcon = 'AtmIcon', BagIcon = 'BagIcon', BankIcon = 'BankIcon', BelarusianFlag = 'BelarusianFlag', BriefcaseIcon = 'BriefcaseIcon', BuildingIcon = 'BuildingIcon', BurgerIcon = 'BurgerIcon', Calendar2Icon = 'Calendar2Icon', CalendarCircleIcon = 'CalendarCircleIcon', CalendarIcon = 'CalendarIcon', CalendarTickIcon = 'CalendarTickIcon', Car2Icon = 'Car2Icon', CardIcon = 'CardIcon', CardPosIcon = 'CardPosIcon', CardTickIcon = 'CardTickIcon', CardWithGemIcon = 'CardWithGemIcon', CarIcon = 'CarIcon', ChartSquareIcon = 'ChartSquareIcon', ChevronLeft = 'ChevronLeft', CinemaIcon = 'CinemaIcon', ClientIcon = 'ClientIcon', ClockIcon = 'ClockIcon', CloseIcon = 'CloseIcon', ComfortableCompIcon = 'ComfortableCompIcon', CreditCardsIcon = 'CreditCardsIcon', DiscountShapeIcon = 'DiscountShapeIcon', DocDownloadIcon = 'DocDownloadIcon', DocIcon = 'DocIcon', DocIconMonoColor = 'DocIconMonoColor', DocsIcon = 'DocsIcon', DocumentText2Icon = 'DocumentText2Icon', DocumentTextIcon = 'DocumentTextIcon', DollarIcon = 'DollarIcon', DoneIcon = 'DoneIcon', DoneSimpleIcon = 'DoneSimpleIcon', EarthIcon = 'EarthIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', EmptyWalletIcon = 'EmptyWalletIcon', EuroIcon = 'EuroIcon', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'GeolocationIcon', GlassIcon = 'GlassIcon', GlobalIcon = 'GlobalIcon', GpsIcon = 'GpsIcon', GridIcon = 'GridIcon', HeadphonesIcon = 'HeadphonesIcon', HeartIcon = 'HeartIcon', HuaweiIcon = 'HuaweiIcon', InterestGrowthIcon = 'InterestGrowthIcon', InterestIcon = 'InterestIcon', JCBIcon = 'JCBIcon', LogoIcon = 'LogoIcon', LoupeIcon = 'LoupeIcon', MailIcon = 'MailIcon', MapMarkerClusterIcon = 'MapMarkerClusterIcon', MapMarkerSingleIcon = 'MapMarkerSingleIcon', MasterCardIcon = 'MasterCardIcon', MetroIcon = 'MetroIcon', MinusIcon = 'MinusIcon', MirIcon = 'MirIcon', MoneyIcon = 'MoneyIcon', MoneyInsuranceIcon = 'MoneyInsuranceIcon', MoneysIcon = 'MoneysIcon', MonitorMobileIcon = 'MonitorMobileIcon', NewDocIcon = 'NewDocIcon', OfficeIcon = 'OfficeIcon', OkIcon = 'OkIcon', PackA4Icon = 'PackA4Icon', PassSendIcon = 'PassSendIcon', PercentageRoundIcon = 'PercentageRoundIcon', PercentageSquareIcon = 'PercentageSquareIcon', PercentIcon = 'PercentIcon', PersonalCardIcon = 'PersonalCardIcon', PhoneIcon = 'PhoneIcon', PlayMarketIcon = 'PlayMarketIcon', PlusIcon = 'PlusIcon', PowerIcon = 'PowerIcon', Profile2UserIcon = 'Profile2UserIcon', ProfileIcon = 'ProfileIcon', PumpkinIcon = 'PumpkinIcon', ResponceFailIcon = 'ResponceFailIcon', ResponceOKIcon = 'ResponceOKIcon', RoundRubleIcon = 'RoundRubleIcon', SafeIcon = 'SafeIcon', ShieldTickIcon = 'ShieldTickIcon', SignDocsIcon = 'SignDocsIcon', SmallClockIcon = 'SmallClockIcon', SoundIcon = 'SoundIcon', StrongBoxIcon = 'StrongBoxIcon', TelegramIcon = 'TelegramIcon', UnionPayIcon = 'UnionPayIcon', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'UserSquareIcon', UserTickIcon = 'UserTickIcon', VisaIcon = 'VisaIcon', VKIcon = 'VKIcon', WalletAdd2Icon = 'WalletAdd2Icon', WalletAddIcon = 'WalletAddIcon', WalletIcon = 'WalletIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WateringCanIcon = 'WateringCanIcon', YoutubeIcon = 'YoutubeIcon'
 }
 
 export enum IconTitleMap {
-  ActualBalanceIcon = 'Деньги', AirPlaneIcon = 'Самолёт', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowDownSolidIcon = 'Стрелка сплошная \'Вниз\'', ArrowLeftIcon = 'Стрелка \'Влево\'', ArrowRightIcon = 'Стрелка \'Вправо\'', ArrowTopRightIcon = 'Стрелка \'Вверх-право\'', ArrowUpIcon = 'Стрелка \'Вверх\'', ArrowUpSolidIcon = 'Стрелка сплошная \'Вверх\'', AtmIcon = 'Банкомат', BagIcon = 'Сумка', BankIcon = 'Банк', BriefcaseIcon = 'BriefcaseIcon', BuildingIcon = 'Здание с деревом', BurgerIcon = 'Бургер', Calendar2Icon = 'Календарь 2', CalendarCircleIcon = 'Скруглённый календарь', CalendarIcon = 'Календарь', CalendarTickIcon = 'Календарь с галочкой', Car2Icon = 'Машина2', CardIcon = 'Кред. карта', CardPosIcon = 'Кред. карта под наклоном', CardTickIcon = 'Кред. карта с галочкой', CardWithGemIcon = 'Карта с драгоценностями', CarIcon = 'Машина', ChartSquareIcon = 'Деньги внутри кошелька', ChevronLeft = 'Стрелка \'Вправо\'', CinemaIcon = 'Кинотеатр', ClientIcon = 'Клиент', ClockIcon = 'Часы', CloseIcon = 'Крестик', ComfortableCompIcon = 'Кресло', CreditCardsIcon = 'Кредитные карты', DiscountShapeIcon = 'Скидка', DocDownloadIcon = 'Скачать документ', DocIcon = 'Документ', DocIconMonoColor = 'Документ (одноцветный)', DocsIcon = 'Документы', DocumentText2Icon = 'Документы-2', DocumentTextIcon = 'Документ с текстом', DollarIcon = 'Доллар', DoneIcon = 'Зелёная \'галочка\' в круге', DoneSimpleIcon = 'Зелёная \'галочка\'', EarthIcon = 'Земля', EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом', EmptyWalletIcon = 'Пустой кошелёк', EuroIcon = 'Евро', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'Геолокация', GlassIcon = 'Зеркало', GlobalIcon = 'Глобус', GpsIcon = 'Gps', GridIcon = 'Сетка (белая)', HeadphonesIcon = 'HeadphonesIcon', HeartIcon = 'Сердце', HuaweiIcon = 'Лого «Huawei»', InterestGrowthIcon = 'Диаграмма роста', InterestIcon = 'Скидка', JCBIcon = 'JCB', LogoIcon = 'Logo', LoupeIcon = 'Лупа', MailIcon = 'E-mail', MapMarkerClusterIcon = 'Маркер карты', MapMarkerSingleIcon = 'Маркер карты РСХБ', MasterCardIcon = 'MasterCard', MetroIcon = 'Лого Метро', MinusIcon = 'Минус', MirIcon = 'МИР', MoneyIcon = 'Деньги', MoneyInsuranceIcon = 'Денежное страхование', MoneysIcon = 'Купюры', MonitorMobileIcon = 'Монитор и мобильный', NewDocIcon = 'Новый документ', OfficeIcon = 'Офис', OkIcon = 'Лого «Одноклассники»', PackA4Icon = 'Пачка бумаги А4', PassSendIcon = 'Бизнес', PercentageRoundIcon = 'Проценты (круг.)', PercentageSquareIcon = 'Проценты', PercentIcon = 'PercentIcon', PersonalCardIcon = 'Персональная карта', PhoneIcon = 'Телефон', PlayMarketIcon = 'Лого «PlayMarket»', PlusIcon = 'Плюс', PowerIcon = 'Щит', Profile2UserIcon = 'Профиль, 2 персоны', ProfileIcon = 'Профиль', PumpkinIcon = 'Тыква', ResponceFailIcon = 'Ошибка', ResponceOKIcon = 'Ок', RoundRubleIcon = 'Рубль (круг.)', SafeIcon = 'Сейф', ShieldTickIcon = 'Безопасность', SignDocsIcon = 'Подписанные документы', SmallClockIcon = 'Маленькие часы', SoundIcon = 'Звук', StrongBoxIcon = 'Ящик с замочной скважиной', TelegramIcon = 'Лого «Telegram»', UnionPayIcon = 'UnionPay', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'Пользователь в рамке', UserTickIcon = 'Пользователь', VisaIcon = 'Visa', VKIcon = 'Лого «VK»', WalletAdd2Icon = 'Пополнение карты', WalletAddIcon = 'Кошелёк с плюсом', WalletIcon = 'Кошелёк', WalletWithMoneyIcon = 'Кошелёк с деньгами', WateringCanIcon = 'Добавить продукт', YoutubeIcon = 'Лого «Youtube»'
+  ActualBalanceIcon = 'Деньги', AirPlaneIcon = 'Самолёт', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowDownSolidIcon = 'Стрелка сплошная \'Вниз\'', ArrowLeftIcon = 'Стрелка \'Влево\'', ArrowRightIcon = 'Стрелка \'Вправо\'', ArrowTopRightIcon = 'Стрелка \'Вверх-право\'', ArrowUpIcon = 'Стрелка \'Вверх\'', ArrowUpSolidIcon = 'Стрелка сплошная \'Вверх\'', AtmIcon = 'Банкомат', BagIcon = 'Сумка', BankIcon = 'Банк', BelarusianFlag = 'Белорусский флаг', BriefcaseIcon = 'BriefcaseIcon', BuildingIcon = 'Здание с деревом', BurgerIcon = 'Бургер', Calendar2Icon = 'Календарь 2', CalendarCircleIcon = 'Скруглённый календарь', CalendarIcon = 'Календарь', CalendarTickIcon = 'Календарь с галочкой', Car2Icon = 'Машина2', CardIcon = 'Кред. карта', CardPosIcon = 'Кред. карта под наклоном', CardTickIcon = 'Кред. карта с галочкой', CardWithGemIcon = 'Карта с драгоценностями', CarIcon = 'Машина', ChartSquareIcon = 'Деньги внутри кошелька', ChevronLeft = 'Стрелка \'Вправо\'', CinemaIcon = 'Кинотеатр', ClientIcon = 'Клиент', ClockIcon = 'Часы', CloseIcon = 'Крестик', ComfortableCompIcon = 'Кресло', CreditCardsIcon = 'Кредитные карты', DiscountShapeIcon = 'Скидка', DocDownloadIcon = 'Скачать документ', DocIcon = 'Документ', DocIconMonoColor = 'Документ (одноцветный)', DocsIcon = 'Документы', DocumentText2Icon = 'Документы-2', DocumentTextIcon = 'Документ с текстом', DollarIcon = 'Доллар', DoneIcon = 'Зелёная \'галочка\' в круге', DoneSimpleIcon = 'Зелёная \'галочка\'', EarthIcon = 'Земля', EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом', EmptyWalletIcon = 'Пустой кошелёк', EuroIcon = 'Евро', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'Геолокация', GlassIcon = 'Зеркало', GlobalIcon = 'Глобус', GpsIcon = 'Gps', GridIcon = 'Сетка (белая)', HeadphonesIcon = 'HeadphonesIcon', HeartIcon = 'Сердце', HuaweiIcon = 'Лого «Huawei»', InterestGrowthIcon = 'Диаграмма роста', InterestIcon = 'Скидка', JCBIcon = 'JCB', LogoIcon = 'Logo', LoupeIcon = 'Лупа', MailIcon = 'E-mail', MapMarkerClusterIcon = 'Маркер карты', MapMarkerSingleIcon = 'Маркер карты РСХБ', MasterCardIcon = 'MasterCard', MetroIcon = 'Лого Метро', MinusIcon = 'Минус', MirIcon = 'МИР', MoneyIcon = 'Деньги', MoneyInsuranceIcon = 'Денежное страхование', MoneysIcon = 'Купюры', MonitorMobileIcon = 'Монитор и мобильный', NewDocIcon = 'Новый документ', OfficeIcon = 'Офис', OkIcon = 'Лого «Одноклассники»', PackA4Icon = 'Пачка бумаги А4', PassSendIcon = 'Бизнес', PercentageRoundIcon = 'Проценты (круг.)', PercentageSquareIcon = 'Проценты', PercentIcon = 'PercentIcon', PersonalCardIcon = 'Персональная карта', PhoneIcon = 'Телефон', PlayMarketIcon = 'Лого «PlayMarket»', PlusIcon = 'Плюс', PowerIcon = 'Щит', Profile2UserIcon = 'Профиль, 2 персоны', ProfileIcon = 'Профиль', PumpkinIcon = 'Тыква', ResponceFailIcon = 'Ошибка', ResponceOKIcon = 'Ок', RoundRubleIcon = 'Рубль (круг.)', SafeIcon = 'Сейф', ShieldTickIcon = 'Безопасность', SignDocsIcon = 'Подписанные документы', SmallClockIcon = 'Маленькие часы', SoundIcon = 'Звук', StrongBoxIcon = 'Ящик с замочной скважиной', TelegramIcon = 'Лого «Telegram»', UnionPayIcon = 'UnionPay', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'Пользователь в рамке', UserTickIcon = 'Пользователь', VisaIcon = 'Visa', VKIcon = 'Лого «VK»', WalletAdd2Icon = 'Пополнение карты', WalletAddIcon = 'Кошелёк с плюсом', WalletIcon = 'Кошелёк', WalletWithMoneyIcon = 'Кошелёк с деньгами', WateringCanIcon = 'Добавить продукт', YoutubeIcon = 'Лого «Youtube»'
 }
 
 /**
@@ -19,7 +19,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка сплошная \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Стрелка сплошная \'Вверх\'', 'Банкомат', 'Сумка', 'Банк', 'BriefcaseIcon', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Стрелка \'Вправо\'', 'Кинотеатр', 'Клиент', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'HeadphonesIcon', 'Сердце', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'E-mail', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'PercentIcon', 'Персональная карта', 'Телефон', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Ошибка', 'Ок', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт', 'Лого «Youtube»'
+ *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка сплошная \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Стрелка сплошная \'Вверх\'', 'Банкомат', 'Сумка', 'Банк', 'Белорусский флаг', 'BriefcaseIcon', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Стрелка \'Вправо\'', 'Кинотеатр', 'Клиент', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'HeadphonesIcon', 'Сердце', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'E-mail', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'PercentIcon', 'Персональная карта', 'Телефон', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Ошибка', 'Ок', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт', 'Лого «Youtube»'
  * ]
  */
-export type IconName = '' | 'ActualBalanceIcon' | 'AirPlaneIcon' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowDownSolidIcon' | 'ArrowLeftIcon' | 'ArrowRightIcon' | 'ArrowTopRightIcon' | 'ArrowUpIcon' | 'ArrowUpSolidIcon' | 'AtmIcon' | 'BagIcon' | 'BankIcon' | 'BriefcaseIcon' | 'BuildingIcon' | 'BurgerIcon' | 'Calendar2Icon' | 'CalendarCircleIcon' | 'CalendarIcon' | 'CalendarTickIcon' | 'Car2Icon' | 'CardIcon' | 'CardPosIcon' | 'CardTickIcon' | 'CardWithGemIcon' | 'CarIcon' | 'ChartSquareIcon' | 'ChevronLeft' | 'CinemaIcon' | 'ClientIcon' | 'ClockIcon' | 'CloseIcon' | 'ComfortableCompIcon' | 'CreditCardsIcon' | 'DiscountShapeIcon' | 'DocDownloadIcon' | 'DocIcon' | 'DocIconMonoColor' | 'DocsIcon' | 'DocumentText2Icon' | 'DocumentTextIcon' | 'DollarIcon' | 'DoneIcon' | 'DoneSimpleIcon' | 'EarthIcon' | 'EmptyWalletChangeIcon' | 'EmptyWalletIcon' | 'EuroIcon' | 'FullScreenIcon' | 'GeolocationIcon' | 'GlassIcon' | 'GlobalIcon' | 'GpsIcon' | 'GridIcon' | 'HeadphonesIcon' | 'HeartIcon' | 'HuaweiIcon' | 'InterestGrowthIcon' | 'InterestIcon' | 'JCBIcon' | 'LogoIcon' | 'LoupeIcon' | 'MailIcon' | 'MapMarkerClusterIcon' | 'MapMarkerSingleIcon' | 'MasterCardIcon' | 'MetroIcon' | 'MinusIcon' | 'MirIcon' | 'MoneyIcon' | 'MoneyInsuranceIcon' | 'MoneysIcon' | 'MonitorMobileIcon' | 'NewDocIcon' | 'OfficeIcon' | 'OkIcon' | 'PackA4Icon' | 'PassSendIcon' | 'PercentageRoundIcon' | 'PercentageSquareIcon' | 'PercentIcon' | 'PersonalCardIcon' | 'PhoneIcon' | 'PlayMarketIcon' | 'PlusIcon' | 'PowerIcon' | 'Profile2UserIcon' | 'ProfileIcon' | 'PumpkinIcon' | 'ResponceFailIcon' | 'ResponceOKIcon' | 'RoundRubleIcon' | 'SafeIcon' | 'ShieldTickIcon' | 'SignDocsIcon' | 'SmallClockIcon' | 'SoundIcon' | 'StrongBoxIcon' | 'TelegramIcon' | 'UnionPayIcon' | 'UserGeoLocationIcon' | 'UserSquareIcon' | 'UserTickIcon' | 'VisaIcon' | 'VKIcon' | 'WalletAdd2Icon' | 'WalletAddIcon' | 'WalletIcon' | 'WalletWithMoneyIcon' | 'WateringCanIcon' | 'YoutubeIcon';
+export type IconName = '' | 'ActualBalanceIcon' | 'AirPlaneIcon' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowDownSolidIcon' | 'ArrowLeftIcon' | 'ArrowRightIcon' | 'ArrowTopRightIcon' | 'ArrowUpIcon' | 'ArrowUpSolidIcon' | 'AtmIcon' | 'BagIcon' | 'BankIcon' | 'BelarusianFlag' | 'BriefcaseIcon' | 'BuildingIcon' | 'BurgerIcon' | 'Calendar2Icon' | 'CalendarCircleIcon' | 'CalendarIcon' | 'CalendarTickIcon' | 'Car2Icon' | 'CardIcon' | 'CardPosIcon' | 'CardTickIcon' | 'CardWithGemIcon' | 'CarIcon' | 'ChartSquareIcon' | 'ChevronLeft' | 'CinemaIcon' | 'ClientIcon' | 'ClockIcon' | 'CloseIcon' | 'ComfortableCompIcon' | 'CreditCardsIcon' | 'DiscountShapeIcon' | 'DocDownloadIcon' | 'DocIcon' | 'DocIconMonoColor' | 'DocsIcon' | 'DocumentText2Icon' | 'DocumentTextIcon' | 'DollarIcon' | 'DoneIcon' | 'DoneSimpleIcon' | 'EarthIcon' | 'EmptyWalletChangeIcon' | 'EmptyWalletIcon' | 'EuroIcon' | 'FullScreenIcon' | 'GeolocationIcon' | 'GlassIcon' | 'GlobalIcon' | 'GpsIcon' | 'GridIcon' | 'HeadphonesIcon' | 'HeartIcon' | 'HuaweiIcon' | 'InterestGrowthIcon' | 'InterestIcon' | 'JCBIcon' | 'LogoIcon' | 'LoupeIcon' | 'MailIcon' | 'MapMarkerClusterIcon' | 'MapMarkerSingleIcon' | 'MasterCardIcon' | 'MetroIcon' | 'MinusIcon' | 'MirIcon' | 'MoneyIcon' | 'MoneyInsuranceIcon' | 'MoneysIcon' | 'MonitorMobileIcon' | 'NewDocIcon' | 'OfficeIcon' | 'OkIcon' | 'PackA4Icon' | 'PassSendIcon' | 'PercentageRoundIcon' | 'PercentageSquareIcon' | 'PercentIcon' | 'PersonalCardIcon' | 'PhoneIcon' | 'PlayMarketIcon' | 'PlusIcon' | 'PowerIcon' | 'Profile2UserIcon' | 'ProfileIcon' | 'PumpkinIcon' | 'ResponceFailIcon' | 'ResponceOKIcon' | 'RoundRubleIcon' | 'SafeIcon' | 'ShieldTickIcon' | 'SignDocsIcon' | 'SmallClockIcon' | 'SoundIcon' | 'StrongBoxIcon' | 'TelegramIcon' | 'UnionPayIcon' | 'UserGeoLocationIcon' | 'UserSquareIcon' | 'UserTickIcon' | 'VisaIcon' | 'VKIcon' | 'WalletAdd2Icon' | 'WalletAddIcon' | 'WalletIcon' | 'WalletWithMoneyIcon' | 'WateringCanIcon' | 'YoutubeIcon';

package/src/ui-kit/BaseProductTile/BaseProductTile.tsx

@@ -1,5 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Headline } from '../../components/Headline/Headline';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { VNode } from '../../model/VNode';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { BenefitsList } from '../BenefitsList/BenefitsList';
 import { renderButtonsSection } from '../Button/renderButtonsSection';
@@ -9,21 +11,23 @@ import { RichText } from '../RichText/RichText';
 import { Tags } from '../Tags/Tags';
 import type { BaseProductTileContent } from './BaseProductTileContent';
 
-interface BaseProductTileProps extends BaseProductTileContent {
-  className?: string;
+interface BaseProductTileProps extends UniBlockProps, BaseProductTileContent {
   isInsetTitle?: boolean;
 }
 
 export const BaseProductTile = JSX<BaseProductTileProps>(
   ({
     className,
+    padding,
+    defaultPadding,
     title,
     description,
     headlineVersion = 'L',
     align = 'text-left',
     isInsetTitle = true,
-    benefits,
     benefitsVersion,
+    isTabularBenefits,
+    benefits,
     __html,
     items,
     isDotted = true,
@@ -31,7 +35,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     tags,
     buttons,
     image,
-    imageOptions: { imageAlign, directionRight = true } = {},
+    imageOptions: { imageAlign = 'end', directionRight = true, isBackground } = {},
     children,
   }) => {
     const img = image?.src ? <Img image={image} /> : null;
@@ -48,13 +52,19 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     return (
       <BaseTile
         className={className}
+        padding={padding}
+        defaultPadding={defaultPadding}
         {...(isInsetTitle ? { insetTitle: headline } : { title: headline })}
-        {...(directionRight ? { rightImage: img } : { leftImage: img })}
+        {...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight))}
         imageAlign={imageAlign}
         buttons={renderButtonsSection(buttons)}
       >
         <div className="flex flex-col gap-m">
-          <BenefitsList benefitsVersion={benefitsVersion} benefits={benefits} />
+          <BenefitsList
+            benefitsVersion={benefitsVersion}
+            isTabularBenefits={isTabularBenefits}
+            benefits={benefits}
+          />
           {__html ? <RichText __html={__html} /> : null}
           {items?.length ? (
             <List items={items} isDotted={isDotted} listItemSize={listItemSize} />
@@ -66,3 +76,6 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     );
   },
 );
+
+const leftOrRightImage = (img: VNode, directionRight: boolean) =>
+  directionRight ? { rightImage: img } : { leftImage: img };

package/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -9,11 +9,13 @@ import type { TagsContent } from '../../ui-kit/Tags/TagsContent';
 import type { BenefitsListContent } from '../BenefitsList/BenefitsListContent';
 
 /** @title Доп. настройки картинки */
-interface TileImageOptions {
+export interface TileImageOptions {
   /** @title Картинка справа/текст слева */
   directionRight?: boolean;
   /** @title Выравнивание изображения */
   imageAlign?: Align;
+  /** @title Фоновое изображение */
+  isBackground?: boolean;
 }
 
 export type BaseProductTileContent = HeadlineProps &

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

@@ -1,56 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
-import { Img } from '../Img/Img';
-import { Paragraph } from '../Paragraph/Paragraph';
-import { Text } from '../Text/Text';
-import type { BenefitItemContent } from './BenefitItemContent';
-import { labelSize } from './labelSize';
+import type { ComplexBenefitContent } from './BenefitItemContent';
+import { renderBenefitIcon } from './renderBenefitIcon';
+import { renderBenefitText } from './renderBenefitText';
 
-export interface BenefitGeneralProps extends BenefitItemContent {
+export type BenefitItemProps = ComplexBenefitContent & {
   className?: string;
   benefitsVersion?: IconVersion;
-}
+};
 
-export const BenefitItem = JSX<BenefitGeneralProps>(
-  ({ className, icon, label, description, benefitsVersion = 'normal' }) => (
-    <div className={style('flex gap-s', description ? 'items-start' : 'items-center', className)}>
-      {icon ? (
-        <div className={getBenefitIconBgStyle(benefitsVersion)}>
-          <Img
-            className="w-6 h-6"
-            image={{ ...icon, iconVersion: icon.iconVersion || benefitsVersion }}
-          />
-        </div>
-      ) : null}
-      <div className="gap-0.5">
-        {label ? (
-          <Text color="text-primary-text group-data-secondary:text-white" size={labelSize}>
-            {label}
-          </Text>
-        ) : null}
-        {description ? (
-          <Paragraph
-            font="font-light"
-            size="text-m"
-            color="text-secondary-text group-data-secondary:text-white"
-          >
-            {description}
-          </Paragraph>
-        ) : null}
-      </div>
-    </div>
-  ),
-);
-
-function getBenefitIconBgStyle(benefitsVersion: IconVersion) {
-  const bgColorStyle =
-    benefitsVersion === 'normal'
-      ? 'bg-secondary-light text-primary-main'
-      : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black';
-
-  return style(
-    'w-12 h-12 min-w-12 p-2.5 box-border flex items-center justify-center rounded-icon',
-    bgColorStyle,
-  );
-}
+export const BenefitItem = JSX<BenefitItemProps>(({ className, benefitsVersion, ..._ }) => (
+  <div
+    className={style(
+      'flex gap-s',
+      'description' in _ && _.description ? 'items-start' : 'items-center',
+      className,
+    )}
+  >
+    {'icon' in _ ? renderBenefitIcon(_.icon, benefitsVersion) : null}
+    <div>{renderBenefitText(_)}</div>
+  </div>
+));

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

@@ -0,0 +1,13 @@
+import { Paragraph } from '../Paragraph/Paragraph';
+
+export const renderBenefitDescription = (description?: string, i?: number) =>
+  description ? (
+    <Paragraph
+      key={`description-${i}`}
+      font="font-light"
+      size="text-m"
+      color="text-secondary-text group-data-secondary:text-white"
+    >
+      {description}
+    </Paragraph>
+  ) : null;

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

@@ -0,0 +1,24 @@
+import type { IconVersion } from '../../model/IconVersion';
+import type { Picture } from '../../model/Picture';
+import { style } from '../../utils/style';
+import { Img } from '../Img/Img';
+
+export const renderBenefitIcon = (
+  icon: Picture | undefined,
+  benefitsVersion: IconVersion = 'normal',
+) =>
+  icon ? (
+    <div
+      className={style(
+        'w-12 h-12 min-w-12 box-border flex items-center justify-center rounded-icon',
+        benefitsVersion === 'normal'
+          ? 'bg-secondary-light text-primary-main'
+          : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black',
+      )}
+    >
+      <Img
+        className="w-6 h-6"
+        image={{ ...icon, iconVersion: icon.iconVersion || benefitsVersion }}
+      />
+    </div>
+  ) : null;

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

@@ -0,0 +1,12 @@
+import { Text } from '../Text/Text';
+
+export const renderBenefitLabel = (label?: string, i?: number) =>
+  label ? (
+    <Text
+      key={`label-${i}`}
+      color="text-primary-text group-data-secondary:text-white"
+      size="text-h6"
+    >
+      {label}
+    </Text>
+  ) : null;

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

@@ -0,0 +1,14 @@
+import { RichText } from '../RichText/RichText';
+import type { ComplexBenefitContent } from './BenefitItemContent';
+import { renderBenefitDescription } from './renderBenefitDescription';
+import { renderBenefitLabel } from './renderBenefitLabel';
+
+export const renderBenefitText = (_: ComplexBenefitContent, i?: number) =>
+  _.type === 'rte' && '__html' in _ && _.__html ? (
+    <RichText key={`rte-${i}`} {..._} />
+  ) : (
+    [
+      'label' in _ ? renderBenefitLabel(_.label, i) : null,
+      'description' in _ ? renderBenefitDescription(_.description, i) : null,
+    ]
+  );

package/src/ui-kit/BenefitsList/BenefitsList.tsx

@@ -1,35 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { deviation } from '../../utils/deviation';
-import { style } from '../../utils/style';
-import type { ComplexBenefitContent } from '../BenefitItem/BenefitItemContent';
-import type { BenefitsListContent } from './BenefitsListContent';
-import { renderBenefit } from './renderBenefit';
+import { BenefitsListProps } from './BenefitsListProps';
+import { DefaultBenefitsList } from './DefaultBenefitsList';
+import { TabularBenefitsList } from './TabularBenefitsList';
 
-interface BenefitsListProps extends BenefitsListContent {
-  className?: string;
-}
-
-const MAX_BENEFITS_LEN_DEVIATION = 16;
-
-const benefitLength = (_: ComplexBenefitContent) =>
-  _.type === 'rte'
-    ? _.__html?.length || 0
-    : Math.max(_.label?.length || 0, _.description?.length || 0);
-
-const isDistortedBenefits = (benefits: ComplexBenefitContent[]) =>
-  deviation(benefits.map(benefitLength)) > MAX_BENEFITS_LEN_DEVIATION;
-
-export const BenefitsList = JSX<BenefitsListProps>(
-  ({ className, benefitsVersion = 'normal', benefits }) =>
-    benefits?.length ? (
-      <div
-        className={style(
-          'flex gap-x-m gap-y-s',
-          isDistortedBenefits(benefits) ? 'flex-col' : 'flex-wrap',
-          className,
-        )}
-      >
-        {benefits.map(renderBenefit(benefitsVersion))}
-      </div>
-    ) : null,
+export const BenefitsList = JSX<BenefitsListProps>(({ isTabularBenefits, ...rest }) =>
+  isTabularBenefits ? <TabularBenefitsList {...rest} /> : <DefaultBenefitsList {...rest} />,
 );

package/src/ui-kit/BenefitsList/BenefitsListContent.ts

@@ -6,10 +6,12 @@ import type { ComplexBenefitContent } from '../BenefitItem/BenefitItemContent';
  */
 export interface BenefitsListContent {
   benefitsVersion?: IconVersion;
+  /** @title Табличный вид преимуществ */
+  isTabularBenefits?: boolean;
   /**
    * @title Список преимуществ
    * @minItems 2
-   * @maxItems 4
+   * @maxItems 8
    */
   benefits?: ComplexBenefitContent[];
 }

package/src/ui-kit/BenefitsList/BenefitsListProps.ts

@@ -0,0 +1,5 @@
+import type { BenefitsListContent } from './BenefitsListContent';
+
+export interface BenefitsListProps extends BenefitsListContent {
+  className?: string;
+}