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

package/bundle/bundle.umd.js

@@ -1486,14 +1486,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';
@@ -5270,7 +5270,7 @@
         title: 'Вы уверены, что хотите отказаться от запроса в БКИ',
         description: 'Согласие на запрос в Бюро кредитных историй (БКИ) повысит вероятность одобрения',
     };
-    const ITEMS$1 = [
+    const ITEMS = [
         { id: 'SIGNED', text: 'Подписать' },
         { id: 'REFUSE', text: 'Отказаться' },
     ];
@@ -5287,7 +5287,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) => {
@@ -6335,7 +6335,7 @@
     const inactiveDotStyle = 'w-2 h-2 opacity-30';
     const renderDotButton = ({ activeIndex, onClick, listType = 'horizontal-list' }) => (_, idx) => (jsx("div", { className: style(dotStyle, idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle), role: "button", "aria-hidden": true, onClick: () => onClick(idx) }, String(idx)));
 
-    const renderNavButton$3 = ({ activeIndex, onClick }) => (nav, i) => {
+    const renderNavButton$2 = ({ activeIndex, onClick }) => (nav, i) => {
         const isActive = i === activeIndex;
         const btnClassName = isActive
             ? 'min-w-[350px] bg-white shadow-dark-blue border-none p-6'
@@ -6440,7 +6440,7 @@
             }
         }, [containerRef?.current]);
         if (navButtons?.length && !isMobileMode) {
-            return (jsx(SwipeListContainer, { containerRef: navRef, snapAlign: "snap-start", itemClassName: "h-36 flex items-stretch w-screen", gap: 8, children: navButtons.map(renderNavButton$3({ activeIndex, onClick: onChangeActiveIndex })) }));
+            return (jsx(SwipeListContainer, { containerRef: navRef, snapAlign: "snap-start", itemClassName: "h-36 flex items-stretch w-screen", gap: 8, children: navButtons.map(renderNavButton$2({ activeIndex, onClick: onChangeActiveIndex })) }));
         }
         else if (dotCount) {
             return (jsx("div", { className: style('flex gap-xs', containerStyles[listType], version ? 'group' : '', className, { 'pb-xl': navButtons?.length && isMobileMode }), "data-ver": version, children: Array.from({ length: dotCount })
@@ -6594,9 +6594,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,
         });
@@ -7840,7 +7840,11 @@
 
     const renderStep$1 = ({ 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;
 
@@ -9371,7 +9375,7 @@
 
     const DEFAULT_MIN_SUM = 500;
     const DEFAULT_MAX_SUM = 1000000000;
-    const initialFiltrationState$2 = {
+    const initialFiltrationState$1 = {
         sum: {
             min: 10000,
             max: DEFAULT_MAX_SUM,
@@ -9379,7 +9383,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) }),
@@ -9490,7 +9494,7 @@
     };
 
     const DEFAULT_ITEMS_COUNT = 10;
-    const initialFiltrationState$1 = {
+    const initialFiltrationState = {
         startDate: undefined,
         endDate: undefined,
         query: '',
@@ -9498,7 +9502,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,
@@ -10067,22 +10071,6 @@
         return { ...block, content };
     };
 
-    const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: style('space-y-m', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isEmbedded: true }), calendar ? renderCalendar(calendar) : null] })));
-    const renderCalendar = (calendar) => {
-        const colCount = calendar.reduce((accumulator, currentValue) => currentValue?.month?.length ? accumulator + currentValue.month.length : accumulator, 0) || 1;
-        const colSize = 100 / colCount;
-        const mappedCalendar = calendar
-            .filter((_) => _?.month?.length)
-            .map((_) => ({
-            ..._,
-            // Condition lower is always true, TS does not understand this, notice filter above
-            flexBasis: `${_?.month?.length ? _.month.length * colSize : ''}%`,
-        }));
-        return (jsxs("div", { className: "w-full flex flex-col justify-center gap-s", children: [jsx("div", { className: "flex w-full text-h6 text-center", children: mappedCalendar.map((_) => renderMonthNames(_, colSize)) }), jsx("div", { className: "flex gap-s w-full", children: mappedCalendar.map((_, ind) => (jsxs("div", { className: "border-r border-main-divider last:border-r-0 space-y-s", style: { flexBasis: _.flexBasis }, children: [jsx("div", { className: "flex gap-s", children: renderMonthImages(_) }), jsxs("div", { className: "text-s", children: [jsx(Text, { size: "text-s", font: "font-light", color: "text-primary-text", children: _.text }), "\u2009", jsx(Text, { size: "text-s", font: "font-light", color: "text-primary-main", children: _.greenText })] })] }, `monthItem-${ind}`))) })] }));
-    };
-    const renderMonthNames = (item, colSize) => item.month?.map((_, i) => (jsx("div", { style: { flexBasis: `${colSize}%` }, children: _.text }, `monthName-${i}`)));
-    const renderMonthImages = (item) => item.month?.map((_) => _.image?.src ? (jsx("div", { className: "h-52 border-r pr-s border-main-divider last:border-r-0", children: jsx(Img, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
-
     const GrantSupport = UniBlock(({ className, title, button, regionSource, data, ...rest }) => {
         const [region, setRegion] = useState({ key: '' });
         const regions = regionSource?.regions ?? [];
@@ -10471,14 +10459,14 @@
     function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }) {
         const tabsShiftWidth = activeIndex * 460;
         const cardsAlignStyle = cards.length > 2 ? 'justify-start' : 'justify-center';
-        return (jsx("div", { style: { transform: `translateX(-${tabsShiftWidth}px)` }, className: "duration-1000 px-6xl", children: jsx("div", { className: `w-full flex flex-nowrap gap-s pb-6xl ${cardsAlignStyle}`, children: cards.map((slide, i) => renderNavButton$2({
+        return (jsx("div", { style: { transform: `translateX(-${tabsShiftWidth}px)` }, className: "duration-1000 px-6xl", children: jsx("div", { className: `w-full flex flex-nowrap gap-s pb-6xl ${cardsAlignStyle}`, children: cards.map((slide, i) => renderNavButton$1({
                     slide,
                     i,
                     isActive: Boolean(i === selectedCardIndex),
                     onClick: () => onClick(i),
                 })) }) }));
     }
-    function renderNavButton$2({ slide, i, isActive, onClick }) {
+    function renderNavButton$1({ slide, i, isActive, onClick }) {
         const btnClassName = isActive
             ? 'shadow-dark-blue border-primary-main'
             : `ease-in duration-300 border-gray`;
@@ -10494,7 +10482,7 @@
     const InsuranceAmountBlock = JSX(({ className = '', title, insuranceTabs = [], button, ...rest }) => {
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
         const handleActiveSlideIndex = useCallback((_) => setActiveSlideIndex(_), []);
-        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden relative px-0 space-y-2xl', className), defaultPadding: "p-6xl", ...rest, children: [title ? jsx(Heading, { className: "text-center", title: title, headingType: "h3" }) : null, insuranceTabs?.length > 1 ? (jsx("div", { className: "p-xs bg-secondary-light w-fit mx-auto rounded-md", children: insuranceTabs.map((item, i) => renderNavButton$1({
+        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden relative px-0 space-y-2xl', className), defaultPadding: "p-6xl", ...rest, children: [title ? jsx(Heading, { className: "text-center", title: title, headingType: "h3" }) : null, insuranceTabs?.length > 1 ? (jsx("div", { className: "p-xs bg-secondary-light w-fit mx-auto rounded-md", children: insuranceTabs.map((item, i) => renderNavButton({
                         title: item?.title,
                         i,
                         isActive: Boolean(i === activeSlideIndex),
@@ -10510,7 +10498,7 @@
             ? insuranceGalleries.map((cards, i) => (jsx(InsuranceAmountBlockInner, { button: button, cards: cards }, String(i))))
             : null;
     };
-    function renderNavButton$1({ title, i, isActive, onClick }) {
+    function renderNavButton({ title, i, isActive, onClick }) {
         const btnClassName = isActive ? 'bg-primary-main text-white rounded-md' : `text-secondary-text`;
         return (jsx("button", { type: "button", onClick: onClick, "aria-label": `Кнопка ${title}`, className: `box-border px-m py-s text-m font-light ${btnClassName}`, children: title }, String(i)));
     }
@@ -10635,153 +10623,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;
@@ -10793,6 +10634,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');
@@ -10855,15 +10698,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 = {
@@ -10916,17 +10759,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 }) => {
@@ -10941,30 +10784,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 scrollButtonStyle$1 = 'hidden sm:flex absolute z-40 top-10';
-    const ProductGallery = UniBlock(({ className = '', padding, slides = [], ...rest }) => {
-        const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-        const [containerRef, scroll] = useSwipeListScroll({
-            itemCount: slides?.length || 0,
-        });
-        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden', className), defaultPadding: "pt-6xl", padding: padding, ...rest, children: [jsx("div", { className: "flex duration-1000", style: { transform: `translateX(-${activeSlideIndex * 100}%)` }, role: "list", children: slides.map(({ productBlock }, i) => (jsx("div", { className: "box-border grow-0 shrink-0 basis-full", role: "listitem", children: jsx(BaseProductTile, { className: "pl-6xl h-full", headlineVersion: "M", isFullWidthTitle: false, ...productBlock, ...rest }) }, String(i)))) }), jsxs("div", { className: "relative pr-xs mt-m -mb-m flex gap-xs box-border", children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, itemClassName: 'h-40 flex items-stretch w-screen', gap: 8, children: slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex })) }), scroll.canScrollLeft ? (jsx(ArrowLeftButton, { wcmsIgnore: true, className: style('left-6', scrollButtonStyle$1), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ArrowRightButton, { wcmsIgnore: true, className: style('right-6', scrollButtonStyle$1), onClick: scroll.scrollRight })) : null] })] }));
-    });
-    const renderNavButton = ({ activeSlideIndex, onClick }) => ({ nav }, i) => {
-        const isActive = i === activeSlideIndex;
-        const btnClassName = isActive
-            ? 'min-w-[370px] mt-s h-28 bg-white shadow-dark-blue border-none p-6'
-            : 'min-w-72  mt-lg h-24 ease-in duration-300 bg-white/10 px-xl py-lg hover:backdrop-blur';
-        const btnTitleClassName = isActive
-            ? 'text-primary-text text-h6 py-xs'
-            : 'text-l pb-2xs text-secondary-text group-data-secondary:text-white';
-        const btnDescClassName = isActive
-            ? 'text-secondary-text text-l font-light'
-            : 'text-secondary-text text-m font-light group-data-secondary:text-white/80';
-        return (jsxs("button", { type: "button", onClick: () => onClick(i), "aria-label": nav?.title, className: style('relative overflow-hidden grow', 'ml-xs px-xl', 'box-border basis-0 border', 'border-gray group-data-secondary:border-white/50', 'text-left whitespace-nowrap', btnClassName), children: [jsx("div", { className: btnTitleClassName, children: nav?.title }), jsx("div", { className: btnDescClassName, children: nav?.description })] }, 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,
@@ -10999,133 +10818,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 STEP_BREAKPOINT = 4;
@@ -11166,6 +10858,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: {
@@ -11509,7 +11286,6 @@
         ExchangeRateTile,
         Footer,
         GalleryLayout,
-        GracePeriod,
         GrantSupport,
         Header,
         Headline,
@@ -11519,15 +11295,11 @@
         InvestmentInfo,
         LinkDocs,
         MobileAppTile,
-        MortgageFiltration,
         OfficesAtmsMap,
-        Placeholder,
         ProductBlock,
-        ProductGallery,
         RepresentativeOfficeInfo,
         RichTextBlock,
         RollupItem,
-        SafeDepositRental,
         StepsBlock,
         StickyBottomMenu,
         TabsLayout,
@@ -11681,7 +11453,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;