@redneckz/wildless-cms-uni-blocks 0.13.6 → 0.13.8

package/bundle/bundle.umd.js

@@ -1031,8 +1031,9 @@
 
     function renderRangeWithTicks({ list = [], min, max, step, value = list[0] || min, disabled, onChange, }) {
         const rangeValue = list.length ? list.indexOf(value) : value;
+        const rangeValueShift = rangeValue > min ? rangeValue - min : 0;
         const inputStyle = {
-            backgroundSize: `${(((rangeValue - min) * 100) / (max - min)).toFixed(2)}% 100%`,
+            backgroundSize: `${((rangeValueShift * 100) / (max - min)).toFixed(2)}% 100%`,
         };
         return (jsxs("div", { children: [list.length ? (jsx("div", { className: "absolute w-full flex justify-between -bottom-[3px] px-m", 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-m 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);
@@ -1378,7 +1379,7 @@
     });
 
     const Bonus = JSX(({ className = '', title, description, bonusItems = [], ...rest }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { className: "mb-xl", isEmbedded: true, title: title, description: description, headlineVersion: "M" }), jsx("div", { className: "flex flex-wrap w-full", children: bonusItems.length > 0
-                        ? bonusItems.map((_, i) => (jsxs("div", { className: "space-y-xs flex flex-col grow w-full sm:w-[49%] border border-gray p-m", children: [jsxs("div", { className: "grow", children: [_?.title ? (jsx("div", { className: "mb-xs last:mb-0", children: jsx(Text, { size: "text-h4", children: _.title }) })) : null, _?.description ? (jsx("div", { className: "mb-text last:mb-0", children: jsx(Paragraph, { size: "text-xl", font: "font-light", children: _.description }) })) : null] }), jsxs("div", { className: "flex justify-center sm:justify-between sm:items-end", children: [jsx("div", { className: "hidden sm:block", children: renderButtonsSection(_?.buttons) }), _.bonusItemContent?.bonusType
+                        ? bonusItems.map((_, i) => (jsxs("div", { className: "space-y-xs flex flex-col grow w-full sm:w-[49%] border border-gray p-m", children: [jsx("div", { className: "grow", children: jsx(Headline, { title: _?.title, description: _?.description, headlineVersion: "S", isEmbedded: true, align: "text-left" }) }), jsxs("div", { className: "flex justify-center sm:justify-between sm:items-end", children: [jsx("div", { className: "hidden sm:block", children: renderButtonsSection(_?.buttons) }), _.bonusItemContent?.bonusType
                                             ? renderBonusItemContent(_.bonusItemContent)
                                             : null] })] }, String(i))))
                         : null })] }) })));
@@ -1510,7 +1511,7 @@
         maxSum: DEFAULT_MAX_SUM$1,
         minMonths: DEFAULT_MIN_MONTHS$1,
         maxMonths: DEFAULT_MAX_MONTHS$1,
-        rate: 12.5,
+        rate: 0,
         isSalaryClient: false,
         isPensionClient: false,
         isStateEmployee: false,
@@ -1525,7 +1526,7 @@
         maxSumExtra: REFINANCING_EXTRA_MAX_SUM,
         minMonths: DEFAULT_REFINANCING_MIN_MONTHS,
         maxMonths: DEFAULT_MAX_MONTHS$1,
-        rate: 7.5,
+        rate: 0,
         isExtraMoney: false,
         isSalaryClient: false,
         isInsurance: true,
@@ -1637,6 +1638,37 @@
                         })] }), 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: "flex flex-col gap-2xl sm:w-96", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] })] }));
     });
 
+    const STEP_DAYS = 1;
+    const renderDaysInput = (props) => (jsx(InputRange, { items: [`От ${daysText(props.min || 0)}`, `До ${daysText(props.max || 0)}`], step: STEP_DAYS, ...props }));
+    const daysText = (days) => `${days} ${Number(days) % 10 === 1 ? 'дня' : 'дней'}`;
+
+    const orientationStyleMap = {
+        horizontal: 'gap-5xl',
+        vertical: 'flex-col gap-s',
+    };
+    const RadioButtonGroup = JSX(({ items, checkedItem, className, onChange: onChangeCheckedItem, orientation = 'horizontal', }) => (jsx("div", { className: style(`flex ${orientationStyleMap[orientation]}`, className), children: items?.map(({ id, text }) => (jsx(Checkbox, { isRadio: true, text: text, value: checkedItem === id, onChange: () => onChangeCheckedItem && onChangeCheckedItem(id) }, String(id)))) })));
+
+    const renderBinaryRadioButtonGroup = ({ items, title, orientation = 'horizontal', value, radioGroupClassName, onChange, }) => (jsxs("div", { className: "space-y-s", children: [title ? (jsx("div", { 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, className: style('flex-col sm:flex-row', radioGroupClassName), onChange: (_) => onChange && onChange(_ === items[0].id) })] }));
+
+    const renderInterestPayment = (props) => renderBinaryRadioButtonGroup({
+        ...props,
+        items: [
+            { id: 'everyMonth', text: 'Ежемесячно' },
+            { id: 'atEndTerm', text: 'В конце срока' },
+        ],
+    });
+
+    const UnknownRate = JSX(({ title = 'Ставка', isUnavailableByTerm = false }) => (jsxs("div", { children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsx("div", { className: "mt-2xs pt-2xs pl-lg pb-xs", children: jsx(Icon, { name: "PercentIcon", width: "90", height: "85" }) }), jsx("div", { className: "w-64 mt-m", children: isUnavailableByTerm ? (jsxs(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: ["\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u043D\u0430\u044F \u0441\u0442\u0430\u0432\u043A\u0430 \u0434\u043B\u044F \u0441\u0440\u043E\u043A\u0430 ", jsx("strong", { children: "1-30 \u0434\u043D\u0435\u0439" }), " \u0443\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u043F\u0440\u0438 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0438 \u0432 \u0411\u0430\u043D\u043A"] })) : (jsx(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0434\u0440\u0443\u0433\u0443\u044E \u0441\u0443\u043C\u043C\u0443 \u0438\u043B\u0438 \u0441\u0440\u043E\u043A" })) })] })));
+
+    const renderDesktopRate = ({ rate, depositeName, fractionDigits, isShowDepositeName, }) => (jsx(Rate, { rate: rate, depositeName: depositeName, fractionDigits: fractionDigits, isShowDepositeName: isShowDepositeName, rateBlockClassName: "tracking-[-25px]", unit: "%" }));
+    const renderMobileRate = ({ rate }) => (jsx(CalculatorValueBlock, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", value: rate, postfix: "%" }));
+    const renderRate = (props) => {
+        if (props.rate === 0) {
+            return jsx(UnknownRate, { isUnavailableByTerm: props.isUnavailableByTerm });
+        }
+        return (jsxs("div", { children: [jsx("div", { className: "hidden md:block", children: renderDesktopRate(props) }), jsx("div", { className: "md:hidden", children: renderMobileRate(props) })] }));
+    };
+
     const defaultDiscriminator = (_) => _;
     const maxBy = (discriminator = defaultDiscriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
     const max = maxBy();
@@ -1687,7 +1719,7 @@
                 ...DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS,
                 ...userInputParams,
                 isDisabledOperatingDeposit,
-                isShowUnknownRate: true,
+                isUnavailableByTerm: true,
             };
         }
         const businessDepositCalculatorSourceBookParams = data?.rateRows?.find((_) => {
@@ -1727,37 +1759,6 @@
         }
     };
 
-    const STEP_DAYS = 1;
-    const renderDaysInput = (props) => (jsx(InputRange, { items: [`От ${daysText(props.min || 0)}`, `До ${daysText(props.max || 0)}`], step: STEP_DAYS, ...props }));
-    const daysText = (days) => `${days} ${Number(days) % 10 === 1 ? 'дня' : 'дней'}`;
-
-    const orientationStyleMap = {
-        horizontal: 'gap-5xl',
-        vertical: 'flex-col gap-s',
-    };
-    const RadioButtonGroup = JSX(({ items, checkedItem, className, onChange: onChangeCheckedItem, orientation = 'horizontal', }) => (jsx("div", { className: style(`flex ${orientationStyleMap[orientation]}`, className), children: items?.map(({ id, text }) => (jsx(Checkbox, { isRadio: true, text: text, value: checkedItem === id, onChange: () => onChangeCheckedItem && onChangeCheckedItem(id) }, String(id)))) })));
-
-    const renderBinaryRadioButtonGroup = ({ items, title, orientation = 'horizontal', value, radioGroupClassName, onChange, }) => (jsxs("div", { className: "space-y-s", children: [title ? (jsx("div", { 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, className: style('flex-col sm:flex-row', radioGroupClassName), onChange: (_) => onChange && onChange(_ === items[0].id) })] }));
-
-    const renderInterestPayment = (props) => renderBinaryRadioButtonGroup({
-        ...props,
-        items: [
-            { id: 'everyMonth', text: 'Ежемесячно' },
-            { id: 'atEndTerm', text: 'В конце срока' },
-        ],
-    });
-
-    const UnknownRate = JSX(({ title = 'Ставка' }) => (jsxs("div", { children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsx("div", { className: "mt-2xs pt-2xs pl-lg pb-xs", children: jsx(Icon, { name: "PercentIcon", width: "90", height: "85" }) }), jsx("div", { className: "w-64 mt-m", children: jsxs(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: ["\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u043D\u0430\u044F \u0441\u0442\u0430\u0432\u043A\u0430 \u0434\u043B\u044F \u0441\u0440\u043E\u043A\u0430 ", jsx("strong", { children: "1-30 \u0434\u043D\u0435\u0439" }), " \u0443\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u043F\u0440\u0438 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0438 \u0432 \u0411\u0430\u043D\u043A"] }) })] })));
-
-    const renderDesktopRate = ({ rate, depositeName, isShowDepositeName }) => (jsx(Rate, { rate: rate, depositeName: depositeName, isShowDepositeName: isShowDepositeName, rateBlockClassName: "tracking-[-25px]", unit: "%" }));
-    const renderMobileRate = ({ rate }) => (jsx(CalculatorValueBlock, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", value: rate, postfix: "%" }));
-    const renderRate = (props) => {
-        if (props.isShowUnknownRate) {
-            return jsx(UnknownRate, {});
-        }
-        return (jsxs("div", { children: [jsx("div", { className: "hidden md:block", children: renderDesktopRate(props) }), jsx("div", { className: "md:hidden", children: renderMobileRate(props) })] }));
-    };
-
     const BusinessDepositCalculatorForm = JSX(({ className = '', sourceBookDir, buttons, footnote, bottomFootnote, isShowDepositeName }) => {
         const [userInputParams, { field }] = useForm({
             moneyValue: BUSINESS_DEFAULT_SUM,
@@ -1768,7 +1769,7 @@
             isMonthlyInterestPayment: false,
         });
         const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
-        const { income, finalSum, rate, isShowUnknownRate, depositeName } = calculatorParams;
+        const { income, finalSum, rate, isUnavailableByTerm, depositeName } = calculatorParams;
         return (jsxs("section", { className: style('flex flex-col justify-between sm:flex-row gap-m', className), children: [jsxs("div", { className: "flex flex-col gap-y-m sm:w-2/5 gap-2xl", children: [renderWantedSumInput({
                             title: 'Сумма, ₽',
                             min: calculatorParams.minSum,
@@ -1790,7 +1791,7 @@
                     rate,
                     depositeName,
                     isShowDepositeName,
-                    isShowUnknownRate,
+                    isUnavailableByTerm,
                 }), jsxs("div", { className: "flex flex-col gap-2xl sm:w-96", children: [renderDepositResults(finalSum, income), renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote), renderFootnote(bottomFootnote)] })] }));
     });
     const renderBusinessDepositParamsForm = (calculatorParams, field) => (jsxs("div", { className: "flex flex-col gap-y-xl sm:gap-y-s", children: [jsx(Checkbox, { text: "\u041F\u043E\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u0435", disabled: calculatorParams.isDisabledOperatingDeposit, ...field('isReplenished'), value: calculatorParams.isReplenished }), jsx(Checkbox, { disabled: calculatorParams.isDisabledOperatingDeposit, text: "\u0427\u0430\u0441\u0442\u0438\u0447\u043D\u043E\u0435 \u0441\u043D\u044F\u0442\u0438\u0435", ...field('isPartialWithdrawal'), value: calculatorParams.isPartialWithdrawal }), jsx(Checkbox, { text: "\u0418\u041F / \u043C\u0430\u043B\u043E\u0435 \u043F\u0440\u0435\u0434\u043F\u0440\u0438\u044F\u0442\u0438\u0435", ...field('isSmallBusiness'), value: calculatorParams.isSmallBusiness })] }));
@@ -1863,7 +1864,7 @@
     };
 
     const useCreditCalculatorParams = (userInputParams, sourceBookDir, paramsViewSettings) => {
-        let { moneyValue, monthsValue } = userInputParams;
+        const { moneyValue, monthsValue } = userInputParams;
         const data = useCalculatorParams(sourceBookDir || CREDIT_CALC_DEFAULT_DIR);
         const rateRows = data?.rateRows || [DEFAULT_CREDIT_CALCULATOR_PARAMS];
         const limitRows = data?.limitRows || [];
@@ -1874,8 +1875,6 @@
         });
         const { minSum, maxSum } = getLimitRangeByKeys(['minSum', 'maxSum'], creditCalculatorSourceBookLimitParams, rateRows);
         const { minMonths, maxMonths } = getLimitRangeByKeys(['minMonths', 'maxMonths'], creditCalculatorSourceBookLimitParams, rateRows);
-        moneyValue = clamp(moneyValue, minSum, maxSum);
-        monthsValue = clamp(monthsValue, minMonths, maxMonths);
         const creditCalculatorRateParams = getCreditCalculatorRateParams({
             rateRows,
             userInputParams,
@@ -2085,7 +2084,7 @@
         checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row)) || DEFAULT_REFINANCING_CALCULATOR_PARAMS;
 
     const useRefinancingCalculatorParams = (userInputParams, sourceBookDir, paramsViewSettings) => {
-        let { moneyValue, monthsValue, oldMonthlyPayment, moneyExtra } = userInputParams;
+        const { moneyValue, monthsValue, oldMonthlyPayment, moneyExtra } = userInputParams;
         const data = useCalculatorParams(sourceBookDir || REFINANCING_CALC_DEFAULT_DIR);
         const rateRows = data?.rateRows || [DEFAULT_REFINANCING_CALCULATOR_PARAMS];
         const limitRows = data?.limitRows || [];
@@ -2095,13 +2094,7 @@
             paramsViewSettings,
         });
         const { minSum, maxSum } = getLimitRangeByKeys(['minSum', 'maxSum'], sourceBookLimitParams, rateRows);
-        const { minSumOld, maxSumOld } = getLimitRangeByKeys(['minSumOld', 'maxSumOld'], sourceBookLimitParams, rateRows);
-        const { minSumExtra, maxSumExtra } = getLimitRangeByKeys(['minSumExtra', 'maxSumExtra'], sourceBookLimitParams, rateRows);
         const { minMonths, maxMonths } = getLimitRangeByKeys(['minMonths', 'maxMonths'], sourceBookLimitParams, rateRows);
-        moneyValue = clamp(moneyValue, minSum, maxSum);
-        oldMonthlyPayment = clamp(oldMonthlyPayment, minSumOld, maxSumOld);
-        moneyExtra = clamp(moneyExtra, minSumExtra, maxSumExtra);
-        monthsValue = clamp(monthsValue, minMonths, maxMonths);
         const refinancingCalculatorSourceBookRateParams = getRefinancingCalculatorRateParams({
             rateRows,
             userInputParams,
@@ -2172,7 +2165,10 @@
                                 ...field('moneyExtra'),
                                 value: calculatorParams.moneyExtra,
                             })
-                            : null] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.rate, fractionDigits: 1, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "flex flex-col gap-2xl sm:w-96", children: [jsx(CalculatorValueBlock, { title: 'Ежемесячный платеж', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), calculatorParams.benefit > 0 ? (jsx(CalculatorValueBlock, { title: 'Выгода в месяц', value: calculatorParams.benefit, postfix: "\u20BD" })) : null, renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') }), renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] })] }));
+                            : null] }), renderRate({
+                    rate: calculatorParams.rate,
+                    fractionDigits: 1,
+                }), jsxs("div", { className: "flex flex-col gap-2xl sm:w-96", children: [jsx(CalculatorValueBlock, { title: 'Ежемесячный платеж', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), calculatorParams.benefit > 0 ? (jsx(CalculatorValueBlock, { title: 'Выгода в месяц', value: calculatorParams.benefit, postfix: "\u20BD" })) : null, renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') }), renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] })] }));
     });
     const renderCreditParamsForm = (params, field) => (jsxs("div", { className: "space-y-s", children: [params.isShowSalaryClient ? (jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", ...field('isSalaryClient'), value: params.isSalaryClient })) : null, params.isShowInsurance ? (jsx(Checkbox, { text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", ...field('isInsurance'), value: params.isInsurance })) : null, params.isShowExtraMoney ? (jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u0434\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u0443\u044E \u0441\u0443\u043C\u043C\u0443", ...field('isExtraMoney'), value: params.isExtraMoney })) : null] }));
 
@@ -2502,6 +2498,7 @@
 
     const cardBaseStyle = 'relative h-full';
     const CARD_SIZE_MAP = {
+        small: 'sm:min-w-64',
         normal: 'sm:min-w-96',
         big: 'sm:min-w-[515px]',
     };
@@ -2594,7 +2591,7 @@
     });
 
     const CarouselEventCard = JSX(({ className = '', icon, title, description, href, target, ...rest }) => {
-        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-0", ...rest, children: jsxs(LinkWrapper, { className: "flex flex-col", href: href, target: target, children: [icon?.icon ? jsx(Img, { image: icon }) : null, icon?.src ? jsx(Img, { image: icon }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mt-s ml-s mb-xs", title: title })) : null, description ? (jsx("div", { className: "ml-s mb-m", children: jsx(Text, { font: "font-light", size: "text-m", color: "text-secondary-text", children: description }) })) : null] }) }));
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-0", ...rest, children: jsxs(LinkWrapper, { className: "flex flex-col", href: href, target: target, children: [icon?.icon ? jsx(Img, { image: icon }) : null, icon?.src ? jsx(Img, { image: icon }) : null, jsx("div", { className: "p-s", children: jsx(Headline, { title: title, description: description, headlineVersion: "XS", isEmbedded: true, align: "text-left" }) })] }) }));
     });
 
     const imageAlignmentMap = {
@@ -2603,11 +2600,7 @@
         end: 'self-end',
     };
     const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-3xl font-sans overflow-hidden', padding || defaultPadding, className), children: [title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: "grow relative flex flex-wrap @xl:flex-nowrap justify-around @xl:justify-between items-stretch gap-3xl", children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-3xl max-w-[600px] @xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), backImage ? (jsx("div", { className: "mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4", children: backImage })) : null, buttons] }), renderImageContainer(rightImage, { className: '-order-1 @xl:order-1', imageAlign })] })] })));
-    const renderImageContainer = (image, { className, imageAlign }) => {
-        //TODO Спорное решение
-        const fullWidth = image?.props?.image?.size?.width > 400;
-        return image ? (jsx("div", { className: style('flex-shrink-0', fullWidth ? 'w-full @xl:w-auto' : '', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
-    };
+    const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('md:flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
 
     const cardColumnsModeStyleMap = {
         1: 'grid-cols-1',
@@ -2948,12 +2941,12 @@
         const [visibleBlocks, hiddenBlocks] = topItemsCount > 0
             ? [blocksToRender.slice(0, topItemsCount), blocksToRender.slice(topItemsCount)]
             : [blocksToRender, []];
-        return (jsxs("div", { children: [jsx("div", { className: style(blocksToRender.length ? 'hidden' : 'block'), children: notFound ? renderNotFound(notFound) : null }), jsxs("div", { className: style(blocksToRender.length ? '' : 'hidden'), children: [jsx("div", { className: style('mb-2xs', resultsGridStyle), children: renderBlocksList(visibleBlocks, { ...rest.options, parent: block }) }), jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => {
-                                return (jsx(FoldableSection, { className: style(resultsGridStyle, isUnfolded ? 'mb-2xs' : ''), isUnfolded: isUnfolded, children: renderBlocksList(hiddenBlocks, { ...rest.options, parent: block }) }));
+        return (jsxs("div", { children: [jsx("div", { className: style(blocksToRender.length ? 'hidden' : 'block'), children: notFound ? renderNotFound(notFound) : null }), jsxs("div", { className: style('space-y-2xs', blocksToRender.length ? '' : 'hidden'), children: [jsx("div", { className: style(resultsGridStyle), children: renderBlocksList(visibleBlocks, { ...rest.options, parent: block }) }), jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => {
+                                return (jsx(FoldableSection, { className: style(resultsGridStyle), isUnfolded: isUnfolded, children: renderBlocksList(hiddenBlocks, { ...rest.options, parent: block }) }));
                             }, renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(DefaultFoldButton, { className: style(topItemsCount < 1 ? 'hidden' : ''), disabled: !hiddenBlocks?.length, label: label, icon: ICONS[Number(isUnfolded)], dataTheme: rest.options?.page?.colorPalette, onClick: onToggle })) })] })] }));
     });
     function renderNotFound({ title, description }) {
-        return (jsxs("div", { className: "bg-white py-20", children: [title ? (jsx("div", { className: "mb-xs", children: jsx(Paragraph, { align: "text-center", children: jsx(Text, { size: "text-h4", children: title }) }) })) : null, description ? (jsx(Paragraph, { size: "text-xl", font: "font-light", align: "text-center", children: description })) : null] }));
+        return (jsx("div", { className: "bg-white py-20", children: jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true }) }));
     }
 
     const SlideCheckboxGroup = JSX(({ value, onChange, items = [], multiple }) => {
@@ -2972,7 +2965,7 @@
         return items.map((item) => (jsx(SlideCheckbox, { text: item.title, value: [value].flatMap((_) => _).includes(item.value), onChange: () => handleChange(item.value), type: multiple ? 'checkbox' : 'radio' }, item.value)));
     });
 
-    const renderFiltrationForm = ({ field, reset, filtrationSchema, resetButton, children, }) => (jsxs("form", { className: "flex justify-between bg-white p-4xl mb-2xs", children: [jsxs("div", { className: "flex gap-5xl", children: [children, Object.entries(filtrationSchema).map(renderFormItem(field))] }), resetButton ? (jsx("div", { children: jsx(Button, { className: "w-72 ml-s", onClick: reset, ...resetButton }) })) : null] }));
+    const renderFiltrationForm = ({ field, reset, filtrationSchema, resetButton, children, }) => (jsxs("form", { className: "flex justify-between bg-white p-4xl", children: [jsxs("div", { className: "flex gap-5xl", children: [children, Object.entries(filtrationSchema).map(renderFormItem(field))] }), resetButton ? (jsx("div", { children: jsx(Button, { className: "w-72 ml-s", onClick: reset, ...resetButton }) })) : null] }));
     const renderFormItem = (field) => ([key, item]) => {
         const type = item?.type;
         switch (type) {
@@ -3021,7 +3014,7 @@
         return null;
     };
     const getErrorBlockStyle = (text) => (text ? 'py-20' : 'mb-16 mt-24');
-    const ErrorBlock = JSX(({ className = '', title, subtitle, error, button, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col gap-lg justify-center items-center', className), defaultPadding: style('py-xs', getErrorBlockStyle(button?.text)), version: "transparent", ...rest, children: [jsx("div", { className: "flex justify-center py-20", children: renderErrorContent(error) }), title ? jsx(Heading, { headingType: "h1", className: "text-left", title: title }) : null, subtitle ? (jsx("div", { className: "max-w-[613px] text-center", children: jsx(Text, { size: "text-xl", font: "font-light", children: subtitle }) })) : null, button?.text ? (jsx(Button, { className: "py-4 px-9", version: button?.version, ...button, children: button.text })) : null] })));
+    const ErrorBlock = JSX(({ className = '', title, subtitle, error, button, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col gap-lg justify-center items-center', className), defaultPadding: style('py-xs', getErrorBlockStyle(button?.text)), version: "transparent", ...rest, children: [jsx("div", { className: "flex justify-center py-20", children: renderErrorContent(error) }), jsx(Headline, { title: title, description: subtitle, headlineVersion: "XL", isEmbedded: true }), button?.text ? (jsx(Button, { className: "py-4 px-9", version: button?.version, ...button, children: button.text })) : null] })));
 
     var Currencies;
     (function (Currencies) {
@@ -3470,7 +3463,7 @@
         return (jsx("a", { className: `text-xs font-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` }));
     });
 
-    const TextInformation = JSX(({ className = '', links }) => (jsxs("div", { className: className, children: [jsx("div", { className: "pt-lg", children: jsx(Text, { size: "text-xs", font: "font-light", color: "text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex flex-col sm:flex-row justify-start items-start gap-x-lg gap-y-xs pt-lg", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ..._ }, String(i)))) })) : null] })));
+    const TextInformation = JSX(({ className = '', links }) => (jsxs("div", { className: style('@container', className), children: [jsx("div", { className: "pt-lg", children: jsx(Text, { size: "text-xs", font: "font-light", color: "text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex flex-col @lg:flex-row justify-start items-start gap-x-lg gap-y-xs pt-lg", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ..._ }, String(i)))) })) : null] })));
 
     const LEFT_COL_WIDTH = 'w-52';
     const Footer = JSX(({ className, ...rest }) => {
@@ -3776,7 +3769,14 @@
         '': '',
     };
 
-    const HorizontalLayout = JSX(({ className = '', gap = 'XS', isPadding = false, version = 'transparent', isTheme = false, ...rest }) => (jsx(BlockWrapper, { className: style('relative', 'grid grid-cols-12', gapStyles[gap], className), defaultPadding: isPadding ? 'p-6xl' : '', version: version, isTheme: isTheme, ...rest, children: renderChildren(rest) })));
+    const HorizontalLayout = JSX(({ className = '', gap = 'XS', isPadding = false, version = 'transparent', isTheme = false, isCardBorder, ...rest }) => (jsx(BlockWrapper, { className: style('relative', 'grid grid-cols-12', gapStyles[gap], className), defaultPadding: isPadding ? 'p-6xl' : '', version: version, isTheme: isTheme, ...rest, children: renderChildren({
+            ...rest,
+            extraProps: {
+                className: isCardBorder
+                    ? 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider'
+                    : '',
+            },
+        }) })));
     HorizontalLayout.childrenTypes = {
         exclude: ['HorizontalLayout'],
     };
@@ -3883,7 +3883,7 @@
     const renderInvestmentColumn = (column, i, arr) => {
         const isSecondColumn = i === 1;
         const isLastColumn = i === arr.length - 1;
-        return (jsx("div", { className: `${getColumnClasses(isSecondColumn, isLastColumn, column.cells)}`, children: column.cells?.length ? (jsx("div", { className: `w-full ${isLastColumn ? 'border-4 border-green-more-dark p-2xs min-w-[292px]' : ''}`, children: column.cells.reverse().map(renderInvestmentCell) })) : null }, `column_${i}`));
+        return (jsx("div", { className: `${getColumnClasses(isSecondColumn, isLastColumn, column.cells)}`, children: column.cells?.length ? (jsx("div", { className: `w-full ${isLastColumn ? 'border-4 border-green-more-dark p-2xs min-w-72' : ''}`, children: column.cells.reverse().map(renderInvestmentCell) })) : null }, `column_${i}`));
     };
     const getColumnClasses = (isSecondColumn, isLastColumn, cells = []) => [
         cells.length ? 'flex-1' : 'flex-0',
@@ -3957,6 +3957,51 @@
         return (jsx(BlockWrapper, { className: style('min-h-80', className), padding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-6xl", title: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', AlignText[alignTitle]) })) : null, rightImage: image?.src ? jsx(Img, { className: "hidden lg:block", image: image }) : null, buttons: buttonsConditionStyle(buttons), children: [renderDescription$1(description), jsxs("div", { className: "flex flex-1 flex-wrap gap-m items-center", children: [qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList$1(items), image?.src ? jsx(Img, { className: "lg:hidden", image: image }) : null] })] }) }));
     });
 
+    const badgeBgStyleMap = {
+        primary: 'bg-white/30',
+        secondary: 'bg-main-divider',
+    };
+    const badgeTextColorStyleMap = {
+        primary: 'text-white',
+        secondary: 'text-secondary-text',
+    };
+    const Badge = JSX(({ count, version = 'secondary' }) => {
+        return (jsx("div", { className: style('w-6 h-6 rounded-full flex items-center justify-center', badgeBgStyleMap[version]), children: jsx(Text, { size: "text-xs", color: badgeTextColorStyleMap[version], children: count }) }));
+    });
+
+    const getBadgeCount = (blocks = [], filter = {}) => blocks.filter(({ content = {} }) => checkShouldRenderBlock(filter, content)).length;
+
+    const scalarCmp = (a, b) => a === b;
+    const arrCmp = (cmp = scalarCmp) => (a, b) => a === b || Boolean(a && b && a.length === b.length && a.every((_, i) => cmp(_, b[i])));
+    const objCmp = (cmp) => (a, b) => a === b ||
+        Boolean(a &&
+            b &&
+            Object.keys(a).length === Object.keys(b).length &&
+            Object.entries(a).every(([key, value]) => cmp(value, b[key])));
+    function combineBoolCmps(...comparators) {
+        return (a, b) => comparators.some((cmp) => cmp(a, b));
+    }
+
+    const hotFilterRecordCmp = objCmp(combineBoolCmps(scalarCmp, arrCmp()));
+
+    const EMPTY_ARR = [];
+    const EMPTY_OBJ = {};
+    const useHotFilters = ({ hotFilters = EMPTY_ARR, filtrationState = EMPTY_OBJ, blocks = EMPTY_ARR, onFiltrationStateChange, }) => {
+        const activeItemIndex = useMemo(() => Math.max(0, hotFilters.findIndex((_) => hotFilterRecordCmp(_.filter, filtrationState))), [hotFilters, filtrationState]);
+        const items = useMemo(() => hotFilters.map((_) => ({
+            text: _.text,
+            appendRight: (jsx(Badge, { version: _ === hotFilters[activeItemIndex] ? 'primary' : 'secondary', count: getBadgeCount(blocks, _.filter) })),
+        })), [hotFilters, blocks, activeItemIndex]);
+        const handleChange = useCallback((_) => {
+            onFiltrationStateChange(hotFilters[items.indexOf(_)].filter);
+        }, [hotFilters, items]);
+        return {
+            value: items[activeItemIndex],
+            items: items,
+            onChange: handleChange,
+        };
+    };
+
     const tabPaddingStyleMap = {
         default: 'px-xs',
         underlined: 'px-m',
@@ -3980,8 +4025,8 @@
     };
     const TabItemInner = JSX(({ tag = 'div', item = {}, isActive, type = 'default', onClick }) => {
         const Tag = tag;
-        const { text, ...link } = item;
-        return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), role: "tab", "aria-selected": isActive, onClick: onClick, ...link, children: jsx("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), children: jsx(Text, { size: "text-m", children: text }) }) }));
+        const { text, appendRight, ...link } = item;
+        return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), role: "tab", "aria-selected": isActive, onClick: onClick, ...link, children: jsxs("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), children: [jsx(Text, { size: "text-m", children: text }), appendRight ? jsx("div", { className: "ml-xs", children: appendRight }) : null] }) }));
     });
 
     const TabItem = JSX((props) => props?.item?.href ? jsx(LinkTabItem, { ...props }) : jsx(ButtonTabItem, { ...props }));
@@ -4005,40 +4050,22 @@
 
     const TabsControl = JSX(({ className, tabsType = 'default', items = [], value, onChange }) => (jsx("div", { className: style('flex gap-x-2xs overflow-x-auto no-scrollbar', className), role: "tablist", children: items.map(renderTab(value, onChange, tabsType)) })));
 
-    const scalarCmp = (a, b) => a === b;
-    const arrCmp = (cmp = scalarCmp) => (a, b) => a === b || Boolean(a && b && a.length === b.length && a.every((_, i) => cmp(_, b[i])));
-    const objCmp = (cmp) => (a, b) => a === b ||
-        Boolean(a &&
-            b &&
-            Object.keys(a).length === Object.keys(b).length &&
-            Object.entries(a).every(([key, value]) => cmp(value, b[key])));
-    function combineBoolCmps(...comparators) {
-        return (a, b) => comparators.some((cmp) => cmp(a, b));
-    }
-
-    const hotFilterRecordCmp = objCmp(combineBoolCmps(scalarCmp, arrCmp()));
-
     const initialFiltrationState = {
         categories: [],
         extraOptions: [],
         propertyType: [],
         stage: [],
     };
-    const MortgageFiltration = JSX(({ className, hotFilters = [], filtrationSchema = {}, resetButton, ...rest }) => {
+    const MortgageFiltration = JSX(({ className, hotFilters, filtrationSchema = {}, resetButton, ...rest }) => {
         const [filtrationState, { field, reset, update: replaceFiltrationState }] = useForm(initialFiltrationState);
-        const tabsControlItems = useMemo(() => hotFilters.map(({ text }) => ({
-            text,
-        })), [hotFilters]);
-        const [hotFilterIndex, setHotFilterIndex] = useState(0);
-        const handleHotFilterSelect = useCallback((_) => {
-            setHotFilterIndex(tabsControlItems.indexOf(_));
-            replaceFiltrationState(hotFilters[tabsControlItems.indexOf(_)].filter || initialFiltrationState);
-        }, [hotFilters, tabsControlItems]);
-        useEffect(() => {
-            const suggestedHotFilterIndex = hotFilters.findIndex((_) => hotFilterRecordCmp(_.filter, filtrationState));
-            setHotFilterIndex(suggestedHotFilterIndex !== -1 ? suggestedHotFilterIndex : 0);
-        }, [hotFilters, filtrationState]);
-        return (jsxs(BlockWrapper, { className: style('space-y-2xs', className), defaultPadding: "p-0", version: "transparent", ...rest, children: [jsx(TabsControl, { className: "mb-2xs", items: tabsControlItems, value: tabsControlItems[hotFilterIndex], onChange: handleHotFilterSelect }), renderFiltrationForm({ field, reset, filtrationSchema, resetButton }), jsx(BaseFiltrationInner, { filtrationState: filtrationState, ...rest })] }));
+        const handleFiltrationStateChange = useCallback((_ = initialFiltrationState) => replaceFiltrationState(_), []);
+        const tabsControlProps = useHotFilters({
+            hotFilters,
+            filtrationState,
+            blocks: rest.block?.blocks,
+            onFiltrationStateChange: handleFiltrationStateChange,
+        });
+        return (jsxs(BlockWrapper, { className: style('space-y-2xs', className), defaultPadding: "p-0", version: "transparent", ...rest, children: [jsx(TabsControl, { ...tabsControlProps }), renderFiltrationForm({ field, reset, filtrationSchema, resetButton }), jsx(BaseFiltrationInner, { filtrationState: filtrationState, ...rest })] }));
     });
     MortgageFiltration.childrenTypes = ['ProductTile'];
     MortgageFiltration.childSchema = (content) => content?.filtrationSchema || {};
@@ -5234,7 +5261,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-3xl sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.13.6";
+    const packageVersion = "0.13.8";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;