@redneckz/wildless-cms-uni-blocks 0.6.31 → 0.6.33

package/bundle/bundle.umd.js

@@ -349,9 +349,15 @@
         return (jsx(Tag, { className: `font-sans m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`, children: title }));
     });
 
+    const Paragraph = JSX((props) => {
+        const { size = '', color = '', align = '', font = '', children } = props;
+        const textClasses = `font-sans ${size} ${color} ${align} ${font}`;
+        return jsx("p", { className: textClasses, children: children });
+    });
+
     const AccordionItemsList = JSX(({ children }) => (jsx("ul", { className: "list-none m-0 p-0", children: children })));
 
-    const Accordion = JSX(({ className = '', title, accordionAlignTitle = 'center', description, children, ...rest }) => (jsxs(BlockWrapper, { className: `p-[50px] mb-1 last:mb-0 font-sans bg-white text-primary-text ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `mb-2.5 ${AlignText[accordionAlignTitle]}`, title: title })) : null, description ? jsx("div", { className: "mb-2.5 text-l", children: description }) : null, jsx(AccordionItemsList, { children: children })] })));
+    const Accordion = JSX(({ className = '', title, accordionAlignTitle = 'center', description, children, ...rest }) => (jsxs(BlockWrapper, { className: `p-[50px] mb-1 last:mb-0 bg-white text-primary-text ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `mb-2.5 ${AlignText[accordionAlignTitle]}`, title: title })) : null, description ? (jsx("div", { className: "mb-2.5", children: jsx(Paragraph, { size: "text-l", children: description }) })) : null, jsx(AccordionItemsList, { children: children })] })));
     Accordion.childrenTypes = ['AccordionItem'];
 
     const Foldable = JSX(({ isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
@@ -445,48 +451,58 @@
         return (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile }));
     });
 
+    const Text = JSX((props) => {
+        const { size = '', color = '', align = '', font = '', children } = props;
+        const textClasses = `font-sans ${size} ${color} ${align} ${font}`;
+        return jsx("span", { className: textClasses, children: children });
+    });
+
     const icons$1 = ['PlusIcon', 'MinusIcon'];
     const AccordionItem = JSX(({ className = '', label = '', isExpanded, children }) => (jsx("li", { className: `border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: true, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "grid grid-cols-12 gap-5 [&>*]:p-0", isUnfolded: isUnfolded, children: children })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(FoldButton$1, { label: label, icon: icons$1[Number(isUnfolded)], onClick: onToggle })) }) })));
     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 getIconWithVersion = (icon, version = 'primary') => ({
-        ...icon,
-        iconVersion: icon?.iconVersion ?? (version === 'secondary' ? 'white' : 'color'),
+    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(Text, { size: "text-xl", font: "font-medium", children: label }), jsx(ImgInner, { image: icon, className: "text-primary-main flex-shrink-0", width: "24", height: "24", asSVG: true })] })));
+
+    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 +656,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, 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("div", { className: "pt-5", children: jsx(Paragraph, { size: "text-xl", font: "font-light", children: description }) })) : null, additionalDescription ? (jsx("div", { className: "pt-6", children: jsx(Paragraph, { children: additionalDescription }) })) : null] }), links?.length ? renderLinks(links) : null] }));
+    });
+    const renderLinks = (links) => {
+        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 +756,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 +804,12 @@
             headingType: 'h4',
             as: 'h4',
         },
+        XS: {
+            descriptionFont: 'text-l-light',
+            gap: 'gap-2',
+            headingType: 'h5',
+            as: 'h5',
+        },
     };
     const HEADLINE_SMALL_VERSION = {
         H6: 'text-h6',
@@ -724,7 +825,7 @@
     const Headline = JSX(({ className = '', bgColorHeadline = 'transparent', align = 'center', title, description, headlineVersion = 'XL', as, ...rest }) => {
         const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
         const SIZE_MAPS = HEADLINE_VERSION[headlineVersion];
-        return (jsxs(BlockWrapper, { className: `font-sans flex flex-col p-[50px] ${SIZE_MAPS.gap} ${STYLE_MAPS.background} ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: SIZE_MAPS?.headingType, as: as || SIZE_MAPS?.as, className: `whitespace-pre-wrap ${STYLE_MAPS.text} ${AlignText[align]}`, title: title })) : null, description ? (jsx(Description, { className: `${SIZE_MAPS.descriptionFont} ${STYLE_MAPS.text} ${AlignText[align]}`, description: description })) : null] }));
+        return (jsxs(BlockWrapper, { className: `font-sans flex flex-col p-[50px] ${SIZE_MAPS.gap} ${STYLE_MAPS.background} ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: SIZE_MAPS?.headingType, as: as || SIZE_MAPS?.as, className: `whitespace-pre-wrap ${STYLE_MAPS.text} ${AlignText[align]}`, title: title })) : null, description ? (jsx("p", { className: `${SIZE_MAPS.descriptionFont} ${STYLE_MAPS.text} ${AlignText[align]}`, children: description })) : null] }));
     });
 
     const Bonus = JSX((props) => {
@@ -760,14 +861,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 +1335,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 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 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 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',
@@ -1414,16 +1460,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("div", { className: "mt-1.5 opacity-80", children: jsx(Paragraph, { size: "text-m-light", children: 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) {
@@ -2174,7 +2215,7 @@
         return (jsx("section", { className: `relative overflow-hidden text-left border border-solid box-border
           p-9 min-w-[697px] min-h-[319px]
           ${BorderVersionStyleMap[version]}
-          ${className}`, role: "listitem", children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "flex flex-col justify-between", children: [jsxs("div", { className: "flex itens-center justify-between mb-4", children: [description ? jsx(Description, { className: "text-h6", description: description }) : null, additionalDescription ? (jsxs("div", { className: "text-m-light text-secondary-text", children: [" ", additionalDescription, " "] })) : null] }), cardList?.length ? (jsx("div", { className: `${cardColumnsModeStyleMap[columnsMode]}`, role: "list", children: renderCardList(cardList, columnsMode) })) : null] }) }) }));
+          ${className}`, role: "listitem", children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "flex flex-col justify-between", children: [jsxs("div", { className: "flex itens-center justify-between mb-4", children: [description ? jsx("span", { className: "text-h6", children: description }) : null, additionalDescription ? (jsxs("span", { className: "text-m-light text-secondary-text", children: [" ", additionalDescription, " "] })) : null] }), cardList?.length ? (jsx("div", { className: `${cardColumnsModeStyleMap[columnsMode]}`, role: "list", children: renderCardList(cardList, columnsMode) })) : null] }) }) }));
     });
     const renderCardList = (cardList, columnsMode) => cardList.map((item, i) => (jsxs("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: [item?.parameter ? (jsx("span", { className: `pr-2.5 ${getItemListFontSize(columnsMode)}`, children: item.parameter })) : null, item?.parameterDesccription ? (jsx("span", { className: "text-m-light text-secondary-text", children: item.parameterDesccription })) : null] }, String(i))));
 
@@ -2960,7 +3001,7 @@
     const RecommendationCard = JSX(({ className = '', title, description, items, image, version, socialMedia, button }) => {
         const tileTitle = title ? (jsx(Heading, { headingType: "h5", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
         const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
-        return (jsx("section", { className: `relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`, role: "listitem", children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? jsx(Description, { className: "mb-2", description: description }) : null, items?.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items, version: version })) : null, socialMedia ? (jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia, version: version })) : null, button?.text ? (jsx("div", { className: "pt-2", children: renderButton({ button, buttonClassName: 'mt-16' }) })) : null] }) }) }));
+        return (jsx("section", { className: `relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`, role: "listitem", children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? jsx("span", { className: "mb-2", children: description }) : null, items?.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items, version: version })) : null, socialMedia ? (jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia, version: version })) : null, button?.text ? (jsx("div", { className: "pt-2", children: renderButton({ button, buttonClassName: 'mt-16' }) })) : null] }) }) }));
     });
 
     const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
@@ -3508,7 +3549,7 @@
     const Tile = JSX((props) => {
         const { title, headingType = 'h3', description, items, buttons, image, isDotted = true, listItemSize = 'M', className = '', version = 'primary', tags, children, ...rest } = props;
         const headingClassName = version === 'primary' ? 'text-primary-text' : '';
-        return (jsx(BlockWrapper, { className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsxs(BaseTile, { title: title ? (jsx(Heading, { headingType: headingType, as: "h2", title: title, className: `whitespace-pre-wrap max-w-[600px] ${headingClassName}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { buttons: buttons.map((button) => ({ ...button, className: 'min-w-[158px]' })), className: "flex mt-8 gap-3", ...rest })) : null, image: image?.src ? jsx(ImgInner, { className: "mt-auto ml-7", image: image }) : null, children: [description ? (jsx(Description, { className: "max-w-[600px] text-xl-light mt-2.5", description: description })) : null, children, renderList({ version, isDotted, listItemSize }, items), tags?.length ? jsx(Tags, { tags: tags, className: "mt-5" }) : null] }) }));
+        return (jsx(BlockWrapper, { className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsxs(BaseTile, { title: title ? (jsx(Heading, { headingType: headingType, as: "h2", title: title, className: `whitespace-pre-wrap max-w-[600px] ${headingClassName}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { buttons: buttons.map((button) => ({ ...button, className: 'min-w-[158px]' })), className: "flex mt-8 gap-3", ...rest })) : null, image: image?.src ? jsx(ImgInner, { className: "mt-auto ml-7", image: image }) : null, children: [description ? (jsx("div", { className: "max-w-[600px] mt-2.5", children: jsx(Paragraph, { size: "text-xl-light", children: description }) })) : null, children, renderList({ version, isDotted, listItemSize }, items), tags?.length ? jsx(Tags, { tags: tags, className: "mt-5" }) : null] }) }));
     });
     function renderList({ version, isDotted, listItemSize }, items) {
         return items?.length ? (jsx(List, { items: items, isDotted: isDotted, className: "mt-2.5", listItemSize: listItemSize, itemClassName: "mb-1.5", version: version })) : null;
@@ -3547,6 +3588,7 @@
     const Blocks = {
         Accordion,
         AccordionItem,
+        CarouselLinks,
         BenefitsBlock,
         BusinessBlock,
         Bonus,
@@ -3698,7 +3740,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.31";
+    const packageVersion = "0.6.33";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;