@redneckz/wildless-cms-uni-blocks 0.10.6 → 0.10.7

package/mobile/bundle/bundle.umd.js

@@ -236,41 +236,84 @@
         return JSXTmpl;
     };
 
-    const HeadingClass = {
-        h0: 'text-m-title',
-        h1: 'text-m-title',
-        h2: 'text-m-title',
-        h3: 'text-h6',
-        h4: 'text-m-title-xs',
-        h5: 'text-m-title-xs',
-        h6: 'text-m-title-xs',
-    };
-    const Heading = JSX((props) => {
-        const { className, headingType = 'h3', title, as: Tag = 'h3' } = props;
-        return (jsx(Tag, { className: `font-sans font-medium m-0 ${HeadingClass[headingType]} ${className || ''}`, children: title }));
-    });
-
     const style = (...atoms) => atoms
         .flatMap((_) => _)
         .filter(Boolean)
         .join(' ');
 
-    const mapChildren = (mapper) => (children) => {
-        if (children === null || children === undefined) {
+    const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
+
+    const DEFAULT_ANCESTORS = [];
+    const defaultStyle = 'col-span-12';
+    function renderBlock(block, options, { className, ...extraProps } = {}) {
+        const { key, blockDecorator = defaultBlockDecorator, blocksRegistry = {}, ancestors = DEFAULT_ANCESTORS, } = options;
+        const { type } = block;
+        if (!(type && type in blocksRegistry)) {
+            console.warn(`No block with "${type}" is registered`);
+        }
+        const BlockComponent = type && blocksRegistry[type];
+        return blockDecorator({
+            blockClassName: style('scroll-mt-12', // TODO scroll-mt-12 ? here?
+            className, block.style || defaultStyle),
+            block,
+            ancestors,
+            // Adjusted by decorator block and blockClassName
+            render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
+                const { content } = adjustedBlock;
+                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, block: block, options: options, ...content, ...extraProps }, key)) : null;
+            },
+        }, key);
+    }
+
+    const DEFAULT_SLOT_NAME = null;
+
+    const EMPTY_ANCESTORS = [];
+    const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, renderProps = renderBlock, ...options }) => (blocks || []).map((_, j) => renderProps(_, {
+        ...options,
+        key: `${key ? key : _.type}-${j}`,
+        ancestors: options.parent
+            ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
+            : ancestors,
+    }));
+
+    function renderChildren({ children, block, options, renderProps, }) {
+        if (children) {
             return children;
         }
-        return Array.isArray(children) ? children.map(mapper) : mapper(children, 0);
-    };
+        return block && options
+            ? renderBlocksList(block.blocks, { ...options, parent: block, renderProps })
+            : null;
+    }
 
-    const HEADER_HEIGHT = 170;
-    const FOOTER_HEIGHT = 48;
-    const BLOCKS_GAP = 4;
-    const PAGE_PADDINGS_X = 20;
-    const DEFAULT_HEIGHT = 866;
-    const getContainerHeight = (minHeight) => ({
-        height: `calc(100vh - ${HEADER_HEIGHT + FOOTER_HEIGHT + BLOCKS_GAP + PAGE_PADDINGS_X}px)`,
-        minHeight: `${minHeight || DEFAULT_HEIGHT}px`,
-    });
+    class EventBus {
+        subscribers = {};
+        subjectsStateMap = {};
+        subscribe(type, listener) {
+            this.subscribers[type] = (this.subscribers[type] || []).concat(listener);
+            const latestEvent = this.subjectsStateMap[type];
+            if (latestEvent) {
+                listener(latestEvent);
+            }
+            return () => {
+                this.unsubscribe(type, listener);
+            };
+        }
+        unsubscribe(type, listener) {
+            this.subscribers[type] = this.subscribers[type]?.filter((s) => s !== listener);
+        }
+        fire(type, event) {
+            const isSubjectDeclared = type in this.subjectsStateMap;
+            if (isSubjectDeclared) {
+                this.subjectsStateMap[type] = event;
+            }
+            this.subscribers[type]?.forEach((s) => s(event));
+        }
+        subject(type, event) {
+            this.subjectsStateMap[type] = event;
+        }
+    }
+
+    const defaultEventBus = new EventBus();
 
     const SENSITIVITY_SCALE = 10;
     function useIntersectionObserver(observerCallback, { sensitivity, rootRef } = {}) {
@@ -296,6 +339,54 @@
             .concat(1);
     }
 
+    const blockRouterEventBus = new EventBus();
+
+    function useBlockIntersectionObserver(block) {
+        const observerCallback = useCallback((entries) => {
+            if (!block || !entries?.length) {
+                return;
+            }
+            const intersection = entries[entries.length - 1];
+            blockRouterEventBus.fire('intersection', { block, intersection });
+        }, [block]);
+        return useIntersectionObserver(observerCallback, { sensitivity: 1 });
+    }
+
+    const blockStyles = {
+        primary: 'bg-white text-primary-text',
+        secondary: 'bg-primary-main text-white',
+        gray: 'bg-main-divider text-primary-text',
+        transparent: 'bg-transparent text-primary-text',
+        '': '',
+    };
+    const BlockWrapper = JSX(({ className = '', version = 'primary', isTheme = true, block, tag = 'section', role, children, }) => {
+        const Tag = tag;
+        const ref = useBlockIntersectionObserver(block);
+        const [isHidden, setHidden] = useState(false);
+        useEffect(() => defaultEventBus.subscribe('tab', (event) => {
+            setHidden(Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)));
+        }), [block]);
+        return (jsx(Tag, { className: style(groupStyle(Boolean(version && isTheme)), blockStyles[version], isHidden ? 'hidden' : '', className), ...(version && isTheme ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
+    });
+    const groupStyle = (isGroup) => (isGroup ? 'group' : '');
+
+    const mapChildren = (mapper) => (children) => {
+        if (children === null || children === undefined) {
+            return children;
+        }
+        return Array.isArray(children) ? children.map(mapper) : mapper(children, 0);
+    };
+
+    const HEADER_HEIGHT = 170;
+    const FOOTER_HEIGHT = 48;
+    const BLOCKS_GAP = 4;
+    const PAGE_PADDINGS_X = 20;
+    const DEFAULT_HEIGHT = 866;
+    const getContainerHeight = (minHeight) => ({
+        height: `calc(100vh - ${HEADER_HEIGHT + FOOTER_HEIGHT + BLOCKS_GAP + PAGE_PADDINGS_X}px)`,
+        minHeight: `${minHeight || DEFAULT_HEIGHT}px`,
+    });
+
     const SwipeListItem = JSX(({ className = '', style, idx, activeIndex, observerOptions, children, onIntersection }) => {
         const observerCallback = useCallback((entries) => {
             if (entries.length && onIntersection) {
@@ -432,57 +523,23 @@
         ];
     };
 
-    const DEFAULT_GAP = 14;
-    /*
-      Horizontal padding used on a container above SwipeListControl.
-      Same value used on a SwipeListControlChildren container to compensate it
-      and get rid of a clipping effect caused by overflow: hidden.
-     */
-    const DEFAULT_PADDING = 16;
-    const SwipeListControl = JSX(({ className = '', gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, minHeight, children, onVisibleIndicesChange, listType = 'horizontal-list', version, }) => {
-        const itemCount = Array.isArray(children) ? children.length : 0;
-        const [containerRef, scroll] = useSwipeListScroll({
-            itemCount,
-            onVisibleIndicesChange,
-        });
-        const [activeIndex] = scroll.visibleIndicesRange;
-        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] }));
-    });
-
-    class EventBus {
-        subscribers = {};
-        subjectsStateMap = {};
-        subscribe(type, listener) {
-            this.subscribers[type] = (this.subscribers[type] || []).concat(listener);
-            const latestEvent = this.subjectsStateMap[type];
-            if (latestEvent) {
-                listener(latestEvent);
-            }
-            return () => {
-                this.unsubscribe(type, listener);
-            };
-        }
-        unsubscribe(type, listener) {
-            this.subscribers[type] = this.subscribers[type]?.filter((s) => s !== listener);
-        }
-        fire(type, event) {
-            const isSubjectDeclared = type in this.subjectsStateMap;
-            if (isSubjectDeclared) {
-                this.subjectsStateMap[type] = event;
-            }
-            this.subscribers[type]?.forEach((s) => s(event));
-        }
-        subject(type, event) {
-            this.subjectsStateMap[type] = event;
-        }
+    function useRouter() {
+        return useRouter._impl();
     }
-
-    const defaultEventBus = new EventBus();
-
-    const useDialog = (id = '') => ({
-        open: (message) => defaultEventBus.fire('dialog', { type: 'open', id, message }),
-        close: () => defaultEventBus.fire('dialog', { type: 'close' }),
+    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('/');
 
@@ -510,31 +567,73 @@
     };
     const hasPrefix = (href, prefix) => prefix && href && href.startsWith(prefix);
 
-    /* eslint-disable @typescript-eslint/ban-types */
-    const handlerDecorator = (handler, targetContent) => {
-        return handlerDecorator._impl(handler, targetContent);
+    const svgUseStyleMap = {
+        normal: '',
+        color: 'text-primary-main',
+        black: 'text-black',
+        white: 'text-black',
     };
-    handlerDecorator._impl = (handler) => handler;
-    handlerDecorator.setup = (impl) => {
-        handlerDecorator._impl = impl;
+    const Icon = JSX(({ className = '', imageClassName = '', name = '', alt = `Иконка ${name}`, title = alt, iconVersion = 'color', ...imgProps }) => {
+        const router = useRouter();
+        const href = adjustHref(router)(joinPath(projectSettings.CDN, '/icons', `${name}.svg`));
+        if (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;
 
-    function useRouter() {
-        return useRouter._impl();
-    }
-    useRouter._impl = () => ({
-        href: globalThis.location?.href || '/',
-        pathname: globalThis.location?.pathname || '/',
-        query: {},
-        push: () => {
-            // Do nothing
-        },
-        replace: () => {
-            // Do nothing
-        },
+    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, 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 useDialog = (id = '') => ({
+        open: (message) => defaultEventBus.fire('dialog', { type: 'open', id, message }),
+        close: () => defaultEventBus.fire('dialog', { type: 'close' }),
     });
-    useRouter.setup = (impl) => {
-        useRouter._impl = impl;
+
+    /* eslint-disable @typescript-eslint/ban-types */
+    const handlerDecorator = (handler, targetContent) => {
+        return handlerDecorator._impl(handler, targetContent);
+    };
+    handlerDecorator._impl = (handler) => handler;
+    handlerDecorator.setup = (impl) => {
+        handlerDecorator._impl = impl;
     };
 
     function useLink(params = {}) {
@@ -635,63 +734,170 @@
     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 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 ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `group/btn shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
+        ? 'bg-secondary-light text-secondary-text'
+        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover/btn:text-primary-main", width: "16", height: "16" }) })));
+    const ScrollLeftButton = JSX((props) => (jsx(ArrowButton, { ...props, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })));
+    const ScrollRightButton = JSX((props) => (jsx(ArrowButton, { ...props, className: `${props.className || ''} rotate-180`, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })));
+
+    const scrollButtonStyle = 'absolute top-[calc(50%-24px)] z-40';
+    const blurBaseStyle = 'absolute top-0 bottom-0 z-40 w-[84px] pointer-events-none';
+    const CarouselScrollButtons = JSX(({ scroll, arrowsPadded, isBlur, onScrollLeft, onScrollRight, hasEdgeBlocks, activeIndex, itemCount, }) => {
+        const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
+        const canMoveLeft = hasEdgeBlocks ? activeIndex > 0 : canScrollLeft;
+        const canMoveRight = hasEdgeBlocks ? activeIndex < itemCount - 1 : canScrollRight;
+        const handleScrollLeft = useCallback(() => {
+            if (!hasEdgeBlocks) {
+                scrollLeft();
+            }
+            else {
+                canScrollLeft && activeIndex !== itemCount - 1 && scrollLeft();
+                onScrollLeft();
+            }
+        }, [scrollLeft, onScrollLeft, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
+        const handleScrollRight = useCallback(() => {
+            if (!hasEdgeBlocks) {
+                scrollRight();
+            }
+            else {
+                canScrollRight && activeIndex !== 0 && scrollRight();
+                onScrollRight();
+            }
+        }, [scrollRight, onScrollRight, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
+        return (jsxs("div", { children: [renderBlur(isBlur, scroll), canMoveLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle, arrowsPadded ? 'left-8' : 'left-0'), onClick: handleScrollLeft })) : null, canMoveRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle, arrowsPadded ? 'right-8' : 'right-0'), onClick: handleScrollRight })) : null] }));
+    });
+    const renderBlur = (isBlur, scroll) => isBlur ? (jsxs("div", { children: [scroll.canScrollLeft ? (jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white') })) : null, scroll.canScrollRight ? (jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white') })) : null] })) : null;
 
-    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', ...imgProps }) => {
-        const router = useRouter();
-        const href = adjustHref(router)(joinPath(projectSettings.CDN, '/icons', `${name}.svg`));
-        if (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 ITEMS_GAP = 16;
+
+    const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, arrowsPadded = true, isPadding = true, showDots = false, isAlignCenter = false, ...rest }) => {
+        const { blocks: childBlocks = [] } = rest.block || {};
+        const count = itemCount || childBlocks?.length;
+        const [activeIndex, setActiveIndex] = useState(Math.floor((visibleItemCount || 0) / 2));
+        const increaseActiveIndex = useCallback(() => setActiveIndex((_) => _ + 1), []);
+        const decreaseActiveIndex = useCallback(() => setActiveIndex((_) => _ - 1), []);
+        const [containerRef, scroll] = useSwipeListScroll({
+            itemCount: count,
+            isCyclic,
+        });
+        const [dotsActiveIndex] = scroll.visibleIndicesRange;
+        const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
+        return (jsx(BlockWrapper, { className: style(getPaddingStyle$1(isPadding), 'group-data-secondary:bg-primary-main group-data-secondary:text-white', className), ...rest, children: jsxs("div", { className: style(getAlignStyle(isAlignCenter), 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
+                            ...rest,
+                            renderProps: isBankHistoryCarousel
+                                ? (block, options) => renderBlock(block, options, {
+                                    blocksLength: childBlocks?.length,
+                                    activeIndex: activeIndex,
+                                })
+                                : renderBlock,
+                        }) }), jsx(CarouselScrollButtons, { scroll: scroll, isBlur: isBlur, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count }), showDots ? renderDots(containerRef, dotsActiveIndex, count) : null] }) }));
     });
-    const getSvgSize = (width) => (width ? '' : 'w-full h-full');
-    const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
+    Carousel.childrenTypes = [
+        'CarouselCard',
+        'CarouselBankHistoryCard',
+        'CarouselCatalogCard',
+        'CarouselInvestmentCard',
+        'CarouselProductCard',
+        'CarouselProgramsCard',
+        'CarouselRecommendationCard',
+        'CarouselTariffsCard',
+        'CarouselRichTextCard',
+        'CarouselInvestmentCard',
+        'CarouselEventCard',
+    ];
+    const getPaddingStyle$1 = (isPadding) => (isPadding ? 'p-default' : '');
+    const getAlignStyle = (isAlignCenter) => isAlignCenter ? 'flex justify-center' : '';
+    const renderDots = (containerRef, dotsActiveIndex, itemCount) => (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: dotsActiveIndex, dotCount: itemCount, listType: 'horizontal-list' }));
 
-    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 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 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 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 HeadingClass = {
+        h0: 'text-m-title',
+        h1: 'text-m-title',
+        h2: 'text-m-title',
+        h3: 'text-h6',
+        h4: 'text-m-title-xs',
+        h5: 'text-m-title-xs',
+        h6: 'text-m-title-xs',
     };
-    const adjustSrc = (router, pathPrefix) => (src) => src && !isURL(src) ? adjustHref(router)(joinPath(pathPrefix, src)) : src;
-    const formatToMimeType = (format) => format ? `image/${String(format)}` : undefined;
+    const Heading = JSX((props) => {
+        const { className, headingType = 'h3', title, as: Tag = 'h3' } = props;
+        return (jsx(Tag, { className: `font-sans font-medium m-0 ${HeadingClass[headingType]} ${className || ''}`, children: title }));
+    });
 
-    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, name: image.icon, ...iconProps })) : (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile, pathPrefix: pathPrefix }));
+    const Paragraph = JSX(({ children, ...style }) => (jsx("p", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
+
+    const getPaddingStyle = (isHighlighting) => isHighlighting ? 'p-default mt-6' : 'p-default mt-6';
+
+    const renderButtonsSection = (buttons, { className = '', buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
+    const renderButton = (buttonClassName = '') => (button, index) => {
+        const { text, icon, iconRight, version, ...rest } = button || {};
+        const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
+        const iconVersion = icon?.iconVersion ? icon?.iconVersion : iconVersionDefault;
+        return text || icon?.icon ? (jsx(Button, { className: buttonClassName, appendLeft: renderButtonIcon({ ...icon, iconVersion }), appendRight: renderButtonIcon({ ...iconRight, iconVersion }), version: version, text: text, ...rest }, index ? String(index) : '')) : null;
+    };
+    const DEFAULT_ICON_W = 24;
+    const renderButtonIcon = (icon) => icon?.icon || icon?.src ? (jsx(Img, { image: icon, width: String(icon?.size?.width || DEFAULT_ICON_W), height: String(DEFAULT_ICON_W) })) : null;
+
+    const Text = JSX(({ children, ...style }) => (jsx("span", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
+
+    const descriptionSize = 'text-l';
+
+    const renderCardInfo = (cell, i) => {
+        const { title, description, buttons } = cell;
+        return (jsxs("div", { className: "py-5 border-b border-main-divider", children: [title ? (jsx("div", { className: "opacity-80", children: jsx(Text, { size: "text-m", color: "text-secondary-text", children: title }) })) : null, description ? (jsx("div", { className: "mt-1", children: jsx(Text, { size: descriptionSize, color: "text-primary-text", children: description }) })) : null, buttons?.length ? (jsx("div", { className: "text-primary-main", children: renderButtonsSection(buttons) })) : null] }, String(i)));
+    };
+
+    const VISIBLE_CELLS_COUNT = 1;
+    const CarouselTariffsCard = JSX(({ className = '', title, icon, isHighlighting = false, button, cardCells = [], ...rest }) => {
+        const cellsNode = cardCells.map(renderCardInfo);
+        const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
+        const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
+        return (jsxs(BlockWrapper, { className: style('relative border border-gray flex flex-col', getPaddingStyle(isHighlighting), className), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock(icon), title ? jsx(Heading, { className: "text-center pt-2", headingType: "h5", title: title }) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
     });
+    const renderIconBlock = (icon) => (jsx("div", { className: "w-[267px] min-w-[267px] self-center", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }));
+    const renderFoldButton$1 = ({ isUnfolded, onToggle }) => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center", onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16" })] }));
+    const renderHitIcon = () => (jsxs("div", { className: "absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "23", height: "22" }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: "\u0425\u0418\u0422" })] }));
 
-    const Img = JSX((props) => jsx(ImgInner, { ...props, isMobile: true }));
+    const DEFAULT_GAP = 14;
+    /*
+      Horizontal padding used on a container above SwipeListControl.
+      Same value used on a SwipeListControlChildren container to compensate it
+      and get rid of a clipping effect caused by overflow: hidden.
+     */
+    const DEFAULT_PADDING = 16;
+    const SwipeListControl = JSX(({ className = '', gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, minHeight, children, onVisibleIndicesChange, listType = 'horizontal-list', version, }) => {
+        const itemCount = Array.isArray(children) ? children.length : 0;
+        const [containerRef, scroll] = useSwipeListScroll({
+            itemCount,
+            onVisibleIndicesChange,
+        });
+        const [activeIndex] = scroll.visibleIndicesRange;
+        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 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 headingStyle = (isFillGradient = false) => (isFillGradient ? 'text-white' : '');
     const subtitleStyle = (isFillGradient = false) => `text-s mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`;
@@ -817,37 +1023,6 @@
         return data || {};
     }
 
-    const blockRouterEventBus = new EventBus();
-
-    function useBlockIntersectionObserver(block) {
-        const observerCallback = useCallback((entries) => {
-            if (!block || !entries?.length) {
-                return;
-            }
-            const intersection = entries[entries.length - 1];
-            blockRouterEventBus.fire('intersection', { block, intersection });
-        }, [block]);
-        return useIntersectionObserver(observerCallback, { sensitivity: 1 });
-    }
-
-    const blockStyles = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
-        gray: 'bg-main-divider text-primary-text',
-        transparent: 'bg-transparent text-primary-text',
-        '': '',
-    };
-    const BlockWrapper = JSX(({ className = '', version = 'primary', isTheme = true, block, tag = 'section', role, children, }) => {
-        const Tag = tag;
-        const ref = useBlockIntersectionObserver(block);
-        const [isHidden, setHidden] = useState(false);
-        useEffect(() => defaultEventBus.subscribe('tab', (event) => {
-            setHidden(Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)));
-        }), [block]);
-        return (jsx(Tag, { className: style(groupStyle(Boolean(version && isTheme)), blockStyles[version], isHidden ? 'hidden' : '', className), ...(version && isTheme ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
-    });
-    const groupStyle = (isGroup) => (isGroup ? 'group' : '');
-
     const CloseButton = JSX(({ className, onClick }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-1 bg-transparent border-none', className), onClick: onClick, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
 
     function assertUnreachable(x) {
@@ -1180,50 +1355,6 @@
         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 }));
     });
 
-    const DEFAULT_SLOT_NAME = null;
-
-    const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
-
-    const DEFAULT_ANCESTORS = [];
-    const defaultStyle = 'col-span-12';
-    function renderBlock(block, options, { className, ...extraProps } = {}) {
-        const { key, blockDecorator = defaultBlockDecorator, blocksRegistry = {}, ancestors = DEFAULT_ANCESTORS, } = options;
-        const { type } = block;
-        if (!(type && type in blocksRegistry)) {
-            console.warn(`No block with "${type}" is registered`);
-        }
-        const BlockComponent = type && blocksRegistry[type];
-        return blockDecorator({
-            blockClassName: style('scroll-mt-12', // TODO scroll-mt-12 ? here?
-            className, block.style || defaultStyle),
-            block,
-            ancestors,
-            // Adjusted by decorator block and blockClassName
-            render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
-                const { content } = adjustedBlock;
-                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, block: block, options: options, ...content, ...extraProps }, key)) : null;
-            },
-        }, key);
-    }
-
-    const EMPTY_ANCESTORS = [];
-    const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, renderProps = renderBlock, ...options }) => (blocks || []).map((_, j) => renderProps(_, {
-        ...options,
-        key: `${key ? key : _.type}-${j}`,
-        ancestors: options.parent
-            ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
-            : ancestors,
-    }));
-
-    function renderChildren({ children, block, options, renderProps, }) {
-        if (children) {
-            return children;
-        }
-        return block && options
-            ? renderBlocksList(block.blocks, { ...options, parent: block, renderProps })
-            : null;
-    }
-
     const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => {
         return (jsxs("button", { className: style('flex justify-center w-full px-0 py-5 border border-transparent outline-none focus:border-primary-text', disabled
                 ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
@@ -1233,30 +1364,6 @@
                     }, className: "flex-shrink-0 my-auto", width: "20", height: "20" })) : 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 }) => {
         return (jsx(BlockWrapper, { className: style('border-b border-solid border-main-divider w-full', 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 }) }) }));
     });
@@ -1461,45 +1568,44 @@
         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 Paragraph = JSX(({ children, ...style }) => (jsx("p", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
-
     const headlineVersionStyles = {
         XXL: {
-            wrapper: 'gap-[18px]',
             title: { headingType: 'h0', as: 'h1' },
             descriptionSize: 'text-h5',
+            descriptionStyle: 'mt-5',
         },
         XL: {
-            wrapper: 'gap-4',
             title: { headingType: 'h1', as: 'h1' },
             descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-4',
         },
         L: {
-            wrapper: 'gap-4',
             title: { headingType: 'h2', as: 'h2' },
             descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-4',
         },
         M: {
-            wrapper: 'gap-3',
             title: { headingType: 'h3', as: 'h3' },
             descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-3',
         },
         S: {
-            wrapper: 'gap-2',
             title: { headingType: 'h4', as: 'h4' },
             descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-2',
         },
         XS: {
-            wrapper: 'gap-2',
             title: { headingType: 'h5', as: 'h5' },
             descriptionSize: 'text-l-light',
+            descriptionStyle: 'mt-2',
         },
     };
 
     const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, isPadding = true, isTheme = false, version = '', ...rest }) => {
         const versionStyle = headlineVersionStyles[headlineVersion];
         const paddingStyle = isPadding ? 'p-default' : '';
-        return (jsxs(BlockWrapper, { className: style('flex flex-col', paddingStyle, versionStyle.wrapper, className), version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, align: align, children: description })) : null] }));
+        const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
+        return (jsxs(BlockWrapper, { className: style(paddingStyle, className), version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, align: align, ...descriptionStyle, children: description })) : null] }));
     });
 
     const ImgBlock = JSX((props) => {
@@ -1582,16 +1688,6 @@
     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 renderButtonsSection = (buttons, { className = '', buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
-    const renderButton = (buttonClassName = '') => (button, index) => {
-        const { text, icon, iconRight, version, ...rest } = button || {};
-        const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
-        const iconVersion = icon?.iconVersion ? icon?.iconVersion : iconVersionDefault;
-        return text || icon?.icon ? (jsx(Button, { className: buttonClassName, appendLeft: renderButtonIcon({ ...icon, iconVersion }), appendRight: renderButtonIcon({ ...iconRight, iconVersion }), version: version, text: text, ...rest }, index ? String(index) : '')) : null;
-    };
-    const DEFAULT_ICON_W = 24;
-    const renderButtonIcon = (icon) => icon?.icon || icon?.src ? (jsx(Img, { image: icon, width: String(icon?.size?.width || DEFAULT_ICON_W), height: String(DEFAULT_ICON_W) })) : null;
-
     const DOT_SIZE_MAP = {
         L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4',
         M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3',
@@ -1786,6 +1882,8 @@
     VerticalLayout.childrenTypes = [];
 
     const Blocks = {
+        Carousel,
+        CarouselTariffsCard,
         ComparisonTable,
         Footer,
         Header,
@@ -1955,7 +2053,7 @@
         return (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]), []);
     }
 
-    const packageVersion = "0.10.6";
+    const packageVersion = "0.10.7";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;