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

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

@@ -24,7 +24,6 @@ export const TariffsTable = JSX<TariffsTableProps>(
   }) => {
     const colData = getColData(columns);
     const tiles = getTiles(rowHeaders, colData);
-    const headingMargin = description ? 'mb-2' : 'mb-8';
 
     return (
       <section

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

@@ -1,23 +1,14 @@
 {
   "content": {
     "title": "Плитка",
-    "headingType": "h3",
+    "headlineVersion": "S",
     "__html": "<p>Описание</p>",
     "image": {
       "format": "webp",
       "size": {
+        "format": "webp",
         "width": 445
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 276
-          },
-          "format": "webp",
-          "alignment": "southeast"
-        }
-      ]
+      }
     },
     "isDotted": true,
     "listItemSize": "M",
@@ -29,6 +20,9 @@
       }
     ],
     "version": "primary",
-    "directionRight": true
+    "imageOptions": {
+      "directionRight": true,
+      "imageAlign": "end"
+    }
   }
 }

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/ui-kit/BenefitsList/BenefitsListProps.ts

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

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

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { deviation } from '../../utils/deviation';
+import { style } from '../../utils/style';
+import { BenefitItem } from '../BenefitItem/BenefitItem';
+import type { ComplexBenefitContent } from '../BenefitItem/BenefitItemContent';
+import type { BenefitsListProps } from './BenefitsListProps';
+
+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 DefaultBenefitsList = 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((_, i) => (
+          <BenefitItem key={String(i)} benefitsVersion={benefitsVersion} {..._} />
+        ))}
+      </div>
+    ) : null,
+);

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

@@ -0,0 +1,17 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { renderBenefitText } from '../BenefitItem/renderBenefitText';
+import type { BenefitsListProps } from './BenefitsListProps';
+
+export const TabularBenefitsList = JSX<BenefitsListProps>(({ className, benefits }) =>
+  benefits?.length ? (
+    <div
+      className={style(
+        'grid grid-cols-[max-content_1fr] auto-rows-auto items-baseline gap-x-m gap-y-xs',
+        className,
+      )}
+    >
+      {benefits.flatMap(renderBenefitText)}
+    </div>
+  ) : null,
+);

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

@@ -2,30 +2,38 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import { style } from '../../utils/style';
+import { useDebouncedEffect } from '../../utils/useDebouncedEffect';
 import { CloseButton } from '../Dialog/CloseButton';
 import { useDialogProps } from '../Dialog/useDialogProps';
 import { LinkWrapper } from '../LinkWrapper/LinkWrapper';
 import { Paragraph } from '../Paragraph/Paragraph';
 
-export interface CookiePopupProps {
+interface CookiePopupProps {
   termLink?: LinkCommonProps;
   personalDataPolicyLink?: LinkCommonProps;
 }
 
-export const COOKIE_DIALOG_ID = 'cookie';
-export const LOCAL_STORAGE_NAME = 'cookieClose';
+const COOKIE_DIALOG_ID = 'cookie';
+const DIALOG_INITIAL_DELAY = 3 * 1000;
 
 export const CookiePopup = JSX<CookiePopupProps>(({ termLink, personalDataPolicyLink }) => {
-  const { isOpened, onClose } = useDialogProps(
-    COOKIE_DIALOG_ID,
-    !globalThis.localStorage?.getItem(LOCAL_STORAGE_NAME),
+  const { isOpened, open, close } = useDialogProps(COOKIE_DIALOG_ID);
+
+  useDebouncedEffect(
+    () => {
+      if (!globalThis.localStorage?.getItem(COOKIE_DIALOG_ID)) {
+        open();
+      }
+    },
+    [],
+    DIALOG_INITIAL_DELAY,
   );
 
   const handleClose = useCallback(() => {
-    globalThis.localStorage?.setItem(LOCAL_STORAGE_NAME, 'true');
+    globalThis.localStorage?.setItem(COOKIE_DIALOG_ID, 'true');
 
-    onClose && onClose();
-  }, [onClose]);
+    close();
+  }, [close]);
 
   return isOpened ? (
     <div className="container z-40 fixed bottom-0 left-0 right-0 pointer-events-none">

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

@@ -36,7 +36,7 @@ export const Dialog = JSX<DialogProps>(({ className, isOpened, head, children, o
     >
       <div className="relative container pb-12 min-h-full">
         <div className="sticky bg-white pt-6 top-0">
-          <CloseButton className="absolute top-10 -right-12" onClick={onClose} />
+          <CloseButton className="absolute top-0 -right-12" onClick={onClose} />
           {head}
         </div>
         {children}

package/mobile/src/ui-kit/Dialog/useDialogProps.ts

@@ -7,9 +7,9 @@ import { useDialogHandlers } from './useDialogHandlers';
 
 export function useDialogProps(
   id: string,
-  initOpen = false,
-): DialogProps & DialogInitialParams & { wasOpened: boolean } {
-  const [isOpened, { setTrue: open, setFalse: close }] = useBool(initOpen);
+  isOpenedOnInit = false,
+): DialogProps & DialogInitialParams & { wasOpened: boolean; open: () => void; close: () => void } {
+  const [isOpened, { setTrue: open, setFalse: close }] = useBool(isOpenedOnInit);
   const [params, setParams] = useState<DialogInitialParams>({ id });
 
   const wasOpened = useRef(isOpened);
@@ -27,20 +27,22 @@ export function useDialogProps(
     [id],
   );
 
+  const handleClose = useCallback(() => {
+    close();
+    defaultEventBus.fire('dialog', { type: 'close' });
+  }, []);
+
   useDialogHandlers({
     onOpen: handleOpen,
     onClose: close,
   });
 
-  const handleCloseAsEventSource = useCallback(() => {
-    close();
-    defaultEventBus.fire('dialog', { type: 'close' });
-  }, []);
-
   return {
     ...params,
     isOpened,
     wasOpened: wasOpened.current,
-    onClose: handleCloseAsEventSource,
+    open,
+    close,
+    onClose: handleClose,
   };
 }

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ParagraphProps } from './ParagraphProps';
+import { style } from '../../utils/style';
 
-export const Paragraph = JSX<ParagraphProps>(({ children, ...style }) => (
-  <p className={['font-sans', ...Object.values(style)].join(' ')}>{children}</p>
+export const Paragraph = JSX<ParagraphProps>(({ children, ...styleProps }) => (
+  <p className={style('font-sans', Object.values(styleProps))}>{children}</p>
 ));