@redneckz/wildless-cms-uni-blocks 0.3.68 → 0.3.69

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

@@ -1,27 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { IconTitleMap } from '../../icons/IconName';
+import type { IconVersion } from '../../model/IconVersion';
 import { projectSettings } from '../../ProjectSettings';
 import type { IconProps } from './IconProps';
 
+const svgUseStyleMap: Record<IconVersion, string> = {
+  normal: 'text-primary-main',
+  black: 'text-black',
+  white: 'text-black invert',
+};
+
 export const Icon = JSX<IconProps>(
   ({
     className = '',
+    imageClassName = '',
     name = '',
     alt = `Иконка ${IconTitleMap[name] || name}`,
     title = alt,
-    iconVersion,
+    iconVersion = 'normal',
     asSVG,
     ...imgProps
   }) => {
     const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
-    const svgUseStyle = iconVersion === 'white' ? 'text-black invert' : 'text-primary-main';
 
     if (asSVG) {
       return (
         <svg className={className} {...imgProps} aria-hidden="true">
           {title ? <title>{title}</title> : null}
           {alt ? <desc>{alt}</desc> : null}
-          <use className={svgUseStyle} href={`${href}#icon`} xlinkHref={`${href}#icon`} />
+          <use
+            className={`${svgUseStyleMap[iconVersion]} ${imageClassName}`}
+            href={`${href}#icon`}
+            xlinkHref={`${href}#icon`}
+          />
         </svg>
       );
     }

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

@@ -18,6 +18,7 @@ export interface IconCompatibilityFields {
 
 export type IconProps = IconCompatibilityFields & {
   className?: string;
+  imageClassName?: string;
   name?: IconName;
   /** @hidden */
   iconVersion?: IconVersion;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.68",
+  "version": "0.3.69",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Footer/MediaButton.tsx

@@ -52,7 +52,7 @@ interface MediaButtonProps {
   version?: BlockVersion;
 }
 
-export const MediaButton = JSX<MediaButtonProps>(({ href, version }) => {
+export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' }) => {
   const { icon, width, height, label } =
     ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
 
@@ -60,18 +60,30 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version }) => {
 
   const classes =
     version === 'secondary'
-      ? 'text-white hover:text-primary-main hover:bg-white'
-      : 'text-primary-main hover:text-white hover:bg-primary-main hover:border-primary-main';
+      ? 'bg-secondary-light hover:bg-secondary-hover'
+      : 'border-main-divider border-solid border-[1px] hover:bg-primary-main';
+
+  const isPrimary = version === 'primary';
 
   return (
     <a
-      className={` flex items-center justify-center border border-solid rounded-md border-main-divider no-underline outline-none w-14 h-14 box-border ${classes}`}
+      className={`flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${
+        isPrimary ? 'hover:text-black' : ''
+      }`}
       href={href}
       aria-label={label}
       target="_blank"
       rel="noopener noreferrer"
     >
-      {icon ? <Img image={icon} width={width} height={height} asSVG className="block" /> : null}
+      {icon ? (
+        <Img
+          image={{ ...icon, iconVersion: 'normal' }}
+          imageClassName={isPrimary ? 'group-hover:text-white' : ''}
+          width={width}
+          height={height}
+          asSVG
+        />
+      ) : null}
     </a>
   );
 });

package/src/components/GracePeriod/GracePeriodContent.ts

@@ -1,4 +1,5 @@
 import type { Picture } from '../../model/Picture';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 
 interface Month {
   /** @title Название месяца */
@@ -29,9 +30,7 @@ interface CalendarItem {
 /**
  * @title Льготный период
  */
-export interface GracePeriodContent {
-  /** @title Заголовок */
-  title?: string;
+export interface GracePeriodContent extends HeadingContent {
   /** @title Описание */
   description?: string;
   /** @title Календарь */

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { IconName } from '../../icons/IconName';
+import type { IconVersion } from '../../model/IconVersion';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { UniBlockProps } from '../../types';
 import { Img } from '../../ui-kit/Img/Img';
@@ -21,9 +21,9 @@ const LINKS_COLORS_MAP: Record<BgColorVersion, string> = {
   'bg-white': 'text-secondary-light hover:text-secondary-hover',
   transparent: 'text-white',
 };
-const LINKS_ICON_NAME_MAP: Record<BgColorVersion, IconName> = {
-  'bg-white': 'GridIcon',
-  transparent: 'GridIconWhite',
+const LINKS_ICON_VERSION_MAP: Record<BgColorVersion, IconVersion> = {
+  'bg-white': 'black',
+  transparent: 'white',
 };
 
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
@@ -52,13 +52,21 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           className={`mr-5 ${COLORS_MAP[bgColor]}`}
           ariaLabel="Поиск по сайту"
         >
-          <Img image="LoupeIcon" className="h-full" asSVG />
+          <Img
+            image={{ icon: 'LoupeIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }}
+            className="h-full"
+            asSVG
+          />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
           className={`${LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
           ariaLabel="Дополнительные ссылки"
         >
-          <Img image={LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG />
+          <Img
+            image={{ icon: 'GridIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }}
+            className="h-full bg-secondary-light rounded-full"
+            asSVG
+          />
         </HeaderSecondaryMenuButton>
       </div>
     );

package/src/components/Header/HeaderTop.tsx

@@ -16,7 +16,7 @@ export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
         aria-label="Открыть меню"
       >
         <Img
-          image={bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite'}
+          image={{ icon: 'BurgerIcon', iconVersion: bgColor === 'bg-white' ? 'black' : 'white' }}
           className="text-primary-text"
           width="24"
           height="24"

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -8,6 +8,9 @@ export function renderBackwardButton(
   version: BlockVersion,
   className: string,
 ) {
+  const iconVersion = version === 'primary' ? 'white' : 'black';
+  const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
+
   return (
     <div className={`flex items-center ${className}`}>
       <Button
@@ -17,7 +20,7 @@ export function renderBackwardButton(
         ariaLabel={button?.text}
         href={button?.href}
       >
-        <Img className="w-4 h-4" image={button?.icon || { icon: 'ArrowLeftIcon' }} asSVG />
+        <Img className="w-4 h-4" image={{ ...backwardIcon, iconVersion }} asSVG />
       </Button>
       {button?.text ? <span className="text-m-md font-light">{button.text}</span> : null}
     </div>

package/src/components/Recommendation/RecommendationCard.tsx

@@ -17,7 +17,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
   ({ context, className = '', title, description, items, image, version, socialMedia }) => {
     return (
       <section
-        className={`border border-solid box-border p-[30px] w-[524px] ${className}`}
+        className={`border border-solid box-border p-[30px] min-w-[524px] ${className}`}
         role="listitem"
       >
         <BaseTile

package/src/icons/ArrowDownIcon.svg

@@ -1,4 +1,4 @@
 <svg title="Стрелка 'Вниз'" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.8416 10.709L11.6582 12.8923C11.0166 13.534 9.96657 13.534 9.3249 12.8923L3.8999 7.45898" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M17.1001 7.45898L16.2334 8.32565" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.8416 10.709L11.6582 12.8923C11.0166 13.534 9.96657 13.534 9.3249 12.8923L3.8999 7.45898" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.1001 7.45898L16.2334 8.32565" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/icons/ArrowUpIcon.svg

@@ -1,4 +1,4 @@
 <svg title="Стрелка вверх" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.3416 9.29163L11.1582 7.10829C10.5166 6.46662 9.46657 6.46662 8.8249 7.10829L3.3999 12.5416" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M16.6001 12.5416L15.7334 11.675" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.3416 9.29163L11.1582 7.10829C10.5166 6.46662 9.46657 6.46662 8.8249 7.10829L3.3999 12.5416" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.6001 12.5416L15.7334 11.675" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/icons/GridIcon.svg

@@ -1,4 +1,3 @@
-<svg title="Сетка" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 33">
-    <rect fill="currentColor" width="32" height="32" y=".5" rx="16"/>
-    <path fill="#000000" d="M13 11.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM13 16.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM11.5 23a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM18 11.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM16.5 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM18 21.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM21.5 13a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM23 16.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM21.5 23a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/>
+<svg title="Сетка (белая)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 33">
+  <path fill="currentColor" d="M13 11.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM13 16.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM11.5 23a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM18 11.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM16.5 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM18 21.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM21.5 13a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM23 16.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM21.5 23a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/>
 </svg>

package/src/icons/IconName.ts

@@ -1,13 +1,166 @@
-
 // Generated. Do not touch
 /* eslint-disable max-lines */
 
 export enum IconMap {
-  ActualBalanceIcon = 'ActualBalanceIcon', AirPlane = 'AirPlane', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowsRewindRight = 'ArrowsRewindRight', ArrowUpIcon = 'ArrowUpIcon', AtmIcon = 'AtmIcon', BankIcon = 'BankIcon', BurgerIcon = 'BurgerIcon', BurgerIconWhite = 'BurgerIconWhite', Calendar2Icon = 'Calendar2Icon', CalendarCircleIcon = 'CalendarCircleIcon', CalendarIcon = 'CalendarIcon', CalendarTickIcon = 'CalendarTickIcon', CalendarWhiteIcon = 'CalendarWhiteIcon', CardIcon = 'CardIcon', CardPosIcon = 'CardPosIcon', CardTickIcon = 'CardTickIcon', CardWithGemIcon = 'CardWithGemIcon', CarIcon = 'CarIcon', ChartSquareIcon = 'ChartSquareIcon', CinemaIcon = 'CinemaIcon', ClockIcon = 'ClockIcon', CloseIcon = 'CloseIcon', ComfortableCompIcon = 'ComfortableCompIcon', CreditCardsIcon = 'CreditCardsIcon', DiscountShapeIcon = 'DiscountShapeIcon', DocIcon = 'DocIcon', DocIconMonoColor = 'DocIconMonoColor', DocsIcon = 'DocsIcon', DocumentTextIcon = 'DocumentTextIcon', DollarIcon = 'DollarIcon', EarthIcon = 'EarthIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', EmptyWalletIcon = 'EmptyWalletIcon', EmptyWalletWhiteIcon = 'EmptyWalletWhiteIcon', EuroIcon = 'EuroIcon', GeolocationIcon = 'GeolocationIcon', GlassIcon = 'GlassIcon', GlobalIcon = 'GlobalIcon', GpsIcon = 'GpsIcon', GridIcon = 'GridIcon', GridIconWhite = 'GridIconWhite', InterestGrowthIcon = 'InterestGrowthIcon', InterestIcon = 'InterestIcon', JCBIcon = 'JCBIcon', LoupeIcon = 'LoupeIcon', MasterCardIcon = 'MasterCardIcon', MinusIcon = 'MinusIcon', MirIcon = 'MirIcon', MoneyIcon = 'MoneyIcon', MoneyInsuranceIcon = 'MoneyInsuranceIcon', MonitorMobileIcon = 'MonitorMobileIcon', NewDocIcon = 'NewDocIcon', OfficeIcon = 'OfficeIcon', OkIcon = 'OkIcon', PassSendIcon = 'PassSendIcon', PercentageRoundIcon = 'PercentageRoundIcon', PercentageSquareIcon = 'PercentageSquareIcon', PercentageSquareWhiteIcon = 'PercentageSquareWhiteIcon', PersonalCardIcon = 'PersonalCardIcon', PlayMarketIcon = 'PlayMarketIcon', PlusIcon = 'PlusIcon', PowerIcon = 'PowerIcon', Profile2UserIcon = 'Profile2UserIcon', ProfileIcon = 'ProfileIcon', PumpkinIcon = 'PumpkinIcon', RoundRubleIcon = 'RoundRubleIcon', SafeIcon = 'SafeIcon', ShieldTickIcon = 'ShieldTickIcon', SignDocsIcon = 'SignDocsIcon', SmallClockIcon = 'SmallClockIcon', SoundIcon = 'SoundIcon', TelegramIcon = 'TelegramIcon', UnionPayIcon = 'UnionPayIcon', UserTickIcon = 'UserTickIcon', VisaIcon = 'VisaIcon', VKIcon = 'VKIcon', WalletAdd2Icon = 'WalletAdd2Icon', WalletAddIcon = 'WalletAddIcon', WalletIcon = 'WalletIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WateringCan = 'WateringCan'
+  ActualBalanceIcon = 'ActualBalanceIcon',
+  AirPlane = 'AirPlane',
+  AppleIcon = 'AppleIcon',
+  ArrowDownIcon = 'ArrowDownIcon',
+  ArrowLeftIcon = 'ArrowLeftIcon',
+  ArrowUpIcon = 'ArrowUpIcon',
+  AtmIcon = 'AtmIcon',
+  BankIcon = 'BankIcon',
+  BurgerIcon = 'BurgerIcon',
+  Calendar2Icon = 'Calendar2Icon',
+  CalendarCircleIcon = 'CalendarCircleIcon',
+  CalendarIcon = 'CalendarIcon',
+  CalendarTickIcon = 'CalendarTickIcon',
+  CardIcon = 'CardIcon',
+  CardPosIcon = 'CardPosIcon',
+  CardTickIcon = 'CardTickIcon',
+  CardWithGemIcon = 'CardWithGemIcon',
+  CarIcon = 'CarIcon',
+  ChartSquareIcon = 'ChartSquareIcon',
+  CinemaIcon = 'CinemaIcon',
+  ClockIcon = 'ClockIcon',
+  CloseIcon = 'CloseIcon',
+  ComfortableCompIcon = 'ComfortableCompIcon',
+  CreditCardsIcon = 'CreditCardsIcon',
+  DiscountShapeIcon = 'DiscountShapeIcon',
+  DocIcon = 'DocIcon',
+  DocIconMonoColor = 'DocIconMonoColor',
+  DocsIcon = 'DocsIcon',
+  DocumentTextIcon = 'DocumentTextIcon',
+  DollarIcon = 'DollarIcon',
+  EarthIcon = 'EarthIcon',
+  EmptyWalletChangeIcon = 'EmptyWalletChangeIcon',
+  EmptyWalletIcon = 'EmptyWalletIcon',
+  EuroIcon = 'EuroIcon',
+  GeolocationIcon = 'GeolocationIcon',
+  GlassIcon = 'GlassIcon',
+  GlobalIcon = 'GlobalIcon',
+  GpsIcon = 'GpsIcon',
+  GridIcon = 'GridIcon',
+  InterestGrowthIcon = 'InterestGrowthIcon',
+  InterestIcon = 'InterestIcon',
+  JCBIcon = 'JCBIcon',
+  LoupeIcon = 'LoupeIcon',
+  MasterCardIcon = 'MasterCardIcon',
+  MinusIcon = 'MinusIcon',
+  MirIcon = 'MirIcon',
+  MoneyIcon = 'MoneyIcon',
+  MoneyInsuranceIcon = 'MoneyInsuranceIcon',
+  MonitorMobileIcon = 'MonitorMobileIcon',
+  NewDocIcon = 'NewDocIcon',
+  OfficeIcon = 'OfficeIcon',
+  OkIcon = 'OkIcon',
+  PassSendIcon = 'PassSendIcon',
+  PercentageRoundIcon = 'PercentageRoundIcon',
+  PercentageSquareIcon = 'PercentageSquareIcon',
+  PersonalCardIcon = 'PersonalCardIcon',
+  PlayMarketIcon = 'PlayMarketIcon',
+  PlusIcon = 'PlusIcon',
+  PowerIcon = 'PowerIcon',
+  Profile2UserIcon = 'Profile2UserIcon',
+  ProfileIcon = 'ProfileIcon',
+  PumpkinIcon = 'PumpkinIcon',
+  RoundRubleIcon = 'RoundRubleIcon',
+  SafeIcon = 'SafeIcon',
+  ShieldTickIcon = 'ShieldTickIcon',
+  SignDocsIcon = 'SignDocsIcon',
+  SmallClockIcon = 'SmallClockIcon',
+  SoundIcon = 'SoundIcon',
+  TelegramIcon = 'TelegramIcon',
+  UnionPayIcon = 'UnionPayIcon',
+  UserTickIcon = 'UserTickIcon',
+  VisaIcon = 'VisaIcon',
+  VKIcon = 'VKIcon',
+  WalletAdd2Icon = 'WalletAdd2Icon',
+  WalletAddIcon = 'WalletAddIcon',
+  WalletIcon = 'WalletIcon',
+  WalletWithMoneyIcon = 'WalletWithMoneyIcon',
+  WateringCan = 'WateringCan',
 }
 
 export enum IconTitleMap {
-  ActualBalanceIcon = 'Деньги', AirPlane = 'Самолет', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowLeftIcon = 'Стрелка', ArrowsRewindRight = 'Стрелка', ArrowUpIcon = 'Стрелка вверх', AtmIcon = 'Банкомат', BankIcon = 'Банк', BurgerIcon = 'Бургер', BurgerIconWhite = 'Бургер (белый)', Calendar2Icon = 'Календарь 2', CalendarCircleIcon = 'Скруглённый календарь', CalendarIcon = 'Календарь', CalendarTickIcon = 'Календарь с галочкой', CalendarWhiteIcon = 'Календарь белый', CardIcon = 'Кред. карта', CardPosIcon = 'Кред. карта под наклоном', CardTickIcon = 'Кред. карта с галочкой', CardWithGemIcon = 'Карта с драгоценностями', CarIcon = 'Машина', ChartSquareIcon = 'Деньги внутри кошелька', CinemaIcon = 'Кино', ClockIcon = 'Часы', CloseIcon = 'Крестик', ComfortableCompIcon = 'Кресло', CreditCardsIcon = 'Кредитные карты', DiscountShapeIcon = 'Скидка', DocIcon = 'Документ', DocIconMonoColor = 'Документ (одноцветный)', DocsIcon = 'Документы', DocumentTextIcon = 'Документ с текстом', DollarIcon = 'Доллар', EarthIcon = 'Земля', EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом', EmptyWalletIcon = 'Пустой кошелёк', EmptyWalletWhiteIcon = 'Пустой кошелёк (белый)', EuroIcon = 'Евро', GeolocationIcon = 'Геолокация', GlassIcon = 'Зеркало', GlobalIcon = 'Глобус', GpsIcon = 'Gps', GridIcon = 'Сетка', GridIconWhite = 'Сетка (белая)', InterestGrowthIcon = 'Диаграмма роста', InterestIcon = 'Скидка', JCBIcon = 'JCB', LoupeIcon = 'Лупа', MasterCardIcon = 'MasterCard', MinusIcon = 'Минус', MirIcon = 'МИР', MoneyIcon = 'Деньги', MoneyInsuranceIcon = 'Денежное страхование', MonitorMobileIcon = 'Монитор и мобильный', NewDocIcon = 'Новый документ', OfficeIcon = 'Офис', OkIcon = 'Лого «Одноклассники»', PassSendIcon = 'Бизнес', PercentageRoundIcon = 'Проценты (круг.)', PercentageSquareIcon = 'Проценты', PercentageSquareWhiteIcon = 'Проценты белые', PersonalCardIcon = 'Персональная карта', PlayMarketIcon = 'Лого «PlayMarket»', PlusIcon = 'Плюс', PowerIcon = 'Щит', Profile2UserIcon = 'Профиль, 2 персоны', ProfileIcon = 'Профиль', PumpkinIcon = 'Тыква', RoundRubleIcon = 'Рубль (круг.)', SafeIcon = 'Сейф', ShieldTickIcon = 'Безопасность', SignDocsIcon = 'Подписанные документы', SmallClockIcon = 'Маленькие часы', SoundIcon = 'Звук', TelegramIcon = 'Лого «Telegram»', UnionPayIcon = 'UnionPay', UserTickIcon = 'Пользователь', VisaIcon = 'Visa', VKIcon = 'Лого «VK»', WalletAdd2Icon = 'Пополнение карты', WalletAddIcon = 'Кошелёк с плюсом', WalletIcon = 'Кошелёк', WalletWithMoneyIcon = 'Кошелёк с деньгами', WateringCan = 'Добавить продукт'
+  ActualBalanceIcon = 'Деньги',
+  AirPlane = 'Самолет',
+  AppleIcon = 'Лого «Apple»',
+  ArrowDownIcon = "Стрелка 'Вниз'",
+  ArrowLeftIcon = 'Стрелка',
+  ArrowUpIcon = 'Стрелка вверх',
+  AtmIcon = 'Банкомат',
+  BankIcon = 'Банк',
+  BurgerIcon = 'Бургер',
+  Calendar2Icon = 'Календарь 2',
+  CalendarCircleIcon = 'Скруглённый календарь',
+  CalendarIcon = 'Календарь',
+  CalendarTickIcon = 'Календарь с галочкой',
+  CardIcon = 'Кред. карта',
+  CardPosIcon = 'Кред. карта под наклоном',
+  CardTickIcon = 'Кред. карта с галочкой',
+  CardWithGemIcon = 'Карта с драгоценностями',
+  CarIcon = 'Машина',
+  ChartSquareIcon = 'Деньги внутри кошелька',
+  CinemaIcon = 'Кино',
+  ClockIcon = 'Часы',
+  CloseIcon = 'Крестик',
+  ComfortableCompIcon = 'Кресло',
+  CreditCardsIcon = 'Кредитные карты',
+  DiscountShapeIcon = 'Скидка',
+  DocIcon = 'Документ',
+  DocIconMonoColor = 'Документ (одноцветный)',
+  DocsIcon = 'Документы',
+  DocumentTextIcon = 'Документ с текстом',
+  DollarIcon = 'Доллар',
+  EarthIcon = 'Земля',
+  EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом',
+  EmptyWalletIcon = 'Пустой кошелёк',
+  EuroIcon = 'Евро',
+  GeolocationIcon = 'Геолокация',
+  GlassIcon = 'Зеркало',
+  GlobalIcon = 'Глобус',
+  GpsIcon = 'Gps',
+  GridIcon = 'Сетка (белая)',
+  InterestGrowthIcon = 'Диаграмма роста',
+  InterestIcon = 'Скидка',
+  JCBIcon = 'JCB',
+  LoupeIcon = 'Лупа',
+  MasterCardIcon = 'MasterCard',
+  MinusIcon = 'Минус',
+  MirIcon = 'МИР',
+  MoneyIcon = 'Деньги',
+  MoneyInsuranceIcon = 'Денежное страхование',
+  MonitorMobileIcon = 'Монитор и мобильный',
+  NewDocIcon = 'Новый документ',
+  OfficeIcon = 'Офис',
+  OkIcon = 'Лого «Одноклассники»',
+  PassSendIcon = 'Бизнес',
+  PercentageRoundIcon = 'Проценты (круг.)',
+  PercentageSquareIcon = 'Проценты',
+  PersonalCardIcon = 'Персональная карта',
+  PlayMarketIcon = 'Лого «PlayMarket»',
+  PlusIcon = 'Плюс',
+  PowerIcon = 'Щит',
+  Profile2UserIcon = 'Профиль, 2 персоны',
+  ProfileIcon = 'Профиль',
+  PumpkinIcon = 'Тыква',
+  RoundRubleIcon = 'Рубль (круг.)',
+  SafeIcon = 'Сейф',
+  ShieldTickIcon = 'Безопасность',
+  SignDocsIcon = 'Подписанные документы',
+  SmallClockIcon = 'Маленькие часы',
+  SoundIcon = 'Звук',
+  TelegramIcon = 'Лого «Telegram»',
+  UnionPayIcon = 'UnionPay',
+  UserTickIcon = 'Пользователь',
+  VisaIcon = 'Visa',
+  VKIcon = 'Лого «VK»',
+  WalletAdd2Icon = 'Пополнение карты',
+  WalletAddIcon = 'Кошелёк с плюсом',
+  WalletIcon = 'Кошелёк',
+  WalletWithMoneyIcon = 'Кошелёк с деньгами',
+  WateringCan = 'Добавить продукт',
 }
 
 /**
@@ -15,7 +168,86 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолет', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Бургер', 'Бургер (белый)', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Календарь белый', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кино', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Пустой кошелёк (белый)', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Лупа', 'MasterCard', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Проценты белые', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Лого «Telegram»', 'UnionPay', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
+ *   'Деньги', 'Самолет', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кино', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документ с текстом', 'Доллар', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', 'JCB', 'Лупа', 'MasterCard', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Лого «Telegram»', 'UnionPay', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
  * ]
  */
-export type IconName = '' | 'ActualBalanceIcon' | 'AirPlane' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowLeftIcon' | 'ArrowsRewindRight' | 'ArrowUpIcon' | 'AtmIcon' | 'BankIcon' | 'BurgerIcon' | 'BurgerIconWhite' | 'Calendar2Icon' | 'CalendarCircleIcon' | 'CalendarIcon' | 'CalendarTickIcon' | 'CalendarWhiteIcon' | 'CardIcon' | 'CardPosIcon' | 'CardTickIcon' | 'CardWithGemIcon' | 'CarIcon' | 'ChartSquareIcon' | 'CinemaIcon' | 'ClockIcon' | 'CloseIcon' | 'ComfortableCompIcon' | 'CreditCardsIcon' | 'DiscountShapeIcon' | 'DocIcon' | 'DocIconMonoColor' | 'DocsIcon' | 'DocumentTextIcon' | 'DollarIcon' | 'EarthIcon' | 'EmptyWalletChangeIcon' | 'EmptyWalletIcon' | 'EmptyWalletWhiteIcon' | 'EuroIcon' | 'GeolocationIcon' | 'GlassIcon' | 'GlobalIcon' | 'GpsIcon' | 'GridIcon' | 'GridIconWhite' | 'InterestGrowthIcon' | 'InterestIcon' | 'JCBIcon' | 'LoupeIcon' | 'MasterCardIcon' | 'MinusIcon' | 'MirIcon' | 'MoneyIcon' | 'MoneyInsuranceIcon' | 'MonitorMobileIcon' | 'NewDocIcon' | 'OfficeIcon' | 'OkIcon' | 'PassSendIcon' | 'PercentageRoundIcon' | 'PercentageSquareIcon' | 'PercentageSquareWhiteIcon' | 'PersonalCardIcon' | 'PlayMarketIcon' | 'PlusIcon' | 'PowerIcon' | 'Profile2UserIcon' | 'ProfileIcon' | 'PumpkinIcon' | 'RoundRubleIcon' | 'SafeIcon' | 'ShieldTickIcon' | 'SignDocsIcon' | 'SmallClockIcon' | 'SoundIcon' | 'TelegramIcon' | 'UnionPayIcon' | 'UserTickIcon' | 'VisaIcon' | 'VKIcon' | 'WalletAdd2Icon' | 'WalletAddIcon' | 'WalletIcon' | 'WalletWithMoneyIcon' | 'WateringCan';
+export type IconName =
+  | ''
+  | 'ActualBalanceIcon'
+  | 'AirPlane'
+  | 'AppleIcon'
+  | 'ArrowDownIcon'
+  | 'ArrowLeftIcon'
+  | 'ArrowUpIcon'
+  | 'AtmIcon'
+  | 'BankIcon'
+  | 'BurgerIcon'
+  | 'Calendar2Icon'
+  | 'CalendarCircleIcon'
+  | 'CalendarIcon'
+  | 'CalendarTickIcon'
+  | 'CardIcon'
+  | 'CardPosIcon'
+  | 'CardTickIcon'
+  | 'CardWithGemIcon'
+  | 'CarIcon'
+  | 'ChartSquareIcon'
+  | 'CinemaIcon'
+  | 'ClockIcon'
+  | 'CloseIcon'
+  | 'ComfortableCompIcon'
+  | 'CreditCardsIcon'
+  | 'DiscountShapeIcon'
+  | 'DocIcon'
+  | 'DocIconMonoColor'
+  | 'DocsIcon'
+  | 'DocumentTextIcon'
+  | 'DollarIcon'
+  | 'EarthIcon'
+  | 'EmptyWalletChangeIcon'
+  | 'EmptyWalletIcon'
+  | 'EuroIcon'
+  | 'GeolocationIcon'
+  | 'GlassIcon'
+  | 'GlobalIcon'
+  | 'GpsIcon'
+  | 'GridIcon'
+  | 'InterestGrowthIcon'
+  | 'InterestIcon'
+  | 'JCBIcon'
+  | 'LoupeIcon'
+  | 'MasterCardIcon'
+  | 'MinusIcon'
+  | 'MirIcon'
+  | 'MoneyIcon'
+  | 'MoneyInsuranceIcon'
+  | 'MonitorMobileIcon'
+  | 'NewDocIcon'
+  | 'OfficeIcon'
+  | 'OkIcon'
+  | 'PassSendIcon'
+  | 'PercentageRoundIcon'
+  | 'PercentageSquareIcon'
+  | 'PersonalCardIcon'
+  | 'PlayMarketIcon'
+  | 'PlusIcon'
+  | 'PowerIcon'
+  | 'Profile2UserIcon'
+  | 'ProfileIcon'
+  | 'PumpkinIcon'
+  | 'RoundRubleIcon'
+  | 'SafeIcon'
+  | 'ShieldTickIcon'
+  | 'SignDocsIcon'
+  | 'SmallClockIcon'
+  | 'SoundIcon'
+  | 'TelegramIcon'
+  | 'UnionPayIcon'
+  | 'UserTickIcon'
+  | 'VisaIcon'
+  | 'VKIcon'
+  | 'WalletAdd2Icon'
+  | 'WalletAddIcon'
+  | 'WalletIcon'
+  | 'WalletWithMoneyIcon'
+  | 'WateringCan';

package/src/model/IconVersion.ts

@@ -2,7 +2,8 @@
  * @title Цвет иконки
  * @enumNames [
  *    "Нормальный",
- *    "Белый"
+ *    "Белый",
+ *    "Чёрный"
  * ]
  */
-export type IconVersion = 'normal' | 'white';
+export type IconVersion = 'normal' | 'white' | 'black';

package/src/model/Picture.ts

@@ -13,7 +13,6 @@ export interface Img {
 export interface ImgSource {
   /** @title Иконка */
   icon?: IconName;
-  /** @hidden */
   iconVersion?: IconVersion;
   /** @title Картинка */
   src?: string;

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

@@ -16,7 +16,7 @@ export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) =
   >
     <Img
       className="w-4 h-4 min-w-4 min-h-4 rounded-full box-border"
-      image={{ icon: 'ArrowLeftIcon' }}
+      image={{ icon: 'ArrowLeftIcon', iconVersion: 'black' }}
       width="16"
       height="16"
       asSVG

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

@@ -55,7 +55,7 @@ export const Foldable = JSX<FoldableProps>(
             onClick={handleToggle}
           >
             <span className="pr-3">{isActive ? 'Скрыть' : foldButtonLabel}</span>
-            <Icon name={icon} width="20" height="20" asSVG />
+            <Icon name={icon} iconVersion="white" width="20" height="20" asSVG />
           </button>
         ) : null}
       </div>

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

@@ -27,4 +27,28 @@ export default {
       </div>
     </div>
   ),
+  'all (as svg) black': (
+    <div className="w-[1280px]">
+      <div className="grid grid-cols-6 gap-8">
+        {Object.values(IconMap).map((icon) => (
+          <div key={icon} className="flex flex-col items-center gap-3">
+            <div>{icon}</div>
+            <Icon name={icon} iconVersion="black" width="64" asSVG />
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+  'all (as svg) white': (
+    <div className="w-[1280px]">
+      <div className="grid grid-cols-6 gap-8">
+        {Object.values(IconMap).map((icon) => (
+          <div key={icon} className="flex flex-col items-center gap-3 bg-black">
+            <div className="text-white">{icon}</div>
+            <Icon name={icon} iconVersion="white" width="64" asSVG />
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
 };

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

@@ -1,27 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { IconTitleMap } from '../../icons/IconName';
+import type { IconVersion } from '../../model/IconVersion';
 import { projectSettings } from '../../ProjectSettings';
 import type { IconProps } from './IconProps';
 
+const svgUseStyleMap: Record<IconVersion, string> = {
+  normal: 'text-primary-main',
+  black: 'text-black',
+  white: 'text-black invert',
+};
+
 export const Icon = JSX<IconProps>(
   ({
     className = '',
+    imageClassName = '',
     name = '',
     alt = `Иконка ${IconTitleMap[name] || name}`,
     title = alt,
-    iconVersion,
+    iconVersion = 'normal',
     asSVG,
     ...imgProps
   }) => {
     const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
-    const svgUseStyle = iconVersion === 'white' ? 'text-black invert' : 'text-primary-main';
 
     if (asSVG) {
       return (
         <svg className={className} {...imgProps} aria-hidden="true">
           {title ? <title>{title}</title> : null}
           {alt ? <desc>{alt}</desc> : null}
-          <use className={svgUseStyle} href={`${href}#icon`} xlinkHref={`${href}#icon`} />
+          <use
+            className={`${svgUseStyleMap[iconVersion]} ${imageClassName}`}
+            href={`${href}#icon`}
+            xlinkHref={`${href}#icon`}
+          />
         </svg>
       );
     }

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

@@ -18,6 +18,7 @@ export interface IconCompatibilityFields {
 
 export type IconProps = IconCompatibilityFields & {
   className?: string;
+  imageClassName?: string;
   name?: IconName;
   /** @hidden */
   iconVersion?: IconVersion;