@redneckz/wildless-cms-uni-blocks 0.6.40 → 0.6.42

package/bundle/bundle.umd.js

@@ -868,6 +868,11 @@
 
     const BusinessBlock = JSX(({ className = '', title, cards, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans bg-white p-12 pb-9 ${className}`, ...rest, children: [jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }), jsx("div", { className: "flex gap-5", children: cards?.length ? cards.map((_, i) => jsx(BusinessCard, { ..._ }, String(i))) : null })] })));
 
+    const ButtonBlock = JSX((props) => {
+        const { className, button, ...rest } = props;
+        return (jsx(BlockWrapper, { className: className, ...rest, children: button ? renderButton({ button }) : null }));
+    });
+
     const useCarouselControls = (props) => {
         const { itemCount, visibleItemCount, isCyclic } = props;
         const [activeIndex, setActiveIndex] = useState(0);
@@ -927,7 +932,7 @@
         maxSum: DEFAULT_MAX_SUM,
         minMonths: DEFAULT_MIN_MONTHS,
         maxMonths: DEFAULT_MAX_MONTHS,
-        rateBottomRange: 10,
+        rateBottomRange: 12,
         rateTopRange: 7,
         isSalaryClient: true,
         isStateEmployee: true,
@@ -1439,7 +1444,7 @@
     });
 
     const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]', 'min-w-[25%]'];
-    const SwipeListContainer = JSX(({ className = '', containerRef, activeIndex, visibleItemCount, gap = 0, padding = 0, snapAlign = 'snap-center', children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
+    const SwipeListContainer = JSX(({ className = '', containerRef, activeIndex, visibleItemCount = 0, gap = 0, padding = 0, snapAlign = 'snap-center', children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
         const observerOptions = {
             sensitivity: 1,
             rootRef: containerRef,
@@ -1452,14 +1457,18 @@
             onVisibleItemsChange && onVisibleItemsChange(itemsVisibilityList);
             onVisibleIndicesChange && onVisibleIndicesChange(getVisibleIndices(itemsVisibilityList));
         }, [onVisibleItemsChange, onVisibleIndicesChange]);
-        return (jsx("div", { className: `box-border overflow-auto flex horizontal-list no-scrollbar ${className}`, style: { ...getContainerStyle(padding), gap: `${gap}px` }, role: "list", ref: containerRef, children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: `${snapAlign} ${visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''}`, style: getContainerStyle(padding / 4), activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
+        const additionPadding = visibleItemCount > 0 ? gap * Number(visibleItemCount) - 1 : 0;
+        return (jsx("div", { className: `box-border overflow-auto flex horizontal-list no-scrollbar ${className}`, style: {
+                ...getContainerStyle(padding, additionPadding),
+                gap: `${gap}px`,
+            }, role: "list", ref: containerRef, children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: `${snapAlign} ${visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''}`, style: getContainerStyle(padding / 4), activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
     });
     // Styles used to compensate outer container padding to get rid of clipping effect
-    const getContainerStyle = (padding) => ({
+    const getContainerStyle = (padding, additionalPadding = 0) => ({
         marginLeft: `${-padding}px`,
         marginRight: `${-padding}px`,
         paddingLeft: `${padding}px`,
-        paddingRight: `${padding}px`,
+        paddingRight: `${padding + additionalPadding}px`,
     });
     const getVisibleIndices = (itemsVisibilityList) => itemsVisibilityList
         .map((_, i) => [_, i])
@@ -1667,9 +1676,9 @@
                 BORDER_STYLE,
                 AlignText[align],
                 VersionStyleMap[version],
-            ].join(' '), role: "listitem", children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$2(icon, version), renderCardTitle$1(headlineSmallVersion, title), renderDescription$3(description, title), renderItems$2(items, isDotted, version), renderAdditionalDescription$2(additionalDescription, version)] }), renderButton({ button, buttonClassName: 'mt-6' })] }));
+            ].join(' '), role: "listitem", children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$4(icon, version), renderCardTitle$1(headlineSmallVersion, title), renderDescription$3(description, title), renderItems$2(items, isDotted, version), renderAdditionalDescription$2(additionalDescription, version)] }), renderButton({ button, buttonClassName: 'mt-6' })] }));
     });
-    const renderImage$2 = (image, version) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`, image: getIconWithVersion(image, version), asSVG: true })) : null] }));
+    const renderImage$4 = (image, version) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`, image: getIconWithVersion(image, version), asSVG: true })) : null] }));
     const renderCardTitle$1 = (headlineSmallVersion, title) => title ? jsx(Text, { size: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
     const renderDescription$3 = (description, title) => description ? (jsx("div", { className: title ? 'mt-2' : '', children: jsx(Paragraph, { size: "text-l", children: description }) })) : null;
     const renderAdditionalDescription$2 = (additionalDescription, version = 'primary') => additionalDescription ? (jsx("div", { className: "mt-auto", children: jsx(Text, { size: "text-m", font: "font-light", color: descriptionStyleMap[version], children: additionalDescription }) })) : null;
@@ -1822,7 +1831,7 @@
         return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [currency ? (jsx(ImgInner, { image: { icon: CURRENCY_ICONS_MAP[currency] }, width: "24", height: "24" })) : null, jsx("span", { className: "ml-2", children: currency })] }) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.saleExchangeRate) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.buyExchangeRate) })] }, currency));
     };
 
-    const CurrentLocation = JSX(({ className = '', address }) => (jsxs("div", { className: `flex ${className}`, children: [jsx(ImgInner, { image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3", children: [address ? jsx("p", { className: "text-primary-main  m-0 mb-1 text-l", children: address }) : null, jsx("p", { className: "text-secondary-text m-0 text-m", children: "\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0437\u0430\u0434\u0430\u043D\u043D\u043E\u0433\u043E \u043E\u0444\u0438\u0441\u0430" })] })] })));
+    const CurrentLocation$1 = JSX(({ className = '', address }) => (jsxs("div", { className: `flex ${className}`, children: [jsx(ImgInner, { image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3", children: [address ? jsx("p", { className: "text-primary-main  m-0 mb-1 text-l", children: address }) : null, jsx("p", { className: "text-secondary-text m-0 text-m", children: "\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0437\u0430\u0434\u0430\u043D\u043D\u043E\u0433\u043E \u043E\u0444\u0438\u0441\u0430" })] })] })));
 
     const roundTo = (value, precision = 2) => {
         const factor = 10 ** precision;
@@ -1970,7 +1979,7 @@
     };
 
     const EXCHANGE_RATES_URL = '/api/v1/exchangerates';
-    const REGION_URL = '/api/v1/region';
+    const REGION_URL$1 = '/api/v1/region';
     function useFetchExchangeRateData() {
         const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchData);
         return data || {};
@@ -1983,7 +1992,7 @@
     };
     const fetchRegion = async () => {
         try {
-            return await fetchJSONUnsafe(REGION_URL, { method: 'GET' });
+            return await fetchJSONUnsafe(REGION_URL$1, { method: 'GET' });
         }
         catch (error) {
             console.log(error);
@@ -2009,7 +2018,7 @@
         currencyRatesBuy.unshift({ currency: { currency: Currency.RUB } });
         const currencyRatesSell = currencyRates.filter((_) => _.saleExchangeRate);
         currencyRatesSell.push({ currency: { currency: Currency.RUB } });
-        return (jsx(BlockWrapper, { className: `bg-white text-primary-text font-sans p-9 box-border min-h-80 ${className}`, ...rest, children: jsx(BaseTile, { title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap text-h4 mb-5" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-14 pt-4", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[30px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { address: exchangeRates?.address })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
+        return (jsx(BlockWrapper, { className: `bg-white text-primary-text font-sans p-9 box-border min-h-80 ${className}`, ...rest, children: jsx(BaseTile, { title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap text-h4 mb-5" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-14 pt-4", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[30px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation$1, { address: exchangeRates?.address })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
     });
     const getCurrencyRates = (currencies) => {
         return currencies?.filter((_) => _?.currency?.id === 1 || _?.currency?.id === 2) || [];
@@ -2030,20 +2039,24 @@
         'bg-white': 'text-primary-main',
         transparent: 'text-white',
     };
+    const renderImage$3 = (bgColor, image, size) => {
+        return image?.src ? (jsx(ImgInner, { image: image, className: SVG_COLOR[bgColor], width: size?.width, height: size?.height, asSVG: true })) : (jsx(ImgInner, { image: {
+                icon: image?.icon || 'LogoIcon',
+                iconVersion: ICON_VERSION_MAP[bgColor],
+            }, className: SVG_COLOR[bgColor], width: size?.width, height: size?.height, asSVG: true }));
+    };
+
     const TEXT_COLOR = {
         'bg-white': 'text-primary-text',
         transparent: 'text-white',
     };
+    const renderTitle$2 = (title, bgColor, className) => {
+        return (jsx("span", { className: `${TEXT_COLOR[bgColor]} ml-2.5 font-medium ${className || ''}`, children: title || 'Россельхозбанк' }));
+    };
+
     const Logo = JSX(({ className = '', href, logo, children = logo?.title, targetBlank, bgColor = 'bg-white', showTitle = true, }) => {
-        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [logo?.image?.src ? (jsx(ImgInner, { image: logo.image, className: SVG_COLOR[bgColor], width: "40", height: "45", asSVG: true })) : (jsx(ImgInner, { image: {
-                        icon: logo?.image?.icon || 'LogoIcon',
-                        iconVersion: ICON_VERSION_MAP[bgColor],
-                    }, className: `${SVG_COLOR[bgColor]} w-10`, width: "40", height: "45", asSVG: true })), showTitle ? renderTitle$2(children, bgColor, logo?.title) : null] }));
+        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$3(bgColor, logo?.image, { width: '40', height: '45' }), showTitle ? renderTitle$2(children || logo?.title, bgColor) : null] }));
     });
-    const renderTitle$2 = (children, bgColor, title) => {
-        const text = children || title || 'Россельхозбанк';
-        return jsx("span", { className: `${TEXT_COLOR[bgColor]} font-medium ml-2.5`, children: text });
-    };
 
     const useSearch = () => {
         const [term, setTerm] = useState('');
@@ -2069,7 +2082,7 @@
                     }, children: jsx("div", { className: "text-s px-9 py-2.5", children: "\u041D\u0430\u0439\u0442\u0438" }) }))] }));
     });
 
-    const SearchBar = JSX((props) => jsx(SearchBarInner, { ...props }));
+    const SearchBar$1 = JSX((props) => jsx(SearchBarInner, { ...props }));
 
     const Contacts = JSX(({ className = '', items, hasButton }) => (jsxs("div", { className: className, children: [items?.length ? items.map(renderContact) : null, hasButton ? (jsx(Button, { version: "primary", className: "mb-6 w-full", href: "/", target: "_blank", ariaLabel: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C", text: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C" })) : null] })));
     const renderContact = (item, index) => {
@@ -2174,7 +2187,7 @@
     const Footer = JSX(({ className, ...rest }) => {
         const fallback = rest.options?.page?.fallback;
         const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, logo } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
-        return (jsxs(BlockWrapper, { tag: "footer", className: `p-9 bg-white font-sans ${className || ''}`, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD, logo: logo }), jsx(SearchBar, { className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, hasButton: true }), jsx(SocialMedia, { media: socialMedia, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "pt-[3px]", items: topItems, fallback: fallback })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
+        return (jsxs(BlockWrapper, { tag: "footer", className: `p-9 bg-white font-sans ${className || ''}`, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD, logo: logo }), jsx(SearchBar$1, { className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, hasButton: true }), jsx(SocialMedia, { media: socialMedia, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "pt-[3px]", items: topItems, fallback: fallback })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
     });
 
     const galleryLengthForScrollMap = {
@@ -2190,13 +2203,13 @@
         mini: 276,
     };
 
-    const GalleryCardInner = JSX(({ title, headlineSmallVersion = 'H6', description, additionalDescription, icon, items, button, version, isFullWidth = true, isDotted = true, align = 'center', }) => (jsxs("div", { className: `h-full flex flex-col justify-between ${AlignText[align]}`, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$1(icon, version), renderCardTitle(headlineSmallVersion, title), renderDescription$2(description, title), items?.length ? renderItems$1(items, isDotted, version) : null, renderAdditionalDescription$1(additionalDescription, version)] }), button?.text
+    const GalleryCardInner = JSX(({ title, headlineSmallVersion = 'H6', description, additionalDescription, icon, items, button, version, isFullWidth = true, isDotted = true, align = 'center', }) => (jsxs("div", { className: `h-full flex flex-col justify-between ${AlignText[align]}`, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$2(icon, version), renderCardTitle(headlineSmallVersion, title), renderDescription$2(description, title), items?.length ? renderItems$1(items, isDotted, version) : null, renderAdditionalDescription$1(additionalDescription, version)] }), button?.text
                 ? renderButton({
                     button,
                     buttonClassName: `mt-6 ${isFullWidth ? '' : 'self-center'}`,
                 })
                 : null] })));
-    const renderImage$1 = (image, version) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-8 h-8 min-w-8 mb-5 rounded-full`, image: getIconWithVersion(image, version), asSVG: true })) : null] }));
+    const renderImage$2 = (image, version) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-8 h-8 min-w-8 mb-5 rounded-full`, image: getIconWithVersion(image, version), asSVG: true })) : null] }));
     const renderCardTitle = (headlineSmallVersion, title) => title ? jsx("div", { className: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
     const renderDescription$2 = (description, title) => description ? jsx("div", { className: `text-l ${title ? 'mt-2' : ''}`, children: description }) : null;
     const renderAdditionalDescription$1 = (additionalDescription, version) => additionalDescription ? (jsx("div", { className: `text-m-light mt-auto ${VersionAdditionalStyleMap[version ?? 'primary']}`, children: additionalDescription })) : null;
@@ -2273,22 +2286,99 @@
         return `${active ? 'text-primary-main' : nonActiveAtoms} ${TEXT_CLASSES$2}`;
     };
 
-    const DaData = DaDataAPI('https://10.80.4.9');
-    function useGeolocation(defaultLocation) {
-        const [city, setCity] = useState(defaultLocation);
+    const STORAGE_DEFAULT_TTL = 86400000; // 24 * 60 * 60 * 1000
+    function useCachedAsyncData(key, fetcher, storage = globalThis?.localStorage) {
+        const cachedFetcher = useCallback(async (...args) => {
+            const storageKey = `async:${key}`;
+            const storageData = storage.getItem(storageKey);
+            const cachedData = getParsedData(storageData);
+            if (cachedData) {
+                return cachedData;
+            }
+            const data = await fetcher(...args);
+            storage.setItem(storageKey, JSON.stringify({ data, timestamp: Date.now() }));
+            return data;
+        }, [key, fetcher]);
+        return useAsyncData(key, cachedFetcher);
+    }
+    function getParsedData(storageData) {
+        const { data = null, timestamp = null } = storageData ? JSON.parse(storageData) : {};
+        return data && Date.now() - timestamp < STORAGE_DEFAULT_TTL ? data : undefined;
+    }
+
+    const REGION_URL = '/api/v1/region';
+    const localStorageLocation = globalThis?.localStorage.getItem('location');
+    const currentLocation = localStorageLocation
+        ? JSON.parse(localStorageLocation)
+        : null;
+    function useLocation(defaultLocation) {
+        const [location, setLocation] = useState(currentLocation?.region ?? { name: defaultLocation });
+        const { data } = useCachedAsyncData(REGION_URL, fetchJSONUnsafe);
         useEffect(() => {
-            setCity(globalThis?.localStorage.getItem('location') || defaultLocation);
-        }, [defaultLocation]);
-        const getCity = useCallback(() => {
-            DaData.getFetcherAddress().then((_) => {
-                const location = _ || defaultLocation;
-                globalThis?.localStorage.setItem('location', location);
-                setCity(location);
-            });
-        }, [defaultLocation]);
-        return [city, getCity];
+            setLocation(currentLocation?.region && currentLocation?.manual
+                ? currentLocation.region
+                : data || { name: defaultLocation });
+        }, [data]);
+        const onChangeLocation = useCallback((region) => {
+            globalThis?.localStorage.setItem('location', JSON.stringify({ manual: true, region }));
+            setLocation(region);
+        }, [setLocation]);
+        return [location, onChangeLocation];
+    }
+
+    const REGIONS_URL$1 = '/api/v1/regions';
+    function useRegions() {
+        const { data } = useAsyncData(REGIONS_URL$1, fetchJSONUnsafe);
+        return data || [];
     }
 
+    const groupBy = (list, keyGetter) => {
+        const map = new Map();
+        list.forEach((item) => {
+            const key = keyGetter(item);
+            const collection = map.get(key);
+            map.set(key, [...(collection || []), item]);
+        });
+        return map;
+    };
+
+    const SearchBar = JSX(({ className, searchTerm, onSearch }) => {
+        return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsx("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: searchTerm ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text `, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0444\u0438\u043B\u0438\u0430\u043B\u0430\u043C" })) }), jsx("input", { id: "search-bar-input", className: `h-12 pl-4 w-full peer text-l text-black border border-solid rounded-md box-border
+              outline-none border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text`, value: searchTerm, onChange: (e) => onSearch(e.target.value), type: "text", name: "location-search-bar-input" })] }));
+    });
+
+    const SEARCH_TERM_MIN_LENGTH = 3;
+    const Location = JSX(({ currentLocation, onChangeLocation, close, foreignOffices }) => {
+        const { term, setTerm } = useSearch();
+        const handleSearch = useCallback((_) => setTerm(_), []);
+        const regions = cleanUpRegions(useRegions()).sort((a, b) => a.name.localeCompare(b.name));
+        const regionsGroupByLetter = groupBy(regions, regionFirstLetter);
+        return (jsxs("div", { className: "absolute h-full w-full inset-0 bg-white text-l-light z-50", children: [jsx(CloseButton, { close: close }), jsxs("div", { className: "container py-12", children: [jsx(CurrentLocation, { currentLocation: currentLocation }), jsx(SearchBar, { onSearch: handleSearch, searchTerm: term, className: "mb-7" }), term && term.length >= SEARCH_TERM_MIN_LENGTH ? (jsx("div", { children: regions
+                                .filter((region) => region.name?.startsWith(term))
+                                .map(renderRegion({ onChangeLocation, close })) })) : (jsx("div", { className: "columns-5", children: Array.from(regionsGroupByLetter.entries()).map(renderRegionGroup({ onChangeLocation, close })) })), jsx(ForeignOffices, { foreignOffices: foreignOffices })] })] }));
+    });
+    const regionFirstLetter = (region) => region.name?.charAt(0) || '';
+    const cleanUpRegions = (regions) => regions.map((region) => ({
+        ...region,
+        name: region.name?.replace(/республика|область|край'/gi, '').trim() || '',
+    }));
+    const CurrentLocation = JSX(({ currentLocation }) => currentLocation ? (jsxs("div", { className: "mb-4", children: [jsx(Text, { size: "text-l", font: "font-light", children: "\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u044B\u0431\u0440\u0430\u043D:\u00A0" }), jsx("button", { className: "cursor-pointer", onClick: close, children: jsx(Text, { color: "text-green", children: currentLocation.name }) })] })) : null);
+    const CloseButton = JSX(({ close }) => (jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-6 right-6 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
+            e.preventDefault();
+            close && close();
+        }, children: jsx(ImgInner, { image: "CloseIcon", width: "24", height: "24" }) })));
+    const renderRegionGroup = ({ onChangeLocation, close }) => ([letter, regions]) => (jsxs("div", { className: "break-inside-avoid mb-7 w-[224px]", children: [jsx("div", { className: "mb-2.5", children: jsx(Text, { size: "text-h6", children: letter }) }), regions.map(renderRegion({ onChangeLocation, close }))] }, letter));
+    const renderRegion = ({ onChangeLocation, close }) => (region) => (jsx("div", { className: "mb-1", children: jsx("button", { className: "cursor-pointer hover:text-primary-hover", onClick: () => {
+                onChangeLocation && onChangeLocation(region);
+                close && close();
+            }, children: region.name }) }, region.id));
+    const ForeignOffices = JSX(({ foreignOffices }) => foreignOffices?.length ? (jsxs("div", { className: "border-t border-main-divider mt-7 pt-7", children: [jsx("div", { className: "mb-4", children: jsx(Text, { size: "text-m-light", color: "text-secondary-text", children: "\u041F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435\u043B\u044C\u0441\u0442\u0432\u0430 \u0437\u0430 \u0440\u0443\u0431\u0435\u0436\u043E\u043C:" }) }), jsx("div", { className: "flex gap-10", children: foreignOffices.map((office, i) => (jsx(ForeignOffice, { ...office }, String(i)))) })] })) : null);
+    const ForeignOffice = JSX(({ icon, ...rest }) => {
+        const link = useLink();
+        const { text, target, href, onClick } = link(rest);
+        return (jsxs("div", { className: "flex gap-x-3", children: [jsx(ImgInner, { image: icon }), jsx("a", { className: "hover:text-primary-hover", href: href, target: target, onClick: onClick, children: text })] }));
+    });
+
     const HeaderSecondaryMenuButton = JSX(({ className = '', children, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 p-0 w-6 h-6 flex items-center bg-inherit cursor-pointer ${className}`, disabled: true, "aria-label": ariaLabel, children: children })));
 
     const COLORS_MAP = {
@@ -2303,9 +2393,16 @@
         'bg-white': 'black',
         transparent: 'white',
     };
-    const HeaderSecondaryMenu = JSX(({ className, officesLink, defaultLocation = 'Москва', bgColor = 'bg-white' }) => {
-        const [city, getCity] = useGeolocation(defaultLocation);
-        return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: city, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: getCity, bgColor: bgColor }), officesLink ? (jsx(TopItem, { className: "mr-7", flat: true, href: officesLink, text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432", bgColor: bgColor })) : null, jsx(HeaderSecondaryMenuButton, { className: `mr-5 group ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(ImgInner, { image: { icon: 'LoupeIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full pointer-events-none", imageClassName: "group-hover:text-primary-hover group-hover:invert-0 pointer-events-none", asSVG: true }) }), jsx(HeaderSecondaryMenuButton, { className: `${LINKS_COLORS_MAP[bgColor]} group min-w-8 min-h-8`, ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(ImgInner, { image: { icon: 'GridIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full bg-main-divider/20 rounded-full pointer-events-none", imageClassName: "group-hover:text-primary-hover group-hover:invert-0", asSVG: true }) })] }));
+    const HeaderSecondaryMenu = JSX(({ className, officesLink, defaultLocation = 'Москва', foreignOffices, bgColor = 'bg-white', }) => {
+        const [isShowLocationModal, setShowLocationModal] = useState(false);
+        const [location, onChangeLocation] = useLocation(defaultLocation);
+        const showLocationModal = () => {
+            setShowLocationModal(true);
+        };
+        const hideLocationModal = () => {
+            setShowLocationModal(false);
+        };
+        return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: location.name, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: showLocationModal, bgColor: bgColor }), officesLink ? (jsx(TopItem, { className: "mr-7", flat: true, href: officesLink, text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432", bgColor: bgColor })) : null, jsx(HeaderSecondaryMenuButton, { className: `mr-5 group ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(ImgInner, { image: { icon: 'LoupeIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full pointer-events-none", imageClassName: "group-hover:text-primary-hover group-hover:invert-0 pointer-events-none", asSVG: true }) }), jsx(HeaderSecondaryMenuButton, { className: `${LINKS_COLORS_MAP[bgColor]} group min-w-8 min-h-8`, ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(ImgInner, { image: { icon: 'GridIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }, className: "h-full bg-main-divider/20 rounded-full pointer-events-none", imageClassName: "group-hover:text-primary-hover group-hover:invert-0", asSVG: true }) }), isShowLocationModal ? (jsx(Location, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation, close: hideLocationModal })) : null] }));
     });
 
     const findActiveSubItem = (router) => (items = []) => {
@@ -2386,10 +2483,10 @@
     };
     const Header = JSX(({ bgColor = 'bg-white', className = '', showSubMenu = true, ...rest }) => {
         const router = useRouter();
-        const { topItems, logo, defaultLocation, officesLink } = useSWRResource(projectSettings.SITEMAP || 'sitemap', rest.options?.page?.fallback);
+        const { topItems, logo, defaultLocation, foreignOffices, officesLink } = useSWRResource(projectSettings.SITEMAP || 'sitemap', rest.options?.page?.fallback);
         const activeTopItem = showSubMenu ? getActiveItem(topItems, router) : null;
         const topMenu = topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, "aria-label": _.text, bgColor: bgColor, ..._ }, String(i))));
-        return (jsx(BlockWrapper, { tag: "header", className: `pt-6 px-20 ${bgColor} ${className} ${showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5'}`, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { className: "ml-auto", defaultLocation: defaultLocation, officesLink: officesLink, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-px ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
+        return (jsx(BlockWrapper, { tag: "header", className: `pt-6 px-20 ${bgColor} ${className} ${showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5'}`, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { className: "ml-auto", foreignOffices: foreignOffices, defaultLocation: defaultLocation, officesLink: officesLink, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-px ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
     });
     const getActiveItem = (topItems, router) => {
         const [firstPortal] = topItems || [];
@@ -3182,8 +3279,8 @@
       `, children: jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `last:pb-0 ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text  ${btnDescClassName}`, children: slide?.description })] }) }, String(i)));
     }
 
-    const ProductTile = JSX(({ className = '', title, headlineVersion = 'S', description, additionalDescription, benefits = [], buttons, image, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `overflow-hidden font-sans p-9 box-border relative justify-between grid min-h-[364px]
-          ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)}`, ...rest, children: [jsx(Headline, { className: `!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`, as: "h2", title: title, description: description, headlineVersion: headlineVersion, bgColorHeadline: version, align: "left", ...rest }), renderBenefits(benefits, version, image), additionalDescription ? renderAdditionalDescription(additionalDescription, image) : null, buttons?.length ? (jsx(ButtonSection, { buttons: buttons, className: "flex self-end mt-5 gap-4 z-10 text-l" })) : null, image?.src ? jsx(ImgInner, { className: "absolute right-0 bottom-0", image: image }) : null] })));
+    const ProductTile = JSX(({ className = '', title, headlineVersion = 'S', description, additionalDescription, benefits = [], buttons, image, isImageOnRightSide = true, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `overflow-hidden font-sans p-9 box-border relative min-h-[364px]
+          ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${className}`, ...rest, children: [jsxs("div", { className: `flex flex-col ${isImageOnRightSide ? '' : 'items-end'}`, children: [jsx(Headline, { className: `!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`, as: "h2", title: title, description: description, headlineVersion: headlineVersion, bgColorHeadline: version, align: "left", ...rest }), renderBenefits(benefits, version, image), additionalDescription ? renderAdditionalDescription(additionalDescription, image) : null, buttons?.length ? (jsx(ButtonSection, { buttons: buttons, className: "mt-5 gap-4 z-10 text-l" })) : null] }), renderImage$1(image, isImageOnRightSide)] })));
     function renderBenefits(benefits, version, image) {
         // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
         const BENEFITS_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
@@ -3202,6 +3299,12 @@
         const DESCRIPTION_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
         return (jsx("div", { className: `text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH}`, children: additionalDescription }));
     }
+    function renderImage$1(image, isImageOnRightSide) {
+        if (!image?.src) {
+            return null;
+        }
+        return (jsx(ImgInner, { className: `absolute ${isImageOnRightSide ? 'right-0' : 'left-0'} bottom-0`, image: image }));
+    }
 
     const PromoTile = JSX(({ className = '', title = 'Акции и спецпредложения', date, description, buttons = [], version = 'primary', ...rest }) => (jsx(BlockWrapper, { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsx(BaseTile, { title: title ? (jsx(Headline, { title: title, className: `!p-0 max-w-[600px]`, headlineVersion: getTileHeadingType(className), bgColorHeadline: version, align: "left", as: "h2", ...rest })) : null, buttons: buttons?.length ? jsx(ButtonSection, { buttons: buttons, className: "flex gap-3" }) : null, children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-s mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) }) })));
     function formatDate(date) {
@@ -3214,10 +3317,19 @@
         return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
     }
 
+    const CarouselRecommendationCard = JSX(({ button, className = '', description, image, items = [], socialMedia = [], title, version = 'primary', ...rest }) => {
+        const tileTitle = title ? (jsx(Heading, { headingType: "h5", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
+        const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
+        return (jsx(BlockWrapper, { className: `relative text-left border border-solid box-border p-7 min-w-[524px]
+        ${BorderVersionStyleMap[version]}
+        ${VersionStyleMap[version]}
+        ${className}`, ...rest, children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? jsx("span", { className: "mb-2", children: description }) : null, items.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items, version: version })) : null, socialMedia.length ? (jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia, version: version })) : null, button?.text ? jsx("div", { className: "pt-2 mt-16", children: renderButton({ button }) }) : null] }) }) }));
+    });
+
     const RecommendationCard = JSX(({ className = '', title, description, items, image, version, socialMedia, button }) => {
         const tileTitle = title ? (jsx(Heading, { headingType: "h5", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
         const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
-        return (jsx("section", { className: `relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`, role: "listitem", children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? jsx("span", { className: "mb-2", children: description }) : null, items?.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items, version: version })) : null, socialMedia ? (jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia, version: version })) : null, button?.text ? (jsx("div", { className: "pt-2", children: renderButton({ button, buttonClassName: 'mt-16' }) })) : null] }) }) }));
+        return (jsx("section", { className: `relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`, role: "listitem", children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? jsx("span", { className: "mb-2", children: description }) : null, items?.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items, version: version })) : null, socialMedia ? (jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia, version: version })) : null, button?.text ? (jsx("div", { className: "pt-2", children: renderButton({ button, buttonClassName: 'mt-16 px-5' }) })) : null] }) }) }));
     });
 
     const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
@@ -3803,6 +3915,7 @@
         AccordionItem,
         BenefitsBlock,
         BusinessBlock,
+        ButtonBlock,
         Bonus,
         BonusBenefitsBlock,
         CardTransfer,
@@ -3838,11 +3951,10 @@
         ProductGallery,
         ProductTile,
         PromoTile,
-        OfficeMap,
         OfficeServicesBlock,
         OtherProducts,
         OtherProductsItem,
-        Recommendation,
+        CarouselRecommendationCard,
         RollupItem,
         SafeDepositRental,
         StepsBlock,
@@ -3852,6 +3964,8 @@
         Tile,
         VerticalLayout,
         Video,
+        Recommendation,
+        OfficeMap,
     };
 
     const debounce = (fn, delay = 600) => {
@@ -3979,7 +4093,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.6.40";
+    const packageVersion = "0.6.42";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;