@redneckz/wildless-cms-uni-blocks 0.7.5 → 0.7.7

package/bundle/bundle.umd.js

@@ -653,6 +653,7 @@
         white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white active:text-primary-main',
         link: '',
         transparent: '',
+        gray: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
         '': '',
     };
     const DisabledStyle = 'bg-main-divider text-main-disabled';
@@ -662,6 +663,7 @@
         white: DisabledStyle,
         link: '',
         transparent: '',
+        gray: DisabledStyle,
         '': '',
     };
     const buttonStyle = 'text-center font-sans select-none';
@@ -671,6 +673,7 @@
         white: 'group-hover/btn:brightness-0 group-hover/btn:invert',
         link: '',
         transparent: '',
+        gray: 'group-hover/btn:brightness-0 group-hover/btn:invert',
         '': '',
     };
 
@@ -1606,7 +1609,7 @@
 
     const ITEMS_GAP = 4;
     const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px] pointer-events-none';
-    const scrollButtonStyle = 'absolute top-[calc(50%-12px)] z-50';
+    const scrollButtonStyle$1 = 'absolute top-[calc(50%-12px)] z-50';
     const Carousel = JSX(({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, isPadding = true, ...rest }) => {
         const { blocks: childBlocks } = rest.block || {};
         const count = itemCount || childBlocks?.length || 0;
@@ -1626,7 +1629,7 @@
         'CarouselTariffsCard',
         'CarouselInvestmentCard',
     ];
-    const renderScrollButtons = ({ scrollLeft, scrollRight, canScrollLeft, canScrollRight, }) => (jsxs("div", { children: [canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-8`, onClick: scrollLeft })) : null, canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle} right-8`, onClick: scrollRight })) : null] }));
+    const renderScrollButtons = ({ scrollLeft, scrollRight, canScrollLeft, canScrollRight, }) => (jsxs("div", { children: [canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle$1} left-8`, onClick: scrollLeft })) : null, canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle$1} right-8`, onClick: scrollRight })) : null] }));
     const getPaddingStyle = (isPadding) => (isPadding ? 'p-12' : '');
 
     const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full';
@@ -1640,7 +1643,7 @@
         black: 'bg-black',
         white: 'bg-white',
     };
-    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: `border box-border border-gray p-7 min-w-[392px] flex flex-col justify-left ${className}`, role: "listitem", ...rest, children: [image?.src ? jsx(ImgInner, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Paragraph, { size: "text-m", align: "text-left", font: "font-light", children: description }) })) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-s-light text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: jsx(Text, { children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }) }), colors.map(renderColorOption$1)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })] })));
+    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: `border box-border border-gray p-7 min-w-[392px] flex flex-col justify-left ${className}`, ...rest, children: [image?.src ? jsx(ImgInner, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Paragraph, { size: "text-m", align: "text-left", font: "font-light", children: description }) })) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-s-light text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: jsx(Text, { children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }) }), colors.map(renderColorOption$1)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })] })));
     const renderColorOption$1 = (color, i) => (jsx("span", { className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap$2[color]}` }, String(i)));
 
     const BaseTile = JSX(({ className = '', title = '', buttons, image, children }) => (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { className: "h-full", children: children }), buttons ? jsx("div", { className: "mt-auto pt-8", children: buttons }) : null] }), image] })] })));
@@ -1707,7 +1710,7 @@
     const List = JSX(({ className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: `text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text ${TEXT_SIZE_MAP[listItemSize]} ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''} ${className}`, role: "list", children: items.map((item, i) => (jsx(ListItem, { className: `${itemClassName} mb-1.5`, isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
 
     const CarouselProductCard = JSX(({ className = '', title, headlineSmallVersion = 'H6', description, additionalDescription, icon, items = [], button = {}, version = 'primary', isDotted = true, align = 'text-center', ...rest }) => {
-        return (jsxs(BlockWrapper, { className: style('flex flex-col justify-between items-stretch min-w-[260px] h-full w-full p-6', 'box-border border-solid border border-gray', align, className), role: "listitem", version: version, ...rest, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$4(icon), renderCardTitle$1(headlineSmallVersion, title), renderDescription$4(description, title), renderItems$1(items, isDotted, version), renderAdditionalDescription$2(additionalDescription)] }), renderButtonsSection([button], { buttonClassName: 'mt-6 w-full' })] }));
+        return (jsxs(BlockWrapper, { className: style('flex flex-col justify-between items-stretch min-w-[260px] h-full w-full p-6', 'box-border border-solid border border-gray', align, className), version: version, ...rest, children: [jsxs("div", { className: "flex flex-col h-full", children: [renderImage$4(icon), renderCardTitle$1(headlineSmallVersion, title), renderDescription$4(description, title), renderItems$1(items, isDotted, version), renderAdditionalDescription$2(additionalDescription)] }), renderButtonsSection([button], { buttonClassName: 'mt-6 w-full' })] }));
     });
     const renderImage$4 = (image) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(ImgInner, { className: "mb-5", image: image }) : null, image?.icon ? (jsx(ImgInner, { className: `w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`, image: image, asSVG: true })) : null] }));
     const renderCardTitle$1 = (headlineSmallVersion, title) => title ? jsx(Text, { size: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
@@ -1759,21 +1762,20 @@
         default: 'w-14 h-14',
         small: 'w-12 h-12',
     };
-    const MediaButton = JSX(({ isRounded = false, buttonSize = 'default', iconVersion = 'color', ...rest }) => {
-        const link = useLink();
-        const { href, onClick } = link(rest);
+    const MediaButton = JSX(({ iconVersion = 'color', buttonSize = 'default', rounded = false, ...rest }) => {
+        const { href, version } = rest;
         const { icon, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
         const iconWithVersion = icon ? { ...getIconWithVersion(icon), iconVersion } : null;
-        return icon ? (jsx("a", { className: style('group/media flex items-center justify-center box-border', buttonSizeStyles[buttonSize], isRounded ? 'rounded-full' : 'rounded-md', 'border-solid border border-main-divider hover:border-transparent', 'hover:bg-primary-main hover:text-black', 'group-data-secondary:bg-white group-data-secondary:hover:bg-secondary-hover'), href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", onClick: onClick, children: iconWithVersion ? (jsx(ImgInner, { image: iconWithVersion, imageClassName: "group-hover/media:text-white", width: "24", height: "24", asSVG: true })) : null })) : null;
+        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 }));
     });
 
-    const SocialMedia = JSX(({ className = '', media, isRounded = false, buttonSize, children }) => (jsxs("div", { className: "font-sans", children: [jsx("div", { className: `flex gap-2.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { isRounded: isRounded, buttonSize: buttonSize, ..._ }, String(index)))) }), jsx("span", { className: "text-s-light text-secondary-text", children: children })] })));
+    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("span", { className: "text-s-light text-secondary-text", children: children })] })));
 
-    const CarouselRecommendationCard = JSX(({ button, className = '', description, image, items = [], socialMedia = [], title, ...rest }) => {
+    const CarouselRecommendationCard = JSX(({ button, className = '', description, image, items = [], socialMedia = [], title, version = 'primary', ...rest }) => {
         const tileTitle = title ? (jsx(Heading, { headingType: "h5", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
         const tileImage = image?.src ? (jsx(ImgInner, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
         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] text-left box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), ...rest, children: jsx(BaseTile, { className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? jsx("span", { className: "mb-2", children: description }) : null, items.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items })) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia }) : null, renderButtonsSection([button], { className: 'pt-2 mt-16' })] }) }) }));
+        return (jsx(BlockWrapper, { className: style('relative p-7 min-w-[524px] 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", 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, renderButtonsSection([button], { className: 'pt-2 mt-16' })] }) }) }));
     });
 
     const VISIBLE_CELLS_COUNT = 1;
@@ -2232,8 +2234,8 @@
     const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
     const Footer = JSX(({ className = '', ...rest }) => {
         const fallback = rest.options?.page?.fallback;
-        const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, logo } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
-        return (jsxs(BlockWrapper, { tag: "footer", className: `p-9 ${className}`, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD, logo: logo }), jsx(SearchBar$1, { className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, hasButton: true }), jsx(SocialMedia, { media: socialMedia, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "pt-[3px]", items: topItems, fallback: fallback })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
+        const { 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 })] }));
     });
 
     const galleryLengthForScrollMap = {
@@ -2326,6 +2328,14 @@
         ? '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) => {
@@ -2425,19 +2435,70 @@
         return (jsxs("div", { className: "flex gap-x-3", children: [icon ? jsx(ImgInner, { pathPrefix: "/wcms-resources/", image: icon }) : null, text ? (jsx("a", { className: "hover:text-primary-hover", href: href, target: target, onClick: onClick, children: text })) : null] }));
     });
 
-    const HeaderSecondaryMenuButton = JSX(({ className = '', children, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 p-0 w-6 h-6 flex items-center bg-inherit cursor-pointer ${className}`, disabled: true, "aria-label": ariaLabel, children: children })));
+    const HeaderSecondaryMenuButton = JSX(({ className, isRounded, disabled, ariaLabel, image, onClick }) => (jsx("button", { className: style('group/btn border-0 p-0 flex items-center bg-inherit', isRounded
+            ? 'w-8 h-8 text-secondary-light hover:text-secondary-hove'
+            : 'w-6 h-6 text-primary-text hover:text-primary-main', 'group-data-transparent:text-white', className), type: "button", disabled: disabled, "aria-label": ariaLabel, onClick: onClick, children: jsx(ImgInner, { 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", asSVG: true }) })));
+
+    const getNS = (_) => globalThis[_];
+    function useExternalNS(namespaceName, url) {
+        const [externalNS, setExternalNS] = useState();
+        const setNS = useCallback(() => setExternalNS(getNS(namespaceName)), [namespaceName]);
+        useEffect(() => {
+            const script = document.getElementById(url);
+            if (script) {
+                if (getNS(namespaceName)) {
+                    setNS();
+                }
+                else {
+                    script.addEventListener('load', setNS);
+                    return () => {
+                        script.removeEventListener('load', setNS);
+                    };
+                }
+            }
+            else {
+                const newScript = document.createElement('script');
+                newScript.src = url;
+                newScript.async = true;
+                newScript.id = url;
+                newScript.addEventListener('load', setNS);
+                document.head.appendChild(newScript);
+                return () => {
+                    document.head.removeChild(newScript);
+                    setExternalNS(undefined);
+                };
+            }
+            return undefined;
+        }, [namespaceName, url]);
+        return externalNS;
+    }
+
+    const CHATBOT_NAMESPACE = 'chatbot';
+    const CHATBOT_URL = {
+        personal: '//chat.mes.rshb.ru/assets/js/webchat_rshb',
+        business: '', //TODO: add url business chat
+    };
+    const useChatBot = (chat) => {
+        useEffect(() => globalThis.localStorage?.setItem('webchat-keep-open', String(Date.now())), []);
+        return useExternalNS(CHATBOT_NAMESPACE, CHATBOT_URL[chat]);
+    };
+
+    const CHAT_BUTTON_EXTERNAL_NAME = 'text-page__btn-chat';
+    const HeaderChatBotButton = JSX((props) => {
+        const [loadRequested, { setTrue: load }] = useBool();
+        return loadRequested ? (jsx(HeaderChatBotButtonWithLoader, { ...props })) : (renderChatBotButton({ ...props, onClick: load }));
+    });
+    const HeaderChatBotButtonWithLoader = JSX(({ chat = 'personal', ...rest }) => {
+        useChatBot(chat);
+        return renderChatBotButton(rest);
+    });
+    const renderChatBotButton = ({ className, iconVersion, onClick }) => (jsx(HeaderSecondaryMenuButton, { className: style(CHAT_BUTTON_EXTERNAL_NAME, className), image: { icon: 'HeadphonesIcon', iconVersion }, ariaLabel: "\u0427\u0430\u0442", onClick: onClick }));
 
-    const HeaderSecondaryMenu = JSX(({ version, className, officesLink, defaultLocation = 'Москва', foreignOffices }) => {
-        const [isShowLocationModal, setShowLocationModal] = useState(false);
+    const HeaderSecondaryMenu = JSX(({ version, className, officesLink, defaultLocation = 'Москва', foreignOffices, chat }) => {
+        const [isShowLocationModal, { setTrue: showLocationModal, setFalse: hideLocationModal }] = useBool();
         const [location, onChangeLocation] = useLocation(defaultLocation);
-        const showLocationModal = useCallback(() => {
-            setShowLocationModal(true);
-        }, []);
-        const hideLocationModal = useCallback(() => {
-            setShowLocationModal(false);
-        }, []);
         const iconVersion = version === 'transparent' ? 'white' : 'black';
-        return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: location.name, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: showLocationModal }), officesLink ? (jsx(TopItem, { className: "mr-7", flat: true, href: officesLink, text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432" })) : null, jsx(HeaderSecondaryMenuButton, { className: "mr-5 group/btn text-primary-text hover:text-primary-main group-data-transparent:text-white", ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(ImgInner, { image: { icon: 'LoupeIcon', iconVersion }, className: "h-full pointer-events-none", imageClassName: "group-hover/btn:text-primary-hover group-hover/btn:invert-0 pointer-events-none", asSVG: true }) }), jsx(HeaderSecondaryMenuButton, { className: "group/btn min-w-8 min-h-8 text-secondary-light hover:text-secondary-hover group-data-transparent:text-white", ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(ImgInner, { image: { icon: 'GridIcon', iconVersion }, className: "h-full bg-main-divider/20 rounded-full pointer-events-none", imageClassName: "group-hover/btn:text-primary-hover group-hover/btn:invert-0", asSVG: true }) }), isShowLocationModal ? (jsx(Location, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation, close: hideLocationModal })) : null] }));
+        return (jsxs("div", { className: style('flex items-center', className), children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: location.name, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: showLocationModal }), officesLink ? (jsx(TopItem, { className: "mr-7", flat: true, href: officesLink, text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432" })) : null, chat ? (jsx(HeaderChatBotButton, { className: "mr-5", iconVersion: iconVersion, chat: chat })) : null, jsx(HeaderSecondaryMenuButton, { className: "mr-5", image: { icon: 'LoupeIcon', iconVersion }, ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", disabled: true }), jsx(HeaderSecondaryMenuButton, { image: { icon: 'GridIcon', iconVersion }, ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", isRounded: true, disabled: true }), isShowLocationModal ? (jsx(Location, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation, close: hideLocationModal })) : null] }));
     });
 
     const findActiveSubItem = (router) => (items = []) => {
@@ -2453,9 +2514,9 @@
         const handleToggle = useCallback(() => setVisible((_) => !_), []);
         const handleClickOutside = useCallback(() => setVisible(false), []);
         const ref = useOutsideClick(handleClickOutside);
-        return (jsxs("div", { className: `${visible ? 'bg-white rounded-md shadow-blue-gray' : ''} ${className}`, ref: ref, children: [jsx("button", { className: "group/btn flex justify-between items-center h-6 ml-6", "aria-label": `${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, onClick: handleToggle, children: Array(3)
+        return (jsxs("div", { className: style(visible ? 'bg-white rounded-md shadow-blue-gray' : '', className), ref: ref, children: [jsx("button", { className: "group/btn flex justify-between items-center h-6 ml-6", "aria-label": `${visible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, onClick: handleToggle, children: Array(3)
                         .fill(null)
-                        .map((_, i) => (jsx("div", { className: "w-[3px] h-[3px] rounded mr-1 bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white" }, String(i)))) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`, "aria-hidden": !visible, children: items?.map((item, i) => (jsx("a", { className: `text-l-light pb-4 hover:text-primary-main ${item === activeItem ? 'text-primary-main' : ''}`, ...link(item), children: item.text }, item.href || String(i)))) })] }));
+                        .map((_, i) => (jsx("div", { className: "w-[3px] h-[3px] rounded mr-1 bg-primary-text group-hover/btn:bg-primary-hover group-data-transparent:bg-white" }, String(i)))) }), jsx("div", { className: style('flex flex-col rounded-md bg-white p-6 pb-2', visible ? '' : 'hidden'), "aria-hidden": !visible, children: items?.map((item, i) => (jsx("a", { className: style('text-l-light pb-4 hover:text-primary-main', item === activeItem ? 'text-primary-main' : ''), ...link(item), children: item.text }, item.href || String(i)))) })] }));
     });
 
     const HeaderItem = JSX(({ className = '', active, dataItemName, children, ...rest }) => {
@@ -2500,12 +2561,12 @@
         'bg-white': 'primary',
         transparent: 'transparent',
     };
-    const Header = JSX(({ bgColor = 'bg-white', className = '', showSubMenu = true, version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
+    const Header = JSX(({ bgColor = 'bg-white', className, showSubMenu = true, version = BG_COLOR_TO_BLOCK_VERSION[bgColor], chat, ...rest }) => {
         const router = useRouter();
         const { topItems, logo, defaultLocation, foreignOffices, officesLink } = useSWRResource(projectSettings.SITEMAP || 'sitemap', rest.options?.page?.fallback);
         const activeTopItem = topItems?.find(isTopItemActive(router));
         const topMenu = topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, "aria-label": _.text, ..._ }, String(i))));
-        return (jsx(BlockWrapper, { tag: "header", className: `pt-6 px-20 ${className} ${showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5'}`, version: version, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", foreignOffices: foreignOffices, defaultLocation: defaultLocation, officesLink: officesLink })] }), jsx("div", { className: `mt-6 h-px bg-main-divider${version === 'transparent' ? ' opacity-30' : ''}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items })) : null] }) }));
+        return (jsx(BlockWrapper, { tag: "header", className: style('pt-6 px-20', showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5', className), version: version, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", foreignOffices: foreignOffices, defaultLocation: defaultLocation, officesLink: officesLink, chat: chat })] }), jsx("div", { className: style('mt-6 h-px bg-main-divider', version === 'transparent' ? 'opacity-30' : '') }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items })) : null] }) }));
     });
 
     const gapStyles = {
@@ -2832,40 +2893,6 @@
         return (jsx("div", { className: `select-none cursor-pointer py-4 w-12 bg-white ${Object.values(styles$1).join(' ')} ${className}`, onClick: setUserGeoLocation, children: jsx(Icon, { name: "UserGeoLocationIcon", width: "20", height: "16" }) }));
     };
 
-    const getNS = (_) => globalThis[_];
-    function useExternalNS(namespaceName, url) {
-        const [externalNS, setExternalNS] = useState();
-        const setNS = useCallback(() => setExternalNS(getNS(namespaceName)), [namespaceName]);
-        useEffect(() => {
-            const script = document.getElementById(url);
-            if (script) {
-                if (getNS(namespaceName)) {
-                    setNS();
-                }
-                else {
-                    script.addEventListener('load', setNS);
-                    return () => {
-                        script.removeEventListener('load', setNS);
-                    };
-                }
-            }
-            else {
-                const newScript = document.createElement('script');
-                newScript.src = url;
-                newScript.async = true;
-                newScript.id = url;
-                newScript.addEventListener('load', setNS);
-                document.head.appendChild(newScript);
-                return () => {
-                    document.head.removeChild(newScript);
-                    setExternalNS(undefined);
-                };
-            }
-            return undefined;
-        }, [namespaceName, url]);
-        return externalNS;
-    }
-
     const YMAPS_NAMESPACE = 'ymaps';
     const useYandexMaps = () => {
         const url = `https://api-maps.yandex.ru/2.1/?apikey=${projectSettings.YANDEX_MAP_API_KEY || ''}&lang=ru_RU`;
@@ -3638,60 +3665,139 @@
     };
 
     const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
-    const ACTIVE_LINK_CLASSES = 'bg-primary-main';
     const INACTIVE_LINK_CLASSES = 'group/btn bg-white';
-    const TEXT_CLASSES = 'font-sans text-m';
+    const SCROLLABLE_ACTIVE_LINK_CLASSES = 'bg-white text-primary-main';
+    const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
+    const TEXT_CLASSES = 'font-sans text-m text-center';
     const ACTIVE_TEXT_CLASSES = 'text-white';
     const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
+    const WHITE_ACTIVE_TEXT_CLASSES = 'text-primary-main';
+    const GROUP_TAB_CLASSES = {
+        div: {
+            scrollable: {
+                active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
+                default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+            },
+            default: {
+                active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+                default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES} whitespace-nowrap`,
+            },
+        },
+        text: {
+            scrollable: {
+                active: `h-full border-0 border-b-2`,
+                default: ``,
+            },
+            default: {
+                active: '',
+                default: '',
+            },
+        },
+    };
+    const LINK_TAB_CLASSES = {
+        link: {
+            scrollable: {
+                active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
+                default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+            },
+            default: {
+                active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
+                default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+            },
+        },
+        text: {
+            scrollable: {
+                active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
+                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+            },
+            default: {
+                active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
+                default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+            },
+        },
+    };
+    const getGroupTabClassName = (type, active, isScrollable) => {
+        const styleType = isScrollable ? 'scrollable' : 'default';
+        const styleActive = active ? 'active' : 'default';
+        return GROUP_TAB_CLASSES[type][styleType][styleActive];
+    };
+    const getLinkTabClassName = (type, active, isScrollable) => {
+        const styleType = isScrollable ? 'scrollable' : 'default';
+        const styleActive = active ? 'active' : 'default';
+        return LINK_TAB_CLASSES[type][styleType][styleActive];
+    };
 
     const LinkTab = JSX((props) => {
-        const { tab, currentTab } = props;
+        const { tab, currentTab, isScrollable = false } = props;
         const active = currentTab?.type === 'link' && currentTab.href === tab.href;
         const link = useLink();
         const adjustedProps = link(tab);
-        return (jsx("a", { role: "tab", className: `${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`, target: tab.target, href: adjustedProps.href, onClick: adjustedProps.onClick, children: jsx("span", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: tab.text }) }));
+        return (jsx("a", { role: "tab", className: getLinkTabClassName('link', active, isScrollable), target: tab.target, href: adjustedProps.href, onClick: adjustedProps.onClick, children: jsx("span", { className: getLinkTabClassName('text', active, isScrollable), children: tab.text }) }));
     });
 
     const BADGE_CLASSES = 'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
     const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
     const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
-    const renderGroupTab = ({ page, currentTab, showCounter, onClick }) => (tab, i) => {
+    const renderGroupTab = ({ page, currentTab, showCounter, onClick, isScrollable = false }) => (tab, i) => {
         const active = currentTab === tab;
         const count = tab.ref && page?.blocks
             ? page.blocks.filter((block) => block?.labels?.includes(tab.ref)).length
             : 0;
-        return (jsx("div", { className: `${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`, role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? renderTitle$2(tab.title, active) : null, showCounter && count ? renderCount(count, active) : null] }) }, String(i)));
+        return (jsx("div", { className: getGroupTabClassName('div', active, isScrollable), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsxs("div", { className: `flex flex-1 items-center justify-center ${getGroupTabClassName('text', active, isScrollable)}`, children: [renderTitle$2(tab.title, active, isScrollable), renderCount(showCounter, count, active)] }) }, `group-${String(i)}`));
+    };
+    const renderTitle$2 = (title, active, isScrollable) => {
+        const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
+        const titleClassName = isScrollable
+            ? `${TEXT_CLASSES} ${activeClassName}`
+            : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
+        return title ? jsx("h3", { className: titleClassName, children: title }) : null;
+    };
+    const renderCount = (showCounter, count, active) => {
+        return showCounter && count ? (jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count })) : null;
     };
-    const renderTitle$2 = (title, active) => (jsx("h3", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: title }));
-    const renderCount = (count, active) => (jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count }));
 
-    const renderTab = ({ page, currentTab, showCounter, onClick }) => 
-    // Linter doesn't understand that switch processes all cases
-    // eslint-disable-next-line consistent-return
-    (tab, i) => {
+    const renderTab = ({ page, currentTab, showCounter, onClick, isScrollable = false }) => (tab, i) => {
         const type = tab.type;
         if (!(type === 'group' || type === 'link')) {
             return null;
         }
         switch (type) {
             case 'group':
-                return renderGroupTab({ page, currentTab, showCounter, onClick })(tab, i);
+                return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
             case 'link': {
-                return jsx(LinkTab, { tab: tab, currentTab: currentTab }, String(i));
+                return (jsx(LinkTab, { tab: tab, currentTab: currentTab, isScrollable: isScrollable }, String(i)));
             }
             default:
                 assertUnreachable(type);
         }
+        return null;
     };
 
+    const scrollButtonStyle = 'absolute z-50 top-0';
+    const ScrollableTabs = JSX((props) => {
+        const { tabs, onClick, currentTab, page, showCounter } = props;
+        const [containerRef, scroll] = useSwipeListScroll({
+            itemCount: tabs?.length || 0,
+            isCyclic: false,
+        });
+        return (jsxs("div", { className: "relative max-w-full m-auto", children: [jsx("div", { className: `font-sans max-w-full w-full overflow-hidden relative bg-white`, children: jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: tabs?.map(renderTab({
+                            onClick,
+                            currentTab,
+                            showCounter,
+                            page,
+                            isScrollable: true,
+                        })) }) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-6`, onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle} rotate-180 right-6`, onClick: scroll.scrollRight })) : null] }));
+    });
+
     const Tabs = JSX((props) => {
-        const { className = '', tabs, showCounter, isSticky, ...rest } = props;
+        const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
         const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
         useEffect(() => EventBus.inst.subscribe('tab', (event) => {
             const tab = tabs?.find(checkTab(event));
             if (event.type === 'link' && tab) {
                 setCurrentTab(tab);
             }
+            return [];
         }), [tabs]);
         useEffect(() => currentTab?.type === 'group'
             ? EventBus.inst.subject('tab', { label: currentTab.ref })
@@ -3702,7 +3808,12 @@
             }
             setCurrentTab(selectedTab);
         }, []);
-        return (jsx(BlockWrapper, { className: `${isSticky ? 'sticky top-1 z-20 ' : ''}box-border flex gap-x-1 ${className}`, role: "tablist", ...rest, children: tabs?.map(renderTab({ onClick: handleClick, currentTab, showCounter, ...rest })) }));
+        return (jsx(BlockWrapper, { className: `relative box-border flex gap-x-1 w-full ${isSticky ? 'sticky top-1 z-20 ' : ''} ${className}`, role: "tablist", ...rest, children: tabsMode === 'scrollable' ? (jsx(ScrollableTabs, { tabs: tabs, onClick: handleClick, currentTab: currentTab, showCounter: showCounter, ...rest })) : (tabs?.map(renderTab({
+                onClick: handleClick,
+                currentTab,
+                showCounter,
+                ...rest,
+            }))) }));
     });
     const checkTab = (event) => (_) => _.type === 'link' && _.href === `#${event.label}`;
 
@@ -4114,7 +4225,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.7.5";
+    const packageVersion = "0.7.7";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;