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

package/mobile/bundle/bundle.umd.js

@@ -385,151 +385,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(({ title, description, className = '', ...rest }) => (jsxs(BlockWrapper, { className: `py-6 px-4 ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-2 text-center", title: title }) : null, description ? (jsx("div", { className: "mb-5", children: jsx(Paragraph, { size: "text-m", font: "font-light", align: "text-center", children: description }) })) : null, jsx(AccordionItemsList, { children: renderChildren(rest) })] })));
-    Accordion.childrenTypes = ['AccordionItem'];
-
-    function getParentBlockDef(options) {
-        return options?.parent || {};
-    }
-
-    function getParentBlockContent(options, defaultContent) {
-        const { content } = getParentBlockDef(options);
-        return content || defaultContent;
-    }
-
-    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 Img = JSX((props) => jsx(ImgInner, { ...props, isMobile: true }));
-
-    const Text = JSX(({ children, ...style }) => (jsx("span", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
-
-    const getIconWithVersion = (icon, version = 'primary') => ({
-        ...icon,
-        iconVersion: icon?.iconVersion ?? (version === 'secondary' ? 'white' : 'color'),
-    });
-
-    const icons = ['PlusIcon', 'MinusIcon'];
-    const AccordionItem = JSX(({ className = '', label = '', labelIcon, isExpanded, ...rest }) => {
-        const { bordered } = getParentBlockContent(rest.options, {});
-        return (jsx("li", { className: `${bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0'} border-solid border-main-divider ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: true, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "flex flex-wrap group-last:last:pb-0 gap-5 [&>*]:p-0", isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(FoldButton, { className: bordered ? '' : 'py-3.5 px-0', label: label, icon: icons[Number(isUnfolded)], primaryIcon: labelIcon, onClick: onToggle })) }) }));
-    });
-    AccordionItem.childrenTypes = [];
-    const FoldButton = JSX(({ className, icon, label, primaryIcon, onClick }) => (jsxs("button", { className: `border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text group cursor-pointer ${className}`, onClick: onClick, children: [jsxs("div", { className: "flex group-hover:text-primary-main", children: [primaryIcon ? (jsx(Img, { image: getIconWithVersion(primaryIcon), className: "mr-3 flex-shrink-0", width: "24", height: "24", asSVG: true })) : null, jsx(Text, { size: "text-m-title-xs", font: "font-medium", children: label })] }), jsx(Img, { className: "flex-shrink-0", image: getIconWithVersion({ icon: icon }), width: "24", height: "24", asSVG: true })] })));
+    const Accordion = JSX(({ title, description, className = '', ...rest }) => (jsxs(BlockWrapper, { className: `py-6 px-4 ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-2 text-center", title: title }) : null, description ? (jsx("div", { className: "mb-5", children: jsx(Paragraph, { size: "text-m", font: "font-light", align: "text-center", children: description }) })) : null, jsx("div", { className: "list-none m-0 p-0", children: renderChildren(rest) })] })));
+    Accordion.childrenTypes = ['Accordion'];
 
     const mapChildren = (mapper) => (children) => {
         if (children === null || children === undefined) {
@@ -555,7 +412,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%]'];
@@ -580,7 +437,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) => ({
@@ -700,6 +557,31 @@
         return (jsxs("div", { className: style(className, listType === 'vertical-list' ? 'relative h-full' : ''), children: [jsx(SwipeListContainer, { containerRef: containerRef, activeIndex: activeIndex, visibleItemCount: 1, gap: gap, padding: padding, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, listType: listType, minHeight: minHeight, children: children }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: activeIndex, dotCount: itemCount, listType: listType, version: version })) : null] }));
     });
 
+    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);
@@ -709,6 +591,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) => ({
@@ -807,6 +707,61 @@
     const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
     const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
 
+    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 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 Img = JSX((props) => jsx(ImgInner, { ...props, isMobile: true }));
+
     const headingStyle = (isFillGradient = false) => (isFillGradient ? 'text-white' : '');
     const subtitleStyle = (isFillGradient = false) => `text-s mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`;
     const HeaderCell = JSX(({ icon, image, title, subtitle, isFillGradient }) => (jsxs("div", { role: "columnheader", children: [icon ? (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })) : null, image?.src && (jsx("div", { className: "mb-3.5", children: jsx(Img, { image: image }) })), title ? (jsx(Heading, { headingType: "h4", className: headingStyle(isFillGradient), title: title })) : null, subtitle ? jsx("div", { className: subtitleStyle(isFillGradient), children: subtitle }) : null] })));
@@ -948,6 +903,11 @@
 
     const SearchBar = JSX((props) => (jsx(SearchBarInner, { ...props, isMobile: true })));
 
+    const getIconWithVersion = (icon, version = 'primary') => ({
+        ...icon,
+        iconVersion: icon?.iconVersion ?? (version === 'secondary' ? 'white' : 'color'),
+    });
+
     const LinkList = JSX(({ className = '', documents, ...rest }) => (jsx(BlockWrapper, { className: `mt-2.5 ${className}`, ...rest, children: jsx("ul", { className: "flex flex-col text-s text-secondary-text p-0", children: documents?.length ? renderLinkListItem(documents) : null }) })));
     const renderLinkListItem = (documents) => {
         return documents.map((doc, i) => {
@@ -987,6 +947,72 @@
         return (jsx("div", { className: `col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light font-sans ${className}`, children: href ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "flex justify-center align-middle rounded-md bg-primary-main w-12 h-12", children: jsx(Logo, { className: "w-8", bgColor: "transparent", showTitle: true }) }), jsxs("a", { href: href, target: "_blank", className: "flex flex-col justify-center pl-3", children: [jsx("div", { className: "text-s font-medium mb-[3px]", children: title }), jsx("div", { className: "text-s text-secondary-text", children: description })] })] })) : null }));
     });
 
+    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(Img, { image: {
+                        icon,
+                        iconVersion: 'white',
+                    }, className: "flex-shrink-0 my-auto", width: "20", height: "20", asSVG: true })) : 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 Text = JSX(({ children, ...style }) => (jsx("span", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
+
+    const RollupItem = JSX(({ className = '', label = 'Развернуть', isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => {
+        const { bordered } = getParentBlockContent(rest.options, {});
+        return (jsx(BlockWrapper, { className: style('border-b border-solid border-main-divider w-full', bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0', className), tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "flex flex-wrap group-last:last:pb-0 gap-5 [&>*]:p-0", isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ version, label, isUnfolded, onToggle }) }) }));
+    });
+    RollupItem.childrenTypes = {
+        exclude: ['RollupItem', 'Accordion', 'OtherProducts'],
+    };
+    const renderFoldButton = ({ version, label: defaultLabel, isUnfolded, onToggle, className = '', primaryIcon, }) => {
+        const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
+        return version === 'primary' ? (renderPrimaryFoldButton({
+            label,
+            icon: isUnfolded ? 'MinusIcon' : 'PlusIcon',
+            onToggle,
+            className,
+            primaryIcon,
+        })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
+    };
+    const renderPrimaryFoldButton = ({ label, icon, primaryIcon, onToggle, }) => (jsxs("button", { className: `border-none bg-transparent flex justify-between text-left w-full text-primary-text group cursor-pointer py-3.5 px-0`, onClick: onToggle, children: [jsxs("div", { className: "flex group-hover:text-primary-main", children: [primaryIcon ? (jsx(Img, { image: { ...getIconWithVersion({ ...primaryIcon }) }, className: "mr-3 flex-shrink-0", width: "24", height: "24", asSVG: true })) : null, jsx(Text, { size: "text-m-title-xs", font: "font-medium", children: label })] }), jsx(Img, { className: "flex-shrink-0", image: { ...getIconWithVersion({ icon: icon }) }, width: "24", height: "24", asSVG: true })] }));
+
     const Contacts = JSX(({ className = '', items, hasButton }) => (jsxs("div", { className: className, children: [items?.length ? items.map(renderContact) : null, hasButton ? (jsx(Button, { version: "primary", className: "mb-6 w-full", href: "https://www.rshb.ru/feedback/question/", target: "_blank", ariaLabel: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C", text: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C" })) : null] })));
     const renderContact = (item, index) => {
         const { type, text, description } = item;
@@ -1074,7 +1100,7 @@
         const fallback = rest.options?.page?.fallback;
         const sitemap = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
         const { documents, relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
-        return (jsxs("footer", { className: `font-sans px-4 py-[26px] bg-white ${className}`, children: [jsx(Contacts, { className: "overflow-hidden", items: contacts, hasButton: true }), jsx(AccordionItemsList, { children: sitemap.topItems?.map((item, i) => (jsx(AccordionItem, { label: item.text, children: jsx(LinkList, { documents: item.items }) }, String(i)))) }), jsx("div", { children: sitemap?.dispositions?.map(renderSubMenuItem) }), jsx(MobileAppTile, { title: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435", description: "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0434\u043B\u044F IOS \u0438 Android", ...rest }), jsx(SearchBar, { className: "grow" }), jsx(SocialMedia, { className: "pb-4", media: socialMedia }), jsx(HorizontalNavigation, { title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
+        return (jsxs(BlockWrapper, { tag: "footer", className: `px-4 py-[26px] ${className}`, ...rest, children: [jsx(Contacts, { className: "overflow-hidden", items: contacts, hasButton: true }), jsx("div", { className: "m-0 p-0", children: sitemap.topItems?.map((item, i) => (jsx(RollupItem, { label: item?.text, children: jsx(LinkList, { documents: item.items }) }, String(i)))) }), jsx("div", { children: sitemap?.dispositions?.map(renderSubMenuItem) }), jsx(MobileAppTile, { title: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435", description: "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0434\u043B\u044F IOS \u0438 Android", ...rest }), jsx(SearchBar, { className: "grow" }), jsx(SocialMedia, { className: "pb-4", media: socialMedia }), jsx(HorizontalNavigation, { title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
     });
     const renderSubMenuItem = (menu, i) => {
         const { icon, href, text } = menu;
@@ -1169,7 +1195,7 @@
         const activeSubItem = findActiveSubItem(router)(subItems);
         const [burgerMenuShow, setBurgerMenuShow] = useState(false);
         const handleBurgerMenuShow = useCallback(() => setBurgerMenuShow((_) => !_), []);
-        return (jsxs(BlockWrapper, { tag: "header", version: version, ...rest, children: [jsxs("div", { className: "container px-4 py-0 box-border", children: [jsx(HeaderTop, { onClick: handleBurgerMenuShow, bgColor: bgColor, logo: logo }), jsx("nav", { className: "flex items-center m-0 p-0 overflow-y-hidden w-full h-12", children: jsx("div", { className: "flex no-scrollbar horizontal-list h-full items-center", children: subItems?.map((_, i) => (jsx(HeaderItem, { className: "mr-8 whitespace-nowrap text-s", active: _ === activeSubItem, ..._ }, String(i)))) }) })] }), burgerMenuShow ? (jsx(HeaderBurger, { onClick: handleBurgerMenuShow, burgerSubMenu: dispositions, defaultLocation: defaultLocation, children: jsx(AccordionItemsList, { children: topItems?.map((item, i) => (jsx(AccordionItem, { label: item.text, children: jsx(LinkList, { documents: item.items }) }, String(i)))) }) })) : null] }));
+        return (jsxs(BlockWrapper, { tag: "header", version: version, ...rest, children: [jsxs("div", { className: "container px-4 py-0 box-border", children: [jsx(HeaderTop, { onClick: handleBurgerMenuShow, bgColor: bgColor, logo: logo }), jsx("nav", { className: "flex items-center m-0 p-0 overflow-y-hidden w-full h-12", children: jsx("div", { className: "flex no-scrollbar horizontal-list h-full items-center", children: subItems?.map((_, i) => (jsx(HeaderItem, { className: "mr-8 whitespace-nowrap text-s", active: _ === activeSubItem, ..._ }, String(i)))) }) })] }), burgerMenuShow ? (jsx(HeaderBurger, { onClick: handleBurgerMenuShow, burgerSubMenu: dispositions, defaultLocation: defaultLocation, children: jsx("div", { className: "list-none m-0 p-0", children: topItems?.map((item, i) => (jsx(RollupItem, { label: item.text, children: jsx(LinkList, { documents: item.items }) }, String(i)))) }) })) : null] }));
     });
 
     const headlineVersionStyles = {
@@ -1205,9 +1231,10 @@
         },
     };
 
-    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 LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
@@ -1323,7 +1350,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 BaseTile = JSX(({ className = '', title = '', buttons, image, children }) => (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { className: "h-full", children: children }), buttons ? jsx("div", { className: "mt-auto pt-8", children: buttons }) : null] }), image] })] })));
 
@@ -1472,9 +1499,30 @@
         return image?.src ? jsx(Img, { className: "pb-3 mr-auto", image: image }) : null;
     }
 
+    const gapStyles = {
+        XXL: 'gap-12',
+        XL: 'gap-10',
+        L: 'gap-8',
+        M: 'gap-4',
+        S: 'gap-2',
+        XS: 'gap-1',
+        '': '',
+    };
+
+    const alignStyle = {
+        stretch: 'items-stretch',
+        left: 'items-start',
+        center: 'items-center',
+        right: 'items-end',
+    };
+    const VerticalLayout = JSX(({ className = '', gap = '', align = 'stretch', isPadding = false, isInnerPadding = true, version = 'transparent', options, ...rest }) => {
+        const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
+        return (jsx(BlockWrapper, { className: style('flex flex-col [&>*]:max-w-full', isPadding ? 'p-12' : '', gapStyles[gap], align && alignStyle[align], className), version: version, ...rest, children: renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } }) }));
+    });
+    VerticalLayout.childrenTypes = [];
+
     const Blocks = {
         Accordion,
-        AccordionItem,
         ComparisonTable,
         Footer,
         Header,
@@ -1483,10 +1531,12 @@
         LinkList,
         MobileAppTile,
         ProductBlock,
+        RollupItem,
         StepsBlock,
         TariffsTable,
         TextBlock,
         Placeholder,
+        VerticalLayout,
     };
 
     const debounce = (fn, delay = 600) => {
@@ -1616,7 +1666,7 @@
         return (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]), []);
     }
 
-    const packageVersion = "0.8.24";
+    const packageVersion = "0.8.26";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;