@redneckz/wildless-cms-uni-blocks 0.8.24 → 0.8.25

package/bundle/bundle.umd.js

@@ -388,132 +388,8 @@
 
     const Paragraph = JSX(({ children, ...style }) => (jsx("p", { className: ['font-sans', ...Object.values(style)].join(' '), 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, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 mb-1 last:mb-0 ${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: renderChildren(rest) })] })));
-    Accordion.childrenTypes = ['AccordionItem'];
-
-    const Foldable = JSX(({ className = '', isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
-        const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
-        const onToggle = useCallback(() => {
-            setIsUnfolded((_) => !_);
-        }, []);
-        const sectionNode = renderFoldableSection({ isUnfolded, onToggle });
-        const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
-        return isFoldButtonOnTop ? (jsxs("div", { className: className, children: [buttonNode, sectionNode] })) : (jsxs("div", { className: className, children: [sectionNode, buttonNode] }));
-    });
-
-    const FoldableSection = JSX(({ className = '', isUnfolded, children }) => {
-        const containerRef = useRef(null);
-        useEffect(() => {
-            if (containerRef.current) {
-                containerRef.current.style.maxHeight = isUnfolded
-                    ? `${containerRef.current.scrollHeight}px`
-                    : '';
-            }
-        }, [isUnfolded, children?.length]);
-        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} ${className}`, children: children }));
-    });
-
-    function useRouter() {
-        return useRouter._impl();
-    }
-    useRouter._impl = () => ({
-        href: globalThis.location?.href || '/',
-        pathname: globalThis.location?.pathname || '/',
-        query: {},
-        push: () => {
-            // Do nothing
-        },
-        replace: () => {
-            // Do nothing
-        },
-    });
-    useRouter.setup = (impl) => {
-        useRouter._impl = impl;
-    };
-
-    const dirname = (path) => path?.split('/').slice(0, -1).join('/');
-
-    const isURL = (href) => Boolean(href?.includes(':'));
-    const isLocalURL = (href, target) => Boolean(href && !isURL(href) && (!target || target === '_self'));
-    const isHash = (href) => Boolean(href?.startsWith('#'));
-    const withoutQuery = (href) => (href || '').replace(/\?.*/, '').replace(/\/$/, '');
-    const joinPath = (...path) => path.filter(Boolean).join('/').replace(/\/+/g, '/');
-
-    var url = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        isURL: isURL,
-        isLocalURL: isLocalURL,
-        isHash: isHash,
-        withoutQuery: withoutQuery,
-        joinPath: joinPath
-    });
-
-    const adjustHref = (router) => (href) => {
-        if (!href || isURL(href) || (projectSettings.CDN && href.startsWith(projectSettings.CDN))) {
-            return href;
-        }
-        const isRelativeToBase = href.startsWith('/');
-        return joinPath(projectSettings.BASE_PATH, isRelativeToBase ? '/' : dirname(router.pathname), href);
-    };
-
-    const svgUseStyleMap = {
-        normal: '',
-        color: 'text-primary-main',
-        black: 'text-black',
-        white: 'text-black',
-    };
-    const Icon = JSX(({ className = '', imageClassName = '', name = '', alt = `Иконка ${name}`, title = alt, iconVersion = 'color', asSVG, ...imgProps }) => {
-        const router = useRouter();
-        const href = adjustHref(router)(joinPath(projectSettings.CDN, '/icons', `${name}.svg`));
-        if (asSVG && iconVersion !== 'normal') {
-            return (jsx(Background, { className: className, children: jsxs("svg", { className: style(getSvgSize(imgProps.width), svgUseStyleMap[iconVersion], iconVersion === 'white' ? 'invert' : '', imageClassName), ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }) }));
-        }
-        return (jsx("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
-    });
-    const getSvgSize = (width) => (width ? '' : 'w-full h-full');
-    const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
-
-    const sourcesComparator = (a, b) => a?.media && b?.media ? a.media - b.media : 0;
-    const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', isMobile = false, pathPrefix }) => {
-        const router = useRouter();
-        const pictureStyles = isMobile ? 'flex' : 'flex-none';
-        return (jsxs("picture", { className: `${pictureStyles} ${className}`, children: [image?.sources?.length
-                    ? image.sources
-                        .filter((_) => _?.src)
-                        .sort(sourcesComparator)
-                        .map(({ src, format, media }, index) => (jsx("source", { srcSet: adjustSrc(router, pathPrefix)(src), type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...image.size }, `${index}_${src}`)))
-                    : null, image?.src
-                    ? renderImg({ ...image, src: adjustSrc(router, pathPrefix)(image.src) }, imageClassName, isMobile)
-                    : null] }));
-    });
-    const renderImg = (image, imageClassName = '', isMobile = false) => {
-        const style = {
-            width: image.size?.width ? `${image.size?.width}px` : '100%',
-            height: image.size?.height ? `${image.size?.height}px` : '100%',
-        };
-        const title = image.title || '';
-        const alt = image.alt || image.title;
-        const imgStyle = isMobile ? 'm-auto' : 'm-0';
-        return (jsx("img", { src: image.src, className: `${imgStyle} ${imageClassName}`, alt: alt, title: title, style: style, ...image.size }));
-    };
-    const adjustSrc = (router, pathPrefix) => (src) => src && !isURL(src) ? adjustHref(router)(joinPath(pathPrefix, src)) : src;
-    const formatToMimeType = (format) => format ? `image/${String(format)}` : undefined;
-
-    const ImgInner = JSX(({ className = '', image, imageClassName = '', isMobile, pathPrefix, ...iconProps }) => {
-        if (!image?.src && !image?.icon) {
-            return null;
-        }
-        return image.icon ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: image?.iconVersion || 'normal', name: image.icon, ...iconProps })) : (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile, pathPrefix: pathPrefix }));
-    });
-
-    const Text = JSX(({ children, ...style }) => (jsx("span", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
-
-    const icons$1 = ['PlusIcon', 'MinusIcon'];
-    const AccordionItem = JSX(({ className = '', label = '', isExpanded, ...rest }) => (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: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(FoldButton, { label: label, icon: icons$1[Number(isUnfolded)], onClick: onToggle })) }) })));
-    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 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 Accordion = JSX(({ className = '', title, accordionAlignTitle = 'center', description, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 mb-1 last:mb-0 ${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("div", { className: "list-none m-0 p-0", children: renderChildren(rest) })] })));
+    Accordion.childrenTypes = ['Accordion'];
 
     function CorporateLeadAPI() {
         async function send(body) {
@@ -659,6 +535,31 @@
         },
     ];
 
+    const dirname = (path) => path?.split('/').slice(0, -1).join('/');
+
+    const isURL = (href) => Boolean(href?.includes(':'));
+    const isLocalURL = (href, target) => Boolean(href && !isURL(href) && (!target || target === '_self'));
+    const isHash = (href) => Boolean(href?.startsWith('#'));
+    const withoutQuery = (href) => (href || '').replace(/\?.*/, '').replace(/\/$/, '');
+    const joinPath = (...path) => path.filter(Boolean).join('/').replace(/\/+/g, '/');
+
+    var url = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        isURL: isURL,
+        isLocalURL: isLocalURL,
+        isHash: isHash,
+        withoutQuery: withoutQuery,
+        joinPath: joinPath
+    });
+
+    const adjustHref = (router) => (href) => {
+        if (!href || isURL(href) || (projectSettings.CDN && href.startsWith(projectSettings.CDN))) {
+            return href;
+        }
+        const isRelativeToBase = href.startsWith('/');
+        return joinPath(projectSettings.BASE_PATH, isRelativeToBase ? '/' : dirname(router.pathname), href);
+    };
+
     /* eslint-disable @typescript-eslint/ban-types */
     const handlerDecorator = (handler, targetContent) => {
         return handlerDecorator._impl(handler, targetContent);
@@ -668,6 +569,24 @@
         handlerDecorator._impl = impl;
     };
 
+    function useRouter() {
+        return useRouter._impl();
+    }
+    useRouter._impl = () => ({
+        href: globalThis.location?.href || '/',
+        pathname: globalThis.location?.pathname || '/',
+        query: {},
+        push: () => {
+            // Do nothing
+        },
+        replace: () => {
+            // Do nothing
+        },
+    });
+    useRouter.setup = (impl) => {
+        useRouter._impl = impl;
+    };
+
     function useLink(isRemote = false) {
         const router = useRouter();
         return (props) => ({
@@ -763,6 +682,8 @@
     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 Text = JSX(({ children, ...style }) => (jsx("span", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
+
     const Footnote = JSX(({ link }) => (jsxs(Paragraph, { size: "text-s-light", color: "text-secondary-text", children: [jsx(Text, { children: "\u041D\u0430\u0436\u0438\u043C\u0430\u044F \u043A\u043D\u043E\u043F\u043A\u0443 \u0432\u044B \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0435\u0442\u0435 \u0441\u043E\u0433\u043B\u0430\u0441\u0438\u0435 \u0441 " }), link ? (jsx(Button, { href: link.href, ariaLabel: "\u0443\u0441\u043B\u043E\u0432\u0438\u044F \u043F\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043D\u043D\u044B\u0445", target: link.target, className: "text-primary-main", children: jsx(Text, { children: link.text }) })) : null] })));
 
     const normalizeSelectedRegion$1 = (selectedRegion, regions) => !selectedRegion && regions?.length && regions[0]?.code ? regions[0].code : selectedRegion;
@@ -786,6 +707,26 @@
         return targetRef;
     }
 
+    const svgUseStyleMap = {
+        normal: '',
+        color: 'text-primary-main',
+        black: 'text-black',
+        white: 'text-black',
+    };
+    const Icon = JSX(({ className = '', imageClassName = '', name = '', alt = `Иконка ${name}`, title = alt, iconVersion = 'color', asSVG, ...imgProps }) => {
+        const router = useRouter();
+        const href = adjustHref(router)(joinPath(projectSettings.CDN, '/icons', `${name}.svg`));
+        if (asSVG && iconVersion !== 'normal') {
+            return (jsx(Background, { className: className, children: jsxs("svg", { className: style(getSvgSize(imgProps.width), svgUseStyleMap[iconVersion], iconVersion === 'white' ? 'invert' : '', imageClassName), ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }) }));
+        }
+        if (!className.includes('h-')) {
+            imgProps['style'] = { height: `${imgProps.height}px` };
+        }
+        return (jsx("img", { className: className, src: href, alt: alt, title: title, "aria-hidden": "true", ...imgProps }));
+    });
+    const getSvgSize = (width) => (width ? '' : 'w-full h-full');
+    const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
+
     const Select = JSX(({ className = '', isBorder = true, label, options = [], value, onChange, placeholder = '' }) => {
         const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
         const [isOpen, setIsOpen] = useState(false);
@@ -1065,6 +1006,39 @@
     });
     const renderDataOrganization$1 = ({ name, phone, handleChange }) => (jsxs("div", { className: "max-w-[560px] m-auto", children: [jsx(Input, { className: "shrink-0 text-l w-full mb-5", type: "text", "aria-label": "\u0418\u043C\u044F", label: "\u0418\u043C\u044F", value: name, onChange: (value) => handleChange({ name: value }) }), jsx(Input, { className: "shrink-0 text-l w-full mb-5", type: "text", "aria-label": "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", value: phone, onChange: (value) => handleChange({ phone: value }) })] }));
 
+    const sourcesComparator = (a, b) => a?.media && b?.media ? a.media - b.media : 0;
+    const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', isMobile = false, pathPrefix }) => {
+        const router = useRouter();
+        const pictureStyles = isMobile ? 'flex' : 'flex-none';
+        return (jsxs("picture", { className: `${pictureStyles} ${className}`, children: [image?.sources?.length
+                    ? image.sources
+                        .filter((_) => _?.src)
+                        .sort(sourcesComparator)
+                        .map(({ src, format, media }, index) => (jsx("source", { srcSet: adjustSrc(router, pathPrefix)(src), type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...image.size }, `${index}_${src}`)))
+                    : null, image?.src
+                    ? renderImg({ ...image, src: adjustSrc(router, pathPrefix)(image.src) }, imageClassName, isMobile)
+                    : null] }));
+    });
+    const renderImg = (image, imageClassName = '', isMobile = false) => {
+        const style = {
+            width: image.size?.width ? `${image.size?.width}px` : '100%',
+            height: image.size?.height ? `${image.size?.height}px` : '100%',
+        };
+        const title = image.title || '';
+        const alt = image.alt || image.title;
+        const imgStyle = isMobile ? 'm-auto' : 'm-0';
+        return (jsx("img", { src: image.src, className: `${imgStyle} ${imageClassName}`, alt: alt, title: title, style: style, ...image.size }));
+    };
+    const adjustSrc = (router, pathPrefix) => (src) => src && !isURL(src) ? adjustHref(router)(joinPath(pathPrefix, src)) : src;
+    const formatToMimeType = (format) => format ? `image/${String(format)}` : undefined;
+
+    const ImgInner = JSX(({ className = '', image, imageClassName = '', isMobile, pathPrefix, ...iconProps }) => {
+        if (!image?.src && !image?.icon) {
+            return null;
+        }
+        return image.icon ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: image?.iconVersion || 'normal', name: image.icon, ...iconProps })) : (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile, pathPrefix: pathPrefix }));
+    });
+
     const renderContacts = () => (jsxs("div", { className: "flex", children: [jsxs("a", { className: "flex items-center text-primary-text no-underline mr-6", href: `tel:8 (800) 200-78-70`, "aria-label": "8 (800) 200-78-70", children: [jsx(ImgInner, { image: { icon: 'PhoneIcon' }, width: "24", height: "24", className: "mr-3" }), jsx("span", { children: "8 (800) 200-78-70" })] }), jsxs("a", { className: "flex items-center text-primary-text no-underline", "aria-label": "ved@rshb.ru", href: `mailto:ved@rshb.ru`, children: [jsx(ImgInner, { image: { icon: 'MailIcon' }, width: "24", height: "24", className: "mr-3" }), jsx("span", { children: "ved@rshb.ru" })] })] }));
 
     const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
@@ -1154,7 +1128,7 @@
     const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 flex flex-col items-center ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep$1) })) : null] })));
     const renderStep$1 = (benefit, i) => {
         const description = benefit.description;
-        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: "w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black", image: benefit.icon, asSVG: true })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5", children: [benefit?.label ? jsx(Heading, { headingType: "h6", children: benefit.label }) : null, renderDescription$4(description)] })] }, String(i)));
+        return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: "w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black", image: benefit.icon, asSVG: true })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5 h-full", children: [benefit?.label ? jsx(Heading, { headingType: "h6", children: benefit.label }) : null, renderDescription$4(description)] })] }, String(i)));
     };
     const renderDescription$4 = (description) => {
         const benefitType = description?.benefitType || null;
@@ -1221,9 +1195,10 @@
         XS: 'text-xs-light',
     };
 
-    const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, ...rest }) => {
+    const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, isPadding = true, ...rest }) => {
         const versionStyle = headlineVersionStyles[headlineVersion];
-        return (jsxs(BlockWrapper, { className: style('flex flex-col p-12 group-data-secondary:bg-primary-main group-data-secondary:text-white', versionStyle.wrapper, className), ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { color: "group-data-secondary:text-white/80", size: versionStyle.descriptionSize, align: align, children: description })) : null] }));
+        const paddingStyle = isPadding ? 'p-12' : '';
+        return (jsxs(BlockWrapper, { className: style('flex flex-col group-data-secondary:bg-primary-main group-data-secondary:text-white', paddingStyle, versionStyle.wrapper, className), ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { color: "group-data-secondary:text-white/80", size: versionStyle.descriptionSize, align: align, children: description })) : null] }));
     });
 
     const Bonus = JSX((props) => {
@@ -1242,7 +1217,7 @@
 
     const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-12 flex flex-col text-center ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-8", title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] })));
     const renderBonusBenefit = ({ icon, title, description }, i) => {
-        return (jsxs("div", { className: "flex flex-col items-center text-h6", children: [title ? jsx("span", { children: title }) : null, icon ? jsx(ImgInner, { image: icon, height: "180", width: "auto", className: "h-[180px] w-auto" }) : null, jsx("div", { children: description ? jsx("span", { children: description }) : null })] }, String(i)));
+        return (jsxs("div", { className: style('flex flex-col items-center text-h6', !description && !title ? 'justify-center' : ''), children: [title ? jsx("span", { children: title }) : null, icon ? jsx(ImgInner, { image: icon, height: "180", width: "auto", className: "w-auto" }) : null, description ? jsx("span", { children: description }) : null] }, String(i)));
     };
     const getElementsColsValue = (colValue) => {
         switch (colValue) {
@@ -1891,7 +1866,7 @@
             }
         }, [onIntersection, idx]);
         const ref = useIntersectionObserver(observerCallback, observerOptions);
-        return (jsx("div", { className: `inline-block snap-always box-border ${className}`, style: style, role: "listitem", "aria-current": Boolean(idx === activeIndex), ref: ref, children: children }));
+        return (jsx("div", { className: `inline-block snap-always box-border ${className}`, style: style, "aria-current": Boolean(idx === activeIndex), ref: ref, children: children }));
     });
 
     const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]', 'min-w-[25%]'];
@@ -1916,7 +1891,7 @@
             ...(isVerticalList ? getContainerHeight(minHeight) : {}),
             gap: `${gap}px`,
         };
-        return (jsx("div", { className: style('box-border overflow-auto no-scrollbar', listType, className), style: containerStyle, role: "list", ref: containerRef, children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: style(snapAlign, visibleItemCount ? childStyleMap[visibleItemCount - 1] : '', isVerticalList ? 'h-full' : ''), style: isHorizontalList ? getContainerOffset(padding / 4) : {}, activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
+        return (jsx("div", { className: style('box-border overflow-auto no-scrollbar', listType, className), style: containerStyle, ref: containerRef, children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: style(snapAlign, visibleItemCount ? childStyleMap[visibleItemCount - 1] : '', isVerticalList ? 'h-full' : ''), style: isHorizontalList ? getContainerOffset(padding / 4) : {}, activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
     });
     // Styles used to compensate outer container padding to get rid of clipping effect
     const getContainerOffset = (padding, additionalPadding = 0) => ({
@@ -2155,7 +2130,7 @@
 
     const MAX_LINKS_COUNT = 10;
     const CarouselLinks = JSX(({ className = '', additionalDescription, description, links, title, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `flex w-full p-10 overflow-hidden justify-between ${className}`, ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-9 text-white text-xl-light", children: [jsx(Headline, { className: "p-0", title: title, description: description, as: "h1", align: "text-left" }), additionalDescription ? (jsx("div", { className: "pt-6", children: jsx(Paragraph, { children: additionalDescription }) })) : null] }), links?.length ? renderLinks(links) : null] }));
+        return (jsxs(BlockWrapper, { className: `flex w-full p-10 overflow-hidden justify-between ${className}`, ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-9 text-white text-xl-light", children: [jsx(Headline, { isPadding: false, title: title, description: description, as: "h1", align: "text-left" }), additionalDescription ? (jsx("div", { className: "pt-6", children: jsx(Paragraph, { children: additionalDescription }) })) : null] }), links?.length ? renderLinks(links) : null] }));
     });
     const renderLinks = (links) => {
         const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
@@ -2181,7 +2156,7 @@
         M: 'ml-3',
         L: 'ml-4',
     };
-    const List = JSX(({ className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: `text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text ${TEXT_SIZE_MAP[listItemSize]} ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''} ${className}`, role: "list", children: items.map((item, i) => (jsx(ListItem, { className: `${itemClassName} mb-1.5`, isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
+    const List = JSX(({ className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: `text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text ${TEXT_SIZE_MAP[listItemSize]} ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''} ${className}`, role: "list", children: items.map((item, i) => (jsx(ListItem, { className: itemClassName, isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
 
     const CarouselProductCard = JSX(({ className = '', title, headlineSmallVersion = 'H6', description, additionalDescription, icon, items = [], button = {}, version = 'primary', isDotted = true, align = 'text-center', ...rest }) => {
         return (jsxs(BlockWrapper, { className: style('flex flex-col justify-between items-stretch min-w-[260px] h-full w-full p-6', 'box-border border-solid border border-gray', align, className), version: version, ...rest, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$3(icon), renderCardTitle(headlineSmallVersion, title), renderDescription$3(description, title), renderItems(items, isDotted, version), renderAdditionalDescription$1(additionalDescription)] }), renderButtonsSection([button], { buttonClassName: 'mt-6 w-full' })] }));
@@ -2250,6 +2225,28 @@
         return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] h-full text-left box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...rest, 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 group-data-gray:text-secondary-text group-data-gray:max-w-[265px]", children: description })) : null, items.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia }) : null] }) }) }));
     });
 
+    const Foldable = JSX(({ className = '', isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
+        const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
+        const onToggle = useCallback(() => {
+            setIsUnfolded((_) => !_);
+        }, []);
+        const sectionNode = renderFoldableSection({ isUnfolded, onToggle });
+        const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
+        return isFoldButtonOnTop ? (jsxs("div", { className: className, children: [buttonNode, sectionNode] })) : (jsxs("div", { className: className, children: [sectionNode, buttonNode] }));
+    });
+
+    const FoldableSection = JSX(({ className = '', isUnfolded, children }) => {
+        const containerRef = useRef(null);
+        useEffect(() => {
+            if (containerRef.current) {
+                containerRef.current.style.maxHeight = isUnfolded
+                    ? `${containerRef.current.scrollHeight}px`
+                    : '';
+            }
+        }, [isUnfolded, children?.length]);
+        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} ${className}`, children: children }));
+    });
+
     const VISIBLE_CELLS_COUNT = 1;
     const CarouselTariffsCard = JSX(({ className = '', title, icon, isHighlighting, button, cardCells = [], ...rest }) => {
         const cellsNode = cardCells.map(renderCardInfo);
@@ -3490,43 +3487,6 @@
     const OtherProducts = JSX(({ className = '', ...rest }) => (jsx(BlockWrapper, { className: `font-sans text-primary-text ${className}`, ...rest, children: renderChildren(rest) })));
     OtherProducts.childrenTypes = ['OtherProductsItem'];
 
-    function getParentBlockDef(options) {
-        return options?.parent || {};
-    }
-
-    function getParentBlockContent(options, defaultContent) {
-        const { content } = getParentBlockDef(options);
-        return content || defaultContent;
-    }
-
-    const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', onClick }) => {
-        const STATE_STYLE = 'hover:bg-primary-hover focus:border-primary-text active:bg-primary-active outline-none';
-        const DIMENSIONS_STYLE = 'flex justify-center w-full px-0 py-5';
-        return (jsxs("button", { className: [
-                'border border-transparent bg-primary-main font-sans text-white cursor-pointer',
-                STATE_STYLE,
-                DIMENSIONS_STYLE,
-                className,
-            ].join(' '), "data-theme": dataTheme, onClick: onClick, children: [jsx("span", { className: "text-h4 pr-3", children: label }), icon ? (jsx(ImgInner, { image: {
-                        icon,
-                        iconVersion: 'white',
-                    }, className: "flex-shrink-0 my-auto", width: "20", height: "20", asSVG: true })) : null] }));
-    });
-    const renderDefaultFoldButton = ({ isUnfolded, onToggle }) => {
-        const labels = ['Развернуть', 'Скрыть'];
-        const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
-        return (jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
-    };
-
-    const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
-    const OtherProductsItem = JSX(({ className, label = '', isUnfolded: unfoldedByDefault, ...rest }) => {
-        const { colorPalette } = getParentBlockContent(rest.options, {});
-        return (jsx("div", { className: `border-0 border-b border-solid border-main-divider ${className}`, children: jsx(Foldable, { unfoldedByDefault: unfoldedByDefault, renderFoldableSection: ({ isUnfolded }) => (jsx("div", { className: "box-border", children: jsx(FoldableSection, { className: "grid grid-cols-12 gap-1 border-box", isUnfolded: isUnfolded, children: renderChildren(rest) }) })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(DefaultFoldButton, { label: label, icon: icons[Number(isUnfolded)], dataTheme: colorPalette || rest.options?.page?.colorPalette, onClick: onToggle })) }) }));
-    });
-    OtherProductsItem.childrenTypes = {
-        exclude: ['OtherProductsItem'],
-    };
-
     const ParagraphBlock = JSX(({ text, size, align, font, children, ...rest }) => (jsx(BlockWrapper, { ...rest, children: jsx(Paragraph, { size: size, align: align, font: font, children: text || children }) })));
 
     const BenefitItem = JSX((props) => {
@@ -3769,15 +3729,38 @@
         return (jsx(BlockWrapper, { ...rest, children: jsx(RichText, { __html: __html }) }));
     });
 
-    const RollupItem = JSX(({ className = '', label = 'Развернуть', isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => (jsx(BlockWrapper, { className: `border-b border-solid border-main-divider w-full ${className}`, tag: "div", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx("div", { className: "box-border", children: jsx(FoldableSection, { className: `grid grid-cols-12 gap-1 border-box`, isUnfolded: isUnfolded, children: renderChildren(rest) }) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ version, label, isUnfolded, onToggle }) }) })));
+    const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', onClick }) => {
+        const STATE_STYLE = 'hover:bg-primary-hover focus:border-primary-text active:bg-primary-active outline-none';
+        const DIMENSIONS_STYLE = 'flex justify-center w-full px-0 py-5';
+        return (jsxs("button", { className: [
+                'border border-transparent bg-primary-main font-sans text-white cursor-pointer',
+                STATE_STYLE,
+                DIMENSIONS_STYLE,
+                className,
+            ].join(' '), "data-theme": dataTheme, onClick: onClick, children: [jsx("span", { className: "text-h4 pr-3", children: label }), icon ? (jsx(ImgInner, { image: {
+                        icon,
+                        iconVersion: 'white',
+                    }, className: "flex-shrink-0 my-auto", width: "20", height: "20", asSVG: true })) : null] }));
+    });
+    const renderDefaultFoldButton = ({ isUnfolded, onToggle }) => {
+        const labels = ['Развернуть', 'Скрыть'];
+        const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
+        return (jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
+    };
+
+    const RollupItem = JSX(({ className = '', label = 'Развернуть', isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => (jsx(BlockWrapper, { className: `w-full border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`, tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: `grid grid-cols-12 gap-5 [&>*]:p-0`, isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ version, label, isUnfolded, onToggle }) }) })));
     RollupItem.childrenTypes = {
-        exclude: ['RollupItem', 'Accordion', 'AccordionItem', 'OtherProducts', 'OtherProductsItem'],
+        exclude: ['RollupItem', 'Accordion', 'OtherProducts'],
     };
     const renderFoldButton = ({ version, label: defaultLabel, isUnfolded, onToggle, }) => {
         const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
-        return version === 'primary' ? (renderPrimaryFoldButton({ label, icon: isUnfolded ? 'MinusIcon' : 'PlusIcon', onToggle })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
+        return version === 'primary' ? (renderPrimaryFoldButton({
+            label,
+            icon: isUnfolded ? 'MinusIcon' : 'PlusIcon',
+            onToggle,
+        })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
-    const renderPrimaryFoldButton = ({ label, icon, onToggle }) => (jsxs("button", { className: "border-none bg-transparent px-9 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 cursor-pointer", onClick: onToggle, children: [jsx("span", { className: "text-xl font-medium pr-2.5", children: label }), icon ? jsx(ImgInner, { image: getIconWithVersion({ icon }), width: "24", height: "24", asSVG: true }) : null] }));
+    const renderPrimaryFoldButton = ({ label, icon, onToggle }) => (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 cursor-pointer`, onClick: onToggle, children: [jsx(Text, { size: "text-xl", font: "font-medium", children: label }), icon ? jsx(ImgInner, { image: getIconWithVersion({ icon }), width: "24", height: "24", asSVG: true }) : null] }));
 
     const SAFEBOXES_URL = '/api/v1/safeboxes';
     const EMPTY_VALUE = [];
@@ -4384,7 +4367,6 @@
 
     const Blocks = {
         Accordion,
-        AccordionItem,
         ApplicationForm,
         BenefitsBlock,
         Bonus,
@@ -4421,7 +4403,6 @@
         OfficeMap,
         OfficeServicesBlock,
         OtherProducts,
-        OtherProductsItem,
         ParagraphBlock,
         PictureText,
         Placeholder,
@@ -4566,7 +4547,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.8.24";
+    const packageVersion = "0.8.25";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;