@redneckz/wildless-cms-uni-blocks 0.10.5 → 0.10.7

package/bundle/bundle.umd.js

@@ -358,6 +358,53 @@
     };
     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 useForm = (initialState, onSubmit) => {
+        const [formState, setFormState] = useState(initialState);
+        const [isDirtyForm, setDirtyForm] = useState(false);
+        const [dirtyFieldsMap, setDirtyFieldsMap] = useState({});
+        const handlersMap = useRef({});
+        const field = useCallback((fieldName) => {
+            if (!handlersMap.current) {
+                handlersMap.current = {};
+            }
+            handlersMap.current[fieldName] ||= (value) => {
+                setFormState((prev) => ({ ...prev, [fieldName]: value }));
+                setDirtyFieldsMap((prev) => ({ ...prev, [fieldName]: true }));
+            };
+            return {
+                value: formState[fieldName],
+                isDirty: isDirtyForm || dirtyFieldsMap[fieldName],
+                onChange: handlersMap.current[fieldName],
+            };
+        }, [formState, isDirtyForm, dirtyFieldsMap]);
+        const reset = useCallback(() => {
+            setFormState(initialState);
+            setDirtyForm(false);
+            setDirtyFieldsMap({});
+        }, [initialState]);
+        const handleSubmit = useCallback((e) => {
+            e.preventDefault();
+            setDirtyForm(true);
+            onSubmit && onSubmit(formState);
+        }, [onSubmit, formState]);
+        return [
+            formState,
+            {
+                isDirty: isDirtyForm || Object.values(dirtyFieldsMap).some(Boolean),
+                field,
+                reset,
+                onSubmit: handleSubmit,
+            },
+        ];
+    };
+
+    const objectValidator = (validatorsMap) => (o) => (o &&
+        Object.entries(validatorsMap).flatMap(([key, validator]) => validator(o[key]))) ||
+        [];
+
+    const isValidationSuccess = (info) => !info?.length;
+    const validator = (predicate) => (message) => (_) => predicate(_) ? [] : [message];
+
     const consistentDataMap = new Map();
     function useAsyncData(key, fetcher, { fallback } = {}) {
         const args = useMemo(() => keyToArgs(key), [key]);
@@ -439,9 +486,10 @@
     }
 
     const REGIONS_URL$1 = '/api/v1/regions';
+    const EMPTY_VALUE$2 = [];
     function useGetRegions() {
         const { data } = useAsyncData(REGIONS_URL$1, fetchJSONUnsafe);
-        return data || [];
+        return data || EMPTY_VALUE$2;
     }
 
     const useDialog = (id = '') => ({
@@ -606,49 +654,61 @@
 
     const Footnote = JSX(({ link }) => (jsxs(Paragraph, { size: "text-s-light", color: "text-secondary-text", children: [jsx(Text, { children: "\u041D\u0430\u0436\u0438\u043C\u0430\u044F \u043A\u043D\u043E\u043F\u043A\u0443, \u0432\u044B \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0435\u0442\u0435 \u0441\u043E\u0433\u043B\u0430\u0441\u0438\u0435 \u0441 " }), link ? (jsx(Button, { href: link.href, ariaLabel: "\u0443\u0441\u043B\u043E\u0432\u0438\u044F \u043F\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043D\u043D\u044B\u0445", target: link.target, className: "text-primary-main", children: jsx(Text, { children: link.text }) })) : null] })));
 
-    const Input = JSX(({ className = '', inputClassName = '', id, name, type = 'text', label, value = '', valid = true, children, onChange, onBlur, ...inputProps }) => {
+    const withValidator = (props, validator) => {
+        const { value, isDirty } = props;
+        const errors = isDirty ? validator(value) : [];
+        return {
+            ...props,
+            errors,
+            error: errors[0],
+        };
+    };
+
+    const Input = JSX(({ className = '', inputClassName = '', id, name, type = 'text', label, value = '', valid = true, children, onChange, ...inputProps }) => {
         const handleChange = useCallback((e) => {
-            const validInputValue = e.target.validity.valid ? e.target.value : value;
-            onChange(validInputValue);
+            onChange && onChange(e.target?.value || '');
         }, [onChange]);
-        const handleBlur = useCallback((e) => {
-            if (!onBlur) {
-                return;
-            }
-            const validInputValue = e.target.validity.valid ? e.target.value : value;
-            onBlur(validInputValue);
-        }, [onBlur]);
         const paddingStyle = children ? 'pr-8' : '';
         const validStyle = valid
             ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
             : 'border-error';
-        return (jsxs("div", { className: `relative ${className}`, children: [label ? jsx("label", { className: "block text-m-light mb-2", children: label }) : null, jsx("input", { className: `w-full border rounded-md text-primary-text outline-none p-4 ${paddingStyle} ${validStyle} ${inputClassName}`, id: id, name: name || id, type: type, value: value, onChange: handleChange, onBlur: handleBlur, ...inputProps }), children] }));
-    });
+        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] }));
+    });
+
+    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 })] })));
+
+    const isPlaceholder = (_) => _ === '_';
+    const isDigit = (_) => /\d/.test(_);
+    const isWildcard = (_) => isPlaceholder(_) || isDigit(_);
+    const phonePattern = [...'+7 (___) ___-__-__'];
+    const firstPlaceholderIndex = phonePattern.findIndex(isPlaceholder);
+    const phoneWildcardIndicies = phonePattern.map((_, i) => isWildcard(_) ? phonePattern.slice(0, i).filter(isWildcard).length : -1);
+    function normalizePhone(phone) {
+        const phoneNumbers = phone.replace(/\D/g, '');
+        const applyPlaceholder = (_, i) => isDigit(_) ? _ : phoneNumbers.charAt(phoneWildcardIndicies[i]) || _;
+        const result = phonePattern.map(applyPlaceholder);
+        const resultLength = phoneWildcardIndicies.indexOf(phoneNumbers.length - 1) + 1;
+        return (resultLength ? result.slice(0, Math.max(firstPlaceholderIndex, resultLength)) : result).join('');
+    }
 
-    const InputControl = JSX(({ className, label, value, error, onChange, onBlur }) => {
-        return (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: jsx(Text, { size: "text-xs-light", color: "text-error", children: error ? error : null }) })] }));
+    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 ERROR_EMPTY = 'Некорректно заполненное поле';
-    const validate = (key, value) => {
-        switch (key) {
-            case 'name':
-                return isName(value);
-            case 'inn':
-                return isTin(value);
-            case 'mail':
-                return isEmpty(value);
-            case 'phone':
-                return isEmpty(value);
-            default:
-                return isEmpty(value);
-        }
-    };
-    const isEmpty = (value) => (value ? '' : ERROR_EMPTY);
-    const isName = (value) => (value.length > 1 ? '' : ERROR_EMPTY);
-    const isTin = (value) => (value.length === 10 || value.length === 12 ? '' : ERROR_EMPTY);
+    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 })] })));
+
+    const pattern = (regexp) => validator((_) => typeof _ === 'string' && regexp.test(_));
+
+    const required = validator((_) => _ !== null && _ !== undefined && _ !== '');
+
+    const ERROR_MESSAGE = 'Некорректно заполненное поле';
+    const defaultValidator = required(ERROR_MESSAGE);
+    const nameValidator = validator((_) => typeof _ === 'string' && _.length > 1)(ERROR_MESSAGE);
+    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 = ({ fullName, inn, name, phone, handleChange, errors, handleChangeErrors, }) => (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", error: errors['fullName'], value: fullName, onChange: (value) => handleChange({ fullName: value }), onBlur: (value) => handleChangeErrors({ fullName: validate('fullName', value) }) }), 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", error: errors['name'], value: name, onChange: (value) => handleChange({ name: value }), onBlur: (value) => handleChangeErrors({ name: validate('name', value) }) })] }), jsxs("div", { className: "w-1/2", children: [jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0418\u041D\u041D", error: errors['inn'], value: inn, onChange: (value) => handleChange({ inn: value }), onBlur: (value) => handleChangeErrors({ inn: validate('inn', value) }) }), jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", error: errors['phone'], value: phone, onChange: (value) => handleChange({ phone: value }), onBlur: (value) => handleChangeErrors({ phone: validate('phone', value) }) })] })] }));
+    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 ACQUIRING_TYPES = [
         {
@@ -668,6 +728,14 @@
         },
     ];
 
+    function useBool(defaultValue = false) {
+        const [value, setValue] = useState(defaultValue);
+        const setTrue = useCallback(() => setValue(true), []);
+        const setFalse = useCallback(() => setValue(false), []);
+        const toggle = useCallback(() => setValue((_) => !_), []);
+        return [value, { setValue, setTrue, setFalse, toggle }];
+    }
+
     function useOutsideClick(onClick) {
         const targetRef = useRef(null);
         useEffect(() => {
@@ -707,194 +775,109 @@
     const getSvgSize = (width) => (width ? '' : 'w-full h-full');
     const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
 
-    const Select = JSX(({ className = '', isBorder = true, label, options = [], value, onChange, placeholder = '', valid = true, onValidate, }) => {
-        const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
-        const [isOpen, setIsOpen] = useState(false);
-        const handleClickOutside = useCallback(() => setIsOpen(false), []);
-        const wrapperRef = useOutsideClick(handleClickOutside);
-        const choiceOption = (option) => {
-            setSelectedItem(option);
-            setIsOpen(false);
-            onChange(option);
-            onValidate && onValidate(option.text);
-        };
-        const isSelected = (option) => Boolean(option.key === selectedItem.key);
-        useEffect(() => {
-            setSelectedItem(value || { key: '', text: '' });
-        }, [value]);
-        return (jsxs("div", { className: `${className}`, ref: wrapperRef, children: [label ? (jsx("div", { className: "mb-2", children: jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: label }) })) : null, jsxs("div", { className: `relative ${isOpen ? 'z-20' : 'z-10'}`, children: [jsxs("div", { className: `text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
-            ${getBorderStyle(isBorder, valid)}`, onClick: () => setIsOpen(!isOpen), children: [jsx("p", { className: "p-4 pr-8 h-14 overflow-hidden text-ellipsis whitespace-nowrap", children: selectedItem?.text || placeholder }), jsx(Icon, { name: "ArrowUpIcon", width: "16", height: "16", className: `absolute right-3 ${isOpen ? '' : 'rotate-180'}` })] }), options?.length ? (jsx("div", { className: `h-0 ${renderOptionsStyle(isOpen)}`, children: jsx("div", { className: `bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`, children: options.map(renderOption(choiceOption, isOpen, isSelected)) }) })) : null] })] }));
+    const Select = JSX(({ className = '', label, options = [], value, valid = true, isBorder = true, placeholder = '', onChange, }) => {
+        const [isOpen, { setFalse: close, toggle }] = useBool();
+        const wrapperRef = useOutsideClick(close);
+        const handleChange = useCallback((option) => {
+            close();
+            onChange && onChange(option);
+        }, [onChange]);
+        const isSelected = (option) => option.key === value?.key;
+        return (jsxs("div", { className: className, ref: wrapperRef, children: [label ? (jsx("div", { className: "mb-2", children: jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: label }) })) : null, jsxs("div", { className: style('relative', isOpen ? 'z-20' : 'z-10'), children: [jsxs("div", { className: style('text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer', getBorderStyle(isBorder, valid)), onClick: toggle, children: [jsx("p", { className: "p-4 pr-8 h-14 overflow-hidden text-ellipsis whitespace-nowrap", children: formatOption(value) || placeholder }), jsx(Icon, { className: style('absolute right-3', isOpen ? '' : 'rotate-180'), name: "ArrowUpIcon", width: "16", height: "16" })] }), options?.length ? (jsx("div", { className: style('h-0', isOpen ? '' : 'overflow-hidden'), children: jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: options.map(renderOption(handleChange, isOpen, isSelected)) }) })) : null] })] }));
     });
-    const renderOptionsStyle = (isOpen) => (isOpen ? '' : 'overflow-hidden');
-    const renderOption = (choiceOption, isOpen, isSelected) => (option, i) => {
-        return (jsxs("div", { onClick: () => {
-                choiceOption(option);
-            }, className: "flex px-4 py-3 cursor-pointer hover:bg-main-divider pr-11 relative", children: [jsx("span", { className: "min-h-6", children: option.text }), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", className: ['absolute right-4 pt-0.5', isSelected(option) && isOpen ? '' : 'hidden'].join(' ') })] }, String(i)));
-    };
-    const getBorderStyle = (isBorder, valid) => `
-  ${isBorder ? 'border rounded-md hover:border-primary-hover' : ''} ${valid ? ' border-gray' : 'border-error'} `;
+    const renderOption = (handleChange, isOpen, isSelected) => (option, i) => (jsxs("div", { onClick: () => {
+            handleChange(option);
+        }, className: "flex px-4 py-3 cursor-pointer hover:bg-main-divider pr-11 relative", children: [jsx("span", { className: "min-h-6", children: formatOption(option) }), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", className: style('absolute right-4 pt-0.5', isSelected(option) && isOpen ? '' : 'hidden') })] }, String(i)));
+    const formatOption = (_) => _?.text || _?.key || '';
+    const getBorderStyle = (isBorder, valid) => style(isBorder ? 'border rounded-md hover:border-primary-hover' : '', valid ? ' border-gray' : 'border-error');
 
-    const SelectControl = JSX(({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label, error, onValidate, }) => {
-        const dataFormat = data
-            .filter(Boolean)
-            .map((_) => ({ key: _?.[fieldValue || fieldLabel], text: _?.[fieldLabel] }));
-        const selectedObj = dataFormat.find((_) => _.key === selected);
-        return (jsxs("div", { children: [jsx(Select, { options: dataFormat, label: label, valid: Boolean(!error), placeholder: placeholder || selected, onChange: (_) => setSelected(_.key), value: selectedObj, onValidate: onValidate }), jsx("div", { className: "h-2", children: jsx(Text, { size: "text-xs-light", color: "text-error", children: error ? error : null }) })] }));
-    });
+    const SelectControl = JSX((props) => (jsxs("div", { children: [jsx(Select, { ...props, valid: !props.error }), jsx("div", { className: "h-2", children: props.error ? (jsx(Text, { size: "text-xs-light", color: "text-error", children: props.error })) : null })] })));
 
-    const renderAcquiringRegion = ({ acquiringType, regions, region, handleChange, errors, handleChangeErrors, }) => (jsxs("div", { className: "flex justify-between gap-5 mb-7", children: [jsx("div", { className: "w-1/2", children: jsx(SelectControl, { data: ACQUIRING_TYPES, fieldValue: "name", fieldLabel: "name", error: errors['acquiringType'], selected: acquiringType, setSelected: (value) => handleChange({ acquiringType: value }), onValidate: (value) => handleChangeErrors({ acquiringType: validate('acquiringType', value) }), label: "\u0412\u0438\u0434 \u044D\u043A\u0432\u0430\u0439\u0440\u0438\u043D\u0433\u0430", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u044D\u043A\u0432\u0430\u0439\u0440\u0438\u043D\u0433" }) }), jsx("div", { className: "w-1/2", children: jsx(SelectControl, { data: regions, fieldValue: "code", fieldLabel: "name", error: errors['region'], selected: region, setSelected: (value) => handleChange({ region: value }), onValidate: (value) => handleChangeErrors({ region: validate('region', value) }), label: "\u0410\u0434\u0440\u0435\u0441", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441" }) })] }));
+    const renderAcquiringRegion = ({ regions, field }) => (jsxs("div", { className: "flex justify-between gap-5 mb-7", children: [jsx("div", { className: "w-1/2", children: jsx(SelectControl, { label: "\u0412\u0438\u0434 \u044D\u043A\u0432\u0430\u0439\u0440\u0438\u043D\u0433\u0430", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u044D\u043A\u0432\u0430\u0439\u0440\u0438\u043D\u0433", options: ACQUIRING_TYPES.map(({ name: key = '' }) => ({ key, text: key })), ...withValidator(field('acquiringType'), defaultValidator) }) }), jsx("div", { className: "w-1/2", children: jsx(SelectControl, { label: "\u0410\u0434\u0440\u0435\u0441", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441", options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }) })] }));
 
-    const SlideCheckbox = JSX(({ value = false, text, type = 'checkbox', onChange }) => (jsxs("div", { role: type, "aria-checked": value, className: "flex justify-start items-center w-full cursor-pointer mb-4", onClick: () => onChange && onChange(!value), children: [jsx("div", { className: `relative flex-shrink-0 duration-300 w-9 h-5 mr-3 rounded-2xl ${value ? 'bg-primary-main' : 'bg-main-divider'}`, children: jsx("div", { className: `absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded-full ${value ? 'left-[50%]' : 'left-[5%]'}` }) }), jsx("div", { children: jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-text", children: text }) })] })));
+    const SlideCheckbox = JSX(({ value = false, text, type = 'checkbox', onChange }) => (jsxs("div", { role: type, "aria-checked": value, className: "flex justify-start items-center w-full cursor-pointer mb-3", onClick: () => onChange && onChange(!value), children: [jsx("div", { className: style('relative flex-shrink-0 duration-300 w-9 h-5 mr-3 rounded-2xl', value ? 'bg-primary-main' : 'bg-main-divider'), children: jsx("div", { className: style('absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded-full', value ? 'left-[50%]' : 'left-[5%]') }) }), jsx(Text, { size: "text-l", font: "font-light", color: "text-primary-text", children: text })] })));
 
-    const renderSlideCheckboxes = ({ onlineСheckout, posTerminal, handleChange, }) => (jsxs("div", { className: "mb-5", children: [jsx(SlideCheckbox, { value: onlineСheckout, text: "\u0425\u043E\u0447\u0443 \u043A\u0443\u043F\u0438\u0442\u044C \u043E\u043D\u043B\u0430\u0439\u043D-\u043A\u0430\u0441\u0441\u0443", onChange: () => handleChange({ onlineСheckout: !onlineСheckout }) }), jsx(SlideCheckbox, { value: posTerminal, text: "\u0425\u043E\u0447\u0443 \u043A\u0443\u043F\u0438\u0442\u044C POS-\u0442\u0435\u0440\u043C\u0438\u043D\u0430\u043B", onChange: () => handleChange({ posTerminal: !posTerminal }) })] }));
+    const renderSlideCheckboxes = (field) => (jsxs("div", { className: "mb-5", children: [jsx(SlideCheckbox, { text: "\u0425\u043E\u0447\u0443 \u043A\u0443\u043F\u0438\u0442\u044C \u043E\u043D\u043B\u0430\u0439\u043D-\u043A\u0430\u0441\u0441\u0443", ...field('onlineCheckout') }), jsx(SlideCheckbox, { text: "\u0425\u043E\u0447\u0443 \u043A\u0443\u043F\u0438\u0442\u044C POS-\u0442\u0435\u0440\u043C\u0438\u043D\u0430\u043B", ...field('posTerminal') })] }));
 
     const renderSubmitButton = (button, className) => {
         const buttonStyle = getRegularButtonClasses({
             className: 'text-white',
             version: button?.version,
         });
-        return (jsx("button", { type: "submit", className: `p-4 ${buttonStyle} ${className}`, children: button?.text ? button.text : 'Отправить заявку' }));
-    };
-
-    const useForm$1 = ({ initialFormState, errorsInitialState, handleSubmit, }) => {
-        const [formState, setFormState] = useState(initialFormState);
-        const [errors, setErrors] = useState(errorsInitialState || {});
-        const handleChange = useCallback((state) => setFormState((oldState) => ({ ...oldState, ...state })), []);
-        const handleChangeErrors = useCallback((state) => setErrors((oldState) => ({ ...oldState, ...state })), []);
-        const sendForm = useCallback(async (sendData) => {
-            const errorsTemp = [];
-            const validateData = Object.keys(formState)
-                .filter((_) => Object.keys(errors).includes(_))
-                .reduce((obj, key) => {
-                obj[key] = formState[key];
-                return obj;
-            }, {});
-            for (const [key, value] of Object.entries(validateData)) {
-                const error = validate(key, value);
-                errorsTemp.push(error);
-                handleChangeErrors({ [key]: error });
-            }
-            if (errorsTemp.some((_) => _.length !== 0)) {
-                return;
-            }
-            handleSubmit && (await handleSubmit(sendData));
-        }, [formState]);
-        return {
-            formState,
-            handleChange,
-            errors,
-            handleChangeErrors,
-            sendForm,
-        };
+        return (jsx("button", { type: "submit", className: style('p-4', buttonStyle, className), children: button?.text ? button.text : 'Отправить заявку' }));
     };
 
     const initialFormState$4 = {
-        acquiringType: 'Торговый эквайринг',
-        region: '',
+        acquiringType: { key: 'Торговый эквайринг' },
         fullName: '',
         inn: '',
         name: '',
         phone: '',
-        onlineСheckout: false,
+        onlineCheckout: false,
         posTerminal: false,
     };
-    const errorsInitialState$2 = {
-        acquiringType: '',
-        region: '',
-        fullName: '',
-        inn: '',
-        name: '',
-        phone: '',
-    };
+    const acquiringValidator = objectValidator({
+        acquiringType: defaultValidator,
+        region: defaultValidator,
+        fullName: defaultValidator,
+        inn: innValidator,
+        name: nameValidator,
+        phone: phoneValidator,
+    });
     const ApplicationFormAcquiring = JSX((props) => {
-        const { button, link, handleSubmit } = props;
-        const { formState, errors, handleChange, handleChangeErrors, sendForm } = useForm$1({
-            initialFormState: initialFormState$4,
-            errorsInitialState: errorsInitialState$2,
-            handleSubmit,
-        });
-        const { acquiringType, region, fullName, inn, name, phone, onlineСheckout, posTerminal } = formState;
-        const regions = useGetRegions();
-        const onSubmit = (e) => {
-            e.preventDefault();
-            sendForm({
-                typeForm: 'acqr',
-                region: regions.find((_) => _.code === region)?.name || '',
-                partnerComments: `Вид эквайринга=${acquiringType}/Онлайн касса=${onlineСheckout}/POS-терминал=${posTerminal}`,
-                fullName,
-                inn,
-                name,
-                phone,
-            });
-        };
-        return (jsxs("form", { onSubmit: onSubmit, className: "container", 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({
-                    acquiringType,
-                    regions,
-                    region,
-                    handleChange,
-                    errors,
-                    handleChangeErrors,
-                }), 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({
+        const { button, link, onSubmit } = props;
+        const handleSubmit = useCallback((formState) => {
+            const { acquiringType, region, fullName, inn, name, phone, onlineCheckout, posTerminal } = formState;
+            isValidationSuccess(acquiringValidator(formState)) &&
+                onSubmit({
+                    typeForm: 'acqr',
+                    region: region?.text || '',
+                    partnerComments: `Вид эквайринга=${acquiringType?.key || ''}/Онлайн касса=${onlineCheckout}/POS-терминал=${posTerminal}`,
                     fullName,
                     inn,
                     name,
                     phone,
-                    handleChange,
-                    errors,
-                    handleChangeErrors,
-                }), renderSlideCheckboxes({
-                    onlineСheckout,
-                    posTerminal,
-                    handleChange,
-                }), renderSubmitButton(button, 'mb-4'), jsx(Footnote, { link: link })] }));
+                });
+        }, [onSubmit]);
+        const [, { field, ...formProps }] = useForm(initialFormState$4, handleSubmit);
+        const regions = useGetRegions();
+        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 = ({ name, phone, mail, inn, handleChange, errors, handleChangeErrors, }) => (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", error: errors['name'], value: name, onChange: (value) => handleChange({ name: value }), onBlur: (value) => handleChangeErrors({ name: validate('name', value) }) }), jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0418\u041D\u041D", error: errors['inn'], value: inn, onChange: (value) => handleChange({ inn: value }), onBlur: (value) => handleChangeErrors({ inn: validate('inn', value) }) })] }), jsxs("div", { className: "w-1/2", children: [jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", error: errors['phone'], value: phone, onChange: (value) => handleChange({ phone: value }), onBlur: (value) => handleChangeErrors({ phone: validate('phone', value) }) }), 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", error: errors['mail'], value: mail, onChange: (value) => handleChange({ mail: value }), onBlur: (value) => handleChangeErrors({ mail: validate('mail', value) }) })] })] }));
+    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 renderRegion$1 = ({ regions, region, handleChange, errors, handleChangeErrors, }) => (jsx("div", { className: "flex justify-between gap-5 mb-5", children: jsx("div", { className: "w-full", children: jsx(SelectControl, { data: regions, fieldValue: "code", fieldLabel: "name", error: errors['region'], selected: region, setSelected: (value) => handleChange({ region: value }), onValidate: (value) => handleChangeErrors({ region: validate('region', value) }), label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D" }) }) }));
+    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) }) }) }));
 
     const initialFormState$3 = {
-        region: '',
         name: '',
         phone: '',
         inn: '',
         mail: '',
     };
+    const businessCardValidator = objectValidator({
+        region: defaultValidator,
+        name: nameValidator,
+        phone: phoneValidator,
+        inn: innValidator,
+        mail: defaultValidator,
+    });
     const ApplicationFormBusinessCard = JSX((props) => {
-        const { button, link, handleSubmit } = props;
-        const { formState, errors, handleChange, handleChangeErrors, sendForm } = useForm$1({
-            initialFormState: initialFormState$3,
-            errorsInitialState: initialFormState$3,
-            handleSubmit,
-        });
-        const { region, name, phone, inn, mail } = formState;
-        const regions = useGetRegions();
-        const onSubmit = (e) => {
-            e.preventDefault();
-            sendForm({
-                typeForm: 'bcrd',
-                region: regions.find((_) => _.code === region)?.name || '',
-                name,
-                phone,
-                inn,
-                mail,
-            });
-        };
-        return (jsxs("form", { onSubmit: onSubmit, className: "container", children: [renderRegion$1({
-                    regions,
-                    region,
-                    handleChange,
-                    errors,
-                    handleChangeErrors,
-                }), renderBusinessCardDataOrganization({
+        const { button, link, onSubmit } = props;
+        const handleSubmit = useCallback((formState) => {
+            const { region, name, phone, inn, mail } = formState;
+            isValidationSuccess(businessCardValidator(formState)) &&
+                onSubmit({
+                    typeForm: 'bcrd',
+                    region: region?.text || '',
                     name,
                     phone,
                     inn,
                     mail,
-                    handleChange,
-                    errors,
-                    handleChangeErrors,
-                }), renderSubmitButton(button, 'mb-4'), jsx(Footnote, { link: link })] }));
+                });
+        }, [onSubmit]);
+        const [, { field, ...formProps }] = useForm(initialFormState$3, handleSubmit);
+        const regions = useGetRegions();
+        return (jsxs("form", { className: "container", onSubmit: formProps.onSubmit, children: [renderRegion$1({ regions, field }), renderBusinessCardDataOrganization(field), renderSubmitButton(button, 'mb-4'), jsx(Footnote, { link: link })] }));
     });
 
     const BRANCHES_URL = '/api/v1/branches';
@@ -908,58 +891,63 @@
         return result || EMPTY_VALUE$1;
     };
 
-    const MIN_CREDIT_AMOUNT = 50000;
-    const MAX_CREDIT_AMOUNT = 3000000;
-    const ITEMS_CREDIT_AMOUNT = ['От 50 000 ₽', 'До 3 000 000 ₽'];
+    const MIN_CREDIT_AMOUNT = 1000;
+    const MAX_CREDIT_AMOUNT = 1000000000;
+    const ITEMS_CREDIT_AMOUNT = ['От 1 000 ₽', 'До 1 000 000 000 ₽'];
     const MIN_CREDIT_TERM = 1;
-    const MAX_CREDIT_TERM = 60;
-    const ITEMS_CREDIT_TERM = ['От 1 года', 'До 5 лет'];
+    const MAX_CREDIT_TERM = 180;
+    const ITEMS_CREDIT_TERM = ['От 1 мес', 'До 15 лет'];
 
-    const renderCreditDataOrganization = ({ fullName, inn, name, phone, mail, annualRevenue, handleChange, errors, handleChangeErrors, }) => (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", value: fullName, onChange: (value) => handleChange({ fullName: value }) }), jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0418\u041D\u041D", error: errors['inn'], value: inn, onChange: (value) => handleChange({ inn: value }), onBlur: (value) => handleChangeErrors({ inn: validate('inn', value) }) }), jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", error: errors['phone'], value: phone, onChange: (value) => handleChange({ phone: value }), onBlur: (value) => handleChangeErrors({ phone: validate('phone', value) }) })] }), 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", error: errors['annualRevenue'], value: annualRevenue, onChange: (value) => handleChange({ annualRevenue: value }), onBlur: (value) => handleChangeErrors({ annualRevenue: validate('annualRevenue', value) }) }), 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", error: errors['name'], value: name, onChange: (value) => handleChange({ name: value }), onBlur: (value) => handleChangeErrors({ name: validate('name', value) }) }), 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", value: mail, onChange: (value) => handleChange({ mail: value }) })] })] }));
+    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 addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', {}).format(number);
 
     const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 
-    const getSanitizedValue = (_) => _.split(/\s+/).join('');
+    function parseDecimal(value) {
+        const rawValue = (value || '').replace(/\D/g, '');
+        const unsafeDecimal = parseInt(rawValue, 10);
+        return Number.isNaN(unsafeDecimal) ? 0 : unsafeDecimal;
+    }
 
-    const DISABLED_INPUT_CLASSES$1 = 'disabled:border-gray disabled:bg-main-divider';
-    const InputRange = JSX(({ className, title, items = [], min = 1, max = 100, step = 1, value = min, disabled = false, onChange, }) => {
-        const handleChange = (e) => {
-            if (!onChange) {
-                return;
-            }
-            onChange(clamp(Number(getSanitizedValue(e.target.value)), min, max));
-        };
+    function renderRangeWithTicks({ list = [], min, max, step, value = list[0] || min, disabled, onChange, }) {
+        const rangeValue = list.length ? list.indexOf(value) : value;
         const inputStyle = {
-            backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
+            backgroundSize: `${(((rangeValue - min) * 100) / (max - min)).toFixed(2)}% 100%`,
         };
-        return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? jsx("span", { className: "text-m-light text-primary-text", children: title }) : null, jsx("input", { className: `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$1}`, value: addSpacesBetweenNumbers(value), disabled: disabled, onChange: handleChange, onBlur: handleChange }), jsx("div", { className: "absolute inset-x-0 -bottom-1 px-4 leading-[18px]", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider", type: "range", min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, style: inputStyle }) })] }), renderRangeCaption$1(items)] }));
-    });
-    function renderRangeCaption$1(items) {
-        return (jsx("div", { className: "flex justify-between my-2", children: items.map((item, i) => (jsx("span", { className: "text-s-light text-secondary-text", children: item }, String(i)))) }));
+        return (jsxs("div", { children: [list.length ? (jsx("div", { className: "absolute w-full flex justify-between -bottom-[3px] px-4", children: list.map((_, i) => (jsx("div", { className: `w-2 h-2 rounded-full ${rangeValue <= i || disabled ? 'bg-gray' : 'bg-primary-main'}` }, String(i)))) })) : null, jsx("div", { className: "absolute inset-x-0 -bottom-1 px-4 leading-[18px]", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider relative z-10", style: inputStyle, type: "range", min: min, max: max, step: step, value: rangeValue, disabled: disabled, onInput: ((e) => {
+                            const rawValue = parseDecimal(e.target?.value);
+                            const newValue = list.length ? list[rawValue] : rawValue;
+                            onChange && onChange(newValue || 0);
+                        }) }) })] }));
     }
 
-    const renderInputRange = (props) => (jsxs("div", { className: "w-1/2", children: [jsx("label", { children: jsx(Text, { size: "text-m-light", children: props.label }) }), jsx(InputRange, { ...props })] }));
-
-    const renderCreditParameters = ({ amount, term, handleChange, }) => (jsxs("div", { className: "flex justify-between gap-5 mb-7", children: [renderInputRange({
-                label: 'Сумма кредита, ₽',
-                value: amount,
-                onChange: (value) => handleChange({ amount: value }),
-                min: MIN_CREDIT_AMOUNT,
-                max: MAX_CREDIT_AMOUNT,
-                items: ITEMS_CREDIT_AMOUNT,
-            }), renderInputRange({
-                label: 'Срок кредита, месяцев',
-                value: term,
-                onChange: (value) => handleChange({ term: value }),
-                min: MIN_CREDIT_TERM,
-                max: MAX_CREDIT_TERM,
-                items: ITEMS_CREDIT_TERM,
-            })] }));
-
-    const renderRegionDepartment = ({ regions, region, branches, department, handleChange, errors, handleChangeErrors, }) => (jsxs("div", { className: "flex justify-between gap-5 mb-7", children: [jsx("div", { className: "w-1/2", children: jsx(SelectControl, { data: regions, fieldValue: "code", fieldLabel: "name", error: errors['region'], selected: region, setSelected: (value) => handleChange({ region: value, department: '' }), onValidate: (value) => handleChangeErrors({ region: validate('region', value) }), label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D" }) }), jsx("div", { className: "w-1/2", children: jsx(SelectControl, { data: branches, fieldValue: "branchCode", fieldLabel: "address", error: errors['department'], selected: department, setSelected: (value) => handleChange({ department: value }), onValidate: (value) => handleChangeErrors({ department: validate('department', value) }), label: "\u0410\u0434\u0440\u0435\u0441", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441" }) })] }));
+    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 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)] }));
+    });
+    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)))) }));
+
+    const renderCreditParameters = (field) => (jsxs("div", { className: "flex justify-between gap-5 mb-7", children: [jsxs("div", { className: "w-1/2", children: [jsx("label", { children: jsx(Text, { size: "text-m-light", children: "\u0421\u0443\u043C\u043C\u0430 \u043A\u0440\u0435\u0434\u0438\u0442\u0430, \u20BD" }) }), jsx(InputRange, { items: ITEMS_CREDIT_AMOUNT, min: MIN_CREDIT_AMOUNT, max: MAX_CREDIT_AMOUNT, ...field('amount') })] }), jsxs("div", { className: "w-1/2", children: [jsx("label", { children: jsx(Text, { size: "text-m-light", children: "\u0421\u0440\u043E\u043A \u043A\u0440\u0435\u0434\u0438\u0442\u0430, \u043C\u0435\u0441\u044F\u0446\u0435\u0432" }) }), jsx(InputRange, { items: ITEMS_CREDIT_TERM, min: MIN_CREDIT_TERM, max: MAX_CREDIT_TERM, ...field('term') })] })] }));
+
+    const renderRegionDepartment = ({ regions, branches, field }) => (jsxs("div", { className: "flex justify-between gap-5 mb-7", children: [jsx("div", { className: "w-1/2", children: jsx(SelectControl, { label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }) }), jsx("div", { className: "w-1/2", children: jsx(SelectControl, { label: "\u0410\u0434\u0440\u0435\u0441", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441", options: branches.map(({ branchCode = '', address = '' }) => ({
+                        key: branchCode,
+                        text: address,
+                    })), ...withValidator(field('department'), defaultValidator) }) })] }));
 
     const initialFormState$2 = {
         amount: MIN_CREDIT_AMOUNT,
@@ -969,91 +957,60 @@
         name: '',
         phone: '',
         mail: '',
-        region: '',
-        department: '',
         annualRevenue: '',
     };
-    const errorsInitialState$1 = {
-        annualRevenue: '',
-        inn: '',
-        name: '',
-        phone: '',
-        region: '',
-        department: '',
-    };
-    const ApplicationFormCredit = JSX(({ button, link, handleSubmit }) => {
-        const regions = useGetRegions();
-        const { formState, errors, handleChange, handleChangeErrors, sendForm } = useForm$1({
-            initialFormState: initialFormState$2,
-            errorsInitialState: errorsInitialState$1,
-            handleSubmit,
-        });
-        const { amount, term, fullName, inn, name, phone, mail, region, department, annualRevenue } = formState;
-        const branches = useBranches(region).filter((branch) => branch.address);
-        const onSubmit = (e) => {
-            e.preventDefault();
-            sendForm({
-                typeForm: 'cred',
-                fullName,
-                inn,
-                name,
-                phone,
-                mail,
-                region: regions.find((_) => _.code === region)?.name || '',
-                department: branches.find((_) => _.branchCode === department)?.address || '',
-                partnerComments: `Сумма=${amount}/Срок=${term}/Выручка=${annualRevenue}`,
-            });
-        };
-        return (jsxs("form", { onSubmit: onSubmit, className: "container", children: [jsx(Heading, { headingType: "h6", title: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B \u043A\u0440\u0435\u0434\u0438\u0442\u0430", className: "text-center mb-4" }), renderCreditParameters({ amount, term, handleChange }), 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" }), renderCreditDataOrganization({
+    const creditValidator = objectValidator({
+        annualRevenue: defaultValidator,
+        inn: innValidator,
+        name: nameValidator,
+        phone: phoneValidator,
+        region: defaultValidator,
+        department: defaultValidator,
+    });
+    const ApplicationFormCredit = JSX(({ button, link, onSubmit }) => {
+        const handleSubmit = useCallback((formState) => {
+            const { amount, term, fullName, inn, name, phone, mail, region, department, annualRevenue } = formState;
+            isValidationSuccess(creditValidator(formState)) &&
+                onSubmit({
+                    typeForm: 'cred',
                     fullName,
                     inn,
                     name,
                     phone,
                     mail,
-                    annualRevenue,
-                    handleChange,
-                    errors,
-                    handleChangeErrors,
-                }), jsx(Heading, { headingType: "h6", title: "\u041E\u0444\u0438\u0441 \u0431\u0430\u043D\u043A\u0430", className: "text-center mb-4" }), renderRegionDepartment({
-                    regions,
-                    region,
-                    branches,
-                    department,
-                    handleChange,
-                    errors,
-                    handleChangeErrors,
-                }), renderSubmitButton(button, 'mb-4'), jsx(Footnote, { link: link })] }));
+                    region: region?.text || '',
+                    department: department?.text || '',
+                    partnerComments: `Сумма=${amount}/Срок=${term}/Выручка=${annualRevenue}`,
+                });
+        }, [onSubmit]);
+        const [formState, { field, ...formProps }] = useForm(initialFormState$2, handleSubmit);
+        const regions = useGetRegions();
+        const branches = useBranches(formState.region?.key).filter((branch) => branch?.address);
+        return (jsxs("form", { className: "container", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B \u043A\u0440\u0435\u0434\u0438\u0442\u0430", className: "text-center mb-4" }), renderCreditParameters(field), jsx(Heading, { headingType: "h6", title: "\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", className: "text-center mb-4" }), renderCreditDataOrganization(field), jsx(Heading, { headingType: "h6", title: "\u041E\u0444\u0438\u0441 \u0431\u0430\u043D\u043A\u0430", className: "text-center mb-4" }), renderRegionDepartment({ regions, branches, field }), renderSubmitButton(button, 'mb-4'), jsx(Footnote, { link: link })] }));
     });
 
     const initialFormState$1 = {
         name: '',
         phone: '',
     };
+    const depositValidator = objectValidator({
+        name: nameValidator,
+        phone: phoneValidator,
+    });
     const ApplicationFormDeposit = JSX((props) => {
-        const { button, link, handleSubmit } = props;
-        const { formState, errors, handleChange, handleChangeErrors, sendForm } = useForm$1({
-            initialFormState: initialFormState$1,
-            errorsInitialState: initialFormState$1,
-            handleSubmit,
-        });
-        const { name, phone } = formState;
-        const onSubmit = (e) => {
-            e.preventDefault();
-            sendForm({
-                typeForm: 'dpst',
-                name,
-                phone,
-            });
-        };
-        return (jsxs("form", { onSubmit: onSubmit, className: "container", 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" }), renderDataOrganization({
+        const { button, link, onSubmit } = props;
+        const handleSubmit = useCallback((formState) => {
+            const { name, phone } = formState;
+            isValidationSuccess(depositValidator(formState)) &&
+                onSubmit({
+                    typeForm: 'dpst',
                     name,
                     phone,
-                    handleChange,
-                    errors,
-                    handleChangeErrors,
-                }), 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)] })] }));
+                });
+        }, [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)] })] }));
     });
-    const renderDataOrganization = ({ name, phone, handleChange, errors, handleChangeErrors, }) => (jsxs("div", { className: "max-w-[560px] m-auto", children: [jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0418\u043C\u044F", error: errors['name'], value: name, onChange: (value) => handleChange({ name: value }), onBlur: (value) => handleChangeErrors({ name: validate('name', value) }) }), jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", error: errors['phone'], value: phone, onChange: (value) => handleChange({ phone: value }), onBlur: (value) => handleChangeErrors({ phone: validate('phone', value) }) })] }));
 
     const sourcesComparator = (a, b) => a?.media && b?.media ? a.media - b.media : 0;
     const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', isMobile = false, pathPrefix }) => {
@@ -1102,15 +1059,25 @@
             fill: 'white',
         },
     ];
-    const Checkbox = JSX(({ className, text, checked, disabled, isRadio, onChange }) => {
-        return (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer group/box", children: [jsx("input", { className: style('peer appearance-none w-5 h-5 border-solid cursor-pointer checked:border-primary-main m-0', isRadio
-                            ? 'rounded-full border-2'
-                            : 'rounded checked:bg-primary-main disabled:bg-main-disabled border', checked ? 'border-black' : 'border-gray', disabled ? '' : 'group-hover/box:border-primary-hover'), type: "checkbox", onChange: (e) => onChange && onChange(e.target.checked), checked: checked, disabled: disabled }), isRadio ? (jsx("div", { className: "left-1 w-3 h-3 rounded-full bg-primary-main hidden absolute peer-checked:block" })) : (jsx(SVG, { paths: CHECK_PATHS, className: "hidden absolute left-1 ml-px peer-checked:block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" })), text ? jsx("span", { className: "font-sans ml-3 text-l-light", children: text }) : null] }) }));
+    const Checkbox = JSX(({ className, value, text, disabled, isRadio, onChange }) => {
+        const handleChange = useCallback((e) => {
+            if (disabled) {
+                return;
+            }
+            e.preventDefault();
+            onChange && onChange(!value);
+        }, [onChange, disabled, value]);
+        const icon = isRadio ? (jsx("div", { className: "absolute left-1 w-3 h-3 rounded-full bg-primary-main" })) : (jsx(SVG, { paths: CHECK_PATHS, className: "absolute left-1 ml-px block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" }));
+        return (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer group/box", onClick: handleChange, children: [jsx("div", { className: style('appearance-none w-5 h-5 border-solid cursor-pointer m-0', isRadio ? 'rounded-full border-2' : checkboxStyle(value), value ? 'border-primary-main' : 'border-gray', disabled ? 'bg-main-disabled' : 'group-hover/box:border-primary-hover'), role: "checkbox", "aria-checked": Boolean(value), "aria-disabled": Boolean(disabled) }), value ? icon : null, text ? jsx("span", { className: "font-sans ml-3 text-l-light", children: text }) : null] }) }));
     });
+    const checkboxStyle = (value) => style('rounded border', value ? 'bg-primary-main' : '');
 
-    const renderQuestionsInterested = ({ currencyControl, documentaryOperations, conversionOperations, text, handleChange, }) => (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", checked: currencyControl, onChange: (value) => handleChange({ currencyControl: value }) }), jsx(Checkbox, { text: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0440\u043D\u044B\u0435 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u0438", checked: documentaryOperations, onChange: (value) => handleChange({ documentaryOperations: value }) }), jsx(Checkbox, { text: "\u041A\u043E\u043D\u0432\u0435\u0440\u0441\u0438\u043E\u043D\u043D\u044B\u0435 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u0438", checked: conversionOperations, onChange: (value) => handleChange({ conversionOperations: value }) })] }), 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: text, onChange: (e) => handleChange({ text: e.target.value }) })] }));
+    const renderQuestionsInterested = (field) => {
+        const textField = field('text');
+        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 = ({ fullName, name, phone, mail, handleChange, errors, handleChangeErrors, }) => (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", error: errors['fullName'], value: fullName, onChange: (value) => handleChange({ fullName: value }), onBlur: (value) => handleChangeErrors({ fullName: validate('fullName', value) }) }) }), jsx("div", { className: "w-1/2", children: jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0424\u0418\u041E", error: errors['name'], value: name, onChange: (value) => handleChange({ name: value }), onBlur: (value) => handleChangeErrors({ name: validate('name', value) }) }) })] }), jsxs("div", { className: "flex justify-between gap-5 mb-7", children: [jsx("div", { className: "w-1/2", children: jsx(InputControl, { className: "shrink-0 text-l w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", error: errors['phone'], value: phone, onChange: (value) => handleChange({ phone: value }), onBlur: (value) => handleChangeErrors({ phone: validate('phone', value) }) }) }), 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", error: errors['mail'], value: mail, onChange: (value) => handleChange({ mail: value }), onBlur: (value) => handleChangeErrors({ mail: validate('mail', 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 initialFormState = {
         fullName: '',
@@ -1122,53 +1089,34 @@
         conversionOperations: false,
         text: '',
     };
-    const errorsInitialState = {
-        fullName: '',
-        name: '',
-        phone: '',
-        mail: '',
-        text: '',
-    };
+    const webValidator = objectValidator({
+        fullName: defaultValidator,
+        name: nameValidator,
+        phone: phoneValidator,
+        mail: defaultValidator,
+    });
     const ApplicationFormWed = JSX((props) => {
-        const { button, link, handleSubmit } = props;
-        const { formState, errors, handleChange, handleChangeErrors, sendForm } = useForm$1({
-            initialFormState,
-            errorsInitialState,
-            handleSubmit,
-        });
-        const { fullName, name, phone, mail, currencyControl, documentaryOperations, conversionOperations, text, } = formState;
-        const onSubmit = (e) => {
-            e.preventDefault();
-            sendForm({
-                typeForm: 'kved',
-                fullName,
-                name,
-                phone,
-                mail,
-                partnerComments: `Валютный контроль=${currencyControl}/Документарные операции=${documentaryOperations}/Конверсионные операции=${conversionOperations}/Доп инф=${text}`,
-            });
-        };
-        return (jsxs("form", { onSubmit: onSubmit, className: "container", children: [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" }), renderWedDataOrganization({
+        const { button, link, onSubmit } = props;
+        const handleSubmit = useCallback((formState) => {
+            const { fullName, name, phone, mail, currencyControl, documentaryOperations, conversionOperations, text, } = formState;
+            isValidationSuccess(webValidator(formState)) &&
+                onSubmit({
+                    typeForm: 'kved',
                     fullName,
                     name,
                     phone,
                     mail,
-                    handleChange,
-                    errors,
-                    handleChangeErrors,
-                }), jsx(Heading, { headingType: "h6", title: "\u0418\u043D\u0442\u0435\u0440\u0435\u0441\u0443\u044E\u0449\u0438\u0439 \u0432\u043E\u043F\u0440\u043E\u0441", className: "text-center mb-4" }), renderQuestionsInterested({
-                    currencyControl,
-                    documentaryOperations,
-                    conversionOperations,
-                    text,
-                    handleChange,
-                }), jsxs("div", { className: "flex items-center pb-9 mb-9 border-b border-main-divider", children: [renderSubmitButton(button, 'mr-5'), jsx(Footnote, { link: link })] }), jsx(Heading, { headingType: "h6", title: "\u0418\u043B\u0438 \u0441\u0432\u044F\u0436\u0438\u0442\u0435\u0441\u044C \u0441 \u043D\u0430\u043C\u0438 \u0443\u0434\u043E\u0431\u043D\u044B\u043C \u0441\u043F\u043E\u0441\u043E\u0431\u043E\u043C", className: "text-center mb-4" }), renderContacts()] }));
+                    partnerComments: `Валютный контроль=${currencyControl}/Документарные операции=${documentaryOperations}/Конверсионные операции=${conversionOperations}/Доп инф=${text}`,
+                });
+        }, [onSubmit]);
+        const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
+        return (jsxs("form", { className: "container", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", className: "text-center mb-4" }), renderWedDataOrganization(field), jsx(Heading, { headingType: "h6", title: "\u0418\u043D\u0442\u0435\u0440\u0435\u0441\u0443\u044E\u0449\u0438\u0439 \u0432\u043E\u043F\u0440\u043E\u0441", className: "text-center mb-4" }), renderQuestionsInterested(field), jsxs("div", { className: "flex items-center pb-9 mb-9 border-b border-main-divider", children: [renderSubmitButton(button, 'mr-5'), jsx(Footnote, { link: link })] }), jsx(Heading, { headingType: "h6", title: "\u0418\u043B\u0438 \u0441\u0432\u044F\u0436\u0438\u0442\u0435\u0441\u044C \u0441 \u043D\u0430\u043C\u0438 \u0443\u0434\u043E\u0431\u043D\u044B\u043C \u0441\u043F\u043E\u0441\u043E\u0431\u043E\u043C", className: "text-center mb-4" }), renderContacts()] }));
     });
 
-    const ResponseNotification = JSX(({ responceType }) => {
-        const responceOK = responceType === 'OK';
-        const backgroundColor = responceOK ? 'bg-responce-ok' : 'bg-responce-fail';
-        return (jsxs("div", { className: `flex items-center mt-5 p-5 rounded-md ${backgroundColor}`, children: [responceOK ? (jsx(ImgInner, { image: { icon: 'ResponceOKIcon' }, width: "42", height: "42", className: "mr-4" })) : (jsx(ImgInner, { image: { icon: 'ResponceFailIcon' }, width: "37", height: "34", className: "mr-4" })), jsxs("div", { children: [jsx(Heading, { headingType: "h6", title: responceOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку', className: "mb-1" }), jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: responceOK ? 'Совсем скоро мы с вами свяжемся' : 'Пожалуйста, повторите позднее' })] })] }));
+    const ResponseNotification = JSX(({ responseType }) => {
+        const responseOK = responseType === 'OK';
+        const backgroundColor = responseOK ? 'bg-responce-ok' : 'bg-responce-fail';
+        return (jsxs("div", { className: `flex items-center mt-5 p-5 rounded-md ${backgroundColor}`, children: [responseOK ? (jsx(ImgInner, { image: { icon: 'ResponceOKIcon' }, width: "42", height: "42", className: "mr-4" })) : (jsx(ImgInner, { image: { icon: 'ResponceFailIcon' }, width: "37", height: "34", className: "mr-4" })), jsxs("div", { children: [jsx(Heading, { headingType: "h6", title: responseOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку', className: "mb-1" }), jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: responseOK ? 'Совсем скоро мы с вами свяжемся' : 'Пожалуйста, повторите позднее' })] })] }));
     });
 
     const COMPONENTS_MAP = {
@@ -1180,17 +1128,17 @@
     };
     const API = CorporateLeadAPI();
     const ApplicationForm = JSX((props) => {
-        const { className = '', title, typeForm = 'credit', button, link, ...rest } = props;
-        const [responceType, setResponseType] = useState('');
+        const { className, title, typeForm = 'credit', button, link, ...rest } = props;
+        const [responseType, setResponseType] = useState('');
         const handleSubmit = useCallback(async (data) => {
             const status = (await API.send(data)) ? 'OK' : 'Fail';
             setResponseType(status);
             return status;
         }, []);
-        return (jsx(BlockWrapper, { className: `font-sans bg-white p-[50px] pb-9 ${className}`, ...rest, children: jsxs("div", { className: "container max-w-[978px]", children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }) : null, COMPONENTS_MAP[typeForm]({ button, link, handleSubmit }), responceType ? jsx(ResponseNotification, { responceType: responceType }) : null] }) }));
+        return (jsx(BlockWrapper, { className: style('font-sans bg-white p-default pb-9', className), ...rest, children: jsxs("div", { className: "container max-w-[978px]", children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }) : null, COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit }), responseType ? jsx(ResponseNotification, { responseType: responseType }) : null] }) }));
     });
 
-    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 flex flex-col items-center ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep$1) })) : null] })));
+    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: `p-default flex flex-col items-center ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep$1) })) : null] })));
     const renderStep$1 = (benefit, i) => {
         const description = benefit.description;
         return (jsxs("div", { className: "flex items-center basis-1/2 max-w-[500px] mb-14", children: [benefit?.icon?.icon ? (jsx(ImgInner, { className: "w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black", image: benefit.icon })) : null, benefit?.icon?.src ? jsx(ImgInner, { image: benefit.icon }) : null, jsxs("div", { className: "ml-5 h-full", children: [benefit?.label ? jsx(Heading, { headingType: "h6", children: benefit.label }) : null, renderDescription$4(description)] })] }, String(i)));
@@ -1219,34 +1167,34 @@
 
     const headlineVersionStyles = {
         XXL: {
-            wrapper: 'gap-[18px]',
             title: { headingType: 'h0', as: 'h1' },
             descriptionSize: 'text-h5',
+            descriptionStyle: 'mt-5',
         },
         XL: {
-            wrapper: 'gap-4',
             title: { headingType: 'h1', as: 'h1' },
             descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-4',
         },
         L: {
-            wrapper: 'gap-4',
             title: { headingType: 'h2', as: 'h2' },
             descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-4',
         },
         M: {
-            wrapper: 'gap-3',
             title: { headingType: 'h3', as: 'h3' },
             descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-3',
         },
         S: {
-            wrapper: 'gap-2',
             title: { headingType: 'h4', as: 'h4' },
             descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-2',
         },
         XS: {
-            wrapper: 'gap-2',
             title: { headingType: 'h5', as: 'h5' },
             descriptionSize: 'text-l-light',
+            descriptionStyle: 'mt-2',
         },
     };
     // TODO Move to Gallery and rename
@@ -1263,13 +1211,14 @@
 
     const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, isPadding = true, isTheme = false, version = '', ...rest }) => {
         const versionStyle = headlineVersionStyles[headlineVersion];
-        const paddingStyle = isPadding ? 'p-12' : '';
-        return (jsxs(BlockWrapper, { className: style('flex flex-col', paddingStyle, versionStyle.wrapper, className), version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, align: align, children: description })) : null] }));
+        const paddingStyle = isPadding ? 'p-default' : '';
+        const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
+        return (jsxs(BlockWrapper, { className: style(paddingStyle, className), version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, align: align, ...descriptionStyle, children: description })) : null] }));
     });
 
     const Bonus = JSX((props) => {
         const { className = '', title, description, bonusItems, ...rest } = props;
-        return (jsx(BlockWrapper, { className: `p-12 pb-9 ${className}`, ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M" }), jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems?.length
+        return (jsx(BlockWrapper, { className: `p-default pb-9 ${className}`, ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M" }), jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems?.length
                             ? bonusItems.map((_, i) => (jsxs("div", { className: "flex-grow w-[49%] border border-gray p-9 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0", children: [_?.title ? jsx(Text, { size: "text-h4", children: _.title }) : null, _?.description ? (jsx("div", { className: "mt-2", children: jsx(Paragraph, { size: "text-xl", font: "font-light", children: _.description }) })) : null, jsxs("div", { className: "flex justify-between items-end mt-3", children: [renderButtonsSection(_?.buttons), _.bonusItemContent?.bonusType
                                                 ? renderBonusItemContent(_.bonusItemContent)
                                                 : null] })] }, String(i))))
@@ -1287,7 +1236,7 @@
         right: 'text-right',
     };
 
-    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-12 flex flex-col text-center ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-8", title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] })));
+    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-default flex flex-col text-center ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-8", title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] })));
     const renderBonusBenefit = ({ icon, title, description }, i) => {
         return (jsxs("div", { className: style('flex flex-col items-center text-h6', !description && !title ? 'justify-center' : ''), children: [title ? jsx("span", { children: title }) : null, icon ? jsx(ImgInner, { image: icon, height: "180", className: "w-auto" }) : null, description ? jsx("span", { children: description }) : null] }, String(i)));
     };
@@ -1313,7 +1262,7 @@
         return (jsxs("li", { className: "flex items-center gap-3.5 mb-3 last:mb-0", children: [icon?.icon ? (jsx(ImgInner, { image: icon, className: "w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider" })) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, jsx("span", { className: "text-xl-light", children: text })] }, key));
     };
 
-    const BusinessBlock = JSX(({ className = '', title, cards, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 pb-9 ${className}`, ...rest, children: [jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }), jsx("div", { className: "flex gap-5", children: cards?.length ? cards.map((_, i) => jsx(BusinessCard, { ..._ }, String(i))) : null })] })));
+    const BusinessBlock = JSX(({ className = '', title, cards, ...rest }) => (jsxs(BlockWrapper, { className: `p-default pb-9 ${className}`, ...rest, children: [jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }), jsx("div", { className: "flex gap-5", children: cards?.length ? cards.map((_, i) => jsx(BusinessCard, { ..._ }, String(i))) : null })] })));
 
     const ButtonBlock = JSX(({ button, className, ...rest }) => (jsx(BlockWrapper, { className: style('!bg-transparent', className), ...rest, children: renderButtonsSection([button]) })));
 
@@ -1420,18 +1369,17 @@
     const DEPOSIT_CALC_DEFAULT_DIR = 'deposit-calculator-data';
     const BUSINESS_DEPOSIT_CALC_DEFAULT_DIR = 'business-calculator-data';
 
-    const Rate = JSX(({ rate, title = 'Ставка', unit, depositeName, isShowDepositeName, rateBlockClassName }) => (jsxs("div", { children: [jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: title }), jsxs("div", { className: "relative", children: [jsxs("div", { className: "flex justify-start", children: [jsx("span", { className: style('block gradient-color-text font-mohave text-title-huge pr-6 -mt-4', rateBlockClassName), children: String(rate.toFixed(2)).replace('.', ',') }), unit ? (jsx("span", { className: "gradient-color-text text-[65px] leading-[75px]", children: unit })) : ('')] }), depositeName && isShowDepositeName ? (jsx("div", { className: "absolute bottom-7 w-full text-center whitespace-nowrap", children: depositeName })) : null] })] })));
+    const Rate = JSX(({ rate, title = 'Ставка', unit, depositeName, isShowDepositeName, rateBlockClassName, fractionDigits = 2, }) => (jsxs("div", { children: [jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: title }), jsxs("div", { className: "relative", children: [jsxs("div", { className: "flex justify-start gradient-color-text", children: [jsx("span", { className: style('font-mohave text-title-huge pr-6 -mt-4', rateBlockClassName), children: String(rate.toFixed(fractionDigits)).replace('.', ',') }), unit ? jsx("span", { className: "text-7xl", children: unit }) : null] }), depositeName && isShowDepositeName ? (jsx("div", { className: "absolute bottom-7 w-full text-center whitespace-nowrap", children: depositeName })) : null] })] })));
 
     const renderFootnote = (text) => text ? (jsx(Paragraph, { size: "text-s-light", color: "text-secondary-text", children: text })) : null;
 
     const DEFAULT_MONEY_STEP = 1000;
-    function renderWantedSumInput(title, params, callback) {
-        const { moneyValue, minSum, maxSum, step = DEFAULT_MONEY_STEP, isShowItems = true } = params;
+    function renderWantedSumInput({ isShowItems = true, step = DEFAULT_MONEY_STEP, ...rest }) {
         const items = [
-            `От ${addSpacesBetweenNumbers(minSum)} ₽`,
-            `До ${addSpacesBetweenNumbers(maxSum)} ₽`,
+            `От ${addSpacesBetweenNumbers(rest.min || 0)} ₽`,
+            `До ${addSpacesBetweenNumbers(rest.max || 0)} ₽`,
         ];
-        return (jsx(InputRange, { title: title, items: isShowItems ? items : [], min: minSum, max: maxSum, step: step, value: clamp(moneyValue, minSum, maxSum), onChange: callback }));
+        return jsx(InputRange, { items: isShowItems ? items : [], step: step, ...rest });
     }
 
     const getBonus = (params, bonusTravelValue, bonusOtherValue) => {
@@ -1465,62 +1413,48 @@
     };
 
     const BonusCalculatorForm = JSX(({ className = '', sourceBookDir = '', buttons, footnote }) => {
-        const [travelExpenseValue, setTravelExpenseValue] = useState(DEFAULT_TRAVEL_MIN_SUM);
-        const handleTravelExpenseValue = useCallback((_) => setTravelExpenseValue(_), []);
-        const [restExpenseValue, setRestExpenseValue] = useState(DEFAULT_REST_MIN_SUM);
-        const handleRestExpenseValue = useCallback((_) => setRestExpenseValue(_), []);
-        const userInputParams = {
-            travelExpenseValue,
-            restExpenseValue,
-        };
+        const [userInputParams, { field }] = useForm({
+            travelExpenseValue: DEFAULT_TRAVEL_MIN_SUM,
+            restExpenseValue: DEFAULT_REST_MIN_SUM,
+        });
         const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } = useBonusCalculatorParams(userInputParams, sourceBookDir);
-        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма покупок в категории путешествия, ₽', {
-                            minSum: minSumTravel,
-                            maxSum: maxSumTravel,
-                            moneyValue: travelExpenseValue,
+        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput({
+                            title: 'Сумма покупок в категории путешествия, ₽',
+                            min: minSumTravel,
+                            max: maxSumTravel,
                             step: 500,
                             isShowItems: false,
-                        }, handleTravelExpenseValue), renderWantedSumInput('Сумма покупок в остальных категориях, ₽', {
+                            ...field('travelExpenseValue'),
+                        }), renderWantedSumInput({
+                            title: 'Сумма покупок в остальных категориях, ₽',
                             className: 'mt-7',
-                            minSum: minSumOther,
-                            maxSum: maxSumOther,
-                            moneyValue: restExpenseValue,
+                            min: minSumOther,
+                            max: maxSumOther,
                             step: 500,
                             isShowItems: false,
-                        }, handleRestExpenseValue)] }), jsx("div", { children: monthBonus >= 0 ? (jsx(Rate, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u043C\u0435\u0441\u044F\u0446", rate: monthBonus, rateBlockClassName: "tracking-[-14px]" })) : null }), jsxs("div", { className: "w-full max-w-[350px]", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
+                            ...field('restExpenseValue'),
+                        })] }), jsx("div", { children: monthBonus >= 0 ? (jsx(Rate, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u043C\u0435\u0441\u044F\u0446", rate: monthBonus, rateBlockClassName: "tracking-[-14px]", fractionDigits: 0 })) : null }), jsxs("div", { className: "w-full max-w-[350px]", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
     });
 
     const STEP_DAYS = 1;
-    function renderDaysInput(title, params, callback) {
-        const { minDays, maxDays, daysValue } = params;
-        const daysText = (days) => {
-            const text = Number(days) % 10 === 1 ? 'дня' : 'дней';
-            return `${days} ${text}`;
-        };
-        return (jsx(InputRange, { className: "mt-7", title: title, items: [`От ${daysText(minDays)}`, `До ${daysText(maxDays)}`], min: minDays, max: maxDays, step: STEP_DAYS, value: clamp(daysValue, minDays, maxDays), onChange: callback }));
-    }
+    const renderDaysInput = (props) => (jsx(InputRange, { className: "mt-7", items: [`От ${daysText(props.min || 0)}`, `До ${daysText(props.max || 0)}`], step: STEP_DAYS, ...props }));
+    const daysText = (days) => `${days} ${Number(days) % 10 === 1 ? 'дня' : 'дней'}`;
 
     const orientationStyleMap = {
         horizontal: 'gap-10',
         vertical: 'flex-col gap-3',
     };
-    const RadioButtonGroup = JSX(({ items, checkedItem, onChange: onChangeCheckedItem, orientation = 'horizontal' }) => (jsx("div", { className: `flex ${orientationStyleMap[orientation]}`, children: items?.map(({ id, text }) => (jsx(Checkbox, { isRadio: true, text: text, checked: checkedItem === id, onChange: () => onChangeCheckedItem && onChangeCheckedItem(id) }, String(id)))) })));
+    const RadioButtonGroup = JSX(({ items, checkedItem, onChange: onChangeCheckedItem, orientation = 'horizontal' }) => (jsx("div", { className: `flex ${orientationStyleMap[orientation]}`, children: items?.map(({ id, text }) => (jsx(Checkbox, { isRadio: true, text: text, value: checkedItem === id, onChange: () => onChangeCheckedItem && onChangeCheckedItem(id) }, String(id)))) })));
 
-    const EVERY_MONTH = 'everyMonth';
-    const AT_END_TERM = 'atEndTerm';
-    const depositTypeItems = [
-        {
-            id: EVERY_MONTH,
-            text: 'Ежемесячно',
-        },
-        {
-            id: AT_END_TERM,
-            text: 'В конце срока',
-        },
-    ];
-    function renderInterestPayment({ isMonthlyInterestPayment, callback, title, orientation = 'horizontal', }) {
-        return (jsxs("div", { children: [title ? (jsx("div", { className: "mb-3", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, jsx("div", { children: jsx(RadioButtonGroup, { orientation: orientation, items: depositTypeItems, checkedItem: isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM, onChange: (text) => callback && callback(text === EVERY_MONTH) }) })] }));
-    }
+    const renderBinaryRadioButtonGroup = ({ items, title, orientation = 'horizontal', value, onChange, }) => (jsxs("div", { children: [title ? (jsx("div", { className: "mb-3", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, jsx(RadioButtonGroup, { orientation: orientation, items: items, checkedItem: items[value ? 0 : 1].id, onChange: (_) => onChange && onChange(_ === items[0].id) })] }));
+
+    const renderInterestPayment = (props) => renderBinaryRadioButtonGroup({
+        ...props,
+        items: [
+            { id: 'everyMonth', text: 'Ежемесячно' },
+            { id: 'atEndTerm', text: 'В конце срока' },
+        ],
+    });
 
     const UnknownRate = JSX(({ title = 'Ставка' }) => (jsxs("div", { children: [jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: title }), jsx("div", { className: "mt-1 pt-1 pl-5 pb-1.5", children: jsx(Icon, { name: "PercentIcon", width: "90", height: "85" }) }), jsx("div", { className: "w-[250px] mt-3.5", children: jsxs(Paragraph, { size: "text-xl-light", color: "text-primary-text", children: ["\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u043D\u0430\u044F \u0441\u0442\u0430\u0432\u043A\u0430 \u0434\u043B\u044F \u0441\u0440\u043E\u043A\u0430 ", jsx("strong", { children: "1-30 \u0434\u043D\u0435\u0439" }), " \u0443\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u043F\u0440\u0438 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0438 \u0432 \u0411\u0430\u043D\u043A"] }) })] })));
 
@@ -1610,101 +1544,47 @@
     };
 
     const BusinessDepositCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote, bottomFootnote, isShowDepositeName }) => {
-        const [moneyValue, setMoneyValue] = useState(BUSINESS_DEFAULT_SUM);
-        const handleMoneyValue = useCallback((_) => setMoneyValue(_), []);
-        const [daysValue, setDaysValue] = useState(BUSINESS_DEFAULT_DAYS);
-        const handleDaysValue = useCallback((_) => setDaysValue(_), []);
-        const [isReplenished, toggleIsReplenished] = useState(false);
-        const handleIsReplenished = useCallback((_) => toggleIsReplenished(_), []);
-        const [isPartialWithdrawal, toggleIsPartialWithdrawal] = useState(false);
-        const handleIsPartialWithdrawal = useCallback((_) => toggleIsPartialWithdrawal(_), []);
-        const [isSmallBusiness, toggleIsSmallBusiness] = useState(false);
-        const handleIsSmallBusiness = useCallback((_) => toggleIsSmallBusiness(_), []);
-        const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
-        const handleIsMonthlyInterestPayment = useCallback((_) => toggleIsMonthlyInterestPayment(_), []);
-        const userInputParams = {
-            moneyValue,
-            daysValue,
-            isReplenished,
-            isPartialWithdrawal,
-            isSmallBusiness,
-            isMonthlyInterestPayment,
-        };
+        const [userInputParams, { field }] = useForm({
+            moneyValue: BUSINESS_DEFAULT_SUM,
+            daysValue: BUSINESS_DEFAULT_DAYS,
+            isReplenished: false,
+            isPartialWithdrawal: false,
+            isSmallBusiness: false,
+            isMonthlyInterestPayment: false,
+        });
         const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
         const { income, finalSum, rate, depositeName, isShowUnknownRate } = calculatorParams;
-        return (jsxs("section", { className: className, children: [jsxs("div", { className: "flex justify-between", children: [jsxs("div", { className: "w-[486px]", children: [renderWantedSumInput('Сумма вклада, ₽', calculatorParams, handleMoneyValue), renderDaysInput('Срок вклада, дни', calculatorParams, handleDaysValue), jsxs("div", { className: "mt-7 flex justify-between", children: [renderBusinessDepositParamsForm({
-                                            ...calculatorParams,
-                                            handleIsReplenished,
-                                            handleIsPartialWithdrawal,
-                                            handleIsSmallBusiness,
-                                        }), renderInterestPayment({
-                                            isMonthlyInterestPayment,
-                                            callback: handleIsMonthlyInterestPayment,
+        return (jsxs("section", { className: className, children: [jsxs("div", { className: "flex justify-between", children: [jsxs("div", { className: "w-[486px]", children: [renderWantedSumInput({
+                                    title: 'Сумма вклада, ₽',
+                                    min: calculatorParams.minSum,
+                                    max: calculatorParams.maxSum,
+                                    ...field('moneyValue'),
+                                    value: calculatorParams.moneyValue,
+                                }), renderDaysInput({
+                                    title: 'Срок вклада, дни',
+                                    min: calculatorParams.minDays,
+                                    max: calculatorParams.maxDays,
+                                    ...field('daysValue'),
+                                    value: calculatorParams.daysValue,
+                                }), jsxs("div", { className: "mt-7 flex justify-between", children: [renderBusinessDepositParamsForm(calculatorParams, field), renderInterestPayment({
                                             title: 'Выплата процентов',
                                             orientation: 'vertical',
+                                            ...field('isMonthlyInterestPayment'),
                                         })] })] }), isShowUnknownRate ? (jsx(UnknownRate, {})) : (jsx(Rate, { rate: rate, depositeName: depositeName, isShowDepositeName: isShowDepositeName, rateBlockClassName: "tracking-[-25px]", unit: "%" })), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" }), jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), jsx("div", { className: "mt-7", children: renderFootnote(footnote) })] })] }), jsx("div", { className: "mt-5", children: renderFootnote(bottomFootnote) })] }));
     });
-    const renderBusinessDepositParamsForm = ({ isDisabledOperatingDeposit, isReplenished, isPartialWithdrawal, isSmallBusiness, handleIsReplenished, handleIsPartialWithdrawal, handleIsSmallBusiness, }) => (jsxs("div", { children: [jsx(Checkbox, { text: "\u041F\u043E\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u0435", disabled: isDisabledOperatingDeposit, checked: isReplenished, onChange: handleIsReplenished }), jsx(Checkbox, { className: "mt-3", disabled: isDisabledOperatingDeposit, text: "\u0427\u0430\u0441\u0442\u0438\u0447\u043D\u043E\u0435 \u0441\u043D\u044F\u0442\u0438\u0435", checked: isPartialWithdrawal, onChange: handleIsPartialWithdrawal }), jsx(Checkbox, { className: "mt-3", text: "\u042F\u0432\u043B\u044F\u044E\u0441\u044C \u043C\u0430\u043B\u044B\u043C \u043F\u0440\u0435\u0434\u043F\u0440\u0438\u044F\u0442\u0438\u0435\u043C", checked: isSmallBusiness, onChange: handleIsSmallBusiness })] }));
-
-    const DISABLED_INPUT_CLASSES = 'disabled:border-gray disabled:bg-main-divider';
-    const InputListRange = JSX(({ className, title, items = [], list = [], value = list[0], disabled = false, onChange }) => {
-        const min = 0;
-        const max = list.length - 1;
-        const step = 1;
-        const handleTextChange = (e) => {
-            if (!onChange) {
-                return;
-            }
-            const newValue = parseInt(e.target.value);
-            const closetValue = list.reduce(function (prev, curr) {
-                return Math.abs(curr - newValue) < Math.abs(prev - newValue) ? curr : prev;
-            });
-            onChange(Number(getSanitizedValue(closetValue.toString())));
-        };
-        const handleRangeChange = (e) => {
-            if (!onChange) {
-                return;
-            }
-            const val = list.at(clamp(parseInt(e.target.value), min, max)) || 0;
-            onChange(Number(getSanitizedValue(val.toString())));
-        };
-        const valueIndex = list.findIndex((item) => item === value) || 0;
-        const inputStyle = {
-            backgroundSize: `${(((valueIndex - min) * 100) / (max - min)).toFixed(2)}% 100%`,
-        };
-        return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? jsx("span", { className: "text-m-light text-primary-text", children: title }) : null, jsx("input", { className: `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: addSpacesBetweenNumbers(value), disabled: disabled, onChange: handleTextChange, onBlur: handleTextChange }), list.length ? (jsx("div", { className: "absolute w-full flex justify-between -bottom-[3px] px-4", children: list.map(renderTick(valueIndex, disabled)) })) : null, jsx("div", { className: "absolute inset-x-0 -bottom-1 px-4 leading-[18px]", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider relative z-10", type: "range", min: min, max: max, step: step, value: valueIndex, disabled: disabled, onChange: handleRangeChange, style: inputStyle }) })] }), renderRangeCaption(items)] }));
-    });
-    const renderTick = (valueIndex, disabled) => (value, i) => (jsx("span", { className: `w-2 h-2 rounded-full ${valueIndex <= i || disabled ? 'bg-gray' : 'bg-primary-main'}` }, String(i)));
-    function renderRangeCaption(items) {
-        return (jsx("div", { className: "flex justify-between my-2", children: items.map((item, i) => (jsx("span", { className: "text-s-light text-secondary-text", children: item }, String(i)))) }));
-    }
+    const renderBusinessDepositParamsForm = (calculatorParams, field) => (jsxs("div", { children: [jsx(Checkbox, { text: "\u041F\u043E\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u0435", disabled: calculatorParams.isDisabledOperatingDeposit, ...field('isReplenished'), value: calculatorParams.isReplenished }), jsx(Checkbox, { className: "mt-3", disabled: calculatorParams.isDisabledOperatingDeposit, text: "\u0427\u0430\u0441\u0442\u0438\u0447\u043D\u043E\u0435 \u0441\u043D\u044F\u0442\u0438\u0435", ...field('isPartialWithdrawal'), value: calculatorParams.isPartialWithdrawal }), jsx(Checkbox, { className: "mt-3", text: "\u042F\u0432\u043B\u044F\u044E\u0441\u044C \u043C\u0430\u043B\u044B\u043C \u043F\u0440\u0435\u0434\u043F\u0440\u0438\u044F\u0442\u0438\u0435\u043C", ...field('isSmallBusiness'), value: calculatorParams.isSmallBusiness })] }));
 
     const STEP_MONTHS = 1;
-    function renderMonthsInput(title, params, callback) {
-        const { minMonths, maxMonths, monthsValue, availableMonths } = params;
-        const monthText = (month) => {
-            const text = Number(month) % 10 === 1 ? 'месяца' : 'месяцев';
-            return `${month} ${text}`;
-        };
-        return availableMonths?.length ? (jsx(InputListRange, { className: "mt-7", title: title, items: [`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`], list: availableMonths, value: clamp(monthsValue, minMonths, maxMonths), onChange: callback })) : (jsx(InputRange, { className: "mt-7", title: title, items: [`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`], min: minMonths, max: maxMonths, step: STEP_MONTHS, value: clamp(monthsValue, minMonths, maxMonths), onChange: callback }));
-    }
+    const renderMonthsInput = ({ min = 0, max = 0, availableMonths, ...rest }) => (jsx(InputRange, { className: "mt-7", items: [`От ${monthText(min)}`, `До ${monthText(max)}`], step: STEP_MONTHS, ...(availableMonths?.length ? { list: availableMonths } : { min, max }), ...rest }));
+    const monthText = (month) => `${month} ${Number(month) % 10 === 1 ? 'месяца' : 'месяцев'}`;
 
-    const ANNUITY = 'annuity';
-    const DIFFERENTIAL = 'differential';
-    const paymentTypeItems = [
-        {
-            id: ANNUITY,
-            text: 'Аннуитетный',
-        },
-        {
-            id: DIFFERENTIAL,
-            text: 'Дифференцированный',
-        },
-    ];
-    function renderPaymentType({ isAnnuity, callback, title, orientation = 'horizontal', }) {
-        return (jsxs("div", { children: [title ? (jsx("div", { className: "mb-3", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, jsx(RadioButtonGroup, { orientation: orientation, items: paymentTypeItems, checkedItem: isAnnuity ? ANNUITY : DIFFERENTIAL, onChange: (text) => callback && callback(text === ANNUITY) })] }));
-    }
+    const renderPaymentType = (props) => renderBinaryRadioButtonGroup({
+        ...props,
+        items: [
+            { id: 'annuity', text: 'Аннуитетный' },
+            { id: 'differential', text: 'Дифференцированный' },
+        ],
+    });
 
     /**
      * Формулы расчёта аннуитетных и дифференцированных платежей:
@@ -1775,72 +1655,48 @@
         return isExclude || userInputParams[fieldKey] === row[fieldKey];
     };
 
-    const CreditCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote, paramsViewSettings }) => {
-        const [isAnnuity, toggleIsAnnuity] = useState(false);
-        const [isSalaryClient, toggleIsSalaryClient] = useState(false);
-        const handleIsSalaryClient = useCallback((_) => toggleIsSalaryClient(_), []);
-        const [isStateEmployee, toggleIsStateEmployee] = useState(false);
-        const handleIsStateEmployee = useCallback((_) => toggleIsStateEmployee(_), []);
-        const [isPensionClient, toggleIsPensionClient] = useState(false);
-        const handleIsPensionClient = useCallback((_) => toggleIsPensionClient(_), []);
-        const [isInsurance, toggleIsInsurance] = useState(true);
-        const handleIsInsurance = useCallback((_) => toggleIsInsurance(_), []);
-        const [moneyValue, setMoneyValue] = useState(CREDIT_DEFAULT_SUM);
-        const handleMoneyValue = useCallback((_) => setMoneyValue(_), []);
-        const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
-        const handleMonthsValue = useCallback((_) => setMonthsValue(_), []);
-        const userInputParams = {
-            isAnnuity,
-            isInsurance,
-            isSalaryClient,
-            isPensionClient,
-            isStateEmployee,
-            moneyValue,
-            monthsValue,
-        };
+    const CreditCalculatorForm = JSX(({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
+        const [userInputParams, { field }] = useForm({
+            isAnnuity: false,
+            isInsurance: true,
+            isSalaryClient: false,
+            isPensionClient: false,
+            isStateEmployee: false,
+            moneyValue: CREDIT_DEFAULT_SUM,
+            monthsValue: DEFAULT_MONTHS,
+        });
         const calculatorParams = useCreditCalculatorParams(userInputParams, sourceBookDir, paramsViewSettings);
-        useEffect(() => {
-            setMoneyValue(clamp(moneyValue, calculatorParams.minSum, calculatorParams.maxSum));
-            setMonthsValue(clamp(monthsValue, calculatorParams.minMonths, calculatorParams.maxMonths));
-        }, [calculatorParams]);
-        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма кредита, ₽', { ...calculatorParams, step: 500 }, handleMoneyValue), renderMonthsInput('Срок кредита, месяцев', calculatorParams, handleMonthsValue), jsx("div", { className: "mt-7", children: renderCreditParamsForm({
-                                ...calculatorParams,
-                                ...paramsViewSettings,
-                                handleIsSalaryClient,
-                                handleIsStateEmployee,
-                                handleIsPensionClient,
-                                handleIsInsurance,
-                            }) })] }), renderRate(calculatorParams.rate), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: 'Ежемесячный платеж', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), renderPaymentType({
-                            isAnnuity,
-                            orientation: 'vertical',
-                            callback: toggleIsAnnuity,
-                        }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
-    });
-    const renderRate = (rate) => (jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }));
-    const renderCreditParamsForm = ({ isSalaryClient, isStateEmployee, isPensionClient, isInsurance, isShowSalaryClient, isShowStateEmployee, isShowPensionClient, isShowInsurance, handleIsSalaryClient, handleIsStateEmployee, handleIsPensionClient, handleIsInsurance, }) => (jsxs("div", { children: [isShowSalaryClient ? (jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", checked: isSalaryClient, onChange: handleIsSalaryClient })) : null, isShowStateEmployee ? (jsx(Checkbox, { className: "mt-3", text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", checked: isStateEmployee, onChange: handleIsStateEmployee })) : null, isShowPensionClient ? (jsx(Checkbox, { className: "mt-3", text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u043F\u0435\u043D\u0441\u0438\u044E \u043D\u0430 \u043A\u0430\u0440\u0442\u0443 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0430", checked: isPensionClient, onChange: handleIsPensionClient })) : null, isShowInsurance ? (jsx(Checkbox, { className: "mt-3", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", checked: isInsurance, onChange: handleIsInsurance })) : null] }));
-
-    const REMOTE_REGISTRATION = 'remote';
-    const OFFICE_REGISTRATION = 'office';
-    const registrationTypeItems = [
-        {
-            id: OFFICE_REGISTRATION,
-            text: 'Офис Банка',
-        },
-        {
-            id: REMOTE_REGISTRATION,
-            text: 'Дистанционно',
-        },
-    ];
-    function renderRegistrationType({ isRemoteRegistration, callback, title, orientation = 'horizontal', }) {
-        return (jsxs("div", { children: [title ? (jsx("div", { className: "mb-3", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, jsx("div", { children: jsx(RadioButtonGroup, { orientation: orientation, items: registrationTypeItems, checkedItem: isRemoteRegistration ? REMOTE_REGISTRATION : OFFICE_REGISTRATION, onChange: (text) => callback && callback(text === REMOTE_REGISTRATION) }) })] }));
-    }
+        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput({
+                            title: 'Сумма кредита, ₽',
+                            step: 500,
+                            min: calculatorParams.minSum,
+                            max: calculatorParams.maxSum,
+                            ...field('moneyValue'),
+                            value: calculatorParams.moneyValue,
+                        }), renderMonthsInput({
+                            title: 'Срок кредита, месяцев',
+                            min: calculatorParams.minMonths,
+                            max: calculatorParams.maxMonths,
+                            ...field('monthsValue'),
+                            value: calculatorParams.monthsValue,
+                        }), jsx("div", { className: "mt-7", children: renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field) })] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: 'Ежемесячный платеж', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
+    });
+    const renderCreditParamsForm = (params, field) => (jsxs("div", { children: [params.isShowSalaryClient ? (jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", ...field('isSalaryClient'), value: params.isSalaryClient })) : null, params.isShowStateEmployee ? (jsx(Checkbox, { className: "mt-3", text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...field('isStateEmployee'), value: params.isStateEmployee })) : null, params.isShowPensionClient ? (jsx(Checkbox, { className: "mt-3", text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u043F\u0435\u043D\u0441\u0438\u044E \u043D\u0430 \u043A\u0430\u0440\u0442\u0443 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0430", ...field('isPensionClient'), value: params.isPensionClient })) : null, params.isShowInsurance ? (jsx(Checkbox, { className: "mt-3", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", ...field('isInsurance'), value: params.isInsurance })) : null] }));
+
+    const renderRegistrationType = (props) => renderBinaryRadioButtonGroup({
+        ...props,
+        items: [
+            { id: 'remote', text: 'Дистанционно' },
+            { id: 'office', text: 'Офис Банка' },
+        ],
+    });
 
     const arrayByRange = (start, stop, step = 1) => Array.from({ length: Math.abs(stop - start) / step + 1 }, (value, index) => stop >= start ? start + index * step : start - index * step);
 
     const useDepositCalculatorParams = (userInputParams, sourceBookDir, paramsViewSettings) => {
         const { moneyValue, monthsValue } = userInputParams;
         const data = useCalculatorParams(sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR);
-        const defaultMonth = data?.rateRows[0]
+        const defaultMonth = data?.rateRows?.[0]
             ? getMiddleMonth(data.rateRows[0].minMonths, data.rateRows[0].maxMonths)
             : 1;
         const isExcludeMonthlyInterestPayment = !paramsViewSettings?.isShowMonthlyInterestPayment;
@@ -1889,48 +1745,45 @@
     const checkRowByParam = ({ row, userInputParams, paramKey, isExclude }) => isExclude || userInputParams[paramKey] === row[paramKey];
     const getMiddleMonth = (minMonths, maxMonths) => minMonths + Math.round((maxMonths - minMonths) / 2);
 
-    const DepositCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote, paramsViewSettings }) => {
-        const [moneyValue, setMoneyValue] = useState(DEPOSIT_DEFAULT_SUM);
-        const handleMoneyValue = useCallback((_) => setMoneyValue(_), []);
-        const [monthsValue, setMonthsValue] = useState(0);
-        const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
-        const handleIsMonthlyInterestPayment = useCallback((_) => toggleIsMonthlyInterestPayment(_), []);
-        const [isRemoteRegistration, toggleIsRemoteRegistration] = useState(false);
-        const handleIsRemoteRegistration = useCallback((_) => toggleIsRemoteRegistration(_), []);
-        const userInputParams = {
-            moneyValue,
-            monthsValue,
-            isMonthlyInterestPayment,
-            isRemoteRegistration,
-        };
-        const handleMonthsValue = useCallback((_) => setMonthsValue(_), []);
+    const DepositCalculatorForm = JSX(({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
+        const [userInputParams, { field }] = useForm({
+            moneyValue: DEPOSIT_DEFAULT_SUM,
+            monthsValue: 0,
+            isMonthlyInterestPayment: false,
+            isRemoteRegistration: false,
+        });
         const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir, paramsViewSettings);
         const { defaultMonth, income, finalSum, rate } = calculatorParams;
+        const { onChange: setMonthsValue } = field('monthsValue');
         useEffect(() => {
-            setMonthsValue(defaultMonth);
+            setMonthsValue && setMonthsValue(defaultMonth);
         }, [defaultMonth]);
-        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма вклада, ₽', {
-                            ...calculatorParams,
-                        }, handleMoneyValue), renderMonthsInput('Срок вклада, месяцев', {
-                            ...calculatorParams,
-                        }, handleMonthsValue), jsx("div", { className: "mt-7", children: renderDepositParamsForm({
-                                ...calculatorParams,
-                                ...paramsViewSettings,
-                                handleIsMonthlyInterestPayment,
-                                handleIsRemoteRegistration,
-                            }) })] }), jsx(Rate, { rate: rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" }), jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
-    });
-    const renderDepositParamsForm = ({ isMonthlyInterestPayment, isRemoteRegistration, isShowMonthlyInterestPayment, isShowRemoteRegistration, handleIsMonthlyInterestPayment, handleIsRemoteRegistration, }) => (jsxs("div", { className: "flex flex-col gap-y-7", children: [isShowMonthlyInterestPayment
+        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput({
+                            title: 'Сумма вклада, ₽',
+                            min: calculatorParams.minSum,
+                            max: calculatorParams.maxSum,
+                            ...field('moneyValue'),
+                            value: calculatorParams.moneyValue,
+                        }), renderMonthsInput({
+                            title: 'Срок вклада, месяцев',
+                            min: calculatorParams.minMonths,
+                            max: calculatorParams.maxMonths,
+                            availableMonths: calculatorParams.availableMonths,
+                            ...field('monthsValue'),
+                            value: calculatorParams.monthsValue,
+                        }), jsx("div", { className: "mt-7", children: renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field) })] }), jsx(Rate, { rate: rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" }), jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
+    });
+    const renderDepositParamsForm = (params, field) => (jsxs("div", { className: "flex flex-col gap-y-7", children: [params.isShowMonthlyInterestPayment
                 ? renderInterestPayment({
-                    isMonthlyInterestPayment,
-                    callback: handleIsMonthlyInterestPayment,
                     title: 'Выплата процентов',
+                    ...field('isMonthlyInterestPayment'),
+                    value: params.isMonthlyInterestPayment,
                 })
-                : null, isShowRemoteRegistration
+                : null, params.isShowRemoteRegistration
                 ? renderRegistrationType({
-                    isRemoteRegistration,
-                    callback: handleIsRemoteRegistration,
                     title: 'Оформление',
+                    ...field('isRemoteRegistration'),
+                    value: params.isRemoteRegistration,
                 })
                 : null] }));
 
@@ -1960,7 +1813,7 @@
             itemCount: calculatorTabs?.length,
             visibleItemCount: COLUMNS_FOR_SCROLL,
         });
-        return (jsxs(BlockWrapper, { className: `box-border overflow-hidden relative w-100 ${className}`, ...rest, children: [jsxs("div", { className: "bg-white", children: [tabsNav.length > 1
+        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden relative w-100', className), ...rest, children: [jsxs("div", { className: "bg-white", children: [tabsNav.length > 1
                             ? renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })
                             : null, renderArrows({
                             ...controls,
@@ -1979,11 +1832,10 @@
         const iconClassName = isActive ? '' : `text-primary-main`;
         const iconVersion = tab?.icon?.iconVersion;
         const activeIconStyle = isActive ? 'white' : 'normal';
-        return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: `box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-[88px]
-      ${btnClassName}`, children: [jsx(ImgInner, { className: `h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`, image: {
+        return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: style('box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-[88px]', btnClassName), children: [jsx(ImgInner, { className: `h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`, image: {
                         ...tab?.icon,
                         iconVersion: iconVersion ?? activeIconStyle,
-                    }, width: "24", height: "24" }), jsxs("div", { className: "border-0", children: [jsx("div", { className: `${btnTitleClassName}`, children: tab?.title }), jsx("div", { className: `${btnDescClassName}`, children: tab.description })] })] }, String(i)));
+                    }, width: "24", height: "24" }), jsxs("div", { className: "border-0", children: [jsx("div", { className: btnTitleClassName, children: tab?.title }), jsx("div", { className: btnDescClassName, children: tab.description })] })] }, String(i)));
     }
     function renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick }) {
         const CARD_SHIFT = 388;
@@ -1995,6 +1847,8 @@
                         })) }) }), 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,
@@ -2013,22 +1867,16 @@
     };
     const replaceCommaToDot = (val) => String(val.replace(',', '.').replace(/[^.\d]/g, ''));
 
-    const CurrencyInput = JSX(({ className = '', onChange, minValue = 0, maxValue = 300000, ...inputProps }) => {
+    const CurrencyInput = JSX(({ className = '', value = '', onChange, minValue = 0, maxValue = 300000, ...inputProps }) => {
         const handleChange = useCallback((inputValue) => {
-            if (!onChange) {
-                return;
-            }
             const adjustedVal = adjustValue(inputValue);
             const clampVal = getClampValue(adjustedVal, clamp(Number(adjustedVal), minValue, maxValue));
-            onChange(String(clampVal));
-        }, [onChange]);
-        const handleBlur = useCallback((inputValue) => {
-            if (!onChange) {
-                return;
-            }
-            onChange(localNumberFormat(inputValue));
+            onChange && onChange(clampVal);
         }, [onChange]);
-        return (jsx(Input, { className: className, inputClassName: "w-full", onChange: handleChange, onBlur: handleBlur, ...inputProps, children: jsx("span", { className: "text-xl-light absolute right-4 bottom-4", children: "\u20BD" }) }));
+        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 getClampValue = (val, clampVal) => Number(val) === clampVal ? val : String(clampVal);
 
@@ -2045,7 +1893,7 @@
             ? getDisabledButtonClasses({ version: button?.version })
             : getRegularButtonClasses({ className: 'text-white', version: button?.version });
         const link = useLink();
-        return (jsxs(BlockWrapper, { className: `p-12 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: `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] })] }));
     });
 
     const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
@@ -2265,9 +2113,10 @@
         }, [scrollRight, onScrollRight, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
         return (jsxs("div", { children: [renderBlur(isBlur, scroll), canMoveLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'left-8' : 'left-0'), onClick: handleScrollLeft })) : null, canMoveRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'right-8' : 'right-0'), onClick: handleScrollRight })) : null] }));
     });
-    const renderBlur = (isBlur, scroll) => (scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (jsxs("div", { children: [jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white') }), jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white') })] })) : null;
+    const renderBlur = (isBlur, scroll) => isBlur ? (jsxs("div", { children: [scroll.canScrollLeft ? (jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white') })) : null, scroll.canScrollRight ? (jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white') })) : null] })) : null;
 
     const ITEMS_GAP = 4;
+
     const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, arrowsPadded = true, isPadding = true, showDots = false, isAlignCenter = false, ...rest }) => {
         const { blocks: childBlocks = [] } = rest.block || {};
         const count = itemCount || childBlocks?.length;
@@ -2280,7 +2129,7 @@
         });
         const [dotsActiveIndex] = scroll.visibleIndicesRange;
         const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
-        return (jsx(BlockWrapper, { className: style(getPaddingStyle(isPadding), 'group-data-secondary:bg-primary-main group-data-secondary:text-white', className), ...rest, children: jsxs("div", { className: style(getAlignStyle(isAlignCenter), 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
+        return (jsx(BlockWrapper, { className: style(getPaddingStyle$1(isPadding), 'group-data-secondary:bg-primary-main group-data-secondary:text-white', className), ...rest, children: jsxs("div", { className: style(getAlignStyle(isAlignCenter), 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
                             ...rest,
                             renderProps: isBankHistoryCarousel
                                 ? (block, options) => renderBlock$1(block, options, {
@@ -2288,7 +2137,7 @@
                                     activeIndex: activeIndex,
                                 })
                                 : renderBlock$1,
-                        }) }), jsx(CarouselScrollButtons, { scroll: scroll, isBlur: isBlur, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count }), showDots ? renderDots(containerRef, dotsActiveIndex, itemCount) : null] }) }));
+                        }) }), jsx(CarouselScrollButtons, { scroll: scroll, isBlur: isBlur, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count }), showDots ? renderDots(containerRef, dotsActiveIndex, count) : null] }) }));
     });
     Carousel.childrenTypes = [
         'CarouselCard',
@@ -2303,7 +2152,7 @@
         'CarouselInvestmentCard',
         'CarouselEventCard',
     ];
-    const getPaddingStyle = (isPadding) => (isPadding ? 'p-12' : '');
+    const getPaddingStyle$1 = (isPadding) => (isPadding ? 'p-default' : '');
     const getAlignStyle = (isAlignCenter) => isAlignCenter ? 'flex justify-center' : '';
     const renderDots = (containerRef, dotsActiveIndex, itemCount) => (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: dotsActiveIndex, dotCount: itemCount, listType: 'horizontal-list' }));
 
@@ -2437,8 +2286,8 @@
 
     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], {
-                    className: style('p-6 pt-0', isFullWidth ? '' : 'justify-center'),
-                    isVertical: isFullWidth ? true : false,
+                    className: style('p-6 pt-0', isFullWidth ? '' : 'self-center min-w-[158px]'),
+                    isVertical: isFullWidth,
                 })] }));
     });
     const renderImage$3 = (image) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`, image: image })) : null] }));
@@ -2448,9 +2297,9 @@
     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 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$1) })) : null] })] }) }));
+        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$1 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: "text-h6", children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
+    const renderList$2 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: "text-h6", children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
 
     const ICONS_MAP = [
         {
@@ -2512,7 +2361,7 @@
         return (jsx("div", { className: style(richVersion, 'md-container'), dangerouslySetInnerHTML: { __html } }));
     });
 
-    const CarouselRichTextCard = JSX(({ className = '', __html, richVersion = 'striped', ...rest }) => (jsx(BlockWrapper, { className: style('p-9 border border-gray min-w-96', className), ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) })));
+    const CarouselRichTextCard = JSX(({ className = '', __html, richVersion = 'striped', ...rest }) => (jsx(BlockWrapper, { className: style('p-9 border border-gray h-full min-w-96', className), ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) })));
 
     const Foldable = JSX(({ className = '', isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
         const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
@@ -2536,20 +2385,24 @@
         return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} ${className}`, children: children }));
     });
 
+    const getPaddingStyle = (isHighlighting) => isHighlighting ? 'p-8 mt-8 pt-20' : 'p-8 mt-20';
+
+    const descriptionSize = 'text-h6';
+
+    const renderCardInfo = (cell, i) => {
+        const { title, description, buttons } = cell;
+        return (jsxs("div", { className: "py-5 border-b border-main-divider", children: [title ? (jsx("div", { className: "opacity-80", children: jsx(Text, { size: "text-m", color: "text-secondary-text", children: title }) })) : null, description ? (jsx("div", { className: "mt-1", children: jsx(Text, { size: descriptionSize, color: "text-primary-text", children: description }) })) : null, buttons?.length ? (jsx("div", { className: "text-primary-main", children: renderButtonsSection(buttons) })) : null] }, String(i)));
+    };
+
     const VISIBLE_CELLS_COUNT = 1;
-    const CarouselTariffsCard = JSX(({ className = '', title, icon, isHighlighting, button, cardCells = [], ...rest }) => {
+    const CarouselTariffsCard = JSX(({ className = '', title, icon, isHighlighting = false, button, cardCells = [], ...rest }) => {
         const cellsNode = cardCells.map(renderCardInfo);
         const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
         const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
-        return (jsxs(BlockWrapper, { className: style('relative border border-gray p-8 flex flex-col', getHitStyle(isHighlighting), className), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock$1(icon), title ? jsx(Heading, { className: "text-center pt-2", headingType: "h5", title: title }) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
+        return (jsxs(BlockWrapper, { className: style('relative border border-gray flex flex-col', getPaddingStyle(isHighlighting), className), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock$1(icon), title ? jsx(Heading, { className: "text-center pt-2", headingType: "h5", title: title }) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
     });
-    const renderIconBlock$1 = (icon) => (jsxs("div", { className: "w-[267px] min-w-[267px] self-center", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: icon }) : null] }));
-    const getHitStyle = (isHighlighting) => isHighlighting ? 'mt-8 pt-20' : 'mt-20 pt-8';
+    const renderIconBlock$1 = (icon) => (jsx("div", { className: "w-[267px] min-w-[267px] self-center", children: icon?.src || icon?.icon ? jsx(ImgInner, { image: icon }) : null }));
     const renderFoldButton$1 = ({ isUnfolded, onToggle }) => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center", onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16" })] }));
-    const renderCardInfo = (cell, i) => {
-        const { title, description, buttons } = cell;
-        return (jsxs("div", { className: "py-5 border-b border-main-divider", children: [title ? (jsx("div", { className: "text-secondary-text text-m-light opacity-80", children: cell.title })) : null, description ? (jsx("div", { className: "text-primary-text text-h6 mt-1", children: cell.description })) : null, buttons?.length ? (jsx("div", { className: "text-primary-main", children: renderButtonsSection(buttons) })) : null] }, String(i)));
-    };
     const renderHitIcon = () => (jsxs("div", { className: "absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "23", height: "22" }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: "\u0425\u0418\u0422" })] }));
 
     const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
@@ -2621,7 +2474,7 @@
     });
     const renderShowMoreToggleButton = ({ isShowAllRow, onClick, }) => (jsx("div", { className: "pr-12", children: jsxs("div", { className: "flex w-full", children: [jsx("div", { className: FIRST_CELL_CLASSES$1 }), jsx("button", { onClick: onClick, className: "mt-5 flex-1 border-gray border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main", children: jsx("div", { className: "font-sans text-xs-light font-medium py-3", children: !isShowAllRow ? 'Показать все параметры' : 'Скрыть' }) })] }) }));
 
-    const ContactsBlock = JSX(({ className = '', contacts, info, version = 'secondary', ...rest }) => (jsxs(BlockWrapper, { className: `flex p-12 ${className}`, version: version, ...rest, children: [info?.length ? renderBlocks(info) : null, contacts?.length ? renderBlocks(contacts) : null] })));
+    const ContactsBlock = JSX(({ className = '', contacts, info, version = 'secondary', ...rest }) => (jsxs(BlockWrapper, { className: `flex p-default ${className}`, version: version, ...rest, children: [info?.length ? renderBlocks(info) : null, contacts?.length ? renderBlocks(contacts) : null] })));
     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;
 
@@ -2854,23 +2707,6 @@
         return currencies?.filter((_) => _?.currency?.id === 1 || _?.currency?.id === 2) || [];
     };
 
-    const useForm = (initialState = {}) => {
-        const [formState, setFormState] = useState(initialState);
-        const handlersMap = useRef({});
-        const register = (fieldName) => {
-            if (!handlersMap.current) {
-                return {};
-            }
-            const handler = (value) => {
-                setFormState((prev) => ({ ...prev, [fieldName]: value }));
-            };
-            handlersMap.current[fieldName] ||= handler;
-            return { value: formState?.[fieldName], onChange: handlersMap.current[fieldName] };
-        };
-        const resetForm = useCallback(() => setFormState({}), []);
-        return { formState, register, resetForm };
-    };
-
     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'
@@ -2922,25 +2758,26 @@
         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, register) => (key) => {
+    const renderFormItem = (filtrationSchema, field) => (key) => {
         const item = filtrationSchema[key];
         const type = item?.type;
         switch (type) {
             case 'array':
-                return renderCheckboxes(key, register)(item);
+                return renderCheckboxes(key, field)(item);
             default:
                 return null;
         }
     };
-    const renderCheckboxes = (key, register) => (item) => {
+    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, ...register(key) })] }, key));
+        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 { formState, register, resetForm } = useForm();
-        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, register)) }), resetButton ? (jsx("div", { children: jsx(Button, { className: "w-72", onClick: resetForm, ...resetButton }) })) : null] }), jsx(FiltrationInner, { filtrationState: formState, ...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 || {};
@@ -2971,12 +2808,12 @@
         'bg-white': 'text-primary-text',
         transparent: 'text-white',
     };
-    const renderTitle$3 = (title, bgColor, className) => {
+    const renderTitle$2 = (title, bgColor, className) => {
         return (jsx("span", { className: `${TEXT_COLOR[bgColor]} ml-2.5 font-medium ${className || ''}`, children: title || 'Россельхозбанк' }));
     };
 
     const Logo = JSX(({ className = '', href, logo, children = logo?.title, targetBlank, bgColor = 'bg-white', showTitle = true, }) => {
-        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$2(bgColor, logo?.image, { width: '40', height: '45' }), showTitle ? renderTitle$3(children || logo?.title, bgColor) : null] }));
+        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$2(bgColor, logo?.image, { width: '40', height: '45' }), showTitle ? renderTitle$2(children || logo?.title, bgColor) : null] }));
     });
 
     const CloseButton = JSX(({ className, onClick }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-1 bg-transparent border-none', className), onClick: onClick, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(ImgInner, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
@@ -3166,14 +3003,6 @@
         return isOpened ? (jsx("div", { className: style('fixed inset-0 bg-white text-l-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar', className), role: "dialog", children: jsxs("div", { className: "relative container pb-12 min-h-full", children: [jsxs("div", { className: "sticky bg-white pt-6 top-0", children: [jsx(CloseButton, { className: "absolute top-10 -right-12", onClick: onClose }), head] }), children] }) })) : null;
     });
 
-    function useBool(defaultValue = false) {
-        const [value, setValue] = useState(defaultValue);
-        const setTrue = useCallback(() => setValue(true), []);
-        const setFalse = useCallback(() => setValue(false), []);
-        const toggle = useCallback(() => setValue((_) => !_), []);
-        return [value, { setValue, setTrue, setFalse, toggle }];
-    }
-
     function useDialogProps(id, initOpen = false) {
         const [isOpened, { setTrue: open, setFalse: close }] = useBool(initOpen);
         const [params, setParams] = useState({ id });
@@ -3315,7 +3144,7 @@
         return (jsxs(BlockWrapper, { tag: "footer", className: `p-9 ${className}`, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD, logo: logo }), jsx(SearchBar$1, { className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, hasButton: true }), jsx(SocialMedia, { media: socialMedia, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "flex-grow", topItems: sitemap?.topItems })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
     });
 
-    const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-4", title: title, description: description, headlineVersion: "M" }), calendar ? renderCalendar(calendar) : null] })));
+    const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: `p-default ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-4", title: title, description: description, headlineVersion: "M" }), calendar ? renderCalendar(calendar) : null] })));
     const renderCalendar = (calendar) => {
         const colCount = calendar.reduce((accumulator, currentValue) => currentValue?.month?.length ? accumulator + currentValue.month.length : accumulator, 0) || 1;
         const colSize = 100 / colCount;
@@ -3607,7 +3436,7 @@
         '': '',
     };
 
-    const HorizontalLayout = JSX(({ className = '', gap = 'XS', isPadding = false, version = 'transparent', isTheme = false, ...rest }) => (jsx(BlockWrapper, { className: style('relative', 'grid grid-cols-12', isPadding ? 'p-12' : '', gapStyles[gap], className), version: version, isTheme: isTheme, ...rest, children: renderChildren(rest) })));
+    const HorizontalLayout = JSX(({ className = '', gap = 'XS', isPadding = false, version = 'transparent', isTheme = false, ...rest }) => (jsx(BlockWrapper, { className: style('relative', 'grid grid-cols-12', isPadding ? 'p-default' : '', gapStyles[gap], className), version: version, isTheme: isTheme, ...rest, children: renderChildren(rest) })));
     HorizontalLayout.childrenTypes = {
         exclude: ['HorizontalLayout'],
     };
@@ -3756,7 +3585,7 @@
         double: 'flex-wrap',
         single: 'flex-col',
     };
-    const LinkDocs = JSX(({ className = '', title, description, align = 'text-center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => (jsxs(BlockWrapper, { className: style('p-12', className), ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, align: align, headlineVersion: "M", as: "h2" }), documents?.length ? (jsx("div", { className: style('mt-8 flex gap-6', linkColumnsModeStyleMap[columnsMode]), role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { doc: doc, icon: icon ? (jsx(ImgInner, { className: "min-w-6 min-h-6", image: icon, width: "24", height: "24" })) : null }) }, String(i)))) })) : null] })));
+    const LinkDocs = JSX(({ className = '', title, description, align = 'text-center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => (jsxs(BlockWrapper, { className: style('p-default', className), ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, align: align, headlineVersion: "M", as: "h2" }), documents?.length ? (jsx("div", { className: style('mt-8 flex gap-6', linkColumnsModeStyleMap[columnsMode]), role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { doc: doc, icon: icon ? (jsx(ImgInner, { className: "min-w-6 min-h-6", image: icon, width: "24", height: "24" })) : null }) }, String(i)))) })) : null] })));
 
     const getColSpan = (className) => {
         const colSpanPrefix = 'col-span-';
@@ -3779,12 +3608,12 @@
 
     const MobileAppTile = JSX(({ className = '', title = 'Мобильное приложение', qr, buttons, version = 'primary', items, image, headingType = 'h4', alignTitle = 'left', description, ...rest }) => {
         const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
-        return (jsxs(BlockWrapper, { className: `flex justify-between p-12 box-border relative min-h-80 ${getTileMinHeight(className)} ${className}`, version: version, ...rest, children: [jsxs(BaseTile, { className: "z-10", title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap mb-7 w-full ${AlignText[alignTitle]}` })) : null, buttons: renderButtonsSection(buttons, {
+        return (jsxs(BlockWrapper, { className: `flex justify-between p-default box-border relative min-h-80 ${getTileMinHeight(className)} ${className}`, version: version, ...rest, children: [jsxs(BaseTile, { className: "z-10", title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap mb-7 w-full ${AlignText[alignTitle]}` })) : null, buttons: renderButtonsSection(buttons, {
                         className: 'mt-8',
                         buttonClassName: 'min-w-[168px]',
-                    }), 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(items)] })] }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(ImgInner, { image: image }) })) : null] }));
+                    }), 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 = (items) => {
+    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" }));
     };
     const renderDescription$2 = (description) => description ? jsx("p", { className: "text-xl-light mb-5 pt-0.5", children: description }) : null;
@@ -4272,7 +4101,7 @@
     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-12 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 })] }));
+        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 ProductGallery = JSX(({ className = '', slides = [], ...rest }) => {
@@ -4664,9 +4493,9 @@
         const count = tab.ref && page?.blocks
             ? page.blocks.filter((block) => block?.labels?.includes(tab.ref)).length
             : 0;
-        return (jsx("div", { className: getGroupTabClassName('div', active, isScrollable), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: `flex flex-1 items-center justify-center ${getGroupTabClassName('text', active, isScrollable)}`, children: [renderTitle$2(tab.title, active, isScrollable), renderCount(showCounter, count, active)] }) }, `group-${String(i)}`));
+        return (jsx("div", { className: getGroupTabClassName('div', active, isScrollable), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: `flex flex-1 items-center justify-center ${getGroupTabClassName('text', active, isScrollable)}`, children: [renderTitle$1(tab.title, active, isScrollable), renderCount(showCounter, count, active)] }) }, `group-${String(i)}`));
     };
-    const renderTitle$2 = (title, active, isScrollable) => {
+    const renderTitle$1 = (title, active, isScrollable) => {
         const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
         const titleClassName = isScrollable
             ? `${TEXT_CLASSES} ${activeClassName}`
@@ -4906,9 +4735,9 @@
         });
         const rows = (rowData || []).map((row, i) => (jsx(TariffsTableRow, { row: row, activeIndex: activeIndex, rowIdx: i, ...rest }, String(i))));
         const [visibleRows, hiddenRows] = hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
-        return (jsxs(BlockWrapper, { className: `p-12 overflow-hidden relative ${itemCount > 1 ? 'pr-0' : ''} ${className}`, ...rest, children: [renderTitle$1({ title, description }), renderDescription$1(description), hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(Wrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(Wrapper, { controls: controls, children: rows }))] }));
+        return (jsxs(BlockWrapper, { className: `p-default overflow-hidden relative ${itemCount > 1 ? 'pr-0' : ''} ${className}`, ...rest, children: [renderTitle({ title, description }), renderDescription$1(description), hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(Wrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(Wrapper, { controls: controls, children: rows }))] }));
     });
-    function renderTitle$1({ title, description }) {
+    function renderTitle({ title, description }) {
         return title ? (jsx(Heading, { headingType: "h3", className: `text-center ${description ? 'mb-2.5' : 'mb-8'}`, title: title })) : null;
     }
     function renderDescription$1(description) {
@@ -4923,13 +4752,16 @@
                         })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
     });
 
-    const TextBlock = JSX(({ className = '', title, description, iconVersion, image, __html, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `px-9 py-4 flex gap-3 bg-white group-data-secondary:bg-primary-main/10' ${className}`, ...rest, children: [iconVersion === 'small' ? jsx("div", { className: "mt-1", children: renderIcon() }) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { children: [title ? renderTitle(title) : null, description ? jsx("div", { className: "mt-1", children: renderDescription(description) }) : null, __html ? jsx(RichText, { __html: __html }) : null] })] }));
+    const TextBlock = JSX(({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => {
+        return (jsxs(BlockWrapper, { className: style('px-9 py-4 flex gap-3 bg-white group-data-secondary:bg-primary-main/10', className), ...rest, children: [iconVersion === 'small' ? jsx("div", { className: "mt-1", children: renderIcon() }) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "flex flex-col w-fit gap-3", children: [title ? (jsx(Text, { size: "text-l", font: "font-medium", color: "text-primary-text group-data-secondary:text-white", children: title })) : null, description ? renderDescription(description) : null, items?.length ? renderList(items, true) : null, __html ? jsx(RichText, { __html: __html }) : null] })] }));
     });
     const renderIcon = () => (jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main`, children: "i" }));
-    const renderImage = (image) => (image?.src ? jsx(ImgInner, { image: image }) : null);
-    const renderTitle = (title) => (jsx(Text, { size: "text-l", font: "font-medium", color: "text-primary-text group-data-secondary:text-white", children: title }));
+    const renderImage = (image) => image?.src ? jsx(ImgInner, { className: "h-fit", image: image }) : null;
     const renderDescription = (description) => (jsx(Paragraph, { size: "text-s", color: "text-secondary-text group-data-secondary:text-white", children: description }));
+    const renderList = (items, bullets) => {
+        const listStyle = bullets ? 'list-disc pl-6' : '';
+        return (jsx("ul", { className: style('text-secondary-text group-data-secondary:text-white/80', listStyle), children: items.map((_, i) => (jsx("li", { children: jsx(Text, { size: "text-s", font: "font-light", children: _ }) }, `listItem-${i}`))) }));
+    };
 
     const Tags = JSX((props) => {
         const { tags, className = '' } = props;
@@ -4950,7 +4782,7 @@
     };
     const VerticalLayout = JSX(({ className = '', gap = '', align = 'stretch', isPadding = false, isInnerPadding = true, version = 'transparent', isTheme = false, ...rest }) => {
         const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
-        return (jsx(BlockWrapper, { className: style('relative', 'flex flex-col [&>*]:max-w-full', isPadding ? 'p-12' : '', gapStyles[gap], align && alignStyle[align], className), version: version, isTheme: isTheme, ...rest, children: renderChildren({
+        return (jsx(BlockWrapper, { className: style('relative', 'flex flex-col [&>*]:max-w-full', isPadding ? 'p-default' : '', gapStyles[gap], align && alignStyle[align], className), version: version, isTheme: isTheme, ...rest, children: renderChildren({
                 ...rest,
                 renderProps: (block, options) => renderBlock$1(block, options, { className: innerPaddingStyle }),
             }) }));
@@ -5174,7 +5006,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.5";
+    const packageVersion = "0.10.7";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;