@redneckz/wildless-cms-uni-blocks 0.5.13 → 0.5.15

package/bundle/bundle.umd.js

@@ -228,10 +228,6 @@
         return JSXTmpl;
     };
 
-    function style2className(style) {
-        return style ? style.filter(Boolean).join(' ') : '';
-    }
-
     class EventBus {
         static inst = new EventBus();
         subscribers = {};
@@ -303,11 +299,13 @@
         const observerCallback = useMemo(() => changeHashOnObserve({ anchor, anchorClickRef }), [anchor]);
         useEffect(() => {
             const anchorClickCleanup = EventBus.inst.subscribe('anchorClick', (e) => {
+                setShouldRenderBlock(true);
                 anchorClickRef.current = e;
             });
             const tabCleanup = EventBus.inst.subscribe('tab', (event) => {
                 if (event.type === 'group') {
-                    setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
+                    const blockHasSettgins = labels?.length || anchor;
+                    setShouldRenderBlock(event.label ? !blockHasSettgins || Boolean(labels?.includes(event.label)) : true);
                 }
                 else {
                     changeHash(event.label);
@@ -336,11 +334,6 @@
         }
     }
 
-    const Description = JSX((props) => {
-        const { className = '', description } = props;
-        return jsx("div", { className: `${className}`, children: description });
-    });
-
     const HEADING_STYLE_MAP = {
         h0: 'text-h0',
         h1: 'text-h1',
@@ -355,74 +348,36 @@
         return (jsx(Tag, { className: `font-sans m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`, children: title }));
     });
 
-    const ALIGN_TEXT = {
+    const AccordionItemsList = JSX(({ children }) => (jsx("ul", { className: "list-none m-0 p-0", children: children })));
+
+    const ALIGN_TITLE$1 = {
         left: 'text-left',
         center: 'text-center',
         right: 'text-right',
     };
-    const HEADLINE_BLOCK_STYLE_MAPS = {
-        transparent: {
-            background: 'bg-transparent',
-            text: 'text-primary-text',
-            description: 'text-primary-text',
-        },
-        primary: {
-            background: 'bg-white',
-            text: 'text-primary-text',
-            description: 'text-primary-text',
-        },
-        secondary: {
-            background: 'bg-primary-main',
-            text: 'text-white',
-            description: 'text-white/80',
-        },
-    };
-    const HEADLINE_VERSION = {
-        XXL: {
-            descriptionFont: 'text-h5',
-            gap: 'gap-[18px]',
-            headingType: 'h0',
-            as: 'h1',
-        },
-        XL: {
-            descriptionFont: 'text-xl-light',
-            gap: 'gap-4',
-            headingType: 'h1',
-            as: 'h1',
-        },
-        L: {
-            descriptionFont: 'text-xl-light',
-            gap: 'gap-4',
-            headingType: 'h2',
-            as: 'h2',
-        },
-        M: {
-            descriptionFont: 'text-xl-light',
-            gap: 'gap-3',
-            headingType: 'h3',
-            as: 'h3',
-        },
-        S: {
-            descriptionFont: 'text-xl-light',
-            gap: 'gap-2',
-            headingType: 'h4',
-            as: 'h4',
-        },
-    };
-    const HEADLINE_SMALL_VERSION = {
-        XL_L: 'text-xl-light',
-        XL_R: 'text-xl',
-        L_L: 'text-l-light',
-        L_R: 'text-l',
-        M: 'text-m-light',
-        S: 'text-s-light',
-        XS: 'text-xs-light',
-    };
+    const Accordion = JSX(({ className = '', context, title, accordionAlignTitle = 'center', description, children, ...rest }) => (jsxs(BlockWrapper, { context: context, className: `p-[50px] mb-1 last:mb-0 font-sans bg-white text-primary-text ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `mb-2.5 ${ALIGN_TITLE$1[accordionAlignTitle]}`, title: title })) : null, description ? jsx("div", { className: "mb-2.5 text-l", children: description }) : null, jsx(AccordionItemsList, { children: children })] })));
+    Accordion.childrenTypes = ['AccordionItem'];
 
-    const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'center', className = '', title, description, headlineVersion = 'XL', as, ...rest }) => {
-        const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
-        const SIZE_MAPS = HEADLINE_VERSION[headlineVersion];
-        return (jsxs(BlockWrapper, { className: `font-sans flex flex-col p-[50px] ${SIZE_MAPS.gap} ${STYLE_MAPS.background} ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: SIZE_MAPS?.headingType, as: as || SIZE_MAPS?.as, className: `whitespace-pre-wrap ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx(Description, { className: `${SIZE_MAPS.descriptionFont} ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, description: description })) : null] }));
+    const Foldable = JSX(({ isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
+        const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
+        const onToggle = useCallback(() => {
+            setIsUnfolded((_) => !_);
+        }, []);
+        const sectionNode = renderFoldableSection({ isUnfolded, onToggle });
+        const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
+        return isFoldButtonOnTop ? (jsxs("div", { children: [buttonNode, sectionNode] })) : (jsxs("div", { children: [sectionNode, buttonNode] }));
+    });
+
+    const FoldableSection = JSX(({ className = '', isUnfolded, children }) => {
+        const containerRef = useRef(null);
+        useEffect(() => {
+            if (containerRef.current) {
+                containerRef.current.style.maxHeight = isUnfolded
+                    ? `${containerRef.current.scrollHeight}px`
+                    : '';
+            }
+        }, [isUnfolded, children?.length]);
+        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden max-h-0 ${className}`, children: children }));
     });
 
     const svgUseStyleMap = {
@@ -447,7 +402,7 @@
     const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
 
     function getIconVersion$1(image) {
-        return typeof image === 'string' ? 'normal' : image.iconVersion || 'normal';
+        return typeof image === 'string' ? 'normal' : image?.iconVersion || 'normal';
     }
 
     const sourcesComparator = (a, b) => {
@@ -493,85 +448,58 @@
         return (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile }));
     });
 
-    const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
-        const { text, fileSize, ...linkProps } = doc;
-        return (jsxs("a", { className: className, role: "link", ...linkProps, children: [icon ? (jsx(ImgInner, { className: iconClassName, image: icon, width: "24px", height: "24px", asSVG: true })) : null, text ? (jsxs("span", { className: textClassName, children: [text, jsx("span", { className: suffixClassName, children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] }));
-    });
-    const formatSuffix = (ext, fileSize) => {
-        const prefix = ext || fileSize ? ',' : '';
-        const extension = ext ? ` ${ext}` : '';
-        const size = fileSize ? ` (${fileSize})` : '';
-        return prefix + extension + size;
-    };
-    const getExtFromHref = (href) => {
-        if (!href) {
-            return '';
-        }
-        const index = href.lastIndexOf('.');
-        return index !== -1 ? href.substring(index + 1) : '';
-    };
-
-    const LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full box-border ${className}`, iconClassName: "mr-2.5 min-w-6 min-h-6", textClassName: "self-center text-l-light", suffixClassName: "text-secondary-text group-hover:text-primary-main", doc: doc, icon: icon })));
-
-    const LinkDocsList = JSX(({ className, documents, columnsMode = 'double', icon }) => {
-        return documents?.length ? (jsx("div", { className: className, role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { className: "group flex align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main", doc: doc, icon: icon }) }, String(i)))) })) : null;
-    });
-
-    const linkColumnsModeStyleMap = {
-        double: 'flex gap-x-5 gap-y-[26px] flex-wrap',
-        single: 'flex gap-3.5 flex-col',
-    };
-    const LinkDocs = JSX(({ context, className = '', title, description, align = 'center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-[50px] bg-white ${className}`, context: context, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, context: context, align: align, headlineVersion: "M", as: "h2" }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] }));
-    });
+    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, { label: label, icon: icons$1[Number(isUnfolded)], onClick: onToggle })) }) })));
+    AccordionItem.childrenTypes = [];
+    const FoldButton = 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("span", { className: "text-xl font-medium pr-2.5", children: label }), jsx(ImgInner, { image: icon, className: "text-primary-main flex-shrink-0", width: "24", height: "24", asSVG: true })] })));
 
-    const VersionStyleMap = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
+    const benefitsBlockStyleMap = {
+        primary: 'bg-white',
+        secondary: 'bg-primary-main',
     };
-
-    const titleStyleMap = {
-        primary: 'text-primary-text',
+    const benefitsTextStyleMap = {
+        primary: '',
         secondary: 'text-white',
     };
-    const descStyleMap = {
+    const benefitsDescriptionStyleMap = {
         primary: 'text-secondary-text',
-        secondary: 'text-white',
+        secondary: 'text-white opacity-80',
     };
-    const BenefitItem = JSX((props) => {
-        const { className = '', icon, label, description, version = 'primary', benefitsVersion = 'normal', } = props;
-        const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
-        const listItemAlign = description ? 'items-start' : 'items-center';
-        const iconVersion = getIconVersion(icon, isIconWhite);
-        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: renderBenefitIconBgStyle(version, benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: { ...icon, iconVersion }, asSVG: true }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? jsx("div", { className: `text-h6 ${titleStyleMap[version]}`, children: label }) : null, description ? (jsx("div", { className: `text-m-light ${descStyleMap[version]}`, children: description })) : null] })] }));
+    const benefitsIconStyleMap = {
+        primary: 'bg-main-divider text-primary-main',
+        secondary: 'bg-white/30 text-black',
+    };
+    const BenefitsBlock = JSX(({ className = '', title, benefitList, benefitsBlockVersion = 'primary', ...rest }) => {
+        return (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-12 flex flex-col items-center ${className} ${benefitsBlockStyleMap[benefitsBlockVersion]}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `max-w-[47rem] text-center ${benefitsTextStyleMap[benefitsBlockVersion]}`, title: title })) : null, benefitList?.length ? renderBenefits$1(benefitList, benefitsBlockVersion) : null] }));
     });
-    function renderBenefitIconBgStyle(version, benefitsVersion) {
-        let bgColorStyle = 'bg-primary-main text-black';
-        if (version === 'secondary') {
-            bgColorStyle = 'bg-white/30 text-black';
+    const renderBenefits$1 = (benefitList, benefitsBlockVersion) => {
+        return (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep(benefitsBlockVersion)) }));
+    };
+    const setIconVersion = (benefitIcon, benefitsBlockVersion) => {
+        if (!benefitIcon.icon || benefitIcon?.iconVersion) {
+            return benefitIcon;
         }
-        else if (benefitsVersion === 'normal') {
-            bgColorStyle = 'bg-secondary-light text-primary-main';
+        benefitIcon.iconVersion = benefitsBlockVersion === 'secondary' ? 'white' : 'normal';
+        return benefitIcon;
+    };
+    const renderStep = (benefitsBlockVersion) => (benefit, i) => {
+        const description = (benefit?.description || undefined);
+        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[benefitsBlockVersion]}`, image: setIconVersion(benefit.icon, benefitsBlockVersion), 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[benefitsBlockVersion]}`, children: benefit.label })) : null, renderDescription$2(description, benefitsBlockVersion)] })] }, String(i)));
+    };
+    const renderDescription$2 = (description, benefitsBlockVersion) => {
+        const benefitType = description ? description?.benefitType : null;
+        if (!benefitType) {
+            return null;
         }
-        return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
-    }
-    const getIconVersion = (icon, isIconWhite) => icon?.iconVersion || isIconWhite ? 'white' : 'normal';
-
-    const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
-
-    const PictureText = JSX(({ className = '', context, title, description, image, benefits, version = 'primary', sum, monthLimit, directionRight = false, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `relative font-sans py-12 px-24 ${VersionStyleMap[version]} ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, align: "center" }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src ? jsx(ImgInner, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] })] }));
-    });
-    const renderBenefit$2 = (version) => (benefit, i) => (jsx(BenefitItem, { icon: benefit.icon, label: benefit.label, description: benefit.description, version: version }, String(i)));
-    function renderInsuranceSumMonth(sum, monthLimit) {
-        return sum || monthLimit ? (jsxs("div", { className: "bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4", children: [Number.isFinite(sum) ? renderValueBlock$1('Страховая сумма:', sum, Boolean(monthLimit)) : null, Number.isFinite(monthLimit)
-                    ? renderValueBlock$1('Ежемесячный лимит:', monthLimit, Boolean(sum))
-                    : null] })) : null;
-    }
-    function renderValueBlock$1(title, sum = 0, isAnotherBlock = false) {
-        const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
-        return (jsxs("div", { className: `flex justify-between items-center gap-2 w-full ${widthStyle}`, children: [jsx("span", { className: "text-secondary-text text-l-light", children: title }), jsxs("span", { className: "text-primary-main text-h6", children: [addSpacesBetweenNumbers(sum), " \u20BD"] })] }));
-    }
+        return description ? (jsx("div", { className: `text-l-light mt-2 ${benefitsDescriptionStyleMap[benefitsBlockVersion]}`, children: benefitType === 'list'
+                ? renderListBenefit(description)
+                : renderTextBenefit(description) })) : null;
+    };
+    const renderTextBenefit = (description) => (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('//');
     const withoutQuery = (href) => (href || '').replace(/\/?\?.*/, '');
@@ -640,19 +568,6 @@
         };
     }
 
-    const Breadcrumb = JSX(({ text, href, target, onClick, className = '', children }) => {
-        if (href) {
-            return (jsx("a", { className: `no-underline ${className}`, href: href, target: target, onClick: onClick, children: jsx("span", { className: className, children: text || children }) }));
-        }
-        else {
-            return jsx("span", { className: className, children: text || children });
-        }
-    });
-
-    function joinList(sep) {
-        return (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]), []);
-    }
-
     const buttonStyleMap = {
         primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
         secondary: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
@@ -730,370 +645,80 @@
         return jsx(Button, { ...button, ...buttonProps });
     });
 
-    const LIST_DOT_STYLE_MAP = {
-        primary: 'bg-primary-text',
-        secondary: 'bg-white',
-        gray: 'bg-secondary-text',
-    };
-    const DOT_SIZE_MAP = {
-        L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4 mt-3',
-        M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3 mt-3',
-        S: 'w-1 h-1 min-w-1 min-h-1 mr-2 mt-2.5',
-    };
-    const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary', size = 'M' }) => {
-        return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted ? (jsx("div", { className: `rounded-full inline-block ${LIST_DOT_STYLE_MAP[version]} ${DOT_SIZE_MAP[size]}` })) : null, jsx("span", { children: children })] }));
+    const Description = JSX((props) => {
+        const { className = '', description } = props;
+        return jsx("div", { className: `${className}`, children: description });
     });
 
-    const TEXT_STYLE_MAP = {
-        primary: 'text-primary-text',
-        secondary: 'text-white',
-        gray: 'text-secondary-text',
-    };
-    const TEXT_SIZE_MAP = {
-        S: 'text-l-light',
-        M: 'text-h6',
-        L: 'text-h5',
+    const ALIGN_TEXT = {
+        left: 'text-left',
+        center: 'text-center',
+        right: 'text-right',
     };
-    const ITEM_INDENT_MAP = {
-        S: 'ml-2',
-        M: 'ml-3',
-        L: 'ml-4',
+    const HEADLINE_BLOCK_STYLE_MAPS = {
+        transparent: {
+            background: 'bg-transparent',
+            text: 'text-primary-text',
+            description: 'text-primary-text',
+        },
+        primary: {
+            background: 'bg-white',
+            text: 'text-primary-text',
+            description: 'text-primary-text',
+        },
+        secondary: {
+            background: 'bg-primary-main',
+            text: 'text-white',
+            description: 'text-white/80',
+        },
     };
-    const List = JSX((props) => {
-        const { className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M', version = 'primary', } = props;
-        if (!items?.length) {
-            return null;
-        }
-        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 BaseTile = JSX(({ className = '', title = '', children, buttons, image }) => {
-        return (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { className: "h-full", children: children }), buttons ? jsx("div", { className: "mt-auto pt-8", children: buttons }) : null] }), image] })] }));
-    });
-
-    const renderBenefit$1 = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => {
-        return (jsx(BenefitItem, { icon: icon, label: label, description: description, version: version, benefitsVersion: benefitsVersion }, String(i)));
-    };
-
-    const ProductBlockInner = JSX(({ className = '', context, title, headlineVersion = 'L', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
-        return (jsxs("div", { className: `flex grow justify-between items-stretch h-full ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { context: context, title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion, align: "left" }), jsxs(BaseTile, { context: context, buttons: getButtons(context, buttons), children: [benefits?.filter((_) => _.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", 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 })] }));
-    });
-    const getButtons = (context, buttons) => {
-        return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex gap-4" })) : null;
-    };
-
-    function renderBackwardButton(button, version, className) {
-        const { text, href, target, onClick } = button;
-        const iconVersion = version === 'primary' ? 'white' : 'black';
-        const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
-        return (jsxs("div", { className: `flex items-center cursor-pointer ${className}`, onClick: onClick, children: [jsx(Button, { version: version, rounded: true, className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3", ariaLabel: text, href: href, target: target, children: jsx(ImgInner, { className: "w-4 h-4", image: { ...backwardIcon, iconVersion }, asSVG: true }) }), text ? jsx("span", { className: "text-m", children: text }) : null] }));
-    }
-
-    const breadcrumbsStyleMap = {
-        primary: 'text-secondary-text',
-        secondary: 'text-white/80',
-    };
-    const ProductBlock = JSX((props) => {
-        const { context, className = '', breadcrumbs, backwardButton, version = 'primary', ...otherProps } = props;
-        const router = context.useRouter();
-        const { handlerDecorator } = context;
-        return (jsxs(BlockWrapper, { context: context, className: `font-sans overflow-hidden p-[50px] flex flex-col box-border min-h-[454px] ${VersionStyleMap[version]} ${className}`, ...otherProps, children: [backwardButton?.text
-                    ? renderBackwardButton(useLink({ router, handlerDecorator }, backwardButton), version, 'mb-10 -mt-2.5')
-                    : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs-light mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbsStyleMap[version]}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { ...useLink({ router, handlerDecorator }, { className: breadcrumbsStyleMap[version], ...breadcrumb }) }, String(i))))) })) : null, jsx(ProductBlockInner, { context: context, version: version, ...otherProps })] }));
-    });
-
-    const textBlockStyleMaps = {
-        primary: {
-            background: 'bg-white',
-            icon: 'bg-primary-main text-white',
-            title: 'text-primary-text',
-            description: 'text-secondary-text',
+    const HEADLINE_VERSION = {
+        XXL: {
+            descriptionFont: 'text-h5',
+            gap: 'gap-[18px]',
+            headingType: 'h0',
+            as: 'h1',
         },
-        secondary: {
-            background: 'bg-primary-main',
-            icon: 'bg-white text-primary-main',
-            title: 'text-white',
-            description: 'text-white',
+        XL: {
+            descriptionFont: 'text-xl-light',
+            gap: 'gap-4',
+            headingType: 'h1',
+            as: 'h1',
         },
-        'secondary-light': {
-            background: 'bg-primary-main/10',
-            icon: 'bg-primary-main text-white',
-            title: 'text-primary-text',
-            description: 'text-secondary-text',
+        L: {
+            descriptionFont: 'text-xl-light',
+            gap: 'gap-4',
+            headingType: 'h2',
+            as: 'h2',
+        },
+        M: {
+            descriptionFont: 'text-xl-light',
+            gap: 'gap-3',
+            headingType: 'h3',
+            as: 'h3',
+        },
+        S: {
+            descriptionFont: 'text-xl-light',
+            gap: 'gap-2',
+            headingType: 'h4',
+            as: 'h4',
         },
     };
-    const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className, ...rest }) => {
-        const textBlockStyleMap = textBlockStyleMaps[blockVersion];
-        return (jsxs(BlockWrapper, { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, ...rest, children: [iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage$1(image) : null, jsxs("div", { className: "py-0.5", children: [title ? (jsx("div", { className: `text-l font-medium mb-1 ${textBlockStyleMap.title}`, children: title })) : null, description ? (jsx("div", { className: `text-s ${textBlockStyleMap.description}`, children: description })) : null] })] }));
-    });
-    function renderIcon(className) {
-        return (jsx("div", { className: "pt-1.5 pl-1 pr-4", children: jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs-light ${className}`, children: "i" }) }));
-    }
-    function renderImage$1(image) {
-        return image?.src ? jsx(ImgInner, { className: "pt-0.5 pr-3", image: image }) : null;
-    }
-
-    const getColSpan = (className) => {
-        const colSpanPrefix = 'col-span-';
-        const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
-        return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
-    };
-
-    function getTileMinHeight(className = '') {
-        const colSpan = getColSpan(className);
-        if (colSpan <= 6) {
-            return 'min-h-[300px]';
-        }
-        else if (colSpan <= 8) {
-            return 'min-h-[320px]';
-        }
-        else {
-            return 'min-h-[360px]';
-        }
-    }
-
-    function getTileRightPadding(className = '') {
-        const colSpan = getColSpan(className);
-        if (colSpan <= 6) {
-            return 'pr-9';
-        }
-        else if (colSpan <= 8) {
-            return 'pr-[4.75rem]';
-        }
-        else {
-            return 'pr-[9.4rem]';
-        }
-    }
-
-    const Tile = JSX((props) => {
-        const { context, title, headingType = 'h3', description, items, children, buttons, image, isDotted = true, listItemSize = 'M', className = '', version = 'primary', ...rest } = props;
-        const headingClassName = version === 'primary' ? 'text-primary-text' : '';
-        return (jsx(BlockWrapper, { context: context, className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: headingType, as: "h2", title: title, className: `whitespace-pre-wrap max-w-[600px] ${headingClassName}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons.map((button) => ({ ...button, className: 'w-[158px]' })), className: "flex mt-8 gap-3" })) : null, image: image?.src ? jsx(ImgInner, { className: "mt-auto ml-7", image: image }) : null, children: [description ? (jsx(Description, { className: "max-w-[600px] text-xl-light mt-2.5", description: description })) : null, children, renderList$1(items, { version, isDotted, listItemSize })] }) }));
-    });
-    function renderList$1(items, { version, isDotted, listItemSize }) {
-        return items?.length ? (jsx(List, { items: items, isDotted: isDotted, className: "mt-2.5", listItemSize: listItemSize, itemClassName: "mb-1.5", version: version })) : null;
-    }
-
-    const ProductTile = JSX(({ context, className = '', title, headlineVersion = 'S', description, additionalDescription, benefits = [], buttons, image, version = 'primary', ...rest }) => {
-        return (jsxs(BlockWrapper, { context: context, className: `overflow-hidden font-sans p-9 box-border relative justify-between grid min-h-[364px]
-          ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)}`, ...rest, children: [jsx(Headline, { context: context, className: `!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`, as: "h2", title: title, description: description, headlineVersion: headlineVersion, bgColorHeadline: version, align: "left" }), renderBenefits$1(benefits, version, image), additionalDescription
-                    ? renderAdditionalDescription$1(additionalDescription, image, version)
-                    : null, buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex self-end mt-5 gap-4 z-10 text-l" })) : null, image?.src ? jsx(ImgInner, { className: "absolute right-0 bottom-0", image: image }) : null] }));
-    });
-    function renderBenefits$1(benefits, version, image) {
-        // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
-        const BENEFITS_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
-        return (jsx("div", { className: `z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline
-        ${BENEFITS_WIDTH}`, children: benefits.length ? benefits.map(renderBenefit(version)) : null }));
-    }
-    function renderBenefit(version = 'primary') {
-        const labelStyleMap = {
-            primary: 'text-secondary-text',
-            secondary: 'text-white',
-        };
-        return function renderVersionedBenefit(benefit, i) {
-            const { label = '', description = '' } = benefit;
-            return [
-                jsx("div", { className: "text-h6", children: label }, `label-${i}`),
-                jsx("div", { className: `text-m-light ${labelStyleMap[version]}`, children: description }, `desc-${i}`),
-            ];
-        };
-    }
-    function renderAdditionalDescription$1(additionalDescription, image, version = 'primary') {
-        const descStyleMap = {
-            primary: 'text-secondary-text',
-            secondary: 'text-white',
-        };
-        // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
-        const DESCRIPTION_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
-        return (jsx("div", { className: `text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH} ${descStyleMap[version]}`, children: additionalDescription }));
-    }
-
-    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 galleryLengthForScrollMap = {
-        normal: 3,
-        mini: 4,
-    };
-    const cardStyleMap$1 = {
-        normal: 'min-w-[364px] w-[364px]',
-        mini: 'min-w-[260px] w-[260px]',
-    };
-    const cardWidthMap = {
-        normal: 380,
-        mini: 276,
-    };
-
-    const ALIGN_TITLE$1 = {
-        left: 'text-left',
-        center: 'text-center',
-        right: 'text-right',
-    };
-    const GalleryCardInner = JSX(({ title, headlineSmallVersion = 'XL_L', description, additionalDescription, image, items, button, version, isDotted = true, align = 'center', }) => {
-        return (jsxs("div", { className: `h-full flex flex-col justify-between ${ALIGN_TITLE$1[align]}`, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage(image), renderCardTitle(headlineSmallVersion, title), renderDescription$2(description, title), renderAdditionalDescription(additionalDescription), items?.length ? renderItems$1(items, isDotted, version) : null] }), button ? renderButton(button) : null] }));
-    });
-    const renderImage = (image) => image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(ImgInner, { className: "mb-6", image: image }) })) : 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-base ${title ? 'mt-2' : ''}`, children: description }) : null;
-    const renderAdditionalDescription = (additionalDescription) => additionalDescription ? (jsx("div", { className: "text-m-light text-secondary-text mt-auto", children: additionalDescription })) : null;
-    const renderButton = (button) => (jsx(Button, { className: "mt-6 w-full", ...button }));
-    const renderItems$1 = (items, isDotted, version = 'primary') => (jsx(List, { className: `max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "mt-1 text-left first:mt-0", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted, version: version }));
-
-    const GalleryContainer = JSX(({ context, title, headlineVersion = 'L', description, cards = [], version = 'normal', activeCardIndex, }) => {
-        return (jsxs("div", { children: [jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" }), jsx(Headline, { context: context, className: "!p-0", title: title, description: description, 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, context }, 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$1[version]} ${VersionStyleMap[card.version ?? 'primary']} w-full col-span-4`, role: "listitem", children: jsx(GalleryCardInner, { ...card }) }, String(i)));
-    }
-
-    const GalleryInner = JSX(({ context, cards = [], className = '', version = 'normal', ...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, { context: context, className: `relative font-sans text-primary-text bg-white p-[42px] overflow-hidden ${className}`, ...rest, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), renderArrows({
-                    handler: [handlePrevClick, handleNextClick],
-                    isShown: [showPrevButton, showNextButton],
-                    btnClass: ['left-8', 'right-8'],
-                    className: 'top-1/2',
-                }), 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" })] }));
-    });
-
-    const Gallery = JSX((props) => jsx(GalleryInner, { ...props, version: "normal" }));
-
-    const MiniGallery = JSX((props) => (jsx(GalleryInner, { ...props, version: "mini" })));
-
-    const LinkList = JSX(({ className = '', documents, ...rest }) => {
-        return (jsx(BlockWrapper, { className: `font-sans bg-white mt-[10px] ${className}`, ...rest, children: jsx("ul", { className: "flex flex-col text-s text-secondary-text p-0", children: documents?.length ? renderLinkListItem(documents) : null }) }));
-    });
-    const renderLinkListItem = (documents) => {
-        return documents.map((doc, i) => {
-            const { text, ...linkProps } = doc;
-            return (jsx("li", { className: "mb-4 list-none", children: jsx("a", { className: "hover:text-primary-main", role: "link", ...linkProps, children: text ? text : null }) }, `list_item_${String(i)}`));
-        });
-    };
-
-    const EmbeddableBlocks = {
-        Headline,
-        LinkDocs,
-        TextBlock,
-        PictureText,
-        ProductBlock,
-        Tile,
-        ProductTile,
-        Gallery,
-        MiniGallery,
-        LinkList,
-    };
-
-    const renderBlocksList$1 = ({ blocks, context, className = '' }) => blocks?.length ? blocks.map(renderBlock$1({ context, className })) : [];
-    const renderBlock$1 = ({ context, className }) => (block, i) => {
-        if (!block) {
-            return null;
-        }
-        const { style, blockListType: type, ...rest } = block;
-        if (!type || !(type in EmbeddableBlocks)) {
-            return null;
-        }
-        const classNameBlock = style2className(style);
-        const EmbeddedBlock = EmbeddableBlocks[type];
-        return (jsx(EmbeddedBlock, { className: `${className} ${classNameBlock}`, context: context, ...rest }, `block_${i}`));
-    };
-
-    const Foldable = JSX(({ isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
-        const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
-        const onToggle = useCallback(() => {
-            setIsUnfolded((_) => !_);
-        }, []);
-        const sectionNode = renderFoldableSection({ isUnfolded, onToggle });
-        const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
-        return isFoldButtonOnTop ? (jsxs("div", { children: [buttonNode, sectionNode] })) : (jsxs("div", { children: [sectionNode, buttonNode] }));
-    });
-
-    const FoldableSection = JSX(({ className = '', isUnfolded, children }) => {
-        const containerRef = useRef(null);
-        useEffect(() => {
-            if (containerRef.current) {
-                containerRef.current.style.maxHeight = isUnfolded
-                    ? `${containerRef.current.scrollHeight}px`
-                    : '';
-            }
-        }, [isUnfolded]);
-        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden max-h-0 ${className}`, children: children }));
-    });
-
-    const icons$1 = ['PlusIcon', 'MinusIcon'];
-    const AccordionItem = JSX(({ label = '', children, hasContent = true }) => (jsx("li", { className: "border-0 border-b border-solid border-main-divider last:border-b-0", children: jsx(Foldable, { isFoldButtonOnTop: true, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "grid grid-cols-12", isUnfolded: isUnfolded, children: children })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(FoldButton, { label: label, icon: icons$1[Number(isUnfolded)], hasContent: hasContent, onClick: onToggle })) }) })));
-    const FoldButton = JSX(({ label, icon, hasContent, 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 ${hasContent ? 'group cursor-pointer' : ''}`, onClick: onClick, children: [jsx("span", { className: `text-xl font-medium pr-2.5`, children: label }), hasContent ? (jsx(ImgInner, { image: icon, className: "text-primary-main flex-shrink-0", width: "24", height: "24", asSVG: true })) : null] })));
-
-    const AccordionItemsList = JSX(({ children }) => (jsx("ul", { className: "list-none m-0 p-0", children: children })));
-
-    const ALIGN_TITLE = {
-        left: 'text-left',
-        center: 'text-center',
-        right: 'text-right',
+    const HEADLINE_SMALL_VERSION = {
+        XL_L: 'text-xl-light',
+        XL_R: 'text-xl',
+        L_L: 'text-l-light',
+        L_R: 'text-l',
+        M: 'text-m-light',
+        S: 'text-s-light',
+        XS: 'text-xs-light',
     };
-    const Accordion = JSX(({ title, description, accordionItems, context, className = '', accordionAlignTitle = 'center', ...rest }) => {
-        return (jsxs(BlockWrapper, { context: context, className: `p-[50px] mb-1 last:mb-0 font-sans bg-white text-primary-text ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `mb-2.5 ${ALIGN_TITLE[accordionAlignTitle]}`, title: title })) : null, description ? jsx("div", { className: "mb-2.5 text-l", children: description }) : null, accordionItems?.length ? (jsx(AccordionItemsList, { children: accordionItems.map((item, i) => (jsx(AccordionItem, { context: context, hasContent: Boolean(item.blocks?.length), ...item, children: renderBlocksList$1({ blocks: item.blocks, context, className: '!p-0 mb-5' }) }, `AccordionItem${i}`))) })) : null] }));
-    });
 
-    const benefitsBlockStyleMap = {
-        primary: 'bg-white',
-        secondary: 'bg-primary-main',
-    };
-    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, benefitsBlockVersion = 'primary', ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-12 flex flex-col items-center ${className} ${benefitsBlockStyleMap[benefitsBlockVersion]}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `max-w-[47rem] text-center ${benefitsTextStyleMap[benefitsBlockVersion]}`, title: title })) : null, benefitList?.length ? renderBenefits(benefitList, benefitsBlockVersion) : null] }));
+    const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'center', className = '', title, description, headlineVersion = 'XL', as, ...rest }) => {
+        const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
+        const SIZE_MAPS = HEADLINE_VERSION[headlineVersion];
+        return (jsxs(BlockWrapper, { className: `font-sans flex flex-col p-[50px] ${SIZE_MAPS.gap} ${STYLE_MAPS.background} ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: SIZE_MAPS?.headingType, as: as || SIZE_MAPS?.as, className: `whitespace-pre-wrap ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx(Description, { className: `${SIZE_MAPS.descriptionFont} ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, description: description })) : null] }));
     });
-    const renderBenefits = (benefitList, benefitsBlockVersion) => {
-        return (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep(benefitsBlockVersion)) }));
-    };
-    const setIconVersion = (benefitIcon, benefitsBlockVersion) => {
-        if (!benefitIcon.icon || benefitIcon?.iconVersion) {
-            return benefitIcon;
-        }
-        benefitIcon.iconVersion = benefitsBlockVersion === 'secondary' ? 'white' : 'normal';
-        return benefitIcon;
-    };
-    const renderStep = (benefitsBlockVersion) => (benefit, i) => {
-        const description = (benefit?.description || undefined);
-        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[benefitsBlockVersion]}`, image: setIconVersion(benefit.icon, benefitsBlockVersion), 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[benefitsBlockVersion]}`, children: benefit.label })) : null, renderDescription$1(description, benefitsBlockVersion)] })] }, String(i)));
-    };
-    const renderDescription$1 = (description, benefitsBlockVersion) => {
-        const benefitType = description ? description?.benefitType : null;
-        if (!benefitType) {
-            return null;
-        }
-        return description ? (jsx("div", { className: `text-l-light mt-2 ${benefitsDescriptionStyleMap[benefitsBlockVersion]}`, children: benefitType === 'list'
-                ? renderListBenefit(description)
-                : renderTextBenefit(description) })) : null;
-    };
-    const renderTextBenefit = (description) => (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 Bonus = JSX((props) => {
         const { context, className = '', title, description, bonusItems, ...rest } = props;
@@ -1111,23 +736,21 @@
     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;
 
-    function getElementsColsValue(className = '') {
-        const colSpan = getColSpan(className);
-        if (colSpan <= 6) {
-            return 'grid-cols-2';
-        }
-        else if (colSpan <= 8) {
-            return 'grid-cols-3';
-        }
-        else {
-            return 'grid-cols-4';
-        }
-    }
-
-    const BonusBenefitsBlock = JSX(({ context, className = '', title, subtitle, bonusBenefits, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-[50px] flex flex-col text-center ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: subtitle, headlineVersion: "M", align: "center" }), bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 mt-8 ${getElementsColsValue(className)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] })));
+    const BonusBenefitsBlock = JSX(({ context, 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}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: subtitle, headlineVersion: "M", align: "center" }), 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 getElementsColsValue = (colValue) => colValue === '4' ? 'grid-cols-4' : 'grid-cols-5';
+
+    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 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] }));
@@ -1379,8 +1002,8 @@
         return (jsx("div", { className: "flex flex-col gap-3", children: items?.map(({ id, text }) => (jsx(Checkbox, { isRadio: true, text: text, checked: checkedItem === id, onChange: () => onChangeCheckedItem(id) }, id))) }));
     });
 
-    function renderPaymentTypeSelector(context, { items, checkedItem, onChange }) {
-        return (jsx(RadioButtonGroup, { context: context, items: items, checkedItem: checkedItem, onChangeCheckedItem: onChange }));
+    function renderPaymentTypeSelector({ onChange, ...rest }) {
+        return jsx(RadioButtonGroup, { onChangeCheckedItem: onChange, ...rest });
     }
 
     /**
@@ -1445,7 +1068,8 @@
             monthsValue,
         };
         const calculatorParams = useCreditCalculatorParams(userInputParams, sourceBookDir);
-        return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма кредита, ₽', { ...calculatorParams, step: 500 }, setMoneyValue), renderMonthsInput('Срок кредита, месяцев', calculatorParams, setMonthsValue), jsxs("div", { className: "mt-7", children: [jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", checked: isSalaryClient, onChange: toggleIsSalaryClient }), jsx(Checkbox, { className: "mt-3", text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", checked: isStateEmployee, onChange: toggleIsStateEmployee }), jsx(Checkbox, { className: "mt-3", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", checked: isInsurance, onChange: toggleIsInsurance })] })] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.finalRate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: isAnnuity ? 'Ежемесячный платеж' : 'Платёж в первый месяц', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), renderPaymentTypeSelector(context, {
+        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" }), renderPaymentTypeSelector({
+                            context,
                             items: paymentTypeItems,
                             checkedItem: isAnnuity ? ANNUITY : DIFFERENTIAL,
                             onChange: (text) => toggleIsAnnuity(text === ANNUITY),
@@ -1478,7 +1102,8 @@
                             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" })) , renderPaymentTypeSelector(context, {
+                        }, 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" })) , renderPaymentTypeSelector({
+                            context,
                             items: depositTypeItems,
                             checkedItem: isEveryMonth ? EVERY_MONTH : AT_END_TERM,
                             onChange: (text) => toggleIsEveryMonth(text === EVERY_MONTH),
@@ -1615,14 +1240,14 @@
         return (jsxs(BlockWrapper, { className: `p-[50px] flex flex-col items-center font-sans bg-white ${className}`, context: context, ...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, ...useLink({ router, handlerDecorator }, button), children: button.text })) : null] })] }));
     });
 
-    const cardStyleMap = {
+    const cardStyleMap$1 = {
         black: 'bg-black',
         white: 'bg-white',
     };
     const CatalogCard = JSX(({ className = '', title, description, image, price, button, colors }) => {
         return (jsxs("section", { className: `border border-solid box-border border-main-stroke p-[30px] min-w-[402px] flex flex-col justify-left ${className}`, role: "listitem", children: [image?.src ? jsx(ImgInner, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? jsx("div", { className: "text-m-light text-left mb-4", children: description }) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-m-light text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }), colors.map(renderColorOption)] })) : null, price ? jsxs("div", { className: "text-h3 text-left", children: [price, "\u00A0\u20BD"] }) : null, button ? jsx(Button, { className: "mt-5 w-full", ...button }) : null] }));
     });
-    const renderColorOption = (color, i) => (jsx("span", { className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
+    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$1 = 'absolute top-0 bottom-0 w-[84px]';
     const CARD_FULL_VIEW_COUNT$1 = 3;
@@ -1812,6 +1437,10 @@
         return result;
     }, []);
 
+    const BaseTile = JSX(({ className = '', title = '', children, buttons, image }) => {
+        return (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { className: "h-full", children: children }), buttons ? jsx("div", { className: "mt-auto pt-8", children: buttons }) : null] }), image] })] }));
+    });
+
     var Currency;
     (function (Currency) {
         Currency["RUB"] = "RUB";
@@ -1840,6 +1469,29 @@
 
     const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex ${className}`, children: [jsx(ImgInner, { image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3", children: [address ? jsx("p", { className: "text-primary-main  m-0 mb-1 text-l", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0 text-m-light", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
 
+    const calculateResult = (value, rate, precision) => {
+        const result = Number(formatValue(value)) * Math.pow(rate, precision ? -1 : 1);
+        return Number.isInteger(result) ? result : roundTo(result);
+    };
+    const formatValue = (value) => value.replace(/[^\d.,]/g, '').replace(',', '.');
+
+    const tableFunc = (table) => (input) => {
+        const [, output] = table.find(([predicate]) => predicate(input)) || [];
+        return output;
+    };
+
+    const callbackCurrencySelect = (props) => tableFunc([
+        [
+            (_) => _.value !== Currency.RUB && _.oppositeValue !== Currency.RUB,
+            () => props.handleConvert(props.value, Currency.RUB),
+        ],
+        [
+            (_) => _.value === Currency.RUB && _.oppositeValue === Currency.RUB,
+            () => props.handleConvert(props.value, Currency.USD),
+        ],
+        [() => true, () => props.handleConvert(props.value)],
+    ])(props)?.();
+
     function useOutsideClick(wrapperRef, setIsOpen) {
         useEffect(() => {
             function handleClickOutside(event) {
@@ -1889,29 +1541,6 @@
         return (jsxs("div", { className: "relative flex", children: [jsx(Input, { className: "shrink-0 text-l w-full appearance-none mr-[-90px]", placeholder: placeholder, type: "text", value: value, onChange: setValue }), ratesOptions.length ? (jsx(Select, { isBorder: false, onChange: (_) => setSelected(_.key), options: ratesOptions, value: selectedValue })) : null] }));
     }
 
-    const calculateResult = (value, rate, precision) => {
-        const result = Number(formatValue(value)) * Math.pow(rate, precision ? -1 : 1);
-        return Number.isInteger(result) ? result : roundTo(result);
-    };
-    const formatValue = (value) => value.replace(/[^\d.,]/g, '').replace(',', '.');
-
-    const tableFunc = (table) => (input) => {
-        const [, output] = table.find(([predicate]) => predicate(input)) || [];
-        return output;
-    };
-
-    const callbackCurrencySelect = (props) => tableFunc([
-        [
-            (_) => _.value !== Currency.RUB && _.oppositeValue !== Currency.RUB,
-            () => props.handleConvert(props.value, Currency.RUB),
-        ],
-        [
-            (_) => _.value === Currency.RUB && _.oppositeValue === Currency.RUB,
-            () => props.handleConvert(props.value, Currency.USD),
-        ],
-        [() => true, () => props.handleConvert(props.value)],
-    ])(props)?.();
-
     const ExchangeCurrencyCalculator = JSX(({ context, className = '', currencyRatesBuy, currencyRatesSell, button }) => {
         const { useRouter, handlerDecorator } = context;
         const router = useRouter();
@@ -1989,8 +1618,7 @@
         currencyRatesBuy.unshift({ code: Currency.RUB });
         const currencyRatesSell = currencyRates.filter((_) => _.sell);
         currencyRatesSell.push({ code: Currency.RUB });
-        return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border min-h-[320px] 
-          ${className}`, ...rest, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap text-h4 mb-5" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-14 pt-4", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[30px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", context: context, currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
+        return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border min-h-[320px] ${className}`, ...rest, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap text-h4 mb-5" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-14 pt-4", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[30px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", context: context, currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
     });
 
     const ICON_VERSION_MAP = {
@@ -2091,10 +1719,10 @@
             router: context.useRouter(),
             handlerDecorator: context.handlerDecorator,
         };
-        return (jsx("div", { className: `flex flex-grow items-start justify-between gap-[54px] xl:gap-5 ${className}`, children: mergedItems?.map((_, i) => renderColumn(_, i, linkParams)) }));
+        return (jsx("div", { className: `flex flex-grow items-start justify-between gap-[54px] xl:gap-5 ${className}`, children: mergedItems?.map((_, i) => renderColumn({ menuItem: _, index: i, ...linkParams })) }));
     });
-    const renderColumn = (c, index, { router, handlerDecorator }) => {
-        const { text, href, items, target } = c;
+    const renderColumn = ({ menuItem, index, router, handlerDecorator }) => {
+        const { text, href, items, target } = menuItem;
         return (jsxs("div", { className: "flex flex-col w-1/5 last:w-1/4 gap-3.5", children: [jsx("a", { className: "block leading-5 text-l text-primary-text hover:text-primary-main no-underline", href: href, target: target || '_self', children: text || `Раздел ${index}` }), items?.map((_, i) => (jsx(ColumnItem, { ...useLink({ router, handlerDecorator }, _), index: i }, String(i))))] }, String(index)));
     };
     const ColumnItem = JSX(({ text, href, target, index }) => (jsx("a", { className: "block text-l-light text-secondary-text hover:text-primary-main no-underline", href: href, target: target || '_self', children: text || `Раздел ${index}` })));
@@ -2131,35 +1759,131 @@
         if (!icon) {
             return null;
         }
-        const classes = version === 'secondary'
-            ? 'bg-white hover:bg-secondary-hover'
-            : 'border-solid border-[1px] border-main-divider hover:border-transparent hover:bg-primary-main';
-        const isPrimary = version === 'primary';
-        return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(ImgInner, { image: icon, imageClassName: "group-hover:text-white", width: "24", height: "24", asSVG: true })) : null }));
+        const classes = version === 'secondary'
+            ? 'bg-white hover:bg-secondary-hover'
+            : 'border-solid border-[1px] border-main-divider hover:border-transparent hover:bg-primary-main';
+        const isPrimary = version === 'primary';
+        return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(ImgInner, { image: icon, imageClassName: "group-hover:text-white", width: "24", height: "24", asSVG: true })) : null }));
+    });
+
+    const SocialMedia = JSX(({ className = '', media, version, context, children }) => {
+        const router = context.useRouter();
+        const { handlerDecorator } = context;
+        return (jsxs("div", { className: "font-sans", children: [jsx("div", { className: `flex gap-2.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { version: version, ...useLink({ router, handlerDecorator }, _) }, String(index)))) }), jsx("span", { className: "text-s-light text-secondary-text", children: children })] }));
+    });
+
+    const TextInformationLink = JSX(({ className = '', index, text, href, target, onClick }) => (jsx("a", { className: `text-xs-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
+
+    const TextInformation = JSX(({ className, links, context }) => {
+        const router = context.useRouter();
+        const { handlerDecorator } = context;
+        return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { className: "pt-5", children: jsx("span", { className: "text-xs-light text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex justify-start items-start gap-5 pt-2.5", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
+    });
+
+    const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
+    const Footer = JSX(({ className, documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, context, page, ...rest }) => {
+        const fallback = page?.fallback;
+        return (jsxs(BlockWrapper, { tag: "footer", context: context, 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, { context: context, className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, context: context, hasButton: true }), jsx(SocialMedia, { media: socialMedia, context: context, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, context: context, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "pt-[3px]", context: context, items: topItems, fallback: fallback })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
+    });
+
+    const galleryLengthForScrollMap = {
+        normal: 3,
+        mini: 4,
+    };
+    const cardStyleMap = {
+        normal: 'min-w-[364px] w-[364px]',
+        mini: 'min-w-[260px] w-[260px]',
+    };
+    const cardWidthMap = {
+        normal: 380,
+        mini: 276,
+    };
+
+    const VersionStyleMap = {
+        primary: 'bg-white text-primary-text',
+        secondary: 'bg-primary-main text-white',
+    };
+
+    const LIST_DOT_STYLE_MAP = {
+        primary: 'bg-primary-text',
+        secondary: 'bg-white',
+        gray: 'bg-secondary-text',
+    };
+    const DOT_SIZE_MAP = {
+        L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4 mt-3',
+        M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3 mt-3',
+        S: 'w-1 h-1 min-w-1 min-h-1 mr-2 mt-2.5',
+    };
+    const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary', size = 'M' }) => {
+        return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted ? (jsx("div", { className: `rounded-full inline-block ${LIST_DOT_STYLE_MAP[version]} ${DOT_SIZE_MAP[size]}` })) : null, jsx("span", { children: children })] }));
+    });
+
+    const TEXT_STYLE_MAP = {
+        primary: 'text-primary-text',
+        secondary: 'text-white',
+        gray: 'text-secondary-text',
+    };
+    const TEXT_SIZE_MAP = {
+        S: 'text-l-light',
+        M: 'text-h6',
+        L: 'text-h5',
+    };
+    const ITEM_INDENT_MAP = {
+        S: 'ml-2',
+        M: 'ml-3',
+        L: 'ml-4',
+    };
+    const List = JSX((props) => {
+        const { className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M', version = 'primary', } = props;
+        if (!items?.length) {
+            return null;
+        }
+        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 SocialMedia = JSX(({ className = '', media, version, context, children }) => {
-        const router = context.useRouter();
-        const { handlerDecorator } = context;
-        return (jsxs("div", { className: "font-sans", children: [jsx("div", { className: `flex gap-2.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { version: version, ...useLink({ router, handlerDecorator }, _) }, String(index)))) }), jsx("span", { className: "text-s-light text-secondary-text", children: children })] }));
+    const ALIGN_TITLE = {
+        left: 'text-left',
+        center: 'text-center',
+        right: 'text-right',
+    };
+    const GalleryCardInner = JSX(({ title, headlineSmallVersion = 'XL_L', description, additionalDescription, image, items, button, version, isDotted = true, align = 'center', }) => {
+        return (jsxs("div", { className: `h-full flex flex-col justify-between ${ALIGN_TITLE[align]}`, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$1(image), renderCardTitle(headlineSmallVersion, title), renderDescription$1(description, title), renderAdditionalDescription$1(additionalDescription), items?.length ? renderItems$1(items, isDotted, version) : null] }), button ? renderButton(button) : null] }));
     });
+    const renderImage$1 = (image) => image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(ImgInner, { className: "mb-6", image: image }) })) : null;
+    const renderCardTitle = (headlineSmallVersion, title) => title ? jsx("div", { className: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
+    const renderDescription$1 = (description, title) => description ? jsx("div", { className: `text-base ${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 renderButton = (button) => (jsx(Button, { className: "mt-6 w-full", ...button }));
+    const renderItems$1 = (items, isDotted, version = 'primary') => (jsx(List, { className: `max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "mt-1 text-left first:mt-0", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted, version: version }));
 
-    const TextInformationLink = JSX(({ className = '', index, text, href, target, onClick }) => (jsx("a", { className: `text-xs-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
-
-    const TextInformation = JSX(({ className, links, context }) => {
-        const router = context.useRouter();
-        const { handlerDecorator } = context;
-        return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { className: "pt-5", children: jsx("span", { className: "text-xs-light text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex justify-start items-start gap-5 pt-2.5", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
+    const GalleryContainer = JSX(({ context, title, headlineVersion = 'L', description, cards = [], version = 'normal', activeCardIndex, }) => {
+        return (jsxs("div", { children: [jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" }), jsx(Headline, { context: context, className: "!p-0", title: title, description: description, 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, context }, 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 LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
-    const Footer = JSX(({ className, documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, context, page, ...rest }) => {
-        const fallback = page?.fallback;
-        return (jsxs(BlockWrapper, { tag: "footer", context: context, 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, { context: context, className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, context: context, hasButton: true }), jsx(SocialMedia, { media: socialMedia, context: context, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, context: context, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "pt-[3px]", context: context, items: topItems, fallback: fallback })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
+    const GalleryInner = JSX(({ context, cards = [], className = '', version = 'normal', ...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, { context: context, className: `relative font-sans text-primary-text bg-white p-[42px] overflow-hidden ${className}`, ...rest, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), renderArrows({
+                    handler: [handlePrevClick, handleNextClick],
+                    isShown: [showPrevButton, showNextButton],
+                    btnClass: ['left-8', 'right-8'],
+                    className: 'top-1/2',
+                }), 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" })] }));
     });
 
+    const Gallery = JSX((props) => jsx(GalleryInner, { ...props, version: "normal" }));
+
     const GracePeriod = JSX(({ context, className = '', title, description, calendar, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `font-sans bg-white p-[50px] ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center" }), calendar ? renderCalendar(calendar) : null] }));
+        return (jsxs(BlockWrapper, { className: `font-sans bg-white p-[50px] ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0 mb-4", title: title, description: description, headlineVersion: "M", align: "center" }), calendar ? renderCalendar(calendar) : null] }));
     });
     const renderCalendar = (calendar) => {
         const colCount = calendar.reduce((accumulator, currentValue) => currentValue?.month?.length ? accumulator + currentValue.month.length : accumulator, 0) || 1;
@@ -2168,11 +1892,12 @@
             .filter((_) => _?.month?.length)
             .map((_) => ({
             ..._,
-            flexBasis: `${_.month.length * colSize}%`,
+            // Condition lower is always true, TS does not understand this, notice filter above
+            flexBasis: `${_?.month?.length ? _.month.length * colSize : ''}%`,
         }));
         return (jsxs("div", { className: "w-full flex flex-col justify-center mt-13", children: [jsx("div", { className: "flex w-full mb-3 text-h6 text-center", children: mappedCalendar.map((_) => renderMonthNames(_, colSize)) }), jsx("div", { className: "flex w-full", children: mappedCalendar.map((_, ind) => (jsxs("div", { className: "pr-[11px] mr-3 border-r border-main-divider last:border-r-0 last:pr-0 last:mr-0", style: { flexBasis: _.flexBasis }, children: [jsx("div", { className: "flex", children: renderMonthImages(_) }), jsxs("div", { className: "text-s-light text-primary-text mt-3", children: [jsx("span", { children: _.text }), "\u2009", jsx("span", { className: "text-primary-main", children: _.greenText })] })] }, `monthItem-${ind}`))) })] }));
     };
-    const renderMonthNames = (item, colSize) => item.month?.map((_, i) => (jsx("div", { style: { flexBasis: `${colSize}%` }, children: _.name }, `monthName-${i}`)));
+    const renderMonthNames = (item, colSize) => item.month?.map((_, i) => (jsx("div", { style: { flexBasis: `${colSize}%` }, children: _.text }, `monthName-${i}`)));
     const renderMonthImages = (item) => item.month?.map((_) => _.image?.src ? (jsx("div", { className: "h-[207px] border-r-[1px] pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0", children: jsx(ImgInner, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
 
     const checkIsHrefSameOrigin = (href, router) => getOrigin(href) === getOrigin(router.href);
@@ -2364,9 +2089,9 @@
         const btnClassName = isActiveBtn
             ? '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('страховая сумма', slide.sum) : null, slide?.fee ? renderValueBlock('страховой взнос', 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(isActiveBtn)] }, String(i)));
     }
-    function renderValueBlock(title, sum) {
+    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 })] }));
     }
     function renderDoneIcon(isActive) {
@@ -2401,6 +2126,10 @@
         return (jsx("button", { type: "button", onClick: onClick, "aria-label": title, className: `box-border px-4 py-3 text-m-light ${btnClassName}`, children: title }, String(i)));
     }
 
+    function joinList(sep) {
+        return (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]), []);
+    }
+
     const investmentCellColorMap = {
         yellow: 'bg-yellow',
         green: 'bg-green',
@@ -2443,6 +2172,59 @@
         return (jsx("div", { className: `flex-1 max-w-[180px] text-center px-2 ${isFirstColumn ? 'pl-9' : ''} ${isLastColumn ? 'pr-9' : ' '}`, children: column.title }, `title_${i}`));
     };
 
+    const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
+        const { text, fileSize, ...linkProps } = doc;
+        return (jsxs("a", { className: className, role: "link", ...linkProps, children: [icon ? (jsx(ImgInner, { className: iconClassName, image: icon, width: "24px", height: "24px", asSVG: true })) : null, text ? (jsxs("span", { className: textClassName, children: [text, jsx("span", { className: suffixClassName, children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] }));
+    });
+    const formatSuffix = (ext, fileSize) => {
+        const prefix = ext || fileSize ? ',' : '';
+        const extension = ext ? ` ${ext}` : '';
+        const size = fileSize ? ` (${fileSize})` : '';
+        return prefix + extension + size;
+    };
+    const getExtFromHref = (href) => {
+        if (!href) {
+            return '';
+        }
+        const index = href.lastIndexOf('.');
+        return index !== -1 ? href.substring(index + 1) : '';
+    };
+
+    const LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full box-border ${className}`, iconClassName: "mr-2.5 min-w-6 min-h-6", textClassName: "self-center text-l-light", suffixClassName: "text-secondary-text group-hover:text-primary-main", doc: doc, icon: icon })));
+
+    const LinkDocsList = JSX(({ className, documents, columnsMode = 'double', icon }) => {
+        return documents?.length ? (jsx("div", { className: className, role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { className: "group flex align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main", doc: doc, icon: icon }) }, String(i)))) })) : null;
+    });
+
+    const linkColumnsModeStyleMap = {
+        double: 'flex gap-x-5 gap-y-[26px] flex-wrap',
+        single: 'flex gap-3.5 flex-col',
+    };
+    const LinkDocs = JSX(({ context, className = '', title, description, align = 'center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => {
+        return (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-[50px] bg-white ${className}`, context: context, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, context: context, align: align, headlineVersion: "M", as: "h2" }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] }));
+    });
+
+    const MiniGallery = JSX((props) => (jsx(GalleryInner, { ...props, version: "mini" })));
+
+    const getColSpan = (className) => {
+        const colSpanPrefix = 'col-span-';
+        const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
+        return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
+    };
+
+    function getTileMinHeight(className = '') {
+        const colSpan = getColSpan(className);
+        if (colSpan <= 6) {
+            return 'min-h-[300px]';
+        }
+        else if (colSpan <= 8) {
+            return 'min-h-[320px]';
+        }
+        else {
+            return 'min-h-[360px]';
+        }
+    }
+
     const MobileAppTile = JSX(({ className = '', context, title = 'Мобильное приложение', qr, buttons, version = 'primary', items, image, headingType = 'h4', ...rest }) => {
         const textColorClass = version === 'primary' ? 'text-primary-text' : '';
         const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
@@ -2451,17 +2233,268 @@
         ${getTileMinHeight(className)}
         ${VersionStyleMap[version]}
         ${className}`, ...rest, children: [jsx(BaseTile, { context: context, className: "z-10", title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[509px] mb-6
-                  ${textColorClass}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttonsWithClass, className: "flex gap-4" })) : null, children: 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, alt: "QR-\u043A\u043E\u0434" }) })) : null, renderList(version, items)] }) }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(ImgInner, { image: image }) })) : null] }));
+                  ${textColorClass}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttonsWithClass, className: "flex gap-4" })) : null, children: 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, alt: "QR-\u043A\u043E\u0434" }) })) : null, renderList$1(version, items)] }) }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(ImgInner, { image: image }) })) : null] }));
     });
-    const renderList = (version, items) => {
+    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 OFFICE_MAP_URL = '/api/v1/branches';
+    // TODO: regionCode - внутренний идентификатор банка. Не соответствует государственной нумерации регионов РФ
+    // TODO: Список регионов можно получить через api/v1/regions
+    function useOfficeMap(regionCode) {
+        const { data } = useAsyncData(regionCode ? `${OFFICE_MAP_URL}?regionCode=${regionCode}` : undefined, fetchOfficeMap);
+        return data;
+    }
+    const fetchOfficeMap = (url) => {
+        if (!url) {
+            return {};
+        }
+        return fetchJSON(url, { method: 'GET' });
+    };
+
+    const OFFICE_MAP = {
+        id: 123,
+        branchType: {
+            id: 7,
+            code: '21',
+            name: 'Отделение на балансе филиала',
+        },
+        shortName: 'Ейский ДО',
+        name: 'ДО   №3349/3/05',
+        address: '353682, Краснодарский край, г.Ейск, ул.Гоголя, 349/ ул.Баррикадная, 42/1',
+        lawAddress: '353682, Краснодарский край, г.Ейск, ул.Гоголя, 349/ ул.Баррикадная, 42/1',
+        openDate: '2000-12-05',
+        closeDate: null,
+        bik: '040349536',
+        corAcc: '30101810700000000536',
+        registrationNumber: '3349/3/05',
+        phone: '+7(XXX)XXX-XX-XX',
+        fax: '+7(XXX)XXX-XX-XY',
+        okpo: '55105921',
+        ogrn: '1027700342890',
+        kpp: '231002002',
+        inn: '7725114488',
+        branchCode: '0305',
+        upperBranchCode: '0300',
+        timeZone: '+03:00',
+        exchangeRate: {
+            currencies: [
+                {
+                    buyExchangeRate: 0.0,
+                    saleExchangeRate: 0.0,
+                    currency: {
+                        id: 3,
+                        code: '156',
+                        currency: 'CNY',
+                        name: 'Китайский юань',
+                    },
+                },
+                {
+                    buyExchangeRate: 59.15,
+                    saleExchangeRate: 69.25,
+                    currency: {
+                        id: 2,
+                        code: '978',
+                        currency: 'EUR',
+                        name: 'Евро',
+                    },
+                },
+                {
+                    buyExchangeRate: 58.4,
+                    saleExchangeRate: 70.05,
+                    currency: {
+                        id: 1,
+                        code: '840',
+                        currency: 'USD',
+                        name: 'Американский доллар',
+                    },
+                },
+            ],
+            lastUpdate: '2022-11-11 03:56:17',
+        },
+        workSchedule: {
+            id: 413,
+            workTime: '09.00–16.30',
+            lunchHour: 'без перерыва',
+            workTimeSaturday: '09.00–15.00',
+            lunchHourSaturday: 'без перерыва',
+            workingMonday: false,
+            workingTuesday: false,
+            workingWednesday: true,
+            workingThursday: true,
+            workingFriday: true,
+            workingSaturday: true,
+            workingSunday: false,
+        },
+        gpsLatitude: 46.709744,
+        gpsLongitude: 38.260703,
+        range: null,
+        safeBoxCaseVolumes: null,
+    };
+
+    const renderCurrentDaySchedule = ({ lunchHour, status, workTime }) => {
+        const hasTime = /\d+/gi.test(lunchHour);
+        const lunchHourText = hasTime ? `Перерыв ${lunchHour}` : lunchHour;
+        return status ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "p-3 border rounded-md text-m flex items-center cursor-pointer text-primary-main border-green-light mr-4", children: workTime ? workTime : null }), jsx("div", { className: "p-3 border rounded-md text-m flex items-center cursor-pointer text-golden border-golden", children: lunchHour ? lunchHourText : null })] })) : (jsx("div", { className: "flex", children: jsx("div", { className: "p-3 border rounded-md text-m flex items-center cursor-pointer text-error border-error", children: "\u0412\u044B\u0445\u043E\u0434\u043D\u043E\u0439" }) }));
+    };
+    const renderNearbyOffice = ({ icon, title, distance, time }, inx) => (jsxs("div", { className: "flex mr-4", children: [jsx(Icon, { name: icon, width: "16", height: "16", asSVG: true, className: "mr-1" }), title ? jsxs("span", { className: "text-m", children: [title, "\u00A0"] }) : null, jsxs("span", { className: "text-m-light", children: [distance ? ` (${distance})` : null, time ? `, ${time}` : null] })] }, `nearbyOffice${inx}`));
+    const renderDay = ({ title, status, workTime, lunchHour, description }, inx) => (jsxs("div", { className: "flex flex-col pb-3 border-b border-solid border-main-divider mb-3 last:border-0", children: [jsxs("div", { className: "flex justify-between items-center w-full pb-1 text-l text-primary-text", children: [jsx("div", { children: title }), status ? null : jsx("div", { className: "text-m-light text-error", children: "\u0412\u044B\u0445\u043E\u0434\u043D\u043E\u0439" }), status && workTime ? jsx("div", { children: workTime }) : null] }), status && lunchHour ? renderLunchHour(lunchHour) : null, description ? (jsx("div", { className: "pb-1 text-s-light text-secondary-text", children: description })) : null] }, `day${inx}`));
+    const renderLunchHour = (lunchHour) => {
+        const hasTime = /\d+/gi.test(lunchHour);
+        return hasTime ? (jsxs("div", { className: "flex justify-between items-center w-full pb-1 text-m-light text-error", children: [jsx("div", { children: "\u041F\u0435\u0440\u0435\u0440\u044B\u0432" }), jsx("div", { children: lunchHour })] })) : (jsx("div", { className: "flex justify-between items-center w-full pb-1 text-m-light text-primary-main", children: jsx("div", { children: lunchHour }) }));
+    };
+
+    function renderClusterer(yandexMaps, map, points) {
+        map.geoObjects.removeAll();
+        const clusterIconContentLayout = yandexMaps.templateLayoutFactory.createClass('<div style="margin-top: -3px;">{{properties.geoObjects.length}}</div>');
+        const clusterer = new yandexMaps.Clusterer({
+            clusterIcons: [
+                {
+                    href: 'icons/MapMarkerClusterIcon.svg',
+                    size: [78, 84],
+                    offset: [-35, -50],
+                },
+            ],
+            clusterIconContentLayout,
+            clusterHideIconOnBalloonOpen: false,
+            geoObjectHideIconOnBalloonOpen: false,
+        });
+        const geoObjects = points.map((point) => new yandexMaps.Placemark(point, {}, {
+            iconLayout: 'default#image',
+            iconImageHref: 'icons/MapMarkerSingleIcon.svg',
+            iconImageSize: [78, 84],
+            iconImageOffset: [-35, -50],
+        }));
+        clusterer.add(geoObjects);
+        map.geoObjects.add(clusterer);
+        // TODO: Fix
+        // @ts-ignore
+        map.setBounds(yandexMaps.util.bounds.fromPoints(points)).then(() => {
+            if (map.getZoom() > 10) {
+                map.setZoom(10);
+            }
+        });
+    }
+
+    const getNS = (_) => globalThis[_];
+    function useExternalNS(namespaceName, url) {
+        const [externalNS, setExternalNS] = useState();
+        const setNS = useCallback(() => setExternalNS(getNS(namespaceName)), [namespaceName]);
+        useEffect(() => {
+            const script = document.getElementById(url);
+            if (script) {
+                if (getNS(namespaceName)) {
+                    setNS();
+                }
+                else {
+                    script.addEventListener('load', setNS);
+                    return () => {
+                        script.removeEventListener('load', setNS);
+                    };
+                }
+            }
+            else {
+                const newScript = document.createElement('script');
+                newScript.src = url;
+                newScript.async = true;
+                newScript.id = url;
+                newScript.addEventListener('load', setNS);
+                document.head.appendChild(newScript);
+                return () => {
+                    document.head.removeChild(newScript);
+                    setExternalNS(undefined);
+                };
+            }
+            return undefined;
+        }, [namespaceName, url]);
+        return externalNS;
+    }
+
+    const YMAPS_NAMESPACE = 'ymaps';
+    const useYandexMaps = () => {
+        const url = `https://api-maps.yandex.ru/2.1/?apikey=${projectSettings.YANDEX_MAP_API_KEY}&lang=ru_RU`;
+        const yandexMaps = useExternalNS(YMAPS_NAMESPACE, url);
+        return yandexMaps;
+    };
+
+    const YandexMap$1 = JSX(({ point }) => {
+        const map = useRef(null);
+        const yandexMaps = useYandexMaps();
+        useEffect(() => {
+            yandexMaps?.ready(() => {
+                map.current = new yandexMaps.Map('map', {
+                    center: point,
+                    zoom: 10,
+                });
+                renderClusterer(yandexMaps, map.current, [point]);
+            });
+        }, [map, point, yandexMaps]);
+        useEffect(() => {
+            if (map.current && point && yandexMaps) {
+                renderClusterer(yandexMaps, map.current, [point]);
+            }
+        }, [map, point, yandexMaps]);
+        if (!yandexMaps) {
+            return null;
+        }
+        return (jsx("div", { className: "bg-white", children: jsx("div", { id: "map", className: "h-[560px]" }) }));
+    });
+
+    const OfficeMap = JSX(({ className = '' }) => {
+        const resultOfficeMap = useOfficeMap('063') || OFFICE_MAP;
+        const { name, address, gpsLatitude, gpsLongitude, workSchedule } = resultOfficeMap;
+        const { workTime, lunchHour, workTimeSaturday, lunchHourSaturday, workingMonday, workingTuesday, workingWednesday, workingThursday, workingFriday, workingSaturday, workingSunday, } = workSchedule;
+        const point = gpsLatitude && gpsLongitude ? [gpsLatitude, gpsLongitude] : null;
+        const workScheduleWeek = [
+            { title: 'Понедельник', status: workingMonday, workTime, lunchHour },
+            { title: 'Вторник', status: workingTuesday, workTime, lunchHour },
+            { title: 'Среда', status: workingWednesday, workTime, lunchHour },
+            {
+                title: 'Четверг',
+                status: workingThursday,
+                workTime,
+                lunchHour: '13:00 - 14:00',
+                description: 'Не работает прием денег с 17:00 до 19:00', // Добавлено для проверки
+            },
+            { title: 'Пятница', status: workingFriday, workTime, lunchHour },
+            {
+                title: 'Суббота',
+                status: workingSaturday,
+                workTime: workTimeSaturday,
+                lunchHour: lunchHourSaturday,
+            },
+            { title: 'Воскресенье', status: workingSunday },
+        ];
+        // Добавлено для проверки
+        const nearbyOffices = [
+            { title: 'Деловой центр', time: '1 мин', distance: '~30 м.', icon: 'MetroIcon' },
+            { title: 'Выставочная', time: '5 мин', distance: '~120 м.', icon: 'MetroIcon' },
+            { title: 'Деловой центр', time: '8 мин', distance: '~350 м.', icon: 'MetroIcon' },
+        ];
+        const currentWeekDayInd = new Date().getDay();
+        const currentWeekDay = currentWeekDayInd > 0 ? workScheduleWeek[currentWeekDayInd - 1] : workScheduleWeek[6];
+        return (jsxs("div", { className: `flex flex-col font-sans bg-white w-full ${className}`, children: [jsxs("div", { className: "flex flex-col px-12 pt-12", children: [jsxs("div", { className: "flex justify-between", children: [jsx("div", { className: "text-h2", children: name }), renderCurrentDaySchedule(currentWeekDay)] }), jsxs("div", { className: "flex text-l-light pt-4", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24", asSVG: true, className: "pr-1" }), address] }), jsx("div", { className: "flex pt-4", children: nearbyOffices.map(renderNearbyOffice) })] }), jsxs("div", { className: "flex justify-between pt-8", children: [jsx("div", { className: "flex-grow h-full bg-gray", children: point ? jsx(YandexMap$1, { point: point }) : null }), jsx("div", { className: "w-[434px] pl-9 pr-12 pb-14", children: jsx("div", { className: "flex flex-col", children: workScheduleWeek.map(renderDay) }) })] })] }));
+    });
+
     const OfficeServicesBlock = JSX(({ className = '', context, title, servicesList, anchor = '', ...rest }) => {
         return (jsxs(BlockWrapper, { context: context, id: anchor, 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 ? 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: itemList.icon })) : null, itemList.label ? jsx("span", { className: "text-l-light", children: itemList.label }) : null] }, `list_item_${String(i)}`));
 
+    const OtherProducts = JSX(({ context, className = '', children, ...rest }) => (jsx(BlockWrapper, { context: context, className: `font-sans text-primary-text ${className}`, ...rest, children: children })));
+    OtherProducts.childrenTypes = ['OtherProductsItem'];
+
+    function getParentBlockDef(ancestors, type) {
+        const [, ...blocks] = ancestors || [];
+        return blocks.reverse().find((_) => !type || type === _?.type) || {};
+    }
+
+    function getParentBlockContent(ancestors, defaultContent) {
+        const { content } = getParentBlockDef(ancestors);
+        return content || defaultContent;
+    }
+
     const DefaultFoldButton = JSX(({ className, label, icon, dataTheme = '', onClick }) => (jsxs("button", { className: `border-none bg-primary-main hover:bg-primary-hover px-0 py-5 mb-[1px] w-full font-sans text-white flex justify-center cursor-pointer ${className || ''}`, "data-theme": dataTheme, onClick: onClick, children: [jsx("span", { className: "text-h4 pr-3", children: label }), icon ? (jsx(ImgInner, { image: {
                     icon,
                     iconVersion: 'white',
@@ -2473,17 +2506,52 @@
     };
 
     const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
-    const OtherProductsItem = JSX(({ label = '', blocks, context, dataTheme, isUnfolded: unfoldedByDefault }) => {
-        const foldableBlocks = renderBlocksList$1({
-            context,
-            blocks,
-        });
-        return (jsx("div", { className: "\u02DDborder-0 border-b border-solid border-main-divider", children: blocks?.length ? (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: foldableBlocks }) })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(DefaultFoldButton, { label: label, icon: icons[Number(isUnfolded)], dataTheme: dataTheme, onClick: onToggle })) })) : null }));
+    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 })) }) }));
+    });
+    OtherProductsItem.childrenTypes = []; // All types of blocks are suitable
+
+    const titleStyleMap = {
+        primary: 'text-primary-text',
+        secondary: 'text-white',
+    };
+    const descStyleMap = {
+        primary: 'text-secondary-text',
+        secondary: 'text-white',
+    };
+    const BenefitItem = JSX((props) => {
+        const { className = '', icon, label, description, version = 'primary', benefitsVersion = 'normal', } = props;
+        const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
+        const listItemAlign = description ? 'items-start' : 'items-center';
+        const iconVersion = getIconVersion(isIconWhite, icon);
+        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: renderBenefitIconBgStyle(version, benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: { ...icon, iconVersion }, asSVG: true }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? jsx("div", { className: `text-h6 ${titleStyleMap[version]}`, children: label }) : null, description ? (jsx("div", { className: `text-m-light ${descStyleMap[version]}`, children: description })) : null] })] }));
     });
+    function renderBenefitIconBgStyle(version, benefitsVersion) {
+        let bgColorStyle = 'bg-primary-main text-black';
+        if (version === 'secondary') {
+            bgColorStyle = 'bg-white/30 text-black';
+        }
+        else if (benefitsVersion === 'normal') {
+            bgColorStyle = 'bg-secondary-light text-primary-main';
+        }
+        return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
+    }
+    const getIconVersion = (isIconWhite, icon) => icon?.iconVersion || isIconWhite ? 'white' : 'normal';
 
-    const OtherProducts = JSX(({ blockItems, colorPalette, context, className = '', ...rest }) => {
-        return (jsx(BlockWrapper, { context: context, className: `font-sans text-primary-text ${className}`, ...rest, children: blockItems?.length ? (jsx("div", { className: "box-border1", children: blockItems.map((item, i) => (jsx(OtherProductsItem, { ...item, dataTheme: colorPalette, context: context }, `BlockItem${i}`))) })) : null }));
+    const PictureText = JSX(({ className = '', context, title, description, image, benefits, version = 'primary', sum, monthLimit, directionRight = false, ...rest }) => {
+        return (jsxs(BlockWrapper, { className: `relative font-sans py-12 px-24 ${VersionStyleMap[version]} ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, align: "center" }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src ? jsx(ImgInner, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] })] }));
     });
+    const renderBenefit$2 = (version) => (benefit, i) => (jsx(BenefitItem, { icon: benefit.icon, label: benefit.label, description: benefit.description, version: version }, String(i)));
+    function renderInsuranceSumMonth(sum, monthLimit) {
+        return sum || monthLimit ? (jsxs("div", { className: "bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4", children: [Number.isFinite(sum) ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null, Number.isFinite(monthLimit)
+                    ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum))
+                    : null] })) : null;
+    }
+    function renderValueBlock(title, sum = 0, isAnotherBlock = false) {
+        const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
+        return (jsxs("div", { className: `flex justify-between items-center gap-2 w-full ${widthStyle}`, children: [jsx("span", { className: "text-secondary-text text-l-light", children: title }), jsxs("span", { className: "text-primary-main text-h6", children: [addSpacesBetweenNumbers(sum), " \u20BD"] })] }));
+    }
 
     function getTileHeadingType(className = '') {
         const colSpan = getColSpan(className);
@@ -2498,6 +2566,19 @@
         }
     }
 
+    function getTileRightPadding(className = '') {
+        const colSpan = getColSpan(className);
+        if (colSpan <= 6) {
+            return 'pr-9';
+        }
+        else if (colSpan <= 8) {
+            return 'pr-[4.75rem]';
+        }
+        else {
+            return 'pr-[9.4rem]';
+        }
+    }
+
     const GOLDEN_RATIO = 1.618;
     const Placeholder = JSX(({ className, context, title, description = 'Блок в разработке...', ...rest }) => {
         return (jsxs(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: [jsx(Headline, { context: context, className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: getTileHeadingType(className) }), jsx("figure", { className: "m-0 min-w-[80%]", children: renderShimmer() })] }));
@@ -2508,6 +2589,49 @@
     const renderShimmerItem = (width, index) => (jsx("div", { style: { width: `${width || 100}%` }, className: "h-4 mt-2 bg-secondary-light" }, String(index)));
     const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
 
+    const Breadcrumb = JSX(({ text, href, target, onClick, className = '', children }) => {
+        if (href) {
+            return (jsx("a", { className: `no-underline ${className}`, href: href, target: target, onClick: onClick, children: jsx("span", { className: className, children: text || children }) }));
+        }
+        else {
+            return jsx("span", { className: className, children: text || children });
+        }
+    });
+
+    const renderBenefit$1 = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => {
+        return (jsx(BenefitItem, { icon: icon, label: label, description: description, version: version, benefitsVersion: benefitsVersion }, String(i)));
+    };
+
+    const ProductBlockInner = JSX(({ className = '', context, title, headlineVersion = 'L', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
+        const benefitsCount = benefits?.filter((_) => _.label)?.length;
+        const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCount);
+        return (jsxs("div", { className: `flex grow justify-between items-stretch h-full ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { context: context, title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion, align: "left" }), jsxs(BaseTile, { context: context, buttons: getButtons(context, buttons), 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 })] }));
+    });
+    const getButtons = (context, buttons) => {
+        return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex gap-4" })) : null;
+    };
+    const getBenefitsContainerStyles = (benefitsCount = 0) => `gap-6 mt-6 ${benefitsCount > 3 ? 'inline-grid grid-cols-[auto_auto]' : 'flex'}`;
+
+    function renderBackwardButton(button, version, className) {
+        const { text, href, target, onClick } = button;
+        const iconVersion = version === 'primary' ? 'white' : 'black';
+        const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
+        return (jsxs("div", { className: `flex items-center cursor-pointer ${className}`, onClick: onClick, children: [jsx(Button, { version: version, rounded: true, className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3", ariaLabel: text, href: href, target: target, children: jsx(ImgInner, { className: "w-4 h-4", image: { ...backwardIcon, iconVersion }, asSVG: true }) }), text ? jsx("span", { className: "text-m", children: text }) : null] }));
+    }
+
+    const breadcrumbsStyleMap = {
+        primary: 'text-secondary-text',
+        secondary: 'text-white/80',
+    };
+    const ProductBlock = JSX((props) => {
+        const { context, className = '', breadcrumbs, backwardButton, version = 'primary', ...otherProps } = props;
+        const router = context.useRouter();
+        const { handlerDecorator } = context;
+        return (jsxs(BlockWrapper, { context: context, className: `font-sans overflow-hidden p-[50px] flex flex-col box-border min-h-[454px] ${VersionStyleMap[version]} ${className}`, ...otherProps, children: [backwardButton?.text
+                    ? renderBackwardButton(useLink({ router, handlerDecorator }, backwardButton), version, 'mb-10 -mt-2.5')
+                    : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs-light mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbsStyleMap[version]}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { ...useLink({ router, handlerDecorator }, { className: breadcrumbsStyleMap[version], ...breadcrumb }) }, String(i))))) })) : null, jsx(ProductBlockInner, { context: context, version: version, ...otherProps })] }));
+    });
+
     const productBlockStyleMap = {
         primary: { title: 'text-secondary-text', text: 'text-secondary-text' },
         secondary: { title: 'text-white', text: 'text-white/80' },
@@ -2545,7 +2669,42 @@
         const additionalBorder = version === 'secondary' ? 'border-white/50' : 'border-black/50';
         return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `box-border relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0
         ${btnClassName} ${additionalBorder}
-      `, children: jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `last:pb-0 ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text  ${btnDescClassName}`, children: slide.description })] }) }, String(i)));
+      `, children: jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `last:pb-0 ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text  ${btnDescClassName}`, children: slide?.description })] }) }, String(i)));
+    }
+
+    const ProductTile = JSX(({ context, className = '', title, headlineVersion = 'S', description, additionalDescription, benefits = [], buttons, image, version = 'primary', ...rest }) => {
+        return (jsxs(BlockWrapper, { context: context, className: `overflow-hidden font-sans p-9 box-border relative justify-between grid min-h-[364px]
+          ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)}`, ...rest, children: [jsx(Headline, { context: context, className: `!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`, as: "h2", title: title, description: description, headlineVersion: headlineVersion, bgColorHeadline: version, align: "left" }), renderBenefits(benefits, version, image), additionalDescription
+                    ? renderAdditionalDescription(additionalDescription, image, version)
+                    : null, buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex self-end mt-5 gap-4 z-10 text-l" })) : null, image?.src ? jsx(ImgInner, { className: "absolute right-0 bottom-0", image: image }) : null] }));
+    });
+    function renderBenefits(benefits, version, image) {
+        // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
+        const BENEFITS_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
+        return (jsx("div", { className: `z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline
+        ${BENEFITS_WIDTH}`, children: benefits.length ? benefits.map(renderBenefit(version)) : null }));
+    }
+    function renderBenefit(version = 'primary') {
+        const labelStyleMap = {
+            primary: 'text-secondary-text',
+            secondary: 'text-white',
+        };
+        return function renderVersionedBenefit(benefit, i) {
+            const { label = '', description = '' } = benefit;
+            return [
+                jsx("div", { className: "text-h6", children: label }, `label-${i}`),
+                jsx("div", { className: `text-m-light ${labelStyleMap[version]}`, children: description }, `desc-${i}`),
+            ];
+        };
+    }
+    function renderAdditionalDescription(additionalDescription, image, version = 'primary') {
+        const descStyleMap = {
+            primary: 'text-secondary-text',
+            secondary: 'text-white',
+        };
+        // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
+        const DESCRIPTION_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
+        return (jsx("div", { className: `text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH} ${descStyleMap[version]}`, children: additionalDescription }));
     }
 
     const PromoTile = JSX(({ className = '', context, title = 'Акции и спецпредложения', date, description, buttons = [], version = 'primary', ...rest }) => {
@@ -2575,14 +2734,14 @@
         const blockClassName = version === 'secondary' ? 'bg-primary-main text-white' : 'bg-white text-primary-text';
         const cardClassName = version === 'secondary' ? 'border-white/50' : 'border-main-stroke';
         return (jsxs(BlockWrapper, { context: context, className: `relative font-sans p-9 overflow-hidden text-center ${blockClassName} ${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
-                                ? recommendations.map(renderRecommendationCard({ context, version, className: cardClassName }))
+                                ? recommendations.map(renderRecommendationCard(context, cardClassName, version))
                                 : null }), renderNavButtons({
                             cardsCount: recommendations.length,
                             activeCardIndex,
                             setActiveCardIndex,
                         })] }), 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 renderRecommendationCard = ({ context, version, className }) => (card, i) => {
+    const renderRecommendationCard = (context, className, version) => (card, i) => {
         return (jsx(RecommendationCard, { context: context, ...card, version: version, className: className }, String(i)));
     };
     const renderNavButtons = ({ cardsCount, activeCardIndex, setActiveCardIndex, }) => {
@@ -2713,79 +2872,6 @@
         return data || [];
     }
 
-    function renderClusterer(yandexMaps, map, points) {
-        map.geoObjects.removeAll();
-        const clusterIconContentLayout = yandexMaps.templateLayoutFactory.createClass('<div style="margin-top: -3px;">{{properties.geoObjects.length}}</div>');
-        const clusterer = new yandexMaps.Clusterer({
-            clusterIcons: [
-                {
-                    href: 'icons/MapMarkerClusterIcon.svg',
-                    size: [78, 84],
-                    offset: [-35, -50],
-                },
-            ],
-            clusterIconContentLayout,
-            clusterHideIconOnBalloonOpen: false,
-            geoObjectHideIconOnBalloonOpen: false,
-        });
-        const geoObjects = points.map((point) => new yandexMaps.Placemark(point, {}, {
-            iconLayout: 'default#image',
-            iconImageHref: 'icons/MapMarkerSingleIcon.svg',
-            iconImageSize: [78, 84],
-            iconImageOffset: [-35, -50],
-        }));
-        clusterer.add(geoObjects);
-        map.geoObjects.add(clusterer);
-        // TODO: Fix
-        // @ts-ignore
-        map.setBounds(yandexMaps.util.bounds.fromPoints(points)).then(() => {
-            if (map.getZoom() > 10) {
-                map.setZoom(10);
-            }
-        });
-    }
-
-    const getNS = (_) => globalThis[_];
-    function useExternalNS(namespaceName, url) {
-        const [externalNS, setExternalNS] = useState();
-        const setNS = useCallback(() => setExternalNS(getNS(namespaceName)), [namespaceName]);
-        useEffect(() => {
-            const script = document.getElementById(url);
-            if (script) {
-                if (getNS(namespaceName)) {
-                    setNS();
-                }
-                else {
-                    script.addEventListener('load', setNS);
-                    return () => {
-                        script.removeEventListener('load', setNS);
-                    };
-                }
-            }
-            else {
-                const newScript = document.createElement('script');
-                newScript.src = url;
-                newScript.async = true;
-                newScript.id = url;
-                newScript.addEventListener('load', setNS);
-                document.head.appendChild(newScript);
-                return () => {
-                    document.head.removeChild(newScript);
-                    setExternalNS(undefined);
-                };
-            }
-            return undefined;
-        }, [namespaceName, url]);
-        return externalNS;
-    }
-
-    const YMAPS_NAMESPACE = 'ymaps';
-    const useYandexMaps = () => {
-        const url = `https://api-maps.yandex.ru/2.1/?apikey=${projectSettings.YANDEX_MAP_API_KEY}&lang=ru_RU`;
-        const yandexMaps = useExternalNS(YMAPS_NAMESPACE, url);
-        return yandexMaps;
-    };
-
     const YandexMap = JSX(({ points }) => {
         const map = useRef(null);
         const yandexMaps = useYandexMaps();
@@ -2833,6 +2919,24 @@
 
     const checkIsIconRenderable = (icon) => Boolean(icon?.icon || icon?.src);
 
+    const renderItems = ({ items, isDotted = true, version = 'primary', className = '', }) => {
+        const listVersion = version === 'primary' ? 'gray' : version;
+        return items ? (jsx(List, { className: `mt-4 ${className}`, version: listVersion, items: items, listItemSize: "S", isDotted: isDotted })) : null;
+    };
+
+    const renderStepContent = ({ styleMap, isMainButton, version, router, handlerDecorator, }) => (step, i, { length }) => {
+        const { label, description, button, items, isDotted } = step;
+        const additionalMarginClass = `${button?.text ? 'mb-8' : ''} ${step?.label ? 'mt-2' : 'mt-4'}`;
+        const widthContainer = length < 5 ? 'w-[276px]' : 'w-[210px]';
+        return (jsxs("div", { className: `flex flex-col items-center text-center relative
+        whitespace-pre-line overflow-hidden ${widthContainer}`, children: [renderStepLabel(label), renderStepDescription({
+                    description,
+                    className: `${styleMap.description} ${additionalMarginClass}`,
+                }), renderItems({ items, isDotted, version, className: styleMap.description }), button?.text && !isMainButton ? (jsx(Button, { className: "box-border py-3 h-12 w-full max-w-[240px] mt-auto", ...useLink({ router, handlerDecorator }, button), version: version, children: button.text })) : null] }, String(i)));
+    };
+    const renderStepLabel = (label) => label ? jsx("div", { className: "text-x6 m-0 mt-4", children: label }) : null;
+    const renderStepDescription = ({ description, className = '', }) => (description ? jsx("div", { className: className, children: description }) : null);
+
     const STEPS_BLOCK_STYLE_MAPS = {
         primary: {
             background: 'bg-white',
@@ -2854,24 +2958,6 @@
         },
     };
 
-    const renderItems = ({ items, isDotted = true, version = 'primary', className = '', }) => {
-        const listVersion = version === 'primary' ? 'gray' : version;
-        return items ? (jsx(List, { className: `mt-4 ${className}`, version: listVersion, items: items, listItemSize: "S", isDotted: isDotted })) : null;
-    };
-
-    const renderStepContent = ({ styleMap, isMainButton, version, router, handlerDecorator, }) => (step, i, { length }) => {
-        const { label, description, button, items, isDotted } = step;
-        const additionalMarginClass = `${button?.text ? 'mb-8' : ''} ${step?.label ? 'mt-2' : 'mt-4'}`;
-        const widthContainer = length < 5 ? 'w-[276px]' : 'w-[210px]';
-        return (jsxs("div", { className: `flex flex-col items-center text-center relative
-        whitespace-pre-line overflow-hidden ${widthContainer}`, children: [renderStepLabel(label), renderStepDescription({
-                    description,
-                    className: `${styleMap.description} ${additionalMarginClass}`,
-                }), renderItems({ items, isDotted, version, className: styleMap.description }), button?.text && !isMainButton ? (jsx(Button, { className: "box-border py-3 h-12 w-full max-w-[240px] mt-auto", ...useLink({ router, handlerDecorator }, button), version: version, children: button.text })) : null] }, String(i)));
-    };
-    const renderStepLabel = (label) => label ? jsx("div", { className: "text-x6 m-0 mt-4", children: label }) : null;
-    const renderStepDescription = ({ description, className = '', }) => (description ? jsx("div", { className: className, children: description }) : null);
-
     const getLineOpacity = (showLines) => (showLines ? '' : 'opacity-0');
     const getPaddingX = (steps) => (steps < 5 ? 'px-[88px]' : 'px-[55px]');
     const StepsBlock = JSX(({ className = '', showLines = true, steps = [], button, version = 'primary', context, ...rest }) => {
@@ -2914,14 +3000,14 @@
     const ACTIVE_TEXT_CLASSES = 'text-white';
     const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover:text-primary-main';
 
-    const BADGE_CLASSES = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
+    const BADGE_CLASSES = 'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
     const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
     const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover:text-primary-main';
     const renderGroupTab = ({ onClick, currentTab, showCounter, page }) => (tab, i) => {
         const active = currentTab === tab;
-        const count = tab.ref
-            ? page?.blocks?.filter((block) => block?.labels?.includes(tab.ref)).length
-            : page?.blocks?.length;
+        const count = tab.ref && page?.blocks
+            ? page.blocks.filter((block) => block?.labels?.includes(tab.ref)).length
+            : 0;
         return (jsx("div", { className: `${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`, role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? renderTitle$1(tab.title, active) : null, showCounter && count ? renderCount(count, active) : null] }) }, String(i)));
     };
     const renderTitle$1 = (title, active) => (jsx("h3", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: title }));
@@ -3153,8 +3239,49 @@
         return (jsxs("div", { role: "table", children: [jsxs("div", { className: "relative", children: [children, jsx(TableArrowScrollControl, { ...tableArrowScrollControlProps })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
     });
 
+    const textBlockStyleMaps = {
+        primary: {
+            background: 'bg-white',
+            icon: 'bg-primary-main text-white',
+            title: 'text-primary-text',
+            description: 'text-secondary-text',
+        },
+        secondary: {
+            background: 'bg-primary-main',
+            icon: 'bg-white text-primary-main',
+            title: 'text-white',
+            description: 'text-white',
+        },
+        'secondary-light': {
+            background: 'bg-primary-main/10',
+            icon: 'bg-primary-main text-white',
+            title: 'text-primary-text',
+            description: 'text-secondary-text',
+        },
+    };
+    const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className, ...rest }) => {
+        const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+        return (jsxs(BlockWrapper, { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, ...rest, children: [iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title ? (jsx("div", { className: `text-l font-medium mb-1 ${textBlockStyleMap.title}`, children: title })) : null, description ? (jsx("div", { className: `text-s ${textBlockStyleMap.description}`, children: description })) : null] })] }));
+    });
+    function renderIcon(className) {
+        return (jsx("div", { className: "pt-1.5 pl-1 pr-4", children: jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs-light ${className}`, children: "i" }) }));
+    }
+    function renderImage(image) {
+        return image?.src ? jsx(ImgInner, { className: "pt-0.5 pr-3", image: image }) : null;
+    }
+
+    const Tile = JSX((props) => {
+        const { context, title, headingType = 'h3', description, items, children, buttons, image, isDotted = true, listItemSize = 'M', className = '', version = 'primary', ...rest } = props;
+        const headingClassName = version === 'primary' ? 'text-primary-text' : '';
+        return (jsx(BlockWrapper, { context: context, className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: headingType, as: "h2", title: title, className: `whitespace-pre-wrap max-w-[600px] ${headingClassName}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons.map((button) => ({ ...button, className: 'w-[158px]' })), className: "flex mt-8 gap-3" })) : null, image: image?.src ? jsx(ImgInner, { className: "mt-auto ml-7", image: image }) : null, children: [description ? (jsx(Description, { className: "max-w-[600px] text-xl-light mt-2.5", description: description })) : null, children, renderList({ version, isDotted, listItemSize }, items)] }) }));
+    });
+    function renderList({ version, isDotted, listItemSize }, items) {
+        return items?.length ? (jsx(List, { items: items, isDotted: isDotted, className: "mt-2.5", listItemSize: listItemSize, itemClassName: "mb-1.5", version: version })) : null;
+    }
+
     const Blocks = {
         Accordion,
+        AccordionItem,
         BenefitsBlock,
         Bonus,
         CardTransfer,
@@ -3177,7 +3304,10 @@
         ProductGallery,
         ProductTile,
         PromoTile,
+        OfficeMap,
+        OfficeServicesBlock,
         OtherProducts,
+        OtherProductsItem,
         Recommendation,
         StepsBlock,
         TariffsTable,
@@ -3188,9 +3318,12 @@
         SafeDepositRental,
         Tabs,
         ErrorBlock,
-        OfficeServicesBlock,
     };
 
+    function style2className(style) {
+        return style ? style.filter(Boolean).join(' ') : '';
+    }
+
     const api = LikeAPI();
     function useLikeService(pagePath) {
         const [likeCount, setLikeCount] = useState(0);
@@ -3236,24 +3369,25 @@
     const DEFAULT_SLOT_NAME = null;
     const DEFAULT_ANCESTORS = [DEFAULT_SLOT_NAME];
 
+    const defaultChildRenderer = (_) => _;
     function renderBlock(block, options, ancestors = DEFAULT_ANCESTORS) {
         const { key, page, blockDecorator, blocksRegistry, context } = options;
-        const { type } = block;
+        const { type, blocks: childBlocks } = block;
         if (!(type && type in blocksRegistry)) {
             console.warn(`No block with "${type}" is registered`);
         }
         const BlockComponent = type && blocksRegistry[type];
+        const { renderChild = defaultChildRenderer } = BlockComponent || {};
+        const renderChildBlock = (_, j) => renderChild(renderBlock(_, { ...options, key: `${options.key}-${j}` }, [...ancestors, block]), j);
+        const children = childBlocks?.length ? childBlocks.map(renderChildBlock) : null;
         return blockDecorator({
             blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
             block,
             ancestors,
             // Adjusted by decorator block and blockClassName
             render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
-                const { version, content, anchor, labels, blocks: childBlocks } = adjustedBlock;
-                const children = childBlocks
-                    ? childBlocks.map((_, j) => renderBlock(_, { ...options, key: `${options.key}-${j}` }, [...ancestors, block]))
-                    : null;
-                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, version: version, context: context, page: page, anchor: anchor, labels: labels, ...content, children: children }, key)) : null;
+                const { version, anchor, labels, content } = adjustedBlock;
+                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, context: context, page: page, ancestors: ancestors, version: version, anchor: anchor, labels: labels, ...content, children: children }, key)) : null;
             },
         }, key);
     }
@@ -3278,11 +3412,14 @@
         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", context: context }, "LikeControl") }));
     }
 
+    const packageVersion = "0.5.15";
+
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;
     exports.DaDataAPI = DaDataAPI;
     exports.LikeAPI = LikeAPI;
     exports.joinList = joinList;
+    exports.packageVersion = packageVersion;
     exports.projectSettings = projectSettings;
     exports.setup = setup;
     exports.setupHooks = setupHooks;