@redneckz/wildless-cms-uni-blocks 0.3.95 → 0.3.96

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

@@ -9,13 +9,11 @@
         {
           "name": "Август",
           "image": {
-            "src": "calendar/august.png",
             "format": "webp",
             "size": {
               "width": 210,
               "height": 190
-            },
-            "alt": "Пример использования «Карты для покупок в рассрочку»"
+            }
           }
         }
       ]
@@ -27,25 +25,21 @@
         {
           "name": "Сентябрь",
           "image": {
-            "src": "calendar/september.png",
             "format": "webp",
             "size": {
               "width": 210,
               "height": 190
-            },
-            "alt": "Пример использования «Карты для покупок в рассрочку»"
+            }
           }
         },
         {
           "name": "Октябрь",
           "image": {
-            "src": "calendar/october.png",
             "format": "webp",
             "size": {
               "width": 210,
               "height": 190
-            },
-            "alt": "Пример использования «Карты для покупок в рассрочку»"
+            }
           }
         }
       ]
@@ -57,13 +51,11 @@
         {
           "name": "Ноябрь",
           "image": {
-            "src": "calendar/november.png",
             "format": "webp",
             "size": {
               "width": 210,
               "height": 190
-            },
-            "alt": "Пример использования «Карты для покупок в рассрочку»"
+            }
           }
         }
       ]
@@ -75,13 +67,11 @@
         {
           "name": "Декабрь",
           "image": {
-            "src": "calendar/december.png",
             "format": "webp",
             "size": {
               "width": 210,
               "height": 190
-            },
-            "alt": "Пример использования «Карты для покупок в рассрочку»"
+            }
           }
         }
       ]

package/mobile/src/components/GracePeriod/GracePeriod.tsx

@@ -3,17 +3,27 @@ import type { UniBlockProps } from '../../types';
 import type { GracePeriodContent } from './GracePeriodContent';
 
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { Headline } from '../Headline/Headline';
 
 export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
 
 export const GracePeriod = JSX<GracePeriodProps>(
-  ({ className = '', title, description, calendar, ...rest }) => {
+  ({ context, className = '', title, description, calendar, ...rest }) => {
     return (
-      <BlockWrapper className={`font-sans bg-white p-[50px] ${className}`} {...rest}>
-        <Heading headingType="h3" className="text-center" title={title} />
-        <div className="text-l-light-md text-center mt-3">{description}</div>
+      <BlockWrapper
+        className={`font-sans bg-white p-[50px] ${className}`}
+        context={context}
+        {...rest}
+      >
+        <Headline
+          context={context}
+          className="!p-0"
+          title={title}
+          description={description}
+          headlineVersion="M"
+          align="center"
+        />
         {calendar ? renderCalendar(calendar) : null}
       </BlockWrapper>
     );
@@ -38,7 +48,7 @@ const renderCalendar = (calendar) => {
 
   return (
     <div className="w-full flex flex-col justify-center mt-[54px]">
-      <div className="flex w-full mb-3 font-light text-h6 text-center">
+      <div className="flex w-full mb-3 text-h6 text-center">
         {mappedCalendar.map((_) => renderMonthNames(_, colSize))}
       </div>
       <div className="flex w-full">
@@ -49,7 +59,7 @@ const renderCalendar = (calendar) => {
             style={{ flexBasis: _.flexBasis }}
           >
             <div className="flex">{renderMonthImages(_)}</div>
-            <div className="font-light text-sm text-primary-text mt-3">
+            <div className="text-s-light text-primary-text mt-3">
               <span>{_.text}</span>&thinsp;
               <span className="text-primary-main">{_.greenText}</span>
             </div>

package/mobile/src/components/GroupBlock/GroupBlockTabs.tsx

@@ -19,7 +19,7 @@ export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
   );
 });
 
-const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2';
+const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs-light ml-2';
 
 const renderTab =
   ({ currentTag, isShowCounter, onTabClick }: GroupBlockTabsProps) =>
@@ -28,7 +28,7 @@ const renderTab =
 
     const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
 
-    const tabText = `text-m ${
+    const tabText = `text-m-light ${
       isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main'
     }`;
     const counterBlockStyle = `${badgeStyle}

package/mobile/src/components/Header/Header.tsx

@@ -1,16 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { TopItemProps } from '../../ui-kit/TopItem/TopItem';
+import type { HeaderContent } from './HeaderContent';
 import { useLink } from '../../hooks/useLink';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import { useSitemap } from '../../services/sitemap/useSitemap';
-import type { UniBlockProps } from '../../types';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
-import type { TopItemProps } from '../../ui-kit/TopItem/TopItem';
 import { getAccordionItems } from '../../utils/getAccordionItems';
 import { Accordion } from '../Accordion/Accordion';
 import { HeaderBurger } from './HeaderBurger';
-import type { HeaderContent } from './HeaderContent';
 import { HeaderTop } from './HeaderTop';
 
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
@@ -68,5 +68,5 @@ export const Header = JSX<HeaderProps>(
 );
 
 const renderSubItem = (item: TopItemProps, i: number) => (
-  <HeaderItem key={String(i)} className="mr-8 whitespace-nowrap text-sm" {...item} />
+  <HeaderItem key={String(i)} className="mr-8 whitespace-nowrap text-s" {...item} />
 );

package/mobile/src/components/Header/HeaderBurger.tsx

@@ -27,7 +27,7 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
         </button>
         <button
           onClick={getCity}
-          className="flex items-center text-sm text-secondary-text p-0 mb-4 bg-transparent cursor-pointer"
+          className="flex items-center text-s text-secondary-text p-0 mb-4 bg-transparent cursor-pointer"
         >
           <Img
             image="GeolocationIcon"
@@ -50,11 +50,11 @@ const renderBurgerSubMenuItem = (menu: DispositionItem, i: number) => {
   const { icon, href, text } = menu;
 
   return (
-    <a key={`headerSubMenu-${i}`} href={href} className="flex text-sm mb-4 hover:text-primary-main">
+    <a key={`headerSubMenu-${i}`} href={href} className="flex text-s mb-4 hover:text-primary-main">
       {icon ? (
         <Img className="text-primary-main pr-1" image={icon} width="24" height="24" asSVG />
       ) : null}
-      <span className="pl-0.5 font-medium">{text}</span>
+      <span className="font-medium pl-0.5">{text}</span>
     </a>
   );
 };

package/mobile/src/components/Header/HeaderTop.tsx

@@ -17,18 +17,18 @@ export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
       >
         <Img
           image={{ icon: 'BurgerIcon', iconVersion: bgColor === 'bg-white' ? 'black' : 'white' }}
-          className="text-primary-text"
+          className="text-primary-text w-6 h-6"
           width="24"
           height="24"
           asSVG
         />
       </button>
-      <Logo bgColor={bgColor} />
+      <Logo className="mr-8" bgColor={bgColor} />
     </div>
     <button
       className={`${
         bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'
-      } text-sm  border-0 bg-transparent cursor-pointer`}
+      } text-s border-0 bg-transparent cursor-pointer`}
     >
       Войти
     </button>

package/mobile/src/components/Headline/Headline.tsx

@@ -29,11 +29,7 @@ export const Headline = JSX<HeadlineProps>(
           />
         ) : null}
         {description ? (
-          <p
-            className={`font-normal text-m ${STYLE_MAPS.description} ${ALIGN_TEXT[align]}            `}
-          >
-            {description}
-          </p>
+          <p className={`text-m ${STYLE_MAPS.description} ${ALIGN_TEXT[align]}`}>{description}</p>
         ) : null}
         {image?.src && (
           <div className="mt-2.5 mx-auto flex justify-center">

package/mobile/src/components/Headline/constants.ts

@@ -42,7 +42,7 @@ export const HEADLINE_BLOCK_STYLE_MAPS: Record<BlockVersionWithTransparent, Styl
 
 export const HEADLINE_VERSION: Record<HeadlineVersion, VersionStyleType> = {
   XXL: {
-    descriptionFont: 'text-h4-alt',
+    descriptionFont: 'text-h5',
     gap: 'gap-[18px]',
     headingType: 'h0', // 56
     as: 'h1',

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

@@ -76,5 +76,11 @@
         }
       ]
     }
-  ]
+  ],
+  "button": {
+    "href": "",
+    "text": "Выбрать программу",
+    "target": "_self",
+    "version": "primary"
+  }
 }

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -1,14 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
 import { InsuranceAmountBlockInner } from './InsuranceAmountBlockInner';
 
 export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent, UniBlockProps {}
 
 export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
-  ({ className = '', context, title, insuranceTabs = [], ...rest }) => {
+  ({ className = '', context, title, insuranceTabs = [], button, ...rest }) => {
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
 
     return (
@@ -39,6 +39,7 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
             context,
             className,
             insuranceTabs,
+            button,
           })}
         </div>
       </BlockWrapper>
@@ -48,6 +49,7 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
 
 const renderInsuranceGalleries = ({
   insuranceTabs,
+  button,
   context,
   className = '',
 }: InsuranceAmountBlockProps) => {
@@ -59,6 +61,7 @@ const renderInsuranceGalleries = ({
           key={String(i)}
           context={context}
           className={className}
+          button={button}
           cards={cards}
         />
       ))
@@ -78,7 +81,7 @@ function renderNavButton({ title, i, activeSlideIndex, onClick }) {
       key={String(i)}
       onClick={onClick}
       aria-label={title}
-      className={`box-border px-4 py-3 text-m ${btnClassName}`}
+      className={`box-border px-4 py-3 text-m-light ${btnClassName}`}
     >
       {title}
     </button>

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockContent.ts

@@ -1,4 +1,5 @@
 import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
  * @title Кнопка выбора программы
@@ -32,4 +33,6 @@ export interface InsuranceAmountBlockContent {
   title?: string;
   /** @title Список вкладок */
   insuranceTabs?: InsuranceAmountBlockTabs[];
+  /** @title Кнопка */
+  button?: ButtonProps;
 }

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,12 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import type { CardItem, InsuranceAmountBlockTabs } from './InsuranceAmountBlockContent';
 
-export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs, UniBlockProps {}
+export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs, UniBlockProps {
+  button?: ButtonProps;
+}
 
 type InsuranceGalleryProps = {
   tabsShift: number;
@@ -24,7 +27,7 @@ type InsuranceSlideProps = {
 };
 
 export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
-  ({ className = '', context, cards = [] }) => {
+  ({ className = '', context, cards = [], button }) => {
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
     const [tabsShift, setTabsShift] = context.useState(0);
 
@@ -64,9 +67,7 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
             <div className="absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" />
           ) : null}
         </div>
-        <Button className="w-[240px] p-4 text-center" version="primary" href={activeHref}>
-          Выбрать программу
-        </Button>
+        <Button className="w-[240px] text-center" version="primary" {...button} href={activeHref} />
       </section>
     );
   },

package/mobile/src/components/LinkList/LinkList.tsx

@@ -8,7 +8,7 @@ export interface LinkListProps extends LinkListContent, UniBlockProps {}
 export const LinkList = JSX<LinkListProps>(({ className = '', documents, ...rest }) => {
   return (
     <BlockWrapper className={`font-sans bg-white mt-[10px] ${className}`} {...rest}>
-      <ul className="flex flex-col text-sm text-secondary-text p-0">
+      <ul className="flex flex-col text-s text-secondary-text p-0">
         {documents?.length ? renderLinkListItem(documents) : null}
       </ul>
     </BlockWrapper>

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

@@ -1,7 +1,6 @@
 { 
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
   "image": {
-    "src": "icon-phone.png",
     "format": "webp",
     "size": {
       "width": 529,

package/mobile/src/components/MobileAppTile/MobileAppTile.tsx

@@ -10,14 +10,14 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
   ({ className = '', title = 'Мобильное приложение', description, href = '#' }) => {
     return (
       <div
-        className={`col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light ${className}`}
+        className={`col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light font-sans ${className}`}
       >
         {href ? (
           <div className="flex">
             <div className="flex justify-center align-middle rounded-md bg-primary-main w-[50px] h-[50px]">
               <Logo className="w-[33px]" bgColor="transparent" hideTitle />
             </div>
-            <a href={href} target="_blank" className="flex flex-col justify-center pl-3 font-sans">
+            <a href={href} target="_blank" className="flex flex-col justify-center pl-3">
               <div className="text-s font-medium mb-[3px]">{title}</div>
               <div className="text-s text-secondary-text">{description}</div>
             </a>

package/mobile/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -3,26 +3,19 @@ import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
-
-/**
- * @title QR код
- */
-export interface QRCode {
-  /** @title QR код */
-  src?: string;
-  /** @title Ссылка */
-  href?: string;
-}
+import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Мобильное приложение
  */
 export type MobileAppTileContent = HeadlineCommonProps &
+  HeadingCommonProps &
   ButtonContent &
   ListContent &
   ImageContent & {
     // TODO: description для мобильной версии
-    qr?: QRCode;
+    qr?: Picture;
     /** @title Ссылка */
     href?: string; // TODO: для мобильной версии
     version?: BlockVersion;

package/mobile/src/components/Navigation/Navigation.tsx

@@ -23,7 +23,7 @@ export const Navigation = JSX<NavigationProps>(
         }`}
         {...rest}
       >
-        <h2 className="font-medium text-xl-light m-0">{title}</h2>
+        <h2 className="text-xl font-medium m-0">{title}</h2>
         {buttons?.length ? (
           <div className="flex rounded-md overflow-hidden bg-white">
             {buttons

package/mobile/src/components/Navigation/NavigationItem.tsx

@@ -4,7 +4,7 @@ import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 export const NavigationItem = JSX<ButtonProps & { isActive: boolean }>(
   ({ className, text, onClick, href, target, isActive }) => (
     <a
-      className={`bg-inherit no-underline px-4 py-2.5 cursor-pointer rounded text-sm border border-solid hover:text-primary-main ${
+      className={`bg-inherit no-underline px-4 py-2.5 cursor-pointer rounded text-s border border-solid hover:text-primary-main ${
         className || ''
       } ${isActive ? 'border-primary-main text-primary-main' : 'border-white text-secondary-text'}`}
       onClick={onClick}

package/mobile/src/components/PictureText/PictureText.tsx

@@ -57,18 +57,12 @@ function renderBenefit(benefit: PictureTextBenefit, i: number, version: string)
       ) : null}
       <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">
         {benefit?.label ? (
-          <div
-            className={`font-medium text-xl-light m-0 ${
-              version === 'primary' ? 'text-primary-text' : ''
-            }`}
-          >
+          <div className={`text-xl m-0 ${version === 'primary' ? 'text-primary-text' : ''}`}>
             {benefit.label}
           </div>
         ) : null}
         {benefit?.description ? (
-          <div
-            className={`font-normal text-sm ${version === 'primary' ? 'text-secondary-text' : ''}`}
-          >
+          <div className={`text-s ${version === 'primary' ? 'text-secondary-text' : ''}`}>
             {benefit.description}
           </div>
         ) : null}

package/mobile/src/components/Placeholder/Placeholder.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { PlaceholderContent } from '../../components/Placeholder/PlaceholderContent';
+import type { PlaceholderContent } from './PlaceholderContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Headline } from '../Headline/Headline';
 import type { UniBlockProps } from '../../types';
@@ -30,7 +30,7 @@ export const Placeholder = JSX<PlaceholderProps>(
           description={description}
           headlineVersion={getTileHeadingType(className)}
         />
-        <figure className="m-0 min-w-[600px]">{renderShimmer()}</figure>
+        <figure className="m-0 min-w-[80%]">{renderShimmer()}</figure>
       </BlockWrapper>
     );
   },

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -96,7 +96,7 @@ function renderBenefitDescription(benefit: TextBenefit, i: number, version = 'pr
   };
 
   return (
-    <div key={String(i)} className={`text-m ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
+    <div key={String(i)} className={`text-m-light ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.description}
     </div>
   );
@@ -108,5 +108,7 @@ function renderAdditionalDescription(additionalDescription: string, version = 'p
     secondary: 'text-white',
   };
 
-  return <div className={`text-m mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>;
+  return (
+    <div className={`text-m-light mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>
+  );
 }

package/mobile/src/components/PromoTile/PromoTile.tsx

@@ -59,7 +59,7 @@ export const PromoTile = JSX<PromoTileProps>(
           }
         >
           <div className="mt-1.5">
-            {date ? <div className="text-sm mb-2">{formatDate(date)}</div> : null}
+            {date ? <div className="text-s mb-2">{formatDate(date)}</div> : null}
             <div className="text-l">{description}</div>
           </div>
         </BaseTile>

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

@@ -16,7 +16,7 @@ export interface RecommendationCardProps extends RecommendationCardTypes, UniBlo
 export const RecommendationCard = JSX<RecommendationCardProps>(
   ({ context, className = '', title, description, items, image, version, socialMedia }) => {
     const tileTitle = title ? (
-      <Heading headingType="h5" as="h3" className="font-normal mb-3.5 z-10" title={title} />
+      <Heading headingType="h5" as="h3" className="mb-3.5 z-10" title={title} />
     ) : null;
     const tileImage = image?.src ? (
       <Img className="absolute bottom-0 right-0 m-0" image={image} />
@@ -36,7 +36,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
           {description ? <Description className="mb-2" description={description} /> : null}
           {items?.length ? (
             <List
-              className="text-md font-light flex flex-col flex-1 gap-2 max-w-[236px]"
+              className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
               items={items}
               version={version}
             />

package/mobile/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -83,7 +83,7 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
           ) : null}
           <SafeDepositRentalTotal days={days} />
         </div>
-        <p className="text-button font-light text-secondary-text">
+        <p className="text-s-light text-secondary-text">
           Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег
           или процедуры ипотечной сделки
         </p>

package/mobile/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -22,7 +22,7 @@ export const SafeDepositRentalForm = ({
       {cellDimensions.length && cellOptions.length
         ? renderDimensionsOptions(cellDimensions, cellOptions, context)
         : null}
-      <span className="text-secondary-text font-light">Тип договора</span>
+      <span className="text-secondary-text text-l-light">Тип договора</span>
       <div className="flex justify-between items-center mt-5">
         {renderRadioButtons(context)}
         <Button text="Офисы на карте" version="primary" />
@@ -111,9 +111,9 @@ const renderSelect = (props: SelectProps) => {
 
   return (
     <div>
-      <span className="block font-light text-m mb-2">{label}</span>
+      <span className="block text-m-light mb-2">{label}</span>
       <Select
-        className="h-14 border border-gray p-4 rounded-md text-m-sm w-full cursor-pointer"
+        className="h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
         value={selected}
         onChange={(_) => setSelected(_)}
       >
@@ -132,7 +132,7 @@ export const renderRentalPeriod = (days, setDays) => {
 
   return (
     <div className="mb-6">
-      <span className="block font-light text-m mb-[3px]">Срок аренды</span>
+      <span className="block text-m-light mb-[3px]">Срок аренды</span>
       <InputRange min={1} max={365} value={days} items={items} onChange={setDays} />
     </div>
   );

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -19,7 +19,7 @@ export const SafeDepositRentalTotal = ({ days }: Days) => {
       <div className="bg-primary-main px-10 pt-10 pb-4 text-center">
         <Img image={{ icon: 'PackA4' }} width="290" height="257" asSVG />
 
-        <span className="font-light text-white opacity-80 mt-2 inline-block">
+        <span className="text-s-light text-white opacity-80 mt-2 inline-block">
           На рисунки изображена пачка<br></br> листов формата А4
         </span>
       </div>
@@ -30,7 +30,7 @@ export const SafeDepositRentalTotal = ({ days }: Days) => {
 const renderTotal = (label, total, className = '') => {
   return (
     <div className={className}>
-      <span className="block font-light text-m mb-1">{label}</span>
+      <span className="block text-m-light mb-1">{label}</span>
       <span className="text-h3">{total}</span>
     </div>
   );

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

@@ -2,9 +2,9 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { UniBlockProps } from '../../types';
+import type { Step, StepsBlockContent } from './StepsBlockContent';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import type { Step, StepsBlockContent } from './StepsBlockContent';
 import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
 import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
 
@@ -41,7 +41,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
           <Heading headingType="h3" className={`text-center ${styleMap.title}`} title={title} />
         ) : null}
         {description ? (
-          <p className={`text-m text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
+          <p className={`text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
             {description}
           </p>
         ) : null}
@@ -68,7 +68,7 @@ const renderStepTitle =
       <div key={String(i)}>
         <div className="flex flex-row text-center relative">
           <div className="overflow-hidden">
-            {renderIconArea(size, version)}
+            {renderIconArea(size, version)(step, i)}
             {isLastStep ? null : (
               <div
                 className={`min-h-8 h-full w-[2px] ${
@@ -81,7 +81,7 @@ const renderStepTitle =
             className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
           >
             {step.label ? (
-              <div className="font-medium text-m-title-xs m-0 text-left mb-1">{step.label}</div>
+              <div className="text-m-title-xs font-medium m-0 text-left mb-1">{step.label}</div>
             ) : null}
             {step.description ? (
               <div className={`text-s ${styleMap.description} text-left`}>{step.description}</div>

package/mobile/src/components/Tabs/renderTab.tsx

@@ -10,7 +10,7 @@ interface RenderTabProps {
 
 type OnTabClick = (tab: Tab) => void;
 
-const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2';
+const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs-light ml-2';
 
 export const renderTab =
   ({ onClick, currentTab, showCounter, page }: RenderTabProps) =>
@@ -18,7 +18,7 @@ export const renderTab =
     const isActive = currentTab === tab;
 
     const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
-    const tabText = `text-m ${
+    const tabText = `text-m-light ${
       isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main'
     }`;
     const counterBlockStyle = `${badgeStyle}