@redneckz/wildless-cms-uni-blocks 0.3.84 → 0.3.85

package/src/components/StepsBlock/StepsBlock.tsx

@@ -25,6 +25,8 @@ export const StepsBlock = JSX<StepsBlockProps>(
   }) => {
     const styleMap = getStyleMap(version);
     const shortGaps = steps.length > 3;
+    const stepGap = shortGaps ? 'gap-x-3' : 'gap-x-[101px]';
+    const lineOpacity = showLines ? '' : 'opacity-0';
 
     return (
       <BlockWrapper
@@ -38,17 +40,17 @@ export const StepsBlock = JSX<StepsBlockProps>(
         ].join(' ')}
         {...rest}
       >
-        <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
+        {title ? (
+          <Heading headingType="h2" className="max-w-[47rem] text-center mb-9" title={title} />
+        ) : null}
         {steps?.length ? (
-          <div className={`box-border ${title ? 'mt-9' : ''}`}>
+          <div className="box-border">
             <div className="flex items-center px-[88px]">
-              {joinList(
-                <div
-                  className={`h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}`}
-                />,
-              )(steps.map(renderStepIcon(styleMap)))}
+              {joinList(<div className={`h-0.5 w-full bg-secondary-light ${lineOpacity}`} />)(
+                steps.map(renderStepIcon(styleMap)),
+              )}
             </div>
-            <div className={`flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`}>
+            <div className={`flex justify-between ${stepGap}`}>
               {steps.map(renderStepTitle(styleMap, Boolean(button?.text)))}
             </div>
           </div>

package/src/components/TariffsTable/TariffsTable.mobile.tsx

@@ -1,14 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type {
   TariffsTableCellData,
   TariffsTableColumn,
   TariffsTableContent,
   TariffsTableRowHeader,
 } from './TariffsTableContent';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { TariffsTableVertical } from './TariffsTableVertical';
 import { TariffsTableHorizontal } from './TariffsTableHorizontal';
+import { TariffsTableVertical } from './TariffsTableVertical';
 
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
@@ -16,17 +16,14 @@ export const TariffsTable = JSX<TariffsTableProps>(
   ({ className, context, title, description, columns, rowHeaders, orientation = 'vertical' }) => {
     const colData = getColData(columns);
     const tiles = getTiles(rowHeaders, colData);
+    const headingMargin = description ? 'mb-2' : 'mb-5';
 
     return (
       <section
         className={`px-4 py-6 bg-white font-sans text-primary-text overflow-x-hidden ${className}`}
       >
         {title ? (
-          <Heading
-            headingType="h2"
-            className={`text-center ${description ? 'mb-2' : 'mb-5'}`}
-            title={title}
-          />
+          <Heading headingType="h2" className={`text-center ${headingMargin}`} title={title} />
         ) : null}
         {description ? <div className="mb-5 text-center text-m-md">{description}</div> : null}
         {tiles?.length ? renderOrientationTable(orientation, tiles, context) : null}

package/src/components/TextBlock/TextBlock.mobile.tsx

@@ -40,6 +40,7 @@ export const TextBlock = JSX<TextBlockProps>(
     isDotted = true,
   }) => {
     const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+    const listBlockVersion = blockVersion === 'secondary' ? 'secondary' : 'gray';
 
     return (
       <section
@@ -59,7 +60,7 @@ export const TextBlock = JSX<TextBlockProps>(
               className="mt-1 text-m-md"
               items={items}
               isDotted={isDotted}
-              version={blockVersion === 'secondary' ? 'secondary' : 'gray'}
+              version={listBlockVersion}
             />
           ) : null}
         </div>

package/src/components/TextBlock/TextBlock.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { Picture } from '../../model/Picture';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
 

package/src/components/Tile/Tile.example.json

@@ -1,7 +1,6 @@
 {
   "title": "Плитка",
   "headingType": "h3",
-  "titleSize": "M",
   "description": "Описание",
   "image": {
     "format": "webp",

package/src/components/Tile/Tile.tsx

@@ -37,6 +37,8 @@ export const Tile = JSX<TileProps>((props) => {
     ...rest
   } = props;
 
+  const headingTextClassName = version === 'primary' ? 'text-primary-text' : '';
+
   return (
     <BlockWrapper
       context={context}
@@ -53,8 +55,7 @@ export const Tile = JSX<TileProps>((props) => {
               headingType={headingType}
               as="h3"
               title={title}
-              className={`whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
-              ${version === 'primary' ? 'text-primary-text' : ''}`}
+              className={`whitespace-pre-wrap max-w-[600px] mb-3 ${headingTextClassName}`}
             />
           ) : null
         }
@@ -83,12 +84,14 @@ export const Tile = JSX<TileProps>((props) => {
 });
 
 function renderList(items, version, isDotted: boolean) {
+  const listVersion = version === 'primary' ? 'tile' : 'tile-white';
+
   return items?.length ? (
     <List
       items={items}
       isDotted={isDotted}
       itemClassName="text-title-2xs font-light mt-2"
-      version={version === 'primary' ? 'tile' : 'tile-white'}
+      version={listVersion}
     />
   ) : null;
 }

package/src/content-page-repository/transformPicture.ts

@@ -35,7 +35,8 @@ async function transformImg(
 ): Promise<string> {
   const { contentDir, publicDir, format, options, size } = transformationOptions;
 
-  const imgPath = `${path.dirname(pagePath)}/${src}`;
+  const pageDir = path.dirname(pagePath);
+  const imgPath = `${pageDir}/${src}`;
   let chain = sharp(imgPath);
   if (size) {
     chain = chain.resize(size?.width, size?.height, {
@@ -70,9 +71,10 @@ function transformSrc(src: string, { format, size }: TransformationOptions & Img
     return src;
   }
 
-  const suffix = [size?.width, size?.height].filter(Boolean).join('-');
+  const fileName = path.basename(src, path.extname(src));
+  const fileSizes = [size?.width, size?.height].filter(Boolean);
+  const suffix = fileSizes.length ? `-${fileSizes.join('-')}` : '';
+  const ext = String(format) || path.extname(src);
 
-  return `${path.basename(src, path.extname(src))}${suffix ? `-${suffix}` : ''}.${
-    String(format) || path.extname(src)
-  }`;
+  return `${fileName}${suffix}.${ext}`;
 }

package/src/hooks/useExchangeRates.ts

@@ -28,6 +28,8 @@ async function fetchExchangeRates(): Promise<any | undefined> {
     return await response.json();
   } catch (err) {
     console.error(err);
+
+    return Promise.resolve();
   }
 }
 
@@ -70,19 +72,16 @@ interface FormatRatesData {
 const getCurrencyListByRate = (currencyRates: RatesData[]) =>
   currencyRates.reduce((result: FormatRatesData[], _) => {
     const currencyInfo = _['currency_first'];
-    if (!validateRate(_['rate_buy']) && !validateRate(_['rate_sell'])) {
-      return result;
-    }
-    const currencyCode = currencyInfo.code;
+    const currencyCode = currencyInfo?.code;
     if (!result.some((i) => i.code === currencyCode)) {
       result.push({
         code: currencyCode,
-        buy: Number(_.rate_buy),
-        sell: Number(_.rate_sell),
+        buy: roundRate(Number(_.rate_buy)),
+        sell: roundRate(Number(_.rate_sell)),
       });
     }
 
     return result;
   }, []);
 
-const validateRate = (value) => Math.round(value) > 0;
+const roundRate = (value) => Math.round(value * 1000) / 1000;

package/src/icons/IconName.ts

@@ -45,6 +45,7 @@ export enum IconMap {
   InterestGrowthIcon = 'InterestGrowthIcon',
   InterestIcon = 'InterestIcon',
   JCBIcon = 'JCBIcon',
+  Logo = 'Logo',
   LoupeIcon = 'LoupeIcon',
   MasterCardIcon = 'MasterCardIcon',
   MinusIcon = 'MinusIcon',
@@ -127,6 +128,7 @@ export enum IconTitleMap {
   InterestGrowthIcon = 'Диаграмма роста',
   InterestIcon = 'Скидка',
   JCBIcon = 'JCB',
+  Logo = 'Logo',
   LoupeIcon = 'Лупа',
   MasterCardIcon = 'MasterCard',
   MinusIcon = 'Минус',
@@ -170,7 +172,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолет', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кино', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Лупа', 'MasterCard', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Лого «Telegram»', 'UnionPay', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
+ *   'Деньги', 'Самолет', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кино', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'MasterCard', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Лого «Telegram»', 'UnionPay', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
  * ]
  */
 export type IconName =
@@ -218,6 +220,7 @@ export type IconName =
   | 'InterestGrowthIcon'
   | 'InterestIcon'
   | 'JCBIcon'
+  | 'Logo'
   | 'LoupeIcon'
   | 'MasterCardIcon'
   | 'MinusIcon'

package/src/icons/Logo.svg

@@ -0,0 +1,7 @@
+<svg title="Logo" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 45">
+  <path fill="currentColor" d="m13.72 25.51 4.42-4.33v-2.95l-4.42 4.32v2.96Zm0-10.98 4.42-4.35V7.41l-4.42 4.31v2.8Zm0 3.63 4.42-4.33v-2.78l-4.42 4.32v2.8ZM12.46 7.44l-.6-.56V0h-.66v6.22l-.58-.57V0h-.67v5l-.59-.58V0H8.7v6.56l4.44 4.33V0h-.67v7.44Zm1.26 14.35 4.42-4.33v-2.78L13.72 19v2.8Zm-5.03-.61 4.44 4.33v-2.96l-4.44-4.32v2.95Zm8.79-16.76-.59.58V0h-.66v5.66l-.6.56V0h-.66v6.87l-.58.57V0h-.67v10.9l4.42-4.34V0h-.66v4.42Zm-8.79 5.76 4.44 4.35v-2.8L8.69 7.4v2.77Zm0 3.65 4.44 4.33v-2.8l-4.44-4.3v2.77Zm0 3.63 4.44 4.33V19l-4.44-4.31v2.78Zm26.37 2.29H24.3a2.25 2.25 0 0 0 .36-1.22 2.32 2.32 0 0 0-2.33-2.31 2.32 2.32 0 0 0-2.31 2.31c0 .5.16.96.43 1.34a.74.74 0 0 0-.33.61c0 .26.14.49.33.62a2.32 2.32 0 0 0-.43 1.34 2.31 2.31 0 0 0 2.31 2.31 2.32 2.32 0 0 0 2.33-2.31c0-.45-.13-.87-.36-1.22h8.01v.49h-.8v.68h.8v.7h-.8v1.3h.8v-.58h1.17v.58h.79v-1.3h-.79v-.7h.79v-.68h-.79v-.5h1.58a.56.56 0 0 0 .56-.56v-.34a.57.57 0 0 0-.56-.56Zm-11.53 2.7a1.2 1.2 0 0 1-2.4 0c0-.24.08-.47.2-.66l.34-.56a.97.97 0 0 1-.34-.75c0-.3.13-.56.33-.74l-.32-.56a1.13 1.13 0 0 1-.2-.66 1.2 1.2 0 0 1 2.4 0c0 .49-.56 1.65-.56 1.65v.62c-.01.01.55 1.17.55 1.66ZM4.67 18.34v2.89c0 2.75 1.2 4.53 1.9 5.21l4.58 4.5c1.28 1.25 1.5 1.66 1.79 2.37v-3.2c0-2.84-1.44-3.94-2.19-4.67-1.73-1.68-2.89-2.8-3.82-3.73a8.98 8.98 0 0 1-2.26-3.37Zm6.08 14.24c-1.73-1.7-2.89-2.8-3.82-3.73a10 10 0 0 1-2.25-2.98v2.49a7.87 7.87 0 0 0 1.89 5.24l4.58 4.47c1.28 1.25 1.5 1.85 1.79 2.55v-3.37c0-2.85-1.45-3.95-2.19-4.67Z"/>,
+  <path fill="currentColor" d="M19.88 5.34c-.32 0-.64 0-.96.02V6.7a18.5 18.5 0 1 1 .95 36.94A18.5 18.5 0 0 1 1.35 25.17c0-5.67 2.55-10.73 6.58-14.13V9.32A19.78 19.78 0 0 0 0 25.17C0 36.12 8.9 45 19.88 45a19.85 19.85 0 0 0 19.86-19.83c0-10.95-8.9-19.83-19.87-19.83Z"/>,
+  <path fill="currentColor" d="M33.93 35.53c.3-.41.6-.85.87-1.3v-2.66h-.87v3.96Zm2.54-4.92c.12-.4.24-.78.34-1.16h-2.88v.7h.43c.77-.02 1.63-.03 2.11.46Zm-19.19-1.27h-.78v7.91h.78v-7.9Z"/>,
+  <path fill="currentColor" d="M14.7 27.83h2.58c.67 0 1.14.14 1.4.4.27.25.4.72.4 1.38v7.4c0 .66-.12 1.12-.4 1.38-.4.41-1.16.41-1.78.41l-.4-.01v3.5l.78.14v-2.88c1.2 0 1.97-.4 2.34-1.22v4.29h.26l.5-.01V29.74c0-.68.13-1.16.4-1.43.25-.27.72-.4 1.37-.4.67 0 1.65-.1 2.16.4.26.27.38.76.38 1.43v3.8h-1.77v-4.06h-.77v12.99c.26-.03.5-.07.77-.12V34.3h1.77v7.64c.36-.1.72-.21 1.08-.34v-7c0-.8.19-1.4 1-1.67l-.9-4.87h1.8l.3 5.31h.22l.3-5.31h1.88l-1.01 4.87c.84.3 1.01.81 1.01 1.66v4.53a16.63 16.63 0 0 0 1.5-1.27v-9.83h5.25l.1-.72H24.93l.17.89c-.38-.72-1.12-1.08-2.2-1.08h-.77c-1.3 0-2.1.52-2.4 1.55-.27-1.08-1.1-1.62-2.46-1.62h-3.36v14.52c.26.09.52.18.78.25V27.84Zm16.29 5.58-.85-.8.85-4.37v5.17Z"/>,
+  <path fill="currentColor" d="M27.66 40.79c.27-.14.55-.28.8-.43v-5.98h-.8v6.4Z"/>
+</svg>

package/src/model/Picture.ts

@@ -1,6 +1,8 @@
 import type { IconName } from '../icons/IconName';
 import type { IconVersion } from './IconVersion';
 
+export type ImgFormats = 'jpeg' | 'jpg' | 'png' | 'gif' | 'webp' | 'heif' | 'avif';
+
 export interface Img {
   /** @title Картинка */
   src?: string;
@@ -12,9 +14,9 @@ export interface Img {
 
 /**
  * @title Брейкпоинт
- * @enumNames ["1919px и меньше", "1439px и меньше", "1279px и меньше"]
+ * @enumNames ["Меньше 1920px", "Меньше 1440px", "Меньше 1280px"]
  */
-export type MediaQuery = '(max-width: 1919px)' | '(max-width: 1439px)' | '(max-width: 1279px)';
+export type MediaQuery = 1919 | 1439 | 1279;
 
 export interface ImgSource {
   /** @title Иконка */
@@ -23,7 +25,7 @@ export interface ImgSource {
   /** @title Картинка */
   src?: string;
   /** @title Формат */
-  format?: 'jpeg' | 'jpg' | 'png' | 'gif' | 'webp' | 'heif' | 'avif';
+  format?: ImgFormats;
   /** @hidden */
   options?: Record<string, any>;
   media?: MediaQuery;

package/src/services/sitemap/findActiveSubItem.ts

@@ -7,9 +7,8 @@ export const findActiveSubItem =
   (router: Router) =>
   <T extends LinkProps>(items: T[] = []): T | null => {
     const possibleActiveSubItems = items?.filter(isSubItemActive(router));
-    const activeSubItem = possibleActiveSubItems?.length
+
+    return possibleActiveSubItems?.length
       ? maxBy((_: T) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
       : null;
-
-    return activeSubItem;
   };

package/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -17,12 +17,15 @@ export const renderBlocksList = ({ blocks, context, className = '' }: Embeddable
 const renderBlock =
   ({ context, className }: UniBlockProps) =>
   (block: BlockDef, i: number) => {
-    const type = block?.blockListType;
-    if (!type || !(type in EmbeddableBlocks)) {
+    if (!block) {
       return null;
     }
 
-    const { style, ...rest } = block;
+    const { style, blockListType: type, ...rest } = block;
+
+    if (!type || !(type in EmbeddableBlocks)) {
+      return null;
+    }
 
     const classNameBlock = style2className(style);
     const EmbeddedBlock: JSXBlock = EmbeddableBlocks[type];

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

@@ -22,7 +22,7 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '',
 
 function renderButton({ icon, iconRight, ...button }: ButtonWithIconProps, i: number) {
   if (!button?.text) {
-    return;
+    return null;
   }
 
   return icon ? (

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { CheckboxProps } from './CheckboxProps';
 import { SVG } from '../SVG';
+import type { CheckboxProps } from './CheckboxProps';
 
 const CHECK_PATHS = [
   {
@@ -11,27 +11,32 @@ const CHECK_PATHS = [
   },
 ];
 
-export const Checkbox = JSX<CheckboxProps>(({ text, checked, onChange, className }) => (
+export const Checkbox = JSX<CheckboxProps>(({ className, text, checked, isRadio, onChange }) => (
   <div className={className}>
     <label className="flex items-center cursor-pointer relative">
       <input
-        className={`peer appearance-none w-5 h-5 border-solid border ${
-          checked ? 'border-black' : 'border-main-stroke'
-        } rounded checked:bg-primary-main checked:border-primary-main m-0`}
+        className={`peer appearance-none w-5 h-5 border-solid
+        ${isRadio ? 'rounded-full border-2' : 'rounded checked:bg-primary-main border'}
+        ${checked ? 'border-black' : 'border-main-stroke'}
+        checked:border-primary-main m-0`}
         type="checkbox"
         onChange={(e) => {
           onChange(e.target.checked);
         }}
         checked={checked}
       />
-      <SVG
-        paths={CHECK_PATHS}
-        className="hidden absolute left-1 ml-px peer-checked:block"
-        width="11"
-        height="9"
-        fill="white"
-        viewBox="0 0 11 9"
-      />
+      {isRadio ? (
+        <div className="left-1 w-3 h-3 rounded-full bg-primary-main hidden absolute peer-checked:block"></div>
+      ) : (
+        <SVG
+          paths={CHECK_PATHS}
+          className="hidden absolute left-1 ml-px peer-checked:block"
+          width="11"
+          height="9"
+          fill="white"
+          viewBox="0 0 11 9"
+        />
+      )}
       {text ? <span className="font-sans ml-3 text-m-base cursor-pointer">{text}</span> : null}
     </label>
   </div>

package/src/ui-kit/Checkbox/CheckboxProps.ts

@@ -1,6 +1,7 @@
 export interface CheckboxProps {
   text?: string;
   checked: boolean;
-  onChange: (value: boolean) => void;
   className?: string;
+  isRadio?: boolean;
+  onChange: (value: boolean) => void;
 }

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

@@ -46,19 +46,21 @@ export const Foldable = JSX<FoldableProps>(
       initialState: isUnfolded,
     });
 
+    const buttonClassName =
+      foldButtonClasses ||
+      'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer';
+    const getFoldButtonLabel = isActive ? 'Скрыть' : foldButtonLabel;
+
     return blocks ? (
       <div>
         {renderBlocks(blocks, render, { blocksToHide, isActive, containerClasses })}
         {hiddenBlocksNum ? (
           <button
-            className={
-              foldButtonClasses ||
-              'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer'
-            }
+            className={buttonClassName}
             data-theme={foldButtonDataTheme}
             onClick={handleToggle}
           >
-            <span className="pr-3">{isActive ? 'Скрыть' : foldButtonLabel}</span>
+            <span className="pr-3">{getFoldButtonLabel}</span>
             {icon ? <Icon name={icon} iconVersion="white" width="20" height="20" asSVG /> : null}
           </button>
         ) : null}

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

@@ -8,12 +8,10 @@ const TEXT_CLASSES = 'font-sans font-normal text-sm';
 const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
 
 export const HeaderItem = JSX<HeaderItemProps>(
-  ({ className, text, href, target, active, onClick, children, bgColor = 'bg-white' }) => {
+  ({ className = '', text, href, target, active, onClick, children, bgColor = 'bg-white' }) => {
     return (
       <a
-        className={`relative inline-block bg-transparent text-center no-underline ${
-          className || ''
-        }`}
+        className={`relative inline-block bg-transparent text-center no-underline ${className}`}
         href={href}
         target={target}
         onClick={onClick}
@@ -25,7 +23,7 @@ export const HeaderItem = JSX<HeaderItemProps>(
   },
 );
 
-const getTextClasses = (bgColor: BgColorVersion, active?: boolean) => {
+const getTextClasses = (bgColor: BgColorVersion, active = false) => {
   let classes = 'text-white';
   if (bgColor === 'bg-white') {
     classes = active ? 'text-primary-main' : 'text-secondary-text hover:text-primary-main';
@@ -34,7 +32,7 @@ const getTextClasses = (bgColor: BgColorVersion, active?: boolean) => {
   return `${classes} ${TEXT_CLASSES}`;
 };
 
-const getBorderClasses = (bgColor: BgColorVersion, active?: boolean) => {
+const getBorderClasses = (bgColor: BgColorVersion, active = false) => {
   if (!active) {
     return BORDER_CLASSES;
   }

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

@@ -30,7 +30,7 @@ export const HeaderItem = JSX<TopItemProps>(
   ),
 );
 
-const getTextClasses = (bgColor: BgColorVersion, active?: boolean) => {
+const getTextClasses = (bgColor: BgColorVersion, active = false) => {
   let classes = 'text-white';
   if (bgColor === 'bg-white') {
     classes = active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main';
@@ -39,7 +39,7 @@ const getTextClasses = (bgColor: BgColorVersion, active?: boolean) => {
   return `${classes} ${TEXT_CLASSES}`;
 };
 
-const getBorderClasses = (bgColor: BgColorVersion, active?: boolean) => {
+const getBorderClasses = (bgColor: BgColorVersion, active = false) => {
   if (!active) {
     return BORDER_CLASSES;
   }

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

@@ -19,7 +19,7 @@ export const Heading = JSX<HeadingProps>((props) => {
   const { className, headingType, title, as } = props;
 
   if (!headingType) {
-    return;
+    return null;
   }
 
   const Tag = as || headingType;

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

@@ -19,7 +19,7 @@ export const Heading = JSX<HeadingProps>((props) => {
   const { className = '', headingType, title, as } = props;
 
   if (!headingType) {
-    return;
+    return null;
   }
 
   const Tag = as || headingType;

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

@@ -1,75 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Icon } from '../Icon/Icon';
-import { getIconVersion } from './getIconVersion';
-import type { ImgSource, Picture } from '../../model/Picture';
+import { ImgInner } from './ImgInner';
 
 import type { Image, ImageProps } from './ImgProps';
 
-export const Img = JSX<ImageProps<Image>>(
-  ({ className = '', image, imageClassName = '', ...iconProps }) => {
-    // backwards compatibility with existing icons in usage
-    const icon = typeof image === 'string' ? image : image?.icon;
-    if (icon || icon === '') {
-      return (
-        <Icon
-          className={className}
-          imageClassName={imageClassName}
-          iconVersion={getIconVersion(image)}
-          name={icon}
-          {...iconProps}
-        />
-      );
-    }
-
-    return (
-      <ImgAsPicture
-        className={className}
-        imageClassName={imageClassName}
-        image={image as Picture}
-      />
-    );
-  },
-);
-
-export const ImgAsPicture = JSX<ImageProps<Picture>>(
-  ({ className = '', image, imageClassName = '' }) => {
-    if (!image) {
-      return null;
-    }
-
-    return (
-      <picture className={className}>
-        {image?.sources?.length
-          ? image.sources.map(({ src, format }, index) => (
-              <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
-            ))
-          : null}
-        {renderImg(image, imageClassName)}
-      </picture>
-    );
-  },
-);
-
-const renderImg = (image: Picture, imageClassName = '') => {
-  const style = {
-    width: image.size?.width ? `${image.size?.width}px` : '100%',
-    height: image.size?.height ? `${image.size?.height}px` : '100%',
-  };
-  const title = image.title || '';
-  const alt = image.alt || image.title;
-
-  return (
-    <img
-      src={image.src}
-      className={`m-auto ${imageClassName}`}
-      alt={alt}
-      title={title}
-      style={style}
-      {...image.size}
-    />
-  );
-};
-
-export function formatToMimeType(format: ImgSource['format']): string | undefined {
-  return format ? `image/${String(format)}` : undefined;
-}
+export const Img = JSX<ImageProps<Image>>(({ className = '', image }) => {
+  return <ImgInner className={className} image={image} isMobile={true} />;
+});

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

@@ -1,71 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ImgSource, Picture } from '../../model/Picture';
-import { Icon } from '../Icon/Icon';
-import { getIconVersion } from './getIconVersion';
+import { ImgInner } from './ImgInner';
+
 import type { Image, ImageProps } from './ImgProps';
 
 export const Img = JSX<ImageProps<Image>>(
-  ({ className = '', image, imageClassName = '', ...iconProps }) => {
-    if (!image) {
-      return null;
-    }
-
-    // backwards compatibility with existing icons in usage
-    const icon = typeof image === 'string' ? image : image.icon;
-    if (icon || icon === '') {
-      return icon.length ? (
-        <Icon
-          className={className}
-          imageClassName={imageClassName}
-          iconVersion={getIconVersion(image)}
-          name={icon}
-          {...iconProps}
-        />
-      ) : null;
-    }
-
+  ({ className = '', imageClassName, image, ...iconProps }) => {
     return (
-      <ImgAsPicture
+      <ImgInner
         className={className}
         imageClassName={imageClassName}
-        image={image as Picture}
+        image={image}
+        {...iconProps}
       />
     );
   },
 );
-
-export const ImgAsPicture = JSX<ImageProps<Picture>>(
-  ({ className = '', image, imageClassName = '' }) => {
-    if (!image) {
-      return null;
-    }
-
-    return (
-      <picture className={`flex-none ${className}`}>
-        {image?.sources?.length
-          ? image.sources.map(({ src, format, media, size }, index) => (
-              <source
-                key={`${index}_${src}`}
-                srcSet={src}
-                type={formatToMimeType(format)}
-                media={media}
-                {...size}
-              />
-            ))
-          : null}
-        {renderImg(image, imageClassName)}
-      </picture>
-    );
-  },
-);
-
-const renderImg = (image: Picture, imageClassName = '') => {
-  const title = image.title || '';
-  const alt = image.alt || image.title;
-
-  return <img src={image.src} className={imageClassName} alt={alt} title={title} {...image.size} />;
-};
-
-export function formatToMimeType(format: ImgSource['format']): string | undefined {
-  return format ? `image/${String(format)}` : undefined;
-}