@redneckz/wildless-cms-uni-blocks 0.10.1 → 0.10.3

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,28 @@
+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 }) => (
+  <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>
+));

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.example.json

@@ -34,8 +34,6 @@
       }
     ],
     "columnsMode": "double",
-    "orientation": "vertical",
-    "hasBorder": true,
     "align": "text-center"
   }
 }

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

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import type { LinkDocsContent } from './LinkDocsContent';
-import { LinkDocsHorizontalList } from './LinkDocsHorizontalList';
-import { LinkDocsVerticalList } from './LinkDocsVerticalList';
+import { LinkDocsListItem } from './LinkDocsListItem';
 
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
@@ -14,27 +14,41 @@ export const LinkDocs = JSX<LinkDocsProps>(
     className = '',
     title,
     description,
-    icon = { icon: 'DocIconMonoColor' },
+    icon = { icon: 'DocDownloadIcon', iconVersion: 'black' },
     documents,
-    orientation = 'vertical',
-    hasBorder = true,
     align,
     ...rest
   }) => (
-    <BlockWrapper className={style('py-6 px-4 overflow-x-hidden', className)} {...rest}>
+    <BlockWrapper className={style('py-6 px-4', className)} {...rest}>
       <Headline
-        className={`!p-0 ${description ? 'gap-2' : 'gap-5'}`}
+        isPadding={false}
         title={title}
         description={description}
         align={align}
         headlineVersion="M"
         as="h2"
       />
-      {orientation === 'vertical' ? (
-        <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />
-      ) : (
-        <LinkDocsHorizontalList hasBorder={hasBorder} documents={documents} icon={icon} />
-      )}
+      {documents?.length ? (
+        <div className="mt-5 flex flex-col gap-6" role="list">
+          {documents.map((doc, i) => (
+            <div key={String(i)} role="listitem">
+              <LinkDocsListItem
+                doc={doc}
+                icon={
+                  icon ? (
+                    <Img
+                      className="min-w-11 min-h-11 h-fit p-2.5 bg-main-divider rounded-md"
+                      image={icon}
+                      width="24"
+                      height="24"
+                    />
+                  ) : null
+                }
+              />
+            </div>
+          ))}
+        </div>
+      ) : null}
     </BlockWrapper>
   ),
 );

package/mobile/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,7 +1,6 @@
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
-import type { ListOrientation } from '../../model/ListOrientation';
 import type { IconProps } from '../../model/Picture';
 import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
@@ -31,10 +30,6 @@ export type LinkDocsContent = UniBlockContent &
     /** @title Список */
     documents?: LinkDocsItem[];
     columnsMode?: LinkColumnsMode;
-    /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
-    orientation?: ListOrientation; // TODO: мобильный проп
-    /** @title Рамка элементов (моб.) */ // TODO: мобильный проп
-    hasBorder?: boolean;
     /** @title Выравнивание */
     align?: TextAlign;
   };

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

@@ -1,12 +1,49 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { LinkDocsListItemBase } from './LinkDocsListItemBase';
-import type { LinkDocsListItemProps } from './LinkDocsListItemBase';
-
-export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
-  <LinkDocsListItemBase
-    className={`flex h-full box-border ${className}`}
-    iconClassName="mr-3 min-w-6 min-h-6"
-    doc={doc}
-    icon={icon}
-  />
-));
+import type { VNode } from '../../model/VNode';
+import { Text } from '../../ui-kit/Text/Text';
+import type { LinkDocsItem } from './LinkDocsContent';
+
+export interface LinkDocsListItemProps {
+  doc: LinkDocsItem;
+  icon?: VNode;
+}
+
+export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ doc, icon }) => {
+  const { text, fileSize, ...linkProps } = doc;
+
+  return (
+    <a
+      className="flex box-border gap-3 group/item h-fit w-fit text-primary-text no-underline hover:text-primary-main"
+      role="link"
+      {...linkProps}
+    >
+      {icon}
+      {text ? (
+        <Text size="text-l" font="font-light">
+          {text}
+          <Text color="text-secondary-text">
+            {linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize)}
+          </Text>
+        </Text>
+      ) : null}
+    </a>
+  );
+});
+
+const formatSuffix = (ext?: string, fileSize?: string) => {
+  const prefix = ext || fileSize ? ',' : '';
+  const extension = ext ? ` ${ext}` : '';
+  const size = fileSize ? ` (${fileSize})` : '';
+
+  return prefix + extension + size;
+};
+
+const getExtFromHref = (href: string) => {
+  if (!href) {
+    return '';
+  }
+
+  const index = href.lastIndexOf('.');
+
+  return index !== -1 ? href.substring(index + 1) : '';
+};

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

@@ -3,7 +3,6 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import type {
   OfficeServicesBlockContent,
   OfficeServicesBlockList,
@@ -25,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={getIconWithVersion(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

@@ -1,17 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { RepresentativeOfficeInfoContent } from './RepresentativeOfficeInfoContent';
-import type { Picture } from '../../model/Picture';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import type { IconName } from '../../icons/IconName';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
+import type { RepresentativeOfficeInfoContent } from './RepresentativeOfficeInfoContent';
 
 export interface RepresentativeOfficeInfoProps
   extends RepresentativeOfficeInfoContent,
@@ -57,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={getIconWithVersion(icon)} asSVG /> : null}
+    {icon?.icon ? <Img image={icon} /> : null}
   </div>
 );
 
@@ -69,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

@@ -11,7 +11,6 @@ import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps'
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 import type { RollupItemContent } from './RollupItemContent';
 
@@ -112,24 +111,12 @@ const renderPrimaryFoldButton = ({
   >
     <div className="flex group-hover:text-primary-main">
       {primaryIcon ? (
-        <Img
-          image={{ ...getIconWithVersion({ ...primaryIcon } as Picture) }}
-          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={{ ...getIconWithVersion({ icon: 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

@@ -7,7 +7,6 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { assertUnreachable } from '../../utils/assertUnreachable';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { checkCanRenderIcon } from './checkCanRenderIcon';
 import type { DefaultStep, Step, StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
@@ -121,6 +120,8 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
   const iconSize = size === 'normal' ? '38' : '27';
   const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
 
+  const iconVersion = version === 'secondary' ? 'white' : 'color';
+
   return (
     <div
       className={`${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
@@ -128,10 +129,9 @@ const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step
       <span className={`font-medium flex self-center ${iconTextSize}`}>
         {checkCanRenderIcon(step?.icon) ? (
           <Img
-            image={getIconWithVersion({ ...step.icon }, version)}
+            image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
             width={iconSize}
             height={iconSize}
-            asSVG
           />
         ) : (
           <span>{i + 1}</span>

package/mobile/src/components/StepsBlock/checkCanRenderIcon.ts

@@ -1,3 +1,4 @@
 import type { Picture } from '../../model/Picture';
 
-export const checkCanRenderIcon = (icon?: Picture) => Boolean(icon?.icon || icon?.src);
+export const checkCanRenderIcon = (icon?: Picture): icon is Picture & { src: string } =>
+  Boolean(icon?.icon || icon?.src);

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

@@ -3,7 +3,6 @@ import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Img } from '../../ui-kit/Img/Img';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
 import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
 import { TariffsTableCell } from './TariffsTableCell';
@@ -39,13 +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={getIconWithVersion(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/content-page-repository/transformImg.ts

@@ -11,6 +11,7 @@ import { resizeImg } from './resizeImg';
 import type { TransformationOptions } from './TransformationOptions';
 
 const mkdir = util.promisify(fs.mkdir);
+const copyFile = util.promisify(fs.copyFile);
 
 type ImgOutputPath = string;
 type TransformationTaskKey = ImgOutputPath;
@@ -21,13 +22,19 @@ type TransformImgOptions = TransformationOptions &
 
 const defaultTransformationCache: TransformationTasksCache = new Map();
 
+const isNilTransform = ({ size, containerSize, alignment, format }: TransformImgOptions) =>
+  isPictureSizeEmpty(size) && isPictureSizeEmpty(containerSize) && !alignment && !format;
+
+const isVectorInput = (input: string) =>
+  ['.svg', '.eps', '.epsf', '.epsi', '.pdf'].some((ext) => input.toLowerCase().endsWith(ext));
+
 export function transformImg(
   src: string,
   pagePath: string,
   options: TransformImgOptions,
 ): ImgOutputPath | Promise<ImgOutputPath> {
   if (!src) {
-    return '';
+    return src || '';
   }
 
   const input = path.join(path.dirname(pagePath), src);
@@ -43,9 +50,12 @@ export function transformImg(
   const result = (async () => {
     try {
       await mkdir(path.dirname(output), { recursive: true });
-
-      const chain = await computeTransformationChain(options)(sharp(input));
-      await chain.toFile(output);
+      if (isNilTransform(options) || isVectorInput(src)) {
+        await copyFile(input, output);
+      } else {
+        const chain = await computeTransformationChain(options)(sharp(input));
+        await chain.toFile(output);
+      }
     } catch (e) {
       console.error(e);
     }

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

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { Img } from '../Img/Img';
 import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
 
@@ -17,13 +16,15 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
     benefitsVersion = 'normal',
   } = props;
   const listItemAlign = description ? 'items-start' : 'items-center';
-  const calcVersion = benefitsVersion === 'white' ? 'secondary' : 'primary';
 
   return (
     <div className={`flex gap-5 ${listItemAlign} ${className}`}>
       {icon ? (
         <div className={getBenefitIconBgStyle(version, benefitsVersion)}>
-          <Img className="w-6 h-6" image={getIconWithVersion(icon, calcVersion)} asSVG />
+          <Img
+            className="w-6 h-6"
+            image={{ ...icon, iconVersion: icon.iconVersion || benefitsVersion }}
+          />
         </div>
       ) : null}
       <div className="gap-0.5">