@redneckz/wildless-cms-uni-blocks 0.14.827 → 0.14.829

package/mobile/bundle/bundle.umd.js

@@ -1494,14 +1494,14 @@
     }
 
     const BRANCHES_URL = `${API_BASE_URI$1}/branches`;
-    const EMPTY_VALUE$3 = [];
+    const EMPTY_VALUE$2 = [];
     function useBranches(regionCode) {
-        const { data } = useAsyncData(regionCode ? `${BRANCHES_URL}?regionCode=${regionCode}` : null, fetchSafeBoxes$1);
-        return data || EMPTY_VALUE$3;
+        const { data } = useAsyncData(regionCode ? `${BRANCHES_URL}?regionCode=${regionCode}` : null, fetchSafeBoxes);
+        return data || EMPTY_VALUE$2;
     }
-    const fetchSafeBoxes$1 = async (url) => {
+    const fetchSafeBoxes = async (url) => {
         const result = await fetchJSON(url, { method: 'GET' });
-        return result || EMPTY_VALUE$3;
+        return result || EMPTY_VALUE$2;
     };
 
     const REGIONS_URL$1 = '/branchesByRegions';
@@ -5278,7 +5278,7 @@
         title: 'Вы уверены, что хотите отказаться от запроса в БКИ',
         description: 'Согласие на запрос в Бюро кредитных историй (БКИ) повысит вероятность одобрения',
     };
-    const ITEMS$1 = [
+    const ITEMS = [
         { id: 'SIGNED', text: 'Подписать' },
         { id: 'REFUSE', text: 'Отказаться' },
     ];
@@ -5295,7 +5295,7 @@
             setShowRefuseContent(value === 'REFUSE');
         }, []);
         const consentText = showRefuseContent ? refuseConsentText : defaultConsentText;
-        return (jsx(Dialog, { className: "my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg px-5xl", onClose: onClose, children: jsxs("div", { className: "flex flex-col gap-xl items-center", children: [jsx("div", { role: "button", onClick: openDocument, children: jsx(Heading, { className: "text-center text-balance", headingType: "h2", title: consentText.title }) }), jsx(Paragraph, { align: "text-center", children: consentText.description }), jsx(RadioButtonGroup, { className: "whitespace-normal", orientation: "horizontal", items: ITEMS$1, value: confirmStatus, onChange: handleConfirmChange }), jsx(Button, { disabled: !confirmStatus, type: "button", onClick: handleSubmit, children: "\u0414\u0430\u043B\u0435\u0435" })] }) }));
+        return (jsx(Dialog, { className: "my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-lg px-5xl", onClose: onClose, children: jsxs("div", { className: "flex flex-col gap-xl items-center", children: [jsx("div", { role: "button", onClick: openDocument, children: jsx(Heading, { className: "text-center text-balance", headingType: "h2", title: consentText.title }) }), jsx(Paragraph, { align: "text-center", children: consentText.description }), jsx(RadioButtonGroup, { className: "whitespace-normal", orientation: "horizontal", items: ITEMS, value: confirmStatus, onChange: handleConfirmChange }), jsx(Button, { disabled: !confirmStatus, type: "button", onClick: handleSubmit, children: "\u0414\u0430\u043B\u0435\u0435" })] }) }));
     });
 
     const useConsentBkiDialog = (onClose) => {
@@ -6602,9 +6602,9 @@
     };
 
     const EMPTY_SCHEMA = {};
-    const initialFiltrationState$3 = {};
+    const initialFiltrationState$2 = {};
     const BankAccountFiltration = UniBlock(({ className, filtrationSchema = EMPTY_SCHEMA, consumerField = {}, resetButton, ...rest }) => {
-        const [, { blocksToRender }, { field, reset }] = useFiltrationForm(initialFiltrationState$3, {
+        const [, { blocksToRender }, { field, reset }] = useFiltrationForm(initialFiltrationState$2, {
             block: rest.block,
             page: rest.options?.page,
         });
@@ -7832,7 +7832,11 @@
 
     const renderStep = ({ sections, field, step, params, }) => sections?.map(({ inputs: origInputs = [], columns, title, condition }, i) => {
         const inputs = calculateInputs(getValue(field))(origInputs, step);
-        return (jsxs("div", { className: style(inputColumnStyles(columns), 'grid gap-x-m'), children: [!checkCondition({ condition }, getValue(field)) ? renderTitle(title) : null, renderInputs({ field, inputs, params })] }, `section-${i}`));
+        const cleanElements = [
+            !checkCondition({ condition }, getValue(field)) ? renderTitle(title) : null,
+            ...renderInputs({ field, inputs, params }),
+        ].filter(Boolean);
+        return cleanElements.length ? (jsx("div", { className: style(inputColumnStyles(columns), 'grid gap-x-m'), children: cleanElements }, `section-${i}`)) : null;
     });
     const getValue = (field) => (name) => field(name)?.value;
 
@@ -8974,7 +8978,7 @@
 
     const DEFAULT_MIN_SUM = 500;
     const DEFAULT_MAX_SUM = 1000000000;
-    const initialFiltrationState$2 = {
+    const initialFiltrationState$1 = {
         sum: {
             min: 10000,
             max: DEFAULT_MAX_SUM,
@@ -8982,7 +8986,7 @@
         period: 3,
     };
     const DepositFiltration = UniBlock(({ className, filtrationSchema = {}, resetButton, sumInput, periodInput, ...rest }) => {
-        const [, { blocksToRender, blocksWithProps }, { field, reset }] = useFiltrationForm(initialFiltrationState$2, {
+        const [, { blocksToRender, blocksWithProps }, { field, reset }] = useFiltrationForm(initialFiltrationState$1, {
             block: rest.block,
             page: rest.options?.page,
             normalize: (content) => ({ ...content, period: getPeriod(content) }),
@@ -9093,7 +9097,7 @@
     };
 
     const DEFAULT_ITEMS_COUNT = 10;
-    const initialFiltrationState$1 = {
+    const initialFiltrationState = {
         startDate: undefined,
         endDate: undefined,
         query: '',
@@ -9101,7 +9105,7 @@
     const Depository = UniBlock(({ className, ...rest }) => {
         const [currentPage, setCurrentPage] = useState(0);
         const [itemCount, setItemCount] = useState(DEFAULT_ITEMS_COUNT);
-        const [filtrationState, { field, reset }] = useForm(initialFiltrationState$1);
+        const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
         const { totalPages = 0, items = [] } = useDepository({
             size: itemCount,
             page: currentPage,
@@ -9704,153 +9708,6 @@
         return (jsx(BlockWrapper, { className: style('min-h-80', className), padding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-6xl", title: jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', align) }), rightImage: img, buttons: renderButtonsSection(buttons, { className: 'flex-wrap' }), children: [description ? (jsx(Text, { size: "text-xl", "font-weight": "font-light", children: description })) : null, jsxs("div", { className: style('gap-m', 'flex flex-1 flex-col', 'flex-col items-start @xl:flex-row @xl:items-center'), children: [__html ? jsx(RichText, { __html: __html, itemSize: "list-m" }) : null, jsx(Text, { size: "text-m", "font-weight": "font-light", color: "text-secondary-text", children: additionalDescription }), qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md @xl:-order-1', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, image?.src ? jsx(Img, { className: "lg:hidden", image: image }) : null] })] }) }));
     });
 
-    const getVersion = (isPrimary, type) => isPrimary && type !== 'underlined' ? 'primary' : 'secondary';
-
-    const getBadgeCount = (blocks = [], filter = {}) => blocks.filter(({ content = {} }) => targetMatchPattern(filter, content)).length;
-
-    const scalarCmp = (a, b) => a === b;
-    const arrCmp = (cmp = scalarCmp) => (a, b) => a === b || Boolean(a && b && a.length === b.length && a.every((_, i) => cmp(_, b[i])));
-    const objCmp = (cmp) => (a, b) => a === b ||
-        Boolean(a &&
-            b &&
-            Object.keys(a).length === Object.keys(b).length &&
-            Object.entries(a).every(([key, value]) => cmp(value, b[key])));
-    function combineBoolCmps(...comparators) {
-        return (a, b) => comparators.some((cmp) => cmp(a, b));
-    }
-
-    const hotFilterRecordCmp = objCmp(combineBoolCmps(scalarCmp, arrCmp()));
-
-    const EMPTY_ARR = [];
-    const EMPTY_OBJ = {};
-    const useHotFilters = ({ hotFilters = EMPTY_ARR, filtrationState = EMPTY_OBJ, blocks = EMPTY_ARR, onFiltrationStateChange, }) => {
-        const activeItemIndex = useMemo(() => Math.max(0, hotFilters.findIndex((_) => hotFilterRecordCmp(_.filter, filtrationState))), [hotFilters, filtrationState]);
-        const items = useMemo(() => hotFilters.map((_) => ({
-            text: _.text,
-            count: getBadgeCount(blocks, _.filter),
-            version: getVersion(_ === hotFilters[activeItemIndex]),
-        })), [hotFilters, blocks, activeItemIndex]);
-        const handleChange = useCallback((_) => {
-            onFiltrationStateChange(hotFilters[items.indexOf(_)].filter);
-        }, [hotFilters, items]);
-        return {
-            activeItem: items[activeItemIndex],
-            items: items,
-            onChange: handleChange,
-        };
-    };
-
-    const badgeBgStyleMap = {
-        primary: 'bg-white/30',
-        secondary: 'bg-main-divider',
-    };
-    const badgeTextColorStyleMap = {
-        primary: { desktop: 'text-white', mobile: 'text-primary-text' },
-        secondary: { desktop: 'text-secondary-text', mobile: 'text-secondary-text' },
-    };
-    const Badge = JSX(({ count, version = 'secondary' }) => {
-        const isMobileMode = useMobileMode();
-        const badgeBgStyle = isMobileMode ? 'bg-main-divider' : badgeBgStyleMap[version];
-        const textStyle = badgeTextColorStyleMap[version][isMobileMode ? 'mobile' : 'desktop'];
-        return (jsx("div", { className: style('w-6 h-6 rounded-full flex items-center justify-center', badgeBgStyle), role: "status", "aria-label": `Количество ${count} доступных программ и сервисов`, children: jsx(Text, { size: "text-xs", color: textStyle, children: count }) }));
-    });
-
-    const getButtonClassNames = (isActive) => ({
-        btn: `w-96 ${isActive ? 'p-m border-none bg-primary-main text-white' : 'p-s ease-in duration-300 bg-white'}`,
-        text: isActive ? 'mb-xs text-xl' : 'mb-2xs text-l text-primary-text',
-        desc: `font-light ${isActive ? 'text-l text-white' : 'text-m text-secondary-text'}`,
-        icon: isActive ? '' : 'text-primary-main',
-        iconVersion: (isActive ? 'white' : 'normal'),
-        oldText: 'text-m text-center',
-        oldDesc: 'text-m-light',
-    });
-    const renderTabItemInner = ({ text, description, icon, isActive, type, }) => {
-        const buttonClassNames = getButtonClassNames(isActive);
-        return (jsxs("div", { className: style('cursor-pointer text-left border-b-0 flex gap-2xs'), "aria-label": text, "aria-labelledby": `${text}-label`, children: [icon ? (jsx(Img, { className: style('h-6 w-6 min-w-6 min-h-6', buttonClassNames.icon), image: {
-                        ...icon,
-                        iconVersion: icon?.iconVersion ?? buttonClassNames.iconVersion,
-                    }, width: "24", height: "24", alt: text })) : null, jsxs("div", { className: "border-0", children: [jsx("div", { className: type === 'animated' ? buttonClassNames.text : buttonClassNames.oldText, children: text }), jsx("div", { className: type === 'animated' ? buttonClassNames.desc : buttonClassNames.oldDesc, children: description })] })] }));
-    };
-
-    const tabPaddingStyleMap = {
-        default: 'px-xs',
-        underlined: 'px-m',
-        animated: 'px-m border border-gray cursor-pointer text-left border-b-0 mt-auto flex gap-2xs',
-    };
-    const tabTextStyle = 'text-secondary-text hover:text-primary-main';
-    const activeTabTextStyleMap = {
-        default: 'text-black sm:text-white',
-        underlined: 'text-primary-main border-b-2',
-        animated: 'text-white sm:text-white',
-    };
-    const tabBgStyleMap = {
-        default: 'bg-white',
-        underlined: 'bg-white',
-        animated: 'p-1 ease-in duration-300 bg-white text-primary-text h-[70px] w-96',
-    };
-    const activeTabBgStyleMap = {
-        default: 'bg-white sm:bg-primary-main',
-        underlined: 'bg-white',
-        animated: 'p-2 border-none bg-primary-main text-white h-20 w-96',
-    };
-    const TabItemInner = JSX(({ tag = 'div', item = {}, isActive = false, type = 'default', onClick }) => {
-        const Tag = tag;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { text, description, icon, count, tabName, ...link } = item;
-        return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), "aria-label": "\u0421\u043F\u0438\u0441\u043E\u043A \u0442\u0430\u0431\u043E\u0432", onClick: onClick, ...link, children: jsxs("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), role: "tab", "aria-label": `Таб ${text}`, children: [renderTabItemInner({
-                        text,
-                        description,
-                        icon,
-                        isActive,
-                        type,
-                    }), Number.isInteger(count) ? (jsx("div", { className: "ml-xs", role: "status", "aria-label": `Количество программ и сервисов ${count}`, children: jsx(Badge, { count: count, version: getVersion(isActive, type) }) })) : null] }) }));
-    });
-
-    const TabItem = JSX((props) => props?.item?.href ? jsx(LinkTabItem, { ...props }) : jsx(ButtonTabItem, { ...props }));
-    const LinkTabItem = JSX((props) => {
-        const link = useLink();
-        const handleClick = useCallback(() => {
-            props.onClick && props.onClick(props.item || {});
-        }, [props.onClick, props.item]);
-        const { onClick, ...item } = link({ ...props.item, onClick: handleClick });
-        return jsx(TabItemInner, { ...props, tag: "a", item: item, onClick: onClick });
-    });
-    // TODO: Update handlerDecorator (support buttons?)
-    const ButtonTabItem = JSX(({ item = {}, onClick, ...rest }) => {
-        const handleClick = useCallback(() => {
-            onClick && onClick(item);
-        }, [onClick, item]);
-        return jsx(TabItemInner, { item: item, onClick: handleClick, ...rest });
-    });
-
-    const renderTab = (activeTab, onClick, type) => (tab, i) => (jsx(TabItem, { isActive: tab === activeTab, onClick: onClick, type: type, item: tab }, String(i)));
-
-    const TabsControl = JSX(({ className, tabsType = 'default', items = [], activeItem, onChange }) => (jsx("div", { className: style('flex gap-x-2xs overflow-x-auto no-scrollbar', className), role: "tabpanel", "aria-label": "\u041F\u0430\u043D\u0435\u043B\u044C \u0443\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u044F \u0442\u0430\u0431\u0430\u043C\u0438", children: items.map(renderTab(activeItem, onChange, tabsType)) })));
-
-    const initialFiltrationState = {
-        categories: [],
-        extraOptions: [],
-        propertyType: [],
-        stage: [],
-    };
-    const MortgageFiltration = UniBlock(({ className, hotFilters, filtrationSchema = {}, resetButton, ...rest }) => {
-        const [filtrationState, { blocksToRender }, { field, reset, update: replaceFiltrationState }] = useFiltrationForm(initialFiltrationState, {
-            block: rest.block,
-            page: rest.options?.page,
-        });
-        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$1, { filtrationSchema: filtrationSchema, resetButton: resetButton, field: field, reset: reset }), jsx(FilteredBlocks, { blocksToRender: blocksToRender, ...rest })] }));
-    }, {
-        childrenTypes: ['ProductBlock'],
-        childSchema: (content) => content?.filtrationSchema || {},
-    });
-
     const COMMON_FILTERS_STYLES = 'flex flex-col sm:flex-row sm:flex-wrap gap-3xl pb-2xl';
     const FiltrationForm = JSX(({ filters, field: { field, reset }, onlyOffice, labels }) => {
         const visibleFiltersNum = onlyOffice ? 5 : 6;
@@ -9862,6 +9719,8 @@
         return (jsx("div", { children: filters?.length ? (jsx("div", { children: jsxs(Foldable, { children: [jsxs("div", { children: [jsx("div", { className: COMMON_FILTERS_STYLES, children: visibleFilters }), jsx(FoldableSection, { className: COMMON_FILTERS_STYLES, isUnfolded: isUnfolded, children: hiddenFilters })] }), jsxs("div", { className: "flex space-x-lg", children: [onlyOffice ? (jsx(DefaultFoldButton, { label: isUnfolded ? 'Меньше фильтров' : 'Больше фильтров', isUnfolded: isUnfolded, embedded: true, short: true, onClick: toggle })) : null, jsxs(Button, { embedded: true, onClick: reset, children: [jsx(ButtonTitle, { children: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440" }), jsx(Icon, { name: "CloseIcon", size: "small" })] })] })] }) })) : null }));
     });
 
+    const getVersion = (isPrimary, type) => isPrimary && type !== 'underlined' ? 'primary' : 'secondary';
+
     const renderButtonsGroup = (data, activeButton, onButtonClick) => {
         const allButtonVersion = getVersion(activeButton === 'all');
         const businessButtonVersion = getVersion(activeButton === 'business');
@@ -9924,15 +9783,15 @@
         return { header, body };
     };
 
-    const EMPTY_VALUE$2 = [];
+    const EMPTY_VALUE$1 = [];
     function useAtms(regionCode) {
         const { data, error } = useAsyncData(`${API_BASE_URI$1}/atms?regionCode=${regionCode}`, fetchMap$1);
         const isLoad = !data && !error;
-        return { data: data || EMPTY_VALUE$2, isLoad };
+        return { data: data || EMPTY_VALUE$1, isLoad };
     }
     const fetchMap$1 = async (url) => {
         const result = await fetchJSON(url, { method: 'GET' });
-        return Array.isArray(result) ? result : EMPTY_VALUE$2;
+        return Array.isArray(result) ? result : EMPTY_VALUE$1;
     };
 
     const INITIAL_FILTRATION_STATE = {
@@ -9985,17 +9844,17 @@
         return { header, body };
     };
 
-    const EMPTY_VALUE$1 = { branches: [], remoteWorkplaces: [] };
+    const EMPTY_VALUE = { branches: [], remoteWorkplaces: [] };
     function useOffices(regionCode = '000') {
         const { data, error } = useAsyncData(`${API_BASE_URI$1}/branchesAndRemoteWorkplaces?regionCode=${encodeURIComponent(regionCode)}`, fetchMap);
         const isLoad = !data && !error;
-        return { data: data || EMPTY_VALUE$1, isLoad };
+        return { data: data || EMPTY_VALUE, isLoad };
     }
     const fetchMap = async (url) => {
         const result = await fetchJSON(url, {
             method: 'GET',
         });
-        return result || EMPTY_VALUE$1;
+        return result || EMPTY_VALUE;
     };
 
     const OfficesMap = JSX(({ className }) => {
@@ -10010,12 +9869,6 @@
         return (jsx(BlockWrapper, { version: "transparent", className: style(className), defaultPadding: "p-0", ...rest, children: dataType === 'offices' ? jsx(OfficesMap, {}) : jsx(AtmsMap, { descriptionData: data }) }));
     });
 
-    const Placeholder = JSX(({ className, title, description = 'Блок в разработке...', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border', className), ...rest, children: [jsx(Headline, { className: "max-w-[600px]", title: title, description: description, headlineVersion: "L", align: "text-left", isEmbedded: true }), jsx(Shimmer, {})] })));
-
-    const ProductGallery = JSX(({ className, padding, slides = [], ...rest }) => (jsx(BlockWrapper, { className: style('overflow-hidden relative', className), padding: padding, ...rest, children: jsx(SwipeListControl, { gap: 0, padding: 0, children: slides
-                .map((s) => s.productBlock)
-                .map((_, i) => (jsx("div", { className: "box-border h-full", children: jsx(BaseProductTile, { className: "px-5 h-full", headlineVersion: "L", ..._, ...rest }) }, String(i)))) }) })));
-
     const RepresentativeOfficeInfo = JSX(({ address, email, telephone, button, className = '', __html, richVersion, icon, title, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border text-left space-y-s', className), version: version, ...rest, children: [jsxs("div", { className: "w-full flex justify-between flex-row-reverse", children: [isIcon(icon) ? (jsx("div", { className: 'w-10 h-7 sm:w-24 sm:h-16', children: jsx(Img, { image: icon }) })) : null, title ? jsx(Heading, { headingType: "h3", as: "h3", title: title }) : null] }), jsxs("div", { className: "w-full space-y-m", children: [__html ? renderDescriptionBlock({ __html, richVersion }) : null, renderBlock({
                         label: 'Адрес',
                         data: address,
@@ -10050,133 +9903,6 @@
         return (jsx(BlockWrapper, { className: style('w-full border-0 border-b border-solid border-main-divider last:border-b-0', className), defaultPadding: "p-0", tag: "div", version: "transparent", role: role, ...rest, children: jsxs(Foldable, { children: [isFoldButtonOnTop ? foldButton : foldableSection, isFoldButtonOnTop ? foldableSection : foldButton] }) }));
     }, { childrenTypes: { exclude: ['RollupItem'] } });
 
-    const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "font-sans flex gap-s items-center relative cursor-pointer", children: [jsx("input", { className: style(inputValidStyle.split(' ').filter((_) => _ !== 'rounded'), defaultCheckStyle, 'flex justify-center items-center after:block after:w-2.5 after:h-2.5 after:rounded-full rounded-full', 'checked:border-2 checked:!border-primary-main focus:checked:border-primary-main checked:after:bg-primary-main'), type: "radio", value: value, name: name, checked: checked, onChange: (_) => onChange?.(_.target.value), role: "radio" }), text ? jsx(Text, { color: "text-primary-text", children: text }) : null] }) })));
-
-    const RadioButtons = JSX(({ className = '' }) => {
-        const [selectedOption, setSelectedOption] = useState('option2');
-        const onChange = useCallback((_) => setSelectedOption(_), []);
-        return (jsxs("div", { className: style('order-4', className), role: "radiogroup", children: [jsx(Radio, { className: "mb-xs", name: "contractType", text: "\u041F\u0440\u043E\u0441\u0442\u043E\u0435 \u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435", value: "option1", checked: selectedOption === 'option1', onChange: onChange }), jsx(Radio, { name: "contractType", text: "\u0421\u0434\u0435\u043B\u043A\u0430 \u0441 \u043D\u0435\u0434\u0432\u0438\u0436\u0438\u043C\u043E\u0441\u0442\u044C\u044E", value: "option2", checked: selectedOption === 'option2', onChange: onChange })] }));
-    });
-
-    const WrapperSelect = JSX(({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label }) => {
-        const dataFormat = data
-            .filter(Boolean)
-            .map((_) => ({ key: _?.[fieldValue || fieldLabel], text: _?.[fieldLabel] }));
-        const selectedObj = dataFormat.find((_) => _.key === selected);
-        return (jsx(Select, { options: dataFormat, label: label, placeholder: placeholder || selected, onChange: (_) => setSelected(_.key), value: selectedObj }));
-    });
-
-    const RegionsAndBranches = JSX(({ regions = [], selectedRegion, onSelectedRegion: onSelectedRegion, branches = [], selectedBranch, onSelectedBranch, }) => (jsxs("div", { className: "flex flex-col @xl:flex-row gap-m order-1", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: regions, fieldValue: "code", fieldLabel: "name", selected: selectedRegion, setSelected: onSelectedRegion, label: "\u0420\u0435\u0433\u0438\u043E\u043D" }) }), jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: branches, fieldValue: "branchCode", fieldLabel: "address", selected: selectedBranch, setSelected: onSelectedBranch, label: "\u041E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435" }) })] })));
-
-    const ITEMS = ['От 1 дня', 'До 365 дней'];
-    const MIN = 1;
-    const MAX = 365;
-    const RentalPeriod = JSX(({ days, setDays }) => (jsxs("div", { className: "order-1", children: [jsx(Text, { size: "text-m", font: "font-light", children: "\u0421\u0440\u043E\u043A \u0430\u0440\u0435\u043D\u0434\u044B" }), jsx(InputRange, { min: MIN, max: MAX, value: days, items: ITEMS, onChange: setDays })] })));
-
-    const SafeBoxCases = JSX(({ caseVolumes = [], selectedCaseVolume, onSelectedCaseVolume, safeBoxCases = [], selectedBoxSize, onSelectedBoxSize, }) => (jsxs("div", { className: "flex flex-col @xl:flex-row gap-m order-1", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: caseVolumes, fieldLabel: "volume", selected: selectedCaseVolume, setSelected: onSelectedCaseVolume, label: "\u0420\u0430\u0437\u043C\u0435\u0440", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0430\u0437\u043C\u0435\u0440" }) }), jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: safeBoxCases, fieldLabel: "safeBoxCasesSize", selected: selectedBoxSize, setSelected: onSelectedBoxSize, label: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B \u044F\u0447\u0435\u0439\u043A\u0438, \u043C\u043C (\u0412\u0445\u0428\u0445\u0414)", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440 \u044F\u0447\u0435\u0439\u043A\u0438" }) })] })));
-
-    const SafeDepositRentalFields = JSX(({ regions, selectedRegion, branches, selectedBranch, days, selectedCaseVolume, selectedBoxSize, safeBoxCases, caseVolumes, onChange, onClick, }) => (jsxs("div", { className: "contents @xl:block flex-1 space-y-xl", children: [jsx(RegionsAndBranches, { regions: regions, selectedRegion: selectedRegion, onSelectedRegion: (value) => onChange({ selectedRegion: value }), branches: branches, selectedBranch: selectedBranch, onSelectedBranch: onSelectedBranch(onChange) }), jsx(RentalPeriod, { days: days, setDays: (value) => onChange({ days: value }) }), jsx(SafeBoxCases, { caseVolumes: caseVolumes, selectedCaseVolume: selectedCaseVolume, onSelectedCaseVolume: onSelectedCaseVolume(onChange), safeBoxCases: safeBoxCases, selectedBoxSize: selectedBoxSize, onSelectedBoxSize: (value) => onChange({ selectedBoxSize: value }) }), jsx("div", { className: "order-4", children: jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: "\u0422\u0438\u043F \u0434\u043E\u0433\u043E\u0432\u043E\u0440\u0430" }) }), jsxs("div", { className: "contents @md:flex justify-between items-center gap-m", children: [jsx(RadioButtons, {}), jsx(Button, { className: "order-6", version: "primary", onClick: onClick, children: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435" })] })] })));
-    const onSelectedBranch = (onChange) => (value) => {
-        onChange({ selectedBranch: value, selectedCaseVolume: '', selectedBoxSize: '' });
-    };
-    const onSelectedCaseVolume = (onChange) => (value) => {
-        onChange({ selectedCaseVolume: value, selectedBoxSize: '' });
-    };
-
-    const SafeDepositRentalTotal = JSX(({ days, tariffs = [] }) => {
-        const price = calculatePrice(days, tariffs);
-        const imageDescription = 'На рисунке изображена пачка листов\nформата А4';
-        return (jsxs("div", { className: "contents @xl:flex flex-col justify-between gap-xl order-2", children: [jsxs("div", { className: "flex flex-col @xl:flex-row gap-x-6xl gap-y-2xl order-5 @xl:order-none py-2xl @xl:py-0 border-t border-main-divider @xl:border-none", children: [renderTotal('Аренда за', days), renderTotal('Цена', price + ' ₽')] }), jsx("div", { className: "@xl:hidden order-3 mb-xs", children: jsx(Paragraph, { size: "text-s", font: "font-light", color: "text-secondary-text", children: imageDescription }) }), jsxs("div", { className: "flex flex-col items-center gap-s order-3 @xl:order-none mb-xl @xl:mb-0 bg-primary-main py-s @xl:p-3xl text-center", children: [jsx(Icon, { className: "@xl:h-60", name: "PackA4Icon" }), jsx("div", { className: "hidden @xl:inline opacity-80 whitespace-pre-line", children: jsx(Paragraph, { size: "text-s", font: "font-light", color: "text-white", children: imageDescription }) })] })] }));
-    });
-    const renderTotal = (label, total) => (jsxs("div", { className: "flex justify-between items-center gap-y-xs @xl:flex-col @xl:items-start", children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: label }), jsx("span", { className: "text-l @xl:text-h3 text-primary-text", children: total })] }));
-    const calculatePrice = (days, tariffs) => {
-        const tariffType = getTariffType(days);
-        const tariffValue = tariffs?.find((_) => _.tariffType === String(tariffType))?.tariffValue || 0;
-        return days * tariffValue;
-    };
-    const getTariffType = (days) => {
-        let tariffType = 1;
-        switch (true) {
-            case days > 30 && days <= 90:
-                tariffType = 2;
-                break;
-            case days > 90 && days <= 180:
-                tariffType = 3;
-                break;
-            case days > 180 && days <= 365:
-                tariffType = 4;
-                break;
-        }
-        return tariffType;
-    };
-
-    const getCoordinates = (data) => {
-        const getBalloon = () => void 0;
-        if (Array.isArray(data)) {
-            return data
-                .map((_) => ({
-                coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)].filter(Boolean),
-                content: getBalloon(),
-            }))
-                .filter((_) => _.coords && _.coords.length === 2);
-        }
-        if (data?.gpsLatitude && data?.gpsLongitude) {
-            return [{ coords: [data.gpsLatitude, data.gpsLongitude] }];
-        }
-        return [];
-    };
-    const getBranch = (branches, selectedBranch) => branches.find((_) => _.branchCode === selectedBranch);
-
-    const SafeDepositRentalForm = JSX((props) => {
-        const { regions, data, branches, onChange, onClick } = props;
-        useEffect(() => {
-            onChange({
-                selectedBranch: '',
-                selectedCaseVolume: '',
-                selectedBoxSize: '',
-            });
-        }, [data.selectedRegion, onChange]);
-        const branch = getBranch(branches, data.selectedBranch);
-        const caseVolumes = getCaseVolumes(branch?.safeBoxCaseVolumes);
-        const safeBoxCases = getCaseVolume(branch?.safeBoxCaseVolumes, data.selectedCaseVolume)?.safeBoxCases;
-        const tariffs = getTariffs(safeBoxCases, data.selectedBoxSize);
-        return (jsxs("div", { className: "flex flex-col @4xl:flex-row gap-4xl align-top", children: [jsx(SafeDepositRentalFields, { ...data, regions: regions, onClick: onClick, branches: branches, caseVolumes: caseVolumes, safeBoxCases: safeBoxCases, onChange: onChange }), jsx(SafeDepositRentalTotal, { days: data.days, tariffs: tariffs })] }));
-    });
-    const getCaseVolumes = (safeBoxCaseVolumes) => safeBoxCaseVolumes?.length ? safeBoxCaseVolumes?.filter((_) => _?.safeBoxCases?.length) : [];
-    const getCaseVolume = (caseVolumes, selectedCaseVolume) => caseVolumes?.find((_) => _.volume === selectedCaseVolume);
-    const getTariffs = (safeBoxCases, selectedBoxSize) => safeBoxCases?.find((_) => _.safeBoxCasesSize === selectedBoxSize)?.tariffs;
-
-    const SAFEBOXES_URL = `${API_BASE_URI$1}/safeboxes`;
-    const EMPTY_VALUE = [];
-    function useSafeBoxes(regionCode) {
-        const { data } = useAsyncData(regionCode ? `${SAFEBOXES_URL}?regionCode=${regionCode}` : null, fetchSafeBoxes);
-        return data || EMPTY_VALUE;
-    }
-    const fetchSafeBoxes = async (url) => {
-        const result = await fetchJSON(url, { method: 'GET' });
-        return result || EMPTY_VALUE;
-    };
-
-    const DEFAULT_DAYS = 26;
-    const SafeDepositRental = JSX(({ title, footnote, className = '', ...rest }) => {
-        const [showMap, setShowMap] = useState(false);
-        const handleShowMap = useCallback(() => setShowMap((_) => !_), []);
-        const [safeDepositState, setStateDepositState] = useState({
-            selectedRegion: '',
-            selectedBranch: '',
-            selectedCaseVolume: '',
-            selectedBoxSize: '',
-            days: DEFAULT_DAYS,
-        });
-        const regions = useRegions();
-        const selectedRegion = normalizeSelectedRegion(safeDepositState.selectedRegion, regions);
-        const branches = useSafeBoxes(selectedRegion);
-        const handleChangeSafeDepositState = useCallback((state) => setStateDepositState((oldState) => ({ ...oldState, ...state })), [setStateDepositState]);
-        const points = getCoordinates(getBranch(branches, safeDepositState.selectedBranch) || branches);
-        return (jsxs(BlockWrapper, { className: className, defaultPadding: "", ...rest, children: [jsxs("div", { className: "p-4xl space-y-xl", children: [title ? (jsx(Heading, { title: title, headingType: "h3", as: "h2", className: "text-primary-text mb-s text-center" })) : null, jsx(SafeDepositRentalForm, { regions: regions, branches: branches, data: { ...safeDepositState, selectedRegion }, onClick: handleShowMap, onChange: handleChangeSafeDepositState }), footnote ? (jsx(Paragraph, { size: "text-s", font: "font-light", children: footnote })) : null] }), points.length && showMap ? jsx(YandexMap, { points: points, className: "h-[640px]" }) : null] }));
-    });
-    const normalizeSelectedRegion = (selectedRegion, regions) => !selectedRegion && regions?.length && regions[0]?.code ? regions[0].code : selectedRegion;
-
     const getIconTextStyle = (version) => version === 'secondary' ? 'group-data-primary:text-white' : 'text-secondary-text';
 
     const STEPS_BLOCK_STYLE = {
@@ -10493,6 +10219,91 @@
         return href ? new URL(href).searchParams.get(params) : null;
     };
 
+    const badgeBgStyleMap = {
+        primary: 'bg-white/30',
+        secondary: 'bg-main-divider',
+    };
+    const badgeTextColorStyleMap = {
+        primary: { desktop: 'text-white', mobile: 'text-primary-text' },
+        secondary: { desktop: 'text-secondary-text', mobile: 'text-secondary-text' },
+    };
+    const Badge = JSX(({ count, version = 'secondary' }) => {
+        const isMobileMode = useMobileMode();
+        const badgeBgStyle = isMobileMode ? 'bg-main-divider' : badgeBgStyleMap[version];
+        const textStyle = badgeTextColorStyleMap[version][isMobileMode ? 'mobile' : 'desktop'];
+        return (jsx("div", { className: style('w-6 h-6 rounded-full flex items-center justify-center', badgeBgStyle), role: "status", "aria-label": `Количество ${count} доступных программ и сервисов`, children: jsx(Text, { size: "text-xs", color: textStyle, children: count }) }));
+    });
+
+    const getButtonClassNames = (isActive) => ({
+        btn: `w-96 ${isActive ? 'p-m border-none bg-primary-main text-white' : 'p-s ease-in duration-300 bg-white'}`,
+        text: isActive ? 'mb-xs text-xl' : 'mb-2xs text-l text-primary-text',
+        desc: `font-light ${isActive ? 'text-l text-white' : 'text-m text-secondary-text'}`,
+        icon: isActive ? '' : 'text-primary-main',
+        iconVersion: (isActive ? 'white' : 'normal'),
+        oldText: 'text-m text-center',
+        oldDesc: 'text-m-light',
+    });
+    const renderTabItemInner = ({ text, description, icon, isActive, type, }) => {
+        const buttonClassNames = getButtonClassNames(isActive);
+        return (jsxs("div", { className: style('cursor-pointer text-left border-b-0 flex gap-2xs'), "aria-label": text, "aria-labelledby": `${text}-label`, children: [icon ? (jsx(Img, { className: style('h-6 w-6 min-w-6 min-h-6', buttonClassNames.icon), image: {
+                        ...icon,
+                        iconVersion: icon?.iconVersion ?? buttonClassNames.iconVersion,
+                    }, width: "24", height: "24", alt: text })) : null, jsxs("div", { className: "border-0", children: [jsx("div", { className: type === 'animated' ? buttonClassNames.text : buttonClassNames.oldText, children: text }), jsx("div", { className: type === 'animated' ? buttonClassNames.desc : buttonClassNames.oldDesc, children: description })] })] }));
+    };
+
+    const tabPaddingStyleMap = {
+        default: 'px-xs',
+        underlined: 'px-m',
+        animated: 'px-m border border-gray cursor-pointer text-left border-b-0 mt-auto flex gap-2xs',
+    };
+    const tabTextStyle = 'text-secondary-text hover:text-primary-main';
+    const activeTabTextStyleMap = {
+        default: 'text-black sm:text-white',
+        underlined: 'text-primary-main border-b-2',
+        animated: 'text-white sm:text-white',
+    };
+    const tabBgStyleMap = {
+        default: 'bg-white',
+        underlined: 'bg-white',
+        animated: 'p-1 ease-in duration-300 bg-white text-primary-text h-[70px] w-96',
+    };
+    const activeTabBgStyleMap = {
+        default: 'bg-white sm:bg-primary-main',
+        underlined: 'bg-white',
+        animated: 'p-2 border-none bg-primary-main text-white h-20 w-96',
+    };
+    const TabItemInner = JSX(({ tag = 'div', item = {}, isActive = false, type = 'default', onClick }) => {
+        const Tag = tag;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { text, description, icon, count, tabName, ...link } = item;
+        return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), "aria-label": "\u0421\u043F\u0438\u0441\u043E\u043A \u0442\u0430\u0431\u043E\u0432", onClick: onClick, ...link, children: jsxs("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), role: "tab", "aria-label": `Таб ${text}`, children: [renderTabItemInner({
+                        text,
+                        description,
+                        icon,
+                        isActive,
+                        type,
+                    }), Number.isInteger(count) ? (jsx("div", { className: "ml-xs", role: "status", "aria-label": `Количество программ и сервисов ${count}`, children: jsx(Badge, { count: count, version: getVersion(isActive, type) }) })) : null] }) }));
+    });
+
+    const TabItem = JSX((props) => props?.item?.href ? jsx(LinkTabItem, { ...props }) : jsx(ButtonTabItem, { ...props }));
+    const LinkTabItem = JSX((props) => {
+        const link = useLink();
+        const handleClick = useCallback(() => {
+            props.onClick && props.onClick(props.item || {});
+        }, [props.onClick, props.item]);
+        const { onClick, ...item } = link({ ...props.item, onClick: handleClick });
+        return jsx(TabItemInner, { ...props, tag: "a", item: item, onClick: onClick });
+    });
+    // TODO: Update handlerDecorator (support buttons?)
+    const ButtonTabItem = JSX(({ item = {}, onClick, ...rest }) => {
+        const handleClick = useCallback(() => {
+            onClick && onClick(item);
+        }, [onClick, item]);
+        return jsx(TabItemInner, { item: item, onClick: handleClick, ...rest });
+    });
+
+    const renderTab = (activeTab, onClick, type) => (tab, i) => (jsx(TabItem, { isActive: tab === activeTab, onClick: onClick, type: type, item: tab }, String(i)));
+
     const scrollButtonStyle = 'hidden sm:flex absolute z-40';
     const scrollStyle = {
         default: {
@@ -10830,15 +10641,11 @@
         ImgBlock,
         LinkDocs,
         MobileAppTile,
-        MortgageFiltration,
         OfficesAtmsMap,
-        Placeholder,
         ProductBlock,
-        ProductGallery,
         RepresentativeOfficeInfo,
         RichTextBlock,
         RollupItem,
-        SafeDepositRental,
         StepsBlock,
         StickyBottomMenu,
         TabsLayout,
@@ -10970,7 +10777,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.826";
+    const packageVersion = "0.14.828";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;