@redneckz/wildless-cms-uni-blocks 0.6.36 → 0.6.38

package/bundle/bundle.umd.js

@@ -85,6 +85,9 @@
         get CDN() {
             return this._.CDN;
         }
+        get BASE_PATH() {
+            return this._.BASE_PATH;
+        }
         get YANDEX_MAP_API_KEY() {
             return this._.YANDEX_MAP_API_KEY;
         }
@@ -289,8 +292,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 +305,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 +340,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 +428,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 +558,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 +572,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) => {
@@ -581,9 +610,10 @@
         if (!href) {
             return href;
         }
+        const hrefWithBasePath = `${projectSettings.BASE_PATH || ''}${href}`;
         const origin = getOrigin(router?.href);
         // Relative URL
-        return origin ? href.replace(origin, '') || '/' : href;
+        return origin ? hrefWithBasePath.replace(origin, '') || '/' : hrefWithBasePath;
     };
 
     /* eslint-disable @typescript-eslint/ban-types */
@@ -615,6 +645,7 @@
 
     function useLink() {
         const router = useRouter();
+        const blockRouter = useBlockRouter();
         return (props) => {
             const href = adjustHref(props.href, router);
             return {
@@ -625,8 +656,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 +821,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 +838,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 +866,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;
@@ -1074,7 +1112,9 @@
 
     const BonusCalculatorForm = JSX(({ className = '', sourceBookDir = '', buttons, footnote }) => {
         const [travelExpenseValue, setTravelExpenseValue] = useState(DEFAULT_TRAVEL_MIN_SUM);
+        const handleTravelExpenseValue = useCallback((_) => setTravelExpenseValue(_), []);
         const [restExpenseValue, setRestExpenseValue] = useState(DEFAULT_REST_MIN_SUM);
+        const handleRestExpenseValue = useCallback((_) => setRestExpenseValue(_), []);
         const userInputParams = {
             travelExpenseValue,
             restExpenseValue,
@@ -1086,14 +1126,14 @@
                             moneyValue: travelExpenseValue,
                             step: 500,
                             isShowItems: false,
-                        }, setTravelExpenseValue), renderWantedSumInput('Сумма покупок в остальных категориях, ₽', {
+                        }, handleTravelExpenseValue), renderWantedSumInput('Сумма покупок в остальных категориях, ₽', {
                             className: 'mt-7',
                             minSum: minSumOther,
                             maxSum: maxSumOther,
                             moneyValue: restExpenseValue,
                             step: 500,
                             isShowItems: false,
-                        }, setRestExpenseValue)] }), jsx("div", { children: monthBonus >= 0 ? (jsx(Rate, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u043C\u0435\u0441\u044F\u0446", rate: monthBonus, rateBlockClassName: "tracking-[-14px]" })) : null }), jsxs("div", { className: "w-full max-w-[350px]", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonSection(buttons), renderFootnote(footnote)] })] }));
+                        }, handleRestExpenseValue)] }), jsx("div", { children: monthBonus >= 0 ? (jsx(Rate, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u043C\u0435\u0441\u044F\u0446", rate: monthBonus, rateBlockClassName: "tracking-[-14px]" })) : null }), jsxs("div", { className: "w-full max-w-[350px]", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonSection(buttons), renderFootnote(footnote)] })] }));
     });
 
     const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
@@ -1179,7 +1219,9 @@
         const [isSalaryClient, toggleIsSalaryClient] = useState(false);
         const [isStateEmployee, toggleIsStateEmployee] = useState(false);
         const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
+        const handleMoneyValue = useCallback((_) => setMoneyValue(_), []);
         const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
+        const handleMonthsValue = useCallback((_) => setMonthsValue(_), []);
         const userInputParams = {
             isAnnuity,
             isInsurance,
@@ -1189,7 +1231,7 @@
             monthsValue,
         };
         const calculatorParams = useCreditCalculatorParams(userInputParams, sourceBookDir);
-        return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма кредита, ₽', { ...calculatorParams, step: 500 }, setMoneyValue), renderMonthsInput('Срок кредита, месяцев', calculatorParams, setMonthsValue), jsxs("div", { className: "mt-7", children: [jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", checked: isSalaryClient, onChange: toggleIsSalaryClient }), jsx(Checkbox, { className: "mt-3", text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", checked: isStateEmployee, onChange: toggleIsStateEmployee }), jsx(Checkbox, { className: "mt-3", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", checked: isInsurance, onChange: toggleIsInsurance })] })] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.finalRate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: isAnnuity ? 'Ежемесячный платеж' : 'Платёж в первый месяц', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), jsx(RadioButtonGroup, { items: paymentTypeItems, checkedItem: isAnnuity ? ANNUITY : DIFFERENTIAL, onChange: (text) => toggleIsAnnuity(text === ANNUITY) }), renderButtonSection(buttons), renderFootnote(footnote)] })] }));
+        return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма кредита, ₽', { ...calculatorParams, step: 500 }, handleMoneyValue), renderMonthsInput('Срок кредита, месяцев', calculatorParams, handleMonthsValue), jsxs("div", { className: "mt-7", children: [jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", checked: isSalaryClient, onChange: toggleIsSalaryClient }), jsx(Checkbox, { className: "mt-3", text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", checked: isStateEmployee, onChange: toggleIsStateEmployee }), jsx(Checkbox, { className: "mt-3", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", checked: isInsurance, onChange: toggleIsInsurance })] })] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.finalRate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: isAnnuity ? 'Ежемесячный платеж' : 'Платёж в первый месяц', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), jsx(RadioButtonGroup, { items: paymentTypeItems, checkedItem: isAnnuity ? ANNUITY : DIFFERENTIAL, onChange: (text) => toggleIsAnnuity(text === ANNUITY) }), renderButtonSection(buttons), renderFootnote(footnote)] })] }));
     });
 
     const useDepositCalculatorParams = (userInputParams, sourceBookDir) => {
@@ -1229,6 +1271,7 @@
     ];
     const DepositCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote }) => {
         const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
+        const handleMoneyValue = useCallback((_) => setMoneyValue(_), []);
         const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
         const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
         const userInputParams = {
@@ -1236,13 +1279,14 @@
             monthsValue,
             isMonthlyInterestPayment,
         };
+        const handleMonthsValue = useCallback((_) => setMonthsValue(_), []);
         const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir);
         const { income, finalSum, rate } = calculatorParams;
         return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма вклада, ₽', {
                             ...calculatorParams,
-                        }, setMoneyValue), renderMonthsInput('Срок вклада, месяцев', {
+                        }, handleMoneyValue), renderMonthsInput('Срок вклада, месяцев', {
                             ...calculatorParams,
-                        }, setMonthsValue)] }), jsx(Rate, { rate: rate || 1, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [income ? (jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" })) : null, finalSum ? (jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" })) : null, jsx(RadioButtonGroup, { items: depositTypeItems, checkedItem: isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM, onChange: (text) => toggleIsMonthlyInterestPayment(text === EVERY_MONTH) }), renderButtonSection(buttons), renderFootnote(footnote)] })] }));
+                        }, handleMonthsValue)] }), jsx(Rate, { rate: rate || 1, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [income ? (jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" })) : null, finalSum ? (jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" })) : null, jsx(RadioButtonGroup, { items: depositTypeItems, checkedItem: isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM, onChange: (text) => toggleIsMonthlyInterestPayment(text === EVERY_MONTH) }), renderButtonSection(buttons), renderFootnote(footnote)] })] }));
     });
 
     const EmbeddableCalcBlocks = {
@@ -1278,7 +1322,7 @@
                             className: 'top-8',
                         })] }), jsx("div", { className: "flex", style: { transform: `translateX(-${slideIndexShift}00%)` }, role: "list", children: calculatorBlocks?.length ? calculatorBlocks.map(renderCalculatorBlock) : null })] }));
     });
-    function renderNavButton$2({ tab, i, isActive, onClick }) {
+    function renderNavButton$3({ tab, i, isActive, onClick }) {
         const btnClassName = isActive
             ? 'h-[88px] w-[387px] min-w-[387px] p-5 border-none bg-primary-main text-white'
             : `h-[77px] w-[328px] min-w-[328px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
@@ -1297,7 +1341,7 @@
     }
     function renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick }) {
         const CARD_SHIFT = 388;
-        return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }, className: "flex flex-col justify-end items-center h-[126px] pt-9 box-border duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap items-end gap-2", children: tabsNav.map((tab, i) => renderNavButton$2({
+        return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }, className: "flex flex-col justify-end items-center h-[126px] pt-9 box-border duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap items-end gap-2", children: tabsNav.map((tab, i) => renderNavButton$3({
                             tab,
                             i,
                             isActive: Boolean(i === slideIndexShift),
@@ -1374,7 +1418,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) => {
@@ -1491,7 +1535,7 @@
 
     const ITEMS_GAP = 4;
     const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px]';
-    const scrollButtonStyle = 'absolute top-1/2 z-50';
+    const scrollButtonStyle = 'absolute top-[calc(50%-12px)] z-50';
     const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, ...rest }) => {
         const { blocks: childBlocks } = rest.block || {};
         const count = itemCount || childBlocks?.length || 0;
@@ -1506,16 +1550,14 @@
         'CarouselTariffsCard',
         'CarouselLinks',
         'CarouselProgramsCard',
+        'CarouselInvestmentCard',
     ];
     const renderScrollButtons = ({ scrollLeft, scrollRight, canScrollLeft, canScrollRight, }) => (jsxs("div", { children: [canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-8`, onClick: scrollLeft })) : null, canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle} right-8`, onClick: scrollRight })) : null] }));
 
-    const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans border border-main-stroke flex min-w-[536px] ${VersionStyleMap[version]} ${className}`, ...rest, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-end", children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: " mb-3.5", headingType: "h5", title: title }) : null, list.length ? jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$2) }) : null] })] })));
-    const renderList$2 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: `text-h6`, children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
-
     const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-full h-full';
     const CARD_WIDTH_MAP = {
-        normal: `w-[${1007 + 48}px]`,
-        mini: `w-[${350 + 48}px]`,
+        normal: 'min-w-[1007px]',
+        mini: 'min-w-[355px]',
     };
     const CarouselCard = JSX(({ className = '', button, description, title, version = 'normal' }) => (jsx("section", { className: `flex pb-9 pl-12 ${CARD_WIDTH_MAP[version]} ${className}`, children: jsxs("div", { className: "relative w-full", children: [jsx("div", { className: `${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-6 right-8 bg-green` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light` }), jsxs("div", { className: "relative bg-white z-10 py-6 px-10 border border-solid border-green-light", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center" }), button ? jsx("div", { className: "mt-6", children: renderButton({ button }) }) : null] })] }) })));
 
@@ -1541,12 +1583,17 @@
                     .map((link, index) => (jsx(LinkButton, { className: "m-1", ...link }, String(index)))) }, String(groupIndex)))) }));
     };
 
+    const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans border border-main-stroke flex min-w-[536px] ${VersionStyleMap[version]} ${className}`, ...rest, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-end", children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: " mb-3.5", headingType: "h5", title: title }) : null, list.length ? jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$2) }) : null] })] })));
+    const renderList$2 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: `text-h6`, children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
+
     const VISIBLE_ROWS_COUNT = 1;
     const CarouselTariffsCard = JSX(({ className = '', title, icon, isHighlighting, button, rows = [], ...rest }) => {
         const rowsNode = rows.map(renderCardInfo);
         const visibleRows = rowsNode.slice(0, VISIBLE_ROWS_COUNT);
         const hiddenRows = rowsNode.slice(VISIBLE_ROWS_COUNT);
-        return (jsx(BlockWrapper, { className: `font-sans ${className}`, ...rest, children: jsxs("div", { className: `relative bg-white border border-main-stroke min-w-[322px] p-8 ${getHitStyle(isHighlighting)}`, children: [isHighlighting ? renderHitIcon() : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, title ? (jsx(Heading, { className: "text-primary-text text-center pt-2", headingType: "h5", title: title })) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, rows?.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: rows.length > 1 ? renderFoldButton$1 : null })) : null] }) }));
+        return (jsxs(BlockWrapper, { className: `font-sans relative bg-white border border-main-stroke min-w-[322px] p-8 
+        ${getHitStyle(isHighlighting)}
+        ${className}`, ...rest, children: [isHighlighting ? renderHitIcon() : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, title ? (jsx(Heading, { className: "text-primary-text text-center pt-2", headingType: "h5", title: title })) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, rows.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: rows.length > 1 ? renderFoldButton$1 : null })) : null] }));
     });
     const getHitStyle = (isHighlighting) => isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-9';
     const renderFoldButton$1 = ({ isUnfolded, onToggle }) => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center", onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16", asSVG: true })] }));
@@ -1560,7 +1607,7 @@
     const CatalogCard = JSX(({ className = '', title, description, image, price, button, colors }) => (jsxs("section", { className: `border border-solid box-border border-main-stroke p-[30px] min-w-[402px] flex flex-col justify-left ${className}`, role: "listitem", children: [image?.src ? jsx(ImgInner, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? jsx("div", { className: "text-m-light text-left mb-4", children: description }) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-s-light text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }), colors.map(renderColorOption)] })) : null, price ? jsxs("div", { className: "text-h3 text-left", children: [price, "\u00A0\u20BD"] }) : null, button ? renderButton({ button, buttonClassName: 'mt-5 w-full' }) : null] })));
     const renderColorOption = (color, i) => (jsx("span", { className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap$1[color]}` }, String(i)));
 
-    const BLUR_BLOCK_CLASSES$2 = 'absolute top-0 bottom-0 w-[84px]';
+    const BLUR_BLOCK_CLASSES$1 = 'absolute top-0 bottom-0 w-[84px]';
     const CARD_VIEW_COUNT$1 = 3;
     const CARD_SHIFT$1 = 430;
     const Catalog = JSX(({ cards = [], className = '', title, description, ...rest }) => {
@@ -1568,11 +1615,11 @@
             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',
-                }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$2} left-0 bg-opacity-from-white` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$2} right-0 bg-opacity-to-white` })] }));
+                }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} left-0 bg-opacity-from-white` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} right-0 bg-opacity-to-white` })] }));
     });
 
     const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
@@ -1637,14 +1684,14 @@
 
     const ComparisonTable = JSX(({ className = '', title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, ...rest }) => {
         const [isShowAllRow, setIsShowAllRow] = useState(!visibleRowLength);
-        const showToggle = 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
-                    ? renderShowMoreToggleButton({ isShowAllRow, onClick: showToggle })
+        const handleToggle = useCallback(() => setIsShowAllRow((_) => !_), []);
+        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;
 
@@ -1749,7 +1796,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) => {
@@ -1872,7 +1919,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) || [];
@@ -2018,7 +2065,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 }));
     });
@@ -2036,8 +2083,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 = {
@@ -2090,8 +2137,13 @@
         return (jsx("section", { className: `${TEXT_STYLE_MAP[version]} ${TEXT_SIZE_MAP[listItemSize]} ${className} ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''}`, role: "list", children: items.map((item, i) => (jsx(ListItem, { className: `${itemClassName} mb-1.5`, isDotted: isDotted, version: version, size: listItemSize, children: item }, String(i)))) }));
     });
 
-    const GalleryCardInner = JSX(({ title, headlineSmallVersion = 'H6', description, additionalDescription, icon, items, button, version, isDotted = true, align = 'center', }) => (jsxs("div", { className: `h-full flex flex-col justify-between ${AlignText[align]}`, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$1(icon, version), renderCardTitle(headlineSmallVersion, title), renderDescription$2(description, title), items?.length ? renderItems$1(items, isDotted, version) : null, renderAdditionalDescription$1(additionalDescription)] }), button?.text ? renderButton({ button, buttonClassName: 'mt-6' }) : 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 GalleryCardInner = JSX(({ title, headlineSmallVersion = 'H6', description, additionalDescription, icon, items, button, version, isFullWidth = true, isDotted = true, align = 'center', }) => (jsxs("div", { className: `h-full flex flex-col justify-between ${AlignText[align]}`, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$1(icon, version), renderCardTitle(headlineSmallVersion, title), renderDescription$2(description, title), items?.length ? renderItems$1(items, isDotted, version) : null, renderAdditionalDescription$1(additionalDescription)] }), button?.text
+                ? renderButton({
+                    button,
+                    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-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;
@@ -2118,7 +2170,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;
@@ -2132,7 +2184,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);
 
@@ -2184,7 +2236,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',
@@ -2200,7 +2252,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 = []) => {
@@ -2225,7 +2277,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);
@@ -2284,7 +2336,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 || [];
@@ -2292,6 +2344,11 @@
         return topItems?.find(isTopItemActive(router)) || firstPortal;
     };
 
+    const ImgBlock = JSX((props) => {
+        const { className, image, ...rest } = props;
+        return (jsx(BlockWrapper, { className: className, ...rest, children: jsx(ImgInner, { image: image }) }));
+    });
+
     const InsuranceAmountBlockInner = JSX(({ className = '', cards = [], button }) => {
         const [selectedCardIndex, setSelectedCardIndex] = useState(0);
         const handleSelectedCardIndex = useCallback((_) => setSelectedCardIndex(_), []);
@@ -2312,21 +2369,21 @@
                             })
                             : 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) => renderSlide({
+        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),
                     onClick: () => onClick(i),
                 })) }) }));
     }
-    function renderSlide({ slide, i, isActive, onClick }) {
+    function renderNavButton$2({ slide, i, isActive, onClick }) {
         const btnClassName = isActive
             ? 'shadow-dark-blue/42 border-primary-main'
             : `ease-in duration-300 border-main-stroke`;
@@ -2341,11 +2398,12 @@
 
     const InsuranceAmountBlock = JSX(({ className = '', title, insuranceTabs = [], button, ...rest }) => {
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-        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({
+        const handleActiveSlideIndex = useCallback((_) => setActiveSlideIndex(_), []);
+        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,
-                        activeSlideIndex,
-                        onClick: () => setActiveSlideIndex(i),
+                        isActive: Boolean(i === activeSlideIndex),
+                        onClick: () => handleActiveSlideIndex(i),
                     })) })) : null, jsx("div", { className: "flex", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: renderInsuranceGalleries({
                         insuranceTabs,
                         button,
@@ -2357,50 +2415,11 @@
             ? insuranceGalleries.map((cards, i) => (jsx(InsuranceAmountBlockInner, { button: button, cards: cards }, String(i))))
             : null;
     };
-    function renderNavButton$1({ title, i, activeSlideIndex, onClick }) {
-        const isActiveBtn = i === activeSlideIndex;
-        const btnClassName = isActiveBtn
-            ? 'bg-primary-main text-white rounded-md'
-            : `text-secondary-text`;
+    function renderNavButton$1({ title, i, isActive, onClick }) {
+        const btnClassName = isActive ? 'bg-primary-main text-white rounded-md' : `text-secondary-text`;
         return (jsx("button", { type: "button", onClick: onClick, "aria-label": title, className: `box-border px-4 py-3 text-m-light ${btnClassName}`, children: title }, String(i)));
     }
 
-    const BorderVersionStyleMap = {
-        primary: 'border-main-stroke',
-        secondary: 'border-white/50',
-    };
-
-    const getItemListFontSize = (colValue) => (colValue === 'single' ? 'text-h6' : 'text-l');
-    const cardColumnsModeStyleMap = {
-        double: 'flex gap-y-2 gap-x-10 flex-wrap',
-        single: 'flex gap-y-2 flex-col',
-    };
-    const InvestmentGalleryCard = JSX(({ className = '', columnsMode = 'double', description, additionalDescription, image, cardList, title, version = 'primary', }) => {
-        const tileTitle = title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
-        const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
-        return (jsx("section", { className: `relative overflow-hidden text-left border border-solid box-border
-          p-9 min-w-[697px] min-h-[319px]
-          ${BorderVersionStyleMap[version]}
-          ${className}`, role: "listitem", children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "flex flex-col justify-between", children: [jsxs("div", { className: "flex itens-center justify-between mb-4", children: [description ? jsx("span", { className: "text-h6", children: description }) : null, additionalDescription ? (jsxs("span", { className: "text-m-light text-secondary-text", children: [" ", additionalDescription, " "] })) : null] }), cardList?.length ? (jsx("div", { className: `${cardColumnsModeStyleMap[columnsMode]}`, role: "list", children: renderCardList(cardList, columnsMode) })) : null] }) }) }));
-    });
-    const renderCardList = (cardList, columnsMode) => cardList.map((item, i) => (jsxs("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: [item?.parameter ? (jsx("span", { className: `pr-2.5 ${getItemListFontSize(columnsMode)}`, children: item.parameter })) : null, item?.parameterDesccription ? (jsx("span", { className: "text-m-light text-secondary-text", children: item.parameterDesccription })) : null] }, String(i))));
-
-    const BLUR_BLOCK_CLASSES$1 = 'absolute top-0 bottom-0 w-[84px]';
-    const CARD_FULL_VIEW_COUNT = 1;
-    const InvestmentGallery = JSX(({ cards = [], className = '', title, version = 'primary', ...rest }) => {
-        const cardWidth = 710;
-        const [activeIndex, controls] = useCarouselControls({
-            itemCount: cards.length,
-            visibleItemCount: CARD_FULL_VIEW_COUNT,
-        });
-        return (jsxs(BlockWrapper, { className: `relative font-sans p-9 overflow-hidden text-center ${VersionStyleMap[version]} ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-9", title: title }) : null, jsxs("div", { children: [jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeIndex * cardWidth}px)` }, role: "list", children: cards?.length ? cards.map(renderInvestmentGalleryCard(className, version)) : null }), renderArrows({
-                            ...controls,
-                            btnClass: ['left-8', 'right-8'],
-                            className: 'top-1/2 mt-3',
-                        })] }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} left-0 ${version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'}` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} right-0 ${version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'}` })] }));
-    });
-    const renderInvestmentGalleryCard = (className, version) => (card, i) => jsx(InvestmentGalleryCard, { className: className, version: version, ...card }, String(i));
-
     function joinList(sep) {
         return (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]), []);
     }
@@ -2475,7 +2494,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" })));
 
@@ -2502,7 +2521,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
@@ -2647,7 +2666,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);
     };
 
@@ -2871,16 +2890,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/
@@ -2957,6 +2975,11 @@
     });
     OtherProductsItem.childrenTypes = []; // All types of blocks are suitable
 
+    const ParagraphBlock = JSX((props) => {
+        const { className, text, size, color, align, font, ...rest } = props;
+        return (jsx(BlockWrapper, { className: className, ...rest, children: jsx(Paragraph, { size: size, color: color, align: align, font: font, children: text }) }));
+    });
+
     const titleStyleMap = {
         primary: 'text-primary-text',
         secondary: 'text-white',
@@ -2979,7 +3002,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))] })] })] })));
@@ -3062,11 +3085,16 @@
     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 })] }));
     });
 
+    const BorderVersionStyleMap = {
+        primary: 'border-main-stroke',
+        secondary: 'border-white/50',
+    };
+
     const productBlockStyleMap = {
         primary: { title: 'text-secondary-text', text: 'text-secondary-text' },
         secondary: { title: 'text-white', text: 'text-white/80' },
@@ -3075,30 +3103,30 @@
         const galleryNav = slides.map((s) => s.nav);
         const galleryBlocks = slides.map((s) => s.productBlock);
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-        return (jsxs(BlockWrapper, { className: `box-border pt-[50px] overflow-hidden relative font-sans w-100 mb-6 ${className}
+        const handleActiveSlideIndex = useCallback((_) => setActiveSlideIndex(_), []);
+        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,
-                        activeSlideIndex,
-                        onClick: () => setActiveSlideIndex(i),
+                        isActive: Boolean(i === activeSlideIndex),
+                        onClick: () => handleActiveSlideIndex(i),
                         version,
                     })) })] }));
     });
     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, activeSlideIndex, onClick, version }) {
-        const isActiveBtn = i === activeSlideIndex;
-        const btnClassName = isActiveBtn
+    function renderNavButton({ slide, i, isActive, onClick, version }) {
+        const btnClassName = isActive
             ? 'bg-white shadow-dark-blue/42 min-w-[350px] border-none p-6'
             : `min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur
       ${VersionStyleMap[version]}`;
-        const btnTitleClassName = isActiveBtn
+        const btnTitleClassName = isActive
             ? 'text-primary-text !text-h6 p-2'
             : `text-l pb-1 ${productBlockStyleMap[version].title}`;
-        const btnDescClassName = isActiveBtn
+        const btnDescClassName = isActive
             ? 'text-secondary-text text-l-light'
             : `text-m-light ${productBlockStyleMap[version].text}`;
         return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `box-border relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0
@@ -3211,15 +3239,13 @@
         return (jsx(Select, { options: dataFormat, label: label, placeholder: placeholder || selected, onChange: (_) => setSelected(_.key), value: selectedObj }));
     });
 
-    const RegionsAndBranches = JSX(({ regions = [], selectedRegion, onSelectedRegion: onSelectedRegion, branches = [], selectedBranch, onSelectedBranch, }) => {
-        return (jsxs("div", { className: "flex justify-between gap-4 mb-6", children: [jsx("div", { className: "max-w-[396px] w-1/2", children: jsx(WrapperSelect, { data: regions, fieldValue: "code", fieldLabel: "name", selected: selectedRegion, setSelected: onSelectedRegion, label: "\u0420\u0435\u0433\u0438\u043E\u043D" }) }), jsx("div", { className: "max-w-[396px] w-1/2", children: jsx(WrapperSelect, { data: branches, fieldValue: "branchCode", fieldLabel: "address", selected: selectedBranch, setSelected: onSelectedBranch, label: "\u041E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435" }) })] }));
-    });
+    const RegionsAndBranches = JSX(({ regions = [], selectedRegion, onSelectedRegion: onSelectedRegion, branches = [], selectedBranch, onSelectedBranch, }) => (jsxs("div", { className: "flex justify-between gap-4 mb-6", children: [jsx("div", { className: "max-w-[396px] w-1/2", children: jsx(WrapperSelect, { data: regions, fieldValue: "code", fieldLabel: "name", selected: selectedRegion, setSelected: onSelectedRegion, label: "\u0420\u0435\u0433\u0438\u043E\u043D" }) }), jsx("div", { className: "max-w-[396px] w-1/2", children: jsx(WrapperSelect, { data: branches, fieldValue: "branchCode", fieldLabel: "address", selected: selectedBranch, setSelected: onSelectedBranch, label: "\u041E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435" }) })] })));
 
-    const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "font-sans flex items-center relative cursor-pointer", children: [jsx("input", { className: "appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-checkbox-hover\n        checked:border-2 checked:!border-primary-main focus:checked:border-primary-main focus:border-primary-text active:border-primary-text\n        after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main outline-none rounded-full cursor-pointer", type: "radio", value: value, name: name, checked: checked, onChange: onChange }), text ? jsx("span", { className: "text-primary-text ml-3 cursor-pointer", children: text }) : null] }) })));
+    const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "font-sans flex items-center relative cursor-pointer", children: [jsx("input", { className: "appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-checkbox-hover\n        checked:border-2 checked:!border-primary-main focus:checked:border-primary-main focus:border-primary-text active:border-primary-text\n        after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main outline-none rounded-full cursor-pointer", type: "radio", value: value, name: name, checked: checked, onChange: (_) => onChange(_.target.value) }), text ? jsx("span", { className: "text-primary-text ml-3 cursor-pointer", children: text }) : null] }) })));
 
     const RenderRadioButtons = JSX(() => {
         const [selectedOption, setSelectedOption] = useState('option2');
-        const onChange = (_) => setSelectedOption(_.target.value);
+        const onChange = useCallback((_) => setSelectedOption(_), []);
         return (jsxs("div", { children: [jsx(Radio, { className: "mb-2", name: "contractType", text: "\u041F\u0440\u043E\u0441\u0442\u043E\u0435 \u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435", value: "option1", checked: selectedOption === 'option1', onChange: onChange }), jsx(Radio, { name: "contractType", text: "\u0421\u0434\u0435\u043B\u043A\u0430 \u0441 \u043D\u0435\u0434\u0432\u0438\u0436\u0438\u043C\u043E\u0441\u0442\u044C\u044E", value: "option2", checked: selectedOption === 'option2', onChange: onChange })] }));
     });
 
@@ -3232,8 +3258,8 @@
         return (jsxs("div", { className: "flex justify-between mb-6", children: [jsx("div", { className: "mr-4 w-full", children: jsx(WrapperSelect, { data: caseVolumes, fieldLabel: "volume", selected: selectedCaseVolume, setSelected: onSelectedCaseVolume, label: "\u0420\u0430\u0437\u043C\u0435\u0440", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0430\u0437\u043C\u0435\u0440" }) }), jsx("div", { className: "w-full", children: jsx(WrapperSelect, { data: safeBoxCases, fieldLabel: "safeBoxCasesSize", selected: selectedBoxSize, setSelected: onSelectedBoxSize, label: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B \u044F\u0447\u0435\u0439\u043A\u0438, \u043C\u043C (\u0412\u0445\u0428\u0445\u0414)", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440 \u044F\u0447\u0435\u0439\u043A\u0438" }) })] }));
     });
 
-    const SafeDepositRentalFields = JSX(({ regions, selectedRegion, branches, selectedBranch, days, selectedCaseVolume, selectedBoxSize, safeBoxCases, caseVolumes, onChange, onShowMapToggle, }) => {
-        return (jsxs("div", { className: "flex-1 mr-9", children: [jsx(RegionsAndBranches, { regions: regions, selectedRegion: selectedRegion, onSelectedRegion: (value) => onChange({ selectedRegion: value }), branches: branches, selectedBranch: selectedBranch, onSelectedBranch: onSelectedBranch(onChange) }), jsx(RentalPeriod, { days: days, setDays: (value) => onChange({ days: value }) }), jsx(SafeBoxCases, { caseVolumes: caseVolumes, selectedCaseVolume: selectedCaseVolume, onSelectedCaseVolume: onSelectedCaseVolume(onChange), safeBoxCases: safeBoxCases, selectedBoxSize: selectedBoxSize, onSelectedBoxSize: (value) => onChange({ selectedBoxSize: value }) }), jsx("span", { className: "text-secondary-text text-l-light", children: "\u0422\u0438\u043F \u0434\u043E\u0433\u043E\u0432\u043E\u0440\u0430" }), jsxs("div", { className: "flex justify-between items-center mt-5", children: [jsx(RenderRadioButtons, {}), jsx(Button, { text: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", version: "primary", onClick: onShowMapToggle })] })] }));
+    const SafeDepositRentalFields = JSX(({ regions, selectedRegion, branches, selectedBranch, days, selectedCaseVolume, selectedBoxSize, safeBoxCases, caseVolumes, onChange, onClick, }) => {
+        return (jsxs("div", { className: "flex-1 mr-9", children: [jsx(RegionsAndBranches, { regions: regions, selectedRegion: selectedRegion, onSelectedRegion: (value) => onChange({ selectedRegion: value }), branches: branches, selectedBranch: selectedBranch, onSelectedBranch: onSelectedBranch(onChange) }), jsx(RentalPeriod, { days: days, setDays: (value) => onChange({ days: value }) }), jsx(SafeBoxCases, { caseVolumes: caseVolumes, selectedCaseVolume: selectedCaseVolume, onSelectedCaseVolume: onSelectedCaseVolume(onChange), safeBoxCases: safeBoxCases, selectedBoxSize: selectedBoxSize, onSelectedBoxSize: (value) => onChange({ selectedBoxSize: value }) }), jsx("span", { className: "text-secondary-text text-l-light", children: "\u0422\u0438\u043F \u0434\u043E\u0433\u043E\u0432\u043E\u0440\u0430" }), jsxs("div", { className: "flex justify-between items-center mt-5", children: [jsx(RenderRadioButtons, {}), jsx(Button, { text: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", version: "primary", onClick: onClick })] })] }));
     });
     const onSelectedBranch = (onChange) => (value) => {
         onChange({ selectedBranch: value, selectedCaseVolume: '', selectedBoxSize: '' });
@@ -3282,7 +3308,7 @@
     const getBranch = (branches, selectedBranch) => branches.find((_) => _.branchCode === selectedBranch);
 
     const SafeDepositRentalForm = JSX((props) => {
-        const { regions, data, branches, onChange, onShowMapToggle } = props;
+        const { regions, data, branches, onChange, onClick } = props;
         useEffect(() => {
             onChange({
                 selectedBranch: '',
@@ -3294,7 +3320,7 @@
         const caseVolumes = getCaseVolumes(branch?.safeBoxCaseVolumes);
         const safeBoxCases = getCaseVolume(branch?.safeBoxCaseVolumes, data.selectedCaseVolume)?.safeBoxCases;
         const tariffs = getTariffs(safeBoxCases, data.selectedBoxSize);
-        return (jsxs("div", { className: "flex justify-between align-top mb-6", children: [jsx(SafeDepositRentalFields, { ...data, regions: regions, onShowMapToggle: onShowMapToggle, branches: branches, caseVolumes: caseVolumes, safeBoxCases: safeBoxCases, onChange: onChange }), jsx(SafeDepositRentalTotal, { days: data.days, tariffs: tariffs })] }));
+        return (jsxs("div", { className: "flex justify-between align-top mb-6", children: [jsx(SafeDepositRentalFields, { ...data, regions: regions, onClick: onClick, branches: branches, caseVolumes: caseVolumes, safeBoxCases: safeBoxCases, onChange: onChange }), jsx(SafeDepositRentalTotal, { days: data.days, tariffs: tariffs })] }));
     });
     const getCaseVolumes = (safeBoxCaseVolumes) => safeBoxCaseVolumes?.length ? safeBoxCaseVolumes?.filter((_) => _?.safeBoxCases?.length) : [];
     const getCaseVolume = (caseVolumes, selectedCaseVolume) => caseVolumes?.find((_) => _.volume === selectedCaseVolume);
@@ -3309,6 +3335,7 @@
     const DEFAULT_DAYS = 26;
     const SafeDepositRental = JSX(({ title, footnote, className = '', ...rest }) => {
         const [showMap, setShowMap] = useState(false);
+        const handleShowMap = useCallback(() => setShowMap((_) => !_), []);
         const [safeDepositState, setStateDepositState] = useState({
             selectedRegion: '',
             selectedBranch: '',
@@ -3320,11 +3347,8 @@
         const selectedRegion = normalizeSelectedRegion(safeDepositState.selectedRegion, regions);
         const branches = useSafeBoxes(selectedRegion);
         const handleChangeSafeDepositState = useCallback((state) => setStateDepositState((oldState) => ({ ...oldState, ...state })), [setStateDepositState]);
-        const onShowMapToggle = () => {
-            setShowMap(!showMap);
-        };
         const points = getCoordinates(getBranch(branches, safeDepositState.selectedBranch) || branches);
-        return (jsxs(BlockWrapper, { className: className, ...rest, children: [jsxs("div", { className: "font-sans bg-white px-8 py-12", children: [title ? (jsx(Heading, { title: title, headingType: "h3", as: "h2", className: "text-primary-text mb-2.5 text-center" })) : null, jsx(SafeDepositRentalForm, { regions: regions, branches: branches, data: { ...safeDepositState, selectedRegion }, onShowMapToggle: onShowMapToggle, onChange: handleChangeSafeDepositState }), footnote ? jsx("p", { className: "text-s-light text-secondary-text", children: footnote }) : null] }), points.length && showMap ? jsx(YandexMap, { points: points, className: "h-[640px]" }) : null] }));
+        return (jsxs(BlockWrapper, { className: className, ...rest, children: [jsxs("div", { className: "font-sans bg-white px-8 py-12", children: [title ? (jsx(Heading, { title: title, headingType: "h3", as: "h2", className: "text-primary-text mb-2.5 text-center" })) : null, jsx(SafeDepositRentalForm, { regions: regions, branches: branches, data: { ...safeDepositState, selectedRegion }, onClick: handleShowMap, onChange: handleChangeSafeDepositState }), footnote ? jsx("p", { className: "text-s-light text-secondary-text", children: footnote }) : null] }), points.length && showMap ? jsx(YandexMap, { points: points, className: "h-[640px]" }) : null] }));
     });
     const normalizeSelectedRegion = (selectedRegion, regions) => !selectedRegion && regions?.length && regions[0]?.code ? regions[0].code : selectedRegion;
 
@@ -3381,18 +3405,16 @@
         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) => {
-        return (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
+    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)));
-    };
 
     function assertUnreachable(x) {
         throw new Error(x);
@@ -3406,14 +3428,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 }) }));
     });
 
@@ -3453,26 +3471,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}`;
@@ -3555,18 +3567,6 @@
                 : null }));
     });
 
-    function useTariffsInnerTableData(directoryName) {
-        const { data } = useAsyncData(tariffsInnerTableDataUrl(directoryName), fetchTariffsInnerTableData);
-        return data || {};
-    }
-    async function fetchTariffsInnerTableData(url) {
-        const response = await fetch(url);
-        return await response.json();
-    }
-    function tariffsInnerTableDataUrl(directoryName) {
-        return `/wcms-resources/${directoryName || 'tariffs-inner-table-data'}.json`;
-    }
-
     const COLUMN_WIDTH = 140;
     const InnerTableBodyItem = JSX(({ rows }) => {
         const rowsLength = rows?.[0]?.length ?? 0;
@@ -3599,33 +3599,46 @@
 
     const InnerTableBody = JSX(({ activeTabIndex, items }) => {
         const [hiddenTables, setHiddenTables] = useState({});
-        const toggleTable = (key) => {
-            setHiddenTables((oldState) => ({ ...oldState, [key]: !oldState[key] }));
-        };
+        const toggleTables = useCallback((key) => setHiddenTables((oldState) => ({ ...oldState, [key]: !oldState[key] })), []);
         return (jsx("div", { children: items.map((_, tableIdx) => {
                 const key = `activeTabIdx:${activeTabIndex}-tableIdx:${tableIdx}`;
-                return (jsxs("div", { className: "w-full", children: [jsxs("div", { className: "flex p-4 bg-main-stroke text-xl-light text-center justify-center cursor-pointer relative", onClick: () => toggleTable(key), children: [_.title, jsx(ImgInner, { image: hiddenTables[key] ? 'PlusIcon' : 'MinusIcon', className: "absolute right-[22px]", width: "24", height: "24" })] }), jsx("div", { className: `w-full pl-2 overflow-hidden transition-height duration-500 ease-in-out ${hiddenTables[key] ? 'h-0' : ''}`, children: jsx("div", { className: "relative", children: jsx(InnerTableBodyItem, { rows: _.rowsData }) }) })] }, key));
+                return (jsxs("div", { className: "w-full", children: [jsxs("div", { className: "flex p-4 bg-main-stroke text-xl-light text-center justify-center cursor-pointer relative", onClick: () => toggleTables(key), children: [_.title, jsx(ImgInner, { image: hiddenTables[key] ? 'PlusIcon' : 'MinusIcon', className: "absolute right-[22px]", width: "24", height: "24" })] }), jsx("div", { className: `w-full pl-2 overflow-hidden transition-height duration-500 ease-in-out ${hiddenTables[key] ? 'h-0' : ''}`, children: jsx("div", { className: "relative", children: jsx(InnerTableBodyItem, { rows: _.rowsData }) }) })] }, key));
             }) }));
     });
 
     const InnerTableHeader = JSX(({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (jsxs("div", { className: "flex justify-between w-full pt-2.5 pb-3", children: [currencies && currencies.length > 1 ? (jsx("div", { className: "flex bg-secondary-light p-1.5 rounded-md", children: currencies.map((currency, idx) => (jsx("div", { className: `rounded-md text-xl-light px-4 py-3 cursor-pointer ${idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'}`, onClick: () => setActiveTabIndex(idx), children: currency || idx + 1 }, currency))) })) : null, linkToPDF ? (jsx(Button, { href: linkToPDF, version: "secondary", target: "_blank", appendLeft: jsx(Icon, { name: "DocDownloadIcon", iconVersion: "color", className: "mr-0.5", width: "20", height: "20", asSVG: true }), text: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })) : null] })));
 
+    function useTariffsInnerTableData(directoryName) {
+        const { data } = useAsyncData(tariffsInnerTableDataUrl(directoryName), fetchTariffsInnerTableData);
+        return data || {};
+    }
+    async function fetchTariffsInnerTableData(url) {
+        const response = await fetch(url);
+        return await response.json();
+    }
+    function tariffsInnerTableDataUrl(directoryName) {
+        return `/wcms-resources/${directoryName || 'tariffs-inner-table-data'}.json`;
+    }
+
     const EMPTY_DATA = 'Данных нет';
     const InnerTable = JSX(({ dataUrl, pdfUrl, onClick }) => {
         const { tableData } = useTariffsInnerTableData(dataUrl);
         const [activeTabIndex, setActiveTabIndex] = useState(0);
+        const handleActiveTabIndex = useCallback((_) => setActiveTabIndex(_), []);
         const items = tableData?.[activeTabIndex]?.items ?? [];
         const currencies = tableData?.map((item) => item.currency ?? '');
-        return tableData ? (jsxs("div", { className: "bg-white z-10", children: [jsx(InnerTableHeader, { currencies: currencies, activeTabIndex: activeTabIndex, setActiveTabIndex: setActiveTabIndex, linkToPDF: pdfUrl }), jsx(InnerTableBody, { activeTabIndex: activeTabIndex, items: items }), jsx(TableInnerButton, { onClick: onClick, isOpen: true })] })) : (jsxs("div", { className: "my-5 text-h6 text-center", children: [jsx("p", { children: EMPTY_DATA }), jsx(TableInnerButton, { onClick: onClick, isOpen: true })] }));
+        return tableData ? (jsxs("div", { className: "bg-white z-10", children: [jsx(InnerTableHeader, { currencies: currencies, activeTabIndex: activeTabIndex, setActiveTabIndex: handleActiveTabIndex, linkToPDF: pdfUrl }), jsx(InnerTableBody, { activeTabIndex: activeTabIndex, items: items }), jsx(TableInnerButton, { onClick: onClick, isOpen: true })] })) : (jsxs("div", { className: "my-5 text-h6 text-center", children: [jsx("p", { children: EMPTY_DATA }), jsx(TableInnerButton, { onClick: onClick, isOpen: true })] }));
     });
 
     const TariffsTableRowContainer = JSX(({ children, tableInner, onHideContentClick }) => (jsxs("div", { className: "self-start flex flex-col", role: "row", children: [jsx("div", { className: "flex", children: children }), tableInner ? (jsx("div", { className: "origin-top animate-expansion", children: jsx(InnerTable, { ...tableInner, onClick: onHideContentClick }) })) : null] })));
 
     const TariffsTableRow = JSX(({ row: { header, data }, activeIndex, rowIdx, ...rest }) => {
         const [tableInner, setTableInner] = useState(undefined);
+        const handleSetTableInner = useCallback((_) => setTableInner(_), []);
         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: setTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: setOpenTableInnerIdx, ...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 }) => {
@@ -3639,10 +3652,9 @@
             itemCount: itemCount,
             visibleItemCount: COLS_LENGTH_FOR_SCROLL,
         });
-        const { isScrollAvailable } = controls;
         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, isScrollAvailable: isScrollAvailable, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(Wrapper, { controls: controls, isScrollAvailable: isScrollAvailable, 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;
@@ -3650,13 +3662,14 @@
     function renderDescription(description) {
         return description ? jsx("div", { className: "mb-9 text-center text-l", children: description }) : null;
     }
-    const Wrapper = JSX(({ children, controls, isScrollAvailable }) => (jsxs("div", { role: "table", children: [jsxs("div", { className: "relative", children: [children, isScrollAvailable
-                        ? renderArrows({
+    const Wrapper = JSX(({ children, controls }) => {
+        const { isScrollAvailable } = controls;
+        return (jsxs("div", { role: "table", children: [jsxs("div", { className: "relative", children: [children, renderArrows({
                             ...controls,
                             btnClass: ['top-[108px]', 'top-[44px]'],
                             className: 'right-7',
-                        })
-                        : null] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] })));
+                        })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
+    });
 
     const textBlockStyleMaps = {
         primary: {
@@ -3744,6 +3757,25 @@
         return (jsxs(BlockWrapper, { className: `bg-white ${getPaddings(className)} ${className}`, ...rest, children: [jsx(Headline, { title: title, headlineVersion: "M" }), src ? (jsx("video", { className: "m-auto w-full object-fill", preload: "metadata", poster: previewImg?.src, style: { maxHeight: 524 }, controls: true, children: jsx("source", { src: src }) })) : null] }));
     });
 
+    const getItemListFontSize = (colValue) => (colValue === 1 ? 'text-h6' : 'text-l');
+    const cardColumnsModeStyleMap = {
+        1: 'flex gap-y-2 flex-col',
+        2: 'flex gap-y-2 gap-x-10 flex-wrap',
+    };
+    const CarouselInvestmentCard = JSX(({ additionalDescription, cardsList = [], className = '', columnsMode = 1, description, image, title, version = 'primary', ...rest }) => {
+        const tileTitle = title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
+        const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
+        return (jsx(BlockWrapper, { className: `relative text-left border border-solid box-border
+        p-9 w-[697px]
+        ${BorderVersionStyleMap[version]}
+        ${className}`, ...rest, children: jsxs(BaseTile, { title: tileTitle, image: tileImage, children: [jsxs("div", { className: "flex justify-between mb-4", children: [description ? jsx("span", { className: "text-h6 w-1/3", children: description }) : null, additionalDescription ? (jsx("span", { className: "text-m-light text-secondary-text", children: additionalDescription })) : null] }), cardsList.length ? (jsx("ul", { className: `list-none m-0 p-0 ${cardColumnsModeStyleMap[columnsMode]}`, children: renderCardList(cardsList, columnsMode) })) : null] }) }));
+    });
+    const renderCardList = (cardsList, columnsMode) => {
+        const CARDS_COUNT_MAP = [4, 9];
+        const visibleCardsList = cardsList.slice(0, CARDS_COUNT_MAP[columnsMode - 1]);
+        return visibleCardsList.map((item, i) => (jsxs("li", { className: columnsMode === 2 ? 'basis-[calc(50%-20px)]' : '', children: [item?.parameter ? (jsx("span", { className: `pr-2.5 ${getItemListFontSize(columnsMode)}`, children: item.parameter })) : null, item?.parameterDescription ? (jsx("span", { className: "text-m-light text-secondary-text", children: item.parameterDescription })) : null] }, String(i))));
+    };
+
     const Blocks = {
         Accordion,
         AccordionItem,
@@ -3768,12 +3800,13 @@
         GracePeriod,
         Header,
         Headline,
+        ImgBlock,
         InsuranceAmountBlock,
         InvestmentInfo,
-        InvestmentGallery,
         LinkDocs,
         MiniGallery,
         MobileAppTile,
+        ParagraphBlock,
         PictureText,
         Placeholder,
         ProductBlock,
@@ -3794,8 +3827,66 @@
         Tile,
         VerticalLayout,
         Video,
+        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);
@@ -3847,6 +3938,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',
@@ -3863,7 +3955,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.36";
+    const packageVersion = "0.6.38";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;