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

package/bundle/bundle.umd.js

@@ -348,6 +348,8 @@
     });
     const groupStyle = (isGroup) => (isGroup ? 'group' : '');
 
+    const headingTag = (tag) => tag;
+
     const styles$4 = {
         h0: 'text-h0',
         h1: 'text-h1',
@@ -357,7 +359,10 @@
         h5: 'text-h5',
         h6: 'text-h6', // 20
     };
-    const Heading = JSX(({ className = '', headingType = 'h3', as: Tag = 'h3', title, children }) => (jsx(Tag, { className: `font-sans m-0 ${styles$4[headingType]} ${className}`, children: title || children })));
+    const Heading = JSX(({ className = '', headingType = 'h3', as = 'h3', title, children }) => {
+        const Tag = headingTag(as);
+        return (jsx(Tag, { className: `font-sans m-0 ${styles$4[headingType]} ${className}`, children: title || children }));
+    });
 
     const identity = (_) => _;
 
@@ -1167,7 +1172,7 @@
     const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: `p-default flex flex-col items-center ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep$1) })) : null] })));
     const renderStep$1 = (benefit, i) => {
         const description = benefit.description;
-        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: "w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black", image: benefit.icon })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5 h-full", children: [benefit?.label ? jsx(Heading, { headingType: "h6", children: benefit.label }) : null, renderDescription$4(description)] })] }, String(i)));
+        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: "w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black", image: benefit.icon })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5 h-full", children: [benefit?.label ? jsx(Heading, { headingType: "h6", children: benefit.label }) : null, renderDescription$4(description)] })] }, String(i)));
     };
     const renderDescription$4 = (description) => {
         const benefitType = description?.benefitType || null;
@@ -1181,12 +1186,12 @@
         return description?.items && description.items.length > 0 ? (jsx("ul", { className: listStyleType, children: description.items.map((_, i) => (jsx("li", { children: _ }, `benefitListItem-${i}`))) })) : null;
     };
 
-    const renderButtonsSection = (buttons, { className = '', buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-2' : 'flex-wrap gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
+    const renderButtonsSection = (buttons, { className = '', buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-2 justify-items-stretch' : 'flex-wrap gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
     const renderButton = (buttonClassName = '') => (button, index) => {
         const { text, icon, iconRight, version, ...rest } = button || {};
         const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
         const iconVersion = icon?.iconVersion ? icon?.iconVersion : iconVersionDefault;
-        return text || icon?.icon ? (jsx(Button, { className: buttonClassName, appendLeft: renderButtonIcon({ ...icon, iconVersion }), appendRight: renderButtonIcon({ ...iconRight, iconVersion }), version: version, text: text, ...rest }, index ? String(index) : '')) : null;
+        return text || icon?.icon ? (jsx(Button, { className: style('basis-full sm:basis-auto', buttonClassName), appendLeft: renderButtonIcon({ ...icon, iconVersion }), appendRight: renderButtonIcon({ ...iconRight, iconVersion }), version: version, text: text, ...rest }, index ? String(index) : '')) : null;
     };
     const DEFAULT_ICON_W = 24;
     const renderButtonIcon = (icon) => icon?.icon || icon?.src ? (jsx(ImgInner, { image: icon, width: String(icon?.size?.width || DEFAULT_ICON_W), height: String(DEFAULT_ICON_W) })) : null;
@@ -1195,32 +1200,32 @@
         XXL: {
             title: { headingType: 'h0', as: 'h1' },
             descriptionSize: 'text-h5',
-            descriptionStyle: 'mt-5',
+            descriptionStyle: 'mt-headline-xxl',
         },
         XL: {
             title: { headingType: 'h1', as: 'h1' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-4',
+            descriptionStyle: 'mt-headline-l',
         },
         L: {
             title: { headingType: 'h2', as: 'h2' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-4',
+            descriptionStyle: 'mt-headline-l',
         },
         M: {
             title: { headingType: 'h3', as: 'h3' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-3',
+            descriptionStyle: 'mt-headline-m',
         },
         S: {
             title: { headingType: 'h4', as: 'h4' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-2',
+            descriptionStyle: 'mt-headline-s',
         },
         XS: {
             title: { headingType: 'h5', as: 'h5' },
             descriptionSize: 'text-l-light',
-            descriptionStyle: 'mt-2',
+            descriptionStyle: 'mt-headline-s',
         },
     };
     // TODO Move to Gallery and rename
@@ -1254,7 +1259,7 @@
             ? renderBonusCount(bonusItemContent)
             : renderBonusImage(bonusItemContent) }));
     const renderBonusCount = (_) => (jsxs("div", { className: "relative -bottom-3 h-auto flex items-end mt-14 shrink-0", children: [_.bonusCount ? (jsx("span", { className: "font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7", children: _.bonusCount })) : null, _.bonusName ? (jsx("span", { className: "text-h2 bg-clip-text text-transparent bg-green-to-yellow", children: _.bonusName })) : null] }));
-    const renderBonusImage = (_) => _.image ? jsx(ImgInner, { className: `w-12 h-12 min-w-12 p-3 rounded-full`, image: _.image }) : null;
+    const renderBonusImage = (_) => _.image ? jsx(ImgInner, { className: `w-12 h-12 min-w-12 p-3 rounded-icon`, image: _.image }) : null;
 
     const AlignText = {
         left: 'text-left',
@@ -1285,12 +1290,12 @@
     });
     const renderItem = (item, key) => {
         const { icon, text } = item;
-        return (jsxs("li", { className: "flex items-center gap-3.5 mb-3 last:mb-0", children: [icon?.icon ? (jsx(ImgInner, { image: icon, className: "w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider" })) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, jsx("span", { className: "text-xl-light", children: text })] }, key));
+        return (jsxs("li", { className: "flex items-center gap-3.5 mb-3 last:mb-0", children: [icon?.icon ? (jsx(ImgInner, { image: icon, className: "w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider" })) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, jsx("span", { className: "text-xl-light", children: text })] }, key));
     };
 
     const BusinessBlock = JSX(({ className = '', title, cards, ...rest }) => (jsxs(BlockWrapper, { className: `p-default pb-9 ${className}`, ...rest, children: [jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }), jsx("div", { className: "flex gap-5", children: cards?.length ? cards.map((_, i) => jsx(BusinessCard, { ..._ }, String(i))) : null })] })));
 
-    const ButtonBlock = JSX(({ button, className, ...rest }) => (jsx(BlockWrapper, { className: style('!bg-transparent', className), ...rest, children: renderButtonsSection([button]) })));
+    const ButtonsBlock = JSX(({ buttons, className, ...rest }) => (jsx(BlockWrapper, { className: style('!bg-transparent', className), ...rest, children: renderButtonsSection(buttons) })));
 
     const useCarouselControls = (props) => {
         const { itemCount, visibleItemCount } = props;
@@ -1928,7 +1933,7 @@
             ? getDisabledButtonClasses({ version: button?.version })
             : getRegularButtonClasses({ className: 'text-white', version: button?.version });
         const link = useLink();
-        return (jsxs(BlockWrapper, { className: style('p-default flex flex-col items-center', className), ...rest, children: [title ? jsx(Heading, { className: "max-w-[684px] pb-9", headingType: "h2", title: title }) : null, jsxs("form", { className: "w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, valid: !isDisabled, placeholder: placeholder, label: label, ...field(AMOUNT_KEY, { parse: Number, format: String }) }), button?.text ? (jsx("button", { type: "submit", className: style('w-full p-4 mt-6', buttonStyle), disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
+        return (jsxs(BlockWrapper, { className: style('p-default flex flex-col items-center', className), ...rest, children: [title ? (jsx(Heading, { className: "pb-5 xl:pb-9 self-start xl:self-center", headingType: "h2", title: title })) : null, jsxs("form", { className: "w-full xl:max-w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, valid: !isDisabled, placeholder: placeholder, label: label, ...field(AMOUNT_KEY, { parse: Number, format: String }) }), button?.text ? (jsx("button", { type: "submit", className: style('w-full p-4 mt-5 xl:mt-6', buttonStyle), disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
     });
 
     const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
@@ -2232,12 +2237,33 @@
         }
     };
 
-    const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full';
+    const getColSpan = (className) => {
+        const colSpanPrefix = 'col-span-';
+        const colSpanStr = className?.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
+        return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
+    };
+
     const CARD_WIDTH_MAP = {
         normal: 'min-w-[970px]',
         small: 'min-w-[355px]',
     };
-    const CarouselCard = JSX(({ className = '', button, description, title, carouselVersion = 'normal', version = '' }) => (jsx("section", { className: `flex pb-9 pl-12 border-box h-full ${CARD_WIDTH_MAP[carouselVersion]} ${className}`, children: jsxs("div", { className: "relative w-full", children: [jsx("div", { className: `${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-6 right-8 bg-green` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light` }), jsxs("div", { className: "relative h-full bg-white z-10 p-10 border border-solid border-green-light", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "L", align: "text-left", version: version }), renderButtonsSection([button], { className: 'mt-14' })] })] }) })));
+    function getCardWidth(className = '', carouselVersion = 'normal') {
+        const colSpan = getColSpan(className);
+        if (colSpan <= 4) {
+            return 'w-[375px]';
+        }
+        else {
+            return CARD_WIDTH_MAP[carouselVersion];
+        }
+    }
+
+    const titleSize = 'L';
+
+    const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full sm:hidden';
+    const CarouselCard = JSX(({ className = '', button, description, title, carouselVersion = 'normal', version = '' }) => (jsx("section", { className: style('flex pb-9 pl-12 sm:p-5 border-box h-full sm:max-w-[375px]', getCardWidth(className, carouselVersion), className), children: jsxs("div", { className: "relative w-full", children: [jsx("div", { className: `${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-6 right-8 bg-green` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light` }), jsxs("div", { className: "relative h-full bg-white z-10 p-10 border border-solid border-green-light", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: titleSize, align: "text-left", version: version }), renderButtonsSection([button], {
+                            className: 'mt-14 sm:justify-center',
+                            isVertical: true,
+                        })] })] }) })));
 
     const cardStyleMap = {
         black: 'bg-black',
@@ -2257,7 +2283,8 @@
         return (jsx(BlockWrapper, { className: style('w-[365px]', className), ...rest, children: jsxs(LinkWrapper, { className: "flex flex-col", href: href, target: target, children: [icon?.icon ? jsx(ImgInner, { image: icon }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left pt-3 mb-2", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Text, { font: "font-light", size: "text-m", color: "text-secondary-text", children: description }) })) : null] }) }));
     });
 
-    const BaseTile = JSX(({ className, title = '', insetTitle = '', buttons, leftImage, rightImage, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col font-sans', className), children: [backImage ? jsx("div", { className: "absolute bottom-0 right-0 z-0", children: backImage }) : null, title, jsxs("div", { className: "grow relative flex flex-wrap md:flex-nowrap justify-between items-stretch gap-8", children: [leftImage, jsxs("div", { className: style('flex flex-col gap-8', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), buttons] }), rightImage ? jsx("div", { className: "-order-1 lg:order-1", children: rightImage }) : null] })] })));
+    const BaseTile = JSX(({ className, title = '', insetTitle = '', buttons, leftImage, rightImage, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col font-sans', className), children: [backImage ? jsx("div", { className: "absolute bottom-0 right-0 z-0", children: backImage }) : null, title, jsxs("div", { className: "grow relative flex flex-wrap sm:flex-nowrap justify-between items-stretch gap-8", children: [renderImageContainer(leftImage), jsxs("div", { className: style('flex flex-col gap-8', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), buttons] }), renderImageContainer(rightImage, { className: '-order-1 sm:order-1' })] })] })));
+    const renderImageContainer = (image, { className } = {}) => image ? jsx("div", { className: style('flex-none', className), children: image }) : null;
 
     const getItemListFontSize = (colValue) => (colValue === 1 ? 'text-h6' : 'text-l');
     const cardColumnsModeStyleMap = {
@@ -2317,7 +2344,7 @@
                     isVertical: isFullWidth,
                 })] }));
     });
-    const renderImage$3 = (image) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`, image: image })) : null] }));
+    const renderImage$3 = (image) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? jsx(ImgInner, { className: `w-8 h-8 min-w-8 mb-5`, image: image }) : null] }));
     const 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;
@@ -3173,11 +3200,9 @@
     });
     const isQueryLongEnough = (_) => _ && _.length >= MIN_QUERY_LEN;
 
-    const Contacts = JSX(({ className = '', items, hasButton }) => (jsxs("div", { className: className, children: [items?.length ? items.map(renderContact) : null, hasButton ? (jsx(Button, { version: "primary", className: "mb-6 w-full", href: "https://www.rshb.ru/feedback/question/", target: "_blank", ariaLabel: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C", text: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C" })) : null] })));
-    const renderContact = (item, index) => {
-        const { type, text, description } = item;
-        return (jsxs("div", { className: "mb-4", children: [jsx("div", { children: renderText(type, text) }), jsx("div", { className: "mt-1 text-s-light text-secondary-text", children: description })] }, String(index)));
-    };
+    const Contacts = JSX(({ className = '', items, hasButton }) => (jsxs("div", { className: className, children: [items?.length ? items.map(renderContactsGroup) : null, hasButton ? (jsx(Button, { version: "primary", className: "mb-6 w-full", href: "https://www.rshb.ru/feedback/question/", target: "_blank", ariaLabel: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C", text: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C" })) : null] })));
+    const renderContactsGroup = (item, i) => (jsxs("div", { className: "mb-6", children: [jsx("div", { className: "mb-4", children: jsx(Text, { size: "text-l", font: "font-medium", children: item?.title }) }), jsx("div", { children: item.items?.map(renderContact) })] }, String(i)));
+    const renderContact = (item, index) => (jsxs("div", { className: "mb-4", children: [jsx("div", { children: renderText(item.type, item.text) }), jsx("div", { className: "mt-1 text-s-light text-secondary-text", children: item.description })] }, String(index)));
     const renderText = (type, text = '') => {
         switch (type) {
             case 'tel':
@@ -3661,12 +3686,6 @@
     };
     const LinkDocs = JSX(({ className = '', title, description, align = 'text-center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => (jsxs(BlockWrapper, { className: style('p-default', className), ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, align: align, headlineVersion: "M", as: "h2" }), documents?.length ? (jsx("div", { className: style('mt-8 flex gap-6', linkColumnsModeStyleMap[columnsMode]), role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { doc: doc, icon: icon ? (jsx(ImgInner, { className: "min-w-6 min-h-6", image: icon, width: "24", height: "24" })) : null }) }, String(i)))) })) : null] })));
 
-    const getColSpan = (className) => {
-        const colSpanPrefix = 'col-span-';
-        const colSpanStr = className?.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
-        return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
-    };
-
     function getTileMinHeight(className = '') {
         const colSpan = getColSpan(className);
         if (colSpan <= 6) {
@@ -4058,16 +4077,18 @@
 
     const ParagraphBlock = JSX(({ text, size, align, font, children, ...rest }) => (jsx(BlockWrapper, { ...rest, children: jsx(Paragraph, { size: size, align: align, font: font, children: text || children }) })));
 
-    const BenefitItem = JSX(({ className, icon, label, description, version = 'primary', benefitsVersion = 'normal' }) => (jsxs("div", { className: style('flex gap-5', description ? 'items-start' : 'items-center', className), children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(version, benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null, jsxs("div", { children: [label ? (jsx(Text, { size: "text-h6", color: "text-primary-text group-data-secondary:text-white", children: label })) : null, description ? (jsx(Paragraph, { size: "text-m-light", color: "text-secondary-text group-data-secondary:text-white", children: description })) : null] })] })));
-    function getBenefitIconBgStyle(version, benefitsVersion) {
-        let bgColorStyle = 'bg-primary-main text-black';
-        if (version === 'secondary') {
-            bgColorStyle = 'bg-white/30 text-black';
-        }
-        else if (benefitsVersion === 'normal') {
-            bgColorStyle = 'bg-secondary-light text-primary-main';
-        }
-        return `w-12 h-12 min-w-12 rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
+    const labelSize$1 = 'text-h6';
+
+    const BenefitItem = JSX((props) => {
+        const { className = '', icon, label, description, benefitsVersion = 'normal' } = props;
+        const listItemAlign = description ? 'items-start' : 'items-center';
+        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? (jsx(Text, { color: "text-primary-text group-data-secondary:text-white", size: labelSize$1, children: label })) : null, description ? (jsx(Paragraph, { font: "font-light", size: "text-m", color: "text-secondary-text group-data-secondary:text-white", children: description })) : null] })] }));
+    });
+    function getBenefitIconBgStyle(benefitsVersion) {
+        const bgColorStyle = 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);
     }
 
     // TODO: Create universal function for this case
@@ -4089,16 +4110,21 @@
         }
     };
 
-    const PictureText = JSX(({ className = '', title, description, image, benefits, sum, monthLimit, directionRight = false, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `relative py-12 px-24 ${className}`, version: version, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M" }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src ? jsx(ImgInner, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(Number(sum), Number(monthLimit))] })] })] })));
-    function renderInsuranceSumMonth(sum, monthLimit) {
-        return sum || monthLimit ? (jsxs("div", { className: "bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4", children: [Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null, Number(monthLimit) > 0
-                    ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum))
-                    : null] })) : null;
-    }
-    function renderValueBlock(title, sum = 0, isAnotherBlock = false) {
+    const positionStyle = 'justify-center items-center gap-32';
+
+    const styleInsuranceSum = 'bg-main-divider rounded-md px-5 py-4 gap-6';
+
+    const styleValueBlock = 'justify-between items-center gap-2';
+    const styleValueBlockText = 'text-primary-main';
+
+    const renderInsuranceSumMonth = (sum = 0, monthLimit = 0) => sum || monthLimit ? (jsxs("div", { className: style('flex mt-6', styleInsuranceSum), children: [sum > 0 ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null, monthLimit > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum)) : null] })) : null;
+    const renderValueBlock = (title, sum = 0, isAnotherBlock = false) => {
         const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
-        return (jsxs("div", { className: `flex justify-between items-center gap-2 w-full whitespace-pre ${widthStyle}`, children: [jsx("span", { className: "text-secondary-text text-l-light", children: title }), jsxs("span", { className: "text-primary-main text-h6", children: [toLocalNumberFormat(2)(sum), " \u20BD"] })] }));
-    }
+        return (jsxs("div", { className: style(`flex w-full whitespace-pre`, styleValueBlock, widthStyle), children: [jsx(Text, { font: "font-light", size: "text-l", children: title }), jsxs(Text, { size: "text-h6", color: styleValueBlockText, children: [toLocalNumberFormat(2)(sum), " \u20BD"] })] }));
+    };
+
+    const PictureText = JSX(({ className = '', title, description, image, benefits, sum, monthLimit, directionRight = false, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('relative p-default', className), version: version, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M" // TODO: Сверить с макетом после влития мобильных правок Headline (DRAFT)
+                , align: "text-left" }), jsxs("div", { className: style('flex mt-6', positionStyle), children: [image?.src ? jsx(ImgInner, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(Number(sum), Number(monthLimit))] })] })] })));
 
     function getTileHeadingType(className = '') {
         const colSpan = getColSpan(className);
@@ -4251,12 +4277,7 @@
         return (jsx(BlockWrapper, { ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) }));
     });
 
-    const iconBgStyles = {
-        primary: 'bg-main-divider',
-        secondary: 'bg-white/30',
-        'secondary-light': 'bg-secondary-light',
-    };
-    const RoundedIcon = JSX(({ iconBgVersion = 'primary', ...rest }) => (jsx("div", { className: style('rounded-icon p-2.5 mr-3', iconBgStyles[iconBgVersion]), children: jsx(Icon, { ...rest }) })));
+    const renderRoundedIcon = (icon, iconBgVersion) => null;
 
     const foldableSectionStyles = 'grid grid-cols-12 [&>*]:pb-4';
 
@@ -4268,26 +4289,31 @@
 
     const rollupItemStyles = 'border-0 border-b border-solid border-main-divider last:border-b-0';
 
-    const RollupItem = JSX(({ className = '', label = 'Развернуть', labelIcon, isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-5 [&>*]:p-0', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ version, label, labelIcon, isUnfolded, onToggle }) }) }));
+    const RollupItem = JSX(({ className = '', label = 'Развернуть', labelIcon, labelIconBgVersion, isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => {
+        return (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-5 [&>*]:p-0', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({
+                    version,
+                    label,
+                    labelIcon,
+                    labelIconBgVersion,
+                    isUnfolded,
+                    onToggle,
+                }) }) }));
     });
     RollupItem.childrenTypes = {
         exclude: ['RollupItem'],
     };
-    const renderFoldButton = ({ version, label: defaultLabel, labelIcon, isUnfolded, onToggle, }) => {
+    const renderFoldButton = ({ version, label: defaultLabel, labelIcon, labelIconBgVersion, isUnfolded, onToggle, }) => {
         const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
         return version === 'primary' ? (renderPrimaryFoldButton({
             label,
             labelIcon,
+            labelIconBgVersion,
             icon: getIconName(isUnfolded),
             onToggle,
         })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
-    const renderPrimaryFoldButton = ({ label, icon, onToggle, labelIcon }) => {
-        const iconWidth = String(labelIcon?.size?.width || 24);
-        const iconHeight = String(labelIcon?.size?.height || 24);
-        const iconName = labelIcon?.icon;
-        return (jsxs("button", { className: style('border-none bg-transparent px-0 flex justify-between items-center w-full cursor-pointer group/button', iconName ? 'py-2' : 'py-5'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main", children: [iconName ? (jsx(RoundedIcon, { name: iconName, width: iconWidth, height: iconHeight, iconVersion: labelIcon?.iconVersion })) : null, label ? (jsx(Text, { size: labelSize, font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
+    const renderPrimaryFoldButton = ({ label, labelIconBgVersion, icon, onToggle, labelIcon, }) => {
+        return (jsxs("button", { className: style('border-none bg-transparent px-0 flex justify-between items-center w-full cursor-pointer group/button', labelIcon?.icon ? 'py-2' : 'py-5'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main", children: [renderRoundedIcon(), label ? (jsx(Text, { size: labelSize, font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
     };
 
     const SAFEBOXES_URL = '/api/v1/safeboxes';
@@ -4899,7 +4925,7 @@
         Bonus,
         BonusBenefitsBlock,
         BusinessBlock,
-        ButtonBlock,
+        ButtonsBlock,
         Calculator,
         CardTransfer,
         Carousel,
@@ -5094,7 +5120,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.11.1";
+    const packageVersion = "0.11.3";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;