@redneckz/wildless-cms-uni-blocks 0.12.4 → 0.12.6

package/mobile/bundle/bundle.umd.js

@@ -327,6 +327,240 @@
         return (jsx(Tag, { className: style('font-sans', isGroup ? 'group' : '', blockStyles[version], isHidden ? 'hidden' : '', padding || defaultPadding, className), ...(isGroup ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
     });
 
+    const mobileHeadingTagMap = {
+        h1: 'h1',
+        h2: 'h1',
+        h3: 'h2',
+        h4: 'h2',
+        h5: 'h3',
+        h6: 'h3',
+    };
+    const headingTag = (tag) => mobileHeadingTagMap[tag] || 'h3';
+
+    const styles = {
+        h0: 'text-h0',
+        h1: 'text-h1',
+        h2: 'text-h2',
+        h3: 'text-h3',
+        h4: 'text-h4',
+        h5: 'text-h5',
+        h6: 'text-h6', // 20
+    };
+    const Heading = JSX(({ className = '', headingType = 'h3', as = 'h3', title, children }) => {
+        const Tag = headingTag(as);
+        return (jsx(Tag, { className: style('font-sans m-0', styles[headingType], className), children: title || children }));
+    });
+
+    const Paragraph = JSX(({ children, ...styleProps }) => (jsx("p", { className: style('font-sans', Object.values(styleProps)), children: children })));
+
+    const headlineVersionStyles = {
+        XXL: {
+            title: { headingType: 'h0', as: 'h1' },
+            descriptionSize: 'text-h5',
+            descriptionStyle: 'mt-m',
+        },
+        XL: {
+            title: { headingType: 'h1', as: 'h1' },
+            descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-s',
+        },
+        L: {
+            title: { headingType: 'h2', as: 'h2' },
+            descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-s',
+        },
+        M: {
+            title: { headingType: 'h3', as: 'h2' },
+            descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-text',
+        },
+        S: {
+            title: { headingType: 'h4', as: 'h2' },
+            descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-xs',
+        },
+        XS: {
+            title: { headingType: 'h5', as: 'h2' },
+            descriptionSize: 'text-l-light',
+            descriptionStyle: 'mt-xs',
+        },
+    };
+
+    const Headline = JSX(({ className, version = '', headlineVersion = 'XL', title, description, align = 'text-center', as, isPadding = true, isTheme = false, ...rest }) => {
+        const versionStyle = headlineVersionStyles[headlineVersion];
+        const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
+        return (jsxs(BlockWrapper, { className: className, defaultPadding: isPadding ? 'p-default' : '', 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 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) {
+                onIntersection(idx || 0, entries[entries.length - 1]);
+            }
+        }, [onIntersection, idx]);
+        const ref = useIntersectionObserver(observerCallback, observerOptions);
+        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%]'];
+    const SwipeListContainer = JSX(({ className = '', containerRef, activeIndex, visibleItemCount = 0, gap = 0, padding = 0, listType = 'horizontal-list', snapAlign = 'snap-center', minHeight, children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
+        const observerOptions = {
+            sensitivity: 1,
+            rootRef: containerRef,
+        };
+        const itemsVisibilityListRef = useRef([]);
+        const handleIntersection = useCallback((idx, entry) => {
+            const itemsVisibilityList = [...(itemsVisibilityListRef.current || [])];
+            itemsVisibilityList[idx] = entry;
+            itemsVisibilityListRef.current = itemsVisibilityList;
+            onVisibleItemsChange && onVisibleItemsChange(itemsVisibilityList);
+            onVisibleIndicesChange && onVisibleIndicesChange(getVisibleIndices(itemsVisibilityList));
+        }, [onVisibleItemsChange, onVisibleIndicesChange]);
+        const additionPadding = visibleItemCount > 0 ? gap * Number(visibleItemCount) - 1 : 0;
+        const isVerticalList = listType === 'vertical-list';
+        const isHorizontalList = listType === 'horizontal-list';
+        const containerStyle = {
+            ...(isHorizontalList ? getContainerOffset(padding, additionPadding) : {}),
+            ...(isVerticalList ? getContainerHeight(minHeight) : {}),
+            gap: `${gap}px`,
+        };
+        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) => ({
+        marginLeft: `${-padding}px`,
+        marginRight: `${-padding}px`,
+        paddingLeft: `${padding}px`,
+        paddingRight: `${padding + additionalPadding}px`,
+    });
+    const getVisibleIndices = (itemsVisibilityList) => itemsVisibilityList
+        .map((_, i) => [_, i])
+        .filter(([_]) => _ && _.intersectionRatio >= 0.9)
+        .map(([, i]) => i);
+
+    const containerStyles = {
+        'horizontal-list': 'mx-auto mt-5 w-fit',
+        'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
+    };
+    const activeDotStyles = {
+        'horizontal-list': 'w-6',
+        'vertical-list': 'h-6',
+    };
+    const dotStyle = 'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white group-data-transparent:bg-white';
+    const inactiveDotStyle = 'w-2 h-2 opacity-30';
+    const SwipeListControlDots = JSX(({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list', version }) => {
+        const handleClick = (idx) => {
+            if (idx !== activeIndex && containerRef?.current) {
+                containerRef.current.children[idx]?.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                });
+            }
+        };
+        return dotCount ? (jsx("div", { className: style('flex gap-2', containerStyles[listType], version ? 'group' : ''), ...(version ? { 'data-ver': version } : {}), children: new Array(dotCount).fill(null).map((_, idx) => (jsx("div", { className: `${dotStyle} ${idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle}`, role: "button", "aria-hidden": true, onClick: () => handleClick(idx) }, String(idx)))) })) : null;
+    });
+
+    const areArraysEqual = (as, bs) => as === bs || Boolean(as && bs && as?.length === bs?.length && as.every((_, i) => _ === bs[i]));
+
+    const defaultDiscriminator = (_) => _;
+    const maxBy = (discriminator = defaultDiscriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
+
+    const minBy = (discriminator = defaultDiscriminator) => maxBy((_) => -discriminator(_));
+
+    const getItemWidth = (container) => (itemCount) => container.scrollWidth / itemCount;
+    const scrollBy = (container) => (itemCount, delta) => {
+        container.scrollBy({ left: delta * getItemWidth(container)(itemCount), behavior: 'smooth' });
+    };
+
+    const scrollToEnd = (container) => {
+        container.scrollTo({ left: container.scrollWidth, behavior: 'smooth' });
+    };
+
+    const scrollToStart = (container) => {
+        container.scrollTo({ left: 0, behavior: 'smooth' });
+    };
+
+    const useSwipeListScroll = ({ itemCount, isCyclic, onVisibleIndicesChange, }) => {
+        const containerRef = useRef(null);
+        const [visibleIndices, setVisibleIndices] = useState([]);
+        const handleVisibleIndicesChange = useCallback((indices) => {
+            setVisibleIndices((prevIndices) => areArraysEqual(prevIndices, indices) ? prevIndices : indices);
+            onVisibleIndicesChange && onVisibleIndicesChange(indices);
+        }, [itemCount]);
+        const [minIndex, maxIndex] = visibleIndices.length
+            ? [minBy()(visibleIndices), maxBy()(visibleIndices)]
+            : [-1, -1];
+        const canScrollLeft = minIndex > 0;
+        const canScrollRight = maxIndex < itemCount - 1;
+        const scrollLeft = useCallback(() => {
+            if (!containerRef.current) {
+                return;
+            }
+            if (isCyclic && !canScrollLeft) {
+                scrollToEnd(containerRef.current);
+            }
+            else {
+                scrollBy(containerRef.current)(itemCount, -1);
+            }
+        }, [isCyclic, itemCount, canScrollLeft]);
+        const scrollRight = useCallback(() => {
+            if (!containerRef.current) {
+                return;
+            }
+            if (isCyclic && !canScrollRight) {
+                scrollToStart(containerRef.current);
+            }
+            else {
+                scrollBy(containerRef.current)(itemCount, 1);
+            }
+        }, [itemCount, isCyclic, canScrollRight]);
+        return [
+            containerRef,
+            {
+                scrollLeft,
+                scrollRight,
+                canScrollLeft: isCyclic || canScrollLeft,
+                canScrollRight: isCyclic || canScrollRight,
+                visibleIndicesRange: [minIndex, maxIndex],
+                handleVisibleIndicesChange,
+            },
+        ];
+    };
+
+    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, version, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, minHeight, children, onVisibleIndicesChange, listType = 'horizontal-list', }) => {
+        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] }));
+    });
+
     function useRouter() {
         return useRouter._impl();
     }
@@ -417,6 +651,20 @@
         return image.icon ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: image?.iconVersion, name: image.icon, ...iconProps })) : (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, pathPrefix: pathPrefix }));
     });
 
+    const Text = JSX(({ children, ...styleProps }) => (jsx("span", { className: style('font-sans', Object.values(styleProps)), children: children })));
+
+    const bonusBenefitAlign = 'text-left';
+
+    const bonusBenefitStyles = 'justify-between p-4 h-full border border-gray';
+
+    const renderBonusBenefit = ({ icon, title, description }, i) => (jsxs("div", { className: style('flex flex-col', bonusBenefitStyles, !description && !title ? 'justify-center' : ''), children: [title ? (jsx(Text, { size: "text-h6", font: "font-normal", align: bonusBenefitAlign, children: title })) : null, icon ? jsx(Img, { image: icon, height: "180", className: "w-auto" }) : null, description ? (jsx(Text, { size: "text-h6", font: "font-normal", align: bonusBenefitAlign, children: description })) : null] }, String(i)));
+
+    const renderBonusBenefits = (bonusBenefits, columnsCount, cardTextAlign) => (jsx(SwipeListControl, { children: bonusBenefits.map((_, i) => renderBonusBenefit({ ..._ }, i)) }));
+
+    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: style('p-default', className), defaultPadding: "p-default", ...rest, children: [jsx(Headline, { className: "mb-4 sm:mb-8", isPadding: false, title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length
+                ? renderBonusBenefits(bonusBenefits)
+                : null] })));
+
     const useDialog = (id = '') => ({
         open: (message) => defaultEventBus.fire('dialog', { type: 'open', id, message }),
         close: () => defaultEventBus.fire('dialog', { type: 'close' }),
@@ -610,8 +858,6 @@
         maximumFractionDigits: fractionDigits,
     }).format(Number(_) || 0);
 
-    const Text = JSX(({ children, ...style }) => (jsx("span", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
-
     const Input = JSX(({ key, className = '', inputClassName = '', id, name, type = 'text', label, placeholder, value = '', valid = true, children, onChange, onFocus, onBlur, pattern, }) => {
         const handleChange = useCallback((e) => {
             onChange && onChange(e.target?.value || '');
@@ -625,256 +871,80 @@
 
     const NumberInput = JSX((props) => {
         const { onChange, min, max, defaultValue = '0', fractionDigits = 0, ...inputProps } = props;
-        const normalizedProps = useNormalizedInput(props, {
-            normalize: (_ = defaultValue) => min && max ? String(clamp(Number(sanitizeNumberStr(_)), min, max)) : sanitizeNumberStr(_),
-            format: toLocalNumberFormat(fractionDigits),
-        });
-        const handleChange = useCallback((_) => onChange && onChange(sanitizeNumberStr(_)), [onChange]);
-        return jsx(Input, { onChange: handleChange, ...inputProps, ...normalizedProps });
-    });
-    const sanitizeNumberStr = (_ = '') => _.replaceAll(',', '.')
-        .replace(/[^\d.]/g, '')
-        .replace(/([^.]*\.[^.]*)\./, '$1');
-
-    const CurrencyInput = JSX((props) => (jsx(NumberInput, { ...props, fractionDigits: 2, children: jsx("div", { className: "absolute right-4 bottom-4", children: jsx(Text, { size: "text-xl", font: "font-light", children: "\u20BD" }) }) })));
-
-    const mobileHeadingTagMap = {
-        h1: 'h1',
-        h2: 'h1',
-        h3: 'h2',
-        h4: 'h2',
-        h5: 'h3',
-        h6: 'h3',
-    };
-    const headingTag = (tag) => mobileHeadingTagMap[tag] || 'h3';
-
-    const styles = {
-        h0: 'text-h0',
-        h1: 'text-h1',
-        h2: 'text-h2',
-        h3: 'text-h3',
-        h4: 'text-h4',
-        h5: 'text-h5',
-        h6: 'text-h6', // 20
-    };
-    const Heading = JSX(({ className = '', headingType = 'h3', as = 'h3', title, children }) => {
-        const Tag = headingTag(as);
-        return (jsx(Tag, { className: style('font-sans m-0', styles[headingType], className), children: title || children }));
-    });
-
-    const DEFAULT_TITLE = 'Укажите сумму перевода';
-    const DEFAULT_LABEL = 'Сумма перевода';
-    const DEFAULT_PLACEHOLDER = '1500';
-    const FORM_URL = 'https://www.rshb.ru/p2p/';
-    const AMOUNT_KEY = 'amount';
-    const INITIAL_FORM_STATE = {
-        [AMOUNT_KEY]: 1500,
-    };
-    const CardTransfer = JSX(({ className = '', title = DEFAULT_TITLE, label = DEFAULT_LABEL, placeholder = DEFAULT_PLACEHOLDER, button, ...rest }) => {
-        const [{ amount }, { field }] = useForm(INITIAL_FORM_STATE);
-        const isDisabled = amount <= 0;
-        const buttonStyle = isDisabled
-            ? getDisabledButtonClasses({ version: button?.version })
-            : getRegularButtonClasses({ className: 'text-white', version: button?.version });
-        const link = useLink();
-        return (jsxs(BlockWrapper, { className: style('flex flex-col items-center', className), defaultPadding: "p-default", ...rest, children: [title ? (jsx(Heading, { className: "pb-5 xl:pb-9 self-start xl:self-center", headingType: "h2", title: title })) : null, jsxs("form", { className: "w-full xl:max-w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, valid: !isDisabled, placeholder: placeholder, label: label, ...field(AMOUNT_KEY, { parse: Number, format: String }) }), button?.text ? (jsx("button", { type: "submit", className: style('w-full p-4 mt-5 xl:mt-6', buttonStyle), disabled: isDisabled, ...link(button), children: button.text })) : 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 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 block && options
-            ? renderBlocksList(block.blocks, { ...options, parent: block, renderProps })
-            : null;
-    }
-
-    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) {
-                onIntersection(idx || 0, entries[entries.length - 1]);
-            }
-        }, [onIntersection, idx]);
-        const ref = useIntersectionObserver(observerCallback, observerOptions);
-        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%]'];
-    const SwipeListContainer = JSX(({ className = '', containerRef, activeIndex, visibleItemCount = 0, gap = 0, padding = 0, listType = 'horizontal-list', snapAlign = 'snap-center', minHeight, children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
-        const observerOptions = {
-            sensitivity: 1,
-            rootRef: containerRef,
-        };
-        const itemsVisibilityListRef = useRef([]);
-        const handleIntersection = useCallback((idx, entry) => {
-            const itemsVisibilityList = [...(itemsVisibilityListRef.current || [])];
-            itemsVisibilityList[idx] = entry;
-            itemsVisibilityListRef.current = itemsVisibilityList;
-            onVisibleItemsChange && onVisibleItemsChange(itemsVisibilityList);
-            onVisibleIndicesChange && onVisibleIndicesChange(getVisibleIndices(itemsVisibilityList));
-        }, [onVisibleItemsChange, onVisibleIndicesChange]);
-        const additionPadding = visibleItemCount > 0 ? gap * Number(visibleItemCount) - 1 : 0;
-        const isVerticalList = listType === 'vertical-list';
-        const isHorizontalList = listType === 'horizontal-list';
-        const containerStyle = {
-            ...(isHorizontalList ? getContainerOffset(padding, additionPadding) : {}),
-            ...(isVerticalList ? getContainerHeight(minHeight) : {}),
-            gap: `${gap}px`,
-        };
-        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) => ({
-        marginLeft: `${-padding}px`,
-        marginRight: `${-padding}px`,
-        paddingLeft: `${padding}px`,
-        paddingRight: `${padding + additionalPadding}px`,
-    });
-    const getVisibleIndices = (itemsVisibilityList) => itemsVisibilityList
-        .map((_, i) => [_, i])
-        .filter(([_]) => _ && _.intersectionRatio >= 0.9)
-        .map(([, i]) => i);
-
-    const containerStyles = {
-        'horizontal-list': 'mx-auto mt-5 w-fit',
-        'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
-    };
-    const activeDotStyles = {
-        'horizontal-list': 'w-6',
-        'vertical-list': 'h-6',
-    };
-    const dotStyle = 'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white group-data-transparent:bg-white';
-    const inactiveDotStyle = 'w-2 h-2 opacity-30';
-    const SwipeListControlDots = JSX(({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list', version }) => {
-        const handleClick = (idx) => {
-            if (idx !== activeIndex && containerRef?.current) {
-                containerRef.current.children[idx]?.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'nearest',
-                });
-            }
-        };
-        return dotCount ? (jsx("div", { className: style('flex gap-2', containerStyles[listType], version ? 'group' : ''), ...(version ? { 'data-ver': version } : {}), children: new Array(dotCount).fill(null).map((_, idx) => (jsx("div", { className: `${dotStyle} ${idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle}`, role: "button", "aria-hidden": true, onClick: () => handleClick(idx) }, String(idx)))) })) : null;
+        const normalizedProps = useNormalizedInput(props, {
+            normalize: (_ = defaultValue) => min && max ? String(clamp(Number(sanitizeNumberStr(_)), min, max)) : sanitizeNumberStr(_),
+            format: toLocalNumberFormat(fractionDigits),
+        });
+        const handleChange = useCallback((_) => onChange && onChange(sanitizeNumberStr(_)), [onChange]);
+        return jsx(Input, { onChange: handleChange, ...inputProps, ...normalizedProps });
     });
+    const sanitizeNumberStr = (_ = '') => _.replaceAll(',', '.')
+        .replace(/[^\d.]/g, '')
+        .replace(/([^.]*\.[^.]*)\./, '$1');
 
-    const areArraysEqual = (as, bs) => as === bs || Boolean(as && bs && as?.length === bs?.length && as.every((_, i) => _ === bs[i]));
+    const CurrencyInput = JSX((props) => (jsx(NumberInput, { ...props, fractionDigits: 2, children: jsx("div", { className: "absolute right-4 bottom-4", children: jsx(Text, { size: "text-xl", font: "font-light", children: "\u20BD" }) }) })));
 
-    const defaultDiscriminator = (_) => _;
-    const maxBy = (discriminator = defaultDiscriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
+    const DEFAULT_TITLE = 'Укажите сумму перевода';
+    const DEFAULT_LABEL = 'Сумма перевода';
+    const DEFAULT_PLACEHOLDER = '1500';
+    const FORM_URL = 'https://www.rshb.ru/p2p/';
+    const AMOUNT_KEY = 'amount';
+    const INITIAL_FORM_STATE = {
+        [AMOUNT_KEY]: 1500,
+    };
+    const CardTransfer = JSX(({ className = '', title = DEFAULT_TITLE, label = DEFAULT_LABEL, placeholder = DEFAULT_PLACEHOLDER, button, ...rest }) => {
+        const [{ amount }, { field }] = useForm(INITIAL_FORM_STATE);
+        const isDisabled = amount <= 0;
+        const buttonStyle = isDisabled
+            ? getDisabledButtonClasses({ version: button?.version })
+            : getRegularButtonClasses({ className: 'text-white', version: button?.version });
+        const link = useLink();
+        return (jsxs(BlockWrapper, { className: style('flex flex-col items-center', className), defaultPadding: "p-default", ...rest, children: [title ? (jsx(Heading, { className: "pb-5 xl:pb-9 self-start xl:self-center", headingType: "h2", title: title })) : null, jsxs("form", { className: "w-full xl:max-w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, valid: !isDisabled, placeholder: placeholder, label: label, ...field(AMOUNT_KEY, { parse: Number, format: String }) }), button?.text ? (jsx("button", { type: "submit", className: style('w-full p-4 mt-5 xl:mt-6', buttonStyle), disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
+    });
 
-    const minBy = (discriminator = defaultDiscriminator) => maxBy((_) => -discriminator(_));
+    const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
 
-    const getItemWidth = (container) => (itemCount) => container.scrollWidth / itemCount;
-    const scrollBy = (container) => (itemCount, delta) => {
-        container.scrollBy({ left: delta * getItemWidth(container)(itemCount), behavior: 'smooth' });
-    };
+    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 scrollToEnd = (container) => {
-        container.scrollTo({ left: container.scrollWidth, behavior: 'smooth' });
-    };
+    const DEFAULT_SLOT_NAME = null;
 
-    const scrollToStart = (container) => {
-        container.scrollTo({ left: 0, behavior: 'smooth' });
-    };
+    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,
+    }));
 
-    const useSwipeListScroll = ({ itemCount, isCyclic, onVisibleIndicesChange, }) => {
-        const containerRef = useRef(null);
-        const [visibleIndices, setVisibleIndices] = useState([]);
-        const handleVisibleIndicesChange = useCallback((indices) => {
-            setVisibleIndices((prevIndices) => areArraysEqual(prevIndices, indices) ? prevIndices : indices);
-            onVisibleIndicesChange && onVisibleIndicesChange(indices);
-        }, [itemCount]);
-        const [minIndex, maxIndex] = visibleIndices.length
-            ? [minBy()(visibleIndices), maxBy()(visibleIndices)]
-            : [-1, -1];
-        const canScrollLeft = minIndex > 0;
-        const canScrollRight = maxIndex < itemCount - 1;
-        const scrollLeft = useCallback(() => {
-            if (!containerRef.current) {
-                return;
-            }
-            if (isCyclic && !canScrollLeft) {
-                scrollToEnd(containerRef.current);
-            }
-            else {
-                scrollBy(containerRef.current)(itemCount, -1);
-            }
-        }, [isCyclic, itemCount, canScrollLeft]);
-        const scrollRight = useCallback(() => {
-            if (!containerRef.current) {
-                return;
-            }
-            if (isCyclic && !canScrollRight) {
-                scrollToStart(containerRef.current);
-            }
-            else {
-                scrollBy(containerRef.current)(itemCount, 1);
-            }
-        }, [itemCount, isCyclic, canScrollRight]);
-        return [
-            containerRef,
-            {
-                scrollLeft,
-                scrollRight,
-                canScrollLeft: isCyclic || canScrollLeft,
-                canScrollRight: isCyclic || canScrollRight,
-                visibleIndicesRange: [minIndex, maxIndex],
-                handleVisibleIndicesChange,
-            },
-        ];
-    };
+    function renderChildren({ children, block, options, renderProps, }) {
+        if (children) {
+            return children;
+        }
+        return block && options
+            ? renderBlocksList(block.blocks, { ...options, parent: block, renderProps })
+            : null;
+    }
 
     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'
@@ -882,7 +952,7 @@
     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 scrollButtonStyle$1 = '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;
@@ -906,7 +976,7 @@
                 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] }));
+        return (jsxs("div", { children: [renderBlur(isBlur, scroll), canMoveLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'left-8' : 'left-0'), onClick: handleScrollLeft })) : null, canMoveRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle$1, 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;
 
@@ -958,10 +1028,13 @@
         return (jsx(Tag, { className: style('block', className), ...(href ? linkProps : {}), children: children }));
     });
 
+    const cardTitleFont = 'font-light';
+    const cardDescriptionColor = '';
+
     const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], href, target, ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('border border-gray', className), defaultPadding: "p-0", ...rest, children: jsxs(LinkWrapper, { className: "flex", href: href, target: target, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", children: [icon?.icon ? jsx(Img, { image: icon }) : null, icon?.src ? jsx(Img, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: "mb-3.5", headingType: "h5", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$2) })) : null] })] }) }));
+        return (jsx(BlockWrapper, { className: style('border border-gray', className), defaultPadding: "p-lg sm:p-0", ...rest, children: jsxs(LinkWrapper, { className: "sm:flex sm:items-center", href: href, target: target, children: [jsx("div", { className: "min-w-[200px] flex justify-center", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }), jsxs("div", { className: "sm:px-3 py-xl", children: [title ? jsx(Heading, { className: "mb-2 sm:mb-3.5", headingType: "h6", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-2 sm:gap-3", children: list?.map(renderList$2) })) : null] })] }) }));
     });
-    const renderList$2 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: "text-h6", children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
+    const renderList$2 = (_, i) => (jsxs("div", { className: "flex flex-row-reverse justify-between gap-y-1 sm:flex-col", children: [_.title ? (jsx(Text, { size: "text-l", font: cardTitleFont, children: _.title })) : null, _.description ? (jsx(Paragraph, { size: "text-l", font: "font-light", color: cardDescriptionColor, children: _.description })) : null] }, String(i)));
 
     const DOT_SIZE_MAP = {
         L: 'w-1.5 h-1.5 mr-4',
@@ -1032,47 +1105,6 @@
 
     const SocialMedia = JSX(({ className = '', media }) => (jsx("div", { className: `flex gap-2 items-start justify-start ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { ..._ }, String(index)))) })));
 
-    const Paragraph = JSX(({ children, ...style }) => (jsx("p", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
-
-    const headlineVersionStyles = {
-        XXL: {
-            title: { headingType: 'h0', as: 'h1' },
-            descriptionSize: 'text-h5',
-            descriptionStyle: 'mt-m',
-        },
-        XL: {
-            title: { headingType: 'h1', as: 'h1' },
-            descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-s',
-        },
-        L: {
-            title: { headingType: 'h2', as: 'h2' },
-            descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-s',
-        },
-        M: {
-            title: { headingType: 'h3', as: 'h2' },
-            descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-text',
-        },
-        S: {
-            title: { headingType: 'h4', as: 'h2' },
-            descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-xs',
-        },
-        XS: {
-            title: { headingType: 'h5', as: 'h2' },
-            descriptionSize: 'text-l-light',
-            descriptionStyle: 'mt-xs',
-        },
-    };
-
-    const Headline = JSX(({ className, version = '', headlineVersion = 'XL', title, description, align = 'text-center', as, isPadding = true, isTheme = false, ...rest }) => {
-        const versionStyle = headlineVersionStyles[headlineVersion];
-        const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
-        return (jsxs(BlockWrapper, { className: className, defaultPadding: isPadding ? 'p-default' : '', 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 BORDER_STYLE = 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
 
     const CarouselRecommendationCard = JSX(({ className = '', description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', ...rest }) => {
@@ -1122,23 +1154,6 @@
     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 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, version, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, minHeight, children, onVisibleIndicesChange, listType = 'horizontal-list', }) => {
-        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';
 
@@ -1282,7 +1297,7 @@
 
     const getIconName = (isUnfolded) => isUnfolded ? 'ArrowUpSolidIcon' : 'ArrowDownSolidIcon';
 
-    const labelSize$1 = 'text-l';
+    const labelSize = 'text-l';
 
     const iconBgStyles = {
         primary: 'bg-main-divider',
@@ -1325,7 +1340,7 @@
         })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
     const renderPrimaryFoldButton = ({ label, labelIconBgVersion, icon, onToggle, labelIcon, }) => {
-        return (jsxs("button", { className: style('border-none bg-transparent px-0 flex justify-between items-center w-full group/button', labelIcon?.icon ? 'py-2' : 'py-5'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main", children: [renderRoundedIcon(labelIcon, labelIconBgVersion), label ? (jsx(Text, { size: labelSize$1, font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
+        return (jsxs("button", { className: style('border-none bg-transparent px-0 flex justify-between items-center w-full group/button', labelIcon?.icon ? 'py-2' : 'py-5'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main", children: [renderRoundedIcon(labelIcon, labelIconBgVersion), label ? (jsx(Text, { size: labelSize, font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
     };
 
     const Contacts = JSX(({ className = '', items, hasButton }) => (jsxs("div", { className: className, children: [items?.length ? items.map(renderContactsGroup) : 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] })));
@@ -1462,7 +1477,7 @@
     const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-lg font-sans overflow-hidden', padding || defaultPadding, className), children: [backImage ? jsx("div", { className: "absolute bottom-0 right-0 z-0", children: backImage }) : null, title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: "grow relative flex flex-wrap sm:flex-nowrap justify-between items-stretch gap-lg", children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-lg max-w-[600px] xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), buttons] }), renderImageContainer(rightImage, { className: '-order-1 sm:order-1', imageAlign })] })] })));
     const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
 
-    const renderDescription$1 = (description) => description ? (jsx("div", { className: "mb-5 pt-0.5 sm:mb-0 sm:pt-0", children: jsx(Text, { size: "text-xl", "font-weight": "light", children: description }) })) : null;
+    const renderDescription$2 = (description) => description ? (jsx("div", { className: "mb-5 pt-0.5 sm:mb-0 sm:pt-0", children: jsx(Text, { size: "text-xl", "font-weight": "light", children: description }) })) : null;
 
     const renderList$1 = (items) => {
         return items?.length ? (jsx(List, { items: items, className: "text-l-light mb-2 last:mb-0" })) : (jsx("span", { className: "text-m-light text-secondary-text", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
@@ -1470,7 +1485,7 @@
 
     const MobileAppTile = JSX(({ className, padding, alignTitle = 'left', buttons = [], description, headingType = 'h4', image, items, qr, title = 'Мобильное приложение', version = 'primary', ...rest }) => {
         const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
-        return (jsx(BlockWrapper, { className: style('min-h-80', className), defaultPadding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-default", title: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', AlignText[alignTitle]) })) : null, backImage: image?.src ? jsx(Img, { image: image }) : null, buttons: renderButtonsSection(buttons, { isVertical: buttons.length > 3 }), children: [renderDescription$1(description), jsxs("div", { className: "flex flex-1 gap-s items-center", children: [qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList$1(items)] })] }) }));
+        return (jsx(BlockWrapper, { className: style('min-h-80', className), padding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-default", title: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', AlignText[alignTitle]) })) : null, backImage: image?.src ? jsx(Img, { image: image }) : null, buttons: renderButtonsSection(buttons, { isVertical: buttons.length > 3 }), children: [renderDescription$2(description), jsxs("div", { className: "flex flex-1 gap-s items-center", children: [qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList$1(items)] })] }) }));
     });
 
     const sum = (list = []) => list.reduce((a, b) => a + b, 0);
@@ -1479,48 +1494,51 @@
 
     const deviation = (items) => items?.length ? Math.sqrt(Math.abs(avg(items.map((_) => _ ** 2)) - avg(items) ** 2)) : 0;
 
-    const labelSize = 'text-l';
-
-    const BenefitItem = JSX(({ className, icon, label, description, benefitsVersion = 'normal' }) => (jsxs("div", { className: style('flex gap-s', description ? 'items-start' : 'items-center', className), children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(benefitsVersion), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? (jsx(Text, { color: "text-primary-text group-data-secondary:text-white", size: labelSize, children: label })) : null, description ? (jsx(Paragraph, { font: "font-light", size: "text-m", color: "text-secondary-text group-data-secondary:text-white", children: description })) : null] })] })));
-    function getBenefitIconBgStyle(benefitsVersion) {
-        const bgColorStyle = benefitsVersion === 'normal'
+    const renderBenefitIcon = (icon, benefitsVersion = 'normal') => icon ? (jsx("div", { className: style('w-12 h-12 min-w-12 box-border flex items-center justify-center rounded-icon', benefitsVersion === 'normal'
             ? 'bg-secondary-light text-primary-main'
-            : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black';
-        return style('w-12 h-12 min-w-12 p-2.5 box-border flex items-center justify-center rounded-icon', bgColorStyle);
-    }
+            : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black'), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null;
 
     const RichText = JSX((props) => {
         const { __html = '', richVersion = '' } = props;
         return (jsx("div", { className: style(richVersion, 'md-container'), dangerouslySetInnerHTML: { __html } }));
     });
 
-    const renderBenefit = (benefitsVersion) => ({ type, ...benefit }, i) => {
-        if (type === 'rte' && '__html' in benefit) {
-            return jsx(RichText, { __html: benefit.__html });
-        }
-        return jsx(BenefitItem, { benefitsVersion: benefitsVersion, ...benefit }, String(i));
-    };
+    const renderBenefitDescription = (description, i) => description ? (jsx(Paragraph, { font: "font-light", size: "text-m", color: "text-secondary-text group-data-secondary:text-white", children: description }, `description-${i}`)) : null;
+
+    const renderBenefitLabel = (label, i) => label ? (jsx(Text, { color: "text-primary-text group-data-secondary:text-white", size: "text-h6", children: label }, `label-${i}`)) : null;
+
+    const renderBenefitText = (_, i) => _.type === 'rte' && '__html' in _ && _.__html ? (jsx(RichText, { ..._ }, `rte-${i}`)) : ([
+        'label' in _ ? renderBenefitLabel(_.label, i) : null,
+        'description' in _ ? renderBenefitDescription(_.description, i) : null,
+    ]);
+
+    const BenefitItem = JSX(({ className, benefitsVersion, ..._ }) => (jsxs("div", { className: style('flex gap-s', 'description' in _ && _.description ? 'items-start' : 'items-center', className), children: ['icon' in _ ? renderBenefitIcon(_.icon, benefitsVersion) : null, jsx("div", { children: renderBenefitText(_) })] })));
 
     const MAX_BENEFITS_LEN_DEVIATION = 16;
     const benefitLength = (_) => _.type === 'rte'
         ? _.__html?.length || 0
         : Math.max(_.label?.length || 0, _.description?.length || 0);
     const isDistortedBenefits = (benefits) => deviation(benefits.map(benefitLength)) > MAX_BENEFITS_LEN_DEVIATION;
-    const BenefitsList = JSX(({ className, benefitsVersion = 'normal', benefits }) => benefits?.length ? (jsx("div", { className: style('flex gap-x-m gap-y-s', isDistortedBenefits(benefits) ? 'flex-col' : 'flex-wrap', className), children: benefits.map(renderBenefit(benefitsVersion)) })) : null);
+    const DefaultBenefitsList = JSX(({ className, benefitsVersion = 'normal', benefits }) => benefits?.length ? (jsx("div", { className: style('flex gap-x-m gap-y-s', isDistortedBenefits(benefits) ? 'flex-col' : 'flex-wrap', className), children: benefits.map((_, i) => (jsx(BenefitItem, { benefitsVersion: benefitsVersion, ..._ }, String(i)))) })) : null);
+
+    const TabularBenefitsList = JSX(({ className, benefits }) => benefits?.length ? (jsx("div", { className: style('grid grid-cols-[max-content_1fr] auto-rows-auto items-baseline gap-x-m gap-y-xs', className), children: benefits.flatMap(renderBenefitText) })) : null);
+
+    const BenefitsList = JSX(({ isTabularBenefits, ...rest }) => isTabularBenefits ? jsx(TabularBenefitsList, { ...rest }) : jsx(DefaultBenefitsList, { ...rest }));
 
     const Tags = JSX(({ className, tags }) => tags?.length ? (jsx("div", { className: style('flex flex-wrap gap-xs', className), role: "list", children: tags.map(renderTag) })) : null);
     const renderTag = (tag, key) => (jsx("div", { className: "py-2 px-2.5 border-solid border rounded-md border-gray", role: "listitem", children: jsx(Text, { size: "text-m-light", children: tag }) }, String(key)));
 
-    const BaseProductTile = JSX(({ className, title, description, headlineVersion = 'L', align = 'text-left', isInsetTitle = true, benefits, benefitsVersion, __html, items, isDotted = true, listItemSize, tags, buttons, image, imageOptions: { imageAlign, directionRight = true } = {}, children, }) => {
+    const BaseProductTile = JSX(({ className, padding, defaultPadding, title, description, headlineVersion = 'L', align = 'text-left', isInsetTitle = true, benefitsVersion, isTabularBenefits, benefits, __html, items, isDotted = true, listItemSize, tags, buttons, image, imageOptions: { imageAlign = 'end', directionRight = true, isBackground } = {}, children, }) => {
         const img = image?.src ? jsx(Img, { image: image }) : null;
         const headline = (jsx(Headline, { title: title, description: description, headlineVersion: headlineVersion, align: align, isPadding: false }));
-        return (jsx(BaseTile, { className: className, ...(isInsetTitle ? { insetTitle: headline } : { title: headline }), ...(directionRight ? { rightImage: img } : { leftImage: img }), imageAlign: imageAlign, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col gap-m", children: [jsx(BenefitsList, { benefitsVersion: benefitsVersion, benefits: benefits }), __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, tags?.length ? jsx(Tags, { tags: tags }) : null] }) }));
+        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isInsetTitle ? { insetTitle: headline } : { title: headline }), ...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight)), imageAlign: imageAlign, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col gap-m", children: [jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: benefits }), __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, tags?.length ? jsx(Tags, { tags: tags }) : null] }) }));
     });
+    const leftOrRightImage = (img, directionRight) => directionRight ? { rightImage: img } : { leftImage: img };
 
     const renderInsuranceSumMonth = (sum, monthLimit) => sum || monthLimit ? (jsxs("div", { className: "flex flex-wrap xl:flex-nowrap xl:bg-main-divider xl:rounded-md p-xs gap-m", children: [Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum) : null, Number(monthLimit) > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit) : null] })) : null;
     const renderValueBlock = (title, value = 0) => (jsxs("div", { className: "basis-full flex flex-col-reverse sm:flex-row sm:justify-between items-baseline whitespace-pre", children: [jsx(Text, { font: "font-light", size: "text-l", children: title }), jsxs(Text, { size: "text-h6", color: "text-primary-text", children: [toLocalNumberFormat(2)(value), " \u20BD"] })] }));
 
-    const PictureText = JSX(({ className, headlineVersion = 'M', align = 'text-center', sum, monthLimit, ...rest }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: jsx(BaseProductTile, { className: "h-full", headlineVersion: headlineVersion, align: align, isInsetTitle: false, ...rest, imageOptions: { directionRight: false, imageAlign: 'center', ...rest.imageOptions }, children: renderInsuranceSumMonth(Number(sum), Number(monthLimit)) }) })));
+    const PictureText = JSX(({ className, padding, headlineVersion = 'M', align = 'text-center', sum, monthLimit, imageOptions, ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-default", padding: padding, headlineVersion: headlineVersion, align: align, isInsetTitle: false, imageOptions: { directionRight: false, imageAlign: 'center', ...imageOptions }, ...rest, children: renderInsuranceSumMonth(Number(sum), Number(monthLimit)) }) })));
 
     const GOLDEN_RATIO = 1.618;
     const Placeholder = JSX(({ className, title, description = 'Блок в разработке...', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border', className), ...rest, children: [jsx(Headline, { className: "max-w-[600px]", title: title, description: description, headlineVersion: "L", align: "text-left", isPadding: false }), jsx("figure", { className: "m-0 mt-m min-w-[80%]", children: renderShimmer() })] })));
@@ -1540,11 +1558,11 @@
                         } }) }), jsx(Button, { version: "link", ...commonProps })] }));
     }
 
-    const ProductBlock = JSX(({ className, backwardButton, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden flex flex-col gap-lg box-border', className), defaultPadding: "p-default", ...rest, children: [backwardButton?.text
+    const ProductBlock = JSX(({ className, padding, backwardButton, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden flex flex-col gap-lg box-border', className), defaultPadding: "p-default", padding: padding, ...rest, children: [backwardButton?.text
                 ? renderBackwardButton(backwardButton, !rest.version || rest.version === 'primary' ? 'primary' : 'white')
                 : null, jsx(BaseProductTile, { className: "grow h-full", ...rest })] })));
 
-    const ProductGallery = JSX(({ className, slides = [], ...rest }) => (jsx(BlockWrapper, { className: style('overflow-hidden relative', className), defaultPadding: "p-m", ...rest, children: jsx(SwipeListControl, { gap: 0, padding: 0, children: slides
+    const ProductGallery = JSX(({ className, padding, slides = [], ...rest }) => (jsx(BlockWrapper, { className: style('overflow-hidden relative', className), padding: padding, ...rest, children: jsx(SwipeListControl, { gap: 0, padding: 0, children: slides
                 .map((s) => s.productBlock)
                 .map((_, i) => (jsx("div", { className: "box-border h-full", role: "listitem", children: jsx(BaseProductTile, { className: "px-5 h-full", headlineVersion: "L", ..._, ...rest }) }, String(i)))) }) })));
 
@@ -1568,44 +1586,179 @@
     };
 
     const STEPS_SIZE_MAP = {
-        normal: 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]',
-        small: 'h-12 w-12 min-w-12 min-h-12',
+        normal: { icon: 'h-11 w-11', image: 'h-14 w-14' },
+        small: { icon: 'h-12 w-12', image: 'h-14 w-14' },
     };
     const STEPS_TILE_DESCRIPTION_HEIGHT_MAP = {
-        normal: 'min-h-[70px]',
+        normal: '',
         small: 'min-h-12',
     };
     const styleMap = STEPS_BLOCK_STYLE;
-    const StepsBlock = JSX(({ className = '', title, description, showLines = true, steps, size = 'normal', version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `box-border flex flex-col ${className}`, defaultPadding: "px-4 py-6", version: version, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "text-center", title: title }) : null, description ? (jsx("p", { className: `text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`, children: description })) : null, steps?.length ? (jsx("div", { className: `box-border py-0.5 mb-0.5 mt-5`, children: jsx("div", { className: "flex flex-col justify-between gap-x-[101px]", children: steps.map(renderStep(size, version, showLines)) }) })) : null] })));
+    const StepsBlock = JSX(({ className = '', title, description, steps, buttons, size = 'normal', version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border flex flex-col gap-2', className), defaultPadding: "p-default", version: version, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "text-left", title: title }) : null, description ? (jsx(Paragraph, { size: "text-xl", font: "font-light", children: jsx("span", { className: styleMap.description, children: description }) })) : null, steps?.length ? (jsx("div", { className: "box-border", children: jsx("div", { className: "flex flex-col justify-between", children: steps.map(renderStep(size, version)) }) })) : null, renderButtonsSection(buttons, { className: 'mt-3', isVertical: true })] })));
     // TODO: Create universal function for this case
-    const renderStep = (size, version, showLines) => 
+    const renderStep = (size, version) => 
     // Linter doesn't understand that switch processes all cases
     // eslint-disable-next-line consistent-return
-    (step, i, steps) => {
+    (step, i) => {
         const { type } = step;
         if (!(type === 'default' || type === 'rte')) {
             return null;
         }
         switch (type) {
             case 'default':
-                return renderDefaultStep(size, version, showLines)(step, i, steps);
+                return renderDefaultStep(size, version)(step, i);
             case 'rte':
                 return jsx(RichText, { __html: step.__html });
             default:
                 assertUnreachable(step);
         }
     };
-    const renderDefaultStep = (size, version, showLines) => (step, i, steps) => {
-        const isLastStep = steps.length - 1 === i;
-        const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
-        return (jsx("div", { children: jsxs("div", { className: "flex flex-row text-center relative", children: [jsxs("div", { className: "overflow-hidden flex-shrink-0", children: [renderIconArea(size, version)(step, i), isLastStep ? null : (jsx("div", { className: `min-h-8 h-full w-0.5 ${showLines ? styleMap.iconConnector : ''} ${margin}` }))] }), jsxs("div", { className: `flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`, children: [step.label ? (jsx("div", { className: "text-m-title-xs font-medium m-0 text-left mb-1", children: step.label })) : null, step.description ? (jsx("div", { className: `text-s ${styleMap.description} text-left`, children: step.description })) : null] })] }) }, String(i)));
-    };
+    const renderDefaultStep = (size, version) => (step, i) => (jsx("div", { className: "contents", children: jsxs("div", { className: "flex flex-row text-center relative py-3", children: [jsx("div", { className: "overflow-hidden flex flex-shrink-0 items-center", children: renderIconArea(size, version)(step, i) }), jsxs("div", { className: style('flex flex-col justify-center h-fit', STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]), children: [step.label ? jsx("div", { className: "text-l m-0 text-left", children: step.label }) : null, step.description ? (jsx("div", { className: style('text-s font-light text-left', styleMap.description), children: step.description })) : null] })] }) }, String(i)));
     const renderIconArea = (size, version) => (step, i) => {
-        const iconAreaSize = STEPS_SIZE_MAP[size];
-        const iconSize = size === 'normal' ? '38' : '27';
-        const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
+        const iconSize = size === 'normal' ? '38' : '24';
         const iconVersion = version === 'secondary' ? 'white' : 'color';
-        return (jsx("div", { className: `${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`, children: jsx("span", { className: `font-medium flex self-center ${iconTextSize}`, children: checkCanRenderIcon(step?.icon) ? (jsx(Img, { image: { ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }, width: iconSize, height: iconSize })) : (jsx("span", { children: i + 1 })) }) }));
+        const isImg = Boolean(step?.icon?.src);
+        const iconAreaSize = STEPS_SIZE_MAP[size][isImg ? 'image' : 'icon'];
+        const containerStyle = isImg ? '' : `rounded-md ${styleMap.iconBackground}`;
+        return (jsx("div", { className: style(iconAreaSize, containerStyle, 'z-10 mr-3 flex justify-center content-center'), children: jsx("span", { className: "flex self-center text-h4 text-secondary-text group-data-secondary:text-white", children: checkCanRenderIcon(step?.icon) ? (jsx(Img, { image: { ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }, width: iconSize, height: iconSize })) : (jsx("span", { children: i + 1 })) }) }));
+    };
+
+    const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
+    const INACTIVE_LINK_CLASSES = 'group/btn bg-white';
+    const SCROLLABLE_ACTIVE_LINK_CLASSES = 'bg-white text-primary-main';
+    const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
+    const TEXT_CLASSES = 'font-sans text-m text-center';
+    const ACTIVE_TEXT_CLASSES = 'text-white';
+    const INACTIVE_TEXT_CLASSES = 'text-secondary-text sm:group-hover/btn:text-primary-main';
+    const TAB_CLASSES = {
+        block: {
+            scrollable: {
+                active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
+                default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+            },
+            centered: {
+                active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+                default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
+            },
+            wideScreen: {
+                active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+                default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES} whitespace-nowrap`,
+            },
+        },
+        text: {
+            scrollable: {
+                active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2`,
+                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+            },
+            centered: {
+                active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
+                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+            },
+            wideScreen: {
+                active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES} text-black px-2.5 bg-white sm:bg-primary-main sm:text-white`,
+                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES} px-2.5 bg-white`,
+            },
+        },
+    };
+    const getTabClassName = (type, active, tabsMode) => {
+        const styleActive = active ? 'active' : 'default';
+        const mode = tabsMode || 'wideScreen';
+        return TAB_CLASSES[type][mode][styleActive];
+    };
+
+    const LinkTab = JSX((props) => {
+        const { tab, currentTab, onClick, tabsMode } = props;
+        const active = currentTab?.type === 'link' && currentTab.href === tab.href;
+        const link = useLink();
+        const adjustedProps = link(tab);
+        const handleClick = (ev) => {
+            adjustedProps.onClick(ev);
+            onClick(tab);
+        };
+        return (jsx("div", { className: getTabClassName('block', active, tabsMode), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsx("a", { role: "tab", className: style('flex flex-1 items-center justify-center h-full', getTabClassName('text', active, tabsMode)), target: tab.target, href: adjustedProps.href, onClick: handleClick, children: jsx("span", { children: tab.text }) }) }));
+    });
+
+    const BADGE_CLASSES = 'bg-main-divider min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
+    const LIGHT_BADGE_CLASSES = 'bg-white/30 text-white';
+    const DARK_BADGE_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
+    const renderGroupTab = ({ page, currentTab, showCounter, onClick, tabsMode }) => (tab, i) => {
+        const active = currentTab === tab;
+        const count = tab.ref && page?.blocks
+            ? page.blocks.filter((block) => block?.labels?.includes(tab.ref)).length
+            : 0;
+        return (jsx("div", { className: getTabClassName('block', active, tabsMode), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: style('flex flex-1 items-center justify-center h-full', getTabClassName('text', active, tabsMode)), children: [jsx("span", { children: tab.title }), showCounter && count ? renderCount(tabsMode, count, active) : null] }) }, `group-${String(i)}`));
+    };
+    const renderCount = (tabsMode, count, active) => {
+        return (jsx("div", { className: style(BADGE_CLASSES, active && tabsMode !== 'scrollable' ? LIGHT_BADGE_CLASSES : DARK_BADGE_CLASSES), children: count }));
+    };
+
+    const renderTab = ({ page, showCounter, ...rest }) => (tab, i) => {
+        const type = tab.type;
+        if (!(type === 'group' || type === 'link')) {
+            return null;
+        }
+        switch (type) {
+            case 'group':
+                return renderGroupTab({ page, showCounter, ...rest })(tab, i);
+            case 'link': {
+                return jsx(LinkTab, { tab: tab, ...rest }, String(i));
+            }
+            default:
+                assertUnreachable(type);
+        }
+        return null;
+    };
+
+    const CenteredTabs = JSX(({ tabs, ...rest }) => (jsx("div", { className: "flex p-1 m-auto bg-main-gray rounded-md", children: tabs?.map(renderTab({ ...rest })) })));
+
+    const scrollButtonStyle = 'absolute z-40 top-0';
+    const ScrollableTabs = JSX((props) => {
+        const { tabs, ...rest } = props;
+        const [containerRef, scroll] = useSwipeListScroll({
+            itemCount: tabs?.length || 0,
+            isCyclic: false,
+        });
+        return (jsxs("div", { className: "relative max-w-full m-auto", children: [jsx("div", { className: `font-sans max-w-full w-full overflow-hidden relative bg-white`, children: jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: tabs?.map(renderTab({ ...rest })) }) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-6`, onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle} rotate-180 right-6`, onClick: scroll.scrollRight })) : null] }));
+    });
+
+    const Tabs = JSX((props) => {
+        const { className = '', isSticky, tabs, ...rest } = props;
+        const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
+        useEffect(() => {
+            if (!tabs || !tabs[0]) {
+                return;
+            }
+            fireTabEvent(tabs[0]);
+        }, []);
+        useEffect(() => {
+            if (currentTab?.type === 'group') {
+                defaultEventBus.subject('tab', { type: currentTab.type, label: currentTab.ref });
+            }
+        }, [currentTab]);
+        const handleClick = useCallback((selectedTab) => {
+            fireTabEvent(selectedTab);
+            setCurrentTab(selectedTab);
+        }, []);
+        return (jsx(BlockWrapper, { className: style('relative box-border flex gap-x-1 w-full overflow-x-auto no-scrollbar', isSticky ? 'sticky top-1 z-20' : '', className), defaultPadding: "p-0", role: "tablist", ...rest, children: renderTabs({ tabs, onClick: handleClick, currentTab, ...rest }) }));
+    });
+    const renderTabs = ({ tabsMode, tabs, ...rest }) => {
+        switch (tabsMode) {
+            case 'wideScreen':
+                return tabs?.map(renderTab({ tabsMode, ...rest }));
+            case 'centered':
+                return jsx(CenteredTabs, { tabs: tabs, tabsMode: tabsMode, ...rest });
+            case 'scrollable':
+                return jsx(ScrollableTabs, { tabs: tabs, tabsMode: tabsMode, ...rest });
+        }
+        return null;
+    };
+    const fireTabEvent = (tab) => {
+        if (tab.type === 'group') {
+            defaultEventBus.fire('tab', { type: tab.type, label: tab.ref });
+        }
+        if (tab.type === 'link') {
+            defaultEventBus.fire('tab', { type: tab.type, label: tab.href });
+        }
     };
 
     const renderButtonsCellData = ({ buttons }) => renderButtonsSection(buttons, {
@@ -1650,10 +1803,10 @@
         data: colData?.[i] || [{}],
     }));
 
-    const TextBlock = JSX(({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => (jsxs(BlockWrapper, { className: style('flex gap-3 bg-white group-data-secondary:bg-primary-main/10', className), ...rest, children: [iconVersion === 'small' ? jsx("div", { className: "mt-1", children: renderIcon() }) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "flex flex-col w-fit gap-3", children: [title ? (jsx(Text, { size: "text-l", font: "font-medium", color: "text-primary-text group-data-secondary:text-white", children: title })) : null, description ? renderDescription(description) : null, items?.length ? renderList(items, true) : null, __html ? jsx(RichText, { __html: __html }) : null] })] })));
+    const TextBlock = JSX(({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => (jsxs(BlockWrapper, { className: style('flex gap-3 bg-white group-data-secondary:bg-primary-main/10', className), ...rest, children: [iconVersion === 'small' ? jsx("div", { className: "mt-1", children: renderIcon() }) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "flex flex-col w-fit gap-3", children: [title ? (jsx(Text, { size: "text-l", font: "font-medium", color: "text-primary-text group-data-secondary:text-white", children: title })) : null, description ? renderDescription$1(description) : null, items?.length ? renderList(items, true) : null, __html ? jsx(RichText, { __html: __html }) : null] })] })));
     const renderIcon = () => (jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main`, children: "i" }));
     const renderImage = (image) => image?.src ? jsx(Img, { className: "h-fit", image: image }) : null;
-    const renderDescription = (description) => (jsx(Paragraph, { size: "text-s", color: "text-secondary-text group-data-secondary:text-white", children: description }));
+    const renderDescription$1 = (description) => (jsx(Paragraph, { size: "text-s", color: "text-secondary-text group-data-secondary:text-white", children: description }));
     const renderList = (items, bullets) => {
         const listStyle = bullets ? 'list-disc pl-6' : '';
         return (jsx("ul", { className: style('text-secondary-text group-data-secondary:text-white/80', listStyle), children: items.map((_, i) => (jsx("li", { children: jsx(Text, { size: "text-s", font: "font-light", children: _ }) }, `listItem-${i}`))) }));
@@ -1684,8 +1837,25 @@
     });
     VerticalLayout.childrenTypes = [];
 
+    const benefitImageStyles = 'w-56 h-56 min-w-56';
+
+    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: [title ? jsx(Heading, { headingType: "h3", as: "h2", className: "text-center", title: title }) : null, benefitList?.length ? (jsx("div", { className: "sm:flex sm:flex-wrap w-full sm:justify-center sm:gap-x-m gap-y-lg sm:gap-y-0 mt-8", role: "list", children: benefitList.map(renderBenefit) })) : null] })));
+    const renderBenefit = (benefit, i) => (jsxs("div", { className: "flex items-center sm:basis-1/2 sm:max-w-[400px] mb-14", role: "listitem", children: [benefit?.icon?.icon ? (jsx(Img, { className: style('p-3 mr-5 shrink-0 bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black', benefitImageStyles), image: benefit.icon })) : null, benefit?.icon?.src ? jsx(Img, { className: "mr-5 shrink-0", image: benefit.icon }) : null, benefit?.label ? (jsxs("div", { className: "sm:h-full", children: [jsx(Heading, { headingType: "h6", children: benefit.label }), renderDescription(benefit.description)] })) : null] }, String(i)));
+    const renderDescription = (description) => {
+        const benefitType = description?.benefitType || null;
+        return description && benefitType ? (jsx("div", { className: "mt-2 text-l-light text-secondary-text group-data-secondary:text-white/80", children: benefitType === 'list'
+                ? renderListBenefit(description)
+                : renderTextBenefit(description) })) : null;
+    };
+    const renderTextBenefit = (description) => description?.name || null;
+    const renderListBenefit = (description) => {
+        const listStyleType = description?.bullets ? 'list-disc pl-6' : '';
+        return description?.items && description.items.length > 0 ? (jsx("ul", { className: listStyleType, children: description.items.map((_, i) => (jsx("li", { children: _ }, `benefitListItem-${i}`))) })) : null;
+    };
+
     const Blocks = {
         ButtonsBlock,
+        BonusBenefitsBlock,
         CardTransfer,
         Carousel,
         CarouselTariffsCard,
@@ -1700,6 +1870,7 @@
         Placeholder,
         ProductBlock,
         StepsBlock,
+        Tabs,
         TariffsTable,
         TextBlock,
         RichTextBlock,
@@ -1708,6 +1879,7 @@
         CarouselRecommendationCard,
         CarouselProgramsCard,
         ProductGallery,
+        BenefitsBlock,
     };
 
     function useBool(defaultValue = false) {
@@ -1773,6 +1945,13 @@
         }, [scrollTarget]);
     }
 
+    const useDebouncedEffect = (effect, deps, delay = 300) => useEffect(() => {
+        const timerId = setTimeout(effect, delay);
+        return () => {
+            clearTimeout(timerId);
+        };
+    }, deps);
+
     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 useDialogHandlers({ onOpen, onClose } = {}) {
@@ -1790,8 +1969,8 @@
         }), [onOpen, onClose]);
     }
 
-    function useDialogProps(id, initOpen = false) {
-        const [isOpened, { setTrue: open, setFalse: close }] = useBool(initOpen);
+    function useDialogProps(id, isOpenedOnInit = false) {
+        const [isOpened, { setTrue: open, setFalse: close }] = useBool(isOpenedOnInit);
         const [params, setParams] = useState({ id });
         const wasOpened = useRef(isOpened);
         wasOpened.current ||= isOpened;
@@ -1804,30 +1983,37 @@
                 close();
             }
         }, [id]);
+        const handleClose = useCallback(() => {
+            close();
+            defaultEventBus.fire('dialog', { type: 'close' });
+        }, []);
         useDialogHandlers({
             onOpen: handleOpen,
             onClose: close,
         });
-        const handleCloseAsEventSource = useCallback(() => {
-            close();
-            defaultEventBus.fire('dialog', { type: 'close' });
-        }, []);
         return {
             ...params,
             isOpened,
             wasOpened: wasOpened.current,
-            onClose: handleCloseAsEventSource,
+            open,
+            close,
+            onClose: handleClose,
         };
     }
 
     const COOKIE_DIALOG_ID = 'cookie';
-    const LOCAL_STORAGE_NAME = 'cookieClose';
+    const DIALOG_INITIAL_DELAY = 3 * 1000;
     const CookiePopup = JSX(({ termLink, personalDataPolicyLink }) => {
-        const { isOpened, onClose } = useDialogProps(COOKIE_DIALOG_ID, !globalThis.localStorage?.getItem(LOCAL_STORAGE_NAME));
+        const { isOpened, open, close } = useDialogProps(COOKIE_DIALOG_ID);
+        useDebouncedEffect(() => {
+            if (!globalThis.localStorage?.getItem(COOKIE_DIALOG_ID)) {
+                open();
+            }
+        }, [], DIALOG_INITIAL_DELAY);
         const handleClose = useCallback(() => {
-            globalThis.localStorage?.setItem(LOCAL_STORAGE_NAME, 'true');
-            onClose && onClose();
-        }, [onClose]);
+            globalThis.localStorage?.setItem(COOKIE_DIALOG_ID, 'true');
+            close();
+        }, [close]);
         return isOpened ? (jsx("div", { className: "container z-40 fixed bottom-0 left-0 right-0 pointer-events-none", children: jsxs("div", { className: "bg-white m-6 p-6 rounded-md flex items-center pointer-events-auto shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx("div", { className: "flex-1", children: jsxs(Paragraph, { size: "text-s-light", color: "text-primary-text", children: ["\u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442", jsx(LinkWrapper, { isRemote: true, className: style(getStyleLinkWrapper(termLink?.href)), ...termLink, children: "cookie" }), "(\u0444\u0430\u0439\u043B\u044B \u0441 \u0434\u0430\u043D\u043D\u044B\u043C\u0438 \u043E \u043F\u0440\u043E\u0448\u043B\u044B\u0445 \u043F\u043E\u0441\u0435\u0449\u0435\u043D\u0438\u044F\u0445 \u0441\u0430\u0439\u0442\u0430) \u0434\u043B\u044F \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043E\u0432 \u0438 \u0443\u0434\u043E\u0431\u0441\u0442\u0432\u0430 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u0439. \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0437\u0430\u043F\u0440\u0435\u0442\u0438\u0442\u044C \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435 cookie \u0432 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430\u0445 \u0441\u0432\u043E\u0435\u0433\u043E \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.", jsx(LinkWrapper, { isRemote: true, className: style(getStyleLinkWrapper(personalDataPolicyLink?.href)), ...personalDataPolicyLink, children: "\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0430 \u0412\u0430\u0448\u0438\u0445 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445" }), "\u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0441\u044F \u0432 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u044F\u043C\u0438 \u0424\u0435\u0434\u0435\u0440\u0430\u043B\u044C\u043D\u043E\u0433\u043E \u0437\u0430\u043A\u043E\u043D\u0430 \u043E\u0442 27.07.2006 \u2116 152-\u04243 \u00AB\u041E \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445\u00BB."] }) }), jsx("div", { className: "w-24 flex justify-end", children: jsx(CloseButton, { className: "bg-main-gray rounded-md", onClick: handleClose }) })] }) })) : null;
     });
     const getStyleLinkWrapper = (href) => ['inline mx-1', href ? 'text-green-dark' : ''];
@@ -1907,7 +2093,7 @@
 
     const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
 
-    const packageVersion = "0.12.4";
+    const packageVersion = "0.12.6";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;