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

package/bundle/bundle.umd.js

@@ -188,18 +188,18 @@
 
   const HEADING_STYLE_MAP = {
       h1: 'text-title-xl tracking-[-0.3px]',
-      h2: 'text-title-lg',
+      h2: 'text-title',
       h3: 'text-title-sm',
       h4: 'text-title-xs',
       h5: 'text-title-2xs tracking-[0.2px]',
       h6: 'text-title-2xs tracking-[0.2px]',
   };
   const Heading = JSX((props) => {
-      const { className = '', headingType, title } = props;
+      const { className = '', headingType, title, as } = props;
       if (!headingType) {
           return;
       }
-      const Tag = headingType;
+      const Tag = as || headingType;
       return (jsx(Tag, { className: `font-sans m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`, children: title }));
   });
 
@@ -485,10 +485,10 @@
       return index !== -1 ? href.substring(index + 1) : '';
   };
 
-  const LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full box-border ${className}`, iconClassName: "mr-2.5 min-w-6 min-h-6 text-primary-text", textClassName: "self-center", suffixClassName: "text-secondary-text group-hover:text-primary-main", doc: doc, icon: icon })));
+  const LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full box-border ${className}`, iconClassName: "mr-3.5 min-w-6 min-h-6 text-primary-text", textClassName: "self-center font-light", suffixClassName: "text-secondary-text group-hover:text-primary-main", doc: doc, icon: icon })));
 
   const LinkDocsList = JSX(({ className, documents, columnsMode = 'double', icon }) => {
-      return documents?.length ? (jsx("div", { className: className, role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { className: "group flex text-sm align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main", doc: doc, icon: icon }) }, String(i)))) })) : null;
+      return documents?.length ? (jsx("div", { className: className, role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { className: "group flex align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main", doc: doc, icon: icon }) }, String(i)))) })) : null;
   });
 
   const titleAlignStyleMap = {
@@ -572,7 +572,7 @@
       return {
           ...link,
           href,
-          ariaLabel: link.text,
+          'aria-label': link.text,
           onClick: handlerDecorator((ev) => {
               const isLocalHref = href && !isURL(href);
               const isLocalTarget = !link.target || link.target === '_self';
@@ -631,7 +631,12 @@
       const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, rounded: rounded }));
       return disabled ? (jsx(DisabledButton, { ...props, children: buttonInner })) : (jsx(RegularButton, { ...props, children: buttonInner }));
   });
-  const RegularButton = JSX(({ className, ariaLabel, version = 'none', rounded, href, target, children, onClick, ...rest }) => (jsx("a", { className: `${buttonStyle} inline-block cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: href ? 'link' : 'button', ...rest, children: children })));
+  const RegularButton = JSX(({ className, ariaLabel, version = 'none', rounded, href, target, children, onClick, ...rest }) => {
+      // Pick Button props to prevent forwarding into HTML <a> tag leading to errors being printed in console.
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { aboveText, appendLeft, ...linkProps } = rest;
+      return (jsx("a", { className: `${buttonStyle} inline-block cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: href ? 'link' : 'button', ...linkProps, children: children }));
+  });
   const DisabledButton = JSX(({ className, children, ariaLabel, version = 'none', rounded }) => (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: "-1", className: `inline-block ${buttonStyle} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: children })));
 
   const ButtonSection = JSX(({ context, className = '', buttons }) => {
@@ -732,7 +737,7 @@
       secondary: 'text-primary-text',
   };
   function renderBackwardButton(text, version, className) {
-      return (jsxs("div", { className: `flex items-center ${className}`, children: [jsx(Button, { rounded: true, className: `w-12 h-12 min-h-12 max-h-12 flex items-center justify-center mr-3 ${backwardBgStyleMap[version]}`, children: jsx(Img, { className: `w-4 h-4 min-w-4 min-h-4 rounded-full box-border ${backwardIconStyleMap[version]}`, image: { icon: 'ArrowLeftIcon' }, color: "none", width: "24", height: "24", asSVG: true }) }), text ? jsx("span", { className: "text-m-md", children: text }) : null] }));
+      return (jsxs("div", { className: `flex items-center ${className}`, children: [jsx(Button, { rounded: true, className: `w-12 h-12 min-h-12 max-h-12 flex items-center justify-center mr-3 ${backwardBgStyleMap[version]}`, ariaLabel: text, children: jsx(Img, { className: `w-4 h-4 min-w-4 min-h-4 rounded-full box-border ${backwardIconStyleMap[version]}`, image: { icon: 'ArrowLeftIcon' }, color: "none", width: "24", height: "24", asSVG: true }) }), text ? jsx("span", { className: "text-m-md", children: text }) : null] }));
   }
 
   const productBlockStyleMap$1 = {
@@ -832,7 +837,7 @@
   };
   const Tile = JSX((props) => {
       const { context, title, description, items, children, buttons, image, className = '', version = 'primary', role, anchor = null, } = props;
-      return (jsx("section", { className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, role: role, id: anchor, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
+      return (jsx("section", { className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, role: role, id: anchor, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), as: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
               ${version === 'primary' ? 'text-primary-text' : ''}` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description && (jsx(Description, { className: "mt-4 max-w-[600px] text-title-new-sm font-light", description: description })), children, renderList$1(items, version)] }) }));
   });
   function renderList$1(items, version) {
@@ -895,30 +900,29 @@
   };
 
   const GalleryCardInner = JSX(({ title, description, image, items, button, version }) => {
-      const titleStyleClasses = getTitleStyle(version, description, items);
-      return (jsxs("div", { className: "h-full flex flex-col justify-between", children: [jsxs("div", { children: [image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: image }) })) : null, title ? renderCardTitle(title, titleStyleClasses) : null, description ? (jsx("div", { className: `font-normal text-sm ${title ? 'mt-2' : ''}`, children: description })) : null, items?.length ? renderItems(items, version) : null] }), button?.text ? renderButton$1(button) : null] }));
+      const titleStyleClasses = getTitleStyle(version);
+      return (jsxs("div", { className: "h-full flex flex-col justify-between text-center", children: [jsxs("div", { children: [image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: image }) })) : null, title ? renderCardTitle(title, titleStyleClasses) : null, description ? (jsx("div", { className: `font-light text-m-md-new ${title ? 'mt-2' : ''}`, children: description })) : null, items?.length ? renderItems(items, version) : null] }), button?.text ? renderButton$1(button) : null] }));
   });
   function renderButton$1(button) {
       return (jsx(Button, { className: "mt-6 w-full", appendLeft: button.icon && jsx(Img, { image: button.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
   }
   function renderCardTitle(title, className) {
-      return jsx("div", { className: `font-medium text-xl m-0 ${className}`, children: title });
+      return jsx("div", { className: `text-xl m-0 ${className}`, children: title });
   }
   function renderItems(items, version = 'primary') {
       return (jsx(List, { className: `max-w-[308px] mt-2 text-sm ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "mt-1 first:mt-0", items: items.filter((item) => item?.text).map((item) => item.text), version: version }));
   }
-  function getTitleStyle(version, description, items) {
-      return `font-medium text-xl m-0
+  function getTitleStyle(version) {
+      return `text-xl m-0
         ${version !== 'secondary' ? 'text-primary-text' : ''}
-        ${!description && !items?.length ? 'text-center' : ''}
       `;
   }
 
   const GalleryContainer = JSX(({ context, title, description, cards = [], version = 'normal', activeCardIndex }) => {
-      return (jsxs("div", { children: [jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" }), jsxs("div", { className: "flex flex-col items-center mb-8", children: [title ? jsx(Heading, { headingType: "h2", className: "text-center", title: title }) : null, description ? (jsx("div", { className: "font-normal text-base max-w-[600px] mt-2.5", children: description })) : null] }), jsx("div", { className: `flex ${cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''} duration-1000`, style: { transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }, role: "list", children: cards?.map((card, i) => renderCard({ card, version, context }, i)) })] }));
+      return (jsxs("div", { children: [jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" }), jsxs("div", { className: "flex flex-col items-center mb-8", children: [title ? jsx(Heading, { headingType: "h2", className: "text-center", title: title }) : null, description ? (jsx("div", { className: "font-light text-md max-w-[600px] mt-2.5", children: description })) : null] }), jsx("div", { className: `flex ${cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''} duration-1000`, style: { transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }, role: "list", children: cards?.map((card, i) => renderCard({ card, version, context }, i)) })] }));
   });
   function renderCard({ card, version }, i) {
-      return (jsx("section", { className: `box-border border-solid border rounded-md border-main-divider p-7 mx-2 flex flex-col justify-between
+      return (jsx("section", { className: `box-border border-solid border border-main-stroke p-6 mx-2 flex flex-col justify-between
         items-stretch ${cardStyleMap[version]} ${cardVersionMap[card.version ?? 'primary']} w-full col-span-4`, role: "listitem", children: jsx(GalleryCardInner, { ...card }) }, String(i)));
   }
 
@@ -930,7 +934,7 @@
       const showNextButton = isGalleryScrollAvailable &&
           cards?.length - activeCardIndex > galleryLengthForScrollMap[version];
       const showPrevButton = isGalleryScrollAvailable && activeCardIndex > 0;
-      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-[50px] overflow-hidden ${className}`, id: anchor, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 rotate-180 z-10 mt-[25px]", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })), showNextButton && (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-[25px]", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })), jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" })] }));
+      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-[42px] overflow-hidden ${className}`, id: anchor, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 rotate-180 z-10 mt-[25px]", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })), showNextButton && (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-[25px]", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })), jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" })] }));
   });
 
   const Gallery = JSX((props) => jsx(GalleryInner, { ...props, version: "normal" }));
@@ -1031,7 +1035,7 @@
   };
   const TableCarouselContainer = JSX(({ children, activeCardIndex, columnWidth, version = 'comparison' }) => (jsx("div", { className: "flex flex-1 overflow-hidden", children: jsx("div", { className: carouselContainerClassesMap[version], style: { transform: `translateX(-${activeCardIndex * columnWidth}px)` }, children: children }) })));
 
-  const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES$1} ${GRADIENT}`, role: "columnheader", scope: "col", children: [icon && !image?.src && (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })), image?.src && jsx(Img, { className: "mb-[18px]", image: image }), title && jsx(Heading, { headingType: "h4", className: "text-center text-white", title: title }), link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "font-medium text-xs py-[11px]", children: link.text }) }) }))] })));
+  const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES$1} ${GRADIENT}`, role: "columnheader", scope: "col", children: [icon && !image?.src && (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })), image?.src && jsx(Img, { className: "mb-[18px]", image: image }), title && jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title }), link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "font-medium text-xs py-[11px]", children: link.text }) }) }))] })));
 
   const ComparisonTableColumnHeaders = JSX(({ colHeaders, activeCardIndex, router, handlerDecorator }) => {
       return (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES$1, role: "columnheader", scope: "col" }), jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header, link: header.link && useLink({ router, handlerDecorator }, header.link) }, String(i)))) })] }));
@@ -1042,7 +1046,7 @@
       const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES$1} ${isFillGradient && isFirstRow ? 'border-t' : ''} ${!isLastRow ? 'border-solid' : 'border-b-0'}`;
       return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { className: cellClasses, children: cell.map((item, i) => renderCellInner$1(item, i, isFillGradient)) }) }));
   });
-  const renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label && (jsx("h5", { className: `text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`, children: label })), description && (jsx("div", { className: `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`, children: description }))] }, String(i)));
+  const renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label && (jsx("h4", { className: `text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`, children: label })), description && (jsx("div", { className: `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`, children: description }))] }, String(i)));
 
   const TableRow = JSX(({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (jsxs(TableRowContainer, { children: [header?.title ? (jsx("div", { className: `text-sm py-7 ${DIVIDER_CLASSES$1} ${FIRST_CELL_CLASSES$1} ${!isLastRow ? 'border-solid' : 'border-b-0'}`, children: header.title })) : null, data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: data.map((cell, i) => (jsx(TableCell, { cell: cell, isFirstRow: isFirstRow, isLastRow: isLastRow, isFillGradient: isColoredFirstColumn && i === 0 }, String(i)))) })) : null] })));
 
@@ -1192,8 +1196,19 @@
       }
   };
 
+  const tableFunc = (table) => (input) => {
+      const [, output] = table.find(([predicate]) => predicate(input)) || [];
+      return output;
+  };
+
+  const func = tableFunc([
+      [(_) => _ === 1, 'год'],
+      [(_) => _ <= 4, 'года'],
+      [() => true, 'лет'],
+  ]);
   function renderButton(number, i, handleClick) {
-      return (jsx("button", { className: "bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer border-none", onClick: () => handleClick(number), children: jsxs("span", { className: "font-semibold text-sm", children: [number, " ", number === 1 ? 'год' : number > 4 ? 'лет' : 'года'] }) }, String(i)));
+      const string = func(number);
+      return (jsx("button", { className: "bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer border-none", onClick: () => handleClick(number), children: jsxs("span", { className: "font-semibold text-sm", children: [number, " ", string] }) }, String(i)));
   }
 
   const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
@@ -1667,9 +1682,12 @@
               })] }));
   });
   // TODO: add types
-  const renderDotsSubMenu = ({ subMenuIsShow, toggleSubMenu, subItems, router, handlerDecorator, }) => (jsxs("div", { className: `absolute w-52 -top-4 right-0 pt-4 z-40 ${subMenuIsShow ? 'bg-white rounded-md shadow-blue-gray/24' : ''}`, "data-header-submenu-visible": "toggled", children: [jsx("button", { className: "flex justify-between items-center cursor-pointer h-6 ml-6", onClick: toggleSubMenu, children: Array(3).fill(jsx("div", { className: "w-[3px] h-[3px] rounded bg-black mr-1" })) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`, children: renderDotsSubMenuItems(subItems, router, handlerDecorator) })] }));
+  const renderDotsSubMenu = ({ subMenuIsShow, toggleSubMenu, subItems, router, handlerDecorator, }) => (jsxs("div", { className: `absolute w-52 -top-4 right-0 pt-4 z-40 ${subMenuIsShow ? 'bg-white rounded-md shadow-blue-gray/24' : ''}`, "data-header-submenu-visible": "toggled", children: [jsx("button", { className: "flex justify-between items-center cursor-pointer h-6 ml-6", onClick: toggleSubMenu, "aria-label": `${subMenuIsShow ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, children: Array(3)
+                  .fill(0)
+                  .map((_, i) => renderDot(i)) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`, "aria-hidden": !subMenuIsShow, children: renderDotsSubMenuItems(subItems, router, handlerDecorator) })] }));
   // TODO: add types
   const renderDotsSubMenuItems = (subItems, router, handlerDecorator) => subItems?.map((_) => (jsx("a", { ...useLink({ router, handlerDecorator }, _), "data-item-name": "dots-header-submenu", className: "text-base font-light pb-4 hover:text-primary-main", children: _.text }, _.href)));
+  const renderDot = (i) => (jsx("div", { className: "w-[3px] h-[3px] rounded bg-black mr-1" }, String(i)));
 
   const BORDER_COLORS = {
       'bg-white': 'bg-main-divider',
@@ -1681,7 +1699,7 @@
       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 }, _), ariaLabel: _.text, bgColor: bgColor }, String(i))));
+      const topMenu = mergedItems.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ...useLink({ router, handlerDecorator }, _), "aria-label": _.text, bgColor: bgColor }, String(i))));
       return (jsx("header", { className: `pt-6 pb-8 px-20 ${bgColor} ${className}`, id: anchor, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor }), topMenu, jsx(HeaderSecondaryMenu, { context: context, className: "ml-auto", defaultLocation: defaultLocation, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-[1px] ${BORDER_COLORS[bgColor]}` }), jsx(HeaderSubMenu, { context: context, subItems: activeTopItem?.items, bgColor: bgColor })] }) }));
   });
 
@@ -1701,28 +1719,69 @@
   });
 
   const TEXT_CLASSES = 'font-sans font-normal text-sm';
-  const LINK_CLASSES = 'flex-1 flex items-center justify-center';
-  const NavigatorTabItem = JSX(({ className = '', label, active, children, onClick, anchor }) => (jsx("a", { className: getLinkClasses(className, active), href: `#${anchor}`, onClick: onClick, children: jsx("span", { className: getTextClasses(active), children: label || children }) })));
+  const LINK_CLASSES = 'flex-1 flex items-center justify-center cursor-pointer';
+  const NavigatorTabItem = JSX(({ className = '', label, active, children, onClick, href, target = '_self' }) => (jsx("a", { className: getLinkClasses(className, active), target: target, href: href, onClick: onClick, children: jsx("span", { className: getTextClasses(active), children: label || children }) })));
   const getLinkClasses = (className, active) => {
-      const classes = active ? 'bg-primary-main' : 'bg-white';
+      const classes = active ? 'bg-primary-main' : 'group bg-white';
       return `${classes} ${LINK_CLASSES} ${className}`;
   };
   const getTextClasses = (active) => {
-      const classes = active ? 'text-white' : 'text-secondary-text hover:text-primary-main';
+      const classes = active ? 'text-white' : 'text-secondary-text group-hover:text-primary-main ';
       return `${classes} ${TEXT_CLASSES}`;
   };
 
   const NavigatorTabs = JSX(({ className = '', navigatorTabs, context, anchor = null }) => {
       const router = context.useRouter();
-      const hash = getHash(router.href);
-      return (jsx("section", { className: `sticky top-0 z-20 box-border flex gap-x-1 h-12 ${className}`, id: anchor, children: navigatorTabs ? navigatorTabs.map(renderTab(hash, router)) : null }));
+      const href = globalThis.location.href;
+      return (jsx("section", { className: `sticky top-0 z-20 box-border flex gap-x-1 h-12 ${className}`, id: anchor, children: navigatorTabs ? navigatorTabs.map(renderTab(href, router)) : null }));
   });
-  const renderTab = (hash, router) => (tab, i) => {
-      const anchorHash = `#${tab.anchor}`;
-      const active = hash ? anchorHash === hash : i === 0;
-      return (jsx(NavigatorTabItem, { active: active, onClick: () => router?.replace(anchorHash), ...tab }, tab.anchor));
+  const renderTab = (href, router) => (tab, i) => {
+      const hash = getHash(href);
+      const active = hash ? tab.href === hash : i === 0;
+      return (jsx(NavigatorTabItem, { active: active, onClick: () => handleRoute(router, tab.href), ...tab }, tab.href));
+  };
+  const handleRoute = (router, href) => {
+      if (isURL(href))
+          return; // if href if full URL - move to HTML href action, do not touch router
+      router?.replace(href || '');
   };
 
+  const useActiveHandler = ({ context, blocks, initialState = false }) => {
+      const [isActive, setIsActive] = context.useState(initialState);
+      const hasContent = blocks?.length;
+      const icon = isActive ? 'ArrowUpIcon' : 'ArrowDownIcon';
+      const getContentBlock = ({ currentTarget }) => currentTarget.previousSibling;
+      const handleToggle = (e) => {
+          if (!hasContent) {
+              return;
+          }
+          setIsActive(!isActive);
+          const contentBlock = getContentBlock(e);
+          contentBlock.style.maxHeight = contentBlock.style.maxHeight
+              ? null
+              : `${contentBlock.scrollHeight}px`;
+      };
+      return { isActive, hasContent, icon, handleToggle };
+  };
+
+  const OtherProductsItemInner = JSX(({ blocks, columns = 1, context }) => {
+      const className = 'box-border p-5';
+      return (jsx("div", { className: "transition-all duration-300 max-h-0 overflow-hidden", children: jsx("div", { className: `box-border w-full p-9 ${columns > 1 ? 'flex flex-wrap' : ''}`, children: renderBlocksList({ context, className, columns, blocks }) }) }));
+  });
+
+  const OtherProductsItem = JSX(({ label, isExpanded, blocks, columns, context }) => {
+      const { hasContent, icon, handleToggle, isActive } = useActiveHandler({
+          context,
+          blocks,
+          initialState: isExpanded,
+      });
+      return (jsxs("div", { className: "border-0 border-b border-solid border-main-divider", children: [hasContent ? (jsx(OtherProductsItemInner, { isExpanded: isActive, columns: columns, blocks: blocks, context: context })) : null, jsxs("button", { className: "border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer", onClick: handleToggle, children: [jsx("span", { className: "pr-3", children: isActive ? 'Скрыть' : label }), hasContent ? jsx(Icon, { name: icon, width: "20", height: "20", asSVG: true }) : null] })] }));
+  });
+
+  const OtherProducts = JSX(({ blockItems, context, className }) => {
+      return (jsx("section", { className: `font-sans bg-white text-primary-text ${className || ''}`, children: blockItems?.length ? (jsx("div", { className: "list-none m-0 p-0", children: blockItems.map((item, i) => (jsx(OtherProductsItem, { ...item, context: context }, `BlockItem${i}`))) })) : null }));
+  });
+
   const GOLDEN_RATIO = 1.618;
   const Placeholder = JSX(({ className, context, title, description = 'Блок в разработке...', anchor = null }) => {
       return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, children: [description ? (jsx(Description, { className: "mt-4 max-w-[600px]", description: description })) : null, jsx("figure", { className: "m-0 min-w-[600px]", children: renderShimmer() })] }) }));
@@ -1828,44 +1887,8 @@
       return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
   }
 
-  const useActiveHandler = ({ context, blocks, initialState = false }) => {
-      const [isActive, setIsActive] = context.useState(initialState);
-      const hasContent = blocks?.length;
-      const icon = isActive ? 'ArrowUpIcon' : 'ArrowDownIcon';
-      const getContentBlock = ({ currentTarget }) => currentTarget.previousSibling;
-      const handleToggle = (e) => {
-          if (!hasContent) {
-              return;
-          }
-          setIsActive(!isActive);
-          const contentBlock = getContentBlock(e);
-          contentBlock.style.maxHeight = contentBlock.style.maxHeight
-              ? null
-              : `${contentBlock.scrollHeight}px`;
-      };
-      return { isActive, hasContent, icon, handleToggle };
-  };
-
-  const OtherProductsItemInner = JSX(({ blocks, columns = 1, context }) => {
-      const className = 'box-border p-5';
-      return (jsx("div", { className: "transition-all duration-300 max-h-0 overflow-hidden", children: jsx("div", { className: `box-border w-full p-9 ${columns > 1 ? 'flex flex-wrap' : ''}`, children: renderBlocksList({ context, className, columns, blocks }) }) }));
-  });
-
-  const OtherProductsItem = JSX(({ label, isExpanded, blocks, columns, context }) => {
-      const { hasContent, icon, handleToggle, isActive } = useActiveHandler({
-          context,
-          blocks,
-          initialState: isExpanded,
-      });
-      return (jsxs("div", { className: "border-0 border-b border-solid border-main-divider", children: [hasContent ? (jsx(OtherProductsItemInner, { isExpanded: isActive, columns: columns, blocks: blocks, context: context })) : null, jsxs("button", { className: "border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer", onClick: handleToggle, children: [jsx("span", { className: "pr-3", children: isActive ? 'Скрыть' : label }), hasContent ? jsx(Icon, { name: icon, width: "20", height: "20", asSVG: true }) : null] })] }));
-  });
-
-  const OtherProducts = JSX(({ blockItems, context, className }) => {
-      return (jsx("section", { className: `font-sans bg-white text-primary-text ${className || ''}`, children: blockItems?.length ? (jsx("div", { className: "list-none m-0 p-0", children: blockItems.map((item, i) => (jsx(OtherProductsItem, { ...item, context: context }, `BlockItem${i}`))) })) : null }));
-  });
-
   const RecommendationCard = JSX(({ context, className = '', title, description, items, image, version, socialMedia }) => {
-      return (jsx("section", { className: `border border-solid box-border py-[30px] px-9 min-w-[515px] max-w-[515px] ${className}`, role: "listitem", children: jsxs(BaseTile, { context: context, className: "flex justify-between", title: title ? (jsx("h4", { className: `font-sans text-title-xs font-normal m-0 mb-3.5`, children: title })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? jsx(Description, { className: "text-left", description: description }) : null, items?.length ? (jsx(List, { className: "text-md font-light flex flex-col gap-2", items: items, version: version })) : null, jsx(SocialMedia, { className: "pt-[42px] pb-0", media: socialMedia, context: context })] }) }));
+      return (jsx("section", { className: `border border-solid box-border py-[30px] px-9 min-w-[515px] max-w-[515px] ${className}`, role: "listitem", children: jsxs(BaseTile, { context: context, className: "flex justify-between", title: title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "font-normal mb-3.5", title: title })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? jsx(Description, { className: "text-left", description: description }) : null, items?.length ? (jsx(List, { className: "text-md font-light flex flex-col gap-2", items: items, version: version })) : null, jsx(SocialMedia, { className: "pt-[42px] pb-0", media: socialMedia, context: context })] }) }));
   });
 
   const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
@@ -1895,20 +1918,20 @@
       return (jsxs("div", { children: [showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 rotate-180 z-10 mt-6", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E" })), showNextButton && (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-6", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E" }))] }));
   };
 
-  const StepsBlock = JSX(({ className = '', title, showLines = true, steps = [], anchor = null }) => {
+  const StepsBlock = JSX(({ className = '', title, showLines = true, steps = [], button, anchor = null }) => {
       const shortGaps = steps.length > 3;
       return (jsxs("section", { className: [
               'box-border font-sans text-primary-text bg-white',
               shortGaps ? 'px-20' : 'px-[70px]',
               'py-[50px] flex flex-col items-center',
               className,
-          ].join(' '), id: anchor, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center", title: title }), steps?.length ? (jsxs("div", { className: `box-border py-0.5 mb-0.5 ${title ? 'mt-9' : ''}`, children: [jsx("div", { className: "flex items-center px-[88px]", children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}` }))(steps.map(renderStepIcon)) }), jsx("div", { className: `flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepTitle) })] })) : null] }));
+          ].join(' '), id: anchor, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center", title: title }), steps?.length ? (jsxs("div", { className: `box-border py-0.5 mb-0.5 ${title ? 'mt-9' : ''}`, children: [jsx("div", { className: "flex items-center px-[88px]", children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}` }))(steps.map(renderStepIcon)) }), jsx("div", { className: `flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map((step, i) => renderStepTitle(step, i, Boolean(button?.text))) })] })) : null, button?.text ? (jsx(Button, { className: "box-border mt-[43px] py-3 h-12 w-full max-w-[240px]", version: "primary", href: "#", children: button.text })) : null] }));
   });
   const renderStepIcon = (step, i) => {
-      return (jsx("div", { className: "flex flex-col items-center text-center relative", children: jsx("div", { className: "h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10", children: (step.icon?.icon && jsx(Img, { image: step.icon, width: "48", height: "48" })) || (jsx("span", { className: "font-medium text-title-sm text-secondary-text", children: i + 1 })) }) }, String(i)));
+      return (jsx("div", { className: "flex flex-col items-center text-center relative", children: jsx("div", { className: "h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10", children: (step.icon?.icon && jsx(Img, { image: step.icon, width: "48", height: "48" })) || (jsx("span", { className: "font-normal text-title-sm text-secondary-text", children: i + 1 })) }) }, String(i)));
   };
-  const renderStepTitle = (step, i) => {
-      return (jsxs("div", { className: "flex flex-col items-center text-center relative w-[276px] whitespace-pre-line overflow-hidden", children: [step.label && jsx("div", { className: "font-medium text-xl m-0 mt-4", children: step.label }), step.description && (jsx("div", { className: `font-normal text-sm text-secondary-text ${step.label ? 'mt-2' : 'mt-4'}`, children: step.description }))] }, String(i)));
+  const renderStepTitle = (step, i, isMainButton) => {
+      return (jsxs("div", { className: "flex flex-col items-center justify-between text-center relative w-[276px] whitespace-pre-line overflow-hidden", children: [jsxs("div", { children: [step.label && jsx("div", { className: "font-normal text-xl m-0 mt-4", children: step.label }), step.description && (jsx("div", { className: `font-light text-base text-secondary-text ${step.label ? 'mt-2' : 'mt-4'}`, children: step.description }))] }), step?.button?.text && !isMainButton ? (jsx(Button, { className: "box-border mt-[38px] py-3 h-12 w-full max-w-[240px]", version: "primary", href: "#", children: step.button.text })) : null] }, String(i)));
   };
 
   const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
@@ -1916,13 +1939,15 @@
   const COLS_LENGTH_FOR_SCROLL = 2;
   const COLUMN_WIDTH = 4 * 80 + 40; // w-80 + pl-10 = 360px
 
+  const getButtonAriaLabel = (icon) => icon?.alt || icon?.title || IconTitleMap[icon?.icon ? icon.icon : ''];
+
   const TariffsTableCell = JSX(({ cell, isLastRow }) => {
       const cellWrapperClasses = `first:pl-0 pl-10 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0 ${isLastRow ? 'border-t-0 rounded-b-md' : ''}`;
       return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { children: cell.map(renderCellInner) }) }));
   });
   const renderCellInner = ({ label, description, list, image, buttons }, i) => (jsxs("div", { className: "first:pt-5 last:pb-5", children: [i > 0 && (jsx("div", { className: "border-main-divider border border-solid border-t-0 border-x-0 my-4" })), label ? jsx("div", { className: "text-xl font-medium m-0", children: label }) : null, description ? jsx("div", { className: "text-sm text-secondary-text", children: description }) : null, list?.items?.length ? renderList(list) : null, image && jsx(Img, { image: image }), buttons?.length ? renderButtons(buttons) : null] }, String(i)));
   const renderList = (list) => (jsx(List, { className: "flex flex-col justify-between items-start text-sm", version: "gray", items: list.items, isDotted: list.isDotted ?? true }));
-  const renderButtons = (buttons) => (jsx("div", { children: buttons.map(({ icon, rounded, ...buttonProps }, idx) => (jsx(Button, { className: `${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`, rounded: rounded, appendLeft: icon ? jsx(Img, { image: icon, width: "24px", height: "24px", asSVG: true }) : null, ...buttonProps }, String(idx)))) }));
+  const renderButtons = (buttons) => (jsx("div", { children: buttons.map(({ icon, rounded, ...buttonProps }, idx) => (jsx(Button, { className: `${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`, ariaLabel: getButtonAriaLabel(icon), rounded: rounded, appendLeft: icon ? jsx(Img, { image: icon, width: "24px", height: "24px", asSVG: true }) : null, ...buttonProps }, String(idx)))) }));
 
   const TariffsTableRow = JSX(({ row: { header, data }, activeCardIndex, isLastRow }) => {
       return (jsxs(TableRowContainer, { children: [jsx("div", { className: `text-sm py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${!isLastRow ? 'border-solid' : ''}`, children: jsxs("div", { className: "flex items-center text-primary-text", children: [header?.icon ? (jsx(Img, { className: "mr-[14px] max-w-6 max-h-6", image: header.icon, width: "24px", height: "24px", asSVG: true })) : null, header?.title] }) }), data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH, version: "tariff", children: data.map((cell, i) => (jsx(TariffsTableCell, { cell: cell, isLastRow: isLastRow }, String(i)))) })) : null] }));
@@ -1977,6 +2002,19 @@
       Placeholder,
   };
 
+  const changeHashOnScroll = (router, blocks) => {
+      blocks?.forEach((block) => {
+          const currentHash = globalThis.location.hash;
+          const anchorHash = `#${block?.id}`;
+          if (currentHash === anchorHash)
+              return;
+          const position = block?.getBoundingClientRect();
+          if (position && position.top > 0 && position.top < 150) {
+              router.replace(`#${block?.id}`);
+          }
+      });
+  };
+
   const LikeButton = JSX(({ className, onClick, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 w-[36px] bg-inherit cursor-pointer ${className || ''}`, onClick: onClick, "aria-label": ariaLabel, children: renderLikeIcon() })));
   const renderLikeIcon = () => {
       const params = {
@@ -1994,9 +2032,15 @@
   });
 
   const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
-  const ContentPage = JSX(({ className, context, blocksRegistry, data: { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' }, blockDecorator = defaultBlockDecorator, }) => {
+  const ContentPage = JSX(({ className = '', context, blocksRegistry, data: { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' }, blockDecorator = defaultBlockDecorator, }) => {
       const { header } = slots;
-      return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className || ''}`, "data-theme": colorPalette, children: [header?.blocks?.length ? (jsx("div", { className: `${style2className(header?.style)}`, children: header.blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, blocks?.length ? (jsx("div", { className: "container grid grid-cols-12 gap-1", children: blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, likeControl && (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto", context: context }) }))] }));
+      const router = context.useRouter();
+      // listener is for NavigatorTabs
+      globalThis.addEventListener('load', () => {
+          const sectionsWithAnchors = globalThis.document.querySelectorAll('section[id]');
+          globalThis.document.addEventListener('scroll', () => changeHashOnScroll(router, sectionsWithAnchors));
+      });
+      return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [header?.blocks?.length ? (jsx("div", { className: `${style2className(header?.style)}`, children: header.blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, blocks?.length ? (jsx("div", { className: "container grid grid-cols-12 gap-1", children: blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, likeControl && (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto", context: context }, "LikeControl") }))] }));
   });
   function renderBlock({ block, blockDecorator, blocksRegistry, context }, i) {
       const { type } = block;
@@ -2009,7 +2053,7 @@
           block,
           render: (props) => {
               const { version, content, anchor } = props.block;
-              return (jsx(BlockComponent, { className: props.blockClassName, version: version, context: context, anchor: anchor, ...content }));
+              return (jsx(BlockComponent, { className: props.blockClassName, version: version, context: context, anchor: anchor, ...content }, `${type}-${i}`));
           },
       }, `block-${i}`);
   }