@redneckz/wildless-cms-uni-blocks 0.6.23 → 0.6.25

package/bundle/bundle.umd.js

@@ -261,6 +261,21 @@
         }
     }
 
+    function useIntersectionObserver(observerCallback, observerOptions) {
+        const ref = useRef(null);
+        useEffect(() => {
+            if (!ref.current) {
+                return undefined;
+            }
+            const intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
+            intersectionObserver.observe(ref.current);
+            return () => {
+                intersectionObserver.disconnect();
+            };
+        }, [observerCallback, observerOptions]);
+        return ref;
+    }
+
     const changeHashOnObserve = ({ anchor, anchorClickRef }) => (entries) => {
         if (!entries?.length) {
             return;
@@ -278,23 +293,6 @@
         }
     };
 
-    const IntersectionObserverTag = JSX((props) => {
-        const { tag = 'section', observerCallback, observerOptions, className = '', anchor = null, children, role, } = props;
-        const tagRef = useRef(null);
-        useEffect(() => {
-            if (!tagRef.current) {
-                return undefined;
-            }
-            const intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
-            intersectionObserver.observe(tagRef.current);
-            return () => {
-                intersectionObserver.disconnect();
-            };
-        }, [observerCallback, observerOptions]);
-        const Tag = tag;
-        return (jsx(Tag, { ref: tagRef, className: className, id: anchor, role: role, children: children }));
-    });
-
     const THRESHOLD_ACCURACY = 100; // Decimals number (100 is for two decimals number, 0.**)
     const THRESHOLD_ARRAY_LENGTH = 18;
     const THRESHOLD_ARRAY_START_VALUE = (THRESHOLD_ACCURACY - THRESHOLD_ARRAY_LENGTH) / THRESHOLD_ACCURACY;
@@ -303,33 +301,25 @@
     };
     const BlockWrapper = JSX(({ anchor, className, children, tag = 'section', labels, role }) => {
         const Tag = tag;
-        const [shouldRenderBlock, setShouldRenderBlock] = useState(true);
+        const [isVisible, setVisible] = useState(true);
         const anchorClickRef = useRef({});
         const observerCallback = useMemo(() => changeHashOnObserve({ anchor, anchorClickRef }), [anchor]);
-        useEffect(() => {
-            const anchorClickCleanup = EventBus.inst.subscribe('anchorClick', (e) => {
-                setShouldRenderBlock(true);
-                anchorClickRef.current = e;
-            });
-            const tabCleanup = EventBus.inst.subscribe('tab', (event) => {
-                if (event.type === 'group') {
-                    const blockHasSettgins = labels?.length || anchor;
-                    setShouldRenderBlock(event.label ? !blockHasSettgins || Boolean(labels?.includes(event.label)) : true);
-                }
-                else {
-                    changeHash(event.label);
-                    setShouldRenderBlock(true);
-                }
-            });
-            return () => {
-                anchorClickCleanup();
-                tabCleanup();
-            };
-        }, []);
-        if (!shouldRenderBlock) {
-            return null;
-        }
-        return anchor ? (jsx(IntersectionObserverTag, { tag: tag, className: className, observerCallback: observerCallback, observerOptions: OBSERVER_OPTIONS, anchor: anchor, role: role, children: children })) : (jsx(Tag, { className: className, role: role, children: children }));
+        const ref = useIntersectionObserver(observerCallback, OBSERVER_OPTIONS);
+        useEffect(() => EventBus.inst.subscribe('anchorClick', (e) => {
+            setVisible(true);
+            anchorClickRef.current = e;
+        }), []);
+        useEffect(() => EventBus.inst.subscribe('tab', (event) => {
+            if (event.type === 'group') {
+                const hasSettings = labels?.length || anchor;
+                setVisible(event.label ? !hasSettings || Boolean(labels?.includes(event.label)) : true);
+            }
+            else {
+                changeHash(event.label);
+                setVisible(true);
+            }
+        }), []);
+        return isVisible ? (jsx(Tag, { className: className, role: role, ...(anchor ? { id: anchor, ref } : {}), children: children })) : null;
     });
     function getIntersectionThreshold(_, i) {
         const value = (i + 1) / THRESHOLD_ACCURACY + THRESHOLD_ARRAY_START_VALUE;
@@ -383,13 +373,14 @@
     });
 
     const svgUseStyleMap = {
-        normal: 'text-primary-main',
+        normal: '',
+        color: 'text-primary-main',
         black: 'text-black',
         white: 'text-black',
     };
-    const Icon = JSX(({ className = '', imageClassName = '', name = '', alt = `Иконка ${name}`, title = alt, iconVersion = 'normal', asSVG, ...imgProps }) => {
+    const Icon = JSX(({ className = '', imageClassName = '', name = '', alt = `Иконка ${name}`, title = alt, iconVersion = 'color', asSVG, ...imgProps }) => {
         const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
-        if (asSVG) {
+        if (asSVG && iconVersion !== 'normal') {
             return (jsx(Background, { className: className, children: jsxs("svg", { className: [
                         getSvgSize(className, imgProps.width),
                         svgUseStyleMap[iconVersion],
@@ -403,7 +394,7 @@
     const getSvgSize = (className, width) => width ? `width: ${width}px ` : 'w-full h-full';
     const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
 
-    function getIconVersion$1(image) {
+    function getIconVersion(image) {
         return typeof image === 'string' ? 'normal' : image?.iconVersion || 'normal';
     }
 
@@ -445,7 +436,7 @@
         // backwards compatibility with existing icons in usage
         const icon = typeof image === 'string' ? image : image.icon;
         if (icon || icon === '') {
-            return icon.length ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: getIconVersion$1(image), name: icon, ...iconProps })) : null;
+            return icon.length ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: getIconVersion(image), name: icon, ...iconProps })) : null;
         }
         return (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile }));
     });
@@ -455,10 +446,16 @@
     AccordionItem.childrenTypes = [];
     const FoldButton = 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 benefitsBlockStyleMap = {
-        primary: 'bg-white',
-        secondary: 'bg-primary-main',
+    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',
@@ -471,33 +468,18 @@
         primary: 'bg-main-divider text-primary-main',
         secondary: 'bg-white/30 text-black',
     };
-    const BenefitsBlock = JSX(({ className = '', title, benefitList, benefitsBlockVersion = 'primary', ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-12 flex flex-col items-center ${className} ${benefitsBlockStyleMap[benefitsBlockVersion]}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `max-w-[47rem] text-center ${benefitsTextStyleMap[benefitsBlockVersion]}`, title: title })) : null, benefitList?.length ? renderBenefits$1(benefitList, benefitsBlockVersion) : null] }));
-    });
-    const renderBenefits$1 = (benefitList, benefitsBlockVersion) => {
-        return (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep(benefitsBlockVersion)) }));
+    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 setIconVersion = (benefitIcon, benefitsBlockVersion) => {
-        if (!benefitIcon.icon || benefitIcon?.iconVersion) {
-            return benefitIcon;
-        }
-        benefitIcon.iconVersion = benefitsBlockVersion === 'secondary' ? 'white' : 'normal';
-        return benefitIcon;
-    };
-    const renderStep = (benefitsBlockVersion) => (benefit, i) => {
-        const description = (benefit?.description || undefined);
-        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[benefitsBlockVersion]}`, image: setIconVersion(benefit.icon, benefitsBlockVersion), 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[benefitsBlockVersion]}`, children: benefit.label })) : null, renderDescription$3(description, benefitsBlockVersion)] })] }, String(i)));
-    };
-    const renderDescription$3 = (description, benefitsBlockVersion) => {
-        const benefitType = description ? description?.benefitType : null;
-        if (!benefitType) {
-            return null;
-        }
-        return description ? (jsx("div", { className: `text-l-light mt-2 ${benefitsDescriptionStyleMap[benefitsBlockVersion]}`, children: benefitType === 'list'
+    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 ? description.name : 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;
@@ -644,17 +626,17 @@
     });
     function renderButton({ button, buttonClassName, index }) {
         const { icon, iconRight, version, ...rest } = button;
-        const iconVersion = version === 'secondary' ? 'normal' : 'white';
-        const leftIcon = renderButtonIcon({ icon, iconVersion });
-        const rightIcon = renderButtonIcon({ icon: iconRight, iconVersion });
+        const iconVersion = version === 'secondary' ? 'color' : 'white';
+        const leftIcon = renderButtonIcon({ ...icon, iconVersion: iconVersion });
+        const rightIcon = renderButtonIcon({ ...iconRight, iconVersion: iconVersion });
         return (jsx(Button, { className: buttonClassName, appendLeft: leftIcon, appendRight: rightIcon, version: version, ...rest }, index ? String(index) : ''));
     }
-    const renderButtonIcon = ({ icon, iconVersion }) => {
+    const renderButtonIcon = (icon) => {
         if (!icon?.icon && !icon?.src) {
             return null;
         }
         const iconWidth = icon?.size?.width ? `${icon.size.width}` : '24';
-        return jsx(ImgInner, { image: { ...icon, iconVersion: iconVersion }, width: iconWidth, height: "24", asSVG: true });
+        return jsx(ImgInner, { image: { ...icon }, width: iconWidth, height: "24", asSVG: true });
     };
 
     const Description = JSX((props) => {
@@ -1164,8 +1146,13 @@
             ? 'text-l-light text-white'
             : `text-m-light text-secondary-text`;
         const iconClassName = isActiveBtn ? '' : `text-primary-main`;
+        const iconVersion = tab?.icon?.iconVersion;
+        const activeIconStyle = isActiveBtn ? 'white' : 'normal';
         return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: `box-border relative border border-main-stroke cursor-pointer text-left border-b-0 flex hover:h-[88px]
-      ${btnClassName}`, children: [jsx(ImgInner, { className: `h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`, image: { ...tab?.icon, iconVersion: isActiveBtn ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "border-0", children: [jsx("div", { className: `${btnTitleClassName}`, children: tab?.title }), jsx("div", { className: `${btnDescClassName}`, children: tab.description })] })] }, String(i)));
+      ${btnClassName}`, children: [jsx(ImgInner, { className: `h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`, image: {
+                        ...tab?.icon,
+                        iconVersion: iconVersion ?? activeIconStyle,
+                    }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "border-0", children: [jsx("div", { className: `${btnTitleClassName}`, children: tab?.title }), jsx("div", { className: `${btnDescClassName}`, children: tab.description })] })] }, String(i)));
     }
     function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex }) {
         return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${tabsShift * 388}px)` }, className: "flex flex-col justify-end items-center h-[126px] pt-9 box-border duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap items-end gap-2", children: tabsNav.map((tab, i) => renderNavButton$2({
@@ -1257,25 +1244,25 @@
     });
     const renderColorOption = (color, i) => (jsx("span", { className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap$1[color]}` }, String(i)));
 
-    const BLUR_BLOCK_CLASSES$1 = 'absolute top-0 bottom-0 w-[84px]';
-    const CARD_FULL_VIEW_COUNT$1 = 3;
+    const BLUR_BLOCK_CLASSES$2 = 'absolute top-0 bottom-0 w-[84px]';
+    const CARD_FULL_VIEW_COUNT$2 = 3;
     const CARD_SHIFT$1 = 430;
     const Catalog = JSX(({ context, cards = [], className = '', title, description, ...rest }) => {
         const [activeCardIndex, setActiveCardIndex] = useState(0);
-        return (jsxs(BlockWrapper, { context: context, className: `bg-white relative font-sans p-[50px] overflow-hidden text-center ${className}`, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center" }), jsx("div", { className: "flex duration-1000 gap-3.5 mt-8", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT$1}px)` }, role: "list", children: cards?.length ? cards.map(renderCatalogCard(context)) : null }), renderNavButtons$1({
+        return (jsxs(BlockWrapper, { context: context, className: `bg-white relative font-sans p-[50px] overflow-hidden text-center ${className}`, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center" }), jsx("div", { className: "flex duration-1000 gap-3.5 mt-8", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT$1}px)` }, role: "list", children: cards?.length ? cards.map(renderCatalogCard(context)) : null }), renderNavButtons$2({
                     cardsCount: cards.length,
                     activeCardIndex,
                     setActiveCardIndex,
-                }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} left-0 bg-opacity-from-white` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} right-0 bg-opacity-to-white` })] }));
+                }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$2} left-0 bg-opacity-from-white` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$2} right-0 bg-opacity-to-white` })] }));
     });
     const renderCatalogCard = (context) => (card, i) => {
         return jsx(CatalogCard, { context: context, ...card }, String(i));
     };
-    const renderNavButtons$1 = ({ cardsCount, activeCardIndex, setActiveCardIndex, }) => {
+    const renderNavButtons$2 = ({ cardsCount, activeCardIndex, setActiveCardIndex, }) => {
         const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
         const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
-        const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT$1;
-        const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT$1;
+        const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT$2;
+        const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT$2;
         const showPrevButton = isUseSlider && activeCardIndex > 0;
         return renderArrows({
             handler: [handlePrevClick, handleNextClick],
@@ -1301,7 +1288,7 @@
     const COLS_LENGTH_FOR_SCROLL$1 = 2;
     const COLUMN_WIDTH$2 = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px
 
-    const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES$1} ${GRADIENT}`, role: "columnheader", children: [icon && !image?.src && (jsx(ImgInner, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })), image?.src && jsx(ImgInner, { className: "mb-[18px]", image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs-light font-medium py-[11px]", children: link.text }) }) }))] })));
+    const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES$1} ${GRADIENT}`, role: "columnheader", children: [icon && !image?.src && (jsx(ImgInner, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: getIconWithVersion(icon), width: "63", height: "63", asSVG: true })), image?.src && jsx(ImgInner, { className: "mb-[18px]", image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs-light font-medium py-[11px]", children: link.text }) }) }))] })));
 
     const carouselContainerClassesMap = {
         comparison: 'flex gap-4 duration-1000',
@@ -1460,28 +1447,30 @@
         [() => true, () => props.handleConvert(props.value)],
     ])(props)?.();
 
-    function useOutsideClick(wrapperRef, setIsOpen) {
+    function useOutsideClick(onClick) {
+        const targetRef = useRef(null);
         useEffect(() => {
-            function handleClickOutside(event) {
-                if (wrapperRef &&
-                    wrapperRef.current &&
-                    event.target instanceof HTMLElement &&
-                    !wrapperRef.current.contains(event.target)) {
-                    setIsOpen(false);
+            const handleClickOutside = (event) => {
+                if (targetRef &&
+                    targetRef.current &&
+                    event.target instanceof Node &&
+                    !targetRef.current.contains(event.target)) {
+                    onClick();
                 }
-            }
+            };
             document.addEventListener('click', handleClickOutside);
             return () => {
                 document.removeEventListener('click', handleClickOutside);
             };
-        }, []);
+        }, [onClick]);
+        return targetRef;
     }
 
     const Select = JSX(({ className = '', isBorder = true, label, options = [], value, onChange, placeholder = '' }) => {
         const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
         const [isOpen, setIsOpen] = useState(false);
-        const wrapperRef = useRef(null);
-        useOutsideClick(wrapperRef, setIsOpen);
+        const handleClickOutside = useCallback(() => setIsOpen(false), []);
+        const wrapperRef = useOutsideClick(handleClickOutside);
         const choiceOption = (option) => {
             setSelectedItem(option);
             setIsOpen(false);
@@ -1626,7 +1615,7 @@
     };
 
     const ICON_VERSION_MAP = {
-        'bg-white': 'normal',
+        'bg-white': 'color',
         transparent: 'white',
     };
     const SVG_COLOR = {
@@ -1767,7 +1756,7 @@
             ? 'bg-white hover:bg-secondary-hover'
             : 'border-solid border-[1px] border-main-divider hover:border-transparent hover:bg-primary-main';
         const isPrimary = version === 'primary';
-        return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(ImgInner, { image: icon, imageClassName: "group-hover:text-white", width: "24", height: "24", asSVG: true })) : null }));
+        return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(ImgInner, { image: getIconWithVersion(icon), imageClassName: "group-hover:text-white", width: "24", height: "24", asSVG: true })) : null }));
     });
 
     const SocialMedia = JSX(({ className = '', media, version, context, children }) => {
@@ -1803,11 +1792,6 @@
         mini: 276,
     };
 
-    const VersionStyleMap = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
-    };
-
     const LIST_DOT_STYLE_MAP = {
         primary: 'bg-primary-text',
         secondary: 'bg-white',
@@ -1846,9 +1830,9 @@
     });
 
     const GalleryCardInner = JSX(({ title, headlineSmallVersion = 'H6', description, additionalDescription, icon, items, button, version, isDotted = true, align = 'center', }) => {
-        return (jsxs("div", { className: `h-full flex flex-col justify-between ${AlignText[align]}`, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$1(icon), renderCardTitle(headlineSmallVersion, title), renderDescription$2(description, title), items?.length ? renderItems$1(items, isDotted, version) : null, renderAdditionalDescription$1(additionalDescription)] }), button?.text ? renderButton({ button, buttonClassName: 'mt-6' }) : null] }));
+        return (jsxs("div", { className: `h-full flex flex-col justify-between ${AlignText[align]}`, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$1(icon, version), renderCardTitle(headlineSmallVersion, title), renderDescription$2(description, title), items?.length ? renderItems$1(items, isDotted, version) : null, renderAdditionalDescription$1(additionalDescription)] }), button?.text ? renderButton({ button, buttonClassName: 'mt-6' }) : null] }));
     });
-    const renderImage$1 = (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, asSVG: true })) : null] }));
+    const renderImage$1 = (image, version) => (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: getIconWithVersion(image, version), asSVG: true })) : null] }));
     const renderCardTitle = (headlineSmallVersion, title) => title ? jsx("div", { className: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
     const renderDescription$2 = (description, title) => description ? jsx("div", { className: `text-l ${title ? 'mt-2' : ''}`, children: description }) : null;
     const renderAdditionalDescription$1 = (additionalDescription) => additionalDescription ? (jsx("div", { className: "text-m-light text-secondary-text mt-auto", children: additionalDescription })) : null;
@@ -1972,9 +1956,24 @@
             : undefined;
     };
 
+    const DOT_BG_COLORS_MAP = {
+        'bg-white': 'bg-primary-text',
+        transparent: 'bg-white',
+    };
+    const DropdownMenu = JSX(({ context, className, items, activeItem, bgColor }) => {
+        const { useRouter, handlerDecorator } = context;
+        const router = useRouter();
+        const [visible, setVisible] = useState(false);
+        const handleToggle = useCallback(() => setVisible((_) => !_), []);
+        const handleClickOutside = useCallback(() => setVisible(false), []);
+        const ref = useOutsideClick(handleClickOutside);
+        return (jsxs("div", { className: `${visible ? 'bg-white rounded-md shadow-blue-gray/24' : ''} ${className || ''}`, ref: ref, children: [jsx("button", { className: "flex justify-between items-center cursor-pointer h-6 ml-6", "aria-label": `${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, onClick: handleToggle, children: Array(3).fill(bgColor).map(renderDot) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`, "aria-hidden": !visible, children: items?.map((item, i) => (jsx("a", { className: `text-l-light pb-4 hover:text-primary-main ${item === activeItem ? 'text-primary-main' : ''}`, ...useLink({ router, handlerDecorator }, item), children: item.text }, item.href || String(i)))) })] }));
+    });
+    const renderDot = (bgColor, i) => (jsx("div", { className: `w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}` }, String(i)));
+
     const TEXT_CLASSES$1 = 'font-sans text-l-light';
     const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
-    const HeaderItem = JSX(({ className = '', text, href, target, active, onClick, children, bgColor = 'bg-white', dataItemName, }) => (jsxs("a", { className: `relative inline-block bg-transparent text-center no-underline ${className}`, href: href, target: target, onClick: onClick, "data-item-name": dataItemName, children: [jsx("span", { className: getTextClasses(bgColor, active), children: text || children }), active ? jsx("div", { className: getBorderClasses(bgColor, active) }) : null] })));
+    const HeaderItem = JSX(({ className = '', text, href, target, active, bgColor = 'bg-white', dataItemName, children, onClick, }) => (jsxs("a", { className: `relative inline-block bg-transparent text-center no-underline ${className}`, href: href, target: target, "data-item-name": dataItemName, onClick: onClick, children: [jsx("span", { className: getTextClasses(bgColor, active), children: text || children }), active ? jsx("div", { className: getBorderClasses(bgColor, active) }) : null] })));
     const getTextClasses = (bgColor, active = false) => {
         let classes = 'text-white';
         if (bgColor === 'bg-white') {
@@ -1989,46 +1988,34 @@
         return `${bgColor === 'bg-white' ? 'bg-primary-main' : bgColor} ${BORDER_CLASSES}`;
     };
 
-    const DOT_BG_COLORS_MAP = {
-        'bg-white': 'bg-primary-text',
-        transparent: 'bg-white',
-    };
-    const DropdownMenu = JSX((props) => {
-        const { menuVisible, toggleMenu, menuItems, bgColor, context, activeSubItem } = props;
-        const { useRouter, handlerDecorator } = context;
-        const router = useRouter();
-        return (jsxs("div", { className: `absolute w-52 -top-4 right-0 pt-4 z-40 ${menuVisible ? 'bg-white rounded-md shadow-blue-gray/24' : ''}`, children: [jsx("button", { className: "flex justify-between items-center cursor-pointer h-6 ml-6", onClick: toggleMenu, "aria-label": `${menuVisible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, children: Array(3).fill(bgColor).map(renderDot) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${menuVisible ? '' : 'hidden'}`, "aria-hidden": !menuVisible, children: renderDotsSubMenuItems({ menuItems, router, handlerDecorator, activeSubItem }) })] }));
+    const HeaderSubMenuItem = JSX(({ context, className, active, bgColor, observerOptions, onVisibilityChange, children, ...linkProps }) => {
+        const { handlerDecorator } = context;
+        const router = context.useRouter();
+        const observerCallback = useCallback((entries) => {
+            if (!entries.length || !onVisibilityChange) {
+                return;
+            }
+            // Assumption about entries order (by time)
+            const entry = entries[entries.length - 1];
+            onVisibilityChange(entry.isIntersecting);
+        }, [onVisibilityChange]);
+        const ref = useIntersectionObserver(observerCallback, observerOptions);
+        return (jsx("span", { ref: ref, children: jsx(HeaderItem, { className: className, active: active, bgColor: bgColor, ...useLink({ router, handlerDecorator }, linkProps), children: children }) }));
     });
-    const renderDotsSubMenuItems = ({ menuItems, router, handlerDecorator, activeSubItem, }) => {
-        const isActive = (item) => item === activeSubItem;
-        return menuItems?.map(({ text, ...rest }) => (jsx("a", { ...useLink({ router, handlerDecorator }, rest), className: `text-l-light pb-4 hover:text-primary-main ${isActive(rest) ? 'text-primary-main' : ''}`, children: text }, rest.href)));
-    };
-    const renderDot = (bgColor, i) => (jsx("div", { className: `w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}` }, String(i)));
 
     const HeaderSubMenu = JSX(({ context, subItems = [], bgColor }) => {
-        const { handlerDecorator } = context;
         const router = context.useRouter();
-        const subItemsListRef = useRef(null);
-        const [menuVisible, setMenuVisible] = useState(false);
+        const activeSubItem = findActiveSubItem(router)(subItems);
         const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
         const dropDownMenuItems = subItems.slice(visibleItemsCount);
+        const subItemsListRef = useRef(null);
         const observerOptions = useMemo(() => ({ threshold: 1, root: subItemsListRef.current }), [subItemsListRef.current]);
-        const observerCallbacks = useMemo(() => subItems.map((_, index) => (entries) => {
-            if (!entries.length) {
-                return;
-            }
-            // Assumption about sorting entries by time
-            const entry = entries[entries.length - 1];
-            if (entry.isIntersecting) {
-                setVisibleItemsCount(handleIntersectionActivation(index));
-            }
-            else {
-                setVisibleItemsCount(handleIntersectionDeactivation(index));
-            }
+        const subItemsVisibilityHandlers = useMemo(() => subItems.map((_, index) => (isIntersecting) => {
+            setVisibleItemsCount(isIntersecting
+                ? handleIntersectionActivation(index)
+                : handleIntersectionDeactivation(index));
         }), [subItems]);
-        const activeSubItem = findActiveSubItem(router)(subItems);
-        const toggleMenu = () => setMenuVisible(!menuVisible);
-        return (jsxs("nav", { className: "relative mt-6", children: [jsx("div", { ref: subItemsListRef, className: "overflow-hidden whitespace-nowrap mr-52 pb-3", children: subItems.map((_, i) => (jsx(IntersectionObserverTag, { tag: "span", observerCallback: observerCallbacks[i], observerOptions: observerOptions, children: jsx(HeaderItem, { className: `mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`, active: _ === activeSubItem, ...useLink({ router, handlerDecorator }, _), bgColor: bgColor }) }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { context: context, activeSubItem: activeSubItem, menuVisible: menuVisible, toggleMenu: toggleMenu, menuItems: dropDownMenuItems, bgColor: bgColor })) : null] }));
+        return (jsxs("nav", { className: "relative mt-6", children: [jsx("div", { ref: subItemsListRef, className: "overflow-hidden whitespace-nowrap mr-52 pb-3", children: subItems.map((_, i) => (jsx(HeaderSubMenuItem, { context: context, className: `mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`, active: _ === activeSubItem, bgColor: bgColor, observerOptions: observerOptions, onVisibilityChange: subItemsVisibilityHandlers[i], ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { context: context, className: "absolute w-52 -top-4 right-0 pt-4 z-40", items: dropDownMenuItems, activeItem: activeSubItem, bgColor: bgColor })) : null] }));
     });
     const handleIntersectionActivation = (index) => (prev) => Math.max(prev, index + 1);
     const handleIntersectionDeactivation = (index) => (prev) => Math.min(prev, index);
@@ -2037,19 +2024,20 @@
         'bg-white': 'bg-main-divider',
         transparent: 'bg-main-divider opacity-30',
     };
-    const Header = JSX(({ className = '', defaultLocation = 'Москва', showSubMenu = true, bgColor = 'bg-white', context, topItems, logo, page, ...rest }) => {
+    const Header = JSX(({ bgColor = 'bg-white', className = '', context, defaultLocation = 'Москва', logo, page, showSubMenu = true, ...rest }) => {
         const router = context.useRouter();
         const fallback = page?.fallback;
-        const sitemap = useSitemap(fallback);
         const { handlerDecorator } = context;
-        const mergedItems = mergeTopItems(sitemap.topItems, topItems);
-        const [firstPortal] = mergedItems;
-        const activeTopItem = showSubMenu
-            ? mergedItems.find(isTopItemActive(router)) || firstPortal // Если по слагу невозможно понять к какому подпорталу этот слаг относиться, то выбираем первый подпортал.
-            : null;
-        const topMenu = mergedItems.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ...useLink({ router, handlerDecorator }, _), "aria-label": _.text, bgColor: bgColor }, String(i))));
+        const { topItems } = useSitemap(fallback);
+        const activeTopItem = showSubMenu ? getActiveItem(topItems, router) : null;
+        const topMenu = topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ...useLink({ router, handlerDecorator }, _), "aria-label": _.text, bgColor: bgColor }, String(i))));
         return (jsx(BlockWrapper, { tag: "header", context: context, className: `pt-6 px-20 ${bgColor} ${className} ${showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5'}`, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { className: "ml-auto", defaultLocation: defaultLocation, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-[1px] ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { context: context, subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
     });
+    const getActiveItem = (topItems, router) => {
+        const [firstPortal] = topItems || [];
+        // Если по слагу невозможно понять к какому подпорталу этот слаг относиться, то выбираем первый подпортал.
+        return topItems?.find(isTopItemActive(router)) || firstPortal;
+    };
 
     const InsuranceAmountBlockInner = JSX(({ className = '', cards = [], button }) => {
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
@@ -2177,7 +2165,7 @@
 
     const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
         const { text, fileSize, ...linkProps } = doc;
-        return (jsxs("a", { className: className, role: "link", ...linkProps, children: [icon ? (jsx(ImgInner, { className: iconClassName, image: icon, width: "24px", height: "24px", asSVG: true })) : null, text ? (jsxs("span", { className: textClassName, children: [text, jsx("span", { className: suffixClassName, children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] }));
+        return (jsxs("a", { className: className, role: "link", ...linkProps, children: [icon ? (jsx(ImgInner, { className: iconClassName, image: getIconWithVersion(icon), width: "24px", height: "24px", asSVG: true })) : null, text ? (jsxs("span", { className: textClassName, children: [text, jsx("span", { className: suffixClassName, children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] }));
     });
     const formatSuffix = (ext, fileSize) => {
         const prefix = ext || fileSize ? ',' : '';
@@ -2644,7 +2632,7 @@
     const OfficeServicesBlock = JSX(({ className = '', context, title, servicesList, anchor = '', ...rest }) => {
         return (jsxs(BlockWrapper, { context: context, id: anchor, className: `font-sans bg-white p-8 flex flex-col ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h5", className: "mb-5", title: title }) : null, servicesList?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: servicesList.map(renderListItems) })) : null] }));
     });
-    const renderListItems = (itemList, i) => (jsxs("li", { className: "flex mb-5 last:mb-0 list-none", children: [itemList.icon ? (jsx(ImgInner, { className: "mr-3 min-w-6 min-h-6 w-6 h-6", width: "24", height: "24", asSVG: true, image: itemList.icon })) : null, itemList.label ? jsx("span", { className: "text-l-light", children: itemList.label }) : null] }, `list_item_${String(i)}`));
+    const renderListItems = (itemList, i) => (jsxs("li", { className: "flex mb-5 last:mb-0 list-none", children: [itemList.icon ? (jsx(ImgInner, { className: "mr-3 min-w-6 min-h-6 w-6 h-6", width: "24", height: "24", asSVG: true, image: getIconWithVersion(itemList.icon) })) : null, itemList.label ? jsx("span", { className: "text-l-light", children: itemList.label }) : null] }, `list_item_${String(i)}`));
 
     const OtherProducts = JSX(({ context, className = '', children, ...rest }) => (jsx(BlockWrapper, { context: context, className: `font-sans text-primary-text ${className}`, ...rest, children: children })));
     OtherProducts.childrenTypes = ['OtherProductsItem'];
@@ -2698,12 +2686,11 @@
     };
     const BenefitItem = JSX((props) => {
         const { className = '', icon, label, description, version = 'primary', benefitsVersion = 'normal', } = props;
-        const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
         const listItemAlign = description ? 'items-start' : 'items-center';
-        const iconVersion = getIconVersion(isIconWhite, icon);
-        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: renderBenefitIconBgStyle(version, benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: { ...icon, iconVersion }, asSVG: true }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? jsx("div", { className: `text-h6 ${titleStyleMap[version]}`, children: label }) : null, description ? (jsx("div", { className: `text-m-light ${descStyleMap[version]}`, children: description })) : null] })] }));
+        const calcVersion = benefitsVersion === 'white' ? 'secondary' : 'primary';
+        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(version, benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: getIconWithVersion(icon, calcVersion), asSVG: true }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? jsx("div", { className: `text-h6 ${titleStyleMap[version]}`, children: label }) : null, description ? (jsx("div", { className: `text-m-light ${descStyleMap[version]}`, children: description })) : null] })] }));
     });
-    function renderBenefitIconBgStyle(version, benefitsVersion) {
+    function getBenefitIconBgStyle(version, benefitsVersion) {
         let bgColorStyle = 'bg-primary-main text-black';
         if (version === 'secondary') {
             bgColorStyle = 'bg-white/30 text-black';
@@ -2713,20 +2700,19 @@
         }
         return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
     }
-    const getIconVersion = (isIconWhite, icon) => icon?.iconVersion || isIconWhite ? 'white' : 'normal';
 
     const PictureText = JSX(({ className = '', context, title, description, image, benefits, version = 'primary', sum, monthLimit, directionRight = false, ...rest }) => {
         return (jsxs(BlockWrapper, { className: `relative font-sans py-12 px-24 ${VersionStyleMap[version]} ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, align: "center" }), 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))] })] })] }));
     });
     const renderBenefit$2 = (version) => (benefit, i) => (jsx(BenefitItem, { icon: benefit.icon, label: benefit.label, description: benefit.description, version: version }, String(i)));
     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.isFinite(sum) ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null, Number.isFinite(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 widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
-        return (jsxs("div", { className: `flex justify-between items-center gap-2 w-full ${widthStyle}`, children: [jsx("span", { className: "text-secondary-text text-l-light", children: title }), jsxs("span", { className: "text-primary-main text-h6", children: [addSpacesBetweenNumbers(sum), " \u20BD"] })] }));
+        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: [addSpacesBetweenNumbers(sum), " \u20BD"] })] }));
     }
 
     function getTileHeadingType(className = '') {
@@ -2765,20 +2751,11 @@
     const renderShimmerItem = (width, index) => (jsx("div", { style: { width: `${width || 100}%` }, className: "h-4 mt-2 bg-secondary-light" }, String(index)));
     const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
 
-    const Breadcrumb = JSX(({ text, href, target, onClick, className = '', children }) => {
-        if (href) {
-            return (jsx("a", { className: `no-underline ${className}`, href: href, target: target, onClick: onClick, children: jsx("span", { className: className, children: text || children }) }));
-        }
-        else {
-            return jsx("span", { className: className, children: text || children });
-        }
-    });
+    const Breadcrumb = JSX(({ text, href, target, onClick, className = '', children }) => href ? (jsx("a", { className: `no-underline ${className}`, href: href, target: target, onClick: onClick, children: jsx("span", { className: className, children: text || children }) })) : (jsx("span", { className: className, children: text || children })));
 
-    const renderBenefit$1 = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => {
-        return (jsx(BenefitItem, { icon: icon, label: label, description: description, version: version, benefitsVersion: benefitsVersion }, String(i)));
-    };
+    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 = '', context, title, headlineVersion = 'L', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
+    const ProductBlockInner = JSX(({ className = '', context, title, headlineVersion = 'L', description, benefits, benefitsVersion, buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
         const benefitsCount = benefits?.filter((_) => _.label)?.length;
         const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCount);
         return (jsxs("div", { className: `flex grow justify-between items-stretch h-full ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { context: context, title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion, align: "left" }), jsxs(BaseTile, { context: context, buttons: getButtons(context, buttons), 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 })] }));
@@ -2809,6 +2786,11 @@
                     : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs-light mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbsStyleMap[version]}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { ...useLink({ router, handlerDecorator }, { className: breadcrumbsStyleMap[version], ...breadcrumb }) }, String(i))))) })) : null, jsx(ProductBlockInner, { context: context, version: version, ...otherProps })] }));
     });
 
+    const BorderVersionStyleMap = {
+        primary: 'border-main-stroke',
+        secondary: 'border-white/50',
+    };
+
     const productBlockStyleMap = {
         primary: { title: 'text-secondary-text', text: 'text-secondary-text' },
         secondary: { title: 'text-white', text: 'text-white/80' },
@@ -2843,9 +2825,8 @@
         const btnDescClassName = isActiveBtn
             ? 'text-secondary-text text-l-light'
             : `text-m-light ${productBlockStyleMap[version].text}`;
-        const additionalBorder = version === 'secondary' ? 'border-white/50' : 'border-black/50';
         return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `box-border relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0
-        ${btnClassName} ${additionalBorder}
+        ${btnClassName} ${BorderVersionStyleMap[version]}
       `, children: jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `last:pb-0 ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text  ${btnDescClassName}`, children: slide?.description })] }) }, String(i)));
     }
 
@@ -2903,29 +2884,29 @@
         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, { context: context, 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, context: context })) : null] }) }) }));
     });
 
-    const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
-    const CARD_FULL_VIEW_COUNT = 2;
+    const BLUR_BLOCK_CLASSES$1 = 'absolute top-0 bottom-0 w-[84px]';
+    const CARD_FULL_VIEW_COUNT$1 = 2;
     const CARD_SHIFT = 525;
-    const Recommendation = JSX(({ context, recommendations = [], className = '', title, version, ...rest }) => {
+    const Recommendation = JSX(({ context, recommendations = [], className = '', title, version = 'primary', ...rest }) => {
         const [activeCardIndex, setActiveCardIndex] = useState(0);
-        const blockClassName = version === 'secondary' ? 'bg-primary-main text-white' : 'bg-white text-primary-text';
-        const cardClassName = version === 'secondary' ? 'border-white/50' : 'border-main-stroke';
-        return (jsxs(BlockWrapper, { context: context, className: `relative font-sans p-9 overflow-hidden text-center ${blockClassName} ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-6", title: title }) : null, jsxs("div", { children: [jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }, role: "list", children: recommendations?.length
-                                ? recommendations.map(renderRecommendationCard(context, cardClassName, version))
-                                : null }), renderNavButtons({
+        return (jsxs(BlockWrapper, { context: context, className: `relative font-sans p-9 overflow-hidden text-center 
+          ${VersionStyleMap[version]} 
+          ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-6", title: title }) : null, jsxs("div", { children: [jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }, role: "list", children: recommendations?.length
+                                ? recommendations.map(renderRecommendationCard(context, BorderVersionStyleMap[version], version))
+                                : null }), renderNavButtons$1({
                             cardsCount: recommendations.length,
                             activeCardIndex,
                             setActiveCardIndex,
-                        })] }), jsx("div", { className: `${BLUR_BLOCK_CLASSES} left-0 ${version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'}` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES} right-0 ${version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'}` })] }));
+                        })] }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} left-0 ${version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'}` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} right-0 ${version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'}` })] }));
     });
     const renderRecommendationCard = (context, className, version) => (card, i) => {
         return (jsx(RecommendationCard, { context: context, ...card, version: version, className: className }, String(i)));
     };
-    const renderNavButtons = ({ cardsCount, activeCardIndex, setActiveCardIndex, }) => {
+    const renderNavButtons$1 = ({ cardsCount, activeCardIndex, setActiveCardIndex, }) => {
         const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
         const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
-        const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
-        const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
+        const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT$1;
+        const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT$1;
         const showPrevButton = isUseSlider && activeCardIndex > 0;
         return (jsx("div", { children: renderArrows({
                 handler: [handlePrevClick, handleNextClick],
@@ -3132,7 +3113,7 @@
                 styleMap.background,
                 styleMap.title,
                 className,
-            ].join(' '), context: context, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", className: "max-w-[752px] text-center", title: title })) : null, steps?.length ? (jsxs("div", { className: `box-border ${titleMargin}`, children: [jsx("div", { className: `flex items-center ${paddingX}`, children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${lineOpacity}` }))(steps.map(renderStepIcon(styleMap))) }), jsx("div", { className: `flex justify-between mt-4 ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepContent({
+            ].join(' '), context: context, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", className: "max-w-[752px] text-center", title: title })) : null, steps?.length ? (jsxs("div", { className: `box-border ${titleMargin}`, children: [jsx("div", { className: `flex items-center ${paddingX}`, children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${lineOpacity}` }))(steps.map(renderStepIcon(styleMap, version))) }), jsx("div", { className: `flex justify-between mt-4 ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepContent({
                                 styleMap,
                                 isMainButton: Boolean(button?.text),
                                 version,
@@ -3140,9 +3121,9 @@
                                 handlerDecorator,
                             })) })] })) : null, button?.text ? (jsx(Button, { className: "mt-8 min-w-[240px]", version: "primary", ...useLink({ router, handlerDecorator }, button) })) : null] }));
     });
-    const renderStepIcon = (styleMap) => ({ icon }, i) => {
+    const renderStepIcon = (styleMap, version) => ({ icon }, i) => {
         return (jsx("div", { className: "flex flex-col items-center text-center", children: jsx("div", { className: `h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center
-            ${styleMap.iconBackground} ${styleMap.title}`, children: checkIsIconRenderable(icon) ? (jsx(ImgInner, { image: icon, width: "48", height: "48", asSVG: true })) : (jsx("span", { className: `text-h4 ${styleMap.iconText}`, children: i + 1 })) }) }, String(i)));
+            ${styleMap.iconBackground} ${styleMap.title}`, children: checkIsIconRenderable(icon) ? (jsx(ImgInner, { image: getIconWithVersion(icon || {}, version), width: "48", height: "48", asSVG: true })) : (jsx("span", { className: `text-h4 ${styleMap.iconText}`, children: i + 1 })) }) }, String(i)));
     };
 
     function assertUnreachable(x) {
@@ -3389,7 +3370,7 @@
         const [tableInner, setTableInner] = useState(undefined);
         const [openTableInnerIdx, setOpenTableInnerIdx] = useState(undefined);
         const onHideContentClick = () => setTableInner(undefined);
-        return (jsxs(TariffsTableRowContainer, { context: context, onHideContentClick: onHideContentClick, tableInner: tableInner, children: [jsx("div", { className: `text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`, children: jsxs("div", { className: "flex items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(ImgInner, { className: "mr-[14px] max-w-6 max-h-6", image: header.icon, width: "24px", height: "24px", asSVG: true })) : null, header?.title ? jsx("div", { className: "text-m-light", children: header?.title }) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, rowIdx: rowIdx, cellIdx: i, context: context, setTableInner: setTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: setOpenTableInnerIdx }, String(i)))) })) : null] }));
+        return (jsxs(TariffsTableRowContainer, { context: context, onHideContentClick: onHideContentClick, tableInner: tableInner, children: [jsx("div", { className: `text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`, children: jsxs("div", { className: "flex items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(ImgInner, { className: "mr-[14px] max-w-6 max-h-6", image: getIconWithVersion(header.icon), width: "24px", height: "24px", asSVG: true })) : null, header?.title ? jsx("div", { className: "text-m-light", children: header?.title }) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, rowIdx: rowIdx, cellIdx: i, context: context, setTableInner: setTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: setOpenTableInnerIdx }, String(i)))) })) : null] }));
     });
 
     const TariffsTable = JSX(({ className = '', context, title, description, rowHeaders, tariffsColumns: columns, hiddenRowsNum = 0, ...rest }) => {
@@ -3454,9 +3435,9 @@
 
     const Tags = JSX((props) => {
         const { tags, className = '' } = props;
-        return tags?.length ? (jsx("div", { className: `flex flex-wrap gap-2 ${className}`, children: tags.map((_, i) => renderTag(_, String(i))) })) : null;
+        return tags?.length ? (jsx("div", { className: `flex flex-wrap gap-2 ${className}`, children: tags.map(renderTag) })) : null;
     });
-    const renderTag = (tag, key) => (jsx("span", { className: "text-m-light py-2 px-2.5 border-solid border rounded-md border-color-stroke", children: tag }, key));
+    const renderTag = (tag, key) => (jsx("span", { className: "text-m-light py-2 px-2.5 border-solid border rounded-md border-color-stroke", children: tag }, String(key)));
 
     const Tile = JSX((props) => {
         const { context, title, headingType = 'h3', description, items, children, buttons, image, isDotted = true, listItemSize = 'M', className = '', version = 'primary', tags, ...rest } = props;
@@ -3467,6 +3448,51 @@
         return items?.length ? (jsx(List, { items: items, isDotted: isDotted, className: "mt-2.5", listItemSize: listItemSize, itemClassName: "mb-1.5", version: version })) : null;
     }
 
+    const getItemListFontSize = (colValue) => (colValue === 'single' ? 'text-h6' : 'text-l');
+    const cardColumnsModeStyleMap = {
+        double: 'flex gap-y-2 gap-x-10 flex-wrap',
+        single: 'flex gap-y-2 flex-col',
+    };
+    const InvestmentGalleryCard = JSX(({ className = '', columnsMode = 'double', context, description, additionalDescription, image, cardList, title, version = 'primary', }) => {
+        const tileTitle = title ? (jsx(Heading, { headingType: "h4", 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-9 min-w-[697px] min-h-[319px]
+          ${BorderVersionStyleMap[version]}
+          ${className}`, role: "listitem", children: jsx(BaseTile, { context: context, 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] }) }) }));
+    });
+    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))));
+
+    const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
+    const CARD_FULL_VIEW_COUNT = 1;
+    const InvestmentGallery = JSX(({ context, cards = [], className = '', title, version = 'primary', ...rest }) => {
+        const [activeCardIndex, setActiveCardIndex] = useState(0);
+        const cardWidth = 525;
+        return (jsxs(BlockWrapper, { context: context, className: `relative font-sans p-9 overflow-hidden text-center 
+        ${VersionStyleMap[version]} 
+        ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-9", title: title }) : null, jsxs("div", { children: [jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * cardWidth}px)` }, role: "list", children: cards?.length
+                                ? cards.map(renderInvestmentGalleryCard(context, className, version))
+                                : null }), renderNavButtons({
+                            cardsCount: cards.length,
+                            activeCardIndex,
+                            setActiveCardIndex,
+                        })] }), jsx("div", { className: `${BLUR_BLOCK_CLASSES} left-0 ${version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'}` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES} right-0 ${version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'}` })] }));
+    });
+    const renderInvestmentGalleryCard = (context, className, version) => (card, i) => (jsx(InvestmentGalleryCard, { className: className, context: context, version: version, ...card }, String(i)));
+    const renderNavButtons = ({ cardsCount, activeCardIndex, setActiveCardIndex }) => {
+        const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
+        const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
+        const showPrevButton = isUseSlider && activeCardIndex > 0;
+        const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+        const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+        return (jsx("div", { children: renderArrows({
+                handler: [handlePrevClick, handleNextClick],
+                isShown: [showPrevButton, showNextButton],
+                btnClass: ['left-8', 'right-8'],
+                className: 'top-1/2 mt-3',
+            }) }));
+    };
+
     const Blocks = {
         Accordion,
         AccordionItem,
@@ -3507,6 +3533,7 @@
         SafeDepositRental,
         Tabs,
         ErrorBlock,
+        InvestmentGallery,
     };
 
     function style2className(style) {
@@ -3625,7 +3652,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", context: context }, "LikeControl") }));
     }
 
-    const packageVersion = process?.env?.UNI_BLOCKS_VERSION;
+    const packageVersion = "0.6.25";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;