@redneckz/wildless-cms-uni-blocks 0.7.6 → 0.7.8

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',
         '': '',
     };
 
@@ -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 HeaderSecondaryMenu = JSX(({ version, className, officesLink, defaultLocation = 'Москва', foreignOffices }) => {
-        const [isShowLocationModal, setShowLocationModal] = useState(false);
+    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, 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`;
@@ -3170,8 +3197,34 @@
         return `w-12 h-12 min-w-12 rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
     }
 
+    const RichText = JSX((props) => {
+        const { __html = '' } = props;
+        return jsx("div", { className: "md-container", dangerouslySetInnerHTML: { __html } });
+    });
+
+    function assertUnreachable(x) {
+        throw new Error(x);
+    }
+
+    const renderBenefit$2 = 
+    // Linter doesn't understand that switch processes all cases
+    // eslint-disable-next-line consistent-return
+    (version) => (benefit, i) => {
+        const { type } = benefit;
+        if (!(type === 'default' || type === 'rte')) {
+            return null;
+        }
+        switch (type) {
+            case 'default':
+                return (jsx(BenefitItem, { icon: benefit.icon, label: benefit.label, description: benefit.description, version: version }, String(i)));
+            case 'rte':
+                return jsx(RichText, { __html: benefit.__html });
+            default:
+                assertUnreachable(benefit);
+        }
+    };
+
     const PictureText = JSX(({ className = '', title, description, image, benefits, sum, monthLimit, directionRight = false, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `relative py-12 px-24 ${className}`, version: version, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M" }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src ? jsx(ImgInner, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(Number(sum), Number(monthLimit))] })] })] })));
-    const renderBenefit$2 = (version) => (benefit, i) => (jsx(BenefitItem, { icon: benefit.icon, label: benefit.label, description: benefit.description, version: version }, String(i)));
     function renderInsuranceSumMonth(sum, monthLimit) {
         return sum || monthLimit ? (jsxs("div", { className: "bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4", children: [Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null, Number(monthLimit) > 0
                     ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum))
@@ -3289,15 +3342,6 @@
         return (jsx("div", { className: `mt-2.5 z-10 ${descriptionWidth}`, children: jsx(Paragraph, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription }) }));
     }
 
-    const RichText = JSX((props) => {
-        const { __html = '' } = props;
-        return jsx("div", { className: "md-container", dangerouslySetInnerHTML: { __html } });
-    });
-
-    function assertUnreachable(x) {
-        throw new Error(x);
-    }
-
     const renderBenefit = 
     // Linter doesn't understand that switch processes all cases
     // eslint-disable-next-line consistent-return
@@ -3313,7 +3357,7 @@
                     jsx(Text, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: benefit.description }, `desc-${i}`),
                 ];
             case 'rte':
-                return jsx(RichText, { __html: benefit.__html });
+                return (jsx("div", { className: "col-span-2", children: jsx(RichText, { __html: benefit.__html }) }));
             default:
                 assertUnreachable(benefit);
         }
@@ -4198,7 +4242,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.6";
+    const packageVersion = "0.7.8";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;