@redneckz/wildless-cms-uni-blocks 0.3.32 → 0.3.35

package/bundle/bundle.umd.js

@@ -187,8 +187,8 @@
   }
 
   const HEADING_STYLE_MAP = {
-      h1: 'text-title-lg tracking-[-0.3px]',
-      h2: 'text-title',
+      h1: 'text-title-xl tracking-[-0.3px]',
+      h2: 'text-title-lg',
       h3: 'text-title-sm',
       h4: 'text-title-xs',
       h5: 'text-title-2xs tracking-[0.2px]',
@@ -203,6 +203,34 @@
       return (jsx(Tag, { className: `font-sans m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`, children: title }));
   });
 
+  const ALIGN_TEXT = {
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right',
+  };
+  const HEADLINE_BLOCK_STYLE_MAPS = {
+      transparent: {
+          background: 'bg-transparent',
+          text: 'text-primary-text',
+          description: 'text-primary-text',
+      },
+      primary: {
+          background: 'bg-white',
+          text: 'text-primary-text',
+          description: 'text-primary-text',
+      },
+      secondary: {
+          background: 'bg-primary-main',
+          text: 'text-white',
+          description: 'text-white/80',
+      },
+  };
+
+  const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description, anchor = null, }) => {
+      const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
+      return (jsxs("section", { className: `p-[50px] ${STYLE_MAPS.background} ${className}`, id: anchor, children: [title && (jsx(Heading, { headingType: "h2", className: `text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })), description && (jsx("p", { className: `font-normal text-base mt-4 ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, children: description }))] }));
+  });
+
   const projectSettings = new (class {
       _ = {
           PROD_BRANCH: 'master',
@@ -241,6 +269,7 @@
       IconMap["ActualBalanceIcon"] = "ActualBalanceIcon";
       IconMap["AppleIcon"] = "AppleIcon";
       IconMap["ArrowDownIcon"] = "ArrowDownIcon";
+      IconMap["ArrowLeftIcon"] = "ArrowLeftIcon";
       IconMap["ArrowsRewindRight"] = "ArrowsRewindRight";
       IconMap["ArrowUpIcon"] = "ArrowUpIcon";
       IconMap["AtmIcon"] = "AtmIcon";
@@ -318,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";
@@ -395,10 +425,10 @@
 
   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 Icon = JSX(({ className = '', name = '', alt = `Иконка ${IconTitleMap[name] || name}`, title = alt, asSVG, color = 'primary', ...imgProps }) => {
       const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
       if (asSVG) {
           return (jsxs("svg", { className: `${svgColorsMap[color]} ${className}`, ...imgProps, "aria-hidden": "true", style: color === 'secondary' ? { filter: 'invert(1)' } : null, children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }));
@@ -406,37 +436,41 @@
       return (jsx("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
   });
 
-  const ALIGN_TEXT = {
-      left: 'text-left',
-      center: 'text-center',
-      right: 'text-right',
-  };
-  const HEADLINE_BLOCK_STYLE_MAPS = {
-      transparent: {
-          background: 'bg-transparent',
-          text: 'text-primary-text',
-          description: 'text-primary-text',
-      },
-      primary: {
-          background: 'bg-white',
-          text: 'text-primary-text',
-          description: 'text-primary-text',
-      },
-      secondary: {
-          background: 'bg-primary-main',
-          text: 'text-white',
-          description: 'text-white/80',
-      },
-  };
-
-  const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description, anchor = null, }) => {
-      const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
-      return (jsxs("section", { className: `p-[50px] ${STYLE_MAPS.background} ${className}`, id: anchor, children: [title && (jsx(Heading, { headingType: "h2", className: `text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })), description && (jsx("p", { className: `font-normal text-base mt-4 ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, children: description }))] }));
+  const Img = JSX(({ className = '', image, imageClassName = '', ...iconProps }) => {
+      if (!image) {
+          return null;
+      }
+      // backwards compatibility with existing icons in usage
+      const icon = typeof image === 'string' ? image : image.icon;
+      if (icon || icon === '') {
+          return icon.length ? jsx(Icon, { className: className, name: icon, ...iconProps }) : null;
+      }
+      return (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image }));
+  });
+  const ImgAsPicture = JSX(({ className = '', image, imageClassName = '' }) => {
+      if (!image) {
+          return null;
+      }
+      return (jsxs("picture", { className: `flex-none ${className}`, children: [image?.sources?.length
+                  ? image.sources.map(({ src, format }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format) }, `${index}_${src}`)))
+                  : null, renderImg(image, imageClassName)] }));
   });
+  const renderImg = (image, imageClassName = '') => {
+      const style = {
+          width: image.size?.width ? `${image.size?.width}px` : '100%',
+          height: image.size?.height ? `${image.size?.height}px` : '100%',
+      };
+      const title = image.title || '';
+      const alt = image.alt || image.title;
+      return (jsx("img", { src: image.src, className: imageClassName, alt: alt, title: title, style: style, ...image.size }));
+  };
+  function formatToMimeType(format) {
+      return format ? `image/${String(format)}` : undefined;
+  }
 
   const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
       const { text, fileSize, ...linkProps } = doc;
-      return (jsxs("a", { className: className, role: "link", ...linkProps, children: [icon ? (jsx(Icon, { className: iconClassName, name: icon, width: "24px", height: "24px", asSVG: true })) : null, text ? (jsxs("span", { className: textClassName, children: [text, jsx("span", { className: suffixClassName, children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] }));
+      return (jsxs("a", { className: className, role: "link", ...linkProps, children: [icon ? (jsx(Img, { className: iconClassName, image: icon, width: "24px", height: "24px", asSVG: true })) : null, text ? (jsxs("span", { className: textClassName, children: [text, jsx("span", { className: suffixClassName, children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] }));
   });
   const formatSuffix = (ext, fileSize) => {
       const prefix = ext || fileSize ? ',' : '';
@@ -470,25 +504,10 @@
       double: 'flex gap-x-5 gap-y-[26px] flex-wrap',
       single: 'flex gap-3.5 flex-col',
   };
-  const LinkDocs = JSX(({ className = '', title, subtitle, align, documents, icon = 'DocIcon', columnsMode = 'double', anchor = null, }) => {
+  const LinkDocs = JSX(({ className = '', title, subtitle, align, documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', anchor = null, }) => {
       return (jsxs("section", { className: `font-sans text-primary-text p-12 bg-white ${className}`, id: anchor, children: [title ? (jsx(Heading, { headingType: "h2", className: `${subtitle ? 'mb-2.5' : titleMarginsStyleMap[columnsMode]} ${titleAlignStyleMap[align ?? 'center']}`, title: title })) : null, subtitle ? (jsx("h3", { className: `text-base mt-0 font-normal ${titleMarginsStyleMap[columnsMode]} ${titleAlignStyleMap[align ?? 'center']}`, children: subtitle })) : null, jsx(LinkDocsList, { className: linkColumnsModeStyleMap[columnsMode], columnsMode: columnsMode, documents: documents, icon: icon })] }));
   });
 
-  const Img = JSX(({ className = '', image: { size, ...image }, imageClassName = '' }) => {
-      const style = {
-          width: size?.width ? `${size?.width}px` : '100%',
-          height: size?.height ? `${size?.height}px` : '100%',
-      };
-      const title = image.title || '';
-      const alt = image.alt || title;
-      return (jsxs("picture", { className: `flex-none ${className}`, children: [image.sources?.length
-                  ? image.sources.map(({ src, format }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format) }, `${index}_${src}`)))
-                  : null, jsx("img", { className: imageClassName, src: image.src, alt: alt, title: title, style: style, ...size })] }));
-  });
-  function formatToMimeType(format) {
-      return format ? `image/${String(format)}` : undefined;
-  }
-
   const pictureTextStyleMap = {
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
@@ -497,7 +516,7 @@
       return (jsxs("section", { className: `relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`, id: anchor, children: [jsx(Heading, { headingType: "h2", className: "text-center", title: title }), jsxs("div", { className: 'flex justify-center mt-9', children: [image?.src && jsx(Img, { className: directionRight ? 'order-2 ml-6' : 'mr-6', image: image }), benefits?.length ? (jsx("div", { className: "flex flex-col", children: benefits.map((_, i) => renderBenefit$1(_, i, version)) })) : null] })] }));
   });
   function renderBenefit$1(benefit, i, version) {
-      return (jsxs("div", { className: "flex flex-row mb-8", children: [benefit.icon && (jsx(Icon, { className: "w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]", name: benefit.icon, width: "48", height: "48", asSVG: true })), jsxs("div", { className: "flex gap-1 flex-col h-full ml-5 max-w-[490px]", children: [benefit.label && (jsx("div", { className: `font-medium text-xl m-0 ${version === 'primary' ? 'text-primary-text' : ''}`, children: benefit.label })), benefit.description && (jsx("div", { className: `font-normal text-sm ${version === 'primary' ? 'text-secondary-text' : ''}`, children: benefit.description }))] })] }, String(i)));
+      return (jsxs("div", { className: "flex flex-row mb-8", children: [benefit.icon ? (jsx(Img, { className: "w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]", image: benefit.icon, width: "48", height: "48", asSVG: true })) : null, jsxs("div", { className: "flex gap-1 flex-col h-full ml-5 max-w-[490px]", children: [benefit.label && (jsx("div", { className: `font-medium text-xl m-0 ${version === 'primary' ? 'text-primary-text' : ''}`, children: benefit.label })), benefit.description && (jsx("div", { className: `font-normal text-sm ${version === 'primary' ? 'text-secondary-text' : ''}`, children: benefit.description }))] })] }, String(i)));
   }
 
   const isURL = (href) => href?.includes('//');
@@ -580,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-m-button 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-3.5'}`;
+      const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[18px]'}`;
       return [
           'flex items-center justify-center',
           isWithText(props) ? withTextStyle : 'h-12 w-12',
@@ -623,7 +642,7 @@
   function renderButton$2({ icon, ...button }, i) {
       if (!button?.text)
           return;
-      return icon ? (jsx(Button, { appendLeft: jsx(Icon, { name: icon, width: "24", height: "24", asSVG: true }), ...button }, String(i))) : (jsx(Button, { ...button }, String(i)));
+      return icon ? (jsx(Button, { appendLeft: jsx(Img, { image: icon, width: "24", height: "24", asSVG: true }), ...button }, String(i))) : (jsx(Button, { ...button }, String(i)));
   }
 
   const Description = JSX((props) => {
@@ -631,24 +650,40 @@
       return jsx("div", { className: `font-normal text-base ${className}`, children: description });
   });
 
-  const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3 mt-2';
+  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-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;
@@ -662,7 +697,7 @@
   });
 
   const benefitIconBgStyleMap = {
-      primary: 'bg-main',
+      primary: 'bg-primary-main',
       secondary: 'bg-white/30',
   };
   const benefitTitleStyleMap = {
@@ -674,19 +709,31 @@
       secondary: 'text-white',
   };
   function renderBenefit(benefit, i, version) {
-      return (jsxs("div", { className: "flex gap-4 items-center", children: [benefit.icon && (jsx(Icon, { className: `w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${benefitIconBgStyleMap[version]}`, name: benefit.icon, width: "24", height: "24", asSVG: true })), 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' : '';
-      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-4 max-w-[600px]", 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-m-base", items: items, itemClassName: "mb-[10px]", version: version, isDotted: isDotted })) : null] }) }), image?.src && jsx(Img, { className: "mt-auto", image: image })] }));
+      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), 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) => {
-      return (title && (jsx(Heading, { headingType: headingType, title: title, className: `whitespace-pre-wrap max-w-[600px] ${textColor}` })));
+  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]}`, 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',
@@ -697,10 +744,10 @@
       secondary: 'text-white/80',
   };
   const ProductBlock = JSX((props) => {
-      const { context, className, breadcrumbs, version = 'primary', anchor = null, ...otherProps } = props;
+      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] ${className || ''} ${productBlockStyleMap$1[version]}`, 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 = {
@@ -785,11 +832,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), 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 = {
@@ -852,7 +899,7 @@
       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] }));
   });
   function renderButton$1(button) {
-      return (jsx(Button, { className: "mt-6 w-full", appendLeft: button.icon && jsx(Icon, { name: button.icon, width: "24px", height: "24px", asSVG: true }), ...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 });
@@ -955,7 +1002,7 @@
       });
       return (jsxs("li", { className: "border-0 border-b border-solid border-main-divider last:border-b-0", children: [jsxs("button", { className: `border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans
             ${hasContent ? 'group cursor-pointer' : ''}
-          `, onClick: handleToggle, children: [jsx("span", { className: `text-xl pr-2.5 font-medium`, children: label }), hasContent ? jsx(Icon, { name: icon, width: "24", height: "24", asSVG: true }) : null] }), hasContent ? (jsx(AccordionItemInner, { isExpanded: isActive, blocks: blocks, context: context })) : null] }));
+          `, onClick: handleToggle, children: [jsx("span", { className: `text-xl pr-2.5 font-medium`, children: label }), hasContent ? jsx(Img, { image: icon, width: "24", height: "24", asSVG: true }) : null] }), hasContent ? (jsx(AccordionItemInner, { isExpanded: isActive, blocks: blocks, context: context })) : null] }));
   });
 
   const Accordion = JSX(({ title, description, accordionItems, context, className = '', anchor = null }) => {
@@ -966,7 +1013,7 @@
       return (jsxs("section", { className: `font-sans text-primary-text bg-white p-12 flex flex-col items-center ${className || ''}`, id: anchor, children: [title ? (jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefits?.length ? (jsx("div", { className: "grid grid-cols-2 gap-8 mt-9", children: benefits.map(renderStep) })) : null] }));
   });
   const renderStep = (benefit, i) => {
-      return (jsxs("div", { className: "flex items-center gap-5 max-w-[500px]", children: [benefit.icon && (jsx(Icon, { className: "h-[70px] w-[70px] min-w-[70px] min-h-[70px]", name: benefit.icon, width: "70", height: "70" })), jsxs("div", { children: [jsx("h3", { className: "font-medium text-xl m-0", children: benefit.label }), benefit.description && (jsx("div", { className: "font-normal text-sm mt-2", children: benefit.description }))] })] }, String(i)));
+      return (jsxs("div", { className: "flex items-center gap-5 max-w-[500px]", children: [benefit.icon ? (jsx(Img, { className: "h-[70px] w-[70px] min-w-[70px] min-h-[70px]", image: benefit.icon, width: "70", height: "70" })) : null, jsxs("div", { children: [jsx("h3", { className: "font-medium text-xl m-0", children: benefit.label }), benefit.description && (jsx("div", { className: "font-normal text-sm mt-2", children: benefit.description }))] })] }, String(i)));
   };
 
   const TableRowContainer = JSX(({ children }) => (jsx("div", { className: "self-start flex flex-col", role: "row", children: jsx("div", { className: "flex", children: children }) })));
@@ -984,7 +1031,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(Icon, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", name: 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", 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)))) })] }));
@@ -1058,7 +1105,7 @@
       const isActive = currentTabIndex === index;
       return (jsxs("div", { className: `flex h-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${isActive ? ACTIVE_TAB_STYLE : TAB_STYLE}`, role: "tab", onClick: () => onTabClick(index), "aria-selected": String(isActive), children: [tab?.icon ? renderIcon(tab, isActive) : null, jsxs("div", { children: [tab?.title ? jsx("h3", { className: "font-medium m-0 text-base", children: tab?.title }) : null, tab?.description ? (jsx("span", { className: `font-light text-xs ${isActive ? '' : 'text-secondary-text'}`, children: tab?.description })) : null] })] }, String(index)));
   };
-  const renderIcon = (tab, isActive) => (jsx("div", { className: "h-full mt-1", style: isActive ? { filter: 'invert(1)' } : null, children: jsx(Icon, { className: "w-5 h-5 mr-3", name: tab?.icon || 'CardIcon', asSVG: !isActive }) }));
+  const renderIcon = (tab, isActive) => (jsx("div", { className: "h-full mt-1", style: isActive ? { filter: 'invert(1)' } : null, children: jsx(Img, { className: "w-5 h-5 mr-3", image: tab?.icon || 'CardIcon', asSVG: !isActive }) }));
 
   function useCreditCalculatorData(useAsyncData, directoryName) {
       const { data } = useAsyncData(creditCalculatorUrl(directoryName), fetchCreditCalculatorData);
@@ -1237,19 +1284,19 @@
           title: 'Кредит',
           description: 'Ставка от 6% до 7 лет',
           directoryName: 'credit-calculator-data',
-          icon: 'CardIcon',
+          icon: { icon: 'CardIcon' },
       },
       {
           title: 'Кредит',
           description: 'Ставка от 4% до 7 лет',
           directoryName: 'credit-calculator-data1',
-          icon: 'ChartSquareIcon',
+          icon: { icon: 'ChartSquareIcon' },
       },
       {
           title: 'Кредит',
           description: 'Ставка от 3% до 6 лет',
           directoryName: 'credit-calculator-data2',
-          icon: 'DiscountShapeIcon',
+          icon: { icon: 'DiscountShapeIcon' },
       },
   ];
 
@@ -1286,10 +1333,10 @@
   });
   const renderCurrencyRow = (exchangeCurrencyItem) => {
       const code = exchangeCurrencyItem?.currency?.currency;
-      return (jsxs("tr", { className: "pb-1", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(Icon, { name: CURRENCY_ICONS_MAP[code], width: "24", height: "24" }) : null, jsx("span", { className: "text-m-title-md ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.buyExchangeRate) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.saleExchangeRate) })] }, code));
+      return (jsxs("tr", { className: "pb-1", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[code] }, width: "24", height: "24" }) : null, jsx("span", { className: "text-m-title-md ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.buyExchangeRate) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.saleExchangeRate) })] }, code));
   };
 
-  const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex text-sm ${className}`, children: [jsx(Icon, { className: "min-w-fit", name: "GpsIcon", width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3 font-light", children: [address ? jsx("p", { className: "m-0 mb-[3px]", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
+  const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex text-sm ${className}`, children: [jsx(Img, { className: "min-w-fit", image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3 font-light", children: [address ? jsx("p", { className: "m-0 mb-[3px]", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
 
   const Input = JSX(({ className = '', id, name, type = 'text', placeholder }) => {
       return (jsx("input", { className: className, id: id, name: name || id, type: type, placeholder: placeholder }));
@@ -1352,21 +1399,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(Icon, { name: "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',
@@ -1374,14 +1421,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 });
       }
@@ -1393,7 +1440,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(_)) || _);
@@ -1412,59 +1459,84 @@
       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 = [
       {
           origins: ['t.me', 'telegram.org'],
-          icon: 'TelegramIcon',
+          icon: { icon: 'TelegramIcon' },
           label: 'Телеграм',
           width: '20px',
           height: '16px',
       },
-      { origins: ['vk.com'], icon: 'VKIcon', label: 'ВКонтакте', width: '24px', height: '12px' },
-      { origins: ['ok.ru'], icon: 'OkIcon', label: 'Одноклассники', width: '12px', height: '20px' },
+      {
+          origins: ['vk.com'],
+          icon: { icon: 'VKIcon' },
+          label: 'ВКонтакте',
+          width: '24px',
+          height: '12px',
+      },
+      {
+          origins: ['ok.ru'],
+          icon: { icon: 'OkIcon' },
+          label: 'Одноклассники',
+          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(Icon, { name: icon, width: width, height: height, asSVG: true, className: "block", color: "none" })) }));
+      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 justify-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)));
@@ -1472,40 +1544,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) {
@@ -1513,14 +1558,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 })));
@@ -1529,34 +1574,115 @@
       '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(Icon, { name: "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(Icon, { name: "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(Icon, { name: 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, children: Array(3).fill(jsx("div", { className: "w-[3px] h-[3px] rounded bg-black mr-1" })) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`, 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 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 })] }) }));
+      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, }) => {
@@ -1607,11 +1733,20 @@
   const renderShimmerItem = (width = 100, index) => (jsx("div", { style: { width: `${width}%` }, className: "h-4 mt-2 bg-secondary-light" }, String(index)));
   const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
 
+  const productGalleryStyleMap = {
+      primary: 'bg-white text-primary-text',
+      secondary: 'bg-primary-main text-white',
+  };
+  const ProductGalleryBlock = JSX(({ block, headingType, context, className = '' }) => {
+      const version = block?.version ?? 'primary';
+      return (jsx("section", { className: `flex grow-0 shrink-0 basis-full ${productGalleryStyleMap[version]} ${className}`, role: "listitem", children: jsx("div", { className: "p-10 flex grow", children: jsx(ProductBlockInner, { className: "pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem]", context: context, headingType: headingType || 'h2', ...block }) }) }));
+  });
+
   const ProductGallery = JSX(({ className, context, duration = 0, slides = [], anchor = null }) => {
       const galleryNav = slides.map((s) => s.nav);
       const galleryBlocks = slides.map((s) => s.productBlock);
       const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
-      return (jsxs("section", { className: `font-sans bg-white overflow-hidden w-100 ${className || ''}`, id: anchor, children: [jsx("div", { className: `flex duration-1000`, style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock$1(_, i, context)) }), jsx("div", { className: "flex", children: galleryNav.map((slide, i) => renderNavButton$1({
+      return (jsxs("section", { className: `font-sans bg-white overflow-hidden w-100 ${className || ''}`, id: anchor, children: [jsx("div", { className: `flex duration-1000`, style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => (jsx(ProductGalleryBlock, { context: context, block: _ }, String(i)))) }), jsx("div", { className: "flex", children: galleryNav.map((slide, i) => renderNavButton$1({
                       slide,
                       i,
                       activeSlideIndex,
@@ -1619,9 +1754,6 @@
                       duration,
                   })) })] }));
   });
-  function renderProductBlock$1(block, i, context) {
-      return (jsx("section", { className: "flex grow-0 shrink-0 basis-full", role: "listitem", children: jsx("div", { className: "p-10 flex grow", children: jsx(ProductBlockInner, { className: "pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem]", context: context, ...block }) }) }, String(i)));
-  }
   function renderNavButton$1({ slide, i, activeSlideIndex, onClick, duration }) {
       const isActiveBtn = i === activeSlideIndex;
       const progressBarClassName = isActiveBtn ? 'animate-slide' : '';
@@ -1634,8 +1766,8 @@
       secondary: 'bg-primary-main text-white',
   };
   const productBlockStyleMap = {
-      primary: 'text-secondary-text',
-      secondary: 'text-white/80',
+      primary: { title: 'text-secondary-text', text: 'text-secondary-text' },
+      secondary: { title: 'text-white', text: 'text-white/80' },
   };
   const productSlideStyleMap = {
       primary: 'bg-white text-primary-text',
@@ -1645,8 +1777,8 @@
       const galleryNav = slides.map((s) => s.nav);
       const galleryBlocks = slides.map((s) => s.productBlock);
       const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
-      return (jsxs("section", { id: anchor, className: `box-border pt-[70px] overflow-hidden relative font-sans w-100 ${className}
-        ${productGalleryGreenStyleMap[version]}`, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-9 box-border", children: galleryNav.map((slide, i) => renderNavButton({
+      return (jsxs("section", { id: anchor, className: `box-border pt-[50px] overflow-hidden relative font-sans w-100 ${className}
+        ${productGalleryGreenStyleMap[version]}`, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border", children: galleryNav.map((slide, i) => renderNavButton({
                       slide,
                       i,
                       activeSlideIndex,
@@ -1657,17 +1789,21 @@
   });
   function renderProductBlock(block, i, context) {
       const { version } = block;
-      const additionalClass = version ? productBlockStyleMap[version] : '';
-      return (jsx("section", { className: "box-border relative flex grow-0 shrink-0 basis-full px-9", role: "listitem", children: jsxs("div", { className: "flex grow", children: [block.backgroundText ? (jsx("div", { className: "absolute text-[454px] font-bold text-white tracking-[-10px] leading-[299px] opacity-[.1] right-12 top-20 z-0", children: block.backgroundText })) : null, jsx(ProductBlockInner, { className: `pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem] z-[1] ${additionalClass}`, context: context, textBlockClassName: "mb-[154px]", ...block }), jsx(Icon, { className: "absolute right-[460px] top-[200px] z-0 mb-4", name: "ArrowsRewindRight", width: "230", height: "187" })] }) }, String(i)));
+      const additionalClass = version ? productBlockStyleMap[version].title : '';
+      return (jsx("section", { className: "box-border relative flex grow-0 shrink-0 basis-full", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { className: `pl-[50px] pr-2 z-[1] ${additionalClass}`, context: context, textBlockClassName: "mb-[154px]", ...block }) }) }, String(i)));
   }
   function renderNavButton({ slide, i, activeSlideIndex, onClick, version, duration }) {
       const isActiveBtn = i === activeSlideIndex;
       const btnClassName = isActiveBtn
           ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] max-w-[354px] p-0 border-none'
-          : `min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300 
+          : `min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300
       ${productSlideStyleMap[version]}`;
-      const btnTitleClassName = isActiveBtn ? 'text-primary-text' : productBlockStyleMap[version];
-      const btnDescClassName = isActiveBtn ? 'text-secondary-text' : productBlockStyleMap[version];
+      const btnTitleClassName = isActiveBtn
+          ? 'text-primary-text text-title-2xs'
+          : `text-base ${productBlockStyleMap[version].title}`;
+      const btnDescClassName = isActiveBtn
+          ? 'text-secondary-text text-m-title-xs mt-2.5'
+          : `text-m-md mt-1.5 ${productBlockStyleMap[version].text}`;
       const additionalBorder = version === 'secondary' ? 'border-white/50' : '';
       const progressBarClassName = isActiveBtn ? 'animate-slide' : '';
       return (jsxs("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `box-border font-sans group relative overflow-hidden border-[1px] cursor-pointer text-left mx-1 grow basis-0 backdrop-blur-sm
@@ -1728,8 +1864,8 @@
       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 }) => {
-      return (jsx("section", { className: `border border-solid box-border rounded-md p-7 min-w-[515px] max-w-[515px] ${className}`, role: "listitem", children: jsxs(BaseTile, { context: context, title: title && jsx(Heading, { headingType: "h4", title: title, className: "mb-4" }), image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? jsx(Description, { description: description }) : null, items?.length ? jsx(List, { className: "text-m-base", items: items, version: version }) : 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 })] }) }));
   });
 
   const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
@@ -1738,8 +1874,8 @@
   const Recommendation = JSX(({ context, recommendations = [], className = '', title, version, anchor = null }) => {
       const [activeCardIndex, setActiveCardIndex] = context.useState(0);
       const blockClassName = version === 'secondary' ? 'bg-primary-main text-white' : 'bg-white text-primary-text';
-      const cardClassName = version === 'secondary' ? 'border-main-divider' : 'border-main-stroke';
-      return (jsxs("section", { className: `relative font-sans p-[50px] overflow-hidden ${blockClassName} ${className}`, id: anchor, children: [title ? jsx(Heading, { headingType: "h2", className: "mb-8", title: title }) : null, jsx("div", { className: "flex duration-1000 gap-4", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }, role: "list", children: recommendations?.length
+      const cardClassName = version === 'secondary' ? 'border-white/50' : 'border-main-stroke';
+      return (jsxs("section", { className: `relative font-sans p-9 overflow-hidden text-center ${blockClassName} ${className}`, id: anchor, children: [title ? jsx(Heading, { headingType: "h2", className: "mb-6", title: title }) : null, jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }, role: "list", children: recommendations?.length
                       ? recommendations.map(renderRecommendationCard({ context, version, className: cardClassName }))
                       : null }), renderNavButtons({
                   cardsCount: recommendations.length,
@@ -1769,7 +1905,7 @@
           ].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] }));
   });
   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 && jsx(Icon, { name: 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-medium 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)));
@@ -1786,10 +1922,10 @@
   });
   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(Icon, { name: icon, width: "24px", height: "24px", asSVG: true }), ...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`, 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(Icon, { className: "mr-[14px] max-w-6 max-h-6", name: header.icon, width: "24px", height: "24px", asSVG: true })), 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] }));
+      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] }));
   });
 
   const TariffsTable = JSX(({ className, context, title, description, rowHeaders, columns, anchor = null }) => {