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

package/mobile/bundle/bundle.umd.js

@@ -237,55 +237,6 @@
         return JSXTmpl;
     };
 
-    const style = (...atoms) => atoms
-        .flatMap((_) => _)
-        .filter(Boolean)
-        .join(' ');
-
-    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;
-    }
-
     class EventBus {
         subscribers = {};
         subjectsStateMap = {};
@@ -353,6 +304,11 @@
         return useIntersectionObserver(observerCallback, { sensitivity: 1 });
     }
 
+    const style = (...atoms) => atoms
+        .flatMap((_) => _)
+        .filter(Boolean)
+        .join(' ');
+
     const blockStyles = {
         primary: 'bg-white text-primary-text',
         secondary: 'bg-primary-main text-white',
@@ -360,169 +316,17 @@
         transparent: 'bg-transparent text-primary-text',
         '': '',
     };
-    const BlockWrapper = JSX(({ className, version = 'primary', isTheme = true, block, tag = 'section', role, children }) => {
+    const BlockWrapper = JSX(({ className, version = 'primary', isTheme = true, defaultPadding = 'p-m', padding, block, tag = 'section', role, children, }) => {
         const Tag = tag;
         const ref = useBlockIntersectionObserver(block);
         const [isHidden, setHidden] = useState(false);
         useEffect(() => defaultEventBus.subscribe('tab', (event) => {
             setHidden(Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)));
         }), [block]);
-        return (jsx(Tag, { className: style(groupStyle(Boolean(version && isTheme)), blockStyles[version], isHidden ? 'hidden' : '', className), ...(version && isTheme ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
-    });
-    const groupStyle = (isGroup) => (isGroup ? 'group' : '');
-
-    const mapChildren = (mapper) => (children) => {
-        if (children === null || children === undefined) {
-            return children;
-        }
-        return Array.isArray(children) ? children.map(mapper) : mapper(children, 0);
-    };
-
-    const HEADER_HEIGHT = 170;
-    const FOOTER_HEIGHT = 48;
-    const BLOCKS_GAP = 4;
-    const PAGE_PADDINGS_X = 20;
-    const DEFAULT_HEIGHT = 866;
-    const getContainerHeight = (minHeight) => ({
-        height: `calc(100vh - ${HEADER_HEIGHT + FOOTER_HEIGHT + BLOCKS_GAP + PAGE_PADDINGS_X}px)`,
-        minHeight: `${minHeight || DEFAULT_HEIGHT}px`,
-    });
-
-    const SwipeListItem = JSX(({ className = '', style, idx, activeIndex, observerOptions, children, onIntersection }) => {
-        const observerCallback = useCallback((entries) => {
-            if (entries.length && onIntersection) {
-                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 isGroup = version && isTheme;
+        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 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,
-            },
-        ];
-    };
-
     function useRouter() {
         return useRouter._impl();
     }
@@ -588,151 +392,489 @@
     const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
 
     const sourcesComparator = (a, b) => a?.media && b?.media ? a.media - b.media : 0;
-    const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', isMobile = false, pathPrefix }) => {
+    const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', pathPrefix }) => {
         const router = useRouter();
-        const pictureStyles = isMobile ? 'flex' : 'flex-none';
-        return (jsxs("picture", { className: `${pictureStyles} ${className}`, children: [image?.sources?.length
+        return (jsxs("picture", { className: className, children: [image?.sources?.length
                     ? image.sources
                         .filter((_) => _?.src)
                         .sort(sourcesComparator)
                         .map(({ src, format, media }, index) => (jsx("source", { srcSet: adjustSrc(router, pathPrefix)(src), type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...image.size }, `${index}_${src}`)))
                     : null, image?.src
-                    ? renderImg({ ...image, src: adjustSrc(router, pathPrefix)(image.src) }, imageClassName, isMobile)
+                    ? renderImg({ ...image, src: adjustSrc(router, pathPrefix)(image.src) }, imageClassName)
                     : null] }));
     });
-    const renderImg = (image, imageClassName = '', isMobile = false) => {
-        const style = {
+    const renderImg = (image, imageClassName = '') => (jsx("img", { src: image.src, className: style('object-contain', imageClassName), alt: image.alt || image.title, title: image.title || '', style: {
             width: image.size?.width ? `${image.size?.width}px` : '100%',
             height: image.size?.height ? `${image.size?.height}px` : 'auto',
-        };
-        const title = image.title || '';
-        const alt = image.alt || image.title;
-        const imgStyle = isMobile ? 'm-auto' : 'm-0';
-        return (jsx("img", { src: image.src, className: `${imgStyle} ${imageClassName}`, alt: alt, title: title, style: style, ...image.size }));
-    };
+        }, ...image.size }));
     const adjustSrc = (router, pathPrefix) => (src) => src && !isURL(src) ? adjustHref(router)(joinPath(pathPrefix, src)) : src;
     const formatToMimeType = (format) => format ? `image/${String(format)}` : undefined;
 
-    const ImgInner = JSX(({ className = '', image, imageClassName = '', isMobile, pathPrefix, ...iconProps }) => {
+    const Img = JSX(({ className = '', image, imageClassName = '', pathPrefix, ...iconProps }) => {
         if (!image?.src && !image?.icon) {
             return null;
         }
-        return image.icon ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: image?.iconVersion, name: image.icon, ...iconProps })) : (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile, pathPrefix: pathPrefix }));
+        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 useDialog = (id = '') => ({
+        open: (message) => defaultEventBus.fire('dialog', { type: 'open', id, message }),
+        close: () => defaultEventBus.fire('dialog', { type: 'close' }),
+    });
+
+    /* eslint-disable @typescript-eslint/ban-types */
+    const handlerDecorator = (handler, targetContent) => {
+        return handlerDecorator._impl(handler, targetContent);
+    };
+    handlerDecorator._impl = (handler) => handler;
+    handlerDecorator.setup = (impl) => {
+        handlerDecorator._impl = impl;
+    };
+
+    function useLink(params = {}) {
+        const { isRemote, basePath } = params;
+        const router = useRouter();
+        const { close } = useDialog();
+        return (props) => ({
+            ...props,
+            href: isRemote && !basePath ? props.href : adjustHref(router)(props.href, basePath),
+            'aria-label': props.text,
+            onClick: handlerDecorator(handleHref(props), props),
+        });
+        function handleHref({ href, target, onClick }) {
+            return (ev) => {
+                onClick && onClick(ev);
+                if (!href || isRemote || !isLocalURL(href, target)) {
+                    // Default routing
+                    return;
+                }
+                close();
+                // Client routing
+                ev?.preventDefault();
+                router.push(href);
+            };
+        }
+    }
+
+    const buttonStyleMap = {
+        primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
+        secondary: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
+        white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white active:text-primary-main',
+        link: '',
+        transparent: '',
+        gray: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
+        '': '',
+    };
+    const DisabledStyle = 'bg-main-divider text-main-disabled';
+    const buttonDisabledStyleMap = {
+        primary: DisabledStyle,
+        secondary: DisabledStyle,
+        white: DisabledStyle,
+        link: '',
+        transparent: '',
+        gray: DisabledStyle,
+        '': '',
+    };
+    const buttonStyle = 'text-center font-sans select-none';
+    const iconStyleMap = {
+        primary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
+        secondary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
+        white: 'group-hover/btn:brightness-0 group-hover/btn:invert',
+        link: '',
+        transparent: '',
+        gray: 'group-hover/btn:brightness-0 group-hover/btn:invert',
+        '': '',
+    };
+
+    const ButtonInner = JSX((props) => {
+        const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
+        return (jsxs("div", { className: style(getButtonStyle(props), 'flex gap-2'), children: [appendLeft ? jsx("div", { className: iconStyleMap[version], children: appendLeft }) : null, isWithText(props) ? (jsxs("div", { children: [aboveText ? jsx("div", { className: "text-xs-light text-left", children: aboveText }) : null, jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-0.5' : 'text-l'}`, children: text })] })) : null, appendRight ? jsx("div", { className: iconStyleMap[version], children: appendRight }) : null] }));
+    });
+    const getButtonStyle = (props) => {
+        const { version, aboveText, rounded } = props;
+        if (version === 'link') {
+            return '';
+        }
+        const withTextStyle = `${aboveText ? 'py-2.5 px-9' : 'py-4 px-9'}`;
+        return [
+            'group/btn items-center justify-center',
+            isWithText(props) ? withTextStyle : 'h-12 w-12',
+            rounded ? 'rounded-full' : '',
+        ].join(' ');
+    };
+    const isWithText = ({ text, aboveText, appendLeft }) => Boolean(text || aboveText || !appendLeft);
+
+    const getDisabledButtonClasses = ({ className, rounded, version, }) => [
+        'inline-block',
+        buttonStyle,
+        version ? buttonDisabledStyleMap[version] : '',
+        rounded ? 'rounded-full' : 'rounded-md',
+        className,
+    ].join(' ');
+
+    const getRegularButtonClasses = ({ className, rounded, version, }) => [
+        buttonStyle,
+        'border border-transparent inline-block cursor-pointer no-underline focus:border-primary-text focus:border h-fit',
+        version ? buttonStyleMap[version] : '',
+        rounded ? 'rounded-full' : 'rounded-md',
+        className,
+    ].join(' ');
+
+    const Button = JSX(({ disabled, children, ...rest }) => {
+        const link = useLink();
+        const adjustedProps = link(rest);
+        const buttonInner = children ?? jsx(ButtonInner, { ...adjustedProps });
+        return disabled ? (jsx(DisabledButton, { ...adjustedProps, children: buttonInner })) : (jsx(RegularButton, { ...adjustedProps, children: buttonInner }));
+    });
+    const RegularButton = JSX(({ className = '', href, rel, target, ariaLabel, version, rounded, onClick, children }) => (jsx("a", { className: getRegularButtonClasses({ className, version, rounded }), href: href, rel: rel, target: target, "aria-label": ariaLabel, role: href ? 'link' : 'button', onClick: onClick, children: children })));
+    const DisabledButton = JSX(({ className, ariaLabel, version, rounded, children }) => (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: -1, className: getDisabledButtonClasses({ className, rounded, version }), children: children })));
+
+    const renderButtonsSection = (buttons, { className, buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-xs justify-items-stretch' : 'flex-wrap gap-s', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
+    const renderButton = (buttonClassName = '') => (button, index) => {
+        const { text, icon, iconRight, version, ...rest } = button || {};
+        const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
+        const iconVersion = icon?.iconVersion ? icon?.iconVersion : iconVersionDefault;
+        return text || icon?.icon ? (jsx(Button, { className: style('basis-full sm:basis-auto', buttonClassName), appendLeft: renderButtonIcon({ ...icon, iconVersion }), appendRight: renderButtonIcon({ ...iconRight, iconVersion }), version: version, text: text, ...rest }, index ? String(index) : '')) : null;
+    };
+    const DEFAULT_ICON_W = 24;
+    const renderButtonIcon = (icon) => icon?.icon || icon?.src ? (jsx(Img, { image: icon, width: String(icon?.size?.width || DEFAULT_ICON_W), height: String(DEFAULT_ICON_W) })) : null;
+
+    const ButtonsBlock = JSX(({ buttons, className, ...rest }) => (jsx(BlockWrapper, { className: style('!bg-transparent', className), defaultPadding: "p-0", ...rest, children: renderButtonsSection(buttons) })));
+
+    const identity = (_) => _;
+
+    const useForm = (initialState, onSubmit) => {
+        const [formState, setFormState] = useState(initialState);
+        const [isDirtyForm, setDirtyForm] = useState(false);
+        const [dirtyFieldsMap, setDirtyFieldsMap] = useState({});
+        const handlersMap = useRef({});
+        const field = useCallback((fieldName, options) => {
+            const { parse = identity, format = identity } = options || {};
+            if (!handlersMap.current) {
+                handlersMap.current = {};
+            }
+            handlersMap.current[fieldName] ||= (value) => {
+                setFormState((prev) => ({ ...prev, [fieldName]: parse(value) }));
+                setDirtyFieldsMap((prev) => ({ ...prev, [fieldName]: true }));
+            };
+            return {
+                value: format(formState[fieldName]),
+                isDirty: isDirtyForm || dirtyFieldsMap[fieldName],
+                onChange: handlersMap.current[fieldName],
+            };
+        }, [formState, isDirtyForm, dirtyFieldsMap]);
+        const reset = useCallback(() => {
+            setFormState(initialState);
+            setDirtyForm(false);
+            setDirtyFieldsMap({});
+        }, [initialState]);
+        const handleSubmit = useCallback((e) => {
+            e.preventDefault();
+            setDirtyForm(true);
+            onSubmit && onSubmit(formState);
+        }, [onSubmit, formState]);
+        return [
+            formState,
+            {
+                isDirty: isDirtyForm || Object.values(dirtyFieldsMap).some(Boolean),
+                field,
+                reset,
+                onSubmit: handleSubmit,
+            },
+        ];
+    };
+
+    const useNormalizedInput = (props, { normalize, format }) => {
+        const { value, onFocus, onBlur, onChange } = props;
+        const [isFocused, setIsFocused] = useState(false);
+        const handleFocus = useCallback((e) => {
+            setIsFocused(true);
+            onFocus && onFocus(e);
+        }, []);
+        const handleBlur = useCallback(() => {
+            setIsFocused(false);
+            onChange && onChange(normalize(value));
+            onBlur && onBlur();
+        }, [onChange, value]);
+        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',
+                });
+            }
+        };
+        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 Img = JSX((props) => jsx(ImgInner, { ...props, isMobile: true }));
-
-    const useDialog = (id = '') => ({
-        open: (message) => defaultEventBus.fire('dialog', { type: 'open', id, message }),
-        close: () => defaultEventBus.fire('dialog', { type: 'close' }),
-    });
+    const areArraysEqual = (as, bs) => as === bs || Boolean(as && bs && as?.length === bs?.length && as.every((_, i) => _ === bs[i]));
 
-    /* eslint-disable @typescript-eslint/ban-types */
-    const handlerDecorator = (handler, targetContent) => {
-        return handlerDecorator._impl(handler, targetContent);
-    };
-    handlerDecorator._impl = (handler) => handler;
-    handlerDecorator.setup = (impl) => {
-        handlerDecorator._impl = impl;
-    };
+    const defaultDiscriminator = (_) => _;
+    const maxBy = (discriminator = defaultDiscriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
 
-    function useLink(params = {}) {
-        const { isRemote, basePath } = params;
-        const router = useRouter();
-        const { close } = useDialog();
-        return (props) => ({
-            ...props,
-            href: isRemote && !basePath ? props.href : adjustHref(router)(props.href, basePath),
-            'aria-label': props.text,
-            onClick: handlerDecorator(handleHref(props), props),
-        });
-        function handleHref({ href, target, onClick }) {
-            return (ev) => {
-                onClick && onClick(ev);
-                if (!href || isRemote || !isLocalURL(href, target)) {
-                    // Default routing
-                    return;
-                }
-                close();
-                // Client routing
-                ev?.preventDefault();
-                router.push(href);
-            };
-        }
-    }
+    const minBy = (discriminator = defaultDiscriminator) => maxBy((_) => -discriminator(_));
 
-    const buttonStyleMap = {
-        primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
-        secondary: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
-        white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white active:text-primary-main',
-        link: '',
-        transparent: '',
-        gray: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
-        '': '',
+    const getItemWidth = (container) => (itemCount) => container.scrollWidth / itemCount;
+    const scrollBy = (container) => (itemCount, delta) => {
+        container.scrollBy({ left: delta * getItemWidth(container)(itemCount), behavior: 'smooth' });
     };
-    const DisabledStyle = 'bg-main-divider text-main-disabled';
-    const buttonDisabledStyleMap = {
-        primary: DisabledStyle,
-        secondary: DisabledStyle,
-        white: DisabledStyle,
-        link: '',
-        transparent: '',
-        gray: DisabledStyle,
-        '': '',
+
+    const scrollToEnd = (container) => {
+        container.scrollTo({ left: container.scrollWidth, behavior: 'smooth' });
     };
-    const buttonStyle = 'text-center font-sans select-none';
-    const iconStyleMap = {
-        primary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
-        secondary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
-        white: 'group-hover/btn:brightness-0 group-hover/btn:invert',
-        link: '',
-        transparent: '',
-        gray: 'group-hover/btn:brightness-0 group-hover/btn:invert',
-        '': '',
+
+    const scrollToStart = (container) => {
+        container.scrollTo({ left: 0, behavior: 'smooth' });
     };
 
-    const ButtonInner = JSX((props) => {
-        const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
-        return (jsxs("div", { className: style(getButtonStyle(props), 'flex gap-2'), children: [appendLeft ? jsx("div", { className: iconStyleMap[version], children: appendLeft }) : null, isWithText(props) ? (jsxs("div", { children: [aboveText ? jsx("div", { className: "text-xs-light text-left", children: aboveText }) : null, jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-0.5' : 'text-l'}`, children: text })] })) : null, appendRight ? jsx("div", { className: iconStyleMap[version], children: appendRight }) : null] }));
-    });
-    const getButtonStyle = (props) => {
-        const { version, aboveText, rounded } = props;
-        if (version === 'link') {
-            return '';
-        }
-        const withTextStyle = `${aboveText ? 'py-2.5 px-7' : 'py-4 px-4'}`;
+    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 [
-            'group/btn items-center justify-center',
-            isWithText(props) ? withTextStyle : 'h-12 w-12',
-            rounded ? 'rounded-full' : '',
-        ].join(' ');
+            containerRef,
+            {
+                scrollLeft,
+                scrollRight,
+                canScrollLeft: isCyclic || canScrollLeft,
+                canScrollRight: isCyclic || canScrollRight,
+                visibleIndicesRange: [minIndex, maxIndex],
+                handleVisibleIndicesChange,
+            },
+        ];
     };
-    const isWithText = ({ text, aboveText, appendLeft }) => Boolean(text || aboveText || !appendLeft);
-
-    const getDisabledButtonClasses = ({ className, rounded, version, }) => [
-        'inline-block',
-        buttonStyle,
-        version ? buttonDisabledStyleMap[version] : '',
-        rounded ? 'rounded-full' : 'rounded-md',
-        className,
-    ].join(' ');
-
-    const getRegularButtonClasses = ({ className, rounded, version, }) => [
-        buttonStyle,
-        'border border-transparent inline-block cursor-pointer no-underline focus:border-primary-text focus:border h-fit',
-        version ? buttonStyleMap[version] : '',
-        rounded ? 'rounded-full' : 'rounded-md',
-        className,
-    ].join(' ');
-
-    const Button = JSX(({ disabled, children, ...rest }) => {
-        const link = useLink();
-        const adjustedProps = link(rest);
-        const buttonInner = children ?? jsx(ButtonInner, { ...adjustedProps });
-        return disabled ? (jsx(DisabledButton, { ...adjustedProps, children: buttonInner })) : (jsx(RegularButton, { ...adjustedProps, children: buttonInner }));
-    });
-    const RegularButton = JSX(({ className = '', href, rel, target, ariaLabel, version, rounded, onClick, children }) => (jsx("a", { className: getRegularButtonClasses({ className, version, rounded }), href: href, rel: rel, target: target, "aria-label": ariaLabel, role: href ? 'link' : 'button', onClick: onClick, children: children })));
-    const DisabledButton = JSX(({ className, ariaLabel, version, rounded, children }) => (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: -1, className: getDisabledButtonClasses({ className, rounded, version }), children: children })));
 
     const 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'
@@ -782,7 +924,7 @@
         });
         const [dotsActiveIndex] = scroll.visibleIndicesRange;
         const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
-        return (jsx(BlockWrapper, { className: style(getPaddingStyle$1(isPadding), 'group-data-secondary:bg-primary-main group-data-secondary:text-white', className), ...rest, children: jsxs("div", { className: style(getAlignStyle(isAlignCenter), 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
+        return (jsx(BlockWrapper, { className: className, defaultPadding: getPaddingStyle$1(isPadding), ...rest, children: jsxs("div", { className: style(getAlignStyle(isAlignCenter), 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
                             ...rest,
                             renderProps: isBankHistoryCarousel
                                 ? (block, options) => renderBlock(block, options, {
@@ -809,30 +951,6 @@
     const getAlignStyle = (isAlignCenter) => isAlignCenter ? 'flex justify-center' : '';
     const renderDots = (containerRef, dotsActiveIndex, itemCount) => (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: dotsActiveIndex, dotCount: itemCount, listType: 'horizontal-list' }));
 
-    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: `font-sans m-0 ${styles[headingType]} ${className}`, children: title || children }));
-    });
-
     const LinkWrapper = JSX(({ className = '', href, target, isRemote = false, children }) => {
         const link = useLink({ isRemote });
         const linkProps = link({ href, target });
@@ -841,9 +959,9 @@
     });
 
     const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], href, target, ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('border border-gray', className), ...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$1) })) : null] })] }) }));
+        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] })] }) }));
     });
-    const renderList$1 = (_, 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: "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 DOT_SIZE_MAP = {
         L: 'w-1.5 h-1.5 mr-4',
@@ -920,46 +1038,45 @@
         XXL: {
             title: { headingType: 'h0', as: 'h1' },
             descriptionSize: 'text-h5',
-            descriptionStyle: 'mt-headline-xxl',
+            descriptionStyle: 'mt-m',
         },
         XL: {
             title: { headingType: 'h1', as: 'h1' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-headline-l',
+            descriptionStyle: 'mt-s',
         },
         L: {
             title: { headingType: 'h2', as: 'h2' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-headline-l',
+            descriptionStyle: 'mt-s',
         },
         M: {
-            title: { headingType: 'h3', as: 'h3' },
+            title: { headingType: 'h3', as: 'h2' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-headline-m',
+            descriptionStyle: 'mt-text',
         },
         S: {
-            title: { headingType: 'h4', as: 'h4' },
+            title: { headingType: 'h4', as: 'h2' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-headline-s',
+            descriptionStyle: 'mt-xs',
         },
         XS: {
-            title: { headingType: 'h5', as: 'h5' },
+            title: { headingType: 'h5', as: 'h2' },
             descriptionSize: 'text-l-light',
-            descriptionStyle: 'mt-headline-s',
+            descriptionStyle: 'mt-xs',
         },
     };
 
-    const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, isPadding = true, isTheme = false, version = '', ...rest }) => {
+    const Headline = JSX(({ className, version = '', headlineVersion = 'XL', title, description, align = 'text-center', as, isPadding = true, isTheme = false, ...rest }) => {
         const versionStyle = headlineVersionStyles[headlineVersion];
-        const paddingStyle = isPadding ? 'p-default' : '';
         const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
-        return (jsxs(BlockWrapper, { className: style(paddingStyle, className), version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, align: align, ...descriptionStyle, children: description })) : null] }));
+        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 }) => {
-        return (jsx(BlockWrapper, { className: style('relative box-border p-default group-data-gray:bg-main-divider/50', BORDER_STYLE, className), ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-2", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), items.length ? (jsx(List, { className: "flex flex-col gap-2", items: items, listItemSize: "S" })) : null, renderIcon$1(icon), socialMedia.length ? jsx(SocialMedia, { className: "mt-5", media: socialMedia }) : null] }) }));
+        return (jsx(BlockWrapper, { className: style('relative box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), defaultPadding: "p-default", ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-2", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), items.length ? (jsx(List, { className: "flex flex-col gap-2", items: items, listItemSize: "S" })) : null, renderIcon$1(icon), socialMedia.length ? jsx(SocialMedia, { className: "mt-5", media: socialMedia }) : null] }) }));
     });
     const renderIcon$1 = (icon) => icon?.src || icon?.icon ? (jsx("div", { children: jsx(Img, { image: icon }) })) : null;
 
@@ -987,18 +1104,6 @@
 
     const getPaddingStyle = (isHighlighting = false) => isHighlighting ? 'p-default mt-6' : 'mt-6 p-default'; // Хак для мобильной версии т.к. контракт должен быть идентичный
 
-    const renderButtonsSection = (buttons, { className = '', buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-2' : 'flex-wrap gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
-    const renderButton = (buttonClassName = '') => (button, index) => {
-        const { text, icon, iconRight, version, ...rest } = button || {};
-        const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
-        const iconVersion = icon?.iconVersion ? icon?.iconVersion : iconVersionDefault;
-        return text || icon?.icon ? (jsx(Button, { className: buttonClassName, appendLeft: renderButtonIcon({ ...icon, iconVersion }), appendRight: renderButtonIcon({ ...iconRight, iconVersion }), version: version, text: text, ...rest }, index ? String(index) : '')) : null;
-    };
-    const DEFAULT_ICON_W = 24;
-    const renderButtonIcon = (icon) => icon?.icon || icon?.src ? (jsx(Img, { image: icon, width: String(icon?.size?.width || DEFAULT_ICON_W), height: String(DEFAULT_ICON_W) })) : null;
-
-    const Text = JSX(({ children, ...style }) => (jsx("span", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
-
     const descriptionSize = 'text-l';
 
     const renderCardInfo = (cell, i) => {
@@ -1011,7 +1116,7 @@
         const cellsNode = cardCells.map(renderCardInfo);
         const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
         const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
-        return (jsxs(BlockWrapper, { className: style('relative border border-gray flex flex-col', getPaddingStyle(isHighlighting), className), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock(icon), title ? jsx(Heading, { className: "text-center pt-2", headingType: "h5", title: title }) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
+        return (jsxs(BlockWrapper, { className: style('relative border border-gray flex flex-col', className), defaultPadding: getPaddingStyle(isHighlighting), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock(icon), title ? jsx(Heading, { className: "text-center pt-2", headingType: "h5", title: title }) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
     });
     const renderIconBlock = (icon) => (jsx("div", { className: "w-[267px] min-w-[267px] self-center", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }));
     const renderFoldButton$1 = ({ isUnfolded, onToggle }) => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center", onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16" })] }));
@@ -1024,7 +1129,7 @@
       and get rid of a clipping effect caused by overflow: hidden.
      */
     const DEFAULT_PADDING = 16;
-    const SwipeListControl = JSX(({ className = '', gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, minHeight, children, onVisibleIndicesChange, listType = 'horizontal-list', version, }) => {
+    const 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,
@@ -1173,50 +1278,59 @@
                     }, className: "flex-shrink-0 my-auto", width: "20", height: "20" })) : null] }));
     });
 
+    const foldableSectionStyles = 'flex flex-wrap group-last:last:pb-0';
+
+    const getIconName = (isUnfolded) => isUnfolded ? 'ArrowUpSolidIcon' : 'ArrowDownSolidIcon';
+
+    const labelSize$1 = 'text-l';
+
     const iconBgStyles = {
         primary: 'bg-main-divider',
         secondary: 'bg-white/30',
         'secondary-light': 'bg-secondary-light',
     };
-    const RoundedIcon = JSX(({ iconBgVersion = 'primary', ...rest }) => (jsx("div", { className: style('rounded-icon p-2.5 mr-3', iconBgStyles[iconBgVersion]), children: jsx(Icon, { ...rest }) })));
-
-    const foldableSectionStyles = 'flex flex-wrap group-last:last:pb-0';
-
-    const getIconName = (isUnfolded) => isUnfolded ? 'ArrowUpSolidIcon' : 'ArrowDownSolidIcon';
+    const RoundedIcon = JSX(({ iconBgVersion = 'primary', size, icon, ...rest }) => {
+        const width = String(size?.width || 24);
+        const height = String(size?.height || 24);
+        return icon ? (jsx("div", { className: style('rounded-icon p-2.5', iconBgStyles[iconBgVersion]), children: jsx(Icon, { ...rest, width: width, height: height, name: icon }) })) : null;
+    });
 
-    const labelSize = 'text-l';
+    const renderRoundedIcon = (icon, iconBgVersion) => (jsx(RoundedIcon, { ...icon, iconBgVersion: iconBgVersion }));
 
     const rollupIconVersion = 'normal';
 
     const rollupItemStyles = '';
 
-    const RollupItem = JSX(({ className = '', label = 'Развернуть', labelIcon, isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-5 [&>*]:p-0', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ version, label, labelIcon, isUnfolded, onToggle }) }) }));
+    const RollupItem = JSX(({ className = '', label = 'Развернуть', labelIcon, labelIconBgVersion, isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => {
+        return (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), defaultPadding: "p-0", tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-5 [&>*]:p-0', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({
+                    version,
+                    label,
+                    labelIcon,
+                    labelIconBgVersion,
+                    isUnfolded,
+                    onToggle,
+                }) }) }));
     });
     RollupItem.childrenTypes = {
         exclude: ['RollupItem'],
     };
-    const renderFoldButton = ({ version, label: defaultLabel, labelIcon, isUnfolded, onToggle, }) => {
+    const renderFoldButton = ({ version, label: defaultLabel, labelIcon, labelIconBgVersion, isUnfolded, onToggle, }) => {
         const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
         return version === 'primary' ? (renderPrimaryFoldButton({
             label,
             labelIcon,
+            labelIconBgVersion,
             icon: getIconName(isUnfolded),
             onToggle,
         })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
-    const renderPrimaryFoldButton = ({ label, icon, onToggle, labelIcon }) => {
-        const iconWidth = String(labelIcon?.size?.width || 24);
-        const iconHeight = String(labelIcon?.size?.height || 24);
-        const iconName = labelIcon?.icon;
-        return (jsxs("button", { className: style('border-none bg-transparent px-0 flex justify-between items-center w-full cursor-pointer group/button', iconName ? 'py-2' : 'py-5'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main", children: [iconName ? (jsx(RoundedIcon, { name: iconName, width: iconWidth, height: iconHeight, iconVersion: labelIcon?.iconVersion })) : null, label ? (jsx(Text, { size: labelSize, font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
+    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] }));
     };
 
-    const Contacts = JSX(({ className = '', items, hasButton }) => (jsxs("div", { className: className, children: [items?.length ? items.map(renderContact) : null, hasButton ? (jsx(Button, { version: "primary", className: "mb-6 w-full", href: "https://www.rshb.ru/feedback/question/", target: "_blank", ariaLabel: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C", text: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C" })) : null] })));
-    const renderContact = (item, index) => {
-        const { type, text, description } = item;
-        return (jsxs("div", { className: "mb-4", children: [jsx("div", { children: renderText(type, text) }), jsx("div", { className: "mt-1 text-s-light text-secondary-text", children: description })] }, String(index)));
-    };
+    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] })));
+    const renderContactsGroup = (item, i) => (jsxs("div", { className: "mb-6", children: [jsx("div", { className: "mb-4", children: jsx(Text, { size: "text-l", font: "font-medium", children: item?.title }) }), jsx("div", { children: item.items?.map(renderContact) })] }, String(i)));
+    const renderContact = (item, index) => (jsxs("div", { className: "mb-4", children: [jsx("div", { children: renderText(item.type, item.text) }), jsx("div", { className: "mt-1 text-s-light text-secondary-text", children: item.description })] }, String(index)));
     const renderText = (type, text = '') => {
         switch (type) {
             case 'tel':
@@ -1252,8 +1366,8 @@
     const Footer = JSX(({ className = '', ...rest }) => {
         const fallback = rest.options?.page?.fallback;
         const sitemap = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
-        const { documents, relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
-        return (jsxs(BlockWrapper, { tag: "footer", className: style('px-4 py-6', className), ...rest, children: [jsx("div", { className: "mb-4 pb-5 border-b border-main-divider", children: sitemap.topItems?.map((item, i) => (jsx(RollupItem, { label: item?.text, labelIcon: item?.icon, children: jsx(LinkList, { items: item.items, className: "my-3" }) }, String(i)))) }), jsx(Contacts, { className: "overflow-hidden", items: contacts }), jsx(SocialMedia, { className: "mb-4", media: socialMedia }), jsx(Button, { className: "w-full mb-4", text: "Google Play", version: "secondary", href: "/", target: "_blank" }), jsx(HorizontalNavigation, { className: "pt-4 pb-7 border-y border-main-divider", title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, {})] }));
+        const { relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
+        return (jsxs(BlockWrapper, { tag: "footer", className: className, defaultPadding: "px-4 py-6", ...rest, children: [jsx("div", { className: "mb-4 pb-5 border-b border-main-divider", children: sitemap.topItems?.map((item, i) => (jsx(RollupItem, { label: item?.text, labelIcon: item?.icon, children: jsx(LinkList, { items: item.items, className: "my-3" }) }, String(i)))) }), jsx(Contacts, { className: "overflow-hidden", items: contacts }), jsx(SocialMedia, { className: "mb-4", media: socialMedia }), jsx(Button, { className: "w-full mb-4", text: "Google Play", version: "secondary", href: "/", target: "_blank" }), jsx(HorizontalNavigation, { className: "pt-4 pb-7 border-y border-main-divider", title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, {})] }));
     });
 
     const ICON_VERSION_MAP = {
@@ -1303,12 +1417,12 @@
     const Header = JSX(({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], mobileHeaderType = 'none', ...rest }) => {
         const fallback = rest.options?.page?.fallback;
         const { logo, internetBankUrl } = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
-        return (jsx(BlockWrapper, { tag: "header", version: version, ...rest, children: jsx("div", { className: "container px-4 py-1 box-border", children: jsx(HeaderTop, { bgColor: bgColor, logo: logo, internetBankUrl: internetBankUrl, version: version, mobileHeaderType: mobileHeaderType, ...rest }) }) }));
+        return (jsx(BlockWrapper, { tag: "header", defaultPadding: "", version: version, ...rest, children: jsx("div", { className: "container px-4 py-1 box-border", children: jsx(HeaderTop, { bgColor: bgColor, logo: logo, internetBankUrl: internetBankUrl, version: version, mobileHeaderType: mobileHeaderType, ...rest }) }) }));
     });
 
     const ImgBlock = JSX((props) => {
         const { className, image, ...rest } = props;
-        return (jsx(BlockWrapper, { className: className, ...rest, children: jsx(Img, { image: image }) }));
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-0", ...rest, children: jsx(Img, { image: image }) }));
     });
 
     const LinkDocsListItem = JSX(({ doc, icon }) => {
@@ -1329,95 +1443,93 @@
         return index !== -1 ? href.substring(index + 1) : '';
     };
 
-    const LinkDocs = JSX(({ className = '', title, description, icon = { icon: 'DocDownloadIcon', iconVersion: 'black' }, documents, align, ...rest }) => (jsxs(BlockWrapper, { className: style('p-default', className), ...rest, children: [jsx(Headline, { isPadding: false, title: title, description: description, align: align, headlineVersion: "M", as: "h2" }), documents?.length ? (jsx("div", { className: "mt-5 flex flex-col gap-6", role: "list", children: documents.map((doc, i) => (jsx("div", { role: "listitem", children: jsx(LinkDocsListItem, { doc: doc, icon: icon ? (jsx(Img, { className: "min-w-11 min-h-11 h-fit p-2.5 bg-main-divider rounded-md", image: icon, width: "24", height: "24" })) : null }) }, String(i)))) })) : null] })));
-
-    const MobileAppTile = JSX(({ className = '', title = 'Мобильное приложение', description, href = '#' }) => {
-        return (jsx("div", { className: style('col-span-12 rounded-md cursor-pointer p-4 bg-secondary-light font-sans', className), children: href ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "flex justify-center align-middle rounded-md bg-primary-main w-12 h-12", children: jsx(Logo, { className: "w-8", bgColor: "transparent", showTitle: true }) }), jsxs("a", { href: href, target: "_blank", className: "flex flex-col justify-center pl-3", children: [jsx("div", { className: "text-s font-medium mb-[3px]", children: title }), jsx("div", { className: "text-s text-secondary-text", children: description })] })] })) : null }));
-    });
+    const LinkDocs = JSX(({ className = '', title, description, icon = { icon: 'DocDownloadIcon', iconVersion: 'black' }, documents, align, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: [jsx(Headline, { isPadding: false, title: title, description: description, align: align, headlineVersion: "M" }), documents?.length ? (jsx("div", { className: "mt-5 flex flex-col gap-6", role: "list", children: documents.map((doc, i) => (jsx("div", { role: "listitem", children: jsx(LinkDocsListItem, { doc: doc, icon: icon ? (jsx(Img, { className: "min-w-11 min-h-11 h-fit p-2.5 bg-main-divider rounded-md", image: icon, width: "24", height: "24" })) : null }) }, String(i)))) })) : null] })));
 
-    const getColSpan = (className) => {
-        const colSpanPrefix = 'col-span-';
-        const colSpanStr = className?.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
-        return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
+    /**
+     * @deprecated
+     */
+    const AlignText = {
+        left: 'text-left',
+        center: 'text-center',
+        right: 'text-right',
     };
 
-    function getTileHeadingType(className = '') {
-        const colSpan = getColSpan(className);
-        if (colSpan <= 4) {
-            return 'S';
-        }
-        else if (colSpan <= 8) {
-            return 'M';
-        }
-        else {
-            return 'L';
-        }
-    }
+    const imageAlignmentMap = {
+        start: 'self-start',
+        center: 'self-center',
+        end: 'self-end',
+    };
+    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;
 
-    function getTileMinHeight(className = '') {
-        const colSpan = getColSpan(className);
-        if (colSpan <= 6) {
-            return 'min-h-[300px]';
-        }
-        else if (colSpan <= 8) {
-            return 'min-h-[320px]';
-        }
-        else {
-            return 'min-h-[360px]';
-        }
-    }
+    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;
 
-    function getTileRightPadding(className = '') {
-        const colSpan = getColSpan(className);
-        if (colSpan <= 6) {
-            return 'pr-9';
-        }
-        else if (colSpan <= 8) {
-            return 'pr-[4.75rem]';
-        }
-        else {
-            return 'pr-[9.4rem]';
-        }
-    }
+    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" }));
+    };
 
-    const GOLDEN_RATIO = 1.618;
-    const Placeholder = JSX(({ className, title, description = 'Блок в разработке...', ...rest }) => {
-        return (jsxs(BlockWrapper, { className: style('p-9 box-border', className, getTileRightPadding(className), getTileMinHeight(className)), ...rest, children: [jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: getTileHeadingType(className) }), jsx("figure", { className: "m-0 min-w-[80%]", children: renderShimmer() })] }));
+    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)] })] }) }));
     });
-    const renderShimmer = (size = 3) => goldenSequence(100, size)
-        .map((_) => Math.floor(_))
-        .map(renderShimmerItem);
-    const renderShimmerItem = (width, index) => (jsx("div", { style: { width: `${width || 100}%` }, className: "h-4 mt-2 bg-secondary-light" }, String(index)));
-    const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
+
+    const sum = (list = []) => list.reduce((a, b) => a + b, 0);
+
+    const avg = (items = []) => (items?.length ? sum(items) / items.length : 0);
+
+    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'
+            ? '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);
+    }
 
     const RichText = JSX((props) => {
         const { __html = '', richVersion = '' } = props;
         return (jsx("div", { className: style(richVersion, 'md-container'), dangerouslySetInnerHTML: { __html } }));
     });
 
-    const BaseTile = JSX(({ className, title = '', insetTitle = '', buttons, leftImage, rightImage, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col font-sans', className), children: [backImage ? jsx("div", { className: "absolute bottom-0 right-0 z-0", children: backImage }) : null, title, jsxs("div", { className: "grow relative flex flex-wrap sm:flex-nowrap justify-between items-stretch gap-8", children: [renderImageContainer(leftImage), jsxs("div", { className: style('flex flex-col gap-8', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), buttons] }), renderImageContainer(rightImage, { className: '-order-1 sm:order-1' })] })] })));
-    const renderImageContainer = (image, { className } = {}) => image ? jsx("div", { className: style('flex-none', className), children: image }) : null;
-
-    const BenefitItem = JSX(({ className, icon, label, description, version = 'primary', benefitsVersion = 'normal' }) => (jsxs("div", { className: style('flex gap-5', description ? 'items-start' : 'items-center', className), children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(version, benefitsVersion), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null, jsxs("div", { children: [label ? (jsx(Text, { size: "text-h6", color: "text-primary-text group-data-secondary:text-white", children: label })) : null, description ? (jsx(Paragraph, { size: "text-m-light", color: "text-secondary-text group-data-secondary:text-white", children: description })) : null] })] })));
-    function getBenefitIconBgStyle(version, benefitsVersion) {
-        let bgColorStyle = 'bg-primary-main text-black';
-        if (version === 'secondary') {
-            bgColorStyle = 'bg-white/30 text-black';
+    const renderBenefit = (benefitsVersion) => ({ type, ...benefit }, i) => {
+        if (type === 'rte' && '__html' in benefit) {
+            return jsx(RichText, { __html: benefit.__html });
         }
-        else if (benefitsVersion === 'normal') {
-            bgColorStyle = 'bg-secondary-light text-primary-main';
-        }
-        return `w-12 h-12 min-w-12 rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
-    }
+        return jsx(BenefitItem, { benefitsVersion: benefitsVersion, ...benefit }, String(i));
+    };
+
+    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 renderBenefit = (version = 'primary', benefitsVersion = 'normal') => (props, i) => jsx(BenefitItem, { version: version, benefitsVersion: benefitsVersion, ...props }, String(i));
+    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 ProductBlockInner = JSX(({ className, version = 'primary', headlineVersion = 'L', title, description, benefits, benefitsVersion, items, isDotted = true, __html, buttons, image, directionRight = true, }) => {
-        const benefitsWithLabel = benefits?.filter((_) => _.label);
-        const img = image?.src ? jsx(Img, { className: "mt-[-50px]", image: image }) : null;
-        return (jsxs(BaseTile, { className: className, insetTitle: jsx(Headline, { className: "max-w-[600px] xl:max-w-[728px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left", isPadding: false }), ...(directionRight ? { rightImage: img } : { leftImage: img }), buttons: renderButtonsSection(buttons), children: [benefitsWithLabel?.length ? (jsx("div", { className: "flex flex-wrap gap-6", children: benefitsWithLabel.map(renderBenefit(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? jsx(List, { className: "mt-5", items: items, isDotted: isDotted }) : null] }));
+    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 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] }) }));
     });
 
+    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 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() })] })));
+    const renderShimmer = (size = 3) => goldenSequence(100, size)
+        .map((_) => Math.floor(_))
+        .map(renderShimmerItem);
+    const renderShimmerItem = (width, index) => (jsx("div", { style: { width: `${width || 100}%` }, className: "h-4 mt-2 bg-secondary-light" }, String(index)));
+    const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
+
     function renderBackwardButton({ text, href, target, icon }, version) {
         const iconVersion = version === 'primary' ? 'white' : 'black';
         const commonProps = { text, href, target, ariaLabel: text };
@@ -1428,19 +1540,17 @@
                         } }) }), jsx(Button, { version: "link", ...commonProps })] }));
     }
 
-    const ProductBlock = JSX(({ className, backwardButton, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden p-default flex flex-col gap-10 box-border', className), ...rest, children: [backwardButton?.text
+    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
                 ? renderBackwardButton(backwardButton, !rest.version || rest.version === 'primary' ? 'primary' : 'white')
-                : null, jsx(ProductBlockInner, { className: "grow", ...rest })] })));
+                : null, jsx(BaseProductTile, { className: "grow h-full", ...rest })] })));
 
-    const ProductGallery = JSX(({ className = '', slides = [], ...rest }) => {
-        const galleryBlocks = slides.map((s) => s.productBlock);
-        return (jsx(BlockWrapper, { className: `box-border py-6 overflow-hidden relative w-100 mb-6 ${className}`, ...rest, children: jsx(SwipeListControl, { gap: 0, padding: 0, children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest }, i)) }) }));
-    });
-    const renderProductBlock = (block, i) => (jsx(ProductBlockInner, { className: "z-10 px-5 group-data-secondary:text-white", ...block }, String(i)));
+    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
+                .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)))) }) })));
 
     const RichTextBlock = JSX((props) => {
         const { __html, richVersion, ...rest } = props;
-        return (jsx(BlockWrapper, { ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) }));
+        return (jsx(BlockWrapper, { defaultPadding: "p-0", ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) }));
     });
 
     function assertUnreachable(x) {
@@ -1466,7 +1576,7 @@
         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 px-4 py-6 flex flex-col ${className}`, 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, 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] })));
     // TODO: Create universal function for this case
     const renderStep = (size, version, showLines) => 
     // Linter doesn't understand that switch processes all cases
@@ -1502,12 +1612,9 @@
         className: 'mt-3',
         buttonClassName: 'w-12 h-12',
     });
-    const renderLabelDescriptionCellData = ({ label, description }) => {
-        const labelClassName = `text-xl font-medium m-0 ${description ? 'mb-1' : ''}`;
-        return (jsxs("div", { children: [label ? jsx("div", { className: labelClassName, children: label }) : null, description ? jsx("div", { className: "text-s text-secondary-text", children: description }) : null] }));
-    };
-    const renderImgCellData = ({ image }) => image?.src ? jsx(Img, { image: { ...image, className: 'm-0' } }) : null;
-    const renderListCellData = ({ isDotted, ...rest }) => (jsx(List, { className: "flex flex-col justify-between items-start text-m", isDotted: isDotted ?? true, ...rest }));
+    const renderLabelDescriptionCellData = ({ label, description }) => (jsxs("div", { children: [label ? jsx("div", { className: "mb-2", children: label }) : null, description ? jsx("div", { className: "text-s text-secondary-text", children: description }) : null] }));
+    const renderImgCellData = ({ image }) => image?.src ? jsx(Img, { image: image, className: "m-0", imageClassName: "m-0" }) : null;
+    const renderListCellData = ({ isDotted, ...rest }) => (jsx(List, { className: "flex flex-col justify-between items-start text-m pl-2 text-base", isDotted: isDotted ?? true, ...rest }));
     const EmbeddableCellData = {
         Buttons: renderButtonsCellData,
         Img: renderImgCellData,
@@ -1515,10 +1622,10 @@
         LabelDescription: renderLabelDescriptionCellData,
     };
 
-    const TableTileHeader = JSX(({ title, icon }) => (jsxs("div", { className: "flex gap-2.5 mb-2", children: [title ? jsx(Heading, { headingType: "h3", className: "font-medium", title: title }) : null, icon ? jsx(Img, { className: "ml-auto min-w-6", image: icon, width: "24", height: "24" }) : null] })));
+    const TableTileHeader = JSX(({ title, icon }) => (jsxs("div", { className: "mb-2", children: [title ? jsx(Text, { size: "text-l-light", children: title }) : null, icon ? jsx(Img, { className: "ml-auto min-w-6", image: icon, width: "24", height: "24" }) : null] })));
 
-    const TariffsTableTileCell = JSX(({ tile, ...rest }) => (jsxs("div", { className: "rounded-md border-gray h-full box-border border p-4", children: [jsx(TableTileHeader, { ...tile?.header }), tile?.data?.length
-                ? tile.data.map((cell, i) => (jsxs("div", { children: [i > 0 ? jsx("div", { className: "h-5" }) : null, renderCell(cell, rest)] }, String(i))))
+    const TariffsTableTileCell = JSX(({ tile, ...rest }) => (jsxs("div", { className: "h-full", children: [jsx(TableTileHeader, { title: tile?.header?.title }), tile?.data?.length
+                ? tile.data.map((cell, i) => (jsx("div", { className: "mb-2", children: renderCell(cell, rest) }, String(i))))
                 : null] })));
     function renderCell(cell, props) {
         if (!cell || !cell.tableCellType || !(cell.tableCellType in EmbeddableCellData)) {
@@ -1528,15 +1635,14 @@
         return jsx(EmbeddableCellInner, { displayTable: () => null, isVisible: true, ...cell, ...props });
     }
 
-    const TariffsTableHorizontal = JSX(({ tiles, ...rest }) => tiles?.length ? (jsx(SwipeListControl, { ...rest, children: tiles.map((tile, i) => (jsx(TariffsTableTileCell, { tile: tile, ...rest }, String(i)))) })) : null);
+    const TariffsTableHorizontal = JSX(({ tiles, ...rest }) => tiles?.length ? (jsx(SwipeListControl, { ...rest, padding: undefined, children: tiles.map((tile, i) => (jsx(TariffsTableTileCell, { tile: tile, ...rest }, String(i)))) })) : null);
 
     const TariffsTableVertical = JSX(({ tiles, ...rest }) => tiles?.length ? (jsx("div", { className: "flex flex-col gap-3.5", children: tiles.map((tile, i) => (jsx(TariffsTableTileCell, { tile: tile, ...rest }, String(i)))) })) : null);
 
     const TariffsTable = JSX(({ className, title, description, tariffsColumns: columns, rowHeaders, orientation = 'vertical', ...rest }) => {
         const colData = getColData(columns);
         const tiles = getTiles(rowHeaders, colData);
-        const headingMargin = description ? 'mb-2' : 'mb-5';
-        return (jsxs("section", { className: `px-4 py-6 bg-white font-sans text-primary-text overflow-x-hidden ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${headingMargin}`, title: title })) : null, description ? jsx("div", { className: "mb-5 text-center text-m", children: description }) : null, orientation === 'vertical' ? (jsx(TariffsTableVertical, { tiles: tiles, ...rest })) : (jsx(TariffsTableHorizontal, { tiles: tiles, ...rest }))] }));
+        return (jsxs("section", { className: `p-default bg-white font-sans text-primary-text overflow-x-hidden ${className}`, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", align: "text-left", isPadding: false, className: "mb-8" }), orientation === 'vertical' ? (jsx(TariffsTableVertical, { tiles: tiles, ...rest })) : (jsx(TariffsTableHorizontal, { tiles: tiles, ...rest }))] }));
     });
     const getColData = (columns) => columns?.[0]?.data ? columns[0].data : [];
     const getTiles = (rowHeaders, colData) => rowHeaders?.map((header, i) => ({
@@ -1544,9 +1650,7 @@
         data: colData?.[i] || [{}],
     }));
 
-    const TextBlock = JSX(({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => {
-        return (jsxs(BlockWrapper, { className: style('px-9 py-4 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(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 }));
@@ -1573,7 +1677,7 @@
     };
     const VerticalLayout = JSX(({ className = '', gap = '', align = 'stretch', isPadding = false, isInnerPadding = true, version = 'transparent', isTheme = false, ...rest }) => {
         const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
-        return (jsx(BlockWrapper, { className: style('relative', 'flex flex-col [&>*]:max-w-full', isPadding ? 'p-default' : '', gapStyles[gap], align && alignStyle[align], className), version: version, isTheme: isTheme, ...rest, children: renderChildren({
+        return (jsx(BlockWrapper, { className: style('relative', 'flex flex-col [&>*]:max-w-full', gapStyles[gap], align && alignStyle[align], className), defaultPadding: isPadding ? 'p-default' : '', version: version, isTheme: isTheme, ...rest, children: renderChildren({
                 ...rest,
                 renderProps: (block, options) => renderBlock(block, options, { className: innerPaddingStyle }),
             }) }));
@@ -1581,6 +1685,8 @@
     VerticalLayout.childrenTypes = [];
 
     const Blocks = {
+        ButtonsBlock,
+        CardTransfer,
         Carousel,
         CarouselTariffsCard,
         ComparisonTable,
@@ -1590,6 +1696,7 @@
         ImgBlock,
         LinkDocs,
         MobileAppTile,
+        PictureText,
         Placeholder,
         ProductBlock,
         StepsBlock,
@@ -1800,7 +1907,7 @@
 
     const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
 
-    const packageVersion = "0.11.2";
+    const packageVersion = "0.12.3";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;