@redneckz/wildless-cms-uni-blocks 0.14.26 → 0.14.28

package/bundle/bundle.umd.js

@@ -243,10 +243,11 @@
         return JSXTmpl;
     };
 
-    function CorporateLeadAPI() {
-        async function send(body) {
+    function LeadServiceAPI() {
+        async function send(body, isIndividualType) {
+            const url = isIndividualType ? '/api/v1/lead' : '/api/v1/sendcorporatelead';
             try {
-                const response = await fetch('/api/v1/sendcorporatelead', {
+                const response = await fetch(url, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     mode: 'cors',
@@ -684,7 +685,7 @@
 
     const Text = JSX(({ children, ...styleProps }) => (jsx("span", { className: style('font-sans', Object.values(styleProps)), children: children })));
 
-    const Footnote = JSX(({ link }) => (jsxs(Paragraph, { size: "text-s", font: "font-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 Footnote = JSX(({ text, link }) => (jsxs(Paragraph, { size: "text-s", font: "font-light", color: "text-secondary-text", children: [jsx(Text, { children: text || 'Нажимая кнопку, вы подтверждаете согласие с ' }), 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 withValidator = (props, validator) => {
         const { value, isDirty } = props;
@@ -710,7 +711,7 @@
         const validStyle = valid
             ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
             : 'border-error';
-        return (jsxs("div", { className: style('relative', className), children: [jsxs("label", { children: [label ? (jsx("div", { className: "mb-xs", children: jsx(Text, { size: "text-m", font: "font-light", children: label }) })) : null, jsx("input", { ref: inputRef, className: style('w-full border rounded-md text-primary-text outline-none p-m', paddingStyle, validStyle, inputClassName), id: id, name: name || id, placeholder: placeholder, type: type, value: value, onInput: handleChange, onFocus: onFocus, onBlur: onBlur, pattern: pattern }, key)] }), children] }));
+        return (jsxs("div", { className: style('relative', className), children: [jsxs("label", { children: [label ? (jsx("div", { className: "mb-xs", children: jsx(Text, { size: "text-m", font: "font-light", children: label }) })) : null, jsx("input", { ref: inputRef, className: style('w-full h-14 border rounded-md text-primary-text outline-none p-m', paddingStyle, validStyle, inputClassName), id: id, name: name || id, placeholder: placeholder, type: type, value: value, onInput: handleChange, onFocus: onFocus, onBlur: onBlur, pattern: pattern }, key)] }), children] }));
     });
 
     const InputControl = JSX(({ className, label, value = '', error, onChange, onBlur }) => (jsxs("div", { className: className, children: [jsx(Input, { type: "text", "aria-label": label, label: label, valid: Boolean(!error), value: value, onChange: onChange, onBlur: onBlur }), jsx("div", { className: "h-2", children: error ? (jsx(Text, { size: "text-xs", font: "font-light", color: "text-error", children: error })) : null })] })));
@@ -886,11 +887,11 @@
             onChange,
             onClose: handleClose,
         });
-        return (jsxs("div", { className: className, children: [renderLabel(label), jsxs("div", { className: style('relative', isOpen ? 'z-20' : 'z-10'), ref: inputRef, children: [jsxs("div", { className: style('text-l flex justify-between items-center text-primary-text cursor-pointer relative z-10', getBorderStyle(isBorder, valid)), onClick: isOpen ? handleClose : open, children: [jsx("p", { className: "p-m pr-3xl flex items-center overflow-hidden text-ellipsis whitespace-nowrap", children: formatOption(value) || placeholder }), renderIcon$1(isOpen, iconVersion)] }), isSearch && isOpen ? (jsx("div", { className: style('absolute top-0 w-full z-20'), children: jsx(Input, { type: "text", autoFocus: true, value: query, onChange: setQuery }) })) : null] })] }));
+        return (jsxs("div", { className: className, children: [renderLabel(label), jsxs("div", { className: style('relative', isOpen ? 'z-20' : 'z-10'), ref: inputRef, children: [jsxs("div", { className: style('h-14 text-l flex justify-between items-center text-primary-text cursor-pointer relative z-10', getBorderStyle$1(isBorder, valid)), onClick: isOpen ? handleClose : open, children: [jsx("p", { className: "p-m pr-3xl flex items-center overflow-hidden text-ellipsis whitespace-nowrap", children: formatOption(value) || placeholder }), renderIcon$1(isOpen, iconVersion)] }), isSearch && isOpen ? (jsx("div", { className: style('absolute top-0 w-full z-20'), children: jsx(Input, { type: "text", autoFocus: true, value: query, onChange: setQuery }) })) : null] })] }));
     });
     const renderLabel = (label) => label ? (jsx("div", { className: "mb-xs", children: jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: label }) })) : null;
     const renderIcon$1 = (isOpen, iconVersion) => (jsx(Icon, { className: style('absolute right-3', isOpen ? '' : 'rotate-180'), iconVersion: iconVersion, name: "ArrowUpIcon", width: "16", height: "16" }));
-    const getBorderStyle = (isBorder, valid) => style(isBorder ? 'border rounded-md hover:border-primary-hover' : '', valid ? ' border-gray' : 'border-error');
+    const getBorderStyle$1 = (isBorder, valid) => style(isBorder ? 'border rounded-md hover:border-primary-hover' : '', valid ? ' border-gray' : 'border-error');
 
     const SelectControl = JSX(({ className = '', error, ...rest }) => (jsxs("div", { className: className, children: [jsx(Select, { ...rest, valid: !error }), jsx("div", { className: "h-2", children: error ? (jsx(Text, { size: "text-xs", font: "font-light", color: "text-error", children: error })) : null })] })));
 
@@ -908,7 +909,7 @@
         return (jsx("button", { type: "submit", className: style('p-m w-full @xl:w-auto', buttonStyle, className), children: button?.text ? button.text : 'Отправить заявку' }));
     };
 
-    const initialFormState$4 = {
+    const initialFormState$5 = {
         acquiringType: { key: 'Торговый эквайринг' },
         fullName: '',
         inn: '',
@@ -940,7 +941,7 @@
                     phone: phone.replace(/[^+\d]/g, ''),
                 });
         }, [onSubmit]);
-        const [, { field, ...formProps }] = useForm(initialFormState$4, handleSubmit);
+        const [, { field, ...formProps }] = useForm(initialFormState$5, handleSubmit);
         const regions = useGetRegions();
         return (jsxs("form", { className: "container space-y-m", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u0412\u0438\u0434 \u044D\u043A\u0432\u0430\u0439\u0440\u0438\u043D\u0433\u0430 \u0438 \u0440\u0435\u0433\u0438\u043E\u043D", className: "@xl:text-center" }), renderAcquiringRegion({ regions, field }), jsx(Heading, { headingType: "h6", title: "\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", className: "@xl:text-center" }), renderAcquiringDataOrganization(field), renderSlideCheckboxes(field), renderSubmitButton(button), jsx(Footnote, { link: link })] }));
     });
@@ -949,7 +950,7 @@
 
     const renderRegion$1 = ({ regions, field }) => (jsx(SelectControl, { className: "w-full", label: "\u0424\u0438\u043B\u0438\u0430\u043B", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0438\u043B\u0438\u0430\u043B", isSearch: true, options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }));
 
-    const initialFormState$3 = {
+    const initialFormState$4 = {
         name: '',
         phone: '',
         inn: '',
@@ -976,7 +977,7 @@
                     phone: phone.replace(/[^+\d]/g, ''),
                 });
         }, [onSubmit]);
-        const [, { field, ...formProps }] = useForm(initialFormState$3, handleSubmit);
+        const [, { field, ...formProps }] = useForm(initialFormState$4, handleSubmit);
         const regions = useGetRegions();
         return (jsxs("form", { className: "container space-y-s", onSubmit: formProps.onSubmit, children: [renderRegion$1({ regions, field }), renderBusinessCardDataOrganization(field), renderSubmitButton(button), jsx(Footnote, { link: link })] }));
     });
@@ -1071,7 +1072,7 @@
                         text: address,
                     })), ...withValidator(field('department'), defaultValidator) }) })] }));
 
-    const initialFormState$2 = {
+    const initialFormState$3 = {
         amount: MIN_CREDIT_AMOUNT,
         term: 12,
         fullName: '',
@@ -1106,13 +1107,13 @@
                     partnerComments: `Сумма=${amount}/Срок=${term}/Выручка=${annualRevenue}`,
                 });
         }, [onSubmit]);
-        const [formState, { field, ...formProps }] = useForm(initialFormState$2, handleSubmit);
+        const [formState, { field, ...formProps }] = useForm(initialFormState$3, handleSubmit);
         const regions = useGetRegions();
         const branches = useBranches(formState.region?.key).filter((branch) => branch?.address);
         return (jsxs("form", { className: "container space-y-m", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B", className: "@xl:text-center" }), renderCreditParameters(field), jsx(Heading, { headingType: "h6", title: "\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", className: "@xl:text-center" }), renderCreditDataOrganization(field), jsx(Heading, { headingType: "h6", title: "\u041E\u0444\u0438\u0441 \u0431\u0430\u043D\u043A\u0430", className: "@xl:text-center" }), renderRegionDepartment({ regions, branches, field }), renderSubmitButton(button), jsx(Footnote, { link: link })] }));
     });
 
-    const initialFormState$1 = {
+    const initialFormState$2 = {
         name: '',
         phone: '',
     };
@@ -1120,8 +1121,7 @@
         name: nameValidator,
         phone: phoneValidator,
     });
-    const ApplicationFormDeposit = JSX((props) => {
-        const { button, link, onSubmit } = props;
+    const ApplicationFormDeposit = JSX(({ button, link, onSubmit }) => {
         const handleSubmit = useCallback((formState) => {
             const { name, phone } = formState;
             isValidationSuccess(depositValidator(formState)) &&
@@ -1131,7 +1131,7 @@
                     phone: phone.replace(/[^+\d]/g, ''),
                 });
         }, [onSubmit]);
-        const [, { field, ...formProps }] = useForm(initialFormState$1, handleSubmit);
+        const [, { field, ...formProps }] = useForm(initialFormState$2, handleSubmit);
         return (jsxs("form", { className: "container", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u041E\u0441\u0442\u0430\u0432\u044C\u0442\u0435 \u0437\u0430\u044F\u0432\u043A\u0443 \u0438 \u043C\u044B \u043E\u0442\u0432\u0435\u0442\u0438\u043C \u043D\u0430 \u043B\u044E\u0431\u044B\u0435 \u0432\u043E\u043F\u0440\u043E\u0441\u044B \u043F\u043E \u0434\u0435\u043F\u043E\u0437\u0438\u0442\u0430\u043C", className: "@xl:text-center mb-m" }), jsxs("div", { className: "max-w-[560px] m-auto space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u0418\u043C\u044F", ...withValidator(field('name'), nameValidator) }), jsx(PhoneInputControl, { className: "shrink-0 w-full", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) })] }), jsxs("div", { className: "flex justify-between flex-col-reverse @xl:items-center @xl:flex-row max-w-[560px] m-auto", children: [jsx("div", { className: "flex-1", children: jsx(Footnote, { link: link }) }), renderSubmitButton(button)] })] }));
     });
 
@@ -1155,7 +1155,227 @@
             version: button?.version,
         });
         const regionHref = regions?.find((_) => _.name === region.key)?.href;
-        return (jsxs("div", { className: "container space-y-s @xl:space-y-lg", children: [regions ? (jsx(SelectControl, { label: "\u0412\u0430\u0448 \u0440\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", isSearch: true, options: regions.map(({ name = '' }) => ({ key: name })), value: region, onChange: setRegion })) : null, regionHref ? (jsx("div", { className: "text-center", children: jsx(Button, { href: regionHref, target: "_blank", className: style('p-m w-full @xl:w-auto', buttonStyle), children: button?.text ? button.text : 'Перейти' }) })) : null] }));
+        return (jsxs("div", { className: "container space-y-s @xl:space-y-lg", children: [regions ? (jsx(SelectControl, { label: "\u0412\u0430\u0448 \u0440\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", isSearch: true, options: regions.map(({ name = '' }) => ({ key: name, text: name })), value: region, onChange: setRegion })) : null, regionHref ? (jsx("div", { className: "text-center", children: jsx(Button, { href: regionHref, target: "_blank", className: style('p-m w-full @xl:w-auto', buttonStyle), children: button?.text ? button.text : 'Перейти' }) })) : null] }));
+    });
+
+    const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
+        return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, viewBox: viewBox, fill: fill, width: width, height: height, children: paths.map(({ d, fill: pathFill, ...options }, i) => (jsx("path", { d: d, fill: pathFill || 'currentColor', ...commonOptions, ...options }, i))) }));
+    });
+
+    const CHECK_PATHS = [
+        {
+            d: 'M10.207.793a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L3.5 6.086 8.793.793a1 1 0 0 1 1.414 0Z',
+            fillRule: 'evenodd',
+            clipRule: 'evenodd',
+            fill: 'white',
+        },
+    ];
+    const Checkbox = JSX(({ className, value, text, disabled, isRadio, onChange }) => {
+        const handleChange = useCallback((e) => {
+            if (disabled) {
+                return;
+            }
+            e.preventDefault();
+            onChange && onChange(!value);
+        }, [onChange, disabled, value]);
+        const icon = isRadio ? (jsx("div", { className: "absolute left-1 w-3 h-3 rounded-full bg-primary-main" })) : (jsx(SVG, { paths: CHECK_PATHS, className: "absolute left-1 ml-px block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" }));
+        return (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer group/box", onClick: handleChange, children: [jsx("div", { className: style('appearance-none w-5 h-5 border-solid cursor-pointer m-0', isRadio ? 'rounded-full border-2' : checkboxStyle(value), value ? 'border-primary-main' : 'border-gray', disabled ? 'bg-main-disabled' : 'group-hover/box:border-primary-hover'), role: "checkbox", "aria-checked": Boolean(value), "aria-disabled": Boolean(disabled) }), value ? icon : null, text ? (jsx("div", { className: "ml-s", children: jsx(Text, { size: "text-l", font: "font-light", children: text }) })) : null] }) }));
+    });
+    const checkboxStyle = (value) => style('rounded border', value ? 'bg-primary-main' : '');
+
+    const formatDate = (date, toTimeStamp = false) => {
+        if (typeof date === 'string') {
+            return date.split('-').reverse().join('.');
+        }
+        else {
+            const day = String(date.getDate()).padStart(2, '0');
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const year = toTimeStamp ? String(date.getFullYear()) : String(date.getFullYear()).slice(-2);
+            return toTimeStamp ? `${year}-${month}-${day}` : `${day}.${month}.${year}`;
+        }
+    };
+
+    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', isToday ? '' : 'border-transparent hover:bg-gray', isDisabled ? 'text-gray hover:bg-transparent' : 'cursor-pointer');
+
+    const WEEK_DAYS = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
+    const Calendar = JSX(({ today, currentMonth, currentYear, min, max, onDateSelect = noop }) => {
+        const handleDateClick = useCallback((date) => onDateSelect(date), []);
+        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(className, 'relative'), ref: ref, children: [jsx(Text, { size: "text-m", children: label }), renderDatePickerForm(handleChangeVisibleCalendar, value, valid), showCalendar ? (jsxs("div", { className: "absolute bg-white z-10 select-none", 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, value = undefined, error, onChange }) => (jsxs("div", { className: className, children: [label ? (jsx("div", { className: "mb-xs", children: jsx(Text, { size: "text-m", font: "font-light", children: label }) })) : null, jsx(DatePicker, { value: value, onChange: onChange, valid: Boolean(!error) }), jsx("div", { className: "h-2", children: error ? (jsx(Text, { size: "text-xs", font: "font-light", color: "text-error", children: error })) : null })] })));
+
+    const renderIndividualsFields = (field) => (jsxs("div", { className: "@xl:flex @xl:justify-between @xl:gap-lg", children: [jsxs("div", { className: "@xl:w-1/2 space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u0424\u0430\u043C\u0438\u043B\u0438\u044F", ...withValidator(field('surname'), nameValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u041E\u0442\u0447\u0435\u0441\u0442\u0432\u043E", ...withValidator(field('middleName'), nameValidator) }), jsx(PhoneInputControl, { className: "shrink-0 w-full", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) })] }), jsxs("div", { className: "@xl:w-1/2 space-y-s", children: [jsx(InputControl, { className: "shrink-0 w-full", label: "\u0418\u043C\u044F", ...withValidator(field('name'), nameValidator) }), jsx(DatePickerControl, { className: "shrink-0 w-full", label: "\u0414\u0430\u0442\u0430 \u0440\u043E\u0436\u0434\u0435\u043D\u0438\u044F", ...withValidator(field('date'), defaultValidator) }), jsx(InputControl, { className: "shrink-0 w-full", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...withValidator(field('mail'), defaultValidator) })] })] }));
+
+    const initialFormState$1 = {
+        surname: '',
+        name: '',
+        middleName: '',
+        phone: '',
+        mail: '',
+        date: undefined,
+        consentDataProcessing: true,
+    };
+    const individualsValidator = objectValidator({
+        surname: nameValidator,
+        name: nameValidator,
+        middleName: nameValidator,
+        phone: phoneValidator,
+        mail: defaultValidator,
+        date: defaultValidator,
+    });
+    const ApplicationFormIndividuals = JSX((props) => {
+        const { button, link, product, onSubmit } = props;
+        const handleSubmit = useCallback((formState) => {
+            const { surname, name, middleName, phone, mail, date, consentDataProcessing } = formState;
+            isValidationSuccess(individualsValidator(formState)) &&
+                onSubmit({
+                    typeForm: 'dpst',
+                    surname,
+                    name,
+                    middleName,
+                    mail,
+                    consentDataProcessing,
+                    phone: phone.replace(/[^+\d]/g, ''),
+                    date: date?.toISOString().slice(0, 10) || '',
+                    product: product || '',
+                }, true);
+        }, [onSubmit]);
+        const [, { field, ...formProps }] = useForm(initialFormState$1, handleSubmit);
+        return (jsxs("form", { className: "container space-y-s", onSubmit: formProps.onSubmit, children: [renderIndividualsFields(field), jsxs("div", { className: "@xl:flex justify-between items-center", children: [jsxs("div", { className: "@xl:mb-0 mb-2 flex items-center gap-3", children: [jsx(Checkbox, { ...withValidator(field('consentDataProcessing'), defaultValidator) }), jsx(Footnote, { text: "\u0421\u043E\u0433\u043B\u0430\u0441\u0435\u043D \u0441 ", link: link })] }), renderSubmitButton(button)] })] }));
     });
 
     const sourcesComparator = (a, b) => a?.media && b?.media ? a.media - b.media : 0;
@@ -1262,6 +1482,7 @@
         ApplicationFormCredit,
         ApplicationFormAcquiring,
         ApplicationFormGrantSupport,
+        ApplicationFormIndividuals,
     };
 
     const ResponseNotification = JSX(({ responseType }) => {
@@ -1270,12 +1491,12 @@
         return (jsxs("div", { className: `flex items-center p-lg rounded-md space-x-m ${backgroundColor}`, children: [responseOK ? (jsx(Img, { image: { icon: 'ResponseOKIcon' }, width: "42", height: "42" })) : (jsx(Img, { image: { icon: 'ResponseFailIcon' }, width: "37", height: "34" })), jsxs("div", { children: [jsx(Heading, { headingType: "h6", title: responseOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку', className: "mb-2xs" }), jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: responseOK ? 'Совсем скоро мы с вами свяжемся' : 'Пожалуйста, повторите позднее' })] })] }));
     });
 
-    const API = CorporateLeadAPI();
+    const API = LeadServiceAPI();
     const ApplicationForm = JSX((props) => {
         const { className, formBlock, ...rest } = props;
         const [responseType, setResponseType] = useState('');
-        const handleSubmit = useCallback(async (data) => {
-            const status = (await API.send(data)) ? 'OK' : 'Fail';
+        const handleSubmit = useCallback(async (data, isIndividualType) => {
+            const status = (await API.send(data, isIndividualType)) ? 'OK' : 'Fail';
             setResponseType(status);
             return status;
         }, []);
@@ -1664,31 +1885,6 @@
                     : null, jsxs("div", { className: "flex flex-col gap-y-4xl @xl:w-96", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] })] }));
     });
 
-    const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
-        return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, viewBox: viewBox, fill: fill, width: width, height: height, children: paths.map(({ d, fill: pathFill, ...options }, i) => (jsx("path", { d: d, fill: pathFill || 'currentColor', ...commonOptions, ...options }, i))) }));
-    });
-
-    const CHECK_PATHS = [
-        {
-            d: 'M10.207.793a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L3.5 6.086 8.793.793a1 1 0 0 1 1.414 0Z',
-            fillRule: 'evenodd',
-            clipRule: 'evenodd',
-            fill: 'white',
-        },
-    ];
-    const Checkbox = JSX(({ className, value, text, disabled, isRadio, onChange }) => {
-        const handleChange = useCallback((e) => {
-            if (disabled) {
-                return;
-            }
-            e.preventDefault();
-            onChange && onChange(!value);
-        }, [onChange, disabled, value]);
-        const icon = isRadio ? (jsx("div", { className: "absolute left-1 w-3 h-3 rounded-full bg-primary-main" })) : (jsx(SVG, { paths: CHECK_PATHS, className: "absolute left-1 ml-px block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" }));
-        return (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer group/box", onClick: handleChange, children: [jsx("div", { className: style('appearance-none w-5 h-5 border-solid cursor-pointer m-0', isRadio ? 'rounded-full border-2' : checkboxStyle(value), value ? 'border-primary-main' : 'border-gray', disabled ? 'bg-main-disabled' : 'group-hover/box:border-primary-hover'), role: "checkbox", "aria-checked": Boolean(value), "aria-disabled": Boolean(disabled) }), value ? icon : null, text ? (jsx("div", { className: "ml-s", children: jsx(Text, { size: "text-l", font: "font-light", children: text }) })) : null] }) }));
-    });
-    const checkboxStyle = (value) => style('rounded border', value ? 'bg-primary-main' : '');
-
     const STEP_DAYS = 1;
     const renderDaysInput = (props) => (jsx(InputRange, { items: [`От ${daysText(props.min || 0)}`, `До ${daysText(props.max || 0)}`], step: STEP_DAYS, ...props }));
     const daysText = (days) => `${days} ${Number(days) % 10 === 1 ? 'дня' : 'дней'}`;
@@ -2543,6 +2739,10 @@
             : null;
     }
 
+    const getBorderStyle = (showBorder) => showBorder
+        ? 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider'
+        : '';
+
     const renderCardHighlight = ({ className, text = 'ХИТ' } = {}) => (jsxs("div", { className: style('w-14 h-14 bg-white flex flex-col items-center justify-center rounded-md shadow-main-black', className), children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "24", height: "24" }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: text })] }));
 
     const cardBaseStyle = 'relative h-full';
@@ -2571,8 +2771,7 @@
     };
     const cardWrapperStyle = (_, { someCardsHighlighted }) => style(cardBaseStyle, someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl' : 'pt-3xl sm:pt-16'));
     const cardStyle = (_, { someCardsHighlighted, showBorder, cardSize = 'normal', }) => style(cardBaseStyle, 'min-w-80', CARD_SIZE_MAP[cardSize], // TODO fix для RecommendationCard
-    someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'), showBorder &&
-        'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider');
+    someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'), getBorderStyle(showBorder), showBorder && 'h-full');
     const isCardHighlighted = (_) => _?.content && 'isHighlighting' in _.content && _.content.isHighlighting;
 
     const VISIBLE_ITEM_COUNT = 1;
@@ -2618,11 +2817,11 @@
         'gradient-color-text-on-yellow',
     ][blockIndex % 3];
 
-    const titleSize = 'L';
+    const titleSize = 'XS';
 
     const layerBaseStyle = 'z-10 border border-solid w-full h-full';
     const layerStyle = style(layerBaseStyle, 'absolute hidden @xl:block border-transparent');
-    const CarouselCard = JSX(({ className, title, description, button, ...rest }) => (jsx(BlockWrapper, { className: style('sm:pl-6xl sm:pb-4xl @container-normal', className), defaultPadding: "p-0", ...rest, children: jsxs("div", { className: "relative", children: [jsx("div", { className: style(layerStyle, 'top-9 right-12 bg-green-dark') }), jsx("div", { className: style(layerStyle, 'top-6 right-8 bg-green') }), jsx("div", { className: style(layerStyle, 'top-3 right-4 bg-green-light') }), jsxs("div", { className: style(layerBaseStyle, 'relative p-xl sm:p-5xl bg-white border-transparent sm:border-green-light'), children: [jsx(Headline, { title: title, description: description, headlineVersion: titleSize, align: "text-left", isEmbedded: true }), renderButtonsSection([button], {
+    const CarouselCard = JSX(({ className, title, description, button, ...rest }) => (jsx(BlockWrapper, { className: style('sm:pl-6xl sm:pb-4xl @container-normal', className), defaultPadding: "p-0", ...rest, children: jsxs("div", { className: "relative h-full", children: [jsx("div", { className: style(layerStyle, 'top-9 right-12 bg-green-dark') }), jsx("div", { className: style(layerStyle, 'top-6 right-8 bg-green') }), jsx("div", { className: style(layerStyle, 'top-3 right-4 bg-green-light') }), jsxs("div", { className: style(layerBaseStyle, 'relative p-xl sm:p-5xl bg-white border-transparent sm:border-green-light'), children: [jsx(Headline, { title: title, description: description, headlineVersion: titleSize, align: "text-left", isEmbedded: true }), renderButtonsSection([button], {
                             className: 'mt-m sm:mt-6xl sm:justify-center',
                             isVertical: true,
                         })] })] }) })));
@@ -2742,7 +2941,7 @@
         'description' in _ ? (jsx("span", { className: _.descriptionClassName, children: renderBenefitDescription(_.description, i) }, String(i))) : null,
     ]);
 
-    const BenefitItem = JSX(({ className, benefitsVersion, ..._ }) => (jsxs("div", { className: style('flex gap-m min-w-56', 'description' in _ && _.description ? 'items-start' : 'items-center', className), children: ['icon' in _ ? renderBenefitIcon(_.icon, benefitsVersion) : null, jsx("div", { children: renderBenefitText(_) })] })));
+    const BenefitItem = JSX(({ className, benefitsVersion, ..._ }) => (jsxs("div", { className: style('flex gap-m min-w-56 items-center', className), children: ['icon' in _ ? renderBenefitIcon(_.icon, benefitsVersion) : null, jsx("div", { children: renderBenefitText(_) })] })));
 
     const MAX_BENEFITS_LEN_DEVIATION = 16;
     const benefitLength = (_) => _.type === 'rte'
@@ -2799,6 +2998,10 @@
             origins: ['rutube.ru'],
             iconMapped: { icon: 'RutubeIcon' },
         },
+        {
+            origins: ['dzen.ru'],
+            iconMapped: { icon: 'DzenIcon' },
+        },
     ];
 
     const findIconByHref = (href) => ICONS_MAP.find(({ origins }) => origins?.some((_) => href?.includes(_))) || {};
@@ -2820,11 +3023,11 @@
                 version,
             };
         });
-        const buttonClassName = style('border border-solid hover:border-transparent group-data-primary:border-main-divider border-main-divider group-data-gray:border-green group/media', showButtonText && hasText ? '' : ' basis-auto', stretched ? 'flex-1 justify-center' : '');
-        return (jsxs("div", { className: "flex flex-col sm:flex-col-reverse gap-xs", children: [children ? (jsx(Text, { size: "text-s", font: "font-light", color: "text-secondary-text", children: children })) : null, jsx("div", { className: style('flex gap-xs', className), children: renderButtonsSection(buttons, {
+        const buttonClassName = style('border border-solid hover:border-transparent group-data-primary:border-main-divider border-main-divider group-data-gray:border-green group/media', showButtonText && hasText ? '' : 'basis-auto', stretched ? 'flex-1 justify-center' : '');
+        return (jsxs("div", { className: style('flex flex-col gap-xs', className), children: [jsx("div", { className: "flex gap-xs", children: renderButtonsSection(buttons, {
                         className: stretched ? 'w-full' : '',
                         buttonClassName,
-                    }) })] }));
+                    }) }), children ? (jsx(Text, { size: "text-s", font: "font-light", color: "text-secondary-text", children: children })) : null] }));
     });
 
     const ImageAlwaysOnRight = true;
@@ -2868,7 +3071,7 @@
         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('flex flex-col', className), defaultPadding: "p-3xl", ...rest, children: [isIcon(icon) ? (jsx("div", { className: "self-center", children: jsx(Img, { image: icon }) })) : null, title ? (jsx(Heading, { className: style('pt-xs', align), headingType: "h5", title: title })) : null, button ? jsx(Button, { className: "w-full mt-m", ...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('flex flex-col', className), defaultPadding: "p-2xl", ...rest, children: [isIcon(icon) ? (jsx("div", { className: "self-center", children: jsx(Img, { image: icon }) })) : null, title ? (jsx(Heading, { className: style('pt-xs', align), headingType: "h5", title: title })) : null, button ? jsx(Button, { className: "w-full mt-m mb-lg", ...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 renderFoldButton$1 = ({ isUnfolded, onToggle }) => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-lg 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" })] }));
 
@@ -2962,7 +3165,7 @@
         return (jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
     };
 
-    const NotFound = JSX(({ title, description }) => (jsxs("div", { className: "bg-white p-6xl py-20 flex gap-s flex-col @xl:items-center", children: [jsx(Img, { image: { icon: 'MagnifierIcon' }, width: "120", height: "120" }), jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: AlignStyles })] })));
+    const NotFound = JSX(({ title, description }) => (jsxs("div", { className: "bg-white p-6xl py-20 flex gap-s flex-col @xl:items-center", children: [jsx(Img, { image: { icon: 'MagnifierIcon', iconVersion: 'normal' }, width: "120", height: "120" }), jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: AlignStyles })] })));
 
     const ICONS = ['ArrowDownIcon', 'ArrowUpIcon'];
     const resultsGridStyle = 'space-y-px lg:space-y-0 lg:grid lg:grid-cols-12 gap-2xs border-box';
@@ -3157,164 +3360,11 @@
 
     const Pagination = ({ currentPage, onPageChange, totalPages, itemCount, onItemCountChange, }) => (jsxs("div", { className: "mt-3xl flex justify-between items-center select-none", role: "navigation", "aria-label": "\u041F\u0430\u0433\u0438\u043D\u0430\u0446\u0438\u044F", children: [jsx(PaginationContainer, { currentPage: currentPage, onPageChange: onPageChange, totalPages: totalPages }), itemCount && onItemCountChange ? (jsx(PageSizeSelector, { itemCount: itemCount, onItemCountChange: onItemCountChange })) : null] }));
 
-    const formatDate$1 = (date, toTimeStamp = false) => {
-        if (typeof date === 'string') {
-            return date.split('-').reverse().join('.');
-        }
-        else {
-            const day = String(date.getDate()).padStart(2, '0');
-            const month = String(date.getMonth() + 1).padStart(2, '0');
-            const year = toTimeStamp ? String(date.getFullYear()) : String(date.getFullYear()).slice(-2);
-            return toTimeStamp ? `${year}-${month}-${day}` : `${day}.${month}.${year}`;
-        }
-    };
-
-    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', isToday ? '' : 'border-transparent hover:bg-gray', isDisabled ? 'text-gray hover:bg-transparent' : 'cursor-pointer');
-
-    const WEEK_DAYS = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
-    const Calendar = JSX(({ today, currentMonth, currentYear, min, max, onDateSelect = noop }) => {
-        const handleDateClick = useCallback((date) => onDateSelect(date), []);
-        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 = 1970;
-    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 px-m py-s border border-gray rounded-md cursor-pointer ' +
-        'hover:border-black active:border-black focus:border-black';
-    const DatePicker = JSX(({ className = '', label = '', value, 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(className, 'relative'), ref: ref, children: [jsx(Text, { size: "text-m", children: label }), renderDatePickerForm(handleChangeVisibleCalendar, value), showCalendar ? (jsxs("div", { className: "absolute bg-white z-10 select-none", 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) => (jsxs("div", { onClick: handleChangeVisibleCalendar, className: formStyle, children: [jsx(Paragraph, { children: value && formatDate$1(value) }), jsx(Icon, { ...ICON_PROPS, name: "CalendarIcon" })] }));
-
     const SearchInput = JSX(({ className, value, autoFocus, onChange, onFocus, placeholder = 'Поиск по сайту' }) => {
         const handleChange = useCallback((ev) => {
             onChange && onChange(ev.target?.value || '');
         }, [onChange]);
-        return (jsxs("div", { className: style('font-sans relative', className), role: "form", children: [jsx("div", { className: "absolute h-full flex items-center pl-m pointer-events-none", children: jsx(Img, { image: { icon: 'LoupeIcon', iconVersion: 'black' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-12 w-full px-10 text-l text-black outline-none box-border border border-solid rounded-md', 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'), value: value, type: "text", name: "search-bar-input", placeholder: placeholder, autoFocus: autoFocus, onChange: handleChange, onFocus: onFocus })] }));
+        return (jsxs("div", { className: style('font-sans relative', className), role: "form", children: [jsx("div", { className: "absolute h-full flex items-center pl-m pointer-events-none", children: jsx(Img, { image: { icon: 'LoupeIcon', iconVersion: 'black' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-14 w-full px-10 text-l text-black outline-none box-border border border-solid rounded-md', 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'), value: value, type: "text", name: "search-bar-input", placeholder: placeholder, autoFocus: autoFocus, onChange: handleChange, onFocus: onFocus })] }));
     });
 
     const DepositoryFilter = JSX(({ field, onClearFilter, filtrationState }) => (jsxs("div", { className: "grid grid-cols-12 mb-3xl space-x-xl", children: [jsx(SearchInput, { className: "col-span-4 mt-auto", placeholder: "\u041F\u043E\u0438\u0441\u043A", ...field('query') }), jsx(DatePicker, { className: "col-span-3", label: "\u041F\u0435\u0440\u0438\u043E\u0434 \u043E\u0442", maxDate: filtrationState.endDate, ...field('startDate') }), jsx(DatePicker, { className: "col-span-3", label: "\u041F\u0435\u0440\u0438\u043E\u0434 \u0434\u043E", minDate: filtrationState.startDate, ...field('endDate') }), jsx("div", { className: "col-span-2 mt-auto", children: jsx("button", { className: "px-m py-s rounded-md bg-main-gray text-green cursor-pointer w-full", onClick: onClearFilter, children: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440" }) })] })));
@@ -3322,11 +3372,11 @@
     const DepositoryItem = ({ title, timestamp, publicId }) => {
         const link = useLink({ basePath: '/' });
         const { href } = link({ href: `/api/v1/depository/${publicId}/file` });
-        return (jsxs("div", { className: "grid grid-cols-12 py-lg border-gray border-opacity-50 border-b", children: [jsx("div", { className: "col-span-2 text-m", children: timestamp ? jsx(Text, { children: formatDate$1(timestamp) }) : null }), jsx("div", { className: "col-span-10 text-h6 hover:text-primary-active", children: jsx("a", { href: href, download: true, "aria-label": "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", children: title }) })] }, publicId));
+        return (jsxs("div", { className: "grid grid-cols-12 py-lg border-gray border-opacity-50 border-b", children: [jsx("div", { className: "col-span-2 text-m", children: timestamp ? jsx(Text, { children: formatDate(timestamp) }) : null }), jsx("div", { className: "col-span-10 text-h6 hover:text-primary-active", children: jsx("a", { href: href, download: true, "aria-label": "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", children: title }) })] }, publicId));
     };
 
     const useDepository = ({ size, page, query, startDate, endDate }) => {
-        const { data } = useAsyncData(`/api/v1/depository?page=${page}&size=${size}&query=${query}&timestampStart=${startDate ? formatDate$1(startDate, true) : ''}&timestampEnd=${endDate ? formatDate$1(endDate, true) : ''}`, fetchJSONUnsafe);
+        const { data } = useAsyncData(`/api/v1/depository?page=${page}&size=${size}&query=${query}&timestampStart=${startDate ? formatDate(startDate, true) : ''}&timestampEnd=${endDate ? formatDate(endDate, true) : ''}`, fetchJSONUnsafe);
         return { items: data?.content, totalPages: data?.totalPages };
     };
 
@@ -4149,9 +4199,7 @@
     const HorizontalLayout = JSX(({ className = '', gap = 'XS', isPadding = false, version = 'transparent', isTheme = false, isCardBorder, ...rest }) => (jsx(BlockWrapper, { className: style('relative', 'grid grid-cols-12', gapStyles[gap], className), defaultPadding: isPadding ? 'p-6xl' : '', version: version, isTheme: isTheme, ...rest, children: renderChildren({
             ...rest,
             extraProps: {
-                className: isCardBorder
-                    ? 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider'
-                    : '',
+                className: getBorderStyle(isCardBorder),
             },
         }) })));
     HorizontalLayout.childrenTypes = {
@@ -4286,20 +4334,12 @@
         return `${parseFloat((bytes / Math.pow(KILO, i)).toFixed(decimals))} ${KILO_SIZES[i]}`;
     };
 
-    const LinkDocItem = JSX(({ icon, text, fileSize, ...linkProps }) => (jsxs("a", { className: "flex box-border gap-s group/item h-fit w-fit text-primary-text no-underline hover:text-primary-main", role: "link", ...linkProps, children: [icon, text ? (jsxs(Text, { size: "text-l", font: "font-light", children: [text, jsx(Text, { color: "text-secondary-text", children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] })));
-    const formatSuffix = (ext, fileSize) => {
-        const prefix = ext || fileSize ? ',' : '';
-        const extension = ext ? ` ${ext}` : '';
-        const size = fileSize ? ` (${fileSize})` : '';
-        return prefix + extension + size;
-    };
-    const getExtFromHref = (href) => {
-        if (!href) {
-            return '';
-        }
-        const index = href.lastIndexOf('.');
-        return index !== -1 ? href.substring(index + 1) : '';
-    };
+    const LinkDocItem = JSX(({ icon, text, fileFormat, fileSize, ...linkProps }) => {
+        const prefix = fileFormat || fileSize ? ',' : '';
+        const size = fileSize ?? '';
+        const format = fileFormat ? String(fileFormat) : '';
+        return (jsxs("a", { className: "flex box-border gap-s group/item h-fit w-fit text-primary-text no-underline hover:text-primary-main", role: "link", ...linkProps, children: [icon, text ? (jsxs(Text, { size: "text-l", font: "font-light", children: [text, jsx(Text, { color: "text-secondary-text", children: linkProps?.href && `${size} ${prefix} ${format}` })] })) : null] }));
+    });
 
     const linkIconStyle = 'min-w-6 min-h-6';
 
@@ -4309,26 +4349,27 @@
     };
     const LinkDocs = JSX(({ className = '', title, description, align = 'text-center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => {
         const router = useRouter();
-        return (jsxs(BlockWrapper, { className: style('space-y-lg', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, align: align, headlineVersion: "M", as: "h2", isEmbedded: true }), documents?.length ? (jsx("div", { className: style('grid gap-xl', columnsMode === 'double' ? '@md:grid-cols-2' : 'grid-cols-1', linkColumnsModeStyleMap[columnsMode]), role: "list", children: documents.map(renderLinkDocItem(router, columnsMode, icon)) })) : null] }));
+        return (jsxs(BlockWrapper, { className: style('space-y-lg', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, align: align, headlineVersion: "M", as: "h2", isEmbedded: true }), documents?.length ? (jsx("div", { className: style('grid gap-xl', columnsMode === 'double' ? '@md:grid-cols-2' : 'grid-cols-1', linkColumnsModeStyleMap[columnsMode]), role: "list", children: documents.map(renderLinkDocItem(router, icon)) })) : null] }));
     });
-    const renderLinkDocItem = (router, columnsMode, icon) => (docBlockDef, i) => {
+    const renderLinkDocItem = (router, icon) => (docBlockDef, i) => {
         const href = docBlockDef?.docType === 'Attachment'
             ? adjustHref(router)(docBlockDef?.attachment?.src)
             : docBlockDef?.href;
         const fileSize = docBlockDef?.docType === 'Attachment'
             ? formatBytes(docBlockDef?.attachment?.fileSize || 0)
             : docBlockDef?.fileSize;
-        return (jsx("div", { role: "listitem", children: jsx(LinkDocItem, { text: docBlockDef?.text, target: docBlockDef?.target, href: href, fileSize: fileSize, icon: icon ? jsx(Img, { className: linkIconStyle, image: icon, width: "24", height: "24" }) : null }) }, String(i)));
+        const fileFormat = docBlockDef?.docType !== 'Attachment' ? docBlockDef?.fileFormat : '';
+        return (jsx("div", { role: "listitem", children: jsx(LinkDocItem, { text: docBlockDef?.text, target: docBlockDef?.target, href: href, fileFormat: fileFormat, fileSize: fileSize, icon: icon ? jsx(Img, { className: linkIconStyle, image: icon, width: "24", height: "24" }) : null }) }, String(i)));
     };
 
-    const renderList$1 = (items, listItemSize) => {
-        return items?.length ? (jsx(List, { items: items, listItemSize: listItemSize, className: "text-l font-light" })) : (jsx("span", { className: "text-m font-light text-secondary-text", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
+    const renderList$1 = (items, listItemSize, additionalDescription) => {
+        return items?.length ? (jsx(List, { items: items, listItemSize: listItemSize, className: "text-l font-light" })) : (jsx(Text, { size: "text-m", "font-weight": "font-light", color: "text-secondary-text", children: additionalDescription }));
     };
 
-    const MobileAppTile = JSX(({ className, padding, align = 'text-left', buttons = [], description, headingType = 'h4', image, items, listItemSize, qr, title = 'Мобильное приложение', version = 'primary', ...rest }) => {
+    const MobileAppTile = JSX(({ className, padding, align = 'text-left', buttons = [], description, headingType = 'h4', image, items, listItemSize, qr, additionalDescription = '', title = 'Мобильное приложение', version = 'primary', ...rest }) => {
         const containerStyle = version === 'secondary' ? 'p-m min-w-32' : 'min-w-24';
         const img = image?.src ? jsx(Img, { className: "hidden lg:block", image: image }) : null;
-        return (jsx(BlockWrapper, { className: style('min-h-80', className), padding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-6xl", title: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', align) })) : null, rightImage: img, buttons: renderButtonsSection(buttons, { className: 'flex-wrap' }), children: [description ? (jsx(Text, { size: "text-xl", "font-weight": "font-light", children: description })) : null, jsxs("div", { className: style('gap-m', 'flex flex-1 flex-col', 'flex-col items-start @xl:flex-row @xl:items-center'), children: [renderList$1(items, listItemSize), qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md @xl:-order-1', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, image?.src ? jsx(Img, { className: "lg:hidden", image: image }) : null] })] }) }));
+        return (jsx(BlockWrapper, { className: style('min-h-80', className), padding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-6xl", title: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', align) })) : null, rightImage: img, buttons: renderButtonsSection(buttons, { className: 'flex-wrap' }), children: [description ? (jsx(Text, { size: "text-xl", "font-weight": "font-light", children: description })) : null, jsxs("div", { className: style('gap-m', 'flex flex-1 flex-col', 'flex-col items-start @xl:flex-row @xl:items-center'), children: [renderList$1(items, listItemSize, additionalDescription), qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md @xl:-order-1', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, image?.src ? jsx(Img, { className: "lg:hidden", image: image }) : null] })] }) }));
     });
 
     const badgeBgStyleMap = {
@@ -4820,17 +4861,14 @@
             ev?.preventDefault();
             router.back();
         }, []);
-        const borderStyle = showBorder
-            ? 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider'
-            : '';
-        return (jsxs(BlockWrapper, { className: style('overflow-hidden flex flex-col gap-3xl box-border', borderStyle, className), defaultPadding: "p-6xl", padding: padding, ...rest, children: [backwardButton
+        return (jsxs(BlockWrapper, { className: style('overflow-hidden flex flex-col gap-3xl box-border', getBorderStyle(showBorder), className), defaultPadding: "p-6xl", padding: padding, ...rest, children: [backwardButton
                     ? renderBackwardButton(!rest.version || rest.version === 'primary' ? 'primary' : 'white', handleClick)
                     : null, jsx(BaseProductTile, { className: "grow h-full", ...rest })] }));
     });
 
     const ProductGallery = JSX(({ className = '', padding, slides = [], ...rest }) => {
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden', className), defaultPadding: "py-6xl", padding: padding, ...rest, children: [jsx("div", { className: "flex duration-1000", style: { transform: `translateX(-${activeSlideIndex * 100}%)` }, role: "list", children: slides.map(({ productBlock }, i) => (jsx("div", { className: "box-border grow-0 shrink-0 basis-full", role: "listitem", children: jsx(BaseProductTile, { className: "pl-6xl h-full", headlineVersion: "XXL", isFullWidthTitle: false, ...productBlock, ...rest }) }, String(i)))) }), jsx("div", { className: "h-28 px-xs mt-m -mb-m flex gap-xs box-border", children: slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex })) })] }));
+        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden', className), defaultPadding: "py-6xl", padding: padding, ...rest, children: [jsx("div", { className: "flex duration-1000", style: { transform: `translateX(-${activeSlideIndex * 100}%)` }, role: "list", children: slides.map(({ productBlock }, i) => (jsx("div", { className: "box-border grow-0 shrink-0 basis-full", role: "listitem", children: jsx(BaseProductTile, { className: "pl-6xl h-full", headlineVersion: "M", isFullWidthTitle: false, ...productBlock, ...rest }) }, String(i)))) }), jsx("div", { className: "h-28 px-xs mt-m -mb-m flex gap-xs box-border", children: slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex })) })] }));
     });
     const renderNavButton = ({ activeSlideIndex, onClick }) => ({ nav }, i) => {
         const isActive = i === activeSlideIndex;
@@ -4848,17 +4886,6 @@
 
     const ProductTile = JSX(({ className, padding, headlineVersion = 'S', isTabularBenefits = true, additionalDescription, imageOptions, isFullWidthTitle = true, ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-4xl sm:p-xl", padding: padding, headlineVersion: headlineVersion, isTabularBenefits: isTabularBenefits, imageOptions: { isImageSecondary: true, ...imageOptions }, isFullWidthTitle: isFullWidthTitle, ...rest, children: additionalDescription ? (jsx(Paragraph, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null }) })));
 
-    const PromoTile = JSX(({ className, title = 'Акции и спецпредложения', description, headlineVersion = 'S', date, buttons = [], ...rest }) => (jsx(BlockWrapper, { className: style('box-border', className), ...rest, children: jsxs(BaseTile, { className: "h-full", title: title ? (jsx(Headline, { title: title, headlineVersion: headlineVersion, align: "text-left", isEmbedded: true })) : null, buttons: renderButtonsSection(buttons), children: [date ? jsx("div", { className: "text-s mb-xs", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) })));
-    function formatDate(date) {
-        const dateObj = new Date(date);
-        const dateFormat = {
-            day: 'numeric',
-            month: 'long',
-            year: 'numeric',
-        };
-        return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
-    }
-
     const RepresentativeOfficeInfo = JSX(({ address, email, telephone, button, className = '', __html, icon, title, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border text-left space-y-s', className), version: version, ...rest, children: [jsxs("div", { className: "w-full flex justify-between flex-row-reverse", children: [isIcon(icon) ? (jsx("div", { className: 'w-10 h-7 sm:w-24 sm:h-16', children: jsx(Img, { image: icon }) })) : null, title ? jsx(Heading, { headingType: "h3", as: "h3", title: title }) : null] }), jsxs("div", { className: "w-full space-y-m", children: [__html ? renderDescriptionBlock(__html) : null, renderBlock({
                         label: 'Адрес',
                         data: address,
@@ -5192,8 +5219,6 @@
     const COLS_LENGTH_FOR_SCROLL = 2;
     const COLUMN_WIDTH$1 = 4 * 80 + 40; // w-80 + pl-10 = 360px
 
-    const headlineAlign = 'text-center';
-
     const TableInnerButton = JSX(({ className = '', isOpen, onClick }) => (jsx(Button, { className: className, appendRight: jsx(Img, { image: { icon: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon' }, width: "20", height: "20" }), text: isOpen ? 'Скрыть' : 'Показать', version: "gray", onClick: onClick })));
 
     const renderButtonsCellData = ({ buttons }) => renderButtonsSection(buttons, {
@@ -5356,7 +5381,7 @@
         });
         const rows = (rowData || []).map((row, i) => (jsx(TariffsTableRow, { row: row, activeIndex: activeIndex, rowIdx: i, ...rest }, String(i))));
         const [visibleRows, hiddenRows] = hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
-        return (jsxs(BlockWrapper, { className: style('overflow-hidden relative space-y-0 @4xl:space-y-xl', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isEmbedded: true, align: headlineAlign }), jsx("div", { className: "space-y-m", children: hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(TariffsTableWrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(TariffsTableWrapper, { controls: controls, children: rows })) })] }));
+        return (jsxs(BlockWrapper, { className: style('overflow-hidden relative space-y-6xl @4xl:space-y-xl', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isEmbedded: true, align: "text-center" }), jsx("div", { className: "space-y-m", children: hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(TariffsTableWrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(TariffsTableWrapper, { controls: controls, children: rows })) })] }));
     });
 
     const TextBlock = JSX(({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => (jsxs(BlockWrapper, { className: style('flex gap-s sm:gap-m bg-white group-data-secondary:bg-primary-main/10', className), ...rest, children: [iconVersion === 'small' ? renderIcon() : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "flex flex-col w-fit gap-2xs sm:gap-xs", children: [title ? (jsx(Text, { size: "text-l", font: "font-normal", color: "text-primary-text group-data-secondary:text-white", children: title })) : null, description ? renderDescription(description) : null, items?.length ? renderList(items, true) : null, __html ? jsx(RichText, { __html: __html }) : null] })] })));
@@ -5370,9 +5395,12 @@
 
     const Tile = JSX(({ className, padding, headlineVersion = 'S', listItemSize = 'M', ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-xl", padding: padding, headlineVersion: headlineVersion, listItemSize: listItemSize, isFullWidthTitle: false, ...rest }) })));
 
-    const VerticalLayout = JSX(({ className = '', gap = '', isPadding = false, isInnerPadding = true, version = 'transparent', isTheme = false, ...rest }) => (jsx(BlockWrapper, { className: style('relative flex flex-col', gapStyles[gap], className), defaultPadding: isPadding ? 'p-6xl' : '', version: version, isTheme: isTheme, ...rest, children: renderChildren({
+    const VerticalLayout = JSX(({ className = '', gap = '', isPadding = false, isInnerPadding = true, version = 'transparent', isTheme = false, isInnerBorder = false, ...rest }) => (jsx(BlockWrapper, { className: style('relative flex flex-col', gapStyles[gap], className), defaultPadding: isPadding ? 'p-6xl' : '', version: version, isTheme: isTheme, ...rest, children: renderChildren({
             ...rest,
-            extraProps: { className: 'w-full', padding: isInnerPadding ? '' : 'p-0' },
+            extraProps: {
+                className: style('w-full', getBorderStyle(isInnerBorder)),
+                padding: isInnerPadding ? '' : 'p-0',
+            },
         }) })));
     VerticalLayout.childrenTypes = [];
 
@@ -5433,7 +5461,6 @@
         ProductBlock,
         ProductGallery,
         ProductTile,
-        PromoTile,
         RepresentativeOfficeInfo,
         RichTextBlock,
         RollupItem,
@@ -5684,7 +5711,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-3xl sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.14.26";
+    const packageVersion = "0.14.28";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;