@redneckz/wildless-cms-uni-blocks 0.9.3 → 0.9.5

package/bundle/bundle.umd.js

@@ -236,61 +236,27 @@
         return JSXTmpl;
     };
 
-    const DEFAULT_SLOT_NAME = null;
-
-    const style = (...atoms) => atoms
-        .flatMap((_) => _)
-        .filter(Boolean)
-        .join(' ');
-
-    const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
-
-    const DEFAULT_ANCESTORS = [];
-    const defaultStyle = 'col-span-12';
-    function renderBlock(block, options) {
-        const { key, blockDecorator = defaultBlockDecorator, blocksRegistry = {}, ancestors = DEFAULT_ANCESTORS, className = '', extraProps = {}, } = options;
-        const { type } = block;
-        if (!(type && type in blocksRegistry)) {
-            console.warn(`No block with "${type}" is registered`);
-        }
-        const BlockComponent = type && blocksRegistry[type];
-        return blockDecorator({
-            blockClassName: style('scroll-mt-12', // TODO scroll-mt-12 ? here?
-            className, block.style || defaultStyle),
-            block,
-            ancestors,
-            // Adjusted by decorator block and blockClassName
-            render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
-                const { content } = adjustedBlock;
-                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, block: block, options: options, ...content, ...extraProps }, key)) : null;
-            },
-        }, key);
-    }
-
-    const EMPTY_ANCESTORS = [];
-    const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, renderProps = renderBlock, ...options }) => (blocks || []).map((_, j) => renderProps(_, {
-        ...options,
-        key: `${key ? key : _.type}-${j}`,
-        ancestors: options.parent
-            ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
-            : ancestors,
-    }));
-
-    function renderChildren({ children, block, options, renderProps, }) {
-        if (children) {
-            return children;
+    function CorporateLeadAPI() {
+        async function send(body) {
+            try {
+                const response = await fetch('/api/v1/sendcorporatelead', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    mode: 'cors',
+                    body: JSON.stringify(body),
+                });
+                const data = await response.json();
+                return data;
+            }
+            catch (e) {
+                return null;
+            }
         }
-        return block && options
-            ? renderBlocksList(block.blocks, { ...options, parent: block, renderProps })
-            : null;
+        return {
+            send,
+        };
     }
 
-    const AlignText = {
-        left: 'text-left',
-        center: 'text-center',
-        right: 'text-right',
-    };
-
     class EventBus {
         subscribers = {};
         subjectsStateMap = {};
@@ -358,6 +324,11 @@
         return useIntersectionObserver(observerCallback, { sensitivity: 1 });
     }
 
+    const style = (...atoms) => atoms
+        .flatMap((_) => _)
+        .filter(Boolean)
+        .join(' ');
+
     const blockStyles = {
         primary: 'bg-white text-primary-text',
         secondary: 'bg-primary-main text-white',
@@ -387,32 +358,6 @@
     };
     const Heading = JSX(({ className = '', headingType = 'h3', as: Tag = 'h3', title, children }) => (jsx(Tag, { className: `font-sans m-0 ${styles$4[headingType]} ${className}`, children: title || children })));
 
-    const Paragraph = JSX(({ children, ...style }) => (jsx("p", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
-
-    const Accordion = JSX(({ className = '', title, accordionAlignTitle = 'center', description, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 mb-1 last:mb-0 ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: `mb-2.5 ${AlignText[accordionAlignTitle]}`, title: title })) : null, description ? (jsx("div", { className: "mb-2.5", children: jsx(Paragraph, { size: "text-l", children: description }) })) : null, jsx("div", { className: "list-none m-0 p-0", children: renderChildren(rest) })] })));
-    Accordion.childrenTypes = ['Accordion'];
-
-    function CorporateLeadAPI() {
-        async function send(body) {
-            try {
-                const response = await fetch('/api/v1/sendcorporatelead', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    mode: 'cors',
-                    body: JSON.stringify(body),
-                });
-                const data = await response.json();
-                return data;
-            }
-            catch (e) {
-                return null;
-            }
-        }
-        return {
-            send,
-        };
-    }
-
     const Input = JSX(({ className = '', inputClassName = '', id, name, type = 'text', label, value = '', valid = true, children, onChange, onBlur, ...inputProps }) => {
         const handleChange = useCallback((e) => {
             const validInputValue = e.target.validity.valid ? e.target.value : value;
@@ -536,6 +481,11 @@
         },
     ];
 
+    const useDialog = (id = '') => ({
+        open: (message) => defaultEventBus.fire('dialog', { type: 'open', id, message }),
+        close: () => defaultEventBus.fire('dialog', { type: 'close' }),
+    });
+
     const dirname = (path) => path?.split('/').slice(0, -1).join('/');
 
     const isURL = (href) => Boolean(href?.includes(':'));
@@ -590,6 +540,7 @@
 
     function useLink(isRemote = false) {
         const router = useRouter();
+        const { close } = useDialog();
         return (props) => ({
             ...props,
             href: isRemote ? props.href : adjustHref(router)(props.href),
@@ -603,6 +554,7 @@
                     // Default routing
                     return;
                 }
+                close();
                 // Client routing
                 ev?.preventDefault();
                 router.push(href);
@@ -683,6 +635,8 @@
     const RegularButton = JSX(({ className = '', href, rel, target, ariaLabel, version, rounded, onClick, children }) => (jsx("a", { className: getRegularButtonClasses({ className, version, rounded }), href: href, rel: rel, target: target, "aria-label": ariaLabel, role: href ? 'link' : 'button', onClick: onClick, children: children })));
     const DisabledButton = JSX(({ className, ariaLabel, version, rounded, children }) => (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: -1, className: getDisabledButtonClasses({ className, rounded, version }), children: children })));
 
+    const Paragraph = JSX(({ children, ...style }) => (jsx("p", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
+
     const Text = JSX(({ children, ...style }) => (jsx("span", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
 
     const Footnote = JSX(({ link }) => (jsxs(Paragraph, { size: "text-s-light", color: "text-secondary-text", children: [jsx(Text, { children: "\u041D\u0430\u0436\u0438\u043C\u0430\u044F \u043A\u043D\u043E\u043F\u043A\u0443 \u0432\u044B \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0435\u0442\u0435 \u0441\u043E\u0433\u043B\u0430\u0441\u0438\u0435 \u0441 " }), link ? (jsx(Button, { href: link.href, ariaLabel: "\u0443\u0441\u043B\u043E\u0432\u0438\u044F \u043F\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043D\u043D\u044B\u0445", target: link.target, className: "text-primary-main", children: jsx(Text, { children: link.text }) })) : null] })));
@@ -1216,6 +1170,12 @@
     const renderBonusCount = (_) => (jsxs("div", { className: "relative -bottom-3 h-auto flex items-end mt-14 shrink-0", children: [_.bonusCount ? (jsx("span", { className: "font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7", children: _.bonusCount })) : null, _.bonusName ? (jsx("span", { className: "text-h2 bg-clip-text text-transparent bg-green-to-yellow", children: _.bonusName })) : null] }));
     const renderBonusImage = (_) => _.image ? jsx(ImgInner, { className: `w-12 h-12 min-w-12 p-3 rounded-full`, image: _.image }) : null;
 
+    const AlignText = {
+        left: 'text-left',
+        center: 'text-center',
+        right: 'text-right',
+    };
+
     const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-12 flex flex-col text-center ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-8", title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] })));
     const renderBonusBenefit = ({ icon, title, description }, i) => {
         return (jsxs("div", { className: style('flex flex-col items-center text-h6', !description && !title ? 'justify-center' : ''), children: [title ? jsx("span", { children: title }) : null, icon ? jsx(ImgInner, { image: icon, height: "180", width: "auto", className: "w-auto" }) : null, description ? jsx("span", { children: description }) : null] }, String(i)));
@@ -1836,6 +1796,50 @@
         return (jsxs(BlockWrapper, { className: `p-12 flex flex-col items-center ${className}`, ...rest, children: [title ? jsx(Heading, { className: "max-w-[684px] pb-9", headingType: "h2", title: title }) : null, jsxs("form", { className: "w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, value: value, onChange: handleChange, valid: value === '' || !isDisabled, placeholder: placeholder, label: label }), button?.text ? (jsx("button", { type: "submit", className: `w-full p-4 mt-6 ${buttonStyle} `, disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
     });
 
+    const DEFAULT_SLOT_NAME = null;
+
+    const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
+
+    const DEFAULT_ANCESTORS = [];
+    const defaultStyle = 'col-span-12';
+    function renderBlock(block, options) {
+        const { key, blockDecorator = defaultBlockDecorator, blocksRegistry = {}, ancestors = DEFAULT_ANCESTORS, className = '', extraProps = {}, } = options;
+        const { type } = block;
+        if (!(type && type in blocksRegistry)) {
+            console.warn(`No block with "${type}" is registered`);
+        }
+        const BlockComponent = type && blocksRegistry[type];
+        return blockDecorator({
+            blockClassName: style('scroll-mt-12', // TODO scroll-mt-12 ? here?
+            className, block.style || defaultStyle),
+            block,
+            ancestors,
+            // Adjusted by decorator block and blockClassName
+            render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
+                const { content } = adjustedBlock;
+                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, block: block, options: options, ...content, ...extraProps }, key)) : null;
+            },
+        }, key);
+    }
+
+    const EMPTY_ANCESTORS = [];
+    const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, renderProps = renderBlock, ...options }) => (blocks || []).map((_, j) => renderProps(_, {
+        ...options,
+        key: `${key ? key : _.type}-${j}`,
+        ancestors: options.parent
+            ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
+            : ancestors,
+    }));
+
+    function renderChildren({ children, block, options, renderProps, }) {
+        if (children) {
+            return children;
+        }
+        return block && options
+            ? renderBlocksList(block.blocks, { ...options, parent: block, renderProps })
+            : null;
+    }
+
     const mapChildren = (mapper) => (children) => {
         if (children === null || children === undefined) {
             return children;
@@ -2653,14 +2657,34 @@
         return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$2(bgColor, logo?.image, { width: '40', height: '45' }), showTitle ? renderTitle$3(children || logo?.title, bgColor) : null] }));
     });
 
-    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 CloseButton = JSX(({ className, onClick }) => (jsx("button", { className: style('visible peer-placeholder-shown:invisible w-6 h-6 p-1 bg-transparent border-none', className), onClick: onClick, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(ImgInner, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
+
+    function assertUnreachable(x) {
+        throw new Error(x);
+    }
+
+    function useDialogHandlers({ onOpen, onClose } = {}) {
+        useEffect(() => defaultEventBus.subscribe('dialog', (action) => {
+            switch (action.type) {
+                case 'open':
+                    onOpen && onOpen(action);
+                    break;
+                case 'close':
+                    onClose && onClose();
+                    break;
+                default:
+                    assertUnreachable(action);
+            }
+        }), [onOpen, onClose]);
     }
 
+    const useDebouncedEffect = (effect, deps, delay = 300) => useEffect(() => {
+        const timerId = setTimeout(effect, delay);
+        return () => {
+            clearTimeout(timerId);
+        };
+    }, deps);
+
     const compareBy = (indexOf) => (a, b) => indexOf(a) - indexOf(b);
     const desc = (cmp) => (a, b) => -cmp(a, b);
 
@@ -2785,37 +2809,27 @@
     const fillMapWith = (keys, value) => new Map(keys.map((_) => [_, value]));
 
     const SEARCH_INDEX_FILENAME = 'search.index.json';
-    const useSearch = (basePathList = ['/']) => {
-        const [query, setQuery] = useState('');
-        const [wasQueryFocused, setWasQueryFocused] = useState(false);
-        const handleFocus = useCallback(() => {
-            setWasQueryFocused(true);
-        }, []);
-        const key = useMemo(() => basePathList.map((_) => (wasQueryFocused ? _ : null)), // Load search index on input focus
-        [wasQueryFocused, ...basePathList]);
+    const useSearch = ({ basePathList = ['/'], initialQuery = '', wasOpened, }) => {
+        const [query, setQuery] = useState(initialQuery || '');
+        useEffect(() => {
+            if (initialQuery !== undefined && initialQuery !== null) {
+                setQuery(initialQuery);
+            }
+        }, [initialQuery]);
+        const key = useMemo(() => basePathList.map((_) => (wasOpened ? _ : null)), // Load search index on very first search
+        [wasOpened, ...basePathList]);
         const { data } = useAsyncData(key, fetchSearchIndex);
         const [result, setResult] = useState(null);
-        useEffect(() => {
-            const timerId = setTimeout(() => {
-                if (data) {
-                    setResult(data.map(search(query)));
-                }
-            }, 300);
-            return () => {
-                clearTimeout(timerId);
-            };
+        useDebouncedEffect(() => {
+            if (data) {
+                setResult(data.map(search(query)));
+            }
         }, [data, query]);
-        return [result, { value: query, onChange: setQuery, onFocus: handleFocus }];
+        return [result, { value: query, onChange: setQuery }];
     };
     const fetchSearchIndex = async (...basePathList) => (await Promise.allSettled(basePathList.map((basePath) => fetchJSON(joinPath(basePath, '/', SEARCH_INDEX_FILENAME))))).map((_) => (_.status === 'fulfilled' ? _.value : {}));
 
-    const CloseButton = JSX(({ className, onClick }) => (jsx("button", { className: style('visible peer-placeholder-shown:invisible w-6 h-6 p-1 bg-transparent border-none', className), onClick: onClick, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(ImgInner, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
-
-    const Dialog = JSX(({ className, head, children, onClose }) => {
-        const handleClose = useCallback((ev) => {
-            ev.preventDefault();
-            onClose && onClose();
-        }, [onClose]);
+    const Dialog = JSX(({ className, isOpened, head, children, onClose }) => {
         useEffect(() => {
             const handleEscape = ({ key }) => {
                 if (key === 'Escape') {
@@ -2827,9 +2841,47 @@
                 globalThis.document?.removeEventListener('keydown', handleEscape);
             };
         }, [onClose]);
-        return (jsx("div", { className: style('fixed inset-0 bg-white text-l-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar', className), role: "dialog", children: jsxs("div", { className: "relative container pb-12 min-h-full", children: [jsxs("div", { className: "sticky bg-white pt-6 top-0", children: [jsx(CloseButton, { className: "absolute top-3 -right-6", onClick: handleClose }), head] }), children] }) }));
+        return isOpened ? (jsx("div", { className: style('fixed inset-0 bg-white text-l-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar', className), role: "dialog", children: jsxs("div", { className: "relative container pb-12 min-h-full", children: [jsxs("div", { className: "sticky bg-white pt-6 top-0", children: [jsx(CloseButton, { className: "absolute top-3 -right-6", onClick: onClose }), head] }), children] }) })) : null;
     });
 
+    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 }];
+    }
+
+    function useDialogProps(id) {
+        const [isOpened, { setTrue: open, setFalse: close }] = useBool();
+        const [params, setParams] = useState({ id });
+        const wasOpened = useRef(isOpened);
+        wasOpened.current ||= isOpened;
+        const handleOpen = useCallback((_) => {
+            if (_.id === id) {
+                setParams(_);
+                open();
+            }
+            else {
+                close();
+            }
+        }, [id]);
+        useDialogHandlers({
+            onOpen: handleOpen,
+            onClose: close,
+        });
+        const handleCloseAsEventSource = useCallback(() => {
+            close();
+            defaultEventBus.fire('dialog', { type: 'close' });
+        }, []);
+        return {
+            ...params,
+            isOpened,
+            wasOpened: wasOpened.current,
+            onClose: handleCloseAsEventSource,
+        };
+    }
+
     const Sitemap = JSX(({ className, topItems }) => {
         const link = useLink(true);
         return (jsx("div", { className: style('flex items-start justify-between', className), children: topItems?.map(link).map(renderColumn) }));
@@ -2845,43 +2897,30 @@
         return (jsx("a", { className: style('text-l-light text-secondary-text hover:text-primary-main no-underline', 'overflow-x-hidden overflow-ellipsis whitespace-nowrap'), href: isAnotherPortal ? joinPath(basePath, href) : href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }));
     });
 
-    const SearchBarInput = JSX(({ className, isMobile, value, autoFocus, onChange, onFocus }) => {
+    const SearchInput = JSX(({ className, isMobile, value, autoFocus, onChange, onFocus }) => {
         const handleChange = useCallback((ev) => {
             onChange && onChange(ev.target?.value || '');
         }, [onChange]);
         return (jsxs("div", { className: style('font-sans relative', className), role: "form", children: [jsx("div", { className: "absolute h-full flex items-center pl-4 pointer-events-none", children: jsx(ImgInner, { image: { icon: 'LoupeIcon' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-12 pl-12 w-full text-l text-black outline-none box-border', 'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text', isMobile ? '' : 'h-full'), value: value, type: "text", name: "search-bar-input", placeholder: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", autoFocus: autoFocus, onChange: handleChange, onFocus: onFocus })] }));
     });
 
-    const MIN_QUERY_LEN = 3;
-    const SearchBarInner = JSX(({ className, isMobile, topItems }) => {
+    const SEARCH_DIALOG_ID = 'search';
+    const SearchDialog = JSX(({ topItems }) => {
+        const dialogProps = useDialogProps(SEARCH_DIALOG_ID);
         const basePathList = topItems?.map((_) => _.href || '/');
-        const [searchResult, searchInputProps] = useSearch(basePathList);
-        const { value, onChange, onFocus } = searchInputProps;
+        const [searchResult, searchInputProps] = useSearch({
+            basePathList,
+            initialQuery: dialogProps.message,
+            wasOpened: dialogProps.wasOpened,
+        });
         const searchItems = useMemo(() => combineTopItemsAndSearchResult(topItems)(searchResult), [topItems, searchResult]);
         useEffect(() => printSearchItems(searchItems), [searchItems]); // Temp
-        const [isSearchDialogOpen, { setTrue: openSearchDialog, setFalse: hideSearchDialog }] = useBool();
-        const handleInitialInputChange = useCallback((_) => {
-            onChange(_);
-            if (isQueryLongEnough(_)) {
-                openSearchDialog();
-            }
-        }, [onChange, isQueryLongEnough]);
-        const handleInitialInputFocus = useCallback(() => {
-            onFocus();
-            if (isQueryLongEnough(value)) {
-                openSearchDialog();
-            }
-        }, [value, onFocus]);
-        return (jsxs("div", { className: className, children: [jsx(SearchBarInput, { isMobile: isMobile, value: value, onChange: handleInitialInputChange, onFocus: handleInitialInputFocus }), isMobile ? (jsx(CloseButton, { className: "absolute top-2 right-3", onClick: (e) => {
-                        e.preventDefault();
-                        onChange('');
-                    } })) : null, isSearchDialogOpen ? (jsx(Dialog, { head: jsx(SearchBarInput, { className: "my-5", isMobile: isMobile, autoFocus: true, ...searchInputProps }), onClose: hideSearchDialog, children: jsx(Sitemap, { topItems: searchItems }) })) : null] }));
+        return (jsx(Dialog, { ...dialogProps, head: jsx(SearchInput, { className: "my-5", autoFocus: true, ...searchInputProps }), children: jsx(Sitemap, { topItems: searchItems }) }));
     });
-    const isQueryLongEnough = (_) => _ && _.length >= MIN_QUERY_LEN;
     const combineTopItemsAndSearchResult = (topItems) => (searchResult) => topItems?.length && searchResult?.length
         ? zip(topItems, searchResult).map(([_, portalSearchResult]) => ({
             ..._,
-            items: portalSearchResult?.map(({ title, uri }) => ({ text: title, href: uri })),
+            items: portalSearchResult?.map(({ title, uri }) => ({ text: title, href: joinPath('/', uri) })),
         }))
         : [];
     // Temp
@@ -2893,6 +2932,22 @@
         }
     }
 
+    const MIN_QUERY_LEN = 3;
+    const SearchBarInner = JSX(({ className, isMobile }) => {
+        const [value, setValue] = useState('');
+        const resetQueryOnDialogClose = useCallback(() => setValue(''), []);
+        useDialogHandlers({ onClose: resetQueryOnDialogClose });
+        const { open } = useDialog(SEARCH_DIALOG_ID);
+        const handleInitialInputChange = useCallback((_) => {
+            setValue(_);
+            if (isQueryLongEnough(_)) {
+                open(_);
+            }
+        }, []);
+        return (jsxs("div", { className: className, children: [jsx(SearchInput, { isMobile: isMobile, value: value, onChange: handleInitialInputChange }), isMobile ? (jsx(CloseButton, { className: "absolute top-2 right-3", onClick: resetQueryOnDialogClose })) : null] }));
+    });
+    const isQueryLongEnough = (_) => _ && _.length >= MIN_QUERY_LEN;
+
     const SearchBar$1 = JSX((props) => jsx(SearchBarInner, { ...props }));
 
     const Contacts = JSX(({ className = '', items, hasButton }) => (jsxs("div", { className: className, children: [items?.length ? items.map(renderContact) : null, hasButton ? (jsx(Button, { version: "primary", className: "mb-6 w-full", href: "https://www.rshb.ru/feedback/question/", target: "_blank", ariaLabel: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C", text: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C" })) : null] })));
@@ -2935,7 +2990,7 @@
         const fallback = rest.options?.page?.fallback;
         const sitemap = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
         const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, logo } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
-        return (jsxs(BlockWrapper, { tag: "footer", className: `p-9 ${className}`, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD, logo: logo }), jsx(SearchBar$1, { className: "grow", topItems: sitemap?.topItems })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, hasButton: true }), jsx(SocialMedia, { media: socialMedia, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "flex-grow", topItems: sitemap?.topItems })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
+        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: "flex-grow", topItems: sitemap?.topItems })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
     });
 
     const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: `p-12 ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0 mb-4", title: title, description: description, headlineVersion: "M" }), calendar ? renderCalendar(calendar) : null] })));
@@ -2954,22 +3009,6 @@
     const renderMonthNames = (item, colSize) => item.month?.map((_, i) => (jsx("div", { style: { flexBasis: `${colSize}%` }, children: _.text }, `monthName-${i}`)));
     const renderMonthImages = (item) => item.month?.map((_) => _.image?.src ? (jsx("div", { className: "h-[207px] border-r pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0", children: jsx(ImgInner, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
 
-    const isHrefActive = (router) => ({ href }) => withoutQuery(isURL(href) ? router.href : router.pathname).startsWith(withoutQuery(href));
-
-    const isTopItemActive = (router) => isHrefActive(projectSettings.BASE_PATH ? { pathname: projectSettings.BASE_PATH } : router);
-
-    const TopItem = JSX(({ className = '', active, flat, children, ...rest }) => {
-        const link = useLink(true);
-        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, children: jsx("span", { 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-4 py-2');
-    const getTextStyle$1 = (active = false, flat = false) => style('font-sans text-s-light', active
-        ? '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');
-
     const STORAGE_DEFAULT_TTL = 86400000; // 24 * 60 * 60 * 1000
     function useCachedAsyncData(key, fetcher, storage = globalThis?.localStorage) {
         const cachedFetcher = useCallback(async (...args) => {
@@ -2991,7 +3030,7 @@
     }
 
     const REGION_URL = '/api/v1/region';
-    function useLocation(defaultLocation) {
+    function useLocation(defaultLocation = 'Москва') {
         const currentLocation = getLocalStorageLocation();
         const [location, setLocation] = useState(currentLocation?.region ?? { name: defaultLocation });
         const { data } = useCachedAsyncData(REGION_URL, fetchJSONUnsafe);
@@ -3003,7 +3042,7 @@
         const onChangeLocation = useCallback((region) => {
             globalThis.localStorage?.setItem('location', JSON.stringify({ manual: true, region }));
             setLocation(region);
-        }, [setLocation]);
+        }, []);
         return [location, onChangeLocation];
     }
     const getLocalStorageLocation = () => {
@@ -3016,6 +3055,10 @@
         }
     };
 
+    const isHrefActive = (router) => ({ href }) => withoutQuery(isURL(href) ? router.href : router.pathname).startsWith(withoutQuery(href));
+
+    const isTopItemActive = (router) => isHrefActive(projectSettings.BASE_PATH ? { pathname: projectSettings.BASE_PATH } : router);
+
     const REGIONS_URL = '/api/v1/regions';
     function useRegions() {
         const { data } = useAsyncData(REGIONS_URL, fetchJSONUnsafe);
@@ -3038,13 +3081,19 @@
     });
 
     const SEARCH_TERM_MIN_LENGTH = 3;
-    const Location = JSX(({ currentLocation, onChangeLocation, onClose, foreignOffices }) => {
+    const LOCATION_DIALOG_ID = 'location';
+    const LocationDialog = JSX(({ currentLocation, onChangeLocation, foreignOffices }) => {
+        const dialogProps = useDialogProps(LOCATION_DIALOG_ID);
         const [query, setQuery] = useState('');
         const regions = cleanUpRegions(useRegions()).sort((a, b) => a.name.localeCompare(b.name));
         const regionsGroupByLetter = groupBy(regions, regionFirstLetter);
-        return (jsxs(Dialog, { head: jsxs("div", { children: [jsx(CurrentLocation, { currentLocation: currentLocation }), jsx(SearchBar, { onSearch: setQuery, searchTerm: query, className: "mb-7" })] }), onClose: onClose, children: [query && query.length >= SEARCH_TERM_MIN_LENGTH ? (jsx("div", { children: regions
+        const handleChangeLocation = useCallback((region) => {
+            dialogProps.onClose && dialogProps.onClose();
+            onChangeLocation && onChangeLocation(region);
+        }, [dialogProps.onClose, onChangeLocation]);
+        return (jsxs(Dialog, { ...dialogProps, head: jsxs("div", { children: [jsx(CurrentLocation, { currentLocation: currentLocation }), jsx(SearchBar, { onSearch: setQuery, searchTerm: query, className: "mb-7" })] }), children: [query && query.length >= SEARCH_TERM_MIN_LENGTH ? (jsx("div", { children: regions
                         .filter(({ name }) => name && jaroWinklerDistance(name.toLowerCase())(query.toLowerCase()) >= 0.8)
-                        .map(renderRegion({ onChangeLocation, onClose })) })) : (jsx("div", { className: "columns-5", children: Array.from(regionsGroupByLetter.entries()).map(renderRegionGroup({ onChangeLocation, onClose })) })), jsx(ForeignOffices, { foreignOffices: foreignOffices })] }));
+                        .map(renderRegion(handleChangeLocation)) })) : (jsx("div", { className: "columns-5", children: Array.from(regionsGroupByLetter.entries()).map(renderRegionGroup(handleChangeLocation)) })), jsx(ForeignOffices, { foreignOffices: foreignOffices })] }));
     });
     const regionFirstLetter = (region) => region.name?.charAt(0) || '';
     const cleanUpRegions = (regions) => regions.map((region) => ({
@@ -3052,10 +3101,9 @@
         name: region.name?.replace(/республика|область|край'/gi, '').trim() || '',
     }));
     const CurrentLocation = JSX(({ currentLocation }) => currentLocation ? (jsxs("div", { className: "mb-4", children: [jsx(Text, { size: "text-l", font: "font-light", children: "\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u044B\u0431\u0440\u0430\u043D:\u00A0" }), jsx("button", { className: "cursor-pointer", onClick: close, children: jsx(Text, { color: "text-primary-main", children: currentLocation.name }) })] })) : null);
-    const renderRegionGroup = ({ onChangeLocation, onClose }) => ([letter, regions]) => (jsxs("div", { className: "break-inside-avoid mb-7 w-[224px]", children: [jsx("div", { className: "mb-2.5", children: jsx(Text, { size: "text-h6", children: letter }) }), regions.map(renderRegion({ onChangeLocation, onClose }))] }, letter));
-    const renderRegion = ({ onChangeLocation, onClose }) => (region) => (jsx("div", { className: "mb-1", children: jsx("button", { className: "cursor-pointer hover:text-primary-hover", onClick: () => {
+    const renderRegionGroup = (onChangeLocation) => ([letter, regions]) => (jsxs("div", { className: "break-inside-avoid mb-7 w-[224px]", children: [jsx("div", { className: "mb-2.5", children: jsx(Text, { size: "text-h6", children: letter }) }), regions.map(renderRegion(onChangeLocation))] }, letter));
+    const renderRegion = (onChangeLocation) => (region) => (jsx("div", { className: "mb-1", children: jsx("button", { className: "cursor-pointer hover:text-primary-hover", onClick: () => {
                 onChangeLocation && onChangeLocation(region);
-                onClose && onClose();
             }, children: region.name || '' }) }, region.id));
     const ForeignOffices = JSX(({ foreignOffices }) => foreignOffices?.length ? (jsxs("div", { className: "border-t border-main-divider mt-7 pt-7", children: [jsx("div", { className: "mb-4", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: "\u041F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435\u043B\u044C\u0441\u0442\u0432\u0430 \u0437\u0430 \u0440\u0443\u0431\u0435\u0436\u043E\u043C:" }) }), jsx("div", { className: "flex gap-10", children: foreignOffices.map((office, i) => (jsx(ForeignOffice, { ...office }, String(i)))) })] })) : null);
     const ForeignOffice = JSX(({ icon, ...rest }) => {
@@ -3064,6 +3112,18 @@
         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 TopItem = JSX(({ className = '', active, flat, children, ...rest }) => {
+        const link = useLink(true);
+        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, children: jsx("span", { 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-4 py-2');
+    const getTextStyle$1 = (active = false, flat = false) => style('font-sans text-s-light', active
+        ? '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');
+
     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 }) })));
@@ -3123,16 +3183,13 @@
     });
     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, { setTrue: showLocationModal, setFalse: hideLocationModal }] = useBool();
-        const [location, onChangeLocation] = useLocation(defaultLocation);
+    const HeaderSecondaryMenu = JSX(({ className, version, locationName: location, officesLink }) => {
         const iconVersion = version === 'transparent' ? 'white' : 'black';
-        const handleShowLocationModal = useCallback((ev) => {
-            ev?.preventDefault();
-            showLocationModal();
-        }, []);
-        defaultEventBus.fire('setPageOverflowHidden', isShowLocationModal);
-        return (jsxs("div", { className: style('flex items-center', className), children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: location.name, onClick: handleShowLocationModal }), officesLink ? (jsx(TopItem, { className: "mr-7", flat: true, href: officesLink, text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B" })) : null, projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { className: "mr-5", iconVersion: iconVersion, chat: projectSettings.CHAT_BOT })) : null, isShowLocationModal ? (jsx(Location, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation, onClose: hideLocationModal })) : null] }));
+        const { open: openLocationModal } = useDialog(LOCATION_DIALOG_ID);
+        const handleOpenLocationModal = useCallback(() => openLocationModal(), []);
+        const { open: openSearchModal } = useDialog(SEARCH_DIALOG_ID);
+        const handleOpenSearchModal = useCallback(() => openSearchModal(), []);
+        return (jsxs("div", { className: style('flex items-center gap-5', className), children: [jsx(TopItem, { flat: true, href: "#", text: location, onClick: handleOpenLocationModal }), officesLink ? jsx(TopItem, { flat: true, href: officesLink, text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B" }) : null, jsx(HeaderSecondaryMenuButton, { image: { icon: 'LoupeIcon', iconVersion }, ariaLabel: "\u041F\u043E\u0438\u0441\u043A", onClick: handleOpenSearchModal }), projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { iconVersion: iconVersion, chat: projectSettings.CHAT_BOT })) : null] }));
     });
 
     const findActiveSubItem = (router) => (items = []) => {
@@ -3201,7 +3258,8 @@
         const router = useRouter();
         const { topItems, logo, defaultLocation, foreignOffices, officesLink } = useSWRResource(projectSettings.SITEMAP || 'sitemap', rest.options?.page?.fallback);
         const activeTopItem = topItems?.find(isTopItemActive(router));
-        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 }), topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ..._ }, String(i)))), jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", foreignOffices: foreignOffices, defaultLocation: defaultLocation, officesLink: officesLink })] }), 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 [location, onChangeLocation] = useLocation(defaultLocation);
+        return (jsxs(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 }), topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ..._ }, String(i)))), jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", locationName: location.name, officesLink: officesLink })] }), 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] }), jsx(SearchDialog, { topItems: topItems }), jsx(LocationDialog, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation })] }));
     });
 
     const gapStyles = {
@@ -3216,7 +3274,7 @@
 
     const HorizontalLayout = JSX(({ className = '', gap = 'XS', isPadding = false, version = 'transparent', isTheme = false, ...rest }) => (jsx(BlockWrapper, { className: style('grid grid-cols-12', isPadding ? 'p-12' : '', gapStyles[gap], className), version: version, isTheme: isTheme, ...rest, children: renderChildren(rest) })));
     HorizontalLayout.childrenTypes = {
-        exclude: ['HorizontalLayout', 'Accordion', 'OtherProducts'],
+        exclude: ['HorizontalLayout'],
     };
 
     const ImgBlock = JSX((props) => {
@@ -3797,10 +3855,6 @@
         return jsx("div", { className: "md-container", dangerouslySetInnerHTML: { __html } });
     });
 
-    function assertUnreachable(x) {
-        throw new Error(x);
-    }
-
     // TODO: Create universal function for this case
     const renderBenefit$2 = 
     // Linter doesn't understand that switch processes all cases
@@ -4017,7 +4071,7 @@
 
     const RollupItem = JSX(({ className = '', label = 'Развернуть', isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => (jsx(BlockWrapper, { className: `w-full border-0 border-b border-solid border-main-divider last:border-b-0 ${className}`, tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: `grid grid-cols-12 gap-5 [&>*]:p-0`, isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ version, label, isUnfolded, onToggle }) }) })));
     RollupItem.childrenTypes = {
-        exclude: ['RollupItem', 'Accordion', 'OtherProducts'],
+        exclude: ['RollupItem'],
     };
     const renderFoldButton = ({ version, label: defaultLabel, isUnfolded, onToggle, }) => {
         const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
@@ -4158,10 +4212,7 @@
     const checkCanRenderIcon = (icon) => Boolean(icon?.icon || icon?.src);
 
     // TODO: Create universal function for this case
-    const renderStep = (props) => 
-    // Linter doesn't understand that switch processes all cases
-    // eslint-disable-next-line consistent-return
-    (step, i, arr) => {
+    const renderStep = (props) => (step, i, arr) => {
         const { type } = step;
         if (!(type === 'default' || type === 'rte')) {
             return null;
@@ -4170,9 +4221,9 @@
             case 'default':
                 return renderDefaultStep(props)(step, i, arr);
             case 'rte':
-                return jsx(RichText, { __html: step.__html });
+                return (jsx("div", { className: style('text-center', getContainerWidth(arr.length)), children: jsx(RichText, { __html: step.__html }) }, String(i)));
             default:
-                assertUnreachable(step);
+                return null;
         }
     };
     const renderDefaultStep = ({ styleMap, isMainButton, version }) => (step, i, arr) => {
@@ -4622,9 +4673,7 @@
         const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
         return (jsx(BlockWrapper, { className: style('flex flex-col [&>*]:max-w-full', isPadding ? 'p-12' : '', gapStyles[gap], align && alignStyle[align], className), version: version, isTheme: isTheme, ...rest, children: renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } }) }));
     });
-    VerticalLayout.childrenTypes = {
-        exclude: ['Accordion', 'OtherProducts'],
-    };
+    VerticalLayout.childrenTypes = [];
 
     const MIN_COL_SPAN = 10;
     const getPaddings = (className) => getColSpan(className) < MIN_COL_SPAN ? 'py-6 px-11' : 'py-12 px-32';
@@ -4635,7 +4684,6 @@
     });
 
     const Blocks = {
-        Accordion,
         ApplicationForm,
         BenefitsBlock,
         Bonus,
@@ -4792,7 +4840,6 @@
     const ContentPage = JSX((props) => {
         const { className = '', blocksRegistry, blockDecorator, data = {} } = props;
         const { style: pageStyle, blocks, slots, likeControl, colorPalette = 'pc' } = data;
-        const [overflowStyle, setOverflowStyle] = useState('');
         const options = {
             key: '',
             page: data,
@@ -4801,10 +4848,12 @@
             parent: data,
         };
         useBlockRouterProvider();
-        useEffect(() => defaultEventBus.subscribe('setPageOverflowHidden', (isHidden) => {
-            setOverflowStyle(isHidden ? 'overflow-hidden h-screen' : '');
-        }), []);
-        return (jsxs("section", { className: style('relative', pageStyle, className, overflowStyle), "data-theme": colorPalette, children: [slots?.header ? (jsx("div", { className: "mb-5 shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, {
+        const [isSomeDialogOpened, { setTrue: setSomeDialogOpened, setFalse: resetSomeDialogOpened }] = useBool();
+        useDialogHandlers({
+            onOpen: setSomeDialogOpened,
+            onClose: resetSomeDialogOpened,
+        });
+        return (jsxs("section", { className: style('relative', pageStyle, className, isSomeDialogOpened ? 'overflow-hidden h-screen' : ''), "data-theme": colorPalette, children: [slots?.header ? (jsx("div", { className: "mb-5 shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, {
                         ...options,
                         slotName: 'header',
                     }) })) : null, jsxs("div", { className: "container grid grid-cols-12 gap-1", children: [renderBlocksList(blocks, options), slots?.footer
@@ -4820,7 +4869,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.9.3";
+    const packageVersion = "0.9.5";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;