@redneckz/wildless-cms-uni-blocks 0.14.293 → 0.14.295

package/bundle/bundle.umd.js

@@ -2490,6 +2490,25 @@
                         .filter(Boolean)
                         .join(' ') }) })) : (jsx("div", { children: jsx(Text, { size: "text-h3", children: "-" }) }))] })));
 
+    const renderFootnote = (text) => text ? (jsx(Paragraph, { size: "text-s", font: "font-light", color: "text-secondary-text", children: text })) : 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 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 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 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 DEFAULT_MIN_SUM$1 = 10000;
     const DEFAULT_MAX_SUM$1 = 5000000;
     const CREDIT_DEFAULT_SUM = 200000;
@@ -2513,8 +2532,8 @@
     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 MONTHS_IN_YEAR$1 = 12;
+    const MONTHLY_INTEREST_RATE = MONTHS_IN_YEAR$1 * 100;
     const DEFAULT_CREDIT_CALCULATOR_PARAMS = {
         minSum: DEFAULT_MIN_SUM$1,
         maxSum: DEFAULT_MAX_SUM$1,
@@ -2540,20 +2559,6 @@
         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,
@@ -2575,76 +2580,6 @@
         depositeName: "Депозит 'Стабильный'",
     };
 
-    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 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 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 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 &&
@@ -2842,7 +2777,7 @@
             }
         }
         else {
-            return Math.round(moneyValue / monthsValue) + moneyValue * (rate / (MONTHS_IN_YEAR * 100)); // Используется значение ставки (rate) в процентах, делённое на сто.
+            return Math.round(moneyValue / monthsValue) + moneyValue * (rate / (MONTHS_IN_YEAR$1 * 100)); // Используется значение ставки (rate) в процентах, делённое на сто.
         }
     };
 
@@ -3194,7 +3129,6 @@
         CreditCalculatorForm,
         DepositCalculatorForm,
         BusinessDepositCalculatorForm,
-        BonusCalculatorForm,
         RefinancingCalculatorForm,
     };
 
@@ -3258,6 +3192,86 @@
                         })) }) }), jsx("div", { className: "w-full h-2 bg-primary-main" })] }));
     }
 
+    const CalculatorLayout = JSX(({ className, title, children, ...rest }) => (jsxs(BlockWrapper, { className: style('space-y-xl', className), defaultPadding: "p-4xl", ...rest, children: [title ? jsx(Heading, { className: "text-center", title: title }) : null, children] })));
+
+    const DEFAULT_BONUS_CALCULATOR_PARAMS$1 = {
+        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 MONTHS_IN_YEAR = 12;
+    const getBonus = (params, bonusTravelValue, bonusOtherValue) => {
+        const { maxBonus = 5000, prefMonthsNum = DEFAULT_BONUS_CALCULATOR_PARAMS$1.prefMonthsNum, prefTravelBonusRate = DEFAULT_BONUS_CALCULATOR_PARAMS$1.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 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 getBonusCalculatorParams = (userInputParams, calcSource) => {
+        const { travelExpenseValue, restExpenseValue } = userInputParams;
+        const [monthBonus, yearBonus] = getBonus(calcSource || DEFAULT_BONUS_CALCULATOR_PARAMS, travelExpenseValue, restExpenseValue);
+        return {
+            ...calcSource,
+            ...userInputParams,
+            monthBonus,
+            yearBonus,
+        };
+    };
+
+    const DEFAULT_TRAVEL_MIN_SUM = 6000;
+    const DEFAULT_REST_MIN_SUM = 6000;
+    const CalculatorBonus = UniBlock(({ className = '', title, calcSource, buttons, footnote, ...rest }) => {
+        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 (jsx(CalculatorLayout, { className: className, title: title, ...rest, children: jsxs("section", { className: style('flex flex-col justify-between @4xl: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 NumberInput = JSX((props) => {
         const { onChange, min, max, defaultValue = '0', fractionDigits = 0, ...inputProps } = props;
         const normalizedProps = useNormalizedInput(props, {
@@ -4735,31 +4749,54 @@
         };
     };
 
+    const getButtonClassNames = (isActive) => ({
+        btn: `w-96 ${isActive ? 'p-m border-none bg-primary-main text-white' : 'p-s ease-in duration-300 bg-white'}`,
+        text: isActive ? 'mb-xs text-xl' : 'mb-2xs text-l text-primary-text',
+        desc: `font-light ${isActive ? 'text-l text-white' : 'text-m text-secondary-text'}`,
+        icon: isActive ? '' : 'text-primary-main',
+        iconVersion: (isActive ? 'white' : 'normal'),
+        oldText: 'text-m text-center',
+        oldDesc: 'text-m-light',
+    });
+    const renderTabItemInner = ({ text, description, icon, isActive, type, }) => {
+        const buttonClassNames = getButtonClassNames(isActive);
+        return (jsxs("div", { className: style('cursor-pointer text-left border-b-0 flex gap-2xs'), "aria-label": text, role: "tab", children: [icon ? (jsx(Img, { className: style('h-6 w-6 min-w-6 min-h-6', buttonClassNames.icon), image: {
+                        ...icon,
+                        iconVersion: icon?.iconVersion ?? buttonClassNames.iconVersion,
+                    }, width: "24", height: "24", alt: text })) : null, jsxs("div", { className: "border-0", children: [jsx("div", { className: type === 'animated' ? buttonClassNames.text : buttonClassNames.oldText, children: text }), jsx("div", { className: type === 'animated' ? buttonClassNames.desc : buttonClassNames.oldDesc, children: description })] })] }));
+    };
+
     const tabPaddingStyleMap = {
         default: 'px-xs',
         underlined: 'px-m',
-        rounded: 'px-lg rounded-md',
+        animated: 'px-m border border-gray cursor-pointer text-left border-b-0 mt-auto flex gap-2xs',
     };
     const tabTextStyle = 'text-secondary-text hover:text-primary-main';
     const activeTabTextStyleMap = {
         default: 'text-black sm:text-white',
         underlined: 'text-primary-main border-b-2',
-        rounded: 'text-white',
+        animated: 'text-white sm:text-white',
     };
     const tabBgStyleMap = {
         default: 'bg-white',
         underlined: 'bg-white',
-        rounded: 'bg-transparent',
+        animated: 'p-1 ease-in duration-300 bg-white text-primary-text h-[70px] w-96',
     };
     const activeTabBgStyleMap = {
         default: 'sm:bg-primary-main',
         underlined: 'bg-white',
-        rounded: 'bg-primary-main',
+        animated: 'p-2 border-none bg-primary-main text-white h-20 w-96',
     };
-    const TabItemInner = JSX(({ tag = 'div', item = {}, isActive, type = 'default', onClick }) => {
+    const TabItemInner = JSX(({ tag = 'div', item = {}, isActive = false, type = 'default', onClick }) => {
         const Tag = tag;
-        const { text, appendRight, ...link } = item;
-        return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), role: "tab", "aria-selected": isActive, onClick: onClick, ...link, children: jsxs("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), children: [jsx(Text, { size: "text-m", children: text }), appendRight ? jsx("div", { className: "ml-xs", children: appendRight }) : null] }) }));
+        const { text, description, icon, appendRight, ...link } = item;
+        return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), role: "tablist", onClick: onClick, ...link, children: jsxs("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), children: [renderTabItemInner({
+                        text,
+                        description,
+                        icon,
+                        isActive,
+                        type,
+                    }), appendRight ? jsx("div", { className: "ml-xs", children: appendRight }) : null] }) }));
     });
 
     const TabItem = JSX((props) => props?.item?.href ? jsx(LinkTabItem, { ...props }) : jsx(ButtonTabItem, { ...props }));
@@ -4781,7 +4818,7 @@
 
     const renderTab = (activeTab, onClick, type) => (tab, i) => (jsx(TabItem, { isActive: tab === activeTab, onClick: onClick, type: type, item: tab }, String(i)));
 
-    const TabsControl = JSX(({ className, tabsType = 'default', items = [], value, onChange }) => (jsx("div", { className: style('flex gap-x-2xs overflow-x-auto no-scrollbar', className), role: "tablist", children: items.map(renderTab(value, onChange, tabsType)) })));
+    const TabsControl = JSX(({ className, tabsType = 'default', items = [], value, onChange }) => (jsx("div", { className: style('flex gap-x-2xs overflow-x-auto no-scrollbar', className), role: "tabpanel", children: items.map(renderTab(value, onChange, tabsType)) })));
 
     const initialFiltrationState = {
         categories: [],
@@ -5580,20 +5617,30 @@
 
     const SwipeListControlBlock = UniBlock(({ listType, showDots, options, version, ...rest }) => (jsx(BlockWrapper, { version: version, defaultPadding: "p-0", ...rest, children: jsx(SwipeListControl, { listType: listType, showDots: showDots, version: version, children: renderChildren({ ...rest, options }) }) })), { childrenTypes: { exclude: ['SwipeListControlBlock'] } });
 
-    const scrollButtonStyle = 'hidden sm:flex absolute z-40 top-0';
-    const ScrollableTabsControl = JSX(({ className, items = [], value, onChange, tabsType }) => {
+    const scrollButtonStyle = 'hidden sm:flex absolute z-40';
+    const scrollStyleType = {
+        animated: {
+            itemClassName: 'flex',
+            gap: 8,
+            buttonTop: 'top-5',
+        },
+        underlined: {
+            itemClassName: '',
+            gap: 0,
+            buttonTop: 'top-0',
+        },
+    };
+    const ScrollableTabsControl = JSX(({ className, items = [], value, onChange, tabsType = 'default' }) => {
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount: items?.length || 0,
         });
-        return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), role: "tablist", children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: items.map(renderTab(value, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: style('left-6', scrollButtonStyle), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: style('right-6', scrollButtonStyle), onClick: scroll.scrollRight })) : null] }));
+        return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, itemClassName: scrollStyleType[tabsType].itemClassName, gap: scrollStyleType[tabsType].gap, children: items.map(renderTab(value, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: style('left-6', scrollButtonStyle, scrollStyleType[tabsType].buttonTop), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: style('right-6', scrollButtonStyle, scrollStyleType[tabsType].buttonTop), onClick: scroll.scrollRight })) : null] }));
     });
 
     const renderTabs = ({ tabsMode, ...props }) => {
         switch (tabsMode) {
             case 'wideScreen':
                 return jsx(TabsControl, { ...props });
-            case 'centered':
-                return (jsx("div", { className: "flex", children: jsx(TabsControl, { className: "m-auto p-xs rounded-md bg-main-gray", tabsType: "rounded", ...props }) }));
             case 'scrollable':
                 return (jsx("div", { className: "flex", children: jsx(ScrollableTabsControl, { className: "m-auto", tabsType: "underlined", ...props }) }));
             default:
@@ -5601,7 +5648,7 @@
         }
     };
 
-    const TAB_QUERY_PARAM_KEY = 'tab';
+    const TAB_QUERY_PARAM_KEY$1 = 'tab';
     const Tabs = JSX(({ className = '', isSticky, tabs = [], tabsMode, ...rest }) => {
         const router = useRouter();
         const { isReady } = router;
@@ -5611,8 +5658,8 @@
             if (!tabs || !tabs[0]) {
                 return;
             }
-            const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY]
-                ? tabs.findIndex((_) => _.type === 'group' && _.ref === router.query[TAB_QUERY_PARAM_KEY]) || 0
+            const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY$1]
+                ? tabs.findIndex((_) => _.type === 'group' && _.ref === router.query[TAB_QUERY_PARAM_KEY$1]) || 0
                 : 0;
             const defaultTab = tabs[defaultTabIndex] || tabs[0];
             setActiveTabIndex(defaultTabIndex);
@@ -5631,10 +5678,10 @@
         const updateUrlSearchTabParam = (_) => {
             const searchParams = new URLSearchParams(router.query);
             if (_.name) {
-                searchParams.set(TAB_QUERY_PARAM_KEY, _.name);
+                searchParams.set(TAB_QUERY_PARAM_KEY$1, _.name);
             }
             else {
-                searchParams.delete(TAB_QUERY_PARAM_KEY);
+                searchParams.delete(TAB_QUERY_PARAM_KEY$1);
             }
             router.replace(`${router.pathname}?${searchParams}`, '', { scroll: false });
         };
@@ -5664,67 +5711,66 @@
     };
     const normalizeTab = (_) => _?.type === 'group' ? { text: _.title, name: _.ref } : _;
 
-    const alignTabStyle = {
-        start: 'text-start',
-        center: 'text-center',
-        end: 'text-end',
+    const renderTabsLayout = ({ tabsType = 'animated', ...props }) => {
+        switch (tabsType) {
+            case 'default':
+                return jsx(TabsControl, { ...props });
+            case 'underlined':
+                return (jsx("div", { className: "flex", children: jsx(TabsControl, { className: "m-auto", tabsType: "underlined", ...props }) }));
+            case 'animated':
+                return (jsx("div", { className: "border-b-8 border-primary-main", children: jsx(ScrollableTabsControl, { className: "m-auto", ...props, tabsType: "animated" }) }));
+            default:
+                return null;
+        }
     };
 
-    const getButtonClassNames = (isActive) => ({
-        btn: `w-96 ${isActive
-        ? 'p-m border-none bg-primary-main text-white'
-        : 'p-s ease-in duration-300 bg-white text-primary-text'}`,
-        title: isActive ? 'mb-xs text-xl' : 'mb-2xs text-l',
-        desc: `font-light ${isActive ? 'text-l text-white' : 'text-m text-secondary-text'}`,
-        icon: isActive ? '' : 'text-primary-main',
-        iconVersion: (isActive ? 'white' : 'normal'),
-    });
-    const TabsLayoutButton = JSX(({ tab, className, onClick, isActive }) => {
-        const buttonClassNames = getButtonClassNames(isActive);
-        return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: style('border border-gray cursor-pointer text-left border-b-0 mt-auto flex gap-2xs', buttonClassNames.btn, className), ...getAspectsAttributes(tab?.data), children: [tab?.icon ? (jsx(Img, { className: style('h-6 w-6 min-w-6 min-h-6', buttonClassNames.icon), image: {
-                        ...tab?.icon,
-                        iconVersion: tab?.icon?.iconVersion ?? buttonClassNames.iconVersion,
-                    }, width: "24", height: "24" })) : null, jsxs("div", { className: "border-0", children: [tab?.title ? jsx("div", { className: buttonClassNames.title, children: tab.title }) : null, tab?.description ? jsx("div", { className: buttonClassNames.desc, children: tab.description }) : null] })] }));
-    });
-
-    const REDIRECT_DELAY = 0.8 * 1000;
-    const TabsLayoutRedirectSection = JSX(({ tab }) => {
-        const link = useLink();
-        const { onClick } = link({
-            ...tab,
-            onClick: () => {
-                /**
-                 * In the current implementation of useLink, there is no follow-by-link method,
-                 * and default routing won't work if the link is external.
-                 */
-                if (tab.href && !isLocalURL(tab.href)) {
-                    globalThis.location.href = tab.href;
-                }
-            },
-        });
-        useDebouncedEffect(onClick, [], REDIRECT_DELAY);
-        return jsx(Shimmer, { className: "col-span-12 p-xl", size: 5 });
-    });
-
-    const TabsLayout = UniBlock(({ className = '', tabs = [], block, tabAlign, ...rest }) => {
+    const TAB_QUERY_PARAM_KEY = 'tab';
+    const TabsLayout = UniBlock(({ className = '', tabs = [], block, tabsType, ...rest }) => {
+        const router = useRouter();
+        const { isReady } = router;
         const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabs));
+        const defaultSelectedTab = tabs.findIndex((_) => Boolean(_.selected));
+        useEffect(() => {
+            const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY]
+                ? tabs.findIndex((_, index) => _.type === 'group' && String(index) === router.query[TAB_QUERY_PARAM_KEY])
+                : defaultSelectedTab;
+            setActiveTabIndex(defaultTabIndex === -1 ? 0 : defaultTabIndex);
+        }, [isReady, defaultSelectedTab]);
         const slotName = getSlotName(tabs[activeTabIndex], activeTabIndex);
-        const itemCount = tabs.length;
-        const [activeSlideIndex, { inc: incActiveSlideIndex, dec: decActiveSlideIndex }] = useCarouselControls({ itemCount }, activeTabIndex);
-        const [containerRef, scroll] = useSwipeListScroll({ itemCount });
-        return (jsxs(BlockWrapper, { className: style(className), defaultPadding: "p-0", ...rest, children: [jsxs("div", { className: "relative border-b-8 border-primary-main", children: [jsx(SwipeListContainer, { itemClassName: "flex", containerRef: containerRef, snapAlign: "snap-end", gap: 8, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: tabs.map(renderTabButton(activeTabIndex, setActiveTabIndex, tabAlign)) }), jsx(CarouselScrollButtons, { scroll: scroll, arrowsPadded: true, onScrollLeft: decActiveSlideIndex, onScrollRight: incActiveSlideIndex, activeIndex: activeSlideIndex, itemCount: itemCount })] }), jsx("div", { className: "space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs", children: tabs[activeTabIndex]?.href ? (jsx(TabsLayoutRedirectSection, { tab: tabs[activeTabIndex] })) : (renderBlocksList(block?.slots?.[slotName], {
+        const updateUrlSearchTabParam = (_, index) => {
+            const searchParams = new URLSearchParams(router.query);
+            if (_.text) {
+                searchParams.set(TAB_QUERY_PARAM_KEY, String(index));
+            }
+            else {
+                searchParams.delete(TAB_QUERY_PARAM_KEY);
+            }
+            router.replace(`${router.pathname}?${searchParams}`, '', { scroll: false });
+        };
+        const handleChange = useCallback((_) => {
+            const index = tabs.indexOf(_);
+            const tab = tabs[index];
+            setActiveTabIndex(index);
+            if (tab.type === 'group') {
+                updateUrlSearchTabParam(_, index);
+            }
+        }, [tabs]);
+        return (jsxs(BlockWrapper, { className: style(className), defaultPadding: "p-0", ...rest, children: [renderTabsLayout({
+                    items: tabs,
+                    value: tabs[activeTabIndex],
+                    tabsType,
+                    onChange: handleChange,
+                }), jsx("div", { className: "space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs", children: renderBlocksList(block?.slots?.[slotName], {
                         ...rest?.options,
-                        key: `${slotName}-${block?.type}`,
                         slotName,
                         parent: block,
-                    })) })] }));
+                    }) })] }));
     }, {
         slots: ({ tabs }) => tabs?.filter((_) => !_.href).map(getSlotName) || [],
         childrenTypes: { exclude: ['TabsLayout'] }, // TODO: fix this on wcms
     });
-    const getSlotName = (tab, index) => tab?.title || `Слот №${index}`;
+    const getSlotName = (tab, index) => tab?.text || `Слот №${index}`;
     const getInitSelectedIndex = (tabs) => tabs.reduce((selectedIndex, tab, i) => (tab.selected ? i : selectedIndex), 0);
-    const renderTabButton = (activeTabIndex, onClick, tabAlign = 'start') => (tab, i) => (jsx(TabsLayoutButton, { className: alignTabStyle[tabAlign], tab: tab, isActive: activeTabIndex === i, onClick: () => onClick(i) }, String(i)));
 
     const dividerStyle = '@4xl:border-main-divider @4xl:border-b';
     const firstCellStyle = 'w-80 flex-shrink-0';
@@ -5939,6 +5985,7 @@
         BonusBenefitsBlock,
         ButtonsBlock,
         Calculator,
+        CalculatorBonus,
         CardTransfer,
         Carousel,
         CarouselBankHistoryCard,
@@ -6155,7 +6202,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.292";
+    const packageVersion = "0.14.294";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;