@redneckz/wildless-cms-uni-blocks 0.6.33 → 0.6.35

package/bundle/bundle.umd.js

@@ -231,6 +231,53 @@
         return JSXTmpl;
     };
 
+    const DEFAULT_SLOT_NAME = null;
+
+    function style2className(style) {
+        return style ? style.filter(Boolean).join(' ') : '';
+    }
+
+    const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
+
+    const DEFAULT_ANCESTORS = [];
+    const DEFAULT_STYLE = ['col-span-12'];
+    function renderBlock(block, options) {
+        const { key, blockDecorator = defaultBlockDecorator, blocksRegistry = {}, ancestors = DEFAULT_ANCESTORS, } = options;
+        const { type } = block;
+        if (!(type && type in blocksRegistry)) {
+            console.warn(`No block with "${type}" is registered`);
+        }
+        const BlockComponent = type && blocksRegistry[type];
+        return blockDecorator({
+            blockClassName: `scroll-mt-12 ${style2className(block.style || DEFAULT_STYLE)}`,
+            block,
+            ancestors,
+            // Adjusted by decorator block and blockClassName
+            render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
+                const { content } = adjustedBlock;
+                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, block: block, options: options, ...content }, key)) : null;
+            },
+        }, key);
+    }
+
+    const EMPTY_ANCESTORS = [];
+    const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, renderChild = renderBlock, ...options }) => (blocks || []).map((_, j) => renderChild(_, {
+        ...options,
+        key: `${key ? key : _.type}-${j}`,
+        ancestors: options.parent
+            ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
+            : ancestors,
+    }));
+
+    function renderChildren({ children, block, options, renderChild, }) {
+        if (children) {
+            return children;
+        }
+        return block && options
+            ? renderBlocksList(block.blocks, { ...options, parent: block, renderChild })
+            : null;
+    }
+
     const AlignText = {
         left: 'text-left',
         center: 'text-center',
@@ -357,7 +404,7 @@
 
     const AccordionItemsList = JSX(({ children }) => (jsx("ul", { className: "list-none m-0 p-0", children: children })));
 
-    const Accordion = JSX(({ className = '', title, accordionAlignTitle = 'center', description, children, ...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: 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) })] })));
     Accordion.childrenTypes = ['AccordionItem'];
 
     const Foldable = JSX(({ isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
@@ -458,51 +505,47 @@
     });
 
     const icons$1 = ['PlusIcon', 'MinusIcon'];
-    const AccordionItem = JSX(({ className = '', label = '', isExpanded, children }) => (jsx("li", { className: `border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: true, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "grid grid-cols-12 gap-5 [&>*]:p-0", isUnfolded: isUnfolded, children: children })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(FoldButton$1, { label: label, icon: icons$1[Number(isUnfolded)], onClick: onToggle })) }) })));
+    const AccordionItem = JSX(({ className = '', label = '', isExpanded, ...rest }) => (jsx("li", { className: `border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: true, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "grid grid-cols-12 gap-5 [&>*]:p-0", isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(FoldButton$1, { label: label, icon: icons$1[Number(isUnfolded)], onClick: onToggle })) }) })));
     AccordionItem.childrenTypes = [];
     const FoldButton$1 = JSX(({ label, icon, onClick }) => (jsxs("button", { className: "border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer", onClick: onClick, children: [jsx(Text, { size: "text-xl", font: "font-medium", children: label }), jsx(ImgInner, { image: icon, className: "text-primary-main flex-shrink-0", width: "24", height: "24", asSVG: true })] })));
 
-    const LINK_CLASS_NAME = `absolute border border-primary-main ml-3 px-6 py-5
-  text-l-light bg-white text-primary-text flex w-[316px]
-  justify-between items-center group-hover:text-primary-main z-10`;
-    const LINK_BORDER_CLASS_NAME = 'bg-transparent border-white border h-[70px] absolute w-[316px] top-0';
-    const LinkButton = JSX(({ text, href = '', target = '', className = '' }) => {
-        if (!text) {
-            return null;
-        }
-        return (jsxs("div", { className: `relative group cursor-pointer w-[328px] h-[82px] ${className}`, children: [jsxs("a", { className: LINK_CLASS_NAME, role: "link", href: href, target: target, children: [jsx("div", { className: "p-0.5", children: text }), jsx("div", { className: "w-6 h-6", children: jsx(ImgInner, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border brightness-0 group-hover:brightness-100", image: { icon: 'ArrowRightIcon', iconVersion: 'black' }, imageClassName: "group-hover:text-primary-main", width: "24", height: "24", asSVG: true }) })] }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mx-1.5 mt-1.5` }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mt-3 mr-3` })] }));
+    const VersionStyleMap = {
+        primary: 'bg-white text-primary-text',
+        secondary: 'bg-primary-main text-white',
+    };
+
+    const getIconWithVersion = (icon, version = 'primary') => ({
+        ...icon,
+        iconVersion: icon?.iconVersion ?? (version === 'secondary' ? 'white' : 'color'),
     });
 
-    const sliceArray = (items, size) => {
-        const result = items.reduce((resultArray, item, index) => {
-            const chunkIndex = Math.floor(index / (size - 1));
-            if (!resultArray[chunkIndex]) {
-                resultArray[chunkIndex] = [item];
-            }
-            resultArray[chunkIndex].push(item);
-            return resultArray;
-        }, []);
-        return result;
+    const benefitsTextStyleMap = {
+        primary: '',
+        secondary: 'text-white',
     };
-
-    const useCarouselControls = ({ itemsCount, visibleItemCount = itemsCount, isCyclic, }) => {
-        const [activeIndex, setActiveIndex] = useState(0);
-        const inc = useCallback(() => setActiveIndex((_) => (isCyclic ? (_ + 1) % itemsCount : Math.min(_ + 1, itemsCount - 1))), [isCyclic, itemsCount]);
-        const dec = useCallback(() => setActiveIndex((_) => (isCyclic ? (itemsCount + _ - 1) % itemsCount : Math.max(_ - 1, 0))), [isCyclic, itemsCount]);
-        const isScrollAvailable = itemsCount > visibleItemCount;
-        const isCyclicAndScrollAvailable = isCyclic && isScrollAvailable;
-        const canInc = isCyclicAndScrollAvailable ||
-            (isScrollAvailable && itemsCount - activeIndex > visibleItemCount);
-        const canDec = isCyclicAndScrollAvailable || Boolean(isScrollAvailable && activeIndex > 0);
-        return [
-            activeIndex,
-            {
-                inc,
-                dec,
-                canInc,
-                canDec,
-            },
-        ];
+    const benefitsDescriptionStyleMap = {
+        primary: 'text-secondary-text',
+        secondary: 'text-white opacity-80',
+    };
+    const benefitsIconStyleMap = {
+        primary: 'bg-main-divider text-primary-main',
+        secondary: 'bg-white/30 text-black',
+    };
+    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)));
+    };
+    const renderDescription$3 = (description, version) => {
+        const benefitType = description?.benefitType || null;
+        return description && benefitType ? (jsx("div", { className: `text-l-light mt-2 ${benefitsDescriptionStyleMap[version]}`, children: benefitType === 'list'
+                ? renderListBenefit(description)
+                : renderTextBenefit(description) })) : null;
+    };
+    const renderTextBenefit = (description) => description?.name || null;
+    const renderListBenefit = (description) => {
+        const listStyleType = description?.bullets ? 'list-disc pl-6' : '';
+        return description?.items && description.items.length > 0 ? (jsx("ul", { className: listStyleType, children: description.items.map((_, i) => (jsx("li", { children: _ }, `benefitListItem-${i}`))) })) : null;
     };
 
     const isURL = (href) => href?.includes('//');
@@ -656,90 +699,6 @@
     const RegularButton = JSX(({ className = '', href, rel, target, ariaLabel, version, rounded, onClick, children }) => (jsx("a", { className: getRegularButtonClasses({ className, version, rounded }), href: href, rel: rel, target: target, "aria-label": ariaLabel, role: href ? 'link' : 'button', onClick: onClick, children: children })));
     const DisabledButton = JSX(({ className, ariaLabel, version, rounded, children }) => (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: -1, className: getDisabledButtonClasses({ className, rounded, version }), children: children })));
 
-    const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `group shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
-        ? 'bg-secondary-light text-secondary-text'
-        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(ImgInner, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover:text-primary-main", width: "16", height: "16", asSVG: true }) })));
-
-    function renderArrows({ handler, isShown, btnClass, className = '', isDisabled = false, }) {
-        return (jsxs("div", { children: [isShown[0] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 ${btnClass[0]} ${className}`, onClick: handler[0], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left", disabled: !isShown[0] })) : null, isShown[1] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 rotate-180 ${btnClass[1]} ${className}`, onClick: handler[1], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right", disabled: !isShown[1] })) : null] }));
-    }
-
-    const CarouselContainer = JSX(({ children, activeItem, cardFullViewCount, cardWidth }) => {
-        const cardFullViewStyles = cardFullViewCount === 1
-            ? `translateX(-${activeItem}00%)`
-            : `translateX(-${activeItem * Number(cardWidth)}px)`;
-        return (jsx("div", { className: "w-auto flex flex-1 duration-1000", style: { transform: `${cardFullViewStyles}` }, role: "list", children: children }));
-    });
-
-    const Carousel = JSX(({ cardFullViewCount = 1, children, cardWidth = '1007', className = '', isBlur = true, isCyclic = false, block, ...rest }) => {
-        const blurClasses = isBlur ? 'absolute top-0 bottom-0 w-[84px]' : '';
-        const { blocks: childBlocks } = block || {};
-        const childBlocksLength = childBlocks !== undefined ? childBlocks.length : 0;
-        const isScrollAvailable = childBlocksLength > cardFullViewCount;
-        const [activeIndex, controls] = useCarouselControls({
-            itemsCount: childBlocksLength,
-            visibleItemCount: cardFullViewCount,
-            isCyclic,
-        });
-        const { inc, dec, canDec, canInc } = controls;
-        return (jsxs(BlockWrapper, { className: `box-border h-full relative font-sans flex flex-col justify-center overflow-hidden ${className}`, ...rest, children: [jsx(CarouselContainer, { activeItem: activeIndex, cardFullViewCount: cardFullViewCount, cardWidth: cardWidth, children: children }), isScrollAvailable ? (jsx("div", { children: renderArrows({
-                        handler: [dec, inc],
-                        isShown: [canDec, canInc],
-                        btnClass: ['left-8', 'right-8'],
-                        className: 'top-1/2 z-10',
-                    }) })) : null, isScrollAvailable ? (jsxs("div", { children: [jsx("div", { className: `${blurClasses} left-0 bg-opacity-from-white` }), jsx("div", { className: `${blurClasses} right-0 bg-opacity-to-white` })] })) : null] }));
-    });
-    Carousel.childrenTypes = ['CarouselCard', 'CarouselTariffsCard'];
-
-    const MAX_LINKS_COUNT = 12;
-    const CarouselLinks = JSX(({ additionalDescription, description, links, title, className = '', ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `bg-primary-main flex w-full p-10 overflow-hidden justify-between font-sans ${className}`, ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-9 text-white text-xl-light", children: [title ? jsx(Heading, { title: title, as: "h1", headingType: "h0", className: "pb-0.5" }) : null, description ? (jsx("div", { className: "pt-5", children: jsx(Paragraph, { size: "text-xl", font: "font-light", children: description }) })) : null, additionalDescription ? (jsx("div", { className: "pt-6", children: jsx(Paragraph, { children: additionalDescription }) })) : null] }), links?.length ? renderLinks(links) : null] }));
-    });
-    const renderLinks = (links) => {
-        const slicedLinks = sliceArray(links, MAX_LINKS_COUNT);
-        const slides = slicedLinks.map((slide) => (jsx("div", { className: "w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start", children: slide.map((link, index) => (jsx(LinkButton, { className: "m-1", ...link }, String(index)))) })));
-        return (jsx(Carousel, { className: "min-w-[832px] w-[832px]", isBlur: false, cardFullViewCount: 1, cardWidth: '832', isCyclic: true, block: { type: 'Carousel', blocks: slides }, children: slides }));
-    };
-
-    const VersionStyleMap = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
-    };
-
-    const getIconWithVersion = (icon, version = 'primary') => ({
-        ...icon,
-        iconVersion: icon?.iconVersion ?? (version === 'secondary' ? 'white' : 'color'),
-    });
-
-    const benefitsTextStyleMap = {
-        primary: '',
-        secondary: 'text-white',
-    };
-    const benefitsDescriptionStyleMap = {
-        primary: 'text-secondary-text',
-        secondary: 'text-white opacity-80',
-    };
-    const benefitsIconStyleMap = {
-        primary: 'bg-main-divider text-primary-main',
-        secondary: 'bg-white/30 text-black',
-    };
-    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)));
-    };
-    const renderDescription$3 = (description, version) => {
-        const benefitType = description?.benefitType || null;
-        return description && benefitType ? (jsx("div", { className: `text-l-light mt-2 ${benefitsDescriptionStyleMap[version]}`, children: benefitType === 'list'
-                ? renderListBenefit(description)
-                : renderTextBenefit(description) })) : null;
-    };
-    const renderTextBenefit = (description) => description?.name || null;
-    const renderListBenefit = (description) => {
-        const listStyleType = description?.bullets ? 'list-disc pl-6' : '';
-        return description?.items && description.items.length > 0 ? (jsx("ul", { className: listStyleType, children: description.items.map((_, i) => (jsx("li", { children: _ }, `benefitListItem-${i}`))) })) : null;
-    };
-
     const ButtonSection = JSX(({ className = '', buttons }) => buttons && buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => renderButton({ button, index })) })) : null);
     function renderButton({ button, buttonClassName, index }) {
         const { icon, iconRight, version, ...rest } = button;
@@ -844,11 +803,22 @@
     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 BonusBenefitsBlock = JSX(({ className = '', title, subtitle, bonusBenefits, columnsCount = '4', ...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", title: title, description: subtitle, headlineVersion: "M", align: "center", ...rest }), bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 mt-8 ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] })));
-    const renderBonusBenefit = (bonusBenefit, i) => {
-        return (jsxs("div", { className: "flex flex-col items-center max-w-[292px]", children: [bonusBenefit?.icon ? (jsx(ImgInner, { className: "h-[160px] w-[180px] min-w-[180px] min-h-[160px]", image: bonusBenefit.icon, width: "180", height: "160" })) : null, jsx("div", { children: bonusBenefit?.label ? jsx("span", { className: "text-h6 m-0", children: bonusBenefit.label }) : null })] }, String(i)));
+    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 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)));
+    };
+    const getElementsColsValue = (colValue) => {
+        switch (colValue) {
+            case '3':
+                return 'grid-cols-3';
+            case '4':
+                return 'grid-cols-4';
+            case '5':
+                return 'grid-cols-5';
+            default:
+                return 'grid-cols-5';
+        }
     };
-    const getElementsColsValue = (colValue) => colValue === '4' ? 'grid-cols-4' : 'grid-cols-5';
 
     const BusinessCard = JSX((props) => {
         const { title, image, cardItems, button } = props;
@@ -861,11 +831,49 @@
 
     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 useCarouselControls = (props) => {
+        const { itemCount, visibleItemCount, isCyclic } = props;
+        const [activeIndex, setActiveIndex] = useState(0);
+        const inc = useCallback(() => setActiveIndex((_) => (isCyclic ? (_ + 1) % itemCount : Math.min(_ + 1, itemCount - 1))), [isCyclic, itemCount]);
+        const dec = useCallback(() => setActiveIndex((_) => (isCyclic ? (itemCount + _ - 1) % itemCount : Math.max(_ - 1, 0))), [isCyclic, itemCount]);
+        const canInc = isCyclic ||
+            (isScrollable(activeIndex, props) && activeIndex < itemCount - (visibleItemCount || 1));
+        const canDec = isCyclic || activeIndex > 0;
+        const isScrollAvailable = canDec || canInc;
+        return [
+            activeIndex,
+            {
+                inc,
+                dec,
+                canInc,
+                canDec,
+                isScrollAvailable,
+            },
+        ];
+    };
+    function isScrollable(activeIndex, { itemCount, visibleItemCount, container }) {
+        if (visibleItemCount) {
+            return itemCount > visibleItemCount;
+        }
+        if (container) {
+            const scrollLeft = (container.scrollWidth * activeIndex) / itemCount;
+            return scrollLeft + container.clientWidth < container.scrollWidth;
+        }
+        return false;
+    }
+
+    const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `group shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
+        ? 'bg-secondary-light text-secondary-text'
+        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(ImgInner, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover:text-primary-main", width: "16", height: "16", asSVG: true }) })));
+
+    function renderArrows({ dec, inc, canDec, canInc, btnClass, className = '', }) {
+        const isVisible = canDec || canInc;
+        return isVisible ? (jsxs("div", { children: [canDec ? (jsx(ArrowButton, { className: `absolute z-50 ${btnClass[0]} ${className}`, onClick: dec, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left", disabled: !canDec })) : null, canInc ? (jsx(ArrowButton, { className: `absolute z-50 rotate-180 ${btnClass[1]} ${className}`, onClick: inc, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right", disabled: !canInc })) : null] })) : null;
+    }
+
     const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
 
-    const CalculatorValueBlock = JSX(({ title, value, postfix = '', prefix, className = '' }) => {
-        return (jsxs("div", { className: `mb-7 ${className}`, children: [title ? jsx("div", { className: "text-l-light text-secondary-text", children: title }) : null, value ? (jsxs("div", { className: "text-h3", children: [prefix, " ", addSpacesBetweenNumbers(Math.round(value)), " ", postfix] })) : null] }));
-    });
+    const CalculatorValueBlock = JSX(({ title, value, postfix = '', prefix, className = '' }) => (jsxs("div", { className: `mb-7 ${className}`, children: [title ? jsx("div", { className: "text-l-light text-secondary-text", children: title }) : null, value ? (jsxs("div", { className: "text-h3", children: [prefix, " ", addSpacesBetweenNumbers(Math.round(value)), " ", postfix] })) : null] })));
 
     const DEFAULT_MIN_SUM = 60000;
     const DEFAULT_MAX_SUM = 2000000;
@@ -901,8 +909,17 @@
         travelBonusRate: 0.015,
         restBonusRate: 0.01,
     };
+    const DEFAULT_DEPOSIT_CALCULATOR_PARAMS = {
+        minSum: 50000,
+        maxSum: 5000000,
+        minMonths: 2,
+        maxMonths: 120,
+        rate: 5.9,
+        isMonthlyInterestPayment: true,
+    };
     const CREDIT_CALC_DEFAULT_DIR = 'credit-calculator-data';
     const BONUS_CALC_DEFAULT_DIR = 'bonus-calculator-data';
+    const DEPOSIT_CALC_DEFAULT_DIR = 'deposit-calculator-data';
 
     const Rate = JSX(({ rate, title = 'Ставка', unit, rateBlockClassName }) => (jsxs("div", { children: [jsx("div", { className: "text-l-light text-secondary-text", children: title }), jsxs("div", { className: "flex justify-start", children: [jsx("span", { className: `block gradient-color-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`, children: String(rate).replace('.', ',') }), unit ? jsx("span", { className: "gradient-color-text text-[65px] leading-[75px]", children: unit }) : ''] })] })));
 
@@ -1174,6 +1191,29 @@
         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)] })] }));
     });
 
+    const useDepositCalculatorParams = (userInputParams, sourceBookDir) => {
+        const { isMonthlyInterestPayment, moneyValue } = userInputParams;
+        const data = useCalculatorParams(sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR);
+        const depositCalculatorSourceBookParams = data?.rows.find((_) => isMonthlyInterestPayment === _.isMonthlyInterestPayment) ||
+            DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
+        const { rate } = depositCalculatorSourceBookParams;
+        const income = getDepositIncome(rate, userInputParams);
+        const finalSum = moneyValue + income;
+        return { ...depositCalculatorSourceBookParams, ...userInputParams, income, finalSum };
+    };
+    const getDepositIncome = (rate, userInputParams) => {
+        const { isMonthlyInterestPayment, moneyValue, monthsValue } = userInputParams;
+        if (isMonthlyInterestPayment) {
+            return Math.round(moneyValue * Math.pow((1200 + rate) / 1200, monthsValue) - moneyValue);
+        }
+        else {
+            /*
+            Приблизительный расчёт, не учитывающий разницу в количестве дней в месяцах. Месяц принят за 30 дней, год за 365 дней.
+            */
+            return Math.round((moneyValue * rate * 30 * monthsValue) / 365 / 100);
+        }
+    };
+
     const EVERY_MONTH = 'everyMonth';
     const AT_END_TERM = 'atEndTerm';
     const depositTypeItems = [
@@ -1186,21 +1226,22 @@
             text: 'В конце срока',
         },
     ];
-    const DepositCalculatorForm = JSX(({ className = '', rate, buttons, footnote }) => {
+    const DepositCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote }) => {
         const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
         const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
-        const [isEveryMonth, toggleIsEveryMonth] = useState(false);
-        const income = 948841;
-        const finallySum = 1218841;
+        const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
+        const userInputParams = {
+            moneyValue,
+            monthsValue,
+            isMonthlyInterestPayment,
+        };
+        const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir);
+        const { income, finalSum, rate } = calculatorParams;
         return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма вклада, ₽', {
-                            moneyValue,
-                            minSum: DEFAULT_MIN_SUM,
-                            maxSum: DEFAULT_MAX_SUM,
+                            ...calculatorParams,
                         }, setMoneyValue), renderMonthsInput('Срок вклада, месяцев', {
-                            minMonths: DEFAULT_MIN_MONTHS,
-                            maxMonths: DEFAULT_MAX_MONTHS,
-                            monthsValue,
-                        }, setMonthsValue)] }), jsx(Rate, { rate: rate || 1, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [(jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" })) , (jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finallySum, postfix: "\u20BD" })) , jsx(RadioButtonGroup, { items: depositTypeItems, checkedItem: isEveryMonth ? EVERY_MONTH : AT_END_TERM, onChange: (text) => toggleIsEveryMonth(text === EVERY_MONTH) }), renderButtonSection(buttons), renderFootnote(footnote)] })] }));
+                            ...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)] })] }));
     });
 
     const EmbeddableCalcBlocks = {
@@ -1221,46 +1262,45 @@
     const Calculator = JSX(({ className = '', calculatorTabs = [], ...rest }) => {
         const tabsNav = calculatorTabs.map((_) => _.nav || {});
         const calculatorBlocks = calculatorTabs.map(({ calculatorBlock }) => calculatorBlock || {});
-        const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-        const [tabsShift, setTabsShift] = useState(0);
-        const handleNextClick = () => setTabsShift(tabsShift + 1);
-        const handlePrevClick = () => setTabsShift(tabsShift - 1);
-        const isGalleryScrollAvailable = calculatorTabs?.length > 3;
-        const showNextButton = isGalleryScrollAvailable && calculatorTabs?.length > tabsShift + 3;
-        const showPrevButton = tabsShift > 0;
+        const [slideIndexShift, setSlideIndexShift] = useState(0);
+        const handleSlideIndexShift = useCallback((_) => setSlideIndexShift(_), []);
+        const COLUMNS_FOR_SCROLL = 3;
+        const [activeIndex, controls] = useCarouselControls({
+            itemCount: calculatorTabs?.length,
+            visibleItemCount: COLUMNS_FOR_SCROLL,
+        });
         return (jsxs(BlockWrapper, { className: `box-border overflow-hidden relative font-sans w-100 text-primary-text bg-white ${className}`, ...rest, children: [jsxs("div", { className: "bg-white", children: [tabsNav.length > 1
-                            ? renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex })
+                            ? renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })
                             : null, renderArrows({
-                            handler: [handlePrevClick, handleNextClick],
-                            isShown: [showPrevButton, showNextButton],
+                            ...controls,
                             btnClass: ['left-3', 'right-3'],
                             className: 'top-8',
-                        })] }), jsx("div", { className: "flex", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: calculatorBlocks?.length ? calculatorBlocks.map(renderCalculatorBlock) : null })] }));
+                        })] }), jsx("div", { className: "flex", style: { transform: `translateX(-${slideIndexShift}00%)` }, role: "list", children: calculatorBlocks?.length ? calculatorBlocks.map(renderCalculatorBlock) : null })] }));
     });
-    function renderNavButton$2({ tab, i, activeSlideIndex, onClick }) {
-        const isActiveBtn = i === activeSlideIndex;
-        const btnClassName = isActiveBtn
+    function renderNavButton$2({ 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`;
-        const btnTitleClassName = isActiveBtn ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
-        const btnDescClassName = isActiveBtn
+        const btnTitleClassName = isActive ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
+        const btnDescClassName = isActive
             ? 'text-l-light text-white'
             : `text-m-light text-secondary-text`;
-        const iconClassName = isActiveBtn ? '' : `text-primary-main`;
+        const iconClassName = isActive ? '' : `text-primary-main`;
         const iconVersion = tab?.icon?.iconVersion;
-        const activeIconStyle = isActiveBtn ? 'white' : 'normal';
+        const activeIconStyle = isActive ? 'white' : 'normal';
         return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: `box-border relative border border-main-stroke cursor-pointer text-left border-b-0 flex hover:h-[88px]
       ${btnClassName}`, children: [jsx(ImgInner, { className: `h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`, image: {
                         ...tab?.icon,
                         iconVersion: iconVersion ?? activeIconStyle,
                     }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "border-0", children: [jsx("div", { className: `${btnTitleClassName}`, children: tab?.title }), jsx("div", { className: `${btnDescClassName}`, children: tab.description })] })] }, String(i)));
     }
-    function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex }) {
-        return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${tabsShift * 388}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({
+    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({
                             tab,
                             i,
-                            activeSlideIndex,
-                            onClick: () => setActiveSlideIndex(i),
+                            isActive: Boolean(i === slideIndexShift),
+                            onClick: () => onClick(i),
                         })) }) }), jsx("div", { className: "w-full h-2 bg-primary-main" })] }));
     }
 
@@ -1327,28 +1367,74 @@
     const DEFAULT_PLACEHOLDER = '1500';
     const CardTransfer = JSX(({ className = '', title = DEFAULT_TITLE, label = DEFAULT_LABEL, placeholder = DEFAULT_PLACEHOLDER, button, ...rest }) => {
         const [value, setValue] = useState('');
+        const handleChange = useCallback((_) => setValue(_), []);
         const isDisabled = !Number(getSanitizedValue(value));
         const buttonStyle = isDisabled
             ? 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: setValue, 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-[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] })] }));
     });
 
-    const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-[100%] h-[100%]';
-    const CARD_STYLE_MAP = {
-        normal: 'min-w-[100%] justify-center items-center my-7 col-span-12',
-        mini: 'justify-center items-center mx-4 my-9 col-span-4',
-    };
+    const childStyleMap = ['[&>*]:min-w-[100%]', '[&>*]:min-w-[50%]', '[&>*]:min-w-[33.33%]'];
+    const CarouselContainer = JSX(({ activeIndex, itemCount, visibleItemCount, containerRef, children }) => {
+        const scrollWidth = containerRef?.current?.scrollWidth || 0;
+        const maxScrollLeft = scrollWidth - (containerRef?.current?.clientWidth || 0);
+        const translateX = visibleItemCount
+            ? `${-Math.round((100 * activeIndex) / visibleItemCount)}%`
+            : `${-Math.round(Math.min((scrollWidth * activeIndex) / (itemCount || 1), maxScrollLeft))}px`;
+        return (jsx("div", { className: `flex gap-1 duration-1000 ${visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''}`, style: { transform: `translateX(${translateX})` }, role: "list", ref: containerRef, children: children }));
+    });
+
+    const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px]';
+    const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, ...rest }) => {
+        const { blocks: childBlocks } = rest.block || {};
+        const count = itemCount || childBlocks?.length || 0;
+        const containerRef = useRef(null);
+        const [activeIndex, controls] = useCarouselControls({
+            itemCount: count,
+            visibleItemCount,
+            isCyclic,
+            container: containerRef.current,
+        });
+        const { isScrollAvailable } = controls;
+        return (jsxs(BlockWrapper, { className: `relative font-sans overflow-hidden ${className}`, ...rest, children: [jsx(CarouselContainer, { activeIndex: activeIndex, itemCount: count, visibleItemCount: visibleItemCount, containerRef: containerRef, children: renderChildren(rest) }), isScrollAvailable && isBlur ? (jsxs("div", { children: [jsx("div", { className: `${blurBaseStyle} left-0 bg-opacity-from-white` }), jsx("div", { className: `${blurBaseStyle} right-0 bg-opacity-to-white` })] })) : null, renderArrows({
+                    ...controls,
+                    btnClass: ['left-8', 'right-8'],
+                    className: 'top-1/2',
+                })] }));
+    });
+    Carousel.childrenTypes = ['CarouselCard', 'CarouselTariffsCard'];
+
+    const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-full h-full';
     const CARD_WIDTH_MAP = {
-        normal: 'w-[1007px]',
-        mini: 'w-[350px]',
+        normal: `w-[${1007 + 48}px]`,
+        mini: `w-[${350 + 48}px]`,
     };
-    const CarouselCard = JSX(({ button, className = '', description, title, version = 'normal' }) => {
-        return (jsx("section", { className: `flex ${CARD_STYLE_MAP[version]}`, children: jsxs("div", { className: `relative ${CARD_WIDTH_MAP[version]}`, children: [jsxs("div", { className: `relative bg-white py-6 px-10 z-10
-              border border-solid border-green-light ${className}`, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center" }), button ? renderButton({ button, buttonClassName: 'mt-6 w-[158px]' }) : null] }), jsx("div", { className: `top-9 right-12 bg-green-dark ${BLOCK_CLASSES}` }), jsx("div", { className: `top-6 right-8 bg-green ${BLOCK_CLASSES}` }), jsx("div", { className: `top-3 right-4 bg-green-light ${BLOCK_CLASSES}` })] }) }));
+    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] })] }) })));
+
+    const LINK_CLASS_NAME = `absolute border border-primary-main ml-3 px-6 py-5
+  text-l-light bg-white text-primary-text flex w-[316px]
+  justify-between items-center group-hover:text-primary-main z-10`;
+    const LINK_BORDER_CLASS_NAME = 'bg-transparent border-white border h-[70px] absolute w-[316px] top-0';
+    const LinkButton = JSX(({ text, href = '', target = '', className = '' }) => {
+        if (!text) {
+            return null;
+        }
+        return (jsxs("div", { className: `relative group cursor-pointer w-[328px] h-[82px] ${className}`, children: [jsxs("a", { className: LINK_CLASS_NAME, role: "link", href: href, target: target, children: [jsx("div", { className: "p-0.5", children: text }), jsx("div", { className: "w-6 h-6", children: jsx(ImgInner, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border brightness-0 group-hover:brightness-100", image: { icon: 'ArrowRightIcon', iconVersion: 'black' }, imageClassName: "group-hover:text-primary-main", width: "24", height: "24", asSVG: true }) })] }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mx-1.5 mt-1.5` }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mt-3 mr-3` })] }));
     });
 
+    const MAX_LINKS_COUNT = 12;
+    const CarouselLinks = JSX(({ className = '', additionalDescription, description, links, title, ...rest }) => {
+        return (jsxs(BlockWrapper, { className: `bg-primary-main flex w-full p-10 overflow-hidden justify-between font-sans ${className}`, ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-9 text-white text-xl-light", children: [jsx(Headline, { title: title, as: "h1", description: description, align: "left", className: "p-0", bgColorHeadline: "secondary" }), additionalDescription ? (jsx("div", { className: "pt-6", children: jsx(Paragraph, { children: additionalDescription }) })) : null] }), links?.length ? renderLinks(links) : null] }));
+    });
+    const renderLinks = (links) => {
+        const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
+        return (jsx(Carousel, { className: "min-w-[832px] w-[832px]", isBlur: false, isCyclic: true, itemCount: itemCount, children: new Array(itemCount).fill(null).map((_, groupIndex) => (jsx("div", { className: "w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start", children: links
+                    .slice(groupIndex * MAX_LINKS_COUNT, (groupIndex + 1) * MAX_LINKS_COUNT)
+                    .map((link, index) => (jsx(LinkButton, { className: "m-1", ...link }, String(index)))) }, String(groupIndex)))) }));
+    };
+
     const CarouselTariffsCard = JSX(({ className = '', title, icon, isHighlighting, button, rows = [], ...rest }) => {
         const hitStyle = getHitStyle(Boolean(isHighlighting));
         const rowsNode = rows.map(renderCardInfo);
@@ -1357,11 +1443,11 @@
             rowsNode.slice(0, VISIBLE_ROWS_COUNT),
             rowsNode.slice(VISIBLE_ROWS_COUNT),
         ];
-        return (jsxs(BlockWrapper, { className: `font-sans bg-white p-[50px] p-8 border border-main-stroke relative w-[322px] min-w-[322px] -ml-[1px] ${hitStyle} ${className}`, ...rest, children: [isHighlighting ? renderHitIcon() : null, icon?.src ? jsx(ImgInner, { className: "flex justify-center", 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 bg-white p-8 border border-main-stroke relative w-[322px] min-w-[322px] -ml-[1px] ${hitStyle} ${className}`, ...rest, children: [isHighlighting ? renderHitIcon() : null, icon?.src ? jsx(ImgInner, { className: "flex justify-center", 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-[71px]' : '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 })] }));
-    const renderCardInfo = (cell) => (jsxs("div", { className: "py-5 border-b border-main-divider flex flex-col gap-1", children: [cell?.title ? (jsx("div", { className: "text-secondary-text text-m-light opacity-80", children: cell.title })) : null, cell?.description ? jsx("div", { className: "text-primary-text text-h6", children: cell.description }) : null] }));
+    const renderCardInfo = (cell, i) => (jsxs("div", { className: "py-5 border-b border-main-divider flex flex-col gap-1", children: [cell?.title ? (jsx("div", { className: "text-secondary-text text-m-light opacity-80", children: cell.title })) : null, cell?.description ? jsx("div", { className: "text-primary-text text-h6", children: cell.description }) : null] }, String(i)));
     const renderHitIcon = () => {
         const POSITION_STYLE = 'absolute -top-7 -right-4';
         return (jsxs("div", { className: `h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)] ${POSITION_STYLE}`, children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "23", height: "22", asSVG: true }), jsx("div", { className: "text-center", children: "\u0425\u0438\u0442" })] }));
@@ -1375,18 +1461,15 @@
     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 CARD_FULL_VIEW_COUNT$2 = 3;
+    const CARD_VIEW_COUNT$1 = 3;
     const CARD_SHIFT$1 = 430;
     const Catalog = JSX(({ cards = [], className = '', title, description, ...rest }) => {
-        const [activeCardIndex, setActiveCardIndex] = useState(0);
-        const handleNextClick = useCallback(() => setActiveCardIndex((_) => _ + 1), []);
-        const handlePrevClick = useCallback(() => setActiveCardIndex((_) => _ - 1), []);
-        const isUseSlider = cards.length > CARD_FULL_VIEW_COUNT$2;
-        const showNextButton = isUseSlider && cards.length - activeCardIndex > CARD_FULL_VIEW_COUNT$2;
-        const showPrevButton = isUseSlider && activeCardIndex > 0;
-        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(-${activeCardIndex * CARD_SHIFT$1}px)` }, role: "list", children: cards?.length ? cards.map((card, i) => jsx(CatalogCard, { ...card }, String(i))) : null }), renderArrows({
-                    handler: [handlePrevClick, handleNextClick],
-                    isShown: [showPrevButton, showNextButton],
+        const [activeIndex, controls] = useCarouselControls({
+            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({
+                    ...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` })] }));
@@ -1396,7 +1479,7 @@
     const BORDER_CLASSES$1 = 'border-main-stroke border-solid border';
     const DIVIDER_CLASSES$1 = 'border-main-divider border border-t-0 border-x-0';
     const FIRST_CELL_CLASSES$1 = 'w-[200px] mr-6';
-    const COLS_LENGTH_FOR_SCROLL$1 = 2;
+    const COLS_LENGTH_FOR_SCROLL$1 = 3;
     const COLUMN_WIDTH$2 = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px
 
     const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES$1} ${GRADIENT}`, role: "columnheader", children: [icon && !image?.src && (jsx(ImgInner, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: getIconWithVersion(icon), width: "63", height: "63", asSVG: true })), image?.src && jsx(ImgInner, { className: "mb-[18px]", image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs-light font-medium py-[11px]", children: link.text }) }) }))] })));
@@ -1405,11 +1488,11 @@
         comparison: 'flex gap-4 duration-1000',
         tariff: 'flex flex-grow duration-1000',
     };
-    const TableCarouselContainer = JSX(({ children, activeCardIndex, columnWidth, version = 'comparison' }) => (jsx("div", { className: "flex flex-1 overflow-hidden", children: jsx("div", { className: carouselContainerClassesMap[version], style: { transform: `translateX(-${activeCardIndex * columnWidth}px)` }, children: children }) })));
+    const TableCarouselContainer = JSX(({ children, activeIndex, columnWidth, version = 'comparison' }) => (jsx("div", { className: "flex flex-1 overflow-hidden", children: jsx("div", { className: carouselContainerClassesMap[version], style: { transform: `translateX(-${activeIndex * columnWidth}px)` }, children: children }) })));
 
     const TableRowContainer = JSX(({ children }) => (jsx("div", { className: "self-start flex flex-col", role: "row", children: jsx("div", { className: "flex", children: children }) })));
 
-    const ComparisonTableColumnHeaders = JSX(({ colHeaders, activeCardIndex }) => (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES$1, role: "columnheader" }), jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$2, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header }, String(i)))) })] })));
+    const ComparisonTableColumnHeaders = JSX(({ colHeaders, activeIndex }) => (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES$1, role: "columnheader" }), jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$2, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header }, String(i)))) })] })));
 
     const TableCell = JSX(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
         const cellWrapperClasses = `w-80 box-border flex flex-col ${BORDER_CLASSES$1} ${!isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md'} ${isFillGradient ? GRADIENT : ''}`;
@@ -1421,20 +1504,21 @@
     const renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label ? jsx("h4", { className: labelStyle(isFillGradient), children: label }) : null, description ? jsx("div", { className: descriptionStyle(isFillGradient), children: description }) : null] }, String(i)));
 
     const titleStyle = (isLastRow = false) => `text-s py-7 ${DIVIDER_CLASSES$1} ${FIRST_CELL_CLASSES$1} ${isLastRow ? 'border-b-0' : 'border-solid'}`;
-    const TableRow = JSX(({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (jsxs(TableRowContainer, { children: [header?.title ? jsx("div", { className: titleStyle(isLastRow), children: header.title }) : null, data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$2, children: data.map((cell, i) => (jsx(TableCell, { cell: cell, isFirstRow: isFirstRow, isLastRow: isLastRow, isFillGradient: isColoredFirstColumn && i === 0 }, String(i)))) })) : null] })));
-
-    const ComparisonTableRows = JSX(({ rowData, isColoredFirstColumn, activeCardIndex, controls, isScrollAvailable }) => {
-        const { inc, dec, canDec, canInc } = controls;
-        return (jsxs("div", { className: "relative", children: [rowData.map((row, i, { length }) => (jsx(TableRow, { row: row, isFirstRow: i === 0, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex, isColoredFirstColumn: isColoredFirstColumn }, String(i)))), isScrollAvailable ? (jsx("div", { children: renderArrows({
-                        handler: [inc, dec],
-                        isShown: [canDec, canInc],
-                        btnClass: ['top-[108px]', 'top-11'],
+    const TableRow = JSX(({ row: { header, data }, activeIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (jsxs(TableRowContainer, { children: [header?.title ? jsx("div", { className: titleStyle(isLastRow), children: header.title }) : null, data?.length ? (jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$2, children: data.map((cell, i) => (jsx(TableCell, { cell: cell, isFirstRow: isFirstRow, isLastRow: isLastRow, isFillGradient: isColoredFirstColumn && i === 0 }, String(i)))) })) : null] })));
+
+    const ComparisonTableRows = JSX(({ rowData, isColoredFirstColumn, activeIndex, controls }) => {
+        const { isScrollAvailable } = controls;
+        return (jsxs("div", { className: "relative", children: [rowData.map((row, i, { length }) => (jsx(TableRow, { row: row, isFirstRow: i === 0, isLastRow: i + 1 === length, activeIndex: activeIndex, isColoredFirstColumn: isColoredFirstColumn }, String(i)))), isScrollAvailable
+                    ? renderArrows({
+                        ...controls,
+                        btnClass: ['top-[108px]', 'top-[44px]'],
                         className: 'right-7',
                         isDisabled: true,
-                    }) })) : null] }));
+                    })
+                    : null] }));
     });
 
-    const ComparisonTableBody = JSX(({ columns, rowHeaders, isShowAllRow, visibleRowLength, isColoredFirstColumn }) => {
+    const ComparisonTableBody = JSX(({ columns = [], rowHeaders, isShowAllRow, visibleRowLength, isColoredFirstColumn }) => {
         const colHeaders = columns?.map(({ header }) => header || {});
         const colData = columns?.map(({ data }) => data) || [];
         const rowData = rowHeaders
@@ -1443,12 +1527,12 @@
             data: colData.map((col) => col?.[i] || [{}]),
         }))
             .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
-        const isScrollAvailable = colData.length > COLS_LENGTH_FOR_SCROLL$1;
         const [activeIndex, controls] = useCarouselControls({
-            itemsCount: colData.length,
+            itemCount: columns.length,
             visibleItemCount: COLS_LENGTH_FOR_SCROLL$1,
         });
-        return (jsxs("div", { children: [jsxs("div", { role: "table", children: [colHeaders?.length ? (jsx(ComparisonTableColumnHeaders, { colHeaders: colHeaders, activeCardIndex: activeIndex })) : null, rowData?.length ? (jsx(ComparisonTableRows, { rowData: rowData, isColoredFirstColumn: isColoredFirstColumn, activeCardIndex: activeIndex, controls: controls, isScrollAvailable: isScrollAvailable })) : null] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
+        const { isScrollAvailable } = controls;
+        return (jsxs("div", { children: [jsxs("div", { role: "table", children: [colHeaders?.length ? (jsx(ComparisonTableColumnHeaders, { colHeaders: colHeaders, activeIndex: activeIndex })) : null, rowData?.length ? (jsx(ComparisonTableRows, { rowData: rowData, isColoredFirstColumn: isColoredFirstColumn, activeIndex: activeIndex, controls: controls })) : null] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
     });
 
     const ComparisonTable = JSX(({ className = '', title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, ...rest }) => {
@@ -1460,9 +1544,7 @@
     });
     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 ContactsBlock = JSX(({ className = '', contacts, info, version = 'secondary', ...rest }) => {
-        return (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-[50px] ${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;
 
@@ -1497,9 +1579,7 @@
         USD: 'DollarIcon',
         EUR: 'EuroIcon',
     };
-    const CurrencyTable = JSX(({ className, exchangeCurrencyItems }) => {
-        return (jsxs("table", { className: `h-fit w-fit ${className}`, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: TABLE_HEAD_STYLE, children: "\u0412\u0430\u043B\u044E\u0442\u0430" }), jsx("th", { className: `${TABLE_HEAD_STYLE} pl-11`, children: "\u041A\u0443\u043F\u0438\u0442\u044C" }), jsx("th", { className: `${TABLE_HEAD_STYLE} pl-11`, children: "\u041F\u0440\u043E\u0434\u0430\u0442\u044C" })] }) }), jsx("tbody", { children: exchangeCurrencyItems.map((item) => renderCurrencyRow(item)) })] }));
-    });
+    const CurrencyTable = JSX(({ className, exchangeCurrencyItems }) => (jsxs("table", { className: `h-fit w-fit ${className}`, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: TABLE_HEAD_STYLE, children: "\u0412\u0430\u043B\u044E\u0442\u0430" }), jsx("th", { className: `${TABLE_HEAD_STYLE} pl-11`, children: "\u041A\u0443\u043F\u0438\u0442\u044C" }), jsx("th", { className: `${TABLE_HEAD_STYLE} pl-11`, children: "\u041F\u0440\u043E\u0434\u0430\u0442\u044C" })] }) }), jsx("tbody", { children: exchangeCurrencyItems.map(renderCurrencyRow) })] })));
     const renderCurrencyRow = (exchangeCurrencyItem) => {
         const currency = exchangeCurrencyItem?.currency?.currency;
         return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [currency ? (jsx(ImgInner, { image: { icon: CURRENCY_ICONS_MAP[currency] }, width: "24", height: "24" })) : null, jsx("span", { className: "ml-2", children: currency })] }) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.saleExchangeRate) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.buyExchangeRate) })] }, currency));
@@ -1596,9 +1676,7 @@
             selectSell: currencyRatesBuy?.[0]?.currency?.currency || Currency.RUB,
             selectBuy: currencyRatesSell?.[0]?.currency?.currency || Currency.USD,
         });
-        const handleSetCalcState = (newState) => {
-            setCalcState((oldState) => ({ ...oldState, ...newState }));
-        };
+        const handleSetCalcState = useCallback((newState) => setCalcState((oldState) => ({ ...oldState, ...newState })), []);
         return (jsxs("div", { className: `grid gap-[18px] pt-2 ${className}`, children: [renderInput({
                     placeholder: 'Хочу продать',
                     rates: currencyRatesSell,
@@ -1857,7 +1935,7 @@
 
     const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
     const Footer = JSX(({ className, ...rest }) => {
-        const fallback = rest.page?.fallback;
+        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 })] }));
     });
@@ -1912,37 +1990,30 @@
         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', }) => {
-        return (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 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 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;
     const renderItems$1 = (items, isDotted, version = 'primary') => (jsx(List, { className: `max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "text-left", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted, version: version }));
 
-    const GalleryContainer = JSX(({ headlineVersion = 'M', cards = [], version = 'normal', activeCardIndex, ...rest }) => {
-        return (jsxs("div", { children: [jsx(Headline, { ...rest, className: "!p-0", headlineVersion: headlineVersion, align: "center" }), jsx("div", { className: `flex mt-8 ${cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''} duration-1000`, style: { transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }, role: "list", children: cards?.map((card, i) => renderCard({ card, version }, i)) })] }));
-    });
+    const GalleryContainer = JSX(({ headlineVersion = 'M', cards = [], version = 'normal', activeIndex, ...rest }) => (jsxs("div", { children: [jsx(Headline, { ...rest, className: "!p-0", headlineVersion: headlineVersion, align: "center" }), jsx("div", { className: `flex mt-8 ${cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''} duration-1000`, style: { transform: `translateX(-${activeIndex * cardWidthMap[version]}px)` }, role: "list", children: cards?.map((card, i) => renderCard({ card, version }, i)) })] })));
     function renderCard({ card, version }, i) {
         return (jsx("section", { className: `box-border border-solid border border-main-stroke p-6 mx-2 flex flex-col justify-between
         items-stretch ${cardStyleMap[version]} ${VersionStyleMap[card.version ?? 'primary']} w-full col-span-4`, role: "listitem", children: jsx(GalleryCardInner, { ...card }) }, String(i)));
     }
 
     const GalleryInner = JSX(({ cards = [], className = '', version = 'normal', button, ...rest }) => {
-        const [activeCardIndex, setActiveCardIndex] = useState(0);
-        const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-        const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
-        const isGalleryScrollAvailable = cards?.length > galleryLengthForScrollMap[version];
-        const showNextButton = isGalleryScrollAvailable &&
-            cards?.length - activeCardIndex > galleryLengthForScrollMap[version];
-        const showPrevButton = isGalleryScrollAvailable && activeCardIndex > 0;
-        return (jsxs(BlockWrapper, { className: `relative font-sans text-primary-text bg-white p-[42px] overflow-hidden flex flex-col ${className}`, ...rest, children: [jsx(GalleryContainer, { cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), renderArrows({
-                    handler: [handlePrevClick, handleNextClick],
-                    isShown: [showPrevButton, showNextButton],
+        const [activeIndex, controls] = useCarouselControls({
+            itemCount: cards?.length,
+            visibleItemCount: galleryLengthForScrollMap[version],
+        });
+        const { isScrollAvailable } = controls;
+        return (jsxs(BlockWrapper, { className: `relative font-sans text-primary-text bg-white p-[42px] overflow-hidden flex flex-col ${className}`, ...rest, children: [jsx(GalleryContainer, { cards: cards, version: version, activeIndex: activeIndex, ...rest }), renderArrows({
+                    ...controls,
                     btnClass: ['left-8', 'right-8'],
                     className: 'top-1/2',
-                }), isGalleryScrollAvailable ? (jsxs("div", { children: [jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[82px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" })] })) : null, button ? renderButton({ button, buttonClassName: 'mt-8 mx-auto' }) : null] }));
+                }), isScrollAvailable ? (jsxs("div", { children: [jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[82px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" })] })) : null, button ? renderButton({ button, buttonClassName: 'mt-8 mx-auto' }) : null] }));
     });
 
     const Gallery = JSX((props) => jsx(GalleryInner, { ...props, version: "normal" }));
@@ -2027,9 +2098,9 @@
         'bg-white': 'black',
         transparent: 'white',
     };
-    const HeaderSecondaryMenu = JSX(({ className, defaultLocation = 'Москва', bgColor = 'bg-white' }) => {
+    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 }), jsx(TopItem, { className: "mr-7", flat: true, href: "#", 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 }), 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-[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 }) })] }));
     });
 
     const maxBy = (discriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
@@ -2112,10 +2183,10 @@
     };
     const Header = JSX(({ bgColor = 'bg-white', className = '', showSubMenu = true, ...rest }) => {
         const router = useRouter();
-        const { topItems, logo, defaultLocation } = useSWRResource(projectSettings.SITEMAP || 'sitemap', rest.page?.fallback);
+        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, 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-[1px] ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
     });
     const getActiveItem = (topItems, router) => {
         const [firstPortal] = topItems || [];
@@ -2124,47 +2195,44 @@
     };
 
     const InsuranceAmountBlockInner = JSX(({ className = '', cards = [], button }) => {
-        const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-        const [tabsShift, setTabsShift] = useState(0);
-        const handleNextClick = () => setTabsShift(tabsShift + 1);
-        const handlePrevClick = () => setTabsShift(tabsShift - 1);
-        const galleryLength = cards?.length ?? 0;
-        const isGalleryScrollAvailable = cards?.length > 2;
-        const showNextButton = isGalleryScrollAvailable && galleryLength > tabsShift + 2;
-        const isLastShift = galleryLength === tabsShift + 2;
-        const showPrevButton = tabsShift > 0;
-        const activeHref = cards[activeSlideIndex]?.href;
+        const [selectedCardIndex, setSelectedCardIndex] = useState(0);
+        const handleSelectedCardIndex = useCallback((_) => setSelectedCardIndex(_), []);
+        const galleryLength = cards.length;
+        const CARD_VIEW_COUNT = 2;
+        const [activeIndex, controls] = useCarouselControls({
+            itemCount: galleryLength,
+            visibleItemCount: CARD_VIEW_COUNT,
+        });
+        const { canDec, canInc } = controls;
+        const activeHref = cards[activeIndex]?.href;
         return (jsxs("section", { role: "listitem", className: `min-w-full text-center ${className}`, children: [jsxs("div", { className: "relative overflow-hidden", children: [galleryLength
                             ? renderGallery({
-                                tabsShift,
+                                activeIndex,
                                 cards,
-                                activeSlideIndex,
-                                isLastShift,
-                                setActiveSlideIndex,
+                                selectedCardIndex,
+                                onClick: handleSelectedCardIndex,
                             })
                             : null, renderArrows({
-                            handler: [handlePrevClick, handleNextClick],
-                            isShown: [showPrevButton, showNextButton],
+                            ...controls,
                             btnClass: ['left-[50px]', 'right-[50px]'],
                             className: 'top-[62px]',
-                        }), showPrevButton ? (jsx("div", { className: "absolute top-0 left-0 h-full w-[136px] bg-opacity-from-white" })) : null, showNextButton ? (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-[240px] text-center", version: "primary", ...button, href: activeHref })] }));
     });
-    function renderGallery({ tabsShift, cards, activeSlideIndex, isLastShift, setActiveSlideIndex, }) {
-        const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
+    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({
                     slide,
                     i,
-                    activeSlideIndex,
-                    onClick: () => setActiveSlideIndex(i),
+                    isActive: Boolean(i === selectedCardIndex),
+                    onClick: () => onClick(i),
                 })) }) }));
     }
-    function renderSlide({ slide, i, activeSlideIndex, onClick }) {
-        const isActiveBtn = i === activeSlideIndex;
-        const btnClassName = isActiveBtn
+    function renderSlide({ slide, i, isActive, onClick }) {
+        const btnClassName = isActive
             ? 'shadow-dark-blue/42 border-primary-main'
             : `ease-in duration-300 border-main-stroke`;
-        return (jsxs("button", { type: "button", onClick: onClick, className: `p-[30px] min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`, children: [slide?.icon ? (jsx(ImgInner, { className: "p-5 rounded-full bg-secondary-light mr-[30px]", image: slide.icon, width: "108", height: "108" })) : null, jsxs("div", { className: "flex gap-3.5", children: [slide?.sum ? renderValueBlock$1('страховая сумма', slide.sum) : null, slide?.fee ? renderValueBlock$1('страховой взнос', slide.fee) : null] }), renderDoneIcon(isActiveBtn)] }, String(i)));
+        return (jsxs("button", { type: "button", onClick: onClick, className: `p-[30px] min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`, children: [slide?.icon ? (jsx(ImgInner, { className: "p-5 rounded-full bg-secondary-light mr-[30px]", image: slide.icon, width: "108", height: "108" })) : null, jsxs("div", { className: "flex gap-3.5", children: [slide?.sum ? renderValueBlock$1('страховая сумма', slide.sum) : null, slide?.fee ? renderValueBlock$1('страховой взнос', slide.fee) : null] }), renderDoneIcon(isActive)] }, String(i)));
     }
     function renderValueBlock$1(title, sum) {
         return (jsxs("div", { className: "flex flex-col text-left whitespace-pre", children: [jsxs("span", { className: "text-h6", children: [addSpacesBetweenNumbers(sum), " \u20BD"] }), jsx("span", { className: "text-secondary-text text-l mt-1", children: title })] }));
@@ -2220,30 +2288,20 @@
     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 = 1;
+    const CARD_FULL_VIEW_COUNT = 1;
     const InvestmentGallery = JSX(({ cards = [], className = '', title, version = 'primary', ...rest }) => {
-        const [activeCardIndex, setActiveCardIndex] = useState(0);
-        const cardWidth = 525;
-        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(-${activeCardIndex * cardWidth}px)` }, role: "list", children: cards?.length ? cards.map(renderInvestmentGalleryCard(className, version)) : null }), renderNavButtons$1({
-                            cardsCount: cards.length,
-                            activeCardIndex,
-                            setActiveCardIndex,
+        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));
-    const renderNavButtons$1 = ({ cardsCount, activeCardIndex, setActiveCardIndex }) => {
-        const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT$1;
-        const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT$1;
-        const showPrevButton = isUseSlider && activeCardIndex > 0;
-        const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-        const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
-        return (jsx("div", { children: renderArrows({
-                handler: [handlePrevClick, handleNextClick],
-                isShown: [showPrevButton, showNextButton],
-                btnClass: ['left-8', 'right-8'],
-                className: 'top-1/2 mt-3',
-            }) }));
-    };
 
     function joinList(sep) {
         return (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]), []);
@@ -2346,16 +2404,16 @@
         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-9 box-border relative min-h-[320px]
+        return (jsxs(BlockWrapper, { className: `flex justify-between font-sans p-[50px] box-border relative min-h-[320px]
         ${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-6 w-full
-                  ${textColorClass} ${AlignText[alignTitle]}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { buttons: buttonsWithClass, className: "flex gap-4", ...rest })) : null, children: [renderDescription$1(description), jsxs("div", { className: "flex flex-1 items-center", children: [qr?.src ? (jsx("div", { className: `flex justify-center mr-5 bg-white rounded-md ${containerStyle}`, children: jsx(ImgInner, { className: "w-fit", image: qr }) })) : null, renderList$1(version, items)] })] }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(ImgInner, { image: image }) })) : null] }));
+        ${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
+                  ${textColorClass} ${AlignText[alignTitle]}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { buttons: buttonsWithClass, className: "flex gap-4 mt-8", ...rest })) : null, children: [renderDescription$1(description), jsxs("div", { className: "flex flex-1 items-center mb-3", children: [qr?.src ? (jsx("div", { className: `flex justify-center mr-5 bg-white rounded-md ${containerStyle}`, children: jsx(ImgInner, { className: "w-fit", image: qr }) })) : null, renderList$1(version, items)] })] }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(ImgInner, { image: image }) })) : null] }));
     });
     const renderList$1 = (version, items) => {
         return items?.length ? (jsx(List, { items: items, itemClassName: "text-l-light mb-2 last:mb-0", version: version })) : (jsx("span", { className: "text-m-light text-secondary-text", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
     };
-    const renderDescription$1 = (description) => description ? jsx("p", { className: "text-xl-light mb-5", children: description }) : null;
+    const renderDescription$1 = (description) => description ? jsx("p", { className: "text-xl-light mb-5 pt-0.5", children: description }) : null;
 
     function renderClusterer(yandexMaps, map, points) {
         map.geoObjects.removeAll();
@@ -2763,19 +2821,15 @@
     const OfficeServicesBlock = JSX(({ className = '', title, servicesList, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans bg-white p-8 flex flex-col ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h5", className: "mb-5", title: title }) : null, servicesList?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: servicesList.map(renderListItems) })) : null] })));
     const renderListItems = (itemList, i) => (jsxs("li", { className: "flex mb-5 last:mb-0 list-none", children: [itemList.icon ? (jsx(ImgInner, { className: "mr-3 min-w-6 min-h-6 w-6 h-6", width: "24", height: "24", asSVG: true, image: getIconWithVersion(itemList.icon) })) : null, itemList.label ? jsx("span", { className: "text-l-light", children: itemList.label }) : null] }, `list_item_${String(i)}`));
 
-    const OtherProducts = JSX(({ className = '', children, ...rest }) => (jsx(BlockWrapper, { className: `font-sans text-primary-text ${className}`, ...rest, children: children })));
+    const OtherProducts = JSX(({ className = '', ...rest }) => (jsx(BlockWrapper, { className: `font-sans text-primary-text ${className}`, ...rest, children: renderChildren(rest) })));
     OtherProducts.childrenTypes = ['OtherProductsItem'];
 
-    function getParentBlockDef(ancestors, type) {
-        const [block] = (ancestors || [])
-            .map((item) => item)
-            .reverse()
-            .find(([_]) => _ && 'type' in _ && (!type || type === _.type)) || [];
-        return block || {};
+    function getParentBlockDef(options) {
+        return options?.parent || {};
     }
 
-    function getParentBlockContent(ancestors, defaultContent) {
-        const { content } = getParentBlockDef(ancestors);
+    function getParentBlockContent(options, defaultContent) {
+        const { content } = getParentBlockDef(options);
         return content || defaultContent;
     }
 
@@ -2799,9 +2853,9 @@
     };
 
     const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
-    const OtherProductsItem = JSX(({ className, page, ancestors, label = '', isUnfolded: unfoldedByDefault, children }) => {
-        const { colorPalette } = getParentBlockContent(ancestors, {});
-        return (jsx("div", { className: `border-0 border-b border-solid border-main-divider ${className}`, children: jsx(Foldable, { unfoldedByDefault: unfoldedByDefault, renderFoldableSection: ({ isUnfolded }) => (jsx("div", { className: "box-border", children: jsx(FoldableSection, { className: "grid grid-cols-12 gap-1 border-box", isUnfolded: isUnfolded, children: children }) })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(DefaultFoldButton, { label: label, icon: icons[Number(isUnfolded)], dataTheme: page?.colorPalette || colorPalette, onClick: onToggle })) }) }));
+    const OtherProductsItem = JSX(({ className, label = '', isUnfolded: unfoldedByDefault, ...rest }) => {
+        const { colorPalette } = getParentBlockContent(rest.options, {});
+        return (jsx("div", { className: `border-0 border-b border-solid border-main-divider ${className}`, children: jsx(Foldable, { unfoldedByDefault: unfoldedByDefault, renderFoldableSection: ({ isUnfolded }) => (jsx("div", { className: "box-border", children: jsx(FoldableSection, { className: "grid grid-cols-12 gap-1 border-box", isUnfolded: isUnfolded, children: renderChildren(rest) }) })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(DefaultFoldButton, { label: label, icon: icons[Number(isUnfolded)], dataTheme: colorPalette || rest.options?.page?.colorPalette, onClick: onToggle })) }) }));
     });
     OtherProductsItem.childrenTypes = []; // All types of blocks are suitable
 
@@ -2886,10 +2940,10 @@
 
     const renderBenefit$1 = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => (jsx(BenefitItem, { icon: icon, label: label, description: description, version: version, benefitsVersion: benefitsVersion }, String(i)));
 
-    const ProductBlockInner = JSX(({ className = '', title, headlineVersion = 'L', description, benefitsCountOfRow = 3, benefits, benefitsVersion, buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', ...rest }) => {
+    const ProductBlockInner = JSX(({ className = '', title, headlineVersion = 'L', description, benefitsCountOfRow = 3, benefits, benefitsVersion, buttons, footnote, image, items, version = 'primary', isDotted = true, textBlockClassName = '', ...rest }) => {
         const benefitsCount = benefits?.filter((_) => _.label)?.length;
         const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCountOfRow);
-        return (jsxs("div", { className: `flex grow justify-between items-stretch h-full ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion, align: "left", ...rest }), jsxs(BaseTile, { buttons: buttons?.length ? (jsx(ButtonSection, { buttons: buttons, className: "flex gap-4", ...rest })) : null, children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits.map(renderBenefit$1(version, benefitsVersion)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] })] }), image?.src && jsx(ImgInner, { className: "mt-[-50px]", image: image })] }));
+        return (jsxs("div", { className: `flex grow justify-between items-stretch h-full ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion, align: "left", ...rest }), jsxs("div", { className: "flex flex-col justify-between h-full", children: [jsxs(BaseTile, { buttons: buttons?.length ? (jsx(ButtonSection, { buttons: buttons, className: "flex gap-4", ...rest })) : null, children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits.map(renderBenefit$1(version, benefitsVersion)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] }), footnote ? jsx("p", { className: "text-m-light pt-12", children: footnote }) : null] })] }), image?.src && jsx(ImgInner, { className: "mt-[-50px]", image: image })] }));
     });
     const getBenefitsContainerStyles = (benefitsCountOfRow = 2) => `gap-6 mt-6 ${benefitsCountOfRow > 2
     ? 'inline-grid grid-cols-[auto_auto_auto]'
@@ -3005,38 +3059,29 @@
     });
 
     const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
-    const CARD_FULL_VIEW_COUNT = 2;
+    const CARD_VIEW_COUNT = 2;
     const CARD_SHIFT = 525;
     const Recommendation = JSX(({ recommendations = [], className = '', title, version = 'primary', ...rest }) => {
-        const [activeCardIndex, setActiveCardIndex] = useState(0);
-        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-6", title: title }) : null, jsxs("div", { children: [jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }, role: "list", children: recommendations?.length
+        const [activeIndex, controls] = useCarouselControls({
+            itemCount: recommendations.length,
+            visibleItemCount: CARD_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-6", title: title }) : null, jsxs("div", { children: [jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }, role: "list", children: recommendations.length
                                 ? recommendations.map((card, i) => (jsx(RecommendationCard, { version: version, className: BorderVersionStyleMap[version], ...card }, String(i))))
-                                : null }), renderNavButtons({
-                            cardsCount: recommendations.length,
-                            activeCardIndex,
-                            setActiveCardIndex,
+                                : null }), renderArrows({
+                            ...controls,
+                            btnClass: ['left-8', 'right-8'],
+                            className: 'top-1/2 mt-3',
                         })] }), jsx("div", { className: `${BLUR_BLOCK_CLASSES} left-0 ${version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'}` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES} right-0 ${version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'}` })] }));
     });
-    const renderNavButtons = ({ cardsCount, activeCardIndex, setActiveCardIndex, }) => {
-        const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-        const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
-        const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
-        const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
-        const showPrevButton = isUseSlider && activeCardIndex > 0;
-        return (jsx("div", { children: renderArrows({
-                handler: [handlePrevClick, handleNextClick],
-                isShown: [showPrevButton, showNextButton],
-                btnClass: ['left-8', 'right-8'],
-                className: 'top-1/2 mt-3',
-            }) }));
-    };
 
-    const RollupItem = JSX(({ className = '', label = 'Развернуть', isExpanded, isFoldButtonOnTop = true, version = 'primary', children, }) => (jsx("div", { className: `border-b border-solid border-main-divider w-full ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx("div", { className: "box-border", children: jsx(FoldableSection, { className: `grid grid-cols-12 gap-1 border-box`, isUnfolded: isUnfolded, children: children }) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle, label, version }) }) })));
+    const RollupItem = JSX(({ className = '', label = 'Развернуть', isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => (jsx("div", { className: `border-b border-solid border-main-divider w-full ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx("div", { className: "box-border", children: jsx(FoldableSection, { className: `grid grid-cols-12 gap-1 border-box`, isUnfolded: isUnfolded, children: renderChildren(rest) }) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle, label, version }) }) })));
     RollupItem.childrenTypes = [];
     const renderFoldButton = ({ isUnfolded, onToggle, label, version }) => {
-        const icons = ['PlusIcon', 'MinusIcon'];
+        const iconsPrimary = ['PlusIcon', 'MinusIcon'];
+        const iconsSecondary = ['ArrowDownIcon', 'ArrowUpIcon'];
         const labels = label ? [label, label] : ['Развернуть', 'Скрыть'];
-        return version === 'primary' ? (jsx(FoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle })) : (jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
+        return version === 'primary' ? (jsx(FoldButton, { icon: iconsPrimary[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle })) : (jsx(DefaultFoldButton, { icon: iconsSecondary[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
     };
     const FoldButton = JSX(({ label, icon, onClick }) => (jsxs("button", { className: "border-none bg-transparent px-9 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer", onClick: onClick, children: [jsx("span", { className: "text-xl font-medium pr-2.5", children: label }), icon ? jsx(ImgInner, { image: getIconWithVersion({ icon }), width: "24", height: "24", asSVG: true }) : null] })));
 
@@ -3231,7 +3276,7 @@
         return (jsxs(BlockWrapper, { className: [
                 'box-border py-[50px] font-sans',
                 shortGaps ? 'px-20' : 'px-[70px]',
-                'flex flex-col items-center',
+                'flex flex-col items-center overflow-hidden',
                 styleMap.background,
                 styleMap.title,
                 className,
@@ -3417,16 +3462,15 @@
 
     const COLUMN_WIDTH = 140;
     const InnerTableBodyItem = JSX(({ rows }) => {
-        const [activeColumnIndex, setActiveColumnIndex] = useState(0);
-        const handleNextClick = () => setActiveColumnIndex(activeColumnIndex + 1);
-        const handlePrevClick = () => setActiveColumnIndex(activeColumnIndex - 1);
         const rowsLength = rows?.[0]?.length ?? 0;
-        const showNextButton = rowsLength > 3 && rowsLength > activeColumnIndex + 4;
-        const showPrevButton = activeColumnIndex > 0;
-        return (jsxs("div", { children: [rows?.map(renderRow(activeColumnIndex)), renderArrows({
-                    handler: [handlePrevClick, handleNextClick],
-                    isShown: [showPrevButton, showNextButton],
-                    btnClass: ['right-3 top-24', 'right-3 top-2'],
+        const CARD_VIEW_COUNT = 5;
+        const [activeIndex, controls] = useCarouselControls({
+            itemCount: rowsLength,
+            visibleItemCount: CARD_VIEW_COUNT,
+        });
+        return (jsxs("div", { children: [rows?.map(renderRow(activeIndex)), renderArrows({
+                    ...controls,
+                    btnClass: ['left-3 top-20', 'right-3 top-20'],
                     className: '',
                 })] }));
     });
@@ -3470,11 +3514,11 @@
 
     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 }, activeCardIndex, rowIdx, ...rest }) => {
+    const TariffsTableRow = JSX(({ row: { header, data }, activeIndex, rowIdx, ...rest }) => {
         const [tableInner, setTableInner] = useState(undefined);
         const [openTableInnerIdx, setOpenTableInnerIdx] = useState(undefined);
         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, { activeCardIndex: activeCardIndex, 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-[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] }));
     });
 
     const TariffsTable = JSX(({ className = '', title, description, rowHeaders, tariffsColumns: columns, hiddenRowsNum = 0, ...rest }) => {
@@ -3483,15 +3527,15 @@
             header,
             data: colData.map((col) => col?.[i] || []),
         }));
-        const columnsLength = colData.length;
+        const itemCount = colData.length;
         const [activeIndex, controls] = useCarouselControls({
-            itemsCount: colData.length,
+            itemCount: itemCount,
             visibleItemCount: COLS_LENGTH_FOR_SCROLL,
         });
-        const isScrollAvailable = colData.length > COLS_LENGTH_FOR_SCROLL;
-        const rows = (rowData || []).map((row, i) => (jsx(TariffsTableRow, { row: row, activeCardIndex: activeIndex, rowIdx: i, ...rest }, String(i))));
+        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 ${columnsLength > 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-[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 }))] }));
     });
     function renderTitle({ title, description }) {
         return title ? (jsx(Heading, { headingType: "h3", className: `text-center ${description ? 'mb-2.5' : 'mb-8'}`, title: title })) : null;
@@ -3499,15 +3543,13 @@
     function renderDescription(description) {
         return description ? jsx("div", { className: "mb-9 text-center text-l", children: description }) : null;
     }
-    const Wrapper = JSX(({ children, controls, isScrollAvailable }) => {
-        const { inc, dec, canDec, canInc } = controls;
-        return (jsxs("div", { role: "table", children: [jsxs("div", { className: "relative", children: [children, isScrollAvailable ? (jsx("div", { children: renderArrows({
-                                handler: [inc, dec],
-                                isShown: [canDec, canInc],
-                                btnClass: ['top-[108px]', 'top-11'],
-                                className: 'right-7',
-                            }) })) : null] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
-    });
+    const Wrapper = JSX(({ children, controls, isScrollAvailable }) => (jsxs("div", { role: "table", children: [jsxs("div", { className: "relative", children: [children, isScrollAvailable
+                        ? 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] })));
 
     const textBlockStyleMaps = {
         primary: {
@@ -3574,17 +3616,27 @@
         primary: 'bg-white',
         secondary: 'bg-primary-main',
     };
-    const VerticalLayout = JSX(({ className = '', children, gap = '', align = 'left', version = 'transparent', ...rest }) => (jsx(BlockWrapper, { className: [
+    const VerticalLayout = JSX(({ className = '', gap = '', align, version = 'transparent', ...rest }) => (jsx(BlockWrapper, { className: [
             'flex flex-col',
             gapStyleMap[gap],
-            alignStyle[align],
+            align && alignStyle[align],
             backgroundStyleMap[version],
             className,
-        ].join(' '), ...rest, children: children })));
+        ]
+            .filter(Boolean)
+            .join(' '), ...rest, children: renderChildren(rest) })));
     VerticalLayout.childrenTypes = {
         exclude: ['VerticalLayout'],
     };
 
+    const MIN_COL_SPAN = 10;
+    const getPaddings = (className) => getColSpan(className) < MIN_COL_SPAN ? 'py-6 px-11' : 'py-12 px-32';
+
+    const Video = JSX((props) => {
+        const { title, src, previewImg, className = '', ...rest } = props;
+        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 Blocks = {
         Accordion,
         AccordionItem,
@@ -3633,12 +3685,9 @@
         TextBlock,
         Tile,
         VerticalLayout,
+        Video,
     };
 
-    function style2className(style) {
-        return style ? style.filter(Boolean).join(' ') : '';
-    }
-
     const api = LikeAPI();
     function useLikeService(pagePath) {
         const [likeCount, setLikeCount] = useState(0);
@@ -3680,59 +3729,25 @@
         return (jsxs("div", { className: `border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${className}`, children: [jsx(LikeButton, { onClick: handlerDecorator(likeService.like), ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u043B\u0430\u0439\u043A\u00BB" }), jsx(LikeButton, { onClick: handlerDecorator(likeService.dislike), className: "rotate-180", ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u0434\u0438\u0437\u043B\u0430\u0439\u043A\u00BB" }), jsx("span", { className: "select-none", children: likeService.likeCount })] }));
     });
 
-    const DEFAULT_SLOT_NAME = null;
-
-    const renderSlots = ({ slots, parent, options, ancestors = [], }) => Object.entries(slots || {}).reduce((res, [slotName, slotBlocks]) => ({
-        ...res,
-        [slotName]: renderBlocksList({
-            blocks: slotBlocks,
-            parent,
-            slotName,
-            options,
-            ancestors,
-        }),
-    }), {});
-
-    function renderBlock({ block = {}, options, ancestors = [] }) {
-        const { key, page, blockDecorator, blocksRegistry = {} } = options;
-        const { type, slots, blocks: childBlocks } = block;
-        if (!(type && type in blocksRegistry)) {
-            console.warn(`No block with "${type}" is registered`);
-        }
-        const BlockComponent = type && blocksRegistry[type];
-        const subBlockRenderProps = { parent: block, options, ancestors };
-        const children = renderBlocksList({ ...subBlockRenderProps, blocks: childBlocks });
-        const blockSlots = slots ? renderSlots({ ...subBlockRenderProps, slots }) : {};
-        return blockDecorator({
-            blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
-            block,
-            ancestors,
-            // Adjusted by decorator block and blockClassName
-            render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
-                const { content } = adjustedBlock;
-                return BlockComponent ? (jsx(BlockComponent, { page: page, block: adjustedBlock, className: adjustedBlockClassName, ancestors: ancestors, slots: blockSlots, ...content, children: children }, key)) : null;
-            },
-        }, key);
-    }
-
-    const renderBlocksList = ({ blocks, parent, slotName = DEFAULT_SLOT_NAME, options, ancestors = [], }) => (blocks || []).map((_, j) => renderBlock({
-        block: _,
-        options: { ...options, key: `${options.key ? options.key : _.type}-${j}` },
-        ancestors: [...ancestors, [parent, slotName]],
-    }));
-
-    const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
     const ContentPage = JSX((props) => {
         const { className = '', blocksRegistry, blockDecorator, data = {} } = props;
         const { style: pageStyle, blocks, slots, likeControl, colorPalette = 'pc' } = data;
         const options = {
             key: '',
-            blocksRegistry,
             page: data,
-            blockDecorator: blockDecorator || defaultBlockDecorator,
+            blocksRegistry,
+            blockDecorator,
+            parent: data,
         };
-        const pageSlots = renderSlots({ slots, parent: data, options });
-        return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [pageSlots?.header ? (jsx("div", { className: "mb-5 shadow-[0_8px_32px_0px_#00000014]", children: pageSlots.header })) : null, blocks?.length ? (jsxs("div", { className: "container grid grid-cols-12 gap-1", children: [renderBlocksList({ blocks, parent: data, options }), pageSlots?.footer ? pageSlots.footer : null] })) : null, likeControl ? renderLikeControl() : null] }));
+        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',
+                    }) })) : null, jsxs("div", { className: "container grid grid-cols-12 gap-1", children: [renderBlocksList(blocks, options), slots?.footer
+                            ? renderBlocksList(slots?.footer, {
+                                ...options,
+                                slotName: 'footer',
+                            })
+                            : null] }), likeControl ? renderLikeControl() : null] }));
     });
     ContentPage.childrenTypes = [];
     ContentPage.slots = () => ['header', 'footer'];
@@ -3740,7 +3755,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.33";
+    const packageVersion = "0.6.35";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;