@redneckz/wildless-cms-uni-blocks 0.13.24 → 0.14.1

package/bundle/bundle.umd.js

@@ -4,22 +4,22 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.UniBlocks = {}));
 })(this, (function (exports) { 'use strict';
 
-    let _hooks;
-    const setupHooks = (_) => {
-        _hooks = _;
-    };
-    const lazyHook = (name) => (...args) => _hooks[name](...args);
-    const useState = lazyHook('useState');
-    const useEffect = lazyHook('useEffect');
-    const useCallback = lazyHook('useCallback');
-    const useMemo = lazyHook('useMemo');
+    let _hooks;
+    const setupHooks = (_) => {
+        _hooks = _;
+    };
+    const lazyHook = (name) => (...args) => _hooks[name](...args);
+    const useState = lazyHook('useState');
+    const useEffect = lazyHook('useEffect');
+    const useCallback = lazyHook('useCallback');
+    const useMemo = lazyHook('useMemo');
     const useRef = lazyHook('useRef');
 
-    const setup = (_jsx, _jsxs) => {
-        globalThis._uni = {
-            _jsx,
-            _jsxs: _jsxs || _jsx
-        };
+    const setup = (_jsx, _jsxs) => {
+        globalThis._uni = {
+            _jsx,
+            _jsxs: _jsxs || _jsx
+        };
     };
 
     const getGeolocation = async () => new Promise((resolve) => navigator.geolocation.getCurrentPosition(({ coords }) => resolve(coords)));
@@ -225,22 +225,22 @@
     const jsx = (...args) => globalThis._uni._jsx(...args);
     const jsxs = (...args) => globalThis._uni._jsxs(...args);
 
-    const JSX = (Component) => {
-        const Internal = Component;
-        if (!Internal._tmpl) {
-            Internal._tmpl = globalThis.__UNI_REACT__ ? Component : VueTmpl(Component);
-        }
-        return Internal._tmpl;
-    };
-    const VueTmpl = (Component) => {
-        function JSXTmpl(rawProps, context) {
-            const { children: rawChildren, ...props } = rawProps || {};
-            const defaultSlot = context?.slots?.default; // Vue
-            const children = rawChildren || (defaultSlot && defaultSlot());
-            return Component(Object.assign(props, children && { children }), context);
-        }
-        JSXTmpl.inheritAttrs = false;
-        return JSXTmpl;
+    const JSX = (Component) => {
+        const Internal = Component;
+        if (!Internal._tmpl) {
+            Internal._tmpl = globalThis.__UNI_REACT__ ? Component : VueTmpl(Component);
+        }
+        return Internal._tmpl;
+    };
+    const VueTmpl = (Component) => {
+        function JSXTmpl(rawProps, context) {
+            const { children: rawChildren, ...props } = rawProps || {};
+            const defaultSlot = context?.slots?.default; // Vue
+            const children = rawChildren || (defaultSlot && defaultSlot());
+            return Component(Object.assign(props, children && { children }), context);
+        }
+        JSXTmpl.inheritAttrs = false;
+        return JSXTmpl;
     };
 
     function CorporateLeadAPI() {
@@ -356,7 +356,7 @@
 
     const headingTag = (tag) => tag;
 
-    const styles$4 = {
+    const styles$3 = {
         h0: 'text-h0',
         h1: 'text-h1',
         h2: 'text-h2',
@@ -367,7 +367,7 @@
     };
     const Heading = JSX(({ className = '', headingType = 'h3', as = 'h3', title, children }) => {
         const Tag = headingTag(as);
-        return (jsx(Tag, { className: style('font-sans m-0', styles$4[headingType], className), children: title || children }));
+        return (jsx(Tag, { className: style('font-sans m-0', styles$3[headingType], className), children: title || children }));
     });
 
     const identity = (_) => _;
@@ -427,65 +427,69 @@
 
     const isFilled = (_) => _ !== null && _ !== undefined;
 
-    const defaultCache = new Map();
-    const applyCache = (fetcher, cache = defaultCache) => (key) => {
-        const cachedData = cache.get(key);
-        if (isFilled(cachedData)) {
-            return cachedData;
-        }
-        const data = fetcher(key);
-        if (isFilled(data)) {
-            cache.set(key, Promise.resolve(data));
-        }
-        else {
-            cache.delete(key);
-        }
-        return data;
-    };
-
-    const isSimpleKey = (args) => Boolean(args && Array.isArray(args) && args.length === 1 && typeof args[0] === 'string');
-    function useAsyncData(key, fetcher, { fallback, cache } = {}) {
-        const args = useMemo(() => keyToArgs(key), [key]);
-        const [simpleKey] = isSimpleKey(args) ? args : [];
-        const [data, setData] = useState(undefined);
-        const [error, setError] = useState(undefined);
-        useEffect(() => {
-            const isEmptyKey = !args.some(isFilled);
-            if (isEmptyKey) {
-                return;
-            }
-            (async () => {
-                try {
-                    const newData = await (simpleKey
-                        ? applyCache(fetcher, cache)(simpleKey)
-                        : fetcher(...args));
-                    setData(newData);
-                    setError(undefined);
-                }
-                catch (err) {
-                    setData(undefined);
-                    setError(err);
-                }
-            })();
-        }, [fetcher, cache, args]);
-        const fallbackData = fallback && simpleKey && fallback[simpleKey];
-        return {
-            data: !data && fallbackData ? fallbackData : data,
-            error,
-            mutate: () => Promise.resolve(undefined),
-            isValidating: false
-        };
-    }
-    function keyToArgs(key) {
-        if (Array.isArray(key)) {
-            return key;
-        }
-        else if (key instanceof Function) {
-            return keyToArgs(key());
-        }
-        else {
-            return [key];
-        }
+    const defaultCache = new Map();
+    const applyCache = (fetcher, cache = defaultCache) => (key) => {
+        const cachedData = cache.get(key);
+        if (isFilled(cachedData)) {
+            return cachedData;
+        }
+        const data = fetcher(key);
+        if (isFilled(data)) {
+            cache.set(key, Promise.resolve(data));
+        }
+        else {
+            cache.delete(key);
+        }
+        return data;
+    };
+
+    const isSimpleKey = (args) => Boolean(args && Array.isArray(args) && args.length === 1 && typeof args[0] === 'string');
+    function useAsyncData(key, fetcher, { fallback, cache } = {}) {
+        const args = useMemo(() => keyToArgs(key), [key]);
+        const [simpleKey] = isSimpleKey(args) ? args : [];
+        const [data, setData] = useState(undefined);
+        const [error, setError] = useState(undefined);
+        useEffect(() => {
+            const isEmptyKey = !args.some(isFilled);
+            if (isEmptyKey) {
+                return;
+            }
+            let canceled = false;
+            const setResult = (newData, err) => {
+                if (!canceled) {
+                    setData(newData);
+                    setError(err);
+                }
+            };
+            (async () => {
+                try {
+                    setResult(await (simpleKey ? applyCache(fetcher, cache)(simpleKey) : fetcher(...args)));
+                }
+                catch (err) {
+                    setResult(undefined, err);
+                }
+            })();
+            return () => {
+                canceled = true;
+            };
+        }, [fetcher, cache, args]);
+        const fallbackData = fallback && simpleKey && fallback[simpleKey];
+        return {
+            data: !data && fallbackData ? fallbackData : data,
+            error,
+            mutate: () => Promise.resolve(undefined) // TODO Clean up cache
+        };
+    }
+    function keyToArgs(key) {
+        if (Array.isArray(key)) {
+            return key;
+        }
+        else if (key instanceof Function) {
+            return keyToArgs(key());
+        }
+        else {
+            return [key];
+        }
     }
 
     async function fetchJSON(url, options) {
@@ -505,14 +509,14 @@
                 'Content-Type': 'application/json',
             },
         });
-        return await response.json();
+        return response.json();
     }
 
     const REGIONS_URL$1 = '/api/v1/regions';
-    const EMPTY_VALUE$3 = [];
+    const EMPTY_VALUE$4 = [];
     function useGetRegions() {
         const { data } = useAsyncData(REGIONS_URL$1, fetchJSONUnsafe);
-        return data || EMPTY_VALUE$3;
+        return data || EMPTY_VALUE$4;
     }
 
     const useDialogManager = () => ({
@@ -731,7 +735,7 @@
     const innValidator = validator((_) => typeof _ === 'string' && (_.length === 10 || _.length === 12))(ERROR_MESSAGE);
     const phoneValidator = pattern(/^(\+7)?[\s-]?\(?[0-9]{3}\)?[\s-]?[0-9]{3}[\s-]?[0-9]{2}[\s-]?[0-9]{2}$/)(ERROR_MESSAGE);
 
-    const renderAcquiringDataOrganization = (field) => (jsxs("div", { className: "sm:flex sm:justify-between sm:gap-lg", children: [jsxs("div", { className: "sm:w-1/2 space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...withValidator(field('fullName'), defaultValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", ...withValidator(field('name'), nameValidator) })] }), jsxs("div", { className: "sm:w-1/2 space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) }), jsx(PhoneInputControl, { className: "shrink-0 w-full", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) })] })] }));
+    const renderAcquiringDataOrganization = (field) => (jsxs("div", { className: "@xl:flex @xl:justify-between @xl:gap-lg", children: [jsxs("div", { className: "@xl:w-1/2 space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...withValidator(field('fullName'), defaultValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", ...withValidator(field('name'), nameValidator) })] }), jsxs("div", { className: "@xl:w-1/2 space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) }), jsx(PhoneInputControl, { className: "shrink-0 w-full", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) })] })] }));
 
     const ACQUIRING_TYPES = [
         {
@@ -751,33 +755,73 @@
         },
     ];
 
-    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 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 useOutsideClick(onClick) {
-        const targetRef = useRef(null);
-        useEffect(() => {
-            const handleClickOutside = (event) => {
-                if (targetRef &&
-                    targetRef.current &&
-                    event.target instanceof Node &&
-                    !targetRef.current.contains(event.target)) {
-                    onClick();
-                }
-            };
-            document.addEventListener('click', handleClickOutside);
-            return () => {
-                document.removeEventListener('click', handleClickOutside);
-            };
-        }, [onClick]);
-        return targetRef;
+    const isOnlyDigits = (str) => str && !/\D/.test(str);
+
+    const svgUseStyleMap = {
+        normal: '',
+        color: 'text-primary-main',
+        black: 'text-black',
+        white: 'text-black',
+    };
+    const Icon = JSX(({ className = '', imageClassName = '', name = '', alt = `Иконка ${name}`, title = alt, iconVersion = 'color', width, height, }) => {
+        const router = useRouter();
+        const href = adjustHref(router)(joinPath(projectSettings.CDN, '/icons', `${name}.svg`));
+        if (iconVersion !== 'normal') {
+            return (jsx(Background, { className: className, children: jsxs("svg", { className: style(getSvgSize(width), svgUseStyleMap[iconVersion], iconVersion === 'white' ? 'invert' : '', imageClassName), width: width, height: height, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }) }));
+        }
+        return (jsx("img", { className: className, src: href, alt: alt, title: title, "aria-hidden": "true", width: width, height: height, style: getInlineStyle(className, height) }));
+    });
+    const getInlineStyle = (className, height) => {
+        if (className?.includes('h-')) {
+            return {};
+        }
+        return { height: isOnlyDigits(height) ? `${height}px` : height };
+    };
+    const getSvgSize = (width) => (width ? '' : 'w-full h-full');
+    const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
+
+    const formatOption = (_) => _?.text || _?.key || '';
+
+    function useEventListener(target, type, listener, options) {
+        useEffect(() => {
+            if (!target || !listener) {
+                return;
+            }
+            target.addEventListener(type, listener, options);
+            return () => {
+                target.removeEventListener(type, listener, options);
+            };
+        }, [target, type, listener]);
     }
 
+    function useOutsideClick(onClick) {
+        const targetRef = useRef(null);
+        const handleClickOutside = useCallback((event) => {
+            if (targetRef && targetRef.current && event.target instanceof Node && !targetRef.current.contains(event.target)) {
+                onClick();
+            }
+        }, [onClick]);
+        useEventListener(globalThis.document, 'click', handleClickOutside);
+        return targetRef;
+    }
+
+    const usePopupManager = () => ({
+        open: (popup, options) => defaultEventBus.fire('popup', { type: 'open', popup, ...options }),
+        update: (popup, options) => defaultEventBus.fire('popup', { type: 'update', popup, ...options }),
+        close: () => defaultEventBus.fire('popup', { type: 'close' }),
+    });
+
+    const compareBy = (indexOf) => (a, b) => indexOf(a) - indexOf(b);
+    const desc = (cmp) => (a, b) => -cmp(a, b);
+
     const JARO_WINKLER_P = 0.1;
     const JARO_WINKLER_MAX_L = 4;
     const jaroWinklerDistance = (s1) => (s2) => {
@@ -842,62 +886,76 @@
         return prefixL;
     }
 
-    const isOnlyDigits = (str) => str && !/\D/.test(str);
+    function zip(firstCol, ...restCols) {
+        return firstCol.map((firstEl, rowIndex) => [firstEl, ...restCols.map((col) => col[rowIndex])]);
+    }
 
-    const svgUseStyleMap = {
-        normal: '',
-        color: 'text-primary-main',
-        black: 'text-black',
-        white: 'text-black',
-    };
-    const Icon = JSX(({ className = '', imageClassName = '', name = '', alt = `Иконка ${name}`, title = alt, iconVersion = 'color', width, height, }) => {
-        const router = useRouter();
-        const href = adjustHref(router)(joinPath(projectSettings.CDN, '/icons', `${name}.svg`));
-        if (iconVersion !== 'normal') {
-            return (jsx(Background, { className: className, children: jsxs("svg", { className: style(getSvgSize(width), svgUseStyleMap[iconVersion], iconVersion === 'white' ? 'invert' : '', imageClassName), width: width, height: height, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }) }));
-        }
-        return (jsx("img", { className: className, src: href, alt: alt, title: title, "aria-hidden": "true", width: width, height: height, style: getInlineStyle(className, height) }));
-    });
-    const getInlineStyle = (className, height) => {
-        if (className?.includes('h-')) {
-            return {};
+    const filterOptions = (options, query) => {
+        if (!options?.length || !query?.trim()) {
+            return options;
         }
-        return { height: isOnlyDigits(height) ? `${height}px` : height };
+        const ranking = options
+            .map((_) => _.text?.toLowerCase())
+            .map(jaroWinklerDistance(query?.trim().toLowerCase()));
+        return zip(options, ranking)
+            .filter(([, rank]) => rank >= 0.5)
+            .sort(desc(compareBy(([, rank]) => rank)))
+            .map(([option]) => option);
     };
-    const getSvgSize = (width) => (width ? '' : 'w-full h-full');
-    const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
 
-    const Select = JSX(({ className = '', label, options = [], value, valid = true, isBorder = true, placeholder = '', onChange, isSearch = false, }) => {
-        const [isOpen, { setFalse: close, toggle }] = useBool();
-        const [searchValue, setSearchValue] = useState('');
-        const reset = useCallback(() => {
-            close();
-            setSearchValue('');
-        }, []);
-        const wrapperRef = useOutsideClick(reset);
+    const SelectPopup = JSX(({ popupRef, options, value, query, onChange }) => options?.length ? (jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", role: "listbox", ref: popupRef, children: filterOptions(options, query).map((option) => (jsxs("div", { className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", role: "option", "aria-selected": option.key === value?.key, onClick: () => onChange && onChange(option), children: [jsx("span", { className: "min-h-6", children: formatOption(option) }), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", className: style('absolute right-4 pt-3xs', option.key === value?.key ? '' : 'hidden') })] }, option.key))) })) : null);
+
+    function useSelectPopup({ isOpen, options, value, query, onChange, onClose, }) {
+        const popup = usePopupManager();
+        const close = useCallback(() => {
+            popup.close();
+            onClose && onClose();
+        }, [onClose]);
         const handleChange = useCallback((option) => {
-            reset();
+            close();
             onChange && onChange(option);
-        }, [onChange]);
-        const isSelected = (option) => option.key === value?.key;
-        return (jsxs("div", { className: className, ref: wrapperRef, children: [renderLabel(label), jsxs("div", { className: style('relative', isOpen ? 'z-20' : 'z-10'), children: [jsxs("div", { className: style('text-l flex justify-between items-center text-primary-text cursor-pointer relative z-10', getBorderStyle(isBorder, valid)), onClick: toggle, children: [jsx("p", { className: "p-m pr-3xl h-14 overflow-hidden text-ellipsis whitespace-nowrap", children: formatOption(value) || placeholder }), jsx(Icon, { className: style('absolute right-3', isOpen ? '' : 'rotate-180'), name: "ArrowUpIcon", width: "16", height: "16" })] }), isSearch ? renderSearch(isOpen, searchValue, setSearchValue) : null, options?.length ? (jsx("div", { className: style('h-0', isOpen ? '' : 'overflow-hidden'), children: jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: getFilteredOptions(options, searchValue).map(renderOption(handleChange, isOpen, isSelected)) }) })) : null] })] }));
+        }, [close, onChange]);
+        const inputRef = useRef(null);
+        const popupRef = useOutsideClick(close);
+        useEffect(() => {
+            if (!isOpen || !inputRef.current) {
+                return;
+            }
+            const inputElement = inputRef.current;
+            const { top, left, width, height } = inputElement.getBoundingClientRect();
+            popup.update(jsx(SelectPopup, { popupRef: popupRef, options: options, value: value, query: query, onChange: handleChange }), {
+                top: top + window.scrollY + height,
+                left,
+                width,
+            });
+        }, [isOpen, options, value, query, handleChange]);
+        return inputRef;
+    }
+
+    const Select = JSX(({ className, label, options = [], value, valid = true, isBorder = true, placeholder = '', isSearch = false, onChange, }) => {
+        const [isOpen, { setFalse: close, setTrue: open }] = useBool();
+        const [query, setQuery] = useState('');
+        const handleClose = useCallback(() => {
+            setQuery('');
+            close();
+        }, []);
+        const inputRef = useSelectPopup({
+            isOpen,
+            options,
+            value,
+            query,
+            onChange,
+            onClose: handleClose,
+        });
+        return (jsxs("div", { className: className, children: [renderLabel(label), jsxs("div", { className: style('relative', isOpen ? 'z-20' : 'z-10'), ref: inputRef, children: [jsxs("div", { className: style('text-l flex justify-between items-center text-primary-text cursor-pointer relative z-10', getBorderStyle(isBorder, valid)), onClick: isOpen ? handleClose : open, children: [jsx("p", { className: "p-m pr-3xl flex items-center overflow-hidden text-ellipsis whitespace-nowrap", children: formatOption(value) || placeholder }), renderIcon$1(isOpen)] }), isSearch && isOpen ? (jsx("div", { className: style('absolute top-0 w-full z-20'), children: jsx(Input, { type: "text", autoFocus: true, value: query, onChange: setQuery }) })) : null] })] }));
     });
     const renderLabel = (label) => label ? (jsx("div", { className: "mb-xs", children: jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: label }) })) : null;
-    const getFilteredOptions = (options, searchValue) => {
-        return searchValue
-            ? options.filter((_) => jaroWinklerDistance(_.text?.toLowerCase())(searchValue.toLowerCase()) >= 0.6)
-            : options;
-    };
-    const renderSearch = (isOpen, searchValue, setSearchValue) => isOpen ? (jsx("div", { className: style('absolute top-0 w-full h-full z-20'), children: jsx(Input, { type: "text", autoFocus: true, value: searchValue, onChange: setSearchValue }) })) : null;
-    const renderOption = (handleChange, isOpen, isSelected) => (option, i) => (jsxs("div", { onClick: () => {
-            handleChange(option);
-        }, className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", children: [jsx("span", { className: "min-h-6", children: formatOption(option) }), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", className: style('absolute right-4 pt-3xs', isSelected(option) && isOpen ? '' : 'hidden') })] }, String(i)));
-    const formatOption = (_) => _?.text || _?.key || '';
+    const renderIcon$1 = (isOpen) => (jsx(Icon, { className: style('absolute right-3', isOpen ? '' : 'rotate-180'), name: "ArrowUpIcon", width: "16", height: "16" }));
     const getBorderStyle = (isBorder, valid) => style(isBorder ? 'border rounded-md hover:border-primary-hover' : '', valid ? ' border-gray' : 'border-error');
 
     const SelectControl = JSX(({ className = '', error, ...rest }) => (jsxs("div", { className: className, children: [jsx(Select, { ...rest, valid: !error }), jsx("div", { className: "h-2", children: error ? (jsx(Text, { size: "text-xs", font: "font-light", color: "text-error", children: error })) : null })] })));
 
-    const renderAcquiringRegion = ({ regions, field }) => (jsxs("div", { className: "border-b border-b-main-divider sm:border-none sm:flex sm:justify-between gap-lg ", children: [jsx("div", { className: "sm:w-1/2", children: jsx(SelectControl, { label: "\u0412\u0438\u0434 \u044D\u043A\u0432\u0430\u0439\u0440\u0438\u043D\u0433\u0430", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u044D\u043A\u0432\u0430\u0439\u0440\u0438\u043D\u0433", options: ACQUIRING_TYPES.map(({ name: key = '' }) => ({ key, text: key })), ...withValidator(field('acquiringType'), defaultValidator) }) }), jsx("div", { className: "sm:w-1/2", children: jsx(SelectControl, { label: "\u0410\u0434\u0440\u0435\u0441", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441", options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }) })] }));
+    const renderAcquiringRegion = ({ regions, field }) => (jsxs("div", { className: "border-b border-b-main-divider @xl:border-none @xl:flex @xl:justify-between gap-lg ", children: [jsx("div", { className: "@xl:w-1/2", children: jsx(SelectControl, { label: "\u0412\u0438\u0434 \u044D\u043A\u0432\u0430\u0439\u0440\u0438\u043D\u0433\u0430", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u044D\u043A\u0432\u0430\u0439\u0440\u0438\u043D\u0433", options: ACQUIRING_TYPES.map(({ name: key = '' }) => ({ key, text: key })), ...withValidator(field('acquiringType'), defaultValidator) }) }), jsx("div", { className: "@xl:w-1/2", children: jsx(SelectControl, { label: "\u0410\u0434\u0440\u0435\u0441", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441", options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }) })] }));
 
     const SlideCheckbox = JSX(({ value = false, text, type = 'checkbox', onChange }) => (jsxs("div", { role: type, "aria-checked": value, className: "flex justify-start items-center w-full cursor-pointer mb-s", onClick: () => onChange && onChange(!value), children: [jsx("div", { className: style('relative flex-shrink-0 duration-300 w-9 h-5 mr-s rounded-2xl', value ? 'bg-primary-main' : 'bg-main-divider'), children: jsx("div", { className: style('absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded-full', value ? 'left-1/2' : 'left-[5%]') }) }), jsx(Text, { size: "text-l", font: "font-light", color: "text-primary-text", children: text })] })));
 
@@ -908,7 +966,7 @@
             className: 'text-white',
             version: button?.version,
         });
-        return (jsx("button", { type: "submit", className: style('p-m w-full sm:w-auto', buttonStyle, className), children: button?.text ? button.text : 'Отправить заявку' }));
+        return (jsx("button", { type: "submit", className: style('p-m w-full @xl:w-auto', buttonStyle, className), children: button?.text ? button.text : 'Отправить заявку' }));
     };
 
     const initialFormState$4 = {
@@ -940,15 +998,15 @@
                     fullName,
                     inn,
                     name,
-                    phone,
+                    phone: phone.replace(/[^+\d]/g, ''),
                 });
         }, [onSubmit]);
         const [, { field, ...formProps }] = useForm(initialFormState$4, handleSubmit);
         const regions = useGetRegions();
-        return (jsxs("form", { className: "container space-y-m", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u0412\u0438\u0434 \u044D\u043A\u0432\u0430\u0439\u0440\u0438\u043D\u0433\u0430 \u0438 \u0440\u0435\u0433\u0438\u043E\u043D", className: "sm:text-center" }), renderAcquiringRegion({ regions, field }), jsx(Heading, { headingType: "h6", title: "\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", className: "sm:text-center" }), renderAcquiringDataOrganization(field), renderSlideCheckboxes(field), renderSubmitButton(button), jsx(Footnote, { link: link })] }));
+        return (jsxs("form", { className: "container space-y-m", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u0412\u0438\u0434 \u044D\u043A\u0432\u0430\u0439\u0440\u0438\u043D\u0433\u0430 \u0438 \u0440\u0435\u0433\u0438\u043E\u043D", className: "@xl:text-center" }), renderAcquiringRegion({ regions, field }), jsx(Heading, { headingType: "h6", title: "\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", className: "@xl:text-center" }), renderAcquiringDataOrganization(field), renderSlideCheckboxes(field), renderSubmitButton(button), jsx(Footnote, { link: link })] }));
     });
 
-    const renderBusinessCardDataOrganization = (field) => (jsxs("div", { className: "sm:flex sm:justify-between sm:gap-lg", children: [jsxs("div", { className: "sm:w-1/2 space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", ...withValidator(field('name'), nameValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) })] }), jsxs("div", { className: "sm:w-1/2 space-y-s", children: [jsx(PhoneInputControl, { className: "shrink-0 w-full", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...withValidator(field('mail'), defaultValidator) })] })] }));
+    const renderBusinessCardDataOrganization = (field) => (jsxs("div", { className: "@xl:flex @xl:justify-between @xl:gap-lg", children: [jsxs("div", { className: "@xl:w-1/2 space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", ...withValidator(field('name'), nameValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) })] }), jsxs("div", { className: "@xl:w-1/2 space-y-s", children: [jsx(PhoneInputControl, { className: "shrink-0 w-full", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...withValidator(field('mail'), defaultValidator) })] })] }));
 
     const renderRegion$1 = ({ regions, field }) => (jsx(SelectControl, { className: "w-full", label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", isSearch: true, options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }));
 
@@ -974,9 +1032,9 @@
                     typeForm: 'bcrd',
                     region: region?.text || '',
                     name,
-                    phone,
                     inn,
                     mail,
+                    phone: phone.replace(/[^+\d]/g, ''),
                 });
         }, [onSubmit]);
         const [, { field, ...formProps }] = useForm(initialFormState$3, handleSubmit);
@@ -985,14 +1043,14 @@
     });
 
     const BRANCHES_URL = '/api/v1/branches';
-    const EMPTY_VALUE$2 = [];
+    const EMPTY_VALUE$3 = [];
     function useBranches(regionCode) {
         const { data } = useAsyncData(regionCode ? `${BRANCHES_URL}?regionCode=${regionCode}` : null, fetchSafeBoxes$1);
-        return data || EMPTY_VALUE$2;
+        return data || EMPTY_VALUE$3;
     }
     const fetchSafeBoxes$1 = async (url) => {
         const result = await fetchJSON(url, { method: 'GET' });
-        return result || EMPTY_VALUE$2;
+        return result || EMPTY_VALUE$3;
     };
 
     const MIN_CREDIT_AMOUNT = 1000;
@@ -1002,7 +1060,7 @@
     const MAX_CREDIT_TERM = 180;
     const ITEMS_CREDIT_TERM = ['От 1 мес', 'До 15 лет'];
 
-    const renderCreditDataOrganization = (field) => (jsxs("div", { className: "pb-2xs border-b border-b-main-divider sm:flex sm:justify-between sm:gap-lg sm:border-none sm:pb-0", children: [jsxs("div", { className: "sm:w-1/2 space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...withValidator(field('fullName'), defaultValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) }), jsx(PhoneInputControl, { className: "shrink-0 w-full", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) })] }), jsxs("div", { className: "sm:w-1/2 space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u0413\u043E\u0434\u043E\u0432\u0430\u044F \u0432\u044B\u0440\u0443\u0447\u043A\u0430, \u20BD", ...withValidator(field('annualRevenue'), defaultValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", ...withValidator(field('name'), nameValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...field('mail') })] })] }));
+    const renderCreditDataOrganization = (field) => (jsxs("div", { className: "pb-2xs border-b border-b-main-divider @xl:flex @xl:justify-between @xl:gap-lg @xl:border-none @xl:pb-0", children: [jsxs("div", { className: "@xl:w-1/2 space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...withValidator(field('fullName'), defaultValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) }), jsx(PhoneInputControl, { className: "shrink-0 w-full", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) })] }), jsxs("div", { className: "@xl:w-1/2 space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u0413\u043E\u0434\u043E\u0432\u0430\u044F \u0432\u044B\u0440\u0443\u0447\u043A\u0430, \u20BD", ...withValidator(field('annualRevenue'), defaultValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", ...withValidator(field('name'), nameValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...field('mail') })] })] }));
 
     const useNormalizedInput = (props, { normalize, format }) => {
         const { value, onFocus, onBlur, onChange } = props;
@@ -1066,9 +1124,9 @@
     const closestValue = (list) => (_) => list.reduce((prev, curr) => (Math.abs(curr - _) < Math.abs(prev - _) ? curr : prev));
     const renderRangeCaption = (items) => (jsx("div", { className: "flex justify-between my-xs", children: items.map((item, i) => (jsx(Text, { size: "text-s", font: "font-light", color: "text-secondary-text", children: item }, String(i)))) }));
 
-    const renderCreditParameters = (field) => (jsxs("div", { className: "border-b border-b-main-divider sm:flex sm:justify-between gap-lg sm:border-none", children: [jsxs("div", { className: "sm:w-1/2", children: [jsx("label", { children: jsx(Text, { size: "text-m", font: "font-light", children: "\u0421\u0443\u043C\u043C\u0430, \u20BD" }) }), jsx(InputRange, { items: ITEMS_CREDIT_AMOUNT, min: MIN_CREDIT_AMOUNT, max: MAX_CREDIT_AMOUNT, ...field('amount') })] }), jsxs("div", { className: "sm:w-1/2", children: [jsx("label", { children: jsx(Text, { size: "text-m", font: "font-light", children: "\u0421\u0440\u043E\u043A, \u043C\u0435\u0441\u044F\u0446\u0435\u0432" }) }), jsx(InputRange, { items: ITEMS_CREDIT_TERM, min: MIN_CREDIT_TERM, max: MAX_CREDIT_TERM, ...field('term') })] })] }));
+    const renderCreditParameters = (field) => (jsxs("div", { className: "border-b border-b-main-divider @xl:border-none @xl:flex @xl:justify-between gap-lg", children: [jsxs("div", { className: "@xl:w-1/2", children: [jsx("label", { children: jsx(Text, { size: "text-m", font: "font-light", children: "\u0421\u0443\u043C\u043C\u0430, \u20BD" }) }), jsx(InputRange, { items: ITEMS_CREDIT_AMOUNT, min: MIN_CREDIT_AMOUNT, max: MAX_CREDIT_AMOUNT, ...field('amount') })] }), jsxs("div", { className: "@xl:w-1/2", children: [jsx("label", { children: jsx(Text, { size: "text-m", font: "font-light", children: "\u0421\u0440\u043E\u043A, \u043C\u0435\u0441\u044F\u0446\u0435\u0432" }) }), jsx(InputRange, { items: ITEMS_CREDIT_TERM, min: MIN_CREDIT_TERM, max: MAX_CREDIT_TERM, ...field('term') })] })] }));
 
-    const renderRegionDepartment = ({ regions, branches, field }) => (jsxs("div", { className: "sm:flex sm:justify-between sm:gap-m sm:mb-2xl sm:border-none sm:pb-0", children: [jsx("div", { className: "sm:w-1/2", children: jsx(SelectControl, { label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", isSearch: true, options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }) }), jsx("div", { className: "sm:w-1/2", children: jsx(SelectControl, { label: "\u0410\u0434\u0440\u0435\u0441", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441", options: branches.map(({ branchCode = '', address = '' }) => ({
+    const renderRegionDepartment = ({ regions, branches, field }) => (jsxs("div", { className: "@xl:flex @xl:justify-between @xl:gap-lg @xl:mb-2xl @xl:border-none @xl:pb-0", children: [jsx("div", { className: "@xl:w-1/2", children: jsx(SelectControl, { label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", isSearch: true, options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }) }), jsx("div", { className: "@xl:w-1/2", children: jsx(SelectControl, { label: "\u0410\u0434\u0440\u0435\u0441", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441", options: branches.map(({ branchCode = '', address = '' }) => ({
                         key: branchCode,
                         text: address,
                     })), ...withValidator(field('department'), defaultValidator) }) })] }));
@@ -1101,7 +1159,7 @@
                     fullName,
                     inn,
                     name,
-                    phone,
+                    phone: phone.replace(/[^+\d]/g, ''),
                     mail,
                     region: region?.text || '',
                     department: department?.text || '',
@@ -1111,7 +1169,7 @@
         const [formState, { field, ...formProps }] = useForm(initialFormState$2, handleSubmit);
         const regions = useGetRegions();
         const branches = useBranches(formState.region?.key).filter((branch) => branch?.address);
-        return (jsxs("form", { className: "container space-y-m", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B", className: "sm:text-center" }), renderCreditParameters(field), jsx(Heading, { headingType: "h6", title: "\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", className: "sm:text-center" }), renderCreditDataOrganization(field), jsx(Heading, { headingType: "h6", title: "\u041E\u0444\u0438\u0441 \u0431\u0430\u043D\u043A\u0430", className: "sm:text-center" }), renderRegionDepartment({ regions, branches, field }), renderSubmitButton(button), jsx(Footnote, { link: link })] }));
+        return (jsxs("form", { className: "container space-y-m", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B", className: "@xl:text-center" }), renderCreditParameters(field), jsx(Heading, { headingType: "h6", title: "\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", className: "@xl:text-center" }), renderCreditDataOrganization(field), jsx(Heading, { headingType: "h6", title: "\u041E\u0444\u0438\u0441 \u0431\u0430\u043D\u043A\u0430", className: "@xl:text-center" }), renderRegionDepartment({ regions, branches, field }), renderSubmitButton(button), jsx(Footnote, { link: link })] }));
     });
 
     const initialFormState$1 = {
@@ -1130,22 +1188,22 @@
                 onSubmit({
                     typeForm: 'dpst',
                     name,
-                    phone,
+                    phone: phone.replace(/[^+\d]/g, ''),
                 });
         }, [onSubmit]);
         const [, { field, ...formProps }] = useForm(initialFormState$1, handleSubmit);
-        return (jsxs("form", { className: "container", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u041E\u0441\u0442\u0430\u0432\u044C\u0442\u0435 \u0437\u0430\u044F\u0432\u043A\u0443 \u0438 \u043C\u044B \u043E\u0442\u0432\u0435\u0442\u0438\u043C \u043D\u0430 \u043B\u044E\u0431\u044B\u0435 \u0432\u043E\u043F\u0440\u043E\u0441\u044B \u043F\u043E \u0434\u0435\u043F\u043E\u0437\u0438\u0442\u0430\u043C", className: "sm:text-center mb-m" }), jsxs("div", { className: "max-w-[560px] m-auto space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u0418\u043C\u044F", ...withValidator(field('name'), nameValidator) }), jsx(PhoneInputControl, { className: "shrink-0 w-full", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) })] }), jsxs("div", { className: "flex justify-between flex-col-reverse sm:items-center sm:flex-row max-w-[560px] m-auto", children: [jsx("div", { className: "flex-1", children: jsx(Footnote, { link: link }) }), renderSubmitButton(button)] })] }));
+        return (jsxs("form", { className: "container", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u041E\u0441\u0442\u0430\u0432\u044C\u0442\u0435 \u0437\u0430\u044F\u0432\u043A\u0443 \u0438 \u043C\u044B \u043E\u0442\u0432\u0435\u0442\u0438\u043C \u043D\u0430 \u043B\u044E\u0431\u044B\u0435 \u0432\u043E\u043F\u0440\u043E\u0441\u044B \u043F\u043E \u0434\u0435\u043F\u043E\u0437\u0438\u0442\u0430\u043C", className: "@xl:text-center mb-m" }), jsxs("div", { className: "max-w-[560px] m-auto space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u0418\u043C\u044F", ...withValidator(field('name'), nameValidator) }), jsx(PhoneInputControl, { className: "shrink-0 w-full", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) })] }), jsxs("div", { className: "flex justify-between flex-col-reverse @xl:items-center @xl:flex-row max-w-[560px] m-auto", children: [jsx("div", { className: "flex-1", children: jsx(Footnote, { link: link }) }), renderSubmitButton(button)] })] }));
     });
 
-    const EMPTY_VALUE$1 = {};
+    const EMPTY_VALUE$2 = {};
     const DEFAULT_FOLDER_NAME = 'wcms-resources';
     function useSWRResource(filename, options = {}) {
-        const { fallback = EMPTY_VALUE$1, folderName = DEFAULT_FOLDER_NAME, setBasePath = false } = options;
+        const { fallback = EMPTY_VALUE$2, folderName = DEFAULT_FOLDER_NAME, setBasePath = false } = options;
         const path = joinPath('/', setBasePath ? projectSettings.BASE_PATH : '', folderName, `${filename}.json`);
         const { data } = useAsyncData(filename ? path : null, fetchJSONUnsafe, {
             fallback,
         });
-        return data || EMPTY_VALUE$1;
+        return data || EMPTY_VALUE$2;
     }
 
     const ApplicationFormGrantSupport = JSX((props) => {
@@ -1157,7 +1215,7 @@
             version: button?.version,
         });
         const regionHref = regions?.find((_) => _.name === region.key)?.href;
-        return (jsxs("div", { className: "container space-y-s sm:space-y-lg", children: [regions ? (jsx(SelectControl, { label: "\u0412\u0430\u0448 \u0440\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", options: regions.map(({ name = '' }) => ({ key: name })), value: region, onChange: setRegion })) : null, regionHref ? (jsx("div", { className: "text-center", children: jsx(Button, { href: regionHref, target: "_blank", className: style('p-m w-full sm:w-auto', buttonStyle), children: button?.text ? button.text : 'Перейти' }) })) : null] }));
+        return (jsxs("div", { className: "container space-y-s @xl:space-y-lg", children: [regions ? (jsx(SelectControl, { label: "\u0412\u0430\u0448 \u0440\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", options: regions.map(({ name = '' }) => ({ key: name })), value: region, onChange: setRegion })) : null, regionHref ? (jsx("div", { className: "text-center", children: jsx(Button, { href: regionHref, target: "_blank", className: style('p-m w-full @xl:w-auto', buttonStyle), children: button?.text ? button.text : 'Перейти' }) })) : null] }));
     });
 
     const sourcesComparator = (a, b) => a?.media && b?.media ? a.media - b.media : 0;
@@ -1188,70 +1246,73 @@
 
     const renderContacts = () => (jsxs("div", { className: "flex gap-xl", children: [jsxs("a", { className: "flex gap-s items-center text-primary-text no-underline", href: `tel:8 (800) 200-78-70`, "aria-label": "8 (800) 200-78-70", children: [jsx(Img, { image: { icon: 'PhoneIcon' }, width: "24", height: "24" }), jsx("span", { children: "8 (800) 200-78-70" })] }), jsxs("a", { className: "flex gap-s items-center text-primary-text no-underline", "aria-label": "ved@rshb.ru", href: `mailto:ved@rshb.ru`, children: [jsx(Img, { image: { icon: 'MailIcon' }, width: "24", height: "24" }), jsx("span", { children: "ved@rshb.ru" })] })] }));
 
-    const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
-        return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, viewBox: viewBox, fill: fill, width: width, height: height, children: paths.map(({ d, fill: pathFill, ...options }, i) => (jsx("path", { d: d, fill: pathFill || 'currentColor', ...commonOptions, ...options }, i))) }));
-    });
-
-    const CHECK_PATHS = [
-        {
-            d: 'M10.207.793a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L3.5 6.086 8.793.793a1 1 0 0 1 1.414 0Z',
-            fillRule: 'evenodd',
-            clipRule: 'evenodd',
-            fill: 'white',
-        },
-    ];
-    const Checkbox = JSX(({ className, value, text, disabled, isRadio, onChange }) => {
-        const handleChange = useCallback((e) => {
-            if (disabled) {
-                return;
-            }
-            e.preventDefault();
-            onChange && onChange(!value);
-        }, [onChange, disabled, value]);
-        const icon = isRadio ? (jsx("div", { className: "absolute left-1 w-3 h-3 rounded-full bg-primary-main" })) : (jsx(SVG, { paths: CHECK_PATHS, className: "absolute left-1 ml-px block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" }));
-        return (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer group/box", onClick: handleChange, children: [jsx("div", { className: style('appearance-none w-5 h-5 border-solid cursor-pointer m-0', isRadio ? 'rounded-full border-2' : checkboxStyle(value), value ? 'border-primary-main' : 'border-gray', disabled ? 'bg-main-disabled' : 'group-hover/box:border-primary-hover'), role: "checkbox", "aria-checked": Boolean(value), "aria-disabled": Boolean(disabled) }), value ? icon : null, text ? (jsx("div", { className: "ml-s", children: jsx(Text, { size: "text-l", font: "font-light", children: text }) })) : null] }) }));
-    });
-    const checkboxStyle = (value) => style('rounded border', value ? 'bg-primary-main' : '');
+    const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "font-sans flex gap-s items-center relative cursor-pointer", children: [jsx("input", { className: "appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-primary-hover\n        checked:border-2 checked:!border-primary-main focus:checked:border-primary-main focus:border-primary-text active:border-primary-text\n        after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main outline-none rounded-full cursor-pointer", type: "radio", value: value, name: name, checked: checked, onChange: (_) => onChange(_.target.value) }), text ? jsx("span", { className: "text-primary-text cursor-pointer", children: text }) : null] }) })));
 
     const renderQuestionsInterested = (field) => {
-        const textField = field('text');
-        return (jsxs("div", { className: "space-y-m", children: [jsxs("div", { className: "sm:flex sm:items-center sm:gap-xl", children: [jsx(Checkbox, { text: "\u0412\u0430\u043B\u044E\u0442\u043D\u044B\u0439 \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u044C", ...field('currencyControl') }), jsx(Checkbox, { text: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0440\u043D\u044B\u0435 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u0438", ...field('documentaryOperations') }), jsx(Checkbox, { text: "\u041A\u043E\u043D\u0432\u0435\u0440\u0441\u0438\u043E\u043D\u043D\u044B\u0435 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u0438", ...field('conversionOperations') })] }), jsx("textarea", { placeholder: "\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u0438\u043D\u0442\u0435\u0440\u0435\u0441\u0443\u044E\u0449\u0438\u0439 \u0432\u0430\u0441 \u0432\u043E\u043F\u0440\u043E\u0441, \u043C\u0435\u0441\u0442\u043E \u0432\u0435\u0434\u0435\u043D\u0438\u044F \u0431\u0438\u0437\u043D\u0435\u0441\u0430 \u0438 \u0443\u0434\u043E\u0431\u043D\u043E\u0435 \u0432\u0440\u0435\u043C\u044F \u0434\u043B\u044F \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u043D\u043E\u0433\u043E \u0437\u0432\u043E\u043D\u043A\u0430", className: "block w-full resize-y min-h-24 p-m outline-none border rounded-md border-main-stroke hover:border-primary-hover active:focus:border-primary-text", value: textField.value, onInput: ((e) => textField.onChange && textField.onChange(e.target?.value || '')) })] }));
+        const { value, onChange } = field('vedTypes');
+        return (jsx("div", { className: "space-y-m", children: jsxs("div", { className: "@xl:flex @xl:items-center @xl:gap-xl", children: [jsx(Radio, { className: "mb-xs", name: "vedTypes", text: "\u0412\u0430\u043B\u044E\u0442\u043D\u044B\u0439 \u043A\u043E\u0442\u0440\u043E\u043B\u044C", value: "currencyControl", checked: value === 'currencyControl', onChange: (_) => onChange && onChange(_) }), jsx(Radio, { className: "mb-xs", name: "vedTypes", text: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0440\u043D\u044B\u0435 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u0438", value: "documentOperations", checked: value === 'documentOperations', onChange: (_) => onChange && onChange(_) }), jsx(Radio, { className: "mb-xs", name: "vedTypes", text: "\u041A\u043E\u043D\u0432\u0435\u0440\u0441\u0438\u043E\u043D\u043D\u044B\u0435 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u0438", value: "conversionTransactions", checked: value === 'conversionTransactions', onChange: (_) => onChange && onChange(_) }), jsx(Radio, { className: "mb-xs", name: "vedTypes", text: "\u0418\u043D\u044B\u0435 \u0432\u043E\u043F\u0440\u043E\u0441\u044B \u0412\u042D\u0414", value: "otherIssues", checked: value === 'otherIssues', onChange: (_) => onChange && onChange(_) })] }) }));
     };
 
-    const renderWedDataOrganization = (field) => (jsxs("div", { children: [jsxs("div", { className: "sm:flex sm:justify-between sm:gap-lg", children: [jsx("div", { className: "sm:w-1/2", children: jsx(InputControl, { className: "shrink-0 w-full mb-s", label: "\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...withValidator(field('fullName'), defaultValidator) }) }), jsx("div", { className: "sm:w-1/2", children: jsx(InputControl, { className: "shrink-0 w-full mb-s", label: "\u0424\u0418\u041E", ...withValidator(field('name'), nameValidator) }) })] }), jsxs("div", { className: "sm:flex sm:justify-between sm:gap-lg sm:mb-2xl", children: [jsx("div", { className: "sm:w-1/2", children: jsx(PhoneInputControl, { className: "shrink-0 w-full mb-s", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) }) }), jsx("div", { className: "sm:w-1/2", children: jsx(InputControl, { className: "shrink-0 w-full mb-s", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...withValidator(field('mail'), defaultValidator) }) })] })] }));
+    const renderWedDataOrganization = (field, regions) => {
+        const isCurrencyControl = field('vedTypes').value === 'currencyControl';
+        return (jsxs("div", { children: [regions.length && isCurrencyControl ? (jsx(SelectControl, { className: "mb-s", label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", isSearch: true, options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) })) : null, jsxs("div", { className: "@xl:grid @xl:grid-cols-2 @xl:gap-x-lg", children: [isCurrencyControl ? (jsx(InputControl, { className: "w-full mb-s", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) })) : null, jsx(InputControl, { className: "w-full mb-s", label: "\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...withValidator(field('fullName'), defaultValidator) }), jsx(InputControl, { className: "w-full mb-s", label: "\u0424\u0418\u041E", ...withValidator(field('name'), nameValidator) }), jsx(PhoneInputControl, { className: "w-full mb-s", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) }), !isCurrencyControl ? (jsx(InputControl, { className: "w-full mb-s", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...withValidator(field('mail'), defaultValidator) })) : null] })] }));
+    };
+
+    const activeTextareaStyles = 'hover:border-primary-hover active:focus:border-primary-text focus:border-primary-text';
+    const renderWedTextarea = (field) => {
+        const textField = field('text');
+        return (jsxs("label", { children: [jsx("div", { className: "mb-xs", children: jsx(Text, { size: "text-m", font: "font-light", children: "\u041E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435" }) }), jsx("textarea", { placeholder: "\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u0438\u043D\u0442\u0435\u0440\u0435\u0441\u0443\u044E\u0449\u0438\u0439 \u0432\u0430\u0441 \u0432\u043E\u043F\u0440\u043E\u0441, \u043C\u0435\u0441\u0442\u043E \u0432\u0435\u0434\u0435\u043D\u0438\u044F \u0431\u0438\u0437\u043D\u0435\u0441\u0430 \u0438 \u0443\u0434\u043E\u0431\u043D\u043E\u0435 \u0432\u0440\u0435\u043C\u044F \u0434\u043B\u044F \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u043D\u043E\u0433\u043E \u0437\u0432\u043E\u043D\u043A\u0430", className: style('block w-full resize-y min-h-24 p-m outline-none border rounded-md border-gray', activeTextareaStyles), value: textField.value, onInput: ((e) => textField.onChange && textField.onChange(e.target?.value || '')) })] }));
+    };
 
     const initialFormState = {
         fullName: '',
         name: '',
         phone: '',
-        mail: '',
-        currencyControl: false,
-        documentaryOperations: false,
-        conversionOperations: false,
+        inn: '',
+        vedTypes: 'currencyControl',
         text: '',
     };
-    const webValidator = objectValidator({
+    const defaultValidators = {
         fullName: defaultValidator,
         name: nameValidator,
         phone: phoneValidator,
+    };
+    const wedValidator = objectValidator({
+        ...defaultValidators,
         mail: defaultValidator,
     });
+    const wedValidatorCurrencyControl = objectValidator({
+        ...defaultValidators,
+        inn: innValidator,
+        region: defaultValidator,
+    });
+    const isCurrencyControl = (vedTypes) => vedTypes === 'currencyControl';
+    const getValidator = (vedTypes) => isCurrencyControl(vedTypes) ? wedValidatorCurrencyControl : wedValidator;
+    const getVedTypes = (vedTypes) => ({
+        currencyControl: vedTypes === 'currencyControl',
+        documentOperations: vedTypes === 'documentOperations',
+        conversionTransactions: vedTypes === 'conversionTransactions',
+        otherIssues: vedTypes === 'otherIssues',
+    });
     const ApplicationFormWed = JSX((props) => {
         const { button, link, onSubmit } = props;
         const handleSubmit = useCallback((formState) => {
-            const { fullName, name, phone, mail, currencyControl, documentaryOperations, conversionOperations, text, } = formState;
-            isValidationSuccess(webValidator(formState)) &&
-                onSubmit({
-                    typeForm: 'kved',
-                    fullName,
-                    name,
-                    phone,
-                    mail,
-                    partnerComments: `Валютный контроль=${currencyControl}/Документарные операции=${documentaryOperations}/Конверсионные операции=${conversionOperations}/Доп инф=${text}`,
-                });
+            const { fullName, name, phone, mail, inn, region, vedTypes, text } = formState;
+            const data = {
+                typeForm: 'KVED',
+                fullName,
+                name,
+                phone: phone.replace(/[^+\d]/g, ''),
+                text,
+                vedTypes: getVedTypes(vedTypes),
+                PartnerComments: text,
+                ...(!isCurrencyControl(vedTypes) ? { mail } : { inn, region: region?.text || '' }),
+            };
+            isValidationSuccess(getValidator(vedTypes)(formState)) && onSubmit(data);
         }, [onSubmit]);
         const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
-        return (jsxs("form", { className: "container space-y-m", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", className: "sm:text-center" }), renderWedDataOrganization(field), jsx(Heading, { headingType: "h6", title: "\u0418\u043D\u0442\u0435\u0440\u0435\u0441\u0443\u044E\u0449\u0438\u0439 \u0432\u043E\u043F\u0440\u043E\u0441", className: "sm:text-center" }), renderQuestionsInterested(field), jsxs("div", { className: "flex flex-col gap-m border-b border-main-divider pb-lg sm:items-center sm:flex-row sm:pb-4xl", children: [renderSubmitButton(button), jsx(Footnote, { link: link })] }), jsx(Heading, { headingType: "h6", title: "\u0418\u043B\u0438 \u0441\u0432\u044F\u0436\u0438\u0442\u0435\u0441\u044C \u0441 \u043D\u0430\u043C\u0438 \u0443\u0434\u043E\u0431\u043D\u044B\u043C \u0441\u043F\u043E\u0441\u043E\u0431\u043E\u043C", className: "sm:text-center" }), renderContacts()] }));
+        const regions = useGetRegions();
+        return (jsxs("form", { className: "container space-y-m", onSubmit: formProps.onSubmit, children: [renderQuestionsInterested(field), jsx(Heading, { headingType: "h6", title: "\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", className: "@xl:text-center" }), renderWedDataOrganization(field, regions), renderWedTextarea(field), jsxs("div", { className: "flex flex-col gap-m border-b border-main-divider pb-lg @xl:items-center @xl:flex-row @xl:pb-4xl", children: [renderSubmitButton(button), jsx(Footnote, { link: link })] }), jsx(Heading, { headingType: "h6", title: "\u0418\u043B\u0438 \u0441\u0432\u044F\u0436\u0438\u0442\u0435\u0441\u044C \u0441 \u043D\u0430\u043C\u0438 \u0443\u0434\u043E\u0431\u043D\u044B\u043C \u0441\u043F\u043E\u0441\u043E\u0431\u043E\u043C", className: "@xl:text-center" }), renderContacts()] }));
     });
 
     const EmbeddableForms = {
@@ -1272,18 +1333,13 @@
     const API = CorporateLeadAPI();
     const ApplicationForm = JSX((props) => {
         const { className, formBlock, ...rest } = props;
-        // const type = formBlock?.formType;
-        // if (!type || !(type in EmbeddableForms)) {
-        //   return null;
-        // }
-        // const EmbeddedForm = EmbeddableForms[type];
         const [responseType, setResponseType] = useState('');
         const handleSubmit = useCallback(async (data) => {
             const status = (await API.send(data)) ? 'OK' : 'Fail';
             setResponseType(status);
             return status;
         }, []);
-        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container max-w-[978px] space-y-lg", children: [formBlock?.title ? (jsx(Heading, { headingType: "h3", title: formBlock.title, className: "sm:text-center" })) : null, formBlock ? renderEmbeddedForm(formBlock, handleSubmit) : null, responseType ? jsx(ResponseNotification, { responseType: responseType }) : null] }) }));
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container max-w-[978px] space-y-lg", children: [formBlock?.title ? (jsx(Heading, { headingType: "h3", title: formBlock.title, className: "@xl:text-center" })) : null, formBlock ? renderEmbeddedForm(formBlock, handleSubmit) : null, responseType ? jsx(ResponseNotification, { responseType: responseType }) : null] }) }));
     });
     const renderEmbeddedForm = (formBlock, handleSubmit) => {
         const type = formBlock?.formType;
@@ -1324,7 +1380,7 @@
         return description?.items && description.items.length > 0 ? (jsx("ul", { className: listStyleType, children: description.items.map((_, i) => (jsx(Paragraph, { font: "font-light", size: "text-l", color: "text-secondary-text group-data-secondary:text-white", children: _ }, `benefitListItem-${i}`))) })) : null;
     };
 
-    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-m', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
+    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-lg sm:gap-m', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
     const renderButton = (buttonClassName = '') => (button, index) => {
         const { text, icon, iconRight, version, ...rest } = button || {};
         const iconVersion = getIconVersion(icon, version);
@@ -1336,10 +1392,7 @@
         const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
         return icon?.iconVersion ? icon?.iconVersion : iconVersionDefault;
     };
-    const renderButtonIcon = (icon) => {
-        console.log(icon);
-        return icon?.icon || icon?.src ? (jsx(Img, { image: icon, width: String(icon?.size?.width || DEFAULT_ICON_W), height: String(DEFAULT_ICON_W) })) : null;
-    };
+    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 headlineVersionStyles = {
         XXL: {
@@ -1397,8 +1450,10 @@
         return (jsxs(BlockWrapper, { className: style(isEmbedded ? '@container-normal' : '', className), defaultPadding: isEmbedded ? '' : 'p-6xl', 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, font: versionStyle.descriptionWeight, align: align, ...descriptionStyle, children: description })) : null] }));
     });
 
-    const Bonus = JSX(({ className = '', title, description, bonusItems = [], ...rest }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { className: "mb-xl", isEmbedded: true, title: title, description: description, headlineVersion: "M" }), jsx("div", { className: "flex flex-wrap w-full", children: bonusItems.length > 0
-                        ? bonusItems.map((_, i) => (jsxs("div", { className: "space-y-xs flex flex-col grow w-full sm:w-[49%] border border-gray p-m", children: [jsx("div", { className: "grow", children: jsx(Headline, { title: _?.title, description: _?.description, headlineVersion: "S", isEmbedded: true, align: "text-left" }) }), jsxs("div", { className: "flex justify-center sm:justify-between sm:items-end", children: [jsx("div", { className: "hidden sm:block", children: renderButtonsSection(_?.buttons) }), _.bonusItemContent?.bonusType
+    const AlignStyles = 'text-center';
+
+    const Bonus = JSX(({ className = '', title, description, bonusItems = [], align = AlignStyles, ...rest }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { className: "mb-xl", isEmbedded: true, title: title, description: description, headlineVersion: "M", align: align }), jsx("div", { className: "flex flex-wrap w-full", children: bonusItems.length > 0
+                        ? bonusItems.map((_, i) => (jsxs("div", { className: "mb-3xl last:mb-0 sm:space-y-xs flex flex-col grow w-full p-4xl sm:p-m @xl:w-[49%] border border-gray", children: [jsx("div", { className: "grow", children: jsx(Headline, { title: _?.title, description: _?.description, headlineVersion: "S", isEmbedded: true, align: "text-left" }) }), jsxs("div", { className: "flex justify-center sm:justify-between sm:items-end", children: [jsx("div", { className: "hidden sm:block", children: renderButtonsSection(_?.buttons) }), _.bonusItemContent?.bonusType
                                             ? renderBonusItemContent(_.bonusItemContent)
                                             : null] })] }, String(i))))
                         : null })] }) })));
@@ -1407,7 +1462,7 @@
         : renderBonusImage(bonusItemContent);
     const renderBonusCount = (_) => (jsxs("div", { className: "w-full pt-default mt-s flex justify-center sm:justify-end items-end", children: [_.bonusCount ? (
             // -mb-10 добавлен для выравнивания bonusCount относительно bonusName, тк шрифт font-mohave неправильно высчитывает line-height
-            jsx("div", { className: "shrink-0 -mb-10", children: jsx("span", { className: "font-mohave text-title-extra gradient-color-text", children: _.bonusCount }) })) : null, _.bonusName ? (jsx("div", { className: "shrink-0 gradient-color-text", children: jsx(Text, { size: "text-h2", children: _.bonusName }) })) : null] }));
+            jsx("div", { className: "shrink-0 -mb-10", children: jsx("span", { className: "font-mohave text-title-large sm:text-title-extra gradient-color-text", children: _.bonusCount }) })) : null, _.bonusName ? (jsx("div", { className: "shrink-0 gradient-color-text", children: jsx(Text, { size: "text-h2", children: _.bonusName }) })) : null] }));
     const renderBonusImage = (_) => _.image ? jsx(Img, { className: "min-w-12 p-xs rounded-icon shrink-0", image: _.image }) : null;
 
     /**
@@ -1419,11 +1474,9 @@
         right: 'text-right',
     };
 
-    const bonusBenefitAlign = 'text-center';
-
     const bonusBenefitStyles = 'items-center';
 
-    const renderBonusBenefit = ({ icon, title, description }, i) => (jsxs("div", { className: style('flex flex-col', bonusBenefitStyles, !description && !title ? 'justify-center' : ''), children: [title ? (jsx(Text, { size: "text-h6", font: "font-normal", align: bonusBenefitAlign, children: title })) : null, icon ? jsx(Img, { image: icon, height: "180", className: "w-auto" }) : null, description ? (jsx(Text, { size: "text-h6", font: "font-normal", align: bonusBenefitAlign, children: description })) : null] }, String(i)));
+    const renderBonusBenefit = ({ icon, title, description }, i) => (jsxs("div", { className: style('flex flex-col', bonusBenefitStyles, !description && !title ? 'justify-center' : ''), children: [title ? (jsx(Text, { size: "text-h6", font: "font-normal", align: AlignStyles, children: title })) : null, icon ? jsx(Img, { image: icon, height: "180", className: "w-auto" }) : null, description ? (jsx(Text, { size: "text-h6", font: "font-normal", align: AlignStyles, children: description })) : null] }, String(i)));
 
     const renderBonusBenefits = (bonusBenefits, columnsCount, cardTextAlign) => (jsx("div", { className: `grid gap-2xs ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit) }));
     const getElementsColsValue = (colValue) => {
@@ -1439,7 +1492,7 @@
         }
     };
 
-    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { className: "mb-4xl sm:mb-3xl", title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length
+    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length
                 ? renderBonusBenefits(bonusBenefits, columnsCount, cardTextAlign)
                 : null] })));
 
@@ -1511,11 +1564,11 @@
     const REFINANCING_EXTRA_MIN_SUM = 0;
     const REFINANCING_EXTRA_MAX_SUM = 500000;
     const DEPOSIT_DEFAULT_SUM = 20000;
-    const DEFAULT_MIN_MONTHS$1 = 13;
+    const DEFAULT_MIN_MONTHS = 13;
     const DEFAULT_REFINANCING_MIN_MONTHS = 13;
     const DEFAULT_REFINANCING_MONTHS = 48;
-    const DEFAULT_MAX_MONTHS$1 = 60;
-    const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS$1 - DEFAULT_MIN_MONTHS$1) / 2);
+    const DEFAULT_MAX_MONTHS = 60;
+    const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS - DEFAULT_MIN_MONTHS) / 2);
     const BUSINESS_DEFAULT_SUM = 100000;
     const BUSINESS_MIN_DAYS = 1;
     const BUSINESS_MAX_DAYS = 1095;
@@ -1528,8 +1581,8 @@
     const DEFAULT_CREDIT_CALCULATOR_PARAMS = {
         minSum: DEFAULT_MIN_SUM$1,
         maxSum: DEFAULT_MAX_SUM$1,
-        minMonths: DEFAULT_MIN_MONTHS$1,
-        maxMonths: DEFAULT_MAX_MONTHS$1,
+        minMonths: DEFAULT_MIN_MONTHS,
+        maxMonths: DEFAULT_MAX_MONTHS,
         rate: 0,
         isSalaryClient: false,
         isPensionClient: false,
@@ -1544,7 +1597,7 @@
         minSumExtra: REFINANCING_EXTRA_MIN_SUM,
         maxSumExtra: REFINANCING_EXTRA_MAX_SUM,
         minMonths: DEFAULT_REFINANCING_MIN_MONTHS,
-        maxMonths: DEFAULT_MAX_MONTHS$1,
+        maxMonths: DEFAULT_MAX_MONTHS,
         rate: 0,
         isExtraMoney: false,
         isSalaryClient: false,
@@ -1640,7 +1693,7 @@
             restExpenseValue: DEFAULT_REST_MIN_SUM,
         });
         const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } = useBonusCalculatorParams(userInputParams, sourceBookDir);
-        return (jsxs("section", { className: style('flex flex-col justify-between sm:flex-row gap-m', className), children: [jsxs("div", { className: "flex flex-col gap-y-m sm:w-2/5 gap-2xl", children: [renderWantedSumInput({
+        return (jsxs("section", { className: style('flex flex-col justify-between @5xl:flex-row gap-m', className), children: [jsxs("div", { className: "flex flex-col gap-y-m sm:max-w-md gap-2xl", children: [renderWantedSumInput({
                             title: 'Сумма покупок в категории путешествия, ₽',
                             min: minSumTravel,
                             max: maxSumTravel,
@@ -1657,6 +1710,31 @@
                         })] }), monthBonus >= 0 ? (jsx(Rate, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u043C\u0435\u0441\u044F\u0446", rate: monthBonus, rateBlockClassName: "tracking-[-14px]", fractionDigits: 0 })) : null, jsxs("div", { className: "flex flex-col gap-2xl sm:w-96", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] })] }));
     });
 
+    const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
+        return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, viewBox: viewBox, fill: fill, width: width, height: height, children: paths.map(({ d, fill: pathFill, ...options }, i) => (jsx("path", { d: d, fill: pathFill || 'currentColor', ...commonOptions, ...options }, i))) }));
+    });
+
+    const CHECK_PATHS = [
+        {
+            d: 'M10.207.793a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L3.5 6.086 8.793.793a1 1 0 0 1 1.414 0Z',
+            fillRule: 'evenodd',
+            clipRule: 'evenodd',
+            fill: 'white',
+        },
+    ];
+    const Checkbox = JSX(({ className, value, text, disabled, isRadio, onChange }) => {
+        const handleChange = useCallback((e) => {
+            if (disabled) {
+                return;
+            }
+            e.preventDefault();
+            onChange && onChange(!value);
+        }, [onChange, disabled, value]);
+        const icon = isRadio ? (jsx("div", { className: "absolute left-1 w-3 h-3 rounded-full bg-primary-main" })) : (jsx(SVG, { paths: CHECK_PATHS, className: "absolute left-1 ml-px block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" }));
+        return (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer group/box", onClick: handleChange, children: [jsx("div", { className: style('appearance-none w-5 h-5 border-solid cursor-pointer m-0', isRadio ? 'rounded-full border-2' : checkboxStyle(value), value ? 'border-primary-main' : 'border-gray', disabled ? 'bg-main-disabled' : 'group-hover/box:border-primary-hover'), role: "checkbox", "aria-checked": Boolean(value), "aria-disabled": Boolean(disabled) }), value ? icon : null, text ? (jsx("div", { className: "ml-s", children: jsx(Text, { size: "text-l", font: "font-light", children: text }) })) : null] }) }));
+    });
+    const checkboxStyle = (value) => style('rounded border', value ? 'bg-primary-main' : '');
+
     const STEP_DAYS = 1;
     const renderDaysInput = (props) => (jsx(InputRange, { items: [`От ${daysText(props.min || 0)}`, `До ${daysText(props.max || 0)}`], step: STEP_DAYS, ...props }));
     const daysText = (days) => `${days} ${Number(days) % 10 === 1 ? 'дня' : 'дней'}`;
@@ -1789,7 +1867,7 @@
         });
         const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
         const { income, finalSum, rate, isUnavailableByTerm, depositeName } = calculatorParams;
-        return (jsxs("section", { className: style('flex flex-col justify-between sm:flex-row gap-m', className), children: [jsxs("div", { className: "flex flex-col gap-y-m sm:w-2/5 gap-2xl", children: [renderWantedSumInput({
+        return (jsxs("section", { className: style('flex flex-col justify-between @5xl:flex-row gap-m', className), children: [jsxs("div", { className: "flex flex-col gap-y-m sm:max-w-md gap-2xl", children: [renderWantedSumInput({
                             title: 'Сумма, ₽',
                             min: calculatorParams.minSum,
                             max: calculatorParams.maxSum,
@@ -1941,7 +2019,7 @@
             orientation: 'vertical',
             ...field('isAnnuity'),
         });
-        return (jsxs("section", { className: style('flex flex-col justify-between sm:flex-row gap-m', className), children: [jsxs("div", { className: "flex flex-col gap-y-m sm:w-2/5 gap-2xl", children: [renderWantedSumInput({
+        return (jsxs("section", { className: style('flex flex-col justify-between @5xl:flex-row gap-m', className), children: [jsxs("div", { className: "flex flex-col gap-y-m sm:max-w-md gap-2xl", children: [renderWantedSumInput({
                             title: 'Сумма кредита, ₽',
                             step: 500,
                             min: calculatorParams.minSum,
@@ -2035,7 +2113,7 @@
         useEffect(() => {
             setMonthsValue && setMonthsValue(defaultMonth);
         }, [defaultMonth]);
-        return (jsxs("section", { className: style('flex flex-col justify-between sm:flex-row gap-m', className), children: [jsxs("div", { className: "flex flex-col gap-y-m sm:w-2/5 gap-2xl", children: [renderWantedSumInput({
+        return (jsxs("section", { className: style('flex flex-col justify-between @5xl:flex-row gap-m', className), children: [jsxs("div", { className: "flex flex-col gap-y-m sm:max-w-md gap-2xl", children: [renderWantedSumInput({
                             title: 'Сумма, ₽',
                             min: calculatorParams.minSum,
                             max: calculatorParams.maxSum,
@@ -2149,7 +2227,7 @@
             moneyExtra: REFINANCING_OLD_DEFAULT_SUM,
         });
         const calculatorParams = useRefinancingCalculatorParams(userInputParams, sourceBookDir, paramsViewSettings);
-        return (jsxs("section", { className: style('flex flex-col justify-between sm:flex-row gap-m', className), children: [jsxs("div", { className: "flex flex-col gap-y-m sm:w-2/5 gap-2xl", children: [renderWantedSumInput({
+        return (jsxs("section", { className: style('flex flex-col justify-between @5xl:flex-row gap-m', className), children: [jsxs("div", { className: "flex flex-col gap-y-m sm:max-w-md gap-2xl", children: [renderWantedSumInput({
                             title: 'Остаток долга в других банках, ₽ ',
                             step: 500,
                             min: calculatorParams.minSum,
@@ -2279,7 +2357,7 @@
             ? 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-6xl", ...rest, children: [title ? (jsx(Heading, { className: "pb-lg xl:pb-4xl self-start xl:self-center", headingType: "h2", title: title })) : null, jsxs("form", { className: "w-full xl:max-w-[468px]", method: "POST", action: FORM_URL_MAP[formType], children: [jsx(CurrencyInput, { name: "_amount", valid: !isDisabled, placeholder: placeholder, label: label, ...field('_amount', { parse: Number, format: String }) }), jsx("input", { type: "hidden", name: "amount", value: _amount }), button?.text ? (jsx("button", { type: "submit", className: style('w-full p-m mt-lg', buttonStyle), disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
+        return (jsxs(BlockWrapper, { className: style('flex flex-col items-center', className), defaultPadding: "p-6xl", ...rest, children: [title ? (jsx(Heading, { className: "pb-lg xl:pb-4xl self-start xl:self-center", headingType: "h3", title: title })) : null, jsxs("form", { className: "w-full xl:max-w-[468px]", method: "POST", action: FORM_URL_MAP[formType], children: [jsx(CurrencyInput, { name: "_amount", valid: !isDisabled, placeholder: placeholder, label: label, ...field('_amount', { parse: Number, format: String }) }), jsx("input", { type: "hidden", name: "amount", value: _amount }), button?.text ? (jsx("button", { type: "submit", className: style('w-full p-m mt-lg', buttonStyle), disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
     });
 
     const mapChildren = (mapper) => (children) => {
@@ -2576,6 +2654,7 @@
         'CarouselRichTextCard',
         'CarouselInvestmentCard',
         'CarouselEventCard',
+        'ProductBlock',
     ];
     Carousel.childSchema = () => ({
         isHighlighting: {
@@ -2595,17 +2674,28 @@
     const titleSize = 'L';
 
     const layerBaseStyle = 'z-10 border border-solid w-full h-full';
-    const layerStyle = style(layerBaseStyle, 'absolute hidden sm:block border-transparent');
-    const CarouselCard = JSX(({ className, title, description, button, ...rest }) => (jsx(BlockWrapper, { className: style('sm:pl-6xl sm:pb-4xl', className), defaultPadding: "p-0", ...rest, children: jsxs("div", { className: "relative", children: [jsx("div", { className: style(layerStyle, 'top-9 right-12 bg-green-dark') }), jsx("div", { className: style(layerStyle, 'top-6 right-8 bg-green') }), jsx("div", { className: style(layerStyle, 'top-3 right-4 bg-green-light') }), jsxs("div", { className: style(layerBaseStyle, 'relative p-xl sm:p-5xl bg-white border-green-light'), children: [jsx(Headline, { title: title, description: description, headlineVersion: titleSize, align: "text-left", isEmbedded: true }), renderButtonsSection([button], {
+    const layerStyle = style(layerBaseStyle, 'absolute hidden @xl:block border-transparent');
+    const CarouselCard = JSX(({ className, title, description, button, ...rest }) => (jsx(BlockWrapper, { className: style('sm:pl-6xl sm:pb-4xl @container-normal', className), defaultPadding: "p-0", ...rest, children: jsxs("div", { className: "relative", children: [jsx("div", { className: style(layerStyle, 'top-9 right-12 bg-green-dark') }), jsx("div", { className: style(layerStyle, 'top-6 right-8 bg-green') }), jsx("div", { className: style(layerStyle, 'top-3 right-4 bg-green-light') }), jsxs("div", { className: style(layerBaseStyle, 'relative p-xl sm:p-5xl bg-white border-transparent sm:border-green-light'), children: [jsx(Headline, { title: title, description: description, headlineVersion: titleSize, align: "text-left", isEmbedded: true }), renderButtonsSection([button], {
                             className: 'mt-m sm:mt-6xl sm:justify-center',
                             isVertical: true,
                         })] })] }) })));
 
+    const imageAlignmentMap = {
+        start: '@xl:self-start',
+        center: '@xl:self-center',
+        end: '@xl:self-end',
+    };
+    const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, isImageAlwaysOnRight = false, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-3xl font-sans overflow-hidden', padding || defaultPadding, className), children: [title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: style('grow relative flex justify-around @lg:justify-between items-stretch gap-3xl', isImageAlwaysOnRight ? 'flex-row' : 'flex-col-reverse @lg:flex-row'), children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-3xl max-w-[600px] @xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), backImage ? (jsx("div", { className: "justify-center mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4", children: backImage })) : null, buttons] }), renderImageContainer(rightImage, {
+                        className: isImageAlwaysOnRight ? '' : '@xl:order-1',
+                        imageAlign,
+                    })] })] })));
+    const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('md:flex-shrink-0 self-center', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
+
     const cardStyleMap = {
         black: 'bg-black',
         white: 'bg-white',
     };
-    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col justify-left', className), defaultPadding: "p-2xl", ...rest, children: [image?.src ? jsx(Img, { className: "flex justify-center mb-xl", image: image }) : null, jsx(Headline, { title: title, description: description, headlineVersion: "XS", isEmbedded: true, align: "text-left", className: "mb-m" }), colors?.length ? (jsxs("div", { className: "flex text-secondary-text mb-m", children: [jsx("div", { className: "mr-xs", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0426\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'w-full mt-lg' })] })));
+    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors = [], align = 'text-left', padding, ...rest }) => (jsx(BlockWrapper, { className: style('flex flex-col justify-left', className), defaultPadding: "p-2xl", ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, title: title ? (jsx(Headline, { title: title, description: description, headlineVersion: "XS", isEmbedded: true, align: align })) : null, rightImage: image?.src ? (jsx(Img, { className: "flex justify-center align-center mb-xl", image: image })) : null, buttons: renderButtonsSection([button], { buttonClassName: 'w-full mt-lg' }), children: [colors?.length ? (jsxs("div", { className: "flex text-secondary-text mb-m", children: [jsx("div", { className: "mr-xs", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0426\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null] }) })));
     const renderColorOption = (color, i) => (jsx("div", { role: "figure", className: `w-6 h-6 ml-s border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
 
     const LinkWrapper = JSX(({ className = '', href, target, isRemote = false, children }) => {
@@ -2619,17 +2709,6 @@
         return (jsx(BlockWrapper, { className: className, defaultPadding: "p-0", ...rest, children: jsxs(LinkWrapper, { className: "flex flex-col", href: href, target: target, children: [icon?.icon ? jsx(Img, { image: icon }) : null, icon?.src ? jsx(Img, { image: icon }) : null, jsx("div", { className: "p-s", children: jsx(Headline, { title: title, description: description, headlineVersion: "XS", isEmbedded: true, align: "text-left" }) })] }) }));
     });
 
-    const imageAlignmentMap = {
-        start: '@lg:self-start',
-        center: '@lg:self-center',
-        end: '@lg:self-end',
-    };
-    const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, isImageAlwaysOnRight = false, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-3xl font-sans overflow-hidden', padding || defaultPadding, className), children: [title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: style('grow relative flex justify-around @lg:justify-between items-stretch gap-3xl', isImageAlwaysOnRight ? 'flex-row' : 'flex-col @lg:flex-row'), children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-3xl max-w-[600px] @xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), backImage ? (jsx("div", { className: "justify-center mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4", children: backImage })) : null, buttons] }), renderImageContainer(rightImage, {
-                        className: isImageAlwaysOnRight ? '' : '-order-1 @xl:order-1',
-                        imageAlign,
-                    })] })] })));
-    const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('md:flex-shrink-0 self-center', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
-
     const cardColumnsModeStyleMap = {
         1: 'grid-cols-1',
         2: 'grid-cols-2',
@@ -2637,24 +2716,23 @@
     const CarouselInvestmentCard = JSX(({ className, padding, additionalDescription, cardsList = [], columnsMode = 1, description, image, title, ...rest }) => (jsx(BlockWrapper, { className: style('text-left', className), padding: "p-0", ...rest, children: jsxs(BaseTile, { className: "h-full", defaultPadding: "p-xl", padding: padding, title: title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-m z-10", title: title }) : null, backImage: image?.src ? jsx(Img, { image: image }) : null, children: [jsxs("div", { className: "flex justify-between mb-m", children: [description ? (jsx("div", { className: "w-1/3", children: jsx(Text, { size: "text-h6", children: description }) })) : null, additionalDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null] }), cardsList.length ? (jsx("ul", { className: style('list-none m-0 p-0 grid gap-xs', cardColumnsModeStyleMap[columnsMode]), children: renderCardList(cardsList) })) : null] }) })));
     const renderCardList = (cardsList) => cardsList.map((item, i) => (jsxs("li", { children: [item?.parameter ? jsx(Text, { size: "text-h6", children: item.parameter }) : null, item?.parameterDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: item.parameterDescription })) : null] }, String(i))));
 
-    const LINK_CLASS_NAME = `absolute border border-primary-main px-xl py-lg
-  text-l font-light bg-white text-primary-text flex
-  justify-between items-center group-hover/link:text-primary-main z-10`;
-    const LINK_BORDER_CLASS_NAME = 'bg-transparent border-white border h-[70px] absolute w-80 top-0';
+    const LINK_CLASS_NAME = `absolute border
+  bg-white flex justify-between group-hover/link:text-primary-main`;
+    const LINK_BORDER_CLASS_NAME = 'hidden xl:block absolute w-full h-full border border-white';
     const CarouselLinkButton = JSX(({ text, href = '', target = '', className = '' }) => {
         const link = useLink();
         const adjustedProps = link({ href, target });
-        return text ? (jsxs("div", { className: style('flex max-w-sm relative group/link cursor-pointer w-64 h-16 sm:w-[47%] sm:h-20 sm:mr-m', className), children: [jsxs("a", { className: style(LINK_CLASS_NAME, 'rounded-md sm:rounded-none w-full h-12 sm:ml-s sm:w-full sm:h-auto'), role: "link", ...adjustedProps, children: [jsx("div", { className: "p-0.5", children: text }), jsx("div", { className: "w-6 h-6 hidden sm:block", children: jsx(Img, { className: "w-4 h-4 rounded-full box-border brightness-0 group-hover/link:brightness-100", image: { icon: 'ArrowRightIcon', iconVersion: 'black' }, imageClassName: "group-hover/link:text-primary-main", width: "24", height: "24" }) })] }), jsx("div", { className: LINK_BORDER_CLASS_NAME + ' hidden sm:block mx-1.5 mt-1.5' }), jsx("div", { className: LINK_BORDER_CLASS_NAME + ' hidden sm:block mt-3 mr-3' })] })) : null;
+        return text ? (jsx("div", { className: style('flex relative group/link pl-s pb-s min-w-[16rem] xl:min-w-[20rem]', className), children: jsxs("div", { className: "relative min-h-16 w-full", children: [jsxs("a", { className: style(LINK_CLASS_NAME, 'sm:rounded-md rounded-none w-full px-xl py-lg whitespace-nowrap'), role: "link", ...adjustedProps, children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-primary-text", children: text }), jsx(Img, { className: "group-hover/link:brightness-100 hidden xl:block ml-2xs", image: { icon: 'ArrowRightIcon', iconVersion: 'black' }, imageClassName: "group-hover/link:text-primary-main hidden xl:block", width: "24", height: "24" })] }), jsx("div", { className: style(LINK_BORDER_CLASS_NAME, '-bottom-1.5 -left-1.5') }), jsx("div", { className: style(LINK_BORDER_CLASS_NAME, '-bottom-3 -left-3') })] }) })) : null;
     });
 
     const MAX_LINKS_COUNT = 10;
 
-    const CarouselLinks = JSX(({ className, additionalDescription, description, links, title, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col sm:flex-row w-full overflow-hidden', className), ...rest, children: [jsxs("div", { className: "mr-xl flex-auto", children: [jsx(Headline, { isEmbedded: true, title: title, description: description, as: "h1", align: "text-left" }), additionalDescription ? (jsx(Headline, { className: "pt-m", description: additionalDescription, align: "text-left", isEmbedded: true })) : null] }), links?.length ? renderLinks(links) : null] })));
-    const renderLinks = (links) => {
+    const CarouselLinks = JSX(({ className, additionalDescription, description, links, title, ...rest }) => (jsx(BlockWrapper, { className: style('overflow-hidden', className), ...rest, children: jsxs("div", { className: "flex flex-col @6xl:flex-row gap-m", children: [jsxs("div", { children: [jsx(Headline, { isEmbedded: true, title: title, description: description, as: "h1", align: "text-left" }), additionalDescription ? (jsx(Headline, { className: "pt-m", description: additionalDescription, align: "text-left", isEmbedded: true })) : null] }), links?.length ? renderLinks(links, '@6xl:min-w-[672px] p-0 justify-self-end') : null] }) })));
+    const renderLinks = (links, className = '') => {
         const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
-        return (jsx(Carousel, { className: "@container-normal sm:w-2/3 w-full p-0 sm:p-xs", version: "secondary", itemCount: itemCount, arrowsPadded: false, children: new Array(itemCount).fill(null).map((_, groupIndex) => (jsx("div", { className: style('flex flex-wrap self-start w-full sm:w-[672px]'), children: links
+        return (jsx(Carousel, { className: className, version: "secondary", itemCount: itemCount, arrowsPadded: false, padding: "p-0", children: new Array(itemCount).fill(null).map((_, groupIndex) => (jsx("div", { className: style('flex flex-wrap gap-2xs self-start xl:justify-center @5xl:grid @5xl:grid-cols-2'), children: links
                     .slice(groupIndex * MAX_LINKS_COUNT, (groupIndex + 1) * MAX_LINKS_COUNT)
-                    .map((link, index) => (jsx(CarouselLinkButton, { className: "sm:m-2xs", ...link }, String(index)))) }, String(groupIndex)))) }));
+                    .map((link, index) => (jsx(CarouselLinkButton, { ...link }, String(index)))) }, String(groupIndex)))) }));
     };
 
     const DOT_SIZE_MAP = {
@@ -2679,9 +2757,7 @@
     };
     const List = JSX(({ className, hasIndent, isDotted, items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: style('flex flex-col gap-xs text-left text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text', TEXT_SIZE_MAP[listItemSize], hasIndent ? ITEM_INDENT_MAP[listItemSize] : '', className), role: "list", children: items.map((item, i) => (jsx(ListItem, { isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
 
-    const alignTextStyle = 'text-center';
-
-    const CarouselProductCard = JSX(({ additionalDescription, align = alignTextStyle, button = {}, className = '', description, headlineSmallVersion = 'H6', href, icon, isDotted = true, isButtonFullWidth = true, isImageFullWidth = false, isTopPosition = false, items = [], target, title, version = 'primary', ...rest }) => {
+    const CarouselProductCard = JSX(({ additionalDescription, align = AlignStyles, button = {}, className = '', description, headlineSmallVersion = 'H6', href, icon, isDotted = true, isButtonFullWidth = true, isImageFullWidth = false, isTopPosition = false, items = [], target, title, version = 'primary', ...rest }) => {
         return (jsxs(BlockWrapper, { className: style('flex flex-col justify-between', align, className), defaultPadding: "p-0", version: version, ...rest, children: [jsxs(LinkWrapper, { className: "p-m flex flex-col gap-xs", href: href, target: target, children: [renderCardTitle(headlineSmallVersion, title), renderDescription$2(description), renderItems(items, isDotted, version), renderAdditionalDescription(additionalDescription), renderImage$2(icon, isImageFullWidth, isTopPosition)] }), renderButtonsSection([button], {
                     className: style('p-m pt-0', isButtonFullWidth ? '' : 'self-center'),
                     isVertical: isButtonFullWidth,
@@ -2699,7 +2775,7 @@
 
     const deviation = (items) => items?.length ? Math.sqrt(Math.abs(avg(items.map((_) => _ ** 2)) - avg(items) ** 2)) : 0;
 
-    const renderBenefitIcon = (icon, benefitsVersion = 'normal') => icon ? (jsx("div", { className: style('w-12 h-12 min-w-12 box-border flex items-center justify-center rounded-icon', benefitsVersion === 'normal'
+    const renderBenefitIcon = (icon, benefitsVersion = 'normal') => icon ? (jsx("div", { className: style('sm:w-12 sm:h-12 sm:min-w-12 w-11 h-11 min-w-11 box-border flex items-center justify-center rounded-icon', benefitsVersion === 'normal'
             ? 'bg-secondary-light text-primary-main'
             : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black'), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null;
 
@@ -2716,7 +2792,7 @@
 
     const renderBenefitText = (_, i) => _.type === 'rte' && '__html' in _ && _.__html ? (jsx(RichText, { ..._ }, `rte-${i}`)) : ([
         'label' in _ ? renderBenefitLabel(_.label, i) : null,
-        'description' in _ ? renderBenefitDescription(_.description, i) : null,
+        'description' in _ ? (jsx("span", { className: _.descriptionClassName, children: renderBenefitDescription(_.description, i) }, String(i))) : null,
     ]);
 
     const BenefitItem = JSX(({ className, benefitsVersion, ..._ }) => (jsxs("div", { className: style('flex gap-m', 'description' in _ && _.description ? 'items-start' : 'items-center', className), children: ['icon' in _ ? renderBenefitIcon(_.icon, benefitsVersion) : null, jsx("div", { children: renderBenefitText(_) })] })));
@@ -2739,14 +2815,15 @@
 
     const BaseProductTile = JSX(({ className, padding, defaultPadding, title, description, headlineVersion = 'L', align = 'text-left', benefitsVersion, isTabularBenefits, benefits, __html, isFullWidthTitle = true, items, isDotted = true, listItemSize, tags = [], buttons, image, imageOptions: { imageAlign = 'end', directionRight = true, isBackground, isImageAlwaysOnRight, } = {}, children, }) => {
         const img = image?.src ? jsx(Img, { image: image }) : null;
-        const headline = (jsx(Headline, { title: title, description: description, headlineVersion: headlineVersion, align: align, isEmbedded: true }));
+        const headline = renderHeadline({ title, description, headlineVersion, align });
         const filteredBenefits = benefits?.filter((_) => _?.type === 'rte' || 'label' in _ || 'description' in _);
-        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isFullWidthTitle ? { insetTitle: headline } : { title: headline }), ...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight)), imageAlign: imageAlign, isImageAlwaysOnRight: isImageAlwaysOnRight, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col gap-xl", children: [filteredBenefits?.length ? (jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: filteredBenefits })) : null, __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, renderTags(tags)] }) }));
+        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isFullWidthTitle ? { insetTitle: headline } : { title: headline }), ...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight)), imageAlign: imageAlign, isImageAlwaysOnRight: isImageAlwaysOnRight, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col sm:gap-xl gap-4xl", children: [filteredBenefits?.length ? (jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: filteredBenefits })) : null, __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, renderTags(tags)] }) }));
     });
     const leftOrRightImage = (img, directionRight) => directionRight ? { rightImage: img } : { leftImage: img };
     const renderTags = (tags) => (tags?.length ? jsx(Tags, { tags: tags }) : null);
+    const renderHeadline = ({ title, description, headlineVersion, align }) => title || description ? (jsx(Headline, { title: title, description: description, headlineVersion: headlineVersion, align: align, isEmbedded: true })) : null;
 
-    const CarouselProgramsCard = JSX(({ className, title, icon, list, href, target, ...rest }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-3xl", ...rest, children: jsx(LinkWrapper, { className: "flex items-center h-full", href: href, target: target, children: jsx(BaseProductTile, { title: title, headlineVersion: "XS", image: icon, imageOptions: { directionRight: false, imageAlign: 'center' }, benefits: list?.map((_) => ({
+    const CarouselProgramsCard = JSX(({ className, title, icon, list, href, target, ...rest }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-3xl", ...rest, children: jsx(LinkWrapper, { className: "flex items-center h-full", href: href, target: target, children: jsx(BaseProductTile, { title: title, headlineVersion: "XS", image: icon, imageOptions: { directionRight: true, imageAlign: 'center' }, benefits: list?.map((_) => ({
                     type: 'default',
                     label: _.title,
                     description: _.description,
@@ -2802,15 +2879,15 @@
         const { href } = rest;
         const { iconMapped, label } = findIconByHref(href);
         const iconCustom = getFilteredIcon(icon) ?? iconMapped;
-        return (jsx(Button, { className: style('border border-solid hover:border-transparent', 'group-data-primary:border-main-divider', 'hover:bg-primary-main hover:text-black', 'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover', 'group-data-gray:border-green', 'py-m group/media flex items-center justify-center box-border', buttonSizeStyle[buttonSize]), "aria-label": label, rel: "noopener noreferrer", target: "_blank", ...rest, children: jsx(Img, { image: iconCustom, imageClassName: "group-hover/media:text-white", width: "24", height: "24" }) }));
+        return (jsx(Button, { className: style('border border-solid hover:border-transparent', 'group-data-primary:border-main-divider', 'hover:bg-primary-main hover:text-black', 'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover', 'group-data-gray:border-green', 'p-m min-h-14 group/media flex items-center justify-center box-border', buttonSizeStyle[buttonSize]), "aria-label": label, rel: "noopener noreferrer", target: "_blank", ...rest, children: jsx(Img, { image: iconCustom, imageClassName: "group-hover/media:text-white", width: "24", height: "24" }) }));
     });
     const getFilteredIcon = (icon) => (icon?.src || icon?.icon ? icon : undefined);
 
     const SocialMedia = JSX(({ className = '', media, children, buttonSize }) => (jsxs("div", { className: "flex flex-col sm:flex-col-reverse gap-xs", children: [children ? (jsx(Text, { size: "text-s", font: "font-light", color: "text-secondary-text", children: children })) : null, jsx("div", { className: style('flex gap-xs', className), children: media?.map((_, index) => (jsx(MediaButton, { buttonSize: buttonSize, ..._ }, String(index)))) })] })));
 
     //TODO: replace SocialMedia with renderButtonSection
-    const CarouselRecommendationCard = JSX(({ className, padding, description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('relative min-h-28 group-data-gray:bg-main-divider/50', className), defaultPadding: "p-0", ...rest, children: jsx(LinkWrapper, { href: href, target: target, className: "h-full", children: jsx(BaseTile, { className: "h-full", defaultPadding: "p-m", padding: padding, title: title ? (jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: align })) : null, backImage: icon?.icon || icon?.src ? jsx(Img, { image: icon }) : null, buttons: socialMedia.length ? jsx(SocialMedia, { media: socialMedia }) : null, children: items.length ? jsx(List, { items: items, listItemSize: "S" }) : null }) }) }));
+    const CarouselRecommendationCard = JSX(({ className, padding, description, href, icon, items = [], listItemSize = 'S', socialMedia = [], target, title, align = 'text-left', ...rest }) => {
+        return (jsx(BlockWrapper, { className: style('relative min-h-28 group-data-gray:bg-main-divider/50', className), defaultPadding: "p-0", ...rest, children: jsx(LinkWrapper, { href: href, target: target, className: "h-full", children: jsx(BaseTile, { className: "h-full", defaultPadding: "p-m", padding: padding, title: title ? (jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: align })) : null, backImage: icon?.icon || icon?.src ? jsx(Img, { image: icon }) : null, buttons: socialMedia.length ? jsx(SocialMedia, { media: socialMedia }) : null, children: items.length ? jsx(List, { items: items, listItemSize: listItemSize }) : null }) }) }));
     });
 
     const CarouselRichTextCard = JSX(({ className = '', __html, richVersion = 'striped', ...rest }) => (jsx(BlockWrapper, { className: className, ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) })));
@@ -2852,35 +2929,35 @@
     const renderIconBlock$1 = (icon) => (jsx("div", { className: "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-lg flex justify-between items-center", onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16" })] }));
 
-    const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
-    const BORDER_CLASSES = 'border-gray border-solid border';
-    const DIVIDER_CLASSES$1 = 'border-main-divider border border-t-0 border-x-0';
-    const FIRST_CELL_CLASSES$1 = 'w-52';
+    const gradientStyle = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
+    const borderStyle = 'border-gray border-solid border';
+    const dividerStyle$1 = 'border-main-divider border-b';
+    const firstCellStyle$1 = 'w-52';
     const COLS_LENGTH_FOR_SCROLL$1 = 3;
     const COLUMN_WIDTH$2 = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px
 
-    const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col gap-m items-center rounded-t-md border-b-0 p-2xl ${BORDER_CLASSES} ${GRADIENT}`, role: "columnheader", children: [icon && !image?.src && (jsx(Img, { className: "h-16 w-16 min-w-16 min-h-16", image: icon, width: "64", height: "64" })), image?.src && jsx(Img, { image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs font-light font-medium py-s", children: link.text }) }) }))] })));
+    const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: style('w-80 box-border flex flex-col gap-m items-center rounded-t-md border-b-0 p-2xl', borderStyle, gradientStyle), role: "columnheader", children: [icon && !image?.src && (jsx(Img, { className: "h-16 w-16 min-w-16 min-h-16", image: icon, width: "64", height: "64" })), image?.src && jsx(Img, { image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs font-light font-medium py-s", children: link.text }) }) }))] })));
 
     const carouselContainerClassesMap = {
         comparison: 'flex gap-m duration-1000',
-        tariff: 'flex flex-grow duration-1000',
+        tariff: 'flex gap-5xl flex-grow duration-1000',
     };
     const TableCarouselContainer = JSX(({ children, activeIndex, columnWidth, version = 'comparison' }) => (jsx("div", { className: "flex flex-1 overflow-hidden", children: jsx("div", { className: carouselContainerClassesMap[version], style: { transform: `translateX(-${activeIndex * columnWidth}px)` }, children: children }) })));
 
     const TableRowContainer = JSX(({ children }) => (jsx("div", { className: "self-start flex flex-col", role: "row", children: jsx("div", { className: "flex gap-xl", children: children }) })));
 
-    const ComparisonTableColumnHeaders = JSX(({ colHeaders, activeIndex }) => (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES$1, role: "columnheader" }), jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$2, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header }, String(i)))) })] })));
+    const ComparisonTableColumnHeaders = JSX(({ colHeaders, activeIndex }) => (jsxs(TableRowContainer, { children: [jsx("div", { className: firstCellStyle$1, role: "columnheader" }), jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$2, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header }, String(i)))) })] })));
 
     const TableCell = JSX(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
-        const cellWrapperClasses = `w-80 box-border flex flex-col ${BORDER_CLASSES} ${!isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md'} ${isFillGradient ? GRADIENT : ''}`;
-        const cellClasses = `mx-2xl h-full ${DIVIDER_CLASSES$1} ${isFillGradient && isFirstRow ? 'border-t' : ''} ${!isLastRow ? 'border-solid' : 'border-b-0'}`;
-        return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { className: cellClasses, children: cell.map((item, i) => renderCellInner$1(item, i, isFillGradient)) }) }));
+        const cellWrapperStyle = style('w-80 box-border flex flex-col', borderStyle, !isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md', isFillGradient ? gradientStyle : '');
+        const cellStyle = style('mx-2xl h-full', dividerStyle$1, isFillGradient && isFirstRow ? 'border-t' : '', !isLastRow ? 'border-solid' : 'border-b-0');
+        return (jsx("div", { className: cellWrapperStyle, role: "cell", children: jsx("div", { className: cellStyle, children: cell.map((item, i) => renderCellInner$1(item, i, isFillGradient)) }) }));
     });
     const labelStyle = (isFillGradient = false) => `text-xl m-0 ${isFillGradient ? 'text-white' : ''}`;
     const descriptionStyle = (isFillGradient = false) => `text-s opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`;
     const renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-2xl pt-xl last:pb-2xl", children: [label ? jsx("h4", { className: labelStyle(isFillGradient), children: label }) : null, description ? jsx("div", { className: descriptionStyle(isFillGradient), children: description }) : null] }, String(i)));
 
-    const titleStyle = (isLastRow = false) => `text-s py-2xl ${DIVIDER_CLASSES$1} ${FIRST_CELL_CLASSES$1} ${isLastRow ? 'border-b-0' : 'border-solid'}`;
+    const titleStyle = (isLastRow = false) => style('text-s py-2xl', dividerStyle$1, firstCellStyle$1, isLastRow ? 'border-b-0' : 'border-solid');
     const TableRow = JSX(({ row: { header, data }, activeIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (jsxs(TableRowContainer, { children: [header?.title ? jsx("div", { className: titleStyle(isLastRow), children: header.title }) : null, data?.length ? (jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$2, children: data.map((cell, i) => (jsx(TableCell, { cell: cell, isFirstRow: isFirstRow, isLastRow: isLastRow, isFillGradient: isColoredFirstColumn && i === 0 }, String(i)))) })) : null] })));
 
     const ComparisonTableRows = JSX(({ rowData, isColoredFirstColumn, activeIndex, controls }) => {
@@ -2919,12 +2996,43 @@
                     ? renderShowMoreToggleButton({ isShowAllRow, onClick: handleToggle })
                     : null] }));
     });
-    const renderShowMoreToggleButton = ({ isShowAllRow, onClick, }) => (jsx("div", { className: "pr-6xl", children: jsxs("div", { className: "flex gap-m w-full", children: [jsx("div", { className: FIRST_CELL_CLASSES$1 }), jsx("button", { onClick: onClick, className: "py-xs flex-1 border-gray border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main", children: jsx(Text, { size: "text-xs", font: "font-medium", children: !isShowAllRow ? 'Показать все параметры' : 'Скрыть' }) })] }) }));
+    const renderShowMoreToggleButton = ({ isShowAllRow, onClick, }) => (jsx("div", { className: "pr-6xl", children: jsxs("div", { className: "flex gap-m w-full", children: [jsx("div", { className: firstCellStyle$1 }), jsx("button", { onClick: onClick, className: "py-xs flex-1 border-gray border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main", children: jsx(Text, { size: "text-xs", font: "font-medium", children: !isShowAllRow ? 'Показать все параметры' : 'Скрыть' }) })] }) }));
 
     const ContactsBlock = JSX(({ className, contacts, info, version = 'secondary', ...rest }) => (jsxs(BlockWrapper, { className: style('flex', className), defaultPadding: "p-6xl", version: version, ...rest, children: [info?.length ? renderBlocks(info) : null, contacts?.length ? renderBlocks(contacts) : null] })));
     const renderBlocks = (info) => (jsx("div", { className: "flex gap-5xl grow basis-0", children: info.map((column, index) => renderBlocksColumn({ column, index })) }));
     const renderBlocksColumn = ({ column, index }) => column ? (jsx("div", { className: "flex flex-col gap-xl grow basis-0", children: column.map(({ title = '', description, additionalDescription, button }, key) => (jsxs("div", { children: [jsx(Headline, { title: title, description: description, headlineVersion: "XS", align: "text-left", isEmbedded: true }), additionalDescription ? (jsx("div", { className: "mt-xs opacity-80", children: jsx(Paragraph, { size: "text-m", font: "font-light", children: additionalDescription }) })) : null, button?.href ? jsx(Button, { className: "mt-xl", ...button }) : null] }, String(key)))) }, `col-${String(index)}`)) : null;
 
+    const TextWithIcon = JSX(({ textNode, iconNode, tag, onClick, justifyContent = 'between', className, ...rest }) => {
+        const Tag = tag;
+        return (jsxs(Tag, { tag: tag, className: style('flex items-center w-full gap-1', justifyContent === 'between' ? 'justify-between' : 'justify-center', className), onClick: onClick, ...rest, children: [textNode ? jsx("div", { children: textNode }) : null, iconNode ? jsx("div", { children: iconNode }) : null] }));
+    });
+
+    const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => (jsx(TextWithIcon, { tag: "button", onClick: onClick, disabled: disabled, "data-theme": dataTheme, justifyContent: "center", className: style('py-4 border border-transparent outline-none focus:border-primary-text', disabled
+            ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
+            : 'bg-primary-main text-white hover:bg-primary-hove', className), textNode: jsx("span", { className: "text-h4 pr-s", children: label }), iconNode: icon ? (jsx(Img, { image: {
+                icon,
+                iconVersion: 'white',
+            }, className: "my-auto", width: "20", height: "20" })) : null })));
+    const renderDefaultFoldButton = ({ isUnfolded, onToggle }) => {
+        const labels = ['Развернуть', 'Скрыть'];
+        const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
+        return (jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
+    };
+
+    const ICONS = ['ArrowDownIcon', 'ArrowUpIcon'];
+    const resultsGridStyle = 'space-y-px lg:space-y-0 lg:grid lg:grid-cols-12 gap-2xs border-box';
+    const BaseFiltrationInner = JSX(({ label = '', blocksToRender = [], topItemsCount = 0, block, notFound, ...rest }) => {
+        const [visibleBlocks, hiddenBlocks] = topItemsCount > 0
+            ? [blocksToRender.slice(0, topItemsCount), blocksToRender.slice(topItemsCount)]
+            : [blocksToRender, []];
+        return (jsxs("div", { children: [jsx("div", { className: style(blocksToRender.length ? 'hidden' : 'block'), children: notFound ? renderNotFound(notFound) : null }), jsxs("div", { className: style('space-y-2xs', blocksToRender.length ? '' : 'hidden'), children: [jsx("div", { className: style(resultsGridStyle), children: renderBlocksList(visibleBlocks, { ...rest.options, parent: block }) }), jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => {
+                                return (jsx(FoldableSection, { className: style(resultsGridStyle), isUnfolded: isUnfolded, children: renderBlocksList(hiddenBlocks, { ...rest.options, parent: block }) }));
+                            }, renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(DefaultFoldButton, { className: style(topItemsCount < 1 ? 'hidden' : ''), disabled: !hiddenBlocks?.length, label: label, icon: ICONS[Number(isUnfolded)], dataTheme: rest.options?.page?.colorPalette, onClick: onToggle })) })] })] }));
+    });
+    function renderNotFound({ title, description }) {
+        return (jsx("div", { className: "bg-white py-20", children: jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true }) }));
+    }
+
     const isEmpty = (v) => v === null ||
         v === undefined ||
         v === '' ||
@@ -2938,14 +3046,17 @@
     const isNumberFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) ||
         isEmpty(target[key]) ||
         naturalNumber(pattern[key]) <= naturalNumber(target[key]);
+    const isMultipleNumberFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) || isEmpty(target[key]) || target[key]?.includes(pattern[key]);
     const isValueInRange = (key, pattern) => (target) => isEmpty(pattern[key]) ||
         isEmpty(target[key]) ||
         (naturalNumber(pattern[key]?.min) >= naturalNumber(target[key]?.min) &&
             naturalNumber(pattern[key]?.min) <= naturalNumber(target[key]?.max));
-    const checkShouldRenderBlock = (pattern, target) => Object.entries(pattern)
+    const shouldRenderBlock = (pattern, target) => Object.entries(pattern)
         .map(([key, subPattern]) => {
         if (typeof subPattern === 'number') {
-            return isNumberFieldMatch(key, pattern);
+            return Array.isArray(target[key])
+                ? isMultipleNumberFieldMatch(key, pattern)
+                : isNumberFieldMatch(key, pattern);
         }
         if (typeof subPattern === 'object' && 'min' in subPattern && 'max' in subPattern) {
             return isValueInRange(key, pattern);
@@ -2957,34 +3068,7 @@
         .every((predicate) => predicate(target));
     const naturalNumber = (n) => Number(n || 0);
 
-    const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => {
-        return (jsxs("button", { className: style('flex justify-center w-full py-4 border border-transparent outline-none focus:border-primary-text', disabled
-                ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
-                : 'bg-primary-main text-white hover:bg-primary-hove', className), onClick: onClick, disabled: disabled, "data-theme": dataTheme, children: [jsx("span", { className: "text-h4 pr-s", children: label }), icon ? (jsx(Img, { image: {
-                        icon,
-                        iconVersion: 'white',
-                    }, className: "flex-shrink-0 my-auto", width: "20", height: "20" })) : null] }));
-    });
-    const renderDefaultFoldButton = ({ isUnfolded, onToggle }) => {
-        const labels = ['Развернуть', 'Скрыть'];
-        const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
-        return (jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
-    };
-
-    const ICONS = ['ArrowDownIcon', 'ArrowUpIcon'];
-    const resultsGridStyle = 'space-y-px lg:space-y-0 lg:grid lg:grid-cols-12 gap-2xs border-box';
-    const BaseFiltrationInner = JSX(({ label = '', filtrationState = {}, topItemsCount = 0, block, notFound, ...rest }) => {
-        const blocksToRender = block?.blocks?.filter((b) => checkShouldRenderBlock(filtrationState, b.content || {})) || [];
-        const [visibleBlocks, hiddenBlocks] = topItemsCount > 0
-            ? [blocksToRender.slice(0, topItemsCount), blocksToRender.slice(topItemsCount)]
-            : [blocksToRender, []];
-        return (jsxs("div", { children: [jsx("div", { className: style(blocksToRender.length ? 'hidden' : 'block'), children: notFound ? renderNotFound(notFound) : null }), jsxs("div", { className: style('space-y-2xs', blocksToRender.length ? '' : 'hidden'), children: [jsx("div", { className: style(resultsGridStyle), children: renderBlocksList(visibleBlocks, { ...rest.options, parent: block }) }), jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => {
-                                return (jsx(FoldableSection, { className: style(resultsGridStyle), isUnfolded: isUnfolded, children: renderBlocksList(hiddenBlocks, { ...rest.options, parent: block }) }));
-                            }, renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(DefaultFoldButton, { className: style(topItemsCount < 1 ? 'hidden' : ''), disabled: !hiddenBlocks?.length, label: label, icon: ICONS[Number(isUnfolded)], dataTheme: rest.options?.page?.colorPalette, onClick: onToggle })) })] })] }));
-    });
-    function renderNotFound({ title, description }) {
-        return (jsx("div", { className: "bg-white py-20", children: jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true }) }));
-    }
+    const getBlocksToRender = (blocks, filtrationState) => (normalize = identity) => blocks && blocks.filter((b) => shouldRenderBlock(filtrationState, normalize(b.content || {})));
 
     const SlideCheckboxGroup = JSX(({ value, onChange, items = [], multiple }) => {
         const handleChange = (newValue) => {
@@ -3002,7 +3086,7 @@
         return items.map((item) => (jsx(SlideCheckbox, { text: item.title, value: [value].flatMap((_) => _).includes(item.value), onChange: () => handleChange(item.value), type: multiple ? 'checkbox' : 'radio' }, item.value)));
     });
 
-    const renderFiltrationForm = ({ field, reset, filtrationSchema, resetButton, children, }) => (jsxs("form", { className: "flex flex-col @4xl:flex-row justify-between bg-white p-4xl gap-s @4xl:gap-0", children: [jsxs("div", { className: "flex flex-col @4xl:flex-row gap-5xl", children: [children, Object.entries(filtrationSchema).map(renderFormItem(field))] }), resetButton ? (jsx("div", { children: jsx(Button, { className: "w-full @4xl:w-72 @4xl:ml-s", onClick: reset, ...resetButton }) })) : null] }));
+    const renderFiltrationForm$1 = ({ field, reset, filtrationSchema, resetButton, children, }) => (jsxs("form", { className: "flex flex-col @4xl:flex-row justify-between bg-white p-4xl gap-s @4xl:gap-0", children: [jsxs("div", { className: "flex flex-col @4xl:flex-row gap-5xl", children: [children, Object.entries(filtrationSchema).map(renderFormItem(field))] }), resetButton ? (jsx("div", { children: jsx(Button, { className: "w-full @4xl:w-72 @4xl:ml-s", onClick: reset, ...resetButton }) })) : null] }));
     const renderFormItem = (field) => ([key, item]) => {
         const type = item?.type;
         switch (type) {
@@ -3018,8 +3102,35 @@
         return (jsxs("div", { children: [item?.title ? (jsx("div", { className: "mb-m", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: item.title }) })) : null, jsx(SlideCheckboxGroup, { items: options, multiple: true, ...field(key) })] }, key));
     };
 
-    const DEFAULT_MIN_MONTHS = 3;
-    const DEFAULT_MAX_MONTHS = 60;
+    const getPeriod = (source, content) => source[content?.sourceBook]?.rateRows
+        .map((el) => el.minMonths)
+        .filter((minMonths) => minMonths !== undefined);
+
+    async function fetchMultitudeJSON(...urls) {
+        const fetchPromises = urls.map((url) => fetchJSON(url));
+        return await Promise.all(fetchPromises);
+    }
+
+    const unique = (list) => [...new Set(list)];
+
+    const getChildSourceBook = (blocks) => blocks?.filter(hasSourceBook).map(({ content: { sourceBook } }) => sourceBook);
+    const hasSourceBook = (block) => Boolean(block && block.content && typeof block.content.sourceBook === 'string');
+
+    function useDepositsPeriods(blocks) {
+        const { dirs = [], source = [] } = useMemo(() => {
+            const sourceBooks = getChildSourceBook(blocks);
+            return { dirs: sourceBooks?.map((url) => `/wcms-resources/${url}.json`), source: sourceBooks };
+        }, [blocks]);
+        const { data = [] } = useAsyncData(dirs, fetchMultitudeJSON);
+        return {
+            source: Object.fromEntries(zip(source, data).filter(([, sourceData]) => Boolean(sourceData))),
+            months: unique(data
+                .flatMap((item) => item?.rateRows || [])
+                .filter((row) => typeof row.minMonths === 'number' && row.minMonths === row.maxMonths)
+                .map((row) => row.minMonths)).sort((a, b) => a - b) || [],
+        };
+    }
+
     const DEFAULT_MIN_SUM = 500;
     const DEFAULT_MAX_SUM = 1000000000;
     const initialFiltrationState$1 = {
@@ -3027,79 +3138,38 @@
             min: 10000,
             max: DEFAULT_MAX_SUM,
         },
-        period: {
-            min: 3,
-            max: 36,
-        },
+        period: 3,
     };
     const DepositFiltration = JSX(({ className, filtrationSchema = {}, resetButton, sumInput, periodInput, ...rest }) => {
+        const { source, months } = useDepositsPeriods(rest.block?.blocks);
         const [filtrationState, { field, reset }] = useForm(initialFiltrationState$1);
-        const maxPeriodValue = periodInput?.max || DEFAULT_MAX_MONTHS;
+        const blocksToRender = getBlocksToRender(rest.block?.blocks, filtrationState)((content) => ({ ...content, period: getPeriod(source, content || {}) || [] }));
         const Inputs = (jsxs("div", { children: [jsx(CurrencyInput, { label: sumInput?.title, min: DEFAULT_MIN_SUM, max: DEFAULT_MAX_SUM, ...field('sum', {
                         parse: (min) => ({ min: Number(min), max: DEFAULT_MAX_SUM }),
                         format: ({ min }) => String(min),
-                    }) }), jsx(InputRange, { title: periodInput?.title, items: ['От 3 мес', 'До 5 лет'], min: periodInput?.min || DEFAULT_MIN_MONTHS, max: maxPeriodValue, ...field('period', {
-                        parse: (min) => ({ min, max: maxPeriodValue }),
-                        format: ({ min }) => min,
-                    }) })] }));
-        return (jsxs(BlockWrapper, { className: style('space-y-2xs', className), defaultPadding: "p-0", version: "transparent", ...rest, children: [renderFiltrationForm({ field, reset, filtrationSchema, resetButton, children: Inputs }), jsx(BaseFiltrationInner, { filtrationState: filtrationState, ...rest })] }));
+                    }) }), jsx(InputRange, { title: periodInput?.title, items: ['От 3 мес', 'До 5 лет'], list: months, ...field('period') })] }));
+        return (jsxs(BlockWrapper, { className: style('space-y-2xs', className), defaultPadding: "p-0", version: "transparent", ...rest, children: [renderFiltrationForm$1({ field, reset, filtrationSchema, resetButton, children: Inputs }), jsx(BaseFiltrationInner, { blocksToRender: blocksToRender, ...rest })] }));
     });
+    const sourceBookSchema = {
+        type: 'string',
+        title: 'Адрес справочника',
+    };
     DepositFiltration.childrenTypes = ['ProductTile'];
-    DepositFiltration.childSchema = (content) => content?.filtrationSchema || {};
+    DepositFiltration.childSchema = (content) => ({
+        ...(content?.filtrationSchema || {}),
+        sourceBook: sourceBookSchema,
+    });
 
     const renderErrorContent = (error) => {
         if (error?.contentType === 'Image' && error?.image) {
             return jsx(Img, { image: error.image });
         }
         if (error?.contentType === 'Code' && error.code) {
-            return jsx("div", { className: "font-mohave text-title-extra gradient-color-text", children: error.code });
+            return (jsx("div", { className: "font-mohave text-title-large sm:text-title-extra gradient-color-text", children: error.code }));
         }
         return null;
     };
-    const ErrorBlock = JSX(({ className = '', title, description, error, button, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col gap-2xl justify-center items-center', className), defaultPadding: style('p-6xl'), version: "transparent", ...rest, children: [jsx("div", { className: "flex justify-center", children: renderErrorContent(error) }), jsx(Headline, { title: title, description: description, headlineVersion: "XL", isEmbedded: true }), button?.text ? jsx(Button, { version: button?.version, text: button?.text, ...button }) : null] })));
-
-    var Currencies;
-    (function (Currencies) {
-        Currencies["EUR"] = "EUR";
-        Currencies["USD"] = "USD";
-        Currencies["GBP"] = "GBP";
-        Currencies["AUD"] = "AUD";
-        Currencies["CNY"] = "CNY";
-        Currencies["RUB"] = "RUB";
-    })(Currencies || (Currencies = {}));
-
-    const CURRENCY_ICONS_MAP$1 = {
-        USD: 'DollarIcon',
-        EUR: 'EuroIcon',
-        GBP: 'DollarIcon',
-        AUD: 'DollarIcon',
-        CNY: 'DollarIcon',
-        RUB: 'RoundRubleIcon',
-    };
-    const renderCurrencyRow$1 = ({ title, buyPrice, buyDifference, sellPrice, sellDifference, buyOfficeName, sellOfficeName, }) => {
-        return (jsxs("tr", { className: "pb-2xs text-h6", children: [jsx("td", { className: "pt-m", children: jsxs("div", { className: "flex items-center", children: [title ? (jsx(Img, { image: { icon: CURRENCY_ICONS_MAP$1[title] }, width: "24", height: "24" })) : null, jsx("span", { className: "ml-xs", children: title })] }) }), renderCurrency(buyPrice, buyDifference), renderCurrency(sellPrice, sellDifference), renderOffice(buyPrice, buyOfficeName), renderOffice(sellPrice, sellOfficeName)] }, title));
-    };
-    const formatCurrency$1 = (value) => (value ? currencyNumberFormat$1.format(value) : '');
-    const renderCurrency = (price, difference) => {
-        return (jsxs("td", { className: "pt-m pl-5xl", children: [jsx("div", { children: formatCurrency$1(price) }), jsx("div", { className: style('font-normal text-sm text-secondary-text', (difference || 0) >= 0 ? 'text-green' : 'text-red'), children: formatCurrency$1(difference) })] }));
-    };
-    const renderOffice = (price, officeName = '') => {
-        return (jsxs("td", { className: "pt-m pl-5xl", children: [jsx("div", { children: formatCurrency$1(price) }), jsx("div", { className: "font-normal text-sm text-green", children: officeName })] }));
-    };
-    const currencyNumberFormat$1 = new Intl.NumberFormat('ru', {
-        style: 'currency',
-        currency: Currencies.RUB,
-    });
-
-    const renderTableHeader = (title) => {
-        return (jsx("th", { className: "pl-5xl", children: jsx(Text, { size: "text-m", font: "font-light", align: "text-left", color: "text-secondary-text", children: title }) }));
-    };
-
-    const ExchangeRateOffice = JSX(({ className, currencies = [], actuality = '', officeName = '', ...rest }) => {
-        const fourRates = topNRates(currencies, 4);
-        return (jsxs(BlockWrapper, { className: style('space-y-3xl', className), ...rest, children: [jsxs("div", { className: "flex flex-row flex-grow-0 justify-between space-y-lg", children: [jsx(Heading, { headingType: "h4", title: 'Курс обмена валют в ' + officeName, className: "whitespace-pre-wrap text-h4" }), jsx("div", { className: "pl-6xl", children: jsx(Text, { size: "text-m", font: "font-light", align: "text-left", color: "text-secondary-text", children: actuality }) })] }), jsx("div", { className: "flex flex-row pt-m text-left", children: fourRates.length > 0 ? (jsxs("table", { className: style('h-fit w-fit', className), children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { children: jsx(Text, { size: "text-m", font: "font-light", align: "text-left", color: "text-secondary-text", children: "\u0412\u0430\u043B\u044E\u0442\u0430" }) }), renderTableHeader('Купить'), renderTableHeader('Продать'), renderTableHeader('Лучшая покупка'), renderTableHeader('Лучшая продажа')] }) }), jsx("tbody", { children: fourRates.map((item) => renderCurrencyRow$1(item)) })] })) : null })] }));
-    });
-    const topNRates = (rates, n) => rates.sort((a, b) => Number(a.id) - Number(b.id)).slice(0, n);
+    const ErrorBlock = JSX(({ className = '', title, description, error, button, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col justify-center items-center', className), defaultPadding: style('p-6xl'), version: "transparent", ...rest, children: [jsx("div", { className: "flex justify-center", children: renderErrorContent(error) }), jsx(Headline, { title: title, description: description, headlineVersion: "XL", isEmbedded: true, className: "mb-2xl last:mb-0" }), button?.text ? jsx(Button, { version: button?.version, text: button?.text, ...button }) : null] })));
 
     var Currency;
     (function (Currency) {
@@ -3314,18 +3384,13 @@
         return (jsxs("div", { className: style('font-sans relative', className), role: "form", children: [jsx("div", { className: "absolute h-full flex items-center pl-m pointer-events-none", children: jsx(Img, { image: { icon: 'LoupeIcon', iconVersion: 'black' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-12 w-full px-10 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 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])]);
+    function useDebouncedEffect(effect, deps, delay = 300) {
+        useEffect(() => {
+            const timerId = globalThis.setTimeout(effect, delay);
+            return () => {
+                globalThis.clearTimeout(timerId);
+            };
+        }, deps);
     }
 
     const joinMaps = (aggregate, emptyVal) => (acc, map) => {
@@ -3614,6 +3679,11 @@
         return result;
     };
 
+    const SearchBar = JSX(({ className, searchTerm, onSearch }) => {
+        return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsx("div", { className: "absolute rounded h-full flex items-center justify-center pl-m max-w-44 gap-s pointer-events-none", children: searchTerm ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text `, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0444\u0438\u043B\u0438\u0430\u043B\u0430\u043C" })) }), jsx("input", { id: "search-bar-input", className: `h-12 pl-m w-full peer text-l text-black border border-solid rounded-md box-border
+              outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text`, value: searchTerm, onChange: (e) => onSearch(e.target.value.toLowerCase()), type: "text", name: "location-search-bar-input" })] }));
+    });
+
     const renderForeignOffices = (foreignOffices) => foreignOffices?.length ? (jsxs("div", { className: "border-t border-main-divider mt-2xs pt-2xs", children: [jsx("div", { className: "mb-m", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: "\u041F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435\u043B\u044C\u0441\u0442\u0432\u0430 \u0437\u0430 \u0440\u0443\u0431\u0435\u0436\u043E\u043C:" }) }), jsx("div", { className: "flex gap-5xl", children: foreignOffices.map((office, i) => (jsx(ForeignOffice, { ...office }, String(i)))) })] })) : null;
     const ForeignOffice = JSX(({ icon, ...rest }) => {
         const link = useLink();
@@ -3627,11 +3697,6 @@
 
     const renderRegionGroup = (onChangeLocation) => ([letter, regions]) => (jsxs("div", { className: "break-inside-avoid mb-2xl w-56", children: [jsx("div", { className: "mb-s", children: jsx(Text, { size: "text-h6", children: letter }) }), regions.map(renderRegion(onChangeLocation))] }, letter));
 
-    const SearchBar = JSX(({ className, searchTerm, onSearch }) => {
-        return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsx("div", { className: "absolute rounded h-full flex items-center justify-center pl-m max-w-44 gap-s pointer-events-none", children: searchTerm ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text `, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0444\u0438\u043B\u0438\u0430\u043B\u0430\u043C" })) }), jsx("input", { id: "search-bar-input", className: `h-12 pl-m w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text`, value: searchTerm, onChange: (e) => onSearch(e.target.value.toLowerCase()), type: "text", name: "location-search-bar-input" })] }));
-    });
-
     const SEARCH_TERM_MIN_LENGTH = 3;
     const LocationDialog = JSX(() => {
         const { defaultLocation, foreignOffices } = useSitemap();
@@ -3997,17 +4062,17 @@
         return (jsx("div", { role: "listitem", children: jsx(LinkDocItem, { text: docBlockDef?.text, target: docBlockDef?.target, href: href, fileSize: fileSize, icon: icon ? jsx(Img, { className: linkIconStyle, image: icon, width: "24", height: "24" }) : null }) }, String(i)));
     };
 
-    const renderDescription$1 = (description) => description ? (jsx("div", { className: "mb-lg pt-3xs", children: jsx(Text, { size: "text-xl", "font-weight": "light", children: description }) })) : null;
+    const renderDescription$1 = (description) => description ? (jsx("div", { className: "mb-lg pt-3xs", children: jsx(Text, { size: "text-xl", "font-weight": "font-light", children: description }) })) : null;
 
-    const renderList$1 = (items) => {
-        return items?.length ? (jsx(List, { items: items, className: "text-l font-light" })) : (jsx("span", { className: "text-m font-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 renderList$1 = (items, listItemSize) => {
+        return items?.length ? (jsx(List, { items: items, listItemSize: listItemSize, className: "text-l font-light" })) : (jsx("span", { className: "text-m font-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 buttonsConditionStyle = (buttons) => renderButtonsSection(buttons, { isVertical: false });
 
-    const MobileAppTile = JSX(({ className, padding, alignTitle = 'left', buttons = [], description, headingType = 'h4', image, items, qr, title = 'Мобильное приложение', version = 'primary', ...rest }) => {
+    const MobileAppTile = JSX(({ className, padding, align = 'text-left', buttons = [], description, headingType = 'h4', image, items, listItemSize, qr, title = 'Мобильное приложение', version = 'primary', ...rest }) => {
         const containerStyle = version === 'secondary' ? 'p-m min-w-32' : 'min-w-24';
-        return (jsx(BlockWrapper, { className: style('min-h-80', className), padding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-6xl", title: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', AlignText[alignTitle]) })) : null, rightImage: image?.src ? jsx(Img, { className: "hidden lg:block", image: image }) : null, buttons: buttonsConditionStyle(buttons), children: [renderDescription$1(description), jsxs("div", { className: "flex flex-1 flex-wrap gap-m 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), image?.src ? jsx(Img, { className: "lg:hidden", image: image }) : null] })] }) }));
+        return (jsx(BlockWrapper, { className: style('min-h-80', className), padding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-6xl", title: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', align) })) : null, rightImage: image?.src ? jsx(Img, { className: "hidden lg:block", image: image }) : null, buttons: buttonsConditionStyle(buttons), children: [renderDescription$1(description), jsxs("div", { className: "flex flex-1 flex-wrap gap-m 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, listItemSize), image?.src ? jsx(Img, { className: "lg:hidden", image: image }) : null] })] }) }));
     });
 
     const badgeBgStyleMap = {
@@ -4018,11 +4083,11 @@
         primary: 'text-white',
         secondary: 'text-secondary-text',
     };
-    const Badge = JSX(({ count, version = 'secondary' }) => {
+    const Badge$1 = JSX(({ count, version = 'secondary' }) => {
         return (jsx("div", { className: style('w-6 h-6 rounded-full flex items-center justify-center', badgeBgStyleMap[version]), children: jsx(Text, { size: "text-xs", color: badgeTextColorStyleMap[version], children: count }) }));
     });
 
-    const getBadgeCount = (blocks = [], filter = {}) => blocks.filter(({ content = {} }) => checkShouldRenderBlock(filter, content)).length;
+    const getBadgeCount = (blocks = [], filter = {}) => blocks.filter(({ content = {} }) => shouldRenderBlock(filter, content)).length;
 
     const scalarCmp = (a, b) => a === b;
     const arrCmp = (cmp = scalarCmp) => (a, b) => a === b || Boolean(a && b && a.length === b.length && a.every((_, i) => cmp(_, b[i])));
@@ -4043,7 +4108,7 @@
         const activeItemIndex = useMemo(() => Math.max(0, hotFilters.findIndex((_) => hotFilterRecordCmp(_.filter, filtrationState))), [hotFilters, filtrationState]);
         const items = useMemo(() => hotFilters.map((_) => ({
             text: _.text,
-            appendRight: (jsx(Badge, { version: _ === hotFilters[activeItemIndex] ? 'primary' : 'secondary', count: getBadgeCount(blocks, _.filter) })),
+            appendRight: (jsx(Badge$1, { version: _ === hotFilters[activeItemIndex] ? 'primary' : 'secondary', count: getBadgeCount(blocks, _.filter) })),
         })), [hotFilters, blocks, activeItemIndex]);
         const handleChange = useCallback((_) => {
             onFiltrationStateChange(hotFilters[items.indexOf(_)].filter);
@@ -4111,6 +4176,7 @@
     };
     const MortgageFiltration = JSX(({ className, hotFilters, filtrationSchema = {}, resetButton, ...rest }) => {
         const [filtrationState, { field, reset, update: replaceFiltrationState }] = useForm(initialFiltrationState);
+        const blocksToRender = getBlocksToRender(rest.block?.blocks, filtrationState)();
         const handleFiltrationStateChange = useCallback((_ = initialFiltrationState) => replaceFiltrationState(_), []);
         const tabsControlProps = useHotFilters({
             hotFilters,
@@ -4118,36 +4184,29 @@
             blocks: rest.block?.blocks,
             onFiltrationStateChange: handleFiltrationStateChange,
         });
-        return (jsxs(BlockWrapper, { className: style('space-y-2xs', className), defaultPadding: "p-0", version: "transparent", ...rest, children: [jsx(TabsControl, { ...tabsControlProps }), renderFiltrationForm({ field, reset, filtrationSchema, resetButton }), jsx(BaseFiltrationInner, { filtrationState: filtrationState, ...rest })] }));
+        return (jsxs(BlockWrapper, { className: style('space-y-2xs', className), defaultPadding: "p-0", version: "transparent", ...rest, children: [jsx(TabsControl, { ...tabsControlProps }), renderFiltrationForm$1({ field, reset, filtrationSchema, resetButton }), jsx(BaseFiltrationInner, { blocksToRender: blocksToRender, ...rest })] }));
     });
     MortgageFiltration.childrenTypes = ['ProductTile'];
     MortgageFiltration.childSchema = (content) => content?.filtrationSchema || {};
 
-    const mockPoints = [
-        { coords: [55.77, 37.46], text: 'Трактир' },
-        { coords: [55.66, 37.48], text: 'Трактор' },
-        { coords: [55.65, 37.42], text: 'Ресторан' },
-        { coords: [55.64, 37.54], text: 'Музей' },
-        { coords: [55.54, 37.52], text: 'Библиотека' },
-        { coords: [55.53, 37.56], text: 'Школа' },
-        { coords: [55.61, 37.61], text: 'Аптека' },
-        { coords: [55.8, 37.58], text: 'Бар' },
-        { coords: [55.71, 37.35], text: 'Институт' },
-        { coords: [55.74, 37.57], text: 'Университет' },
-        { coords: [55.58, 37.69], text: 'Больница' },
-        { coords: [55.57, 37.7], text: 'Цирк' },
-        { coords: [55.55, 37.64], text: 'Магазин' },
-        { coords: [55.5, 37.75], text: 'Булочная' },
-        { coords: [55.81, 37.73], text: 'Полиция' },
-        { coords: [55.73, 37.68], text: 'Салон красоты' },
-        { coords: [55.86, 37.76], text: 'Баня' },
-        { coords: [55.38, 37.69], text: 'Гараж' },
-        { coords: [55.91, 37.5], text: 'Дом' },
-        { coords: [55.62, 37.32], text: 'Прачечная' },
-        { coords: [55.85, 37.41], text: 'Стадион' },
-        { coords: [55.67, 37.24], text: 'Вокзал' },
-        { coords: [55.79, 37.41], text: 'Кафе' },
-    ];
+    const styles$2 = {
+        focus: 'focus:border-primary-text focus:border',
+        hover: 'hover:bg-primary-hover',
+        active: 'active:bg-primary-active',
+        border: 'border-b border-b-2 border-gray last:border-0',
+        position: 'relative flex items-center justify-center',
+        font: 'text-center font-sans text-l',
+    };
+    // TODO: Добавить метод определения центральной точки
+    const ZoomButton = JSX(({ yandexMaps, direction = 'in' }) => {
+        const iconName = direction === 'in' ? 'PlusIcon' : 'MinusIcon';
+        const changeZoom = () => {
+            const currentZoom = yandexMaps.current.getZoom();
+            const newZoom = direction === 'in' ? currentZoom + 1 : currentZoom - 1;
+            yandexMaps.current.setZoom(newZoom, { checkZoomRange: true });
+        };
+        return (jsx("div", { onClick: changeZoom, className: `${Object.values(styles$2).join(' ')} bg-white select-none cursor-pointer w-12 h-12`, children: jsx(Icon, { name: iconName, width: "20", height: "16" }) }));
+    });
 
     function renderClusterer(yandexMaps, map, points) {
         map.geoObjects.removeAll();
@@ -4155,7 +4214,7 @@
         const clusterer = new yandexMaps.Clusterer({
             clusterIcons: [
                 {
-                    href: 'icons/MapMarkerClusterIcon.svg',
+                    href: '/icons/MapMarkerClusterIcon.svg',
                     size: [78, 84],
                     offset: [-35, -50],
                 },
@@ -4166,7 +4225,7 @@
         });
         const geoObjects = points.map((point) => new yandexMaps.Placemark(point, {}, {
             iconLayout: 'default#image',
-            iconImageHref: 'icons/MapMarkerSingleIcon.svg',
+            iconImageHref: '/icons/MapMarkerSingleIcon.svg',
             iconImageSize: [78, 84],
             iconImageOffset: [-35, -50],
         }));
@@ -4181,7 +4240,7 @@
         });
     }
 
-    const styles$3 = {
+    const styles$1 = {
         focus: 'focus:border-primary-text focus:border',
         hover: 'hover:bg-primary-hover',
         active: 'active:bg-primary-active',
@@ -4193,36 +4252,10 @@
         const getYandexMapUrl = () => {
             return `https://yandex.ru/maps/?ll=${[pointsCenter[1], pointsCenter[0]]}&z=10&l=map`;
         };
-        return (jsx("a", { className: `select-none cursor-pointer px-4xl h-12 bg-primary-main text-white ${Object.values(styles$3).join(' ')}`, href: getYandexMapUrl(), target: "_blank", children: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043D\u0430 \u043A\u0430\u0440\u0442\u0435" }));
-    };
-
-    const styles$2 = {
-        border: 'border border-transparent rounded-md',
-        position: 'relative flex items-center',
-        font: 'text-center font-sans',
-        shadow: 'shadow-[0_4px_25px_rgba(0,0,0,0.07)]',
-    };
-    const renderSearchField = (points, yandexMaps, updatePointsToRender) => {
-        const onChange = (e) => {
-            const value = e.target?.value ? e.target?.value.toLowerCase() : '';
-            if (value) {
-                const searchResult = points.filter((_) => {
-                    const textLowerCase = _.text.toLowerCase();
-                    if (textLowerCase.indexOf(value) > -1) {
-                        return _;
-                    }
-                    return null;
-                });
-                updatePointsToRender(searchResult);
-            }
-            else {
-                updatePointsToRender(null);
-            }
-        };
-        return (jsxs("div", { className: `${Object.values(styles$2).join(' ')} bg-white py-s pl-5xl pr-m w-full`, children: [jsx(Icon, { name: "LoupeIcon", iconVersion: "black", width: "20", height: "20", className: "absolute left-4" }), jsx("input", { type: "text", placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441 \u0438\u043B\u0438 \u043C\u0435\u0442\u0440\u043E", onChange: onChange, className: "border-0 focus:border-0 outline-0 w-full" })] }));
+        return (jsx("a", { className: `select-none cursor-pointer px-4xl h-12 bg-primary-main text-white ${Object.values(styles$1).join(' ')}`, href: getYandexMapUrl(), target: "_blank", children: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043D\u0430 \u043A\u0430\u0440\u0442\u0435" }));
     };
 
-    const styles$1 = {
+    const styles = {
         focus: 'focus:border-primary-text focus:border',
         hover: 'hover:bg-primary-hover',
         active: 'active:bg-primary-active',
@@ -4244,7 +4277,7 @@
                 map.geoObjects.add(result.geoObjects);
             });
         };
-        return (jsx("div", { className: `select-none cursor-pointer py-m w-12 bg-white ${Object.values(styles$1).join(' ')} ${className}`, onClick: setUserGeoLocation, children: jsx(Icon, { name: "UserGeoLocationIcon", width: "20", height: "16" }) }));
+        return (jsx("div", { className: `select-none cursor-pointer py-m w-12 bg-white ${Object.values(styles).join(' ')} ${className}`, onClick: setUserGeoLocation, children: jsx(Icon, { name: "UserGeoLocationIcon", width: "20", height: "16" }) }));
     };
 
     const YMAPS_NAMESPACE = 'ymaps';
@@ -4253,25 +4286,6 @@
         return useExternalNS(YMAPS_NAMESPACE, url);
     };
 
-    const styles = {
-        focus: 'focus:border-primary-text focus:border',
-        hover: 'hover:bg-primary-hover',
-        active: 'active:bg-primary-active',
-        border: 'border-b border-b-2 border-gray last:border-0',
-        position: 'relative flex items-center justify-center',
-        font: 'text-center font-sans text-l',
-    };
-    // TODO: Добавить метод определения центральной точки
-    const ZoomButton = JSX(({ yandexMaps, direction = 'in' }) => {
-        const iconName = direction === 'in' ? 'PlusIcon' : 'MinusIcon';
-        const changeZoom = () => {
-            const currentZoom = yandexMaps.current.getZoom();
-            const newZoom = direction === 'in' ? currentZoom + 1 : currentZoom - 1;
-            yandexMaps.current.setZoom(newZoom, { checkZoomRange: true });
-        };
-        return (jsx("div", { onClick: changeZoom, className: `${Object.values(styles).join(' ')} bg-white select-none cursor-pointer w-12 h-12`, children: jsx(Icon, { name: iconName, width: "20", height: "16" }) }));
-    });
-
     const FULLSCREEN_STYLES = {
         border: 'border border-transparent rounded-md ',
         position: 'absolute flex items-center justify-center',
@@ -4282,16 +4296,16 @@
         hover: 'hover:bg-primary-hover',
         other: 'select-none cursor-pointer',
     };
+    const DEFAULT_CENTER_COORDS = [55.753995, 37.614069];
     // TODO: Поле для поиска: невыяснено среди каких данных делать поиск (искать в имени офиса, в адресе, метро и т.д.).
     //       Сейчас реализован поиск среди тестовых данных
     // TODO: Также выяснить что делать когда ничего не найдено
     // TODO: На макетах также когда есть поле поиска нет кнопки открыть на карте.
-    const YandexMap = JSX(({ points, className = '', zoom = 5, showSearchField = false }) => {
+    const YandexMap = JSX(({ points, className = '', zoom = 5 }) => {
         const map = useRef(null);
         const yandexMaps = useYandexMaps();
         const [isFullScreen, setIsFullScreen] = useState();
-        const [pointsToRender, setPointsToRender] = useState(normalizePoints(mockPoints));
-        const pointsCenter = getCenterPoint(points);
+        const pointsCenter = points ? getCenterPoint(points) : DEFAULT_CENTER_COORDS;
         useEffect(() => {
             if (!map?.current) {
                 yandexMaps?.ready(() => {
@@ -4301,16 +4315,16 @@
                         controls: [],
                         suppressMapOpenBlock: true,
                     });
-                    renderClusterer(yandexMaps, map.current, pointsToRender);
+                    renderClusterer(yandexMaps, map.current, points);
                 });
             }
-        }, [yandexMaps, map, pointsToRender]);
-        useEffect(() => {
-            if (map.current && pointsToRender && yandexMaps) {
-                const newPoints = pointsToRender.length < 1 ? normalizePoints(mockPoints) : pointsToRender;
-                renderClusterer(yandexMaps, map.current, newPoints);
+            if (map.current && yandexMaps) {
+                renderClusterer(yandexMaps, map.current, points);
+                if (!points?.length) {
+                    map.current.setCenter(DEFAULT_CENTER_COORDS);
+                }
             }
-        }, [map, pointsToRender, yandexMaps]);
+        }, [yandexMaps, map, points]);
         if (!yandexMaps) {
             return null;
         }
@@ -4325,164 +4339,165 @@
             setIsFullScreen(container.isFullscreen());
         };
         const zIndex = isFullScreen ? 'z-[100000]' : 'z-10';
-        const updatePointsToRender = (newPoints) => {
-            if (newPoints) {
-                const normalizedPoints = normalizePoints(newPoints);
-                setPointsToRender(normalizedPoints);
-            }
-        };
-        return (jsxs("div", { id: "map", className: `${isFullScreen ? '' : 'relative'} w-full ${className}`, children: [jsx("div", { className: `absolute flex left-2 top-4 w-1/2 ${zIndex}`, children: showSearchField
-                        ? renderSearchField(mockPoints, yandexMaps, updatePointsToRender)
-                        : renderOpenMap(pointsCenter) }), jsx("div", { className: `${Object.values(FULLSCREEN_STYLES).join(' ')} ${zIndex} right-2 top-4 bg-white`, onClick: toggleFullscreen, children: jsx(Icon, { name: "FullScreenIcon", width: "16", height: "16" }) }), jsxs("div", { className: `absolute right-2 top-52 z-10 w-12 overflow-hidden border border-transparent rounded-md ${zIndex}`, children: [jsx(ZoomButton, { yandexMaps: map }), jsx(ZoomButton, { yandexMaps: map, direction: "out" })] }), renderUserGeolocation(map.current, yandexMaps, `right-2 top-80 ${zIndex}`)] }));
+        return (jsxs("div", { id: "map", className: style(!isFullScreen && 'relative', 'w-full', className), children: [jsx("div", { className: style('absolute flex left-2 top-4 w-1/2', zIndex), children: renderOpenMap(pointsCenter) }), jsx("div", { className: style(Object.values(FULLSCREEN_STYLES), zIndex, 'right-2 top-4 bg-white'), onClick: toggleFullscreen, children: jsx(Icon, { name: "FullScreenIcon", width: "16", height: "16" }) }), jsxs("div", { className: style('absolute right-2 top-52 z-10 w-12 overflow-hidden border border-transparent rounded-md', zIndex), children: [jsx(ZoomButton, { yandexMaps: map }), jsx(ZoomButton, { yandexMaps: map, direction: "out" })] }), renderUserGeolocation(map.current, yandexMaps, style('right-2 top-80', zIndex))] }));
     });
     const getCenterPoint = (points) => [
         getArraySumAndAverage(mapByIndex(points, 0)),
         getArraySumAndAverage(mapByIndex(points, 1)),
     ];
     const mapByIndex = (arr, index) => arr.map((a) => a[index]);
-    const getArraySumAndAverage = (arr) => arr.reduce((a, b) => a + b) / arr.length;
-    const normalizePoints = (points) => (points ? points.map((_) => _.coords) : null);
-
-    const OFFICE_MAP = {
-        id: 123,
-        branchType: {
-            id: 7,
-            code: '21',
-            name: 'Отделение на балансе филиала',
-        },
-        shortName: 'Ейский ДО',
-        name: 'ДО   №3349/3/05',
-        address: '353682, Краснодарский край, г.Ейск, ул.Гоголя, 349/ ул.Баррикадная, 42/1',
-        lawAddress: '353682, Краснодарский край, г.Ейск, ул.Гоголя, 349/ ул.Баррикадная, 42/1',
-        openDate: '2000-12-05',
-        closeDate: null,
-        bik: '040349536',
-        corAcc: '30101810700000000536',
-        registrationNumber: '3349/3/05',
-        phone: '+7(XXX)XXX-XX-XX',
-        fax: '+7(XXX)XXX-XX-XY',
-        okpo: '55105921',
-        ogrn: '1027700342890',
-        kpp: '231002002',
-        inn: '7725114488',
-        branchCode: '0305',
-        upperBranchCode: '0300',
-        timeZone: '+03:00',
-        exchangeRate: {
-            currencies: [
-                {
-                    buyExchangeRate: 0.0,
-                    saleExchangeRate: 0.0,
-                    currency: {
-                        id: 3,
-                        code: '156',
-                        currency: 'CNY',
-                        name: 'Китайский юань',
-                    },
-                },
-                {
-                    buyExchangeRate: 59.15,
-                    saleExchangeRate: 69.25,
-                    currency: {
-                        id: 2,
-                        code: '978',
-                        currency: 'EUR',
-                        name: 'Евро',
-                    },
-                },
-                {
-                    buyExchangeRate: 58.4,
-                    saleExchangeRate: 70.05,
-                    currency: {
-                        id: 1,
-                        code: '840',
-                        currency: 'USD',
-                        name: 'Американский доллар',
-                    },
-                },
-            ],
-            lastUpdate: '2022-11-11 03:56:17',
-        },
-        workSchedule: {
-            id: 413,
-            workTime: '09.00–16.30',
-            lunchHour: 'без перерыва',
-            workTimeSaturday: '09.00–15.00',
-            lunchHourSaturday: 'без перерыва',
-            workingMonday: false,
-            workingTuesday: false,
-            workingWednesday: true,
-            workingThursday: true,
-            workingFriday: true,
-            workingSaturday: true,
-            workingSunday: false,
-        },
-        gpsLatitude: 46.709744,
-        gpsLongitude: 38.260703,
-        range: null,
-        safeBoxCaseVolumes: null,
+    const getArraySumAndAverage = (arr) => arr.length && arr.reduce((a, b) => a + b) / arr.length;
+
+    const colorStyle = {
+        yellow: { border: 'border-yellow-light', text: 'text-yellow' },
+        green: { border: 'border-green-light', text: 'text-green-dark' },
+        gray: { border: 'border-gray', text: 'text-secondary-text' },
+        red: { border: 'border-error', text: 'text-error' },
     };
+    const Badge = JSX(({ className, children, color = 'gray' }) => (jsx("div", { className: style('p-s border border-gray rounded-md flex items-center', colorStyle[color].border, className), children: jsx(Text, { size: "text-m", color: colorStyle[color].text, children: children }) })));
 
-    // Добавлено для проверки
-    const nearbyOffices = [
-        { title: 'Деловой центр', time: '1 мин', distance: '~30 м.', icon: 'MetroIcon' },
-        { title: 'Выставочная', time: '5 мин', distance: '~120 м.', icon: 'MetroIcon' },
-        { title: 'Деловой центр', time: '8 мин', distance: '~350 м.', icon: 'MetroIcon' },
-    ];
+    const CardCell = JSX(({ className, label, value, subText, subColor }) => {
+        const textItems = value?.split(',') ?? [];
+        if (!textItems.length && !subText) {
+            return null;
+        }
+        return (jsxs("div", { className: style('flex gap-2xs flex-col h-full max-w-[300px]', className), children: [label ? (jsx(Text, { color: "text-secondary-text", font: "font-light", size: "text-m", children: label })) : null, textItems.filter(Boolean).map((text, i) => (jsx(Text, { size: "text-l", children: text.trim() }, String(i)))), subText ? (jsx(Text, { color: subColor, size: "text-m", children: subText })) : null] }));
+    });
+
+    const CardRow = JSX(({ className, children }) => (jsx("div", { className: style('flex border-t border-solid border-main-divider py-xl gap-x-6xl gap-y-xl', className), children: children })));
 
-    const renderCurrentDaySchedule = ({ lunchHour, status, workTime }) => {
-        const hasTime = /\d+/gi.test(lunchHour);
-        const lunchHourText = hasTime ? `Перерыв ${lunchHour}` : lunchHour;
-        return status ? (jsxs("div", { className: "flex gap-m", children: [jsx("div", { className: "p-s border rounded-md text-m flex items-center cursor-pointer text-primary-main border-green-light", children: workTime ? workTime : null }), jsx("div", { className: "p-s border rounded-md text-m flex items-center cursor-pointer text-yellow border-golden", children: lunchHour ? lunchHourText : null })] })) : (jsx("div", { className: "flex", children: jsx("div", { className: "p-s border rounded-md text-m flex items-center cursor-pointer text-error border-error", children: "\u0412\u044B\u0445\u043E\u0434\u043D\u043E\u0439" }) }));
-    };
-    const renderNearbyOffice = ({ icon, title, distance, time }, index) => (jsxs("div", { className: "flex mr-m", children: [jsx(Icon, { name: icon, width: "16", height: "16", className: "mr-xs" }), title ? jsxs(Text, { size: "text-m", children: [title, "\u00A0"] }) : null, jsxs(Text, { size: "text-m", font: "font-light", children: [distance ? ` (${distance})` : null, time ? `, ${time}` : null] })] }, `nearbyOffice${index}`));
-    const renderDay = ({ title, status, workTime, lunchHour, description }, inx) => (jsxs("div", { className: "flex flex-col gap-2xs pb-s border-b border-solid border-main-divider mb-s last:border-0", children: [jsxs("div", { className: "flex justify-between items-center w-full text-l text-primary-text", children: [jsx("div", { children: title }), status ? null : jsx("div", { className: "text-m font-light text-error", children: "\u0412\u044B\u0445\u043E\u0434\u043D\u043E\u0439" }), status && workTime ? jsx("div", { children: workTime }) : null] }), status && lunchHour ? renderLunchHour(lunchHour) : null, description ? (jsx("div", { className: "text-s font-light text-secondary-text", children: description })) : null] }, `day${inx}`));
-    const renderLunchHour = (lunchHour) => {
-        const hasTime = /\d+/gi.test(lunchHour);
-        return hasTime ? (jsxs("div", { className: "flex justify-between items-center w-full text-m font-light text-error", children: [jsx("div", { children: "\u041F\u0435\u0440\u0435\u0440\u044B\u0432" }), jsx("div", { children: lunchHour })] })) : (jsx("div", { className: "flex justify-between items-center w-full", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-main", children: lunchHour }) }));
-    };
-
-    const OfficeMap = JSX(({ className = '' }) => {
-        // TODO: useOfficeMap endpoint had use /api/v1/branches. This endpoint now is`t correct/
-        // TODO: useOfficeMap has return MOCK OBJECT!
-        // TODO: Fix this when endpoint /api/v1/branches (or new endpoint) had returning right data
-        const resultOfficeMap = OFFICE_MAP;
-        const { name, address, gpsLatitude, gpsLongitude, workSchedule } = resultOfficeMap;
-        const { workingMonday, workingTuesday, workingWednesday, workingThursday, workingFriday, workingSaturday, workingSunday, } = workSchedule;
-        const { workTime, lunchHour, workTimeSaturday, lunchHourSaturday } = workSchedule;
-        const point = gpsLatitude && gpsLongitude ? [gpsLatitude, gpsLongitude] : null;
-        const workScheduleWeek = [
-            { title: 'Понедельник', status: workingMonday, workTime, lunchHour },
-            { title: 'Вторник', status: workingTuesday, workTime, lunchHour },
-            { title: 'Среда', status: workingWednesday, workTime, lunchHour },
+    const renderAtmCard = ({ location, address, billAcceptorType, terminalType, billAcceptorEnable, atmCode = '', atmAccess = '', workTime, }, index) => {
+        const additionalInfo = [
+            {
+                label: 'Устройство',
+                value: capitalizedFirstLetter(terminalType),
+            },
+            { label: 'Модуль приема наличных', value: billAcceptorEnable ? 'Да' : 'Нет' },
             {
-                title: 'Четверг',
-                status: workingThursday,
-                workTime,
-                lunchHour: '13:00 - 14:00',
-                description: 'Не работает прием денег с 17:00 до 19:00', // Добавлено для проверки
+                label: 'Прием наличных пачкой',
+                value: billAcceptorType === 'банкомат принимает пачками' ? 'Да' : 'Нет',
             },
-            { title: 'Пятница', status: workingFriday, workTime, lunchHour },
             {
-                title: 'Суббота',
-                status: workingSaturday,
-                workTime: workTimeSaturday,
-                lunchHour: lunchHourSaturday,
+                label: 'Доступность',
+                value: ['внешняя установка', 'территория банка'].includes(atmAccess) ? 'Общедоступный' : '',
             },
-            { title: 'Воскресенье', status: workingSunday },
+            { label: 'Регистрационный номер', value: atmCode },
         ];
-        const currentWeekDayInd = new Date().getDay();
-        const currentWeekDay = currentWeekDayInd > 0 ? workScheduleWeek[currentWeekDayInd - 1] : workScheduleWeek[6];
-        return (jsxs("div", { className: `flex flex-col font-sans w-full ${className}`, children: [jsxs("div", { className: "flex flex-col gap-m p-6xl pb-3xl", children: [jsxs("div", { className: "flex justify-between", children: [jsx("div", { className: "text-h2", children: name }), renderCurrentDaySchedule(currentWeekDay)] }), jsxs("div", { className: "flex text-l font-light", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24", className: "pr-2xs" }), address] }), jsx("div", { className: "flex", children: nearbyOffices.map(renderNearbyOffice) })] }), jsxs("div", { className: "flex justify-between", children: [jsx("div", { className: "flex-grow h-full w-full overflow-hidden", children: point ? jsx(YandexMap, { points: [point], className: "h-full" }) : null }), jsx("div", { className: "w-[434px] min-w-[434px] p-6xl pt-0 flex flex-col", children: workScheduleWeek.map(renderDay) })] })] }));
+        return (jsxs("div", { className: "bg-white col-span-12 p-3xl border-green border", children: [jsxs("div", { className: "flex justify-between", children: [jsx(Text, { size: "text-h4", children: capitalizedFirstLetter(location) }), jsx(Badge, { color: "green", children: capitalizedFirstLetter(workTime) })] }), address ? (jsxs("div", { className: "flex pb-xl pt-xs gap-2xs", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24" }), jsx(Text, { size: "text-l", children: address })] })) : null, jsx(CardRow, { className: "flex-wrap", children: additionalInfo?.map(renderInfo) })] }, String(index)));
+    };
+    const renderInfo = (item, index) => (jsx(CardCell, { ...item }, String(index)));
+    const capitalizedFirstLetter = (text) => text ? `${text?.charAt(0)?.toUpperCase()}${text?.slice(1)}` : '';
+
+    const WEEKDAY_MAP = [
+        ['Понедельник', 'workingMonday'],
+        ['Вторник', 'workingTuesday'],
+        ['Среда', 'workingWednesday'],
+        ['Четверг', 'workingThursday'],
+        ['Пятница', 'workingFriday'],
+        ['Суббота', 'workingSaturday'],
+        ['Воскресенье', 'workingSunday'],
+    ];
+    const currentWeekDayIdx = new Date().getDay();
+    const renderOfficeCard = ({ name, address, phone, fax, phoneBusiness, phoneNatural, phoneCallCentre, phoneCurrencyControl, workSchedule, exchangeRate, }, index) => {
+        const workScheduleWeek = workSchedule ? getWorkScheduleWeek(workSchedule) : null;
+        const [currentWeekDay] = workScheduleWeek?.slice(currentWeekDayIdx - 1) ?? [];
+        return (jsxs("div", { className: "bg-white col-span-12 p-3xl border-green border", children: [jsxs("div", { className: "flex justify-between", children: [jsx(Text, { size: "text-h4", children: name }), renderCurrentDaySchedule(currentWeekDay)] }), address ? (jsxs("div", { className: "flex pb-xl pt-xs gap-2xs", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24" }), jsx(Text, { size: "text-l", children: address })] })) : null, jsxs(CardRow, { className: "flex-wrap", children: [jsx(CardCell, { label: "\u0424\u0430\u043A\u0441", value: fax }), jsx(CardCell, { label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D \u0444\u0438\u043B\u0438\u0430\u043B\u0430", value: phone }), jsx(CardCell, { label: "\u0414\u043B\u044F \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0439 \u044E\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446", value: phoneBusiness }), jsx(CardCell, { label: "\u041E\u0431\u0441\u043B\u0443\u0436\u0438\u0432\u0430\u043D\u0438\u0435 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446", value: phoneNatural }), jsx(CardCell, { label: "\u0414\u043B\u044F \u043A\u043E\u043D\u0441\u0443\u043B\u044C\u0442\u0430\u0446\u0438\u0439 \u043F\u043E \u0432\u0430\u043B\u044E\u0442\u043D\u043E\u043C\u0443 \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u044E", value: phoneCurrencyControl }), jsx(CardCell, { label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442-\u0446\u0435\u043D\u0442\u0440", value: phoneCallCentre })] }), workScheduleWeek?.length ? jsx(CardRow, { children: workScheduleWeek?.map(renderDay) }) : null, exchangeRate?.currencies?.length ? (jsx(CardRow, { className: "flex-wrap", children: exchangeRate?.currencies?.map(renderCurrency) })) : null] }, String(index)));
+    };
+    const getWorkScheduleWeek = (workSchedule) => WEEKDAY_MAP.map(([title, key]) => {
+        const dayOff = ['workingSaturday', 'workingSunday'].includes(key);
+        return {
+            title,
+            status: Boolean(workSchedule?.[key]),
+            workTime: dayOff ? workSchedule?.workTimeSaturday : workSchedule?.workTime,
+            lunchHour: dayOff ? workSchedule?.lunchHourSaturday : workSchedule?.lunchHour,
+            get hasLunch() {
+                return /\d+/.test(this.lunchHour ?? '');
+            },
+        };
     });
+    const renderCurrency = ({ currency, buyExchangeRate, saleExchangeRate }, i) => (jsxs("div", { className: "flex gap-lg h-full", children: [currency?.currency ? jsx(CardCell, { label: "\u0412\u0430\u043B\u044E\u0442\u0430", value: currency.currency }) : null, buyExchangeRate ? jsx(CardCell, { label: "\u041A\u0443\u043F\u0438\u0442\u044C", value: String(buyExchangeRate) }) : null, saleExchangeRate ? jsx(CardCell, { label: "\u041F\u0440\u043E\u0434\u0430\u0442\u044C", value: String(saleExchangeRate) }) : null] }, String(i)));
+    //TODO: Add logic time https://github.com/redneckz/wildless-cms-uni-blocks/pull/1549
+    const renderCurrentDaySchedule = (workScheduleWeek) => {
+        if (!workScheduleWeek) {
+            return null;
+        }
+        const { lunchHour, status, workTime, hasLunch } = workScheduleWeek;
+        return status ? (jsxs("div", { className: "flex gap-s", children: [workTime ? jsx(Badge, { color: "green", children: workTime }) : null, lunchHour && hasLunch ? jsx(Badge, { color: "yellow", children: lunchHour }) : null] })) : (jsx(Badge, { color: "red", children: "\u0412\u044B\u0445\u043E\u0434\u043D\u043E\u0439" }));
+    };
+    const renderDay = ({ title, status, workTime, lunchHour, hasLunch }, index) => (jsx(CardCell, { label: title, value: status && workTime ? workTime : '', subText: !status ? 'Выходной' : lunchHour, subColor: !status || hasLunch ? 'text-error' : 'text-green-dark' }, String(index)));
 
-    const OfficeServicesBlock = JSX(({ className = '', title, servicesList, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col gap-lg', className), ...rest, children: [title ? jsx(Heading, { headingType: "h5", title: title }) : null, servicesList?.length ? (jsx("ul", { className: "list-none space-y-lg", children: servicesList.map(renderListItems) })) : null] })));
-    const renderListItems = (itemList, i) => (jsxs("li", { className: "flex gap-s list-none ", children: [itemList.icon ? (jsx(Img, { className: "min-w-6 min-h-6 w-6 h-6", width: "24", height: "24", image: itemList.icon })) : null, itemList.label ? (jsx(Text, { size: "text-l", font: "font-light", children: itemList.label })) : null] }, `list_item_${String(i)}`));
+    const MAP_URL = {
+        offices: '/api/v1/branches',
+        atms: '/api/v1/atms',
+    };
+    const EMPTY_VALUE$1 = [];
+    function useOfficesAtmsMap(regionCode, type = 'offices') {
+        const { data } = useAsyncData(`${MAP_URL[type]}?regionCode=${regionCode}`, fetchMap);
+        return data || EMPTY_VALUE$1;
+    }
+    const fetchMap = async (url) => {
+        const result = await fetchJSON(url, { method: 'GET' });
+        return result || EMPTY_VALUE$1;
+    };
+
+    const INITIAL_FILTRATION_OFFICES_STATE = {
+        safeBoxCaseVolumes: false,
+        workingSaturday: false,
+    };
+    const INITIAL_FILTRATION_ATMS_STATE = {
+        terminalTypeAtms: true,
+        terminalTypeTerm: false,
+        workAllTime: false,
+        billAcceptorEnable: false,
+    };
+    const FILTRATION_LABELS = {
+        safeBoxCaseVolumes: 'Аренда индивидуальных сейфовых ячеек',
+        workingSaturday: 'Открыты по субботам',
+        terminalTypeAtms: 'Банкоматы',
+        terminalTypeTerm: 'Терминалы',
+        workAllTime: 'Круглосуточно',
+        billAcceptorEnable: 'Прием наличных',
+    };
+    const FILTRATION_BRANCHES_PREDICATES = {
+        safeBoxCaseVolumes: (item) => Boolean(item.safeBoxCaseVolumes),
+        workingSaturday: (item) => Boolean(item.workSchedule?.workingSaturday),
+    };
+    const FILTRATION_ATMS_PREDICATES = {
+        terminalTypeAtms: (item) => item.terminalType?.toLowerCase() === 'банкомат',
+        terminalTypeTerm: (item) => item.terminalType?.toLowerCase() === 'терминал',
+        workAllTime: (item) => item.workTime?.toLowerCase() === 'круглосуточно',
+        billAcceptorEnable: (item) => Boolean(item.billAcceptorEnable),
+    };
+    const OfficesAtmsMap = JSX(({ data, className = '', ...rest }) => {
+        const dataType = data?.dataType ?? 'offices';
+        const initialState = dataType === 'offices' ? INITIAL_FILTRATION_OFFICES_STATE : INITIAL_FILTRATION_ATMS_STATE;
+        const [filtrationState, { field, reset }] = useForm(initialState);
+        const [currentLocation] = useLocation();
+        const [regionCode, title] = useMemo(() => [currentLocation?.code || '000', getTitle(currentLocation?.name, dataType)], [currentLocation, dataType]);
+        const officesAtmsData = useOfficesAtmsMap(regionCode, dataType);
+        const filteredOfficesAtmsData = filterOfficesAtms(officesAtmsData, filtrationState);
+        const lengthOfficesAtms = filteredOfficesAtmsData.length;
+        const points = filteredOfficesAtmsData
+            .map((_) => [_.gpsLatitude, _.gpsLongitude].filter(Boolean))
+            .filter((_) => _ && _.length === 2);
+        return (jsxs(BlockWrapper, { version: "transparent", className: style('grid grid-cols-12 gap-1', className), defaultPadding: "p-0", ...rest, children: [jsxs("div", { className: "col-span-12 bg-white", children: [jsxs("div", { className: "pt-6xl px-6xl", children: [jsxs("div", { className: "flex gap-2 pb-2xl", children: [jsx(Heading, { headingType: "h2", children: title }), lengthOfficesAtms ? (jsx(Text, { size: "text-h2", color: "text-secondary-text", children: `(${lengthOfficesAtms})` })) : null] }), data && 'description' in data ? renderDescriptionBlock$1(data) : null, renderFiltrationForm(Object.keys(initialState), { field, reset })] }), jsx("div", { className: "h-[600px]", children: jsx(YandexMap, { points: points, className: "h-full" }) })] }), filteredOfficesAtmsData.map(dataType === 'offices' ? renderOfficeCard : renderAtmCard)] }));
+    });
+    const filterOfficesAtms = (data, filtrationState) => {
+        const truthyFilters = Object.keys(filtrationState).filter((key) => filtrationState[key]);
+        return 'name' in data
+            ? data.filter(filterOffices(truthyFilters))
+            : data.filter(filterAtms(truthyFilters));
+    };
+    const filterOffices = (filters) => (item) => filters.every((filterName) => FILTRATION_BRANCHES_PREDICATES[filterName](item));
+    const filterAtms = (filters) => (item) => filters.every((filterName) => FILTRATION_ATMS_PREDICATES[filterName](item));
+    const getTitle = (name = '', dataType = 'offices') => dataType === 'offices' ? `Офисы филиала ${name}` : `Банкоматы филиала ${name}`;
+    const renderFiltrationForm = (filters, { field, reset }) => (jsxs("div", { className: "pb-2xl", children: [filters?.length ? (jsx("div", { className: "flex flex-wrap gap-3xl pb-2xl", children: filters.map((key) => (jsx(Checkbox, { text: FILTRATION_LABELS[key], ...field(key) }, key))) })) : null, jsx(Button, { version: "transparent", className: "text-secondary-text [&>*]:p-0", onClick: reset, text: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440", appendRight: jsx(Icon, { name: "CloseIcon", width: "16", height: "16" }) })] }));
+    const renderDescriptionBlock$1 = ({ description, list }) => (jsxs("div", { className: "p-xl mb-2xl border border-gray rounded-md", children: [jsx(Paragraph, { size: "text-l", font: "font-light", children: description }), list?.length ? (jsx("div", { className: "flex gap-2xl flex-wrap pt-xs", children: list.map((item, i) => (jsxs("div", { className: "flex gap-xs items-center", children: [item?.image ? jsx(Img, { image: item.image }) : null, item?.text ? (jsx(Text, { size: "text-m", font: "font-light", children: item.text })) : null] }, String(i)))) })) : null] }));
 
     const ParagraphBlock = JSX(({ text, size, align, font, children, ...rest }) => (jsx(BlockWrapper, { defaultPadding: "p-0", ...rest, children: jsx(Paragraph, { size: size, align: align, font: font, children: text || children }) })));
 
-    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-xl", 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 renderInsuranceSumMonth = (sum, monthLimit) => sum || monthLimit ? (jsxs("div", { className: "flex flex-wrap xl:flex-nowrap xl:bg-main-divider xl:rounded-md p-xs gap-xl", 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 sm:bg-main-divider sm:py-m sm:px-lg sm:rounded-md items-baseline whitespace-pre", children: [jsx(Text, { font: "font-light", size: "text-l", color: "text-secondary-text", children: title }), jsxs("span", { className: "font-sans text-h6 sm:text-primary-main text-primary-text", children: [toLocalNumberFormat(2)(value), " \u20BD"] })] }));
 
     const PictureText = JSX(({ className, padding, headlineVersion = 'M', align = 'text-center', sum, monthLimit, imageOptions, ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-6xl", padding: padding, headlineVersion: headlineVersion, align: align, isFullWidthTitle: false, imageOptions: { directionRight: false, imageAlign: 'center', ...imageOptions }, ...rest, children: renderInsuranceSumMonth(Number(sum), Number(monthLimit)) }) })));
 
@@ -4533,7 +4548,7 @@
         return (jsxs("button", { type: "button", onClick: () => onClick(i), "aria-label": nav?.title, className: style('relative px-xl box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50', btnClassName), children: [jsx("div", { className: btnTitleClassName, children: nav?.title }), jsx("div", { className: btnDescClassName, children: nav?.description })] }, String(i)));
     };
 
-    const ProductTile = JSX(({ className, padding, headlineVersion = 'S', isTabularBenefits = true, additionalDescription, imageOptions, ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-xl", padding: padding, headlineVersion: headlineVersion, isTabularBenefits: isTabularBenefits, imageOptions: { isBackground: true, ...imageOptions }, ...rest, children: additionalDescription ? (jsx(Paragraph, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null }) })));
+    const ProductTile = JSX(({ className, padding, headlineVersion = 'S', isTabularBenefits = true, additionalDescription, imageOptions, ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-4xl sm:p-xl", padding: padding, headlineVersion: headlineVersion, isTabularBenefits: isTabularBenefits, imageOptions: { isBackground: true, ...imageOptions }, ...rest, children: additionalDescription ? (jsx(Paragraph, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null }) })));
 
     const PromoTile = JSX(({ className, title = 'Акции и спецпредложения', description, headlineVersion = 'S', date, buttons = [], ...rest }) => (jsx(BlockWrapper, { className: style('box-border', className), ...rest, children: jsxs(BaseTile, { className: "h-full", title: title ? (jsx(Headline, { title: title, headlineVersion: headlineVersion, align: "text-left", isEmbedded: true })) : null, buttons: renderButtonsSection(buttons), children: [date ? jsx("div", { className: "text-s mb-xs", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) })));
     function formatDate(date) {
@@ -4569,13 +4584,15 @@
 
     const getIconName = (isUnfolded) => (isUnfolded ? 'MinusIcon' : 'PlusIcon');
 
-    const rollupIconVersion = 'color';
-
     const rollupItemStyles = 'border-0 border-b border-solid border-main-divider last:border-b-0';
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const renderRoundedIcon = (_icon, _iconBgVersion) => null;
 
+    const rollupIconVersion = 'color';
+
+    const PrimaryFoldButton = JSX(({ label, labelIconBgVersion, icon, onToggle, labelIcon }) => (jsx(TextWithIcon, { tag: "button", className: style('border-none bg-transparent items-center group/button', labelIcon?.icon ? 'py-xs' : 'py-lg'), onClick: onToggle, textNode: jsxs("div", { className: "flex items-center text-start group-hover/button:text-primary-main gap-s", children: [renderRoundedIcon(), label ? (jsx(Text, { size: "text-h6", font: "font-normal", children: label })) : null] }), iconNode: icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null })));
+
     const RollupItem = JSX(({ className = '', isExpanded, isFoldButtonOnTop = true, label = 'Развернуть', labelIcon, labelIconBgVersion, version = 'primary', ...rest }) => (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-lg', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren({
                     ...rest,
                     extraProps: { className: 'w-full', padding: 'p-0' },
@@ -4592,16 +4609,8 @@
     };
     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, labelIconBgVersion, icon, onToggle, labelIcon, }) => {
-        return (jsxs("button", { className: style('border-none bg-transparent flex justify-between items-center w-full group/button', labelIcon?.icon ? 'py-xs' : 'py-lg'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center text-start group-hover/button:text-primary-main gap-s", children: [renderRoundedIcon(), label ? (jsx(Text, { size: "text-h6", font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
+        const icon = getIconName(isUnfolded);
+        return version === 'primary' ? (jsx(PrimaryFoldButton, { label: label, labelIcon: labelIcon, labelIconBgVersion: labelIconBgVersion, icon: icon, onToggle: onToggle })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
 
     const WrapperSelect = JSX(({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label }) => {
@@ -4612,9 +4621,7 @@
         return (jsx(Select, { options: dataFormat, label: label, placeholder: placeholder || selected, onChange: (_) => setSelected(_.key), value: selectedObj }));
     });
 
-    const RegionsAndBranches = JSX(({ regions = [], selectedRegion, onSelectedRegion: onSelectedRegion, branches = [], selectedBranch, onSelectedBranch, }) => (jsxs("div", { className: "flex flex-col sm:flex-row gap-m order-1", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: regions, fieldValue: "code", fieldLabel: "name", selected: selectedRegion, setSelected: onSelectedRegion, label: "\u0420\u0435\u0433\u0438\u043E\u043D" }) }), jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: branches, fieldValue: "branchCode", fieldLabel: "address", selected: selectedBranch, setSelected: onSelectedBranch, label: "\u041E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435" }) })] })));
-
-    const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "font-sans flex gap-s items-center relative cursor-pointer", children: [jsx("input", { className: "appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-primary-hover\n        checked:border-2 checked:!border-primary-main focus:checked:border-primary-main focus:border-primary-text active:border-primary-text\n        after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main outline-none rounded-full cursor-pointer", type: "radio", value: value, name: name, checked: checked, onChange: (_) => onChange(_.target.value) }), text ? jsx("span", { className: "text-primary-text cursor-pointer", children: text }) : null] }) })));
+    const RegionsAndBranches = JSX(({ regions = [], selectedRegion, onSelectedRegion: onSelectedRegion, branches = [], selectedBranch, onSelectedBranch, }) => (jsxs("div", { className: "flex flex-col @xl:flex-row gap-m order-1", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: regions, fieldValue: "code", fieldLabel: "name", selected: selectedRegion, setSelected: onSelectedRegion, label: "\u0420\u0435\u0433\u0438\u043E\u043D" }) }), jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: branches, fieldValue: "branchCode", fieldLabel: "address", selected: selectedBranch, setSelected: onSelectedBranch, label: "\u041E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435" }) })] })));
 
     const RadioButtons = JSX(({ className = '' }) => {
         const [selectedOption, setSelectedOption] = useState('option2');
@@ -4628,11 +4635,11 @@
     const RentalPeriod = JSX(({ days, setDays }) => (jsxs("div", { className: "order-1", children: [jsx(Text, { size: "text-m", font: "font-light", children: "\u0421\u0440\u043E\u043A \u0430\u0440\u0435\u043D\u0434\u044B" }), jsx(InputRange, { min: MIN, max: MAX, value: days, items: ITEMS, onChange: setDays })] })));
 
     const SafeBoxCases = JSX(({ caseVolumes = [], selectedCaseVolume, onSelectedCaseVolume, safeBoxCases = [], selectedBoxSize, onSelectedBoxSize, }) => {
-        return (jsxs("div", { className: "flex flex-col sm:flex-row gap-m order-1", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: caseVolumes, fieldLabel: "volume", selected: selectedCaseVolume, setSelected: onSelectedCaseVolume, label: "\u0420\u0430\u0437\u043C\u0435\u0440", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0430\u0437\u043C\u0435\u0440" }) }), jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: safeBoxCases, fieldLabel: "safeBoxCasesSize", selected: selectedBoxSize, setSelected: onSelectedBoxSize, label: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B \u044F\u0447\u0435\u0439\u043A\u0438, \u043C\u043C (\u0412\u0445\u0428\u0445\u0414)", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440 \u044F\u0447\u0435\u0439\u043A\u0438" }) })] }));
+        return (jsxs("div", { className: "flex flex-col @xl:flex-row gap-m order-1", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: caseVolumes, fieldLabel: "volume", selected: selectedCaseVolume, setSelected: onSelectedCaseVolume, label: "\u0420\u0430\u0437\u043C\u0435\u0440", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0430\u0437\u043C\u0435\u0440" }) }), jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: safeBoxCases, fieldLabel: "safeBoxCasesSize", selected: selectedBoxSize, setSelected: onSelectedBoxSize, label: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B \u044F\u0447\u0435\u0439\u043A\u0438, \u043C\u043C (\u0412\u0445\u0428\u0445\u0414)", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440 \u044F\u0447\u0435\u0439\u043A\u0438" }) })] }));
     });
 
     const SafeDepositRentalFields = JSX(({ regions, selectedRegion, branches, selectedBranch, days, selectedCaseVolume, selectedBoxSize, safeBoxCases, caseVolumes, onChange, onClick, }) => {
-        return (jsxs("div", { className: "contents sm:block flex-1 space-y-xl", children: [jsx(RegionsAndBranches, { regions: regions, selectedRegion: selectedRegion, onSelectedRegion: (value) => onChange({ selectedRegion: value }), branches: branches, selectedBranch: selectedBranch, onSelectedBranch: onSelectedBranch(onChange) }), jsx(RentalPeriod, { days: days, setDays: (value) => onChange({ days: value }) }), jsx(SafeBoxCases, { caseVolumes: caseVolumes, selectedCaseVolume: selectedCaseVolume, onSelectedCaseVolume: onSelectedCaseVolume(onChange), safeBoxCases: safeBoxCases, selectedBoxSize: selectedBoxSize, onSelectedBoxSize: (value) => onChange({ selectedBoxSize: value }) }), jsx("div", { className: "order-4", children: jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: "\u0422\u0438\u043F \u0434\u043E\u0433\u043E\u0432\u043E\u0440\u0430" }) }), jsxs("div", { className: "contents sm:flex justify-between items-center gap-m", children: [jsx(RadioButtons, {}), jsx(Button, { text: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", version: "primary", onClick: onClick, className: "order-6" })] })] }));
+        return (jsxs("div", { className: "contents @xl:block flex-1 space-y-xl", children: [jsx(RegionsAndBranches, { regions: regions, selectedRegion: selectedRegion, onSelectedRegion: (value) => onChange({ selectedRegion: value }), branches: branches, selectedBranch: selectedBranch, onSelectedBranch: onSelectedBranch(onChange) }), jsx(RentalPeriod, { days: days, setDays: (value) => onChange({ days: value }) }), jsx(SafeBoxCases, { caseVolumes: caseVolumes, selectedCaseVolume: selectedCaseVolume, onSelectedCaseVolume: onSelectedCaseVolume(onChange), safeBoxCases: safeBoxCases, selectedBoxSize: selectedBoxSize, onSelectedBoxSize: (value) => onChange({ selectedBoxSize: value }) }), jsx("div", { className: "order-4", children: jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: "\u0422\u0438\u043F \u0434\u043E\u0433\u043E\u0432\u043E\u0440\u0430" }) }), jsxs("div", { className: "contents @md:flex justify-between items-center gap-m", children: [jsx(RadioButtons, {}), jsx(Button, { text: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", version: "primary", onClick: onClick, className: "order-6" })] })] }));
     });
     const onSelectedBranch = (onChange) => (value) => {
         onChange({ selectedBranch: value, selectedCaseVolume: '', selectedBoxSize: '' });
@@ -4644,10 +4651,10 @@
     const SafeDepositRentalTotal = JSX(({ days, tariffs = [] }) => {
         const price = calculatePrice(days, tariffs);
         const imageDescription = 'На рисунке изображена пачка листов\nформата А4';
-        return (jsxs("div", { className: "contents sm:flex flex-col justify-between order-2", children: [jsxs("div", { className: "flex flex-col sm:flex-row gap-x-6xl gap-y-2xl order-5 sm:order-none py-2xl sm:py-0 border-t border-main-divider sm:border-none", children: [renderTotal('Аренда за', days), renderTotal('Цена', price + ' ₽')] }), jsx("span", { className: "sm:hidden order-3 mb-xs text-s font-light text-secondary-text", children: imageDescription }), jsxs("div", { className: "flex flex-col items-center gap-s order-3 sm:order-none mb-xl sm:mb-0 bg-primary-main py-s sm:p-3xl text-center", children: [jsx(Img, { image: { icon: 'PackA4Icon' }, className: "sm:h-60" }), jsx("span", { className: "hidden sm:inline text-s font-light text-white opacity-80 whitespace-pre-line", children: imageDescription })] })] }));
+        return (jsxs("div", { className: "contents @xl:flex flex-col justify-between gap-xl order-2", children: [jsxs("div", { className: "flex flex-col @xl:flex-row gap-x-6xl gap-y-2xl order-5 @xl:order-none py-2xl @xl:py-0 border-t border-main-divider @xl:border-none", children: [renderTotal('Аренда за', days), renderTotal('Цена', price + ' ₽')] }), jsx("span", { className: "@xl:hidden order-3 mb-xs text-s font-light text-secondary-text", children: imageDescription }), jsxs("div", { className: "flex flex-col items-center gap-s order-3 @xl:order-none mb-xl @xl:mb-0 bg-primary-main py-s @xl:p-3xl text-center", children: [jsx(Img, { image: { icon: 'PackA4Icon' }, className: "@xl:h-60" }), jsx("span", { className: "hidden @xl:inline text-s font-light text-white opacity-80 whitespace-pre-line", children: imageDescription })] })] }));
     });
     const renderTotal = (label, total) => {
-        return (jsxs("div", { className: "flex justify-between items-center gap-y-xs sm:flex-col sm:items-start", children: [jsx("div", { className: "text-l font-light text-secondary-text", children: label }), jsx("span", { className: "text-l sm:text-h3 text-primary-text", children: total })] }));
+        return (jsxs("div", { className: "flex justify-between items-center gap-y-xs @xl:flex-col @xl:items-start", children: [jsx("div", { className: "text-l font-light text-secondary-text", children: label }), jsx("span", { className: "text-l @xl:text-h3 text-primary-text", children: total })] }));
     };
     const calculatePrice = (days, tariffs) => {
         const tariffType = getTariffType(days);
@@ -4694,7 +4701,7 @@
         const caseVolumes = getCaseVolumes(branch?.safeBoxCaseVolumes);
         const safeBoxCases = getCaseVolume(branch?.safeBoxCaseVolumes, data.selectedCaseVolume)?.safeBoxCases;
         const tariffs = getTariffs(safeBoxCases, data.selectedBoxSize);
-        return (jsxs("div", { className: "flex flex-col sm:flex-row gap-4xl align-top", children: [jsx(SafeDepositRentalFields, { ...data, regions: regions, onClick: onClick, branches: branches, caseVolumes: caseVolumes, safeBoxCases: safeBoxCases, onChange: onChange }), jsx(SafeDepositRentalTotal, { days: data.days, tariffs: tariffs })] }));
+        return (jsxs("div", { className: "flex flex-col @4xl:flex-row gap-4xl align-top", children: [jsx(SafeDepositRentalFields, { ...data, regions: regions, onClick: onClick, branches: branches, caseVolumes: caseVolumes, safeBoxCases: safeBoxCases, onChange: onChange }), jsx(SafeDepositRentalTotal, { days: data.days, tariffs: tariffs })] }));
     });
     const getCaseVolumes = (safeBoxCaseVolumes) => safeBoxCaseVolumes?.length ? safeBoxCaseVolumes?.filter((_) => _?.safeBoxCases?.length) : [];
     const getCaseVolume = (caseVolumes, selectedCaseVolume) => caseVolumes?.find((_) => _.volume === selectedCaseVolume);
@@ -4861,28 +4868,28 @@
     };
     const normalizeTab = (_) => (_?.type === 'group' ? { text: _.title } : _);
 
-    const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
-    const FIRST_CELL_CLASSES = 'w-80 flex-shrink-0';
+    const dividerStyle = '@4xl:border-main-divider @4xl:border-b';
+    const firstCellStyle = 'w-80 flex-shrink-0';
     const COLS_LENGTH_FOR_SCROLL = 2;
     const COLUMN_WIDTH$1 = 4 * 80 + 40; // w-80 + pl-10 = 360px
 
-    const TableInnerButton = JSX(({ isOpen, onClick }) => {
-        return (jsxs(Button, { version: "primary", onClick: onClick, className: "w-full flex items-center justify-center rounded-none py-lg", children: [jsx("div", { className: "text-h4", children: isOpen ? 'Скрыть' : 'Показать' }), jsx(Icon, { name: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon', className: "ml-s", iconVersion: "white", width: "20", height: "20" })] }));
-    });
+    const TableInnerButton = JSX(({ className = '', isOpen, onClick }) => (jsx(Button, { className: className, appendRight: jsx(Img, { image: { icon: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon' }, width: "20", height: "20" }), text: isOpen ? 'Скрыть' : 'Показать', version: "gray", onClick: onClick })));
 
-    const renderButtonsCellData = ({ buttons }) => renderButtonsSection(buttons);
-    const renderLabelDescriptionCellData = ({ label, description }) => (jsxs("div", { className: "space-y-2xs", children: [label ? jsx("div", { className: "text-h6 m-0", children: label }) : null, description ? (jsx("div", { className: "text-secondary-text text-l font-light", children: description })) : null] }));
+    const renderButtonsCellData = ({ buttons }) => renderButtonsSection(buttons, {
+        buttonClassName: 'basis-0',
+    });
+    const renderLabelDescriptionCellData = ({ label, description }) => (jsxs("div", { className: "space-y-2xs", children: [label ? jsx("div", { children: label }) : null, description ? (jsx("div", { children: jsx(Text, { size: "text-s", color: "text-secondary-text", children: description }) })) : null] }));
     const renderImgCellData = ({ image }) => (image?.src ? jsx(Img, { image: image }) : null);
     const renderListCellData = ({ isDotted, ...rest }) => (jsx(List, { className: "flex flex-col justify-between items-start text-h6", isDotted: isDotted ?? true, ...rest }));
-    const renderTableCellData = JSX(({ isVisible, displayTable, dataUrl, pdfUrl, isOpen }) => isVisible ? (jsx(TableInnerButton, { isOpen: isOpen, onClick: () => {
+    const renderInnerTableCellData = ({ isVisible, displayTable, dataUrl, pdfUrl, isOpen, }) => isVisible ? (jsx(TableInnerButton, { isOpen: isOpen, onClick: () => {
             displayTable({ dataUrl, pdfUrl });
-        } })) : null);
+        } })) : null;
     const EmbeddableCellData = {
         Buttons: renderButtonsCellData,
         Img: renderImgCellData,
         List: renderListCellData,
         LabelDescription: renderLabelDescriptionCellData,
-        Table: renderTableCellData,
+        Table: renderInnerTableCellData,
     };
 
     const renderCellInner = ({ rowIdx, cellIdx, setTableInner, tableInner, openTableInnerIdx, setOpenTableInnerIdx, }) => (cell, i) => {
@@ -4897,16 +4904,16 @@
             setOpenTableInnerIdx(cellIdx);
             setTableInner(props);
         };
-        return (jsxs("div", { className: cell?.tableCellType === 'Table' ? 'ml-5xl' : `first:pt-lg last:pb-lg pl-5xl`, children: [i > 0 ? jsx("div", { className: "h-5" }) : null, renderCell({
-                    cell,
-                    cellProps: {
-                        rowIdx,
-                        cellIdx,
-                        fieldIdx: i,
-                        displayTable,
-                        isVisible,
-                    },
-                })] }, String(i)));
+        return (jsx("div", { children: renderCell({
+                cell,
+                cellProps: {
+                    rowIdx,
+                    cellIdx,
+                    fieldIdx: i,
+                    displayTable,
+                    isVisible,
+                },
+            }) }, String(i)));
     };
     const renderCell = ({ cell, cellProps }) => {
         if (!cell) {
@@ -4921,7 +4928,7 @@
     };
 
     const TariffsTableCell = JSX(({ cells, rowIdx, cellIdx, setTableInner, tableInner, openTableInnerIdx, setOpenTableInnerIdx, }) => {
-        return (jsx("div", { className: "w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0", role: "cell", children: cells?.length
+        return (jsx("div", { className: "w-80 flex-grow flex flex-col gap-m @4xl:gap-lg", role: "cell", children: cells?.length
                 ? cells.map(renderCellInner({
                     rowIdx,
                     cellIdx,
@@ -4934,6 +4941,20 @@
     });
 
     const COLUMN_WIDTH = 140;
+    const getHorizontalShift = (columns, activeColumnIndex) => sum(columns.slice(0, activeColumnIndex).map((_) => _?.cols?.length ?? 1)) * COLUMN_WIDTH;
+
+    const renderInnerTableRow = (activeColumnIndex) => (rowData, rowIdx) => {
+        if (!rowData?.length) {
+            return null;
+        }
+        const [headerColumn, ...columns] = rowData;
+        const columnsStyle = style('flex duration-1000 text-center', rowIdx !== 0 ? 'font-normal' : 'font-light');
+        return (jsxs("div", { className: "flex border-main-divider border-b border-solid h-full", children: [headerColumn?.data ? (jsx("div", { className: "text-xl font-light min-w-56 py-lg", children: headerColumn.data })) : null, jsx("div", { className: "flex flex-grow overflow-hidden", children: jsx("div", { className: columnsStyle, style: {
+                            transform: `translateX(-${getHorizontalShift(columns, activeColumnIndex)}px)`,
+                        }, children: columns?.map((_, i) => (jsxs("div", { className: "flex flex-col flex-grow gap-s justify-center py-xl odd:bg-main-divider", children: [_?.data ? jsx("div", { className: "text-xl font-light", children: _.data }) : null, _?.cols ? renderCols(_.cols, activeColumnIndex) : null] }, `row${i}`))) }) })] }, String(rowIdx)));
+    };
+    const renderCols = (cols, rowIndex) => cols?.length > 0 ? (jsx("div", { className: style('flex', rowIndex === 0 ? 'text-secondary-text' : ''), children: cols.map((data, i) => (jsx("div", { className: "w-20 text-h6 mx-lg", children: data }, String(i)))) })) : null;
+
     const InnerTableBodyItem = JSX(({ rows }) => {
         const rowsLength = rows?.[0]?.length ?? 0;
         const CARD_VIEW_COUNT = 5;
@@ -4941,38 +4962,23 @@
             itemCount: rowsLength,
             visibleItemCount: CARD_VIEW_COUNT,
         });
-        return (jsxs("div", { children: [rows?.map(renderRow(activeIndex)), renderArrows({
+        return (jsxs("div", { children: [rows?.map(renderInnerTableRow(activeIndex)), renderArrows({
                     ...controls,
                     btnClass: ['left-3 top-20', 'right-3 top-20'],
                     className: '',
                 })] }));
     });
-    const renderRow = (activeColumnIndex) => (rowData, rowIdx) => {
-        if (!rowData?.length) {
-            return null;
-        }
-        const [headerColumn, ...columns] = rowData;
-        const transform = [...Array(activeColumnIndex).keys()].reduce((res, i) => (columns?.[i]?.cols?.length ?? 1) * COLUMN_WIDTH + res, 0);
-        const columnsClassName = [
-            'flex duration-1000 text-center',
-            rowIdx !== 0 ? 'font-normal' : 'font-light',
-        ].join(' ');
-        return (jsxs("div", { className: "flex border-main-divider border border-t-0 border-x-0 border-solid", children: [headerColumn?.data ? (jsx("div", { className: `text-xl font-light w-52 py-lg `, children: headerColumn.data })) : null, jsx("div", { className: "flex flex-grow overflow-hidden", children: jsx("div", { className: columnsClassName, style: {
-                            transform: `translateX(-${transform}px)`,
-                        }, children: columns?.map((_, i) => (jsxs("div", { className: "flex flex-col flex-grow gap-s justify-center py-xl odd:bg-main-divider", children: [_?.data ? jsx("div", { className: "text-xl font-light", children: _.data }) : null, _?.cols ? renderCols(_.cols, activeColumnIndex) : null] }, `row${i}`))) }) })] }, String(rowIdx)));
-    };
-    const renderCols = (cols, rowIndex) => cols?.length > 0 ? (jsx("div", { className: style('flex', rowIndex === 0 ? 'text-secondary-text' : ''), children: cols.map((data, i) => (jsx("div", { className: `w-20 text-h6 mx-lg`, children: data }, String(i)))) })) : null;
 
     const InnerTableBody = JSX(({ activeTabIndex, items }) => {
-        const [hiddenTables, setHiddenTables] = useState({});
-        const toggleTables = useCallback((key) => setHiddenTables((oldState) => ({ ...oldState, [key]: !oldState[key] })), []);
         return (jsx("div", { children: items.map((_, tableIdx) => {
                 const key = `activeTabIdx:${activeTabIndex}-tableIdx:${tableIdx}`;
-                return (jsxs("div", { className: "w-full", children: [jsxs("div", { className: "flex p-m bg-gray text-center justify-center cursor-pointer relative", onClick: () => toggleTables(key), children: [jsx(Text, { size: "text-xl", font: "font-light", children: _.title }), jsx(Img, { image: { icon: hiddenTables[key] ? 'PlusIcon' : 'MinusIcon' }, className: "absolute right-6", width: "24", height: "24" })] }), jsx("div", { className: `w-full pl-xs overflow-hidden transition-height duration-500 ease-in-out ${hiddenTables[key] ? 'h-0' : ''}`, children: jsx("div", { className: "relative", children: jsx(InnerTableBodyItem, { rows: _.rowsData }) }) })] }, key));
+                return (jsxs("div", { className: "w-full @container", children: [jsx("div", { className: "flex p-m bg-white @4xl:bg-gray text-center justify-center relative", children: jsx(Text, { size: "text-xl", font: "font-light", children: _.title }) }), jsx("div", { className: "w-full pl-xs overflow-hidden transition-height duration-500 ease-in-out", children: jsx("div", { className: "relative", children: jsx(InnerTableBodyItem, { rows: _.rowsData }) }) })] }, key));
             }) }));
     });
 
-    const InnerTableHeader = JSX(({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (jsxs("div", { className: "flex justify-between w-full px-s", children: [currencies && currencies.length > 1 ? (jsx("div", { className: "flex bg-secondary-light p-2xs rounded-md", children: currencies.map((currency, idx) => (jsx("div", { className: `rounded-md text-xl font-light px-m py-s cursor-pointer ${idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'}`, onClick: () => setActiveTabIndex(idx), children: currency || idx + 1 }, currency))) })) : null, linkToPDF ? (jsx(Button, { href: linkToPDF, version: "secondary", target: "_blank", appendLeft: jsx(Icon, { name: "DocDownloadIcon", iconVersion: "color", className: "mr-3xs", width: "20", height: "20" }), text: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })) : null] })));
+    const linkButtonVersion = 'secondary';
+
+    const InnerTableHeader = JSX(({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (jsxs("div", { className: "flex justify-between items-center w-full py-lg", children: [currencies && currencies.length > 1 ? (jsx("div", { className: "flex bg-secondary-light p-2xs rounded-md", children: currencies.map((currency, idx) => (jsx("div", { className: `rounded-md text-xl font-light px-4 py-3 cursor-pointer ${idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'}`, onClick: () => setActiveTabIndex(idx), children: currency || idx + 1 }, currency))) })) : null, linkToPDF ? (jsx(Button, { className: "text-primary-main", href: linkToPDF, version: linkButtonVersion, target: "_blank", appendLeft: jsx(Icon, { name: "DocDownloadIcon", iconVersion: "color", className: "mr-3xs", width: "20", height: "20" }), text: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })) : null] })));
 
     function useTariffsInnerTableData(directoryName) {
         const { data } = useAsyncData(tariffsInnerTableDataUrl(directoryName), fetchTariffsInnerTableData);
@@ -4993,10 +4999,10 @@
         const handleActiveTabIndex = useCallback((_) => setActiveTabIndex(_), []);
         const items = tableData?.[activeTabIndex]?.items ?? [];
         const currencies = tableData?.map((item) => item.currency ?? '');
-        return tableData ? (jsxs("div", { className: "bg-white z-10", children: [jsx(InnerTableHeader, { currencies: currencies, activeTabIndex: activeTabIndex, setActiveTabIndex: handleActiveTabIndex, linkToPDF: pdfUrl }), jsx(InnerTableBody, { activeTabIndex: activeTabIndex, items: items }), jsx(TableInnerButton, { onClick: onClick, isOpen: true })] })) : (jsxs("div", { className: "my-lg text-h6 text-center", children: [jsx("p", { children: EMPTY_DATA }), jsx(TableInnerButton, { onClick: onClick, isOpen: true })] }));
+        return tableData ? (jsxs("div", { className: "bg-white z-10", children: [jsx(InnerTableHeader, { currencies: currencies, activeTabIndex: activeTabIndex, setActiveTabIndex: handleActiveTabIndex, linkToPDF: pdfUrl }), jsx(InnerTableBody, { activeTabIndex: activeTabIndex, items: items }), jsx(TableInnerButton, { className: "mt-xl", onClick: onClick, isOpen: true })] })) : (jsxs("div", { className: "my-lg space-y-m text-h6 text-center", children: [jsx("p", { children: EMPTY_DATA }), jsx(TableInnerButton, { onClick: onClick, isOpen: true })] }));
     });
 
-    const TariffsTableRowContainer = JSX(({ children, tableInner, onHideContentClick }) => (jsxs("div", { className: "self-start flex flex-col", role: "row", children: [jsx("div", { className: "flex", children: children }), tableInner ? (jsx("div", { className: "origin-top animate-expansion", children: jsx(InnerTable, { ...tableInner, onClick: onHideContentClick }) })) : null] })));
+    const TariffsTableRowContainer = JSX(({ children, tableInner, onHideContentClick }) => (jsxs("div", { className: "self-start flex flex-col", role: "row", children: [jsx("div", { className: style(dividerStyle, 'flex flex-col @4xl:flex-row gap-y-xs gap-x-5xl pb-lg @4xl:pt-lg'), children: children }), tableInner ? (jsx("div", { className: "origin-top animate-expansion", children: jsx(InnerTable, { ...tableInner, onClick: onHideContentClick }) })) : null] })));
 
     const TariffsTableRow = JSX(({ row: { header, data }, activeIndex, rowIdx, ...rest }) => {
         const [tableInner, setTableInner] = useState(undefined);
@@ -5004,9 +5010,20 @@
         const [openTableInnerIdx, setOpenTableInnerIdx] = useState(undefined);
         const handleOpenTableInnerIdx = useCallback((_) => setOpenTableInnerIdx(_), []);
         const onHideContentClick = () => setTableInner(undefined);
-        return (jsxs(TariffsTableRowContainer, { onHideContentClick: onHideContentClick, tableInner: tableInner, ...rest, children: [jsx("div", { className: `text-s py-lg ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`, children: jsxs("div", { className: "flex items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(Img, { className: "mr-m max-w-6", image: header.icon, width: "24", height: "24" })) : null, header?.title ? jsx("div", { className: "text-m font-light", children: header?.title }) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, rowIdx: rowIdx, cellIdx: i, setTableInner: handleSetTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: handleOpenTableInnerIdx, ...rest }, String(i)))) })) : null] }));
+        return (jsxs(TariffsTableRowContainer, { onHideContentClick: onHideContentClick, tableInner: tableInner, ...rest, children: [jsx("div", { className: style('text-s', firstCellStyle), children: jsxs("div", { className: "flex gap-m items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(Img, { className: "hidden @4xl:block max-w-6", image: header.icon, width: "24", height: "24" })) : null, header?.title ? jsx("div", { className: "text-m font-light", children: header?.title }) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, rowIdx: rowIdx, cellIdx: i, setTableInner: handleSetTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: handleOpenTableInnerIdx, ...rest }, String(i)))) })) : null] }));
+    });
+
+    const TariffsTableWrapper = JSX(({ children, controls }) => {
+        const { isScrollAvailable } = controls;
+        return (jsxs("div", { role: "table", children: [jsxs("div", { className: "relative space-y-xs", children: [children, renderArrows({
+                            ...controls,
+                            btnClass: ['top-28', 'top-11'],
+                            className: 'right-7',
+                        })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-20 bg-opacity-to-white" })) : null] }));
     });
 
+    const headlineAlign = 'text-center';
+
     const TariffsTable = JSX(({ className = '', title, description, rowHeaders, tariffsColumns: columns, hiddenRowsNum = 0, ...rest }) => {
         const colData = columns?.map(({ data }) => data) || [];
         const rowData = rowHeaders?.map((header, i) => ({
@@ -5020,15 +5037,7 @@
         });
         const rows = (rowData || []).map((row, i) => (jsx(TariffsTableRow, { row: row, activeIndex: activeIndex, rowIdx: i, ...rest }, String(i))));
         const [visibleRows, hiddenRows] = hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
-        return (jsxs(BlockWrapper, { className: style('overflow-hidden relative space-y-xl', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isEmbedded: true }), hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(Wrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(Wrapper, { controls: controls, children: rows }))] }));
-    });
-    const Wrapper = JSX(({ children, controls }) => {
-        const { isScrollAvailable } = controls;
-        return (jsxs("div", { role: "table", children: [jsxs("div", { className: "relative", children: [children, renderArrows({
-                            ...controls,
-                            btnClass: ['top-28', 'top-11'],
-                            className: 'right-7',
-                        })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-20 bg-opacity-to-white" })) : null] }));
+        return (jsxs(BlockWrapper, { className: style('overflow-hidden relative space-y-0 @4xl:space-y-xl', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isEmbedded: true, align: headlineAlign }), jsx("div", { className: "space-y-m", children: hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(TariffsTableWrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(TariffsTableWrapper, { controls: controls, children: rows })) })] }));
     });
 
     const TextBlock = JSX(({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => (jsxs(BlockWrapper, { className: style('flex gap-s sm:gap-m bg-white group-data-secondary:bg-primary-main/10', className), ...rest, children: [iconVersion === 'small' ? renderIcon() : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "flex flex-col w-fit gap-2xs sm:gap-xs", children: [title ? (jsx(Text, { size: "text-l", font: "font-normal", 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] })] })));
@@ -5099,8 +5108,7 @@
         LinkDocs,
         MobileAppTile,
         MortgageFiltration,
-        OfficeMap,
-        OfficeServicesBlock,
+        OfficesAtmsMap,
         ParagraphBlock,
         PictureText,
         Placeholder,
@@ -5121,7 +5129,6 @@
         Tile,
         VerticalLayout,
         Video,
-        ExchangeRateOffice,
     };
 
     const debounce = (fn, delay = 600) => {
@@ -5196,13 +5203,13 @@
     });
     const linkWrapperStyle = (href) => style('inline mx-2xs', href ? 'text-green-dark' : '');
 
-    function useList(initialList = []) {
-        const [list, setList] = useState(initialList);
-        const push = useCallback((item) => setList((_) => [..._, item]), []);
-        const pop = useCallback(() => setList((_) => _.slice(0, -1)), []);
-        const remove = useCallback((item) => setList((_) => _.filter((currentItem) => currentItem !== item)), []);
-        const clear = useCallback(() => setList([]), []);
-        return [list, { setList, push, pop, remove, clear }];
+    function useList(initialList = []) {
+        const [list, setList] = useState(initialList);
+        const push = useCallback((item) => setList(_ => [..._, item]), []);
+        const pop = useCallback(() => setList(_ => _.slice(0, -1)), []);
+        const remove = useCallback((item) => setList(_ => _.filter(currentItem => currentItem !== item)), []);
+        const clear = useCallback(() => setList([]), []);
+        return [list, { setList, push, pop, remove, clear }];
     }
 
     function assertUnreachable(x) {
@@ -5250,17 +5257,12 @@
         }, []);
         const dialogs = useDialogsList({ onCloseAll: handleCloseAll, onClose: handleClose });
         const { close } = useDialogManager();
-        useEffect(() => {
-            const handleEscape = ({ key }) => {
-                if (key === 'Escape') {
-                    close();
-                }
-            };
-            globalThis.document?.addEventListener('keydown', handleEscape);
-            return () => {
-                globalThis.document?.removeEventListener('keydown', handleEscape);
-            };
-        }, [close]);
+        const escapeHandler = useCallback(({ key }) => {
+            if (key === 'Escape') {
+                close();
+            }
+        }, []);
+        useEventListener(globalThis.document, 'keydown', escapeHandler);
         useEffect(() => {
             if (dialogs.length) {
                 globalThis.document?.body.classList.add('no-scrollbar');
@@ -5274,6 +5276,37 @@
         return dialogs.length ? (jsx("div", { className: "fixed inset-0 z-50", role: "dialog", children: dialogs.map(({ dialog, id }, i) => (jsx("div", { className: style('absolute inset-0 overflow-x-hidden overflow-y-scroll no-scrollbar', i === dialogs.length - 1 ? '' : 'hidden'), children: dialog }, String(id || i)))) })) : null;
     });
 
+    const PopupManager = JSX(() => {
+        const [popup, setPopup] = useState(null);
+        const close = useCallback(() => {
+            setPopup(null);
+        }, []);
+        useEffect(() => defaultEventBus.subscribe('popup', (action) => {
+            switch (action.type) {
+                case 'open':
+                case 'update':
+                    setPopup(action);
+                    break;
+                case 'close':
+                    close();
+                    break;
+                default:
+                    assertUnreachable(action);
+            }
+        }), []);
+        const escapeHandler = useCallback(({ key }) => {
+            if (key === 'Escape') {
+                close();
+            }
+        }, [close]);
+        useEventListener(globalThis.document, 'keydown', escapeHandler);
+        return popup ? (jsx("div", { className: "absolute z-50", style: {
+                left: `${popup.left}px`,
+                top: `${popup.top}px`,
+                ...(popup.width ? { width: `${popup.width}px` } : {}),
+            }, role: "dialog", children: popup.popup })) : null;
+    });
+
     const api = LikeAPI();
     function useLikeService(pagePath) {
         const [likeCount, setLikeCount] = useState(0);
@@ -5325,7 +5358,7 @@
             parent: data,
         };
         useBlockRouterProvider();
-        return (jsxs("div", { "data-theme": colorPalette, children: [jsxs("section", { className: style('relative @container', pageStyle, className), children: [slots?.header ? (jsx("div", { className: "relative z-10 mb-lg shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, { ...options, slotName: 'header' }) })) : null, jsxs("div", { className: "container space-y-px @lg:space-y-0 @lg:grid @lg:grid-cols-12 @lg:gap-2xs", children: [renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } }), renderBlocksList(slots?.footer, { ...options, slotName: 'footer' })] }), likeControl ? renderLikeControl() : null] }), jsx(StickyBottomMenu, {}), jsx(DialogManager, {}), jsx(CookiePopup, { termLink: { href: '/pd-policy#cookie', target: '_blank' }, personalDataPolicyLink: { href: '/pd-policy', target: '_blank' } })] }));
+        return (jsxs("div", { "data-theme": colorPalette, children: [jsxs("section", { className: style('relative @container', pageStyle, className), children: [slots?.header ? (jsx("div", { className: "relative z-10 mb-lg shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, { ...options, slotName: 'header' }) })) : null, jsxs("div", { className: "container space-y-px @lg:space-y-0 @lg:grid @lg:grid-cols-12 @lg:gap-2xs", children: [renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } }), renderBlocksList(slots?.footer, { ...options, slotName: 'footer' })] }), likeControl ? renderLikeControl() : null] }), jsx(StickyBottomMenu, {}), jsx(DialogManager, {}), jsx(PopupManager, {}), jsx(CookiePopup, { termLink: { href: '/pd-policy#cookie', target: '_blank' }, personalDataPolicyLink: { href: '/pd-policy', target: '_blank' } })] }));
     });
     ContentPage.childrenTypes = [];
     ContentPage.slots = () => ['header', 'footer', 'StickyBottomMenu'];
@@ -5333,7 +5366,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-3xl sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.13.24";
+    const packageVersion = "0.14.1";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;