@redneckz/wildless-cms-uni-blocks 0.6.50 → 0.7.2

package/mobile/bundle/bundle.umd.js

@@ -238,14 +238,15 @@
 
     const DEFAULT_SLOT_NAME = null;
 
-    function style2className(style) {
-        return style ? style.filter(Boolean).join(' ') : '';
-    }
+    const style = (...atoms) => atoms
+        .flatMap((_) => _)
+        .filter(Boolean)
+        .join(' ');
 
     const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
 
     const DEFAULT_ANCESTORS = [];
-    const DEFAULT_STYLE = ['col-span-12'];
+    const defaultStyle = 'col-span-12';
     function renderBlock(block, options) {
         const { key, blockDecorator = defaultBlockDecorator, blocksRegistry = {}, ancestors = DEFAULT_ANCESTORS, className = '', } = options;
         const { type } = block;
@@ -254,7 +255,8 @@
         }
         const BlockComponent = type && blocksRegistry[type];
         return blockDecorator({
-            blockClassName: `scroll-mt-12 ${className} ${style2className(block.style || DEFAULT_STYLE)}`,
+            blockClassName: style('scroll-mt-12', // TODO scroll-mt-12 ? here?
+            className, block.style || defaultStyle),
             block,
             ancestors,
             // Adjusted by decorator block and blockClassName
@@ -387,7 +389,14 @@
         return ref;
     }
 
-    const BlockWrapper = JSX(({ className, block, tag = 'section', role, children }) => {
+    const blockStyles = {
+        primary: 'bg-white text-primary-text',
+        secondary: 'bg-primary-main text-white',
+        gray: 'bg-main-divider text-primary-text',
+        transparent: 'bg-transparent text-primary-text',
+        '': '',
+    };
+    const BlockWrapper = JSX(({ className = '', version = 'primary', block, tag = 'section', role, children }) => {
         const Tag = tag;
         const ref = useBlockIntersectionObserver(block);
         const [isVisible, setVisible] = useState(true);
@@ -400,7 +409,7 @@
                 setVisible(true);
             }
         }), [block]);
-        return isVisible ? (jsx(Tag, { className: className, role: role, ...(block?.anchor ? { id: block.anchor, ref } : {}), children: children })) : null;
+        return isVisible ? (jsx(Tag, { className: style('group', blockStyles[version], className), ...(version ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children })) : null;
     });
 
     const HeadingClass = {
@@ -417,11 +426,11 @@
         return (jsx(Tag, { className: `font-sans font-medium m-0 ${HeadingClass[headingType]} ${className || ''}`, children: title }));
     });
 
-    const Paragraph = JSX(({ size, color, align, font, children }) => (jsx("p", { className: ['font-sans', size, color, align, font].filter(Boolean).join(' '), children: children })));
+    const Paragraph = JSX(({ children, ...style }) => (jsx("p", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
 
     const AccordionItemsList = JSX(({ children }) => (jsx("ul", { className: "list-none m-0 p-0", children: children })));
 
-    const Accordion = JSX(({ title, description, className = '', ...rest }) => (jsxs(BlockWrapper, { className: `py-6 px-4 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", children: jsx(Paragraph, { size: "text-m", font: "font-light", align: "text-center", children: description }) })) : null, jsx(AccordionItemsList, { children: renderChildren(rest) })] })));
+    const Accordion = JSX(({ title, description, className = '', ...rest }) => (jsxs(BlockWrapper, { className: `py-6 px-4 ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-2 text-center", title: title }) : null, description ? (jsx("div", { className: "mb-5", children: jsx(Paragraph, { size: "text-m", font: "font-light", align: "text-center", children: description }) })) : null, jsx(AccordionItemsList, { children: renderChildren(rest) })] })));
     Accordion.childrenTypes = ['AccordionItem'];
 
     function getParentBlockDef(options) {
@@ -433,14 +442,14 @@
         return content || defaultContent;
     }
 
-    const Foldable = JSX(({ isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
+    const Foldable = JSX(({ className = '', 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] }));
+        return isFoldButtonOnTop ? (jsxs("div", { className: className, children: [buttonNode, sectionNode] })) : (jsxs("div", { className: className, children: [sectionNode, buttonNode] }));
     });
 
     const FoldableSection = JSX(({ className = '', isUnfolded, children }) => {
@@ -464,17 +473,11 @@
     const Icon = JSX(({ className = '', imageClassName = '', name = '', alt = `Иконка ${name}`, title = alt, iconVersion = 'color', asSVG, ...imgProps }) => {
         const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
         if (asSVG && iconVersion !== 'normal') {
-            return (jsx(Background, { className: className, children: jsxs("svg", { className: [
-                        getSvgSize(className, imgProps.width),
-                        svgUseStyleMap[iconVersion],
-                        imageClassName,
-                        getInvertStyle(iconVersion),
-                    ].join(' '), ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }) }));
+            return (jsx(Background, { className: className, children: jsxs("svg", { className: style(getSvgSize(imgProps.width), svgUseStyleMap[iconVersion], iconVersion === 'white' ? 'invert' : '', imageClassName), ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }) }));
         }
         return (jsx("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
     });
-    const getInvertStyle = (iconVersion) => iconVersion === 'white' ? 'invert' : '';
-    const getSvgSize = (className, width) => width ? `width: ${width}px ` : 'w-full h-full';
+    const getSvgSize = (width) => (width ? '' : 'w-full h-full');
     const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
 
     const sourcesComparator = (a, b) => {
@@ -523,7 +526,7 @@
 
     const Img = JSX((props) => jsx(ImgInner, { ...props, isMobile: true }));
 
-    const Text = JSX(({ size, color, align, font, children }) => (jsx("span", { className: ['font-sans', size, color, align, font].filter(Boolean).join(' '), children: children })));
+    const Text = JSX(({ children, ...style }) => (jsx("span", { className: ['font-sans', ...Object.values(style)].join(' '), children: children })));
 
     const getIconWithVersion = (icon, version = 'primary') => ({
         ...icon,
@@ -556,7 +559,7 @@
     });
 
     const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]', 'min-w-[25%]'];
-    const SwipeListContainer = JSX(({ className = '', containerRef, activeIndex, visibleItemCount = 0, gap = 0, padding = 0, snapAlign = 'snap-center', children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
+    const SwipeListContainer = JSX(({ className = '', containerRef, activeIndex, visibleItemCount = 0, gap = 0, padding = 0, listType = 'horizontal-list', snapAlign = 'snap-center', children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
         const observerOptions = {
             sensitivity: 1,
             rootRef: containerRef,
@@ -570,10 +573,12 @@
             onVisibleIndicesChange && onVisibleIndicesChange(getVisibleIndices(itemsVisibilityList));
         }, [onVisibleItemsChange, onVisibleIndicesChange]);
         const additionPadding = visibleItemCount > 0 ? gap * Number(visibleItemCount) - 1 : 0;
-        return (jsx("div", { className: `box-border overflow-auto flex horizontal-list no-scrollbar ${className}`, style: {
-                ...getContainerStyle(padding, additionPadding),
-                gap: `${gap}px`,
-            }, role: "list", ref: containerRef, children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: `${snapAlign} ${visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''}`, style: getContainerStyle(padding / 4), activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
+        const isHorizontalList = listType === 'horizontal-list';
+        const containerStyle = {
+            ...(isHorizontalList ? getContainerStyle(padding, additionPadding) : {}),
+            gap: `${gap}px`,
+        };
+        return (jsx("div", { className: style('box-border overflow-auto no-scrollbar', listType, className), style: containerStyle, role: "list", ref: containerRef, children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: style(snapAlign, visibleItemCount ? childStyleMap[visibleItemCount - 1] : '', listType === 'vertical-list' ? 'h-full' : ''), style: isHorizontalList ? getContainerStyle(padding / 4) : {}, activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
     });
     // Styles used to compensate outer container padding to get rid of clipping effect
     const getContainerStyle = (padding, additionalPadding = 0) => ({
@@ -587,8 +592,17 @@
         .filter(([_]) => _ && _.intersectionRatio >= 0.9)
         .map(([, i]) => i);
 
-    const dotStyle = 'cursor-pointer bg-primary-main h-2 rounded-full transition-width duration-300';
-    const SwipeListControlDots = JSX(({ containerRef, activeIndex, dotCount = 0 }) => {
+    const containerStyles = {
+        'horizontal-list': 'mx-auto mt-5 w-fit',
+        'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
+    };
+    const activeDotStyles = {
+        'horizontal-list': 'w-6',
+        'vertical-list': 'h-6',
+    };
+    const dotStyle = 'cursor-pointer bg-primary-main rounded-full transition-width duration-300';
+    const inactiveDotStyle = 'w-2 h-2 opacity-30';
+    const SwipeListControlDots = JSX(({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list' }) => {
         const handleClick = (idx) => {
             if (idx !== activeIndex && containerRef?.current) {
                 containerRef.current.children[idx]?.scrollIntoView({
@@ -597,7 +611,7 @@
                 });
             }
         };
-        return dotCount ? (jsx("div", { className: "flex gap-2 mx-auto mt-5 w-fit", children: new Array(dotCount).fill(null).map((_, idx) => (jsx("div", { className: `${dotStyle} ${idx === activeIndex ? 'w-6' : 'w-2 opacity-30'}`, role: "button", "aria-hidden": true, onClick: () => handleClick(idx) }, String(idx)))) })) : null;
+        return dotCount ? (jsx("div", { className: `flex gap-2 ${containerStyles[listType]}`, children: new Array(dotCount).fill(null).map((_, idx) => (jsx("div", { className: `${dotStyle} ${idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle}`, role: "button", "aria-hidden": true, onClick: () => handleClick(idx) }, String(idx)))) })) : null;
     });
 
     const areArraysEqual = (as, bs) => as === bs || Boolean(as && bs && as?.length === bs?.length && as.every((_, i) => _ === bs[i]));
@@ -674,14 +688,14 @@
       and get rid of a clipping effect caused by overflow: hidden.
      */
     const DEFAULT_PADDING = 16;
-    const SwipeListControl = JSX(({ className, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, children, onVisibleIndicesChange, }) => {
+    const SwipeListControl = JSX(({ className = '', gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, children, onVisibleIndicesChange, listType = 'horizontal-list', }) => {
         const itemCount = Array.isArray(children) ? children.length : 0;
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount,
             onVisibleIndicesChange,
         });
         const [activeIndex] = scroll.visibleIndicesRange;
-        return (jsxs("div", { className: className, children: [jsx(SwipeListContainer, { containerRef: containerRef, activeIndex: activeIndex, visibleItemCount: 1, gap: gap, padding: padding, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: children }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: activeIndex, dotCount: itemCount })) : null] }));
+        return (jsxs("div", { className: style(className, listType === 'vertical-list' ? 'relative h-full' : ''), children: [jsx(SwipeListContainer, { containerRef: containerRef, activeIndex: activeIndex, visibleItemCount: 1, gap: gap, padding: padding, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, listType: listType, children: children }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: activeIndex, dotCount: itemCount, listType: listType })) : null] }));
     });
 
     function useBlockRouter() {
@@ -794,6 +808,8 @@
         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 active:text-primary-main',
         link: '',
+        transparent: '',
+        '': '',
     };
     const DisabledStyle = 'bg-main-divider text-main-disabled';
     const buttonDisabledStyleMap = {
@@ -801,13 +817,17 @@
         secondary: DisabledStyle,
         white: DisabledStyle,
         link: '',
+        transparent: '',
+        '': '',
     };
     const buttonStyle = 'text-center font-sans select-none';
     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',
+        primary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
+        secondary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
+        white: 'group-hover/btn:brightness-0 group-hover/btn:invert',
         link: '',
+        transparent: '',
+        '': '',
     };
 
     const ButtonInner = JSX((props) => {
@@ -821,7 +841,7 @@
         }
         const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-4'}`;
         return [
-            'group flex items-center justify-center',
+            'group/btn flex items-center justify-center',
             isWithText(props) ? withTextStyle : 'h-12 w-12',
             rounded ? 'rounded-full' : '',
         ].join(' ');
@@ -997,7 +1017,7 @@
 
     const SearchBar = JSX((props) => (jsx(SearchBarInner, { ...props, isMobile: true })));
 
-    const LinkList = JSX(({ className = '', documents, ...rest }) => (jsx(BlockWrapper, { className: `font-sans bg-white 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 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;
@@ -1087,27 +1107,25 @@
             icon: { icon: 'PlayMarketIcon' },
             label: 'Google Play',
         },
+        {
+            origins: ['youtube.com'],
+            icon: { icon: 'YoutubeIcon' },
+            label: 'Youtube',
+        },
     ];
-    const BUTTON_SIZE = {
-        default: ' w-14 h-14',
-        small: ' w-12 h-12',
+    const buttonSizeStyles = {
+        default: 'w-14 h-14',
+        small: 'w-12 h-12',
     };
-    const MediaButton = JSX(({ version = 'primary', isRounded = false, buttonSize = 'default', ...rest }) => {
+    const MediaButton = JSX(({ isRounded = false, buttonSize = 'default', iconVersion = 'color', ...rest }) => {
         const link = useLink();
         const { href, onClick } = link(rest);
         const { icon, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
-        if (!icon) {
-            return null;
-        }
-        const classes = version === 'secondary'
-            ? 'bg-white hover:bg-secondary-hover'
-            : 'border-solid border border-main-divider hover:border-transparent hover:bg-primary-main';
-        const isPrimary = version === 'primary' ? 'hover:text-black' : '';
-        const rounded = isRounded ? 'rounded-full' : 'rounded-md';
-        return (jsx("a", { className: `flex items-center justify-center group box-border ${classes} ${rounded} ${isPrimary} ${BUTTON_SIZE[buttonSize]}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", onClick: onClick, children: icon ? (jsx(Img, { image: getIconWithVersion(icon), imageClassName: "group-hover:text-white", width: "24", height: "24", asSVG: true })) : null }));
+        const iconWithVersion = icon ? { ...getIconWithVersion(icon), iconVersion } : null;
+        return icon ? (jsx("a", { className: style('group/media flex items-center justify-center box-border', buttonSizeStyles[buttonSize], isRounded ? 'rounded-full' : 'rounded-md', 'border-solid border border-main-divider hover:border-transparent', 'hover:bg-primary-main hover:text-black', 'group-data-secondary:bg-white group-data-secondary:hover:bg-secondary-hover'), href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", onClick: onClick, children: iconWithVersion ? (jsx(Img, { image: iconWithVersion, imageClassName: "group-hover/media:text-white", width: "24", height: "24", asSVG: true })) : null })) : null;
     });
 
-    const SocialMedia = JSX(({ className = '', media, version }) => (jsx("div", { className: `flex gap-2 items-start justify-start pt-6 pb-6 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { version: version, ..._ }, String(index)))) })));
+    const SocialMedia = JSX(({ className = '', media }) => (jsx("div", { className: `flex gap-2 items-start justify-start pt-6 pb-6 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { ..._ }, String(index)))) })));
 
     const TextInformationLink = JSX(({ className = '', index, ...rest }) => {
         const link = useLink();
@@ -1130,21 +1148,13 @@
         return (jsxs(Button, { version: "link", href: href, className: "flex text-s mb-4 w-6", children: [icon ? (jsx(Img, { className: "pr-1", image: getIconWithVersion(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(({ 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)] }));
-    });
+    const Gallery = JSX(({ className = '', title, description, cards = [], orientation = 'horizontal', ...rest }) => (jsxs(BlockWrapper, { className: `relative px-4 py-6 overflow-hidden ${className}`, ...rest, children: [jsxs("div", { className: "flex flex-col items-center mb-5", children: [title ? (jsx(Heading, { headingType: "h3", className: `text-center ${description ? 'mb-2' : 'mb-5'}`, title: title })) : null, description ? (jsx("div", { className: "text-m max-w-[600px] text-center mb-5", children: description })) : null] }), renderCardsLayout(orientation, cards)] })));
     function renderCardsLayout(orientation, cards) {
         return orientation === 'horizontal' ? (jsx(SwipeListControl, { children: cards?.map(renderCard) })) : (jsx("div", { className: "grid gap-3.5", children: cards?.map(renderCard) }));
     }
     function renderCard(card, key) {
         return (jsxs("div", { className: `w-full h-full flex flex-col justify-between shrink-0 box-border snap-start snap-always border-solid border rounded-md border-gray p-4
-      ${VersionStyleMap[card.version ?? 'primary']}`, children: [jsxs("div", { children: [renderImage$2(card.icon), 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$1(card.button) : null] }, key));
+      ${blockStyles[card.version ?? 'primary']}`, children: [jsxs("div", { children: [renderImage$2(card.icon), 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$1(card.button) : null] }, key));
     }
     const renderImage$2 = (image) => image?.src || image?.icon ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-3.5", image: image }) })) : null;
     function renderButton$1(button) {
@@ -1153,13 +1163,15 @@
     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 = {
+    const LIST_DOT_STYLE_MAP = {
         primary: 'bg-primary-text',
         secondary: 'bg-white',
-        gray: 'bg-secondary-text',
+        gray: 'bg-primary-text',
+        transparent: '',
+        '': '',
     };
     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)))) }));
+        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)))) }));
     }
 
     const normalizeURLPath = (href) => {
@@ -1187,24 +1199,13 @@
         checkIsHrefSameOrigin(topItem.href, router) ||
         Boolean(projectSettings.BASE_PATH?.startsWith(topItem.href || '/'));
 
-    const TEXT_CLASSES = 'font-sans text-s';
-    const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-0.5';
-    const HeaderItem = JSX(({ className = '', text, href, target, active, onClick, children, bgColor = 'bg-white' }) => {
-        return (jsxs("a", { className: `relative inline-block bg-transparent text-center no-underline ${className}`, href: href, target: target, onClick: onClick, children: [jsx("span", { className: getTextClasses(bgColor, active), children: text || children }), active ? jsx("div", { className: getBorderClasses(bgColor, active) }) : null] }));
+    const HeaderItem = JSX(({ className = '', active, dataItemName, children, ...rest }) => {
+        const link = useLink();
+        const { href, target, text, onClick } = link(rest);
+        return (jsxs("a", { className: `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: getBorderStyle(active) }) : null] }));
     });
-    const getTextClasses = (bgColor, active = false) => {
-        let classes = 'text-white';
-        if (bgColor === 'bg-white') {
-            classes = active ? 'text-primary-main' : 'text-secondary-text hover:text-primary-main';
-        }
-        return `${classes} ${TEXT_CLASSES}`;
-    };
-    const getBorderClasses = (bgColor, active = false) => {
-        if (!active) {
-            return BORDER_CLASSES;
-        }
-        return `${bgColor === 'bg-white' ? 'bg-primary-main' : bgColor} ${BORDER_CLASSES}`;
-    };
+    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 getBorderStyle = (active = false) => style('absolute left-0 -bottom-3 w-full h-0.5', active ? 'bg-primary-main group-data-transparent:bg-transparent' : '');
 
     const STORAGE_DEFAULT_TTL = 86400000; // 24 * 60 * 60 * 1000
     function useCachedAsyncData(key, fetcher, storage = globalThis?.localStorage) {
@@ -1261,9 +1262,13 @@
         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", asSVG: true })) : 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", asSVG: true }) }), jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo })] }), jsx("button", { className: `${bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'} text-s border-0 bg-transparent cursor-pointer`, children: "\u0412\u043E\u0439\u0442\u0438" })] })));
+    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", asSVG: true }) }), 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" })] })));
 
-    const Header = JSX(({ className = '', bgColor = 'bg-white', ...rest }) => {
+    const BG_COLOR_TO_BLOCK_VERSION = {
+        'bg-white': 'primary',
+        transparent: 'transparent',
+    };
+    const Header = JSX(({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
         const router = useRouter();
         const fallback = rest.options?.page?.fallback;
         const { topItems, dispositions, defaultLocation, logo } = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
@@ -1272,28 +1277,45 @@
         const activeSubItem = findActiveSubItem(router)(subItems);
         const [burgerMenuShow, setBurgerMenuShow] = useState(false);
         const handleBurgerMenuShow = useCallback(() => setBurgerMenuShow((_) => !_), []);
-        return (jsxs("header", { className: `${bgColor} ${className}`, 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, bgColor: bgColor, ..._ }, String(i)))) }) })] }), burgerMenuShow ? (jsx(HeaderBurger, { onClick: handleBurgerMenuShow, burgerSubMenu: dispositions, defaultLocation: defaultLocation, children: jsx(AccordionItemsList, { children: topItems?.map((item, i) => (jsx(AccordionItem, { 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(AccordionItemsList, { children: topItems?.map((item, i) => (jsx(AccordionItem, { label: item.text, children: jsx(LinkList, { documents: item.items }) }, String(i)))) }) })) : null] }));
     });
 
-    const headlineStyles = {
-        transparent: {
-            wrapper: 'bg-transparent',
-            titleColor: 'text-primary-text',
+    const headlineVersionStyles = {
+        XXL: {
+            wrapper: 'gap-[18px]',
+            title: { headingType: 'h0', as: 'h1' },
+            descriptionSize: 'text-h5',
         },
-        primary: {
-            wrapper: 'bg-white',
-            titleColor: 'text-primary-text',
+        XL: {
+            wrapper: 'gap-4',
+            title: { headingType: 'h1', as: 'h1' },
+            descriptionSize: 'text-xl-light',
         },
-        secondary: {
-            wrapper: 'bg-primary-main',
-            titleColor: 'text-white',
-            descriptionColor: 'text-white/80',
+        L: {
+            wrapper: 'gap-4',
+            title: { headingType: 'h2', as: 'h2' },
+            descriptionSize: 'text-xl-light',
+        },
+        M: {
+            wrapper: 'gap-3',
+            title: { headingType: 'h3', as: 'h3' },
+            descriptionSize: 'text-xl-light',
+        },
+        S: {
+            wrapper: 'gap-2',
+            title: { headingType: 'h4', as: 'h4' },
+            descriptionSize: 'text-xl-light',
+        },
+        XS: {
+            wrapper: 'gap-2',
+            title: { headingType: 'h5', as: 'h5' },
+            descriptionSize: 'text-l-light',
         },
     };
 
-    const Headline = JSX(({ className = '', title, description, image, bgColorHeadline = 'transparent', align = 'text-left', }) => {
-        const style = headlineStyles[bgColorHeadline];
-        return (jsxs("section", { className: `px-4 py-6 flex flex-col gap-2.5 ${style.wrapper} ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `${style.titleColor} ${align}`, title: title })) : null, description ? (jsx(Paragraph, { color: style.descriptionColor || style.titleColor, size: "text-m", align: align, children: description })) : null, image?.src && (jsx("div", { className: "mt-2.5 mx-auto flex justify-center", children: jsx(Img, { image: image }) }))] }));
+    const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, version = '', ...rest }) => {
+        const versionStyle = headlineVersionStyles[headlineVersion];
+        return (jsxs(BlockWrapper, { className: style('flex flex-col p-12', versionStyle.wrapper, className), version: version, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { color: "group-data-secondary:text-white/80", size: versionStyle.descriptionSize, align: align, children: description })) : null] }));
     });
 
     const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
@@ -1326,11 +1348,11 @@
                 : null }));
     });
 
-    const LinkDocs = JSX(({ className = '', title, description, icon = { icon: 'DocIconMonoColor' }, documents, orientation = 'vertical', hasBorder = true, ...rest }) => (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, ...rest }), orientation === 'vertical' ? (jsx(LinkDocsVerticalList, { hasBorder: hasBorder, documents: documents, icon: icon })) : (jsx(LinkDocsHorizontalList, { hasBorder: hasBorder, documents: documents, icon: icon }))] })));
+    const LinkDocs = JSX(({ className = '', title, description, icon = { icon: 'DocIconMonoColor' }, documents, orientation = 'vertical', hasBorder = true, align, ...rest }) => (jsxs(BlockWrapper, { className: style('py-6 px-4 overflow-x-hidden', className), ...rest, children: [jsx(Headline, { className: `!p-0 ${description ? 'gap-2' : 'gap-5'}`, title: title, description: description, align: align, headlineVersion: "M", as: "h2" }), orientation === 'vertical' ? (jsx(LinkDocsVerticalList, { hasBorder: hasBorder, documents: documents, icon: icon })) : (jsx(LinkDocsHorizontalList, { hasBorder: hasBorder, documents: documents, icon: icon }))] })));
 
     const getColSpan = (className) => {
         const colSpanPrefix = 'col-span-';
-        const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
+        const colSpanStr = className?.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
         return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
     };
 
@@ -1375,7 +1397,7 @@
 
     const GOLDEN_RATIO = 1.618;
     const Placeholder = JSX(({ className, title, description = 'Блок в разработке...', ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: [jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: getTileHeadingType(className), ...rest }), jsx("figure", { className: "m-0 min-w-[80%]", children: renderShimmer() })] }));
+        return (jsxs(BlockWrapper, { className: style('p-9 box-border', className, getTileRightPadding(className), getTileMinHeight(className)), ...rest, children: [jsx(Headline, { className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: getTileHeadingType(className) }), jsx("figure", { className: "m-0 min-w-[80%]", children: renderShimmer() })] }));
     });
     const renderShimmer = (size = 3) => goldenSequence(100, size)
         .map((_) => Math.floor(_))
@@ -1383,41 +1405,22 @@
     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(({ className = '', buttons }) => buttons && buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => renderButton({ button, index })) })) : null);
-    function renderButton({ button, buttonClassName, index }) {
-        const { icon, iconRight, version, text, ...rest } = button;
+    const renderButtonsSection = (buttons, { className = '', buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
+    const renderButton = (buttonClassName = '') => (button, index) => {
+        const { text, icon, iconRight, version, ...rest } = button || {};
         const iconVersion = version === 'secondary' ? 'color' : 'white';
-        const leftIcon = renderButtonIcon({ ...icon, iconVersion: iconVersion });
-        const rightIcon = renderButtonIcon({ ...iconRight, iconVersion: iconVersion });
-        return text ? (jsx(Button, { className: buttonClassName, appendLeft: leftIcon, appendRight: rightIcon, version: version, text: text, ...rest }, index ? String(index) : '')) : null;
-    }
-    const renderButtonIcon = (icon) => {
-        if (!icon?.icon && !icon?.src) {
-            return null;
-        }
-        const iconWidth = icon?.size?.width ? `${icon.size.width}` : '24';
-        return jsx(Img, { image: icon, width: iconWidth, height: "24", asSVG: true });
+        return text ? (jsx(Button, { className: buttonClassName, appendLeft: renderButtonIcon({ ...icon, iconVersion }), appendRight: renderButtonIcon({ ...iconRight, iconVersion }), version: version, text: text, ...rest }, index ? String(index) : '')) : null;
     };
+    const DEFAULT_ICON_W = 24;
+    const renderButtonIcon = (icon) => icon?.icon || icon?.src ? (jsx(Img, { image: icon, width: String(icon?.size?.width || DEFAULT_ICON_W), height: String(DEFAULT_ICON_W), asSVG: true })) : null;
 
-    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',
         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',
     };
-    const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary', size = 'M' }) => {
-        return (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 ${LIST_DOT_STYLE_MAP[version]} ${DOT_SIZE_MAP[size]}` }) })) : null, jsx("span", { children: children })] }));
-    });
+    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 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',
@@ -1428,29 +1431,15 @@
         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 List = JSX(({ className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: `text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text ${TEXT_SIZE_MAP[listItemSize]} ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''} ${className}`, role: "list", children: items.map((item, i) => (jsx(ListItem, { className: `${itemClassName} mb-1.5`, isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
 
     const 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 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 listItemAlign = description ? 'items-start' : 'items-center';
         const calcVersion = benefitsVersion === 'white' ? 'secondary' : 'primary';
-        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: getIconWithVersion(icon, calcVersion), 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] })] }));
+        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: getIconWithVersion(icon, calcVersion), asSVG: true }) })) : 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] })] }));
     });
     function getBenefitIconBgStyle(version, benefitsVersion) {
         let bgColorStyle = 'bg-primary-main text-black';
@@ -1465,29 +1454,21 @@
 
     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, version = 'primary', isDotted = true, label, ...rest }) => {
-        return (jsxs("div", { className: `w-full ${className}`, children: [jsxs("div", { children: [label ? renderLabel(label, version) : null, jsx(Headline, { className: "!p-0 max-w-[600px]", bgColorHeadline: version, headlineVersion: headlineVersion, ...rest }), jsxs(BaseTile, { buttons: buttons?.length ? (jsx(ButtonSection, { 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)] }));
-    });
+    const ProductBlockInner = JSX(({ className = '', headlineVersion = 'L', benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, label, title, description, ...rest }) => (jsxs(BlockWrapper, { className: `w-full ${className}`, version: version, ...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(version, 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 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 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 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 { className = '', ...rest } = props;
+        return (jsx(BlockWrapper, { className: `px-4 py-6 ${className}`, ...rest, children: jsx(ProductBlockInner, { ...props }) }));
     });
 
     const checkIsIconRenderable = (icon) => Boolean(icon?.icon || icon?.src);
 
     const STEPS_BLOCK_STYLE_MAPS = {
         primary: {
-            background: 'bg-white',
-            title: 'text-primary-text',
             description: '!text-secondary-text text-l-light',
             iconText: 'text-secondary-text',
             iconBackground: 'bg-main-divider',
@@ -1495,8 +1476,29 @@
             dot: 'bg-secondary-text',
         },
         secondary: {
-            background: 'bg-primary-main',
-            title: 'text-white',
+            description: '!text-white/80 text-l-light',
+            iconText: 'text-white',
+            iconBackground: 'bg-white/30',
+            iconConnector: 'bg-white',
+            dot: 'bg-white/80',
+        },
+        gray: {
+            // TODO Replace this Map with group-data-*
+            description: '!text-white/80 text-l-light',
+            iconText: 'text-white',
+            iconBackground: 'bg-white/30',
+            iconConnector: 'bg-white',
+            dot: 'bg-white/80',
+        },
+        transparent: {
+            description: '!text-white/80 text-l-light',
+            iconText: 'text-white',
+            iconBackground: 'bg-white/30',
+            iconConnector: 'bg-white',
+            dot: 'bg-white/80',
+        },
+        '': {
+            // TODO Replace this Map with group-data-*
             description: '!text-white/80 text-l-light',
             iconText: 'text-white',
             iconBackground: 'bg-white/30',
@@ -1513,10 +1515,9 @@
         normal: 'min-h-[70px]',
         small: 'min-h-12',
     };
-    const StepsBlock = JSX(({ className, title, description, showLines = true, steps, size = 'normal', version = 'primary', }) => {
+    const StepsBlock = JSX(({ className = '', title, description, showLines = true, steps, size = 'normal', version = 'primary', ...rest }) => {
         const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
-        return (jsxs("section", { className: `box-border font-sans bg-white px-4 py-6 flex flex-col
-        ${styleMap.background} ${styleMap.title} ${className || ''}`, children: [title ? (jsx(Heading, { headingType: "h3", className: `text-center ${styleMap.title}`, title: title })) : null, description ? (jsx("p", { className: `text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`, children: description })) : null, steps?.length ? (jsx("div", { className: `box-border py-0.5 mb-0.5 mt-5`, children: jsx("div", { className: "flex flex-col justify-between gap-x-[101px]", children: steps.map(renderStepTitle(size, version, showLines)) }) })) : null] }));
+        return (jsxs(BlockWrapper, { className: `box-border px-4 py-6 flex flex-col ${className}`, version: version, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "text-center", title: title }) : null, description ? (jsx("p", { className: `text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`, children: description })) : null, steps?.length ? (jsx("div", { className: `box-border py-0.5 mb-0.5 mt-5`, children: jsx("div", { className: "flex flex-col justify-between gap-x-[101px]", children: steps.map(renderStepTitle(size, version, showLines)) }) })) : null] }));
     });
     const renderStepTitle = (size, version, showLines) => (step, i, steps) => {
         const isLastStep = steps.length - 1 === i;
@@ -1529,20 +1530,19 @@
         const iconAreaSize = STEPS_SIZE_MAP[size];
         const iconSize = size === 'normal' ? '38' : '27';
         const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
-        return (jsx("div", { className: `${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`, children: jsx("span", { className: `font-medium flex self-center ${styleMap.title} ${iconTextSize}`, children: checkIsIconRenderable(step?.icon) ? (jsx(Img, { image: getIconWithVersion({ ...step.icon }, version), width: iconSize, height: iconSize, asSVG: true })) : (jsx("span", { children: i + 1 })) }) }));
+        return (jsx("div", { className: `${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`, children: jsx("span", { className: `font-medium flex self-center ${iconTextSize}`, children: checkIsIconRenderable(step?.icon) ? (jsx(Img, { image: getIconWithVersion({ ...step.icon }, version), width: iconSize, height: iconSize, asSVG: true })) : (jsx("span", { children: i + 1 })) }) }));
     };
 
-    const renderButtonsCellData = ({ buttons }) => buttons && buttons?.length ? (jsx("div", { children: buttons.map(({ rounded, icon, ...buttonProps }, idx) => renderButton({
-            button: { rounded, icon, ...buttonProps },
-            buttonClassName: `mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`,
-            index: idx,
-        })) })) : null;
+    const renderButtonsCellData = ({ buttons }) => renderButtonsSection(buttons, {
+        className: 'mt-3',
+        buttonClassName: 'w-12 h-12',
+    });
     const renderLabelDescriptionCellData = ({ label, description }) => {
         const labelClassName = `text-xl font-medium m-0 ${description ? 'mb-1' : ''}`;
         return (jsxs("div", { children: [label ? jsx("div", { className: labelClassName, children: label }) : null, description ? jsx("div", { className: "text-s text-secondary-text", children: description }) : null] }));
     };
     const renderImgCellData = ({ image }) => image?.src ? jsx(Img, { image: { ...image, className: 'm-0' } }) : null;
-    const renderListCellData = ({ isDotted, ...rest }) => (jsx(List, { className: "flex flex-col justify-between items-start text-m", version: "gray", isDotted: isDotted ?? true, ...rest }));
+    const renderListCellData = ({ isDotted, ...rest }) => (jsx(List, { className: "flex flex-col justify-between items-start text-m", isDotted: isDotted ?? true, ...rest }));
     const EmbeddableCellData = {
         Buttons: renderButtonsCellData,
         Img: renderImgCellData,
@@ -1601,8 +1601,7 @@
     };
     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] })] }));
+        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 })) : 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" }) }));
@@ -1738,7 +1737,7 @@
             parent: data,
         };
         useBlockRouterProvider();
-        return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [slots?.header ? (jsx("div", { className: "mb-5 shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, {
+        return (jsxs("section", { className: style('relative', pageStyle, className), "data-theme": colorPalette, children: [slots?.header ? (jsx("div", { className: "mb-5 shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, {
                         ...options,
                         slotName: 'header',
                     }) })) : null, jsxs("div", { className: "container grid grid-cols-12 gap-1", children: [renderBlocksList(blocks, options), slots?.footer
@@ -1758,7 +1757,7 @@
         return (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]), []);
     }
 
-    const packageVersion = "0.6.50";
+    const packageVersion = "0.7.2";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;