@redneckz/wildless-cms-uni-blocks 0.12.11 → 0.12.13

package/mobile/bundle/bundle.umd.js

@@ -345,7 +345,7 @@
             setHidden(Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)));
         }), [block]);
         const isGroup = version && isTheme;
-        return (jsx(Tag, { className: style('font-sans', isGroup ? 'group' : '', blockStyles[version], isHidden ? 'hidden' : '', padding || defaultPadding, className), ...(isGroup ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
+        return (jsx(Tag, { className: style('@container font-sans', isGroup ? 'group' : '', blockStyles[version], isHidden ? 'hidden' : '', padding || defaultPadding, className), ...(isGroup ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
     });
 
     const mobileHeadingTagMap = {
@@ -358,7 +358,7 @@
     };
     const headingTag = (tag) => mobileHeadingTagMap[tag] || 'h3';
 
-    const styles = {
+    const styles$4 = {
         h0: 'text-h0',
         h1: 'text-h1',
         h2: 'text-h2',
@@ -369,7 +369,7 @@
     };
     const Heading = JSX(({ className = '', headingType = 'h3', as = 'h3', title, children }) => {
         const Tag = headingTag(as);
-        return (jsx(Tag, { className: style('font-sans m-0', styles[headingType], className), children: title || children }));
+        return (jsx(Tag, { className: style('font-sans m-0', styles$4[headingType], className), children: title || children }));
     });
 
     const identity = (_) => _;
@@ -505,11 +505,11 @@
         return await response.json();
     }
 
-    const REGIONS_URL = '/api/v1/regions';
-    const EMPTY_VALUE$2 = [];
+    const REGIONS_URL$1 = '/api/v1/regions';
+    const EMPTY_VALUE$3 = [];
     function useGetRegions() {
-        const { data } = useAsyncData(REGIONS_URL, fetchJSONUnsafe);
-        return data || EMPTY_VALUE$2;
+        const { data } = useAsyncData(REGIONS_URL$1, fetchJSONUnsafe);
+        return data || EMPTY_VALUE$3;
     }
 
     const useDialog = (id = '') => ({
@@ -818,7 +818,7 @@
 
     const renderAcquiringRegion = ({ regions, field }) => (jsxs("div", { className: "mb-4 pb-1 border-b border-b-main-divider sm:flex sm:justify-between sm:gap-5 sm:mb-7 sm:border-none sm:pb-0", children: [jsx("div", { className: "mb-3 sm:mb-0 sm:w-1/2", children: jsx(SelectControl, { label: "\u0412\u0438\u0434 \u044D\u043A\u0432\u0430\u0439\u0440\u0438\u043D\u0433\u0430", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u044D\u043A\u0432\u0430\u0439\u0440\u0438\u043D\u0433", options: ACQUIRING_TYPES.map(({ name: key = '' }) => ({ key, text: key })), ...withValidator(field('acquiringType'), defaultValidator) }) }), jsx("div", { className: "mb-3 sm:mb-0 sm:w-1/2", children: jsx(SelectControl, { label: "\u0410\u0434\u0440\u0435\u0441", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441", options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }) })] }));
 
-    const SlideCheckbox = JSX(({ value = false, text, type = 'checkbox', onChange }) => (jsxs("div", { role: type, "aria-checked": value, className: "flex justify-start items-center w-full cursor-pointer mb-3", onClick: () => onChange && onChange(!value), children: [jsx("div", { className: style('relative flex-shrink-0 duration-300 w-9 h-5 mr-3 rounded-2xl', value ? 'bg-primary-main' : 'bg-main-divider'), children: jsx("div", { className: style('absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded-full', value ? 'left-[50%]' : 'left-[5%]') }) }), jsx(Text, { size: "text-l", font: "font-light", color: "text-primary-text", children: text })] })));
+    const SlideCheckbox = JSX(({ value = false, text, type = 'checkbox', onChange }) => (jsxs("div", { role: type, "aria-checked": value, className: "flex justify-start items-center w-full cursor-pointer mb-s", onClick: () => onChange && onChange(!value), children: [jsx("div", { className: style('relative flex-shrink-0 duration-300 w-9 h-5 mr-s rounded-2xl', value ? 'bg-primary-main' : 'bg-main-divider'), children: jsx("div", { className: style('absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded-full', value ? 'left-1/2' : 'left-[5%]') }) }), jsx(Text, { size: "text-l", font: "font-light", color: "text-primary-text", children: text })] })));
 
     const renderSlideCheckboxes = (field) => (jsxs("div", { className: "sm:mb-5", children: [jsx(SlideCheckbox, { text: "\u0425\u043E\u0447\u0443 \u043A\u0443\u043F\u0438\u0442\u044C \u043E\u043D\u043B\u0430\u0439\u043D-\u043A\u0430\u0441\u0441\u0443", ...field('onlineCheckout') }), jsx(SlideCheckbox, { text: "\u0425\u043E\u0447\u0443 \u043A\u0443\u043F\u0438\u0442\u044C POS-\u0442\u0435\u0440\u043C\u0438\u043D\u0430\u043B", ...field('posTerminal') })] }));
 
@@ -869,7 +869,7 @@
 
     const renderBusinessCardDataOrganization = (field) => (jsxs("div", { className: "sm:flex sm:justify-between sm:gap-5", children: [jsxs("div", { className: "sm:w-1/2", children: [jsx(InputControl, { className: "shrink-0 w-full mb-3", label: "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u043D\u043E\u0435 \u043B\u0438\u0446\u043E", ...withValidator(field('name'), nameValidator) }), jsx(InputControl, { className: "shrink-0 w-full mb-3", label: "\u0418\u041D\u041D", ...withValidator(field('inn'), innValidator) })] }), jsxs("div", { className: "sm:w-1/2", children: [jsx(PhoneInputControl, { className: "shrink-0 w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) }), jsx(InputControl, { className: "shrink-0 w-full mb-3", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...withValidator(field('mail'), defaultValidator) })] })] }));
 
-    const renderRegion = ({ regions, field }) => (jsx("div", { className: "w-full mb-3 sm:mb-5", children: jsx(SelectControl, { label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }) }));
+    const renderRegion$1 = ({ regions, field }) => (jsx("div", { className: "w-full mb-3 sm:mb-5", children: jsx(SelectControl, { label: "\u0420\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }) }));
 
     const initialFormState$3 = {
         name: '',
@@ -900,18 +900,18 @@
         }, [onSubmit]);
         const [, { field, ...formProps }] = useForm(initialFormState$3, handleSubmit);
         const regions = useGetRegions();
-        return (jsxs("form", { className: "container", onSubmit: formProps.onSubmit, children: [renderRegion({ regions, field }), renderBusinessCardDataOrganization(field), renderSubmitButton(button, 'mb-4'), jsx(Footnote, { link: link })] }));
+        return (jsxs("form", { className: "container", onSubmit: formProps.onSubmit, children: [renderRegion$1({ regions, field }), renderBusinessCardDataOrganization(field), renderSubmitButton(button, 'mb-4'), jsx(Footnote, { link: link })] }));
     });
 
     const BRANCHES_URL = '/api/v1/branches';
-    const EMPTY_VALUE$1 = [];
+    const EMPTY_VALUE$2 = [];
     function useBranches(regionCode) {
-        const { data } = useAsyncData(regionCode ? `${BRANCHES_URL}?regionCode=${regionCode}` : null, fetchSafeBoxes);
-        return data || EMPTY_VALUE$1;
+        const { data } = useAsyncData(regionCode ? `${BRANCHES_URL}?regionCode=${regionCode}` : null, fetchSafeBoxes$1);
+        return data || EMPTY_VALUE$2;
     }
-    const fetchSafeBoxes = async (url) => {
+    const fetchSafeBoxes$1 = async (url) => {
         const result = await fetchJSON(url, { method: 'GET' });
-        return result || EMPTY_VALUE$1;
+        return result || EMPTY_VALUE$2;
     };
 
     const MIN_CREDIT_AMOUNT = 1000;
@@ -1054,6 +1054,26 @@
         return (jsxs("form", { className: "container", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u041E\u0441\u0442\u0430\u0432\u044C\u0442\u0435 \u0437\u0430\u044F\u0432\u043A\u0443 \u0438 \u043C\u044B \u043E\u0442\u0432\u0435\u0442\u0438\u043C \u043D\u0430 \u043B\u044E\u0431\u044B\u0435 \u0432\u043E\u043F\u0440\u043E\u0441\u044B \u043F\u043E \u0434\u0435\u043F\u043E\u0437\u0438\u0442\u0430\u043C", className: "sm:text-center mb-4" }), jsxs("div", { className: "max-w-[560px] m-auto", children: [jsx(InputControl, { className: "shrink-0 w-full mb-3", label: "\u0418\u043C\u044F", ...withValidator(field('name'), nameValidator) }), jsx(PhoneInputControl, { className: "shrink-0 w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) })] }), jsxs("div", { className: "flex justify-between flex-col-reverse sm:items-center sm:flex-row max-w-[560px] m-auto", children: [jsx("div", { className: "flex-1 mt-4 sm:mt-0", children: jsx(Footnote, { link: link }) }), renderSubmitButton(button)] })] }));
     });
 
+    const EMPTY_VALUE$1 = {};
+    function useSWRResource(filename, fallback = {}) {
+        const { data } = useAsyncData(`/wcms-resources/${filename}.json`, fetchJSONUnsafe, {
+            fallback,
+        });
+        return data || EMPTY_VALUE$1;
+    }
+
+    const ApplicationFormGrantSupport = JSX((props) => {
+        const { button, sourceBookDir } = props;
+        const { regions } = useSWRResource(sourceBookDir || 'regions-grant-support');
+        const [region, setRegion] = useState({ key: '' });
+        const buttonStyle = getRegularButtonClasses({
+            className: 'text-white',
+            version: button?.version,
+        });
+        const regionHref = regions?.find((_) => _.name === region.key)?.href;
+        return (jsxs("div", { className: "container space-y-s sm:space-y-lg", children: [regions ? (jsx(SelectControl, { label: "\u0412\u0430\u0448 \u0440\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", options: regions.map(({ name = '' }) => ({ key: name })), value: region, onChange: setRegion })) : null, regionHref ? (jsx("div", { className: "text-center", children: jsx(Button, { href: regionHref, target: "_blank", className: style('p-4 w-full sm:w-auto', buttonStyle), children: button?.text ? button.text : 'Перейти' }) })) : null] }));
+    });
+
     const sourcesComparator = (a, b) => a?.media && b?.media ? a.media - b.media : 0;
     const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', pathPrefix }) => {
         const router = useRouter();
@@ -1148,30 +1168,45 @@
         return (jsxs("form", { className: "container", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", className: "sm:text-center mb-m" }), renderWedDataOrganization(field), jsx(Heading, { headingType: "h6", title: "\u0418\u043D\u0442\u0435\u0440\u0435\u0441\u0443\u044E\u0449\u0438\u0439 \u0432\u043E\u043F\u0440\u043E\u0441", className: "sm:text-center mb-m" }), renderQuestionsInterested(field), jsxs("div", { className: "flex flex-col border-b border-main-divider mb-5 pb-5 sm:items-center sm:flex-row sm:mb-9 sm:pb-9", children: [renderSubmitButton(button, 'mb-m sm:mr-lg sm:mb-0'), jsx(Footnote, { link: link })] }), jsx(Heading, { headingType: "h6", title: "\u0418\u043B\u0438 \u0441\u0432\u044F\u0436\u0438\u0442\u0435\u0441\u044C \u0441 \u043D\u0430\u043C\u0438 \u0443\u0434\u043E\u0431\u043D\u044B\u043C \u0441\u043F\u043E\u0441\u043E\u0431\u043E\u043C", className: "sm:text-center mb-m" }), renderContacts()] }));
     });
 
+    const EmbeddableForms = {
+        ApplicationFormBusinessCard,
+        ApplicationFormWed,
+        ApplicationFormDeposit,
+        ApplicationFormCredit,
+        ApplicationFormAcquiring,
+        ApplicationFormGrantSupport,
+    };
+
     const ResponseNotification = JSX(({ responseType }) => {
         const responseOK = responseType === 'OK';
         const backgroundColor = responseOK ? 'bg-ok' : 'bg-fail';
         return (jsxs("div", { className: `flex items-center mt-lg p-lg rounded-md space-x-m ${backgroundColor}`, children: [responseOK ? (jsx(Img, { image: { icon: 'ResponceOKIcon' }, width: "42", height: "42" })) : (jsx(Img, { image: { icon: 'ResponceFailIcon' }, width: "37", height: "34" })), jsxs("div", { children: [jsx(Heading, { headingType: "h6", title: responseOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку', className: "mb-1" }), jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: responseOK ? 'Совсем скоро мы с вами свяжемся' : 'Пожалуйста, повторите позднее' })] })] }));
     });
 
-    const COMPONENTS_MAP = {
-        credit: (props) => jsx(ApplicationFormCredit, { ...props }),
-        acquiring: (props) => jsx(ApplicationFormAcquiring, { ...props }),
-        'business-card': (props) => jsx(ApplicationFormBusinessCard, { ...props }),
-        deposit: (props) => jsx(ApplicationFormDeposit, { ...props }),
-        wed: (props) => jsx(ApplicationFormWed, { ...props }),
-    };
     const API = CorporateLeadAPI();
     const ApplicationForm = JSX((props) => {
-        const { className, title, typeForm = 'credit', button, link, ...rest } = props;
+        const { className, formBlock, ...rest } = props;
+        // const type = formBlock?.formType;
+        // if (!type || !(type in EmbeddableForms)) {
+        //   return null;
+        // }
+        // const EmbeddedForm = EmbeddableForms[type];
         const [responseType, setResponseType] = useState('');
         const handleSubmit = useCallback(async (data) => {
             const status = (await API.send(data)) ? 'OK' : 'Fail';
             setResponseType(status);
             return status;
         }, []);
-        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container max-w-[978px]", children: [title ? (jsx(Heading, { headingType: "h3", title: title, className: "mb-4 sm:mb-8 sm:text-center" })) : null, COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit }), responseType ? jsx(ResponseNotification, { responseType: responseType }) : null] }) }));
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container max-w-[978px]", children: [formBlock?.title ? (jsx(Heading, { headingType: "h3", title: formBlock.title, className: "mb-4 sm:mb-8 sm:text-center" })) : null, formBlock ? renderEmbeddedForm(formBlock, handleSubmit) : null, responseType ? jsx(ResponseNotification, { responseType: responseType }) : null] }) }));
     });
+    const renderEmbeddedForm = (formBlock, handleSubmit) => {
+        const type = formBlock?.formType;
+        if (!type || !(type in EmbeddableForms)) {
+            return null;
+        }
+        const EmbeddedForm = EmbeddableForms[type];
+        return jsx(EmbeddedForm, { ...formBlock, onSubmit: handleSubmit });
+    };
 
     const iconBgStyles = {
         '': 'bg-main-divider group-data-secondary:bg-white/30',
@@ -1190,7 +1225,7 @@
     const defaultIconSize = 56;
 
     const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [title ? jsx(Heading, { headingType: "h3", as: "h2", className: "text-center", title: title }) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full sm:justify-center mt-xl gap-5xl", role: "list", children: benefitList.map(renderBenefit) })) : null] })));
-    const renderBenefit = (benefit, i) => (jsxs("div", { className: "flex gap-m items-center md:basis-1/2 md:max-w-[400px]", role: "listitem", children: [benefit?.icon?.icon ? (jsx(RoundedIcon, { className: "shrink-0", defaultIconSize: defaultIconSize, iconBgVersion: benefit?.iconBgVersion || '', ...benefit?.icon })) : null, benefit?.icon?.src ? jsx(Img, { className: "shrink-0", image: benefit.icon }) : null, benefit?.label ? (jsxs("div", { className: "sm:h-full", children: [jsx(Heading, { headingType: "h6", children: benefit.label }), renderDescription$3(benefit.description)] })) : null] }, String(i)));
+    const renderBenefit = (benefit, i) => (jsxs("div", { className: "flex gap-m items-center md:basis-1/2 md:max-w-[500px]", role: "listitem", children: [benefit?.icon?.icon ? (jsx(RoundedIcon, { className: "shrink-0", defaultIconSize: defaultIconSize, iconBgVersion: benefit?.iconBgVersion || '', ...benefit?.icon })) : null, benefit?.icon?.src ? jsx(Img, { className: "shrink-0", image: benefit.icon }) : null, benefit?.label ? (jsxs("div", { className: "sm:h-full", children: [jsx(Heading, { headingType: "h6", children: benefit.label }), renderDescription$3(benefit.description)] })) : null] }, String(i)));
     const renderDescription$3 = (description) => {
         const benefitType = description?.benefitType || null;
         return description && benefitType ? (jsx("div", { className: "mt-xs text-l font-light text-secondary-text group-data-secondary:text-white/80", children: benefitType === 'list'
@@ -1286,7 +1321,7 @@
         return (jsx("div", { className: `inline-block snap-always box-border ${className}`, style: style, "aria-current": Boolean(idx === activeIndex), ref: ref, children: children }));
     });
 
-    const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]', 'min-w-[25%]'];
+    const childStyleMap = ['min-w-full', 'min-w-1/2', 'min-w-1/3', 'min-w-1/4'];
     const SwipeListContainer = JSX(({ className = '', containerRef, activeIndex, visibleItemCount = 0, gap = 0, padding = 0, listType = 'horizontal-list', snapAlign = 'snap-center', minHeight, children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
         const observerOptions = {
             sensitivity: 1,
@@ -1348,6 +1383,7 @@
 
     const defaultDiscriminator = (_) => _;
     const maxBy = (discriminator = defaultDiscriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
+    const max = maxBy();
 
     const minBy = (discriminator = defaultDiscriminator) => maxBy((_) => -discriminator(_));
 
@@ -1364,7 +1400,7 @@
         container.scrollTo({ left: 0, behavior: 'smooth' });
     };
 
-    const useSwipeListScroll = ({ itemCount, isCyclic, onVisibleIndicesChange, }) => {
+    const useSwipeListScroll = ({ itemCount, onVisibleIndicesChange, }) => {
         const containerRef = useRef(null);
         const [visibleIndices, setVisibleIndices] = useState([]);
         const handleVisibleIndicesChange = useCallback((indices) => {
@@ -1380,31 +1416,31 @@
             if (!containerRef.current) {
                 return;
             }
-            if (isCyclic && !canScrollLeft) {
-                scrollToEnd(containerRef.current);
+            if (canScrollLeft) {
+                scrollBy(containerRef.current)(itemCount, -1);
             }
             else {
-                scrollBy(containerRef.current)(itemCount, -1);
+                scrollToEnd(containerRef.current);
             }
-        }, [isCyclic, itemCount, canScrollLeft]);
+        }, [itemCount, canScrollLeft]);
         const scrollRight = useCallback(() => {
             if (!containerRef.current) {
                 return;
             }
-            if (isCyclic && !canScrollRight) {
-                scrollToStart(containerRef.current);
+            if (canScrollRight) {
+                scrollBy(containerRef.current)(itemCount, 1);
             }
             else {
-                scrollBy(containerRef.current)(itemCount, 1);
+                scrollToStart(containerRef.current);
             }
-        }, [itemCount, isCyclic, canScrollRight]);
+        }, [itemCount, canScrollRight]);
         return [
             containerRef,
             {
                 scrollLeft,
                 scrollRight,
-                canScrollLeft: isCyclic || canScrollLeft,
-                canScrollRight: isCyclic || canScrollRight,
+                canScrollLeft,
+                canScrollRight,
                 visibleIndicesRange: [minIndex, maxIndex],
                 handleVisibleIndicesChange,
             },
@@ -1497,8 +1533,7 @@
         }
         const BlockComponent = type && blocksRegistry[type];
         return blockDecorator({
-            blockClassName: style('scroll-mt-12', // TODO scroll-mt-12 ? here?
-            className, block.style || defaultStyle),
+            blockClassName: style(block.style?.length ? block.style : defaultStyle, className),
             block,
             ancestors,
             // Adjusted by decorator block and blockClassName
@@ -1512,24 +1547,49 @@
     const DEFAULT_SLOT_NAME = null;
 
     const EMPTY_ANCESTORS = [];
-    const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, renderProps = renderBlock, ...options }) => (blocks || []).map((_, j) => renderProps(_, {
-        ...options,
-        key: `${key ? key : _.type}-${j}`,
-        ancestors: options.parent
-            ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
-            : ancestors,
-    }));
+    const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, extraProps, renderProps = renderBlock, ...options }) => {
+        const renderChildBlock = extraProps
+            ? (childBlock, childOptions) => renderBlock(childBlock, childOptions, extraProps)
+            : renderProps;
+        return (blocks || []).map((_, i) => renderChildBlock(_, {
+            ...options,
+            key: `${key ? key : _.type}-${i}`,
+            ancestors: options.parent
+                ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
+                : ancestors,
+        }, i));
+    };
 
-    function renderChildren({ children, block, options, renderProps, }) {
+    function renderChildren({ block, options, children, extraProps, renderProps, }) {
         if (children) {
             return children;
         }
         return block && options
-            ? renderBlocksList(block.blocks, { ...options, parent: block, renderProps })
+            ? renderBlocksList(block.blocks, { ...options, parent: block, extraProps, renderProps })
             : null;
     }
 
-    const ITEMS_GAP = 16;
+    const useCarouselControls = (props, initialIndex = 0) => {
+        const { itemCount, visibleItemCount } = props;
+        const [activeIndex, setActiveIndex] = useState(initialIndex);
+        const inc = useCallback(() => setActiveIndex((_) => Math.min(_ + 1, itemCount - 1)), [itemCount]);
+        const dec = useCallback(() => setActiveIndex((_) => Math.max(_ - 1, 0)), [itemCount]);
+        const canInc = visibleItemCount
+            ? itemCount > visibleItemCount && activeIndex < itemCount - visibleItemCount
+            : activeIndex < itemCount - 1;
+        const canDec = activeIndex > 0;
+        const isScrollAvailable = canDec || canInc;
+        return [
+            activeIndex,
+            {
+                inc,
+                dec,
+                canInc,
+                canDec,
+                isScrollAvailable,
+            },
+        ];
+    };
 
     const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `group/btn shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
         ? 'bg-secondary-light text-secondary-text'
@@ -1538,8 +1598,8 @@
     const ScrollRightButton = JSX((props) => (jsx(ArrowButton, { ...props, className: `${props.className || ''} rotate-180`, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })));
 
     const scrollButtonStyle$1 = 'absolute top-[calc(50%-24px)] z-40';
-    const blurBaseStyle = 'absolute top-0 bottom-0 z-40 w-[84px] pointer-events-none';
-    const CarouselScrollButtons = JSX(({ scroll, arrowsPadded, isBlur, onScrollLeft, onScrollRight, hasEdgeBlocks, activeIndex, itemCount, }) => {
+    const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
+    const CarouselScrollButtons = JSX(({ scroll, activeIndex, itemCount, arrowsPadded, hasEdgeBlocks, onScrollLeft, onScrollRight, }) => {
         const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
         const canMoveLeft = hasEdgeBlocks ? activeIndex > 0 : canScrollLeft;
         const canMoveRight = hasEdgeBlocks ? activeIndex < itemCount - 1 : canScrollRight;
@@ -1561,52 +1621,33 @@
                 onScrollRight();
             }
         }, [scrollRight, onScrollRight, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
-        return (jsxs("div", { children: [renderBlur(isBlur, scroll), canMoveLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'left-8' : 'left-0'), onClick: handleScrollLeft })) : null, canMoveRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'right-8' : 'right-0'), onClick: handleScrollRight })) : null] }));
+        return (jsxs("div", { className: "hidden @lg:block", children: [renderBlur(scroll), canMoveLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'left-1 @lg:left-8' : 'left-0'), onClick: handleScrollLeft })) : null, canMoveRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'right-1 @lg:right-8' : 'right-0'), onClick: handleScrollRight })) : null] }));
     });
-    const renderBlur = (isBlur, scroll) => isBlur ? (jsxs("div", { children: [scroll.canScrollLeft ? (jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white') })) : null, scroll.canScrollRight ? (jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white') })) : null] })) : null;
+    const renderBlur = (scroll) => (jsxs("div", { children: [scroll.canScrollLeft ? (jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white group-data-secondary:bg-none') })) : null, scroll.canScrollRight ? (jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white group-data-secondary:bg-none') })) : null] }));
 
-    const renderControlButtons = ({ showArrows, showDots, scrollButtonsProps, dotsProps, }) => {
-        return [
-            showArrows ? jsx(CarouselScrollButtons, { ...scrollButtonsProps }, "0") : null,
-            showDots ? jsx(SwipeListControlDots, { ...dotsProps, listType: "horizontal-list" }, "1") : null,
-        ];
-    };
+    const ITEMS_GAP = 16;
 
-    const Carousel = JSX(({ className = '', itemCount, visibleItemCount = 0, isBlur = true, isCyclic = false, arrowsPadded = true, isPadding = true, showDots = false, isAlignCenter = false, showArrows = true, isGap = true, ...rest }) => {
+    const Carousel = JSX(({ className, itemCount, visibleItemCount = 0, noCardBorder, isAlignCenter, showDots, arrowsPadded = true, isGap = true, ...rest }) => {
         const { blocks: childBlocks = [] } = rest.block || {};
         const count = itemCount || childBlocks?.length;
-        const [activeIndex, setActiveIndex] = useState(Math.floor(visibleItemCount / 2));
-        const increaseActiveIndex = useCallback(() => setActiveIndex((_) => _ + 1), []);
-        const decreaseActiveIndex = useCallback(() => setActiveIndex((_) => _ - 1), []);
-        const [containerRef, scroll] = useSwipeListScroll({
+        const [activeIndex, { inc: increaseActiveIndex, dec: decreaseActiveIndex }] = useCarouselControls({
             itemCount: count,
-            isCyclic,
-        });
+            visibleItemCount,
+        }, Math.floor(visibleItemCount / 2));
+        const [containerRef, scroll] = useSwipeListScroll({ itemCount: count });
         const [dotsActiveIndex] = scroll.visibleIndicesRange;
+        // TODO Remove
         const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
-        return (jsx(BlockWrapper, { className: className, defaultPadding: getPaddingStyle$1(isPadding), ...rest, children: jsxs("div", { className: style(getAlignStyle(isAlignCenter), 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: isGap ? ITEMS_GAP : undefined, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: style(isAlignCenter ? 'flex justify-center' : '', 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: isGap ? ITEMS_GAP : undefined, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
                             ...rest,
-                            renderProps: isBankHistoryCarousel
-                                ? (block, options) => renderBlock(block, options, {
-                                    blocksLength: childBlocks?.length,
-                                    activeIndex: activeIndex,
-                                })
-                                : renderBlock,
-                        }) }), renderControlButtons({
-                        showArrows,
-                        showDots,
-                        scrollButtonsProps: {
-                            scroll,
-                            arrowsPadded,
-                            isBlur,
-                            onScrollLeft: decreaseActiveIndex,
-                            onScrollRight: increaseActiveIndex,
-                            hasEdgeBlocks: isBankHistoryCarousel,
-                            activeIndex,
-                            itemCount: count,
-                        },
-                        dotsProps: { containerRef, activeIndex: dotsActiveIndex, dotCount: count },
-                    })] }) }));
+                            renderProps: (block, options, blockIndex) => renderBlock(block, options, {
+                                className: style('h-full min-w-80 sm:min-w-96', noCardBorder
+                                    ? ''
+                                    : 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider'),
+                                blockIndex,
+                                isActive: activeIndex === blockIndex,
+                            }),
+                        }) }), jsx(CarouselScrollButtons, { scroll: scroll, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: dotsActiveIndex, dotCount: count, listType: "horizontal-list" })) : null] }) }));
     });
     Carousel.childrenTypes = [
         'CarouselCard',
@@ -1621,10 +1662,8 @@
         'CarouselInvestmentCard',
         'CarouselEventCard',
     ];
-    const getPaddingStyle$1 = (isPadding) => (isPadding ? 'p-6xl' : '');
-    const getAlignStyle = (isAlignCenter) => isAlignCenter ? 'flex justify-center' : '';
 
-    const CarouselBankHistoryCard = JSX(({ title, description, className }) => (jsx(BlockWrapper, { className: style(className), defaultPadding: "p-6xl", children: jsx(Headline, { headlineVersion: "S", title: title, description: description, align: "text-left", className: "text-primary-text", isPadding: false }) })));
+    const CarouselBankHistoryCard = JSX(({ title, description, className }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", children: jsx(Headline, { headlineVersion: "S", title: title, description: description, align: "text-left", className: "text-primary-text", isPadding: false }) })));
 
     const LinkWrapper = JSX(({ className = '', href, target, isRemote = false, children }) => {
         const link = useLink({ isRemote });
@@ -1636,9 +1675,7 @@
     const cardTitleFont = 'font-light';
     const cardDescriptionColor = '';
 
-    const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], href, target, ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('border border-gray', className), defaultPadding: "p-3xl sm:p-0", ...rest, children: jsxs(LinkWrapper, { className: "sm:flex sm:items-center", href: href, target: target, children: [jsx("div", { className: "min-w-[200px] flex justify-center", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }), jsxs("div", { className: "sm:px-s p-5xl", children: [title ? jsx(Heading, { className: "mb-xs sm:mb-m", headingType: "h6", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-xs sm:gap-s", children: list?.map(renderList$2) })) : null] })] }) }));
-    });
+    const CarouselProgramsCard = JSX(({ className, title, icon, list = [], href, target, ...rest }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-3xl sm:p-0", ...rest, children: jsxs(LinkWrapper, { className: "sm:flex sm:items-center", href: href, target: target, children: [jsx("div", { className: "flex justify-center px-xl", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }), jsxs("div", { className: "sm:px-s p-5xl", children: [title ? jsx(Heading, { className: "mb-xs sm:mb-m", headingType: "h6", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-xs sm:gap-s", children: list?.map(renderList$2) })) : null] })] }) })));
     const renderList$2 = (_, i) => (jsxs("div", { className: "flex flex-row-reverse justify-between gap-y-2xs sm:flex-col", children: [_.title ? (jsx(Text, { size: "text-l", font: cardTitleFont, children: _.title })) : null, _.description ? (jsx(Paragraph, { size: "text-l", font: "font-light", color: cardDescriptionColor, children: _.description })) : null] }, String(i)));
 
     const DOT_SIZE_MAP = {
@@ -1662,8 +1699,9 @@
 
     const buttonSizeStyles = {
         default: 'w-24 h-14',
-        small: 'w-12 h-12',
+        stretched: 'flex-1 h-14',
     };
+
     const buttonStylesWithText = (text, buttonSize) => text
         ? ''
         : style('group/media flex items-center justify-center box-border', buttonSizeStyles[buttonSize]);
@@ -1711,12 +1749,10 @@
     });
     const getFilteredIcon = (icon) => (icon?.src || icon?.icon ? icon : undefined);
 
-    const SocialMedia = JSX(({ className = '', media }) => (jsx("div", { className: `flex gap-2 items-start justify-start ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { ..._ }, String(index)))) })));
-
-    const BORDER_STYLE = 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
+    const SocialMedia = JSX(({ className = '', media, children, buttonSize }) => (jsxs("div", { className: "flex flex-col sm:flex-col-reverse gap-xs", children: [children ? (jsx(Text, { size: "text-s", font: "font-light", color: "text-secondary-text", children: children })) : null, jsx("div", { className: style('flex gap-xs', className), children: media?.map((_, index) => (jsx(MediaButton, { buttonSize: buttonSize, ..._ }, String(index)))) })] })));
 
     const CarouselRecommendationCard = JSX(({ className = '', description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('relative box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), defaultPadding: "p-6xl", ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-xs", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), items.length ? (jsx(List, { className: "flex flex-col gap-2", items: items, listItemSize: "S" })) : null, renderIcon$1(icon), socialMedia.length ? jsx(SocialMedia, { className: "mt-5", media: socialMedia }) : null] }) }));
+        return (jsx(BlockWrapper, { className: style('relative group-data-gray:bg-main-divider/50', className), defaultPadding: "p-6xl", ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-xs", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), items.length ? (jsx(List, { className: "flex flex-col gap-2", items: items, listItemSize: "S" })) : null, renderIcon$1(icon), socialMedia.length ? jsx(SocialMedia, { className: "mt-5", media: socialMedia }) : null] }) }));
     });
     const renderIcon$1 = (icon) => icon?.src || icon?.icon ? (jsx("div", { children: jsx(Img, { image: icon }) })) : null;
 
@@ -1754,37 +1790,18 @@
         const cellsNode = cardCells.map(renderCardInfo);
         const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
         const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
-        return (jsxs(BlockWrapper, { className: style('relative border border-gray flex flex-col', className), defaultPadding: getPaddingStyle(isHighlighting), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock(icon), title ? (jsx(Heading, { className: style('pt-xs', align), headingType: "h5", title: title })) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
+        return (jsxs(BlockWrapper, { className: style('relative flex flex-col', className), defaultPadding: getPaddingStyle(isHighlighting), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock(icon), title ? (jsx(Heading, { className: style('pt-xs', align), headingType: "h5", title: title })) : null, button ? jsx(Button, { className: "w-full mt-m", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
     });
-    const renderIconBlock = (icon) => (jsx("div", { className: "w-[267px] min-w-[267px] self-center", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }));
+    const renderIconBlock = (icon) => (jsx("div", { className: "basis-full self-center", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }));
     const renderFoldButton$1 = ({ isUnfolded, onToggle }) => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center", onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16" })] }));
     const renderHitIcon = () => (jsxs("div", { className: "absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "23", height: "22" }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: "\u0425\u0418\u0422" })] }));
 
-    const getColSpan = (className) => {
-        const colSpanPrefix = 'col-span-';
-        const colSpanStr = className?.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
-        return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
-    };
-
-    const CARD_WIDTH_MAP = {
-        normal: 'min-w-[970px]',
-        small: 'min-w-[355px]',
-    };
-    function getCardWidth(className = '', carouselVersion = 'normal') {
-        const colSpan = getColSpan(className);
-        if (colSpan <= 4) {
-            return 'w-[375px]';
-        }
-        else {
-            return CARD_WIDTH_MAP[carouselVersion];
-        }
-    }
-
     const titleSize = 'XS';
 
-    const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full hidden sm:block';
-    const CarouselCard = JSX(({ className = '', button, description, title, carouselVersion = 'normal', version = '' }) => (jsx("section", { className: style('flex pl-6xl sm:p-lg border-box h-full sm:max-w-[375px]', getCardWidth(className, carouselVersion), className), children: jsxs("div", { className: "relative w-full", children: [jsx("div", { className: `${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-6 right-8 bg-green` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light` }), jsxs("div", { className: "relative h-full bg-white z-10 p-10 border border-solid border-green-light", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: titleSize, align: "text-left", version: version }), renderButtonsSection([button], {
-                            className: 'mt-14 sm:justify-center',
+    const layerBaseStyle = 'z-10 border border-solid w-full h-full';
+    const layerStyle = style(layerBaseStyle, 'absolute hidden sm:block border-transparent');
+    const CarouselCard = JSX(({ className, title, description, button, ...rest }) => (jsx(BlockWrapper, { className: style('sm:pl-12 sm:pb-9', className), defaultPadding: "p-0", ...rest, children: jsxs("div", { className: "relative", children: [jsx("div", { className: style(layerStyle, 'top-9 right-12 bg-green-dark') }), jsx("div", { className: style(layerStyle, 'top-6 right-8 bg-green') }), jsx("div", { className: style(layerStyle, 'top-3 right-4 bg-green-light') }), jsxs("div", { className: style(layerBaseStyle, 'relative p-10 bg-white border-green-light'), children: [jsx(Headline, { title: title, description: description, headlineVersion: titleSize, align: "text-left", isPadding: false }), renderButtonsSection([button], {
+                            className: 'mt-6xl sm:justify-center',
                             isVertical: true,
                         })] })] }) })));
 
@@ -1792,13 +1809,13 @@
         black: 'bg-black',
         white: 'bg-white',
     };
-    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: style('border box-border border-gray p-6xl sm:p-7 h-full flex flex-col justify-left gap-m', className), ...rest, children: [image?.src ? jsx(Img, { className: "flex justify-center", image: image }) : null, jsx(Headline, { title: title, description: description, headlineVersion: "XS", isPadding: false, align: "text-left" }), colors?.length ? (jsxs("div", { className: "flex text-secondary-text", children: [jsx("div", { className: "mr-xs", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0426\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'w-full' })] })));
+    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col justify-left gap-m', className), defaultPadding: "p-6xl sm:p-7", ...rest, children: [image?.src ? jsx(Img, { className: "flex justify-center", image: image }) : null, jsx(Headline, { title: title, description: description, headlineVersion: "XS", isPadding: false, align: "text-left" }), colors?.length ? (jsxs("div", { className: "flex text-secondary-text", children: [jsx("div", { className: "mr-xs", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0426\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'w-full' })] })));
     const renderColorOption = (color, i) => (jsx("div", { role: "figure", className: `w-6 h-6 ml-1 sm:ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
 
     const alignTextStyle = 'text-left';
 
     const CarouselProductCard = JSX(({ additionalDescription, align = alignTextStyle, button = {}, className = '', description, headlineSmallVersion = 'H6', href, icon, isDotted = true, isButtonFullWidth = true, isImageFullWidth = false, isTopPosition = false, items = [], target, title, version = 'primary', ...rest }) => {
-        return (jsxs(BlockWrapper, { className: style('h-full flex flex-col justify-between min-w-[260px]', 'box-border border-solid border border-gray', align, className), defaultPadding: "p-0", version: version, ...rest, children: [jsxs(LinkWrapper, { className: "p-m flex flex-col gap-xs", href: href, target: target, children: [renderCardTitle(headlineSmallVersion, title), renderDescription$2(description), renderItems(items, isDotted, version), renderAdditionalDescription(additionalDescription), renderImage$2(icon, isImageFullWidth, isTopPosition)] }), renderButtonsSection([button], {
+        return (jsxs(BlockWrapper, { className: style('flex flex-col justify-between', align, className), defaultPadding: "p-0", version: version, ...rest, children: [jsxs(LinkWrapper, { className: "p-m flex flex-col gap-xs", href: href, target: target, children: [renderCardTitle(headlineSmallVersion, title), renderDescription$2(description), renderItems(items, isDotted, version), renderAdditionalDescription(additionalDescription), renderImage$2(icon, isImageFullWidth, isTopPosition)] }), renderButtonsSection([button], {
                     className: style('p-m pt-0', isButtonFullWidth ? '' : 'self-center'),
                     isVertical: isButtonFullWidth,
                 })] }));
@@ -1835,7 +1852,7 @@
 
     const ComparisonTable = JSX((props) => {
         const { className, title } = props;
-        return (jsxs("section", { className: `bg-white font-sans px-4 py-6 overflow-hidden text-primary-text relative ${className || ''}`, children: [title ? (jsx(Heading, { headingType: "h3", className: "font-medium text-center m-0 mb-5", title: title })) : null, jsx("div", { role: "table", children: jsx(TableInner, { ...props }) })] }));
+        return (jsxs("section", { className: `bg-white font-sans p-6xl overflow-hidden text-primary-text relative space-y-lg ${className || ''}`, children: [title ? (jsx(Heading, { headingType: "h3", className: "font-medium text-center", title: title })) : null, jsx("div", { role: "table", children: jsx(TableInner, { ...props }) })] }));
     });
     const TableInner = JSX(({ columns = [], rowHeaders, isColoredFirstColumn, visibleRowLength, orientation, ...rest }) => {
         const [columnsViewState, setColumnsViewState] = useState(new Array(columns.length).fill(!visibleRowLength));
@@ -1849,20 +1866,195 @@
         return orientation === 'horizontal' ? (jsx(SwipeListControl, { onVisibleIndicesChange: handleSlideChange, children: tableColumns })) : (tableColumns);
     });
 
-    const EMPTY_VALUE = {};
-    function useSWRResource(filename, fallback = {}) {
-        const { data } = useAsyncData(`/wcms-resources/${filename}.json`, fetchJSONUnsafe, {
-            fallback,
+    const imageAlignmentMap = {
+        start: 'self-start',
+        center: 'self-center',
+        end: 'self-end',
+    };
+    const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-3xl font-sans overflow-hidden', padding || defaultPadding, className), children: [title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: "grow relative flex flex-wrap @xl:flex-nowrap justify-between items-stretch gap-3xl", children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-3xl max-w-[600px] xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), backImage ? (jsx("div", { className: "mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4", children: backImage })) : null, buttons] }), renderImageContainer(rightImage, { className: '-order-1 @xl:order-1', imageAlign })] })] })));
+    const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
+
+    var Currency;
+    (function (Currency) {
+        Currency["RUB"] = "RUB";
+        Currency["EUR"] = "EUR";
+        Currency["USD"] = "USD";
+    })(Currency || (Currency = {}));
+
+    const currencyNumberFormat = new Intl.NumberFormat('ru', {
+        style: 'currency',
+        currency: Currency.RUB,
+    });
+    const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
+
+    const TABLE_HEAD_STYLE = 'text-left text-m font-light text-secondary-text';
+    const TABLE_HEAD_STYLE_WITH_PADDING = `${TABLE_HEAD_STYLE} pl-5xl`;
+    const CURRENCY_ICONS_MAP = {
+        USD: 'DollarIcon',
+        EUR: 'EuroIcon',
+    };
+    const CurrencyTable = JSX(({ className, exchangeCurrencyItems }) => (jsxs("table", { className: `h-fit w-fit ${className}`, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: TABLE_HEAD_STYLE, children: jsx(Text, { size: "text-m", children: "\u0412\u0430\u043B\u044E\u0442\u0430" }) }), jsx("th", { className: TABLE_HEAD_STYLE_WITH_PADDING, children: jsx(Text, { size: "text-m", children: "\u041A\u0443\u043F\u0438\u0442\u044C" }) }), jsx("th", { className: TABLE_HEAD_STYLE_WITH_PADDING, children: jsx(Text, { size: "text-m", children: "\u041F\u0440\u043E\u0434\u0430\u0442\u044C" }) })] }) }), jsx("tbody", { children: exchangeCurrencyItems.map(renderCurrencyRow) })] })));
+    const renderCurrencyRow = (exchangeCurrencyItem) => {
+        const currency = exchangeCurrencyItem?.currency?.currency;
+        return (jsxs("tr", { className: "pb-2xs text-h6", children: [jsx("td", { className: "pt-m", children: jsxs("div", { className: "flex items-center", children: [currency ? (jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[currency] }, width: "24", height: "24", className: "mr-2" })) : null, jsx(Text, { size: "text-h6", children: currency })] }) }), jsx("td", { className: "pt-m pl-5xl", children: jsx(Text, { size: "text-h6", children: formatCurrency(exchangeCurrencyItem?.saleExchangeRate) }) }), jsx("td", { className: "pt-m pl-5xl", children: jsx(Text, { size: "text-h6", children: formatCurrency(exchangeCurrencyItem?.buyExchangeRate) }) })] }, currency));
+    };
+
+    const icon = { icon: 'GpsIcon' };
+    const CurrentLocation$1 = JSX(({ className = '', address }) => (jsxs("div", { className: `flex gap-s ${className}`, children: [jsx(RoundedIcon, { ...icon, iconBgVersion: "primary" }), jsxs("div", { className: "space-y-2xs", children: [address ? jsx("p", { className: "text-primary-main text-l", children: address }) : null, jsx("p", { className: "text-secondary-text 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;
+        return Math.round(parseFloat(String(value)) * factor) / factor;
+    };
+
+    const calculateResult = (value, rate, precision) => {
+        const result = Number(formatValue(value)) * Math.pow(rate, precision ? -1 : 1);
+        return Number.isInteger(result) ? result : roundTo(result);
+    };
+    const formatValue = (value) => value.replace(/[^\d.,]/g, '').replace(',', '.');
+
+    const tableFunc = (table) => (input) => {
+        const [, output] = table.find(([predicate]) => predicate(input)) || [];
+        return output;
+    };
+
+    const callbackCurrencySelect = (props) => tableFunc([
+        [
+            (_) => _.value !== Currency.RUB && _.oppositeValue !== Currency.RUB,
+            () => props.handleConvert(props.value, Currency.RUB),
+        ],
+        [
+            (_) => _.value === Currency.RUB && _.oppositeValue === Currency.RUB,
+            () => props.handleConvert(props.value, Currency.USD),
+        ],
+        [() => true, () => props.handleConvert(props.value)],
+    ])(props)?.();
+
+    function renderInput(props) {
+        const { placeholder, rates, selected, value, setValue, setSelected } = props;
+        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] }));
+    }
+
+    const ExchangeCurrencyCalculator = JSX(({ className = '', currencyRatesBuy, currencyRatesSell, button }) => {
+        const [calcState, setCalcState] = useState({
+            inputSell: '',
+            inputBuy: '',
+            selectSell: currencyRatesBuy?.[0]?.currency?.currency || Currency.RUB,
+            selectBuy: currencyRatesSell?.[0]?.currency?.currency || Currency.USD,
         });
-        return data || EMPTY_VALUE;
+        const handleSetCalcState = useCallback((newState) => setCalcState((oldState) => ({ ...oldState, ...newState })), []);
+        return (jsxs("div", { className: `grid gap-m pt-2xl ${className}`, children: [renderInput({
+                    placeholder: 'Хочу продать',
+                    rates: currencyRatesSell,
+                    selected: calcState.selectSell,
+                    setSelected: handleSelectSell(calcState, handleSetCalcState, currencyRatesSell),
+                    value: calcState.inputSell,
+                    setValue: (value) => handleInputSell(handleSetCalcState, currencyRatesSell)(value, calcState.selectSell, calcState.selectBuy),
+                }), renderInput({
+                    placeholder: 'Получу',
+                    rates: currencyRatesBuy,
+                    selected: calcState.selectBuy,
+                    setSelected: handleSelectBuy(calcState, handleSetCalcState, currencyRatesBuy),
+                    value: calcState.inputBuy,
+                    setValue: (value) => handleInputBuy(handleSetCalcState, currencyRatesBuy)(value, calcState.selectBuy, calcState.selectSell),
+                }), button?.text ? (jsx(Button, { className: "py-4", version: button?.version, ...button, children: button.text })) : null] }));
+    });
+    const handleSelectSell = (calcState, setCalcState, currencyRatesSell) => (value) => {
+        setCalcState({ selectSell: value });
+        callbackCurrencySelect({
+            value,
+            oppositeValue: calcState.selectBuy,
+            handleConvert: (currencyFrom = calcState.selectSell, currencyTo = calcState.selectBuy) => {
+                handleInputSell(setCalcState, currencyRatesSell)(calcState.inputSell, currencyFrom, currencyTo);
+            },
+        });
+    };
+    const handleSelectBuy = (calcState, setCalcState, currencyRatesBuy) => (value) => {
+        setCalcState({ selectBuy: value });
+        callbackCurrencySelect({
+            value,
+            oppositeValue: calcState.selectSell,
+            handleConvert: (currencyTo = calcState.selectBuy, currencyFrom = calcState.selectSell) => handleInputBuy(setCalcState, currencyRatesBuy)(calcState.inputBuy, currencyTo, currencyFrom),
+        });
+    };
+    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, currencyFrom === Currency.RUB) || ''),
+            });
+        }
+    };
+    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, currencyTo === Currency.RUB) || ''),
+            });
+        }
+    };
+
+    const EXCHANGE_RATES_URL = '/api/v1/exchangerates';
+    const REGION_URL$1 = '/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$1, { 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 = '', title = 'Курсы обмена валют', button, ...rest }) => {
+        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, { className: style('box-border min-h-80', className), ...rest, children: jsx(BaseTile, { className: "h-full", title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex gap-6xl flex-wrap", children: [jsxs("div", { children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-xl", 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) || [];
+    };
 
     const linkListStyles = '';
 
-    const LinkList = JSX(({ className = '', items }) => items?.length ? (jsx("ul", { className: style('flex flex-col p-0', linkListStyles, className), children: items.map(renderLinkListItem) })) : null);
+    const LinkList = JSX(({ className = '', items }) => items?.length ? (jsx("ul", { className: style('flex flex-col', linkListStyles, className), children: items.map(renderLinkListItem) })) : null);
     const renderLinkListItem = (item, i) => {
         const { text, ...linkProps } = item;
-        return (jsx("li", { className: "list-none mb-4 sm:mb-6 sm:last:mb-0", children: jsx("a", { className: "hover:text-primary-main sm:font-light", role: "link", ...linkProps, children: text ? text : null }) }, `list_item_${String(i)}`));
+        return (jsx("li", { className: "list-none my-xs", children: jsx("a", { className: "hover:text-primary-main font-light", role: "link", ...linkProps, children: text ? text : null }) }, `list_item_${String(i)}`));
     };
 
     const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => {
@@ -1885,7 +2077,10 @@
     const rollupItemStyles = '';
 
     const RollupItem = JSX(({ className = '', label = 'Развернуть', labelIcon, labelIconBgVersion, isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), defaultPadding: "p-0", tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-5 [&>*]:p-0', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({
+        return (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), defaultPadding: "p-0", tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-5', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren({
+                        ...rest,
+                        extraProps: { className: 'w-full', padding: 'p-0' },
+                    }) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({
                     version,
                     label,
                     labelIcon,
@@ -1908,12 +2103,12 @@
         })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
     const renderPrimaryFoldButton = ({ label, labelIconBgVersion, icon, onToggle, labelIcon, }) => {
-        return (jsxs("button", { className: style('border-none bg-transparent px-0 flex justify-between items-center w-full group/button', labelIcon?.icon ? 'py-xs' : 'py-lg'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main gap-s", children: [renderRoundedIcon(labelIcon, labelIconBgVersion), label ? (jsx(Text, { size: "text-h6", font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
+        return (jsxs("button", { className: style('border-none bg-transparent flex justify-between items-center w-full group/button', labelIcon?.icon ? 'py-xs' : 'py-lg'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main gap-s", children: [renderRoundedIcon(labelIcon, labelIconBgVersion), label ? (jsx(Text, { size: "text-h6", font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
     };
 
-    const Contacts = JSX(({ className = '', items, hasButton }) => (jsxs("div", { className: style('space-y-xl', className), children: [items?.length ? items.map(renderContactsGroup) : null, hasButton ? (jsx(Button, { version: "primary", className: "mb-6 w-full", href: "https://www.rshb.ru/feedback/question/", 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 renderContactsGroup = (item, i) => (jsxs("div", { className: "space-y-m", children: [jsx("div", { className: "", children: jsx(Text, { size: "text-l", font: "font-medium", children: item?.title }) }), jsx("div", { className: "space-y-m", children: item.items?.map(renderContact) })] }, String(i)));
-    const renderContact = (item, index) => (jsxs("div", { className: "space-y-2xs", children: [jsx("div", { children: renderText(item.type, item.text) }), jsx("div", { className: "text-s font-light text-secondary-text", children: item.description })] }, String(index)));
+    const Contacts = JSX(({ className = '', items }) => (jsxs("div", { className: className, children: [items?.length ? items.map(renderContactsGroup) : null, jsx(Button, { version: "primary", className: "w-full", href: "https://www.rshb.ru/feedback/question/", 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" })] })));
+    const renderContactsGroup = (item, i) => (jsxs("div", { className: "mb-m", children: [jsx("div", { className: "mb-m", children: jsx(Text, { size: "text-l", font: "font-medium", children: item?.title }) }), jsx("div", { children: item.items?.map(renderContact) })] }, String(i)));
+    const renderContact = (item, index) => (jsxs("div", { className: "mb-m", children: [jsx("div", { children: renderText(item.type, item.text) }), jsx("div", { className: "mt-2xs text-s font-light text-secondary-text", children: item.description })] }, String(index)));
     const renderText = (type, text = '') => {
         switch (type) {
             case 'tel':
@@ -1934,7 +2129,7 @@
         return (jsx("a", { className: style(horizontalNavigationLinkStyles, className), href: href, target: target, onClick: onClick, children: text || `Документ ${index}` }));
     });
 
-    const HorizontalNavigation = JSX(({ title, links, className = '' }) => (jsxs("div", { className: className, children: [jsx(Text, { size: "text-h6", children: title }), links?.length ? (jsx("div", { className: "flex flex-col gap-6 mt-7", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, ..._ }, String(i)))) })) : null] })));
+    const HorizontalNavigation = JSX(({ title, links, className = '' }) => (jsxs("div", { className: className, children: [jsx(Text, { size: "text-l", font: "font-normal", children: title }), links?.length ? (jsx("div", { className: "flex flex-col gap-lg mt-lg", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { className: "text-l font-light", index: i, ..._ }, String(i)))) })) : null] })));
 
     const TextInformationLink = JSX(({ className = '', index, ...rest }) => {
         const link = useLink({ isRemote: true });
@@ -1942,17 +2137,15 @@
         return (jsx("a", { className: `text-xs font-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` }));
     });
 
-    const TextInformation = JSX(({ className = '', links }) => (jsxs("div", { className: className, children: [jsx("div", { className: "pt-4 xl:pt-5", children: jsx(Text, { size: "text-xs", font: "font-light", color: "text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex justify-start items-start gap-5 pt-4", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ..._ }, String(i)))) })) : null] })));
+    const TextInformation = JSX(({ className = '', links }) => (jsxs("div", { className: className, children: [jsx("div", { className: "pt-lg", children: jsx(Text, { size: "text-xs", font: "font-light", color: "text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex flex-col sm:flex-row justify-start items-start gap-x-lg gap-y-xs pt-lg", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ..._ }, String(i)))) })) : null] })));
 
-    const Footer = JSX(({ className = '', ...rest }) => {
-        const fallback = rest.options?.page?.fallback;
-        const sitemap = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
-        const { relatedEnterprises, contacts, socialMedia, mobileApps, horizontalNavigationTitle } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
-        return (jsxs(BlockWrapper, { tag: "footer", className: className, defaultPadding: "px-4 py-6", ...rest, children: [jsx("div", { className: "mb-4 pb-5 border-b border-main-divider", children: sitemap.topItems?.map((item, i) => (jsx(RollupItem, { label: item?.text, labelIcon: item?.icon, children: jsx(LinkList, { items: item.items, className: "my-3" }) }, String(i)))) }), jsx(Contacts, { className: "overflow-hidden", items: contacts }), jsx(SocialMedia, { className: "mb-4", media: socialMedia }), mobileApps?.map(renderButton), jsx(HorizontalNavigation, { className: "pt-m pb-2xl border-y border-main-divider", title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, {})] }));
+    const Footer = JSX(({ className, sitemap, ...rest }) => {
+        const { relatedEnterprises, contacts, socialMedia, mobileApps, horizontalNavigationTitle, documents, } = useSWRResource(projectSettings.FOOTER || 'footer', rest.options?.page?.fallback);
+        return (jsxs(BlockWrapper, { tag: "footer", className: className, ...rest, children: [jsx("div", { className: "mb-lg pb-xs border-b border-main-divider", children: sitemap?.topItems?.map((item, i) => (jsx(RollupItem, { label: item?.text, labelIcon: item?.icon, children: jsx(LinkList, { items: item.items }) }, String(i)))) }), jsx(Contacts, { className: "overflow-hidden", items: contacts }), jsxs("div", { className: "mt-xl", children: [jsx(SocialMedia, { className: "mb-xl", media: socialMedia, buttonSize: "stretched", children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(Text, { size: "text-s", font: "font-light", color: "text-secondary-text", children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }), jsx("div", { className: "mt-xs", children: mobileApps?.map(renderButton) })] }), jsx(HorizontalNavigation, { className: "py-lg border-y border-main-divider", title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
     });
     const renderButton = ({ href = '/' }, i) => {
         const { label } = findIconByHref(href);
-        return (jsx(Button, { className: "w-full mb-4", text: label, version: "secondary", href: href, target: "_blank" }, String(i)));
+        return (jsx(Button, { className: "w-full mb-lg", text: label, version: "secondary", href: href, target: "_blank" }, String(i)));
     };
 
     const ICON_VERSION_MAP = {
@@ -1995,19 +2188,37 @@
         return (jsxs("div", { className: "flex items-center justify-between w-full", children: [isRootLocation ? (jsx(Logo, { bgColor: bgColor, logo: logo })) : (jsxs(Button, { className: "flex items-center text-l", ariaLabel: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430\u0437\u0430\u0434", onClick: onClick, children: [jsx(Img, { className: "w-6 h-6", image: {
                                 icon: 'ChevronLeft',
                                 iconVersion: 'black',
-                            } }), "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430\u0437\u0430\u0434"] })), internetBankUrl ? (jsx(Button, { href: internetBankUrl, ariaLabel: "\u0412\u043E\u0439\u0442\u0438", target: "_blank", className: style('p-3 my-1 text-s whitespace-nowrap text-primary-main hover:text-primary-hover', BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default']), children: "\u0412\u043E\u0439\u0442\u0438" })) : null] }));
+                            } }), "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430\u0437\u0430\u0434"] })), internetBankUrl ? (jsx(Button, { href: internetBankUrl, ariaLabel: "\u0412\u043E\u0439\u0442\u0438", target: "_blank", className: style('p-s my-2xs text-s whitespace-nowrap text-primary-main hover:text-primary-hover', BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default']), children: "\u0412\u043E\u0439\u0442\u0438" })) : null] }));
     });
 
     const BG_COLOR_TO_BLOCK_VERSION = {
         'bg-white': 'primary',
         transparent: 'transparent',
     };
-    const Header = JSX(({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
-        const fallback = rest.options?.page?.fallback;
-        const { logo, internetBankUrl } = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
+    const Header = JSX(({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], sitemap, ...rest }) => {
+        const { logo, internetBankUrl } = sitemap || {};
         return (jsx(BlockWrapper, { tag: "header", defaultPadding: "", version: version, ...rest, children: jsx("div", { className: "container px-4 py-2xs box-border", children: jsx(HeaderTop, { bgColor: bgColor, logo: logo, internetBankUrl: internetBankUrl, version: version, ...rest }) }) }));
     });
 
+    const gapStyles = {
+        XXL: 'gap-6xl',
+        XL: 'gap-5xl',
+        L: 'gap-3xl',
+        M: 'gap-m',
+        S: 'gap-xs',
+        XS: 'gap-2xs',
+        '': '',
+    };
+
+    const VerticalLayout = JSX(({ className = '', gap = '', isPadding = false, isInnerPadding = true, version = 'transparent', isTheme = false, ...rest }) => (jsx(BlockWrapper, { className: style('relative flex flex-col', gapStyles[gap], className), defaultPadding: isPadding ? 'p-6xl' : '', version: version, isTheme: isTheme, ...rest, children: renderChildren({
+            ...rest,
+            extraProps: { className: 'w-full', padding: isInnerPadding ? '' : 'p-0' },
+        }) })));
+    VerticalLayout.childrenTypes = [];
+
+    const HorizontalLayout = JSX((props) => jsx(VerticalLayout, { ...props }));
+    HorizontalLayout.childrenTypes = [];
+
     const ImgBlock = JSX((props) => {
         const { className, image, ...rest } = props;
         return (jsx(BlockWrapper, { className: className, defaultPadding: "p-0", ...rest, children: jsx(Img, { image: image }) }));
@@ -2046,7 +2257,7 @@
     };
     const LinkDocs = JSX(({ className = '', title, description, align = 'text-center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => {
         const router = useRouter();
-        return (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, align: align, headlineVersion: "M", as: "h2" }), documents?.length ? (jsx("div", { className: style('mt-5 sm:mt-8 flex flex-col gap-6', linkColumnsModeStyleMap[columnsMode]), role: "list", children: documents.map(renderLinkDocItem(router, columnsMode, icon)) })) : null] }));
+        return (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, align: align, headlineVersion: "M", as: "h2", isPadding: false }), documents?.length ? (jsx("div", { className: style('mt-5 sm:mt-8 flex flex-col gap-6', linkColumnsModeStyleMap[columnsMode]), role: "list", children: documents.map(renderLinkDocItem(router, columnsMode, icon)) })) : null] }));
     });
     const renderLinkDocItem = (router, columnsMode, icon) => (docBlockDef, i) => {
         const href = docBlockDef?.docType === 'Attachment'
@@ -2055,7 +2266,7 @@
         const fileSize = docBlockDef?.docType === 'Attachment'
             ? formatBytes(docBlockDef?.attachment?.fileSize || 0)
             : docBlockDef?.fileSize;
-        return (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocItem, { ...docBlockDef, href: href, fileSize: fileSize, icon: icon ? jsx(Img, { className: linkIconStyle, image: icon, width: "24", height: "24" }) : null }) }, String(i)));
+        return (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocItem, { text: docBlockDef?.text, target: docBlockDef?.target, href: href, fileSize: fileSize, icon: icon ? jsx(Img, { className: linkIconStyle, image: icon, width: "24", height: "24" }) : null }) }, String(i)));
     };
 
     /**
@@ -2067,22 +2278,14 @@
         right: 'text-right',
     };
 
-    const imageAlignmentMap = {
-        start: 'self-start',
-        center: 'self-center',
-        end: 'self-end',
-    };
-    const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-3xl font-sans overflow-hidden', padding || defaultPadding, className), children: [backImage ? jsx("div", { className: "absolute bottom-0 right-0 z-0", children: backImage }) : null, title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: "grow relative flex flex-wrap sm:flex-nowrap justify-between items-stretch gap-3xl", children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-3xl max-w-[600px] xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), buttons] }), renderImageContainer(rightImage, { className: '-order-1 sm:order-1', imageAlign })] })] })));
-    const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
-
-    const renderDescription$1 = (description) => description ? (jsx("div", { className: "mb-5 pt-3xs sm:mb-0 sm:pt-0", children: jsx(Text, { size: "text-xl", "font-weight": "light", children: description }) })) : null;
+    const renderDescription$1 = (description) => description ? (jsx("div", { className: "mb-lg pt-3xs", children: jsx(Text, { size: "text-xl", "font-weight": "light", children: description }) })) : null;
 
     const renderList$1 = (items) => {
         return items?.length ? (jsx(List, { items: items, className: "text-l font-light mb-xs last:mb-0" })) : (jsx("span", { className: "text-m font-light text-secondary-text", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
     };
 
     const MobileAppTile = JSX(({ className, padding, alignTitle = 'left', buttons = [], description, headingType = 'h4', image, items, qr, title = 'Мобильное приложение', version = 'primary', ...rest }) => {
-        const containerStyle = version === 'secondary' ? 'p-m min-w-[120px]' : 'min-w-[92px]';
+        const containerStyle = version === 'secondary' ? 'p-m min-w-32' : 'min-w-24';
         return (jsx(BlockWrapper, { className: style('min-h-80', className), padding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-6xl", title: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', AlignText[alignTitle]) })) : null, buttons: renderButtonsSection(buttons, { isVertical: buttons.length > 4 }), children: [renderDescription$1(description), jsxs("div", { className: "flex flex-1 flex-wrap gap-m items-center", children: [qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList$1(items), image?.src ? jsx(Img, { image: image }) : null] })] }) }));
     });
 
@@ -2169,6 +2372,387 @@
         return (jsx(BlockWrapper, { defaultPadding: "p-0", ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) }));
     });
 
+    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: 'Кафе' },
+    ];
+
+    function renderClusterer(yandexMaps, map, points) {
+        map.geoObjects.removeAll();
+        const clusterIconContentLayout = yandexMaps.templateLayoutFactory.createClass('<div style="margin-top: -3px;">{{properties.geoObjects.length}}</div>');
+        const clusterer = new yandexMaps.Clusterer({
+            clusterIcons: [
+                {
+                    href: 'icons/MapMarkerClusterIcon.svg',
+                    size: [78, 84],
+                    offset: [-35, -50],
+                },
+            ],
+            clusterIconContentLayout,
+            clusterHideIconOnBalloonOpen: false,
+            geoObjectHideIconOnBalloonOpen: false,
+        });
+        const geoObjects = points.map((point) => new yandexMaps.Placemark(point, {}, {
+            iconLayout: 'default#image',
+            iconImageHref: 'icons/MapMarkerSingleIcon.svg',
+            iconImageSize: [78, 84],
+            iconImageOffset: [-35, -50],
+        }));
+        clusterer.add(geoObjects);
+        map.geoObjects.add(clusterer);
+        // TODO: Fix
+        // @ts-ignore
+        map.setBounds(yandexMaps.util.bounds.fromPoints(points)).then(() => {
+            if (map.getZoom() > 10) {
+                map.setZoom(10);
+            }
+        });
+    }
+
+    const styles$3 = {
+        focus: 'focus:border-primary-text 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-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-s pl-5xl pr-m w-full`, children: [jsx(Icon, { name: "LoupeIcon", iconVersion: "black", width: "20", height: "20", 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-text 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();
+        const setNS = useCallback(() => setExternalNS(getNS(namespaceName)), [namespaceName]);
+        useEffect(() => {
+            const script = document.getElementById(url);
+            if (script) {
+                if (getNS(namespaceName)) {
+                    setNS();
+                }
+                else {
+                    script.addEventListener('load', setNS);
+                    return () => {
+                        script.removeEventListener('load', setNS);
+                    };
+                }
+            }
+            else {
+                const newScript = document.createElement('script');
+                newScript.src = url;
+                newScript.async = true;
+                newScript.id = url;
+                newScript.addEventListener('load', setNS);
+                document.head.appendChild(newScript);
+                return () => {
+                    document.head.removeChild(newScript);
+                    setExternalNS(undefined);
+                };
+            }
+            return undefined;
+        }, [namespaceName, url]);
+        return externalNS;
+    }
+
+    const YMAPS_NAMESPACE = 'ymaps';
+    const useYandexMaps = () => {
+        const url = `https://api-maps.yandex.ru/2.1/?apikey=${projectSettings.YANDEX_MAP_API_KEY || ''}&lang=ru_RU`;
+        return useExternalNS(YMAPS_NAMESPACE, url);
+    };
+
+    const styles = {
+        focus: 'focus:border-primary-text 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 FULLSCREEN_STYLES = {
+        border: 'border border-transparent rounded-md ',
+        position: 'absolute flex items-center justify-center',
+        size: 'w-12 h-12',
+        focus: 'focus:border-primary-text 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(() => {
+            if (!map?.current) {
+                yandexMaps?.ready(() => {
+                    map.current = new yandexMaps.Map('map', {
+                        center: pointsCenter,
+                        zoom,
+                        controls: [],
+                        suppressMapOpenBlock: true,
+                    });
+                    renderClusterer(yandexMaps, map.current, pointsToRender);
+                });
+            }
+        }, [yandexMaps, map, pointsToRender]);
+        useEffect(() => {
+            if (map.current && pointsToRender && yandexMaps) {
+                const newPoints = pointsToRender.length < 1 ? normalizePoints(mockPoints) : pointsToRender;
+                renderClusterer(yandexMaps, map.current, newPoints);
+            }
+        }, [map, pointsToRender, yandexMaps]);
+        if (!yandexMaps) {
+            return null;
+        }
+        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-1/2 ${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 WrapperSelect = JSX(({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label }) => {
+        const dataFormat = data
+            .filter(Boolean)
+            .map((_) => ({ key: _?.[fieldValue || fieldLabel], text: _?.[fieldLabel] }));
+        const selectedObj = dataFormat.find((_) => _.key === selected);
+        return (jsx(Select, { options: dataFormat, label: label, placeholder: placeholder || selected, onChange: (_) => setSelected(_.key), value: selectedObj }));
+    });
+
+    const RegionsAndBranches = JSX(({ regions = [], selectedRegion, onSelectedRegion: onSelectedRegion, branches = [], selectedBranch, onSelectedBranch, }) => (jsxs("div", { className: "flex flex-col sm:flex-row gap-m order-1", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: regions, fieldValue: "code", fieldLabel: "name", selected: selectedRegion, setSelected: onSelectedRegion, label: "\u0420\u0435\u0433\u0438\u043E\u043D" }) }), jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: branches, fieldValue: "branchCode", fieldLabel: "address", selected: selectedBranch, setSelected: onSelectedBranch, label: "\u041E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435" }) })] })));
+
+    const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "font-sans flex items-center relative cursor-pointer", children: [jsx("input", { className: "appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-primary-hover\n        checked:border-2 checked:!border-primary-main focus:checked:border-primary-main focus:border-primary-text active:border-primary-text\n        after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main outline-none rounded-full cursor-pointer", type: "radio", value: value, name: name, checked: checked, onChange: (_) => onChange(_.target.value) }), text ? jsx("span", { className: "text-primary-text ml-3 cursor-pointer", children: text }) : null] }) })));
+
+    const RadioButtons = JSX(({ className }) => {
+        const [selectedOption, setSelectedOption] = useState('option2');
+        const onChange = useCallback((_) => setSelectedOption(_), []);
+        return (jsxs("div", { className: style('order-4', className), children: [jsx(Radio, { className: "mb-xs", name: "contractType", text: "\u041F\u0440\u043E\u0441\u0442\u043E\u0435 \u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435", value: "option1", checked: selectedOption === 'option1', onChange: onChange }), jsx(Radio, { name: "contractType", text: "\u0421\u0434\u0435\u043B\u043A\u0430 \u0441 \u043D\u0435\u0434\u0432\u0438\u0436\u0438\u043C\u043E\u0441\u0442\u044C\u044E", value: "option2", checked: selectedOption === 'option2', onChange: onChange })] }));
+    });
+
+    const ITEMS = ['От 1 дня', 'До 365 дней'];
+    const MIN = 1;
+    const MAX = 365;
+    const RentalPeriod = JSX(({ days, setDays }) => (jsxs("div", { className: "order-1", children: [jsx(Text, { size: "text-m", font: "font-light", children: "\u0421\u0440\u043E\u043A \u0430\u0440\u0435\u043D\u0434\u044B" }), jsx(InputRange, { min: MIN, max: MAX, value: days, items: ITEMS, onChange: setDays })] })));
+
+    const SafeBoxCases = JSX(({ caseVolumes = [], selectedCaseVolume, onSelectedCaseVolume, safeBoxCases = [], selectedBoxSize, onSelectedBoxSize, }) => {
+        return (jsxs("div", { className: "flex flex-col sm:flex-row gap-4 order-1", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: caseVolumes, fieldLabel: "volume", selected: selectedCaseVolume, setSelected: onSelectedCaseVolume, label: "\u0420\u0430\u0437\u043C\u0435\u0440", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0430\u0437\u043C\u0435\u0440" }) }), jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: safeBoxCases, fieldLabel: "safeBoxCasesSize", selected: selectedBoxSize, setSelected: onSelectedBoxSize, label: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B \u044F\u0447\u0435\u0439\u043A\u0438, \u043C\u043C (\u0412\u0445\u0428\u0445\u0414)", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440 \u044F\u0447\u0435\u0439\u043A\u0438" }) })] }));
+    });
+
+    const SafeDepositRentalFields = JSX(({ regions, selectedRegion, branches, selectedBranch, days, selectedCaseVolume, selectedBoxSize, safeBoxCases, caseVolumes, onChange, onClick, }) => {
+        return (jsxs("div", { className: "contents sm:block flex-1 space-y-xl", children: [jsx(RegionsAndBranches, { regions: regions, selectedRegion: selectedRegion, onSelectedRegion: (value) => onChange({ selectedRegion: value }), branches: branches, selectedBranch: selectedBranch, onSelectedBranch: onSelectedBranch(onChange) }), jsx(RentalPeriod, { days: days, setDays: (value) => onChange({ days: value }) }), jsx(SafeBoxCases, { caseVolumes: caseVolumes, selectedCaseVolume: selectedCaseVolume, onSelectedCaseVolume: onSelectedCaseVolume(onChange), safeBoxCases: safeBoxCases, selectedBoxSize: selectedBoxSize, onSelectedBoxSize: (value) => onChange({ selectedBoxSize: value }) }), jsx("div", { className: "order-4", children: jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: "\u0422\u0438\u043F \u0434\u043E\u0433\u043E\u0432\u043E\u0440\u0430" }) }), jsxs("div", { className: "contents sm:flex justify-between items-center", children: [jsx(RadioButtons, { className: "mb-4 sm:mb-0" }), jsx(Button, { text: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", version: "primary", onClick: onClick, className: "order-6" })] })] }));
+    });
+    const onSelectedBranch = (onChange) => (value) => {
+        onChange({ selectedBranch: value, selectedCaseVolume: '', selectedBoxSize: '' });
+    };
+    const onSelectedCaseVolume = (onChange) => (value) => {
+        onChange({ selectedCaseVolume: value, selectedBoxSize: '' });
+    };
+
+    const SafeDepositRentalTotal = JSX(({ days, tariffs = [] }) => {
+        const price = calculatePrice(days, tariffs);
+        const imageDescription = 'На рисунке изображена пачка листов\nформата А4';
+        return (jsxs("div", { className: "contents sm:flex flex-col justify-between order-2", children: [jsxs("div", { className: "flex flex-col sm:flex-row gap-x-11 gap-y-7 order-5 sm:order-none py-7 sm:py-0 border-t border-main-divider sm:border-none", children: [renderTotal('Аренда за', days), renderTotal('Цена', price + ' ₽')] }), jsx("span", { className: "sm:hidden order-3 mb-2 text-s-light text-secondary-text", children: imageDescription }), jsxs("div", { className: "flex flex-col items-center gap-3 order-3 sm:order-none mb-6 sm:mb-0 bg-primary-main py-3 sm:p-8 text-center", children: [jsx(Img, { image: { icon: 'PackA4Icon' }, className: "sm:h-[246px]" }), jsx("span", { className: "hidden sm:inline text-s font-light text-white opacity-80 whitespace-pre-line", children: imageDescription })] })] }));
+    });
+    const renderTotal = (label, total) => {
+        return (jsxs("div", { className: "flex justify-between items-center gap-y-1 sm:flex-col sm:items-start", children: [jsx("div", { className: "text-l font-light text-secondary-text", children: label }), jsx("span", { className: "text-l sm:text-h3 text-primary-text", children: total })] }));
+    };
+    const calculatePrice = (days, tariffs) => {
+        const tariffType = getTariffType(days);
+        const tariffValue = tariffs?.find((_) => _.tariffType === String(tariffType))?.tariffValue || 0;
+        return days * tariffValue;
+    };
+    const getTariffType = (days) => {
+        let tariffType = 1;
+        switch (true) {
+            case days > 30 && days <= 90:
+                tariffType = 2;
+                break;
+            case days > 90 && days <= 180:
+                tariffType = 3;
+                break;
+            case days > 180 && days <= 365:
+                tariffType = 4;
+                break;
+        }
+        return tariffType;
+    };
+
+    const getCoordinates = (data) => {
+        if (Array.isArray(data)) {
+            return data.map((_) => _.gpsLatitude && _.gpsLongitude ? [_.gpsLatitude, _.gpsLongitude] : []);
+        }
+        if (data?.gpsLatitude && data?.gpsLongitude) {
+            return [[data.gpsLatitude, data.gpsLongitude]];
+        }
+        return [];
+    };
+    const getBranch = (branches, selectedBranch) => branches.find((_) => _.branchCode === selectedBranch);
+
+    const SafeDepositRentalForm = JSX((props) => {
+        const { regions, data, branches, onChange, onClick } = props;
+        useEffect(() => {
+            onChange({
+                selectedBranch: '',
+                selectedCaseVolume: '',
+                selectedBoxSize: '',
+            });
+        }, [data.selectedRegion, onChange]);
+        const branch = getBranch(branches, data.selectedBranch);
+        const caseVolumes = getCaseVolumes(branch?.safeBoxCaseVolumes);
+        const safeBoxCases = getCaseVolume(branch?.safeBoxCaseVolumes, data.selectedCaseVolume)?.safeBoxCases;
+        const tariffs = getTariffs(safeBoxCases, data.selectedBoxSize);
+        return (jsxs("div", { className: "flex flex-col sm:flex-row gap-x-9 align-top mb-6", children: [jsx(SafeDepositRentalFields, { ...data, regions: regions, onClick: onClick, branches: branches, caseVolumes: caseVolumes, safeBoxCases: safeBoxCases, onChange: onChange }), jsx(SafeDepositRentalTotal, { days: data.days, tariffs: tariffs })] }));
+    });
+    const getCaseVolumes = (safeBoxCaseVolumes) => safeBoxCaseVolumes?.length ? safeBoxCaseVolumes?.filter((_) => _?.safeBoxCases?.length) : [];
+    const getCaseVolume = (caseVolumes, selectedCaseVolume) => caseVolumes?.find((_) => _.volume === selectedCaseVolume);
+    const getTariffs = (safeBoxCases, selectedBoxSize) => safeBoxCases?.find((_) => _.safeBoxCasesSize === selectedBoxSize)?.tariffs;
+
+    const SAFEBOXES_URL = '/api/v1/safeboxes';
+    const EMPTY_VALUE = [];
+    function useSafeBoxes(regionCode) {
+        const { data } = useAsyncData(regionCode ? `${SAFEBOXES_URL}?regionCode=${regionCode}` : null, fetchSafeBoxes);
+        return data || EMPTY_VALUE;
+    }
+    const fetchSafeBoxes = async (url) => {
+        const result = await fetchJSON(url, { method: 'GET' });
+        return result || EMPTY_VALUE;
+    };
+
+    const DEFAULT_DAYS = 26;
+    const SafeDepositRental = JSX(({ title, footnote, className = '', ...rest }) => {
+        const [showMap, setShowMap] = useState(false);
+        const handleShowMap = useCallback(() => setShowMap((_) => !_), []);
+        const [safeDepositState, setStateDepositState] = useState({
+            selectedRegion: '',
+            selectedBranch: '',
+            selectedCaseVolume: '',
+            selectedBoxSize: '',
+            days: DEFAULT_DAYS,
+        });
+        const regions = useGetRegions();
+        const selectedRegion = normalizeSelectedRegion(safeDepositState.selectedRegion, regions);
+        const branches = useSafeBoxes(selectedRegion);
+        const handleChangeSafeDepositState = useCallback((state) => setStateDepositState((oldState) => ({ ...oldState, ...state })), [setStateDepositState]);
+        const points = getCoordinates(getBranch(branches, safeDepositState.selectedBranch) || branches);
+        return (jsxs(BlockWrapper, { className: className, defaultPadding: "", ...rest, children: [jsxs("div", { className: "p-4xl", children: [title ? (jsx(Heading, { title: title, headingType: "h3", as: "h2", className: "text-primary-text mb-s text-center" })) : null, jsx(SafeDepositRentalForm, { regions: regions, branches: branches, data: { ...safeDepositState, selectedRegion }, onClick: handleShowMap, onChange: handleChangeSafeDepositState }), footnote ? (jsx(Paragraph, { size: "text-s", font: "font-light", children: footnote })) : null] }), points.length && showMap ? jsx(YandexMap, { points: points, className: "h-[640px]" }) : null] }));
+    });
+    const normalizeSelectedRegion = (selectedRegion, regions) => !selectedRegion && regions?.length && regions[0]?.code ? regions[0].code : selectedRegion;
+
     function assertUnreachable(x) {
         throw new Error(x);
     }
@@ -2314,7 +2898,6 @@
         const { tabs, ...rest } = props;
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount: tabs?.length || 0,
-            isCyclic: false,
         });
         return (jsxs("div", { className: "relative max-w-full m-auto", children: [jsx("div", { className: `font-sans max-w-full w-full overflow-hidden relative bg-white`, children: jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: tabs?.map(renderTab({ ...rest })) }) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-6`, onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle} rotate-180 right-6`, onClick: scroll.scrollRight })) : null] }));
     });
@@ -2410,31 +2993,6 @@
         return (jsx("ul", { className: style('text-secondary-text group-data-secondary:text-white/80', listStyle), children: items.map((_, i) => (jsx("li", { children: jsx(Text, { size: "text-s", font: "font-light", children: _ }) }, `listItem-${i}`))) }));
     };
 
-    const gapStyles = {
-        XXL: 'gap-6xl',
-        XL: 'gap-5xl',
-        L: 'gap-3xl',
-        M: 'gap-m',
-        S: 'gap-xs',
-        XS: 'gap-2xs',
-        '': '',
-    };
-
-    const alignStyle = {
-        stretch: 'items-stretch',
-        left: 'items-start',
-        center: 'items-center',
-        right: 'items-end',
-    };
-    const VerticalLayout = JSX(({ className = '', gap = '', align = 'stretch', isPadding = false, isInnerPadding = true, version = 'transparent', isTheme = false, ...rest }) => {
-        const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
-        return (jsx(BlockWrapper, { className: style('relative', 'flex flex-col [&>*]:max-w-full', gapStyles[gap], align && alignStyle[align], className), defaultPadding: isPadding ? 'p-6xl' : '', version: version, isTheme: isTheme, ...rest, children: renderChildren({
-                ...rest,
-                renderProps: (block, options) => renderBlock(block, options, { className: innerPaddingStyle }),
-            }) }));
-    });
-    VerticalLayout.childrenTypes = [];
-
     const Blocks = {
         ApplicationForm,
         ButtonsBlock,
@@ -2450,6 +3008,7 @@
         Footer,
         Header,
         Headline,
+        HorizontalLayout,
         ImgBlock,
         LinkDocs,
         MobileAppTile,
@@ -2462,13 +3021,61 @@
         TextBlock,
         RichTextBlock,
         RollupItem,
+        SafeDepositRental,
         VerticalLayout,
         CarouselRecommendationCard,
+        ExchangeRateTile,
         CarouselProgramsCard,
         ProductGallery,
         BenefitsBlock,
     };
 
+    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';
+    function useLocation(defaultLocation = 'Москва') {
+        const currentLocation = getLocalStorageLocation();
+        const [location, setLocation] = useState(currentLocation?.region ?? { name: defaultLocation });
+        const { data } = useCachedAsyncData(REGION_URL, fetchJSONUnsafe);
+        useEffect(() => {
+            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);
+        }, []);
+        return [location, onChangeLocation];
+    }
+    const getLocalStorageLocation = () => {
+        const localStorageLocation = globalThis.localStorage?.getItem('location');
+        try {
+            return localStorageLocation ? JSON.parse(localStorageLocation) : null;
+        }
+        catch (_) {
+            return null;
+        }
+    };
+
     const debounce = (fn, delay = 600) => {
         let timerId;
         const debouncedCallback = (...args) => {
@@ -2597,6 +3204,269 @@
     });
     const getStyleLinkWrapper = (href) => ['inline mx-1', href ? 'text-green-dark' : ''];
 
+    const REGIONS_URL = '/api/v1/regions';
+    function useRegions() {
+        const { data } = useAsyncData(REGIONS_URL, fetchJSONUnsafe);
+        return data || [];
+    }
+
+    const JARO_WINKLER_P = 0.1;
+    const JARO_WINKLER_MAX_L = 4;
+    const jaroWinklerDistance = (s1) => (s2) => {
+        if (s1 === s2) {
+            return 1;
+        }
+        if (!s1 || !s2) {
+            return 0;
+        }
+        const { m, s1Matches, s2Matches } = computeM(s1, s2);
+        if (m === 0) {
+            return 0;
+        }
+        const t = computeT(s1, s2, { s1Matches, s2Matches });
+        const jaroWeight = (m / s1.length + m / s2.length + (m - t / 2) / m) / 3;
+        const winklerWeight = jaroWeight > 0.7 ? computePrefixL(s1, s2) * JARO_WINKLER_P : 0;
+        return jaroWeight + winklerWeight * (1 - jaroWeight);
+    };
+    function computeM(s1, s2) {
+        const range = Math.max(0, Math.floor(Math.max(s1.length, s2.length) / 2) - 1);
+        const s1Matches = new Array(s1.length);
+        const s2Matches = new Array(s2.length);
+        let m = 0;
+        for (let i = 0; i < s1.length; i++) {
+            const low = Math.max(0, i - range);
+            const high = Math.min(i + range, s2.length - 1);
+            for (let j = low; j <= high; j++) {
+                if (s1Matches[i] || s2Matches[j] || s1[i] !== s2[j]) {
+                    continue;
+                }
+                m++;
+                s1Matches[i] = true;
+                s2Matches[j] = true;
+            }
+        }
+        return { m, s1Matches, s2Matches };
+    }
+    function computeT(s1, s2, { s1Matches, s2Matches }) {
+        let t = 0;
+        for (let i = 0, k = 0; i < s1.length; i++) {
+            if (!s1Matches[i]) {
+                continue;
+            }
+            let j = k;
+            for (; j < s2.length; j++) {
+                if (s2Matches[j]) {
+                    k = j + 1;
+                    break;
+                }
+            }
+            if (s1[i] !== s2[j]) {
+                t++;
+            }
+        }
+        return t;
+    }
+    function computePrefixL(s1, s2) {
+        let prefixL = 0;
+        while (s1[prefixL] === s2[prefixL] && prefixL < JARO_WINKLER_MAX_L) {
+            prefixL++;
+        }
+        return prefixL;
+    }
+
+    const groupBy = (list, keyGetter) => {
+        const result = new Map();
+        for (const item of list) {
+            const key = keyGetter(item);
+            const group = result.get(key) || [];
+            result.set(key, [...group, item]);
+        }
+        return result;
+    };
+
+    const Dialog = JSX(({ className, isOpened, head, children, onClose }) => {
+        useEffect(() => {
+            const handleEscape = ({ key }) => {
+                if (key === 'Escape') {
+                    onClose && onClose();
+                }
+            };
+            globalThis.document?.addEventListener('keydown', handleEscape);
+            return () => {
+                globalThis.document?.removeEventListener('keydown', handleEscape);
+            };
+        }, [onClose]);
+        return isOpened ? (jsx("div", { className: style('fixed inset-0 bg-white text-l font-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar', className), role: "dialog", children: jsxs("div", { className: "relative container pb-6xl min-h-full", children: [jsxs("div", { className: "sticky bg-white pt-xl top-0", children: [jsx(CloseButton, { className: "absolute top-0 -right-6xl", onClick: onClose }), head] }), children] }) })) : null;
+    });
+
+    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-44 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-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text`, value: searchTerm, onChange: (e) => onSearch(e.target.value.toLowerCase()), type: "text", name: "location-search-bar-input" })] }));
+    });
+
+    const SEARCH_TERM_MIN_LENGTH = 3;
+    const LOCATION_DIALOG_ID = 'location';
+    const LocationDialog = JSX(({ currentLocation, onChangeLocation, foreignOffices }) => {
+        const dialogProps = useDialogProps(LOCATION_DIALOG_ID);
+        const [query, setQuery] = useState('');
+        const regions = cleanUpRegions(useRegions()).sort((a, b) => a.name.localeCompare(b.name));
+        const regionsGroupByLetter = groupBy(regions, regionFirstLetter);
+        const handleChangeLocation = useCallback((region) => {
+            dialogProps.onClose && dialogProps.onClose();
+            onChangeLocation && onChangeLocation(region);
+        }, [dialogProps.onClose, onChangeLocation]);
+        return (jsxs(Dialog, { ...dialogProps, head: jsxs("div", { children: [jsx(CurrentLocation, { currentLocation: currentLocation, onChangeLocation: handleChangeLocation }), jsx(SearchBar, { onSearch: setQuery, searchTerm: query })] }), children: [query && query.length >= SEARCH_TERM_MIN_LENGTH ? (jsx("div", { children: regions
+                        .filter(({ name }) => name && jaroWinklerDistance(name.toLowerCase())(query.toLowerCase()) >= 0.8)
+                        .map(renderRegion(handleChangeLocation)) })) : (jsx("div", { className: "columns-5", children: Array.from(regionsGroupByLetter.entries()).map(renderRegionGroup(handleChangeLocation)) })), 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, onChangeLocation }) => 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: () => {
+                    onChangeLocation && onChangeLocation(currentLocation);
+                }, children: jsx(Text, { color: "text-primary-main", children: currentLocation.name }) })] })) : null);
+    const renderRegionGroup = (onChangeLocation) => ([letter, regions]) => (jsxs("div", { className: "break-inside-avoid mb-2xl w-56", children: [jsx("div", { className: "mb-s", children: jsx(Text, { size: "text-h6", children: letter }) }), regions.map(renderRegion(onChangeLocation))] }, letter));
+    const renderRegion = (onChangeLocation) => (region) => (jsx("div", { className: "mb-2xs", children: jsx("button", { className: "cursor-pointer hover:text-primary-hover", onClick: () => {
+                onChangeLocation && onChangeLocation(region);
+            }, children: region.name || '' }) }, region.id));
+    const ForeignOffices = JSX(({ foreignOffices }) => foreignOffices?.length ? (jsxs("div", { className: "border-t border-main-divider mt-2xs pt-2xs", children: [jsx("div", { className: "mb-m", children: jsx(Text, { size: "text-m", font: "font-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: [icon ? jsx(Img, { pathPrefix: "/wcms-resources/", image: icon }) : null, text ? (jsx("a", { className: "hover:text-primary-hover", href: href, target: target, onClick: onClick, children: text })) : null] }));
+    });
+
+    const compareBy = (indexOf) => (a, b) => indexOf(a) - indexOf(b);
+    const desc = (cmp) => (a, b) => -cmp(a, b);
+
+    function zip(firstCol, ...restCols) {
+        return firstCol.map((firstEl, rowIndex) => [firstEl, ...restCols.map((col) => col[rowIndex])]);
+    }
+
+    const joinMaps = (aggregate, emptyVal) => (acc, map) => {
+        for (const [key, b] of map) {
+            acc.set(key, aggregate(acc.get(key) || emptyVal, b));
+        }
+        return acc;
+    };
+
+    const MIN_TERM_LEN = 3;
+    const tokenize = (text) => text
+        .toLowerCase()
+        .split(/[^0-9a-zа-я-]+/)
+        .filter((token) => token.length >= MIN_TERM_LEN && !/[0-9a-z]/.test(token));
+
+    const textRank = (queryTokens) => (text) => {
+        const textTokens = tokenize(text || '');
+        return textTokens.length
+            ? sum(queryTokens.map((qToken) => max(textTokens.map(jaroWinklerDistance(qToken)))))
+            : 0;
+    };
+
+    const JW_THRESHOLD = 0.8;
+    const RANK_EPS = 0.001;
+    const search = (query) => (searchIndex) => {
+        const { corpus, dictionary } = searchIndex || {};
+        if (!query || !corpus?.length || !dictionary || !Object.keys(dictionary).length) {
+            return [];
+        }
+        const queryTokens = tokenize(query);
+        if (!queryTokens.length) {
+            return [];
+        }
+        const dictEntries = Object.entries(dictionary);
+        const pagesRanking = queryTokens
+            .map(computePagesRankingPerToken(dictEntries))
+            .reduce(joinMaps((a, b) => a + b, 0), new Map());
+        const relevantPages = [...pagesRanking.entries()]
+            .filter(([, pageRank]) => pageRank >= (JW_THRESHOLD - RANK_EPS) * queryTokens.length) // Multiplication of query tokens
+            .map(([pageIndex]) => corpus[pageIndex]);
+        return sortResultsByRank(queryTokens)(relevantPages);
+    };
+    const computePagesRankingPerToken = (dictEntries) => (qToken) => dictEntries
+        .map(([stem, pageIndices]) => [jaroWinklerDistance(qToken)(stem), pageIndices])
+        .filter(([stemRank]) => stemRank >= JW_THRESHOLD)
+        .map(([stemRank, pageIndices]) => fillMapWith(pageIndices, stemRank))
+        .reduce(joinMaps(Math.max, 0), new Map());
+    const sortResultsByRank = (queryTokens) => (results) => zip(results, results.map(({ title }) => title).map(textRank(queryTokens)))
+        .sort(desc(compareBy(([, pageTitleRank]) => pageTitleRank)))
+        .map(([corpusItem]) => corpusItem);
+    const fillMapWith = (keys, value) => new Map(keys.map((_) => [_, value]));
+
+    const SEARCH_INDEX_FILENAME = 'search.index.json';
+    const DEFAULT_BASE_PATH = ['/'];
+    const useSearch = ({ basePathList = DEFAULT_BASE_PATH, initialQuery = '', wasOpened, }) => {
+        const [query, setQuery] = useState(initialQuery || '');
+        useEffect(() => {
+            if (initialQuery !== undefined && initialQuery !== null) {
+                setQuery(initialQuery);
+            }
+        }, [initialQuery]);
+        const key = useMemo(() => basePathList.map((_) => (wasOpened ? _ : null)), // Load search index on very first search
+        [wasOpened, basePathList]);
+        const { data } = useAsyncData(key, fetchSearchIndex);
+        const [result, setResult] = useState(null);
+        useDebouncedEffect(() => {
+            if (data) {
+                setResult(data.map(search(query)));
+            }
+        }, [data, query]);
+        return [result, { value: query, onChange: setQuery }];
+    };
+    const fetchSearchIndex = async (...basePathList) => (await Promise.allSettled(basePathList.map((basePath) => fetchJSON(joinPath(basePath, '/', SEARCH_INDEX_FILENAME))))).map((_) => (_.status === 'fulfilled' ? _.value : {}));
+
+    const Sitemap = JSX(({ className, topItems }) => {
+        const link = useLink({ isRemote: true });
+        return (jsx("div", { className: style('flex items-start justify-between', className), children: topItems?.map(link).map(renderColumn) }));
+    });
+    const renderColumn = (menuItem, index) => {
+        const { text, items, href, target, onClick } = menuItem;
+        return (jsxs("div", { className: "flex flex-col gap-3.5 w-1/4", children: [jsx("a", { className: "leading-5 text-l text-primary-text hover:text-primary-main no-underline", href: href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }), items?.map((_, i) => (jsx(ColumnItem, { ..._, basePath: appendSlash(href), index: i }, String(i))))] }, String(index)));
+    };
+    const ColumnItem = JSX(({ text, index, basePath, ...rest }) => {
+        const isAnotherPortal = projectSettings.BASE_PATH && basePath ? !projectSettings.BASE_PATH.startsWith(basePath) : false;
+        const link = useLink({ isRemote: isAnotherPortal, basePath });
+        const { href, target, onClick } = link(rest);
+        return (jsx("a", { className: style('text-l font-light text-secondary-text hover:text-primary-main no-underline', 'overflow-x-hidden overflow-ellipsis whitespace-nowrap'), href: href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }));
+    });
+
+    const SearchInput = JSX(({ className, value, autoFocus, onChange, onFocus }) => {
+        const handleChange = useCallback((ev) => {
+            onChange && onChange(ev.target?.value || '');
+        }, [onChange]);
+        return (jsxs("div", { className: style('font-sans relative', className), role: "form", children: [jsx("div", { className: "absolute h-full flex items-center pl-m pointer-events-none", children: jsx(Img, { image: { icon: 'LoupeIcon' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-12 pl-12 w-full text-l text-black outline-none box-border', 'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'), value: value, type: "text", name: "search-bar-input", placeholder: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", autoFocus: autoFocus, onChange: handleChange, onFocus: onFocus })] }));
+    });
+
+    const SEARCH_DIALOG_ID = 'search';
+    const SearchDialog = JSX(({ topItems }) => {
+        const dialogProps = useDialogProps(SEARCH_DIALOG_ID);
+        const basePathList = useMemo(() => topItems?.map((_) => _.href || '/'), [topItems]);
+        const [searchResult, searchInputProps] = useSearch({
+            basePathList,
+            initialQuery: dialogProps.message,
+            wasOpened: dialogProps.wasOpened,
+        });
+        const searchItems = useMemo(() => combineTopItemsAndSearchResult(topItems)(searchResult), [topItems, searchResult]);
+        useEffect(() => printSearchItems(searchItems), [searchItems]); // Temp
+        return (jsx(Dialog, { ...dialogProps, head: jsx(SearchInput, { autoFocus: true, ...searchInputProps }), children: jsx(Sitemap, { topItems: searchItems }) }));
+    });
+    const combineTopItemsAndSearchResult = (topItems) => (searchResult) => topItems?.length && searchResult?.length
+        ? zip(topItems, searchResult).map(([_, portalSearchResult]) => ({
+            ..._,
+            items: portalSearchResult?.map(({ title, uri }) => ({ text: title, href: joinPath('/', uri) })),
+        }))
+        : [];
+    // Temp
+    function printSearchItems(topItems) {
+        for (const _ of topItems.filter(({ items }) => items?.length)) {
+            console.group(_.text);
+            console.table(_.items, ['text', 'href']);
+            console.groupEnd();
+        }
+    }
+
     const api = LikeAPI();
     function useLikeService(pagePath) {
         const [likeCount, setLikeCount] = useState(0);
@@ -2638,9 +3508,8 @@
         return (jsxs("div", { className: `border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${className}`, children: [jsx(LikeButton, { onClick: handlerDecorator(likeService.like), ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u043B\u0430\u0439\u043A\u00BB" }), jsx(LikeButton, { onClick: handlerDecorator(likeService.dislike), className: "rotate-180", ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u0434\u0438\u0437\u043B\u0430\u0439\u043A\u00BB" }), jsx("span", { className: "select-none", children: likeService.likeCount })] }));
     });
 
-    const ContentPage = JSX((props) => {
-        const { className = '', blocksRegistry, blockDecorator, data = {} } = props;
-        const { style: pageStyle, blocks, slots, likeControl, colorPalette = 'pc' } = data;
+    const ContentPage = JSX(({ className, blocksRegistry, blockDecorator, data = {} }) => {
+        const { style: pageStyle, slots, likeControl, colorPalette = 'pc' } = data;
         const options = {
             key: '',
             page: data,
@@ -2648,21 +3517,23 @@
             blockDecorator,
             parent: data,
         };
+        const sitemap = useSWRResource(projectSettings.SITEMAP || 'sitemap', data?.fallback);
+        const [location, onChangeLocation] = useLocation(sitemap?.defaultLocation);
         useBlockRouterProvider();
         const [isSomeDialogOpened, { setTrue: setSomeDialogOpened, setFalse: resetSomeDialogOpened }] = useBool();
         useDialogHandlers({
             onOpen: setSomeDialogOpened,
             onClose: resetSomeDialogOpened,
         });
-        return (jsxs("section", { className: style('relative', pageStyle, className, isSomeDialogOpened ? 'overflow-hidden h-screen' : ''), "data-theme": colorPalette, children: [slots?.header ? (jsx("div", { className: "mb-5 shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, {
+        return (jsxs("section", { className: style('relative @container', pageStyle, className, isSomeDialogOpened ? 'overflow-hidden h-screen' : ''), "data-theme": colorPalette, children: [slots?.header ? (jsx("div", { className: "relative z-10 mb-5 shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, {
                         ...options,
                         slotName: 'header',
-                    }) })) : null, jsxs("div", { className: "container grid grid-cols-12 gap-1", children: [renderBlocksList(blocks, options), slots?.footer
-                            ? renderBlocksList(slots?.footer, {
-                                ...options,
-                                slotName: 'footer',
-                            })
-                            : null] }), likeControl ? renderLikeControl() : null, jsx(CookiePopup, { termLink: { href: '/pd-policy#cookie', target: '_blank' }, personalDataPolicyLink: { href: '/pd-policy', target: '_blank' } })] }));
+                        extraProps: { sitemap, location },
+                    }) })) : null, jsxs("div", { className: "container @lg:grid @lg:grid-cols-12 @lg:gap-1", children: [renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } }), renderBlocksList(slots?.footer, {
+                            ...options,
+                            slotName: 'footer',
+                            extraProps: { sitemap, location },
+                        })] }), likeControl ? renderLikeControl() : null, jsx(CookiePopup, { termLink: { href: '/pd-policy#cookie', target: '_blank' }, personalDataPolicyLink: { href: '/pd-policy', target: '_blank' } }), jsx(SearchDialog, { topItems: sitemap?.topItems }), jsx(LocationDialog, { currentLocation: location, foreignOffices: sitemap?.foreignOffices, onChangeLocation: onChangeLocation })] }));
     });
     ContentPage.childrenTypes = [];
     ContentPage.slots = () => ['header', 'footer'];
@@ -2672,7 +3543,7 @@
 
     const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
 
-    const packageVersion = "0.12.11";
+    const packageVersion = "0.12.13";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;