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

package/src/components/TextBlock/TextBlock.tsx

@@ -44,10 +44,10 @@ export const TextBlock = JSX<TextBlockProps>(
         {iconVersion === 'big' ? renderImage(image) : null}
         <div className="py-0.5">
           {title ? (
-            <div className={`font-medium text-base mb-1 ${textBlockStyleMap.title}`}>{title}</div>
+            <div className={`text-l font-medium mb-1 ${textBlockStyleMap.title}`}>{title}</div>
           ) : null}
           {description ? (
-            <div className={`text-sm ${textBlockStyleMap.description}`}>{description}</div>
+            <div className={`text-s ${textBlockStyleMap.description}`}>{description}</div>
           ) : null}
         </div>
       </BlockWrapper>
@@ -58,7 +58,7 @@ export const TextBlock = JSX<TextBlockProps>(
 function renderIcon(className: string) {
   return (
     <div className="pt-1.5 pl-1 pr-4">
-      <div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
+      <div className={`rounded-full h-4 w-4 text-center text-xs-light ${className}`}>i</div>
     </div>
   );
 }

package/src/components/Tile/Tile.tsx

@@ -83,11 +83,6 @@ function renderList(items, version, isDotted: boolean) {
   const listVersion = version === 'primary' ? 'tile' : 'tile-white';
 
   return items?.length ? (
-    <List
-      items={items}
-      isDotted={isDotted}
-      itemClassName="text-h6 font-light mt-2"
-      version={listVersion}
-    />
+    <List items={items} isDotted={isDotted} itemClassName="text-h6 mt-2" version={listVersion} />
   ) : null;
 }

package/src/components/__snapshots__/Blocks.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Blocks Accordion should render block "Accordion" without content 1`] = `
 <section
-  class="p-[50px] font-sans bg-white text-primary-text "
+  class="p-[50px] mb-1 last:mb-0 font-sans bg-white text-primary-text "
 />
 `;
 
@@ -19,6 +19,9 @@ exports[`Blocks Bonus should render block "Bonus" without content 1`] = `
   <div
     class="container"
   >
+    <section
+      class="font-sans flex flex-col p-[50px] gap-3 bg-transparent !p-0"
+    />
     <div
       class="flex flex-wrap w-full mt-9"
     />
@@ -29,7 +32,11 @@ exports[`Blocks Bonus should render block "Bonus" without content 1`] = `
 exports[`Blocks BonusBenefitsBlock should render block "BonusBenefitsBlock" without content 1`] = `
 <section
   class="font-sans text-primary-text bg-white p-50 flex flex-col text-center "
-/>
+>
+  <section
+    class="font-sans flex flex-col p-[50px] gap-3 bg-transparent !p-0"
+  />
+</section>
 `;
 
 exports[`Blocks Calculator should render block "Calculator" without content 1`] = `
@@ -51,8 +58,11 @@ exports[`Blocks Catalog should render block "Catalog" without content 1`] = `
 <section
   class="bg-white relative font-sans p-12 overflow-hidden text-center "
 >
+  <section
+    class="font-sans flex flex-col p-[50px] gap-3 bg-transparent !p-0"
+  />
   <div
-    class="flex duration-1000 gap-3.5"
+    class="flex duration-1000 gap-3.5 mt-8"
     role="list"
     style="transform: translateX(-0px);"
   />
@@ -112,17 +122,17 @@ exports[`Blocks ExchangeRateTile should render block "ExchangeRateTile" without
                 <thead>
                   <tr>
                     <th
-                      class="text-left text-m text-secondary-text"
+                      class="text-left text-m-light text-secondary-text"
                     >
                       Валюта
                     </th>
                     <th
-                      class="text-left text-m text-secondary-text pl-11"
+                      class="text-left text-m-light text-secondary-text pl-11"
                     >
                       Купить
                     </th>
                     <th
-                      class="text-left text-m text-secondary-text pl-11"
+                      class="text-left text-m-light text-secondary-text pl-11"
                     >
                       Продать
                     </th>
@@ -241,7 +251,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
       </div>
       <input
         class="h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none pr-[6%] border-main-divider focus:border-primary-text font-light h-full"
+              outline-none pr-[6%] border-main-divider focus:border-primary-text h-full"
         id="search-bar-input"
         name="search-bar-input"
         type="text"
@@ -252,7 +262,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
         role="button"
       >
         <div
-          class="font-normal text-sm px-9 py-[9px]"
+          class="text-s px-9 py-2.5"
         >
           Найти
         </div>
@@ -280,7 +290,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
           >
             <div>
               <div
-                class="text-xs text-left"
+                class="text-xs-light text-left"
               />
               <div
                 class="text-left text-l"
@@ -330,7 +340,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
       class="pt-5"
     >
       <span
-        class="font-light text-xs text-secondary-text"
+        class="text-xs-light text-secondary-text"
       >
         © 2000-2022 АО «Россельхозбанк» Генеральная лицензия Банка России № 3349 от 12.08.2015 г.
       </span>
@@ -347,11 +357,11 @@ exports[`Blocks Gallery should render block "Gallery" without content 1`] = `
     <div
       class="absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent"
     />
-    <div
-      class="flex flex-col items-center mb-8"
+    <section
+      class="font-sans flex flex-col p-[50px] gap-4 bg-transparent !p-0"
     />
     <div
-      class="flex justify-center duration-1000"
+      class="flex mt-8 justify-center duration-1000"
       role="list"
       style="transform: translateX(-0px);"
     />
@@ -370,11 +380,8 @@ exports[`Blocks GracePeriod should render block "GracePeriod" without content 1`
 <section
   class="font-sans bg-white p-[50px] "
 >
-  <h3
-    class="font-sans m-0 text-h3 text-center"
-  />
-  <div
-    class="text-l-light-md text-center mt-3"
+  <section
+    class="font-sans flex flex-col p-[50px] gap-3 bg-transparent !p-0"
   />
 </section>
 `;
@@ -435,7 +442,7 @@ exports[`Blocks Header should render block "Header" without content 1`] = `
           rel="noopener noreferrer"
         >
           <span
-            class="text-primary-text hover:text-primary-main font-sans font-light text-sm"
+            class="text-primary-text hover:text-primary-main font-sans text-s-light"
           >
             Москва
           </span>
@@ -447,7 +454,7 @@ exports[`Blocks Header should render block "Header" without content 1`] = `
           rel="noopener noreferrer"
         >
           <span
-            class="text-primary-text hover:text-primary-main font-sans font-light text-sm"
+            class="text-primary-text hover:text-primary-main font-sans text-s-light"
           >
             Офисы и банкоматы
           </span>
@@ -562,11 +569,11 @@ exports[`Blocks MiniGallery should render block "MiniGallery" without content 1`
     <div
       class="absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent"
     />
-    <div
-      class="flex flex-col items-center mb-8"
+    <section
+      class="font-sans flex flex-col p-[50px] gap-4 bg-transparent !p-0"
     />
     <div
-      class="flex justify-center duration-1000"
+      class="flex mt-8 justify-center duration-1000"
       role="list"
       style="transform: translateX(-0px);"
     />
@@ -583,13 +590,13 @@ exports[`Blocks MiniGallery should render block "MiniGallery" without content 1`
 
 exports[`Blocks MobileAppTile should render block "MobileAppTile" without content 1`] = `
 <section
-  class="flex justify-between font-sans p-9 box-border relative
-        pr-[9.4rem] min-h-[360px]
+  class="flex justify-between font-sans p-9 box-border relative min-h-[320px]
+        min-h-[360px]
         bg-white text-primary-text
         "
 >
   <div
-    class="font-sans flex flex-col grow h-full items-start "
+    class="font-sans flex flex-col grow h-full items-start z-[1]"
   >
     <h3
       class="font-sans m-0 text-h4 whitespace-pre-wrap max-w-[509px] mb-6
@@ -608,7 +615,7 @@ exports[`Blocks MobileAppTile should render block "MobileAppTile" without conten
             class="flex flex-1 items-center"
           >
             <span
-              class="text-m text-secondary-text"
+              class="text-m-light text-secondary-text"
             >
               Наведите камеру телефона на QR-код и скачайте приложение
             </span>
@@ -625,7 +632,7 @@ exports[`Blocks Navigation should render block "Navigation" without content 1`]
   class="font-sans text-primary-text rounded-[40px] flex items-center justify-between "
 >
   <h2
-    class="font-medium text-xl-light m-0"
+    class="text-xl font-medium m-0"
   />
 </section>
 `;
@@ -669,7 +676,7 @@ exports[`Blocks Placeholder should render block "Placeholder" without content 1`
     </div>
   </section>
   <figure
-    class="m-0 min-w-[600px]"
+    class="m-0 min-w-[80%]"
   >
     <div
       class="h-4 mt-2 bg-secondary-light"
@@ -836,12 +843,12 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
         >
           <div>
             <span
-              class="block font-light text-m mb-2"
+              class="block text-m-light mb-2"
             >
               Город
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-m-sm w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
@@ -864,12 +871,12 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
         >
           <div>
             <span
-              class="block font-light text-m mb-2"
+              class="block text-m-light mb-2"
             >
               Отделение
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-m-sm w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
@@ -898,7 +905,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
         class="mb-6"
       >
         <span
-          class="block font-light text-m mb-[3px]"
+          class="block text-m-light mb-[3px]"
         >
           Срок аренды
         </span>
@@ -929,12 +936,12 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
             class="flex justify-between my-3"
           >
             <span
-              class="text-sm leading-[14px] text-secondary-text pl-4"
+              class="text-s leading-[14px] text-secondary-text pl-4"
             >
               От 1 дня
             </span>
             <span
-              class="text-sm leading-[14px] text-secondary-text pl-4"
+              class="text-s leading-[14px] text-secondary-text pl-4"
             >
               До 365 дней
             </span>
@@ -949,12 +956,12 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
         >
           <div>
             <span
-              class="block font-light text-m mb-2"
+              class="block text-m-light mb-2"
             >
               Размер ячейки
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-m-sm w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
@@ -983,12 +990,12 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
         >
           <div>
             <span
-              class="block font-light text-m mb-2"
+              class="block text-m-light mb-2"
             >
               Параметры ячейки, мм (ВхШхД)
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-m-sm w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
@@ -1014,7 +1021,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
         </div>
       </div>
       <span
-        class="text-secondary-text font-light"
+        class="text-secondary-text text-l-light"
       >
         Тип договора
       </span>
@@ -1036,7 +1043,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
                 value="option1"
               />
               <span
-                class="font-sans ml-3 text-m-base cursor-pointer"
+                class="font-sans ml-3 cursor-pointer"
               >
                 Простое хранение
               </span>
@@ -1053,7 +1060,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
                 value="option2"
               />
               <span
-                class="font-sans ml-3 text-m-base cursor-pointer"
+                class="font-sans ml-3 cursor-pointer"
               >
                 Сделка с недвижимостью
               </span>
@@ -1069,7 +1076,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
           >
             <div>
               <div
-                class="text-xs text-left"
+                class="text-xs-light text-left"
               />
               <div
                 class="text-left text-l"
@@ -1091,7 +1098,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
           class="mr-11"
         >
           <span
-            class="block font-light text-m mb-1"
+            class="block text-m-light mb-1"
           >
             Аренда за
           </span>
@@ -1105,7 +1112,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
           class=""
         >
           <span
-            class="block font-light text-m mb-1"
+            class="block text-m-light mb-1"
           >
             Цена
           </span>
@@ -1138,7 +1145,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
           />
         </svg>
         <span
-          class="font-light text-white opacity-80 mt-2 inline-block"
+          class="text-s-light text-white opacity-80 mt-2 inline-block"
         >
           На рисунки изображена пачка
           <br />
@@ -1148,7 +1155,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
     </div>
   </div>
   <p
-    class="text-button font-light text-secondary-text"
+    class="text-s-light text-secondary-text"
   >
     Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег или процедуры ипотечной сделки
   </p>

package/src/icons/IconName.ts

@@ -72,6 +72,7 @@ export enum IconMap {
   SignDocsIcon = 'SignDocsIcon',
   SmallClockIcon = 'SmallClockIcon',
   SoundIcon = 'SoundIcon',
+  StateMortgageIcon = 'StateMortgageIcon',
   TelegramIcon = 'TelegramIcon',
   UnionPayIcon = 'UnionPayIcon',
   UserTickIcon = 'UserTickIcon',
@@ -156,6 +157,7 @@ export enum IconTitleMap {
   SignDocsIcon = 'Подписанные документы',
   SmallClockIcon = 'Маленькие часы',
   SoundIcon = 'Звук',
+  StateMortgageIcon = 'StateMortgageIcon',
   TelegramIcon = 'Лого «Telegram»',
   UnionPayIcon = 'UnionPay',
   UserTickIcon = 'Пользователь',
@@ -173,7 +175,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолет', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кино', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'MasterCard', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'PackA4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Лого «Telegram»', 'UnionPay', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
+ *   'Деньги', 'Самолет', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кино', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'MasterCard', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'PackA4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'StateMortgageIcon', 'Лого «Telegram»', 'UnionPay', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
  * ]
  */
 export type IconName =
@@ -249,6 +251,7 @@ export type IconName =
   | 'SignDocsIcon'
   | 'SmallClockIcon'
   | 'SoundIcon'
+  | 'StateMortgageIcon'
   | 'TelegramIcon'
   | 'UnionPayIcon'
   | 'UserTickIcon'

package/src/icons/StateMortgageIcon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 22h22M19.781 22.01v-4.46" stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M19.802 10.89c-1.22 0-2.2.98-2.2 2.2v2.27c0 1.22.98 2.2 2.2 2.2 1.22 0 2.2-.98 2.2-2.2v-2.27c0-1.22-.98-2.2-2.2-2.2Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M2.102 6.02c0-2.01 1-3.02 2.99-3.02h6.23c1.99 0 2.98 1.01 2.98 3.02V22M2.102 22V10.01" stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.8 8.25h4.95M5.8 12h4.95" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.25 22v-3.75" stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>

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

@@ -9,7 +9,7 @@ import type { ButtonProps, ButtonWithIconProps } from './ButtonProps';
 const buttonStyleMap: Record<ButtonVersion, string> = {
   primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
   secondary:
-    'text-primary-main bg-secondary-light hover:bg-secondary-hover active:bg-secondary-active',
+    'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
   link: 'text-primary-main',
 };
 
@@ -67,7 +67,7 @@ export const Button = JSX<ButtonCommonProps>(
 
     return (
       <a
-        className={`${styleButton} inline-block cursor-pointer no-underline ${
+        className={`${styleButton} inline-block cursor-pointer no-underline focus:border focus:border-primary-focus ${
           buttonStyleMap[version] || ''
         } ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`}
         href={href}

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

@@ -14,7 +14,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {appendLeft ? appendLeft : null}
       {isWithText(props) ? (
         <div>
-          <div className="text-xs text-left">{aboveText}</div>
+          <div className="text-xs-light text-left">{aboveText}</div>
           <div className={`text-left ${aboveText ? 'text-s -mt-0.5' : 'text-l'}`}>{text}</div>
         </div>
       ) : null}

package/src/ui-kit/Button/ButtonProps.ts

@@ -23,6 +23,8 @@ export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
    * @default Кнопка
    */
   text?: string;
+  /** @title Закругленные углы */
+  rounded?: boolean;
   version?: ButtonVersion;
 }
 
@@ -37,8 +39,6 @@ export interface ButtonWithIconProps extends ButtonProps {
   appendLeft?: VNode;
   /** @hidden */
   appendRight?: VNode;
-  /** @title Закругленные углы */
-  rounded?: boolean;
   /** @hidden */
   asSVG?: boolean;
 }

package/src/ui-kit/Foldable/Foldable.tsx

@@ -75,7 +75,7 @@ const renderBlocks = (
   { blocksToHide, isActive, containerClasses }: RenderBlocksParams,
 ) => {
   const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
-  const hiddenBlocks = blocks.slice(-blocksToHide);
+  const hiddenBlocks = blocksToHide > 0 ? blocks.slice(-blocksToHide) : [];
 
   return render(
     <div>

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

@@ -4,7 +4,7 @@ import type { TopItemProps } from '../TopItem/TopItem';
 
 export type HeaderItemProps = TopItemProps;
 
-const TEXT_CLASSES = 'font-sans font-normal text-sm';
+const TEXT_CLASSES = 'font-sans text-s';
 const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
 
 export const HeaderItem = JSX<HeaderItemProps>(

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

@@ -3,6 +3,16 @@ import { ImgInner } from './ImgInner';
 
 import type { Image, ImageProps } from './ImgProps';
 
-export const Img = JSX<ImageProps<Image>>(({ className = '', image }) => {
-  return <ImgInner className={className} image={image} isMobile={true} />;
-});
+export const Img = JSX<ImageProps<Image>>(
+  ({ className = '', image, imageClassName, ...iconProps }) => {
+    return (
+      <ImgInner
+        className={className}
+        image={image}
+        imageClassName={imageClassName}
+        {...iconProps}
+        isMobile={true}
+      />
+    );
+  },
+);

package/src/ui-kit/Img/ImgAsPicture.tsx

@@ -12,7 +12,7 @@ const sourcesComparator = (a: Picture, b: Picture) => {
 
 export const ImgAsPicture = JSX<ImageProps<Picture>>(
   ({ className = '', image, imageClassName = '', isMobile = false }) => {
-    if (!image) {
+    if (!image || (!image?.sources && !image?.src)) {
       return null;
     }
 

package/src/ui-kit/InputRange/InputRange.tsx

@@ -52,7 +52,7 @@ export const InputRange = JSX<InputRangeProps>(
         </label>
         <div className="flex justify-between my-3">
           {items.map((item, i) => (
-            <span key={String(i)} className="text-sm leading-[14px] text-secondary-text pl-4">
+            <span key={String(i)} className="text-s leading-[14px] text-secondary-text pl-4">
               {item}
             </span>
           ))}

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

@@ -30,7 +30,7 @@ export const Logo = JSX<Partial<LogoProps>>(
       >
         <Img image={{ icon: 'Logo' }} className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`} asSVG />
         {hideTitle ? null : (
-          <span className={`${TEXT_COLOR[bgColor]} text-sm font-medium ml-2.5`}>
+          <span className={`${TEXT_COLOR[bgColor]} text-s font-medium ml-2.5`}>
             {children || 'Россельхозбанк'}
           </span>
         )}

package/src/ui-kit/Radio/Radio.tsx

@@ -12,7 +12,7 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
         checked={checked}
         onChange={onChange}
       />
-      {text ? <span className="font-sans ml-3 text-m-base cursor-pointer">{text}</span> : null}
+      {text ? <span className="font-sans ml-3 cursor-pointer">{text}</span> : null}
     </label>
   </div>
 ));

package/src/ui-kit/SearchBar/SearchBarInner.tsx

@@ -12,10 +12,8 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(
     const { term, setTerm } = context.useSearch();
 
     const LoupeIconClassName = isMobile ? 'w-[20px] h-[20px]' : 'w-[24px] h-[24px]';
-    const SearchBarLabelClassName = isMobile ? 'font-normal text-sm' : 'text-l-light';
-    const SearchBarInputClassName = isMobile
-      ? ' placeholder-transparent font-normal'
-      : 'font-light h-full';
+    const SearchBarLabelClassName = isMobile ? 'text-s' : 'text-l-light';
+    const SearchBarInputClassName = isMobile ? ' placeholder-transparent' : 'h-full';
     const inputPlaceholder = isMobile ? 'some search' : undefined;
 
     return (
@@ -63,7 +61,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(
               console.log('click');
             }}
           >
-            <div className="font-normal text-sm px-9 py-[9px]">Найти</div>
+            <div className="text-s px-9 py-2.5">Найти</div>
           </Button>
         )}
       </form>

package/src/ui-kit/Tabs/Tabs.tsx

@@ -14,7 +14,7 @@ export const Tabs = JSX<TabsProps>(({ tabs, currentTabIndex, onTabClick }) => {
 });
 
 const tabDescriptionStyle = (isActive = false) =>
-  `font-light text-xs ${isActive ? '' : 'text-secondary-text'}`;
+  `text-xs-light ${isActive ? '' : 'text-secondary-text'}`;
 
 const renderTab =
   (currentTabIndex: number, onTabClick: TabClickHandler) => (tab: Tab, index: number) => {
@@ -32,7 +32,7 @@ const renderTab =
       >
         {tab?.icon ? renderIcon(tab, isActive) : null}
         <div>
-          {tab?.title ? <h3 className="font-medium m-0 text-base">{tab?.title}</h3> : null}
+          {tab?.title ? <h3 className="m-0 text-l font-medium">{tab?.title}</h3> : null}
           {tab?.description ? (
             <span className={tabDescriptionStyle(isActive)}>{tab?.description}</span>
           ) : null}

package/src/ui-kit/TopItem/TopItem.tsx

@@ -15,7 +15,7 @@ export interface TopItemProps extends TopItemContent {
   dataItemName?: string;
 }
 
-const TEXT_CLASSES = 'font-sans font-light text-sm';
+const TEXT_CLASSES = 'font-sans text-s-light';
 const LINK_CLASSES = 'inline-block border border-solid bg-transparent text-center no-underline';
 
 export const TopItem = JSX<TopItemProps>(