@redneckz/wildless-cms-uni-blocks 0.3.33 → 0.3.36

package/bundle/bundle.umd.js

@@ -187,7 +187,7 @@
   }
 
   const HEADING_STYLE_MAP = {
-      h1: 'text-title-lg tracking-[-0.3px]',
+      h1: 'text-title-xl tracking-[-0.3px]',
       h2: 'text-title',
       h3: 'text-title-sm',
       h4: 'text-title-xs',
@@ -195,11 +195,11 @@
       h6: 'text-title-2xs tracking-[0.2px]',
   };
   const Heading = JSX((props) => {
-      const { className = '', headingType, title } = props;
+      const { className = '', headingType, title, as } = props;
       if (!headingType) {
           return;
       }
-      const Tag = headingType;
+      const Tag = as || headingType;
       return (jsx(Tag, { className: `font-sans m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`, children: title }));
   });
 
@@ -269,6 +269,7 @@
       IconMap["ActualBalanceIcon"] = "ActualBalanceIcon";
       IconMap["AppleIcon"] = "AppleIcon";
       IconMap["ArrowDownIcon"] = "ArrowDownIcon";
+      IconMap["ArrowLeftIcon"] = "ArrowLeftIcon";
       IconMap["ArrowsRewindRight"] = "ArrowsRewindRight";
       IconMap["ArrowUpIcon"] = "ArrowUpIcon";
       IconMap["AtmIcon"] = "AtmIcon";
@@ -346,7 +347,8 @@
   (function (IconTitleMap) {
       IconTitleMap["ActualBalanceIcon"] = "\u0414\u0435\u043D\u044C\u0433\u0438";
       IconTitleMap["AppleIcon"] = "\u041B\u043E\u0433\u043E \u00ABApple\u00BB";
-      IconTitleMap["ArrowDownIcon"] = "ArrowDownIcon";
+      IconTitleMap["ArrowDownIcon"] = "\u0421\u0442\u0440\u0435\u043B\u043A\u0430 '\u0412\u043D\u0438\u0437'";
+      IconTitleMap["ArrowLeftIcon"] = "\u0421\u0442\u0440\u0435\u043B\u043A\u0430 '\u0412\u043B\u0435\u0432\u043E'";
       IconTitleMap["ArrowsRewindRight"] = "ArrowsRewindRight";
       IconTitleMap["ArrowUpIcon"] = "ArrowUpIcon";
       IconTitleMap["AtmIcon"] = "\u0411\u0430\u043D\u043A\u043E\u043C\u0430\u0442";
@@ -423,8 +425,8 @@
 
   const svgColorsMap = {
       none: '',
-      primary: 'text-primary-main',
-      secondary: 'text-primary-text',
+      primary: 'text-white',
+      secondary: 'text-white',
   };
   const Icon = JSX(({ className = '', name = '', alt = `Иконка ${IconTitleMap[name] || name}`, title = alt, asSVG, color = 'primary', ...imgProps }) => {
       const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
@@ -483,10 +485,10 @@
       return index !== -1 ? href.substring(index + 1) : '';
   };
 
-  const LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full box-border ${className}`, iconClassName: "mr-2.5 min-w-6 min-h-6 text-primary-text", textClassName: "self-center", suffixClassName: "text-secondary-text group-hover:text-primary-main", doc: doc, icon: icon })));
+  const LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full box-border ${className}`, iconClassName: "mr-3.5 min-w-6 min-h-6 text-primary-text", textClassName: "self-center font-light", suffixClassName: "text-secondary-text group-hover:text-primary-main", doc: doc, icon: icon })));
 
   const LinkDocsList = JSX(({ className, documents, columnsMode = 'double', icon }) => {
-      return documents?.length ? (jsx("div", { className: className, role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { className: "group flex text-sm align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main", doc: doc, icon: icon }) }, String(i)))) })) : null;
+      return documents?.length ? (jsx("div", { className: className, role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { className: "group flex align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main", doc: doc, icon: icon }) }, String(i)))) })) : null;
   });
 
   const titleAlignStyleMap = {
@@ -570,7 +572,7 @@
       return {
           ...link,
           href,
-          ariaLabel: link.text,
+          'aria-label': link.text,
           onClick: handlerDecorator((ev) => {
               const isLocalHref = href && !isURL(href);
               const isLocalTarget = !link.target || link.target === '_self';
@@ -597,14 +599,14 @@
 
   const ButtonInner = JSX((props) => {
       const { text, aboveText, appendLeft } = props;
-      return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-m-2xs font-light text-left", children: aboveText }), jsx("div", { className: "text-base text-left", children: text })] })) : null] }));
+      return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-m-2xs font-light text-left", children: aboveText }), jsx("div", { className: "text-button-sm text-left", children: text })] })) : null] }));
   });
   const getButtonStyle = (props) => {
       const { version, aboveText, rounded } = props;
       if (version === 'link') {
           return '';
       }
-      const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-4'}`;
+      const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[18px]'}`;
       return [
           'flex items-center justify-center',
           isWithText(props) ? withTextStyle : 'h-12 w-12',
@@ -629,7 +631,12 @@
       const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, rounded: rounded }));
       return disabled ? (jsx(DisabledButton, { ...props, children: buttonInner })) : (jsx(RegularButton, { ...props, children: buttonInner }));
   });
-  const RegularButton = JSX(({ className, ariaLabel, version = 'none', rounded, href, target, children, onClick, ...rest }) => (jsx("a", { className: `${buttonStyle} inline-block cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: href ? 'link' : 'button', ...rest, children: children })));
+  const RegularButton = JSX(({ className, ariaLabel, version = 'none', rounded, href, target, children, onClick, ...rest }) => {
+      // Pick Button props to prevent forwarding into HTML <a> tag leading to errors being printed in console.
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { aboveText, appendLeft, ...linkProps } = rest;
+      return (jsx("a", { className: `${buttonStyle} inline-block cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: href ? 'link' : 'button', ...linkProps, children: children }));
+  });
   const DisabledButton = JSX(({ className, children, ariaLabel, version = 'none', rounded }) => (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: "-1", className: `inline-block ${buttonStyle} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: children })));
 
   const ButtonSection = JSX(({ context, className = '', buttons }) => {
@@ -648,24 +655,40 @@
       return jsx("div", { className: `font-normal text-base ${className}`, children: description });
   });
 
-  const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
+  const LIST_STYLE_CLASSES = {
+      primary: 'rounded-full inline-block mr-3 mt-2',
+      secondary: 'rounded-full inline-block mr-3 mt-2',
+      gray: 'rounded-full inline-block mr-3 mt-2',
+      tile: 'rounded-full inline-block mr-4',
+      'tile-white': 'rounded-full inline-block mr-4',
+  };
   const LIST_DOT_STYLE_MAP = {
-      primary: 'bg-primary-main',
+      primary: 'bg-primary-text',
       secondary: 'bg-white',
       gray: 'bg-secondary-text',
+      tile: 'bg-black',
+      'tile-white': 'bg-white',
   };
   const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary' }) => {
-      return (jsxs("div", { className: `font-sans flex items-center ${className}`, role: "listitem", children: [isDotted && jsx("div", { className: getListStyle(version) }), jsx("span", { children: children })] }));
+      return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted && jsx("div", { className: getListStyle(version) }), jsx("span", { children: children })] }));
   });
   const getListStyle = (version) => {
-      const size = version === 'gray' ? 'w-1.5 h-1.5 min-w-1.5 min-h-1.5' : 'w-2 h-2 min-w-2 min-h-2';
-      return `${LIST_STYLE_CLASSES} ${LIST_DOT_STYLE_MAP[version]} ${size}`;
+      const size = {
+          primary: 'w-2 h-2 min-w-2 min-h-2',
+          secondary: 'w-2 h-2 min-w-2 min-h-2',
+          gray: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5',
+          tile: 'w-[7px] h-[7px] min-w-[7px] min-h-[7px]',
+          'tile-white': 'w-[7px] h-[7px] min-w-[7px] min-h-[7px]',
+      };
+      return `${LIST_STYLE_CLASSES[version]} ${LIST_DOT_STYLE_MAP[version]} ${size[version]}`;
   };
 
   const TEXT_STYLE_MAP = {
       primary: 'text-primary-text',
       secondary: 'text-white',
       gray: 'text-secondary-text',
+      tile: 'text-primary-text',
+      'tile-white': 'text-white',
   };
   const List = JSX((props) => {
       const { className = '', itemClassName, isDotted, items, version = 'primary' } = props;
@@ -679,7 +702,7 @@
   });
 
   const benefitIconBgStyleMap = {
-      primary: 'bg-main',
+      primary: 'bg-primary-main',
       secondary: 'bg-white/30',
   };
   const benefitTitleStyleMap = {
@@ -691,21 +714,32 @@
       secondary: 'text-white',
   };
   function renderBenefit(benefit, i, version) {
-      return (jsxs("div", { className: "flex gap-4 items-center", children: [benefit.icon ? (jsx(Img, { className: `w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${benefitIconBgStyleMap[version]}`, image: benefit.icon, width: "24", height: "24", asSVG: true })) : null, jsxs("div", { className: "flex gap-1 flex-col h-full max-w-[149px]", children: [jsx("div", { className: `font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description && (jsx("div", { className: `font-normal text-sm ${benefitDescStyleMap[version]}`, children: benefit.description }))] })] }, String(i)));
+      return (jsxs("div", { className: "flex gap-4 items-center", children: [benefit.icon ? (jsx(Img, { className: `w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border text-white ${benefitIconBgStyleMap[version]}`, image: benefit.icon, width: "24", height: "24", asSVG: true })) : null, jsxs("div", { className: "flex gap-0.5 flex-col h-full max-w-[149px]", children: [jsx("div", { className: `font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description && (jsx("div", { className: `font-normal text-m-md ${benefitDescStyleMap[version]}`, children: benefit.description }))] })] }, String(i)));
   }
 
   const ProductBlockInner = JSX(({ className = '', context, title, headingType = 'h2', description, benefits, buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
       const textColor = version === 'secondary' ? 'text-white' : 'text-primary-text';
-      return (jsxs("div", { className: `flex grow justify-between items-stretch ${className}`, children: [jsx("div", { className: `flex flex-col ${textBlockClassName}`, children: jsxs(BaseTile, { context: context, title: getTitle(title, headingType, textColor), buttons: getButtons(context, buttons), children: [description && (jsx(Description, { className: `mt-[18px] max-w-[600px] text-title-new-sm font-light ${textColor}`, description: description })), benefits?.filter((items) => items.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-title-new-sm font-light", items: items, itemClassName: "mb-[10px]", version: version, isDotted: isDotted })) : null] }) }), image?.src && jsx(Img, { className: "mt-auto", image: image })] }));
+      return (jsxs("div", { className: `flex grow justify-between items-stretch ${className}`, children: [jsx("div", { className: `flex flex-col ${textBlockClassName}`, children: jsxs(BaseTile, { context: context, title: getTitle(title, headingType), buttons: getButtons(context, buttons), children: [description && (jsx(Description, { className: `mt-4 max-w-[600px] text-md font-light ${textColor}`, description: description })), benefits?.filter((items) => items.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-title-2xs font-light", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] }) }), image?.src && jsx(Img, { className: "mt-auto", image: image })] }));
   });
-  const getTitle = (title, headingType, textColor) => {
-      const Tag = headingType;
-      return (title && jsx(Tag, { className: `font-sans font-medium m-0 text-title-xl ${textColor}`, children: title }));
+  const getTitle = (title, headingType) => {
+      return (title && (jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })));
   };
   const getButtons = (context, buttons) => {
-      return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null;
+      return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-4" })) : null;
   };
 
+  const backwardBgStyleMap = {
+      primary: 'bg-primary-main',
+      secondary: 'bg-white',
+  };
+  const backwardIconStyleMap = {
+      primary: 'text-white',
+      secondary: 'text-primary-text',
+  };
+  function renderBackwardButton(text, version, className) {
+      return (jsxs("div", { className: `flex items-center ${className}`, children: [jsx(Button, { rounded: true, className: `w-12 h-12 min-h-12 max-h-12 flex items-center justify-center mr-3 ${backwardBgStyleMap[version]}`, ariaLabel: text, children: jsx(Img, { className: `w-4 h-4 min-w-4 min-h-4 rounded-full box-border ${backwardIconStyleMap[version]}`, image: { icon: 'ArrowLeftIcon' }, color: "none", width: "24", height: "24", asSVG: true }) }), text ? jsx("span", { className: "text-m-md", children: text }) : null] }));
+  }
+
   const productBlockStyleMap$1 = {
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
@@ -718,7 +752,7 @@
       const { context, className = '', breadcrumbs, version = 'primary', anchor = null, ...otherProps } = props;
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("section", { className: `font-sans pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap$1[version]} ${className}`, id: anchor, children: [breadcrumbs?.length ? (jsx("div", { className: "text-xs mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbsStyleMap[version]}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { ...useLink({ router, handlerDecorator }, { className: breadcrumbsStyleMap[version], ...breadcrumb }) }, String(i))))) })) : null, jsx(ProductBlockInner, { context: context, version: version, ...otherProps })] }));
+      return (jsxs("section", { className: `font-sans pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap$1[version]} ${className}`, id: anchor, children: [renderBackwardButton('Все дебетовые карты', version, 'mb-10'), breadcrumbs?.length ? (jsx("div", { className: "text-xs mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbsStyleMap[version]}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { ...useLink({ router, handlerDecorator }, { className: breadcrumbsStyleMap[version], ...breadcrumb }) }, String(i))))) })) : null, jsx(ProductBlockInner, { context: context, version: version, ...otherProps })] }));
   });
 
   const textBlockStyleMaps = {
@@ -803,11 +837,11 @@
   };
   const Tile = JSX((props) => {
       const { context, title, description, items, children, buttons, image, className = '', version = 'primary', role, anchor = null, } = props;
-      return (jsx("section", { className: `overflow-hidden font-sans p-9 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, role: role, id: anchor, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
-              ${version === 'primary' ? 'text-primary-text' : ''}` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description && jsx(Description, { className: "mt-4 max-w-[600px]", description: description }), children, renderList$1(items, version)] }) }));
+      return (jsx("section", { className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, role: role, id: anchor, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), as: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
+              ${version === 'primary' ? 'text-primary-text' : ''}` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description && (jsx(Description, { className: "mt-4 max-w-[600px] text-title-new-sm font-light", description: description })), children, renderList$1(items, version)] }) }));
   });
   function renderList$1(items, version) {
-      return items?.length ? (jsx(List, { items: items, itemClassName: "mt-2.5 first:mt-0", version: version })) : null;
+      return items?.length ? (jsx(List, { items: items, itemClassName: "text-title-new-sm font-light mt-2.5 first:mt-0", version: version === 'primary' ? 'tile' : 'tile-white' })) : null;
   }
 
   const productTileStyleMap = {
@@ -866,30 +900,29 @@
   };
 
   const GalleryCardInner = JSX(({ title, description, image, items, button, version }) => {
-      const titleStyleClasses = getTitleStyle(version, description, items);
-      return (jsxs("div", { className: "h-full flex flex-col justify-between", children: [jsxs("div", { children: [image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: image }) })) : null, title ? renderCardTitle(title, titleStyleClasses) : null, description ? (jsx("div", { className: `font-normal text-sm ${title ? 'mt-2' : ''}`, children: description })) : null, items?.length ? renderItems(items, version) : null] }), button?.text ? renderButton$1(button) : null] }));
+      const titleStyleClasses = getTitleStyle(version);
+      return (jsxs("div", { className: "h-full flex flex-col justify-between text-center", children: [jsxs("div", { children: [image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: image }) })) : null, title ? renderCardTitle(title, titleStyleClasses) : null, description ? (jsx("div", { className: `font-light text-m-md-new ${title ? 'mt-2' : ''}`, children: description })) : null, items?.length ? renderItems(items, version) : null] }), button?.text ? renderButton$1(button) : null] }));
   });
   function renderButton$1(button) {
       return (jsx(Button, { className: "mt-6 w-full", appendLeft: button.icon && jsx(Img, { image: button.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
   }
   function renderCardTitle(title, className) {
-      return jsx("div", { className: `font-medium text-xl m-0 ${className}`, children: title });
+      return jsx("div", { className: `text-xl m-0 ${className}`, children: title });
   }
   function renderItems(items, version = 'primary') {
       return (jsx(List, { className: `max-w-[308px] mt-2 text-sm ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "mt-1 first:mt-0", items: items.filter((item) => item?.text).map((item) => item.text), version: version }));
   }
-  function getTitleStyle(version, description, items) {
-      return `font-medium text-xl m-0
+  function getTitleStyle(version) {
+      return `text-xl m-0
         ${version !== 'secondary' ? 'text-primary-text' : ''}
-        ${!description && !items?.length ? 'text-center' : ''}
       `;
   }
 
   const GalleryContainer = JSX(({ context, title, description, cards = [], version = 'normal', activeCardIndex }) => {
-      return (jsxs("div", { children: [jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" }), jsxs("div", { className: "flex flex-col items-center mb-8", children: [title ? jsx(Heading, { headingType: "h2", className: "text-center", title: title }) : null, description ? (jsx("div", { className: "font-normal text-base max-w-[600px] mt-2.5", children: description })) : null] }), jsx("div", { className: `flex ${cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''} duration-1000`, style: { transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }, role: "list", children: cards?.map((card, i) => renderCard({ card, version, context }, i)) })] }));
+      return (jsxs("div", { children: [jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" }), jsxs("div", { className: "flex flex-col items-center mb-8", children: [title ? jsx(Heading, { headingType: "h2", className: "text-center", title: title }) : null, description ? (jsx("div", { className: "font-light text-md max-w-[600px] mt-2.5", children: description })) : null] }), jsx("div", { className: `flex ${cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''} duration-1000`, style: { transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }, role: "list", children: cards?.map((card, i) => renderCard({ card, version, context }, i)) })] }));
   });
   function renderCard({ card, version }, i) {
-      return (jsx("section", { className: `box-border border-solid border rounded-md border-main-divider p-7 mx-2 flex flex-col justify-between
+      return (jsx("section", { className: `box-border border-solid border border-main-stroke p-6 mx-2 flex flex-col justify-between
         items-stretch ${cardStyleMap[version]} ${cardVersionMap[card.version ?? 'primary']} w-full col-span-4`, role: "listitem", children: jsx(GalleryCardInner, { ...card }) }, String(i)));
   }
 
@@ -901,7 +934,7 @@
       const showNextButton = isGalleryScrollAvailable &&
           cards?.length - activeCardIndex > galleryLengthForScrollMap[version];
       const showPrevButton = isGalleryScrollAvailable && activeCardIndex > 0;
-      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-[50px] overflow-hidden ${className}`, id: anchor, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 rotate-180 z-10 mt-[25px]", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })), showNextButton && (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-[25px]", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })), jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" })] }));
+      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-[42px] overflow-hidden ${className}`, id: anchor, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 rotate-180 z-10 mt-[25px]", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })), showNextButton && (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-[25px]", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })), jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" })] }));
   });
 
   const Gallery = JSX((props) => jsx(GalleryInner, { ...props, version: "normal" }));
@@ -1002,7 +1035,7 @@
   };
   const TableCarouselContainer = JSX(({ children, activeCardIndex, columnWidth, version = 'comparison' }) => (jsx("div", { className: "flex flex-1 overflow-hidden", children: jsx("div", { className: carouselContainerClassesMap[version], style: { transform: `translateX(-${activeCardIndex * columnWidth}px)` }, children: children }) })));
 
-  const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES$1} ${GRADIENT}`, role: "columnheader", scope: "col", children: [icon && !image?.src && (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })), image?.src && jsx(Img, { className: "mb-[18px]", image: image }), title && jsx(Heading, { headingType: "h4", className: "text-center text-white", title: title }), link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "font-medium text-xs py-[11px]", children: link.text }) }) }))] })));
+  const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES$1} ${GRADIENT}`, role: "columnheader", scope: "col", children: [icon && !image?.src && (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })), image?.src && jsx(Img, { className: "mb-[18px]", image: image }), title && jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title }), link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "font-medium text-xs py-[11px]", children: link.text }) }) }))] })));
 
   const ComparisonTableColumnHeaders = JSX(({ colHeaders, activeCardIndex, router, handlerDecorator }) => {
       return (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES$1, role: "columnheader", scope: "col" }), jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header, link: header.link && useLink({ router, handlerDecorator }, header.link) }, String(i)))) })] }));
@@ -1013,7 +1046,7 @@
       const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES$1} ${isFillGradient && isFirstRow ? 'border-t' : ''} ${!isLastRow ? 'border-solid' : 'border-b-0'}`;
       return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { className: cellClasses, children: cell.map((item, i) => renderCellInner$1(item, i, isFillGradient)) }) }));
   });
-  const renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label && (jsx("h5", { className: `text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`, children: label })), description && (jsx("div", { className: `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`, children: description }))] }, String(i)));
+  const renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label && (jsx("h4", { className: `text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`, children: label })), description && (jsx("div", { className: `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`, children: description }))] }, String(i)));
 
   const TableRow = JSX(({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (jsxs(TableRowContainer, { children: [header?.title ? (jsx("div", { className: `text-sm py-7 ${DIVIDER_CLASSES$1} ${FIRST_CELL_CLASSES$1} ${!isLastRow ? 'border-solid' : 'border-b-0'}`, children: header.title })) : null, data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: data.map((cell, i) => (jsx(TableCell, { cell: cell, isFirstRow: isFirstRow, isLastRow: isLastRow, isFillGradient: isColoredFirstColumn && i === 0 }, String(i)))) })) : null] })));
 
@@ -1163,8 +1196,19 @@
       }
   };
 
+  const tableFunc = (table) => (input) => {
+      const [, output] = table.find(([predicate]) => predicate(input)) || [];
+      return output;
+  };
+
+  const func = tableFunc([
+      [(_) => _ === 1, 'год'],
+      [(_) => _ <= 4, 'года'],
+      [() => true, 'лет'],
+  ]);
   function renderButton(number, i, handleClick) {
-      return (jsx("button", { className: "bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer border-none", onClick: () => handleClick(number), children: jsxs("span", { className: "font-semibold text-sm", children: [number, " ", number === 1 ? 'год' : number > 4 ? 'лет' : 'года'] }) }, String(i)));
+      const string = func(number);
+      return (jsx("button", { className: "bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer border-none", onClick: () => handleClick(number), children: jsxs("span", { className: "font-semibold text-sm", children: [number, " ", string] }) }, String(i)));
   }
 
   const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
@@ -1370,21 +1414,21 @@
       transparent: 'text-white',
   };
   const Logo = JSX(({ className, href, children, targetBlank, bgColor = 'bg-white', hideTitle }) => {
-      return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className || ''}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', "aria-label": "\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A", children: [jsx(SVG, { className: `${SVG_COLOR[bgColor]} w-10`, viewBox: "0 0 40 45", paths: LOGO_PATHS.map((d) => ({ d })) }), !hideTitle && (jsx("span", { className: `${TEXT_COLOR[bgColor]} text-base font-medium ml-2.5`, children: children || 'Россельхозбанк' }))] }));
+      return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className || ''}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', "aria-label": "\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A", children: [jsx(SVG, { className: `${SVG_COLOR[bgColor]} w-10`, viewBox: "0 0 40 45", paths: LOGO_PATHS.map((d) => ({ d })) }), !hideTitle && (jsx("span", { className: `${TEXT_COLOR[bgColor]} text-m-title-xs font-medium ml-2.5`, children: children || 'Россельхозбанк' }))] }));
   });
 
   const SearchBar = JSX(({ className, context }) => {
       const { term, setTerm } = context.useSearch();
-      return (jsxs("form", { className: `relative ${className || ''}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: "w-[24px] h-[24px]", children: jsx(Img, { image: "LoupeIcon", width: "24", height: "24" }) }), !term && (jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-normal text-base text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: 'h-12 pl-12 w-full peer font-sans font-normal text-base text-black border border-solid rounded h-full box-border outline-none pr-[6%] border-main-divider focus:border-primary-text', value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input" }), jsx(Button, { version: "primary", text: "\u041D\u0430\u0439\u0442\u0438", className: "invisible peer-focus:visible absolute top-1 right-1", onClick: (e) => {
+      return (jsxs("form", { className: `relative ${className || ''}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: "w-[24px] h-[24px]", children: jsx(Img, { image: "LoupeIcon", width: "24", height: "24" }) }), !term && (jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-light text-base text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: 'h-12 pl-12 w-full peer font-sans font-light text-base text-black border border-solid rounded h-full box-border outline-none pr-[6%] border-main-divider focus:border-primary-text', value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input" }), jsx(Button, { version: "primary", text: "\u041D\u0430\u0439\u0442\u0438", className: "invisible peer-focus:visible absolute top-1 right-1", onClick: (e) => {
                       e.preventDefault();
                       console.log('click');
                   }, children: jsx("div", { className: "font-normal text-sm px-9 py-[9px]", children: "\u041D\u0430\u0439\u0442\u0438" }) })] }));
   });
 
-  const Contacts = JSX(({ className, items, hasButton, context }) => {
+  const Contacts = JSX(({ className = '', items, hasButton, context }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("div", { className: `flex flex-col ${className || ''}`, children: [items?.length ? items.map(renderContact) : null, hasButton ? (jsx(Button, { version: "primary", className: "mt-0.5 mb-5", ...useLink({ router, handlerDecorator }, {
+      return (jsxs("div", { className: className, children: [items?.length ? items.map(renderContact) : null, hasButton ? (jsx(Button, { version: "primary", className: "mb-6 w-full", ...useLink({ router, handlerDecorator }, {
                       text: 'Обратная связь',
                       href: '/',
                       target: '_blank',
@@ -1392,14 +1436,14 @@
   });
   const renderContact = (item, index) => {
       const { type, text, description } = item;
-      return (jsxs("div", { className: "mb-3.5", children: [jsx("div", { children: renderText(type, text) }), jsx("div", { className: "font-sans text-sm text-secondary-text", children: description })] }, String(index)));
+      return (jsxs("div", { className: "mb-4", children: [jsx("div", { children: renderText(type, text) }), jsx("div", { className: "mt-1 font-sans font-light text-sm text-secondary-text", children: description })] }, String(index)));
   };
   const renderText = (type, text = '') => {
       switch (type) {
           case 'tel':
-              return (jsx("a", { className: "font-sans font-medium text-xl text-primary-text no-underline", href: `tel:${formatTel(text)}`, children: text }));
+              return (jsx("a", { className: "font-sans text-xl text-primary-text no-underline", href: `tel:${formatTel(text)}`, children: text }));
           case 'email':
-              return (jsx("a", { className: "font-sans font-medium text-xl text-primary-text no-underline", href: `mailto:${text}`, children: text }));
+              return (jsx("a", { className: "font-sans text-xl text-primary-text no-underline", href: `mailto:${text}`, children: text }));
           default:
               return jsx("span", { children: text });
       }
@@ -1411,7 +1455,7 @@
       const { handlerDecorator } = context;
       return (jsx("div", { className: className, children: links?.length ? (jsx("div", { className: "flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null }));
   });
-  const HorizontalNavigationLink = JSX(({ className = '', index, text, href, target, onClick }) => (jsx("a", { className: `font-sans font-normal text-sm text-secondary-text hover:text-primary-main inline-block no-underline  max-w-[292px] ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
+  const HorizontalNavigationLink = JSX(({ className = '', index, text, href, target, onClick }) => (jsx("a", { className: `font-sans font-light text-secondary-text hover:text-primary-main inline-block no-underline  max-w-[292px] ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
 
   const cmp = (a) => (b) => a?.href === b?.href;
   const substitute = (items, substitution) => (items || []).map((_) => substitution?.find(cmp(_)) || _);
@@ -1430,20 +1474,20 @@
       return `/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`;
   }
 
-  const Sitemap = JSX(({ className, items, context }) => {
+  const Sitemap = JSX(({ className = '', items, context }) => {
       const sitemap = useSitemap(context.useAsyncData);
       const mergedItems = mergeTopItems(sitemap.topItems, items);
       const linkParams = {
           router: context.useRouter(),
           handlerDecorator: context.handlerDecorator,
       };
-      return (jsx("div", { className: `flex items-start justify-start gap-11 xl:gap-5 ${className || ''}`, children: mergedItems?.map((_, i) => renderColumn(_, i, linkParams)) }));
+      return (jsx("div", { className: `flex items-start justify-between gap-11 xl:gap-5 ${className}`, children: mergedItems?.map((_, i) => renderColumn(_, i, linkParams)) }));
   });
   const renderColumn = (c, index, { router, handlerDecorator }) => {
       const { text, href, items, target } = c;
-      return (jsxs("div", { className: "flex flex-col gap-[14px]", children: [jsx("a", { className: "block font-sans font-medium text-base text-primary-text no-underline", href: href, target: target || '_self', children: text || `Раздел ${index}` }), items?.map((_, i) => (jsx(ColumnItem, { ...useLink({ router, handlerDecorator }, _), index: i }, String(i))))] }, String(index)));
+      return (jsxs("div", { className: "flex flex-col w-1/5 last:w-1/4 gap-[14px]", children: [jsx("a", { className: "block font-sans leading-5 text-base text-primary-text no-underline", href: href, target: target || '_self', children: text || `Раздел ${index}` }), items?.map((_, i) => (jsx(ColumnItem, { ...useLink({ router, handlerDecorator }, _), index: i }, String(i))))] }, String(index)));
   };
-  const ColumnItem = JSX(({ text, href, target, index }) => (jsx("a", { className: "block font-sans font-normal text-base text-secondary-text hover:text-primary-main no-underline", href: href, target: target || '_self', children: text || `Раздел ${index}` })));
+  const ColumnItem = JSX(({ text, href, target, index }) => (jsx("a", { className: "block font-sans font-light text-base text-secondary-text hover:text-primary-main no-underline", href: href, target: target || '_self', children: text || `Раздел ${index}` })));
 
   const ICONS_MAP = [
       {
@@ -1467,34 +1511,47 @@
           width: '12px',
           height: '20px',
       },
+      {
+          origins: ['apps.apple.com'],
+          icon: { icon: 'AppleIcon' },
+          label: 'App Store',
+          width: '20px',
+          height: '22px',
+      },
+      {
+          origins: ['play.google.com'],
+          icon: { icon: 'PlayMarketIcon' },
+          label: 'Google Play',
+          width: '21px',
+          height: '21px',
+      },
   ];
   const MediaButton = JSX(({ href }) => {
       const { icon, width, height, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
       if (!icon)
           return null;
-      return (jsx("a", { className: "flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[40px] h-[40px] box-border hover:text-primary-main", href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(Img, { image: icon, width: width, height: height, asSVG: true, className: "block", color: "none" })) : null }));
+      return (jsx("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 text-primary-main hover:text-white hover:bg-primary-main hover:border-primary-main", href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(Img, { image: icon, width: width, height: height, asSVG: true, className: "block", color: "none" })) : null }));
   });
 
-  const SocialMedia = JSX(({ className, media, context }) => {
+  const SocialMedia = JSX(({ className = '', media, context, children }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsx("div", { className: `flex items-end gap-2 pt-[30px] pb-7 ${className || ''}`, children: media?.map((_, index) => (jsx(MediaButton, { ...useLink({ router, handlerDecorator }, _) }, String(index)))) }));
+      return (jsxs("div", { children: [jsx("div", { className: `flex gap-2.5 mb-1.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { ...useLink({ router, handlerDecorator }, _) }, String(index)))) }), jsx("span", { className: "font-light text-sm text-secondary-text", children: children })] }));
   });
 
   const TextInformation = JSX(({ className, links, context }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { className: "pt-5 pb-[5px]", children: jsx("span", { className: "font-sans font-normal text-xs text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex justify-start items-start gap-5 pt-[5px]", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
+      return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { className: "pt-5 pb-[5px]", children: jsx("span", { className: "font-sans font-light text-xs text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex justify-start items-start gap-5 pt-[5px]", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
   });
-  const TextInformationLink = JSX(({ className, index, text, href, target, onClick }) => (jsx("a", { className: `font-sans font-normal text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${className || ''}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
+  const TextInformationLink = JSX(({ className, index, text, href, target, onClick }) => (jsx("a", { className: `font-sans font-light text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${className || ''}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
 
-  const LEFT_COL_WIDTH_FULL_HD = 'w-[280px]';
-  const LEFT_COL_WIDTH_SMALL_DESKTOP = 'xl:w-[220px]';
-  const Footer = JSX(({ className, documents, relatedEnterprises, contacts, socialMedia, topItems, context, anchor = null, }) => {
-      return (jsxs("footer", { className: `px-9 py-10 bg-white ${className || ''}`, id: anchor, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-8 xl:gap-8", children: [jsx(Logo, { className: `${LEFT_COL_WIDTH_FULL_HD} ${LEFT_COL_WIDTH_SMALL_DESKTOP}` }), jsx(SearchBar, { context: context, className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsx(Contacts, { className: `${LEFT_COL_WIDTH_FULL_HD} shrink-0 overflow-hidden ${LEFT_COL_WIDTH_SMALL_DESKTOP}`, items: contacts, context: context, hasButton: true }), jsx(Sitemap, { className: "pt-[3px]", context: context, items: topItems })] }), jsx(SocialMedia, { media: socialMedia, context: context }), jsx(HorizontalNavigation, { links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
+  const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
+  const Footer = JSX(({ className, documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, context, anchor = null, }) => {
+      return (jsxs("footer", { className: `px-9 pt-9 pb-8 bg-white ${className || ''}`, id: anchor, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD }), jsx(SearchBar, { context: context, className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, context: context, hasButton: true }), jsx(SocialMedia, { media: socialMedia, context: context, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, context: context, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "pt-[3px]", context: context, items: topItems })] }), jsx(HorizontalNavigation, { className: "mt-24", links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
   });
 
-  const maxBy = (discriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
+  const checkIsHrefSameOrigin = (href, router) => getOrigin(href) === getOrigin(router.href);
 
   const isHrefActive = (href, router, cmp = (href, baseHref) => baseHref.startsWith(href)) => {
       return cmp(withoutQuery(href), withoutMobilePath(withoutQuery(isURL(href) ? router.href : router.pathname)));
@@ -1502,40 +1559,13 @@
 
   const isSubItemActive = (router) => (subItem) => isHrefActive(subItem.href, router);
 
-  const findActiveSubItem = (router) => (items = []) => {
-      const possibleActiveSubItems = items?.filter(isSubItemActive(router));
-      const activeSubItem = possibleActiveSubItems?.length
-          ? maxBy((_) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
-          : null;
-      return activeSubItem;
-  };
-
-  const checkIsHrefSameOrigin = (href, router) => getOrigin(href) === getOrigin(router.href);
-
   const isTopItemActive = (router) => (topItem) => topItem.items?.some(isSubItemActive(router)) ||
       isHrefActive(topItem.href, router) ||
       checkIsHrefSameOrigin(topItem.href, router);
 
-  const TEXT_CLASSES$2 = 'font-sans font-normal text-base';
-  const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
-  const HeaderItem = JSX(({ className, text, href, target, active, onClick, children, bgColor = 'bg-white' }) => (jsxs("a", { className: `relative inline-block bg-transparent text-center no-underline ${className || ''}`, href: href, target: target, onClick: onClick, children: [jsx("span", { className: getTextClasses$2(bgColor, active), children: text || children }), active ? jsx("div", { className: getBorderClasses(bgColor, active) }) : null] })));
-  const getTextClasses$2 = (bgColor, active) => {
-      let classes = 'text-white';
-      if (bgColor === 'bg-white') {
-          classes = active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main';
-      }
-      return `${classes} ${TEXT_CLASSES$2}`;
-  };
-  const getBorderClasses = (bgColor, active) => {
-      if (!active) {
-          return BORDER_CLASSES;
-      }
-      return `${bgColor === 'bg-white' ? 'bg-primary-main' : bgColor} ${BORDER_CLASSES}`;
-  };
-
-  const TEXT_CLASSES$1 = 'font-sans font-normal text-sm';
+  const TEXT_CLASSES$2 = 'font-sans font-light text-sm';
   const LINK_CLASSES$1 = 'inline-block border border-solid bg-transparent text-center no-underline';
-  const TopItem = JSX(({ className = '', text, href, target, active, flat, onClick, children, ariaLabel, bgColor = 'bg-white', }) => (jsx("a", { className: `${getLinkClasses$1(bgColor, active, flat)} ${className}`, href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": ariaLabel, children: jsx("span", { className: getTextClasses$1(bgColor, active, flat), children: text || children }) })));
+  const TopItem = JSX(({ className = '', text, href, target, active, flat, onClick, children, ariaLabel, bgColor = 'bg-white', }) => (jsx("a", { className: `${getLinkClasses$1(bgColor, active, flat)} ${className}`, href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": ariaLabel, children: jsx("span", { className: getTextClasses$2(bgColor, active, flat), children: text || children }) })));
   const getLinkClasses$1 = (bgColor, active, flat) => {
       let classes = 'border-transparent';
       if (active) {
@@ -1543,14 +1573,14 @@
       }
       return `${classes} ${LINK_CLASSES$1} ${flat ? '' : 'px-4 py-2'}`;
   };
-  const getTextClasses$1 = (bgColor, active, flat) => {
+  const getTextClasses$2 = (bgColor, active, flat) => {
       let classes = 'text-white';
       if (bgColor === 'bg-white') {
           classes = active
               ? 'text-primary-main'
               : `${flat ? 'text-primary-text' : 'text-secondary-text'} hover:text-primary-main`;
       }
-      return `${classes} ${TEXT_CLASSES$1}`;
+      return `${classes} ${TEXT_CLASSES$2}`;
   };
 
   const HeaderSecondaryMenuButton = JSX(({ className = '', children, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 p-0 w-[24px] h-[24px] flex items-center bg-inherit cursor-pointer ${className}`, disabled: true, "aria-label": ariaLabel, children: children })));
@@ -1559,34 +1589,118 @@
       'bg-white': 'text-primary-text hover:text-primary-main',
       transparent: 'text-white',
   };
-  const DOP_LINKS_COLORS_MAP = {
+  const LINKS_COLORS_MAP = {
       'bg-white': 'text-secondary-light hover:text-secondary-hover',
       transparent: 'text-white',
   };
-  const DOP_LINKS_ICON_NAME_MAP = {
+  const LINKS_ICON_NAME_MAP = {
       'bg-white': 'GridIcon',
       transparent: 'GridIconWhite',
   };
   const HeaderSecondaryMenu = JSX(({ context, className, defaultLocation = '', bgColor = 'bg-white' }) => {
       const [city, getCity] = context.useGeolocation(defaultLocation);
-      return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: city, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: getCity, bgColor: bgColor }), jsx(TopItem, { className: "mr-7", flat: true, href: "#", text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432", bgColor: bgColor }), jsx(HeaderSecondaryMenuButton, { className: `mr-5 ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(Img, { image: "LoupeIcon", className: "h-full", asSVG: true, color: "none" }) }), jsx(HeaderSecondaryMenuButton, { className: `mr-5 ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u0440\u043E\u0444\u0438\u043B\u044C", children: jsx(Img, { image: "ProfileIcon", className: "h-full", asSVG: true, color: "none" }) }), jsx(HeaderSecondaryMenuButton, { className: `${DOP_LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`, ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(Img, { image: DOP_LINKS_ICON_NAME_MAP[bgColor], className: "h-full", asSVG: true, color: "none" }) })] }));
+      return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: city, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: getCity, bgColor: bgColor }), jsx(TopItem, { className: "mr-7", flat: true, href: "#", text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432", bgColor: bgColor }), jsx(HeaderSecondaryMenuButton, { className: `mr-5 ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(Img, { image: "LoupeIcon", className: "h-full", asSVG: true, color: "none" }) }), jsx(HeaderSecondaryMenuButton, { className: `${LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`, ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(Img, { image: LINKS_ICON_NAME_MAP[bgColor], className: "h-full", asSVG: true, color: "none" }) })] }));
   });
 
+  const maxBy = (discriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
+
+  const findActiveSubItem = (router) => (items = []) => {
+      const possibleActiveSubItems = items?.filter(isSubItemActive(router));
+      const activeSubItem = possibleActiveSubItems?.length
+          ? maxBy((_) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
+          : null;
+      return activeSubItem;
+  };
+
+  const TEXT_CLASSES$1 = 'font-sans font-light text-base';
+  const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
+  const HeaderItem = JSX(({ className = '', text, href, target, active, onClick, children, bgColor = 'bg-white', dataItemName, }) => (jsxs("a", { className: `relative inline-block bg-transparent text-center no-underline ${className}`, href: href, target: target, onClick: onClick, "data-item-name": dataItemName, children: [jsx("span", { className: getTextClasses$1(bgColor, active), children: text || children }), active ? jsx("div", { className: getBorderClasses(bgColor, active) }) : null] })));
+  const getTextClasses$1 = (bgColor, active) => {
+      let classes = 'text-white';
+      if (bgColor === 'bg-white') {
+          classes = active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main';
+      }
+      return `${classes} ${TEXT_CLASSES$1}`;
+  };
+  const getBorderClasses = (bgColor, active) => {
+      if (!active) {
+          return BORDER_CLASSES;
+      }
+      return `${bgColor === 'bg-white' ? 'bg-primary-main' : bgColor} ${BORDER_CLASSES}`;
+  };
+
+  const isSSR = () => !(typeof window !== 'undefined' && window.document && window.document.createElement);
+
+  const headerSubMenuObserver = isSSR()
+      ? undefined
+      : new IntersectionObserver((entries) => {
+          const headerSubMenuButtonElement = window.document.querySelector('[data-header-submenu-visible=toggled]');
+          const headerSubMenuItems = Array.from(window.document.querySelectorAll('[data-item-name=header-submenu]'));
+          const dotsHeaderSubMenuItems = Array.from(window.document.querySelectorAll('[data-item-name=dots-header-submenu]'));
+          const visibilityList = {};
+          entries.forEach((j) => {
+              visibilityList[String(j.target.toString())] = j.isIntersecting;
+          });
+          const isHeaderSubMenuButtonShow = toggleVisibilityInItems(visibilityList, dotsHeaderSubMenuItems, 'hidden');
+          toggleVisibilityInItems(visibilityList, headerSubMenuItems, 'invisible');
+          if (headerSubMenuButtonElement) {
+              isHeaderSubMenuButtonShow
+                  ? headerSubMenuButtonElement.classList.remove('hidden')
+                  : headerSubMenuButtonElement.classList.add('hidden');
+          }
+      }, { root: window.document, threshold: 1.0 });
+  // TODO: add types
+  const toggleVisibilityInItems = (visibilityList, items, className) => {
+      const isReversed = className !== 'hidden';
+      return items.some((item) => {
+          const key = item.toString();
+          const option = isReversed ? !visibilityList[key] : visibilityList[key];
+          key in visibilityList ? item.classList.toggle(className, option) : null;
+          return isReversed ? item.classList.contains('hidden') : !item.classList.contains('hidden');
+      });
+  };
+
+  const HeaderSubMenu = JSX(({ context, subItems, bgColor }) => {
+      const [subMenuIsShow, setHiddenMenuIsShow] = context.useState(false);
+      const router = context.useRouter();
+      const { handlerDecorator } = context;
+      setTimeout(() => {
+          const headerSubMenu = globalThis.document.querySelectorAll('[data-item-name=header-submenu]');
+          headerSubMenu.forEach((_) => {
+              headerSubMenuObserver?.observe(_);
+          });
+      }, 200);
+      const activeSubItem = findActiveSubItem(router)(subItems);
+      const toggleSubMenu = () => setHiddenMenuIsShow(!subMenuIsShow);
+      const subMenu = subItems?.map((_) => (jsx(HeaderItem, { className: "mr-8", active: _ === activeSubItem, ...useLink({ router, handlerDecorator }, _), dataItemName: "header-submenu", bgColor: bgColor }, _.href)));
+      return (jsxs("nav", { className: "relative mt-5", children: [jsx("div", { className: "overflow-hidden whitespace-nowrap mr-52", children: subMenu }), renderDotsSubMenu({
+                  subMenuIsShow,
+                  toggleSubMenu,
+                  subItems,
+                  router,
+                  handlerDecorator,
+              })] }));
+  });
+  // TODO: add types
+  const renderDotsSubMenu = ({ subMenuIsShow, toggleSubMenu, subItems, router, handlerDecorator, }) => (jsxs("div", { className: `absolute w-52 -top-4 right-0 pt-4 z-40 ${subMenuIsShow ? 'bg-white rounded-md shadow-blue-gray/24' : ''}`, "data-header-submenu-visible": "toggled", children: [jsx("button", { className: "flex justify-between items-center cursor-pointer h-6 ml-6", onClick: toggleSubMenu, "aria-label": `${subMenuIsShow ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, children: Array(3)
+                  .fill(0)
+                  .map((_, i) => renderDot(i)) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`, "aria-hidden": !subMenuIsShow, children: renderDotsSubMenuItems(subItems, router, handlerDecorator) })] }));
+  // TODO: add types
+  const renderDotsSubMenuItems = (subItems, router, handlerDecorator) => subItems?.map((_) => (jsx("a", { ...useLink({ router, handlerDecorator }, _), "data-item-name": "dots-header-submenu", className: "text-base font-light pb-4 hover:text-primary-main", children: _.text }, _.href)));
+  const renderDot = (i) => (jsx("div", { className: "w-[3px] h-[3px] rounded bg-black mr-1" }, String(i)));
+
   const BORDER_COLORS = {
       'bg-white': 'bg-main-divider',
       transparent: 'bg-main-divider opacity-30',
   };
-  const Header = JSX(({ className, defaultLocation = 'Москва', bgColor = 'bg-white', context, topItems, anchor = null, }) => {
+  const Header = JSX(({ className = '', defaultLocation = 'Москва', bgColor = 'bg-white', context, topItems, anchor = null, }) => {
       const router = context.useRouter();
       const sitemap = useSitemap(context.useAsyncData);
       const { handlerDecorator } = context;
       const mergedItems = mergeTopItems(sitemap.topItems, topItems);
       const activeTopItem = mergedItems.find(isTopItemActive(router));
-      const subItems = activeTopItem?.items;
-      const activeSubItem = findActiveSubItem(router)(subItems);
-      const topMenu = mergedItems.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ...useLink({ router, handlerDecorator }, _), ariaLabel: _.text, bgColor: bgColor }, String(i))));
-      const subMenu = subItems?.map((_) => (jsx(HeaderItem, { className: "mr-8", active: _ === activeSubItem, ...useLink({ router, handlerDecorator }, _), bgColor: bgColor }, _.href)));
-      return (jsx("header", { className: `pt-5 pb-8 px-20 ${bgColor} ${className || ''}`, id: anchor, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor }), topMenu, jsx(HeaderSecondaryMenu, { context: context, className: "ml-auto", defaultLocation: defaultLocation, bgColor: bgColor })] }), jsx("div", { className: `mt-5 h-[1px] ${BORDER_COLORS[bgColor]}` }), jsx("nav", { className: "mt-5", children: subMenu })] }) }));
+      const topMenu = mergedItems.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ...useLink({ router, handlerDecorator }, _), "aria-label": _.text, bgColor: bgColor }, String(i))));
+      return (jsx("header", { className: `pt-6 pb-8 px-20 ${bgColor} ${className}`, id: anchor, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor }), topMenu, jsx(HeaderSecondaryMenu, { context: context, className: "ml-auto", defaultLocation: defaultLocation, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-[1px] ${BORDER_COLORS[bgColor]}` }), jsx(HeaderSubMenu, { context: context, subItems: activeTopItem?.items, bgColor: bgColor })] }) }));
   });
 
   const MobileAppTile = JSX(({ className = '', context, title = 'Мобильное приложение', qr, buttons = [], anchor = null, }) => {
@@ -1605,28 +1719,69 @@
   });
 
   const TEXT_CLASSES = 'font-sans font-normal text-sm';
-  const LINK_CLASSES = 'flex-1 flex items-center justify-center';
-  const NavigatorTabItem = JSX(({ className = '', label, active, children, onClick, anchor }) => (jsx("a", { className: getLinkClasses(className, active), href: `#${anchor}`, onClick: onClick, children: jsx("span", { className: getTextClasses(active), children: label || children }) })));
+  const LINK_CLASSES = 'flex-1 flex items-center justify-center cursor-pointer';
+  const NavigatorTabItem = JSX(({ className = '', label, active, children, onClick, href, target = '_self' }) => (jsx("a", { className: getLinkClasses(className, active), target: target, href: href, onClick: onClick, children: jsx("span", { className: getTextClasses(active), children: label || children }) })));
   const getLinkClasses = (className, active) => {
-      const classes = active ? 'bg-primary-main' : 'bg-white';
+      const classes = active ? 'bg-primary-main' : 'group bg-white';
       return `${classes} ${LINK_CLASSES} ${className}`;
   };
   const getTextClasses = (active) => {
-      const classes = active ? 'text-white' : 'text-secondary-text hover:text-primary-main';
+      const classes = active ? 'text-white' : 'text-secondary-text group-hover:text-primary-main ';
       return `${classes} ${TEXT_CLASSES}`;
   };
 
   const NavigatorTabs = JSX(({ className = '', navigatorTabs, context, anchor = null }) => {
       const router = context.useRouter();
-      const hash = getHash(router.href);
-      return (jsx("section", { className: `sticky top-0 z-20 box-border flex gap-x-1 h-12 ${className}`, id: anchor, children: navigatorTabs ? navigatorTabs.map(renderTab(hash, router)) : null }));
+      const href = globalThis.location.href;
+      return (jsx("section", { className: `sticky top-0 z-20 box-border flex gap-x-1 h-12 ${className}`, id: anchor, children: navigatorTabs ? navigatorTabs.map(renderTab(href, router)) : null }));
   });
-  const renderTab = (hash, router) => (tab, i) => {
-      const anchorHash = `#${tab.anchor}`;
-      const active = hash ? anchorHash === hash : i === 0;
-      return (jsx(NavigatorTabItem, { active: active, onClick: () => router?.replace(anchorHash), ...tab }, tab.anchor));
+  const renderTab = (href, router) => (tab, i) => {
+      const hash = getHash(href);
+      const active = hash ? tab.href === hash : i === 0;
+      return (jsx(NavigatorTabItem, { active: active, onClick: () => handleRoute(router, tab.href), ...tab }, tab.href));
+  };
+  const handleRoute = (router, href) => {
+      if (isURL(href))
+          return; // if href if full URL - move to HTML href action, do not touch router
+      router?.replace(href || '');
   };
 
+  const useActiveHandler = ({ context, blocks, initialState = false }) => {
+      const [isActive, setIsActive] = context.useState(initialState);
+      const hasContent = blocks?.length;
+      const icon = isActive ? 'ArrowUpIcon' : 'ArrowDownIcon';
+      const getContentBlock = ({ currentTarget }) => currentTarget.previousSibling;
+      const handleToggle = (e) => {
+          if (!hasContent) {
+              return;
+          }
+          setIsActive(!isActive);
+          const contentBlock = getContentBlock(e);
+          contentBlock.style.maxHeight = contentBlock.style.maxHeight
+              ? null
+              : `${contentBlock.scrollHeight}px`;
+      };
+      return { isActive, hasContent, icon, handleToggle };
+  };
+
+  const OtherProductsItemInner = JSX(({ blocks, columns = 1, context }) => {
+      const className = 'box-border p-5';
+      return (jsx("div", { className: "transition-all duration-300 max-h-0 overflow-hidden", children: jsx("div", { className: `box-border w-full p-9 ${columns > 1 ? 'flex flex-wrap' : ''}`, children: renderBlocksList({ context, className, columns, blocks }) }) }));
+  });
+
+  const OtherProductsItem = JSX(({ label, isExpanded, blocks, columns, context }) => {
+      const { hasContent, icon, handleToggle, isActive } = useActiveHandler({
+          context,
+          blocks,
+          initialState: isExpanded,
+      });
+      return (jsxs("div", { className: "border-0 border-b border-solid border-main-divider", children: [hasContent ? (jsx(OtherProductsItemInner, { isExpanded: isActive, columns: columns, blocks: blocks, context: context })) : null, jsxs("button", { className: "border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer", onClick: handleToggle, children: [jsx("span", { className: "pr-3", children: isActive ? 'Скрыть' : label }), hasContent ? jsx(Icon, { name: icon, width: "20", height: "20", asSVG: true }) : null] })] }));
+  });
+
+  const OtherProducts = JSX(({ blockItems, context, className }) => {
+      return (jsx("section", { className: `font-sans bg-white text-primary-text ${className || ''}`, children: blockItems?.length ? (jsx("div", { className: "list-none m-0 p-0", children: blockItems.map((item, i) => (jsx(OtherProductsItem, { ...item, context: context }, `BlockItem${i}`))) })) : null }));
+  });
+
   const GOLDEN_RATIO = 1.618;
   const Placeholder = JSX(({ className, context, title, description = 'Блок в разработке...', anchor = null }) => {
       return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, children: [description ? (jsx(Description, { className: "mt-4 max-w-[600px]", description: description })) : null, jsx("figure", { className: "m-0 min-w-[600px]", children: renderShimmer() })] }) }));
@@ -1732,44 +1887,8 @@
       return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
   }
 
-  const useActiveHandler = ({ context, blocks, initialState = false }) => {
-      const [isActive, setIsActive] = context.useState(initialState);
-      const hasContent = blocks?.length;
-      const icon = isActive ? 'ArrowUpIcon' : 'ArrowDownIcon';
-      const getContentBlock = ({ currentTarget }) => currentTarget.previousSibling;
-      const handleToggle = (e) => {
-          if (!hasContent) {
-              return;
-          }
-          setIsActive(!isActive);
-          const contentBlock = getContentBlock(e);
-          contentBlock.style.maxHeight = contentBlock.style.maxHeight
-              ? null
-              : `${contentBlock.scrollHeight}px`;
-      };
-      return { isActive, hasContent, icon, handleToggle };
-  };
-
-  const OtherProductsItemInner = JSX(({ blocks, columns = 1, context }) => {
-      const className = 'box-border p-5';
-      return (jsx("div", { className: "transition-all duration-300 max-h-0 overflow-hidden", children: jsx("div", { className: `box-border w-full p-9 ${columns > 1 ? 'flex flex-wrap' : ''}`, children: renderBlocksList({ context, className, columns, blocks }) }) }));
-  });
-
-  const OtherProductsItem = JSX(({ label, isExpanded, blocks, columns, context }) => {
-      const { hasContent, icon, handleToggle, isActive } = useActiveHandler({
-          context,
-          blocks,
-          initialState: isExpanded,
-      });
-      return (jsxs("div", { className: "border-0 border-b border-solid border-main-divider", children: [hasContent ? (jsx(OtherProductsItemInner, { isExpanded: isActive, columns: columns, blocks: blocks, context: context })) : null, jsxs("button", { className: "border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer", onClick: handleToggle, children: [jsx("span", { className: "pr-3", children: isActive ? 'Скрыть' : label }), hasContent ? jsx(Icon, { name: icon, width: "20", height: "20", asSVG: true }) : null] })] }));
-  });
-
-  const OtherProducts = JSX(({ blockItems, context, className }) => {
-      return (jsx("section", { className: `font-sans bg-white text-primary-text ${className || ''}`, children: blockItems?.length ? (jsx("div", { className: "list-none m-0 p-0", children: blockItems.map((item, i) => (jsx(OtherProductsItem, { ...item, context: context }, `BlockItem${i}`))) })) : null }));
-  });
-
   const RecommendationCard = JSX(({ context, className = '', title, description, items, image, version, socialMedia }) => {
-      return (jsx("section", { className: `border border-solid box-border py-[30px] px-9 min-w-[515px] max-w-[515px] ${className}`, role: "listitem", children: jsxs(BaseTile, { context: context, className: "flex justify-between", title: title ? (jsx("h4", { className: `font-sans text-title-xs font-normal m-0 mb-3.5`, children: title })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? jsx(Description, { className: "text-left", description: description }) : null, items?.length ? (jsx(List, { className: "text-md font-light flex flex-col gap-2", items: items, version: version })) : null, jsx(SocialMedia, { className: "pt-[42px] pb-0", media: socialMedia, context: context })] }) }));
+      return (jsx("section", { className: `border border-solid box-border py-[30px] px-9 min-w-[515px] max-w-[515px] ${className}`, role: "listitem", children: jsxs(BaseTile, { context: context, className: "flex justify-between", title: title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "font-normal mb-3.5", title: title })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? jsx(Description, { className: "text-left", description: description }) : null, items?.length ? (jsx(List, { className: "text-md font-light flex flex-col gap-2", items: items, version: version })) : null, jsx(SocialMedia, { className: "pt-[42px] pb-0", media: socialMedia, context: context })] }) }));
   });
 
   const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
@@ -1799,20 +1918,20 @@
       return (jsxs("div", { children: [showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 rotate-180 z-10 mt-6", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E" })), showNextButton && (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-6", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E" }))] }));
   };
 
-  const StepsBlock = JSX(({ className = '', title, showLines = true, steps = [], anchor = null }) => {
+  const StepsBlock = JSX(({ className = '', title, showLines = true, steps = [], button, anchor = null }) => {
       const shortGaps = steps.length > 3;
       return (jsxs("section", { className: [
               'box-border font-sans text-primary-text bg-white',
               shortGaps ? 'px-20' : 'px-[70px]',
               'py-[50px] flex flex-col items-center',
               className,
-          ].join(' '), id: anchor, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center", title: title }), steps?.length ? (jsxs("div", { className: `box-border py-0.5 mb-0.5 ${title ? 'mt-9' : ''}`, children: [jsx("div", { className: "flex items-center px-[88px]", children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}` }))(steps.map(renderStepIcon)) }), jsx("div", { className: `flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepTitle) })] })) : null] }));
+          ].join(' '), id: anchor, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center", title: title }), steps?.length ? (jsxs("div", { className: `box-border py-0.5 mb-0.5 ${title ? 'mt-9' : ''}`, children: [jsx("div", { className: "flex items-center px-[88px]", children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}` }))(steps.map(renderStepIcon)) }), jsx("div", { className: `flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map((step, i) => renderStepTitle(step, i, Boolean(button?.text))) })] })) : null, button?.text ? (jsx(Button, { className: "box-border mt-[43px] py-3 h-12 w-full max-w-[240px]", version: "primary", href: "#", children: button.text })) : null] }));
   });
   const renderStepIcon = (step, i) => {
-      return (jsx("div", { className: "flex flex-col items-center text-center relative", children: jsx("div", { className: "h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10", children: (step.icon?.icon && jsx(Img, { image: step.icon, width: "48", height: "48" })) || (jsx("span", { className: "font-medium text-title-sm text-secondary-text", children: i + 1 })) }) }, String(i)));
+      return (jsx("div", { className: "flex flex-col items-center text-center relative", children: jsx("div", { className: "h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10", children: (step.icon?.icon && jsx(Img, { image: step.icon, width: "48", height: "48" })) || (jsx("span", { className: "font-normal text-title-sm text-secondary-text", children: i + 1 })) }) }, String(i)));
   };
-  const renderStepTitle = (step, i) => {
-      return (jsxs("div", { className: "flex flex-col items-center text-center relative w-[276px] whitespace-pre-line overflow-hidden", children: [step.label && jsx("div", { className: "font-medium text-xl m-0 mt-4", children: step.label }), step.description && (jsx("div", { className: `font-normal text-sm text-secondary-text ${step.label ? 'mt-2' : 'mt-4'}`, children: step.description }))] }, String(i)));
+  const renderStepTitle = (step, i, isMainButton) => {
+      return (jsxs("div", { className: "flex flex-col items-center justify-between text-center relative w-[276px] whitespace-pre-line overflow-hidden", children: [jsxs("div", { children: [step.label && jsx("div", { className: "font-normal text-xl m-0 mt-4", children: step.label }), step.description && (jsx("div", { className: `font-light text-base text-secondary-text ${step.label ? 'mt-2' : 'mt-4'}`, children: step.description }))] }), step?.button?.text && !isMainButton ? (jsx(Button, { className: "box-border mt-[38px] py-3 h-12 w-full max-w-[240px]", version: "primary", href: "#", children: step.button.text })) : null] }, String(i)));
   };
 
   const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
@@ -1820,13 +1939,15 @@
   const COLS_LENGTH_FOR_SCROLL = 2;
   const COLUMN_WIDTH = 4 * 80 + 40; // w-80 + pl-10 = 360px
 
+  const getButtonAriaLabel = (icon) => icon?.alt || icon?.title || IconTitleMap[icon?.icon ? icon.icon : ''];
+
   const TariffsTableCell = JSX(({ cell, isLastRow }) => {
       const cellWrapperClasses = `first:pl-0 pl-10 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0 ${isLastRow ? 'border-t-0 rounded-b-md' : ''}`;
       return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { children: cell.map(renderCellInner) }) }));
   });
   const renderCellInner = ({ label, description, list, image, buttons }, i) => (jsxs("div", { className: "first:pt-5 last:pb-5", children: [i > 0 && (jsx("div", { className: "border-main-divider border border-solid border-t-0 border-x-0 my-4" })), label ? jsx("div", { className: "text-xl font-medium m-0", children: label }) : null, description ? jsx("div", { className: "text-sm text-secondary-text", children: description }) : null, list?.items?.length ? renderList(list) : null, image && jsx(Img, { image: image }), buttons?.length ? renderButtons(buttons) : null] }, String(i)));
   const renderList = (list) => (jsx(List, { className: "flex flex-col justify-between items-start text-sm", version: "gray", items: list.items, isDotted: list.isDotted ?? true }));
-  const renderButtons = (buttons) => (jsx("div", { children: buttons.map(({ icon, rounded, ...buttonProps }, idx) => (jsx(Button, { className: `${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`, rounded: rounded, appendLeft: icon ? jsx(Img, { image: icon, width: "24px", height: "24px", asSVG: true }) : null, ...buttonProps }, String(idx)))) }));
+  const renderButtons = (buttons) => (jsx("div", { children: buttons.map(({ icon, rounded, ...buttonProps }, idx) => (jsx(Button, { className: `${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`, ariaLabel: getButtonAriaLabel(icon), rounded: rounded, appendLeft: icon ? jsx(Img, { image: icon, width: "24px", height: "24px", asSVG: true }) : null, ...buttonProps }, String(idx)))) }));
 
   const TariffsTableRow = JSX(({ row: { header, data }, activeCardIndex, isLastRow }) => {
       return (jsxs(TableRowContainer, { children: [jsx("div", { className: `text-sm py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${!isLastRow ? 'border-solid' : ''}`, children: jsxs("div", { className: "flex items-center text-primary-text", children: [header?.icon ? (jsx(Img, { className: "mr-[14px] max-w-6 max-h-6", image: header.icon, width: "24px", height: "24px", asSVG: true })) : null, header?.title] }) }), data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH, version: "tariff", children: data.map((cell, i) => (jsx(TariffsTableCell, { cell: cell, isLastRow: isLastRow }, String(i)))) })) : null] }));
@@ -1881,6 +2002,19 @@
       Placeholder,
   };
 
+  const changeHashOnScroll = (router, blocks) => {
+      blocks?.forEach((block) => {
+          const currentHash = globalThis.location.hash;
+          const anchorHash = `#${block?.id}`;
+          if (currentHash === anchorHash)
+              return;
+          const position = block?.getBoundingClientRect();
+          if (position && position.top > 0 && position.top < 150) {
+              router.replace(`#${block?.id}`);
+          }
+      });
+  };
+
   const LikeButton = JSX(({ className, onClick, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 w-[36px] bg-inherit cursor-pointer ${className || ''}`, onClick: onClick, "aria-label": ariaLabel, children: renderLikeIcon() })));
   const renderLikeIcon = () => {
       const params = {
@@ -1898,9 +2032,15 @@
   });
 
   const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
-  const ContentPage = JSX(({ className, context, blocksRegistry, data: { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' }, blockDecorator = defaultBlockDecorator, }) => {
+  const ContentPage = JSX(({ className = '', context, blocksRegistry, data: { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' }, blockDecorator = defaultBlockDecorator, }) => {
       const { header } = slots;
-      return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className || ''}`, "data-theme": colorPalette, children: [header?.blocks?.length ? (jsx("div", { className: `${style2className(header?.style)}`, children: header.blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, blocks?.length ? (jsx("div", { className: "container grid grid-cols-12 gap-1", children: blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, likeControl && (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto", context: context }) }))] }));
+      const router = context.useRouter();
+      // listener is for NavigatorTabs
+      globalThis.addEventListener('load', () => {
+          const sectionsWithAnchors = globalThis.document.querySelectorAll('section[id]');
+          globalThis.document.addEventListener('scroll', () => changeHashOnScroll(router, sectionsWithAnchors));
+      });
+      return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [header?.blocks?.length ? (jsx("div", { className: `${style2className(header?.style)}`, children: header.blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, blocks?.length ? (jsx("div", { className: "container grid grid-cols-12 gap-1", children: blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, likeControl && (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto", context: context }, "LikeControl") }))] }));
   });
   function renderBlock({ block, blockDecorator, blocksRegistry, context }, i) {
       const { type } = block;
@@ -1913,7 +2053,7 @@
           block,
           render: (props) => {
               const { version, content, anchor } = props.block;
-              return (jsx(BlockComponent, { className: props.blockClassName, version: version, context: context, anchor: anchor, ...content }));
+              return (jsx(BlockComponent, { className: props.blockClassName, version: version, context: context, anchor: anchor, ...content }, `${type}-${i}`));
           },
       }, `block-${i}`);
   }