@redneckz/wildless-cms-uni-blocks 0.3.34 → 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]',
@@ -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`;
@@ -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',
@@ -648,24 +650,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 +697,7 @@
   });
 
   const benefitIconBgStyleMap = {
-      primary: 'bg-main',
+      primary: 'bg-primary-main',
       secondary: 'bg-white/30',
   };
   const benefitTitleStyleMap = {
@@ -691,20 +709,31 @@
       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]}`, 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',
@@ -718,7 +747,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 +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 = {
@@ -1370,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(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 +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 });
       }
@@ -1411,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(_)) || _);
@@ -1430,20 +1459,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 +1496,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 +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) {
@@ -1543,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 })));
@@ -1559,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(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, 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, }) => {