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

package/bundle/bundle.umd.js

@@ -261,13 +261,22 @@
         const { IntersectionObserverTag } = context;
         const [shouldRenderBlock, setShouldRenderBlock] = useState(true);
         useEffect(() => EventBus.inst.subscribe('tab', (event) => {
-            setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
+            if (event.type === 'group') {
+                setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
+            }
+            else {
+                setShouldRenderBlock(true);
+                scrollToBlock(event.label);
+            }
         }), [labels]);
         if (!shouldRenderBlock) {
             return null;
         }
         return anchor ? (jsx(IntersectionObserverTag, { tag: tag, className: className, observerCallback: changeHashOnObserve, observerOptions: { threshold: 1 }, anchor: anchor, children: children })) : (jsx(Tag, { className: className, children: children }));
     });
+    function scrollToBlock(label) {
+        setTimeout(() => globalThis.document.getElementById(`#${label}`)?.scrollIntoView({ behavior: 'smooth' }));
+    }
 
     const HEADING_STYLE_MAP = {
         h0: 'text-h0',
@@ -618,15 +627,48 @@
         return (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-[50px] bg-white ${className}`, context: context, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, context: context, align: align, headlineVersion: "M", as: "h2" }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] }));
     });
 
+    const titleStyleMap = {
+        primary: 'text-primary-text',
+        secondary: 'text-white',
+    };
+    const descStyleMap = {
+        primary: 'text-secondary-text',
+        secondary: 'text-white',
+    };
+    const BenefitItem = JSX((props) => {
+        const { className = '', icon, label, description, version = 'primary', benefitsVersion = 'normal', } = props;
+        const 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] })] }));
+    });
+    function renderBenefitIconBgStyle(version, benefitsVersion) {
+        let bgColorStyle = 'bg-primary-main text-black';
+        if (version === 'secondary') {
+            bgColorStyle = 'bg-white/30 text-black';
+        }
+        else if (benefitsVersion === 'normal') {
+            bgColorStyle = 'bg-secondary-light text-primary-main';
+        }
+        return `w-[50px] h-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
+    }
+
+    const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
+
     const pictureTextStyleMap = {
         primary: 'bg-white text-primary-text',
         secondary: 'bg-primary-main text-white',
     };
-    const PictureText = JSX(({ className = '', title, image, benefits, version = 'primary', directionRight = false, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`, ...rest, children: [jsx(Heading, { headingType: "h2", className: "text-center", title: title }), jsxs("div", { className: 'flex justify-center mt-9', children: [image?.src && jsx(Img, { className: directionRight ? 'order-2 ml-6' : 'mr-6', image: image }), benefits?.length ? (jsx("div", { className: "flex flex-col", children: benefits.map((_, i) => renderBenefit$2(_, i, version)) })) : null] })] }));
+    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)] })] })] }));
     });
-    function renderBenefit$2(benefit, i, version) {
-        return (jsxs("div", { className: "flex flex-row mb-8", children: [benefit.icon ? (jsx(Img, { className: "w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]", image: benefit.icon, width: "48", height: "48", asSVG: true })) : null, jsxs("div", { className: "flex gap-1 flex-col h-full ml-5 max-w-[490px]", children: [benefit?.label ? (jsx("div", { className: `text-xl m-0 ${version === 'primary' ? 'text-primary-text' : ''}`, children: benefit.label })) : null, benefit?.description ? (jsx("div", { className: `text-s ${version === 'primary' ? 'text-secondary-text' : ''}`, children: benefit.description })) : null] })] }, String(i)));
+    const renderBenefit$1 = (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))
+                    : null] })) : null;
+    }
+    function renderValueBlock$1(title, sum = 0, isAnotherBlock = false) {
+        const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
+        return (jsxs("div", { className: `flex justify-between items-center gap-2 w-full ${widthStyle}`, children: [jsx("span", { className: "text-secondary-text text-l-light", children: title }), jsxs("span", { className: "text-primary-main text-h6", children: [addSpacesBetweenNumbers(sum), " \u20BD"] })] }));
     }
 
     const isURL = (href) => href?.includes('//');
@@ -805,34 +847,15 @@
     });
 
     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 justify-between w-full", children: [jsx("div", { children: children }), buttons ? jsx("div", { 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 w-full", children: [jsx("div", { children: children }), buttons ? jsx("div", { className: "mt-9", children: buttons }) : null] }), image] })] }));
     });
 
-    const benefitTitleStyleMap = {
-        primary: 'text-primary-text',
-        secondary: 'text-white',
-    };
-    const benefitDescStyleMap = {
-        primary: 'text-secondary-text',
-        secondary: 'text-white',
+    const renderBenefit = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => {
+        return (jsx(BenefitItem, { icon: icon, label: label, description: description, version: version, benefitsVersion: benefitsVersion }, String(i)));
     };
-    function renderBenefit$1({ benefit, version = 'primary', benefitsVersion = 'normal' }, i) {
-        const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
-        return (jsxs("div", { className: "flex gap-4 items-center", children: [benefit.icon ? (jsx(Img, { className: renderBenefitIconBgStyle(version, benefitsVersion), image: { ...benefit?.icon, iconVersion: isIconWhite ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true })) : null, jsxs("div", { className: "flex gap-0.5 flex-col h-full max-w-[149px] min-w-[149px]", children: [jsx("div", { className: `text-h6 m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description ? (jsx("div", { className: `text-m-light ${benefitDescStyleMap[version]}`, children: benefit.description })) : null] })] }, String(i)));
-    }
-    function renderBenefitIconBgStyle(version, benefitsVersion) {
-        let bgColorStyle = 'bg-primary-main text-black';
-        if (version === 'secondary') {
-            bgColorStyle = 'bg-white/30 text-black';
-        }
-        else if (benefitsVersion === 'normal') {
-            bgColorStyle = 'bg-secondary-light text-primary-main';
-        }
-        return `w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
-    }
 
     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((benefit, i) => renderBenefit$1({ benefit, version, benefitsVersion }, i)) })) : 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(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;
@@ -949,7 +972,7 @@
                             : 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] }));
     });
     function renderBenefits$1(benefits, version) {
-        return (jsxs("div", { className: "flex mt-4", 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] }));
+        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)));
@@ -1173,8 +1196,6 @@
         return (jsxs("div", { className: "flex flex-col items-center max-w-[292px]", children: [bonusBenefit?.icon ? (jsx(Img, { className: "h-[180px] w-[160px] min-w-[160px] min-h-[160px]", image: bonusBenefit.icon, width: "160", height: "180" })) : null, jsx("div", { children: bonusBenefit?.label ? jsx("span", { className: "text-h6 m-0", children: bonusBenefit.label }) : null })] }, String(i)));
     };
 
-    const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
-
     const CalculatorValueBlock = JSX(({ title, value, postfix = '', prefix, className = '' }) => {
         return (jsxs("div", { className: `mb-5 ${className}`, children: [title ? jsx("div", { className: "text-l-light", children: title }) : null, value ? (jsxs("div", { className: "text-h3", children: [prefix, " ", addSpacesBetweenNumbers(Math.round(value)), " ", postfix] })) : null] }));
     });
@@ -1981,9 +2002,9 @@
         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(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' }, className: `${SVG_COLOR[bgColor]} w-10`, width: "40", height: "45", asSVG: true })), hideTitle ? null : renderTitle$1(children, bgColor, logo?.title)] }));
     });
-    const renderTitle = (children, bgColor, 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 });
     };
@@ -2182,12 +2203,12 @@
         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$1 = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs-light ml-2';
+    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$1}
+        const counterBlockStyle = `${badgeStyle}
       ${isActive
         ? 'bg-white/30 text-white'
         : 'bg-main-divider text-secondary-text group-hover:text-primary-main'}`;
@@ -2218,22 +2239,22 @@
         isHrefActive(topItem.href, router) ||
         checkIsHrefSameOrigin(topItem.href, router);
 
-    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 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) => {
         let classes = 'border-transparent';
         if (active) {
             classes = `rounded-md ${bgColor === 'bg-white' ? 'border-primary-main' : 'border-white'}`;
         }
-        return `${classes} ${LINK_CLASSES$1} ${flat ? '' : 'px-4 py-2'}`;
+        return `${classes} ${LINK_CLASSES$2} ${flat ? '' : 'px-4 py-2'}`;
     };
     const getTextClasses$2 = (bgColor, active = false, flat = false) => {
         if (bgColor !== 'bg-white') {
-            return `text-white ${TEXT_CLASSES$2}`;
+            return `text-white ${TEXT_CLASSES$3}`;
         }
         const nonActiveAtoms = `${flat ? 'text-primary-text' : 'text-secondary-text'} hover:text-primary-main`;
-        return `${active ? 'text-primary-main' : nonActiveAtoms} ${TEXT_CLASSES$2}`;
+        return `${active ? 'text-primary-main' : nonActiveAtoms} ${TEXT_CLASSES$3}`;
     };
 
     const DaData = DaDataAPI('https://10.80.4.9');
@@ -2280,7 +2301,7 @@
             : undefined;
     };
 
-    const TEXT_CLASSES$1 = 'font-sans text-l-light';
+    const TEXT_CLASSES$2 = '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) => {
@@ -2288,7 +2309,7 @@
         if (bgColor === 'bg-white') {
             classes = active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main';
         }
-        return `${classes} ${TEXT_CLASSES$1}`;
+        return `${classes} ${TEXT_CLASSES$2}`;
     };
     const getBorderClasses = (bgColor, active = false) => {
         if (!active) {
@@ -2352,22 +2373,6 @@
         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] }) }));
     });
 
-    const Insurance = JSX(({ context, className = '', title, description, image, benefits, sum, monthLimit, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `px-[100px] py-[50px] bg-white text-primary-text font-sans ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center" }), jsx("div", { children: jsxs("div", { className: "mx-auto flex justify-center gap-[122px] mt-[30px]", children: [image?.src ? jsx(Img, { image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] }) })] }));
-    });
-    function renderBenefit(benefit, i) {
-        return (jsxs("div", { className: "flex items-center gap-4", children: [benefit?.icon ? (jsx(Img, { className: "w-12 h-12 min-w-12 p-3 rounded-full bg-secondary-light", image: benefit.icon, asSVG: true })) : null, jsxs("div", { children: [benefit?.label ? jsx("div", { className: "text-h6", children: benefit.label }) : null, benefit?.description ? (jsx("div", { className: "mt-0.5 text-secondary-text text-m", children: benefit.description })) : null] })] }, String(i)));
-    }
-    function renderInsuranceSumMonth(sum, monthLimit) {
-        return sum || monthLimit ? (jsxs("div", { className: "bg-secondary-light h-15 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))
-                    : null] })) : null;
-    }
-    function renderValueBlock$1(title, sum = 0, isAnotherBlock = false) {
-        const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
-        return (jsxs("div", { className: `flex justify-between items-center gap-2 w-full ${widthStyle}`, children: [jsx("span", { className: "text-secondary-text text-l-light", children: title }), jsxs("span", { className: "text-primary-main text-h6", children: [addSpacesBetweenNumbers(sum), " \u20BD"] })] }));
-    }
-
     const InsuranceAmountBlockInner = JSX(({ className = '', cards = [], button }) => {
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
         const [tabsShift, setTabsShift] = useState(0);
@@ -2473,16 +2478,16 @@
                         .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 = 'font-sans text-m';
-    const LINK_CLASSES = 'flex-1 flex items-center justify-center cursor-pointer';
+    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} ${className}`;
+        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}`;
+        return `${classes} ${TEXT_CLASSES$1}`;
     };
 
     const NavigatorTabs = JSX(({ className = '', navigatorTabs, context, ...rest }) => {
@@ -2521,7 +2526,7 @@
             initialState: isUnfolded,
         });
         const buttonClassName = foldButtonClasses ||
-            'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-l flex justify-center cursor-pointer';
+            'border-none bg-primary-main hover:bg-primary-hover px-0 py-[26px] mb-[1px] w-full font-sans text-white text-h4 flex justify-center cursor-pointer';
         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;
     });
@@ -2586,7 +2591,7 @@
         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", children: galleryNav.map((slide, i) => renderNavButton({
+        ${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({
                         slide,
                         i,
                         activeSlideIndex,
@@ -2597,13 +2602,13 @@
     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 }) }) }, 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-[1] ${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 h-[102px] w-[354px] min-w-[354px] p-0 border-none'
-            : `min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10
+            ? '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]}`;
         const btnTitleClassName = isActiveBtn
             ? 'text-primary-text text-h6'
@@ -2612,7 +2617,7 @@
             ? 'text-secondary-text text-m-title-xs mt-2.5'
             : `text-m mt-1.5 ${productBlockStyleMap[version].text}`;
         const additionalBorder = version === 'secondary' ? 'border-white/50' : 'border-black/50';
-        return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `box-border font-sans relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0
+        return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `box-border font-sans relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0 pt-5 pb-[23px]
         ${btnClassName} ${additionalBorder}
       `, 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)));
     }
@@ -2622,7 +2627,7 @@
         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 mt-9 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} ${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 })] }) }) }));
     });
     function formatDate(date) {
         const dateObj = new Date(date);
@@ -2880,30 +2885,49 @@
         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)));
     };
 
-    const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs-light ml-2';
-    const renderTab = ({ onClick, currentTab, showCounter, page }) => (tab, i) => {
-        const isActive = currentTab === tab;
-        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'}`;
-        const count = tab.id
-            ? page?.blocks?.filter((block) => block?.labels?.includes(tab.id)).length
+    const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
+    const ACTIVE_LINK_CLASSES = 'bg-primary-main';
+    const INACTIVE_LINK_CLASSES = 'group bg-white';
+    const TEXT_CLASSES = 'font-sans text-m';
+    const ACTIVE_TEXT_CLASSES = 'text-white';
+    const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover:text-primary-main';
+
+    const BADGE_CLASSES = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2';
+    const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
+    const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover:text-primary-main';
+    const renderGroupTab = ({ onClick, currentTab, showCounter, page }) => (tab, i) => {
+        const active = currentTab === tab;
+        const count = tab.ref
+            ? page?.blocks?.filter((block) => block?.labels?.includes(tab.ref)).length
             : page?.blocks?.length;
-        return (jsx("div", { className: `flex h-12 w-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`, role: "tab", "aria-selected": isActive, onClick: () => onClick(tab), children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? jsx("h3", { className: tabText, children: tab?.title }) : null, showCounter ? (jsx("div", { className: `flex items-center justify-center ${counterBlockStyle}`, children: count })) : null] }) }, String(i)));
+        return (jsx("div", { className: `${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`, role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? renderTitle(tab.title, active) : null, showCounter && count ? renderCount(count, active) : null] }) }, String(i)));
+    };
+    const renderTitle = (title, active) => (jsx("h3", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: title }));
+    const renderCount = (count, active) => (jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count }));
+
+    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 { useRouter, handlerDecorator } = context;
+        const router = useRouter();
+        if (isURL(tab?.ref)) {
+            return renderLinkTab({
+                ...useLink({ router, handlerDecorator }, { href: tab.ref, text: tab.title }),
+                i,
+            });
+        }
+        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?.id }), [currentTab]);
+        useEffect(() => EventBus.inst.subject('tab', { label: currentTab?.ref }), [currentTab]);
         const handleClick = (selectedTab) => {
-            EventBus.inst.fire('tab', { label: selectedTab.id });
+            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 })) }));
+        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 })) }));
     });
 
     const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
@@ -2961,7 +2985,6 @@
         GracePeriod,
         Header,
         Headline,
-        Insurance,
         InsuranceAmountBlock,
         LinkDocs,
         MiniGallery,