@redneckz/wildless-cms-uni-blocks 0.10.9 → 0.11.0

package/mobile/bundle/bundle.umd.js

@@ -360,7 +360,7 @@
         transparent: 'bg-transparent text-primary-text',
         '': '',
     };
-    const BlockWrapper = JSX(({ className = '', version = 'primary', isTheme = true, block, tag = 'section', role, children, }) => {
+    const BlockWrapper = JSX(({ className, version = 'primary', isTheme = true, block, tag = 'section', role, children }) => {
         const Tag = tag;
         const ref = useBlockIntersectionObserver(block);
         const [isHidden, setHidden] = useState(false);
@@ -818,11 +818,11 @@
     });
 
     const DOT_SIZE_MAP = {
-        L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4',
-        M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3',
-        S: 'w-1 h-1 min-w-1 min-h-1 mr-2',
+        L: 'w-1.5 h-1.5 mr-4',
+        M: 'w-1.5 h-1.5 mr-3',
+        S: 'w-1 h-1 mr-2',
     };
-    const ListItem = JSX(({ className = '', isDotted = true, children, size = 'M' }) => (jsxs("div", { className: `font-sans flex items-baseline ${className}`, role: "listitem", children: [isDotted ? (jsx("div", { children: jsx("div", { className: `rounded-full align-middle inline-block bg-primary-text group-data-secondary:bg-white ${DOT_SIZE_MAP[size]}` }) })) : null, jsx("span", { children: children })] })));
+    const ListItem = JSX(({ className, isDotted = true, children, size = 'M' }) => (jsxs("div", { className: style('font-sans flex', className), role: "listitem", children: [isDotted ? (jsx("div", { className: "shrink-0", children: jsx("div", { className: style('align-middle inline-block rounded-full bg-primary-text group-data-secondary:bg-white', DOT_SIZE_MAP[size]) }) })) : null, jsx("span", { children: children })] })));
 
     const TEXT_SIZE_MAP = {
         S: 'text-l-light',
@@ -834,7 +834,15 @@
         M: 'ml-3',
         L: 'ml-4',
     };
-    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, isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
+    const List = JSX(({ className, hasIndent, isDotted, items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: style('flex flex-col gap-2 text-left 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, { isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
+
+    const buttonSizeStyles = {
+        default: 'w-24 h-14',
+        small: 'w-12 h-12',
+    };
+    const buttonStylesWithText = (text, buttonSize) => text
+        ? ''
+        : style('group/media flex items-center justify-center box-border', buttonSizeStyles[buttonSize]);
 
     const ICONS_MAP = [
         {
@@ -868,13 +876,6 @@
             label: 'Youtube',
         },
     ];
-    const buttonSizeStyles = {
-        default: 'w-14 h-14',
-        small: 'w-12 h-12',
-    };
-    const buttonStylesWithText = (text, buttonSize) => text
-        ? ''
-        : `group/media flex items-center justify-center box-border ${buttonSizeStyles[buttonSize]}`;
     const MediaButton = JSX(({ buttonSize = 'default', rounded = false, icon, ...rest }) => {
         const { href, version, text = '' } = rest;
         const { iconMapped, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
@@ -972,7 +973,7 @@
 
     const getPaddingStyle = (isHighlighting = false) => isHighlighting ? 'p-default mt-6' : 'mt-6 p-default'; // Хак для мобильной версии т.к. контракт должен быть идентичный
 
-    const renderButtonsSection = (buttons, { className = '', buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
+    const renderButtonsSection = (buttons, { className = '', buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-2' : 'flex-wrap gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
     const renderButton = (buttonClassName = '') => (button, index) => {
         const { text, icon, iconRight, version, ...rest } = button || {};
         const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
@@ -1059,44 +1060,50 @@
         return orientation === 'horizontal' ? (jsx(SwipeListControl, { onVisibleIndicesChange: handleSlideChange, children: tableColumns })) : (tableColumns);
     });
 
-    const consistentDataMap = new Map();
-    function useAsyncData(key, fetcher, { fallback } = {}) {
+    const isFilled = (_) => _ !== null && _ !== undefined;
+
+    const defaultCache = new Map();
+    const applyCache = (fetcher, cache = defaultCache) => (key) => {
+        const cachedData = cache.get(key);
+        if (isFilled(cachedData)) {
+            return cachedData;
+        }
+        const data = fetcher(key);
+        if (isFilled(data)) {
+            cache.set(key, Promise.resolve(data));
+        }
+        else {
+            cache.delete(key);
+        }
+        return data;
+    };
+
+    const isSimpleKey = (args) => Boolean(args && Array.isArray(args) && args.length === 1 && typeof args[0] === 'string');
+    function useAsyncData(key, fetcher, { fallback, cache } = {}) {
         const args = useMemo(() => keyToArgs(key), [key]);
-        const [data, setData] = useState();
-        const [error, setError] = useState();
-        const updateData = (_) => {
-            setData(_);
-            setError(undefined);
-        };
-        const updateError = (_) => {
-            setData(undefined);
-            setError(_);
-        };
-        const chainToConsistentResult = (_) => {
-            _.then(rawData => consistentDataMap.get(args) || rawData)
-                .then(updateData)
-                .catch(updateError);
-        };
+        const [simpleKey] = isSimpleKey(args) ? args : [];
+        const [data, setData] = useState(undefined);
+        const [error, setError] = useState(undefined);
         useEffect(() => {
-            const isEmptyKey = args.every(_ => _ === null);
+            const isEmptyKey = !args.some(isFilled);
             if (isEmptyKey) {
                 return;
             }
-            try {
-                const _ = fetcher(...args);
-                if ('then' in _) {
-                    chainToConsistentResult(_);
+            (async () => {
+                try {
+                    const newData = await (simpleKey
+                        ? applyCache(fetcher, cache)(simpleKey)
+                        : fetcher(...args));
+                    setData(newData);
+                    setError(undefined);
                 }
-                else {
-                    updateData(_);
+                catch (err) {
+                    setData(undefined);
+                    setError(err);
                 }
-            }
-            catch (err) {
-                updateError(err);
-            }
-        }, [fetcher, ...args]);
-        const simpleKey = args[0];
-        const fallbackData = fallback && typeof simpleKey === 'string' && fallback[simpleKey];
+            })();
+        }, [fetcher, cache, args]);
+        const fallbackData = fallback && simpleKey && fallback[simpleKey];
         return {
             data: !data && fallbackData ? fallbackData : data,
             error,
@@ -1105,9 +1112,6 @@
         };
     }
     function keyToArgs(key) {
-        if (!key) {
-            return [key];
-        }
         if (Array.isArray(key)) {
             return key;
         }
@@ -1139,13 +1143,178 @@
         return await response.json();
     }
 
+    const EMPTY_VALUE = {};
     function useSWRResource(filename, fallback = {}) {
         const { data } = useAsyncData(`/wcms-resources/${filename}.json`, fetchJSONUnsafe, {
             fallback,
         });
-        return data || {};
+        return data || EMPTY_VALUE;
     }
 
+    const linkListStyles = '';
+
+    const LinkList = JSX(({ className = '', items }) => items?.length ? (jsx("ul", { className: style('flex flex-col p-0', linkListStyles, className), children: items.map(renderLinkListItem) })) : null);
+    const renderLinkListItem = (item, i) => {
+        const { text, ...linkProps } = item;
+        return (jsx("li", { className: "list-none mb-4 sm:mb-6 sm:last:mb-0", children: jsx("a", { className: "hover:text-primary-main sm:font-light", role: "link", ...linkProps, children: text ? text : null }) }, `list_item_${String(i)}`));
+    };
+
+    const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => {
+        return (jsxs("button", { className: style('flex justify-center w-full px-0 py-4 border border-transparent outline-none focus:border-primary-text', disabled
+                ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
+                : 'bg-primary-main text-white hover:bg-primary-hove', className), onClick: onClick, disabled: disabled, "data-theme": dataTheme, children: [jsx("span", { className: "text-h4 pr-3", children: label }), icon ? (jsx(Img, { image: {
+                        icon,
+                        iconVersion: 'white',
+                    }, className: "flex-shrink-0 my-auto", width: "20", height: "20" })) : null] }));
+    });
+
+    const iconBgStyles = {
+        primary: 'bg-main-divider',
+        secondary: 'bg-white/30',
+        'secondary-light': 'bg-secondary-light',
+    };
+    const RoundedIcon = JSX(({ iconBgVersion = 'primary', ...rest }) => (jsx("div", { className: style('rounded-icon p-2.5 mr-3', iconBgStyles[iconBgVersion]), children: jsx(Icon, { ...rest }) })));
+
+    const foldableSectionStyles = 'flex flex-wrap group-last:last:pb-0';
+
+    const getIconName = (isUnfolded) => isUnfolded ? 'ArrowUpSolidIcon' : 'ArrowDownSolidIcon';
+
+    const labelSize = 'text-l';
+
+    const rollupIconVersion = 'normal';
+
+    const rollupItemStyles = '';
+
+    const RollupItem = JSX(({ className = '', label = 'Развернуть', labelIcon, isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => {
+        return (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-5 [&>*]:p-0', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ version, label, labelIcon, isUnfolded, onToggle }) }) }));
+    });
+    RollupItem.childrenTypes = {
+        exclude: ['RollupItem'],
+    };
+    const renderFoldButton = ({ version, label: defaultLabel, labelIcon, isUnfolded, onToggle, }) => {
+        const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
+        return version === 'primary' ? (renderPrimaryFoldButton({
+            label,
+            labelIcon,
+            icon: getIconName(isUnfolded),
+            onToggle,
+        })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
+    };
+    const renderPrimaryFoldButton = ({ label, icon, onToggle, labelIcon }) => {
+        const iconWidth = String(labelIcon?.size?.width || 24);
+        const iconHeight = String(labelIcon?.size?.height || 24);
+        const iconName = labelIcon?.icon;
+        return (jsxs("button", { className: style('border-none bg-transparent px-0 flex justify-between items-center w-full cursor-pointer group/button', iconName ? 'py-2' : 'py-5'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main", children: [iconName ? (jsx(RoundedIcon, { name: iconName, width: iconWidth, height: iconHeight, iconVersion: labelIcon?.iconVersion })) : null, label ? (jsx(Text, { size: labelSize, font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
+    };
+
+    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] })));
+    const renderContact = (item, index) => {
+        const { type, text, description } = item;
+        return (jsxs("div", { className: "mb-4", children: [jsx("div", { children: renderText(type, text) }), jsx("div", { className: "mt-1 text-s-light text-secondary-text", children: description })] }, String(index)));
+    };
+    const renderText = (type, text = '') => {
+        switch (type) {
+            case 'tel':
+                return (jsx("a", { className: "text-h6 text-primary-text hover:text-primary-main no-underline", href: `tel:${formatTel(text)}`, children: text }));
+            case 'email':
+                return (jsx("a", { className: "text-xl-light text-primary-text no-underline", href: `mailto:${text}`, children: text }));
+            default:
+                return jsx("span", { children: text });
+        }
+    };
+    const formatTel = (s) => s.replaceAll(/\D/g, '');
+
+    const horizontalNavigationLinkStyles = '';
+
+    const HorizontalNavigationLink = JSX(({ className = '', index, text, ...rest }) => {
+        const link = useLink();
+        const { href, target, onClick } = link(rest);
+        return (jsx("a", { className: style(horizontalNavigationLinkStyles, className), href: href, target: target, onClick: onClick, children: text || `Документ ${index}` }));
+    });
+
+    const HorizontalNavigation = JSX(({ title, links, className = '' }) => (jsxs("div", { className: className, children: [jsx(Text, { size: "text-h6", children: title }), links?.length ? (jsx("div", { className: "flex flex-col gap-6 mt-7", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, ..._ }, String(i)))) })) : null] })));
+
+    const TextInformationLink = JSX(({ className = '', index, ...rest }) => {
+        const link = useLink({ isRemote: true });
+        const { href, target, text, onClick } = link(rest);
+        return (jsx("a", { className: `text-xs-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` }));
+    });
+
+    const textInformationTextSize = 'text-s';
+
+    const TextInformation = JSX(({ className = '', links }) => (jsxs("div", { className: className, children: [jsx("div", { className: "pt-5 sm:py-4", children: jsx(Text, { size: textInformationTextSize, color: "text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex justify-start items-start gap-5 pt-2.5", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ..._ }, String(i)))) })) : null] })));
+
+    const Footer = JSX(({ className = '', ...rest }) => {
+        const fallback = rest.options?.page?.fallback;
+        const sitemap = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
+        const { documents, relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
+        return (jsxs(BlockWrapper, { tag: "footer", className: style('px-4 py-6', className), ...rest, children: [jsx("div", { className: "mb-4 pb-5 border-b border-main-divider", children: sitemap.topItems?.map((item, i) => (jsx(RollupItem, { label: item?.text, labelIcon: item?.icon, children: jsx(LinkList, { items: item.items, className: "my-3" }) }, String(i)))) }), jsx(Contacts, { className: "overflow-hidden", items: contacts }), jsx(SocialMedia, { className: "mb-4", media: socialMedia }), jsx(Button, { className: "w-full mb-4", text: "Google Play", version: "secondary", href: "/", target: "_blank" }), jsx(HorizontalNavigation, { className: "pt-4 pb-7 border-y border-main-divider", title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, {})] }));
+    });
+
+    const isHrefActive = (router) => ({ href }) => withoutQuery(isURL(href) ? router.href : router.pathname).startsWith(withoutQuery(href));
+
+    const findActiveSubItem = (router) => (items = []) => {
+        const possibleActiveSubItems = items?.filter(isHrefActive(router));
+        return possibleActiveSubItems?.length
+            ? maxBy((_) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
+            : undefined;
+    };
+
+    const isTopItemActive = (router) => isHrefActive(projectSettings.BASE_PATH ? { pathname: projectSettings.BASE_PATH } : router);
+
+    const HeaderItem = JSX(({ className = '', active, dataItemName, children, ...rest }) => {
+        const link = useLink();
+        const { href, target, text, onClick } = link(rest);
+        return (jsxs("a", { className: style('relative inline-block bg-transparent text-center no-underline', className), href: href, target: target, "data-item-name": dataItemName, onClick: onClick, children: [jsx("span", { className: getTextStyle(active), children: text || children }), active ? (jsx("div", { className: "absolute left-0 -bottom-3 w-full h-0.5 bg-primary-main group-data-transparent:bg-transparent" })) : null] }));
+    });
+    const getTextStyle = (active = false) => style('font-sans text-s', active ? 'text-primary-main' : '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) => {
+            const storageKey = `async:${key}`;
+            const storageData = storage.getItem(storageKey);
+            const cachedData = getParsedData(storageData);
+            if (cachedData) {
+                return cachedData;
+            }
+            const data = await fetcher(...args);
+            storage.setItem(storageKey, JSON.stringify({ data, timestamp: Date.now() }));
+            return data;
+        }, [key, fetcher]);
+        return useAsyncData(key, cachedFetcher);
+    }
+    function getParsedData(storageData) {
+        const { data = null, timestamp = null } = storageData ? JSON.parse(storageData) : {};
+        return data && Date.now() - timestamp < STORAGE_DEFAULT_TTL ? data : undefined;
+    }
+
+    const REGION_URL = '/api/v1/region';
+    function useLocation(defaultLocation = 'Москва') {
+        const currentLocation = getLocalStorageLocation();
+        const [location, setLocation] = useState(currentLocation?.region ?? { name: defaultLocation });
+        const { data } = useCachedAsyncData(REGION_URL, fetchJSONUnsafe);
+        useEffect(() => {
+            setLocation(currentLocation?.region && currentLocation?.manual
+                ? currentLocation.region
+                : data || { name: defaultLocation });
+        }, [data]);
+        const onChangeLocation = useCallback((region) => {
+            globalThis.localStorage?.setItem('location', JSON.stringify({ manual: true, region }));
+            setLocation(region);
+        }, []);
+        return [location, onChangeLocation];
+    }
+    const getLocalStorageLocation = () => {
+        const localStorageLocation = globalThis.localStorage?.getItem('location');
+        try {
+            return localStorageLocation ? JSON.parse(localStorageLocation) : null;
+        }
+        catch (_) {
+            return null;
+        }
+    };
+
     const CloseButton = JSX(({ className, onClick }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-1 bg-transparent border-none', className), onClick: onClick, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
 
     function assertUnreachable(x) {
@@ -1298,7 +1467,8 @@
     const fillMapWith = (keys, value) => new Map(keys.map((_) => [_, value]));
 
     const SEARCH_INDEX_FILENAME = 'search.index.json';
-    const useSearch = ({ basePathList = ['/'], initialQuery = '', wasOpened, }) => {
+    const DEFAULT_BASE_PATH = ['/'];
+    const useSearch = ({ basePathList = DEFAULT_BASE_PATH, initialQuery = '', wasOpened, }) => {
         const [query, setQuery] = useState(initialQuery || '');
         useEffect(() => {
             if (initialQuery !== undefined && initialQuery !== null) {
@@ -1306,7 +1476,7 @@
             }
         }, [initialQuery]);
         const key = useMemo(() => basePathList.map((_) => (wasOpened ? _ : null)), // Load search index on very first search
-        [wasOpened, ...basePathList]);
+        [wasOpened, basePathList]);
         const { data } = useAsyncData(key, fetchSearchIndex);
         const [result, setResult] = useState(null);
         useDebouncedEffect(() => {
@@ -1386,17 +1556,17 @@
         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: href, target: target || '_self', onClick: onClick, children: text || `Раздел ${index}` }));
     });
 
-    const SearchInput = JSX(({ className, isMobile, value, autoFocus, onChange, onFocus }) => {
+    const SearchInput = JSX(({ className, 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(Img, { 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 })] }));
+        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(Img, { 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'), 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 SEARCH_DIALOG_ID = 'search';
     JSX(({ topItems }) => {
         const dialogProps = useDialogProps(SEARCH_DIALOG_ID);
-        const basePathList = topItems?.map((_) => _.href || '/');
+        const basePathList = useMemo(() => topItems?.map((_) => _.href || '/'), [topItems]);
         const [searchResult, searchInputProps] = useSearch({
             basePathList,
             initialQuery: dialogProps.message,
@@ -1422,7 +1592,7 @@
     }
 
     const MIN_QUERY_LEN = 3;
-    const SearchBarInner = JSX(({ className, isMobile }) => {
+    const SearchBar = JSX(({ className }) => {
         const [value, setValue] = useState('');
         const resetQueryOnDialogClose = useCallback(() => setValue(''), []);
         useDialogHandlers({ onClose: resetQueryOnDialogClose });
@@ -1433,18 +1603,17 @@
                 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] }));
+        return (jsxs("div", { className: className, children: [jsx(SearchInput, { value: value, onChange: handleInitialInputChange }), jsx(CloseButton, { className: "absolute top-2 right-3 sm:hidden", onClick: resetQueryOnDialogClose })] }));
     });
     const isQueryLongEnough = (_) => _ && _.length >= MIN_QUERY_LEN;
 
-    const SearchBar = JSX((props) => (jsx(SearchBarInner, { ...props, isMobile: true })));
-
-    const LinkList = JSX(({ className = '', documents, ...rest }) => (jsx(BlockWrapper, { className: `mt-2.5 ${className}`, ...rest, children: jsx("ul", { className: "flex flex-col text-s text-secondary-text p-0", children: documents?.length ? renderLinkListItem(documents) : null }) })));
-    const renderLinkListItem = (documents) => {
-        return documents.map((doc, i) => {
-            const { text, ...linkProps } = doc;
-            return (jsx("li", { className: "mb-4 list-none", children: jsx("a", { className: "hover:text-primary-main", role: "link", ...linkProps, children: text ? text : null }) }, `list_item_${String(i)}`));
-        });
+    const HeaderBurger = JSX(({ burgerSubMenu, onClick, defaultLocation = '', children }) => {
+        const [location] = useLocation(defaultLocation);
+        return (jsxs("div", { className: "absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20", children: [jsx("button", { className: "absolute top-4 right-4 border-none bg-transparent cursor-pointer", onClick: onClick, children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) }), jsxs("button", { className: "flex items-center text-s p-0 mb-4 bg-transparent cursor-pointer", children: [jsx(Img, { image: { icon: 'GeolocationIcon' }, width: "20", height: "20", className: "text-primary-main box-border mr-2" }), jsx(Text, { color: "text-secondary-text", children: location.name })] }), children, jsx("div", { className: "mb-7", children: burgerSubMenu?.map(renderBurgerSubMenuItem) }), jsx(SearchBar, { className: "grow" })] }));
+    });
+    const renderBurgerSubMenuItem = (menu, i) => {
+        const { icon, href, text } = menu;
+        return (jsxs("a", { href: href, className: "flex text-s mb-4 hover:text-primary-main", children: [icon ? jsx(Img, { className: "text-primary-main pr-1", image: icon, width: "24", height: "24" }) : null, jsx("span", { className: "font-medium pl-0.5", children: text })] }, `headerSubMenu-${i}`));
     };
 
     const ICON_VERSION_MAP = {
@@ -1455,7 +1624,7 @@
         'bg-white': 'text-primary-main',
         transparent: 'text-white',
     };
-    const renderImage$2 = (bgColor, image, size) => {
+    const renderImage$1 = (bgColor, image, size) => {
         return image?.src ? (jsx(Img, { image: image, className: SVG_COLOR[bgColor], width: size?.width, height: size?.height, pathPrefix: "/wcms-resources/" })) : (jsx(Img, { image: {
                 icon: image?.icon || 'LogoIcon',
                 iconVersion: ICON_VERSION_MAP[bgColor],
@@ -1471,158 +1640,8 @@
     };
 
     const Logo = JSX(({ bgColor = 'bg-white', children, className = '', href, logo, showTitle = true, targetBlank, }) => {
-        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$2(bgColor, logo?.image, { width: '34', height: '34' }), showTitle ? renderTitle(children || logo?.title, bgColor, 'text-s') : null] }));
-    });
-
-    const MobileAppTile = JSX(({ className = '', title = 'Мобильное приложение', description, href = '#' }) => {
-        return (jsx("div", { className: `col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light font-sans ${className}`, children: href ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "flex justify-center align-middle rounded-md bg-primary-main w-12 h-12", children: jsx(Logo, { className: "w-8", bgColor: "transparent", showTitle: true }) }), jsxs("a", { href: href, target: "_blank", className: "flex flex-col justify-center pl-3", children: [jsx("div", { className: "text-s font-medium mb-[3px]", children: title }), jsx("div", { className: "text-s text-secondary-text", children: description })] })] })) : null }));
-    });
-
-    const DefaultFoldButton = JSX(({ className = '', label, icon, dataTheme = '', disabled = false, onClick }) => {
-        return (jsxs("button", { className: style('flex justify-center w-full px-0 py-5 border border-transparent outline-none focus:border-primary-text', disabled
-                ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
-                : 'bg-primary-main text-white hover:bg-primary-hove', className), onClick: onClick, disabled: disabled, "data-theme": dataTheme, children: [jsx("span", { className: "text-h4 pr-3", children: label }), icon ? (jsx(Img, { image: {
-                        icon,
-                        iconVersion: 'white',
-                    }, className: "flex-shrink-0 my-auto", width: "20", height: "20" })) : null] }));
-    });
-
-    const RollupItem = JSX(({ className = '', label = 'Развернуть', isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('border-b border-solid border-main-divider w-full', className), tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "flex flex-wrap group-last:last:pb-0 gap-5 [&>*]:p-0", isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ version, label, isUnfolded, onToggle }) }) }));
-    });
-    RollupItem.childrenTypes = {
-        exclude: ['RollupItem'],
-    };
-    const renderFoldButton = ({ version, label: defaultLabel, isUnfolded, onToggle, className = '', primaryIcon, }) => {
-        const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
-        return version === 'primary' ? (renderPrimaryFoldButton({
-            label,
-            icon: isUnfolded ? 'MinusIcon' : 'PlusIcon',
-            onToggle,
-            className,
-            primaryIcon,
-        })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
-    };
-    const renderPrimaryFoldButton = ({ label, icon, primaryIcon, onToggle, }) => (jsxs("button", { className: `border-none bg-transparent flex justify-between text-left w-full text-primary-text group cursor-pointer py-3.5 px-0`, onClick: onToggle, children: [jsxs("div", { className: "flex group-hover:text-primary-main", children: [primaryIcon ? (jsx(Img, { image: primaryIcon, className: "mr-3 flex-shrink-0", width: "24", height: "24" })) : null, jsx(Text, { size: "text-m-title-xs", font: "font-medium", children: label })] }), jsx(Img, { className: "flex-shrink-0", image: { icon }, width: "24", height: "24" })] }));
-
-    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] })));
-    const renderContact = (item, index) => {
-        const { type, text, description } = item;
-        return (jsxs("div", { className: "mb-4", children: [jsx("div", { children: renderText(type, text) }), jsx("div", { className: "mt-1 text-s-light text-secondary-text", children: description })] }, String(index)));
-    };
-    const renderText = (type, text = '') => {
-        switch (type) {
-            case 'tel':
-                return (jsx("a", { className: "text-h6 text-primary-text hover:text-primary-main no-underline", href: `tel:${formatTel(text)}`, children: text }));
-            case 'email':
-                return (jsx("a", { className: "text-xl-light text-primary-text no-underline", href: `mailto:${text}`, children: text }));
-            default:
-                return jsx("span", { children: text });
-        }
-    };
-    const formatTel = (s) => s.replaceAll(/\D/g, '');
-
-    const HorizontalNavigationLink = JSX(({ className = '', index, text, ...rest }) => {
-        const link = useLink();
-        const { href, target, onClick } = link(rest);
-        return (jsx("a", { className: `text-secondary-text hover:text-primary-main inline-block no-underline ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` }));
-    });
-
-    const HorizontalNavigation = JSX(({ title, links, className = '' }) => (jsxs("div", { className: className, children: [jsx("span", { className: "text-primary-text text-s font-medium", children: title }), links?.length ? (jsx("div", { className: "flex flex-col gap-2 pt-3", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, className: "text-s", ..._ }, String(i)))) })) : null] })));
-
-    const TextInformationLink = JSX(({ className = '', index, ...rest }) => {
-        const link = useLink({ isRemote: true });
-        const { href, target, text, onClick } = link(rest);
-        return (jsx("a", { className: `text-xs-light text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` }));
-    });
-
-    const TextInformation = JSX(({ className = '', links }) => {
-        return (jsxs("div", { className: className, children: [jsx("div", { className: "py-6", children: jsx("span", { className: "text-xs-light text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: `flex flex-col justify-start items-start gap-2`, children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ..._ }, String(i)))) })) : null] }));
-    });
-
-    const Footer = JSX(({ className = '', ...rest }) => {
-        const fallback = rest.options?.page?.fallback;
-        const sitemap = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
-        const { documents, relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
-        return (jsxs(BlockWrapper, { tag: "footer", className: `px-4 py-[26px] ${className}`, ...rest, children: [jsx(Contacts, { className: "overflow-hidden", items: contacts, hasButton: true }), jsx("div", { className: "m-0 p-0", children: sitemap.topItems?.map((item, i) => (jsx(RollupItem, { label: item?.text, children: jsx(LinkList, { documents: item.items }) }, String(i)))) }), jsx("div", { className: "mt-4", children: sitemap?.dispositions?.map(renderSubMenuItem) }), jsx(MobileAppTile, { title: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435", description: "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0434\u043B\u044F IOS \u0438 Android", ...rest }), jsx(SearchBar, { className: "grow" }), jsx(SocialMedia, { className: "pt-6 pb-6", media: socialMedia }), jsx(HorizontalNavigation, { title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
-    });
-    const renderSubMenuItem = (menu, i) => {
-        const { icon, href, text } = menu;
-        return (jsxs(Button, { version: "link", href: href, className: "flex text-s mb-4 w-6", children: [icon ? jsx(Img, { className: "pr-1", image: icon, width: "24", height: "24" }) : null, jsx("span", { className: "pl-2.5 font-medium text-primary-text", children: text })] }, `footer-${i}`));
-    };
-
-    const isHrefActive = (router) => ({ href }) => withoutQuery(isURL(href) ? router.href : router.pathname).startsWith(withoutQuery(href));
-
-    const findActiveSubItem = (router) => (items = []) => {
-        const possibleActiveSubItems = items?.filter(isHrefActive(router));
-        return possibleActiveSubItems?.length
-            ? maxBy((_) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
-            : undefined;
-    };
-
-    const isTopItemActive = (router) => isHrefActive(projectSettings.BASE_PATH ? { pathname: projectSettings.BASE_PATH } : router);
-
-    const HeaderItem = JSX(({ className = '', active, dataItemName, children, ...rest }) => {
-        const link = useLink();
-        const { href, target, text, onClick } = link(rest);
-        return (jsxs("a", { className: style('relative inline-block bg-transparent text-center no-underline', className), href: href, target: target, "data-item-name": dataItemName, onClick: onClick, children: [jsx("span", { className: getTextStyle(active), children: text || children }), active ? (jsx("div", { className: "absolute left-0 -bottom-3 w-full h-0.5 bg-primary-main group-data-transparent:bg-transparent" })) : null] }));
-    });
-    const getTextStyle = (active = false) => style('font-sans text-s', active ? 'text-primary-main' : '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) => {
-            const storageKey = `async:${key}`;
-            const storageData = storage.getItem(storageKey);
-            const cachedData = getParsedData(storageData);
-            if (cachedData) {
-                return cachedData;
-            }
-            const data = await fetcher(...args);
-            storage.setItem(storageKey, JSON.stringify({ data, timestamp: Date.now() }));
-            return data;
-        }, [key, fetcher]);
-        return useAsyncData(key, cachedFetcher);
-    }
-    function getParsedData(storageData) {
-        const { data = null, timestamp = null } = storageData ? JSON.parse(storageData) : {};
-        return data && Date.now() - timestamp < STORAGE_DEFAULT_TTL ? data : undefined;
-    }
-
-    const REGION_URL = '/api/v1/region';
-    function useLocation(defaultLocation = 'Москва') {
-        const currentLocation = getLocalStorageLocation();
-        const [location, setLocation] = useState(currentLocation?.region ?? { name: defaultLocation });
-        const { data } = useCachedAsyncData(REGION_URL, fetchJSONUnsafe);
-        useEffect(() => {
-            setLocation(currentLocation?.region && currentLocation?.manual
-                ? currentLocation.region
-                : data || { name: defaultLocation });
-        }, [data]);
-        const onChangeLocation = useCallback((region) => {
-            globalThis.localStorage?.setItem('location', JSON.stringify({ manual: true, region }));
-            setLocation(region);
-        }, []);
-        return [location, onChangeLocation];
-    }
-    const getLocalStorageLocation = () => {
-        const localStorageLocation = globalThis.localStorage?.getItem('location');
-        try {
-            return localStorageLocation ? JSON.parse(localStorageLocation) : null;
-        }
-        catch (_) {
-            return null;
-        }
-    };
-
-    const HeaderBurger = JSX(({ burgerSubMenu, onClick, defaultLocation = '', children }) => {
-        const [location] = useLocation(defaultLocation);
-        return (jsxs("div", { className: "absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20", children: [jsx("button", { className: "absolute top-4 right-4 border-none bg-transparent cursor-pointer", onClick: onClick, children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) }), jsxs("button", { className: "flex items-center text-s p-0 mb-4 bg-transparent cursor-pointer", children: [jsx(Img, { image: { icon: 'GeolocationIcon' }, width: "20", height: "20", className: "text-primary-main box-border mr-2" }), jsx(Text, { color: "text-secondary-text", children: location.name })] }), children, jsx("div", { className: "mb-7", children: burgerSubMenu?.map(renderBurgerSubMenuItem) }), jsx(SearchBar, { className: "grow" })] }));
+        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$1(bgColor, logo?.image, { width: '34', height: '34' }), showTitle ? renderTitle(children || logo?.title, bgColor, 'text-s') : null] }));
     });
-    const renderBurgerSubMenuItem = (menu, i) => {
-        const { icon, href, text } = menu;
-        return (jsxs("a", { href: href, className: "flex text-s mb-4 hover:text-primary-main", children: [icon ? jsx(Img, { className: "text-primary-main pr-1", image: icon, width: "24", height: "24" }) : null, jsx("span", { className: "font-medium pl-0.5", children: text })] }, `headerSubMenu-${i}`));
-    };
 
     const HeaderTop = JSX(({ onClick, bgColor, logo }) => (jsxs("div", { className: "flex items-center justify-between border-0 border-b border-main-divider h-12", children: [jsxs("div", { className: "flex items-center", children: [jsx("button", { className: "pl-0 pr-4 border-0 bg-transparent cursor-pointer", onClick: onClick, "aria-label": "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043C\u0435\u043D\u044E", children: jsx(Img, { image: { icon: 'BurgerIcon', iconVersion: bgColor === 'bg-white' ? 'black' : 'white' }, className: "text-primary-text w-6 h-6", width: "24", height: "24" }) }), jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo })] }), jsx("button", { className: "text-primary-main group-data-transparent:text-white group-data-transparent:hover:text-primary-hover text-s border-0 bg-transparent", children: "\u0412\u043E\u0439\u0442\u0438" })] })));
 
@@ -1639,7 +1658,7 @@
         const activeSubItem = findActiveSubItem(router)(subItems);
         const [burgerMenuShow, setBurgerMenuShow] = useState(false);
         const handleBurgerMenuShow = useCallback(() => setBurgerMenuShow((_) => !_), []);
-        return (jsxs(BlockWrapper, { tag: "header", version: version, ...rest, children: [jsxs("div", { className: "container px-4 py-0 box-border", children: [jsx(HeaderTop, { onClick: handleBurgerMenuShow, bgColor: bgColor, logo: logo }), jsx("nav", { className: "flex items-center m-0 p-0 overflow-y-hidden w-full h-12", children: jsx("div", { className: "flex no-scrollbar horizontal-list h-full items-center", children: subItems?.map((_, i) => (jsx(HeaderItem, { className: "mr-8 whitespace-nowrap text-s", active: _ === activeSubItem, ..._ }, String(i)))) }) })] }), burgerMenuShow ? (jsx(HeaderBurger, { onClick: handleBurgerMenuShow, burgerSubMenu: dispositions, defaultLocation: defaultLocation, children: jsx("div", { className: "list-none m-0 p-0", children: topItems?.map((item, i) => (jsx(RollupItem, { label: item.text, children: jsx(LinkList, { documents: item.items }) }, String(i)))) }) })) : null] }));
+        return (jsxs(BlockWrapper, { tag: "header", version: version, ...rest, children: [jsxs("div", { className: "container px-4 py-0 box-border", children: [jsx(HeaderTop, { onClick: handleBurgerMenuShow, bgColor: bgColor, logo: logo }), jsx("nav", { className: "flex items-center m-0 p-0 overflow-y-hidden w-full h-12", children: jsx("div", { className: "flex no-scrollbar horizontal-list h-full items-center", children: subItems?.map((_, i) => (jsx(HeaderItem, { className: "mr-8 whitespace-nowrap text-s", active: _ === activeSubItem, ..._ }, String(i)))) }) })] }), burgerMenuShow ? (jsx(HeaderBurger, { onClick: handleBurgerMenuShow, burgerSubMenu: dispositions, defaultLocation: defaultLocation, children: jsx("div", { className: "list-none m-0 p-0", children: topItems?.map((item, i) => (jsx(RollupItem, { label: item.text, children: jsx(LinkList, { className: "mt-2.5", items: item.items }) }, String(i)))) }) })) : null] }));
     });
 
     const ImgBlock = JSX((props) => {
@@ -1667,6 +1686,10 @@
 
     const LinkDocs = JSX(({ className = '', title, description, icon = { icon: 'DocDownloadIcon', iconVersion: 'black' }, documents, align, ...rest }) => (jsxs(BlockWrapper, { className: style('p-default', className), ...rest, children: [jsx(Headline, { isPadding: false, title: title, description: description, align: align, headlineVersion: "M", as: "h2" }), documents?.length ? (jsx("div", { className: "mt-5 flex flex-col gap-6", role: "list", children: documents.map((doc, i) => (jsx("div", { role: "listitem", children: jsx(LinkDocsListItem, { doc: doc, icon: icon ? (jsx(Img, { className: "min-w-11 min-h-11 h-fit p-2.5 bg-main-divider rounded-md", image: icon, width: "24", height: "24" })) : null }) }, String(i)))) })) : null] })));
 
+    const MobileAppTile = JSX(({ className = '', title = 'Мобильное приложение', description, href = '#' }) => {
+        return (jsx("div", { className: style('col-span-12 rounded-md cursor-pointer p-4 bg-secondary-light font-sans', className), children: href ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "flex justify-center align-middle rounded-md bg-primary-main w-12 h-12", children: jsx(Logo, { className: "w-8", bgColor: "transparent", showTitle: true }) }), jsxs("a", { href: href, target: "_blank", className: "flex flex-col justify-center pl-3", children: [jsx("div", { className: "text-s font-medium mb-[3px]", children: title }), jsx("div", { className: "text-s text-secondary-text", children: description })] })] })) : null }));
+    });
+
     const getColSpan = (className) => {
         const colSpanPrefix = 'col-span-';
         const colSpanStr = className?.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
@@ -1722,13 +1745,14 @@
     const renderShimmerItem = (width, index) => (jsx("div", { style: { width: `${width || 100}%` }, className: "h-4 mt-2 bg-secondary-light" }, String(index)));
     const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
 
-    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] })] })));
-
-    const BenefitItem = JSX((props) => {
-        const { className = '', icon, label, description, version = 'primary', benefitsVersion = 'normal', } = props;
-        const listItemAlign = description ? 'items-start' : 'items-center';
-        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(version, benefitsVersion), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? (jsx("div", { className: "text-h6 text-primary-text group-data-secondary:text-white", children: label })) : null, description ? (jsx("div", { className: "text-m-light text-secondary-text group-data-secondary:text-white", children: description })) : null] })] }));
+    const RichText = JSX((props) => {
+        const { __html = '', richVersion = '' } = props;
+        return (jsx("div", { className: style(richVersion, 'md-container'), dangerouslySetInnerHTML: { __html } }));
     });
+
+    const BaseTile = JSX(({ className, title = '', insetTitle = '', buttons, leftImage, rightImage, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col font-sans', className), children: [backImage ? jsx("div", { className: "absolute bottom-0 right-0 z-0", children: backImage }) : null, title, jsxs("div", { className: "grow relative flex flex-wrap justify-between items-stretch gap-8", children: [leftImage, jsxs("div", { className: style('flex flex-col gap-8', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), buttons] }), rightImage ? jsx("div", { className: "sm:-order-1 md:-order-1", children: rightImage }) : null] })] })));
+
+    const BenefitItem = JSX(({ className, icon, label, description, version = 'primary', benefitsVersion = 'normal' }) => (jsxs("div", { className: style('flex gap-5', description ? 'items-start' : 'items-center', className), children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(version, benefitsVersion), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null, jsxs("div", { children: [label ? (jsx(Text, { size: "text-h6", color: "text-primary-text group-data-secondary:text-white", children: label })) : null, description ? (jsx(Paragraph, { size: "text-m-light", color: "text-secondary-text group-data-secondary:text-white", children: description })) : null] })] })));
     function getBenefitIconBgStyle(version, benefitsVersion) {
         let bgColorStyle = 'bg-primary-main text-black';
         if (version === 'secondary') {
@@ -1740,23 +1764,27 @@
         return `w-12 h-12 min-w-12 rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
     }
 
-    const renderBenefit = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => (jsx(BenefitItem, { icon: icon, label: label, description: description, version: version, benefitsVersion: benefitsVersion }, String(i)));
-
-    const ProductBlockInner = JSX(({ className = '', headlineVersion = 'L', benefits, benefitsVersion = 'normal', buttons, image, items, isDotted = true, label, title, description, ...rest }) => (jsxs(BlockWrapper, { className: `w-full ${className}`, ...rest, children: [jsxs("div", { children: [label ? renderLabel(label) : null, jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left" }), jsxs(BaseTile, { buttons: renderButtonsSection(buttons, { className: 'mt-5', isVertical: true }), children: [benefits?.filter((_) => _.label)?.length ? (jsx("div", { className: "mt-3", children: benefits.map(renderBenefit('primary', benefitsVersion)) })) : null, items?.length ? (jsx(List, { className: "mt-3 text-m", items: items, isDotted: isDotted })) : null] })] }), renderImage$1(image)] })));
-    function renderImage$1(image) {
-        return image?.src ? (jsx(Img, { imageClassName: "mt-5 mx-auto block", image: { className: 'block', ...image } })) : null;
-    }
-    const renderLabel = (label) => (jsx("div", { className: "w-fit px-2.5 py-1.5 mb-5 rounded-md border-2 border-solid border-secondary-hover", children: jsx(Text, { color: "text-primary-main group-data-secondary:text-white/80", children: label }) }));
+    const renderBenefit = (version = 'primary', benefitsVersion = 'normal') => (props, i) => jsx(BenefitItem, { version: version, benefitsVersion: benefitsVersion, ...props }, String(i));
 
-    const ProductBlock = JSX((props /* Get rid of image and benefits */) => {
-        const { className = '', ...rest } = props;
-        return (jsx(BlockWrapper, { className: `px-4 py-6 ${className}`, ...rest, children: jsx(ProductBlockInner, { ...props }) }));
+    const ProductBlockInner = JSX(({ className, version = 'primary', headlineVersion = 'L', title, description, benefits, benefitsVersion, items, isDotted = true, __html, buttons, image, directionRight = true, }) => {
+        const benefitsWithLabel = benefits?.filter((_) => _.label);
+        const img = image?.src ? jsx(Img, { className: "mt-[-50px]", image: image }) : null;
+        return (jsxs(BaseTile, { className: className, insetTitle: jsx(Headline, { className: "max-w-[600px] xl:max-w-[800px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left", isPadding: false }), ...(directionRight ? { rightImage: img } : { leftImage: img }), buttons: renderButtonsSection(buttons), children: [benefitsWithLabel?.length ? (jsx("div", { className: "flex flex-wrap gap-6", children: benefitsWithLabel.map(renderBenefit(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? jsx(List, { className: "mt-5", items: items, isDotted: isDotted }) : null] }));
     });
 
-    const RichText = JSX((props) => {
-        const { __html = '', richVersion = '' } = props;
-        return (jsx("div", { className: style(richVersion, 'md-container'), dangerouslySetInnerHTML: { __html } }));
-    });
+    function renderBackwardButton({ text, href, target, icon }, version) {
+        const iconVersion = version === 'primary' ? 'white' : 'black';
+        const commonProps = { text, href, target, ariaLabel: text };
+        return (jsxs("div", { className: "flex items-center gap-3", children: [jsx(Button, { className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center", version: version, rounded: true, ...commonProps, children: jsx(Img, { className: "w-4 h-4", image: {
+                            ...icon,
+                            icon: icon?.icon || 'ArrowLeftIcon',
+                            iconVersion: icon?.iconVersion || iconVersion,
+                        } }) }), jsx(Button, { version: "link", ...commonProps })] }));
+    }
+
+    const ProductBlock = JSX(({ className, backwardButton, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden p-default flex flex-col gap-10 box-border', className), ...rest, children: [backwardButton?.text
+                ? renderBackwardButton(backwardButton, !rest.version || rest.version === 'primary' ? 'primary' : 'white')
+                : null, jsx(ProductBlockInner, { className: "grow", ...rest })] })));
 
     const RichTextBlock = JSX((props) => {
         const { __html, richVersion, ...rest } = props;
@@ -1905,7 +1933,6 @@
         Headline,
         ImgBlock,
         LinkDocs,
-        LinkList,
         MobileAppTile,
         Placeholder,
         ProductBlock,
@@ -2058,11 +2085,9 @@
         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" }) }));
     }
 
-    function joinList(sep) {
-        return (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]), []);
-    }
+    const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
 
-    const packageVersion = "0.10.9";
+    const packageVersion = "0.11.0";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;