@redneckz/wildless-cms-uni-blocks 0.5.13 → 0.5.15

package/mobile/bundle/bundle.umd.js

@@ -228,8 +228,110 @@
         return JSXTmpl;
     };
 
-    function style2className(style) {
-        return style ? style.filter(Boolean).join(' ') : '';
+    class EventBus {
+        static inst = new EventBus();
+        subscribers = {};
+        subjectsStateMap = {};
+        subscribe(type, listener) {
+            this.subscribers[type] ||= [];
+            this.subscribers[type]?.push(listener);
+            const latestEvent = this.subjectsStateMap[type];
+            if (latestEvent) {
+                listener(latestEvent);
+            }
+            return () => {
+                this.unsubscribe(type, listener);
+            };
+        }
+        unsubscribe(type, listener) {
+            this.subscribers[type] = this.subscribers[type]?.filter((s) => s !== listener);
+        }
+        fire(type, event) {
+            this.subjectsStateMap[type] = event;
+            this.subscribers[type]?.forEach((s) => s(event));
+        }
+        subject(type, event) {
+            this.subjectsStateMap[type] = event;
+        }
+    }
+
+    const changeHashOnObserve = ({ anchor, anchorClickRef }) => (entries) => {
+        if (!entries?.length) {
+            return;
+        }
+        const [entry] = entries;
+        if (!entry.isIntersecting || entry.boundingClientRect.top > 150) {
+            return;
+        }
+        if (anchorClickRef?.current?.isScrolling && anchorClickRef.current.label === `#${anchor}`) {
+            EventBus.inst.fire('anchorClick', { isScrolling: false, label: undefined });
+            EventBus.inst.fire('tab', { type: 'link', label: anchor });
+        }
+        else if (!anchorClickRef?.current?.isScrolling) {
+            EventBus.inst.fire('tab', { type: 'link', label: anchor });
+        }
+    };
+
+    const IntersectionObserverTag = JSX((props) => {
+        const { tag = 'section', observerCallback, observerOptions, className = '', anchor = null, children, } = props;
+        const intersectionObserver = useRef(null);
+        const ref = useCallback((element) => {
+            if (!element) {
+                return;
+            }
+            if (intersectionObserver.current) {
+                intersectionObserver.current.disconnect();
+            }
+            intersectionObserver.current = new IntersectionObserver(observerCallback, observerOptions);
+            intersectionObserver.current.observe(element);
+        }, [observerCallback, observerOptions]);
+        const Tag = tag;
+        return (jsx(Tag, { ref: ref, className: className, id: anchor, children: children }));
+    });
+
+    const THRESHOLD_ACCURACY = 100; // Decimals number (100 is for two decimals number, 0.**)
+    const THRESHOLD_ARRAY_LENGTH = 18;
+    const THRESHOLD_ARRAY_START_VALUE = (THRESHOLD_ACCURACY - THRESHOLD_ARRAY_LENGTH) / THRESHOLD_ACCURACY;
+    const BlockWrapper = JSX(({ anchor, className, children, tag = 'section', labels }) => {
+        const Tag = tag;
+        const [shouldRenderBlock, setShouldRenderBlock] = useState(true);
+        const anchorClickRef = useRef({});
+        const observerCallback = useMemo(() => changeHashOnObserve({ anchor, anchorClickRef }), [anchor]);
+        useEffect(() => {
+            const anchorClickCleanup = EventBus.inst.subscribe('anchorClick', (e) => {
+                setShouldRenderBlock(true);
+                anchorClickRef.current = e;
+            });
+            const tabCleanup = EventBus.inst.subscribe('tab', (event) => {
+                if (event.type === 'group') {
+                    const blockHasSettgins = labels?.length || anchor;
+                    setShouldRenderBlock(event.label ? !blockHasSettgins || Boolean(labels?.includes(event.label)) : true);
+                }
+                else {
+                    changeHash(event.label);
+                    setShouldRenderBlock(true);
+                }
+            });
+            return () => {
+                anchorClickCleanup();
+                tabCleanup();
+            };
+        }, []);
+        if (!shouldRenderBlock) {
+            return null;
+        }
+        return anchor ? (jsx(IntersectionObserverTag, { tag: tag, className: className, observerCallback: observerCallback, observerOptions: {
+                threshold: new Array(THRESHOLD_ARRAY_LENGTH).fill(0).map(getIntersectionThreshold),
+            }, anchor: anchor, children: children })) : (jsx(Tag, { className: className, children: children }));
+    });
+    function getIntersectionThreshold(_, i) {
+        const value = (i + 1) / THRESHOLD_ACCURACY + THRESHOLD_ARRAY_START_VALUE;
+        return Math.round(value * THRESHOLD_ACCURACY) / THRESHOLD_ACCURACY;
+    }
+    function changeHash(label) {
+        if (label) {
+            globalThis.document.location.hash = label;
+        }
     }
 
     const HeadingClass = {
@@ -246,6 +348,43 @@
         return (jsx(Tag, { className: `font-sans font-medium m-0 ${HeadingClass[headingType]} ${className || ''}`, children: title }));
     });
 
+    const AccordionItemsList = JSX(({ children }) => (jsx("ul", { className: "list-none m-0 p-0", children: children })));
+
+    const Accordion = JSX(({ title, description, context, className = '', children, ...rest }) => (jsxs(BlockWrapper, { context: context, className: `py-6 px-4 font-sans bg-white text-primary-text ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-2 text-center", title: title }) : null, description ? jsx("div", { className: "mb-5 text-m-light text-center", children: description }) : null, jsx(AccordionItemsList, { children: children })] })));
+    Accordion.childrenTypes = ['AccordionItem'];
+
+    function getParentBlockDef(ancestors, type) {
+        const [, ...blocks] = ancestors || [];
+        return blocks.reverse().find((_) => !type || type === _?.type) || {};
+    }
+
+    function getParentBlockContent(ancestors, defaultContent) {
+        const { content } = getParentBlockDef(ancestors);
+        return content || defaultContent;
+    }
+
+    const Foldable = JSX(({ isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
+        const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
+        const onToggle = useCallback(() => {
+            setIsUnfolded((_) => !_);
+        }, []);
+        const sectionNode = renderFoldableSection({ isUnfolded, onToggle });
+        const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
+        return isFoldButtonOnTop ? (jsxs("div", { children: [buttonNode, sectionNode] })) : (jsxs("div", { children: [sectionNode, buttonNode] }));
+    });
+
+    const FoldableSection = JSX(({ className = '', isUnfolded, children }) => {
+        const containerRef = useRef(null);
+        useEffect(() => {
+            if (containerRef.current) {
+                containerRef.current.style.maxHeight = isUnfolded
+                    ? `${containerRef.current.scrollHeight}px`
+                    : '';
+            }
+        }, [isUnfolded, children?.length]);
+        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden max-h-0 ${className}`, children: children }));
+    });
+
     const svgUseStyleMap = {
         normal: 'text-primary-main',
         black: 'text-black',
@@ -268,7 +407,7 @@
     const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
 
     function getIconVersion$1(image) {
-        return typeof image === 'string' ? 'normal' : image.iconVersion || 'normal';
+        return typeof image === 'string' ? 'normal' : image?.iconVersion || 'normal';
     }
 
     const sourcesComparator = (a, b) => {
@@ -316,33 +455,13 @@
 
     const Img = JSX((props) => jsx(ImgInner, { ...props, isMobile: true }));
 
-    const ALIGN_TEXT = {
-        left: 'text-left',
-        center: 'text-center',
-        right: 'text-right',
-    };
-    const HEADLINE_BLOCK_STYLE_MAPS = {
-        transparent: {
-            background: 'bg-transparent',
-            text: 'text-primary-text',
-            description: 'text-primary-text',
-        },
-        primary: {
-            background: 'bg-white',
-            text: 'text-primary-text',
-            description: 'text-primary-text',
-        },
-        secondary: {
-            background: 'bg-primary-main',
-            text: 'text-white',
-            description: 'text-white/80',
-        },
-    };
-
-    const Headline = JSX(({ bgColorHeadline = 'transparent', className = '', title, description, image, align = 'left', }) => {
-        const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
-        return (jsxs("section", { className: `px-4 py-6 flex flex-col gap-2.5 ${STYLE_MAPS.background} ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx("p", { className: `text-m ${STYLE_MAPS.description} ${ALIGN_TEXT[align]}`, children: description })) : null, image?.src && (jsx("div", { className: "mt-2.5 mx-auto flex justify-center", children: jsx(Img, { image: image }) }))] }));
+    const icons = ['PlusIcon', 'MinusIcon'];
+    const AccordionItem = JSX(({ className = '', ancestors, label = '', labelIcon, isExpanded, children }) => {
+        const { bordered } = getParentBlockContent(ancestors, {});
+        return (jsx("li", { className: `${bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0'} border-solid border-main-divider ${className}`, children: jsx(Foldable, { isFoldButtonOnTop: true, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "flex flex-wrap group-last:last:pb-0 gap-5 [&>*]:p-0", isUnfolded: isUnfolded, children: children })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(FoldButton, { className: bordered ? '' : 'py-[14px] px-0', label: label, icon: icons[Number(isUnfolded)], primaryIcon: labelIcon, onClick: onToggle })) }) }));
     });
+    AccordionItem.childrenTypes = [];
+    const FoldButton = JSX(({ className, icon, label, primaryIcon, onClick }) => (jsxs("button", { className: `border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text group cursor-pointer ${className}`, onClick: onClick, children: [jsxs("span", { className: "text-m-title-xs font-medium pr-2.5 flex group-hover:text-primary-main", children: [primaryIcon ? (jsx(Img, { image: primaryIcon, className: "mr-3 flex-shrink-0", width: "24", height: "24", asSVG: true })) : null, label] }), jsx(Img, { className: "flex-shrink-0", image: icon, width: "24", height: "24", asSVG: true })] })));
 
     // column-gap between children of SwipeListControl container
     const DEFAULT_GAP = 14;
@@ -483,518 +602,79 @@
         return (jsxs("div", { className: className, children: [jsx(SwipeListControlList, { gap: gap, padding: padding, activeIndex: activeIndex, onScroll: handleScroll, children: children }), jsx(SwipeListControlDots, { ...dotsProps })] }));
     });
 
-    const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
-        const { text, fileSize, ...linkProps } = doc;
-        return (jsxs("a", { className: className, role: "link", ...linkProps, children: [icon ? (jsx(Img, { className: iconClassName, image: icon, width: "24px", height: "24px", asSVG: true })) : null, text ? (jsxs("span", { className: textClassName, children: [text, jsx("span", { className: suffixClassName, children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] }));
-    });
-    const formatSuffix = (ext, fileSize) => {
-        const prefix = ext || fileSize ? ',' : '';
-        const extension = ext ? ` ${ext}` : '';
-        const size = fileSize ? ` (${fileSize})` : '';
-        return prefix + extension + size;
+    const iconStyleMap = {
+        primary: 'group-hover:brightness-0 group-hover:invert',
+        secondary: 'group-hover:brightness-0 group-hover:invert',
+        white: 'group-hover:brightness-0 group-hover:invert',
+        link: '',
     };
-    const getExtFromHref = (href) => {
-        if (!href) {
+
+    const ButtonInner = JSX((props) => {
+        const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
+        return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? jsx("div", { className: iconStyleMap[version], children: appendLeft }) : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-xs-light text-left", children: aboveText }), jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-0.5' : 'text-l'}`, children: text })] })) : null, appendRight ? jsx("div", { className: iconStyleMap[version], children: appendRight }) : null] }));
+    });
+    const getButtonStyle = (props) => {
+        const { className = '', version, aboveText, rounded } = props;
+        if (version === 'link') {
             return '';
         }
-        const index = href.lastIndexOf('.');
-        return index !== -1 ? href.substring(index + 1) : '';
+        const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-9'}`;
+        return [
+            'group flex items-center justify-center',
+            isWithText(props) ? withTextStyle : 'h-12 w-12',
+            rounded ? 'rounded-full' : '',
+            className,
+        ].join(' ');
     };
+    const isWithText = ({ text, aboveText, appendLeft }) => Boolean(text || aboveText || !appendLeft);
 
-    const LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full box-border ${className}`, iconClassName: "mr-3 min-w-6 min-h-6", doc: doc, icon: icon })));
-
-    const LinkDocsHorizontalList = JSX(({ context, hasBorder = true, documents, icon }) => {
-        return (jsx(SwipeListControl, { context: context, className: "text-s text-primary-main mt-5", children: documents?.length
-                ? documents.map((doc, i) => (jsx(LinkDocsListItem, { className: hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : '', doc: doc, icon: icon }, String(i))))
-                : null }));
+    const buttonStyleMap = {
+        primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
+        secondary: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
+        white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white',
+        link: 'text-primary-main',
+    };
+    const buttonDisabledStyleMap = {
+        primary: 'bg-secondary-dark text-secondary-text',
+        secondary: 'bg-secondary-light text-secondary-text',
+        white: 'bg-white text-primary-text',
+        link: '',
+    };
+    const styleButton = 'w-full text-center font-sans select-none';
+    const Button = JSX(({ className, text, aboveText, appendLeft, href, target, onClick, children, disabled, rounded, version = 'primary', ariaLabel, ...rest }) => {
+        // It isn't a valid HTML attribute. Must be excluded from "rest"
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { appendRight, ...buttonInnerRest } = rest;
+        const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, rounded: rounded, version: version }));
+        if (disabled) {
+            return (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: -1, className: `inline-block ${styleButton} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: buttonInner }));
+        }
+        return (jsx("a", { className: `${styleButton} inline-block cursor-pointer no-underline focus:border focus:border-primary-focus ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: !href ? 'button' : 'link', ...buttonInnerRest, children: buttonInner }));
     });
 
-    const LinkDocsVerticalList = JSX(({ hasBorder = true, documents, icon }) => {
-        return (jsx("div", { className: `text-s text-primary-main flex flex-col mt-5 ${hasBorder ? 'gap-3.5' : 'gap-2'}`, role: "list", children: documents?.length
-                ? documents.map((doc, i) => (jsx("div", { role: "listitem", children: jsx(LinkDocsListItem, { className: hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : '', doc: doc, icon: icon }) }, String(i))))
-                : null }));
-    });
+    const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
+    const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
 
-    const LinkDocs = JSX(({ className = '', context, title, description, icon = { icon: 'DocIconMonoColor' }, documents, orientation = 'vertical', hasBorder = true, }) => {
-        return (jsxs("section", { className: `font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`, children: [jsx(Headline, { className: `!p-0 ${description ? 'gap-2' : 'gap-5'}`, title: title, description: description, context: context, align: "center" }), orientation === 'vertical' ? (jsx(LinkDocsVerticalList, { hasBorder: hasBorder, documents: documents, icon: icon })) : (jsx(LinkDocsHorizontalList, { context: context, hasBorder: hasBorder, documents: documents, icon: icon }))] }));
+    const headingStyle = (isFillGradient = false) => (isFillGradient ? 'text-white' : '');
+    const subtitleStyle = (isFillGradient = false) => `text-s mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`;
+    const HeaderCell = JSX(({ icon, image, title, subtitle, isFillGradient }) => (jsxs("div", { role: "columnheader", children: [icon ? (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })) : null, image?.src && (jsx("div", { className: "mb-3.5", children: jsx(Img, { image: image }) })), title ? (jsx(Heading, { headingType: "h4", className: headingStyle(isFillGradient), title: title })) : null, subtitle ? jsx("div", { className: subtitleStyle(isFillGradient), children: subtitle }) : null] })));
+
+    const TableCell = JSX(({ cell, rowHeader, isFillGradient = false }) => {
+        const cellWrapperClasses = `box-border flex flex-col`;
+        const cellClasses = `h-full ${DIVIDER_CLASSES}`;
+        return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { className: cellClasses, children: cell.map(renderCellInner$1(isFillGradient, rowHeader)) }) }));
     });
+    const renderCellInner$1 = (isFillGradient, rowHeader) => ({ label, description }, i) => (jsxs("div", { className: "flex justify-between text-s py-3.5", children: [jsx("div", { className: `${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`, children: rowHeader }), jsxs("div", { className: "basis-1/2", children: [label ? (jsx("div", { className: `text-right ${isFillGradient ? 'text-white' : ''}`, children: label })) : null, description ? (jsx("div", { className: `text-right ${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`, children: description })) : null] })] }, String(i)));
 
-    const VersionStyleMap = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
-    };
-
-    const isURL = (href) => href?.includes('//');
-    const withoutQuery = (href) => (href || '').replace(/\/?\?.*/, '');
-    const getOrigin = (href) => {
-        if (!href || !isURL(href)) {
-            return undefined;
-        }
-        const url = href;
-        const protoSeparator = '//';
-        const endOfProto = url.indexOf(protoSeparator);
-        const endOfOrigin = url.indexOf('/', endOfProto + protoSeparator.length);
-        return endOfOrigin !== -1 ? url.substring(0, endOfOrigin) : url;
-    };
-    const getHash = (href) => {
-        if (!href || !isURL(href)) {
-            return undefined;
-        }
-        const hashIndex = href.indexOf('#');
-        return hashIndex !== -1 ? href.substring(hashIndex, href.length) : undefined;
-    };
-    const isHash = (href) => href?.startsWith('#');
-
-    var url = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        isURL: isURL,
-        withoutQuery: withoutQuery,
-        getOrigin: getOrigin,
-        getHash: getHash,
-        isHash: isHash
-    });
-
-    const MOBILE_URL_PATH = '/mobile';
-    const withoutMobilePath = (href) => (href || '').replace(MOBILE_URL_PATH, '');
-
-    const adjustHref = (href, router) => {
-        if (!href) {
-            return href;
-        }
-        const relativeHref = toRelativeHref(href, router) || '';
-        const isMobilePage = router?.pathname.startsWith(MOBILE_URL_PATH);
-        return isMobilePage && !isURL(relativeHref) ? `${MOBILE_URL_PATH}${relativeHref}` : relativeHref;
-    };
-    const toRelativeHref = (href, router) => {
-        if (!href) {
-            return href;
-        }
-        const origin = getOrigin(router?.href);
-        return origin ? href.replace(origin, '') || '/' : href;
-    };
-
-    const defaultHandlerDecorator = (handler) => handler;
-    function useLink({ router, handlerDecorator = defaultHandlerDecorator, }, link) {
-        const href = adjustHref(link.href, router);
-        return {
-            ...link,
-            href,
-            'aria-label': link.text,
-            onClick: handlerDecorator((ev) => {
-                const isLocalHref = href && !isURL(href);
-                const isLocalTarget = !link.target || link.target === '_self';
-                if (isLocalHref && isLocalTarget) {
-                    ev?.preventDefault();
-                    router.push(href);
-                }
-            }, link),
-        };
-    }
-
-    const iconStyleMap = {
-        primary: 'group-hover:brightness-0 group-hover:invert',
-        secondary: 'group-hover:brightness-0 group-hover:invert',
-        white: 'group-hover:brightness-0 group-hover:invert',
-        link: '',
-    };
-
-    const ButtonInner = JSX((props) => {
-        const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
-        return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? jsx("div", { className: iconStyleMap[version], children: appendLeft }) : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-xs-light text-left", children: aboveText }), jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-0.5' : 'text-l'}`, children: text })] })) : null, appendRight ? jsx("div", { className: iconStyleMap[version], children: appendRight }) : null] }));
-    });
-    const getButtonStyle = (props) => {
-        const { className = '', version, aboveText, rounded } = props;
-        if (version === 'link') {
-            return '';
-        }
-        const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-9'}`;
-        return [
-            'group flex items-center justify-center',
-            isWithText(props) ? withTextStyle : 'h-12 w-12',
-            rounded ? 'rounded-full' : '',
-            className,
-        ].join(' ');
-    };
-    const isWithText = ({ text, aboveText, appendLeft }) => Boolean(text || aboveText || !appendLeft);
-
-    const buttonStyleMap = {
-        primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
-        secondary: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
-        white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white',
-        link: 'text-primary-main',
-    };
-    const buttonDisabledStyleMap = {
-        primary: 'bg-secondary-dark text-secondary-text',
-        secondary: 'bg-secondary-light text-secondary-text',
-        white: 'bg-white text-primary-text',
-        link: '',
-    };
-    const styleButton = 'w-full text-center font-sans select-none';
-    const Button = JSX(({ className, text, aboveText, appendLeft, href, target, onClick, children, disabled, rounded, version = 'primary', ariaLabel, ...rest }) => {
-        // It isn't a valid HTML attribute. Must be excluded from "rest"
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { appendRight, ...buttonInnerRest } = rest;
-        const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, rounded: rounded, version: version }));
-        if (disabled) {
-            return (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: -1, className: `inline-block ${styleButton} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: buttonInner }));
-        }
-        return (jsx("a", { className: `${styleButton} inline-block cursor-pointer no-underline focus:border focus:border-primary-focus ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: !href ? 'button' : 'link', ...buttonInnerRest, children: buttonInner }));
-    });
-
-    const ButtonSection = JSX(({ context, className = '', buttons }) => {
-        const { handlerDecorator } = context;
-        const router = context.useRouter();
-        return buttons && buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => (jsx(ButtonSectionItem, { button: button, handlerDecorator: handlerDecorator, router: router }, String(index)))) })) : null;
-    });
-    const ButtonSectionItem = JSX(({ router, handlerDecorator, button }) => {
-        const buttonProps = useLink({ router, handlerDecorator }, button);
-        return jsx(Button, { ...button, ...buttonProps });
-    });
-
-    const LIST_DOT_STYLE_MAP$1 = {
-        primary: 'bg-primary-text',
-        secondary: 'bg-white',
-        gray: 'bg-secondary-text',
-    };
-    const DOT_SIZE_MAP = {
-        L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4 mt-3',
-        M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3 mt-3',
-        S: 'w-1 h-1 min-w-1 min-h-1 mr-2 mt-2.5',
-    };
-    const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary', size = 'M' }) => {
-        return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted ? (jsx("div", { className: `rounded-full inline-block ${LIST_DOT_STYLE_MAP$1[version]} ${DOT_SIZE_MAP[size]}` })) : null, jsx("span", { children: children })] }));
-    });
-
-    const TEXT_STYLE_MAP = {
-        primary: 'text-primary-text',
-        secondary: 'text-white',
-        gray: 'text-secondary-text',
-    };
-    const TEXT_SIZE_MAP = {
-        S: 'text-l-light',
-        M: 'text-h6',
-        L: 'text-h5',
-    };
-    const ITEM_INDENT_MAP = {
-        S: 'ml-2',
-        M: 'ml-3',
-        L: 'ml-4',
-    };
-    const List = JSX((props) => {
-        const { className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M', version = 'primary', } = props;
-        if (!items?.length) {
-            return null;
-        }
-        return (jsx("section", { className: `${TEXT_STYLE_MAP[version]} ${TEXT_SIZE_MAP[listItemSize]} ${className} ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''}`, role: "list", children: items.map((item, i) => (jsx(ListItem, { className: `${itemClassName} mb-1.5`, isDotted: isDotted, version: version, size: listItemSize, children: item }, String(i)))) }));
-    });
-
-    const BaseTile = JSX(({ className = '', title = '', children, buttons, image }) => {
-        return (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 titleStyleMap = {
-        primary: 'text-primary-text',
-        secondary: 'text-white',
-    };
-    const descStyleMap = {
-        primary: 'text-secondary-text',
-        secondary: 'text-white',
-    };
-    const BenefitItem = JSX((props) => {
-        const { className = '', icon, label, description, version = 'primary', benefitsVersion = 'normal', } = props;
-        const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
-        const listItemAlign = description ? 'items-start' : 'items-center';
-        const iconVersion = getIconVersion(icon, isIconWhite);
-        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: renderBenefitIconBgStyle(version, benefitsVersion), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion }, asSVG: true }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? jsx("div", { className: `text-h6 ${titleStyleMap[version]}`, children: label }) : null, description ? (jsx("div", { className: `text-m-light ${descStyleMap[version]}`, children: description })) : null] })] }));
-    });
-    function renderBenefitIconBgStyle(version, benefitsVersion) {
-        let bgColorStyle = 'bg-primary-main text-black';
-        if (version === 'secondary') {
-            bgColorStyle = 'bg-white/30 text-black';
-        }
-        else if (benefitsVersion === 'normal') {
-            bgColorStyle = 'bg-secondary-light text-primary-main';
-        }
-        return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
-    }
-    const getIconVersion = (icon, isIconWhite) => icon?.iconVersion || isIconWhite ? 'white' : 'normal';
-
-    const renderBenefit = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => {
-        return (jsx(BenefitItem, { icon: icon, label: label, description: description, version: version, benefitsVersion: benefitsVersion }, String(i)));
-    };
-
-    const ProductBlockInner = JSX(({ className = '', context, title, headlineVersion = 'L', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, label, }) => {
-        return (jsxs("div", { className: `w-full ${className}`, children: [jsxs("div", { children: [label ? renderLabel(label, version) : null, jsx(Headline, { context: context, className: "!p-0 max-w-[600px]", title: title, description: description, bgColorHeadline: version, headlineVersion: headlineVersion }), jsxs(BaseTile, { context: context, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-5 gap-2.5" })) : null, children: [benefits?.filter((_) => _.label)?.length ? (jsx("div", { className: "mt-3", children: benefits.map(renderBenefit(version, benefitsVersion)) })) : null, items?.length ? (jsx(List, { className: "mt-3 text-m", items: items, version: version, 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 labelStyleMap = {
-        primary: 'text-primary-main border-secondary-hover',
-        secondary: 'text-white/80',
-    };
-    const renderLabel = (label, version) => (jsx("div", { className: `px-2.5 py-1.5 mb-5 rounded-md border-2 border-solid w-fit ${labelStyleMap[version]}`, children: label }));
-
-    const ProductBlock = JSX((props /* Get rid of image and benefits */) => {
-        const { className = '', version = 'primary' } = props;
-        return (jsx("section", { className: `font-sans bg-white px-4 py-6 ${VersionStyleMap[version]} ${className}`, children: jsx(ProductBlockInner, { ...props }) }));
-    });
-
-    const textBlockStyleMaps = {
-        primary: {
-            background: 'bg-white',
-            icon: 'bg-primary-main text-white',
-            title: 'text-primary-text',
-            description: 'text-secondary-text',
-        },
-        secondary: {
-            background: 'bg-primary-main',
-            icon: 'bg-white text-primary-main',
-            title: 'text-white',
-            description: 'text-white',
-        },
-        'secondary-light': {
-            background: 'bg-primary-main/10',
-            icon: 'bg-primary-main text-white',
-            title: 'text-primary-text',
-            description: 'text-secondary-text',
-        },
-    };
-    const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className = '', items, isDotted = true, }) => {
-        const textBlockStyleMap = textBlockStyleMaps[blockVersion];
-        const listBlockVersion = blockVersion === 'secondary' ? 'secondary' : 'gray';
-        return (jsxs("section", { className: `font-sans px-4 py-[18px] flex flex-col ${textBlockStyleMap.background} ${className}`, children: [iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title ? (jsx("div", { className: `text-l font-medium mb-1 ${textBlockStyleMap.title}`, children: title })) : null, description ? (jsx("div", { className: `text-s ${textBlockStyleMap.description}`, children: description })) : null, items?.length ? (jsx(List, { className: "mt-1 text-m", items: items, isDotted: isDotted, version: listBlockVersion })) : null] })] }));
-    });
-    function renderIcon(className) {
-        return (jsx("div", { className: "mb-3", children: jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs-light ${className}`, children: "i" }) }));
-    }
-    function renderImage(image) {
-        return image?.src ? jsx(Img, { className: "pb-3 mr-auto", image: image }) : null;
-    }
-
-    const Gallery = JSX(({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {
-        const headingClassName = description ? 'mb-2' : 'mb-5';
-        return (jsxs("section", { className: `relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`, children: [jsxs("div", { className: "flex flex-col items-center mb-5", children: [title ? (jsx(Heading, { headingType: "h3", className: `text-center ${headingClassName}`, title: title })) : null, description ? (jsx("div", { className: "text-m max-w-[600px] text-center mb-5", children: description })) : null] }), renderCardsLayout(orientation, cards, context)] }));
-    });
-    function renderCardsLayout(orientation, cards, context) {
-        return orientation === 'horizontal' ? (jsx(SwipeListControl, { context: context, children: cards?.map(renderCard) })) : (jsx("div", { className: "grid gap-[14px]", children: cards?.map(renderCard) }));
-    }
-    function renderCard(card, key) {
-        return (jsxs("div", { className: `h-full justify-between box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
-      ${VersionStyleMap[card.version ?? 'primary']}`, children: [jsxs("div", { children: [card.image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-3.5", image: card.image }) })) : null, card.title ? jsx("h3", { className: `text-m-title-xs font-medium m-0`, children: card.title }) : null, card.description ? renderDescription(card) : null, card.items?.length ? renderItems(card.items, card.isDotted, card.version) : null] }), card?.button?.text ? renderButton(card.button) : null] }, key));
-    }
-    function renderButton(button) {
-        return (jsx(Button, { className: "mt-3", appendLeft: button?.icon && jsx(Img, { image: button?.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
-    }
-    function renderDescription(card) {
-        return (jsx("div", { className: `text-secondary-text mt-1 text-s ${card.version === 'secondary' ? 'text-white opacity-80' : ''}`, children: card.description }));
-    }
-    const LIST_DOT_STYLE_MAP = {
-        primary: 'bg-primary-text',
-        secondary: 'bg-white',
-        gray: 'bg-secondary-text',
-    };
-    function renderItems(items, isDotted, version = 'primary') {
-        return (jsx("section", { className: "mt-3", children: items.map((item, i) => (jsxs("div", { children: [isDotted ? (jsx("div", { className: `rounded-full inline-block mr-3 mt-2 w-2 h-2 min-w-2 min-h-2 ${LIST_DOT_STYLE_MAP[version]}` })) : null, jsx("span", { className: "text-m font-medium", children: item.title }), jsx("span", { className: `text-s pl-2 ${version === 'primary' ? 'text-secondary-text' : ''}`, children: item.text })] }, String(i)))) }));
-    }
-
-    class EventBus {
-        static inst = new EventBus();
-        subscribers = {};
-        subjectsStateMap = {};
-        subscribe(type, listener) {
-            this.subscribers[type] ||= [];
-            this.subscribers[type]?.push(listener);
-            const latestEvent = this.subjectsStateMap[type];
-            if (latestEvent) {
-                listener(latestEvent);
-            }
-            return () => {
-                this.unsubscribe(type, listener);
-            };
-        }
-        unsubscribe(type, listener) {
-            this.subscribers[type] = this.subscribers[type]?.filter((s) => s !== listener);
-        }
-        fire(type, event) {
-            this.subjectsStateMap[type] = event;
-            this.subscribers[type]?.forEach((s) => s(event));
-        }
-        subject(type, event) {
-            this.subjectsStateMap[type] = event;
-        }
-    }
-
-    const changeHashOnObserve = ({ anchor, anchorClickRef }) => (entries) => {
-        if (!entries?.length) {
-            return;
-        }
-        const [entry] = entries;
-        if (!entry.isIntersecting || entry.boundingClientRect.top > 150) {
-            return;
-        }
-        if (anchorClickRef?.current?.isScrolling && anchorClickRef.current.label === `#${anchor}`) {
-            EventBus.inst.fire('anchorClick', { isScrolling: false, label: undefined });
-            EventBus.inst.fire('tab', { type: 'link', label: anchor });
-        }
-        else if (!anchorClickRef?.current?.isScrolling) {
-            EventBus.inst.fire('tab', { type: 'link', label: anchor });
-        }
-    };
-
-    const IntersectionObserverTag = JSX((props) => {
-        const { tag = 'section', observerCallback, observerOptions, className = '', anchor = null, children, } = props;
-        const intersectionObserver = useRef(null);
-        const ref = useCallback((element) => {
-            if (!element) {
-                return;
-            }
-            if (intersectionObserver.current) {
-                intersectionObserver.current.disconnect();
-            }
-            intersectionObserver.current = new IntersectionObserver(observerCallback, observerOptions);
-            intersectionObserver.current.observe(element);
-        }, [observerCallback, observerOptions]);
-        const Tag = tag;
-        return (jsx(Tag, { ref: ref, className: className, id: anchor, children: children }));
-    });
-
-    const THRESHOLD_ACCURACY = 100; // Decimals number (100 is for two decimals number, 0.**)
-    const THRESHOLD_ARRAY_LENGTH = 18;
-    const THRESHOLD_ARRAY_START_VALUE = (THRESHOLD_ACCURACY - THRESHOLD_ARRAY_LENGTH) / THRESHOLD_ACCURACY;
-    const BlockWrapper = JSX(({ anchor, className, children, tag = 'section', labels }) => {
-        const Tag = tag;
-        const [shouldRenderBlock, setShouldRenderBlock] = useState(true);
-        const anchorClickRef = useRef({});
-        const observerCallback = useMemo(() => changeHashOnObserve({ anchor, anchorClickRef }), [anchor]);
-        useEffect(() => {
-            const anchorClickCleanup = EventBus.inst.subscribe('anchorClick', (e) => {
-                anchorClickRef.current = e;
-            });
-            const tabCleanup = EventBus.inst.subscribe('tab', (event) => {
-                if (event.type === 'group') {
-                    setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
-                }
-                else {
-                    changeHash(event.label);
-                    setShouldRenderBlock(true);
-                }
-            });
-            return () => {
-                anchorClickCleanup();
-                tabCleanup();
-            };
-        }, []);
-        if (!shouldRenderBlock) {
-            return null;
-        }
-        return anchor ? (jsx(IntersectionObserverTag, { tag: tag, className: className, observerCallback: observerCallback, observerOptions: {
-                threshold: new Array(THRESHOLD_ARRAY_LENGTH).fill(0).map(getIntersectionThreshold),
-            }, anchor: anchor, children: children })) : (jsx(Tag, { className: className, children: children }));
-    });
-    function getIntersectionThreshold(_, i) {
-        const value = (i + 1) / THRESHOLD_ACCURACY + THRESHOLD_ARRAY_START_VALUE;
-        return Math.round(value * THRESHOLD_ACCURACY) / THRESHOLD_ACCURACY;
-    }
-    function changeHash(label) {
-        if (label) {
-            globalThis.document.location.hash = label;
-        }
-    }
-
-    const LinkList = JSX(({ className = '', documents, ...rest }) => {
-        return (jsx(BlockWrapper, { className: `font-sans bg-white mt-[10px] ${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 EmbeddableBlocks = {
-        Headline,
-        LinkDocs,
-        TextBlock,
-        ProductBlock,
-        Gallery,
-        LinkList,
-    };
-
-    const renderBlocksList$1 = ({ blocks, context, className = '' }) => blocks?.length ? blocks.map(renderBlock$1({ context, className })) : [];
-    const renderBlock$1 = ({ context, className }) => (block, i) => {
-        if (!block) {
-            return null;
-        }
-        const { style, blockListType: type, ...rest } = block;
-        if (!type || !(type in EmbeddableBlocks)) {
-            return null;
-        }
-        const classNameBlock = style2className(style);
-        const EmbeddedBlock = EmbeddableBlocks[type];
-        return (jsx(EmbeddedBlock, { className: `${className} ${classNameBlock}`, context: context, ...rest }, `block_${i}`));
-    };
-
-    const Foldable = JSX(({ isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
-        const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
-        const onToggle = useCallback(() => {
-            setIsUnfolded((_) => !_);
-        }, []);
-        const sectionNode = renderFoldableSection({ isUnfolded, onToggle });
-        const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
-        return isFoldButtonOnTop ? (jsxs("div", { children: [buttonNode, sectionNode] })) : (jsxs("div", { children: [sectionNode, buttonNode] }));
-    });
-
-    const FoldableSection = JSX(({ className = '', isUnfolded, children }) => {
-        const containerRef = useRef(null);
-        useEffect(() => {
-            if (containerRef.current) {
-                containerRef.current.style.maxHeight = isUnfolded
-                    ? `${containerRef.current.scrollHeight}px`
-                    : '';
-            }
-        }, [isUnfolded]);
-        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden max-h-0 ${className}`, children: children }));
-    });
-
-    const icons = ['PlusIcon', 'MinusIcon'];
-    const AccordionItem = JSX(({ label = '', labelIcon, bordered, children, hasContent = true }) => (jsx("li", { className: `${borderedLiClass(bordered)} border-solid border-main-divider`, children: jsx(Foldable, { isFoldButtonOnTop: true, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: "flex flex-wrap group-last:last:pb-0", isUnfolded: isUnfolded, children: children })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(FoldButton, { className: bordered ? '' : 'py-[14px] px-0', label: label, icon: icons[Number(isUnfolded)], primaryIcon: labelIcon, hasContent: hasContent, onClick: onToggle })) }) })));
-    const FoldButton = JSX(({ className, hasContent, icon, label, primaryIcon, onClick }) => (jsxs("button", { className: `border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
-  ${className}
-  ${hasContent ? 'group cursor-pointer' : ''}`, onClick: onClick, children: [jsxs("span", { className: `text-m-title-xs font-medium pr-2.5 flex ${hasContent ? 'group-hover:text-primary-main' : ''}`, children: [primaryIcon ? (jsx(Img, { image: primaryIcon, className: "mr-3 flex-shrink-0", width: "24", height: "24", asSVG: true })) : null, label] }), hasContent ? (jsx(Img, { className: "flex-shrink-0", image: icon, width: "24", height: "24", asSVG: true })) : null] })));
-    function borderedLiClass(bordered) {
-        return bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0';
-    }
-
-    const AccordionItemsList = JSX(({ children }) => (jsx("ul", { className: "list-none m-0 p-0", children: children })));
-
-    const Accordion = JSX(({ title, description, accordionItems, context, className = '', bordered, ...rest }) => {
-        return (jsxs(BlockWrapper, { context: context, className: `py-6 px-4 font-sans bg-white text-primary-text ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-2 text-center", title: title }) : null, description ? jsx("div", { className: "mb-5 text-m-light text-center", children: description }) : null, accordionItems?.length ? (jsx(AccordionItemsList, { children: accordionItems.map((item, i) => (jsx(AccordionItem, { context: context, bordered: bordered, hasContent: Boolean(item.blocks?.length), ...item, children: renderBlocksList$1({ blocks: item.blocks, context, className: '!p-0 mb-5' }) }, `AccordionItem_${i}`))) })) : null] }));
-    });
-
-    const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
-    const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
-
-    const headingStyle = (isFillGradient = false) => (isFillGradient ? 'text-white' : '');
-    const subtitleStyle = (isFillGradient = false) => `text-s mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`;
-    const HeaderCell = JSX(({ icon, image, title, subtitle, isFillGradient }) => (jsxs("div", { role: "columnheader", children: [icon ? (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })) : null, image?.src && (jsx("div", { className: "mb-3.5", children: jsx(Img, { image: image }) })), title ? (jsx(Heading, { headingType: "h4", className: headingStyle(isFillGradient), title: title })) : null, subtitle ? jsx("div", { className: subtitleStyle(isFillGradient), children: subtitle }) : null] })));
-
-    const TableCell = JSX(({ cell, rowHeader, isFillGradient = false }) => {
-        const cellWrapperClasses = `box-border flex flex-col`;
-        const cellClasses = `h-full ${DIVIDER_CLASSES}`;
-        return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { className: cellClasses, children: cell.map(renderCellInner$1(isFillGradient, rowHeader)) }) }));
-    });
-    const renderCellInner$1 = (isFillGradient, rowHeader) => ({ label, description }, i) => (jsxs("div", { className: "flex justify-between text-s py-3.5", children: [jsx("div", { className: `${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`, children: rowHeader }), jsxs("div", { className: "basis-1/2", children: [label ? (jsx("div", { className: `text-right ${isFillGradient ? 'text-white' : ''}`, children: label })) : null, description ? (jsx("div", { className: `text-right ${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`, children: description })) : null] })] }, String(i)));
-
-    const TableColumn = JSX(({ header, columnData, visibleRowLength = 0, isFillGradient, showRow, onToggleColumn }) => {
-        const columnDataView = columnData?.slice(0, showRow ? columnData.length : visibleRowLength);
-        const gradientClassName = isFillGradient ? GRADIENT : '';
-        const buttonVersion = isFillGradient ? 'secondary' : 'primary';
-        return (jsxs("div", { className: `border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`, role: "row", children: [jsx(HeaderCell, { ...header, isFillGradient: isFillGradient }), columnDataView?.length
-                    ? columnDataView.map(({ rowHeader, cell }, i) => (jsx(TableCell, { cell: cell, rowHeader: rowHeader, isFillGradient: isFillGradient }, String(i))))
-                    : null, showRow && header?.link ? (jsx(Button, { href: header.link.href, target: header.link.target, version: buttonVersion, className: "text-s font-medium mt-4 py-[11px]", children: header.link.text })) : null, renderToggleButton({ onToggleColumn, isFillGradient, showRow })] }));
-    });
-    const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow, }) => (jsx("div", { className: "mt-5", role: "cell", children: jsx("a", { role: "link", onClick: onToggleColumn, className: `text-s font-medium cursor-pointer ${isFillGradient ? 'text-white/80' : 'text-primary-main'}`, children: !showRow ? 'Показать описание' : 'Скрыть' }) }));
+    const TableColumn = JSX(({ header, columnData, visibleRowLength = 0, isFillGradient, showRow, onToggleColumn }) => {
+        const columnDataView = columnData?.slice(0, showRow ? columnData.length : visibleRowLength);
+        const gradientClassName = isFillGradient ? GRADIENT : '';
+        const buttonVersion = isFillGradient ? 'secondary' : 'primary';
+        return (jsxs("div", { className: `border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`, role: "row", children: [jsx(HeaderCell, { ...header, isFillGradient: isFillGradient }), columnDataView?.length
+                    ? columnDataView.map(({ rowHeader, cell }, i) => (jsx(TableCell, { cell: cell, rowHeader: rowHeader, isFillGradient: isFillGradient }, String(i))))
+                    : null, showRow && header?.link ? (jsx(Button, { href: header.link.href, target: header.link.target, version: buttonVersion, className: "text-s font-medium mt-4 py-[11px]", children: header.link.text })) : null, renderToggleButton({ onToggleColumn, isFillGradient, showRow })] }));
+    });
+    const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow, }) => (jsx("div", { className: "mt-5", role: "cell", children: jsx("a", { role: "link", onClick: onToggleColumn, className: `text-s font-medium cursor-pointer ${isFillGradient ? 'text-white/80' : 'text-primary-main'}`, children: !showRow ? 'Показать описание' : 'Скрыть' }) }));
 
     const ComparisonTable = JSX((props) => {
         const { className, title } = props;
@@ -1116,6 +796,16 @@
         return jsx(SearchBarInner, { className: className, isMobile: true });
     });
 
+    const LinkList = JSX(({ className = '', documents, ...rest }) => {
+        return (jsx(BlockWrapper, { className: `font-sans bg-white mt-[10px] ${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 SVG_COLOR = {
         'bg-white': 'text-primary-main',
         transparent: 'text-white',
@@ -1124,13 +814,80 @@
         'bg-white': 'text-black',
         transparent: 'text-white',
     };
-    const Logo = JSX(({ className = '', href, children, targetBlank, bgColor = 'bg-white', showTitle = true }) => {
-        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', "aria-label": "\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A", children: [jsx(Img, { image: { icon: 'LogoIcon', iconVersion: SVG_COLOR[bgColor] }, className: `${SVG_COLOR[bgColor]} w-10 h-[38px]`, asSVG: true }), showTitle ? (jsx("span", { className: `${TEXT_COLOR[bgColor]} text-s font-medium ml-2.5`, children: children || 'Россельхозбанк' })) : null] }));
-    });
+    const Logo = JSX(({ className = '', href, children, targetBlank, bgColor = 'bg-white', showTitle = true }) => {
+        return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', "aria-label": "\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A", children: [jsx(Img, { image: { icon: 'LogoIcon', iconVersion: SVG_COLOR[bgColor] }, className: `${SVG_COLOR[bgColor]} w-10 h-[38px]`, asSVG: true }), showTitle ? (jsx("span", { className: `${TEXT_COLOR[bgColor]} text-s font-medium ml-2.5`, children: children || 'Россельхозбанк' })) : 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-[50px] h-[50px]", children: jsx(Logo, { className: "w-[33px]", 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 isURL = (href) => href?.includes('//');
+    const withoutQuery = (href) => (href || '').replace(/\/?\?.*/, '');
+    const getOrigin = (href) => {
+        if (!href || !isURL(href)) {
+            return undefined;
+        }
+        const url = href;
+        const protoSeparator = '//';
+        const endOfProto = url.indexOf(protoSeparator);
+        const endOfOrigin = url.indexOf('/', endOfProto + protoSeparator.length);
+        return endOfOrigin !== -1 ? url.substring(0, endOfOrigin) : url;
+    };
+    const getHash = (href) => {
+        if (!href || !isURL(href)) {
+            return undefined;
+        }
+        const hashIndex = href.indexOf('#');
+        return hashIndex !== -1 ? href.substring(hashIndex, href.length) : undefined;
+    };
+    const isHash = (href) => href?.startsWith('#');
+
+    var url = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        isURL: isURL,
+        withoutQuery: withoutQuery,
+        getOrigin: getOrigin,
+        getHash: getHash,
+        isHash: isHash
+    });
+
+    const MOBILE_URL_PATH = '/mobile';
+    const withoutMobilePath = (href) => (href || '').replace(MOBILE_URL_PATH, '');
+
+    const adjustHref = (href, router) => {
+        if (!href) {
+            return href;
+        }
+        const relativeHref = toRelativeHref(href, router) || '';
+        const isMobilePage = router?.pathname.startsWith(MOBILE_URL_PATH);
+        return isMobilePage && !isURL(relativeHref) ? `${MOBILE_URL_PATH}${relativeHref}` : relativeHref;
+    };
+    const toRelativeHref = (href, router) => {
+        if (!href) {
+            return href;
+        }
+        const origin = getOrigin(router?.href);
+        return origin ? href.replace(origin, '') || '/' : href;
+    };
 
-    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-[50px] h-[50px]", children: jsx(Logo, { className: "w-[33px]", 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 defaultHandlerDecorator = (handler) => handler;
+    function useLink({ router, handlerDecorator = defaultHandlerDecorator, }, link) {
+        const href = adjustHref(link.href, router);
+        return {
+            ...link,
+            href,
+            'aria-label': link.text,
+            onClick: handlerDecorator((ev) => {
+                const isLocalHref = href && !isURL(href);
+                const isLocalTarget = !link.target || link.target === '_self';
+                if (isLocalHref && isLocalTarget) {
+                    ev?.preventDefault();
+                    router.push(href);
+                }
+            }, link),
+        };
+    }
 
     const Contacts = JSX(({ className = '', items, hasButton, context }) => {
         const router = context.useRouter();
@@ -1229,6 +986,37 @@
         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", asSVG: true }) : null, jsx("span", { className: "pl-2.5 font-medium text-primary-text", children: text })] }, `footer-${i}`));
     };
 
+    const VersionStyleMap = {
+        primary: 'bg-white text-primary-text',
+        secondary: 'bg-primary-main text-white',
+    };
+
+    const Gallery = JSX(({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {
+        const headingClassName = description ? 'mb-2' : 'mb-5';
+        return (jsxs("section", { className: `relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`, children: [jsxs("div", { className: "flex flex-col items-center mb-5", children: [title ? (jsx(Heading, { headingType: "h3", className: `text-center ${headingClassName}`, title: title })) : null, description ? (jsx("div", { className: "text-m max-w-[600px] text-center mb-5", children: description })) : null] }), renderCardsLayout(orientation, cards, context)] }));
+    });
+    function renderCardsLayout(orientation, cards, context) {
+        return orientation === 'horizontal' ? (jsx(SwipeListControl, { context: context, children: cards?.map(renderCard) })) : (jsx("div", { className: "grid gap-[14px]", children: cards?.map(renderCard) }));
+    }
+    function renderCard(card, key) {
+        return (jsxs("div", { className: `h-full justify-between box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
+      ${VersionStyleMap[card.version ?? 'primary']}`, children: [jsxs("div", { children: [card.image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-3.5", image: card.image }) })) : null, card.title ? jsx("h3", { className: `text-m-title-xs font-medium m-0`, children: card.title }) : null, card.description ? renderDescription(card) : null, card.items?.length ? renderItems(card.items, card.isDotted, card.version) : null] }), card?.button?.text ? renderButton(card.button) : null] }, key));
+    }
+    function renderButton(button) {
+        return jsx(Button, { className: "mt-3", ...button });
+    }
+    function renderDescription(card) {
+        return (jsx("div", { className: `text-secondary-text mt-1 text-s ${card.version === 'secondary' ? 'text-white opacity-80' : ''}`, children: card.description }));
+    }
+    const LIST_DOT_STYLE_MAP$1 = {
+        primary: 'bg-primary-text',
+        secondary: 'bg-white',
+        gray: 'bg-secondary-text',
+    };
+    function renderItems(items, isDotted, version = 'primary') {
+        return (jsx("section", { className: "mt-3", children: items.map((item, i) => (jsxs("div", { children: [isDotted ? (jsx("div", { className: `rounded-full inline-block mr-3 mt-2 w-2 h-2 min-w-2 min-h-2 ${LIST_DOT_STYLE_MAP$1[version]}` })) : null, jsx("span", { className: "text-m font-medium", children: item.title }), jsx("span", { className: `text-s pl-2 ${version === 'primary' ? 'text-secondary-text' : ''}`, children: item.text })] }, String(i)))) }));
+    }
+
     const maxBy = (discriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
 
     const isHrefActive = (href, router, cmp = (targetHref, baseHref) => baseHref.startsWith(targetHref)) => {
@@ -1320,6 +1108,70 @@
     });
     const renderSubItem = (item, i) => (jsx(HeaderItem, { className: "mr-8 whitespace-nowrap text-s", ...item }, String(i)));
 
+    const ALIGN_TEXT = {
+        left: 'text-left',
+        center: 'text-center',
+        right: 'text-right',
+    };
+    const HEADLINE_BLOCK_STYLE_MAPS = {
+        transparent: {
+            background: 'bg-transparent',
+            text: 'text-primary-text',
+            description: 'text-primary-text',
+        },
+        primary: {
+            background: 'bg-white',
+            text: 'text-primary-text',
+            description: 'text-primary-text',
+        },
+        secondary: {
+            background: 'bg-primary-main',
+            text: 'text-white',
+            description: 'text-white/80',
+        },
+    };
+
+    const Headline = JSX(({ bgColorHeadline = 'transparent', className = '', title, description, image, align = 'left', }) => {
+        const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
+        return (jsxs("section", { className: `px-4 py-6 flex flex-col gap-2.5 ${STYLE_MAPS.background} ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx("p", { className: `text-m ${STYLE_MAPS.description} ${ALIGN_TEXT[align]}`, children: description })) : null, image?.src && (jsx("div", { className: "mt-2.5 mx-auto flex justify-center", children: jsx(Img, { image: image }) }))] }));
+    });
+
+    const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
+        const { text, fileSize, ...linkProps } = doc;
+        return (jsxs("a", { className: className, role: "link", ...linkProps, children: [icon ? (jsx(Img, { className: iconClassName, image: icon, width: "24px", height: "24px", asSVG: true })) : null, text ? (jsxs("span", { className: textClassName, children: [text, jsx("span", { className: suffixClassName, children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] }));
+    });
+    const formatSuffix = (ext, fileSize) => {
+        const prefix = ext || fileSize ? ',' : '';
+        const extension = ext ? ` ${ext}` : '';
+        const size = fileSize ? ` (${fileSize})` : '';
+        return prefix + extension + size;
+    };
+    const getExtFromHref = (href) => {
+        if (!href) {
+            return '';
+        }
+        const index = href.lastIndexOf('.');
+        return index !== -1 ? href.substring(index + 1) : '';
+    };
+
+    const LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full box-border ${className}`, iconClassName: "mr-3 min-w-6 min-h-6", doc: doc, icon: icon })));
+
+    const LinkDocsHorizontalList = JSX(({ context, hasBorder = true, documents, icon }) => {
+        return (jsx(SwipeListControl, { context: context, className: "text-s text-primary-main mt-5", children: documents?.length
+                ? documents.map((doc, i) => (jsx(LinkDocsListItem, { className: hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : '', doc: doc, icon: icon }, String(i))))
+                : null }));
+    });
+
+    const LinkDocsVerticalList = JSX(({ hasBorder = true, documents, icon }) => {
+        return (jsx("div", { className: `text-s text-primary-main flex flex-col mt-5 ${hasBorder ? 'gap-3.5' : 'gap-2'}`, role: "list", children: documents?.length
+                ? documents.map((doc, i) => (jsx("div", { role: "listitem", children: jsx(LinkDocsListItem, { className: hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : '', doc: doc, icon: icon }) }, String(i))))
+                : null }));
+    });
+
+    const LinkDocs = JSX(({ className = '', context, title, description, icon = { icon: 'DocIconMonoColor' }, documents, orientation = 'vertical', hasBorder = true, }) => {
+        return (jsxs("section", { className: `font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`, children: [jsx(Headline, { className: `!p-0 ${description ? 'gap-2' : 'gap-5'}`, title: title, description: description, context: context, align: "center" }), orientation === 'vertical' ? (jsx(LinkDocsVerticalList, { hasBorder: hasBorder, documents: documents, icon: icon })) : (jsx(LinkDocsHorizontalList, { context: context, hasBorder: hasBorder, documents: documents, icon: icon }))] }));
+    });
+
     const getColSpan = (className) => {
         const colSpanPrefix = 'col-span-';
         const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
@@ -1375,6 +1227,105 @@
     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 ButtonSection = JSX(({ context, className = '', buttons }) => {
+        const { handlerDecorator } = context;
+        const router = context.useRouter();
+        return buttons && buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => (jsx(ButtonSectionItem, { button: button, handlerDecorator: handlerDecorator, router: router }, String(index)))) })) : null;
+    });
+    const ButtonSectionItem = JSX(({ router, handlerDecorator, button }) => {
+        const buttonProps = useLink({ router, handlerDecorator }, button);
+        return jsx(Button, { ...button, ...buttonProps });
+    });
+
+    const LIST_DOT_STYLE_MAP = {
+        primary: 'bg-primary-text',
+        secondary: 'bg-white',
+        gray: 'bg-secondary-text',
+    };
+    const DOT_SIZE_MAP = {
+        L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4 mt-3',
+        M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3 mt-3',
+        S: 'w-1 h-1 min-w-1 min-h-1 mr-2 mt-2.5',
+    };
+    const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary', size = 'M' }) => {
+        return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted ? (jsx("div", { className: `rounded-full inline-block ${LIST_DOT_STYLE_MAP[version]} ${DOT_SIZE_MAP[size]}` })) : null, jsx("span", { children: children })] }));
+    });
+
+    const TEXT_STYLE_MAP = {
+        primary: 'text-primary-text',
+        secondary: 'text-white',
+        gray: 'text-secondary-text',
+    };
+    const TEXT_SIZE_MAP = {
+        S: 'text-l-light',
+        M: 'text-h6',
+        L: 'text-h5',
+    };
+    const ITEM_INDENT_MAP = {
+        S: 'ml-2',
+        M: 'ml-3',
+        L: 'ml-4',
+    };
+    const List = JSX((props) => {
+        const { className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M', version = 'primary', } = props;
+        if (!items?.length) {
+            return null;
+        }
+        return (jsx("section", { className: `${TEXT_STYLE_MAP[version]} ${TEXT_SIZE_MAP[listItemSize]} ${className} ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''}`, role: "list", children: items.map((item, i) => (jsx(ListItem, { className: `${itemClassName} mb-1.5`, isDotted: isDotted, version: version, size: listItemSize, children: item }, String(i)))) }));
+    });
+
+    const BaseTile = JSX(({ className = '', title = '', children, buttons, image }) => {
+        return (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 titleStyleMap = {
+        primary: 'text-primary-text',
+        secondary: 'text-white',
+    };
+    const descStyleMap = {
+        primary: 'text-secondary-text',
+        secondary: 'text-white',
+    };
+    const BenefitItem = JSX((props) => {
+        const { className = '', icon, label, description, version = 'primary', benefitsVersion = 'normal', } = props;
+        const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
+        const listItemAlign = description ? 'items-start' : 'items-center';
+        const iconVersion = getIconVersion(isIconWhite, icon);
+        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: renderBenefitIconBgStyle(version, benefitsVersion), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion }, asSVG: true }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? jsx("div", { className: `text-h6 ${titleStyleMap[version]}`, children: label }) : null, description ? (jsx("div", { className: `text-m-light ${descStyleMap[version]}`, children: description })) : null] })] }));
+    });
+    function renderBenefitIconBgStyle(version, benefitsVersion) {
+        let bgColorStyle = 'bg-primary-main text-black';
+        if (version === 'secondary') {
+            bgColorStyle = 'bg-white/30 text-black';
+        }
+        else if (benefitsVersion === 'normal') {
+            bgColorStyle = 'bg-secondary-light text-primary-main';
+        }
+        return `w-[50px] h-[50px] min-w-[50px] rounded-full p-2.5 box-border flex items-center justify-center ${bgColorStyle}`;
+    }
+    const getIconVersion = (isIconWhite, icon) => icon?.iconVersion || isIconWhite ? 'white' : 'normal';
+
+    const renderBenefit = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => {
+        return (jsx(BenefitItem, { icon: icon, label: label, description: description, version: version, benefitsVersion: benefitsVersion }, String(i)));
+    };
+
+    const ProductBlockInner = JSX(({ className = '', context, title, headlineVersion = 'L', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, label, }) => {
+        return (jsxs("div", { className: `w-full ${className}`, children: [jsxs("div", { children: [label ? renderLabel(label, version) : null, jsx(Headline, { context: context, className: "!p-0 max-w-[600px]", title: title, description: description, bgColorHeadline: version, headlineVersion: headlineVersion }), jsxs(BaseTile, { context: context, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-5 gap-2.5" })) : null, children: [benefits?.filter((_) => _.label)?.length ? (jsx("div", { className: "mt-3", children: benefits.map(renderBenefit(version, benefitsVersion)) })) : null, items?.length ? (jsx(List, { className: "mt-3 text-m", items: items, version: version, 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 labelStyleMap = {
+        primary: 'text-primary-main border-secondary-hover',
+        secondary: 'text-white/80',
+    };
+    const renderLabel = (label, version) => (jsx("div", { className: `px-2.5 py-1.5 mb-5 rounded-md border-2 border-solid w-fit ${labelStyleMap[version]}`, children: label }));
+
+    const ProductBlock = JSX((props /* Get rid of image and benefits */) => {
+        const { className = '', version = 'primary' } = props;
+        return (jsx("section", { className: `font-sans bg-white px-4 py-6 ${VersionStyleMap[version]} ${className}`, children: jsx(ProductBlockInner, { ...props }) }));
+    });
+
     const ProductGalleryBlock = JSX(({ block, context, className = '' }) => {
         const version = block?.version ?? 'primary';
         return (jsx("section", { className: `flex grow-0 shrink-0 basis-full px-4 pt-6 ${VersionStyleMap[version]} ${className}`, role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { context: context, ...block }) }) }));
@@ -1457,8 +1408,8 @@
         return (jsxs("div", { className: "flex gap-2.5 mb-2", children: [title ? jsx(Heading, { headingType: "h3", className: "font-medium", title: title }) : null, icon ? (jsx(Img, { className: "ml-auto max-w-6 max-h-6", image: icon, width: "24px", height: "24px" })) : null] }));
     });
 
-    const TariffsTableTileCell = JSX(({ context, header, data }) => {
-        return (jsxs("div", { className: "rounded-md border-main-stroke h-full box-border border p-4", children: [jsx(TableTileHeader, { ...header }), data?.length ? data.map(renderCellInner(context)) : null] }));
+    const TariffsTableTileCell = JSX(({ context, tile }) => {
+        return (jsxs("div", { className: "rounded-md border-main-stroke h-full box-border border p-4", children: [jsx(TableTileHeader, { ...tile.header }), tile.data?.length ? tile.data.map(renderCellInner(context)) : null] }));
     });
     const renderCellInner = (context) => (cell, i) => (jsxs("div", { children: [i > 0 ? jsx("div", { className: "h-5" }) : null, renderCell(cell, context)] }, String(i)));
     const renderCell = (cell, context) => {
@@ -1473,9 +1424,9 @@
         return jsx(EmbeddableCellInner, { context: context, ...rest });
     };
 
-    const TariffsTableHorizontal = JSX(({ tiles, context }) => (jsx(SwipeListControl, { context: context, children: tiles.map((tile, i) => (jsx(TariffsTableTileCell, { ...tile }, String(i)))) })));
+    const TariffsTableHorizontal = JSX(({ tiles, context }) => (jsx(SwipeListControl, { context: context, children: tiles.map((tile, i) => (jsx(TariffsTableTileCell, { tile: tile, context: context }, String(i)))) })));
 
-    const TariffsTableVertical = JSX(({ tiles }) => (jsx("div", { className: "flex flex-col gap-3.5", children: tiles.map((tile, i) => (jsx(TariffsTableTileCell, { ...tile }, String(i)))) })));
+    const TariffsTableVertical = JSX(({ tiles, context }) => (jsx("div", { className: "flex flex-col gap-3.5", children: tiles.map((tile, i) => (jsx(TariffsTableTileCell, { tile: tile, context: context }, String(i)))) })));
 
     const TariffsTable = JSX(({ className, context, title, description, tariffsColumns: columns, rowHeaders, orientation = 'vertical', }) => {
         const colData = getColData(columns);
@@ -1492,8 +1443,41 @@
         data: colData?.[i] || [{}],
     }));
 
+    const textBlockStyleMaps = {
+        primary: {
+            background: 'bg-white',
+            icon: 'bg-primary-main text-white',
+            title: 'text-primary-text',
+            description: 'text-secondary-text',
+        },
+        secondary: {
+            background: 'bg-primary-main',
+            icon: 'bg-white text-primary-main',
+            title: 'text-white',
+            description: 'text-white',
+        },
+        'secondary-light': {
+            background: 'bg-primary-main/10',
+            icon: 'bg-primary-main text-white',
+            title: 'text-primary-text',
+            description: 'text-secondary-text',
+        },
+    };
+    const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className = '', items, isDotted = true, }) => {
+        const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+        const listBlockVersion = blockVersion === 'secondary' ? 'secondary' : 'gray';
+        return (jsxs("section", { className: `font-sans px-4 py-[18px] flex flex-col ${textBlockStyleMap.background} ${className}`, children: [iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title ? (jsx("div", { className: `text-l font-medium mb-1 ${textBlockStyleMap.title}`, children: title })) : null, description ? (jsx("div", { className: `text-s ${textBlockStyleMap.description}`, children: description })) : null, items?.length ? (jsx(List, { className: "mt-1 text-m", items: items, isDotted: isDotted, version: listBlockVersion })) : null] })] }));
+    });
+    function renderIcon(className) {
+        return (jsx("div", { className: "mb-3", children: jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs-light ${className}`, children: "i" }) }));
+    }
+    function renderImage(image) {
+        return image?.src ? jsx(Img, { className: "pb-3 mr-auto", image: image }) : null;
+    }
+
     const Blocks = {
         Accordion,
+        AccordionItem,
         ComparisonTable,
         Footer,
         Gallery,
@@ -1510,6 +1494,10 @@
         Placeholder,
     };
 
+    function style2className(style) {
+        return style ? style.filter(Boolean).join(' ') : '';
+    }
+
     const api = LikeAPI();
     function useLikeService(pagePath) {
         const [likeCount, setLikeCount] = useState(0);
@@ -1555,24 +1543,25 @@
     const DEFAULT_SLOT_NAME = null;
     const DEFAULT_ANCESTORS = [DEFAULT_SLOT_NAME];
 
+    const defaultChildRenderer = (_) => _;
     function renderBlock(block, options, ancestors = DEFAULT_ANCESTORS) {
         const { key, page, blockDecorator, blocksRegistry, context } = options;
-        const { type } = block;
+        const { type, blocks: childBlocks } = block;
         if (!(type && type in blocksRegistry)) {
             console.warn(`No block with "${type}" is registered`);
         }
         const BlockComponent = type && blocksRegistry[type];
+        const { renderChild = defaultChildRenderer } = BlockComponent || {};
+        const renderChildBlock = (_, j) => renderChild(renderBlock(_, { ...options, key: `${options.key}-${j}` }, [...ancestors, block]), j);
+        const children = childBlocks?.length ? childBlocks.map(renderChildBlock) : null;
         return blockDecorator({
             blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
             block,
             ancestors,
             // Adjusted by decorator block and blockClassName
             render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
-                const { version, content, anchor, labels, blocks: childBlocks } = adjustedBlock;
-                const children = childBlocks
-                    ? childBlocks.map((_, j) => renderBlock(_, { ...options, key: `${options.key}-${j}` }, [...ancestors, block]))
-                    : null;
-                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, version: version, context: context, page: page, anchor: anchor, labels: labels, ...content, children: children }, key)) : null;
+                const { version, anchor, labels, content } = adjustedBlock;
+                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, context: context, page: page, ancestors: ancestors, version: version, anchor: anchor, labels: labels, ...content, children: children }, key)) : null;
             },
         }, key);
     }
@@ -1601,11 +1590,14 @@
         return (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]), []);
     }
 
+    const packageVersion = "0.5.15";
+
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;
     exports.DaDataAPI = DaDataAPI;
     exports.LikeAPI = LikeAPI;
     exports.joinList = joinList;
+    exports.packageVersion = packageVersion;
     exports.projectSettings = projectSettings;
     exports.setup = setup;
     exports.setupHooks = setupHooks;