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

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;
@@ -1155,15 +1263,15 @@
     const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, isPadding = true, isTheme = false, version = '', ...rest }) => {
         const versionStyle = headlineVersionStyles[headlineVersion];
         const paddingStyle = isPadding ? 'p-12' : '';
-        return (jsxs(BlockWrapper, { className: style('flex flex-col', paddingStyle, versionStyle.wrapper, className), version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { color: "group-data-secondary:text-white/80", size: versionStyle.descriptionSize, align: align, children: description })) : null] }));
+        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
-                            ? 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'
@@ -1928,7 +2036,7 @@
 
     const DEFAULT_ANCESTORS = [];
     const defaultStyle = 'col-span-12';
-    function renderBlock(block, options, { className, ...extraProps } = {}) {
+    function renderBlock$1(block, options, { className, ...extraProps } = {}) {
         const { key, blockDecorator = defaultBlockDecorator, blocksRegistry = {}, ancestors = DEFAULT_ANCESTORS, } = options;
         const { type } = block;
         if (!(type && type in blocksRegistry)) {
@@ -1951,7 +2059,7 @@
     const DEFAULT_SLOT_NAME = null;
 
     const EMPTY_ANCESTORS = [];
-    const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, renderProps = renderBlock, ...options }) => (blocks || []).map((_, j) => renderProps(_, {
+    const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, renderProps = renderBlock$1, ...options }) => (blocks || []).map((_, j) => renderProps(_, {
         ...options,
         key: `${key ? key : _.type}-${j}`,
         ancestors: options.parent
@@ -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,14 +2264,14 @@
         });
         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, {
+                                ? (block, options) => renderBlock$1(block, options, {
                                     blocksLength: childBlocks?.length,
                                     activeIndex: activeIndex,
                                 })
-                                : renderBlock,
+                                : renderBlock$1,
                         }) }), jsx(CarouselScrollButtons, { scroll: scroll, isBlur: isBlur, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count }), showDots ? renderDots(containerRef, dotsActiveIndex, itemCount) : null] }) }));
     });
     Carousel.childrenTypes = [
@@ -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 }) => {
@@ -2234,7 +2343,7 @@
         black: 'bg-black',
         white: 'bg-white',
     };
-    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-s-light text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: jsx(Text, { 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 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 }) => {
@@ -2384,18 +2493,16 @@
 
     const BORDER_STYLE = 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
     const CarouselRecommendationCard = JSX(({ className = '', description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', version = 'primary', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-4", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), jsxs("div", { className: "w-1/2 h-full flex flex-col flex-1 justify-end", children: [items.length ? (jsx(List, { className: "flex flex-col gap-2", itemClassName: "text-l-light", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10", media: socialMedia }) : null] }), renderIconBlock$1(icon)] }) }));
+        return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-4", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), jsxs("div", { className: "w-1/2 h-full flex flex-col flex-1 justify-end", children: [items.length ? (jsx(List, { className: "flex flex-col gap-2", itemClassName: "text-l-light", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10", media: socialMedia }) : null] }), renderIconBlock$2(icon)] }) }));
     });
-    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 renderIconBlock$2 = (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$1(icon), title ? jsx(Heading, { className: "text-center pt-2", headingType: "h5", title: title }) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
     });
-    const renderIconBlock = (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 renderIconBlock$1 = (icon) => (jsxs("div", { className: "w-[267px] min-w-[267px] self-center", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null] }));
+    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";
@@ -4085,10 +4235,10 @@
 
     const renderBenefit$1 = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => (jsx(BenefitItem, { icon: icon, label: label, description: description, version: version, benefitsVersion: benefitsVersion }, String(i)));
 
-    const ProductBlockInner = JSX(({ className = '', title, headlineVersion = 'L', description, benefitsCountOfRow = 3, benefits, benefitsVersion, buttons, footnote, image, __html, items, version = 'primary', isDotted = true, textBlockClassName = '', directionRight = true, }) => {
+    const ProductBlockInner = JSX(({ className = '', title, headlineVersion = 'L', description, benefitsCountOfRow = 3, benefits, benefitsVersion, buttons, image, __html, items, version = 'primary', isDotted = true, textBlockClassName = '', directionRight = true, }) => {
         const benefitsCount = benefits?.filter((_) => _.label)?.length;
         const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCountOfRow);
-        return (jsxs("div", { className: style('flex grow justify-between items-stretch h-full', className), children: [image?.src ? (jsx(ImgInner, { className: `mt-[-50px] ${directionRight ? 'order-2' : ''}`, image: image })) : null, jsxs("div", { className: style('flex flex-col', textBlockClassName), children: [jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left" }), jsxs("div", { className: "flex flex-col justify-between h-full", children: [jsxs(BaseTile, { buttons: renderButtonsSection(buttons), children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits?.map(renderBenefit$1(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", isDotted: isDotted })) : null] }), footnote ? jsx("p", { className: "text-m-light pt-12", children: footnote }) : null] })] })] }));
+        return (jsxs("div", { className: style('flex grow justify-between items-stretch h-full', className), children: [image?.src ? (jsx(ImgInner, { className: style('mt-[-50px]', directionRight ? 'order-2' : ''), image: image })) : null, jsxs("div", { className: style('flex flex-col', textBlockClassName), children: [jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left" }), jsxs(BaseTile, { buttons: renderButtonsSection(buttons), children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits?.map(renderBenefit$1(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", isDotted: isDotted })) : null] })] })] }));
     });
     const getBenefitsContainerStyles = (benefitsCountOfRow = 2) => `gap-6 mt-6 ${benefitsCountOfRow > 2
     ? 'inline-grid grid-cols-[auto_auto_auto]'
@@ -4105,9 +4255,7 @@
     const ProductBlock = JSX((props) => {
         const { className = '', breadcrumbs, backwardButton, version = 'primary', ...rest } = props;
         const buttonVersion = version === 'primary' ? version : 'white';
-        return (jsxs(BlockWrapper, { className: `overflow-hidden p-12 flex flex-col box-border min-h-[454px] ${className}`, version: version, ...rest, children: [backwardButton?.text
-                    ? renderBackwardButton(backwardButton, buttonVersion, 'mb-10 -mt-2.5')
-                    : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs-light mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbStyle}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { className: breadcrumbStyle, ...breadcrumb }, String(i))))) })) : null, jsx(ProductBlockInner, { version: version, ...rest })] }));
+        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 })] }));
     });
 
     const ProductGallery = JSX(({ className = '', slides = [], ...rest }) => {
@@ -4169,21 +4317,23 @@
         }
     };
 
-    function renderImage$1(image, isImageOnRightSide) {
+    function renderImage$1(image, directionRight) {
         if (!image?.src) {
             return null;
         }
-        return (jsx(ImgInner, { className: `absolute ${isImageOnRightSide ? 'right-0' : 'left-0'} bottom-0`, image: image }));
+        return (jsx(ImgInner, { className: style('absolute', directionRight ? 'right-0' : 'left-0', 'bottom-0'), image: image }));
     }
 
-    const ProductTile = JSX(({ className = '', title, headlineVersion = 'S', description, additionalDescription, benefits = [], buttons, image, isImageOnRightSide = true, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden p-9 box-border relative min-h-[364px]', getTileRightPadding(className), className), ...rest, children: [jsxs("div", { className: style('flex flex-col', isImageOnRightSide ? '' : 'items-end'), children: [jsx(Headline, { className: style('!p-0 !bg-transparent z-10', title || description ? 'mb-3.5' : ''), title: title, description: description, headlineVersion: headlineVersion, as: "h2", align: "text-left" }), renderBenefits(benefits, image), renderAdditionalDescription(additionalDescription, image), renderButtonsSection(buttons, { className: 'mt-5 z-10 text-l' })] }), renderImage$1(image, isImageOnRightSide)] })));
+    const ProductTile = JSX(({ className = '', title, headlineVersion = 'S', description, additionalDescription, benefits = [], buttons, image, directionRight = true, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden p-9 box-border relative min-h-[364px] flex flex-col justify-between', getTileRightPadding(className), className), ...rest, children: [jsxs("div", { className: style('flex flex-col', directionRight ? '' : 'items-end'), children: [jsx(Headline, { className: style('!p-0 !bg-transparent z-10', title || description ? 'mb-3.5' : ''), title: title, description: description, headlineVersion: headlineVersion, as: "h2", align: "text-left" }), renderBenefits(benefits, image), renderAdditionalDescription(additionalDescription, image)] }), renderButtonsSection(buttons, {
+                className: style('mt-5 text-l', directionRight ? '' : 'justify-end'),
+            }), renderImage$1(image, directionRight)] })));
     function renderBenefits(benefits, image) {
         if (!benefits.length) {
             return null;
         }
         // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
         const benefitsWidth = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
-        return (jsx("div", { className: `z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline ${benefitsWidth}`, children: benefits.length ? benefits.map(renderBenefit) : null }));
+        return (jsx("div", { className: style('z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline', benefitsWidth), children: benefits.length ? benefits.map(renderBenefit) : null }));
     }
 
     const PromoTile = JSX(({ className = '', title = 'Акции и спецпредложения', date, description, as, buttons = [], ...rest }) => (jsx(BlockWrapper, { className: style('p-9 box-border', className, getTileRightPadding(className), getTileMinHeight(className)), ...rest, children: jsx(BaseTile, { title: title ? (jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, headlineVersion: getTileHeadingType(className), align: "text-left", as: as || 'h2' })) : null, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-s mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) }) })));
@@ -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] }));
@@ -4771,10 +4919,10 @@
     });
     const renderTag = (tag, key) => (jsx("span", { className: "text-m-light py-2 px-2.5 border-solid border rounded-md border-gray", children: tag }, String(key)));
 
-    const Tile = JSX(({ title, headingType = 'h3', __html, items, buttons, image, isDotted = true, listItemSize = 'M', className = '', tags, children, ...rest }) => (jsx(BlockWrapper, { className: `overflow-hidden p-9 pr-3 box-border ${getTileRightPadding(className)} ${getTileMinHeight(className)} ${className}`, ...rest, children: jsxs(BaseTile, { title: title ? (jsx(Heading, { headingType: headingType, as: "h2", title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, buttons: renderButtonsSection(buttons, {
-                className: 'mt-8',
-                buttonClassName: 'min-w-[158px]',
-            }), image: image?.src ? jsx(ImgInner, { className: "mt-auto ml-7", image: image }) : null, children: [__html ? (jsx("div", { className: "max-w-[600px] mt-2.5", children: jsx(RichText, { __html: __html }) })) : null, children, jsx(List, { className: "mt-2.5", itemClassName: "mb-1.5", items: items, isDotted: isDotted, listItemSize: listItemSize }), tags?.length ? jsx(Tags, { tags: tags, className: "mt-5" }) : null] }) })));
+    const Tile = JSX(({ title, headingType = 'h3', __html, items, buttons, image, isDotted = true, listItemSize = 'M', className = '', tags, children, directionRight = true, ...rest }) => (jsxs(BlockWrapper, { className: style('flex grow justify-between items-stretch h-full p-9 pr-3 box-border', getTileRightPadding(className), getTileMinHeight(className), className), ...rest, children: [image?.src ? (jsx(ImgInner, { className: style('mt-auto ml-7', directionRight ? 'order-2' : ''), image: image })) : null, jsx(BaseTile, { title: title ? (jsx(Heading, { headingType: headingType, as: "h2", title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, buttons: renderButtonsSection(buttons, {
+                    className: 'mt-8',
+                    buttonClassName: 'min-w-[158px]',
+                }), children: jsxs("div", { children: [__html ? (jsx("div", { className: "max-w-[600px] mt-2.5", children: jsx(RichText, { __html: __html }) })) : null, children, jsx(List, { className: "mt-2.5", itemClassName: "mb-1.5", items: items, isDotted: isDotted, listItemSize: listItemSize }), tags?.length ? jsx(Tags, { tags: tags, className: "mt-5" }) : null] }) })] })));
 
     const alignStyle = {
         stretch: 'items-stretch',
@@ -4786,7 +4934,7 @@
         const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
         return (jsx(BlockWrapper, { className: style('flex flex-col [&>*]:max-w-full', isPadding ? 'p-12' : '', gapStyles[gap], align && alignStyle[align], className), version: version, isTheme: isTheme, ...rest, children: renderChildren({
                 ...rest,
-                renderProps: (block, options) => renderBlock(block, options, { className: innerPaddingStyle }),
+                renderProps: (block, options) => renderBlock$1(block, options, { className: innerPaddingStyle }),
             }) }));
     });
     VerticalLayout.childrenTypes = [];
@@ -4799,6 +4947,15 @@
         return (jsxs(BlockWrapper, { className: style(getPaddings(className), className), ...rest, children: [jsx(Headline, { title: title, headlineVersion: "M" }), url ? (jsx("video", { className: "m-auto w-full object-fill", preload: "metadata", poster: adjustHref(router)(previewImg?.src), style: { maxHeight: 524 }, controls: true, children: jsx("source", { src: adjustHref(router)(url) }) })) : null] }));
     });
 
+    const RepresentativeOfficeInfo = JSX(({ address, email, telephone, button, className = '', __html, icon, title, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border text-left p-9', className), version: version, ...rest, children: [jsxs("div", { className: "w-full flex justify-between", children: [title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-6", title: title }) : null, renderIconBlock(icon)] }), jsxs("div", { className: "w-full", children: [__html ? renderDescriptionBlock(__html) : null, renderBlock('Адрес', address, 'GeolocationIcon'), renderBlock('Телефон', telephone, 'PhoneIcon'), renderBlock('E-mail', email, 'MailIcon'), button?.text
+                        ? renderButtonsSection([button], {
+                            className: 'mb-6',
+                        })
+                        : null] })] })));
+    const renderIconBlock = (icon) => (jsxs("div", { className: "self-end", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null] }));
+    const renderDescriptionBlock = (__html) => (jsx("div", { className: "border-b border-main-divider pb-5 my-5", children: jsx(RichText, { __html: __html }) }));
+    const renderBlock = (blockName, data, iconName) => (jsxs("div", { className: "flex mb-4", children: [jsx(Icon, { className: "pr-4", iconVersion: "black", name: iconName, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "flex flex-col first:pb-1", children: [jsx(Text, { size: "text-m-light", children: blockName }), data ? (jsx(Text, { size: "text-h6", color: "text-green", children: data })) : null] })] }));
+
     const Blocks = {
         ApplicationForm,
         BenefitsBlock,
@@ -4855,6 +5012,8 @@
         Tile,
         VerticalLayout,
         Video,
+        ExchangeRateOffice,
+        RepresentativeOfficeInfo,
     };
 
     const debounce = (fn, delay = 600) => {
@@ -4985,7 +5144,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.1";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;