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

package/bundle/bundle.umd.js

@@ -660,9 +660,9 @@
     const RegularButton = JSX(({ className = '', href, rel, target, ariaLabel, version, rounded, onClick, children }) => (jsx("a", { className: getRegularButtonClasses({ className, version, rounded }), href: href, rel: rel, target: target, "aria-label": ariaLabel, role: href ? 'link' : 'button', onClick: onClick, children: children })));
     const DisabledButton = JSX(({ className, ariaLabel, version, rounded, children }) => (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: -1, className: getDisabledButtonClasses({ className, rounded, version }), children: children })));
 
-    const Paragraph = JSX(({ children, ...style }) => (jsx("p", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
+    const Paragraph = JSX(({ children, ...styleProps }) => (jsx("p", { className: style('font-sans', Object.values(styleProps)), children: children })));
 
-    const Text = JSX(({ children, ...style }) => (jsx("span", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
+    const Text = JSX(({ children, ...styleProps }) => (jsx("span", { className: style('font-sans', Object.values(styleProps)), children: children })));
 
     const Footnote = JSX(({ link }) => (jsxs(Paragraph, { size: "text-s-light", color: "text-secondary-text", children: [jsx(Text, { children: "\u041D\u0430\u0436\u0438\u043C\u0430\u044F \u043A\u043D\u043E\u043F\u043A\u0443, \u0432\u044B \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0435\u0442\u0435 \u0441\u043E\u0433\u043B\u0430\u0441\u0438\u0435 \u0441 " }), link ? (jsx(Button, { href: link.href, ariaLabel: "\u0443\u0441\u043B\u043E\u0432\u0438\u044F \u043F\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043D\u043D\u044B\u0445", target: link.target, className: "text-primary-main", children: jsx(Text, { children: link.text }) })) : null] })));
 
@@ -705,7 +705,7 @@
 
     const PhoneInput = JSX(({ children, onChange, ...inputProps }) => {
         const handleChange = useCallback((value) => onChange && onChange(normalizePhone(value)), [onChange]);
-        return (jsx(Input, { onChange: handleChange, onFocus: handleChange, ...inputProps, children: children }));
+        return (jsx(Input, { onChange: handleChange, onFocus: (event) => handleChange(event?.target?.value || ''), ...inputProps, children: children }));
     });
 
     const PhoneInputControl = JSX(({ className, label, value, error, onChange, onBlur }) => (jsxs("div", { className: className, children: [jsx(PhoneInput, { "aria-label": label, label: label, valid: Boolean(!error), value: value, onChange: onChange, onBlur: onBlur }), jsx("div", { className: "h-2", children: error ? (jsx(Text, { size: "text-xs-light", color: "text-error", children: error })) : null })] })));
@@ -1162,11 +1162,10 @@
         return (jsx(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: jsxs("div", { className: "container max-w-[978px]", children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }) : null, COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit }), responseType ? jsx(ResponseNotification, { responseType: responseType }) : null] }) }));
     });
 
-    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col items-center', className), defaultPadding: "p-default", ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep$1) })) : null] })));
-    const renderStep$1 = (benefit, i) => {
-        const description = benefit.description;
-        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(Img, { className: "w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black", image: benefit.icon })) : null, benefit?.icon?.src ? jsx(Img, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5 h-full", children: [benefit?.label ? jsx(Heading, { headingType: "h6", children: benefit.label }) : null, renderDescription$4(description)] })] }, String(i)));
-    };
+    const benefitImageStyles = 'w-12 h-12 min-w-12 rounded-full';
+
+    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: [title ? jsx(Heading, { headingType: "h3", as: "h2", className: "text-center", title: title }) : null, benefitList?.length ? (jsx("div", { className: "sm:flex sm:flex-wrap w-full sm:justify-center sm:gap-x-m gap-y-lg sm:gap-y-0 mt-8", role: "list", children: benefitList.map(renderBenefit) })) : null] })));
+    const renderBenefit = (benefit, i) => (jsxs("div", { className: "flex items-center sm:basis-1/2 sm:max-w-[400px] mb-14", role: "listitem", children: [benefit?.icon?.icon ? (jsx(Img, { className: style('p-3 mr-5 shrink-0 bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black', benefitImageStyles), image: benefit.icon })) : null, benefit?.icon?.src ? jsx(Img, { className: "mr-5 shrink-0", image: benefit.icon }) : null, benefit?.label ? (jsxs("div", { className: "sm:h-full", children: [jsx(Heading, { headingType: "h6", children: benefit.label }), renderDescription$4(benefit.description)] })) : null] }, String(i)));
     const renderDescription$4 = (description) => {
         const benefitType = description?.benefitType || null;
         return description && benefitType ? (jsx("div", { className: "mt-2 text-l-light text-secondary-text group-data-secondary:text-white/80", children: benefitType === 'list'
@@ -1262,10 +1261,13 @@
         right: 'text-right',
     };
 
-    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col text-center', className), defaultPadding: "p-default", ...rest, children: [jsx(Headline, { className: "!p-0 mb-8", title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] })));
-    const renderBonusBenefit = ({ icon, title, description }, i) => {
-        return (jsxs("div", { className: style('flex flex-col items-center text-h6', !description && !title ? 'justify-center' : ''), children: [title ? jsx("span", { children: title }) : null, icon ? jsx(Img, { image: icon, height: "180", className: "w-auto" }) : null, description ? jsx("span", { children: description }) : null] }, String(i)));
-    };
+    const bonusBenefitAlign = 'text-center';
+
+    const bonusBenefitStyles = 'items-center';
+
+    const renderBonusBenefit = ({ icon, title, description }, i) => (jsxs("div", { className: style('flex flex-col', bonusBenefitStyles, !description && !title ? 'justify-center' : ''), children: [title ? (jsx(Text, { size: "text-h6", font: "font-normal", align: bonusBenefitAlign, children: title })) : null, icon ? jsx(Img, { image: icon, height: "180", className: "w-auto" }) : null, description ? (jsx(Text, { size: "text-h6", font: "font-normal", align: bonusBenefitAlign, children: description })) : null] }, String(i)));
+
+    const renderBonusBenefits = (bonusBenefits, columnsCount, cardTextAlign) => (jsx("div", { className: `grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit) }));
     const getElementsColsValue = (colValue) => {
         switch (colValue) {
             case '3':
@@ -1279,6 +1281,10 @@
         }
     };
 
+    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: style('p-default', className), defaultPadding: "p-default", ...rest, children: [jsx(Headline, { className: "mb-4 sm:mb-8", isPadding: false, title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length
+                ? renderBonusBenefits(bonusBenefits, columnsCount, cardTextAlign)
+                : null] })));
+
     const BusinessCard = JSX((props) => {
         const { title, image, cardItems, button } = props;
         return (jsxs("div", { className: "border-gray border p-9 w-1/2", children: [image ? (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(Img, { className: "mb-5", image: image }) : null, image?.icon ? jsx(Img, { image: image }) : null] })) : null, title ? jsx(Heading, { headingType: "h4", title: title, className: "mb-6" }) : null, cardItems?.length ? jsx("ul", { children: cardItems.map((_, i) => renderItem(_, String(i))) }) : null, renderButtonsSection([button], { buttonClassName: 'mt-6' })] }));
@@ -2264,8 +2270,8 @@
         black: 'bg-black',
         white: 'bg-white',
     };
-    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: style('border box-border border-gray min-w-[392px] h-full flex flex-col justify-left', className), ...rest, children: [image?.src ? jsx(Img, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Paragraph, { size: "text-m", align: "text-left", font: "font-light", children: description }) })) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })] })));
-    const renderColorOption = (color, i) => (jsx("div", { role: "figure", className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
+    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: style('border box-border border-gray p-default sm:p-7 h-full flex flex-col justify-left', className), ...rest, children: [image?.src ? jsx(Img, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Paragraph, { size: "text-m", align: "text-left", font: "font-light", children: description }) })) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0426\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })] })));
+    const renderColorOption = (color, i) => (jsx("div", { role: "figure", className: `w-6 h-6 ml-1 sm:ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
 
     const LinkWrapper = JSX(({ className = '', href, target, isRemote = false, children }) => {
         const link = useLink({ isRemote });
@@ -2291,7 +2297,7 @@
         1: 'flex-col',
         2: 'gap-x-10 flex-wrap',
     };
-    const CarouselInvestmentCard = JSX(({ className, padding, additionalDescription, cardsList = [], columnsMode = 1, description, image, title, ...rest }) => (jsx(BlockWrapper, { className: style('box-border text-left w-[697px]', 'border border-solid border-gray group-data-secondary:border-white/50', className), defaultPadding: "p-0", ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-m", title: title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-3.5 z-10", title: title }) : null, backImage: image?.src ? jsx(Img, { image: image }) : null, children: [jsxs("div", { className: "flex justify-between mb-4", children: [description ? (jsx("div", { className: "w-1/3", children: jsx(Text, { size: "text-h6", children: description }) })) : null, additionalDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null] }), cardsList.length ? (jsx("ul", { className: style('list-none m-0 p-0 flex gap-y-2', cardColumnsModeStyleMap[columnsMode]), children: renderCardList(cardsList, columnsMode) })) : null] }) })));
+    const CarouselInvestmentCard = JSX(({ className, padding, additionalDescription, cardsList = [], columnsMode = 1, description, image, title, ...rest }) => (jsx(BlockWrapper, { className: style('box-border text-left w-[697px]', 'border border-solid border-gray group-data-secondary:border-white/50', className), padding: "p-0", ...rest, children: jsxs(BaseTile, { className: "h-full", defaultPadding: "p-m", padding: padding, title: title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-3.5 z-10", title: title }) : null, backImage: image?.src ? jsx(Img, { image: image }) : null, children: [jsxs("div", { className: "flex justify-between mb-4", children: [description ? (jsx("div", { className: "w-1/3", children: jsx(Text, { size: "text-h6", children: description }) })) : null, additionalDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null] }), cardsList.length ? (jsx("ul", { className: style('list-none m-0 p-0 flex gap-y-2', cardColumnsModeStyleMap[columnsMode]), children: renderCardList(cardsList, columnsMode) })) : null] }) })));
     const renderCardList = (cardsList, columnsMode) => {
         const CARDS_COUNT_MAP = [4, 9];
         const visibleCardsList = cardsList.slice(0, CARDS_COUNT_MAP[columnsMode - 1]);
@@ -2337,21 +2343,24 @@
     const List = JSX(({ className, hasIndent, isDotted, items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: style('flex flex-col gap-2 text-left text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text', TEXT_SIZE_MAP[listItemSize], hasIndent ? ITEM_INDENT_MAP[listItemSize] : '', className), role: "list", children: items.map((item, i) => (jsx(ListItem, { isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
 
     const CarouselProductCard = JSX(({ additionalDescription, align = 'text-center', button = {}, className = '', description, headlineSmallVersion = 'H6', href, icon, isDotted = true, isFullWidth = true, items = [], target, title, version = 'primary', ...rest }) => {
-        return (jsxs(BlockWrapper, { className: style('h-full flex flex-col justify-between min-w-[260px]', 'box-border border-solid border border-gray', align, className), defaultPadding: "p-0", version: version, ...rest, children: [jsxs(LinkWrapper, { className: "p-s", href: href, target: target, children: [renderImage$3(icon), renderCardTitle(headlineSmallVersion, title), renderDescription$3(description, title), renderItems(items, isDotted, version), renderAdditionalDescription$1(additionalDescription)] }), renderButtonsSection([button], {
+        return (jsxs(BlockWrapper, { className: style('h-full flex flex-col justify-between min-w-[260px]', 'box-border border-solid border border-gray', align, className), defaultPadding: "p-0", version: version, ...rest, children: [jsxs(LinkWrapper, { className: "p-s", href: href, target: target, children: [renderImage$2(icon), renderCardTitle(headlineSmallVersion, title), renderDescription$3(description, title), renderItems(items, isDotted, version), renderAdditionalDescription(additionalDescription)] }), renderButtonsSection([button], {
                     className: style('p-s pt-0', isFullWidth ? '' : 'self-center min-w-[158px]'),
                     isVertical: isFullWidth,
                 })] }));
     });
-    const renderImage$3 = (image) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(Img, { className: "mb-5", image: image }) : null, image?.icon ? jsx(Img, { className: `w-8 h-8 min-w-8 mb-5`, image: image }) : null] }));
+    const renderImage$2 = (image) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(Img, { className: "mb-5", image: image }) : null, image?.icon ? jsx(Img, { className: `w-8 h-8 min-w-8 mb-5`, image: image }) : null] }));
     const renderCardTitle = (headlineSmallVersion, title) => title ? (jsx("div", { children: jsx(Text, { size: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) })) : null;
     const renderDescription$3 = (description, title) => description ? (jsx("div", { className: title ? 'mt-2' : '', children: jsx(Paragraph, { size: "text-l", children: description }) })) : null;
-    const renderAdditionalDescription$1 = (additionalDescription) => additionalDescription ? (jsx("div", { className: "mt-auto", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", children: additionalDescription }) })) : null;
+    const renderAdditionalDescription = (additionalDescription) => additionalDescription ? (jsx("div", { className: "mt-auto", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", children: additionalDescription }) })) : null;
     const renderItems = (items, isDotted, version = 'primary') => items?.length ? (jsx(List, { className: style('max-w-[308px] mt-2 text-s', version === 'primary' ? '!text-secondary-text' : ''), items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted })) : null;
 
+    const cardTitleFont = 'font-normal';
+    const cardDescriptionColor = 'text-secondary-text';
+
     const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], href, target, ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('border border-gray', className), defaultPadding: "p-0", ...rest, children: jsxs(LinkWrapper, { className: "flex", href: href, target: target, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", children: [icon?.icon ? jsx(Img, { image: icon }) : null, icon?.src ? jsx(Img, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: "mb-3.5", headingType: "h5", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$2) })) : null] })] }) }));
+        return (jsx(BlockWrapper, { className: style('border border-gray', className), defaultPadding: "p-lg sm:p-0", ...rest, children: jsxs(LinkWrapper, { className: "sm:flex sm:items-center", href: href, target: target, children: [jsx("div", { className: "min-w-[200px] flex justify-center", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }), jsxs("div", { className: "sm:px-3 py-xl", children: [title ? jsx(Heading, { className: "mb-2 sm:mb-3.5", headingType: "h6", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-2 sm:gap-3", children: list?.map(renderList$2) })) : null] })] }) }));
     });
-    const renderList$2 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: "text-h6", children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
+    const renderList$2 = (_, i) => (jsxs("div", { className: "flex flex-row-reverse justify-between gap-y-1 sm:flex-col", children: [_.title ? (jsx(Text, { size: "text-l", font: cardTitleFont, children: _.title })) : null, _.description ? (jsx(Paragraph, { size: "text-l", font: "font-light", color: cardDescriptionColor, children: _.description })) : null] }, String(i)));
 
     const buttonSizeStyles = {
         default: 'w-14 h-14',
@@ -2895,7 +2904,7 @@
         'bg-white': 'text-primary-main',
         transparent: 'text-white',
     };
-    const renderImage$2 = (bgColor, image, size) => {
+    const renderImage$1 = (bgColor, image, size) => {
         return image?.src ? (jsx(Img, { image: image, className: SVG_COLOR[bgColor], width: size?.width, height: size?.height, pathPrefix: "/wcms-resources/" })) : (jsx(Img, { image: {
                 icon: image?.icon || 'LogoIcon',
                 iconVersion: ICON_VERSION_MAP[bgColor],
@@ -2906,12 +2915,12 @@
         'bg-white': 'text-primary-text',
         transparent: 'text-white',
     };
-    const renderTitle$2 = (title, bgColor, className) => {
+    const renderTitle$1 = (title, bgColor, className) => {
         return (jsx("span", { className: `${TEXT_COLOR[bgColor]} ml-2.5 font-medium ${className || ''}`, children: title || 'Россельхозбанк' }));
     };
 
     const Logo = JSX(({ className = '', href, logo, children = logo?.title, targetBlank, bgColor = 'bg-white', showTitle = true, }) => {
-        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$2(bgColor, logo?.image, { width: '40', height: '45' }), showTitle ? renderTitle$2(children || logo?.title, bgColor) : null] }));
+        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$1(bgColor, logo?.image, { width: '40', height: '45' }), showTitle ? renderTitle$1(children || logo?.title, bgColor) : null] }));
     });
 
     const CloseButton = JSX(({ className, onClick }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-1 bg-transparent border-none', className), onClick: onClick, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
@@ -3099,11 +3108,11 @@
                 globalThis.document?.removeEventListener('keydown', handleEscape);
             };
         }, [onClose]);
-        return isOpened ? (jsx("div", { className: style('fixed inset-0 bg-white text-l-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar', className), role: "dialog", children: jsxs("div", { className: "relative container pb-12 min-h-full", children: [jsxs("div", { className: "sticky bg-white pt-6 top-0", children: [jsx(CloseButton, { className: "absolute top-10 -right-12", onClick: onClose }), head] }), children] }) })) : null;
+        return isOpened ? (jsx("div", { className: style('fixed inset-0 bg-white text-l-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar', className), role: "dialog", children: jsxs("div", { className: "relative container pb-12 min-h-full", children: [jsxs("div", { className: "sticky bg-white pt-6 top-0", children: [jsx(CloseButton, { className: "absolute top-0 -right-12", onClick: onClose }), head] }), children] }) })) : null;
     });
 
-    function useDialogProps(id, initOpen = false) {
-        const [isOpened, { setTrue: open, setFalse: close }] = useBool(initOpen);
+    function useDialogProps(id, isOpenedOnInit = false) {
+        const [isOpened, { setTrue: open, setFalse: close }] = useBool(isOpenedOnInit);
         const [params, setParams] = useState({ id });
         const wasOpened = useRef(isOpened);
         wasOpened.current ||= isOpened;
@@ -3116,19 +3125,21 @@
                 close();
             }
         }, [id]);
+        const handleClose = useCallback(() => {
+            close();
+            defaultEventBus.fire('dialog', { type: 'close' });
+        }, []);
         useDialogHandlers({
             onOpen: handleOpen,
             onClose: close,
         });
-        const handleCloseAsEventSource = useCallback(() => {
-            close();
-            defaultEventBus.fire('dialog', { type: 'close' });
-        }, []);
         return {
             ...params,
             isOpened,
             wasOpened: wasOpened.current,
-            onClose: handleCloseAsEventSource,
+            open,
+            close,
+            onClose: handleClose,
         };
     }
 
@@ -3692,7 +3703,7 @@
 
     const MobileAppTile = JSX(({ className, padding, alignTitle = 'left', buttons = [], description, headingType = 'h4', image, items, qr, title = 'Мобильное приложение', version = 'primary', ...rest }) => {
         const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
-        return (jsx(BlockWrapper, { className: style('min-h-80', className), defaultPadding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-default", title: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', AlignText[alignTitle]) })) : null, backImage: image?.src ? jsx(Img, { image: image }) : null, buttons: renderButtonsSection(buttons, { isVertical: buttons.length > 3 }), children: [renderDescription$2(description), jsxs("div", { className: "flex flex-1 gap-s items-center", children: [qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList$1(items)] })] }) }));
+        return (jsx(BlockWrapper, { className: style('min-h-80', className), padding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-default", title: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', AlignText[alignTitle]) })) : null, backImage: image?.src ? jsx(Img, { image: image }) : null, buttons: renderButtonsSection(buttons, { isVertical: buttons.length > 3 }), children: [renderDescription$2(description), jsxs("div", { className: "flex flex-1 gap-s items-center", children: [qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList$1(items)] })] }) }));
     });
 
     const initialFiltrationState = {};
@@ -4065,43 +4076,46 @@
 
     const deviation = (items) => items?.length ? Math.sqrt(Math.abs(avg(items.map((_) => _ ** 2)) - avg(items) ** 2)) : 0;
 
-    const labelSize$1 = 'text-h6';
-
-    const BenefitItem = JSX(({ className, icon, label, description, benefitsVersion = 'normal' }) => (jsxs("div", { className: style('flex gap-s', description ? 'items-start' : 'items-center', className), children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(benefitsVersion), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? (jsx(Text, { color: "text-primary-text group-data-secondary:text-white", size: labelSize$1, children: label })) : null, description ? (jsx(Paragraph, { font: "font-light", size: "text-m", color: "text-secondary-text group-data-secondary:text-white", children: description })) : null] })] })));
-    function getBenefitIconBgStyle(benefitsVersion) {
-        const bgColorStyle = benefitsVersion === 'normal'
+    const renderBenefitIcon = (icon, benefitsVersion = 'normal') => icon ? (jsx("div", { className: style('w-12 h-12 min-w-12 box-border flex items-center justify-center rounded-icon', benefitsVersion === 'normal'
             ? 'bg-secondary-light text-primary-main'
-            : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black';
-        return style('w-12 h-12 min-w-12 p-2.5 box-border flex items-center justify-center rounded-icon', bgColorStyle);
-    }
+            : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black'), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null;
 
-    const renderBenefit$1 = (benefitsVersion) => ({ type, ...benefit }, i) => {
-        if (type === 'rte' && '__html' in benefit) {
-            return jsx(RichText, { __html: benefit.__html });
-        }
-        return jsx(BenefitItem, { benefitsVersion: benefitsVersion, ...benefit }, String(i));
-    };
+    const renderBenefitDescription = (description, i) => description ? (jsx(Paragraph, { font: "font-light", size: "text-m", color: "text-secondary-text group-data-secondary:text-white", children: description }, `description-${i}`)) : null;
+
+    const renderBenefitLabel = (label, i) => label ? (jsx(Text, { color: "text-primary-text group-data-secondary:text-white", size: "text-h6", children: label }, `label-${i}`)) : null;
+
+    const renderBenefitText = (_, i) => _.type === 'rte' && '__html' in _ && _.__html ? (jsx(RichText, { ..._ }, `rte-${i}`)) : ([
+        'label' in _ ? renderBenefitLabel(_.label, i) : null,
+        'description' in _ ? renderBenefitDescription(_.description, i) : null,
+    ]);
+
+    const BenefitItem = JSX(({ className, benefitsVersion, ..._ }) => (jsxs("div", { className: style('flex gap-s', 'description' in _ && _.description ? 'items-start' : 'items-center', className), children: ['icon' in _ ? renderBenefitIcon(_.icon, benefitsVersion) : null, jsx("div", { children: renderBenefitText(_) })] })));
 
     const MAX_BENEFITS_LEN_DEVIATION = 16;
     const benefitLength = (_) => _.type === 'rte'
         ? _.__html?.length || 0
         : Math.max(_.label?.length || 0, _.description?.length || 0);
     const isDistortedBenefits = (benefits) => deviation(benefits.map(benefitLength)) > MAX_BENEFITS_LEN_DEVIATION;
-    const BenefitsList = JSX(({ className, benefitsVersion = 'normal', benefits }) => benefits?.length ? (jsx("div", { className: style('flex gap-x-m gap-y-s', isDistortedBenefits(benefits) ? 'flex-col' : 'flex-wrap', className), children: benefits.map(renderBenefit$1(benefitsVersion)) })) : null);
+    const DefaultBenefitsList = JSX(({ className, benefitsVersion = 'normal', benefits }) => benefits?.length ? (jsx("div", { className: style('flex gap-x-m gap-y-s', isDistortedBenefits(benefits) ? 'flex-col' : 'flex-wrap', className), children: benefits.map((_, i) => (jsx(BenefitItem, { benefitsVersion: benefitsVersion, ..._ }, String(i)))) })) : null);
+
+    const TabularBenefitsList = JSX(({ className, benefits }) => benefits?.length ? (jsx("div", { className: style('grid grid-cols-[max-content_1fr] auto-rows-auto items-baseline gap-x-m gap-y-xs', className), children: benefits.flatMap(renderBenefitText) })) : null);
+
+    const BenefitsList = JSX(({ isTabularBenefits, ...rest }) => isTabularBenefits ? jsx(TabularBenefitsList, { ...rest }) : jsx(DefaultBenefitsList, { ...rest }));
 
     const Tags = JSX(({ className, tags }) => tags?.length ? (jsx("div", { className: style('flex flex-wrap gap-xs', className), role: "list", children: tags.map(renderTag) })) : null);
     const renderTag = (tag, key) => (jsx("div", { className: "py-2 px-2.5 border-solid border rounded-md border-gray", role: "listitem", children: jsx(Text, { size: "text-m-light", children: tag }) }, String(key)));
 
-    const BaseProductTile = JSX(({ className, title, description, headlineVersion = 'L', align = 'text-left', isInsetTitle = true, benefits, benefitsVersion, __html, items, isDotted = true, listItemSize, tags, buttons, image, imageOptions: { imageAlign, directionRight = true } = {}, children, }) => {
+    const BaseProductTile = JSX(({ className, padding, defaultPadding, title, description, headlineVersion = 'L', align = 'text-left', isInsetTitle = true, benefitsVersion, isTabularBenefits, benefits, __html, items, isDotted = true, listItemSize, tags, buttons, image, imageOptions: { imageAlign = 'end', directionRight = true, isBackground } = {}, children, }) => {
         const img = image?.src ? jsx(Img, { image: image }) : null;
         const headline = (jsx(Headline, { title: title, description: description, headlineVersion: headlineVersion, align: align, isPadding: false }));
-        return (jsx(BaseTile, { className: className, ...(isInsetTitle ? { insetTitle: headline } : { title: headline }), ...(directionRight ? { rightImage: img } : { leftImage: img }), imageAlign: imageAlign, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col gap-m", children: [jsx(BenefitsList, { benefitsVersion: benefitsVersion, benefits: benefits }), __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, tags?.length ? jsx(Tags, { tags: tags }) : null] }) }));
+        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isInsetTitle ? { insetTitle: headline } : { title: headline }), ...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight)), imageAlign: imageAlign, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col gap-m", children: [jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: benefits }), __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, tags?.length ? jsx(Tags, { tags: tags }) : null] }) }));
     });
+    const leftOrRightImage = (img, directionRight) => directionRight ? { rightImage: img } : { leftImage: img };
 
     const renderInsuranceSumMonth = (sum, monthLimit) => sum || monthLimit ? (jsxs("div", { className: "flex flex-wrap xl:flex-nowrap xl:bg-main-divider xl:rounded-md p-xs gap-m", children: [Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum) : null, Number(monthLimit) > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit) : null] })) : null;
     const renderValueBlock = (title, value = 0) => (jsxs("div", { className: "basis-full flex flex-col-reverse sm:flex-row sm:justify-between items-baseline whitespace-pre", children: [jsx(Text, { font: "font-light", size: "text-l", children: title }), jsxs(Text, { size: "text-h6", color: "text-primary-text", children: [toLocalNumberFormat(2)(value), " \u20BD"] })] }));
 
-    const PictureText = JSX(({ className, headlineVersion = 'M', align = 'text-center', sum, monthLimit, ...rest }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: jsx(BaseProductTile, { className: "h-full", headlineVersion: headlineVersion, align: align, isInsetTitle: false, ...rest, imageOptions: { directionRight: false, imageAlign: 'center', ...rest.imageOptions }, children: renderInsuranceSumMonth(Number(sum), Number(monthLimit)) }) })));
+    const PictureText = JSX(({ className, padding, headlineVersion = 'M', align = 'text-center', sum, monthLimit, imageOptions, ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-default", padding: padding, headlineVersion: headlineVersion, align: align, isInsetTitle: false, imageOptions: { directionRight: false, imageAlign: 'center', ...imageOptions }, ...rest, children: renderInsuranceSumMonth(Number(sum), Number(monthLimit)) }) })));
 
     const GOLDEN_RATIO = 1.618;
     const Placeholder = JSX(({ className, title, description = 'Блок в разработке...', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border', className), ...rest, children: [jsx(Headline, { className: "max-w-[600px]", title: title, description: description, headlineVersion: "L", align: "text-left", isPadding: false }), jsx("figure", { className: "m-0 mt-m min-w-[80%]", children: renderShimmer() })] })));
@@ -4121,13 +4135,13 @@
                         } }) }), jsx(Button, { version: "link", ...commonProps })] }));
     }
 
-    const ProductBlock = JSX(({ className, backwardButton, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden flex flex-col gap-lg box-border', className), defaultPadding: "p-default", ...rest, children: [backwardButton?.text
+    const ProductBlock = JSX(({ className, padding, backwardButton, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden flex flex-col gap-lg box-border', className), defaultPadding: "p-default", padding: padding, ...rest, children: [backwardButton?.text
                 ? renderBackwardButton(backwardButton, !rest.version || rest.version === 'primary' ? 'primary' : 'white')
                 : null, jsx(BaseProductTile, { className: "grow h-full", ...rest })] })));
 
-    const ProductGallery = JSX(({ className = '', slides = [], ...rest }) => {
+    const ProductGallery = JSX(({ className = '', padding, slides = [], ...rest }) => {
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden', className), defaultPadding: "py-default", ...rest, children: [jsx("div", { className: "flex duration-1000", style: { transform: `translateX(-${activeSlideIndex * 100}%)` }, role: "list", children: slides.map(({ productBlock }, i) => (jsx("div", { className: "box-border grow-0 shrink-0 basis-full", role: "listitem", children: jsx(BaseProductTile, { className: "pl-default h-full", headlineVersion: "XXL", ...productBlock, ...rest }) }, String(i)))) }), jsx("div", { className: "h-28 px-xs mt-m -mb-m flex gap-xs box-border", children: slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex })) })] }));
+        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden', className), defaultPadding: "py-default", padding: padding, ...rest, children: [jsx("div", { className: "flex duration-1000", style: { transform: `translateX(-${activeSlideIndex * 100}%)` }, role: "list", children: slides.map(({ productBlock }, i) => (jsx("div", { className: "box-border grow-0 shrink-0 basis-full", role: "listitem", children: jsx(BaseProductTile, { className: "pl-default h-full", headlineVersion: "XXL", ...productBlock, ...rest }) }, String(i)))) }), jsx("div", { className: "h-28 px-xs mt-m -mb-m flex gap-xs box-border", children: slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex })) })] }));
     });
     const renderNavButton = ({ activeSlideIndex, onClick }) => ({ nav }, i) => {
         const isActive = i === activeSlideIndex;
@@ -4143,55 +4157,7 @@
         return (jsxs("button", { type: "button", onClick: () => onClick(i), "aria-label": nav?.title, className: style('relative px-6 box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50', btnClassName), children: [jsx("div", { className: btnTitleClassName, children: nav?.title }), jsx("div", { className: btnDescClassName, children: nav?.description })] }, String(i)));
     };
 
-    function renderAdditionalDescription(additionalDescription, image) {
-        if (!additionalDescription) {
-            return null;
-        }
-        // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
-        const descriptionWidth = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
-        return (jsx("div", { className: `mt-2.5 z-10 ${descriptionWidth}`, children: jsx(Paragraph, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription }) }));
-    }
-
-    // TODO: Create universal function for this case
-    const renderBenefit = 
-    // Linter doesn't understand that switch processes all cases
-    // eslint-disable-next-line consistent-return
-    (benefit, i) => {
-        const { type } = benefit;
-        if (!(type === 'default' || type === 'rte')) {
-            return null;
-        }
-        switch (type) {
-            case 'default':
-                return [
-                    jsx(Text, { size: "text-h6", children: benefit.label }, `label-${i}`),
-                    jsx(Text, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: benefit.description }, `desc-${i}`),
-                ];
-            case 'rte':
-                return (jsx("div", { className: "col-span-2", children: jsx(RichText, { __html: benefit.__html }) }));
-            default:
-                assertUnreachable(benefit);
-        }
-    };
-
-    function renderImage$1(image, directionRight) {
-        if (!image?.src) {
-            return null;
-        }
-        return (jsx(Img, { className: style('absolute', directionRight ? 'right-0' : 'left-0', 'bottom-0'), image: image }));
-    }
-
-    const ProductTile = JSX(({ className = '', title, headlineVersion = 'S', description, additionalDescription, benefits = [], buttons, image, directionRight = true, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden box-border relative min-h-[364px] flex flex-col justify-between', className), ...rest, children: [jsxs("div", { className: style('flex flex-col', directionRight ? '' : 'items-end'), children: [jsx(Headline, { className: style('!p-0 !bg-transparent z-10', title || description ? 'mb-3.5' : ''), title: title, description: description, headlineVersion: headlineVersion, as: "h2", align: "text-left" }), renderBenefits(benefits, image), renderAdditionalDescription(additionalDescription, image)] }), renderButtonsSection(buttons, {
-                className: style('mt-5 text-l', directionRight ? '' : 'justify-end'),
-            }), renderImage$1(image, directionRight)] })));
-    function renderBenefits(benefits, image) {
-        if (!benefits.length) {
-            return null;
-        }
-        // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
-        const benefitsWidth = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
-        return (jsx("div", { className: style('z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline', benefitsWidth), children: benefits.length ? benefits.map(renderBenefit) : null }));
-    }
+    const ProductTile = JSX(({ className, padding, headlineVersion = 'S', isTabularBenefits = true, additionalDescription, imageOptions, ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-m", padding: padding, headlineVersion: headlineVersion, isTabularBenefits: isTabularBenefits, imageOptions: { isBackground: true, ...imageOptions }, ...rest, children: additionalDescription ? (jsx(Paragraph, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null }) })));
 
     const PromoTile = JSX(({ className, title = 'Акции и спецпредложения', description, headlineVersion = 'S', date, buttons = [], ...rest }) => (jsx(BlockWrapper, { className: style('box-border', className), ...rest, children: jsxs(BaseTile, { className: "h-full", title: title ? (jsx(Headline, { title: title, headlineVersion: headlineVersion, align: "text-left", isPadding: false })) : null, buttons: renderButtonsSection(buttons), children: [date ? jsx("div", { className: "text-s mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) })));
     function formatDate(date) {
@@ -4204,12 +4170,12 @@
         return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
     }
 
-    const RepresentativeOfficeInfo = JSX(({ address, email, telephone, button, className = '', __html, icon, title, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border text-left', className), version: version, ...rest, children: [jsxs("div", { className: "w-full flex justify-between", children: [title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-6", title: title }) : null, renderIconBlock(icon)] }), jsxs("div", { className: "w-full", children: [__html ? renderDescriptionBlock(__html) : null, renderBlock('Адрес', address, 'GeolocationIcon'), renderBlock('Телефон', telephone, 'PhoneIcon'), renderBlock('E-mail', email, 'MailIcon'), button?.text
+    const RepresentativeOfficeInfo = JSX(({ address, email, telephone, button, className = '', __html, icon, title, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border text-left', className), version: version, ...rest, children: [jsxs("div", { className: "w-full sm:flex sm:justify-between sm:flex-row-reverse", children: [renderIconBlock(icon), title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-3 sm:mb-6", title: title }) : null] }), jsxs("div", { className: "w-full", children: [__html ? renderDescriptionBlock(__html) : null, renderBlock('Адрес', address, 'GeolocationIcon'), renderBlock('Телефон', telephone, 'PhoneIcon'), renderBlock('E-mail', email, 'MailIcon'), button?.text
                         ? renderButtonsSection([button], {
                             className: 'mb-6',
                         })
                         : null] })] })));
-    const renderIconBlock = (icon) => (jsxs("div", { className: "self-end", children: [icon?.src ? jsx(Img, { image: icon }) : null, icon?.icon ? jsx(Img, { image: icon }) : null] }));
+    const renderIconBlock = (icon) => (jsxs("div", { className: 'w-10 h-7 sm:w-24 sm:h-16 mb-3 sm:mb-0 sm:mt-3', children: [icon?.src ? jsx(Img, { image: icon }) : null, icon?.icon ? jsx(Img, { image: icon }) : null] }));
     const renderDescriptionBlock = (__html) => (jsx("div", { className: "border-b border-main-divider pb-5 my-5", children: jsx(RichText, { __html: __html }) }));
     const renderBlock = (blockName, data, iconName) => (jsxs("div", { className: "flex mb-4", children: [jsx(Icon, { className: "pr-4", iconVersion: "black", name: iconName, width: "24", height: "24" }), jsxs("div", { className: "flex flex-col first:pb-1", children: [jsx(Text, { size: "text-m-light", children: blockName }), data ? (jsx(Text, { size: "text-h6", color: "text-green", children: data })) : null] })] }));
 
@@ -4460,10 +4426,9 @@
     const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
     const TEXT_CLASSES = 'font-sans text-m text-center';
     const ACTIVE_TEXT_CLASSES = 'text-white';
-    const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
-    const WHITE_ACTIVE_TEXT_CLASSES = 'text-primary-main';
-    const GROUP_TAB_CLASSES = {
-        div: {
+    const INACTIVE_TEXT_CLASSES = 'text-secondary-text sm:group-hover/btn:text-primary-main';
+    const TAB_CLASSES = {
+        block: {
             scrollable: {
                 active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
                 default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
@@ -4479,37 +4444,7 @@
         },
         text: {
             scrollable: {
-                active: `h-full border-0 border-b-2`,
-                default: ``,
-            },
-            centered: {
-                active: '',
-                default: '',
-            },
-            wideScreen: {
-                active: '',
-                default: '',
-            },
-        },
-    };
-    const LINK_TAB_CLASSES = {
-        link: {
-            scrollable: {
-                active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
-                default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-            },
-            centered: {
-                active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
-                default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
-            },
-            wideScreen: {
-                active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
-                default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-            },
-        },
-        text: {
-            scrollable: {
-                active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
+                active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2`,
                 default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
             },
             centered: {
@@ -4517,20 +4452,15 @@
                 default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
             },
             wideScreen: {
-                active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
-                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+                active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES} text-black px-2.5 bg-white sm:bg-primary-main sm:text-white`,
+                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES} px-2.5 bg-white`,
             },
         },
     };
-    const getGroupTabClassName = (type, active, tabsMode) => {
+    const getTabClassName = (type, active, tabsMode) => {
         const styleActive = active ? 'active' : 'default';
         const mode = tabsMode || 'wideScreen';
-        return GROUP_TAB_CLASSES[type][mode][styleActive];
-    };
-    const getLinkTabClassName = (type, active, tabsMode) => {
-        const styleActive = active ? 'active' : 'default';
-        const mode = tabsMode || 'wideScreen';
-        return LINK_TAB_CLASSES[type][mode][styleActive];
+        return TAB_CLASSES[type][mode][styleActive];
     };
 
     const LinkTab = JSX((props) => {
@@ -4542,28 +4472,21 @@
             adjustedProps.onClick(ev);
             onClick(tab);
         };
-        return (jsx("a", { role: "tab", className: getLinkTabClassName('link', active, tabsMode), target: tab.target, href: adjustedProps.href, onClick: handleClick, children: jsx("span", { className: getLinkTabClassName('text', active, tabsMode), children: tab.text }) }));
+        return (jsx("div", { className: getTabClassName('block', active, tabsMode), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsx("a", { role: "tab", className: style('flex flex-1 items-center justify-center h-full', getTabClassName('text', active, tabsMode)), target: tab.target, href: adjustedProps.href, onClick: handleClick, children: jsx("span", { children: tab.text }) }) }));
     });
 
-    const BADGE_CLASSES = 'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
-    const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
-    const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
+    const BADGE_CLASSES = 'bg-main-divider min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
+    const LIGHT_BADGE_CLASSES = 'bg-white/30 text-white';
+    const DARK_BADGE_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
     const renderGroupTab = ({ page, currentTab, showCounter, onClick, tabsMode }) => (tab, i) => {
         const active = currentTab === tab;
         const count = tab.ref && page?.blocks
             ? page.blocks.filter((block) => block?.labels?.includes(tab.ref)).length
             : 0;
-        return (jsx("div", { className: getGroupTabClassName('div', active, tabsMode), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: `flex flex-1 items-center justify-center ${getGroupTabClassName('text', active, tabsMode)}`, children: [renderTitle$1(tab.title, active, tabsMode), renderCount(showCounter, count, active)] }) }, `group-${String(i)}`));
+        return (jsx("div", { className: getTabClassName('block', active, tabsMode), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: style('flex flex-1 items-center justify-center h-full', getTabClassName('text', active, tabsMode)), children: [jsx("span", { children: tab.title }), showCounter && count ? renderCount(tabsMode, count, active) : null] }) }, `group-${String(i)}`));
     };
-    const renderTitle$1 = (title, active, tabsMode) => {
-        const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
-        const titleClassName = tabsMode === 'scrollable'
-            ? `${TEXT_CLASSES} ${activeClassName}`
-            : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
-        return title ? jsx("h3", { className: titleClassName, children: title }) : null;
-    };
-    const renderCount = (showCounter, count, active) => {
-        return showCounter && count ? (jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count })) : null;
+    const renderCount = (tabsMode, count, active) => {
+        return (jsx("div", { className: style(BADGE_CLASSES, active && tabsMode !== 'scrollable' ? LIGHT_BADGE_CLASSES : DARK_BADGE_CLASSES), children: count }));
     };
 
     const renderTab = ({ page, showCounter, ...rest }) => (tab, i) => {
@@ -4596,7 +4519,7 @@
     });
 
     const Tabs = JSX((props) => {
-        const { className = '', tabs, isSticky, ...rest } = props;
+        const { className = '', isSticky, tabs, ...rest } = props;
         const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
         useEffect(() => {
             if (!tabs || !tabs[0]) {
@@ -4613,7 +4536,7 @@
             fireTabEvent(selectedTab);
             setCurrentTab(selectedTab);
         }, []);
-        return (jsx(BlockWrapper, { className: `relative box-border flex gap-x-1 w-full ${isSticky ? 'sticky top-1 z-20' : ''} ${className}`, defaultPadding: "p-0", role: "tablist", ...rest, children: renderTabs({ tabs, onClick: handleClick, currentTab, ...rest }) }));
+        return (jsx(BlockWrapper, { className: style('relative box-border flex gap-x-1 w-full overflow-x-auto no-scrollbar', isSticky ? 'sticky top-1 z-20' : '', className), defaultPadding: "p-0", role: "tablist", ...rest, children: renderTabs({ tabs, onClick: handleClick, currentTab, ...rest }) }));
     });
     const renderTabs = ({ tabsMode, tabs, ...rest }) => {
         switch (tabsMode) {
@@ -4823,7 +4746,7 @@
         return (jsx("ul", { className: style('text-secondary-text group-data-secondary:text-white/80', listStyle), children: items.map((_, i) => (jsx("li", { children: jsx(Text, { size: "text-s", font: "font-light", children: _ }) }, `listItem-${i}`))) }));
     };
 
-    const Tile = JSX(({ className, headlineVersion = 'S', listItemSize = 'M', ...rest }) => (jsx(BlockWrapper, { className: className, ...rest, children: jsx(BaseProductTile, { className: "h-full", headlineVersion: headlineVersion, listItemSize: listItemSize, ...rest, imageOptions: { imageAlign: 'end', ...rest.imageOptions } }) })));
+    const Tile = JSX(({ className, padding, headlineVersion = 'S', listItemSize = 'M', ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-m", padding: padding, headlineVersion: headlineVersion, listItemSize: listItemSize, ...rest }) })));
 
     const alignStyle = {
         stretch: 'items-stretch',
@@ -4965,13 +4888,18 @@
     }
 
     const COOKIE_DIALOG_ID = 'cookie';
-    const LOCAL_STORAGE_NAME = 'cookieClose';
+    const DIALOG_INITIAL_DELAY = 3 * 1000;
     const CookiePopup = JSX(({ termLink, personalDataPolicyLink }) => {
-        const { isOpened, onClose } = useDialogProps(COOKIE_DIALOG_ID, !globalThis.localStorage?.getItem(LOCAL_STORAGE_NAME));
+        const { isOpened, open, close } = useDialogProps(COOKIE_DIALOG_ID);
+        useDebouncedEffect(() => {
+            if (!globalThis.localStorage?.getItem(COOKIE_DIALOG_ID)) {
+                open();
+            }
+        }, [], DIALOG_INITIAL_DELAY);
         const handleClose = useCallback(() => {
-            globalThis.localStorage?.setItem(LOCAL_STORAGE_NAME, 'true');
-            onClose && onClose();
-        }, [onClose]);
+            globalThis.localStorage?.setItem(COOKIE_DIALOG_ID, 'true');
+            close();
+        }, [close]);
         return isOpened ? (jsx("div", { className: "container z-40 fixed bottom-0 left-0 right-0 pointer-events-none", children: jsxs("div", { className: "bg-white m-6 p-6 rounded-md flex items-center pointer-events-auto shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx("div", { className: "flex-1", children: jsxs(Paragraph, { size: "text-s-light", color: "text-primary-text", children: ["\u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442", jsx(LinkWrapper, { isRemote: true, className: style(getStyleLinkWrapper(termLink?.href)), ...termLink, children: "cookie" }), "(\u0444\u0430\u0439\u043B\u044B \u0441 \u0434\u0430\u043D\u043D\u044B\u043C\u0438 \u043E \u043F\u0440\u043E\u0448\u043B\u044B\u0445 \u043F\u043E\u0441\u0435\u0449\u0435\u043D\u0438\u044F\u0445 \u0441\u0430\u0439\u0442\u0430) \u0434\u043B\u044F \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043E\u0432 \u0438 \u0443\u0434\u043E\u0431\u0441\u0442\u0432\u0430 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u0439. \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0437\u0430\u043F\u0440\u0435\u0442\u0438\u0442\u044C \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435 cookie \u0432 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430\u0445 \u0441\u0432\u043E\u0435\u0433\u043E \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.", jsx(LinkWrapper, { isRemote: true, className: style(getStyleLinkWrapper(personalDataPolicyLink?.href)), ...personalDataPolicyLink, children: "\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0430 \u0412\u0430\u0448\u0438\u0445 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445" }), "\u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0441\u044F \u0432 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u044F\u043C\u0438 \u0424\u0435\u0434\u0435\u0440\u0430\u043B\u044C\u043D\u043E\u0433\u043E \u0437\u0430\u043A\u043E\u043D\u0430 \u043E\u0442 27.07.2006 \u2116 152-\u04243 \u00AB\u041E \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445\u00BB."] }) }), jsx("div", { className: "w-24 flex justify-end", children: jsx(CloseButton, { className: "bg-main-gray rounded-md", onClick: handleClose }) })] }) })) : null;
     });
     const getStyleLinkWrapper = (href) => ['inline mx-1', href ? 'text-green-dark' : ''];
@@ -5049,7 +4977,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.12.4";
+    const packageVersion = "0.12.6";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;