@redneckz/wildless-cms-uni-blocks 0.12.3 → 0.12.5

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, ...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 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, ...style }) => (jsx("span", { className: ['font-sans', ...Object.values(style)].join(' '), 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' }),
@@ -599,282 +847,104 @@
         return {
             value: (isFocused || !format ? value : format(value)),
             onFocus: handleFocus,
-            onBlur: handleBlur,
-        };
-    };
-
-    const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
-
-    const toLocalNumberFormat = (fractionDigits = 0) => (_ = 0) => new Intl.NumberFormat('ru-RU', {
-        minimumFractionDigits: 0,
-        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 || '');
-        }, [onChange]);
-        const paddingStyle = children ? 'pr-8' : '';
-        const validStyle = valid
-            ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
-            : 'border-error';
-        return (jsxs("div", { className: style('relative', className), children: [jsxs("label", { children: [label ? (jsx("div", { className: "mb-2", children: jsx(Text, { size: "text-m", font: "font-light", children: label }) })) : null, jsx("input", { className: style('w-full border rounded-md text-primary-text outline-none p-4', paddingStyle, validStyle, inputClassName), id: id, name: name || id, placeholder: placeholder, type: type, value: value, onInput: handleChange, onFocus: onFocus, onBlur: onBlur, pattern: pattern }, key)] }), children] }));
-    });
-
-    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',
-                });
-            }
+            onBlur: handleBlur,
         };
-        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 clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 
-    const defaultDiscriminator = (_) => _;
-    const maxBy = (discriminator = defaultDiscriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
+    const toLocalNumberFormat = (fractionDigits = 0) => (_ = 0) => new Intl.NumberFormat('ru-RU', {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: fractionDigits,
+    }).format(Number(_) || 0);
 
-    const minBy = (discriminator = defaultDiscriminator) => maxBy((_) => -discriminator(_));
+    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 || '');
+        }, [onChange]);
+        const paddingStyle = children ? 'pr-8' : '';
+        const validStyle = valid
+            ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
+            : 'border-error';
+        return (jsxs("div", { className: style('relative', className), children: [jsxs("label", { children: [label ? (jsx("div", { className: "mb-2", children: jsx(Text, { size: "text-m", font: "font-light", children: label }) })) : null, jsx("input", { className: style('w-full border rounded-md text-primary-text outline-none p-4', paddingStyle, validStyle, inputClassName), id: id, name: name || id, placeholder: placeholder, type: type, value: value, onInput: handleChange, onFocus: onFocus, onBlur: onBlur, pattern: pattern }, key)] }), children] }));
+    });
 
-    const getItemWidth = (container) => (itemCount) => container.scrollWidth / itemCount;
-    const scrollBy = (container) => (itemCount, delta) => {
-        container.scrollBy({ left: delta * getItemWidth(container)(itemCount), behavior: 'smooth' });
-    };
+    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 scrollToEnd = (container) => {
-        container.scrollTo({ left: container.scrollWidth, behavior: 'smooth' });
-    };
+    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 scrollToStart = (container) => {
-        container.scrollTo({ left: 0, behavior: 'smooth' });
+    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 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 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 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';
 
@@ -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), 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$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);
@@ -1494,7 +1509,7 @@
         return (jsx("div", { className: style(richVersion, 'md-container'), dangerouslySetInnerHTML: { __html } }));
     });
 
-    const renderBenefit = (benefitsVersion) => ({ type, ...benefit }, i) => {
+    const renderBenefit$1 = (benefitsVersion) => ({ type, ...benefit }, i) => {
         if (type === 'rte' && '__html' in benefit) {
             return jsx(RichText, { __html: benefit.__html });
         }
@@ -1506,7 +1521,7 @@
         ? _.__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 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$1(benefitsVersion)) })) : null);
 
     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)));
@@ -1608,6 +1623,144 @@
         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 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, {
         className: 'mt-3',
         buttonClassName: 'w-12 h-12',
@@ -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) {
@@ -1907,7 +2079,7 @@
 
     const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
 
-    const packageVersion = "0.12.3";
+    const packageVersion = "0.12.5";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;