@redneckz/wildless-cms-uni-blocks 0.4.3 → 0.4.5

package/bundle/bundle.umd.js

@@ -321,6 +321,7 @@
         IconMap["ComfortableCompIcon"] = "ComfortableCompIcon";
         IconMap["CreditCardsIcon"] = "CreditCardsIcon";
         IconMap["DiscountShapeIcon"] = "DiscountShapeIcon";
+        IconMap["DocDownload"] = "DocDownload";
         IconMap["DocIcon"] = "DocIcon";
         IconMap["DocIconMonoColor"] = "DocIconMonoColor";
         IconMap["DocsIcon"] = "DocsIcon";
@@ -406,6 +407,7 @@
         IconTitleMap["ComfortableCompIcon"] = "\u041A\u0440\u0435\u0441\u043B\u043E";
         IconTitleMap["CreditCardsIcon"] = "\u041A\u0440\u0435\u0434\u0438\u0442\u043D\u044B\u0435 \u043A\u0430\u0440\u0442\u044B";
         IconTitleMap["DiscountShapeIcon"] = "\u0421\u043A\u0438\u0434\u043A\u0430";
+        IconTitleMap["DocDownload"] = "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442";
         IconTitleMap["DocIcon"] = "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442";
         IconTitleMap["DocIconMonoColor"] = "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442 (\u043E\u0434\u043D\u043E\u0446\u0432\u0435\u0442\u043D\u044B\u0439)";
         IconTitleMap["DocsIcon"] = "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u044B";
@@ -496,14 +498,18 @@
         return (jsxs("picture", { className: `${pictureStyles} ${className}`, children: [image?.sources?.length
                     ? image.sources
                         .sort(sourcesComparator)
-                        .map(({ src, format, media, size }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...size }, `${index}_${src}`)))
+                        .map(({ src, format, media }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...image.size }, `${index}_${src}`)))
                     : null, renderImg(image, imageClassName, isMobile)] }));
     });
     const renderImg = (image, imageClassName = '', isMobile = false) => {
+        const style = {
+            width: image.size?.width ? `${image.size?.width}px` : '100%',
+            height: image.size?.height ? `${image.size?.height}px` : '100%',
+        };
         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, ...image.size }));
+        return (jsx("img", { src: image.src, className: `${imgStyle} ${imageClassName}`, alt: alt, title: title, style: style, ...image.size }));
     };
     function formatToMimeType(format) {
         return format ? `image/${String(format)}` : undefined;
@@ -638,7 +644,7 @@
     const BenefitItem = JSX((props) => {
         const { className = '', icon, label, description, version = 'primary', benefitsVersion = 'normal', } = props;
         const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
-        return (jsxs("div", { className: `flex items-center gap-5 ${className}`, children: [icon ? (jsx(Img, { className: renderBenefitIconBgStyle(version, benefitsVersion), image: { ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }, asSVG: true })) : null, jsxs("div", { className: "gap-0.5", children: [label ? jsx("div", { className: `text-h6 ${titleStyleMap[version]}`, children: label }) : null, description ? (jsx("div", { className: `text-m-light ${descStyleMap[version]}`, children: description })) : null] })] }));
+        return (jsxs("div", { className: `flex items-start gap-5 ${className}`, children: [icon ? (jsx(Img, { className: renderBenefitIconBgStyle(version, benefitsVersion), image: { ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }, asSVG: true })) : null, jsxs("div", { className: "gap-0.5", children: [label ? jsx("div", { className: `text-h6 ${titleStyleMap[version]}`, children: label }) : null, description ? (jsx("div", { className: `text-m-light ${descStyleMap[version]}`, children: description })) : null] })] }));
     });
     function renderBenefitIconBgStyle(version, benefitsVersion) {
         let bgColorStyle = 'bg-primary-main text-black';
@@ -648,19 +654,20 @@
         else if (benefitsVersion === 'normal') {
             bgColorStyle = 'bg-secondary-light text-primary-main';
         }
-        return `w-[50px] h-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
+        return `w-[50px] h-[50px] min-w-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
     }
 
     const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
 
-    const pictureTextStyleMap = {
+    const VersionStyleMap = {
         primary: 'bg-white text-primary-text',
         secondary: 'bg-primary-main text-white',
     };
+
     const PictureText = JSX(({ className = '', context, title, description, image, benefits, version = 'primary', sum, monthLimit, directionRight = false, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, align: "center" }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src && jsx(Img, { className: directionRight ? 'order-2 ml-6' : 'mr-6', image: image }), jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$1(version)) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] })] }));
+        return (jsxs(BlockWrapper, { className: `relative font-sans p-14 ${VersionStyleMap[version]} ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, align: "center" }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src && jsx(Img, { className: directionRight ? 'order-2 ml-6' : 'mr-6', image: image }), jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] })] }));
     });
-    const renderBenefit$1 = (version) => (benefit, i) => (jsx(BenefitItem, { icon: benefit.icon, label: benefit.label, description: benefit.description, version: version }, String(i)));
+    const renderBenefit$2 = (version) => (benefit, i) => (jsx(BenefitItem, { icon: benefit.icon, label: benefit.label, description: benefit.description, version: version }, String(i)));
     function renderInsuranceSumMonth(sum, monthLimit) {
         return sum || monthLimit ? (jsxs("div", { className: "bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4", children: [Number.isFinite(sum) ? renderValueBlock$1('Страховая сумма:', sum, Boolean(monthLimit)) : null, Number.isFinite(monthLimit)
                     ? renderValueBlock$1('Ежемесячный лимит:', monthLimit, Boolean(sum))
@@ -786,7 +793,7 @@
         return disabled ? (jsx(DisabledButton, { rounded: rounded, ...rest, children: buttonInner })) : (jsx(RegularButton, { rounded: rounded, ...rest, children: buttonInner }));
     });
     const RegularButton = JSX(({ className = '', ariaLabel, version = 'none', rounded, href, target, children, onClick, ...rest }) => {
-        return (jsx("a", { className: `${buttonStyle} inline-block cursor-pointer no-underline focus:border-primary-focus focus:border ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: href ? 'link' : 'button', ...rest, children: children }));
+        return (jsx("a", { className: `${buttonStyle} border border-transparent inline-block cursor-pointer no-underline focus:border-primary-focus focus:border ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: href ? 'link' : 'button', ...rest, children: children }));
     });
     const DisabledButton = JSX(({ className, children, ariaLabel, version = 'none', rounded }) => {
         return (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: -1, className: `inline-block ${buttonStyle} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: children }));
@@ -839,23 +846,27 @@
         tile: 'text-primary-text',
         'tile-white': 'text-white',
     };
+    const TEXT_SIZE_MAP = {
+        M: 'text-xl-light',
+        L: 'text-h5-light',
+    };
     const List = JSX((props) => {
-        const { className = '', itemClassName, isDotted, items, version = 'primary' } = props;
-        return (jsx("section", { className: `${TEXT_STYLE_MAP[version]} ${className}`, role: "list", children: items?.length
+        const { className = '', itemClassName, isDotted, items, listItemSize = 'M', version = 'primary', } = props;
+        return (jsx("section", { className: `${TEXT_STYLE_MAP[version]} ${TEXT_SIZE_MAP[listItemSize]} ${className}`, role: "list", children: items?.length
                 ? items.map((_, i) => (jsx(ListItem, { className: itemClassName, isDotted: isDotted, version: version, children: _ }, String(i))))
                 : null }));
     });
 
     const BaseTile = JSX(({ className = '', title = '', children, buttons, image }) => {
-        return (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col w-full", children: [jsx("div", { children: children }), buttons ? jsx("div", { className: "mt-9", children: buttons }) : null] }), image] })] }));
+        return (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { children: children }), buttons ? jsx("div", { className: "mt-auto", children: buttons }) : null] }), image] })] }));
     });
 
-    const renderBenefit = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => {
+    const renderBenefit$1 = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => {
         return (jsx(BenefitItem, { icon: icon, label: label, description: description, version: version, benefitsVersion: benefitsVersion }, String(i)));
     };
 
     const ProductBlockInner = JSX(({ className = '', context, title, headlineVersion = 'L', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
-        return (jsxs("div", { className: `flex grow justify-between items-stretch h-full ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { context: context, title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion, align: "left" }), jsxs(BaseTile, { context: context, buttons: getButtons(context, buttons), children: [benefits?.filter((_) => _.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map(renderBenefit(version, benefitsVersion)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] })] }), image?.src && jsx(Img, { className: "mt-[-50px]", image: image })] }));
+        return (jsxs("div", { className: `flex grow justify-between items-stretch h-full ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { context: context, title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion, align: "left" }), jsxs(BaseTile, { context: context, buttons: getButtons(context, buttons), children: [benefits?.filter((_) => _.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map(renderBenefit$1(version, benefitsVersion)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] })] }), image?.src && jsx(Img, { className: "mt-[-50px]", image: image })] }));
     });
     const getButtons = (context, buttons) => {
         return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex gap-4" })) : null;
@@ -868,10 +879,6 @@
         return (jsxs("div", { className: `flex items-center cursor-pointer ${className}`, onClick: onClick, children: [jsx(Button, { version: version, rounded: true, className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3", ariaLabel: text, href: href, target: target, children: jsx(Img, { className: "w-4 h-4", image: { ...backwardIcon, iconVersion }, asSVG: true }) }), text ? jsx("span", { className: "text-m", children: text }) : null] }));
     }
 
-    const productBlockStyleMap$1 = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
-    };
     const breadcrumbsStyleMap = {
         primary: 'text-secondary-text',
         secondary: 'text-white/80',
@@ -880,7 +887,7 @@
         const { context, className = '', breadcrumbs, backwardButton, version = 'primary', ...otherProps } = props;
         const router = context.useRouter();
         const { handlerDecorator } = context;
-        return (jsxs(BlockWrapper, { context: context, className: `font-sans overflow-hidden p-[50px] flex flex-col box-border min-h-[528px] ${productBlockStyleMap$1[version]} ${className}`, ...otherProps, children: [backwardButton?.text
+        return (jsxs(BlockWrapper, { context: context, className: `font-sans overflow-hidden p-[50px] flex flex-col box-border min-h-[454px] ${VersionStyleMap[version]} ${className}`, ...otherProps, children: [backwardButton?.text
                     ? renderBackwardButton(useLink({ router, handlerDecorator }, backwardButton), version, 'mb-10 -mt-2.5')
                     : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs-light mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbsStyleMap[version]}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { ...useLink({ router, handlerDecorator }, { className: breadcrumbsStyleMap[version], ...breadcrumb }) }, String(i))))) })) : null, jsx(ProductBlockInner, { context: context, version: version, ...otherProps })] }));
     });
@@ -948,41 +955,36 @@
         }
     }
 
-    const tileStyleMap = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
-    };
     const Tile = JSX((props) => {
-        const { context, title, headingType = 'h3', description, items, children, buttons, image, isDotted = true, className = '', version = 'primary', ...rest } = props;
-        return (jsx(BlockWrapper, { context: context, className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: headingType, as: "h2", title: title, className: `whitespace-pre-wrap max-w-[600px] text-h4
-              ${version === 'primary' ? 'text-primary-text' : ''}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons.map((button) => ({ ...button, className: 'w-[158px]' })), className: "flex mt-9 gap-3" })) : null, image: image?.src ? jsx(Img, { className: "mt-auto ml-7", image: image }) : null, children: [description ? (jsx(Description, { className: "max-w-[600px] text-xl-light mt-2", description: description })) : null, children, renderList$2(items, version, isDotted)] }) }));
+        const { context, title, headingType = 'h3', description, items, children, buttons, image, isDotted = true, listItemSize = 'M', className = '', version = 'primary', ...rest } = props;
+        const headingClassName = version === 'primary' ? 'text-primary-text' : '';
+        return (jsx(BlockWrapper, { context: context, className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: headingType, as: "h2", title: title, className: `whitespace-pre-wrap max-w-[600px] ${headingClassName}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons.map((button) => ({ ...button, className: 'w-[158px]' })), className: "flex mt-8 gap-3" })) : null, image: image?.src ? jsx(Img, { className: "mt-auto ml-7", image: image }) : null, children: [description ? (jsx(Description, { className: "max-w-[600px] text-xl-light mt-2", description: description })) : null, children, renderList$1(items, { version, isDotted, listItemSize })] }) }));
     });
-    function renderList$2(items, version, isDotted) {
+    function renderList$1(items, { version, isDotted, listItemSize }) {
         const listVersion = version === 'primary' ? 'tile' : 'tile-white';
-        return items?.length ? (jsx(List, { items: items, isDotted: isDotted, itemClassName: "text-h6 mt-2", version: listVersion })) : null;
+        return items?.length ? (jsx(List, { items: items, isDotted: isDotted, className: "mt-3", listItemSize: listItemSize, itemClassName: "mb-1.5", version: listVersion })) : null;
     }
 
-    const productTileStyleMap = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
-    };
-    const ProductTile = JSX(({ context, className = '', title, headlineVersion = 'S', description, additionalDescription, benefits, buttons, image, version = 'primary', ...rest }) => {
-        return (jsxs(BlockWrapper, { context: context, className: `bg-white overflow-hidden text-primary-text font-sans p-9 box-border min-h-[364px] relative justify-between grid ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: [jsxs("div", { className: "z-[1]", children: [jsx(Headline, { context: context, className: "!p-0", as: "h2", title: title, description: description, headlineVersion: headlineVersion, bgColorHeadline: version, align: "left" }), renderBenefits$1(benefits || [], version), additionalDescription
-                            ? renderAdditionalDescription(additionalDescription, version)
-                            : null] }), buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex self-end mt-5 gap-4 z-[1] text-l" })) : null, image?.src ? jsx(Img, { className: "absolute right-0 bottom-0", image: image }) : null] }));
+    const ProductTile = JSX(({ context, className = '', title, headlineVersion = 'S', description, additionalDescription, benefits = [], buttons, image, version = 'primary', ...rest }) => {
+        return (jsxs(BlockWrapper, { context: context, className: `overflow-hidden font-sans p-9 box-border relative justify-between grid ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)}`, ...rest, children: [jsx(Headline, { context: context, className: `!p-0 z-10 ${title || description ? 'mb-3.5' : ''}`, as: "h2", title: title, description: description, headlineVersion: headlineVersion, bgColorHeadline: version, align: "left" }), renderBenefits$1(benefits, version), additionalDescription ? renderAdditionalDescription(additionalDescription, version) : null, buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex self-end mt-5 gap-4 z-10 text-l" })) : null, image?.src ? jsx(Img, { className: "absolute right-0 bottom-0", image: image }) : null] }));
     });
+    // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
+    const BENEFITS_WIDTH = 'max-w-[calc(100%-186px)]';
     function renderBenefits$1(benefits, version) {
-        return (jsxs("div", { className: "flex mt-3.5", children: [benefits.length ? (jsx("div", { className: "mr-6 gap-2.5 text-h6", children: benefits.map(renderBenefitLabel) })) : null, benefits.length ? (jsx("div", { className: "pt-1 text-m", children: benefits.map((_, i) => renderBenefitDescription(_, i, version)) })) : null] }));
-    }
-    function renderBenefitLabel(benefit, i) {
-        return (jsx("div", { className: `${i ? 'mt-2.5' : ''}`, children: benefit.label }, String(i)));
+        return (jsx("div", { className: `z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline ${BENEFITS_WIDTH}`, children: benefits.length ? benefits.map(renderBenefit(version)) : null }));
     }
-    function renderBenefitDescription(benefit, i, version = 'primary') {
+    function renderBenefit(version = 'primary') {
         const labelStyleMap = {
             primary: 'text-secondary-text',
             secondary: 'text-white',
         };
-        return (jsx("div", { className: `text-m-light ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`, children: benefit.description }, String(i)));
+        return function renderVersionedBenefit(benefit, i) {
+            const { label = '', description = '' } = benefit;
+            return [
+                jsx("div", { className: "text-h6", children: label }, `label-${i}`),
+                jsx("div", { className: `text-m-light ${labelStyleMap[version]}`, children: description }, `desc-${i}`),
+            ];
+        };
     }
     function renderAdditionalDescription(additionalDescription, version = 'primary') {
         const descStyleMap = {
@@ -1000,10 +1002,6 @@
         return (jsxs("div", { children: [isShown[0] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 ${btnClass[0]} ${className}`, onClick: handler[0], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left", disabled: !isShown[0] })) : null, isShown[1] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 rotate-180 ${btnClass[1]} ${className}`, onClick: handler[1], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right", disabled: !isShown[1] })) : null] }));
     }
 
-    const cardVersionMap = {
-        primary: 'bg-white text-secondary-text',
-        secondary: 'bg-primary-main text-white',
-    };
     const galleryLengthForScrollMap = {
         normal: 3,
         mini: 4,
@@ -1041,7 +1039,7 @@
     });
     function renderCard({ card, version }, i) {
         return (jsx("section", { className: `box-border border-solid border border-main-stroke p-6 mx-2 flex flex-col justify-between
-        items-stretch ${cardStyleMap$1[version]} ${cardVersionMap[card.version ?? 'primary']} w-full col-span-4`, role: "listitem", children: jsx(GalleryCardInner, { ...card }) }, String(i)));
+        items-stretch ${cardStyleMap$1[version]} ${VersionStyleMap[card.version ?? 'primary']} w-full col-span-4`, role: "listitem", children: jsx(GalleryCardInner, { ...card }) }, String(i)));
     }
 
     const GalleryInner = JSX(({ context, cards = [], className = '', version = 'normal', ...rest }) => {
@@ -1087,8 +1085,8 @@
         LinkList,
     };
 
-    const renderBlocksList = ({ blocks, context, className = '' }) => blocks?.length ? blocks.map(renderBlock$2({ context, className })) : null;
-    const renderBlock$2 = ({ context, className }) => (block, i) => {
+    const renderBlocksList = ({ blocks, context, className = '' }) => blocks?.length ? blocks.map(renderBlock$1({ context, className })) : null;
+    const renderBlock$1 = ({ context, className }) => (block, i) => {
         if (!block) {
             return null;
         }
@@ -1130,7 +1128,7 @@
         });
         return (jsxs("li", { className: "border-0 border-b border-solid border-main-divider last:border-b-0", children: [jsxs("button", { className: `border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full
             font-sans text-h6 ${hasContent ? 'group cursor-pointer' : ''}
-          `, onClick: handleToggle, children: [jsx("span", { className: `text-xl font-medium pr-2.5`, children: label }), hasContent ? (jsx(Img, { image: icon, className: "text-primary-main", width: "24", height: "24", asSVG: true })) : null] }), hasContent ? (jsx(AccordionItemInner, { isExpanded: isActive, blocks: blocks, context: context })) : null] }));
+          `, onClick: handleToggle, children: [jsx("span", { className: `text-xl font-medium pr-2.5`, children: label }), hasContent ? (jsx(Img, { image: icon, className: "text-primary-main flex-shrink-0", width: "24", height: "24", asSVG: true })) : null] }), hasContent ? (jsx(AccordionItemInner, { isExpanded: isActive, blocks: blocks, context: context })) : null] }));
     });
 
     const ALIGN_TITLE = {
@@ -1142,22 +1140,45 @@
         return (jsxs(BlockWrapper, { context: context, className: `p-[50px] mb-1 last:mb-0 font-sans bg-white text-primary-text ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `mb-2.5 ${ALIGN_TITLE[accordionAlignTitle]}`, title: title })) : null, description ? jsx("div", { className: "mb-2.5 text-l", children: description }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, context: context }, `AccordionItem${i}`))) })) : null] }));
     });
 
-    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-12 flex flex-col items-center ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefitList?.length ? renderBenefits(benefitList) : null] }));
+    const benefitsBlockStyleMap = {
+        primary: 'bg-white',
+        secondary: 'bg-primary-main',
+    };
+    const benefitsTextStyleMap = {
+        primary: '',
+        secondary: 'text-white',
+    };
+    const benefitsDescriptionStyleMap = {
+        primary: 'text-secondary-text',
+        secondary: 'text-white opacity-80',
+    };
+    const benefitsIconStyleMap = {
+        primary: 'bg-main-divider text-primary-main',
+        secondary: 'bg-white/30 text-black',
+    };
+    const BenefitsBlock = JSX(({ className = '', title, benefitList, benefitsBlockVersion = 'primary', ...rest }) => {
+        return (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-12 flex flex-col items-center ${className} ${benefitsBlockStyleMap[benefitsBlockVersion]}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `max-w-[47rem] text-center ${benefitsTextStyleMap[benefitsBlockVersion]}`, title: title })) : null, benefitList?.length ? renderBenefits(benefitList, benefitsBlockVersion) : null] }));
     });
-    const renderBenefits = (benefits) => {
-        return (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefits.map(renderStep) }));
+    const renderBenefits = (benefitList, benefitsBlockVersion) => {
+        return (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep(benefitsBlockVersion)) }));
     };
-    const renderStep = (benefit, i) => {
-        const description = benefit?.description || undefined;
-        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(Img, { className: "w-[50px] h-[50px] min-w-[50px] p-3 rounded-full bg-main-divider", image: benefit.icon, asSVG: true })) : null, benefit?.icon?.src ? jsx(Img, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? jsx("h3", { className: "text-h6 m-0", children: benefit.label }) : null, renderDescription(description)] })] }, String(i)));
+    const setIconVersion = (benefitIcon, benefitsBlockVersion) => {
+        if (!benefitIcon.icon) {
+            return benefitIcon;
+        }
+        benefitIcon.iconVersion = benefitsBlockVersion === 'secondary' ? 'white' : 'normal';
+        return benefitIcon;
+    };
+    const renderStep = (benefitsBlockVersion) => (benefit, i) => {
+        const description = (benefit?.description || undefined);
+        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(Img, { className: `w-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[benefitsBlockVersion]}`, image: setIconVersion(benefit.icon, benefitsBlockVersion), asSVG: true })) : null, benefit?.icon?.src ? jsx(Img, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? (jsx("h3", { className: `text-h6 m-0 ${benefitsTextStyleMap[benefitsBlockVersion]}`, children: benefit.label })) : null, renderDescription(description, benefitsBlockVersion)] })] }, String(i)));
     };
-    const renderDescription = (description) => {
+    const renderDescription = (description, benefitsBlockVersion) => {
         const benefitType = description ? description?.benefitType : null;
         if (!benefitType) {
             return null;
         }
-        return description ? (jsx("div", { className: "text-l-light text-secondary-text mt-2", children: benefitType === 'list'
+        return description ? (jsx("div", { className: `text-l-light mt-2 ${benefitsDescriptionStyleMap[benefitsBlockVersion]}`, children: benefitType === 'list'
                 ? renderListBenefit(description)
                 : renderTextBenefit(description) })) : null;
     };
@@ -1347,15 +1368,31 @@
     let impl = useAsyncData$1;
     const useAsyncData = (key, fetcher) => impl(key, fetcher);
 
-    function useCalculatorParams(dir) {
-        const { data } = useAsyncData(`/wcms-resources/${dir}.json`, fetchCalculatorSourceBookParams);
-        return data;
+    async function fetchJSON(url, options) {
+        try {
+            return await fetchJSONUnsafe(url, options);
+        }
+        catch (err) {
+            console.error(err);
+        }
+        return null;
     }
-    async function fetchCalculatorSourceBookParams(url) {
-        const response = await fetch(url);
+    async function fetchJSONUnsafe(url, options) {
+        const response = await fetch(url, {
+            ...options,
+            headers: {
+                ...options?.headers,
+                'Content-Type': 'application/json',
+            },
+        });
         return await response.json();
     }
 
+    function useCalculatorParams(dir) {
+        const { data } = useAsyncData(`/wcms-resources/${dir}.json`, fetchJSONUnsafe);
+        return data;
+    }
+
     const useBonusCalculatorParams = (userInputParams, sourceBookDir) => {
         const { travelExpenseValue, restExpenseValue } = userInputParams;
         const bonusCalculatorSourceBookParams = useCalculatorParams(sourceBookDir || BONUS_CALC_DEFAULT_DIR) ||
@@ -1458,13 +1495,12 @@
         const { rateBottomRange, rateTopRange, sumBorder } = creditCalculatorSourceBookParams;
         const finalRate = moneyValue <= sumBorder ? rateBottomRange : rateTopRange;
         const monthlyPayment = getMonthlyPayment(finalRate, userInputParams);
-        const extendedCalculatorParams = {
+        return {
             ...creditCalculatorSourceBookParams,
             ...userInputParams,
             finalRate,
             monthlyPayment,
         };
-        return extendedCalculatorParams;
     };
 
     const ANNUITY = 'annuity';
@@ -1621,7 +1657,7 @@
       ${btnClassName}`, children: [jsx(Img, { className: `h-[24px] w-[24px] min-w-[24px] min-h-[24px] mr-4 ${iconClassName}`, image: { ...tab?.icon, iconVersion: isActiveBtn ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "border-0", children: [jsx("div", { className: `${btnTitleClassName}`, children: tab?.title }), jsx("div", { className: `text-secondary-text ${btnDescClassName}`, children: tab.description })] })] }, String(i)));
     }
     function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex }) {
-        return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${tabsShift * 388}px)` }, className: "flex flex-col justify-end items-center h-[126px] pt-[38px] box-border duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap items-end gap-2", children: tabsNav.map((tab, i) => renderNavButton$2({
+        return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${tabsShift * 388}px)` }, className: "flex flex-col justify-end items-center h-[126px] pt-9 box-border duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap items-end gap-2", children: tabsNav.map((tab, i) => renderNavButton$2({
                             tab,
                             i,
                             activeSlideIndex,
@@ -1629,6 +1665,11 @@
                         })) }) }), jsx("div", { className: "w-full h-2 bg-primary-main" })] }));
     }
 
+    const iconVersionMap = {
+        default: 'normal',
+        primary: 'white',
+        secondary: 'black',
+    };
     const cardStyleMap = {
         black: 'bg-black',
         white: 'bg-white',
@@ -1638,16 +1679,17 @@
     });
     const renderColorOption = (color, i) => (jsx("span", { className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
     const renderButton = (button) => {
-        const { icon, iconRight, text } = button;
-        if (!text) {
+        const { icon, iconRight, ...other } = button;
+        if (!button?.text) {
             return null;
         }
-        const leftIcon = renderButtonIcon(icon);
-        const rightIcon = renderButtonIcon(iconRight);
-        return (jsx(Button, { className: "mt-5 w-full", appendLeft: leftIcon, appendRight: rightIcon, ...button }));
+        const iconVersion = iconVersionMap[button?.version || 'default'];
+        const leftIcon = renderButtonIcon({ ...icon, iconVersion });
+        const rightIcon = renderButtonIcon({ ...iconRight, iconVersion });
+        return (jsx(Button, { className: "mt-5 w-full", appendLeft: leftIcon, appendRight: rightIcon, ...other }));
     };
     const renderButtonIcon = (buttonIcon) => {
-        if (!buttonIcon || !buttonIcon.icon) {
+        if (!buttonIcon || (!buttonIcon?.icon && !buttonIcon?.src)) {
             return null;
         }
         const iconWidth = buttonIcon?.size?.width ? `${buttonIcon.size.width}` : '24';
@@ -1696,7 +1738,7 @@
     const DIVIDER_CLASSES$1 = 'border-main-divider border border-t-0 border-x-0';
     const FIRST_CELL_CLASSES$1 = 'w-[200px] mr-6';
     const COLS_LENGTH_FOR_SCROLL$1 = 2;
-    const COLUMN_WIDTH$1 = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px
+    const COLUMN_WIDTH$2 = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px
 
     const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES$1} ${GRADIENT}`, role: "columnheader", children: [icon && !image?.src && (jsx(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 }) }) }))] })));
 
@@ -1709,7 +1751,17 @@
     const TableRowContainer = JSX(({ children }) => (jsx("div", { className: "self-start flex flex-col", role: "row", children: jsx("div", { className: "flex", children: children }) })));
 
     const ComparisonTableColumnHeaders = JSX(({ colHeaders, activeCardIndex, router, handlerDecorator }) => {
-        return (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES$1, role: "columnheader" }), jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header, link: header.link && useLink({ router, handlerDecorator }, header.link) }, String(i)))) })] }));
+        return (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES$1, role: "columnheader" }), jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$2, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header, link: header.link && useLink({ router, handlerDecorator }, header.link) }, String(i)))) })] }));
+    });
+
+    const TableArrowScrollControl = JSX(({ isScrollAvailable, handleNextClick, handlePrevClick, showNextButton, showPrevButton }) => {
+        return isScrollAvailable ? (jsx("div", { children: renderArrows({
+                handler: [handlePrevClick, handleNextClick],
+                isShown: [showPrevButton, showNextButton],
+                btnClass: ['top-[108px]', 'top-11'],
+                className: 'right-7',
+                isDisabled: true,
+            }) })) : null;
     });
 
     const TableCell = JSX(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
@@ -1722,17 +1774,7 @@
     const renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label ? jsx("h4", { className: labelStyle(isFillGradient), children: label }) : null, description ? jsx("div", { className: descriptionStyle(isFillGradient), children: description }) : null] }, String(i)));
 
     const titleStyle = (isLastRow = false) => `text-s py-7 ${DIVIDER_CLASSES$1} ${FIRST_CELL_CLASSES$1} ${isLastRow ? 'border-b-0' : 'border-solid'}`;
-    const TableRow = JSX(({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (jsxs(TableRowContainer, { children: [header?.title ? jsx("div", { className: titleStyle(isLastRow), children: header.title }) : null, data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: data.map((cell, i) => (jsx(TableCell, { cell: cell, isFirstRow: isFirstRow, isLastRow: isLastRow, isFillGradient: isColoredFirstColumn && i === 0 }, String(i)))) })) : null] })));
-
-    const TableArrowScrollControl = JSX(({ isScrollAvailable, handleNextClick, handlePrevClick, showNextButton, showPrevButton }) => {
-        return isScrollAvailable ? (jsx("div", { children: renderArrows({
-                handler: [handlePrevClick, handleNextClick],
-                isShown: [showPrevButton, showNextButton],
-                btnClass: ['top-[108px]', 'top-11'],
-                className: 'right-7',
-                isDisabled: true,
-            }) })) : null;
-    });
+    const TableRow = JSX(({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (jsxs(TableRowContainer, { children: [header?.title ? jsx("div", { className: titleStyle(isLastRow), children: header.title }) : null, data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$2, children: data.map((cell, i) => (jsx(TableCell, { cell: cell, isFirstRow: isFirstRow, isLastRow: isLastRow, isFillGradient: isColoredFirstColumn && i === 0 }, String(i)))) })) : null] })));
 
     const ComparisonTableRows = JSX(({ rowData, activeCardIndex, isColoredFirstColumn, ...tableArrowScrollProps }) => {
         return (jsxs("div", { className: "relative", children: [rowData.map((row, i, { length }) => (jsx(TableRow, { row: row, isFirstRow: i === 0, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex, isColoredFirstColumn: isColoredFirstColumn }, String(i)))), jsx(TableArrowScrollControl, { ...tableArrowScrollProps })] }));
@@ -1771,26 +1813,21 @@
         return (jsx("div", { className: "pr-[50px]", 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-main-stroke 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-[11px]", children: !isShowAllRow ? 'Показать все параметры' : 'Скрыть' }) })] }) }));
     };
 
+    const roundTo = (value, precision = 2) => {
+        const factor = 10 ** precision;
+        return Math.round(parseFloat(String(value)) * factor) / factor;
+    };
+
     function useExchangeRates() {
         const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchExchangeRates);
         const result = data?.hits?.hits?.map((_) => _._source) || [];
         return result.length ? getCurrencyListByRate(result) : result;
     }
-    async function fetchExchangeRates() {
-        try {
-            const response = await fetch(EXCHANGE_RATES_URL, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(EXCHANGE_RATES_BODY),
-            });
-            return await response.json();
-        }
-        catch (err) {
-            console.error(err);
-            return Promise.resolve();
-        }
+    function fetchExchangeRates() {
+        return fetchJSON(EXCHANGE_RATES_URL, {
+            method: 'POST',
+            body: JSON.stringify(EXCHANGE_RATES_BODY),
+        });
     }
     const EXCHANGE_RATES_URL = 'https://coins.rshb.ru/api/catalog/vue_storefront_magento_1_currency_rates_average/currency_rates_average/_search?size=10000';
     const EXCHANGE_RATES_BODY = {
@@ -1825,13 +1862,12 @@
         if (!result.some((i) => i.code === currencyCode)) {
             result.push({
                 code: currencyCode,
-                buy: roundRate(Number(_.rate_buy)),
-                sell: roundRate(Number(_.rate_sell)),
+                buy: roundTo(Number(_.rate_buy), 3),
+                sell: roundTo(Number(_.rate_sell), 3),
             });
         }
         return result;
     }, []);
-    const roundRate = (value) => Math.round(value * 1000) / 1000;
 
     var Currency;
     (function (Currency) {
@@ -1861,11 +1897,6 @@
 
     const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex ${className}`, children: [jsx(Img, { image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3", children: [address ? jsx("p", { className: "text-primary-main  m-0 mb-1 text-l", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0 text-m", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
 
-    const roundTo = (value, precision = 2) => {
-        const factor = Math.pow(10, precision);
-        return Math.round(parseFloat(String(value)) * factor) / factor;
-    };
-
     const calculateResult = (value, rate, precision) => {
         const result = Number(formatValue(value)) * Math.pow(rate, precision ? -1 : 1);
         return Number.isInteger(result) ? result : roundTo(result);
@@ -1993,6 +2024,10 @@
         return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className}`, ...rest, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap text-h4" }), 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, { ...DEFAULT_LOCATION })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", context: context, currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
     });
 
+    const ICON_VERSION_MAP = {
+        'bg-white': 'normal',
+        transparent: 'white',
+    };
     const SVG_COLOR = {
         'bg-white': 'text-primary-main',
         transparent: 'text-white',
@@ -2002,11 +2037,11 @@
         transparent: 'text-white',
     };
     const Logo = JSX(({ className = '', href, logo, children = logo?.title, targetBlank, bgColor = 'bg-white', hideTitle, }) => {
-        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [logo?.image?.src ? (jsx(Img, { image: logo.image, className: SVG_COLOR[bgColor], width: "40", height: "45", asSVG: true })) : (jsx(Img, { image: { icon: 'Logo' }, className: `${SVG_COLOR[bgColor]} w-10`, width: "40", height: "45", asSVG: true })), hideTitle ? null : renderTitle$1(children, bgColor, logo?.title)] }));
+        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [logo?.image?.src ? (jsx(Img, { image: logo.image, className: SVG_COLOR[bgColor], width: "40", height: "45", asSVG: true })) : (jsx(Img, { image: { icon: 'Logo', iconVersion: ICON_VERSION_MAP[bgColor] }, className: `${SVG_COLOR[bgColor]} w-10`, width: "40", height: "45", asSVG: true })), hideTitle ? null : renderTitle$1(children, bgColor, logo?.title)] }));
     });
     const renderTitle$1 = (children, bgColor, title) => {
         const text = children || title || 'Россельхозбанк';
-        return jsx("span", { className: `${TEXT_COLOR[bgColor]} font-medium ml-2.5`, children: text });
+        return jsx("span", { className: `${TEXT_COLOR[bgColor]} font-light ml-2.5`, children: text });
     };
 
     const useSearch = () => {
@@ -2076,16 +2111,9 @@
     const mergeTopItems = (left, right) => substitute(left, right).concat(subtract(right, left));
 
     function useSitemap() {
-        const { data } = useAsyncData(sitemapURL(), fetchSitemap);
+        const { data } = useAsyncData(`/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`, fetchJSONUnsafe);
         return data || {};
     }
-    async function fetchSitemap() {
-        const response = await fetch(sitemapURL());
-        return await response.json();
-    }
-    function sitemapURL() {
-        return `/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`;
-    }
 
     const Sitemap = JSX(({ className = '', items, context }) => {
         const sitemap = useSitemap();
@@ -2177,56 +2205,6 @@
     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-[1px] 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 filterBlocksByTag = (blocks, tag) => {
-        return tag ? blocks.filter((block) => block?.tags?.includes(tag)) : blocks;
-    };
-
-    const EmbeddableGroupBlocks = {
-        ProductBlock,
-        ProductTile,
-    };
-
-    const GroupBlocksItem = JSX(({ groupBlocks, context }) => {
-        return (jsx("div", { className: "grid grid-cols-12 gap-1 box-border", children: groupBlocks?.length ? groupBlocks.map(renderBlock$1(context)) : null }));
-    });
-    const renderBlock$1 = (context) => (block, i) => {
-        const type = block?.blockType;
-        if (!type || !(type in EmbeddableGroupBlocks)) {
-            return null;
-        }
-        const classNameBlock = style2className(block?.style);
-        const EmbeddedBlock = EmbeddableGroupBlocks[type];
-        return (jsx(EmbeddedBlock, { context: context, ...block, className: classNameBlock }, `block_${i}`));
-    };
-
-    const GroupBlockTabs = JSX((props) => {
-        const { className = '', tabs, currentTag, isShowCounter = false, onTabClick } = props;
-        return (jsx("div", { className: `box-border flex gap-x-1 h-14 ${className}`, role: "tablist", children: tabs?.map(renderTab$2({ currentTag, isShowCounter, onTabClick })) }));
-    });
-    const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs-light ml-2';
-    const renderTab$2 = ({ currentTag, isShowCounter, onTabClick }) => (tab, i) => {
-        const isActive = currentTag === tab.tag;
-        const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
-        const tabText = `text-m-light ${isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main'}`;
-        const counterBlockStyle = `${badgeStyle}
-      ${isActive
-        ? 'bg-white/30 text-white'
-        : 'bg-main-divider text-secondary-text group-hover:text-primary-main'}`;
-        return (jsxs("div", { className: `flex-1 flex items-center justify-center cursor-pointer m-1 ${tabBg}`, role: "tab", onClick: () => onTabClick(tab.tag), "aria-selected": isActive, children: [tab?.title ? jsx("div", { className: tabText, children: tab.title }) : null, isShowCounter ? (jsx("div", { className: `flex items-center justify-center ${counterBlockStyle}`, children: tab.count })) : null] }, String(i)));
-    };
-
-    const GroupBlock = JSX(({ className = '', tabs, context, groupBlocks = [], isShowCounter, ...rest }) => {
-        const [currentTag, setCurrentTag] = useState(tabs?.[0]?.tag);
-        const filteredBlocks = filterBlocksByTag(groupBlocks, currentTag);
-        const tabsNewMap = tabs?.map((tab) => {
-            const count = tab.tag
-                ? groupBlocks.filter((block) => block?.tags?.includes(tab.tag)).length
-                : groupBlocks.length;
-            return { ...tab, count };
-        });
-        return (jsxs(BlockWrapper, { context: context, className: `box-border ${className}`, ...rest, children: [tabsNewMap?.length ? (jsx(GroupBlockTabs, { currentTag: currentTag, onTabClick: setCurrentTag, tabs: tabsNewMap, isShowCounter: isShowCounter })) : null, groupBlocks.length ? (jsx("div", { className: "mt-1", children: jsx(GroupBlocksItem, { context: context, groupBlocks: filteredBlocks }) })) : null] }));
-    });
-
     const checkIsHrefSameOrigin = (href, router) => getOrigin(href) === getOrigin(router.href);
 
     const isHrefActive = (href, router, cmp = (targetHref, baseHref) => baseHref.startsWith(targetHref)) => {
@@ -2239,22 +2217,22 @@
         isHrefActive(topItem.href, router) ||
         checkIsHrefSameOrigin(topItem.href, router);
 
-    const TEXT_CLASSES$3 = 'font-sans text-s-light';
-    const LINK_CLASSES$2 = 'inline-block border border-solid bg-transparent text-center no-underline';
-    const TopItem = JSX(({ className = '', text, href, target, active, flat, onClick, children, ariaLabel, bgColor = 'bg-white', }) => (jsx("a", { className: `${getLinkClasses$1(bgColor, active, flat)} ${className}`, href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": ariaLabel, children: jsx("span", { className: getTextClasses$2(bgColor, active, flat), children: text || children }) })));
-    const getLinkClasses$1 = (bgColor, active = false, flat = false) => {
+    const TEXT_CLASSES$2 = 'font-sans text-s-light';
+    const LINK_CLASSES$1 = 'inline-block border border-solid bg-transparent text-center no-underline';
+    const TopItem = JSX(({ className = '', text, href, target, active, flat, onClick, children, ariaLabel, bgColor = 'bg-white', }) => (jsx("a", { className: `${getLinkClasses(bgColor, active, flat)} ${className}`, href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": ariaLabel, children: jsx("span", { className: getTextClasses$1(bgColor, active, flat), children: text || children }) })));
+    const getLinkClasses = (bgColor, active = false, flat = false) => {
         let classes = 'border-transparent';
         if (active) {
             classes = `rounded-md ${bgColor === 'bg-white' ? 'border-primary-main' : 'border-white'}`;
         }
-        return `${classes} ${LINK_CLASSES$2} ${flat ? '' : 'px-4 py-2'}`;
+        return `${classes} ${LINK_CLASSES$1} ${flat ? '' : 'px-4 py-2'}`;
     };
-    const getTextClasses$2 = (bgColor, active = false, flat = false) => {
-        if (bgColor !== 'bg-white') {
-            return `text-white ${TEXT_CLASSES$3}`;
+    const getTextClasses$1 = (bgColor, active = false, flat = false) => {
+        if (bgColor === 'transparent') {
+            return `text-white hover:text-primary-hover ${TEXT_CLASSES$2}`;
         }
         const nonActiveAtoms = `${flat ? 'text-primary-text' : 'text-secondary-text'} hover:text-primary-main`;
-        return `${active ? 'text-primary-main' : nonActiveAtoms} ${TEXT_CLASSES$3}`;
+        return `${active ? 'text-primary-main' : nonActiveAtoms} ${TEXT_CLASSES$2}`;
     };
 
     const DaData = DaDataAPI('https://10.80.4.9');
@@ -2289,7 +2267,7 @@
     };
     const HeaderSecondaryMenu = JSX(({ className, defaultLocation = '', bgColor = 'bg-white' }) => {
         const [city, getCity] = useGeolocation(defaultLocation);
-        return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: city, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: getCity, bgColor: bgColor }), jsx(TopItem, { className: "mr-7", flat: true, href: "#", text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432", bgColor: bgColor }), jsx(HeaderSecondaryMenuButton, { className: `mr-5 group ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(Img, { image: { icon: 'LoupeIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full pointer-events-none", imageClassName: "group-hover:text-primary-main pointer-events-none", asSVG: true }) }), jsx(HeaderSecondaryMenuButton, { className: `${LINKS_COLORS_MAP[bgColor]} group min-w-[32px] min-h-[32px]`, ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(Img, { image: { icon: 'GridIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full bg-main-divider rounded-full pointer-events-none", imageClassName: "group-hover:text-primary-main", asSVG: true }) })] }));
+        return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: city, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: getCity, bgColor: bgColor }), jsx(TopItem, { className: "mr-7", flat: true, href: "#", text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432", bgColor: bgColor }), jsx(HeaderSecondaryMenuButton, { className: `mr-5 group ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(Img, { image: { icon: 'LoupeIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full pointer-events-none", imageClassName: "group-hover:text-primary-hover group-hover:invert-0 pointer-events-none", asSVG: true }) }), jsx(HeaderSecondaryMenuButton, { className: `${LINKS_COLORS_MAP[bgColor]} group min-w-[32px] min-h-[32px]`, ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(Img, { image: { icon: 'GridIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full bg-main-divider/20 rounded-full pointer-events-none", imageClassName: "group-hover:text-primary-hover group-hover:invert-0", asSVG: true }) })] }));
     });
 
     const maxBy = (discriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
@@ -2301,15 +2279,15 @@
             : undefined;
     };
 
-    const TEXT_CLASSES$2 = 'font-sans text-l-light';
+    const TEXT_CLASSES$1 = 'font-sans text-l-light';
     const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
-    const HeaderItem = JSX(({ className = '', text, href, target, active, onClick, children, bgColor = 'bg-white', dataItemName, }) => (jsxs("a", { className: `relative inline-block bg-transparent text-center no-underline ${className}`, href: href, target: target, onClick: onClick, "data-item-name": dataItemName, children: [jsx("span", { className: getTextClasses$1(bgColor, active), children: text || children }), active ? jsx("div", { className: getBorderClasses(bgColor, active) }) : null] })));
-    const getTextClasses$1 = (bgColor, active = false) => {
+    const HeaderItem = JSX(({ className = '', text, href, target, active, onClick, children, bgColor = 'bg-white', dataItemName, }) => (jsxs("a", { className: `relative inline-block bg-transparent text-center no-underline ${className}`, href: href, target: target, onClick: onClick, "data-item-name": dataItemName, children: [jsx("span", { className: getTextClasses(bgColor, active), children: text || children }), active ? jsx("div", { className: getBorderClasses(bgColor, active) }) : null] })));
+    const getTextClasses = (bgColor, active = false) => {
         let classes = 'text-white';
         if (bgColor === 'bg-white') {
             classes = active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main';
         }
-        return `${classes} ${TEXT_CLASSES$2}`;
+        return `${classes} ${TEXT_CLASSES$1}`;
     };
     const getBorderClasses = (bgColor, active = false) => {
         if (!active) {
@@ -2367,8 +2345,9 @@
         const { handlerDecorator } = context;
         const mergedItems = mergeTopItems(sitemap.topItems, topItems);
         const [firstPortal] = mergedItems;
-        // Если по слагу невозможно понять к какому подпорталу этот слаг относиться, то выбираем первый подпортал.
-        const activeTopItem = mergedItems.find(isTopItemActive(router)) || firstPortal;
+        const activeTopItem = showSubMenu
+            ? mergedItems.find(isTopItemActive(router)) || firstPortal // Если по слагу невозможно понять к какому подпорталу этот слаг относиться, то выбираем первый подпортал.
+            : null;
         const topMenu = mergedItems.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ...useLink({ router, handlerDecorator }, _), "aria-label": _.text, bgColor: bgColor }, String(i))));
         return (jsx(BlockWrapper, { tag: "header", context: context, className: `pt-6 pb-5 px-20 ${bgColor} ${className}`, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { className: "ml-auto", defaultLocation: defaultLocation, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-[1px] ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { context: context, subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
     });
@@ -2384,7 +2363,7 @@
         const isLastShift = galleryLength === tabsShift + 2;
         const showPrevButton = tabsShift > 0;
         const activeHref = cards[activeSlideIndex]?.href;
-        return (jsxs("section", { role: "listitem", className: `min-w-full text-center ${className}`, children: [jsxs("div", { className: "relative mt-7 overflow-hidden", children: [galleryLength
+        return (jsxs("section", { role: "listitem", className: `min-w-full text-center ${className}`, children: [jsxs("div", { className: "relative overflow-hidden", children: [galleryLength
                             ? renderGallery({
                                 tabsShift,
                                 cards,
@@ -2401,7 +2380,8 @@
     });
     function renderGallery({ tabsShift, cards, activeSlideIndex, isLastShift, setActiveSlideIndex, }) {
         const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
-        return (jsx("div", { style: { transform: `translateX(-${tabsShiftWidth}px)` }, className: "duration-1000 px-[50px]", children: jsx("div", { className: "w-full flex flex-nowrap gap-3.5 pb-[38px]", children: cards.map((slide, i) => renderSlide({
+        const cardsAlignStyle = cards.length > 2 ? 'justify-start' : 'justify-center';
+        return (jsx("div", { style: { transform: `translateX(-${tabsShiftWidth}px)` }, className: "duration-1000 px-[50px]", children: jsx("div", { className: `w-full flex flex-nowrap gap-3.5 pb-12 ${cardsAlignStyle}`, children: cards.map((slide, i) => renderSlide({
                     slide,
                     i,
                     activeSlideIndex,
@@ -2413,7 +2393,7 @@
         const btnClassName = isActiveBtn
             ? 'shadow-dark-blue/42 border-primary-main'
             : `ease-in duration-300 border-main-stroke`;
-        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-3 rounded-full bg-secondary-light mr-[30px]", image: slide.icon, width: "70", height: "70" })) : null, jsxs("div", { className: "flex gap-3.5", children: [slide?.sum ? renderValueBlock('страховая сумма', slide.sum) : null, slide?.fee ? renderValueBlock('страховой взнос', slide.fee) : null] }), renderDoneIcon(isActiveBtn)] }, 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-6 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('страховая сумма', slide.sum) : null, slide?.fee ? renderValueBlock('страховой взнос', slide.fee) : null] }), renderDoneIcon(isActiveBtn)] }, String(i)));
     }
     function renderValueBlock(title, sum) {
         return (jsxs("div", { className: "flex flex-col text-left whitespace-pre", children: [jsxs("span", { className: "text-h6", children: [addSpacesBetweenNumbers(sum), " \u20BD"] }), jsx("span", { className: "text-secondary-text text-l mt-1", children: title })] }));
@@ -2424,7 +2404,7 @@
 
     const InsuranceAmountBlock = JSX(({ className = '', context, title, insuranceTabs = [], button, ...rest }) => {
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-        return (jsxs(BlockWrapper, { context: context, className: `box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white ${className}`, ...rest, children: [title ? jsx(Heading, { className: "text-center", title: title, headingType: "h3" }) : null, insuranceTabs?.length > 1 ? (jsx("div", { className: "p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]", children: insuranceTabs.map((item, i) => renderNavButton$1({
+        return (jsxs(BlockWrapper, { context: context, className: `box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white ${className}`, ...rest, children: [title ? jsx(Heading, { className: "text-center mb-8", title: title, headingType: "h3" }) : null, insuranceTabs?.length > 1 ? (jsx("div", { className: "p-1.5 bg-secondary-light w-fit mx-auto mb-7 rounded-md", children: insuranceTabs.map((item, i) => renderNavButton$1({
                         title: item?.title,
                         i,
                         activeSlideIndex,
@@ -2450,20 +2430,17 @@
         return (jsx("button", { type: "button", onClick: onClick, "aria-label": title, className: `box-border px-4 py-3 text-m-light ${btnClassName}`, children: title }, String(i)));
     }
 
-    const mobileAppStyleMap = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
-    };
     const MobileAppTile = JSX(({ className = '', context, title = 'Мобильное приложение', qr, buttons, version = 'primary', items, image, headingType = 'h4', ...rest }) => {
         const textColorClass = version === 'primary' ? 'text-primary-text' : '';
         const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
+        const buttonsWithClass = buttons?.map((_) => ({ ..._, className: 'min-w-[168px]' }));
         return (jsxs(BlockWrapper, { context: context, className: `flex justify-between font-sans p-9 box-border relative min-h-[320px]
         ${getTileMinHeight(className)}
-        ${mobileAppStyleMap[version]}
+        ${VersionStyleMap[version]}
         ${className}`, ...rest, children: [jsx(BaseTile, { context: context, className: "z-[1]", title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[509px] mb-6
-                  ${textColorClass}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-8 gap-4" })) : null, children: jsxs("div", { className: "flex flex-1 items-center", children: [qr?.src && (jsx("div", { className: `flex justify-center mr-5 bg-white rounded-md ${containerStyle}`, children: jsx(Img, { image: qr }) })), renderList$1(version, items)] }) }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(Img, { image: image }) })) : null] }));
+                  ${textColorClass}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttonsWithClass, className: "flex gap-4" })) : null, children: jsxs("div", { className: "flex flex-1 items-center", children: [qr?.src ? (jsx("div", { className: `flex justify-center mr-5 bg-white rounded-md ${containerStyle}`, children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList(version, items)] }) }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(Img, { image: image }) })) : null] }));
     });
-    const renderList$1 = (version, items) => {
+    const renderList = (version, items) => {
         return items?.length ? (jsx(List, { items: items, itemClassName: "text-l-light mb-2 last:mb-0", version: version === 'primary' ? 'tile' : 'tile-white' })) : (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" }));
     };
 
@@ -2478,29 +2455,6 @@
                         .map((button, i) => (jsx(NavigationItem, { className: "first:rounded-tl-md first:rounded-bl-md last:rounded-tr-md last:rounded-br-md", isActive: button === activeButton, ...useLink({ router, handlerDecorator }, button) }, String(i)))) })) : null] }));
     });
 
-    const TEXT_CLASSES$1 = 'font-sans text-m';
-    const LINK_CLASSES$1 = 'flex-1 flex items-center justify-center cursor-pointer';
-    const NavigatorTabItem = JSX(({ className = '', text, active, onClick, href, target = '_self', children }) => (jsx("a", { className: getLinkClasses(className, active), target: target, href: href, onClick: onClick, children: jsx("span", { className: getTextClasses(active), children: text || children }) })));
-    const getLinkClasses = (className, active = false) => {
-        const classes = active ? 'bg-primary-main' : 'group bg-white';
-        return `${classes} ${LINK_CLASSES$1} ${className}`;
-    };
-    const getTextClasses = (active = false) => {
-        const classes = active ? 'text-white' : 'text-secondary-text group-hover:text-primary-main ';
-        return `${classes} ${TEXT_CLASSES$1}`;
-    };
-
-    const NavigatorTabs = JSX(({ className = '', navigatorTabs, context, ...rest }) => {
-        return (jsx(BlockWrapper, { context: context, className: `sticky top-0 z-20 box-border flex gap-x-1 h-14 ${className}`, ...rest, children: navigatorTabs ? navigatorTabs.map(renderTab$1(context)) : null }));
-    });
-    const renderTab$1 = (context) => (tab, i) => {
-        const { handlerDecorator, useRouter } = context;
-        const router = useRouter();
-        const hash = getHash(router.href);
-        const active = hash ? tab.href === hash : i === 0;
-        return (jsx(NavigatorTabItem, { active: active, ...useLink({ router, handlerDecorator }, tab) }, tab.text));
-    };
-
     const foldableBlockClassNames = 'transition-all duration-300 max-h-0 overflow-hidden';
     const useActiveHandler = ({ initialState = false }) => {
         const [isActive, setIsActive] = useState(initialState);
@@ -2530,7 +2484,7 @@
         const getFoldButtonLabel = isActive ? 'Скрыть' : foldButtonLabel;
         return blocks ? (jsxs("div", { children: [renderBlocks(blocks, render, { blocksToHide, isActive, containerClasses }), hiddenBlocksNum ? (jsxs("button", { className: buttonClassName, "data-theme": foldButtonDataTheme, onClick: handleToggle, children: [jsx("span", { className: "pr-3", children: getFoldButtonLabel }), icon ? jsx(Icon, { name: icon, iconVersion: "white", width: "20", height: "20", asSVG: true }) : null] })) : null] })) : null;
     });
-    const renderBlocks = (blocks, render, { blocksToHide, isActive, containerClasses }) => {
+    const renderBlocks = (blocks, render, { blocksToHide, isActive, containerClasses = '' }) => {
         const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
         const hiddenBlocks = blocksToHide > 0 ? blocks.slice(-blocksToHide) : [];
         return render(jsxs("div", { children: [visibleBlocks, jsx("div", { className: `${foldableBlockClassNames} ${containerClasses}`, children: hiddenBlocks })] }), isActive);
@@ -2574,24 +2528,16 @@
     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 productGalleryStyleMap = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
-    };
     const productBlockStyleMap = {
         primary: { title: 'text-secondary-text', text: 'text-secondary-text' },
         secondary: { title: 'text-white', text: 'text-white/80' },
     };
-    const productSlideStyleMap = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
-    };
     const ProductGallery = JSX(({ className = '', context, slides = [], version = 'primary', ...rest }) => {
         const galleryNav = slides.map((s) => s.nav);
         const galleryBlocks = slides.map((s) => s.productBlock);
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
         return (jsxs(BlockWrapper, { context: context, className: `box-border pt-[50px] overflow-hidden relative font-sans w-100 ${className}
-        ${productGalleryStyleMap[version]}`, ...rest, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28", children: galleryNav.map((slide, i) => renderNavButton({
+        ${VersionStyleMap[version]}`, ...rest, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28", children: galleryNav.map((slide, i) => renderNavButton({
                         slide,
                         i,
                         activeSlideIndex,
@@ -2602,14 +2548,14 @@
     function renderProductBlock(block, i, context) {
         const { version } = block;
         const additionalClass = version ? productBlockStyleMap[version].title : '';
-        return (jsx("section", { className: "box-border relative flex grow-0 shrink-0 basis-full", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { className: `pl-[50px] z-[1] ${additionalClass}`, context: context, textBlockClassName: "mb-[154px]", ...block, headlineVersion: "XXL" }) }) }, String(i)));
+        return (jsx("section", { className: "box-border relative flex grow-0 shrink-0 basis-full", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { className: `pl-[50px] z-10 ${additionalClass}`, context: context, textBlockClassName: "mb-[154px]", ...block, headlineVersion: "XXL" }) }) }, String(i)));
     }
     function renderNavButton({ slide, i, activeSlideIndex, onClick, version }) {
         const isActiveBtn = i === activeSlideIndex;
         const btnClassName = isActiveBtn
             ? 'bg-white shadow-dark-blue/42 w-[354px] min-w-[354px] border-none'
             : `min-w-[277px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10
-      ${productSlideStyleMap[version]}`;
+      ${VersionStyleMap[version]}`;
         const btnTitleClassName = isActiveBtn
             ? 'text-primary-text text-h6'
             : `text-l ${productBlockStyleMap[version].title}`;
@@ -2622,12 +2568,8 @@
       `, children: jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `font-medium ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text ${btnDescClassName}`, children: slide.description })] }) }, String(i)));
     }
 
-    const promoTileStyleMap = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
-    };
     const PromoTile = JSX(({ className = '', context, title = 'Акции и спецпредложения', date, description, buttons = [], version = 'primary', ...rest }) => {
-        return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${promoTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsx(BaseTile, { context: context, title: title ? (jsx("div", { children: jsx(Headline, { context: context, title: title, className: `!p-0 max-w-[600px]`, headlineVersion: getTileHeadingType(className), bgColorHeadline: version, align: "left", as: "h2" }) })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex gap-3" })) : null, children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-s mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) }) }));
+        return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsx(BaseTile, { context: context, title: title ? (jsx(Headline, { context: context, title: title, className: `!p-0 max-w-[600px]`, headlineVersion: getTileHeadingType(className), bgColorHeadline: version, align: "left", as: "h2" })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex gap-3" })) : null, children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-s mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) }) }));
     });
     function formatDate(date) {
         const dateObj = new Date(date);
@@ -2736,7 +2678,7 @@
     };
     // TODO: В качестве компонента не годится
     const RadioButtons = JSX(() => {
-        const [selected, setSelected] = useState('option1');
+        const [selected, setSelected] = useState('option2');
         const onChange = (_) => setSelected(_.target.value);
         return (jsxs("div", { children: [jsx(Radio, { className: "mb-2", name: "contractType", text: "\u041F\u0440\u043E\u0441\u0442\u043E\u0435 \u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435", value: "option1", checked: selected === 'option1', onChange: onChange }), jsx(Radio, { name: "contractType", text: "\u0421\u0434\u0435\u043B\u043A\u0430 \u0441 \u043D\u0435\u0434\u0432\u0438\u0436\u0438\u043C\u043E\u0441\u0442\u044C\u044E", value: "option2", checked: selected === 'option2', onChange: onChange })] }));
     });
@@ -2770,6 +2712,10 @@
             {
                 city: 'Москва',
                 offices: [
+                    {
+                        office: 'выберите отделение',
+                        rate: null,
+                    },
                     {
                         office: 'МоскваОфис1',
                         rate: 1,
@@ -2885,6 +2831,10 @@
         return (jsxs("div", { className: "flex flex-col items-center justify-between text-center relative w-[276px]\n        whitespace-pre-line overflow-hidden", children: [step?.label ? jsx("div", { className: "text-xl m-0 mt-4", children: step.label }) : null, step?.description ? (jsx("div", { className: `text-l-light ${styleMap.description} ${additionalMarginClass}`, children: step.description })) : null, step.button?.text && !isMainButton ? (jsx(Button, { className: "box-border mt-8 py-3 h-12 w-full max-w-[240px]", ...useLink({ router, handlerDecorator }, step.button), version: version, children: step.button.text })) : null] }, String(i)));
     };
 
+    function assertUnreachable(x) {
+        throw new Error(x);
+    }
+
     const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
     const ACTIVE_LINK_CLASSES = 'bg-primary-main';
     const INACTIVE_LINK_CLASSES = 'group bg-white';
@@ -2907,25 +2857,43 @@
 
     const renderLinkTab = ({ text, onClick, href, target = '_self', i }) => (jsx("a", { className: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`, target: target, href: href, onClick: onClick, children: jsx("span", { className: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`, children: text }) }, String(i)));
 
-    const renderTab = ({ onClick, currentTab, showCounter, page, context }) => (tab, i) => {
+    const renderTab = ({ onClick, currentTab, showCounter, page, context }) => 
+    // Linter doesn't understand that switch processes all cases
+    // eslint-disable-next-line consistent-return
+    (tab, i) => {
         const { useRouter, handlerDecorator } = context;
         const router = useRouter();
-        if (isURL(tab?.ref)) {
-            return renderLinkTab({
-                ...useLink({ router, handlerDecorator }, { href: tab.ref, text: tab.title }),
-                i,
-            });
+        const type = tab.type;
+        if (!(type === 'group' || type === 'link')) {
+            return null;
+        }
+        switch (type) {
+            case 'group':
+                return renderGroupTab({ onClick, currentTab, showCounter, page, context })(tab, i);
+            case 'link':
+                return renderLinkTab({
+                    ...useLink({ router, handlerDecorator }, tab),
+                    i,
+                });
+            default:
+                assertUnreachable(type);
         }
-        return renderGroupTab({ onClick, currentTab, showCounter, page, context })(tab, i);
     };
 
     const Tabs = JSX((props) => {
         const { context, className, tabs, page, showCounter } = props;
         const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
-        useEffect(() => EventBus.inst.subject('tab', { label: currentTab?.ref }), [currentTab]);
+        useEffect(() => {
+            if (currentTab?.type === 'group') {
+                return EventBus.inst.subject('tab', { label: currentTab.ref });
+            }
+            return undefined;
+        }, [currentTab]);
         const handleClick = (selectedTab) => {
-            EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
-            setCurrentTab(selectedTab);
+            if (selectedTab?.type === 'group') {
+                EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
+                setCurrentTab(selectedTab);
+            }
         };
         return (jsx(BlockWrapper, { context: context, className: `mb-2 box-border flex gap-x-1 ${className}`, role: "tablist", children: tabs?.map(renderTab({ onClick: handleClick, currentTab, page, showCounter, context })) }));
     });
@@ -2933,40 +2901,149 @@
     const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
     const FIRST_CELL_CLASSES = 'w-[354px] flex-shrink-0';
     const COLS_LENGTH_FOR_SCROLL = 2;
-    const COLUMN_WIDTH = 4 * 80 + 40; // w-80 + pl-10 = 360px
+    const COLUMN_WIDTH$1 = 4 * 80 + 40; // w-80 + pl-10 = 360px
+
+    const TableInnerButton = JSX(({ isOpen, dataUrl, rowIdx, cellIdx, fieldIdx }) => {
+        const handleClick = () => {
+            EventBus.inst.fire('tariffInnerTable', { dataUrl, rowIdx, cellIdx, fieldIdx });
+        };
+        return (jsxs(Button, { version: "primary", onClick: handleClick, className: "w-full flex items-center justify-center rounded-none py-5 ", children: [jsx("div", { className: "text-h4", children: isOpen ? 'Скрыть' : 'Показать ставки по вкладу' }), jsx(Icon, { name: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon', className: "ml-3", iconVersion: "white", width: "20", height: "20", asSVG: true })] }));
+    });
 
     const getButtonAriaLabel = (icon) => icon?.alt || icon?.title || IconTitleMap[icon?.icon ? icon.icon : ''];
 
-    const TariffsTableCell = JSX(({ cell, isLastRow }) => {
-        const cellWrapperClasses = `first:pl-0 pl-10 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0 ${isLastRow ? 'border-t-0 rounded-b-md' : ''}`;
-        return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { children: cell.map(renderCellInner) }) }));
+    const renderButtonsCellData = ({ buttons }) => buttons && buttons?.length ? (jsx("div", { children: buttons.map(({ icon, rounded, ...buttonProps }, idx) => (jsx(Button, { className: `${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`, ariaLabel: getButtonAriaLabel(icon), rounded: rounded, appendLeft: icon?.src || icon?.icon ? jsx(Img, { image: icon, width: "24px", height: "24px", asSVG: true }) : null, ...buttonProps }, String(idx)))) })) : null;
+    const renderLabelDescriptionCellData = ({ label, description }) => {
+        const labelClassName = `text-h6 font-medium m-0 ${description ? 'mb-1' : ''}`;
+        return (jsxs("div", { children: [label ? jsx("div", { className: labelClassName, children: label }) : null, description ? jsx("div", { className: "text-s text-secondary-text", children: description }) : 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-sm", version: "gray", isDotted: isDotted ?? true, ...rest }));
+    const renderTableCellData = JSX((props) => {
+        const [showBtn, setShowBtn] = useState(true);
+        const tariffInnerTableSubscriber = (event) => {
+            const _showBtn = ['rowIdx', 'cellIdx', 'fieldIdx'].every((key) => props[key] === event[key]);
+            setShowBtn(!_showBtn);
+        };
+        useEffect(() => EventBus.inst.subscribe('tariffInnerTable', tariffInnerTableSubscriber), []);
+        return showBtn ? jsx(TableInnerButton, { ...props }) : null;
+    });
+    const EmbeddableCellData = {
+        Buttons: renderButtonsCellData,
+        Img: renderImgCellData,
+        List: renderListCellData,
+        LabelDescription: renderLabelDescriptionCellData,
+        Table: renderTableCellData,
+    };
+
+    const TariffsTableCell = JSX(({ context, cells, isLastRow, rowIdx, cellIdx }) => {
+        const cellWrapperClasses = `first:pl-0 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0 ${isLastRow ? 'border-t-0 rounded-b-md' : ''}`;
+        return (jsx("div", { className: cellWrapperClasses, role: "cell", children: cells.map(renderCellInner(rowIdx, context, cellIdx)) }));
+    });
+    const renderCellInner = (rowIdx, context, cellIdx) => (cell, i) => {
+        return (jsxs("div", { className: cell?.tableCellType === 'Table' ? 'mx-0.5' : `first:pt-5 last:pb-5 pl-10`, children: [i > 0 ? jsx("div", { className: "h-5" }) : null, renderCell(cell, context, { rowIdx, cellIdx, fieldIdx: i })] }, String(i)));
+    };
+    const renderCell = (cell, context, indexes) => {
+        if (!cell) {
+            return null;
+        }
+        const { tableCellType: type, ...rest } = cell;
+        if (!type || !(type in EmbeddableCellData)) {
+            return null;
+        }
+        const EmbeddableCellInner = EmbeddableCellData[type];
+        return jsx(EmbeddableCellInner, { context: context, ...rest, ...indexes });
+    };
+
+    function useTariffsInnerTableData(directoryName) {
+        const { data } = useAsyncData(tariffsInnerTableDataUrl(directoryName), fetchTariffsInnerTableData);
+        return data || {};
+    }
+    async function fetchTariffsInnerTableData(url) {
+        const response = await fetch(url);
+        return await response.json();
+    }
+    function tariffsInnerTableDataUrl(directoryName) {
+        return `/wcms-resources/${directoryName || 'tariffs-inner-table-data'}.json`;
+    }
+
+    const COLUMN_WIDTH = 140;
+    const InnerTableBodyItem = JSX(({ rows }) => {
+        const [activeColumnIndex, setActiveColumnIndex] = useState(0);
+        const handleNextClick = () => setActiveColumnIndex(activeColumnIndex + 1);
+        const handlePrevClick = () => setActiveColumnIndex(activeColumnIndex - 1);
+        const rowsLength = rows?.[0]?.length ?? 0;
+        const showNextButton = rowsLength > 3 && rowsLength > activeColumnIndex + 4;
+        const showPrevButton = activeColumnIndex > 0;
+        return (jsxs("div", { children: [rows?.map(renderRow(activeColumnIndex)), renderArrows({
+                    handler: [handlePrevClick, handleNextClick],
+                    isShown: [showPrevButton, showNextButton],
+                    btnClass: ['right-3 top-24', 'right-3 top-2'],
+                    className: '',
+                })] }));
     });
-    const renderCellInner = ({ label, description, list, image, buttons }, i) => (jsxs("div", { className: "first:pt-5 last:pb-5", children: [i > 0 && (jsx("div", { className: "border-main-divider border border-solid border-t-0 border-x-0 my-4" })), label ? jsx("div", { className: "text-xl m-0", children: label }) : null, description ? jsx("div", { className: "text-s text-secondary-text", children: description }) : null, list?.items?.length ? renderList(list) : null, image ? jsx(Img, { image: image }) : null, buttons?.length ? renderButtons(buttons) : null] }, String(i)));
-    const renderList = (list) => (jsx(List, { className: "flex flex-col justify-between items-start text-s", version: "gray", items: list.items, isDotted: list.isDotted ?? true }));
-    const renderButtons = (buttons) => (jsx("div", { children: buttons.map(({ icon, rounded, ...buttonProps }, idx) => (jsx(Button, { className: `${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`, ariaLabel: getButtonAriaLabel(icon), rounded: rounded, appendLeft: icon ? jsx(Img, { image: icon, width: "24px", height: "24px", asSVG: true }) : null, ...buttonProps }, String(idx)))) }));
+    const renderRow = (activeColumnIndex) => (rowData, rowIdx) => {
+        if (!rowData?.length) {
+            return null;
+        }
+        const [headerColumn, ...columns] = rowData;
+        const transform = [...Array(activeColumnIndex).keys()].reduce((res, i) => (columns?.[i]?.cols?.length ?? 1) * COLUMN_WIDTH + res, 0);
+        return (jsxs("div", { className: "flex border-main-divider border border-t-0 border-x-0 border-solid", children: [jsx("div", { className: "text-xl-light min-w-[214px] w-[214px] pt-6 pb-5", children: headerColumn.data }), jsx("div", { className: "flex flex-grow overflow-hidden", children: jsx("div", { className: "flex duration-1000 text-center", style: {
+                            transform: `translateX(-${transform}px)`,
+                        }, children: columns?.map((_, i) => (jsxs("div", { className: "flex flex-col flex-grow justify-center pt-6 pb-5 odd:bg-main-divider", children: [_?.data ? jsx("div", { className: "text-xl-light mb-3", children: _.data }) : null, _?.cols ? renderCols(_.cols, activeColumnIndex) : null] }, `row${i}`))) }) })] }, String(rowIdx)));
+    };
+    const renderCols = (cols, rowIndex) => cols ? (jsx("div", { className: `flex text-xl-light ${rowIndex === 0 ? 'text-secondary-text' : ''}`, children: cols.map((data, i) => (jsx("div", { className: "w-[76px] mx-8", children: data }, String(i)))) })) : null;
 
-    const TariffsTableRow = JSX(({ row: { header, data }, activeCardIndex, isLastRow }) => {
-        return (jsxs(TableRowContainer, { children: [jsx("div", { className: `text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${!isLastRow ? 'border-solid' : ''}`, children: jsxs("div", { className: "flex items-center text-primary-text", children: [header?.icon ? (jsx(Img, { className: "mr-[14px] max-w-6 max-h-6", image: header.icon, width: "24px", height: "24px", asSVG: true })) : null, header?.title] }) }), data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH, version: "tariff", children: data.map((cell, i) => (jsx(TariffsTableCell, { cell: cell, isLastRow: isLastRow }, String(i)))) })) : null] }));
+    const InnerTableBody = JSX(({ context, activeTabIndex, items }) => {
+        const [hiddenTables, setHiddenTables] = useState({});
+        const toggleTable = (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-main-stroke text-xl-light text-center justify-center cursor-pointer relative", onClick: () => toggleTable(key), children: [_.title, jsx(Img, { image: 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' : 'h-[243px]'}`, children: jsx("div", { className: "relative", children: jsx(InnerTableBodyItem, { context: context, rows: _.rowsData }) }) })] }, key));
+            }) }));
     });
 
-    const TariffsTable = JSX(({ className, context, title, description, rowHeaders, columns, hiddenRowsNum = 0, ...rest }) => {
+    const InnerTableHeader = JSX(({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (jsxs("div", { className: "flex justify-between w-full pt-2.5 pb-3", children: [currencies && currencies.length > 1 ? (jsx("div", { className: "flex bg-secondary-light p-1 rounded-md", children: currencies.map((currency, idx) => (jsx("div", { className: `rounded-md text-xl-light px-4 py-3 cursor-pointer ${idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'}`, onClick: () => setActiveTabIndex(idx), children: currency || idx + 1 }, currency))) })) : null, linkToPDF ? (jsxs(Button, { href: linkToPDF, version: "secondary", className: "flex justify-center items-center text-l-light text-primary-main px-8", children: [jsx(Img, { image: "DocDownload", className: "mr-[10px]", width: "24", height: "24", asSVG: true }), jsx("span", { children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })] })) : null] })));
+
+    const InnerTable = JSX(({ context, dataUrl, pdfUrl }) => {
+        const { tableData } = useTariffsInnerTableData(dataUrl);
+        const [activeTabIndex, setActiveTabIndex] = useState(0);
+        const items = tableData?.[activeTabIndex]?.items ?? [];
+        const currencies = tableData?.map((item) => item.currency ?? '');
+        return tableData ? (jsxs("div", { className: "bg-white z-10 pr-[50px]", children: [jsx(InnerTableHeader, { currencies: currencies, activeTabIndex: activeTabIndex, setActiveTabIndex: setActiveTabIndex, linkToPDF: pdfUrl }), jsx(InnerTableBody, { context: context, activeTabIndex: activeTabIndex, items: items }), jsx(TableInnerButton, { context: context, isOpen: true })] })) : null;
+    });
+
+    const TariffsTableRowContainer = JSX(({ context, children, rowIdx }) => {
+        const [dataUrl, setDataUrl] = useState(undefined);
+        useEffect(() => EventBus.inst.subscribe('tariffInnerTable', (event) => {
+            setDataUrl(rowIdx === event.rowIdx ? event.dataUrl : undefined);
+        }), [rowIdx]);
+        return (jsxs("div", { className: "self-start flex flex-col", role: "row", children: [jsx("div", { className: "flex", children: children }), dataUrl ? (jsx("div", { className: "origin-top animate-expansion", children: jsx(InnerTable, { context: context, dataUrl: dataUrl }) })) : null] }));
+    });
+
+    const TariffsTableRow = JSX(({ row: { header, data }, activeCardIndex, isLastRow, context, rowIdx }) => {
+        return (jsxs(TariffsTableRowContainer, { context: context, rowIdx: rowIdx, children: [jsx("div", { className: `text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${!isLastRow ? 'border-solid' : ''}`, children: jsxs("div", { className: "flex items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(Img, { className: "mr-[14px] max-w-6 max-h-6", image: header.icon, width: "24px", height: "24px", asSVG: true })) : null, header?.title] }) }), data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, isLastRow: isLastRow, rowIdx: rowIdx, cellIdx: i, context: context }, String(i)))) })) : null] }));
+    });
+
+    const TariffsTable = JSX(({ className = '', context, title, description, rowHeaders, tariffsColumns: columns, hiddenRowsNum = 0, ...rest }) => {
         const [activeCardIndex, setActiveCardIndex] = useState(0);
-        const colData = getColData(columns);
-        const rowData = getRowData(rowHeaders, colData);
+        const colData = columns?.map(({ data }) => data) || [];
+        const rowData = rowHeaders?.map((header, i) => ({
+            header,
+            data: colData.map((col) => col?.[i] || []),
+        }));
+        const columnsLength = colData.length;
         const tableArrowScrollControlProps = useTableArrowScrollControl({
-            columnsLength: colData.length,
+            columnsLength,
             colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
             activeCardIndex,
             setActiveCardIndex,
         });
-        const foldableBlocks = rowData?.map((row, i, { length }) => (jsx(TariffsTableRow, { row: row, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex }, String(i))));
-        return (jsxs(BlockWrapper, { context: context, className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${description ? 'mb-2.5' : 'mb-9'}`, title: title })) : null, description ? jsx("div", { className: "mb-9 text-center text-l", children: description }) : null, rowData?.length ? (jsx(Foldable, { blocks: foldableBlocks, hiddenBlocksNum: hiddenRowsNum, context: context, render: (children) => (jsx(Wrapper, { tableArrowScrollControlProps: tableArrowScrollControlProps, children: children })), foldButtonLabel: "\u0420\u0430\u0437\u0432\u0435\u0440\u043D\u0443\u0442\u044C" })) : null] }));
-    });
-    const getColData = (columns) => columns?.map(({ data }) => data) || [];
-    const getRowData = (rowHeaders, colData) => rowHeaders?.map((header, i) => ({
-        header,
-        data: colData.map((col) => col?.[i] || [{}]),
-    }));
+        const foldableBlocks = rowData?.map((row, i, { length }) => (jsx(TariffsTableRow, { context: context, row: row, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex, rowIdx: i }, String(i))));
+        return (jsxs(BlockWrapper, { className: `bg-white font-sans p-[50px] overflow-hidden text-primary-text relative ${columnsLength > 1 ? 'pr-0' : ''} ${className}`, context: context, ...rest, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${description ? 'mb-2.5' : 'mb-9'}`, title: title })) : null, description ? jsx("div", { className: "mb-9 text-center text-l", children: description }) : null, rowData?.length ? (jsx(Foldable, { blocks: foldableBlocks, hiddenBlocksNum: hiddenRowsNum, context: context, render: (children) => (jsx(Wrapper, { tableArrowScrollControlProps: tableArrowScrollControlProps, children: children })), foldButtonLabel: "\u0420\u0430\u0437\u0432\u0435\u0440\u043D\u0443\u0442\u044C" })) : null] }));
+    });
     const Wrapper = JSX(({ children, tableArrowScrollControlProps }) => {
         const { isScrollAvailable } = tableArrowScrollControlProps;
         return (jsxs("div", { role: "table", children: [jsxs("div", { className: "relative", children: [children, jsx(TableArrowScrollControl, { ...tableArrowScrollControlProps })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
@@ -2989,7 +3066,6 @@
         LinkDocs,
         MiniGallery,
         MobileAppTile,
-        NavigatorTabs,
         PictureText,
         ProductBlock,
         ProductGallery,
@@ -3003,7 +3079,6 @@
         Tile,
         Navigation,
         Placeholder,
-        GroupBlock,
         BonusBenefitsBlock,
         SafeDepositRental,
         Tabs,