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

package/mobile/bundle/bundle.umd.js

@@ -394,6 +394,10 @@
                 onChange: handlersMap.current[fieldName],
             };
         }, [formState, isDirtyForm, dirtyFieldsMap]);
+        const update = useCallback((_) => {
+            setFormState(_);
+            setDirtyFieldsMap(_);
+        }, []);
         const reset = useCallback(() => {
             setFormState(initialState);
             setDirtyForm(false);
@@ -409,6 +413,7 @@
             {
                 isDirty: isDirtyForm || Object.values(dirtyFieldsMap).some(Boolean),
                 field,
+                update,
                 reset,
                 onSubmit: handleSubmit,
             },
@@ -505,16 +510,17 @@
         return await response.json();
     }
 
-    const REGIONS_URL$1 = '/api/v1/regions';
+    const REGIONS_URL = '/api/v1/regions';
     const EMPTY_VALUE$3 = [];
     function useGetRegions() {
-        const { data } = useAsyncData(REGIONS_URL$1, fetchJSONUnsafe);
+        const { data } = useAsyncData(REGIONS_URL, fetchJSONUnsafe);
         return data || EMPTY_VALUE$3;
     }
 
-    const useDialog = (id = '') => ({
-        open: (message) => defaultEventBus.fire('dialog', { type: 'open', id, message }),
+    const useDialogManager = () => ({
+        open: (dialog, options = {}) => defaultEventBus.fire('dialog', { type: 'open', dialog, ...options }),
         close: () => defaultEventBus.fire('dialog', { type: 'close' }),
+        closeAll: () => defaultEventBus.fire('dialog', { type: 'close', all: true }),
     });
 
     const dirname = (path) => path?.split('/').slice(0, -1).join('/');
@@ -576,7 +582,7 @@
     function useLink(params = {}) {
         const { isRemote, basePath } = params;
         const router = useRouter();
-        const { close } = useDialog();
+        const { closeAll } = useDialogManager();
         return (props) => ({
             ...props,
             href: isRemote && !basePath ? props.href : adjustHref(router)(props.href, basePath),
@@ -590,7 +596,7 @@
                     // Default routing
                     return;
                 }
-                close();
+                closeAll();
                 // Client routing
                 ev?.preventDefault();
                 router.push(href);
@@ -869,7 +875,7 @@
 
     const renderBusinessCardDataOrganization = (field) => (jsxs("div", { className: "sm:flex sm:justify-between sm:gap-5", children: [jsxs("div", { className: "sm:w-1/2", children: [jsx(InputControl, { className: "shrink-0 w-full mb-3", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", ...withValidator(field('name'), nameValidator) }), jsx(InputControl, { className: "shrink-0 w-full mb-3", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) })] }), jsxs("div", { className: "sm:w-1/2", children: [jsx(PhoneInputControl, { className: "shrink-0 w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) }), jsx(InputControl, { className: "shrink-0 w-full mb-3", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...withValidator(field('mail'), defaultValidator) })] })] }));
 
-    const renderRegion$1 = ({ regions, field }) => (jsx("div", { className: "w-full mb-3 sm:mb-5", children: jsx(SelectControl, { label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }) }));
+    const renderRegion = ({ regions, field }) => (jsx("div", { className: "w-full mb-3 sm:mb-5", children: jsx(SelectControl, { label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }) }));
 
     const initialFormState$3 = {
         name: '',
@@ -900,7 +906,7 @@
         }, [onSubmit]);
         const [, { field, ...formProps }] = useForm(initialFormState$3, handleSubmit);
         const regions = useGetRegions();
-        return (jsxs("form", { className: "container", onSubmit: formProps.onSubmit, children: [renderRegion$1({ regions, field }), renderBusinessCardDataOrganization(field), renderSubmitButton(button, 'mb-4'), jsx(Footnote, { link: link })] }));
+        return (jsxs("form", { className: "container", onSubmit: formProps.onSubmit, children: [renderRegion({ regions, field }), renderBusinessCardDataOrganization(field), renderSubmitButton(button, 'mb-4'), jsx(Footnote, { link: link })] }));
     });
 
     const BRANCHES_URL = '/api/v1/branches';
@@ -1055,10 +1061,8 @@
     });
 
     const EMPTY_VALUE$1 = {};
-    function useSWRResource(filename, fallback = {}) {
-        const { data } = useAsyncData(`/wcms-resources/${filename}.json`, fetchJSONUnsafe, {
-            fallback,
-        });
+    function useSWRResource(filename, fallback = EMPTY_VALUE$1) {
+        const { data } = useAsyncData(filename ? `/wcms-resources/${filename}.json` : null, fetchJSONUnsafe, { fallback });
         return data || EMPTY_VALUE$1;
     }
 
@@ -1321,7 +1325,7 @@
         return (jsx("div", { className: `inline-block snap-always box-border ${className}`, style: style, "aria-current": Boolean(idx === activeIndex), ref: ref, children: children }));
     });
 
-    const childStyleMap = ['min-w-full', 'min-w-1/2', 'min-w-1/3', 'min-w-1/4'];
+    const childStyleMap = ['min-w-full', '@lg:min-w-[50%]', '@lg:min-w-[33.3%]', '@lg:min-w-[25%]'];
     const SwipeListContainer = JSX(({ className = '', containerRef, activeIndex, visibleItemCount = 0, gap = 0, padding = 0, listType = 'horizontal-list', snapAlign = 'snap-center', minHeight, children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
         const observerOptions = {
             sensitivity: 1,
@@ -1386,6 +1390,7 @@
     const max = maxBy();
 
     const minBy = (discriminator = defaultDiscriminator) => maxBy((_) => -discriminator(_));
+    const min = minBy();
 
     const getItemWidth = (container) => (itemCount) => container.scrollWidth / itemCount;
     const scrollBy = (container) => (itemCount, delta) => {
@@ -1488,6 +1493,753 @@
 
     const ButtonsBlock = JSX(({ buttons, className, ...rest }) => (jsx(BlockWrapper, { className: style('!bg-transparent', className), defaultPadding: "p-0", ...rest, children: renderButtonsSection(buttons) })));
 
+    const Foldable = JSX(({ className = '', isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
+        const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
+        const onToggle = useCallback(() => {
+            setIsUnfolded((_) => !_);
+        }, []);
+        const sectionNode = renderFoldableSection({ isUnfolded, onToggle });
+        const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
+        return isFoldButtonOnTop ? (jsxs("div", { className: className, children: [buttonNode, sectionNode] })) : (jsxs("div", { className: className, children: [sectionNode, buttonNode] }));
+    });
+
+    const FoldableSection = JSX(({ className = '', isUnfolded, children }) => {
+        const containerRef = useRef(null);
+        useEffect(() => {
+            if (containerRef.current) {
+                containerRef.current.style.maxHeight = isUnfolded
+                    ? `${containerRef.current.scrollHeight}px`
+                    : '';
+            }
+        }, [isUnfolded, children?.length]);
+        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} ${className}`, children: 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 = 10000;
+    const DEFAULT_MAX_SUM = 5000000;
+    const CREDIT_DEFAULT_SUM = 200000;
+    const REFINANCING_DEFAULT_SUM = 700000;
+    const REFINANCING_DEFAULT_MAX_SUM = 3000000;
+    const REFINANCING_OLD_MIN_SUM = 0;
+    const REFINANCING_OLD_DEFAULT_SUM = 0;
+    const REFINANCING_OLD_MAX_SUM = 2500000;
+    const REFINANCING_EXTRA_MIN_SUM = 0;
+    const REFINANCING_EXTRA_MAX_SUM = 500000;
+    const DEPOSIT_DEFAULT_SUM = 20000;
+    const DEFAULT_MIN_MONTHS = 13;
+    const DEFAULT_REFINANCING_MIN_MONTHS = 13;
+    const DEFAULT_REFINANCING_MONTHS = 48;
+    const DEFAULT_MAX_MONTHS = 60;
+    const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS - DEFAULT_MIN_MONTHS) / 2);
+    const BUSINESS_DEFAULT_SUM = 100000;
+    const BUSINESS_MIN_DAYS = 1;
+    const BUSINESS_MAX_DAYS = 1095;
+    const BUSINESS_RATE_MIN_DAYS = 30; // порог количества дней, при которых ставка не доступна
+    const BUSINESS_OPERATING_MIN_DAYS = 90;
+    const BUSINESS_OPERATING_MAX_DAYS = 730;
+    const BUSINESS_DEFAULT_DAYS = 90;
+    const MONTHS_IN_YEAR = 12;
+    const MONTHLY_INTEREST_RATE = MONTHS_IN_YEAR * 100;
+    const DEFAULT_CREDIT_CALCULATOR_PARAMS = {
+        minSum: DEFAULT_MIN_SUM,
+        maxSum: DEFAULT_MAX_SUM,
+        minMonths: DEFAULT_MIN_MONTHS,
+        maxMonths: DEFAULT_MAX_MONTHS,
+        rate: 12.5,
+        isSalaryClient: false,
+        isPensionClient: false,
+        isStateEmployee: false,
+        isInsurance: true,
+    };
+    const DEFAULT_REFINANCING_CALCULATOR_PARAMS = {
+        minSum: DEFAULT_MIN_SUM,
+        maxSum: REFINANCING_DEFAULT_MAX_SUM,
+        minSumOld: REFINANCING_OLD_MIN_SUM,
+        maxSumOld: REFINANCING_OLD_MAX_SUM,
+        minSumExtra: REFINANCING_EXTRA_MIN_SUM,
+        maxSumExtra: REFINANCING_EXTRA_MAX_SUM,
+        minMonths: DEFAULT_REFINANCING_MIN_MONTHS,
+        maxMonths: DEFAULT_MAX_MONTHS,
+        rate: 7.5,
+        isExtraMoney: false,
+        isSalaryClient: false,
+        isInsurance: true,
+    };
+    const DEFAULT_TRAVEL_MIN_SUM = 6000;
+    const DEFAULT_REST_MIN_SUM = 6000;
+    const DEFAULT_BONUS_CALCULATOR_PARAMS = {
+        minSumTravel: 6000,
+        maxSumTravel: 200000,
+        minSumOther: 6000,
+        maxSumOther: 200000,
+        maxBonus: 5000,
+        prefMonthsNum: 2,
+        prefTravelBonusRate: 0.015,
+        prefRestBonusRate: 0.01,
+        travelBonusRate: 0.015,
+        restBonusRate: 0.01,
+    };
+    const DEFAULT_DEPOSIT_CALCULATOR_PARAMS = {
+        minSum: 50000,
+        maxSum: 5000000,
+        minMonths: 2,
+        maxMonths: 10,
+        rate: 0,
+        isMonthlyInterestPayment: true,
+        isRemoteRegistration: true,
+    };
+    const DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS = {
+        minSum: 1000,
+        maxSum: 500000,
+        minDays: BUSINESS_MIN_DAYS,
+        maxDays: BUSINESS_MAX_DAYS,
+        rate: 0,
+        isMonthlyInterestPayment: true,
+        isReplenished: false,
+        isPartialWithdrawal: false,
+        isSmallBusiness: false,
+        depositeName: "Депозит 'Стабильный'",
+    };
+    const CREDIT_CALC_DEFAULT_DIR = 'credit-calculator-data';
+    const BONUS_CALC_DEFAULT_DIR = 'bonus-calculator-data';
+    const DEPOSIT_CALC_DEFAULT_DIR = 'deposit-calculator-data';
+    const BUSINESS_DEPOSIT_CALC_DEFAULT_DIR = 'business-calculator-data';
+    const REFINANCING_CALC_DEFAULT_DIR = 'refinancing-calculator-data';
+
+    const Rate = JSX(({ rate, title = 'Ставка', unit, depositeName, isShowDepositeName, rateBlockClassName, fractionDigits = 2, }) => (jsxs("div", { children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsxs("div", { className: "relative", children: [jsxs("div", { className: "flex justify-start gradient-color-text", children: [jsx("span", { className: style('font-mohave text-title-huge pr-6 -mt-4', rateBlockClassName), children: String(rate.toFixed(fractionDigits)).replace('.', ',') }), unit ? jsx("span", { className: "text-7xl", children: unit }) : null] }), depositeName && isShowDepositeName ? (jsx("div", { className: "absolute bottom-7 w-full text-center whitespace-nowrap", children: depositeName })) : null] })] })));
+
+    const renderFootnote = (text) => text ? (jsx(Paragraph, { size: "text-s", font: "font-light", color: "text-secondary-text", children: text })) : null;
+
+    const DEFAULT_MONEY_STEP = 1000;
+    function renderWantedSumInput({ isShowItems = true, step = DEFAULT_MONEY_STEP, ...rest }) {
+        const items = [
+            `От ${toLocalNumberFormat(2)(rest.min || 0)} ₽`,
+            `До ${toLocalNumberFormat(2)(rest.max || 0)} ₽`,
+        ];
+        return jsx(InputRange, { items: isShowItems ? items : [], step: step, ...rest });
+    }
+
+    const getBonus = (params, bonusTravelValue, bonusOtherValue) => {
+        const { minSumTravel, minSumOther, maxBonus, prefMonthsNum, prefTravelBonusRate, prefRestBonusRate, travelBonusRate, restBonusRate, } = params;
+        if (bonusTravelValue === minSumTravel && bonusOtherValue === minSumOther) {
+            return [0, 0];
+        }
+        const prefBonus = Math.min(Math.round(prefTravelBonusRate * bonusTravelValue) +
+            Math.round(prefRestBonusRate * bonusOtherValue), maxBonus);
+        const bonus = Math.min(Math.round(travelBonusRate * bonusTravelValue) + Math.round(restBonusRate * bonusOtherValue), maxBonus);
+        const yearBonus = prefBonus * prefMonthsNum + bonus * (MONTHS_IN_YEAR - prefMonthsNum);
+        return [prefBonus, yearBonus];
+    };
+
+    function useCalculatorParams(dir) {
+        const { data } = useAsyncData(`/wcms-resources/${dir}.json`, fetchJSONUnsafe);
+        return data;
+    }
+
+    const useBonusCalculatorParams = (userInputParams, sourceBookDir) => {
+        const { travelExpenseValue, restExpenseValue } = userInputParams;
+        const bonusCalculatorSourceBookParams = useCalculatorParams(sourceBookDir || BONUS_CALC_DEFAULT_DIR) ||
+            DEFAULT_BONUS_CALCULATOR_PARAMS;
+        const [monthBonus, yearBonus] = getBonus(bonusCalculatorSourceBookParams, travelExpenseValue, restExpenseValue);
+        return {
+            ...bonusCalculatorSourceBookParams,
+            ...userInputParams,
+            monthBonus,
+            yearBonus,
+        };
+    };
+
+    const BonusCalculatorForm = JSX(({ className = '', sourceBookDir = '', buttons, footnote }) => {
+        const [userInputParams, { field }] = useForm({
+            travelExpenseValue: DEFAULT_TRAVEL_MIN_SUM,
+            restExpenseValue: DEFAULT_REST_MIN_SUM,
+        });
+        const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } = useBonusCalculatorParams(userInputParams, sourceBookDir);
+        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-2/5", children: [renderWantedSumInput({
+                            title: 'Сумма покупок в категории путешествия, ₽',
+                            min: minSumTravel,
+                            max: maxSumTravel,
+                            step: 500,
+                            isShowItems: false,
+                            ...field('travelExpenseValue'),
+                        }), renderWantedSumInput({
+                            title: 'Сумма покупок в остальных категориях, ₽',
+                            className: 'mt-7',
+                            min: minSumOther,
+                            max: maxSumOther,
+                            step: 500,
+                            isShowItems: false,
+                            ...field('restExpenseValue'),
+                        })] }), 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 mergeIntervals = (intervals) => {
+        const result = [...intervals];
+        result.sort(([a], [c]) => a - c);
+        let i = 1;
+        while (i < result.length) {
+            const [a, b] = result[i - 1];
+            const [c, d] = result[i];
+            if (b >= c) {
+                result.splice(i - 1, 2, [a, Math.max(b, d)]);
+            }
+            else {
+                i++;
+            }
+        }
+        return result;
+    };
+
+    const getLimitRangeByKeys = ([minKey, maxKey], limitParams, rateRows = []) => limitParams && limitParams[minKey] && limitParams[maxKey]
+        ? {
+            [minKey]: limitParams[minKey],
+            [maxKey]: limitParams[maxKey],
+        }
+        : getRangeByKeys([minKey, maxKey], rateRows);
+    const getRangeByKeys = ([minKey, maxKey], rows = []) => ({
+        [minKey]: rows.length
+            ? min(rows.filter((row) => typeof row[minKey] === 'number').map((row) => row[minKey]))
+            : 0,
+        [maxKey]: rows.length
+            ? max(rows.filter((row) => typeof row[minKey] === 'number').map((row) => row[maxKey]))
+            : 0,
+    });
+    const checkRangeByKeys = (value, [minKey, maxKey], sourceBookRow) => value >= sourceBookRow[minKey] && value <= sourceBookRow[maxKey];
+
+    const useBusinessDepositCalculatorParams = (userInputParams, sourceBookDir) => {
+        const { daysValue, moneyValue, isPartialWithdrawal, isReplenished, isSmallBusiness, isMonthlyInterestPayment, } = userInputParams;
+        const data = useCalculatorParams(sourceBookDir || BUSINESS_DEPOSIT_CALC_DEFAULT_DIR);
+        const isOperatingDeposit = isReplenished || isPartialWithdrawal;
+        const isDisabledOperatingDeposit = daysValue < BUSINESS_OPERATING_MIN_DAYS || daysValue > BUSINESS_OPERATING_MAX_DAYS;
+        if (daysValue <= BUSINESS_RATE_MIN_DAYS) {
+            return {
+                ...DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS,
+                ...userInputParams,
+                isDisabledOperatingDeposit,
+                isShowUnknownRate: true,
+            };
+        }
+        const businessDepositCalculatorSourceBookParams = data?.rateRows?.find((_) => {
+            return (isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
+                isSmallBusiness === _.isSmallBusiness &&
+                checkIsOperatingDeposit(isOperatingDeposit, _) &&
+                checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], _) &&
+                checkRangeByKeys(daysValue, ['minDays', 'maxDays'], _));
+        }) || DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS;
+        const { rate } = businessDepositCalculatorSourceBookParams;
+        const income = getDepositIncome$1(rate, userInputParams);
+        const finalSum = moneyValue + income;
+        const sourceBookRows = data?.rateRows || [DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS];
+        return {
+            ...businessDepositCalculatorSourceBookParams,
+            ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
+            ...getRangeByKeys(['minDays', 'maxDays'], sourceBookRows),
+            ...userInputParams,
+            isDisabledOperatingDeposit,
+            income,
+            finalSum,
+        };
+    };
+    const checkIsOperatingDeposit = (isOperatingDeposit, sourceBookRow) => isOperatingDeposit
+        ? sourceBookRow.isReplenished && sourceBookRow.isPartialWithdrawal
+        : !sourceBookRow.isReplenished && !sourceBookRow.isPartialWithdrawal;
+    const getDepositIncome$1 = (rate, userInputParams) => {
+        const { isMonthlyInterestPayment, moneyValue, daysValue } = userInputParams;
+        /*
+        Приблизительный расчёт, не учитывающий разницу в количестве дней в месяцах. Месяц принят за 30 дней, год за 365 дней.
+        */
+        if (isMonthlyInterestPayment) {
+            return Math.round(moneyValue * Math.pow((1200 + rate) / 1200, daysValue / 30) - moneyValue);
+        }
+        else {
+            return Math.round((moneyValue * rate * daysValue) / 365 / 100);
+        }
+    };
+
+    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,
+            daysValue: BUSINESS_DEFAULT_DAYS,
+            isReplenished: false,
+            isPartialWithdrawal: false,
+            isSmallBusiness: false,
+            isMonthlyInterestPayment: false,
+        });
+        const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
+        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,
+                                    ...field('moneyValue'),
+                                    value: calculatorParams.moneyValue,
+                                }), renderDaysInput({
+                                    title: 'Срок, дней',
+                                    min: calculatorParams.minDays,
+                                    max: calculatorParams.maxDays,
+                                    ...field('daysValue'),
+                                    value: calculatorParams.daysValue,
+                                }), 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'),
+                                            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", { 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, { items: [`От ${monthText(min)}`, `До ${monthText(max)}`], step: STEP_MONTHS, ...(availableMonths?.length ? { list: availableMonths } : { min, max }), ...rest }));
+    const monthText = (month) => `${month} ${Number(month) % 10 === 1 ? 'месяца' : 'месяцев'}`;
+
+    const checkCreditSourceBookRowCommonParams = (props) => checkRowParam$1({
+        ...props,
+        fieldKey: 'isSalaryClient',
+        viewSettingFieldKey: 'isShowSalaryClient',
+    }) &&
+        checkRowParam$1({
+            ...props,
+            fieldKey: 'isStateEmployee',
+            viewSettingFieldKey: 'isShowStateEmployee',
+        }) &&
+        checkRowParam$1({
+            ...props,
+            fieldKey: 'isPensionClient',
+            viewSettingFieldKey: 'isShowPensionClient',
+        }) &&
+        checkRowParam$1({
+            ...props,
+            fieldKey: 'isInsurance',
+            viewSettingFieldKey: 'isShowInsurance',
+        });
+    const checkRowParam$1 = ({ row, userInputParams, paramsViewSettings, fieldKey, viewSettingFieldKey, }) => {
+        const isExclude = paramsViewSettings ? !paramsViewSettings[viewSettingFieldKey] : false;
+        return isExclude || userInputParams[fieldKey] === row[fieldKey];
+    };
+
+    const getCreditCalculatorLimitParams = ({ limitRows, userInputParams, paramsViewSettings, }) => limitRows?.find((row) => checkCreditSourceBookRowCommonParams({
+        row,
+        userInputParams,
+        paramsViewSettings,
+    }));
+
+    const getCreditCalculatorRateParams = ({ rateRows = [], userInputParams, paramsViewSettings, moneyValue, monthsValue, }) => rateRows?.find((row) => checkCreditSourceBookRowCommonParams({
+        row,
+        userInputParams,
+        paramsViewSettings,
+    }) &&
+        checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
+        checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row)) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
+
+    /**
+     * Формулы расчёта аннуитетных и дифференцированных платежей:
+     * https://finuslugi.ru/potrebitelskie_kredity/stat_annuitetnye_i_differentsirovannye_platezhi
+     */
+    const getMonthlyPayment = (rate, params) => {
+        const { isAnnuity, moneyValue, monthsValue, moneyExtra } = params;
+        if (rate === 0) {
+            return 0;
+        }
+        else if (isAnnuity) {
+            const i = rate / MONTHLY_INTEREST_RATE; // Используется значение ставки в процентах
+            if (moneyExtra) {
+                return (moneyValue + moneyExtra) * (i + i / (Math.pow(1 + i, monthsValue) - 1));
+            }
+            else {
+                return moneyValue * (i + i / (Math.pow(1 + i, monthsValue) - 1));
+            }
+        }
+        else {
+            return Math.round(moneyValue / monthsValue) + moneyValue * (rate / (MONTHS_IN_YEAR * 100)); // Используется значение ставки (rate) в процентах, делённое на сто.
+        }
+    };
+
+    const useCreditCalculatorParams = (userInputParams, sourceBookDir, paramsViewSettings) => {
+        let { moneyValue, monthsValue } = userInputParams;
+        const data = useCalculatorParams(sourceBookDir || CREDIT_CALC_DEFAULT_DIR);
+        const rateRows = data?.rateRows || [DEFAULT_CREDIT_CALCULATOR_PARAMS];
+        const limitRows = data?.limitRows || [];
+        const creditCalculatorSourceBookLimitParams = getCreditCalculatorLimitParams({
+            limitRows,
+            userInputParams,
+            paramsViewSettings,
+        });
+        const { minSum, maxSum } = getLimitRangeByKeys(['minSum', 'maxSum'], creditCalculatorSourceBookLimitParams, rateRows);
+        const { minMonths, maxMonths } = getLimitRangeByKeys(['minMonths', 'maxMonths'], creditCalculatorSourceBookLimitParams, rateRows);
+        moneyValue = clamp(moneyValue, minSum, maxSum);
+        monthsValue = clamp(monthsValue, minMonths, maxMonths);
+        const creditCalculatorRateParams = getCreditCalculatorRateParams({
+            rateRows,
+            userInputParams,
+            paramsViewSettings,
+            moneyValue,
+            monthsValue,
+        });
+        const { rate } = creditCalculatorRateParams;
+        const monthlyPayment = getMonthlyPayment(rate, userInputParams);
+        return useMemo(() => ({
+            ...creditCalculatorRateParams,
+            ...userInputParams,
+            minSum,
+            maxSum,
+            minMonths,
+            maxMonths,
+            moneyValue,
+            monthsValue,
+            monthlyPayment,
+        }), [userInputParams, data]);
+    };
+
+    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,
+            isSalaryClient: false,
+            isPensionClient: false,
+            isStateEmployee: false,
+            moneyValue: CREDIT_DEFAULT_SUM,
+            monthsValue: DEFAULT_MONTHS,
+        });
+        const calculatorParams = useCreditCalculatorParams(userInputParams, sourceBookDir, paramsViewSettings);
+        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,
+                            max: calculatorParams.maxSum,
+                            ...field('moneyValue'),
+                            value: calculatorParams.moneyValue,
+                        }), renderMonthsInput({
+                            title: 'Срок кредита, месяцев',
+                            min: calculatorParams.minMonths,
+                            max: calculatorParams.maxMonths,
+                            ...field('monthsValue'),
+                            value: calculatorParams.monthsValue,
+                        }), 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);
+
+    const useDepositCalculatorParams = (userInputParams, sourceBookDir, paramsViewSettings) => {
+        const { moneyValue, monthsValue } = userInputParams;
+        const data = useCalculatorParams(sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR);
+        const defaultMonth = data?.rateRows?.[0]
+            ? getMiddleMonth(data.rateRows[0].minMonths, data.rateRows[0].maxMonths)
+            : 1;
+        const isExcludeMonthlyInterestPayment = !paramsViewSettings?.isShowMonthlyInterestPayment;
+        const isExcludeRemoteRegistration = !paramsViewSettings?.isShowRemoteRegistration;
+        const depositCalculatorSourceBookParams = data?.rateRows?.find((row) => checkRowByParam({
+            row,
+            userInputParams,
+            paramKey: 'isMonthlyInterestPayment',
+            isExclude: isExcludeMonthlyInterestPayment,
+        }) &&
+            checkRowByParam({
+                row,
+                userInputParams,
+                paramKey: 'isRemoteRegistration',
+                isExclude: isExcludeRemoteRegistration,
+            }) &&
+            checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
+            checkRangeByKeys(monthsValue || defaultMonth, ['minMonths', 'maxMonths'], row)) || DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
+        const { rate } = depositCalculatorSourceBookParams;
+        const income = getDepositIncome(rate, userInputParams);
+        const finalSum = moneyValue + income;
+        const sourceBookRows = data?.rateRows || [DEFAULT_DEPOSIT_CALCULATOR_PARAMS];
+        return {
+            ...depositCalculatorSourceBookParams,
+            ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
+            ...getRangeByKeys(['minMonths', 'maxMonths'], sourceBookRows),
+            availableMonths: mergeIntervals(sourceBookRows.map((row) => [row['minMonths'], row['maxMonths']])).flatMap(([start, end]) => arrayByRange(start, end)),
+            ...userInputParams,
+            defaultMonth,
+            income,
+            finalSum,
+        };
+    };
+    const getDepositIncome = (rate, userInputParams) => {
+        const { isMonthlyInterestPayment, moneyValue, monthsValue } = userInputParams;
+        if (isMonthlyInterestPayment) {
+            return Math.round(moneyValue * Math.pow((1200 + rate) / 1200, monthsValue) - moneyValue);
+        }
+        else {
+            /*
+            Приблизительный расчёт, не учитывающий разницу в количестве дней в месяцах. Месяц принят за 30 дней, год за 365 дней.
+            */
+            return Math.round((moneyValue * rate * 30 * monthsValue) / 365 / 100);
+        }
+    };
+    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,
+            monthsValue: 0,
+            isMonthlyInterestPayment: false,
+            isRemoteRegistration: false,
+        });
+        const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir, paramsViewSettings);
+        const { defaultMonth, rate, income, finalSum } = calculatorParams;
+        const { onChange: setMonthsValue } = field('monthsValue');
+        useEffect(() => {
+            setMonthsValue && setMonthsValue(defaultMonth);
+        }, [defaultMonth]);
+        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,
+                            ...field('moneyValue'),
+                            value: calculatorParams.moneyValue,
+                        }), renderMonthsInput({
+                            title: 'Срок, месяцев',
+                            min: calculatorParams.minMonths,
+                            max: calculatorParams.maxMonths,
+                            availableMonths: calculatorParams.availableMonths,
+                            ...field('monthsValue'),
+                            value: calculatorParams.monthsValue,
+                        }), 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({
+                    title: 'Выплата процентов',
+                    ...field('isMonthlyInterestPayment'),
+                    value: params.isMonthlyInterestPayment,
+                })
+                : null, params.isShowRemoteRegistration
+                ? renderRegistrationType({
+                    title: 'Оформление',
+                    ...field('isRemoteRegistration'),
+                    value: params.isRemoteRegistration,
+                })
+                : null] }));
+
+    const checkRefinancingSourceBookRowCommonParams = (props) => checkRowParam({
+        ...props,
+        fieldKey: 'isSalaryClient',
+        viewSettingFieldKey: 'isShowSalaryClient',
+    }) &&
+        checkRowParam({
+            ...props,
+            fieldKey: 'isInsurance',
+            viewSettingFieldKey: 'isShowInsurance',
+        }) &&
+        checkRowParam({
+            ...props,
+            fieldKey: 'isExtraMoney',
+            viewSettingFieldKey: 'isShowExtraMoney',
+        });
+    const checkRowParam = ({ row, userInputParams, paramsViewSettings, fieldKey, viewSettingFieldKey, }) => {
+        const isExclude = paramsViewSettings ? !paramsViewSettings[viewSettingFieldKey] : false;
+        return isExclude || userInputParams[fieldKey] === row[fieldKey];
+    };
+
+    const getRefinancingCalculatorLimitParams = ({ limitRows, userInputParams, paramsViewSettings, }) => limitRows?.find((row) => checkRefinancingSourceBookRowCommonParams({
+        row,
+        userInputParams,
+        paramsViewSettings,
+    }));
+
+    const getRefinancingCalculatorRateParams = ({ rateRows = [], userInputParams, paramsViewSettings, moneyValue, monthsValue, oldMonthlyPayment, moneyExtra, }) => rateRows?.find((row) => checkRefinancingSourceBookRowCommonParams({
+        row,
+        userInputParams,
+        paramsViewSettings,
+    }) &&
+        checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
+        checkRangeByKeys(oldMonthlyPayment, ['minSumOld', 'maxSumOld'], row) &&
+        checkRangeByKeys(moneyExtra, ['minSumExtra', 'maxSumExtra'], row) &&
+        checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row)) || DEFAULT_REFINANCING_CALCULATOR_PARAMS;
+
+    const useRefinancingCalculatorParams = (userInputParams, sourceBookDir, paramsViewSettings) => {
+        let { moneyValue, monthsValue, oldMonthlyPayment, moneyExtra } = userInputParams;
+        const data = useCalculatorParams(sourceBookDir || REFINANCING_CALC_DEFAULT_DIR);
+        const rateRows = data?.rateRows || [DEFAULT_REFINANCING_CALCULATOR_PARAMS];
+        const limitRows = data?.limitRows || [];
+        const sourceBookLimitParams = getRefinancingCalculatorLimitParams({
+            limitRows,
+            userInputParams,
+            paramsViewSettings,
+        });
+        const { minSum, maxSum } = getLimitRangeByKeys(['minSum', 'maxSum'], sourceBookLimitParams, rateRows);
+        const { minSumOld, maxSumOld } = getLimitRangeByKeys(['minSumOld', 'maxSumOld'], sourceBookLimitParams, rateRows);
+        const { minSumExtra, maxSumExtra } = getLimitRangeByKeys(['minSumExtra', 'maxSumExtra'], sourceBookLimitParams, rateRows);
+        const { minMonths, maxMonths } = getLimitRangeByKeys(['minMonths', 'maxMonths'], sourceBookLimitParams, rateRows);
+        moneyValue = clamp(moneyValue, minSum, maxSum);
+        oldMonthlyPayment = clamp(oldMonthlyPayment, minSumOld, maxSumOld);
+        moneyExtra = clamp(moneyExtra, minSumExtra, maxSumExtra);
+        monthsValue = clamp(monthsValue, minMonths, maxMonths);
+        const refinancingCalculatorSourceBookRateParams = getRefinancingCalculatorRateParams({
+            rateRows,
+            userInputParams,
+            paramsViewSettings,
+            moneyValue,
+            monthsValue,
+            oldMonthlyPayment,
+            moneyExtra,
+        });
+        const { rate } = refinancingCalculatorSourceBookRateParams;
+        const monthlyPayment = getMonthlyPayment(rate, userInputParams);
+        const benefit = userInputParams.oldMonthlyPayment - monthlyPayment;
+        return useMemo(() => ({
+            ...refinancingCalculatorSourceBookRateParams,
+            ...userInputParams,
+            minSum,
+            maxSum,
+            minMonths,
+            maxMonths,
+            moneyValue,
+            monthsValue,
+            oldMonthlyPayment,
+            moneyExtra,
+            monthlyPayment,
+            benefit,
+        }), [userInputParams, data]);
+    };
+
+    const RefinancingCalculatorForm = JSX(({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
+        const [userInputParams, { field }] = useForm({
+            isAnnuity: true,
+            isInsurance: true,
+            isSalaryClient: false,
+            isExtraMoney: false,
+            moneyValue: REFINANCING_DEFAULT_SUM,
+            oldMonthlyPayment: REFINANCING_OLD_DEFAULT_SUM,
+            monthsValue: DEFAULT_REFINANCING_MONTHS,
+            moneyExtra: REFINANCING_OLD_DEFAULT_SUM,
+        });
+        const calculatorParams = useRefinancingCalculatorParams(userInputParams, sourceBookDir, paramsViewSettings);
+        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-2/5", children: [renderWantedSumInput({
+                            title: 'Остаток долга в других банках, ₽ ',
+                            step: 500,
+                            min: calculatorParams.minSum,
+                            max: calculatorParams.maxSum,
+                            ...field('moneyValue'),
+                            value: calculatorParams.moneyValue,
+                        }), renderWantedSumInput({
+                            title: 'Ежемесячный платеж в других банках, ₽',
+                            isShowItems: false,
+                            step: 500,
+                            min: calculatorParams.minSumOld,
+                            max: calculatorParams.maxSumOld,
+                            ...field('oldMonthlyPayment'),
+                            value: calculatorParams.oldMonthlyPayment,
+                        }), renderMonthsInput({
+                            title: 'Новый срок кредита, месяцев',
+                            min: calculatorParams.minMonths,
+                            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: 'Дополнительная сумма, ₽ ',
+                                step: 500,
+                                min: calculatorParams.minSumExtra,
+                                max: calculatorParams.maxSumExtra,
+                                ...field('moneyExtra'),
+                                value: calculatorParams.moneyExtra,
+                            })
+                            : null] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.rate, fractionDigits: 1, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-96", children: [jsx(CalculatorValueBlock, { title: 'Ежемесячный платеж', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), calculatorParams.benefit > 0 ? (jsx(CalculatorValueBlock, { title: 'Выгода в месяц', value: calculatorParams.benefit, postfix: "\u20BD" })) : null, renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
+    });
+    const renderCreditParamsForm = (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.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, params.isShowExtraMoney ? (jsx(Checkbox, { className: "mt-3", text: "\u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u0434\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u0443\u044E \u0441\u0443\u043C\u043C\u0443", ...field('isExtraMoney'), value: params.isExtraMoney })) : null] }));
+
+    const EmbeddableCalcBlocks = {
+        CreditCalculatorForm,
+        DepositCalculatorForm,
+        BusinessDepositCalculatorForm,
+        BonusCalculatorForm,
+        RefinancingCalculatorForm,
+    };
+
+    const Calculator = JSX(({ className, calculatorTabs = [] }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-0", children: renderTabs$1(calculatorTabs) })));
+    const renderCalculator = (tab) => {
+        const type = tab.calculatorBlock?.calcType;
+        if (!type || !(type in EmbeddableCalcBlocks)) {
+            return null;
+        }
+        const EmbeddedBlock = EmbeddableCalcBlocks[type];
+        return jsx(EmbeddedBlock, { ...tab.calculatorBlock, isMobile: true });
+    };
+    const renderTabs$1 = (tabs) => {
+        if (!tabs || !tabs.length) {
+            return null;
+        }
+        const isSingleTab = tabs.length === 1;
+        if (isSingleTab) {
+            return jsx(BlockWrapper, { children: renderCalculator(tabs[0]) });
+        }
+        return tabs.map((tab, index) => (jsx(Foldable, { isFoldButtonOnTop: true, unfoldedByDefault: index === 0, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { isUnfolded: isUnfolded, children: jsx(BlockWrapper, { children: renderCalculator(tab) }) })), renderFoldButton: renderFoldButton$2(tab) }, index.toString())));
+    };
+    const renderFoldButton$2 = (tab) => ({ isUnfolded, onToggle }) => {
+        return (jsxs("button", { onClick: onToggle, className: "w-full p-xl bg-green flex items-center border-b border-white", children: [jsx("div", { className: "w-11 h-11 bg-white rounded-md flex justify-center items-center", children: jsx(Icon, { name: tab.nav?.icon?.icon, iconVersion: "color", width: "24", height: "24" }) }), jsxs("div", { className: "flex-1 flex flex-col pl-s", children: [jsx(Text, { align: "text-left", color: "text-white", children: tab.nav?.title }), jsx(Text, { align: "text-left", size: "text-s", color: "text-white", font: "font-light", children: tab.nav?.description })] }), jsx(Icon, { name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', iconVersion: "white", width: "24", height: "24" })] }));
+    };
+
     const NumberInput = JSX((props) => {
         const { onChange, min, max, defaultValue = '0', fractionDigits = 0, ...inputProps } = props;
         const normalizedProps = useNormalizedInput(props, {
@@ -1663,20 +2415,54 @@
         'CarouselEventCard',
     ];
 
-    const CarouselBankHistoryCard = JSX(({ title, description, className }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", children: jsx(Headline, { headlineVersion: "S", title: title, description: description, align: "text-left", className: "text-primary-text", isPadding: false }) })));
+    const CarouselBankHistoryCard = JSX(({ title, description, className }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", children: jsx(Headline, { headlineVersion: "XS", title: title, description: description, align: "text-left", className: "text-primary-text", isPadding: false }) })));
 
-    const LinkWrapper = JSX(({ className = '', href, target, isRemote = false, children }) => {
-        const link = useLink({ isRemote });
-        const linkProps = link({ href, target });
-        const Tag = href ? 'a' : 'div';
-        return (jsx(Tag, { className: style('block', className), ...(href ? linkProps : {}), children: children }));
+    const imageAlignmentMap = {
+        start: 'self-start',
+        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-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 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 cardTitleFont = 'font-light';
-    const cardDescriptionColor = '';
+    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 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 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 DOT_SIZE_MAP = {
         L: 'w-1.5 h-1.5 mr-m',
@@ -1697,6 +2483,29 @@
     };
     const List = JSX(({ className, hasIndent, isDotted, items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: style('flex flex-col gap-xs text-left text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text', TEXT_SIZE_MAP[listItemSize], hasIndent ? ITEM_INDENT_MAP[listItemSize] : '', className), role: "list", children: items.map((item, i) => (jsx(ListItem, { isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
 
+    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 LinkWrapper = JSX(({ className = '', href, target, isRemote = false, children }) => {
+        const link = useLink({ isRemote });
+        const linkProps = link({ href, target });
+        const Tag = href ? 'a' : 'div';
+        return (jsx(Tag, { className: style('block', className), ...(href ? linkProps : {}), children: children }));
+    });
+
+    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-24 h-14',
         stretched: 'flex-1 h-14',
@@ -1756,28 +2565,6 @@
     });
     const renderIcon$1 = (icon) => icon?.src || icon?.icon ? (jsx("div", { children: jsx(Img, { image: icon }) })) : null;
 
-    const Foldable = JSX(({ className = '', isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
-        const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
-        const onToggle = useCallback(() => {
-            setIsUnfolded((_) => !_);
-        }, []);
-        const sectionNode = renderFoldableSection({ isUnfolded, onToggle });
-        const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
-        return isFoldButtonOnTop ? (jsxs("div", { className: className, children: [buttonNode, sectionNode] })) : (jsxs("div", { className: className, children: [sectionNode, buttonNode] }));
-    });
-
-    const FoldableSection = JSX(({ className = '', isUnfolded, children }) => {
-        const containerRef = useRef(null);
-        useEffect(() => {
-            if (containerRef.current) {
-                containerRef.current.style.maxHeight = isUnfolded
-                    ? `${containerRef.current.scrollHeight}px`
-                    : '';
-            }
-        }, [isUnfolded, children?.length]);
-        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} ${className}`, children: children }));
-    });
-
     const getPaddingStyle = (isHighlighting = false) => isHighlighting ? 'p-6xl mt-6' : 'mt-6 p-6xl'; // Хак для мобильной версии т.к. контракт должен быть идентичный
 
     const renderCardInfo = (cell, i) => {
@@ -1809,8 +2596,8 @@
         black: 'bg-black',
         white: 'bg-white',
     };
-    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col justify-left gap-m', className), defaultPadding: "p-6xl sm:p-7", ...rest, children: [image?.src ? jsx(Img, { className: "flex justify-center", image: image }) : null, jsx(Headline, { title: title, description: description, headlineVersion: "XS", isPadding: false, align: "text-left" }), colors?.length ? (jsxs("div", { className: "flex text-secondary-text", children: [jsx("div", { className: "mr-xs", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0426\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'w-full' })] })));
-    const renderColorOption = (color, i) => (jsx("div", { role: "figure", className: `w-6 h-6 ml-1 sm:ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
+    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col justify-left', className), defaultPadding: "p-2xl", ...rest, children: [image?.src ? jsx(Img, { className: "flex justify-center mb-xl", image: image }) : null, jsx(Headline, { title: title, description: description, headlineVersion: "XS", isPadding: false, align: "text-left", className: "mb-m" }), colors?.length ? (jsxs("div", { className: "flex text-secondary-text mb-m", children: [jsx("div", { className: "mr-xs", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0426\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'w-full mt-lg' })] })));
+    const renderColorOption = (color, i) => (jsx("div", { role: "figure", className: `w-6 h-6 ml-s border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
 
     const alignTextStyle = 'text-left';
 
@@ -1866,14 +2653,6 @@
         return orientation === 'horizontal' ? (jsx(SwipeListControl, { onVisibleIndicesChange: handleSlideChange, children: tableColumns })) : (tableColumns);
     });
 
-    const imageAlignmentMap = {
-        start: 'self-start',
-        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 renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
-
     var Currency;
     (function (Currency) {
         Currency["RUB"] = "RUB";
@@ -1900,7 +2679,7 @@
     };
 
     const icon = { icon: 'GpsIcon' };
-    const CurrentLocation$1 = JSX(({ className = '', address }) => (jsxs("div", { className: `flex gap-s ${className}`, children: [jsx(RoundedIcon, { ...icon, iconBgVersion: "primary" }), jsxs("div", { className: "space-y-2xs", children: [address ? jsx("p", { className: "text-primary-main text-l", children: address }) : null, jsx("p", { className: "text-secondary-text text-m", children: "\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0437\u0430\u0434\u0430\u043D\u043D\u043E\u0433\u043E \u043E\u0444\u0438\u0441\u0430" })] })] })));
+    const CurrentLocation = JSX(({ className = '', address }) => (jsxs("div", { className: `flex gap-s ${className}`, children: [jsx(RoundedIcon, { ...icon, iconBgVersion: "primary" }), jsxs("div", { className: "space-y-2xs", children: [address ? jsx("p", { className: "text-primary-main text-l", children: address }) : null, jsx("p", { className: "text-secondary-text text-m", children: "\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0437\u0430\u0434\u0430\u043D\u043D\u043E\u0433\u043E \u043E\u0444\u0438\u0441\u0430" })] })] })));
 
     const roundTo = (value, precision = 2) => {
         const factor = 10 ** precision;
@@ -2004,7 +2783,7 @@
     };
 
     const EXCHANGE_RATES_URL = '/api/v1/exchangerates';
-    const REGION_URL$1 = '/api/v1/region';
+    const REGION_URL = '/api/v1/region';
     function useFetchExchangeRateData() {
         const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchData);
         return data || {};
@@ -2017,7 +2796,7 @@
     };
     const fetchRegion = async () => {
         try {
-            return await fetchJSONUnsafe(REGION_URL$1, { method: 'GET' });
+            return await fetchJSONUnsafe(REGION_URL, { method: 'GET' });
         }
         catch (error) {
             console.log(error);
@@ -2043,12 +2822,14 @@
         currencyRatesBuy.unshift({ currency: { currency: Currency.RUB } });
         const currencyRatesSell = currencyRates.filter((_) => _.saleExchangeRate);
         currencyRatesSell.push({ currency: { currency: Currency.RUB } });
-        return (jsx(BlockWrapper, { className: style('box-border min-h-80', className), ...rest, children: jsx(BaseTile, { className: "h-full", title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex gap-6xl flex-wrap", children: [jsxs("div", { children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-xl", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation$1, { address: exchangeRates?.address })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
+        return (jsx(BlockWrapper, { className: style('box-border min-h-80', className), ...rest, children: jsx(BaseTile, { className: "h-full", title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex gap-6xl flex-wrap", children: [jsxs("div", { children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-xl", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { address: exchangeRates?.address })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
     });
     const getCurrencyRates = (currencies) => {
         return currencies?.filter((_) => _?.currency?.id === 1 || _?.currency?.id === 2) || [];
     };
 
+    const useSitemap = (fallback) => useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
+
     const linkListStyles = '';
 
     const LinkList = JSX(({ className = '', items }) => items?.length ? (jsx("ul", { className: style('flex flex-col', linkListStyles, className), children: items.map(renderLinkListItem) })) : null);
@@ -2070,9 +2851,9 @@
 
     const getIconName = (isUnfolded) => isUnfolded ? 'ArrowUpSolidIcon' : 'ArrowDownSolidIcon';
 
-    const renderRoundedIcon = (icon, iconBgVersion) => (jsx(RoundedIcon, { ...icon, iconBgVersion: iconBgVersion }));
+    const renderRoundedIcon = (icon, iconBgVersion) => (jsx(RoundedIcon, { ...icon, iconBgVersion: iconBgVersion, className: "shrink-0" }));
 
-    const rollupIconVersion = 'normal';
+    const rollupIconVersion = 'black';
 
     const rollupItemStyles = '';
 
@@ -2103,7 +2884,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(labelIcon, labelIconBgVersion), 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(labelIcon, labelIconBgVersion), 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 Contacts = JSX(({ className = '', items }) => (jsxs("div", { className: className, children: [items?.length ? items.map(renderContactsGroup) : null, jsx(Button, { version: "primary", className: "w-full", href: "https://www.rshb.ru/feedback/question/", target: "_blank", ariaLabel: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C", text: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C" })] })));
@@ -2139,9 +2920,11 @@
 
     const TextInformation = JSX(({ className = '', links }) => (jsxs("div", { className: className, children: [jsx("div", { className: "pt-lg", children: jsx(Text, { size: "text-xs", font: "font-light", color: "text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex flex-col sm:flex-row justify-start items-start gap-x-lg gap-y-xs pt-lg", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ..._ }, String(i)))) })) : null] })));
 
-    const Footer = JSX(({ className, sitemap, ...rest }) => {
-        const { relatedEnterprises, contacts, socialMedia, mobileApps, horizontalNavigationTitle, documents, } = useSWRResource(projectSettings.FOOTER || 'footer', rest.options?.page?.fallback);
-        return (jsxs(BlockWrapper, { tag: "footer", className: className, ...rest, children: [jsx("div", { className: "mb-lg pb-xs border-b border-main-divider", children: sitemap?.topItems?.map((item, i) => (jsx(RollupItem, { label: item?.text, labelIcon: item?.icon, children: jsx(LinkList, { items: item.items }) }, String(i)))) }), jsx(Contacts, { className: "overflow-hidden", items: contacts }), jsxs("div", { className: "mt-xl", children: [jsx(SocialMedia, { className: "mb-xl", media: socialMedia, buttonSize: "stretched", children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(Text, { size: "text-s", font: "font-light", color: "text-secondary-text", children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }), jsx("div", { className: "mt-xs", children: mobileApps?.map(renderButton) })] }), jsx(HorizontalNavigation, { className: "py-lg border-y border-main-divider", title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
+    const Footer = JSX(({ className, ...rest }) => {
+        const fallback = rest.options?.page?.fallback;
+        const { topItems } = useSitemap(fallback);
+        const { relatedEnterprises, contacts, socialMedia, mobileApps, horizontalNavigationTitle, documents, } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
+        return (jsxs(BlockWrapper, { tag: "footer", className: className, ...rest, children: [jsx("div", { className: "mb-lg pb-xs border-b border-main-divider", children: topItems?.map((item, i) => (jsx(RollupItem, { label: item?.text, labelIcon: item?.icon, children: jsx(LinkList, { items: item.items }) }, String(i)))) }), jsx(Contacts, { className: "overflow-hidden", items: contacts }), jsxs("div", { className: "mt-xl", children: [jsx(SocialMedia, { className: "mb-xl", media: socialMedia, buttonSize: "stretched", children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(Text, { size: "text-s", font: "font-light", color: "text-secondary-text", children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }), jsx("div", { className: "mt-xs", children: mobileApps?.map(renderButton) })] }), jsx(HorizontalNavigation, { className: "py-lg border-y border-main-divider", title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
     });
     const renderButton = ({ href = '/' }, i) => {
         const { label } = findIconByHref(href);
@@ -2181,23 +2964,25 @@
     };
     const HeaderTop = JSX(({ bgColor, logo, internetBankUrl, version }) => {
         const router = useRouter();
-        const isRootLocation = router.pathname === '/';
-        const onClick = useCallback(() => {
+        const isRootLocation = projectSettings.BASE_PATH?.startsWith(router.pathname);
+        const onClick = useCallback((e) => {
+            e.preventDefault();
             router.back();
         }, []);
-        return (jsxs("div", { className: "flex items-center justify-between w-full", children: [isRootLocation ? (jsx(Logo, { bgColor: bgColor, logo: logo })) : (jsxs(Button, { className: "flex items-center text-l", ariaLabel: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430\u0437\u0430\u0434", onClick: onClick, children: [jsx(Img, { className: "w-6 h-6", image: {
-                                icon: 'ChevronLeft',
-                                iconVersion: 'black',
-                            } }), "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430\u0437\u0430\u0434"] })), internetBankUrl ? (jsx(Button, { href: internetBankUrl, ariaLabel: "\u0412\u043E\u0439\u0442\u0438", target: "_blank", className: style('p-s my-2xs text-s whitespace-nowrap text-primary-main hover:text-primary-hover', BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default']), children: "\u0412\u043E\u0439\u0442\u0438" })) : null] }));
+        return (jsxs("div", { className: "flex items-center justify-between w-full", children: [isRootLocation ? (jsx(Logo, { className: "mt-2xs", bgColor: bgColor, logo: logo })) : (renderBackButton(onClick)), internetBankUrl ? (jsx(Button, { href: internetBankUrl, ariaLabel: "\u0412\u043E\u0439\u0442\u0438", target: "_blank", className: style('p-s text-s whitespace-nowrap text-primary-main hover:text-primary-hover', BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default']), children: "\u0412\u043E\u0439\u0442\u0438" })) : null] }));
     });
+    const renderBackButton = (onClick) => (jsxs("button", { className: "flex items-center text-l mt-2xs", "aria-label": "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430\u0437\u0430\u0434", onClick: onClick, children: [jsx(Img, { className: "w-6 h-6", image: {
+                    icon: 'ChevronLeftIcon',
+                    iconVersion: 'black',
+                }, width: "24", height: "24" }), "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430\u0437\u0430\u0434"] }));
 
     const BG_COLOR_TO_BLOCK_VERSION = {
         'bg-white': 'primary',
         transparent: 'transparent',
     };
-    const Header = JSX(({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], sitemap, ...rest }) => {
-        const { logo, internetBankUrl } = sitemap || {};
-        return (jsx(BlockWrapper, { tag: "header", defaultPadding: "", version: version, ...rest, children: jsx("div", { className: "container px-4 py-2xs box-border", children: jsx(HeaderTop, { bgColor: bgColor, logo: logo, internetBankUrl: internetBankUrl, version: version, ...rest }) }) }));
+    const Header = JSX(({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
+        const { logo, internetBankUrl } = useSitemap(rest.options?.page?.fallback);
+        return (jsx(BlockWrapper, { tag: "header", defaultPadding: "", version: version, ...rest, children: jsx("div", { className: "container px-5 py-2xs box-border", children: jsx(HeaderTop, { bgColor: bgColor, logo: logo, internetBankUrl: internetBankUrl, version: version, ...rest }) }) }));
     });
 
     const gapStyles = {
@@ -2286,56 +3071,9 @@
 
     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 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 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"] })] }));
 
@@ -2805,106 +3543,65 @@
         return (jsx("div", { className: style(iconAreaSize, containerStyle, 'z-10 mr-s flex justify-center content-center'), children: jsx("span", { className: "flex self-center text-h4 text-secondary-text group-data-secondary:text-white", children: checkCanRenderIcon(step?.icon) ? (jsx(Img, { image: { ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }, width: iconSize, height: iconSize })) : (jsx("span", { children: i + 1 })) }) }));
     };
 
-    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 tabPaddingStyleMap = {
+        default: 'px-xs',
+        underlined: 'px-m',
+        rounded: 'px-lg rounded-md',
     };
-    const getTabClassName = (type, active, tabsMode) => {
-        const styleActive = active ? 'active' : 'default';
-        const mode = tabsMode || 'wideScreen';
-        return TAB_CLASSES[type][mode][styleActive];
+    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 LinkTab = JSX((props) => {
-        const { tab, currentTab, onClick, tabsMode } = props;
-        const active = currentTab?.type === 'link' && currentTab.href === tab.href;
+    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 adjustedProps = link(tab);
-        const handleClick = (ev) => {
-            adjustedProps.onClick(ev);
-            onClick(tab);
+        const handleClick = () => {
+            onClick && onClick(item);
         };
-        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 { 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 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 = (activeTab, onClick, type) => (tab, i) => (jsx(TabItem, { isActive: tab === activeTab, onClick: onClick, type: type, item: tab }, String(i)));
 
-    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));
-            }
-            default:
-                assertUnreachable(type);
-        }
-        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 scrollButtonStyle = 'hidden sm:flex absolute z-40 top-0';
+    const ScrollableTabsControl = JSX(({ className, items = [], value, onChange, tabsType }) => {
         const [containerRef, scroll] = useSwipeListScroll({
-            itemCount: tabs?.length || 0,
+            itemCount: items?.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] }));
+        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 Tabs = JSX((props) => {
-        const { className = '', isSticky, tabs, ...rest } = props;
-        const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
+    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 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:
+                return null;
+        }
+    };
+
+    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;
@@ -2912,27 +3609,23 @@
             fireTabEvent(tabs[0]);
         }, []);
         useEffect(() => {
-            if (currentTab?.type === 'group') {
-                defaultEventBus.subject('tab', { type: currentTab.type, label: currentTab.ref });
-            }
-        }, [currentTab]);
-        const handleClick = useCallback((selectedTab) => {
-            fireTabEvent(selectedTab);
-            setCurrentTab(selectedTab);
+            const activeTab = tabs[activeTabIndex];
+            if (activeTab?.type === 'group') {
+                defaultEventBus.subject('tab', { type: activeTab.type, label: activeTab.ref });
+            }
+        }, [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 });
@@ -2941,6 +3634,7 @@
             defaultEventBus.fire('tab', { type: tab.type, label: tab.href });
         }
     };
+    const normalizeTab = (_) => (_?.type === 'group' ? { text: _.title } : _);
 
     const renderButtonsCellData = ({ buttons }) => renderButtonsSection(buttons, {
         className: 'mt-3',
@@ -2997,6 +3691,7 @@
         ApplicationForm,
         ButtonsBlock,
         BonusBenefitsBlock,
+        Calculator,
         CardTransfer,
         Carousel,
         CarouselCard,
@@ -3030,52 +3725,6 @@
         BenefitsBlock,
     };
 
-    const STORAGE_DEFAULT_TTL = 86400000; // 24 * 60 * 60 * 1000
-    function useCachedAsyncData(key, fetcher, storage = globalThis?.localStorage) {
-        const cachedFetcher = useCallback(async (...args) => {
-            const storageKey = `async:${key}`;
-            const storageData = storage.getItem(storageKey);
-            const cachedData = getParsedData(storageData);
-            if (cachedData) {
-                return cachedData;
-            }
-            const data = await fetcher(...args);
-            storage.setItem(storageKey, JSON.stringify({ data, timestamp: Date.now() }));
-            return data;
-        }, [key, fetcher]);
-        return useAsyncData(key, cachedFetcher);
-    }
-    function getParsedData(storageData) {
-        const { data = null, timestamp = null } = storageData ? JSON.parse(storageData) : {};
-        return data && Date.now() - timestamp < STORAGE_DEFAULT_TTL ? data : undefined;
-    }
-
-    const REGION_URL = '/api/v1/region';
-    function useLocation(defaultLocation = 'Москва') {
-        const currentLocation = getLocalStorageLocation();
-        const [location, setLocation] = useState(currentLocation?.region ?? { name: defaultLocation });
-        const { data } = useCachedAsyncData(REGION_URL, fetchJSONUnsafe);
-        useEffect(() => {
-            setLocation(currentLocation?.region && currentLocation?.manual
-                ? currentLocation.region
-                : data || { name: defaultLocation });
-        }, [data]);
-        const onChangeLocation = useCallback((region) => {
-            globalThis.localStorage?.setItem('location', JSON.stringify({ manual: true, region }));
-            setLocation(region);
-        }, []);
-        return [location, onChangeLocation];
-    }
-    const getLocalStorageLocation = () => {
-        const localStorageLocation = globalThis.localStorage?.getItem('location');
-        try {
-            return localStorageLocation ? JSON.parse(localStorageLocation) : null;
-        }
-        catch (_) {
-            return null;
-        }
-    };
-
     const debounce = (fn, delay = 600) => {
         let timerId;
         const debouncedCallback = (...args) => {
@@ -3138,59 +3787,12 @@
         };
     }, deps);
 
-    const CloseButton = JSX(({ className, onClick }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-1 bg-transparent border-none', className), onClick: onClick, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
-
-    function useDialogHandlers({ onOpen, onClose } = {}) {
-        useEffect(() => defaultEventBus.subscribe('dialog', (action) => {
-            switch (action.type) {
-                case 'open':
-                    onOpen && onOpen(action);
-                    break;
-                case 'close':
-                    onClose && onClose();
-                    break;
-                default:
-                    assertUnreachable(action);
-            }
-        }), [onOpen, onClose]);
-    }
-
-    function useDialogProps(id, isOpenedOnInit = false) {
-        const [isOpened, { setTrue: open, setFalse: close }] = useBool(isOpenedOnInit);
-        const [params, setParams] = useState({ id });
-        const wasOpened = useRef(isOpened);
-        wasOpened.current ||= isOpened;
-        const handleOpen = useCallback((_) => {
-            if (_.id === id) {
-                setParams(_);
-                open();
-            }
-            else {
-                close();
-            }
-        }, [id]);
-        const handleClose = useCallback(() => {
-            close();
-            defaultEventBus.fire('dialog', { type: 'close' });
-        }, []);
-        useDialogHandlers({
-            onOpen: handleOpen,
-            onClose: close,
-        });
-        return {
-            ...params,
-            isOpened,
-            wasOpened: wasOpened.current,
-            open,
-            close,
-            onClose: handleClose,
-        };
-    }
+    const CloseButton = JSX(({ className, onClose }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-1 bg-transparent border-none', className), onClick: onClose, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
 
     const COOKIE_DIALOG_ID = 'cookie';
     const DIALOG_INITIAL_DELAY = 3 * 1000;
     const CookiePopup = JSX(({ termLink, personalDataPolicyLink }) => {
-        const { isOpened, open, close } = useDialogProps(COOKIE_DIALOG_ID);
+        const [opened, { setTrue: open, setFalse: close }] = useBool();
         useDebouncedEffect(() => {
             if (!globalThis.localStorage?.getItem(COOKIE_DIALOG_ID)) {
                 open();
@@ -3199,274 +3801,72 @@
         const handleClose = useCallback(() => {
             globalThis.localStorage?.setItem(COOKIE_DIALOG_ID, 'true');
             close();
-        }, [close]);
-        return isOpened ? (jsx("div", { className: "container z-40 fixed bottom-0 left-0 right-0 pointer-events-none", children: jsxs("div", { className: "bg-white m-5 p-5 sm:m-6 sm:p-6 rounded-md flex sm:items-center pointer-events-auto shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx("div", { className: "sm:flex-1", children: jsxs(Paragraph, { size: "text-s", font: "font-light", color: "text-primary-text", children: ["\u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442", jsx(LinkWrapper, { isRemote: true, className: style(getStyleLinkWrapper(termLink?.href)), ...termLink, children: "cookie" }), "(\u0444\u0430\u0439\u043B\u044B \u0441 \u0434\u0430\u043D\u043D\u044B\u043C\u0438 \u043E \u043F\u0440\u043E\u0448\u043B\u044B\u0445 \u043F\u043E\u0441\u0435\u0449\u0435\u043D\u0438\u044F\u0445 \u0441\u0430\u0439\u0442\u0430) \u0434\u043B\u044F \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043E\u0432 \u0438 \u0443\u0434\u043E\u0431\u0441\u0442\u0432\u0430 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u0439. \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0437\u0430\u043F\u0440\u0435\u0442\u0438\u0442\u044C \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435 cookie \u0432 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430\u0445 \u0441\u0432\u043E\u0435\u0433\u043E \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.", jsx(LinkWrapper, { isRemote: true, className: style(getStyleLinkWrapper(personalDataPolicyLink?.href)), ...personalDataPolicyLink, children: "\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0430 \u0412\u0430\u0448\u0438\u0445 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445" }), "\u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0441\u044F \u0432 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u044F\u043C\u0438 \u0424\u0435\u0434\u0435\u0440\u0430\u043B\u044C\u043D\u043E\u0433\u043E \u0437\u0430\u043A\u043E\u043D\u0430 \u043E\u0442 27.07.2006 \u2116 152-\u04243 \u00AB\u041E \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445\u00BB."] }) }), jsx("div", { className: "ml-3 sm:ml-0 w-24 flex justify-end", children: jsx(CloseButton, { className: "bg-main-gray rounded-md", onClick: handleClose }) })] }) })) : null;
+        }, []);
+        return opened ? (jsx("div", { className: "container fixed left-0 right-0 bottom-0 z-50", children: jsxs("div", { className: "bg-white m-xl p-xl rounded-md flex sm:items-center shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx("div", { className: "sm:flex-1", children: jsxs(Paragraph, { size: "text-s", font: "font-light", color: "text-primary-text", children: ["\u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442", jsx(LinkWrapper, { isRemote: true, className: linkWrapperStyle(termLink?.href), ...termLink, children: "cookie" }), "(\u0444\u0430\u0439\u043B\u044B \u0441 \u0434\u0430\u043D\u043D\u044B\u043C\u0438 \u043E \u043F\u0440\u043E\u0448\u043B\u044B\u0445 \u043F\u043E\u0441\u0435\u0449\u0435\u043D\u0438\u044F\u0445 \u0441\u0430\u0439\u0442\u0430) \u0434\u043B\u044F \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043E\u0432 \u0438 \u0443\u0434\u043E\u0431\u0441\u0442\u0432\u0430 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u0439. \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0437\u0430\u043F\u0440\u0435\u0442\u0438\u0442\u044C \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435 cookie \u0432 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430\u0445 \u0441\u0432\u043E\u0435\u0433\u043E \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.", jsx(LinkWrapper, { isRemote: true, className: linkWrapperStyle(personalDataPolicyLink?.href), ...personalDataPolicyLink, children: "\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0430 \u0412\u0430\u0448\u0438\u0445 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445" }), "\u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0441\u044F \u0432 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u044F\u043C\u0438 \u0424\u0435\u0434\u0435\u0440\u0430\u043B\u044C\u043D\u043E\u0433\u043E \u0437\u0430\u043A\u043E\u043D\u0430 \u043E\u0442 27.07.2006 \u2116 152-\u04243 \u00AB\u041E \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445\u00BB."] }) }), jsx("div", { className: "ml-s sm:ml-0 w-24 flex justify-end", children: jsx(CloseButton, { className: "bg-main-gray rounded-md", onClose: handleClose }) })] }) })) : null;
     });
-    const getStyleLinkWrapper = (href) => ['inline mx-1', href ? 'text-green-dark' : ''];
+    const linkWrapperStyle = (href) => style('inline mx-1', href ? 'text-green-dark' : '');
 
-    const REGIONS_URL = '/api/v1/regions';
-    function useRegions() {
-        const { data } = useAsyncData(REGIONS_URL, fetchJSONUnsafe);
-        return data || [];
+    function useList(initialList = []) {
+        const [list, setList] = useState(initialList);
+        const push = useCallback((item) => setList((_) => [..._, item]), []);
+        const pop = useCallback(() => setList((_) => _.slice(0, -1)), []);
+        const remove = useCallback((item) => setList((_) => _.filter((currentItem) => currentItem !== item)), []);
+        const clear = useCallback(() => setList([]), []);
+        return [list, { setList, push, pop, remove, clear }];
     }
 
-    const JARO_WINKLER_P = 0.1;
-    const JARO_WINKLER_MAX_L = 4;
-    const jaroWinklerDistance = (s1) => (s2) => {
-        if (s1 === s2) {
-            return 1;
-        }
-        if (!s1 || !s2) {
-            return 0;
-        }
-        const { m, s1Matches, s2Matches } = computeM(s1, s2);
-        if (m === 0) {
-            return 0;
-        }
-        const t = computeT(s1, s2, { s1Matches, s2Matches });
-        const jaroWeight = (m / s1.length + m / s2.length + (m - t / 2) / m) / 3;
-        const winklerWeight = jaroWeight > 0.7 ? computePrefixL(s1, s2) * JARO_WINKLER_P : 0;
-        return jaroWeight + winklerWeight * (1 - jaroWeight);
-    };
-    function computeM(s1, s2) {
-        const range = Math.max(0, Math.floor(Math.max(s1.length, s2.length) / 2) - 1);
-        const s1Matches = new Array(s1.length);
-        const s2Matches = new Array(s2.length);
-        let m = 0;
-        for (let i = 0; i < s1.length; i++) {
-            const low = Math.max(0, i - range);
-            const high = Math.min(i + range, s2.length - 1);
-            for (let j = low; j <= high; j++) {
-                if (s1Matches[i] || s2Matches[j] || s1[i] !== s2[j]) {
-                    continue;
-                }
-                m++;
-                s1Matches[i] = true;
-                s2Matches[j] = true;
-            }
-        }
-        return { m, s1Matches, s2Matches };
-    }
-    function computeT(s1, s2, { s1Matches, s2Matches }) {
-        let t = 0;
-        for (let i = 0, k = 0; i < s1.length; i++) {
-            if (!s1Matches[i]) {
-                continue;
-            }
-            let j = k;
-            for (; j < s2.length; j++) {
-                if (s2Matches[j]) {
-                    k = j + 1;
+    const DialogManager = JSX(() => {
+        const [dialogs, { push, pop, clear }] = useList();
+        const closeAll = useCallback(() => {
+            for (const _ of dialogs) {
+                _.onClose && _.onClose();
+            }
+            clear();
+        }, [dialogs]);
+        const close = useCallback(() => {
+            const _ = dialogs[dialogs.length - 1];
+            _?.onClose && _.onClose();
+            pop();
+        }, [dialogs]);
+        useEffect(() => defaultEventBus.subscribe('dialog', (action) => {
+            switch (action.type) {
+                case 'open':
+                    push(action);
                     break;
-                }
-            }
-            if (s1[i] !== s2[j]) {
-                t++;
+                case 'close':
+                    if (action.all) {
+                        closeAll();
+                    }
+                    else {
+                        close();
+                    }
+                    break;
+                default:
+                    assertUnreachable(action);
             }
-        }
-        return t;
-    }
-    function computePrefixL(s1, s2) {
-        let prefixL = 0;
-        while (s1[prefixL] === s2[prefixL] && prefixL < JARO_WINKLER_MAX_L) {
-            prefixL++;
-        }
-        return prefixL;
-    }
-
-    const groupBy = (list, keyGetter) => {
-        const result = new Map();
-        for (const item of list) {
-            const key = keyGetter(item);
-            const group = result.get(key) || [];
-            result.set(key, [...group, item]);
-        }
-        return result;
-    };
-
-    const Dialog = JSX(({ className, isOpened, head, children, onClose }) => {
+        }), [closeAll, close]);
         useEffect(() => {
             const handleEscape = ({ key }) => {
                 if (key === 'Escape') {
-                    onClose && onClose();
+                    close();
                 }
             };
             globalThis.document?.addEventListener('keydown', handleEscape);
             return () => {
                 globalThis.document?.removeEventListener('keydown', handleEscape);
             };
-        }, [onClose]);
-        return isOpened ? (jsx("div", { className: style('fixed inset-0 bg-white text-l font-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar', className), role: "dialog", children: jsxs("div", { className: "relative container pb-6xl min-h-full", children: [jsxs("div", { className: "sticky bg-white pt-xl top-0", children: [jsx(CloseButton, { className: "absolute top-0 -right-6xl", onClick: onClose }), head] }), children] }) })) : null;
-    });
-
-    const SearchBar = JSX(({ className, searchTerm, onSearch }) => {
-        return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsx("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-44 gap-3.5 pointer-events-none", children: searchTerm ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text `, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0444\u0438\u043B\u0438\u0430\u043B\u0430\u043C" })) }), jsx("input", { id: "search-bar-input", className: `h-12 pl-4 w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text`, value: searchTerm, onChange: (e) => onSearch(e.target.value.toLowerCase()), type: "text", name: "location-search-bar-input" })] }));
-    });
-
-    const SEARCH_TERM_MIN_LENGTH = 3;
-    const LOCATION_DIALOG_ID = 'location';
-    const LocationDialog = JSX(({ currentLocation, onChangeLocation, foreignOffices }) => {
-        const dialogProps = useDialogProps(LOCATION_DIALOG_ID);
-        const [query, setQuery] = useState('');
-        const regions = cleanUpRegions(useRegions()).sort((a, b) => a.name.localeCompare(b.name));
-        const regionsGroupByLetter = groupBy(regions, regionFirstLetter);
-        const handleChangeLocation = useCallback((region) => {
-            dialogProps.onClose && dialogProps.onClose();
-            onChangeLocation && onChangeLocation(region);
-        }, [dialogProps.onClose, onChangeLocation]);
-        return (jsxs(Dialog, { ...dialogProps, head: jsxs("div", { children: [jsx(CurrentLocation, { currentLocation: currentLocation, onChangeLocation: handleChangeLocation }), jsx(SearchBar, { onSearch: setQuery, searchTerm: query })] }), children: [query && query.length >= SEARCH_TERM_MIN_LENGTH ? (jsx("div", { children: regions
-                        .filter(({ name }) => name && jaroWinklerDistance(name.toLowerCase())(query.toLowerCase()) >= 0.8)
-                        .map(renderRegion(handleChangeLocation)) })) : (jsx("div", { className: "columns-5", children: Array.from(regionsGroupByLetter.entries()).map(renderRegionGroup(handleChangeLocation)) })), jsx(ForeignOffices, { foreignOffices: foreignOffices })] }));
-    });
-    const regionFirstLetter = (region) => region.name?.charAt(0) || '';
-    const cleanUpRegions = (regions) => regions.map((region) => ({
-        ...region,
-        name: region.name?.replace(/республика|область|край'/gi, '').trim() || '',
-    }));
-    const CurrentLocation = JSX(({ currentLocation, onChangeLocation }) => currentLocation ? (jsxs("div", { className: "mb-4", children: [jsx(Text, { size: "text-l", font: "font-light", children: "\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u044B\u0431\u0440\u0430\u043D:\u00A0" }), jsx("button", { className: "cursor-pointer", onClick: () => {
-                    onChangeLocation && onChangeLocation(currentLocation);
-                }, children: jsx(Text, { color: "text-primary-main", children: currentLocation.name }) })] })) : null);
-    const renderRegionGroup = (onChangeLocation) => ([letter, regions]) => (jsxs("div", { className: "break-inside-avoid mb-2xl w-56", children: [jsx("div", { className: "mb-s", children: jsx(Text, { size: "text-h6", children: letter }) }), regions.map(renderRegion(onChangeLocation))] }, letter));
-    const renderRegion = (onChangeLocation) => (region) => (jsx("div", { className: "mb-2xs", children: jsx("button", { className: "cursor-pointer hover:text-primary-hover", onClick: () => {
-                onChangeLocation && onChangeLocation(region);
-            }, children: region.name || '' }) }, region.id));
-    const ForeignOffices = JSX(({ foreignOffices }) => foreignOffices?.length ? (jsxs("div", { className: "border-t border-main-divider mt-2xs pt-2xs", children: [jsx("div", { className: "mb-m", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: "\u041F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435\u043B\u044C\u0441\u0442\u0432\u0430 \u0437\u0430 \u0440\u0443\u0431\u0435\u0436\u043E\u043C:" }) }), jsx("div", { className: "flex gap-10", children: foreignOffices.map((office, i) => (jsx(ForeignOffice, { ...office }, String(i)))) })] })) : null);
-    const ForeignOffice = JSX(({ icon, ...rest }) => {
-        const link = useLink();
-        const { text, target, href, onClick } = link(rest);
-        return (jsxs("div", { className: "flex gap-x-3", children: [icon ? jsx(Img, { pathPrefix: "/wcms-resources/", image: icon }) : null, text ? (jsx("a", { className: "hover:text-primary-hover", href: href, target: target, onClick: onClick, children: text })) : null] }));
-    });
-
-    const compareBy = (indexOf) => (a, b) => indexOf(a) - indexOf(b);
-    const desc = (cmp) => (a, b) => -cmp(a, b);
-
-    function zip(firstCol, ...restCols) {
-        return firstCol.map((firstEl, rowIndex) => [firstEl, ...restCols.map((col) => col[rowIndex])]);
-    }
-
-    const joinMaps = (aggregate, emptyVal) => (acc, map) => {
-        for (const [key, b] of map) {
-            acc.set(key, aggregate(acc.get(key) || emptyVal, b));
-        }
-        return acc;
-    };
-
-    const MIN_TERM_LEN = 3;
-    const tokenize = (text) => text
-        .toLowerCase()
-        .split(/[^0-9a-zа-я-]+/)
-        .filter((token) => token.length >= MIN_TERM_LEN && !/[0-9a-z]/.test(token));
-
-    const textRank = (queryTokens) => (text) => {
-        const textTokens = tokenize(text || '');
-        return textTokens.length
-            ? sum(queryTokens.map((qToken) => max(textTokens.map(jaroWinklerDistance(qToken)))))
-            : 0;
-    };
-
-    const JW_THRESHOLD = 0.8;
-    const RANK_EPS = 0.001;
-    const search = (query) => (searchIndex) => {
-        const { corpus, dictionary } = searchIndex || {};
-        if (!query || !corpus?.length || !dictionary || !Object.keys(dictionary).length) {
-            return [];
-        }
-        const queryTokens = tokenize(query);
-        if (!queryTokens.length) {
-            return [];
-        }
-        const dictEntries = Object.entries(dictionary);
-        const pagesRanking = queryTokens
-            .map(computePagesRankingPerToken(dictEntries))
-            .reduce(joinMaps((a, b) => a + b, 0), new Map());
-        const relevantPages = [...pagesRanking.entries()]
-            .filter(([, pageRank]) => pageRank >= (JW_THRESHOLD - RANK_EPS) * queryTokens.length) // Multiplication of query tokens
-            .map(([pageIndex]) => corpus[pageIndex]);
-        return sortResultsByRank(queryTokens)(relevantPages);
-    };
-    const computePagesRankingPerToken = (dictEntries) => (qToken) => dictEntries
-        .map(([stem, pageIndices]) => [jaroWinklerDistance(qToken)(stem), pageIndices])
-        .filter(([stemRank]) => stemRank >= JW_THRESHOLD)
-        .map(([stemRank, pageIndices]) => fillMapWith(pageIndices, stemRank))
-        .reduce(joinMaps(Math.max, 0), new Map());
-    const sortResultsByRank = (queryTokens) => (results) => zip(results, results.map(({ title }) => title).map(textRank(queryTokens)))
-        .sort(desc(compareBy(([, pageTitleRank]) => pageTitleRank)))
-        .map(([corpusItem]) => corpusItem);
-    const fillMapWith = (keys, value) => new Map(keys.map((_) => [_, value]));
-
-    const SEARCH_INDEX_FILENAME = 'search.index.json';
-    const DEFAULT_BASE_PATH = ['/'];
-    const useSearch = ({ basePathList = DEFAULT_BASE_PATH, initialQuery = '', wasOpened, }) => {
-        const [query, setQuery] = useState(initialQuery || '');
+        }, [close]);
         useEffect(() => {
-            if (initialQuery !== undefined && initialQuery !== null) {
-                setQuery(initialQuery);
+            if (dialogs.length) {
+                globalThis.document?.body.classList.add('no-scrollbar');
             }
-        }, [initialQuery]);
-        const key = useMemo(() => basePathList.map((_) => (wasOpened ? _ : null)), // Load search index on very first search
-        [wasOpened, basePathList]);
-        const { data } = useAsyncData(key, fetchSearchIndex);
-        const [result, setResult] = useState(null);
-        useDebouncedEffect(() => {
-            if (data) {
-                setResult(data.map(search(query)));
+            else {
+                globalThis.document?.body.classList.remove('no-scrollbar');
             }
-        }, [data, query]);
-        return [result, { value: query, onChange: setQuery }];
-    };
-    const fetchSearchIndex = async (...basePathList) => (await Promise.allSettled(basePathList.map((basePath) => fetchJSON(joinPath(basePath, '/', SEARCH_INDEX_FILENAME))))).map((_) => (_.status === 'fulfilled' ? _.value : {}));
-
-    const Sitemap = JSX(({ className, topItems }) => {
-        const link = useLink({ isRemote: true });
-        return (jsx("div", { className: style('flex items-start justify-between', className), children: topItems?.map(link).map(renderColumn) }));
-    });
-    const renderColumn = (menuItem, index) => {
-        const { text, items, href, target, onClick } = menuItem;
-        return (jsxs("div", { className: "flex flex-col gap-3.5 w-1/4", children: [jsx("a", { className: "leading-5 text-l text-primary-text hover:text-primary-main no-underline", href: href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }), items?.map((_, i) => (jsx(ColumnItem, { ..._, basePath: appendSlash(href), index: i }, String(i))))] }, String(index)));
-    };
-    const ColumnItem = JSX(({ text, index, basePath, ...rest }) => {
-        const isAnotherPortal = projectSettings.BASE_PATH && basePath ? !projectSettings.BASE_PATH.startsWith(basePath) : false;
-        const link = useLink({ isRemote: isAnotherPortal, basePath });
-        const { href, target, onClick } = link(rest);
-        return (jsx("a", { className: style('text-l font-light text-secondary-text hover:text-primary-main no-underline', 'overflow-x-hidden overflow-ellipsis whitespace-nowrap'), href: href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }));
-    });
-
-    const SearchInput = JSX(({ className, value, autoFocus, onChange, onFocus }) => {
-        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' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-12 pl-12 w-full 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: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", autoFocus: autoFocus, onChange: handleChange, onFocus: onFocus })] }));
+        }, [dialogs]);
+        return dialogs.length ? (jsx("div", { className: "fixed inset-0 z-50", role: "dialog", children: dialogs.map(({ dialog, id }, i) => (jsx("div", { className: style('absolute inset-0 overflow-x-hidden overflow-y-scroll no-scrollbar', i === dialogs.length - 1 ? '' : 'hidden'), children: dialog }, String(id || i)))) })) : null;
     });
 
-    const SEARCH_DIALOG_ID = 'search';
-    const SearchDialog = JSX(({ topItems }) => {
-        const dialogProps = useDialogProps(SEARCH_DIALOG_ID);
-        const basePathList = useMemo(() => topItems?.map((_) => _.href || '/'), [topItems]);
-        const [searchResult, searchInputProps] = useSearch({
-            basePathList,
-            initialQuery: dialogProps.message,
-            wasOpened: dialogProps.wasOpened,
-        });
-        const searchItems = useMemo(() => combineTopItemsAndSearchResult(topItems)(searchResult), [topItems, searchResult]);
-        useEffect(() => printSearchItems(searchItems), [searchItems]); // Temp
-        return (jsx(Dialog, { ...dialogProps, head: jsx(SearchInput, { autoFocus: true, ...searchInputProps }), children: jsx(Sitemap, { topItems: searchItems }) }));
-    });
-    const combineTopItemsAndSearchResult = (topItems) => (searchResult) => topItems?.length && searchResult?.length
-        ? zip(topItems, searchResult).map(([_, portalSearchResult]) => ({
-            ..._,
-            items: portalSearchResult?.map(({ title, uri }) => ({ text: title, href: joinPath('/', uri) })),
-        }))
-        : [];
-    // Temp
-    function printSearchItems(topItems) {
-        for (const _ of topItems.filter(({ items }) => items?.length)) {
-            console.group(_.text);
-            console.table(_.items, ['text', 'href']);
-            console.groupEnd();
-        }
-    }
-
     const api = LikeAPI();
     function useLikeService(pagePath) {
         const [likeCount, setLikeCount] = useState(0);
@@ -3517,23 +3917,8 @@
             blockDecorator,
             parent: data,
         };
-        const sitemap = useSWRResource(projectSettings.SITEMAP || 'sitemap', data?.fallback);
-        const [location, onChangeLocation] = useLocation(sitemap?.defaultLocation);
         useBlockRouterProvider();
-        const [isSomeDialogOpened, { setTrue: setSomeDialogOpened, setFalse: resetSomeDialogOpened }] = useBool();
-        useDialogHandlers({
-            onOpen: setSomeDialogOpened,
-            onClose: resetSomeDialogOpened,
-        });
-        return (jsxs("section", { className: style('relative @container', pageStyle, className, isSomeDialogOpened ? 'overflow-hidden h-screen' : ''), "data-theme": colorPalette, children: [slots?.header ? (jsx("div", { className: "relative z-10 mb-5 shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, {
-                        ...options,
-                        slotName: 'header',
-                        extraProps: { sitemap, location },
-                    }) })) : null, jsxs("div", { className: "container @lg:grid @lg:grid-cols-12 @lg:gap-1", children: [renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } }), renderBlocksList(slots?.footer, {
-                            ...options,
-                            slotName: 'footer',
-                            extraProps: { sitemap, location },
-                        })] }), likeControl ? renderLikeControl() : null, jsx(CookiePopup, { termLink: { href: '/pd-policy#cookie', target: '_blank' }, personalDataPolicyLink: { href: '/pd-policy', target: '_blank' } }), jsx(SearchDialog, { topItems: sitemap?.topItems }), jsx(LocationDialog, { currentLocation: location, foreignOffices: sitemap?.foreignOffices, onChangeLocation: onChangeLocation })] }));
+        return (jsxs("div", { children: [jsxs("section", { className: style('relative @container', pageStyle, className), "data-theme": colorPalette, children: [slots?.header ? (jsx("div", { className: "relative z-10 mb-5 shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, { ...options, slotName: 'header' }) })) : null, jsxs("div", { className: "container @lg:grid @lg:grid-cols-12 @lg:gap-1", children: [renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } }), renderBlocksList(slots?.footer, { ...options, slotName: 'footer' })] }), likeControl ? renderLikeControl() : null] }), jsx(DialogManager, {}), jsx(CookiePopup, { termLink: { href: '/pd-policy#cookie', target: '_blank' }, personalDataPolicyLink: { href: '/pd-policy', target: '_blank' } })] }));
     });
     ContentPage.childrenTypes = [];
     ContentPage.slots = () => ['header', 'footer'];
@@ -3543,7 +3928,7 @@
 
     const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
 
-    const packageVersion = "0.12.13";
+    const packageVersion = "0.13.0";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;