@redneckz/wildless-cms-uni-blocks 0.11.1 → 0.11.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',
@@ -371,159 +327,6 @@
     });
     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 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 max = maxBy();
-
-    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();
     }
@@ -735,6 +538,353 @@
     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-2 justify-items-stretch' : '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: 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), ...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: `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('p-default flex flex-col items-center', className), ...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 areArraysEqual = (as, bs) => as === bs || Boolean(as && bs && as?.length === bs?.length && as.every((_, i) => _ === bs[i]));
+
+    const defaultDiscriminator = (_) => _;
+    const maxBy = (discriminator = defaultDiscriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
+
+    const minBy = (discriminator = defaultDiscriminator) => maxBy((_) => -discriminator(_));
+
+    const getItemWidth = (container) => (itemCount) => container.scrollWidth / itemCount;
+    const scrollBy = (container) => (itemCount, delta) => {
+        container.scrollBy({ left: delta * getItemWidth(container)(itemCount), behavior: 'smooth' });
+    };
+
+    const scrollToEnd = (container) => {
+        container.scrollTo({ left: container.scrollWidth, behavior: 'smooth' });
+    };
+
+    const scrollToStart = (container) => {
+        container.scrollTo({ left: 0, behavior: 'smooth' });
+    };
+
+    const useSwipeListScroll = ({ itemCount, isCyclic, onVisibleIndicesChange, }) => {
+        const containerRef = useRef(null);
+        const [visibleIndices, setVisibleIndices] = useState([]);
+        const handleVisibleIndicesChange = useCallback((indices) => {
+            setVisibleIndices((prevIndices) => areArraysEqual(prevIndices, indices) ? prevIndices : indices);
+            onVisibleIndicesChange && onVisibleIndicesChange(indices);
+        }, [itemCount]);
+        const [minIndex, maxIndex] = visibleIndices.length
+            ? [minBy()(visibleIndices), maxBy()(visibleIndices)]
+            : [-1, -1];
+        const canScrollLeft = minIndex > 0;
+        const canScrollRight = maxIndex < itemCount - 1;
+        const scrollLeft = useCallback(() => {
+            if (!containerRef.current) {
+                return;
+            }
+            if (isCyclic && !canScrollLeft) {
+                scrollToEnd(containerRef.current);
+            }
+            else {
+                scrollBy(containerRef.current)(itemCount, -1);
+            }
+        }, [isCyclic, itemCount, canScrollLeft]);
+        const scrollRight = useCallback(() => {
+            if (!containerRef.current) {
+                return;
+            }
+            if (isCyclic && !canScrollRight) {
+                scrollToStart(containerRef.current);
+            }
+            else {
+                scrollBy(containerRef.current)(itemCount, 1);
+            }
+        }, [itemCount, isCyclic, canScrollRight]);
+        return [
+            containerRef,
+            {
+                scrollLeft,
+                scrollRight,
+                canScrollLeft: isCyclic || canScrollLeft,
+                canScrollRight: isCyclic || canScrollRight,
+                visibleIndicesRange: [minIndex, maxIndex],
+                handleVisibleIndicesChange,
+            },
+        ];
+    };
+
     const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `group/btn shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
         ? 'bg-secondary-light text-secondary-text'
         : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover/btn:text-primary-main", width: "16", height: "16" }) })));
@@ -817,6 +967,11 @@
         return (jsx(Tag, { className: style('block', className), ...(href ? linkProps : {}), children: children }));
     });
 
+    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] })] }) }));
+    });
+    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 DOT_SIZE_MAP = {
         L: 'w-1.5 h-1.5 mr-4',
         M: 'w-1.5 h-1.5 mr-3',
@@ -886,52 +1041,38 @@
 
     const SocialMedia = JSX(({ className = '', media }) => (jsx("div", { className: `flex gap-2 items-start justify-start ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { ..._ }, String(index)))) })));
 
-    const HeadingClass = {
-        h0: 'text-m-title',
-        h1: 'text-m-title',
-        h2: 'text-m-title',
-        h3: 'text-h6',
-        h4: 'text-m-title-xs',
-        h5: 'text-m-title-xs',
-        h6: 'text-m-title-xs',
-    };
-    const Heading = JSX((props) => {
-        const { className, headingType = 'h3', title, as: Tag = 'h3' } = props;
-        return (jsx(Tag, { className: `font-sans font-medium m-0 ${HeadingClass[headingType]} ${className || ''}`, children: title }));
-    });
-
     const Paragraph = JSX(({ children, ...style }) => (jsx("p", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
 
     const headlineVersionStyles = {
         XXL: {
             title: { headingType: 'h0', as: 'h1' },
             descriptionSize: 'text-h5',
-            descriptionStyle: 'mt-5',
+            descriptionStyle: 'mt-headline-xxl',
         },
         XL: {
             title: { headingType: 'h1', as: 'h1' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-4',
+            descriptionStyle: 'mt-headline-l',
         },
         L: {
             title: { headingType: 'h2', as: 'h2' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-4',
+            descriptionStyle: 'mt-headline-l',
         },
         M: {
             title: { headingType: 'h3', as: 'h3' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-3',
+            descriptionStyle: 'mt-headline-m',
         },
         S: {
             title: { headingType: 'h4', as: 'h4' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-2',
+            descriptionStyle: 'mt-headline-s',
         },
         XS: {
             title: { headingType: 'h5', as: 'h5' },
             descriptionSize: 'text-l-light',
-            descriptionStyle: 'mt-2',
+            descriptionStyle: 'mt-headline-s',
         },
     };
 
@@ -968,22 +1109,10 @@
                     : '';
             }
         }, [isUnfolded, children?.length]);
-        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} ${className}`, children: children }));
-    });
-
-    const 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;
+        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} ${className}`, children: children }));
+    });
 
-    const Text = JSX(({ children, ...style }) => (jsx("span", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
+    const getPaddingStyle = (isHighlighting = false) => isHighlighting ? 'p-default mt-6' : 'mt-6 p-default'; // Хак для мобильной версии т.к. контракт должен быть идентичный
 
     const descriptionSize = 'text-l';
 
@@ -1123,15 +1252,6 @@
         }
     }
 
-    async function fetchJSON(url, options) {
-        try {
-            return url ? await fetchJSONUnsafe(url, options) : null;
-        }
-        catch (err) {
-            console.error(err);
-        }
-        return null;
-    }
     async function fetchJSONUnsafe(url, options) {
         const response = await fetch(url, {
             ...options,
@@ -1173,45 +1293,54 @@
         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 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 mr-3', iconBgStyles[iconBgVersion]), children: jsx(Icon, { ...rest, width: width, height: height, name: icon }) })) : null;
+    });
+
+    const renderRoundedIcon = (icon, iconBgVersion) => (jsx(RoundedIcon, { ...icon, iconBgVersion: iconBgVersion }));
 
     const foldableSectionStyles = 'flex flex-wrap group-last:last:pb-0';
 
     const getIconName = (isUnfolded) => isUnfolded ? 'ArrowUpSolidIcon' : 'ArrowDownSolidIcon';
 
-    const labelSize = 'text-l';
+    const labelSize$1 = 'text-l';
 
     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), 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 cursor-pointer 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':
@@ -1251,371 +1380,6 @@
         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 isHrefActive = (router) => ({ href }) => withoutQuery(isURL(href) ? router.href : router.pathname).startsWith(withoutQuery(href));
-
-    const findActiveSubItem = (router) => (items = []) => {
-        const possibleActiveSubItems = items?.filter(isHrefActive(router));
-        return possibleActiveSubItems?.length
-            ? maxBy((_) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
-            : undefined;
-    };
-
-    const isTopItemActive = (router) => isHrefActive(projectSettings.BASE_PATH ? { pathname: projectSettings.BASE_PATH } : router);
-
-    const HeaderItem = JSX(({ className = '', active, dataItemName, children, ...rest }) => {
-        const link = useLink();
-        const { href, target, text, onClick } = link(rest);
-        return (jsxs("a", { className: style('relative inline-block bg-transparent text-center no-underline', className), href: href, target: target, "data-item-name": dataItemName, onClick: onClick, children: [jsx("span", { className: getTextStyle(active), children: text || children }), active ? (jsx("div", { className: "absolute left-0 -bottom-3 w-full h-0.5 bg-primary-main group-data-transparent:bg-transparent" })) : null] }));
-    });
-    const getTextStyle = (active = false) => style('font-sans text-s', active ? 'text-primary-main' : 'text-secondary-text hover:text-primary-main', 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
-
-    const STORAGE_DEFAULT_TTL = 86400000; // 24 * 60 * 60 * 1000
-    function useCachedAsyncData(key, fetcher, storage = globalThis?.localStorage) {
-        const cachedFetcher = useCallback(async (...args) => {
-            const storageKey = `async:${key}`;
-            const storageData = storage.getItem(storageKey);
-            const cachedData = getParsedData(storageData);
-            if (cachedData) {
-                return cachedData;
-            }
-            const data = await fetcher(...args);
-            storage.setItem(storageKey, JSON.stringify({ data, timestamp: Date.now() }));
-            return data;
-        }, [key, fetcher]);
-        return useAsyncData(key, cachedFetcher);
-    }
-    function getParsedData(storageData) {
-        const { data = null, timestamp = null } = storageData ? JSON.parse(storageData) : {};
-        return data && Date.now() - timestamp < STORAGE_DEFAULT_TTL ? data : undefined;
-    }
-
-    const REGION_URL = '/api/v1/region';
-    function useLocation(defaultLocation = 'Москва') {
-        const currentLocation = getLocalStorageLocation();
-        const [location, setLocation] = useState(currentLocation?.region ?? { name: defaultLocation });
-        const { data } = useCachedAsyncData(REGION_URL, fetchJSONUnsafe);
-        useEffect(() => {
-            setLocation(currentLocation?.region && currentLocation?.manual
-                ? currentLocation.region
-                : data || { name: defaultLocation });
-        }, [data]);
-        const onChangeLocation = useCallback((region) => {
-            globalThis.localStorage?.setItem('location', JSON.stringify({ manual: true, region }));
-            setLocation(region);
-        }, []);
-        return [location, onChangeLocation];
-    }
-    const getLocalStorageLocation = () => {
-        const localStorageLocation = globalThis.localStorage?.getItem('location');
-        try {
-            return localStorageLocation ? JSON.parse(localStorageLocation) : null;
-        }
-        catch (_) {
-            return null;
-        }
-    };
-
-    const CloseButton = JSX(({ className, onClick }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-1 bg-transparent border-none', className), onClick: onClick, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
-
-    function assertUnreachable(x) {
-        throw new Error(x);
-    }
-
-    function useDialogHandlers({ onOpen, onClose } = {}) {
-        useEffect(() => defaultEventBus.subscribe('dialog', (action) => {
-            switch (action.type) {
-                case 'open':
-                    onOpen && onOpen(action);
-                    break;
-                case 'close':
-                    onClose && onClose();
-                    break;
-                default:
-                    assertUnreachable(action);
-            }
-        }), [onOpen, onClose]);
-    }
-
-    const useDebouncedEffect = (effect, deps, delay = 300) => useEffect(() => {
-        const timerId = setTimeout(effect, delay);
-        return () => {
-            clearTimeout(timerId);
-        };
-    }, deps);
-
-    const compareBy = (indexOf) => (a, b) => indexOf(a) - indexOf(b);
-    const desc = (cmp) => (a, b) => -cmp(a, b);
-
-    function zip(firstCol, ...restCols) {
-        return firstCol.map((firstEl, rowIndex) => [firstEl, ...restCols.map((col) => col[rowIndex])]);
-    }
-
-    const JARO_WINKLER_P = 0.1;
-    const JARO_WINKLER_MAX_L = 4;
-    const jaroWinklerDistance = (s1) => (s2) => {
-        if (s1 === s2) {
-            return 1;
-        }
-        if (!s1 || !s2) {
-            return 0;
-        }
-        const { m, s1Matches, s2Matches } = computeM(s1, s2);
-        if (m === 0) {
-            return 0;
-        }
-        const t = computeT(s1, s2, { s1Matches, s2Matches });
-        const jaroWeight = (m / s1.length + m / s2.length + (m - t / 2) / m) / 3;
-        const winklerWeight = jaroWeight > 0.7 ? computePrefixL(s1, s2) * JARO_WINKLER_P : 0;
-        return jaroWeight + winklerWeight * (1 - jaroWeight);
-    };
-    function computeM(s1, s2) {
-        const range = Math.max(0, Math.floor(Math.max(s1.length, s2.length) / 2) - 1);
-        const s1Matches = new Array(s1.length);
-        const s2Matches = new Array(s2.length);
-        let m = 0;
-        for (let i = 0; i < s1.length; i++) {
-            const low = Math.max(0, i - range);
-            const high = Math.min(i + range, s2.length - 1);
-            for (let j = low; j <= high; j++) {
-                if (s1Matches[i] || s2Matches[j] || s1[i] !== s2[j]) {
-                    continue;
-                }
-                m++;
-                s1Matches[i] = true;
-                s2Matches[j] = true;
-            }
-        }
-        return { m, s1Matches, s2Matches };
-    }
-    function computeT(s1, s2, { s1Matches, s2Matches }) {
-        let t = 0;
-        for (let i = 0, k = 0; i < s1.length; i++) {
-            if (!s1Matches[i]) {
-                continue;
-            }
-            let j = k;
-            for (; j < s2.length; j++) {
-                if (s2Matches[j]) {
-                    k = j + 1;
-                    break;
-                }
-            }
-            if (s1[i] !== s2[j]) {
-                t++;
-            }
-        }
-        return t;
-    }
-    function computePrefixL(s1, s2) {
-        let prefixL = 0;
-        while (s1[prefixL] === s2[prefixL] && prefixL < JARO_WINKLER_MAX_L) {
-            prefixL++;
-        }
-        return prefixL;
-    }
-
-    const joinMaps = (aggregate, emptyVal) => (acc, map) => {
-        for (const [key, b] of map) {
-            acc.set(key, aggregate(acc.get(key) || emptyVal, b));
-        }
-        return acc;
-    };
-
-    const sum = (list = []) => list.reduce((a, b) => a + b, 0);
-
-    const MIN_TERM_LEN = 3;
-    const tokenize = (text) => text
-        .toLowerCase()
-        .split(/[^0-9a-zа-я-]+/)
-        .filter((token) => token.length >= MIN_TERM_LEN && !/[0-9a-z]/.test(token));
-
-    const textRank = (queryTokens) => (text) => {
-        const textTokens = tokenize(text || '');
-        return textTokens.length
-            ? sum(queryTokens.map((qToken) => max(textTokens.map(jaroWinklerDistance(qToken)))))
-            : 0;
-    };
-
-    const JW_THRESHOLD = 0.8;
-    const RANK_EPS = 0.001;
-    const search = (query) => (searchIndex) => {
-        const { corpus, dictionary } = searchIndex || {};
-        if (!query || !corpus?.length || !dictionary || !Object.keys(dictionary).length) {
-            return [];
-        }
-        const queryTokens = tokenize(query);
-        if (!queryTokens.length) {
-            return [];
-        }
-        const dictEntries = Object.entries(dictionary);
-        const pagesRanking = queryTokens
-            .map(computePagesRankingPerToken(dictEntries))
-            .reduce(joinMaps((a, b) => a + b, 0), new Map());
-        const relevantPages = [...pagesRanking.entries()]
-            .filter(([, pageRank]) => pageRank >= (JW_THRESHOLD - RANK_EPS) * queryTokens.length) // Multiplication of query tokens
-            .map(([pageIndex]) => corpus[pageIndex]);
-        return sortResultsByRank(queryTokens)(relevantPages);
-    };
-    const computePagesRankingPerToken = (dictEntries) => (qToken) => dictEntries
-        .map(([stem, pageIndices]) => [jaroWinklerDistance(qToken)(stem), pageIndices])
-        .filter(([stemRank]) => stemRank >= JW_THRESHOLD)
-        .map(([stemRank, pageIndices]) => fillMapWith(pageIndices, stemRank))
-        .reduce(joinMaps(Math.max, 0), new Map());
-    const sortResultsByRank = (queryTokens) => (results) => zip(results, results.map(({ title }) => title).map(textRank(queryTokens)))
-        .sort(desc(compareBy(([, pageTitleRank]) => pageTitleRank)))
-        .map(([corpusItem]) => corpusItem);
-    const fillMapWith = (keys, value) => new Map(keys.map((_) => [_, value]));
-
-    const SEARCH_INDEX_FILENAME = 'search.index.json';
-    const DEFAULT_BASE_PATH = ['/'];
-    const useSearch = ({ basePathList = DEFAULT_BASE_PATH, initialQuery = '', wasOpened, }) => {
-        const [query, setQuery] = useState(initialQuery || '');
-        useEffect(() => {
-            if (initialQuery !== undefined && initialQuery !== null) {
-                setQuery(initialQuery);
-            }
-        }, [initialQuery]);
-        const key = useMemo(() => basePathList.map((_) => (wasOpened ? _ : null)), // Load search index on very first search
-        [wasOpened, basePathList]);
-        const { data } = useAsyncData(key, fetchSearchIndex);
-        const [result, setResult] = useState(null);
-        useDebouncedEffect(() => {
-            if (data) {
-                setResult(data.map(search(query)));
-            }
-        }, [data, query]);
-        return [result, { value: query, onChange: setQuery }];
-    };
-    const fetchSearchIndex = async (...basePathList) => (await Promise.allSettled(basePathList.map((basePath) => fetchJSON(joinPath(basePath, '/', SEARCH_INDEX_FILENAME))))).map((_) => (_.status === 'fulfilled' ? _.value : {}));
-
-    const Dialog = JSX(({ className, isOpened, head, children, onClose }) => {
-        useEffect(() => {
-            const handleEscape = ({ key }) => {
-                if (key === 'Escape') {
-                    onClose && onClose();
-                }
-            };
-            globalThis.document?.addEventListener('keydown', handleEscape);
-            return () => {
-                globalThis.document?.removeEventListener('keydown', handleEscape);
-            };
-        }, [onClose]);
-        return isOpened ? (jsx("div", { className: style('fixed inset-0 bg-white text-l-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar', className), role: "dialog", children: jsxs("div", { className: "relative container pb-12 min-h-full", children: [jsxs("div", { className: "sticky bg-white pt-6 top-0", children: [jsx(CloseButton, { className: "absolute top-10 -right-12", onClick: onClose }), head] }), children] }) })) : null;
-    });
-
-    function useBool(defaultValue = false) {
-        const [value, setValue] = useState(defaultValue);
-        const setTrue = useCallback(() => setValue(true), []);
-        const setFalse = useCallback(() => setValue(false), []);
-        const toggle = useCallback(() => setValue((_) => !_), []);
-        return [value, { setValue, setTrue, setFalse, toggle }];
-    }
-
-    function useDialogProps(id, initOpen = false) {
-        const [isOpened, { setTrue: open, setFalse: close }] = useBool(initOpen);
-        const [params, setParams] = useState({ id });
-        const wasOpened = useRef(isOpened);
-        wasOpened.current ||= isOpened;
-        const handleOpen = useCallback((_) => {
-            if (_.id === id) {
-                setParams(_);
-                open();
-            }
-            else {
-                close();
-            }
-        }, [id]);
-        useDialogHandlers({
-            onOpen: handleOpen,
-            onClose: close,
-        });
-        const handleCloseAsEventSource = useCallback(() => {
-            close();
-            defaultEventBus.fire('dialog', { type: 'close' });
-        }, []);
-        return {
-            ...params,
-            isOpened,
-            wasOpened: wasOpened.current,
-            onClose: handleCloseAsEventSource,
-        };
-    }
-
-    const Sitemap = JSX(({ className, topItems }) => {
-        const link = useLink({ isRemote: true });
-        return (jsx("div", { className: style('flex items-start justify-between', className), children: topItems?.map(link).map(renderColumn) }));
-    });
-    const renderColumn = (menuItem, index) => {
-        const { text, items, href, target, onClick } = menuItem;
-        return (jsxs("div", { className: "flex flex-col gap-3.5 w-1/4", children: [jsx("a", { className: "leading-5 text-l text-primary-text hover:text-primary-main no-underline", href: href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }), items?.map((_, i) => (jsx(ColumnItem, { ..._, basePath: appendSlash(href), index: i }, String(i))))] }, String(index)));
-    };
-    const ColumnItem = JSX(({ text, index, basePath, ...rest }) => {
-        const isAnotherPortal = projectSettings.BASE_PATH && basePath ? !projectSettings.BASE_PATH.startsWith(basePath) : false;
-        const link = useLink({ isRemote: isAnotherPortal, basePath });
-        const { href, target, onClick } = link(rest);
-        return (jsx("a", { className: style('text-l-light text-secondary-text hover:text-primary-main no-underline', 'overflow-x-hidden overflow-ellipsis whitespace-nowrap'), href: href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }));
-    });
-
-    const SearchInput = JSX(({ className, value, autoFocus, onChange, onFocus }) => {
-        const handleChange = useCallback((ev) => {
-            onChange && onChange(ev.target?.value || '');
-        }, [onChange]);
-        return (jsxs("div", { className: style('font-sans relative', className), role: "form", children: [jsx("div", { className: "absolute h-full flex items-center pl-4 pointer-events-none", children: jsx(Img, { image: { icon: 'LoupeIcon' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-12 pl-12 w-full text-l text-black outline-none box-border', 'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'), value: value, type: "text", name: "search-bar-input", placeholder: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", autoFocus: autoFocus, onChange: handleChange, onFocus: onFocus })] }));
-    });
-
-    const SEARCH_DIALOG_ID = 'search';
-    JSX(({ topItems }) => {
-        const dialogProps = useDialogProps(SEARCH_DIALOG_ID);
-        const basePathList = useMemo(() => topItems?.map((_) => _.href || '/'), [topItems]);
-        const [searchResult, searchInputProps] = useSearch({
-            basePathList,
-            initialQuery: dialogProps.message,
-            wasOpened: dialogProps.wasOpened,
-        });
-        const searchItems = useMemo(() => combineTopItemsAndSearchResult(topItems)(searchResult), [topItems, searchResult]);
-        useEffect(() => printSearchItems(searchItems), [searchItems]); // Temp
-        return (jsx(Dialog, { ...dialogProps, head: jsx(SearchInput, { className: "my-5", autoFocus: true, ...searchInputProps }), children: jsx(Sitemap, { topItems: searchItems }) }));
-    });
-    const combineTopItemsAndSearchResult = (topItems) => (searchResult) => topItems?.length && searchResult?.length
-        ? zip(topItems, searchResult).map(([_, portalSearchResult]) => ({
-            ..._,
-            items: portalSearchResult?.map(({ title, uri }) => ({ text: title, href: joinPath('/', uri) })),
-        }))
-        : [];
-    // Temp
-    function printSearchItems(topItems) {
-        for (const _ of topItems.filter(({ items }) => items?.length)) {
-            console.group(_.text);
-            console.table(_.items, ['text', 'href']);
-            console.groupEnd();
-        }
-    }
-
-    const MIN_QUERY_LEN = 3;
-    const SearchBar = JSX(({ className }) => {
-        const [value, setValue] = useState('');
-        const resetQueryOnDialogClose = useCallback(() => setValue(''), []);
-        useDialogHandlers({ onClose: resetQueryOnDialogClose });
-        const { open } = useDialog(SEARCH_DIALOG_ID);
-        const handleInitialInputChange = useCallback((_) => {
-            setValue(_);
-            if (isQueryLongEnough(_)) {
-                open(_);
-            }
-        }, []);
-        return (jsxs("div", { className: className, children: [jsx(SearchInput, { value: value, onChange: handleInitialInputChange }), jsx(CloseButton, { className: "absolute top-2 right-3 sm:hidden", onClick: resetQueryOnDialogClose })] }));
-    });
-    const isQueryLongEnough = (_) => _ && _.length >= MIN_QUERY_LEN;
-
-    const HeaderBurger = JSX(({ burgerSubMenu, onClick, defaultLocation = '', children }) => {
-        const [location] = useLocation(defaultLocation);
-        return (jsxs("div", { className: "absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20", children: [jsx("button", { className: "absolute top-4 right-4 border-none bg-transparent cursor-pointer", onClick: onClick, children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) }), jsxs("button", { className: "flex items-center text-s p-0 mb-4 bg-transparent cursor-pointer", children: [jsx(Img, { image: { icon: 'GeolocationIcon' }, width: "20", height: "20", className: "text-primary-main box-border mr-2" }), jsx(Text, { color: "text-secondary-text", children: location.name })] }), children, jsx("div", { className: "mb-7", children: burgerSubMenu?.map(renderBurgerSubMenuItem) }), jsx(SearchBar, { className: "grow" })] }));
-    });
-    const renderBurgerSubMenuItem = (menu, i) => {
-        const { icon, href, text } = menu;
-        return (jsxs("a", { href: href, className: "flex text-s mb-4 hover:text-primary-main", children: [icon ? jsx(Img, { className: "text-primary-main pr-1", image: icon, width: "24", height: "24" }) : null, jsx("span", { className: "font-medium pl-0.5", children: text })] }, `headerSubMenu-${i}`));
-    };
-
     const ICON_VERSION_MAP = {
         'bg-white': 'color',
         transparent: 'white',
@@ -1643,22 +1407,27 @@
         return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$1(bgColor, logo?.image, { width: '34', height: '34' }), showTitle ? renderTitle(children || logo?.title, bgColor, 'text-s') : null] }));
     });
 
-    const HeaderTop = JSX(({ onClick, bgColor, logo }) => (jsxs("div", { className: "flex items-center justify-between border-0 border-b border-main-divider h-12", children: [jsxs("div", { className: "flex items-center", children: [jsx("button", { className: "pl-0 pr-4 border-0 bg-transparent cursor-pointer", onClick: onClick, "aria-label": "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043C\u0435\u043D\u044E", children: jsx(Img, { image: { icon: 'BurgerIcon', iconVersion: bgColor === 'bg-white' ? 'black' : 'white' }, className: "text-primary-text w-6 h-6", width: "24", height: "24" }) }), jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo })] }), jsx("button", { className: "text-primary-main group-data-transparent:text-white group-data-transparent:hover:text-primary-hover text-s border-0 bg-transparent", children: "\u0412\u043E\u0439\u0442\u0438" })] })));
+    const BUTTON_STYLE = {
+        default: 'px-5 bg-main-divider rounded hover:text-primary-main',
+        transparent: 'text-white hover:text-primary-hover',
+    };
+    const HeaderTop = JSX(({ bgColor, logo, internetBankUrl, version, mobileHeaderType, mobileTitle, mobileBackwardButtonTitle, }) => {
+        const isTypeNone = mobileHeaderType === 'none';
+        const isTypeWithTitle = mobileHeaderType === 'withTitle';
+        return (jsxs("div", { className: "flex items-center justify-between w-full", children: [isTypeNone || isTypeWithTitle ? (jsx(Logo, { bgColor: bgColor, logo: logo, showTitle: isTypeNone })) : null, isTypeWithTitle ? mobileTitle : null, mobileHeaderType === 'backwardButton' ? (jsxs(Button, { className: "flex items-center text-l", children: [jsx(Img, { className: "w-6 h-6", image: {
+                                icon: 'ChevronLeft',
+                                iconVersion: 'black',
+                            } }), mobileBackwardButtonTitle] })) : null, internetBankUrl ? (jsx(Button, { href: internetBankUrl, ariaLabel: "\u0412\u043E\u0439\u0442\u0438", target: "_blank", className: style('p-3 my-1 text-s whitespace-nowrap text-primary-main hover:text-primary-hover', BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default']), children: "\u0412\u043E\u0439\u0442\u0438" })) : null] }));
+    });
 
     const BG_COLOR_TO_BLOCK_VERSION = {
         'bg-white': 'primary',
         transparent: 'transparent',
     };
-    const Header = JSX(({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
-        const router = useRouter();
+    const Header = JSX(({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], mobileHeaderType = 'none', ...rest }) => {
         const fallback = rest.options?.page?.fallback;
-        const { topItems, dispositions, defaultLocation, logo } = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
-        const activeTopItem = topItems?.find(isTopItemActive(router));
-        const subItems = activeTopItem?.items;
-        const activeSubItem = findActiveSubItem(router)(subItems);
-        const [burgerMenuShow, setBurgerMenuShow] = useState(false);
-        const handleBurgerMenuShow = useCallback(() => setBurgerMenuShow((_) => !_), []);
-        return (jsxs(BlockWrapper, { tag: "header", version: version, ...rest, children: [jsxs("div", { className: "container px-4 py-0 box-border", children: [jsx(HeaderTop, { onClick: handleBurgerMenuShow, bgColor: bgColor, logo: logo }), jsx("nav", { className: "flex items-center m-0 p-0 overflow-y-hidden w-full h-12", children: jsx("div", { className: "flex no-scrollbar horizontal-list h-full items-center", children: subItems?.map((_, i) => (jsx(HeaderItem, { className: "mr-8 whitespace-nowrap text-s", active: _ === activeSubItem, ..._ }, String(i)))) }) })] }), burgerMenuShow ? (jsx(HeaderBurger, { onClick: handleBurgerMenuShow, burgerSubMenu: dispositions, defaultLocation: defaultLocation, children: jsx("div", { className: "list-none m-0 p-0", children: topItems?.map((item, i) => (jsx(RollupItem, { label: item.text, children: jsx(LinkList, { className: "mt-2.5", items: item.items }) }, String(i)))) }) })) : null] }));
+        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 }) }) }));
     });
 
     const ImgBlock = JSX((props) => {
@@ -1690,6 +1459,64 @@
         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 labelSize = 'text-l';
+
+    const BenefitItem = JSX((props) => {
+        const { className = '', icon, label, description, benefitsVersion = 'normal' } = props;
+        const listItemAlign = description ? 'items-start' : 'items-center';
+        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${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 } }));
+    });
+
+    function assertUnreachable(x) {
+        throw new Error(x);
+    }
+
+    // TODO: Create universal function for this case
+    const renderBenefit$1 = 
+    // Linter doesn't understand that switch processes all cases
+    // eslint-disable-next-line consistent-return
+    (version) => (benefit, i) => {
+        const { type } = benefit;
+        if (!(type === 'default' || type === 'rte')) {
+            return null;
+        }
+        switch (type) {
+            case 'default':
+                return (jsx(BenefitItem, { icon: benefit.icon, label: benefit.label, description: benefit.description, version: version }, String(i)));
+            case 'rte':
+                return jsx(RichText, { __html: benefit.__html });
+            default:
+                assertUnreachable(benefit);
+        }
+    };
+
+    const positionStyle = 'justify-end flex-col-reverse gap-4';
+
+    const styleInsuranceSum = 'flex-col gap-2';
+
+    const styleValueBlock = 'flex-col gap-1';
+    const styleValueBlockText = '';
+
+    const renderInsuranceSumMonth = (sum = 0, monthLimit = 0) => sum || monthLimit ? (jsxs("div", { className: style('flex mt-6', styleInsuranceSum), children: [sum > 0 ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null, monthLimit > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum)) : null] })) : null;
+    const renderValueBlock = (title, sum = 0, isAnotherBlock = false) => {
+        const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
+        return (jsxs("div", { className: style(`flex w-full whitespace-pre`, styleValueBlock, widthStyle), children: [jsx(Text, { font: "font-light", size: "text-l", children: title }), jsxs(Text, { size: "text-h6", color: styleValueBlockText, children: [toLocalNumberFormat(2)(sum), " \u20BD"] })] }));
+    };
+
+    const PictureText = JSX(({ className = '', title, description, image, benefits, sum, monthLimit, directionRight = false, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('relative p-default', className), version: version, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M" // TODO: Сверить с макетом после влития мобильных правок Headline (DRAFT)
+                , align: "text-left" }), jsxs("div", { className: style('flex mt-6', positionStyle), children: [image?.src ? jsx(Img, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$1(version)) })) : null, renderInsuranceSumMonth(Number(sum), Number(monthLimit))] })] })] })));
+
     const getColSpan = (className) => {
         const colSpanPrefix = 'col-span-';
         const colSpanStr = className?.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
@@ -1745,24 +1572,8 @@
     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 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 md:flex-nowrap justify-between items-stretch gap-8", children: [leftImage, jsxs("div", { className: style('flex flex-col gap-8', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), buttons] }), rightImage ? jsx("div", { className: "-order-1 lg:order-1", children: rightImage }) : 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';
-        }
-        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}`;
-    }
+    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 renderBenefit = (version = 'primary', benefitsVersion = 'normal') => (props, i) => jsx(BenefitItem, { version: version, benefitsVersion: benefitsVersion, ...props }, String(i));
 
@@ -1786,6 +1597,12 @@
                 ? renderBackwardButton(backwardButton, !rest.version || rest.version === 'primary' ? 'primary' : 'white')
                 : null, jsx(ProductBlockInner, { className: "grow", ...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 RichTextBlock = JSX((props) => {
         const { __html, richVersion, ...rest } = props;
         return (jsx(BlockWrapper, { ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) }));
@@ -1925,6 +1742,8 @@
     VerticalLayout.childrenTypes = [];
 
     const Blocks = {
+        ButtonsBlock,
+        CardTransfer,
         Carousel,
         CarouselTariffsCard,
         ComparisonTable,
@@ -1934,6 +1753,7 @@
         ImgBlock,
         LinkDocs,
         MobileAppTile,
+        PictureText,
         Placeholder,
         ProductBlock,
         StepsBlock,
@@ -1943,8 +1763,18 @@
         RollupItem,
         VerticalLayout,
         CarouselRecommendationCard,
+        CarouselProgramsCard,
+        ProductGallery,
     };
 
+    function useBool(defaultValue = false) {
+        const [value, setValue] = useState(defaultValue);
+        const setTrue = useCallback(() => setValue(true), []);
+        const setFalse = useCallback(() => setValue(false), []);
+        const toggle = useCallback(() => setValue((_) => !_), []);
+        return [value, { setValue, setTrue, setFalse, toggle }];
+    }
+
     const debounce = (fn, delay = 600) => {
         let timerId;
         const debouncedCallback = (...args) => {
@@ -2000,6 +1830,53 @@
         }, [scrollTarget]);
     }
 
+    const CloseButton = JSX(({ className, onClick }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-1 bg-transparent border-none', className), onClick: onClick, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
+
+    function useDialogHandlers({ onOpen, onClose } = {}) {
+        useEffect(() => defaultEventBus.subscribe('dialog', (action) => {
+            switch (action.type) {
+                case 'open':
+                    onOpen && onOpen(action);
+                    break;
+                case 'close':
+                    onClose && onClose();
+                    break;
+                default:
+                    assertUnreachable(action);
+            }
+        }), [onOpen, onClose]);
+    }
+
+    function useDialogProps(id, initOpen = false) {
+        const [isOpened, { setTrue: open, setFalse: close }] = useBool(initOpen);
+        const [params, setParams] = useState({ id });
+        const wasOpened = useRef(isOpened);
+        wasOpened.current ||= isOpened;
+        const handleOpen = useCallback((_) => {
+            if (_.id === id) {
+                setParams(_);
+                open();
+            }
+            else {
+                close();
+            }
+        }, [id]);
+        useDialogHandlers({
+            onOpen: handleOpen,
+            onClose: close,
+        });
+        const handleCloseAsEventSource = useCallback(() => {
+            close();
+            defaultEventBus.fire('dialog', { type: 'close' });
+        }, []);
+        return {
+            ...params,
+            isOpened,
+            wasOpened: wasOpened.current,
+            onClose: handleCloseAsEventSource,
+        };
+    }
+
     const COOKIE_DIALOG_ID = 'cookie';
     const LOCAL_STORAGE_NAME = 'cookieClose';
     const CookiePopup = JSX(({ termLink, personalDataPolicyLink }) => {
@@ -2087,7 +1964,7 @@
 
     const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
 
-    const packageVersion = "0.11.1";
+    const packageVersion = "0.11.3";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;