@redneckz/wildless-cms-uni-blocks 0.6.39 → 0.6.41

package/bundle/bundle.umd.js

@@ -242,14 +242,14 @@
     const DEFAULT_ANCESTORS = [];
     const DEFAULT_STYLE = ['col-span-12'];
     function renderBlock(block, options) {
-        const { key, blockDecorator = defaultBlockDecorator, blocksRegistry = {}, ancestors = DEFAULT_ANCESTORS, } = options;
+        const { key, blockDecorator = defaultBlockDecorator, blocksRegistry = {}, ancestors = DEFAULT_ANCESTORS, className = '', } = options;
         const { type } = block;
         if (!(type && type in blocksRegistry)) {
             console.warn(`No block with "${type}" is registered`);
         }
         const BlockComponent = type && blocksRegistry[type];
         return blockDecorator({
-            blockClassName: `scroll-mt-12 ${style2className(block.style || DEFAULT_STYLE)}`,
+            blockClassName: `scroll-mt-12 ${className} ${style2className(block.style || DEFAULT_STYLE)}`,
             block,
             ancestors,
             // Adjusted by decorator block and blockClassName
@@ -534,6 +534,10 @@
         primary: 'bg-white text-primary-text',
         secondary: 'bg-primary-main text-white',
     };
+    const VersionAdditionalStyleMap = {
+        primary: 'text-secondary-text',
+        secondary: 'text-white',
+    };
 
     const getIconWithVersion = (icon, version = 'primary') => ({
         ...icon,
@@ -555,9 +559,9 @@
     const BenefitsBlock = JSX(({ className = '', title, benefitList, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-12 flex flex-col items-center ${className} ${VersionStyleMap[version]}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `max-w-[47rem] text-center ${benefitsTextStyleMap[version]}`, title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep(version)) })) : null] })));
     const renderStep = (version) => (benefit, i) => {
         const description = benefit.description;
-        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: `w-12 h-12 min-w-12 p-3 rounded-full ${benefitsIconStyleMap[version]}`, image: getIconWithVersion(benefit.icon, version), asSVG: true })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? (jsx("h3", { className: `text-h6 m-0 ${benefitsTextStyleMap[version]}`, children: benefit.label })) : null, renderDescription$3(description, version)] })] }, String(i)));
+        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: `w-12 h-12 min-w-12 p-3 rounded-full ${benefitsIconStyleMap[version]}`, image: getIconWithVersion(benefit.icon, version), asSVG: true })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? (jsx("h3", { className: `text-h6 m-0 ${benefitsTextStyleMap[version]}`, children: benefit.label })) : null, renderDescription$4(description, version)] })] }, String(i)));
     };
-    const renderDescription$3 = (description, version) => {
+    const renderDescription$4 = (description, version) => {
         const benefitType = description?.benefitType || null;
         return description && benefitType ? (jsx("div", { className: `text-l-light mt-2 ${benefitsDescriptionStyleMap[version]}`, children: benefitType === 'list'
                 ? renderListBenefit(description)
@@ -734,11 +738,11 @@
 
     const ButtonSection = JSX(({ className = '', buttons }) => buttons && buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => renderButton({ button, index })) })) : null);
     function renderButton({ button, buttonClassName, index }) {
-        const { icon, iconRight, version, ...rest } = button;
+        const { icon, iconRight, version, text, ...rest } = button;
         const iconVersion = version === 'secondary' ? 'color' : 'white';
         const leftIcon = renderButtonIcon({ ...icon, iconVersion: iconVersion });
         const rightIcon = renderButtonIcon({ ...iconRight, iconVersion: iconVersion });
-        return (jsx(Button, { className: buttonClassName, appendLeft: leftIcon, appendRight: rightIcon, version: version, ...rest }, index ? String(index) : ''));
+        return text ? (jsx(Button, { className: buttonClassName, appendLeft: leftIcon, appendRight: rightIcon, version: version, text: text, ...rest }, index ? String(index) : '')) : null;
     }
     const renderButtonIcon = (icon) => {
         if (!icon?.icon && !icon?.src) {
@@ -864,6 +868,11 @@
 
     const BusinessBlock = JSX(({ className = '', title, cards, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans bg-white p-12 pb-9 ${className}`, ...rest, children: [jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }), jsx("div", { className: "flex gap-5", children: cards?.length ? cards.map((_, i) => jsx(BusinessCard, { ..._ }, String(i))) : null })] })));
 
+    const ButtonBlock = JSX((props) => {
+        const { className, button, ...rest } = props;
+        return (jsx(BlockWrapper, { className: className, ...rest, children: button ? renderButton({ button }) : null }));
+    });
+
     const useCarouselControls = (props) => {
         const { itemCount, visibleItemCount, isCyclic } = props;
         const [activeIndex, setActiveIndex] = useState(0);
@@ -923,7 +932,7 @@
         maxSum: DEFAULT_MAX_SUM,
         minMonths: DEFAULT_MIN_MONTHS,
         maxMonths: DEFAULT_MAX_MONTHS,
-        rateBottomRange: 10,
+        rateBottomRange: 12,
         rateTopRange: 7,
         isSalaryClient: true,
         isStateEmployee: true,
@@ -1434,7 +1443,7 @@
         return (jsx("div", { className: `inline-block snap-always box-border ${className}`, style: style, role: "listitem", "aria-current": Boolean(idx === activeIndex), ref: ref, children: children }));
     });
 
-    const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]'];
+    const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]', 'min-w-[25%]'];
     const SwipeListContainer = JSX(({ className = '', containerRef, activeIndex, visibleItemCount, gap = 0, padding = 0, snapAlign = 'snap-center', children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
         const observerOptions = {
             sensitivity: 1,
@@ -1539,12 +1548,13 @@
             itemCount: count,
             isCyclic,
         });
-        return (jsxs(BlockWrapper, { className: `relative font-sans ${className}`, ...rest, children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren(rest) }), (scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (jsxs("div", { children: [jsx("div", { className: `${blurBaseStyle} left-0 bg-opacity-from-white` }), jsx("div", { className: `${blurBaseStyle} right-0 bg-opacity-to-white` })] })) : null, renderScrollButtons(scroll)] }));
+        return (jsx(BlockWrapper, { className: `font-sans p-12 ${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: renderChildren(rest) }), (scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (jsxs("div", { children: [jsx("div", { className: `${blurBaseStyle} left-0 bg-opacity-from-white` }), jsx("div", { className: `${blurBaseStyle} right-0 bg-opacity-to-white` })] })) : null, renderScrollButtons(scroll)] }) }));
     });
     Carousel.childrenTypes = [
         'CarouselCard',
+        'CarouselCatalogCard',
         'CarouselTariffsCard',
-        'CarouselLinks',
+        'CarouselProductCard',
         'CarouselProgramsCard',
         'CarouselInvestmentCard',
     ];
@@ -1557,6 +1567,41 @@
     };
     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 cardStyleMap$2 = {
+        black: 'bg-black',
+        white: 'bg-white',
+    };
+    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, version = 'primary' }) => (jsxs("section", { className: `border box-border border-main-stroke p-7 min-w-[392px] flex flex-col justify-left ${VersionStyleMap[version]} ${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: "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, button ? renderButton({ button, buttonClassName: 'mt-5 w-full' }) : null] })));
+    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 BorderVersionStyleMap = {
+        primary: 'border-main-stroke',
+        secondary: 'border-white/50',
+    };
+
+    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] })] })));
+
+    const getItemListFontSize = (colValue) => (colValue === 1 ? 'text-h6' : 'text-l');
+    const cardColumnsModeStyleMap = {
+        1: 'flex gap-y-2 flex-col',
+        2: 'flex gap-y-2 gap-x-10 flex-wrap',
+    };
+    const CarouselInvestmentCard = JSX(({ additionalDescription, cardsList = [], className = '', columnsMode = 1, description, image, title, version = 'primary', ...rest }) => {
+        const tileTitle = title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
+        const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
+        return (jsx(BlockWrapper, { className: [
+                'relative text-left border border-solid box-border p-9 w-[697px]',
+                VersionStyleMap[version],
+                BorderVersionStyleMap[version],
+                className,
+            ].join(' '), ...rest, children: jsxs(BaseTile, { title: tileTitle, image: tileImage, children: [jsxs("div", { className: "flex justify-between mb-4", children: [description ? (jsx("div", { className: "w-1/3", children: jsx(Text, { size: "text-h6", children: description }) })) : null, additionalDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: VersionAdditionalStyleMap[version], children: additionalDescription })) : null] }), cardsList.length ? (jsx("ul", { className: `list-none m-0 p-0 ${cardColumnsModeStyleMap[columnsMode]}`, children: renderCardList(cardsList, columnsMode) })) : null] }) }));
+    });
+    const renderCardList = (cardsList, columnsMode) => {
+        const CARDS_COUNT_MAP = [4, 9];
+        const visibleCardsList = cardsList.slice(0, CARDS_COUNT_MAP[columnsMode - 1]);
+        return visibleCardsList.map((item, i) => (jsxs("li", { className: columnsMode === 2 ? 'basis-[calc(50%-20px)]' : '', children: [item?.parameter ? (jsx("div", { className: "pr-2.5", children: jsx(Text, { size: getItemListFontSize(columnsMode), children: item.parameter }) })) : null, item?.parameterDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: item.parameterDescription })) : null] }, String(i))));
+    };
+
     const LINK_CLASS_NAME = `absolute border border-primary-main ml-3 px-6 py-5
   text-l-light bg-white text-primary-text flex w-[316px]
   justify-between items-center group-hover:text-primary-main z-10`;
@@ -1579,6 +1624,62 @@
                     .map((link, index) => (jsx(LinkButton, { className: "m-1", ...link }, String(index)))) }, String(groupIndex)))) }));
     };
 
+    const LIST_DOT_STYLE_MAP = {
+        primary: 'bg-primary-text',
+        secondary: 'bg-white',
+        gray: 'bg-secondary-text',
+    };
+    const DOT_SIZE_MAP = {
+        L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4',
+        M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3',
+        S: 'w-1 h-1 min-w-1 min-h-1 mr-2',
+    };
+    const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary', size = 'M' }) => {
+        return (jsxs("div", { className: `font-sans flex items-baseline ${className}`, role: "listitem", children: [isDotted ? (jsx("div", { children: jsx("div", { className: `rounded-full align-middle inline-block ${LIST_DOT_STYLE_MAP[version]} ${DOT_SIZE_MAP[size]}` }) })) : null, jsx("span", { children: children })] }));
+    });
+
+    const TEXT_STYLE_MAP = {
+        primary: 'text-primary-text',
+        secondary: 'text-white',
+        gray: 'text-secondary-text',
+    };
+    const TEXT_SIZE_MAP = {
+        S: 'text-l-light',
+        M: 'text-h6',
+        L: 'text-h5',
+    };
+    const ITEM_INDENT_MAP = {
+        S: 'ml-2',
+        M: 'ml-3',
+        L: 'ml-4',
+    };
+    const List = JSX((props) => {
+        const { className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M', version = 'primary', } = props;
+        if (!items?.length) {
+            return null;
+        }
+        return (jsx("section", { className: `${TEXT_STYLE_MAP[version]} ${TEXT_SIZE_MAP[listItemSize]} ${className} ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''}`, role: "list", children: items.map((item, i) => (jsx(ListItem, { className: `${itemClassName} mb-1.5`, isDotted: isDotted, version: version, size: listItemSize, children: item }, String(i)))) }));
+    });
+
+    const descriptionStyleMap = {
+        primary: 'text-secondary-text',
+        secondary: 'text-white/80',
+    };
+    const BORDER_STYLE = 'box-border border-solid border border-main-stroke ';
+    const CarouselProductCard = JSX(({ title, headlineSmallVersion = 'H6', description, additionalDescription, icon, items = [], button = {}, version = 'primary', isDotted = true, align = 'center', }) => {
+        return (jsxs("section", { className: [
+                'flex flex-col justify-between items-stretch min-w-[260px] h-full w-full p-6',
+                BORDER_STYLE,
+                AlignText[align],
+                VersionStyleMap[version],
+            ].join(' '), role: "listitem", children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$4(icon, version), renderCardTitle$1(headlineSmallVersion, title), renderDescription$3(description, title), renderItems$2(items, isDotted, version), renderAdditionalDescription$2(additionalDescription, version)] }), renderButton({ button, buttonClassName: 'mt-6' })] }));
+    });
+    const renderImage$4 = (image, version) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`, image: getIconWithVersion(image, version), asSVG: true })) : null] }));
+    const renderCardTitle$1 = (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$2 = (additionalDescription, version = 'primary') => additionalDescription ? (jsx("div", { className: "mt-auto", children: jsx(Text, { size: "text-m", font: "font-light", color: descriptionStyleMap[version], children: additionalDescription }) })) : null;
+    const renderItems$2 = (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, version: version })) : null;
+
     const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans border border-main-stroke flex min-w-[536px] ${VersionStyleMap[version]} ${className}`, ...rest, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-end", children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: " mb-3.5", headingType: "h5", title: title }) : null, list.length ? jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$2) }) : null] })] })));
     const renderList$2 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: `text-h6`, children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
 
@@ -1702,8 +1803,6 @@
     };
     const ErrorBlock = JSX(({ className = '', title, subtitle, error, button }) => (jsxs("section", { className: `flex flex-col justify-center items-center mt-12 ${className}`, children: [jsx("div", { className: "flex justify-center py-20", children: renderErrorContent(error) }), title ? jsx(Heading, { headingType: "h1", className: "text-left mb-4", title: title }) : null, subtitle ? (jsx("div", { className: "font-sans text-xl-light mb-7 max-w-[613px] text-center", children: subtitle })) : null, button?.text ? (jsx(Button, { className: "py-4 px-9", version: button?.version, ...button, children: button.text })) : 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] })] })));
-
     var Currency;
     (function (Currency) {
         Currency["RUB"] = "RUB";
@@ -1936,20 +2035,24 @@
         'bg-white': 'text-primary-main',
         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: {
+                icon: image?.icon || 'LogoIcon',
+                iconVersion: ICON_VERSION_MAP[bgColor],
+            }, className: SVG_COLOR[bgColor], width: size?.width, height: size?.height, asSVG: true }));
+    };
+
     const TEXT_COLOR = {
         'bg-white': 'text-primary-text',
         transparent: 'text-white',
     };
+    const renderTitle$2 = (title, bgColor, className) => {
+        return (jsx("span", { className: `${TEXT_COLOR[bgColor]} ml-2.5 font-medium ${className || ''}`, children: title || 'Россельхозбанк' }));
+    };
+
     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: [logo?.image?.src ? (jsx(ImgInner, { image: logo.image, className: SVG_COLOR[bgColor], width: "40", height: "45", asSVG: true })) : (jsx(ImgInner, { image: {
-                        icon: logo?.image?.icon || 'LogoIcon',
-                        iconVersion: ICON_VERSION_MAP[bgColor],
-                    }, className: `${SVG_COLOR[bgColor]} w-10`, width: "40", height: "45", asSVG: true })), showTitle ? renderTitle$2(children, bgColor, logo?.title) : 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$3(bgColor, logo?.image, { width: '40', height: '45' }), showTitle ? renderTitle$2(children || logo?.title, bgColor) : null] }));
     });
-    const renderTitle$2 = (children, bgColor, title) => {
-        const text = children || title || 'Россельхозбанк';
-        return jsx("span", { className: `${TEXT_COLOR[bgColor]} font-medium ml-2.5`, children: text });
-    };
 
     const useSearch = () => {
         const [term, setTerm] = useState('');
@@ -2096,53 +2199,16 @@
         mini: 276,
     };
 
-    const LIST_DOT_STYLE_MAP = {
-        primary: 'bg-primary-text',
-        secondary: 'bg-white',
-        gray: 'bg-secondary-text',
-    };
-    const DOT_SIZE_MAP = {
-        L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4',
-        M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3',
-        S: 'w-1 h-1 min-w-1 min-h-1 mr-2',
-    };
-    const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary', size = 'M' }) => {
-        return (jsxs("div", { className: `font-sans flex items-baseline ${className}`, role: "listitem", children: [isDotted ? (jsx("div", { children: jsx("div", { className: `rounded-full align-middle inline-block ${LIST_DOT_STYLE_MAP[version]} ${DOT_SIZE_MAP[size]}` }) })) : null, jsx("span", { children: children })] }));
-    });
-
-    const TEXT_STYLE_MAP = {
-        primary: 'text-primary-text',
-        secondary: 'text-white',
-        gray: 'text-secondary-text',
-    };
-    const TEXT_SIZE_MAP = {
-        S: 'text-l-light',
-        M: 'text-h6',
-        L: 'text-h5',
-    };
-    const ITEM_INDENT_MAP = {
-        S: 'ml-2',
-        M: 'ml-3',
-        L: 'ml-4',
-    };
-    const List = JSX((props) => {
-        const { className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M', version = 'primary', } = props;
-        if (!items?.length) {
-            return null;
-        }
-        return (jsx("section", { className: `${TEXT_STYLE_MAP[version]} ${TEXT_SIZE_MAP[listItemSize]} ${className} ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''}`, role: "list", children: items.map((item, i) => (jsx(ListItem, { className: `${itemClassName} mb-1.5`, isDotted: isDotted, version: version, size: listItemSize, children: item }, String(i)))) }));
-    });
-
-    const GalleryCardInner = JSX(({ title, headlineSmallVersion = 'H6', description, additionalDescription, icon, items, button, version, isFullWidth = true, isDotted = true, align = 'center', }) => (jsxs("div", { className: `h-full flex flex-col justify-between ${AlignText[align]}`, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$1(icon, version), renderCardTitle(headlineSmallVersion, title), renderDescription$2(description, title), items?.length ? renderItems$1(items, isDotted, version) : null, renderAdditionalDescription$1(additionalDescription)] }), button?.text
+    const GalleryCardInner = JSX(({ title, headlineSmallVersion = 'H6', description, additionalDescription, icon, items, button, version, isFullWidth = true, isDotted = true, align = 'center', }) => (jsxs("div", { className: `h-full flex flex-col justify-between ${AlignText[align]}`, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$2(icon, version), renderCardTitle(headlineSmallVersion, title), renderDescription$2(description, title), items?.length ? renderItems$1(items, isDotted, version) : null, renderAdditionalDescription$1(additionalDescription, version)] }), button?.text
                 ? renderButton({
                     button,
                     buttonClassName: `mt-6 ${isFullWidth ? '' : 'self-center'}`,
                 })
                 : null] })));
-    const renderImage$1 = (image, version) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-8 h-8 min-w-8 mb-5 rounded-full`, image: getIconWithVersion(image, version), asSVG: true })) : null] }));
+    const renderImage$2 = (image, version) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-8 h-8 min-w-8 mb-5 rounded-full`, image: getIconWithVersion(image, version), asSVG: true })) : null] }));
     const renderCardTitle = (headlineSmallVersion, title) => title ? jsx("div", { className: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
     const renderDescription$2 = (description, title) => description ? jsx("div", { className: `text-l ${title ? 'mt-2' : ''}`, children: description }) : null;
-    const renderAdditionalDescription$1 = (additionalDescription) => additionalDescription ? (jsx("div", { className: "text-m-light text-secondary-text mt-auto", children: additionalDescription })) : null;
+    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)) })] })));
@@ -3086,11 +3152,6 @@
                     : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs-light mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbsStyleMap[version]}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { className: breadcrumbsStyleMap[version], ...breadcrumb }, String(i))))) })) : null, jsx(ProductBlockInner, { version: version, ...rest })] }));
     });
 
-    const BorderVersionStyleMap = {
-        primary: 'border-main-stroke',
-        secondary: 'border-white/50',
-    };
-
     const productBlockStyleMap = {
         primary: { title: 'text-secondary-text', text: 'text-secondary-text' },
         secondary: { title: 'text-white', text: 'text-white/80' },
@@ -3130,37 +3191,31 @@
       `, children: jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `last:pb-0 ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text  ${btnDescClassName}`, children: slide?.description })] }) }, String(i)));
     }
 
-    const ProductTile = JSX(({ className = '', title, headlineVersion = 'S', description, additionalDescription, benefits = [], buttons, image, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `overflow-hidden font-sans p-9 box-border relative justify-between grid min-h-[364px]
-          ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)}`, ...rest, children: [jsx(Headline, { 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), additionalDescription
-                ? renderAdditionalDescription(additionalDescription, image, version)
-                : null, buttons?.length ? (jsx(ButtonSection, { buttons: buttons, className: "flex self-end mt-5 gap-4 z-10 text-l" })) : null, image?.src ? jsx(ImgInner, { className: "absolute right-0 bottom-0", image: image }) : null] })));
+    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), additionalDescription ? renderAdditionalDescription(additionalDescription, image) : null, 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) {
         // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
         const BENEFITS_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
         return (jsx("div", { className: `z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline
         ${BENEFITS_WIDTH}`, children: benefits.length ? benefits.map(renderBenefit(version)) : null }));
     }
-    function renderBenefit(version = 'primary') {
-        const labelStyleMap = {
-            primary: 'text-secondary-text',
-            secondary: 'text-white',
-        };
-        return function renderVersionedBenefit(benefit, i) {
-            const { label = '', description = '' } = benefit;
-            return [
-                jsx("div", { className: "text-h6", children: label }, `label-${i}`),
-                jsx("div", { className: `text-m-light ${labelStyleMap[version]}`, children: description }, `desc-${i}`),
-            ];
-        };
-    }
-    function renderAdditionalDescription(additionalDescription, image, version = 'primary') {
-        const descStyleMap = {
-            primary: 'text-secondary-text',
-            secondary: 'text-white',
-        };
+    const renderBenefit = (version = 'primary') => (benefit, i) => {
+        const { label = '', description = '' } = benefit;
+        return [
+            jsx("div", { className: "text-h6", children: label }, `label-${i}`),
+            jsx("div", { className: `text-m-light ${VersionAdditionalStyleMap[version]}`, children: description }, `desc-${i}`),
+        ];
+    };
+    function renderAdditionalDescription(additionalDescription, image) {
         // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
         const DESCRIPTION_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
-        return (jsx("div", { className: `text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH} ${descStyleMap[version]}`, children: additionalDescription }));
+        return (jsx("div", { className: `text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH}`, children: additionalDescription }));
+    }
+    function renderImage$1(image, isImageOnRightSide) {
+        if (!image?.src) {
+            return null;
+        }
+        return (jsx(ImgInner, { className: `absolute ${isImageOnRightSide ? 'right-0' : 'left-0'} bottom-0`, image: image }));
     }
 
     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 })] }) }) })));
@@ -3719,10 +3774,10 @@
         right: 'items-end',
     };
     const gapStyleMap = {
-        XXL: 'gap-10',
-        XL: 'gap-8',
-        L: 'gap-4',
-        M: 'gap-3',
+        XXL: 'gap-12',
+        XL: 'gap-10',
+        L: 'gap-8',
+        M: 'gap-4',
         S: 'gap-2',
         XS: 'gap-1',
         '': '',
@@ -3732,15 +3787,20 @@
         primary: 'bg-white',
         secondary: 'bg-primary-main',
     };
-    const VerticalLayout = JSX(({ className = '', gap = '', align, version = 'transparent', ...rest }) => (jsx(BlockWrapper, { className: [
-            'flex flex-col',
-            gapStyleMap[gap],
-            align && alignStyle[align],
-            backgroundStyleMap[version],
-            className,
-        ]
-            .filter(Boolean)
-            .join(' '), ...rest, children: renderChildren(rest) })));
+    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],
+                align && alignStyle[align],
+                backgroundStyleMap[version],
+                className,
+            ]
+                .filter(Boolean)
+                .join(' '), ...rest, children: renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } }) }));
+    });
     VerticalLayout.childrenTypes = {
         exclude: ['VerticalLayout'],
     };
@@ -3753,37 +3813,22 @@
         return (jsxs(BlockWrapper, { className: `bg-white ${getPaddings(className)} ${className}`, ...rest, children: [jsx(Headline, { title: title, headlineVersion: "M" }), src ? (jsx("video", { className: "m-auto w-full object-fill", preload: "metadata", poster: previewImg?.src, style: { maxHeight: 524 }, controls: true, children: jsx("source", { src: src }) })) : null] }));
     });
 
-    const getItemListFontSize = (colValue) => (colValue === 1 ? 'text-h6' : 'text-l');
-    const cardColumnsModeStyleMap = {
-        1: 'flex gap-y-2 flex-col',
-        2: 'flex gap-y-2 gap-x-10 flex-wrap',
-    };
-    const CarouselInvestmentCard = JSX(({ additionalDescription, cardsList = [], className = '', columnsMode = 1, description, image, title, version = 'primary', ...rest }) => {
-        const tileTitle = title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
-        const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
-        return (jsx(BlockWrapper, { className: `relative text-left border border-solid box-border
-        p-9 w-[697px]
-        ${BorderVersionStyleMap[version]}
-        ${className}`, ...rest, children: jsxs(BaseTile, { title: tileTitle, image: tileImage, children: [jsxs("div", { className: "flex justify-between mb-4", children: [description ? jsx("span", { className: "text-h6 w-1/3", children: description }) : null, additionalDescription ? (jsx("span", { className: "text-m-light text-secondary-text", children: additionalDescription })) : null] }), cardsList.length ? (jsx("ul", { className: `list-none m-0 p-0 ${cardColumnsModeStyleMap[columnsMode]}`, children: renderCardList(cardsList, columnsMode) })) : null] }) }));
-    });
-    const renderCardList = (cardsList, columnsMode) => {
-        const CARDS_COUNT_MAP = [4, 9];
-        const visibleCardsList = cardsList.slice(0, CARDS_COUNT_MAP[columnsMode - 1]);
-        return visibleCardsList.map((item, i) => (jsxs("li", { className: columnsMode === 2 ? 'basis-[calc(50%-20px)]' : '', children: [item?.parameter ? (jsx("span", { className: `pr-2.5 ${getItemListFontSize(columnsMode)}`, children: item.parameter })) : null, item?.parameterDescription ? (jsx("span", { className: "text-m-light text-secondary-text", children: item.parameterDescription })) : null] }, String(i))));
-    };
-
     const Blocks = {
         Accordion,
         AccordionItem,
         BenefitsBlock,
         BusinessBlock,
+        ButtonBlock,
         Bonus,
         BonusBenefitsBlock,
         CardTransfer,
         Calculator,
         Carousel,
         CarouselCard,
+        CarouselCatalogCard,
+        CarouselInvestmentCard,
         CarouselLinks,
+        CarouselProductCard,
         CarouselProgramsCard,
         CarouselTariffsCard,
         Catalog,
@@ -3823,7 +3868,6 @@
         Tile,
         VerticalLayout,
         Video,
-        CarouselInvestmentCard,
     };
 
     const debounce = (fn, delay = 600) => {
@@ -3951,7 +3995,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.39";
+    const packageVersion = "0.6.41";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;