@redneckz/wildless-cms-uni-blocks 0.10.4 → 0.10.6

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 = (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],
+            };
+        };
+        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 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 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 = (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,14 +891,14 @@
         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);
 
@@ -941,25 +924,12 @@
         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 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 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 +939,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 +1041,22 @@
             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) => {
+            e.preventDefault();
+            onChange && onChange(!value);
+        }, [onChange, 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 +1068,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 +1107,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-12 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)));
@@ -1263,13 +1190,13 @@
 
     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' : '';
+        const paddingStyle = isPadding ? 'p-default' : '';
         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 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 +1214,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 +1240,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]) })));
 
@@ -1504,7 +1431,7 @@
         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';
@@ -1644,7 +1571,7 @@
                                             orientation: 'vertical',
                                         })] })] }), 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 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, value: 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", value: 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", value: 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 }) => {
@@ -1817,7 +1744,7 @@
                         }), 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 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", value: 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", value: 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", value: 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", value: isInsurance, onChange: handleIsInsurance })) : null] }));
 
     const REMOTE_REGISTRATION = 'remote';
     const OFFICE_REGISTRATION = 'office';
@@ -2013,22 +1940,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 && onChange(clampVal);
         }, [onChange]);
-        const handleBlur = useCallback((inputValue) => {
-            if (!onChange) {
-                return;
-            }
-            onChange(localNumberFormat(inputValue));
-        }, [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 +1966,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,7 +2186,7 @@
         }, [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 }) => {
@@ -2303,7 +2224,7 @@
         'CarouselInvestmentCard',
         'CarouselEventCard',
     ];
-    const getPaddingStyle = (isPadding) => (isPadding ? 'p-12' : '');
+    const getPaddingStyle = (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' }));
 
@@ -2362,8 +2283,8 @@
     const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: `border box-border border-gray p-7 min-w-[392px] h-full flex flex-col justify-left ${className}`, ...rest, children: [image?.src ? jsx(ImgInner, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Paragraph, { size: "text-m", align: "text-left", font: "font-light", children: description }) })) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })] })));
     const renderColorOption = (color, i) => (jsx("div", { role: "figure", className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
 
-    const LinkWrapper = JSX(({ className = '', href, target, children }) => {
-        const link = useLink();
+    const LinkWrapper = JSX(({ className = '', href, target, isRemote = false, children }) => {
+        const link = useLink({ isRemote });
         const linkProps = link({ href, target });
         const Tag = href ? 'a' : 'div';
         return (jsx(Tag, { className: style('block', className), ...(href ? linkProps : {}), children: children }));
@@ -2407,7 +2328,7 @@
 
     const MAX_LINKS_COUNT = 10;
     const CarouselLinks = JSX(({ className = '', additionalDescription, description, links, title, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `flex w-full p-10 overflow-hidden justify-between ${className}`, ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-9 text-white text-xl-light", children: [jsx(Headline, { isPadding: false, title: title, description: description, as: "h1", align: "text-left" }), additionalDescription ? (jsx(Headline, { className: "pt-6", isPadding: false, description: description, align: "text-left" })) : null] }), links?.length ? renderLinks(links) : null] }));
+        return (jsxs(BlockWrapper, { className: `flex w-full p-10 overflow-hidden justify-between ${className}`, ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-9 text-white text-xl-light", children: [jsx(Headline, { isPadding: false, title: title, description: description, as: "h1", align: "text-left" }), additionalDescription ? (jsx(Headline, { className: "pt-6", isPadding: false, description: additionalDescription, align: "text-left" })) : null] }), links?.length ? renderLinks(links) : null] }));
     });
     const renderLinks = (links) => {
         const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
@@ -2437,8 +2358,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 +2369,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 +2433,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);
@@ -2621,7 +2542,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 +2775,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 +2826,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,15 +2876,15 @@
         '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('visible peer-placeholder-shown:invisible w-6 h-6 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" }) })));
+    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" }) })));
 
     function assertUnreachable(x) {
         throw new Error(x);
@@ -3163,19 +3068,11 @@
                 globalThis.document?.removeEventListener('keydown', handleEscape);
             };
         }, [onClose]);
-        return isOpened ? (jsx("div", { className: style('fixed inset-0 bg-white text-l-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar', className), role: "dialog", children: jsxs("div", { className: "relative container pb-12 min-h-full", children: [jsxs("div", { className: "sticky bg-white pt-6 top-0", children: [jsx(CloseButton, { className: "absolute top-3 -right-6", onClick: onClose }), head] }), children] }) })) : null;
+        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) {
-        const [isOpened, { setTrue: open, setFalse: close }] = useBool();
+    function useDialogProps(id, initOpen = false) {
+        const [isOpened, { setTrue: open, setFalse: close }] = useBool(initOpen);
         const [params, setParams] = useState({ id });
         const wasOpened = useRef(isOpened);
         wasOpened.current ||= isOpened;
@@ -3315,7 +3212,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 +3504,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 +3653,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 +3676,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 +4169,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 +4561,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 +4803,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 +4820,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 +4850,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 }),
             }) }));
@@ -5089,6 +4989,18 @@
         }, [scrollTarget]);
     }
 
+    const COOKIE_DIALOG_ID = 'cookie';
+    const LOCAL_STORAGE_NAME = 'cookieClose';
+    const CookiePopup = JSX(({ termLink, personalDataPolicyLink }) => {
+        const { isOpened, onClose } = useDialogProps(COOKIE_DIALOG_ID, !globalThis.localStorage?.getItem(LOCAL_STORAGE_NAME));
+        const handleClose = useCallback(() => {
+            globalThis.localStorage?.setItem(LOCAL_STORAGE_NAME, 'true');
+            onClose && onClose();
+        }, [onClose]);
+        return isOpened ? (jsx("div", { className: "container z-40 fixed bottom-0 left-0 right-0 pointer-events-none", children: jsxs("div", { className: "bg-white m-6 p-6 rounded-md flex items-center pointer-events-auto shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx("div", { className: "flex-1", children: jsxs(Paragraph, { size: "text-s-light", color: "text-primary-text", children: ["\u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442", jsx(LinkWrapper, { isRemote: true, className: style(getStyleLinkWrapper(termLink?.href)), ...termLink, children: "cookie" }), "(\u0444\u0430\u0439\u043B\u044B \u0441 \u0434\u0430\u043D\u043D\u044B\u043C\u0438 \u043E \u043F\u0440\u043E\u0448\u043B\u044B\u0445 \u043F\u043E\u0441\u0435\u0449\u0435\u043D\u0438\u044F\u0445 \u0441\u0430\u0439\u0442\u0430) \u0434\u043B\u044F \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043E\u0432 \u0438 \u0443\u0434\u043E\u0431\u0441\u0442\u0432\u0430 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u0439. \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0437\u0430\u043F\u0440\u0435\u0442\u0438\u0442\u044C \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435 cookie \u0432 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430\u0445 \u0441\u0432\u043E\u0435\u0433\u043E \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.", jsx(LinkWrapper, { isRemote: true, className: style(getStyleLinkWrapper(personalDataPolicyLink?.href)), ...personalDataPolicyLink, children: "\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0430 \u0412\u0430\u0448\u0438\u0445 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445" }), "\u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0441\u044F \u0432 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u044F\u043C\u0438 \u0424\u0435\u0434\u0435\u0440\u0430\u043B\u044C\u043D\u043E\u0433\u043E \u0437\u0430\u043A\u043E\u043D\u0430 \u043E\u0442 27.07.2006 \u2116 152-\u04243 \u00AB\u041E \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445\u00BB."] }) }), jsx("div", { className: "w-24 flex justify-end", children: jsx(CloseButton, { className: "bg-main-gray rounded-md", onClick: handleClose }) })] }) })) : null;
+    });
+    const getStyleLinkWrapper = (href) => ['inline mx-1', href ? 'text-green-dark' : ''];
+
     const api = LikeAPI();
     function useLikeService(pagePath) {
         const [likeCount, setLikeCount] = useState(0);
@@ -5154,7 +5066,7 @@
                                 ...options,
                                 slotName: 'footer',
                             })
-                            : null] }), likeControl ? renderLikeControl() : null] }));
+                            : null] }), likeControl ? renderLikeControl() : null, jsx(CookiePopup, { termLink: { href: '/pd-policy#cookie', target: '_blank' }, personalDataPolicyLink: { href: '/pd-policy', target: '_blank' } })] }));
     });
     ContentPage.childrenTypes = [];
     ContentPage.slots = () => ['header', 'footer'];
@@ -5162,7 +5074,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.4";
+    const packageVersion = "0.10.6";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;