@redneckz/wildless-cms-uni-blocks 0.7.1 → 0.7.3

package/bundle/bundle.umd.js

@@ -238,14 +238,15 @@
 
     const DEFAULT_SLOT_NAME = null;
 
-    function style2className(style) {
-        return style ? style.filter(Boolean).join(' ') : '';
-    }
+    const style = (...atoms) => atoms
+        .flatMap((_) => _)
+        .filter(Boolean)
+        .join(' ');
 
     const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
 
     const DEFAULT_ANCESTORS = [];
-    const DEFAULT_STYLE = ['col-span-12'];
+    const defaultStyle = 'col-span-12';
     function renderBlock(block, options) {
         const { key, blockDecorator = defaultBlockDecorator, blocksRegistry = {}, ancestors = DEFAULT_ANCESTORS, className = '', } = options;
         const { type } = block;
@@ -254,7 +255,8 @@
         }
         const BlockComponent = type && blocksRegistry[type];
         return blockDecorator({
-            blockClassName: `scroll-mt-12 ${className} ${style2className(block.style || DEFAULT_STYLE)}`,
+            blockClassName: style('scroll-mt-12', // TODO scroll-mt-12 ? here?
+            className, block.style || defaultStyle),
             block,
             ancestors,
             // Adjusted by decorator block and blockClassName
@@ -393,7 +395,14 @@
         return ref;
     }
 
-    const BlockWrapper = JSX(({ className = '', block, tag = 'section', role, children }) => {
+    const blockStyles = {
+        primary: 'bg-white text-primary-text',
+        secondary: 'bg-primary-main text-white',
+        gray: 'bg-main-divider text-primary-text',
+        transparent: 'bg-transparent text-primary-text',
+        '': '',
+    };
+    const BlockWrapper = JSX(({ className = '', version = 'primary', block, tag = 'section', role, children }) => {
         const Tag = tag;
         const ref = useBlockIntersectionObserver(block);
         const [isVisible, setVisible] = useState(true);
@@ -406,10 +415,10 @@
                 setVisible(true);
             }
         }), [block]);
-        return isVisible ? (jsx(Tag, { className: className, role: role, ...(block?.anchor ? { id: block.anchor, ref } : {}), children: children })) : null;
+        return isVisible ? (jsx(Tag, { className: style('group', blockStyles[version], className), ...(version ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children })) : null;
     });
 
-    const HEADING_STYLE_MAP = {
+    const styles$4 = {
         h0: 'text-h0',
         h1: 'text-h1',
         h2: 'text-h2',
@@ -418,26 +427,23 @@
         h5: 'text-h5',
         h6: 'text-h6', // 20
     };
-    const Heading = JSX((props) => {
-        const { className = '', headingType = 'h3', title, as: Tag = 'h3' } = props;
-        return (jsx(Tag, { className: `font-sans m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`, children: title }));
-    });
+    const Heading = JSX(({ className = '', headingType = 'h3', as: Tag = 'h3', title, children }) => (jsx(Tag, { className: `font-sans m-0 ${styles$4[headingType]} ${className}`, children: title || children })));
 
-    const Paragraph = JSX(({ size, color, align, font, children }) => (jsx("p", { className: ['font-sans', size, color, align, font].filter(Boolean).join(' '), children: children })));
+    const Paragraph = JSX(({ children, ...style }) => (jsx("p", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
 
     const AccordionItemsList = JSX(({ children }) => (jsx("ul", { className: "list-none m-0 p-0", children: children })));
 
-    const Accordion = JSX(({ className = '', title, accordionAlignTitle = 'center', description, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 mb-1 last:mb-0 bg-white text-primary-text ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `mb-2.5 ${AlignText[accordionAlignTitle]}`, title: title })) : null, description ? (jsx("div", { className: "mb-2.5", children: jsx(Paragraph, { size: "text-l", children: description }) })) : null, jsx(AccordionItemsList, { children: renderChildren(rest) })] })));
+    const Accordion = JSX(({ className = '', title, accordionAlignTitle = 'center', description, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 mb-1 last:mb-0 ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `mb-2.5 ${AlignText[accordionAlignTitle]}`, title: title })) : null, description ? (jsx("div", { className: "mb-2.5", children: jsx(Paragraph, { size: "text-l", children: description }) })) : null, jsx(AccordionItemsList, { children: renderChildren(rest) })] })));
     Accordion.childrenTypes = ['AccordionItem'];
 
-    const Foldable = JSX(({ isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
+    const Foldable = JSX(({ className = '', 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] }));
+        return isFoldButtonOnTop ? (jsxs("div", { className: className, children: [buttonNode, sectionNode] })) : (jsxs("div", { className: className, children: [sectionNode, buttonNode] }));
     });
 
     const FoldableSection = JSX(({ className = '', isUnfolded, children }) => {
@@ -461,17 +467,11 @@
     const Icon = JSX(({ className = '', imageClassName = '', name = '', alt = `Иконка ${name}`, title = alt, iconVersion = 'color', asSVG, ...imgProps }) => {
         const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
         if (asSVG && iconVersion !== 'normal') {
-            return (jsx(Background, { className: className, children: jsxs("svg", { className: [
-                        getSvgSize(className, imgProps.width),
-                        svgUseStyleMap[iconVersion],
-                        imageClassName,
-                        getInvertStyle(iconVersion),
-                    ].join(' '), ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }) }));
+            return (jsx(Background, { className: className, children: jsxs("svg", { className: style(getSvgSize(imgProps.width), svgUseStyleMap[iconVersion], iconVersion === 'white' ? 'invert' : '', imageClassName), ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }) }));
         }
         return (jsx("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
     });
-    const getInvertStyle = (iconVersion) => iconVersion === 'white' ? 'invert' : '';
-    const getSvgSize = (className, width) => width ? `width: ${width}px ` : 'w-full h-full';
+    const getSvgSize = (width) => (width ? '' : 'w-full h-full');
     const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
 
     const sourcesComparator = (a, b) => {
@@ -518,66 +518,21 @@
         return image.icon ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: image?.iconVersion || 'normal', name: image.icon, ...iconProps })) : (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile, pathPrefix: pathPrefix }));
     });
 
-    const Text = JSX(({ size, color, align, font, children }) => (jsx("span", { className: ['font-sans', size, color, align, font].filter(Boolean).join(' '), children: children })));
+    const Text = JSX(({ children, ...style }) => (jsx("span", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
 
     const icons$1 = ['PlusIcon', 'MinusIcon'];
-    const AccordionItem = JSX(({ className = '', label = '', isExpanded, ...rest }) => (jsx("li", { className: `border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: true, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "grid grid-cols-12 gap-5 [&>*]:p-0", isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(FoldButton$1, { label: label, icon: icons$1[Number(isUnfolded)], onClick: onToggle })) }) })));
+    const AccordionItem = JSX(({ className = '', label = '', isExpanded, ...rest }) => (jsx("li", { className: `border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: true, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "grid grid-cols-12 gap-5 [&>*]:p-0", isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(FoldButton, { label: label, icon: icons$1[Number(isUnfolded)], onClick: onToggle })) }) })));
     AccordionItem.childrenTypes = [];
-    const FoldButton$1 = JSX(({ label, icon, onClick }) => (jsxs("button", { className: "border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer", onClick: onClick, children: [jsx(Text, { size: "text-xl", font: "font-medium", children: label }), jsx(ImgInner, { image: { icon }, className: "text-primary-main flex-shrink-0", width: "24", height: "24", asSVG: true })] })));
-
-    const VersionStyleMap = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
-    };
-    const VersionAdditionalStyleMap = {
-        primary: 'text-secondary-text',
-        secondary: 'text-white',
-    };
-    const VersionWithGrayStyleMap = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
-        gray: 'bg-main-divider text-primary-text',
-    };
-    const GapStyleMap = {
-        XXL: 'gap-12',
-        XL: 'gap-10',
-        L: 'gap-8',
-        M: 'gap-4',
-        S: 'gap-2',
-        XS: 'gap-1',
-        '': '',
-    };
-    const LayoutBackgroundStyleMap = {
-        transparent: '',
-        primary: 'bg-white',
-        secondary: 'bg-primary-main',
-    };
+    const FoldButton = JSX(({ label, icon, onClick }) => (jsxs("button", { className: "border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 cursor-pointer", onClick: onClick, children: [jsx(Text, { size: "text-xl", font: "font-medium", children: label }), jsx(ImgInner, { image: { icon }, className: "text-primary-main flex-shrink-0", width: "24", height: "24", asSVG: true })] })));
 
-    const getIconWithVersion = (icon, version = 'primary') => ({
-        ...icon,
-        iconVersion: icon?.iconVersion ?? (version === 'secondary' ? 'white' : 'color'),
-    });
-
-    const benefitsTextStyleMap = {
-        primary: '',
-        secondary: 'text-white',
-    };
-    const benefitsDescriptionStyleMap = {
-        primary: 'text-secondary-text',
-        secondary: 'text-white opacity-80',
-    };
-    const benefitsIconStyleMap = {
-        primary: 'bg-main-divider text-primary-main',
-        secondary: 'bg-white/30 text-black',
-    };
-    const BenefitsBlock = JSX(({ className = '', title, benefitList, 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 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) })) : null] })));
+    const renderStep = (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$5(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 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)));
     };
-    const renderDescription$5 = (description, version) => {
+    const renderDescription$5 = (description) => {
         const benefitType = description?.benefitType || null;
-        return description && benefitType ? (jsx("div", { className: `text-l-light mt-2 ${benefitsDescriptionStyleMap[version]}`, children: benefitType === 'list'
+        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)
                 : renderTextBenefit(description) })) : null;
     };
@@ -697,6 +652,8 @@
         secondary: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
         white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white active:text-primary-main',
         link: '',
+        transparent: '',
+        '': '',
     };
     const DisabledStyle = 'bg-main-divider text-main-disabled';
     const buttonDisabledStyleMap = {
@@ -704,13 +661,17 @@
         secondary: DisabledStyle,
         white: DisabledStyle,
         link: '',
+        transparent: '',
+        '': '',
     };
     const buttonStyle = 'text-center font-sans select-none';
     const iconStyleMap = {
-        primary: 'group-hover:brightness-0 group-hover:invert',
-        secondary: 'group-hover:brightness-0 group-hover:invert',
-        white: 'group-hover:brightness-0 group-hover:invert',
+        primary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
+        secondary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
+        white: 'group-hover/btn:brightness-0 group-hover/btn:invert',
         link: '',
+        transparent: '',
+        '': '',
     };
 
     const ButtonInner = JSX((props) => {
@@ -724,7 +685,7 @@
         }
         const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-4'}`;
         return [
-            'group flex items-center justify-center',
+            'group/btn flex items-center justify-center',
             isWithText(props) ? withTextStyle : 'h-12 w-12',
             rounded ? 'rounded-full' : '',
         ].join(' ');
@@ -756,37 +717,14 @@
     const RegularButton = JSX(({ className = '', href, rel, target, ariaLabel, version, rounded, onClick, children }) => (jsx("a", { className: getRegularButtonClasses({ className, version, rounded }), href: href, rel: rel, target: target, "aria-label": ariaLabel, role: href ? 'link' : 'button', onClick: onClick, children: children })));
     const DisabledButton = JSX(({ className, ariaLabel, version, rounded, children }) => (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: -1, className: getDisabledButtonClasses({ className, rounded, version }), children: children })));
 
-    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, text, ...rest } = button;
+    const renderButtonsSection = (buttons, { className = '', buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
+    const renderButton = (buttonClassName = '') => (button, index) => {
+        const { text, icon, iconRight, version, ...rest } = button || {};
         const iconVersion = version === 'secondary' ? 'color' : 'white';
-        const leftIcon = renderButtonIcon({ ...icon, iconVersion: iconVersion });
-        const rightIcon = renderButtonIcon({ ...iconRight, iconVersion: iconVersion });
-        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) {
-            return null;
-        }
-        const iconWidth = icon?.size?.width ? `${icon.size.width}` : '24';
-        return jsx(ImgInner, { image: icon, width: iconWidth, height: "24", asSVG: true });
-    };
-
-    const headlineStyles = {
-        transparent: {
-            wrapper: 'bg-transparent',
-            titleColor: 'text-primary-text',
-        },
-        primary: {
-            wrapper: 'bg-white',
-            titleColor: 'text-primary-text',
-        },
-        secondary: {
-            wrapper: 'bg-primary-main',
-            titleColor: 'text-white',
-            descriptionColor: 'text-white/80',
-        },
+        return text ? (jsx(Button, { className: buttonClassName, appendLeft: renderButtonIcon({ ...icon, iconVersion }), appendRight: renderButtonIcon({ ...iconRight, iconVersion }), version: version, text: text, ...rest }, index ? String(index) : '')) : null;
     };
+    const DEFAULT_ICON_W = 24;
+    const renderButtonIcon = (icon) => icon?.icon || icon?.src ? (jsx(ImgInner, { image: icon, width: String(icon?.size?.width || DEFAULT_ICON_W), height: String(DEFAULT_ICON_W), asSVG: true })) : null;
 
     const headlineVersionStyles = {
         XXL: {
@@ -832,20 +770,17 @@
         XS: 'text-xs-light',
     };
 
-    const Headline = JSX(({ className = '', title, description, headlineVersion = 'XL', bgColorHeadline = 'transparent', align = 'text-center', as, ...rest }) => {
-        const style = headlineStyles[bgColorHeadline];
-        const specificStyle = headlineVersionStyles[headlineVersion];
-        return (jsxs(BlockWrapper, { className: `flex flex-col p-12 ${specificStyle.wrapper} ${style.wrapper} ${className}`, ...rest, children: [title ? (jsx(Heading, { className: `whitespace-pre-wrap ${style.titleColor} ${align}`, ...specificStyle?.title, as: as || specificStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { color: style.descriptionColor || style.titleColor, size: specificStyle.descriptionSize, align: align, children: description })) : null] }));
+    const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, version = '', ...rest }) => {
+        const versionStyle = headlineVersionStyles[headlineVersion];
+        return (jsxs(BlockWrapper, { className: style('flex flex-col p-12', versionStyle.wrapper, className), version: version, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { color: "group-data-secondary:text-white/80", size: versionStyle.descriptionSize, align: align, children: description })) : null] }));
     });
 
     const Bonus = JSX((props) => {
         const { className = '', title, description, bonusItems, ...rest } = props;
-        return (jsx(BlockWrapper, { className: `font-sans bg-white p-12 pb-9 ${className}`, ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", ...rest }), jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems?.length
-                            ? bonusItems.map((_, i) => {
-                                return (jsx("div", { className: "flex-grow w-[49%] border border-gray p-9 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0", children: jsxs("div", { className: "flex justify-between w-full", children: [jsxs("div", { className: "flex flex-col justify-between mr-4", children: [jsxs("div", { children: [jsx("div", { className: "text-h4", children: _.title }), jsx("div", { className: "text-xl-light mt-2 max-w-[488px]", children: _.description })] }), _?.buttons?.length ? jsx(ButtonSection, { buttons: _?.buttons }) : null] }), _.bonusItemContent?.bonusType
-                                                ? renderBonusItemContent(_.bonusItemContent)
-                                                : null] }) }, String(i)));
-                            })
+        return (jsx(BlockWrapper, { className: `p-12 pb-9 ${className}`, ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M" }), jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems?.length
+                            ? bonusItems.map((_, i) => (jsx("div", { className: "flex-grow w-[49%] border border-gray p-9 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0", children: jsxs("div", { className: "flex justify-between w-full", children: [jsxs("div", { className: "flex flex-col justify-between mr-4", children: [jsxs("div", { children: [jsx("div", { className: "text-h4", children: _.title }), jsx("div", { className: "text-xl-light mt-2 max-w-[488px]", children: _.description })] }), renderButtonsSection(_?.buttons)] }), _.bonusItemContent?.bonusType
+                                            ? renderBonusItemContent(_.bonusItemContent)
+                                            : null] }) }, String(i))))
                             : null })] }) }));
     });
     const renderBonusItemContent = (bonusItemContent) => (jsx("div", { children: bonusItemContent.bonusType === 'count'
@@ -854,7 +789,7 @@
     const renderBonusCount = (_) => (jsxs("div", { className: "relative -bottom-3 h-auto flex items-end mt-14 shrink-0", children: [_.bonusCount ? (jsx("span", { className: "font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7", children: _.bonusCount })) : null, _.bonusName ? (jsx("span", { className: "text-h2 bg-clip-text text-transparent bg-green-to-yellow", children: _.bonusName })) : null] }));
     const renderBonusImage = (_) => _.image ? jsx(ImgInner, { className: `w-12 h-12 min-w-12 p-3 rounded-full`, image: _.image }) : null;
 
-    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-12 flex flex-col text-center ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-8", title: title, description: subtitle, headlineVersion: "M", ...rest }), bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] })));
+    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-12 flex flex-col text-center ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-8", title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] })));
     const renderBonusBenefit = ({ icon, label, description }, i) => {
         return (jsxs("div", { className: "flex flex-col items-center text-h6", children: [description ? jsx("span", { children: description }) : null, icon ? jsx(ImgInner, { image: icon, height: "180", width: "auto", className: "h-[180px] w-auto" }) : null, jsx("div", { children: label ? jsx("span", { children: label }) : null })] }, String(i)));
     };
@@ -873,19 +808,16 @@
 
     const BusinessCard = JSX((props) => {
         const { title, image, cardItems, button } = props;
-        return (jsxs("div", { className: "border-gray border p-9 w-1/2", children: [image ? (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? jsx(ImgInner, { image: image, asSVG: true }) : null] })) : null, title ? jsx(Heading, { headingType: "h4", title: title, className: "mb-6" }) : null, cardItems?.length ? jsx("ul", { children: cardItems.map((_, i) => renderItem(_, String(i))) }) : null, button?.text ? renderButton({ button, buttonClassName: 'mt-6' }) : null] }));
+        return (jsxs("div", { className: "border-gray border p-9 w-1/2", children: [image ? (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? jsx(ImgInner, { image: image, asSVG: true }) : null] })) : null, title ? jsx(Heading, { headingType: "h4", title: title, className: "mb-6" }) : null, cardItems?.length ? jsx("ul", { children: cardItems.map((_, i) => renderItem(_, String(i))) }) : null, renderButtonsSection([button], { buttonClassName: 'mt-6' })] }));
     });
     const renderItem = (item, key) => {
         const { icon, text } = item;
         return (jsxs("li", { className: "flex items-center gap-3.5 mb-3 last:mb-0", children: [icon?.icon ? (jsx(ImgInner, { image: icon, className: "w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider", asSVG: true })) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, jsx("span", { className: "text-xl-light", children: text })] }, key));
     };
 
-    const BusinessBlock = JSX(({ className = '', title, cards, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans bg-white p-12 pb-9 ${className}`, ...rest, children: [jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }), jsx("div", { className: "flex gap-5", children: cards?.length ? cards.map((_, i) => jsx(BusinessCard, { ..._ }, String(i))) : null })] })));
+    const BusinessBlock = JSX(({ className = '', title, cards, ...rest }) => (jsxs(BlockWrapper, { className: `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 ButtonBlock = JSX(({ button, ...rest }) => (jsx(BlockWrapper, { ...rest, children: renderButtonsSection([button]) })));
 
     const useCarouselControls = (props) => {
         const { itemCount, visibleItemCount, isCyclic } = props;
@@ -918,9 +850,9 @@
         return false;
     }
 
-    const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `group shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
+    const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `group/btn shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
         ? 'bg-secondary-light text-secondary-text'
-        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(ImgInner, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover:text-primary-main", width: "16", height: "16", asSVG: true }) })));
+        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(ImgInner, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover/btn:text-primary-main", width: "16", height: "16", asSVG: true }) })));
     const ScrollLeftButton = JSX((props) => (jsx(ArrowButton, { ...props, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })));
     const ScrollRightButton = JSX((props) => (jsx(ArrowButton, { ...props, className: `${props.className || ''} rotate-180`, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })));
 
@@ -981,10 +913,6 @@
 
     const Rate = JSX(({ rate, title = 'Ставка', unit, rateBlockClassName }) => (jsxs("div", { children: [jsx("div", { className: "text-l-light text-secondary-text", children: title }), jsxs("div", { className: "flex justify-start", children: [jsx("span", { className: `block gradient-color-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`, children: String(rate).replace('.', ',') }), unit ? jsx("span", { className: "gradient-color-text text-[65px] leading-[75px]", children: unit }) : ''] })] })));
 
-    function renderButtonSection(buttons) {
-        return buttons?.length ? (jsx(ButtonSection, { buttons: buttons, className: "flex flex-col mt-7 gap-2" })) : null;
-    }
-
     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));
@@ -1152,7 +1080,7 @@
                             moneyValue: restExpenseValue,
                             step: 500,
                             isShowItems: false,
-                        }, handleRestExpenseValue)] }), jsx("div", { children: monthBonus >= 0 ? (jsx(Rate, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u043C\u0435\u0441\u044F\u0446", rate: monthBonus, rateBlockClassName: "tracking-[-14px]" })) : null }), jsxs("div", { className: "w-full max-w-[350px]", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonSection(buttons), renderFootnote(footnote)] })] }));
+                        }, handleRestExpenseValue)] }), jsx("div", { children: monthBonus >= 0 ? (jsx(Rate, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u043C\u0435\u0441\u044F\u0446", rate: monthBonus, rateBlockClassName: "tracking-[-14px]" })) : null }), jsxs("div", { className: "w-full max-w-[350px]", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
     });
 
     const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
@@ -1168,7 +1096,7 @@
         },
     ];
     const Checkbox = JSX(({ className, text, checked, isRadio, onChange }) => {
-        return (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer group", children: [jsx("input", { className: `peer appearance-none w-5 h-5 border-solid cursor-pointer group-hover:border-primary-hover
+        return (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer group/box", children: [jsx("input", { className: `peer appearance-none w-5 h-5 border-solid cursor-pointer group-hover/box:border-primary-hover
         ${isRadio ? 'rounded-full border-2' : 'rounded checked:bg-primary-main border'}
         ${checked ? 'border-black' : 'border-gray'}
         checked:border-primary-main m-0`, type: "checkbox", onChange: (e) => onChange && onChange(e.target.checked), checked: checked }), isRadio ? (jsx("div", { className: "left-1 w-3 h-3 rounded-full bg-primary-main hidden absolute peer-checked:block" })) : (jsx(SVG, { paths: CHECK_PATHS, className: "hidden absolute left-1 ml-px peer-checked:block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" })), text ? jsx("span", { className: "font-sans ml-3 text-l-light", children: text }) : null] }) }));
@@ -1250,7 +1178,7 @@
             monthsValue,
         };
         const calculatorParams = useCreditCalculatorParams(userInputParams, sourceBookDir);
-        return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма кредита, ₽', { ...calculatorParams, step: 500 }, handleMoneyValue), renderMonthsInput('Срок кредита, месяцев', calculatorParams, handleMonthsValue), jsxs("div", { className: "mt-7", children: [jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", checked: isSalaryClient, onChange: toggleIsSalaryClient }), jsx(Checkbox, { className: "mt-3", text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", checked: isStateEmployee, onChange: toggleIsStateEmployee }), jsx(Checkbox, { className: "mt-3", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", checked: isInsurance, onChange: toggleIsInsurance })] })] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.finalRate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: isAnnuity ? 'Ежемесячный платеж' : 'Платёж в первый месяц', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), jsx(RadioButtonGroup, { items: paymentTypeItems, checkedItem: isAnnuity ? ANNUITY : DIFFERENTIAL, onChange: (text) => toggleIsAnnuity(text === ANNUITY) }), renderButtonSection(buttons), renderFootnote(footnote)] })] }));
+        return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма кредита, ₽', { ...calculatorParams, step: 500 }, handleMoneyValue), renderMonthsInput('Срок кредита, месяцев', calculatorParams, handleMonthsValue), jsxs("div", { className: "mt-7", children: [jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", checked: isSalaryClient, onChange: toggleIsSalaryClient }), jsx(Checkbox, { className: "mt-3", text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", checked: isStateEmployee, onChange: toggleIsStateEmployee }), jsx(Checkbox, { className: "mt-3", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", checked: isInsurance, onChange: toggleIsInsurance })] })] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.finalRate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: isAnnuity ? 'Ежемесячный платеж' : 'Платёж в первый месяц', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), jsx(RadioButtonGroup, { items: paymentTypeItems, checkedItem: isAnnuity ? ANNUITY : DIFFERENTIAL, onChange: (text) => toggleIsAnnuity(text === ANNUITY) }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
     });
 
     const useDepositCalculatorParams = (userInputParams, sourceBookDir) => {
@@ -1305,7 +1233,7 @@
                             ...calculatorParams,
                         }, handleMoneyValue), renderMonthsInput('Срок вклада, месяцев', {
                             ...calculatorParams,
-                        }, handleMonthsValue)] }), jsx(Rate, { rate: rate || 1, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [income ? (jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" })) : null, finalSum ? (jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" })) : null, jsx(RadioButtonGroup, { items: depositTypeItems, checkedItem: isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM, onChange: (text) => toggleIsMonthlyInterestPayment(text === EVERY_MONTH) }), renderButtonSection(buttons), renderFootnote(footnote)] })] }));
+                        }, handleMonthsValue)] }), jsx(Rate, { rate: rate || 1, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [income ? (jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" })) : null, finalSum ? (jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" })) : null, jsx(RadioButtonGroup, { items: depositTypeItems, checkedItem: isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM, onChange: (text) => toggleIsMonthlyInterestPayment(text === EVERY_MONTH) }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
     });
 
     const EmbeddableCalcBlocks = {
@@ -1333,7 +1261,7 @@
             itemCount: calculatorTabs?.length,
             visibleItemCount: COLUMNS_FOR_SCROLL,
         });
-        return (jsxs(BlockWrapper, { className: `box-border overflow-hidden relative font-sans w-100 text-primary-text bg-white ${className}`, ...rest, children: [jsxs("div", { className: "bg-white", children: [tabsNav.length > 1
+        return (jsxs(BlockWrapper, { className: `box-border overflow-hidden relative w-100 ${className}`, ...rest, children: [jsxs("div", { className: "bg-white", children: [tabsNav.length > 1
                             ? renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })
                             : null, renderArrows({
                             ...controls,
@@ -1437,7 +1365,7 @@
             ? getDisabledButtonClasses({ version: button?.version })
             : getRegularButtonClasses({ className: 'text-white', version: button?.version });
         const link = useLink();
-        return (jsxs(BlockWrapper, { className: `p-12 flex flex-col items-center font-sans bg-white ${className}`, ...rest, children: [title ? jsx(Heading, { className: "max-w-[684px] pb-9", headingType: "h2", title: title }) : null, jsxs("form", { className: "w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, value: value, onChange: handleChange, valid: value === '' || !isDisabled, placeholder: placeholder, label: label }), button?.text ? (jsx("button", { type: "submit", className: `w-full p-4 mt-6 ${buttonStyle} `, disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
+        return (jsxs(BlockWrapper, { className: `p-12 flex flex-col items-center ${className}`, ...rest, children: [title ? jsx(Heading, { className: "max-w-[684px] pb-9", headingType: "h2", title: title }) : null, jsxs("form", { className: "w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, value: value, onChange: handleChange, valid: value === '' || !isDisabled, placeholder: placeholder, label: label }), button?.text ? (jsx("button", { type: "submit", className: `w-full p-4 mt-6 ${buttonStyle} `, disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
     });
 
     const mapChildren = (mapper) => (children) => {
@@ -1447,8 +1375,6 @@
         return Array.isArray(children) ? children.map(mapper) : mapper(children, 0);
     };
 
-    const style = (...atoms) => atoms.filter(Boolean).join(' ');
-
     const SwipeListItem = JSX(({ className = '', style, idx, activeIndex, observerOptions, children, onIntersection }) => {
         const observerCallback = useCallback((entries) => {
             if (entries.length && onIntersection) {
@@ -1474,15 +1400,17 @@
             onVisibleIndicesChange && onVisibleIndicesChange(getVisibleIndices(itemsVisibilityList));
         }, [onVisibleItemsChange, onVisibleIndicesChange]);
         const additionPadding = visibleItemCount > 0 ? gap * Number(visibleItemCount) - 1 : 0;
+        const isVerticalList = listType === 'vertical-list';
         const isHorizontalList = listType === 'horizontal-list';
         const containerStyle = {
-            ...(isHorizontalList ? getContainerStyle(padding, additionPadding) : {}),
+            ...(isHorizontalList ? getContainerOffset(padding, additionPadding) : {}),
+            ...(isVerticalList ? getContainerHeight(containerRef) : {}),
             gap: `${gap}px`,
         };
-        return (jsx("div", { className: style('box-border overflow-auto no-scrollbar', listType, className), style: containerStyle, role: "list", ref: containerRef, children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: style(snapAlign, visibleItemCount ? childStyleMap[visibleItemCount - 1] : '', listType === 'vertical-list' ? 'h-full' : ''), style: isHorizontalList ? getContainerStyle(padding / 4) : {}, activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
+        return (jsx("div", { className: style('box-border overflow-auto no-scrollbar', listType, className), style: containerStyle, role: "list", ref: containerRef, children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: style(snapAlign, visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''), style: isHorizontalList ? getContainerOffset(padding / 4) : {}, activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
     });
     // Styles used to compensate outer container padding to get rid of clipping effect
-    const getContainerStyle = (padding, additionalPadding = 0) => ({
+    const getContainerOffset = (padding, additionalPadding = 0) => ({
         marginLeft: `${-padding}px`,
         marginRight: `${-padding}px`,
         paddingLeft: `${padding}px`,
@@ -1492,6 +1420,9 @@
         .map((_, i) => [_, i])
         .filter(([_]) => _ && _.intersectionRatio >= 0.9)
         .map(([, i]) => i);
+    const getContainerHeight = (ref) => ({
+        height: ref?.current?.firstElementChild?.clientHeight || 0,
+    });
 
     const areArraysEqual = (as, bs) => as === bs || Boolean(as && bs && as?.length === bs?.length && as.every((_, i) => _ === bs[i]));
 
@@ -1561,16 +1492,16 @@
     };
 
     const ITEMS_GAP = 4;
-    const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px]';
+    const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px] pointer-events-none';
     const scrollButtonStyle = 'absolute top-[calc(50%-12px)] z-50';
-    const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, ...rest }) => {
+    const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, isPadding = true, ...rest }) => {
         const { blocks: childBlocks } = rest.block || {};
         const count = itemCount || childBlocks?.length || 0;
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount: count,
             isCyclic,
         });
-        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)] }) }));
+        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: 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',
@@ -1583,42 +1514,37 @@
         'CarouselInvestmentCard',
     ];
     const renderScrollButtons = ({ scrollLeft, scrollRight, canScrollLeft, canScrollRight, }) => (jsxs("div", { children: [canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-8`, onClick: scrollLeft })) : null, canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle} right-8`, onClick: scrollRight })) : null] }));
+    const getPaddingStyle = (isPadding) => (isPadding ? 'p-12' : '');
 
     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]',
     };
-    const CarouselCard = JSX(({ className = '', button, description, title, version = 'normal' }) => (jsx("section", { className: `flex pb-9 pl-12 border-box ${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 p-10 border border-solid border-green-light", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "L", align: "text-left" }), button ? jsx("div", { className: "mt-14", children: renderButton({ button }) }) : null] })] }) })));
+    const CarouselCard = JSX(({ className = '', button, description, title, carouselVersion = 'normal' }) => (jsx("section", { className: `flex pb-9 pl-12 border-box ${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 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 = {
         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-gray 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 CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: `border box-border border-gray p-7 min-w-[392px] flex flex-col justify-left ${className}`, role: "listitem", ...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 BorderVersionStyleMap = {
-        primary: 'border-gray',
-        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',
+        1: 'flex-col',
+        2: 'gap-x-10 flex-wrap',
     };
-    const CarouselInvestmentCard = JSX(({ additionalDescription, cardsList = [], className = '', columnsMode = 1, description, image, title, version = 'primary', ...rest }) => {
+    const CarouselInvestmentCard = JSX(({ additionalDescription, cardsList = [], className = '', columnsMode = 1, description, image, title, ...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],
+                'relative box-border text-left p-9 w-[697px]',
+                'border border-solid border-gray group-data-secondary:border-white/50',
                 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] }) }));
+            ].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: "group-data-primary:text-secondary-text", children: additionalDescription })) : null] }), cardsList.length ? (jsx("ul", { className: `list-none m-0 p-0 flex gap-y-2 ${cardColumnsModeStyleMap[columnsMode]}`, children: renderCardList(cardsList, columnsMode) })) : null] }) }));
     });
     const renderCardList = (cardsList, columnsMode) => {
         const CARDS_COUNT_MAP = [4, 9];
@@ -1628,45 +1554,33 @@
 
     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`;
+  justify-between items-center group-hover/link:text-primary-main z-10`;
     const LINK_BORDER_CLASS_NAME = 'bg-transparent border-white border h-[70px] absolute w-[316px] top-0';
     const LinkButton = JSX(({ text, href = '', target = '', className = '' }) => {
         if (!text) {
             return null;
         }
-        return (jsxs("div", { className: `relative group cursor-pointer w-[328px] h-[82px] ${className}`, children: [jsxs("a", { className: LINK_CLASS_NAME, role: "link", href: href, target: target, children: [jsx("div", { className: "p-0.5", children: text }), jsx("div", { className: "w-6 h-6", children: jsx(ImgInner, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border brightness-0 group-hover:brightness-100", image: { icon: 'ArrowRightIcon', iconVersion: 'black' }, imageClassName: "group-hover:text-primary-main", width: "24", height: "24", asSVG: true }) })] }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mx-1.5 mt-1.5` }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mt-3 mr-3` })] }));
+        return (jsxs("div", { className: `relative group/link cursor-pointer w-[328px] h-[82px] ${className}`, children: [jsxs("a", { className: LINK_CLASS_NAME, role: "link", href: href, target: target, children: [jsx("div", { className: "p-0.5", children: text }), jsx("div", { className: "w-6 h-6", children: jsx(ImgInner, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border brightness-0 group-hover/link:brightness-100", image: { icon: 'ArrowRightIcon', iconVersion: 'black' }, imageClassName: "group-hover/link:text-primary-main", width: "24", height: "24", asSVG: true }) })] }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mx-1.5 mt-1.5` }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mt-3 mr-3` })] }));
     });
 
     const MAX_LINKS_COUNT = 12;
-    const CarouselLinks = JSX(({ className = '', additionalDescription, description, links, title, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `bg-primary-main flex w-full p-10 overflow-hidden justify-between font-sans ${className}`, ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-9 text-white text-xl-light", children: [jsx(Headline, { title: title, as: "h1", description: description, align: "text-left", className: "p-0", bgColorHeadline: "secondary" }), additionalDescription ? (jsx("div", { className: "pt-6", children: jsx(Paragraph, { children: additionalDescription }) })) : null] }), links?.length ? renderLinks(links) : null] }));
+    const CarouselLinks = JSX(({ className = '', additionalDescription, description, links, title, version = 'secondary', ...rest }) => {
+        return (jsxs(BlockWrapper, { className: `flex w-full p-10 overflow-hidden justify-between ${className}`, version: version, ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-9 text-white text-xl-light", children: [jsx(Headline, { className: "p-0", title: title, description: description, as: "h1", align: "text-left" }), additionalDescription ? (jsx("div", { className: "pt-6", children: jsx(Paragraph, { children: additionalDescription }) })) : null] }), links?.length ? renderLinks(links) : null] }));
     });
     const renderLinks = (links) => {
         const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
-        return (jsx(Carousel, { className: "min-w-[832px] w-[832px]", isBlur: false, isCyclic: true, itemCount: itemCount, children: new Array(itemCount).fill(null).map((_, groupIndex) => (jsx("div", { className: "w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start", children: links
+        return (jsx(Carousel, { version: "", className: "min-w-[832px] w-[832px]", isBlur: false, isCyclic: true, itemCount: itemCount, children: new Array(itemCount).fill(null).map((_, groupIndex) => (jsx("div", { className: "w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start", children: links
                     .slice(groupIndex * MAX_LINKS_COUNT, (groupIndex + 1) * MAX_LINKS_COUNT)
                     .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 ListItem = JSX(({ className = '', isDotted = true, children, size = 'M' }) => (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 bg-primary-text group-data-secondary:bg-white ${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',
@@ -1677,35 +1591,24 @@
         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 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 descriptionStyleMap = {
-        primary: 'text-secondary-text',
-        secondary: 'text-white/80',
-    };
-    const BORDER_STYLE = 'box-border border-solid border border-gray ';
-    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$4(description, title), renderItems$2(items, isDotted, version), renderAdditionalDescription$2(additionalDescription, version)] }), renderButton({ button, buttonClassName: 'mt-6' })] }));
+    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), role: "listitem", 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, 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 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, 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 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'),
+    });
 
-    const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans border border-gray flex min-w-[536px] ${VersionStyleMap[version]} ${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$2) }) : null] })] })));
-    const renderList$2 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: `text-h6`, children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
+    const 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)));
 
     const ICONS_MAP = [
         {
@@ -1733,46 +1636,39 @@
             icon: { icon: 'PlayMarketIcon' },
             label: 'Google Play',
         },
+        {
+            origins: ['youtube.com'],
+            icon: { icon: 'YoutubeIcon' },
+            label: 'Youtube',
+        },
     ];
-    const BUTTON_SIZE = {
-        default: ' w-14 h-14',
-        small: ' w-12 h-12',
+    const buttonSizeStyles = {
+        default: 'w-14 h-14',
+        small: 'w-12 h-12',
     };
-    const MediaButton = JSX(({ version = 'primary', isRounded = false, buttonSize = 'default', ...rest }) => {
+    const MediaButton = JSX(({ isRounded = false, buttonSize = 'default', iconVersion = 'color', ...rest }) => {
         const link = useLink();
         const { href, onClick } = link(rest);
         const { icon, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
-        if (!icon) {
-            return null;
-        }
-        const classes = version === 'secondary'
-            ? 'bg-white hover:bg-secondary-hover'
-            : 'border-solid border border-main-divider hover:border-transparent hover:bg-primary-main';
-        const isPrimary = version === 'primary' ? 'hover:text-black' : '';
-        const rounded = isRounded ? 'rounded-full' : 'rounded-md';
-        return (jsx("a", { className: `flex items-center justify-center group box-border ${classes} ${rounded} ${isPrimary} ${BUTTON_SIZE[buttonSize]}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", onClick: onClick, children: icon ? (jsx(ImgInner, { image: getIconWithVersion(icon), imageClassName: "group-hover:text-white", width: "24", height: "24", asSVG: true })) : null }));
+        const iconWithVersion = icon ? { ...getIconWithVersion(icon), iconVersion } : null;
+        return icon ? (jsx("a", { className: style('group/media flex items-center justify-center box-border', buttonSizeStyles[buttonSize], isRounded ? 'rounded-full' : 'rounded-md', 'border-solid border border-main-divider hover:border-transparent', 'hover:bg-primary-main hover:text-black', 'group-data-secondary:bg-white group-data-secondary:hover:bg-secondary-hover'), href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", onClick: onClick, children: iconWithVersion ? (jsx(ImgInner, { image: iconWithVersion, imageClassName: "group-hover/media:text-white", width: "24", height: "24", asSVG: true })) : null })) : null;
     });
 
-    const SocialMedia = JSX(({ className = '', media, version, isRounded = false, buttonSize, children }) => (jsxs("div", { className: "font-sans", children: [jsx("div", { className: `flex gap-2.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { version: version, isRounded: isRounded, buttonSize: buttonSize, ..._ }, String(index)))) }), jsx("span", { className: "text-s-light text-secondary-text", children: children })] })));
+    const SocialMedia = JSX(({ className = '', media, isRounded = false, buttonSize, children }) => (jsxs("div", { className: "font-sans", children: [jsx("div", { className: `flex gap-2.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { isRounded: isRounded, buttonSize: buttonSize, ..._ }, String(index)))) }), jsx("span", { className: "text-s-light text-secondary-text", children: children })] })));
 
-    const CarouselRecommendationCard = JSX(({ button, className = '', description, image, items = [], socialMedia = [], title, version = 'primary', ...rest }) => {
+    const CarouselRecommendationCard = JSX(({ button, className = '', description, image, items = [], socialMedia = [], title, ...rest }) => {
         const tileTitle = title ? (jsx(Heading, { headingType: "h5", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
         const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
-        return (jsx(BlockWrapper, { className: `relative text-left border border-solid box-border p-7 min-w-[524px]
-        ${BorderVersionStyleMap[getOmitVersion(version)]}
-        ${VersionWithGrayStyleMap[version]}
-        ${className}`, ...rest, children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? jsx("span", { className: "mb-2", children: description }) : null, items.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items, version: version })) : null, socialMedia.length ? (jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia, version: getOmitVersion(version) })) : null, button?.text ? jsx("div", { className: "pt-2 mt-16", children: renderButton({ button }) }) : null] }) }) }));
+        const 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] text-left box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), ...rest, children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? jsx("span", { className: "mb-2", children: description }) : null, items.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia }) : null, renderButtonsSection([button], { className: 'pt-2 mt-16' })] }) }) }));
     });
-    const getOmitVersion = (version) => version === 'gray' ? 'primary' : version;
 
     const VISIBLE_CELLS_COUNT = 1;
     const CarouselTariffsCard = JSX(({ className = '', title, icon, isHighlighting, button, cardCells = [], ...rest }) => {
         const cellsNode = cardCells.map(renderCardInfo);
         const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
         const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
-        return (jsxs(BlockWrapper, { className: `font-sans relative bg-white border border-gray min-w-[322px] p-8 flex flex-col
-        ${getHitStyle(isHighlighting)}
-        ${className}`, ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock(icon), title ? (jsx(Heading, { className: "text-primary-text text-center pt-2", headingType: "h5", title: title })) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
+        return (jsxs(BlockWrapper, { className: style('relative border border-gray min-w-[322px] p-8 flex flex-col', getHitStyle(isHighlighting), className), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock(icon), title ? jsx(Heading, { className: "text-center pt-2", headingType: "h5", title: title }) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
     });
     const renderIconBlock = (icon) => (jsxs("div", { className: "w-[267px] min-w-[267px] self-center", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null] }));
     const getHitStyle = (isHighlighting) => isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-7';
@@ -1784,7 +1680,7 @@
         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, button ? renderButton({ button, buttonClassName: 'mt-5 w-full' }) : null] })));
+    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]';
@@ -1795,7 +1691,7 @@
             itemCount: cards?.length,
             visibleItemCount: CARD_VIEW_COUNT$1,
         });
-        return (jsxs(BlockWrapper, { className: `bg-white relative font-sans p-12 overflow-hidden text-center ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", ...rest }), jsx("div", { className: "flex duration-1000 gap-3.5 mt-8", style: { transform: `translateX(-${activeIndex * CARD_SHIFT$1}px)` }, role: "list", children: cards?.length ? cards.map((card, i) => jsx(CatalogCard, { ...card }, String(i))) : null }), renderArrows({
+        return (jsxs(BlockWrapper, { className: `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',
@@ -1803,13 +1699,13 @@
     });
 
     const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
-    const BORDER_CLASSES$1 = 'border-gray border-solid border';
+    const BORDER_CLASSES = 'border-gray border-solid border';
     const DIVIDER_CLASSES$1 = 'border-main-divider border border-t-0 border-x-0';
     const FIRST_CELL_CLASSES$1 = 'w-[200px] mr-6';
     const COLS_LENGTH_FOR_SCROLL$1 = 3;
     const COLUMN_WIDTH$2 = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px
 
-    const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES$1} ${GRADIENT}`, role: "columnheader", children: [icon && !image?.src && (jsx(ImgInner, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: getIconWithVersion(icon), width: "63", height: "63", asSVG: true })), image?.src && jsx(ImgInner, { className: "mb-[18px]", image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs-light font-medium py-[11px]", children: link.text }) }) }))] })));
+    const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES} ${GRADIENT}`, role: "columnheader", children: [icon && !image?.src && (jsx(ImgInner, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: getIconWithVersion(icon), width: "63", height: "63", asSVG: true })), image?.src && jsx(ImgInner, { className: "mb-[18px]", image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs-light font-medium py-[11px]", children: link.text }) }) }))] })));
 
     const carouselContainerClassesMap = {
         comparison: 'flex gap-4 duration-1000',
@@ -1822,7 +1718,7 @@
     const ComparisonTableColumnHeaders = JSX(({ colHeaders, activeIndex }) => (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES$1, role: "columnheader" }), jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$2, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header }, String(i)))) })] })));
 
     const TableCell = JSX(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
-        const cellWrapperClasses = `w-80 box-border flex flex-col ${BORDER_CLASSES$1} ${!isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md'} ${isFillGradient ? GRADIENT : ''}`;
+        const cellWrapperClasses = `w-80 box-border flex flex-col ${BORDER_CLASSES} ${!isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md'} ${isFillGradient ? GRADIENT : ''}`;
         const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES$1} ${isFillGradient && isFirstRow ? 'border-t' : ''} ${!isLastRow ? 'border-solid' : 'border-b-0'}`;
         return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { className: cellClasses, children: cell.map((item, i) => renderCellInner$1(item, i, isFillGradient)) }) }));
     });
@@ -1865,15 +1761,15 @@
     const ComparisonTable = JSX(({ className = '', title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, ...rest }) => {
         const [isShowAllRow, setIsShowAllRow] = useState(!visibleRowLength);
         const handleToggle = useCallback(() => setIsShowAllRow((_) => !_), []);
-        return (jsxs(BlockWrapper, { className: `bg-white font-sans py-12 pl-12 overflow-hidden text-primary-text relative ${className}`, ...rest, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center mb-9 mx-auto", title: title }), jsx(ComparisonTableBody, { columns: columns, rowHeaders: rowHeaders, isShowAllRow: isShowAllRow, isColoredFirstColumn: isColoredFirstColumn, visibleRowLength: visibleRowLength }), visibleRowLength
+        return (jsxs(BlockWrapper, { className: `py-12 pl-12 overflow-hidden relative ${className}`, ...rest, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center mb-9 mx-auto", title: title }), jsx(ComparisonTableBody, { columns: columns, rowHeaders: rowHeaders, isShowAllRow: isShowAllRow, isColoredFirstColumn: isColoredFirstColumn, visibleRowLength: visibleRowLength }), visibleRowLength
                     ? renderShowMoreToggleButton({ isShowAllRow, onClick: handleToggle })
                     : null] }));
     });
     const renderShowMoreToggleButton = ({ isShowAllRow, onClick, }) => (jsx("div", { className: "pr-12", children: jsxs("div", { className: "flex w-full", children: [jsx("div", { className: FIRST_CELL_CLASSES$1 }), jsx("button", { onClick: onClick, className: "mt-5 flex-1 border-gray border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main", children: jsx("div", { className: "font-sans text-xs-light font-medium py-3", children: !isShowAllRow ? 'Показать все параметры' : 'Скрыть' }) })] }) }));
 
-    const ContactsBlock = JSX(({ className = '', contacts, info, version = 'secondary', ...rest }) => (jsxs(BlockWrapper, { className: `${VersionStyleMap[version]} flex p-12 ${className}`, ...rest, children: [info?.length ? renderBlocks(info, version) : null, contacts?.length ? renderBlocks(contacts, version) : null] })));
-    const renderBlocks = (info, version) => (jsx("div", { className: "flex grow basis-0", children: info.map((column, index) => renderBlocksColumn({ column, index, version })) }));
-    const renderBlocksColumn = ({ column, index, version }) => column ? (jsx("div", { className: "flex flex-col grow basis-0 pr-11 last:pr-0", children: column.map(({ title = '', description, additionalDescription, button }, key) => (jsxs("div", { className: "mt-6 first:mt-0", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "XS", align: "text-left", bgColorHeadline: version }), additionalDescription ? (jsx("div", { className: "mt-1.5 opacity-80", children: jsx(Paragraph, { size: "text-m-light", children: additionalDescription }) })) : null, button ? jsx(Button, { className: "mt-6", ...button }) : null] }, String(key)))) }, `col-${String(index)}`)) : null;
+    const ContactsBlock = JSX(({ className = '', contacts, info, version = 'secondary', ...rest }) => (jsxs(BlockWrapper, { className: `flex p-12 ${className}`, version: version, ...rest, children: [info?.length ? renderBlocks(info) : null, contacts?.length ? renderBlocks(contacts) : null] })));
+    const renderBlocks = (info) => (jsx("div", { className: "flex grow basis-0", children: info.map((column, index) => renderBlocksColumn({ column, index })) }));
+    const renderBlocksColumn = ({ column, index }) => column ? (jsx("div", { className: "flex flex-col grow basis-0 pr-11 last:pr-0", children: column.map(({ title = '', description, additionalDescription, button }, key) => (jsxs("div", { className: "mt-6 first:mt-0", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "XS", align: "text-left" }), additionalDescription ? (jsx("div", { className: "mt-1.5 opacity-80", children: jsx(Paragraph, { size: "text-m", font: "font-light", children: additionalDescription }) })) : null, button ? jsx(Button, { className: "mt-6", ...button }) : null] }, String(key)))) }, `col-${String(index)}`)) : null;
 
     const renderErrorContent = (error) => {
         if (error?.errorContentType === 'Image' && error?.image) {
@@ -1975,7 +1871,7 @@
             setSelectedItem(value || { key: '', text: '' });
         }, [value]);
         return (jsxs("div", { className: `${className}`, ref: wrapperRef, children: [label ? jsx("span", { className: "mb-2 flex text-primary-text", children: label }) : null, jsxs("div", { className: `relative ${isOpen ? 'z-20' : 'z-10'}`, children: [jsxs("div", { className: `text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
-            ${getBorderStyle(isBorder)}`, onClick: () => setIsOpen(!isOpen), children: [jsx("p", { className: "p-4 pr-8 h-14 overflow-hidden text-ellipsis whitespace-nowrap", children: selectedItem?.text || placeholder }), jsx(Icon, { name: "ArrowUpIcon", width: "16", height: "16", className: `absolute right-3 ${isOpen ? '' : 'rotate-180'}` })] }), options?.length ? (jsx("div", { className: `h-0 ${renderOptionsStyle(isOpen)}`, children: jsx("div", { className: `bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`, children: options.map(renderOption(choiceOption, isOpen, isSelected)) }) })) : null] })] }));
+            ${getBorderStyle$1(isBorder)}`, onClick: () => setIsOpen(!isOpen), children: [jsx("p", { className: "p-4 pr-8 h-14 overflow-hidden text-ellipsis whitespace-nowrap", children: selectedItem?.text || placeholder }), jsx(Icon, { name: "ArrowUpIcon", width: "16", height: "16", className: `absolute right-3 ${isOpen ? '' : 'rotate-180'}` })] }), options?.length ? (jsx("div", { className: `h-0 ${renderOptionsStyle(isOpen)}`, children: jsx("div", { className: `bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`, children: options.map(renderOption(choiceOption, isOpen, isSelected)) }) })) : null] })] }));
     });
     const renderOptionsStyle = (isOpen) => (isOpen ? '' : 'overflow-hidden');
     const renderOption = (choiceOption, isOpen, isSelected) => (option, i) => {
@@ -1983,7 +1879,7 @@
                 choiceOption(option);
             }, className: "flex px-4 py-3 cursor-pointer hover:bg-main-divider pr-11 relative", children: [jsx("span", { className: "min-h-6", children: option.text }), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", className: ['absolute right-4 pt-0.5', isSelected(option) && isOpen ? '' : 'hidden'].join(' ') })] }, String(i)));
     };
-    const getBorderStyle = (isBorder) => isBorder ? 'border border-gray rounded-md hover:border-primary-hover' : '';
+    const getBorderStyle$1 = (isBorder) => isBorder ? 'border border-gray rounded-md hover:border-primary-hover' : '';
 
     function renderInput(props) {
         const { placeholder, rates, selected, value, setValue, setSelected } = props;
@@ -2098,7 +1994,7 @@
         currencyRatesBuy.unshift({ currency: { currency: Currency.RUB } });
         const currencyRatesSell = currencyRates.filter((_) => _.saleExchangeRate);
         currencyRatesSell.push({ currency: { currency: Currency.RUB } });
-        return (jsx(BlockWrapper, { className: `bg-white text-primary-text font-sans p-9 box-border min-h-80 ${className}`, ...rest, children: jsx(BaseTile, { title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap text-h4 mb-5" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-14 pt-4", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[30px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation$1, { address: exchangeRates?.address })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
+        return (jsx(BlockWrapper, { className: `p-9 box-border min-h-80 ${className}`, ...rest, children: jsx(BaseTile, { title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap text-h4 mb-5" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-14 pt-4", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[30px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation$1, { address: exchangeRates?.address })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
     });
     const getCurrencyRates = (currencies) => {
         return currencies?.filter((_) => _?.currency?.id === 1 || _?.currency?.id === 2) || [];
@@ -2221,10 +2117,10 @@
     const TextInformation = JSX(({ className = '', links }) => (jsxs("div", { className: className, children: [jsx("div", { className: "pt-5", children: jsx("span", { className: "text-xs-light text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex justify-start items-start gap-5 pt-2.5", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ..._ }, String(i)))) })) : null] })));
 
     const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
-    const Footer = JSX(({ className, ...rest }) => {
+    const Footer = JSX(({ className = '', ...rest }) => {
         const fallback = rest.options?.page?.fallback;
         const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, logo } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
-        return (jsxs(BlockWrapper, { tag: "footer", className: `p-9 bg-white font-sans ${className || ''}`, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD, 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]", items: topItems, fallback: fallback })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
+        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]", items: topItems, fallback: fallback })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
     });
 
     const galleryLengthForScrollMap = {
@@ -2240,40 +2136,38 @@
         mini: 276,
     };
 
-    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$3(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$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 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, 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 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 = [], version = 'normal', activeIndex, ...rest }) => (jsxs("div", { children: [jsx(Headline, { ...rest, className: "!p-0", headlineVersion: headlineVersion }), jsx("div", { className: `flex mt-8 ${cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''} duration-1000`, style: { transform: `translateX(-${activeIndex * cardWidthMap[version]}px)` }, role: "list", children: cards?.map((card, i) => renderCard({ card, version }, i)) })] })));
-    function renderCard({ card, version }, i) {
+    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[version]} ${VersionStyleMap[card.version ?? 'primary']} w-full col-span-4`, role: "listitem", children: jsx(GalleryCardInner, { ...card }) }, String(i)));
+        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 = '', version = 'normal', button, ...rest }) => {
+    const GalleryInner = JSX(({ cards = [], className = '', galleryVersion = 'normal', button, ...rest }) => {
         const [activeIndex, controls] = useCarouselControls({
             itemCount: cards?.length,
-            visibleItemCount: galleryLengthForScrollMap[version],
+            visibleItemCount: galleryLengthForScrollMap[galleryVersion],
         });
         const { isScrollAvailable } = controls;
-        return (jsxs(BlockWrapper, { className: `relative font-sans text-primary-text bg-white p-[42px] overflow-hidden flex flex-col ${className}`, ...rest, children: [jsx(GalleryContainer, { cards: cards, version: version, activeIndex: activeIndex, ...rest }), renderArrows({
+        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, button ? renderButton({ button, buttonClassName: 'mt-8 mx-auto' }) : null] }));
+                }), 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, version: "normal" }));
+    const Gallery = JSX((props) => (jsx(GalleryInner, { ...props, galleryVersion: "normal" })));
 
-    const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans bg-white p-12 ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-4", title: title, description: description, headlineVersion: "M", ...rest }), calendar ? renderCalendar(calendar) : null] })));
+    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;
         const colSize = 100 / colCount;
@@ -2307,27 +2201,17 @@
         checkIsHrefSameOrigin(topItem.href, router) ||
         Boolean(projectSettings.BASE_PATH?.startsWith(topItem.href || '/'));
 
-    const TEXT_CLASSES$2 = 'font-sans text-s-light';
-    const LINK_CLASSES$1 = 'inline-block border border-solid bg-transparent text-center no-underline';
-    const TopItem = JSX(({ className = '', active, flat, ariaLabel, bgColor = 'bg-white', children, ...rest }) => {
+    const TopItem = JSX(({ className = '', active, flat, ariaLabel, children, ...rest }) => {
         const link = useLink();
         const { href, target, text, onClick } = link(rest);
-        return (jsx("a", { className: `${getLinkClasses(bgColor, active, flat)} ${className}`, href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": ariaLabel, children: jsx("span", { className: getTextClasses$1(bgColor, active, flat), children: text || children }) }));
+        return (jsx("a", { className: `${getLinkStyle(active, flat)} ${className}`, href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": ariaLabel, children: jsx("span", { className: getTextStyle$1(active, flat), children: text || children }) }));
     });
-    const getLinkClasses = (bgColor, active = false, flat = false) => {
-        let classes = 'border-transparent';
-        if (active) {
-            classes = `rounded-md ${bgColor === 'bg-white' ? 'border-primary-main' : 'border-white'}`;
-        }
-        return `${classes} ${LINK_CLASSES$1} ${flat ? '' : 'px-4 py-2'}`;
-    };
-    const getTextClasses$1 = (bgColor, active = false, flat = false) => {
-        if (bgColor === 'transparent') {
-            return `text-white hover:text-primary-hover ${TEXT_CLASSES$2}`;
-        }
-        const nonActiveAtoms = `${flat ? 'text-primary-text' : 'text-secondary-text'} hover:text-primary-main`;
-        return `${active ? 'text-primary-main' : nonActiveAtoms} ${TEXT_CLASSES$2}`;
-    };
+    const getLinkStyle = (active = false, flat = false) => style('inline-block border border-solid bg-transparent text-center no-underline', active
+        ? 'rounded-md border-primary-main group-data-transparent:border-white'
+        : 'border-transparent', flat ? '' : 'px-4 py-2');
+    const getTextStyle$1 = (active = false, flat = false) => style('font-sans text-s-light', active
+        ? 'text-primary-main'
+        : style(flat ? 'text-primary-text' : 'text-secondary-text', 'hover:text-primary-main'), 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
 
     const STORAGE_DEFAULT_TTL = 86400000; // 24 * 60 * 60 * 1000
     function useCachedAsyncData(key, fetcher, storage = globalThis?.localStorage) {
@@ -2421,7 +2305,7 @@
                 onChangeLocation && onChangeLocation(region);
                 close && close();
             }, children: region.name || '' }) }, region.id));
-    const ForeignOffices = JSX(({ foreignOffices }) => foreignOffices?.length ? (jsxs("div", { className: "border-t border-main-divider mt-7 pt-7", children: [jsx("div", { className: "mb-4", children: jsx(Text, { size: "text-m-light", color: "text-secondary-text", children: "\u041F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435\u043B\u044C\u0441\u0442\u0432\u0430 \u0437\u0430 \u0440\u0443\u0431\u0435\u0436\u043E\u043C:" }) }), jsx("div", { className: "flex gap-10", children: foreignOffices.map((office, i) => (jsx(ForeignOffice, { ...office }, String(i)))) })] })) : null);
+    const ForeignOffices = JSX(({ foreignOffices }) => foreignOffices?.length ? (jsxs("div", { className: "border-t border-main-divider mt-7 pt-7", children: [jsx("div", { className: "mb-4", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: "\u041F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435\u043B\u044C\u0441\u0442\u0432\u0430 \u0437\u0430 \u0440\u0443\u0431\u0435\u0436\u043E\u043C:" }) }), jsx("div", { className: "flex gap-10", children: foreignOffices.map((office, i) => (jsx(ForeignOffice, { ...office }, String(i)))) })] })) : null);
     const ForeignOffice = JSX(({ icon, ...rest }) => {
         const link = useLink();
         const { text, target, href, onClick } = link(rest);
@@ -2430,28 +2314,17 @@
 
     const HeaderSecondaryMenuButton = JSX(({ className = '', children, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 p-0 w-6 h-6 flex items-center bg-inherit cursor-pointer ${className}`, disabled: true, "aria-label": ariaLabel, children: children })));
 
-    const COLORS_MAP = {
-        'bg-white': 'text-primary-text hover:text-primary-main',
-        transparent: 'text-white',
-    };
-    const LINKS_COLORS_MAP = {
-        'bg-white': 'text-secondary-light hover:text-secondary-hover',
-        transparent: 'text-white',
-    };
-    const LINKS_ICON_VERSION_MAP = {
-        'bg-white': 'black',
-        transparent: 'white',
-    };
-    const HeaderSecondaryMenu = JSX(({ className, officesLink, defaultLocation = 'Москва', foreignOffices, bgColor = 'bg-white', }) => {
+    const HeaderSecondaryMenu = JSX(({ version, className, officesLink, defaultLocation = 'Москва', foreignOffices }) => {
         const [isShowLocationModal, setShowLocationModal] = useState(false);
         const [location, onChangeLocation] = useLocation(defaultLocation);
-        const showLocationModal = () => {
+        const showLocationModal = useCallback(() => {
             setShowLocationModal(true);
-        };
-        const hideLocationModal = () => {
+        }, []);
+        const hideLocationModal = useCallback(() => {
             setShowLocationModal(false);
-        };
-        return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: location.name, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: showLocationModal, bgColor: bgColor }), 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", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432", bgColor: bgColor })) : null, jsx(HeaderSecondaryMenuButton, { className: `mr-5 group ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(ImgInner, { image: { icon: 'LoupeIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full pointer-events-none", imageClassName: "group-hover:text-primary-hover group-hover:invert-0 pointer-events-none", asSVG: true }) }), jsx(HeaderSecondaryMenuButton, { className: `${LINKS_COLORS_MAP[bgColor]} group min-w-8 min-h-8`, ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(ImgInner, { image: { icon: 'GridIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full bg-main-divider/20 rounded-full pointer-events-none", imageClassName: "group-hover:text-primary-hover group-hover:invert-0", asSVG: true }) }), isShowLocationModal ? (jsx(Location, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation, close: hideLocationModal })) : null] }));
+        }, []);
+        const iconVersion = version === 'transparent' ? 'white' : 'black';
+        return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: location.name, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", 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", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432" })) : null, jsx(HeaderSecondaryMenuButton, { className: "mr-5 group/btn text-primary-text hover:text-primary-main group-data-transparent:text-white", ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(ImgInner, { image: { icon: 'LoupeIcon', iconVersion }, className: "h-full pointer-events-none", imageClassName: "group-hover/btn:text-primary-hover group-hover/btn:invert-0 pointer-events-none", asSVG: true }) }), jsx(HeaderSecondaryMenuButton, { className: "group/btn min-w-8 min-h-8 text-secondary-light hover:text-secondary-hover group-data-transparent:text-white", ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(ImgInner, { image: { icon: 'GridIcon', iconVersion }, className: "h-full bg-main-divider/20 rounded-full pointer-events-none", imageClassName: "group-hover/btn:text-primary-hover group-hover/btn:invert-0", asSVG: true }) }), isShowLocationModal ? (jsx(Location, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation, close: hideLocationModal })) : null] }));
     });
 
     const findActiveSubItem = (router) => (items = []) => {
@@ -2461,42 +2334,26 @@
             : undefined;
     };
 
-    const DOT_BG_COLORS_MAP = {
-        'bg-white': 'bg-primary-text',
-        transparent: 'bg-white',
-    };
-    const DropdownMenu = JSX(({ className = '', items, activeItem, bgColor }) => {
+    const DropdownMenu = JSX(({ className = '', items, activeItem }) => {
         const link = useLink();
         const [visible, setVisible] = useState(false);
         const handleToggle = useCallback(() => setVisible((_) => !_), []);
         const handleClickOutside = useCallback(() => setVisible(false), []);
         const ref = useOutsideClick(handleClickOutside);
-        return (jsxs("div", { className: `${visible ? 'bg-white rounded-md shadow-blue-gray' : ''} ${className}`, ref: ref, children: [jsx("button", { className: "flex justify-between items-center cursor-pointer h-6 ml-6", "aria-label": `${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, onClick: handleToggle, children: Array(3).fill(bgColor).map(renderDot) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`, "aria-hidden": !visible, children: items?.map((item, i) => (jsx("a", { className: `text-l-light pb-4 hover:text-primary-main ${item === activeItem ? 'text-primary-main' : ''}`, ...link(item), children: item.text }, item.href || String(i)))) })] }));
+        return (jsxs("div", { className: `${visible ? 'bg-white rounded-md shadow-blue-gray' : ''} ${className}`, ref: ref, children: [jsx("button", { className: "group/btn flex justify-between items-center h-6 ml-6", "aria-label": `${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, onClick: handleToggle, children: Array(3)
+                        .fill(null)
+                        .map((_, i) => (jsx("div", { className: "w-[3px] h-[3px] rounded mr-1 bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white" }, String(i)))) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`, "aria-hidden": !visible, children: items?.map((item, i) => (jsx("a", { className: `text-l-light pb-4 hover:text-primary-main ${item === activeItem ? 'text-primary-main' : ''}`, ...link(item), children: item.text }, item.href || String(i)))) })] }));
     });
-    const renderDot = (bgColor, i) => (jsx("div", { className: `w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}` }, String(i)));
 
-    const TEXT_CLASSES$1 = 'font-sans text-l-light';
-    const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-0.5';
-    const HeaderItem = JSX(({ className = '', active, bgColor = 'bg-white', dataItemName, children, ...rest }) => {
+    const HeaderItem = JSX(({ className = '', active, dataItemName, children, ...rest }) => {
         const link = useLink();
         const { href, target, text, onClick } = link(rest);
-        return (jsxs("a", { className: `relative inline-block bg-transparent text-center no-underline ${className}`, href: href, target: target, "data-item-name": dataItemName, onClick: onClick, children: [jsx("span", { className: getTextClasses(bgColor, active), children: text || children }), active ? jsx("div", { className: getBorderClasses(bgColor, active) }) : null] }));
+        return (jsxs("a", { className: `relative inline-block bg-transparent text-center no-underline ${className}`, href: href, target: target, "data-item-name": dataItemName, onClick: onClick, children: [jsx("span", { className: getTextStyle(active), children: text || children }), active ? jsx("div", { className: getBorderStyle(active) }) : null] }));
     });
-    const getTextClasses = (bgColor, active = false) => {
-        let classes = 'text-white';
-        if (bgColor === 'bg-white') {
-            classes = active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main';
-        }
-        return `${classes} ${TEXT_CLASSES$1}`;
-    };
-    const getBorderClasses = (bgColor, active = false) => {
-        if (!active) {
-            return BORDER_CLASSES;
-        }
-        return `${bgColor === 'bg-white' ? 'bg-primary-main' : bgColor} ${BORDER_CLASSES}`;
-    };
+    const getTextStyle = (active = false) => style('font-sans text-l-light', active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main', 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
+    const getBorderStyle = (active = false) => style('absolute left-0 -bottom-3 w-full h-0.5', active ? 'bg-primary-main group-data-transparent:bg-transparent' : '');
 
-    const HeaderSubMenuItem = JSX(({ className, active, bgColor, observerOptions, onVisibilityChange, children, ...linkProps }) => {
+    const HeaderSubMenuItem = JSX(({ className, active, observerOptions, onVisibilityChange, children, ...linkProps }) => {
         const observerCallback = useCallback((entries) => {
             if (!entries.length || !onVisibilityChange) {
                 return;
@@ -2506,10 +2363,10 @@
             onVisibilityChange(entry.isIntersecting);
         }, [onVisibilityChange]);
         const ref = useIntersectionObserver(observerCallback, observerOptions);
-        return (jsx("span", { ref: ref, children: jsx(HeaderItem, { className: className, active: active, bgColor: bgColor, ...linkProps, children: children }) }));
+        return (jsx("span", { ref: ref, children: jsx(HeaderItem, { className: className, active: active, ...linkProps, children: children }) }));
     });
 
-    const HeaderSubMenu = JSX(({ subItems = [], bgColor }) => {
+    const HeaderSubMenu = JSX(({ subItems = [] }) => {
         const router = useRouter();
         const activeSubItem = findActiveSubItem(router)(subItems);
         const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
@@ -2521,35 +2378,34 @@
                 ? handleIntersectionActivation(index)
                 : handleIntersectionDeactivation(index));
         }), [subItems]);
-        return (jsxs("nav", { className: "relative mt-6", children: [jsx("div", { ref: subItemsListRef, className: "overflow-hidden whitespace-nowrap mr-52 pb-3", children: subItems.map((_, i) => (jsx(HeaderSubMenuItem, { className: `mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`, active: _ === activeSubItem, bgColor: bgColor, observerOptions: observerOptions, onVisibilityChange: subItemsVisibilityHandlers[i], ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { className: "absolute w-52 -top-4 right-0 pt-4 z-40", items: dropDownMenuItems, activeItem: activeSubItem, bgColor: bgColor })) : null] }));
+        return (jsxs("nav", { className: "relative mt-6", children: [jsx("div", { ref: subItemsListRef, className: "overflow-hidden whitespace-nowrap mr-52 pb-3", children: subItems.map((_, i) => (jsx(HeaderSubMenuItem, { className: `mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`, active: _ === activeSubItem, observerOptions: observerOptions, onVisibilityChange: subItemsVisibilityHandlers[i], ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { className: "absolute w-52 -top-4 right-0 pt-4 z-40", items: dropDownMenuItems, activeItem: activeSubItem })) : null] }));
     });
     const handleIntersectionActivation = (index) => (prev) => Math.max(prev, index + 1);
     const handleIntersectionDeactivation = (index) => (prev) => Math.min(prev, index);
 
-    const BORDER_COLORS = {
-        'bg-white': 'bg-main-divider',
-        transparent: 'bg-main-divider opacity-30',
+    const BG_COLOR_TO_BLOCK_VERSION = {
+        'bg-white': 'primary',
+        transparent: 'transparent',
     };
-    const Header = JSX(({ bgColor = 'bg-white', className = '', showSubMenu = true, ...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));
-        const topMenu = topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, "aria-label": _.text, bgColor: bgColor, ..._ }, String(i))));
-        return (jsx(BlockWrapper, { tag: "header", className: `pt-6 px-20 ${bgColor} ${className} ${showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5'}`, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { className: "ml-auto", foreignOffices: foreignOffices, defaultLocation: defaultLocation, officesLink: officesLink, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-px ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
+        const topMenu = topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, "aria-label": _.text, ..._ }, String(i))));
+        return (jsx(BlockWrapper, { tag: "header", className: `pt-6 px-20 ${className} ${showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5'}`, 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 }), topMenu, jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", foreignOffices: foreignOffices, defaultLocation: defaultLocation, officesLink: officesLink })] }), jsx("div", { className: `mt-6 h-px bg-main-divider${version === 'transparent' ? ' opacity-30' : ''}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items })) : null] }) }));
     });
 
-    const HorizontalLayout = JSX(({ className = '', gap = 'XS', isPadding = false, version = 'transparent', options, ...rest }) => {
-        const paddingStyle = isPadding ? 'p-12' : '';
-        return (jsx(BlockWrapper, { className: [
-                'grid grid-cols-12',
-                paddingStyle,
-                GapStyleMap[gap],
-                LayoutBackgroundStyleMap[version],
-                className,
-            ]
-                .filter(Boolean)
-                .join(' '), ...rest, children: renderChildren({ ...rest, options: options }) }));
-    });
+    const gapStyles = {
+        XXL: 'gap-12',
+        XL: 'gap-10',
+        L: 'gap-8',
+        M: 'gap-4',
+        S: 'gap-2',
+        XS: 'gap-1',
+        '': '',
+    };
+
+    const HorizontalLayout = JSX(({ className = '', gap = 'XS', isPadding = false, version = 'transparent', ...rest }) => (jsx(BlockWrapper, { className: style('grid grid-cols-12', isPadding ? 'p-12' : '', gapStyles[gap], className), version: version, ...rest, children: renderChildren(rest) })));
     HorizontalLayout.childrenTypes = {
         exclude: ['HorizontalLayout'],
     };
@@ -2609,7 +2465,7 @@
     const InsuranceAmountBlock = JSX(({ className = '', title, insuranceTabs = [], button, ...rest }) => {
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
         const handleActiveSlideIndex = useCallback((_) => setActiveSlideIndex(_), []);
-        return (jsxs(BlockWrapper, { className: `box-border py-12 overflow-hidden relative font-sans w-100 bg-white ${className}`, ...rest, children: [title ? jsx(Heading, { className: "text-center mb-8", title: title, headingType: "h3" }) : null, insuranceTabs?.length > 1 ? (jsx("div", { className: "p-1.5 bg-secondary-light w-fit mx-auto mb-7 rounded-md", children: insuranceTabs.map((item, i) => renderNavButton$1({
+        return (jsxs(BlockWrapper, { className: `box-border py-12 overflow-hidden relative w-100 ${className}`, ...rest, children: [title ? jsx(Heading, { className: "text-center mb-8", title: title, headingType: "h3" }) : null, insuranceTabs?.length > 1 ? (jsx("div", { className: "p-1.5 bg-secondary-light w-fit mx-auto mb-7 rounded-md", children: insuranceTabs.map((item, i) => renderNavButton$1({
                         title: item?.title,
                         i,
                         isActive: Boolean(i === activeSlideIndex),
@@ -2653,7 +2509,7 @@
         if (investmentZeroColumn) {
             colums.unshift(investmentZeroColumn);
         }
-        return (jsx(BlockWrapper, { className: `font-sans bg-white px-9 py-12 ${className}`, ...rest, children: jsxs("div", { className: "container text-m-light", children: [colums?.length ? (jsxs("div", { children: [jsxs("div", { className: "flex items-end relative pl-9 pr-5 text-white", children: [joinList(jsx("div", { className: "w-px h-4 bg-gray" }))(colums.map(renderInvestmentColumn)), jsx("div", { className: "absolute right-[30px] w-px h-4 bg-gray" })] }), jsx("div", { className: "border-t border-gray -mt-2 ml-9 mr-8" }), jsx("div", { className: "flex justify-between text-primary-text mt-3 -mx-10", children: colums.map(renderInvestmentColumnTitle) })] })) : null, items?.length ? (jsx(List, { className: "mt-9 text-l-light max-w-[657px]", items: items, itemClassName: "mb-[7px]", isDotted: isDotted })) : null] }) }));
+        return (jsx(BlockWrapper, { className: `px-9 py-12 ${className}`, ...rest, children: jsxs("div", { className: "container text-m-light", children: [colums?.length ? (jsxs("div", { children: [jsxs("div", { className: "flex items-end relative pl-9 pr-5 text-white", children: [joinList(jsx("div", { className: "w-px h-4 bg-gray" }))(colums.map(renderInvestmentColumn)), jsx("div", { className: "absolute right-[30px] w-px h-4 bg-gray" })] }), jsx("div", { className: "border-t border-gray -mt-2 ml-9 mr-8" }), jsx("div", { className: "flex justify-between text-primary-text mt-3 -mx-10", children: colums.map(renderInvestmentColumnTitle) })] })) : null, items?.length ? (jsx(List, { className: "mt-9 text-l-light max-w-[657px]", items: items, itemClassName: "mb-[7px]", isDotted: isDotted })) : null] }) }));
     });
     const renderInvestmentColumn = (column, i, arr) => {
         const isSecondColumn = i === 1;
@@ -2694,23 +2550,23 @@
         return index !== -1 ? href.substring(index + 1) : '';
     };
 
-    const LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full box-border ${className}`, iconClassName: "mr-2.5 min-w-6 min-h-6", textClassName: "self-center text-l-light", suffixClassName: "text-secondary-text group-hover:text-primary-main", doc: doc, icon: icon })));
+    const LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full box-border ${className}`, iconClassName: "mr-2.5 min-w-6 min-h-6", textClassName: "self-center text-l-light", suffixClassName: "text-secondary-text group-hover/item:text-primary-main", doc: doc, icon: icon })));
 
     const LinkDocsList = JSX(({ className, documents, columnsMode = 'double', icon }) => {
-        return documents?.length ? (jsx("div", { className: className, role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { className: "group flex align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main", doc: doc, icon: icon }) }, String(i)))) })) : null;
+        return documents?.length ? (jsx("div", { className: className, role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { className: "group/item flex align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main", doc: doc, icon: icon }) }, String(i)))) })) : null;
     });
 
     const linkColumnsModeStyleMap = {
         double: 'flex gap-x-5 gap-y-[26px] flex-wrap',
         single: 'flex gap-3.5 flex-col',
     };
-    const LinkDocs = JSX(({ className = '', title, description, align = 'text-center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-12 bg-white ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, align: align, headlineVersion: "M", as: "h2", ...rest }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] })));
+    const 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, version: "mini" })));
+    const MiniGallery = JSX((props) => (jsx(GalleryInner, { ...props, galleryVersion: "mini" })));
 
     const getColSpan = (className) => {
         const colSpanPrefix = 'col-span-';
-        const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
+        const colSpanStr = className?.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
         return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
     };
 
@@ -2728,17 +2584,14 @@
     }
 
     const MobileAppTile = JSX(({ className = '', title = 'Мобильное приложение', qr, buttons, version = 'primary', items, image, headingType = 'h4', alignTitle = 'left', description, ...rest }) => {
-        const textColorClass = version === 'primary' ? 'text-primary-text' : '';
         const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
-        const buttonsWithClass = buttons?.map((_) => ({ ..._, className: 'min-w-[168px]' }));
-        return (jsxs(BlockWrapper, { className: `flex justify-between font-sans p-12 box-border relative min-h-80
-        ${getTileMinHeight(className)}
-        ${VersionStyleMap[version]}
-        ${className}`, ...rest, children: [jsxs(BaseTile, { className: "z-10", title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap mb-7 w-full
-                  ${textColorClass} ${AlignText[alignTitle]}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { buttons: buttonsWithClass, className: "flex gap-4 mt-8", ...rest })) : null, children: [renderDescription$2(description), jsxs("div", { className: "flex flex-1 items-center mb-3", children: [qr?.src ? (jsx("div", { className: `flex justify-center mr-5 bg-white rounded-md ${containerStyle}`, children: jsx(ImgInner, { className: "w-fit", image: qr }) })) : null, renderList$1(version, items)] })] }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(ImgInner, { image: image }) })) : null] }));
+        return (jsxs(BlockWrapper, { className: `flex justify-between p-12 box-border relative min-h-80 ${getTileMinHeight(className)} ${className}`, version: version, ...rest, children: [jsxs(BaseTile, { className: "z-10", title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap mb-7 w-full ${AlignText[alignTitle]}` })) : null, buttons: renderButtonsSection(buttons, {
+                        className: 'mt-8',
+                        buttonClassName: 'min-w-[168px]',
+                    }), children: [renderDescription$2(description), jsxs("div", { className: "flex flex-1 items-center mb-3", children: [qr?.src ? (jsx("div", { className: `flex justify-center mr-5 bg-white rounded-md ${containerStyle}`, children: jsx(ImgInner, { className: "w-fit", image: qr }) })) : null, renderList(items)] })] }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(ImgInner, { image: image }) })) : null] }));
     });
-    const renderList$1 = (version, items) => {
-        return items?.length ? (jsx(List, { items: items, itemClassName: "text-l-light mb-2 last:mb-0", version: version })) : (jsx("span", { className: "text-m-light text-secondary-text", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
+    const renderList = (items) => {
+        return items?.length ? (jsx(List, { items: items, itemClassName: "text-l-light mb-2 last:mb-0" })) : (jsx("span", { className: "text-m-light text-secondary-text", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
     };
     const renderDescription$2 = (description) => description ? jsx("p", { className: "text-xl-light mb-5 pt-0.5", children: description }) : null;
 
@@ -3144,7 +2997,7 @@
         return (jsxs("div", { className: `flex flex-col font-sans bg-white w-full ${className}`, children: [jsxs("div", { className: "flex flex-col px-12 pt-12", children: [jsxs("div", { className: "flex justify-between", children: [jsx("div", { className: "text-h2", children: name }), renderCurrentDaySchedule(currentWeekDay)] }), jsxs("div", { className: "flex text-l-light pt-4", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24", asSVG: true, className: "pr-1" }), address] }), jsx("div", { className: "flex pt-4", children: nearbyOffices.map(renderNearbyOffice) })] }), jsxs("div", { className: "flex justify-between pt-8", children: [jsx("div", { className: "flex-grow h-full w-full overflow-hidden", children: point ? jsx(YandexMap, { points: [point], className: "h-full" }) : null }), jsx("div", { className: "w-[434px] min-w-[434px] pl-9 pr-12 pb-14 flex flex-col", children: workScheduleWeek.map(renderDay) })] })] }));
     });
 
-    const OfficeServicesBlock = JSX(({ className = '', title, servicesList, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans bg-white p-8 flex flex-col ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h5", className: "mb-5", title: title }) : null, servicesList?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: servicesList.map(renderListItems) })) : null] })));
+    const OfficeServicesBlock = JSX(({ className = '', title, servicesList, ...rest }) => (jsxs(BlockWrapper, { className: `p-8 flex flex-col ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h5", className: "mb-5", title: title }) : null, servicesList?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: servicesList.map(renderListItems) })) : null] })));
     const renderListItems = (itemList, i) => (jsxs("li", { className: "flex mb-5 last:mb-0 list-none", children: [itemList.icon ? (jsx(ImgInner, { className: "mr-3 min-w-6 min-h-6 w-6 h-6", width: "24", height: "24", asSVG: true, image: getIconWithVersion(itemList.icon) })) : null, itemList.label ? jsx("span", { className: "text-l-light", children: itemList.label }) : null] }, `list_item_${String(i)}`));
 
     const OtherProducts = JSX(({ className = '', ...rest }) => (jsx(BlockWrapper, { className: `font-sans text-primary-text ${className}`, ...rest, children: renderChildren(rest) })));
@@ -3185,24 +3038,13 @@
     });
     OtherProductsItem.childrenTypes = []; // All types of blocks are suitable
 
-    const ParagraphBlock = JSX((props) => {
-        const { className, text, size, color, align, font, ...rest } = props;
-        return (jsx(BlockWrapper, { className: className, ...rest, children: jsx(Paragraph, { size: size, color: color, align: align, font: font, children: text }) }));
-    });
+    const ParagraphBlock = JSX(({ text, size, align, font, children, ...rest }) => (jsx(BlockWrapper, { ...rest, children: jsx(Paragraph, { size: size, align: align, font: font, children: text || children }) })));
 
-    const titleStyleMap = {
-        primary: 'text-primary-text',
-        secondary: 'text-white',
-    };
-    const descStyleMap = {
-        primary: 'text-secondary-text',
-        secondary: 'text-white',
-    };
     const BenefitItem = JSX((props) => {
         const { className = '', icon, label, description, version = 'primary', benefitsVersion = 'normal', } = props;
         const listItemAlign = description ? 'items-start' : 'items-center';
         const calcVersion = benefitsVersion === 'white' ? 'secondary' : 'primary';
-        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(version, benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: getIconWithVersion(icon, calcVersion), asSVG: true }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? jsx("div", { className: `text-h6 ${titleStyleMap[version]}`, children: label }) : null, description ? (jsx("div", { className: `text-m-light ${descStyleMap[version]}`, children: description })) : null] })] }));
+        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(version, benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: getIconWithVersion(icon, calcVersion), asSVG: true }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? (jsx("div", { className: "text-h6 text-primary-text group-data-secondary:text-white", children: label })) : null, description ? (jsx("div", { className: "text-m-light text-secondary-text group-data-secondary:text-white", children: description })) : null] })] }));
     });
     function getBenefitIconBgStyle(version, benefitsVersion) {
         let bgColorStyle = 'bg-primary-main text-black';
@@ -3215,7 +3057,7 @@
         return `w-12 h-12 min-w-12 rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
     }
 
-    const PictureText = JSX(({ className = '', title, description, image, benefits, version = 'primary', sum, monthLimit, directionRight = false, ...rest }) => (jsxs(BlockWrapper, { className: `relative font-sans py-12 px-24 ${VersionStyleMap[version]} ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, ...rest }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src ? jsx(ImgInner, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(Number(sum), Number(monthLimit))] })] })] })));
+    const PictureText = JSX(({ className = '', title, description, image, benefits, sum, monthLimit, directionRight = false, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `relative py-12 px-24 ${className}`, version: version, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M" }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src ? jsx(ImgInner, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(Number(sum), Number(monthLimit))] })] })] })));
     const renderBenefit$2 = (version) => (benefit, i) => (jsx(BenefitItem, { icon: benefit.icon, label: benefit.label, description: benefit.description, version: version }, String(i)));
     function renderInsuranceSumMonth(sum, monthLimit) {
         return sum || monthLimit ? (jsxs("div", { className: "bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4", children: [Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null, Number(monthLimit) > 0
@@ -3255,7 +3097,7 @@
 
     const GOLDEN_RATIO = 1.618;
     const Placeholder = JSX(({ className, title, description = 'Блок в разработке...', ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: [jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: getTileHeadingType(className), ...rest }), jsx("figure", { className: "m-0 min-w-[80%]", children: renderShimmer() })] }));
+        return (jsxs(BlockWrapper, { className: style('p-9 box-border', className, getTileRightPadding(className), getTileMinHeight(className)), ...rest, children: [jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: getTileHeadingType(className) }), jsx("figure", { className: "m-0 min-w-[80%]", children: renderShimmer() })] }));
     });
     const renderShimmer = (size = 3) => goldenSequence(100, size)
         .map((_) => Math.floor(_))
@@ -3271,10 +3113,10 @@
 
     const renderBenefit$1 = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => (jsx(BenefitItem, { icon: icon, label: label, description: description, version: version, benefitsVersion: benefitsVersion }, String(i)));
 
-    const ProductBlockInner = JSX(({ className = '', title, headlineVersion = 'L', description, benefitsCountOfRow = 3, benefits, benefitsVersion, buttons, footnote, image, items, version = 'primary', isDotted = true, textBlockClassName = '', ...rest }) => {
+    const ProductBlockInner = JSX(({ className = '', title, headlineVersion = 'L', description, benefitsCountOfRow = 3, benefits, benefitsVersion, buttons, footnote, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
         const benefitsCount = benefits?.filter((_) => _.label)?.length;
         const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCountOfRow);
-        return (jsxs("div", { className: `flex grow justify-between items-stretch h-full ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion, align: "text-left", ...rest }), jsxs("div", { className: "flex flex-col justify-between h-full", children: [jsxs(BaseTile, { buttons: buttons?.length ? (jsx(ButtonSection, { buttons: buttons, className: "flex gap-4", ...rest })) : null, children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits.map(renderBenefit$1(version, benefitsVersion)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] }), footnote ? jsx("p", { className: "text-m-light pt-12", children: footnote }) : null] })] }), image?.src && jsx(ImgInner, { className: "mt-[-50px]", image: image })] }));
+        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, 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]'
@@ -3288,68 +3130,50 @@
         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] }));
     }
 
-    const breadcrumbsStyleMap = {
-        primary: 'text-secondary-text',
-        secondary: 'text-white/80',
-    };
+    const breadcrumbStyle = 'text-secondary-text group-data-secondary:text-white/80';
     const ProductBlock = JSX((props) => {
         const { className = '', breadcrumbs, backwardButton, version = 'primary', ...rest } = props;
         const buttonVersion = version === 'primary' ? version : 'white';
-        return (jsxs(BlockWrapper, { className: `font-sans overflow-hidden p-12 flex flex-col box-border min-h-[454px] ${VersionStyleMap[version]} ${className}`, ...rest, children: [backwardButton?.text
+        return (jsxs(BlockWrapper, { className: `overflow-hidden p-12 flex flex-col box-border min-h-[454px] ${className}`, version: version, ...rest, children: [backwardButton?.text
                     ? renderBackwardButton(backwardButton, buttonVersion, 'mb-10 -mt-2.5')
-                    : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs-light mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbsStyleMap[version]}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { className: breadcrumbsStyleMap[version], ...breadcrumb }, String(i))))) })) : null, jsx(ProductBlockInner, { version: version, ...rest })] }));
+                    : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs-light mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbStyle}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { className: breadcrumbStyle, ...breadcrumb }, String(i))))) })) : null, jsx(ProductBlockInner, { version: version, ...rest })] }));
     });
 
-    const productBlockStyleMap = {
-        primary: { title: 'text-secondary-text', text: 'text-secondary-text' },
-        secondary: { title: 'text-white', text: 'text-white/80' },
-    };
     const ProductGallery = JSX(({ className = '', slides = [], version = 'primary', ...rest }) => {
         const galleryNav = slides.map((s) => s.nav);
         const galleryBlocks = slides.map((s) => s.productBlock);
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
         const handleActiveSlideIndex = useCallback((_) => setActiveSlideIndex(_), []);
-        return (jsxs(BlockWrapper, { className: `box-border pt-12 overflow-hidden relative font-sans w-100 mb-6 ${className}
-        ${VersionStyleMap[version]}`, ...rest, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest, version }, i)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28", children: galleryNav.map((slide, i) => renderNavButton({
+        return (jsxs(BlockWrapper, { className: `box-border pt-12 overflow-hidden relative w-100 mb-6 ${className}`, version: version, ...rest, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest, version }, i)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28", children: galleryNav.map((slide, i) => renderNavButton({
                         slide,
                         i,
                         isActive: Boolean(i === activeSlideIndex),
                         onClick: () => handleActiveSlideIndex(i),
-                        version,
                     })) })] }));
     });
     function renderProductBlock(block, i) {
-        const { version } = block;
-        const additionalClass = version ? productBlockStyleMap[version].title : '';
-        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 ${additionalClass}`, 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 text-secondary-text group-data-secondary:text-white", textBlockClassName: "mb-[154px]", headlineVersion: "XXL", ...block }) }) }, String(i)));
     }
-    function renderNavButton({ slide, i, isActive, onClick, version }) {
+    function renderNavButton({ slide, i, isActive, onClick }) {
         const btnClassName = isActive
             ? 'bg-white shadow-dark-blue min-w-[350px] border-none p-6'
-            : `min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur
-      ${VersionStyleMap[version]}`;
+            : 'min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur';
         const btnTitleClassName = isActive
             ? 'text-primary-text !text-h6 p-2'
-            : `text-l pb-1 ${productBlockStyleMap[version].title}`;
+            : 'text-l pb-1 text-secondary-text group-data-secondary:text-white';
         const btnDescClassName = isActive
             ? 'text-secondary-text text-l-light'
-            : `text-m-light ${productBlockStyleMap[version].text}`;
-        return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `box-border relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0
-        ${btnClassName} ${BorderVersionStyleMap[version]}
-      `, 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)));
+            : 'text-m-light text-secondary-text group-data-secondary:text-white/80';
+        return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `relative box-border overflow-hidden cursor-pointer text-left mx-1 grow basis-0 border border-gray group-data-secondary:border-white/50 ${btnClassName}`, 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 DESCRIPTION_STYLE_MAP = {
-        primary: 'text-secondary-text',
-        secondary: 'text-white',
-    };
-    function renderAdditionalDescription(additionalDescription, image, version = 'primary') {
+    function renderAdditionalDescription(additionalDescription, image) {
         if (!additionalDescription) {
             return null;
         }
         // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
         const descriptionWidth = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
-        return (jsx("div", { className: `mt-2.5 z-10 ${descriptionWidth}`, children: jsx(Paragraph, { size: "text-m", font: "font-light", color: DESCRIPTION_STYLE_MAP[version], children: additionalDescription }) }));
+        return (jsx("div", { className: `mt-2.5 z-10 ${descriptionWidth}`, children: jsx(Paragraph, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription }) }));
     }
 
     const RichText = JSX((props) => {
@@ -3361,11 +3185,7 @@
         throw new Error(x);
     }
 
-    const LABEL_STYLE_MAP = {
-        primary: 'text-secondary-text',
-        secondary: 'text-white',
-    };
-    const renderBenefit = (version = 'primary') => 
+    const renderBenefit = 
     // Linter doesn't understand that switch processes all cases
     // eslint-disable-next-line consistent-return
     (benefit, i) => {
@@ -3377,7 +3197,7 @@
             case 'default':
                 return [
                     jsx(Text, { size: "text-h6", children: benefit.label }, `label-${i}`),
-                    jsx(Text, { size: "text-m-light", color: LABEL_STYLE_MAP[version], children: benefit.description }, `desc-${i}`),
+                    jsx(Text, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: benefit.description }, `desc-${i}`),
                 ];
             case 'rte':
                 return jsx(RichText, { __html: benefit.__html });
@@ -3393,19 +3213,18 @@
         return (jsx(ImgInner, { className: `absolute ${isImageOnRightSide ? 'right-0' : 'left-0'} bottom-0`, image: image }));
     }
 
-    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: "text-left", ...rest }), renderBenefits(benefits, version, image), renderAdditionalDescription(additionalDescription, image), buttons?.length ? (jsx(ButtonSection, { buttons: buttons, className: "mt-5 gap-4 z-10 text-l" })) : null] }), renderImage$1(image, isImageOnRightSide)] })));
-    function renderBenefits(benefits, version, image) {
+    const ProductTile = JSX(({ className = '', title, headlineVersion = 'S', description, additionalDescription, benefits = [], buttons, image, isImageOnRightSide = true, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden p-9 box-border relative min-h-[364px]', getTileRightPadding(className), className), ...rest, children: [jsxs("div", { className: style('flex flex-col', isImageOnRightSide ? '' : 'items-end'), children: [jsx(Headline, { className: style('!p-0 !bg-transparent z-10', title || description ? 'mb-3.5' : ''), title: title, description: description, headlineVersion: headlineVersion, as: "h2", align: "text-left" }), renderBenefits(benefits, image), renderAdditionalDescription(additionalDescription, image), renderButtonsSection(buttons, { className: 'mt-5 z-10 text-l' })] }), renderImage$1(image, isImageOnRightSide)] })));
+    function renderBenefits(benefits, image) {
         if (!benefits.length) {
             return null;
         }
         // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
         const benefitsWidth = 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
-        ${benefitsWidth}`, children: benefits.length ? benefits.map(renderBenefit(version)) : null }));
+        ${benefitsWidth}`, children: benefits.length ? benefits.map(renderBenefit) : null }));
     }
 
-    const PromoTile = JSX(({ className = '', title = 'Акции и спецпредложения', date, description, buttons = [], version = 'primary', ...rest }) => (jsx(BlockWrapper, { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsx(BaseTile, { title: title ? (jsx(Headline, { title: title, className: `!p-0 max-w-[600px]`, headlineVersion: getTileHeadingType(className), bgColorHeadline: version, align: "text-left", as: "h2", ...rest })) : null, buttons: buttons?.length ? jsx(ButtonSection, { buttons: buttons, className: "flex gap-3" }) : null, children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-s mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) }) })));
+    const PromoTile = JSX(({ className = '', title = 'Акции и спецпредложения', date, description, as, buttons = [], ...rest }) => (jsx(BlockWrapper, { className: style('p-9 box-border', className, getTileRightPadding(className), getTileMinHeight(className)), ...rest, children: jsx(BaseTile, { title: title ? (jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, headlineVersion: getTileHeadingType(className), align: "text-left", as: as || 'h2' })) : null, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-s mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) }) })));
     function formatDate(date) {
         const dateObj = new Date(date);
         const dateFormat = {
@@ -3416,10 +3235,10 @@
         return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
     }
 
-    const RecommendationCard = JSX(({ className = '', title, description, items, image, version, socialMedia, button }) => {
+    const RecommendationCard = JSX(({ className = '', title, description, items, image, socialMedia, button, ...rest }) => {
         const tileTitle = title ? (jsx(Heading, { headingType: "h5", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
         const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
-        return (jsx("section", { className: `relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`, role: "listitem", children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? jsx("span", { className: "mb-2", children: description }) : null, items?.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items, version: version })) : null, socialMedia ? (jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia, version: version })) : null, button?.text ? (jsx("div", { className: "pt-2", children: renderButton({ button, buttonClassName: 'mt-16 px-5' }) })) : null] }) }) }));
+        return (jsx(BlockWrapper, { className: `relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`, role: "listitem", ...rest, children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? jsx("span", { className: "mb-2", children: description }) : null, items?.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items })) : null, socialMedia ? jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia }) : null, button?.text ? (jsx("div", { className: "pt-2", children: renderButtonsSection([button], { buttonClassName: 'mt-16 px-5' }) })) : null] }) }) }));
     });
 
     const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
@@ -3430,8 +3249,8 @@
             itemCount: recommendations.length,
             visibleItemCount: CARD_VIEW_COUNT,
         });
-        return (jsxs(BlockWrapper, { className: `relative font-sans p-9 overflow-hidden text-center ${VersionStyleMap[version]} ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-6", title: title }) : null, jsxs("div", { children: [jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }, role: "list", children: recommendations.length
-                                ? recommendations.map((card, i) => (jsx(RecommendationCard, { version: version, className: BorderVersionStyleMap[version], ...card }, String(i))))
+        return (jsxs(BlockWrapper, { className: `relative font-sans p-9 overflow-hidden text-center ${className}`, version: version, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-6", title: title }) : null, jsxs("div", { children: [jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }, role: "list", children: recommendations.length
+                                ? recommendations.map((card, i) => (jsx(RecommendationCard, { version: version, className: "border-gray group-data-secondary:border-white/50", ...card }, String(i))))
                                 : null }), renderArrows({
                             ...controls,
                             btnClass: ['left-8', 'right-8'],
@@ -3444,24 +3263,15 @@
         return (jsx(BlockWrapper, { ...rest, children: jsx(RichText, { __html: __html }) }));
     });
 
-    const RollupItem = JSX(({ className = '', label = 'Развернуть', isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => (jsx("div", { className: `border-b border-solid border-main-divider w-full ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx("div", { className: "box-border", children: jsx(FoldableSection, { className: `grid grid-cols-12 gap-1 border-box`, isUnfolded: isUnfolded, children: renderChildren(rest) }) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle, label, version }) }) })));
+    const RollupItem = JSX(({ className = '', label = 'Развернуть', isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => (jsx(BlockWrapper, { className: `border-b border-solid border-main-divider w-full ${className}`, tag: "div", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx("div", { className: "box-border", children: jsx(FoldableSection, { className: `grid grid-cols-12 gap-1 border-box`, isUnfolded: isUnfolded, children: renderChildren(rest) }) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ version, label, isUnfolded, onToggle }) }) })));
     RollupItem.childrenTypes = {
-        exclude: [
-            'RollupItem',
-            'Accordion',
-            'AccordionItem',
-            'OtherProducts',
-            'OtherProductsItem',
-            'VerticalLayout',
-        ],
+        exclude: ['RollupItem', 'Accordion', 'AccordionItem', 'OtherProducts', 'OtherProductsItem'],
     };
-    const renderFoldButton = ({ isUnfolded, onToggle, label, version }) => {
-        const iconsPrimary = ['PlusIcon', 'MinusIcon'];
-        const iconsSecondary = ['ArrowDownIcon', 'ArrowUpIcon'];
-        const labels = label ? [label, label] : ['Развернуть', 'Скрыть'];
-        return version === 'primary' ? (jsx(FoldButton, { icon: iconsPrimary[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle })) : (jsx(DefaultFoldButton, { icon: iconsSecondary[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
+    const renderFoldButton = ({ version, label: defaultLabel, isUnfolded, onToggle, }) => {
+        const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
+        return version === 'primary' ? (renderPrimaryFoldButton({ label, icon: isUnfolded ? 'MinusIcon' : 'PlusIcon', onToggle })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
-    const FoldButton = JSX(({ label, icon, onClick }) => (jsxs("button", { className: "border-none bg-transparent px-9 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer", onClick: onClick, children: [jsx("span", { className: "text-xl font-medium pr-2.5", children: label }), icon ? jsx(ImgInner, { image: getIconWithVersion({ icon }), width: "24", height: "24", asSVG: true }) : null] })));
+    const renderPrimaryFoldButton = ({ label, icon, onToggle }) => (jsxs("button", { className: "border-none bg-transparent px-9 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 cursor-pointer", onClick: onToggle, children: [jsx("span", { className: "text-xl font-medium pr-2.5", children: label }), icon ? jsx(ImgInner, { image: getIconWithVersion({ icon }), width: "24", height: "24", asSVG: true }) : null] }));
 
     const SAFEBOXES_URL = '/api/v1/safeboxes';
     const EMPTY_VALUE = [];
@@ -3591,26 +3401,19 @@
         const branches = useSafeBoxes(selectedRegion);
         const handleChangeSafeDepositState = useCallback((state) => setStateDepositState((oldState) => ({ ...oldState, ...state })), [setStateDepositState]);
         const points = getCoordinates(getBranch(branches, safeDepositState.selectedBranch) || branches);
-        return (jsxs(BlockWrapper, { className: className, ...rest, children: [jsxs("div", { className: "font-sans bg-white px-8 py-12", children: [title ? (jsx(Heading, { title: title, headingType: "h3", as: "h2", className: "text-primary-text mb-2.5 text-center" })) : null, jsx(SafeDepositRentalForm, { regions: regions, branches: branches, data: { ...safeDepositState, selectedRegion }, onClick: handleShowMap, onChange: handleChangeSafeDepositState }), footnote ? jsx("p", { className: "text-s-light text-secondary-text", children: footnote }) : null] }), points.length && showMap ? jsx(YandexMap, { points: points, className: "h-[640px]" }) : null] }));
+        return (jsxs(BlockWrapper, { className: className, ...rest, children: [jsxs("div", { className: "px-8 py-12", children: [title ? (jsx(Heading, { title: title, headingType: "h3", as: "h2", className: "text-primary-text mb-2.5 text-center" })) : null, jsx(SafeDepositRentalForm, { regions: regions, branches: branches, data: { ...safeDepositState, selectedRegion }, onClick: handleShowMap, onChange: handleChangeSafeDepositState }), footnote ? jsx("p", { className: "text-s-light text-secondary-text", children: footnote }) : null] }), points.length && showMap ? jsx(YandexMap, { points: points, className: "h-[640px]" }) : null] }));
     });
     const normalizeSelectedRegion = (selectedRegion, regions) => !selectedRegion && regions?.length && regions[0]?.code ? regions[0].code : selectedRegion;
 
     const checkIsIconRenderable = (icon) => Boolean(icon?.icon || icon?.src);
 
-    const renderItems = ({ items, isDotted = true, version = 'primary', className = '', }) => items ? (jsx(List, { className: className, version: version, items: items, listItemSize: "M", isDotted: isDotted })) : null;
-
     const renderStepContent = ({ styleMap, isMainButton, version, }) => (step, i, { length }) => {
         const { label, description, button, items, isDotted } = step;
         const contentMarginClass = label && (description || items) ? 'mt-2' : '';
         return (jsxs("div", { className: `relative flex flex-col items-center text-center whitespace-pre-line overflow-hidden ${getContainerWidth(length)}`, children: [jsxs("div", { className: `${button?.text ? 'mb-8' : ''}  text-center`, children: [renderStepLabel(label), jsxs("div", { className: `${contentMarginClass} flex flex-col items-center`, children: [renderStepDescription({
                                     description,
                                     className: styleMap.description,
-                                }), renderItems({
-                                    items,
-                                    isDotted,
-                                    version,
-                                    className: getItemsClasses({ className: 'text-left', description, styleMap }),
-                                })] })] }), button?.text && !isMainButton ? (jsx(Button, { className: "box-border py-3 h-12 w-full max-w-[240px] mt-auto", version: version, ...button, children: button?.text })) : null] }, String(i)));
+                                }), jsx(List, { className: getItemsClasses({ className: 'text-left', description, styleMap }), items: items, listItemSize: "M", isDotted: isDotted })] })] }), button?.text && !isMainButton ? (jsx(Button, { className: "box-border py-3 h-12 w-full max-w-[240px] mt-auto", version: version, ...button, children: button?.text })) : null] }, String(i)));
     };
     const renderStepLabel = (label) => label ? jsx("div", { className: "text-h6", children: label }) : null;
     const renderStepDescription = ({ description, className = '', }) => (description ? jsx("div", { className: className, children: description }) : null);
@@ -3619,8 +3422,6 @@
 
     const STEPS_BLOCK_STYLE_MAPS = {
         primary: {
-            background: 'bg-white',
-            title: 'text-primary-text',
             description: '!text-secondary-text text-l-light',
             iconText: 'text-secondary-text',
             iconBackground: 'bg-main-divider',
@@ -3628,8 +3429,29 @@
             dot: 'bg-secondary-text',
         },
         secondary: {
-            background: 'bg-primary-main',
-            title: 'text-white',
+            description: '!text-white/80 text-l-light',
+            iconText: 'text-white',
+            iconBackground: 'bg-white/30',
+            iconConnector: 'bg-white',
+            dot: 'bg-white/80',
+        },
+        gray: {
+            // TODO Replace this Map with group-data-*
+            description: '!text-white/80 text-l-light',
+            iconText: 'text-white',
+            iconBackground: 'bg-white/30',
+            iconConnector: 'bg-white',
+            dot: 'bg-white/80',
+        },
+        transparent: {
+            description: '!text-white/80 text-l-light',
+            iconText: 'text-white',
+            iconBackground: 'bg-white/30',
+            iconConnector: 'bg-white',
+            dot: 'bg-white/80',
+        },
+        '': {
+            // TODO Replace this Map with group-data-*
             description: '!text-white/80 text-l-light',
             iconText: 'text-white',
             iconBackground: 'bg-white/30',
@@ -3648,16 +3470,13 @@
         const titleMargin = title ? 'mt-9' : '';
         const paddingX = getPaddingX(steps.length);
         return (jsxs(BlockWrapper, { className: [
-                'box-border py-12 font-sans',
+                'box-border py-12',
                 shortGaps ? 'px-20' : 'px-[70px]',
                 'flex flex-col items-center overflow-hidden',
-                styleMap.background,
-                styleMap.title,
                 className,
-            ].join(' '), ...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, version))) }), jsx("div", { className: `flex justify-between mt-4 ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepContent({ styleMap, isMainButton: Boolean(button?.text), version })) })] })) : null, button?.text ? jsx(Button, { className: "mt-8 min-w-60", version: "primary", ...button }) : null] }));
+            ].join(' '), version: version, ...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, version))) }), jsx("div", { className: `flex justify-between mt-4 ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepContent({ styleMap, isMainButton: Boolean(button?.text), version })) })] })) : null, button?.text ? jsx(Button, { className: "mt-8 min-w-60", version: "primary", ...button }) : null] }));
     });
-    const renderStepIcon = (styleMap, version) => ({ icon }, i) => (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: getIconWithVersion(icon || {}, version), width: "48", height: "48", asSVG: true })) : (jsx("span", { className: `text-h4 ${styleMap.iconText}`, children: i + 1 })) }) }, String(i)));
+    const renderStepIcon = (styleMap, version) => ({ icon }, i) => (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}`, children: checkIsIconRenderable(icon) ? (jsx(ImgInner, { image: getIconWithVersion(icon || {}, version), width: "48", height: "48", asSVG: true })) : (jsx("span", { className: `text-h4 ${styleMap.iconText}`, children: i + 1 })) }) }, String(i)));
 
     const containerStyles = {
         'horizontal-list': 'mx-auto mt-5 w-fit',
@@ -3707,10 +3526,10 @@
 
     const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
     const ACTIVE_LINK_CLASSES = 'bg-primary-main';
-    const INACTIVE_LINK_CLASSES = 'group bg-white';
+    const INACTIVE_LINK_CLASSES = 'group/btn bg-white';
     const TEXT_CLASSES = 'font-sans text-m';
     const ACTIVE_TEXT_CLASSES = 'text-white';
-    const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover:text-primary-main';
+    const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
 
     const LinkTab = JSX((props) => {
         const { tab, currentTab } = props;
@@ -3722,7 +3541,7 @@
 
     const BADGE_CLASSES = 'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
     const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
-    const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover:text-primary-main';
+    const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
     const renderGroupTab = ({ page, currentTab, showCounter, onClick }) => (tab, i) => {
         const active = currentTab === tab;
         const count = tab.ref && page?.blocks
@@ -3783,16 +3602,15 @@
         return (jsxs(Button, { version: "primary", onClick: onClick, className: "w-full flex items-center justify-center rounded-none py-5", children: [jsx("div", { className: "text-h4", children: isOpen ? 'Скрыть' : 'Показать ставки по вкладу' }), jsx(Icon, { name: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon', className: "ml-3", iconVersion: "white", width: "20", height: "20", asSVG: true })] }));
     });
 
-    const renderButtonsCellData = ({ buttons }) => buttons && buttons?.length ? (jsx("div", { children: buttons.map(({ rounded, ...buttonProps }, idx) => renderButton({
-            button: { rounded, ...buttonProps },
-            buttonClassName: `${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`,
-        })) })) : null;
+    const renderButtonsCellData = ({ buttons }) => renderButtonsSection(buttons, {
+        buttonClassName: 'w-12 h-12',
+    });
     const renderLabelDescriptionCellData = ({ label, description }) => {
         const labelClassName = `text-h6 m-0 ${description ? 'mb-1' : ''}`;
         return (jsxs("div", { children: [label ? jsx("div", { className: labelClassName, children: label }) : null, description ? jsx("div", { className: "text-secondary-text text-l-light", children: description }) : null] }));
     };
     const renderImgCellData = ({ image }) => (image?.src ? jsx(ImgInner, { image: image }) : null);
-    const renderListCellData = ({ isDotted, ...rest }) => (jsx(List, { className: "flex flex-col justify-between items-start text-h6", version: "primary", isDotted: isDotted ?? true, ...rest }));
+    const renderListCellData = ({ isDotted, ...rest }) => (jsx(List, { className: "flex flex-col justify-between items-start text-h6", isDotted: isDotted ?? true, ...rest }));
     const renderTableCellData = JSX(({ isVisible, displayTable, dataUrl, pdfUrl, isOpen }) => isVisible ? (jsx(TableInnerButton, { isOpen: isOpen, onClick: () => {
             displayTable({ dataUrl, pdfUrl });
         } })) : null);
@@ -3939,7 +3757,7 @@
         });
         const rows = (rowData || []).map((row, i) => (jsx(TariffsTableRow, { row: row, activeIndex: activeIndex, rowIdx: i, ...rest }, String(i))));
         const [visibleRows, hiddenRows] = hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
-        return (jsxs(BlockWrapper, { className: `bg-white font-sans p-12 overflow-hidden text-primary-text relative ${itemCount > 1 ? 'pr-0' : ''} ${className}`, ...rest, children: [renderTitle$1({ title, description }), renderDescription$1(description), hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(Wrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(Wrapper, { controls: controls, children: rows }))] }));
+        return (jsxs(BlockWrapper, { className: `p-12 overflow-hidden relative ${itemCount > 1 ? 'pr-0' : ''} ${className}`, ...rest, children: [renderTitle$1({ title, description }), renderDescription$1(description), hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(Wrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(Wrapper, { controls: controls, children: rows }))] }));
     });
     function renderTitle$1({ title, description }) {
         return title ? (jsx(Heading, { headingType: "h3", className: `text-center ${description ? 'mb-2.5' : 'mb-8'}`, title: title })) : null;
@@ -3976,14 +3794,10 @@
     });
     const renderTag = (tag, key) => (jsx("span", { className: "text-m-light py-2 px-2.5 border-solid border rounded-md border-gray", children: tag }, String(key)));
 
-    const Tile = JSX((props) => {
-        const { title, headingType = 'h3', description, items, buttons, image, isDotted = true, listItemSize = 'M', className = '', version = 'primary', tags, children, ...rest } = props;
-        const headingClassName = version === 'primary' ? 'text-primary-text' : '';
-        return (jsx(BlockWrapper, { className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsxs(BaseTile, { title: title ? (jsx(Heading, { headingType: headingType, as: "h2", title: title, className: `whitespace-pre-wrap max-w-[600px] ${headingClassName}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { buttons: buttons.map((button) => ({ ...button, className: 'min-w-[158px]' })), className: "flex mt-8 gap-3", ...rest })) : null, image: image?.src ? jsx(ImgInner, { className: "mt-auto ml-7", image: image }) : null, children: [description ? (jsx("div", { className: "max-w-[600px] mt-2.5", children: jsx(Paragraph, { size: "text-xl-light", children: description }) })) : null, children, renderList({ version, isDotted, listItemSize }, items), tags?.length ? jsx(Tags, { tags: tags, className: "mt-5" }) : null] }) }));
-    });
-    function renderList({ version, isDotted, listItemSize }, items) {
-        return items?.length ? (jsx(List, { items: items, isDotted: isDotted, className: "mt-2.5", listItemSize: listItemSize, itemClassName: "mb-1.5", version: version })) : null;
-    }
+    const Tile = JSX(({ title, headingType = 'h3', description, items, buttons, image, isDotted = true, listItemSize = 'M', className = '', tags, children, ...rest }) => (jsx(BlockWrapper, { className: `overflow-hidden p-9 pr-3 box-border ${getTileRightPadding(className)} ${getTileMinHeight(className)} ${className}`, ...rest, children: jsxs(BaseTile, { title: title ? (jsx(Heading, { headingType: headingType, as: "h2", title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, buttons: renderButtonsSection(buttons, {
+                className: 'mt-8',
+                buttonClassName: 'min-w-[158px]',
+            }), image: image?.src ? jsx(ImgInner, { className: "mt-auto ml-7", image: image }) : null, children: [description ? (jsx("div", { className: "max-w-[600px] mt-2.5", children: jsx(Paragraph, { size: "text-xl-light", children: description }) })) : 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 = {
         left: 'items-start',
@@ -3991,30 +3805,15 @@
         right: 'items-end',
     };
     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],
-                LayoutBackgroundStyleMap[version],
-                className,
-            ]
-                .filter(Boolean)
-                .join(' '), ...rest, children: renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } }) }));
+        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 } }) }));
     });
-    VerticalLayout.childrenTypes = {
-        exclude: ['VerticalLayout'],
-    };
+    VerticalLayout.childrenTypes = [];
 
     const MIN_COL_SPAN = 10;
     const getPaddings = (className) => getColSpan(className) < MIN_COL_SPAN ? 'py-6 px-11' : 'py-12 px-32';
 
-    const Video = JSX((props) => {
-        const { title, src, previewImg, className = '', ...rest } = props;
-        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 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 Blocks = {
         Accordion,
@@ -4186,7 +3985,7 @@
             parent: data,
         };
         useBlockRouterProvider();
-        return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [slots?.header ? (jsx("div", { className: "mb-5 shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, {
+        return (jsxs("section", { className: style('relative', pageStyle, className), "data-theme": colorPalette, children: [slots?.header ? (jsx("div", { className: "mb-5 shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, {
                         ...options,
                         slotName: 'header',
                     }) })) : null, jsxs("div", { className: "container grid grid-cols-12 gap-1", children: [renderBlocksList(blocks, options), slots?.footer
@@ -4202,7 +4001,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.7.1";
+    const packageVersion = "0.7.3";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;