@redneckz/wildless-cms-uni-blocks 0.7.4 → 0.7.6

package/bundle/bundle.umd.js

@@ -861,9 +861,9 @@
         return isVisible ? (jsxs("div", { children: [canDec ? (jsx(ArrowButton, { className: `absolute z-50 ${btnClass[0]} ${className}`, onClick: dec, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left", disabled: !canDec })) : null, canInc ? (jsx(ArrowButton, { className: `absolute z-50 rotate-180 ${btnClass[1]} ${className}`, onClick: inc, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right", disabled: !canInc })) : null] })) : null;
     }
 
-    const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
+    const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', {}).format(number);
 
-    const CalculatorValueBlock = JSX(({ title, value, postfix = '', prefix, className = '' }) => (jsxs("div", { className: `mb-7 ${className}`, children: [title ? jsx("div", { className: "text-l-light text-secondary-text", children: title }) : null, value ? (jsxs("div", { className: "text-h3", children: [prefix, " ", addSpacesBetweenNumbers(Math.round(value)), " ", postfix] })) : null] })));
+    const CalculatorValueBlock = JSX(({ title, value, postfix = '', prefix, className = '' }) => (jsxs("div", { className: style('mb-7', className), children: [title ? (jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: title })) : null, value ? (jsx("div", { children: jsxs(Text, { size: "text-h3", children: [prefix, " ", addSpacesBetweenNumbers(Math.round(value)), " ", postfix] }) })) : (jsx("div", { children: jsx(Text, { size: "text-h3", children: "-" }) }))] })));
 
     const DEFAULT_MIN_SUM = 60000;
     const DEFAULT_MAX_SUM = 2000000;
@@ -871,6 +871,13 @@
     const DEFAULT_MIN_MONTHS = 13;
     const DEFAULT_MAX_MONTHS = 60;
     const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS - DEFAULT_MIN_MONTHS) / 2);
+    const BUSINESS_DEFAULT_SUM = 100000;
+    const BUSINESS_MIN_DAYS = 1;
+    const BUSINESS_MAX_DAYS = 1095;
+    const BUSINESS_RATE_MIN_DAYS = 30; // порог количества дней, при которых ставка не доступна
+    const BUSINESS_OPERATING_MIN_DAYS = 90;
+    const BUSINESS_OPERATING_MAX_DAYS = 730;
+    const BUSINESS_DEFAULT_DAYS = 90;
     const MONTHS_IN_YEAR = 12;
     const MONTHLY_INTEREST_RATE = MONTHS_IN_YEAR * 100;
     const DEFAULT_CREDIT_CALCULATOR_PARAMS = {
@@ -907,13 +914,26 @@
         rate: 5.9,
         isMonthlyInterestPayment: true,
     };
+    const DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS = {
+        minSum: 1000,
+        maxSum: 500000,
+        minDays: BUSINESS_MIN_DAYS,
+        maxDays: BUSINESS_MAX_DAYS,
+        rate: 5.9,
+        isMonthlyInterestPayment: true,
+        isReplenished: false,
+        isPartialWithdrawal: false,
+        isSmallBusiness: false,
+        depositeName: "Депозит 'Стабильный'",
+    };
     const CREDIT_CALC_DEFAULT_DIR = 'credit-calculator-data';
     const BONUS_CALC_DEFAULT_DIR = 'bonus-calculator-data';
     const DEPOSIT_CALC_DEFAULT_DIR = 'deposit-calculator-data';
+    const BUSINESS_DEPOSIT_CALC_DEFAULT_DIR = 'business-calculator-data';
 
-    const Rate = JSX(({ rate, title = 'Ставка', unit, rateBlockClassName }) => (jsxs("div", { children: [jsx("div", { className: "text-l-light text-secondary-text", children: title }), jsxs("div", { className: "flex justify-start", children: [jsx("span", { className: `block gradient-color-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`, children: String(rate).replace('.', ',') }), unit ? jsx("span", { className: "gradient-color-text text-[65px] leading-[75px]", children: unit }) : ''] })] })));
+    const Rate = JSX(({ rate, title = 'Ставка', unit, depositeName, isShowDepositeName, rateBlockClassName }) => (jsxs("div", { children: [jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: title }), jsxs("div", { className: "relative", children: [jsxs("div", { className: "flex justify-start", children: [jsx("span", { className: style('block gradient-color-text font-mohave text-title-huge pr-6 -mt-4', rateBlockClassName), children: String(rate).replace('.', ',') }), unit ? (jsx("span", { className: "gradient-color-text text-[65px] leading-[75px]", children: unit })) : ('')] }), depositeName && isShowDepositeName ? (jsx("div", { className: "absolute bottom-7 w-full text-center whitespace-nowrap", children: depositeName })) : null] })] })));
 
-    const renderFootnote = (text) => text ? jsx("p", { className: "text-s-light text-secondary-text mt-7", children: text }) : null;
+    const renderFootnote = (text) => text ? (jsx(Paragraph, { size: "text-s-light", color: "text-secondary-text", children: text })) : null;
 
     const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 
@@ -1067,7 +1087,7 @@
             restExpenseValue,
         };
         const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } = useBonusCalculatorParams(userInputParams, sourceBookDir);
-        return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма покупок в категории путешествия, ₽', {
+        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма покупок в категории путешествия, ₽', {
                             minSum: minSumTravel,
                             maxSum: maxSumTravel,
                             moneyValue: travelExpenseValue,
@@ -1095,15 +1115,118 @@
             fill: 'white',
         },
     ];
-    const Checkbox = JSX(({ className, text, checked, isRadio, onChange }) => {
-        return (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer group/box", children: [jsx("input", { className: `peer appearance-none w-5 h-5 border-solid cursor-pointer group-hover/box:border-primary-hover
-        ${isRadio ? 'rounded-full border-2' : 'rounded checked:bg-primary-main border'}
-        ${checked ? 'border-black' : 'border-gray'}
-        checked:border-primary-main m-0`, type: "checkbox", onChange: (e) => onChange && onChange(e.target.checked), checked: checked }), isRadio ? (jsx("div", { className: "left-1 w-3 h-3 rounded-full bg-primary-main hidden absolute peer-checked:block" })) : (jsx(SVG, { paths: CHECK_PATHS, className: "hidden absolute left-1 ml-px peer-checked:block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" })), text ? jsx("span", { className: "font-sans ml-3 text-l-light", children: text }) : null] }) }));
+    const Checkbox = JSX(({ className, text, checked, disabled, isRadio, onChange }) => {
+        return (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer group/box", children: [jsx("input", { className: style('peer appearance-none w-5 h-5 border-solid cursor-pointer checked:border-primary-main m-0', isRadio
+                            ? 'rounded-full border-2'
+                            : 'rounded checked:bg-primary-main disabled:bg-main-disabled border', checked ? 'border-black' : 'border-gray', disabled ? '' : 'group-hover/box:border-primary-hover'), type: "checkbox", onChange: (e) => onChange && onChange(e.target.checked), checked: checked, disabled: disabled }), isRadio ? (jsx("div", { className: "left-1 w-3 h-3 rounded-full bg-primary-main hidden absolute peer-checked:block" })) : (jsx(SVG, { paths: CHECK_PATHS, className: "hidden absolute left-1 ml-px peer-checked:block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" })), text ? jsx("span", { className: "font-sans ml-3 text-l-light", children: text }) : null] }) }));
     });
 
+    const STEP_DAYS = 1;
+    function renderDaysInput(title, params, callback) {
+        const { minDays, maxDays, daysValue } = params;
+        const daysText = (days) => {
+            const text = Number(days) % 10 === 1 ? 'дня' : 'дней';
+            return `${days} ${text}`;
+        };
+        return (jsx(InputRange, { className: "mt-7", title: title, items: [`От ${daysText(minDays)}`, `До ${daysText(maxDays)}`], min: minDays, max: maxDays, step: STEP_DAYS, value: clamp(daysValue, minDays, maxDays), onChange: callback }));
+    }
+
     const RadioButtonGroup = JSX(({ items, checkedItem, onChange: onChangeCheckedItem }) => (jsx("div", { className: "flex flex-col gap-3", children: items?.map(({ id, text }) => (jsx(Checkbox, { isRadio: true, text: text, checked: checkedItem === id, onChange: () => onChangeCheckedItem && onChangeCheckedItem(id) }, String(id)))) })));
 
+    const EVERY_MONTH = 'everyMonth';
+    const AT_END_TERM = 'atEndTerm';
+    const depositTypeItems = [
+        {
+            id: EVERY_MONTH,
+            text: 'Ежемесячно',
+        },
+        {
+            id: AT_END_TERM,
+            text: 'В конце срока',
+        },
+    ];
+    function renderInterestPayment(isMonthlyInterestPayment, callback, title) {
+        return (jsxs("div", { children: [title ? (jsx(Text, { color: "text-secondary-text", font: "font-light", children: title })) : null, jsx("div", { className: "mt-3", children: jsx(RadioButtonGroup, { items: depositTypeItems, checkedItem: isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM, onChange: (text) => callback && callback(text === EVERY_MONTH) }) })] }));
+    }
+
+    const UnknownRate = JSX(({ title = 'Ставка' }) => (jsxs("div", { children: [jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: title }), jsx("div", { className: "mt-1 pt-1 pl-5 pb-1.5", children: jsx(ImgInner, { image: { icon: 'PercentIcon' }, width: "90", height: "85", asSVG: true }) }), jsx("div", { className: "w-[250px] mt-3.5", children: jsxs(Paragraph, { size: "text-xl-light", color: "text-primary-text", children: ["\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u043D\u0430\u044F \u0441\u0442\u0430\u0432\u043A\u0430 \u0434\u043B\u044F \u0441\u0440\u043E\u043A\u0430 ", jsx("strong", { children: "1-30 \u0434\u043D\u0435\u0439" }), " \u0443\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u043F\u0440\u0438 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0438 \u0432 \u0411\u0430\u043D\u043A"] }) })] })));
+
+    const useBusinessDepositCalculatorParams = (userInputParams, sourceBookDir) => {
+        const { daysValue, moneyValue, isPartialWithdrawal, isReplenished, isSmallBusiness, isMonthlyInterestPayment, } = userInputParams;
+        const data = useCalculatorParams(sourceBookDir || BUSINESS_DEPOSIT_CALC_DEFAULT_DIR);
+        const isOperatingDeposit = isReplenished || isPartialWithdrawal;
+        const isDisabledOperatingDeposit = daysValue < BUSINESS_OPERATING_MIN_DAYS || daysValue > BUSINESS_OPERATING_MAX_DAYS;
+        if (daysValue <= BUSINESS_RATE_MIN_DAYS) {
+            return {
+                ...DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS,
+                ...userInputParams,
+                isDisabledOperatingDeposit,
+                rate: 0,
+            };
+        }
+        const businessDepositCalculatorSourceBookParams = data?.rows?.find((_) => {
+            return (isMonthlyInterestPayment === _.isMonthlyInterestPayment &&
+                isSmallBusiness === _.isSmallBusiness &&
+                (isOperatingDeposit
+                    ? _.isReplenished && _.isPartialWithdrawal
+                    : !_.isReplenished && !_.isPartialWithdrawal));
+        }) || DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS;
+        const { rate } = businessDepositCalculatorSourceBookParams;
+        const income = getDepositIncome$1(rate, userInputParams);
+        const finalSum = moneyValue + income;
+        return {
+            ...businessDepositCalculatorSourceBookParams,
+            ...userInputParams,
+            isDisabledOperatingDeposit,
+            income,
+            finalSum,
+        };
+    };
+    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 BusinessDepositCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote, bottomFootnote, isShowDepositeName }) => {
+        const [moneyValue, setMoneyValue] = useState(BUSINESS_DEFAULT_SUM);
+        const handleMoneyValue = useCallback((_) => setMoneyValue(_), []);
+        const [daysValue, setDaysValue] = useState(BUSINESS_DEFAULT_DAYS);
+        const handleDaysValue = useCallback((_) => setDaysValue(_), []);
+        const [isReplenished, toggleIsReplenished] = useState(false);
+        const handleIsReplenished = useCallback((_) => toggleIsReplenished(_), []);
+        const [isPartialWithdrawal, toggleIsPartialWithdrawal] = useState(false);
+        const handleIsPartialWithdrawal = useCallback((_) => toggleIsPartialWithdrawal(_), []);
+        const [isSmallBusiness, toggleIsSmallBusiness] = useState(false);
+        const handleIsSmallBusiness = useCallback((_) => toggleIsSmallBusiness(_), []);
+        const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
+        const handleIsMonthlyInterestPayment = useCallback((_) => toggleIsMonthlyInterestPayment(_), []);
+        const userInputParams = {
+            moneyValue,
+            daysValue,
+            isReplenished,
+            isPartialWithdrawal,
+            isSmallBusiness,
+            isMonthlyInterestPayment,
+        };
+        const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
+        const { income, finalSum, rate, depositeName } = calculatorParams;
+        return (jsxs("section", { className: className, children: [jsxs("div", { className: "flex justify-between", children: [jsxs("div", { className: "w-[486px]", children: [renderWantedSumInput('Сумма вклада, ₽', calculatorParams, handleMoneyValue), renderDaysInput('Срок вклада, дни', calculatorParams, handleDaysValue), jsxs("div", { className: "mt-7 flex justify-between", children: [renderBusinessDepositParamsForm({
+                                            ...calculatorParams,
+                                            handleIsReplenished,
+                                            handleIsPartialWithdrawal,
+                                            handleIsSmallBusiness,
+                                        }), renderInterestPayment(isMonthlyInterestPayment, handleIsMonthlyInterestPayment, 'Выплата процентов')] })] }), rate ? (jsx(Rate, { rate: rate, depositeName: depositeName, isShowDepositeName: isShowDepositeName, rateBlockClassName: "tracking-[-25px]", unit: "%" })) : (jsx(UnknownRate, {})), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" }), jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), jsx("div", { className: "mt-7", children: renderFootnote(footnote) })] })] }), jsx("div", { className: "mt-5", children: renderFootnote(bottomFootnote) })] }));
+    });
+    const renderBusinessDepositParamsForm = ({ isDisabledOperatingDeposit, isReplenished, isPartialWithdrawal, isSmallBusiness, handleIsReplenished, handleIsPartialWithdrawal, handleIsSmallBusiness, }) => (jsxs("div", { children: [jsx(Checkbox, { text: "\u041F\u043E\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u0435", disabled: isDisabledOperatingDeposit, checked: isReplenished, onChange: handleIsReplenished }), jsx(Checkbox, { className: "mt-3", disabled: isDisabledOperatingDeposit, text: "\u0427\u0430\u0441\u0442\u0438\u0447\u043D\u043E\u0435 \u0441\u043D\u044F\u0442\u0438\u0435", checked: isPartialWithdrawal, onChange: handleIsPartialWithdrawal }), jsx(Checkbox, { className: "mt-3", text: "\u042F\u0432\u043B\u044F\u044E\u0441\u044C \u043C\u0430\u043B\u044B\u043C \u043F\u0440\u0435\u0434\u043F\u0440\u0438\u044F\u0442\u0438\u0435\u043C", checked: isSmallBusiness, onChange: handleIsSmallBusiness })] }));
+
     const STEP_MONTHS = 1;
     function renderMonthsInput(title, params, callback) {
         const { minMonths, maxMonths, monthsValue } = params;
@@ -1178,13 +1301,13 @@
             monthsValue,
         };
         const calculatorParams = useCreditCalculatorParams(userInputParams, sourceBookDir);
-        return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма кредита, ₽', { ...calculatorParams, step: 500 }, handleMoneyValue), renderMonthsInput('Срок кредита, месяцев', calculatorParams, handleMonthsValue), jsxs("div", { className: "mt-7", children: [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", checked: isSalaryClient, onChange: toggleIsSalaryClient }), jsx(Checkbox, { className: "mt-3", text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", checked: isStateEmployee, onChange: toggleIsStateEmployee }), jsx(Checkbox, { className: "mt-3", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", checked: isInsurance, onChange: toggleIsInsurance })] })] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.finalRate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: isAnnuity ? 'Ежемесячный платеж' : 'Платёж в первый месяц', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), jsx(RadioButtonGroup, { items: paymentTypeItems, checkedItem: isAnnuity ? ANNUITY : DIFFERENTIAL, onChange: (text) => toggleIsAnnuity(text === ANNUITY) }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
+        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма кредита, ₽', { ...calculatorParams, step: 500 }, handleMoneyValue), renderMonthsInput('Срок кредита, месяцев', calculatorParams, handleMonthsValue), jsxs("div", { className: "mt-7", children: [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", checked: isSalaryClient, onChange: toggleIsSalaryClient }), jsx(Checkbox, { className: "mt-3", text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", checked: isStateEmployee, onChange: toggleIsStateEmployee }), jsx(Checkbox, { className: "mt-3", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", checked: isInsurance, onChange: toggleIsInsurance })] })] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.finalRate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: isAnnuity ? 'Ежемесячный платеж' : 'Платёж в первый месяц', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), jsx(RadioButtonGroup, { items: paymentTypeItems, checkedItem: isAnnuity ? ANNUITY : DIFFERENTIAL, onChange: (text) => toggleIsAnnuity(text === ANNUITY) }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
     });
 
     const useDepositCalculatorParams = (userInputParams, sourceBookDir) => {
         const { isMonthlyInterestPayment, moneyValue } = userInputParams;
         const data = useCalculatorParams(sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR);
-        const depositCalculatorSourceBookParams = data?.rows.find((_) => isMonthlyInterestPayment === _.isMonthlyInterestPayment) ||
+        const depositCalculatorSourceBookParams = data?.rows?.find((_) => isMonthlyInterestPayment === _.isMonthlyInterestPayment) ||
             DEFAULT_DEPOSIT_CALCULATOR_PARAMS;
         const { rate } = depositCalculatorSourceBookParams;
         const income = getDepositIncome(rate, userInputParams);
@@ -1204,23 +1327,12 @@
         }
     };
 
-    const EVERY_MONTH = 'everyMonth';
-    const AT_END_TERM = 'atEndTerm';
-    const depositTypeItems = [
-        {
-            id: EVERY_MONTH,
-            text: 'Ежемесячно',
-        },
-        {
-            id: AT_END_TERM,
-            text: 'В конце срока',
-        },
-    ];
     const DepositCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote }) => {
         const [moneyValue, setMoneyValue] = useState(DEFAULT_SUM);
         const handleMoneyValue = useCallback((_) => setMoneyValue(_), []);
         const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
         const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
+        const handleIsMonthlyInterestPayment = useCallback((_) => toggleIsMonthlyInterestPayment(_), []);
         const userInputParams = {
             moneyValue,
             monthsValue,
@@ -1229,16 +1341,17 @@
         const handleMonthsValue = useCallback((_) => setMonthsValue(_), []);
         const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir);
         const { income, finalSum, rate } = calculatorParams;
-        return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма вклада, ₽', {
+        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма вклада, ₽', {
                             ...calculatorParams,
                         }, handleMoneyValue), renderMonthsInput('Срок вклада, месяцев', {
                             ...calculatorParams,
-                        }, handleMonthsValue)] }), jsx(Rate, { rate: rate || 1, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [income ? (jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" })) : null, finalSum ? (jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" })) : null, jsx(RadioButtonGroup, { items: depositTypeItems, checkedItem: isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM, onChange: (text) => toggleIsMonthlyInterestPayment(text === EVERY_MONTH) }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
+                        }, handleMonthsValue)] }), jsx(Rate, { rate: rate || 1, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [income ? (jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" })) : null, finalSum ? (jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" })) : null, renderInterestPayment(isMonthlyInterestPayment, handleIsMonthlyInterestPayment), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
     });
 
     const EmbeddableCalcBlocks = {
         CreditCalculatorForm,
         DepositCalculatorForm,
+        BusinessDepositCalculatorForm,
         BonusCalculatorForm,
     };
 
@@ -1248,7 +1361,7 @@
             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-9 w-full", children: [block?.title ? jsx(Heading, { className: "text-center mb-6", title: block.title }) : null, jsx(EmbeddedBlock, { ...block, className: "flex justify-between" })] }) }, String(i)));
+        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-9 w-full", children: [block?.title ? jsx(Heading, { className: "text-center mb-6", title: block.title }) : null, jsx(EmbeddedBlock, { ...block })] }) }, String(i)));
     };
 
     const Calculator = JSX(({ className = '', calculatorTabs = [], ...rest }) => {
@@ -1493,7 +1606,7 @@
 
     const ITEMS_GAP = 4;
     const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px] pointer-events-none';
-    const scrollButtonStyle = 'absolute top-[calc(50%-12px)] z-50';
+    const scrollButtonStyle$1 = 'absolute top-[calc(50%-12px)] z-50';
     const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, isPadding = true, ...rest }) => {
         const { blocks: childBlocks } = rest.block || {};
         const count = itemCount || childBlocks?.length || 0;
@@ -1513,7 +1626,7 @@
         'CarouselTariffsCard',
         'CarouselInvestmentCard',
     ];
-    const renderScrollButtons = ({ scrollLeft, scrollRight, canScrollLeft, canScrollRight, }) => (jsxs("div", { children: [canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-8`, onClick: scrollLeft })) : null, canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle} right-8`, onClick: scrollRight })) : null] }));
+    const renderScrollButtons = ({ scrollLeft, scrollRight, canScrollLeft, canScrollRight, }) => (jsxs("div", { children: [canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle$1} left-8`, onClick: scrollLeft })) : null, canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle$1} right-8`, onClick: scrollRight })) : null] }));
     const getPaddingStyle = (isPadding) => (isPadding ? 'p-12' : '');
 
     const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full';
@@ -3486,7 +3599,7 @@
         'horizontal-list': 'w-6',
         'vertical-list': 'h-6',
     };
-    const dotStyle = 'cursor-pointer bg-primary-main rounded-full transition-width duration-300';
+    const dotStyle = 'cursor-pointer bg-primary-main rounded-full transition-width duration-300 group-data-secondary:bg-white';
     const inactiveDotStyle = 'w-2 h-2 opacity-30';
     const SwipeListControlDots = JSX(({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list' }) => {
         const handleClick = (idx) => {
@@ -3517,68 +3630,147 @@
         return (jsxs("div", { className: style(className, listType === 'vertical-list' ? 'relative h-full' : ''), children: [jsx(SwipeListContainer, { containerRef: containerRef, activeIndex: activeIndex, visibleItemCount: 1, gap: gap, padding: padding, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, listType: listType, children: children }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: activeIndex, dotCount: itemCount, listType: listType })) : null] }));
     });
 
-    const SwipeListControlBlock = JSX(({ gap, listType, padding, showDots, options, ...rest }) => {
-        return (jsx(BlockWrapper, { ...rest, children: jsx(SwipeListControl, { gap: gap, listType: listType, padding: padding, showDots: showDots, children: renderChildren({ ...rest, options }) }) }));
+    const SwipeListControlBlock = JSX(({ listType, showDots, options, ...rest }) => {
+        return (jsx(BlockWrapper, { ...rest, children: jsx(SwipeListControl, { listType: listType, showDots: showDots, children: renderChildren({ ...rest, options }) }) }));
     });
     SwipeListControlBlock.childrenTypes = {
         exclude: ['SwipeListControlBlock'],
     };
 
     const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
-    const ACTIVE_LINK_CLASSES = 'bg-primary-main';
     const INACTIVE_LINK_CLASSES = 'group/btn bg-white';
-    const TEXT_CLASSES = 'font-sans text-m';
+    const SCROLLABLE_ACTIVE_LINK_CLASSES = 'bg-white text-primary-main';
+    const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
+    const TEXT_CLASSES = 'font-sans text-m text-center';
     const ACTIVE_TEXT_CLASSES = 'text-white';
     const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
+    const WHITE_ACTIVE_TEXT_CLASSES = 'text-primary-main';
+    const GROUP_TAB_CLASSES = {
+        div: {
+            scrollable: {
+                active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
+                default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+            },
+            default: {
+                active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+                default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES} whitespace-nowrap`,
+            },
+        },
+        text: {
+            scrollable: {
+                active: `h-full border-0 border-b-2`,
+                default: ``,
+            },
+            default: {
+                active: '',
+                default: '',
+            },
+        },
+    };
+    const LINK_TAB_CLASSES = {
+        link: {
+            scrollable: {
+                active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
+                default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+            },
+            default: {
+                active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
+                default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+            },
+        },
+        text: {
+            scrollable: {
+                active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
+                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+            },
+            default: {
+                active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
+                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+            },
+        },
+    };
+    const getGroupTabClassName = (type, active, isScrollable) => {
+        const styleType = isScrollable ? 'scrollable' : 'default';
+        const styleActive = active ? 'active' : 'default';
+        return GROUP_TAB_CLASSES[type][styleType][styleActive];
+    };
+    const getLinkTabClassName = (type, active, isScrollable) => {
+        const styleType = isScrollable ? 'scrollable' : 'default';
+        const styleActive = active ? 'active' : 'default';
+        return LINK_TAB_CLASSES[type][styleType][styleActive];
+    };
 
     const LinkTab = JSX((props) => {
-        const { tab, currentTab } = props;
+        const { tab, currentTab, isScrollable = false } = props;
         const active = currentTab?.type === 'link' && currentTab.href === tab.href;
         const link = useLink();
         const adjustedProps = link(tab);
-        return (jsx("a", { role: "tab", className: `${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`, target: tab.target, href: adjustedProps.href, onClick: adjustedProps.onClick, children: jsx("span", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: tab.text }) }));
+        return (jsx("a", { role: "tab", className: getLinkTabClassName('link', active, isScrollable), target: tab.target, href: adjustedProps.href, onClick: adjustedProps.onClick, children: jsx("span", { className: getLinkTabClassName('text', active, isScrollable), children: tab.text }) }));
     });
 
     const BADGE_CLASSES = 'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
     const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
     const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
-    const renderGroupTab = ({ page, currentTab, showCounter, onClick }) => (tab, i) => {
+    const renderGroupTab = ({ page, currentTab, showCounter, onClick, isScrollable = false }) => (tab, i) => {
         const active = currentTab === tab;
         const count = tab.ref && page?.blocks
             ? page.blocks.filter((block) => block?.labels?.includes(tab.ref)).length
             : 0;
-        return (jsx("div", { className: `${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`, role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? renderTitle$2(tab.title, active) : null, showCounter && count ? renderCount(count, active) : null] }) }, String(i)));
+        return (jsx("div", { className: getGroupTabClassName('div', active, isScrollable), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: `flex flex-1 items-center justify-center ${getGroupTabClassName('text', active, isScrollable)}`, children: [renderTitle$2(tab.title, active, isScrollable), renderCount(showCounter, count, active)] }) }, `group-${String(i)}`));
+    };
+    const renderTitle$2 = (title, active, isScrollable) => {
+        const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
+        const titleClassName = isScrollable
+            ? `${TEXT_CLASSES} ${activeClassName}`
+            : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
+        return title ? jsx("h3", { className: titleClassName, children: title }) : null;
+    };
+    const renderCount = (showCounter, count, active) => {
+        return showCounter && count ? (jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count })) : null;
     };
-    const renderTitle$2 = (title, active) => (jsx("h3", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: title }));
-    const renderCount = (count, active) => (jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count }));
 
-    const renderTab = ({ page, currentTab, showCounter, onClick }) => 
-    // Linter doesn't understand that switch processes all cases
-    // eslint-disable-next-line consistent-return
-    (tab, i) => {
+    const renderTab = ({ page, currentTab, showCounter, onClick, isScrollable = false }) => (tab, i) => {
         const type = tab.type;
         if (!(type === 'group' || type === 'link')) {
             return null;
         }
         switch (type) {
             case 'group':
-                return renderGroupTab({ page, currentTab, showCounter, onClick })(tab, i);
+                return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
             case 'link': {
-                return jsx(LinkTab, { tab: tab, currentTab: currentTab }, String(i));
+                return (jsx(LinkTab, { tab: tab, currentTab: currentTab, isScrollable: isScrollable }, String(i)));
             }
             default:
                 assertUnreachable(type);
         }
+        return null;
     };
 
+    const scrollButtonStyle = 'absolute z-50 top-0';
+    const ScrollableTabs = JSX((props) => {
+        const { tabs, onClick, currentTab, page, showCounter } = props;
+        const [containerRef, scroll] = useSwipeListScroll({
+            itemCount: tabs?.length || 0,
+            isCyclic: false,
+        });
+        return (jsxs("div", { className: "relative max-w-full m-auto", children: [jsx("div", { className: `font-sans max-w-full w-full overflow-hidden relative bg-white`, children: jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: tabs?.map(renderTab({
+                            onClick,
+                            currentTab,
+                            showCounter,
+                            page,
+                            isScrollable: true,
+                        })) }) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-6`, onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle} rotate-180 right-6`, onClick: scroll.scrollRight })) : null] }));
+    });
+
     const Tabs = JSX((props) => {
-        const { className = '', tabs, showCounter, isSticky, ...rest } = props;
+        const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
         const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
         useEffect(() => EventBus.inst.subscribe('tab', (event) => {
             const tab = tabs?.find(checkTab(event));
             if (event.type === 'link' && tab) {
                 setCurrentTab(tab);
             }
+            return [];
         }), [tabs]);
         useEffect(() => currentTab?.type === 'group'
             ? EventBus.inst.subject('tab', { label: currentTab.ref })
@@ -3589,7 +3781,12 @@
             }
             setCurrentTab(selectedTab);
         }, []);
-        return (jsx(BlockWrapper, { className: `${isSticky ? 'sticky top-1 z-20 ' : ''}box-border flex gap-x-1 ${className}`, role: "tablist", ...rest, children: tabs?.map(renderTab({ onClick: handleClick, currentTab, showCounter, ...rest })) }));
+        return (jsx(BlockWrapper, { className: `relative box-border flex gap-x-1 w-full ${isSticky ? 'sticky top-1 z-20 ' : ''} ${className}`, role: "tablist", ...rest, children: tabsMode === 'scrollable' ? (jsx(ScrollableTabs, { tabs: tabs, onClick: handleClick, currentTab: currentTab, showCounter: showCounter, ...rest })) : (tabs?.map(renderTab({
+                onClick: handleClick,
+                currentTab,
+                showCounter,
+                ...rest,
+            }))) }));
     });
     const checkTab = (event) => (_) => _.type === 'link' && _.href === `#${event.label}`;
 
@@ -4001,7 +4198,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.7.4";
+    const packageVersion = "0.7.6";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;