@redneckz/wildless-cms-uni-blocks 0.12.14 → 0.13.0

package/bundle/bundle.umd.js

@@ -386,6 +386,10 @@
                 onChange: handlersMap.current[fieldName],
             };
         }, [formState, isDirtyForm, dirtyFieldsMap]);
+        const update = useCallback((_) => {
+            setFormState(_);
+            setDirtyFieldsMap(_);
+        }, []);
         const reset = useCallback(() => {
             setFormState(initialState);
             setDirtyForm(false);
@@ -401,6 +405,7 @@
             {
                 isDirty: isDirtyForm || Object.values(dirtyFieldsMap).some(Boolean),
                 field,
+                update,
                 reset,
                 onSubmit: handleSubmit,
             },
@@ -1385,7 +1390,8 @@
         return isVisible ? (jsxs("div", { children: [canDec ? (jsx(ArrowButton, { className: `absolute z-40 ${btnClass[0]} ${className}`, onClick: dec, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left", disabled: !canDec })) : null, canInc ? (jsx(ArrowButton, { className: `absolute z-40 rotate-180 ${btnClass[1]} ${className}`, onClick: inc, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right", disabled: !canInc })) : null] })) : null;
     }
 
-    const CalculatorValueBlock = JSX(({ title, value, postfix = '', prefix, className = '' }) => (jsxs("div", { className: style('mb-7', className), children: [title ? (jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title })) : null, value ? (jsx("div", { children: jsxs(Text, { size: "text-h3", children: [prefix, " ", toLocalNumberFormat(2)(Math.round(value)), " ", postfix] }) })) : (jsx("div", { children: jsx(Text, { size: "text-h3", children: "-" }) }))] })));
+    const calculatorValueBlockStyle = 'flex justify-between md:mb-7 md:flex-col';
+    const CalculatorValueBlock = JSX(({ title, value, postfix = '', prefix, className = '' }) => (jsxs("div", { className: style(calculatorValueBlockStyle, className), children: [title ? (jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title })) : null, value ? (jsx("div", { children: jsxs(Text, { size: "text-h3", children: [prefix, " ", toLocalNumberFormat(2)(Math.round(value)), " ", postfix] }) })) : (jsx("div", { children: jsx(Text, { size: "text-h3", children: "-" }) }))] })));
 
     const DEFAULT_MIN_SUM$1 = 10000;
     const DEFAULT_MAX_SUM$1 = 5000000;
@@ -1545,28 +1551,6 @@
                         })] }), jsx("div", { children: monthBonus >= 0 ? (jsx(Rate, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u043C\u0435\u0441\u044F\u0446", rate: monthBonus, rateBlockClassName: "tracking-[-14px]", fractionDigits: 0 })) : null }), jsxs("div", { className: "w-96", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
     });
 
-    const UnknownRate = JSX(({ title = 'Ставка' }) => (jsxs("div", { children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsx("div", { className: "mt-2xs pt-2xs pl-lg pb-xs", children: jsx(Icon, { name: "PercentIcon", width: "90", height: "85" }) }), jsx("div", { className: "w-64 mt-m", children: jsxs(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: ["\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u043D\u0430\u044F \u0441\u0442\u0430\u0432\u043A\u0430 \u0434\u043B\u044F \u0441\u0440\u043E\u043A\u0430 ", jsx("strong", { children: "1-30 \u0434\u043D\u0435\u0439" }), " \u0443\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u043F\u0440\u0438 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0438 \u0432 \u0411\u0430\u043D\u043A"] }) })] })));
-
-    const STEP_DAYS = 1;
-    const renderDaysInput = (props) => (jsx(InputRange, { className: "mt-7", items: [`От ${daysText(props.min || 0)}`, `До ${daysText(props.max || 0)}`], step: STEP_DAYS, ...props }));
-    const daysText = (days) => `${days} ${Number(days) % 10 === 1 ? 'дня' : 'дней'}`;
-
-    const orientationStyleMap = {
-        horizontal: 'gap-10',
-        vertical: 'flex-col gap-3',
-    };
-    const RadioButtonGroup = JSX(({ items, checkedItem, onChange: onChangeCheckedItem, orientation = 'horizontal' }) => (jsx("div", { className: `flex ${orientationStyleMap[orientation]}`, children: items?.map(({ id, text }) => (jsx(Checkbox, { isRadio: true, text: text, value: checkedItem === id, onChange: () => onChangeCheckedItem && onChangeCheckedItem(id) }, String(id)))) })));
-
-    const renderBinaryRadioButtonGroup = ({ items, title, orientation = 'horizontal', value, onChange, }) => (jsxs("div", { children: [title ? (jsx("div", { className: "mb-3", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, jsx(RadioButtonGroup, { orientation: orientation, items: items, checkedItem: items[value ? 0 : 1].id, onChange: (_) => onChange && onChange(_ === items[0].id) })] }));
-
-    const renderInterestPayment = (props) => renderBinaryRadioButtonGroup({
-        ...props,
-        items: [
-            { id: 'everyMonth', text: 'Ежемесячно' },
-            { id: 'atEndTerm', text: 'В конце срока' },
-        ],
-    });
-
     const defaultDiscriminator = (_) => _;
     const maxBy = (discriminator = defaultDiscriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
     const max = maxBy();
@@ -1657,6 +1641,37 @@
         }
     };
 
+    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 ? 'дня' : 'дней'}`;
+
+    const orientationStyleMap = {
+        horizontal: 'gap-10',
+        vertical: 'flex-col gap-3',
+    };
+    const RadioButtonGroup = JSX(({ items, checkedItem, className, onChange: onChangeCheckedItem, orientation = 'horizontal', }) => (jsx("div", { className: style(`flex ${orientationStyleMap[orientation]}`, className), children: items?.map(({ id, text }) => (jsx(Checkbox, { isRadio: true, text: text, value: checkedItem === id, onChange: () => onChangeCheckedItem && onChangeCheckedItem(id) }, String(id)))) })));
+
+    const renderBinaryRadioButtonGroup = ({ items, title, orientation = 'horizontal', value, radioGroupClassName, onChange, }) => (jsxs("div", { children: [title ? (jsx("div", { className: "mb-3", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, jsx(RadioButtonGroup, { orientation: orientation, items: items, checkedItem: items[value ? 0 : 1].id, className: style('flex-col sm:flex-row', radioGroupClassName), onChange: (_) => onChange && onChange(_ === items[0].id) })] }));
+
+    const renderInterestPayment = (props) => renderBinaryRadioButtonGroup({
+        ...props,
+        items: [
+            { id: 'everyMonth', text: 'Ежемесячно' },
+            { id: 'atEndTerm', text: 'В конце срока' },
+        ],
+    });
+
+    const UnknownRate = JSX(({ title = 'Ставка' }) => (jsxs("div", { children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsx("div", { className: "mt-2xs pt-2xs pl-lg pb-xs", children: jsx(Icon, { name: "PercentIcon", width: "90", height: "85" }) }), jsx("div", { className: "w-64 mt-m", children: jsxs(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: ["\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u043D\u0430\u044F \u0441\u0442\u0430\u0432\u043A\u0430 \u0434\u043B\u044F \u0441\u0440\u043E\u043A\u0430 ", jsx("strong", { children: "1-30 \u0434\u043D\u0435\u0439" }), " \u0443\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u043F\u0440\u0438 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0438 \u0432 \u0411\u0430\u043D\u043A"] }) })] })));
+
+    const renderDesktopRate = ({ rate, depositeName, isShowDepositeName }) => (jsx(Rate, { rate: rate, depositeName: depositeName, isShowDepositeName: isShowDepositeName, rateBlockClassName: "tracking-[-25px]", unit: "%" }));
+    const renderMobileRate = ({ rate }) => (jsx(CalculatorValueBlock, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", value: rate, postfix: "%" }));
+    const renderRate = (props) => {
+        if (props.isShowUnknownRate) {
+            return jsx(UnknownRate, {});
+        }
+        return (jsxs("div", { children: [jsx("div", { className: "hidden md:block", children: renderDesktopRate(props) }), jsx("div", { className: "md:hidden", children: renderMobileRate(props) })] }));
+    };
+
     const BusinessDepositCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote, bottomFootnote, isShowDepositeName }) => {
         const [userInputParams, { field }] = useForm({
             moneyValue: BUSINESS_DEFAULT_SUM,
@@ -1667,8 +1682,8 @@
             isMonthlyInterestPayment: false,
         });
         const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
-        const { income, finalSum, rate, depositeName, isShowUnknownRate } = calculatorParams;
-        return (jsxs("section", { className: className, children: [jsxs("div", { className: "flex justify-between", children: [jsxs("div", { className: "w-2/5", children: [renderWantedSumInput({
+        const { income, finalSum, rate, isShowUnknownRate, depositeName } = calculatorParams;
+        return (jsxs("section", { className: className, children: [jsxs("div", { className: "flex flex-col justify-between sm:flex-row", children: [jsxs("div", { className: "flex flex-col gap-y-m sm:w-2/5 sm:gap-y-lg", children: [renderWantedSumInput({
                                     title: 'Сумма, ₽',
                                     min: calculatorParams.minSum,
                                     max: calculatorParams.maxSum,
@@ -1680,26 +1695,25 @@
                                     max: calculatorParams.maxDays,
                                     ...field('daysValue'),
                                     value: calculatorParams.daysValue,
-                                }), jsxs("div", { className: "mt-2xl flex justify-between", children: [renderBusinessDepositParamsForm(calculatorParams, field), renderInterestPayment({
+                                }), jsxs("div", { className: "flex flex-col gap-xl justify-between sm:flex-row sm:gap-0", children: [renderBusinessDepositParamsForm(calculatorParams, field), renderInterestPayment({
                                             title: 'Выплата процентов',
                                             orientation: 'vertical',
                                             ...field('isMonthlyInterestPayment'),
-                                        })] })] }), isShowUnknownRate ? (jsx(UnknownRate, {})) : (jsx(Rate, { rate: rate, depositeName: depositeName, isShowDepositeName: isShowDepositeName, rateBlockClassName: "tracking-[-25px]", unit: "%" })), jsxs("div", { className: "w-96", children: [jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: income, postfix: "\u20BD", prefix: "+" }), jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" }), renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true }), jsx("div", { className: "mt-2xl", children: renderFootnote(footnote) })] })] }), jsx("div", { className: "mt-5", children: renderFootnote(bottomFootnote) })] }));
+                                            radioGroupClassName: 'sm:flex-col',
+                                        })] })] }), jsx("div", { className: "border-b border-main-divider my-xl sm:hidden" }), renderRate({
+                            rate,
+                            depositeName,
+                            isShowDepositeName,
+                            isShowUnknownRate,
+                        }), jsxs("div", { className: "flex flex-col gap-y-xl mt-3xl sm:gap-0 sm:w-96 sm:mt-0", children: [renderDepositResults(finalSum, income), renderButtonsSection(buttons, { isVertical: true }), jsx("div", { className: "sm:mt-2xl", children: renderFootnote(footnote) })] })] }), jsx("div", { className: "mt-lg", children: renderFootnote(bottomFootnote) })] }));
     });
-    const renderBusinessDepositParamsForm = (calculatorParams, field) => (jsxs("div", { children: [jsx(Checkbox, { text: "\u041F\u043E\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u0435", disabled: calculatorParams.isDisabledOperatingDeposit, ...field('isReplenished'), value: calculatorParams.isReplenished }), jsx(Checkbox, { className: "mt-3", disabled: calculatorParams.isDisabledOperatingDeposit, text: "\u0427\u0430\u0441\u0442\u0438\u0447\u043D\u043E\u0435 \u0441\u043D\u044F\u0442\u0438\u0435", ...field('isPartialWithdrawal'), value: calculatorParams.isPartialWithdrawal }), jsx(Checkbox, { className: "mt-3", text: "\u0418\u041F / \u043C\u0430\u043B\u043E\u0435 \u043F\u0440\u0435\u0434\u043F\u0440\u0438\u044F\u0442\u0438\u0435", ...field('isSmallBusiness'), value: calculatorParams.isSmallBusiness })] }));
+    const renderBusinessDepositParamsForm = (calculatorParams, field) => (jsxs("div", { className: "flex flex-col gap-y-xl sm:gap-y-s", children: [jsx(Checkbox, { text: "\u041F\u043E\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u0435", disabled: calculatorParams.isDisabledOperatingDeposit, ...field('isReplenished'), value: calculatorParams.isReplenished }), jsx(Checkbox, { disabled: calculatorParams.isDisabledOperatingDeposit, text: "\u0427\u0430\u0441\u0442\u0438\u0447\u043D\u043E\u0435 \u0441\u043D\u044F\u0442\u0438\u0435", ...field('isPartialWithdrawal'), value: calculatorParams.isPartialWithdrawal }), jsx(Checkbox, { text: "\u0418\u041F / \u043C\u0430\u043B\u043E\u0435 \u043F\u0440\u0435\u0434\u043F\u0440\u0438\u044F\u0442\u0438\u0435", ...field('isSmallBusiness'), value: calculatorParams.isSmallBusiness })] }));
+    const renderDepositResults = (finalSum, income) => (jsxs("div", { className: "flex flex-col gap-2xl sm:gap-0", children: [jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: income, postfix: "\u20BD", prefix: "+" }), jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" })] }));
 
     const STEP_MONTHS = 1;
-    const renderMonthsInput = ({ min = 0, max = 0, availableMonths, ...rest }) => (jsx(InputRange, { className: "mt-7", items: [`От ${monthText(min)}`, `До ${monthText(max)}`], step: STEP_MONTHS, ...(availableMonths?.length ? { list: availableMonths } : { min, max }), ...rest }));
+    const renderMonthsInput = ({ min = 0, max = 0, availableMonths, ...rest }) => (jsx(InputRange, { items: [`От ${monthText(min)}`, `До ${monthText(max)}`], step: STEP_MONTHS, ...(availableMonths?.length ? { list: availableMonths } : { min, max }), ...rest }));
     const monthText = (month) => `${month} ${Number(month) % 10 === 1 ? 'месяца' : 'месяцев'}`;
 
-    const renderPaymentType = (props) => renderBinaryRadioButtonGroup({
-        ...props,
-        items: [
-            { id: 'annuity', text: 'Аннуитетный' },
-            { id: 'differential', text: 'Дифференцированный' },
-        ],
-    });
-
     const checkCreditSourceBookRowCommonParams = (props) => checkRowParam$1({
         ...props,
         fieldKey: 'isSalaryClient',
@@ -1798,7 +1812,16 @@
         }), [userInputParams, data]);
     };
 
-    const CreditCalculatorForm = JSX(({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
+    const renderPaymentType = (props) => renderBinaryRadioButtonGroup({
+        ...props,
+        radioGroupClassName: 'sm:flex-col',
+        items: [
+            { id: 'annuity', text: 'Аннуитетный' },
+            { id: 'differential', text: 'Дифференцированный' },
+        ],
+    });
+
+    const CreditCalculatorForm = JSX(({ className, sourceBookDir, buttons, footnote, paramsViewSettings, isMobile }) => {
         const [userInputParams, { field }] = useForm({
             isAnnuity: true,
             isInsurance: true,
@@ -1809,7 +1832,12 @@
             monthsValue: DEFAULT_MONTHS,
         });
         const calculatorParams = useCreditCalculatorParams(userInputParams, sourceBookDir, paramsViewSettings);
-        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-2/5", children: [renderWantedSumInput({
+        const paymentTypeElement = renderPaymentType({
+            title: isMobile ? 'Тип платежа' : '',
+            orientation: 'vertical',
+            ...field('isAnnuity'),
+        });
+        return (jsxs("section", { className: style('flex flex-col justify-between sm:flex-row', className), children: [jsxs("div", { className: "flex flex-col gap-y-m sm:w-2/5 sm:gap-y-lg", children: [renderWantedSumInput({
                             title: 'Сумма кредита, ₽',
                             step: 500,
                             min: calculatorParams.minSum,
@@ -1822,17 +1850,11 @@
                             max: calculatorParams.maxMonths,
                             ...field('monthsValue'),
                             value: calculatorParams.monthsValue,
-                        }), jsx("div", { className: "mt-2xl", children: renderCreditParamsForm$1({ ...calculatorParams, ...paramsViewSettings }, field) })] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-96", children: [jsx(CalculatorValueBlock, { title: 'Ежемесячный платеж', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') }), renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true }), renderFootnote(footnote)] })] }));
-    });
-    const renderCreditParamsForm$1 = (params, field) => (jsxs("div", { children: [params.isShowSalaryClient ? (jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", ...field('isSalaryClient'), value: params.isSalaryClient })) : null, params.isShowStateEmployee ? (jsx(Checkbox, { className: "mt-3", text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...field('isStateEmployee'), value: params.isStateEmployee })) : null, params.isShowPensionClient ? (jsx(Checkbox, { className: "mt-3", text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u043F\u0435\u043D\u0441\u0438\u044E \u043D\u0430 \u043A\u0430\u0440\u0442\u0443 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0430", ...field('isPensionClient'), value: params.isPensionClient })) : null, params.isShowInsurance ? (jsx(Checkbox, { className: "mt-3", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", ...field('isInsurance'), value: params.isInsurance })) : null] }));
-
-    const renderRegistrationType = (props) => renderBinaryRadioButtonGroup({
-        ...props,
-        items: [
-            { id: 'remote', text: 'Дистанционно' },
-            { id: 'office', text: 'Офис Банка' },
-        ],
+                        }), renderCreditParamsForm$1({ ...calculatorParams, ...paramsViewSettings }, field), jsx("div", { className: "mt-s sm:hidden", children: paymentTypeElement })] }), jsx("div", { className: "border-b border-main-divider mt-xl mb-3xl sm:hidden" }), renderRate({
+                    rate: calculatorParams.rate,
+                }), jsxs("div", { className: "mt-6xl flex flex-col gap-lg sm:w-96 sm:mt-0 sm:gap-0", children: [jsx(CalculatorValueBlock, { title: "\u0415\u0436\u0435\u043C\u0435\u0441\u044F\u0447\u043D\u044B\u0439 \u043F\u043B\u0430\u0442\u0435\u0436", value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), jsx("div", { className: "hidden sm:block", children: paymentTypeElement }), renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true }), renderFootnote(footnote)] })] }));
     });
+    const renderCreditParamsForm$1 = (params, field) => (jsxs("div", { className: "gap-xl flex flex-col sm:gap-s", children: [params.isShowSalaryClient ? (jsx(Checkbox, { text: `Получаю зарплату на счёт\nв Россельхозбанке`, ...field('isSalaryClient'), value: params.isSalaryClient, className: "whitespace-pre-line sm:whitespace-normal" })) : null, params.isShowStateEmployee ? (jsx(Checkbox, { text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...field('isStateEmployee'), value: params.isStateEmployee })) : null, params.isShowPensionClient ? (jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u043F\u0435\u043D\u0441\u0438\u044E \u043D\u0430 \u043A\u0430\u0440\u0442\u0443 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0430", ...field('isPensionClient'), value: params.isPensionClient })) : null, params.isShowInsurance ? (jsx(Checkbox, { text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", ...field('isInsurance'), value: params.isInsurance })) : null] }));
 
     const arrayByRange = (start, stop, step = 1) => Array.from({ length: Math.abs(stop - start) / step + 1 }, (value, index) => stop >= start ? start + index * step : start - index * step);
 
@@ -1888,6 +1910,14 @@
     const checkRowByParam = ({ row, userInputParams, paramKey, isExclude }) => isExclude || userInputParams[paramKey] === row[paramKey];
     const getMiddleMonth = (minMonths, maxMonths) => minMonths + Math.round((maxMonths - minMonths) / 2);
 
+    const renderRegistrationType = (props) => renderBinaryRadioButtonGroup({
+        ...props,
+        items: [
+            { id: 'remote', text: 'Дистанционно' },
+            { id: 'office', text: 'Офис Банка' },
+        ],
+    });
+
     const DepositCalculatorForm = JSX(({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
         const [userInputParams, { field }] = useForm({
             moneyValue: DEPOSIT_DEFAULT_SUM,
@@ -1896,12 +1926,12 @@
             isRemoteRegistration: false,
         });
         const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir, paramsViewSettings);
-        const { defaultMonth, income, finalSum, rate } = calculatorParams;
+        const { defaultMonth, rate, income, finalSum } = calculatorParams;
         const { onChange: setMonthsValue } = field('monthsValue');
         useEffect(() => {
             setMonthsValue && setMonthsValue(defaultMonth);
         }, [defaultMonth]);
-        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-2/5", children: [renderWantedSumInput({
+        return (jsxs("section", { className: style('flex flex-col justify-between sm:flex-row', className), children: [jsxs("div", { className: "flex flex-col gap-lg sm:w-2/5", children: [renderWantedSumInput({
                             title: 'Сумма, ₽',
                             min: calculatorParams.minSum,
                             max: calculatorParams.maxSum,
@@ -1914,7 +1944,9 @@
                             availableMonths: calculatorParams.availableMonths,
                             ...field('monthsValue'),
                             value: calculatorParams.monthsValue,
-                        }), jsx("div", { className: "mt-2xl", children: renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field) })] }), jsx(Rate, { rate: rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-96", children: [jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: income, postfix: "\u20BD", prefix: "+" }), jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" }), renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true }), renderFootnote(footnote)] })] }));
+                        }), jsx("div", { className: "flex flex-col gap-y-2xl", children: renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field) })] }), jsx("div", { className: "border-b border-main-divider mt-lg mb-2xl md:hidden" }), renderRate({
+                    rate,
+                }), jsxs("div", { className: "mt-2xl flex flex-col gap-y-2xl sm:w-96 sm:gap-y-0 sm:mt-0", children: [jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: income, postfix: "\u20BD", prefix: "+" }), jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" }), renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] })] }));
     });
     const renderDepositParamsForm = (params, field) => (jsxs("div", { className: "flex flex-col gap-y-2xl", children: [params.isShowMonthlyInterestPayment
                 ? renderInterestPayment({
@@ -2045,6 +2077,7 @@
                             max: calculatorParams.maxMonths,
                             ...field('monthsValue'),
                             value: calculatorParams.monthsValue,
+                            className: 'mt-2xl',
                         }), jsx("div", { className: style('mt-7', calculatorParams.isExtraMoney ? 'mb-3' : ''), children: renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field) }), calculatorParams.isExtraMoney
                             ? renderWantedSumInput({
                                 title: 'Дополнительная сумма, ₽ ',
@@ -2453,7 +2486,7 @@
         center: 'self-center',
         end: 'self-end',
     };
-    const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-3xl font-sans overflow-hidden', padding || defaultPadding, className), children: [title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: "grow relative flex flex-wrap @xl:flex-nowrap justify-between items-stretch gap-3xl", children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-3xl max-w-[600px] xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), backImage ? (jsx("div", { className: "mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4", children: backImage })) : null, buttons] }), renderImageContainer(rightImage, { className: '-order-1 @xl:order-1', imageAlign })] })] })));
+    const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-3xl font-sans overflow-hidden', padding || defaultPadding, className), children: [title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: "grow relative flex flex-wrap @xl:flex-nowrap justify-around @xl:justify-between items-stretch gap-3xl", children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-3xl max-w-[600px] xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), backImage ? (jsx("div", { className: "mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4", children: backImage })) : null, buttons] }), renderImageContainer(rightImage, { className: '-order-1 @xl:order-1', imageAlign })] })] })));
     const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
 
     const getItemListFontSize = (colValue) => (colValue === 1 ? 'text-h6' : 'text-l');
@@ -2519,11 +2552,60 @@
     const renderAdditionalDescription = (additionalDescription) => additionalDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", children: additionalDescription })) : null;
     const renderItems = (items, isDotted, version = 'primary') => items?.length ? (jsx(List, { className: style('text-s', version === 'primary' ? '!text-secondary-text' : ''), items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted, listItemSize: "S" })) : null;
 
-    const cardTitleFont = 'font-normal';
-    const cardDescriptionColor = 'text-secondary-text';
+    const sum = (list = []) => list.reduce((a, b) => a + b, 0);
+
+    const avg = (items = []) => (items?.length ? sum(items) / items.length : 0);
+
+    const deviation = (items) => items?.length ? Math.sqrt(Math.abs(avg(items.map((_) => _ ** 2)) - avg(items) ** 2)) : 0;
+
+    const renderBenefitIcon = (icon, benefitsVersion = 'normal') => icon ? (jsx("div", { className: style('w-12 h-12 min-w-12 box-border flex items-center justify-center rounded-icon', benefitsVersion === 'normal'
+            ? 'bg-secondary-light text-primary-main'
+            : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black'), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null;
+
+    const RichText = JSX((props) => {
+        const { __html = '', richVersion = '' } = props;
+        return (jsx("div", { className: style(richVersion, 'md-container'), dangerouslySetInnerHTML: { __html } }));
+    });
+
+    const renderBenefitDescription = (description, i) => description ? (jsx(Paragraph, { font: "font-light", size: "text-m", color: "text-secondary-text group-data-secondary:text-white", children: description }, `description-${i}`)) : null;
+
+    const renderBenefitLabel = (label, i) => label ? (jsx(Text, { color: "text-primary-text group-data-secondary:text-white", size: "text-h6", children: label }, `label-${i}`)) : null;
+
+    const renderBenefitText = (_, i) => _.type === 'rte' && '__html' in _ && _.__html ? (jsx(RichText, { ..._ }, `rte-${i}`)) : ([
+        'label' in _ ? renderBenefitLabel(_.label, i) : null,
+        'description' in _ ? renderBenefitDescription(_.description, i) : null,
+    ]);
+
+    const BenefitItem = JSX(({ className, benefitsVersion, ..._ }) => (jsxs("div", { className: style('flex gap-m', 'description' in _ && _.description ? 'items-start' : 'items-center', className), children: ['icon' in _ ? renderBenefitIcon(_.icon, benefitsVersion) : null, jsx("div", { children: renderBenefitText(_) })] })));
+
+    const MAX_BENEFITS_LEN_DEVIATION = 16;
+    const benefitLength = (_) => _.type === 'rte'
+        ? _?.__html?.length || 0
+        : Math.max(_?.label?.length || 0, _?.description?.length || 0);
+    const isDistortedBenefits = (benefits) => deviation(benefits.map(benefitLength)) > MAX_BENEFITS_LEN_DEVIATION;
+    const hasIcon = (_) => _ && 'icon' in _ && _.icon && (_.icon.icon || _.icon.src);
+    const isTextualBenefits = (benefits) => !benefits.some(hasIcon);
+    const DefaultBenefitsList = JSX(({ className, benefitsVersion = 'normal', benefits }) => benefits?.length ? (jsx("div", { className: style('flex gap-x-m gap-y-s', isDistortedBenefits(benefits) || isTextualBenefits(benefits) ? 'flex-col' : 'flex-wrap', className), children: benefits.map((_, i) => (jsx(BenefitItem, { benefitsVersion: benefitsVersion, ..._ }, String(i)))) })) : null);
+
+    const TabularBenefitsList = JSX(({ className, benefits }) => benefits?.length ? (jsx("div", { className: style('grid grid-cols-[max-content_1fr] auto-rows-auto items-baseline gap-x-m gap-y-xs', className), children: benefits.flatMap(renderBenefitText) })) : null);
+
+    const BenefitsList = JSX(({ isTabularBenefits, ...rest }) => isTabularBenefits ? jsx(TabularBenefitsList, { ...rest }) : jsx(DefaultBenefitsList, { ...rest }));
+
+    const Tags = JSX(({ className, tags }) => tags?.length ? (jsx("div", { className: style('flex flex-wrap gap-xs', className), role: "list", children: tags.map(renderTag) })) : null);
+    const renderTag = (tag, key) => (jsx("div", { className: "py-2 px-2.5 border-solid border rounded-md border-gray", role: "listitem", children: jsx(Text, { size: "text-m", font: "font-light", children: tag }) }, String(key)));
+
+    const BaseProductTile = JSX(({ className, padding, defaultPadding, title, description, headlineVersion = 'L', align = 'text-left', isInsetTitle = true, benefitsVersion, isTabularBenefits, benefits, __html, items, isDotted = true, listItemSize, tags, buttons, image, imageOptions: { imageAlign = 'end', directionRight = true, isBackground } = {}, children, }) => {
+        const img = image?.src ? jsx(Img, { image: image }) : null;
+        const headline = (jsx(Headline, { title: title, description: description, headlineVersion: headlineVersion, align: align, isPadding: false }));
+        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isInsetTitle ? { insetTitle: headline } : { title: headline }), ...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight)), imageAlign: imageAlign, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col gap-xl", children: [jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: benefits }), __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, tags?.length ? jsx(Tags, { tags: tags }) : null] }) }));
+    });
+    const leftOrRightImage = (img, directionRight) => directionRight ? { rightImage: img } : { leftImage: img };
 
-    const CarouselProgramsCard = JSX(({ className, title, icon, list = [], href, target, ...rest }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-3xl sm:p-0", ...rest, children: jsxs(LinkWrapper, { className: "sm:flex sm:items-center", href: href, target: target, children: [jsx("div", { className: "flex justify-center px-xl", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }), jsxs("div", { className: "sm:px-s p-5xl", children: [title ? jsx(Heading, { className: "mb-xs sm:mb-m", headingType: "h6", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-xs sm:gap-s", children: list?.map(renderList$2) })) : null] })] }) })));
-    const renderList$2 = (_, i) => (jsxs("div", { className: "flex flex-row-reverse justify-between gap-y-2xs sm:flex-col", children: [_.title ? (jsx(Text, { size: "text-l", font: cardTitleFont, children: _.title })) : null, _.description ? (jsx(Paragraph, { size: "text-l", font: "font-light", color: cardDescriptionColor, children: _.description })) : null] }, String(i)));
+    const CarouselProgramsCard = JSX(({ className, title, icon, list, href, target, ...rest }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-3xl", ...rest, children: jsx(LinkWrapper, { className: "flex items-center h-full", href: href, target: target, children: jsx(BaseProductTile, { title: title, headlineVersion: "XS", image: icon, imageOptions: { directionRight: false, imageAlign: 'center' }, benefits: list?.map((_) => ({
+                    type: 'default',
+                    label: _.title,
+                    description: _.description,
+                })) }) }) })));
 
     const buttonSizeStyles = {
         default: 'w-14 h-14',
@@ -2583,11 +2665,6 @@
         return (jsx(BlockWrapper, { className: style('relative min-h-[218px] group-data-gray:bg-main-divider/50', className), defaultPadding: "p-0", ...rest, children: jsx(LinkWrapper, { href: href, target: target, className: "h-full", children: jsx(BaseTile, { className: "h-full", defaultPadding: "p-m", padding: padding, title: title ? (jsx(Headline, { title: title, description: description, headlineVersion: "S", isPadding: false, align: align })) : null, backImage: icon?.icon || icon?.src ? jsx(Img, { image: icon }) : null, buttons: socialMedia.length ? jsx(SocialMedia, { media: socialMedia }) : null, children: items.length ? jsx(List, { items: items, listItemSize: "S" }) : null }) }) }));
     });
 
-    const RichText = JSX((props) => {
-        const { __html = '', richVersion = '' } = props;
-        return (jsx("div", { className: style(richVersion, 'md-container'), dangerouslySetInnerHTML: { __html } }));
-    });
-
     const CarouselRichTextCard = JSX(({ className = '', __html, richVersion = 'striped', ...rest }) => (jsx(BlockWrapper, { className: className, ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) })));
 
     const Foldable = JSX(({ className = '', isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
@@ -2758,8 +2835,8 @@
         const [visibleBlocks, hiddenBlocks] = topItemsCount > 0
             ? [blocksToRender.slice(0, topItemsCount), blocksToRender.slice(topItemsCount)]
             : [blocksToRender, []];
-        return (jsxs("div", { children: [jsx("div", { className: style(blocksToRender.length ? 'hidden' : 'block'), children: notFound ? renderNotFound(notFound) : null }), jsxs("div", { className: style(blocksToRender.length ? '' : 'hidden'), children: [jsx("div", { className: style('mb-1', resultsGridStyle), children: renderBlocksList(visibleBlocks, { ...rest.options, parent: block }) }), jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => {
-                                return (jsx(FoldableSection, { className: style(resultsGridStyle, isUnfolded ? 'mb-1' : ''), isUnfolded: isUnfolded, children: renderBlocksList(hiddenBlocks, { ...rest.options, parent: block }) }));
+        return (jsxs("div", { children: [jsx("div", { className: style(blocksToRender.length ? 'hidden' : 'block'), children: notFound ? renderNotFound(notFound) : null }), jsxs("div", { className: style(blocksToRender.length ? '' : 'hidden'), children: [jsx("div", { className: style('mb-2xs', resultsGridStyle), children: renderBlocksList(visibleBlocks, { ...rest.options, parent: block }) }), jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => {
+                                return (jsx(FoldableSection, { className: style(resultsGridStyle, isUnfolded ? 'mb-2xs' : ''), isUnfolded: isUnfolded, children: renderBlocksList(hiddenBlocks, { ...rest.options, parent: block }) }));
                             }, renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(DefaultFoldButton, { className: style(topItemsCount < 1 ? 'hidden' : ''), disabled: !hiddenBlocks?.length, label: label, icon: ICONS[Number(isUnfolded)], dataTheme: rest.options?.page?.colorPalette, onClick: onToggle })) })] })] }));
     });
     function renderNotFound({ title, description }) {
@@ -2782,7 +2859,7 @@
         return items.map((item) => (jsx(SlideCheckbox, { text: item.title, value: [value].flatMap((_) => _).includes(item.value), onChange: () => handleChange(item.value), type: multiple ? 'checkbox' : 'radio' }, item.value)));
     });
 
-    const renderFiltrationForm = ({ field, reset, filtrationSchema, resetButton, children, }) => (jsxs("form", { className: "flex justify-between bg-white p-9 mb-1", children: [jsxs("div", { className: "flex gap-11", children: [children, Object.entries(filtrationSchema).map(renderFormItem(field))] }), resetButton ? (jsx("div", { children: jsx(Button, { className: "w-72 ml-3", onClick: reset, ...resetButton }) })) : null] }));
+    const renderFiltrationForm = ({ field, reset, filtrationSchema, resetButton, children, }) => (jsxs("form", { className: "flex justify-between bg-white p-4xl mb-2xs", children: [jsxs("div", { className: "flex gap-5xl", children: [children, Object.entries(filtrationSchema).map(renderFormItem(field))] }), resetButton ? (jsx("div", { children: jsx(Button, { className: "w-72 ml-s", onClick: reset, ...resetButton }) })) : null] }));
     const renderFormItem = (field) => ([key, item]) => {
         const type = item?.type;
         switch (type) {
@@ -2795,7 +2872,7 @@
     const renderCheckboxes = (key, field) => (item) => {
         const options = item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
             [];
-        return (jsxs("div", { children: [item?.title ? (jsx("div", { className: "mb-4", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: item.title }) })) : null, jsx(SlideCheckboxGroup, { items: options, multiple: true, ...field(key) })] }, key));
+        return (jsxs("div", { children: [item?.title ? (jsx("div", { className: "mb-m", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: item.title }) })) : null, jsx(SlideCheckboxGroup, { items: options, multiple: true, ...field(key) })] }, key));
     };
 
     const initialFiltrationState$1 = {
@@ -3172,8 +3249,6 @@
         return acc;
     };
 
-    const sum = (list = []) => list.reduce((a, b) => a + b, 0);
-
     const MIN_TERM_LEN = 3;
     const tokenize = (text) => text
         .toLowerCase()
@@ -3828,13 +3903,78 @@
 
     const MobileAppTile = JSX(({ className, padding, alignTitle = 'left', buttons = [], description, headingType = 'h4', image, items, qr, title = 'Мобильное приложение', version = 'primary', ...rest }) => {
         const containerStyle = version === 'secondary' ? 'p-m min-w-32' : 'min-w-24';
-        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', AlignText[alignTitle]) })) : null, buttons: renderButtonsSection(buttons, { isVertical: buttons.length > 4 }), children: [renderDescription$1(description), jsxs("div", { className: "flex flex-1 flex-wrap gap-m items-center", children: [qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList$1(items), image?.src ? jsx(Img, { 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', AlignText[alignTitle]) })) : null, rightImage: image?.src ? jsx(Img, { className: "hidden lg:block", image: image }) : null, buttons: renderButtonsSection(buttons, { isVertical: buttons.length > 4 }), children: [renderDescription$1(description), jsxs("div", { className: "flex flex-1 flex-wrap gap-m items-center", children: [qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList$1(items), image?.src ? jsx(Img, { className: "lg:hidden", image: image }) : null] })] }) }));
     });
 
-    const initialFiltrationState = {};
-    const MortgageFiltration = JSX(({ className, filtrationSchema = {}, resetButton, ...rest }) => {
-        const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
-        return (jsxs(BlockWrapper, { className: style(className), defaultPadding: "p-0", version: "transparent", ...rest, children: [renderFiltrationForm({ field, reset, filtrationSchema, resetButton }), jsx(BaseFiltrationInner, { filtrationState: filtrationState, ...rest })] }));
+    const tabPaddingStyleMap = {
+        default: 'px-xs',
+        underlined: 'px-m',
+        rounded: 'px-lg rounded-md',
+    };
+    const tabTextStyle = 'text-secondary-text hover:text-primary-main';
+    const activeTabTextStyleMap = {
+        default: 'text-black sm:text-white',
+        underlined: 'text-primary-main border-b-2',
+        rounded: 'text-white',
+    };
+    const tabBgStyleMap = {
+        default: 'bg-white',
+        underlined: 'bg-white',
+        rounded: 'bg-transparent',
+    };
+    const activeTabBgStyleMap = {
+        default: 'sm:bg-primary-main',
+        underlined: 'bg-white',
+        rounded: 'bg-primary-main',
+    };
+    const TabItem = JSX(({ item = {}, isActive, onClick, type = 'default' }) => {
+        const link = useLink();
+        const handleClick = () => {
+            onClick && onClick(item);
+        };
+        const { text, ...linkProps } = link({ ...item, onClick: handleClick });
+        const Tag = item.href ? 'a' : 'div';
+        return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), role: "tab", "aria-selected": isActive, ...linkProps, children: jsx("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), children: jsx(Text, { size: "text-m", children: text }) }) }));
+    });
+
+    const renderTab = (activeTab, onClick, type) => (tab, i) => (jsx(TabItem, { isActive: tab === activeTab, onClick: onClick, type: type, item: tab }, String(i)));
+
+    const TabsControl = JSX(({ className, tabsType = 'default', items = [], value, onChange }) => (jsx("div", { className: style('flex gap-x-2xs overflow-x-auto no-scrollbar', className), role: "tablist", children: items.map(renderTab(value, onChange, tabsType)) })));
+
+    const scalarCmp = (a, b) => a === b;
+    const arrCmp = (cmp = scalarCmp) => (a, b) => a === b || Boolean(a && b && a.length === b.length && a.every((_, i) => cmp(_, b[i])));
+    const objCmp = (cmp) => (a, b) => a === b ||
+        Boolean(a &&
+            b &&
+            Object.keys(a).length === Object.keys(b).length &&
+            Object.entries(a).every(([key, value]) => cmp(value, b[key])));
+    function combineBoolCmps(...comparators) {
+        return (a, b) => comparators.some((cmp) => cmp(a, b));
+    }
+
+    const hotFilterRecordCmp = objCmp(combineBoolCmps(scalarCmp, arrCmp()));
+
+    const initialFiltrationState = {
+        categories: [],
+        extraOptions: [],
+        propertyType: [],
+        stage: [],
+    };
+    const MortgageFiltration = JSX(({ className, hotFilters = [], filtrationSchema = {}, resetButton, ...rest }) => {
+        const [filtrationState, { field, reset, update: replaceFiltrationState }] = useForm(initialFiltrationState);
+        const normalizedHotFilters = useMemo(() => hotFilters.map(({ text }) => ({
+            text,
+        })), [hotFilters]);
+        const [hotFilterIndex, setHotFilterIndex] = useState(0);
+        const handleHotFilterSelect = useCallback((_) => {
+            setHotFilterIndex(normalizedHotFilters.indexOf(_));
+            replaceFiltrationState(hotFilters[normalizedHotFilters.indexOf(_)].filter || initialFiltrationState);
+        }, [normalizedHotFilters]);
+        useEffect(() => {
+            const suggestedHotFilterIndex = hotFilters.findIndex((_) => hotFilterRecordCmp(_.filter, filtrationState));
+            setHotFilterIndex(suggestedHotFilterIndex !== -1 ? suggestedHotFilterIndex : 0);
+        }, [hotFilters, filtrationState]);
+        return (jsxs(BlockWrapper, { className: style(className), defaultPadding: "p-0", version: "transparent", ...rest, children: [jsx(TabsControl, { className: "mb-2xs", items: normalizedHotFilters, value: normalizedHotFilters[hotFilterIndex], onChange: handleHotFilterSelect }), renderFiltrationForm({ field, reset, filtrationSchema, resetButton }), jsx(BaseFiltrationInner, { filtrationState: filtrationState, ...rest })] }));
     });
     MortgageFiltration.childrenTypes = ['ProductTile'];
     MortgageFiltration.childSchema = (content) => content?.filtrationSchema || {};
@@ -4197,46 +4337,6 @@
 
     const ParagraphBlock = JSX(({ text, size, align, font, children, ...rest }) => (jsx(BlockWrapper, { defaultPadding: "p-0", ...rest, children: jsx(Paragraph, { size: size, align: align, font: font, children: text || children }) })));
 
-    const avg = (items = []) => (items?.length ? sum(items) / items.length : 0);
-
-    const deviation = (items) => items?.length ? Math.sqrt(Math.abs(avg(items.map((_) => _ ** 2)) - avg(items) ** 2)) : 0;
-
-    const renderBenefitIcon = (icon, benefitsVersion = 'normal') => icon ? (jsx("div", { className: style('w-12 h-12 min-w-12 box-border flex items-center justify-center rounded-icon', benefitsVersion === 'normal'
-            ? 'bg-secondary-light text-primary-main'
-            : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black'), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null;
-
-    const renderBenefitDescription = (description, i) => description ? (jsx(Paragraph, { font: "font-light", size: "text-m", color: "text-secondary-text group-data-secondary:text-white", children: description }, `description-${i}`)) : null;
-
-    const renderBenefitLabel = (label, i) => label ? (jsx(Text, { color: "text-primary-text group-data-secondary:text-white", size: "text-h6", children: label }, `label-${i}`)) : null;
-
-    const renderBenefitText = (_, i) => _.type === 'rte' && '__html' in _ && _.__html ? (jsx(RichText, { ..._ }, `rte-${i}`)) : ([
-        'label' in _ ? renderBenefitLabel(_.label, i) : null,
-        'description' in _ ? renderBenefitDescription(_.description, i) : null,
-    ]);
-
-    const BenefitItem = JSX(({ className, benefitsVersion, ..._ }) => (jsxs("div", { className: style('flex gap-m', 'description' in _ && _.description ? 'items-start' : 'items-center', className), children: ['icon' in _ ? renderBenefitIcon(_.icon, benefitsVersion) : null, jsx("div", { children: renderBenefitText(_) })] })));
-
-    const MAX_BENEFITS_LEN_DEVIATION = 16;
-    const benefitLength = (_) => _.type === 'rte'
-        ? _.__html?.length || 0
-        : Math.max(_.label?.length || 0, _.description?.length || 0);
-    const isDistortedBenefits = (benefits) => deviation(benefits.map(benefitLength)) > MAX_BENEFITS_LEN_DEVIATION;
-    const DefaultBenefitsList = JSX(({ className, benefitsVersion = 'normal', benefits }) => benefits?.length ? (jsx("div", { className: style('flex gap-x-m gap-y-s', isDistortedBenefits(benefits) ? 'flex-col' : 'flex-wrap', className), children: benefits.map((_, i) => (jsx(BenefitItem, { benefitsVersion: benefitsVersion, ..._ }, String(i)))) })) : null);
-
-    const TabularBenefitsList = JSX(({ className, benefits }) => benefits?.length ? (jsx("div", { className: style('grid grid-cols-[max-content_1fr] auto-rows-auto items-baseline gap-x-m gap-y-xs', className), children: benefits.flatMap(renderBenefitText) })) : null);
-
-    const BenefitsList = JSX(({ isTabularBenefits, ...rest }) => isTabularBenefits ? jsx(TabularBenefitsList, { ...rest }) : jsx(DefaultBenefitsList, { ...rest }));
-
-    const Tags = JSX(({ className, tags }) => tags?.length ? (jsx("div", { className: style('flex flex-wrap gap-xs', className), role: "list", children: tags.map(renderTag) })) : null);
-    const renderTag = (tag, key) => (jsx("div", { className: "py-2 px-2.5 border-solid border rounded-md border-gray", role: "listitem", children: jsx(Text, { size: "text-m", font: "font-light", children: tag }) }, String(key)));
-
-    const BaseProductTile = JSX(({ className, padding, defaultPadding, title, description, headlineVersion = 'L', align = 'text-left', isInsetTitle = true, benefitsVersion, isTabularBenefits, benefits, __html, items, isDotted = true, listItemSize, tags, buttons, image, imageOptions: { imageAlign = 'end', directionRight = true, isBackground } = {}, children, }) => {
-        const img = image?.src ? jsx(Img, { image: image }) : null;
-        const headline = (jsx(Headline, { title: title, description: description, headlineVersion: headlineVersion, align: align, isPadding: false }));
-        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isInsetTitle ? { insetTitle: headline } : { title: headline }), ...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight)), imageAlign: imageAlign, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col gap-xl", children: [jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: benefits }), __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, tags?.length ? jsx(Tags, { tags: tags }) : null] }) }));
-    });
-    const leftOrRightImage = (img, directionRight) => directionRight ? { rightImage: img } : { leftImage: img };
-
     const renderInsuranceSumMonth = (sum, monthLimit) => sum || monthLimit ? (jsxs("div", { className: "flex flex-wrap xl:flex-nowrap xl:bg-main-divider xl:rounded-md p-xs gap-xl", children: [Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum) : null, Number(monthLimit) > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit) : null] })) : null;
     const renderValueBlock = (title, value = 0) => (jsxs("div", { className: "basis-full flex flex-col-reverse sm:flex-row sm:justify-between items-baseline whitespace-pre", children: [jsx(Text, { font: "font-light", size: "text-l", children: title }), jsxs(Text, { size: "text-h6", color: "text-primary-text", children: [toLocalNumberFormat(2)(value), " \u20BD"] })] }));
 
@@ -4343,7 +4443,7 @@
         })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
     const renderPrimaryFoldButton = ({ label, labelIconBgVersion, icon, onToggle, labelIcon, }) => {
-        return (jsxs("button", { className: style('border-none bg-transparent flex justify-between items-center w-full group/button', labelIcon?.icon ? 'py-xs' : 'py-lg'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main gap-s", children: [renderRoundedIcon(), label ? (jsx(Text, { size: "text-h6", font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
+        return (jsxs("button", { className: style('border-none bg-transparent flex justify-between items-center w-full group/button', labelIcon?.icon ? 'py-xs' : 'py-lg'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center text-start group-hover/button:text-primary-main gap-s", children: [renderRoundedIcon(), label ? (jsx(Text, { size: "text-h6", font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
     };
 
     const WrapperSelect = JSX(({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label }) => {
@@ -4543,110 +4643,30 @@
         exclude: ['SwipeListControlBlock'],
     };
 
-    function assertUnreachable(x) {
-        throw new Error(x);
-    }
-
-    const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
-    const INACTIVE_LINK_CLASSES = 'group/btn bg-white';
-    const SCROLLABLE_ACTIVE_LINK_CLASSES = 'bg-white text-primary-main';
-    const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
-    const TEXT_CLASSES = 'font-sans text-m text-center';
-    const ACTIVE_TEXT_CLASSES = 'text-white';
-    const INACTIVE_TEXT_CLASSES = 'text-secondary-text sm:group-hover/btn:text-primary-main';
-    const TAB_CLASSES = {
-        block: {
-            scrollable: {
-                active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
-                default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
-            },
-            centered: {
-                active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
-                default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
-            },
-            wideScreen: {
-                active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
-                default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES} whitespace-nowrap`,
-            },
-        },
-        text: {
-            scrollable: {
-                active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2`,
-                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
-            },
-            centered: {
-                active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
-                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
-            },
-            wideScreen: {
-                active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES} text-black px-2.5 bg-white sm:bg-primary-main sm:text-white`,
-                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES} px-2.5 bg-white`,
-            },
-        },
-    };
-    const getTabClassName = (type, active, tabsMode) => {
-        const styleActive = active ? 'active' : 'default';
-        const mode = tabsMode || 'wideScreen';
-        return TAB_CLASSES[type][mode][styleActive];
-    };
-
-    const LinkTab = JSX((props) => {
-        const { tab, currentTab, onClick, tabsMode } = props;
-        const active = currentTab?.type === 'link' && currentTab.href === tab.href;
-        const link = useLink();
-        const adjustedProps = link(tab);
-        const handleClick = (ev) => {
-            adjustedProps.onClick(ev);
-            onClick(tab);
-        };
-        return (jsx("div", { className: getTabClassName('block', active, tabsMode), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsx("a", { role: "tab", className: style('flex flex-1 items-center justify-center h-full', getTabClassName('text', active, tabsMode)), target: tab.target, href: adjustedProps.href, onClick: handleClick, children: jsx("span", { children: tab.text }) }) }));
+    const scrollButtonStyle = 'hidden sm:flex absolute z-40 top-0';
+    const ScrollableTabsControl = JSX(({ className, items = [], value, onChange, tabsType }) => {
+        const [containerRef, scroll] = useSwipeListScroll({
+            itemCount: items?.length || 0,
+        });
+        return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), role: "tablist", children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: items.map(renderTab(value, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: style('left-6', scrollButtonStyle), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: style('right-6', scrollButtonStyle), onClick: scroll.scrollRight })) : null] }));
     });
 
-    const BADGE_CLASSES = 'bg-main-divider min-w-[22px] h-[22px] rounded-full text-xs ml-xs flex justify-center items-center';
-    const LIGHT_BADGE_CLASSES = 'bg-white/30 text-white';
-    const DARK_BADGE_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
-    const renderGroupTab = ({ page, currentTab, showCounter, onClick, tabsMode }) => (tab, i) => {
-        const active = currentTab === tab;
-        const count = tab.ref && page?.blocks
-            ? page.blocks.filter((block) => block?.labels?.includes(tab.ref)).length
-            : 0;
-        return (jsx("div", { className: getTabClassName('block', active, tabsMode), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: style('flex flex-1 items-center justify-center h-full', getTabClassName('text', active, tabsMode)), children: [jsx("span", { children: tab.title }), showCounter && count ? renderCount(tabsMode, count, active) : null] }) }, `group-${String(i)}`));
-    };
-    const renderCount = (tabsMode, count, active) => {
-        return (jsx("div", { className: style(BADGE_CLASSES, active && tabsMode !== 'scrollable' ? LIGHT_BADGE_CLASSES : DARK_BADGE_CLASSES), children: count }));
-    };
-
-    const renderTab = ({ page, showCounter, ...rest }) => (tab, i) => {
-        const type = tab.type;
-        if (!(type === 'group' || type === 'link')) {
-            return null;
-        }
-        switch (type) {
-            case 'group':
-                return renderGroupTab({ page, showCounter, ...rest })(tab, i);
-            case 'link': {
-                return jsx(LinkTab, { tab: tab, ...rest }, String(i));
-            }
+    const renderTabs = ({ tabsMode, ...props }) => {
+        switch (tabsMode) {
+            case 'wideScreen':
+                return jsx(TabsControl, { ...props });
+            case 'centered':
+                return (jsx("div", { className: "flex", children: jsx(TabsControl, { className: "m-auto p-xs rounded-md bg-main-gray", tabsType: "rounded", ...props }) }));
+            case 'scrollable':
+                return (jsx("div", { className: "flex", children: jsx(ScrollableTabsControl, { className: "m-auto", tabsType: "underlined", ...props }) }));
             default:
-                assertUnreachable(type);
+                return null;
         }
-        return null;
     };
 
-    const CenteredTabs = JSX(({ tabs, ...rest }) => (jsx("div", { className: "flex p-1 m-auto bg-main-gray rounded-md", children: tabs?.map(renderTab({ ...rest })) })));
-
-    const scrollButtonStyle = 'absolute z-40 top-0';
-    const ScrollableTabs = JSX((props) => {
-        const { tabs, ...rest } = props;
-        const [containerRef, scroll] = useSwipeListScroll({
-            itemCount: tabs?.length || 0,
-        });
-        return (jsxs("div", { className: "relative max-w-full m-auto", children: [jsx("div", { className: `font-sans max-w-full w-full overflow-hidden relative bg-white`, children: jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: tabs?.map(renderTab({ ...rest })) }) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-6`, onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle} rotate-180 right-6`, onClick: scroll.scrollRight })) : null] }));
-    });
-
-    const Tabs = JSX((props) => {
-        const { className = '', isSticky, tabs, ...rest } = props;
-        const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
+    const Tabs = JSX(({ className = '', isSticky, tabs = [], tabsMode, ...rest }) => {
+        const normalizedTabs = useMemo(() => tabs.map(normalizeTab), [tabs]);
+        const [activeTabIndex, setActiveTabIndex] = useState(0);
         useEffect(() => {
             if (!tabs || !tabs[0]) {
                 return;
@@ -4654,27 +4674,23 @@
             fireTabEvent(tabs[0]);
         }, []);
         useEffect(() => {
-            if (currentTab?.type === 'group') {
-                defaultEventBus.subject('tab', { type: currentTab.type, label: currentTab.ref });
+            const activeTab = tabs[activeTabIndex];
+            if (activeTab?.type === 'group') {
+                defaultEventBus.subject('tab', { type: activeTab.type, label: activeTab.ref });
             }
-        }, [currentTab]);
-        const handleClick = useCallback((selectedTab) => {
-            fireTabEvent(selectedTab);
-            setCurrentTab(selectedTab);
+        }, [tabs, activeTabIndex]);
+        const handleChange = useCallback((_) => {
+            const index = normalizedTabs.indexOf(_);
+            setActiveTabIndex(index);
+            fireTabEvent(tabs[index]);
         }, []);
-        return (jsx(BlockWrapper, { className: style('relative box-border flex gap-x-1 w-full overflow-x-auto no-scrollbar', isSticky ? 'sticky top-1 z-20' : '', className), defaultPadding: "p-0", role: "tablist", ...rest, children: renderTabs({ tabs, onClick: handleClick, currentTab, ...rest }) }));
+        return (jsx(BlockWrapper, { className: style(isSticky ? 'sticky top-1 z-20' : '', className), defaultPadding: "p-0", ...rest, children: renderTabs({
+                items: normalizedTabs,
+                onChange: handleChange,
+                value: normalizedTabs[activeTabIndex],
+                tabsMode,
+            }) }));
     });
-    const renderTabs = ({ tabsMode, tabs, ...rest }) => {
-        switch (tabsMode) {
-            case 'wideScreen':
-                return tabs?.map(renderTab({ tabsMode, ...rest }));
-            case 'centered':
-                return jsx(CenteredTabs, { tabs: tabs, tabsMode: tabsMode, ...rest });
-            case 'scrollable':
-                return jsx(ScrollableTabs, { tabs: tabs, tabsMode: tabsMode, ...rest });
-        }
-        return null;
-    };
     const fireTabEvent = (tab) => {
         if (tab.type === 'group') {
             defaultEventBus.fire('tab', { type: tab.type, label: tab.ref });
@@ -4683,6 +4699,7 @@
             defaultEventBus.fire('tab', { type: tab.type, label: tab.href });
         }
     };
+    const normalizeTab = (_) => (_?.type === 'group' ? { text: _.title } : _);
 
     const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
     const FIRST_CELL_CLASSES = 'w-[354px] flex-shrink-0';
@@ -5030,6 +5047,10 @@
         return [list, { setList, push, pop, remove, clear }];
     }
 
+    function assertUnreachable(x) {
+        throw new Error(x);
+    }
+
     const DialogManager = JSX(() => {
         const [dialogs, { push, pop, clear }] = useList();
         const closeAll = useCallback(() => {
@@ -5141,7 +5162,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.12.14";
+    const packageVersion = "0.13.0";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;