@redneckz/wildless-cms-uni-blocks 0.3.28 → 0.3.31

package/bundle/bundle.umd.js

@@ -429,9 +429,9 @@
       },
   };
 
-  const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description }) => {
+  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}`, 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 }))] }));
+      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 LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
@@ -470,8 +470,8 @@
       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', }) => {
-      return (jsxs("section", { className: `font-sans text-primary-text p-12 bg-white ${className}`, 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 LinkDocs = JSX(({ className = '', title, subtitle, align, documents, 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 = '' }) => {
@@ -489,8 +489,8 @@
       return format ? `image/${String(format)}` : undefined;
   }
 
-  const PictureText = JSX(({ className = '', title, image, benefits }) => {
-      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-14 ${className}`, children: [jsx(Heading, { headingType: "h2", className: "text-center", title: title }), jsxs("div", { className: 'flex justify-center mt-9', children: [image?.src && jsx(Img, { className: "mr-6", image: image }), benefits?.length ? (jsx("div", { className: "flex flex-col", children: benefits.map(renderBenefit$1) })) : null] })] }));
+  const PictureText = JSX(({ className = '', title, image, benefits, anchor = null }) => {
+      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-14 ${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: "mr-6", image: image }), benefits?.length ? (jsx("div", { className: "flex flex-col", children: benefits.map(renderBenefit$1) })) : null] })] }));
   });
   function renderBenefit$1(benefit, i) {
       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-primary-text text-xl m-0", children: benefit.label })), benefit.description && (jsx("div", { className: "font-normal text-sm text-secondary-text", children: benefit.description }))] })] }, String(i)));
@@ -508,12 +508,20 @@
       const endOfOrigin = url.indexOf('/', endOfProto + protoSeparator.length);
       return endOfOrigin !== -1 ? url.substring(0, endOfOrigin) : url;
   };
+  const getHash = (href) => {
+      if (!href || !isURL(href)) {
+          return undefined;
+      }
+      const hashIndex = href.indexOf('#');
+      return hashIndex !== -1 ? href.substring(hashIndex, href.length) : undefined;
+  };
 
   var url = /*#__PURE__*/Object.freeze({
     __proto__: null,
     isURL: isURL,
     withoutQuery: withoutQuery,
-    getOrigin: getOrigin
+    getOrigin: getOrigin,
+    getHash: getHash
   });
 
   const MOBILE_URL_PATH = '/mobile';
@@ -584,7 +592,7 @@
   };
   const isWithText = ({ text, aboveText, appendLeft }) => Boolean(text || aboveText || !appendLeft);
 
-  const buttonStyleMap$1 = {
+  const buttonStyleMap = {
       primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
       secondary: 'text-primary-main bg-secondary-light hover:bg-secondary-hover active:bg-secondary-active',
       link: '',
@@ -600,7 +608,7 @@
       const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, rounded: rounded }));
       return disabled ? (jsx(DisabledButton, { ...props, children: buttonInner })) : (jsx(RegularButton, { ...props, children: buttonInner }));
   });
-  const RegularButton = JSX(({ className, ariaLabel, version = 'none', rounded, href, target, children, onClick, ...rest }) => (jsx("a", { className: `${buttonStyle} inline-block cursor-pointer no-underline ${buttonStyleMap$1[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: href ? 'link' : 'button', ...rest, children: children })));
+  const RegularButton = JSX(({ className, ariaLabel, version = 'none', rounded, href, target, children, onClick, ...rest }) => (jsx("a", { className: `${buttonStyle} inline-block cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: href ? 'link' : 'button', ...rest, children: children })));
   const DisabledButton = JSX(({ className, children, ariaLabel, version = 'none', rounded }) => (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: "-1", className: `inline-block ${buttonStyle} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: children })));
 
   const ButtonSection = JSX(({ context, className = '', buttons }) => {
@@ -645,8 +653,8 @@
               : null }));
   });
 
-  const BaseTile = JSX(({ className = '', title, children, buttons, image }) => {
-      return (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { children: children }), buttons ? jsx("div", { children: buttons }) : null] }), image] })] }));
+  const BaseTile = JSX(({ className = '', title, children, buttons, image, anchor = null }) => {
+      return (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, id: anchor, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { children: children }), buttons ? jsx("div", { children: buttons }) : null] }), image] })] }));
   });
 
   const benefitIconBgStyleMap = {
@@ -667,7 +675,7 @@
 
   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", 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, 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 getTitle = (title, headingType, textColor) => {
       return (title && (jsx(Heading, { headingType: headingType, title: title, className: `whitespace-pre-wrap max-w-[600px] ${textColor}` })));
@@ -685,10 +693,10 @@
       secondary: 'text-white/80',
   };
   const ProductBlock = JSX((props) => {
-      const { context, version = 'primary', breadcrumbs, className, ...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[version]}`, 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] ${className || ''} ${productBlockStyleMap[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 })] }));
   });
 
   const textBlockStyleMaps = {
@@ -711,9 +719,9 @@
           description: 'text-secondary-text',
       },
   };
-  const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className }) => {
+  const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className, anchor = null, }) => {
       const textBlockStyleMap = textBlockStyleMaps[blockVersion];
-      return (jsxs("section", { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, children: [iconVersion === 'small' ? renderIcon$1(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title && (jsx("div", { className: `font-medium text-base mb-1 ${textBlockStyleMap.title}`, children: title })), description && (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description }))] })] }));
+      return (jsxs("section", { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, id: anchor, children: [iconVersion === 'small' ? renderIcon$1(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title && (jsx("div", { className: `font-medium text-base mb-1 ${textBlockStyleMap.title}`, children: title })), description && (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description }))] })] }));
   });
   function renderIcon$1(className) {
       return (jsx("div", { className: "pt-1.5 pl-1 pr-4", children: jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs ${className}`, children: "i" }) }));
@@ -772,8 +780,8 @@
       secondary: 'bg-primary-main text-white',
   };
   const Tile = JSX((props) => {
-      const { context, title, description, items, children, buttons, image, className = '', version = 'primary', role, } = props;
-      return (jsx("section", { className: `overflow-hidden font-sans p-9 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, role: role, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
+      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)] }) }));
   });
   function renderList$1(items, version) {
@@ -784,8 +792,8 @@
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
   };
-  const ProductTile = JSX(({ context, className = '', title, description, benefits, buttons, image, version = 'primary', }) => {
-      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px]` })), 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 }), jsxs("div", { className: "flex mt-5 mb-1", children: [benefits?.length ? (jsx("div", { className: "mr-8", children: benefits.map(renderBenefitLabel) })) : null, benefits?.length ? (jsx("div", { className: "pt-1", children: benefits.map((_, i) => renderBenefitDescription(_, i, version)) })) : null] })] }) }));
+  const ProductTile = JSX(({ context, className = '', title, description, benefits, buttons, image, version = 'primary', anchor = null, }) => {
+      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px]` })), 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 }), jsxs("div", { className: "flex mt-5 mb-1", children: [benefits?.length ? (jsx("div", { className: "mr-8", children: benefits.map(renderBenefitLabel) })) : null, benefits?.length ? (jsx("div", { className: "pt-1", children: benefits.map((_, i) => renderBenefitDescription(_, i, version)) })) : null] })] }) }));
   });
   function renderBenefitLabel(benefit, i) {
       return (jsx("div", { className: `text-xl font-medium ${i ? 'mt-2.5' : ''}`, children: benefit.label }, String(i)));
@@ -863,7 +871,7 @@
         items-stretch ${cardStyleMap[version]} ${cardVersionMap[card.version ?? 'primary']} w-full col-span-4`, role: "listitem", children: jsx(GalleryCardInner, { ...card }) }, String(i)));
   }
 
-  const GalleryInner = JSX(({ context, cards = [], className = '', version = 'normal', ...rest }) => {
+  const GalleryInner = JSX(({ context, cards = [], className = '', version = 'normal', anchor = null, ...rest }) => {
       const [activeCardIndex, setActiveCardIndex] = context.useState(0);
       const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
       const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
@@ -871,15 +879,15 @@
       const showNextButton = isGalleryScrollAvailable &&
           cards?.length - activeCardIndex > galleryLengthForScrollMap[version];
       const showPrevButton = isGalleryScrollAvailable && activeCardIndex > 0;
-      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-[50px] overflow-hidden ${className}`, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 rotate-180 z-10 mt-[25px]", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })), showNextButton && (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-[25px]", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })), jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" })] }));
+      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-[50px] overflow-hidden ${className}`, id: anchor, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 rotate-180 z-10 mt-[25px]", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })), showNextButton && (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-[25px]", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })), jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" })] }));
   });
 
   const Gallery = JSX((props) => jsx(GalleryInner, { ...props, version: "normal" }));
 
   const MiniGallery = JSX((props) => (jsx(GalleryInner, { ...props, version: "mini" })));
 
-  const LinkList = JSX(({ className = '', documents }) => {
-      return (jsx("section", { className: `font-sans bg-white mt-[10px] ${className}`, children: jsx("ul", { className: "flex flex-col text-sm text-secondary-text p-0", children: documents?.length ? renderLinkListItem(documents) : null }) }));
+  const LinkList = JSX(({ className = '', documents, anchor = null }) => {
+      return (jsx("section", { className: `font-sans bg-white mt-[10px] ${className}`, id: anchor, children: jsx("ul", { className: "flex flex-col text-sm text-secondary-text p-0", children: documents?.length ? renderLinkListItem(documents) : null }) }));
   });
   const renderLinkListItem = (documents) => {
       return documents.map((doc, i) => {
@@ -901,20 +909,20 @@
       LinkList,
   };
 
-  const renderBlocksList = ({ blocks, context, className, columns, version, }) => blocks?.length ? blocks.map(renderBlock$1({ context, className, columns, version })) : null;
-  const renderBlock$1 = ({ context, columns, className, version }) => (block, i) => {
+  const renderBlocksList = ({ blocks, context, className, columns }) => blocks?.length ? blocks.map(renderBlock$1({ context, className, columns })) : null;
+  const renderBlock$1 = ({ context, columns, className }) => (block, i) => {
       const type = block?.blockListType;
       if (!type || !(type in EmbeddableBlocks)) {
           return null;
       }
       const columnsCountClass = columns === 2 ? 'w-1/2' : '';
       const EmbeddedBlock = EmbeddableBlocks[type];
-      return (jsx("div", { className: `${className} ${columnsCountClass}`, children: jsx(EmbeddedBlock, { context: context, ...block, blockVersion: version, className: "!p-0" }) }, `block_${i}`));
+      return (jsx("div", { className: `${className} ${columnsCountClass}`, children: jsx(EmbeddedBlock, { context: context, ...block, className: "!p-0" }) }, `block_${i}`));
   };
 
-  const AccordionItemInner = JSX(({ blocks, columns = 1, context, version = 'primary' }) => {
+  const AccordionItemInner = JSX(({ blocks, context }) => {
       const className = 'mb-5 last:mb-0 pb-5';
-      return (jsx("div", { className: "transition-all duration-300 max-h-0 overflow-hidden", children: renderBlocksList({ context, className, columns, blocks, version }) }));
+      return (jsx("div", { className: "transition-all duration-300 max-h-0 overflow-hidden", children: renderBlocksList({ context, className, blocks }) }));
   });
 
   const useActiveHandler$1 = ({ context, blocks, initialState = false }) => {
@@ -935,39 +943,30 @@
       return { isActive, hasContent, icon, handleToggle };
   };
 
-  const buttonStyleMap = {
-      primary: 'text-primary-text',
-      secondary: 'text-white',
-  };
-  const buttonHoverStyleMap = {
-      primary: 'group-hover:text-primary-main',
-      secondary: 'group-hover:text-white',
-  };
-  const AccordionItem = JSX(({ label, isExpanded, blocks, columns, context, version = 'primary' }) => {
+  const AccordionItem = JSX(({ label, isExpanded, blocks, context }) => {
       const { isActive, hasContent, icon, handleToggle } = useActiveHandler$1({
           context,
           blocks,
           initialState: isExpanded,
       });
-      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 ${buttonStyleMap[version]}
-        ${hasContent ? 'group cursor-pointer' : ''}`, onClick: handleToggle, children: [jsx("span", { className: `text-xl pr-2.5 font-medium ${hasContent ? buttonHoverStyleMap[version] : ''}`, children: label }), hasContent ? jsx(Icon, { name: icon, width: "24", height: "24", asSVG: true }) : null] }), hasContent ? (jsx(AccordionItemInner, { isExpanded: isActive, columns: columns, blocks: blocks, version: version, context: context })) : null] }));
+      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] }));
   });
 
-  const accordionStyleMap = {
-      primary: 'bg-white text-primary-text',
-      secondary: 'bg-primary-main text-white',
-  };
-  const Accordion = JSX(({ title, accordionItems, context, className = '', version = 'primary' }) => {
-      return (jsxs("section", { className: `p-[50px] font-sans ${className} ${accordionStyleMap[version]}`, children: [title ? jsx(Heading, { headingType: "h4", className: "mb-2.5", title: title }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, version: version, context: context }, `AccordionItem${i}`))) })) : null] }));
+  const Accordion = JSX(({ title, description, accordionItems, context, className = '', anchor = null }) => {
+      return (jsxs("section", { className: `p-[50px] font-sans bg-white text-primary-text ${className}`, id: anchor, children: [title ? jsx(Heading, { headingType: "h4", className: "mb-2.5", title: title }) : null, description ? jsx("div", { className: "mb-2.5 text-base", children: description }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, context: context }, `AccordionItem${i}`))) })) : null] }));
   });
 
-  const BenefitsBlock = JSX(({ className, title, benefits }) => {
-      return (jsxs("section", { className: `font-sans text-primary-text bg-white p-12 flex flex-col items-center ${className || ''}`, 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 BenefitsBlock = JSX(({ className, title, benefits, anchor = null }) => {
+      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)));
   };
 
+  const TableRowContainer = JSX(({ children }) => (jsx("div", { className: "self-start flex flex-col", role: "row", children: jsx("div", { className: "flex", children: children }) })));
+
   const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
   const BORDER_CLASSES$1 = 'border-main-stroke border-solid border';
   const DIVIDER_CLASSES$1 = 'border-main-divider border border-t-0 border-x-0';
@@ -975,8 +974,6 @@
   const COLS_LENGTH_FOR_SCROLL$1 = 2;
   const COLUMN_WIDTH$1 = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px
 
-  const TableRowContainer = JSX(({ children }) => (jsx("div", { className: "self-start flex flex-col", role: "row", children: jsx("div", { className: "flex", children: children }) })));
-
   const carouselContainerClassesMap = {
       comparison: 'flex gap-4 duration-1000',
       tariff: 'flex flex-grow duration-1000',
@@ -1037,10 +1034,10 @@
       return (jsxs("div", { children: [jsxs("div", { role: "table", children: [colHeaders?.length ? (jsx(ComparisonTableColumnHeaders, { colHeaders: colHeaders, activeCardIndex: activeCardIndex, router: router, handlerDecorator: handlerDecorator })) : null, rowData?.length ? (jsx(ComparisonTableRows, { rowData: rowData, activeCardIndex: activeCardIndex, isColoredFirstColumn: isColoredFirstColumn, ...tableArrowScrollProps })) : null] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
   });
 
-  const ComparisonTable = JSX(({ className, context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, }) => {
+  const ComparisonTable = JSX(({ className, context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, anchor = null, }) => {
       const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
       const showToggle = () => setIsShowAllRow(!isShowAllRow);
-      return (jsxs("section", { className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center mb-9 mx-auto", title: title }), jsx(ComparisonTableBody, { context: context, columns: columns, rowHeaders: rowHeaders, isShowAllRow: isShowAllRow, isColoredFirstColumn: isColoredFirstColumn, visibleRowLength: visibleRowLength }), visibleRowLength
+      return (jsxs("section", { className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, id: anchor, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center mb-9 mx-auto", title: title }), jsx(ComparisonTableBody, { context: context, columns: columns, rowHeaders: rowHeaders, isShowAllRow: isShowAllRow, isColoredFirstColumn: isColoredFirstColumn, visibleRowLength: visibleRowLength }), visibleRowLength
                   ? renderShowMoreToggleButton({ isShowAllRow, onClick: showToggle })
                   : null] }));
   });
@@ -1051,11 +1048,11 @@
   const TAB_STYLE = 'px-2 h-14 pb-2 pt-3 border border-b-0 border-main-stroke';
   const ACTIVE_TAB_STYLE = 'px-2 h-16 pt-4 pb-2 text-white bg-primary-main';
   const Tabs = JSX(({ tabs, currentTabIndex, onTabClick }) => {
-      return (jsx("div", { className: "flex items-end border-b border-main-stroke", role: "tablist", children: tabs?.map(renderTab(currentTabIndex, onTabClick)) }));
+      return (jsx("div", { className: "flex items-end border-b border-main-stroke", role: "tablist", children: tabs?.map(renderTab$1(currentTabIndex, onTabClick)) }));
   });
-  const renderTab = (currentTabIndex, onTabClick) => (tab, index) => {
+  const renderTab$1 = (currentTabIndex, onTabClick) => (tab, index) => {
       const isActive = currentTabIndex === index;
-      return (jsxs("div", { className: `flex h-full flex-1 cursor-pointer mr-2 last:mr-0 ${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)));
+      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 }) }));
 
@@ -1252,9 +1249,9 @@
       },
   ];
 
-  const CreditCalculator = JSX(({ className = '', context, tabs = DEFAULT_TABS }) => {
+  const CreditCalculator = JSX(({ className = '', context, tabs = DEFAULT_TABS, anchor = null }) => {
       const [currentTabIndex, setCurrentTabIndex] = context.useState(0);
-      return (jsxs("section", { className: `font-sans text-primary-text py-10 bg-white ${className}`, children: [jsx(Heading, { className: "w-full text-center mb-8", headingType: getTileHeadingType(className), title: "\u041A\u0430\u043B\u044C\u043A\u0443\u043B\u044F\u0442\u043E\u0440" }), jsx(Tabs, { tabs: tabs, currentTabIndex: currentTabIndex, onTabClick: setCurrentTabIndex }), jsx(CreditCalculatorForm, { context: context, directoryName: tabs[currentTabIndex]?.directoryName })] }));
+      return (jsxs("section", { className: `font-sans text-primary-text py-10 bg-white ${className}`, id: anchor, children: [jsx(Heading, { className: "w-full text-center mb-8", headingType: getTileHeadingType(className), title: "\u041A\u0430\u043B\u044C\u043A\u0443\u043B\u044F\u0442\u043E\u0440" }), jsx(Tabs, { tabs: tabs, currentTabIndex: currentTabIndex, onTabClick: setCurrentTabIndex }), jsx(CreditCalculatorForm, { context: context, directoryName: tabs[currentTabIndex]?.directoryName })] }));
   });
 
   function useExchangeRates(useAsyncData) {
@@ -1275,7 +1272,7 @@
   const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
   const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
 
-  const TABLE_HEAD_STYLE = 'text-left font-normal text-sm text-secondary-text';
+  const TABLE_HEAD_STYLE = 'font-light text-left font-normal text-sm text-secondary-text';
   const CURRENCY_ICONS_MAP = {
       USD: 'DollarIcon',
       EUR: 'EuroIcon',
@@ -1285,10 +1282,10 @@
   });
   const renderCurrencyRow = (exchangeCurrencyItem) => {
       const code = exchangeCurrencyItem?.currency?.currency;
-      return (jsxs("tr", { 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: "ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem.buyExchangeRate) }), jsx("td", { className: "pt-4 pl-11", 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(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));
   };
 
-  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-1.5", children: [address ? jsx("p", { className: "m-0", 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(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 Input = JSX(({ className = '', id, name, type = 'text', placeholder }) => {
       return (jsx("input", { className: className, id: id, name: name || id, type: type, placeholder: placeholder }));
@@ -1303,10 +1300,10 @@
   });
 
   const ExchangeCurrencyCalculator = JSX(({ codes, className = '' }) => {
-      return (jsxs("div", { className: `grid gap-3.5 ${className}`, children: [renderInput('Хочу продать', codes), renderInput('Получу', codes), jsx(Button, { className: "box-border mt-3.5 py-3 h-12 w-44", version: "primary", href: "#", children: "\u041A\u0443\u043F\u0438\u0442\u044C \u0432\u0430\u043B\u044E\u0442\u0443" })] }));
+      return (jsxs("div", { className: `grid gap-3.5 ${className}`, children: [renderInput('Хочу продать', codes), renderInput('Получу', codes), jsx(Button, { className: "box-border mt-3.5 py-3 h-12 w-full", version: "primary", href: "#", children: "\u041A\u0443\u043F\u0438\u0442\u044C \u0432\u0430\u043B\u044E\u0442\u0443" })] }));
   });
   function renderInput(placeholder, codes) {
-      return (jsxs("div", { className: "flex items-center", children: [jsx(Input, { className: "h-10 border pl-2.5 rounded-md text-m-sm w-full appearance-none", type: "number", placeholder: `${placeholder}` }), codes.length ? (jsx(Select, { className: "h-9 -translate-x-16", children: codes.map((code, i) => (jsx(SelectOption, { value: code, children: code }, String(i)))) })) : null] }));
+      return (jsxs("div", { className: "relative flex items-center", children: [jsx(Input, { className: "h-10 border pl-4 pt-[7px] pb-[7px] rounded-md text-m-sm w-full appearance-none -mr-12", type: "number", placeholder: `${placeholder}` }), codes.length ? (jsx(Select, { className: "h-9 -translate-x-4", children: codes.map((code, i) => (jsx(SelectOption, { value: code, children: code }, String(i)))) })) : null] }));
   }
 
   const CURRENCY_CODES = ['USD', 'EUR'];
@@ -1327,12 +1324,12 @@
       address: 'Москва, ул.Ленина д.28',
       distance: '6км',
   };
-  const ExchangeRateTile = JSX(({ className = '', context, title = 'Курсы обмена валют' }) => {
+  const ExchangeRateTile = JSX(({ className = '', context, title = 'Курсы обмена валют', anchor = null }) => {
       const data = useExchangeRates(context.useAsyncData);
       const exchangeCurrencyItems = data?.exchangeRate?.currencies?.filter((item) => {
           return CURRENCY_CODES.indexOf(item?.currency?.currency || '') !== -1;
       }) || DEFAULT_CURRENCY_ITEMS;
-      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className}`, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: "whitespace-pre-wrap mb-3" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-20 pt-3", children: [exchangeCurrencyItems ? (jsx(CurrencyTable, { className: "mb-7", exchangeCurrencyItems: exchangeCurrencyItems })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), exchangeCurrencyItems?.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", exchangeCurrencyItems: exchangeCurrencyItems, codes: EXCHANGE_CODES })) : null] }) }) }));
+      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className}`, id: anchor, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-[43px] pt-4", children: [exchangeCurrencyItems ? (jsx(CurrencyTable, { className: "mb-[31px]", exchangeCurrencyItems: exchangeCurrencyItems })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), exchangeCurrencyItems?.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", exchangeCurrencyItems: exchangeCurrencyItems, codes: EXCHANGE_CODES })) : null] }) }) }));
   });
 
   const LOGO_PATHS = [
@@ -1441,7 +1438,7 @@
       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-[38px] h-[38px] 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 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" })) }));
   });
 
   const SocialMedia = JSX(({ className, media, context }) => {
@@ -1459,8 +1456,8 @@
 
   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 }) => {
-      return (jsxs("footer", { className: `px-9 py-10 bg-white ${className || ''}`, 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 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 maxBy = (discriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
@@ -1485,15 +1482,15 @@
       isHrefActive(topItem.href, router) ||
       checkIsHrefSameOrigin(topItem.href, router);
 
-  const TEXT_CLASSES$1 = 'font-sans font-normal text-base';
+  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$1(bgColor, active), children: text || children }), active ? jsx("div", { className: getBorderClasses(bgColor, active) }) : null] })));
-  const getTextClasses$1 = (bgColor, active) => {
+  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$1}`;
+      return `${classes} ${TEXT_CLASSES$2}`;
   };
   const getBorderClasses = (bgColor, active) => {
       if (!active) {
@@ -1502,24 +1499,24 @@
       return `${bgColor === 'bg-white' ? 'bg-primary-main' : bgColor} ${BORDER_CLASSES}`;
   };
 
-  const TEXT_CLASSES = 'font-sans font-normal text-sm';
-  const LINK_CLASSES = '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(bgColor, active, flat)} ${className}`, href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": ariaLabel, children: jsx("span", { className: getTextClasses(bgColor, active, flat), children: text || children }) })));
-  const getLinkClasses = (bgColor, active, flat) => {
+  const TEXT_CLASSES$1 = 'font-sans font-normal 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 getLinkClasses$1 = (bgColor, active, flat) => {
       let classes = 'border-transparent';
       if (active) {
           classes = `rounded-md ${bgColor === 'bg-white' ? 'border-primary-main' : 'border-white'}`;
       }
-      return `${classes} ${LINK_CLASSES} ${flat ? '' : 'px-4 py-2'}`;
+      return `${classes} ${LINK_CLASSES$1} ${flat ? '' : 'px-4 py-2'}`;
   };
-  const getTextClasses = (bgColor, active, flat) => {
+  const getTextClasses$1 = (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}`;
+      return `${classes} ${TEXT_CLASSES$1}`;
   };
 
   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 })));
@@ -1545,7 +1542,7 @@
       'bg-white': 'bg-main-divider',
       transparent: 'bg-main-divider opacity-30',
   };
-  const Header = JSX(({ className, defaultLocation, bgColor = 'bg-white', context, topItems }) => {
+  const Header = JSX(({ className, defaultLocation = 'Москва', bgColor = 'bg-white', context, topItems, anchor = null, }) => {
       const router = context.useRouter();
       const sitemap = useSitemap(context.useAsyncData);
       const { handlerDecorator } = context;
@@ -1555,27 +1552,50 @@
       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 || ''}`, 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-5 pb-8 px-20 ${bgColor} ${className || ''}`, id: anchor, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor }), topMenu, jsx(HeaderSecondaryMenu, { context: context, className: "ml-auto", defaultLocation: defaultLocation, bgColor: bgColor })] }), jsx("div", { className: `mt-5 h-[1px] ${BORDER_COLORS[bgColor]}` }), jsx("nav", { className: "mt-5", children: subMenu })] }) }));
   });
 
-  const MobileAppTile = JSX(({ className = '', context, title = 'Мобильное приложение', qr, buttons = [] }) => {
-      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className}  ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, children: jsx(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px]` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, children: jsxs("div", { className: "flex items-center", children: [qr?.src && qr?.href && (jsx("a", { href: qr.href, target: "_blank", "aria-label": title, children: jsx("img", { src: qr.src, alt: title, title: title, width: "164", height: "164", className: "w-[90px] h-[90px] min-w-[90px] min-h-[90px] bg-secondary-light" }) })), jsx("span", { className: "font-normal text-sm text-secondary-text ml-4", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }) }) }));
+  const MobileAppTile = JSX(({ className = '', context, title = 'Мобильное приложение', qr, buttons = [], anchor = null, }) => {
+      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className}  ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: jsx(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px]` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, children: jsxs("div", { className: "flex items-center", children: [qr?.src && qr?.href && (jsx("a", { href: qr.href, target: "_blank", "aria-label": title, children: jsx("img", { src: qr.src, alt: title, title: title, width: "164", height: "164", className: "w-[90px] h-[90px] min-w-[90px] min-h-[90px] bg-secondary-light" }) })), jsx("span", { className: "font-normal text-sm text-secondary-text ml-4", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }) }) }));
   });
 
   const NavigationItem = JSX(({ className, text, onClick, href, target, isActive }) => (jsx("a", { className: `bg-inherit no-underline px-4 py-2.5 cursor-pointer rounded text-sm border border-solid hover:text-primary-main ${className || ''} ${isActive ? 'border-primary-main text-primary-main' : 'border-white text-secondary-text'}`, onClick: onClick, href: href, target: target, children: text })));
 
-  const Navigation = JSX(({ className, context, title, buttons }) => {
+  const Navigation = JSX(({ className, context, title, buttons, anchor = null }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
       const activeButton = findActiveSubItem(router)(buttons);
-      return (jsxs("section", { className: `font-sans text-primary-text rounded-[40px] flex items-center justify-between ${className || ''}`, children: [jsx("h2", { className: "font-medium text-xl m-0", children: title }), buttons?.length ? (jsx("div", { className: "flex rounded-md overflow-hidden bg-white", children: buttons
+      return (jsxs("section", { className: `font-sans text-primary-text rounded-[40px] flex items-center justify-between ${className || ''}`, id: anchor, children: [jsx("h2", { className: "font-medium text-xl m-0", children: title }), buttons?.length ? (jsx("div", { className: "flex rounded-md overflow-hidden bg-white", children: buttons
                       .filter(({ text }) => text)
                       .map((button, i) => (jsx(NavigationItem, { className: "first:rounded-tl-md first:rounded-bl-md last:rounded-tr-md last:rounded-br-md", isActive: button === activeButton, ...useLink({ router, handlerDecorator }, button) }, String(i)))) })) : null] }));
   });
 
+  const TEXT_CLASSES = 'font-sans font-normal text-sm';
+  const LINK_CLASSES = 'flex-1 flex items-center justify-center';
+  const NavigatorTabItem = JSX(({ className = '', label, active, children, onClick, anchor }) => (jsx("a", { className: getLinkClasses(className, active), href: `#${anchor}`, onClick: onClick, children: jsx("span", { className: getTextClasses(active), children: label || children }) })));
+  const getLinkClasses = (className, active) => {
+      const classes = active ? 'bg-primary-main' : 'bg-white';
+      return `${classes} ${LINK_CLASSES} ${className}`;
+  };
+  const getTextClasses = (active) => {
+      const classes = active ? 'text-white' : 'text-secondary-text hover:text-primary-main';
+      return `${classes} ${TEXT_CLASSES}`;
+  };
+
+  const NavigatorTabs = JSX(({ className = '', navigatorTabs, context, anchor = null }) => {
+      const router = context.useRouter();
+      const hash = getHash(router.href);
+      return (jsx("section", { className: `sticky top-0 z-20 box-border flex gap-x-1 h-12 ${className}`, id: anchor, children: navigatorTabs ? navigatorTabs.map(renderTab(hash, router)) : null }));
+  });
+  const renderTab = (hash, router) => (tab, i) => {
+      const anchorHash = `#${tab.anchor}`;
+      const active = hash ? anchorHash === hash : i === 0;
+      return (jsx(NavigatorTabItem, { active: active, onClick: () => router?.replace(anchorHash), ...tab }, tab.anchor));
+  };
+
   const GOLDEN_RATIO = 1.618;
-  const Placeholder = JSX(({ className, context, title, description = 'Блок в разработке...' }) => {
-      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, children: [description ? (jsx(Description, { className: "mt-4 max-w-[600px]", description: description })) : null, jsx("figure", { className: "m-0 min-w-[600px]", children: renderShimmer() })] }) }));
+  const Placeholder = JSX(({ className, context, title, description = 'Блок в разработке...', anchor = null }) => {
+      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, children: [description ? (jsx(Description, { className: "mt-4 max-w-[600px]", description: description })) : null, jsx("figure", { className: "m-0 min-w-[600px]", children: renderShimmer() })] }) }));
   });
   const renderShimmer = (size = 3) => goldenSequence(100, size)
       .map((_) => Math.floor(_))
@@ -1583,11 +1603,11 @@
   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 ProductGallery = JSX(({ className, context, duration = 0, slides = [] }) => {
+  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 || ''}`, 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) => renderProductBlock$1(_, i, context)) }), jsx("div", { className: "flex", children: galleryNav.map((slide, i) => renderNavButton$1({
                       slide,
                       i,
                       activeSlideIndex,
@@ -1605,11 +1625,11 @@
       return (jsxs("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `font-sans group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 pt-4 pb-[23px] grow basis-0`, children: [jsxs("div", { className: "border-0 border-r border-solid border-main-divider px-6", children: [jsx("div", { className: `text-sm font-medium pb-[3px] group-hover:text-primary-text ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: "text-xs text-secondary-text", children: slide.desc })] }), jsx("div", { className: `absolute bottom-0 left-0 w-full h-[3px] bg-primary-main -translate-x-full ${progressBarClassName}`, style: { animationDuration: `${duration}s`, animationFillMode: 'forwards' } })] }, String(i)));
   }
 
-  const ProductGalleryGreen = JSX(({ className = '', context, slides = [] }) => {
+  const ProductGalleryGreen = JSX(({ className = '', context, 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: `box-border pt-[70px] relative font-sans overflow-hidden bg-primary-main w-100 ${className}`, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock(_, 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", { className: `box-border pt-[70px] relative font-sans overflow-hidden bg-primary-main w-100 ${className}`, id: anchor, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock(_, 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({
                       slide,
                       i,
                       activeSlideIndex,
@@ -1623,20 +1643,24 @@
       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'
-          : 'bg-white/10 min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300';
-      const btnTitleClassName = isActiveBtn ? 'text-primary-text' : 'text-white';
-      const btnDescClassName = isActiveBtn ? 'text-secondary-text' : 'text-white';
+          : 'bg-white/10 min-w-[277px] px-0 pt-4 pb-[23px] hover:pt-[21px] hover:pb-7 ease-in duration-300';
+      const btnTitleClassName = isActiveBtn
+          ? 'text-[18px] text-primary-text pb-[10px]'
+          : 'text-m-base text-white pb-[3px]';
+      const btnDescClassName = isActiveBtn
+          ? 'text-[18px] text-secondary-text'
+          : 'text-m-base text-white';
       return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `box-border font-sans group relative overflow-hidden border-white/50 border-[1px] cursor-pointer text-left mb-6a mx-1 grow basis-0 backdrop-blur-sm
         ${btnClassName}
-      `, children: jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `text-sm font-medium pb-[3px] ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-xs text-secondary-text ${btnDescClassName}`, children: slide.description })] }) }, String(i)));
+      `, children: jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `font-medium ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text ${btnDescClassName}`, children: slide.description })] }) }, String(i)));
   }
 
   const promoTileStyleMap = {
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
   };
-  const PromoTile = JSX(({ className = '', context, title = 'Акции и спецпредложения', date, description, buttons = [], version = 'primary', }) => {
-      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${promoTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, children: jsx(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-sm mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-base", children: description })] }) }) }));
+  const PromoTile = JSX(({ className = '', context, title = 'Акции и спецпредложения', date, description, buttons = [], version = 'primary', anchor = null, }) => {
+      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${promoTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: jsx(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-sm mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-base", children: description })] }) }) }));
   });
   function formatDate(date) {
       const dateObj = new Date(date);
@@ -1691,11 +1715,11 @@
   const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
   const CARD_FULL_VIEW_COUNT = 2;
   const CARD_SHIFT = 525;
-  const Recommendation = JSX(({ context, recommendations = [], className = '', title, version }) => {
+  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}`, children: [title ? jsx(Heading, { headingType: "h3", 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
+      return (jsxs("section", { className: `relative font-sans p-[50px] overflow-hidden ${blockClassName} ${className}`, id: anchor, children: [title ? jsx(Heading, { headingType: "h3", 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
                       ? recommendations.map(renderRecommendationCard({ context, version, className: cardClassName }))
                       : null }), renderNavButtons({
                   cardsCount: recommendations.length,
@@ -1715,8 +1739,8 @@
       return (jsxs("div", { children: [showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 rotate-180 z-10 mt-6", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E" })), showNextButton && (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-6", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E" }))] }));
   };
 
-  const StepsBlock = JSX(({ className, title, showLines = true, steps }) => {
-      return (jsxs("section", { className: `box-border font-sans text-primary-text bg-white px-20 py-[50px] flex flex-col items-center ${className || ''}`, 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((step, i) => renderStepIcon(step, i))) }), jsx("div", { className: "flex justify-between gap-x-[101px]", children: steps.map(renderStepTitle) })] })) : null] }));
+  const StepsBlock = JSX(({ className, title, showLines = true, steps, anchor = null }) => {
+      return (jsxs("section", { className: `box-border font-sans text-primary-text bg-white px-20 py-[50px] flex flex-col items-center ${className || ''}`, 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((step, i) => renderStepIcon(step, i))) }), jsx("div", { className: "flex justify-between 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)));
@@ -1742,7 +1766,7 @@
       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] }));
   });
 
-  const TariffsTable = JSX(({ className, context, title, description, rowHeaders, columns }) => {
+  const TariffsTable = JSX(({ className, context, title, description, rowHeaders, columns, anchor = null }) => {
       const [activeCardIndex, setActiveCardIndex] = context.useState(0);
       const colData = getColData(columns);
       const rowData = getRowData(rowHeaders, colData);
@@ -1753,7 +1777,7 @@
           setActiveCardIndex,
       });
       const { isScrollAvailable } = tableArrowScrollControlProps;
-      return (jsxs("section", { className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${description ? 'mb-2.5' : 'mb-9'}`, title: title })) : null, description ? jsx("div", { className: "mb-9 text-center text-m-base", children: description }) : null, rowData?.length ? (jsxs("div", { role: "table", children: [jsxs("div", { className: "relative", children: [rowData.map((row, i, { length }) => (jsx(TariffsTableRow, { row: row, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex }, String(i)))), jsx(TableArrowScrollControl, { ...tableArrowScrollControlProps })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] })) : null] }));
+      return (jsxs("section", { className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, id: anchor, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${description ? 'mb-2.5' : 'mb-9'}`, title: title })) : null, description ? jsx("div", { className: "mb-9 text-center text-m-base", children: description }) : null, rowData?.length ? (jsxs("div", { role: "table", children: [jsxs("div", { className: "relative", children: [rowData.map((row, i, { length }) => (jsx(TariffsTableRow, { row: row, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex }, String(i)))), jsx(TableArrowScrollControl, { ...tableArrowScrollControlProps })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] })) : null] }));
   });
   const getColData = (columns) => columns?.map(({ data }) => data) || [];
   const getRowData = (rowHeaders, colData) => rowHeaders?.map((header, i) => ({
@@ -1774,6 +1798,7 @@
       LinkDocs,
       MiniGallery,
       MobileAppTile,
+      NavigatorTabs,
       PictureText,
       ProductBlock,
       ProductGallery,
@@ -1801,9 +1826,9 @@
       return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsx("path", { ...params, strokeMiterlimit: "10", d: "M21.48 11.95c.5-1.4-.4-2.6-1.9-2.6h-4c-.6 0-1.1-.5-1-1.2l.5-3.2c.2-.9-.4-1.9-1.3-2.2-.8-.3-1.8.1-2.2.7l-4.1 6.1M7.48 18.35l3.1 2.4c.4.4 1.3.6 1.9.6h3.8c1.2 0 2.5-.9 2.8-2.1l1.24-3.77" }), jsx("path", { ...params, d: "M2.38 18.35v-9.8c0-1.4.6-1.9 2-1.9h1c1.4 0 2 .5 2 1.9v9.8c0 1.4-.6 1.9-2 1.9h-1c-1.4 0-2-.5-2-1.9Z" })] }));
   };
 
-  const LikeControl = JSX(({ className, context }) => {
+  const LikeControl = JSX(({ className, context, anchor = null }) => {
       const likeService = context.useLikeService();
-      return (jsxs("div", { className: `border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${className || ''}`, children: [jsx(LikeButton, { onClick: likeService.like, ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u043B\u0430\u0439\u043A\u00BB" }), jsx(LikeButton, { onClick: likeService.dislike, className: "rotate-180", ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u0434\u0438\u0437\u043B\u0430\u0439\u043A\u00BB" }), jsx("span", { className: "select-none", children: likeService.likeCount })] }));
+      return (jsxs("div", { className: `border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${className || ''}`, id: anchor, children: [jsx(LikeButton, { onClick: likeService.like, ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u043B\u0430\u0439\u043A\u00BB" }), jsx(LikeButton, { onClick: likeService.dislike, className: "rotate-180", ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u0434\u0438\u0437\u043B\u0430\u0439\u043A\u00BB" }), jsx("span", { className: "select-none", children: likeService.likeCount })] }));
   });
 
   const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
@@ -1818,11 +1843,11 @@
       }
       const BlockComponent = blocksRegistry[type || 'Placeholder'] || Placeholder;
       return blockDecorator({
-          blockClassName: style2className(block.style),
+          blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
           block,
           render: (props) => {
-              const { version, content } = props.block;
-              return (jsx(BlockComponent, { className: props.blockClassName, version: version, context: context, ...content }, `${type}-${i}`));
+              const { version, content, anchor } = props.block;
+              return (jsx(BlockComponent, { className: props.blockClassName, version: version, context: context, anchor: anchor, ...content }));
           },
       }, `block-${i}`);
   }