@redneckz/wildless-cms-uni-blocks 0.9.16 → 0.10.0

package/bundle/bundle.umd.js

@@ -358,25 +358,6 @@
     };
     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 Input = JSX(({ className = '', inputClassName = '', id, name, type = 'text', label, value = '', valid = true, children, onChange, onBlur, ...inputProps }) => {
-        const handleChange = useCallback((e) => {
-            const validInputValue = e.target.validity.valid ? e.target.value : value;
-            onChange(validInputValue);
-        }, [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] }));
-    });
-
     const consistentDataMap = new Map();
     function useAsyncData(key, fetcher, { fallback } = {}) {
         const args = useMemo(() => keyToArgs(key), [key]);
@@ -463,24 +444,6 @@
         return data || [];
     }
 
-    const ACQUIRING_TYPES = [
-        {
-            name: 'Торговый эквайринг',
-        },
-        {
-            name: 'Мобильный эквайринг',
-        },
-        {
-            name: 'Интернет-эквайринг',
-        },
-        {
-            name: 'QR-эквайринг (СБП)',
-        },
-        {
-            name: 'Все виды эквайринга',
-        },
-    ];
-
     const useDialog = (id = '') => ({
         open: (message) => defaultEventBus.fire('dialog', { type: 'open', id, message }),
         close: () => defaultEventBus.fire('dialog', { type: 'close' }),
@@ -622,7 +585,7 @@
 
     const getRegularButtonClasses = ({ className, rounded, version, }) => [
         buttonStyle,
-        'border border-transparent inline-block cursor-pointer no-underline focus:border-primary-text focus:border',
+        'border border-transparent inline-block cursor-pointer no-underline focus:border-primary-text focus:border h-fit',
         version ? buttonStyleMap[version] : '',
         rounded ? 'rounded-full' : 'rounded-md',
         className,
@@ -643,7 +606,67 @@
 
     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 normalizeSelectedRegion$1 = (selectedRegion, regions) => !selectedRegion && regions?.length && regions[0]?.code ? regions[0].code : selectedRegion;
+    const Input = JSX(({ className = '', inputClassName = '', id, name, type = 'text', label, value = '', valid = true, children, onChange, onBlur, ...inputProps }) => {
+        const handleChange = useCallback((e) => {
+            const validInputValue = e.target.validity.valid ? e.target.value : value;
+            onChange(validInputValue);
+        }, [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] }));
+    });
+
+    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 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 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 ACQUIRING_TYPES = [
+        {
+            name: 'Торговый эквайринг',
+        },
+        {
+            name: 'Мобильный эквайринг',
+        },
+        {
+            name: 'Интернет-эквайринг',
+        },
+        {
+            name: 'QR-эквайринг (СБП)',
+        },
+        {
+            name: 'Все виды эквайринга',
+        },
+    ];
 
     function useOutsideClick(onClick) {
         const targetRef = useRef(null);
@@ -684,7 +707,7 @@
     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 = '' }) => {
+    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), []);
@@ -693,13 +716,14 @@
             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)}`, 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] })] }));
+            ${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 renderOptionsStyle = (isOpen) => (isOpen ? '' : 'overflow-hidden');
     const renderOption = (choiceOption, isOpen, isSelected) => (option, i) => {
@@ -707,17 +731,18 @@
                 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) => isBorder ? 'border border-gray rounded-md hover:border-primary-hover' : '';
+    const getBorderStyle = (isBorder, valid) => `
+  ${isBorder ? 'border rounded-md hover:border-primary-hover' : ''} ${valid ? ' border-gray' : 'border-error'} `;
 
-    const WrapperSelect$1 = JSX(({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label }) => {
+    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 (jsx(Select, { options: dataFormat, label: label, placeholder: placeholder || selected, onChange: (_) => setSelected(_.key), value: selectedObj }));
+        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 renderSelects = ({ acquiringType, regions, region, handleChange }) => (jsxs("div", { className: "flex justify-between gap-5 mb-7", children: [jsx("div", { className: "w-1/2", children: jsx(WrapperSelect$1, { data: ACQUIRING_TYPES, fieldValue: "name", fieldLabel: "name", selected: acquiringType, setSelected: (value) => handleChange({ 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(WrapperSelect$1, { data: regions, fieldValue: "code", fieldLabel: "name", selected: region, setSelected: (value) => handleChange({ region: value }), label: "\u0410\u0434\u0440\u0435\u0441", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441" }) })] }));
+    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 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 }) })] })));
 
@@ -731,99 +756,146 @@
         return (jsx("button", { type: "submit", className: `p-4 ${buttonStyle} ${className}`, children: button?.text ? button.text : 'Отправить заявку' }));
     };
 
-    const useFormHandlers = ({ setFormState }) => {
+    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,
         };
     };
 
+    const initialFormState$4 = {
+        acquiringType: 'Торговый эквайринг',
+        region: '',
+        fullName: '',
+        inn: '',
+        name: '',
+        phone: '',
+        onlineСheckout: false,
+        posTerminal: false,
+    };
+    const errorsInitialState$2 = {
+        acquiringType: '',
+        region: '',
+        fullName: '',
+        inn: '',
+        name: '',
+        phone: '',
+    };
     const ApplicationFormAcquiring = JSX((props) => {
         const { button, link, handleSubmit } = props;
-        const [formState, setFormState] = useState({
-            acquiringType: '',
-            region: '',
-            fullName: '',
-            inn: '',
-            name: '',
-            phone: '',
-            onlineСheckout: false,
-            posTerminal: false,
+        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 { handleChange } = useFormHandlers({
-            setFormState,
-        });
-        const selectedRegion = normalizeSelectedRegion$1(region, regions);
-        useEffect(() => {
-            setFormState((oldState) => ({
-                ...oldState,
-                acquiringType: ACQUIRING_TYPES?.length && ACQUIRING_TYPES[0]?.name ? ACQUIRING_TYPES[0].name : '',
-            }));
-        }, []);
-        const onSubmit = async (e) => {
+        const onSubmit = (e) => {
             e.preventDefault();
-            const partnerComments = `Вид эквайринга=${acquiringType}/Онлайн касса=${onlineСheckout}/POS-терминал=${posTerminal}`;
-            handleSubmit &&
-                (await handleSubmit({
-                    typeForm: 'acqr',
-                    region: regions.find((_) => _.code === selectedRegion)?.name || '',
-                    partnerComments,
+            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({
                     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" }), renderSelects({
-                    acquiringType,
-                    regions,
-                    region: selectedRegion,
                     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" }), renderDataOrganization$4({ fullName, inn, name, phone, handleChange }), renderSlideCheckboxes({
+                    errors,
+                    handleChangeErrors,
+                }), renderSlideCheckboxes({
                     onlineСheckout,
                     posTerminal,
                     handleChange,
                 }), renderSubmitButton(button, 'mb-4'), jsx(Footnote, { link: link })] }));
     });
-    const renderDataOrganization$4 = ({ fullName, inn, name, phone, handleChange, }) => (jsxs("div", { className: "flex justify-between gap-5 mb-5", children: [jsxs("div", { className: "w-1/2", children: [jsx(Input, { className: "shrink-0 text-l w-full mb-5", type: "text", "aria-label": "\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", 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(Input, { className: "shrink-0 text-l w-full", type: "text", "aria-label": "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", value: name, onChange: (value) => handleChange({ name: value }) })] }), jsxs("div", { className: "w-1/2", children: [jsx(Input, { className: "shrink-0 text-l w-full mb-5", type: "text", label: "\u0418\u041D\u041D", "aria-label": "\u0418\u041D\u041D", value: inn, onChange: (value) => handleChange({ inn: value }) }), jsx(Input, { className: "shrink-0 text-l w-full", type: "text", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", "aria-label": "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", value: phone, onChange: (value) => handleChange({ phone: value }) })] })] }));
 
+    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 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 initialFormState$3 = {
+        region: '',
+        name: '',
+        phone: '',
+        inn: '',
+        mail: '',
+    };
     const ApplicationFormBusinessCard = JSX((props) => {
         const { button, link, handleSubmit } = props;
-        const [formState, setFormState] = useState({
-            region: '',
-            name: '',
-            phone: '',
-            inn: '',
-            mail: '',
+        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 { handleChange } = useFormHandlers({
-            setFormState,
-        });
-        const selectedRegion = normalizeSelectedRegion$1(region, regions);
-        const onSubmit = async (e) => {
+        const onSubmit = (e) => {
             e.preventDefault();
-            handleSubmit &&
-                (await handleSubmit({
-                    typeForm: 'bcrd',
-                    region: regions.find((_) => _.code === selectedRegion)?.name || '',
+            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({
                     name,
                     phone,
                     inn,
                     mail,
-                }));
-        };
-        return (jsxs("form", { onSubmit: onSubmit, className: "container", children: [renderRegion$1({
-                    regions,
-                    region: selectedRegion,
                     handleChange,
-                }), renderDataOrganization$3({ name, phone, inn, mail, handleChange }), renderSubmitButton(button, 'mb-4'), jsx(Footnote, { link: link })] }));
+                    errors,
+                    handleChangeErrors,
+                }), renderSubmitButton(button, 'mb-4'), jsx(Footnote, { link: link })] }));
     });
-    const renderDataOrganization$3 = ({ name, phone, mail, inn, handleChange, }) => (jsxs("div", { className: "flex justify-between gap-5", children: [jsxs("div", { className: "w-1/2", children: [jsx(Input, { className: "shrink-0 text-l w-full mb-5", type: "text", "aria-label": "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", value: name, onChange: (value) => handleChange({ name: value }) }), jsx(Input, { className: "shrink-0 text-l w-full mb-5", type: "text", "aria-label": "\u0418\u041D\u041D", label: "\u0418\u041D\u041D", value: inn, onChange: (value) => handleChange({ inn: value }) })] }), jsxs("div", { className: "w-1/2", children: [jsx(Input, { className: "shrink-0 text-l w-full mb-5", type: "text", "aria-label": "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", value: phone, onChange: (value) => handleChange({ phone: value }) }), jsx(Input, { className: "shrink-0 text-l w-full ", type: "text", "aria-label": "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", 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 renderRegion$1 = ({ regions, region, handleChange }) => (jsx("div", { className: "flex justify-between gap-5 mb-5", children: jsx("div", { className: "w-full", children: jsx(WrapperSelect$1, { data: regions, fieldValue: "code", fieldLabel: "name", selected: region, setSelected: (value) => handleChange({ 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 BRANCHES_URL = '/api/v1/branches';
     const EMPTY_VALUE$1 = [];
@@ -843,7 +915,7 @@
     const MAX_CREDIT_TERM = 60;
     const ITEMS_CREDIT_TERM = ['От 1 года', 'До 5 лет'];
 
-    const renderBankOffices = ({ regions, region, branches, department, handleChange, }) => (jsxs("div", { className: "flex justify-between gap-5 mb-7", children: [jsx("div", { className: "w-1/2", children: jsx(WrapperSelect$1, { data: regions, fieldValue: "code", fieldLabel: "name", selected: region, setSelected: (value) => handleChange({ 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(WrapperSelect$1, { data: branches, fieldValue: "branchCode", fieldLabel: "address", selected: department, setSelected: (value) => handleChange({ department: value }), label: "\u0410\u0434\u0440\u0435\u0441", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441" }) })] }));
+    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 addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', {}).format(number);
 
@@ -887,81 +959,101 @@
                 items: ITEMS_CREDIT_TERM,
             })] }));
 
-    const renderDataOrganization$2 = ({ fullName, inn, name, phone, mail, annualRevenue, handleChange, }) => (jsxs("div", { className: "flex justify-between gap-5 mb-7", children: [jsxs("div", { className: "w-1/2", children: [jsx(Input, { className: "shrink-0 text-l w-full mb-5", type: "text", "aria-label": "\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", 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(Input, { className: "shrink-0 text-l w-full mb-5", type: "text", "aria-label": "\u0418\u041D\u041D", label: "\u0418\u041D\u041D", value: inn, onChange: (value) => handleChange({ inn: value }) }), jsx(Input, { className: "shrink-0 text-l w-full ", type: "text", "aria-label": "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", value: phone, onChange: (value) => handleChange({ phone: value }) })] }), jsxs("div", { className: "w-1/2", children: [jsx(Input, { className: "shrink-0 text-l w-full mb-5", type: "text", "aria-label": "\u0413\u043E\u0434\u043E\u0432\u0430\u044F \u0432\u044B\u0440\u0443\u0447\u043A\u0430, \u20BD", label: "\u0413\u043E\u0434\u043E\u0432\u0430\u044F \u0432\u044B\u0440\u0443\u0447\u043A\u0430, \u20BD", value: annualRevenue, onChange: (value) => handleChange({ annualRevenue: value }) }), jsx(Input, { className: "shrink-0 text-l w-full mb-5", type: "text", "aria-label": "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", value: name, onChange: (value) => handleChange({ name: value }) }), jsx(Input, { className: "shrink-0 text-l w-full ", type: "text", "aria-label": "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", 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 ApplicationFormCredit = JSX((props) => {
-        const { button, link, handleSubmit } = props;
-        const [formState, setFormState] = useState({
-            amount: MIN_CREDIT_AMOUNT,
-            term: MIN_CREDIT_TERM,
-            fullName: '',
-            inn: '',
-            name: '',
-            phone: '',
-            mail: '',
-            region: '',
-            department: '',
-            annualRevenue: '',
-        });
-        const { amount, term, fullName, inn, name, phone, mail, region, department, annualRevenue } = formState;
+    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 initialFormState$2 = {
+        amount: MIN_CREDIT_AMOUNT,
+        term: 12,
+        fullName: '',
+        inn: '',
+        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 { handleChange } = useFormHandlers({
-            setFormState,
+        const { formState, errors, handleChange, handleChangeErrors, sendForm } = useForm$1({
+            initialFormState: initialFormState$2,
+            errorsInitialState: errorsInitialState$1,
+            handleSubmit,
         });
-        const selectedRegion = normalizeSelectedRegion$1(region, regions);
-        const branches = useBranches(selectedRegion).filter((branch) => branch.address);
-        useEffect(() => {
-            handleChange({
-                department: '',
-            });
-        }, [formState.region, handleChange]);
-        const onSubmit = async (e) => {
+        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();
-            const partnerComments = `Сумма=${amount}/Срок=${term}/Выручка=${annualRevenue}`;
-            handleSubmit &&
-                (await handleSubmit({
-                    typeForm: 'cred',
+            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({
                     fullName,
                     inn,
                     name,
                     phone,
                     mail,
-                    region: regions.find((_) => _.code === selectedRegion)?.name || '',
-                    department: branches.find((_) => _.branchCode === department)?.address || '',
-                    partnerComments,
-                }));
-        };
-        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" }), renderDataOrganization$2({ fullName, inn, name, phone, mail, annualRevenue, handleChange }), jsx(Heading, { headingType: "h6", title: "\u041E\u0444\u0438\u0441 \u0411\u0430\u043D\u043A\u0430", className: "text-center mb-4" }), renderBankOffices({
+                    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: selectedRegion,
+                    region,
                     branches,
                     department,
                     handleChange,
+                    errors,
+                    handleChangeErrors,
                 }), renderSubmitButton(button, 'mb-4'), jsx(Footnote, { link: link })] }));
     });
 
+    const initialFormState$1 = {
+        name: '',
+        phone: '',
+    };
     const ApplicationFormDeposit = JSX((props) => {
         const { button, link, handleSubmit } = props;
-        const [formState, setFormState] = useState({
-            name: '',
-            phone: '',
+        const { formState, errors, handleChange, handleChangeErrors, sendForm } = useForm$1({
+            initialFormState: initialFormState$1,
+            errorsInitialState: initialFormState$1,
+            handleSubmit,
         });
         const { name, phone } = formState;
-        const { handleChange } = useFormHandlers({
-            setFormState,
-        });
-        const onSubmit = async (e) => {
+        const onSubmit = (e) => {
             e.preventDefault();
-            handleSubmit &&
-                (await handleSubmit({
-                    typeForm: 'dpst',
+            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({
                     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$1({ name: formState.name, phone: formState.phone, handleChange }), 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)] })] }));
+                    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)] })] }));
     });
-    const renderDataOrganization$1 = ({ name, phone, handleChange }) => (jsxs("div", { className: "max-w-[560px] m-auto", children: [jsx(Input, { className: "shrink-0 text-l w-full mb-5", type: "text", "aria-label": "\u0418\u043C\u044F", label: "\u0418\u043C\u044F", value: name, onChange: (value) => handleChange({ name: value }) }), jsx(Input, { className: "shrink-0 text-l w-full mb-5", type: "text", "aria-label": "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", value: phone, onChange: (value) => handleChange({ phone: value }) })] }));
+    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 }) => {
@@ -1018,36 +1110,53 @@
 
     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 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 initialFormState = {
+        fullName: '',
+        name: '',
+        phone: '',
+        mail: '',
+        currencyControl: false,
+        documentaryOperations: false,
+        conversionOperations: false,
+        text: '',
+    };
+    const errorsInitialState = {
+        fullName: '',
+        name: '',
+        phone: '',
+        mail: '',
+        text: '',
+    };
     const ApplicationFormWed = JSX((props) => {
         const { button, link, handleSubmit } = props;
-        const [formState, setFormState] = useState({
-            fullName: '',
-            name: '',
-            phone: '',
-            mail: '',
-            currencyControl: false,
-            documentaryOperations: false,
-            conversionOperations: false,
-            text: '',
+        const { formState, errors, handleChange, handleChangeErrors, sendForm } = useForm$1({
+            initialFormState,
+            errorsInitialState,
+            handleSubmit,
         });
         const { fullName, name, phone, mail, currencyControl, documentaryOperations, conversionOperations, text, } = formState;
-        const { handleChange } = useFormHandlers({
-            setFormState,
-        });
-        const onSubmit = async (e) => {
+        const onSubmit = (e) => {
             e.preventDefault();
-            const partnerComments = `Валютный контроль=${currencyControl}/Документарные операции=${documentaryOperations}/Конверсионные операции=${conversionOperations}/Доп инф=${text}`;
-            handleSubmit &&
-                (await handleSubmit({
-                    typeForm: 'kved',
+            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({
                     fullName,
                     name,
                     phone,
                     mail,
-                    partnerComments,
-                }));
-        };
-        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" }), renderDataOrganization({ fullName, name, phone, mail, handleChange }), 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({
+                    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,
@@ -1055,7 +1164,6 @@
                     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()] }));
     });
-    const renderDataOrganization = ({ fullName, name, phone, mail, handleChange, }) => (jsxs("div", { children: [jsxs("div", { className: "flex justify-between gap-5 mb-5", children: [jsx("div", { className: "w-1/2", children: jsx(Input, { className: "shrink-0 text-l w-full", type: "text", "aria-label": "\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", 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("div", { className: "w-1/2", children: jsx(Input, { className: "shrink-0 text-l w-full", type: "text", "aria-label": "\u0424\u0418\u041E", label: "\u0424\u0418\u041E", value: name, onChange: (value) => handleChange({ name: value }) }) })] }), jsxs("div", { className: "flex justify-between gap-5 mb-7", children: [jsx("div", { className: "w-1/2", children: jsx(Input, { className: "shrink-0 text-l w-full", type: "text", "aria-label": "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", value: phone, onChange: (value) => handleChange({ phone: value }) }) }), jsx("div", { className: "w-1/2", children: jsx(Input, { className: "shrink-0 text-l w-full", type: "text", "aria-label": "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", 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 ResponseNotification = JSX(({ responceType }) => {
         const responceOK = responceType === 'OK';
@@ -1075,9 +1183,9 @@
         const { className = '', title, typeForm = 'credit', button, link, ...rest } = props;
         const [responceType, setResponseType] = useState('');
         const handleSubmit = useCallback(async (data) => {
-            const status = await API.send(data);
-            setResponseType(status ? 'OK' : 'Fail');
-            return 'OK';
+            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] }) }));
     });
@@ -1099,11 +1207,11 @@
         return description?.items && description.items.length > 0 ? (jsx("ul", { className: listStyleType, children: description.items.map((_, i) => (jsx("li", { children: _ }, `benefitListItem-${i}`))) })) : null;
     };
 
-    const renderButtonsSection = (buttons, { className = '', buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
+    const renderButtonsSection = (buttons, { className = '', buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
     const renderButton = (buttonClassName = '') => (button, index) => {
         const { text, icon, iconRight, version, ...rest } = button || {};
         const iconVersion = version === 'secondary' ? 'color' : 'white';
-        return text ? (jsx(Button, { className: buttonClassName, appendLeft: renderButtonIcon({ ...icon, iconVersion }), appendRight: renderButtonIcon({ ...iconRight, iconVersion }), version: version, text: text, ...rest }, index ? String(index) : '')) : null;
+        return text || icon?.icon ? (jsx(Button, { className: buttonClassName, appendLeft: renderButtonIcon({ ...icon, iconVersion }), appendRight: renderButtonIcon({ ...iconRight, iconVersion }), version: version, text: text, ...rest }, index ? String(index) : '')) : null;
     };
     const DEFAULT_ICON_W = 24;
     const renderButtonIcon = (icon) => icon?.icon || icon?.src ? (jsx(ImgInner, { image: icon, width: String(icon?.size?.width || DEFAULT_ICON_W), height: String(DEFAULT_ICON_W), asSVG: true })) : null;
@@ -1161,9 +1269,9 @@
     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
-                            ? bonusItems.map((_, i) => (jsx("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: jsxs("div", { className: "flex justify-between w-full", children: [jsxs("div", { className: "flex flex-col justify-between mr-4", children: [jsxs("div", { children: [jsx("div", { className: "text-h4", children: _.title }), jsx("div", { className: "text-xl-light mt-2 max-w-[488px]", children: _.description })] }), renderButtonsSection(_?.buttons)] }), _.bonusItemContent?.bonusType
-                                            ? renderBonusItemContent(_.bonusItemContent)
-                                            : null] }) }, String(i))))
+                            ? 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))))
                             : null })] }) }));
     });
     const renderBonusItemContent = (bonusItemContent) => (jsx("div", { children: bonusItemContent.bonusType === 'count'
@@ -2031,6 +2139,28 @@
         .filter(([_]) => _ && _.intersectionRatio >= 0.9)
         .map(([, i]) => i);
 
+    const containerStyles = {
+        'horizontal-list': 'mx-auto mt-5 w-fit',
+        'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
+    };
+    const activeDotStyles = {
+        'horizontal-list': 'w-6',
+        'vertical-list': 'h-6',
+    };
+    const dotStyle = 'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white group-data-transparent:bg-white';
+    const inactiveDotStyle = 'w-2 h-2 opacity-30';
+    const SwipeListControlDots = JSX(({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list', version }) => {
+        const handleClick = (idx) => {
+            if (idx !== activeIndex && containerRef?.current) {
+                containerRef.current.children[idx]?.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                });
+            }
+        };
+        return dotCount ? (jsx("div", { className: style('flex gap-2', containerStyles[listType], version ? 'group' : ''), ...(version ? { 'data-ver': version } : {}), children: new Array(dotCount).fill(null).map((_, idx) => (jsx("div", { className: `${dotStyle} ${idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle}`, role: "button", "aria-hidden": true, onClick: () => handleClick(idx) }, String(idx)))) })) : null;
+    });
+
     const areArraysEqual = (as, bs) => as === bs || Boolean(as && bs && as?.length === bs?.length && as.every((_, i) => _ === bs[i]));
 
     const getItemWidth = (container) => (itemCount) => container.scrollWidth / itemCount;
@@ -2121,30 +2251,8 @@
     });
     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 containerStyles = {
-        'horizontal-list': 'mx-auto mt-5 w-fit',
-        'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
-    };
-    const activeDotStyles = {
-        'horizontal-list': 'w-6',
-        'vertical-list': 'h-6',
-    };
-    const dotStyle = 'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white group-data-transparent:bg-white';
-    const inactiveDotStyle = 'w-2 h-2 opacity-30';
-    const SwipeListControlDots = JSX(({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list', version }) => {
-        const handleClick = (idx) => {
-            if (idx !== activeIndex && containerRef?.current) {
-                containerRef.current.children[idx]?.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'nearest',
-                });
-            }
-        };
-        return dotCount ? (jsx("div", { className: style('flex gap-2', containerStyles[listType], version ? 'group' : ''), ...(version ? { 'data-ver': version } : {}), children: new Array(dotCount).fill(null).map((_, idx) => (jsx("div", { className: `${dotStyle} ${idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle}`, role: "button", "aria-hidden": true, onClick: () => handleClick(idx) }, String(idx)))) })) : null;
-    });
-
     const ITEMS_GAP = 4;
-    const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, arrowsPadded = true, isPadding = true, showDots = false, ...rest }) => {
+    const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, arrowsPadded = true, isPadding = true, showDots = false, isAlignCenter = false, ...rest }) => {
         const { blocks: childBlocks = [] } = rest.block || {};
         const count = itemCount || childBlocks?.length;
         const [activeIndex, setActiveIndex] = useState(Math.floor((visibleItemCount || 0) / 2));
@@ -2156,7 +2264,7 @@
         });
         const [dotsActiveIndex] = scroll.visibleIndicesRange;
         const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
-        return (jsx(BlockWrapper, { className: style(getPaddingStyle(isPadding), 'group-data-secondary:bg-primary-main group-data-secondary:text-white', className), ...rest, children: jsxs("div", { className: "relative max-w-full", children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
+        return (jsx(BlockWrapper, { className: style(getPaddingStyle(isPadding), 'group-data-secondary:bg-primary-main group-data-secondary:text-white', className), ...rest, children: jsxs("div", { className: style(getAlignStyle(isAlignCenter), 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
                             ...rest,
                             renderProps: isBankHistoryCarousel
                                 ? (block, options) => renderBlock(block, options, {
@@ -2180,6 +2288,7 @@
         'CarouselEventCard',
     ];
     const getPaddingStyle = (isPadding) => (isPadding ? 'p-12' : '');
+    const getAlignStyle = (isAlignCenter) => isAlignCenter ? 'flex justify-center' : '';
     const renderDots = (containerRef, dotsActiveIndex, itemCount) => (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: dotsActiveIndex, dotCount: itemCount, listType: 'horizontal-list' }));
 
     const CarouselBankHistoryCard = JSX(({ title, description, blocksLength = 0, activeIndex, options }) => {
@@ -2389,13 +2498,11 @@
     const renderIconBlock$1 = (icon) => (jsxs("div", { className: "absolute bottom-0 right-0", children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }));
 
     const RichText = JSX((props) => {
-        const { __html = '' } = props;
-        return jsx("div", { className: "md-container", dangerouslySetInnerHTML: { __html } });
+        const { __html = '', richVersion = '' } = props;
+        return (jsx("div", { className: style(richVersion, 'md-container'), dangerouslySetInnerHTML: { __html } }));
     });
 
-    const CarouselRichTextCard = JSX(({ className = '', __html, richVersion = 'striped', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('p-9 border border-gray min-w-96', richVersion, className), ...rest, children: jsx(RichText, { __html: __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 Foldable = JSX(({ className = '', isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
         const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
@@ -2424,10 +2531,10 @@
         const cellsNode = cardCells.map(renderCardInfo);
         const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
         const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
-        return (jsxs(BlockWrapper, { className: style('relative border border-gray min-w-[322px] p-8 flex flex-col', getHitStyle(isHighlighting), className), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock(icon), title ? jsx(Heading, { className: "text-center pt-2", headingType: "h5", title: title }) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
+        return (jsxs(BlockWrapper, { className: style('relative border border-gray p-8 flex flex-col', getHitStyle(isHighlighting), className), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock(icon), title ? jsx(Heading, { className: "text-center pt-2", headingType: "h5", title: title }) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
     });
     const renderIconBlock = (icon) => (jsxs("div", { className: "w-[267px] min-w-[267px] self-center", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null] }));
-    const getHitStyle = (isHighlighting) => isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-7';
+    const getHitStyle = (isHighlighting) => isHighlighting ? 'mt-8 pt-20' : 'mt-20 pt-8';
     const renderFoldButton$1 = ({ isUnfolded, onToggle }) => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center", onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16", asSVG: true })] }));
     const renderCardInfo = (cell, i) => (jsxs("div", { className: "py-5 border-b border-main-divider", children: [cell?.title ? (jsx("div", { className: "text-secondary-text text-m-light opacity-80", children: cell.title })) : null, cell?.description ? (jsx("div", { className: "text-primary-text text-h6 mt-1", children: cell.description })) : null] }, String(i)));
     const renderHitIcon = () => (jsxs("div", { className: "absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "23", height: "22", asSVG: true }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: "\u0425\u0418\u0422" })] }));
@@ -2517,6 +2624,49 @@
     const getErrorBlockStyle = (text) => (text ? 'py-20 pt-3 pb-1' : 'mb-16 pb-2 mt-24 pt-3');
     const ErrorBlock = JSX(({ className = '', title, subtitle, error, button, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col justify-center items-center', getErrorBlockStyle(button?.text), className), version: "transparent", ...rest, children: [jsx("div", { className: "flex justify-center py-20", children: renderErrorContent(error) }), title ? jsx(Heading, { headingType: "h1", className: "text-left mb-4", title: title }) : null, subtitle ? (jsx("div", { className: "font-sans text-xl-light mb-7 max-w-[613px] text-center", children: subtitle })) : null, button?.text ? (jsx(Button, { className: "py-4 px-9", version: button?.version, ...button, children: button.text })) : null] })));
 
+    var Currencies;
+    (function (Currencies) {
+        Currencies["EUR"] = "EUR";
+        Currencies["USD"] = "USD";
+        Currencies["GBP"] = "GBP";
+        Currencies["AUD"] = "AUD";
+        Currencies["CNY"] = "CNY";
+        Currencies["RUB"] = "RUB";
+    })(Currencies || (Currencies = {}));
+
+    const CURRENCY_ICONS_MAP$1 = {
+        USD: 'DollarIcon',
+        EUR: 'EuroIcon',
+        GBP: 'DollarIcon',
+        AUD: 'DollarIcon',
+        CNY: 'DollarIcon',
+        RUB: 'RoundRubleIcon',
+    };
+    const renderCurrencyRow$1 = ({ title, buyPrice, buyDifference, sellPrice, sellDifference, buyOfficeName, sellOfficeName, }) => {
+        return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [title ? (jsx(ImgInner, { image: { icon: CURRENCY_ICONS_MAP$1[title] }, width: "24", height: "24" })) : null, jsx("span", { className: "ml-2", children: title })] }) }), renderCurrency(buyPrice, buyDifference), renderCurrency(sellPrice, sellDifference), renderOffice(buyPrice, buyOfficeName), renderOffice(sellPrice, sellOfficeName)] }, title));
+    };
+    const formatCurrency$1 = (value) => (value ? currencyNumberFormat$1.format(value) : '');
+    const renderCurrency = (price, difference) => {
+        return (jsxs("td", { className: "pt-4 pl-11", children: [jsx("div", { children: formatCurrency$1(price) }), jsx("div", { className: style('font-normal text-sm text-secondary-text', (difference || 0) >= 0 ? 'text-green' : 'text-red'), children: formatCurrency$1(difference) })] }));
+    };
+    const renderOffice = (price, officeName = '') => {
+        return (jsxs("td", { className: "pt-4 pl-11", children: [jsx("div", { children: formatCurrency$1(price) }), jsx("div", { className: "font-normal text-sm text-green", children: officeName })] }));
+    };
+    const currencyNumberFormat$1 = new Intl.NumberFormat('ru', {
+        style: 'currency',
+        currency: Currencies.RUB,
+    });
+
+    const renderTableHeader = (title) => {
+        return (jsx("th", { className: "pl-11", children: jsx(Text, { size: "text-m-light", align: "text-left", color: "text-secondary-text", children: title }) }));
+    };
+
+    const ExchangeRateOffice = JSX(({ className = '', currencies = [], actuality = '', officeName = '', ...rest }) => {
+        const fourRates = topNRates(currencies, 4);
+        return (jsxs(BlockWrapper, { className: style('font-sans text-primary-text py-10 bg-white', className), ...rest, children: [jsxs("div", { className: "flex flex-row flex-grow-0 justify-between mx-10 mb-8", children: [jsx(Heading, { headingType: "h4", title: 'Курс обмена валют в ' + officeName, className: "whitespace-pre-wrap text-h4 mb-5" }), jsx("div", { className: "pl-11", children: jsx(Text, { size: "text-m-light", align: "text-left", color: "text-secondary-text", children: actuality }) })] }), jsx("div", { className: "flex flex-row ml-8 mr-14 pt-4 text-left", children: fourRates.length > 0 ? (jsxs("table", { className: style('h-fit w-fit', className), children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { children: jsx(Text, { size: "text-m-light", align: "text-left", color: "text-secondary-text", children: "\u0412\u0430\u043B\u044E\u0442\u0430" }) }), renderTableHeader('Купить'), renderTableHeader('Продать'), renderTableHeader('Лучшая покупка'), renderTableHeader('Лучшая продажа')] }) }), jsx("tbody", { children: fourRates.map((item) => renderCurrencyRow$1(item)) })] })) : null })] }));
+    });
+    const topNRates = (rates, n) => rates.sort((a, b) => Number(a.id) - Number(b.id)).slice(0, n);
+
     var Currency;
     (function (Currency) {
         Currency["RUB"] = "RUB";
@@ -4198,8 +4348,8 @@
     }
 
     const RichTextBlock = JSX((props) => {
-        const { __html, ...rest } = props;
-        return (jsx(BlockWrapper, { ...rest, children: jsx(RichText, { __html: __html }) }));
+        const { __html, richVersion, ...rest } = props;
+        return (jsx(BlockWrapper, { ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) }));
     });
 
     const RollupItem = JSX(({ className = '', label = 'Развернуть', isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => (jsx(BlockWrapper, { className: `w-full border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`, tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: `grid grid-cols-12 gap-5 [&>*]:p-0`, isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ version, label, isUnfolded, onToggle }) }) })));
@@ -4585,9 +4735,7 @@
         return (jsxs(Button, { version: "primary", onClick: onClick, className: "w-full flex items-center justify-center rounded-none py-5", children: [jsx("div", { className: "text-h4", children: isOpen ? 'Скрыть' : 'Показать ставки по вкладу' }), jsx(Icon, { name: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon', className: "ml-3", iconVersion: "white", width: "20", height: "20", asSVG: true })] }));
     });
 
-    const renderButtonsCellData = ({ buttons }) => renderButtonsSection(buttons, {
-        buttonClassName: 'w-12 h-12',
-    });
+    const renderButtonsCellData = ({ buttons }) => renderButtonsSection(buttons);
     const renderLabelDescriptionCellData = ({ label, description }) => {
         const labelClassName = `text-h6 m-0 ${description ? 'mb-1' : ''}`;
         return (jsxs("div", { children: [label ? jsx("div", { className: labelClassName, children: label }) : null, description ? jsx("div", { className: "text-secondary-text text-l-light", children: description }) : null] }));
@@ -4855,6 +5003,7 @@
         Tile,
         VerticalLayout,
         Video,
+        ExchangeRateOffice,
     };
 
     const debounce = (fn, delay = 600) => {
@@ -4985,7 +5134,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.9.16";
+    const packageVersion = "0.10.0";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;