@redneckz/wildless-cms-uni-blocks 0.8.15 → 0.8.17

package/bundle/bundle.umd.js

@@ -80,6 +80,9 @@
         get FOOTER() {
             return this._.FOOTER;
         }
+        get CHAT_BOT() {
+            return this._.CHAT_BOT;
+        }
         get CDN() {
             return appendSlash(this._.CDN);
         }
@@ -245,7 +248,7 @@
     const DEFAULT_ANCESTORS = [];
     const defaultStyle = 'col-span-12';
     function renderBlock(block, options) {
-        const { key, blockDecorator = defaultBlockDecorator, blocksRegistry = {}, ancestors = DEFAULT_ANCESTORS, className = '', } = options;
+        const { key, blockDecorator = defaultBlockDecorator, blocksRegistry = {}, ancestors = DEFAULT_ANCESTORS, className = '', extraProps = {}, } = options;
         const { type } = block;
         if (!(type && type in blocksRegistry)) {
             console.warn(`No block with "${type}" is registered`);
@@ -259,13 +262,13 @@
             // Adjusted by decorator block and blockClassName
             render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
                 const { content } = adjustedBlock;
-                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, block: block, options: options, ...content }, key)) : null;
+                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, block: block, options: options, ...content, ...extraProps }, key)) : null;
             },
         }, key);
     }
 
     const EMPTY_ANCESTORS = [];
-    const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, renderChild = renderBlock, ...options }) => (blocks || []).map((_, j) => renderChild(_, {
+    const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, renderProps = renderBlock, ...options }) => (blocks || []).map((_, j) => renderProps(_, {
         ...options,
         key: `${key ? key : _.type}-${j}`,
         ancestors: options.parent
@@ -273,12 +276,12 @@
             : ancestors,
     }));
 
-    function renderChildren({ children, block, options, renderChild, }) {
+    function renderChildren({ children, block, options, renderProps, }) {
         if (children) {
             return children;
         }
         return block && options
-            ? renderBlocksList(block.blocks, { ...options, parent: block, renderChild })
+            ? renderBlocksList(block.blocks, { ...options, parent: block, renderProps })
             : null;
     }
 
@@ -483,9 +486,9 @@
                     ? image.sources
                         .filter((_) => _?.src)
                         .sort(sourcesComparator)
-                        .map(({ src, format, media }, index) => (jsx("source", { srcSet: adjustSrcset(router, pathPrefix)(src), type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...image.size }, `${index}_${src}`)))
+                        .map(({ src, format, media }, index) => (jsx("source", { srcSet: adjustSrc(router, pathPrefix)(src), type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...image.size }, `${index}_${src}`)))
                     : null, image?.src
-                    ? renderImg({ ...image, src: adjustSrcset(router, pathPrefix)(image.src) }, imageClassName, isMobile)
+                    ? renderImg({ ...image, src: adjustSrc(router, pathPrefix)(image.src) }, imageClassName, isMobile)
                     : null] }));
     });
     const renderImg = (image, imageClassName = '', isMobile = false) => {
@@ -498,13 +501,7 @@
         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 adjustSrcset = (router, pathPrefix) => (srcset) => srcset
-        ?.split(/\s*,\s*/)
-        .map((src) => src.trim())
-        .filter(Boolean)
-        .map((src) => (isURL(src) ? src : joinPath(pathPrefix, src)))
-        .map(adjustHref(router))
-        .join(', ');
+    const adjustSrc = (router, pathPrefix) => (src) => src && !isURL(src) ? adjustHref(router)(joinPath(pathPrefix, src)) : src;
     const formatToMimeType = (format) => format ? `image/${String(format)}` : undefined;
 
     const ImgInner = JSX(({ className = '', image, imageClassName = '', isMobile, pathPrefix, ...iconProps }) => {
@@ -658,7 +655,7 @@
         handlerDecorator._impl = impl;
     };
 
-    function useLink(isRemote) {
+    function useLink(isRemote = false) {
         const router = useRouter();
         return (props) => ({
             ...props,
@@ -1095,9 +1092,9 @@
     const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 flex flex-col items-center ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep$1) })) : null] })));
     const renderStep$1 = (benefit, i) => {
         const description = benefit.description;
-        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: "w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black", image: benefit.icon, asSVG: true })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? jsx(Heading, { headingType: "h6", children: benefit.label }) : null, renderDescription$5(description)] })] }, String(i)));
+        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: "w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black", image: benefit.icon, asSVG: true })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? jsx(Heading, { headingType: "h6", children: benefit.label }) : null, renderDescription$4(description)] })] }, String(i)));
     };
-    const renderDescription$5 = (description) => {
+    const renderDescription$4 = (description) => {
         const benefitType = description?.benefitType || null;
         return description && benefitType ? (jsx("div", { className: "mt-2 text-l-light text-secondary-text group-data-secondary:text-white/80", children: benefitType === 'list'
                 ? renderListBenefit(description)
@@ -1912,7 +1909,7 @@
     const renderBlur = (isBlur, scroll) => (scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (jsxs("div", { children: [jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white') }), jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white') })] })) : null;
 
     const ITEMS_GAP = 4;
-    const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, arrowsPadded = true, isPadding = true, ...rest }) => {
+    const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, arrowsPadded = true, isPadding = true, options, ...rest }) => {
         const { blocks: childBlocks } = rest.block || {};
         const count = itemCount || childBlocks?.length || 0;
         const [activeIndex, setActiveIndex] = useState(Math.floor((visibleItemCount || 0) / 2));
@@ -1926,9 +1923,15 @@
         return (jsx(BlockWrapper, { className: style(getPaddingStyle(isPadding), className), ...rest, children: jsxs("div", { className: "relative max-w-full", children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: isBankHistoryCarousel
                             ? renderChildren({
                                 ...rest,
-                                block: { ...rest.block, blocks: buildBlocks(childBlocks, activeIndex) },
+                                options: {
+                                    ...options,
+                                    extraProps: {
+                                        blocksLength: childBlocks?.length,
+                                        activeIndex: activeIndex,
+                                    },
+                                },
                             })
-                            : renderChildren(rest) }), jsx(CarouselScrollButtons, { scroll: scroll, isBlur: isBlur, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count })] }) }));
+                            : renderChildren({ ...rest, options }) }), jsx(CarouselScrollButtons, { scroll: scroll, isBlur: isBlur, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count })] }) }));
     });
     Carousel.childrenTypes = [
         'CarouselCard',
@@ -1940,25 +1943,13 @@
         'CarouselRecommendationCard',
         'CarouselTariffsCard',
         'CarouselInvestmentCard',
+        'CarouselEventCard',
     ];
-    const buildBlocks = (blocks, activeIndex) => {
-        return blocks && blocks[0]?.type === 'CarouselBankHistoryCard'
-            ? blocks.map((_, i) => {
-                return {
-                    ..._,
-                    content: {
-                        ..._.content,
-                        orderNumber: i,
-                        isActive: activeIndex === i,
-                        blocksLength: blocks.length,
-                    },
-                };
-            })
-            : blocks;
-    };
     const getPaddingStyle = (isPadding) => (isPadding ? 'p-12' : '');
 
-    const CarouselBankHistoryCard = JSX(({ title, description, isActive, orderNumber = 0, blocksLength = 0 }) => {
+    const CarouselBankHistoryCard = JSX(({ title, description, blocksLength = 0, activeIndex, options, ...rest }) => {
+        const orderNumber = Number(options?.key?.split('-').slice(-1)[0]) || 0;
+        const isActive = orderNumber === activeIndex;
         return (jsx(BlockWrapper, { className: "flex h-[485px]", children: isActive ? (jsx("div", { className: "relative flex items-center w-full", children: jsx(Headline, { headlineVersion: "S", title: title, description: description, align: "text-left", className: style('absolute z-10 h-[385px] w-[440px] text-white shadow-dark-blue', getActiveBlockPosition(orderNumber, blocksLength), getBackgroundColor(orderNumber)) }) })) : (jsx("div", { className: "flex w-full items-center justify-center", children: jsx("div", { className: style('flex justify-center items-center h-[300px] w-[340px] font-mohave text-title-large tracking-[-0.03em]', getBackgroundColor(orderNumber)), children: jsx("span", { className: getTextColor(orderNumber), children: title }) }) })) }));
     });
     const getBackgroundColor = (orderNumber) => {
@@ -2000,16 +1991,23 @@
     const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full';
     const CARD_WIDTH_MAP = {
         normal: 'min-w-[970px]',
-        mini: 'min-w-[355px]',
+        small: 'min-w-[355px]',
     };
     const CarouselCard = JSX(({ className = '', button, description, title, carouselVersion = 'normal' }) => (jsx("section", { className: `flex pb-9 pl-12 border-box h-full ${CARD_WIDTH_MAP[carouselVersion]} ${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 h-full bg-white z-10 p-10 border border-solid border-green-light", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "L", align: "text-left" }), renderButtonsSection([button], { className: 'mt-14' })] })] }) })));
 
-    const cardStyleMap$2 = {
+    const cardStyleMap = {
         black: 'bg-black',
         white: 'bg-white',
     };
-    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: `border box-border border-gray p-7 min-w-[392px] h-full flex flex-col justify-left ${className}`, ...rest, 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: "mb-4", children: jsx(Paragraph, { size: "text-m", align: "text-left", font: "font-light", children: description }) })) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-s-light text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: jsx(Text, { children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }) }), colors.map(renderColorOption$1)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })] })));
-    const renderColorOption$1 = (color, i) => (jsx("span", { className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap$2[color]}` }, String(i)));
+    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: `border box-border border-gray p-7 min-w-[392px] h-full flex flex-col justify-left ${className}`, ...rest, 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: "mb-4", children: jsx(Paragraph, { size: "text-m", align: "text-left", font: "font-light", children: description }) })) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-s-light text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: jsx(Text, { children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })] })));
+    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 getIconWithVersion = (icon, version = 'primary') => ({
+        ...icon,
+        iconVersion: icon?.iconVersion ?? (version === 'secondary' ? 'white' : 'color'),
+    });
+
+    const CarouselEventCard = JSX(({ className = '', icon, title, description, href, target, ...rest }) => (jsx(BlockWrapper, { className: style('flex flex-col w-[365px]', className), ...rest, children: jsxs("a", { href: href, target: target, role: "link", children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-2", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Text, { font: "font-light", size: "text-s", color: "text-secondary-text", children: description }) })) : null] }) })));
 
     const BaseTile = JSX(({ className = '', title = '', buttons, image, children }) => (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] })] })));
 
@@ -2075,18 +2073,13 @@
     const List = JSX(({ className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: `text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text ${TEXT_SIZE_MAP[listItemSize]} ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''} ${className}`, role: "list", children: items.map((item, i) => (jsx(ListItem, { className: `${itemClassName} mb-1.5`, isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
 
     const CarouselProductCard = JSX(({ className = '', title, headlineSmallVersion = 'H6', description, additionalDescription, icon, items = [], button = {}, version = 'primary', isDotted = true, align = 'text-center', ...rest }) => {
-        return (jsxs(BlockWrapper, { className: style('flex flex-col justify-between items-stretch min-w-[260px] h-full w-full p-6', 'box-border border-solid border border-gray', align, className), version: version, ...rest, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$4(icon), renderCardTitle$1(headlineSmallVersion, title), renderDescription$4(description, title), renderItems$1(items, isDotted, version), renderAdditionalDescription$2(additionalDescription)] }), renderButtonsSection([button], { buttonClassName: 'mt-6 w-full' })] }));
-    });
-    const renderImage$4 = (image) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`, image: image, asSVG: true })) : null] }));
-    const renderCardTitle$1 = (headlineSmallVersion, title) => title ? jsx(Text, { size: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
-    const renderDescription$4 = (description, title) => description ? (jsx("div", { className: title ? 'mt-2' : '', children: jsx(Paragraph, { size: "text-l", children: description }) })) : null;
-    const renderAdditionalDescription$2 = (additionalDescription) => additionalDescription ? (jsx("div", { className: "mt-auto", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", children: additionalDescription }) })) : null;
-    const renderItems$1 = (items, isDotted, version = 'primary') => items?.length ? (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 })) : null;
-
-    const getIconWithVersion = (icon, version = 'primary') => ({
-        ...icon,
-        iconVersion: icon?.iconVersion ?? (version === 'secondary' ? 'white' : 'color'),
+        return (jsxs(BlockWrapper, { className: style('flex flex-col justify-between items-stretch min-w-[260px] h-full w-full p-6', 'box-border border-solid border border-gray', align, className), version: version, ...rest, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$3(icon), renderCardTitle(headlineSmallVersion, title), renderDescription$3(description, title), renderItems(items, isDotted, version), renderAdditionalDescription$1(additionalDescription)] }), renderButtonsSection([button], { buttonClassName: 'mt-6 w-full' })] }));
     });
+    const renderImage$3 = (image) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`, image: image, asSVG: true })) : null] }));
+    const renderCardTitle = (headlineSmallVersion, title) => title ? jsx(Text, { size: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
+    const renderDescription$3 = (description, title) => description ? (jsx("div", { className: title ? 'mt-2' : '', children: jsx(Paragraph, { size: "text-l", children: description }) })) : null;
+    const renderAdditionalDescription$1 = (additionalDescription) => additionalDescription ? (jsx("div", { className: "mt-auto", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", children: additionalDescription }) })) : null;
+    const renderItems = (items, isDotted, version = 'primary') => items?.length ? (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 })) : null;
 
     const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], ...rest }) => (jsxs(BlockWrapper, { className: `border border-gray flex min-w-[536px] ${className}`, ...rest, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", 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$1) }) : null] })] })));
     const renderList$1 = (_, 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)));
@@ -2094,32 +2087,32 @@
     const ICONS_MAP = [
         {
             origins: ['t.me', 'telegram.org'],
-            icon: { icon: 'TelegramIcon' },
+            iconMapped: { icon: 'TelegramIcon' },
             label: 'Телеграм',
         },
         {
             origins: ['vk.com'],
-            icon: { icon: 'VKIcon' },
+            iconMapped: { icon: 'VKIcon' },
             label: 'ВКонтакте',
         },
         {
             origins: ['ok.ru'],
-            icon: { icon: 'OkIcon' },
+            iconMapped: { icon: 'OkIcon' },
             label: 'Одноклассники',
         },
         {
             origins: ['apps.apple.com'],
-            icon: { icon: 'AppleIcon' },
+            iconMapped: { icon: 'AppleIcon' },
             label: 'App Store',
         },
         {
             origins: ['play.google.com'],
-            icon: { icon: 'PlayMarketIcon' },
+            iconMapped: { icon: 'PlayMarketIcon' },
             label: 'Google Play',
         },
         {
             origins: ['youtube.com'],
-            icon: { icon: 'YoutubeIcon' },
+            iconMapped: { icon: 'YoutubeIcon' },
             label: 'Youtube',
         },
     ];
@@ -2127,20 +2120,23 @@
         default: 'w-14 h-14',
         small: 'w-12 h-12',
     };
-    const MediaButton = JSX(({ iconVersion = 'color', buttonSize = 'default', rounded = false, ...rest }) => {
+    const MediaButton = JSX(({ iconVersion = 'color', buttonSize = 'default', rounded = false, icon, ...rest }) => {
         const { href, version } = rest;
-        const { icon, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
-        const iconWithVersion = icon ? { ...getIconWithVersion(icon), iconVersion } : null;
+        const { iconMapped, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+        const iconCustom = icon ?? iconMapped;
+        const iconWithVersion = iconCustom
+            ? { ...getIconWithVersion(iconCustom), iconVersion }
+            : undefined;
         return (jsx(Button, { className: style('group/media flex items-center justify-center box-border', buttonSizeStyles[buttonSize], rounded ? 'rounded-full' : 'rounded-md', 'border border-solid hover:border-transparent', 'group-data-primary:border-main-divider', 'hover:bg-primary-main hover:text-black', 'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover', 'group-data-gray:border-green', buttonSizeStyles[buttonSize]), "aria-label": label, target: "_blank", rel: "noopener noreferrer", version: version, ...rest, children: iconWithVersion ? (jsx(ImgInner, { image: iconWithVersion, imageClassName: "group-hover/media:text-white", width: "24", height: "24", asSVG: true })) : null }));
     });
 
     const SocialMedia = JSX(({ className = '', media, children, buttonSize }) => (jsxs("div", { className: "font-sans", children: [jsx("div", { className: `flex gap-2.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { buttonSize: buttonSize, version: _.version, ..._ }, String(index)))) }), jsx(Text, { size: "text-s-light", color: "text-secondary-text", children: children })] })));
 
-    const CarouselRecommendationCard = JSX(({ button, className = '', description, image, items = [], socialMedia = [], title, version = 'primary', ...rest }) => {
+    const CarouselRecommendationCard = JSX(({ 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;
         const BORDER_STYLE = 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
-        return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] h-full text-left box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...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 group-data-gray:text-secondary-text group-data-gray:max-w-[265px]", children: description })) : null, items.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia }) : null, renderButtonsSection([button], { className: 'pt-2 mt-16' })] }) }) }));
+        return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] h-full text-left box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...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 group-data-gray:text-secondary-text group-data-gray:max-w-[265px]", children: description })) : null, items.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia }) : null] }) }) }));
     });
 
     const VISIBLE_CELLS_COUNT = 1;
@@ -2156,28 +2152,6 @@
     const renderCardInfo = (cell, i) => (jsxs("div", { className: "py-5 border-b border-main-divider", children: [cell?.title ? (jsx("div", { className: "text-secondary-text text-m-light opacity-80", children: cell.title })) : null, cell?.description ? (jsx("div", { className: "text-primary-text text-h6 mt-1", children: cell.description })) : null] }, String(i)));
     const renderHitIcon = () => (jsxs("div", { className: "absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "23", height: "22", asSVG: true }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: "\u0425\u0418\u0422" })] }));
 
-    const cardStyleMap$1 = {
-        black: 'bg-black',
-        white: 'bg-white',
-    };
-    const CatalogCard = JSX(({ className = '', title, description, image, price, button, colors }) => (jsxs("section", { className: `border border-solid box-border border-gray p-[30px] min-w-[402px] flex flex-col justify-left ${className}`, role: "listitem", children: [image?.src ? jsx(ImgInner, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? jsx("div", { className: "text-m-light text-left mb-4", children: description }) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-s-light text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }), colors.map(renderColorOption)] })) : null, price ? jsxs("div", { className: "text-h3 text-left", children: [price, "\u00A0\u20BD"] }) : null, renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })] })));
-    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_VIEW_COUNT$1 = 3;
-    const CARD_SHIFT$1 = 430;
-    const Catalog = JSX(({ cards = [], className = '', title, description, ...rest }) => {
-        const [activeIndex, controls] = useCarouselControls({
-            itemCount: cards?.length,
-            visibleItemCount: CARD_VIEW_COUNT$1,
-        });
-        return (jsxs(BlockWrapper, { className: `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',
-                }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} left-0 bg-opacity-from-white` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} right-0 bg-opacity-to-white` })] }));
-    });
-
     const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
     const BORDER_CLASSES = 'border-gray border-solid border';
     const DIVIDER_CLASSES$1 = 'border-main-divider border border-t-0 border-x-0';
@@ -2452,7 +2426,7 @@
         'bg-white': 'text-primary-main',
         transparent: 'text-white',
     };
-    const renderImage$3 = (bgColor, image, size) => {
+    const renderImage$2 = (bgColor, image, size) => {
         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],
@@ -2468,7 +2442,7 @@
     };
 
     const Logo = JSX(({ className = '', href, logo, children = logo?.title, targetBlank, bgColor = 'bg-white', showTitle = true, }) => {
-        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$3(bgColor, logo?.image, { width: '40', height: '45' }), showTitle ? renderTitle$3(children || logo?.title, bgColor) : null] }));
+        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$2(bgColor, logo?.image, { width: '40', height: '45' }), showTitle ? renderTitle$3(children || logo?.title, bgColor) : null] }));
     });
 
     const useSearch = () => {
@@ -2554,50 +2528,6 @@
         return (jsxs(BlockWrapper, { tag: "footer", className: `p-9 ${className}`, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD, logo: logo }), jsx(SearchBar$1, { className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, hasButton: true }), jsx(SocialMedia, { media: socialMedia, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "pt-[3px]", fallback: fallback })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
     });
 
-    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 GalleryCardInner = JSX(({ title, headlineSmallVersion = 'H6', description, additionalDescription, icon, items, button, isFullWidth = true, isDotted = true, align = 'center', ...rest }) => (jsxs(BlockWrapper, { className: `h-full flex flex-col justify-between ${AlignText[align]}`, tag: "div", ...rest, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$2(icon), renderCardTitle(headlineSmallVersion, title), renderDescription$3(description, title), items?.length ? renderItems(items, isDotted) : null, renderAdditionalDescription$1(additionalDescription)] }), renderButtonsSection([button], {
-                buttonClassName: `mt-6 ${isFullWidth ? 'w-full' : 'self-center'}`,
-            })] })));
-    const renderImage$2 = (image) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-8 h-8 min-w-8 mb-5 rounded-full`, image: getIconWithVersion(image), asSVG: true })) : null] }));
-    const renderCardTitle = (headlineSmallVersion, title) => title ? jsx("div", { className: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
-    const renderDescription$3 = (description, title) => description ? jsx("div", { className: `text-l ${title ? 'mt-2' : ''}`, children: description }) : null;
-    const renderAdditionalDescription$1 = (additionalDescription) => additionalDescription ? (jsx("div", { className: `text-m-light mt-auto group-data-primary:text-secondary-text`, children: additionalDescription })) : null;
-    const renderItems = (items, isDotted) => (jsx(List, { className: "max-w-[308px] mt-2 text-s group-data-primary:text-secondary-text", itemClassName: "text-left", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted }));
-
-    const GalleryContainer = JSX(({ headlineVersion = 'M', cards = [], galleryVersion = 'normal', activeIndex, title, description, }) => (jsxs("div", { children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: headlineVersion }), jsx("div", { className: `flex mt-8 ${cards?.length <= galleryLengthForScrollMap[galleryVersion] ? 'justify-center' : ''} duration-1000`, style: { transform: `translateX(-${activeIndex * cardWidthMap[galleryVersion]}px)` }, role: "list", children: cards?.map((card, i) => renderCard({ card, galleryVersion }, i)) })] })));
-    function renderCard({ card, galleryVersion }, i) {
-        return (jsx("section", { className: `box-border border-solid border border-gray p-6 mx-2 flex flex-col justify-between
-        items-stretch ${cardStyleMap[galleryVersion]} ${blockStyles[card.version ?? 'primary'] // TODO Replace with direct BlockWrapper usage
-        } w-full col-span-4`, role: "listitem", children: jsx(GalleryCardInner, { ...card }) }, String(i)));
-    }
-
-    const GalleryInner = JSX(({ cards = [], className = '', galleryVersion = 'normal', button, ...rest }) => {
-        const [activeIndex, controls] = useCarouselControls({
-            itemCount: cards?.length,
-            visibleItemCount: galleryLengthForScrollMap[galleryVersion],
-        });
-        const { isScrollAvailable } = controls;
-        return (jsxs(BlockWrapper, { className: `relative p-[42px] overflow-hidden flex flex-col ${className}`, ...rest, children: [jsx(GalleryContainer, { cards: cards, galleryVersion: galleryVersion, activeIndex: activeIndex, ...rest }), renderArrows({
-                    ...controls,
-                    btnClass: ['left-8', 'right-8'],
-                    className: 'top-1/2',
-                }), isScrollAvailable ? (jsxs("div", { children: [jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[82px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" })] })) : null, renderButtonsSection([button], { className: 'mt-8 mx-auto' })] }));
-    });
-
-    const Gallery = JSX((props) => (jsx(GalleryInner, { ...props, galleryVersion: "normal" })));
-
     const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-4", title: title, description: description, headlineVersion: "M" }), calendar ? renderCalendar(calendar) : null] })));
     const renderCalendar = (calendar) => {
         const colCount = calendar.reduce((accumulator, currentValue) => currentValue?.month?.length ? accumulator + currentValue.month.length : accumulator, 0) || 1;
@@ -2616,9 +2546,7 @@
 
     const isHrefActive = (router) => ({ href }) => withoutQuery(isURL(href) ? router.href : router.pathname).startsWith(withoutQuery(href));
 
-    const isTopItemActive = (router) => (topItem) => projectSettings.BASE_PATH
-        ? isHrefActive({ pathname: projectSettings.BASE_PATH })(topItem)
-        : topItem.items?.some(isHrefActive(router)) || isHrefActive(router)(topItem);
+    const isTopItemActive = (router) => isHrefActive(projectSettings.BASE_PATH ? { pathname: projectSettings.BASE_PATH } : router);
 
     const TopItem = JSX(({ className = '', active, flat, children, ...rest }) => {
         const link = useLink(true);
@@ -2798,11 +2726,11 @@
     });
     const renderChatBotButton = ({ className, iconVersion, onClick }) => (jsx(HeaderSecondaryMenuButton, { className: style(CHAT_BUTTON_EXTERNAL_NAME, className), image: { icon: 'HeadphonesIcon', iconVersion }, ariaLabel: "\u0427\u0430\u0442", onClick: onClick }));
 
-    const HeaderSecondaryMenu = JSX(({ version, className, officesLink, defaultLocation = 'Москва', foreignOffices, chat }) => {
+    const HeaderSecondaryMenu = JSX(({ version, className, officesLink, defaultLocation = 'Москва', foreignOffices }) => {
         const [isShowLocationModal, { setTrue: showLocationModal, setFalse: hideLocationModal }] = useBool();
         const [location, onChangeLocation] = useLocation(defaultLocation);
         const iconVersion = version === 'transparent' ? 'white' : 'black';
-        return (jsxs("div", { className: style('flex items-center', className), children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: location.name, onClick: showLocationModal }), officesLink ? (jsx(TopItem, { className: "mr-7", flat: true, href: officesLink, text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B" })) : null, chat ? (jsx(HeaderChatBotButton, { className: "mr-5", iconVersion: iconVersion, chat: chat })) : null, isShowLocationModal ? (jsx(Location, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation, close: hideLocationModal })) : null] }));
+        return (jsxs("div", { className: style('flex items-center', className), children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: location.name, onClick: showLocationModal }), officesLink ? (jsx(TopItem, { className: "mr-7", flat: true, href: officesLink, text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B" })) : null, projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { className: "mr-5", iconVersion: iconVersion, chat: projectSettings.CHAT_BOT })) : null, isShowLocationModal ? (jsx(Location, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation, close: hideLocationModal })) : null] }));
     });
 
     const findActiveSubItem = (router) => (items = []) => {
@@ -2867,11 +2795,11 @@
         'bg-white': 'primary',
         transparent: 'transparent',
     };
-    const Header = JSX(({ bgColor = 'bg-white', className, showSubMenu = true, version = BG_COLOR_TO_BLOCK_VERSION[bgColor], chat, ...rest }) => {
+    const Header = JSX(({ bgColor = 'bg-white', className, showSubMenu = true, version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
         const router = useRouter();
         const { topItems, logo, defaultLocation, foreignOffices, officesLink } = useSWRResource(projectSettings.SITEMAP || 'sitemap', rest.options?.page?.fallback);
         const activeTopItem = topItems?.find(isTopItemActive(router));
-        return (jsx(BlockWrapper, { tag: "header", className: style('pt-6 px-20', showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5', className), version: version, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ..._ }, String(i)))), jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", foreignOffices: foreignOffices, defaultLocation: defaultLocation, officesLink: officesLink, chat: chat })] }), jsx("div", { className: style('mt-6 h-px bg-main-divider', version === 'transparent' ? 'opacity-30' : '') }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items })) : null] }) }));
+        return (jsx(BlockWrapper, { tag: "header", className: style('pt-6 px-20', showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5', className), version: version, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ..._ }, String(i)))), jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", foreignOffices: foreignOffices, defaultLocation: defaultLocation, officesLink: officesLink })] }), jsx("div", { className: style('mt-6 h-px bg-main-divider', version === 'transparent' ? 'opacity-30' : '') }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items })) : null] }) }));
     });
 
     const gapStyles = {
@@ -3041,8 +2969,6 @@
     };
     const LinkDocs = JSX(({ className = '', title, description, align = 'text-center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => (jsxs(BlockWrapper, { className: style('p-12', className), ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, 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, galleryVersion: "mini" })));
-
     const getColSpan = (className) => {
         const colSpanPrefix = 'col-span-';
         const colSpanStr = className?.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
@@ -3590,18 +3516,17 @@
     const ProductBlockInner = JSX(({ className = '', title, headlineVersion = 'L', description, benefitsCountOfRow = 3, benefits, benefitsVersion, buttons, footnote, image, __html, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
         const benefitsCount = benefits?.filter((_) => _.label)?.length;
         const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCountOfRow);
-        return (jsxs("div", { className: style('flex grow justify-between items-stretch h-full', className), children: [jsxs("div", { className: style('flex flex-col', textBlockClassName), children: [jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left" }), jsxs("div", { className: "flex flex-col justify-between h-full", children: [jsxs(BaseTile, { buttons: renderButtonsSection(buttons), children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits.map(renderBenefit$1(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", 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: style('flex grow justify-between items-stretch h-full', className), children: [jsxs("div", { className: style('flex flex-col', textBlockClassName), children: [jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left" }), jsxs("div", { className: "flex flex-col justify-between h-full", children: [jsxs(BaseTile, { buttons: renderButtonsSection(buttons), children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits?.map(renderBenefit$1(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", 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]'
     : 'inline-grid grid-cols-[auto_auto]'}`;
 
     function renderBackwardButton(button, version, className) {
-        const { text, href, target, onClick } = button;
+        const { text, href, target } = button;
         const iconVersion = version === 'primary' ? 'white' : 'black';
         const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
-        // TODO Move click handler to Button
-        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: backwardIcon.iconVersion || iconVersion }, asSVG: true }) }), text ? jsx("span", { className: "text-m", children: text }) : null] }));
+        return (jsxs("div", { className: style('flex items-center', className), 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: backwardIcon.iconVersion || iconVersion }, asSVG: true }) }), text ? (jsx(Button, { version: "link", text: text, href: href, target: target, ariaLabel: text })) : null] }));
     }
 
     const breadcrumbStyle = 'text-secondary-text group-data-secondary:text-white/80';
@@ -3626,7 +3551,7 @@
                     })) })] }));
     });
     function renderProductBlock(block, i) {
-        return (jsx("section", { className: "box-border relative flex grow-0 shrink-0 basis-full", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { className: "pl-12 z-10 text-secondary-text group-data-secondary:text-white", textBlockClassName: "mb-[154px]", headlineVersion: "XXL", ...block }) }) }, String(i)));
+        return (jsx("section", { className: "box-border relative flex grow-0 shrink-0 basis-full", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { className: "pl-12 z-10 group-data-secondary:text-white", textBlockClassName: "mb-[154px]", headlineVersion: "XXL", ...block }) }) }, String(i)));
     }
     function renderNavButton({ slide, i, isActive, onClick }) {
         const btnClassName = isActive
@@ -4115,7 +4040,7 @@
             }
             setCurrentTab(selectedTab);
         }, []);
-        return (jsx(BlockWrapper, { className: `relative box-border flex gap-x-1 w-full ${isSticky ? 'sticky top-1 z-20 ' : ''} ${className}`, role: "tablist", ...rest, children: tabsMode === 'scrollable' ? (jsx(ScrollableTabs, { tabs: tabs, onClick: handleClick, currentTab: currentTab, showCounter: showCounter, ...rest })) : (tabs?.map(renderTab({
+        return (jsx(BlockWrapper, { className: `relative box-border flex gap-x-1 w-full ${isSticky ? 'sticky top-1 z-20' : ''} ${className}`, role: "tablist", ...rest, children: tabsMode === 'scrollable' ? (jsx(ScrollableTabs, { tabs: tabs, onClick: handleClick, currentTab: currentTab, showCounter: showCounter, ...rest })) : (tabs?.map(renderTab({
                 onClick: handleClick,
                 currentTab,
                 showCounter,
@@ -4330,11 +4255,12 @@
             }), image: image?.src ? jsx(ImgInner, { className: "mt-auto ml-7", image: image }) : null, children: [__html ? (jsx("div", { className: "max-w-[600px] mt-2.5", children: jsx(RichText, { __html: __html }) })) : null, children, jsx(List, { className: "mt-2.5", itemClassName: "mb-1.5", items: items, isDotted: isDotted, listItemSize: listItemSize }), tags?.length ? jsx(Tags, { tags: tags, className: "mt-5" }) : null] }) })));
 
     const alignStyle = {
+        stretch: 'items-stretch',
         left: 'items-start',
         center: 'items-center',
         right: 'items-end',
     };
-    const VerticalLayout = JSX(({ className = '', gap = '', align, isPadding = false, isInnerPadding = true, version = 'transparent', options, ...rest }) => {
+    const VerticalLayout = JSX(({ className = '', gap = '', align = 'stretch', isPadding = false, isInnerPadding = true, version = 'transparent', options, ...rest }) => {
         const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
         return (jsx(BlockWrapper, { className: style('flex flex-col [&>*]:max-w-full', isPadding ? 'p-12' : '', gapStyles[gap], align && alignStyle[align], className), version: version, ...rest, children: renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } }) }));
     });
@@ -4343,7 +4269,10 @@
     const MIN_COL_SPAN = 10;
     const getPaddings = (className) => getColSpan(className) < MIN_COL_SPAN ? 'py-6 px-11' : 'py-12 px-32';
 
-    const Video = JSX(({ className, title, src, previewImg, ...rest }) => (jsxs(BlockWrapper, { className: style(getPaddings(className), className), ...rest, children: [jsx(Headline, { title: title, headlineVersion: "M" }), src ? (jsx("video", { className: "m-auto w-full object-fill", preload: "metadata", poster: previewImg?.src, style: { maxHeight: 524 }, controls: true, children: jsx("source", { src: src }) })) : null] })));
+    const Video = JSX(({ className, title, src, previewImg, ...rest }) => {
+        const router = useRouter();
+        return (jsxs(BlockWrapper, { className: style(getPaddings(className), className), ...rest, children: [jsx(Headline, { title: title, headlineVersion: "M" }), src ? (jsx("video", { className: "m-auto w-full object-fill", preload: "metadata", poster: adjustHref(router)(previewImg?.src), style: { maxHeight: 524 }, controls: true, children: jsx("source", { src: adjustHref(router)(src) }) })) : null] }));
+    });
 
     const Blocks = {
         Accordion,
@@ -4360,19 +4289,18 @@
         CarouselBankHistoryCard,
         CarouselCard,
         CarouselCatalogCard,
+        CarouselEventCard,
         CarouselInvestmentCard,
         CarouselLinks,
         CarouselProductCard,
         CarouselProgramsCard,
         CarouselRecommendationCard,
         CarouselTariffsCard,
-        Catalog,
         ComparisonTable,
         ContactsBlock,
         ErrorBlock,
         ExchangeRateTile,
         Footer,
-        Gallery,
         GracePeriod,
         Header,
         Headline,
@@ -4381,7 +4309,6 @@
         InsuranceAmountBlock,
         InvestmentInfo,
         LinkDocs,
-        MiniGallery,
         MobileAppTile,
         OfficeMap,
         OfficeServicesBlock,
@@ -4531,7 +4458,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.8.15";
+    const packageVersion = "0.8.17";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;