@redneckz/wildless-cms-uni-blocks 0.6.37 → 0.6.39

package/bundle/bundle.umd.js

@@ -289,8 +289,7 @@
         subscribers = {};
         subjectsStateMap = {};
         subscribe(type, listener) {
-            this.subscribers[type] ||= [];
-            this.subscribers[type]?.push(listener);
+            this.subscribers[type] = (this.subscribers[type] || []).concat(listener);
             const latestEvent = this.subjectsStateMap[type];
             if (latestEvent) {
                 listener(latestEvent);
@@ -303,7 +302,10 @@
             this.subscribers[type] = this.subscribers[type]?.filter((s) => s !== listener);
         }
         fire(type, event) {
-            this.subjectsStateMap[type] = event;
+            const isSubjectDeclared = type in this.subjectsStateMap;
+            if (isSubjectDeclared) {
+                this.subjectsStateMap[type] = event;
+            }
             this.subscribers[type]?.forEach((s) => s(event));
         }
         subject(type, event) {
@@ -335,51 +337,71 @@
             .concat(1);
     }
 
-    const changeHashOnObserve = ({ anchor, anchorClickRef }) => (entries) => {
-        if (!entries?.length) {
-            return;
+    const normalizeAnchor = (rawAnchor) => rawAnchor?.replace('#', '');
+    class BlockRouter {
+        static inst = new BlockRouter();
+        eventBus = new EventBus();
+        constructor() {
+            const anchor = normalizeAnchor(globalThis.location?.hash);
+            if (anchor) {
+                this.eventBus.subject('goto', { anchor });
+            }
         }
-        const [entry] = entries;
-        if (!entry.isIntersecting || entry.boundingClientRect.top > 150) {
-            return;
+        goto(rawAnchor) {
+            const anchor = normalizeAnchor(rawAnchor);
+            if (anchor) {
+                this.push(anchor);
+                this.eventBus.fire('goto', { anchor });
+            }
         }
-        if (anchorClickRef?.current?.isScrolling && anchorClickRef.current.label === `#${anchor}`) {
-            EventBus.inst.fire('anchorClick', { isScrolling: false, label: undefined });
-            EventBus.inst.fire('tab', { type: 'link', label: anchor });
+        push(rawAnchor) {
+            globalThis.history?.pushState(null, '', `#${normalizeAnchor(rawAnchor)}`);
         }
-        else if (!anchorClickRef?.current?.isScrolling) {
-            EventBus.inst.fire('tab', { type: 'link', label: anchor });
+        replace(rawAnchor) {
+            globalThis.history?.replaceState(null, '', `#${normalizeAnchor(rawAnchor)}`);
         }
-    };
+        reset() {
+            globalThis.history?.replaceState(null, '', '#');
+        }
+    }
+
+    function useBlockIntersectionObserver(block, router = BlockRouter.inst) {
+        const observerCallback = useCallback((entries) => {
+            if (!block || !entries?.length) {
+                return;
+            }
+            const intersection = entries[entries.length - 1];
+            router.eventBus.fire('intersection', { block, intersection });
+        }, [block, router]);
+        const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
+        useEffect(() => {
+            if (!ref.current) {
+                return undefined;
+            }
+            return router.eventBus.subscribe('goto', ({ anchor }) => {
+                if (ref.current && block?.anchor === anchor) {
+                    ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                }
+            });
+        }, [block, router]);
+        return ref;
+    }
 
     const BlockWrapper = JSX(({ className, block, tag = 'section', role, children }) => {
         const Tag = tag;
-        const { anchor, labels } = block || {};
+        const ref = useBlockIntersectionObserver(block);
         const [isVisible, setVisible] = useState(true);
-        const anchorClickRef = useRef({});
-        const observerCallback = useMemo(() => changeHashOnObserve({ anchor, anchorClickRef }), [anchor]);
-        const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
-        useEffect(() => EventBus.inst.subscribe('anchorClick', (e) => {
-            setVisible(true);
-            anchorClickRef.current = e;
-        }), []);
         useEffect(() => EventBus.inst.subscribe('tab', (event) => {
             if (event.type === 'group') {
-                const hasSettings = labels?.length || block?.anchor;
-                setVisible(event.label ? !hasSettings || Boolean(labels?.includes(event.label)) : true);
+                const hasSettings = block?.labels?.length || block?.anchor;
+                setVisible(event.label ? !hasSettings || Boolean(block?.labels?.includes(event.label)) : true);
             }
             else {
-                changeHash(event.label);
                 setVisible(true);
             }
-        }), []);
-        return isVisible ? (jsx(Tag, { className: className, role: role, ...(anchor ? { id: anchor, ref } : {}), children: children })) : null;
+        }), [block]);
+        return isVisible ? (jsx(Tag, { className: className, role: role, ...(block?.anchor ? { id: block.anchor, ref } : {}), children: children })) : null;
     });
-    function changeHash(label) {
-        if (label) {
-            globalThis.document.location.hash = label;
-        }
-    }
 
     const HEADING_STYLE_MAP = {
         h0: 'text-h0',
@@ -403,7 +425,7 @@
 
     const AccordionItemsList = JSX(({ children }) => (jsx("ul", { className: "list-none m-0 p-0", children: children })));
 
-    const Accordion = JSX(({ className = '', title, accordionAlignTitle = 'center', description, ...rest }) => (jsxs(BlockWrapper, { className: `p-[50px] mb-1 last:mb-0 bg-white text-primary-text ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `mb-2.5 ${AlignText[accordionAlignTitle]}`, title: title })) : null, description ? (jsx("div", { className: "mb-2.5", children: jsx(Paragraph, { size: "text-l", children: description }) })) : null, jsx(AccordionItemsList, { children: renderChildren(rest) })] })));
+    const Accordion = JSX(({ className = '', title, accordionAlignTitle = 'center', description, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 mb-1 last:mb-0 bg-white text-primary-text ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `mb-2.5 ${AlignText[accordionAlignTitle]}`, title: title })) : null, description ? (jsx("div", { className: "mb-2.5", children: jsx(Paragraph, { size: "text-l", children: description }) })) : null, jsx(AccordionItemsList, { children: renderChildren(rest) })] })));
     Accordion.childrenTypes = ['AccordionItem'];
 
     const Foldable = JSX(({ isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
@@ -533,7 +555,7 @@
     const BenefitsBlock = JSX(({ className = '', title, benefitList, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-12 flex flex-col items-center ${className} ${VersionStyleMap[version]}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `max-w-[47rem] text-center ${benefitsTextStyleMap[version]}`, title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep(version)) })) : null] })));
     const renderStep = (version) => (benefit, i) => {
         const description = benefit.description;
-        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: `w-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[version]}`, image: getIconWithVersion(benefit.icon, version), asSVG: true })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? (jsx("h3", { className: `text-h6 m-0 ${benefitsTextStyleMap[version]}`, children: benefit.label })) : null, renderDescription$3(description, version)] })] }, String(i)));
+        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: `w-12 h-12 min-w-12 p-3 rounded-full ${benefitsIconStyleMap[version]}`, image: getIconWithVersion(benefit.icon, version), asSVG: true })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? (jsx("h3", { className: `text-h6 m-0 ${benefitsTextStyleMap[version]}`, children: benefit.label })) : null, renderDescription$3(description, version)] })] }, String(i)));
     };
     const renderDescription$3 = (description, version) => {
         const benefitType = description?.benefitType || null;
@@ -547,6 +569,10 @@
         return description?.items && description.items.length > 0 ? (jsx("ul", { className: listStyleType, children: description.items.map((_, i) => (jsx("li", { children: _ }, `benefitListItem-${i}`))) })) : null;
     };
 
+    function useBlockRouter() {
+        return BlockRouter.inst;
+    }
+
     const isURL = (href) => href?.includes('//');
     const withoutQuery = (href) => (href || '').replace(/\/?\?.*/, '');
     const getOrigin = (href) => {
@@ -615,6 +641,7 @@
 
     function useLink() {
         const router = useRouter();
+        const blockRouter = useBlockRouter();
         return (props) => {
             const href = adjustHref(props.href, router);
             return {
@@ -625,8 +652,15 @@
                     props.onClick && props.onClick(ev);
                     const isLocalHref = href && !isURL(href);
                     const isLocalTarget = !props.target || props.target === '_self';
-                    if (isLocalHref && isLocalTarget && !isHash(href)) {
-                        ev?.preventDefault();
+                    if (!isLocalHref || !isLocalTarget) {
+                        // Default handle
+                        return;
+                    }
+                    ev?.preventDefault();
+                    if (isHash(href)) {
+                        blockRouter.goto(href);
+                    }
+                    else {
                         router.push(href);
                     }
                 }, props),
@@ -783,12 +817,12 @@
     const Headline = JSX(({ className = '', bgColorHeadline = 'transparent', align = 'center', title, description, headlineVersion = 'XL', as, ...rest }) => {
         const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
         const SIZE_MAPS = HEADLINE_VERSION[headlineVersion];
-        return (jsxs(BlockWrapper, { className: `font-sans flex flex-col p-[50px] ${SIZE_MAPS.gap} ${STYLE_MAPS.background} ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: SIZE_MAPS?.headingType, as: as || SIZE_MAPS?.as, className: `whitespace-pre-wrap ${STYLE_MAPS.text} ${AlignText[align]}`, title: title })) : null, description ? (jsx("p", { className: `${SIZE_MAPS.descriptionFont} ${STYLE_MAPS.text} ${AlignText[align]}`, children: description })) : null] }));
+        return (jsxs(BlockWrapper, { className: `font-sans flex flex-col p-12 ${SIZE_MAPS.gap} ${STYLE_MAPS.background} ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: SIZE_MAPS?.headingType, as: as || SIZE_MAPS?.as, className: `whitespace-pre-wrap ${STYLE_MAPS.text} ${AlignText[align]}`, title: title })) : null, description ? (jsx("p", { className: `${SIZE_MAPS.descriptionFont} ${STYLE_MAPS.text} ${AlignText[align]}`, children: description })) : null] }));
     });
 
     const Bonus = JSX((props) => {
         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: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center", ...rest }), jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems?.length
+        return (jsx(BlockWrapper, { className: `font-sans bg-white p-12 pb-9 ${className}`, ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center", ...rest }), jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems?.length
                             ? bonusItems.map((_, i) => {
                                 return (jsx("div", { className: "flex-grow w-[49%] border border-gray p-9 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0", children: jsxs("div", { className: "flex justify-between w-full", children: [jsxs("div", { className: "flex flex-col justify-between mr-4", children: [jsxs("div", { children: [jsx("div", { className: "text-h4", children: _.title }), jsx("div", { className: "text-xl-light mt-2 max-w-[488px]", children: _.description })] }), _?.buttons?.length ? jsx(ButtonSection, { buttons: _?.buttons }) : null] }), _.bonusItemContent?.bonusType
                                                 ? renderBonusItemContent(_.bonusItemContent)
@@ -800,9 +834,9 @@
             ? renderBonusCount(bonusItemContent)
             : renderBonusImage(bonusItemContent) }));
     const renderBonusCount = (_) => (jsxs("div", { className: "relative -bottom-3 h-auto flex items-end mt-14 shrink-0", children: [_.bonusCount ? (jsx("span", { className: "font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7", children: _.bonusCount })) : null, _.bonusName ? (jsx("span", { className: "text-h2 bg-clip-text text-transparent bg-green-to-yellow", children: _.bonusName })) : null] }));
-    const renderBonusImage = (_) => _.image ? (jsx(ImgInner, { className: `w-[50px] h-[50px] min-w-[50px] p-3 rounded-full`, image: _.image })) : null;
+    const renderBonusImage = (_) => _.image ? jsx(ImgInner, { className: `w-12 h-12 min-w-12 p-3 rounded-full`, image: _.image }) : null;
 
-    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-[50px] flex flex-col text-center ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-8", title: title, description: subtitle, headlineVersion: "M", align: "center", ...rest }), bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] })));
+    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-12 flex flex-col text-center ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-8", title: title, description: subtitle, headlineVersion: "M", align: "center", ...rest }), bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] })));
     const renderBonusBenefit = ({ icon, label, description }, i) => {
         return (jsxs("div", { className: "flex flex-col items-center text-h6", children: [description ? jsx("span", { children: description }) : null, icon ? jsx(ImgInner, { image: icon, height: "180", width: "auto", className: "h-[180px] w-auto" }) : null, jsx("div", { children: label ? jsx("span", { children: label }) : null })] }, String(i)));
     };
@@ -828,7 +862,7 @@
         return (jsxs("li", { className: "flex items-center gap-3.5 mb-3 last:mb-0", children: [icon?.icon ? (jsx(ImgInner, { className: `w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider`, image: icon.icon, asSVG: true })) : null, icon?.src ? jsx(ImgInner, { image: icon.icon }) : null, jsx("span", { className: "text-xl-light", children: text })] }, key));
     };
 
-    const BusinessBlock = JSX(({ className = '', title, cards, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans bg-white p-[50px] pb-9 ${className}`, ...rest, children: [jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }), jsx("div", { className: "flex gap-5", children: cards?.length ? cards.map((_, i) => jsx(BusinessCard, { ..._ }, String(i))) : null })] })));
+    const BusinessBlock = JSX(({ className = '', title, cards, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans bg-white p-12 pb-9 ${className}`, ...rest, children: [jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }), jsx("div", { className: "flex gap-5", children: cards?.length ? cards.map((_, i) => jsx(BusinessCard, { ..._ }, String(i))) : null })] })));
 
     const useCarouselControls = (props) => {
         const { itemCount, visibleItemCount, isCyclic } = props;
@@ -1242,7 +1276,6 @@
             isMonthlyInterestPayment,
         };
         const handleMonthsValue = useCallback((_) => setMonthsValue(_), []);
-        useState(false);
         const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir);
         const { income, finalSum, rate } = calculatorParams;
         return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма вклада, ₽', {
@@ -1381,7 +1414,7 @@
             ? getDisabledButtonClasses({ version: button?.version })
             : getRegularButtonClasses({ className: 'text-white', version: button?.version });
         const link = useLink();
-        return (jsxs(BlockWrapper, { className: `p-[50px] flex flex-col items-center font-sans bg-white ${className}`, ...rest, children: [title ? jsx(Heading, { className: "max-w-[684px] pb-9", headingType: "h2", title: title }) : null, jsxs("form", { className: "w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, value: value, onChange: handleChange, valid: value === '' || !isDisabled, placeholder: placeholder, label: label }), button?.text ? (jsx("button", { type: "submit", className: `w-full p-4 mt-6 ${buttonStyle} `, disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
+        return (jsxs(BlockWrapper, { className: `p-12 flex flex-col items-center font-sans bg-white ${className}`, ...rest, children: [title ? jsx(Heading, { className: "max-w-[684px] pb-9", headingType: "h2", title: title }) : null, jsxs("form", { className: "w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, value: value, onChange: handleChange, valid: value === '' || !isDisabled, placeholder: placeholder, label: label }), button?.text ? (jsx("button", { type: "submit", className: `w-full p-4 mt-6 ${buttonStyle} `, disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
     });
 
     const mapChildren = (mapper) => (children) => {
@@ -1578,7 +1611,7 @@
             itemCount: cards?.length,
             visibleItemCount: CARD_VIEW_COUNT$1,
         });
-        return (jsxs(BlockWrapper, { className: `bg-white relative font-sans p-[50px] overflow-hidden text-center ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center", ...rest }), jsx("div", { className: "flex duration-1000 gap-3.5 mt-8", style: { transform: `translateX(-${activeIndex * CARD_SHIFT$1}px)` }, role: "list", children: cards?.length ? cards.map((card, i) => jsx(CatalogCard, { ...card }, String(i))) : null }), renderArrows({
+        return (jsxs(BlockWrapper, { className: `bg-white relative font-sans p-12 overflow-hidden text-center ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center", ...rest }), jsx("div", { className: "flex duration-1000 gap-3.5 mt-8", style: { transform: `translateX(-${activeIndex * CARD_SHIFT$1}px)` }, role: "list", children: cards?.length ? cards.map((card, i) => jsx(CatalogCard, { ...card }, String(i))) : null }), renderArrows({
                     ...controls,
                     btnClass: ['left-8', 'right-8'],
                     className: 'top-1/2 z-10 mt-6',
@@ -1648,13 +1681,13 @@
     const ComparisonTable = JSX(({ className = '', title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, ...rest }) => {
         const [isShowAllRow, setIsShowAllRow] = useState(!visibleRowLength);
         const handleToggle = useCallback(() => setIsShowAllRow((_) => !_), []);
-        return (jsxs(BlockWrapper, { 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, { columns: columns, rowHeaders: rowHeaders, isShowAllRow: isShowAllRow, isColoredFirstColumn: isColoredFirstColumn, visibleRowLength: visibleRowLength }), visibleRowLength
+        return (jsxs(BlockWrapper, { className: `bg-white font-sans py-12 pl-12 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, { columns: columns, rowHeaders: rowHeaders, isShowAllRow: isShowAllRow, isColoredFirstColumn: isColoredFirstColumn, visibleRowLength: visibleRowLength }), visibleRowLength
                     ? renderShowMoreToggleButton({ isShowAllRow, onClick: handleToggle })
                     : null] }));
     });
-    const renderShowMoreToggleButton = ({ isShowAllRow, onClick, }) => (jsx("div", { className: "pr-[50px]", children: jsxs("div", { className: "flex w-full", children: [jsx("div", { className: FIRST_CELL_CLASSES$1 }), jsx("button", { onClick: onClick, className: "mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main", children: jsx("div", { className: "font-sans text-xs-light font-medium py-3", children: !isShowAllRow ? 'Показать все параметры' : 'Скрыть' }) })] }) }));
+    const renderShowMoreToggleButton = ({ isShowAllRow, onClick, }) => (jsx("div", { className: "pr-12", children: jsxs("div", { className: "flex w-full", children: [jsx("div", { className: FIRST_CELL_CLASSES$1 }), jsx("button", { onClick: onClick, className: "mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main", children: jsx("div", { className: "font-sans text-xs-light font-medium py-3", children: !isShowAllRow ? 'Показать все параметры' : 'Скрыть' }) })] }) }));
 
-    const ContactsBlock = JSX(({ className = '', contacts, info, version = 'secondary', ...rest }) => (jsxs(BlockWrapper, { className: `${VersionStyleMap[version]} flex p-[50px] ${className}`, ...rest, children: [info?.length ? renderBlocks(info, version) : null, contacts?.length ? renderBlocks(contacts, version) : null] })));
+    const ContactsBlock = JSX(({ className = '', contacts, info, version = 'secondary', ...rest }) => (jsxs(BlockWrapper, { className: `${VersionStyleMap[version]} flex p-12 ${className}`, ...rest, children: [info?.length ? renderBlocks(info, version) : null, contacts?.length ? renderBlocks(contacts, version) : null] })));
     const renderBlocks = (info, version) => (jsx("div", { className: "flex grow basis-0", children: info.map((column, index) => renderBlocksColumn({ column, index, version })) }));
     const renderBlocksColumn = ({ column, index, version }) => column ? (jsx("div", { className: "flex flex-col grow basis-0 pr-11 last:pr-0", children: column.map(({ title = '', description, additionalDescription, button }, key) => (jsxs("div", { className: "mt-6 first:mt-0", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "XS", align: "left", bgColorHeadline: version }), additionalDescription ? (jsx("div", { className: "mt-1.5 opacity-80", children: jsx(Paragraph, { size: "text-m-light", children: additionalDescription }) })) : null, button ? jsx(Button, { className: "mt-6", ...button }) : null] }, String(key)))) }, `col-${String(index)}`)) : null;
 
@@ -1759,7 +1792,7 @@
             setSelectedItem(value || { key: '', text: '' });
         }, [value]);
         return (jsxs("div", { className: `${className}`, ref: wrapperRef, children: [label ? jsx("span", { className: "mb-2 flex text-primary-text", children: label }) : null, jsxs("div", { className: `relative ${isOpen ? 'z-20' : 'z-10'}`, children: [jsxs("div", { className: `text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
-            ${getBorderStyle(isBorder)}`, onClick: () => setIsOpen(!isOpen), children: [jsx("p", { className: "p-4 pr-8 h-[56px] overflow-hidden text-ellipsis whitespace-nowrap", children: selectedItem?.text || placeholder }), jsx(Icon, { name: "ArrowUpIcon", width: "16", height: "16", className: `absolute right-3 ${isOpen ? '' : 'rotate-180'}` })] }), options?.length ? (jsx("div", { className: `h-0 ${renderOptionsStyle(isOpen)}`, children: jsx("div", { className: `bg-white text-l max-h-[256px] overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`, children: options.map(renderOption(choiceOption, isOpen, isSelected)) }) })) : null] })] }));
+            ${getBorderStyle(isBorder)}`, onClick: () => setIsOpen(!isOpen), children: [jsx("p", { className: "p-4 pr-8 h-14 overflow-hidden text-ellipsis whitespace-nowrap", children: selectedItem?.text || placeholder }), jsx(Icon, { name: "ArrowUpIcon", width: "16", height: "16", className: `absolute right-3 ${isOpen ? '' : 'rotate-180'}` })] }), options?.length ? (jsx("div", { className: `h-0 ${renderOptionsStyle(isOpen)}`, children: jsx("div", { className: `bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`, children: options.map(renderOption(choiceOption, isOpen, isSelected)) }) })) : null] })] }));
     });
     const renderOptionsStyle = (isOpen) => (isOpen ? '' : 'overflow-hidden');
     const renderOption = (choiceOption, isOpen, isSelected) => (option, i) => {
@@ -1882,7 +1915,7 @@
         currencyRatesBuy.unshift({ currency: { currency: Currency.RUB } });
         const currencyRatesSell = currencyRates.filter((_) => _.saleExchangeRate);
         currencyRatesSell.push({ currency: { currency: Currency.RUB } });
-        return (jsx(BlockWrapper, { className: `bg-white text-primary-text font-sans p-9 box-border min-h-[320px] ${className}`, ...rest, children: jsx(BaseTile, { title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap text-h4 mb-5" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-14 pt-4", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[30px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { address: exchangeRates?.address })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
+        return (jsx(BlockWrapper, { className: `bg-white text-primary-text font-sans p-9 box-border min-h-80 ${className}`, ...rest, children: jsx(BaseTile, { title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap text-h4 mb-5" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-14 pt-4", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[30px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { address: exchangeRates?.address })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
     });
     const getCurrencyRates = (currencies) => {
         return currencies?.filter((_) => _?.currency?.id === 1 || _?.currency?.id === 2) || [];
@@ -2028,7 +2061,7 @@
         }
         const classes = version === 'secondary'
             ? 'bg-white hover:bg-secondary-hover'
-            : 'border-solid border-[1px] border-main-divider hover:border-transparent hover:bg-primary-main';
+            : 'border-solid border border-main-divider hover:border-transparent hover:bg-primary-main';
         const isPrimary = version === 'primary';
         return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", onClick: onClick, children: icon ? (jsx(ImgInner, { image: getIconWithVersion(icon), imageClassName: "group-hover:text-white", width: "24", height: "24", asSVG: true })) : null }));
     });
@@ -2046,8 +2079,8 @@
     const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
     const Footer = JSX(({ className, ...rest }) => {
         const fallback = rest.options?.page?.fallback;
-        const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
-        return (jsxs(BlockWrapper, { tag: "footer", className: `p-9 bg-white font-sans ${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, { 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, hasButton: true }), jsx(SocialMedia, { media: socialMedia, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, 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]", items: topItems, fallback: fallback })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
+        const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, logo } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
+        return (jsxs(BlockWrapper, { tag: "footer", className: `p-9 bg-white font-sans ${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, logo: logo }), jsx(SearchBar, { 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, hasButton: true }), jsx(SocialMedia, { media: socialMedia, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, 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]", items: topItems, fallback: fallback })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
     });
 
     const galleryLengthForScrollMap = {
@@ -2106,7 +2139,7 @@
                     buttonClassName: `mt-6 ${isFullWidth ? '' : 'self-center'}`,
                 })
                 : null] })));
-    const renderImage$1 = (image, version) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`, image: getIconWithVersion(image, version), asSVG: true })) : null] }));
+    const renderImage$1 = (image, version) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-8 h-8 min-w-8 mb-5 rounded-full`, image: getIconWithVersion(image, version), asSVG: true })) : null] }));
     const renderCardTitle = (headlineSmallVersion, title) => title ? jsx("div", { className: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
     const renderDescription$2 = (description, title) => description ? jsx("div", { className: `text-l ${title ? 'mt-2' : ''}`, children: description }) : null;
     const renderAdditionalDescription$1 = (additionalDescription) => additionalDescription ? (jsx("div", { className: "text-m-light text-secondary-text mt-auto", children: additionalDescription })) : null;
@@ -2133,7 +2166,7 @@
 
     const Gallery = JSX((props) => jsx(GalleryInner, { ...props, version: "normal" }));
 
-    const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans bg-white p-[50px] ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-4", title: title, description: description, headlineVersion: "M", align: "center", ...rest }), calendar ? renderCalendar(calendar) : null] })));
+    const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans bg-white p-12 ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-4", title: title, description: description, headlineVersion: "M", align: "center", ...rest }), calendar ? renderCalendar(calendar) : null] })));
     const renderCalendar = (calendar) => {
         const colCount = calendar.reduce((accumulator, currentValue) => currentValue?.month?.length ? accumulator + currentValue.month.length : accumulator, 0) || 1;
         const colSize = 100 / colCount;
@@ -2147,7 +2180,7 @@
         return (jsxs("div", { className: "w-full flex flex-col justify-center mt-13", children: [jsx("div", { className: "flex w-full mb-3 text-h6 text-center", children: mappedCalendar.map((_) => renderMonthNames(_, colSize)) }), jsx("div", { className: "flex w-full", children: mappedCalendar.map((_, ind) => (jsxs("div", { className: "pr-[11px] mr-3 border-r border-main-divider last:border-r-0 last:pr-0 last:mr-0", style: { flexBasis: _.flexBasis }, children: [jsx("div", { className: "flex", children: renderMonthImages(_) }), jsxs("div", { className: "text-s-light text-primary-text mt-3", children: [jsx("span", { children: _.text }), "\u2009", jsx("span", { className: "text-primary-main", children: _.greenText })] })] }, `monthItem-${ind}`))) })] }));
     };
     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(ImgInner, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
+    const renderMonthImages = (item) => item.month?.map((_) => _.image?.src ? (jsx("div", { className: "h-[207px] border-r pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0", children: jsx(ImgInner, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
 
     const checkIsHrefSameOrigin = (href, router) => getOrigin(href) === getOrigin(router.href);
 
@@ -2199,7 +2232,7 @@
         return [city, getCity];
     }
 
-    const HeaderSecondaryMenuButton = JSX(({ className = '', children, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 p-0 w-[24px] h-[24px] flex items-center bg-inherit cursor-pointer ${className}`, disabled: true, "aria-label": ariaLabel, children: children })));
+    const HeaderSecondaryMenuButton = JSX(({ className = '', children, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 p-0 w-6 h-6 flex items-center bg-inherit cursor-pointer ${className}`, disabled: true, "aria-label": ariaLabel, children: children })));
 
     const COLORS_MAP = {
         'bg-white': 'text-primary-text hover:text-primary-main',
@@ -2215,7 +2248,7 @@
     };
     const HeaderSecondaryMenu = JSX(({ className, officesLink, defaultLocation = 'Москва', bgColor = 'bg-white' }) => {
         const [city, getCity] = useGeolocation(defaultLocation);
-        return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: city, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: getCity, bgColor: bgColor }), officesLink ? (jsx(TopItem, { className: "mr-7", flat: true, href: officesLink, text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432", bgColor: bgColor })) : null, jsx(HeaderSecondaryMenuButton, { className: `mr-5 group ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(ImgInner, { image: { icon: 'LoupeIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full pointer-events-none", imageClassName: "group-hover:text-primary-hover group-hover:invert-0 pointer-events-none", asSVG: true }) }), jsx(HeaderSecondaryMenuButton, { className: `${LINKS_COLORS_MAP[bgColor]} group min-w-[32px] min-h-[32px]`, ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(ImgInner, { image: { icon: 'GridIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full bg-main-divider/20 rounded-full pointer-events-none", imageClassName: "group-hover:text-primary-hover group-hover:invert-0", asSVG: true }) })] }));
+        return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: city, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: getCity, bgColor: bgColor }), officesLink ? (jsx(TopItem, { className: "mr-7", flat: true, href: officesLink, text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432", bgColor: bgColor })) : null, jsx(HeaderSecondaryMenuButton, { className: `mr-5 group ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(ImgInner, { image: { icon: 'LoupeIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full pointer-events-none", imageClassName: "group-hover:text-primary-hover group-hover:invert-0 pointer-events-none", asSVG: true }) }), jsx(HeaderSecondaryMenuButton, { className: `${LINKS_COLORS_MAP[bgColor]} group min-w-8 min-h-8`, ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(ImgInner, { image: { icon: 'GridIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full bg-main-divider/20 rounded-full pointer-events-none", imageClassName: "group-hover:text-primary-hover group-hover:invert-0", asSVG: true }) })] }));
     });
 
     const findActiveSubItem = (router) => (items = []) => {
@@ -2240,7 +2273,7 @@
     const renderDot = (bgColor, i) => (jsx("div", { className: `w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}` }, String(i)));
 
     const TEXT_CLASSES$1 = 'font-sans text-l-light';
-    const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
+    const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-0.5';
     const HeaderItem = JSX(({ className = '', active, bgColor = 'bg-white', dataItemName, children, ...rest }) => {
         const link = useLink();
         const { href, target, text, onClick } = link(rest);
@@ -2299,7 +2332,7 @@
         const { topItems, logo, defaultLocation, officesLink } = useSWRResource(projectSettings.SITEMAP || 'sitemap', rest.options?.page?.fallback);
         const activeTopItem = showSubMenu ? getActiveItem(topItems, router) : null;
         const topMenu = topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, "aria-label": _.text, bgColor: bgColor, ..._ }, String(i))));
-        return (jsx(BlockWrapper, { tag: "header", className: `pt-6 px-20 ${bgColor} ${className} ${showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5'}`, ...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, { className: "ml-auto", defaultLocation: defaultLocation, officesLink: officesLink, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-[1px] ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
+        return (jsx(BlockWrapper, { tag: "header", className: `pt-6 px-20 ${bgColor} ${className} ${showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5'}`, ...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, { className: "ml-auto", defaultLocation: defaultLocation, officesLink: officesLink, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-px ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
     });
     const getActiveItem = (topItems, router) => {
         const [firstPortal] = topItems || [];
@@ -2332,14 +2365,14 @@
                             })
                             : null, renderArrows({
                             ...controls,
-                            btnClass: ['left-[50px]', 'right-[50px]'],
+                            btnClass: ['left-12', 'right-12'],
                             className: 'top-[62px]',
-                        }), canDec ? (jsx("div", { className: "absolute top-0 left-0 h-full w-[136px] bg-opacity-from-white" })) : null, canInc ? (jsx("div", { className: "absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" })) : null] }), jsx(Button, { className: "w-[240px] text-center", version: "primary", ...button, href: activeHref })] }));
+                        }), canDec ? (jsx("div", { className: "absolute top-0 left-0 h-full w-[136px] bg-opacity-from-white" })) : null, canInc ? (jsx("div", { className: "absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" })) : null] }), jsx(Button, { className: "w-60 text-center", version: "primary", ...button, href: activeHref })] }));
     });
     function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }) {
         const tabsShiftWidth = activeIndex * 460;
         const cardsAlignStyle = cards.length > 2 ? 'justify-start' : 'justify-center';
-        return (jsx("div", { style: { transform: `translateX(-${tabsShiftWidth}px)` }, className: "duration-1000 px-[50px]", children: jsx("div", { className: `w-full flex flex-nowrap gap-3.5 pb-12 ${cardsAlignStyle}`, children: cards.map((slide, i) => renderNavButton$2({
+        return (jsx("div", { style: { transform: `translateX(-${tabsShiftWidth}px)` }, className: "duration-1000 px-12", children: jsx("div", { className: `w-full flex flex-nowrap gap-3.5 pb-12 ${cardsAlignStyle}`, children: cards.map((slide, i) => renderNavButton$2({
                     slide,
                     i,
                     isActive: Boolean(i === selectedCardIndex),
@@ -2362,7 +2395,7 @@
     const InsuranceAmountBlock = JSX(({ className = '', title, insuranceTabs = [], button, ...rest }) => {
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
         const handleActiveSlideIndex = useCallback((_) => setActiveSlideIndex(_), []);
-        return (jsxs(BlockWrapper, { className: `box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white ${className}`, ...rest, children: [title ? jsx(Heading, { className: "text-center mb-8", title: title, headingType: "h3" }) : null, insuranceTabs?.length > 1 ? (jsx("div", { className: "p-1.5 bg-secondary-light w-fit mx-auto mb-7 rounded-md", children: insuranceTabs.map((item, i) => renderNavButton$1({
+        return (jsxs(BlockWrapper, { className: `box-border py-12 overflow-hidden relative font-sans w-100 bg-white ${className}`, ...rest, children: [title ? jsx(Heading, { className: "text-center mb-8", title: title, headingType: "h3" }) : null, insuranceTabs?.length > 1 ? (jsx("div", { className: "p-1.5 bg-secondary-light w-fit mx-auto mb-7 rounded-md", children: insuranceTabs.map((item, i) => renderNavButton$1({
                         title: item?.title,
                         i,
                         isActive: Boolean(i === activeSlideIndex),
@@ -2457,7 +2490,7 @@
         double: 'flex gap-x-5 gap-y-[26px] flex-wrap',
         single: 'flex gap-3.5 flex-col',
     };
-    const LinkDocs = JSX(({ className = '', title, description, align = 'center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-[50px] bg-white ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, align: align, headlineVersion: "M", as: "h2", ...rest }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] })));
+    const LinkDocs = JSX(({ className = '', title, description, align = 'center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-12 bg-white ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, align: align, headlineVersion: "M", as: "h2", ...rest }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] })));
 
     const MiniGallery = JSX((props) => (jsx(GalleryInner, { ...props, version: "mini" })));
 
@@ -2484,7 +2517,7 @@
         const textColorClass = version === 'primary' ? 'text-primary-text' : '';
         const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
         const buttonsWithClass = buttons?.map((_) => ({ ..._, className: 'min-w-[168px]' }));
-        return (jsxs(BlockWrapper, { className: `flex justify-between font-sans p-[50px] box-border relative min-h-[320px]
+        return (jsxs(BlockWrapper, { className: `flex justify-between font-sans p-12 box-border relative min-h-80
         ${getTileMinHeight(className)}
         ${VersionStyleMap[version]}
         ${className}`, ...rest, children: [jsxs(BaseTile, { className: "z-10", title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap mb-7 w-full
@@ -2629,7 +2662,7 @@
 
     const YMAPS_NAMESPACE = 'ymaps';
     const useYandexMaps = () => {
-        const url = `https://api-maps.yandex.ru/2.1/?apikey=${projectSettings.YANDEX_MAP_API_KEY}&lang=ru_RU`;
+        const url = `https://api-maps.yandex.ru/2.1/?apikey=${projectSettings.YANDEX_MAP_API_KEY || ''}&lang=ru_RU`;
         return useExternalNS(YMAPS_NAMESPACE, url);
     };
 
@@ -2853,16 +2886,15 @@
     // TODO: Список регионов можно получить через api/v1/regions
     function useOfficeMap(regionCode) {
         const { data } = useAsyncData(regionCode ? `${OFFICE_MAP_URL}?regionCode=${regionCode}` : undefined, fetchOfficeMap);
-        console.warn('WARNING!!!  Hook useOfficeMap RETURN MOCK object for testing!');
-        console.log('Hook useOfficeMap get this data:', data);
+        console.warn('Hook useOfficeMap RETURNs MOCK object for testing', data);
         return OFFICE_MAP;
     }
-    const fetchOfficeMap = (url) => {
+    function fetchOfficeMap(url) {
         if (!url) {
             return {};
         }
         return fetchJSON(url, { method: 'GET' });
-    };
+    }
 
     const OfficeMap = JSX(({ className = '' }) => {
         // TODO: useOfficeMap endpoint had use /api/v1/branches. This endpoint now is`t correct/
@@ -2966,7 +2998,7 @@
         else if (benefitsVersion === 'normal') {
             bgColorStyle = 'bg-secondary-light text-primary-main';
         }
-        return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
+        return `w-12 h-12 min-w-12 rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
     }
 
     const PictureText = JSX(({ className = '', title, description, image, benefits, version = 'primary', sum, monthLimit, directionRight = false, ...rest }) => (jsxs(BlockWrapper, { className: `relative font-sans py-12 px-24 ${VersionStyleMap[version]} ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, align: "center", ...rest }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src ? jsx(ImgInner, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(Number(sum), Number(monthLimit))] })] })] })));
@@ -3049,7 +3081,7 @@
     const ProductBlock = JSX((props) => {
         const { className = '', breadcrumbs, backwardButton, version = 'primary', ...rest } = props;
         const buttonVersion = version === 'primary' ? version : 'white';
-        return (jsxs(BlockWrapper, { className: `font-sans overflow-hidden p-[50px] flex flex-col box-border min-h-[454px] ${VersionStyleMap[version]} ${className}`, ...rest, children: [backwardButton?.text
+        return (jsxs(BlockWrapper, { className: `font-sans overflow-hidden p-12 flex flex-col box-border min-h-[454px] ${VersionStyleMap[version]} ${className}`, ...rest, children: [backwardButton?.text
                     ? renderBackwardButton(backwardButton, buttonVersion, 'mb-10 -mt-2.5')
                     : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs-light mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbsStyleMap[version]}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { className: breadcrumbsStyleMap[version], ...breadcrumb }, String(i))))) })) : null, jsx(ProductBlockInner, { version: version, ...rest })] }));
     });
@@ -3068,7 +3100,7 @@
         const galleryBlocks = slides.map((s) => s.productBlock);
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
         const handleActiveSlideIndex = useCallback((_) => setActiveSlideIndex(_), []);
-        return (jsxs(BlockWrapper, { className: `box-border pt-[50px] overflow-hidden relative font-sans w-100 mb-6 ${className}
+        return (jsxs(BlockWrapper, { className: `box-border pt-12 overflow-hidden relative font-sans w-100 mb-6 ${className}
         ${VersionStyleMap[version]}`, ...rest, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest, version }, i)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28", children: galleryNav.map((slide, i) => renderNavButton({
                         slide,
                         i,
@@ -3080,7 +3112,7 @@
     function renderProductBlock(block, i) {
         const { version } = block;
         const additionalClass = version ? productBlockStyleMap[version].title : '';
-        return (jsx("section", { className: "box-border relative flex grow-0 shrink-0 basis-full", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { className: `pl-[50px] z-10 ${additionalClass}`, textBlockClassName: "mb-[154px]", headlineVersion: "XXL", ...block }) }) }, String(i)));
+        return (jsx("section", { className: "box-border relative flex grow-0 shrink-0 basis-full", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { className: `pl-12 z-10 ${additionalClass}`, textBlockClassName: "mb-[154px]", headlineVersion: "XXL", ...block }) }) }, String(i)));
     }
     function renderNavButton({ slide, i, isActive, onClick, version }) {
         const btnClassName = isActive
@@ -3369,13 +3401,13 @@
         const titleMargin = title ? 'mt-9' : '';
         const paddingX = getPaddingX(steps.length);
         return (jsxs(BlockWrapper, { className: [
-                'box-border py-[50px] font-sans',
+                'box-border py-12 font-sans',
                 shortGaps ? 'px-20' : 'px-[70px]',
                 'flex flex-col items-center overflow-hidden',
                 styleMap.background,
                 styleMap.title,
                 className,
-            ].join(' '), ...rest, children: [title ? (jsx(Heading, { headingType: "h3", className: "max-w-[752px] text-center", title: title })) : null, steps?.length ? (jsxs("div", { className: `box-border ${titleMargin}`, children: [jsx("div", { className: `flex items-center ${paddingX}`, children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${lineOpacity}` }))(steps.map(renderStepIcon(styleMap, version))) }), jsx("div", { className: `flex justify-between mt-4 ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepContent({ styleMap, isMainButton: Boolean(button?.text), version })) })] })) : null, button?.text ? (jsx(Button, { className: "mt-8 min-w-[240px]", version: "primary", ...button })) : null] }));
+            ].join(' '), ...rest, children: [title ? (jsx(Heading, { headingType: "h3", className: "max-w-[752px] text-center", title: title })) : null, steps?.length ? (jsxs("div", { className: `box-border ${titleMargin}`, children: [jsx("div", { className: `flex items-center ${paddingX}`, children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${lineOpacity}` }))(steps.map(renderStepIcon(styleMap, version))) }), jsx("div", { className: `flex justify-between mt-4 ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepContent({ styleMap, isMainButton: Boolean(button?.text), version })) })] })) : null, button?.text ? jsx(Button, { className: "mt-8 min-w-60", version: "primary", ...button }) : null] }));
     });
     const renderStepIcon = (styleMap, version) => ({ icon }, i) => (jsx("div", { className: "flex flex-col items-center text-center", children: jsx("div", { className: `h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center
             ${styleMap.iconBackground} ${styleMap.title}`, children: checkIsIconRenderable(icon) ? (jsx(ImgInner, { image: getIconWithVersion(icon || {}, version), width: "48", height: "48", asSVG: true })) : (jsx("span", { className: `text-h4 ${styleMap.iconText}`, children: i + 1 })) }) }, String(i)));
@@ -3392,14 +3424,10 @@
     const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover:text-primary-main';
 
     const LinkTab = JSX((props) => {
-        const { tab, currentTab, onClick } = props;
+        const { tab, currentTab } = props;
         const active = currentTab?.type === 'link' && currentTab.href === tab.href;
-        const handleClick = useCallback(() => {
-            onClick && onClick(tab);
-            EventBus.inst.fire('anchorClick', { isScrolling: true, label: tab.href });
-        }, [tab, onClick]);
         const link = useLink();
-        const adjustedProps = link({ ...tab, onClick: handleClick });
+        const adjustedProps = link(tab);
         return (jsx("a", { role: "tab", className: `${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`, target: tab.target, href: adjustedProps.href, onClick: adjustedProps.onClick, children: jsx("span", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: tab.text }) }));
     });
 
@@ -3439,26 +3467,20 @@
         const { className = '', tabs, showCounter, isSticky, ...rest } = props;
         const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
         useEffect(() => EventBus.inst.subscribe('tab', (event) => {
-            if (!tabs) {
-                return;
-            }
-            const tab = tabs.find(checkTab(event));
+            const tab = tabs?.find(checkTab(event));
             if (event.type === 'link' && tab) {
                 setCurrentTab(tab);
             }
         }), [tabs]);
-        useEffect(() => {
-            if (currentTab?.type === 'group') {
-                return EventBus.inst.subject('tab', { label: currentTab.ref });
-            }
-            return undefined;
-        }, [currentTab]);
-        const handleClick = (selectedTab) => {
+        useEffect(() => currentTab?.type === 'group'
+            ? EventBus.inst.subject('tab', { label: currentTab.ref })
+            : undefined, [currentTab]);
+        const handleClick = useCallback((selectedTab) => {
             if (selectedTab?.type === 'group') {
                 EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
             }
             setCurrentTab(selectedTab);
-        };
+        }, []);
         return (jsx(BlockWrapper, { className: `${isSticky ? 'sticky top-1 z-20 ' : ''}box-border flex gap-x-1 ${className}`, role: "tablist", ...rest, children: tabs?.map(renderTab({ onClick: handleClick, currentTab, showCounter, ...rest })) }));
     });
     const checkTab = (event) => (_) => _.type === 'link' && _.href === `#${event.label}`;
@@ -3612,7 +3634,7 @@
         const [openTableInnerIdx, setOpenTableInnerIdx] = useState(undefined);
         const handleOpenTableInnerIdx = useCallback((_) => setOpenTableInnerIdx(_), []);
         const onHideContentClick = () => setTableInner(undefined);
-        return (jsxs(TariffsTableRowContainer, { onHideContentClick: onHideContentClick, tableInner: tableInner, ...rest, children: [jsx("div", { className: `text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`, children: jsxs("div", { className: "flex items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(ImgInner, { className: "mr-[14px] max-w-6 max-h-6", image: getIconWithVersion(header.icon), width: "24px", height: "24px", asSVG: true })) : null, header?.title ? jsx("div", { className: "text-m-light", children: header?.title }) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, rowIdx: rowIdx, cellIdx: i, setTableInner: handleSetTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: handleOpenTableInnerIdx, ...rest }, String(i)))) })) : null] }));
+        return (jsxs(TariffsTableRowContainer, { onHideContentClick: onHideContentClick, tableInner: tableInner, ...rest, children: [jsx("div", { className: `text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`, children: jsxs("div", { className: "flex items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(ImgInner, { className: "mr-3.5 max-w-6 max-h-6", image: getIconWithVersion(header.icon), width: "24px", height: "24px", asSVG: true })) : null, header?.title ? jsx("div", { className: "text-m-light", children: header?.title }) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, rowIdx: rowIdx, cellIdx: i, setTableInner: handleSetTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: handleOpenTableInnerIdx, ...rest }, String(i)))) })) : null] }));
     });
 
     const TariffsTable = JSX(({ className = '', title, description, rowHeaders, tariffsColumns: columns, hiddenRowsNum = 0, ...rest }) => {
@@ -3628,7 +3650,7 @@
         });
         const rows = (rowData || []).map((row, i) => (jsx(TariffsTableRow, { row: row, activeIndex: activeIndex, rowIdx: i, ...rest }, String(i))));
         const [visibleRows, hiddenRows] = hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
-        return (jsxs(BlockWrapper, { className: `bg-white font-sans p-[50px] overflow-hidden text-primary-text relative ${itemCount > 1 ? 'pr-0' : ''} ${className}`, ...rest, children: [renderTitle({ title, description }), renderDescription(description), hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(Wrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(Wrapper, { controls: controls, children: rows }))] }));
+        return (jsxs(BlockWrapper, { className: `bg-white font-sans p-12 overflow-hidden text-primary-text relative ${itemCount > 1 ? 'pr-0' : ''} ${className}`, ...rest, children: [renderTitle({ title, description }), renderDescription(description), hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(Wrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(Wrapper, { controls: controls, children: rows }))] }));
     });
     function renderTitle({ title, description }) {
         return title ? (jsx(Heading, { headingType: "h3", className: `text-center ${description ? 'mb-2.5' : 'mb-8'}`, title: title })) : null;
@@ -3804,6 +3826,63 @@
         CarouselInvestmentCard,
     };
 
+    const debounce = (fn, delay = 600) => {
+        let timerId;
+        const debouncedCallback = (...args) => {
+            debouncedCallback.dispose();
+            timerId = setTimeout(() => {
+                fn(...args);
+            }, delay);
+        };
+        debouncedCallback.dispose = () => {
+            if (timerId) {
+                clearTimeout(timerId);
+            }
+        };
+        return debouncedCallback;
+    };
+
+    const SPECIAL_BLOCK_TYPES = ['Header', 'Footer'];
+    const EPS = 0.01;
+    const topLineDelta = ([, { target }]) => Math.abs(target.getBoundingClientRect().top);
+    function findActiveBlock(intersections) {
+        const visibleIntersections = intersections
+            .filter(([block]) => !SPECIAL_BLOCK_TYPES.includes(block.type || ''))
+            .filter(([, { intersectionRatio }]) => intersectionRatio > EPS);
+        const [activeBlock] = visibleIntersections.length > 0 ? minBy(topLineDelta)(visibleIntersections) : [];
+        return activeBlock;
+    }
+
+    const isScrolledEnough = () => globalThis.scrollY > (globalThis.innerHeight * 3) / 4;
+    function useBlockRouterProvider(router = BlockRouter.inst, scrollTarget = globalThis) {
+        const intersectionsMapRef = useRef(new Map());
+        useEffect(() => router.eventBus.subscribe('intersection', ({ block, intersection }) => {
+            if (intersectionsMapRef.current) {
+                intersectionsMapRef.current.set(block, intersection);
+            }
+        }), [router]);
+        useEffect(() => {
+            const handleScroll = debounce(() => {
+                if (!isScrolledEnough()) {
+                    router.reset();
+                    return;
+                }
+                const activeBlock = findActiveBlock([...(intersectionsMapRef.current || [])]);
+                if (activeBlock?.anchor) {
+                    router.replace(activeBlock.anchor);
+                }
+                else if (!activeBlock) {
+                    router.reset();
+                }
+            }, 100);
+            scrollTarget.addEventListener('scroll', handleScroll);
+            return () => {
+                handleScroll.dispose();
+                scrollTarget.removeEventListener('scroll', handleScroll);
+            };
+        }, [router, scrollTarget]);
+    }
+
     const api = LikeAPI();
     function useLikeService(pagePath) {
         const [likeCount, setLikeCount] = useState(0);
@@ -3855,6 +3934,7 @@
             blockDecorator,
             parent: data,
         };
+        useBlockRouterProvider();
         return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [slots?.header ? (jsx("div", { className: "mb-5 shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, {
                         ...options,
                         slotName: 'header',
@@ -3871,7 +3951,7 @@
         return (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" }) }));
     }
 
-    const packageVersion = "0.6.37";
+    const packageVersion = "0.6.39";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;