@redneckz/wildless-cms-uni-blocks 0.5.12 → 0.5.14

package/bundle/bundle.umd.js

@@ -228,6 +228,10 @@
         return JSXTmpl;
     };
 
+    function style2className(style) {
+        return style ? style.filter(Boolean).join(' ') : '';
+    }
+
     class EventBus {
         static inst = new EventBus();
         subscribers = {};
@@ -332,6 +336,11 @@
         }
     }
 
+    const Description = JSX((props) => {
+        const { className = '', description } = props;
+        return jsx("div", { className: `${className}`, children: description });
+    });
+
     const HEADING_STYLE_MAP = {
         h0: 'text-h0',
         h1: 'text-h1',
@@ -346,15 +355,6 @@
         return (jsx(Tag, { className: `font-sans m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`, children: title }));
     });
 
-    function style2className(style) {
-        return style ? style.filter(Boolean).join(' ') : '';
-    }
-
-    const Description = JSX((props) => {
-        const { className = '', description } = props;
-        return jsx("div", { className: `${className}`, children: description });
-    });
-
     const ALIGN_TEXT = {
         left: 'text-left',
         center: 'text-center',
@@ -936,11 +936,11 @@
         right: 'text-right',
     };
     const GalleryCardInner = JSX(({ title, headlineSmallVersion = 'XL_L', description, additionalDescription, image, items, button, version, isDotted = true, align = 'center', }) => {
-        return (jsxs("div", { className: `h-full flex flex-col justify-between ${ALIGN_TITLE$1[align]}`, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage(image), renderCardTitle(headlineSmallVersion, title), renderDescription$1(description, title), renderAdditionalDescription(additionalDescription), items?.length ? renderItems$1(items, isDotted, version) : null] }), button ? renderButton(button) : null] }));
+        return (jsxs("div", { className: `h-full flex flex-col justify-between ${ALIGN_TITLE$1[align]}`, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage(image), renderCardTitle(headlineSmallVersion, title), renderDescription$2(description, title), renderAdditionalDescription(additionalDescription), items?.length ? renderItems$1(items, isDotted, version) : null] }), button ? renderButton(button) : null] }));
     });
     const renderImage = (image) => image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(ImgInner, { className: "mb-6", image: image }) })) : null;
     const renderCardTitle = (headlineSmallVersion, title) => title ? jsx("div", { className: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
-    const renderDescription$1 = (description, title) => description ? jsx("div", { className: `text-base ${title ? 'mt-2' : ''}`, children: description }) : null;
+    const renderDescription$2 = (description, title) => description ? jsx("div", { className: `text-base ${title ? 'mt-2' : ''}`, children: description }) : null;
     const renderAdditionalDescription = (additionalDescription) => additionalDescription ? (jsx("div", { className: "text-m-light text-secondary-text mt-auto", children: additionalDescription })) : null;
     const renderButton = (button) => (jsx(Button, { className: "mt-6 w-full", ...button }));
     const renderItems$1 = (items, isDotted, version = 'primary') => (jsx(List, { className: `max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "mt-1 text-left first:mt-0", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted, version: version }));
@@ -1010,47 +1010,33 @@
         return (jsx(EmbeddedBlock, { className: `${className} ${classNameBlock}`, context: context, ...rest }, `block_${i}`));
     };
 
-    const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
-
-    const DefaultButton = JSX(({ icon, label, dataTheme = '', onClick }) => {
-        return (jsxs("button", { className: "border-none bg-primary-main hover:bg-primary-hover px-0 py-5 mb-[1px] w-full font-sans text-white flex justify-center cursor-pointer", "data-theme": dataTheme, onClick: onClick, children: [jsx("span", { className: "text-h4 pr-3", children: label }), icon ? (jsx(ImgInner, { image: {
-                        icon,
-                        iconVersion: 'white',
-                    }, className: "flex-shrink-0 my-auto", width: "20", height: "20", asSVG: true })) : null] }));
+    const Foldable = JSX(({ isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
+        const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
+        const onToggle = useCallback(() => {
+            setIsUnfolded((_) => !_);
+        }, []);
+        const sectionNode = renderFoldableSection({ isUnfolded, onToggle });
+        const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
+        return isFoldButtonOnTop ? (jsxs("div", { children: [buttonNode, sectionNode] })) : (jsxs("div", { children: [sectionNode, buttonNode] }));
     });
 
-    const Foldable = JSX(({ blocks = [], hiddenBlocksNum = 0, isFoldButtonOnTop = false, unfoldedByDefault = false, containerClassName = '', blockWrapper = (_) => _, renderFoldButton = renderDefaultFoldButton, }) => {
-        const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
-        const blocksToHide = clamp(hiddenBlocksNum, 0, blocks?.length);
-        const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
-        const hiddenBlocks = blocksToHide > 0 ? blocks.slice(-blocksToHide) : [];
+    const FoldableSection = JSX(({ className = '', isUnfolded, children }) => {
         const containerRef = useRef(null);
-        const onToggle = () => {
-            setIsUnfolded(!isUnfolded);
+        useEffect(() => {
             if (containerRef.current) {
                 containerRef.current.style.maxHeight = isUnfolded
-                    ? ''
-                    : `${containerRef.current.scrollHeight}px`;
+                    ? `${containerRef.current.scrollHeight}px`
+                    : '';
             }
-        };
-        const buttonNode = hiddenBlocksNum ? renderFoldButton({ isUnfolded, onToggle }) : null;
-        const blocksNode = blockWrapper(jsxs("div", { children: [visibleBlocks, jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden max-h-0 ${containerClassName}`, children: hiddenBlocks })] }));
-        return (jsx("div", { children: isFoldButtonOnTop ? (jsxs("div", { children: [buttonNode, blocksNode] })) : (jsxs("div", { children: [blocksNode, buttonNode] })) }));
+        }, [isUnfolded, children?.length]);
+        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden max-h-0 ${className}`, children: children }));
     });
-    const renderDefaultFoldButton = (props) => {
-        const labels = ['Развернуть', 'Скрыть'];
-        const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
-        return (jsx(DefaultButton, { icon: icons[Number(props.isUnfolded)], label: labels[Number(props.isUnfolded)], onClick: props.onToggle }));
-    };
 
     const icons$1 = ['PlusIcon', 'MinusIcon'];
-    const AccordionItem = JSX(({ label = '', blocks, context }) => {
-        const foldableBlocks = blocks
-            ? renderBlocksList$1({ context, blocks, className: '!p-0 mb-5' })
-            : [];
-        return (jsx("li", { className: "border-0 border-b border-solid border-main-divider last:border-b-0", children: jsx(Foldable, { hiddenBlocksNum: foldableBlocks.length, blocks: foldableBlocks, isFoldButtonOnTop: true, containerClassName: "grid grid-cols-12", renderFoldButton: (props) => (jsx(FoldButton, { icon: icons$1[Number(props.isUnfolded)], label: label, hasContent: Boolean(blocks?.length), onClick: props.onToggle })) }) }));
-    });
-    const FoldButton = JSX(({ icon, label, hasContent, onClick }) => (jsxs("button", { className: `border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer ${hasContent ? 'group cursor-pointer' : ''}`, onClick: onClick, children: [jsx("span", { className: `text-xl font-medium pr-2.5`, children: label }), hasContent ? (jsx(ImgInner, { image: icon, className: "text-primary-main flex-shrink-0", width: "24", height: "24", asSVG: true })) : null] })));
+    const AccordionItem = JSX(({ label = '', children, hasContent = true }) => (jsx("li", { className: "border-0 border-b border-solid border-main-divider last:border-b-0", children: jsx(Foldable, { isFoldButtonOnTop: true, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "grid grid-cols-12", isUnfolded: isUnfolded, children: children })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(FoldButton, { label: label, icon: icons$1[Number(isUnfolded)], hasContent: hasContent, onClick: onToggle })) }) })));
+    const FoldButton = JSX(({ label, icon, hasContent, onClick }) => (jsxs("button", { className: `border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer ${hasContent ? 'group cursor-pointer' : ''}`, onClick: onClick, children: [jsx("span", { className: `text-xl font-medium pr-2.5`, children: label }), hasContent ? (jsx(ImgInner, { image: icon, className: "text-primary-main flex-shrink-0", width: "24", height: "24", asSVG: true })) : null] })));
+
+    const AccordionItemsList = JSX(({ children }) => (jsx("ul", { className: "list-none m-0 p-0", children: children })));
 
     const ALIGN_TITLE = {
         left: 'text-left',
@@ -1058,7 +1044,7 @@
         right: 'text-right',
     };
     const Accordion = JSX(({ title, description, accordionItems, context, className = '', accordionAlignTitle = 'center', ...rest }) => {
-        return (jsxs(BlockWrapper, { context: context, className: `p-[50px] mb-1 last:mb-0 font-sans bg-white text-primary-text ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `mb-2.5 ${ALIGN_TITLE[accordionAlignTitle]}`, title: title })) : null, description ? jsx("div", { className: "mb-2.5 text-l", children: description }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, context: context }, `AccordionItem${i}`))) })) : null] }));
+        return (jsxs(BlockWrapper, { context: context, className: `p-[50px] mb-1 last:mb-0 font-sans bg-white text-primary-text ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `mb-2.5 ${ALIGN_TITLE[accordionAlignTitle]}`, title: title })) : null, description ? jsx("div", { className: "mb-2.5 text-l", children: description }) : null, accordionItems?.length ? (jsx(AccordionItemsList, { children: accordionItems.map((item, i) => (jsx(AccordionItem, { context: context, hasContent: Boolean(item.blocks?.length), ...item, children: renderBlocksList$1({ blocks: item.blocks, context, className: '!p-0 mb-5' }) }, `AccordionItem${i}`))) })) : null] }));
     });
 
     const benefitsBlockStyleMap = {
@@ -1092,9 +1078,9 @@
     };
     const renderStep = (benefitsBlockVersion) => (benefit, i) => {
         const description = (benefit?.description || undefined);
-        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: `w-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[benefitsBlockVersion]}`, image: setIconVersion(benefit.icon, benefitsBlockVersion), asSVG: true })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? (jsx("h3", { className: `text-h6 m-0 ${benefitsTextStyleMap[benefitsBlockVersion]}`, children: benefit.label })) : null, renderDescription(description, benefitsBlockVersion)] })] }, 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-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[benefitsBlockVersion]}`, image: setIconVersion(benefit.icon, benefitsBlockVersion), asSVG: true })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? (jsx("h3", { className: `text-h6 m-0 ${benefitsTextStyleMap[benefitsBlockVersion]}`, children: benefit.label })) : null, renderDescription$1(description, benefitsBlockVersion)] })] }, String(i)));
     };
-    const renderDescription = (description, benefitsBlockVersion) => {
+    const renderDescription$1 = (description, benefitsBlockVersion) => {
         const benefitType = description ? description?.benefitType : null;
         if (!benefitType) {
             return null;
@@ -1192,6 +1178,8 @@
 
     const renderFootnote = (text) => text ? jsx("p", { className: "text-s-light text-secondary-text mt-7", children: text }) : null;
 
+    const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+
     const getSanitizedValue = (_) => _.split(/\s+/).join('');
 
     const DISABLED_INPUT_CLASSES = 'disabled:border-main-stroke disabled:bg-main-divider';
@@ -2018,9 +2006,9 @@
         transparent: 'text-white',
     };
     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: 'LogoIcon', iconVersion: ICON_VERSION_MAP[bgColor] }, className: `${SVG_COLOR[bgColor]} w-10`, width: "40", height: "45", asSVG: true })), showTitle ? renderTitle$1(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: [logo?.image?.src ? (jsx(ImgInner, { image: logo.image, className: SVG_COLOR[bgColor], width: "40", height: "45", asSVG: true })) : (jsx(ImgInner, { 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] }));
     });
-    const renderTitle$1 = (children, bgColor, title) => {
+    const renderTitle$2 = (children, bgColor, title) => {
         const text = children || title || 'Россельхозбанк';
         return jsx("span", { className: `${TEXT_COLOR[bgColor]} font-medium ml-2.5`, children: text });
     };
@@ -2413,6 +2401,48 @@
         return (jsx("button", { type: "button", onClick: onClick, "aria-label": title, className: `box-border px-4 py-3 text-m-light ${btnClassName}`, children: title }, String(i)));
     }
 
+    const investmentCellColorMap = {
+        yellow: 'bg-yellow',
+        green: 'bg-green',
+        'green-light': 'bg-green-light',
+        'green-dark': 'bg-green-dark',
+    };
+    const investmentCellSizeMap = {
+        XS: 'h-[40px]',
+        S: 'h-[68px]',
+        M: 'h-[102px]',
+        L: 'h-[136px]',
+        XL: 'h-[204px]',
+    };
+    const InvestmentInfo = JSX((props) => {
+        const { context, className = '', items, isDotted, investmentZeroColumn, investmentColumns, ...rest } = props;
+        const colums = investmentColumns ? [...investmentColumns] : [];
+        if (investmentZeroColumn) {
+            colums.unshift(investmentZeroColumn);
+        }
+        return (jsx(BlockWrapper, { className: `font-sans bg-white p-9 pb-9 ${className}`, context: context, ...rest, children: jsxs("div", { className: "container text-m-light", children: [colums?.length ? (jsxs("div", { children: [jsxs("div", { className: "flex items-end px-9 text-white", children: [joinList(jsx("div", { className: "w-px h-4 bg-main-stroke" }))(colums.map(renderInvestmentColumn)), jsx("div", { className: "w-px h-4 bg-main-stroke" })] }), jsx("div", { className: "border-t border-main-stroke -mt-2 mx-9" }), jsx("div", { className: "flex justify-between mt-3 -mx-10", children: colums.map(renderInvestmentColumnTitle) })] })) : null, items?.length ? (jsx(List, { className: "mt-9 text-h6", items: items, itemClassName: "mb-[7px]", isDotted: isDotted })) : null] }) }));
+    });
+    const renderInvestmentColumn = (column, i, arr) => {
+        const isSecondColumn = i === 1;
+        const isLastColumn = i === arr.length - 1;
+        return (jsx("div", { className: `${getColumnClasses(isSecondColumn, isLastColumn, column.cells)}`, children: column.cells?.length ? (jsx("div", { className: `w-full ${isLastColumn ? 'border-4 border-green-more-dark p-1' : ''}`, children: column.cells.map(renderInvestmentCell) })) : null }, `column_${i}`));
+    };
+    const getColumnClasses = (isSecondColumn, isLastColumn, cells = []) => [
+        cells.length ? 'flex-1' : 'flex-0',
+        cells.length && !isSecondColumn && !isLastColumn ? 'pl-2.5' : '',
+        cells.length && !isLastColumn ? 'pr-2.5 pb-8' : 'pb-6',
+    ].join(' ');
+    const renderInvestmentCell = (cell, i) => {
+        const cellSize = cell.cellSize || 'XS';
+        const cellColor = cell.cellColor || 'green';
+        return cell.text ? (jsx("div", { className: `flex-1 flex items-center justify-center relative py-2 ${investmentCellSizeMap[cellSize]} ${investmentCellColorMap[cellColor]} ${cellSize === 'XS' ? 'px-3' : 'px-11'}`, children: jsx("div", { className: "text-center", children: cell.text }) }, `cell_${i}`)) : null;
+    };
+    const renderInvestmentColumnTitle = (column, i, arr) => {
+        const isFirstColumn = i === 0;
+        const isLastColumn = i === arr.length - 1;
+        return (jsx("div", { className: `flex-1 max-w-[180px] text-center px-2 ${isFirstColumn ? 'pl-9' : ''} ${isLastColumn ? 'pr-9' : ' '}`, children: column.title }, `title_${i}`));
+    };
+
     const MobileAppTile = JSX(({ className = '', context, title = 'Мобильное приложение', qr, buttons, version = 'primary', items, image, headingType = 'h4', ...rest }) => {
         const textColorClass = version === 'primary' ? 'text-primary-text' : '';
         const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
@@ -2432,21 +2462,22 @@
     });
     const renderListItems = (itemList, i) => (jsxs("li", { className: "flex mb-5 last:mb-0 list-none", children: [itemList.icon ? (jsx(ImgInner, { className: "mr-3 min-w-6 min-h-6 w-6 h-6", width: "24", height: "24", asSVG: true, image: itemList.icon })) : null, itemList.label ? jsx("span", { className: "text-l-light", children: itemList.label }) : null] }, `list_item_${String(i)}`));
 
-    const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
-    const OtherProductsItem = JSX(({ label = '', blocks, context, dataTheme, isUnfolded }) => {
-        const foldableBlocks = renderBlocksList$1({
-            context,
-            blocks,
-        });
-        return (jsx("div", { className: "\u02DDborder-0 border-b border-solid border-main-divider", children: blocks?.length ? (jsx(Foldable, { blocks: foldableBlocks, hiddenBlocksNum: blocks?.length, unfoldedByDefault: isUnfolded, containerClassName: "grid grid-cols-12 gap-1 border-box", blockWrapper: (children) => jsx(Wrapper$1, { children: children }), renderFoldButton: (props) => (jsx(DefaultButton, { icon: icons[Number(props.isUnfolded)], label: label, dataTheme: dataTheme, onClick: props.onToggle })) })) : null }));
-    });
-    const Wrapper$1 = JSX(({ children }) => {
-        return jsx("div", { className: "box-border", children: children });
-    });
+    const OtherProducts = JSX(({ context, className = '', children, ...rest }) => (jsx(BlockWrapper, { context: context, className: `font-sans text-primary-text ${className}`, ...rest, children: children ? jsx("div", { className: "box-border1", children: children }) : null })));
+    OtherProducts.childrenTypes = ['OtherProductsItem'];
 
-    const OtherProducts = JSX(({ blockItems, colorPalette, context, className = '', ...rest }) => {
-        return (jsx(BlockWrapper, { context: context, className: `font-sans text-primary-text ${className}`, ...rest, children: blockItems?.length ? (jsx("div", { className: "box-border1", children: blockItems.map((item, i) => (jsx(OtherProductsItem, { ...item, dataTheme: colorPalette, context: context }, `BlockItem${i}`))) })) : null }));
-    });
+    const DefaultFoldButton = JSX(({ className, label, icon, dataTheme = '', onClick }) => (jsxs("button", { className: `border-none bg-primary-main hover:bg-primary-hover px-0 py-5 mb-[1px] w-full font-sans text-white flex justify-center cursor-pointer ${className || ''}`, "data-theme": dataTheme, onClick: onClick, children: [jsx("span", { className: "text-h4 pr-3", children: label }), icon ? (jsx(ImgInner, { image: {
+                    icon,
+                    iconVersion: 'white',
+                }, className: "flex-shrink-0 my-auto", width: "20", height: "20", asSVG: true })) : null] })));
+    const renderDefaultFoldButton = ({ isUnfolded, onToggle }) => {
+        const labels = ['Развернуть', 'Скрыть'];
+        const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
+        return (jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
+    };
+
+    const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
+    const OtherProductsItem = JSX(({ className, label = '', colorPalette, isUnfolded: unfoldedByDefault, children }) => (jsx("div", { className: `border-0 border-b border-solid border-main-divider ${className}`, children: jsx(Foldable, { unfoldedByDefault: unfoldedByDefault, renderFoldableSection: ({ isUnfolded }) => (jsx("div", { className: "box-border", children: jsx(FoldableSection, { className: "grid grid-cols-12 gap-1 border-box", isUnfolded: isUnfolded, children: children }) })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(DefaultFoldButton, { label: label, icon: icons[Number(isUnfolded)], dataTheme: colorPalette, onClick: onToggle })) }) })));
+    OtherProductsItem.childrenTypes = []; // All types of blocks are suitable
 
     function getTileHeadingType(className = '') {
         const colSpan = getColSpan(className);
@@ -2796,13 +2827,11 @@
 
     const checkIsIconRenderable = (icon) => Boolean(icon?.icon || icon?.src);
 
-    const renderItems = (items, styleMap, isDotted = true) => items ? (jsx("div", { className: `mt-4 ${styleMap?.description}`, role: "list", children: items.map((_) => (jsxs("div", { className: "items-start mt-1 first:mt-0", role: "listitem", children: [isDotted ? (jsx("div", { className: `rounded-full inline-block mr-3 mb-1 w-1.5 h-1.5 min-w-1.5 min-h-1.5 ${styleMap?.dot}` })) : null, jsx("span", { children: _ })] }))) })) : null;
-
     const STEPS_BLOCK_STYLE_MAPS = {
         primary: {
             background: 'bg-white',
             title: 'text-primary-text',
-            description: 'text-secondary-text',
+            description: '!text-secondary-text text-l-light',
             iconText: 'text-secondary-text',
             iconBackground: 'bg-main-divider',
             iconConnector: 'bg-secondary-light',
@@ -2811,7 +2840,7 @@
         secondary: {
             background: 'bg-primary-main',
             title: 'text-white',
-            description: 'text-white/80',
+            description: '!text-white/80 text-l-light',
             iconText: 'text-white',
             iconBackground: 'bg-white/30',
             iconConnector: 'bg-white',
@@ -2819,6 +2848,24 @@
         },
     };
 
+    const renderItems = ({ items, isDotted = true, version = 'primary', className = '', }) => {
+        const listVersion = version === 'primary' ? 'gray' : version;
+        return items ? (jsx(List, { className: `mt-4 ${className}`, version: listVersion, items: items, listItemSize: "S", isDotted: isDotted })) : null;
+    };
+
+    const renderStepContent = ({ styleMap, isMainButton, version, router, handlerDecorator, }) => (step, i, { length }) => {
+        const { label, description, button, items, isDotted } = step;
+        const additionalMarginClass = `${button?.text ? 'mb-8' : ''} ${step?.label ? 'mt-2' : 'mt-4'}`;
+        const widthContainer = length < 5 ? 'w-[276px]' : 'w-[210px]';
+        return (jsxs("div", { className: `flex flex-col items-center text-center relative
+        whitespace-pre-line overflow-hidden ${widthContainer}`, children: [renderStepLabel(label), renderStepDescription({
+                    description,
+                    className: `${styleMap.description} ${additionalMarginClass}`,
+                }), renderItems({ items, isDotted, version, className: styleMap.description }), button?.text && !isMainButton ? (jsx(Button, { className: "box-border py-3 h-12 w-full max-w-[240px] mt-auto", ...useLink({ router, handlerDecorator }, button), version: version, children: button.text })) : null] }, String(i)));
+    };
+    const renderStepLabel = (label) => label ? jsx("div", { className: "text-x6 m-0 mt-4", children: label }) : null;
+    const renderStepDescription = ({ description, className = '', }) => (description ? jsx("div", { className: className, children: description }) : null);
+
     const getLineOpacity = (showLines) => (showLines ? '' : 'opacity-0');
     const getPaddingX = (steps) => (steps < 5 ? 'px-[88px]' : 'px-[55px]');
     const StepsBlock = JSX(({ className = '', showLines = true, steps = [], button, version = 'primary', context, ...rest }) => {
@@ -2837,7 +2884,7 @@
                 styleMap.background,
                 styleMap.title,
                 className,
-            ].join(' '), context: context, ...rest, children: [title ? (jsx(Heading, { headingType: "h2", className: "max-w-[752px] text-center", title: title })) : null, steps?.length ? (jsxs("div", { className: `box-border ${titleMargin}`, children: [jsx("div", { className: `flex items-center ${paddingX}`, children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${lineOpacity}` }))(steps.map(renderStepIcon(styleMap))) }), jsx("div", { className: `flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepTitle({
+            ].join(' '), context: context, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", className: "max-w-[752px] text-center", title: title })) : null, steps?.length ? (jsxs("div", { className: `box-border ${titleMargin}`, children: [jsx("div", { className: `flex items-center ${paddingX}`, children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${lineOpacity}` }))(steps.map(renderStepIcon(styleMap))) }), jsx("div", { className: `flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepContent({
                                 styleMap,
                                 isMainButton: Boolean(button?.text),
                                 version,
@@ -2849,12 +2896,6 @@
         return (jsx("div", { className: "flex flex-col items-center text-center", children: jsx("div", { className: `h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center
             ${styleMap.iconBackground} ${styleMap.title}`, children: checkIsIconRenderable(icon) ? (jsx(ImgInner, { image: icon, width: "48", height: "48", asSVG: true })) : (jsx("span", { className: `text-h4 ${styleMap.iconText}`, children: i + 1 })) }) }, String(i)));
     };
-    const renderStepTitle = ({ styleMap, isMainButton, version, router, handlerDecorator, }) => (step, i, { length }) => {
-        const additionalMarginClass = step?.label ? 'mt-2' : 'mt-4';
-        const widthContainer = length < 5 ? 'w-[276px]' : 'w-[210px]';
-        return (jsxs("div", { className: `flex flex-col items-center text-center relative
-        whitespace-pre-line overflow-hidden ${widthContainer}`, children: [step?.label ? jsx("div", { className: "text-xl m-0 mt-4", children: step.label }) : null, step?.description ? (jsx("div", { className: `text-l-light ${styleMap.description} ${additionalMarginClass}`, children: step.description })) : null, renderItems(step?.items, styleMap, step?.isDotted), step.button?.text && !isMainButton ? (jsx(Button, { className: "box-border mt-8 py-3 h-12 w-full max-w-[240px]", ...useLink({ router, handlerDecorator }, step.button), version: version, children: step.button.text })) : null] }, String(i)));
-    };
 
     function assertUnreachable(x) {
         throw new Error(x);
@@ -2875,9 +2916,9 @@
         const count = tab.ref
             ? page?.blocks?.filter((block) => block?.labels?.includes(tab.ref)).length
             : page?.blocks?.length;
-        return (jsx("div", { className: `${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`, role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? renderTitle(tab.title, active) : null, showCounter && count ? renderCount(count, active) : null] }) }, String(i)));
+        return (jsx("div", { className: `${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`, role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? renderTitle$1(tab.title, active) : null, showCounter && count ? renderCount(count, active) : null] }) }, String(i)));
     };
-    const renderTitle = (title, active) => (jsx("h3", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: title }));
+    const renderTitle$1 = (title, active) => (jsx("h3", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: title }));
     const renderCount = (count, active) => (jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count }));
 
     const renderLinkTab = ({ text, currentTab, onClick, href, target = '_self', i, }) => {
@@ -3091,9 +3132,16 @@
             activeCardIndex,
             setActiveCardIndex,
         });
-        const foldableBlocks = rowData?.map((row, i, { length }) => (jsx(TariffsTableRow, { context: context, row: row, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex, rowIdx: i }, String(i))));
-        return (jsxs(BlockWrapper, { className: `bg-white font-sans p-[50px] overflow-hidden text-primary-text relative ${columnsLength > 1 ? 'pr-0' : ''} ${className}`, context: context, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", className: `text-center ${description ? 'mb-2.5' : 'mb-8'}`, title: title })) : null, description ? jsx("div", { className: "mb-9 text-center text-l", children: description }) : null, rowData?.length ? (jsx(Foldable, { blocks: foldableBlocks, hiddenBlocksNum: hiddenRowsNum, blockWrapper: (children) => (jsx(Wrapper, { tableArrowScrollControlProps: tableArrowScrollControlProps, children: children })) })) : null] }));
+        const rows = (rowData || []).map((row, i, { length }) => (jsx(TariffsTableRow, { context: context, row: row, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex, rowIdx: i }, String(i))));
+        const [visibleRows, hiddenRows] = hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
+        return (jsxs(BlockWrapper, { className: `bg-white font-sans p-[50px] overflow-hidden text-primary-text relative ${columnsLength > 1 ? 'pr-0' : ''} ${className}`, context: context, ...rest, children: [renderTitle({ title, description }), renderDescription(description), hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(Wrapper, { tableArrowScrollControlProps: tableArrowScrollControlProps, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(Wrapper, { tableArrowScrollControlProps: tableArrowScrollControlProps, children: rows }))] }));
     });
+    function renderTitle({ title, description }) {
+        return title ? (jsx(Heading, { headingType: "h3", className: `text-center ${description ? 'mb-2.5' : 'mb-8'}`, title: title })) : null;
+    }
+    function renderDescription(description) {
+        return description ? jsx("div", { className: "mb-9 text-center text-l", children: description }) : null;
+    }
     const Wrapper = JSX(({ children, tableArrowScrollControlProps }) => {
         const { isScrollAvailable } = tableArrowScrollControlProps;
         return (jsxs("div", { role: "table", children: [jsxs("div", { className: "relative", children: [children, jsx(TableArrowScrollControl, { ...tableArrowScrollControlProps })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
@@ -3114,6 +3162,7 @@
         Header,
         Headline,
         InsuranceAmountBlock,
+        InvestmentInfo,
         LinkDocs,
         MiniGallery,
         MobileAppTile,
@@ -3123,6 +3172,7 @@
         ProductTile,
         PromoTile,
         OtherProducts,
+        OtherProductsItem,
         Recommendation,
         StepsBlock,
         TariffsTable,
@@ -3179,25 +3229,27 @@
     });
 
     const DEFAULT_SLOT_NAME = null;
+    const DEFAULT_ANCESTORS = [DEFAULT_SLOT_NAME];
 
-    function renderBlock(block, options, ancestors = [DEFAULT_SLOT_NAME]) {
+    const defaultChildRenderer = (_) => _;
+    function renderBlock(block, options, ancestors = DEFAULT_ANCESTORS) {
         const { key, page, blockDecorator, blocksRegistry, context } = options;
-        const { type } = block;
+        const { type, blocks: childBlocks } = block;
         if (!(type && type in blocksRegistry)) {
             console.warn(`No block with "${type}" is registered`);
         }
         const BlockComponent = type && blocksRegistry[type];
+        const { renderChild = defaultChildRenderer } = BlockComponent || {};
+        const renderChildBlock = (_, j) => renderChild(renderBlock(_, { ...options, key: `${options.key}-${j}` }, [...ancestors, block]), j);
+        const children = childBlocks?.length ? childBlocks.map(renderChildBlock) : null;
         return blockDecorator({
             blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
             block,
             ancestors,
             // Adjusted by decorator block and blockClassName
             render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
-                const { version, content, anchor, labels, blocks: childBlocks } = adjustedBlock;
-                const children = childBlocks
-                    ? childBlocks.map((_, j) => renderBlock(_, { ...options, key: `${options.key}-${j}` }, [...ancestors, block]))
-                    : null;
-                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, version: version, context: context, page: page, anchor: anchor, labels: labels, ...content, children: children }, key)) : null;
+                const { version, anchor, labels, content } = adjustedBlock;
+                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, context: context, page: page, version: version, anchor: anchor, labels: labels, ...content, children: children }, key)) : null;
             },
         }, key);
     }