@redneckz/wildless-cms-uni-blocks 0.8.27 → 0.8.29

package/bundle/bundle.umd.js

@@ -365,15 +365,16 @@
         transparent: 'bg-transparent text-primary-text',
         '': '',
     };
-    const BlockWrapper = JSX(({ className = '', version = 'primary', block, tag = 'section', role, isTheme = true, children, }) => {
+    const BlockWrapper = JSX(({ className = '', version = 'primary', block, tag = 'section', role, isTheme = true, extraProps = {}, children, }) => {
         const Tag = tag;
         const ref = useBlockIntersectionObserver(block);
         const [isHidden, setHidden] = useState(false);
         useEffect(() => defaultEventBus.subscribe('tab', (event) => {
             setHidden(Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)));
         }), [block]);
-        return (jsx(Tag, { className: style(isTheme ? 'group' : '', blockStyles[version], isHidden ? 'hidden' : '', className), ...(version && isTheme ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
+        return (jsx(Tag, { className: style(groupStyle(Boolean(version && isTheme)), blockStyles[version], isHidden ? 'hidden' : '', className), ...(version && isTheme ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, ...extraProps, children: children }));
     });
+    const groupStyle = (isGroup) => (isGroup ? 'group' : '');
 
     const styles$4 = {
         h0: 'text-h0',
@@ -493,7 +494,7 @@
 
     async function fetchJSON(url, options) {
         try {
-            return await fetchJSONUnsafe(url, options);
+            return url ? await fetchJSONUnsafe(url, options) : null;
         }
         catch (err) {
             console.error(err);
@@ -1195,10 +1196,10 @@
         XS: 'text-xs-light',
     };
 
-    const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, isPadding = true, ...rest }) => {
+    const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, isPadding = true, isTheme = false, version = '', ...rest }) => {
         const versionStyle = headlineVersionStyles[headlineVersion];
         const paddingStyle = isPadding ? 'p-12' : '';
-        return (jsxs(BlockWrapper, { className: style('flex flex-col group-data-secondary:bg-primary-main group-data-secondary:text-white', paddingStyle, versionStyle.wrapper, className), ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { color: "group-data-secondary:text-white/80", size: versionStyle.descriptionSize, align: align, children: description })) : null] }));
+        return (jsxs(BlockWrapper, { className: style('flex flex-col', paddingStyle, versionStyle.wrapper, className), version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { color: "group-data-secondary:text-white/80", size: versionStyle.descriptionSize, align: align, children: description })) : null] }));
     });
 
     const Bonus = JSX((props) => {
@@ -1246,13 +1247,12 @@
     const ButtonBlock = JSX(({ button, className, ...rest }) => (jsx(BlockWrapper, { className: style('!bg-transparent', className), ...rest, children: renderButtonsSection([button]) })));
 
     const useCarouselControls = (props) => {
-        const { itemCount, visibleItemCount, isCyclic } = props;
+        const { itemCount, visibleItemCount } = props;
         const [activeIndex, setActiveIndex] = useState(0);
-        const inc = useCallback(() => setActiveIndex((_) => (isCyclic ? (_ + 1) % itemCount : Math.min(_ + 1, itemCount - 1))), [isCyclic, itemCount]);
-        const dec = useCallback(() => setActiveIndex((_) => (isCyclic ? (itemCount + _ - 1) % itemCount : Math.max(_ - 1, 0))), [isCyclic, itemCount]);
-        const canInc = isCyclic ||
-            (isScrollable(activeIndex, props) && activeIndex < itemCount - (visibleItemCount || 1));
-        const canDec = isCyclic || activeIndex > 0;
+        const inc = useCallback(() => setActiveIndex((_) => Math.min(_ + 1, itemCount - 1)), [itemCount]);
+        const dec = useCallback(() => setActiveIndex((_) => Math.max(_ - 1, 0)), [itemCount]);
+        const canInc = isScrollable(props) && activeIndex < itemCount - (visibleItemCount || 1);
+        const canDec = activeIndex > 0;
         const isScrollAvailable = canDec || canInc;
         return [
             activeIndex,
@@ -1265,15 +1265,8 @@
             },
         ];
     };
-    function isScrollable(activeIndex, { itemCount, visibleItemCount, container }) {
-        if (visibleItemCount) {
-            return itemCount > visibleItemCount;
-        }
-        if (container) {
-            const scrollLeft = (container.scrollWidth * activeIndex) / itemCount;
-            return scrollLeft + container.clientWidth < container.scrollWidth;
-        }
-        return false;
+    function isScrollable({ itemCount, visibleItemCount }) {
+        return Boolean(visibleItemCount && itemCount > visibleItemCount);
     }
 
     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
@@ -1460,6 +1453,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(_));
 
@@ -2080,7 +2074,7 @@
         normal: 'min-w-[970px]',
         small: 'min-w-[355px]',
     };
-    const CarouselCard = JSX(({ className = '', button, description, title, carouselVersion = 'normal' }) => (jsx("section", { className: `flex pb-9 pl-12 border-box h-full ${CARD_WIDTH_MAP[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: "L", align: "text-left" }), renderButtonsSection([button], { className: 'mt-14' })] })] }) })));
+    const CarouselCard = JSX(({ className = '', button, description, title, carouselVersion = 'normal', version = '' }) => (jsx("section", { className: `flex pb-9 pl-12 border-box h-full ${CARD_WIDTH_MAP[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: "L", align: "text-left", version: version }), renderButtonsSection([button], { className: 'mt-14' })] })] }) })));
 
     const cardStyleMap = {
         black: 'bg-black',
@@ -2167,7 +2161,12 @@
     const renderAdditionalDescription$1 = (additionalDescription) => additionalDescription ? (jsx("div", { className: "mt-auto", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", children: additionalDescription }) })) : null;
     const renderItems = (items, isDotted, version = 'primary') => items?.length ? (jsx(List, { className: `max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "text-left", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted })) : null;
 
-    const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], ...rest }) => (jsxs(BlockWrapper, { className: `border border-gray flex min-w-[536px] ${className}`, ...rest, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: " mb-3.5", headingType: "h5", title: title }) : null, list.length ? jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$1) }) : null] })] })));
+    const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], href, target, ...rest }) => {
+        const link = useLink();
+        const adjustedProps = link({ href, target });
+        const tagName = href ? 'a' : 'section';
+        return (jsxs(BlockWrapper, { tag: tagName, className: style('border border-gray flex min-w-[536px]', className), extraProps: adjustedProps, ...rest, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: " mb-3.5", headingType: "h5", title: title }) : null, list.length ? jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$1) }) : null] })] }));
+    });
     const renderList$1 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: `text-h6`, children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
 
     const ICONS_MAP = [
@@ -2206,24 +2205,30 @@
         default: 'w-14 h-14',
         small: 'w-12 h-12',
     };
+    const buttonStylesWithText = (text, buttonSize) => text
+        ? ''
+        : `group/media flex items-center justify-center box-border ${buttonSizeStyles[buttonSize]}`;
     const MediaButton = JSX(({ iconVersion = 'color', buttonSize = 'default', rounded = false, icon, ...rest }) => {
-        const { href, version } = rest;
+        const { href, version, text, appendLeft, appendRight, aboveText } = rest;
         const { iconMapped, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
         const iconCustom = icon ?? iconMapped;
         const iconWithVersion = iconCustom
             ? { ...getIconWithVersion(iconCustom), iconVersion }
             : undefined;
-        return (jsx(Button, { className: style('group/media flex items-center justify-center box-border', buttonSizeStyles[buttonSize], rounded ? 'rounded-full' : 'rounded-md', 'border border-solid hover:border-transparent', 'group-data-primary:border-main-divider', 'hover:bg-primary-main hover:text-black', 'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover', 'group-data-gray:border-green', buttonSizeStyles[buttonSize]), "aria-label": label, target: "_blank", rel: "noopener noreferrer", version: version, ...rest, children: iconWithVersion ? (jsx(ImgInner, { image: iconWithVersion, imageClassName: "group-hover/media:text-white", width: "24", height: "24", asSVG: true })) : null }));
+        return (jsx(Button, { className: style(rounded ? 'rounded-full' : 'rounded-md', 'border border-solid hover:border-transparent', 'group-data-primary:border-main-divider', 'hover:bg-primary-main hover:text-black', 'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover', 'group-data-gray:border-green', buttonStylesWithText(text, buttonSize)), aboveText: aboveText, appendLeft: appendLeft, appendRight: appendRight, "aria-label": label, rel: "noopener noreferrer", target: "_blank", text: text, version: version, ...rest, children: iconWithVersion && !text ? (jsx(ImgInner, { image: iconWithVersion, imageClassName: "group-hover/media:text-white", width: "24", height: "24", asSVG: true })) : null }));
     });
 
-    const SocialMedia = JSX(({ className = '', media, children, buttonSize }) => (jsxs("div", { className: "font-sans", children: [jsx("div", { className: `flex gap-2.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { buttonSize: buttonSize, version: _.version, ..._ }, String(index)))) }), jsx(Text, { size: "text-s-light", color: "text-secondary-text", children: children })] })));
+    const SocialMedia = JSX(({ className = '', media, children, buttonSize }) => (jsxs("div", { className: "font-sans", children: [jsx("div", { className: `flex gap-1 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { aboveText: _.aboveText, appendLeft: _.appendLeft, appendRight: _.appendRight, buttonSize: buttonSize, text: _.text, version: _.version, ..._ }, String(index)))) }), jsx(Text, { size: "text-s-light", color: "text-secondary-text", children: children })] })));
 
-    const CarouselRecommendationCard = JSX(({ className = '', description, image, items = [], socialMedia = [], title, version = 'primary', ...rest }) => {
-        const tileTitle = title ? (jsx(Heading, { headingType: "h5", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
-        const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
-        const BORDER_STYLE = 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
-        return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] h-full text-left box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), version: version, ...rest, children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? (jsx("span", { className: "mb-2 group-data-gray:text-secondary-text group-data-gray:max-w-[265px]", children: description })) : null, items.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia }) : null] }) }) }));
+    const BORDER_STYLE = 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
+    const setAdditionalIconStyles = (items) => items.length ? 'w-1/2 flex-1 justify-center' : 'w-full justify-end';
+    const CarouselRecommendationCard = JSX(({ className = '', description, href, icon, items = [], socialMedia = [], target, title, version = 'primary', ...rest }) => {
+        const link = useLink();
+        const adjustedProps = link({ href, target });
+        const tagName = href ? 'a' : 'section';
+        return (jsxs(BlockWrapper, { className: style('relative p-12 min-w-[524px] h-full flex flex-col box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), extraProps: adjustedProps, tag: tagName, version: version, ...rest, children: [jsx("div", { className: "self-center", children: title ? jsx(Heading, { headingType: "h3", as: "h3", className: "mb-8", title: title }) : null }), jsx("div", { className: "mb-5", children: description ? (jsx(Paragraph, { size: "text-xl", font: "font-light", color: "group-data-gray:text-secondary-text", children: description })) : null }), jsxs("div", { className: "flex align-center w-full", children: [jsxs("div", { className: "w-1/2 h-full flex flex-col flex-1 justify-end", children: [items.length ? (jsx(List, { className: "text-xl-light flex flex-col gap-2 pb-16 mb-3", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pb-0", media: socialMedia }) : null] }), renderIconBlock$1(icon, items)] })] }));
     });
+    const renderIconBlock$1 = (icon, items) => (jsxs("div", { className: style('flex', setAdditionalIconStyles(items)), children: [icon?.icon ? jsx(ImgInner, { image: getIconWithVersion(icon), asSVG: true }) : null, icon?.src ? jsx(ImgInner, { image: icon }) : null] }));
 
     const Foldable = JSX(({ className = '', isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
         const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
@@ -2343,7 +2348,7 @@
         return null;
     };
     const getErrorBlockStyle = (text) => (text ? 'py-20 pt-3 pb-1' : 'mb-16 pb-2 mt-24 pt-3');
-    const ErrorBlock = JSX(({ className = '', title, subtitle, error, button }) => (jsxs("section", { className: style('flex flex-col justify-center items-center', getErrorBlockStyle(button?.text), className), children: [jsx("div", { className: "flex justify-center py-20", children: renderErrorContent(error) }), title ? jsx(Heading, { headingType: "h1", className: "text-left mb-4", title: title }) : null, subtitle ? (jsx("div", { className: "font-sans text-xl-light mb-7 max-w-[613px] text-center", children: subtitle })) : null, button?.text ? (jsx(Button, { className: "py-4 px-9", version: button?.version, ...button, children: button.text })) : null] })));
+    const ErrorBlock = JSX(({ className = '', title, subtitle, error, button, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col justify-center items-center', getErrorBlockStyle(button?.text), className), version: "transparent", ...rest, children: [jsx("div", { className: "flex justify-center py-20", children: renderErrorContent(error) }), title ? jsx(Heading, { headingType: "h1", className: "text-left mb-4", title: title }) : null, subtitle ? (jsx("div", { className: "font-sans text-xl-light mb-7 max-w-[613px] text-center", children: subtitle })) : null, button?.text ? (jsx(Button, { className: "py-4 px-9", version: button?.version, ...button, children: button.text })) : null] })));
 
     var Currency;
     (function (Currency) {
@@ -2553,29 +2558,245 @@
         return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$2(bgColor, logo?.image, { width: '40', height: '45' }), showTitle ? renderTitle$3(children || logo?.title, bgColor) : null] }));
     });
 
-    const useSearch = () => {
-        const [term, setTerm] = useState('');
-        return {
-            term,
-            setTerm: (text) => setTerm(text),
-        };
+    function useBool(defaultValue = false) {
+        const [value, setValue] = useState(defaultValue);
+        const setTrue = useCallback(() => setValue(true), []);
+        const setFalse = useCallback(() => setValue(false), []);
+        const toggle = useCallback(() => setValue((_) => !_), []);
+        return [value, { setValue, setTrue, setFalse, toggle }];
+    }
+
+    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 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 joinMaps = (aggregate, emptyVal) => (acc, map) => {
+        for (const [key, b] of map) {
+            acc.set(key, aggregate(acc.get(key) || emptyVal, b));
+        }
+        return acc;
+    };
+
+    const sum = (list = []) => list.reduce((a, b) => a + b, 0);
+
+    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 useSearch = (basePathList = ['/']) => {
+        const [query, setQuery] = useState('');
+        const [wasQueryFocused, setWasQueryFocused] = useState(false);
+        const handleFocus = useCallback(() => {
+            setWasQueryFocused(true);
+        }, []);
+        const key = useMemo(() => basePathList.map((_) => (wasQueryFocused ? _ : null)), // Load search index on input focus
+        [wasQueryFocused, ...basePathList]);
+        const { data } = useAsyncData(key, fetchSearchIndex);
+        const [result, setResult] = useState(null);
+        useEffect(() => {
+            const timerId = setTimeout(() => {
+                if (data) {
+                    setResult(data.map(search(query)));
+                }
+            }, 300);
+            return () => {
+                clearTimeout(timerId);
+            };
+        }, [data, query]);
+        return [result, { value: query, onChange: setQuery, onFocus: handleFocus }];
     };
+    const fetchSearchIndex = async (...basePathList) => (await Promise.allSettled(basePathList.map((basePath) => fetchJSON(joinPath(basePath, '/', SEARCH_INDEX_FILENAME))))).map((_) => (_.status === 'fulfilled' ? _.value : {}));
 
-    const SearchBarInner = JSX(({ className, isMobile = false }) => {
-        const { term, setTerm } = useSearch();
-        const LoupeIconClassName = isMobile ? 'w-5 h-5' : 'w-6 h-6';
-        const SearchBarLabelClassName = isMobile ? 'text-s' : 'text-l-light';
-        const SearchBarInputClassName = isMobile ? ' placeholder-transparent' : 'h-full';
-        const inputPlaceholder = isMobile ? 'some search' : undefined;
-        return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: LoupeIconClassName, children: jsx(ImgInner, { image: { icon: 'LoupeIcon' }, width: "24", height: "24" }) }), term ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text ${SearchBarLabelClassName}`, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: `h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none pr-[6%] border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text ${SearchBarInputClassName}`, value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input", placeholder: inputPlaceholder }), isMobile ? (jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
+    const CloseButton = JSX(({ className, onClick }) => (jsx("button", { className: style('visible peer-placeholder-shown:invisible w-6 h-6 p-1 bg-transparent border-none', className), onClick: onClick, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(ImgInner, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
+
+    const Dialog = JSX(({ className, head, children, onClose }) => {
+        const handleClose = useCallback((ev) => {
+            ev.preventDefault();
+            onClose && onClose();
+        }, [onClose]);
+        useEffect(() => {
+            const handleEscape = ({ key }) => {
+                if (key === 'Escape') {
+                    onClose && onClose();
+                }
+            };
+            globalThis.document?.addEventListener('keydown', handleEscape);
+            return () => {
+                globalThis.document?.removeEventListener('keydown', handleEscape);
+            };
+        }, [onClose]);
+        return (jsx("div", { className: style('fixed inset-0 bg-white text-l-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar', className), role: "dialog", children: jsxs("div", { className: "relative container pb-12 min-h-full", children: [jsxs("div", { className: "sticky bg-white pt-6 top-0", children: [jsx(CloseButton, { className: "absolute top-3 -right-6", onClick: handleClose }), head] }), children] }) }));
+    });
+
+    const Sitemap = JSX(({ className, topItems }) => {
+        const link = useLink(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: 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(isAnotherPortal);
+        const { href, target, onClick } = link(rest);
+        return (jsx("a", { className: style('text-l-light text-secondary-text hover:text-primary-main no-underline', 'overflow-x-hidden overflow-ellipsis whitespace-nowrap'), href: isAnotherPortal ? joinPath(basePath, href) : href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }));
+    });
+
+    const SearchBarInput = JSX(({ className, isMobile, 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-4 pointer-events-none", children: jsx(ImgInner, { 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', isMobile ? '' : 'h-full'), 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 MIN_QUERY_LEN = 3;
+    const SearchBarInner = JSX(({ className, isMobile, topItems }) => {
+        const basePathList = topItems?.map((_) => _.href || '/');
+        const [searchResult, searchInputProps] = useSearch(basePathList);
+        const { value, onChange, onFocus } = searchInputProps;
+        const searchItems = useMemo(() => combineTopItemsAndSearchResult(topItems)(searchResult), [topItems, searchResult]);
+        useEffect(() => printSearchItems(searchItems), [searchItems]); // Temp
+        const [isSearchDialogOpen, { setTrue: openSearchDialog, setFalse: hideSearchDialog }] = useBool();
+        const handleInitialInputChange = useCallback((_) => {
+            onChange(_);
+            if (isQueryLongEnough(_)) {
+                openSearchDialog();
+            }
+        }, [onChange, isQueryLongEnough]);
+        const handleInitialInputFocus = useCallback(() => {
+            onFocus();
+            if (isQueryLongEnough(value)) {
+                openSearchDialog();
+            }
+        }, [value, onFocus]);
+        return (jsxs("div", { className: className, children: [jsx(SearchBarInput, { isMobile: isMobile, value: value, onChange: handleInitialInputChange, onFocus: handleInitialInputFocus }), isMobile ? (jsx(CloseButton, { className: "absolute top-2 right-3", onClick: (e) => {
                         e.preventDefault();
-                        setTerm('');
-                    }, children: jsx(ImgInner, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })) : (jsx(Button, { version: "primary", text: "\u041D\u0430\u0439\u0442\u0438", className: "invisible peer-focus:visible absolute top-[3px] right-1", onClick: (ev) => {
-                        ev?.preventDefault();
-                        console.log('click');
-                    }, children: jsx("div", { className: "text-s px-9 py-2.5", children: "\u041D\u0430\u0439\u0442\u0438" }) }))] }));
+                        onChange('');
+                    } })) : null, isSearchDialogOpen ? (jsx(Dialog, { head: jsx(SearchBarInput, { className: "my-5", isMobile: isMobile, autoFocus: true, ...searchInputProps }), onClose: hideSearchDialog, children: jsx(Sitemap, { topItems: searchItems }) })) : null] }));
     });
+    const isQueryLongEnough = (_) => _ && _.length >= MIN_QUERY_LEN;
+    const combineTopItemsAndSearchResult = (topItems) => (searchResult) => topItems?.length && searchResult?.length
+        ? zip(topItems, searchResult).map(([_, portalSearchResult]) => ({
+            ..._,
+            items: portalSearchResult?.map(({ title, uri }) => ({ text: title, href: uri })),
+        }))
+        : [];
+    // Temp
+    function printSearchItems(topItems) {
+        for (const _ of topItems.filter(({ items }) => items?.length)) {
+            console.group(_.text);
+            console.table(_.items, ['text', 'href']);
+            console.groupEnd();
+        }
+    }
 
     const SearchBar$1 = JSX((props) => jsx(SearchBarInner, { ...props }));
 
@@ -2606,22 +2827,6 @@
         return (jsx("div", { className: className, children: links?.length ? (jsx("div", { className: "flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, className: "text-l-light max-w-[292px]", ..._ }, String(i)))) })) : null }));
     });
 
-    const Sitemap = JSX(({ className = '', fallback }) => {
-        const link = useLink(true);
-        const sitemap = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
-        return (jsx("div", { className: `flex flex-grow items-start justify-between gap-[54px] xl:gap-5 ${className}`, children: sitemap.topItems?.map((_, i) => renderColumn(link(_), i)) }));
-    });
-    const renderColumn = (menuItem, index) => {
-        const { text, items, href, target, onClick } = menuItem;
-        return (jsxs("div", { className: "flex flex-col w-1/5 last:w-1/4 gap-3.5", children: [jsx("a", { className: "block 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: 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(isAnotherPortal);
-        const { href, target, onClick } = link(rest);
-        return (jsx("a", { className: "block text-l-light text-secondary-text hover:text-primary-main no-underline", href: isAnotherPortal ? joinPath(basePath, href) : href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }));
-    });
-
     const TextInformationLink = JSX(({ className = '', index, ...rest }) => {
         const link = useLink();
         const { href, target, text, onClick } = link(rest);
@@ -2633,8 +2838,9 @@
     const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
     const Footer = JSX(({ className = '', ...rest }) => {
         const fallback = rest.options?.page?.fallback;
+        const sitemap = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
         const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, logo } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
-        return (jsxs(BlockWrapper, { tag: "footer", className: `p-9 ${className}`, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD, logo: logo }), jsx(SearchBar$1, { className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, hasButton: true }), jsx(SocialMedia, { media: socialMedia, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "pt-[3px]", fallback: fallback })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
+        return (jsxs(BlockWrapper, { tag: "footer", className: `p-9 ${className}`, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD, logo: logo }), jsx(SearchBar$1, { className: "grow", topItems: sitemap?.topItems })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, hasButton: true }), jsx(SocialMedia, { media: socialMedia, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "flex-grow", topItems: sitemap?.topItems })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
     });
 
     const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-4", title: title, description: description, headlineVersion: "M" }), calendar ? renderCalendar(calendar) : null] })));
@@ -2669,14 +2875,6 @@
         ? 'text-primary-main'
         : style(flat ? 'text-primary-text' : 'text-secondary-text', 'hover:text-primary-main'), 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
 
-    function useBool(defaultValue = false) {
-        const [value, setValue] = useState(defaultValue);
-        const setTrue = useCallback(() => setValue(true), []);
-        const setFalse = useCallback(() => setValue(false), []);
-        const toggle = useCallback(() => setValue((_) => !_), []);
-        return [value, { setValue, setTrue, setFalse, toggle }];
-    }
-
     const STORAGE_DEFAULT_TTL = 86400000; // 24 * 60 * 60 * 1000
     function useCachedAsyncData(key, fetcher, storage = globalThis?.localStorage) {
         const cachedFetcher = useCallback(async (...args) => {
@@ -2730,44 +2928,39 @@
     }
 
     const groupBy = (list, keyGetter) => {
-        const map = new Map();
-        list.forEach((item) => {
+        const result = new Map();
+        for (const item of list) {
             const key = keyGetter(item);
-            const collection = map.get(key);
-            map.set(key, [...(collection || []), item]);
-        });
-        return map;
+            const group = result.get(key) || [];
+            result.set(key, [...group, item]);
+        }
+        return result;
     };
 
     const SearchBar = JSX(({ className, searchTerm, onSearch }) => {
         return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsx("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: searchTerm ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text `, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0444\u0438\u043B\u0438\u0430\u043B\u0430\u043C" })) }), jsx("input", { id: "search-bar-input", className: `h-12 pl-4 w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text`, value: searchTerm, onChange: (e) => onSearch(e.target.value), type: "text", name: "location-search-bar-input" })] }));
+              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 = JSX(({ currentLocation, onChangeLocation, close, foreignOffices }) => {
-        const { term, setTerm } = useSearch();
-        const handleSearch = useCallback((_) => setTerm(_), []);
+    const Location = JSX(({ currentLocation, onChangeLocation, onClose, foreignOffices }) => {
+        const [query, setQuery] = useState('');
         const regions = cleanUpRegions(useRegions()).sort((a, b) => a.name.localeCompare(b.name));
         const regionsGroupByLetter = groupBy(regions, regionFirstLetter);
-        return (jsxs("div", { className: "absolute h-full w-full inset-0 bg-white text-l-light z-50", children: [jsx(CloseButton, { close: close }), jsxs("div", { className: "container py-12", children: [jsx(CurrentLocation, { currentLocation: currentLocation }), jsx(SearchBar, { onSearch: handleSearch, searchTerm: term, className: "mb-7" }), term && term.length >= SEARCH_TERM_MIN_LENGTH ? (jsx("div", { children: regions
-                                .filter((region) => region.name?.startsWith(term))
-                                .map(renderRegion({ onChangeLocation, close })) })) : (jsx("div", { className: "columns-5", children: Array.from(regionsGroupByLetter.entries()).map(renderRegionGroup({ onChangeLocation, close })) })), jsx(ForeignOffices, { foreignOffices: foreignOffices })] })] }));
+        return (jsxs(Dialog, { head: jsxs("div", { children: [jsx(CurrentLocation, { currentLocation: currentLocation }), jsx(SearchBar, { onSearch: setQuery, searchTerm: query, className: "mb-7" })] }), onClose: onClose, children: [query && query.length >= SEARCH_TERM_MIN_LENGTH ? (jsx("div", { children: regions
+                        .filter(({ name }) => name && jaroWinklerDistance(name.toLowerCase())(query.toLowerCase()) >= 0.8)
+                        .map(renderRegion({ onChangeLocation, onClose })) })) : (jsx("div", { className: "columns-5", children: Array.from(regionsGroupByLetter.entries()).map(renderRegionGroup({ onChangeLocation, onClose })) })), jsx(ForeignOffices, { foreignOffices: foreignOffices })] }));
     });
     const regionFirstLetter = (region) => region.name?.charAt(0) || '';
     const cleanUpRegions = (regions) => regions.map((region) => ({
         ...region,
         name: region.name?.replace(/республика|область|край'/gi, '').trim() || '',
     }));
-    const CurrentLocation = JSX(({ currentLocation }) => currentLocation ? (jsxs("div", { className: "mb-4", children: [jsx(Text, { size: "text-l", font: "font-light", children: "\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u044B\u0431\u0440\u0430\u043D:\u00A0" }), jsx("button", { className: "cursor-pointer", onClick: close, children: jsx(Text, { color: "text-green", children: currentLocation.name }) })] })) : null);
-    const CloseButton = JSX(({ close }) => (jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-6 right-6 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
-            e.preventDefault();
-            close && close();
-        }, children: jsx(ImgInner, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
-    const renderRegionGroup = ({ onChangeLocation, close }) => ([letter, regions]) => (jsxs("div", { className: "break-inside-avoid mb-7 w-[224px]", children: [jsx("div", { className: "mb-2.5", children: jsx(Text, { size: "text-h6", children: letter }) }), regions.map(renderRegion({ onChangeLocation, close }))] }, letter));
-    const renderRegion = ({ onChangeLocation, close }) => (region) => (jsx("div", { className: "mb-1", children: jsx("button", { className: "cursor-pointer hover:text-primary-hover", onClick: () => {
+    const CurrentLocation = JSX(({ currentLocation }) => currentLocation ? (jsxs("div", { className: "mb-4", children: [jsx(Text, { size: "text-l", font: "font-light", children: "\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u044B\u0431\u0440\u0430\u043D:\u00A0" }), jsx("button", { className: "cursor-pointer", onClick: close, children: jsx(Text, { color: "text-primary-main", children: currentLocation.name }) })] })) : null);
+    const renderRegionGroup = ({ onChangeLocation, onClose }) => ([letter, regions]) => (jsxs("div", { className: "break-inside-avoid mb-7 w-[224px]", children: [jsx("div", { className: "mb-2.5", children: jsx(Text, { size: "text-h6", children: letter }) }), regions.map(renderRegion({ onChangeLocation, onClose }))] }, letter));
+    const renderRegion = ({ onChangeLocation, onClose }) => (region) => (jsx("div", { className: "mb-1", children: jsx("button", { className: "cursor-pointer hover:text-primary-hover", onClick: () => {
                 onChangeLocation && onChangeLocation(region);
-                close && close();
+                onClose && onClose();
             }, children: region.name || '' }) }, region.id));
     const ForeignOffices = JSX(({ foreignOffices }) => foreignOffices?.length ? (jsxs("div", { className: "border-t border-main-divider mt-7 pt-7", children: [jsx("div", { className: "mb-4", children: jsx(Text, { size: "text-m", 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 }) => {
@@ -2843,7 +3036,8 @@
             ev?.preventDefault();
             showLocationModal();
         }, []);
-        return (jsxs("div", { className: style('flex items-center', className), children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: location.name, onClick: handleShowLocationModal }), officesLink ? (jsx(TopItem, { className: "mr-7", flat: true, href: officesLink, text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B" })) : null, projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { className: "mr-5", iconVersion: iconVersion, chat: projectSettings.CHAT_BOT })) : null, isShowLocationModal ? (jsx(Location, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation, close: hideLocationModal })) : null] }));
+        defaultEventBus.fire('setPageOverflowHidden', isShowLocationModal);
+        return (jsxs("div", { className: style('flex items-center', className), children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: location.name, onClick: handleShowLocationModal }), officesLink ? (jsx(TopItem, { className: "mr-7", flat: true, href: officesLink, text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B" })) : null, projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { className: "mr-5", iconVersion: iconVersion, chat: projectSettings.CHAT_BOT })) : null, isShowLocationModal ? (jsx(Location, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation, onClose: hideLocationModal })) : null] }));
     });
 
     const findActiveSubItem = (router) => (items = []) => {
@@ -2925,9 +3119,9 @@
         '': '',
     };
 
-    const HorizontalLayout = JSX(({ className = '', gap = 'XS', isPadding = false, version = 'transparent', ...rest }) => (jsx(BlockWrapper, { className: style('grid grid-cols-12', isPadding ? 'p-12' : '', gapStyles[gap], className), version: version, ...rest, children: renderChildren(rest) })));
+    const HorizontalLayout = JSX(({ className = '', gap = 'XS', isPadding = false, version = 'transparent', isTheme = false, ...rest }) => (jsx(BlockWrapper, { className: style('grid grid-cols-12', isPadding ? 'p-12' : '', gapStyles[gap], className), version: version, isTheme: isTheme, ...rest, children: renderChildren(rest) })));
     HorizontalLayout.childrenTypes = {
-        exclude: ['HorizontalLayout'],
+        exclude: ['HorizontalLayout', 'Accordion', 'OtherProducts'],
     };
 
     const ImgBlock = JSX((props) => {
@@ -3484,9 +3678,6 @@
     const OfficeServicesBlock = JSX(({ className = '', title, servicesList, ...rest }) => (jsxs(BlockWrapper, { className: `p-8 flex flex-col ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h5", className: "mb-5", title: title }) : null, servicesList?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: servicesList.map(renderListItems) })) : null] })));
     const renderListItems = (itemList, i) => (jsxs("li", { className: "flex mb-5 last:mb-0 list-none", children: [itemList.icon ? (jsx(ImgInner, { className: "mr-3 min-w-6 min-h-6 w-6 h-6", width: "24", height: "24", asSVG: true, image: getIconWithVersion(itemList.icon) })) : null, itemList.label ? jsx("span", { className: "text-l-light", children: itemList.label }) : null] }, `list_item_${String(i)}`));
 
-    const OtherProducts = JSX(({ className = '', ...rest }) => (jsx(BlockWrapper, { className: `font-sans text-primary-text ${className}`, ...rest, children: renderChildren(rest) })));
-    OtherProducts.childrenTypes = ['OtherProductsItem'];
-
     const ParagraphBlock = JSX(({ text, size, align, font, children, ...rest }) => (jsx(BlockWrapper, { ...rest, children: jsx(Paragraph, { size: size, align: align, font: font, children: text || children }) })));
 
     const BenefitItem = JSX((props) => {
@@ -3592,7 +3783,7 @@
     const ProductBlockInner = JSX(({ className = '', title, headlineVersion = 'L', description, benefitsCountOfRow = 3, benefits, benefitsVersion, buttons, footnote, image, __html, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
         const benefitsCount = benefits?.filter((_) => _.label)?.length;
         const benefitsContainerStyles = getBenefitsContainerStyles(benefitsCountOfRow);
-        return (jsxs("div", { className: style('flex grow justify-between items-stretch h-full', className), children: [jsxs("div", { className: style('flex flex-col', textBlockClassName), children: [jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left", version: version }), jsxs("div", { className: "flex flex-col justify-between h-full", children: [jsxs(BaseTile, { buttons: renderButtonsSection(buttons), children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits?.map(renderBenefit$1(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", isDotted: isDotted })) : null] }), footnote ? jsx("p", { className: "text-m-light pt-12", children: footnote }) : null] })] }), image?.src && jsx(ImgInner, { className: "mt-[-50px]", image: image })] }));
+        return (jsxs("div", { className: style('flex grow justify-between items-stretch h-full', className), children: [jsxs("div", { className: style('flex flex-col', textBlockClassName), children: [jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left" }), jsxs("div", { className: "flex flex-col justify-between h-full", children: [jsxs(BaseTile, { buttons: renderButtonsSection(buttons), children: [benefitsCount ? (jsx("div", { className: benefitsContainerStyles, children: benefits?.map(renderBenefit$1(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6", items: items, itemClassName: "mb-[7px]", isDotted: isDotted })) : null] }), footnote ? jsx("p", { className: "text-m-light pt-12", children: footnote }) : null] })] }), image?.src && jsx(ImgInner, { className: "mt-[-50px]", image: image })] }));
     });
     const getBenefitsContainerStyles = (benefitsCountOfRow = 2) => `gap-6 mt-6 ${benefitsCountOfRow > 2
     ? 'inline-grid grid-cols-[auto_auto_auto]'
@@ -4351,11 +4542,13 @@
         center: 'items-center',
         right: 'items-end',
     };
-    const VerticalLayout = JSX(({ className = '', gap = '', align = 'stretch', isPadding = false, isInnerPadding = true, version = 'transparent', options, ...rest }) => {
+    const VerticalLayout = JSX(({ className = '', gap = '', align = 'stretch', isPadding = false, isInnerPadding = true, version = 'transparent', isTheme = false, options, ...rest }) => {
         const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
-        return (jsx(BlockWrapper, { className: style('flex flex-col [&>*]:max-w-full', isPadding ? 'p-12' : '', gapStyles[gap], align && alignStyle[align], className), version: version, ...rest, children: renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } }) }));
+        return (jsx(BlockWrapper, { className: style('flex flex-col [&>*]:max-w-full', isPadding ? 'p-12' : '', gapStyles[gap], align && alignStyle[align], className), version: version, isTheme: isTheme, ...rest, children: renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } }) }));
     });
-    VerticalLayout.childrenTypes = [];
+    VerticalLayout.childrenTypes = {
+        exclude: ['Accordion', 'OtherProducts'],
+    };
 
     const MIN_COL_SPAN = 10;
     const getPaddings = (className) => getColSpan(className) < MIN_COL_SPAN ? 'py-6 px-11' : 'py-12 px-32';
@@ -4402,7 +4595,6 @@
         MobileAppTile,
         OfficeMap,
         OfficeServicesBlock,
-        OtherProducts,
         ParagraphBlock,
         PictureText,
         Placeholder,
@@ -4523,6 +4715,7 @@
     const ContentPage = JSX((props) => {
         const { className = '', blocksRegistry, blockDecorator, data = {} } = props;
         const { style: pageStyle, blocks, slots, likeControl, colorPalette = 'pc' } = data;
+        const [overflowStyle, setOverflowStyle] = useState('');
         const options = {
             key: '',
             page: data,
@@ -4531,7 +4724,10 @@
             parent: data,
         };
         useBlockRouterProvider();
-        return (jsxs("section", { className: style('relative', pageStyle, className), "data-theme": colorPalette, children: [slots?.header ? (jsx("div", { className: "mb-5 shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, {
+        useEffect(() => defaultEventBus.subscribe('setPageOverflowHidden', (isHidden) => {
+            setOverflowStyle(isHidden ? 'overflow-hidden h-screen' : '');
+        }), []);
+        return (jsxs("section", { className: style('relative', pageStyle, className, overflowStyle), "data-theme": colorPalette, children: [slots?.header ? (jsx("div", { className: "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
@@ -4547,7 +4743,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.8.27";
+    const packageVersion = "0.8.29";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;