@redneckz/wildless-cms-uni-blocks 0.14.393 → 0.14.395

package/bundle/bundle.umd.js

@@ -2509,17 +2509,17 @@
     };
 
     const calculatorValueBlockStyle = 'flex justify-between @xl:flex-col';
-    const CalculatorValueBlock = JSX(({ className, title, value, fractionDigits, fixed, prefix, postfix }) => (jsxs("div", { className: style(calculatorValueBlockStyle, className), children: [title ? (jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title })) : null, value ? (jsx("div", { children: jsx(Text, { size: "text-h3", children: [prefix, toLocalNumberFormat(fractionDigits, { fixed })(value), postfix]
+    const CalculatorValueBlock = JSX(({ className, title, value, fractionDigits, fixed, prefix, postfix, color = 'text-secondary-text', }) => (jsxs("div", { className: style(calculatorValueBlockStyle, className), children: [title ? (jsx(Text, { size: "text-l", font: "font-light", color: color, children: title })) : null, value ? (jsx("div", { children: jsx(Text, { size: "text-h3", children: [prefix, toLocalNumberFormat(fractionDigits, { fixed })(value), postfix]
                         .filter(Boolean)
                         .join(' ') }) })) : (jsx("div", { children: jsx(Text, { size: "text-h3", children: "-" }) }))] })));
 
-    const renderFootnote = (text, key) => text ? (jsx(Paragraph, { size: "text-s", font: "font-light", color: "text-secondary-text", children: text }, String(key))) : null;
+    const renderFootnote = (text, key) => text ? (jsx(Paragraph, { size: "text-xs", font: "font-light", color: "text-secondary-text", children: text }, String(key))) : null;
 
-    const Rate = JSX(({ rate = 0, title = 'Ставка', unit, fractionDigits = 2, depositeName, isShowDepositeName }) => (jsxs("div", { children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsxs("div", { className: "relative", children: [jsxs("div", { className: "flex justify-start gradient-color-text", children: [jsx("span", { className: "font-mohave text-title-huge -mt-m tracking-[-15px]", children: toLocalNumberFormat(fractionDigits, { fixed: true })(rate) }), unit ? jsx("span", { className: "text-7xl", children: unit }) : null] }), depositeName && isShowDepositeName ? (jsx("div", { className: "absolute bottom-2 w-full text-left whitespace-nowrap", children: depositeName })) : null] })] })));
+    const Rate = JSX(({ rate = 0, title = 'Ставка', unit, fractionDigits = 2, depositeName, isShowDepositeName, color = 'text-secondary-text', }) => (jsxs("div", { children: [jsx(Text, { size: "text-l", font: "font-light", color: color, children: title }), jsxs("div", { className: "relative", children: [jsxs("div", { className: "flex justify-start gradient-color-text", children: [jsx("span", { className: "font-mohave text-title-huge -mt-m tracking-[-15px]", children: toLocalNumberFormat(fractionDigits, { fixed: true })(rate) }), unit ? jsx("span", { className: "text-7xl", children: unit }) : null] }), depositeName && isShowDepositeName ? (jsx("div", { className: "absolute bottom-2 w-full text-left whitespace-nowrap", children: depositeName })) : null] })] })));
 
     const UnknownRate = JSX(({ title = 'Ставка', isUnavailableByTerm = false }) => (jsxs("div", { className: "space-y-s", children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsx(Icon, { className: "w-10 h-10 @5xl:h-auto @5xl:w-40", name: "PercentIcon" }), jsx("div", { className: "w-64", children: isUnavailableByTerm ? (jsxs(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: ["\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u043D\u0430\u044F \u0441\u0442\u0430\u0432\u043A\u0430 \u0434\u043B\u044F \u0441\u0440\u043E\u043A\u0430 ", jsx("strong", { children: "1-30 \u0434\u043D\u0435\u0439" }), " \u0443\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u043F\u0440\u0438 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0438 \u0432 \u0411\u0430\u043D\u043A"] })) : (jsx(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0434\u0440\u0443\u0433\u0443\u044E \u0441\u0443\u043C\u043C\u0443 \u0438\u043B\u0438 \u0441\u0440\u043E\u043A" })) })] })));
 
-    const renderRate = ({ title = 'Ставка', rate = 0, unit = '%', fractionDigits = 2, isUnknownRateShown = true, ...rest }) => isUnknownRateShown && rate === 0 ? (jsx(UnknownRate, { title: title, ...rest })) : (jsxs("div", { children: [jsx("div", { className: "hidden @xl:block", children: jsx(Rate, { title: title, rate: rate, unit: unit, fractionDigits: fractionDigits, ...rest }) }), jsx("div", { className: "@xl:hidden", children: jsx(CalculatorValueBlock, { title: title, value: rate, postfix: unit, fractionDigits: fractionDigits, fixed: true, ...rest }) })] }));
+    const renderRate = ({ title = 'Ставка', rate = 0, unit = '%', fractionDigits = 2, isUnknownRateShown = true, color = 'text-secondary-text', ...rest }) => isUnknownRateShown && rate === 0 ? (jsx(UnknownRate, { title: title, ...rest })) : (jsxs("div", { children: [jsx("div", { className: "hidden @xl:block", children: jsx(Rate, { title: title, rate: rate, unit: unit, fractionDigits: fractionDigits, color: color, ...rest }) }), jsx("div", { className: "@xl:hidden", children: jsx(CalculatorValueBlock, { title: title, value: rate, postfix: unit, fractionDigits: fractionDigits, fixed: true, color: color, ...rest }) })] }));
 
     const DEFAULT_MONEY_STEP = 1000;
     function renderWantedSumInput({ isShowItems = true, step = DEFAULT_MONEY_STEP, ...rest }) {
@@ -2597,15 +2597,16 @@
                                 step: 500,
                                 isShowItems: false,
                                 ...field('restExpenseValue'),
-                            })] }), monthBonus >= 0
-                        ? renderRate({
-                            title: 'Баллов за месяц',
-                            rate: monthBonus,
-                            fractionDigits: 0,
-                            isUnknownRateShown: false,
-                            unit: '',
-                        })
-                        : null, jsxs("div", { className: CalculatorStyle.result, children: [yearBonus >= 0 ? (jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus })) : null, renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] })] }) }));
+                            })] }), jsx("div", { className: "mb-s", children: monthBonus >= 0
+                            ? renderRate({
+                                title: 'Баллов за месяц',
+                                rate: monthBonus,
+                                fractionDigits: 0,
+                                isUnknownRateShown: false,
+                                unit: '',
+                                color: 'text-primary-text',
+                            })
+                            : null }), jsxs("div", { className: CalculatorStyle.result, children: [yearBonus >= 0 ? (jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus, color: "text-primary-text" })) : null, renderButtonsSection(buttons, { isVertical: true }), renderFootnote(footnote)] })] }) }));
     });
 
     const MONTHS_IN_YEAR = 12;
@@ -4218,99 +4219,12 @@
         return isURL(href) ? router.href : joinPath(basePath, router.pathname);
     };
 
-    const TopItem = JSX(({ className = '', active, flat, children, data, ...rest }) => {
-        const link = useLink();
-        const { href, target, text, onClick } = link(rest);
-        return (jsx("a", { className: style(getLinkStyle(active, flat), className), href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": text, ...getAspectsAttributes(data), children: jsx("span", { suppressHydrationWarning: true, className: getTextStyle$1(active, flat), children: text || children }) }));
-    });
-    const getLinkStyle = (active = false, flat = false) => style('inline-block border border-solid bg-transparent text-center no-underline', active
-        ? 'rounded-md border-primary-main group-data-transparent:border-white'
-        : 'border-transparent', flat ? '' : 'px-m py-xs');
-    const getTextStyle$1 = (active = false, flat = false) => {
-        const activeFlatStyle = flat ? 'text-primary-text' : 'text-secondary-text';
-        return style('font-sans text-s font-light', active ? 'text-primary-main' : style(activeFlatStyle, 'hover:text-primary-main'), 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
-    };
-
-    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 renderForeignOffices = (foreignOffices) => foreignOffices?.length ? (jsxs("div", { className: "sm:border-t sm: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 flex-col sm:flex-row gap-5xl", 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-s items-center", 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: jsx(Text, { size: "text-l", font: "font-light", color: "text-primary-text", children: text }) })) : null] }));
-    });
-
-    const renderRegion = (data, onChangeLocation) => (region) => region.name ? (jsx(LinkWrapper, { href: `/branches/${region.slug}`, className: "mb-xs sm:mb-2xs hover:text-primary-hover", onClick: () => onChangeLocation?.(region), data: getAspectsWithInclude(data, region.name), children: jsx(Text, { size: "text-l", font: "font-light", children: region.name }) }, String(region.id))) : null;
-
-    const renderRegionGroup = (onChangeLocation, data) => ([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(data, onChangeLocation))] }, letter));
-
-    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-m max-w-44 gap-s 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: style(inputValidStyle, `h-12 pl-m w-full peer text-l text-black rounded-md box-border`), value: searchTerm, onChange: (e) => onSearch(e.target.value.toLowerCase()), type: "text", name: "location-search-bar-input" })] }));
-    });
-
-    const SEARCH_TERM_MIN_LENGTH = 3;
-    const LocationDialog = JSX(({ foreignOffices, branches }) => {
-        const [currentLocation, selectCurrentLocation] = useLocation(branches?.default);
-        const link = useLink();
-        const { href } = link({ href: `/branches/${currentLocation.slug}` });
-        const [query, setQuery] = useState('');
-        const regions = cleanUpRegions(useRegions()).sort((a, b) => a.name.localeCompare(b.name));
-        const regionsGroupByLetter = groupBy(regions, regionFirstLetter);
-        const { close } = useDialogManager();
-        const handleChangeLocation = useCallback((region) => {
-            selectCurrentLocation(region);
-            close();
-        }, []);
-        return (jsxs(Dialog, { className: "pb-20", head: jsxs("div", { children: [jsx(Text, { size: "text-h4", color: "text-primary-text", children: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0438\u043B\u0438\u0430\u043B" }), currentLocation ? (jsx("div", { className: "mb-s", children: jsxs(Paragraph, { size: "text-l", color: "text-primary-text", children: ["\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u044B\u0431\u0440\u0430\u043D:", jsx(LinkWrapper, { href: href, className: "inline mx-2xs text-primary-main", children: currentLocation.name })] }) })) : null, 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(branches?.dataSelect, handleChangeLocation)) })) : (jsx("div", { className: "columns-1 sm:columns-5", children: Array.from(regionsGroupByLetter.entries()).map(renderRegionGroup(handleChangeLocation, branches?.dataSelect)) })), renderForeignOffices(foreignOffices)] }));
-    });
-    const regionFirstLetter = (region) => region.name?.charAt(0) || '';
-    const cleanUpRegions = (regions) => regions.map((region) => ({
-        ...region,
-        name: region.name?.replace(/республика|область|край'/gi, '').trim() || '',
-    }));
-
-    const useLocationDialog = (props) => {
-        const { open, close } = useDialogManager();
-        return {
-            open: (options = {}) => open(jsx(LocationDialog, { ...props }), options),
-            close,
-        };
-    };
-
-    const BUTTON_SIZE_STYLE = {
-        default: 'w-6 h-6',
-        large: 'w-12 h-12',
-    };
-    const HeaderSecondaryMenuButton = JSX(({ className, isRounded, buttonSize = 'default', isGrayBg = false, disabled, ariaLabel, image, data, onClick, }) => (jsx("button", { className: style('group/btn border-0 flex shrink-0 items-center', isGrayBg ? 'p-s rounded-full' : 'p-0 bg-inherit', isGrayBg && !isRounded ? 'bg-main-divider' : '', isRounded
-            ? 'w-8 h-8 text-secondary-light hover:text-secondary-hove'
-            : `${BUTTON_SIZE_STYLE[buttonSize]} text-primary-text hover:text-primary-main`, 'group-data-transparent:text-white', className), type: "button", disabled: disabled, "aria-label": ariaLabel, onClick: onClick, ...getAspectsAttributes(data), children: jsx(Img, { image: image, className: style('h-full', isRounded ? 'bg-main-divider/20 rounded-full' : ''), imageClassName: "group-hover/btn:text-primary-hover group-hover/btn:invert-0" }) })));
-
-    const HeaderSecondaryMenu = JSX(({ className, version, ...rest }) => {
-        const iconVersion = version === 'transparent' ? 'white' : 'black';
-        const [currentLocation] = useLocation(rest?.branches?.default);
-        const searchDialog = useSearchDialog(rest);
-        const locationDialog = useLocationDialog(rest);
-        const openSearchDialog = useCallback(() => searchDialog.open(), [searchDialog]);
-        const openLocationDialog = useCallback(() => locationDialog.open(), [locationDialog]);
-        return (jsxs("div", { className: style('flex items-center gap-lg', className), role: "navigation", children: [rest?.branches?.visible ? (jsx(TopItem, { flat: true, href: "#", text: currentLocation?.name, data: getAspectsWithInclude(rest?.branches?.dataClick, currentLocation?.name ?? ''), onClick: openLocationDialog })) : null, rest?.officesAtms?.href ? jsx(TopItem, { flat: true, ...rest.officesAtms }) : null, jsx(HeaderSecondaryMenuButton, { image: { icon: 'LoupeIcon', iconVersion }, ariaLabel: rest?.search?.ariaLabel ?? 'Поиск', onClick: openSearchDialog, data: rest?.search?.data })] }));
-    });
-
     const DropdownMenu = JSX(({ className = '', items, activeItem, ariaLabel }) => {
         const [isVisible, { setFalse, toggle }] = useBool(false);
         const ref = useOutsideClick(setFalse);
         return (jsxs("div", { className: style(isVisible ? 'bg-white rounded-md shadow-blue-gray' : '', className), ref: ref, role: "navigation", children: [jsx("button", { type: "button", className: "group/btn flex justify-between items-center h-6", "aria-label": ariaLabel, onClick: toggle, children: Array(3)
                         .fill(null)
-                        .map((_, i) => (jsx("div", { className: "w-[3px] h-[3px] rounded mr-2xs bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white" }, String(i)))) }), jsx("div", { className: style('absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56', isVisible ? '' : 'hidden'), "aria-hidden": !isVisible, children: items?.map((item, i) => (jsx(DropdownMenuItem, { isActive: item === activeItem, ...item }, item?.text ?? String(i)))) })] }));
+                        .map((_, i) => (jsx("div", { className: "w-[3px] h-[3px] rounded mr-2xs bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white" }, String(i)))) }), jsx("div", { className: style('absolute flex flex-col rounded-md bg-white p-xl pb-xs w-56 z-40', isVisible ? '' : 'hidden'), "aria-hidden": !isVisible, children: items?.map((item, i) => (jsx(DropdownMenuItem, { isActive: item === activeItem, ...item }, item?.text ?? String(i)))) })] }));
     });
     const DropdownMenuItem = JSX(({ isActive, ...rest }) => {
         const link = useLink();
@@ -4318,6 +4232,14 @@
         return (jsx("a", { className: style('text-l font-light pb-m hover:text-primary-main', isActive ? 'text-primary-main' : ''), href: href, target: target, onClick: onClick, role: "menuitem", ...getAspectsAttributes(rest?.data), children: text }));
     });
 
+    const BUTTON_SIZE_STYLE = {
+        default: 'w-6 h-6',
+        large: 'w-12 h-12',
+    };
+    const HeaderSecondaryMenuButton = JSX(({ className, isRounded, buttonSize = 'default', isGrayBg = false, disabled, ariaLabel, image, data, onClick, }) => (jsx("button", { className: style('group/btn border-0 flex shrink-0 items-center', isGrayBg ? 'p-s rounded-full' : 'p-0 bg-inherit', isGrayBg && !isRounded ? 'bg-main-divider' : '', isRounded
+            ? 'w-8 h-8 text-secondary-light hover:text-secondary-hove'
+            : `${BUTTON_SIZE_STYLE[buttonSize]} text-primary-text hover:text-primary-main`, 'group-data-transparent:text-white', className), type: "button", disabled: disabled, "aria-label": ariaLabel, onClick: onClick, ...getAspectsAttributes(data), children: jsx(Img, { image: image, className: style('h-full', isRounded ? 'bg-main-divider/20 rounded-full' : ''), imageClassName: "group-hover/btn:text-primary-hover group-hover/btn:invert-0" }) })));
+
     const getNS = (_) => globalThis[_];
     const initializeExternalNS = (namespaceName, url) => {
         const script = document.getElementById(url);
@@ -4416,9 +4338,9 @@
     const HeaderItem = JSX(({ className = '', active, dataItemName, children, data, ...rest }) => {
         const link = useLink();
         const { href, target, text, onClick } = link(rest);
-        return (jsxs("a", { className: style('relative inline-block bg-transparent text-center no-underline', className), href: href, target: target, "data-item-name": dataItemName, onClick: onClick, ...getAspectsAttributes(data), children: [jsx("span", { className: getTextStyle(active), children: text || children }), active ? (jsx("div", { className: "absolute left-0 right-0 -bottom-3 h-0.5 bg-primary-main group-data-transparent:bg-transparent" })) : null] }));
+        return (jsxs("a", { className: style('relative inline-block bg-transparent text-center no-underline', className), href: href, target: target, "data-item-name": dataItemName, onClick: onClick, ...getAspectsAttributes(data), children: [jsx("span", { className: getTextStyle$1(active), children: text || children }), active ? (jsx("div", { className: "absolute left-0 right-0 -bottom-3 h-0.5 bg-primary-main group-data-transparent:bg-transparent" })) : null] }));
     });
-    const getTextStyle = (active = false) => style('font-sans text-l font-light', active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main', 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
+    const getTextStyle$1 = (active = false) => style('font-sans text-l font-light', active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main', 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
 
     const HeaderSubMenuItem = JSX(({ observerOptions, onVisibilityChange, children, className, ...rest }) => {
         const observerCallback = useCallback((entries) => {
@@ -4452,11 +4374,118 @@
         const subItemsListRef = useRef(null);
         const observerOptions = { rootRef: subItemsListRef };
         const subItemsVisibilityHandlers = useMemo(() => subItems.map((_, index) => (isIntersecting) => {
+            setVisibleItemsCount(isIntersecting
+                ? handleIntersectionActivation$1(index)
+                : handleIntersectionDeactivation$1(index));
+        }), [subItems]);
+        return (jsxs("nav", { className: "relative mt-s flex gap-s items-center justify-between", children: [jsx("div", { ref: subItemsListRef, className: "overflow-hidden whitespace-nowrap pb-s mt-xs space-x-3xl", role: "menu", children: subItems.map((_, i) => (jsx(HeaderSubMenuItem, { className: visibleItemsCount - 1 < i ? 'invisible' : '', active: _ === activeSubItem, observerOptions: observerOptions, onVisibilityChange: subItemsVisibilityHandlers[i], data: _.dataHeader, ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { items: dropDownMenuItems, activeItem: activeSubItem, ariaLabel: dropdownMenuAriaLabel })) : null, projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { iconVersion: iconVersion, chat: projectSettings.CHAT_BOT, ariaLabel: chatBotAriaLabel })) : null, jsx(InternetBankButton, { version: version, ...internetBankButton })] }));
+    });
+    const handleIntersectionActivation$1 = (index) => (prev) => Math.max(prev, index + 1);
+    const handleIntersectionDeactivation$1 = (index) => (prev) => Math.min(prev, index);
+
+    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 renderForeignOffices = (foreignOffices) => foreignOffices?.length ? (jsxs("div", { className: "sm:border-t sm: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 flex-col sm:flex-row gap-5xl", 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-s items-center", 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: jsx(Text, { size: "text-l", font: "font-light", color: "text-primary-text", children: text }) })) : null] }));
+    });
+
+    const renderRegion = (data, onChangeLocation) => (region) => region.name ? (jsx(LinkWrapper, { href: `/branches/${region.slug}`, className: "mb-xs sm:mb-2xs hover:text-primary-hover", onClick: () => onChangeLocation?.(region), data: getAspectsWithInclude(data, region.name), children: jsx(Text, { size: "text-l", font: "font-light", children: region.name }) }, String(region.id))) : null;
+
+    const renderRegionGroup = (onChangeLocation, data) => ([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(data, onChangeLocation))] }, letter));
+
+    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-m max-w-44 gap-s 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: style(inputValidStyle, `h-12 pl-m w-full peer text-l text-black rounded-md box-border`), value: searchTerm, onChange: (e) => onSearch(e.target.value.toLowerCase()), type: "text", name: "location-search-bar-input" })] }));
+    });
+
+    const SEARCH_TERM_MIN_LENGTH = 3;
+    const LocationDialog = JSX(({ foreignOffices, branches }) => {
+        const [currentLocation, selectCurrentLocation] = useLocation(branches?.default);
+        const link = useLink();
+        const { href } = link({ href: `/branches/${currentLocation.slug}` });
+        const [query, setQuery] = useState('');
+        const regions = cleanUpRegions(useRegions()).sort((a, b) => a.name.localeCompare(b.name));
+        const regionsGroupByLetter = groupBy(regions, regionFirstLetter);
+        const { close } = useDialogManager();
+        const handleChangeLocation = useCallback((region) => {
+            selectCurrentLocation(region);
+            close();
+        }, []);
+        return (jsxs(Dialog, { className: "pb-20", head: jsxs("div", { children: [jsx(Text, { size: "text-h4", color: "text-primary-text", children: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0438\u043B\u0438\u0430\u043B" }), currentLocation ? (jsx("div", { className: "mb-s", children: jsxs(Paragraph, { size: "text-l", color: "text-primary-text", children: ["\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u044B\u0431\u0440\u0430\u043D:", jsx(LinkWrapper, { href: href, className: "inline mx-2xs text-primary-main", children: currentLocation.name })] }) })) : null, 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(branches?.dataSelect, handleChangeLocation)) })) : (jsx("div", { className: "columns-1 sm:columns-5", children: Array.from(regionsGroupByLetter.entries()).map(renderRegionGroup(handleChangeLocation, branches?.dataSelect)) })), renderForeignOffices(foreignOffices)] }));
+    });
+    const regionFirstLetter = (region) => region.name?.charAt(0) || '';
+    const cleanUpRegions = (regions) => regions.map((region) => ({
+        ...region,
+        name: region.name?.replace(/республика|область|край'/gi, '').trim() || '',
+    }));
+
+    const useLocationDialog = (props) => {
+        const { open, close } = useDialogManager();
+        return {
+            open: (options = {}) => open(jsx(LocationDialog, { ...props }), options),
+            close,
+        };
+    };
+
+    const TopItem = JSX(({ className = '', active, flat, children, data, ...rest }) => {
+        const link = useLink();
+        const { href, target, text, onClick } = link(rest);
+        return (jsx("a", { className: style(getLinkStyle(active, flat), className), href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": text, ...getAspectsAttributes(data), children: jsx("span", { suppressHydrationWarning: true, className: getTextStyle(active, flat), children: text || children }) }));
+    });
+    const getLinkStyle = (active = false, flat = false) => style('inline-block border border-solid bg-transparent text-center no-underline', active
+        ? 'rounded-md border-primary-main group-data-transparent:border-white'
+        : 'border-transparent', flat ? '' : 'px-m py-xs');
+    const getTextStyle = (active = false, flat = false) => {
+        const activeFlatStyle = flat ? 'text-primary-text' : 'text-secondary-text';
+        return style('font-sans text-s font-light', active ? 'text-primary-main' : style(activeFlatStyle, 'hover:text-primary-main'), 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
+    };
+
+    const HeaderSecondaryMenu = JSX(({ className, version, ...rest }) => {
+        const iconVersion = version === 'transparent' ? 'white' : 'black';
+        const [currentLocation] = useLocation(rest?.branches?.default);
+        const searchDialog = useSearchDialog(rest);
+        const locationDialog = useLocationDialog(rest);
+        const openSearchDialog = useCallback(() => searchDialog.open(), [searchDialog]);
+        const openLocationDialog = useCallback(() => locationDialog.open(), [locationDialog]);
+        return (jsxs("div", { className: style('flex items-center ml-5 md:max-w-[300px] xl:max-w-full gap-lg', className), role: "navigation", children: [rest?.branches?.visible ? (jsx(TopItem, { className: "whitespace-nowrap text-ellipsis overflow-hidden", flat: true, href: "#", text: currentLocation?.name, data: getAspectsWithInclude(rest?.branches?.dataClick, currentLocation?.name ?? ''), onClick: openLocationDialog })) : null, rest?.officesAtms?.href ? (jsx(TopItem, { className: "whitespace-nowrap", flat: true, ...rest.officesAtms })) : null, jsx(HeaderSecondaryMenuButton, { image: { icon: 'LoupeIcon', iconVersion }, ariaLabel: rest?.search?.ariaLabel ?? 'Поиск', onClick: openSearchDialog, data: rest?.search?.data })] }));
+    });
+
+    const HeaderTopMenuItem = JSX(({ observerOptions, onVisibilityChange, children, className, ...rest }) => {
+        const observerCallback = useCallback((entries) => {
+            if (!entries.length || !onVisibilityChange) {
+                return;
+            }
+            // Assumption about entries order (by time)
+            const entry = entries[entries.length - 1];
+            onVisibilityChange(entry.isIntersecting);
+        }, [onVisibilityChange]);
+        const ref = useIntersectionObserver(observerCallback, observerOptions);
+        return (jsx("span", { ref: ref, className: className, role: "menuitem", children: jsx(TopItem, { ...rest, children: children }) }));
+    });
+
+    const HeaderTopMenu = JSX(({ topItems = [], activeTopItem, dropdownMenuAriaLabel, version, sitemap, bgColor, logo, data, }) => {
+        const [visibleItemsCount, setVisibleItemsCount] = useState(topItems.length);
+        const dropDownMenuItems = topItems.slice(visibleItemsCount);
+        const topItemsListRef = useRef(null);
+        const observerOptions = { rootRef: topItemsListRef };
+        const topItemsVisibilityHandlers = useMemo(() => topItems.map((_, index) => (isIntersecting) => {
             setVisibleItemsCount(isIntersecting
                 ? handleIntersectionActivation(index)
                 : handleIntersectionDeactivation(index));
-        }), [subItems]);
-        return (jsxs("nav", { className: "relative mt-s flex gap-s items-center justify-between", children: [jsx("div", { ref: subItemsListRef, className: "overflow-hidden whitespace-nowrap pb-s mt-xs space-x-3xl", role: "menu", children: subItems.map((_, i) => (jsx(HeaderSubMenuItem, { className: visibleItemsCount - 1 < i ? 'invisible' : '', active: _ === activeSubItem, observerOptions: observerOptions, onVisibilityChange: subItemsVisibilityHandlers[i], data: _.dataHeader, ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { className: "relative w-auto z-40", items: dropDownMenuItems, activeItem: activeSubItem, ariaLabel: dropdownMenuAriaLabel })) : null, projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { iconVersion: iconVersion, chat: projectSettings.CHAT_BOT, ariaLabel: chatBotAriaLabel })) : null, jsx(InternetBankButton, { version: version, ...internetBankButton })] }));
+        }), [topItems]);
+        return (jsxs("div", { className: "flex items-center justify-between", children: [jsx(Logo, { className: "mr-3xl", bgColor: bgColor, logo: logo, data: data }), jsx("div", { ref: topItemsListRef, className: "overflow-hidden min-w-[160px] pb-xs mt-xs", role: "menu", children: topItems.map((_, i) => (jsx(HeaderTopMenuItem, { className: visibleItemsCount - 1 < i ? 'invisible' : '', active: _ === activeTopItem, observerOptions: observerOptions, onVisibilityChange: topItemsVisibilityHandlers[i], data: _.dataHeader, ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { className: "mx-xs", items: dropDownMenuItems, activeItem: activeTopItem, ariaLabel: dropdownMenuAriaLabel })) : null, jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", ...sitemap })] }));
     });
     const handleIntersectionActivation = (index) => (prev) => Math.max(prev, index + 1);
     const handleIntersectionDeactivation = (index) => (prev) => Math.min(prev, index);
@@ -4473,7 +4502,7 @@
         const { dataFooter, dataHeader, ...logoProps } = logo ?? {};
         const [, activeTopItem] = useActiveRoute(topItems);
         const { internetBankButton } = portal || {};
-        return (jsx(BlockWrapper, { tag: "header", className: style('pt-3xl px-20', activeTopItem?.items?.length ? 'pb-m' : 'pb-lg', className), defaultPadding: "", version: version, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-3xl", bgColor: bgColor, logo: customLogo ?? logoProps, data: dataHeader }), topItems?.filter(isVisibleItem(HEADER_AREA_KEYS)).map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, data: _.dataHeader, ..._ }, String(i)))), jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", ...sitemap })] }), jsx("div", { className: style('mt-xl h-px bg-main-divider', getVersionStyle(version)) }), activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem?.items?.filter(isVisibleItem(HEADER_AREA_KEYS)), version: version, internetBankButton: internetBankButton })) : null] }) }));
+        return (jsx(BlockWrapper, { tag: "header", className: style('pt-3xl px-20', activeTopItem?.items?.length ? 'pb-m' : 'pb-lg', className), defaultPadding: "", version: version, ...rest, children: jsxs("div", { className: "container", children: [jsx("div", { className: "whitespace-nowrap", children: jsx(HeaderTopMenu, { activeTopItem: activeTopItem, topItems: topItems?.filter(isVisibleItem(HEADER_AREA_KEYS)), version: version, sitemap: sitemap, bgColor: bgColor, logo: customLogo ?? logoProps, data: dataHeader }) }), jsx("div", { className: style('mt-xl h-px bg-main-divider', getVersionStyle(version)) }), activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem?.items?.filter(isVisibleItem(HEADER_AREA_KEYS)), version: version, internetBankButton: internetBankButton })) : null] }) }));
     });
     const getVersionStyle = (version) => (version === 'transparent' ? 'opacity-30' : '');
 
@@ -6273,7 +6302,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.392";
+    const packageVersion = "0.14.394";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;