@redneckz/wildless-cms-uni-blocks 0.3.79 → 0.3.81

package/bundle/bundle.umd.js

@@ -186,6 +186,19 @@
       };
   }
 
+  const changeHashOnObserve = (entries) => {
+      if (!entries.length) {
+          return;
+      }
+      const [entry] = entries;
+      if (entry.isIntersecting) ;
+  };
+
+  const BlockWrapper = JSX(({ anchor, className, context, children, Tag = 'section', ...rest }) => {
+      const { IntersectionObserverTag } = context;
+      return anchor ? (jsx(IntersectionObserverTag, { Tag: Tag, className: className, observerCallback: changeHashOnObserve, observerOptions: { threshold: 1 }, anchor: anchor, ...rest, children: children })) : (jsx(Tag, { className: className, ...rest, children: children }));
+  });
+
   const HEADING_STYLE_MAP = {
       h1: 'text-title-xl tracking-[-0.3px]',
       h2: 'text-title-lg',
@@ -473,9 +486,9 @@
       },
   };
 
-  const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description, anchor = null, headingType = 'h2', }) => {
+  const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description, headingType = 'h2', ...rest }) => {
       const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
-      return (jsxs("section", { className: `p-[50px] flex flex-col gap-4 ${STYLE_MAPS.background} ${className}`, id: anchor, children: [title ? (jsx(Heading, { headingType: headingType, className: `text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx("p", { className: `text-base ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, children: description })) : null] }));
+      return (jsxs(BlockWrapper, { className: `p-[50px] flex flex-col gap-4 ${STYLE_MAPS.background} ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: headingType, className: `text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx("p", { className: `text-base ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, children: description })) : null] }));
   });
 
   const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
@@ -506,19 +519,19 @@
       double: 'flex gap-x-5 gap-y-[26px] flex-wrap',
       single: 'flex gap-3.5 flex-col',
   };
-  const LinkDocs = JSX(({ context, className = '', title, description, align = 'center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', anchor = null, }) => {
-      return (jsxs("section", { className: `font-sans text-primary-text p-[50px] bg-white ${className}`, id: anchor, children: [jsx(Headline, { className: "!p-0", title: title, description: description, context: context, align: align, headingType: "h3" }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] }));
+  const LinkDocs = JSX(({ context, className = '', title, description, align = 'center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => {
+      return (jsxs(BlockWrapper, { context: context, className: `font-sans text-primary-text p-[50px] bg-white ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, context: context, align: align, headingType: "h3" }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] }));
   });
 
   const pictureTextStyleMap = {
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
   };
-  const PictureText = JSX(({ className = '', title, image, benefits, version = 'primary', directionRight = false, anchor = null, }) => {
-      return (jsxs("section", { className: `relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`, id: anchor, children: [jsx(Heading, { headingType: "h2", className: "text-center", title: title }), jsxs("div", { className: 'flex justify-center mt-9', children: [image?.src && jsx(Img, { className: directionRight ? 'order-2 ml-6' : 'mr-6', image: image }), benefits?.length ? (jsx("div", { className: "flex flex-col", children: benefits.map((_, i) => renderBenefit$2(_, i, version)) })) : null] })] }));
+  const PictureText = JSX(({ className = '', title, image, benefits, version = 'primary', directionRight = false, ...rest }) => {
+      return (jsxs(BlockWrapper, { className: `relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`, ...rest, children: [jsx(Heading, { headingType: "h2", className: "text-center", title: title }), jsxs("div", { className: 'flex justify-center mt-9', children: [image?.src && jsx(Img, { className: directionRight ? 'order-2 ml-6' : 'mr-6', image: image }), benefits?.length ? (jsx("div", { className: "flex flex-col", children: benefits.map((_, i) => renderBenefit$2(_, i, version)) })) : null] })] }));
   });
   function renderBenefit$2(benefit, i, version) {
-      return (jsxs("div", { className: "flex flex-row mb-8", children: [benefit.icon ? (jsx(Img, { className: "w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]", image: benefit.icon, width: "48", height: "48", asSVG: true })) : null, jsxs("div", { className: "flex gap-1 flex-col h-full ml-5 max-w-[490px]", children: [benefit?.label ? (jsx("div", { className: `font-medium text-xl m-0 ${version === 'primary' ? 'text-primary-text' : ''}`, children: benefit.label })) : null, benefit?.description ? (jsx("div", { className: `font-normal text-sm ${version === 'primary' ? 'text-secondary-text' : ''}`, children: benefit.description })) : null] })] }, String(i)));
+      return (jsxs("div", { className: "flex flex-row mb-8", children: [benefit.icon ? (jsx(Img, { className: "w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]", image: benefit.icon, width: "48", height: "48", asSVG: true })) : null, jsxs("div", { className: "flex gap-1 flex-col h-full ml-5 max-w-[490px]", children: [benefit?.label ? (jsx("div", { className: `font-medium text-xl-light m-0 ${version === 'primary' ? 'text-primary-text' : ''}`, children: benefit.label })) : null, benefit?.description ? (jsx("div", { className: `font-normal text-sm ${version === 'primary' ? 'text-secondary-text' : ''}`, children: benefit.description })) : null] })] }, String(i)));
   }
 
   const isURL = (href) => href?.includes('//');
@@ -699,8 +712,8 @@
               : null }));
   });
 
-  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 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 benefitTitleStyleMap = {
@@ -713,7 +726,7 @@
   };
   function renderBenefit$1({ benefit, version = 'primary', benefitsVersion = 'normal' }, i) {
       const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
-      return (jsxs("div", { className: "flex gap-4 items-center", children: [benefit.icon ? (jsx(Img, { className: renderBenefitIconBgStyle(version, benefitsVersion), image: { ...benefit?.icon, iconVersion: isIconWhite ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true })) : null, jsxs("div", { className: "flex gap-0.5 flex-col h-full max-w-[149px] min-w-[149px]", children: [jsx("div", { className: `text-xl m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description ? (jsx("div", { className: `font-light text-m-md ${benefitDescStyleMap[version]}`, children: benefit.description })) : null] })] }, String(i)));
+      return (jsxs("div", { className: "flex gap-4 items-center", children: [benefit.icon ? (jsx(Img, { className: renderBenefitIconBgStyle(version, benefitsVersion), image: { ...benefit?.icon, iconVersion: isIconWhite ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true })) : null, jsxs("div", { className: "flex gap-0.5 flex-col h-full max-w-[149px] min-w-[149px]", children: [jsx("div", { className: `text-xl-light m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description ? (jsx("div", { className: `font-light text-m-md ${benefitDescStyleMap[version]}`, children: benefit.description })) : null] })] }, String(i)));
   }
   function renderBenefitIconBgStyle(version, benefitsVersion) {
       let bgColorStyle = 'bg-primary-main text-black';
@@ -752,10 +765,10 @@
       secondary: 'text-white/80',
   };
   const ProductBlock = JSX((props) => {
-      const { context, className = '', breadcrumbs, backwardButton, version = 'primary', anchor = null, ...otherProps } = props;
+      const { context, className = '', breadcrumbs, backwardButton, version = 'primary', ...otherProps } = props;
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("section", { className: `font-sans overflow-hidden pt-[50px] pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap$1[version]} ${className}`, id: anchor, children: [backwardButton?.text ? renderBackwardButton(backwardButton, version, 'mb-10 -mt-2.5') : null, 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(BlockWrapper, { context: context, className: `font-sans overflow-hidden pt-[50px] pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap$1[version]} ${className}`, ...otherProps, children: [backwardButton?.text ? renderBackwardButton(backwardButton, version, 'mb-10 -mt-2.5') : null, 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 = {
@@ -778,9 +791,9 @@
           description: 'text-secondary-text',
       },
   };
-  const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className, anchor = null, }) => {
+  const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className, ...rest }) => {
       const textBlockStyleMap = textBlockStyleMaps[blockVersion];
-      return (jsxs("section", { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, id: anchor, children: [iconVersion === 'small' ? renderIcon(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 })) : null, description ? (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description })) : null] })] }));
+      return (jsxs(BlockWrapper, { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, ...rest, children: [iconVersion === 'small' ? renderIcon(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 })) : null, description ? (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description })) : null] })] }));
   });
   function renderIcon(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" }) }));
@@ -826,8 +839,8 @@
       secondary: 'bg-primary-main text-white',
   };
   const Tile = JSX((props) => {
-      const { context, title, headingType = 'h3', description, items, children, buttons, image, isDotted = true, className = '', version = 'primary', role, anchor = null, } = props;
-      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: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
+      const { context, title, headingType = 'h3', description, items, children, buttons, image, isDotted = true, className = '', version = 'primary', ...rest } = props;
+      return (jsx(BlockWrapper, { context: context, className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
               ${version === 'primary' ? 'text-primary-text' : ''}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons.map((button) => ({ ...button, className: 'w-[158px]' })), className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? (jsx(Description, { className: "max-w-[600px] text-title-new-sm font-light", description: description })) : null, children, renderList$2(items, version, isDotted)] }) }));
   });
   function renderList$2(items, version, isDotted) {
@@ -838,8 +851,8 @@
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
   };
-  const ProductTile = JSX(({ context, className = '', title, headingType = 'h3', description, additionalDescription, benefits, buttons, image, version = 'primary', anchor = null, }) => {
-      return (jsxs("section", { className: `bg-white overflow-hidden text-primary-text font-sans p-9 box-border min-h-[364px] relative justify-between grid ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: [jsxs("div", { className: "z-[1]", children: [title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap text-h4` })) : null, description ? (jsx(Description, { className: "mt-2 text-md font-light", description: description })) : null, renderBenefits$1(benefits || [], version), additionalDescription
+  const ProductTile = JSX(({ context, className = '', title, headingType = 'h3', description, additionalDescription, benefits, buttons, image, version = 'primary', ...rest }) => {
+      return (jsxs(BlockWrapper, { context: context, className: `bg-white overflow-hidden text-primary-text font-sans p-9 box-border min-h-[364px] relative justify-between grid ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: [jsxs("div", { className: "z-[1]", children: [title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap text-h4` })) : null, description ? (jsx(Description, { className: "mt-2 text-md font-light", description: description })) : null, renderBenefits$1(benefits || [], version), additionalDescription
                           ? renderAdditionalDescription(additionalDescription, version)
                           : null] }), buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex self-end mt-5 gap-4 z-[1]" })) : null, image?.src ? jsx(Img, { className: "absolute right-0 bottom-0", image: image }) : null] }));
   });
@@ -864,6 +877,14 @@
       return jsx("div", { className: `text-m mt-2.5 ${descStyleMap[version]}`, children: additionalDescription });
   }
 
+  const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
+        ? 'bg-secondary-light text-secondary-text'
+        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, width: "16", height: "16", asSVG: true }) })));
+
+  function renderArrows({ handler, isShown, btnClass, className = '', isDisabled = false, }) {
+      return (jsxs("div", { children: [isShown[0] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 ${btnClass[0]} ${className}`, onClick: handler[0], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left", disabled: !isShown[0] })) : null, isShown[1] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 rotate-180 ${btnClass[1]} ${className}`, onClick: handler[1], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right", disabled: !isShown[1] })) : null] }));
+  }
+
   const cardVersionMap = {
       primary: 'bg-white text-secondary-text',
       secondary: 'bg-primary-main text-white',
@@ -889,13 +910,13 @@
       return (jsx(Button, { className: "mt-6 w-full", appendLeft: button.icon && jsx(Img, { image: button.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
   }
   function renderCardTitle(title, className) {
-      return jsx("div", { className: `text-xl m-0 ${className}`, children: title });
+      return jsx("div", { className: `text-xl-light m-0 ${className}`, children: title });
   }
   function renderItems(items, isDotted, version = 'primary') {
       return (jsx(List, { className: `max-w-[308px] mt-2 text-sm ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "mt-1 first:mt-0", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted, version: version }));
   }
   function getTitleStyle(version) {
-      return `text-xl m-0
+      return `text-xl-light m-0
         ${version !== 'secondary' ? 'text-primary-text' : ''}
       `;
   }
@@ -908,15 +929,7 @@
         items-stretch ${cardStyleMap$1[version]} ${cardVersionMap[card.version ?? 'primary']} w-full col-span-4`, role: "listitem", children: jsx(GalleryCardInner, { ...card }) }, String(i)));
   }
 
-  const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
-        ? 'bg-secondary-light text-secondary-text'
-        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, width: "16", height: "16", asSVG: true }) })));
-
-  function renderArrows({ handler, isShown, btnClass, className = '', isDisabled = false, }) {
-      return (jsxs("div", { children: [isShown[0] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 ${btnClass[0]} ${className}`, onClick: handler[0], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left", disabled: !isShown[0] })) : null, isShown[1] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 rotate-180 ${btnClass[1]} ${className}`, onClick: handler[1], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right", disabled: !isShown[1] })) : null] }));
-  }
-
-  const GalleryInner = JSX(({ context, cards = [], className = '', version = 'normal', anchor = null, ...rest }) => {
+  const GalleryInner = JSX(({ context, cards = [], className = '', version = 'normal', ...rest }) => {
       const [activeCardIndex, setActiveCardIndex] = context.useState(0);
       const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
       const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
@@ -924,7 +937,7 @@
       const showNextButton = isGalleryScrollAvailable &&
           cards?.length - activeCardIndex > galleryLengthForScrollMap[version];
       const showPrevButton = isGalleryScrollAvailable && activeCardIndex > 0;
-      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-[42px] overflow-hidden ${className}`, id: anchor, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), renderArrows({
+      return (jsxs(BlockWrapper, { context: context, className: `relative font-sans text-primary-text bg-white p-[42px] overflow-hidden ${className}`, ...rest, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), renderArrows({
                   handler: [handlePrevClick, handleNextClick],
                   isShown: [showPrevButton, showNextButton],
                   btnClass: ['left-8', 'right-8'],
@@ -936,8 +949,8 @@
 
   const MiniGallery = JSX((props) => (jsx(GalleryInner, { ...props, version: "mini" })));
 
-  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 LinkList = JSX(({ className = '', documents, ...rest }) => {
+      return (jsx(BlockWrapper, { className: `font-sans bg-white mt-[10px] ${className}`, ...rest, 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) => {
@@ -1000,7 +1013,7 @@
       });
       return (jsxs("li", { className: "border-0 border-b border-solid border-main-divider last:border-b-0", children: [jsxs("button", { className: `border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans
             ${hasContent ? 'group cursor-pointer' : ''}
-          `, onClick: handleToggle, children: [jsx("span", { className: `text-xl pr-2.5 font-medium`, children: label }), hasContent ? (jsx(Img, { image: icon, className: "text-primary-main", width: "24", height: "24", asSVG: true })) : null] }), hasContent ? (jsx(AccordionItemInner, { isExpanded: isActive, blocks: blocks, context: context })) : null] }));
+          `, onClick: handleToggle, children: [jsx("span", { className: `text-xl-light pr-2.5 font-medium`, children: label }), hasContent ? (jsx(Img, { image: icon, className: "text-primary-main", width: "24", height: "24", asSVG: true })) : null] }), hasContent ? (jsx(AccordionItemInner, { isExpanded: isActive, blocks: blocks, context: context })) : null] }));
   });
 
   const ALIGN_TITLE = {
@@ -1008,19 +1021,19 @@
       center: 'text-center',
       right: 'text-right',
   };
-  const Accordion = JSX(({ title, description, accordionItems, context, className = '', anchor = null, accordionAlignTitle = 'center', }) => {
-      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 ${ALIGN_TITLE[accordionAlignTitle]}`, 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 Accordion = JSX(({ title, description, accordionItems, context, className = '', accordionAlignTitle = 'center', ...rest }) => {
+      return (jsxs(BlockWrapper, { context: context, className: `p-[50px] font-sans bg-white text-primary-text ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h4", className: `mb-2.5 ${ALIGN_TITLE[accordionAlignTitle]}`, 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 = '', headingType = 'h2', title, benefitList, 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: headingType, as: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefitList?.length ? renderBenefits(benefitList) : null] }));
+  const BenefitsBlock = JSX(({ className = '', headingType = 'h2', title, benefitList, ...rest }) => {
+      return (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-12 flex flex-col items-center ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: headingType, as: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefitList?.length ? renderBenefits(benefitList) : null] }));
   });
   const renderBenefits = (benefits) => {
       return (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-9", children: benefits.map(renderStep) }));
   };
   const renderStep = (benefit, i) => {
       const description = benefit?.description || undefined;
-      return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-[46px]", children: [benefit?.icon ? (jsx(Img, { className: "h-[70px] w-[70px] min-w-[70px] min-h-[70px] mr-5", image: benefit.icon, width: "70", height: "70" })) : null, jsxs("div", { children: [benefit?.label ? jsx("h3", { className: "font-medium text-xl m-0", children: benefit.label }) : null, renderDescription(description)] })] }, String(i)));
+      return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-[46px]", children: [benefit?.icon ? (jsx(Img, { className: "h-[70px] w-[70px] min-w-[70px] min-h-[70px] mr-5", image: benefit.icon, width: "70", height: "70" })) : null, jsxs("div", { children: [benefit?.label ? jsx("h3", { className: "font-medium text-xl-light m-0", children: benefit.label }) : null, renderDescription(description)] })] }, String(i)));
   };
   const renderDescription = (description) => {
       const benefitType = description ? description?.benefitType : null;
@@ -1038,8 +1051,8 @@
   };
 
   const Bonus = JSX((props) => {
-      const { className = '', title, description, bonusItems, anchor = null } = props;
-      return (jsx("section", { className: `font-sans bg-white p-[50px] pb-9 ${className}`, id: anchor, children: jsxs("div", { className: "container", children: [title ? jsx(Heading, { headingType: "h3", className: "text-center", title: title }) : null, description ? (jsx("div", { className: "text-md font-light text-center mt-[10px]", children: description })) : null, jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems
+      const { className = '', title, description, bonusItems, ...rest } = props;
+      return (jsx(BlockWrapper, { className: `font-sans bg-white p-[50px] pb-9 ${className}`, ...rest, children: jsxs("div", { className: "container", children: [title ? jsx(Heading, { headingType: "h3", className: "text-center", title: title }) : null, description ? (jsx("div", { className: "text-md font-light text-center mt-[10px]", children: description })) : null, jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems
                           ? bonusItems.map((_, i) => {
                               return (jsx("div", { className: "flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-[14px] mx-[7px] even:mr-0 odd:ml-0 last:odd:mx-0", children: jsxs("div", { className: "flex justify-between w-full", children: [jsxs("div", { className: "mr-4", children: [jsx("div", { className: "text-title-sm", children: _.title }), jsx("div", { className: "text-md font-light mt-[14px] max-w-[488px]", children: _.description })] }), _.bonusCount ? (jsxs("div", { className: "relative -bottom-3 h-auto flex items-end mt-14 shrink-0", children: [jsx("span", { className: "font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7", children: _.bonusCount }), jsx("span", { className: "text-[44px] bg-clip-text text-transparent bg-green-to-yellow", children: _.bonusName })] })) : null] }) }, String(i)));
                           })
@@ -1059,8 +1072,8 @@
       }
   }
 
-  const BonusBenefitsBlock = JSX(({ className = '', title, subtitle, bonusBenefits, anchor = null }) => {
-      return (jsxs("section", { className: `font-sans text-primary-text bg-white p-50 flex flex-col text-center ${className}`, id: anchor, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-[10px]", title: title }) : null, subtitle ? jsx("span", { className: "text-md font-normal", children: subtitle }) : null, bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${getElementsColsValue(className)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] }));
+  const BonusBenefitsBlock = JSX(({ className = '', title, subtitle, bonusBenefits, ...rest }) => {
+      return (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-50 flex flex-col text-center ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-[10px]", title: title }) : null, subtitle ? jsx("span", { className: "text-md font-normal", children: subtitle }) : null, bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${getElementsColsValue(className)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] }));
   });
   const renderBonusBenefit = (bonusBenefit, i) => {
       return (jsxs("div", { className: "flex flex-col items-center max-w-[292px]", children: [bonusBenefit?.icon ? (jsx(Img, { className: "h-[180px] w-[160px] min-w-[160px] min-h-[160px]", image: bonusBenefit.icon, width: "160", height: "180" })) : null, jsx("div", { children: bonusBenefit?.label ? jsx("span", { className: "title-2xs m-0", children: bonusBenefit.label }) : null })] }, String(i)));
@@ -1372,7 +1385,7 @@
       return (jsx("section", { className: `box-border relative flex shrink-0 basis-full ${className}`, role: "listitem", children: jsx("div", { className: "box-border p-9 w-full", children: jsx(EmbeddedBlock, { context: context, ...blockCalcTabs, className: "flex justify-between" }) }) }, String(i)));
   };
 
-  const Calculator = JSX(({ className = '', context, calcTabs = [], anchor = null }) => {
+  const Calculator = JSX(({ className = '', context, calcTabs = [], ...rest }) => {
       const tabsNav = calcTabs.map((_) => _.nav || {});
       const blockCalcTabs = calcTabs.map(({ calculatorBlock }) => calculatorBlock || {});
       const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
@@ -1382,7 +1395,7 @@
       const isGalleryScrollAvailable = calcTabs?.length > 3;
       const showNextButton = isGalleryScrollAvailable && calcTabs?.length > tabsShift + 3;
       const showPrevButton = tabsShift > 0;
-      return (jsxs("section", { id: anchor, className: `box-border overflow-hidden relative font-sans w-100 bg-white text-primary-text ${className}`, children: [jsxs("div", { children: [tabsNav.length > 1
+      return (jsxs(BlockWrapper, { context: context, className: `box-border overflow-hidden relative font-sans w-100 bg-white text-primary-text ${className}`, ...rest, children: [jsxs("div", { children: [tabsNav.length > 1
                           ? renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex })
                           : null, renderArrows({
                           handler: [handlePrevClick, handleNextClick],
@@ -1425,9 +1438,9 @@
   const BLUR_BLOCK_CLASSES$1 = 'absolute top-0 bottom-0 w-[84px]';
   const CARD_FULL_VIEW_COUNT$1 = 3;
   const CARD_SHIFT$1 = 430;
-  const Catalog = JSX(({ context, cards = [], className = '', title, description, anchor = null }) => {
+  const Catalog = JSX(({ context, cards = [], className = '', title, description, ...rest }) => {
       const [activeCardIndex, setActiveCardIndex] = context.useState(0);
-      return (jsxs("section", { className: `bg-white relative font-sans p-9 overflow-hidden text-center ${className}`, id: anchor, children: [title ? jsx(Heading, { headingType: "h2", className: "mb-6", title: title }) : null, description ? jsx(Description, { className: "mb-6", description: description }) : null, jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT$1}px)` }, role: "list", children: cards?.length ? cards.map(renderCatalogCard(context)) : null }), renderNavButtons$1({
+      return (jsxs(BlockWrapper, { context: context, className: `bg-white relative font-sans p-9 overflow-hidden text-center ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h2", className: "mb-6", title: title }) : null, description ? jsx(Description, { className: "mb-6", description: description }) : null, jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT$1}px)` }, role: "list", children: cards?.length ? cards.map(renderCatalogCard(context)) : null }), renderNavButtons$1({
                   cardsCount: cards.length,
                   activeCardIndex,
                   setActiveCardIndex,
@@ -1476,7 +1489,7 @@
       const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES$1} ${isFillGradient && isFirstRow ? 'border-t' : ''} ${!isLastRow ? 'border-solid' : 'border-b-0'}`;
       return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { className: cellClasses, children: cell.map((item, i) => renderCellInner$1(item, i, isFillGradient)) }) }));
   });
-  const labelStyle = (isFillGradient = false) => `text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`;
+  const labelStyle = (isFillGradient = false) => `text-xl-light font-medium m-0 ${isFillGradient ? 'text-white' : ''}`;
   const descriptionStyle = (isFillGradient = false) => `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`;
   const renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label ? jsx("h4", { className: labelStyle(isFillGradient), children: label }) : null, description ? jsx("div", { className: descriptionStyle(isFillGradient), children: description }) : null] }, String(i)));
 
@@ -1528,10 +1541,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, anchor = null, }) => {
+  const ComparisonTable = JSX(({ className, context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, ...rest }) => {
       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 || ''}`, 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
+      return (jsxs(BlockWrapper, { context: context, className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, ...rest, 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] }));
   });
@@ -1766,13 +1779,13 @@
       address: 'Москва, ул.Ленина д.28',
       distance: '6км',
   };
-  const ExchangeRateTile = JSX(({ className = '', context, title = 'Курсы обмена валют', anchor = null }) => {
+  const ExchangeRateTile = JSX(({ className = '', context, title = 'Курсы обмена валют', ...rest }) => {
       const currencyRates = useExchangeRates(context.useAsyncData);
       const currencyRatesBuy = currencyRates.filter((_) => _.buy);
       currencyRatesBuy.unshift({ code: Currency.RUB });
       const currencyRatesSell = currencyRates.filter((_) => _.sell);
       currencyRatesSell.push({ code: Currency.RUB });
-      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: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[31px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", context: context, currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell })) : null] }) }) }));
+      return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className}`, ...rest, 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: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[31px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", context: context, currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell })) : null] }) }) }));
   });
 
   const LOGO_PATHS = [
@@ -1822,9 +1835,9 @@
   const renderText = (type, text = '') => {
       switch (type) {
           case 'tel':
-              return (jsx("a", { className: "font-sans text-xl text-primary-text no-underline", href: `tel:${formatTel(text)}`, children: text }));
+              return (jsx("a", { className: "font-sans text-xl-light text-primary-text no-underline", href: `tel:${formatTel(text)}`, children: text }));
           case 'email':
-              return (jsx("a", { className: "font-sans text-xl text-primary-text no-underline", href: `mailto:${text}`, children: text }));
+              return (jsx("a", { className: "font-sans text-xl-light text-primary-text no-underline", href: `mailto:${text}`, children: text }));
           default:
               return jsx("span", { children: text });
       }
@@ -1923,12 +1936,12 @@
   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-[204px]';
-  const Footer = JSX(({ className, documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, context, anchor = null, }) => {
-      return (jsxs("footer", { className: `p-9 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-[98px]", links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
+  const Footer = JSX(({ className, documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, context, ...rest }) => {
+      return (jsxs(BlockWrapper, { Tag: "footer", context: context, className: `p-9 bg-white ${className || ''}`, ...rest, 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-[98px]", links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
   });
 
-  const GracePeriod = JSX(({ className = '', title, description, calendar, anchor = null }) => {
-      return (jsxs("section", { className: `font-sans bg-white p-[50px] ${className}`, id: anchor, children: [jsx(Heading, { headingType: "h3", className: "text-center", title: title }), jsx("div", { className: "font-light text-base-md text-center mt-3", children: description }), calendar ? renderCalendar(calendar) : null] }));
+  const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => {
+      return (jsxs(BlockWrapper, { className: `font-sans bg-white p-[50px] ${className}`, ...rest, children: [jsx(Heading, { headingType: "h3", className: "text-center", title: title }), jsx("div", { className: "font-light text-base-md text-center mt-3", children: description }), calendar ? renderCalendar(calendar) : null] }));
   });
   const renderCalendar = (calendar) => {
       const colCount = calendar.reduce((accumulator, currentValue) => currentValue?.month?.length ? accumulator + currentValue.month.length : accumulator, 0) || 1;
@@ -1944,18 +1957,8 @@
   const renderMonthNames = (item, colSize) => item.month.map((_, i) => (jsx("div", { style: { flexBasis: `${colSize}%` }, children: _.text }, `monthName-${i}`)));
   const renderMonthImages = (item) => item.month.map((_) => _.image?.src ? (jsx("div", { className: "h-[207px] border-r-[1px] pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0", children: jsx(Img, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
 
-  const GroupBlockTabs = JSX((props) => {
-      const { tabs, currentTag, onTabClick, className = '', isShowCounter } = props;
-      return (jsx("div", { className: `mb-2 box-border flex gap-x-1 ${className}`, role: "tablist", children: tabs?.map(renderTab$1(onTabClick, isShowCounter, currentTag)) }));
-  });
-  const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-m-sm';
-  const renderTab$1 = (onTabClick, isShowCounter, currentTag) => (tab, i) => {
-      const isActive = currentTag === tab.tag;
-      const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
-      const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
-      const counterBlockStyle = `${badgeStyle} 
-      ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-light text-secondary-text'}`;
-      return (jsx("div", { className: `flex h-full w-full h-12 flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`, role: "tab", onClick: () => onTabClick(tab.tag), "aria-selected": String(isActive), tag: tab?.tag, children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? jsx("h3", { className: tabText, children: tab?.title }) : null, isShowCounter ? (jsx("div", { className: `flex items-center justify-center ml-8 text-s-bold ${counterBlockStyle}`, children: jsx("span", { children: tab.count }) })) : null] }) }, String(i)));
+  const filterBlocksByTag = (blocks, tag) => {
+      return tag ? blocks.filter((block) => block?.tags?.includes(tag)) : blocks;
   };
 
   const EmbeddableGroupBlocks = {
@@ -1976,11 +1979,21 @@
       return (jsx(EmbeddedBlock, { context: context, ...block, className: classNameBlock }, `block_${i}`));
   };
 
-  const filterBlocksByTag = (blocks, tag) => {
-      return tag ? blocks.filter((block) => block?.tags?.includes(tag)) : blocks;
+  const GroupBlockTabs = JSX((props) => {
+      const { tabs, currentTag, onTabClick, className = '', isShowCounter } = props;
+      return (jsx("div", { className: `mb-2 box-border flex gap-x-1 ${className}`, role: "tablist", children: tabs?.map(renderTab$1(onTabClick, isShowCounter, currentTag)) }));
+  });
+  const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-m-sm';
+  const renderTab$1 = (onTabClick, isShowCounter, currentTag) => (tab, i) => {
+      const isActive = currentTag === tab.tag;
+      const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
+      const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
+      const counterBlockStyle = `${badgeStyle} 
+      ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-light text-secondary-text'}`;
+      return (jsx("div", { className: `flex h-full w-full h-12 flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`, role: "tab", onClick: () => onTabClick(tab.tag), "aria-selected": String(isActive), tag: tab?.tag, children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? jsx("h3", { className: tabText, children: tab?.title }) : null, isShowCounter ? (jsx("div", { className: `flex items-center justify-center ml-8 text-s-bold ${counterBlockStyle}`, children: jsx("span", { children: tab.count }) })) : null] }) }, String(i)));
   };
 
-  const GroupBlock = JSX(({ className = '', tabs, context, anchor = null, groupBlocks = [], isShowCounter }) => {
+  const GroupBlock = JSX(({ className = '', tabs, context, groupBlocks = [], isShowCounter, ...rest }) => {
       const [currentTag, setCurrentTag] = context.useState(tabs?.[0]?.tag);
       const filteredBlocks = filterBlocksByTag(groupBlocks, currentTag);
       const tabsNewMap = tabs?.map((tab) => {
@@ -1989,7 +2002,7 @@
               : groupBlocks.length;
           return { ...tab, count };
       });
-      return (jsxs("section", { id: anchor, className: `box-border gap-1 ${className}`, children: [tabsNewMap?.length ? (jsx(GroupBlockTabs, { currentTag: currentTag, onTabClick: setCurrentTag, tabs: tabsNewMap, isShowCounter: isShowCounter })) : null, groupBlocks.length ? (jsx(GroupBlocksItem, { context: context, groupBlocks: filteredBlocks })) : null] }));
+      return (jsxs(BlockWrapper, { context: context, className: `box-border gap-1 ${className}`, ...rest, children: [tabsNewMap?.length ? (jsx(GroupBlockTabs, { currentTag: currentTag, onTabClick: setCurrentTag, tabs: tabsNewMap, isShowCounter: isShowCounter })) : null, groupBlocks.length ? (jsx(GroupBlocksItem, { context: context, groupBlocks: filteredBlocks })) : null] }));
   });
 
   const checkIsHrefSameOrigin = (href, router) => getOrigin(href) === getOrigin(router.href);
@@ -2108,18 +2121,18 @@
       'bg-white': 'bg-main-divider',
       transparent: 'bg-main-divider opacity-30',
   };
-  const Header = JSX(({ className = '', defaultLocation = 'Москва', showSubMenu = true, bgColor = 'bg-white', context, topItems, anchor = null, logo, }) => {
+  const Header = JSX(({ className = '', defaultLocation = 'Москва', showSubMenu = true, bgColor = 'bg-white', context, topItems, logo, ...rest }) => {
       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 topMenu = mergedItems.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ...useLink({ router, handlerDecorator }, _), "aria-label": _.text, bgColor: bgColor }, String(i))));
-      return (jsx("header", { className: `pt-6 pb-8 px-20 ${bgColor} ${className}`, id: anchor, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { context: context, className: "ml-auto", defaultLocation: defaultLocation, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-[1px] ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { context: context, subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
+      return (jsx(BlockWrapper, { Tag: "header", context: context, className: `pt-6 pb-8 px-20 ${bgColor} ${className}`, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { context: context, className: "ml-auto", defaultLocation: defaultLocation, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-[1px] ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { context: context, subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
   });
 
-  const Insurance = JSX(({ className = '', title, description, image, benefits, sum, monthLimit }) => {
-      return (jsxs("section", { className: `px-[100px] py-[50px] bg-white text-primary-text font-sans ${className}`, children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "text-center" }) : null, description ? jsx("div", { className: "text-center text-md mt-3", children: description }) : null, jsx("div", { children: jsxs("div", { className: "mt-5 mx-auto flex justify-center gap-[122px] mt-[30px]", children: [image?.src ? jsx(Img, { image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] }) })] }));
+  const Insurance = JSX(({ className = '', title, description, image, benefits, sum, monthLimit, ...rest }) => {
+      return (jsxs(BlockWrapper, { className: `px-[100px] py-[50px] bg-white text-primary-text font-sans ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "text-center" }) : null, description ? jsx("div", { className: "text-center text-md mt-3", children: description }) : null, jsx("div", { children: jsxs("div", { className: "mt-5 mx-auto flex justify-center gap-[122px] mt-[30px]", children: [image?.src ? jsx(Img, { image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] }) })] }));
   });
   function renderBenefit(benefit, i) {
       return (jsxs("div", { className: "flex items-center gap-4", children: [benefit?.icon ? (jsx(Img, { className: "w-12 h-12 min-w-12 p-3 rounded-full bg-secondary-light", image: benefit.icon, asSVG: true })) : null, jsxs("div", { children: [benefit?.label ? jsx("div", { className: "text-title-2xs font-normal", children: benefit.label }) : null, benefit?.description ? (jsx("div", { className: "mt-0.5 font-light text-secondary-text font-light", children: benefit.description })) : null] })] }, String(i)));
@@ -2134,7 +2147,7 @@
       return (jsxs("div", { className: `flex justify-between items-center gap-2 w-full ${widthStyle}`, children: [jsx("span", { className: "text-secondary-text text-base", children: title }), jsxs("span", { className: "text-primary-main text-title-2xs", children: [addSpacesBetweenNumbers(sum), " \u20BD"] })] }));
   }
 
-  const InsuranceAmountBlockInner = JSX(({ className = '', context, cards = [], anchor = null }) => {
+  const InsuranceAmountBlockInner = JSX(({ className = '', context, cards = [] }) => {
       const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
       const [tabsShift, setTabsShift] = context.useState(0);
       const handleNextClick = () => setTabsShift(tabsShift + 1);
@@ -2144,7 +2157,7 @@
       const showNextButton = isGalleryScrollAvailable && galleryLength > tabsShift + 2;
       const isLastShift = galleryLength === tabsShift + 2;
       const showPrevButton = tabsShift > 0;
-      return (jsx("section", { id: anchor, className: `min-w-full ${className}`, children: jsxs("div", { className: "relative mt-7 overflow-hidden", children: [galleryLength
+      return (jsx("section", { className: `min-w-full ${className}`, children: jsxs("div", { className: "relative mt-7 overflow-hidden", children: [galleryLength
                       ? renderGallery({
                           tabsShift,
                           cards,
@@ -2182,9 +2195,9 @@
       return isActive ? (jsx(Img, { className: `h-[24px] w-[24px] min-w-[24px] min-h-[24px] absolute right-4 top-4`, image: "DoneIcon", width: "24", height: "24" })) : null;
   }
 
-  const InsuranceAmountBlock = JSX(({ className = '', context, title, insuranceTabs = [], button, anchor = null }) => {
+  const InsuranceAmountBlock = JSX(({ className = '', context, title, insuranceTabs = [], button, ...rest }) => {
       const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
-      return (jsxs("section", { id: anchor, className: `box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white ${className}`, children: [title ? jsx(Heading, { className: "text-center", title: title, headingType: "h3" }) : null, jsx("div", { className: "p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]", children: insuranceTabs.map((item, i) => renderNavButton$1({
+      return (jsxs(BlockWrapper, { context: context, className: `box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white ${className}`, ...rest, children: [title ? jsx(Heading, { className: "text-center", title: title, headingType: "h3" }) : null, jsx("div", { className: "p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]", children: insuranceTabs.map((item, i) => renderNavButton$1({
                       title: item?.title,
                       i,
                       activeSlideIndex,
@@ -2213,12 +2226,12 @@
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
   };
-  const MobileAppTile = JSX(({ className = '', context, title = 'Мобильное приложение', qr, buttons, anchor = null, version = 'primary', items, image, }) => {
+  const MobileAppTile = JSX(({ className = '', context, title = 'Мобильное приложение', qr, buttons, version = 'primary', items, image, ...rest }) => {
       const textColorClass = version === 'primary' ? 'text-primary-text' : '';
-      return (jsxs("section", { className: `flex justify-between font-sans p-9 box-border relative
+      return (jsxs(BlockWrapper, { context: context, className: `flex justify-between font-sans p-9 box-border relative
         ${getTileRightPadding(className)} ${getTileMinHeight(className)}
         ${mobileAppStyleMap[version]}
-        ${className}`, id: anchor, children: [jsx(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: "h3", title: title, className: `whitespace-pre-wrap max-w-[509px] mb-6
+        ${className}`, ...rest, children: [jsx(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: "h3", title: title, className: `whitespace-pre-wrap max-w-[509px] mb-6
                   ${textColorClass}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-[30px] gap-4" })) : null, children: jsxs("div", { className: "flex flex-1 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: "122", height: "122", className: "w-[122px] h-[122px] min-w-[122px] min-h-[122px] bg-secondary-light mr-[23px] rounded-md" }) })), renderList$1(version, items)] }) }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(Img, { image: image }) })) : null] }));
   });
   const renderList$1 = (version, items) => {
@@ -2227,18 +2240,18 @@
 
   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, anchor = null }) => {
+  const Navigation = JSX(({ className, context, title, buttons, ...rest }) => {
       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 || ''}`, 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
+      return (jsxs(BlockWrapper, { context: context, className: `font-sans text-primary-text rounded-[40px] flex items-center justify-between ${className || ''}`, ...rest, children: [jsx("h2", { className: "font-medium text-xl-light 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-m-md';
   const LINK_CLASSES = 'flex-1 flex items-center justify-center cursor-pointer';
-  const NavigatorTabItem = JSX(({ className = '', text, active, children, onClick, href, target = '_self' }) => (jsx("a", { className: getLinkClasses(className, active), target: target, href: href, onClick: onClick, children: jsx("span", { className: getTextClasses(active), children: text || children }) })));
+  const NavigatorTabItem = JSX(({ className = '', text, active, onClick, href, target = '_self', children }) => (jsx("a", { className: getLinkClasses(className, active), target: target, href: href, onClick: onClick, children: jsx("span", { className: getTextClasses(active), children: text || children }) })));
   const getLinkClasses = (className, active) => {
       const classes = active ? 'bg-primary-main' : 'group bg-white';
       return `${classes} ${LINK_CLASSES} ${className}`;
@@ -2248,16 +2261,15 @@
       return `${classes} ${TEXT_CLASSES}`;
   };
 
-  const NavigatorTabs = JSX(({ className = '', navigatorTabs, context, anchor = null }) => {
-      const href = globalThis.location?.href; // TODO: remove globalThis, use href from router
-      return (jsx("section", { className: `sticky top-0 z-20 box-border flex gap-x-1 h-14 ${className}`, id: anchor, children: navigatorTabs ? navigatorTabs.map(renderTab(context, href)) : null }));
+  const NavigatorTabs = JSX(({ className = '', navigatorTabs, context, ...rest }) => {
+      return (jsx(BlockWrapper, { context: context, className: `sticky top-0 z-20 box-border flex gap-x-1 h-14 ${className}`, ...rest, children: navigatorTabs ? navigatorTabs.map(renderTab(context)) : null }));
   });
-  const renderTab = (context, href) => (tab, i) => {
-      const { useRouter, handlerDecorator } = context;
+  const renderTab = (context) => (tab, i) => {
+      const { handlerDecorator, useRouter } = context;
       const router = useRouter();
-      const hash = getHash(href);
+      const hash = getHash(router.href);
       const active = hash ? tab.href === hash : i === 0;
-      return (jsx(NavigatorTabItem, { active: active, ...useLink({ router, handlerDecorator }, tab) }, tab.href));
+      return (jsx(NavigatorTabItem, { active: active, ...useLink({ router, handlerDecorator }, tab) }, tab.text));
   };
 
   const foldableBlockClassNames = 'transition-all duration-300 max-h-0 overflow-hidden';
@@ -2305,13 +2317,13 @@
       return jsx("div", { className: "box-border", children: children });
   });
 
-  const OtherProducts = JSX(({ blockItems, colorPalette, context, className = '' }) => {
-      return (jsx("section", { className: `font-sans text-primary-text ${className}`, children: blockItems?.length ? (jsx("div", { className: "box-border1", children: blockItems.map((item, i) => (jsx(OtherProductsItem, { ...item, dataTheme: colorPalette, context: context }, `BlockItem${i}`))) })) : null }));
+  const OtherProducts = JSX(({ blockItems, colorPalette, context, className = '', ...rest }) => {
+      return (jsx(BlockWrapper, { context: context, className: `font-sans text-primary-text ${className}`, ...rest, children: blockItems?.length ? (jsx("div", { className: "box-border1", children: blockItems.map((item, i) => (jsx(OtherProductsItem, { ...item, dataTheme: colorPalette, context: context }, `BlockItem${i}`))) })) : null }));
   });
 
   const GOLDEN_RATIO = 1.618;
-  const Placeholder = JSX(({ className, context, title, description = 'Блок в разработке...', anchor = null }) => {
-      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, children: [description ? (jsx(Description, { className: "mt-4 max-w-[600px]", description: description })) : null, jsx("figure", { className: "m-0 min-w-[600px]", children: renderShimmer() })] }) }));
+  const Placeholder = JSX(({ className, context, title, description = 'Блок в разработке...', ...rest }) => {
+      return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, 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(_))
@@ -2331,12 +2343,12 @@
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
   };
-  const ProductGallery = JSX(({ className = '', context, slides = [], version = 'primary', anchor = null }) => {
+  const ProductGallery = JSX(({ className = '', context, slides = [], version = 'primary', ...rest }) => {
       const galleryNav = slides.map((s) => s.nav);
       const galleryBlocks = slides.map((s) => s.productBlock);
       const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
-      return (jsxs("section", { id: anchor, className: `box-border pt-[50px] overflow-hidden relative font-sans w-100 ${className}
-        ${productGalleryStyleMap[version]}`, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border", children: galleryNav.map((slide, i) => renderNavButton({
+      return (jsxs(BlockWrapper, { context: context, className: `box-border pt-[50px] overflow-hidden relative font-sans w-100 ${className}
+        ${productGalleryStyleMap[version]}`, ...rest, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border", children: galleryNav.map((slide, i) => renderNavButton({
                       slide,
                       i,
                       activeSlideIndex,
@@ -2371,8 +2383,8 @@
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
   };
-  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 })] }) }) }));
+  const PromoTile = JSX(({ className = '', context, title = 'Акции и спецпредложения', date, description, buttons = [], version = 'primary', ...rest }) => {
+      return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${promoTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, 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);
@@ -2391,11 +2403,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, anchor = null }) => {
+  const Recommendation = JSX(({ context, recommendations = [], className = '', title, version, ...rest }) => {
       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-white/50' : 'border-main-stroke';
-      return (jsxs("section", { className: `relative font-sans p-9 overflow-hidden text-center ${blockClassName} ${className}`, id: anchor, children: [title ? jsx(Heading, { headingType: "h2", className: "mb-6", title: title }) : null, jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }, role: "list", children: recommendations?.length
+      return (jsxs(BlockWrapper, { context: context, className: `relative font-sans p-9 overflow-hidden text-center ${blockClassName} ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h2", className: "mb-6", title: title }) : null, jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }, role: "list", children: recommendations?.length
                       ? recommendations.map(renderRecommendationCard({ context, version, className: cardClassName }))
                       : null }), renderNavButtons({
                   cardsCount: recommendations.length,
@@ -2420,6 +2432,8 @@
           }) }));
   };
 
+  const checkIsIconRenderable = (icon) => Boolean(icon?.icon || icon?.src);
+
   const STEPS_BLOCK_STYLE_MAPS = {
       primary: {
           background: 'bg-white',
@@ -2438,25 +2452,23 @@
   };
   const getStyleMap = (version) => STEPS_BLOCK_STYLE_MAPS[version];
 
-  const checkIsIconRenderable = (icon) => Boolean(icon?.icon || icon?.src);
-
-  const StepsBlock = JSX(({ className = '', title, showLines = true, steps = [], button, anchor = null, version = 'primary', }) => {
+  const StepsBlock = JSX(({ className = '', title, showLines = true, steps = [], button, version = 'primary', ...rest }) => {
       const styleMap = getStyleMap(version);
       const shortGaps = steps.length > 3;
-      return (jsxs("section", { className: [
+      return (jsxs(BlockWrapper, { className: [
               'box-border font-sans text-primary-text bg-white',
               shortGaps ? 'px-20' : 'px-[70px]',
               'py-[50px] flex flex-col items-center',
               styleMap.background,
               styleMap.title,
               className,
-          ].join(' '), id: anchor, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center", title: title }), steps?.length ? (jsxs("div", { className: `box-border ${title ? 'mt-9' : ''}`, children: [jsx("div", { className: "flex items-center px-[88px]", children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}` }))(steps.map(renderStepIcon(styleMap))) }), jsx("div", { className: `flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepTitle(styleMap, Boolean(button?.text))) })] })) : null, button?.text ? (jsx(Button, { className: "mt-8 w-full max-w-[240px]", version: "primary", ...button })) : null] }));
+          ].join(' '), ...rest, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center", title: title }), steps?.length ? (jsxs("div", { className: `box-border ${title ? 'mt-9' : ''}`, children: [jsx("div", { className: "flex items-center px-[88px]", children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}` }))(steps.map(renderStepIcon(styleMap))) }), jsx("div", { className: `flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepTitle(styleMap, Boolean(button?.text))) })] })) : null, button?.text ? (jsx(Button, { className: "mt-8 w-full max-w-[240px]", version: "primary", ...button })) : null] }));
   });
   const renderStepIcon = (styleMap) => ({ icon }, 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] rounded-full p-[26px] box-border z-10 ${styleMap.iconBackground}`, children: checkIsIconRenderable(icon) ? (jsx(Img, { image: icon, width: "48", height: "48", asSVG: true })) : (jsx("span", { className: `font-normal text-title-sm ${styleMap.title}`, children: i + 1 })) }) }, String(i)));
   };
   const renderStepTitle = (styleMap, isMainButton) => (step, i) => {
-      return (jsxs("div", { className: "flex flex-col items-center justify-between text-center relative w-[276px] whitespace-pre-line overflow-hidden", children: [jsxs("div", { children: [step.label ? jsx("div", { className: "font-normal text-xl m-0 mt-4", children: step.label }) : null, step.description ? (jsx("div", { className: `font-light text-base ${styleMap.description} ${step.label ? 'mt-2' : 'mt-4'}`, children: step.description })) : null] }), step?.button?.text && !isMainButton ? (jsx(Button, { className: "box-border mt-8 py-3 h-12 w-full max-w-[240px]", version: "primary", href: step?.button?.href, children: step.button.text })) : null] }, String(i)));
+      return (jsxs("div", { className: "flex flex-col items-center justify-between text-center relative w-[276px] whitespace-pre-line overflow-hidden", children: [jsxs("div", { children: [step.label ? jsx("div", { className: "font-normal text-xl-light m-0 mt-4", children: step.label }) : null, step.description ? (jsx("div", { className: `font-light text-base ${styleMap.description} ${step.label ? 'mt-2' : 'mt-4'}`, children: step.description })) : null] }), step?.button?.text && !isMainButton ? (jsx(Button, { className: "box-border mt-8 py-3 h-12 w-full max-w-[240px]", version: "primary", href: step?.button?.href, children: step.button.text })) : null] }, String(i)));
   };
 
   const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
@@ -2478,7 +2490,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(Img, { className: "mr-[14px] max-w-6 max-h-6", image: header.icon, width: "24px", height: "24px", asSVG: true })) : null, header?.title] }) }), data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH, version: "tariff", children: data.map((cell, i) => (jsx(TariffsTableCell, { cell: cell, isLastRow: isLastRow }, String(i)))) })) : null] }));
   });
 
-  const TariffsTable = JSX(({ className, context, title, description, rowHeaders, columns, anchor = null, hiddenRowsNum = 0, }) => {
+  const TariffsTable = JSX(({ className, context, title, description, rowHeaders, columns, hiddenRowsNum = 0, ...rest }) => {
       const [activeCardIndex, setActiveCardIndex] = context.useState(0);
       const colData = getColData(columns);
       const rowData = getRowData(rowHeaders, colData);
@@ -2489,7 +2501,7 @@
           setActiveCardIndex,
       });
       const foldableBlocks = rowData?.map((row, i, { length }) => (jsx(TariffsTableRow, { row: row, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex }, String(i))));
-      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 ? (jsx(Foldable, { blocks: foldableBlocks, hiddenBlocksNum: hiddenRowsNum, context: context, render: (children) => (jsx(Wrapper, { tableArrowScrollControlProps: tableArrowScrollControlProps, children: children })), foldButtonLabel: "\u0420\u0430\u0437\u0432\u0435\u0440\u043D\u0443\u0442\u044C" })) : null] }));
+      return (jsxs(BlockWrapper, { context: context, className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, ...rest, 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 ? (jsx(Foldable, { blocks: foldableBlocks, hiddenBlocksNum: hiddenRowsNum, context: context, render: (children) => (jsx(Wrapper, { tableArrowScrollControlProps: tableArrowScrollControlProps, children: children })), foldButtonLabel: "\u0420\u0430\u0437\u0432\u0435\u0440\u043D\u0443\u0442\u044C" })) : null] }));
   });
   const getColData = (columns) => columns?.map(({ data }) => data) || [];
   const getRowData = (rowHeaders, colData) => rowHeaders?.map((header, i) => ({
@@ -2537,22 +2549,6 @@
       BonusBenefitsBlock,
   };
 
-  const changeHashOnScroll = (router, blocks) => {
-      blocks?.forEach((block) => {
-          const currentHash = globalThis.location?.hash; // TODO: remove globalThis, use href from router
-          const anchorHash = `#${block?.id}`;
-          if (currentHash === anchorHash) {
-              return;
-          }
-          const position = block?.getBoundingClientRect();
-          if (position && position.top > 0 && position.top < 150) {
-              router.replace(`#${block?.id}`);
-          }
-      });
-  };
-
-  const isSSR = () => !(typeof window !== 'undefined' && window.document && window.document.createElement);
-
   const LikeButton = JSX(({ className, onClick, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 w-[36px] bg-inherit cursor-pointer ${className || ''}`, onClick: onClick, "aria-label": ariaLabel, children: renderLikeIcon() })));
   const renderLikeIcon = () => {
       const params = {
@@ -2564,22 +2560,14 @@
       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, anchor = null }) => {
+  const LikeControl = JSX(({ className, context, ...rest }) => {
       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 || ''}`, 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 })] }));
+      return (jsxs(BlockWrapper, { Tag: "div", context: context, className: `border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${className || ''}`, ...rest, 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 isClient = !isSSR();
   const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
   const ContentPage = JSX(({ className = '', context, blocksRegistry, data: { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' }, blockDecorator = defaultBlockDecorator, }) => {
       const { header } = slots;
-      const router = context.useRouter();
-      // listener is for NavigatorTabs
-      isClient &&
-          globalThis.addEventListener('load', () => {
-              const sectionsWithAnchors = globalThis.document.querySelectorAll('section[id]');
-              globalThis.document.addEventListener('scroll', () => changeHashOnScroll(router, sectionsWithAnchors));
-          });
       return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [header?.blocks?.length ? (jsx("div", { className: `${style2className(header?.style)}`, children: header.blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, blocks?.length ? (jsx("div", { className: "container grid grid-cols-12 gap-1", children: blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, likeControl ? (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto", context: context }, "LikeControl") })) : null] }));
   });
   function renderBlock({ block, blockDecorator, blocksRegistry, context }, i) {