@redneckz/wildless-cms-uni-blocks 0.6.30 → 0.6.32

package/bundle/bundle.umd.js

@@ -450,43 +450,52 @@
     AccordionItem.childrenTypes = [];
     const FoldButton$1 = JSX(({ label, icon, onClick }) => (jsxs("button", { className: "border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer", onClick: onClick, children: [jsx("span", { className: "text-xl font-medium pr-2.5", children: label }), jsx(ImgInner, { image: icon, className: "text-primary-main flex-shrink-0", width: "24", height: "24", asSVG: true })] })));
 
-    const VersionStyleMap = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
-    };
+    const Description = JSX((props) => {
+        const { className = '', description } = props;
+        return jsx("div", { className: `${className}`, children: description });
+    });
 
-    const getIconWithVersion = (icon, version = 'primary') => ({
-        ...icon,
-        iconVersion: icon?.iconVersion ?? (version === 'secondary' ? 'white' : 'color'),
+    const LINK_CLASS_NAME = `absolute border border-primary-main ml-3 px-6 py-5
+  text-l-light bg-white text-primary-text flex w-[316px]
+  justify-between items-center group-hover:text-primary-main z-10`;
+    const LINK_BORDER_CLASS_NAME = 'bg-transparent border-white border h-[70px] absolute w-[316px] top-0';
+    const LinkButton = JSX(({ text, href = '', target = '', className = '' }) => {
+        if (!text) {
+            return null;
+        }
+        return (jsxs("div", { className: `relative group cursor-pointer w-[328px] h-[82px] ${className}`, children: [jsxs("a", { className: LINK_CLASS_NAME, role: "link", href: href, target: target, children: [jsx("div", { className: "p-0.5", children: text }), jsx("div", { className: "w-6 h-6", children: jsx(ImgInner, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border brightness-0 group-hover:brightness-100", image: { icon: 'ArrowRightIcon', iconVersion: 'black' }, imageClassName: "group-hover:text-primary-main", width: "24", height: "24", asSVG: true }) })] }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mx-1.5 mt-1.5` }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mt-3 mr-3` })] }));
     });
 
-    const benefitsTextStyleMap = {
-        primary: '',
-        secondary: 'text-white',
-    };
-    const benefitsDescriptionStyleMap = {
-        primary: 'text-secondary-text',
-        secondary: 'text-white opacity-80',
-    };
-    const benefitsIconStyleMap = {
-        primary: 'bg-main-divider text-primary-main',
-        secondary: 'bg-white/30 text-black',
-    };
-    const BenefitsBlock = JSX(({ className = '', title, benefitList, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-12 flex flex-col items-center ${className} ${VersionStyleMap[version]}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `max-w-[47rem] text-center ${benefitsTextStyleMap[version]}`, title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep(version)) })) : null] })));
-    const renderStep = (version) => (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-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[version]}`, image: getIconWithVersion(benefit.icon, version), asSVG: true })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? (jsx("h3", { className: `text-h6 m-0 ${benefitsTextStyleMap[version]}`, children: benefit.label })) : null, renderDescription$3(description, version)] })] }, String(i)));
-    };
-    const renderDescription$3 = (description, version) => {
-        const benefitType = description?.benefitType || null;
-        return description && benefitType ? (jsx("div", { className: `text-l-light mt-2 ${benefitsDescriptionStyleMap[version]}`, children: benefitType === 'list'
-                ? renderListBenefit(description)
-                : renderTextBenefit(description) })) : null;
+    const sliceArray = (items, size) => {
+        const result = items.reduce((resultArray, item, index) => {
+            const chunkIndex = Math.floor(index / (size - 1));
+            if (!resultArray[chunkIndex]) {
+                resultArray[chunkIndex] = [item];
+            }
+            resultArray[chunkIndex].push(item);
+            return resultArray;
+        }, []);
+        return result;
     };
-    const renderTextBenefit = (description) => description?.name || null;
-    const renderListBenefit = (description) => {
-        const listStyleType = description?.bullets ? 'list-disc pl-6' : '';
-        return description?.items && description.items.length > 0 ? (jsx("ul", { className: listStyleType, children: description.items.map((_, i) => (jsx("li", { children: _ }, `benefitListItem-${i}`))) })) : null;
+
+    const useCarouselControls = ({ itemsCount, visibleItemCount = itemsCount, isCyclic, }) => {
+        const [activeIndex, setActiveIndex] = useState(0);
+        const inc = useCallback(() => setActiveIndex((_) => (isCyclic ? (_ + 1) % itemsCount : Math.min(_ + 1, itemsCount - 1))), [isCyclic, itemsCount]);
+        const dec = useCallback(() => setActiveIndex((_) => (isCyclic ? (itemsCount + _ - 1) % itemsCount : Math.max(_ - 1, 0))), [isCyclic, itemsCount]);
+        const isScrollAvailable = itemsCount > visibleItemCount;
+        const isCyclicAndScrollAvailable = isCyclic && isScrollAvailable;
+        const canInc = isCyclicAndScrollAvailable ||
+            (isScrollAvailable && itemsCount - activeIndex > visibleItemCount);
+        const canDec = isCyclicAndScrollAvailable || Boolean(isScrollAvailable && activeIndex > 0);
+        return [
+            activeIndex,
+            {
+                inc,
+                dec,
+                canInc,
+                canDec,
+            },
+        ];
     };
 
     const isURL = (href) => href?.includes('//');
@@ -640,6 +649,90 @@
     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 ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `group shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
+        ? 'bg-secondary-light text-secondary-text'
+        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(ImgInner, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover:text-primary-main", width: "16", height: "16", asSVG: true }) })));
+
+    function renderArrows({ handler, isShown, btnClass, className = '', isDisabled = false, }) {
+        return (jsxs("div", { children: [isShown[0] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 ${btnClass[0]} ${className}`, onClick: handler[0], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left", disabled: !isShown[0] })) : null, isShown[1] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 rotate-180 ${btnClass[1]} ${className}`, onClick: handler[1], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right", disabled: !isShown[1] })) : null] }));
+    }
+
+    const CarouselContainer = JSX(({ children, activeItem, cardFullViewCount, cardWidth }) => {
+        const cardFullViewStyles = cardFullViewCount === 1
+            ? `translateX(-${activeItem}00%)`
+            : `translateX(-${activeItem * Number(cardWidth)}px)`;
+        return (jsx("div", { className: "w-auto flex flex-1 duration-1000", style: { transform: `${cardFullViewStyles}` }, role: "list", children: children }));
+    });
+
+    const Carousel = JSX(({ cardFullViewCount = 1, children, cardWidth = '1007', className = '', isBlur = true, isCyclic = false, block, ...rest }) => {
+        const blurClasses = isBlur ? 'absolute top-0 bottom-0 w-[84px]' : '';
+        const { blocks: childBlocks } = block || {};
+        const childBlocksLength = childBlocks !== undefined ? childBlocks.length : 0;
+        const isScrollAvailable = childBlocksLength > cardFullViewCount;
+        const [activeIndex, controls] = useCarouselControls({
+            itemsCount: childBlocksLength,
+            visibleItemCount: cardFullViewCount,
+            isCyclic,
+        });
+        const { inc, dec, canDec, canInc } = controls;
+        return (jsxs(BlockWrapper, { className: `box-border h-full relative font-sans flex flex-col justify-center overflow-hidden ${className}`, ...rest, children: [jsx(CarouselContainer, { activeItem: activeIndex, cardFullViewCount: cardFullViewCount, cardWidth: cardWidth, children: children }), isScrollAvailable ? (jsx("div", { children: renderArrows({
+                        handler: [dec, inc],
+                        isShown: [canDec, canInc],
+                        btnClass: ['left-8', 'right-8'],
+                        className: 'top-1/2 z-10',
+                    }) })) : null, isScrollAvailable ? (jsxs("div", { children: [jsx("div", { className: `${blurClasses} left-0 bg-opacity-from-white` }), jsx("div", { className: `${blurClasses} right-0 bg-opacity-to-white` })] })) : null] }));
+    });
+    Carousel.childrenTypes = ['CarouselCard', 'CarouselTariffsCard'];
+
+    const MAX_LINKS_COUNT = 12;
+    const CarouselLinks = JSX(({ additionalDescription, block, description, links, title, className = '', ...rest }) => {
+        return (jsxs(BlockWrapper, { className: `bg-primary-main flex w-full p-10 overflow-hidden justify-between font-sans ${className}`, ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-9 text-white text-xl-light", children: [title ? jsx(Heading, { title: title, as: "h1", headingType: "h0", className: "pb-0.5" }) : null, description ? (jsx(Description, { description: description, className: "text-xl-light pt-5" })) : null, additionalDescription ? (jsx(Description, { description: additionalDescription, className: "pt-6" })) : null] }), links?.length ? renderLinks(links) : null] }));
+    });
+    const renderLinks = (links, block) => {
+        const slicedLinks = sliceArray(links, MAX_LINKS_COUNT);
+        const slides = slicedLinks.map((slide) => (jsx("div", { className: "w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start", children: slide.map((link, index) => (jsx(LinkButton, { className: "m-1", ...link }, String(index)))) })));
+        return (jsx(Carousel, { className: "min-w-[832px] w-[832px]", isBlur: false, cardFullViewCount: 1, cardWidth: '832', isCyclic: true, block: { type: 'Carousel', blocks: slides }, children: slides }));
+    };
+
+    const VersionStyleMap = {
+        primary: 'bg-white text-primary-text',
+        secondary: 'bg-primary-main text-white',
+    };
+
+    const getIconWithVersion = (icon, version = 'primary') => ({
+        ...icon,
+        iconVersion: icon?.iconVersion ?? (version === 'secondary' ? 'white' : 'color'),
+    });
+
+    const benefitsTextStyleMap = {
+        primary: '',
+        secondary: 'text-white',
+    };
+    const benefitsDescriptionStyleMap = {
+        primary: 'text-secondary-text',
+        secondary: 'text-white opacity-80',
+    };
+    const benefitsIconStyleMap = {
+        primary: 'bg-main-divider text-primary-main',
+        secondary: 'bg-white/30 text-black',
+    };
+    const BenefitsBlock = JSX(({ className = '', title, benefitList, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-12 flex flex-col items-center ${className} ${VersionStyleMap[version]}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `max-w-[47rem] text-center ${benefitsTextStyleMap[version]}`, title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep(version)) })) : null] })));
+    const renderStep = (version) => (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-[50px] h-[50px] min-w-[50px] p-3 rounded-full ${benefitsIconStyleMap[version]}`, image: getIconWithVersion(benefit.icon, version), asSVG: true })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? (jsx("h3", { className: `text-h6 m-0 ${benefitsTextStyleMap[version]}`, children: benefit.label })) : null, renderDescription$3(description, version)] })] }, String(i)));
+    };
+    const renderDescription$3 = (description, version) => {
+        const benefitType = description?.benefitType || null;
+        return description && benefitType ? (jsx("div", { className: `text-l-light mt-2 ${benefitsDescriptionStyleMap[version]}`, children: benefitType === 'list'
+                ? renderListBenefit(description)
+                : renderTextBenefit(description) })) : null;
+    };
+    const renderTextBenefit = (description) => description?.name || null;
+    const renderListBenefit = (description) => {
+        const listStyleType = description?.bullets ? 'list-disc pl-6' : '';
+        return description?.items && description.items.length > 0 ? (jsx("ul", { className: listStyleType, children: description.items.map((_, i) => (jsx("li", { children: _ }, `benefitListItem-${i}`))) })) : null;
+    };
+
     const ButtonSection = JSX(({ className = '', buttons }) => buttons && buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => renderButton({ button, index })) })) : null);
     function renderButton({ button, buttonClassName, index }) {
         const { icon, iconRight, version, ...rest } = button;
@@ -656,11 +749,6 @@
         return jsx(ImgInner, { image: { ...icon }, width: iconWidth, height: "24", asSVG: true });
     };
 
-    const Description = JSX((props) => {
-        const { className = '', description } = props;
-        return jsx("div", { className: `${className}`, children: description });
-    });
-
     const HEADLINE_BLOCK_STYLE_MAPS = {
         transparent: {
             background: 'bg-transparent',
@@ -709,6 +797,12 @@
             headingType: 'h4',
             as: 'h4',
         },
+        XS: {
+            descriptionFont: 'text-l-light',
+            gap: 'gap-2',
+            headingType: 'h5',
+            as: 'h5',
+        },
     };
     const HEADLINE_SMALL_VERSION = {
         H6: 'text-h6',
@@ -760,14 +854,6 @@
 
     const BusinessBlock = JSX(({ className = '', title, cards, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans bg-white p-[50px] 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 ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `group shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
-        ? 'bg-secondary-light text-secondary-text'
-        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(ImgInner, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover:text-primary-main", width: "16", height: "16", asSVG: true }) })));
-
-    function renderArrows({ handler, isShown, btnClass, className = '', isDisabled = false, }) {
-        return (jsxs("div", { children: [isShown[0] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 ${btnClass[0]} ${className}`, onClick: handler[0], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left", disabled: !isShown[0] })) : null, isShown[1] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 rotate-180 ${btnClass[1]} ${className}`, onClick: handler[1], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right", disabled: !isShown[1] })) : null] }));
-    }
-
     const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
 
     const CalculatorValueBlock = JSX(({ title, value, postfix = '', prefix, className = '' }) => {
@@ -1242,53 +1328,6 @@
         return (jsxs(BlockWrapper, { className: `p-[50px] flex flex-col items-center font-sans bg-white ${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, value: value, onChange: setValue, valid: value === '' || !isDisabled, placeholder: placeholder, label: label }), button?.text ? (jsx("button", { type: "submit", className: `w-full p-4 mt-6 ${buttonStyle} `, disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
     });
 
-    const useCarouselControl = ({ itemsCount, visibleItemCount = itemsCount, isCyclic, }) => {
-        const [activeIndex, setActiveIndex] = useState(0);
-        const inc = useCallback(() => setActiveIndex((_) => (isCyclic ? (_ + 1) % itemsCount : Math.min(_ + 1, itemsCount - 1))), []);
-        const dec = useCallback(() => setActiveIndex((_) => (isCyclic ? (itemsCount + _ - 1) % itemsCount : Math.max(_ - 1, 0))), []);
-        const isScrollAvailable = itemsCount > visibleItemCount;
-        const isCyclicAndScrollAvailable = isCyclic && isScrollAvailable;
-        const canInc = isCyclicAndScrollAvailable ||
-            (isScrollAvailable && itemsCount - activeIndex > visibleItemCount);
-        const canDec = isCyclicAndScrollAvailable || Boolean(isScrollAvailable && activeIndex > 0);
-        return [
-            activeIndex,
-            {
-                inc,
-                dec,
-                canInc,
-                canDec,
-            },
-        ];
-    };
-
-    const CarouselContainer = JSX(({ children, activeItem, cardFullViewCount, cardWidth }) => {
-        const cardFullViewStyles = cardFullViewCount === 1
-            ? `translateX(-${activeItem}00%)`
-            : `translateX(-${activeItem * cardWidth}px)`;
-        return (jsx("div", { className: "w-auto flex flex-1 duration-1000", style: { transform: `${cardFullViewStyles}` }, role: "list", children: children }));
-    });
-
-    const Carousel = JSX(({ cardFullViewCount = 1, children, cardWidth = 1007, className = '', isBlur = true, isCyclic = false, block, ...rest }) => {
-        const blurClasses = isBlur ? 'absolute top-0 bottom-0 w-[84px]' : '';
-        const { blocks: childBlocks } = block || {};
-        const childBlocksLength = childBlocks !== undefined ? childBlocks.length : 0;
-        const isScrollAvailable = childBlocksLength > cardFullViewCount;
-        const [activeIndex, controls] = useCarouselControl({
-            itemsCount: childBlocksLength,
-            visibleItemCount: cardFullViewCount,
-            isCyclic,
-        });
-        const { inc, dec, canDec, canInc } = controls;
-        return (jsxs(BlockWrapper, { className: `box-border h-full relative font-sans flex flex-col justify-center overflow-hidden ${className}`, ...rest, children: [jsx(CarouselContainer, { activeItem: activeIndex, cardFullViewCount: cardFullViewCount, cardWidth: cardWidth, children: children }), isScrollAvailable ? (jsx("div", { children: renderArrows({
-                        handler: [dec, inc],
-                        isShown: [canDec, canInc],
-                        btnClass: ['left-8', 'right-8'],
-                        className: 'top-1/2 z-10',
-                    }) })) : null, isScrollAvailable ? (jsxs("div", { children: [jsx("div", { className: `${blurClasses} left-0 bg-opacity-from-white` }), jsx("div", { className: `${blurClasses} right-0 bg-opacity-to-white` })] })) : null] }));
-    });
-    Carousel.childrenTypes = ['CarouselCard', 'CarouselTariffsCard'];
-
     const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-[100%] h-[100%]';
     const CARD_STYLE_MAP = {
         normal: 'min-w-[100%] justify-center items-center my-7 col-span-12',
@@ -1398,7 +1437,7 @@
         }))
             .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
         const isScrollAvailable = colData.length > COLS_LENGTH_FOR_SCROLL$1;
-        const [activeIndex, controls] = useCarouselControl({
+        const [activeIndex, controls] = useCarouselControls({
             itemsCount: colData.length,
             visibleItemCount: COLS_LENGTH_FOR_SCROLL$1,
         });
@@ -1414,16 +1453,11 @@
     });
     const renderShowMoreToggleButton = ({ isShowAllRow, onClick, }) => (jsx("div", { className: "pr-[50px]", children: jsxs("div", { className: "flex w-full", children: [jsx("div", { className: FIRST_CELL_CLASSES$1 }), jsx("button", { onClick: onClick, className: "mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main", children: jsx("div", { className: "font-sans text-xs-light font-medium py-3", children: !isShowAllRow ? 'Показать все параметры' : 'Скрыть' }) })] }) }));
 
-    const contactsBlockStyleMap = {
-        primary: 'bg-white',
-        secondary: 'bg-primary-main text-white',
-    };
     const ContactsBlock = JSX(({ className = '', contacts, info, version = 'secondary', ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `${contactsBlockStyleMap[version]} flex p-12 ${className}`, ...rest, children: [info ? renderInfo(info) : null, contacts ? renderContacts(contacts) : null] }));
+        return (jsxs(BlockWrapper, { className: `${VersionStyleMap[version]} flex p-[50px] ${className}`, ...rest, children: [info?.length ? renderBlocks(info, version) : null, contacts?.length ? renderBlocks(contacts, version) : null] }));
     });
-    const renderInfo = (info) => (jsx("div", { className: "flex grow basis-0 pr-11", children: info.map(({ title, description, button }, index) => (jsxs("div", { className: "grow basis-0 pr-11 last:pr-0", children: [jsx(Heading, { as: "h5", headingType: "h5", title: title, className: "pb-2.5" }), jsx(Description, { className: "text-l-light pb-6", description: description }), button ? jsx(Button, { ...button }) : null] }, String(index)))) }));
-    const renderContacts = (contacts) => (jsx("div", { className: "flex grow basis-0", children: contacts.map((contactsColumn, index) => renderContactsColumn({ contactsColumn, index })) }));
-    const renderContactsColumn = ({ contactsColumn, index }) => contactsColumn ? (jsx("div", { className: "flex flex-col grow basis-0 pr-11", children: contactsColumn.map(({ title, description, additionalDescription }, key) => (jsxs("div", { className: "pr-11 last:pr-0 last:mt-5", children: [jsx(Heading, { as: "h5", headingType: "h5", title: title }), jsx(Description, { className: "text-l-light mt-2.5", description: description }), additionalDescription ? (jsx(Description, { className: "text-m-light mt-1.5 opacity-80", description: additionalDescription })) : null] }, String(key)))) }, String(index))) : null;
+    const renderBlocks = (info, version) => (jsx("div", { className: "flex grow basis-0", children: info.map((column, index) => renderBlocksColumn({ column, index, version })) }));
+    const renderBlocksColumn = ({ column, index, version }) => column ? (jsx("div", { className: "flex flex-col grow basis-0 pr-11 last:pr-0", children: column.map(({ title = '', description, additionalDescription, button }, key) => (jsxs("div", { className: "mt-6 first:mt-0", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "XS", align: "left", bgColorHeadline: version }), additionalDescription ? (jsx(Description, { className: "text-m-light mt-1.5 opacity-80", description: additionalDescription })) : null, button ? jsx(Button, { className: "mt-6", ...button }) : null] }, String(key)))) }, `col-${String(index)}`)) : null;
 
     const renderErrorContent = (error) => {
         if (error?.errorContentType === 'Image' && error?.image) {
@@ -2845,12 +2879,14 @@
 
     const renderBenefit$1 = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => (jsx(BenefitItem, { icon: icon, label: label, description: description, version: version, benefitsVersion: benefitsVersion }, String(i)));
 
-    const ProductBlockInner = JSX(({ className = '', title, headlineVersion = 'L', description, benefits, benefitsVersion, buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', ...rest }) => {
+    const ProductBlockInner = JSX(({ className = '', title, headlineVersion = 'L', description, benefitsCountOfRow = 3, benefits, benefitsVersion, buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', ...rest }) => {
         const benefitsCount = benefits?.filter((_) => _.label)?.length;
-        const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCount);
+        const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCountOfRow);
         return (jsxs("div", { className: `flex grow justify-between items-stretch h-full ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion, align: "left", ...rest }), jsxs(BaseTile, { buttons: buttons?.length ? (jsx(ButtonSection, { buttons: buttons, className: "flex gap-4", ...rest })) : null, children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits.map(renderBenefit$1(version, benefitsVersion)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] })] }), image?.src && jsx(ImgInner, { className: "mt-[-50px]", image: image })] }));
     });
-    const getBenefitsContainerStyles = (benefitsCount = 0) => `gap-6 mt-6 ${benefitsCount > 3 ? 'inline-grid grid-cols-[auto_auto]' : 'flex'}`;
+    const getBenefitsContainerStyles = (benefitsCountOfRow = 2) => `gap-6 mt-6 ${benefitsCountOfRow > 2
+    ? 'inline-grid grid-cols-[auto_auto_auto]'
+    : 'inline-grid grid-cols-[auto_auto]'}`;
 
     function renderBackwardButton(button, version, className) {
         const { text, href, target, onClick } = button;
@@ -3414,7 +3450,7 @@
             }) }));
     });
 
-    const InnerTableHeader = JSX(({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (jsxs("div", { className: "flex justify-between w-full pt-2.5 pb-3", children: [currencies && currencies.length > 1 ? (jsx("div", { className: "flex bg-secondary-light p-1.5 rounded-md", children: currencies.map((currency, idx) => (jsx("div", { className: `rounded-md text-xl-light px-4 py-3 cursor-pointer ${idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'}`, onClick: () => setActiveTabIndex(idx), children: currency || idx + 1 }, currency))) })) : null, linkToPDF ? (jsx(Button, { href: linkToPDF, version: "secondary", target: "_blank", appendLeft: jsx(ImgInner, { image: "DocDownloadIcon", className: "mr-0.5", width: "20", height: "20", asSVG: true }), text: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })) : null] })));
+    const InnerTableHeader = JSX(({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (jsxs("div", { className: "flex justify-between w-full pt-2.5 pb-3", children: [currencies && currencies.length > 1 ? (jsx("div", { className: "flex bg-secondary-light p-1.5 rounded-md", children: currencies.map((currency, idx) => (jsx("div", { className: `rounded-md text-xl-light px-4 py-3 cursor-pointer ${idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'}`, onClick: () => setActiveTabIndex(idx), children: currency || idx + 1 }, currency))) })) : null, linkToPDF ? (jsx(Button, { href: linkToPDF, version: "secondary", target: "_blank", appendLeft: jsx(Icon, { name: "DocDownloadIcon", iconVersion: "color", className: "mr-0.5", width: "20", height: "20", asSVG: true }), text: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })) : null] })));
 
     const EMPTY_DATA = 'Данных нет';
     const InnerTable = JSX(({ dataUrl, pdfUrl, onClick }) => {
@@ -3441,7 +3477,7 @@
             data: colData.map((col) => col?.[i] || []),
         }));
         const columnsLength = colData.length;
-        const [activeIndex, controls] = useCarouselControl({
+        const [activeIndex, controls] = useCarouselControls({
             itemsCount: colData.length,
             visibleItemCount: COLS_LENGTH_FOR_SCROLL,
         });
@@ -3545,6 +3581,7 @@
     const Blocks = {
         Accordion,
         AccordionItem,
+        CarouselLinks,
         BenefitsBlock,
         BusinessBlock,
         Bonus,
@@ -3696,7 +3733,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.6.30";
+    const packageVersion = "0.6.32";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;