@redneckz/wildless-cms-uni-blocks 0.12.4 → 0.12.6

package/src/components/Tabs/Tabs.fixture.tsx

@@ -11,7 +11,7 @@ export default {
           { type: 'group', ref: 'tab1', title: 'Вкладка 1' },
           { type: 'group', ref: 'tab2', title: 'Вкладка 2' },
           { type: 'link', href: 'https://google.com', text: 'Вкладка 3' },
-          { type: 'group', ref: 'tab3', title: 'Вкладка 4' },
+          { type: 'link', href: 'https://yandex.com', text: 'Вкладка 4' },
         ]}
         tabsMode="wideScreen"
       />
@@ -27,12 +27,10 @@ export default {
           { type: 'link', href: 'https://google.com', text: 'Вкладка 3' },
           { type: 'link', href: 'https://yandex.com', text: 'Вкладка 4' },
           { type: 'link', href: 'https://ya.com', text: 'Вкладка 5' },
-          { type: 'link', href: 'https://habr.com', text: 'Вкладка за номером 6' },
+          { type: 'link', href: 'https://habr.com', text: 'Вкладка 6' },
           { type: 'link', href: 'https://kremlin.com', text: 'Вкладка 7' },
           { type: 'link', href: 'https://gov.com', text: 'Вкладка 8' },
           { type: 'group', ref: 'tab3', title: 'Вкладка 9' },
-          { type: 'link', href: 'https://vc.com', text: 'Вкладка номер 10' },
-          { type: 'link', href: 'https://ria.com', text: 'Вкладка номер 11' },
         ]}
         tabsMode="scrollable"
       />
@@ -44,21 +42,14 @@ export default {
         className="col-span-12"
         tabs={[
           { type: 'group', ref: 'tab1', title: '2021' },
-          { type: 'link', href: 'https://google.com', text: '2020' },
-          { type: 'group', ref: 'tab3', title: '2019' },
+          { type: 'group', ref: 'tab2', title: '2020' },
+          { type: 'link', href: 'https://google.com', text: '2019' },
           { type: 'link', href: 'https://yandex.com', text: '2018' },
-          { type: 'group', ref: 'tab5', title: '2017' },
-          { type: 'link', href: 'https://ya.com', text: '2016' },
-          { type: 'link', href: 'https://habr.com', text: '2014' },
+          { type: 'link', href: 'https://ya.com', text: '2017' },
+          { type: 'link', href: 'https://habr.com', text: '2016' },
+          { type: 'link', href: 'https://kremlin.com', text: '2015' },
+          { type: 'link', href: 'https://gov.com', text: '2014' },
           { type: 'group', ref: 'tab3', title: '2013' },
-          { type: 'link', href: 'https://kremlin.com', text: '2012' },
-          { type: 'group', ref: 'tab5', title: '2011' },
-          { type: 'link', href: 'https://ria.com', text: '2009' },
-          { type: 'group', ref: 'tab8', title: '2008' },
-          { type: 'group', ref: 'tab8', title: '2007' },
-          { type: 'group', ref: 'tab8', title: '2006' },
-          { type: 'group', ref: 'tab8', title: '2005' },
-          { type: 'group', ref: 'tab8', title: '2004' },
         ]}
         tabsMode="centered"
       />

package/src/components/Tabs/Tabs.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { defaultEventBus } from '../../EventBus/defaultEventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
 import { CenteredTabs } from './CenteredTabs';
 import { renderTab } from './renderTab';
 import { ScrollableTabs } from './ScrollableTabs';
@@ -16,7 +17,7 @@ interface RenderTabsProps extends TabsBlockProps {
 }
 
 export const Tabs = JSX<TabsBlockProps>((props) => {
-  const { className = '', tabs, isSticky, ...rest } = props;
+  const { className = '', isSticky, tabs, ...rest } = props;
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
@@ -41,9 +42,11 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
 
   return (
     <BlockWrapper
-      className={`relative box-border flex gap-x-1 w-full ${
-        isSticky ? 'sticky top-1 z-20' : ''
-      } ${className}`}
+      className={style(
+        'relative box-border flex gap-x-1 w-full overflow-x-auto no-scrollbar',
+        isSticky ? 'sticky top-1 z-20' : '',
+        className,
+      )}
       defaultPadding="p-0"
       role="tablist"
       {...rest}

package/src/components/Tabs/renderGroupTab.tsx

@@ -1,18 +1,12 @@
+import { style } from '../../utils/style';
 import type { RenderTabProps } from './renderTab';
-import {
-  ACTIVE_TEXT_CLASSES,
-  getGroupTabClassName,
-  INACTIVE_TEXT_CLASSES,
-  TEXT_CLASSES,
-  WHITE_ACTIVE_TEXT_CLASSES,
-} from './tabItemClasses';
+import { getTabClassName } from './tabItemClasses';
 import type { GroupTabData, TabsMode } from './TabsContent';
 
 const BADGE_CLASSES =
-  'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
-const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
-const INACTIVE_BADGE_CLASSES =
-  'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
+  'bg-main-divider min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
+const LIGHT_BADGE_CLASSES = 'bg-white/30 text-white';
+const DARK_BADGE_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
 
 export const renderGroupTab =
   ({ page, currentTab, showCounter, onClick, tabsMode }: RenderTabProps) =>
@@ -27,39 +21,33 @@ export const renderGroupTab =
     return (
       <div
         key={`group-${String(i)}`}
-        className={getGroupTabClassName('div', active, tabsMode)}
+        className={getTabClassName('block', active, tabsMode)}
         role="tab"
         aria-selected={active}
         onClick={() => onClick(tab)}
       >
         <div
-          className={`flex flex-1 items-center justify-center ${getGroupTabClassName(
-            'text',
-            active,
-            tabsMode,
-          )}`}
+          className={style(
+            'flex flex-1 items-center justify-center h-full',
+            getTabClassName('text', active, tabsMode),
+          )}
         >
-          {renderTitle(tab.title, active, tabsMode)}
-          {renderCount(showCounter, count, active)}
+          <span>{tab.title}</span>
+          {showCounter && count ? renderCount(tabsMode, count, active) : null}
         </div>
       </div>
     );
   };
 
-const renderTitle = (title: string | undefined, active: boolean, tabsMode?: TabsMode) => {
-  const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
-  const titleClassName =
-    tabsMode === 'scrollable'
-      ? `${TEXT_CLASSES} ${activeClassName}`
-      : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
-
-  return title ? <h3 className={titleClassName}>{title}</h3> : null;
-};
-
-const renderCount = (showCounter: boolean | undefined, count: number, active: boolean) => {
-  return showCounter && count ? (
-    <div className={`${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`}>
+const renderCount = (tabsMode: TabsMode | undefined, count: number, active: boolean) => {
+  return (
+    <div
+      className={style(
+        BADGE_CLASSES,
+        active && tabsMode !== 'scrollable' ? LIGHT_BADGE_CLASSES : DARK_BADGE_CLASSES,
+      )}
+    >
       {count}
     </div>
-  ) : null;
+  );
 };

package/src/components/Tabs/tabItemClasses.ts

@@ -9,12 +9,12 @@ export const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
 
 export const TEXT_CLASSES = 'font-sans text-m text-center';
 export const ACTIVE_TEXT_CLASSES = 'text-white';
-export const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
+export const INACTIVE_TEXT_CLASSES = 'text-secondary-text sm:group-hover/btn:text-primary-main';
 
 export const WHITE_ACTIVE_TEXT_CLASSES = 'text-primary-main';
 
-const GROUP_TAB_CLASSES = {
-  div: {
+const TAB_CLASSES = {
+  block: {
     scrollable: {
       active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
       default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
@@ -30,37 +30,7 @@ const GROUP_TAB_CLASSES = {
   },
   text: {
     scrollable: {
-      active: `h-full border-0 border-b-2`,
-      default: ``,
-    },
-    centered: {
-      active: '',
-      default: '',
-    },
-    wideScreen: {
-      active: '',
-      default: '',
-    },
-  },
-};
-const LINK_TAB_CLASSES = {
-  link: {
-    scrollable: {
-      active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
-      default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-    },
-    centered: {
-      active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
-      default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
-    },
-    wideScreen: {
-      active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
-      default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-    },
-  },
-  text: {
-    scrollable: {
-      active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
+      active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2`,
       default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
     },
     centered: {
@@ -68,22 +38,19 @@ const LINK_TAB_CLASSES = {
       default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
     },
     wideScreen: {
-      active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
-      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+      active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES} text-black px-2.5 bg-white sm:bg-primary-main sm:text-white`,
+      default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES} px-2.5 bg-white`,
     },
   },
 };
 
-export const getGroupTabClassName = (type: string, active: boolean, tabsMode?: TabsMode) => {
-  const styleActive = active ? 'active' : 'default';
-  const mode = tabsMode || 'wideScreen';
-
-  return GROUP_TAB_CLASSES[type][mode][styleActive];
-};
-
-export const getLinkTabClassName = (type: string, active: boolean, tabsMode?: TabsMode) => {
+export const getTabClassName: (type: string, active: boolean, tabsMode?: TabsMode) => string = (
+  type,
+  active,
+  tabsMode,
+) => {
   const styleActive = active ? 'active' : 'default';
   const mode = tabsMode || 'wideScreen';
 
-  return LINK_TAB_CLASSES[type][mode][styleActive];
+  return TAB_CLASSES[type][mode][styleActive];
 };

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

@@ -24,7 +24,6 @@ export const TariffsTable = JSX<TariffsTableProps>(
   }) => {
     const colData = getColData(columns);
     const tiles = getTiles(rowHeaders, colData);
-    const headingMargin = description ? 'mb-2' : 'mb-8';
 
     return (
       <section

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

@@ -1,23 +1,14 @@
 {
   "content": {
     "title": "Плитка",
-    "headingType": "h3",
+    "headlineVersion": "S",
     "__html": "<p>Описание</p>",
     "image": {
       "format": "webp",
       "size": {
+        "format": "webp",
         "width": 445
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 276
-          },
-          "format": "webp",
-          "alignment": "southeast"
-        }
-      ]
+      }
     },
     "isDotted": true,
     "listItemSize": "M",
@@ -29,6 +20,9 @@
       }
     ],
     "version": "primary",
-    "directionRight": true
+    "imageOptions": {
+      "directionRight": true,
+      "imageAlign": "end"
+    }
   }
 }

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

@@ -115,7 +115,7 @@ export default {
   ecosystem: (
     <div className="container grid grid-cols-12">
       <Tile
-        className="col-span-12 pr-28"
+        className="col-span-12"
         title="Экосистема «СВОЕ», созданная для людей"
         items={[
           'Качественные фермерские продукты напрямую от производителей',

package/src/components/Tile/Tile.tsx

@@ -7,14 +7,15 @@ import type { TileContent } from './TileContent';
 export interface TileProps extends TileContent, UniBlockProps {}
 
 export const Tile = JSX<TileProps>(
-  ({ className, headlineVersion = 'S', listItemSize = 'M', ...rest }) => (
-    <BlockWrapper className={className} {...rest}>
+  ({ className, padding, headlineVersion = 'S', listItemSize = 'M', ...rest }) => (
+    <BlockWrapper className={className} padding="p-0" {...rest}>
       <BaseProductTile
         className="h-full"
+        defaultPadding="p-m"
+        padding={padding}
         headlineVersion={headlineVersion}
         listItemSize={listItemSize}
         {...rest}
-        imageOptions={{ imageAlign: 'end', ...rest.imageOptions }}
       />
     </BlockWrapper>
   ),

package/src/icons/BelarusianFlag.svg

@@ -0,0 +1,4 @@
+<svg title="Белорусский флаг" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M56.3125 -1.57031H-22.3125V25.5725H56.3125V-1.57031Z" fill="#CE1720"/>
+  <path d="M-13.1406 16.5234H56.3111V25.5713H-13.1406V16.5234Z" fill="#007C30"/>
+</svg>

package/src/icons/IconName.ts

@@ -3,15 +3,15 @@
 /* eslint-disable max-len, max-lines */
 
 export const IconsWithoutInversion = new Set([
-  'ActualBalanceIcon', 'AirPlaneIcon', 'BagIcon', 'BriefcaseIcon', 'CardWithGemIcon', 'CarIcon', 'ChevronLeft', 'CinemaIcon', 'ClientIcon', 'ClockIcon', 'ComfortableCompIcon', 'CreditCardsIcon', 'DocsIcon', 'DollarIcon', 'DoneIcon', 'EarthIcon', 'EuroIcon', 'FullScreenIcon', 'GlassIcon', 'HeadphonesIcon', 'HeartIcon', 'HuaweiIcon', 'InterestGrowthIcon', 'JCBIcon', 'MailIcon', 'MapMarkerClusterIcon', 'MapMarkerSingleIcon', 'MasterCardIcon', 'MirIcon', 'MoneyInsuranceIcon', 'NewDocIcon', 'OfficeIcon', 'PackA4Icon', 'PassSendIcon', 'PercentIcon', 'PhoneIcon', 'PowerIcon', 'PumpkinIcon', 'ResponceFailIcon', 'ResponceOKIcon', 'SignDocsIcon', 'SoundIcon', 'UnionPayIcon', 'UserGeoLocationIcon', 'VisaIcon', 'WateringCanIcon'
+  'ActualBalanceIcon', 'AirPlaneIcon', 'BagIcon', 'BelarusianFlag', 'BriefcaseIcon', 'CardWithGemIcon', 'CarIcon', 'ChevronLeft', 'CinemaIcon', 'ClientIcon', 'ClockIcon', 'ComfortableCompIcon', 'CreditCardsIcon', 'DocsIcon', 'DollarIcon', 'DoneIcon', 'EarthIcon', 'EuroIcon', 'FullScreenIcon', 'GlassIcon', 'HeadphonesIcon', 'HeartIcon', 'HuaweiIcon', 'InterestGrowthIcon', 'JCBIcon', 'MailIcon', 'MapMarkerClusterIcon', 'MapMarkerSingleIcon', 'MasterCardIcon', 'MirIcon', 'MoneyInsuranceIcon', 'NewDocIcon', 'OfficeIcon', 'PackA4Icon', 'PassSendIcon', 'PercentIcon', 'PhoneIcon', 'PowerIcon', 'PumpkinIcon', 'ResponceFailIcon', 'ResponceOKIcon', 'SignDocsIcon', 'SoundIcon', 'UnionPayIcon', 'UserGeoLocationIcon', 'VisaIcon', 'WateringCanIcon'
 ]);
 
 export enum IconMap {
-  ActualBalanceIcon = 'ActualBalanceIcon', AirPlaneIcon = 'AirPlaneIcon', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowDownSolidIcon = 'ArrowDownSolidIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowRightIcon = 'ArrowRightIcon', ArrowTopRightIcon = 'ArrowTopRightIcon', ArrowUpIcon = 'ArrowUpIcon', ArrowUpSolidIcon = 'ArrowUpSolidIcon', AtmIcon = 'AtmIcon', BagIcon = 'BagIcon', BankIcon = 'BankIcon', BriefcaseIcon = 'BriefcaseIcon', BuildingIcon = 'BuildingIcon', BurgerIcon = 'BurgerIcon', Calendar2Icon = 'Calendar2Icon', CalendarCircleIcon = 'CalendarCircleIcon', CalendarIcon = 'CalendarIcon', CalendarTickIcon = 'CalendarTickIcon', Car2Icon = 'Car2Icon', CardIcon = 'CardIcon', CardPosIcon = 'CardPosIcon', CardTickIcon = 'CardTickIcon', CardWithGemIcon = 'CardWithGemIcon', CarIcon = 'CarIcon', ChartSquareIcon = 'ChartSquareIcon', ChevronLeft = 'ChevronLeft', CinemaIcon = 'CinemaIcon', ClientIcon = 'ClientIcon', ClockIcon = 'ClockIcon', CloseIcon = 'CloseIcon', ComfortableCompIcon = 'ComfortableCompIcon', CreditCardsIcon = 'CreditCardsIcon', DiscountShapeIcon = 'DiscountShapeIcon', DocDownloadIcon = 'DocDownloadIcon', DocIcon = 'DocIcon', DocIconMonoColor = 'DocIconMonoColor', DocsIcon = 'DocsIcon', DocumentText2Icon = 'DocumentText2Icon', DocumentTextIcon = 'DocumentTextIcon', DollarIcon = 'DollarIcon', DoneIcon = 'DoneIcon', DoneSimpleIcon = 'DoneSimpleIcon', EarthIcon = 'EarthIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', EmptyWalletIcon = 'EmptyWalletIcon', EuroIcon = 'EuroIcon', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'GeolocationIcon', GlassIcon = 'GlassIcon', GlobalIcon = 'GlobalIcon', GpsIcon = 'GpsIcon', GridIcon = 'GridIcon', HeadphonesIcon = 'HeadphonesIcon', HeartIcon = 'HeartIcon', HuaweiIcon = 'HuaweiIcon', InterestGrowthIcon = 'InterestGrowthIcon', InterestIcon = 'InterestIcon', JCBIcon = 'JCBIcon', LogoIcon = 'LogoIcon', LoupeIcon = 'LoupeIcon', MailIcon = 'MailIcon', MapMarkerClusterIcon = 'MapMarkerClusterIcon', MapMarkerSingleIcon = 'MapMarkerSingleIcon', MasterCardIcon = 'MasterCardIcon', MetroIcon = 'MetroIcon', MinusIcon = 'MinusIcon', MirIcon = 'MirIcon', MoneyIcon = 'MoneyIcon', MoneyInsuranceIcon = 'MoneyInsuranceIcon', MoneysIcon = 'MoneysIcon', MonitorMobileIcon = 'MonitorMobileIcon', NewDocIcon = 'NewDocIcon', OfficeIcon = 'OfficeIcon', OkIcon = 'OkIcon', PackA4Icon = 'PackA4Icon', PassSendIcon = 'PassSendIcon', PercentageRoundIcon = 'PercentageRoundIcon', PercentageSquareIcon = 'PercentageSquareIcon', PercentIcon = 'PercentIcon', PersonalCardIcon = 'PersonalCardIcon', PhoneIcon = 'PhoneIcon', PlayMarketIcon = 'PlayMarketIcon', PlusIcon = 'PlusIcon', PowerIcon = 'PowerIcon', Profile2UserIcon = 'Profile2UserIcon', ProfileIcon = 'ProfileIcon', PumpkinIcon = 'PumpkinIcon', ResponceFailIcon = 'ResponceFailIcon', ResponceOKIcon = 'ResponceOKIcon', RoundRubleIcon = 'RoundRubleIcon', SafeIcon = 'SafeIcon', ShieldTickIcon = 'ShieldTickIcon', SignDocsIcon = 'SignDocsIcon', SmallClockIcon = 'SmallClockIcon', SoundIcon = 'SoundIcon', StrongBoxIcon = 'StrongBoxIcon', TelegramIcon = 'TelegramIcon', UnionPayIcon = 'UnionPayIcon', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'UserSquareIcon', UserTickIcon = 'UserTickIcon', VisaIcon = 'VisaIcon', VKIcon = 'VKIcon', WalletAdd2Icon = 'WalletAdd2Icon', WalletAddIcon = 'WalletAddIcon', WalletIcon = 'WalletIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WateringCanIcon = 'WateringCanIcon', YoutubeIcon = 'YoutubeIcon'
+  ActualBalanceIcon = 'ActualBalanceIcon', AirPlaneIcon = 'AirPlaneIcon', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowDownSolidIcon = 'ArrowDownSolidIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowRightIcon = 'ArrowRightIcon', ArrowTopRightIcon = 'ArrowTopRightIcon', ArrowUpIcon = 'ArrowUpIcon', ArrowUpSolidIcon = 'ArrowUpSolidIcon', AtmIcon = 'AtmIcon', BagIcon = 'BagIcon', BankIcon = 'BankIcon', BelarusianFlag = 'BelarusianFlag', BriefcaseIcon = 'BriefcaseIcon', BuildingIcon = 'BuildingIcon', BurgerIcon = 'BurgerIcon', Calendar2Icon = 'Calendar2Icon', CalendarCircleIcon = 'CalendarCircleIcon', CalendarIcon = 'CalendarIcon', CalendarTickIcon = 'CalendarTickIcon', Car2Icon = 'Car2Icon', CardIcon = 'CardIcon', CardPosIcon = 'CardPosIcon', CardTickIcon = 'CardTickIcon', CardWithGemIcon = 'CardWithGemIcon', CarIcon = 'CarIcon', ChartSquareIcon = 'ChartSquareIcon', ChevronLeft = 'ChevronLeft', CinemaIcon = 'CinemaIcon', ClientIcon = 'ClientIcon', ClockIcon = 'ClockIcon', CloseIcon = 'CloseIcon', ComfortableCompIcon = 'ComfortableCompIcon', CreditCardsIcon = 'CreditCardsIcon', DiscountShapeIcon = 'DiscountShapeIcon', DocDownloadIcon = 'DocDownloadIcon', DocIcon = 'DocIcon', DocIconMonoColor = 'DocIconMonoColor', DocsIcon = 'DocsIcon', DocumentText2Icon = 'DocumentText2Icon', DocumentTextIcon = 'DocumentTextIcon', DollarIcon = 'DollarIcon', DoneIcon = 'DoneIcon', DoneSimpleIcon = 'DoneSimpleIcon', EarthIcon = 'EarthIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', EmptyWalletIcon = 'EmptyWalletIcon', EuroIcon = 'EuroIcon', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'GeolocationIcon', GlassIcon = 'GlassIcon', GlobalIcon = 'GlobalIcon', GpsIcon = 'GpsIcon', GridIcon = 'GridIcon', HeadphonesIcon = 'HeadphonesIcon', HeartIcon = 'HeartIcon', HuaweiIcon = 'HuaweiIcon', InterestGrowthIcon = 'InterestGrowthIcon', InterestIcon = 'InterestIcon', JCBIcon = 'JCBIcon', LogoIcon = 'LogoIcon', LoupeIcon = 'LoupeIcon', MailIcon = 'MailIcon', MapMarkerClusterIcon = 'MapMarkerClusterIcon', MapMarkerSingleIcon = 'MapMarkerSingleIcon', MasterCardIcon = 'MasterCardIcon', MetroIcon = 'MetroIcon', MinusIcon = 'MinusIcon', MirIcon = 'MirIcon', MoneyIcon = 'MoneyIcon', MoneyInsuranceIcon = 'MoneyInsuranceIcon', MoneysIcon = 'MoneysIcon', MonitorMobileIcon = 'MonitorMobileIcon', NewDocIcon = 'NewDocIcon', OfficeIcon = 'OfficeIcon', OkIcon = 'OkIcon', PackA4Icon = 'PackA4Icon', PassSendIcon = 'PassSendIcon', PercentageRoundIcon = 'PercentageRoundIcon', PercentageSquareIcon = 'PercentageSquareIcon', PercentIcon = 'PercentIcon', PersonalCardIcon = 'PersonalCardIcon', PhoneIcon = 'PhoneIcon', PlayMarketIcon = 'PlayMarketIcon', PlusIcon = 'PlusIcon', PowerIcon = 'PowerIcon', Profile2UserIcon = 'Profile2UserIcon', ProfileIcon = 'ProfileIcon', PumpkinIcon = 'PumpkinIcon', ResponceFailIcon = 'ResponceFailIcon', ResponceOKIcon = 'ResponceOKIcon', RoundRubleIcon = 'RoundRubleIcon', SafeIcon = 'SafeIcon', ShieldTickIcon = 'ShieldTickIcon', SignDocsIcon = 'SignDocsIcon', SmallClockIcon = 'SmallClockIcon', SoundIcon = 'SoundIcon', StrongBoxIcon = 'StrongBoxIcon', TelegramIcon = 'TelegramIcon', UnionPayIcon = 'UnionPayIcon', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'UserSquareIcon', UserTickIcon = 'UserTickIcon', VisaIcon = 'VisaIcon', VKIcon = 'VKIcon', WalletAdd2Icon = 'WalletAdd2Icon', WalletAddIcon = 'WalletAddIcon', WalletIcon = 'WalletIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WateringCanIcon = 'WateringCanIcon', YoutubeIcon = 'YoutubeIcon'
 }
 
 export enum IconTitleMap {
-  ActualBalanceIcon = 'Деньги', AirPlaneIcon = 'Самолёт', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowDownSolidIcon = 'Стрелка сплошная \'Вниз\'', ArrowLeftIcon = 'Стрелка \'Влево\'', ArrowRightIcon = 'Стрелка \'Вправо\'', ArrowTopRightIcon = 'Стрелка \'Вверх-право\'', ArrowUpIcon = 'Стрелка \'Вверх\'', ArrowUpSolidIcon = 'Стрелка сплошная \'Вверх\'', AtmIcon = 'Банкомат', BagIcon = 'Сумка', BankIcon = 'Банк', BriefcaseIcon = 'BriefcaseIcon', BuildingIcon = 'Здание с деревом', BurgerIcon = 'Бургер', Calendar2Icon = 'Календарь 2', CalendarCircleIcon = 'Скруглённый календарь', CalendarIcon = 'Календарь', CalendarTickIcon = 'Календарь с галочкой', Car2Icon = 'Машина2', CardIcon = 'Кред. карта', CardPosIcon = 'Кред. карта под наклоном', CardTickIcon = 'Кред. карта с галочкой', CardWithGemIcon = 'Карта с драгоценностями', CarIcon = 'Машина', ChartSquareIcon = 'Деньги внутри кошелька', ChevronLeft = 'Стрелка \'Вправо\'', CinemaIcon = 'Кинотеатр', ClientIcon = 'Клиент', ClockIcon = 'Часы', CloseIcon = 'Крестик', ComfortableCompIcon = 'Кресло', CreditCardsIcon = 'Кредитные карты', DiscountShapeIcon = 'Скидка', DocDownloadIcon = 'Скачать документ', DocIcon = 'Документ', DocIconMonoColor = 'Документ (одноцветный)', DocsIcon = 'Документы', DocumentText2Icon = 'Документы-2', DocumentTextIcon = 'Документ с текстом', DollarIcon = 'Доллар', DoneIcon = 'Зелёная \'галочка\' в круге', DoneSimpleIcon = 'Зелёная \'галочка\'', EarthIcon = 'Земля', EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом', EmptyWalletIcon = 'Пустой кошелёк', EuroIcon = 'Евро', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'Геолокация', GlassIcon = 'Зеркало', GlobalIcon = 'Глобус', GpsIcon = 'Gps', GridIcon = 'Сетка (белая)', HeadphonesIcon = 'HeadphonesIcon', HeartIcon = 'Сердце', HuaweiIcon = 'Лого «Huawei»', InterestGrowthIcon = 'Диаграмма роста', InterestIcon = 'Скидка', JCBIcon = 'JCB', LogoIcon = 'Logo', LoupeIcon = 'Лупа', MailIcon = 'E-mail', MapMarkerClusterIcon = 'Маркер карты', MapMarkerSingleIcon = 'Маркер карты РСХБ', MasterCardIcon = 'MasterCard', MetroIcon = 'Лого Метро', MinusIcon = 'Минус', MirIcon = 'МИР', MoneyIcon = 'Деньги', MoneyInsuranceIcon = 'Денежное страхование', MoneysIcon = 'Купюры', MonitorMobileIcon = 'Монитор и мобильный', NewDocIcon = 'Новый документ', OfficeIcon = 'Офис', OkIcon = 'Лого «Одноклассники»', PackA4Icon = 'Пачка бумаги А4', PassSendIcon = 'Бизнес', PercentageRoundIcon = 'Проценты (круг.)', PercentageSquareIcon = 'Проценты', PercentIcon = 'PercentIcon', PersonalCardIcon = 'Персональная карта', PhoneIcon = 'Телефон', PlayMarketIcon = 'Лого «PlayMarket»', PlusIcon = 'Плюс', PowerIcon = 'Щит', Profile2UserIcon = 'Профиль, 2 персоны', ProfileIcon = 'Профиль', PumpkinIcon = 'Тыква', ResponceFailIcon = 'Ошибка', ResponceOKIcon = 'Ок', RoundRubleIcon = 'Рубль (круг.)', SafeIcon = 'Сейф', ShieldTickIcon = 'Безопасность', SignDocsIcon = 'Подписанные документы', SmallClockIcon = 'Маленькие часы', SoundIcon = 'Звук', StrongBoxIcon = 'Ящик с замочной скважиной', TelegramIcon = 'Лого «Telegram»', UnionPayIcon = 'UnionPay', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'Пользователь в рамке', UserTickIcon = 'Пользователь', VisaIcon = 'Visa', VKIcon = 'Лого «VK»', WalletAdd2Icon = 'Пополнение карты', WalletAddIcon = 'Кошелёк с плюсом', WalletIcon = 'Кошелёк', WalletWithMoneyIcon = 'Кошелёк с деньгами', WateringCanIcon = 'Добавить продукт', YoutubeIcon = 'Лого «Youtube»'
+  ActualBalanceIcon = 'Деньги', AirPlaneIcon = 'Самолёт', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowDownSolidIcon = 'Стрелка сплошная \'Вниз\'', ArrowLeftIcon = 'Стрелка \'Влево\'', ArrowRightIcon = 'Стрелка \'Вправо\'', ArrowTopRightIcon = 'Стрелка \'Вверх-право\'', ArrowUpIcon = 'Стрелка \'Вверх\'', ArrowUpSolidIcon = 'Стрелка сплошная \'Вверх\'', AtmIcon = 'Банкомат', BagIcon = 'Сумка', BankIcon = 'Банк', BelarusianFlag = 'Белорусский флаг', BriefcaseIcon = 'BriefcaseIcon', BuildingIcon = 'Здание с деревом', BurgerIcon = 'Бургер', Calendar2Icon = 'Календарь 2', CalendarCircleIcon = 'Скруглённый календарь', CalendarIcon = 'Календарь', CalendarTickIcon = 'Календарь с галочкой', Car2Icon = 'Машина2', CardIcon = 'Кред. карта', CardPosIcon = 'Кред. карта под наклоном', CardTickIcon = 'Кред. карта с галочкой', CardWithGemIcon = 'Карта с драгоценностями', CarIcon = 'Машина', ChartSquareIcon = 'Деньги внутри кошелька', ChevronLeft = 'Стрелка \'Вправо\'', CinemaIcon = 'Кинотеатр', ClientIcon = 'Клиент', ClockIcon = 'Часы', CloseIcon = 'Крестик', ComfortableCompIcon = 'Кресло', CreditCardsIcon = 'Кредитные карты', DiscountShapeIcon = 'Скидка', DocDownloadIcon = 'Скачать документ', DocIcon = 'Документ', DocIconMonoColor = 'Документ (одноцветный)', DocsIcon = 'Документы', DocumentText2Icon = 'Документы-2', DocumentTextIcon = 'Документ с текстом', DollarIcon = 'Доллар', DoneIcon = 'Зелёная \'галочка\' в круге', DoneSimpleIcon = 'Зелёная \'галочка\'', EarthIcon = 'Земля', EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом', EmptyWalletIcon = 'Пустой кошелёк', EuroIcon = 'Евро', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'Геолокация', GlassIcon = 'Зеркало', GlobalIcon = 'Глобус', GpsIcon = 'Gps', GridIcon = 'Сетка (белая)', HeadphonesIcon = 'HeadphonesIcon', HeartIcon = 'Сердце', HuaweiIcon = 'Лого «Huawei»', InterestGrowthIcon = 'Диаграмма роста', InterestIcon = 'Скидка', JCBIcon = 'JCB', LogoIcon = 'Logo', LoupeIcon = 'Лупа', MailIcon = 'E-mail', MapMarkerClusterIcon = 'Маркер карты', MapMarkerSingleIcon = 'Маркер карты РСХБ', MasterCardIcon = 'MasterCard', MetroIcon = 'Лого Метро', MinusIcon = 'Минус', MirIcon = 'МИР', MoneyIcon = 'Деньги', MoneyInsuranceIcon = 'Денежное страхование', MoneysIcon = 'Купюры', MonitorMobileIcon = 'Монитор и мобильный', NewDocIcon = 'Новый документ', OfficeIcon = 'Офис', OkIcon = 'Лого «Одноклассники»', PackA4Icon = 'Пачка бумаги А4', PassSendIcon = 'Бизнес', PercentageRoundIcon = 'Проценты (круг.)', PercentageSquareIcon = 'Проценты', PercentIcon = 'PercentIcon', PersonalCardIcon = 'Персональная карта', PhoneIcon = 'Телефон', PlayMarketIcon = 'Лого «PlayMarket»', PlusIcon = 'Плюс', PowerIcon = 'Щит', Profile2UserIcon = 'Профиль, 2 персоны', ProfileIcon = 'Профиль', PumpkinIcon = 'Тыква', ResponceFailIcon = 'Ошибка', ResponceOKIcon = 'Ок', RoundRubleIcon = 'Рубль (круг.)', SafeIcon = 'Сейф', ShieldTickIcon = 'Безопасность', SignDocsIcon = 'Подписанные документы', SmallClockIcon = 'Маленькие часы', SoundIcon = 'Звук', StrongBoxIcon = 'Ящик с замочной скважиной', TelegramIcon = 'Лого «Telegram»', UnionPayIcon = 'UnionPay', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'Пользователь в рамке', UserTickIcon = 'Пользователь', VisaIcon = 'Visa', VKIcon = 'Лого «VK»', WalletAdd2Icon = 'Пополнение карты', WalletAddIcon = 'Кошелёк с плюсом', WalletIcon = 'Кошелёк', WalletWithMoneyIcon = 'Кошелёк с деньгами', WateringCanIcon = 'Добавить продукт', YoutubeIcon = 'Лого «Youtube»'
 }
 
 /**
@@ -19,7 +19,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка сплошная \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Стрелка сплошная \'Вверх\'', 'Банкомат', 'Сумка', 'Банк', 'BriefcaseIcon', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Стрелка \'Вправо\'', 'Кинотеатр', 'Клиент', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'HeadphonesIcon', 'Сердце', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'E-mail', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'PercentIcon', 'Персональная карта', 'Телефон', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Ошибка', 'Ок', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт', 'Лого «Youtube»'
+ *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка сплошная \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Стрелка сплошная \'Вверх\'', 'Банкомат', 'Сумка', 'Банк', 'Белорусский флаг', 'BriefcaseIcon', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Стрелка \'Вправо\'', 'Кинотеатр', 'Клиент', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'HeadphonesIcon', 'Сердце', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'E-mail', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'PercentIcon', 'Персональная карта', 'Телефон', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Ошибка', 'Ок', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт', 'Лого «Youtube»'
  * ]
  */
-export type IconName = '' | 'ActualBalanceIcon' | 'AirPlaneIcon' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowDownSolidIcon' | 'ArrowLeftIcon' | 'ArrowRightIcon' | 'ArrowTopRightIcon' | 'ArrowUpIcon' | 'ArrowUpSolidIcon' | 'AtmIcon' | 'BagIcon' | 'BankIcon' | 'BriefcaseIcon' | 'BuildingIcon' | 'BurgerIcon' | 'Calendar2Icon' | 'CalendarCircleIcon' | 'CalendarIcon' | 'CalendarTickIcon' | 'Car2Icon' | 'CardIcon' | 'CardPosIcon' | 'CardTickIcon' | 'CardWithGemIcon' | 'CarIcon' | 'ChartSquareIcon' | 'ChevronLeft' | 'CinemaIcon' | 'ClientIcon' | 'ClockIcon' | 'CloseIcon' | 'ComfortableCompIcon' | 'CreditCardsIcon' | 'DiscountShapeIcon' | 'DocDownloadIcon' | 'DocIcon' | 'DocIconMonoColor' | 'DocsIcon' | 'DocumentText2Icon' | 'DocumentTextIcon' | 'DollarIcon' | 'DoneIcon' | 'DoneSimpleIcon' | 'EarthIcon' | 'EmptyWalletChangeIcon' | 'EmptyWalletIcon' | 'EuroIcon' | 'FullScreenIcon' | 'GeolocationIcon' | 'GlassIcon' | 'GlobalIcon' | 'GpsIcon' | 'GridIcon' | 'HeadphonesIcon' | 'HeartIcon' | 'HuaweiIcon' | 'InterestGrowthIcon' | 'InterestIcon' | 'JCBIcon' | 'LogoIcon' | 'LoupeIcon' | 'MailIcon' | 'MapMarkerClusterIcon' | 'MapMarkerSingleIcon' | 'MasterCardIcon' | 'MetroIcon' | 'MinusIcon' | 'MirIcon' | 'MoneyIcon' | 'MoneyInsuranceIcon' | 'MoneysIcon' | 'MonitorMobileIcon' | 'NewDocIcon' | 'OfficeIcon' | 'OkIcon' | 'PackA4Icon' | 'PassSendIcon' | 'PercentageRoundIcon' | 'PercentageSquareIcon' | 'PercentIcon' | 'PersonalCardIcon' | 'PhoneIcon' | 'PlayMarketIcon' | 'PlusIcon' | 'PowerIcon' | 'Profile2UserIcon' | 'ProfileIcon' | 'PumpkinIcon' | 'ResponceFailIcon' | 'ResponceOKIcon' | 'RoundRubleIcon' | 'SafeIcon' | 'ShieldTickIcon' | 'SignDocsIcon' | 'SmallClockIcon' | 'SoundIcon' | 'StrongBoxIcon' | 'TelegramIcon' | 'UnionPayIcon' | 'UserGeoLocationIcon' | 'UserSquareIcon' | 'UserTickIcon' | 'VisaIcon' | 'VKIcon' | 'WalletAdd2Icon' | 'WalletAddIcon' | 'WalletIcon' | 'WalletWithMoneyIcon' | 'WateringCanIcon' | 'YoutubeIcon';
+export type IconName = '' | 'ActualBalanceIcon' | 'AirPlaneIcon' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowDownSolidIcon' | 'ArrowLeftIcon' | 'ArrowRightIcon' | 'ArrowTopRightIcon' | 'ArrowUpIcon' | 'ArrowUpSolidIcon' | 'AtmIcon' | 'BagIcon' | 'BankIcon' | 'BelarusianFlag' | 'BriefcaseIcon' | 'BuildingIcon' | 'BurgerIcon' | 'Calendar2Icon' | 'CalendarCircleIcon' | 'CalendarIcon' | 'CalendarTickIcon' | 'Car2Icon' | 'CardIcon' | 'CardPosIcon' | 'CardTickIcon' | 'CardWithGemIcon' | 'CarIcon' | 'ChartSquareIcon' | 'ChevronLeft' | 'CinemaIcon' | 'ClientIcon' | 'ClockIcon' | 'CloseIcon' | 'ComfortableCompIcon' | 'CreditCardsIcon' | 'DiscountShapeIcon' | 'DocDownloadIcon' | 'DocIcon' | 'DocIconMonoColor' | 'DocsIcon' | 'DocumentText2Icon' | 'DocumentTextIcon' | 'DollarIcon' | 'DoneIcon' | 'DoneSimpleIcon' | 'EarthIcon' | 'EmptyWalletChangeIcon' | 'EmptyWalletIcon' | 'EuroIcon' | 'FullScreenIcon' | 'GeolocationIcon' | 'GlassIcon' | 'GlobalIcon' | 'GpsIcon' | 'GridIcon' | 'HeadphonesIcon' | 'HeartIcon' | 'HuaweiIcon' | 'InterestGrowthIcon' | 'InterestIcon' | 'JCBIcon' | 'LogoIcon' | 'LoupeIcon' | 'MailIcon' | 'MapMarkerClusterIcon' | 'MapMarkerSingleIcon' | 'MasterCardIcon' | 'MetroIcon' | 'MinusIcon' | 'MirIcon' | 'MoneyIcon' | 'MoneyInsuranceIcon' | 'MoneysIcon' | 'MonitorMobileIcon' | 'NewDocIcon' | 'OfficeIcon' | 'OkIcon' | 'PackA4Icon' | 'PassSendIcon' | 'PercentageRoundIcon' | 'PercentageSquareIcon' | 'PercentIcon' | 'PersonalCardIcon' | 'PhoneIcon' | 'PlayMarketIcon' | 'PlusIcon' | 'PowerIcon' | 'Profile2UserIcon' | 'ProfileIcon' | 'PumpkinIcon' | 'ResponceFailIcon' | 'ResponceOKIcon' | 'RoundRubleIcon' | 'SafeIcon' | 'ShieldTickIcon' | 'SignDocsIcon' | 'SmallClockIcon' | 'SoundIcon' | 'StrongBoxIcon' | 'TelegramIcon' | 'UnionPayIcon' | 'UserGeoLocationIcon' | 'UserSquareIcon' | 'UserTickIcon' | 'VisaIcon' | 'VKIcon' | 'WalletAdd2Icon' | 'WalletAddIcon' | 'WalletIcon' | 'WalletWithMoneyIcon' | 'WateringCanIcon' | 'YoutubeIcon';

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

@@ -1,5 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Headline } from '../../components/Headline/Headline';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { VNode } from '../../model/VNode';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { BenefitsList } from '../BenefitsList/BenefitsList';
 import { renderButtonsSection } from '../Button/renderButtonsSection';
@@ -9,21 +11,23 @@ import { RichText } from '../RichText/RichText';
 import { Tags } from '../Tags/Tags';
 import type { BaseProductTileContent } from './BaseProductTileContent';
 
-interface BaseProductTileProps extends BaseProductTileContent {
-  className?: string;
+interface BaseProductTileProps extends UniBlockProps, BaseProductTileContent {
   isInsetTitle?: boolean;
 }
 
 export const BaseProductTile = JSX<BaseProductTileProps>(
   ({
     className,
+    padding,
+    defaultPadding,
     title,
     description,
     headlineVersion = 'L',
     align = 'text-left',
     isInsetTitle = true,
-    benefits,
     benefitsVersion,
+    isTabularBenefits,
+    benefits,
     __html,
     items,
     isDotted = true,
@@ -31,7 +35,7 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     tags,
     buttons,
     image,
-    imageOptions: { imageAlign, directionRight = true } = {},
+    imageOptions: { imageAlign = 'end', directionRight = true, isBackground } = {},
     children,
   }) => {
     const img = image?.src ? <Img image={image} /> : null;
@@ -48,13 +52,19 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     return (
       <BaseTile
         className={className}
+        padding={padding}
+        defaultPadding={defaultPadding}
         {...(isInsetTitle ? { insetTitle: headline } : { title: headline })}
-        {...(directionRight ? { rightImage: img } : { leftImage: img })}
+        {...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight))}
         imageAlign={imageAlign}
         buttons={renderButtonsSection(buttons)}
       >
         <div className="flex flex-col gap-m">
-          <BenefitsList benefitsVersion={benefitsVersion} benefits={benefits} />
+          <BenefitsList
+            benefitsVersion={benefitsVersion}
+            isTabularBenefits={isTabularBenefits}
+            benefits={benefits}
+          />
           {__html ? <RichText __html={__html} /> : null}
           {items?.length ? (
             <List items={items} isDotted={isDotted} listItemSize={listItemSize} />
@@ -66,3 +76,6 @@ export const BaseProductTile = JSX<BaseProductTileProps>(
     );
   },
 );
+
+const leftOrRightImage = (img: VNode, directionRight: boolean) =>
+  directionRight ? { rightImage: img } : { leftImage: img };

package/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -9,11 +9,13 @@ import type { TagsContent } from '../../ui-kit/Tags/TagsContent';
 import type { BenefitsListContent } from '../BenefitsList/BenefitsListContent';
 
 /** @title Доп. настройки картинки */
-interface TileImageOptions {
+export interface TileImageOptions {
   /** @title Картинка справа/текст слева */
   directionRight?: boolean;
   /** @title Выравнивание изображения */
   imageAlign?: Align;
+  /** @title Фоновое изображение */
+  isBackground?: boolean;
 }
 
 export type BaseProductTileContent = HeadlineProps &

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

@@ -1,56 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
-import { Img } from '../Img/Img';
-import { Paragraph } from '../Paragraph/Paragraph';
-import { Text } from '../Text/Text';
-import type { BenefitItemContent } from './BenefitItemContent';
-import { labelSize } from './labelSize';
+import type { ComplexBenefitContent } from './BenefitItemContent';
+import { renderBenefitIcon } from './renderBenefitIcon';
+import { renderBenefitText } from './renderBenefitText';
 
-export interface BenefitGeneralProps extends BenefitItemContent {
+export type BenefitItemProps = ComplexBenefitContent & {
   className?: string;
   benefitsVersion?: IconVersion;
-}
+};
 
-export const BenefitItem = JSX<BenefitGeneralProps>(
-  ({ className, icon, label, description, benefitsVersion = 'normal' }) => (
-    <div className={style('flex gap-s', description ? 'items-start' : 'items-center', className)}>
-      {icon ? (
-        <div className={getBenefitIconBgStyle(benefitsVersion)}>
-          <Img
-            className="w-6 h-6"
-            image={{ ...icon, iconVersion: icon.iconVersion || benefitsVersion }}
-          />
-        </div>
-      ) : null}
-      <div className="gap-0.5">
-        {label ? (
-          <Text color="text-primary-text group-data-secondary:text-white" size={labelSize}>
-            {label}
-          </Text>
-        ) : null}
-        {description ? (
-          <Paragraph
-            font="font-light"
-            size="text-m"
-            color="text-secondary-text group-data-secondary:text-white"
-          >
-            {description}
-          </Paragraph>
-        ) : null}
-      </div>
-    </div>
-  ),
-);
-
-function getBenefitIconBgStyle(benefitsVersion: IconVersion) {
-  const bgColorStyle =
-    benefitsVersion === 'normal'
-      ? 'bg-secondary-light text-primary-main'
-      : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black';
-
-  return style(
-    'w-12 h-12 min-w-12 p-2.5 box-border flex items-center justify-center rounded-icon',
-    bgColorStyle,
-  );
-}
+export const BenefitItem = JSX<BenefitItemProps>(({ className, benefitsVersion, ..._ }) => (
+  <div
+    className={style(
+      'flex gap-s',
+      'description' in _ && _.description ? 'items-start' : 'items-center',
+      className,
+    )}
+  >
+    {'icon' in _ ? renderBenefitIcon(_.icon, benefitsVersion) : null}
+    <div>{renderBenefitText(_)}</div>
+  </div>
+));

package/src/ui-kit/BenefitItem/renderBenefitDescription.tsx

@@ -0,0 +1,13 @@
+import { Paragraph } from '../Paragraph/Paragraph';
+
+export const renderBenefitDescription = (description?: string, i?: number) =>
+  description ? (
+    <Paragraph
+      key={`description-${i}`}
+      font="font-light"
+      size="text-m"
+      color="text-secondary-text group-data-secondary:text-white"
+    >
+      {description}
+    </Paragraph>
+  ) : null;

package/src/ui-kit/BenefitItem/renderBenefitIcon.tsx

@@ -0,0 +1,24 @@
+import type { IconVersion } from '../../model/IconVersion';
+import type { Picture } from '../../model/Picture';
+import { style } from '../../utils/style';
+import { Img } from '../Img/Img';
+
+export const renderBenefitIcon = (
+  icon: Picture | undefined,
+  benefitsVersion: IconVersion = 'normal',
+) =>
+  icon ? (
+    <div
+      className={style(
+        'w-12 h-12 min-w-12 box-border flex items-center justify-center rounded-icon',
+        benefitsVersion === 'normal'
+          ? 'bg-secondary-light text-primary-main'
+          : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black',
+      )}
+    >
+      <Img
+        className="w-6 h-6"
+        image={{ ...icon, iconVersion: icon.iconVersion || benefitsVersion }}
+      />
+    </div>
+  ) : null;