@redneckz/wildless-cms-uni-blocks 0.11.3 → 0.12.4

package/bundle/bundle.umd.js

@@ -337,16 +337,16 @@
         transparent: 'bg-transparent text-primary-text',
         '': '',
     };
-    const BlockWrapper = JSX(({ className, version = 'primary', isTheme = true, block, tag = 'section', role, children }) => {
+    const BlockWrapper = JSX(({ className, version = 'primary', isTheme = true, defaultPadding = 'p-m', padding, block, tag = 'section', role, children, }) => {
         const Tag = tag;
         const ref = useBlockIntersectionObserver(block);
         const [isHidden, setHidden] = useState(false);
         useEffect(() => defaultEventBus.subscribe('tab', (event) => {
             setHidden(Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)));
         }), [block]);
-        return (jsx(Tag, { className: style(groupStyle(Boolean(version && isTheme)), blockStyles[version], isHidden ? 'hidden' : '', className), ...(version && isTheme ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
+        const isGroup = version && isTheme;
+        return (jsx(Tag, { className: style('font-sans', isGroup ? 'group' : '', blockStyles[version], isHidden ? 'hidden' : '', padding || defaultPadding, className), ...(isGroup ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
     });
-    const groupStyle = (isGroup) => (isGroup ? 'group' : '');
 
     const headingTag = (tag) => tag;
 
@@ -361,7 +361,7 @@
     };
     const Heading = JSX(({ className = '', headingType = 'h3', as = 'h3', title, children }) => {
         const Tag = headingTag(as);
-        return (jsx(Tag, { className: `font-sans m-0 ${styles$4[headingType]} ${className}`, children: title || children }));
+        return (jsx(Tag, { className: style('font-sans m-0', styles$4[headingType], className), children: title || children }));
     });
 
     const identity = (_) => _;
@@ -626,7 +626,7 @@
         if (version === 'link') {
             return '';
         }
-        const withTextStyle = `${aboveText ? 'py-2.5 px-7' : 'py-4 px-4'}`;
+        const withTextStyle = `${aboveText ? 'py-2.5 px-9' : 'py-4 px-9'}`;
         return [
             'group/btn items-center justify-center',
             isWithText(props) ? withTextStyle : 'h-12 w-12',
@@ -1044,39 +1044,32 @@
     });
 
     const sourcesComparator = (a, b) => a?.media && b?.media ? a.media - b.media : 0;
-    const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', isMobile = false, pathPrefix }) => {
+    const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', pathPrefix }) => {
         const router = useRouter();
-        const pictureStyles = isMobile ? 'flex' : 'flex-none';
-        return (jsxs("picture", { className: `${pictureStyles} ${className}`, children: [image?.sources?.length
+        return (jsxs("picture", { className: className, children: [image?.sources?.length
                     ? image.sources
                         .filter((_) => _?.src)
                         .sort(sourcesComparator)
                         .map(({ src, format, media }, index) => (jsx("source", { srcSet: adjustSrc(router, pathPrefix)(src), type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...image.size }, `${index}_${src}`)))
                     : null, image?.src
-                    ? renderImg({ ...image, src: adjustSrc(router, pathPrefix)(image.src) }, imageClassName, isMobile)
+                    ? renderImg({ ...image, src: adjustSrc(router, pathPrefix)(image.src) }, imageClassName)
                     : null] }));
     });
-    const renderImg = (image, imageClassName = '', isMobile = false) => {
-        const style = {
+    const renderImg = (image, imageClassName = '') => (jsx("img", { src: image.src, className: style('object-contain', imageClassName), alt: image.alt || image.title, title: image.title || '', style: {
             width: image.size?.width ? `${image.size?.width}px` : '100%',
             height: image.size?.height ? `${image.size?.height}px` : 'auto',
-        };
-        const title = image.title || '';
-        const alt = image.alt || image.title;
-        const imgStyle = isMobile ? 'm-auto' : 'm-0';
-        return (jsx("img", { src: image.src, className: `${imgStyle} ${imageClassName}`, alt: alt, title: title, style: style, ...image.size }));
-    };
+        }, ...image.size }));
     const adjustSrc = (router, pathPrefix) => (src) => src && !isURL(src) ? adjustHref(router)(joinPath(pathPrefix, src)) : src;
     const formatToMimeType = (format) => format ? `image/${String(format)}` : undefined;
 
-    const ImgInner = JSX(({ className = '', image, imageClassName = '', isMobile, pathPrefix, ...iconProps }) => {
+    const Img = JSX(({ className = '', image, imageClassName = '', pathPrefix, ...iconProps }) => {
         if (!image?.src && !image?.icon) {
             return null;
         }
-        return image.icon ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: image?.iconVersion, name: image.icon, ...iconProps })) : (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile, pathPrefix: pathPrefix }));
+        return image.icon ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: image?.iconVersion, name: image.icon, ...iconProps })) : (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, pathPrefix: pathPrefix }));
     });
 
-    const renderContacts = () => (jsxs("div", { className: "flex", children: [jsxs("a", { className: "flex items-center text-primary-text no-underline mr-6", href: `tel:8 (800) 200-78-70`, "aria-label": "8 (800) 200-78-70", children: [jsx(ImgInner, { image: { icon: 'PhoneIcon' }, width: "24", height: "24", className: "mr-3" }), jsx("span", { children: "8 (800) 200-78-70" })] }), jsxs("a", { className: "flex items-center text-primary-text no-underline", "aria-label": "ved@rshb.ru", href: `mailto:ved@rshb.ru`, children: [jsx(ImgInner, { image: { icon: 'MailIcon' }, width: "24", height: "24", className: "mr-3" }), jsx("span", { children: "ved@rshb.ru" })] })] }));
+    const renderContacts = () => (jsxs("div", { className: "flex", children: [jsxs("a", { className: "flex items-center text-primary-text no-underline mr-6", href: `tel:8 (800) 200-78-70`, "aria-label": "8 (800) 200-78-70", children: [jsx(Img, { image: { icon: 'PhoneIcon' }, width: "24", height: "24", className: "mr-3" }), jsx("span", { children: "8 (800) 200-78-70" })] }), jsxs("a", { className: "flex items-center text-primary-text no-underline", "aria-label": "ved@rshb.ru", href: `mailto:ved@rshb.ru`, children: [jsx(Img, { image: { icon: 'MailIcon' }, width: "24", height: "24", className: "mr-3" }), jsx("span", { children: "ved@rshb.ru" })] })] }));
 
     const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
         return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, viewBox: viewBox, fill: fill, width: width, height: height, children: paths.map(({ d, fill: pathFill, ...options }, i) => (jsx("path", { d: d, fill: pathFill || 'currentColor', ...commonOptions, ...options }, i))) }));
@@ -1146,8 +1139,8 @@
 
     const ResponseNotification = JSX(({ responseType }) => {
         const responseOK = responseType === 'OK';
-        const backgroundColor = responseOK ? 'bg-responce-ok' : 'bg-responce-fail';
-        return (jsxs("div", { className: `flex items-center mt-5 p-5 rounded-md ${backgroundColor}`, children: [responseOK ? (jsx(ImgInner, { image: { icon: 'ResponceOKIcon' }, width: "42", height: "42", className: "mr-4" })) : (jsx(ImgInner, { image: { icon: 'ResponceFailIcon' }, width: "37", height: "34", className: "mr-4" })), jsxs("div", { children: [jsx(Heading, { headingType: "h6", title: responseOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку', className: "mb-1" }), jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: responseOK ? 'Совсем скоро мы с вами свяжемся' : 'Пожалуйста, повторите позднее' })] })] }));
+        const backgroundColor = responseOK ? 'bg-ok' : 'bg-fail';
+        return (jsxs("div", { className: `flex items-center mt-5 p-5 rounded-md ${backgroundColor}`, children: [responseOK ? (jsx(Img, { image: { icon: 'ResponceOKIcon' }, width: "42", height: "42", className: "mr-4" })) : (jsx(Img, { image: { icon: 'ResponceFailIcon' }, width: "37", height: "34", className: "mr-4" })), jsxs("div", { children: [jsx(Heading, { headingType: "h6", title: responseOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку', className: "mb-1" }), jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: responseOK ? 'Совсем скоро мы с вами свяжемся' : 'Пожалуйста, повторите позднее' })] })] }));
     });
 
     const COMPONENTS_MAP = {
@@ -1166,13 +1159,13 @@
             setResponseType(status);
             return status;
         }, []);
-        return (jsx(BlockWrapper, { className: style('font-sans bg-white p-default pb-9', className), ...rest, children: jsxs("div", { className: "container max-w-[978px]", children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }) : null, COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit }), responseType ? jsx(ResponseNotification, { responseType: responseType }) : null] }) }));
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: jsxs("div", { className: "container max-w-[978px]", children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }) : null, COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit }), responseType ? jsx(ResponseNotification, { responseType: responseType }) : null] }) }));
     });
 
-    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: `p-default flex flex-col items-center ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep$1) })) : null] })));
+    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col items-center', className), defaultPadding: "p-default", ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep$1) })) : null] })));
     const renderStep$1 = (benefit, i) => {
         const description = benefit.description;
-        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: "w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black", image: benefit.icon })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5 h-full", children: [benefit?.label ? jsx(Heading, { headingType: "h6", children: benefit.label }) : null, renderDescription$4(description)] })] }, String(i)));
+        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(Img, { className: "w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black", image: benefit.icon })) : null, benefit?.icon?.src ? jsx(Img, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5 h-full", children: [benefit?.label ? jsx(Heading, { headingType: "h6", children: benefit.label }) : null, renderDescription$4(description)] })] }, String(i)));
     };
     const renderDescription$4 = (description) => {
         const benefitType = description?.benefitType || null;
@@ -1186,7 +1179,7 @@
         return description?.items && description.items.length > 0 ? (jsx("ul", { className: listStyleType, children: description.items.map((_, i) => (jsx("li", { children: _ }, `benefitListItem-${i}`))) })) : null;
     };
 
-    const renderButtonsSection = (buttons, { className = '', buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-2 justify-items-stretch' : 'flex-wrap gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
+    const renderButtonsSection = (buttons, { className, buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-xs justify-items-stretch' : 'flex-wrap gap-s', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
     const renderButton = (buttonClassName = '') => (button, index) => {
         const { text, icon, iconRight, version, ...rest } = button || {};
         const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
@@ -1194,38 +1187,38 @@
         return text || icon?.icon ? (jsx(Button, { className: style('basis-full sm:basis-auto', 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) })) : null;
+    const renderButtonIcon = (icon) => icon?.icon || icon?.src ? (jsx(Img, { image: icon, width: String(icon?.size?.width || DEFAULT_ICON_W), height: String(DEFAULT_ICON_W) })) : null;
 
     const headlineVersionStyles = {
         XXL: {
             title: { headingType: 'h0', as: 'h1' },
             descriptionSize: 'text-h5',
-            descriptionStyle: 'mt-headline-xxl',
+            descriptionStyle: 'mt-m',
         },
         XL: {
             title: { headingType: 'h1', as: 'h1' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-headline-l',
+            descriptionStyle: 'mt-s',
         },
         L: {
             title: { headingType: 'h2', as: 'h2' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-headline-l',
+            descriptionStyle: 'mt-s',
         },
         M: {
-            title: { headingType: 'h3', as: 'h3' },
+            title: { headingType: 'h3', as: 'h2' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-headline-m',
+            descriptionStyle: 'mt-text',
         },
         S: {
-            title: { headingType: 'h4', as: 'h4' },
+            title: { headingType: 'h4', as: 'h2' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-headline-s',
+            descriptionStyle: 'mt-xs',
         },
         XS: {
-            title: { headingType: 'h5', as: 'h5' },
+            title: { headingType: 'h5', as: 'h2' },
             descriptionSize: 'text-l-light',
-            descriptionStyle: 'mt-headline-s',
+            descriptionStyle: 'mt-xs',
         },
     };
     // TODO Move to Gallery and rename
@@ -1240,16 +1233,15 @@
         XS: 'text-xs-light',
     };
 
-    const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, isPadding = true, isTheme = false, version = '', ...rest }) => {
+    const Headline = JSX(({ className, version = '', headlineVersion = 'XL', title, description, align = 'text-center', as, isPadding = true, isTheme = false, ...rest }) => {
         const versionStyle = headlineVersionStyles[headlineVersion];
-        const paddingStyle = isPadding ? 'p-default' : '';
         const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
-        return (jsxs(BlockWrapper, { className: style(paddingStyle, className), version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, align: align, ...descriptionStyle, children: description })) : null] }));
+        return (jsxs(BlockWrapper, { className: className, defaultPadding: isPadding ? 'p-default' : '', version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, align: align, ...descriptionStyle, children: description })) : null] }));
     });
 
     const Bonus = JSX((props) => {
         const { className = '', title, description, bonusItems, ...rest } = props;
-        return (jsx(BlockWrapper, { className: `p-default 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
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-default", ...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) => (jsxs("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: [_?.title ? jsx(Text, { size: "text-h4", children: _.title }) : null, _?.description ? (jsx("div", { className: "mt-2", children: jsx(Paragraph, { size: "text-xl", font: "font-light", children: _.description }) })) : null, jsxs("div", { className: "flex justify-between items-end mt-3", children: [renderButtonsSection(_?.buttons), _.bonusItemContent?.bonusType
                                                 ? renderBonusItemContent(_.bonusItemContent)
                                                 : null] })] }, String(i))))
@@ -1259,17 +1251,20 @@
             ? renderBonusCount(bonusItemContent)
             : renderBonusImage(bonusItemContent) }));
     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-icon`, image: _.image }) : null;
+    const renderBonusImage = (_) => _.image ? jsx(Img, { className: `w-12 h-12 min-w-12 p-3 rounded-icon`, image: _.image }) : null;
 
+    /**
+     * @deprecated
+     */
     const AlignText = {
         left: 'text-left',
         center: 'text-center',
         right: 'text-right',
     };
 
-    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-default 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 BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col text-center', className), defaultPadding: "p-default", ...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, title, description }, i) => {
-        return (jsxs("div", { className: style('flex flex-col items-center text-h6', !description && !title ? 'justify-center' : ''), children: [title ? jsx("span", { children: title }) : null, icon ? jsx(ImgInner, { image: icon, height: "180", className: "w-auto" }) : null, description ? jsx("span", { children: description }) : null] }, String(i)));
+        return (jsxs("div", { className: style('flex flex-col items-center text-h6', !description && !title ? 'justify-center' : ''), children: [title ? jsx("span", { children: title }) : null, icon ? jsx(Img, { image: icon, height: "180", className: "w-auto" }) : null, description ? jsx("span", { children: description }) : null] }, String(i)));
     };
     const getElementsColsValue = (colValue) => {
         switch (colValue) {
@@ -1286,16 +1281,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 }) : 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' })] }));
+        return (jsxs("div", { className: "border-gray border p-9 w-1/2", children: [image ? (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(Img, { className: "mb-5", image: image }) : null, image?.icon ? jsx(Img, { image: image }) : 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-icon bg-main-divider" })) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, jsx("span", { className: "text-xl-light", children: text })] }, key));
+        return (jsxs("li", { className: "flex items-center gap-3.5 mb-3 last:mb-0", children: [icon?.icon ? (jsx(Img, { image: icon, className: "w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider" })) : null, icon?.src ? jsx(Img, { image: icon }) : null, jsx("span", { className: "text-xl-light", children: text })] }, key));
     };
 
-    const BusinessBlock = JSX(({ className = '', title, cards, ...rest }) => (jsxs(BlockWrapper, { className: `p-default 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: className, defaultPadding: "p-default", ...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 ButtonsBlock = JSX(({ buttons, className, ...rest }) => (jsx(BlockWrapper, { className: style('!bg-transparent', className), ...rest, children: renderButtonsSection(buttons) })));
+    const ButtonsBlock = JSX(({ buttons, className, ...rest }) => (jsx(BlockWrapper, { className: style('!bg-transparent', className), defaultPadding: "p-0", ...rest, children: renderButtonsSection(buttons) })));
 
     const useCarouselControls = (props) => {
         const { itemCount, visibleItemCount } = props;
@@ -1322,7 +1317,7 @@
 
     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/btn:text-primary-main", width: "16", height: "16" }) })));
+        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(Img, { 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" }) })));
     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" })));
 
@@ -1869,7 +1864,7 @@
             itemCount: calculatorTabs?.length,
             visibleItemCount: COLUMNS_FOR_SCROLL,
         });
-        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden relative w-100', className), ...rest, children: [jsxs("div", { className: "bg-white", children: [tabsNav.length > 1
+        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden relative', className), defaultPadding: "p-0", ...rest, children: [jsxs("div", { className: "bg-white", children: [tabsNav.length > 1
                             ? renderTabs$1({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })
                             : null, renderArrows({
                             ...controls,
@@ -1888,7 +1883,7 @@
         const iconClassName = isActive ? '' : `text-primary-main`;
         const iconVersion = tab?.icon?.iconVersion;
         const activeIconStyle = isActive ? 'white' : 'normal';
-        return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: style('box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-[88px]', btnClassName), children: [jsx(ImgInner, { className: `h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`, image: {
+        return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: style('box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-[88px]', btnClassName), children: [jsx(Img, { className: `h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`, image: {
                         ...tab?.icon,
                         iconVersion: iconVersion ?? activeIconStyle,
                     }, width: "24", height: "24" }), jsxs("div", { className: "border-0", children: [jsx("div", { className: btnTitleClassName, children: tab?.title }), jsx("div", { className: btnDescClassName, children: tab.description })] })] }, String(i)));
@@ -1933,7 +1928,7 @@
             ? getDisabledButtonClasses({ version: button?.version })
             : getRegularButtonClasses({ className: 'text-white', version: button?.version });
         const link = useLink();
-        return (jsxs(BlockWrapper, { className: style('p-default flex flex-col items-center', className), ...rest, children: [title ? (jsx(Heading, { className: "pb-5 xl:pb-9 self-start xl:self-center", headingType: "h2", title: title })) : null, jsxs("form", { className: "w-full xl:max-w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, valid: !isDisabled, placeholder: placeholder, label: label, ...field(AMOUNT_KEY, { parse: Number, format: String }) }), button?.text ? (jsx("button", { type: "submit", className: style('w-full p-4 mt-5 xl:mt-6', buttonStyle), disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
+        return (jsxs(BlockWrapper, { className: style('flex flex-col items-center', className), defaultPadding: "p-default", ...rest, children: [title ? (jsx(Heading, { className: "pb-5 xl:pb-9 self-start xl:self-center", headingType: "h2", title: title })) : null, jsxs("form", { className: "w-full xl:max-w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, valid: !isDisabled, placeholder: placeholder, label: label, ...field(AMOUNT_KEY, { parse: Number, format: String }) }), button?.text ? (jsx("button", { type: "submit", className: style('w-full p-4 mt-5 xl:mt-6', buttonStyle), disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
     });
 
     const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
@@ -2169,7 +2164,7 @@
         });
         const [dotsActiveIndex] = scroll.visibleIndicesRange;
         const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
-        return (jsx(BlockWrapper, { className: style(getPaddingStyle$1(isPadding), 'group-data-secondary:bg-primary-main group-data-secondary:text-white', className), ...rest, children: jsxs("div", { className: style(getAlignStyle(isAlignCenter), 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
+        return (jsx(BlockWrapper, { className: className, defaultPadding: getPaddingStyle$1(isPadding), ...rest, children: jsxs("div", { className: style(getAlignStyle(isAlignCenter), 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
                             ...rest,
                             renderProps: isBankHistoryCarousel
                                 ? (block, options) => renderBlock$1(block, options, {
@@ -2199,7 +2194,7 @@
     const CarouselBankHistoryCard = JSX(({ title, description, blocksLength = 0, activeIndex, options }) => {
         const orderNumber = Number(options?.key?.split('-').slice(-1)[0]) || 0;
         const isActive = orderNumber === activeIndex;
-        return (jsx(BlockWrapper, { className: "flex h-[485px]", children: isActive ? (jsx("div", { className: "relative flex items-center w-full", children: jsx(Headline, { headlineVersion: "M", title: title, description: description, align: "text-left", className: style('absolute z-10 h-[385px] w-[440px] p-8 text-white shadow-dark-blue', getActiveBlockPosition(orderNumber, blocksLength), getBackgroundColor(orderNumber)) }) })) : (jsx("div", { className: "flex w-full items-center justify-center", children: jsx("div", { className: style('flex justify-center items-center h-[300px] w-[340px] font-mohave text-title-large tracking-[-0.03em]', getBackgroundColor(orderNumber)), children: jsx("span", { className: getTextColor(orderNumber), children: title }) }) })) }));
+        return (jsx(BlockWrapper, { className: "flex h-[485px]", defaultPadding: "p-0", children: isActive ? (jsx("div", { className: "relative flex items-center w-full", children: jsx(Headline, { headlineVersion: "M", title: title, description: description, align: "text-left", className: style('absolute z-10 h-[385px] w-[440px] p-8 text-white shadow-dark-blue', getActiveBlockPosition(orderNumber, blocksLength), getBackgroundColor(orderNumber)) }) })) : (jsx("div", { className: "flex w-full items-center justify-center", children: jsx("div", { className: style('flex justify-center items-center h-[300px] w-[340px] font-mohave text-title-large tracking-[-0.03em]', getBackgroundColor(orderNumber)), children: jsx("span", { className: getTextColor(orderNumber), children: title }) }) })) }));
     });
     const getBackgroundColor = (orderNumber) => {
         const division = orderNumber % 3;
@@ -2269,7 +2264,7 @@
         black: 'bg-black',
         white: 'bg-white',
     };
-    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: `border box-border border-gray p-7 min-w-[392px] h-full flex flex-col justify-left ${className}`, ...rest, children: [image?.src ? jsx(ImgInner, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Paragraph, { size: "text-m", align: "text-left", font: "font-light", children: description }) })) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })] })));
+    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: style('border box-border border-gray min-w-[392px] h-full flex flex-col justify-left', className), ...rest, children: [image?.src ? jsx(Img, { 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-secondary-text", children: [jsx("div", { className: "mr-1.5", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })] })));
     const renderColorOption = (color, i) => (jsx("div", { role: "figure", className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
 
     const LinkWrapper = JSX(({ className = '', href, target, isRemote = false, children }) => {
@@ -2280,18 +2275,23 @@
     });
 
     const CarouselEventCard = JSX(({ className = '', icon, title, description, href, target, ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('w-[365px]', className), ...rest, children: jsxs(LinkWrapper, { className: "flex flex-col", href: href, target: target, children: [icon?.icon ? jsx(ImgInner, { image: icon }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left pt-3 mb-2", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Text, { font: "font-light", size: "text-m", color: "text-secondary-text", children: description }) })) : null] }) }));
+        return (jsx(BlockWrapper, { className: style('w-[365px]', className), defaultPadding: "p-0", ...rest, children: jsxs(LinkWrapper, { className: "flex flex-col", href: href, target: target, children: [icon?.icon ? jsx(Img, { image: icon }) : null, icon?.src ? jsx(Img, { image: icon }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left pt-3 mb-2", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Text, { font: "font-light", size: "text-m", color: "text-secondary-text", children: description }) })) : null] }) }));
     });
 
-    const BaseTile = JSX(({ className, title = '', insetTitle = '', buttons, leftImage, rightImage, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col font-sans', className), children: [backImage ? jsx("div", { className: "absolute bottom-0 right-0 z-0", children: backImage }) : null, title, jsxs("div", { className: "grow relative flex flex-wrap sm:flex-nowrap justify-between items-stretch gap-8", children: [renderImageContainer(leftImage), jsxs("div", { className: style('flex flex-col gap-8', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), buttons] }), renderImageContainer(rightImage, { className: '-order-1 sm:order-1' })] })] })));
-    const renderImageContainer = (image, { className } = {}) => image ? jsx("div", { className: style('flex-none', className), children: image }) : null;
+    const imageAlignmentMap = {
+        start: 'self-start',
+        center: 'self-center',
+        end: 'self-end',
+    };
+    const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-lg font-sans overflow-hidden', padding || defaultPadding, className), children: [backImage ? jsx("div", { className: "absolute bottom-0 right-0 z-0", children: backImage }) : null, title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: "grow relative flex flex-wrap sm:flex-nowrap justify-between items-stretch gap-lg", children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-lg max-w-[600px] xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), buttons] }), renderImageContainer(rightImage, { className: '-order-1 sm:order-1', imageAlign })] })] })));
+    const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
 
     const getItemListFontSize = (colValue) => (colValue === 1 ? 'text-h6' : 'text-l');
     const cardColumnsModeStyleMap = {
         1: 'flex-col',
         2: 'gap-x-10 flex-wrap',
     };
-    const CarouselInvestmentCard = JSX(({ additionalDescription, cardsList = [], className = '', columnsMode = 1, description, image, title, ...rest }) => (jsx(BlockWrapper, { className: style('box-border text-left p-9 w-[697px]', 'border border-solid border-gray group-data-secondary:border-white/50', className), ...rest, children: jsxs(BaseTile, { title: title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-3.5 z-10", title: title }) : null, backImage: image?.src ? jsx(ImgInner, { className: "m-0", image: image }) : null, 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: style('list-none m-0 p-0 flex gap-y-2', cardColumnsModeStyleMap[columnsMode]), children: renderCardList(cardsList, columnsMode) })) : null] }) })));
+    const CarouselInvestmentCard = JSX(({ className, padding, additionalDescription, cardsList = [], columnsMode = 1, description, image, title, ...rest }) => (jsx(BlockWrapper, { className: style('box-border text-left w-[697px]', 'border border-solid border-gray group-data-secondary:border-white/50', className), defaultPadding: "p-0", ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-m", title: title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-3.5 z-10", title: title }) : null, backImage: image?.src ? jsx(Img, { image: image }) : null, 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: style('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];
         const visibleCardsList = cardsList.slice(0, CARDS_COUNT_MAP[columnsMode - 1]);
@@ -2305,16 +2305,14 @@
     const LinkButton = JSX(({ text, href = '', target = '', className = '' }) => {
         const link = useLink();
         const adjustedProps = link({ href, target });
-        return text ? (jsxs("div", { className: `relative group/link cursor-pointer w-[328px] h-[82px] ${className}`, children: [jsxs("a", { className: LINK_CLASS_NAME, role: "link", ...adjustedProps, 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" }) })] }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mx-1.5 mt-1.5` }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mt-3 mr-3` })] })) : null;
+        return text ? (jsxs("div", { className: `relative group/link cursor-pointer w-[328px] h-[82px] ${className}`, children: [jsxs("a", { className: LINK_CLASS_NAME, role: "link", ...adjustedProps, children: [jsx("div", { className: "p-0.5", children: text }), jsx("div", { className: "w-6 h-6", children: jsx(Img, { 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" }) })] }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mx-1.5 mt-1.5` }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mt-3 mr-3` })] })) : null;
     });
 
     const MAX_LINKS_COUNT = 10;
-    const CarouselLinks = JSX(({ className = '', additionalDescription, description, links, title, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `flex w-full p-10 overflow-hidden justify-between ${className}`, ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-9 text-white text-xl-light", children: [jsx(Headline, { isPadding: false, title: title, description: description, as: "h1", align: "text-left" }), additionalDescription ? (jsx(Headline, { className: "pt-6", isPadding: false, description: additionalDescription, align: "text-left" })) : null] }), links?.length ? renderLinks(links) : null] }));
-    });
+    const CarouselLinks = JSX(({ className, additionalDescription, description, links, title, ...rest }) => (jsxs(BlockWrapper, { className: style('flex w-full overflow-hidden justify-between', className), ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-m text-white text-xl-light", children: [jsx(Headline, { isPadding: false, title: title, description: description, as: "h1", align: "text-left" }), additionalDescription ? (jsx(Headline, { className: "pt-s", description: additionalDescription, align: "text-left", isPadding: false })) : 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, arrowsPadded: false, showDots: true, children: new Array(itemCount).fill(null).map((_, groupIndex) => (jsx("div", { className: "w-[672px] min-w-[672px] ml-10 mr-10 flex flex-wrap self-start", children: links
+        return (jsx(Carousel, { className: "min-w-[832px] w-[832px]", version: "", isBlur: false, isCyclic: true, itemCount: itemCount, arrowsPadded: false, showDots: true, children: new Array(itemCount).fill(null).map((_, groupIndex) => (jsx("div", { className: "w-[672px] min-w-[672px] ml-10 mr-10 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)))) }));
     };
@@ -2339,19 +2337,19 @@
     const List = JSX(({ className, hasIndent, isDotted, items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: style('flex flex-col gap-2 text-left 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, { isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
 
     const CarouselProductCard = JSX(({ additionalDescription, align = 'text-center', button = {}, className = '', description, headlineSmallVersion = 'H6', href, icon, isDotted = true, isFullWidth = true, items = [], target, title, version = 'primary', ...rest }) => {
-        return (jsxs(BlockWrapper, { className: style('h-full flex flex-col justify-between min-w-[260px]', 'box-border border-solid border border-gray', align, className), version: version, ...rest, children: [jsxs(LinkWrapper, { className: "p-6", href: href, target: target, children: [renderImage$3(icon), renderCardTitle(headlineSmallVersion, title), renderDescription$3(description, title), renderItems(items, isDotted, version), renderAdditionalDescription$1(additionalDescription)] }), renderButtonsSection([button], {
-                    className: style('p-6 pt-0', isFullWidth ? '' : 'self-center min-w-[158px]'),
+        return (jsxs(BlockWrapper, { className: style('h-full flex flex-col justify-between min-w-[260px]', 'box-border border-solid border border-gray', align, className), defaultPadding: "p-0", version: version, ...rest, children: [jsxs(LinkWrapper, { className: "p-s", href: href, target: target, children: [renderImage$3(icon), renderCardTitle(headlineSmallVersion, title), renderDescription$3(description, title), renderItems(items, isDotted, version), renderAdditionalDescription$1(additionalDescription)] }), renderButtonsSection([button], {
+                    className: style('p-s pt-0', isFullWidth ? '' : 'self-center min-w-[158px]'),
                     isVertical: isFullWidth,
                 })] }));
     });
-    const renderImage$3 = (image) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? jsx(ImgInner, { className: `w-8 h-8 min-w-8 mb-5`, image: image }) : null] }));
+    const renderImage$3 = (image) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(Img, { className: "mb-5", image: image }) : null, image?.icon ? jsx(Img, { className: `w-8 h-8 min-w-8 mb-5`, image: image }) : null] }));
     const renderCardTitle = (headlineSmallVersion, title) => title ? (jsx("div", { children: jsx(Text, { size: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) })) : null;
     const renderDescription$3 = (description, title) => description ? (jsx("div", { className: title ? 'mt-2' : '', children: jsx(Paragraph, { size: "text-l", children: description }) })) : null;
     const renderAdditionalDescription$1 = (additionalDescription) => additionalDescription ? (jsx("div", { className: "mt-auto", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", children: additionalDescription }) })) : null;
     const renderItems = (items, isDotted, version = 'primary') => items?.length ? (jsx(List, { className: style('max-w-[308px] mt-2 text-s', version === 'primary' ? '!text-secondary-text' : ''), items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted })) : null;
 
     const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], href, target, ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('border border-gray', className), ...rest, children: jsxs(LinkWrapper, { className: "flex", href: href, target: target, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", children: [icon?.icon ? jsx(ImgInner, { image: icon }) : 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] })] }) }));
+        return (jsx(BlockWrapper, { className: style('border border-gray', className), defaultPadding: "p-0", ...rest, children: jsxs(LinkWrapper, { className: "flex", href: href, target: target, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", children: [icon?.icon ? jsx(Img, { image: icon }) : null, icon?.src ? jsx(Img, { 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)));
 
@@ -2399,7 +2397,7 @@
         const { href, version, text = '' } = rest;
         const { iconMapped, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
         const iconCustom = getFilteredIcon(icon) ?? iconMapped;
-        return (jsx(Button, { className: style(rounded ? 'rounded-full' : 'rounded-md', 'border border-solid hover:border-transparent', 'group-data-primary:border-main-divider', 'hover:bg-primary-main hover:text-black', 'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover', 'group-data-gray:border-green', buttonStylesWithText(text, buttonSize)), "aria-label": label, rel: "noopener noreferrer", target: "_blank", text: text, version: version, ...rest, children: iconCustom && !text ? (jsx(ImgInner, { image: iconCustom, imageClassName: "group-hover/media:text-white", width: "24", height: "24" })) : null }));
+        return (jsx(Button, { className: style(rounded ? 'rounded-full' : 'rounded-md', 'border border-solid hover:border-transparent', 'group-data-primary:border-main-divider', 'hover:bg-primary-main hover:text-black', 'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover', 'group-data-gray:border-green', buttonStylesWithText(text, buttonSize)), "aria-label": label, rel: "noopener noreferrer", target: "_blank", text: text, version: version, ...rest, children: iconCustom && !text ? (jsx(Img, { image: iconCustom, imageClassName: "group-hover/media:text-white", width: "24", height: "24" })) : null }));
     });
     const getFilteredIcon = (icon) => (icon?.src || icon?.icon ? icon : undefined);
 
@@ -2408,16 +2406,16 @@
     const BORDER_STYLE = 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
 
     const CarouselRecommendationCard = JSX(({ className = '', description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', version = 'primary', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-4", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), jsxs("div", { className: "w-1/2 h-full flex flex-col flex-1 justify-end", children: [items.length ? jsx(List, { items: items, listItemSize: "S" }) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10", media: socialMedia }) : null] }), renderIconBlock$2(icon)] }) }));
+        return (jsx(BlockWrapper, { className: style('relative min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), defaultPadding: "p-s", version: version, ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-4", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), jsxs("div", { className: "w-1/2 h-full flex flex-col flex-1 justify-end", children: [items.length ? jsx(List, { items: items, listItemSize: "S" }) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10", media: socialMedia }) : null] }), renderIconBlock$2(icon)] }) }));
     });
-    const renderIconBlock$2 = (icon) => (jsxs("div", { className: "absolute bottom-0 right-0", children: [icon?.icon ? jsx(ImgInner, { image: icon }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }));
+    const renderIconBlock$2 = (icon) => (jsxs("div", { className: "absolute bottom-0 right-0", children: [icon?.icon ? jsx(Img, { image: icon }) : null, icon?.src ? jsx(Img, { image: icon }) : null] }));
 
     const RichText = JSX((props) => {
         const { __html = '', richVersion = '' } = props;
         return (jsx("div", { className: style(richVersion, 'md-container'), dangerouslySetInnerHTML: { __html } }));
     });
 
-    const CarouselRichTextCard = JSX(({ className = '', __html, richVersion = 'striped', ...rest }) => (jsx(BlockWrapper, { className: style('p-9 border border-gray h-full min-w-96', className), ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) })));
+    const CarouselRichTextCard = JSX(({ className = '', __html, richVersion = 'striped', ...rest }) => (jsx(BlockWrapper, { className: style('border border-gray h-full min-w-96', className), ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) })));
 
     const Foldable = JSX(({ className = '', isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
         const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
@@ -2455,9 +2453,9 @@
         const cellsNode = cardCells.map(renderCardInfo);
         const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
         const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
-        return (jsxs(BlockWrapper, { className: style('relative border border-gray flex flex-col', getPaddingStyle(isHighlighting), className), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock$1(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] }));
+        return (jsxs(BlockWrapper, { className: style('relative border border-gray flex flex-col', className), defaultPadding: getPaddingStyle(isHighlighting), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock$1(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$1 = (icon) => (jsx("div", { className: "w-[267px] min-w-[267px] self-center", children: icon?.src || icon?.icon ? jsx(ImgInner, { image: icon }) : null }));
+    const renderIconBlock$1 = (icon) => (jsx("div", { className: "w-[267px] min-w-[267px] self-center", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }));
     const renderFoldButton$1 = ({ isUnfolded, onToggle }) => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center", onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16" })] }));
     const renderHitIcon = () => (jsxs("div", { className: "absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "23", height: "22" }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: "\u0425\u0418\u0422" })] }));
 
@@ -2468,7 +2466,7 @@
     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} ${GRADIENT}`, role: "columnheader", children: [icon && !image?.src && (jsx(ImgInner, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })), 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(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })), image?.src && jsx(Img, { 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',
@@ -2524,15 +2522,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: `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
+        return (jsxs(BlockWrapper, { className: style('overflow-hidden relative', className), defaultPadding: "p-default", ...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: `flex p-default ${className}`, version: version, ...rest, children: [info?.length ? renderBlocks(info) : null, contacts?.length ? renderBlocks(contacts) : null] })));
+    const ContactsBlock = JSX(({ className, contacts, info, version = 'secondary', ...rest }) => (jsxs(BlockWrapper, { className: style('flex', className), defaultPadding: "p-default", 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 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?.href ? jsx(Button, { className: "mt-6", ...button }) : null] }, String(key)))) }, `col-${String(index)}`)) : null;
 
     const isEmpty = (v) => v === null ||
         v === undefined ||
@@ -2571,7 +2569,7 @@
     const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => {
         return (jsxs("button", { className: style('flex justify-center w-full px-0 py-4 border border-transparent outline-none focus:border-primary-text', disabled
                 ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
-                : 'bg-primary-main text-white hover:bg-primary-hove', className), onClick: onClick, disabled: disabled, "data-theme": dataTheme, children: [jsx("span", { className: "text-h4 pr-3", children: label }), icon ? (jsx(ImgInner, { image: {
+                : 'bg-primary-main text-white hover:bg-primary-hove', className), onClick: onClick, disabled: disabled, "data-theme": dataTheme, children: [jsx("span", { className: "text-h4 pr-3", children: label }), icon ? (jsx(Img, { image: {
                         icon,
                         iconVersion: 'white',
                     }, className: "flex-shrink-0 my-auto", width: "20", height: "20" })) : null] }));
@@ -2647,14 +2645,14 @@
                         parse: (min) => ({ min, max: maxValue }),
                         format: ({ min }) => min,
                     }) })] }));
-        return (jsxs(BlockWrapper, { className: style(className), version: "transparent", ...rest, children: [renderFiltrationForm({ field, reset, filtrationSchema, resetButton, children: Inputs }), jsx(BaseFiltrationInner, { filtrationState: filtrationState, ...rest })] }));
+        return (jsxs(BlockWrapper, { className: style(className), defaultPadding: "p-0", version: "transparent", ...rest, children: [renderFiltrationForm({ field, reset, filtrationSchema, resetButton, children: Inputs }), jsx(BaseFiltrationInner, { filtrationState: filtrationState, ...rest })] }));
     });
     DepositFiltration.childrenTypes = ['ProductTile'];
     DepositFiltration.childSchema = (content) => content?.filtrationSchema || {};
 
     const renderErrorContent = (error) => {
         if (error?.errorContentType === 'Image' && error?.image) {
-            return jsx(ImgInner, { image: error.image });
+            return jsx(Img, { image: error.image });
         }
         if (error?.errorContentType === 'Code' && error.code) {
             return jsx("div", { className: "font-mohave text-title-extra gradient-color-text", children: error.code });
@@ -2662,7 +2660,7 @@
         return null;
     };
     const getErrorBlockStyle = (text) => (text ? 'py-20 pt-3 pb-1' : 'mb-16 pb-2 mt-24 pt-3');
-    const ErrorBlock = JSX(({ className = '', title, subtitle, error, button, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col justify-center items-center', getErrorBlockStyle(button?.text), className), version: "transparent", ...rest, children: [jsx("div", { className: "flex justify-center py-20", children: renderErrorContent(error) }), title ? jsx(Heading, { headingType: "h1", className: "text-left mb-4", title: title }) : null, subtitle ? (jsx("div", { className: "font-sans text-xl-light mb-7 max-w-[613px] text-center", children: subtitle })) : null, button?.text ? (jsx(Button, { className: "py-4 px-9", version: button?.version, ...button, children: button.text })) : null] })));
+    const ErrorBlock = JSX(({ className = '', title, subtitle, error, button, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col justify-center items-center', className), defaultPadding: getErrorBlockStyle(button?.text), version: "transparent", ...rest, children: [jsx("div", { className: "flex justify-center py-20", children: renderErrorContent(error) }), title ? jsx(Heading, { headingType: "h1", className: "text-left mb-4", title: title }) : null, subtitle ? (jsx("div", { className: "font-sans text-xl-light mb-7 max-w-[613px] text-center", children: subtitle })) : null, button?.text ? (jsx(Button, { className: "py-4 px-9", version: button?.version, ...button, children: button.text })) : null] })));
 
     var Currencies;
     (function (Currencies) {
@@ -2683,7 +2681,7 @@
         RUB: 'RoundRubleIcon',
     };
     const renderCurrencyRow$1 = ({ title, buyPrice, buyDifference, sellPrice, sellDifference, buyOfficeName, sellOfficeName, }) => {
-        return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [title ? (jsx(ImgInner, { image: { icon: CURRENCY_ICONS_MAP$1[title] }, width: "24", height: "24" })) : null, jsx("span", { className: "ml-2", children: title })] }) }), renderCurrency(buyPrice, buyDifference), renderCurrency(sellPrice, sellDifference), renderOffice(buyPrice, buyOfficeName), renderOffice(sellPrice, sellOfficeName)] }, title));
+        return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [title ? (jsx(Img, { image: { icon: CURRENCY_ICONS_MAP$1[title] }, width: "24", height: "24" })) : null, jsx("span", { className: "ml-2", children: title })] }) }), renderCurrency(buyPrice, buyDifference), renderCurrency(sellPrice, sellDifference), renderOffice(buyPrice, buyOfficeName), renderOffice(sellPrice, sellOfficeName)] }, title));
     };
     const formatCurrency$1 = (value) => (value ? currencyNumberFormat$1.format(value) : '');
     const renderCurrency = (price, difference) => {
@@ -2701,9 +2699,9 @@
         return (jsx("th", { className: "pl-11", children: jsx(Text, { size: "text-m-light", align: "text-left", color: "text-secondary-text", children: title }) }));
     };
 
-    const ExchangeRateOffice = JSX(({ className = '', currencies = [], actuality = '', officeName = '', ...rest }) => {
+    const ExchangeRateOffice = JSX(({ className, currencies = [], actuality = '', officeName = '', ...rest }) => {
         const fourRates = topNRates(currencies, 4);
-        return (jsxs(BlockWrapper, { className: style('font-sans text-primary-text py-10 bg-white', className), ...rest, children: [jsxs("div", { className: "flex flex-row flex-grow-0 justify-between mx-10 mb-8", children: [jsx(Heading, { headingType: "h4", title: 'Курс обмена валют в ' + officeName, className: "whitespace-pre-wrap text-h4 mb-5" }), jsx("div", { className: "pl-11", children: jsx(Text, { size: "text-m-light", align: "text-left", color: "text-secondary-text", children: actuality }) })] }), jsx("div", { className: "flex flex-row ml-8 mr-14 pt-4 text-left", children: fourRates.length > 0 ? (jsxs("table", { className: style('h-fit w-fit', className), children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { children: jsx(Text, { size: "text-m-light", align: "text-left", color: "text-secondary-text", children: "\u0412\u0430\u043B\u044E\u0442\u0430" }) }), renderTableHeader('Купить'), renderTableHeader('Продать'), renderTableHeader('Лучшая покупка'), renderTableHeader('Лучшая продажа')] }) }), jsx("tbody", { children: fourRates.map((item) => renderCurrencyRow$1(item)) })] })) : null })] }));
+        return (jsxs(BlockWrapper, { className: className, ...rest, children: [jsxs("div", { className: "flex flex-row flex-grow-0 justify-between mb-8", children: [jsx(Heading, { headingType: "h4", title: 'Курс обмена валют в ' + officeName, className: "whitespace-pre-wrap text-h4 mb-5" }), jsx("div", { className: "pl-11", children: jsx(Text, { size: "text-m-light", align: "text-left", color: "text-secondary-text", children: actuality }) })] }), jsx("div", { className: "flex flex-row pt-4 text-left", children: fourRates.length > 0 ? (jsxs("table", { className: style('h-fit w-fit', className), children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { children: jsx(Text, { size: "text-m-light", align: "text-left", color: "text-secondary-text", children: "\u0412\u0430\u043B\u044E\u0442\u0430" }) }), renderTableHeader('Купить'), renderTableHeader('Продать'), renderTableHeader('Лучшая покупка'), renderTableHeader('Лучшая продажа')] }) }), jsx("tbody", { children: fourRates.map((item) => renderCurrencyRow$1(item)) })] })) : null })] }));
     });
     const topNRates = (rates, n) => rates.sort((a, b) => Number(a.id) - Number(b.id)).slice(0, n);
 
@@ -2729,10 +2727,10 @@
     const CurrencyTable = JSX(({ className, exchangeCurrencyItems }) => (jsxs("table", { className: `h-fit w-fit ${className}`, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: TABLE_HEAD_STYLE, children: "\u0412\u0430\u043B\u044E\u0442\u0430" }), jsx("th", { className: TABLE_HEAD_STYLE_WITH_PL, children: "\u041A\u0443\u043F\u0438\u0442\u044C" }), jsx("th", { className: TABLE_HEAD_STYLE_WITH_PL, children: "\u041F\u0440\u043E\u0434\u0430\u0442\u044C" })] }) }), jsx("tbody", { children: exchangeCurrencyItems.map(renderCurrencyRow) })] })));
     const renderCurrencyRow = (exchangeCurrencyItem) => {
         const currency = exchangeCurrencyItem?.currency?.currency;
-        return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [currency ? (jsx(ImgInner, { image: { icon: CURRENCY_ICONS_MAP[currency] }, width: "24", height: "24" })) : null, jsx("span", { className: "ml-2", children: currency })] }) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.saleExchangeRate) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.buyExchangeRate) })] }, currency));
+        return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [currency ? (jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[currency] }, width: "24", height: "24" })) : null, jsx("span", { className: "ml-2", children: currency })] }) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.saleExchangeRate) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.buyExchangeRate) })] }, currency));
     };
 
-    const CurrentLocation$1 = JSX(({ className = '', address }) => (jsxs("div", { className: `flex ${className}`, children: [jsx(ImgInner, { image: { icon: 'GpsIcon' }, width: "24", height: "24" }), jsxs("div", { className: "ml-3", children: [address ? jsx("p", { className: "text-primary-main  m-0 mb-1 text-l", children: address }) : null, jsx("p", { className: "text-secondary-text m-0 text-m", children: "\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0437\u0430\u0434\u0430\u043D\u043D\u043E\u0433\u043E \u043E\u0444\u0438\u0441\u0430" })] })] })));
+    const CurrentLocation$1 = JSX(({ className = '', address }) => (jsxs("div", { className: `flex ${className}`, children: [jsx(Img, { image: { icon: 'GpsIcon' }, width: "24", height: "24" }), jsxs("div", { className: "ml-3", children: [address ? jsx("p", { className: "text-primary-main  m-0 mb-1 text-l", children: address }) : null, jsx("p", { className: "text-secondary-text m-0 text-m", children: "\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0437\u0430\u0434\u0430\u043D\u043D\u043E\u0433\u043E \u043E\u0444\u0438\u0441\u0430" })] })] })));
 
     const roundTo = (value, precision = 2) => {
         const factor = 10 ** precision;
@@ -2794,7 +2792,7 @@
                     setSelected: handleSelectBuy(calcState, handleSetCalcState, currencyRatesBuy),
                     value: calcState.inputBuy,
                     setValue: (value) => handleInputBuy(handleSetCalcState, currencyRatesBuy)(value, calcState.selectBuy, calcState.selectSell),
-                }), button?.text ? (jsx(Button, { className: "py-4 mr-1", version: button?.version, ...button, children: button.text })) : null] }));
+                }), button?.text ? (jsx(Button, { className: "py-4", version: button?.version, ...button, children: button.text })) : null] }));
     });
     const handleSelectSell = (calcState, setCalcState, currencyRatesSell) => (value) => {
         setCalcState({ selectSell: value });
@@ -2875,7 +2873,7 @@
         currencyRatesBuy.unshift({ currency: { currency: Currency.RUB } });
         const currencyRatesSell = currencyRates.filter((_) => _.saleExchangeRate);
         currencyRatesSell.push({ currency: { currency: Currency.RUB } });
-        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] }) }) }));
+        return (jsx(BlockWrapper, { className: style('box-border min-h-80', className), ...rest, children: jsx(BaseTile, { className: "h-full", title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex gap-xxl", children: [jsxs("div", { children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-xl", 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) || [];
@@ -2898,7 +2896,7 @@
         transparent: 'text-white',
     };
     const renderImage$2 = (bgColor, image, size) => {
-        return image?.src ? (jsx(ImgInner, { image: image, className: SVG_COLOR[bgColor], width: size?.width, height: size?.height, pathPrefix: "/wcms-resources/" })) : (jsx(ImgInner, { image: {
+        return image?.src ? (jsx(Img, { image: image, className: SVG_COLOR[bgColor], width: size?.width, height: size?.height, pathPrefix: "/wcms-resources/" })) : (jsx(Img, { image: {
                 icon: image?.icon || 'LogoIcon',
                 iconVersion: ICON_VERSION_MAP[bgColor],
             }, className: SVG_COLOR[bgColor], width: size?.width, height: size?.height }));
@@ -2916,7 +2914,7 @@
         return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$2(bgColor, logo?.image, { width: '40', height: '45' }), showTitle ? renderTitle$2(children || logo?.title, bgColor) : null] }));
     });
 
-    const CloseButton = JSX(({ className, onClick }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-1 bg-transparent border-none', className), onClick: onClick, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(ImgInner, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
+    const CloseButton = JSX(({ className, onClick }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-1 bg-transparent border-none', className), onClick: onClick, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
 
     function assertUnreachable(x) {
         throw new Error(x);
@@ -3153,7 +3151,7 @@
         const handleChange = useCallback((ev) => {
             onChange && onChange(ev.target?.value || '');
         }, [onChange]);
-        return (jsxs("div", { className: style('font-sans relative', className), role: "form", children: [jsx("div", { className: "absolute h-full flex items-center pl-4 pointer-events-none", children: jsx(ImgInner, { image: { icon: 'LoupeIcon' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-12 pl-12 w-full text-l text-black outline-none box-border', 'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'), value: value, type: "text", name: "search-bar-input", placeholder: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", autoFocus: autoFocus, onChange: handleChange, onFocus: onFocus })] }));
+        return (jsxs("div", { className: style('font-sans relative', className), role: "form", children: [jsx("div", { className: "absolute h-full flex items-center pl-4 pointer-events-none", children: jsx(Img, { image: { icon: 'LoupeIcon' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-12 pl-12 w-full text-l text-black outline-none box-border', 'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'), value: value, type: "text", name: "search-bar-input", placeholder: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", autoFocus: autoFocus, onChange: handleChange, onFocus: onFocus })] }));
     });
 
     const SEARCH_DIALOG_ID = 'search';
@@ -3242,10 +3240,10 @@
         const fallback = rest.options?.page?.fallback;
         const sitemap = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
         const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, logo } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
-        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: "flex-grow", topItems: sitemap?.topItems })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
+        return (jsxs(BlockWrapper, { tag: "footer", className: className, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-8 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: "flex-grow", topItems: sitemap?.topItems })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
     });
 
-    const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: `p-default ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-4", title: title, description: description, headlineVersion: "M" }), calendar ? renderCalendar(calendar) : null] })));
+    const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-default", ...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;
@@ -3259,7 +3257,7 @@
         return (jsxs("div", { className: "w-full flex flex-col justify-center mt-13", children: [jsx("div", { className: "flex w-full mb-3 text-h6 text-center", children: mappedCalendar.map((_) => renderMonthNames(_, colSize)) }), jsx("div", { className: "flex w-full", children: mappedCalendar.map((_, ind) => (jsxs("div", { className: "pr-[11px] mr-3 border-r border-main-divider last:border-r-0 last:pr-0 last:mr-0", style: { flexBasis: _.flexBasis }, children: [jsx("div", { className: "flex", children: renderMonthImages(_) }), jsxs("div", { className: "text-s-light text-primary-text mt-3", children: [jsx("span", { children: _.text }), "\u2009", jsx("span", { className: "text-primary-main", children: _.greenText })] })] }, `monthItem-${ind}`))) })] }));
     };
     const renderMonthNames = (item, colSize) => item.month?.map((_, i) => (jsx("div", { style: { flexBasis: `${colSize}%` }, children: _.text }, `monthName-${i}`)));
-    const renderMonthImages = (item) => item.month?.map((_) => _.image?.src ? (jsx("div", { className: "h-[207px] border-r pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0", children: jsx(ImgInner, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
+    const renderMonthImages = (item) => item.month?.map((_) => _.image?.src ? (jsx("div", { className: "h-[207px] border-r pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0", children: jsx(Img, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
 
     const STORAGE_DEFAULT_TTL = 86400000; // 24 * 60 * 60 * 1000
     function useCachedAsyncData(key, fetcher, storage = globalThis?.localStorage) {
@@ -3363,7 +3361,7 @@
     const ForeignOffice = JSX(({ icon, ...rest }) => {
         const link = useLink();
         const { text, target, href, onClick } = link(rest);
-        return (jsxs("div", { className: "flex gap-x-3", children: [icon ? jsx(ImgInner, { pathPrefix: "/wcms-resources/", image: icon }) : null, text ? (jsx("a", { className: "hover:text-primary-hover", href: href, target: target, onClick: onClick, children: text })) : null] }));
+        return (jsxs("div", { className: "flex gap-x-3", children: [icon ? jsx(Img, { pathPrefix: "/wcms-resources/", image: icon }) : null, text ? (jsx("a", { className: "hover:text-primary-hover", href: href, target: target, onClick: onClick, children: text })) : null] }));
     });
 
     const TopItem = JSX(({ className = '', active, flat, children, ...rest }) => {
@@ -3384,7 +3382,7 @@
     };
     const HeaderSecondaryMenuButton = JSX(({ className, isRounded, buttonSize = 'default', isGrayBg = false, disabled, ariaLabel, image, onClick, }) => (jsx("button", { className: style('group/btn border-0 flex shrink-0 items-center', isGrayBg ? 'p-3 rounded-full' : 'p-0 bg-inherit', isGrayBg && !isRounded ? 'bg-main-divider' : '', isRounded
             ? 'w-8 h-8 text-secondary-light hover:text-secondary-hove'
-            : `${BUTTON_SIZE_STYLE[buttonSize]} text-primary-text hover:text-primary-main`, 'group-data-transparent:text-white', className), type: "button", disabled: disabled, "aria-label": ariaLabel, onClick: onClick, children: jsx(ImgInner, { image: image, className: style('h-full', isRounded ? 'bg-main-divider/20 rounded-full' : ''), imageClassName: "group-hover/btn:text-primary-hover group-hover/btn:invert-0" }) })));
+            : `${BUTTON_SIZE_STYLE[buttonSize]} text-primary-text hover:text-primary-main`, 'group-data-transparent:text-white', className), type: "button", disabled: disabled, "aria-label": ariaLabel, onClick: onClick, children: jsx(Img, { image: image, className: style('h-full', isRounded ? 'bg-main-divider/20 rounded-full' : ''), imageClassName: "group-hover/btn:text-primary-hover group-hover/btn:invert-0" }) })));
 
     const HeaderSecondaryMenu = JSX(({ className, version, locationName: location, officesLink }) => {
         const iconVersion = version === 'transparent' ? 'white' : 'black';
@@ -3524,7 +3522,7 @@
         const { topItems, logo, defaultLocation, foreignOffices, officesLink, internetBankUrl } = useSWRResource(projectSettings.SITEMAP || 'sitemap', rest.options?.page?.fallback);
         const activeTopItem = topItems?.find(isTopItemActive(router));
         const [location, onChangeLocation] = useLocation(defaultLocation);
-        return (jsxs(BlockWrapper, { tag: "header", className: style('pt-6 px-20', showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5', className), version: version, ...rest, children: [jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ..._ }, String(i)))), jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", locationName: location.name, officesLink: officesLink })] }), jsx("div", { className: style('mt-6 h-px bg-main-divider', version === 'transparent' ? 'opacity-30' : '') }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items, version: version, internetBankUrl: internetBankUrl })) : null] }), jsx(SearchDialog, { topItems: topItems }), jsx(LocationDialog, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation })] }));
+        return (jsxs(BlockWrapper, { tag: "header", className: style('pt-6 px-20', showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5', className), defaultPadding: "", version: version, ...rest, children: [jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ..._ }, String(i)))), jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", locationName: location.name, officesLink: officesLink })] }), jsx("div", { className: style('mt-6 h-px bg-main-divider', version === 'transparent' ? 'opacity-30' : '') }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items, version: version, internetBankUrl: internetBankUrl })) : null] }), jsx(SearchDialog, { topItems: topItems }), jsx(LocationDialog, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation })] }));
     });
 
     const gapStyles = {
@@ -3537,14 +3535,14 @@
         '': '',
     };
 
-    const HorizontalLayout = JSX(({ className = '', gap = 'XS', isPadding = false, version = 'transparent', isTheme = false, ...rest }) => (jsx(BlockWrapper, { className: style('relative', 'grid grid-cols-12', isPadding ? 'p-default' : '', gapStyles[gap], className), version: version, isTheme: isTheme, ...rest, children: renderChildren(rest) })));
+    const HorizontalLayout = JSX(({ className = '', gap = 'XS', isPadding = false, version = 'transparent', isTheme = false, ...rest }) => (jsx(BlockWrapper, { className: style('relative', 'grid grid-cols-12', gapStyles[gap], className), defaultPadding: isPadding ? 'p-default' : '', version: version, isTheme: isTheme, ...rest, children: renderChildren(rest) })));
     HorizontalLayout.childrenTypes = {
         exclude: ['HorizontalLayout'],
     };
 
     const ImgBlock = JSX((props) => {
         const { className, image, ...rest } = props;
-        return (jsx(BlockWrapper, { className: className, ...rest, children: jsx(ImgInner, { image: image }) }));
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-0", ...rest, children: jsx(Img, { image: image }) }));
     });
 
     const InsuranceAmountBlockInner = JSX(({ className = '', cards = [], button }) => {
@@ -3585,19 +3583,19 @@
         const btnClassName = isActive
             ? 'shadow-dark-blue border-primary-main'
             : `ease-in duration-300 border-gray`;
-        return (jsxs("button", { type: "button", onClick: onClick, className: `p-[30px] min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`, children: [slide?.icon ? (jsx(ImgInner, { className: "p-5 rounded-full bg-secondary-light mr-[30px]", image: slide.icon, width: "108", height: "108" })) : null, jsxs("div", { className: "flex gap-3.5", children: [slide?.sum ? renderValueBlock$1('страховая сумма', slide.sum) : null, slide?.fee ? renderValueBlock$1('страховой взнос', slide.fee) : null] }), renderDoneIcon(isActive)] }, String(i)));
+        return (jsxs("button", { type: "button", onClick: onClick, className: `p-[30px] min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`, children: [slide?.icon ? (jsx(Img, { className: "p-5 rounded-full bg-secondary-light mr-[30px]", image: slide.icon, width: "108", height: "108" })) : null, jsxs("div", { className: "flex gap-3.5", children: [slide?.sum ? renderValueBlock$1('страховая сумма', slide.sum) : null, slide?.fee ? renderValueBlock$1('страховой взнос', slide.fee) : null] }), renderDoneIcon(isActive)] }, String(i)));
     }
     function renderValueBlock$1(title, sum) {
         return (jsxs("div", { className: "flex flex-col text-left whitespace-pre", children: [jsxs("span", { className: "text-h6", children: [toLocalNumberFormat(2)(sum), " \u20BD"] }), jsx("span", { className: "text-secondary-text text-l mt-1", children: title })] }));
     }
     function renderDoneIcon(isActive) {
-        return isActive ? (jsx(ImgInner, { className: `h-6 w-6 min-w-6 min-h-6 absolute right-4 top-4`, image: { icon: 'DoneIcon' }, width: "24", height: "24" })) : null;
+        return isActive ? (jsx(Img, { className: `h-6 w-6 min-w-6 min-h-6 absolute right-4 top-4`, image: { icon: 'DoneIcon' }, width: "24", height: "24" })) : null;
     }
 
     const InsuranceAmountBlock = JSX(({ className = '', title, insuranceTabs = [], button, ...rest }) => {
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
         const handleActiveSlideIndex = useCallback((_) => setActiveSlideIndex(_), []);
-        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({
+        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden relative px-0', className), defaultPadding: "p-default", ...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),
@@ -3635,11 +3633,11 @@
     };
     const InvestmentInfo = JSX((props) => {
         const { className = '', items, isDotted, investmentZeroColumn, investmentColumns, ...rest } = props;
-        const colums = investmentColumns ? [...investmentColumns] : [];
+        const columns = investmentColumns ? [...investmentColumns] : [];
         if (investmentZeroColumn) {
-            colums.unshift(investmentZeroColumn);
+            columns.unshift(investmentZeroColumn);
         }
-        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 max-w-[657px]", items: items, isDotted: isDotted, listItemSize: "M" })) : null] }) }));
+        return (jsx(BlockWrapper, { className: className, ...rest, children: jsxs("div", { className: "container text-m-light", children: [columns?.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" }))(columns.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: columns.map(renderInvestmentColumnTitle) })] })) : null, items?.length ? (jsx(List, { className: "mt-9 max-w-[657px]", items: items, isDotted: isDotted, listItemSize: "M" })) : null] }) }));
     });
     const renderInvestmentColumn = (column, i, arr) => {
         const isSecondColumn = i === 1;
@@ -3684,37 +3682,23 @@
         double: 'flex-wrap',
         single: 'flex-col',
     };
-    const LinkDocs = JSX(({ className = '', title, description, align = 'text-center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => (jsxs(BlockWrapper, { className: style('p-default', className), ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, align: align, headlineVersion: "M", as: "h2" }), documents?.length ? (jsx("div", { className: style('mt-8 flex gap-6', linkColumnsModeStyleMap[columnsMode]), role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { doc: doc, icon: icon ? (jsx(ImgInner, { className: "min-w-6 min-h-6", image: icon, width: "24", height: "24" })) : null }) }, String(i)))) })) : null] })));
+    const LinkDocs = JSX(({ className = '', title, description, align = 'text-center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, align: align, headlineVersion: "M", as: "h2" }), documents?.length ? (jsx("div", { className: style('mt-8 flex gap-6', linkColumnsModeStyleMap[columnsMode]), role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { doc: doc, icon: icon ? (jsx(Img, { className: "min-w-6 min-h-6", image: icon, width: "24", height: "24" })) : null }) }, String(i)))) })) : null] })));
 
-    function getTileMinHeight(className = '') {
-        const colSpan = getColSpan(className);
-        if (colSpan <= 6) {
-            return 'min-h-[300px]';
-        }
-        else if (colSpan <= 8) {
-            return 'min-h-[320px]';
-        }
-        else {
-            return 'min-h-[360px]';
-        }
-    }
+    const renderDescription$2 = (description) => description ? (jsx("div", { className: "mb-5 pt-0.5 sm:mb-0 sm:pt-0", children: jsx(Text, { size: "text-xl", "font-weight": "light", children: description }) })) : null;
 
-    const MobileAppTile = JSX(({ className = '', title = 'Мобильное приложение', qr, buttons, version = 'primary', items, image, headingType = 'h4', alignTitle = 'left', description, ...rest }) => {
-        const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
-        return (jsxs(BlockWrapper, { className: `flex justify-between p-default 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$1(items)] })] }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(ImgInner, { image: image }) })) : null] }));
-    });
     const renderList$1 = (items) => {
-        return items?.length ? (jsx(List, { items: items, listItemSize: "S" })) : (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" }));
+        return items?.length ? (jsx(List, { items: items, className: "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;
+
+    const MobileAppTile = JSX(({ className, padding, alignTitle = 'left', buttons = [], description, headingType = 'h4', image, items, qr, title = 'Мобильное приложение', version = 'primary', ...rest }) => {
+        const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
+        return (jsx(BlockWrapper, { className: style('min-h-80', className), defaultPadding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-default", title: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', AlignText[alignTitle]) })) : null, backImage: image?.src ? jsx(Img, { image: image }) : null, buttons: renderButtonsSection(buttons, { isVertical: buttons.length > 3 }), children: [renderDescription$2(description), jsxs("div", { className: "flex flex-1 gap-s items-center", children: [qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList$1(items)] })] }) }));
+    });
 
     const initialFiltrationState = {};
     const MortgageFiltration = JSX(({ className, filtrationSchema = {}, resetButton, ...rest }) => {
         const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
-        return (jsxs(BlockWrapper, { className: style(className), version: "transparent", ...rest, children: [renderFiltrationForm({ field, reset, filtrationSchema, resetButton }), jsx(BaseFiltrationInner, { filtrationState: filtrationState, ...rest })] }));
+        return (jsxs(BlockWrapper, { className: style(className), defaultPadding: "p-0", version: "transparent", ...rest, children: [renderFiltrationForm({ field, reset, filtrationSchema, resetButton }), jsx(BaseFiltrationInner, { filtrationState: filtrationState, ...rest })] }));
     });
     MortgageFiltration.childrenTypes = ['ProductTile'];
     MortgageFiltration.childSchema = (content) => content?.filtrationSchema || {};
@@ -4072,18 +4056,18 @@
         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", 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: `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", image: itemList.icon })) : null, itemList.label ? jsx("span", { className: "text-l-light", children: itemList.label }) : null] }, `list_item_${String(i)}`));
+    const OfficeServicesBlock = JSX(({ className = '', title, servicesList, ...rest }) => (jsxs(BlockWrapper, { className: style('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(Img, { className: "mr-3 min-w-6 min-h-6 w-6 h-6", width: "24", height: "24", image: itemList.icon })) : null, itemList.label ? jsx("span", { className: "text-l-light", children: itemList.label }) : null] }, `list_item_${String(i)}`));
+
+    const ParagraphBlock = JSX(({ text, size, align, font, children, ...rest }) => (jsx(BlockWrapper, { defaultPadding: "p-0", ...rest, children: jsx(Paragraph, { size: size, align: align, font: font, children: text || children }) })));
+
+    const avg = (items = []) => (items?.length ? sum(items) / items.length : 0);
 
-    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 deviation = (items) => items?.length ? Math.sqrt(Math.abs(avg(items.map((_) => _ ** 2)) - avg(items) ** 2)) : 0;
 
     const labelSize$1 = 'text-h6';
 
-    const BenefitItem = JSX((props) => {
-        const { className = '', icon, label, description, benefitsVersion = 'normal' } = props;
-        const listItemAlign = description ? 'items-start' : 'items-center';
-        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? (jsx(Text, { color: "text-primary-text group-data-secondary:text-white", size: labelSize$1, children: label })) : null, description ? (jsx(Paragraph, { font: "font-light", size: "text-m", color: "text-secondary-text group-data-secondary:text-white", children: description })) : null] })] }));
-    });
+    const BenefitItem = JSX(({ className, icon, label, description, benefitsVersion = 'normal' }) => (jsxs("div", { className: style('flex gap-s', description ? 'items-start' : 'items-center', className), children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(benefitsVersion), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? (jsx(Text, { color: "text-primary-text group-data-secondary:text-white", size: labelSize$1, children: label })) : null, description ? (jsx(Paragraph, { font: "font-light", size: "text-m", color: "text-secondary-text group-data-secondary:text-white", children: description })) : null] })] })));
     function getBenefitIconBgStyle(benefitsVersion) {
         const bgColorStyle = benefitsVersion === 'normal'
             ? 'bg-secondary-light text-primary-main'
@@ -4091,102 +4075,59 @@
         return style('w-12 h-12 min-w-12 p-2.5 box-border flex items-center justify-center rounded-icon', bgColorStyle);
     }
 
-    // TODO: Create universal function for this case
-    const renderBenefit$2 = 
-    // Linter doesn't understand that switch processes all cases
-    // eslint-disable-next-line consistent-return
-    (version) => (benefit, i) => {
-        const { type } = benefit;
-        if (!(type === 'default' || type === 'rte')) {
-            return null;
-        }
-        switch (type) {
-            case 'default':
-                return (jsx(BenefitItem, { icon: benefit.icon, label: benefit.label, description: benefit.description, version: version }, String(i)));
-            case 'rte':
-                return jsx(RichText, { __html: benefit.__html });
-            default:
-                assertUnreachable(benefit);
+    const renderBenefit$1 = (benefitsVersion) => ({ type, ...benefit }, i) => {
+        if (type === 'rte' && '__html' in benefit) {
+            return jsx(RichText, { __html: benefit.__html });
         }
+        return jsx(BenefitItem, { benefitsVersion: benefitsVersion, ...benefit }, String(i));
     };
 
-    const positionStyle = 'justify-center items-center gap-32';
+    const MAX_BENEFITS_LEN_DEVIATION = 16;
+    const benefitLength = (_) => _.type === 'rte'
+        ? _.__html?.length || 0
+        : Math.max(_.label?.length || 0, _.description?.length || 0);
+    const isDistortedBenefits = (benefits) => deviation(benefits.map(benefitLength)) > MAX_BENEFITS_LEN_DEVIATION;
+    const BenefitsList = JSX(({ className, benefitsVersion = 'normal', benefits }) => benefits?.length ? (jsx("div", { className: style('flex gap-x-m gap-y-s', isDistortedBenefits(benefits) ? 'flex-col' : 'flex-wrap', className), children: benefits.map(renderBenefit$1(benefitsVersion)) })) : null);
 
-    const styleInsuranceSum = 'bg-main-divider rounded-md px-5 py-4 gap-6';
+    const Tags = JSX(({ className, tags }) => tags?.length ? (jsx("div", { className: style('flex flex-wrap gap-xs', className), role: "list", children: tags.map(renderTag) })) : null);
+    const renderTag = (tag, key) => (jsx("div", { className: "py-2 px-2.5 border-solid border rounded-md border-gray", role: "listitem", children: jsx(Text, { size: "text-m-light", children: tag }) }, String(key)));
 
-    const styleValueBlock = 'justify-between items-center gap-2';
-    const styleValueBlockText = 'text-primary-main';
+    const BaseProductTile = JSX(({ className, title, description, headlineVersion = 'L', align = 'text-left', isInsetTitle = true, benefits, benefitsVersion, __html, items, isDotted = true, listItemSize, tags, buttons, image, imageOptions: { imageAlign, directionRight = true } = {}, children, }) => {
+        const img = image?.src ? jsx(Img, { image: image }) : null;
+        const headline = (jsx(Headline, { title: title, description: description, headlineVersion: headlineVersion, align: align, isPadding: false }));
+        return (jsx(BaseTile, { className: className, ...(isInsetTitle ? { insetTitle: headline } : { title: headline }), ...(directionRight ? { rightImage: img } : { leftImage: img }), imageAlign: imageAlign, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col gap-m", children: [jsx(BenefitsList, { benefitsVersion: benefitsVersion, benefits: benefits }), __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, tags?.length ? jsx(Tags, { tags: tags }) : null] }) }));
+    });
 
-    const renderInsuranceSumMonth = (sum = 0, monthLimit = 0) => sum || monthLimit ? (jsxs("div", { className: style('flex mt-6', styleInsuranceSum), children: [sum > 0 ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null, monthLimit > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum)) : null] })) : null;
-    const renderValueBlock = (title, sum = 0, isAnotherBlock = false) => {
-        const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
-        return (jsxs("div", { className: style(`flex w-full whitespace-pre`, styleValueBlock, widthStyle), children: [jsx(Text, { font: "font-light", size: "text-l", children: title }), jsxs(Text, { size: "text-h6", color: styleValueBlockText, children: [toLocalNumberFormat(2)(sum), " \u20BD"] })] }));
-    };
+    const renderInsuranceSumMonth = (sum, monthLimit) => sum || monthLimit ? (jsxs("div", { className: "flex flex-wrap xl:flex-nowrap xl:bg-main-divider xl:rounded-md p-xs gap-m", children: [Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum) : null, Number(monthLimit) > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit) : null] })) : null;
+    const renderValueBlock = (title, value = 0) => (jsxs("div", { className: "basis-full flex flex-col-reverse sm:flex-row sm:justify-between items-baseline whitespace-pre", children: [jsx(Text, { font: "font-light", size: "text-l", children: title }), jsxs(Text, { size: "text-h6", color: "text-primary-text", children: [toLocalNumberFormat(2)(value), " \u20BD"] })] }));
 
-    const PictureText = JSX(({ className = '', title, description, image, benefits, sum, monthLimit, directionRight = false, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('relative p-default', className), version: version, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M" // TODO: Сверить с макетом после влития мобильных правок Headline (DRAFT)
-                , align: "text-left" }), jsxs("div", { className: style('flex mt-6', positionStyle), children: [image?.src ? jsx(ImgInner, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(Number(sum), Number(monthLimit))] })] })] })));
-
-    function getTileHeadingType(className = '') {
-        const colSpan = getColSpan(className);
-        if (colSpan <= 4) {
-            return 'S';
-        }
-        else if (colSpan <= 8) {
-            return 'M';
-        }
-        else {
-            return 'L';
-        }
-    }
-
-    function getTileRightPadding(className = '') {
-        const colSpan = getColSpan(className);
-        if (colSpan <= 6) {
-            return 'pr-9';
-        }
-        else if (colSpan <= 8) {
-            return 'pr-[4.75rem]';
-        }
-        else {
-            return 'pr-[9.4rem]';
-        }
-    }
+    const PictureText = JSX(({ className, headlineVersion = 'M', align = 'text-center', sum, monthLimit, ...rest }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: jsx(BaseProductTile, { className: "h-full", headlineVersion: headlineVersion, align: align, isInsetTitle: false, ...rest, imageOptions: { directionRight: false, imageAlign: 'center', ...rest.imageOptions }, children: renderInsuranceSumMonth(Number(sum), Number(monthLimit)) }) })));
 
     const GOLDEN_RATIO = 1.618;
-    const Placeholder = JSX(({ className, title, description = 'Блок в разработке...', ...rest }) => {
-        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 Placeholder = JSX(({ className, title, description = 'Блок в разработке...', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border', className), ...rest, children: [jsx(Headline, { className: "max-w-[600px]", title: title, description: description, headlineVersion: "L", align: "text-left", isPadding: false }), jsx("figure", { className: "m-0 mt-m min-w-[80%]", children: renderShimmer() })] })));
     const renderShimmer = (size = 3) => goldenSequence(100, size)
         .map((_) => Math.floor(_))
         .map(renderShimmerItem);
     const renderShimmerItem = (width, index) => (jsx("div", { style: { width: `${width || 100}%` }, className: "h-4 mt-2 bg-secondary-light" }, String(index)));
     const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
 
-    const renderBenefit$1 = (version = 'primary', benefitsVersion = 'normal') => (props, i) => jsx(BenefitItem, { version: version, benefitsVersion: benefitsVersion, ...props }, String(i));
-
-    const ProductBlockInner = JSX(({ className, version = 'primary', headlineVersion = 'L', title, description, benefits, benefitsVersion, items, isDotted = true, __html, buttons, image, directionRight = true, }) => {
-        const benefitsWithLabel = benefits?.filter((_) => _.label);
-        const img = image?.src ? jsx(ImgInner, { className: "mt-[-50px]", image: image }) : null;
-        return (jsxs(BaseTile, { className: className, insetTitle: jsx(Headline, { className: "max-w-[600px] xl:max-w-[728px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left", isPadding: false }), ...(directionRight ? { rightImage: img } : { leftImage: img }), buttons: renderButtonsSection(buttons), children: [benefitsWithLabel?.length ? (jsx("div", { className: "flex flex-wrap gap-6", children: benefitsWithLabel.map(renderBenefit$1(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? jsx(List, { className: "mt-5", items: items, isDotted: isDotted }) : null] }));
-    });
-
     function renderBackwardButton({ text, href, target, icon }, version) {
         const iconVersion = version === 'primary' ? 'white' : 'black';
         const commonProps = { text, href, target, ariaLabel: text };
-        return (jsxs("div", { className: "flex items-center gap-3", children: [jsx(Button, { className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center", version: version, rounded: true, ...commonProps, children: jsx(ImgInner, { className: "w-4 h-4", image: {
+        return (jsxs("div", { className: "flex items-center gap-3", children: [jsx(Button, { className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center", version: version, rounded: true, ...commonProps, children: jsx(Img, { className: "w-4 h-4", image: {
                             ...icon,
                             icon: icon?.icon || 'ArrowLeftIcon',
                             iconVersion: icon?.iconVersion || iconVersion,
                         } }) }), jsx(Button, { version: "link", ...commonProps })] }));
     }
 
-    const ProductBlock = JSX(({ className, backwardButton, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden p-default flex flex-col gap-10 box-border', className), ...rest, children: [backwardButton?.text
+    const ProductBlock = JSX(({ className, backwardButton, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden flex flex-col gap-lg box-border', className), defaultPadding: "p-default", ...rest, children: [backwardButton?.text
                 ? renderBackwardButton(backwardButton, !rest.version || rest.version === 'primary' ? 'primary' : 'white')
-                : null, jsx(ProductBlockInner, { className: "grow", ...rest })] })));
+                : null, jsx(BaseProductTile, { className: "grow h-full", ...rest })] })));
 
     const ProductGallery = JSX(({ className = '', slides = [], ...rest }) => {
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-        return (jsxs(BlockWrapper, { className: style('box-border py-default overflow-hidden', className), ...rest, children: [jsx("div", { className: "flex duration-1000", style: { transform: `translateX(-${activeSlideIndex * 100}%)` }, role: "list", children: slides.map(({ productBlock }, i) => (jsx("div", { className: "box-border grow-0 shrink-0 basis-full", role: "listitem", children: jsx(ProductBlockInner, { className: "pl-default h-full", headlineVersion: "XXL", ...productBlock, ...rest }) }, String(i)))) }), jsx("div", { className: "h-28 px-6 mt-6 -mb-6 flex items-center gap-2 box-border", children: slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex })) })] }));
+        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden', className), defaultPadding: "py-default", ...rest, children: [jsx("div", { className: "flex duration-1000", style: { transform: `translateX(-${activeSlideIndex * 100}%)` }, role: "list", children: slides.map(({ productBlock }, i) => (jsx("div", { className: "box-border grow-0 shrink-0 basis-full", role: "listitem", children: jsx(BaseProductTile, { className: "pl-default h-full", headlineVersion: "XXL", ...productBlock, ...rest }) }, String(i)))) }), jsx("div", { className: "h-28 px-xs mt-m -mb-m flex gap-xs box-border", children: slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex })) })] }));
     });
     const renderNavButton = ({ activeSlideIndex, onClick }) => ({ nav }, i) => {
         const isActive = i === activeSlideIndex;
@@ -4237,10 +4178,10 @@
         if (!image?.src) {
             return null;
         }
-        return (jsx(ImgInner, { className: style('absolute', directionRight ? 'right-0' : 'left-0', 'bottom-0'), image: image }));
+        return (jsx(Img, { className: style('absolute', directionRight ? 'right-0' : 'left-0', 'bottom-0'), image: image }));
     }
 
-    const ProductTile = JSX(({ className = '', title, headlineVersion = 'S', description, additionalDescription, benefits = [], buttons, image, directionRight = true, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden p-9 box-border relative min-h-[364px] flex flex-col justify-between', getTileRightPadding(className), className), ...rest, children: [jsxs("div", { className: style('flex flex-col', directionRight ? '' : '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, {
+    const ProductTile = JSX(({ className = '', title, headlineVersion = 'S', description, additionalDescription, benefits = [], buttons, image, directionRight = true, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden box-border relative min-h-[364px] flex flex-col justify-between', className), ...rest, children: [jsxs("div", { className: style('flex flex-col', directionRight ? '' : '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: style('mt-5 text-l', directionRight ? '' : 'justify-end'),
             }), renderImage$1(image, directionRight)] })));
     function renderBenefits(benefits, image) {
@@ -4252,7 +4193,7 @@
         return (jsx("div", { className: style('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) : null }));
     }
 
-    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 })] }) }) })));
+    const PromoTile = JSX(({ className, title = 'Акции и спецпредложения', description, headlineVersion = 'S', date, buttons = [], ...rest }) => (jsx(BlockWrapper, { className: style('box-border', className), ...rest, children: jsxs(BaseTile, { className: "h-full", title: title ? (jsx(Headline, { title: title, headlineVersion: headlineVersion, align: "text-left", isPadding: false })) : null, buttons: renderButtonsSection(buttons), 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 = {
@@ -4263,34 +4204,35 @@
         return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
     }
 
-    const RepresentativeOfficeInfo = JSX(({ address, email, telephone, button, className = '', __html, icon, title, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border text-left p-9', className), version: version, ...rest, children: [jsxs("div", { className: "w-full flex justify-between", children: [title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-6", title: title }) : null, renderIconBlock(icon)] }), jsxs("div", { className: "w-full", children: [__html ? renderDescriptionBlock(__html) : null, renderBlock('Адрес', address, 'GeolocationIcon'), renderBlock('Телефон', telephone, 'PhoneIcon'), renderBlock('E-mail', email, 'MailIcon'), button?.text
+    const RepresentativeOfficeInfo = JSX(({ address, email, telephone, button, className = '', __html, icon, title, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border text-left', className), version: version, ...rest, children: [jsxs("div", { className: "w-full flex justify-between", children: [title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-6", title: title }) : null, renderIconBlock(icon)] }), jsxs("div", { className: "w-full", children: [__html ? renderDescriptionBlock(__html) : null, renderBlock('Адрес', address, 'GeolocationIcon'), renderBlock('Телефон', telephone, 'PhoneIcon'), renderBlock('E-mail', email, 'MailIcon'), button?.text
                         ? renderButtonsSection([button], {
                             className: 'mb-6',
                         })
                         : null] })] })));
-    const renderIconBlock = (icon) => (jsxs("div", { className: "self-end", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: icon }) : null] }));
+    const renderIconBlock = (icon) => (jsxs("div", { className: "self-end", children: [icon?.src ? jsx(Img, { image: icon }) : null, icon?.icon ? jsx(Img, { image: icon }) : null] }));
     const renderDescriptionBlock = (__html) => (jsx("div", { className: "border-b border-main-divider pb-5 my-5", children: jsx(RichText, { __html: __html }) }));
     const renderBlock = (blockName, data, iconName) => (jsxs("div", { className: "flex mb-4", children: [jsx(Icon, { className: "pr-4", iconVersion: "black", name: iconName, width: "24", height: "24" }), jsxs("div", { className: "flex flex-col first:pb-1", children: [jsx(Text, { size: "text-m-light", children: blockName }), data ? (jsx(Text, { size: "text-h6", color: "text-green", children: data })) : null] })] }));
 
     const RichTextBlock = JSX((props) => {
         const { __html, richVersion, ...rest } = props;
-        return (jsx(BlockWrapper, { ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) }));
+        return (jsx(BlockWrapper, { defaultPadding: "p-0", ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) }));
     });
 
-    const renderRoundedIcon = (icon, iconBgVersion) => null;
-
     const foldableSectionStyles = 'grid grid-cols-12 [&>*]:pb-4';
 
     const getIconName = (isUnfolded) => (isUnfolded ? 'MinusIcon' : 'PlusIcon');
 
     const labelSize = 'text-h6';
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const renderRoundedIcon = (_icon, _iconBgVersion) => null;
+
     const rollupIconVersion = 'color';
 
     const rollupItemStyles = 'border-0 border-b border-solid border-main-divider last:border-b-0';
 
     const RollupItem = JSX(({ className = '', label = 'Развернуть', labelIcon, labelIconBgVersion, isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-5 [&>*]:p-0', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({
+        return (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), defaultPadding: "p-0", tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-5 [&>*]:p-0', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({
                     version,
                     label,
                     labelIcon,
@@ -4313,18 +4255,7 @@
         })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
     const renderPrimaryFoldButton = ({ label, labelIconBgVersion, icon, onToggle, labelIcon, }) => {
-        return (jsxs("button", { className: style('border-none bg-transparent px-0 flex justify-between items-center w-full cursor-pointer group/button', labelIcon?.icon ? 'py-2' : 'py-5'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main", children: [renderRoundedIcon(), label ? (jsx(Text, { size: labelSize, font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
-    };
-
-    const SAFEBOXES_URL = '/api/v1/safeboxes';
-    const EMPTY_VALUE = [];
-    function useSafeBoxes(regionCode) {
-        const { data } = useAsyncData(regionCode ? `${SAFEBOXES_URL}?regionCode=${regionCode}` : null, fetchSafeBoxes);
-        return data || EMPTY_VALUE;
-    }
-    const fetchSafeBoxes = async (url) => {
-        const result = await fetchJSON(url, { method: 'GET' });
-        return result || EMPTY_VALUE;
+        return (jsxs("button", { className: style('border-none bg-transparent px-0 flex justify-between items-center w-full group/button', labelIcon?.icon ? 'py-2' : 'py-5'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main", children: [renderRoundedIcon(), label ? (jsx(Text, { size: labelSize, font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
     };
 
     const WrapperSelect = JSX(({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label }) => {
@@ -4366,7 +4297,7 @@
 
     const SafeDepositRentalTotal = JSX(({ days, tariffs = [] }) => {
         const price = calculatePrice(days, tariffs);
-        return (jsxs("div", { className: "flex flex-col justify-between", children: [jsxs("div", { className: "flex", children: [renderTotal('Аренда за', days, 'mr-11'), renderTotal('Цена', price + ' ₽')] }), jsxs("div", { className: "bg-primary-main px-10 pt-10 pb-4 text-center", children: [jsx(ImgInner, { image: { icon: 'PackA4Icon' }, width: "290", height: "257" }), jsxs("span", { className: "text-s-light text-white opacity-80 mt-2 inline-block", children: ["\u041D\u0430 \u0440\u0438\u0441\u0443\u043D\u043A\u0438 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0430 \u043F\u0430\u0447\u043A\u0430", jsx("br", {}), " \u043B\u0438\u0441\u0442\u043E\u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0430 \u04104"] })] })] }));
+        return (jsxs("div", { className: "flex flex-col justify-between", children: [jsxs("div", { className: "flex", children: [renderTotal('Аренда за', days, 'mr-11'), renderTotal('Цена', price + ' ₽')] }), jsxs("div", { className: "bg-primary-main px-10 pt-10 pb-4 text-center", children: [jsx(Img, { image: { icon: 'PackA4Icon' }, width: "290", height: "257" }), jsxs("span", { className: "text-s-light text-white opacity-80 mt-2 inline-block", children: ["\u041D\u0430 \u0440\u0438\u0441\u0443\u043D\u043A\u0438 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0430 \u043F\u0430\u0447\u043A\u0430", jsx("br", {}), " \u043B\u0438\u0441\u0442\u043E\u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0430 \u04104"] })] })] }));
     });
     const renderTotal = (label, total, className = '') => {
         return (jsxs("div", { className: className, children: [jsx("div", { className: "text-m-light text-secondary-text mb-1", children: label }), jsx("span", { className: "text-h3 text-primary-text", children: total })] }));
@@ -4422,6 +4353,17 @@
     const getCaseVolume = (caseVolumes, selectedCaseVolume) => caseVolumes?.find((_) => _.volume === selectedCaseVolume);
     const getTariffs = (safeBoxCases, selectedBoxSize) => safeBoxCases?.find((_) => _.safeBoxCasesSize === selectedBoxSize)?.tariffs;
 
+    const SAFEBOXES_URL = '/api/v1/safeboxes';
+    const EMPTY_VALUE = [];
+    function useSafeBoxes(regionCode) {
+        const { data } = useAsyncData(regionCode ? `${SAFEBOXES_URL}?regionCode=${regionCode}` : null, fetchSafeBoxes);
+        return data || EMPTY_VALUE;
+    }
+    const fetchSafeBoxes = async (url) => {
+        const result = await fetchJSON(url, { method: 'GET' });
+        return result || EMPTY_VALUE;
+    };
+
     const DEFAULT_DAYS = 26;
     const SafeDepositRental = JSX(({ title, footnote, className = '', ...rest }) => {
         const [showMap, setShowMap] = useState(false);
@@ -4438,7 +4380,7 @@
         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: "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, defaultPadding: "", ...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;
 
@@ -4481,13 +4423,13 @@
         const lineOpacity = getLineOpacity(showLines);
         const paddingX = getPaddingX(steps.length);
         const isMainButton = Boolean(buttons?.every((b) => b?.text));
-        return (jsxs(BlockWrapper, { className: style('box-border py-12', shortGaps ? 'px-20' : 'px-[70px]', 'flex flex-col items-center overflow-hidden', className), version: version, ...rest, children: [title ? (jsx(Heading, { headingType: "h4", className: "max-w-[752px] text-center mb-9", title: title })) : null, steps?.length ? (jsxs("div", { className: "box-border", children: [jsx("div", { className: style('flex items-center', paddingX), children: joinList(jsx("div", { className: style('h-0.5 w-full bg-secondary-light flex-1', lineOpacity) }))(steps.map(renderStepIcon(styleMap, size, stepVersion))) }), jsx("div", { className: style('flex justify-between mt-4', shortGaps ? 'gap-x-3' : 'gap-x-[101px]'), children: steps.map(renderStep({ styleMap, isMainButton, version })) })] })) : null, renderButtonsSection(buttons, { className: 'mt-8' })] }));
+        return (jsxs(BlockWrapper, { className: style('box-border flex flex-col items-center overflow-hidden', className), defaultPadding: "p-default", version: version, ...rest, children: [title ? (jsx(Heading, { headingType: "h4", className: "max-w-[752px] text-center mb-9", title: title })) : null, steps?.length ? (jsxs("div", { className: "box-border", children: [jsx("div", { className: style('flex items-center', paddingX), children: joinList(jsx("div", { className: style('h-0.5 w-full bg-secondary-light flex-1', lineOpacity) }))(steps.map(renderStepIcon(styleMap, size, stepVersion))) }), jsx("div", { className: style('flex justify-between mt-4', shortGaps ? 'gap-x-3' : 'gap-x-[101px]'), children: steps.map(renderStep({ styleMap, isMainButton, version })) })] })) : null, renderButtonsSection(buttons, { className: 'mt-8' })] }));
     });
     const renderStepIcon = (styleMap, size, stepVersion) => ({ icon }, i) => {
         const styleStepIconSize = size === 'normal' ? 'h-[100px] w-[100px]' : 'h-[63px] w-[63px]';
         const stepVersionIconTextStyles = stepVersion === 'secondary' ? 'group-data-primary:text-white' : 'text-secondary-text';
         const iconVersion = stepVersion === 'secondary' ? 'white' : 'color';
-        return (jsx(BlockWrapper, { className: `${styleStepIconSize} flex justify-center items-center text-center rounded-full p-[26px] box-border z-10`, version: stepVersion, children: checkCanRenderIcon(icon) ? (jsx(ImgInner, { image: { ...icon, iconVersion: icon.iconVersion || iconVersion }, width: "48", height: "48" })) : (jsx("span", { className: style('text-h4', stepVersion === 'transparent' ? styleMap.iconText : stepVersionIconTextStyles), children: i + 1 })) }, String(i)));
+        return (jsx(BlockWrapper, { className: `${styleStepIconSize} flex justify-center items-center text-center rounded-full p-[26px] box-border z-10`, version: stepVersion, children: checkCanRenderIcon(icon) ? (jsx(Img, { image: { ...icon, iconVersion: icon.iconVersion || iconVersion }, width: "48", height: "48" })) : (jsx("span", { className: style('text-h4', stepVersion === 'transparent' ? styleMap.iconText : stepVersionIconTextStyles), children: i + 1 })) }, String(i)));
     };
 
     const DEFAULT_GAP = 14;
@@ -4497,7 +4439,7 @@
       and get rid of a clipping effect caused by overflow: hidden.
      */
     const DEFAULT_PADDING = 16;
-    const SwipeListControl = JSX(({ className = '', gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, minHeight, children, onVisibleIndicesChange, listType = 'horizontal-list', version, }) => {
+    const SwipeListControl = JSX(({ className, version, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, minHeight, children, onVisibleIndicesChange, listType = 'horizontal-list', }) => {
         const itemCount = Array.isArray(children) ? children.length : 0;
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount,
@@ -4507,9 +4449,7 @@
         return (jsxs("div", { className: style(className, listType === 'vertical-list' ? 'relative h-full' : ''), children: [jsx(SwipeListContainer, { containerRef: containerRef, activeIndex: activeIndex, visibleItemCount: 1, gap: gap, padding: padding, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, listType: listType, minHeight: minHeight, children: children }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: activeIndex, dotCount: itemCount, listType: listType, version: version })) : null] }));
     });
 
-    const SwipeListControlBlock = JSX(({ listType, showDots, options, version, ...rest }) => {
-        return (jsx(BlockWrapper, { version: version, ...rest, children: jsx(SwipeListControl, { listType: listType, showDots: showDots, version: version, children: renderChildren({ ...rest, options }) }) }));
-    });
+    const SwipeListControlBlock = JSX(({ listType, showDots, options, version, ...rest }) => (jsx(BlockWrapper, { version: version, defaultPadding: "p-0", ...rest, children: jsx(SwipeListControl, { listType: listType, showDots: showDots, version: version, children: renderChildren({ ...rest, options }) }) })));
     SwipeListControlBlock.childrenTypes = {
         exclude: ['SwipeListControlBlock'],
     };
@@ -4673,7 +4613,7 @@
             fireTabEvent(selectedTab);
             setCurrentTab(selectedTab);
         }, []);
-        return (jsx(BlockWrapper, { className: `relative box-border flex gap-x-1 w-full ${isSticky ? 'sticky top-1 z-20' : ''} ${className}`, role: "tablist", ...rest, children: renderTabs({ tabs, onClick: handleClick, currentTab, ...rest }) }));
+        return (jsx(BlockWrapper, { className: `relative box-border flex gap-x-1 w-full ${isSticky ? 'sticky top-1 z-20' : ''} ${className}`, defaultPadding: "p-0", role: "tablist", ...rest, children: renderTabs({ tabs, onClick: handleClick, currentTab, ...rest }) }));
     });
     const renderTabs = ({ tabsMode, tabs, ...rest }) => {
         switch (tabsMode) {
@@ -4709,7 +4649,7 @@
         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 renderImgCellData = ({ image }) => (image?.src ? jsx(Img, { image: image }) : null);
     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 });
@@ -4805,7 +4745,7 @@
         const toggleTables = useCallback((key) => setHiddenTables((oldState) => ({ ...oldState, [key]: !oldState[key] })), []);
         return (jsx("div", { children: items.map((_, tableIdx) => {
                 const key = `activeTabIdx:${activeTabIndex}-tableIdx:${tableIdx}`;
-                return (jsxs("div", { className: "w-full", children: [jsxs("div", { className: "flex p-4 bg-gray text-xl-light text-center justify-center cursor-pointer relative", onClick: () => toggleTables(key), children: [_.title, jsx(ImgInner, { image: { icon: hiddenTables[key] ? 'PlusIcon' : 'MinusIcon' }, className: "absolute right-[22px]", width: "24", height: "24" })] }), jsx("div", { className: `w-full pl-2 overflow-hidden transition-height duration-500 ease-in-out ${hiddenTables[key] ? 'h-0' : ''}`, children: jsx("div", { className: "relative", children: jsx(InnerTableBodyItem, { rows: _.rowsData }) }) })] }, key));
+                return (jsxs("div", { className: "w-full", children: [jsxs("div", { className: "flex p-4 bg-gray text-xl-light text-center justify-center cursor-pointer relative", onClick: () => toggleTables(key), children: [_.title, jsx(Img, { image: { icon: hiddenTables[key] ? 'PlusIcon' : 'MinusIcon' }, className: "absolute right-[22px]", width: "24", height: "24" })] }), jsx("div", { className: `w-full pl-2 overflow-hidden transition-height duration-500 ease-in-out ${hiddenTables[key] ? 'h-0' : ''}`, children: jsx("div", { className: "relative", children: jsx(InnerTableBodyItem, { rows: _.rowsData }) }) })] }, key));
             }) }));
     });
 
@@ -4841,7 +4781,7 @@
         const [openTableInnerIdx, setOpenTableInnerIdx] = useState(undefined);
         const handleOpenTableInnerIdx = useCallback((_) => setOpenTableInnerIdx(_), []);
         const onHideContentClick = () => setTableInner(undefined);
-        return (jsxs(TariffsTableRowContainer, { onHideContentClick: onHideContentClick, tableInner: tableInner, ...rest, children: [jsx("div", { className: `text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`, children: jsxs("div", { className: "flex items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(ImgInner, { className: "mr-3.5 max-w-6", image: header.icon, width: "24", height: "24" })) : null, header?.title ? jsx("div", { className: "text-m-light", children: header?.title }) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, rowIdx: rowIdx, cellIdx: i, setTableInner: handleSetTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: handleOpenTableInnerIdx, ...rest }, String(i)))) })) : null] }));
+        return (jsxs(TariffsTableRowContainer, { onHideContentClick: onHideContentClick, tableInner: tableInner, ...rest, children: [jsx("div", { className: `text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`, children: jsxs("div", { className: "flex items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(Img, { className: "mr-3.5 max-w-6", image: header.icon, width: "24", height: "24" })) : null, header?.title ? jsx("div", { className: "text-m-light", children: header?.title }) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, rowIdx: rowIdx, cellIdx: i, setTableInner: handleSetTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: handleOpenTableInnerIdx, ...rest }, String(i)))) })) : null] }));
     });
 
     const TariffsTable = JSX(({ className = '', title, description, rowHeaders, tariffsColumns: columns, hiddenRowsNum = 0, ...rest }) => {
@@ -4857,7 +4797,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: `p-default overflow-hidden relative ${itemCount > 1 ? 'pr-0' : ''} ${className}`, ...rest, children: [renderTitle({ 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: style('overflow-hidden relative', className), defaultPadding: style('p-default', itemCount > 1 ? 'pr-0' : ''), ...rest, children: [renderTitle({ 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({ title, description }) {
         return title ? (jsx(Heading, { headingType: "h3", className: `text-center ${description ? 'mb-2.5' : 'mb-8'}`, title: title })) : null;
@@ -4874,27 +4814,16 @@
                         })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
     });
 
-    const TextBlock = JSX(({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => {
-        return (jsxs(BlockWrapper, { className: style('px-9 py-4 flex gap-3 bg-white group-data-secondary:bg-primary-main/10', className), ...rest, children: [iconVersion === 'small' ? jsx("div", { className: "mt-1", children: renderIcon() }) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "flex flex-col w-fit gap-3", children: [title ? (jsx(Text, { size: "text-l", font: "font-medium", color: "text-primary-text group-data-secondary:text-white", children: title })) : null, description ? renderDescription(description) : null, items?.length ? renderList(items, true) : null, __html ? jsx(RichText, { __html: __html }) : null] })] }));
-    });
+    const TextBlock = JSX(({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => (jsxs(BlockWrapper, { className: style('flex gap-3 bg-white group-data-secondary:bg-primary-main/10', className), ...rest, children: [iconVersion === 'small' ? jsx("div", { className: "mt-1", children: renderIcon() }) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "flex flex-col w-fit gap-3", children: [title ? (jsx(Text, { size: "text-l", font: "font-medium", color: "text-primary-text group-data-secondary:text-white", children: title })) : null, description ? renderDescription(description) : null, items?.length ? renderList(items, true) : null, __html ? jsx(RichText, { __html: __html }) : null] })] })));
     const renderIcon = () => (jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main`, children: "i" }));
-    const renderImage = (image) => image?.src ? jsx(ImgInner, { className: "h-fit", image: image }) : null;
+    const renderImage = (image) => image?.src ? jsx(Img, { className: "h-fit", image: image }) : null;
     const renderDescription = (description) => (jsx(Paragraph, { size: "text-s", color: "text-secondary-text group-data-secondary:text-white", children: description }));
     const renderList = (items, bullets) => {
         const listStyle = bullets ? 'list-disc pl-6' : '';
         return (jsx("ul", { className: style('text-secondary-text group-data-secondary:text-white/80', listStyle), children: items.map((_, i) => (jsx("li", { children: jsx(Text, { size: "text-s", font: "font-light", children: _ }) }, `listItem-${i}`))) }));
     };
 
-    const Tags = JSX((props) => {
-        const { tags, className = '' } = props;
-        return tags?.length ? (jsx("div", { className: `flex flex-wrap gap-2 ${className}`, children: tags.map(renderTag) })) : null;
-    });
-    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(({ title, headingType = 'h3', __html, items, buttons, image, isDotted = true, listItemSize = 'M', className = '', tags, children, directionRight = true, ...rest }) => (jsxs(BlockWrapper, { className: style('flex grow justify-between items-stretch h-full p-9 pr-3 box-border', getTileRightPadding(className), getTileMinHeight(className), className), ...rest, children: [image?.src ? (jsx(ImgInner, { className: style('mt-auto ml-7', directionRight ? 'order-2' : ''), image: image })) : null, jsx(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]',
-                }), children: jsxs("div", { children: [__html ? (jsx("div", { className: "max-w-[600px] mt-2.5", children: jsx(RichText, { __html: __html }) })) : null, children, jsx(List, { className: "mt-2.5", items: items, isDotted: isDotted, listItemSize: listItemSize }), tags?.length ? jsx(Tags, { tags: tags, className: "mt-5" }) : null] }) })] })));
+    const Tile = JSX(({ className, headlineVersion = 'S', listItemSize = 'M', ...rest }) => (jsx(BlockWrapper, { className: className, ...rest, children: jsx(BaseProductTile, { className: "h-full", headlineVersion: headlineVersion, listItemSize: listItemSize, ...rest, imageOptions: { imageAlign: 'end', ...rest.imageOptions } }) })));
 
     const alignStyle = {
         stretch: 'items-stretch',
@@ -4904,7 +4833,7 @@
     };
     const VerticalLayout = JSX(({ className = '', gap = '', align = 'stretch', isPadding = false, isInnerPadding = true, version = 'transparent', isTheme = false, ...rest }) => {
         const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
-        return (jsx(BlockWrapper, { className: style('relative', 'flex flex-col [&>*]:max-w-full', isPadding ? 'p-default' : '', gapStyles[gap], align && alignStyle[align], className), version: version, isTheme: isTheme, ...rest, children: renderChildren({
+        return (jsx(BlockWrapper, { className: style('relative', 'flex flex-col [&>*]:max-w-full', gapStyles[gap], align && alignStyle[align], className), defaultPadding: isPadding ? 'p-default' : '', version: version, isTheme: isTheme, ...rest, children: renderChildren({
                 ...rest,
                 renderProps: (block, options) => renderBlock$1(block, options, { className: innerPaddingStyle }),
             }) }));
@@ -4916,7 +4845,7 @@
 
     const Video = JSX(({ className, title, url, previewImg, ...rest }) => {
         const router = useRouter();
-        return (jsxs(BlockWrapper, { className: style(getPaddings(className), className), ...rest, children: [jsx(Headline, { title: title, headlineVersion: "M" }), url ? (jsx("video", { className: "m-auto w-full object-fill", preload: "metadata", poster: adjustHref(router)(previewImg?.src), style: { maxHeight: 524 }, controls: true, children: jsx("source", { src: adjustHref(router)(url) }) })) : null] }));
+        return (jsxs(BlockWrapper, { className: className, defaultPadding: getPaddings(className), ...rest, children: [jsx(Headline, { title: title, headlineVersion: "M" }), url ? (jsx("video", { className: "m-auto w-full object-fill", preload: "metadata", poster: adjustHref(router)(previewImg?.src), style: { maxHeight: 524 }, controls: true, children: jsx("source", { src: adjustHref(router)(url) }) })) : null] }));
     });
 
     const Blocks = {
@@ -5120,7 +5049,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.11.3";
+    const packageVersion = "0.12.4";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;