@redneckz/wildless-cms-uni-blocks 0.14.246 → 0.14.248

package/bundle/bundle.umd.js

@@ -1849,60 +1849,109 @@
         .filter((input) => !input?.condition ||
         input?.condition.values.find((_) => _ === data?.[input?.condition?.name]));
 
-    /** @deprecated */
-    const AlignStyles = 'text-center';
+    const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
 
-    const iconBgStyles = {
-        '': 'bg-main-divider group-data-secondary:bg-white/30',
-        primary: 'bg-main-divider',
-        secondary: 'bg-secondary-light',
-        opacity: 'bg-white/30',
-    };
-    const RoundedIcon = JSX(({ className, defaultIconSize = 44, iconBgVersion = 'primary', size, icon, ...rest }) => {
-        const widthAndHeight = String(size?.width || defaultIconSize);
-        return icon ? (jsx("div", { style: {
-                width: `${widthAndHeight}px`,
-                height: `${widthAndHeight}px`,
-            }, className: style('rounded-icon object-fit flex justify-center items-center', iconBgStyles[iconBgVersion], className), children: jsx(Icon, { ...rest, width: "54%", height: "54%", name: icon }) })) : null;
+    const SlideCheckboxGroup = JSX(({ value, onChange, items = [], multiple }) => {
+        const handleChange = (newValue) => {
+            if (!onChange) {
+                return;
+            }
+            const hasAlready = value?.includes(newValue);
+            if (multiple) {
+                onChange(hasAlready ? (value || []).filter((v) => v !== newValue) : [...(value || []), newValue]);
+            }
+            else {
+                onChange(hasAlready ? [] : [newValue]);
+            }
+        };
+        return items.map((item) => (jsx(SlideCheckbox, { text: item?.title, value: [value].flatMap((_) => _).includes(item.value), onChange: () => handleChange(item.value), type: multiple ? 'checkbox' : 'radio' }, item.value)));
     });
 
-    const defaultIconSize = 44;
-
-    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [title ? jsx(Heading, { headingType: "h3", as: "h2", className: AlignStyles, title: title }) : null, benefitList?.length ? (jsx("div", { className: "flex flex-col @md:flex-row flex-wrap w-full @md:justify-center mt-xl gap-5xl", role: "list", children: benefitList.map(renderBenefit) })) : null] })));
-    const renderBenefit = ({ label, description, items, icon, iconBgVersion, isDotted = false }, i) => (jsxs("div", { className: "flex gap-m items-center @md:basis-1/2 @md:max-w-[500px]", role: "listitem", children: [icon?.icon ? (jsx(RoundedIcon, { className: "shrink-0", defaultIconSize: defaultIconSize, iconBgVersion: iconBgVersion || '', ...icon })) : null, icon?.src ? jsx(Img, { className: "shrink-0", image: icon }) : null, label ? (jsxs("div", { className: "@sm:h-full space-y-xs", children: [jsx(Heading, { headingType: "h6", children: label }), jsx(Text, { size: "text-l", color: "text-secondary-text group-data-secondary:text-white/80", font: "font-light", children: description }), jsx(List, { dotClassName: "bg-secondary-text", listItemSize: "S", items: items, isDotted: isDotted })] })) : null] }, String(i)));
+    const FiltrationForm = JSX(({ children, filtrationSchema, resetButton, field, reset }) => (jsxs("form", { className: "flex flex-col @4xl:flex-row justify-between bg-white p-4xl gap-s @4xl:gap-0", children: [jsxs("div", { className: "flex flex-col @4xl:flex-row gap-xl", children: [children, joinList(jsx("div", { className: "h-full w-px bg-gray" }))(
+                    // TS can't correctly refine array's type after filter
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                    Object.entries(filtrationSchema).map(renderFormItem(field)).filter(Boolean))] }), resetButton ? (jsx("div", { children: jsx(Button, { type: "reset", className: "w-full @4xl:w-56 @4xl:ml-s", onClick: reset, children: resetButton?.text }) })) : null] })));
+    const renderFormItem = (field) => ([key, item]) => {
+        const type = item?.type;
+        switch (type) {
+            case 'array':
+                return renderArrayFormItem(key, field)(item);
+            default:
+                return null;
+        }
+    };
+    const renderArrayFormItem = (key, field) => (item) => item?.ui !== 'dropdown' ? renderCheckboxes(key, field)(item) : null;
+    const renderCheckboxes = (key, field) => (item) => {
+        const options = item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
+            [];
+        return (jsxs("div", { className: "flex-1", children: [item?.title ? (jsx("div", { className: "mb-m", children: jsx(Text, { size: "text-m", font: "font-medium", color: "text-primary-text", children: item.title }) })) : null, jsx(SlideCheckboxGroup, { items: options, multiple: !item?.single, ...field(key) })] }, key));
+    };
 
-    const bonusBenefitStyles = 'items-center';
+    function zip(firstCol, ...restCols) {
+        return firstCol.map((firstEl, rowIndex) => [firstEl, ...restCols.map((col) => col[rowIndex])]);
+    }
 
-    const renderBonusBenefit = (cardTextAlign) => ({ icon, title, description }, i) => (jsxs("div", { className: style('flex flex-col gap-1', bonusBenefitStyles, !description && !title ? 'justify-center' : ''), children: [title ? (jsx(Text, { size: "text-h6", font: "font-normal", align: cardTextAlign, children: title })) : null, icon ? jsx(Img, { image: icon, height: "180", className: "w-auto mx-auto" }) : null, description ? (jsx(Text, { size: "text-h6", font: "font-normal", align: cardTextAlign, children: description })) : null] }, String(i)));
+    const isEmpty = (v) => v === null ||
+        v === undefined ||
+        v === '' ||
+        (Array.isArray(v) && v.length === 0) ||
+        (typeof v === 'object' && Object.keys(v).length === 0);
 
-    const renderBonusBenefits = (bonusBenefits, columnsCount, cardTextAlign) => (jsx("div", { className: `grid gap-2xs ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit(cardTextAlign)) }));
-    const getElementsColsValue = (colValue) => {
-        switch (colValue) {
-            case '3':
-                return 'grid-cols-3';
-            case '4':
-                return 'grid-cols-4';
-            case '5':
-                return 'grid-cols-5';
-            default:
-                return 'grid-cols-5';
+    const isSingularFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) || isEmpty(target[key]) || pattern[key] === target[key];
+    const isMultipleFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) ||
+        isEmpty(target[key]) ||
+        pattern[key]?.every((_) => target[key]?.includes(_));
+    const isNumberFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) ||
+        isEmpty(target[key]) ||
+        naturalNumber(pattern[key]) <= naturalNumber(target[key]);
+    const isMultipleNumberFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) || isEmpty(target[key]) || target[key]?.includes(pattern[key]);
+    const isValueInRange = (key, pattern) => (target) => isEmpty(pattern[key]) ||
+        isEmpty(target[key]) ||
+        (naturalNumber(pattern[key]?.min) >= naturalNumber(target[key]?.min) &&
+            naturalNumber(pattern[key]?.min) <= naturalNumber(target[key]?.max));
+    const targetMatchPattern = (pattern, target) => Object.entries(pattern)
+        .map(([key, subPattern]) => {
+        if (typeof subPattern === 'number') {
+            return Array.isArray(target[key])
+                ? isMultipleNumberFieldMatch(key, pattern)
+                : isNumberFieldMatch(key, pattern);
         }
-    };
+        if (typeof subPattern === 'object' && 'min' in subPattern && 'max' in subPattern) {
+            return isValueInRange(key, pattern);
+        }
+        return Array.isArray(subPattern)
+            ? isMultipleFieldMatch(key, pattern)
+            : isSingularFieldMatch(key, pattern);
+    })
+        .every((predicate) => predicate(target));
+    const naturalNumber = (n) => Number(n || 0);
 
-    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'text-center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: style('space-y-3xl', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { defaultPadding: "", title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length
-                ? renderBonusBenefits(bonusBenefits, columnsCount, cardTextAlign)
-                : null] })));
+    const filterBlocks = (blocksWithProps, filtrationState) => (normalize = identity) => blocksWithProps
+        ?.filter(([, content]) => targetMatchPattern(filtrationState, normalize(content) || {}))
+        .map(([block]) => block);
 
-    const AlignJustifyStyle = {
-        start: 'justify-start',
-        center: 'justify-center',
-        end: 'justify-end',
+    const useFiltrationForm = (initialFormState, { block, page, normalize = identity, }) => {
+        const blocks = block?.blocks || [];
+        const [filtrationState, { field, reset, update: replaceFiltrationState }] = useForm(initialFormState);
+        const blocksWithProps = useMemo(() => zip(blocks, blocks.map((b) => resolveBlockProps(b.content, page?.fallback))), [blocks, page?.fallback]);
+        const blocksToRender = filtrationState === initialFormState
+            ? blocks
+            : filterBlocks(blocksWithProps, filtrationState)(normalize);
+        return [
+            filtrationState,
+            { blocksToRender, blocksWithProps },
+            { field, reset, update: replaceFiltrationState },
+        ];
     };
 
-    const ButtonsBlock = JSX(({ buttons, className = '', align, ...rest }) => {
-        const alignStyle = align ? style('flex', AlignJustifyStyle[align]) : '';
-        return (jsx(BlockWrapper, { className: style('!bg-transparent', alignStyle, className), defaultPadding: "p-0", ...rest, children: renderButtonsSection(buttons) }));
-    });
+    /** @deprecated */
+    const AlignStyles = 'text-center';
+
+    const NotFound = JSX(({ title, description }) => (jsxs("div", { className: "bg-white p-6xl py-20 flex gap-s flex-col @xl:items-center", children: [jsx(Img, { image: { icon: 'MagnifierIcon', iconVersion: 'normal' }, width: "120", height: "120" }), jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: AlignStyles })] })));
+
+    const getBorderStyle = (showBorder = false) => showBorder
+        ? 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider'
+        : '';
 
     const useCarouselControls = (props, initialIndex = 0) => {
         const { itemCount, visibleItemCount } = props;
@@ -1926,211 +1975,119 @@
         ];
     };
 
-    /** @deprecated */
-    const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(LinkButton, { rounded: true, className: style('group/btn w-12 h-12 min-h-12 max-h-12 flex items-center justify-center shadow-main-black', disabled
-            ? 'bg-secondary-light text-secondary-text'
-            : 'bg-white text-primary-text hover:text-primary-main', className || ''), disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover/btn:text-primary-main", width: "16", height: "16" }) })));
-    /** @deprecated */
-    const ScrollLeftButton = JSX((props) => (jsx(ArrowButton, { ...props, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })));
-    /** @deprecated */
-    const ScrollRightButton = JSX((props) => (jsx(ArrowButton, { ...props, className: `${props.className || ''} rotate-180`, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })));
-
-    /** @deprecated */
-    function renderArrows({ dec, inc, canDec, canInc, btnClass, className = '', }) {
-        const isVisible = canDec || canInc;
-        if (!isVisible) {
-            return null;
+    const mapChildren = (mapper) => (children) => {
+        if (children === null || children === undefined) {
+            return children;
         }
-        return (jsxs("div", { children: [canDec ? (jsx(ArrowButton, { className: style('absolute z-40', btnClass[0], className), onClick: dec, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left", disabled: !canDec })) : null, canInc ? (jsx(ArrowButton, { className: style('absolute z-40 rotate-180', btnClass[1], className), onClick: inc, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right", disabled: !canInc })) : null] }));
-    }
-
-    const calculatorValueBlockStyle = 'flex justify-between @xl:flex-col';
-    const CalculatorValueBlock = JSX(({ className, title, value, fractionDigits, fixed, prefix, postfix }) => (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: jsx(Text, { size: "text-h3", children: [prefix, toLocalNumberFormat(fractionDigits, { fixed })(value), postfix]
-                        .filter(Boolean)
-                        .join(' ') }) })) : (jsx("div", { children: jsx(Text, { size: "text-h3", children: "-" }) }))] })));
-
-    const DEFAULT_MIN_SUM$1 = 10000;
-    const DEFAULT_MAX_SUM$1 = 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 = 1;
-    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 = 60;
-    const MONTHS_IN_YEAR = 12;
-    const MONTHLY_INTEREST_RATE = MONTHS_IN_YEAR * 100;
-    const DEFAULT_CREDIT_CALCULATOR_PARAMS = {
-        minSum: DEFAULT_MIN_SUM$1,
-        maxSum: DEFAULT_MAX_SUM$1,
-        minMonths: DEFAULT_MIN_MONTHS,
-        maxMonths: DEFAULT_MAX_MONTHS,
-        rate: 0,
-        isSalaryClient: false,
-        isPensionClient: false,
-        isStateEmployee: false,
-        isInsurance: true,
-    };
-    const DEFAULT_REFINANCING_CALCULATOR_PARAMS = {
-        minSum: DEFAULT_MIN_SUM$1,
-        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: 0,
-        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: 100000001,
-        minMonths: 2,
-        maxMonths: 10,
-        rate: 0,
-        isMonthlyInterestPayment: true,
-        isRemoteRegistration: true,
-    };
-    const DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS = {
-        minSum: 1000,
-        maxSum: 100000001,
-        minDays: BUSINESS_MIN_DAYS,
-        maxDays: BUSINESS_MAX_DAYS,
-        rate: 0,
-        isMonthlyInterestPayment: true,
-        isReplenished: false,
-        isPartialWithdrawal: false,
-        depositeName: "Депозит 'Стабильный'",
+        return Array.isArray(children) ? children.map(mapper) : mapper(children, 0);
     };
 
-    const getBonus = (params, bonusTravelValue, bonusOtherValue) => {
-        const { maxBonus = 5000, prefMonthsNum = DEFAULT_BONUS_CALCULATOR_PARAMS.prefMonthsNum, prefTravelBonusRate = DEFAULT_BONUS_CALCULATOR_PARAMS.prefTravelBonusRate, prefRestBonusRate = 0.01, travelBonusRate = 0.015, restBonusRate = 0.01, } = params;
-        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];
-    };
+    const HEADER_HEIGHT = 170;
+    const FOOTER_HEIGHT = 48;
+    const BLOCKS_GAP = 4;
+    const PAGE_PADDINGS_X = 20;
+    const DEFAULT_HEIGHT = 866;
+    const getContainerHeight = (minHeight) => ({
+        height: `calc(100vh - ${HEADER_HEIGHT + FOOTER_HEIGHT + BLOCKS_GAP + PAGE_PADDINGS_X}px)`,
+        minHeight: `${minHeight || DEFAULT_HEIGHT}px`,
+    });
 
-    const getBonusCalculatorParams = (userInputParams, calcSource) => {
-        const { travelExpenseValue, restExpenseValue } = userInputParams;
-        const [monthBonus, yearBonus] = getBonus(calcSource || DEFAULT_BONUS_CALCULATOR_PARAMS, travelExpenseValue, restExpenseValue);
-        return {
-            ...calcSource,
-            ...userInputParams,
-            monthBonus,
-            yearBonus,
-        };
-    };
-
-    const renderFootnote = (text) => text ? (jsx(Paragraph, { size: "text-s", font: "font-light", color: "text-secondary-text", children: text })) : null;
-
-    const Rate = JSX(({ rate = 0, title = 'Ставка', unit, fractionDigits = 2, depositeName, isShowDepositeName }) => (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: "font-mohave text-title-huge pr-xl -mt-m tracking-[-15px]", children: toLocalNumberFormat(fractionDigits, { fixed: true })(rate) }), unit ? jsx("span", { className: "text-7xl", children: unit }) : null] }), depositeName && isShowDepositeName ? (jsx("div", { className: "absolute bottom-2 w-full text-left whitespace-nowrap", children: depositeName })) : null] })] })));
-
-    const UnknownRate = JSX(({ title = 'Ставка', isUnavailableByTerm = false }) => (jsxs("div", { className: "space-y-s", children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsx(Icon, { className: "w-10 h-10 @5xl:h-auto @5xl:w-40", name: "PercentIcon" }), jsx("div", { className: "w-64", children: isUnavailableByTerm ? (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"] })) : (jsx(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0434\u0440\u0443\u0433\u0443\u044E \u0441\u0443\u043C\u043C\u0443 \u0438\u043B\u0438 \u0441\u0440\u043E\u043A" })) })] })));
-
-    const renderRate = ({ title = 'Ставка', rate = 0, unit = '%', fractionDigits = 2, isUnknownRateShown = true, ...rest }) => isUnknownRateShown && rate === 0 ? (jsx(UnknownRate, { title: title, ...rest })) : (jsxs("div", { children: [jsx("div", { className: "hidden @xl:block", children: jsx(Rate, { title: title, rate: rate, unit: unit, fractionDigits: fractionDigits, ...rest }) }), jsx("div", { className: "@xl:hidden", children: jsx(CalculatorValueBlock, { title: title, value: rate, postfix: unit, fractionDigits: fractionDigits, fixed: true, ...rest }) })] }));
-
-    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 SENSITIVITY_SCALE = 10;
+    function useIntersectionObserver(observerCallback, { sensitivity, rootRef } = {}) {
+        const ref = useRef(null);
+        const observerOptions = useMemo(() => ({ threshold: sensitivityToThreshold(sensitivity), root: rootRef?.current }), [sensitivity, rootRef?.current]);
+        useEffect(() => {
+            if (!ref.current) {
+                return undefined;
+            }
+            const intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
+            intersectionObserver.observe(ref.current);
+            return () => {
+                intersectionObserver.disconnect();
+            };
+        }, [observerCallback, observerOptions]);
+        return ref;
+    }
+    function sensitivityToThreshold(sensitivity = 0) {
+        const thresholdsCount = Math.round(sensitivity * SENSITIVITY_SCALE);
+        return Array.from({ length: thresholdsCount })
+            .fill(0)
+            .map((_, thi) => Math.min(thi / thresholdsCount), 1)
+            .concat(1);
     }
 
-    const BonusCalculatorForm = JSX(({ className = '', calcSource, buttons, footnote }) => {
-        const [userInputParams, { field }] = useForm({
-            travelExpenseValue: DEFAULT_TRAVEL_MIN_SUM,
-            restExpenseValue: DEFAULT_REST_MIN_SUM,
-        });
-        const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } = getBonusCalculatorParams(userInputParams, calcSource);
-        return (jsxs("section", { className: style('flex flex-col justify-between @5xl:flex-row gap-y-4xl', className), children: [jsxs("div", { className: "flex flex-col @xl:max-w-md gap-2xl border-b border-b-main-divider @xl:border-none pb-3xl @xl:pb-0", children: [renderWantedSumInput({
-                            title: 'Сумма покупок в категории путешествия, ₽',
-                            min: minSumTravel,
-                            max: maxSumTravel,
-                            step: 500,
-                            isShowItems: false,
-                            ...field('travelExpenseValue'),
-                        }), renderWantedSumInput({
-                            title: 'Сумма покупок в остальных категориях, ₽',
-                            min: minSumOther,
-                            max: maxSumOther,
-                            step: 500,
-                            isShowItems: false,
-                            ...field('restExpenseValue'),
-                        })] }), monthBonus >= 0
-                    ? renderRate({
-                        title: 'Баллов за месяц',
-                        rate: monthBonus,
-                        fractionDigits: 0,
-                        isUnknownRateShown: false,
-                        unit: '',
-                    })
-                    : null, jsxs("div", { className: "flex flex-col gap-y-xl @xl:w-96", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] })] }));
+    const SwipeListItem = JSX(({ className, style: inlineStyle, idx, activeIndex, observerOptions, children, onIntersection, }) => {
+        const observerCallback = useCallback((entries) => {
+            if (entries.length && onIntersection) {
+                onIntersection(idx || 0, entries[entries.length - 1]);
+            }
+        }, [onIntersection, idx]);
+        const ref = useIntersectionObserver(observerCallback, observerOptions);
+        return (jsx("div", { className: style('inline-block snap-always box-border', className), style: inlineStyle, "aria-current": Boolean(idx === activeIndex), ref: ref, role: "listitem", children: children }));
     });
 
-    const CalculatorFormLayout = JSX(({ className, inputChildren, rateChildren, resultChildren }) => (jsxs("section", { className: style('flex flex-col justify-between @5xl:flex-row gap-m', className), children: [jsx("div", { className: "flex flex-col gap-y-m sm:max-w-md gap-2xl", children: inputChildren }), jsx("div", { className: "border-b border-main-divider md:hidden" }), rateChildren, jsx("div", { className: "flex flex-col gap-2xl sm:w-96 max-w-full", children: resultChildren })] })));
-
-    const getMoneyDefaultValue = (defaultParams, defaultMoney = 0) => defaultParams?.sum ? defaultParams.sum : defaultMoney;
-    const getMonthsDefaultValue = (defaultParams, defaultMonth = 0) => defaultParams?.period &&
-        defaultParams.period >= DEFAULT_MIN_MONTHS &&
-        defaultParams.period <= DEFAULT_MAX_MONTHS
-        ? defaultParams.period
-        : defaultMonth;
-
-    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 childStyleMap = ['min-w-full', '@lg:min-w-[50%]', '@lg:min-w-[33.3%]', '@lg:min-w-[25%]'];
+    const SwipeListContainer = JSX(({ className, itemClassName, containerRef, activeIndex, visibleItemCount = 0, gap = 0, padding = 0, listType = 'horizontal-list', snapAlign = 'snap-center', minHeight, children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
+        const observerOptions = {
+            sensitivity: 1,
+            rootRef: containerRef,
+        };
+        const itemsVisibilityListRef = useRef([]);
+        const handleIntersection = useCallback((idx, entry) => {
+            const itemsVisibilityList = [...(itemsVisibilityListRef.current || [])];
+            itemsVisibilityList[idx] = entry;
+            itemsVisibilityListRef.current = itemsVisibilityList;
+            onVisibleItemsChange && onVisibleItemsChange(itemsVisibilityList);
+            onVisibleIndicesChange && onVisibleIndicesChange(getVisibleIndices(itemsVisibilityList));
+        }, [onVisibleItemsChange, onVisibleIndicesChange]);
+        const additionPadding = visibleItemCount > 0 ? gap * Number(visibleItemCount) - 1 : 0;
+        const isVerticalList = listType === 'vertical-list';
+        const isHorizontalList = listType === 'horizontal-list';
+        const containerStyle = {
+            ...(isHorizontalList ? getContainerOffset(padding, additionPadding) : {}),
+            ...(isVerticalList ? getContainerHeight(minHeight) : {}),
+            gap: `${gap}px`,
+        };
+        return (jsx("div", { className: style('box-border overflow-auto no-scrollbar', listType, className), style: containerStyle, ref: containerRef, role: "list", children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: style(snapAlign, visibleItemCount ? childStyleMap[visibleItemCount - 1] : '', isVerticalList ? 'h-full' : '', itemClassName), style: isHorizontalList ? getContainerOffset(padding / 4) : {}, activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
+    });
+    // Styles used to compensate outer container padding to get rid of clipping effect
+    const getContainerOffset = (padding, additionalPadding = 0) => ({
+        marginLeft: `${-padding}px`,
+        marginRight: `${-padding}px`,
+        paddingLeft: `${padding}px`,
+        paddingRight: `${padding + additionalPadding}px`,
+    });
+    const getVisibleIndices = (itemsVisibilityList) => itemsVisibilityList
+        .map((_, i) => [_, i])
+        .filter(([_]) => _ && _.intersectionRatio >= 0.9)
+        .map(([, i]) => i);
 
-    const orientationStyleMap = {
-        horizontal: 'gap-5xl',
-        vertical: 'flex-col gap-s',
+    const containerStyles = {
+        'horizontal-list': 'mx-auto mt-lg w-fit',
+        'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
     };
-    const RadioButtonGroup = JSX(({ items, checkedItem, className, onChange: onChangeCheckedItem, orientation = 'horizontal', }) => (jsx("div", { className: style(`flex ${orientationStyleMap[orientation]}`, className), role: "radiogroup", children: items?.map(({ id, text }) => (jsx(Checkbox, { isRadio: true, text: text, value: checkedItem === id, onChange: () => onChangeCheckedItem && onChangeCheckedItem(id) }, String(id)))) })));
-
-    const renderBinaryRadioButtonGroup = ({ items, title, mobileTitle = title, orientation = 'horizontal', value, radioGroupClassName, onChange, }) => (jsxs("div", { className: "space-y-s", children: [title ? (jsx("div", { className: "hidden @5xl:block", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, mobileTitle ? (jsx("div", { className: "@5xl:hidden", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: mobileTitle }) })) : 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 activeDotStyles = {
+        'horizontal-list': 'w-6',
+        'vertical-list': 'h-6',
+    };
+    const dotStyle = 'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white group-data-transparent:bg-white';
+    const inactiveDotStyle = 'w-2 h-2 opacity-30';
+    const SwipeListControlDots = JSX(({ className = '', containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list', version, }) => {
+        const handleClick = (idx) => {
+            if (idx !== activeIndex && containerRef?.current) {
+                containerRef.current.children[idx]?.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                });
+            }
+        };
+        return dotCount ? (jsx("div", { className: style('flex gap-xs', containerStyles[listType], version ? 'group' : '', className), "data-ver": version, children: Array.from({ length: dotCount })
+                .fill(null)
+                .map((_, idx) => (jsx("div", { className: `${dotStyle} ${idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle}`, role: "button", "aria-hidden": true, onClick: () => handleClick(idx) }, String(idx)))) })) : null;
     });
 
+    const areArraysEqual = (as, bs) => as === bs || Boolean(as && bs && as?.length === bs?.length && as.every((_, i) => _ === bs[i]));
+
     const defaultDiscriminator = (_) => _;
     const maxBy = (discriminator = defaultDiscriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
     const max = maxBy();
@@ -2138,906 +2095,1080 @@
     const minBy = (discriminator = defaultDiscriminator) => maxBy((_) => -discriminator(_));
     const min = minBy();
 
-    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 DEPOSIT_RATES_SERVICE_MAP = {
-        UL: 'businessdepositrates',
-        IP: 'selfemployeddepositrates',
+    const getItemWidth = (container) => (itemCount) => container.scrollWidth / itemCount;
+    const scrollBy = (container) => (itemCount, delta) => {
+        container.scrollBy({ left: delta * getItemWidth(container)(itemCount), behavior: 'smooth' });
     };
-    function useBusinessDepositRates(rateParams) {
-        const serviceName = rateParams?.rateType ? DEPOSIT_RATES_SERVICE_MAP[rateParams?.rateType] : '';
-        const { data } = useAsyncData(serviceName ? `/api/v1/depositrates/${serviceName}` : null, fetchJSONUnsafe);
-        return Array.isArray(data) ? data : [];
-    }
 
-    const useBusinessDepositCalculatorParams = (userInputParams, rateParams) => {
-        const { daysValue, moneyValue, isPartialWithdrawal, isReplenished, isMonthlyInterestPayment } = userInputParams;
-        const isOperatingDeposit = isReplenished || isPartialWithdrawal;
-        const isDisabledOperatingDeposit = daysValue < BUSINESS_OPERATING_MIN_DAYS || daysValue > BUSINESS_OPERATING_MAX_DAYS;
-        const rateRows = useBusinessDepositRates(rateParams);
-        if (daysValue <= BUSINESS_RATE_MIN_DAYS) {
-            return {
-                ...DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS,
-                ...userInputParams,
-                isDisabledOperatingDeposit,
-                isUnavailableByTerm: true,
-            };
-        }
-        const businessDepositCalculatorSourceBookParams = rateRows?.find((_) => {
-            return (isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
-                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 = rateRows || [DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS];
-        return {
-            ...businessDepositCalculatorSourceBookParams,
-            ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
-            ...getRangeByKeys(['minDays', 'maxDays'], sourceBookRows),
-            ...userInputParams,
-            isDisabledOperatingDeposit,
-            income,
-            finalSum,
-        };
+    const scrollToEnd = (container) => {
+        container.scrollTo({ left: container.scrollWidth, behavior: 'smooth' });
     };
-    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 scrollToStart = (container) => {
+        container.scrollTo({ left: 0, behavior: 'smooth' });
     };
 
-    const BusinessDepositCalculatorForm = JSX(({ className = '', buttons, footnote, bottomFootnote, isShowDepositeName, defaultParams, rateParams, }) => {
-        const [userInputParams, { field }] = useForm({
-            moneyValue: getMoneyDefaultValue(defaultParams, BUSINESS_DEFAULT_SUM),
-            daysValue: getMonthsDefaultValue(defaultParams, BUSINESS_DEFAULT_DAYS),
-            isReplenished: Boolean(defaultParams?.isReplenished),
-            isPartialWithdrawal: Boolean(defaultParams?.isPartialWithdrawal),
-            isMonthlyInterestPayment: Boolean(defaultParams?.isMonthlyInterestPayment),
-        });
-        const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, rateParams);
-        const { income, finalSum, rate, isUnavailableByTerm, depositeName } = calculatorParams;
-        return (jsx(CalculatorFormLayout, { className: className, inputChildren: jsxs("div", { 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 sm:flex-row gap-y-4 gap-x-14", children: [renderBusinessDepositParamsForm(calculatorParams, field), renderInterestPayment({
-                                title: 'Выплата процентов',
-                                orientation: 'vertical',
-                                ...field('isMonthlyInterestPayment'),
-                                radioGroupClassName: 'sm:flex-col',
-                            })] })] }), rateChildren: renderRate({
-                rate,
-                depositeName,
-                isShowDepositeName,
-                isUnavailableByTerm,
-            }), resultChildren: jsxs("div", { children: [renderDepositResults(finalSum, income), renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote), renderFootnote(bottomFootnote)] }) }));
-    });
-    const renderBusinessDepositParamsForm = (calculatorParams, field) => (jsxs("div", { className: "space-y-s", children: [jsx(Text, { color: "text-secondary-text", font: "font-light", children: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B" }), 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 })] })] }));
-    const renderDepositResults = (finalSum, income) => (jsxs("div", { className: "flex flex-col gap-2xl sm:gap-0 mb-lg", 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 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 useSwipeListScroll = ({ itemCount, onVisibleIndicesChange, }) => {
+        const containerRef = useRef(null);
+        const [visibleIndices, setVisibleIndices] = useState([]);
+        const handleVisibleIndicesChange = useCallback((indices) => {
+            setVisibleIndices((prevIndices) => areArraysEqual(prevIndices, indices) ? prevIndices : indices);
+            onVisibleIndicesChange && onVisibleIndicesChange(indices);
+        }, [itemCount]);
+        const [minIndex, maxIndex] = visibleIndices.length
+            ? [minBy()(visibleIndices), maxBy()(visibleIndices)]
+            : [-1, -1];
+        const canScrollLeft = minIndex > 0;
+        const canScrollRight = maxIndex < itemCount - 1;
+        const scrollLeft = useCallback(() => {
+            if (!containerRef.current) {
+                return;
+            }
+            if (canScrollLeft) {
+                scrollBy(containerRef.current)(itemCount, -1);
+            }
+            else {
+                scrollToEnd(containerRef.current);
+            }
+        }, [itemCount, canScrollLeft]);
+        const scrollRight = useCallback(() => {
+            if (!containerRef.current) {
+                return;
+            }
+            if (canScrollRight) {
+                scrollBy(containerRef.current)(itemCount, 1);
+            }
+            else {
+                scrollToStart(containerRef.current);
+            }
+        }, [itemCount, canScrollRight]);
+        const scrollTo = useCallback((idx, options = {
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'center',
+        }) => {
+            if (containerRef?.current) {
+                containerRef.current.children[idx]?.scrollIntoView(options);
+            }
+        }, [containerRef]);
+        return [
+            containerRef,
+            {
+                scrollLeft,
+                scrollRight,
+                scrollTo,
+                canScrollLeft,
+                canScrollRight,
+                visibleIndicesRange: [minIndex, maxIndex],
+                handleVisibleIndicesChange,
+            },
+        ];
     };
 
-    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;
+    /** @deprecated */
+    const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(LinkButton, { rounded: true, className: style('group/btn w-12 h-12 min-h-12 max-h-12 flex items-center justify-center shadow-main-black', disabled
+            ? 'bg-secondary-light text-secondary-text'
+            : 'bg-white text-primary-text hover:text-primary-main', className || ''), disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover/btn:text-primary-main", width: "16", height: "16" }) })));
+    /** @deprecated */
+    const ScrollLeftButton = JSX((props) => (jsx(ArrowButton, { ...props, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })));
+    /** @deprecated */
+    const ScrollRightButton = JSX((props) => (jsx(ArrowButton, { ...props, className: `${props.className || ''} rotate-180`, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })));
 
-    /**
-     * Формулы расчёта аннуитетных и дифференцированных платежей:
-     * 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));
+    const scrollButtonStyle$1 = 'absolute top-[calc(50%-24px)] z-40';
+    const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
+    const CarouselScrollButtons = JSX(({ scroll, activeIndex, itemCount, arrowsPadded, hasEdgeBlocks, onScrollLeft, onScrollRight, }) => {
+        const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
+        const canMoveLeft = hasEdgeBlocks ? activeIndex > 0 : canScrollLeft;
+        const canMoveRight = hasEdgeBlocks ? activeIndex < itemCount - 1 : canScrollRight;
+        const handleScrollLeft = useCallback(() => {
+            if (!hasEdgeBlocks) {
+                scrollLeft();
             }
             else {
-                return moneyValue * (i + i / (Math.pow(1 + i, monthsValue) - 1));
+                canScrollLeft && activeIndex !== itemCount - 1 && scrollLeft();
+                onScrollLeft();
             }
-        }
-        else {
-            return Math.round(moneyValue / monthsValue) + moneyValue * (rate / (MONTHS_IN_YEAR * 100)); // Используется значение ставки (rate) в процентах, делённое на сто.
-        }
-    };
+        }, [scrollLeft, onScrollLeft, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
+        const handleScrollRight = useCallback(() => {
+            if (!hasEdgeBlocks) {
+                scrollRight();
+            }
+            else {
+                canScrollRight && activeIndex !== 0 && scrollRight();
+                onScrollRight();
+            }
+        }, [scrollRight, onScrollRight, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
+        return (jsxs("div", { className: "m:hidden block", children: [renderBlur(scroll), canMoveLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'left-1 m:left-8' : 'left-0'), onClick: handleScrollLeft })) : null, canMoveRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'right-1 m:right-8' : 'right-0'), onClick: handleScrollRight })) : null] }));
+    });
+    const renderBlur = (scroll) => (jsxs("div", { children: [scroll.canScrollLeft ? (jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white group-data-secondary:bg-none') })) : null, scroll.canScrollRight ? (jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white group-data-secondary:bg-none') })) : null] }));
 
-    const getCreditCalculatorParams = (userInputParams, calcSource, paramsViewSettings) => {
-        const { moneyValue, monthsValue } = userInputParams;
-        const rateRows = calcSource?.rateRows || [DEFAULT_CREDIT_CALCULATOR_PARAMS];
-        const limitRows = calcSource?.limitRows || [];
-        const creditCalculatorSourceBookLimitParams = getCreditCalculatorLimitParams({
-            limitRows,
-            userInputParams,
-            paramsViewSettings,
-        });
-        const { minSum, maxSum } = getLimitRangeByKeys(['minSum', 'maxSum'], creditCalculatorSourceBookLimitParams, rateRows);
-        const { minMonths, maxMonths } = getLimitRangeByKeys(['minMonths', 'maxMonths'], creditCalculatorSourceBookLimitParams, rateRows);
-        const creditCalculatorRateParams = getCreditCalculatorRateParams({
-            rateRows,
-            userInputParams,
-            paramsViewSettings,
-            moneyValue,
-            monthsValue,
+    const ITEMS_GAP = 16;
+
+    const renderCardHighlight = ({ className, text = 'ХИТ' } = {}) => (jsxs("div", { className: style('w-14 h-14 bg-white flex flex-col items-center justify-center rounded-md shadow-main-black', className), children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "24", height: "24" }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: text })] }));
+
+    const cardBaseStyle = 'relative h-full';
+    const CARD_SIZE_MAP = {
+        small: 'sm:min-w-64',
+        normal: 'sm:min-w-96',
+        big: 'sm:min-w-[515px]',
+    };
+    const renderCarouselCards = ({ noCardBorder, activeIndex, cardSize = 'normal', ...rest }) => {
+        const { blocks: childBlocks } = rest.block || {};
+        const someCardsHighlighted = childBlocks?.some(isCardHighlighted);
+        return renderChildren({
+            ...rest,
+            renderProps: (block, options, blockIndex) => (jsxs("div", { className: cardWrapperStyle(block, { someCardsHighlighted }), children: [renderBlock$1(block, options, {
+                        className: cardStyle(block, {
+                            someCardsHighlighted,
+                            showBorder: !noCardBorder,
+                            cardSize,
+                        }),
+                        blockIndex,
+                        isActive: blockIndex === activeIndex,
+                    }), isCardHighlighted(block)
+                        ? renderCardHighlight({ className: 'absolute top-0 -right-4 z-40' })
+                        : null] }, String(blockIndex))),
         });
-        const { rate } = creditCalculatorRateParams;
-        const monthlyPayment = getMonthlyPayment(rate, userInputParams);
-        return {
-            ...creditCalculatorRateParams,
-            ...userInputParams,
-            minSum,
-            maxSum,
-            minMonths,
-            maxMonths,
-            moneyValue,
-            monthsValue,
-            monthlyPayment,
-        };
     };
+    const cardWrapperStyle = (_, { someCardsHighlighted }) => style(cardBaseStyle, someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl' : 'pt-3xl sm:pt-16'));
+    const cardStyle = (_, { someCardsHighlighted, showBorder, cardSize = 'normal', }) => style(cardBaseStyle, 'min-w-80', CARD_SIZE_MAP[cardSize], // TODO fix для RecommendationCard
+    someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'), getBorderStyle(showBorder), showBorder && 'h-full');
+    const isCardHighlighted = (_) => _?.content && 'isHighlighting' in _.content && _.content.isHighlighting;
 
-    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 renderPaymentType = (props) => renderBinaryRadioButtonGroup({
-        ...props,
-        radioGroupClassName: 'sm:flex-col',
-        items: [
-            { id: 'annuity', text: 'Аннуитетный' },
-            { id: 'differential', text: 'Дифференцированный' },
-        ],
-    });
+    const VISIBLE_ITEM_COUNT = 1;
 
-    const CreditCalculatorForm = JSX(({ className, calcSource, buttons, footnote, paramsViewSettings, defaultParams }) => {
-        const [userInputParams, { field }] = useForm({
-            moneyValue: getMoneyDefaultValue(defaultParams, CREDIT_DEFAULT_SUM),
-            monthsValue: getMonthsDefaultValue(defaultParams, DEFAULT_MONTHS),
-            isAnnuity: Boolean(defaultParams?.isAnnuity),
-            isInsurance: Boolean(defaultParams?.isEnableInsurance),
-            isSalaryClient: Boolean(defaultParams?.isEnableSalaryClient),
-            isPensionClient: Boolean(defaultParams?.isEnablePensionClient),
-            isStateEmployee: Boolean(defaultParams?.isEnableStateEmployee),
-        });
-        const calculatorParams = getCreditCalculatorParams(userInputParams, calcSource, paramsViewSettings);
-        const paymentTypeElement = renderPaymentType({
-            title: '',
-            mobileTitle: 'Тип платежа',
-            orientation: 'vertical',
-            ...field('isAnnuity'),
+    const Carousel = UniBlock(({ className, itemCount, visibleItemCount = VISIBLE_ITEM_COUNT, noCardBorder, isAlignCenter, arrowsPadded = true, isGap = true, isEmbedded = false, cardSize = 'normal', ...rest }) => {
+        const { blocks: childBlocks = [] } = rest.block || {};
+        const count = itemCount || childBlocks?.length;
+        const [activeIndex, { inc: increaseActiveIndex, dec: decreaseActiveIndex }] = useCarouselControls({
+            itemCount: count,
+            visibleItemCount,
+        }, Math.floor(visibleItemCount / 2));
+        const [containerRef, scroll] = useSwipeListScroll({ itemCount: count });
+        const [dotsActiveIndex] = scroll.visibleIndicesRange;
+        // TODO Remove
+        const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
+        return (jsxs(BlockWrapper, { className: style(isEmbedded ? '@container-normal' : '', className), defaultPadding: "p-6xl", ...rest, children: [jsxs("div", { className: style(isAlignCenter ? 'flex justify-center' : '', 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: isGap ? ITEMS_GAP : undefined, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderCarouselCards({ noCardBorder, activeIndex, cardSize, ...rest }) }), jsx(CarouselScrollButtons, { scroll: scroll, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count })] }), jsx(SwipeListControlDots, { className: "@5xl:hidden", containerRef: containerRef, activeIndex: dotsActiveIndex, dotCount: count, listType: "horizontal-list" })] }));
+    }, {
+        childrenTypes: [
+            'CarouselCard',
+            'CarouselBankHistoryCard',
+            'CarouselCatalogCard',
+            'CarouselRecommendationCard',
+            'CarouselTariffsCard',
+            'RichTextBlock',
+            'ProductBlock',
+        ],
+        childSchema: () => ({
+            isHighlighting: {
+                title: 'Выделить карточку',
+                type: 'boolean',
+            },
+        }),
+    });
+
+    const EMPTY_SCHEMA = {};
+    const initialFiltrationState$3 = {};
+    const BankAccountFiltration = UniBlock(({ className, filtrationSchema = EMPTY_SCHEMA, resetButton, notFound, ...rest }) => {
+        const [, { blocksToRender }, { field, reset }] = useFiltrationForm(initialFiltrationState$3, {
+            block: rest.block,
+            page: rest.options?.page,
         });
-        const { onChange: setMoneyValue } = field('moneyValue');
-        const { onChange: setMonthsValue } = field('monthsValue');
-        useEffect(() => {
-            setMoneyValue &&
-                setMoneyValue(clamp(userInputParams.moneyValue, calculatorParams.minSum, calculatorParams.maxSum));
-        }, [calculatorParams.minSum, calculatorParams.maxSum]);
-        useEffect(() => {
-            setMonthsValue &&
-                setMonthsValue(clamp(userInputParams.monthsValue, calculatorParams.minMonths, calculatorParams.maxMonths));
-        }, [calculatorParams.minMonths, calculatorParams.maxMonths]);
-        return (jsx(CalculatorFormLayout, { className: className, inputChildren: jsxs("div", { 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: "sm:hidden", children: paymentTypeElement })] }), rateChildren: renderRate({
-                rate: calculatorParams.rate,
-            }), resultChildren: jsxs("div", { children: [jsx(CalculatorValueBlock, { title: "\u0415\u0436\u0435\u043C\u0435\u0441\u044F\u0447\u043D\u044B\u0439 \u043F\u043B\u0430\u0442\u0451\u0436", value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), jsx("div", { className: "hidden sm:block mb-lg", children: paymentTypeElement }), renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] }) }));
+        const selectArrProps = Object.entries(filtrationSchema)
+            // Only StringArray
+            .filter(([, schema]) => schema.type === 'array' && schema.ui === 'dropdown')
+            .map(([name, schema]) => ({
+            className: 'w-64',
+            label: schema.title,
+            options: stringArrayToOptions(schema),
+            ...field(name, {
+                parse: ({ key }) => [key],
+                format: ([value] = []) => stringArrayToOptions(schema).find((_) => _.key === value) || { key: '' },
+            }),
+        }));
+        const Selects = selectArrProps.map((props, i) => jsx(Select, { ...props }, String(i)));
+        return (jsxs(BlockWrapper, { className: style(className), defaultPadding: "p-0", version: "transparent", ...rest, children: [jsx(FiltrationForm, { filtrationSchema: filtrationSchema, field: field, reset: reset, children: jsxs("div", { children: [Selects, jsx("div", { children: jsx(Button, { type: "reset", className: "mt-lg w-64", onClick: reset, version: resetButton?.version, children: resetButton?.text }) })] }) }), jsx("div", { className: style(blocksToRender?.length ? 'hidden' : 'block'), children: notFound ? jsx(NotFound, { ...notFound }) : null }), jsx(Carousel, { padding: "p-0", isEmbedded: true, itemCount: blocksToRender?.length, visibleItemCount: 0, isAlignCenter: true, isGap: false, children: renderBlocksList(blocksToRender, {
+                        ...rest.options,
+                        parent: rest.block,
+                        renderProps: (block, options, i) => (jsx("div", { className: style('relative min-w-80', getBorderStyle(true)), children: renderBlock$1(block, options) }, String(i))),
+                    }) })] }));
+    }, {
+        childrenTypes: ['CarouselTariffsCard'],
+        childSchema: (content) => content?.filtrationSchema || {},
     });
-    const renderCreditParamsForm$1 = (params, field) => (jsxs("div", { className: "flex flex-col gap-y-2xl", 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 stringArrayToOptions = (stringEnum) => zip(stringEnum.items?.enum || [], stringEnum.items?.enumNames || []).map(([key, text]) => ({
+        key,
+        text,
+    }));
 
-    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 iconBgStyles = {
+        '': 'bg-main-divider group-data-secondary:bg-white/30',
+        primary: 'bg-main-divider',
+        secondary: 'bg-secondary-light',
+        opacity: 'bg-white/30',
+    };
+    const RoundedIcon = JSX(({ className, defaultIconSize = 44, iconBgVersion = 'primary', size, icon, ...rest }) => {
+        const widthAndHeight = String(size?.width || defaultIconSize);
+        return icon ? (jsx("div", { style: {
+                width: `${widthAndHeight}px`,
+                height: `${widthAndHeight}px`,
+            }, className: style('rounded-icon object-fit flex justify-center items-center', iconBgStyles[iconBgVersion], className), children: jsx(Icon, { ...rest, width: "54%", height: "54%", name: icon }) })) : null;
+    });
 
-    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++;
-            }
+    const defaultIconSize = 44;
+
+    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [title ? jsx(Heading, { headingType: "h3", as: "h2", className: AlignStyles, title: title }) : null, benefitList?.length ? (jsx("div", { className: "flex flex-col @md:flex-row flex-wrap w-full @md:justify-center mt-xl gap-5xl", role: "list", children: benefitList.map(renderBenefit) })) : null] })));
+    const renderBenefit = ({ label, description, items, icon, iconBgVersion, isDotted = false }, i) => (jsxs("div", { className: "flex gap-m items-center @md:basis-1/2 @md:max-w-[500px]", role: "listitem", children: [icon?.icon ? (jsx(RoundedIcon, { className: "shrink-0", defaultIconSize: defaultIconSize, iconBgVersion: iconBgVersion || '', ...icon })) : null, icon?.src ? jsx(Img, { className: "shrink-0", image: icon }) : null, label ? (jsxs("div", { className: "@sm:h-full space-y-xs", children: [jsx(Heading, { headingType: "h6", children: label }), jsx(Text, { size: "text-l", color: "text-secondary-text group-data-secondary:text-white/80", font: "font-light", children: description }), jsx(List, { dotClassName: "bg-secondary-text", listItemSize: "S", items: items, isDotted: isDotted })] })) : null] }, String(i)));
+
+    const bonusBenefitStyles = 'items-center';
+
+    const renderBonusBenefit = (cardTextAlign) => ({ icon, title, description }, i) => (jsxs("div", { className: style('flex flex-col gap-1', bonusBenefitStyles, !description && !title ? 'justify-center' : ''), children: [title ? (jsx(Text, { size: "text-h6", font: "font-normal", align: cardTextAlign, children: title })) : null, icon ? jsx(Img, { image: icon, height: "180", className: "w-auto mx-auto" }) : null, description ? (jsx(Text, { size: "text-h6", font: "font-normal", align: cardTextAlign, children: description })) : null] }, String(i)));
+
+    const renderBonusBenefits = (bonusBenefits, columnsCount, cardTextAlign) => (jsx("div", { className: `grid gap-2xs ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit(cardTextAlign)) }));
+    const getElementsColsValue = (colValue) => {
+        switch (colValue) {
+            case '3':
+                return 'grid-cols-3';
+            case '4':
+                return 'grid-cols-4';
+            case '5':
+                return 'grid-cols-5';
+            default:
+                return 'grid-cols-5';
         }
-        return result;
     };
 
-    const getDepositCalculatorParams = (userInputParams, calcSource, paramsViewSettings) => {
-        const { moneyValue, monthsValue } = userInputParams;
-        const defaultMonth = calcSource?.rateRows?.[0]
-            ? getMiddleMonth(calcSource.rateRows[0].minMonths, calcSource.rateRows[0].maxMonths)
-            : 0;
-        const isExcludeMonthlyInterestPayment = !paramsViewSettings?.isShowMonthlyInterestPayment;
-        const isExcludeRemoteRegistration = !paramsViewSettings?.isShowRemoteRegistration;
-        const depositCalculatorSourceBookParams = calcSource?.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 = calcSource?.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 BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'text-center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: style('space-y-3xl', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { defaultPadding: "", title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length
+                ? renderBonusBenefits(bonusBenefits, columnsCount, cardTextAlign)
+                : null] })));
+
+    const AlignJustifyStyle = {
+        start: 'justify-start',
+        center: 'justify-center',
+        end: 'justify-end',
     };
-    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 ButtonsBlock = JSX(({ buttons, className = '', align, ...rest }) => {
+        const alignStyle = align ? style('flex', AlignJustifyStyle[align]) : '';
+        return (jsx(BlockWrapper, { className: style('!bg-transparent', alignStyle, className), defaultPadding: "p-0", ...rest, children: renderButtonsSection(buttons) }));
     });
 
-    const DepositCalculatorForm = JSX((props) => {
-        const { className, calcSource, buttons, footnote, paramsViewSettings, defaultParams } = props;
-        const [userInputParams, { field }] = useForm({
-            moneyValue: getMoneyDefaultValue(defaultParams, DEPOSIT_DEFAULT_SUM),
-            monthsValue: getMonthsDefaultValue(defaultParams),
-            isMonthlyInterestPayment: Boolean(defaultParams?.isMonthlyInterestPayment),
-            isRemoteRegistration: Boolean(defaultParams?.isRemoteRegistration),
-        });
-        const calculatorParams = getDepositCalculatorParams(userInputParams, calcSource, paramsViewSettings);
-        const { defaultMonth, rate, income, finalSum } = calculatorParams;
-        const { onChange: setMonthsValue } = field('monthsValue');
-        const { onChange: setMoneyValue } = field('moneyValue');
-        useEffect(() => {
-            !userInputParams.monthsValue && setMonthsValue && setMonthsValue(defaultMonth);
-        }, [defaultMonth]);
-        useEffect(() => {
-            setMoneyValue &&
-                setMoneyValue(clamp(userInputParams.moneyValue, calculatorParams.minSum, calculatorParams.maxSum));
-        }, [calculatorParams.minSum, calculatorParams.maxSum]);
-        return (jsx(CalculatorFormLayout, { className: className, inputChildren: jsxs("div", { 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,
-                    }), renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)] }), rateChildren: renderRate({
-                rate,
-            }), resultChildren: jsxs("div", { 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] }));
+    /** @deprecated */
+    function renderArrows({ dec, inc, canDec, canInc, btnClass, className = '', }) {
+        const isVisible = canDec || canInc;
+        if (!isVisible) {
+            return null;
+        }
+        return (jsxs("div", { children: [canDec ? (jsx(ArrowButton, { className: style('absolute z-40', btnClass[0], className), onClick: dec, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left", disabled: !canDec })) : null, canInc ? (jsx(ArrowButton, { className: style('absolute z-40 rotate-180', btnClass[1], className), onClick: inc, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right", disabled: !canInc })) : null] }));
+    }
 
-    const checkRefinancingSourceBookRowCommonParams = (props) => checkRowParam({
-        ...props,
-        fieldKey: 'isSalaryClient',
-        viewSettingFieldKey: 'isShowSalaryClient',
-    }) &&
-        checkRowParam({
-            ...props,
-            fieldKey: 'isInsurance',
-            viewSettingFieldKey: 'isShowInsurance',
-        });
-    const checkRowParam = ({ row, userInputParams, paramsViewSettings, fieldKey, viewSettingFieldKey, }) => {
-        const isExclude = paramsViewSettings ? !paramsViewSettings[viewSettingFieldKey] : false;
-        return isExclude || userInputParams[fieldKey] === row[fieldKey];
-    };
+    const calculatorValueBlockStyle = 'flex justify-between @xl:flex-col';
+    const CalculatorValueBlock = JSX(({ className, title, value, fractionDigits, fixed, prefix, postfix }) => (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: jsx(Text, { size: "text-h3", children: [prefix, toLocalNumberFormat(fractionDigits, { fixed })(value), postfix]
+                        .filter(Boolean)
+                        .join(' ') }) })) : (jsx("div", { children: jsx(Text, { size: "text-h3", children: "-" }) }))] })));
 
-    const getRefinancingCalculatorLimitParams = ({ limitRows, userInputParams, paramsViewSettings, }) => limitRows?.find((row) => checkRefinancingSourceBookRowCommonParams({
-        row,
-        userInputParams,
-        paramsViewSettings,
-    }));
+    const DEFAULT_MIN_SUM$1 = 10000;
+    const DEFAULT_MAX_SUM$1 = 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 = 1;
+    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 = 60;
+    const MONTHS_IN_YEAR = 12;
+    const MONTHLY_INTEREST_RATE = MONTHS_IN_YEAR * 100;
+    const DEFAULT_CREDIT_CALCULATOR_PARAMS = {
+        minSum: DEFAULT_MIN_SUM$1,
+        maxSum: DEFAULT_MAX_SUM$1,
+        minMonths: DEFAULT_MIN_MONTHS,
+        maxMonths: DEFAULT_MAX_MONTHS,
+        rate: 0,
+        isSalaryClient: false,
+        isPensionClient: false,
+        isStateEmployee: false,
+        isInsurance: true,
+    };
+    const DEFAULT_REFINANCING_CALCULATOR_PARAMS = {
+        minSum: DEFAULT_MIN_SUM$1,
+        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: 0,
+        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: 100000001,
+        minMonths: 2,
+        maxMonths: 10,
+        rate: 0,
+        isMonthlyInterestPayment: true,
+        isRemoteRegistration: true,
+    };
+    const DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS = {
+        minSum: 1000,
+        maxSum: 100000001,
+        minDays: BUSINESS_MIN_DAYS,
+        maxDays: BUSINESS_MAX_DAYS,
+        rate: 0,
+        isMonthlyInterestPayment: true,
+        isReplenished: false,
+        isPartialWithdrawal: false,
+        depositeName: "Депозит 'Стабильный'",
+    };
 
-    const getRefinancingCalculatorRateParams = ({ rateRows = [], userInputParams, paramsViewSettings, moneyValue, monthsValue, oldMonthlyPayment, moneyExtra, }) => rateRows?.find((row) => checkRefinancingSourceBookRowCommonParams({
-        row,
-        userInputParams,
-        paramsViewSettings,
-    }) &&
-        checkRangeByKeys(moneyValue + moneyExtra, ['minSum', 'maxSum'], row) &&
-        checkRangeByKeys(oldMonthlyPayment, ['minSumOld', 'maxSumOld'], row) &&
-        checkRangeByKeys(moneyExtra, ['minSumExtra', 'maxSumExtra'], row) &&
-        checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row)) || DEFAULT_REFINANCING_CALCULATOR_PARAMS;
+    const getBonus = (params, bonusTravelValue, bonusOtherValue) => {
+        const { maxBonus = 5000, prefMonthsNum = DEFAULT_BONUS_CALCULATOR_PARAMS.prefMonthsNum, prefTravelBonusRate = DEFAULT_BONUS_CALCULATOR_PARAMS.prefTravelBonusRate, prefRestBonusRate = 0.01, travelBonusRate = 0.015, restBonusRate = 0.01, } = params;
+        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];
+    };
 
-    const getRefinancingCalculatorParams = (userInputParams, calcSource, paramsViewSettings) => {
-        const { moneyValue, monthsValue, oldMonthlyPayment, moneyExtra } = userInputParams;
-        const rateRows = calcSource?.rateRows || [DEFAULT_REFINANCING_CALCULATOR_PARAMS];
-        const limitRows = calcSource?.limitRows || [];
-        const sourceBookLimitParams = getRefinancingCalculatorLimitParams({
-            limitRows,
-            userInputParams,
-            paramsViewSettings,
-        });
-        const { minSum, maxSum } = getLimitRangeByKeys(['minSum', 'maxSum'], sourceBookLimitParams, rateRows);
-        const { minMonths, maxMonths } = getLimitRangeByKeys(['minMonths', 'maxMonths'], sourceBookLimitParams, rateRows);
-        const refinancingCalculatorSourceBookRateParams = getRefinancingCalculatorRateParams({
-            rateRows,
-            userInputParams,
-            paramsViewSettings,
-            moneyValue,
-            monthsValue,
-            oldMonthlyPayment,
-            moneyExtra,
-        });
-        const { rate } = refinancingCalculatorSourceBookRateParams;
-        const monthlyPayment = getMonthlyPayment(rate, userInputParams);
-        const benefit = userInputParams.oldMonthlyPayment - monthlyPayment;
+    const getBonusCalculatorParams = (userInputParams, calcSource) => {
+        const { travelExpenseValue, restExpenseValue } = userInputParams;
+        const [monthBonus, yearBonus] = getBonus(calcSource || DEFAULT_BONUS_CALCULATOR_PARAMS, travelExpenseValue, restExpenseValue);
         return {
-            ...refinancingCalculatorSourceBookRateParams,
+            ...calcSource,
             ...userInputParams,
-            minSum,
-            maxSum,
-            minMonths,
-            maxMonths,
-            moneyValue,
-            monthsValue,
-            oldMonthlyPayment,
-            moneyExtra,
-            monthlyPayment,
-            benefit,
+            monthBonus,
+            yearBonus,
         };
     };
 
-    const RefinancingCalculatorForm = JSX(({ className, calcSource, buttons, footnote, paramsViewSettings }) => {
+    const renderFootnote = (text) => text ? (jsx(Paragraph, { size: "text-s", font: "font-light", color: "text-secondary-text", children: text })) : null;
+
+    const Rate = JSX(({ rate = 0, title = 'Ставка', unit, fractionDigits = 2, depositeName, isShowDepositeName }) => (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: "font-mohave text-title-huge pr-xl -mt-m tracking-[-15px]", children: toLocalNumberFormat(fractionDigits, { fixed: true })(rate) }), unit ? jsx("span", { className: "text-7xl", children: unit }) : null] }), depositeName && isShowDepositeName ? (jsx("div", { className: "absolute bottom-2 w-full text-left whitespace-nowrap", children: depositeName })) : null] })] })));
+
+    const UnknownRate = JSX(({ title = 'Ставка', isUnavailableByTerm = false }) => (jsxs("div", { className: "space-y-s", children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsx(Icon, { className: "w-10 h-10 @5xl:h-auto @5xl:w-40", name: "PercentIcon" }), jsx("div", { className: "w-64", children: isUnavailableByTerm ? (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"] })) : (jsx(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0434\u0440\u0443\u0433\u0443\u044E \u0441\u0443\u043C\u043C\u0443 \u0438\u043B\u0438 \u0441\u0440\u043E\u043A" })) })] })));
+
+    const renderRate = ({ title = 'Ставка', rate = 0, unit = '%', fractionDigits = 2, isUnknownRateShown = true, ...rest }) => isUnknownRateShown && rate === 0 ? (jsx(UnknownRate, { title: title, ...rest })) : (jsxs("div", { children: [jsx("div", { className: "hidden @xl:block", children: jsx(Rate, { title: title, rate: rate, unit: unit, fractionDigits: fractionDigits, ...rest }) }), jsx("div", { className: "@xl:hidden", children: jsx(CalculatorValueBlock, { title: title, value: rate, postfix: unit, fractionDigits: fractionDigits, fixed: true, ...rest }) })] }));
+
+    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 BonusCalculatorForm = JSX(({ className = '', calcSource, buttons, footnote }) => {
         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 = getRefinancingCalculatorParams(userInputParams, calcSource, paramsViewSettings);
-        const paymentTypeElement = renderPaymentType({
-            title: '',
-            mobileTitle: 'Тип платежа',
-            orientation: 'vertical',
-            ...field('isAnnuity'),
+            travelExpenseValue: DEFAULT_TRAVEL_MIN_SUM,
+            restExpenseValue: DEFAULT_REST_MIN_SUM,
         });
-        return (jsx(CalculatorFormLayout, { className: className, inputChildren: jsxs("div", { children: [renderWantedSumInput({
-                        title: 'Остаток долга в других банках, ₽ ',
-                        step: 500,
-                        min: calculatorParams.minSum,
-                        max: calculatorParams.maxSum - calculatorParams.maxSumExtra,
-                        ...field('moneyValue'),
-                        value: calculatorParams.moneyValue,
-                    }), renderWantedSumInput({
-                        title: 'Ежемесячный платёж в других банках, ₽',
-                        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,
-                    }), renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field), calculatorParams.isExtraMoney
-                        ? renderWantedSumInput({
-                            title: 'Дополнительная сумма, ₽ ',
+        const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } = getBonusCalculatorParams(userInputParams, calcSource);
+        return (jsxs("section", { className: style('flex flex-col justify-between @5xl:flex-row gap-y-4xl', className), children: [jsxs("div", { className: "flex flex-col @xl:max-w-md gap-2xl border-b border-b-main-divider @xl:border-none pb-3xl @xl:pb-0", children: [renderWantedSumInput({
+                            title: 'Сумма покупок в категории путешествия, ₽',
+                            min: minSumTravel,
+                            max: maxSumTravel,
                             step: 500,
-                            min: calculatorParams.minSumExtra,
-                            max: calculatorParams.maxSumExtra,
-                            ...field('moneyExtra'),
-                            value: calculatorParams.moneyExtra,
-                        })
-                        : null, jsx("div", { className: "sm:hidden pt-1 pb-4 border-b border-main-divider", children: paymentTypeElement })] }), rateChildren: renderRate({
-                rate: calculatorParams.rate,
-                fractionDigits: 1,
-            }), resultChildren: jsxs("div", { children: [jsx(CalculatorValueBlock, { title: "\u0415\u0436\u0435\u043C\u0435\u0441\u044F\u0447\u043D\u044B\u0439 \u043F\u043B\u0430\u0442\u0451\u0436", value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), calculatorParams.benefit > 0 ? (jsx(CalculatorValueBlock, { title: 'Выгода в месяц', value: calculatorParams.benefit, postfix: "\u20BD" })) : null, jsx("div", { className: "hidden sm:block mb-lg", children: paymentTypeElement }), renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] }) }));
+                            isShowItems: false,
+                            ...field('travelExpenseValue'),
+                        }), renderWantedSumInput({
+                            title: 'Сумма покупок в остальных категориях, ₽',
+                            min: minSumOther,
+                            max: maxSumOther,
+                            step: 500,
+                            isShowItems: false,
+                            ...field('restExpenseValue'),
+                        })] }), monthBonus >= 0
+                    ? renderRate({
+                        title: 'Баллов за месяц',
+                        rate: monthBonus,
+                        fractionDigits: 0,
+                        isUnknownRateShown: false,
+                        unit: '',
+                    })
+                    : null, jsxs("div", { className: "flex flex-col gap-y-xl @xl:w-96", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] })] }));
     });
-    const renderCreditParamsForm = (params, field) => (jsxs("div", { className: "space-y-lg sm:space-y-s", 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, { 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, jsx(Checkbox, { 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 })] }));
-
-    const EmbeddableCalcBlocks = {
-        CreditCalculatorForm,
-        DepositCalculatorForm,
-        BusinessDepositCalculatorForm,
-        BonusCalculatorForm,
-        RefinancingCalculatorForm,
-    };
 
-    const renderCalculatorBlock = (block, i) => {
-        const type = block?.calcType;
-        if (!type || !(type in EmbeddableCalcBlocks)) {
-            return null;
-        }
-        const EmbeddedBlock = EmbeddableCalcBlocks[type];
-        return (jsx("section", { className: "box-border relative bg-white flex shrink-0 self-start basis-full", role: "listitem", children: jsxs("div", { className: "box-border p-4xl w-full space-y-xl", children: [block?.title ? jsx(Heading, { className: "text-center", title: block.title }) : null, jsx(EmbeddedBlock, { ...block })] }) }, String(i)));
-    };
+    const CalculatorFormLayout = JSX(({ className, inputChildren, rateChildren, resultChildren }) => (jsxs("section", { className: style('flex flex-col justify-between @5xl:flex-row gap-m', className), children: [jsx("div", { className: "flex flex-col gap-y-m sm:max-w-md gap-2xl", children: inputChildren }), jsx("div", { className: "border-b border-main-divider md:hidden" }), rateChildren, jsx("div", { className: "flex flex-col gap-2xl sm:w-96 max-w-full", children: resultChildren })] })));
 
-    const Calculator = UniBlock(({ className = '', tabAlign, calculatorTabs = [], ...rest }) => {
-        const tabsNav = calculatorTabs.map((_) => _.nav || {});
-        const calculatorBlocks = calculatorTabs.map(({ calculatorBlock }) => calculatorBlock || {});
-        const [slideIndexShift, setSlideIndexShift] = useState(0);
-        const handleSlideIndexShift = useCallback((_) => setSlideIndexShift(_), []);
-        const COLUMNS_FOR_SCROLL = 3;
-        const [activeIndex, controls] = useCarouselControls({
-            itemCount: calculatorTabs?.length,
-            visibleItemCount: COLUMNS_FOR_SCROLL,
-        });
-        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden relative', className), defaultPadding: "p-0", ...rest, children: [jsxs("div", { className: "bg-white", children: [tabsNav.length > 1
-                            ? renderTabs$1({
-                                activeIndex,
-                                tabsNav,
-                                tabAlign,
-                                slideIndexShift,
-                                onClick: handleSlideIndexShift,
-                            })
-                            : null, renderArrows({
-                            ...controls,
-                            btnClass: ['left-3', 'right-3'],
-                            className: 'top-10',
-                        })] }), jsx("div", { className: "flex", style: { transform: `translateX(-${slideIndexShift}00%)` }, role: "list", children: calculatorBlocks?.length ? calculatorBlocks.map(renderCalculatorBlock) : null })] }));
-    });
-    function renderNavButton$3({ tab, i, isActive, onClick }) {
-        const btnClassName = isActive
-            ? 'w-96 p-m border-none bg-primary-main text-white'
-            : `w-96 p-s ease-in duration-300 bg-white text-primary-text`;
-        const btnTitleClassName = isActive ? 'text-xl mb-xs' : `text-l mb-2xs`;
-        const btnDescClassName = isActive
-            ? 'text-l font-light text-white'
-            : `text-m font-light text-secondary-text`;
-        const iconClassName = isActive ? '' : `text-primary-main`;
-        const iconVersion = tab?.icon?.iconVersion;
-        const activeIconStyle = isActive ? 'white' : 'normal';
-        return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: style('box-border relative border border-gray cursor-pointer text-left border-b-0 flex space-x-m min-h-20', btnClassName), children: [jsx(Img, { className: style('h-6 w-6 min-w-6 min-h-6', iconClassName), image: {
-                        ...tab?.icon,
-                        iconVersion: iconVersion ?? activeIconStyle,
-                    }, width: "24", height: "24" }), jsxs("div", { className: "border-0", children: [jsx("div", { className: btnTitleClassName, children: tab?.title }), jsx("div", { className: btnDescClassName, children: tab.description })] })] }, String(i)));
-    }
-    function renderTabs$1({ activeIndex, tabsNav, tabAlign, slideIndexShift, onClick }) {
-        const CARD_SHIFT = 388;
-        const alignStyle = tabAlign ? AlignJustifyStyle[tabAlign] : '';
-        return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }, className: "flex flex-col justify-end items-center h-32 pt-4xl box-border duration-1000", children: jsx("div", { className: style('w-full flex flex-nowrap items-end gap-xs', alignStyle), children: tabsNav.map((tab, i) => renderNavButton$3({
-                            tab,
-                            i,
-                            isActive: Boolean(i === slideIndexShift),
-                            onClick: () => onClick(i),
-                        })) }) }), jsx("div", { className: "w-full h-2 bg-primary-main" })] }));
-    }
-
-    const NumberInput = JSX((props) => {
-        const { onChange, min, max, defaultValue = '0', fractionDigits = 0, ...inputProps } = props;
-        const normalizedProps = useNormalizedInput(props, {
-            normalize: (_ = defaultValue) => min && max ? String(clamp(Number(sanitizeNumberStr(_)), min, max)) : sanitizeNumberStr(_),
-            format: toLocalNumberFormat(fractionDigits),
-        });
-        const handleChange = useCallback((_) => onChange && onChange(sanitizeNumberStr(_)), [onChange]);
-        return jsx(Input, { onChange: handleChange, ...inputProps, ...normalizedProps });
-    });
-    const sanitizeNumberStr = (_ = '') => _.replaceAll(',', '.')
-        .replace(/[^\d.]/g, '')
-        .replace(/([^.]*\.[^.]*)\./, '$1');
+    const getMoneyDefaultValue = (defaultParams, defaultMoney = 0) => defaultParams?.sum ? defaultParams.sum : defaultMoney;
+    const getMonthsDefaultValue = (defaultParams, defaultMonth = 0) => defaultParams?.period &&
+        defaultParams.period >= DEFAULT_MIN_MONTHS &&
+        defaultParams.period <= DEFAULT_MAX_MONTHS
+        ? defaultParams.period
+        : defaultMonth;
 
-    const CurrencyInput = JSX((props) => (jsx(NumberInput, { ...props, fractionDigits: 2, children: jsx("div", { className: "absolute right-4 bottom-4", children: jsx(Text, { size: "text-xl", font: "font-light", children: "\u20BD" }) }) })));
+    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 DEFAULT_TITLE = 'Укажите сумму перевода';
-    const DEFAULT_LABEL = 'Сумма перевода';
-    const DEFAULT_PLACEHOLDER = '1500';
-    const MAX_AMOUNT = 300000;
-    const MIN_AMOUNT = 1;
-    const FORM_URL_MAP = {
-        private: 'https://old.rshb.ru/p2p/',
-        business: 'https://old.rshb.ru/smallbusiness/p2p/',
-    };
-    const INITIAL_FORM_STATE = {
-        amount: 1500,
+    const orientationStyleMap = {
+        horizontal: 'gap-5xl',
+        vertical: 'flex-col gap-s',
     };
-    const CardTransfer = JSX(({ className = '', title = DEFAULT_TITLE, label = DEFAULT_LABEL, placeholder = DEFAULT_PLACEHOLDER, button, formType = 'private', ...rest }) => {
-        const [{ amount }, { field }] = useForm(INITIAL_FORM_STATE);
-        const [isDisabled, setDisabled] = useState(false);
-        useEffect(() => {
-            setDisabled(amount <= 0);
-        }, [amount]);
-        return (jsxs(BlockWrapper, { className: style('flex flex-col items-center', className), defaultPadding: "p-6xl", ...rest, children: [title ? (jsx(Heading, { className: "pb-lg xl:pb-4xl self-start xl:self-center", headingType: "h3", title: title })) : null, jsxs("form", { className: "w-full xl:max-w-[468px]", method: "POST", action: FORM_URL_MAP[formType], children: [jsx(CurrencyInput, { valid: !isDisabled, placeholder: placeholder, label: label, max: MAX_AMOUNT, min: MIN_AMOUNT, ...field('amount', { parse: Number, format: String }) }), jsx("input", { type: "hidden", name: "amount", value: amount }), button?.text ? (jsx(Button, { className: "w-full mt-lg", type: "submit", disabled: isDisabled, children: button.text })) : null] })] }));
+    const RadioButtonGroup = JSX(({ items, checkedItem, className, onChange: onChangeCheckedItem, orientation = 'horizontal', }) => (jsx("div", { className: style(`flex ${orientationStyleMap[orientation]}`, className), role: "radiogroup", children: items?.map(({ id, text }) => (jsx(Checkbox, { isRadio: true, text: text, value: checkedItem === id, onChange: () => onChangeCheckedItem && onChangeCheckedItem(id) }, String(id)))) })));
+
+    const renderBinaryRadioButtonGroup = ({ items, title, mobileTitle = title, orientation = 'horizontal', value, radioGroupClassName, onChange, }) => (jsxs("div", { className: "space-y-s", children: [title ? (jsx("div", { className: "hidden @5xl:block", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, mobileTitle ? (jsx("div", { className: "@5xl:hidden", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: mobileTitle }) })) : 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 mapChildren = (mapper) => (children) => {
-        if (children === null || children === undefined) {
-            return children;
+    const getLimitRangeByKeys = ([minKey, maxKey], limitParams, rateRows = []) => limitParams && limitParams[minKey] && limitParams[maxKey]
+        ? {
+            [minKey]: limitParams[minKey],
+            [maxKey]: limitParams[maxKey],
         }
-        return Array.isArray(children) ? children.map(mapper) : mapper(children, 0);
-    };
-
-    const HEADER_HEIGHT = 170;
-    const FOOTER_HEIGHT = 48;
-    const BLOCKS_GAP = 4;
-    const PAGE_PADDINGS_X = 20;
-    const DEFAULT_HEIGHT = 866;
-    const getContainerHeight = (minHeight) => ({
-        height: `calc(100vh - ${HEADER_HEIGHT + FOOTER_HEIGHT + BLOCKS_GAP + PAGE_PADDINGS_X}px)`,
-        minHeight: `${minHeight || DEFAULT_HEIGHT}px`,
+        : 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 SENSITIVITY_SCALE = 10;
-    function useIntersectionObserver(observerCallback, { sensitivity, rootRef } = {}) {
-        const ref = useRef(null);
-        const observerOptions = useMemo(() => ({ threshold: sensitivityToThreshold(sensitivity), root: rootRef?.current }), [sensitivity, rootRef?.current]);
-        useEffect(() => {
-            if (!ref.current) {
-                return undefined;
-            }
-            const intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
-            intersectionObserver.observe(ref.current);
-            return () => {
-                intersectionObserver.disconnect();
-            };
-        }, [observerCallback, observerOptions]);
-        return ref;
-    }
-    function sensitivityToThreshold(sensitivity = 0) {
-        const thresholdsCount = Math.round(sensitivity * SENSITIVITY_SCALE);
-        return Array.from({ length: thresholdsCount })
-            .fill(0)
-            .map((_, thi) => Math.min(thi / thresholdsCount), 1)
-            .concat(1);
+    const DEPOSIT_RATES_SERVICE_MAP = {
+        UL: 'businessdepositrates',
+        IP: 'selfemployeddepositrates',
+    };
+    function useBusinessDepositRates(rateParams) {
+        const serviceName = rateParams?.rateType ? DEPOSIT_RATES_SERVICE_MAP[rateParams?.rateType] : '';
+        const { data } = useAsyncData(serviceName ? `/api/v1/depositrates/${serviceName}` : null, fetchJSONUnsafe);
+        return Array.isArray(data) ? data : [];
     }
 
-    const SwipeListItem = JSX(({ className, style: inlineStyle, idx, activeIndex, observerOptions, children, onIntersection, }) => {
-        const observerCallback = useCallback((entries) => {
-            if (entries.length && onIntersection) {
-                onIntersection(idx || 0, entries[entries.length - 1]);
-            }
-        }, [onIntersection, idx]);
-        const ref = useIntersectionObserver(observerCallback, observerOptions);
-        return (jsx("div", { className: style('inline-block snap-always box-border', className), style: inlineStyle, "aria-current": Boolean(idx === activeIndex), ref: ref, role: "listitem", children: children }));
-    });
-
-    const childStyleMap = ['min-w-full', '@lg:min-w-[50%]', '@lg:min-w-[33.3%]', '@lg:min-w-[25%]'];
-    const SwipeListContainer = JSX(({ className, itemClassName, containerRef, activeIndex, visibleItemCount = 0, gap = 0, padding = 0, listType = 'horizontal-list', snapAlign = 'snap-center', minHeight, children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
-        const observerOptions = {
-            sensitivity: 1,
-            rootRef: containerRef,
-        };
-        const itemsVisibilityListRef = useRef([]);
-        const handleIntersection = useCallback((idx, entry) => {
-            const itemsVisibilityList = [...(itemsVisibilityListRef.current || [])];
-            itemsVisibilityList[idx] = entry;
-            itemsVisibilityListRef.current = itemsVisibilityList;
-            onVisibleItemsChange && onVisibleItemsChange(itemsVisibilityList);
-            onVisibleIndicesChange && onVisibleIndicesChange(getVisibleIndices(itemsVisibilityList));
-        }, [onVisibleItemsChange, onVisibleIndicesChange]);
-        const additionPadding = visibleItemCount > 0 ? gap * Number(visibleItemCount) - 1 : 0;
-        const isVerticalList = listType === 'vertical-list';
-        const isHorizontalList = listType === 'horizontal-list';
-        const containerStyle = {
-            ...(isHorizontalList ? getContainerOffset(padding, additionPadding) : {}),
-            ...(isVerticalList ? getContainerHeight(minHeight) : {}),
-            gap: `${gap}px`,
+    const useBusinessDepositCalculatorParams = (userInputParams, rateParams) => {
+        const { daysValue, moneyValue, isPartialWithdrawal, isReplenished, isMonthlyInterestPayment } = userInputParams;
+        const isOperatingDeposit = isReplenished || isPartialWithdrawal;
+        const isDisabledOperatingDeposit = daysValue < BUSINESS_OPERATING_MIN_DAYS || daysValue > BUSINESS_OPERATING_MAX_DAYS;
+        const rateRows = useBusinessDepositRates(rateParams);
+        if (daysValue <= BUSINESS_RATE_MIN_DAYS) {
+            return {
+                ...DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS,
+                ...userInputParams,
+                isDisabledOperatingDeposit,
+                isUnavailableByTerm: true,
+            };
+        }
+        const businessDepositCalculatorSourceBookParams = rateRows?.find((_) => {
+            return (isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
+                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 = rateRows || [DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS];
+        return {
+            ...businessDepositCalculatorSourceBookParams,
+            ...getRangeByKeys(['minSum', 'maxSum'], sourceBookRows),
+            ...getRangeByKeys(['minDays', 'maxDays'], sourceBookRows),
+            ...userInputParams,
+            isDisabledOperatingDeposit,
+            income,
+            finalSum,
         };
-        return (jsx("div", { className: style('box-border overflow-auto no-scrollbar', listType, className), style: containerStyle, ref: containerRef, role: "list", children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: style(snapAlign, visibleItemCount ? childStyleMap[visibleItemCount - 1] : '', isVerticalList ? 'h-full' : '', itemClassName), style: isHorizontalList ? getContainerOffset(padding / 4) : {}, activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
-    });
-    // Styles used to compensate outer container padding to get rid of clipping effect
-    const getContainerOffset = (padding, additionalPadding = 0) => ({
-        marginLeft: `${-padding}px`,
-        marginRight: `${-padding}px`,
-        paddingLeft: `${padding}px`,
-        paddingRight: `${padding + additionalPadding}px`,
-    });
-    const getVisibleIndices = (itemsVisibilityList) => itemsVisibilityList
-        .map((_, i) => [_, i])
-        .filter(([_]) => _ && _.intersectionRatio >= 0.9)
-        .map(([, i]) => i);
-
-    const containerStyles = {
-        'horizontal-list': 'mx-auto mt-lg w-fit',
-        'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
     };
-    const activeDotStyles = {
-        'horizontal-list': 'w-6',
-        'vertical-list': 'h-6',
+    const 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 dotStyle = 'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white group-data-transparent:bg-white';
-    const inactiveDotStyle = 'w-2 h-2 opacity-30';
-    const SwipeListControlDots = JSX(({ className = '', containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list', version, }) => {
-        const handleClick = (idx) => {
-            if (idx !== activeIndex && containerRef?.current) {
-                containerRef.current.children[idx]?.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'nearest',
-                });
-            }
-        };
-        return dotCount ? (jsx("div", { className: style('flex gap-xs', containerStyles[listType], version ? 'group' : '', className), "data-ver": version, children: Array.from({ length: dotCount })
-                .fill(null)
-                .map((_, idx) => (jsx("div", { className: `${dotStyle} ${idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle}`, role: "button", "aria-hidden": true, onClick: () => handleClick(idx) }, String(idx)))) })) : null;
-    });
 
-    const areArraysEqual = (as, bs) => as === bs || Boolean(as && bs && as?.length === bs?.length && as.every((_, i) => _ === bs[i]));
+    const BusinessDepositCalculatorForm = JSX(({ className = '', buttons, footnote, bottomFootnote, isShowDepositeName, defaultParams, rateParams, }) => {
+        const [userInputParams, { field }] = useForm({
+            moneyValue: getMoneyDefaultValue(defaultParams, BUSINESS_DEFAULT_SUM),
+            daysValue: getMonthsDefaultValue(defaultParams, BUSINESS_DEFAULT_DAYS),
+            isReplenished: Boolean(defaultParams?.isReplenished),
+            isPartialWithdrawal: Boolean(defaultParams?.isPartialWithdrawal),
+            isMonthlyInterestPayment: Boolean(defaultParams?.isMonthlyInterestPayment),
+        });
+        const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, rateParams);
+        const { income, finalSum, rate, isUnavailableByTerm, depositeName } = calculatorParams;
+        return (jsx(CalculatorFormLayout, { className: className, inputChildren: jsxs("div", { 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 sm:flex-row gap-y-4 gap-x-14", children: [renderBusinessDepositParamsForm(calculatorParams, field), renderInterestPayment({
+                                title: 'Выплата процентов',
+                                orientation: 'vertical',
+                                ...field('isMonthlyInterestPayment'),
+                                radioGroupClassName: 'sm:flex-col',
+                            })] })] }), rateChildren: renderRate({
+                rate,
+                depositeName,
+                isShowDepositeName,
+                isUnavailableByTerm,
+            }), resultChildren: jsxs("div", { children: [renderDepositResults(finalSum, income), renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote), renderFootnote(bottomFootnote)] }) }));
+    });
+    const renderBusinessDepositParamsForm = (calculatorParams, field) => (jsxs("div", { className: "space-y-s", children: [jsx(Text, { color: "text-secondary-text", font: "font-light", children: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B" }), 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 })] })] }));
+    const renderDepositResults = (finalSum, income) => (jsxs("div", { className: "flex flex-col gap-2xl sm:gap-0 mb-lg", 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 getItemWidth = (container) => (itemCount) => container.scrollWidth / itemCount;
-    const scrollBy = (container) => (itemCount, delta) => {
-        container.scrollBy({ left: delta * getItemWidth(container)(itemCount), behavior: 'smooth' });
+    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 scrollToEnd = (container) => {
-        container.scrollTo({ left: container.scrollWidth, behavior: 'smooth' });
-    };
+    const getCreditCalculatorLimitParams = ({ limitRows, userInputParams, paramsViewSettings, }) => limitRows?.find((row) => checkCreditSourceBookRowCommonParams({
+        row,
+        userInputParams,
+        paramsViewSettings,
+    }));
 
-    const scrollToStart = (container) => {
-        container.scrollTo({ left: 0, behavior: 'smooth' });
-    };
+    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;
 
-    const useSwipeListScroll = ({ itemCount, onVisibleIndicesChange, }) => {
-        const containerRef = useRef(null);
-        const [visibleIndices, setVisibleIndices] = useState([]);
-        const handleVisibleIndicesChange = useCallback((indices) => {
-            setVisibleIndices((prevIndices) => areArraysEqual(prevIndices, indices) ? prevIndices : indices);
-            onVisibleIndicesChange && onVisibleIndicesChange(indices);
-        }, [itemCount]);
-        const [minIndex, maxIndex] = visibleIndices.length
-            ? [minBy()(visibleIndices), maxBy()(visibleIndices)]
-            : [-1, -1];
-        const canScrollLeft = minIndex > 0;
-        const canScrollRight = maxIndex < itemCount - 1;
-        const scrollLeft = useCallback(() => {
-            if (!containerRef.current) {
-                return;
-            }
-            if (canScrollLeft) {
-                scrollBy(containerRef.current)(itemCount, -1);
+    /**
+     * Формулы расчёта аннуитетных и дифференцированных платежей:
+     * 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 {
-                scrollToEnd(containerRef.current);
-            }
-        }, [itemCount, canScrollLeft]);
-        const scrollRight = useCallback(() => {
-            if (!containerRef.current) {
-                return;
+                return moneyValue * (i + i / (Math.pow(1 + i, monthsValue) - 1));
             }
-            if (canScrollRight) {
-                scrollBy(containerRef.current)(itemCount, 1);
+        }
+        else {
+            return Math.round(moneyValue / monthsValue) + moneyValue * (rate / (MONTHS_IN_YEAR * 100)); // Используется значение ставки (rate) в процентах, делённое на сто.
+        }
+    };
+
+    const getCreditCalculatorParams = (userInputParams, calcSource, paramsViewSettings) => {
+        const { moneyValue, monthsValue } = userInputParams;
+        const rateRows = calcSource?.rateRows || [DEFAULT_CREDIT_CALCULATOR_PARAMS];
+        const limitRows = calcSource?.limitRows || [];
+        const creditCalculatorSourceBookLimitParams = getCreditCalculatorLimitParams({
+            limitRows,
+            userInputParams,
+            paramsViewSettings,
+        });
+        const { minSum, maxSum } = getLimitRangeByKeys(['minSum', 'maxSum'], creditCalculatorSourceBookLimitParams, rateRows);
+        const { minMonths, maxMonths } = getLimitRangeByKeys(['minMonths', 'maxMonths'], creditCalculatorSourceBookLimitParams, rateRows);
+        const creditCalculatorRateParams = getCreditCalculatorRateParams({
+            rateRows,
+            userInputParams,
+            paramsViewSettings,
+            moneyValue,
+            monthsValue,
+        });
+        const { rate } = creditCalculatorRateParams;
+        const monthlyPayment = getMonthlyPayment(rate, userInputParams);
+        return {
+            ...creditCalculatorRateParams,
+            ...userInputParams,
+            minSum,
+            maxSum,
+            minMonths,
+            maxMonths,
+            moneyValue,
+            monthsValue,
+            monthlyPayment,
+        };
+    };
+
+    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 renderPaymentType = (props) => renderBinaryRadioButtonGroup({
+        ...props,
+        radioGroupClassName: 'sm:flex-col',
+        items: [
+            { id: 'annuity', text: 'Аннуитетный' },
+            { id: 'differential', text: 'Дифференцированный' },
+        ],
+    });
+
+    const CreditCalculatorForm = JSX(({ className, calcSource, buttons, footnote, paramsViewSettings, defaultParams }) => {
+        const [userInputParams, { field }] = useForm({
+            moneyValue: getMoneyDefaultValue(defaultParams, CREDIT_DEFAULT_SUM),
+            monthsValue: getMonthsDefaultValue(defaultParams, DEFAULT_MONTHS),
+            isAnnuity: Boolean(defaultParams?.isAnnuity),
+            isInsurance: Boolean(defaultParams?.isEnableInsurance),
+            isSalaryClient: Boolean(defaultParams?.isEnableSalaryClient),
+            isPensionClient: Boolean(defaultParams?.isEnablePensionClient),
+            isStateEmployee: Boolean(defaultParams?.isEnableStateEmployee),
+        });
+        const calculatorParams = getCreditCalculatorParams(userInputParams, calcSource, paramsViewSettings);
+        const paymentTypeElement = renderPaymentType({
+            title: '',
+            mobileTitle: 'Тип платежа',
+            orientation: 'vertical',
+            ...field('isAnnuity'),
+        });
+        const { onChange: setMoneyValue } = field('moneyValue');
+        const { onChange: setMonthsValue } = field('monthsValue');
+        useEffect(() => {
+            setMoneyValue &&
+                setMoneyValue(clamp(userInputParams.moneyValue, calculatorParams.minSum, calculatorParams.maxSum));
+        }, [calculatorParams.minSum, calculatorParams.maxSum]);
+        useEffect(() => {
+            setMonthsValue &&
+                setMonthsValue(clamp(userInputParams.monthsValue, calculatorParams.minMonths, calculatorParams.maxMonths));
+        }, [calculatorParams.minMonths, calculatorParams.maxMonths]);
+        return (jsx(CalculatorFormLayout, { className: className, inputChildren: jsxs("div", { 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: "sm:hidden", children: paymentTypeElement })] }), rateChildren: renderRate({
+                rate: calculatorParams.rate,
+            }), resultChildren: jsxs("div", { children: [jsx(CalculatorValueBlock, { title: "\u0415\u0436\u0435\u043C\u0435\u0441\u044F\u0447\u043D\u044B\u0439 \u043F\u043B\u0430\u0442\u0451\u0436", value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), jsx("div", { className: "hidden sm:block mb-lg", children: paymentTypeElement }), renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] }) }));
+    });
+    const renderCreditParamsForm$1 = (params, field) => (jsxs("div", { className: "flex flex-col gap-y-2xl", 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 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 {
-                scrollToStart(containerRef.current);
-            }
-        }, [itemCount, canScrollRight]);
-        const scrollTo = useCallback((idx, options = {
-            behavior: 'smooth',
-            block: 'nearest',
-            inline: 'center',
-        }) => {
-            if (containerRef?.current) {
-                containerRef.current.children[idx]?.scrollIntoView(options);
+                i++;
             }
-        }, [containerRef]);
-        return [
-            containerRef,
-            {
-                scrollLeft,
-                scrollRight,
-                scrollTo,
-                canScrollLeft,
-                canScrollRight,
-                visibleIndicesRange: [minIndex, maxIndex],
-                handleVisibleIndicesChange,
-            },
-        ];
+        }
+        return result;
     };
 
-    const scrollButtonStyle$1 = 'absolute top-[calc(50%-24px)] z-40';
-    const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
-    const CarouselScrollButtons = JSX(({ scroll, activeIndex, itemCount, arrowsPadded, hasEdgeBlocks, onScrollLeft, onScrollRight, }) => {
-        const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
-        const canMoveLeft = hasEdgeBlocks ? activeIndex > 0 : canScrollLeft;
-        const canMoveRight = hasEdgeBlocks ? activeIndex < itemCount - 1 : canScrollRight;
-        const handleScrollLeft = useCallback(() => {
-            if (!hasEdgeBlocks) {
-                scrollLeft();
-            }
-            else {
-                canScrollLeft && activeIndex !== itemCount - 1 && scrollLeft();
-                onScrollLeft();
-            }
-        }, [scrollLeft, onScrollLeft, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
-        const handleScrollRight = useCallback(() => {
-            if (!hasEdgeBlocks) {
-                scrollRight();
-            }
-            else {
-                canScrollRight && activeIndex !== 0 && scrollRight();
-                onScrollRight();
-            }
-        }, [scrollRight, onScrollRight, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
-        return (jsxs("div", { className: "m:hidden block", children: [renderBlur(scroll), canMoveLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'left-1 m:left-8' : 'left-0'), onClick: handleScrollLeft })) : null, canMoveRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'right-1 m:right-8' : 'right-0'), onClick: handleScrollRight })) : null] }));
+    const getDepositCalculatorParams = (userInputParams, calcSource, paramsViewSettings) => {
+        const { moneyValue, monthsValue } = userInputParams;
+        const defaultMonth = calcSource?.rateRows?.[0]
+            ? getMiddleMonth(calcSource.rateRows[0].minMonths, calcSource.rateRows[0].maxMonths)
+            : 0;
+        const isExcludeMonthlyInterestPayment = !paramsViewSettings?.isShowMonthlyInterestPayment;
+        const isExcludeRemoteRegistration = !paramsViewSettings?.isShowRemoteRegistration;
+        const depositCalculatorSourceBookParams = calcSource?.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 = calcSource?.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((props) => {
+        const { className, calcSource, buttons, footnote, paramsViewSettings, defaultParams } = props;
+        const [userInputParams, { field }] = useForm({
+            moneyValue: getMoneyDefaultValue(defaultParams, DEPOSIT_DEFAULT_SUM),
+            monthsValue: getMonthsDefaultValue(defaultParams),
+            isMonthlyInterestPayment: Boolean(defaultParams?.isMonthlyInterestPayment),
+            isRemoteRegistration: Boolean(defaultParams?.isRemoteRegistration),
+        });
+        const calculatorParams = getDepositCalculatorParams(userInputParams, calcSource, paramsViewSettings);
+        const { defaultMonth, rate, income, finalSum } = calculatorParams;
+        const { onChange: setMonthsValue } = field('monthsValue');
+        const { onChange: setMoneyValue } = field('moneyValue');
+        useEffect(() => {
+            !userInputParams.monthsValue && setMonthsValue && setMonthsValue(defaultMonth);
+        }, [defaultMonth]);
+        useEffect(() => {
+            setMoneyValue &&
+                setMoneyValue(clamp(userInputParams.moneyValue, calculatorParams.minSum, calculatorParams.maxSum));
+        }, [calculatorParams.minSum, calculatorParams.maxSum]);
+        return (jsx(CalculatorFormLayout, { className: className, inputChildren: jsxs("div", { 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,
+                    }), renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field)] }), rateChildren: renderRate({
+                rate,
+            }), resultChildren: jsxs("div", { 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',
+        });
+    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 + moneyExtra, ['minSum', 'maxSum'], row) &&
+        checkRangeByKeys(oldMonthlyPayment, ['minSumOld', 'maxSumOld'], row) &&
+        checkRangeByKeys(moneyExtra, ['minSumExtra', 'maxSumExtra'], row) &&
+        checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row)) || DEFAULT_REFINANCING_CALCULATOR_PARAMS;
+
+    const getRefinancingCalculatorParams = (userInputParams, calcSource, paramsViewSettings) => {
+        const { moneyValue, monthsValue, oldMonthlyPayment, moneyExtra } = userInputParams;
+        const rateRows = calcSource?.rateRows || [DEFAULT_REFINANCING_CALCULATOR_PARAMS];
+        const limitRows = calcSource?.limitRows || [];
+        const sourceBookLimitParams = getRefinancingCalculatorLimitParams({
+            limitRows,
+            userInputParams,
+            paramsViewSettings,
+        });
+        const { minSum, maxSum } = getLimitRangeByKeys(['minSum', 'maxSum'], sourceBookLimitParams, rateRows);
+        const { minMonths, maxMonths } = getLimitRangeByKeys(['minMonths', 'maxMonths'], sourceBookLimitParams, rateRows);
+        const refinancingCalculatorSourceBookRateParams = getRefinancingCalculatorRateParams({
+            rateRows,
+            userInputParams,
+            paramsViewSettings,
+            moneyValue,
+            monthsValue,
+            oldMonthlyPayment,
+            moneyExtra,
+        });
+        const { rate } = refinancingCalculatorSourceBookRateParams;
+        const monthlyPayment = getMonthlyPayment(rate, userInputParams);
+        const benefit = userInputParams.oldMonthlyPayment - monthlyPayment;
+        return {
+            ...refinancingCalculatorSourceBookRateParams,
+            ...userInputParams,
+            minSum,
+            maxSum,
+            minMonths,
+            maxMonths,
+            moneyValue,
+            monthsValue,
+            oldMonthlyPayment,
+            moneyExtra,
+            monthlyPayment,
+            benefit,
+        };
+    };
+
+    const RefinancingCalculatorForm = JSX(({ className, calcSource, 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 = getRefinancingCalculatorParams(userInputParams, calcSource, paramsViewSettings);
+        const paymentTypeElement = renderPaymentType({
+            title: '',
+            mobileTitle: 'Тип платежа',
+            orientation: 'vertical',
+            ...field('isAnnuity'),
+        });
+        return (jsx(CalculatorFormLayout, { className: className, inputChildren: jsxs("div", { children: [renderWantedSumInput({
+                        title: 'Остаток долга в других банках, ₽ ',
+                        step: 500,
+                        min: calculatorParams.minSum,
+                        max: calculatorParams.maxSum - calculatorParams.maxSumExtra,
+                        ...field('moneyValue'),
+                        value: calculatorParams.moneyValue,
+                    }), renderWantedSumInput({
+                        title: 'Ежемесячный платёж в других банках, ₽',
+                        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,
+                    }), renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field), calculatorParams.isExtraMoney
+                        ? renderWantedSumInput({
+                            title: 'Дополнительная сумма, ₽ ',
+                            step: 500,
+                            min: calculatorParams.minSumExtra,
+                            max: calculatorParams.maxSumExtra,
+                            ...field('moneyExtra'),
+                            value: calculatorParams.moneyExtra,
+                        })
+                        : null, jsx("div", { className: "sm:hidden pt-1 pb-4 border-b border-main-divider", children: paymentTypeElement })] }), rateChildren: renderRate({
+                rate: calculatorParams.rate,
+                fractionDigits: 1,
+            }), resultChildren: jsxs("div", { children: [jsx(CalculatorValueBlock, { title: "\u0415\u0436\u0435\u043C\u0435\u0441\u044F\u0447\u043D\u044B\u0439 \u043F\u043B\u0430\u0442\u0451\u0436", value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), calculatorParams.benefit > 0 ? (jsx(CalculatorValueBlock, { title: 'Выгода в месяц', value: calculatorParams.benefit, postfix: "\u20BD" })) : null, jsx("div", { className: "hidden sm:block mb-lg", children: paymentTypeElement }), renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] }) }));
     });
-    const renderBlur = (scroll) => (jsxs("div", { children: [scroll.canScrollLeft ? (jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white group-data-secondary:bg-none') })) : null, scroll.canScrollRight ? (jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white group-data-secondary:bg-none') })) : null] }));
+    const renderCreditParamsForm = (params, field) => (jsxs("div", { className: "space-y-lg sm:space-y-s", 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, { 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, jsx(Checkbox, { 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 })] }));
 
-    const ITEMS_GAP = 16;
+    const EmbeddableCalcBlocks = {
+        CreditCalculatorForm,
+        DepositCalculatorForm,
+        BusinessDepositCalculatorForm,
+        BonusCalculatorForm,
+        RefinancingCalculatorForm,
+    };
 
-    const getBorderStyle = (showBorder = false) => showBorder
-        ? 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider'
-        : '';
+    const renderCalculatorBlock = (block, i) => {
+        const type = block?.calcType;
+        if (!type || !(type in EmbeddableCalcBlocks)) {
+            return null;
+        }
+        const EmbeddedBlock = EmbeddableCalcBlocks[type];
+        return (jsx("section", { className: "box-border relative bg-white flex shrink-0 self-start basis-full", role: "listitem", children: jsxs("div", { className: "box-border p-4xl w-full space-y-xl", children: [block?.title ? jsx(Heading, { className: "text-center", title: block.title }) : null, jsx(EmbeddedBlock, { ...block })] }) }, String(i)));
+    };
 
-    const renderCardHighlight = ({ className, text = 'ХИТ' } = {}) => (jsxs("div", { className: style('w-14 h-14 bg-white flex flex-col items-center justify-center rounded-md shadow-main-black', className), children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "24", height: "24" }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: text })] }));
+    const Calculator = UniBlock(({ className = '', tabAlign, calculatorTabs = [], ...rest }) => {
+        const tabsNav = calculatorTabs.map((_) => _.nav || {});
+        const calculatorBlocks = calculatorTabs.map(({ calculatorBlock }) => calculatorBlock || {});
+        const [slideIndexShift, setSlideIndexShift] = useState(0);
+        const handleSlideIndexShift = useCallback((_) => setSlideIndexShift(_), []);
+        const COLUMNS_FOR_SCROLL = 3;
+        const [activeIndex, controls] = useCarouselControls({
+            itemCount: calculatorTabs?.length,
+            visibleItemCount: COLUMNS_FOR_SCROLL,
+        });
+        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden relative', className), defaultPadding: "p-0", ...rest, children: [jsxs("div", { className: "bg-white", children: [tabsNav.length > 1
+                            ? renderTabs$1({
+                                activeIndex,
+                                tabsNav,
+                                tabAlign,
+                                slideIndexShift,
+                                onClick: handleSlideIndexShift,
+                            })
+                            : null, renderArrows({
+                            ...controls,
+                            btnClass: ['left-3', 'right-3'],
+                            className: 'top-10',
+                        })] }), jsx("div", { className: "flex", style: { transform: `translateX(-${slideIndexShift}00%)` }, role: "list", children: calculatorBlocks?.length ? calculatorBlocks.map(renderCalculatorBlock) : null })] }));
+    });
+    function renderNavButton$3({ tab, i, isActive, onClick }) {
+        const btnClassName = isActive
+            ? 'w-96 p-m border-none bg-primary-main text-white'
+            : `w-96 p-s ease-in duration-300 bg-white text-primary-text`;
+        const btnTitleClassName = isActive ? 'text-xl mb-xs' : `text-l mb-2xs`;
+        const btnDescClassName = isActive
+            ? 'text-l font-light text-white'
+            : `text-m font-light text-secondary-text`;
+        const iconClassName = isActive ? '' : `text-primary-main`;
+        const iconVersion = tab?.icon?.iconVersion;
+        const activeIconStyle = isActive ? 'white' : 'normal';
+        return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: style('box-border relative border border-gray cursor-pointer text-left border-b-0 flex space-x-m min-h-20', btnClassName), children: [jsx(Img, { className: style('h-6 w-6 min-w-6 min-h-6', iconClassName), image: {
+                        ...tab?.icon,
+                        iconVersion: iconVersion ?? activeIconStyle,
+                    }, width: "24", height: "24" }), jsxs("div", { className: "border-0", children: [jsx("div", { className: btnTitleClassName, children: tab?.title }), jsx("div", { className: btnDescClassName, children: tab.description })] })] }, String(i)));
+    }
+    function renderTabs$1({ activeIndex, tabsNav, tabAlign, slideIndexShift, onClick }) {
+        const CARD_SHIFT = 388;
+        const alignStyle = tabAlign ? AlignJustifyStyle[tabAlign] : '';
+        return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }, className: "flex flex-col justify-end items-center h-32 pt-4xl box-border duration-1000", children: jsx("div", { className: style('w-full flex flex-nowrap items-end gap-xs', alignStyle), children: tabsNav.map((tab, i) => renderNavButton$3({
+                            tab,
+                            i,
+                            isActive: Boolean(i === slideIndexShift),
+                            onClick: () => onClick(i),
+                        })) }) }), jsx("div", { className: "w-full h-2 bg-primary-main" })] }));
+    }
 
-    const cardBaseStyle = 'relative h-full';
-    const CARD_SIZE_MAP = {
-        small: 'sm:min-w-64',
-        normal: 'sm:min-w-96',
-        big: 'sm:min-w-[515px]',
-    };
-    const renderCarouselCards = ({ noCardBorder, activeIndex, cardSize = 'normal', ...rest }) => {
-        const { blocks: childBlocks } = rest.block || {};
-        const someCardsHighlighted = childBlocks?.some(isCardHighlighted);
-        return renderChildren({
-            ...rest,
-            renderProps: (block, options, blockIndex) => (jsxs("div", { className: cardWrapperStyle(block, { someCardsHighlighted }), children: [renderBlock$1(block, options, {
-                        className: cardStyle(block, {
-                            someCardsHighlighted,
-                            showBorder: !noCardBorder,
-                            cardSize,
-                        }),
-                        blockIndex,
-                        isActive: blockIndex === activeIndex,
-                    }), isCardHighlighted(block)
-                        ? renderCardHighlight({ className: 'absolute top-0 -right-4 z-40' })
-                        : null] }, String(blockIndex))),
+    const NumberInput = JSX((props) => {
+        const { onChange, min, max, defaultValue = '0', fractionDigits = 0, ...inputProps } = props;
+        const normalizedProps = useNormalizedInput(props, {
+            normalize: (_ = defaultValue) => min && max ? String(clamp(Number(sanitizeNumberStr(_)), min, max)) : sanitizeNumberStr(_),
+            format: toLocalNumberFormat(fractionDigits),
         });
-    };
-    const cardWrapperStyle = (_, { someCardsHighlighted }) => style(cardBaseStyle, someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl' : 'pt-3xl sm:pt-16'));
-    const cardStyle = (_, { someCardsHighlighted, showBorder, cardSize = 'normal', }) => style(cardBaseStyle, 'min-w-80', CARD_SIZE_MAP[cardSize], // TODO fix для RecommendationCard
-    someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'), getBorderStyle(showBorder), showBorder && 'h-full');
-    const isCardHighlighted = (_) => _?.content && 'isHighlighting' in _.content && _.content.isHighlighting;
+        const handleChange = useCallback((_) => onChange && onChange(sanitizeNumberStr(_)), [onChange]);
+        return jsx(Input, { onChange: handleChange, ...inputProps, ...normalizedProps });
+    });
+    const sanitizeNumberStr = (_ = '') => _.replaceAll(',', '.')
+        .replace(/[^\d.]/g, '')
+        .replace(/([^.]*\.[^.]*)\./, '$1');
 
-    const VISIBLE_ITEM_COUNT = 1;
+    const CurrencyInput = JSX((props) => (jsx(NumberInput, { ...props, fractionDigits: 2, children: jsx("div", { className: "absolute right-4 bottom-4", children: jsx(Text, { size: "text-xl", font: "font-light", children: "\u20BD" }) }) })));
 
-    const Carousel = UniBlock(({ className, itemCount, visibleItemCount = VISIBLE_ITEM_COUNT, noCardBorder, isAlignCenter, arrowsPadded = true, isGap = true, isEmbedded = false, cardSize = 'normal', ...rest }) => {
-        const { blocks: childBlocks = [] } = rest.block || {};
-        const count = itemCount || childBlocks?.length;
-        const [activeIndex, { inc: increaseActiveIndex, dec: decreaseActiveIndex }] = useCarouselControls({
-            itemCount: count,
-            visibleItemCount,
-        }, Math.floor(visibleItemCount / 2));
-        const [containerRef, scroll] = useSwipeListScroll({ itemCount: count });
-        const [dotsActiveIndex] = scroll.visibleIndicesRange;
-        // TODO Remove
-        const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
-        return (jsxs(BlockWrapper, { className: style(isEmbedded ? '@container-normal' : '', className), defaultPadding: "p-6xl", ...rest, children: [jsxs("div", { className: style(isAlignCenter ? 'flex justify-center' : '', 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: isGap ? ITEMS_GAP : undefined, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderCarouselCards({ noCardBorder, activeIndex, cardSize, ...rest }) }), jsx(CarouselScrollButtons, { scroll: scroll, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count })] }), jsx(SwipeListControlDots, { className: "@5xl:hidden", containerRef: containerRef, activeIndex: dotsActiveIndex, dotCount: count, listType: "horizontal-list" })] }));
-    }, {
-        childrenTypes: [
-            'CarouselCard',
-            'CarouselBankHistoryCard',
-            'CarouselCatalogCard',
-            'CarouselRecommendationCard',
-            'CarouselTariffsCard',
-            'RichTextBlock',
-            'ProductBlock',
-        ],
-        childSchema: () => ({
-            isHighlighting: {
-                title: 'Выделить карточку',
-                type: 'boolean',
-            },
-        }),
+    const DEFAULT_TITLE = 'Укажите сумму перевода';
+    const DEFAULT_LABEL = 'Сумма перевода';
+    const DEFAULT_PLACEHOLDER = '1500';
+    const MAX_AMOUNT = 300000;
+    const MIN_AMOUNT = 1;
+    const FORM_URL_MAP = {
+        private: 'https://old.rshb.ru/p2p/',
+        business: 'https://old.rshb.ru/smallbusiness/p2p/',
+    };
+    const INITIAL_FORM_STATE = {
+        amount: 1500,
+    };
+    const CardTransfer = JSX(({ className = '', title = DEFAULT_TITLE, label = DEFAULT_LABEL, placeholder = DEFAULT_PLACEHOLDER, button, formType = 'private', ...rest }) => {
+        const [{ amount }, { field }] = useForm(INITIAL_FORM_STATE);
+        const [isDisabled, setDisabled] = useState(false);
+        useEffect(() => {
+            setDisabled(amount <= 0);
+        }, [amount]);
+        return (jsxs(BlockWrapper, { className: style('flex flex-col items-center', className), defaultPadding: "p-6xl", ...rest, children: [title ? (jsx(Heading, { className: "pb-lg xl:pb-4xl self-start xl:self-center", headingType: "h3", title: title })) : null, jsxs("form", { className: "w-full xl:max-w-[468px]", method: "POST", action: FORM_URL_MAP[formType], children: [jsx(CurrencyInput, { valid: !isDisabled, placeholder: placeholder, label: label, max: MAX_AMOUNT, min: MIN_AMOUNT, ...field('amount', { parse: Number, format: String }) }), jsx("input", { type: "hidden", name: "amount", value: amount }), button?.text ? (jsx(Button, { className: "w-full mt-lg", type: "submit", disabled: isDisabled, children: button.text })) : null] })] }));
     });
 
     const CarouselBankHistoryCard = JSX(({ className, title, description, blockIndex = 0, isActive, ...rest }) => (jsx(BlockWrapper, { className: style('relative flex h-[485px]', isActive ? 'w-[440px] z-10' : 'w-[340px]', className), defaultPadding: "p-0", ...rest, children: jsx("div", { className: style('basis-full self-center', getBackColor(blockIndex)), children: isActive ? (jsx(Headline, { headlineVersion: "M", title: title, description: description, padding: "p-3xl", align: "text-left", className: "h-96 text-white shadow-dark-blue" })) : (jsx("div", { className: "h-[300px] flex justify-center items-center font-mohave text-title-large", children: jsx("span", { className: getTextColor(blockIndex), children: title }) })) }) })));
@@ -3322,8 +3453,6 @@
         return (jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
     };
 
-    const NotFound = JSX(({ title, description }) => (jsxs("div", { className: "bg-white p-6xl py-20 flex gap-s flex-col @xl:items-center", children: [jsx(Img, { image: { icon: 'MagnifierIcon', iconVersion: 'normal' }, width: "120", height: "120" }), jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: AlignStyles })] })));
-
     const ICONS$1 = ['ArrowDownIcon', 'ArrowUpIcon'];
     const resultsGridStyle = 'space-y-px lg:space-y-0 lg:grid lg:grid-cols-12 gap-2xs border-box';
     const BaseFiltrationInner = JSX(({ label = '', blocksToRender = [], topItemsCount = 0, block, notFound, ...rest }) => {
@@ -3335,95 +3464,6 @@
                             }, renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(DefaultFoldButton, { className: style(topItemsCount < 1 ? 'hidden' : ''), disabled: !hiddenBlocks?.length, label: label, icon: ICONS$1[Number(isUnfolded)], dataTheme: rest.options?.page?.colorPalette, onClick: onToggle })) })] })] }));
     });
 
-    const SlideCheckboxGroup = JSX(({ value, onChange, items = [], multiple }) => {
-        const handleChange = (newValue) => {
-            if (!onChange) {
-                return;
-            }
-            const hasAlready = value?.includes(newValue);
-            if (multiple) {
-                onChange(hasAlready ? (value || []).filter((v) => v !== newValue) : [...(value || []), newValue]);
-            }
-            else {
-                onChange(hasAlready ? [] : [newValue]);
-            }
-        };
-        return items.map((item) => (jsx(SlideCheckbox, { text: item?.title, value: [value].flatMap((_) => _).includes(item.value), onChange: () => handleChange(item.value), type: multiple ? 'checkbox' : 'radio' }, item.value)));
-    });
-
-    const renderFiltrationForm$1 = ({ field, reset, filtrationSchema, resetButton, children, }) => (jsxs("form", { className: "flex flex-col @4xl:flex-row justify-between bg-white p-4xl gap-s @4xl:gap-0", children: [jsxs("div", { className: "flex flex-col @4xl:flex-row gap-5xl", children: [children, Object.entries(filtrationSchema).map(renderFormItem(field))] }), resetButton ? (jsx("div", { children: jsx(Button, { type: "reset", className: "w-full @4xl:w-72 @4xl:ml-s", onClick: reset, children: resetButton?.text }) })) : null] }));
-    const renderFormItem = (field) => ([key, item]) => {
-        const type = item?.type;
-        switch (type) {
-            case 'array':
-                return renderCheckboxes(key, field)(item);
-            default:
-                return null;
-        }
-    };
-    const renderCheckboxes = (key, field) => (item) => {
-        const options = item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
-            [];
-        return (jsxs("div", { children: [item?.title ? (jsx("div", { className: "mb-m", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: item.title }) })) : null, jsx(SlideCheckboxGroup, { items: options, multiple: !item?.single, ...field(key) })] }, key));
-    };
-
-    function zip(firstCol, ...restCols) {
-        return firstCol.map((firstEl, rowIndex) => [firstEl, ...restCols.map((col) => col[rowIndex])]);
-    }
-
-    const isEmpty = (v) => v === null ||
-        v === undefined ||
-        v === '' ||
-        (Array.isArray(v) && v.length === 0) ||
-        (typeof v === 'object' && Object.keys(v).length === 0);
-
-    const isSingularFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) || isEmpty(target[key]) || pattern[key] === target[key];
-    const isMultipleFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) ||
-        isEmpty(target[key]) ||
-        pattern[key]?.every((_) => target[key]?.includes(_));
-    const isNumberFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) ||
-        isEmpty(target[key]) ||
-        naturalNumber(pattern[key]) <= naturalNumber(target[key]);
-    const isMultipleNumberFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) || isEmpty(target[key]) || target[key]?.includes(pattern[key]);
-    const isValueInRange = (key, pattern) => (target) => isEmpty(pattern[key]) ||
-        isEmpty(target[key]) ||
-        (naturalNumber(pattern[key]?.min) >= naturalNumber(target[key]?.min) &&
-            naturalNumber(pattern[key]?.min) <= naturalNumber(target[key]?.max));
-    const targetMatchPattern = (pattern, target) => Object.entries(pattern)
-        .map(([key, subPattern]) => {
-        if (typeof subPattern === 'number') {
-            return Array.isArray(target[key])
-                ? isMultipleNumberFieldMatch(key, pattern)
-                : isNumberFieldMatch(key, pattern);
-        }
-        if (typeof subPattern === 'object' && 'min' in subPattern && 'max' in subPattern) {
-            return isValueInRange(key, pattern);
-        }
-        return Array.isArray(subPattern)
-            ? isMultipleFieldMatch(key, pattern)
-            : isSingularFieldMatch(key, pattern);
-    })
-        .every((predicate) => predicate(target));
-    const naturalNumber = (n) => Number(n || 0);
-
-    const filterBlocks = (blocksWithProps, filtrationState) => (normalize = identity) => blocksWithProps
-        ?.filter(([, content]) => targetMatchPattern(filtrationState, normalize(content) || {}))
-        .map(([block]) => block);
-
-    const useFiltrationForm = (initialFormState, { block, page, normalize = identity, }) => {
-        const blocks = block?.blocks || [];
-        const [filtrationState, { field, reset, update: replaceFiltrationState }] = useForm(initialFormState);
-        const blocksWithProps = useMemo(() => zip(blocks, blocks.map((b) => resolveBlockProps(b.content, page?.fallback))), [blocks, page?.fallback]);
-        const blocksToRender = filtrationState === initialFormState
-            ? blocks
-            : filterBlocks(blocksWithProps, filtrationState)(normalize);
-        return [
-            filtrationState,
-            { blocksToRender, blocksWithProps },
-            { field, reset, update: replaceFiltrationState },
-        ];
-    };
-
     const isRateRow = (rateRow) => {
         return typeof rateRow?.minMonths === 'number' && typeof rateRow?.maxMonths === 'number';
     };
@@ -3447,11 +3487,10 @@
         });
         const rateRows = blocksWithProps.map(([, _]) => _?.paramsSource?.rateRows);
         const months = getMonths(rateRows);
-        const Inputs = (jsxs("div", { children: [jsx(CurrencyInput, { label: sumInput?.title, min: DEFAULT_MIN_SUM, max: DEFAULT_MAX_SUM, ...field('sum', {
-                        parse: (min) => ({ min: Number(min), max: DEFAULT_MAX_SUM }),
-                        format: ({ min }) => String(min),
-                    }) }), jsx(InputRange, { title: periodInput?.title, items: ['От 3 мес', 'До 5 лет'], list: months, ...field('period') })] }));
-        return (jsxs(BlockWrapper, { className: style('space-y-2xs', className), defaultPadding: "p-0", version: "transparent", ...rest, children: [renderFiltrationForm$1({ field, reset, filtrationSchema, resetButton, children: Inputs }), jsx(BaseFiltrationInner, { blocksToRender: blocksToRender, ...rest })] }));
+        return (jsxs(BlockWrapper, { className: style('space-y-2xs', className), defaultPadding: "p-0", version: "transparent", ...rest, children: [jsx(FiltrationForm, { filtrationSchema: filtrationSchema, resetButton: resetButton, field: field, reset: reset, children: jsxs("div", { className: "@4xl:max-w-xs", children: [jsx(CurrencyInput, { label: sumInput?.title, min: DEFAULT_MIN_SUM, max: DEFAULT_MAX_SUM, ...field('sum', {
+                                    parse: (min) => ({ min: Number(min), max: DEFAULT_MAX_SUM }),
+                                    format: ({ min }) => String(min),
+                                }) }), jsx(InputRange, { title: periodInput?.title, items: ['От 3 мес', 'До 5 лет'], list: months, ...field('period') })] }) }), jsx(BaseFiltrationInner, { blocksToRender: blocksToRender, ...rest })] }));
     }, {
         childrenTypes: ['ProductBlock'],
         childSchema: (content) => ({
@@ -4429,8 +4468,6 @@
         return (jsx("button", { type: "button", onClick: onClick, "aria-label": title, className: `box-border px-m py-s text-m font-light ${btnClassName}`, children: title }, String(i)));
     }
 
-    const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
-
     const investmentCellColorMap = {
         yellow: 'bg-yellow',
         green: 'bg-green',
@@ -4637,7 +4674,7 @@
             blocks: rest.block?.blocks,
             onFiltrationStateChange: handleFiltrationStateChange,
         });
-        return (jsxs(BlockWrapper, { className: style('space-y-2xs', className), defaultPadding: "p-0", version: "transparent", ...rest, children: [jsx(TabsControl, { ...tabsControlProps }), renderFiltrationForm$1({ field, reset, filtrationSchema, resetButton }), jsx(BaseFiltrationInner, { blocksToRender: blocksToRender, ...rest })] }));
+        return (jsxs(BlockWrapper, { className: style('space-y-2xs', className), defaultPadding: "p-0", version: "transparent", ...rest, children: [jsx(TabsControl, { ...tabsControlProps }), jsx(FiltrationForm, { filtrationSchema: filtrationSchema, resetButton: resetButton, field: field, reset: reset }), jsx(BaseFiltrationInner, { blocksToRender: blocksToRender, ...rest })] }));
     }, {
         childrenTypes: ['ProductBlock'],
         childSchema: (content) => content?.filtrationSchema || {},
@@ -5788,6 +5825,7 @@
         AdTile,
         ApplicationForm,
         ApplicationFormCustom,
+        BankAccountFiltration,
         BenefitsBlock,
         BonusBenefitsBlock,
         ButtonsBlock,
@@ -6049,7 +6087,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.245";
+    const packageVersion = "0.14.247";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;