@redneckz/wildless-cms-uni-blocks 0.15.338 → 0.15.340

package/bundle/bundle.umd.js

@@ -578,7 +578,7 @@
 
     const deviation = (items) => items?.length ? Math.sqrt(Math.abs(avg(items.map((_) => _ ** 2)) - avg(items) ** 2)) : 0;
 
-    const renderBenefitIcon = (icon, benefitsVersion = 'normal') => icon ? (jsx("div", { className: style('sm:w-12 sm:h-12 sm:min-w-12 w-11 h-11 min-w-11 box-border flex items-center justify-center rounded-icon', benefitsVersion === 'normal'
+    const renderBenefitIcon = (icon, benefitsVersion = 'normal') => icon?.icon || icon?.src ? (jsx("div", { className: style('sm:w-12 sm:h-12 sm:min-w-12 w-11 h-11 min-w-11 box-border flex items-center justify-center rounded-icon', benefitsVersion === 'normal'
             ? 'bg-secondary-light text-primary-main'
             : 'bg-primary-main text-black group-data-secondary:bg-white/30 group-data-secondary:text-black'), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null;
 
@@ -2157,7 +2157,7 @@
     /** @deprecated */
     const ScrollRightButton = JSX((props) => (jsx(ArrowButton, { ...props, className: `${props.className || ''} rotate-180`, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })));
 
-    const scrollButtonStyle$1 = 'absolute top-[calc(50%-24px)] z-40';
+    const scrollButtonStyle$2 = 'absolute top-[calc(50%-24px)] z-40';
     const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
     const CarouselScrollButtons = JSX(({ scroll, activeIndex, itemCount, arrowsPadded, hasEdgeBlocks, onScrollLeft, onScrollRight, }) => {
         const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
@@ -2181,7 +2181,7 @@
                 onScrollRight();
             }
         }, [scrollRight, onScrollRight, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
-        return (jsxs("div", { className: "m:hidden block", children: [renderBlur(scroll), canMoveLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'left-1 m:left-8' : 'left-0'), onClick: handleScrollLeft })) : null, canMoveRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'right-1 m:right-8' : 'right-0'), onClick: handleScrollRight })) : null] }));
+        return (jsxs("div", { className: "m:hidden block", children: [renderBlur(scroll), canMoveLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle$2, arrowsPadded ? 'left-1 m:left-8' : 'left-0'), onClick: handleScrollLeft })) : null, canMoveRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle$2, arrowsPadded ? 'right-1 m:right-8' : 'right-0'), onClick: handleScrollRight })) : null] }));
     });
     const renderBlur = (scroll) => (jsxs("div", { children: [scroll.canScrollLeft ? (jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white group-data-secondary:bg-none') })) : null, scroll.canScrollRight ? (jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white group-data-secondary:bg-none') })) : null] }));
 
@@ -2816,6 +2816,20 @@
         }
     };
 
+    const DEFAULT_MIN_SUM$2 = 10000;
+    const DEFAULT_MAX_SUM$1 = 5000000;
+    const DEFAULT_CREDIT_CALCULATOR_PARAMS = {
+        minSum: DEFAULT_MIN_SUM$2,
+        maxSum: DEFAULT_MAX_SUM$1,
+        minMonths: DEFAULT_MIN_MONTHS,
+        maxMonths: DEFAULT_MAX_MONTHS,
+        rate: 0,
+        isSalaryClient: false,
+        isPensionClient: false,
+        isStateEmployee: false,
+        isInsurance: true,
+    };
+
     const checkCreditSourceBookRowCommonParams = (props) => checkRowParam$1({
         ...props,
         fieldKey: 'isSalaryClient',
@@ -2855,19 +2869,6 @@
         checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
         checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row)) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
 
-    const DEFAULT_MIN_SUM$2 = 10000;
-    const DEFAULT_MAX_SUM$1 = 5000000;
-    const DEFAULT_CREDIT_CALCULATOR_PARAMS = {
-        minSum: DEFAULT_MIN_SUM$2,
-        maxSum: DEFAULT_MAX_SUM$1,
-        minMonths: DEFAULT_MIN_MONTHS,
-        maxMonths: DEFAULT_MAX_MONTHS,
-        rate: 0,
-        isSalaryClient: false,
-        isPensionClient: false,
-        isStateEmployee: false,
-        isInsurance: true,
-    };
     const getCreditCalculatorParams = (userInputParams, calcSource, paramsViewSettings) => {
         const { moneyValue, monthsValue } = userInputParams;
         const rateRows = calcSource?.rateRows || [DEFAULT_CREDIT_CALCULATOR_PARAMS];
@@ -3509,7 +3510,7 @@
 
     const ContactsBlock = JSX(({ className, contacts, info, version = 'secondary', ...rest }) => (jsxs(BlockWrapper, { className: style('flex', className), defaultPadding: "p-6xl", version: version, ...rest, children: [info?.length ? renderBlocks(info) : null, contacts?.length ? renderBlocks(contacts) : null] })));
     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 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?.text ? jsx(LinkButton, { className: "mt-xl", ...button }) : null] }, String(key)))) }, `col-${String(index)}`)) : null;
 
     const isRateRow = (rateRow) => {
         return typeof rateRow?.minMonths === 'number' && typeof rateRow?.maxMonths === 'number';
@@ -4111,14 +4112,6 @@
     });
     const isQueryLongEnough = (_) => _ && _.length >= MIN_QUERY_LEN;
 
-    const mapCookie = (name, mapper) => {
-        const cookies = globalThis.document?.cookie.split(';') ?? [];
-        const [, value] = cookies.map((_) => _.split('=')).find(([key]) => key.trim() === name) || [];
-        if (mapper(value)) {
-            globalThis.document.cookie = `${name}=${mapper(value)}`;
-        }
-    };
-
     const Contacts = JSX(({ className = '', items = [] }) => items?.length ? (jsx("div", { className: style('space-y-m', className), children: items.map(renderContactsGroup) })) : null);
     const renderContactsGroup = (item, i) => (jsxs("div", { className: "space-y-m", children: [jsx("div", { children: jsx(Text, { size: "text-l", font: "font-medium", children: item?.title }) }), jsx("div", { className: "space-y-m", children: item.items?.map(renderContact) })] }, String(i)));
     const renderContact = (item, index) => (jsxs("div", { className: "space-y-2xs", children: [jsx("div", { children: renderText(item.type, item.text) }), jsx(Paragraph, { size: "text-s", font: "font-light", color: "text-secondary-text", children: item.description })] }, String(index)));
@@ -4134,8 +4127,6 @@
     };
     const formatTel = (s) => s.replaceAll(/\D/g, '');
 
-    const COOKIE_REPLACE = ['split_version', 'New', 'Old'];
-
     const horizontalNavigationLinkStyles = 'text-secondary-text';
 
     const HorizontalNavigationLink = JSX(({ className = '', index, text, ...rest }) => {
@@ -4159,13 +4150,9 @@
         const sitemap = rest.options?.page?.sitemap ?? {};
         const { logo } = sitemap;
         const { dataFooter, ...logoProps } = logo ?? {};
-        const { documents, relatedEnterprises, contacts, mediaLinks = [], feedbackButton, isOldVersionButton, license, otherLinks = [], } = footer ?? {};
-        const handleOnClick = useCallback(() => {
-            const [name, oldValue, newValue] = COOKIE_REPLACE;
-            mapCookie(name, (value) => value?.replace(oldValue, newValue));
-        }, []);
+        const { documents, relatedEnterprises, contacts, mediaLinks = [], feedbackButton, license, otherLinks = [], } = footer ?? {};
         const linkStyle = '!text-left text-s font-light';
-        return (jsxs(BlockWrapper, { tag: "footer", className: style('space-y-xl', className), ...rest, children: [jsxs("div", { className: "flex items-stretch gap-3xl", children: [jsx(Logo, { className: LEFT_COL_WIDTH, logo: logoProps, data: dataFooter }), jsx(SearchBar$1, { className: "grow", ...sitemap })] }), jsxs("div", { className: "flex items-center @lg:items-stretch gap-6xl flex-col @lg:flex-row", children: [jsxs("div", { className: style(LEFT_COL_WIDTH, 'flex flex-col shrink-0 overflow-hidden space-y-xl'), children: [jsx(Contacts, { items: contacts }), feedbackButton ? (jsx(LinkButton, { className: "w-full", version: "primary", ...feedbackButton })) : null, mediaLinks.map((_, i) => (jsx(SocialMedia, { media: _?.links ?? [], showButtonText: false, children: _?.title }, String(i)))), isOldVersionButton ? (jsx(LinkButton, { version: "link", href: "https://old.rshb.ru", className: linkStyle, onClick: handleOnClick, children: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430 \u043F\u0440\u0435\u0436\u043D\u044E\u044E \u0432\u0435\u0440\u0441\u0438\u044E \u0441\u0430\u0439\u0442\u0430" })) : null, otherLinks.map((_, i) => (jsx(LinkButton, { className: linkStyle, version: "link", ..._, children: _?.text }, String(i))))] }), jsx(Sitemap, { className: "flex-grow flex-wrap", ...sitemap })] }), jsx(HorizontalNavigation, { links: relatedEnterprises }), jsx(TextInformation, { links: documents, license: license })] }));
+        return (jsxs(BlockWrapper, { tag: "footer", className: style('space-y-xl', className), ...rest, children: [jsxs("div", { className: "flex items-stretch gap-3xl", children: [jsx(Logo, { className: LEFT_COL_WIDTH, logo: logoProps, data: dataFooter }), jsx(SearchBar$1, { className: "grow", ...sitemap })] }), jsxs("div", { className: "flex items-center @lg:items-stretch gap-6xl flex-col @lg:flex-row", children: [jsxs("div", { className: style(LEFT_COL_WIDTH, 'flex flex-col shrink-0 overflow-hidden space-y-xl'), children: [jsx(Contacts, { items: contacts }), feedbackButton ? (jsx(LinkButton, { className: "w-full", version: "primary", ...feedbackButton })) : null, mediaLinks.map((_, i) => (jsx(SocialMedia, { media: _?.links ?? [], showButtonText: false, children: _?.title }, String(i)))), otherLinks.map((_, i) => (jsx(LinkButton, { className: linkStyle, version: "link", ..._, children: _?.text }, String(i))))] }), jsx(Sitemap, { className: "flex-grow flex-wrap", ...sitemap })] }), jsx(HorizontalNavigation, { links: relatedEnterprises }), jsx(TextInformation, { links: documents, license: license })] }));
     });
 
     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] })));
@@ -4668,23 +4655,13 @@
         return docFormat.includes('/') ? docFormat.replace(regexp, '') : docFormat;
     };
 
-    const MobileAppTile = UniBlock(({ className, padding, align = 'text-left', buttons = [], description, image, items, qr, headingType, additionalDescription = '', title = 'Мобильное приложение', version = 'primary', ...rest }) => {
+    const MobileAppTile = UniBlock(({ className, padding, align = 'text-left', buttons = [], description, image, items, headingType, qr, additionalDescription = '', title = 'Мобильное приложение', version = 'primary', ...rest }) => {
         const containerStyle = version === 'secondary' ? 'p-m min-w-32' : 'min-w-24';
         const img = image?.src ? jsx(Img, { className: "hidden lg:block", image: image }) : null;
         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: [jsx(List, { items: items, listItemSize: "M" }), 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 badgeBgStyleMap = {
-        primary: 'bg-white/30',
-        secondary: 'bg-main-divider',
-    };
-    const badgeTextColorStyleMap = {
-        primary: 'text-white',
-        secondary: 'text-secondary-text',
-    };
-    const Badge$1 = JSX(({ count, version = 'secondary' }) => {
-        return (jsx("div", { className: style('w-6 h-6 rounded-full flex items-center justify-center', badgeBgStyleMap[version]), role: "status", children: jsx(Text, { size: "text-xs", color: badgeTextColorStyleMap[version], children: count }) }));
-    });
+    const getVersion = (isPrimary) => (isPrimary ? 'primary' : 'secondary');
 
     const getBadgeCount = (blocks = [], filter = {}) => blocks.filter(({ content = {} }) => targetMatchPattern(filter, content)).length;
 
@@ -4707,7 +4684,8 @@
         const activeItemIndex = useMemo(() => Math.max(0, hotFilters.findIndex((_) => hotFilterRecordCmp(_.filter, filtrationState))), [hotFilters, filtrationState]);
         const items = useMemo(() => hotFilters.map((_) => ({
             text: _.text,
-            appendRight: (jsx(Badge$1, { version: _ === hotFilters[activeItemIndex] ? 'primary' : 'secondary', count: getBadgeCount(blocks, _.filter) })),
+            count: getBadgeCount(blocks, _.filter),
+            version: getVersion(_ === hotFilters[activeItemIndex]),
         })), [hotFilters, blocks, activeItemIndex]);
         const handleChange = useCallback((_) => {
             onFiltrationStateChange(hotFilters[items.indexOf(_)].filter);
@@ -4719,6 +4697,16 @@
         };
     };
 
+    const badgeBgStyleMap = {
+        primary: 'bg-white/30',
+        secondary: 'bg-main-divider',
+    };
+    const badgeTextColorStyleMap = {
+        primary: 'text-white',
+        secondary: 'text-secondary-text',
+    };
+    const Badge$1 = JSX(({ count, version = 'secondary' }) => (jsx("div", { className: style('w-6 h-6 rounded-full flex items-center justify-center', badgeBgStyleMap[version]), role: "status", children: jsx(Text, { size: "text-xs", color: badgeTextColorStyleMap[version], 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',
@@ -4759,14 +4747,14 @@
     };
     const TabItemInner = JSX(({ tag = 'div', item = {}, isActive = false, type = 'default', onClick }) => {
         const Tag = tag;
-        const { text, description, icon, appendRight, ...link } = item;
+        const { text, description, icon, count, ...link } = item;
         return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), role: "tablist", onClick: onClick, ...link, children: jsxs("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), children: [renderTabItemInner({
                         text,
                         description,
                         icon,
                         isActive,
                         type,
-                    }), appendRight ? jsx("div", { className: "ml-xs", children: appendRight }) : null] }) }));
+                    }), Number.isInteger(count) ? (jsx("div", { className: "ml-xs", children: jsx(Badge$1, { count: count, version: getVersion(isActive) }) })) : null] }) }));
     });
 
     const TabItem = JSX((props) => props?.item?.href ? jsx(LinkTabItem, { ...props }) : jsx(ButtonTabItem, { ...props }));
@@ -4814,13 +4802,37 @@
         childSchema: (content) => content?.filtrationSchema || {},
     });
 
-    function renderClusterer(yandexMaps, map, points) {
+    const MapMarkerClusterIcon = '/icons/MapMarkerClusterIcon.svg';
+    const MapMarkerClusterYellowIcon = '/icons/MapMarkerClusterYellowIcon.svg';
+    function renderClusterer({ yandexMaps, map, points, }) {
         map.geoObjects.removeAll();
         const clusterIconContentLayout = yandexMaps.templateLayoutFactory.createClass('<div style="margin-top: -3px;">{{properties.geoObjects.length}}</div>');
-        const clusterer = new yandexMaps.Clusterer({
+        const officeClusterer = defineClusterer('offices', yandexMaps, clusterIconContentLayout);
+        if (points.length && points.every((_) => 'type' in _)) {
+            const remoteWorkplaceClusterer = defineClusterer('workplaces', yandexMaps, clusterIconContentLayout);
+            const remoteWorkplaceGeoObjects = defineGeoObjects(points.filter((_) => _.type === 'workplaces'), 'workplaces', yandexMaps);
+            const officesGeoObjects = defineGeoObjects(points.filter((_) => _.type === 'offices'), 'offices', yandexMaps);
+            officeClusterer.add(officesGeoObjects);
+            remoteWorkplaceClusterer.add(remoteWorkplaceGeoObjects);
+            map.geoObjects.add(remoteWorkplaceClusterer);
+            map.geoObjects.add(officeClusterer);
+        }
+        else {
+            const geoObjects = defineGeoObjects(points, 'offices', yandexMaps);
+            officeClusterer.add(geoObjects);
+            map.geoObjects.add(officeClusterer);
+        }
+        map.setBounds(yandexMaps.util.bounds.fromPoints(points.map((_) => _.coords))).then(() => {
+            if (map.getZoom() > 10) {
+                map.setZoom(10);
+            }
+        });
+    }
+    const defineClusterer = (type, yandexMaps, clusterIconContentLayout) => {
+        return new yandexMaps.Clusterer({
             clusterIcons: [
                 {
-                    href: '/icons/MapMarkerClusterIcon.svg',
+                    href: type === 'offices' ? MapMarkerClusterIcon : MapMarkerClusterYellowIcon,
                     size: [78, 84],
                     offset: [-35, -50],
                 },
@@ -4829,25 +4841,20 @@
             clusterHideIconOnBalloonOpen: false,
             geoObjectHideIconOnBalloonOpen: false,
         });
-        const geoObjects = points.map(({ coords, content }) => new yandexMaps.Placemark(coords, {
+    };
+    const defineGeoObjects = (pointArr, type, yandexMaps) => {
+        return pointArr.map(({ coords, content }) => new yandexMaps.Placemark(coords, {
             balloonContentHeader: content?.header,
             balloonContentBody: content?.body,
             balloonContentFooter: content?.footer,
             hintContent: content?.hint,
         }, {
             iconLayout: 'default#image',
-            iconImageHref: '/icons/MapMarkerSingleIcon.svg',
+            iconImageHref: type === 'offices' ? MapMarkerClusterIcon : MapMarkerClusterYellowIcon,
             iconImageSize: [78, 84],
             iconImageOffset: [-35, -50],
         }));
-        clusterer.add(geoObjects);
-        map.geoObjects.add(clusterer);
-        map.setBounds(yandexMaps.util.bounds.fromPoints(points.map((_) => _.coords))).then(() => {
-            if (map.getZoom() > 10) {
-                map.setZoom(10);
-            }
-        });
-    }
+    };
 
     const styles$1 = {
         focus: 'focus:border-primary-text focus:border',
@@ -4920,11 +4927,11 @@
                         controls: [],
                         suppressMapOpenBlock: true,
                     });
-                    renderClusterer(yandexMaps, map.current, points);
+                    renderClusterer({ yandexMaps, map: map.current, points });
                 });
             }
             else if (yandexMaps) {
-                renderClusterer(yandexMaps, map.current, points);
+                renderClusterer({ yandexMaps, map: map.current, points });
                 if (!points?.length) {
                     map.current.setCenter(DEFAULT_CENTER_COORDS);
                 }
@@ -4943,6 +4950,8 @@
     const mapByIndex = (points, index) => points.map((_) => _.coords[index]);
     const getArraySumAndAverage = (arr) => arr.length && arr.reduce((a, b) => a + b) / arr.length;
 
+    const renderDescriptionBlock$1 = ({ __html, list }) => __html || list?.length ? (jsxs("div", { className: "mb-2xl border-b sm:border border-main-divider sm:rounded-md", children: [__html ? (jsx("div", { className: "mb-2xl", children: jsx(RichText, { __html: __html }) })) : null, list?.length ? (jsx("div", { className: "flex flex-col sm:flex-row gap-2xl sm:flex-wrap pb-2xl sm:pb-xl", children: list.map((item, i) => (jsxs("div", { className: "flex gap-xs items-center", children: [item?.image ? jsx(Img, { image: item.image }) : null, item?.text ? (jsx(Text, { size: "text-m", font: "font-light", children: item.text })) : null] }, String(i)))) })) : null] })) : null;
+
     const FILTRATION_LABELS = {
         safeBoxCaseVolumes: 'Аренда индивидуальных сейфовых ячеек',
         workingSaturday: 'Открыты по субботам',
@@ -4957,14 +4966,14 @@
         bullionOperations: 'Операции со слитками',
         preciousMetalsOperations: 'Операции с драгоценными металлами',
         transferringDataToBiometricSystem: 'Передача фото и голоса в Единую биометрическую систему',
+        remoteWorkplace: 'Удаленное рабочее место',
     };
     const COMMON_FILTERS_STYLES = 'flex flex-col sm:flex-row sm:flex-wrap gap-3xl pb-2xl';
     const renderFiltrationForm = (filters, { field, reset }, onlyOffice) => {
-        const visibleFiltersNum = onlyOffice ? 3 : 4;
+        const visibleFiltersNum = 4;
         const filtersCheckbox = (filters || []).map((key) => (jsx(Checkbox, { text: FILTRATION_LABELS[key], ...field(key) }, key)));
-        const [visibleFilters, hiddenFilters] = visibleFiltersNum > 0
-            ? [filtersCheckbox.slice(0, visibleFiltersNum), filtersCheckbox.slice(visibleFiltersNum)]
-            : [filtersCheckbox, []];
+        const [visibleFilters, hiddenFilters] = [filtersCheckbox.slice(0, visibleFiltersNum), filtersCheckbox.slice(visibleFiltersNum)]
+            ;
         return (jsx("div", { children: filters?.length ? (jsx("div", { children: jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [jsx("div", { className: COMMON_FILTERS_STYLES, children: visibleFilters }), jsx(FoldableSection, { className: COMMON_FILTERS_STYLES, isUnfolded: isUnfolded, children: hiddenFilters })] })), renderFoldButton: renderFoldButton$2(reset, onlyOffice) }) })) : null }));
     };
     const renderFoldButton$2 = (reset, onlyOffice) => ({ isUnfolded, onToggle }) => {
@@ -4976,37 +4985,47 @@
     const defaultEmptyFunction = () => void 0;
     const defaultFilterItems = () => [];
     const filtersVisibleStyles = (activeButton) => activeButton === 'all' ? 'block' : 'hidden';
-    const OfficesAtmsMapLayout = JSX(({ className, data = [], renderCard = defaultEmptyFunction, filterItems = defaultFilterItems, getBalloon = defaultEmptyFunction, initFilterState = {}, descriptionData, title, }) => {
+    const OfficesAtmsMapLayout = JSX(({ className, data = [], remoteWorkplaces = [], renderCard = defaultEmptyFunction, renderRemoteWorkplaceCard = defaultEmptyFunction, filterItems = defaultFilterItems, getBalloon = defaultEmptyFunction, getBalloonRemoteWorkplaces = defaultEmptyFunction, initFilterState = {}, descriptionData, title, }) => {
         const onlyOffice = title?.includes('Офис');
         const [filtrationState, { field, reset }] = useForm(initFilterState);
-        const [filteredItems, points, lengthItems] = useMemo(() => {
+        const [filteredItems, points, filteredRemoteWorkplaces, lengthItems] = useMemo(() => {
             const _filteredItems = filterItems(data, filtrationState);
-            const _points = _filteredItems
-                .map((_) => ({
-                coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
-                content: getBalloon(_),
-            }))
-                .filter((_) => _.coords && _.coords.length === 2);
-            return [_filteredItems, _points, _filteredItems.length];
-        }, [data, filtrationState]);
+            const _filteredRemoteWorkplaces = filterItems(remoteWorkplaces, filtrationState);
+            const _points = [
+                ..._filteredItems.map((_) => ({
+                    type: 'offices',
+                    coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
+                    content: getBalloon(_),
+                })),
+                ..._filteredRemoteWorkplaces.map((_) => ({
+                    type: 'workplaces',
+                    coords: [Number(_.gpsLatitude), Number(_.gpsLongitude)]?.filter(Boolean),
+                    content: getBalloonRemoteWorkplaces({
+                        address: _.address,
+                        workScheduleDescription: _.workScheduleDescription,
+                    }),
+                })),
+            ].filter((_) => _.coords && _.coords.length === 2);
+            const itemsLength = _filteredItems.length + _filteredRemoteWorkplaces?.length;
+            return [_filteredItems, _points, _filteredRemoteWorkplaces, itemsLength];
+        }, [data, remoteWorkplaces, filtrationState]);
         const [activeButton, setActiveButton] = useState('all');
-        return (jsxs("div", { className: style('space-y-1', className), children: [jsxs("div", { className: "bg-white", children: [jsxs("div", { className: "p-6xl pb-0", children: [jsx("div", { className: "flex flex-col sm:flex-row gap-xs mb-2xl", children: jsxs(Heading, { headingType: "h2", children: [title, lengthItems ? (jsx(Text, { size: "text-h2", color: "text-secondary-text", children: ` (${lengthItems})` })) : null] }) }), descriptionData ? renderDescriptionBlock$1(descriptionData) : null, onlyOffice && renderButtonsGroup(data, activeButton, setActiveButton), jsx("div", { className: style('pb-2xl', filtersVisibleStyles(activeButton)), children: renderFiltrationForm(Object.keys(initFilterState), { field, reset }, onlyOffice) })] }), jsx("div", { className: "h-[600px]", children: jsx(ClientOnly, { children: jsx(YandexMap, { points: points, className: "h-full" }) }) })] }), filteredItems.map(renderCard)] }));
+        return (jsxs("div", { className: style('space-y-1', className), children: [jsxs("div", { className: "bg-white", children: [jsxs("div", { className: "p-6xl pb-0", children: [jsx("div", { className: "flex flex-col sm:flex-row gap-xs mb-2xl", children: jsxs(Heading, { headingType: "h2", children: [title, lengthItems ? (jsx(Text, { size: "text-h2", color: "text-secondary-text", children: ` (${lengthItems})` })) : null] }) }), descriptionData ? renderDescriptionBlock$1(descriptionData) : null, onlyOffice && renderButtonsGroup(data, activeButton, setActiveButton), jsx("div", { className: style('pb-2xl', filtersVisibleStyles(activeButton)), children: renderFiltrationForm(Object.keys(initFilterState), { field, reset }, onlyOffice) })] }), jsx("div", { className: "h-[600px]", children: jsx(ClientOnly, { children: jsx(YandexMap, { points: points, className: "h-full" }) }) })] }), filteredItems.map(renderCard), filteredRemoteWorkplaces.map(renderRemoteWorkplaceCard)] }));
     });
-    const renderButtonsGroup = (data, activeButton, setActiveButton) => {
-        const allButtonVersion = activeButton === 'all' ? 'primary' : 'secondary';
-        const businessButtonVersion = activeButton === 'business' ? 'primary' : 'secondary';
-        const handleOnClick = (e, key, branches) => {
+    const renderButtonsGroup = (data, activeButton, onButtonClick) => {
+        const allButtonVersion = getVersion(activeButton === 'all');
+        const businessButtonVersion = getVersion(activeButton === 'business');
+        const handleClick = (e, key, branches) => {
             if (e.currentTarget === e.target && key === 'business') {
                 branches.filter((branch) => branch.workSchedule &&
                     branch.workSchedule.businessScheduleVisibleTag &&
                     !branch.workSchedule.businessScheduleDescription);
             }
-            setActiveButton(key);
+            onButtonClick(key);
             return branches;
         };
-        return (jsxs("div", { className: "flex gap-lg flex-col sm:flex-row pb-lg", children: [jsx(Button, { "data-id": "all", onClick: (e) => handleOnClick(e, 'all', data), version: allButtonVersion, children: "\u0414\u043B\u044F \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446" }), jsx(Button, { "data-id": "business", onClick: (e) => handleOnClick(e, 'business', data), version: businessButtonVersion, children: "\u0414\u043B\u044F \u044E\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446" })] }));
-    };
-    const renderDescriptionBlock$1 = ({ __html, list }) => __html || list?.length ? (jsxs("div", { className: "mb-2xl border-b sm:border border-main-divider sm:rounded-md", children: [__html ? (jsx("div", { className: "mb-2xl", children: jsx(RichText, { __html: __html }) })) : null, list?.length ? (jsx("div", { className: "flex flex-col sm:flex-row gap-2xl sm:flex-wrap pb-2xl sm:pb-xl", children: list.map((item, i) => (jsxs("div", { className: "flex gap-xs items-center", children: [item?.image ? jsx(Img, { image: item.image }) : null, item?.text ? (jsx(Text, { size: "text-m", font: "font-light", children: item.text })) : null] }, String(i)))) })) : null] })) : null;
+        return (jsxs("div", { className: "flex gap-lg flex-col sm:flex-row pb-lg", children: [jsx(Button, { "data-id": "all", onClick: (e) => handleClick(e, 'all', data), version: allButtonVersion, children: "\u0414\u043B\u044F \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446" }), jsx(Button, { "data-id": "business", onClick: (e) => handleClick(e, 'business', data), version: businessButtonVersion, children: "\u0414\u043B\u044F \u044E\u0440\u0438\u0434\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446" })] }));
+    };
 
     const colorStyle = {
         yellow: { border: 'border-yellow-light', text: 'text-yellow' },
@@ -5230,7 +5249,7 @@
             return null;
         }
         const workScheduleWeek = getWorkScheduleWeek(workSchedule);
-        return (jsxs("div", { className: "bg-white col-span-12 p-3xl sm:border-green sm:border", children: [jsxs("div", { className: "sm:flex sm:justify-between", children: [jsxs("div", { children: [jsx(Text, { size: "text-h4", children: name }), address ? (jsxs("div", { className: "flex pb-xl pt-xs gap-2xs", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24" }), jsx(Text, { size: "text-l", children: address })] })) : null] }), renderCurrentDaySchedule(workScheduleWeek)] }), jsx("div", { className: "hidden sm:block", children: renderCardContent({
+        return (jsxs("div", { className: "bg-white col-span-12 p-3xl sm:border-green sm:border", children: [jsxs("div", { className: "sm:flex sm:justify-between", children: [jsxs("div", { children: [jsx(Text, { size: "text-h4", children: name }), address ? (jsxs("div", { className: "flex pb-xl pt-xs gap-2xs", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24" }), jsx(Text, { size: "text-l", children: address })] })) : null] }), renderCurrentDaySchedule(workScheduleWeek)] }), jsx("div", { className: "hidden sm:block", children: renderCardContent$1({
                         phone,
                         fax,
                         phoneBusiness,
@@ -5240,7 +5259,7 @@
                         workSchedule,
                         exchangeRate,
                     }) }), jsx(Foldable, { className: "block sm:hidden", renderFoldableSection: ({ isUnfolded }) => {
-                        return (jsx(FoldableSection, { isUnfolded: isUnfolded, children: renderCardContent({
+                        return (jsx(FoldableSection, { isUnfolded: isUnfolded, children: renderCardContent$1({
                                 phone,
                                 fax,
                                 phoneBusiness,
@@ -5254,7 +5273,7 @@
                     //** TODO: remove styles with refactoring  DefaultFoldButton*/
                     renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton$1({ isUnfolded, onToggle }) })] }, String(index)));
     };
-    const renderCardContent = ({ phone, fax, phoneBusiness, phoneNatural, phoneCallCentre, phoneCurrencyControl, workSchedule, exchangeRate, }) => {
+    const renderCardContent$1 = ({ phone, fax, phoneBusiness, phoneNatural, phoneCallCentre, phoneCurrencyControl, workSchedule, exchangeRate, }) => {
         const workScheduleWeek = getWorkScheduleWeek(workSchedule);
         const labelSchedule = workSchedule?.businessScheduleVisibleTag
             ? 'Для физических лиц'
@@ -5270,13 +5289,38 @@
         return { header, body };
     };
 
+    const renderRemoteWorkplaceCard = ({ address, workScheduleDescription }, index) => {
+        if (!workScheduleDescription) {
+            return null;
+        }
+        return (jsxs("div", { className: "bg-white col-span-12 p-3xl sm:border-green sm:border", children: [jsx("div", { className: "sm:flex sm:justify-between", children: jsxs("div", { children: [jsx(Text, { size: "text-h4", children: "\u0423\u0434\u0430\u043B\u0435\u043D\u043D\u043E\u0435 \u0440\u0430\u0431\u043E\u0447\u0435\u0435 \u043C\u0435\u0441\u0442\u043E" }), address ? (jsxs("div", { className: "flex pb-xl pt-xs gap-2xs", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24" }), jsx(Text, { size: "text-l", children: address })] })) : null] }) }), jsx("div", { className: "hidden sm:block", children: renderCardContent({
+                        workScheduleDescription,
+                    }) }), jsx(Foldable, { className: "block sm:hidden", renderFoldableSection: ({ isUnfolded }) => {
+                        return (jsx(FoldableSection, { isUnfolded: isUnfolded, children: renderCardContent({
+                                workScheduleDescription,
+                            }) }));
+                    }, 
+                    //** TODO: remove styles with refactoring  DefaultFoldButton*/
+                    renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton$1({ isUnfolded, onToggle }) })] }, String(index)));
+    };
+    const renderCardContent = ({ workScheduleDescription }) => {
+        return (jsxs("div", { children: [jsxs(CardRow, { className: "flex", children: [jsx(CardCell, { label: "\u041E\u043F\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043B\u044F \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446", children: jsx(Text, { children: "\u041E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u0435 \u0438 \u043E\u0431\u0441\u043B\u0443\u0436\u0438\u0432\u0430\u043D\u0438\u0435 \u043A\u0440\u0435\u0434\u0438\u0442\u043E\u0432, \u0441\u0447\u0435\u0442\u043E\u0432, \u0432\u043A\u043B\u0430\u0434\u043E\u0432" }) }), jsx(CardCell, { label: "\u041E\u043F\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043B\u044F \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446", children: jsx(Text, { children: "\u041E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u0435 \u0438 \u043E\u0431\u0441\u043B\u0443\u0436\u0438\u0432\u0430\u043D\u0438\u0435 \u0431\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0438\u0445 \u043A\u0430\u0440\u0442" }) }), jsx(CardCell, { label: "\u041E\u043F\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043B\u044F \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446", children: jsx(Text, { children: "\u0418\u043D\u0432\u0435\u0441\u0442\u0438\u0446\u0438\u043E\u043D\u043D\u043E\u0435 \u0438 \u043D\u0430\u043A\u043E\u043F\u0438\u0442\u0435\u043B\u044C\u043D\u043E\u0435 \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u043D\u0438\u0435" }) }), jsx(CardCell, { label: "\u041E\u043F\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043B\u044F \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043A\u0438\u0445 \u043B\u0438\u0446", children: jsx(Text, { children: "\u0411\u0435\u0437\u043D\u0430\u043B\u0438\u0447\u043D\u044B\u0435 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 \u0440\u0443\u0431\u043B\u044F\u0445, \u043F\u0435\u0440\u0435\u0432\u043E\u0434\u044B \u0431\u0435\u0437 \u043E\u0442\u043A\u0440\u044B\u0442\u0438\u044F \u0441\u0447\u0451\u0442\u0430" }) })] }), jsx(CardCell, { label: "\u0420\u0435\u0436\u0438\u043C \u0440\u0430\u0431\u043E\u0442\u044B", className: "max-w-none", children: jsx(Text, { children: workScheduleDescription }) })] }));
+    };
+    const getRemoteWorkplacePoint = ({ address = '', workScheduleDescription, }) => {
+        const header = 'Удаленное рабочее место';
+        const body = `${address} ${workScheduleDescription}`;
+        return { header, body };
+    };
+
     const EMPTY_VALUE$1 = [];
     function useOffices(regionCode) {
-        const { data = EMPTY_VALUE$1 } = useAsyncData(`/api/v1/branches?regionCode=${regionCode}`, fetchMap);
+        const { data = EMPTY_VALUE$1 } = useAsyncData(`/api/v1/branchesAndRemoteWorkplaces?regionCode=${regionCode}`, fetchMap);
         return data;
     }
     const fetchMap = async (url) => {
-        const result = await fetchJSON(url, { method: 'GET' });
+        const result = await fetchJSON(url, {
+            method: 'GET',
+        });
         return Array.isArray(result) ? result : EMPTY_VALUE$1;
     };
 
@@ -5284,6 +5328,7 @@
         workingSaturday: false,
         premiumService: false,
         privateBanking: false,
+        remoteWorkplace: false,
         sellingCoins: false,
         buyingCoins: false,
         bullionOperations: false,
@@ -5291,20 +5336,21 @@
         transferringDataToBiometricSystem: false,
     };
     const FILTRATION_PREDICATES = {
-        workingSaturday: (item) => Boolean(item.workSchedule?.workingSaturday),
-        premiumService: (item) => Boolean(item.premiumService),
-        privateBanking: (item) => Boolean(item.privateBanking),
-        sellingCoins: (item) => Boolean(item.sellingCoins),
-        buyingCoins: (item) => Boolean(item.buyingCoins),
-        bullionOperations: (item) => Boolean(item.bullionOperations),
-        preciousMetalsOperations: (item) => Boolean(item.preciousMetalsOperations),
-        transferringDataToBiometricSystem: (item) => Boolean(item.transferringDataToBiometricSystem),
+        workingSaturday: (item) => Boolean('workSchedule' in item && item.workSchedule?.workingSaturday),
+        premiumService: (item) => Boolean('premiumService' in item && item.premiumService),
+        privateBanking: (item) => Boolean('privateBanking' in item && item.privateBanking),
+        remoteWorkplace: (item) => Boolean('workScheduleDescription' in item),
+        sellingCoins: (item) => Boolean('sellingCoins' in item && item.sellingCoins),
+        buyingCoins: (item) => Boolean('buyingCoins' in item && item.buyingCoins),
+        bullionOperations: (item) => Boolean('bullionOperations' in item && item.bullionOperations),
+        preciousMetalsOperations: (item) => Boolean('preciousMetalsOperations' in item && item.preciousMetalsOperations),
+        transferringDataToBiometricSystem: (item) => Boolean('transferringDataToBiometricSystem' in item && item.transferringDataToBiometricSystem),
     };
     const OfficesMap = JSX(({ className }) => {
         const [currentLocation] = useLocation();
         const regionCode = currentLocation?.code ?? '000';
         const officesData = useOffices(regionCode);
-        return (jsx(OfficesAtmsMapLayout, { className: className, filterItems: filterItems, data: officesData, initFilterState: INITIAL_FILTRATION_STATE, renderCard: renderOfficeCard, getBalloon: getOfficePoint, title: `Офисы филиала ${currentLocation?.name}` }));
+        return (jsx(OfficesAtmsMapLayout, { className: className, filterItems: filterItems, data: officesData[0]?.branches, remoteWorkplaces: officesData[0]?.remoteWorkplaces, initFilterState: INITIAL_FILTRATION_STATE, renderCard: renderOfficeCard, renderRemoteWorkplaceCard: renderRemoteWorkplaceCard, getBalloon: getOfficePoint, getBalloonRemoteWorkplaces: getRemoteWorkplacePoint, title: `Офисы филиала ${currentLocation?.name}` }));
     });
     const filterItems = (data, filtrationState) => {
         const truthyFilters = Object.keys(filtrationState).filter((key) => filtrationState[key]);
@@ -5318,22 +5364,26 @@
 
     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 }) => {
+    const scrollButtonStyle$1 = 'hidden sm:flex absolute z-40 top-10';
+    const ProductGallery = UniBlock(({ className = '', padding, slides = [], ...rest }) => {
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden', className), defaultPadding: "py-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)))) }), jsx("div", { className: "h-28 px-xs mt-m -mb-m flex gap-xs box-border", children: slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex })) })] }));
+        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(ScrollLeftButton, { className: style('left-6', scrollButtonStyle$1), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { 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-[350px] bg-white shadow-dark-blue border-none p-6'
-            : 'min-w-72 ease-in duration-300 bg-white/10 px-xl py-lg hover:py-xl backdrop-blur';
+            : 'min-w-72 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 px-xl box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50', btnClassName), children: [jsx("div", { className: btnTitleClassName, children: nav?.title }), jsx("div", { className: btnDescClassName, children: nav?.description })] }, String(i)));
+        return (jsxs("button", { type: "button", onClick: () => onClick(i), "aria-label": nav?.title, className: style('max-h-28 mt-xs ml-xs relative px-xl box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50 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, 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) : null, renderBlock({
@@ -5590,14 +5640,19 @@
     const SwipeListControlBlock = UniBlock(({ listType, showDots, options, version, ...rest }) => (jsx(BlockWrapper, { version: version, defaultPadding: "p-0", ...rest, children: jsx(SwipeListControl, { listType: listType, showDots: showDots, version: version, children: renderChildren({ ...rest, options }) }) })), { childrenTypes: { exclude: ['SwipeListControlBlock'] } });
 
     const scrollButtonStyle = 'hidden sm:flex absolute z-40';
-    const scrollStyleType = {
+    const scrollStyle = {
+        default: {
+            item: 'flex-1',
+            gap: 0,
+            buttonTop: 'top-0',
+        },
         animated: {
-            itemClassName: 'flex',
+            item: 'flex',
             gap: 8,
             buttonTop: 'top-5',
         },
         underlined: {
-            itemClassName: '',
+            item: '',
             gap: 0,
             buttonTop: 'top-0',
         },
@@ -5606,7 +5661,7 @@
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount: items?.length || 0,
         });
-        return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, itemClassName: scrollStyleType[tabsType].itemClassName, gap: scrollStyleType[tabsType].gap, children: items.map(renderTab(value, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: style('left-6', scrollButtonStyle, scrollStyleType[tabsType].buttonTop), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: style('right-6', scrollButtonStyle, scrollStyleType[tabsType].buttonTop), onClick: scroll.scrollRight })) : null] }));
+        return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, itemClassName: scrollStyle[tabsType].item, gap: scrollStyle[tabsType].gap, children: items.map(renderTab(value, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: style('left-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: style('right-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollRight })) : null] }));
     });
 
     const renderTabs = ({ tabsMode, ...props }) => {
@@ -5683,32 +5738,41 @@
     };
     const normalizeTab = (_) => _?.type === 'group' ? { text: _.title, name: _.ref } : _;
 
-    const renderTabsLayout = ({ tabsType = 'animated', ...props }) => {
-        switch (tabsType) {
-            case 'default':
-                return jsx(TabsControl, { ...props });
-            case 'underlined':
-                return (jsx("div", { className: "flex", children: jsx(TabsControl, { className: "m-auto", tabsType: "underlined", ...props }) }));
-            case 'animated':
-                return (jsx("div", { className: "border-b-8 border-primary-main", children: jsx(ScrollableTabsControl, { className: "m-auto", ...props, tabsType: "animated" }) }));
-            default:
-                return null;
-        }
-    };
+    const tabsStyle = {
+        default: {
+            wrapper: '',
+            component: '',
+        },
+        animated: {
+            wrapper: 'border-b-8 border-primary-main bg-white',
+            component: 'm-auto',
+        },
+        underlined: {
+            wrapper: 'flex',
+            component: 'm-auto',
+        },
+    };
+    const renderTabsLayout = ({ tabsType = 'animated', ...props }) => tabsType ? (jsx("div", { className: tabsStyle[tabsType].wrapper, children: jsx(ScrollableTabsControl, { className: tabsStyle[tabsType].component, tabsType: tabsType, ...props }) })) : null;
 
     const TAB_QUERY_PARAM_KEY = 'tab';
-    const TabsLayout = UniBlock(({ className = '', tabs = [], block, tabsType, ...rest }) => {
+    const TabsLayout = UniBlock(({ className = '', tabs = [], block, tabsType, showCounter = false, ...rest }) => {
         const router = useRouter();
-        const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabs));
-        const defaultSelectedTab = tabs.findIndex((_) => Boolean(_.selected));
+        const tabsCounted = showCounter
+            ? tabs.map((_) => ({
+                ..._,
+                count: block?.slots?.[_?.text ?? '']?.length ?? 0,
+            }))
+            : tabs;
+        const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabsCounted));
+        const defaultSelectedTab = tabsCounted.findIndex((_) => Boolean(_.selected));
         useEffect(() => {
-            const query = new URLSearchParams(globalThis?.location?.search || '');
+            const query = new URLSearchParams(globalThis?.location?.search);
             const defaultTabIndex = query.get(TAB_QUERY_PARAM_KEY)
-                ? tabs.findIndex((_, index) => _.type === 'group' && String(index) === query.get(TAB_QUERY_PARAM_KEY))
+                ? tabsCounted.findIndex((_, index) => _.type === 'group' && String(index) === query.get(TAB_QUERY_PARAM_KEY))
                 : defaultSelectedTab;
             setActiveTabIndex(defaultTabIndex === -1 ? 0 : defaultTabIndex);
         }, [defaultSelectedTab]);
-        const slotName = getSlotName(tabs[activeTabIndex], activeTabIndex);
+        const slotName = getSlotName(tabsCounted[activeTabIndex], activeTabIndex);
         const updateUrlSearchTabParam = (_, index) => {
             const searchParams = new URLSearchParams(globalThis?.location?.search || '');
             if (_.text) {
@@ -5720,16 +5784,16 @@
             router.replace(`${router.pathname}?${searchParams}`, { scroll: false });
         };
         const handleChange = useCallback((_) => {
-            const index = tabs.indexOf(_);
-            const tab = tabs[index];
+            const index = tabsCounted.indexOf(_);
+            const tab = tabsCounted[index];
             setActiveTabIndex(index);
             if (tab.type === 'group') {
                 updateUrlSearchTabParam(_, index);
             }
-        }, [tabs]);
+        }, [tabsCounted]);
         return (jsxs(BlockWrapper, { className: style(className), defaultPadding: "p-0", ...rest, children: [renderTabsLayout({
-                    items: tabs,
-                    value: tabs[activeTabIndex],
+                    items: tabsCounted,
+                    value: tabsCounted[activeTabIndex],
                     tabsType,
                     onChange: handleChange,
                 }), jsx("div", { className: "space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs", children: renderBlocksList(block?.slots?.[slotName], {
@@ -6029,7 +6093,7 @@
 
     const COOKIE_DIALOG_ID = 'cookie';
     const DIALOG_INITIAL_DELAY = 3 * 1000;
-    const CookiePopup = JSX(({ termLink, personalDataPolicyLink }) => {
+    const CookiePopup = JSX(({ termLink, personalDataPolicyLink, recommendationLink }) => {
         const [opened, { setTrue: open, setFalse: close }] = useBool();
         useDebouncedEffect(() => {
             if (!globalThis.localStorage?.getItem(COOKIE_DIALOG_ID)) {
@@ -6040,7 +6104,7 @@
             globalThis.localStorage?.setItem(COOKIE_DIALOG_ID, 'true');
             close();
         }, []);
-        return opened ? (jsx("div", { className: "container fixed left-0 right-0 bottom-0 z-50", role: "dialog", children: jsxs("div", { className: "bg-white m-xl p-xl rounded-md flex sm:items-center shadow-main-black", children: [jsx("div", { className: "sm:flex-1", children: jsxs(Paragraph, { size: "text-s", font: "font-light", color: "text-primary-text", children: ["\u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442", jsx(LinkWrapper, { isRemote: true, className: linkWrapperStyle(termLink?.href), ...termLink, children: "cookie" }), "(\u0444\u0430\u0439\u043B\u044B \u0441 \u0434\u0430\u043D\u043D\u044B\u043C\u0438 \u043E \u043F\u0440\u043E\u0448\u043B\u044B\u0445 \u043F\u043E\u0441\u0435\u0449\u0435\u043D\u0438\u044F\u0445 \u0441\u0430\u0439\u0442\u0430) \u0434\u043B\u044F \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043E\u0432 \u0438 \u0443\u0434\u043E\u0431\u0441\u0442\u0432\u0430 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u0439. \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0437\u0430\u043F\u0440\u0435\u0442\u0438\u0442\u044C \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435 cookie \u0432 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430\u0445 \u0441\u0432\u043E\u0435\u0433\u043E \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.", jsx(LinkWrapper, { isRemote: true, className: linkWrapperStyle(personalDataPolicyLink?.href), ...personalDataPolicyLink, children: "\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0430 \u0412\u0430\u0448\u0438\u0445 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445" }), "\u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0441\u044F \u0432 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u044F\u043C\u0438 \u0424\u0435\u0434\u0435\u0440\u0430\u043B\u044C\u043D\u043E\u0433\u043E \u0437\u0430\u043A\u043E\u043D\u0430 \u043E\u0442 27.07.2006 \u2116 152-\u04243 \u00AB\u041E \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445\u00BB."] }) }), jsx("div", { className: "ml-s sm:ml-0 w-24 flex justify-end", children: jsx(CloseButton, { className: "bg-main-gray rounded-md", onClose: handleClose }) })] }) })) : null;
+        return opened ? (jsx("div", { className: "container fixed left-0 right-0 bottom-0 z-50", role: "dialog", children: jsxs("div", { className: "bg-white m-xl p-xl rounded-md flex sm:items-center shadow-main-black", children: [jsx("div", { className: "sm:flex-1", children: jsxs(Paragraph, { size: "text-s", font: "font-light", color: "text-primary-text", children: ["\u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442", jsx(LinkWrapper, { isRemote: true, className: linkWrapperStyle(termLink?.href), ...termLink, children: "cookie" }), "(\u0444\u0430\u0439\u043B\u044B \u0441 \u0434\u0430\u043D\u043D\u044B\u043C\u0438 \u043E \u043F\u0440\u043E\u0448\u043B\u044B\u0445 \u043F\u043E\u0441\u0435\u0449\u0435\u043D\u0438\u044F\u0445 \u0441\u0430\u0439\u0442\u0430) \u0434\u043B\u044F \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043E\u0432 \u0438 \u0443\u0434\u043E\u0431\u0441\u0442\u0432\u0430 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u0439. \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0437\u0430\u043F\u0440\u0435\u0442\u0438\u0442\u044C \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435 cookie \u0432 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430\u0445 \u0441\u0432\u043E\u0435\u0433\u043E \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.", jsx(LinkWrapper, { isRemote: true, className: linkWrapperStyle(personalDataPolicyLink?.href), ...personalDataPolicyLink, children: "\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0430 \u0412\u0430\u0448\u0438\u0445 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445" }), "\u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0441\u044F \u0432 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u044F\u043C\u0438 \u0424\u0435\u0434\u0435\u0440\u0430\u043B\u044C\u043D\u043E\u0433\u043E \u0437\u0430\u043A\u043E\u043D\u0430 \u043E\u0442 27.07.2006 \u2116 152-\u04243 \u00AB\u041E \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445\u00BB. \u041D\u0430 \u0441\u0430\u0439\u0442\u0435 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044E\u0442\u0441\u044F \u0440\u0435\u043A\u043E\u043C\u0435\u043D\u0434\u0430\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0442\u0435\u0445\u043D\u043E\u043B\u043E\u0433\u0438\u0438 \u0441\u043E\u0433\u043B\u0430\u0441\u043D\u043E", jsx(LinkWrapper, { isRemote: true, className: linkWrapperStyle(recommendationLink?.href), ...recommendationLink, children: "\u041F\u0440\u0430\u0432\u0438\u043B\u0430\u043C \u043F\u0440\u0438\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u0440\u0435\u043A\u043E\u043C\u0435\u043D\u0434\u0430\u0442\u0435\u043B\u044C\u043D\u044B\u0445 \u0442\u0435\u0445\u043D\u043E\u043B\u043E\u0433\u0438\u0439." })] }) }), jsx("div", { className: "ml-s sm:ml-0 w-24 flex justify-end", children: jsx(CloseButton, { className: "bg-main-gray rounded-md", onClose: handleClose }) })] }) })) : null;
     });
     const linkWrapperStyle = (href) => style('inline mx-2xs', href ? 'text-green-dark' : '');
 
@@ -6170,14 +6234,14 @@
                                 }), renderBlocksList(slots?.[FOOTER_SLOT], { ...options, slotName: FOOTER_SLOT })] })] }), slots?.[STICKY_FOOTER_SLOT]?.length ? (jsx("div", { className: "fixed w-full bottom-0 left-0 z-[100]", children: renderBlocksList(slots?.[STICKY_FOOTER_SLOT], {
                         ...options,
                         slotName: STICKY_FOOTER_SLOT,
-                    }) })) : null, jsx(DialogManager, {}), jsx(PopupManager, {}), jsx(CookiePopup, { termLink: { href: '/pd-policy#cookie', target: '_blank' }, personalDataPolicyLink: { href: '/pd-policy', target: '_blank' } })] }));
+                    }) })) : null, jsx(DialogManager, {}), jsx(PopupManager, {}), jsx(CookiePopup, { termLink: { href: '/pd-policy#cookie', target: '_blank' }, recommendationLink: { href: '/recommendation', target: '_blank' }, personalDataPolicyLink: { href: '/pd-policy', target: '_blank' } })] }));
     });
     Object.assign(ContentPage, {
         childrenTypes: [],
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.15.337";
+    const packageVersion = "0.15.340";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;