@redneckz/wildless-cms-uni-blocks 0.14.291 → 0.14.293

package/bundle/bundle.umd.js

@@ -468,6 +468,9 @@
     }
 
     const getAspectsAttributes = (data) => {
+        if (!Array.isArray(data) || !data.length) {
+            return {};
+        }
         try {
             return {
                 'data-aspects': JSON.stringify(data),
@@ -824,6 +827,18 @@
     });
     const randomNumber = (min = 0, max = 0) => Math.floor(Math.random() * (max - min) + min);
 
+    const formatDate = (date, toTimeStamp = false) => {
+        if (typeof date === 'string') {
+            return date.split('-').reverse().join('.');
+        }
+        else {
+            const day = String(date.getDate()).padStart(2, '0');
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const year = String(date.getFullYear());
+            return toTimeStamp ? `${year}-${month}-${day}` : `${day}.${month}.${year}`;
+        }
+    };
+
     const formatPhone = (phone) => phone?.replace(/[^+\d]/g, '');
 
     function LeadServiceAPI() {
@@ -836,7 +851,7 @@
                 ...getRegion$1(region, isNaturalPerson),
                 ...getEmail(email, isNaturalPerson),
                 ...getPhone(phone),
-                ...(isNaturalPerson ? { birthday: birthday?.toLocaleString() } : { inn, fullName }),
+                ...(isNaturalPerson ? { birthday: formatDate(birthday) } : { inn, fullName }),
                 ...(typeForm === 'FEEDBACK'
                     ? {}
                     : {
@@ -1056,18 +1071,6 @@
         return [value, { setValue, setTrue, setFalse, toggle }];
     }
 
-    const formatDate = (date, toTimeStamp = false) => {
-        if (typeof date === 'string') {
-            return date.split('-').reverse().join('.');
-        }
-        else {
-            const day = String(date.getDate()).padStart(2, '0');
-            const month = String(date.getMonth() + 1).padStart(2, '0');
-            const year = toTimeStamp ? String(date.getFullYear()) : String(date.getFullYear()).slice(-2);
-            return toTimeStamp ? `${year}-${month}-${day}` : `${day}.${month}.${year}`;
-        }
-    };
-
     const renderLabel = (label) => label ? (jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: label })) : null;
 
     const Input = JSX(({ key, className = '', id, name, type = 'text', label, placeholder, value = '', valid = true, children, onChange, onFocus, onBlur, pattern, autoFocus = false, isTextarea = false, }) => {
@@ -1904,110 +1907,11 @@
         return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container max-w-[978px] space-y-m", children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "@xl:text-center" }) : null, regions ? (jsx(SelectControl, { label: "\u0412\u0430\u0448 \u0440\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", isSearch: true, options: regions.map(({ name = '' }) => ({ key: name, text: name })), value: region, onChange: setRegion })) : null, regionHref ? (jsx("div", { className: "text-center", children: jsx(LinkButton, { href: regionHref, target: "_blank", className: style('p-m w-full @xl:w-auto', buttonStyle), data: data, children: buttonText }) })) : null] }) }));
     });
 
-    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 },
-        ];
-    };
-
     /** @deprecated */
     const AlignStyles = 'text-center';
 
     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);
@@ -2259,6 +2163,10 @@
 
     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';
@@ -2322,31 +2230,191 @@
         }),
     });
 
+    const renderCarouselBlocks = ({ blocksToRender, ...rest }) => (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))),
+        }) }));
+
+    const isOdd = (n) => n % 2 !== 0;
+
+    const TextWithIcon = JSX(({ textNode, iconNode, tag, onClick, justifyContent = 'between', className, role, ...rest }) => {
+        const Tag = tag;
+        return (jsxs(Tag, { tag: tag, className: style('flex items-center w-full gap-1', justifyContent === 'between' ? 'justify-between' : 'justify-center', className), onClick: onClick, role: role, ...rest, children: [textNode ? jsx("div", { children: textNode }) : null, iconNode ? jsx("div", { children: iconNode }) : null] }));
+    });
+
+    const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => (jsx(TextWithIcon, { tag: "button", onClick: onClick, disabled: disabled, "data-theme": dataTheme, justifyContent: "center", role: "button", className: style('py-4 border border-transparent outline-none focus:border-primary-text space-x-s', disabled
+            ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
+            : 'bg-primary-main text-white hover:bg-primary-hove', className), textNode: jsx(Text, { size: "text-h4", children: label }), iconNode: icon ? (jsx(Img, { image: {
+                icon,
+                iconVersion: 'white',
+            }, className: "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 Foldable = JSX(({ className = '', isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
+        const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
+        const onToggle = useCallback(() => {
+            setIsUnfolded((_) => !_);
+        }, []);
+        const sectionNode = renderFoldableSection({ isUnfolded, onToggle });
+        const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
+        return isFoldButtonOnTop ? (jsxs("div", { className: className, role: "group", children: [buttonNode, sectionNode] })) : (jsxs("div", { className: className, role: "group", children: [sectionNode, buttonNode] }));
+    });
+
+    function useResizeObserver(callback, deps) {
+        const ref = useRef(null);
+        useEffect(() => {
+            const element = ref?.current;
+            if (!element) {
+                return undefined;
+            }
+            const observer = new ResizeObserver((entries) => {
+                callback(element, entries[0]);
+            });
+            observer.observe(element);
+            return () => {
+                observer.disconnect();
+            };
+        }, [callback, ...deps]);
+        return ref;
+    }
+
+    const FoldableSection = JSX(({ className = '', isUnfolded, children }) => {
+        const containerRef = useRef(null);
+        const childrenWrapperRef = useResizeObserver((childrenWrapperEl) => {
+            if (containerRef.current) {
+                containerRef.current.style.maxHeight = isUnfolded
+                    ? `${childrenWrapperEl.scrollHeight}px`
+                    : '';
+            }
+        }, [isUnfolded]);
+        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} `, children: jsx("div", { className: className, ref: childrenWrapperRef, children: children }) }));
+    });
+
+    const ICONS$1 = ['ArrowDownIcon', 'ArrowUpIcon'];
+    const resultsGridStyle = 'space-y-px lg:space-y-0 lg:grid lg:grid-cols-12 gap-2xs';
+    const renderGridBlocks = ({ topItemsCount = 0, label = '', block, blocksToRender = [], ...rest }) => {
+        const [visibleBlocks, hiddenBlocks] = topItemsCount > 0
+            ? [blocksToRender.slice(0, topItemsCount), blocksToRender.slice(topItemsCount)]
+            : [blocksToRender, []];
+        return (jsxs("div", { className: style('space-y-2xs', blocksToRender.length ? '' : 'hidden'), children: [jsxs("div", { className: style(resultsGridStyle), children: [renderBlocksList(visibleBlocks, { ...rest.options, parent: block }), isOdd(visibleBlocks.length) ? jsx(AdTile, { className: "col-span-6", ...rest }) : null] }), jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(FoldableSection, { className: style(resultsGridStyle), isUnfolded: isUnfolded, children: [renderBlocksList(hiddenBlocks, { ...rest.options, parent: block }), isOdd(hiddenBlocks.length) ? jsx(AdTile, { className: "col-span-6", ...rest }) : null] })), 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 FilteredBlocks = JSX(({ blocksSection, blocksToRender = [], notFound, ...rest }) => {
+        switch (blocksSection?.view) {
+            case 'grid':
+                return (jsxs("div", { children: [renderNotFound(notFound, blocksToRender), renderGridBlocks({ ...blocksSection, ...rest, blocksToRender })] }));
+            case 'carousel':
+                return (jsxs("div", { children: [renderNotFound(notFound, blocksToRender), renderCarouselBlocks({ ...rest, blocksToRender })] }));
+            default:
+                return null;
+        }
+    });
+    const renderNotFound = (notFound, blocksToRender) => notFound && !blocksToRender.length ? jsx(NotFound, { ...notFound }) : null;
+
+    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" })))(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 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", { 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 }] = 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 }];
+    };
+
     const EMPTY_SCHEMA = {};
     const initialFiltrationState$3 = {};
-    const BankAccountFiltration = UniBlock(({ className, filtrationSchema = EMPTY_SCHEMA, resetButton, notFound, ...rest }) => {
+    const BankAccountFiltration = UniBlock(({ className, filtrationSchema = EMPTY_SCHEMA, consumerField = {}, resetButton, ...rest }) => {
         const [, { blocksToRender }, { field, reset }] = useFiltrationForm(initialFiltrationState$3, {
             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, {
+        const ConsumerSelect = (jsx(Select, { className: "w-64", label: consumerField?.title, options: stringArrayToOptions(consumerField), ...field('consumer', {
                 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))),
-                    }) })] }));
+                format: ([value] = []) => stringArrayToOptions(consumerField).find((_) => _.key === value) || { key: '' },
+            }) }));
+        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: [ConsumerSelect, jsx("div", { children: jsx(Button, { type: "reset", className: "mt-lg w-64", onClick: reset, version: resetButton?.version, children: resetButton?.text }) })] }) }), jsx(FilteredBlocks, { blocksToRender: blocksToRender, ...rest })] }));
     }, {
         childrenTypes: ['CarouselTariffsCard'],
         childSchema: (content) => content?.filtrationSchema || {},
@@ -3352,46 +3420,6 @@
     const CarouselRecommendationCard = JSX(({ className, padding, description, additionalDescription, href, icon, items = [], isDotted, socialMedia = [], target, title, align = 'text-left', benefits, imageOptions: { directionRight = true, isImageAlwaysOnRight = ImageAlwaysOnRight, isImageSecondary = false, } = {}, ...rest }) => (jsx(BlockWrapper, { className: style('relative min-h-28 group-data-gray:bg-main-divider/50', className), defaultPadding: "p-0", ...rest, children: jsx(LinkWrapper, { href: href, target: target, className: "h-full", children: jsxs(BaseTile, { className: "h-full", defaultPadding: "p-2xl", padding: padding, insetTitle: jsx(Headline, { title: title, description: description, headlineVersion: "XS", isEmbedded: true, align: align }), ...leftOrRightImage(isIcon(icon) ? jsx(Img, { image: icon }) : null, directionRight), buttons: socialMedia.length ? (jsx(SocialMedia, { media: socialMedia, showButtonText: true, version: rest?.version })) : null, isImageAlwaysOnRight: isImageAlwaysOnRight, isImageSecondary: isImageSecondary, imageAlign: "center", children: [jsx(BenefitsList, { benefits: benefits }), jsx(List, { items: items, isDotted: isDotted, listItemSize: "S" }), renderAdditionalDescription(additionalDescription, align)] }) }) })));
     const renderAdditionalDescription = (additionalDescription, align) => additionalDescription ? (jsx(Paragraph, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", align: align, children: additionalDescription })) : null;
 
-    const Foldable = JSX(({ className = '', isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
-        const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
-        const onToggle = useCallback(() => {
-            setIsUnfolded((_) => !_);
-        }, []);
-        const sectionNode = renderFoldableSection({ isUnfolded, onToggle });
-        const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
-        return isFoldButtonOnTop ? (jsxs("div", { className: className, role: "group", children: [buttonNode, sectionNode] })) : (jsxs("div", { className: className, role: "group", children: [sectionNode, buttonNode] }));
-    });
-
-    function useResizeObserver(callback, deps) {
-        const ref = useRef(null);
-        useEffect(() => {
-            const element = ref?.current;
-            if (!element) {
-                return undefined;
-            }
-            const observer = new ResizeObserver((entries) => {
-                callback(element, entries[0]);
-            });
-            observer.observe(element);
-            return () => {
-                observer.disconnect();
-            };
-        }, [callback, ...deps]);
-        return ref;
-    }
-
-    const FoldableSection = JSX(({ className = '', isUnfolded, children }) => {
-        const containerRef = useRef(null);
-        const childrenWrapperRef = useResizeObserver((childrenWrapperEl) => {
-            if (containerRef.current) {
-                containerRef.current.style.maxHeight = isUnfolded
-                    ? `${childrenWrapperEl.scrollHeight}px`
-                    : '';
-            }
-        }, [isUnfolded]);
-        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} `, children: jsx("div", { className: className, ref: childrenWrapperRef, children: children }) }));
-    });
-
     const renderCardInfo = (cell, i) => {
         const { title, description, buttons } = cell;
         return (jsxs("div", { className: "py-lg border-b border-main-divider", children: [title ? (jsx("div", { className: "opacity-80", children: jsx(Text, { size: "text-m", color: "text-secondary-text", children: title }) })) : null, description ? (jsx("div", { className: "mt-2xs", children: jsx(Text, { size: "text-xl", color: "text-primary-text", children: description }) })) : null, buttons?.length ? (jsx("div", { className: "text-primary-main", children: renderButtonsSection(buttons) })) : null] }, String(i)));
@@ -3489,36 +3517,6 @@
     const renderBlocks = (info) => (jsx("div", { className: "flex gap-5xl grow basis-0", children: info.map((column, index) => renderBlocksColumn({ column, index })) }));
     const renderBlocksColumn = ({ column, index }) => column ? (jsx("div", { className: "flex flex-col gap-xl grow basis-0", children: column.map(({ title = '', description, additionalDescription, button }, key) => (jsxs("div", { children: [jsx(Headline, { title: title, description: description, headlineVersion: "XS", align: "text-left", isEmbedded: true }), additionalDescription ? (jsx("div", { className: "mt-xs opacity-80", children: jsx(Paragraph, { size: "text-m", font: "font-light", children: additionalDescription }) })) : null, button?.href ? jsx(LinkButton, { className: "mt-xl", ...button }) : null] }, String(key)))) }, `col-${String(index)}`)) : null;
 
-    const isOdd = (n) => n % 2 !== 0;
-
-    const TextWithIcon = JSX(({ textNode, iconNode, tag, onClick, justifyContent = 'between', className, role, ...rest }) => {
-        const Tag = tag;
-        return (jsxs(Tag, { tag: tag, className: style('flex items-center w-full gap-1', justifyContent === 'between' ? 'justify-between' : 'justify-center', className), onClick: onClick, role: role, ...rest, children: [textNode ? jsx("div", { children: textNode }) : null, iconNode ? jsx("div", { children: iconNode }) : null] }));
-    });
-
-    const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => (jsx(TextWithIcon, { tag: "button", onClick: onClick, disabled: disabled, "data-theme": dataTheme, justifyContent: "center", role: "button", className: style('py-4 border border-transparent outline-none focus:border-primary-text space-x-s', disabled
-            ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
-            : 'bg-primary-main text-white hover:bg-primary-hove', className), textNode: jsx(Text, { size: "text-h4", children: label }), iconNode: icon ? (jsx(Img, { image: {
-                icon,
-                iconVersion: 'white',
-            }, className: "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$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 }) => {
-        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 ? jsx(NotFound, { ...notFound }) : null }), jsxs("div", { className: style('space-y-2xs', blocksToRender.length ? '' : 'hidden'), children: [jsxs("div", { className: style(resultsGridStyle), children: [renderBlocksList(visibleBlocks, { ...rest.options, parent: block }), isOdd(visibleBlocks.length) ? jsx(AdTile, { className: "col-span-6", ...rest }) : null] }), jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => {
-                                return (jsxs(FoldableSection, { className: style(resultsGridStyle), isUnfolded: isUnfolded, children: [renderBlocksList(hiddenBlocks, { ...rest.options, parent: block }), isOdd(hiddenBlocks.length) ? jsx(AdTile, { className: "col-span-6", ...rest }) : null] }));
-                            }, 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 isRateRow = (rateRow) => {
         return typeof rateRow?.minMonths === 'number' && typeof rateRow?.maxMonths === 'number';
     };
@@ -3545,7 +3543,7 @@
         return (jsxs(BlockWrapper, { className: style('space-y-2xs', className), defaultPadding: "p-0", version: "transparent", ...rest, children: [jsx(FiltrationForm, { filtrationSchema: filtrationSchema, resetButton: resetButton, field: field, reset: reset, children: jsxs("div", { className: "@4xl:max-w-xs", children: [jsx(CurrencyInput, { label: sumInput?.title, min: DEFAULT_MIN_SUM, max: DEFAULT_MAX_SUM, ...field('sum', {
                                     parse: (min) => ({ min: Number(min), max: DEFAULT_MAX_SUM }),
                                     format: ({ min }) => String(min),
-                                }) }), jsx(InputRange, { title: periodInput?.title, items: ['От 3 мес', 'До 5 лет'], list: months, ...field('period') })] }) }), jsx(BaseFiltrationInner, { blocksToRender: blocksToRender, ...rest })] }));
+                                }) }), jsx(InputRange, { title: periodInput?.title, items: ['От 3 мес', 'До 5 лет'], list: months, ...field('period') })] }) }), jsx(FilteredBlocks, { blocksToRender: blocksToRender, ...rest })] }));
     }, {
         childrenTypes: ['ProductBlock'],
         childSchema: (content) => ({
@@ -4254,8 +4252,8 @@
     });
 
     const SEARCH_TERM_MIN_LENGTH = 3;
-    const LocationDialog = JSX(({ foreignOffices, defaultLocation }) => {
-        const [currentLocation, selectCurrentLocation] = useLocation(defaultLocation);
+    const LocationDialog = JSX(({ foreignOffices, branches }) => {
+        const [currentLocation, selectCurrentLocation] = useLocation(branches?.default);
         const link = useLink({ isRemote: true });
         const { href } = link({ href: `/branches/${currentLocation.slug}` });
         const [query, setQuery] = useState('');
@@ -4298,10 +4296,12 @@
     const MINDBOX_EVENT_SEARCH_CLICK = 'headerSearchClick';
     const HeaderSecondaryMenu = JSX(({ className, version, ...rest }) => {
         const iconVersion = version === 'transparent' ? 'white' : 'black';
-        const [currentLocation] = useLocation(rest.defaultLocation);
+        const [currentLocation] = useLocation(rest?.branches?.default);
         const searchDialog = useSearchDialog(rest);
         const locationDialog = useLocationDialog(rest);
-        return (jsxs("div", { className: style('flex items-center gap-lg', className), role: "navigation", children: [jsx(TopItem, { flat: true, href: "#", text: currentLocation?.name, data: [
+        const openSearchDialog = useCallback(() => searchDialog.open(), [searchDialog]);
+        const openLocationDialog = useCallback(() => locationDialog.open(), [locationDialog]);
+        return (jsxs("div", { className: style('flex items-center gap-lg', className), role: "navigation", children: [rest?.branches?.visible ? (jsx(TopItem, { flat: true, href: "#", text: currentLocation?.name, data: [
                         {
                             aspectName: MINDBOX_ASPECT,
                             params: {
@@ -4310,7 +4310,7 @@
                                 eventValueText: currentLocation?.name ?? '',
                             },
                         },
-                    ], onClick: () => locationDialog.open() }), rest.officesAtms?.href ? (jsx(TopItem, { flat: true, text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ...rest.officesAtms })) : null, jsx(HeaderSecondaryMenuButton, { image: { icon: 'LoupeIcon', iconVersion }, ariaLabel: "\u041F\u043E\u0438\u0441\u043A", onClick: () => searchDialog.open(), data: [
+                    ], onClick: openLocationDialog })) : null, rest?.officesAtms?.href ? jsx(TopItem, { flat: true, ...rest.officesAtms }) : null, jsx(HeaderSecondaryMenuButton, { image: { icon: 'LoupeIcon', iconVersion }, ariaLabel: "\u041F\u043E\u0438\u0441\u043A", onClick: openSearchDialog, data: [
                         {
                             aspectName: MINDBOX_ASPECT,
                             params: {
@@ -4790,18 +4790,18 @@
         stage: [],
     };
     const MortgageFiltration = UniBlock(({ className, hotFilters, filtrationSchema = {}, resetButton, ...rest }) => {
-        const [filtrationState, { blocksToRender }, { field, reset, update }] = useFiltrationForm(initialFiltrationState, {
+        const [filtrationState, { blocksToRender }, { field, reset, update: replaceFiltrationState }] = useFiltrationForm(initialFiltrationState, {
             block: rest.block,
             page: rest.options?.page,
         });
-        const handleFiltrationStateChange = useCallback((_ = initialFiltrationState) => update(_), []);
+        const handleFiltrationStateChange = useCallback((_ = initialFiltrationState) => replaceFiltrationState(_), []);
         const tabsControlProps = useHotFilters({
             hotFilters,
             filtrationState,
             blocks: rest.block?.blocks,
             onFiltrationStateChange: handleFiltrationStateChange,
         });
-        return (jsxs(BlockWrapper, { className: style('space-y-2xs', className), defaultPadding: "p-0", version: "transparent", ...rest, children: [jsx(TabsControl, { ...tabsControlProps }), jsx(FiltrationForm, { filtrationSchema: filtrationSchema, resetButton: resetButton, field: field, reset: reset }), jsx(BaseFiltrationInner, { blocksToRender: blocksToRender, ...rest })] }));
+        return (jsxs(BlockWrapper, { className: style('space-y-2xs', className), defaultPadding: "p-0", version: "transparent", ...rest, children: [jsx(TabsControl, { ...tabsControlProps }), jsx(FiltrationForm, { filtrationSchema: filtrationSchema, resetButton: resetButton, field: field, reset: reset }), jsx(FilteredBlocks, { blocksToRender: blocksToRender, ...rest })] }));
     }, {
         childrenTypes: ['ProductBlock'],
         childSchema: (content) => content?.filtrationSchema || {},
@@ -6155,7 +6155,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.290";
+    const packageVersion = "0.14.292";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;