@redneckz/wildless-cms-uni-blocks 0.10.10 → 0.11.0

package/bundle/bundle.umd.js

@@ -337,7 +337,7 @@
         transparent: 'bg-transparent text-primary-text',
         '': '',
     };
-    const BlockWrapper = JSX(({ className = '', version = 'primary', isTheme = true, block, tag = 'section', role, children, }) => {
+    const BlockWrapper = JSX(({ className, version = 'primary', isTheme = true, block, tag = 'section', role, children }) => {
         const Tag = tag;
         const ref = useBlockIntersectionObserver(block);
         const [isHidden, setHidden] = useState(false);
@@ -1181,7 +1181,7 @@
         return description?.items && description.items.length > 0 ? (jsx("ul", { className: listStyleType, children: description.items.map((_, i) => (jsx("li", { children: _ }, `benefitListItem-${i}`))) })) : null;
     };
 
-    const renderButtonsSection = (buttons, { className = '', buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
+    const renderButtonsSection = (buttons, { className = '', buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-2' : 'flex-wrap gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
     const renderButton = (buttonClassName = '') => (button, index) => {
         const { text, icon, iconRight, version, ...rest } = button || {};
         const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
@@ -1328,13 +1328,13 @@
 
     const CalculatorValueBlock = JSX(({ title, value, postfix = '', prefix, className = '' }) => (jsxs("div", { className: style('mb-7', className), children: [title ? (jsx(Text, { size: "text-l-light", color: "text-secondary-text", children: title })) : null, value ? (jsx("div", { children: jsxs(Text, { size: "text-h3", children: [prefix, " ", toLocalNumberFormat(2)(Math.round(value)), " ", postfix] }) })) : (jsx("div", { children: jsx(Text, { size: "text-h3", children: "-" }) }))] })));
 
-    const DEFAULT_MIN_SUM = 10000;
-    const DEFAULT_MAX_SUM = 5000000;
+    const DEFAULT_MIN_SUM$1 = 10000;
+    const DEFAULT_MAX_SUM$1 = 5000000;
     const CREDIT_DEFAULT_SUM = 200000;
     const DEPOSIT_DEFAULT_SUM = 20000;
-    const DEFAULT_MIN_MONTHS = 13;
-    const DEFAULT_MAX_MONTHS = 60;
-    const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS - DEFAULT_MIN_MONTHS) / 2);
+    const DEFAULT_MIN_MONTHS$1 = 13;
+    const DEFAULT_MAX_MONTHS$1 = 60;
+    const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS$1 - DEFAULT_MIN_MONTHS$1) / 2);
     const BUSINESS_DEFAULT_SUM = 100000;
     const BUSINESS_MIN_DAYS = 1;
     const BUSINESS_MAX_DAYS = 1095;
@@ -1345,10 +1345,10 @@
     const MONTHS_IN_YEAR = 12;
     const MONTHLY_INTEREST_RATE = MONTHS_IN_YEAR * 100;
     const DEFAULT_CREDIT_CALCULATOR_PARAMS = {
-        minSum: DEFAULT_MIN_SUM,
-        maxSum: DEFAULT_MAX_SUM,
-        minMonths: DEFAULT_MIN_MONTHS,
-        maxMonths: DEFAULT_MAX_MONTHS,
+        minSum: DEFAULT_MIN_SUM$1,
+        maxSum: DEFAULT_MAX_SUM$1,
+        minMonths: DEFAULT_MIN_MONTHS$1,
+        maxMonths: DEFAULT_MAX_MONTHS$1,
         rate: 12.5,
         isSalaryClient: false,
         isPensionClient: false,
@@ -2232,22 +2232,14 @@
         return (jsx(BlockWrapper, { className: style('w-[365px]', className), ...rest, children: jsxs(LinkWrapper, { className: "flex flex-col", href: href, target: target, children: [icon?.icon ? jsx(ImgInner, { image: icon }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left pt-3 mb-2", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Text, { font: "font-light", size: "text-m", color: "text-secondary-text", children: description }) })) : null] }) }));
     });
 
-    const BaseTile = JSX(({ className = '', title = '', buttons, image, children }) => (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { className: "h-full", children: children }), buttons ? jsx("div", { className: "mt-auto pt-8", children: buttons }) : null] }), image] })] })));
+    const BaseTile = JSX(({ className, title = '', insetTitle = '', buttons, leftImage, rightImage, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col font-sans', className), children: [backImage ? jsx("div", { className: "absolute bottom-0 right-0 z-0", children: backImage }) : null, title, jsxs("div", { className: "grow relative flex flex-wrap justify-between items-stretch gap-8", children: [leftImage, jsxs("div", { className: style('flex flex-col gap-8', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), buttons] }), rightImage ? jsx("div", { className: "sm:-order-1 md:-order-1", children: rightImage }) : null] })] })));
 
     const getItemListFontSize = (colValue) => (colValue === 1 ? 'text-h6' : 'text-l');
     const cardColumnsModeStyleMap = {
         1: 'flex-col',
         2: 'gap-x-10 flex-wrap',
     };
-    const CarouselInvestmentCard = JSX(({ additionalDescription, cardsList = [], className = '', columnsMode = 1, description, image, title, ...rest }) => {
-        const tileTitle = title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
-        const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
-        return (jsx(BlockWrapper, { className: [
-                'relative box-border text-left p-9 w-[697px]',
-                'border border-solid border-gray group-data-secondary:border-white/50',
-                className,
-            ].join(' '), ...rest, children: jsxs(BaseTile, { title: tileTitle, image: tileImage, children: [jsxs("div", { className: "flex justify-between mb-4", children: [description ? (jsx("div", { className: "w-1/3", children: jsx(Text, { size: "text-h6", children: description }) })) : null, additionalDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null] }), cardsList.length ? (jsx("ul", { className: `list-none m-0 p-0 flex gap-y-2 ${cardColumnsModeStyleMap[columnsMode]}`, children: renderCardList(cardsList, columnsMode) })) : null] }) }));
-    });
+    const CarouselInvestmentCard = JSX(({ additionalDescription, cardsList = [], className = '', columnsMode = 1, description, image, title, ...rest }) => (jsx(BlockWrapper, { className: style('box-border text-left p-9 w-[697px]', 'border border-solid border-gray group-data-secondary:border-white/50', className), ...rest, children: jsxs(BaseTile, { title: title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-3.5 z-10", title: title }) : null, backImage: image?.src ? jsx(ImgInner, { className: "m-0", image: image }) : null, children: [jsxs("div", { className: "flex justify-between mb-4", children: [description ? (jsx("div", { className: "w-1/3", children: jsx(Text, { size: "text-h6", children: description }) })) : null, additionalDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null] }), cardsList.length ? (jsx("ul", { className: style('list-none m-0 p-0 flex gap-y-2', cardColumnsModeStyleMap[columnsMode]), children: renderCardList(cardsList, columnsMode) })) : null] }) })));
     const renderCardList = (cardsList, columnsMode) => {
         const CARDS_COUNT_MAP = [4, 9];
         const visibleCardsList = cardsList.slice(0, CARDS_COUNT_MAP[columnsMode - 1]);
@@ -2276,11 +2268,11 @@
     };
 
     const DOT_SIZE_MAP = {
-        L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4',
-        M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3',
-        S: 'w-1 h-1 min-w-1 min-h-1 mr-2',
+        L: 'w-1.5 h-1.5 mr-4',
+        M: 'w-1.5 h-1.5 mr-3',
+        S: 'w-1 h-1 mr-2',
     };
-    const ListItem = JSX(({ className = '', isDotted = true, children, size = 'M' }) => (jsxs("div", { className: `font-sans flex items-baseline ${className}`, role: "listitem", children: [isDotted ? (jsx("div", { children: jsx("div", { className: `rounded-full align-middle inline-block bg-primary-text group-data-secondary:bg-white ${DOT_SIZE_MAP[size]}` }) })) : null, jsx("span", { children: children })] })));
+    const ListItem = JSX(({ className, isDotted = true, children, size = 'M' }) => (jsxs("div", { className: style('font-sans flex', className), role: "listitem", children: [isDotted ? (jsx("div", { className: "shrink-0", children: jsx("div", { className: style('align-middle inline-block rounded-full bg-primary-text group-data-secondary:bg-white', DOT_SIZE_MAP[size]) }) })) : null, jsx("span", { children: children })] })));
 
     const TEXT_SIZE_MAP = {
         S: 'text-l-light',
@@ -2292,7 +2284,7 @@
         M: 'ml-3',
         L: 'ml-4',
     };
-    const List = JSX(({ className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: `text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text ${TEXT_SIZE_MAP[listItemSize]} ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''} ${className}`, role: "list", children: items.map((item, i) => (jsx(ListItem, { className: itemClassName, isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
+    const List = JSX(({ className, hasIndent, isDotted, items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: style('flex flex-col gap-2 text-left text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text', TEXT_SIZE_MAP[listItemSize], hasIndent ? ITEM_INDENT_MAP[listItemSize] : '', className), role: "list", children: items.map((item, i) => (jsx(ListItem, { isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
 
     const CarouselProductCard = JSX(({ additionalDescription, align = 'text-center', button = {}, className = '', description, headlineSmallVersion = 'H6', href, icon, isDotted = true, isFullWidth = true, items = [], target, title, version = 'primary', ...rest }) => {
         return (jsxs(BlockWrapper, { className: style('h-full flex flex-col justify-between min-w-[260px]', 'box-border border-solid border border-gray', align, className), version: version, ...rest, children: [jsxs(LinkWrapper, { className: "p-6", href: href, target: target, children: [renderImage$3(icon), renderCardTitle(headlineSmallVersion, title), renderDescription$3(description, title), renderItems(items, isDotted, version), renderAdditionalDescription$1(additionalDescription)] }), renderButtonsSection([button], {
@@ -2304,13 +2296,21 @@
     const renderCardTitle = (headlineSmallVersion, title) => title ? (jsx("div", { children: jsx(Text, { size: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) })) : null;
     const renderDescription$3 = (description, title) => description ? (jsx("div", { className: title ? 'mt-2' : '', children: jsx(Paragraph, { size: "text-l", children: description }) })) : null;
     const renderAdditionalDescription$1 = (additionalDescription) => additionalDescription ? (jsx("div", { className: "mt-auto", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", children: additionalDescription }) })) : null;
-    const renderItems = (items, isDotted, version = 'primary') => items?.length ? (jsx(List, { className: `max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "text-left", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted })) : null;
+    const renderItems = (items, isDotted, version = 'primary') => items?.length ? (jsx(List, { className: style('max-w-[308px] mt-2 text-s', version === 'primary' ? '!text-secondary-text' : ''), items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted })) : null;
 
     const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], href, target, ...rest }) => {
         return (jsx(BlockWrapper, { className: style('border border-gray', className), ...rest, children: jsxs(LinkWrapper, { className: "flex", href: href, target: target, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", children: [icon?.icon ? jsx(ImgInner, { image: icon }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: "mb-3.5", headingType: "h5", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$2) })) : null] })] }) }));
     });
     const renderList$2 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: "text-h6", children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
 
+    const buttonSizeStyles = {
+        default: 'w-14 h-14',
+        small: 'w-12 h-12',
+    };
+    const buttonStylesWithText = (text, buttonSize) => text
+        ? ''
+        : style('group/media flex items-center justify-center box-border', buttonSizeStyles[buttonSize]);
+
     const ICONS_MAP = [
         {
             origins: ['t.me', 'telegram.org'],
@@ -2343,13 +2343,6 @@
             label: 'Youtube',
         },
     ];
-    const buttonSizeStyles = {
-        default: 'w-14 h-14',
-        small: 'w-12 h-12',
-    };
-    const buttonStylesWithText = (text, buttonSize) => text
-        ? ''
-        : `group/media flex items-center justify-center box-border ${buttonSizeStyles[buttonSize]}`;
     const MediaButton = JSX(({ buttonSize = 'default', rounded = false, icon, ...rest }) => {
         const { href, version, text = '' } = rest;
         const { iconMapped, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
@@ -2363,7 +2356,7 @@
     const BORDER_STYLE = 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
 
     const CarouselRecommendationCard = JSX(({ className = '', description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', version = 'primary', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-4", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), jsxs("div", { className: "w-1/2 h-full flex flex-col flex-1 justify-end", children: [items.length ? (jsx(List, { className: "flex flex-col gap-2", itemClassName: "text-l-light", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10", media: socialMedia }) : null] }), renderIconBlock$2(icon)] }) }));
+        return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-4", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), jsxs("div", { className: "w-1/2 h-full flex flex-col flex-1 justify-end", children: [items.length ? jsx(List, { items: items, listItemSize: "S" }) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10", media: socialMedia }) : null] }), renderIconBlock$2(icon)] }) }));
     });
     const renderIconBlock$2 = (icon) => (jsxs("div", { className: "absolute bottom-0 right-0", children: [icon?.icon ? jsx(ImgInner, { image: icon }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }));
 
@@ -2489,6 +2482,124 @@
     const renderBlocks = (info) => (jsx("div", { className: "flex grow basis-0", children: info.map((column, index) => renderBlocksColumn({ column, index })) }));
     const renderBlocksColumn = ({ column, index }) => column ? (jsx("div", { className: "flex flex-col grow basis-0 pr-11 last:pr-0", children: column.map(({ title = '', description, additionalDescription, button }, key) => (jsxs("div", { className: "mt-6 first:mt-0", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "XS", align: "text-left" }), additionalDescription ? (jsx("div", { className: "mt-1.5 opacity-80", children: jsx(Paragraph, { size: "text-m", font: "font-light", children: additionalDescription }) })) : null, button ? jsx(Button, { className: "mt-6", ...button }) : null] }, String(key)))) }, `col-${String(index)}`)) : null;
 
+    const isEmpty = (v) => v === null ||
+        v === undefined ||
+        v === '' ||
+        (Array.isArray(v) && v.length === 0) ||
+        (typeof v === 'object' && Object.keys(v).length === 0);
+
+    const isSingularFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) || isEmpty(target[key]) || pattern[key] === target[key];
+    const isMultipleFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) ||
+        isEmpty(target[key]) ||
+        pattern[key]?.some((_) => target[key]?.includes(_));
+    const isNumberFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) ||
+        isEmpty(target[key]) ||
+        naturalNumber(pattern[key]) <= naturalNumber(target[key]);
+    const isValueInRange = (key, pattern) => (target) => isEmpty(pattern[key]) ||
+        isEmpty(target[key]) ||
+        (naturalNumber(pattern[key]?.min) >= naturalNumber(target[key]?.min) &&
+            naturalNumber(pattern[key]?.min) <= naturalNumber(target[key]?.max));
+    const checkShouldRenderBlock = (pattern, target) => Object.entries(pattern)
+        .map(([key, subPattern]) => {
+        if (typeof subPattern === 'number') {
+            return isNumberFieldMatch(key, pattern);
+        }
+        if (typeof subPattern === 'object') {
+            if ('min' in subPattern && 'max' in subPattern) {
+                return isValueInRange(key, pattern);
+            }
+        }
+        return Array.isArray(subPattern)
+            ? isMultipleFieldMatch(key, pattern)
+            : isSingularFieldMatch(key, pattern);
+    })
+        .every((predicate) => predicate(target));
+    const naturalNumber = (n) => Number(n || 0);
+
+    const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => {
+        return (jsxs("button", { className: style('flex justify-center w-full px-0 py-4 border border-transparent outline-none focus:border-primary-text', disabled
+                ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
+                : 'bg-primary-main text-white hover:bg-primary-hove', className), onClick: onClick, disabled: disabled, "data-theme": dataTheme, children: [jsx("span", { className: "text-h4 pr-3", children: label }), icon ? (jsx(ImgInner, { image: {
+                        icon,
+                        iconVersion: 'white',
+                    }, className: "flex-shrink-0 my-auto", width: "20", height: "20" })) : null] }));
+    });
+    const renderDefaultFoldButton = ({ isUnfolded, onToggle }) => {
+        const labels = ['Развернуть', 'Скрыть'];
+        const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
+        return (jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
+    };
+
+    const ICONS = ['ArrowDownIcon', 'ArrowUpIcon'];
+    const resultsGridStyle = 'grid grid-cols-12 gap-1 border-box';
+    const BaseFiltrationInner = JSX(({ label = '', filtrationState = {}, topItemsCount = 0, block, notFound, ...rest }) => {
+        const blocksToRender = block?.blocks?.filter((b) => checkShouldRenderBlock(filtrationState, b.content || {})) || [];
+        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-1', resultsGridStyle), children: renderBlocksList(visibleBlocks, { ...rest.options, parent: block }) }), jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => {
+                                return (jsx(FoldableSection, { className: style(resultsGridStyle, isUnfolded ? 'mb-1' : ''), 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-2", 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] }));
+    }
+
+    const SlideCheckboxGroup = JSX(({ value, onChange, items = [], multiple }) => {
+        const handleChange = (newValue) => {
+            if (!onChange) {
+                return;
+            }
+            if (multiple) {
+                const hasAlready = value?.includes(newValue);
+                onChange(hasAlready ? (value || []).filter((v) => v !== newValue) : [...(value || []), newValue]);
+            }
+            else {
+                onChange(value === newValue ? '' : newValue);
+            }
+        };
+        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-9 mb-1", children: [jsxs("div", { className: "flex gap-11", children: [children, Object.entries(filtrationSchema).map(renderFormItem(field))] }), resetButton ? (jsx("div", { children: jsx(Button, { className: "w-72 ml-3", onClick: reset, ...resetButton }) })) : null] }));
+    const renderFormItem = (field) => ([key, item]) => {
+        const type = item?.type;
+        switch (type) {
+            case 'array':
+                return renderCheckboxes(key, field)(item);
+            default:
+                return null;
+        }
+    };
+    const renderCheckboxes = (key, field) => (item) => {
+        const options = item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
+            [];
+        return (jsxs("div", { children: [item?.title ? (jsx("div", { className: "mb-4", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: item.title }) })) : null, jsx(SlideCheckboxGroup, { items: options, multiple: true, ...field(key) })] }, key));
+    };
+
+    const initialFiltrationState$1 = {
+        sum: 500,
+        period: {
+            min: 3,
+            max: 36,
+        },
+    };
+    const DEFAULT_MIN_MONTHS = 3;
+    const DEFAULT_MAX_MONTHS = 36;
+    const DEFAULT_MIN_SUM = 500;
+    const DEFAULT_MAX_SUM = 1000000000;
+    const DepositFiltration = JSX(({ className, filtrationSchema = {}, resetButton, sumInput, periodInput, ...rest }) => {
+        const [filtrationState, { field, reset }] = useForm(initialFiltrationState$1);
+        const maxValue = periodInput?.max || DEFAULT_MAX_MONTHS;
+        const Inputs = (jsxs("div", { children: [jsx(CurrencyInput, { label: sumInput?.title, min: DEFAULT_MIN_SUM, max: DEFAULT_MAX_SUM, ...field('sum', { parse: Number, format: String }) }), jsx(InputRange, { title: periodInput?.title, items: ['От 3 мес', 'До 3 лет'], min: periodInput?.min || DEFAULT_MIN_MONTHS, max: maxValue, ...field('period', {
+                        parse: (min) => ({ min, max: maxValue }),
+                        format: ({ min }) => min,
+                    }) })] }));
+        return (jsxs(BlockWrapper, { className: style(className), version: "transparent", ...rest, children: [renderFiltrationForm({ field, reset, filtrationSchema, resetButton, children: Inputs }), jsx(BaseFiltrationInner, { filtrationState: filtrationState, ...rest })] }));
+    });
+    DepositFiltration.childrenTypes = ['ProductTile'];
+    DepositFiltration.childSchema = (content) => content?.filtrationSchema || {};
+
     const renderErrorContent = (error) => {
         if (error?.errorContentType === 'Image' && error?.image) {
             return jsx(ImgInner, { image: error.image });
@@ -2718,83 +2829,6 @@
         return currencies?.filter((_) => _?.currency?.id === 1 || _?.currency?.id === 2) || [];
     };
 
-    const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => {
-        return (jsxs("button", { className: style('flex justify-center w-full px-0 py-5 border border-transparent outline-none focus:border-primary-text', disabled
-                ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
-                : 'bg-primary-main text-white hover:bg-primary-hove', className), onClick: onClick, disabled: disabled, "data-theme": dataTheme, children: [jsx("span", { className: "text-h4 pr-3", children: label }), icon ? (jsx(ImgInner, { image: {
-                        icon,
-                        iconVersion: 'white',
-                    }, className: "flex-shrink-0 my-auto", width: "20", height: "20" })) : null] }));
-    });
-    const renderDefaultFoldButton = ({ isUnfolded, onToggle }) => {
-        const labels = ['Развернуть', 'Скрыть'];
-        const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
-        return (jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
-    };
-
-    const isSingularFieldMatch = (key, pattern) => (target) => pattern[key] === undefined || pattern[key] === target[key];
-    const isMultipleFieldMatch = (key, pattern) => (target) => pattern[key] === undefined || pattern[key]?.every((_) => target[key]?.includes(_));
-    const checkShouldRenderBlock = (pattern, target) => Object.entries(pattern)
-        .map(([key, subPattern]) => Array.isArray(subPattern)
-        ? isMultipleFieldMatch(key, pattern)
-        : isSingularFieldMatch(key, pattern))
-        .every((predicate) => predicate(target));
-
-    const ICONS = ['ArrowDownIcon', 'ArrowUpIcon'];
-    const resultsGridStyle = 'grid grid-cols-12 gap-1 border-box';
-    const FiltrationInner = JSX(({ label = '', filtrationState = {}, topItemsCount = 0, block, notFound, ...rest }) => {
-        const blocksToRender = block?.blocks?.filter((b) => checkShouldRenderBlock(filtrationState, b.content || {})) || [];
-        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-1', resultsGridStyle), children: renderBlocksList(visibleBlocks, { ...rest.options, parent: block }) }), jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => {
-                                return (jsx(FoldableSection, { className: style(resultsGridStyle, isUnfolded ? 'mb-1' : ''), 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-2", 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] }));
-    }
-
-    const SlideCheckboxGroup = JSX(({ value, onChange, items = [], multiple }) => {
-        const handleChange = (newValue) => {
-            if (!onChange) {
-                return;
-            }
-            if (multiple) {
-                const hasAlready = value?.includes(newValue);
-                onChange(hasAlready ? (value || []).filter((v) => v !== newValue) : [...(value || []), newValue]);
-            }
-            else {
-                onChange(value === newValue ? '' : newValue);
-            }
-        };
-        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 renderFormItem = (filtrationSchema, field) => (key) => {
-        const item = filtrationSchema[key];
-        const type = item?.type;
-        switch (type) {
-            case 'array':
-                return renderCheckboxes(key, field)(item);
-            default:
-                return null;
-        }
-    };
-    const renderCheckboxes = (key, field) => (item) => {
-        const options = item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
-            [];
-        return (jsxs("div", { children: [item?.title ? (jsx("div", { className: "mb-4", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: item.title }) })) : null, jsx(SlideCheckboxGroup, { items: options, multiple: true, ...field(key) })] }, key));
-    };
-
-    const initialFiltrationState = {};
-    const Filtration = JSX(({ className, filtrationSchema = {}, resetButton, ...rest }) => {
-        const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
-        return (jsxs(BlockWrapper, { className: style(className), version: "transparent", ...rest, children: [jsxs("form", { className: "flex justify-between bg-white p-9 mb-1", children: [jsx("div", { className: "flex gap-11", children: Object.keys(filtrationSchema).map(renderFormItem(filtrationSchema, field)) }), resetButton ? (jsx("div", { children: jsx(Button, { className: "w-72 ml-3", onClick: reset, ...resetButton }) })) : null] }), jsx(FiltrationInner, { filtrationState: filtrationState, ...rest })] }));
-    });
-    Filtration.childrenTypes = ['ProductTile'];
-    Filtration.childSchema = (content) => content?.filtrationSchema || {};
-
     const EMPTY_VALUE$1 = {};
     function useSWRResource(filename, fallback = {}) {
         const { data } = useAsyncData(`/wcms-resources/${filename}.json`, fetchJSONUnsafe, {
@@ -3063,11 +3097,11 @@
         return (jsx("a", { className: style('text-l-light text-secondary-text hover:text-primary-main no-underline', 'overflow-x-hidden overflow-ellipsis whitespace-nowrap'), href: href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }));
     });
 
-    const SearchInput = JSX(({ className, isMobile, value, autoFocus, onChange, onFocus }) => {
+    const SearchInput = JSX(({ className, value, autoFocus, onChange, onFocus }) => {
         const handleChange = useCallback((ev) => {
             onChange && onChange(ev.target?.value || '');
         }, [onChange]);
-        return (jsxs("div", { className: style('font-sans relative', className), role: "form", children: [jsx("div", { className: "absolute h-full flex items-center pl-4 pointer-events-none", children: jsx(ImgInner, { image: { icon: 'LoupeIcon' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-12 pl-12 w-full text-l text-black outline-none box-border', 'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text', isMobile ? '' : 'h-full'), value: value, type: "text", name: "search-bar-input", placeholder: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", autoFocus: autoFocus, onChange: handleChange, onFocus: onFocus })] }));
+        return (jsxs("div", { className: style('font-sans relative', className), role: "form", children: [jsx("div", { className: "absolute h-full flex items-center pl-4 pointer-events-none", children: jsx(ImgInner, { image: { icon: 'LoupeIcon' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-12 pl-12 w-full text-l text-black outline-none box-border', 'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'), value: value, type: "text", name: "search-bar-input", placeholder: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", autoFocus: autoFocus, onChange: handleChange, onFocus: onFocus })] }));
     });
 
     const SEARCH_DIALOG_ID = 'search';
@@ -3099,7 +3133,7 @@
     }
 
     const MIN_QUERY_LEN = 3;
-    const SearchBarInner = JSX(({ className, isMobile }) => {
+    const SearchBar$1 = JSX(({ className }) => {
         const [value, setValue] = useState('');
         const resetQueryOnDialogClose = useCallback(() => setValue(''), []);
         useDialogHandlers({ onClose: resetQueryOnDialogClose });
@@ -3110,12 +3144,10 @@
                 open(_);
             }
         }, []);
-        return (jsxs("div", { className: className, children: [jsx(SearchInput, { isMobile: isMobile, value: value, onChange: handleInitialInputChange }), isMobile ? (jsx(CloseButton, { className: "absolute top-2 right-3", onClick: resetQueryOnDialogClose })) : null] }));
+        return (jsxs("div", { className: className, children: [jsx(SearchInput, { value: value, onChange: handleInitialInputChange }), jsx(CloseButton, { className: "absolute top-2 right-3 sm:hidden", onClick: resetQueryOnDialogClose })] }));
     });
     const isQueryLongEnough = (_) => _ && _.length >= MIN_QUERY_LEN;
 
-    const SearchBar$1 = JSX((props) => jsx(SearchBarInner, { ...props }));
-
     const Contacts = JSX(({ className = '', items, hasButton }) => (jsxs("div", { className: className, children: [items?.length ? items.map(renderContact) : null, hasButton ? (jsx(Button, { version: "primary", className: "mb-6 w-full", href: "https://www.rshb.ru/feedback/question/", target: "_blank", ariaLabel: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C", text: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C" })) : null] })));
     const renderContact = (item, index) => {
         const { type, text, description } = item;
@@ -3133,10 +3165,12 @@
     };
     const formatTel = (s) => s.replaceAll(/\D/g, '');
 
+    const horizontalNavigationLinkStyles = 'text-secondary-text';
+
     const HorizontalNavigationLink = JSX(({ className = '', index, text, ...rest }) => {
         const link = useLink();
         const { href, target, onClick } = link(rest);
-        return (jsx("a", { className: `text-secondary-text hover:text-primary-main inline-block no-underline ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` }));
+        return (jsx("a", { className: style(horizontalNavigationLinkStyles, className), href: href, target: target, onClick: onClick, children: text || `Документ ${index}` }));
     });
 
     const HorizontalNavigation = JSX(({ className = '', links }) => {
@@ -3149,7 +3183,9 @@
         return (jsx("a", { className: `text-xs-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-5", children: jsx("span", { className: "text-xs-light text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex justify-start items-start gap-5 pt-2.5", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ..._ }, String(i)))) })) : null] })));
+    const textInformationTextSize = 'text-xs-light';
+
+    const TextInformation = JSX(({ className = '', links }) => (jsxs("div", { className: className, children: [jsx("div", { className: "pt-5 sm:py-4", children: jsx(Text, { size: textInformationTextSize, 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 justify-start items-start gap-5 pt-2.5", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ..._ }, String(i)))) })) : null] })));
 
     const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
     const Footer = JSX(({ className = '', ...rest }) => {
@@ -3532,9 +3568,7 @@
         return (jsx("button", { type: "button", onClick: onClick, "aria-label": title, className: `box-border px-4 py-3 text-m-light ${btnClassName}`, children: title }, String(i)));
     }
 
-    function joinList(sep) {
-        return (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]), []);
-    }
+    const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
 
     const investmentCellColorMap = {
         yellow: 'bg-yellow',
@@ -3555,7 +3589,7 @@
         if (investmentZeroColumn) {
             colums.unshift(investmentZeroColumn);
         }
-        return (jsx(BlockWrapper, { className: `px-9 py-12 ${className}`, ...rest, children: jsxs("div", { className: "container text-m-light", children: [colums?.length ? (jsxs("div", { children: [jsxs("div", { className: "flex items-end relative pl-9 pr-5 text-white", children: [joinList(jsx("div", { className: "w-px h-4 bg-gray" }))(colums.map(renderInvestmentColumn)), jsx("div", { className: "absolute right-[30px] w-px h-4 bg-gray" })] }), jsx("div", { className: "border-t border-gray -mt-2 ml-9 mr-8" }), jsx("div", { className: "flex justify-between text-primary-text mt-3 -mx-10", children: colums.map(renderInvestmentColumnTitle) })] })) : null, items?.length ? (jsx(List, { className: "mt-9 text-l-light max-w-[657px]", items: items, itemClassName: "mb-[7px]", isDotted: isDotted })) : null] }) }));
+        return (jsx(BlockWrapper, { className: `px-9 py-12 ${className}`, ...rest, children: jsxs("div", { className: "container text-m-light", children: [colums?.length ? (jsxs("div", { children: [jsxs("div", { className: "flex items-end relative pl-9 pr-5 text-white", children: [joinList(jsx("div", { className: "w-px h-4 bg-gray" }))(colums.map(renderInvestmentColumn)), jsx("div", { className: "absolute right-[30px] w-px h-4 bg-gray" })] }), jsx("div", { className: "border-t border-gray -mt-2 ml-9 mr-8" }), jsx("div", { className: "flex justify-between text-primary-text mt-3 -mx-10", children: colums.map(renderInvestmentColumnTitle) })] })) : null, items?.length ? (jsx(List, { className: "mt-9 max-w-[657px]", items: items, isDotted: isDotted, listItemSize: "M" })) : null] }) }));
     });
     const renderInvestmentColumn = (column, i, arr) => {
         const isSecondColumn = i === 1;
@@ -3629,10 +3663,18 @@
                     }), children: [renderDescription$2(description), jsxs("div", { className: "flex flex-1 items-center mb-3", children: [qr?.src ? (jsx("div", { className: `flex justify-center mr-5 bg-white rounded-md ${containerStyle}`, children: jsx(ImgInner, { className: "w-fit", image: qr }) })) : null, renderList$1(items)] })] }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(ImgInner, { image: image }) })) : null] }));
     });
     const renderList$1 = (items) => {
-        return items?.length ? (jsx(List, { items: items, itemClassName: "text-l-light mb-2 last:mb-0" })) : (jsx("span", { className: "text-m-light text-secondary-text", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
+        return items?.length ? (jsx(List, { items: items, listItemSize: "S" })) : (jsx("span", { className: "text-m-light text-secondary-text", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
     };
     const renderDescription$2 = (description) => description ? jsx("p", { className: "text-xl-light mb-5 pt-0.5", children: description }) : null;
 
+    const initialFiltrationState = {};
+    const MortgageFiltration = JSX(({ className, filtrationSchema = {}, resetButton, ...rest }) => {
+        const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
+        return (jsxs(BlockWrapper, { className: style(className), version: "transparent", ...rest, children: [renderFiltrationForm({ field, reset, filtrationSchema, resetButton }), jsx(BaseFiltrationInner, { filtrationState: filtrationState, ...rest })] }));
+    });
+    MortgageFiltration.childrenTypes = ['ProductTile'];
+    MortgageFiltration.childSchema = (content) => content?.filtrationSchema || {};
+
     const mockPoints = [
         { coords: [55.77, 37.46], text: 'Трактир' },
         { coords: [55.66, 37.48], text: 'Трактор' },
@@ -3991,11 +4033,7 @@
 
     const ParagraphBlock = JSX(({ text, size, align, font, children, ...rest }) => (jsx(BlockWrapper, { ...rest, children: jsx(Paragraph, { size: size, align: align, font: font, children: text || children }) })));
 
-    const BenefitItem = JSX((props) => {
-        const { className = '', icon, label, description, version = 'primary', benefitsVersion = 'normal', } = props;
-        const listItemAlign = description ? 'items-start' : 'items-center';
-        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(version, benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? (jsx("div", { className: "text-h6 text-primary-text group-data-secondary:text-white", children: label })) : null, description ? (jsx("div", { className: "text-m-light text-secondary-text group-data-secondary:text-white", children: description })) : null] })] }));
-    });
+    const BenefitItem = JSX(({ className, icon, label, description, version = 'primary', benefitsVersion = 'normal' }) => (jsxs("div", { className: style('flex gap-5', description ? 'items-start' : 'items-center', className), children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(version, benefitsVersion), children: jsx(ImgInner, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null, jsxs("div", { children: [label ? (jsx(Text, { size: "text-h6", color: "text-primary-text group-data-secondary:text-white", children: label })) : null, description ? (jsx(Paragraph, { size: "text-m-light", color: "text-secondary-text group-data-secondary:text-white", children: description })) : null] })] })));
     function getBenefitIconBgStyle(version, benefitsVersion) {
         let bgColorStyle = 'bg-primary-main text-black';
         if (version === 'secondary') {
@@ -4073,64 +4111,45 @@
     const renderShimmerItem = (width, index) => (jsx("div", { style: { width: `${width || 100}%` }, className: "h-4 mt-2 bg-secondary-light" }, String(index)));
     const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
 
-    const Breadcrumb = JSX(({ className = '', children, ...props }) => {
-        const link = useLink();
-        const { text, href, target, onClick } = link(props);
-        return href ? (jsx("a", { className: `no-underline ${className}`, href: href, target: target, onClick: onClick, children: jsx("span", { className: className, children: text || children }) })) : (jsx("span", { className: className, children: text || children }));
-    });
-
-    const renderBenefit$1 = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => (jsx(BenefitItem, { icon: icon, label: label, description: description, version: version, benefitsVersion: benefitsVersion }, String(i)));
+    const renderBenefit$1 = (version = 'primary', benefitsVersion = 'normal') => (props, i) => jsx(BenefitItem, { version: version, benefitsVersion: benefitsVersion, ...props }, String(i));
 
-    const ProductBlockInner = JSX(({ className = '', title, headlineVersion = 'L', description, benefitsCountOfRow = 3, benefits, benefitsVersion, buttons, image, __html, items, version = 'primary', isDotted = true, textBlockClassName = '', directionRight = true, }) => {
-        const benefitsCount = benefits?.filter((_) => _.label)?.length;
-        const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCountOfRow);
-        return (jsxs("div", { className: style('flex grow justify-between items-stretch h-full', className), children: [image?.src ? (jsx(ImgInner, { className: style('mt-[-50px]', directionRight ? 'order-2' : ''), image: image })) : null, jsxs("div", { className: style('flex flex-col', textBlockClassName), children: [jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left" }), jsxs(BaseTile, { buttons: renderButtonsSection(buttons), children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits?.map(renderBenefit$1(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", isDotted: isDotted })) : null] })] })] }));
+    const ProductBlockInner = JSX(({ className, version = 'primary', headlineVersion = 'L', title, description, benefits, benefitsVersion, items, isDotted = true, __html, buttons, image, directionRight = true, }) => {
+        const benefitsWithLabel = benefits?.filter((_) => _.label);
+        const img = image?.src ? jsx(ImgInner, { className: "mt-[-50px]", image: image }) : null;
+        return (jsxs(BaseTile, { className: className, insetTitle: jsx(Headline, { className: "max-w-[600px] xl:max-w-[800px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left", isPadding: false }), ...(directionRight ? { rightImage: img } : { leftImage: img }), buttons: renderButtonsSection(buttons), children: [benefitsWithLabel?.length ? (jsx("div", { className: "flex flex-wrap gap-6", children: benefitsWithLabel.map(renderBenefit$1(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? jsx(List, { className: "mt-5", items: items, isDotted: isDotted }) : null] }));
     });
-    const getBenefitsContainerStyles = (benefitsCountOfRow = 2) => `gap-6 mt-6 ${benefitsCountOfRow > 2
-    ? 'inline-grid grid-cols-[auto_auto_auto]'
-    : 'inline-grid grid-cols-[auto_auto]'}`;
 
-    function renderBackwardButton(button, version, className) {
-        const { text, href, target } = button;
+    function renderBackwardButton({ text, href, target, icon }, version) {
         const iconVersion = version === 'primary' ? 'white' : 'black';
-        const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
-        return (jsxs("div", { className: style('flex items-center', className), children: [jsx(Button, { version: version, rounded: true, className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3", ariaLabel: text, href: href, target: target, children: jsx(ImgInner, { className: "w-4 h-4", image: { ...backwardIcon, iconVersion: backwardIcon.iconVersion || iconVersion } }) }), text ? (jsx(Button, { version: "link", text: text, href: href, target: target, ariaLabel: text })) : null] }));
+        const commonProps = { text, href, target, ariaLabel: text };
+        return (jsxs("div", { className: "flex items-center gap-3", children: [jsx(Button, { className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center", version: version, rounded: true, ...commonProps, children: jsx(ImgInner, { className: "w-4 h-4", image: {
+                            ...icon,
+                            icon: icon?.icon || 'ArrowLeftIcon',
+                            iconVersion: icon?.iconVersion || iconVersion,
+                        } }) }), jsx(Button, { version: "link", ...commonProps })] }));
     }
 
-    const breadcrumbStyle = 'text-secondary-text group-data-secondary:text-white/80';
-    const ProductBlock = JSX((props) => {
-        const { className = '', breadcrumbs, backwardButton, version = 'primary', ...rest } = props;
-        const buttonVersion = version === 'primary' ? version : 'white';
-        return (jsxs(BlockWrapper, { className: style('overflow-hidden p-default flex flex-col box-border min-h-[454px]', className), version: version, ...rest, children: [backwardButton?.text ? renderBackwardButton(backwardButton, buttonVersion) : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs-light mb-6", children: joinList(jsx("span", { className: style('mx-2', breadcrumbStyle), children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { className: breadcrumbStyle, ...breadcrumb }, String(i))))) })) : null, jsx(ProductBlockInner, { className: "mt-10", version: version, ...rest })] }));
-    });
+    const ProductBlock = JSX(({ className, backwardButton, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden p-default flex flex-col gap-10 box-border', className), ...rest, children: [backwardButton?.text
+                ? renderBackwardButton(backwardButton, !rest.version || rest.version === 'primary' ? 'primary' : 'white')
+                : null, jsx(ProductBlockInner, { className: "grow", ...rest })] })));
 
     const ProductGallery = JSX(({ className = '', slides = [], ...rest }) => {
-        const galleryNav = slides.map((s) => s.nav);
-        const galleryBlocks = slides.map((s) => s.productBlock);
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-        const handleActiveSlideIndex = useCallback((_) => setActiveSlideIndex(_), []);
-        return (jsxs(BlockWrapper, { className: `box-border pt-12 overflow-hidden relative w-100 mb-6 ${className}`, ...rest, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest }, i)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28", children: galleryNav.map((slide, i) => renderNavButton({
-                        slide,
-                        i,
-                        isActive: Boolean(i === activeSlideIndex),
-                        onClick: () => handleActiveSlideIndex(i),
-                    })) })] }));
+        return (jsxs(BlockWrapper, { className: style('box-border py-default overflow-hidden', className), ...rest, children: [jsx("div", { className: "flex duration-1000", style: { transform: `translateX(-${activeSlideIndex * 100}%)` }, role: "list", children: slides.map(({ productBlock }, i) => (jsx("div", { className: "box-border grow-0 shrink-0 basis-full", role: "listitem", children: jsx(ProductBlockInner, { className: "pl-default h-full", headlineVersion: "XXL", ...productBlock, ...rest }) }, String(i)))) }), jsx("div", { className: "h-28 px-6 mt-6 -mb-6 flex items-center gap-2 box-border", children: slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex })) })] }));
     });
-    function renderProductBlock(block, i) {
-        return (jsx("section", { className: "box-border relative flex grow-0 shrink-0 basis-full", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { className: "pl-12 z-10 group-data-secondary:text-white", textBlockClassName: "mb-[154px]", headlineVersion: "XXL", ...block }) }) }, String(i)));
-    }
-    function renderNavButton({ slide, i, isActive, onClick }) {
+    const renderNavButton = ({ activeSlideIndex, onClick }) => ({ nav }, i) => {
+        const isActive = i === activeSlideIndex;
         const btnClassName = isActive
-            ? 'bg-white shadow-dark-blue min-w-[350px] border-none p-6'
-            : 'min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur';
+            ? 'min-w-[350px] bg-white shadow-dark-blue border-none p-6'
+            : 'min-w-[290px] ease-in duration-300 bg-white/10 px-6 py-5 hover:py-6 backdrop-blur';
         const btnTitleClassName = isActive
-            ? 'text-primary-text !text-h6 p-2'
+            ? 'text-primary-text text-h6 py-2'
             : 'text-l pb-1 text-secondary-text group-data-secondary:text-white';
         const btnDescClassName = isActive
             ? 'text-secondary-text text-l-light'
             : 'text-m-light text-secondary-text group-data-secondary:text-white/80';
-        return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `relative box-border overflow-hidden cursor-pointer text-left mx-1 grow basis-0 border border-gray group-data-secondary:border-white/50 ${btnClassName}`, children: jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `last:pb-0 ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text ${btnDescClassName}`, children: slide?.description })] }) }, String(i)));
-    }
+        return (jsxs("button", { type: "button", onClick: () => onClick(i), "aria-label": nav?.title, className: style('relative px-6 box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50', btnClassName), children: [jsx("div", { className: btnTitleClassName, children: nav?.title }), jsx("div", { className: btnDescClassName, children: nav?.description })] }, String(i)));
+    };
 
     function renderAdditionalDescription(additionalDescription, image) {
         if (!additionalDescription) {
@@ -4193,24 +4212,58 @@
         return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
     }
 
+    const RepresentativeOfficeInfo = JSX(({ address, email, telephone, button, className = '', __html, icon, title, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border text-left p-9', className), version: version, ...rest, children: [jsxs("div", { className: "w-full flex justify-between", children: [title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-6", title: title }) : null, renderIconBlock(icon)] }), jsxs("div", { className: "w-full", children: [__html ? renderDescriptionBlock(__html) : null, renderBlock('Адрес', address, 'GeolocationIcon'), renderBlock('Телефон', telephone, 'PhoneIcon'), renderBlock('E-mail', email, 'MailIcon'), button?.text
+                        ? renderButtonsSection([button], {
+                            className: 'mb-6',
+                        })
+                        : null] })] })));
+    const renderIconBlock = (icon) => (jsxs("div", { className: "self-end", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: icon }) : null] }));
+    const renderDescriptionBlock = (__html) => (jsx("div", { className: "border-b border-main-divider pb-5 my-5", children: jsx(RichText, { __html: __html }) }));
+    const renderBlock = (blockName, data, iconName) => (jsxs("div", { className: "flex mb-4", children: [jsx(Icon, { className: "pr-4", iconVersion: "black", name: iconName, width: "24", height: "24" }), jsxs("div", { className: "flex flex-col first:pb-1", children: [jsx(Text, { size: "text-m-light", children: blockName }), data ? (jsx(Text, { size: "text-h6", color: "text-green", children: data })) : null] })] }));
+
     const RichTextBlock = JSX((props) => {
         const { __html, richVersion, ...rest } = props;
         return (jsx(BlockWrapper, { ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) }));
     });
 
-    const RollupItem = JSX(({ className = '', label = 'Развернуть', isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => (jsx(BlockWrapper, { className: `w-full border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`, tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: `grid grid-cols-12 gap-5 [&>*]:p-0`, isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ version, label, isUnfolded, onToggle }) }) })));
+    const iconBgStyles = {
+        primary: 'bg-main-divider',
+        secondary: 'bg-white/30',
+        'secondary-light': 'bg-secondary-light',
+    };
+    const RoundedIcon = JSX(({ iconBgVersion = 'primary', ...rest }) => (jsx("div", { className: style('rounded-icon p-2.5 mr-3', iconBgStyles[iconBgVersion]), children: jsx(Icon, { ...rest }) })));
+
+    const foldableSectionStyles = 'grid grid-cols-12 [&>*]:pb-4';
+
+    const getIconName = (isUnfolded) => (isUnfolded ? 'MinusIcon' : 'PlusIcon');
+
+    const labelSize = 'text-h6';
+
+    const rollupIconVersion = 'color';
+
+    const rollupItemStyles = 'border-0 border-b border-solid border-main-divider last:border-b-0';
+
+    const RollupItem = JSX(({ className = '', label = 'Развернуть', labelIcon, isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => {
+        return (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-5 [&>*]:p-0', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ version, label, labelIcon, isUnfolded, onToggle }) }) }));
+    });
     RollupItem.childrenTypes = {
         exclude: ['RollupItem'],
     };
-    const renderFoldButton = ({ version, label: defaultLabel, isUnfolded, onToggle, }) => {
+    const renderFoldButton = ({ version, label: defaultLabel, labelIcon, isUnfolded, onToggle, }) => {
         const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
         return version === 'primary' ? (renderPrimaryFoldButton({
             label,
-            icon: isUnfolded ? 'MinusIcon' : 'PlusIcon',
+            labelIcon,
+            icon: getIconName(isUnfolded),
             onToggle,
         })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
-    const renderPrimaryFoldButton = ({ label, icon, onToggle }) => (jsxs("button", { className: `border-none bg-transparent px-0 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 cursor-pointer`, onClick: onToggle, children: [jsx(Text, { size: "text-xl", font: "font-medium", children: label }), icon ? jsx(Icon, { name: icon, width: "24", height: "24" }) : null] }));
+    const renderPrimaryFoldButton = ({ label, icon, onToggle, labelIcon }) => {
+        const iconWidth = String(labelIcon?.size?.width || 24);
+        const iconHeight = String(labelIcon?.size?.height || 24);
+        const iconName = labelIcon?.icon;
+        return (jsxs("button", { className: style('border-none bg-transparent px-0 flex justify-between items-center w-full cursor-pointer group/button', iconName ? 'py-2' : 'py-5'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main", children: [iconName ? (jsx(RoundedIcon, { name: iconName, width: iconWidth, height: iconHeight, iconVersion: labelIcon?.iconVersion })) : null, label ? (jsx(Text, { size: labelSize, font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
+    };
 
     const SAFEBOXES_URL = '/api/v1/safeboxes';
     const EMPTY_VALUE = [];
@@ -4790,7 +4843,7 @@
     const Tile = JSX(({ title, headingType = 'h3', __html, items, buttons, image, isDotted = true, listItemSize = 'M', className = '', tags, children, directionRight = true, ...rest }) => (jsxs(BlockWrapper, { className: style('flex grow justify-between items-stretch h-full p-9 pr-3 box-border', getTileRightPadding(className), getTileMinHeight(className), className), ...rest, children: [image?.src ? (jsx(ImgInner, { className: style('mt-auto ml-7', directionRight ? 'order-2' : ''), image: image })) : null, jsx(BaseTile, { title: title ? (jsx(Heading, { headingType: headingType, as: "h2", title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, buttons: renderButtonsSection(buttons, {
                     className: 'mt-8',
                     buttonClassName: 'min-w-[158px]',
-                }), children: jsxs("div", { children: [__html ? (jsx("div", { className: "max-w-[600px] mt-2.5", children: jsx(RichText, { __html: __html }) })) : null, children, jsx(List, { className: "mt-2.5", itemClassName: "mb-1.5", items: items, isDotted: isDotted, listItemSize: listItemSize }), tags?.length ? jsx(Tags, { tags: tags, className: "mt-5" }) : null] }) })] })));
+                }), children: jsxs("div", { children: [__html ? (jsx("div", { className: "max-w-[600px] mt-2.5", children: jsx(RichText, { __html: __html }) })) : null, children, jsx(List, { className: "mt-2.5", items: items, isDotted: isDotted, listItemSize: listItemSize }), tags?.length ? jsx(Tags, { tags: tags, className: "mt-5" }) : null] }) })] })));
 
     const alignStyle = {
         stretch: 'items-stretch',
@@ -4815,15 +4868,6 @@
         return (jsxs(BlockWrapper, { className: style(getPaddings(className), className), ...rest, children: [jsx(Headline, { title: title, headlineVersion: "M" }), url ? (jsx("video", { className: "m-auto w-full object-fill", preload: "metadata", poster: adjustHref(router)(previewImg?.src), style: { maxHeight: 524 }, controls: true, children: jsx("source", { src: adjustHref(router)(url) }) })) : null] }));
     });
 
-    const RepresentativeOfficeInfo = JSX(({ address, email, telephone, button, className = '', __html, icon, title, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border text-left p-9', className), version: version, ...rest, children: [jsxs("div", { className: "w-full flex justify-between", children: [title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-6", title: title }) : null, renderIconBlock(icon)] }), jsxs("div", { className: "w-full", children: [__html ? renderDescriptionBlock(__html) : null, renderBlock('Адрес', address, 'GeolocationIcon'), renderBlock('Телефон', telephone, 'PhoneIcon'), renderBlock('E-mail', email, 'MailIcon'), button?.text
-                        ? renderButtonsSection([button], {
-                            className: 'mb-6',
-                        })
-                        : null] })] })));
-    const renderIconBlock = (icon) => (jsxs("div", { className: "self-end", children: [icon?.src ? jsx(ImgInner, { image: icon }) : null, icon?.icon ? jsx(ImgInner, { image: icon }) : null] }));
-    const renderDescriptionBlock = (__html) => (jsx("div", { className: "border-b border-main-divider pb-5 my-5", children: jsx(RichText, { __html: __html }) }));
-    const renderBlock = (blockName, data, iconName) => (jsxs("div", { className: "flex mb-4", children: [jsx(Icon, { className: "pr-4", iconVersion: "black", name: iconName, width: "24", height: "24" }), jsxs("div", { className: "flex flex-col first:pb-1", children: [jsx(Text, { size: "text-m-light", children: blockName }), data ? (jsx(Text, { size: "text-h6", color: "text-green", children: data })) : null] })] }));
-
     const Blocks = {
         ApplicationForm,
         BenefitsBlock,
@@ -4847,9 +4891,9 @@
         CarouselTariffsCard,
         ComparisonTable,
         ContactsBlock,
+        DepositFiltration,
         ErrorBlock,
         ExchangeRateTile,
-        Filtration,
         Footer,
         GracePeriod,
         Header,
@@ -4860,6 +4904,7 @@
         InvestmentInfo,
         LinkDocs,
         MobileAppTile,
+        MortgageFiltration,
         OfficeMap,
         OfficeServicesBlock,
         ParagraphBlock,
@@ -4869,6 +4914,7 @@
         ProductGallery,
         ProductTile,
         PromoTile,
+        RepresentativeOfficeInfo,
         RichTextBlock,
         RollupItem,
         SafeDepositRental,
@@ -4881,7 +4927,6 @@
         VerticalLayout,
         Video,
         ExchangeRateOffice,
-        RepresentativeOfficeInfo,
     };
 
     const debounce = (fn, delay = 600) => {
@@ -5024,7 +5069,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.10.10";
+    const packageVersion = "0.11.0";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;