@redneckz/wildless-cms-uni-blocks 0.3.44 → 0.3.47

package/mobile/src/components/ProductBlock/renderBackwardButton.tsx

@@ -1,34 +1,25 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 
-const backwardBgStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-primary-main',
-  secondary: 'bg-white',
-};
-
-const backwardIconStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-white',
-  secondary: 'text-primary-text',
-};
-
-export function renderBackwardButton(text: string, version: BlockVersion, className: string) {
+export function renderBackwardButton(
+  button: ButtonWithIconProps,
+  version: BlockVersion,
+  className: string,
+) {
   return (
     <div className={`flex items-center ${className}`}>
       <Button
+        version={version}
         rounded
-        className={`w-12 h-12 min-h-12 max-h-12 flex items-center justify-center mr-3 ${backwardBgStyleMap[version]}`}
-        ariaLabel={text}
+        className="w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3"
+        ariaLabel={button?.text}
+        href={button?.href}
       >
-        <Img
-          className={`w-4 h-4 min-w-4 min-h-4 rounded-full box-border ${backwardIconStyleMap[version]}`}
-          image={{ icon: 'ArrowLeftIcon' }}
-          width="24"
-          height="24"
-          asSVG
-        />
+        <Img className="w-4 h-4" image={button?.icon || { icon: 'ArrowLeftIcon' }} asSVG />
       </Button>
-      {text ? <span className="text-m-md">{text}</span> : null}
+      {button?.text ? <span className="text-m-md font-light">{button.text}</span> : null}
     </div>
   );
 }

package/mobile/src/components/Recommendation/Recommendation.tsx

@@ -89,14 +89,14 @@ const renderNavButtons = ({
     <div>
       {showPrevButton && (
         <ArrowButton
-          className="absolute top-1/2 left-8 rotate-180 z-10 mt-6"
+          className="absolute top-1/2 left-8 z-10 mt-6"
           onClick={handlePrevClick}
           ariaLabel="Пролистать влево"
         />
       )}
       {showNextButton && (
         <ArrowButton
-          className="absolute top-1/2 right-8 z-10 mt-6"
+          className="absolute top-1/2 right-8 z-10 mt-6 rotate-180"
           onClick={handleNextClick}
           ariaLabel="Пролистать вправо"
         />

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

@@ -66,7 +66,7 @@ export const Tile = JSX<TileProps>((props) => {
       >
         {description && (
           <Description
-            className="mt-4 max-w-[600px] text-title-new-sm font-light"
+            className="max-w-[600px] text-title-new-sm font-light"
             description={description}
           />
         )}
@@ -81,7 +81,7 @@ function renderList(items, version) {
   return items?.length ? (
     <List
       items={items}
-      itemClassName="text-title-new-sm font-light mt-2.5 first:mt-0"
+      itemClassName="text-title-2xs font-light mt-2"
       version={version === 'primary' ? 'tile' : 'tile-white'}
     />
   ) : null;

package/mobile/src/icons/ArrowLeftIcon.svg

@@ -1,4 +1,4 @@
-<svg title="Стрелка 'Влево'" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg title="Стрелка" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M7 11.834L3 8.00065L7 4.16732" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
   <path d="M14 9.00195C14.5523 9.00195 15 8.55424 15 8.00195C15 7.44967 14.5523 7.00195 14 7.00195L14 9.00195ZM8 7.00195C7.44772 7.00195 7 7.44967 7 8.00195C7 8.55424 7.44772 9.00195 8 9.00195L8 7.00195ZM14 7.00195L8 7.00195L8 9.00195L14 9.00195L14 7.00195Z" fill="currentColor"/>
 </svg>

package/mobile/src/icons/IconName.ts

@@ -7,7 +7,7 @@ export enum IconMap {
 }
 
 export enum IconTitleMap {
-  ActualBalanceIcon = "Деньги", AppleIcon = "Лого «Apple»", ArrowDownIcon = "Стрелка 'Вниз'", ArrowLeftIcon = "Стрелка 'Влево'", ArrowsRewindRight = "ArrowsRewindRight", ArrowUpIcon = "ArrowUpIcon", AtmIcon = "Банкомат", BankIcon = "Банк", BurgerIcon = "Бургер", BurgerIconWhite = "Бургер (белый)", Calendar2Icon = "Календарь 2", CalendarCircleIcon = "Скруглённый календарь", CalendarIcon = "Календарь", CalendarTickIcon = "Календарь с галочкой", CalendarWhiteIcon = "Календарь белый", CardIcon = "Кред. карта", CardPosIcon = "Кред. карта под наклоном", CardTickIcon = "Кред. карта с галочкой", CardWithGemIcon = "Карта с драгоценностями", ChartSquareIcon = "Деньги внутри кошелька", ClockIcon = "Часы", CloseIcon = "Крестик", ComfortableCompIcon = "Кресло", CreditCardsIcon = "Кредитные карты", DiscountShapeIcon = "Скидка", DocIcon = "Документ", DocIconMonoColor = "Документ (одноцветный)", DocumentTextIcon = "Документ с текстом", DollarIcon = "Доллар", EarthIcon = "Земля", EmptyWalletChangeIcon = "Пустой кошелёк с возвратом", EmptyWalletIcon = "Пустой кошелёк", EmptyWalletWhiteIcon = "Пустой кошелёк (белый)", EuroIcon = "Евро", GeolocationIcon = "Геолокация", GlassIcon = "Зеркало", GlobalIcon = "Глобус", GpsIcon = "Gps", GridIcon = "Сетка", GridIconWhite = "Сетка (белая)", InterestGrowthIcon = "Диаграмма роста", InterestIcon = "Скидка", JCBIcon = "JCB", LoupeIcon = "Лупа", MasterCardIcon = "MasterCard", MinusIcon = "Минус", MirIcon = "МИР", MoneyIcon = "Деньги", MoneyInsuranceIcon = "Денежное страхование", MonitorMobileIcon = "Монитор и мобильный", NewDocIcon = "Новый документ", OfficeIcon = "Офис", OkIcon = "Лого «Одноклассники»", PassSendIcon = "Бизнес", PercentageRoundIcon = "Проценты (круг.)", PercentageSquareIcon = "Проценты", PercentageSquareWhiteIcon = "Проценты белые", PersonalCardIcon = "Персональная карта", PlayMarketIcon = "Лого «PlayMarket»", PlusIcon = "Плюс", Profile2UserIcon = "Профиль, 2 персоны", ProfileIcon = "Профиль", RoundRubleIcon = "Рубль (круг.)", SafeIcon = "Сейф", ShieldTickIcon = "Безопасность", SignDocsIcon = "Подписанные документы", SmallClockIcon = "Маленькие часы", TelegramIcon = "Лого «Telegram»", UnionPayIcon = "UnionPay", UserTickIcon = "Пользователь", VisaIcon = "Visa", VKIcon = "Лого «VK»", WalletAdd2Icon = "Пополнение карты", WalletAddIcon = "Кошелёк с плюсом", WalletIcon = "Кошелёк", WalletWithMoneyIcon = "Кошелёк с деньгами"
+  ActualBalanceIcon = "Деньги", AppleIcon = "Лого «Apple»", ArrowDownIcon = "Стрелка 'Вниз'", ArrowLeftIcon = "Стрелка", ArrowsRewindRight = "ArrowsRewindRight", ArrowUpIcon = "ArrowUpIcon", AtmIcon = "Банкомат", BankIcon = "Банк", BurgerIcon = "Бургер", BurgerIconWhite = "Бургер (белый)", Calendar2Icon = "Календарь 2", CalendarCircleIcon = "Скруглённый календарь", CalendarIcon = "Календарь", CalendarTickIcon = "Календарь с галочкой", CalendarWhiteIcon = "Календарь белый", CardIcon = "Кред. карта", CardPosIcon = "Кред. карта под наклоном", CardTickIcon = "Кред. карта с галочкой", CardWithGemIcon = "Карта с драгоценностями", ChartSquareIcon = "Деньги внутри кошелька", ClockIcon = "Часы", CloseIcon = "Крестик", ComfortableCompIcon = "Кресло", CreditCardsIcon = "Кредитные карты", DiscountShapeIcon = "Скидка", DocIcon = "Документ", DocIconMonoColor = "Документ (одноцветный)", DocumentTextIcon = "Документ с текстом", DollarIcon = "Доллар", EarthIcon = "Земля", EmptyWalletChangeIcon = "Пустой кошелёк с возвратом", EmptyWalletIcon = "Пустой кошелёк", EmptyWalletWhiteIcon = "Пустой кошелёк (белый)", EuroIcon = "Евро", GeolocationIcon = "Геолокация", GlassIcon = "Зеркало", GlobalIcon = "Глобус", GpsIcon = "Gps", GridIcon = "Сетка", GridIconWhite = "Сетка (белая)", InterestGrowthIcon = "Диаграмма роста", InterestIcon = "Скидка", JCBIcon = "JCB", LoupeIcon = "Лупа", MasterCardIcon = "MasterCard", MinusIcon = "Минус", MirIcon = "МИР", MoneyIcon = "Деньги", MoneyInsuranceIcon = "Денежное страхование", MonitorMobileIcon = "Монитор и мобильный", NewDocIcon = "Новый документ", OfficeIcon = "Офис", OkIcon = "Лого «Одноклассники»", PassSendIcon = "Бизнес", PercentageRoundIcon = "Проценты (круг.)", PercentageSquareIcon = "Проценты", PercentageSquareWhiteIcon = "Проценты белые", PersonalCardIcon = "Персональная карта", PlayMarketIcon = "Лого «PlayMarket»", PlusIcon = "Плюс", Profile2UserIcon = "Профиль, 2 персоны", ProfileIcon = "Профиль", RoundRubleIcon = "Рубль (круг.)", SafeIcon = "Сейф", ShieldTickIcon = "Безопасность", SignDocsIcon = "Подписанные документы", SmallClockIcon = "Маленькие часы", TelegramIcon = "Лого «Telegram»", UnionPayIcon = "UnionPay", UserTickIcon = "Пользователь", VisaIcon = "Visa", VKIcon = "Лого «VK»", WalletAdd2Icon = "Пополнение карты", WalletAddIcon = "Кошелёк с плюсом", WalletIcon = "Кошелёк", WalletWithMoneyIcon = "Кошелёк с деньгами"
 }
 
 /**
@@ -15,7 +15,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   "Деньги", "Лого «Apple»", "Стрелка 'Вниз'", "Стрелка 'Влево'", "ArrowsRewindRight", "ArrowUpIcon", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Gps", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
+ *   "Деньги", "Лого «Apple»", "Стрелка 'Вниз'", "Стрелка", "ArrowsRewindRight", "ArrowUpIcon", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Gps", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
  * ]
  */
 export type IconName = "" | "ActualBalanceIcon" | "AppleIcon" | "ArrowDownIcon" | "ArrowLeftIcon" | "ArrowsRewindRight" | "ArrowUpIcon" | "AtmIcon" | "BankIcon" | "BurgerIcon" | "BurgerIconWhite" | "Calendar2Icon" | "CalendarCircleIcon" | "CalendarIcon" | "CalendarTickIcon" | "CalendarWhiteIcon" | "CardIcon" | "CardPosIcon" | "CardTickIcon" | "CardWithGemIcon" | "ChartSquareIcon" | "ClockIcon" | "CloseIcon" | "ComfortableCompIcon" | "CreditCardsIcon" | "DiscountShapeIcon" | "DocIcon" | "DocIconMonoColor" | "DocumentTextIcon" | "DollarIcon" | "EarthIcon" | "EmptyWalletChangeIcon" | "EmptyWalletIcon" | "EmptyWalletWhiteIcon" | "EuroIcon" | "GeolocationIcon" | "GlassIcon" | "GlobalIcon" | "GpsIcon" | "GridIcon" | "GridIconWhite" | "InterestGrowthIcon" | "InterestIcon" | "JCBIcon" | "LoupeIcon" | "MasterCardIcon" | "MinusIcon" | "MirIcon" | "MoneyIcon" | "MoneyInsuranceIcon" | "MonitorMobileIcon" | "NewDocIcon" | "OfficeIcon" | "OkIcon" | "PassSendIcon" | "PercentageRoundIcon" | "PercentageSquareIcon" | "PercentageSquareWhiteIcon" | "PersonalCardIcon" | "PlayMarketIcon" | "PlusIcon" | "Profile2UserIcon" | "ProfileIcon" | "RoundRubleIcon" | "SafeIcon" | "ShieldTickIcon" | "SignDocsIcon" | "SmallClockIcon" | "TelegramIcon" | "UnionPayIcon" | "UserTickIcon" | "VisaIcon" | "VKIcon" | "WalletAdd2Icon" | "WalletAddIcon" | "WalletIcon" | "WalletWithMoneyIcon";

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

@@ -1,20 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Button } from './Button';
 import { ButtonProps } from './ButtonProps';
-import { SVG } from '../SVG';
-
-const ARROW_PATHS = [
-  {
-    d: 'm9 12 4-4-4-4',
-    stroke: 'currentColor',
-    strokeWidth: '2',
-    strokeLinecap: 'round',
-    fill: 'none',
-  },
-  {
-    d: 'M2 9a1 1 0 0 1 0-2v2Zm6-2a1 1 0 0 1 0 2V7ZM2 7h6v2H2V7Z',
-  },
-];
+import { Img } from '../Img/Img';
 
 export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) => (
   <Button
@@ -27,6 +14,12 @@ export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) =
     disabled={disabled}
     {...rest}
   >
-    <SVG paths={ARROW_PATHS} viewBox="0 0 16 16" fill="none" width="16" height="16" />
+    <Img
+      className="w-4 h-4 min-w-4 min-h-4 rounded-full box-border"
+      image={{ icon: 'ArrowLeftIcon' }}
+      width="16"
+      height="16"
+      asSVG
+    />
   </Button>
 ));

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

@@ -14,7 +14,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {isWithText(props) ? (
         <div>
           <div className="text-m-2xs font-light text-left">{aboveText}</div>
-          <div className="text-button text-left">{text}</div>
+          <div className="text-button-sm text-left">{text}</div>
         </div>
       ) : null}
     </div>

package/mobile/src/ui-kit/List/ListItem.tsx

@@ -15,8 +15,8 @@ const LIST_STYLE_CLASSES = {
   primary: 'rounded-full inline-block mr-3 mt-2',
   secondary: 'rounded-full inline-block mr-3 mt-2',
   gray: 'rounded-full inline-block mr-3 mt-2',
-  tile: 'rounded-full inline-block mr-4',
-  'tile-white': 'rounded-full inline-block mr-4',
+  tile: 'rounded-full inline-block mr-4 mt-3',
+  'tile-white': 'rounded-full inline-block mr-4 mt-3',
 };
 
 const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {

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

@@ -8,13 +8,14 @@ export const TableArrowScrollControl = JSX<TableArrowScrollControlProps>(
       <div>
         <div className="absolute top-7 right-7 z-10">
           <ArrowButton
+            className="mt-4 rotate-180"
             onClick={onNextClick}
             disabled={!showNextButton}
             ariaLabel="Пролистать вправо"
             data-block-control="scroll-right"
           />
           <ArrowButton
-            className="mt-4 rotate-180"
+            className="mt-4"
             onClick={onPrevClick}
             disabled={!showPrevButton}
             ariaLabel="Пролистать влево"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.44",
+  "version": "0.3.47",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Accordion/AccordionItem.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import { Img } from '../../ui-kit/Img/Img';
 import type { AccordionItemCommonProps } from './AccordionContent';
 import { AccordionItemInner } from './AccordionItemInner';
 import { useActiveHandler } from './useActiveHandler';
-import { Img } from '../../ui-kit/Img/Img';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
@@ -23,7 +23,9 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, isExpanded, block
         onClick={handleToggle}
       >
         <span className={`text-xl pr-2.5 font-medium`}>{label}</span>
-        {hasContent ? <Img image={icon} width="24" height="24" asSVG /> : null}
+        {hasContent ? (
+          <Img image={icon} className="text-primary-main" width="24" height="24" asSVG />
+        ) : null}
       </button>
       {hasContent ? (
         <AccordionItemInner isExpanded={isActive} blocks={blocks} context={context} />

package/src/components/Bonus/Bonus.tsx

@@ -30,7 +30,7 @@ export const Bonus = JSX<BonusProps>((props) => {
                       </div>
                       {_.bonusCount ? (
                         <div className="relative -bottom-3 h-auto flex items-end mt-14 shrink-0">
-                          <span className="font-serif -tracking-wider text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7">
+                          <span className="font-mohave -tracking-wider text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7">
                             {_.bonusCount}
                           </span>
                           <span className="text-[44px] bg-clip-text text-transparent bg-green-to-yellow">

package/src/components/Gallery/GalleryContent.ts

@@ -1,7 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { ListOrientation } from '../../model/ListOrientation';
 
 /**
  * @title Элемент списка
@@ -21,6 +21,16 @@ export interface GalleryCard {
   title?: string;
   /** @title Описание */
   description?: string;
+  /**
+   * @default
+   * {
+   *  format: "webp",
+   *  size: {
+   *    width: 140,
+   *    height: 140
+   *   }
+   * }
+   */
   image?: Picture;
   /** @title Кнопка */
   button?: ButtonWithIconProps;

package/src/components/Gallery/GalleryInner.tsx

@@ -39,7 +39,7 @@ export const GalleryInner = JSX<GalleryInnerProps>(
         />
         {showPrevButton && (
           <ArrowButton
-            className="absolute top-1/2 left-8 rotate-180 z-10 mt-[25px]"
+            className="absolute top-1/2 left-8 z-10 mt-[25px]"
             onClick={handlePrevClick}
             ariaLabel="Пролистать влево"
             data-block-control="scroll-left"
@@ -47,7 +47,7 @@ export const GalleryInner = JSX<GalleryInnerProps>(
         )}
         {showNextButton && (
           <ArrowButton
-            className="absolute top-1/2 right-8 z-10 mt-[25px]"
+            className="absolute top-1/2 right-8 z-10 mt-[25px] rotate-180"
             onClick={handleNextClick}
             ariaLabel="Пролистать вправо"
             data-block-control="scroll-right"

package/src/components/GracePeriod/GracePeriodContent.ts

@@ -9,6 +9,7 @@ interface Month {
 }
 
 interface CalendarItem {
+  /** @title Месяц */
   month?: Month[];
   /** @title Основной текст */
   blackText?: string;

package/src/components/LinkDocs/LinkDocsListItem.tsx

@@ -5,7 +5,7 @@ import { LinkDocsListItemBase } from './LinkDocsListItemBase';
 export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
   <LinkDocsListItemBase
     className={`flex h-full box-border ${className}`}
-    iconClassName="mr-2.5 min-w-6 min-h-6 text-primary-text"
+    iconClassName="mr-2.5 min-w-6 min-h-6"
     textClassName="self-center font-light"
     suffixClassName="text-secondary-text group-hover:text-primary-main"
     doc={doc}

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -1,8 +1,8 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
-import { ProductBlock } from './ProductBlock';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
-import type { ButtonWithIconProps, ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { ProductBlock } from './ProductBlock';
 import type { ProductBlockContent } from './ProductBlockContent';
 
 const image: Picture = {
@@ -54,9 +54,10 @@ const items = [
   'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
 ];
 
-const backwardButton: ButtonProps = {
+const backwardButton: ButtonWithIconProps = {
   href: 'https://rshb.ru',
   text: 'Все кредитные карты',
+  icon: { icon: 'ArrowLeftIcon' },
 };
 
 export const PRODUCT_BLOCK: ProductBlockContent = {
@@ -72,7 +73,7 @@ export default {
       <ProductBlock
         className="col-span-12"
         context={context}
-        title={'Потребительский кредит наличными'}
+        title="Потребительский кредит наличными"
         headingType="h2"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
@@ -86,9 +87,9 @@ export default {
       <ProductBlock
         context={context}
         className="col-span-12"
-        title={'Потребительский кредит наличными'}
+        title="Потребительский кредит наличными"
         headingType="h2"
-        version={'secondary'}
+        version="secondary"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
         buttons={[
@@ -119,7 +120,7 @@ export default {
       <ProductBlock
         className="col-span-12"
         context={context}
-        title={'Потребительский кредит наличными'}
+        title="Потребительский кредит наличными"
         headingType="h1"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}

package/src/components/ProductBlock/ProductBlock.tsx

@@ -25,19 +25,19 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
     context,
     className = '',
     breadcrumbs,
+    backwardButton,
     version = 'primary',
     anchor = null,
     ...otherProps
   } = props;
   const router = context.useRouter();
   const { handlerDecorator } = context;
-
   return (
     <section
-      className={`font-sans overflow-hidden pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap[version]} ${className}`}
+      className={`font-sans overflow-hidden pt-[50px] pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap[version]} ${className}`}
       id={anchor}
     >
-      {renderBackwardButton('Все дебетовые карты', version, 'mb-10')}
+      {backwardButton?.text ? renderBackwardButton(backwardButton, version, 'mb-10 -mt-2.5') : null}
       {breadcrumbs?.length ? (
         <div className="text-xs mb-6">
           {joinList(<span className={`mx-2 ${breadcrumbsStyleMap[version]}`}>/</span>)(

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,6 +1,6 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { ButtonContent, ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonContent, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -32,8 +32,6 @@ export type ProductBlockInnerContent = HeadingContent &
      * @hidden
      */
     textBlockClassName?: string;
-    /** @title Текст кнопки возврата */
-    backwardButton?: ButtonProps;
   };
 
 /**
@@ -42,4 +40,6 @@ export type ProductBlockInnerContent = HeadingContent &
 export interface ProductBlockContent extends ProductBlockInnerContent {
   /** @title Хлебные крошки */
   breadcrumbs?: LinkProps[];
+  /** @title Кнопка возврата */
+  backwardButton?: ButtonWithIconProps;
 }

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -1,34 +1,25 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 
-const backwardBgStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-primary-main',
-  secondary: 'bg-white',
-};
-
-const backwardIconStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-white',
-  secondary: 'text-primary-text',
-};
-
-export function renderBackwardButton(text: string, version: BlockVersion, className: string) {
+export function renderBackwardButton(
+  button: ButtonWithIconProps,
+  version: BlockVersion,
+  className: string,
+) {
   return (
     <div className={`flex items-center ${className}`}>
       <Button
+        version={version}
         rounded
-        className={`w-12 h-12 min-h-12 max-h-12 flex items-center justify-center mr-3 ${backwardBgStyleMap[version]}`}
-        ariaLabel={text}
+        className="w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3"
+        ariaLabel={button?.text}
+        href={button?.href}
       >
-        <Img
-          className={`w-4 h-4 min-w-4 min-h-4 rounded-full box-border ${backwardIconStyleMap[version]}`}
-          image={{ icon: 'ArrowLeftIcon' }}
-          width="24"
-          height="24"
-          asSVG
-        />
+        <Img className="w-4 h-4" image={button?.icon || { icon: 'ArrowLeftIcon' }} asSVG />
       </Button>
-      {text ? <span className="text-m-md">{text}</span> : null}
+      {button?.text ? <span className="text-m-md font-light">{button.text}</span> : null}
     </div>
   );
 }

package/src/components/ProductBlock/renderBenefit.tsx

@@ -20,19 +20,17 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
     <div key={String(i)} className="flex gap-4 items-center">
       {benefit.icon ? (
         <Img
-          className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border text-white ${benefitIconBgStyleMap[version]}`}
+          className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border text-primary-text ${benefitIconBgStyleMap[version]}`}
           image={benefit.icon}
           width="24"
           height="24"
           asSVG
         />
       ) : null}
-      <div className="flex gap-0.5 flex-col h-full max-w-[149px]">
-        <div className={`font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`}>
-          {benefit.label}
-        </div>
+      <div className="flex gap-0.5 flex-col h-full max-w-[149px]  min-w-[149px]">
+        <div className={`text-xl m-0 ${benefitTitleStyleMap[version]}`}>{benefit.label}</div>
         {benefit.description && (
-          <div className={`font-normal text-m-md ${benefitDescStyleMap[version]}`}>
+          <div className={`font-light text-m-md ${benefitDescStyleMap[version]}`}>
             {benefit.description}
           </div>
         )}

package/src/components/Recommendation/Recommendation.tsx

@@ -89,14 +89,14 @@ const renderNavButtons = ({
     <div>
       {showPrevButton && (
         <ArrowButton
-          className="absolute top-1/2 left-8 rotate-180 z-10 mt-6"
+          className="absolute top-1/2 left-8 z-10 mt-6"
           onClick={handlePrevClick}
           ariaLabel="Пролистать влево"
         />
       )}
       {showNextButton && (
         <ArrowButton
-          className="absolute top-1/2 right-8 z-10 mt-6"
+          className="absolute top-1/2 right-8 z-10 mt-6 rotate-180"
           onClick={handleNextClick}
           ariaLabel="Пролистать вправо"
         />

package/src/components/StepsBlock/StepsBlock.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Button } from '../../ui-kit/Button/Button';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { joinList } from '../../utils/joinList';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
@@ -24,7 +24,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
       >
         <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
         {steps?.length ? (
-          <div className={`box-border py-0.5 mb-0.5 ${title ? 'mt-9' : ''}`}>
+          <div className={`box-border ${title ? 'mt-9' : ''}`}>
             <div className="flex items-center px-[88px]">
               {joinList(
                 <div
@@ -39,7 +39,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
         ) : null}
         {button?.text ? (
           <Button
-            className="box-border mt-[43px] py-3 h-12 w-full max-w-[240px]"
+            className="box-border mt-8 py-3 h-12 w-full max-w-[240px]"
             version="primary"
             href="#"
           >

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

@@ -29,7 +29,7 @@ const image4: Picture = {
 
 export const TILE: TileContent = {
   title: 'Кредиты',
-  items: ['до 3 млн ₽', 'до 5 лет'],
+  items: ['До 3 млн ₽', 'до 5 лет'],
   buttons: [
     {
       text: 'Подробнее',

package/src/components/Tile/Tile.tsx

@@ -66,7 +66,7 @@ export const Tile = JSX<TileProps>((props) => {
       >
         {description && (
           <Description
-            className="mt-4 max-w-[600px] text-title-new-sm font-light"
+            className="max-w-[600px] text-title-new-sm font-light"
             description={description}
           />
         )}
@@ -81,7 +81,7 @@ function renderList(items, version) {
   return items?.length ? (
     <List
       items={items}
-      itemClassName="text-title-new-sm font-light mt-2.5 first:mt-0"
+      itemClassName="text-title-2xs font-light mt-2"
       version={version === 'primary' ? 'tile' : 'tile-white'}
     />
   ) : null;

package/src/icons/ArrowLeftIcon.svg

@@ -1,4 +1,4 @@
-<svg title="Стрелка 'Влево'" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg title="Стрелка" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M7 11.834L3 8.00065L7 4.16732" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
   <path d="M14 9.00195C14.5523 9.00195 15 8.55424 15 8.00195C15 7.44967 14.5523 7.00195 14 7.00195L14 9.00195ZM8 7.00195C7.44772 7.00195 7 7.44967 7 8.00195C7 8.55424 7.44772 9.00195 8 9.00195L8 7.00195ZM14 7.00195L8 7.00195L8 9.00195L14 9.00195L14 7.00195Z" fill="currentColor"/>
 </svg>

package/src/icons/IconName.ts

@@ -84,7 +84,7 @@ export enum IconTitleMap {
   ActualBalanceIcon = 'Деньги',
   AppleIcon = 'Лого «Apple»',
   ArrowDownIcon = "Стрелка 'Вниз'",
-  ArrowLeftIcon = "Стрелка 'Влево'",
+  ArrowLeftIcon = 'Стрелка',
   ArrowsRewindRight = 'ArrowsRewindRight',
   ArrowUpIcon = 'ArrowUpIcon',
   AtmIcon = 'Банкомат',
@@ -164,7 +164,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   "Деньги", "Лого «Apple»", "Стрелка 'Вниз'", "Стрелка 'Влево'", "ArrowsRewindRight", "ArrowUpIcon", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Gps", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
+ *   "Деньги", "Лого «Apple»", "Стрелка 'Вниз'", "Стрелка", "ArrowsRewindRight", "ArrowUpIcon", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Gps", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
  * ]
  */
 export type IconName =