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

package/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/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/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/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/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/src/components/InsuranceAmountBlock/InsuranceAmountBlock.fixture.tsx

@@ -25,19 +25,20 @@ export default {
                 fee: 2100,
                 icon: {
                   icon: 'ActualBalanceIcon',
+                  iconVersion: 'normal',
                 },
                 href: '/insurance1',
               },
               {
                 sum: 200000,
                 fee: 2100,
-                icon: { icon: 'ActualBalanceIcon' },
+                icon: { icon: 'ActualBalanceIcon', iconVersion: 'normal' },
                 href: '/insurance2',
               },
               {
                 sum: 200000,
                 fee: 2100,
-                icon: { icon: 'ActualBalanceIcon' },
+                icon: { icon: 'ActualBalanceIcon', iconVersion: 'normal' },
                 href: '/insurance3',
               },
             ],
@@ -48,7 +49,7 @@ export default {
               {
                 sum: 400000,
                 fee: 3600,
-                icon: { icon: 'ActualBalanceIcon' },
+                icon: { icon: 'ActualBalanceIcon', iconVersion: 'normal' },
                 href: '/insurance4',
               },
             ],

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

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

package/src/components/LinkDocs/LinkDocs.tsx

@@ -46,7 +46,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
                 doc={doc}
                 icon={
                   icon ? (
-                    <Img className="min-w-6 min-h-6" image={icon} width="24" height="24" asSVG />
+                    <Img className="min-w-6 min-h-6" image={icon} width="24" height="24" />
                   ) : null
                 }
               ></LinkDocsListItem>

package/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/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/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/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/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/src/components/RollupItem/RollupItem.mobile.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/src/components/RollupItem/RollupItem.tsx

@@ -7,8 +7,8 @@ import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { Icon } from '../../ui-kit/Icon/Icon';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
-import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
 import type { RollupItemContent } from './RollupItemContent';
 
@@ -92,6 +92,6 @@ const renderPrimaryFoldButton = ({ label, icon, onToggle }: PrimaryFoldButtonPro
     <Text size="text-xl" font="font-medium">
       {label}
     </Text>
-    {icon ? <Img image={{ icon }} width="24" height="24" asSVG /> : null}
+    {icon ? <Icon name={icon} width="24" height="24" /> : null}
   </button>
 );

package/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/src/components/StepsBlock/StepsBlock.mobile.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/src/components/StepsBlock/StepsBlock.tsx

@@ -97,7 +97,6 @@ const renderStepIcon =
             image={{ ...icon, iconVersion: icon.iconVersion || iconVersion }}
             width="48"
             height="48"
-            asSVG
           />
         ) : (
           <span

package/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/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/src/services/sitemap/SitemapData.ts

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

package/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/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/src/ui-kit/Button/Button.fixture.tsx

@@ -66,7 +66,7 @@ export default {
             appendLeft={
               /** Div need for perfect pixel */
               <div>
-                <Img image={{ icon: 'PlayMarketIcon' }} width="24" height="24" asSVG />
+                <Img image={{ icon: 'PlayMarketIcon' }} width="24" height="24" />
               </div>
             }
             text="Google Play"
@@ -78,7 +78,7 @@ export default {
             aboveText="Загрузите в"
             appendLeft={
               <div>
-                <Img image={{ icon: 'AppleIcon' }} width="24" height="24" asSVG />
+                <Img image={{ icon: 'AppleIcon' }} width="24" height="24" />
               </div>
             }
             text="App Store"
@@ -90,7 +90,7 @@ export default {
             target="_blank"
             appendRight={
               <div>
-                <Img image={{ icon: 'TelegramIcon' }} width="20" height="16" asSVG />
+                <Img image={{ icon: 'TelegramIcon' }} width="20" height="16" />
               </div>
             }
             text="Мы в Telegram"
@@ -106,14 +106,14 @@ export default {
             href="https://www.rshb.ru/"
             target="_blank"
             version="secondary"
-            appendLeft={<Img image={{ icon: 'PlayMarketIcon' }} width="20" height="21" asSVG />}
+            appendLeft={<Img image={{ icon: 'PlayMarketIcon' }} width="20" height="21" />}
           />
           <Button
             rounded
             href="https://www.rshb.ru/"
             target="_blank"
             version="secondary"
-            appendLeft={<Img image={{ icon: 'AppleIcon' }} width="18" height="20" asSVG />}
+            appendLeft={<Img image={{ icon: 'AppleIcon' }} width="18" height="20" />}
           />
         </div>
       </div>

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

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

package/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/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/src/ui-kit/Icon/Icon.fixture.tsx

@@ -21,7 +21,7 @@ export default {
         {Object.values(IconMap).map((icon) => (
           <div key={icon} className="flex flex-col items-center gap-3">
             <div>{icon}</div>
-            <Icon className="my-auto" name={icon} width="64" asSVG />
+            <Icon className="my-auto" name={icon} iconVersion="black" width="64" />
           </div>
         ))}
       </div>
@@ -33,7 +33,7 @@ export default {
         {Object.values(IconMap).map((icon) => (
           <div key={icon} className="flex flex-col items-center gap-3">
             <div>{icon}</div>
-            <Icon className="my-auto" name={icon} iconVersion="black" width="64" asSVG />
+            <Icon className="my-auto" name={icon} iconVersion="black" width="64" />
           </div>
         ))}
       </div>
@@ -45,7 +45,7 @@ export default {
         {Object.values(IconMap).map((icon) => (
           <div key={icon} className="flex flex-col items-center gap-3 bg-primary-main">
             <div className="text-white">{icon}</div>
-            <Icon className="my-auto" name={icon} iconVersion="white" width="64" asSVG />
+            <Icon className="my-auto" name={icon} iconVersion="white" width="64" />
           </div>
         ))}
       </div>

package/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/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/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/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/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/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/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/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