@redneckz/wildless-cms-uni-blocks 0.14.271 → 0.14.272

package/mobile/bundle/bundle.umd.js

@@ -1824,28 +1824,130 @@
                 : _ === (dataValue?.key ?? dataValue);
         }));
 
-    const AlignStyles = 'text-left';
+    const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
 
-    const iconBgStyles = {
-        '': 'bg-main-divider group-data-secondary:bg-white/30',
-        primary: 'bg-main-divider',
-        secondary: 'bg-secondary-light',
-        opacity: 'bg-white/30',
-    };
-    const RoundedIcon = JSX(({ className, defaultIconSize = 44, iconBgVersion = 'primary', size, icon, ...rest }) => {
-        const widthAndHeight = String(size?.width || defaultIconSize);
-        return icon ? (jsx("div", { style: {
-                width: `${widthAndHeight}px`,
-                height: `${widthAndHeight}px`,
-            }, className: style('rounded-icon object-fit flex justify-center items-center', iconBgStyles[iconBgVersion], className), children: jsx(Icon, { ...rest, width: "54%", height: "54%", name: icon }) })) : null;
+    const SlideCheckboxGroup = JSX(({ value, onChange, items = [], multiple }) => {
+        const handleChange = (newValue) => {
+            if (!onChange) {
+                return;
+            }
+            const hasAlready = value?.includes(newValue);
+            if (multiple) {
+                onChange(hasAlready ? (value || []).filter((v) => v !== newValue) : [...(value || []), newValue]);
+            }
+            else {
+                onChange(hasAlready ? [] : [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 defaultIconSize = 56;
+    const FiltrationForm = JSX(({ children, filtrationSchema, resetButton, field, reset }) => (jsxs("form", { className: "flex flex-col @4xl:flex-row justify-between bg-white p-4xl gap-s @4xl:gap-0", children: [jsxs("div", { className: "flex flex-col @4xl:flex-row gap-xl", children: [children, joinList(jsx("div", { className: "h-full w-px bg-gray" }))(
+                    // TS can't correctly refine array's type after filter
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                    Object.entries(filtrationSchema).map(renderFormItem(field)).filter(Boolean))] }), resetButton ? (jsx("div", { children: jsx(Button, { type: "reset", className: "w-full @4xl:w-56 @4xl:ml-s", onClick: reset, children: resetButton?.text }) })) : null] })));
+    const renderFormItem = (field) => ([key, item]) => {
+        const type = item?.type;
+        switch (type) {
+            case 'array':
+                return renderArrayFormItem(key, field)(item);
+            default:
+                return null;
+        }
+    };
+    const renderArrayFormItem = (key, field) => (item) => item?.ui !== 'dropdown' ? renderCheckboxes(key, field)(item) : null;
+    const renderCheckboxes = (key, field) => (item) => {
+        const options = item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
+            [];
+        return (jsxs("div", { className: "flex-1", children: [item?.title ? (jsx("div", { className: "mb-m", children: jsx(Text, { size: "text-m", font: "font-medium", color: "text-primary-text", children: item.title }) })) : null, jsx(SlideCheckboxGroup, { items: options, multiple: !item?.single, ...field(key) })] }, key));
+    };
 
-    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [title ? jsx(Heading, { headingType: "h3", as: "h2", className: AlignStyles, title: title }) : null, benefitList?.length ? (jsx("div", { className: "flex flex-col @md:flex-row flex-wrap w-full @md:justify-center mt-xl gap-5xl", role: "list", children: benefitList.map(renderBenefit) })) : null] })));
-    const renderBenefit = ({ label, description, items, icon, iconBgVersion, isDotted = false }, i) => (jsxs("div", { className: "flex gap-m items-center @md:basis-1/2 @md:max-w-[500px]", role: "listitem", children: [icon?.icon ? (jsx(RoundedIcon, { className: "shrink-0", defaultIconSize: defaultIconSize, iconBgVersion: iconBgVersion || '', ...icon })) : null, icon?.src ? jsx(Img, { className: "shrink-0", image: icon }) : null, label ? (jsxs("div", { className: "@sm:h-full space-y-xs", children: [jsx(Heading, { headingType: "h6", children: label }), jsx(Text, { size: "text-l", color: "text-secondary-text group-data-secondary:text-white/80", font: "font-light", children: description }), jsx(List, { dotClassName: "bg-secondary-text", listItemSize: "S", items: items, isDotted: isDotted })] })) : null] }, String(i)));
+    function zip(firstCol, ...restCols) {
+        return firstCol.map((firstEl, rowIndex) => [firstEl, ...restCols.map((col) => col[rowIndex])]);
+    }
 
-    const isShowDots = true;
+    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]?.every((_) => target[key]?.includes(_));
+    const isNumberFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) ||
+        isEmpty(target[key]) ||
+        naturalNumber(pattern[key]) <= naturalNumber(target[key]);
+    const isMultipleNumberFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) || isEmpty(target[key]) || target[key]?.includes(pattern[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 targetMatchPattern = (pattern, target) => Object.entries(pattern)
+        .map(([key, subPattern]) => {
+        if (typeof subPattern === 'number') {
+            return Array.isArray(target[key])
+                ? isMultipleNumberFieldMatch(key, pattern)
+                : isNumberFieldMatch(key, pattern);
+        }
+        if (typeof subPattern === 'object' && '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 filterBlocks = (blocksWithProps, filtrationState) => (normalize = identity) => blocksWithProps
+        ?.filter(([, content]) => targetMatchPattern(filtrationState, normalize(content) || {}))
+        .map(([block]) => block);
+
+    const useFiltrationForm = (initialFormState, { block, page, normalize = identity, }) => {
+        const blocks = block?.blocks || [];
+        const [filtrationState, { field, reset, update: replaceFiltrationState }] = useForm(initialFormState);
+        const blocksWithProps = useMemo(() => zip(blocks, blocks.map((b) => resolveBlockProps(b.content, page?.fallback))), [blocks, page?.fallback]);
+        const blocksToRender = filtrationState === initialFormState
+            ? blocks
+            : filterBlocks(blocksWithProps, filtrationState)(normalize);
+        return [
+            filtrationState,
+            { blocksToRender, blocksWithProps },
+            { field, reset, update: replaceFiltrationState },
+        ];
+    };
+
+    const AlignStyles = 'text-left';
+
+    const NotFound = JSX(({ title, description }) => (jsxs("div", { className: "bg-white p-6xl py-20 flex gap-s flex-col @xl:items-center", children: [jsx(Img, { image: { icon: 'MagnifierIcon', iconVersion: 'normal' }, width: "120", height: "120" }), jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: AlignStyles })] })));
+
+    const getBorderStyle = (showBorder = false) => showBorder
+        ? 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider'
+        : '';
+
+    const useCarouselControls = (props, initialIndex = 0) => {
+        const { itemCount, visibleItemCount } = props;
+        const [activeIndex, setActiveIndex] = useState(initialIndex);
+        const inc = useCallback(() => setActiveIndex((_) => Math.min(_ + 1, itemCount - 1)), [itemCount]);
+        const dec = useCallback(() => setActiveIndex((_) => Math.max(_ - 1, 0)), [itemCount]);
+        const canInc = visibleItemCount
+            ? itemCount > visibleItemCount && activeIndex < itemCount - visibleItemCount
+            : activeIndex < itemCount - 1;
+        const canDec = activeIndex > 0;
+        const isScrollAvailable = canDec || canInc;
+        return [
+            activeIndex,
+            {
+                inc,
+                dec,
+                canInc,
+                canDec,
+                isScrollAvailable,
+            },
+        ];
+    };
 
     const mapChildren = (mapper) => (children) => {
         if (children === null || children === undefined) {
@@ -2037,6 +2139,163 @@
         ];
     };
 
+    /** @deprecated */
+    const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(LinkButton, { rounded: true, className: style('group/btn w-12 h-12 min-h-12 max-h-12 flex items-center justify-center shadow-main-black', disabled
+            ? 'bg-secondary-light text-secondary-text'
+            : 'bg-white text-primary-text hover:text-primary-main', className || ''), disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover/btn:text-primary-main", width: "16", height: "16" }) })));
+    /** @deprecated */
+    const ScrollLeftButton = JSX((props) => (jsx(ArrowButton, { ...props, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })));
+    /** @deprecated */
+    const ScrollRightButton = JSX((props) => (jsx(ArrowButton, { ...props, className: `${props.className || ''} rotate-180`, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })));
+
+    const scrollButtonStyle$1 = 'absolute top-[calc(50%-24px)] z-40';
+    const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
+    const CarouselScrollButtons = JSX(({ scroll, activeIndex, itemCount, arrowsPadded, hasEdgeBlocks, onScrollLeft, onScrollRight, }) => {
+        const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
+        const canMoveLeft = hasEdgeBlocks ? activeIndex > 0 : canScrollLeft;
+        const canMoveRight = hasEdgeBlocks ? activeIndex < itemCount - 1 : canScrollRight;
+        const handleScrollLeft = useCallback(() => {
+            if (!hasEdgeBlocks) {
+                scrollLeft();
+            }
+            else {
+                canScrollLeft && activeIndex !== itemCount - 1 && scrollLeft();
+                onScrollLeft();
+            }
+        }, [scrollLeft, onScrollLeft, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
+        const handleScrollRight = useCallback(() => {
+            if (!hasEdgeBlocks) {
+                scrollRight();
+            }
+            else {
+                canScrollRight && activeIndex !== 0 && scrollRight();
+                onScrollRight();
+            }
+        }, [scrollRight, onScrollRight, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
+        return (jsxs("div", { className: "m:hidden block", children: [renderBlur(scroll), canMoveLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'left-1 m:left-8' : 'left-0'), onClick: handleScrollLeft })) : null, canMoveRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'right-1 m:right-8' : 'right-0'), onClick: handleScrollRight })) : null] }));
+    });
+    const renderBlur = (scroll) => (jsxs("div", { children: [scroll.canScrollLeft ? (jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white group-data-secondary:bg-none') })) : null, scroll.canScrollRight ? (jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white group-data-secondary:bg-none') })) : null] }));
+
+    const ITEMS_GAP = 16;
+
+    const renderCardHighlight = ({ className, text = 'ХИТ' } = {}) => (jsxs("div", { className: style('w-14 h-14 bg-white flex flex-col items-center justify-center rounded-md shadow-main-black', className), children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "24", height: "24" }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: text })] }));
+
+    const cardBaseStyle = 'relative h-full';
+    const CARD_SIZE_MAP = {
+        small: 'sm:min-w-64',
+        normal: 'sm:min-w-96',
+        big: 'sm:min-w-[515px]',
+    };
+    const renderCarouselCards = ({ noCardBorder, activeIndex, cardSize = 'normal', ...rest }) => {
+        const { blocks: childBlocks } = rest.block || {};
+        const someCardsHighlighted = childBlocks?.some(isCardHighlighted);
+        return renderChildren({
+            ...rest,
+            renderProps: (block, options, blockIndex) => (jsxs("div", { className: cardWrapperStyle(block, { someCardsHighlighted }), children: [renderBlock$1(block, options, {
+                        className: cardStyle(block, {
+                            someCardsHighlighted,
+                            showBorder: !noCardBorder,
+                            cardSize,
+                        }),
+                        blockIndex,
+                        isActive: blockIndex === activeIndex,
+                    }), isCardHighlighted(block)
+                        ? renderCardHighlight({ className: 'absolute top-0 -right-4 z-40' })
+                        : null] }, String(blockIndex))),
+        });
+    };
+    const cardWrapperStyle = (_, { someCardsHighlighted }) => style(cardBaseStyle, someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl' : 'pt-3xl sm:pt-16'));
+    const cardStyle = (_, { someCardsHighlighted, showBorder, cardSize = 'normal', }) => style(cardBaseStyle, 'min-w-80', CARD_SIZE_MAP[cardSize], // TODO fix для RecommendationCard
+    someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'), getBorderStyle(showBorder), showBorder && 'h-full');
+    const isCardHighlighted = (_) => _?.content && 'isHighlighting' in _.content && _.content.isHighlighting;
+
+    const VISIBLE_ITEM_COUNT = 0;
+
+    const Carousel = UniBlock(({ className, itemCount, visibleItemCount = VISIBLE_ITEM_COUNT, noCardBorder, isAlignCenter, arrowsPadded = true, isGap = true, isEmbedded = false, cardSize = 'normal', ...rest }) => {
+        const { blocks: childBlocks = [] } = rest.block || {};
+        const count = itemCount || childBlocks?.length;
+        const [activeIndex, { inc: increaseActiveIndex, dec: decreaseActiveIndex }] = useCarouselControls({
+            itemCount: count,
+            visibleItemCount,
+        }, Math.floor(visibleItemCount / 2));
+        const [containerRef, scroll] = useSwipeListScroll({ itemCount: count });
+        const [dotsActiveIndex] = scroll.visibleIndicesRange;
+        // TODO Remove
+        const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
+        return (jsxs(BlockWrapper, { className: style(isEmbedded ? '@container-normal' : '', className), defaultPadding: "p-6xl", ...rest, children: [jsxs("div", { className: style(isAlignCenter ? 'flex justify-center' : '', 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: isGap ? ITEMS_GAP : undefined, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderCarouselCards({ noCardBorder, activeIndex, cardSize, ...rest }) }), jsx(CarouselScrollButtons, { scroll: scroll, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count })] }), jsx(SwipeListControlDots, { className: "@5xl:hidden", containerRef: containerRef, activeIndex: dotsActiveIndex, dotCount: count, listType: "horizontal-list" })] }));
+    }, {
+        childrenTypes: [
+            'CarouselCard',
+            'CarouselBankHistoryCard',
+            'CarouselCatalogCard',
+            'CarouselRecommendationCard',
+            'CarouselTariffsCard',
+            'RichTextBlock',
+            'ProductBlock',
+        ],
+        childSchema: () => ({
+            isHighlighting: {
+                title: 'Выделить карточку',
+                type: 'boolean',
+            },
+        }),
+    });
+
+    const EMPTY_SCHEMA = {};
+    const initialFiltrationState$2 = {};
+    const BankAccountFiltration = UniBlock(({ className, filtrationSchema = EMPTY_SCHEMA, resetButton, notFound, ...rest }) => {
+        const [, { blocksToRender }, { field, reset }] = useFiltrationForm(initialFiltrationState$2, {
+            block: rest.block,
+            page: rest.options?.page,
+        });
+        const selectArrProps = Object.entries(filtrationSchema)
+            // Only StringArray
+            .filter(([, schema]) => schema.type === 'array' && schema.ui === 'dropdown')
+            .map(([name, schema]) => ({
+            className: 'w-64',
+            label: schema.title,
+            options: stringArrayToOptions(schema),
+            ...field(name, {
+                parse: ({ key }) => [key],
+                format: ([value] = []) => stringArrayToOptions(schema).find((_) => _.key === value) || { key: '' },
+            }),
+        }));
+        const Selects = selectArrProps.map((props, i) => jsx(Select, { ...props }, String(i)));
+        return (jsxs(BlockWrapper, { className: style(className), defaultPadding: "p-0", version: "transparent", ...rest, children: [jsx(FiltrationForm, { filtrationSchema: filtrationSchema, field: field, reset: reset, children: jsxs("div", { children: [Selects, jsx("div", { children: jsx(Button, { type: "reset", className: "mt-lg w-64", onClick: reset, version: resetButton?.version, children: resetButton?.text }) })] }) }), jsx("div", { className: style(blocksToRender?.length ? 'hidden' : 'block'), children: notFound ? jsx(NotFound, { ...notFound }) : null }), jsx(Carousel, { padding: "p-0", isEmbedded: true, itemCount: blocksToRender?.length, visibleItemCount: 0, isAlignCenter: true, isGap: false, children: renderBlocksList(blocksToRender, {
+                        ...rest.options,
+                        parent: rest.block,
+                        renderProps: (block, options, i) => (jsx("div", { className: style('relative min-w-80', getBorderStyle(true)), children: renderBlock$1(block, options) }, String(i))),
+                    }) })] }));
+    }, {
+        childrenTypes: ['CarouselTariffsCard'],
+        childSchema: (content) => content?.filtrationSchema || {},
+    });
+    const stringArrayToOptions = (stringEnum) => zip(stringEnum.items?.enum || [], stringEnum.items?.enumNames || []).map(([key, text]) => ({
+        key,
+        text,
+    }));
+
+    const iconBgStyles = {
+        '': 'bg-main-divider group-data-secondary:bg-white/30',
+        primary: 'bg-main-divider',
+        secondary: 'bg-secondary-light',
+        opacity: 'bg-white/30',
+    };
+    const RoundedIcon = JSX(({ className, defaultIconSize = 44, iconBgVersion = 'primary', size, icon, ...rest }) => {
+        const widthAndHeight = String(size?.width || defaultIconSize);
+        return icon ? (jsx("div", { style: {
+                width: `${widthAndHeight}px`,
+                height: `${widthAndHeight}px`,
+            }, className: style('rounded-icon object-fit flex justify-center items-center', iconBgStyles[iconBgVersion], className), children: jsx(Icon, { ...rest, width: "54%", height: "54%", name: icon }) })) : null;
+    });
+
+    const defaultIconSize = 56;
+
+    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [title ? jsx(Heading, { headingType: "h3", as: "h2", className: AlignStyles, title: title }) : null, benefitList?.length ? (jsx("div", { className: "flex flex-col @md:flex-row flex-wrap w-full @md:justify-center mt-xl gap-5xl", role: "list", children: benefitList.map(renderBenefit) })) : null] })));
+    const renderBenefit = ({ label, description, items, icon, iconBgVersion, isDotted = false }, i) => (jsxs("div", { className: "flex gap-m items-center @md:basis-1/2 @md:max-w-[500px]", role: "listitem", children: [icon?.icon ? (jsx(RoundedIcon, { className: "shrink-0", defaultIconSize: defaultIconSize, iconBgVersion: iconBgVersion || '', ...icon })) : null, icon?.src ? jsx(Img, { className: "shrink-0", image: icon }) : null, label ? (jsxs("div", { className: "@sm:h-full space-y-xs", children: [jsx(Heading, { headingType: "h6", children: label }), jsx(Text, { size: "text-l", color: "text-secondary-text group-data-secondary:text-white/80", font: "font-light", children: description }), jsx(List, { dotClassName: "bg-secondary-text", listItemSize: "S", items: items, isDotted: isDotted })] })) : null] }, String(i)));
+
+    const isShowDots = true;
+
     const DEFAULT_GAP = 14;
     /*
       Horizontal padding used on a container above SwipeListControl.
@@ -2888,134 +3147,6 @@
         return (jsxs(BlockWrapper, { className: style('flex flex-col items-center', className), defaultPadding: "p-6xl", ...rest, children: [title ? (jsx(Heading, { className: "pb-lg xl:pb-4xl self-start xl:self-center", headingType: "h3", title: title })) : null, jsxs("form", { className: "w-full xl:max-w-[468px]", method: "POST", action: FORM_URL_MAP[formType], children: [jsx(CurrencyInput, { valid: !isDisabled, placeholder: placeholder, label: label, max: MAX_AMOUNT, min: MIN_AMOUNT, ...field('amount', { parse: Number, format: String }) }), jsx("input", { type: "hidden", name: "amount", value: amount }), button?.text ? (jsx(Button, { className: "w-full mt-lg", type: "submit", disabled: isDisabled, children: button.text })) : null] })] }));
     });
 
-    const useCarouselControls = (props, initialIndex = 0) => {
-        const { itemCount, visibleItemCount } = props;
-        const [activeIndex, setActiveIndex] = useState(initialIndex);
-        const inc = useCallback(() => setActiveIndex((_) => Math.min(_ + 1, itemCount - 1)), [itemCount]);
-        const dec = useCallback(() => setActiveIndex((_) => Math.max(_ - 1, 0)), [itemCount]);
-        const canInc = visibleItemCount
-            ? itemCount > visibleItemCount && activeIndex < itemCount - visibleItemCount
-            : activeIndex < itemCount - 1;
-        const canDec = activeIndex > 0;
-        const isScrollAvailable = canDec || canInc;
-        return [
-            activeIndex,
-            {
-                inc,
-                dec,
-                canInc,
-                canDec,
-                isScrollAvailable,
-            },
-        ];
-    };
-
-    /** @deprecated */
-    const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(LinkButton, { rounded: true, className: style('group/btn w-12 h-12 min-h-12 max-h-12 flex items-center justify-center shadow-main-black', disabled
-            ? 'bg-secondary-light text-secondary-text'
-            : 'bg-white text-primary-text hover:text-primary-main', className || ''), disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover/btn:text-primary-main", width: "16", height: "16" }) })));
-    /** @deprecated */
-    const ScrollLeftButton = JSX((props) => (jsx(ArrowButton, { ...props, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })));
-    /** @deprecated */
-    const ScrollRightButton = JSX((props) => (jsx(ArrowButton, { ...props, className: `${props.className || ''} rotate-180`, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })));
-
-    const scrollButtonStyle$1 = 'absolute top-[calc(50%-24px)] z-40';
-    const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
-    const CarouselScrollButtons = JSX(({ scroll, activeIndex, itemCount, arrowsPadded, hasEdgeBlocks, onScrollLeft, onScrollRight, }) => {
-        const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
-        const canMoveLeft = hasEdgeBlocks ? activeIndex > 0 : canScrollLeft;
-        const canMoveRight = hasEdgeBlocks ? activeIndex < itemCount - 1 : canScrollRight;
-        const handleScrollLeft = useCallback(() => {
-            if (!hasEdgeBlocks) {
-                scrollLeft();
-            }
-            else {
-                canScrollLeft && activeIndex !== itemCount - 1 && scrollLeft();
-                onScrollLeft();
-            }
-        }, [scrollLeft, onScrollLeft, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
-        const handleScrollRight = useCallback(() => {
-            if (!hasEdgeBlocks) {
-                scrollRight();
-            }
-            else {
-                canScrollRight && activeIndex !== 0 && scrollRight();
-                onScrollRight();
-            }
-        }, [scrollRight, onScrollRight, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
-        return (jsxs("div", { className: "m:hidden block", children: [renderBlur(scroll), canMoveLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'left-1 m:left-8' : 'left-0'), onClick: handleScrollLeft })) : null, canMoveRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'right-1 m:right-8' : 'right-0'), onClick: handleScrollRight })) : null] }));
-    });
-    const renderBlur = (scroll) => (jsxs("div", { children: [scroll.canScrollLeft ? (jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white group-data-secondary:bg-none') })) : null, scroll.canScrollRight ? (jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white group-data-secondary:bg-none') })) : null] }));
-
-    const ITEMS_GAP = 16;
-
-    const getBorderStyle = (showBorder = false) => showBorder
-        ? 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider'
-        : '';
-
-    const renderCardHighlight = ({ className, text = 'ХИТ' } = {}) => (jsxs("div", { className: style('w-14 h-14 bg-white flex flex-col items-center justify-center rounded-md shadow-main-black', className), children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "24", height: "24" }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: text })] }));
-
-    const cardBaseStyle = 'relative h-full';
-    const CARD_SIZE_MAP = {
-        small: 'sm:min-w-64',
-        normal: 'sm:min-w-96',
-        big: 'sm:min-w-[515px]',
-    };
-    const renderCarouselCards = ({ noCardBorder, activeIndex, cardSize = 'normal', ...rest }) => {
-        const { blocks: childBlocks } = rest.block || {};
-        const someCardsHighlighted = childBlocks?.some(isCardHighlighted);
-        return renderChildren({
-            ...rest,
-            renderProps: (block, options, blockIndex) => (jsxs("div", { className: cardWrapperStyle(block, { someCardsHighlighted }), children: [renderBlock$1(block, options, {
-                        className: cardStyle(block, {
-                            someCardsHighlighted,
-                            showBorder: !noCardBorder,
-                            cardSize,
-                        }),
-                        blockIndex,
-                        isActive: blockIndex === activeIndex,
-                    }), isCardHighlighted(block)
-                        ? renderCardHighlight({ className: 'absolute top-0 -right-4 z-40' })
-                        : null] }, String(blockIndex))),
-        });
-    };
-    const cardWrapperStyle = (_, { someCardsHighlighted }) => style(cardBaseStyle, someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl' : 'pt-3xl sm:pt-16'));
-    const cardStyle = (_, { someCardsHighlighted, showBorder, cardSize = 'normal', }) => style(cardBaseStyle, 'min-w-80', CARD_SIZE_MAP[cardSize], // TODO fix для RecommendationCard
-    someCardsHighlighted && (isCardHighlighted(_) ? 'pt-3xl sm:pt-16' : 'pt-3xl'), getBorderStyle(showBorder), showBorder && 'h-full');
-    const isCardHighlighted = (_) => _?.content && 'isHighlighting' in _.content && _.content.isHighlighting;
-
-    const VISIBLE_ITEM_COUNT = 0;
-
-    const Carousel = UniBlock(({ className, itemCount, visibleItemCount = VISIBLE_ITEM_COUNT, noCardBorder, isAlignCenter, arrowsPadded = true, isGap = true, isEmbedded = false, cardSize = 'normal', ...rest }) => {
-        const { blocks: childBlocks = [] } = rest.block || {};
-        const count = itemCount || childBlocks?.length;
-        const [activeIndex, { inc: increaseActiveIndex, dec: decreaseActiveIndex }] = useCarouselControls({
-            itemCount: count,
-            visibleItemCount,
-        }, Math.floor(visibleItemCount / 2));
-        const [containerRef, scroll] = useSwipeListScroll({ itemCount: count });
-        const [dotsActiveIndex] = scroll.visibleIndicesRange;
-        // TODO Remove
-        const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
-        return (jsxs(BlockWrapper, { className: style(isEmbedded ? '@container-normal' : '', className), defaultPadding: "p-6xl", ...rest, children: [jsxs("div", { className: style(isAlignCenter ? 'flex justify-center' : '', 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: isGap ? ITEMS_GAP : undefined, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderCarouselCards({ noCardBorder, activeIndex, cardSize, ...rest }) }), jsx(CarouselScrollButtons, { scroll: scroll, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count })] }), jsx(SwipeListControlDots, { className: "@5xl:hidden", containerRef: containerRef, activeIndex: dotsActiveIndex, dotCount: count, listType: "horizontal-list" })] }));
-    }, {
-        childrenTypes: [
-            'CarouselCard',
-            'CarouselBankHistoryCard',
-            'CarouselCatalogCard',
-            'CarouselRecommendationCard',
-            'CarouselTariffsCard',
-            'RichTextBlock',
-            'ProductBlock',
-        ],
-        childSchema: () => ({
-            isHighlighting: {
-                title: 'Выделить карточку',
-                type: 'boolean',
-            },
-        }),
-    });
-
     const CarouselBankHistoryCard = JSX(({ title, description, className }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", children: jsx(Headline, { headlineVersion: "XS", title: title, description: description, align: "text-left", className: "text-primary-text", isEmbedded: true }) })));
 
     const titleSize = 'XS';
@@ -3218,8 +3349,6 @@
         return (jsx(DefaultFoldButton, { icon: icons[Number(isUnfolded)], label: labels[Number(isUnfolded)], onClick: onToggle }));
     };
 
-    const NotFound = JSX(({ title, description }) => (jsxs("div", { className: "bg-white p-6xl py-20 flex gap-s flex-col @xl:items-center", children: [jsx(Img, { image: { icon: 'MagnifierIcon', iconVersion: 'normal' }, width: "120", height: "120" }), jsx(Headline, { title: title, description: description, headlineVersion: "S", isEmbedded: true, align: AlignStyles })] })));
-
     const ICONS$1 = ['ArrowDownIcon', 'ArrowUpIcon'];
     const resultsGridStyle = 'space-y-px lg:space-y-0 lg:grid lg:grid-cols-12 gap-2xs border-box';
     const BaseFiltrationInner = JSX(({ label = '', blocksToRender = [], topItemsCount = 0, block, notFound, ...rest }) => {
@@ -3231,101 +3360,6 @@
                             }, renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(DefaultFoldButton, { className: style(topItemsCount < 1 ? 'hidden' : ''), disabled: !hiddenBlocks?.length, label: label, icon: ICONS$1[Number(isUnfolded)], dataTheme: rest.options?.page?.colorPalette, onClick: onToggle })) })] })] }));
     });
 
-    const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
-
-    const SlideCheckboxGroup = JSX(({ value, onChange, items = [], multiple }) => {
-        const handleChange = (newValue) => {
-            if (!onChange) {
-                return;
-            }
-            const hasAlready = value?.includes(newValue);
-            if (multiple) {
-                onChange(hasAlready ? (value || []).filter((v) => v !== newValue) : [...(value || []), newValue]);
-            }
-            else {
-                onChange(hasAlready ? [] : [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 FiltrationForm = JSX(({ children, filtrationSchema, resetButton, field, reset }) => (jsxs("form", { className: "flex flex-col @4xl:flex-row justify-between bg-white p-4xl gap-s @4xl:gap-0", children: [jsxs("div", { className: "flex flex-col @4xl:flex-row gap-xl", children: [children, joinList(jsx("div", { className: "h-full w-px bg-gray" }))(
-                    // TS can't correctly refine array's type after filter
-                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-                    Object.entries(filtrationSchema).map(renderFormItem(field)).filter(Boolean))] }), resetButton ? (jsx("div", { children: jsx(Button, { type: "reset", className: "w-full @4xl:w-56 @4xl:ml-s", onClick: reset, children: resetButton?.text }) })) : null] })));
-    const renderFormItem = (field) => ([key, item]) => {
-        const type = item?.type;
-        switch (type) {
-            case 'array':
-                return renderArrayFormItem(key, field)(item);
-            default:
-                return null;
-        }
-    };
-    const renderArrayFormItem = (key, field) => (item) => item?.ui !== 'dropdown' ? renderCheckboxes(key, field)(item) : null;
-    const renderCheckboxes = (key, field) => (item) => {
-        const options = item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
-            [];
-        return (jsxs("div", { className: "flex-1", children: [item?.title ? (jsx("div", { className: "mb-m", children: jsx(Text, { size: "text-m", font: "font-medium", color: "text-primary-text", children: item.title }) })) : null, jsx(SlideCheckboxGroup, { items: options, multiple: !item?.single, ...field(key) })] }, key));
-    };
-
-    function zip(firstCol, ...restCols) {
-        return firstCol.map((firstEl, rowIndex) => [firstEl, ...restCols.map((col) => col[rowIndex])]);
-    }
-
-    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]?.every((_) => target[key]?.includes(_));
-    const isNumberFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) ||
-        isEmpty(target[key]) ||
-        naturalNumber(pattern[key]) <= naturalNumber(target[key]);
-    const isMultipleNumberFieldMatch = (key, pattern) => (target) => isEmpty(pattern[key]) || isEmpty(target[key]) || target[key]?.includes(pattern[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 targetMatchPattern = (pattern, target) => Object.entries(pattern)
-        .map(([key, subPattern]) => {
-        if (typeof subPattern === 'number') {
-            return Array.isArray(target[key])
-                ? isMultipleNumberFieldMatch(key, pattern)
-                : isNumberFieldMatch(key, pattern);
-        }
-        if (typeof subPattern === 'object' && '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 filterBlocks = (blocksWithProps, filtrationState) => (normalize = identity) => blocksWithProps
-        ?.filter(([, content]) => targetMatchPattern(filtrationState, normalize(content) || {}))
-        .map(([block]) => block);
-
-    const useFiltrationForm = (initialFormState, { block, page, normalize = identity, }) => {
-        const blocks = block?.blocks || [];
-        const [filtrationState, { field, reset, update: replaceFiltrationState }] = useForm(initialFormState);
-        const blocksWithProps = useMemo(() => zip(blocks, blocks.map((b) => resolveBlockProps(b.content, page?.fallback))), [blocks, page?.fallback]);
-        const blocksToRender = filtrationState === initialFormState
-            ? blocks
-            : filterBlocks(blocksWithProps, filtrationState)(normalize);
-        return [
-            filtrationState,
-            { blocksToRender, blocksWithProps },
-            { field, reset, update: replaceFiltrationState },
-        ];
-    };
-
     const isRateRow = (rateRow) => {
         return typeof rateRow?.minMonths === 'number' && typeof rateRow?.maxMonths === 'number';
     };
@@ -5380,6 +5414,7 @@
     const Blocks = {
         AdTile,
         ApplicationFormCustom,
+        BankAccountFiltration,
         BenefitsBlock,
         BonusBenefitsBlock,
         ButtonsBlock,
@@ -5607,7 +5642,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.270";
+    const packageVersion = "0.14.271";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;