@redneckz/wildless-cms-uni-blocks 0.6.16 → 0.6.17

package/bundle/bundle.umd.js

@@ -280,19 +280,19 @@
 
     const IntersectionObserverTag = JSX((props) => {
         const { tag = 'section', observerCallback, observerOptions, className = '', anchor = null, children, } = props;
-        const intersectionObserver = useRef(null);
-        const ref = useCallback((element) => {
-            if (!element) {
-                return;
-            }
-            if (intersectionObserver.current) {
-                intersectionObserver.current.disconnect();
+        const tagRef = useRef(null);
+        useEffect(() => {
+            if (!tagRef.current) {
+                return undefined;
             }
-            intersectionObserver.current = new IntersectionObserver(observerCallback, observerOptions);
-            intersectionObserver.current.observe(element);
+            const intersectionObserver = new IntersectionObserver(observerCallback, observerOptions);
+            intersectionObserver.observe(tagRef.current);
+            return () => {
+                intersectionObserver.disconnect();
+            };
         }, [observerCallback, observerOptions]);
         const Tag = tag;
-        return (jsx(Tag, { ref: ref, className: className, id: anchor, children: children }));
+        return (jsx(Tag, { ref: tagRef, className: className, id: anchor, children: children }));
     });
 
     const THRESHOLD_ACCURACY = 100; // Decimals number (100 is for two decimals number, 0.**)
@@ -639,12 +639,22 @@
     const ButtonSection = JSX(({ context, className = '', buttons }) => {
         const { handlerDecorator } = context;
         const router = context.useRouter();
-        return buttons && buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => (jsx(ButtonSectionItem, { button: button, handlerDecorator: handlerDecorator, router: router }, String(index)))) })) : null;
-    });
-    const ButtonSectionItem = JSX(({ router, handlerDecorator, button }) => {
-        const buttonProps = useLink({ router, handlerDecorator }, button);
-        return jsx(Button, { ...button, ...buttonProps });
+        return buttons && buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => renderButton({ button: useLink({ router, handlerDecorator }, button), index })) })) : null;
     });
+    function renderButton({ button, buttonClassName, index }) {
+        const { icon, iconRight, version, ...rest } = button;
+        const iconVersion = version === 'secondary' ? 'normal' : 'white';
+        const leftIcon = renderButtonIcon({ icon, iconVersion });
+        const rightIcon = renderButtonIcon({ icon: iconRight, iconVersion });
+        return (jsx(Button, { className: buttonClassName, appendLeft: leftIcon, appendRight: rightIcon, version: version, ...rest }, index ? String(index) : ''));
+    }
+    const renderButtonIcon = ({ icon, iconVersion }) => {
+        if (!icon?.icon && !icon?.src) {
+            return null;
+        }
+        const iconWidth = icon?.size?.width ? `${icon.size.width}` : '24';
+        return jsx(ImgInner, { image: { ...icon, iconVersion: iconVersion }, width: iconWidth, height: "24", asSVG: true });
+    };
 
     const Description = JSX((props) => {
         const { className = '', description } = props;
@@ -1242,7 +1252,7 @@
         white: 'bg-white',
     };
     const CatalogCard = JSX(({ className = '', title, description, image, price, button, colors }) => {
-        return (jsxs("section", { className: `border border-solid box-border border-main-stroke p-[30px] min-w-[402px] flex flex-col justify-left ${className}`, role: "listitem", children: [image?.src ? jsx(ImgInner, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? jsx("div", { className: "text-m-light text-left mb-4", children: description }) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-m-light text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }), colors.map(renderColorOption)] })) : null, price ? jsxs("div", { className: "text-h3 text-left", children: [price, "\u00A0\u20BD"] }) : null, button ? jsx(Button, { className: "mt-5 w-full", ...button }) : null] }));
+        return (jsxs("section", { className: `border border-solid box-border border-main-stroke p-[30px] min-w-[402px] flex flex-col justify-left ${className}`, role: "listitem", children: [image?.src ? jsx(ImgInner, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? jsx("div", { className: "text-m-light text-left mb-4", children: description }) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-m-light text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }), colors.map(renderColorOption)] })) : null, price ? jsxs("div", { className: "text-h3 text-left", children: [price, "\u00A0\u20BD"] }) : null, button ? renderButton({ button, buttonClassName: 'mt-5 w-full' }) : null] }));
     });
     const renderColorOption = (color, i) => (jsx("span", { className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap$1[color]}` }, String(i)));
 
@@ -1389,62 +1399,6 @@
         return (jsxs("section", { className: `flex flex-col justify-center items-center mt-12 ${className}`, role: "listitem", children: [jsx("div", { className: "flex justify-center py-20", children: renderErrorContent(error) }), title ? jsx(Heading, { headingType: "h1", className: "text-left mb-4", title: title }) : null, subtitle ? (jsx("div", { className: "font-sans text-xl-light mb-7 max-w-[613px] text-center", children: subtitle })) : null, button?.text ? (jsx(Button, { className: "py-4 px-9", version: button?.version, ...useLink({ router, handlerDecorator }, button), children: button.text })) : null] }));
     });
 
-    const roundTo = (value, precision = 2) => {
-        const factor = 10 ** precision;
-        return Math.round(parseFloat(String(value)) * factor) / factor;
-    };
-
-    function useExchangeRates() {
-        const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchExchangeRates);
-        const result = data?.hits?.hits?.map((_) => _._source) || [];
-        return result.length ? getCurrencyListByRate(result) : result;
-    }
-    function fetchExchangeRates() {
-        return fetchJSON(EXCHANGE_RATES_URL, {
-            method: 'POST',
-            body: JSON.stringify(EXCHANGE_RATES_BODY),
-        });
-    }
-    const EXCHANGE_RATES_URL = 'https://coins.rshb.ru/api/catalog/vue_storefront_magento_1_currency_rates_average/currency_rates_average/_search?size=10000';
-    const EXCHANGE_RATES_BODY = {
-        query: {
-            bool: {
-                must: [
-                    {
-                        term: {
-                            // eslint-disable-next-line camelcase
-                            russian_region_code: '77',
-                        },
-                    },
-                    {
-                        term: {
-                            // eslint-disable-next-line camelcase
-                            from_volume: '0',
-                        },
-                    },
-                    {
-                        terms: {
-                            // eslint-disable-next-line camelcase
-                            currency_pair: ['USD/RUB', 'EUR/RUB'],
-                        },
-                    },
-                ],
-            },
-        },
-    };
-    const getCurrencyListByRate = (currencyRates) => currencyRates.reduce((result, _) => {
-        const currencyInfo = _['currency_first'];
-        const currencyCode = currencyInfo?.code;
-        if (!result.some((i) => i.code === currencyCode)) {
-            result.push({
-                code: currencyCode,
-                buy: roundTo(Number(_.rate_buy), 3),
-                sell: roundTo(Number(_.rate_sell), 3),
-            });
-        }
-        return result;
-    }, []);
-
     const BaseTile = JSX(({ className = '', title = '', children, buttons, image }) => {
         return (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { className: "h-full", children: children }), buttons ? jsx("div", { className: "mt-auto pt-8", children: buttons }) : null] }), image] })] }));
     });
@@ -1471,11 +1425,16 @@
         return (jsxs("table", { className: `h-fit w-fit ${className}`, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: TABLE_HEAD_STYLE, children: "\u0412\u0430\u043B\u044E\u0442\u0430" }), jsx("th", { className: `${TABLE_HEAD_STYLE} pl-11`, children: "\u041A\u0443\u043F\u0438\u0442\u044C" }), jsx("th", { className: `${TABLE_HEAD_STYLE} pl-11`, children: "\u041F\u0440\u043E\u0434\u0430\u0442\u044C" })] }) }), jsx("tbody", { children: exchangeCurrencyItems.map((item) => renderCurrencyRow(item)) })] }));
     });
     const renderCurrencyRow = (exchangeCurrencyItem) => {
-        const code = exchangeCurrencyItem?.code;
-        return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(ImgInner, { image: { icon: CURRENCY_ICONS_MAP[code] }, width: "24", height: "24" }) : null, jsx("span", { className: "ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.sell) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.buy) })] }, code));
+        const currency = exchangeCurrencyItem?.currency?.currency;
+        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, distance }) => (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, distance ? (jsxs("p", { className: "text-secondary-text m-0 text-m-light", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
+    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 \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430" })] })] })));
+
+    const roundTo = (value, precision = 2) => {
+        const factor = 10 ** precision;
+        return Math.round(parseFloat(String(value)) * factor) / factor;
+    };
 
     const calculateResult = (value, rate, precision) => {
         const result = Number(formatValue(value)) * Math.pow(rate, precision ? -1 : 1);
@@ -1544,7 +1503,10 @@
 
     function renderInput(props) {
         const { placeholder, rates, selected, value, setValue, setSelected } = props;
-        const ratesOptions = rates.map((_) => ({ key: _.code ?? '', text: _.code ?? '' }));
+        const ratesOptions = rates.map((_) => ({
+            key: _?.currency?.currency ?? '',
+            text: _?.currency?.currency ?? '',
+        }));
         const selectedValue = { key: selected, text: selected };
         return (jsxs("div", { className: "relative flex", children: [jsx(Input, { className: "shrink-0 text-l w-full appearance-none mr-[-90px]", placeholder: placeholder, type: "text", value: value, onChange: setValue }), ratesOptions.length ? (jsx(Select, { isBorder: false, onChange: (_) => setSelected(_.key), options: ratesOptions, value: selectedValue })) : null] }));
     }
@@ -1555,8 +1517,8 @@
         const [calcState, setCalcState] = useState({
             inputSell: '',
             inputBuy: '',
-            selectSell: currencyRatesBuy?.[0]?.code || Currency.RUB,
-            selectBuy: currencyRatesSell?.[0]?.code || Currency.USD,
+            selectSell: currencyRatesBuy?.[0]?.currency?.currency || Currency.RUB,
+            selectBuy: currencyRatesSell?.[0]?.currency?.currency || Currency.USD,
         });
         const handleSetCalcState = (newState) => {
             setCalcState((oldState) => ({ ...oldState, ...newState }));
@@ -1582,8 +1544,8 @@
         callbackCurrencySelect({
             value,
             oppositeValue: calcState.selectBuy,
-            handleConvert: (codeFrom = calcState.selectSell, codeTo = calcState.selectBuy) => {
-                handleInputSell(setCalcState, currencyRatesSell)(calcState.inputSell, codeFrom, codeTo);
+            handleConvert: (currencyFrom = calcState.selectSell, currencyTo = calcState.selectBuy) => {
+                handleInputSell(setCalcState, currencyRatesSell)(calcState.inputSell, currencyFrom, currencyTo);
             },
         });
     };
@@ -1592,42 +1554,75 @@
         callbackCurrencySelect({
             value,
             oppositeValue: calcState.selectSell,
-            handleConvert: (codeTo = calcState.selectBuy, codeFrom = calcState.selectSell) => handleInputBuy(setCalcState, currencyRatesBuy)(calcState.inputBuy, codeTo, codeFrom),
+            handleConvert: (currencyTo = calcState.selectBuy, currencyFrom = calcState.selectSell) => handleInputBuy(setCalcState, currencyRatesBuy)(calcState.inputBuy, currencyTo, currencyFrom),
         });
     };
-    const handleInputSell = (setCalcState, currencyRatesSell) => (value, codeFrom, codeTo) => {
-        setCalcState({ inputSell: formatValue(value), selectBuy: codeTo });
-        const rate = currencyRatesSell.find((_) => _.code === codeTo)?.buy ||
-            currencyRatesSell.find((_) => _.code === codeFrom)?.sell;
+    const handleInputSell = (setCalcState, currencyRatesSell) => (value, currencyFrom, currencyTo) => {
+        setCalcState({ inputSell: formatValue(value), selectBuy: currencyTo });
+        const rate = currencyRatesSell.find((_) => _.currency?.currency === currencyTo)?.buyExchangeRate ||
+            currencyRatesSell.find((_) => _.currency?.currency === currencyFrom)?.saleExchangeRate;
         if (rate) {
             setCalcState({
-                inputBuy: String(calculateResult(value, rate, codeFrom === Currency.RUB) || ''),
+                inputBuy: String(calculateResult(value, rate, currencyFrom === Currency.RUB) || ''),
             });
         }
     };
-    const handleInputBuy = (setCalcState, currencyRatesBuy) => (value, codeTo, codeFrom) => {
-        setCalcState({ inputBuy: formatValue(value), selectSell: codeFrom });
-        const rate = currencyRatesBuy.find((_) => _.code === codeFrom)?.sell ||
-            currencyRatesBuy.find((_) => _.code === codeTo)?.buy;
+    const handleInputBuy = (setCalcState, currencyRatesBuy) => (value, currencyTo, currencyFrom) => {
+        setCalcState({ inputBuy: formatValue(value), selectSell: currencyFrom });
+        const rate = currencyRatesBuy.find((_) => _.currency?.currency === currencyFrom)?.saleExchangeRate ||
+            currencyRatesBuy.find((_) => _.currency?.currency === currencyTo)?.buyExchangeRate;
         if (rate) {
             setCalcState({
-                inputSell: String(calculateResult(value, rate, codeTo === Currency.RUB) || ''),
+                inputSell: String(calculateResult(value, rate, currencyTo === Currency.RUB) || ''),
             });
         }
     };
 
-    const DEFAULT_LOCATION = {
-        address: 'Москва, ул.Ленина д.28',
-        distance: '6км',
+    const EXCHANGE_RATES_URL = '/api/v1/exchangerates';
+    const REGION_URL = '/api/v1/region';
+    function useFetchExchangeRateData() {
+        const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchData);
+        return data || {};
+    }
+    const fetchData = async (urlExchangeRates) => {
+        const region = await fetchRegion();
+        const regionCode = region?.code || '000';
+        const exchangeRates = await fetchExchangeRates(urlExchangeRates, regionCode);
+        return { region, exchangeRates };
     };
+    const fetchRegion = async () => {
+        try {
+            return await fetchJSONUnsafe(REGION_URL, { method: 'GET' });
+        }
+        catch (error) {
+            console.log(error);
+            return {};
+        }
+    };
+    const fetchExchangeRates = async (url, regionCode) => {
+        try {
+            return await fetchJSONUnsafe(url + `?regionCode=${regionCode}`, {
+                method: 'GET',
+            });
+        }
+        catch (error) {
+            console.log(error);
+            return {};
+        }
+    };
+
     const ExchangeRateTile = JSX(({ className = '', context, title = 'Курсы обмена валют', button, ...rest }) => {
-        const currencyRates = useExchangeRates();
-        const currencyRatesBuy = currencyRates.filter((_) => _.buy);
-        currencyRatesBuy.unshift({ code: Currency.RUB });
-        const currencyRatesSell = currencyRates.filter((_) => _.sell);
-        currencyRatesSell.push({ code: Currency.RUB });
-        return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border min-h-[320px] ${className}`, ...rest, children: jsx(BaseTile, { context: context, 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, { ...DEFAULT_LOCATION })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", context: context, currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
+        const { exchangeRates } = useFetchExchangeRateData();
+        const currencyRates = getCurrencyRates(exchangeRates?.exchangeRate?.currencies);
+        const currencyRatesBuy = currencyRates.filter((_) => _.buyExchangeRate);
+        currencyRatesBuy.unshift({ currency: { currency: Currency.RUB } });
+        const currencyRatesSell = currencyRates.filter((_) => _.saleExchangeRate);
+        currencyRatesSell.push({ currency: { currency: Currency.RUB } });
+        return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border min-h-[320px] ${className}`, ...rest, children: jsx(BaseTile, { context: context, 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", context: context, currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
     });
+    const getCurrencyRates = (currencies) => {
+        return currencies?.filter((_) => _?.currency?.id === 1 || _?.currency?.id === 2) || [];
+    };
 
     const ICON_VERSION_MAP = {
         'bg-white': 'normal',
@@ -1850,7 +1845,7 @@
     });
 
     const GalleryCardInner = JSX(({ title, headlineSmallVersion = 'H6', description, additionalDescription, icon, items, button, version, isDotted = true, align = 'center', }) => {
-        return (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), renderCardTitle(headlineSmallVersion, title), renderDescription$2(description, title), items?.length ? renderItems$1(items, isDotted, version) : null, renderAdditionalDescription$1(additionalDescription)] }), button?.text ? jsx(Button, { className: "mt-6", ...button }) : null] }));
+        return (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), renderCardTitle(headlineSmallVersion, title), renderDescription$2(description, title), items?.length ? renderItems$1(items, isDotted, version) : null, renderAdditionalDescription$1(additionalDescription)] }), button?.text ? renderButton({ button, buttonClassName: 'mt-6' }) : null] }));
     });
     const renderImage$1 = (image) => (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: image, asSVG: true })) : null] }));
     const renderCardTitle = (headlineSmallVersion, title) => title ? jsx("div", { className: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
@@ -1879,7 +1874,7 @@
                     isShown: [showPrevButton, showNextButton],
                     btnClass: ['left-8', 'right-8'],
                     className: 'top-1/2',
-                }), isGalleryScrollAvailable ? (jsxs("div", { children: [jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[82px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" })] })) : null, button ? jsx(Button, { className: "mt-8 mx-auto", ...button }) : null] }));
+                }), isGalleryScrollAvailable ? (jsxs("div", { children: [jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[82px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" })] })) : null, button ? renderButton({ button, buttonClassName: 'mt-8 mx-auto' }) : null] }));
     });
 
     const Gallery = JSX((props) => jsx(GalleryInner, { ...props, version: "normal" }));
@@ -2005,32 +2000,37 @@
     });
     const renderDotsSubMenuItems = ({ menuItems, router, handlerDecorator, activeSubItem, }) => {
         const isActive = (item) => item === activeSubItem;
-        return menuItems?.map((_) => (jsx("a", { ...useLink({ router, handlerDecorator }, _), className: `text-l-light pb-4 hover:text-primary-main ${isActive(_) ? 'text-primary-main' : ''}`, children: _.text }, _.href)));
+        return menuItems?.map(({ text, ...rest }) => (jsx("a", { ...useLink({ router, handlerDecorator }, rest), className: `text-l-light pb-4 hover:text-primary-main ${isActive(rest) ? 'text-primary-main' : ''}`, children: text }, rest.href)));
     };
     const renderDot = (bgColor, i) => (jsx("div", { className: `w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}` }, String(i)));
 
     const HeaderSubMenu = JSX(({ context, subItems = [], bgColor }) => {
-        const [menuVisible, setMenuVisible] = useState(false);
-        const router = context.useRouter();
         const { handlerDecorator } = context;
+        const router = context.useRouter();
+        const subItemsListRef = useRef(null);
+        const [menuVisible, setMenuVisible] = useState(false);
         const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
         const dropDownMenuItems = subItems.slice(visibleItemsCount);
-        const activeSubItem = findActiveSubItem(router)(subItems);
-        const toggleMenu = () => setMenuVisible(!menuVisible);
-        const observerCallback = (itemIndex) => (entries) => {
+        const observerOptions = useMemo(() => ({ threshold: 1, root: subItemsListRef.current }), [subItemsListRef.current]);
+        const observerCallbacks = useMemo(() => subItems.map((_, index) => (entries) => {
             if (!entries.length) {
                 return;
             }
-            const entry = entries[0];
-            if (entry.intersectionRatio < 1) {
-                setVisibleItemsCount((prev) => Math.min(prev, itemIndex));
+            // Assumption about sorting entries by time
+            const entry = entries[entries.length - 1];
+            if (entry.isIntersecting) {
+                setVisibleItemsCount(handleIntersectionActivation(index));
             }
             else {
-                setVisibleItemsCount((prev) => Math.max(prev, itemIndex + 1));
+                setVisibleItemsCount(handleIntersectionDeactivation(index));
             }
-        };
-        return (jsxs("nav", { className: "relative mt-6", children: [jsx("div", { className: "overflow-hidden whitespace-nowrap mr-52 pb-3", children: subItems.map((_, i) => (jsx(IntersectionObserverTag, { tag: "span", observerCallback: observerCallback(i), observerOptions: { threshold: 1 }, children: jsx(HeaderItem, { className: `mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`, active: _ === activeSubItem, ...useLink({ router, handlerDecorator }, _), bgColor: bgColor }) }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { context: context, activeSubItem: activeSubItem, menuVisible: menuVisible, toggleMenu: toggleMenu, menuItems: dropDownMenuItems, bgColor: bgColor })) : null] }));
+        }), [subItems]);
+        const activeSubItem = findActiveSubItem(router)(subItems);
+        const toggleMenu = () => setMenuVisible(!menuVisible);
+        return (jsxs("nav", { className: "relative mt-6", children: [jsx("div", { ref: subItemsListRef, className: "overflow-hidden whitespace-nowrap mr-52 pb-3", children: subItems.map((_, i) => (jsx(IntersectionObserverTag, { tag: "span", observerCallback: observerCallbacks[i], observerOptions: observerOptions, children: jsx(HeaderItem, { className: `mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`, active: _ === activeSubItem, ...useLink({ router, handlerDecorator }, _), bgColor: bgColor }) }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { context: context, activeSubItem: activeSubItem, menuVisible: menuVisible, toggleMenu: toggleMenu, menuItems: dropDownMenuItems, bgColor: bgColor })) : null] }));
     });
+    const handleIntersectionActivation = (index) => (prev) => Math.max(prev, index + 1);
+    const handleIntersectionDeactivation = (index) => (prev) => Math.min(prev, index);
 
     const BORDER_COLORS = {
         'bg-white': 'bg-main-divider',
@@ -2341,7 +2341,7 @@
         const lunchHourText = hasTime ? `Перерыв ${lunchHour}` : lunchHour;
         return status ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "p-3 border rounded-md text-m flex items-center cursor-pointer text-primary-main border-green-light mr-4", children: workTime ? workTime : null }), jsx("div", { className: "p-3 border rounded-md text-m flex items-center cursor-pointer text-golden border-golden", children: lunchHour ? lunchHourText : null })] })) : (jsx("div", { className: "flex", children: jsx("div", { className: "p-3 border rounded-md text-m flex items-center cursor-pointer text-error border-error", children: "\u0412\u044B\u0445\u043E\u0434\u043D\u043E\u0439" }) }));
     };
-    const renderNearbyOffice = ({ icon, title, distance, time }, inx) => (jsxs("div", { className: "flex mr-4", children: [jsx(Icon, { name: icon, width: "16", height: "16", asSVG: true, className: "mr-1" }), title ? jsxs("span", { className: "text-m", children: [title, "\u00A0"] }) : null, jsxs("span", { className: "text-m-light", children: [distance ? ` (${distance})` : null, time ? `, ${time}` : null] })] }, `nearbyOffice${inx}`));
+    const renderNearbyOffice = ({ icon, title, distance, time }, index) => (jsxs("div", { className: "flex mr-4", children: [jsx(Icon, { name: icon, width: "16", height: "16", asSVG: true, className: "mr-1" }), title ? jsxs("span", { className: "text-m", children: [title, "\u00A0"] }) : null, jsxs("span", { className: "text-m-light", children: [distance ? ` (${distance})` : null, time ? `, ${time}` : null] })] }, `nearbyOffice${index}`));
     const renderDay = ({ title, status, workTime, lunchHour, description }, inx) => (jsxs("div", { className: "flex flex-col pb-3 border-b border-solid border-main-divider mb-3 last:border-0", children: [jsxs("div", { className: "flex justify-between items-center w-full pb-1 text-l text-primary-text", children: [jsx("div", { children: title }), status ? null : jsx("div", { className: "text-m-light text-error", children: "\u0412\u044B\u0445\u043E\u0434\u043D\u043E\u0439" }), status && workTime ? jsx("div", { children: workTime }) : null] }), status && lunchHour ? renderLunchHour(lunchHour) : null, description ? (jsx("div", { className: "pb-1 text-s-light text-secondary-text", children: description })) : null] }, `day${inx}`));
     const renderLunchHour = (lunchHour) => {
         const hasTime = /\d+/gi.test(lunchHour);
@@ -2380,6 +2380,72 @@
         });
     }
 
+    const styles$3 = {
+        focus: 'focus:border-primary-focus focus:border',
+        hover: 'hover:bg-primary-hover',
+        active: 'active:bg-primary-active',
+        border: 'border border-transparent rounded-md',
+        position: 'flex items-center justify-center',
+        font: 'text-center font-sans',
+    };
+    const renderOpenMap = (pointsCenter) => {
+        const getYandexMapUrl = () => {
+            return `https://yandex.ru/maps/?ll=${[pointsCenter[1], pointsCenter[0]]}&z=10&l=map`;
+        };
+        return (jsx("a", { className: `select-none cursor-pointer px-9 h-12 bg-white bg-primary-main text-white ${Object.values(styles$3).join(' ')}`, href: getYandexMapUrl(), target: "_blank", children: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043D\u0430 \u043A\u0430\u0440\u0442\u0435" }));
+    };
+
+    const styles$2 = {
+        border: 'border border-transparent rounded-md',
+        position: 'relative flex items-center',
+        font: 'text-center font-sans',
+        shadow: 'shadow-[0_4px_25px_rgba(0,0,0,0.07)]',
+    };
+    const renderSearchField = (points, yandexMaps, updatePointsToRender) => {
+        const onChange = (e) => {
+            const value = e.target?.value ? e.target?.value.toLowerCase() : '';
+            if (value) {
+                const searchResult = points.filter((_) => {
+                    const textLowerCase = _.text.toLowerCase();
+                    if (textLowerCase.indexOf(value) > -1) {
+                        return _;
+                    }
+                    return null;
+                });
+                updatePointsToRender(searchResult);
+            }
+            else {
+                updatePointsToRender(null);
+            }
+        };
+        return (jsxs("div", { className: `${Object.values(styles$2).join(' ')} bg-white py-3 pl-11 pr-4 w-full`, children: [jsx(Icon, { name: "LoupeIcon", iconVersion: "black", width: "20", height: "20", asSVG: true, className: "absolute left-4" }), jsx("input", { type: "text", placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441 \u0438\u043B\u0438 \u043C\u0435\u0442\u0440\u043E", onChange: onChange, className: "border-0 focus:border-0 outline-0 w-full" })] }));
+    };
+
+    const styles$1 = {
+        focus: 'focus:border-primary-focus focus:border',
+        hover: 'hover:bg-primary-hover',
+        active: 'active:bg-primary-active',
+        border: 'border border-transparent rounded-md',
+        position: 'absolute flex items-center justify-center',
+        font: 'text-center font-sans',
+    };
+    const renderUserGeolocation = (map, yandexMaps, className) => {
+        const setUserGeoLocation = () => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            yandexMaps.geolocation
+                .get({
+                provider: 'yandex',
+                autoReverseGeocode: true,
+                mapStateAutoApply: true,
+            })
+                .then(function (result) {
+                map.geoObjects.add(result.geoObjects);
+            });
+        };
+        return (jsx("div", { className: `select-none cursor-pointer py-4 w-12 bg-white ${Object.values(styles$1).join(' ')} ${className}`, onClick: setUserGeoLocation, children: jsx(Icon, { name: "UserGeoLocationIcon", width: "20", height: "16" }) }));
+    };
+
     const getNS = (_) => globalThis[_];
     function useExternalNS(namespaceName, url) {
         const [externalNS, setExternalNS] = useState();
@@ -2417,37 +2483,137 @@
     const YMAPS_NAMESPACE = 'ymaps';
     const useYandexMaps = () => {
         const url = `https://api-maps.yandex.ru/2.1/?apikey=${projectSettings.YANDEX_MAP_API_KEY}&lang=ru_RU`;
-        const yandexMaps = useExternalNS(YMAPS_NAMESPACE, url);
-        return yandexMaps;
-    };
+        return useExternalNS(YMAPS_NAMESPACE, url);
+    };
+
+    const styles = {
+        focus: 'focus:border-primary-focus focus:border',
+        hover: 'hover:bg-primary-hover',
+        active: 'active:bg-primary-active',
+        border: 'border-b border-b-2 border-gray last:border-0',
+        position: 'relative flex items-center justify-center',
+        font: 'text-center font-sans text-l',
+    };
+    // TODO: Добавить метод определения центральной точки
+    const ZoomButton = JSX(({ yandexMaps, direction = 'in' }) => {
+        const iconName = direction === 'in' ? 'PlusIcon' : 'MinusIcon';
+        const changeZoom = () => {
+            const currentZoom = yandexMaps.current.getZoom();
+            const newZoom = direction === 'in' ? currentZoom + 1 : currentZoom - 1;
+            yandexMaps.current.setZoom(newZoom, { checkZoomRange: true });
+        };
+        return (jsx("div", { onClick: changeZoom, className: `${Object.values(styles).join(' ')} bg-white select-none cursor-pointer w-12 h-12`, children: jsx(Icon, { name: iconName, width: "20", height: "16" }) }));
+    });
+
+    const mockPoints = [
+        { coords: [55.77, 37.46], text: 'Трактир' },
+        { coords: [55.66, 37.48], text: 'Трактор' },
+        { coords: [55.65, 37.42], text: 'Ресторан' },
+        { coords: [55.64, 37.54], text: 'Музей' },
+        { coords: [55.54, 37.52], text: 'Библиотека' },
+        { coords: [55.53, 37.56], text: 'Школа' },
+        { coords: [55.61, 37.61], text: 'Аптека' },
+        { coords: [55.8, 37.58], text: 'Бар' },
+        { coords: [55.71, 37.35], text: 'Институт' },
+        { coords: [55.74, 37.57], text: 'Университет' },
+        { coords: [55.58, 37.69], text: 'Больница' },
+        { coords: [55.57, 37.7], text: 'Цирк' },
+        { coords: [55.55, 37.64], text: 'Магазин' },
+        { coords: [55.5, 37.75], text: 'Булочная' },
+        { coords: [55.81, 37.73], text: 'Полиция' },
+        { coords: [55.73, 37.68], text: 'Салон красоты' },
+        { coords: [55.86, 37.76], text: 'Баня' },
+        { coords: [55.38, 37.69], text: 'Гараж' },
+        { coords: [55.91, 37.5], text: 'Дом' },
+        { coords: [55.62, 37.32], text: 'Прачечная' },
+        { coords: [55.85, 37.41], text: 'Стадион' },
+        { coords: [55.67, 37.24], text: 'Вокзал' },
+        { coords: [55.79, 37.41], text: 'Кафе' },
+    ];
 
-    const YandexMap$1 = JSX(({ point }) => {
+    const FULLSCREEN_STYLES = {
+        border: 'border border-transparent rounded-md ',
+        position: 'absolute flex items-center justify-center',
+        size: 'w-12 h-12',
+        focus: 'focus:border-primary-focus focus:border',
+        font: 'text-center font-sans',
+        active: 'active:bg-primary-active',
+        hover: 'hover:bg-primary-hover',
+        other: 'select-none cursor-pointer',
+    };
+    // TODO: Поле для поиска: невыяснено среди каких данных делать поиск (искать в имени офиса, в адресе, метро и т.д.).
+    //       Сейчас реализован поиск среди тестовых данных
+    // TODO: Также выяснить что делать когда ничего не найдено
+    // TODO: На макетах также когда есть поле поиска нет кнопки открыть на карте.
+    const YandexMap = JSX(({ points, className = '', zoom = 5, showSearchField = false }) => {
         const map = useRef(null);
         const yandexMaps = useYandexMaps();
+        const [isFullScreen, setIsFullScreen] = useState();
+        const [pointsToRender, setPointsToRender] = useState(normalizePoints(mockPoints));
+        const pointsCenter = getCenterPoint(points);
         useEffect(() => {
-            yandexMaps?.ready(() => {
-                map.current = new yandexMaps.Map('map', {
-                    center: point,
-                    zoom: 10,
+            if (!map?.current) {
+                yandexMaps?.ready(() => {
+                    map.current = new yandexMaps.Map('map', {
+                        center: pointsCenter,
+                        zoom,
+                        controls: [],
+                        suppressMapOpenBlock: true,
+                    });
+                    renderClusterer(yandexMaps, map.current, pointsToRender);
                 });
-                renderClusterer(yandexMaps, map.current, [point]);
-            });
-        }, [map, point, yandexMaps]);
+            }
+        }, [yandexMaps, map, pointsToRender]);
         useEffect(() => {
-            if (map.current && point && yandexMaps) {
-                renderClusterer(yandexMaps, map.current, [point]);
+            if (map.current && pointsToRender && yandexMaps) {
+                const newPoints = pointsToRender.length < 1 ? normalizePoints(mockPoints) : pointsToRender;
+                renderClusterer(yandexMaps, map.current, newPoints);
             }
-        }, [map, point, yandexMaps]);
+        }, [map, pointsToRender, yandexMaps]);
         if (!yandexMaps) {
             return null;
         }
-        return (jsx("div", { className: "bg-white", children: jsx("div", { id: "map", className: "h-[560px]" }) }));
+        const toggleFullscreen = () => {
+            const container = map.current.container;
+            if (!isFullScreen) {
+                container.enterFullscreen();
+            }
+            else {
+                container.exitFullscreen();
+            }
+            setIsFullScreen(container.isFullscreen());
+        };
+        const zIndex = isFullScreen ? 'z-[100000]' : 'z-10';
+        const updatePointsToRender = (newPoints) => {
+            if (newPoints) {
+                const normalizedPoints = normalizePoints(newPoints);
+                setPointsToRender(normalizedPoints);
+            }
+        };
+        return (jsxs("div", { id: "map", className: `${isFullScreen ? '' : 'relative'} w-full ${className}`, children: [jsx("div", { className: `absolute flex left-2 top-4 w-[50%] ${zIndex}`, children: showSearchField
+                        ? renderSearchField(mockPoints, yandexMaps, updatePointsToRender)
+                        : renderOpenMap(pointsCenter) }), jsx("div", { className: `${Object.values(FULLSCREEN_STYLES).join(' ')} ${zIndex} right-2 top-4 bg-white`, onClick: toggleFullscreen, children: jsx(Icon, { name: "FullScreenIcon", width: "16", height: "16" }) }), jsxs("div", { className: `absolute right-2 top-52 z-10 w-12 overflow-hidden border border-transparent rounded-md ${zIndex}`, children: [jsx(ZoomButton, { yandexMaps: map }), jsx(ZoomButton, { yandexMaps: map, direction: "out" })] }), renderUserGeolocation(map.current, yandexMaps, `right-2 top-80 ${zIndex}`)] }));
     });
+    const getCenterPoint = (points) => [
+        getArraySumAndAverage(mapByIndex(points, 0)),
+        getArraySumAndAverage(mapByIndex(points, 1)),
+    ];
+    const mapByIndex = (arr, index) => arr.map((a) => a[index]);
+    const getArraySumAndAverage = (arr) => arr.reduce((a, b) => a + b) / arr.length;
+    const normalizePoints = (points) => (points ? points.map((_) => _.coords) : null);
+
+    // Добавлено для проверки
+    const nearbyOffices = [
+        { title: 'Деловой центр', time: '1 мин', distance: '~30 м.', icon: 'MetroIcon' },
+        { title: 'Выставочная', time: '5 мин', distance: '~120 м.', icon: 'MetroIcon' },
+        { title: 'Деловой центр', time: '8 мин', distance: '~350 м.', icon: 'MetroIcon' },
+    ];
 
     const OfficeMap = JSX(({ className = '' }) => {
         const resultOfficeMap = useOfficeMap('063') || OFFICE_MAP;
         const { name, address, gpsLatitude, gpsLongitude, workSchedule } = resultOfficeMap;
-        const { workTime, lunchHour, workTimeSaturday, lunchHourSaturday, workingMonday, workingTuesday, workingWednesday, workingThursday, workingFriday, workingSaturday, workingSunday, } = workSchedule;
+        const { workingMonday, workingTuesday, workingWednesday, workingThursday, workingFriday, workingSaturday, workingSunday, } = workSchedule;
+        const { workTime, lunchHour, workTimeSaturday, lunchHourSaturday } = workSchedule;
         const point = gpsLatitude && gpsLongitude ? [gpsLatitude, gpsLongitude] : null;
         const workScheduleWeek = [
             { title: 'Понедельник', status: workingMonday, workTime, lunchHour },
@@ -2469,15 +2635,9 @@
             },
             { title: 'Воскресенье', status: workingSunday },
         ];
-        // Добавлено для проверки
-        const nearbyOffices = [
-            { title: 'Деловой центр', time: '1 мин', distance: '~30 м.', icon: 'MetroIcon' },
-            { title: 'Выставочная', time: '5 мин', distance: '~120 м.', icon: 'MetroIcon' },
-            { title: 'Деловой центр', time: '8 мин', distance: '~350 м.', icon: 'MetroIcon' },
-        ];
         const currentWeekDayInd = new Date().getDay();
         const currentWeekDay = currentWeekDayInd > 0 ? workScheduleWeek[currentWeekDayInd - 1] : workScheduleWeek[6];
-        return (jsxs("div", { className: `flex flex-col font-sans bg-white w-full ${className}`, children: [jsxs("div", { className: "flex flex-col px-12 pt-12", children: [jsxs("div", { className: "flex justify-between", children: [jsx("div", { className: "text-h2", children: name }), renderCurrentDaySchedule(currentWeekDay)] }), jsxs("div", { className: "flex text-l-light pt-4", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24", asSVG: true, className: "pr-1" }), address] }), jsx("div", { className: "flex pt-4", children: nearbyOffices.map(renderNearbyOffice) })] }), jsxs("div", { className: "flex justify-between pt-8", children: [jsx("div", { className: "flex-grow h-full bg-gray", children: point ? jsx(YandexMap$1, { point: point }) : null }), jsx("div", { className: "w-[434px] pl-9 pr-12 pb-14", children: jsx("div", { className: "flex flex-col", children: workScheduleWeek.map(renderDay) }) })] })] }));
+        return (jsxs("div", { className: `flex flex-col font-sans bg-white w-full ${className}`, children: [jsxs("div", { className: "flex flex-col px-12 pt-12", children: [jsxs("div", { className: "flex justify-between", children: [jsx("div", { className: "text-h2", children: name }), renderCurrentDaySchedule(currentWeekDay)] }), jsxs("div", { className: "flex text-l-light pt-4", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24", asSVG: true, className: "pr-1" }), address] }), jsx("div", { className: "flex pt-4", children: nearbyOffices.map(renderNearbyOffice) })] }), jsxs("div", { className: "flex justify-between pt-8", children: [jsx("div", { className: "flex-grow h-full w-full overflow-hidden", children: point ? jsx(YandexMap, { points: [point], className: "h-full" }) : null }), jsx("div", { className: "w-[434px] min-w-[434px] pl-9 pr-12 pb-14 flex flex-col", children: workScheduleWeek.map(renderDay) })] })] }));
     });
 
     const OfficeServicesBlock = JSX(({ className = '', context, title, servicesList, anchor = '', ...rest }) => {
@@ -2552,7 +2712,7 @@
     const getIconVersion = (isIconWhite, icon) => icon?.iconVersion || isIconWhite ? 'white' : 'normal';
 
     const PictureText = JSX(({ className = '', context, title, description, image, benefits, version = 'primary', sum, monthLimit, directionRight = false, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `relative font-sans py-12 px-24 ${VersionStyleMap[version]} ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, align: "center" }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src ? jsx(ImgInner, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] })] }));
+        return (jsxs(BlockWrapper, { className: `relative font-sans py-12 px-24 ${VersionStyleMap[version]} ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, align: "center" }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src ? jsx(ImgInner, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(Number(sum), Number(monthLimit))] })] })] }));
     });
     const renderBenefit$2 = (version) => (benefit, i) => (jsx(BenefitItem, { icon: benefit.icon, label: benefit.label, description: benefit.description, version: version }, String(i)));
     function renderInsuranceSumMonth(sum, monthLimit) {
@@ -2884,29 +3044,6 @@
         return data || [];
     }
 
-    const YandexMap = JSX(({ points }) => {
-        const map = useRef(null);
-        const yandexMaps = useYandexMaps();
-        useEffect(() => {
-            yandexMaps?.ready(() => {
-                map.current = new yandexMaps.Map('map', {
-                    center: points[0],
-                    zoom: 10,
-                });
-                renderClusterer(yandexMaps, map.current, points);
-            });
-        }, [yandexMaps]);
-        useEffect(() => {
-            if (map.current && points && yandexMaps) {
-                renderClusterer(yandexMaps, map.current, points);
-            }
-        }, [map, points, yandexMaps]);
-        if (!yandexMaps) {
-            return null;
-        }
-        return (jsxs("div", { className: "pt-12 mt-1 bg-white", children: [jsx(Heading, { title: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", headingType: "h3", className: "mb-8 text-center" }), jsx("div", { id: "map", className: "h-[640px]" })] }));
-    });
-
     const DEFAULT_DAYS = 26;
     const SafeDepositRental = JSX(({ title, footnote, context, className = '', ...rest }) => {
         const [showMap, setShowMap] = useState(false);
@@ -2925,7 +3062,7 @@
             setShowMap(!showMap);
         };
         const points = getCoordinates(getBranch(branches, safeDepositState.selectedBranch) || branches);
-        return (jsxs(BlockWrapper, { context: context, className: className, ...rest, children: [jsxs("div", { className: "font-sans bg-white px-8 py-12", children: [title ? (jsx(Heading, { title: title, headingType: "h3", as: "h2", className: "mb-2.5 text-center" })) : null, jsx(SafeDepositRentalForm, { regions: regions, branches: branches, data: { ...safeDepositState, selectedRegion }, onShowMapToggle: onShowMapToggle, onChange: handleChangeSafeDepositState }), footnote ? jsx("p", { className: "text-s-light text-secondary-text", children: footnote }) : null] }), points.length && showMap ? jsx(YandexMap, { points: points }) : null] }));
+        return (jsxs(BlockWrapper, { context: context, className: className, ...rest, children: [jsxs("div", { className: "font-sans bg-white px-8 py-12", children: [title ? (jsx(Heading, { title: title, headingType: "h3", as: "h2", className: "mb-2.5 text-center" })) : null, jsx(SafeDepositRentalForm, { regions: regions, branches: branches, data: { ...safeDepositState, selectedRegion }, onShowMapToggle: onShowMapToggle, onChange: handleChangeSafeDepositState }), footnote ? jsx("p", { className: "text-s-light text-secondary-text", children: footnote }) : null] }), points.length && showMap ? jsx(YandexMap, { points: points, className: "h-[640px]" }) : null] }));
     });
     const normalizeSelectedRegion = (selectedRegion, regions) => !selectedRegion && regions?.length && regions[0]?.code ? regions[0].code : selectedRegion;
 
@@ -3102,7 +3239,10 @@
         return (jsxs(Button, { version: "primary", onClick: handleClick, className: "w-full flex items-center justify-center rounded-none py-5", children: [jsx("div", { className: "text-h4", children: isOpen ? 'Скрыть' : 'Показать ставки по вкладу' }), jsx(Icon, { name: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon', className: "ml-3", iconVersion: "white", width: "20", height: "20", asSVG: true })] }));
     });
 
-    const renderButtonsCellData = ({ buttons }) => buttons && buttons?.length ? (jsx("div", { children: buttons.map(({ rounded, ...buttonProps }, idx) => (jsx(Button, { className: `${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`, rounded: rounded, ...buttonProps }, String(idx)))) })) : null;
+    const renderButtonsCellData = ({ buttons }) => buttons && buttons?.length ? (jsx("div", { children: buttons.map(({ rounded, ...buttonProps }, idx) => renderButton({
+            button: { rounded, ...buttonProps },
+            buttonClassName: `${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`,
+        })) })) : null;
     const renderLabelDescriptionCellData = ({ label, description }) => {
         const labelClassName = `text-h6 m-0 ${description ? 'mb-1' : ''}`;
         return (jsxs("div", { children: [label ? jsx("div", { className: labelClassName, children: label }) : null, description ? jsx("div", { className: "text-secondary-text text-l-light", children: description }) : null] }));
@@ -3425,7 +3565,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", context: context }, "LikeControl") }));
     }
 
-    const packageVersion = "0.6.16";
+    const packageVersion = "0.6.17";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;