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

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

@@ -1,49 +1,52 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { VNode } from '../../model/VNode';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
-const VISIBLE_ROWS_COUNT = 1;
+const VISIBLE_CELLS_COUNT = 1;
 
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
-  ({ className = '', title, icon, isHighlighting, button, rows = [], ...rest }) => {
-    const rowsNode = rows.map(renderCardInfo);
-    const visibleRows = rowsNode.slice(0, VISIBLE_ROWS_COUNT);
-    const hiddenRows = rowsNode.slice(VISIBLE_ROWS_COUNT);
+  ({ className = '', title, icon, isHighlighting, button, cardCells = [], ...rest }) => {
+    const cellsNode = cardCells.map(renderCardInfo);
+    const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
+    const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
 
     return (
       <BlockWrapper
-        className={`font-sans relative bg-white border border-gray min-w-[322px] p-8
+        className={`font-sans relative bg-white border border-gray min-w-[322px] p-8 flex flex-col
         ${getHitStyle(isHighlighting)}
         ${className}`}
         {...rest}
       >
         {isHighlighting ? renderHitIcon() : null}
-        {icon?.src ? <Img image={icon} /> : null}
+        {renderIconBlock(icon)}
         {title ? (
           <Heading className="text-primary-text text-center pt-2" headingType="h5" title={title} />
         ) : null}
         {button ? <Button className="w-full mt-4" {...button} /> : null}
-        {rows.length ? (
+        {cardCells.length ? (
           <Foldable
             renderFoldableSection={({ isUnfolded }) => (
               <div>
-                {visibleRows}
-                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+                {visibleCells}
+                <FoldableSection isUnfolded={isUnfolded}>{hiddenCells}</FoldableSection>
               </div>
             )}
-            renderFoldButton={rows.length > 1 ? renderFoldButton : null}
+            renderFoldButton={cardCells.length > 1 ? renderFoldButton : null}
           />
         ) : null}
       </BlockWrapper>
@@ -51,8 +54,15 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   },
 );
 
+const renderIconBlock = (icon?: Picture) => (
+  <div className="w-[267px] min-w-[267px] self-center">
+    {icon?.src ? <Img image={icon} /> : null}
+    {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+  </div>
+);
+
 const getHitStyle = (isHighlighting?: boolean): string =>
-  isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-9';
+  isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-7';
 
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button
@@ -82,8 +92,10 @@ const renderCardInfo = (cell: HeadlineCommonProps, i: number): VNode => (
 );
 
 const renderHitIcon = (): VNode => (
-  <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
+  <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
     <Icon iconVersion="black" name="HeartIcon" width="23" height="22" asSVG />
-    <div className="text-center">Хит</div>
+    <Paragraph size="text-s" font="font-normal" align="text-center" color="text-primary-text">
+      ХИТ
+    </Paragraph>
   </div>
 );

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

@@ -12,5 +12,5 @@ export type CarouselTariffsCardContent = TitleProps & {
   /** @title Кнопка */
   button?: ButtonProps;
   /** @title Ячейка */
-  rows?: HeadlineCommonProps[];
+  cardCells?: HeadlineCommonProps[];
 };

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

@@ -43,5 +43,9 @@ export type LinkDocsContent = HeadlineCommonProps & {
   orientation?: ListOrientation; // TODO: мобильный проп
   /** @title Рамка элементов (моб.) */ // TODO: мобильный проп
   hasBorder?: boolean;
+  /**
+   * @title Выравнивание
+   * @default text-center
+   */
   align?: TextAlign;
 };

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

@@ -0,0 +1,18 @@
+{
+  "content": {
+    "listType": "vertical-list"
+  },
+  "style": ["col-span-12", "h-96"],
+  "type": "SwipeListControlBlock",
+  "blocks": [
+    {
+      "type": "Headline",
+      "content": {
+        "title": "Заголовок блока",
+        "description": "Описание блока",
+        "headlineVersion": "M"
+      },
+      "style": ["col-span-12"]
+    }
+  ]
+}

package/mobile/src/components/SwipeListControlBlock/SwipeListControlBlock.tsx

@@ -0,0 +1,23 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import type { SwipeListControlBlockContent } from './SwipeListControlBlockContent';
+
+interface SwipeListControlBlockProps extends SwipeListControlBlockContent, UniBlockProps {}
+
+export const SwipeListControlBlock: JSXBlock<SwipeListControlBlockProps> =
+  JSX<SwipeListControlBlockProps>(({ gap, listType, padding, showDots, options, ...rest }) => {
+    return (
+      <BlockWrapper {...rest}>
+        <SwipeListControl gap={gap} listType={listType} padding={padding} showDots={showDots}>
+          {renderChildren({ ...rest, options })}
+        </SwipeListControl>
+      </BlockWrapper>
+    );
+  });
+
+SwipeListControlBlock.childrenTypes = {
+  exclude: ['SwipeListControlBlock'],
+};

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

@@ -0,0 +1 @@
+{}

package/mobile/src/components/SwipeListControlBlock/SwipeListControlBlockContent.ts

@@ -0,0 +1,6 @@
+import type { SwipeListControlProps } from '../../ui-kit/SwipeListControl/SwipeListControlProps';
+
+/**
+ * @title Swipe-контроллер
+ */
+export type SwipeListControlBlockContent = SwipeListControlProps;

package/mobile/src/icons/ArrowRightIcon.svg

@@ -1 +1 @@
-<svg title="Стрелка 'Вправо'" isInverse="true" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.43 5.93 20.5 12l-6.07 6.07M11.01 12h9.32M3.5 12h3.47" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Стрелка 'Вправо'" isInverse="true" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.43 5.93 20.5 12l-6.07 6.07M11.01 12h9.32M3.5 12h3.47" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/mobile/src/icons/ArrowTopRightIcon.svg

@@ -0,0 +1 @@
+<svg title="Стрелка 'Вверх-право'" isInverse="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M6.734 4.11h5.657v5.656M3.855 12.645l5-5"/></svg>

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', 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'
 }
 
 export enum IconTitleMap {
-  ActualBalanceIcon = 'Деньги', AirPlaneIcon = 'Самолёт', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowLeftIcon = 'Стрелка \'Влево\'', ArrowRightIcon = 'Стрелка \'Вправо\'', 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 = 'Добавить продукт'
 }
 
 /**
@@ -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»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
  * ]
  */
-export type IconName = '' | 'ActualBalanceIcon' | 'AirPlaneIcon' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowLeftIcon' | 'ArrowRightIcon' | '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';

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

@@ -10,7 +10,7 @@ interface BlockWrapperProps extends UniBlockProps {
 }
 
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({ className, block, tag = 'section', role, children }) => {
+  ({ className = '', block, tag = 'section', role, children }) => {
     const Tag: any = tag;
 
     const ref = useBlockIntersectionObserver(block);

package/mobile/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -2,7 +2,8 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
 import { mapChildren } from '../../utils/mapChildren';
-import type { SwipeContainerProps } from './SwipeListControlProps';
+import { style } from '../../utils/style';
+import type { SwipeContainerProps, SwipeListControlType } from './SwipeListControlProps';
 import { SwipeListItem } from './SwipeListItem';
 
 type ItemsVisibilityList = Array<IntersectionObserverEntry | undefined>;
@@ -20,6 +21,7 @@ interface SwipeListContainerProps extends SwipeContainerProps {
   snapAlign?: 'snap-start' | 'snap-center' | 'snap-end';
   onVisibleItemsChange?: (itemsVisibilityList: ItemsVisibilityList) => void;
   onVisibleIndicesChange?: (indices: number[]) => void;
+  listType?: SwipeListControlType;
 }
 
 const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]', 'min-w-[25%]'];
@@ -32,6 +34,7 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
     visibleItemCount = 0,
     gap = 0,
     padding = 0,
+    listType = 'horizontal-list',
     snapAlign = 'snap-center',
     children,
     onVisibleItemsChange,
@@ -54,25 +57,31 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
       },
       [onVisibleItemsChange, onVisibleIndicesChange],
     );
+
     const additionPadding = visibleItemCount > 0 ? gap * Number(visibleItemCount) - 1 : 0;
 
+    const isHorizontalList = listType === 'horizontal-list';
+    const containerStyle = {
+      ...(isHorizontalList ? getContainerStyle(padding, additionPadding) : {}),
+      gap: `${gap}px`,
+    };
+
     return (
       <div
-        className={`box-border overflow-auto flex horizontal-list no-scrollbar ${className}`}
-        style={{
-          ...getContainerStyle(padding, additionPadding),
-          gap: `${gap}px`,
-        }}
+        className={style('box-border overflow-auto no-scrollbar', listType, className)}
+        style={containerStyle}
         role="list"
         ref={containerRef}
       >
         {mapChildren((child, idx) => (
           <SwipeListItem
             key={String(idx)}
-            className={`${snapAlign} ${
-              visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''
-            }`}
-            style={getContainerStyle(padding / 4)}
+            className={style(
+              snapAlign,
+              visibleItemCount ? childStyleMap[visibleItemCount - 1] : '',
+              listType === 'vertical-list' ? 'h-full' : '',
+            )}
+            style={isHorizontalList ? getContainerStyle(padding / 4) : {}}
             activeIndex={activeIndex}
             idx={idx}
             observerOptions={observerOptions}

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

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import { SwipeListContainer } from './SwipeListContainer';
 import { SwipeListControlDots } from './SwipeListControlDots';
 import type { SwipeListControlProps } from './SwipeListControlProps';
@@ -15,12 +16,13 @@ const DEFAULT_PADDING = 16;
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
-    className,
+    className = '',
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
     showDots = true,
     children,
     onVisibleIndicesChange,
+    listType = 'horizontal-list',
   }) => {
     const itemCount = Array.isArray(children) ? children.length : 0;
 
@@ -31,7 +33,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     const [activeIndex] = scroll.visibleIndicesRange;
 
     return (
-      <div className={className}>
+      <div className={style(className, listType === 'vertical-list' ? 'relative h-full' : '')}>
         <SwipeListContainer
           containerRef={containerRef}
           activeIndex={activeIndex}
@@ -39,6 +41,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
           gap={gap}
           padding={padding}
           onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
+          listType={listType}
         >
           {children}
         </SwipeListContainer>
@@ -47,6 +50,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
             containerRef={containerRef}
             activeIndex={activeIndex}
             dotCount={itemCount}
+            listType={listType}
           />
         ) : null}
       </div>

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -1,15 +1,29 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { SwipeListControlType } from './SwipeListControlProps';
 
-const dotStyle = 'cursor-pointer bg-primary-main h-2 rounded-full transition-width duration-300';
+const containerStyles: Record<SwipeListControlType, string> = {
+  'horizontal-list': 'mx-auto mt-5 w-fit',
+  'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
+};
+
+const activeDotStyles: Record<SwipeListControlType, string> = {
+  'horizontal-list': 'w-6',
+  'vertical-list': 'h-6',
+};
+
+const dotStyle = 'cursor-pointer bg-primary-main rounded-full transition-width duration-300';
+
+const inactiveDotStyle = 'w-2 h-2 opacity-30';
 
 interface SwipeListControlDotsProps {
   containerRef?: { current: HTMLDivElement | null };
   activeIndex?: number;
   dotCount?: number;
+  listType?: SwipeListControlType;
 }
 
 export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
-  ({ containerRef, activeIndex, dotCount = 0 }) => {
+  ({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list' }) => {
     const handleClick = (idx: number) => {
       if (idx !== activeIndex && containerRef?.current) {
         containerRef.current.children[idx]?.scrollIntoView({
@@ -20,11 +34,13 @@ export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
     };
 
     return dotCount ? (
-      <div className="flex gap-2 mx-auto mt-5 w-fit">
+      <div className={`flex gap-2 ${containerStyles[listType]}`}>
         {new Array(dotCount).fill(null).map((_, idx: number) => (
           <div
             key={String(idx)}
-            className={`${dotStyle} ${idx === activeIndex ? 'w-6' : 'w-2 opacity-30'}`}
+            className={`${dotStyle} ${
+              idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle
+            }`}
             role="button"
             aria-hidden
             onClick={() => handleClick(idx)}

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlProps.ts

@@ -1,3 +1,9 @@
+/**
+ * @title Вид
+ * @enumNames ["Горизонтальный", "Вертикальный"]
+ */
+export type SwipeListControlType = 'horizontal-list' | 'vertical-list';
+
 /**
  * @title Контейнер
  */
@@ -15,5 +21,7 @@ export interface SwipeListControlProps extends SwipeContainerProps {
   className?: string;
   /** @title Точки-индикаторы */
   showDots?: boolean;
+  /** @hidden */
   onVisibleIndicesChange?: (indices: number[]) => void;
+  listType?: SwipeListControlType;
 }

package/mobile/src/utils/style.ts

@@ -0,0 +1,2 @@
+export const style = (...atoms: (string | null | undefined)[]): string =>
+  atoms.filter(Boolean).join(' ');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.6.49",
+  "version": "0.7.1",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -188,7 +188,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "45 kB",
+      "limit": "47 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/common.css

@@ -71,9 +71,20 @@ html {
     display: flex;
     overflow-x: scroll;
     -webkit-overflow-scrolling: touch;
+    -webkit-scroll-snap-type: x mandatory;
+    -ms-scroll-snap-type: x mandatory;
     scroll-snap-type: x mandatory;
   }
 
+  .vertical-list {
+    height: 100%;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    -webkit-scroll-snap-type: y mandatory;
+    -ms-scroll-snap-type: y mandatory;
+    scroll-snap-type: y mandatory;
+  }
+
   .gradient-color-text {
     background: linear-gradient(180deg, #42ab44 0%, #f6db7d 100%);
     -webkit-background-clip: text;

package/src/components/Blocks.ts

@@ -50,6 +50,7 @@ import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
 import { StepsBlock } from './StepsBlock/StepsBlock';
+import { SwipeListControlBlock } from './SwipeListControlBlock/SwipeListControlBlock';
 import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
@@ -109,6 +110,7 @@ export const Blocks: BlocksRegistry = {
   RollupItem,
   SafeDepositRental,
   StepsBlock,
+  SwipeListControlBlock,
   Tabs,
   TariffsTable,
   TextBlock,

package/src/components/Carousel/Carousel.ui.json

@@ -0,0 +1,8 @@
+{
+  "content": {},
+  "style": {
+    "ui:options": {
+      "minCols": 12
+    }
+  }
+}

package/src/components/CarouselCard/CarouselCard.tsx

@@ -10,20 +10,26 @@ export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {}
 const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full';
 
 const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {
-  normal: 'min-w-[1007px]',
+  normal: 'min-w-[970px]',
   mini: 'min-w-[355px]',
 };
 
 export const CarouselCard = JSX<CarouselCardProps>(
   ({ className = '', button, description, title, version = 'normal' }) => (
-    <section className={`flex pb-9 pl-12 ${CARD_WIDTH_MAP[version]} ${className}`}>
+    <section className={`flex pb-9 pl-12 border-box ${CARD_WIDTH_MAP[version]} ${className}`}>
       <div className="relative w-full">
         <div className={`${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark`} />
         <div className={`${BLOCK_CLASSES} z-10 top-6 right-8 bg-green`} />
         <div className={`${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light`} />
-        <div className="relative bg-white z-10 py-6 px-10 border border-solid border-green-light">
-          <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
-          {button ? <div className="mt-6">{renderButton({ button })}</div> : null}
+        <div className="relative bg-white z-10 p-10 border border-solid border-green-light">
+          <Headline
+            className="!p-0"
+            title={title}
+            description={description}
+            headlineVersion="L"
+            align="text-left"
+          />
+          {button ? <div className="mt-14">{renderButton({ button })}</div> : null}
         </div>
       </div>
     </section>

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -16,7 +16,7 @@ export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
       className={`font-sans border border-gray flex min-w-[536px] ${VersionStyleMap[version]} ${className}`}
       {...rest}
     >
-      <div className="w-[200px] min-w-[200px] self-end">
+      <div className="w-[200px] min-w-[200px] self-center">
         {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
         {icon?.src ? <Img image={icon} /> : null}
       </div>

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

@@ -1,13 +1,21 @@
 {
-  "title": "Заголовок",
+  "title": "Заголовок карточки",
   "button": {
     "href": "",
     "text": "Кнопка",
     "target": "_self",
-    "version": "primary"
+    "version": "secondary"
+  },
+  "icon": {
+    "icon": "",
+    "format": "webp",
+    "size": {
+      "width": 267,
+      "height": 73
+    }
   },
   "isHighlighting": false,
-  "rows": [
+  "cardCells": [
     {
       "title": "Ячейка 1-1",
       "description": "Описание 1-1"

package/src/components/CarouselTariffsCard/CarouselTariffsCard.fixture.tsx

@@ -27,7 +27,7 @@ const buttonSecondary: ButtonProps = {
   version: 'secondary',
 };
 
-const rows = [
+const cardCells = [
   { title: 'Открытие расчетного счета', description: 'Бесплатно' },
   { title: 'Внутрибанковские платежи', description: '0 ₽' },
   { title: 'Внешние платежи, до 10 шт.', description: '0 ₽' },
@@ -43,14 +43,14 @@ export const TARIFFS_CARD: CarouselTariffsCardContent = {
   title: 'Расчётный эконом',
   icon: imageMonth,
   button: buttonSecondary,
-  rows,
+  cardCells,
 };
 
 export const TARIFFS_CARD_HIT: CarouselTariffsCardContent = {
   icon: imageMonth,
   title: 'Расчётный эконом',
   button,
-  rows,
+  cardCells,
   isHighlighting: true,
 };