@redneckz/wildless-cms-uni-blocks 0.10.6 → 0.10.8

package/bundle/bundle.umd.js

@@ -363,7 +363,7 @@
         const [isDirtyForm, setDirtyForm] = useState(false);
         const [dirtyFieldsMap, setDirtyFieldsMap] = useState({});
         const handlersMap = useRef({});
-        const field = (fieldName) => {
+        const field = useCallback((fieldName) => {
             if (!handlersMap.current) {
                 handlersMap.current = {};
             }
@@ -376,7 +376,7 @@
                 isDirty: isDirtyForm || dirtyFieldsMap[fieldName],
                 onChange: handlersMap.current[fieldName],
             };
-        };
+        }, [formState, isDirtyForm, dirtyFieldsMap]);
         const reset = useCallback(() => {
             setFormState(initialState);
             setDirtyForm(false);
@@ -556,7 +556,7 @@
         const { close } = useDialog();
         return (props) => ({
             ...props,
-            href: isRemote ? props.href : adjustHref(router)(props.href, basePath),
+            href: isRemote && !basePath ? props.href : adjustHref(router)(props.href, basePath),
             'aria-label': props.text,
             onClick: handlerDecorator(handleHref(props), props),
         });
@@ -904,26 +904,44 @@
 
     const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 
-    const getSanitizedValue = (_) => _.split(/\s+/).join('');
+    function parseDecimal(value) {
+        const rawValue = (value || '').replace(/\D/g, '');
+        const unsafeDecimal = parseInt(rawValue, 10);
+        return Number.isNaN(unsafeDecimal) ? 0 : unsafeDecimal;
+    }
 
-    const DISABLED_INPUT_CLASSES$1 = 'disabled:border-gray disabled:bg-main-divider';
-    const InputRange = JSX(({ className, title, items = [], min = 1, max = 100, step = 1, value = min, disabled = false, onChange, }) => {
-        const handleChange = (e) => {
-            if (!onChange) {
-                return;
-            }
-            onChange(clamp(Number(getSanitizedValue(e.target.value)), min, max));
-        };
+    function renderRangeWithTicks({ list = [], min, max, step, value = list[0] || min, disabled, onChange, }) {
+        const rangeValue = list.length ? list.indexOf(value) : value;
         const inputStyle = {
-            backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
+            backgroundSize: `${(((rangeValue - min) * 100) / (max - min)).toFixed(2)}% 100%`,
         };
-        return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? jsx("span", { className: "text-m-light text-primary-text", children: title }) : null, jsx("input", { className: `m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-gray rounded-md
-            outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-text ${DISABLED_INPUT_CLASSES$1}`, value: addSpacesBetweenNumbers(value), disabled: disabled, onChange: handleChange, onBlur: handleChange }), jsx("div", { className: "absolute inset-x-0 -bottom-1 px-4 leading-[18px]", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider", type: "range", min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, style: inputStyle }) })] }), renderRangeCaption$1(items)] }));
-    });
-    function renderRangeCaption$1(items) {
-        return (jsx("div", { className: "flex justify-between my-2", children: items.map((item, i) => (jsx("span", { className: "text-s-light text-secondary-text", children: item }, String(i)))) }));
+        return (jsxs("div", { children: [list.length ? (jsx("div", { className: "absolute w-full flex justify-between -bottom-[3px] px-4", children: list.map((_, i) => (jsx("div", { className: `w-2 h-2 rounded-full ${rangeValue <= i || disabled ? 'bg-gray' : 'bg-primary-main'}` }, String(i)))) })) : null, jsx("div", { className: "absolute inset-x-0 -bottom-1 px-4 leading-[18px]", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider relative z-10", style: inputStyle, type: "range", min: min, max: max, step: step, value: rangeValue, disabled: disabled, onInput: ((e) => {
+                            const rawValue = parseDecimal(e.target?.value);
+                            const newValue = list.length ? list[rawValue] : rawValue;
+                            onChange && onChange(newValue || 0);
+                        }) }) })] }));
     }
 
+    const DISABLED_INPUT_CLASSES = 'disabled:border-gray disabled:bg-main-divider';
+    const DEFAULT_MIN = 1;
+    const DEFAULT_MAX = 100;
+    const InputRange = JSX(({ className, title, items = [], list = [], min = list.length ? 0 : DEFAULT_MIN, max = list.length ? list.length - 1 : DEFAULT_MAX, step = 1, value = list[0] || min, disabled = false, onChange, }) => {
+        const [isFocused, setFocused] = useState(false);
+        const handleChange = useCallback((e) => {
+            onChange && onChange(parseDecimal(e.target?.value));
+        }, [onChange]);
+        const handleFocus = useCallback(() => {
+            setFocused(true);
+        }, []);
+        const handleBlur = useCallback(() => {
+            setFocused(false);
+            onChange && onChange(list.length ? closestValue(list)(value) : clamp(value || 0, min, max));
+        }, [onChange, value]);
+        return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-text", children: title })) : null, jsx("input", { className: style('m-0 mt-2 font-sans text-h3 w-full h-14', 'border border-solid border-gray rounded-md outline-none', 'p-0 pl-4 box-border', 'text-primary-text hover:border-primary-hover focus:border-primary-text', DISABLED_INPUT_CLASSES), value: isFocused ? value : addSpacesBetweenNumbers(value), disabled: disabled, onInput: handleChange, onFocus: handleFocus, onBlur: handleBlur }), renderRangeWithTicks({ list, min, max, step, disabled, value, onChange })] }), renderRangeCaption(items)] }));
+    });
+    const closestValue = (list) => (_) => list.reduce((prev, curr) => (Math.abs(curr - _) < Math.abs(prev - _) ? curr : prev));
+    const renderRangeCaption = (items) => (jsx("div", { className: "flex justify-between my-2", children: items.map((item, i) => (jsx(Text, { size: "text-s-light", color: "text-secondary-text", children: item }, String(i)))) }));
+
     const renderCreditParameters = (field) => (jsxs("div", { className: "flex justify-between gap-5 mb-7", children: [jsxs("div", { className: "w-1/2", children: [jsx("label", { children: jsx(Text, { size: "text-m-light", children: "\u0421\u0443\u043C\u043C\u0430 \u043A\u0440\u0435\u0434\u0438\u0442\u0430, \u20BD" }) }), jsx(InputRange, { items: ITEMS_CREDIT_AMOUNT, min: MIN_CREDIT_AMOUNT, max: MAX_CREDIT_AMOUNT, ...field('amount') })] }), jsxs("div", { className: "w-1/2", children: [jsx("label", { children: jsx(Text, { size: "text-m-light", children: "\u0421\u0440\u043E\u043A \u043A\u0440\u0435\u0434\u0438\u0442\u0430, \u043C\u0435\u0441\u044F\u0446\u0435\u0432" }) }), jsx(InputRange, { items: ITEMS_CREDIT_TERM, min: MIN_CREDIT_TERM, max: MAX_CREDIT_TERM, ...field('term') })] })] }));
 
     const renderRegionDepartment = ({ regions, branches, field }) => (jsxs("div", { className: "flex justify-between gap-5 mb-7", children: [jsx("div", { className: "w-1/2", children: jsx(SelectControl, { label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }) }), jsx("div", { className: "w-1/2", children: jsx(SelectControl, { label: "\u0410\u0434\u0440\u0435\u0441", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441", options: branches.map(({ branchCode = '', address = '' }) => ({
@@ -1043,9 +1061,12 @@
     ];
     const Checkbox = JSX(({ className, value, text, disabled, isRadio, onChange }) => {
         const handleChange = useCallback((e) => {
+            if (disabled) {
+                return;
+            }
             e.preventDefault();
             onChange && onChange(!value);
-        }, [onChange, value]);
+        }, [onChange, disabled, value]);
         const icon = isRadio ? (jsx("div", { className: "absolute left-1 w-3 h-3 rounded-full bg-primary-main" })) : (jsx(SVG, { paths: CHECK_PATHS, className: "absolute left-1 ml-px block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" }));
         return (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer group/box", onClick: handleChange, children: [jsx("div", { className: style('appearance-none w-5 h-5 border-solid cursor-pointer m-0', isRadio ? 'rounded-full border-2' : checkboxStyle(value), value ? 'border-primary-main' : 'border-gray', disabled ? 'bg-main-disabled' : 'group-hover/box:border-primary-hover'), role: "checkbox", "aria-checked": Boolean(value), "aria-disabled": Boolean(disabled) }), value ? icon : null, text ? jsx("span", { className: "font-sans ml-3 text-l-light", children: text }) : null] }) }));
     });
@@ -1114,7 +1135,7 @@
             setResponseType(status);
             return status;
         }, []);
-        return (jsx(BlockWrapper, { className: style('font-sans bg-white p-12 pb-9', className), ...rest, children: jsxs("div", { className: "container max-w-[978px]", children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }) : null, COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit }), responseType ? jsx(ResponseNotification, { responseType: responseType }) : null] }) }));
+        return (jsx(BlockWrapper, { className: style('font-sans bg-white p-default pb-9', className), ...rest, children: jsxs("div", { className: "container max-w-[978px]", children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }) : null, COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit }), responseType ? jsx(ResponseNotification, { responseType: responseType }) : null] }) }));
     });
 
     const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: `p-default flex flex-col items-center ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-8", children: benefitList.map(renderStep$1) })) : null] })));
@@ -1146,34 +1167,34 @@
 
     const headlineVersionStyles = {
         XXL: {
-            wrapper: 'gap-[18px]',
             title: { headingType: 'h0', as: 'h1' },
             descriptionSize: 'text-h5',
+            descriptionStyle: 'mt-5',
         },
         XL: {
-            wrapper: 'gap-4',
             title: { headingType: 'h1', as: 'h1' },
             descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-4',
         },
         L: {
-            wrapper: 'gap-4',
             title: { headingType: 'h2', as: 'h2' },
             descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-4',
         },
         M: {
-            wrapper: 'gap-3',
             title: { headingType: 'h3', as: 'h3' },
             descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-3',
         },
         S: {
-            wrapper: 'gap-2',
             title: { headingType: 'h4', as: 'h4' },
             descriptionSize: 'text-xl-light',
+            descriptionStyle: 'mt-2',
         },
         XS: {
-            wrapper: 'gap-2',
             title: { headingType: 'h5', as: 'h5' },
             descriptionSize: 'text-l-light',
+            descriptionStyle: 'mt-2',
         },
     };
     // TODO Move to Gallery and rename
@@ -1191,7 +1212,8 @@
     const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, isPadding = true, isTheme = false, version = '', ...rest }) => {
         const versionStyle = headlineVersionStyles[headlineVersion];
         const paddingStyle = isPadding ? 'p-default' : '';
-        return (jsxs(BlockWrapper, { className: style('flex flex-col', paddingStyle, versionStyle.wrapper, className), version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, align: align, children: description })) : null] }));
+        const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
+        return (jsxs(BlockWrapper, { className: style(paddingStyle, className), version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, align: align, ...descriptionStyle, children: description })) : null] }));
     });
 
     const Bonus = JSX((props) => {
@@ -1347,18 +1369,17 @@
     const DEPOSIT_CALC_DEFAULT_DIR = 'deposit-calculator-data';
     const BUSINESS_DEPOSIT_CALC_DEFAULT_DIR = 'business-calculator-data';
 
-    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.toFixed(2)).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 Rate = JSX(({ rate, title = 'Ставка', unit, depositeName, isShowDepositeName, rateBlockClassName, fractionDigits = 2, }) => (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 gradient-color-text", children: [jsx("span", { className: style('font-mohave text-title-huge pr-6 -mt-4', rateBlockClassName), children: String(rate.toFixed(fractionDigits)).replace('.', ',') }), unit ? jsx("span", { className: "text-7xl", children: unit }) : null] }), depositeName && isShowDepositeName ? (jsx("div", { className: "absolute bottom-7 w-full text-center whitespace-nowrap", children: depositeName })) : null] })] })));
 
     const renderFootnote = (text) => text ? (jsx(Paragraph, { size: "text-s-light", color: "text-secondary-text", children: text })) : null;
 
     const DEFAULT_MONEY_STEP = 1000;
-    function renderWantedSumInput(title, params, callback) {
-        const { moneyValue, minSum, maxSum, step = DEFAULT_MONEY_STEP, isShowItems = true } = params;
+    function renderWantedSumInput({ isShowItems = true, step = DEFAULT_MONEY_STEP, ...rest }) {
         const items = [
-            `От ${addSpacesBetweenNumbers(minSum)} ₽`,
-            `До ${addSpacesBetweenNumbers(maxSum)} ₽`,
+            `От ${addSpacesBetweenNumbers(rest.min || 0)} ₽`,
+            `До ${addSpacesBetweenNumbers(rest.max || 0)} ₽`,
         ];
-        return (jsx(InputRange, { title: title, items: isShowItems ? items : [], min: minSum, max: maxSum, step: step, value: clamp(moneyValue, minSum, maxSum), onChange: callback }));
+        return jsx(InputRange, { items: isShowItems ? items : [], step: step, ...rest });
     }
 
     const getBonus = (params, bonusTravelValue, bonusOtherValue) => {
@@ -1392,40 +1413,32 @@
     };
 
     const BonusCalculatorForm = JSX(({ className = '', sourceBookDir = '', buttons, footnote }) => {
-        const [travelExpenseValue, setTravelExpenseValue] = useState(DEFAULT_TRAVEL_MIN_SUM);
-        const handleTravelExpenseValue = useCallback((_) => setTravelExpenseValue(_), []);
-        const [restExpenseValue, setRestExpenseValue] = useState(DEFAULT_REST_MIN_SUM);
-        const handleRestExpenseValue = useCallback((_) => setRestExpenseValue(_), []);
-        const userInputParams = {
-            travelExpenseValue,
-            restExpenseValue,
-        };
+        const [userInputParams, { field }] = useForm({
+            travelExpenseValue: DEFAULT_TRAVEL_MIN_SUM,
+            restExpenseValue: DEFAULT_REST_MIN_SUM,
+        });
         const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } = useBonusCalculatorParams(userInputParams, sourceBookDir);
-        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма покупок в категории путешествия, ₽', {
-                            minSum: minSumTravel,
-                            maxSum: maxSumTravel,
-                            moneyValue: travelExpenseValue,
+        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput({
+                            title: 'Сумма покупок в категории путешествия, ₽',
+                            min: minSumTravel,
+                            max: maxSumTravel,
                             step: 500,
                             isShowItems: false,
-                        }, handleTravelExpenseValue), renderWantedSumInput('Сумма покупок в остальных категориях, ₽', {
+                            ...field('travelExpenseValue'),
+                        }), renderWantedSumInput({
+                            title: 'Сумма покупок в остальных категориях, ₽',
                             className: 'mt-7',
-                            minSum: minSumOther,
-                            maxSum: maxSumOther,
-                            moneyValue: restExpenseValue,
+                            min: minSumOther,
+                            max: maxSumOther,
                             step: 500,
                             isShowItems: false,
-                        }, handleRestExpenseValue)] }), jsx("div", { children: monthBonus >= 0 ? (jsx(Rate, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u043C\u0435\u0441\u044F\u0446", rate: monthBonus, rateBlockClassName: "tracking-[-14px]" })) : null }), jsxs("div", { className: "w-full max-w-[350px]", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
+                            ...field('restExpenseValue'),
+                        })] }), jsx("div", { children: monthBonus >= 0 ? (jsx(Rate, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u043C\u0435\u0441\u044F\u0446", rate: monthBonus, rateBlockClassName: "tracking-[-14px]", fractionDigits: 0 })) : null }), jsxs("div", { className: "w-full max-w-[350px]", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
     });
 
     const 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 renderDaysInput = (props) => (jsx(InputRange, { className: "mt-7", items: [`От ${daysText(props.min || 0)}`, `До ${daysText(props.max || 0)}`], step: STEP_DAYS, ...props }));
+    const daysText = (days) => `${days} ${Number(days) % 10 === 1 ? 'дня' : 'дней'}`;
 
     const orientationStyleMap = {
         horizontal: 'gap-10',
@@ -1433,21 +1446,15 @@
     };
     const RadioButtonGroup = JSX(({ items, checkedItem, onChange: onChangeCheckedItem, orientation = 'horizontal' }) => (jsx("div", { className: `flex ${orientationStyleMap[orientation]}`, children: items?.map(({ id, text }) => (jsx(Checkbox, { isRadio: true, text: text, value: checkedItem === id, onChange: () => onChangeCheckedItem && onChangeCheckedItem(id) }, String(id)))) })));
 
-    const EVERY_MONTH = 'everyMonth';
-    const AT_END_TERM = 'atEndTerm';
-    const depositTypeItems = [
-        {
-            id: EVERY_MONTH,
-            text: 'Ежемесячно',
-        },
-        {
-            id: AT_END_TERM,
-            text: 'В конце срока',
-        },
-    ];
-    function renderInterestPayment({ isMonthlyInterestPayment, callback, title, orientation = 'horizontal', }) {
-        return (jsxs("div", { children: [title ? (jsx("div", { className: "mb-3", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, jsx("div", { children: jsx(RadioButtonGroup, { orientation: orientation, items: depositTypeItems, checkedItem: isMonthlyInterestPayment ? EVERY_MONTH : AT_END_TERM, onChange: (text) => callback && callback(text === EVERY_MONTH) }) })] }));
-    }
+    const renderBinaryRadioButtonGroup = ({ items, title, orientation = 'horizontal', value, onChange, }) => (jsxs("div", { children: [title ? (jsx("div", { className: "mb-3", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, jsx(RadioButtonGroup, { orientation: orientation, items: items, checkedItem: items[value ? 0 : 1].id, onChange: (_) => onChange && onChange(_ === items[0].id) })] }));
+
+    const renderInterestPayment = (props) => renderBinaryRadioButtonGroup({
+        ...props,
+        items: [
+            { id: 'everyMonth', text: 'Ежемесячно' },
+            { id: 'atEndTerm', text: 'В конце срока' },
+        ],
+    });
 
     const 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(Icon, { name: "PercentIcon", width: "90", height: "85" }) }), 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"] }) })] })));
 
@@ -1537,101 +1544,47 @@
     };
 
     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 [userInputParams, { field }] = useForm({
+            moneyValue: BUSINESS_DEFAULT_SUM,
+            daysValue: BUSINESS_DEFAULT_DAYS,
+            isReplenished: false,
+            isPartialWithdrawal: false,
+            isSmallBusiness: false,
+            isMonthlyInterestPayment: false,
+        });
         const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
         const { income, finalSum, rate, depositeName, isShowUnknownRate } = 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,
-                                            callback: handleIsMonthlyInterestPayment,
+        return (jsxs("section", { className: className, children: [jsxs("div", { className: "flex justify-between", children: [jsxs("div", { className: "w-[486px]", 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: "mt-7 flex justify-between", children: [renderBusinessDepositParamsForm(calculatorParams, field), renderInterestPayment({
                                             title: 'Выплата процентов',
                                             orientation: 'vertical',
+                                            ...field('isMonthlyInterestPayment'),
                                         })] })] }), isShowUnknownRate ? (jsx(UnknownRate, {})) : (jsx(Rate, { rate: rate, depositeName: depositeName, isShowDepositeName: isShowDepositeName, rateBlockClassName: "tracking-[-25px]", unit: "%" })), jsxs("div", { className: "w-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, value: 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", value: 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", value: isSmallBusiness, onChange: handleIsSmallBusiness })] }));
-
-    const DISABLED_INPUT_CLASSES = 'disabled:border-gray disabled:bg-main-divider';
-    const InputListRange = JSX(({ className, title, items = [], list = [], value = list[0], disabled = false, onChange }) => {
-        const min = 0;
-        const max = list.length - 1;
-        const step = 1;
-        const handleTextChange = (e) => {
-            if (!onChange) {
-                return;
-            }
-            const newValue = parseInt(e.target.value);
-            const closetValue = list.reduce(function (prev, curr) {
-                return Math.abs(curr - newValue) < Math.abs(prev - newValue) ? curr : prev;
-            });
-            onChange(Number(getSanitizedValue(closetValue.toString())));
-        };
-        const handleRangeChange = (e) => {
-            if (!onChange) {
-                return;
-            }
-            const val = list.at(clamp(parseInt(e.target.value), min, max)) || 0;
-            onChange(Number(getSanitizedValue(val.toString())));
-        };
-        const valueIndex = list.findIndex((item) => item === value) || 0;
-        const inputStyle = {
-            backgroundSize: `${(((valueIndex - min) * 100) / (max - min)).toFixed(2)}% 100%`,
-        };
-        return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? jsx("span", { className: "text-m-light text-primary-text", children: title }) : null, jsx("input", { className: `m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-gray rounded-md
-            outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-text ${DISABLED_INPUT_CLASSES}`, value: addSpacesBetweenNumbers(value), disabled: disabled, onChange: handleTextChange, onBlur: handleTextChange }), list.length ? (jsx("div", { className: "absolute w-full flex justify-between -bottom-[3px] px-4", children: list.map(renderTick(valueIndex, disabled)) })) : null, jsx("div", { className: "absolute inset-x-0 -bottom-1 px-4 leading-[18px]", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider relative z-10", type: "range", min: min, max: max, step: step, value: valueIndex, disabled: disabled, onChange: handleRangeChange, style: inputStyle }) })] }), renderRangeCaption(items)] }));
-    });
-    const renderTick = (valueIndex, disabled) => (value, i) => (jsx("span", { className: `w-2 h-2 rounded-full ${valueIndex <= i || disabled ? 'bg-gray' : 'bg-primary-main'}` }, String(i)));
-    function renderRangeCaption(items) {
-        return (jsx("div", { className: "flex justify-between my-2", children: items.map((item, i) => (jsx("span", { className: "text-s-light text-secondary-text", children: item }, String(i)))) }));
-    }
+    const renderBusinessDepositParamsForm = (calculatorParams, field) => (jsxs("div", { children: [jsx(Checkbox, { text: "\u041F\u043E\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u0435", disabled: calculatorParams.isDisabledOperatingDeposit, ...field('isReplenished'), value: calculatorParams.isReplenished }), jsx(Checkbox, { className: "mt-3", disabled: calculatorParams.isDisabledOperatingDeposit, text: "\u0427\u0430\u0441\u0442\u0438\u0447\u043D\u043E\u0435 \u0441\u043D\u044F\u0442\u0438\u0435", ...field('isPartialWithdrawal'), value: calculatorParams.isPartialWithdrawal }), jsx(Checkbox, { className: "mt-3", text: "\u042F\u0432\u043B\u044F\u044E\u0441\u044C \u043C\u0430\u043B\u044B\u043C \u043F\u0440\u0435\u0434\u043F\u0440\u0438\u044F\u0442\u0438\u0435\u043C", ...field('isSmallBusiness'), value: calculatorParams.isSmallBusiness })] }));
 
     const STEP_MONTHS = 1;
-    function renderMonthsInput(title, params, callback) {
-        const { minMonths, maxMonths, monthsValue, availableMonths } = params;
-        const monthText = (month) => {
-            const text = Number(month) % 10 === 1 ? 'месяца' : 'месяцев';
-            return `${month} ${text}`;
-        };
-        return availableMonths?.length ? (jsx(InputListRange, { className: "mt-7", title: title, items: [`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`], list: availableMonths, value: clamp(monthsValue, minMonths, maxMonths), onChange: callback })) : (jsx(InputRange, { className: "mt-7", title: title, items: [`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`], min: minMonths, max: maxMonths, step: STEP_MONTHS, value: clamp(monthsValue, minMonths, maxMonths), onChange: callback }));
-    }
+    const renderMonthsInput = ({ min = 0, max = 0, availableMonths, ...rest }) => (jsx(InputRange, { className: "mt-7", items: [`От ${monthText(min)}`, `До ${monthText(max)}`], step: STEP_MONTHS, ...(availableMonths?.length ? { list: availableMonths } : { min, max }), ...rest }));
+    const monthText = (month) => `${month} ${Number(month) % 10 === 1 ? 'месяца' : 'месяцев'}`;
 
-    const ANNUITY = 'annuity';
-    const DIFFERENTIAL = 'differential';
-    const paymentTypeItems = [
-        {
-            id: ANNUITY,
-            text: 'Аннуитетный',
-        },
-        {
-            id: DIFFERENTIAL,
-            text: 'Дифференцированный',
-        },
-    ];
-    function renderPaymentType({ isAnnuity, callback, title, orientation = 'horizontal', }) {
-        return (jsxs("div", { children: [title ? (jsx("div", { className: "mb-3", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, jsx(RadioButtonGroup, { orientation: orientation, items: paymentTypeItems, checkedItem: isAnnuity ? ANNUITY : DIFFERENTIAL, onChange: (text) => callback && callback(text === ANNUITY) })] }));
-    }
+    const renderPaymentType = (props) => renderBinaryRadioButtonGroup({
+        ...props,
+        items: [
+            { id: 'annuity', text: 'Аннуитетный' },
+            { id: 'differential', text: 'Дифференцированный' },
+        ],
+    });
 
     /**
      * Формулы расчёта аннуитетных и дифференцированных платежей:
@@ -1702,72 +1655,48 @@
         return isExclude || userInputParams[fieldKey] === row[fieldKey];
     };
 
-    const CreditCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote, paramsViewSettings }) => {
-        const [isAnnuity, toggleIsAnnuity] = useState(false);
-        const [isSalaryClient, toggleIsSalaryClient] = useState(false);
-        const handleIsSalaryClient = useCallback((_) => toggleIsSalaryClient(_), []);
-        const [isStateEmployee, toggleIsStateEmployee] = useState(false);
-        const handleIsStateEmployee = useCallback((_) => toggleIsStateEmployee(_), []);
-        const [isPensionClient, toggleIsPensionClient] = useState(false);
-        const handleIsPensionClient = useCallback((_) => toggleIsPensionClient(_), []);
-        const [isInsurance, toggleIsInsurance] = useState(true);
-        const handleIsInsurance = useCallback((_) => toggleIsInsurance(_), []);
-        const [moneyValue, setMoneyValue] = useState(CREDIT_DEFAULT_SUM);
-        const handleMoneyValue = useCallback((_) => setMoneyValue(_), []);
-        const [monthsValue, setMonthsValue] = useState(DEFAULT_MONTHS);
-        const handleMonthsValue = useCallback((_) => setMonthsValue(_), []);
-        const userInputParams = {
-            isAnnuity,
-            isInsurance,
-            isSalaryClient,
-            isPensionClient,
-            isStateEmployee,
-            moneyValue,
-            monthsValue,
-        };
+    const CreditCalculatorForm = JSX(({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
+        const [userInputParams, { field }] = useForm({
+            isAnnuity: false,
+            isInsurance: true,
+            isSalaryClient: false,
+            isPensionClient: false,
+            isStateEmployee: false,
+            moneyValue: CREDIT_DEFAULT_SUM,
+            monthsValue: DEFAULT_MONTHS,
+        });
         const calculatorParams = useCreditCalculatorParams(userInputParams, sourceBookDir, paramsViewSettings);
-        useEffect(() => {
-            setMoneyValue(clamp(moneyValue, calculatorParams.minSum, calculatorParams.maxSum));
-            setMonthsValue(clamp(monthsValue, calculatorParams.minMonths, calculatorParams.maxMonths));
-        }, [calculatorParams]);
-        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма кредита, ₽', { ...calculatorParams, step: 500 }, handleMoneyValue), renderMonthsInput('Срок кредита, месяцев', calculatorParams, handleMonthsValue), jsx("div", { className: "mt-7", children: renderCreditParamsForm({
-                                ...calculatorParams,
-                                ...paramsViewSettings,
-                                handleIsSalaryClient,
-                                handleIsStateEmployee,
-                                handleIsPensionClient,
-                                handleIsInsurance,
-                            }) })] }), renderRate(calculatorParams.rate), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: 'Ежемесячный платеж', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), renderPaymentType({
-                            isAnnuity,
-                            orientation: 'vertical',
-                            callback: toggleIsAnnuity,
-                        }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
-    });
-    const renderRate = (rate) => (jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }));
-    const renderCreditParamsForm = ({ isSalaryClient, isStateEmployee, isPensionClient, isInsurance, isShowSalaryClient, isShowStateEmployee, isShowPensionClient, isShowInsurance, handleIsSalaryClient, handleIsStateEmployee, handleIsPensionClient, handleIsInsurance, }) => (jsxs("div", { children: [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", value: isSalaryClient, onChange: handleIsSalaryClient })) : null, isShowStateEmployee ? (jsx(Checkbox, { className: "mt-3", text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", value: isStateEmployee, onChange: handleIsStateEmployee })) : null, isShowPensionClient ? (jsx(Checkbox, { className: "mt-3", text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u043F\u0435\u043D\u0441\u0438\u044E \u043D\u0430 \u043A\u0430\u0440\u0442\u0443 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0430", value: isPensionClient, onChange: handleIsPensionClient })) : null, isShowInsurance ? (jsx(Checkbox, { className: "mt-3", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", value: isInsurance, onChange: handleIsInsurance })) : null] }));
-
-    const REMOTE_REGISTRATION = 'remote';
-    const OFFICE_REGISTRATION = 'office';
-    const registrationTypeItems = [
-        {
-            id: OFFICE_REGISTRATION,
-            text: 'Офис Банка',
-        },
-        {
-            id: REMOTE_REGISTRATION,
-            text: 'Дистанционно',
-        },
-    ];
-    function renderRegistrationType({ isRemoteRegistration, callback, title, orientation = 'horizontal', }) {
-        return (jsxs("div", { children: [title ? (jsx("div", { className: "mb-3", children: jsx(Text, { color: "text-secondary-text", font: "font-light", children: title }) })) : null, jsx("div", { children: jsx(RadioButtonGroup, { orientation: orientation, items: registrationTypeItems, checkedItem: isRemoteRegistration ? REMOTE_REGISTRATION : OFFICE_REGISTRATION, onChange: (text) => callback && callback(text === REMOTE_REGISTRATION) }) })] }));
-    }
+        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", 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,
+                        }), jsx("div", { className: "mt-7", children: renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field) })] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: 'Ежемесячный платеж', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
+    });
+    const renderCreditParamsForm = (params, field) => (jsxs("div", { children: [params.isShowSalaryClient ? (jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", ...field('isSalaryClient'), value: params.isSalaryClient })) : null, params.isShowStateEmployee ? (jsx(Checkbox, { className: "mt-3", text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...field('isStateEmployee'), value: params.isStateEmployee })) : null, params.isShowPensionClient ? (jsx(Checkbox, { className: "mt-3", text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u043F\u0435\u043D\u0441\u0438\u044E \u043D\u0430 \u043A\u0430\u0440\u0442\u0443 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0430", ...field('isPensionClient'), value: params.isPensionClient })) : null, params.isShowInsurance ? (jsx(Checkbox, { className: "mt-3", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", ...field('isInsurance'), value: params.isInsurance })) : null] }));
+
+    const renderRegistrationType = (props) => renderBinaryRadioButtonGroup({
+        ...props,
+        items: [
+            { id: 'remote', text: 'Дистанционно' },
+            { id: 'office', text: 'Офис Банка' },
+        ],
+    });
 
     const arrayByRange = (start, stop, step = 1) => Array.from({ length: Math.abs(stop - start) / step + 1 }, (value, index) => stop >= start ? start + index * step : start - index * step);
 
     const useDepositCalculatorParams = (userInputParams, sourceBookDir, paramsViewSettings) => {
         const { moneyValue, monthsValue } = userInputParams;
         const data = useCalculatorParams(sourceBookDir || DEPOSIT_CALC_DEFAULT_DIR);
-        const defaultMonth = data?.rateRows[0]
+        const defaultMonth = data?.rateRows?.[0]
             ? getMiddleMonth(data.rateRows[0].minMonths, data.rateRows[0].maxMonths)
             : 1;
         const isExcludeMonthlyInterestPayment = !paramsViewSettings?.isShowMonthlyInterestPayment;
@@ -1816,48 +1745,45 @@
     const checkRowByParam = ({ row, userInputParams, paramKey, isExclude }) => isExclude || userInputParams[paramKey] === row[paramKey];
     const getMiddleMonth = (minMonths, maxMonths) => minMonths + Math.round((maxMonths - minMonths) / 2);
 
-    const DepositCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote, paramsViewSettings }) => {
-        const [moneyValue, setMoneyValue] = useState(DEPOSIT_DEFAULT_SUM);
-        const handleMoneyValue = useCallback((_) => setMoneyValue(_), []);
-        const [monthsValue, setMonthsValue] = useState(0);
-        const [isMonthlyInterestPayment, toggleIsMonthlyInterestPayment] = useState(false);
-        const handleIsMonthlyInterestPayment = useCallback((_) => toggleIsMonthlyInterestPayment(_), []);
-        const [isRemoteRegistration, toggleIsRemoteRegistration] = useState(false);
-        const handleIsRemoteRegistration = useCallback((_) => toggleIsRemoteRegistration(_), []);
-        const userInputParams = {
-            moneyValue,
-            monthsValue,
-            isMonthlyInterestPayment,
-            isRemoteRegistration,
-        };
-        const handleMonthsValue = useCallback((_) => setMonthsValue(_), []);
+    const DepositCalculatorForm = JSX(({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
+        const [userInputParams, { field }] = useForm({
+            moneyValue: DEPOSIT_DEFAULT_SUM,
+            monthsValue: 0,
+            isMonthlyInterestPayment: false,
+            isRemoteRegistration: false,
+        });
         const calculatorParams = useDepositCalculatorParams(userInputParams, sourceBookDir, paramsViewSettings);
         const { defaultMonth, income, finalSum, rate } = calculatorParams;
+        const { onChange: setMonthsValue } = field('monthsValue');
         useEffect(() => {
-            setMonthsValue(defaultMonth);
+            setMonthsValue && setMonthsValue(defaultMonth);
         }, [defaultMonth]);
-        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма вклада, ₽', {
-                            ...calculatorParams,
-                        }, handleMoneyValue), renderMonthsInput('Срок вклада, месяцев', {
-                            ...calculatorParams,
-                        }, handleMonthsValue), jsx("div", { className: "mt-7", children: renderDepositParamsForm({
-                                ...calculatorParams,
-                                ...paramsViewSettings,
-                                handleIsMonthlyInterestPayment,
-                                handleIsRemoteRegistration,
-                            }) })] }), jsx(Rate, { rate: rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), 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 }), renderFootnote(footnote)] })] }));
-    });
-    const renderDepositParamsForm = ({ isMonthlyInterestPayment, isRemoteRegistration, isShowMonthlyInterestPayment, isShowRemoteRegistration, handleIsMonthlyInterestPayment, handleIsRemoteRegistration, }) => (jsxs("div", { className: "flex flex-col gap-y-7", children: [isShowMonthlyInterestPayment
+        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput({
+                            title: 'Сумма вклада, ₽',
+                            min: calculatorParams.minSum,
+                            max: calculatorParams.maxSum,
+                            ...field('moneyValue'),
+                            value: calculatorParams.moneyValue,
+                        }), renderMonthsInput({
+                            title: 'Срок вклада, месяцев',
+                            min: calculatorParams.minMonths,
+                            max: calculatorParams.maxMonths,
+                            availableMonths: calculatorParams.availableMonths,
+                            ...field('monthsValue'),
+                            value: calculatorParams.monthsValue,
+                        }), jsx("div", { className: "mt-7", children: renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field) })] }), jsx(Rate, { rate: rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), 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 }), renderFootnote(footnote)] })] }));
+    });
+    const renderDepositParamsForm = (params, field) => (jsxs("div", { className: "flex flex-col gap-y-7", children: [params.isShowMonthlyInterestPayment
                 ? renderInterestPayment({
-                    isMonthlyInterestPayment,
-                    callback: handleIsMonthlyInterestPayment,
                     title: 'Выплата процентов',
+                    ...field('isMonthlyInterestPayment'),
+                    value: params.isMonthlyInterestPayment,
                 })
-                : null, isShowRemoteRegistration
+                : null, params.isShowRemoteRegistration
                 ? renderRegistrationType({
-                    isRemoteRegistration,
-                    callback: handleIsRemoteRegistration,
                     title: 'Оформление',
+                    ...field('isRemoteRegistration'),
+                    value: params.isRemoteRegistration,
                 })
                 : null] }));
 
@@ -1887,8 +1813,8 @@
             itemCount: calculatorTabs?.length,
             visibleItemCount: COLUMNS_FOR_SCROLL,
         });
-        return (jsxs(BlockWrapper, { className: `box-border overflow-hidden relative w-100 ${className}`, ...rest, children: [jsxs("div", { className: "bg-white", children: [tabsNav.length > 1
-                            ? renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })
+        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden relative w-100', className), ...rest, children: [jsxs("div", { className: "bg-white", children: [tabsNav.length > 1
+                            ? renderTabs$1({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })
                             : null, renderArrows({
                             ...controls,
                             btnClass: ['left-3', 'right-3'],
@@ -1906,13 +1832,12 @@
         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: `box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-[88px]
-      ${btnClassName}`, children: [jsx(ImgInner, { className: `h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`, image: {
+        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 hover:h-[88px]', btnClassName), children: [jsx(ImgInner, { className: `h-6 w-6 min-w-6 min-h-6 mr-4 ${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)));
+                    }, 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({ activeIndex, tabsNav, slideIndexShift, onClick }) {
+    function renderTabs$1({ activeIndex, tabsNav, slideIndexShift, onClick }) {
         const CARD_SHIFT = 388;
         return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }, className: "flex flex-col justify-end items-center h-[126px] pt-9 box-border duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap items-end gap-2", children: tabsNav.map((tab, i) => renderNavButton$3({
                             tab,
@@ -1922,6 +1847,8 @@
                         })) }) }), jsx("div", { className: "w-full h-2 bg-primary-main" })] }));
     }
 
+    const getSanitizedValue = (_) => _.replace(/\s/g, '');
+
     const adjustValue = (val) => onlyOneDot(setZeroStart(replaceCommaToDot(getSanitizedValue(val))));
     const localNumberFormat = (val) => new Intl.NumberFormat('ru-RU', {
         minimumFractionDigits: 0,
@@ -2189,6 +2116,7 @@
     const renderBlur = (isBlur, scroll) => isBlur ? (jsxs("div", { children: [scroll.canScrollLeft ? (jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white') })) : null, scroll.canScrollRight ? (jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white') })) : null] })) : null;
 
     const ITEMS_GAP = 4;
+
     const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, arrowsPadded = true, isPadding = true, showDots = false, isAlignCenter = false, ...rest }) => {
         const { blocks: childBlocks = [] } = rest.block || {};
         const count = itemCount || childBlocks?.length;
@@ -2201,7 +2129,7 @@
         });
         const [dotsActiveIndex] = scroll.visibleIndicesRange;
         const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
-        return (jsx(BlockWrapper, { className: style(getPaddingStyle(isPadding), 'group-data-secondary:bg-primary-main group-data-secondary:text-white', className), ...rest, children: jsxs("div", { className: style(getAlignStyle(isAlignCenter), 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
+        return (jsx(BlockWrapper, { className: style(getPaddingStyle$1(isPadding), 'group-data-secondary:bg-primary-main group-data-secondary:text-white', className), ...rest, children: jsxs("div", { className: style(getAlignStyle(isAlignCenter), 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
                             ...rest,
                             renderProps: isBankHistoryCarousel
                                 ? (block, options) => renderBlock$1(block, options, {
@@ -2209,7 +2137,7 @@
                                     activeIndex: activeIndex,
                                 })
                                 : renderBlock$1,
-                        }) }), jsx(CarouselScrollButtons, { scroll: scroll, isBlur: isBlur, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count }), showDots ? renderDots(containerRef, dotsActiveIndex, itemCount) : null] }) }));
+                        }) }), jsx(CarouselScrollButtons, { scroll: scroll, isBlur: isBlur, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count }), showDots ? renderDots(containerRef, dotsActiveIndex, count) : null] }) }));
     });
     Carousel.childrenTypes = [
         'CarouselCard',
@@ -2224,7 +2152,7 @@
         'CarouselInvestmentCard',
         'CarouselEventCard',
     ];
-    const getPaddingStyle = (isPadding) => (isPadding ? 'p-default' : '');
+    const getPaddingStyle$1 = (isPadding) => (isPadding ? 'p-default' : '');
     const getAlignStyle = (isAlignCenter) => isAlignCenter ? 'flex justify-center' : '';
     const renderDots = (containerRef, dotsActiveIndex, itemCount) => (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: dotsActiveIndex, dotCount: itemCount, listType: 'horizontal-list' }));
 
@@ -2423,6 +2351,7 @@
     const SocialMedia = JSX(({ className = '', media, children, buttonSize }) => (jsxs("div", { className: "font-sans", children: [jsx("div", { className: `flex gap-1 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { buttonSize: buttonSize, ..._ }, String(index)))) }), jsx(Text, { size: "text-s-light", color: "text-secondary-text", children: children })] })));
 
     const BORDER_STYLE = 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
+
     const CarouselRecommendationCard = JSX(({ className = '', description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', version = 'primary', ...rest }) => {
         return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-4", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), jsxs("div", { className: "w-1/2 h-full flex flex-col flex-1 justify-end", children: [items.length ? (jsx(List, { className: "flex flex-col gap-2", itemClassName: "text-l-light", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10", media: socialMedia }) : null] }), renderIconBlock$2(icon)] }) }));
     });
@@ -2457,20 +2386,24 @@
         return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} ${className}`, children: children }));
     });
 
+    const getPaddingStyle = (isHighlighting = false) => isHighlighting ? 'p-8 mt-8 pt-20' : 'p-8 mt-20';
+
+    const descriptionSize = 'text-h6';
+
+    const renderCardInfo = (cell, i) => {
+        const { title, description, buttons } = cell;
+        return (jsxs("div", { className: "py-5 border-b border-main-divider", children: [title ? (jsx("div", { className: "opacity-80", children: jsx(Text, { size: "text-m", color: "text-secondary-text", children: title }) })) : null, description ? (jsx("div", { className: "mt-1", children: jsx(Text, { size: descriptionSize, color: "text-primary-text", children: description }) })) : null, buttons?.length ? (jsx("div", { className: "text-primary-main", children: renderButtonsSection(buttons) })) : null] }, String(i)));
+    };
+
     const VISIBLE_CELLS_COUNT = 1;
-    const CarouselTariffsCard = JSX(({ className = '', title, icon, isHighlighting, button, cardCells = [], ...rest }) => {
+    const CarouselTariffsCard = JSX(({ className = '', title, icon, isHighlighting = false, button, cardCells = [], ...rest }) => {
         const cellsNode = cardCells.map(renderCardInfo);
         const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
         const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
-        return (jsxs(BlockWrapper, { className: style('relative border border-gray p-8 flex flex-col', getHitStyle(isHighlighting), className), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock$1(icon), title ? jsx(Heading, { className: "text-center pt-2", headingType: "h5", title: title }) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
+        return (jsxs(BlockWrapper, { className: style('relative border border-gray flex flex-col', getPaddingStyle(isHighlighting), className), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock$1(icon), title ? jsx(Heading, { className: "text-center pt-2", headingType: "h5", title: title }) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
     });
-    const renderIconBlock$1 = (icon) => (jsxs("div", { className: "w-[267px] min-w-[267px] self-center", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: icon }) : null] }));
-    const getHitStyle = (isHighlighting) => isHighlighting ? 'mt-8 pt-20' : 'mt-20 pt-8';
+    const renderIconBlock$1 = (icon) => (jsx("div", { className: "w-[267px] min-w-[267px] self-center", children: icon?.src || icon?.icon ? jsx(ImgInner, { image: icon }) : null }));
     const renderFoldButton$1 = ({ isUnfolded, onToggle }) => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center", onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16" })] }));
-    const renderCardInfo = (cell, i) => {
-        const { title, description, buttons } = cell;
-        return (jsxs("div", { className: "py-5 border-b border-main-divider", children: [title ? (jsx("div", { className: "text-secondary-text text-m-light opacity-80", children: cell.title })) : null, description ? (jsx("div", { className: "text-primary-text text-h6 mt-1", children: cell.description })) : null, buttons?.length ? (jsx("div", { className: "text-primary-main", children: renderButtonsSection(buttons) })) : null] }, String(i)));
-    };
     const renderHitIcon = () => (jsxs("div", { className: "absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "23", height: "22" }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: "\u0425\u0418\u0422" })] }));
 
     const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
@@ -4492,7 +4425,11 @@
                 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: {
+            centered: {
+                active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+                default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
+            },
+            wideScreen: {
                 active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
                 default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES} whitespace-nowrap`,
             },
@@ -4502,7 +4439,11 @@
                 active: `h-full border-0 border-b-2`,
                 default: ``,
             },
-            default: {
+            centered: {
+                active: '',
+                default: '',
+            },
+            wideScreen: {
                 active: '',
                 default: '',
             },
@@ -4514,7 +4455,11 @@
                 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: {
+            centered: {
+                active: `px-4 rounded-md ${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+                default: `px-4 rounded-md ${LINK_CLASSES} group/btn bg-transparent whitespace-nowrap`,
+            },
+            wideScreen: {
                 active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
                 default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
             },
@@ -4524,25 +4469,29 @@
                 active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
                 default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
             },
-            default: {
+            centered: {
+                active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
+                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+            },
+            wideScreen: {
                 active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
                 default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
             },
         },
     };
-    const getGroupTabClassName = (type, active, isScrollable) => {
-        const styleType = isScrollable ? 'scrollable' : 'default';
+    const getGroupTabClassName = (type, active, tabsMode) => {
         const styleActive = active ? 'active' : 'default';
-        return GROUP_TAB_CLASSES[type][styleType][styleActive];
+        const mode = tabsMode || 'wideScreen';
+        return GROUP_TAB_CLASSES[type][mode][styleActive];
     };
-    const getLinkTabClassName = (type, active, isScrollable) => {
-        const styleType = isScrollable ? 'scrollable' : 'default';
+    const getLinkTabClassName = (type, active, tabsMode) => {
         const styleActive = active ? 'active' : 'default';
-        return LINK_TAB_CLASSES[type][styleType][styleActive];
+        const mode = tabsMode || 'wideScreen';
+        return LINK_TAB_CLASSES[type][mode][styleActive];
     };
 
     const LinkTab = JSX((props) => {
-        const { tab, currentTab, onClick, isScrollable = false } = props;
+        const { tab, currentTab, onClick, tabsMode } = props;
         const active = currentTab?.type === 'link' && currentTab.href === tab.href;
         const link = useLink();
         const adjustedProps = link(tab);
@@ -4550,22 +4499,22 @@
             adjustedProps.onClick(ev);
             onClick(tab);
         };
-        return (jsx("a", { role: "tab", className: getLinkTabClassName('link', active, isScrollable), target: tab.target, href: adjustedProps.href, onClick: handleClick, children: jsx("span", { className: getLinkTabClassName('text', active, isScrollable), children: tab.text }) }));
+        return (jsx("a", { role: "tab", className: getLinkTabClassName('link', active, tabsMode), target: tab.target, href: adjustedProps.href, onClick: handleClick, children: jsx("span", { className: getLinkTabClassName('text', active, tabsMode), 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, isScrollable = false }) => (tab, i) => {
+    const renderGroupTab = ({ page, currentTab, showCounter, onClick, tabsMode }) => (tab, i) => {
         const active = currentTab === tab;
         const count = tab.ref && page?.blocks
             ? page.blocks.filter((block) => block?.labels?.includes(tab.ref)).length
             : 0;
-        return (jsx("div", { className: 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$1(tab.title, active, isScrollable), renderCount(showCounter, count, active)] }) }, `group-${String(i)}`));
+        return (jsx("div", { className: getGroupTabClassName('div', active, tabsMode), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: `flex flex-1 items-center justify-center ${getGroupTabClassName('text', active, tabsMode)}`, children: [renderTitle$1(tab.title, active, tabsMode), renderCount(showCounter, count, active)] }) }, `group-${String(i)}`));
     };
-    const renderTitle$1 = (title, active, isScrollable) => {
+    const renderTitle$1 = (title, active, tabsMode) => {
         const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
-        const titleClassName = isScrollable
+        const titleClassName = tabsMode === 'scrollable'
             ? `${TEXT_CLASSES} ${activeClassName}`
             : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
         return title ? jsx("h3", { className: titleClassName, children: title }) : null;
@@ -4574,16 +4523,16 @@
         return showCounter && count ? (jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count })) : null;
     };
 
-    const renderTab = ({ page, currentTab, showCounter, onClick, isScrollable = false }) => (tab, i) => {
+    const renderTab = ({ page, showCounter, ...rest }) => (tab, i) => {
         const type = tab.type;
         if (!(type === 'group' || type === 'link')) {
             return null;
         }
         switch (type) {
             case 'group':
-                return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
+                return renderGroupTab({ page, showCounter, ...rest })(tab, i);
             case 'link': {
-                return (jsx(LinkTab, { tab: tab, currentTab: currentTab, isScrollable: isScrollable, onClick: onClick }, String(i)));
+                return jsx(LinkTab, { tab: tab, ...rest }, String(i));
             }
             default:
                 assertUnreachable(type);
@@ -4591,24 +4540,20 @@
         return null;
     };
 
+    const CenteredTabs = JSX(({ tabs, ...rest }) => (jsx("div", { className: "flex p-1 m-auto bg-main-gray rounded-md", children: tabs?.map(renderTab({ ...rest })) })));
+
     const scrollButtonStyle = 'absolute z-40 top-0';
     const ScrollableTabs = JSX((props) => {
-        const { tabs, onClick, currentTab, page, showCounter } = props;
+        const { tabs, ...rest } = 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] }));
+        return (jsxs("div", { className: "relative max-w-full m-auto", children: [jsx("div", { className: `font-sans max-w-full w-full overflow-hidden relative bg-white`, children: jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: tabs?.map(renderTab({ ...rest })) }) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-6`, onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle} rotate-180 right-6`, onClick: scroll.scrollRight })) : null] }));
     });
 
     const Tabs = JSX((props) => {
-        const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
+        const { className = '', tabs, isSticky, ...rest } = props;
         const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
         useEffect(() => {
             if (!tabs || !tabs[0]) {
@@ -4625,13 +4570,19 @@
             fireTabEvent(selectedTab);
             setCurrentTab(selectedTab);
         }, []);
-        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,
-            }))) }));
-    });
+        return (jsx(BlockWrapper, { className: `relative box-border flex gap-x-1 w-full ${isSticky ? 'sticky top-1 z-20' : ''} ${className}`, role: "tablist", ...rest, children: renderTabs({ tabs, onClick: handleClick, currentTab, ...rest }) }));
+    });
+    const renderTabs = ({ tabsMode, tabs, ...rest }) => {
+        switch (tabsMode) {
+            case 'wideScreen':
+                return tabs?.map(renderTab({ tabsMode, ...rest }));
+            case 'centered':
+                return jsx(CenteredTabs, { tabs: tabs, tabsMode: tabsMode, ...rest });
+            case 'scrollable':
+                return jsx(ScrollableTabs, { tabs: tabs, tabsMode: tabsMode, ...rest });
+        }
+        return null;
+    };
     const fireTabEvent = (tab) => {
         if (tab.type === 'group') {
             defaultEventBus.fire('tab', { type: tab.type, label: tab.ref });
@@ -5074,7 +5025,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.10.6";
+    const packageVersion = "0.10.8";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;