@redneckz/wildless-cms-uni-blocks 0.14.575 → 0.14.577

package/bundle/bundle.umd.js

@@ -22,37 +22,6 @@
         };
     };
 
-    const getGeolocation = async () => new Promise((resolve) => navigator.geolocation.getCurrentPosition(({ coords }) => resolve(coords)));
-
-    function DaDataAPI(baseURL = '') {
-        async function getFetcherAddress() {
-            if (!('geolocation' in navigator)) {
-                return null;
-            }
-            try {
-                const coords = await getGeolocation();
-                const response = await fetch(`${baseURL}/geolocate`, {
-                    method: 'POST',
-                    mode: 'cors',
-                    body: JSON.stringify({
-                        lat: coords.latitude,
-                        lon: coords.longitude,
-                        count: 1,
-                    }),
-                });
-                const data = (await response.json());
-                return data?.suggestions?.[0]?.data?.city;
-            }
-            catch (e) {
-                console.error(e);
-                return null;
-            }
-        }
-        return {
-            getFetcherAddress,
-        };
-    }
-
     const jsx = (...args) => globalThis._uni._jsx(...args);
     const jsxs = (...args) => globalThis._uni._jsxs(...args);
 
@@ -1180,29 +1149,6 @@
         return [value, { setValue, setTrue, setFalse, toggle }];
     }
 
-    const renderLabel = (label) => label ? (jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: label })) : null;
-
-    const inputValidStyle = 'border border-solid outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text rounded';
-
-    const Input = JSX(({ key, className = '', id, name, type = 'text', label, placeholder, value = '', valid = true, children, onChange, onFocus, onBlur, pattern, autoFocus = false, isTextarea = false, }) => {
-        const inputRef = useRef(null);
-        const handleChange = useCallback((e) => {
-            onChange && onChange(e.target?.value || '');
-        }, [onChange]);
-        useEffect(() => {
-            if (autoFocus) {
-                inputRef.current?.focus();
-            }
-        }, [autoFocus, inputRef]);
-        const defaultStyle = 'w-full border rounded-md text-primary-text outline-none p-m';
-        const paddingStyle = children ? 'pr-3xl' : '';
-        const validStyle = getValidStyle(valid);
-        return (jsxs("div", { className: style('relative', className), children: [jsxs("label", { className: "space-y-xs", children: [renderLabel(label), isTextarea ? (jsx("textarea", { className: style('block resize-y min-h-24', defaultStyle, validStyle), id: style('textarea', id), name: name || id, placeholder: placeholder, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }, key)) : (jsx("input", { type: type, className: style('h-14', defaultStyle, paddingStyle, validStyle), ref: inputRef, id: id, name: name || id, placeholder: placeholder, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, pattern: pattern }, key))] }), children] }));
-    });
-    const getValidStyle = (valid) => (valid ? inputValidStyle : 'border-error');
-
-    const formatOption = (_) => _?.text || _?.key || '';
-
     function useEventListener(target, type, listener, options) {
         useEffect(() => {
             if (!target || !listener) {
@@ -1226,12 +1172,181 @@
         return targetRef;
     }
 
+    const noop = () => {
+        // Do nothing
+    };
+
+    const inputValidStyle = 'border border-solid outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text rounded';
+
+    const renderLabel = (label) => label ? (jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: label })) : null;
+
+    const Input = JSX(({ key, className = '', id, name, type = 'text', label, placeholder, value = '', valid = true, children, onChange, onFocus, onBlur, pattern, autoFocus = false, isTextarea = false, }) => {
+        const inputRef = useRef(null);
+        const handleChange = useCallback((e) => {
+            onChange && onChange(e.target?.value || '');
+        }, [onChange]);
+        useEffect(() => {
+            if (autoFocus) {
+                inputRef.current?.focus();
+            }
+        }, [autoFocus, inputRef]);
+        const defaultStyle = 'w-full border rounded-md text-primary-text outline-none p-m';
+        const paddingStyle = children ? 'pr-3xl' : '';
+        const validStyle = getValidStyle(valid);
+        return (jsxs("div", { className: style('relative', className), children: [jsxs("label", { className: "space-y-xs", children: [renderLabel(label), isTextarea ? (jsx("textarea", { className: style('block resize-y min-h-24', defaultStyle, validStyle), id: style('textarea', id), name: name || id, placeholder: placeholder, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }, key)) : (jsx("input", { type: type, className: style('h-14', defaultStyle, paddingStyle, validStyle), ref: inputRef, id: id, name: name || id, placeholder: placeholder, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, pattern: pattern }, key))] }), children] }));
+    });
+    const getValidStyle = (valid) => (valid ? inputValidStyle : 'border-error');
+
+    const DEFAULT_HINTS_COUNT = 10;
+    const getResponseHandler = (response) => {
+        const responseData = response?.suggestions || [];
+        return responseData.map((item) => ({
+            ...item,
+            processedValue: item?.value,
+        }));
+    };
+    const getDaDataHints = (options) => {
+        const { url, query, requestData = {} } = options;
+        const result = fetch(`/api/v1/suggestions/${url}`, {
+            method: 'POST',
+            mode: 'cors',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                count: DEFAULT_HINTS_COUNT,
+                ...requestData,
+                query,
+            }),
+        })
+            .then((response) => response.json())
+            .then(getResponseHandler);
+        return result;
+    };
+
+    const NAME_HINTS_LIST_OPTIONS = {
+        url: 'suggest/fio',
+        requestData: {
+            parts: ['NAME'],
+            gender: 'UNKNOWN',
+        },
+    };
+    const SURNAME_HINTS_LIST_OPTIONS = {
+        url: 'suggest/fio',
+        requestData: {
+            parts: ['SURNAME'],
+            gender: 'UNKNOWN',
+        },
+    };
+    const PATRONYMIC_HINTS_LIST_OPTIONS = {
+        url: 'suggest/fio',
+        requestData: {
+            parts: ['PATRONYMIC'],
+            gender: 'UNKNOWN',
+        },
+    };
+    const EMAIL_HINTS_LIST_OPTIONS = {
+        url: 'suggest/email',
+    };
+    const hintsListsOptions = {
+        name: NAME_HINTS_LIST_OPTIONS,
+        surname: SURNAME_HINTS_LIST_OPTIONS,
+        middleName: PATRONYMIC_HINTS_LIST_OPTIONS,
+        email: EMAIL_HINTS_LIST_OPTIONS,
+    };
+
+    const debounce = (fn, delay = 600) => {
+        let timerId;
+        const debouncedCallback = (...args) => {
+            debouncedCallback.dispose();
+            timerId = setTimeout(() => {
+                fn(...args);
+            }, delay);
+        };
+        debouncedCallback.dispose = () => {
+            if (timerId) {
+                clearTimeout(timerId);
+            }
+        };
+        return debouncedCallback;
+    };
+
     const usePopupManager = () => ({
         open: (popup, options) => defaultEventBus.fire('popup', { type: 'open', popup, ...options }),
         update: (popup, options) => defaultEventBus.fire('popup', { type: 'update', popup, ...options }),
         close: () => defaultEventBus.fire('popup', { type: 'close' }),
     });
 
+    const InputPopup = JSX(({ options, onChange }) => (jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-2xl", role: "list", children: options?.map((item, key) => (jsx("div", { className: "flex px-m py-s cursor-pointer hover:bg-main-divider pr-5xl relative", role: "listitem", onMouseDown: () => onChange(item.processedValue), children: jsx("span", { className: "min-h-6", children: item.processedValue }) }, key.toString()))) })));
+
+    function useInputPopup({ isOpen, value, name, onChange }) {
+        const prevInputValue = useRef(value);
+        const currentInputValue = useRef(value);
+        const [hintsList, setHintsList] = useState([]);
+        const popup = usePopupManager();
+        const defaultHintsListOptions = hintsListsOptions[name];
+        const close = useCallback(() => {
+            currentInputValue.current = value;
+            popup.close();
+        }, [value]);
+        const handleChange = useCallback((option) => {
+            close();
+            currentInputValue.current = option;
+            onChange && onChange(option);
+        }, [close, onChange]);
+        const inputRef = useRef(null);
+        const getHintsList = useMemo(() => async (searchValue) => {
+            if (!defaultHintsListOptions) {
+                return;
+            }
+            const result = await getDaDataHints({
+                url: defaultHintsListOptions.url,
+                requestData: {
+                    ...defaultHintsListOptions?.requestData,
+                },
+                query: searchValue,
+            });
+            if (result?.length) {
+                setHintsList(result);
+            }
+        }, []);
+        const debouncedGetHintsList = useMemo(() => debounce(getHintsList, 300), [getHintsList]);
+        useEffect(() => {
+            if (!isOpen || !inputRef.current || currentInputValue.current === value) {
+                close();
+                return;
+            }
+            const inputElement = inputRef.current;
+            const { top, left, width, height } = inputElement.getBoundingClientRect();
+            if (value && prevInputValue.current !== value) {
+                debouncedGetHintsList(value);
+                prevInputValue.current = value;
+            }
+            popup.update(jsx(InputPopup, { options: hintsList, value: value, onChange: handleChange }), {
+                top: top + globalThis.scrollY + height,
+                left,
+                width,
+            });
+        }, [isOpen, hintsList, value, handleChange]);
+        return inputRef;
+    }
+
+    const InputControl = JSX(({ className, label, value = '', placeholder, error, errors, onChange = noop, onBlur, isTextarea, type, name = '', dadata = false, }) => {
+        const [isOpen, { setFalse: close, setTrue: open }] = useBool();
+        const popupRef = useOutsideClick(close);
+        const inputRef = useInputPopup({
+            isOpen: isOpen && dadata,
+            name,
+            value,
+            onChange,
+        });
+        return (jsxs("div", { className: style('shrink-0 w-full', className), ref: popupRef, onBlur: close, onFocus: open, children: [jsx("div", { ref: inputRef, children: jsx(Input, { type: type || 'text', "aria-label": label, label: getLabel(errors, label), valid: Boolean(!error), value: value, onChange: onChange, onBlur: onBlur, isTextarea: isTextarea, placeholder: getPlaceholder(placeholder, errors, label) }) }), renderErrorText(error)] }));
+    });
+    const getLabel = (errors, label) => (label && errors ? `${label}*` : label);
+    const getPlaceholder = (placeholder, errors, label) => errors && !label ? `${placeholder}*` : placeholder;
+
+    const formatOption = (_) => _?.text || _?.key || '';
+
     const filterOptions = (options, query) => {
         if (!options?.length || !query?.trim()) {
             return options;
@@ -1300,156 +1415,6 @@
     const renderIcon$1 = (isOpen, iconVersion) => (jsx(Icon, { className: style('absolute right-0 flex self-center', { 'rotate-180': !isOpen }), iconVersion: iconVersion, name: "ArrowUpIcon", width: "16", height: "16" }));
     const getStyle = (isBorder, valid, disabled) => style(isBorder ? 'border rounded-md ' : '', isBorder && !disabled ? 'hover:border-primary-hover' : '', disabled ? 'bg-main-divider' : 'cursor-pointer ', valid ? 'border-gray' : 'border-error');
 
-    const noop = () => {
-        // Do nothing
-    };
-
-    const DAY_COUNT = 6;
-    const WEEK_COUNT = 7;
-    const renderCalendarCells = ({ today, firstDayOfWeek, totalDays, currentMonth, currentYear, min, max, onDateClick, }) => {
-        const calendarCells = [];
-        let dayCounter = 1;
-        for (let i = 0; i < DAY_COUNT; i++) {
-            const rowCells = [];
-            for (let j = 0; j < WEEK_COUNT; j++) {
-                if (i === 0 && j < firstDayOfWeek) {
-                    rowCells.push(jsx("td", {}, `empty-${j}`));
-                }
-                else if (dayCounter > totalDays) {
-                    rowCells.push(jsx("td", {}, `empty-${j}`));
-                }
-                else {
-                    const currentDate = new Date(currentYear, currentMonth, dayCounter);
-                    const isToday = checkIsToday(currentDate, today);
-                    const isDisabled = checkIsDisabled(currentDate, min, max);
-                    rowCells.push(jsx("td", { children: jsx("div", { className: getDayStyles(isToday, isDisabled), onClick: () => !isDisabled && onDateClick(currentDate), children: dayCounter }) }, `day-${dayCounter}`));
-                    dayCounter++;
-                }
-            }
-            calendarCells.push(jsx("tr", { children: rowCells }, `row-${i}`));
-        }
-        return calendarCells;
-    };
-    const checkIsToday = (currentDate, today) => today && currentDate.toDateString() === today.toDateString();
-    const checkIsDisabled = (currentDate, min, max) => (min && currentDate.getTime() < min.getTime()) || (max && currentDate.getTime() > max.getTime());
-    const getDayStyles = (isToday, isDisabled) => style('p-s text-center rounded-md border', {
-        'border-transparent hover:bg-gray': !isToday,
-    }, isDisabled ? 'text-gray hover:bg-transparent' : 'cursor-pointer');
-
-    const WEEK_DAYS = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
-    const Calendar = JSX(({ today, currentMonth, currentYear, min, max, onDateSelect = noop, setValue = noop }) => {
-        const handleDateClick = useCallback((date) => {
-            onDateSelect(date);
-            setValue(false);
-        }, []);
-        const { firstDayOfWeek, totalDays } = useMemo(() => ({
-            firstDayOfWeek: new Date(currentYear, currentMonth, 1).getDay() - 1,
-            totalDays: new Date(currentYear, currentMonth + 1, 0).getDate(),
-        }), [currentYear, currentMonth]);
-        return (jsxs("table", { className: "mx-auto", children: [jsx("thead", { className: "text-gray font-light", children: jsx("tr", { children: WEEK_DAYS.map((day, index) => (jsx("th", { className: "p-s", children: day }, String(index)))) }) }), jsx("tbody", { children: renderCalendarCells({
-                        firstDayOfWeek,
-                        today,
-                        totalDays,
-                        currentYear,
-                        currentMonth,
-                        min,
-                        max,
-                        onDateClick: handleDateClick,
-                    }) })] }));
-    });
-
-    const months = [
-        'Январь',
-        'Февраль',
-        'Март',
-        'Апрель',
-        'Май',
-        'Июнь',
-        'Июль',
-        'Август',
-        'Сентябрь',
-        'Октябрь',
-        'Ноябрь',
-        'Декабрь',
-    ];
-
-    const START_YEAR = 1940;
-    const getYears = () => Array.from({ length: new Date().getFullYear() - START_YEAR + 1 }, (_, i) => START_YEAR + i);
-
-    const MONTHS_COUNT = 11;
-    const MONTHS_OPTIONS = months.map((key) => ({ key }));
-    const YEARS_OPTIONS = getYears()
-        .reverse()
-        .map((key) => ({ key: String(key) }));
-    const useDatePickerManager = ({ onShowCalendar, showCalendar, selectedMonth, onMonthSelect, onYearSelect, selectedYear, }) => {
-        const close = useCallback(() => showCalendar && onShowCalendar(false), [showCalendar]);
-        const ref = useOutsideClick(close);
-        const handleChangeVisibleCalendar = useCallback(() => onShowCalendar(!showCalendar), [showCalendar]);
-        const handleNextMonth = useCallback(() => {
-            if (selectedMonth + 1 <= MONTHS_COUNT) {
-                onMonthSelect(selectedMonth + 1);
-            }
-            else {
-                onMonthSelect(0);
-                onYearSelect(selectedYear + 1);
-            }
-        }, [selectedMonth]);
-        const handlePrevMonth = useCallback(() => {
-            if (selectedMonth - 1 >= 0) {
-                onMonthSelect(selectedMonth - 1);
-            }
-            else {
-                onMonthSelect(11);
-                onYearSelect(selectedYear - 1);
-            }
-        }, [selectedMonth]);
-        const handleSelectMonth = useCallback(({ key }) => onMonthSelect(months.indexOf(key)), []);
-        const handleSelectYear = useCallback(({ key }) => onYearSelect(Number(key)), []);
-        return {
-            handleChangeVisibleCalendar,
-            handleNextMonth,
-            handlePrevMonth,
-            handleSelectMonth,
-            handleSelectYear,
-            monthsOptions: MONTHS_OPTIONS,
-            yearsOptions: YEARS_OPTIONS,
-            ref,
-        };
-    };
-
-    const ICON_PROPS = {
-        name: 'ArrowUpIcon',
-        iconVersion: 'black',
-        width: '24',
-        height: '24',
-    };
-    const SELECT_PROPS = {
-        className: 'min-w-32',
-        iconVersion: 'black',
-        isBorder: false,
-    };
-    const formStyle = 'flex justify-between items-center h-14 px-m py-s border rounded-md cursor-pointer ' +
-        'hover:border-black active:border-black focus:border-black';
-    const DatePicker = JSX(({ className = '', label = '', value, valid = true, minDate, maxDate, onChange }) => {
-        const [showCalendar, { setValue }] = useBool(false);
-        const [selectedMonth, setSelectedMonth] = useState(value?.getMonth() || new Date().getMonth());
-        const [selectedYear, setSelectedYear] = useState(value?.getFullYear() || new Date().getFullYear());
-        const { handlePrevMonth, handleNextMonth, handleSelectMonth, handleSelectYear, monthsOptions, yearsOptions, handleChangeVisibleCalendar, ref, } = useDatePickerManager({
-            onYearSelect: setSelectedYear,
-            onMonthSelect: setSelectedMonth,
-            onShowCalendar: setValue,
-            selectedYear,
-            selectedMonth,
-            showCalendar,
-        });
-        return (jsxs("div", { className: style('space-y-xs', className), ref: ref, children: [renderLabel(label), jsxs("div", { className: "relative", children: [renderDatePickerForm(handleChangeVisibleCalendar, value, valid), showCalendar ? (jsxs("div", { className: "absolute bg-white z-20 select-none bottom-full", children: [jsxs("div", { className: "flex gap-s", children: [jsx("div", { className: "my-auto", onClick: handlePrevMonth, children: jsx(Icon, { ...ICON_PROPS, className: "-rotate-90 cursor-pointer" }) }), jsx(Select, { onChange: handleSelectMonth, value: { key: months[selectedMonth] }, options: monthsOptions, ...SELECT_PROPS }), jsx(Select, { onChange: handleSelectYear, value: { key: String(selectedYear) }, options: yearsOptions, ...SELECT_PROPS }), jsx("div", { className: "my-auto", onClick: handleNextMonth, children: jsx(Icon, { ...ICON_PROPS, className: "rotate-90 cursor-pointer" }) })] }), jsx(Calendar, { today: value, currentMonth: selectedMonth, currentYear: selectedYear, onDateSelect: onChange, min: minDate, max: maxDate })] })) : null] })] }));
-    });
-    const renderDatePickerForm = (handleChangeVisibleCalendar, value, valid) => (jsxs("div", { onClick: handleChangeVisibleCalendar, className: style(formStyle, valid ? 'border-gray' : 'border-error'), children: [jsx(Paragraph, { children: value && formatDate(value) }), jsx(Icon, { ...ICON_PROPS, name: "CalendarIcon" })] }));
-
-    const DatePickerControl = JSX(({ className, label, error, ...rest }) => (jsxs("div", { className: style('shrink-0 w-full', className), children: [jsx(DatePicker, { label: label && rest?.errors ? `${label}*` : label, valid: Boolean(!error), ...rest }), renderErrorText(error)] })));
-
-    const InputControl = JSX(({ className, label, value = '', placeholder, error, onChange, onBlur, isTextarea, type, ...rest }) => (jsxs("div", { className: style('shrink-0 w-full', className), children: [jsx(Input, { type: type || 'text', "aria-label": label, label: label && rest?.errors ? `${label}*` : label, valid: Boolean(!error), value: value, onChange: onChange, onBlur: onBlur, isTextarea: isTextarea, placeholder: rest?.errors && !label ? `${placeholder}*` : placeholder }), renderErrorText(error)] })));
-
     const SelectControl = JSX(({ className = '', label, error, ...rest }) => (jsxs("div", { className: className, children: [jsx(Select, { ...rest, valid: !error, label: rest?.errors ? `${label}*` : label }), renderErrorText(error)] })));
 
     const getNamesFromInput = (inputs) => Object.values(inputs.filter((_) => _))?.map((_) => _.name);
@@ -1705,32 +1670,195 @@
     const ITEMS_CREDIT_AMOUNT = ['От 1 000 ₽', 'До 1 000 000 000 ₽'];
     const AmountField = JSX(({ field }) => (jsx(InputRange, { title: "\u0421\u0443\u043C\u043C\u0430, \u20BD", items: ITEMS_CREDIT_AMOUNT, min: MIN_CREDIT_AMOUNT, max: MAX_CREDIT_AMOUNT, ...field('amount') })));
 
+    const AnnualRevenueField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0413\u043E\u0434\u043E\u0432\u0430\u044F \u0432\u044B\u0440\u0443\u0447\u043A\u0430, \u20BD", ...getValidation(field('annualRevenue'), validatorObj.annualRevenue, input?.required) })));
+
+    const BankEmpoleeField = JSX(({ field }) => (jsx(InputControl, { label: "\u0424\u0418\u041E \u0438\u043B\u0438 \u0434\u043E\u043B\u0436\u043D\u043E\u0441\u0442\u044C \u043E\u0431\u0441\u043B\u0443\u0436\u0438\u0432\u0430\u0432\u0448\u0435\u0433\u043E \u0412\u0430\u0441 \u0441\u043E\u0442\u0440\u0443\u0434\u043D\u0438\u043A\u0430 \u0411\u0430\u043D\u043A\u0430", ...field('bankEmpolee') })));
+
+    const DAY_COUNT = 6;
+    const WEEK_COUNT = 7;
+    const renderCalendarCells = ({ today, firstDayOfWeek, totalDays, currentMonth, currentYear, min, max, onDateClick, }) => {
+        const calendarCells = [];
+        let dayCounter = 1;
+        for (let i = 0; i < DAY_COUNT; i++) {
+            const rowCells = [];
+            for (let j = 0; j < WEEK_COUNT; j++) {
+                if (i === 0 && j < firstDayOfWeek) {
+                    rowCells.push(jsx("td", {}, `empty-${j}`));
+                }
+                else if (dayCounter > totalDays) {
+                    rowCells.push(jsx("td", {}, `empty-${j}`));
+                }
+                else {
+                    const currentDate = new Date(currentYear, currentMonth, dayCounter);
+                    const isToday = checkIsToday(currentDate, today);
+                    const isDisabled = checkIsDisabled(currentDate, min, max);
+                    rowCells.push(jsx("td", { children: jsx("div", { className: getDayStyles(isToday, isDisabled), onClick: () => !isDisabled && onDateClick(currentDate), children: dayCounter }) }, `day-${dayCounter}`));
+                    dayCounter++;
+                }
+            }
+            calendarCells.push(jsx("tr", { children: rowCells }, `row-${i}`));
+        }
+        return calendarCells;
+    };
+    const checkIsToday = (currentDate, today) => today && currentDate.toDateString() === today.toDateString();
+    const checkIsDisabled = (currentDate, min, max) => (min && currentDate.getTime() < min.getTime()) || (max && currentDate.getTime() > max.getTime());
+    const getDayStyles = (isToday, isDisabled) => style('p-s text-center rounded-md border', {
+        'border-transparent hover:bg-gray': !isToday,
+    }, isDisabled ? 'text-gray hover:bg-transparent' : 'cursor-pointer');
+
+    const WEEK_DAYS = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
+    const Calendar = JSX(({ today, currentMonth, currentYear, min, max, onDateSelect = noop, setValue = noop }) => {
+        const handleDateClick = useCallback((date) => {
+            onDateSelect(date);
+            setValue(false);
+        }, []);
+        const { firstDayOfWeek, totalDays } = useMemo(() => ({
+            firstDayOfWeek: new Date(currentYear, currentMonth, 1).getDay() - 1,
+            totalDays: new Date(currentYear, currentMonth + 1, 0).getDate(),
+        }), [currentYear, currentMonth]);
+        return (jsxs("table", { className: "mx-auto", children: [jsx("thead", { className: "text-gray font-light", children: jsx("tr", { children: WEEK_DAYS.map((day, index) => (jsx("th", { className: "p-s", children: day }, String(index)))) }) }), jsx("tbody", { children: renderCalendarCells({
+                        firstDayOfWeek,
+                        today,
+                        totalDays,
+                        currentYear,
+                        currentMonth,
+                        min,
+                        max,
+                        onDateClick: handleDateClick,
+                    }) })] }));
+    });
+
+    const months = [
+        'Январь',
+        'Февраль',
+        'Март',
+        'Апрель',
+        'Май',
+        'Июнь',
+        'Июль',
+        'Август',
+        'Сентябрь',
+        'Октябрь',
+        'Ноябрь',
+        'Декабрь',
+    ];
+
+    const START_YEAR = 1940;
+    const getYears = () => Array.from({ length: new Date().getFullYear() - START_YEAR + 1 }, (_, i) => START_YEAR + i);
+
+    const MONTHS_COUNT = 11;
+    const MONTHS_OPTIONS = months.map((key) => ({ key }));
+    const YEARS_OPTIONS = getYears()
+        .reverse()
+        .map((key) => ({ key: String(key) }));
+    const useDatePickerManager = ({ onShowCalendar, showCalendar, selectedMonth, onMonthSelect, onYearSelect, selectedYear, }) => {
+        const close = useCallback(() => showCalendar && onShowCalendar(false), [showCalendar]);
+        const ref = useOutsideClick(close);
+        const handleChangeVisibleCalendar = useCallback(() => onShowCalendar(!showCalendar), [showCalendar]);
+        const handleNextMonth = useCallback(() => {
+            if (selectedMonth + 1 <= MONTHS_COUNT) {
+                onMonthSelect(selectedMonth + 1);
+            }
+            else {
+                onMonthSelect(0);
+                onYearSelect(selectedYear + 1);
+            }
+        }, [selectedMonth]);
+        const handlePrevMonth = useCallback(() => {
+            if (selectedMonth - 1 >= 0) {
+                onMonthSelect(selectedMonth - 1);
+            }
+            else {
+                onMonthSelect(11);
+                onYearSelect(selectedYear - 1);
+            }
+        }, [selectedMonth]);
+        const handleSelectMonth = useCallback(({ key }) => onMonthSelect(months.indexOf(key)), []);
+        const handleSelectYear = useCallback(({ key }) => onYearSelect(Number(key)), []);
+        return {
+            handleChangeVisibleCalendar,
+            handleNextMonth,
+            handlePrevMonth,
+            handleSelectMonth,
+            handleSelectYear,
+            monthsOptions: MONTHS_OPTIONS,
+            yearsOptions: YEARS_OPTIONS,
+            ref,
+        };
+    };
+
+    const ICON_PROPS = {
+        name: 'ArrowUpIcon',
+        iconVersion: 'black',
+        width: '24',
+        height: '24',
+    };
+    const SELECT_PROPS = {
+        className: 'min-w-32',
+        iconVersion: 'black',
+        isBorder: false,
+    };
+    const formStyle = 'flex justify-between items-center h-14 px-m py-s border rounded-md cursor-pointer ' +
+        'hover:border-black active:border-black focus:border-black';
+    const DatePicker = JSX(({ className = '', label = '', value, valid = true, minDate, maxDate, onChange }) => {
+        const [showCalendar, { setValue }] = useBool(false);
+        const [selectedMonth, setSelectedMonth] = useState(value?.getMonth() || new Date().getMonth());
+        const [selectedYear, setSelectedYear] = useState(value?.getFullYear() || new Date().getFullYear());
+        const { handlePrevMonth, handleNextMonth, handleSelectMonth, handleSelectYear, monthsOptions, yearsOptions, handleChangeVisibleCalendar, ref, } = useDatePickerManager({
+            onYearSelect: setSelectedYear,
+            onMonthSelect: setSelectedMonth,
+            onShowCalendar: setValue,
+            selectedYear,
+            selectedMonth,
+            showCalendar,
+        });
+        return (jsxs("div", { className: style('space-y-xs', className), ref: ref, children: [renderLabel(label), jsxs("div", { className: "relative", children: [renderDatePickerForm(handleChangeVisibleCalendar, value, valid), showCalendar ? (jsxs("div", { className: "absolute bg-white z-20 select-none bottom-full", children: [jsxs("div", { className: "flex gap-s", children: [jsx("div", { className: "my-auto", onClick: handlePrevMonth, children: jsx(Icon, { ...ICON_PROPS, className: "-rotate-90 cursor-pointer" }) }), jsx(Select, { onChange: handleSelectMonth, value: { key: months[selectedMonth] }, options: monthsOptions, ...SELECT_PROPS }), jsx(Select, { onChange: handleSelectYear, value: { key: String(selectedYear) }, options: yearsOptions, ...SELECT_PROPS }), jsx("div", { className: "my-auto", onClick: handleNextMonth, children: jsx(Icon, { ...ICON_PROPS, className: "rotate-90 cursor-pointer" }) })] }), jsx(Calendar, { today: value, currentMonth: selectedMonth, currentYear: selectedYear, onDateSelect: onChange, min: minDate, max: maxDate })] })) : null] })] }));
+    });
+    const renderDatePickerForm = (handleChangeVisibleCalendar, value, valid) => (jsxs("div", { onClick: handleChangeVisibleCalendar, className: style(formStyle, valid ? 'border-gray' : 'border-error'), children: [jsx(Paragraph, { children: value && formatDate(value) }), jsx(Icon, { ...ICON_PROPS, name: "CalendarIcon" })] }));
+
+    const DatePickerControl = JSX(({ className, label, error, ...rest }) => (jsxs("div", { className: style('shrink-0 w-full', className), children: [jsx(DatePicker, { label: label && rest?.errors ? `${label}*` : label, valid: Boolean(!error), ...rest }), renderErrorText(error)] })));
+
+    const BirthdayField = JSX(({ field, input }) => (jsx(DatePickerControl, { label: "\u0414\u0430\u0442\u0430 \u0440\u043E\u0436\u0434\u0435\u043D\u0438\u044F", ...getValidation(field('birthday'), validatorObj.birthday, input?.required) })));
+
+    const CollectionCountField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u043E\u0431\u044A\u0435\u043A\u0442\u043E\u0432 \u0438\u043D\u043A\u0430\u0441\u0441\u0430\u0446\u0438\u0438", type: "number", ...getValidation(field('collectionCount'), validatorObj.collectionCount, input?.required) })));
+
     const CommentField = JSX(({ field, input }) => (jsx(InputControl, { className: "col-span-2", ...getValidation(field('comment'), validatorObj.comment, input?.required), placeholder: "\u0412\u0430\u0448\u0435 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435", isTextarea: true })));
 
-    const ConsentAssignmentField = JSX(({ field }) => (jsx(CheckboxWithError, { text: "\u041F\u0440\u043E\u0447\u0438\u0435 \u0441\u043E\u0433\u043B\u0430\u0441\u0438\u044F (\u0441\u043E\u0433\u043B\u0430\u0441\u0438\u0435 \u043D\u0430 \u0443\u0441\u0442\u0443\u043F\u043A\u0443 \u043F\u0440\u0430\u0432 \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u0439)", ...withValidator(field('consentAssignmentClaimsFlg'), validatorObj.consentAssignmentClaimsFlg) })));
+    const ConsentAssignmentField = JSX(({ field, input }) => (jsx(CheckboxWithError, { text: "\u041F\u0440\u043E\u0447\u0438\u0435 \u0441\u043E\u0433\u043B\u0430\u0441\u0438\u044F (\u0441\u043E\u0433\u043B\u0430\u0441\u0438\u0435 \u043D\u0430 \u0443\u0441\u0442\u0443\u043F\u043A\u0443 \u043F\u0440\u0430\u0432 \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u0439)", ...getValidation(field('consentAssignmentClaimsFlg'), validatorObj.consentAssignmentClaimsFlg, input?.required) })));
 
-    const ConsentCollectionField = JSX(({ field }) => (jsx(CheckboxWithError, { text: "\u041F\u0440\u043E\u0447\u0438\u0435 \u0441\u043E\u0433\u043B\u0430\u0441\u0438\u044F (\u0441\u043E\u0433\u043B\u0430\u0441\u0438\u0435 \u043D\u0430 \u0432\u0437\u044B\u0441\u043A\u0430\u043D\u0438\u0435 \u043F\u043E \u0438\u0441\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u043E\u0439 \u043D\u0430\u0434\u043F\u0438\u0441\u0438 \u043D\u043E\u0442\u0430\u0440\u0438\u0443\u0441\u0430)", ...withValidator(field('consentCollectionFlg'), validatorObj.consentCollectionFlg) })));
+    const ConsentCollectionField = JSX(({ field, input }) => (jsx(CheckboxWithError, { text: "\u041F\u0440\u043E\u0447\u0438\u0435 \u0441\u043E\u0433\u043B\u0430\u0441\u0438\u044F (\u0441\u043E\u0433\u043B\u0430\u0441\u0438\u0435 \u043D\u0430 \u0432\u0437\u044B\u0441\u043A\u0430\u043D\u0438\u0435 \u043F\u043E \u0438\u0441\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u043E\u0439 \u043D\u0430\u0434\u043F\u0438\u0441\u0438 \u043D\u043E\u0442\u0430\u0440\u0438\u0443\u0441\u0430)", ...getValidation(field('consentCollectionFlg'), validatorObj.consentCollectionFlg, input?.required) })));
 
-    const ConsentInformField = JSX(({ field }) => (jsx(CheckboxWithError, { text: "\u0421\u043E\u0433\u043B\u0430\u0441\u0438\u0435 \u043D\u0430 \u0438\u043D\u0444\u043E\u0440\u043C\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u0435 \u043E \u043F\u0440\u043E\u0434\u0443\u043A\u0442\u0430\u0445 \u0438 \u0443\u0441\u043B\u0443\u0433\u0430\u0445 \u0411\u0430\u043D\u043A\u0430", ...withValidator(field('consentInformFlg'), validatorObj.consentInformFlg) })));
+    const ConsentInformField = JSX(({ field, input }) => (jsx(CheckboxWithError, { text: "\u0421\u043E\u0433\u043B\u0430\u0441\u0438\u0435 \u043D\u0430 \u0438\u043D\u0444\u043E\u0440\u043C\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u0435 \u043E \u043F\u0440\u043E\u0434\u0443\u043A\u0442\u0430\u0445 \u0438 \u0443\u0441\u043B\u0443\u0433\u0430\u0445 \u0411\u0430\u043D\u043A\u0430", ...getValidation(field('consentInformFlg'), validatorObj.consentInformFlg, input?.required) })));
 
-    const ConsentPhotoFlg = JSX(({ field }) => (jsx(CheckboxWithError, { text: "\u041F\u0440\u043E\u0447\u0438\u0435 \u0441\u043E\u0433\u043B\u0430\u0441\u0438\u044F (\u0441\u043E\u0433\u043B\u0430\u0441\u0438\u0435 \u043D\u0430 \u0444\u043E\u0442\u043E\u0433\u0440\u0430\u0444\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u0435)", ...withValidator(field('consentPhotoFlg'), validatorObj.consentPhotoFlg) })));
+    const ConsentPhotoFlg = JSX(({ field, input }) => (jsx(CheckboxWithError, { text: "\u041F\u0440\u043E\u0447\u0438\u0435 \u0441\u043E\u0433\u043B\u0430\u0441\u0438\u044F (\u0441\u043E\u0433\u043B\u0430\u0441\u0438\u0435 \u043D\u0430 \u0444\u043E\u0442\u043E\u0433\u0440\u0430\u0444\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u0435)", ...getValidation(field('consentPhotoFlg'), validatorObj.consentPhotoFlg, input?.required) })));
 
-    const ConsentProviderField = JSX(({ field }) => (jsx(CheckboxWithError, { text: "\u0421\u043E\u0433\u043B\u0430\u0441\u0438\u0435 \u043E\u0431 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0438 \u043F\u0440\u043E\u0441\u0442\u043E\u0439 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0434\u043F\u0438\u0441\u0438", ...withValidator(field('consentProviderFlg'), validatorObj.consentProviderFlg) })));
+    const ConsentProviderField = JSX(({ field, input }) => (jsx(CheckboxWithError, { text: "\u0421\u043E\u0433\u043B\u0430\u0441\u0438\u0435 \u043E\u0431 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0438 \u043F\u0440\u043E\u0441\u0442\u043E\u0439 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0434\u043F\u0438\u0441\u0438", ...getValidation(field('consentProviderFlg'), validatorObj.consentProviderFlg, input?.required) })));
 
-    const ConsentToReceiveMaterialsField = JSX(({ field }) => (jsx(CheckboxWithError, { text: "\u0421\u043E\u0433\u043B\u0430\u0441\u0435\u043D \u043D\u0430 \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u0435 \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u043E\u043D\u043D\u044B\u0445 \u0438 \u0430\u043D\u0430\u043B\u0438\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\u043E\u0432 \u043F\u043E \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u0435", ...field('consentToReceiveMaterials') })));
+    const ConsentToReceiveMaterialsField = JSX(({ field, input }) => (jsx(CheckboxWithError, { text: "\u0421\u043E\u0433\u043B\u0430\u0441\u0435\u043D \u043D\u0430 \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u0435 \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u043E\u043D\u043D\u044B\u0445 \u0438 \u0430\u043D\u0430\u043B\u0438\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\u043E\u0432 \u043F\u043E \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u043E\u0439 \u043F\u043E\u0447\u0442\u0435", ...getValidation(field('consentToReceiveMaterials'), validatorObj.consentToReceiveMaterials, input?.required) })));
 
-    const FeedbackMethodField = JSX(({ field }) => (jsx(SelectControl, { label: "\u0421\u043F\u043E\u0441\u043E\u0431 \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u044F \u043E\u0442\u0432\u0435\u0442\u0430", options: FEEDBACK_METHOD, ...withValidator(field('feedbackMethod'), validatorObj.feedbackMethod) })));
+    const DesiredMeetingDateField = JSX(({ field, input }) => (jsx(DatePickerControl, { label: "\u0414\u0430\u0442\u0430 \u0440\u043E\u0436\u0434\u0435\u043D\u0438\u044F", ...getValidation(field('birthday'), validatorObj.birthday, input?.required) })));
 
-    const FeedbackTypeField = JSX(({ field }) => {
+    const EmailField = JSX(({ field, input }) => {
+        const { required, ...rest } = input;
+        return (jsx(InputControl, { label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...getValidation(field('email'), validatorObj.email, required), ...rest }));
+    });
+
+    const FeedbackMethodField = JSX(({ field, input }) => (jsx(SelectControl, { label: "\u0421\u043F\u043E\u0441\u043E\u0431 \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u044F \u043E\u0442\u0432\u0435\u0442\u0430", options: FEEDBACK_METHOD, ...getValidation(field('feedbackMethod'), validatorObj.feedbackMethod, input?.required) })));
+
+    const FeedbackTypeField = JSX(({ field, input }) => {
         const feedbackType = field('feedbackType');
         useEffect(() => {
             if (feedbackType?.value?.key === 'FEEDBACK') {
                 field('serviceDirection')?.onChange?.(SERVICE_DIRECTIONS[0]);
             }
         }, [feedbackType?.value]);
-        return (jsx(SelectControl, { label: "\u0422\u0435\u043C\u0430", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u043C\u0443", options: FEEDBACK_TYPES, ...withValidator(feedbackType, validatorObj.feedbackType) }));
+        return (jsx(SelectControl, { label: "\u0422\u0435\u043C\u0430", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u043C\u0443", options: FEEDBACK_TYPES, ...getValidation(feedbackType, validatorObj.feedbackType, input?.required) }));
     });
 
+    const FullNameField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0424\u0418\u041E", ...getValidation(field('fullName'), validatorObj.fullName, input?.required), ...input })));
+
+    const InnField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0418\u041D\u041D", type: "number", ...getValidation(field('inn'), validatorObj.inn, input?.required) })));
+
     const IsClientField = JSX(({ field }) => (jsx(CheckboxWithError, { ...field('isClient'), text: '\u042F\u0432\u043B\u044F\u044E\u0441\u044C \u043A\u043B\u0438\u0435\u043D\u0442\u043E\u043C \u0431\u0430\u043D\u043A\u0430 \u0410\u041E "\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A"' })));
 
     const REGIONS_URL = '/api/v1/regions';
@@ -1753,7 +1881,7 @@
         return (jsx(SelectControl, { label: "\u041D\u0430\u0441\u0435\u043B\u0435\u043D\u043D\u044B\u0439 \u043F\u0443\u043D\u043A\u0442", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0433\u043E\u0440\u043E\u0434, \u0433\u0434\u0435 \u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0441\u0435\u0440\u0432\u0438\u0441", options: localities, ...getValidation(field('localities'), validatorObj.localities, input?.required), isSearch: true }));
     });
 
-    const MiddleNameField = JSX(({ field }) => (jsx(InputControl, { label: "\u041E\u0442\u0447\u0435\u0441\u0442\u0432\u043E (\u041E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E, \u043F\u0440\u0438 \u043D\u0430\u043B\u0438\u0447\u0438\u0438)", ...field('middleName') })));
+    const MiddleNameField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u041E\u0442\u0447\u0435\u0441\u0442\u0432\u043E (\u041E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E, \u043F\u0440\u0438 \u043D\u0430\u043B\u0438\u0447\u0438\u0438)", ...field('middleName'), ...input })));
 
     const NameField = JSX(({ field, input }) => {
         const { required, ...rest } = input;
@@ -1797,7 +1925,7 @@
 
     const PosTerminalField = JSX(({ field }) => isAcquiringTrade(field('acquiringType')?.value?.key) ? (jsx(SlideCheckbox, { type: "radio", text: "\u0425\u043E\u0447\u0443 POS-\u0442\u0435\u0440\u043C\u0438\u043D\u0430\u043B", ...field('posTerminal') })) : null);
 
-    const ProcessPersonalDataField = JSX(({ field }) => (jsx(CheckboxWithError, { text: "\u0421\u043E\u0433\u043B\u0430\u0441\u0438\u0435 \u043D\u0430 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0443 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445", ...withValidator(field('processPersonalDataLeadFlg'), validatorObj.processPersonalDataLeadFlg) })));
+    const ProcessPersonalDataField = JSX(({ field, input }) => (jsx(CheckboxWithError, { text: "\u0421\u043E\u0433\u043B\u0430\u0441\u0438\u0435 \u043D\u0430 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0443 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445", ...getValidation(field('processPersonalDataLeadFlg'), validatorObj.processPersonalDataLeadFlg, input?.required) })));
 
     const ProductField = UniBlock(({ field, source }) => (jsx(SelectControl, { placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043F\u0440\u043E\u0434\u0443\u043A\u0442", label: "\u041F\u0440\u043E\u0434\u0443\u043A\u0442", options: arrayToOptions(source?.productList), ...withValidator(field('product'), validatorObj.product) })));
     const arrayToOptions = (array) => (array ?? []).map((_) => ({ key: _, value: _ }));
@@ -1823,16 +1951,16 @@
                 : withValidator(fieldPhone, validatorObj.secondaryPhone)) }));
     });
 
-    const ServiceDirectionField = JSX(({ field }) => (jsx(SelectControl, { label: "\u041D\u0430\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u0435 \u043E\u0431\u0441\u043B\u0443\u0436\u0438\u0432\u0430\u043D\u0438\u044F", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043D\u0430\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u0435", options: SERVICE_DIRECTIONS, ...withValidator(field('serviceDirection'), validatorObj.serviceDirection) })));
+    const ServiceDirectionField = JSX(({ field, input }) => (jsx(SelectControl, { label: "\u041D\u0430\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u0435 \u043E\u0431\u0441\u043B\u0443\u0436\u0438\u0432\u0430\u043D\u0438\u044F", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043D\u0430\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u0435", options: SERVICE_DIRECTIONS, ...getValidation(field('serviceDirection'), validatorObj.serviceDirection, input?.required) })));
 
-    const SurnameField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0424\u0430\u043C\u0438\u043B\u0438\u044F", ...getValidation(field('surname'), validatorObj.surname, input?.required) })));
+    const SurnameField = JSX(({ field, input }) => (jsx(InputControl, { label: "\u0424\u0430\u043C\u0438\u043B\u0438\u044F", ...getValidation(field('surname'), validatorObj.surname, input?.required), ...input })));
 
     const MIN_CREDIT_TERM = 1;
     const MAX_CREDIT_TERM = 180;
     const ITEMS_CREDIT_TERM = ['От 1 мес', 'До 15 лет'];
     const TermField = JSX(({ field }) => (jsx(InputRange, { title: "\u0421\u0440\u043E\u043A, \u043C\u0435\u0441\u044F\u0446\u0435\u0432", items: ITEMS_CREDIT_TERM, min: MIN_CREDIT_TERM, max: MAX_CREDIT_TERM, ...field('term') })));
 
-    const UltraPremiumField = JSX(({ field }) => (jsx(SelectControl, { label: "\u0422\u0438\u043F \u043E\u0431\u0441\u043B\u0443\u0436\u0438\u0432\u0430\u043D\u0438\u044F", options: SERVICE_TYPES, ...withValidator(field('serviceType'), validatorObj.serviceType) })));
+    const UltraPremiumField = JSX(({ field, input }) => (jsx(SelectControl, { label: "\u0422\u0438\u043F \u043E\u0431\u0441\u043B\u0443\u0436\u0438\u0432\u0430\u043D\u0438\u044F", options: SERVICE_TYPES, ...getValidation(field('serviceType'), validatorObj.serviceType, input?.required) })));
 
     const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "font-sans flex gap-s items-center relative cursor-pointer", children: [jsx("input", { className: style(inputValidStyle.split(' ').filter((_) => _ !== 'rounded'), defaultCheckStyle, 'flex justify-center items-center after:block after:w-2.5 after:h-2.5 after:rounded-full rounded-full', 'checked:border-2 checked:!border-primary-main focus:checked:border-primary-main checked:after:bg-primary-main'), type: "radio", value: value, name: name, checked: checked, onChange: (_) => onChange?.(_.target.value), role: "radio" }), text ? jsx(Text, { color: "text-primary-text", children: text }) : null] }) })));
 
@@ -1865,48 +1993,47 @@
     const getField = 
     // eslint-disable-next-line max-lines-per-function
     (field, typeForm) => (input, i) => {
-        const { required, ...rest } = input;
         const isPremium = typeForm === 'ULTRASERVICE' || typeForm === 'PREMIUMSERVICE';
         const InputsMap = {
             surname: jsx(SurnameField, { field: field, input: input }),
             name: jsx(NameField, { field: field, input: input }),
-            middleName: jsx(MiddleNameField, { field: field }),
+            middleName: jsx(MiddleNameField, { field: field, input: input }),
             phone: jsx(PhoneField, { field: field, input: input }),
-            email: (jsx(InputControl, { label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...getValidation(field('email'), validatorObj.email, required), ...rest })),
-            fullName: (jsx(InputControl, { label: "\u0424\u0418\u041E", ...getValidation(field('fullName'), validatorObj.fullName, required), ...rest })),
-            inn: (jsx(InputControl, { label: "\u0418\u041D\u041D", type: "number", ...getValidation(field('inn'), validatorObj.inn, required) })),
+            email: jsx(EmailField, { field: field, input: input }),
+            fullName: jsx(FullNameField, { field: field, input: input }),
+            inn: jsx(InnField, { field: field, input: input }),
             comment: jsx(CommentField, { field: field, input: input }),
-            region: isPremium ? (jsx(RegionPremiumField, { field: field })) : (jsx(RegionField, { field: field, input: input, url: getRegionUrl(typeForm) })),
             addressBranch: jsx(AddressBranchField, { field: field, input: input, isPremium: isPremium }),
-            birthday: (jsx(DatePickerControl, { label: "\u0414\u0430\u0442\u0430 \u0440\u043E\u0436\u0434\u0435\u043D\u0438\u044F", ...getValidation(field('birthday'), validatorObj.birthday, required) })),
-            desiredMeetingDate: (jsx(DatePickerControl, { label: "\u0416\u0435\u043B\u0430\u0435\u043C\u0430\u044F \u0434\u0430\u0442\u0430 \u0432\u0441\u0442\u0440\u0435\u0447\u0438", ...getValidation(field('desiredMeetingDate'), validatorObj.meetingDay, required) })),
+            birthday: jsx(BirthdayField, { field: field, input: input }),
+            desiredMeetingDate: jsx(DesiredMeetingDateField, { field: field, input: input }),
             product: jsx(ProductField, { field: field, source: PRODUCT_REF }),
             localities: jsx(LocalitiesField, { field: field, input: input }),
             isClient: jsx(IsClientField, { field: field }),
             partnerComments: jsx(PartnerCommentsField, { field: field, input: input }),
-            collectionCount: (jsx(InputControl, { label: "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u043E\u0431\u044A\u0435\u043A\u0442\u043E\u0432 \u0438\u043D\u043A\u0430\u0441\u0441\u0430\u0446\u0438\u0438", type: "number", ...getValidation(field('collectionCount'), validatorObj.collectionCount, required) })),
+            collectionCount: jsx(CollectionCountField, { field: field, input: input }),
             acquiringType: jsx(AcquiringField, { field: field, input: input }),
             onlineCheckout: jsx(OnlineCheckoutField, { field: field }),
             posTerminal: jsx(PosTerminalField, { field: field }),
-            serviceType: jsx(UltraPremiumField, { field: field }),
+            serviceType: jsx(UltraPremiumField, { field: field, input: input }),
             term: jsx(TermField, { field: field }),
             amount: jsx(AmountField, { field: field }),
-            annualRevenue: (jsx(InputControl, { label: "\u0413\u043E\u0434\u043E\u0432\u0430\u044F \u0432\u044B\u0440\u0443\u0447\u043A\u0430, \u20BD", ...getValidation(field('annualRevenue'), validatorObj.annualRevenue, required) })),
+            annualRevenue: jsx(AnnualRevenueField, { field: field, input: input }),
             vedTypes: jsx(VedField, { field: field }),
-            feedbackType: jsx(FeedbackTypeField, { field: field }),
-            feedbackMethod: jsx(FeedbackMethodField, { field: field }),
-            serviceDirection: jsx(ServiceDirectionField, { field: field }),
-            bankEmpolee: (jsx(InputControl, { label: "\u0424\u0418\u041E \u0438\u043B\u0438 \u0434\u043E\u043B\u0436\u043D\u043E\u0441\u0442\u044C \u043E\u0431\u0441\u043B\u0443\u0436\u0438\u0432\u0430\u0432\u0448\u0435\u0433\u043E \u0412\u0430\u0441 \u0441\u043E\u0442\u0440\u0443\u0434\u043D\u0438\u043A\u0430 \u0411\u0430\u043D\u043A\u0430", ...field('bankEmpolee') })),
-            applicationDate: (jsx(InputControl, { label: "\u0414\u0430\u0442\u0430 \u0438 \u0432\u0440\u0435\u043C\u044F \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u044F \u0432 \u0411\u0430\u043D\u043A", ...field('applicationDate') })),
+            feedbackType: jsx(FeedbackTypeField, { field: field, input: input }),
+            feedbackMethod: jsx(FeedbackMethodField, { field: field, input: input }),
+            serviceDirection: jsx(ServiceDirectionField, { field: field, input: input }),
+            bankEmpolee: jsx(BankEmpoleeField, { field: field }),
             secondaryPhone: jsx(SecondaryPhoneField, { field: field }),
+            consentToReceiveMaterials: jsx(ConsentToReceiveMaterialsField, { field: field, input: input }),
+            processPersonalDataLeadFlg: jsx(ProcessPersonalDataField, { field: field, input: input }),
+            consentProviderFlg: jsx(ConsentProviderField, { field: field, input: input }),
+            consentPhotoFlg: jsx(ConsentPhotoFlg, { field: field, input: input }),
+            consentAssignmentClaimsFlg: jsx(ConsentAssignmentField, { field: field, input: input }),
+            consentCollectionFlg: jsx(ConsentCollectionField, { field: field, input: input }),
+            consentInformFlg: jsx(ConsentInformField, { field: field, input: input }),
+            applicationDate: (jsx(InputControl, { label: "\u0414\u0430\u0442\u0430 \u0438 \u0432\u0440\u0435\u043C\u044F \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u044F \u0432 \u0411\u0430\u043D\u043A", ...field('applicationDate') })),
             consentPfrFlg: (jsx(CheckboxWithError, { text: "\u0421\u043E\u0433\u043B\u0430\u0441\u0438\u0435 \u043D\u0430 \u0437\u0430\u043F\u0440\u043E\u0441 \u0432 \u041F\u0424\u0420", ...field('consentPfrFlg') })),
-            consentToReceiveMaterials: jsx(ConsentToReceiveMaterialsField, { field: field }),
-            processPersonalDataLeadFlg: jsx(ProcessPersonalDataField, { field: field }),
-            consentProviderFlg: jsx(ConsentProviderField, { field: field }),
-            consentPhotoFlg: jsx(ConsentPhotoFlg, { field: field }),
-            consentAssignmentClaimsFlg: jsx(ConsentAssignmentField, { field: field }),
-            consentCollectionFlg: jsx(ConsentCollectionField, { field: field }),
-            consentInformFlg: jsx(ConsentInformField, { field: field }),
+            region: isPremium ? (jsx(RegionPremiumField, { field: field })) : (jsx(RegionField, { field: field, input: input, url: getRegionUrl(typeForm) })),
         };
         return isRenderField({ input, field }) ? (jsx("div", { children: InputsMap[input?.name] }, String(i))) : null;
     };
@@ -2225,7 +2352,7 @@
         };
         const hasValidationErrors = useMemo(() => inputs
             ?.filter((_) => _.required)
-            ?.some((_) => Boolean(withValidator(field(_?.name), validatorObj[_?.name]).error)), [inputs]);
+            ?.some((_) => Boolean(getValidation(field(_?.name), validatorObj[_?.name], _?.required))), [inputs]);
         return (jsx("div", { className: "w-fit", children: jsx(Foldable, { isFoldButtonOnTop: true, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { isUnfolded: isUnfolded, className: "flex flex-col pl-2xl", children: inputs.map(getField(field, typeForm)) })), renderFoldButton: renderGeneralCheckbox(jsxs("div", { children: [jsx(Checkbox, { value: isChecked, onChange: handleGeneralToggle, text: CONSENT_ALL_DOCS_TEXT }, key), renderErrorText(hasValidationErrors ? CONSENT_REQUIRED : '')] })) }) }));
     });
     const renderGeneralCheckbox = (generalCheckBox) => (foldableData) => (jsxs("div", { className: "flex items-start", children: [generalCheckBox, jsx("button", { onClick: foldableData.onToggle, className: "px-m py-2xs", children: jsx(Icon, { className: "text-primary-text", name: foldableData.isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16" }) })] }));
@@ -5159,13 +5286,13 @@
         };
     };
 
-    const ReportDialogButton = JSX(({ text, href, target, __html }) => {
+    const ReportDialogButton = JSX(({ text, href, target, __html, icon }) => {
         if (!text && !__html) {
             return null;
         }
         const reportDialog = useReportDialog({ __html, href, target });
         const openReportDialog = useCallback(() => reportDialog.open(), [reportDialog]);
-        return (jsx("button", { className: "text-primary-main", onClick: openReportDialog, children: text }));
+        return (jsxs("button", { className: "flex gap-s text-primary-text no-underline hover:text-primary-main", onClick: openReportDialog, children: [renderImg(icon), jsx(Text, { font: "font-light", children: text })] }));
     });
 
     const linkColumnsModeStyleMap = {
@@ -5182,17 +5309,17 @@
             return null;
         }
         if ('reportSource' in docBlockDef && docBlockDef?.reportSource?.__html) {
-            return renderModalItem(docBlockDef, i);
+            return renderModalItem(icon)(docBlockDef, i);
         }
         return renderDefaultItem(router, icon)(docBlockDef, i);
     };
-    const renderModalItem = (props, i) => {
+    const renderModalItem = (icon) => (props, i) => {
         const commonProps = {
             text: props.text,
             target: props.target,
             __html: props.reportSource?.__html,
         };
-        return props.reportSource?.__html && props.text ? (jsxs("div", { role: "listitem", children: [jsx(ReportDialogButton, { ...commonProps, href: isLinkDoc(props) ? props?.href : props?.attachment?.src }), jsx(RichText, { __html: props?.__html })] }, String(i))) : null;
+        return props.reportSource?.__html && props.text ? (jsxs("div", { role: "listitem", children: [jsx(ReportDialogButton, { ...commonProps, icon: icon, href: isLinkDoc(props) ? props?.href : props?.attachment?.src }), jsx(RichText, { __html: props?.__html })] }, String(i))) : null;
     };
     const isLinkDoc = (data) => 'href' in data;
 
@@ -6731,11 +6858,10 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.574";
+    const packageVersion = "0.14.576";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;
-    exports.DaDataAPI = DaDataAPI;
     exports.handlerDecorator = handlerDecorator;
     exports.joinList = joinList;
     exports.packageVersion = packageVersion;