@redneckz/wildless-cms-uni-blocks 0.7.1 → 0.7.3

package/mobile/src/components/Tile/Tile.tsx

@@ -1,12 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
-import type { ListProps } from '../../ui-kit/List/ListProps';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Tags } from '../../ui-kit/Tags/Tags';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -14,12 +12,10 @@ import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { TileContent } from './TileContent';
 
-export interface TileProps extends TileContent, UniBlockProps {
-  role?: string;
-}
+export interface TileProps extends TileContent, UniBlockProps {}
 
-export const Tile = JSX<TileProps>((props) => {
-  const {
+export const Tile = JSX<TileProps>(
+  ({
     title,
     headingType = 'h3',
     description,
@@ -29,18 +25,14 @@ export const Tile = JSX<TileProps>((props) => {
     isDotted = true,
     listItemSize = 'M',
     className = '',
-    version = 'primary',
     tags,
     children,
     ...rest
-  } = props;
-  const headingClassName = version === 'primary' ? 'text-primary-text' : '';
-
-  return (
+  }) => (
     <BlockWrapper
-      className={`overflow-hidden font-sans p-9 pr-3 box-border ${className} ${
-        VersionStyleMap[version]
-      } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
+      className={`overflow-hidden p-9 pr-3 box-border ${getTileRightPadding(
+        className,
+      )} ${getTileMinHeight(className)} ${className}`}
       {...rest}
     >
       <BaseTile
@@ -50,19 +42,14 @@ export const Tile = JSX<TileProps>((props) => {
               headingType={headingType}
               as="h2"
               title={title}
-              className={`whitespace-pre-wrap max-w-[600px] ${headingClassName}`}
-            />
-          ) : null
-        }
-        buttons={
-          buttons?.length ? (
-            <ButtonSection
-              buttons={buttons.map((button) => ({ ...button, className: 'min-w-[158px]' }))}
-              className="flex mt-8 gap-3"
-              {...rest}
+              className={`whitespace-pre-wrap max-w-[600px]`}
             />
           ) : null
         }
+        buttons={renderButtonsSection(buttons, {
+          className: 'mt-8',
+          buttonClassName: 'min-w-[158px]',
+        })}
         image={image?.src ? <Img className="mt-auto ml-7" image={image} /> : null}
       >
         {description ? (
@@ -71,22 +58,15 @@ export const Tile = JSX<TileProps>((props) => {
           </div>
         ) : null}
         {children}
-        {renderList({ version, isDotted, listItemSize }, items)}
+        <List
+          className="mt-2.5"
+          itemClassName="mb-1.5"
+          items={items}
+          isDotted={isDotted}
+          listItemSize={listItemSize}
+        />
         {tags?.length ? <Tags tags={tags} className="mt-5" /> : null}
       </BaseTile>
     </BlockWrapper>
-  );
-});
-
-function renderList({ version, isDotted, listItemSize }: ListProps, items?: string[]) {
-  return items?.length ? (
-    <List
-      items={items}
-      isDotted={isDotted}
-      className="mt-2.5"
-      listItemSize={listItemSize}
-      itemClassName="mb-1.5"
-      version={version}
-    />
-  ) : null;
-}
+  ),
+);

package/mobile/src/components/VerticalLayout/VerticalLayout.tsx

@@ -1,9 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { AlignType } from '../../model/AlignType';
-import { GapStyleMap, LayoutBackgroundStyleMap } from '../../model/BlockVersion';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
+import { gapStyles } from '../HorizontalLayout/gapStyles';
 import type { VerticalLayoutContent } from './VerticalLayoutContent';
 
 export interface VerticalLayoutProps extends VerticalLayoutContent, UniBlockProps {}
@@ -25,21 +26,18 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
     options,
     ...rest
   }) => {
-    const paddingStyle = isPadding ? 'p-12' : '';
     const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
 
     return (
       <BlockWrapper
-        className={[
+        className={style(
           'flex flex-col [&>*]:max-w-full',
-          paddingStyle,
-          GapStyleMap[gap],
+          isPadding ? 'p-12' : '',
+          gapStyles[gap],
           align && alignStyle[align],
-          LayoutBackgroundStyleMap[version],
           className,
-        ]
-          .filter(Boolean)
-          .join(' ')}
+        )}
+        version={version}
         {...rest}
       >
         {renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } })}
@@ -48,6 +46,4 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
   },
 );
 
-VerticalLayout.childrenTypes = {
-  exclude: ['VerticalLayout'],
-};
+VerticalLayout.childrenTypes = [];

package/mobile/src/components/VerticalLayout/VerticalLayoutContent.ts

@@ -1,19 +1,14 @@
 import type { AlignType } from '../../model/AlignType';
-import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { ColorPalette } from '../../model/ContentPageDef';
-
-/**
- * @title Отсуп между компонентами
- * @enumNames ["Самый большой", "Очень большой", "Большой", "Средний", "Маленький", "Самый маленький", "Без отступа"]
- */
-export type GapVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS' | '';
+import type { GapVersion } from '../HorizontalLayout/HorizontalLayoutContent';
 
 /**
  * @title Вертикальный компоновщик
  */
 export interface VerticalLayoutContent {
   colorPalette?: ColorPalette;
-  version?: BlockVersionWithTransparent;
+  version?: BlockVersion;
   align?: AlignType;
   gap?: GapVersion;
   /** @title Внутренний отступ компоновщика */

package/mobile/src/components/Video/Video.tsx

@@ -1,29 +1,26 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import { getPaddings } from './getPaddings';
 import type { VideoContent } from './VideoContent';
 
 interface VideoProps extends VideoContent, UniBlockProps {}
 
-export const Video = JSX<VideoProps>((props) => {
-  const { title, src, previewImg, className = '', ...rest } = props;
-
-  return (
-    <BlockWrapper className={`bg-white ${getPaddings(className)} ${className}`} {...rest}>
-      <Headline title={title} headlineVersion="M" />
-      {src ? (
-        <video
-          className="m-auto w-full object-fill"
-          preload="metadata"
-          poster={previewImg?.src}
-          style={{ maxHeight: 524 }}
-          controls
-        >
-          <source src={src} />
-        </video>
-      ) : null}
-    </BlockWrapper>
-  );
-});
+export const Video = JSX<VideoProps>(({ className, title, src, previewImg, ...rest }) => (
+  <BlockWrapper className={style(getPaddings(className), className)} {...rest}>
+    <Headline title={title} headlineVersion="M" />
+    {src ? (
+      <video
+        className="m-auto w-full object-fill"
+        preload="metadata"
+        poster={previewImg?.src}
+        style={{ maxHeight: 524 }}
+        controls
+      >
+        <source src={src} />
+      </video>
+    ) : null}
+  </BlockWrapper>
+));

package/mobile/src/components/Video/getPaddings.ts

@@ -2,5 +2,5 @@ import { getColSpan } from '../../utils/getColSpan';
 
 const MIN_COL_SPAN = 10;
 
-export const getPaddings = (className: string) =>
+export const getPaddings = (className?: string) =>
   getColSpan(className) < MIN_COL_SPAN ? 'py-6 px-11' : 'py-12 px-32';

package/mobile/src/icons/IconName.ts

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

package/mobile/src/icons/YoutubeIcon.svg

@@ -0,0 +1,3 @@
+<svg title="Лого «Youtube»" isInverse="true" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 2.30078C0.172 2.30078 0 3.17478 0 10.0008C0 16.8268 0.172 17.7008 10 17.7008C19.828 17.7008 20 16.8268 20 10.0008C20 3.17478 19.828 2.30078 10 2.30078ZM13.205 10.3348L8.715 12.4308C8.322 12.6128 8 12.4088 8 11.9748V8.02678C8 7.59378 8.322 7.38878 8.715 7.57078L13.205 9.66678C13.598 9.85078 13.598 10.1508 13.205 10.3348Z" fill="currentColor"/>
+</svg>

package/mobile/src/model/BlockVersion.ts

@@ -1,57 +1,15 @@
-import { GapVersion } from '../components/HorizontalLayout/HorizontalLayoutContent';
-
-/**
- * @title Цвет блока
- * @enumNames ["Основная", "Второстепенная"]
- */
-export type BlockVersion = 'primary' | 'secondary';
-
 /**
- * @title Цвет блока
- * @enumNames ["Прозрачная", "Основная", "Второстепенная"]
+ * @title Тема блока
+ * @enumNames ["Основная", "Второстепенная", "Серая", "Прозрачная", "Наследуемая"]
  */
-export type BlockVersionWithTransparent = 'transparent' | 'primary' | 'secondary';
-
-/**
- * @title Цвет блока
- * @enumNames [ "Основная", "Второстепенная", "Серая"]
- */
-export type BlockVersionWithGray = 'primary' | 'secondary' | 'gray';
-
-export const VersionStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
-export const VersionAdditionalStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-secondary-text',
-  secondary: 'text-white',
-};
-
-export const VersionWithTransparentStyleMap: Record<BlockVersionWithTransparent, string> = {
-  transparent: '',
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
-export const VersionWithGrayStyleMap: Record<BlockVersionWithGray, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-  gray: 'bg-main-divider text-primary-text',
-};
+export type BlockVersion = 'primary' | 'secondary' | 'gray' | 'transparent' | '';
 
-export const GapStyleMap: Record<GapVersion, string> = {
-  XXL: 'gap-12',
-  XL: 'gap-10',
-  L: 'gap-8',
-  M: 'gap-4',
-  S: 'gap-2',
-  XS: 'gap-1',
-  '': '',
-};
+type BlockVersionAtom<A extends string> = '' | `group-data-${BlockVersion}:${A}`;
 
-export const LayoutBackgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
-  transparent: '',
-  primary: 'bg-white',
-  secondary: 'bg-primary-main',
-};
+export type BlockVersionMolecule<A extends string> =
+  | ''
+  | A
+  | BlockVersionAtom<A>
+  | `${A} ${BlockVersionAtom<A>}`
+  | `${BlockVersionAtom<A>} ${BlockVersionAtom<A>}`
+  | `${BlockVersionAtom<A>} ${BlockVersionAtom<A>} ${BlockVersionAtom<A>}`;

package/mobile/src/model/ButtonVersion.ts

@@ -1,6 +1,6 @@
 /**
- * @title Цвет кнопки
- * @enumNames ["Основная", "Второстепенная", "Белая", "Ссылка"]
+ * @title Тема кнопки
+ * @enumNames ["Основная", "Второстепенная", "Белая", "Ссылка", "Прозрачная", "Наследуемая"]
  * @default primary
  */
-export type ButtonVersion = 'primary' | 'secondary' | 'white' | 'link';
+export type ButtonVersion = 'primary' | 'secondary' | 'white' | 'link' | 'transparent' | '';

package/mobile/src/model/JSXBlock.ts

@@ -1,11 +1,13 @@
 import type { UNIComponent } from '@redneckz/uni-jsx';
 import type { BlockRendererOptions } from '../BlockRenderer/BlockRendererOptions';
 import type { SlotName } from './BlockDecorator';
+import type { BlockVersion } from './BlockVersion';
 import type { BlockDef } from './ContentPageDef';
 import type { VNode } from './VNode';
 
 export interface UniBlockProps {
   className?: string;
+  version?: BlockVersion;
   block?: BlockDef;
   options?: BlockRendererOptions;
 }

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

@@ -5,16 +5,6 @@ import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { Img } from '../Img/Img';
 import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
 
-const titleStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-primary-text',
-  secondary: 'text-white',
-};
-
-const descStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-secondary-text',
-  secondary: 'text-white',
-};
-
 export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
 
 export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
@@ -37,9 +27,13 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
         </div>
       ) : null}
       <div className="gap-0.5">
-        {label ? <div className={`text-h6 ${titleStyleMap[version]}`}>{label}</div> : null}
+        {label ? (
+          <div className="text-h6 text-primary-text group-data-secondary:text-white">{label}</div>
+        ) : null}
         {description ? (
-          <div className={`text-m-light ${descStyleMap[version]}`}>{description}</div>
+          <div className="text-m-light text-secondary-text group-data-secondary:text-white">
+            {description}
+          </div>
         ) : null}
       </div>
     </div>

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

@@ -1,16 +1,26 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../EventBus/EventBus';
+import type { BlockVersion } from '../model/BlockVersion';
 import type { UniBlockProps } from '../model/JSXBlock';
 import { useBlockIntersectionObserver } from '../services/BlockRouter/useBlockIntersectionObserver';
+import { style } from '../utils/style';
 
 interface BlockWrapperProps extends UniBlockProps {
   tag?: keyof HTMLElementTagNameMap;
   role?: string;
 }
 
+export const blockStyles: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+  gray: 'bg-main-divider text-primary-text',
+  transparent: 'bg-transparent text-primary-text',
+  '': '',
+};
+
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({ className = '', block, tag = 'section', role, children }) => {
+  ({ className = '', version = 'primary', block, tag = 'section', role, children }) => {
     const Tag: any = tag;
 
     const ref = useBlockIntersectionObserver(block);
@@ -32,7 +42,12 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
     );
 
     return isVisible ? (
-      <Tag className={className} role={role} {...(block?.anchor ? { id: block.anchor, ref } : {})}>
+      <Tag
+        className={style('group', blockStyles[version], className)}
+        {...(version ? { 'data-ver': version } : {})}
+        {...(block?.anchor ? { id: block.anchor, ref } : {})}
+        role={role}
+      >
         {children}
       </Tag>
     ) : null;

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

@@ -6,7 +6,7 @@ import type { ButtonProps } from './ButtonProps';
 export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) => (
   <Button
     rounded
-    className={`group shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${
+    className={`group/btn shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${
       disabled
         ? 'bg-secondary-light text-secondary-text'
         : 'bg-white text-primary-text hover:text-primary-main'
@@ -17,7 +17,7 @@ export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) =
     <Img
       className="w-4 h-4 min-w-4 min-h-4 rounded-full box-border"
       image={{ icon: 'ArrowLeftIcon', iconVersion: 'black' }}
-      imageClassName="group-hover:text-primary-main"
+      imageClassName="group-hover/btn:text-primary-main"
       width="16"
       height="16"
       asSVG

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

@@ -34,7 +34,7 @@ const getButtonStyle = (props: ButtonInnerProps) => {
   const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-4'}`;
 
   return [
-    'group flex items-center justify-center',
+    'group/btn flex items-center justify-center',
     isWithText(props) ? withTextStyle : 'h-12 w-12',
     rounded ? 'rounded-full' : '',
   ].join(' ');

package/mobile/src/ui-kit/Button/buttonClassNameConstants.ts

@@ -7,6 +7,8 @@ export const buttonStyleMap: Record<ButtonVersion, string> = {
   white:
     'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white active:text-primary-main',
   link: '',
+  transparent: '',
+  '': '',
 };
 
 const DisabledStyle = 'bg-main-divider text-main-disabled';
@@ -16,13 +18,17 @@ export const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   secondary: DisabledStyle,
   white: DisabledStyle,
   link: '',
+  transparent: '',
+  '': '',
 };
 
 export const buttonStyle = 'text-center font-sans select-none';
 
 export const iconStyleMap: Record<ButtonVersion, string> = {
-  primary: 'group-hover:brightness-0 group-hover:invert',
-  secondary: 'group-hover:brightness-0 group-hover:invert',
-  white: 'group-hover:brightness-0 group-hover:invert',
+  primary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
+  secondary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
+  white: 'group-hover/btn:brightness-0 group-hover/btn:invert',
   link: '',
+  transparent: '',
+  '': '',
 };

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

@@ -0,0 +1,52 @@
+import type { Picture } from '../../model/Picture';
+import { style } from '../../utils/style';
+import { Img } from '../Img/Img';
+import { Button } from './Button';
+import type { ButtonWithIconProps } from './ButtonProps';
+
+interface ButtonsSectionOptions {
+  className?: string;
+  buttonClassName?: string;
+  isVertical?: boolean;
+}
+
+export const renderButtonsSection = (
+  buttons?: (ButtonWithIconProps | undefined)[],
+  { className = '', buttonClassName, isVertical }: ButtonsSectionOptions = {},
+) =>
+  buttons?.length && buttons.some((_) => _?.text) ? (
+    <div className={style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className)}>
+      {buttons.map(renderButton(buttonClassName))}
+    </div>
+  ) : null;
+
+const renderButton =
+  (buttonClassName = '') =>
+  (button?: ButtonWithIconProps, index?: number) => {
+    const { text, icon, iconRight, version, ...rest } = button || {};
+    const iconVersion = version === 'secondary' ? 'color' : 'white';
+
+    return text ? (
+      <Button
+        key={index ? String(index) : ''}
+        className={buttonClassName}
+        appendLeft={renderButtonIcon({ ...icon, iconVersion })}
+        appendRight={renderButtonIcon({ ...iconRight, iconVersion })}
+        version={version}
+        text={text}
+        {...rest}
+      />
+    ) : null;
+  };
+
+const DEFAULT_ICON_W = 24;
+
+const renderButtonIcon = (icon: Picture) =>
+  icon?.icon || icon?.src ? (
+    <Img
+      image={icon}
+      width={String(icon?.size?.width || DEFAULT_ICON_W)}
+      height={String(DEFAULT_ICON_W)}
+      asSVG
+    />
+  ) : null;

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

@@ -14,9 +14,9 @@ const CHECK_PATHS = [
 export const Checkbox = JSX<CheckboxProps>(({ className, text, checked, isRadio, onChange }) => {
   return (
     <div className={className}>
-      <label className="flex items-center relative cursor-pointer group">
+      <label className="flex items-center relative cursor-pointer group/box">
         <input
-          className={`peer appearance-none w-5 h-5 border-solid cursor-pointer group-hover:border-primary-hover
+          className={`peer appearance-none w-5 h-5 border-solid cursor-pointer group-hover/box:border-primary-hover
         ${isRadio ? 'rounded-full border-2' : 'rounded checked:bg-primary-main border'}
         ${checked ? 'border-black' : 'border-gray'}
         checked:border-primary-main m-0`}