@redneckz/wildless-cms-uni-blocks 0.12.5 → 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] })));
 
@@ -1164,8 +1164,8 @@
 
     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$2) })) : null] })));
-    const renderBenefit$2 = (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 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'
@@ -2297,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]);
@@ -2343,15 +2343,15 @@
     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';
@@ -2904,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],
@@ -2920,7 +2920,7 @@
     };
 
     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$1(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" }) })));
@@ -3108,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;
@@ -3125,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,
         };
     }
 
@@ -3701,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 = {};
@@ -4074,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() })] })));
@@ -4130,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;
@@ -4152,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) {
@@ -4213,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] })] }));
 
@@ -4789,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',
@@ -4931,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' : ''];
@@ -5015,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.5";
+    const packageVersion = "0.12.6";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;