@redneckz/wildless-cms-uni-blocks 0.14.1073 → 0.14.1074

package/bundle/bundle.umd.js

@@ -823,11 +823,11 @@
             ? 'bg-secondary-light text-primary-main'
             : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black'), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null;
 
-    const RichText = JSX(({ __html = '', richVersion = '', itemSize = 'list-m', className, isDotted = true, children, }) => {
+    const RichText = JSX(({ __html = '', richVersion = '', itemSize = 'list-m', isDotted = true, children }) => {
         const dotStyle = isDotted ? '' : 'without-dots';
         return __html || children ? (
         /* Attribute [data-component] need for correct render in wcms editor. Do not remove. */
-        jsx("div", { "data-component": "rich-text-container", children: jsx("div", { className: style(richVersion, itemSize, 'md-container group-data-secondary:text-white group-data-gray:text-secondary-text', dotStyle, className), dangerouslySetInnerHTML: __html ? { __html } : undefined, children: children }) })) : null;
+        jsx("div", { "data-component": "rich-text-container", children: jsx("div", { className: style(richVersion, itemSize, 'md-container group-data-secondary:text-white group-data-gray:text-secondary-text', dotStyle), dangerouslySetInnerHTML: __html ? { __html } : undefined, children: children }) })) : null;
     });
 
     const renderBenefitDescription = (description, i) => description ? (jsx(Paragraph, { font: "font-light", size: "text-m", color: "text-secondary-text group-data-secondary:text-white", children: description }, `description-${i}`)) : null;
@@ -6966,7 +6966,7 @@
         'bg-white': 'text-primary-main',
         transparent: 'text-white',
     };
-    const renderImage$1 = (bgColor, image, size) => {
+    const renderImage = (bgColor, image, size) => {
         const img = image?.src
             ? image
             : {
@@ -6980,7 +6980,7 @@
         'bg-white': 'text-primary-text',
         transparent: 'text-white',
     };
-    const Logo = JSX(({ className, href = '/', logo, children, targetBlank, bgColor = 'bg-white', showTitle = true, data, size = ICON_SIZE, }) => (jsxs("a", { className: style('inline-flex items-center font-sans no-underline', className), href: logo?.href ?? href, target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title ?? 'Россельхозбанк', ...getAspectsAttributes(data), children: [renderImage$1(bgColor, logo?.image, size), showTitle
+    const Logo = JSX(({ className, href = '/', logo, children, targetBlank, bgColor = 'bg-white', showTitle = true, data, size = ICON_SIZE, }) => (jsxs("a", { className: style('inline-flex items-center font-sans no-underline', className), href: logo?.href ?? href, target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title ?? 'Россельхозбанк', ...getAspectsAttributes(data), children: [renderImage(bgColor, logo?.image, size), showTitle
                 ? children ?? (jsx("div", { className: "ml-s", children: jsx(Text, { font: "font-medium", color: TEXT_COLOR[bgColor], size: logoTitleSizeStyle, children: logo?.title ?? 'Россельхозбанк' }) }))
                 : null] })));
 
@@ -10260,30 +10260,27 @@
         return (jsxs(BlockWrapper, { className: style('flex flex-col', className), defaultPadding: "p-2xl", ...rest, children: [jsx(Img, { className: "self-center", image: icon }), title ? (jsx(Heading, { className: style('pt-xs', align), headingType: "h5", title: title })) : null, button?.text ? jsx(LinkButton, { className: "w-full mt-m mb-lg", ...button }) : null, hiddenCells.length ? (jsxs(Foldable, { children: [jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isVisible, children: hiddenCells })] }), cardCells.length >= visibleCellsCount ? (jsx(DefaultFoldButton, { className: "mt-m", label: isVisible ? 'Скрыть' : 'Подробнее о тарифе', isUnfolded: isVisible, embedded: true, data: data, onClick: handleFold })) : null] })) : (jsx("div", { children: visibleCells }))] }));
     });
 
+    const MAX_MONTH_CASHBACK = 5000;
+    const MAX_YEAR_CASHBACK = 60000;
     const ResultText = JSX(({ text, value }) => (jsxs("div", { className: "space-y-xs w-full", children: [jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: text }), jsx("div", { className: "w-full text-2xl bg-main-gray px-4 py-3 rounded-md", children: toLocalNumberFormat()(value) })] })));
-    const CashbackCalculatorResult = JSX(({ cashbacks, maxMonthCashback }) => {
-        const { month, year } = getResult(cashbacks, maxMonthCashback);
-        return (jsxs("div", { className: "w-full flex flex-col gap-lg", children: [jsx(Heading, { className: "text-left", headingType: "h5", as: "h2", title: "\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442 \u0440\u0430\u0441\u0447\u0435\u0442\u0430" }), jsxs("div", { className: "flex flex-col @xs:flex-row gap-lg", children: [jsx(ResultText, { text: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0432 \u043C\u0435\u0441\u044F\u0446", value: month }), jsx(ResultText, { text: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0432 \u0433\u043E\u0434", value: year })] })] }));
+    const CashbackCalculatorResult = JSX(({ cashbacks }) => {
+        const { mounth, year } = getResult(cashbacks);
+        return (jsxs("div", { className: "w-full flex flex-col gap-lg", children: [jsx(Heading, { className: "text-left", headingType: "h5", as: "h2", title: "\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442 \u0440\u0430\u0441\u0447\u0435\u0442\u0430" }), jsx(RichText, { __html: '\u041A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438 \u043F\u043E\u043A\u0443\u043F\u043E\u043A \u0434\u043B\u044F \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u0431\u0430\u043B\u043B\u043E\u0432 \u043F\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435.<br />\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u0435\u0435 \u043F\u043E \u0443\u0441\u043B\u043E\u0432\u0438\u044F\u043C \u0438 \u043D\u0430\u0447\u0438\u0441\u043B\u0435\u043D\u0438\u044F\u043C \u043C\u043E\u0436\u043D\u043E \u0443\u0437\u043D\u0430\u0442\u044C \u0432\u043E \u0432\u043A\u043B\u0430\u0434\u043A\u0435 <a href="#docs">\u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u044B</a>' }), jsxs("div", { className: "flex flex-col @xs:flex-row gap-lg", children: [jsx(ResultText, { text: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0432 \u043C\u0435\u0441\u044F\u0446", value: mounth }), jsx(ResultText, { text: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0432 \u0433\u043E\u0434", value: year })] })] }));
     });
-    const getResult = (cashbacks, maxMonthCashback) => {
+    const getResult = (cashbacks) => {
         return cashbacks.reduce((acc, val) => {
-            const mounthSum = (formatKey(val.percent.key) / 100) * val.sum;
+            const mounthSum = (Number(val.percent.key) / 100) * val.sum;
             return {
-                month: Math.min(acc.month + mounthSum, maxMonthCashback),
-                year: Math.min(acc.year + mounthSum * 12, maxMonthCashback * 12),
+                mounth: Math.min(acc.mounth + mounthSum, MAX_MONTH_CASHBACK),
+                year: Math.min(acc.year + mounthSum * 12, MAX_YEAR_CASHBACK),
             };
         }, {
-            month: 0,
+            mounth: 0,
             year: 0,
         });
     };
-    const formatKey = (key) => Number(key.replace('-main', ''));
 
-    const ALL_PERCENT_STANDARD_CATEGORIES = [
-        {
-            text: 'Категория 1% «На всё»',
-            key: '1-main',
-        },
+    const AllPercentCategories = [
         {
             text: 'Категория 1,5%',
             key: '1.5',
@@ -10305,11 +10302,7 @@
             key: '15',
         },
     ];
-    const ALL_PERCENT_PREMIUM_CATEGORIES = [
-        {
-            text: 'Категория 1,5% «На всё»',
-            key: '1.5-main',
-        },
+    const PercentCategoriesWithoutIncreased = [
         {
             text: 'Категория 1,5%',
             key: '1.5',
@@ -10318,128 +10311,58 @@
             text: 'Категория 3%',
             key: '3',
         },
-        {
-            text: 'Категория 5%',
-            key: '5',
-        },
-        {
-            text: 'Категория 10%',
-            key: '10',
-        },
-        {
-            text: 'Категория 15%',
-            key: '15',
-        },
-    ];
-    const MAIN_CASHBACK_KEY = {
-        standard: '1-main',
-        premium: '1.5-main',
-    };
-    const DEFAULT_STANDARD_CASHBACK = [
-        {
-            id: 0,
-            percent: {
-                text: 'Категория 1% «На всё»',
-                key: '1-main',
-            },
-            sum: 5000,
-        },
-    ];
-    const DEFAULT_PREMIUM_CASHBACK = [
-        {
-            id: 0,
-            percent: {
-                text: 'Категория 1,5% «На всё»',
-                key: '1.5-main',
-            },
-            sum: 5000,
-        },
     ];
-    // export const INCREASED_PERCENTS = ['5', '10', '15'];
-    const MAX_CATEGORIES = {
-        standard: 5,
-        premium: 7,
-    };
-    const INFO_BLOCK_HTML = `<p>Полученные баллы можно конвертировать в рубли и компенсировать покупки у партнеров.</p>`;
-    const MAX_MONTH_CASHBACK = {
-        standard: 5000,
-        premium: 15000,
-    };
-
-    const getPercentCategories = (isMainCashbackAdded, calculatorType) => {
-        const allPercentCategories = calculatorType === 'premium' ? ALL_PERCENT_PREMIUM_CATEGORIES : ALL_PERCENT_STANDARD_CATEGORIES;
-        let updatedCategories = allPercentCategories;
-        if (!isMainCashbackAdded) {
-            return allPercentCategories;
-        }
-        if (isMainCashbackAdded) {
-            updatedCategories = updatedCategories.filter((_) => _.key !== MAIN_CASHBACK_KEY[calculatorType]);
-        }
-        return updatedCategories;
-    };
-
-    const defaultDeleteImage = {
-        src: 'IconDelete.svg',
-        format: 'webp',
-        alt: 'Иконка кнопки удаления блока кэшбека',
-    };
-    const CashbackCategory = JSX(({ categories, cashback, maxInputRange, deleteImage = defaultDeleteImage, isMainCashbackAdded = false, calculatorType = 'standard', onDelete, onChange, isShowDisclaimer = false, onChangeCategory = noop, }) => {
+    const CashbackCategory = JSX(({ categories, cashback, showIncreasedPercents, maxInputRange, deleteImage, onDelete, onChange, }) => {
         const [currentCategory, setCurrentCategory] = useState(getRandomElement(categories));
-        const isMainCashback = cashback.percent.key === MAIN_CASHBACK_KEY[calculatorType];
-        const onChangePercent = createChangeHandler(cashback, 'percent', onChange);
-        const onChangeSum = createChangeHandler(cashback, 'sum', onChange);
-        const onChangeCashbackCategory = (value) => {
-            setCurrentCategory(value);
-            onChangeCategory((prev) => updateSelectedCategories(prev, cashback, value));
+        const isMainCashback = cashback.id === 0;
+        const onChangePercent = (value) => {
+            onChange({
+                ...cashback,
+                percent: value,
+            });
+        };
+        const onChangeSum = (value) => {
+            onChange({
+                ...cashback,
+                sum: value,
+            });
         };
-        return (jsxs("div", { className: "w-full space-y-m", children: [jsxs("div", { className: "space-y-xs", children: [jsx(Paragraph, { size: "text-m", color: "text-primary-text", font: "font-light", children: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044E" }), isShowDisclaimer ? (jsx(Text, { size: "text-s", color: "text-primary-text", font: "font-light", className: "italic", children: "\u041A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438 \u043F\u043E\u043A\u0443\u043F\u043E\u043A \u0434\u043B\u044F \u0440\u0430\u0441\u0447\u0451\u0442\u0430 \u0431\u0430\u043B\u043B\u043E\u0432 \u043F\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435" })) : null, jsxs("div", { className: "flex gap-m", children: [jsx(Select, { className: "w-full", isManualInput: isMainCashback, placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044E", options: getPercentCategories(isMainCashbackAdded, calculatorType), value: cashback.percent, onChange: onChangePercent }), jsx(Button, { version: "secondary", onClick: () => onDelete(cashback.id), shape: "round", className: "px-4 rounded-md", children: jsx(Img, { image: deleteImage }) })] })] }), categories?.length && !isMainCashback ? (jsx(Select, { label: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044E \u043F\u043E\u043A\u0443\u043F\u043E\u043A", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044E \u043F\u043E\u043A\u0443\u043F\u043E\u043A", options: categories, value: currentCategory, onChange: onChangeCashbackCategory })) : null, jsx(InputRange, { step: 500, title: "\u0421\u0443\u043C\u043C\u0430 \u043F\u043E\u043A\u0443\u043F\u043E\u043A \u0432 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438", min: 0, max: maxInputRange, value: cashback.sum, onChange: onChangeSum })] }));
+        return (jsxs("div", { className: "w-full space-y-m", children: [jsxs("div", { className: "space-y-xs", children: [jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044E" }), jsxs("div", { className: "flex gap-m", children: [jsx(Select, { className: "w-full", isManualInput: isMainCashback, placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044E", options: getPercentCategories(isMainCashback, showIncreasedPercents), value: cashback.percent, onChange: onChangePercent }), !isMainCashback ? (jsx(Button, { version: "secondary", onClick: () => onDelete(cashback.id), shape: "round", className: "px-4 rounded-md", children: jsx(Img, { image: deleteImage }) })) : null] })] }), categories?.length && !isMainCashback ? (jsx(Select, { label: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044E \u043F\u043E\u043A\u0443\u043F\u043E\u043A", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044E \u043F\u043E\u043A\u0443\u043F\u043E\u043A", options: categories, value: currentCategory, onChange: setCurrentCategory })) : null, jsx(InputRange, { step: 500, title: "\u0421\u0443\u043C\u043C\u0430 \u043F\u043E\u043A\u0443\u043F\u043E\u043A \u0432 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438", min: 0, max: maxInputRange, value: cashback.sum, onChange: onChangeSum })] }));
     });
     const getRandomElement = (arr) => arr?.[new Date().getTime().toString().slice(-1)];
-    const createChangeHandler = (obj, field, onChange) => (value) => {
-        onChange({
-            ...obj,
-            [field]: value,
-        });
-    };
-    const updateSelectedCategories = (prev, cashback, value) => {
-        const newItem = { id: cashback.id, category: value };
-        if (prev.length === 0) {
-            return [newItem];
+    const getPercentCategories = (isMainCashback, showIncreasedPercents) => {
+        if (isMainCashback) {
+            return [];
         }
-        const index = prev.findIndex((item) => item.id === cashback.id);
-        if (index !== -1) {
-            const updated = [...prev];
-            updated[index] = newItem;
-            return updated;
+        else if (showIncreasedPercents) {
+            return AllPercentCategories;
+        }
+        else {
+            return PercentCategoriesWithoutIncreased;
         }
-        return [...prev, newItem];
-    };
-
-    const renderButtons = ({ cashbacksLength, onAddNewCashback, onResetCashback, calculatorType = 'standard', maxCategories = MAX_CATEGORIES[calculatorType], }) => {
-        return (jsxs("div", { className: "w-full flex flex-col gap-lg", children: [cashbacksLength < maxCategories ? (jsx(Button, { className: "self-start text-primary-main", embedded: true, version: "secondary", onClick: onAddNewCashback, children: cashbacksLength ? 'Добавить ещё категорию' : 'Добавить категорию' })) : null, cashbacksLength > 2 ? (jsx(Button, { className: "self-start", version: "secondary", onClick: onResetCashback, children: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0432\u0441\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438" })) : null] }));
     };
 
-    const CashbackType = {
-        standard: DEFAULT_STANDARD_CASHBACK,
-        premium: DEFAULT_PREMIUM_CASHBACK,
-    };
-    const useCashbackCalculator = (calculatorType) => {
+    const DEFAULT_CASHBACK = [
+        {
+            id: 0,
+            percent: {
+                text: 'Категория 1% "На всё"',
+                key: '1',
+            },
+            sum: 5000,
+        },
+    ];
+    const useCashbackCalculator = () => {
         const { data } = useLeadFormData('CASHBACK_CATEGORY');
-        const [cashbacks, setCashbacks] = useState(CashbackType[calculatorType]);
-        const [selectedCategories, setSelectedCategories] = useState([]);
+        const [cashbacks, setCashbacks] = useState(DEFAULT_CASHBACK);
         const categories = data?.map((_) => ({
             key: _.key || '',
             text: _.value,
         })) || [];
-        const filteredCategories = useMemo(() => {
-            const categoriesToRemove = selectedCategories.map((obj) => obj.category);
-            const keysToRemove = new Set(categoriesToRemove.map((item) => item.key));
-            return categories.filter((item) => !keysToRemove.has(item.key));
-        }, [selectedCategories, categories]);
         const onAddNewCashback = () => setCashbacks((_) => [
             ..._,
             {
-                id: _ && _.length > 0 ? _[_.length - 1]?.id + 1 : 1,
+                id: _[_.length - 1].id + 1,
                 percent: {
                     text: 'Категория 1,5%',
                     key: '1.5',
@@ -10454,15 +10377,14 @@
             return _;
         }));
         const onDeleteCashback = (id) => setCashbacks((prev) => prev.filter((_) => _.id !== id));
-        const onResetCashback = () => setCashbacks(CashbackType[calculatorType]);
+        const onResetCashback = () => setCashbacks(DEFAULT_CASHBACK);
         return {
             cashbacks,
-            categories: filteredCategories,
+            categories,
             onAddNewCashback,
             onChangeCashback,
             onDeleteCashback,
             onResetCashback,
-            onChangeCategory: setSelectedCategories,
         };
     };
 
@@ -10471,280 +10393,19 @@
         text: 'Оформить карту',
         target: '_self',
     };
-    const CashbackCalculator = JSX(
-    // eslint-disable-next-line max-lines-per-function
-    ({ maxInputRange = 300000, maxCategories, calculatorType = 'standard', maxMonthCashback = MAX_MONTH_CASHBACK[calculatorType], button = defaultButton, className = '', ...rest }) => {
-        const { cashbacks, categories, onAddNewCashback, onChangeCashback, onDeleteCashback, onResetCashback, onChangeCategory, } = useCashbackCalculator(calculatorType);
-        const { deleteImage, infoImage, image } = rest;
-        const [isMainCashbackAdded, setIsMainCashbackAdded] = useState(false);
-        useEffect(() => {
-            setIsMainCashbackAdded(Boolean(cashbacks.find((item) => item.percent.key === MAIN_CASHBACK_KEY[calculatorType])));
-        }, [cashbacks]);
-        return (jsx(BlockWrapper, { className: style('flex flex-col justify-center items-center gap-lg', className), defaultPadding: style('p-0'), ...rest, children: jsxs("div", { className: "flex flex-row items-start gap-lg mt-5", children: [jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-lg", children: [cashbacks.length
-                                ? cashbacks.map((_, index) => (jsx(CashbackCategory, { categories: categories, cashback: _, maxInputRange: maxInputRange, deleteImage: deleteImage, onDelete: onDeleteCashback, onChange: onChangeCashback, isMainCashbackAdded: isMainCashbackAdded, calculatorType: calculatorType, isShowDisclaimer: index === 0, onChangeCategory: onChangeCategory }, String(_.id))))
-                                : renderNoCategoryText(), renderButtons({
-                                cashbacksLength: cashbacks.length,
-                                onAddNewCashback: onAddNewCashback,
-                                onResetCashback: onResetCashback,
-                                calculatorType: calculatorType,
-                                maxCategories,
-                            }), jsx(CashbackCalculatorResult, { cashbacks: cashbacks, maxMonthCashback: maxMonthCashback }), jsx(InfoCard, { __html: INFO_BLOCK_HTML, image: infoImage }), jsx(RichText, { __html: '* \u041F\u043E\u0434\u0440\u043E\u0431\u043D\u0435\u0435 \u043F\u043E \u0443\u0441\u043B\u043E\u0432\u0438\u044F\u043C \u0438 \u043D\u0430\u0447\u0438\u0441\u043B\u0435\u043D\u0438\u044F\u043C \u043C\u043E\u0436\u043D\u043E \u0443\u0437\u043D\u0430\u0442\u044C \u0432\u043E \u0432\u043A\u043B\u0430\u0434\u043A\u0435 <a href="#docs">\u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u044B</a>' }), jsx(LinkButton, { className: "w-full @lg:w-auto self-start", href: button.href, text: button.text, target: button.target, version: "primary" })] }), renderImage(image)] }) }));
-    });
-    const renderNoCategoryText = () => (jsx(Text, { align: "text-left", className: "w-full", children: "\u041A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044F \u043D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u0430" }));
-    const renderImage = (image = {}) => image?.src ? (jsx(Img, { image: image, className: "hidden w-full @xl:block", imageClassName: "justify-self-center" })) : null;
-
-    const getVersion = (isPrimary, type) => isPrimary && type !== 'underlined' ? 'primary' : 'secondary';
-
-    const badgeBgStyleMap = {
-        primary: 'bg-white/30',
-        secondary: 'bg-main-divider',
-    };
-    const badgeTextColorStyleMap = {
-        primary: { desktop: 'text-white', mobile: 'text-primary-text' },
-        secondary: { desktop: 'text-secondary-text', mobile: 'text-secondary-text' },
-    };
-    const Badge = JSX(({ count, version = 'secondary' }) => {
-        const isMobileMode = useMobileMode();
-        const badgeBgStyle = isMobileMode ? 'bg-main-divider' : badgeBgStyleMap[version];
-        const textStyle = badgeTextColorStyleMap[version][isMobileMode ? 'mobile' : 'desktop'];
-        return (jsx("div", { className: style('w-6 h-6 rounded-full flex items-center justify-center', badgeBgStyle), role: "status", "aria-label": `Количество ${count} доступных программ и сервисов`, children: jsx(Text, { size: "text-xs", color: textStyle, children: count }) }));
+    const INCREASED_PERCENTS = ['5', '10', '15'];
+    const MAX_CATEGORIES = 5;
+    const INFO_BLOCK_HTML = `<p>Полученные баллы можно конвертировать в рубли и компенсировать покупки у партнеров. Подробнее в <a href='#docs'>документах</a></p>`;
+    const CashbackCalculator = JSX(({ maxInputRange = 300000, image, deleteImage, infoImage, className = '', button = defaultButton, ...rest }) => {
+        const { cashbacks, categories, onAddNewCashback, onChangeCashback, onDeleteCashback, onResetCashback, } = useCashbackCalculator();
+        const img = image?.src ? (jsx(Img, { image: image, className: "hidden w-full @xl:block", imageClassName: "justify-self-center" })) : null;
+        return (jsxs(BlockWrapper, { className: style('flex flex-col justify-center items-center gap-lg', className), defaultPadding: style('p-6xl'), ...rest, children: [jsx(Headline, { title: "\u041A\u0430\u043B\u044C\u043A\u0443\u043B\u044F\u0442\u043E\u0440 \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u0431\u0430\u043B\u043B\u043E\u0432", description: "\u041C\u043E\u0436\u043D\u043E \u0432\u044B\u0431\u0440\u0430\u0442\u044C \u043D\u0435 \u0431\u043E\u043B\u0435\u0435 5 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0439, \u043E\u0434\u043D\u0430 \u0438\u0437 \u043D\u0438\u0445 \u0438\u0437 \u043F\u043E\u0432\u044B\u0448\u0435\u043D\u043D\u043E\u0439 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438", headlineVersion: "XL", isEmbedded: true }), jsxs("div", { className: "flex flex-row items-start gap-lg", children: [jsxs("div", { className: "w-full flex flex-col justify-center items-center gap-lg", children: [cashbacks.map((_) => (jsx(CashbackCategory, { categories: categories, cashback: _, showIncreasedPercents: showIncreasedPercents(_, cashbacks), maxInputRange: maxInputRange, deleteImage: deleteImage, onDelete: onDeleteCashback, onChange: onChangeCashback }, String(_.id)))), renderButtons(cashbacks.length, onAddNewCashback, onResetCashback), jsx(CashbackCalculatorResult, { cashbacks: cashbacks }), jsx(InfoCard, { __html: INFO_BLOCK_HTML, image: infoImage }), jsx(LinkButton, { className: "w-full @lg:w-auto self-start", href: button.href, text: button.text, target: button.target, version: "primary" })] }), img] })] }));
     });
-
-    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, "aria-labelledby": `${text}-label`, 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 renderButtons = (cashbacksLength, onAddNewCashback, onResetCashback) => {
+        return (jsxs("div", { className: "w-full flex flex-col gap-lg", children: [cashbacksLength < MAX_CATEGORIES ? (jsx(Button, { className: "self-start text-primary-main", embedded: true, version: "secondary", onClick: onAddNewCashback, children: "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0435\u0449\u0435" })) : null, cashbacksLength > 2 ? (jsx(Button, { className: "self-start", version: "secondary", onClick: onResetCashback, children: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0432\u0441\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438" })) : null] }));
     };
-
-    const tabPaddingStyleMap = {
-        default: 'px-xs',
-        underlined: 'px-m',
-        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-white',
-        underlined: 'text-primary-main border-b-2',
-        animated: 'text-white sm:text-white',
-    };
-    const tabBgStyleMap = {
-        default: 'bg-white',
-        underlined: 'bg-white',
-        animated: 'p-1 ease-in duration-300 bg-white text-primary-text h-[70px] w-96',
-    };
-    const activeTabBgStyleMap = {
-        default: 'bg-primary-main',
-        underlined: 'bg-white',
-        animated: 'p-2 border-none bg-primary-main text-white h-20 w-96',
-    };
-    const TabItemInner = JSX(({ tag = 'div', item = {}, isActive = false, type = 'default', onClick }) => {
-        const Tag = tag;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { text, description, icon, count, tabName, ...link } = item;
-        return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', 'rounded-none', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), "aria-label": "\u0421\u043F\u0438\u0441\u043E\u043A \u0442\u0430\u0431\u043E\u0432", onClick: onClick, ...link, children: jsxs("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), role: "tab", "aria-label": `Таб ${text}`, children: [renderTabItemInner({
-                        text,
-                        description,
-                        icon,
-                        isActive,
-                        type,
-                    }), Number.isInteger(count) ? (jsx("div", { className: "ml-xs", role: "status", "aria-label": `Количество программ и сервисов ${count}`, children: jsx(Badge, { count: count, version: getVersion(isActive, type) }) })) : null] }) }));
-    });
-
-    const TabItem = JSX((props) => props?.item?.href ? jsx(LinkTabItem, { ...props }) : jsx(ButtonTabItem, { ...props }));
-    const LinkTabItem = JSX((props) => {
-        const link = useLink();
-        const handleClick = useCallback(() => {
-            props.onClick && props.onClick(props.item || {});
-        }, [props.onClick, props.item]);
-        const { onClick, ...item } = link({ ...props.item, onClick: handleClick });
-        return jsx(TabItemInner, { ...props, tag: "a", item: item, onClick: onClick });
-    });
-    // TODO: Update handlerDecorator (support buttons?)
-    const ButtonTabItem = JSX(({ item = {}, onClick, ...rest }) => {
-        const handleClick = useCallback((e) => {
-            e.target.scrollIntoView({ block: 'nearest' });
-            onClick?.(item);
-        }, [onClick, item]);
-        return jsx(TabItemInner, { item: item, onClick: handleClick, ...rest });
-    });
-
-    const renderTab = (activeTab, onClick, type) => (tab, i) => (jsx(TabItem, { isActive: tab === activeTab, onClick: onClick, type: type, item: tab }, String(i)));
-
-    const scrollButtonStyle = 'hidden sm:flex absolute z-40';
-    const scrollStyle = {
-        default: {
-            item: 'flex-1',
-            gap: 0,
-            buttonTop: 'top-0',
-        },
-        animated: {
-            item: 'flex',
-            gap: 8,
-            buttonTop: 'top-5',
-        },
-        underlined: {
-            item: '',
-            gap: 0,
-            buttonTop: 'top-0',
-        },
-    };
-    const ScrollableTabsControl = JSX(({ className, items = [], activeItem, onChange, tabsType = 'default' }) => {
-        const [containerRef, scroll] = useSwipeListScroll({
-            itemCount: items?.length || 0,
-        });
-        useEffect(() => scrollToSelected(containerRef.current, items, activeItem), []);
-        return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, itemClassName: scrollStyle[tabsType].item, gap: scrollStyle[tabsType].gap, children: items.map(renderTab(activeItem, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ArrowLeftButton, { wcmsIgnore: true, className: style('left-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ArrowRightButton, { wcmsIgnore: true, className: style('right-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollRight })) : null] }));
-    });
-    const scrollToSelected = (container, items, activeItem) => {
-        const selectedIndex = items.findIndex((_) => _ === activeItem);
-        if (container && selectedIndex > 0) {
-            container.scrollTo({
-                left: container?.children[selectedIndex]?.offsetLeft,
-                behavior: 'smooth',
-            });
-        }
-    };
-
-    const tabsStyle = {
-        default: {
-            wrapper: '',
-            component: '',
-        },
-        animated: {
-            wrapper: 'border-b-8 border-primary-main bg-white',
-            component: 'm-auto',
-        },
-        underlined: {
-            wrapper: 'flex',
-            component: 'm-auto',
-        },
-    };
-    const renderTabsLayout = ({ className = '', tabsType = 'animated', ...props }) => tabsType ? (jsx("div", { className: style(tabsStyle[tabsType].wrapper, className), children: jsx(ScrollableTabsControl, { className: tabsStyle[tabsType].component, tabsType: tabsType, ...props }) })) : null;
-
-    const STICKY_STYLE = 'sticky top-1 z-20';
-    const TabsLayout = UniBlock(
-    // eslint-disable-next-line max-lines-per-function
-    ({ className = '', tabs = [], block, tabsType, showCounter = false, isSticky = false, ...rest }) => {
-        const id = getId(block || {});
-        const router = useRouter();
-        const isFrame = isIFrame();
-        const isEveryLink = tabs.every((_) => _?.type === 'link');
-        const query = new URLSearchParams(decodeURIComponent(globalThis?.location?.search || ''));
-        const tabId = getTabId(id);
-        const tabsCounted = showCounter
-            ? tabs.map((_) => ({
-                ..._,
-                count: _?.type === 'group' ? block?.slots?.[_?.tabName ?? '']?.length ?? 0 : 0,
-            }))
-            : tabs;
-        const defaultSelectedTabIndex = tabsCounted.findIndex((_) => Boolean(_?.selected));
-        const defaultQueryTabIndex = tabsCounted.findIndex((_, i) => _.type === 'group' && (_?.tabName ?? String(i)) === tabId);
-        const defaultTabIndex = tabId ? defaultQueryTabIndex : defaultSelectedTabIndex;
-        const [activeTabIndex, setActiveTabIndex] = useState(getDefaultIndex(defaultTabIndex));
-        const activeItem = tabsCounted[activeTabIndex];
-        const slotName = getSlotName(tabsCounted[activeTabIndex], activeTabIndex);
-        const updateUrlSearchTabParam = (_, i) => {
-            if (_.text) {
-                query.set(id, _?.tabName ?? String(i));
-            }
-            else {
-                query.delete(id);
-            }
-            router.replace(`${router.pathname}?${query}`, { scroll: false });
-        };
-        const handleChange = useCallback((_) => {
-            const index = tabsCounted.indexOf(_);
-            const tab = tabsCounted[index];
-            setActiveTabIndex(index);
-            if (tab.type === 'group') {
-                updateUrlSearchTabParam(_, index);
-            }
-        }, [tabsCounted]);
-        return (jsxs(BlockWrapper, { className: style({ [STICKY_STYLE]: [isSticky, isEveryLink, !isFrame].every(Boolean) }, className), defaultPadding: "p-0", block: block, ...rest, children: [renderTabsLayout({
-                    className: style({
-                        'pb-1': [block?.slots, tabsType === 'default'].every(Boolean),
-                        [STICKY_STYLE]: [isSticky, !isEveryLink, !isFrame].every(Boolean),
-                    }),
-                    items: getItems(tabs, tabsCounted),
-                    activeItem,
-                    tabsType,
-                    onChange: handleChange,
-                }), jsx("div", { className: "space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs", children: Object.entries(block?.slots ?? {}).map(([key, value]) => renderBlocksList(value, {
-                        ...rest?.options,
-                        slotName,
-                        parent: block,
-                        extraProps: { className: key === slotName ? '' : 'hidden' },
-                    })) })] }));
-    }, {
-        slots: ({ tabs }) => tabs?.map(getSlotName)?.filter(Boolean) || [],
-    });
-    const getDefaultIndex = (index) => (index && index !== -1 ? index : 0);
-    const getId = ({ __id, anchor }) => anchor ?? __id ?? 'tabs';
-    const getItems = (tabs, tabsCounted) => (tabsCounted?.length ? tabsCounted : tabs);
-    const getSlotName = (tab, index) => tab?.type === 'group' ? tab?.tabName || `Слот №${index + 1}` : '';
-    const getTabId = (id) => decodeURIComponent(globalThis?.location?.search
-        .replace('?', '')
-        .replace('+', ' ')
-        .split('&')
-        .find((_) => _.split('=').find((param) => param === id))
-        ?.split('=')?.[1] ?? '');
-
-    const CALCULATOR_TABS = [
-        {
-            type: 'group',
-            description: 'с остатками на счетах до 2 999 999,99 руб*',
-            text: 'Стандарт',
-            tabName: 'standard',
-            selected: true,
-        },
-        {
-            type: 'group',
-            description: 'с остатками на счетах от 3 000 000,00 руб*',
-            text: 'Престиж',
-            tabName: 'premium',
-            selected: false,
-        },
-    ];
-    const defaultInfoImage = {
-        src: 'IconExchange.svg',
-        format: 'webp',
-        alt: 'Иконка информационного блока',
-    };
-    const CashbackCalculatorLayout = JSX(({ premiumCalculatorParams = {}, standardCalculatorParams = {}, image, deleteImage, infoImage = defaultInfoImage, button, className = '', options, title, description, subtitle, ...rest }) => {
-        const calculatorProps = {
-            button,
-            deleteImage,
-            infoImage,
-            image,
-        };
-        const CalculatorStandardBlock = createCalculatorBlock('standard', calculatorProps, standardCalculatorParams);
-        const CalculatorPremiumBlock = createCalculatorBlock('premium', calculatorProps, premiumCalculatorParams);
-        const slots = {
-            standard: [CalculatorStandardBlock],
-            premium: [CalculatorPremiumBlock],
-        };
-        return (jsxs(BlockWrapper, { className: style('flex flex-col justify-center items-center gap-lg', className), defaultPadding: style('p-6xl'), ...rest, children: [jsx(Headline, { title: title, headlineVersion: "XL", isEmbedded: true }), jsx(RichText, { __html: description, className: "text-center" }), jsx(Paragraph, { children: subtitle }), jsx("div", { className: "container grid grid-cols-12", children: jsx(TabsLayout, { className: "col-span-12", tabsType: "animated", tabs: CALCULATOR_TABS, block: { slots }, options: options }) })] }));
-    });
-    const createCalculatorBlock = (calculatorType, calculatorProps, calculatorParams) => ({
-        type: 'CashbackCalculator',
-        content: {
-            calculatorType: calculatorType,
-            ...calculatorProps,
-            ...calculatorParams,
-        },
-        style: ['col-span-12'],
-    });
+    const showIncreasedPercents = (currentCashback, cashback) => INCREASED_PERCENTS.includes(currentCashback.percent.key) ||
+        !cashback.some((_) => INCREASED_PERCENTS.includes(_.percent.key));
 
     const ContactsBlock = JSX(({ className, contacts, info, version = 'secondary', ...rest }) => (jsxs(BlockWrapper, { className: style('flex', className), defaultPadding: "p-6xl", version: version, ...rest, children: [info?.length ? renderBlocks(info) : null, contacts?.length ? renderBlocks(contacts) : null] })));
     const renderBlocks = (info) => (jsx("div", { className: "flex gap-5xl grow basis-0", children: info.map((column, i) => renderBlocksColumn({ column, i })) }));
@@ -14353,6 +14014,8 @@
         return (jsx("div", { children: filters.length > 0 ? (jsxs("div", { className: "space-y-s", children: [jsx(Text, { children: text }), jsx("div", { className: COMMON_FILTERS_STYLES, children: filters })] })) : null }));
     };
 
+    const getVersion = (isPrimary, type) => isPrimary && type !== 'underlined' ? 'primary' : 'secondary';
+
     const renderButtonsGroup = (data, activeButton, onButtonClick) => {
         const allButtonVersion = getVersion(activeButton === 'all');
         const businessButtonVersion = getVersion(activeButton === 'business');
@@ -14762,6 +14425,211 @@
 
     const StickyBottomMenu = JSX(() => (jsx("div", { className: "hidden", role: "none" })));
 
+    const badgeBgStyleMap = {
+        primary: 'bg-white/30',
+        secondary: 'bg-main-divider',
+    };
+    const badgeTextColorStyleMap = {
+        primary: { desktop: 'text-white', mobile: 'text-primary-text' },
+        secondary: { desktop: 'text-secondary-text', mobile: 'text-secondary-text' },
+    };
+    const Badge = JSX(({ count, version = 'secondary' }) => {
+        const isMobileMode = useMobileMode();
+        const badgeBgStyle = isMobileMode ? 'bg-main-divider' : badgeBgStyleMap[version];
+        const textStyle = badgeTextColorStyleMap[version][isMobileMode ? 'mobile' : 'desktop'];
+        return (jsx("div", { className: style('w-6 h-6 rounded-full flex items-center justify-center', badgeBgStyle), role: "status", "aria-label": `Количество ${count} доступных программ и сервисов`, children: jsx(Text, { size: "text-xs", color: textStyle, children: count }) }));
+    });
+
+    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, "aria-labelledby": `${text}-label`, 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',
+        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-white',
+        underlined: 'text-primary-main border-b-2',
+        animated: 'text-white sm:text-white',
+    };
+    const tabBgStyleMap = {
+        default: 'bg-white',
+        underlined: 'bg-white',
+        animated: 'p-1 ease-in duration-300 bg-white text-primary-text h-[70px] w-96',
+    };
+    const activeTabBgStyleMap = {
+        default: 'bg-primary-main',
+        underlined: 'bg-white',
+        animated: 'p-2 border-none bg-primary-main text-white h-20 w-96',
+    };
+    const TabItemInner = JSX(({ tag = 'div', item = {}, isActive = false, type = 'default', onClick }) => {
+        const Tag = tag;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { text, description, icon, count, tabName, ...link } = item;
+        return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', 'rounded-none', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), "aria-label": "\u0421\u043F\u0438\u0441\u043E\u043A \u0442\u0430\u0431\u043E\u0432", onClick: onClick, ...link, children: jsxs("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), role: "tab", "aria-label": `Таб ${text}`, children: [renderTabItemInner({
+                        text,
+                        description,
+                        icon,
+                        isActive,
+                        type,
+                    }), Number.isInteger(count) ? (jsx("div", { className: "ml-xs", role: "status", "aria-label": `Количество программ и сервисов ${count}`, children: jsx(Badge, { count: count, version: getVersion(isActive, type) }) })) : null] }) }));
+    });
+
+    const TabItem = JSX((props) => props?.item?.href ? jsx(LinkTabItem, { ...props }) : jsx(ButtonTabItem, { ...props }));
+    const LinkTabItem = JSX((props) => {
+        const link = useLink();
+        const handleClick = useCallback(() => {
+            props.onClick && props.onClick(props.item || {});
+        }, [props.onClick, props.item]);
+        const { onClick, ...item } = link({ ...props.item, onClick: handleClick });
+        return jsx(TabItemInner, { ...props, tag: "a", item: item, onClick: onClick });
+    });
+    // TODO: Update handlerDecorator (support buttons?)
+    const ButtonTabItem = JSX(({ item = {}, onClick, ...rest }) => {
+        const handleClick = useCallback((e) => {
+            e.target.scrollIntoView({ block: 'nearest' });
+            onClick?.(item);
+        }, [onClick, item]);
+        return jsx(TabItemInner, { item: item, onClick: handleClick, ...rest });
+    });
+
+    const renderTab = (activeTab, onClick, type) => (tab, i) => (jsx(TabItem, { isActive: tab === activeTab, onClick: onClick, type: type, item: tab }, String(i)));
+
+    const scrollButtonStyle = 'hidden sm:flex absolute z-40';
+    const scrollStyle = {
+        default: {
+            item: 'flex-1',
+            gap: 0,
+            buttonTop: 'top-0',
+        },
+        animated: {
+            item: 'flex',
+            gap: 8,
+            buttonTop: 'top-5',
+        },
+        underlined: {
+            item: '',
+            gap: 0,
+            buttonTop: 'top-0',
+        },
+    };
+    const ScrollableTabsControl = JSX(({ className, items = [], activeItem, onChange, tabsType = 'default' }) => {
+        const [containerRef, scroll] = useSwipeListScroll({
+            itemCount: items?.length || 0,
+        });
+        useEffect(() => scrollToSelected(containerRef.current, items, activeItem), []);
+        return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, itemClassName: scrollStyle[tabsType].item, gap: scrollStyle[tabsType].gap, children: items.map(renderTab(activeItem, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ArrowLeftButton, { wcmsIgnore: true, className: style('left-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ArrowRightButton, { wcmsIgnore: true, className: style('right-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollRight })) : null] }));
+    });
+    const scrollToSelected = (container, items, activeItem) => {
+        const selectedIndex = items.findIndex((_) => _ === activeItem);
+        if (container && selectedIndex > 0) {
+            container.scrollTo({
+                left: container?.children[selectedIndex]?.offsetLeft,
+                behavior: 'smooth',
+            });
+        }
+    };
+
+    const tabsStyle = {
+        default: {
+            wrapper: '',
+            component: '',
+        },
+        animated: {
+            wrapper: 'border-b-8 border-primary-main bg-white',
+            component: 'm-auto',
+        },
+        underlined: {
+            wrapper: 'flex',
+            component: 'm-auto',
+        },
+    };
+    const renderTabsLayout = ({ className = '', tabsType = 'animated', ...props }) => tabsType ? (jsx("div", { className: style(tabsStyle[tabsType].wrapper, className), children: jsx(ScrollableTabsControl, { className: tabsStyle[tabsType].component, tabsType: tabsType, ...props }) })) : null;
+
+    const STICKY_STYLE = 'sticky top-1 z-20';
+    const TabsLayout = UniBlock(
+    // eslint-disable-next-line max-lines-per-function
+    ({ className = '', tabs = [], block, tabsType, showCounter = false, isSticky = false, ...rest }) => {
+        const id = getId(block || {});
+        const router = useRouter();
+        const isFrame = isIFrame();
+        const isEveryLink = tabs.every((_) => _?.type === 'link');
+        const query = new URLSearchParams(decodeURIComponent(globalThis?.location?.search || ''));
+        const tabId = getTabId(id);
+        const tabsCounted = showCounter
+            ? tabs.map((_) => ({
+                ..._,
+                count: _?.type === 'group' ? block?.slots?.[_?.tabName ?? '']?.length ?? 0 : 0,
+            }))
+            : tabs;
+        const defaultSelectedTabIndex = tabsCounted.findIndex((_) => Boolean(_?.selected));
+        const defaultQueryTabIndex = tabsCounted.findIndex((_, i) => _.type === 'group' && (_?.tabName ?? String(i)) === tabId);
+        const defaultTabIndex = tabId ? defaultQueryTabIndex : defaultSelectedTabIndex;
+        const [activeTabIndex, setActiveTabIndex] = useState(getDefaultIndex(defaultTabIndex));
+        const activeItem = tabsCounted[activeTabIndex];
+        const slotName = getSlotName(tabsCounted[activeTabIndex], activeTabIndex);
+        const updateUrlSearchTabParam = (_, i) => {
+            if (_.text) {
+                query.set(id, _?.tabName ?? String(i));
+            }
+            else {
+                query.delete(id);
+            }
+            router.replace(`${router.pathname}?${query}`, { scroll: false });
+        };
+        const handleChange = useCallback((_) => {
+            const index = tabsCounted.indexOf(_);
+            const tab = tabsCounted[index];
+            setActiveTabIndex(index);
+            if (tab.type === 'group') {
+                updateUrlSearchTabParam(_, index);
+            }
+        }, [tabsCounted]);
+        return (jsxs(BlockWrapper, { className: style({ [STICKY_STYLE]: [isSticky, isEveryLink, !isFrame].every(Boolean) }, className), defaultPadding: "p-0", block: block, ...rest, children: [renderTabsLayout({
+                    className: style({
+                        'pb-1': [block?.slots, tabsType === 'default'].every(Boolean),
+                        [STICKY_STYLE]: [isSticky, !isEveryLink, !isFrame].every(Boolean),
+                    }),
+                    items: getItems(tabs, tabsCounted),
+                    activeItem,
+                    tabsType,
+                    onChange: handleChange,
+                }), jsx("div", { className: "space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs", children: Object.entries(block?.slots ?? {}).map(([key, value]) => renderBlocksList(value, {
+                        ...rest?.options,
+                        slotName,
+                        parent: block,
+                        extraProps: { className: key === slotName ? '' : 'hidden' },
+                    })) })] }));
+    }, {
+        slots: ({ tabs }) => tabs?.map(getSlotName)?.filter(Boolean) || [],
+    });
+    const getDefaultIndex = (index) => (index && index !== -1 ? index : 0);
+    const getId = ({ __id, anchor }) => anchor ?? __id ?? 'tabs';
+    const getItems = (tabs, tabsCounted) => (tabsCounted?.length ? tabsCounted : tabs);
+    const getSlotName = (tab, index) => tab?.type === 'group' ? tab?.tabName || `Слот №${index + 1}` : '';
+    const getTabId = (id) => decodeURIComponent(globalThis?.location?.search
+        .replace('?', '')
+        .replace('+', ' ')
+        .split('&')
+        .find((_) => _.split('=').find((param) => param === id))
+        ?.split('=')?.[1] ?? '');
+
     const FIRST_CELL_STYLES = 'w-80 flex-shrink-0 sticky left-0 bg-white';
     const renderHeader = ({ title, icon }) => (jsxs("div", { className: style('flex gap-m items-center', FIRST_CELL_STYLES), role: "cell", children: [icon ? (jsx(Img, { className: "hidden lg:block max-w-6 shrink-0", image: icon, width: "24", height: "24" })) : null, title ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-text", children: title })) : null] }));
 
@@ -14882,21 +14750,20 @@
         RollupItem,
         StepsBlock,
         StickyBottomMenu,
-        TextBlock,
         TabsLayout,
         TariffsTable,
+        TextBlock,
         VerticalLayout,
         Video,
         ApplicationLeadForm,
         CreditCardForm,
         CreditForm,
         DebitForm,
+        CashbackCalculator,
         CalculatorRko,
         RkoTariffCardsTable,
         RatesTable,
         ReferalForm,
-        CashbackCalculator,
-        CashbackCalculatorLayout,
     };
 
     const applyAspects = (aspects) => (ev) => {
@@ -15041,7 +14908,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.1072";
+    const packageVersion = "0.14.1073";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;