@redneckz/wildless-cms-uni-blocks 0.6.45 → 0.6.47

package/bundle/bundle.umd.js

@@ -343,6 +343,7 @@
     }
 
     const normalizeAnchor = (rawAnchor) => rawAnchor?.replace('#', '');
+    const getURLWithAnchor = (rawAnchor) => `${globalThis.location?.pathname}#${normalizeAnchor(rawAnchor)}`;
     class BlockRouter {
         static inst = new BlockRouter();
         eventBus = new EventBus();
@@ -360,13 +361,13 @@
             }
         }
         push(rawAnchor) {
-            globalThis.history?.pushState(null, '', `#${normalizeAnchor(rawAnchor)}`);
+            globalThis.history?.pushState(null, '', getURLWithAnchor(rawAnchor));
         }
         replace(rawAnchor) {
-            globalThis.history?.replaceState(null, '', `#${normalizeAnchor(rawAnchor)}`);
+            globalThis.history?.replaceState(null, '', getURLWithAnchor(rawAnchor));
         }
         reset() {
-            globalThis.history?.replaceState(null, '', '#');
+            globalThis.history?.replaceState(null, '', getURLWithAnchor());
         }
     }
 
@@ -422,11 +423,7 @@
         return (jsx(Tag, { className: `font-sans m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`, children: title }));
     });
 
-    const Paragraph = JSX((props) => {
-        const { size = '', color = '', align = '', font = '', children } = props;
-        const textClasses = `font-sans ${size} ${color} ${align} ${font}`;
-        return jsx("p", { className: textClasses, children: children });
-    });
+    const Paragraph = JSX(({ size, color, align, font, children }) => (jsx("p", { className: ['font-sans', size, color, align, font].filter(Boolean).join(' '), children: children })));
 
     const AccordionItemsList = JSX(({ children }) => (jsx("ul", { className: "list-none m-0 p-0", children: children })));
 
@@ -477,17 +474,13 @@
     const getSvgSize = (className, width) => width ? `width: ${width}px ` : 'w-full h-full';
     const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
 
-    function getIconVersion(image) {
-        return typeof image === 'string' ? 'normal' : image?.iconVersion || 'normal';
-    }
-
     const sourcesComparator = (a, b) => {
         if (a.media && b.media) {
             return a.media - b.media;
         }
         return 0;
     };
-    const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', isMobile = false }) => {
+    const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', isMobile = false, pathPrefix }) => {
         if (!image || (!image?.sources && !image?.src)) {
             return null;
         }
@@ -495,8 +488,8 @@
         return (jsxs("picture", { className: `${pictureStyles} ${className}`, children: [image?.sources?.length
                     ? image.sources
                         .sort(sourcesComparator)
-                        .map(({ src, format, media }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...image.size }, `${index}_${src}`)))
-                    : null, renderImg(image, imageClassName, isMobile)] }));
+                        .map(({ src, format, media }, index) => (jsx("source", { srcSet: addPathPrefixToSrcSet(src, pathPrefix), type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...image.size }, `${index}_${src}`)))
+                    : null, renderImg({ ...image, src: addPathPrefixToSrc(image.src, pathPrefix) }, imageClassName, isMobile)] }));
     });
     const renderImg = (image, imageClassName = '', isMobile = false) => {
         const style = {
@@ -508,20 +501,21 @@
         const imgStyle = isMobile ? 'm-auto' : 'm-0';
         return (jsx("img", { src: image.src, className: `${imgStyle} ${imageClassName}`, alt: alt, title: title, style: style, ...image.size }));
     };
+    const normalizePathPrefix = (pathPrefix = '') => pathPrefix && !pathPrefix.endsWith('/') ? `${pathPrefix}/` : pathPrefix;
+    const addPathPrefixToSrc = (src, pathPrefix) => !src || src?.startsWith('data:image') ? src : `${normalizePathPrefix(pathPrefix)}${src}`;
+    const addPathPrefixToSrcSet = (srcset, pathPrefix) => srcset
+        ?.split(',')
+        .map((src) => addPathPrefixToSrc(src.trim(), pathPrefix))
+        .join(', ');
     function formatToMimeType(format) {
         return format ? `image/${String(format)}` : undefined;
     }
 
-    const ImgInner = JSX(({ className = '', image, imageClassName = '', isMobile, ...iconProps }) => {
-        if (!image) {
+    const ImgInner = JSX(({ className = '', image, imageClassName = '', isMobile, pathPrefix, ...iconProps }) => {
+        if (!image?.src && !image?.icon) {
             return null;
         }
-        // backwards compatibility with existing icons in usage
-        const icon = typeof image === 'string' ? image : image.icon;
-        if (icon || icon === '') {
-            return icon.length ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: getIconVersion(image), name: icon, ...iconProps })) : null;
-        }
-        return (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile }));
+        return image.icon ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: image?.iconVersion || 'normal', name: image.icon, ...iconProps })) : (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile, pathPrefix: pathPrefix }));
     });
 
     const Text = JSX(({ size, color, align, font, children }) => (jsx("span", { className: ['font-sans', size, color, align, font].filter(Boolean).join(' '), children: children })));
@@ -529,7 +523,7 @@
     const icons$1 = ['PlusIcon', 'MinusIcon'];
     const AccordionItem = JSX(({ className = '', label = '', isExpanded, ...rest }) => (jsx("li", { className: `border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: true, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "grid grid-cols-12 gap-5 [&>*]:p-0", isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(FoldButton$1, { label: label, icon: icons$1[Number(isUnfolded)], onClick: onToggle })) }) })));
     AccordionItem.childrenTypes = [];
-    const FoldButton$1 = JSX(({ label, icon, onClick }) => (jsxs("button", { className: "border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer", onClick: onClick, children: [jsx(Text, { size: "text-xl", font: "font-medium", children: label }), jsx(ImgInner, { image: icon, className: "text-primary-main flex-shrink-0", width: "24", height: "24", asSVG: true })] })));
+    const FoldButton$1 = JSX(({ label, icon, onClick }) => (jsxs("button", { className: "border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer", onClick: onClick, children: [jsx(Text, { size: "text-xl", font: "font-medium", children: label }), jsx(ImgInner, { image: { icon }, className: "text-primary-main flex-shrink-0", width: "24", height: "24", asSVG: true })] })));
 
     const VersionStyleMap = {
         primary: 'bg-white text-primary-text',
@@ -539,6 +533,25 @@
         primary: 'text-secondary-text',
         secondary: 'text-white',
     };
+    const VersionWithGrayStyleMap = {
+        primary: 'bg-white text-primary-text',
+        secondary: 'bg-primary-main text-white',
+        gray: 'bg-main-divider text-primary-text',
+    };
+    const GapStyleMap = {
+        XXL: 'gap-12',
+        XL: 'gap-10',
+        L: 'gap-8',
+        M: 'gap-4',
+        S: 'gap-2',
+        XS: 'gap-1',
+        '': '',
+    };
+    const LayoutBackgroundStyleMap = {
+        transparent: '',
+        primary: 'bg-white',
+        secondary: 'bg-primary-main',
+    };
 
     const getIconWithVersion = (icon, version = 'primary') => ({
         ...icon,
@@ -756,64 +769,58 @@
             return null;
         }
         const iconWidth = icon?.size?.width ? `${icon.size.width}` : '24';
-        return jsx(ImgInner, { image: { ...icon }, width: iconWidth, height: "24", asSVG: true });
+        return jsx(ImgInner, { image: icon, width: iconWidth, height: "24", asSVG: true });
     };
 
-    const HEADLINE_BLOCK_STYLE_MAPS = {
+    const headlineStyles = {
         transparent: {
-            background: 'bg-transparent',
-            text: 'text-primary-text',
-            description: 'text-primary-text',
+            wrapper: 'bg-transparent',
+            titleColor: 'text-primary-text',
         },
         primary: {
-            background: 'bg-white',
-            text: 'text-primary-text',
-            description: 'text-primary-text',
+            wrapper: 'bg-white',
+            titleColor: 'text-primary-text',
         },
         secondary: {
-            background: 'bg-primary-main',
-            text: 'text-white',
-            description: 'text-white/80',
+            wrapper: 'bg-primary-main',
+            titleColor: 'text-white',
+            descriptionColor: 'text-white/80',
         },
     };
-    const HEADLINE_VERSION = {
+
+    const headlineVersionStyles = {
         XXL: {
-            descriptionFont: 'text-h5',
-            gap: 'gap-[18px]',
-            headingType: 'h0',
-            as: 'h1',
+            wrapper: 'gap-[18px]',
+            title: { headingType: 'h0', as: 'h1' },
+            descriptionSize: 'text-h5',
         },
         XL: {
-            descriptionFont: 'text-xl-light',
-            gap: 'gap-4',
-            headingType: 'h1',
-            as: 'h1',
+            wrapper: 'gap-4',
+            title: { headingType: 'h1', as: 'h1' },
+            descriptionSize: 'text-xl-light',
         },
         L: {
-            descriptionFont: 'text-xl-light',
-            gap: 'gap-4',
-            headingType: 'h2',
-            as: 'h2',
+            wrapper: 'gap-4',
+            title: { headingType: 'h2', as: 'h2' },
+            descriptionSize: 'text-xl-light',
         },
         M: {
-            descriptionFont: 'text-xl-light',
-            gap: 'gap-3',
-            headingType: 'h3',
-            as: 'h3',
+            wrapper: 'gap-3',
+            title: { headingType: 'h3', as: 'h3' },
+            descriptionSize: 'text-xl-light',
         },
         S: {
-            descriptionFont: 'text-xl-light',
-            gap: 'gap-2',
-            headingType: 'h4',
-            as: 'h4',
+            wrapper: 'gap-2',
+            title: { headingType: 'h4', as: 'h4' },
+            descriptionSize: 'text-xl-light',
         },
         XS: {
-            descriptionFont: 'text-l-light',
-            gap: 'gap-2',
-            headingType: 'h5',
-            as: 'h5',
+            wrapper: 'gap-2',
+            title: { headingType: 'h5', as: 'h5' },
+            descriptionSize: 'text-l-light',
         },
     };
+    // TODO Move to Gallery and rename
     const HEADLINE_SMALL_VERSION = {
         H6: 'text-h6',
         XL_L: 'text-xl-light',
@@ -825,15 +832,15 @@
         XS: 'text-xs-light',
     };
 
-    const Headline = JSX(({ className = '', bgColorHeadline = 'transparent', align = 'center', title, description, headlineVersion = 'XL', as, ...rest }) => {
-        const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
-        const SIZE_MAPS = HEADLINE_VERSION[headlineVersion];
-        return (jsxs(BlockWrapper, { className: `font-sans flex flex-col p-12 ${SIZE_MAPS.gap} ${STYLE_MAPS.background} ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: SIZE_MAPS?.headingType, as: as || SIZE_MAPS?.as, className: `whitespace-pre-wrap ${STYLE_MAPS.text} ${AlignText[align]}`, title: title })) : null, description ? (jsx("p", { className: `${SIZE_MAPS.descriptionFont} ${STYLE_MAPS.text} ${AlignText[align]}`, children: description })) : null] }));
+    const Headline = JSX(({ className = '', title, description, headlineVersion = 'XL', bgColorHeadline = 'transparent', align = 'text-center', as, ...rest }) => {
+        const style = headlineStyles[bgColorHeadline];
+        const specificStyle = headlineVersionStyles[headlineVersion];
+        return (jsxs(BlockWrapper, { className: `flex flex-col p-12 ${specificStyle.wrapper} ${style.wrapper} ${className}`, ...rest, children: [title ? (jsx(Heading, { className: `whitespace-pre-wrap ${style.titleColor} ${align}`, ...specificStyle?.title, as: as || specificStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { color: style.descriptionColor || style.titleColor, size: specificStyle.descriptionSize, align: align, children: description })) : null] }));
     });
 
     const Bonus = JSX((props) => {
         const { className = '', title, description, bonusItems, ...rest } = props;
-        return (jsx(BlockWrapper, { className: `font-sans bg-white p-12 pb-9 ${className}`, ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center", ...rest }), jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems?.length
+        return (jsx(BlockWrapper, { className: `font-sans bg-white p-12 pb-9 ${className}`, ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", ...rest }), jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems?.length
                             ? bonusItems.map((_, i) => {
                                 return (jsx("div", { className: "flex-grow w-[49%] border border-gray p-9 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0", children: jsxs("div", { className: "flex justify-between w-full", children: [jsxs("div", { className: "flex flex-col justify-between mr-4", children: [jsxs("div", { children: [jsx("div", { className: "text-h4", children: _.title }), jsx("div", { className: "text-xl-light mt-2 max-w-[488px]", children: _.description })] }), _?.buttons?.length ? jsx(ButtonSection, { buttons: _?.buttons }) : null] }), _.bonusItemContent?.bonusType
                                                 ? renderBonusItemContent(_.bonusItemContent)
@@ -847,7 +854,7 @@
     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-12 h-12 min-w-12 p-3 rounded-full`, image: _.image }) : null;
 
-    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-12 flex flex-col text-center ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-8", title: title, description: subtitle, headlineVersion: "M", align: "center", ...rest }), bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] })));
+    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-12 flex flex-col text-center ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-8", title: title, description: subtitle, headlineVersion: "M", ...rest }), bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] })));
     const renderBonusBenefit = ({ icon, label, description }, i) => {
         return (jsxs("div", { className: "flex flex-col items-center text-h6", children: [description ? jsx("span", { children: description }) : null, icon ? jsx(ImgInner, { image: icon, height: "180", width: "auto", className: "h-[180px] w-auto" }) : null, jsx("div", { children: label ? jsx("span", { children: label }) : null })] }, String(i)));
     };
@@ -870,7 +877,7 @@
     });
     const renderItem = (item, key) => {
         const { icon, text } = item;
-        return (jsxs("li", { className: "flex items-center gap-3.5 mb-3 last:mb-0", children: [icon?.icon ? (jsx(ImgInner, { className: `w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider`, image: icon.icon, asSVG: true })) : null, icon?.src ? jsx(ImgInner, { image: icon.icon }) : null, jsx("span", { className: "text-xl-light", children: text })] }, key));
+        return (jsxs("li", { className: "flex items-center gap-3.5 mb-3 last:mb-0", children: [icon?.icon ? (jsx(ImgInner, { image: icon, className: "w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider", asSVG: true })) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, jsx("span", { className: "text-xl-light", children: text })] }, key));
     };
 
     const BusinessBlock = JSX(({ className = '', title, cards, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans bg-white p-12 pb-9 ${className}`, ...rest, children: [jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }), jsx("div", { className: "flex gap-5", children: cards?.length ? cards.map((_, i) => jsx(BusinessCard, { ..._ }, String(i))) : null })] })));
@@ -1564,9 +1571,11 @@
     Carousel.childrenTypes = [
         'CarouselCard',
         'CarouselCatalogCard',
-        'CarouselTariffsCard',
+        'CarouselInvestmentCard',
         'CarouselProductCard',
         'CarouselProgramsCard',
+        'CarouselRecommendationCard',
+        'CarouselTariffsCard',
         'CarouselInvestmentCard',
     ];
     const renderScrollButtons = ({ scrollLeft, scrollRight, canScrollLeft, canScrollRight, }) => (jsxs("div", { children: [canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-8`, onClick: scrollLeft })) : null, canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle} right-8`, onClick: scrollRight })) : null] }));
@@ -1576,7 +1585,7 @@
         normal: 'min-w-[1007px]',
         mini: 'min-w-[355px]',
     };
-    const CarouselCard = JSX(({ className = '', button, description, title, version = 'normal' }) => (jsx("section", { className: `flex pb-9 pl-12 ${CARD_WIDTH_MAP[version]} ${className}`, children: jsxs("div", { className: "relative w-full", children: [jsx("div", { className: `${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-6 right-8 bg-green` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light` }), jsxs("div", { className: "relative bg-white z-10 py-6 px-10 border border-solid border-green-light", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center" }), button ? jsx("div", { className: "mt-6", children: renderButton({ button }) }) : null] })] }) })));
+    const CarouselCard = JSX(({ className = '', button, description, title, version = 'normal' }) => (jsx("section", { className: `flex pb-9 pl-12 ${CARD_WIDTH_MAP[version]} ${className}`, children: jsxs("div", { className: "relative w-full", children: [jsx("div", { className: `${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-6 right-8 bg-green` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light` }), jsxs("div", { className: "relative bg-white z-10 py-6 px-10 border border-solid border-green-light", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M" }), button ? jsx("div", { className: "mt-6", children: renderButton({ button }) }) : null] })] }) })));
 
     const cardStyleMap$2 = {
         black: 'bg-black',
@@ -1626,7 +1635,7 @@
 
     const MAX_LINKS_COUNT = 12;
     const CarouselLinks = JSX(({ className = '', additionalDescription, description, links, title, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `bg-primary-main flex w-full p-10 overflow-hidden justify-between font-sans ${className}`, ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-9 text-white text-xl-light", children: [jsx(Headline, { title: title, as: "h1", description: description, align: "left", className: "p-0", bgColorHeadline: "secondary" }), additionalDescription ? (jsx("div", { className: "pt-6", children: jsx(Paragraph, { children: additionalDescription }) })) : null] }), links?.length ? renderLinks(links) : null] }));
+        return (jsxs(BlockWrapper, { className: `bg-primary-main flex w-full p-10 overflow-hidden justify-between font-sans ${className}`, ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-9 text-white text-xl-light", children: [jsx(Headline, { title: title, as: "h1", description: description, align: "text-left", className: "p-0", bgColorHeadline: "secondary" }), additionalDescription ? (jsx("div", { className: "pt-6", children: jsx(Paragraph, { children: additionalDescription }) })) : null] }), links?.length ? renderLinks(links) : null] }));
     });
     const renderLinks = (links) => {
         const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
@@ -1694,6 +1703,59 @@
     const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans border border-main-stroke flex min-w-[536px] ${VersionStyleMap[version]} ${className}`, ...rest, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-end", children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: " mb-3.5", headingType: "h5", title: title }) : null, list.length ? jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$2) }) : null] })] })));
     const renderList$2 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: `text-h6`, children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
 
+    const ICONS_MAP = [
+        {
+            origins: ['t.me', 'telegram.org'],
+            icon: { icon: 'TelegramIcon' },
+            label: 'Телеграм',
+        },
+        {
+            origins: ['vk.com'],
+            icon: { icon: 'VKIcon' },
+            label: 'ВКонтакте',
+        },
+        {
+            origins: ['ok.ru'],
+            icon: { icon: 'OkIcon' },
+            label: 'Одноклассники',
+        },
+        {
+            origins: ['apps.apple.com'],
+            icon: { icon: 'AppleIcon' },
+            label: 'App Store',
+        },
+        {
+            origins: ['play.google.com'],
+            icon: { icon: 'PlayMarketIcon' },
+            label: 'Google Play',
+        },
+    ];
+    const MediaButton = JSX(({ version = 'primary', ...rest }) => {
+        const link = useLink();
+        const { href, onClick } = link(rest);
+        const { icon, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+        if (!icon) {
+            return null;
+        }
+        const classes = version === 'secondary'
+            ? 'bg-white hover:bg-secondary-hover'
+            : 'border-solid border border-main-divider hover:border-transparent hover:bg-primary-main';
+        const isPrimary = version === 'primary';
+        return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", onClick: onClick, children: icon ? (jsx(ImgInner, { image: getIconWithVersion(icon), imageClassName: "group-hover:text-white", width: "24", height: "24", asSVG: true })) : null }));
+    });
+
+    const SocialMedia = JSX(({ className = '', media, version, children }) => (jsxs("div", { className: "font-sans", children: [jsx("div", { className: `flex gap-2.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { version: version, ..._ }, String(index)))) }), jsx("span", { className: "text-s-light text-secondary-text", children: children })] })));
+
+    const CarouselRecommendationCard = JSX(({ button, className = '', description, image, items = [], socialMedia = [], title, version = 'primary', ...rest }) => {
+        const tileTitle = title ? (jsx(Heading, { headingType: "h5", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
+        const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
+        return (jsx(BlockWrapper, { className: `relative text-left border border-solid box-border p-7 min-w-[524px]
+        ${BorderVersionStyleMap[getOmitVersion(version)]}
+        ${VersionWithGrayStyleMap[version]}
+        ${className}`, ...rest, children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? jsx("span", { className: "mb-2", children: description }) : null, items.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items, version: version })) : null, socialMedia.length ? (jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia, version: getOmitVersion(version) })) : null, button?.text ? jsx("div", { className: "pt-2 mt-16", children: renderButton({ button }) }) : null] }) }) }));
+    });
+    const getOmitVersion = (version) => version === 'gray' ? 'primary' : version;
+
     const VISIBLE_ROWS_COUNT = 1;
     const CarouselTariffsCard = JSX(({ className = '', title, icon, isHighlighting, button, rows = [], ...rest }) => {
         const rowsNode = rows.map(renderCardInfo);
@@ -1723,7 +1785,7 @@
             itemCount: cards?.length,
             visibleItemCount: CARD_VIEW_COUNT$1,
         });
-        return (jsxs(BlockWrapper, { className: `bg-white relative font-sans p-12 overflow-hidden text-center ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center", ...rest }), jsx("div", { className: "flex duration-1000 gap-3.5 mt-8", style: { transform: `translateX(-${activeIndex * CARD_SHIFT$1}px)` }, role: "list", children: cards?.length ? cards.map((card, i) => jsx(CatalogCard, { ...card }, String(i))) : null }), renderArrows({
+        return (jsxs(BlockWrapper, { className: `bg-white relative font-sans p-12 overflow-hidden text-center ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", ...rest }), jsx("div", { className: "flex duration-1000 gap-3.5 mt-8", style: { transform: `translateX(-${activeIndex * CARD_SHIFT$1}px)` }, role: "list", children: cards?.length ? cards.map((card, i) => jsx(CatalogCard, { ...card }, String(i))) : null }), renderArrows({
                     ...controls,
                     btnClass: ['left-8', 'right-8'],
                     className: 'top-1/2 z-10 mt-6',
@@ -1801,7 +1863,7 @@
 
     const ContactsBlock = JSX(({ className = '', contacts, info, version = 'secondary', ...rest }) => (jsxs(BlockWrapper, { className: `${VersionStyleMap[version]} flex p-12 ${className}`, ...rest, children: [info?.length ? renderBlocks(info, version) : null, contacts?.length ? renderBlocks(contacts, version) : null] })));
     const renderBlocks = (info, version) => (jsx("div", { className: "flex grow basis-0", children: info.map((column, index) => renderBlocksColumn({ column, index, version })) }));
-    const renderBlocksColumn = ({ column, index, version }) => column ? (jsx("div", { className: "flex flex-col grow basis-0 pr-11 last:pr-0", children: column.map(({ title = '', description, additionalDescription, button }, key) => (jsxs("div", { className: "mt-6 first:mt-0", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "XS", align: "left", bgColorHeadline: version }), additionalDescription ? (jsx("div", { className: "mt-1.5 opacity-80", children: jsx(Paragraph, { size: "text-m-light", children: additionalDescription }) })) : null, button ? jsx(Button, { className: "mt-6", ...button }) : null] }, String(key)))) }, `col-${String(index)}`)) : null;
+    const renderBlocksColumn = ({ column, index, version }) => column ? (jsx("div", { className: "flex flex-col grow basis-0 pr-11 last:pr-0", children: column.map(({ title = '', description, additionalDescription, button }, key) => (jsxs("div", { className: "mt-6 first:mt-0", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "XS", align: "text-left", bgColorHeadline: version }), additionalDescription ? (jsx("div", { className: "mt-1.5 opacity-80", children: jsx(Paragraph, { size: "text-m-light", children: additionalDescription }) })) : null, button ? jsx(Button, { className: "mt-6", ...button }) : null] }, String(key)))) }, `col-${String(index)}`)) : null;
 
     const renderErrorContent = (error) => {
         if (error?.errorContentType === 'Image' && error?.image) {
@@ -1828,11 +1890,12 @@
     const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
 
     const TABLE_HEAD_STYLE = 'text-left text-m-light text-secondary-text';
+    const TABLE_HEAD_STYLE_WITH_PL = `${TABLE_HEAD_STYLE} pl-11`;
     const CURRENCY_ICONS_MAP = {
         USD: 'DollarIcon',
         EUR: 'EuroIcon',
     };
-    const CurrencyTable = JSX(({ className, exchangeCurrencyItems }) => (jsxs("table", { className: `h-fit w-fit ${className}`, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: TABLE_HEAD_STYLE, children: "\u0412\u0430\u043B\u044E\u0442\u0430" }), jsx("th", { className: `${TABLE_HEAD_STYLE} pl-11`, children: "\u041A\u0443\u043F\u0438\u0442\u044C" }), jsx("th", { className: `${TABLE_HEAD_STYLE} pl-11`, children: "\u041F\u0440\u043E\u0434\u0430\u0442\u044C" })] }) }), jsx("tbody", { children: exchangeCurrencyItems.map(renderCurrencyRow) })] })));
+    const CurrencyTable = JSX(({ className, exchangeCurrencyItems }) => (jsxs("table", { className: `h-fit w-fit ${className}`, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: TABLE_HEAD_STYLE, children: "\u0412\u0430\u043B\u044E\u0442\u0430" }), jsx("th", { className: TABLE_HEAD_STYLE_WITH_PL, children: "\u041A\u0443\u043F\u0438\u0442\u044C" }), jsx("th", { className: TABLE_HEAD_STYLE_WITH_PL, children: "\u041F\u0440\u043E\u0434\u0430\u0442\u044C" })] }) }), jsx("tbody", { children: exchangeCurrencyItems.map(renderCurrencyRow) })] })));
     const renderCurrencyRow = (exchangeCurrencyItem) => {
         const currency = exchangeCurrencyItem?.currency?.currency;
         return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [currency ? (jsx(ImgInner, { image: { icon: CURRENCY_ICONS_MAP[currency] }, width: "24", height: "24" })) : null, jsx("span", { className: "ml-2", children: currency })] }) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.saleExchangeRate) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.buyExchangeRate) })] }, currency));
@@ -2047,7 +2110,7 @@
         transparent: 'text-white',
     };
     const renderImage$3 = (bgColor, image, size) => {
-        return image?.src ? (jsx(ImgInner, { image: image, className: SVG_COLOR[bgColor], width: size?.width, height: size?.height, asSVG: true })) : (jsx(ImgInner, { image: {
+        return image?.src ? (jsx(ImgInner, { image: image, className: SVG_COLOR[bgColor], width: size?.width, height: size?.height, pathPrefix: "/wcms-resources/", asSVG: true })) : (jsx(ImgInner, { image: {
                 icon: image?.icon || 'LogoIcon',
                 iconVersion: ICON_VERSION_MAP[bgColor],
             }, className: SVG_COLOR[bgColor], width: size?.width, height: size?.height, asSVG: true }));
@@ -2079,11 +2142,11 @@
         const SearchBarLabelClassName = isMobile ? 'text-s' : 'text-l-light';
         const SearchBarInputClassName = isMobile ? ' placeholder-transparent' : 'h-full';
         const inputPlaceholder = isMobile ? 'some search' : undefined;
-        return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: LoupeIconClassName, children: jsx(ImgInner, { image: "LoupeIcon", width: "24", height: "24" }) }), term ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text ${SearchBarLabelClassName}`, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: `h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
+        return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: LoupeIconClassName, children: jsx(ImgInner, { image: { icon: 'LoupeIcon' }, width: "24", height: "24" }) }), term ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text ${SearchBarLabelClassName}`, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: `h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
               outline-none pr-[6%] border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text ${SearchBarInputClassName}`, value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input", placeholder: inputPlaceholder }), isMobile ? (jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
                         e.preventDefault();
                         setTerm('');
-                    }, children: jsx(ImgInner, { image: "CloseIcon", width: "24", height: "24" }) })) : (jsx(Button, { version: "primary", text: "\u041D\u0430\u0439\u0442\u0438", className: "invisible peer-focus:visible absolute top-[3px] right-1", onClick: (ev) => {
+                    }, children: jsx(ImgInner, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })) : (jsx(Button, { version: "primary", text: "\u041D\u0430\u0439\u0442\u0438", className: "invisible peer-focus:visible absolute top-[3px] right-1", onClick: (ev) => {
                         ev?.preventDefault();
                         console.log('click');
                     }, children: jsx("div", { className: "text-s px-9 py-2.5", children: "\u041D\u0430\u0439\u0442\u0438" }) }))] }));
@@ -2139,49 +2202,6 @@
         return (jsx("a", { className: "block text-l-light text-secondary-text hover:text-primary-main no-underline", href: href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }));
     });
 
-    const ICONS_MAP = [
-        {
-            origins: ['t.me', 'telegram.org'],
-            icon: { icon: 'TelegramIcon' },
-            label: 'Телеграм',
-        },
-        {
-            origins: ['vk.com'],
-            icon: { icon: 'VKIcon' },
-            label: 'ВКонтакте',
-        },
-        {
-            origins: ['ok.ru'],
-            icon: { icon: 'OkIcon' },
-            label: 'Одноклассники',
-        },
-        {
-            origins: ['apps.apple.com'],
-            icon: { icon: 'AppleIcon' },
-            label: 'App Store',
-        },
-        {
-            origins: ['play.google.com'],
-            icon: { icon: 'PlayMarketIcon' },
-            label: 'Google Play',
-        },
-    ];
-    const MediaButton = JSX(({ version = 'primary', ...rest }) => {
-        const link = useLink();
-        const { href, onClick } = link(rest);
-        const { icon, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
-        if (!icon) {
-            return null;
-        }
-        const classes = version === 'secondary'
-            ? 'bg-white hover:bg-secondary-hover'
-            : 'border-solid border border-main-divider hover:border-transparent hover:bg-primary-main';
-        const isPrimary = version === 'primary';
-        return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", onClick: onClick, children: icon ? (jsx(ImgInner, { image: getIconWithVersion(icon), imageClassName: "group-hover:text-white", width: "24", height: "24", asSVG: true })) : null }));
-    });
-
-    const SocialMedia = JSX(({ className = '', media, version, children }) => (jsxs("div", { className: "font-sans", children: [jsx("div", { className: `flex gap-2.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { version: version, ..._ }, String(index)))) }), jsx("span", { className: "text-s-light text-secondary-text", children: children })] })));
-
     const TextInformationLink = JSX(({ className = '', index, ...rest }) => {
         const link = useLink();
         const { href, target, text, onClick } = link(rest);
@@ -2222,7 +2242,7 @@
     const renderAdditionalDescription$1 = (additionalDescription, version) => additionalDescription ? (jsx("div", { className: `text-m-light mt-auto ${VersionAdditionalStyleMap[version ?? 'primary']}`, children: additionalDescription })) : null;
     const renderItems$1 = (items, isDotted, version = 'primary') => (jsx(List, { className: `max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "text-left", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted, version: version }));
 
-    const GalleryContainer = JSX(({ headlineVersion = 'M', cards = [], version = 'normal', activeIndex, ...rest }) => (jsxs("div", { children: [jsx(Headline, { ...rest, className: "!p-0", headlineVersion: headlineVersion, align: "center" }), jsx("div", { className: `flex mt-8 ${cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''} duration-1000`, style: { transform: `translateX(-${activeIndex * cardWidthMap[version]}px)` }, role: "list", children: cards?.map((card, i) => renderCard({ card, version }, i)) })] })));
+    const GalleryContainer = JSX(({ headlineVersion = 'M', cards = [], version = 'normal', activeIndex, ...rest }) => (jsxs("div", { children: [jsx(Headline, { ...rest, className: "!p-0", headlineVersion: headlineVersion }), jsx("div", { className: `flex mt-8 ${cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''} duration-1000`, style: { transform: `translateX(-${activeIndex * cardWidthMap[version]}px)` }, role: "list", children: cards?.map((card, i) => renderCard({ card, version }, i)) })] })));
     function renderCard({ card, version }, i) {
         return (jsx("section", { className: `box-border border-solid border border-main-stroke p-6 mx-2 flex flex-col justify-between
         items-stretch ${cardStyleMap[version]} ${VersionStyleMap[card.version ?? 'primary']} w-full col-span-4`, role: "listitem", children: jsx(GalleryCardInner, { ...card }) }, String(i)));
@@ -2243,7 +2263,7 @@
 
     const Gallery = JSX((props) => jsx(GalleryInner, { ...props, version: "normal" }));
 
-    const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans bg-white p-12 ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-4", title: title, description: description, headlineVersion: "M", align: "center", ...rest }), calendar ? renderCalendar(calendar) : null] })));
+    const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans bg-white p-12 ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-4", title: title, description: description, headlineVersion: "M", ...rest }), calendar ? renderCalendar(calendar) : null] })));
     const renderCalendar = (calendar) => {
         const colCount = calendar.reduce((accumulator, currentValue) => currentValue?.month?.length ? accumulator + currentValue.month.length : accumulator, 0) || 1;
         const colSize = 100 / colCount;
@@ -2385,17 +2405,17 @@
     const CloseButton = JSX(({ close }) => (jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-6 right-6 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
             e.preventDefault();
             close && close();
-        }, children: jsx(ImgInner, { image: "CloseIcon", width: "24", height: "24" }) })));
+        }, children: jsx(ImgInner, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
     const renderRegionGroup = ({ onChangeLocation, close }) => ([letter, regions]) => (jsxs("div", { className: "break-inside-avoid mb-7 w-[224px]", children: [jsx("div", { className: "mb-2.5", children: jsx(Text, { size: "text-h6", children: letter }) }), regions.map(renderRegion({ onChangeLocation, close }))] }, letter));
     const renderRegion = ({ onChangeLocation, close }) => (region) => (jsx("div", { className: "mb-1", children: jsx("button", { className: "cursor-pointer hover:text-primary-hover", onClick: () => {
                 onChangeLocation && onChangeLocation(region);
                 close && close();
-            }, children: region.name }) }, region.id));
+            }, children: region.name || '' }) }, region.id));
     const ForeignOffices = JSX(({ foreignOffices }) => foreignOffices?.length ? (jsxs("div", { className: "border-t border-main-divider mt-7 pt-7", children: [jsx("div", { className: "mb-4", children: jsx(Text, { size: "text-m-light", color: "text-secondary-text", children: "\u041F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435\u043B\u044C\u0441\u0442\u0432\u0430 \u0437\u0430 \u0440\u0443\u0431\u0435\u0436\u043E\u043C:" }) }), jsx("div", { className: "flex gap-10", children: foreignOffices.map((office, i) => (jsx(ForeignOffice, { ...office }, String(i)))) })] })) : null);
     const ForeignOffice = JSX(({ icon, ...rest }) => {
         const link = useLink();
         const { text, target, href, onClick } = link(rest);
-        return (jsxs("div", { className: "flex gap-x-3", children: [jsx(ImgInner, { image: icon }), jsx("a", { className: "hover:text-primary-hover", href: href, target: target, onClick: onClick, children: text })] }));
+        return (jsxs("div", { className: "flex gap-x-3", children: [icon ? jsx(ImgInner, { pathPrefix: "/wcms-resources/", image: icon }) : null, text ? (jsx("a", { className: "hover:text-primary-hover", href: href, target: target, onClick: onClick, children: text })) : null] }));
     });
 
     const HeaderSecondaryMenuButton = JSX(({ className = '', children, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 p-0 w-6 h-6 flex items-center bg-inherit cursor-pointer ${className}`, disabled: true, "aria-label": ariaLabel, children: children })));
@@ -2508,6 +2528,22 @@
         return (jsx(BlockWrapper, { tag: "header", className: `pt-6 px-20 ${bgColor} ${className} ${showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5'}`, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { className: "ml-auto", foreignOffices: foreignOffices, defaultLocation: defaultLocation, officesLink: officesLink, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-px ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
     });
 
+    const HorizontalLayout = JSX(({ className = '', gap = 'XS', isPadding = false, version = 'transparent', options, ...rest }) => {
+        const paddingStyle = isPadding ? 'p-12' : '';
+        return (jsx(BlockWrapper, { className: [
+                'grid grid-cols-12',
+                paddingStyle,
+                GapStyleMap[gap],
+                LayoutBackgroundStyleMap[version],
+                className,
+            ]
+                .filter(Boolean)
+                .join(' '), ...rest, children: renderChildren({ ...rest, options: options }) }));
+    });
+    HorizontalLayout.childrenTypes = {
+        exclude: ['HorizontalLayout'],
+    };
+
     const ImgBlock = JSX((props) => {
         const { className, image, ...rest } = props;
         return (jsx(BlockWrapper, { className: className, ...rest, children: jsx(ImgInner, { image: image }) }));
@@ -2557,7 +2593,7 @@
         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) {
-        return isActive ? (jsx(ImgInner, { className: `h-6 w-6 min-w-6 min-h-6 absolute right-4 top-4`, image: "DoneIcon", width: "24", height: "24" })) : null;
+        return isActive ? (jsx(ImgInner, { className: `h-6 w-6 min-w-6 min-h-6 absolute right-4 top-4`, image: { icon: 'DoneIcon' }, width: "24", height: "24" })) : null;
     }
 
     const InsuranceAmountBlock = JSX(({ className = '', title, insuranceTabs = [], button, ...rest }) => {
@@ -2658,7 +2694,7 @@
         double: 'flex gap-x-5 gap-y-[26px] flex-wrap',
         single: 'flex gap-3.5 flex-col',
     };
-    const LinkDocs = JSX(({ className = '', title, description, align = 'center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-12 bg-white ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, align: align, headlineVersion: "M", as: "h2", ...rest }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] })));
+    const LinkDocs = JSX(({ className = '', title, description, align = 'text-center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-12 bg-white ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, align: align, headlineVersion: "M", as: "h2", ...rest }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] })));
 
     const MiniGallery = JSX((props) => (jsx(GalleryInner, { ...props, version: "mini" })));
 
@@ -3169,7 +3205,7 @@
         return `w-12 h-12 min-w-12 rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
     }
 
-    const PictureText = JSX(({ className = '', title, description, image, benefits, version = 'primary', sum, monthLimit, directionRight = false, ...rest }) => (jsxs(BlockWrapper, { className: `relative font-sans py-12 px-24 ${VersionStyleMap[version]} ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, align: "center", ...rest }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src ? jsx(ImgInner, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(Number(sum), Number(monthLimit))] })] })] })));
+    const PictureText = JSX(({ className = '', title, description, image, benefits, version = 'primary', sum, monthLimit, directionRight = false, ...rest }) => (jsxs(BlockWrapper, { className: `relative font-sans py-12 px-24 ${VersionStyleMap[version]} ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, ...rest }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src ? jsx(ImgInner, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(Number(sum), Number(monthLimit))] })] })] })));
     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(sum) > 0 ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null, Number(monthLimit) > 0
@@ -3228,7 +3264,7 @@
     const ProductBlockInner = JSX(({ className = '', title, headlineVersion = 'L', description, benefitsCountOfRow = 3, benefits, benefitsVersion, buttons, footnote, image, items, version = 'primary', isDotted = true, textBlockClassName = '', ...rest }) => {
         const benefitsCount = benefits?.filter((_) => _.label)?.length;
         const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCountOfRow);
-        return (jsxs("div", { className: `flex grow justify-between items-stretch h-full ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion, align: "left", ...rest }), jsxs("div", { className: "flex flex-col justify-between h-full", children: [jsxs(BaseTile, { buttons: buttons?.length ? (jsx(ButtonSection, { buttons: buttons, className: "flex gap-4", ...rest })) : null, children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits.map(renderBenefit$1(version, benefitsVersion)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] }), footnote ? jsx("p", { className: "text-m-light pt-12", children: footnote }) : null] })] }), image?.src && jsx(ImgInner, { className: "mt-[-50px]", image: image })] }));
+        return (jsxs("div", { className: `flex grow justify-between items-stretch h-full ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion, align: "text-left", ...rest }), jsxs("div", { className: "flex flex-col justify-between h-full", children: [jsxs(BaseTile, { buttons: buttons?.length ? (jsx(ButtonSection, { buttons: buttons, className: "flex gap-4", ...rest })) : null, children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits.map(renderBenefit$1(version, benefitsVersion)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] }), footnote ? jsx("p", { className: "text-m-light pt-12", children: footnote }) : null] })] }), image?.src && jsx(ImgInner, { className: "mt-[-50px]", image: image })] }));
     });
     const getBenefitsContainerStyles = (benefitsCountOfRow = 2) => `gap-6 mt-6 ${benefitsCountOfRow > 2
     ? 'inline-grid grid-cols-[auto_auto_auto]'
@@ -3306,9 +3342,9 @@
         return (jsx("div", { className: `mt-2.5 z-10 ${descriptionWidth}`, children: jsx(Paragraph, { size: "text-m", font: "font-light", color: DESCRIPTION_STYLE_MAP[version], children: additionalDescription }) }));
     }
 
-    const MarkdownText = JSX((props) => {
-        const { md = '' } = props;
-        return jsx("div", { className: "md-container", dangerouslySetInnerHTML: { __html: md } });
+    const RichText = JSX((props) => {
+        const { __html = '' } = props;
+        return jsx("div", { className: "md-container", dangerouslySetInnerHTML: { __html } });
     });
 
     function assertUnreachable(x) {
@@ -3324,7 +3360,7 @@
     // eslint-disable-next-line consistent-return
     (benefit, i) => {
         const { type } = benefit;
-        if (!(type === 'default' || type === 'md')) {
+        if (!(type === 'default' || type === 'rte')) {
             return null;
         }
         switch (type) {
@@ -3333,8 +3369,8 @@
                     jsx(Text, { size: "text-h6", children: benefit.label }, `label-${i}`),
                     jsx(Text, { size: "text-m-light", color: LABEL_STYLE_MAP[version], children: benefit.description }, `desc-${i}`),
                 ];
-            case 'md':
-                return jsx(MarkdownText, { md: benefit.md });
+            case 'rte':
+                return jsx(RichText, { __html: benefit.__html });
             default:
                 assertUnreachable(benefit);
         }
@@ -3348,7 +3384,7 @@
     }
 
     const ProductTile = JSX(({ className = '', title, headlineVersion = 'S', description, additionalDescription, benefits = [], buttons, image, isImageOnRightSide = true, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `overflow-hidden font-sans p-9 box-border relative min-h-[364px]
-          ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${className}`, ...rest, children: [jsxs("div", { className: `flex flex-col ${isImageOnRightSide ? '' : 'items-end'}`, children: [jsx(Headline, { className: `!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`, as: "h2", title: title, description: description, headlineVersion: headlineVersion, bgColorHeadline: version, align: "left", ...rest }), renderBenefits(benefits, version, image), renderAdditionalDescription(additionalDescription, image), buttons?.length ? (jsx(ButtonSection, { buttons: buttons, className: "mt-5 gap-4 z-10 text-l" })) : null] }), renderImage$1(image, isImageOnRightSide)] })));
+          ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${className}`, ...rest, children: [jsxs("div", { className: `flex flex-col ${isImageOnRightSide ? '' : 'items-end'}`, children: [jsx(Headline, { className: `!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`, as: "h2", title: title, description: description, headlineVersion: headlineVersion, bgColorHeadline: version, align: "text-left", ...rest }), renderBenefits(benefits, version, image), renderAdditionalDescription(additionalDescription, image), buttons?.length ? (jsx(ButtonSection, { buttons: buttons, className: "mt-5 gap-4 z-10 text-l" })) : null] }), renderImage$1(image, isImageOnRightSide)] })));
     function renderBenefits(benefits, version, image) {
         if (!benefits.length) {
             return null;
@@ -3359,7 +3395,7 @@
         ${benefitsWidth}`, children: benefits.length ? benefits.map(renderBenefit(version)) : null }));
     }
 
-    const PromoTile = JSX(({ className = '', title = 'Акции и спецпредложения', date, description, buttons = [], version = 'primary', ...rest }) => (jsx(BlockWrapper, { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsx(BaseTile, { title: title ? (jsx(Headline, { title: title, className: `!p-0 max-w-[600px]`, headlineVersion: getTileHeadingType(className), bgColorHeadline: version, align: "left", as: "h2", ...rest })) : null, buttons: buttons?.length ? jsx(ButtonSection, { buttons: buttons, className: "flex gap-3" }) : null, children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-s mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) }) })));
+    const PromoTile = JSX(({ className = '', title = 'Акции и спецпредложения', date, description, buttons = [], version = 'primary', ...rest }) => (jsx(BlockWrapper, { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsx(BaseTile, { title: title ? (jsx(Headline, { title: title, className: `!p-0 max-w-[600px]`, headlineVersion: getTileHeadingType(className), bgColorHeadline: version, align: "text-left", as: "h2", ...rest })) : null, buttons: buttons?.length ? jsx(ButtonSection, { buttons: buttons, className: "flex gap-3" }) : null, children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-s mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) }) })));
     function formatDate(date) {
         const dateObj = new Date(date);
         const dateFormat = {
@@ -3370,15 +3406,6 @@
         return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
     }
 
-    const CarouselRecommendationCard = JSX(({ button, className = '', description, image, items = [], socialMedia = [], title, version = 'primary', ...rest }) => {
-        const tileTitle = title ? (jsx(Heading, { headingType: "h5", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
-        const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
-        return (jsx(BlockWrapper, { className: `relative text-left border border-solid box-border p-7 min-w-[524px]
-        ${BorderVersionStyleMap[version]}
-        ${VersionStyleMap[version]}
-        ${className}`, ...rest, children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? jsx("span", { className: "mb-2", children: description }) : null, items.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items, version: version })) : null, socialMedia.length ? (jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia, version: version })) : null, button?.text ? jsx("div", { className: "pt-2 mt-16", children: renderButton({ button }) }) : null] }) }) }));
-    });
-
     const RecommendationCard = JSX(({ className = '', title, description, items, image, version, socialMedia, button }) => {
         const tileTitle = title ? (jsx(Heading, { headingType: "h5", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
         const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
@@ -3402,6 +3429,11 @@
                         })] }), 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 RichTextBlock = JSX((props) => {
+        const { __html, ...rest } = props;
+        return (jsx(BlockWrapper, { ...rest, children: jsx(RichText, { __html: __html }) }));
+    });
+
     const RollupItem = JSX(({ className = '', label = 'Развернуть', isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => (jsx("div", { className: `border-b border-solid border-main-divider w-full ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx("div", { className: "box-border", children: jsx(FoldableSection, { className: `grid grid-cols-12 gap-1 border-box`, isUnfolded: isUnfolded, children: renderChildren(rest) }) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle, label, version }) }) })));
     RollupItem.childrenTypes = {
         exclude: [
@@ -3799,7 +3831,7 @@
         const toggleTables = useCallback((key) => setHiddenTables((oldState) => ({ ...oldState, [key]: !oldState[key] })), []);
         return (jsx("div", { children: items.map((_, tableIdx) => {
                 const key = `activeTabIdx:${activeTabIndex}-tableIdx:${tableIdx}`;
-                return (jsxs("div", { className: "w-full", children: [jsxs("div", { className: "flex p-4 bg-main-stroke text-xl-light text-center justify-center cursor-pointer relative", onClick: () => toggleTables(key), children: [_.title, jsx(ImgInner, { image: hiddenTables[key] ? 'PlusIcon' : 'MinusIcon', className: "absolute right-[22px]", width: "24", height: "24" })] }), jsx("div", { className: `w-full pl-2 overflow-hidden transition-height duration-500 ease-in-out ${hiddenTables[key] ? 'h-0' : ''}`, children: jsx("div", { className: "relative", children: jsx(InnerTableBodyItem, { rows: _.rowsData }) }) })] }, key));
+                return (jsxs("div", { className: "w-full", children: [jsxs("div", { className: "flex p-4 bg-main-stroke text-xl-light text-center justify-center cursor-pointer relative", onClick: () => toggleTables(key), children: [_.title, jsx(ImgInner, { image: { icon: hiddenTables[key] ? 'PlusIcon' : 'MinusIcon' }, className: "absolute right-[22px]", width: "24", height: "24" })] }), jsx("div", { className: `w-full pl-2 overflow-hidden transition-height duration-500 ease-in-out ${hiddenTables[key] ? 'h-0' : ''}`, children: jsx("div", { className: "relative", children: jsx(InnerTableBodyItem, { rows: _.rowsData }) }) })] }, key));
             }) }));
     });
 
@@ -3902,29 +3934,15 @@
         center: 'items-center',
         right: 'items-end',
     };
-    const gapStyleMap = {
-        XXL: 'gap-12',
-        XL: 'gap-10',
-        L: 'gap-8',
-        M: 'gap-4',
-        S: 'gap-2',
-        XS: 'gap-1',
-        '': '',
-    };
-    const backgroundStyleMap = {
-        transparent: '',
-        primary: 'bg-white',
-        secondary: 'bg-primary-main',
-    };
     const VerticalLayout = JSX(({ className = '', gap = '', align, isPadding = false, isInnerPadding = true, version = 'transparent', options, ...rest }) => {
         const paddingStyle = isPadding ? 'p-12' : '';
         const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
         return (jsx(BlockWrapper, { className: [
                 'flex flex-col [&>*]:max-w-full',
                 paddingStyle,
-                gapStyleMap[gap],
+                GapStyleMap[gap],
                 align && alignStyle[align],
-                backgroundStyleMap[version],
+                LayoutBackgroundStyleMap[version],
                 className,
             ]
                 .filter(Boolean)
@@ -3946,12 +3964,12 @@
         Accordion,
         AccordionItem,
         BenefitsBlock,
-        BusinessBlock,
-        ButtonBlock,
         Bonus,
         BonusBenefitsBlock,
-        CardTransfer,
+        BusinessBlock,
+        ButtonBlock,
         Calculator,
+        CardTransfer,
         Carousel,
         CarouselCard,
         CarouselCatalogCard,
@@ -3959,10 +3977,11 @@
         CarouselLinks,
         CarouselProductCard,
         CarouselProgramsCard,
+        CarouselRecommendationCard,
         CarouselTariffsCard,
         Catalog,
-        ContactsBlock,
         ComparisonTable,
+        ContactsBlock,
         ErrorBlock,
         ExchangeRateTile,
         Footer,
@@ -3970,12 +3989,17 @@
         GracePeriod,
         Header,
         Headline,
+        HorizontalLayout,
         ImgBlock,
         InsuranceAmountBlock,
         InvestmentInfo,
         LinkDocs,
         MiniGallery,
         MobileAppTile,
+        OfficeMap,
+        OfficeServicesBlock,
+        OtherProducts,
+        OtherProductsItem,
         ParagraphBlock,
         PictureText,
         Placeholder,
@@ -3983,10 +4007,8 @@
         ProductGallery,
         ProductTile,
         PromoTile,
-        OfficeServicesBlock,
-        OtherProducts,
-        OtherProductsItem,
-        CarouselRecommendationCard,
+        Recommendation,
+        RichTextBlock,
         RollupItem,
         SafeDepositRental,
         StepsBlock,
@@ -3996,8 +4018,6 @@
         Tile,
         VerticalLayout,
         Video,
-        Recommendation,
-        OfficeMap,
     };
 
     const debounce = (fn, delay = 600) => {
@@ -4125,7 +4145,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.6.45";
+    const packageVersion = "0.6.47";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;