@redneckz/wildless-cms-uni-blocks 0.10.2 → 0.10.4

package/mobile/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -1,24 +1,42 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../../ui-kit/Img/Img';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import { style } from '../../utils/style';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
 export interface HeaderSecondaryMenuButtonProps extends ImageContent {
   className?: string;
   isRounded?: boolean;
+  buttonSize?: 'default' | 'large';
+  isGrayBg?: boolean;
   disabled?: boolean;
   ariaLabel?: string;
   onClick?: () => void;
 }
 
+const BUTTON_SIZE_STYLE = {
+  default: 'w-6 h-6',
+  large: 'w-12 h-12',
+};
+
 export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
-  ({ className, isRounded, disabled, ariaLabel, image, onClick }) => (
+  ({
+    className,
+    isRounded,
+    buttonSize = 'default',
+    isGrayBg = false,
+    disabled,
+    ariaLabel,
+    image,
+    onClick,
+  }) => (
     <button
       className={style(
-        'group/btn border-0 p-0 flex items-center bg-inherit',
+        'group/btn border-0 flex shrink-0 items-center',
+        isGrayBg ? 'p-3 rounded-full' : 'p-0 bg-inherit',
+        isGrayBg && !isRounded ? 'bg-main-divider' : '',
         isRounded
           ? 'w-8 h-8 text-secondary-light hover:text-secondary-hove'
-          : 'w-6 h-6 text-primary-text hover:text-primary-main',
+          : `${BUTTON_SIZE_STYLE[buttonSize]} text-primary-text hover:text-primary-main`,
         'group-data-transparent:text-white',
         className,
       )}
@@ -31,7 +49,6 @@ export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
         image={image}
         className={style('h-full', isRounded ? 'bg-main-divider/20 rounded-full' : '')}
         imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
-        asSVG
       />
     </button>
   ),

package/mobile/src/components/Header/HeaderSubMenu.tsx

@@ -1,64 +1,83 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
 import { useRouter } from '../../hooks/useRouter';
-import type { LinkProps } from '../../model/LinkProps';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { style } from '../../utils/style';
 import { DropdownMenu } from './DropdownMenu';
 import { HeaderSubMenuItem } from './HeaderSubMenuItem';
+import { projectSettings } from '../../ProjectSettings';
+import { HeaderChatBotButton } from './HeaderChatBotButton';
+import { InternetBankButton } from './InternetBankButton';
+import type { LinkProps } from '../../model/LinkProps';
+import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { IconVersion } from '../../model/IconVersion';
 
 export interface HeaderSubMenuProps {
+  version?: BlockVersion;
   subItems?: LinkProps[];
+  internetBankUrl?: string;
 }
 
-export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [] }) => {
-  const router = useRouter();
+export const HeaderSubMenu = JSX<HeaderSubMenuProps>(
+  ({ subItems = [], version, internetBankUrl }) => {
+    const iconVersion: IconVersion = version === 'transparent' ? 'white' : 'black';
+
+    const router = useRouter();
 
-  const activeSubItem = findActiveSubItem(router)(subItems);
+    const activeSubItem = findActiveSubItem(router)(subItems);
 
-  const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
+    const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
 
-  const dropDownMenuItems = subItems.slice(visibleItemsCount);
+    const dropDownMenuItems = subItems.slice(visibleItemsCount);
 
-  const subItemsListRef = useRef<HTMLDivElement | null>(null);
-  const observerOptions: IntersectionObserverOptions = { rootRef: subItemsListRef };
-  const subItemsVisibilityHandlers = useMemo(
-    () =>
-      subItems.map((_, index) => (isIntersecting: boolean) => {
-        setVisibleItemsCount(
-          isIntersecting
-            ? handleIntersectionActivation(index)
-            : handleIntersectionDeactivation(index),
-        );
-      }),
-    [subItems],
-  );
+    const subItemsListRef = useRef<HTMLDivElement | null>(null);
+    const observerOptions: IntersectionObserverOptions = { rootRef: subItemsListRef };
+    const subItemsVisibilityHandlers = useMemo(
+      () =>
+        subItems.map((_, index) => (isIntersecting: boolean) => {
+          setVisibleItemsCount(
+            isIntersecting
+              ? handleIntersectionActivation(index)
+              : handleIntersectionDeactivation(index),
+          );
+        }),
+      [subItems],
+    );
 
-  return (
-    <nav className="relative mt-6">
-      <div ref={subItemsListRef} className="overflow-hidden whitespace-nowrap mr-52 pb-3">
-        {subItems.map((_, i) => (
-          <HeaderSubMenuItem
-            key={String(i)}
-            className={style('mr-8', visibleItemsCount - 1 < i ? 'invisible' : '')}
-            active={_ === activeSubItem}
-            observerOptions={observerOptions}
-            onVisibilityChange={subItemsVisibilityHandlers[i]}
-            {..._}
+    return (
+      <nav className="relative mt-3 flex items-center justify-between">
+        <div ref={subItemsListRef} className="overflow-hidden whitespace-nowrap pb-3 mt-2">
+          {subItems.map((_, i) => (
+            <HeaderSubMenuItem
+              key={String(i)}
+              className={style('ml-8 first:ml-0', visibleItemsCount - 1 < i ? 'invisible' : '')}
+              active={_ === activeSubItem}
+              observerOptions={observerOptions}
+              onVisibilityChange={subItemsVisibilityHandlers[i]}
+              {..._}
+            />
+          ))}
+        </div>
+        {dropDownMenuItems.length ? (
+          <DropdownMenu
+            className="relative w-auto z-40"
+            items={dropDownMenuItems}
+            activeItem={activeSubItem}
+          />
+        ) : null}
+        {projectSettings.CHAT_BOT ? (
+          <HeaderChatBotButton
+            className="ml-9"
+            iconVersion={iconVersion}
+            chat={projectSettings.CHAT_BOT}
           />
-        ))}
-      </div>
-      {dropDownMenuItems.length ? (
-        <DropdownMenu
-          className="absolute w-52 -top-4 right-0 pt-4 z-40"
-          items={dropDownMenuItems}
-          activeItem={activeSubItem}
-        />
-      ) : null}
-    </nav>
-  );
-});
+        ) : null}
+        <InternetBankButton version={version} internetBankUrl={internetBankUrl} />
+      </nav>
+    );
+  },
+);
 
 const handleIntersectionActivation = (index: number) => (prev: number) => Math.max(prev, index + 1);
 const handleIntersectionDeactivation = (index: number) => (prev: number) => Math.min(prev, index);

package/mobile/src/components/Header/HeaderSubMenuItem.tsx

@@ -15,7 +15,7 @@ export interface HeaderSubMenuItemProps extends LinkProps {
 }
 
 export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
-  ({ observerOptions, onVisibilityChange, children, ...rest }) => {
+  ({ observerOptions, onVisibilityChange, children, className, ...rest }) => {
     const observerCallback = useCallback(
       (entries: IntersectionObserverEntry[]) => {
         if (!entries.length || !onVisibilityChange) {
@@ -32,7 +32,7 @@ export const HeaderSubMenuItem = JSX<HeaderSubMenuItemProps>(
     const ref = useIntersectionObserver<HTMLSpanElement>(observerCallback, observerOptions);
 
     return (
-      <span ref={ref}>
+      <span ref={ref} className={className}>
         <HeaderItem {...rest}>{children}</HeaderItem>
       </span>
     );

package/mobile/src/components/Header/HeaderTop.tsx

@@ -23,7 +23,6 @@ export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor, logo }) => (
           className="text-primary-text w-6 h-6"
           width="24"
           height="24"
-          asSVG
         />
       </button>
       <Logo className="mr-8" bgColor={bgColor} logo={logo} />

package/mobile/src/components/Header/InternetBankButton.tsx

@@ -0,0 +1,30 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { Button } from '../../ui-kit/Button/Button';
+import type { BlockVersion } from '../../model/BlockVersion';
+
+interface InternetBankButtonProps {
+  version?: BlockVersion;
+  internetBankUrl?: string;
+}
+
+const BUTTON_STYLE = {
+  default: 'px-5 bg-main-divider rounded hover:text-primary-main',
+  transparent: 'text-white hover:text-primary-hover',
+};
+
+export const InternetBankButton = JSX<InternetBankButtonProps>(({ version, internetBankUrl }) =>
+  internetBankUrl ? (
+    <Button
+      href={internetBankUrl}
+      ariaLabel="Интернет-банк"
+      target="_blank"
+      className={style(
+        'py-3 ml-3 text-l font-light whitespace-nowrap hover:text-primary-main',
+        BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
+      )}
+    >
+      Интернет-банк
+    </Button>
+  ) : null,
+);

package/mobile/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -18,7 +18,13 @@ export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalL
     ...rest
   }) => (
     <BlockWrapper
-      className={style('grid grid-cols-12', isPadding ? 'p-12' : '', gapStyles[gap], className)}
+      className={style(
+        'relative',
+        'grid grid-cols-12',
+        isPadding ? 'p-12' : '',
+        gapStyles[gap],
+        className,
+      )}
       version={version}
       isTheme={isTheme}
       {...rest}

package/mobile/src/components/LinkDocs/LinkDocs.tsx

@@ -41,7 +41,6 @@ export const LinkDocs = JSX<LinkDocsProps>(
                       image={icon}
                       width="24"
                       height="24"
-                      asSVG
                     />
                   ) : null
                 }

package/mobile/src/components/OfficeMap/OfficeMap.tsx

@@ -58,7 +58,7 @@ export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
           {renderCurrentDaySchedule(currentWeekDay)}
         </div>
         <div className="flex text-l-light pt-4">
-          <Icon name="GeolocationIcon" width="24" height="24" asSVG className="pr-1" />
+          <Icon name="GeolocationIcon" width="24" height="24" className="pr-1" />
           {address}
         </div>
         <div className="flex pt-4">{nearbyOffices.map(renderNearbyOffice)}</div>

package/mobile/src/components/OfficeMap/renderFunctions.tsx

@@ -28,7 +28,7 @@ export const renderNearbyOffice = (
   index: number,
 ) => (
   <div className="flex mr-4" key={`nearbyOffice${index}`}>
-    <Icon name={icon} width="16" height="16" asSVG className="mr-1" />
+    <Icon name={icon} width="16" height="16" className="mr-1" />
     {title ? <span className="text-m">{title}&nbsp;</span> : null}
     <span className="text-m-light">
       {distance ? ` (${distance})` : null}

package/mobile/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -24,13 +24,7 @@ export const OfficeServicesBlock = JSX<OfficeServicesBlockProps>(
 const renderListItems = (itemList: OfficeServicesBlockList, i: number) => (
   <li key={`list_item_${String(i)}`} className="flex mb-5 last:mb-0 list-none">
     {itemList.icon ? (
-      <Img
-        className="mr-3 min-w-6 min-h-6 w-6 h-6"
-        width="24"
-        height="24"
-        asSVG
-        image={itemList.icon}
-      />
+      <Img className="mr-3 min-w-6 min-h-6 w-6 h-6" width="24" height="24" image={itemList.icon} />
     ) : null}
     {itemList.label ? <span className="text-l-light">{itemList.label}</span> : null}
   </li>

package/mobile/src/components/ProductBlock/renderBackwardButton.tsx

@@ -26,7 +26,6 @@ export function renderBackwardButton(
         <Img
           className="w-4 h-4"
           image={{ ...backwardIcon, iconVersion: backwardIcon.iconVersion || iconVersion }}
-          asSVG
         />
       </Button>
       {text ? (

package/mobile/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -56,7 +56,7 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
 const renderIconBlock = (icon?: Picture) => (
   <div className="self-end">
     {icon?.src ? <Img image={icon} /> : null}
-    {icon?.icon ? <Img image={icon} asSVG /> : null}
+    {icon?.icon ? <Img image={icon} /> : null}
   </div>
 );
 
@@ -68,7 +68,7 @@ const renderDescriptionBlock = (__html?: string) => (
 
 const renderBlock = (blockName: string, data?: string, iconName?: IconName | undefined) => (
   <div className="flex mb-4">
-    <Icon className="pr-4" iconVersion="black" name={iconName} width="24" height="24" asSVG />
+    <Icon className="pr-4" iconVersion="black" name={iconName} width="24" height="24" />
     <div className="flex flex-col first:pb-1">
       <Text size="text-m-light">{blockName}</Text>
       {data ? (

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -111,12 +111,12 @@ const renderPrimaryFoldButton = ({
   >
     <div className="flex group-hover:text-primary-main">
       {primaryIcon ? (
-        <Img image={primaryIcon} className="mr-3 flex-shrink-0" width="24" height="24" asSVG />
+        <Img image={primaryIcon} className="mr-3 flex-shrink-0" width="24" height="24" />
       ) : null}
       <Text size="text-m-title-xs" font="font-medium">
         {label}
       </Text>
     </div>
-    <Img className="flex-shrink-0" image={{ icon }} width="24" height="24" asSVG />
+    <Img className="flex-shrink-0" image={{ icon }} width="24" height="24" />
   </button>
 );

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -17,7 +17,7 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
         {renderTotal('Цена', price + ' ₽')}
       </div>
       <div className="bg-primary-main px-10 pt-10 pb-4 text-center">
-        <Img image={{ icon: 'PackA4Icon' }} width="290" height="257" asSVG />
+        <Img image={{ icon: 'PackA4Icon' }} width="290" height="257" />
 
         <span className="text-s-light text-white opacity-80 mt-2 inline-block">
           На рисунки изображена пачка<br></br> листов формата А4

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -132,7 +132,6 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
             image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
             width={iconSize}
             height={iconSize}
-            asSVG
           />
         ) : (
           <span>{i + 1}</span>

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

@@ -38,7 +38,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
         <div className={`text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`}>
           <div className="flex items-center text-primary-text" role="cell">
             {header?.icon ? (
-              <Img className="mr-3.5 max-w-6" image={header.icon} width="24" height="24" asSVG />
+              <Img className="mr-3.5 max-w-6" image={header.icon} width="24" height="24" />
             ) : null}
             {header?.title ? <div className="text-m-light">{header?.title}</div> : null}
           </div>

package/mobile/src/components/VerticalLayout/VerticalLayout.tsx

@@ -33,6 +33,7 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
     return (
       <BlockWrapper
         className={style(
+          'relative',
           'flex flex-col [&>*]:max-w-full',
           isPadding ? 'p-12' : '',
           gapStyles[gap],

package/mobile/src/services/sitemap/SitemapData.ts

@@ -33,4 +33,5 @@ export interface SitemapData {
   foreignOffices?: ForeignOffice[];
   defaultLocation?: string;
   officesLink?: string;
+  internetBankUrl?: string;
 }

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

@@ -24,7 +24,6 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
           <Img
             className="w-6 h-6"
             image={{ ...icon, iconVersion: icon.iconVersion || benefitsVersion }}
-            asSVG
           />
         </div>
       ) : null}

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

@@ -20,7 +20,6 @@ export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) =
       imageClassName="group-hover/btn:text-primary-main"
       width="16"
       height="16"
-      asSVG
     />
   </Button>
 ));

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

@@ -58,6 +58,4 @@ export type BackwardButtonProps = ButtonProps &
     appendLeft?: VNode;
     /** @title Закругленные углы */
     rounded?: boolean;
-    /** @hidden */
-    asSVG?: boolean;
   };

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

@@ -48,6 +48,5 @@ const renderButtonIcon = (icon: Picture) =>
       image={icon}
       width={String(icon?.size?.width || DEFAULT_ICON_W)}
       height={String(DEFAULT_ICON_W)}
-      asSVG
     />
   ) : null;

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

@@ -39,7 +39,6 @@ export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
             className="flex-shrink-0 my-auto"
             width="20"
             height="20"
-            asSVG
           />
         ) : null}
       </button>

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

@@ -22,13 +22,12 @@ export const Icon = JSX<IconProps>(
     alt = `Иконка ${name}`,
     title = alt,
     iconVersion = 'color',
-    asSVG,
     ...imgProps
   }) => {
     const router = useRouter();
     const href = adjustHref(router)(joinPath(projectSettings.CDN, '/icons', `${name}.svg`));
 
-    if (asSVG && iconVersion !== 'normal') {
+    if (iconVersion !== 'normal') {
       return (
         <Background className={className}>
           <svg
@@ -48,6 +47,7 @@ export const Icon = JSX<IconProps>(
         </Background>
       );
     }
+
     if (!className.includes('h-')) {
       imgProps['style'] = { height: `${imgProps.height}px` };
     }

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

@@ -12,8 +12,6 @@ export interface IconCompatibilityFields {
   width?: string;
   /** @title Высота */
   height?: string;
-  /** @hidden */
-  asSVG?: boolean;
 }
 
 export type IconProps = IconCompatibilityFields & {

package/mobile/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -25,7 +25,6 @@ export const TableInnerButton = JSX<TableInnerButtonProps>(({ isOpen, onClick })
         iconVersion="white"
         width="20"
         height="20"
-        asSVG
       />
     </Button>
   );

package/mobile/src/ui-kit/InnerTable/InnerTableHeader.tsx

@@ -39,7 +39,6 @@ export const InnerTableHeader = JSX<InnerTableHeaderProps>(
               className="mr-0.5"
               width="20"
               height="20"
-              asSVG
             />
           }
           text="Скачать в PDF"

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Img } from '../Img/Img';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
+import { Img } from '../Img/Img';
 
 const LINK_CLASS_NAME = `absolute border border-primary-main ml-3 px-6 py-5
   text-l-light bg-white text-primary-text flex w-[316px]
@@ -30,7 +30,6 @@ export const LinkButton = JSX<LinkButtonProps>(
               imageClassName="group-hover/link:text-primary-main"
               width="24"
               height="24"
-              asSVG
             />
           </div>
         </a>

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

@@ -24,7 +24,6 @@ export const renderImage = (
       width={size?.width}
       height={size?.height}
       pathPrefix="/wcms-resources/"
-      asSVG
     />
   ) : (
     <Img
@@ -35,7 +34,6 @@ export const renderImage = (
       className={SVG_COLOR[bgColor]}
       width={size?.width}
       height={size?.height}
-      asSVG
     />
   );
 };

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

@@ -49,7 +49,7 @@ const ColumnItem = JSX<ColumnItemProps>(({ text, index, basePath, ...rest }) =>
   const isAnotherPortal =
     projectSettings.BASE_PATH && basePath ? !projectSettings.BASE_PATH.startsWith(basePath) : false;
 
-  const link = useLink({ isRemote: isAnotherPortal });
+  const link = useLink({ isRemote: isAnotherPortal, basePath });
   const { href, target, onClick } = link(rest);
 
   return (

package/mobile/src/ui-kit/YandexMap/renderSearchField.tsx

@@ -1,6 +1,6 @@
+import ymaps from 'yandex-maps';
 import { Icon } from '../Icon/Icon';
 import type { MockPoints } from './mockPoints';
-import ymaps from 'yandex-maps';
 const styles = {
   border: 'border border-transparent rounded-md',
   position: 'relative flex items-center',
@@ -37,7 +37,6 @@ export const renderSearchField = (
         iconVersion="black"
         width="20"
         height="20"
-        asSVG
         className="absolute left-4"
       />
       <input

package/package.json

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

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -37,7 +37,6 @@ const renderStep = (benefit: BenefitBlockItemProps, i: number) => {
         <Img
           className="w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black"
           image={benefit.icon}
-          asSVG
         />
       ) : null}
       {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.fixture.tsx

@@ -6,35 +6,35 @@ import { BonusBenefit } from './BonusBenefitsBlockContent';
 const bonusBenefits: BonusBenefit[] = [
   {
     description: 'Более 5000 товаров',
-    icon: { icon: 'WateringCanIcon' },
+    icon: { icon: 'WateringCanIcon', iconVersion: 'normal' },
   },
   {
     description: '750 авиакомпаний, 1,2 млн отелей, билеты РЖД',
-    icon: { icon: 'AirPlaneIcon' },
+    icon: { icon: 'AirPlaneIcon', iconVersion: 'normal' },
   },
   {
     description: 'Аренда автомобилей',
-    icon: { icon: 'CarIcon' },
+    icon: { icon: 'CarIcon', iconVersion: 'normal' },
   },
   {
     description: 'Болеее 1000 развлечений',
-    icon: { icon: 'CinemaIcon' },
+    icon: { icon: 'CinemaIcon', iconVersion: 'normal' },
   },
   {
     description: 'Платежные гаджеты Pay Ring',
-    icon: { icon: 'SoundIcon' },
+    icon: { icon: 'SoundIcon', iconVersion: 'normal' },
   },
   {
     description: 'Цифровые сервисы',
-    icon: { icon: 'DocsIcon' },
+    icon: { icon: 'DocsIcon', iconVersion: 'normal' },
   },
   {
     description: 'Фермерские продукты',
-    icon: { icon: 'PumpkinIcon' },
+    icon: { icon: 'PumpkinIcon', iconVersion: 'normal' },
   },
   {
     description: 'Страхование',
-    icon: { icon: 'PowerIcon' },
+    icon: { icon: 'PowerIcon', iconVersion: 'normal' },
   },
 ];
 

package/src/components/BusinessBlock/BusinessCard.tsx

@@ -12,7 +12,7 @@ export const BusinessCard = JSX<BusinessCardProps>((props) => {
       {image ? (
         <div className="flex justify-center">
           {image?.src ? <Img className="mb-5" image={image} /> : null}
-          {image?.icon ? <Img image={image} asSVG /> : null}
+          {image?.icon ? <Img image={image} /> : null}
         </div>
       ) : null}
       {title ? <Heading headingType="h4" title={title} className="mb-6" /> : null}
@@ -28,7 +28,7 @@ const renderItem = (item: BusinessCardItemProps, key: string) => {
   return (
     <li key={key} className="flex items-center gap-3.5 mb-3 last:mb-0">
       {icon?.icon ? (
-        <Img image={icon} className="w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider" asSVG />
+        <Img image={icon} className="w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider" />
       ) : null}
       {icon?.src ? <Img image={icon} /> : null}
       <span className="text-xl-light">{text}</span>

package/src/components/Calculator/Calculator.tsx

@@ -92,7 +92,6 @@ function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
         }}
         width="24"
         height="24"
-        asSVG
       />
       <div className="border-0">
         <div className={`${btnTitleClassName}`}>{tab?.title}</div>