@redneckz/wildless-cms-uni-blocks 0.10.9 → 0.11.0

package/bundle/bundle.umd.js

@@ -337,7 +337,7 @@
         transparent: 'bg-transparent text-primary-text',
         '': '',
     };
-    const BlockWrapper = JSX(({ className = '', version = 'primary', isTheme = true, block, tag = 'section', role, children, }) => {
+    const BlockWrapper = JSX(({ className, version = 'primary', isTheme = true, block, tag = 'section', role, children }) => {
         const Tag = tag;
         const ref = useBlockIntersectionObserver(block);
         const [isHidden, setHidden] = useState(false);
@@ -359,21 +359,24 @@
     };
     const Heading = JSX(({ className = '', headingType = 'h3', as: Tag = 'h3', title, children }) => (jsx(Tag, { className: `font-sans m-0 ${styles$4[headingType]} ${className}`, children: title || children })));
 
+    const identity = (_) => _;
+
     const useForm = (initialState, onSubmit) => {
         const [formState, setFormState] = useState(initialState);
         const [isDirtyForm, setDirtyForm] = useState(false);
         const [dirtyFieldsMap, setDirtyFieldsMap] = useState({});
         const handlersMap = useRef({});
-        const field = useCallback((fieldName) => {
+        const field = useCallback((fieldName, options) => {
+            const { parse = identity, format = identity } = options || {};
             if (!handlersMap.current) {
                 handlersMap.current = {};
             }
             handlersMap.current[fieldName] ||= (value) => {
-                setFormState((prev) => ({ ...prev, [fieldName]: value }));
+                setFormState((prev) => ({ ...prev, [fieldName]: parse(value) }));
                 setDirtyFieldsMap((prev) => ({ ...prev, [fieldName]: true }));
             };
             return {
-                value: formState[fieldName],
+                value: format(formState[fieldName]),
                 isDirty: isDirtyForm || dirtyFieldsMap[fieldName],
                 onChange: handlersMap.current[fieldName],
             };
@@ -406,44 +409,50 @@
     const isValidationSuccess = (info) => !info?.length;
     const validator = (predicate) => (message) => (_) => predicate(_) ? [] : [message];
 
-    const consistentDataMap = new Map();
-    function useAsyncData(key, fetcher, { fallback } = {}) {
+    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 [data, setData] = useState();
-        const [error, setError] = useState();
-        const updateData = (_) => {
-            setData(_);
-            setError(undefined);
-        };
-        const updateError = (_) => {
-            setData(undefined);
-            setError(_);
-        };
-        const chainToConsistentResult = (_) => {
-            _.then(rawData => consistentDataMap.get(args) || rawData)
-                .then(updateData)
-                .catch(updateError);
-        };
+        const [simpleKey] = isSimpleKey(args) ? args : [];
+        const [data, setData] = useState(undefined);
+        const [error, setError] = useState(undefined);
         useEffect(() => {
-            const isEmptyKey = args.every(_ => _ === null);
+            const isEmptyKey = !args.some(isFilled);
             if (isEmptyKey) {
                 return;
             }
-            try {
-                const _ = fetcher(...args);
-                if ('then' in _) {
-                    chainToConsistentResult(_);
+            (async () => {
+                try {
+                    const newData = await (simpleKey
+                        ? applyCache(fetcher, cache)(simpleKey)
+                        : fetcher(...args));
+                    setData(newData);
+                    setError(undefined);
                 }
-                else {
-                    updateData(_);
+                catch (err) {
+                    setData(undefined);
+                    setError(err);
                 }
-            }
-            catch (err) {
-                updateError(err);
-            }
-        }, [fetcher, ...args]);
-        const simpleKey = args[0];
-        const fallbackData = fallback && typeof simpleKey === 'string' && fallback[simpleKey];
+            })();
+        }, [fetcher, cache, args]);
+        const fallbackData = fallback && simpleKey && fallback[simpleKey];
         return {
             data: !data && fallbackData ? fallbackData : data,
             error,
@@ -452,9 +461,6 @@
         };
     }
     function keyToArgs(key) {
-        if (!key) {
-            return [key];
-        }
         if (Array.isArray(key)) {
             return key;
         }
@@ -487,10 +493,10 @@
     }
 
     const REGIONS_URL$1 = '/api/v1/regions';
-    const EMPTY_VALUE$2 = [];
+    const EMPTY_VALUE$3 = [];
     function useGetRegions() {
         const { data } = useAsyncData(REGIONS_URL$1, fetchJSONUnsafe);
-        return data || EMPTY_VALUE$2;
+        return data || EMPTY_VALUE$3;
     }
 
     const useDialog = (id = '') => ({
@@ -665,7 +671,7 @@
         };
     };
 
-    const Input = JSX(({ className = '', inputClassName = '', id, name, type = 'text', label, value = '', valid = true, children, onChange, ...inputProps }) => {
+    const Input = JSX(({ key, className = '', inputClassName = '', id, name, type = 'text', label, placeholder, value = '', valid = true, children, onChange, onFocus, onBlur, pattern, }) => {
         const handleChange = useCallback((e) => {
             onChange && onChange(e.target?.value || '');
         }, [onChange]);
@@ -673,7 +679,7 @@
         const validStyle = valid
             ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
             : 'border-error';
-        return (jsxs("div", { className: style('relative', className), children: [label ? jsx("label", { className: "block text-m-light mb-2", children: label }) : null, jsx("input", { className: style('w-full border rounded-md text-primary-text outline-none p-4', paddingStyle, validStyle, inputClassName), id: id, name: name || id, type: type, value: value, onInput: handleChange, ...inputProps }), children] }));
+        return (jsxs("div", { className: style('relative', className), children: [jsxs("label", { children: [label ? (jsx("div", { className: "mb-2", children: jsx(Text, { size: "text-m", font: "font-light", children: label }) })) : null, jsx("input", { className: style('w-full border rounded-md text-primary-text outline-none p-4', paddingStyle, validStyle, inputClassName), id: id, name: name || id, placeholder: placeholder, type: type, value: value, onInput: handleChange, onFocus: onFocus, onBlur: onBlur, pattern: pattern }, key)] }), children] }));
     });
 
     const InputControl = JSX(({ className, label, value = '', error, onChange, onBlur }) => (jsxs("div", { className: className, children: [jsx(Input, { type: "text", "aria-label": label, label: label, valid: Boolean(!error), value: value, onChange: onChange, onBlur: onBlur }), jsx("div", { className: "h-2", children: error ? (jsx(Text, { size: "text-xs-light", color: "text-error", children: error })) : null })] })));
@@ -693,8 +699,8 @@
     }
 
     const PhoneInput = JSX(({ children, onChange, ...inputProps }) => {
-        const handleChange = useCallback(({ target: { value } }) => onChange && onChange(normalizePhone(value || '')), [onChange]);
-        return (jsx(Input, { onInput: handleChange, onFocus: handleChange, ...inputProps, children: children }));
+        const handleChange = useCallback((value) => onChange && onChange(normalizePhone(value)), [onChange]);
+        return (jsx(Input, { onChange: handleChange, onFocus: handleChange, ...inputProps, children: children }));
     });
 
     const PhoneInputControl = JSX(({ className, label, value, error, onChange, onBlur }) => (jsxs("div", { className: className, children: [jsx(PhoneInput, { "aria-label": label, label: label, valid: Boolean(!error), value: value, onChange: onChange, onBlur: onBlur }), jsx("div", { className: "h-2", children: error ? (jsx(Text, { size: "text-xs-light", color: "text-error", children: error })) : null })] })));
@@ -709,7 +715,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: "flex justify-between gap-5 mb-5", children: [jsxs("div", { className: "w-1/2", children: [jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", 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 text-l w-full mb-3", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", ...withValidator(field('name'), nameValidator) })] }), jsxs("div", { className: "w-1/2", children: [jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) }), jsx(PhoneInputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) })] })] }));
+    const renderAcquiringDataOrganization = (field) => (jsxs("div", { className: "flex justify-between gap-5 mb-5", children: [jsxs("div", { className: "w-1/2", children: [jsx(InputControl, { className: "shrink-0 w-full mb-3", 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 mb-3", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", ...withValidator(field('name'), nameValidator) })] }), jsxs("div", { className: "w-1/2", children: [jsx(InputControl, { className: "shrink-0 w-full mb-3", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) }), jsx(PhoneInputControl, { className: "shrink-0 w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) })] })] }));
 
     const ACQUIRING_TYPES = [
         {
@@ -845,7 +851,7 @@
         return (jsxs("form", { className: "container", 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: "text-center mb-4" }), 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: "text-center mb-4" }), renderAcquiringDataOrganization(field), renderSlideCheckboxes(field), renderSubmitButton(button, 'mb-4'), jsx(Footnote, { link: link })] }));
     });
 
-    const renderBusinessCardDataOrganization = (field) => (jsxs("div", { className: "flex justify-between gap-5", children: [jsxs("div", { className: "w-1/2", children: [jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", ...withValidator(field('name'), nameValidator) }), jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) })] }), jsxs("div", { className: "w-1/2", children: [jsx(PhoneInputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) }), jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", 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: "flex justify-between gap-5", children: [jsxs("div", { className: "w-1/2", children: [jsx(InputControl, { className: "shrink-0 w-full mb-3", 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 mb-3", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) })] }), jsxs("div", { className: "w-1/2", children: [jsx(PhoneInputControl, { className: "shrink-0 w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) }), jsx(InputControl, { className: "shrink-0 w-full mb-3", 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("div", { className: "flex justify-between gap-5 mb-5", children: jsx("div", { className: "w-full", 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", options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }) }) }));
 
@@ -882,14 +888,14 @@
     });
 
     const BRANCHES_URL = '/api/v1/branches';
-    const EMPTY_VALUE$1 = [];
+    const EMPTY_VALUE$2 = [];
     function useBranches(regionCode) {
         const { data } = useAsyncData(regionCode ? `${BRANCHES_URL}?regionCode=${regionCode}` : null, fetchSafeBoxes$1);
-        return data || EMPTY_VALUE$1;
+        return data || EMPTY_VALUE$2;
     }
     const fetchSafeBoxes$1 = async (url) => {
         const result = await fetchJSON(url, { method: 'GET' });
-        return result || EMPTY_VALUE$1;
+        return result || EMPTY_VALUE$2;
     };
 
     const MIN_CREDIT_AMOUNT = 1000;
@@ -899,12 +905,34 @@
     const MAX_CREDIT_TERM = 180;
     const ITEMS_CREDIT_TERM = ['От 1 мес', 'До 15 лет'];
 
-    const renderCreditDataOrganization = (field) => (jsxs("div", { className: "flex justify-between gap-5 mb-7", children: [jsxs("div", { className: "w-1/2", children: [jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...field('fullName') }), jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) }), jsx(PhoneInputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) })] }), jsxs("div", { className: "w-1/2", children: [jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", 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 text-l w-full mb-3", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", ...withValidator(field('name'), nameValidator) }), jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", 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: "flex justify-between gap-5 mb-7", children: [jsxs("div", { className: "w-1/2", children: [jsx(InputControl, { className: "shrink-0 w-full mb-3", label: "\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...field('fullName') }), jsx(InputControl, { className: "shrink-0 w-full mb-3", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) }), jsx(PhoneInputControl, { className: "shrink-0 w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) })] }), jsxs("div", { className: "w-1/2", children: [jsx(InputControl, { className: "shrink-0 w-full mb-3", 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 mb-3", 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 mb-3", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...field('mail') })] })] }));
 
-    const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', {}).format(number);
+    const useNormalizedInput = (props, { normalize, format }) => {
+        const { value, onFocus, onBlur, onChange } = props;
+        const [isFocused, setIsFocused] = useState(false);
+        const handleFocus = useCallback((e) => {
+            setIsFocused(true);
+            onFocus && onFocus(e);
+        }, []);
+        const handleBlur = useCallback(() => {
+            setIsFocused(false);
+            onChange && onChange(normalize(value));
+            onBlur && onBlur();
+        }, [onChange, value]);
+        return {
+            value: (isFocused || !format ? value : format(value)),
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+        };
+    };
 
     const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 
+    const toLocalNumberFormat = (fractionDigits = 0) => (_ = 0) => new Intl.NumberFormat('ru-RU', {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: fractionDigits,
+    }).format(Number(_) || 0);
+
     function parseDecimal(value) {
         const rawValue = (value || '').replace(/\D/g, '');
         const unsafeDecimal = parseInt(rawValue, 10);
@@ -926,19 +954,16 @@
     const DISABLED_INPUT_CLASSES = 'disabled:border-gray disabled:bg-main-divider';
     const DEFAULT_MIN = 1;
     const DEFAULT_MAX = 100;
-    const InputRange = JSX(({ className, title, items = [], list = [], min = list.length ? 0 : DEFAULT_MIN, max = list.length ? list.length - 1 : DEFAULT_MAX, step = 1, value = list[0] || min, disabled = false, onChange, }) => {
-        const [isFocused, setFocused] = useState(false);
+    const InputRange = JSX((props) => {
+        const { className, title, items = [], list = [], min = list.length ? 0 : DEFAULT_MIN, max = list.length ? list.length - 1 : DEFAULT_MAX, step = 1, value = list[0] || min, disabled = false, onChange, } = props;
+        const normalizedProps = useNormalizedInput(props, {
+            normalize: (_ = 0) => list.length ? closestValue(list)(_) : clamp(_, min, max),
+            format: toLocalNumberFormat(),
+        });
         const handleChange = useCallback((e) => {
             onChange && onChange(parseDecimal(e.target?.value));
         }, [onChange]);
-        const handleFocus = useCallback(() => {
-            setFocused(true);
-        }, []);
-        const handleBlur = useCallback(() => {
-            setFocused(false);
-            onChange && onChange(list.length ? closestValue(list)(value) : clamp(value || 0, min, max));
-        }, [onChange, value]);
-        return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-text", children: title })) : null, jsx("input", { className: style('m-0 mt-2 font-sans text-h3 w-full h-14', 'border border-solid border-gray rounded-md outline-none', 'p-0 pl-4 box-border', 'text-primary-text hover:border-primary-hover focus:border-primary-text', DISABLED_INPUT_CLASSES), value: isFocused ? value : addSpacesBetweenNumbers(value), disabled: disabled, onInput: handleChange, onFocus: handleFocus, onBlur: handleBlur }), renderRangeWithTicks({ list, min, max, step, disabled, value, onChange })] }), renderRangeCaption(items)] }));
+        return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-text", children: title })) : null, jsx("input", { className: style('m-0 mt-2 font-sans text-h3 w-full h-14', 'border border-solid border-gray rounded-md outline-none', 'p-0 pl-4 box-border', 'text-primary-text hover:border-primary-hover focus:border-primary-text', DISABLED_INPUT_CLASSES), disabled: disabled, onInput: handleChange, ...normalizedProps }), renderRangeWithTicks({ list, min, max, step, disabled, value, onChange })] }), renderRangeCaption(items)] }));
     });
     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-2", children: items.map((item, i) => (jsx(Text, { size: "text-s-light", color: "text-secondary-text", children: item }, String(i)))) }));
@@ -1010,7 +1035,7 @@
                 });
         }, [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: "text-center mb-4" }), jsxs("div", { className: "max-w-[560px] m-auto", children: [jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0418\u043C\u044F", ...withValidator(field('name'), nameValidator) }), jsx(PhoneInputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) })] }), jsxs("div", { className: "flex justify-between items-center 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: "text-center mb-4" }), jsxs("div", { className: "max-w-[560px] m-auto", children: [jsx(InputControl, { className: "shrink-0 w-full mb-3", label: "\u0418\u043C\u044F", ...withValidator(field('name'), nameValidator) }), jsx(PhoneInputControl, { className: "shrink-0 w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) })] }), jsxs("div", { className: "flex justify-between items-center max-w-[560px] m-auto", children: [jsx("div", { className: "flex-1", children: jsx(Footnote, { link: link }) }), renderSubmitButton(button)] })] }));
     });
 
     const sourcesComparator = (a, b) => a?.media && b?.media ? a.media - b.media : 0;
@@ -1078,7 +1103,7 @@
         return (jsxs("div", { className: "mb-6", children: [jsxs("div", { className: "flex items-center mb-4 gap-6", 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-4 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 renderWedDataOrganization = (field) => (jsxs("div", { children: [jsxs("div", { className: "flex justify-between gap-5", children: [jsx("div", { className: "w-1/2", children: jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", 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: "w-1/2", children: jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0424\u0418\u041E", ...withValidator(field('name'), nameValidator) }) })] }), jsxs("div", { className: "flex justify-between gap-5 mb-7", children: [jsx("div", { className: "w-1/2", children: jsx(PhoneInputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) }) }), jsx("div", { className: "w-1/2", children: jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...withValidator(field('mail'), defaultValidator) }) })] })] }));
+    const renderWedDataOrganization = (field) => (jsxs("div", { children: [jsxs("div", { className: "flex justify-between gap-5", children: [jsx("div", { className: "w-1/2", children: jsx(InputControl, { className: "shrink-0 w-full mb-3", 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: "w-1/2", children: jsx(InputControl, { className: "shrink-0 w-full mb-3", label: "\u0424\u0418\u041E", ...withValidator(field('name'), nameValidator) }) })] }), jsxs("div", { className: "flex justify-between gap-5 mb-7", children: [jsx("div", { className: "w-1/2", children: jsx(PhoneInputControl, { className: "shrink-0 w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) }) }), jsx("div", { className: "w-1/2", children: jsx(InputControl, { className: "shrink-0 w-full mb-3", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...withValidator(field('mail'), defaultValidator) }) })] })] }));
 
     const initialFormState = {
         fullName: '',
@@ -1156,7 +1181,7 @@
         return description?.items && description.items.length > 0 ? (jsx("ul", { className: listStyleType, children: description.items.map((_, i) => (jsx("li", { 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-2' : 'gap-4', 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-2' : 'flex-wrap gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
     const renderButton = (buttonClassName = '') => (button, index) => {
         const { text, icon, iconRight, version, ...rest } = button || {};
         const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
@@ -1301,15 +1326,15 @@
         return isVisible ? (jsxs("div", { children: [canDec ? (jsx(ArrowButton, { className: `absolute z-40 ${btnClass[0]} ${className}`, onClick: dec, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left", disabled: !canDec })) : null, canInc ? (jsx(ArrowButton, { className: `absolute z-40 rotate-180 ${btnClass[1]} ${className}`, onClick: inc, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right", disabled: !canInc })) : null] })) : null;
     }
 
-    const CalculatorValueBlock = JSX(({ title, value, postfix = '', prefix, className = '' }) => (jsxs("div", { className: style('mb-7', className), children: [title ? (jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: title })) : null, value ? (jsx("div", { children: jsxs(Text, { size: "text-h3", children: [prefix, " ", addSpacesBetweenNumbers(Math.round(value)), " ", postfix] }) })) : (jsx("div", { children: jsx(Text, { size: "text-h3", children: "-" }) }))] })));
+    const CalculatorValueBlock = JSX(({ title, value, postfix = '', prefix, className = '' }) => (jsxs("div", { className: style('mb-7', className), children: [title ? (jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: title })) : null, value ? (jsx("div", { children: jsxs(Text, { size: "text-h3", children: [prefix, " ", toLocalNumberFormat(2)(Math.round(value)), " ", postfix] }) })) : (jsx("div", { children: jsx(Text, { size: "text-h3", children: "-" }) }))] })));
 
-    const DEFAULT_MIN_SUM = 10000;
-    const DEFAULT_MAX_SUM = 5000000;
+    const DEFAULT_MIN_SUM$1 = 10000;
+    const DEFAULT_MAX_SUM$1 = 5000000;
     const CREDIT_DEFAULT_SUM = 200000;
     const DEPOSIT_DEFAULT_SUM = 20000;
-    const DEFAULT_MIN_MONTHS = 13;
-    const DEFAULT_MAX_MONTHS = 60;
-    const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS - DEFAULT_MIN_MONTHS) / 2);
+    const DEFAULT_MIN_MONTHS$1 = 13;
+    const DEFAULT_MAX_MONTHS$1 = 60;
+    const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS$1 - DEFAULT_MIN_MONTHS$1) / 2);
     const BUSINESS_DEFAULT_SUM = 100000;
     const BUSINESS_MIN_DAYS = 1;
     const BUSINESS_MAX_DAYS = 1095;
@@ -1320,10 +1345,10 @@
     const MONTHS_IN_YEAR = 12;
     const MONTHLY_INTEREST_RATE = MONTHS_IN_YEAR * 100;
     const DEFAULT_CREDIT_CALCULATOR_PARAMS = {
-        minSum: DEFAULT_MIN_SUM,
-        maxSum: DEFAULT_MAX_SUM,
-        minMonths: DEFAULT_MIN_MONTHS,
-        maxMonths: DEFAULT_MAX_MONTHS,
+        minSum: DEFAULT_MIN_SUM$1,
+        maxSum: DEFAULT_MAX_SUM$1,
+        minMonths: DEFAULT_MIN_MONTHS$1,
+        maxMonths: DEFAULT_MAX_MONTHS$1,
         rate: 12.5,
         isSalaryClient: false,
         isPensionClient: false,
@@ -1377,8 +1402,8 @@
     const DEFAULT_MONEY_STEP = 1000;
     function renderWantedSumInput({ isShowItems = true, step = DEFAULT_MONEY_STEP, ...rest }) {
         const items = [
-            `От ${addSpacesBetweenNumbers(rest.min || 0)} ₽`,
-            `До ${addSpacesBetweenNumbers(rest.max || 0)} ₽`,
+            `От ${toLocalNumberFormat(2)(rest.min || 0)} ₽`,
+            `До ${toLocalNumberFormat(2)(rest.max || 0)} ₽`,
         ];
         return jsx(InputRange, { items: isShowItems ? items : [], step: step, ...rest });
     }
@@ -1848,53 +1873,37 @@
                         })) }) }), jsx("div", { className: "w-full h-2 bg-primary-main" })] }));
     }
 
-    const getSanitizedValue = (_) => _.replace(/\s/g, '');
-
-    const adjustValue = (val) => onlyOneDot(setZeroStart(replaceCommaToDot(getSanitizedValue(val))));
-    const localNumberFormat = (val) => new Intl.NumberFormat('ru-RU', {
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 2,
-    })
-        .format(Number(getSanitizedValue(val)))
-        .replace(',', '.');
-    const onlyOneDot = (val) => {
-        const matches = val.match(/\./g) || [];
-        return matches.length > 1 ? val.slice(0, val.lastIndexOf('.')) : val;
-    };
-    const setZeroStart = (val) => {
-        const isZeroStart = val.indexOf('0') === 0 && val.length === 2;
-        const newVal = isZeroStart ? val.replace('0', '0.') : val;
-        return newVal.startsWith('.') ? newVal.replace('.', '0.') : newVal;
-    };
-    const replaceCommaToDot = (val) => String(val.replace(',', '.').replace(/[^.\d]/g, ''));
-
-    const CurrencyInput = JSX(({ className = '', value = '', onChange, minValue = 0, maxValue = 300000, ...inputProps }) => {
-        const handleChange = useCallback((inputValue) => {
-            const adjustedVal = adjustValue(inputValue);
-            const clampVal = getClampValue(adjustedVal, clamp(Number(adjustedVal), minValue, maxValue));
-            onChange && onChange(clampVal);
-        }, [onChange]);
-        const handleBlur = useCallback(() => {
-            onChange && onChange(localNumberFormat(value));
-        }, [onChange, value]);
-        return (jsx(Input, { className: className, inputClassName: "w-full", value: value, onChange: handleChange, onBlur: handleBlur, ...inputProps, children: jsx("span", { className: "text-xl-light absolute right-4 bottom-4", children: "\u20BD" }) }));
+    const NumberInput = JSX((props) => {
+        const { onChange, min, max, defaultValue = '0', fractionDigits = 0, ...inputProps } = props;
+        const normalizedProps = useNormalizedInput(props, {
+            normalize: (_ = defaultValue) => min && max ? String(clamp(Number(sanitizeNumberStr(_)), min, max)) : sanitizeNumberStr(_),
+            format: toLocalNumberFormat(fractionDigits),
+        });
+        const handleChange = useCallback((_) => onChange && onChange(sanitizeNumberStr(_)), [onChange]);
+        return jsx(Input, { onChange: handleChange, ...inputProps, ...normalizedProps });
     });
-    const getClampValue = (val, clampVal) => Number(val) === clampVal ? val : String(clampVal);
+    const sanitizeNumberStr = (_ = '') => _.replaceAll(',', '.')
+        .replace(/[^\d.]/g, '')
+        .replace(/([^.]*\.[^.]*)\./, '$1');
+
+    const CurrencyInput = JSX((props) => (jsx(NumberInput, { ...props, fractionDigits: 2, children: jsx("div", { className: "absolute right-4 bottom-4", children: jsx(Text, { size: "text-xl", font: "font-light", children: "\u20BD" }) }) })));
 
-    const AMOUNT_KEY = 'amount';
-    const FORM_URL = 'https://www.rshb.ru/p2p/';
     const DEFAULT_TITLE = 'Укажите сумму перевода';
     const DEFAULT_LABEL = 'Сумма перевода';
     const DEFAULT_PLACEHOLDER = '1500';
+    const FORM_URL = 'https://www.rshb.ru/p2p/';
+    const AMOUNT_KEY = 'amount';
+    const INITIAL_FORM_STATE = {
+        [AMOUNT_KEY]: 1500,
+    };
     const CardTransfer = JSX(({ className = '', title = DEFAULT_TITLE, label = DEFAULT_LABEL, placeholder = DEFAULT_PLACEHOLDER, button, ...rest }) => {
-        const [value, setValue] = useState('');
-        const handleChange = useCallback((_) => setValue(_), []);
-        const isDisabled = !Number(getSanitizedValue(value));
+        const [{ amount }, { field }] = useForm(INITIAL_FORM_STATE);
+        const isDisabled = amount <= 0;
         const buttonStyle = isDisabled
             ? getDisabledButtonClasses({ version: button?.version })
             : getRegularButtonClasses({ className: 'text-white', version: button?.version });
         const link = useLink();
-        return (jsxs(BlockWrapper, { className: `p-default flex flex-col items-center ${className}`, ...rest, children: [title ? jsx(Heading, { className: "max-w-[684px] pb-9", headingType: "h2", title: title }) : null, jsxs("form", { className: "w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, value: value, onChange: handleChange, valid: value === '' || !isDisabled, placeholder: placeholder, label: label }), button?.text ? (jsx("button", { type: "submit", className: `w-full p-4 mt-6 ${buttonStyle} `, disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
+        return (jsxs(BlockWrapper, { className: style('p-default flex flex-col items-center', className), ...rest, children: [title ? jsx(Heading, { className: "max-w-[684px] pb-9", headingType: "h2", title: title }) : null, jsxs("form", { className: "w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, valid: !isDisabled, placeholder: placeholder, label: label, ...field(AMOUNT_KEY, { parse: Number, format: String }) }), button?.text ? (jsx("button", { type: "submit", className: style('w-full p-4 mt-6', buttonStyle), disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
     });
 
     const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
@@ -2223,22 +2232,14 @@
         return (jsx(BlockWrapper, { className: style('w-[365px]', className), ...rest, children: jsxs(LinkWrapper, { className: "flex flex-col", href: href, target: target, children: [icon?.icon ? jsx(ImgInner, { image: icon }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left pt-3 mb-2", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Text, { font: "font-light", size: "text-m", color: "text-secondary-text", children: description }) })) : null] }) }));
     });
 
-    const BaseTile = JSX(({ className = '', title = '', buttons, image, children }) => (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { className: "h-full", children: children }), buttons ? jsx("div", { className: "mt-auto pt-8", children: buttons }) : null] }), image] })] })));
+    const BaseTile = JSX(({ className, title = '', insetTitle = '', buttons, leftImage, rightImage, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col font-sans', className), children: [backImage ? jsx("div", { className: "absolute bottom-0 right-0 z-0", children: backImage }) : null, title, jsxs("div", { className: "grow relative flex flex-wrap justify-between items-stretch gap-8", children: [leftImage, jsxs("div", { className: style('flex flex-col gap-8', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), buttons] }), rightImage ? jsx("div", { className: "sm:-order-1 md:-order-1", children: rightImage }) : null] })] })));
 
     const getItemListFontSize = (colValue) => (colValue === 1 ? 'text-h6' : 'text-l');
     const cardColumnsModeStyleMap = {
         1: 'flex-col',
         2: 'gap-x-10 flex-wrap',
     };
-    const CarouselInvestmentCard = JSX(({ additionalDescription, cardsList = [], className = '', columnsMode = 1, description, image, title, ...rest }) => {
-        const tileTitle = title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
-        const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
-        return (jsx(BlockWrapper, { className: [
-                'relative box-border text-left p-9 w-[697px]',
-                'border border-solid border-gray group-data-secondary:border-white/50',
-                className,
-            ].join(' '), ...rest, children: jsxs(BaseTile, { title: tileTitle, image: tileImage, children: [jsxs("div", { className: "flex justify-between mb-4", 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: `list-none m-0 p-0 flex gap-y-2 ${cardColumnsModeStyleMap[columnsMode]}`, children: renderCardList(cardsList, columnsMode) })) : null] }) }));
-    });
+    const CarouselInvestmentCard = JSX(({ additionalDescription, cardsList = [], className = '', columnsMode = 1, description, image, title, ...rest }) => (jsx(BlockWrapper, { className: style('box-border text-left p-9 w-[697px]', 'border border-solid border-gray group-data-secondary:border-white/50', className), ...rest, children: jsxs(BaseTile, { title: title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-3.5 z-10", title: title }) : null, backImage: image?.src ? jsx(ImgInner, { className: "m-0", image: image }) : null, children: [jsxs("div", { className: "flex justify-between mb-4", 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 flex gap-y-2', cardColumnsModeStyleMap[columnsMode]), children: renderCardList(cardsList, columnsMode) })) : null] }) })));
     const renderCardList = (cardsList, columnsMode) => {
         const CARDS_COUNT_MAP = [4, 9];
         const visibleCardsList = cardsList.slice(0, CARDS_COUNT_MAP[columnsMode - 1]);
@@ -2267,11 +2268,11 @@
     };
 
     const DOT_SIZE_MAP = {
-        L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4',
-        M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3',
-        S: 'w-1 h-1 min-w-1 min-h-1 mr-2',
+        L: 'w-1.5 h-1.5 mr-4',
+        M: 'w-1.5 h-1.5 mr-3',
+        S: 'w-1 h-1 mr-2',
     };
-    const ListItem = JSX(({ className = '', isDotted = true, children, size = 'M' }) => (jsxs("div", { className: `font-sans flex items-baseline ${className}`, role: "listitem", children: [isDotted ? (jsx("div", { children: jsx("div", { className: `rounded-full align-middle inline-block bg-primary-text group-data-secondary:bg-white ${DOT_SIZE_MAP[size]}` }) })) : null, jsx("span", { children: children })] })));
+    const ListItem = JSX(({ className, isDotted = true, children, size = 'M' }) => (jsxs("div", { className: style('font-sans flex', className), role: "listitem", children: [isDotted ? (jsx("div", { className: "shrink-0", children: jsx("div", { className: style('align-middle inline-block rounded-full bg-primary-text group-data-secondary:bg-white', DOT_SIZE_MAP[size]) }) })) : null, jsx("span", { children: children })] })));
 
     const TEXT_SIZE_MAP = {
         S: 'text-l-light',
@@ -2283,7 +2284,7 @@
         M: 'ml-3',
         L: 'ml-4',
     };
-    const List = JSX(({ className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: `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, { className: itemClassName, isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
+    const List = JSX(({ className, hasIndent, isDotted, items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: style('flex flex-col gap-2 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 CarouselProductCard = JSX(({ additionalDescription, align = 'text-center', button = {}, className = '', description, headlineSmallVersion = 'H6', href, icon, isDotted = true, isFullWidth = true, items = [], target, title, version = 'primary', ...rest }) => {
         return (jsxs(BlockWrapper, { className: style('h-full flex flex-col justify-between min-w-[260px]', 'box-border border-solid border border-gray', align, className), version: version, ...rest, children: [jsxs(LinkWrapper, { className: "p-6", href: href, target: target, children: [renderImage$3(icon), renderCardTitle(headlineSmallVersion, title), renderDescription$3(description, title), renderItems(items, isDotted, version), renderAdditionalDescription$1(additionalDescription)] }), renderButtonsSection([button], {
@@ -2295,13 +2296,21 @@
     const renderCardTitle = (headlineSmallVersion, title) => title ? (jsx("div", { children: jsx(Text, { size: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) })) : null;
     const renderDescription$3 = (description, title) => description ? (jsx("div", { className: title ? 'mt-2' : '', children: jsx(Paragraph, { size: "text-l", children: description }) })) : null;
     const renderAdditionalDescription$1 = (additionalDescription) => additionalDescription ? (jsx("div", { className: "mt-auto", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", children: additionalDescription }) })) : null;
-    const renderItems = (items, isDotted, version = 'primary') => items?.length ? (jsx(List, { className: `max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "text-left", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted })) : null;
+    const renderItems = (items, isDotted, version = 'primary') => items?.length ? (jsx(List, { className: style('max-w-[308px] mt-2 text-s', version === 'primary' ? '!text-secondary-text' : ''), items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted })) : null;
 
     const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], href, target, ...rest }) => {
         return (jsx(BlockWrapper, { className: style('border border-gray', className), ...rest, children: jsxs(LinkWrapper, { className: "flex", href: href, target: target, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", children: [icon?.icon ? jsx(ImgInner, { image: icon }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: "mb-3.5", headingType: "h5", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$2) })) : null] })] }) }));
     });
     const renderList$2 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: "text-h6", children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
 
+    const buttonSizeStyles = {
+        default: 'w-14 h-14',
+        small: 'w-12 h-12',
+    };
+    const buttonStylesWithText = (text, buttonSize) => text
+        ? ''
+        : style('group/media flex items-center justify-center box-border', buttonSizeStyles[buttonSize]);
+
     const ICONS_MAP = [
         {
             origins: ['t.me', 'telegram.org'],
@@ -2334,13 +2343,6 @@
             label: 'Youtube',
         },
     ];
-    const buttonSizeStyles = {
-        default: 'w-14 h-14',
-        small: 'w-12 h-12',
-    };
-    const buttonStylesWithText = (text, buttonSize) => text
-        ? ''
-        : `group/media flex items-center justify-center box-border ${buttonSizeStyles[buttonSize]}`;
     const MediaButton = JSX(({ buttonSize = 'default', rounded = false, icon, ...rest }) => {
         const { href, version, text = '' } = rest;
         const { iconMapped, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
@@ -2354,7 +2356,7 @@
     const BORDER_STYLE = 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
 
     const CarouselRecommendationCard = JSX(({ className = '', description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', version = 'primary', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-4", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), jsxs("div", { className: "w-1/2 h-full flex flex-col flex-1 justify-end", children: [items.length ? (jsx(List, { className: "flex flex-col gap-2", itemClassName: "text-l-light", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10", media: socialMedia }) : null] }), renderIconBlock$2(icon)] }) }));
+        return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-4", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), jsxs("div", { className: "w-1/2 h-full flex flex-col flex-1 justify-end", children: [items.length ? jsx(List, { items: items, listItemSize: "S" }) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10", media: socialMedia }) : null] }), renderIconBlock$2(icon)] }) }));
     });
     const renderIconBlock$2 = (icon) => (jsxs("div", { className: "absolute bottom-0 right-0", children: [icon?.icon ? jsx(ImgInner, { image: icon }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }));
 
@@ -2480,6 +2482,124 @@
     const renderBlocks = (info) => (jsx("div", { className: "flex grow basis-0", children: info.map((column, index) => renderBlocksColumn({ column, index })) }));
     const renderBlocksColumn = ({ column, index }) => column ? (jsx("div", { className: "flex flex-col grow basis-0 pr-11 last:pr-0", children: column.map(({ title = '', description, additionalDescription, button }, key) => (jsxs("div", { className: "mt-6 first:mt-0", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "XS", align: "text-left" }), additionalDescription ? (jsx("div", { className: "mt-1.5 opacity-80", children: jsx(Paragraph, { size: "text-m", font: "font-light", children: additionalDescription }) })) : null, button ? jsx(Button, { className: "mt-6", ...button }) : null] }, String(key)))) }, `col-${String(index)}`)) : null;
 
+    const isEmpty = (v) => v === null ||
+        v === undefined ||
+        v === '' ||
+        (Array.isArray(v) && v.length === 0) ||
+        (typeof v === 'object' && Object.keys(v).length === 0);
+
+    const isSingularFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) || isEmpty(target[key]) || pattern[key] === target[key];
+    const isMultipleFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) ||
+        isEmpty(target[key]) ||
+        pattern[key]?.some((_) => target[key]?.includes(_));
+    const isNumberFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) ||
+        isEmpty(target[key]) ||
+        naturalNumber(pattern[key]) <= naturalNumber(target[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)
+        .map(([key, subPattern]) => {
+        if (typeof subPattern === 'number') {
+            return isNumberFieldMatch(key, pattern);
+        }
+        if (typeof subPattern === 'object') {
+            if ('min' in subPattern && 'max' in subPattern) {
+                return isValueInRange(key, pattern);
+            }
+        }
+        return Array.isArray(subPattern)
+            ? isMultipleFieldMatch(key, pattern)
+            : isSingularFieldMatch(key, pattern);
+    })
+        .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 px-0 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-3", children: label }), icon ? (jsx(ImgInner, { 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 = 'grid grid-cols-12 gap-1 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(blocksToRender.length ? '' : 'hidden'), children: [jsx("div", { className: style('mb-1', resultsGridStyle), children: renderBlocksList(visibleBlocks, { ...rest.options, parent: block }) }), jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => {
+                                return (jsx(FoldableSection, { className: style(resultsGridStyle, isUnfolded ? 'mb-1' : ''), 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 (jsxs("div", { className: "bg-white py-20", children: [title ? (jsx("div", { className: "mb-2", children: jsx(Paragraph, { align: "text-center", children: jsx(Text, { size: "text-h4", children: title }) }) })) : null, description ? (jsx(Paragraph, { size: "text-xl", font: "font-light", align: "text-center", children: description })) : null] }));
+    }
+
+    const SlideCheckboxGroup = JSX(({ value, onChange, items = [], multiple }) => {
+        const handleChange = (newValue) => {
+            if (!onChange) {
+                return;
+            }
+            if (multiple) {
+                const hasAlready = value?.includes(newValue);
+                onChange(hasAlready ? (value || []).filter((v) => v !== newValue) : [...(value || []), newValue]);
+            }
+            else {
+                onChange(value === newValue ? '' : newValue);
+            }
+        };
+        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 justify-between bg-white p-9 mb-1", children: [jsxs("div", { className: "flex gap-11", children: [children, Object.entries(filtrationSchema).map(renderFormItem(field))] }), resetButton ? (jsx("div", { children: jsx(Button, { className: "w-72 ml-3", onClick: reset, ...resetButton }) })) : null] }));
+    const renderFormItem = (field) => ([key, item]) => {
+        const type = item?.type;
+        switch (type) {
+            case 'array':
+                return renderCheckboxes(key, field)(item);
+            default:
+                return null;
+        }
+    };
+    const renderCheckboxes = (key, field) => (item) => {
+        const options = item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
+            [];
+        return (jsxs("div", { children: [item?.title ? (jsx("div", { className: "mb-4", 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 initialFiltrationState$1 = {
+        sum: 500,
+        period: {
+            min: 3,
+            max: 36,
+        },
+    };
+    const DEFAULT_MIN_MONTHS = 3;
+    const DEFAULT_MAX_MONTHS = 36;
+    const DEFAULT_MIN_SUM = 500;
+    const DEFAULT_MAX_SUM = 1000000000;
+    const DepositFiltration = JSX(({ className, filtrationSchema = {}, resetButton, sumInput, periodInput, ...rest }) => {
+        const [filtrationState, { field, reset }] = useForm(initialFiltrationState$1);
+        const maxValue = periodInput?.max || DEFAULT_MAX_MONTHS;
+        const Inputs = (jsxs("div", { children: [jsx(CurrencyInput, { label: sumInput?.title, min: DEFAULT_MIN_SUM, max: DEFAULT_MAX_SUM, ...field('sum', { parse: Number, format: String }) }), jsx(InputRange, { title: periodInput?.title, items: ['От 3 мес', 'До 3 лет'], min: periodInput?.min || DEFAULT_MIN_MONTHS, max: maxValue, ...field('period', {
+                        parse: (min) => ({ min, max: maxValue }),
+                        format: ({ min }) => min,
+                    }) })] }));
+        return (jsxs(BlockWrapper, { className: style(className), version: "transparent", ...rest, children: [renderFiltrationForm({ field, reset, filtrationSchema, resetButton, children: Inputs }), jsx(BaseFiltrationInner, { filtrationState: filtrationState, ...rest })] }));
+    });
+    DepositFiltration.childrenTypes = ['ProductTile'];
+    DepositFiltration.childSchema = (content) => content?.filtrationSchema || {};
+
     const renderErrorContent = (error) => {
         if (error?.errorContentType === 'Image' && error?.image) {
             return jsx(ImgInner, { image: error.image });
@@ -2709,86 +2829,12 @@
         return currencies?.filter((_) => _?.currency?.id === 1 || _?.currency?.id === 2) || [];
     };
 
-    const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => {
-        return (jsxs("button", { className: style('flex justify-center w-full px-0 py-5 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-3", children: label }), icon ? (jsx(ImgInner, { 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 isSingularFieldMatch = (key, pattern) => (target) => pattern[key] === undefined || pattern[key] === target[key];
-    const isMultipleFieldMatch = (key, pattern) => (target) => pattern[key] === undefined || pattern[key]?.every((_) => target[key]?.includes(_));
-    const checkShouldRenderBlock = (pattern, target) => Object.entries(pattern)
-        .map(([key, subPattern]) => Array.isArray(subPattern)
-        ? isMultipleFieldMatch(key, pattern)
-        : isSingularFieldMatch(key, pattern))
-        .every((predicate) => predicate(target));
-
-    const ICONS = ['ArrowDownIcon', 'ArrowUpIcon'];
-    const resultsGridStyle = 'grid grid-cols-12 gap-1 border-box';
-    const FiltrationInner = 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(blocksToRender.length ? '' : 'hidden'), children: [jsx("div", { className: style('mb-1', resultsGridStyle), children: renderBlocksList(visibleBlocks, { ...rest.options, parent: block }) }), jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => {
-                                return (jsx(FoldableSection, { className: style(resultsGridStyle, isUnfolded ? 'mb-1' : ''), 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 (jsxs("div", { className: "bg-white py-20", children: [title ? (jsx("div", { className: "mb-2", children: jsx(Paragraph, { align: "text-center", children: jsx(Text, { size: "text-h4", children: title }) }) })) : null, description ? (jsx(Paragraph, { size: "text-xl", font: "font-light", align: "text-center", children: description })) : null] }));
-    }
-
-    const SlideCheckboxGroup = JSX(({ value, onChange, items = [], multiple }) => {
-        const handleChange = (newValue) => {
-            if (multiple) {
-                const hasAlready = value?.includes(newValue);
-                onChange &&
-                    onChange(hasAlready ? value?.filter((v) => v !== newValue) : [...(value || []), newValue]);
-            }
-            else {
-                onChange && onChange(value === newValue ? undefined : newValue);
-            }
-        };
-        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 renderFormItem = (filtrationSchema, field) => (key) => {
-        const item = filtrationSchema[key];
-        const type = item?.type;
-        switch (type) {
-            case 'array':
-                return renderCheckboxes(key, field)(item);
-            default:
-                return null;
-        }
-    };
-    const renderCheckboxes = (key, field) => (item) => {
-        const options = item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
-            [];
-        return (jsxs("div", { children: [item?.title ? (jsx("div", { className: "mb-4", 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 initialFiltrationState = {};
-    const Filtration = JSX(({ className, filtrationSchema = {}, resetButton, ...rest }) => {
-        const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
-        return (jsxs(BlockWrapper, { className: style(className), version: "transparent", ...rest, children: [jsxs("form", { className: "flex justify-between bg-white p-9 mb-1", children: [jsx("div", { className: "flex gap-11", children: Object.keys(filtrationSchema).map(renderFormItem(filtrationSchema, field)) }), resetButton ? (jsx("div", { children: jsx(Button, { className: "w-72", onClick: reset, ...resetButton }) })) : null] }), jsx(FiltrationInner, { filtrationState: filtrationState, ...rest })] }));
-    });
-    Filtration.childrenTypes = ['ProductTile'];
-    Filtration.childSchema = (content) => content?.filtrationSchema || {};
-
+    const EMPTY_VALUE$1 = {};
     function useSWRResource(filename, fallback = {}) {
         const { data } = useAsyncData(`/wcms-resources/${filename}.json`, fetchJSONUnsafe, {
             fallback,
         });
-        return data || {};
+        return data || EMPTY_VALUE$1;
     }
 
     const ICON_VERSION_MAP = {
@@ -2970,7 +3016,8 @@
     const fillMapWith = (keys, value) => new Map(keys.map((_) => [_, value]));
 
     const SEARCH_INDEX_FILENAME = 'search.index.json';
-    const useSearch = ({ basePathList = ['/'], initialQuery = '', wasOpened, }) => {
+    const DEFAULT_BASE_PATH = ['/'];
+    const useSearch = ({ basePathList = DEFAULT_BASE_PATH, initialQuery = '', wasOpened, }) => {
         const [query, setQuery] = useState(initialQuery || '');
         useEffect(() => {
             if (initialQuery !== undefined && initialQuery !== null) {
@@ -2978,7 +3025,7 @@
             }
         }, [initialQuery]);
         const key = useMemo(() => basePathList.map((_) => (wasOpened ? _ : null)), // Load search index on very first search
-        [wasOpened, ...basePathList]);
+        [wasOpened, basePathList]);
         const { data } = useAsyncData(key, fetchSearchIndex);
         const [result, setResult] = useState(null);
         useDebouncedEffect(() => {
@@ -3050,17 +3097,17 @@
         return (jsx("a", { className: style('text-l-light text-secondary-text hover:text-primary-main no-underline', 'overflow-x-hidden overflow-ellipsis whitespace-nowrap'), href: href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }));
     });
 
-    const SearchInput = JSX(({ className, isMobile, value, autoFocus, onChange, onFocus }) => {
+    const SearchInput = JSX(({ className, value, autoFocus, onChange, onFocus }) => {
         const handleChange = useCallback((ev) => {
             onChange && onChange(ev.target?.value || '');
         }, [onChange]);
-        return (jsxs("div", { className: style('font-sans relative', className), role: "form", children: [jsx("div", { className: "absolute h-full flex items-center pl-4 pointer-events-none", children: jsx(ImgInner, { image: { icon: 'LoupeIcon' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-12 pl-12 w-full text-l text-black outline-none box-border', 'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text', isMobile ? '' : 'h-full'), 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 })] }));
+        return (jsxs("div", { className: style('font-sans relative', className), role: "form", children: [jsx("div", { className: "absolute h-full flex items-center pl-4 pointer-events-none", children: jsx(ImgInner, { image: { icon: 'LoupeIcon' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-12 pl-12 w-full text-l text-black outline-none box-border', 'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'), value: value, type: "text", name: "search-bar-input", placeholder: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", autoFocus: autoFocus, onChange: handleChange, onFocus: onFocus })] }));
     });
 
     const SEARCH_DIALOG_ID = 'search';
     const SearchDialog = JSX(({ topItems }) => {
         const dialogProps = useDialogProps(SEARCH_DIALOG_ID);
-        const basePathList = topItems?.map((_) => _.href || '/');
+        const basePathList = useMemo(() => topItems?.map((_) => _.href || '/'), [topItems]);
         const [searchResult, searchInputProps] = useSearch({
             basePathList,
             initialQuery: dialogProps.message,
@@ -3086,7 +3133,7 @@
     }
 
     const MIN_QUERY_LEN = 3;
-    const SearchBarInner = JSX(({ className, isMobile }) => {
+    const SearchBar$1 = JSX(({ className }) => {
         const [value, setValue] = useState('');
         const resetQueryOnDialogClose = useCallback(() => setValue(''), []);
         useDialogHandlers({ onClose: resetQueryOnDialogClose });
@@ -3097,12 +3144,10 @@
                 open(_);
             }
         }, []);
-        return (jsxs("div", { className: className, children: [jsx(SearchInput, { isMobile: isMobile, value: value, onChange: handleInitialInputChange }), isMobile ? (jsx(CloseButton, { className: "absolute top-2 right-3", onClick: resetQueryOnDialogClose })) : null] }));
+        return (jsxs("div", { className: className, children: [jsx(SearchInput, { value: value, onChange: handleInitialInputChange }), jsx(CloseButton, { className: "absolute top-2 right-3 sm:hidden", onClick: resetQueryOnDialogClose })] }));
     });
     const isQueryLongEnough = (_) => _ && _.length >= MIN_QUERY_LEN;
 
-    const SearchBar$1 = JSX((props) => jsx(SearchBarInner, { ...props }));
-
     const Contacts = JSX(({ className = '', items, hasButton }) => (jsxs("div", { className: className, children: [items?.length ? items.map(renderContact) : null, hasButton ? (jsx(Button, { version: "primary", className: "mb-6 w-full", href: "https://www.rshb.ru/feedback/question/", target: "_blank", ariaLabel: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C", text: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C" })) : null] })));
     const renderContact = (item, index) => {
         const { type, text, description } = item;
@@ -3120,10 +3165,12 @@
     };
     const formatTel = (s) => s.replaceAll(/\D/g, '');
 
+    const horizontalNavigationLinkStyles = 'text-secondary-text';
+
     const HorizontalNavigationLink = JSX(({ className = '', index, text, ...rest }) => {
         const link = useLink();
         const { href, target, onClick } = link(rest);
-        return (jsx("a", { className: `text-secondary-text hover:text-primary-main inline-block no-underline ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` }));
+        return (jsx("a", { className: style(horizontalNavigationLinkStyles, className), href: href, target: target, onClick: onClick, children: text || `Документ ${index}` }));
     });
 
     const HorizontalNavigation = JSX(({ className = '', links }) => {
@@ -3136,7 +3183,9 @@
         return (jsx("a", { className: `text-xs-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` }));
     });
 
-    const TextInformation = JSX(({ className = '', links }) => (jsxs("div", { className: className, children: [jsx("div", { className: "pt-5", children: jsx("span", { className: "text-xs-light text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex justify-start items-start gap-5 pt-2.5", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ..._ }, String(i)))) })) : null] })));
+    const textInformationTextSize = 'text-xs-light';
+
+    const TextInformation = JSX(({ className = '', links }) => (jsxs("div", { className: className, children: [jsx("div", { className: "pt-5 sm:py-4", children: jsx(Text, { size: textInformationTextSize, color: "text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex justify-start items-start gap-5 pt-2.5", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ..._ }, String(i)))) })) : null] })));
 
     const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
     const Footer = JSX(({ className = '', ...rest }) => {
@@ -3489,7 +3538,7 @@
         return (jsxs("button", { type: "button", onClick: onClick, className: `p-[30px] min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`, children: [slide?.icon ? (jsx(ImgInner, { className: "p-5 rounded-full bg-secondary-light mr-[30px]", image: slide.icon, width: "108", height: "108" })) : null, jsxs("div", { className: "flex gap-3.5", children: [slide?.sum ? renderValueBlock$1('страховая сумма', slide.sum) : null, slide?.fee ? renderValueBlock$1('страховой взнос', slide.fee) : null] }), renderDoneIcon(isActive)] }, String(i)));
     }
     function renderValueBlock$1(title, sum) {
-        return (jsxs("div", { className: "flex flex-col text-left whitespace-pre", children: [jsxs("span", { className: "text-h6", children: [addSpacesBetweenNumbers(sum), " \u20BD"] }), jsx("span", { className: "text-secondary-text text-l mt-1", children: title })] }));
+        return (jsxs("div", { className: "flex flex-col text-left whitespace-pre", children: [jsxs("span", { className: "text-h6", children: [toLocalNumberFormat(2)(sum), " \u20BD"] }), jsx("span", { className: "text-secondary-text text-l mt-1", children: title })] }));
     }
     function renderDoneIcon(isActive) {
         return isActive ? (jsx(ImgInner, { className: `h-6 w-6 min-w-6 min-h-6 absolute right-4 top-4`, image: { icon: 'DoneIcon' }, width: "24", height: "24" })) : null;
@@ -3519,9 +3568,7 @@
         return (jsx("button", { type: "button", onClick: onClick, "aria-label": title, className: `box-border px-4 py-3 text-m-light ${btnClassName}`, children: title }, String(i)));
     }
 
-    function joinList(sep) {
-        return (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]), []);
-    }
+    const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
 
     const investmentCellColorMap = {
         yellow: 'bg-yellow',
@@ -3542,7 +3589,7 @@
         if (investmentZeroColumn) {
             colums.unshift(investmentZeroColumn);
         }
-        return (jsx(BlockWrapper, { className: `px-9 py-12 ${className}`, ...rest, children: jsxs("div", { className: "container text-m-light", children: [colums?.length ? (jsxs("div", { children: [jsxs("div", { className: "flex items-end relative pl-9 pr-5 text-white", children: [joinList(jsx("div", { className: "w-px h-4 bg-gray" }))(colums.map(renderInvestmentColumn)), jsx("div", { className: "absolute right-[30px] w-px h-4 bg-gray" })] }), jsx("div", { className: "border-t border-gray -mt-2 ml-9 mr-8" }), jsx("div", { className: "flex justify-between text-primary-text mt-3 -mx-10", children: colums.map(renderInvestmentColumnTitle) })] })) : null, items?.length ? (jsx(List, { className: "mt-9 text-l-light max-w-[657px]", items: items, itemClassName: "mb-[7px]", isDotted: isDotted })) : null] }) }));
+        return (jsx(BlockWrapper, { className: `px-9 py-12 ${className}`, ...rest, children: jsxs("div", { className: "container text-m-light", children: [colums?.length ? (jsxs("div", { children: [jsxs("div", { className: "flex items-end relative pl-9 pr-5 text-white", children: [joinList(jsx("div", { className: "w-px h-4 bg-gray" }))(colums.map(renderInvestmentColumn)), jsx("div", { className: "absolute right-[30px] w-px h-4 bg-gray" })] }), jsx("div", { className: "border-t border-gray -mt-2 ml-9 mr-8" }), jsx("div", { className: "flex justify-between text-primary-text mt-3 -mx-10", children: colums.map(renderInvestmentColumnTitle) })] })) : null, items?.length ? (jsx(List, { className: "mt-9 max-w-[657px]", items: items, isDotted: isDotted, listItemSize: "M" })) : null] }) }));
     });
     const renderInvestmentColumn = (column, i, arr) => {
         const isSecondColumn = i === 1;
@@ -3616,10 +3663,18 @@
                     }), children: [renderDescription$2(description), jsxs("div", { className: "flex flex-1 items-center mb-3", children: [qr?.src ? (jsx("div", { className: `flex justify-center mr-5 bg-white rounded-md ${containerStyle}`, children: jsx(ImgInner, { className: "w-fit", image: qr }) })) : null, renderList$1(items)] })] }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(ImgInner, { image: image }) })) : null] }));
     });
     const renderList$1 = (items) => {
-        return items?.length ? (jsx(List, { items: items, itemClassName: "text-l-light mb-2 last:mb-0" })) : (jsx("span", { className: "text-m-light text-secondary-text", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
+        return items?.length ? (jsx(List, { items: items, listItemSize: "S" })) : (jsx("span", { className: "text-m-light text-secondary-text", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
     };
     const renderDescription$2 = (description) => description ? jsx("p", { className: "text-xl-light mb-5 pt-0.5", children: description }) : null;
 
+    const initialFiltrationState = {};
+    const MortgageFiltration = JSX(({ className, filtrationSchema = {}, resetButton, ...rest }) => {
+        const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
+        return (jsxs(BlockWrapper, { className: style(className), version: "transparent", ...rest, children: [renderFiltrationForm({ field, reset, filtrationSchema, resetButton }), jsx(BaseFiltrationInner, { filtrationState: filtrationState, ...rest })] }));
+    });
+    MortgageFiltration.childrenTypes = ['ProductTile'];
+    MortgageFiltration.childSchema = (content) => content?.filtrationSchema || {};
+
     const mockPoints = [
         { coords: [55.77, 37.46], text: 'Трактир' },
         { coords: [55.66, 37.48], text: 'Трактор' },
@@ -3840,25 +3895,6 @@
     const getArraySumAndAverage = (arr) => arr.reduce((a, b) => a + b) / arr.length;
     const normalizePoints = (points) => (points ? points.map((_) => _.coords) : null);
 
-    // Добавлено для проверки
-    const nearbyOffices = [
-        { title: 'Деловой центр', time: '1 мин', distance: '~30 м.', icon: 'MetroIcon' },
-        { title: 'Выставочная', time: '5 мин', distance: '~120 м.', icon: 'MetroIcon' },
-        { title: 'Деловой центр', time: '8 мин', distance: '~350 м.', icon: 'MetroIcon' },
-    ];
-
-    const renderCurrentDaySchedule = ({ lunchHour, status, workTime }) => {
-        const hasTime = /\d+/gi.test(lunchHour);
-        const lunchHourText = hasTime ? `Перерыв ${lunchHour}` : lunchHour;
-        return status ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "p-3 border rounded-md text-m flex items-center cursor-pointer text-primary-main border-green-light mr-4", children: workTime ? workTime : null }), jsx("div", { className: "p-3 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-3 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-4", children: [jsx(Icon, { name: icon, width: "16", height: "16", className: "mr-1" }), title ? jsxs("span", { className: "text-m", children: [title, "\u00A0"] }) : null, jsxs("span", { className: "text-m-light", children: [distance ? ` (${distance})` : null, time ? `, ${time}` : null] })] }, `nearbyOffice${index}`));
-    const renderDay = ({ title, status, workTime, lunchHour, description }, inx) => (jsxs("div", { className: "flex flex-col pb-3 border-b border-solid border-main-divider mb-3 last:border-0", children: [jsxs("div", { className: "flex justify-between items-center w-full pb-1 text-l text-primary-text", children: [jsx("div", { children: title }), status ? null : jsx("div", { className: "text-m-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: "pb-1 text-s-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 pb-1 text-m-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 pb-1 text-m-light text-primary-main", children: jsx("div", { children: lunchHour }) }));
-    };
-
     const OFFICE_MAP = {
         id: 123,
         branchType: {
@@ -3939,26 +3975,30 @@
         safeBoxCaseVolumes: null,
     };
 
-    const OFFICE_MAP_URL = '/api/v1/branches';
-    // TODO: regionCode - внутренний идентификатор банка. Не соответствует государственной нумерации регионов РФ
-    // TODO: Список регионов можно получить через api/v1/regions
-    function useOfficeMap(regionCode) {
-        const { data } = useAsyncData(regionCode ? `${OFFICE_MAP_URL}?regionCode=${regionCode}` : undefined, fetchOfficeMap);
-        console.warn('Hook useOfficeMap RETURNs MOCK object for testing', data);
-        return OFFICE_MAP;
-    }
-    function fetchOfficeMap(url) {
-        if (!url) {
-            return {};
-        }
-        return fetchJSON(url, { method: 'GET' });
-    }
+    // Добавлено для проверки
+    const nearbyOffices = [
+        { title: 'Деловой центр', time: '1 мин', distance: '~30 м.', icon: 'MetroIcon' },
+        { title: 'Выставочная', time: '5 мин', distance: '~120 м.', icon: 'MetroIcon' },
+        { title: 'Деловой центр', time: '8 мин', distance: '~350 м.', icon: 'MetroIcon' },
+    ];
+
+    const renderCurrentDaySchedule = ({ lunchHour, status, workTime }) => {
+        const hasTime = /\d+/gi.test(lunchHour);
+        const lunchHourText = hasTime ? `Перерыв ${lunchHour}` : lunchHour;
+        return status ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "p-3 border rounded-md text-m flex items-center cursor-pointer text-primary-main border-green-light mr-4", children: workTime ? workTime : null }), jsx("div", { className: "p-3 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-3 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-4", children: [jsx(Icon, { name: icon, width: "16", height: "16", className: "mr-1" }), title ? jsxs("span", { className: "text-m", children: [title, "\u00A0"] }) : null, jsxs("span", { className: "text-m-light", children: [distance ? ` (${distance})` : null, time ? `, ${time}` : null] })] }, `nearbyOffice${index}`));
+    const renderDay = ({ title, status, workTime, lunchHour, description }, inx) => (jsxs("div", { className: "flex flex-col pb-3 border-b border-solid border-main-divider mb-3 last:border-0", children: [jsxs("div", { className: "flex justify-between items-center w-full pb-1 text-l text-primary-text", children: [jsx("div", { children: title }), status ? null : jsx("div", { className: "text-m-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: "pb-1 text-s-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 pb-1 text-m-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 pb-1 text-m-light text-primary-main", children: jsx("div", { 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 = useOfficeMap('000');
+        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;
@@ -3993,11 +4033,7 @@
 
     const ParagraphBlock = JSX(({ text, size, align, font, children, ...rest }) => (jsx(BlockWrapper, { ...rest, children: jsx(Paragraph, { size: size, align: align, font: font, children: text || children }) })));
 
-    const BenefitItem = JSX((props) => {
-        const { className = '', icon, label, description, version = 'primary', benefitsVersion = 'normal', } = props;
-        const listItemAlign = description ? 'items-start' : 'items-center';
-        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(version, benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? (jsx("div", { className: "text-h6 text-primary-text group-data-secondary:text-white", children: label })) : null, description ? (jsx("div", { className: "text-m-light text-secondary-text group-data-secondary:text-white", children: description })) : null] })] }));
-    });
+    const BenefitItem = JSX(({ className, icon, label, description, version = 'primary', benefitsVersion = 'normal' }) => (jsxs("div", { className: style('flex gap-5', description ? 'items-start' : 'items-center', className), children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(version, benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null, jsxs("div", { children: [label ? (jsx(Text, { size: "text-h6", color: "text-primary-text group-data-secondary:text-white", children: label })) : null, description ? (jsx(Paragraph, { size: "text-m-light", color: "text-secondary-text group-data-secondary:text-white", children: description })) : null] })] })));
     function getBenefitIconBgStyle(version, benefitsVersion) {
         let bgColorStyle = 'bg-primary-main text-black';
         if (version === 'secondary') {
@@ -4036,7 +4072,7 @@
     }
     function renderValueBlock(title, sum = 0, isAnotherBlock = false) {
         const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
-        return (jsxs("div", { className: `flex justify-between items-center gap-2 w-full whitespace-pre ${widthStyle}`, children: [jsx("span", { className: "text-secondary-text text-l-light", children: title }), jsxs("span", { className: "text-primary-main text-h6", children: [addSpacesBetweenNumbers(sum), " \u20BD"] })] }));
+        return (jsxs("div", { className: `flex justify-between items-center gap-2 w-full whitespace-pre ${widthStyle}`, children: [jsx("span", { className: "text-secondary-text text-l-light", children: title }), jsxs("span", { className: "text-primary-main text-h6", children: [toLocalNumberFormat(2)(sum), " \u20BD"] })] }));
     }
 
     function getTileHeadingType(className = '') {
@@ -4075,64 +4111,45 @@
     const renderShimmerItem = (width, index) => (jsx("div", { style: { width: `${width || 100}%` }, className: "h-4 mt-2 bg-secondary-light" }, String(index)));
     const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
 
-    const Breadcrumb = JSX(({ className = '', children, ...props }) => {
-        const link = useLink();
-        const { text, href, target, onClick } = link(props);
-        return href ? (jsx("a", { className: `no-underline ${className}`, href: href, target: target, onClick: onClick, children: jsx("span", { className: className, children: text || children }) })) : (jsx("span", { className: className, children: text || children }));
-    });
-
-    const renderBenefit$1 = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => (jsx(BenefitItem, { icon: icon, label: label, description: description, version: version, benefitsVersion: benefitsVersion }, String(i)));
+    const renderBenefit$1 = (version = 'primary', benefitsVersion = 'normal') => (props, i) => jsx(BenefitItem, { version: version, benefitsVersion: benefitsVersion, ...props }, String(i));
 
-    const ProductBlockInner = JSX(({ className = '', title, headlineVersion = 'L', description, benefitsCountOfRow = 3, benefits, benefitsVersion, buttons, image, __html, items, version = 'primary', isDotted = true, textBlockClassName = '', directionRight = true, }) => {
-        const benefitsCount = benefits?.filter((_) => _.label)?.length;
-        const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCountOfRow);
-        return (jsxs("div", { className: style('flex grow justify-between items-stretch h-full', className), children: [image?.src ? (jsx(ImgInner, { className: style('mt-[-50px]', directionRight ? 'order-2' : ''), image: image })) : null, jsxs("div", { className: style('flex flex-col', textBlockClassName), children: [jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left" }), jsxs(BaseTile, { buttons: renderButtonsSection(buttons), children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits?.map(renderBenefit$1(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", isDotted: isDotted })) : null] })] })] }));
+    const ProductBlockInner = JSX(({ className, version = 'primary', headlineVersion = 'L', title, description, benefits, benefitsVersion, items, isDotted = true, __html, buttons, image, directionRight = true, }) => {
+        const benefitsWithLabel = benefits?.filter((_) => _.label);
+        const img = image?.src ? jsx(ImgInner, { className: "mt-[-50px]", image: image }) : null;
+        return (jsxs(BaseTile, { className: className, insetTitle: jsx(Headline, { className: "max-w-[600px] xl:max-w-[800px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left", isPadding: false }), ...(directionRight ? { rightImage: img } : { leftImage: img }), buttons: renderButtonsSection(buttons), children: [benefitsWithLabel?.length ? (jsx("div", { className: "flex flex-wrap gap-6", children: benefitsWithLabel.map(renderBenefit$1(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? jsx(List, { className: "mt-5", items: items, isDotted: isDotted }) : null] }));
     });
-    const getBenefitsContainerStyles = (benefitsCountOfRow = 2) => `gap-6 mt-6 ${benefitsCountOfRow > 2
-    ? 'inline-grid grid-cols-[auto_auto_auto]'
-    : 'inline-grid grid-cols-[auto_auto]'}`;
 
-    function renderBackwardButton(button, version, className) {
-        const { text, href, target } = button;
+    function renderBackwardButton({ text, href, target, icon }, version) {
         const iconVersion = version === 'primary' ? 'white' : 'black';
-        const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
-        return (jsxs("div", { className: style('flex items-center', className), children: [jsx(Button, { version: version, rounded: true, className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3", ariaLabel: text, href: href, target: target, children: jsx(ImgInner, { className: "w-4 h-4", image: { ...backwardIcon, iconVersion: backwardIcon.iconVersion || iconVersion } }) }), text ? (jsx(Button, { version: "link", text: text, href: href, target: target, ariaLabel: text })) : null] }));
+        const commonProps = { text, href, target, ariaLabel: text };
+        return (jsxs("div", { className: "flex items-center gap-3", children: [jsx(Button, { className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center", version: version, rounded: true, ...commonProps, children: jsx(ImgInner, { className: "w-4 h-4", image: {
+                            ...icon,
+                            icon: icon?.icon || 'ArrowLeftIcon',
+                            iconVersion: icon?.iconVersion || iconVersion,
+                        } }) }), jsx(Button, { version: "link", ...commonProps })] }));
     }
 
-    const breadcrumbStyle = 'text-secondary-text group-data-secondary:text-white/80';
-    const ProductBlock = JSX((props) => {
-        const { className = '', breadcrumbs, backwardButton, version = 'primary', ...rest } = props;
-        const buttonVersion = version === 'primary' ? version : 'white';
-        return (jsxs(BlockWrapper, { className: style('overflow-hidden p-default flex flex-col box-border min-h-[454px]', className), version: version, ...rest, children: [backwardButton?.text ? renderBackwardButton(backwardButton, buttonVersion) : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs-light mb-6", children: joinList(jsx("span", { className: style('mx-2', breadcrumbStyle), children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { className: breadcrumbStyle, ...breadcrumb }, String(i))))) })) : null, jsx(ProductBlockInner, { className: "mt-10", version: version, ...rest })] }));
-    });
+    const ProductBlock = JSX(({ className, backwardButton, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden p-default flex flex-col gap-10 box-border', className), ...rest, children: [backwardButton?.text
+                ? renderBackwardButton(backwardButton, !rest.version || rest.version === 'primary' ? 'primary' : 'white')
+                : null, jsx(ProductBlockInner, { className: "grow", ...rest })] })));
 
     const ProductGallery = JSX(({ className = '', slides = [], ...rest }) => {
-        const galleryNav = slides.map((s) => s.nav);
-        const galleryBlocks = slides.map((s) => s.productBlock);
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-        const handleActiveSlideIndex = useCallback((_) => setActiveSlideIndex(_), []);
-        return (jsxs(BlockWrapper, { className: `box-border pt-12 overflow-hidden relative w-100 mb-6 ${className}`, ...rest, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest }, i)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28", children: galleryNav.map((slide, i) => renderNavButton({
-                        slide,
-                        i,
-                        isActive: Boolean(i === activeSlideIndex),
-                        onClick: () => handleActiveSlideIndex(i),
-                    })) })] }));
+        return (jsxs(BlockWrapper, { className: style('box-border py-default overflow-hidden', className), ...rest, children: [jsx("div", { className: "flex duration-1000", style: { transform: `translateX(-${activeSlideIndex * 100}%)` }, role: "list", children: slides.map(({ productBlock }, i) => (jsx("div", { className: "box-border grow-0 shrink-0 basis-full", role: "listitem", children: jsx(ProductBlockInner, { className: "pl-default h-full", headlineVersion: "XXL", ...productBlock, ...rest }) }, String(i)))) }), jsx("div", { className: "h-28 px-6 mt-6 -mb-6 flex items-center gap-2 box-border", children: slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex })) })] }));
     });
-    function renderProductBlock(block, i) {
-        return (jsx("section", { className: "box-border relative flex grow-0 shrink-0 basis-full", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { className: "pl-12 z-10 group-data-secondary:text-white", textBlockClassName: "mb-[154px]", headlineVersion: "XXL", ...block }) }) }, String(i)));
-    }
-    function renderNavButton({ slide, i, isActive, onClick }) {
+    const renderNavButton = ({ activeSlideIndex, onClick }) => ({ nav }, i) => {
+        const isActive = i === activeSlideIndex;
         const btnClassName = isActive
-            ? 'bg-white shadow-dark-blue min-w-[350px] border-none p-6'
-            : 'min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur';
+            ? 'min-w-[350px] bg-white shadow-dark-blue border-none p-6'
+            : 'min-w-[290px] ease-in duration-300 bg-white/10 px-6 py-5 hover:py-6 backdrop-blur';
         const btnTitleClassName = isActive
-            ? 'text-primary-text !text-h6 p-2'
+            ? 'text-primary-text text-h6 py-2'
             : 'text-l pb-1 text-secondary-text group-data-secondary:text-white';
         const btnDescClassName = isActive
             ? 'text-secondary-text text-l-light'
             : 'text-m-light text-secondary-text group-data-secondary:text-white/80';
-        return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `relative box-border overflow-hidden cursor-pointer text-left mx-1 grow basis-0 border border-gray group-data-secondary:border-white/50 ${btnClassName}`, children: jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `last:pb-0 ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text ${btnDescClassName}`, children: slide?.description })] }) }, String(i)));
-    }
+        return (jsxs("button", { type: "button", onClick: () => onClick(i), "aria-label": nav?.title, className: style('relative px-6 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)));
+    };
 
     function renderAdditionalDescription(additionalDescription, image) {
         if (!additionalDescription) {
@@ -4195,24 +4212,58 @@
         return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
     }
 
+    const RepresentativeOfficeInfo = JSX(({ address, email, telephone, button, className = '', __html, icon, title, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border text-left p-9', className), version: version, ...rest, children: [jsxs("div", { className: "w-full flex justify-between", children: [title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-6", title: title }) : null, renderIconBlock(icon)] }), jsxs("div", { className: "w-full", children: [__html ? renderDescriptionBlock(__html) : null, renderBlock('Адрес', address, 'GeolocationIcon'), renderBlock('Телефон', telephone, 'PhoneIcon'), renderBlock('E-mail', email, 'MailIcon'), button?.text
+                        ? renderButtonsSection([button], {
+                            className: 'mb-6',
+                        })
+                        : null] })] })));
+    const renderIconBlock = (icon) => (jsxs("div", { className: "self-end", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: icon }) : null] }));
+    const renderDescriptionBlock = (__html) => (jsx("div", { className: "border-b border-main-divider pb-5 my-5", children: jsx(RichText, { __html: __html }) }));
+    const renderBlock = (blockName, data, iconName) => (jsxs("div", { className: "flex mb-4", children: [jsx(Icon, { className: "pr-4", iconVersion: "black", name: iconName, width: "24", height: "24" }), jsxs("div", { className: "flex flex-col first:pb-1", children: [jsx(Text, { size: "text-m-light", children: blockName }), data ? (jsx(Text, { size: "text-h6", color: "text-green", children: data })) : null] })] }));
+
     const RichTextBlock = JSX((props) => {
         const { __html, richVersion, ...rest } = props;
         return (jsx(BlockWrapper, { ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) }));
     });
 
-    const RollupItem = JSX(({ className = '', label = 'Развернуть', isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => (jsx(BlockWrapper, { className: `w-full border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`, tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: `grid grid-cols-12 gap-5 [&>*]:p-0`, isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ version, label, isUnfolded, onToggle }) }) })));
+    const iconBgStyles = {
+        primary: 'bg-main-divider',
+        secondary: 'bg-white/30',
+        'secondary-light': 'bg-secondary-light',
+    };
+    const RoundedIcon = JSX(({ iconBgVersion = 'primary', ...rest }) => (jsx("div", { className: style('rounded-icon p-2.5 mr-3', iconBgStyles[iconBgVersion]), children: jsx(Icon, { ...rest }) })));
+
+    const foldableSectionStyles = 'grid grid-cols-12 [&>*]:pb-4';
+
+    const getIconName = (isUnfolded) => (isUnfolded ? 'MinusIcon' : 'PlusIcon');
+
+    const labelSize = 'text-h6';
+
+    const rollupIconVersion = 'color';
+
+    const rollupItemStyles = 'border-0 border-b border-solid border-main-divider last:border-b-0';
+
+    const RollupItem = JSX(({ className = '', label = 'Развернуть', labelIcon, isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => {
+        return (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-5 [&>*]:p-0', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ version, label, labelIcon, isUnfolded, onToggle }) }) }));
+    });
     RollupItem.childrenTypes = {
         exclude: ['RollupItem'],
     };
-    const renderFoldButton = ({ version, label: defaultLabel, isUnfolded, onToggle, }) => {
+    const renderFoldButton = ({ version, label: defaultLabel, labelIcon, isUnfolded, onToggle, }) => {
         const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
         return version === 'primary' ? (renderPrimaryFoldButton({
             label,
-            icon: isUnfolded ? 'MinusIcon' : 'PlusIcon',
+            labelIcon,
+            icon: getIconName(isUnfolded),
             onToggle,
         })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
-    const renderPrimaryFoldButton = ({ label, icon, onToggle }) => (jsxs("button", { className: `border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 cursor-pointer`, onClick: onToggle, children: [jsx(Text, { size: "text-xl", font: "font-medium", children: label }), icon ? jsx(Icon, { name: icon, width: "24", height: "24" }) : null] }));
+    const renderPrimaryFoldButton = ({ label, icon, onToggle, labelIcon }) => {
+        const iconWidth = String(labelIcon?.size?.width || 24);
+        const iconHeight = String(labelIcon?.size?.height || 24);
+        const iconName = labelIcon?.icon;
+        return (jsxs("button", { className: style('border-none bg-transparent px-0 flex justify-between items-center w-full cursor-pointer group/button', iconName ? 'py-2' : 'py-5'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main", children: [iconName ? (jsx(RoundedIcon, { name: iconName, width: iconWidth, height: iconHeight, iconVersion: labelIcon?.iconVersion })) : null, label ? (jsx(Text, { size: labelSize, font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
+    };
 
     const SAFEBOXES_URL = '/api/v1/safeboxes';
     const EMPTY_VALUE = [];
@@ -4792,7 +4843,7 @@
     const Tile = JSX(({ title, headingType = 'h3', __html, items, buttons, image, isDotted = true, listItemSize = 'M', className = '', tags, children, directionRight = true, ...rest }) => (jsxs(BlockWrapper, { className: style('flex grow justify-between items-stretch h-full p-9 pr-3 box-border', getTileRightPadding(className), getTileMinHeight(className), className), ...rest, children: [image?.src ? (jsx(ImgInner, { className: style('mt-auto ml-7', directionRight ? 'order-2' : ''), image: image })) : null, jsx(BaseTile, { title: title ? (jsx(Heading, { headingType: headingType, as: "h2", title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, buttons: renderButtonsSection(buttons, {
                     className: 'mt-8',
                     buttonClassName: 'min-w-[158px]',
-                }), children: jsxs("div", { children: [__html ? (jsx("div", { className: "max-w-[600px] mt-2.5", children: jsx(RichText, { __html: __html }) })) : null, children, jsx(List, { className: "mt-2.5", itemClassName: "mb-1.5", items: items, isDotted: isDotted, listItemSize: listItemSize }), tags?.length ? jsx(Tags, { tags: tags, className: "mt-5" }) : null] }) })] })));
+                }), children: jsxs("div", { children: [__html ? (jsx("div", { className: "max-w-[600px] mt-2.5", children: jsx(RichText, { __html: __html }) })) : null, children, jsx(List, { className: "mt-2.5", items: items, isDotted: isDotted, listItemSize: listItemSize }), tags?.length ? jsx(Tags, { tags: tags, className: "mt-5" }) : null] }) })] })));
 
     const alignStyle = {
         stretch: 'items-stretch',
@@ -4817,15 +4868,6 @@
         return (jsxs(BlockWrapper, { className: style(getPaddings(className), className), ...rest, children: [jsx(Headline, { title: title, headlineVersion: "M" }), url ? (jsx("video", { className: "m-auto w-full object-fill", preload: "metadata", poster: adjustHref(router)(previewImg?.src), style: { maxHeight: 524 }, controls: true, children: jsx("source", { src: adjustHref(router)(url) }) })) : null] }));
     });
 
-    const RepresentativeOfficeInfo = JSX(({ address, email, telephone, button, className = '', __html, icon, title, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border text-left p-9', className), version: version, ...rest, children: [jsxs("div", { className: "w-full flex justify-between", children: [title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-6", title: title }) : null, renderIconBlock(icon)] }), jsxs("div", { className: "w-full", children: [__html ? renderDescriptionBlock(__html) : null, renderBlock('Адрес', address, 'GeolocationIcon'), renderBlock('Телефон', telephone, 'PhoneIcon'), renderBlock('E-mail', email, 'MailIcon'), button?.text
-                        ? renderButtonsSection([button], {
-                            className: 'mb-6',
-                        })
-                        : null] })] })));
-    const renderIconBlock = (icon) => (jsxs("div", { className: "self-end", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: icon }) : null] }));
-    const renderDescriptionBlock = (__html) => (jsx("div", { className: "border-b border-main-divider pb-5 my-5", children: jsx(RichText, { __html: __html }) }));
-    const renderBlock = (blockName, data, iconName) => (jsxs("div", { className: "flex mb-4", children: [jsx(Icon, { className: "pr-4", iconVersion: "black", name: iconName, width: "24", height: "24" }), jsxs("div", { className: "flex flex-col first:pb-1", children: [jsx(Text, { size: "text-m-light", children: blockName }), data ? (jsx(Text, { size: "text-h6", color: "text-green", children: data })) : null] })] }));
-
     const Blocks = {
         ApplicationForm,
         BenefitsBlock,
@@ -4849,9 +4891,9 @@
         CarouselTariffsCard,
         ComparisonTable,
         ContactsBlock,
+        DepositFiltration,
         ErrorBlock,
         ExchangeRateTile,
-        Filtration,
         Footer,
         GracePeriod,
         Header,
@@ -4862,6 +4904,7 @@
         InvestmentInfo,
         LinkDocs,
         MobileAppTile,
+        MortgageFiltration,
         OfficeMap,
         OfficeServicesBlock,
         ParagraphBlock,
@@ -4871,6 +4914,7 @@
         ProductGallery,
         ProductTile,
         PromoTile,
+        RepresentativeOfficeInfo,
         RichTextBlock,
         RollupItem,
         SafeDepositRental,
@@ -4883,7 +4927,6 @@
         VerticalLayout,
         Video,
         ExchangeRateOffice,
-        RepresentativeOfficeInfo,
     };
 
     const debounce = (fn, delay = 600) => {
@@ -5026,7 +5069,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.10.9";
+    const packageVersion = "0.11.0";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;