@redneckz/wildless-cms-uni-blocks 0.3.32 → 0.3.35

package/src/icons/ShieldTickIcon.svg

@@ -1 +1,4 @@
-<svg title="Безопасность" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m9.05 11.87 1.61 1.61 4.3-4.3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.59 7.12c0-1.23-.94-2.59-2.09-3.02l-4.99-1.87c-.83-.31-2.19-.31-3.02 0L5.5 4.11c-1.15.43-2.09 1.79-2.09 3.01v7.43c0 1.18.78 2.73 1.73 3.44l4.3 3.21c1.41 1.06 3.73 1.06 5.14 0l4.3-3.21c.95-.71 1.73-2.26 1.73-3.44v-3.52" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Безопасность" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m9.05 11.87 1.61 1.61 4.3-4.3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M20.59 7.12c0-1.23-.94-2.59-2.09-3.02l-4.99-1.87c-.83-.31-2.19-.31-3.02 0L5.5 4.11c-1.15.43-2.09 1.79-2.09 3.01v7.43c0 1.18.78 2.73 1.73 3.44l4.3 3.21c1.41 1.06 3.73 1.06 5.14 0l4.3-3.21c.95-.71 1.73-2.26 1.73-3.44v-3.52" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/SmallClockIcon.svg

@@ -1 +1,4 @@
-<svg title="Маленькие часы" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m15.71 15.18-3.1-1.85c-.54-.32-.98-1.09-.98-1.72v-4.1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 6c-1.25 1.67-2 3.75-2 6 0 5.52 4.48 10 10 10s10-4.48 10-10S17.52 2 12 2c-1.43 0-2.8.3-4.03.85" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Маленькие часы" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m15.71 15.18-3.1-1.85c-.54-.32-.98-1.09-.98-1.72v-4.1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4 6c-1.25 1.67-2 3.75-2 6 0 5.52 4.48 10 10 10s10-4.48 10-10S17.52 2 12 2c-1.43 0-2.8.3-4.03.85" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/UserTickIcon.svg

@@ -1 +1,5 @@
-<svg title="Пользователь" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.02 3.01A4.944 4.944 0 0 0 12 2C9.24 2 7 4.24 7 7s2.24 5 5 5 5-2.24 5-5M3.41 22c0-3.87 3.85-7 8.59-7 .96 0 1.89.13 2.76.37" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 18c0 .75-.21 1.46-.58 2.06-.21.36-.48.68-.79.94-.7.63-1.62 1-2.63 1a3.97 3.97 0 0 1-3.42-1.94A3.92 3.92 0 0 1 14 18c0-1.26.58-2.39 1.5-3.12A3.999 3.999 0 0 1 22 18Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="m16.44 18 .99.99 2.13-1.97" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Пользователь" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15.02 3.01A4.944 4.944 0 0 0 12 2C9.24 2 7 4.24 7 7s2.24 5 5 5 5-2.24 5-5M3.41 22c0-3.87 3.85-7 8.59-7 .96 0 1.89.13 2.76.37" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M22 18c0 .75-.21 1.46-.58 2.06-.21.36-.48.68-.79.94-.7.63-1.62 1-2.63 1a3.97 3.97 0 0 1-3.42-1.94A3.92 3.92 0 0 1 14 18c0-1.26.58-2.39 1.5-3.12A3.999 3.999 0 0 1 22 18Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m16.44 18 .99.99 2.13-1.97" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/WalletAdd2Icon.svg

@@ -1 +1,6 @@
-<svg title="Пополнение карты" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.19 7.06C6.45 7.02 6.72 7 7 7h10c.26 0 .51.01.75.05C20.33 7.35 22 9.26 22 12v5c0 3-2 5-5 5H7.63c.31-.26.58-.58.79-.94.37-.6.58-1.31.58-2.06 0-2.21-1.79-4-4-4-1.2 0-2.27.53-3 1.36V12c0-.87.17-1.66.48-2.33" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17.75 7.05C17.51 7.01 17.26 7 17 7H7c-.28 0-.55.02-.81.06.14-.28.34-.54.58-.78l3.25-3.26a3.525 3.525 0 0 1 4.96 0l1.75 1.77c.64.63.98 1.43 1.02 2.26Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 19c0 .75-.21 1.46-.58 2.06A3.97 3.97 0 0 1 5 23a3.97 3.97 0 0 1-3.42-1.94A3.92 3.92 0 0 1 1 19c0-2.21 1.79-4 4-4s4 1.79 4 4ZM6.49 18.98H3.51M5 17.52v2.99" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 12.5h-3c-1.1 0-2 .9-2 2s.9 2 2 2h3" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Пополнение карты" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.19 7.06C6.45 7.02 6.72 7 7 7h10c.26 0 .51.01.75.05C20.33 7.35 22 9.26 22 12v5c0 3-2 5-5 5H7.63c.31-.26.58-.58.79-.94.37-.6.58-1.31.58-2.06 0-2.21-1.79-4-4-4-1.2 0-2.27.53-3 1.36V12c0-.87.17-1.66.48-2.33" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M17.75 7.05C17.51 7.01 17.26 7 17 7H7c-.28 0-.55.02-.81.06.14-.28.34-.54.58-.78l3.25-3.26a3.525 3.525 0 0 1 4.96 0l1.75 1.77c.64.63.98 1.43 1.02 2.26Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 19c0 .75-.21 1.46-.58 2.06A3.97 3.97 0 0 1 5 23a3.97 3.97 0 0 1-3.42-1.94A3.92 3.92 0 0 1 1 19c0-2.21 1.79-4 4-4s4 1.79 4 4ZM6.49 18.98H3.51M5 17.52v2.99" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M22 12.5h-3c-1.1 0-2 .9-2 2s.9 2 2 2h3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/WalletAddIcon.svg

@@ -1 +1,7 @@
-<svg title="Кошелёк с плюсом" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 15.44h-5M12 13v5" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22H8.1c-.24 0-.48-.02-.71-.05-3.18-.21-4.88-1.91-5.09-5.09-.03-.23-.05-.47-.05-.71V14.2c0-2.01 1.22-3.74 2.96-4.49.6-.25 1.24-.39 1.92-.39h9.76c.49 0 .97.07 1.41.2 2 .6 3.46 2.47 3.46 4.67v1.95c0 .2-.01.4-.02.6-.19 3.5-2.14 5.26-5.84 5.26" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m12.9 2.52-.03.07-2.9 6.73H7.12c-.68 0-1.33.14-1.92.39l1.75-4.18.04-.1.07-.16c.02-.06.04-.12.07-.17 1.31-3.03 2.79-3.72 5.77-2.58Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.29 9.52c-.45-.14-.93-.2-1.41-.2H9.97l2.9-6.73.03-.07c.15.05.29.12.44.18l2.21.93c1.23.51 2.09 1.04 2.61 1.68.1.12.18.23.25.36.09.14.16.28.2.43.04.09.07.18.09.26.27.84.11 1.87-.41 3.16ZM6.95 5.53 5.2 9.71a4.894 4.894 0 0 0-2.96 4.49v-2.93c0-2.84 2.02-5.21 4.71-5.74Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.76 11.27v2.93c0-2.2-1.46-4.07-3.46-4.67.52-1.3.67-2.32.42-3.17-.02-.09-.05-.18-.09-.26 1.86.96 3.13 2.93 3.13 5.17Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Кошелёк с плюсом" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.5 15.44h-5M12 13v5" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 22H8.1c-.24 0-.48-.02-.71-.05-3.18-.21-4.88-1.91-5.09-5.09-.03-.23-.05-.47-.05-.71V14.2c0-2.01 1.22-3.74 2.96-4.49.6-.25 1.24-.39 1.92-.39h9.76c.49 0 .97.07 1.41.2 2 .6 3.46 2.47 3.46 4.67v1.95c0 .2-.01.4-.02.6-.19 3.5-2.14 5.26-5.84 5.26" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m12.9 2.52-.03.07-2.9 6.73H7.12c-.68 0-1.33.14-1.92.39l1.75-4.18.04-.1.07-.16c.02-.06.04-.12.07-.17 1.31-3.03 2.79-3.72 5.77-2.58Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M18.29 9.52c-.45-.14-.93-.2-1.41-.2H9.97l2.9-6.73.03-.07c.15.05.29.12.44.18l2.21.93c1.23.51 2.09 1.04 2.61 1.68.1.12.18.23.25.36.09.14.16.28.2.43.04.09.07.18.09.26.27.84.11 1.87-.41 3.16ZM6.95 5.53 5.2 9.71a4.894 4.894 0 0 0-2.96 4.49v-2.93c0-2.84 2.02-5.21 4.71-5.74Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M21.76 11.27v2.93c0-2.2-1.46-4.07-3.46-4.67.52-1.3.67-2.32.42-3.17-.02-.09-.05-.18-.09-.26 1.86.96 3.13 2.93 3.13 5.17Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/WalletIcon.svg

@@ -1 +1,7 @@
-<svg title="Кошелёк" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.75 16.86v2.03c0 1.72-1.6 3.11-3.57 3.11-1.97 0-3.58-1.39-3.58-3.11v-2.03c0 1.72 1.6 2.94 3.58 2.94 1.97 0 3.57-1.23 3.57-2.94Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.75 14.11c0 .5-.14.96-.38 1.36-.59.97-1.8 1.58-3.2 1.58-1.4 0-2.61-.62-3.2-1.58-.24-.4-.38-.86-.38-1.36 0-.86.4-1.63 1.04-2.19.65-.57 1.54-.91 2.53-.91.99 0 1.88.35 2.53.91.66.55 1.06 1.33 1.06 2.19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.75 14.11v2.75c0 1.72-1.6 2.94-3.57 2.94-1.97 0-3.58-1.23-3.58-2.94v-2.75C3.6 12.39 5.2 11 7.18 11c.99 0 1.88.35 2.53.91.64.56 1.04 1.34 1.04 2.2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 10.97v2.06c0 .55-.44 1-1 1.02h-1.96c-1.08 0-2.07-.79-2.16-1.87-.06-.63.18-1.22.6-1.63.37-.38.88-.6 1.44-.6H21c.56.02 1 .47 1 1.02Z" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 3.5c.26 0 .51.01.75.05C19.33 3.85 21 5.76 21 8.5v1.45h-2.08c-.56 0-1.07.22-1.44.6-.42.41-.66 1-.6 1.63.09 1.08 1.08 1.87 2.16 1.87H21v1.45c0 3-2 5-5 5h-2.5M2 10.5v-2c0-2.72 1.64-4.62 4.19-4.94.26-.04.53-.06.81-.06h5" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg title="Кошелёк" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.75 16.86v2.03c0 1.72-1.6 3.11-3.57 3.11-1.97 0-3.58-1.39-3.58-3.11v-2.03c0 1.72 1.6 2.94 3.58 2.94 1.97 0 3.57-1.23 3.57-2.94Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.75 14.11c0 .5-.14.96-.38 1.36-.59.97-1.8 1.58-3.2 1.58-1.4 0-2.61-.62-3.2-1.58-.24-.4-.38-.86-.38-1.36 0-.86.4-1.63 1.04-2.19.65-.57 1.54-.91 2.53-.91.99 0 1.88.35 2.53.91.66.55 1.06 1.33 1.06 2.19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.75 14.11v2.75c0 1.72-1.6 2.94-3.57 2.94-1.97 0-3.58-1.23-3.58-2.94v-2.75C3.6 12.39 5.2 11 7.18 11c.99 0 1.88.35 2.53.91.64.56 1.04 1.34 1.04 2.2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M22 10.97v2.06c0 .55-.44 1-1 1.02h-1.96c-1.08 0-2.07-.79-2.16-1.87-.06-.63.18-1.22.6-1.63.37-.38.88-.6 1.44-.6H21c.56.02 1 .47 1 1.02Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M16 3.5c.26 0 .51.01.75.05C19.33 3.85 21 5.76 21 8.5v1.45h-2.08c-.56 0-1.07.22-1.44.6-.42.41-.66 1-.6 1.63.09 1.08 1.08 1.87 2.16 1.87H21v1.45c0 3-2 5-5 5h-2.5M2 10.5v-2c0-2.72 1.64-4.62 4.19-4.94.26-.04.53-.06.81-.06h5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/WalletWithMoneyIcon.svg

@@ -1 +1,5 @@
-<svg title="Кошелёк с деньгами" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 12.063V11a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1.063" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="m5 7 8.571-5L15 4.308M10 7l8-4 2 2.91" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.56 18H21a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v3" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round"/></svg>
+<svg title="Кошелёк с деньгами" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20 12.063V11a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1.063" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="m5 7 8.571-5L15 4.308M10 7l8-4 2 2.91" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M16.56 18H21a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/src/model/Picture.ts

@@ -1,3 +1,5 @@
+import type { IconName } from '../icons/IconName';
+
 export interface Img {
   /** @title Картинка */
   src?: string;
@@ -8,6 +10,8 @@ export interface Img {
 }
 
 export interface ImgSource {
+  /** @title Иконка */
+  icon?: IconName;
   /** @title Картинка */
   src?: string;
   /** @title Формат */

package/src/model/SitemapProps.ts

@@ -1,5 +1,5 @@
 import type { LinkProps } from './LinkProps';
-import { IconName } from '../icons/IconName';
+import type { Picture } from './Picture';
 
 /**
  * @title Меню
@@ -16,7 +16,7 @@ export interface TopMenuItem extends LinkProps {
  */
 export interface DispositionItem extends LinkProps {
   /** @hidden */
-  icon?: IconName;
+  icon?: Picture;
 }
 
 export interface SitemapProps {

package/src/services/sitemap/SitemapProps.ts

@@ -1,5 +1,5 @@
 import type { LinkProps } from '../../model/LinkProps';
-import { IconName } from '../../icons/IconName';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Ссылка
@@ -16,7 +16,7 @@ export interface TopMenuItem extends LinkProps {
  */
 export interface DispositionItem extends LinkProps {
   /** @hidden */
-  icon?: IconName;
+  icon?: Picture;
 }
 
 export interface SitemapProps {

package/src/setup-fixture.ts

@@ -18,13 +18,11 @@ const Router = () => {
     href: href,
     pathname: '/credits',
     query: {},
-    push: (url?: string) => {
-      if (!url) return;
+    push: (url: string) => {
       globalThis.history.pushState(null, '', url);
       setHref(globalThis.location.href);
     },
-    replace: (url?: string) => {
-      if (!url) return;
+    replace: (url: string) => {
       globalThis.history.replaceState(null, '', url);
       setHref(globalThis.location.href);
     },
@@ -88,10 +86,10 @@ export const mobileContext: ContentPageContext = {
     href: `${TEST_ORIGIN}/mobile/credits`,
     pathname: '/mobile/credits',
     query: {},
-    push: (url?: string) => {
+    push: (url: string) => {
       console.log(url);
     },
-    replace: (url?: string) => {
+    replace: (url: string) => {
       console.log(url);
     },
   }),

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

@@ -1,5 +1,5 @@
 import '../../setup-fixture';
-import { Icon } from '../Icon/Icon';
+import { Img } from '../Img/Img';
 import { Button } from './Button';
 
 export default {
@@ -66,7 +66,7 @@ export default {
             appendLeft={
               /** Div need for perfect pixel */
               <div>
-                <Icon name="PlayMarketIcon" width="24" height="24" asSVG />
+                <Img image={{ icon: 'PlayMarketIcon' }} width="24" height="24" asSVG />
               </div>
             }
             text="Google Play"
@@ -78,7 +78,7 @@ export default {
             aboveText="Загрузите в"
             appendLeft={
               <div>
-                <Icon name="AppleIcon" width="24" height="24" asSVG />
+                <Img image={{ icon: 'AppleIcon' }} width="24" height="24" asSVG />
               </div>
             }
             text="App Store"
@@ -94,14 +94,14 @@ export default {
             href="https://www.rshb.ru/"
             target="_blank"
             version="secondary"
-            appendLeft={<Icon name="PlayMarketIcon" width="20" height="21" asSVG />}
+            appendLeft={<Img image={{ icon: 'PlayMarketIcon' }} width="20" height="21" asSVG />}
           />
           <Button
             rounded
             href="https://www.rshb.ru/"
             target="_blank"
             version="secondary"
-            appendLeft={<Icon name="AppleIcon" width="18" height="20" asSVG />}
+            appendLeft={<Img image={{ icon: 'AppleIcon' }} width="18" height="20" asSVG />}
           />
         </div>
       </div>

package/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-m-button text-left">{text}</div>
+          <div className="text-button-sm text-left">{text}</div>
         </div>
       ) : null}
     </div>
@@ -28,7 +28,7 @@ const getButtonStyle = (props: ButtonInnerProps) => {
     return '';
   }
 
-  const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`;
+  const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[18px]'}`;
 
   return [
     'flex items-center justify-center',

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

@@ -1,6 +1,6 @@
 import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { IconName } from '../Icon/IconProps';
+import type { Picture } from '../../model/Picture';
 
 /**
  * @hidden
@@ -24,7 +24,7 @@ export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
 
 export interface ButtonWithIconProps extends ButtonProps {
   /** @title Иконка */
-  icon?: IconName;
+  icon?: Picture;
   /** @title Верхний текст */
   aboveText?: string;
   /** @hidden */

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import { UniBlockProps } from '../../types';
-import { Icon } from '../Icon/Icon';
+import { Img } from '../Img/Img';
 import { Button } from './Button';
 import type { ButtonContent, ButtonWithIconProps } from './ButtonProps';
 
@@ -25,7 +25,7 @@ function renderButton({ icon, ...button }: ButtonWithIconProps, i: number) {
   return icon ? (
     <Button
       key={String(i)}
-      appendLeft={<Icon name={icon} width="24" height="24" asSVG />}
+      appendLeft={<Img image={icon} width="24" height="24" asSVG />}
       {...button}
     />
   ) : (

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

@@ -2,16 +2,27 @@ import { JSX } from '@redneckz/uni-jsx';
 import { BgColorVersion } from '../../model/BgColorVersion';
 import type { TopItemProps } from '../TopItem/TopItem';
 
-const TEXT_CLASSES = 'font-sans font-normal text-base';
+const TEXT_CLASSES = 'font-sans font-light text-base';
 const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
 
 export const HeaderItem = JSX<TopItemProps>(
-  ({ className, text, href, target, active, onClick, children, bgColor = 'bg-white' }) => (
+  ({
+    className = '',
+    text,
+    href,
+    target,
+    active,
+    onClick,
+    children,
+    bgColor = 'bg-white',
+    dataItemName,
+  }) => (
     <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}
+      data-item-name={dataItemName}
     >
       <span className={getTextClasses(bgColor, active)}>{text || children}</span>
       {active ? <div className={getBorderClasses(bgColor, active)} /> : null}

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

@@ -6,8 +6,8 @@ export interface HeadingProps extends HeadingContent, HeadingTypeContent {
 }
 
 const HEADING_STYLE_MAP: Record<HeadingType, string> = {
-  h1: 'text-title-lg tracking-[-0.3px]',
-  h2: 'text-title',
+  h1: 'text-title-xl tracking-[-0.3px]',
+  h2: 'text-title-lg',
   h3: 'text-title-sm',
   h4: 'text-title-xs',
   h5: 'text-title-2xs tracking-[0.2px]',

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

@@ -5,14 +5,14 @@ import { IconTitleMap } from '../../icons/IconName';
 
 const svgColorsMap: Record<IconColor, string> = {
   none: '',
-  primary: 'text-primary-main',
-  secondary: 'text-primary-text',
+  primary: 'text-white',
+  secondary: 'text-white',
 };
 
 export const Icon = JSX<IconProps>(
   ({
     className = '',
-    name,
+    name = '',
     alt = `Иконка ${IconTitleMap[name] || name}`,
     title = alt,
     asSVG,

package/src/ui-kit/Icon/IconProps.ts

@@ -8,13 +8,22 @@ export type { IconName };
  */
 export type IconColor = 'none' | 'primary' | 'secondary';
 
-export interface IconProps {
-  className?: string;
-  name: IconName;
+export interface IconCompatibilityFields {
+  /** @title Альтернативный текст (alt) */
   alt?: string;
+  /** @title Текст подсказки (title) */
   title?: string;
+  /** @title Ширина */
   width?: string;
+  /** @title Высота */
   height?: string;
+  /** @hidden */
   asSVG?: boolean;
+  /** @hidden */
   color?: IconColor;
 }
+
+export type IconProps = IconCompatibilityFields & {
+  className?: string;
+  name?: IconName;
+};

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

@@ -1,30 +1,46 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Picture, ImgSource } from '../../model/Picture';
+import type { ImgSource, Picture } from '../../model/Picture';
+import { Icon } from '../Icon/Icon';
+import type { Image, ImageProps } from './ImgProps';
 
-export interface ImageProps {
-  className?: string;
-  imageClassName?: string;
-  image: Picture;
-}
+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} name={icon} {...iconProps} />;
+    }
 
-export const Img = JSX<ImageProps>(({ className = '', image, imageClassName }) => {
-  if (!image) {
-    return null;
-  }
+    return (
+      <ImgAsPicture
+        className={className}
+        imageClassName={imageClassName}
+        image={image as Picture}
+      />
+    );
+  },
+);
 
-  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>
-  );
-});
+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, imageClassName = '') => {
+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%',

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

@@ -1,42 +1,69 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Picture, ImgSource } from '../../model/Picture';
+import type { ImgSource, Picture } from '../../model/Picture';
+import { Icon } from '../Icon/Icon';
+import type { Image, ImageProps } from './ImgProps';
 
-export interface ImageProps {
-  className?: string;
-  imageClassName?: string;
-  image: Picture;
-}
+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} name={icon} {...iconProps} /> : null;
+    }
 
-export const Img = JSX<ImageProps>(
-  ({ className = '', image: { size, ...image }, imageClassName = '' }) => {
-    const style = {
-      width: size?.width ? `${size?.width}px` : '100%',
-      height: size?.height ? `${size?.height}px` : '100%',
-    };
+    return (
+      <ImgAsPicture
+        className={className}
+        imageClassName={imageClassName}
+        image={image as Picture}
+      />
+    );
+  },
+);
 
-    const title = image.title || '';
-    const alt = image.alt || title;
+export const ImgAsPicture = JSX<ImageProps<Picture>>(
+  ({ className = '', image, imageClassName = '' }) => {
+    if (!image) {
+      return null;
+    }
 
     return (
       <picture className={`flex-none ${className}`}>
-        {image.sources?.length
+        {image?.sources?.length
           ? image.sources.map(({ src, format }, index) => (
               <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
             ))
           : null}
-        <img
-          className={imageClassName}
-          src={image.src}
-          alt={alt}
-          title={title}
-          style={style}
-          {...size}
-        />
+        {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={imageClassName}
+      alt={alt}
+      title={title}
+      style={style}
+      {...image.size}
+    />
+  );
+};
+
 export function formatToMimeType(format: ImgSource['format']): string | undefined {
   return format ? `image/${String(format)}` : undefined;
 }

package/src/ui-kit/Img/ImgProps.ts

@@ -1,9 +1,12 @@
 import type { Picture } from '../../model/Picture';
+import type { IconCompatibilityFields, IconName } from '../Icon/IconProps';
 
-export interface ImageContent {
-  image?: Picture;
-}
+export type Image = Picture | IconName;
 
-export interface ImageProps extends ImageContent {
+export interface ImageContent<T = Picture> {
+  image?: T;
+}
+export interface ImageProps<T> extends ImageContent<T>, IconCompatibilityFields {
   className?: string;
+  imageClassName?: string;
 }

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

@@ -6,6 +6,8 @@ const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
   primary: 'text-primary-text',
   secondary: 'text-white',
   gray: 'text-secondary-text',
+  tile: 'text-primary-text',
+  'tile-white': 'text-white',
 };
 
 export const List = JSX<ListProps>((props) => {

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

@@ -11,12 +11,20 @@ export interface ListItemProps {
   isDotted?: boolean;
 }
 
-const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3 mt-2';
+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',
+};
 
 const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
-  primary: 'bg-primary-main',
+  primary: 'bg-primary-text',
   secondary: 'bg-white',
   gray: 'bg-secondary-text',
+  tile: 'bg-black',
+  'tile-white': 'bg-white',
 };
 
 export const ListItem = JSX<ListItemProps>(
@@ -31,6 +39,12 @@ export const ListItem = JSX<ListItemProps>(
 );
 
 const getListStyle = (version: ListItemVersion) => {
-  const size = version === 'gray' ? 'w-1.5 h-1.5 min-w-1.5 min-h-1.5' : 'w-2 h-2 min-w-2 min-h-2';
-  return `${LIST_STYLE_CLASSES} ${LIST_DOT_STYLE_MAP[version]} ${size}`;
+  const size = {
+    primary: 'w-2 h-2 min-w-2 min-h-2',
+    secondary: 'w-2 h-2 min-w-2 min-h-2',
+    gray: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5',
+    tile: 'w-[7px] h-[7px] min-w-[7px] min-h-[7px]',
+    'tile-white': 'w-[7px] h-[7px] min-w-[7px] min-h-[7px]',
+  };
+  return `${LIST_STYLE_CLASSES[version]} ${LIST_DOT_STYLE_MAP[version]} ${size[version]}`;
 };

package/src/ui-kit/List/ListProps.ts

@@ -4,7 +4,7 @@ import type { ListContent } from './ListContent';
  * @title Версия списка
  * @enumNames ["Основной", "Второстепенный", "Серый"]
  */
-export type ListItemVersion = 'primary' | 'secondary' | 'gray';
+export type ListItemVersion = 'primary' | 'secondary' | 'gray' | 'tile' | 'tile-white';
 
 /**
  * @title Содержимое списка

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

@@ -41,7 +41,7 @@ export const Logo = JSX<Partial<LogoProps>>(
           paths={LOGO_PATHS.map((d) => ({ d }))}
         />
         {!hideTitle && (
-          <span className={`${TEXT_COLOR[bgColor]} text-base font-medium ml-2.5`}>
+          <span className={`${TEXT_COLOR[bgColor]} text-m-title-xs font-medium ml-2.5`}>
             {children || 'Россельхозбанк'}
           </span>
         )}

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Icon } from '../Icon/Icon';
+import { Img } from '../Img/Img';
 
 export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
   const { term, setTerm } = context.useSearch();
@@ -8,7 +8,7 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
     <form className={`relative ${className || ''}`}>
       <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
         <div className="w-[20px] h-[20px]">
-          <Icon name="LoupeIcon" width="24" height="24" />
+          <Img image="LoupeIcon" width="24" height="24" />
         </div>
         {!term && (
           <label
@@ -37,7 +37,7 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
           setTerm('');
         }}
       >
-        <Icon name="CloseIcon" width="24" height="24" />
+        <Img image="CloseIcon" width="24" height="24" />
       </button>
     </form>
   );