@redneckz/wildless-cms-uni-blocks 0.11.3 → 0.12.3

package/mobile/bundle/bundle.umd.js

@@ -316,16 +316,16 @@
         transparent: 'bg-transparent text-primary-text',
         '': '',
     };
-    const BlockWrapper = JSX(({ className, version = 'primary', isTheme = true, block, tag = 'section', role, children }) => {
+    const BlockWrapper = JSX(({ className, version = 'primary', isTheme = true, defaultPadding = 'p-m', padding, block, tag = 'section', role, children, }) => {
         const Tag = tag;
         const ref = useBlockIntersectionObserver(block);
         const [isHidden, setHidden] = useState(false);
         useEffect(() => defaultEventBus.subscribe('tab', (event) => {
             setHidden(Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)));
         }), [block]);
-        return (jsx(Tag, { className: style(groupStyle(Boolean(version && isTheme)), blockStyles[version], isHidden ? 'hidden' : '', className), ...(version && isTheme ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
+        const isGroup = version && isTheme;
+        return (jsx(Tag, { className: style('font-sans', isGroup ? 'group' : '', blockStyles[version], isHidden ? 'hidden' : '', padding || defaultPadding, className), ...(isGroup ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
     });
-    const groupStyle = (isGroup) => (isGroup ? 'group' : '');
 
     function useRouter() {
         return useRouter._impl();
@@ -392,40 +392,31 @@
     const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
 
     const sourcesComparator = (a, b) => a?.media && b?.media ? a.media - b.media : 0;
-    const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', isMobile = false, pathPrefix }) => {
+    const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', pathPrefix }) => {
         const router = useRouter();
-        const pictureStyles = isMobile ? 'flex' : 'flex-none';
-        return (jsxs("picture", { className: `${pictureStyles} ${className}`, children: [image?.sources?.length
+        return (jsxs("picture", { className: className, children: [image?.sources?.length
                     ? image.sources
                         .filter((_) => _?.src)
                         .sort(sourcesComparator)
                         .map(({ src, format, media }, index) => (jsx("source", { srcSet: adjustSrc(router, pathPrefix)(src), type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...image.size }, `${index}_${src}`)))
                     : null, image?.src
-                    ? renderImg({ ...image, src: adjustSrc(router, pathPrefix)(image.src) }, imageClassName, isMobile)
+                    ? renderImg({ ...image, src: adjustSrc(router, pathPrefix)(image.src) }, imageClassName)
                     : null] }));
     });
-    const renderImg = (image, imageClassName = '', isMobile = false) => {
-        const style = {
+    const renderImg = (image, imageClassName = '') => (jsx("img", { src: image.src, className: style('object-contain', imageClassName), alt: image.alt || image.title, title: image.title || '', style: {
             width: image.size?.width ? `${image.size?.width}px` : '100%',
             height: image.size?.height ? `${image.size?.height}px` : 'auto',
-        };
-        const title = image.title || '';
-        const alt = image.alt || image.title;
-        const imgStyle = isMobile ? 'm-auto' : 'm-0';
-        return (jsx("img", { src: image.src, className: `${imgStyle} ${imageClassName}`, alt: alt, title: title, style: style, ...image.size }));
-    };
+        }, ...image.size }));
     const adjustSrc = (router, pathPrefix) => (src) => src && !isURL(src) ? adjustHref(router)(joinPath(pathPrefix, src)) : src;
     const formatToMimeType = (format) => format ? `image/${String(format)}` : undefined;
 
-    const ImgInner = JSX(({ className = '', image, imageClassName = '', isMobile, pathPrefix, ...iconProps }) => {
+    const Img = JSX(({ className = '', image, imageClassName = '', pathPrefix, ...iconProps }) => {
         if (!image?.src && !image?.icon) {
             return null;
         }
-        return image.icon ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: image?.iconVersion, name: image.icon, ...iconProps })) : (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile, pathPrefix: pathPrefix }));
+        return image.icon ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: image?.iconVersion, name: image.icon, ...iconProps })) : (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, pathPrefix: pathPrefix }));
     });
 
-    const Img = JSX((props) => jsx(ImgInner, { ...props, isMobile: true }));
-
     const useDialog = (id = '') => ({
         open: (message) => defaultEventBus.fire('dialog', { type: 'open', id, message }),
         close: () => defaultEventBus.fire('dialog', { type: 'close' }),
@@ -504,7 +495,7 @@
         if (version === 'link') {
             return '';
         }
-        const withTextStyle = `${aboveText ? 'py-2.5 px-7' : 'py-4 px-4'}`;
+        const withTextStyle = `${aboveText ? 'py-2.5 px-9' : 'py-4 px-9'}`;
         return [
             'group/btn items-center justify-center',
             isWithText(props) ? withTextStyle : 'h-12 w-12',
@@ -538,7 +529,7 @@
     const RegularButton = JSX(({ className = '', href, rel, target, ariaLabel, version, rounded, onClick, children }) => (jsx("a", { className: getRegularButtonClasses({ className, version, rounded }), href: href, rel: rel, target: target, "aria-label": ariaLabel, role: href ? 'link' : 'button', onClick: onClick, children: children })));
     const DisabledButton = JSX(({ className, ariaLabel, version, rounded, children }) => (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: -1, className: getDisabledButtonClasses({ className, rounded, version }), children: children })));
 
-    const renderButtonsSection = (buttons, { className = '', buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-2 justify-items-stretch' : 'flex-wrap gap-4', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
+    const renderButtonsSection = (buttons, { className, buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-xs justify-items-stretch' : 'flex-wrap gap-s', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
     const renderButton = (buttonClassName = '') => (button, index) => {
         const { text, icon, iconRight, version, ...rest } = button || {};
         const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
@@ -548,7 +539,7 @@
     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) })) : null;
 
-    const ButtonsBlock = JSX(({ buttons, className, ...rest }) => (jsx(BlockWrapper, { className: style('!bg-transparent', className), ...rest, children: renderButtonsSection(buttons) })));
+    const ButtonsBlock = JSX(({ buttons, className, ...rest }) => (jsx(BlockWrapper, { className: style('!bg-transparent', className), defaultPadding: "p-0", ...rest, children: renderButtonsSection(buttons) })));
 
     const identity = (_) => _;
 
@@ -668,7 +659,7 @@
     };
     const Heading = JSX(({ className = '', headingType = 'h3', as = 'h3', title, children }) => {
         const Tag = headingTag(as);
-        return (jsx(Tag, { className: `font-sans m-0 ${styles[headingType]} ${className}`, children: title || children }));
+        return (jsx(Tag, { className: style('font-sans m-0', styles[headingType], className), children: title || children }));
     });
 
     const DEFAULT_TITLE = 'Укажите сумму перевода';
@@ -686,7 +677,7 @@
             ? getDisabledButtonClasses({ version: button?.version })
             : getRegularButtonClasses({ className: 'text-white', version: button?.version });
         const link = useLink();
-        return (jsxs(BlockWrapper, { className: style('p-default flex flex-col items-center', className), ...rest, children: [title ? (jsx(Heading, { className: "pb-5 xl:pb-9 self-start xl:self-center", headingType: "h2", title: title })) : null, jsxs("form", { className: "w-full xl:max-w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, valid: !isDisabled, placeholder: placeholder, label: label, ...field(AMOUNT_KEY, { parse: Number, format: String }) }), button?.text ? (jsx("button", { type: "submit", className: style('w-full p-4 mt-5 xl:mt-6', buttonStyle), disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
+        return (jsxs(BlockWrapper, { className: style('flex flex-col items-center', className), defaultPadding: "p-default", ...rest, children: [title ? (jsx(Heading, { className: "pb-5 xl:pb-9 self-start xl:self-center", headingType: "h2", title: title })) : null, jsxs("form", { className: "w-full xl:max-w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, valid: !isDisabled, placeholder: placeholder, label: label, ...field(AMOUNT_KEY, { parse: Number, format: String }) }), button?.text ? (jsx("button", { type: "submit", className: style('w-full p-4 mt-5 xl:mt-6', buttonStyle), disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
     });
 
     const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
@@ -933,7 +924,7 @@
         });
         const [dotsActiveIndex] = scroll.visibleIndicesRange;
         const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
-        return (jsx(BlockWrapper, { className: style(getPaddingStyle$1(isPadding), 'group-data-secondary:bg-primary-main group-data-secondary:text-white', className), ...rest, children: jsxs("div", { className: style(getAlignStyle(isAlignCenter), 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
+        return (jsx(BlockWrapper, { className: className, defaultPadding: getPaddingStyle$1(isPadding), ...rest, children: jsxs("div", { className: style(getAlignStyle(isAlignCenter), 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: ITEMS_GAP, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
                             ...rest,
                             renderProps: isBankHistoryCarousel
                                 ? (block, options) => renderBlock(block, options, {
@@ -968,9 +959,9 @@
     });
 
     const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], href, target, ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('border border-gray', className), ...rest, children: jsxs(LinkWrapper, { className: "flex", href: href, target: target, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", children: [icon?.icon ? jsx(Img, { image: icon }) : null, icon?.src ? jsx(Img, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: "mb-3.5", headingType: "h5", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$1) })) : null] })] }) }));
+        return (jsx(BlockWrapper, { className: style('border border-gray', className), defaultPadding: "p-0", ...rest, children: jsxs(LinkWrapper, { className: "flex", href: href, target: target, children: [jsxs("div", { className: "w-[200px] min-w-[200px] self-center", children: [icon?.icon ? jsx(Img, { image: icon }) : null, icon?.src ? jsx(Img, { image: icon }) : null] }), jsxs("div", { className: "p-8 pl-3 w-full", children: [title ? jsx(Heading, { className: "mb-3.5", headingType: "h5", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-3", children: list?.map(renderList$2) })) : null] })] }) }));
     });
-    const renderList$1 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: "text-h6", children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
+    const renderList$2 = (_, i) => (jsxs("div", { className: "break-words", children: [_.title ? jsx("div", { className: "text-h6", children: _.title }) : null, _.description ? jsx("span", { className: "text-l-light mt-1", children: _.description }) : null] }, String(i)));
 
     const DOT_SIZE_MAP = {
         L: 'w-1.5 h-1.5 mr-4',
@@ -1047,46 +1038,45 @@
         XXL: {
             title: { headingType: 'h0', as: 'h1' },
             descriptionSize: 'text-h5',
-            descriptionStyle: 'mt-headline-xxl',
+            descriptionStyle: 'mt-m',
         },
         XL: {
             title: { headingType: 'h1', as: 'h1' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-headline-l',
+            descriptionStyle: 'mt-s',
         },
         L: {
             title: { headingType: 'h2', as: 'h2' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-headline-l',
+            descriptionStyle: 'mt-s',
         },
         M: {
-            title: { headingType: 'h3', as: 'h3' },
+            title: { headingType: 'h3', as: 'h2' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-headline-m',
+            descriptionStyle: 'mt-text',
         },
         S: {
-            title: { headingType: 'h4', as: 'h4' },
+            title: { headingType: 'h4', as: 'h2' },
             descriptionSize: 'text-xl-light',
-            descriptionStyle: 'mt-headline-s',
+            descriptionStyle: 'mt-xs',
         },
         XS: {
-            title: { headingType: 'h5', as: 'h5' },
+            title: { headingType: 'h5', as: 'h2' },
             descriptionSize: 'text-l-light',
-            descriptionStyle: 'mt-headline-s',
+            descriptionStyle: 'mt-xs',
         },
     };
 
-    const Headline = JSX(({ className, title, description, headlineVersion = 'XL', align = 'text-center', as, isPadding = true, isTheme = false, version = '', ...rest }) => {
+    const Headline = JSX(({ className, version = '', headlineVersion = 'XL', title, description, align = 'text-center', as, isPadding = true, isTheme = false, ...rest }) => {
         const versionStyle = headlineVersionStyles[headlineVersion];
-        const paddingStyle = isPadding ? 'p-default' : '';
         const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
-        return (jsxs(BlockWrapper, { className: style(paddingStyle, className), version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, align: align, ...descriptionStyle, children: description })) : null] }));
+        return (jsxs(BlockWrapper, { className: className, defaultPadding: isPadding ? 'p-default' : '', version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, align: align, ...descriptionStyle, children: description })) : null] }));
     });
 
     const BORDER_STYLE = 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
 
     const CarouselRecommendationCard = JSX(({ className = '', description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('relative box-border p-default group-data-gray:bg-main-divider/50', BORDER_STYLE, className), ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-2", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), items.length ? (jsx(List, { className: "flex flex-col gap-2", items: items, listItemSize: "S" })) : null, renderIcon$1(icon), socialMedia.length ? jsx(SocialMedia, { className: "mt-5", media: socialMedia }) : null] }) }));
+        return (jsx(BlockWrapper, { className: style('relative box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), defaultPadding: "p-default", ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-2", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), items.length ? (jsx(List, { className: "flex flex-col gap-2", items: items, listItemSize: "S" })) : null, renderIcon$1(icon), socialMedia.length ? jsx(SocialMedia, { className: "mt-5", media: socialMedia }) : null] }) }));
     });
     const renderIcon$1 = (icon) => icon?.src || icon?.icon ? (jsx("div", { children: jsx(Img, { image: icon }) })) : null;
 
@@ -1126,7 +1116,7 @@
         const cellsNode = cardCells.map(renderCardInfo);
         const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
         const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
-        return (jsxs(BlockWrapper, { className: style('relative border border-gray flex flex-col', getPaddingStyle(isHighlighting), className), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock(icon), title ? jsx(Heading, { className: "text-center pt-2", headingType: "h5", title: title }) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
+        return (jsxs(BlockWrapper, { className: style('relative border border-gray flex flex-col', className), defaultPadding: getPaddingStyle(isHighlighting), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock(icon), title ? jsx(Heading, { className: "text-center pt-2", headingType: "h5", title: title }) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
     });
     const renderIconBlock = (icon) => (jsx("div", { className: "w-[267px] min-w-[267px] self-center", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }));
     const renderFoldButton$1 = ({ isUnfolded, onToggle }) => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center", onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16" })] }));
@@ -1139,7 +1129,7 @@
       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, minHeight, children, onVisibleIndicesChange, listType = 'horizontal-list', version, }) => {
+    const SwipeListControl = JSX(({ className, version, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, minHeight, children, onVisibleIndicesChange, listType = 'horizontal-list', }) => {
         const itemCount = Array.isArray(children) ? children.length : 0;
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount,
@@ -1288,6 +1278,12 @@
                     }, className: "flex-shrink-0 my-auto", width: "20", height: "20" })) : null] }));
     });
 
+    const foldableSectionStyles = 'flex flex-wrap group-last:last:pb-0';
+
+    const getIconName = (isUnfolded) => isUnfolded ? 'ArrowUpSolidIcon' : 'ArrowDownSolidIcon';
+
+    const labelSize$1 = 'text-l';
+
     const iconBgStyles = {
         primary: 'bg-main-divider',
         secondary: 'bg-white/30',
@@ -1296,23 +1292,17 @@
     const RoundedIcon = JSX(({ iconBgVersion = 'primary', size, icon, ...rest }) => {
         const width = String(size?.width || 24);
         const height = String(size?.height || 24);
-        return icon ? (jsx("div", { className: style('rounded-icon p-2.5 mr-3', iconBgStyles[iconBgVersion]), children: jsx(Icon, { ...rest, width: width, height: height, name: icon }) })) : null;
+        return icon ? (jsx("div", { className: style('rounded-icon p-2.5', iconBgStyles[iconBgVersion]), children: jsx(Icon, { ...rest, width: width, height: height, name: icon }) })) : null;
     });
 
     const renderRoundedIcon = (icon, iconBgVersion) => (jsx(RoundedIcon, { ...icon, iconBgVersion: iconBgVersion }));
 
-    const foldableSectionStyles = 'flex flex-wrap group-last:last:pb-0';
-
-    const getIconName = (isUnfolded) => isUnfolded ? 'ArrowUpSolidIcon' : 'ArrowDownSolidIcon';
-
-    const labelSize$1 = 'text-l';
-
     const rollupIconVersion = 'normal';
 
     const rollupItemStyles = '';
 
     const RollupItem = JSX(({ className = '', label = 'Развернуть', labelIcon, labelIconBgVersion, isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-5 [&>*]:p-0', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({
+        return (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), defaultPadding: "p-0", tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-5 [&>*]:p-0', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({
                     version,
                     label,
                     labelIcon,
@@ -1335,7 +1325,7 @@
         })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
     const renderPrimaryFoldButton = ({ label, labelIconBgVersion, icon, onToggle, labelIcon, }) => {
-        return (jsxs("button", { className: style('border-none bg-transparent px-0 flex justify-between items-center w-full cursor-pointer group/button', labelIcon?.icon ? 'py-2' : 'py-5'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main", children: [renderRoundedIcon(labelIcon, labelIconBgVersion), label ? (jsx(Text, { size: labelSize$1, font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
+        return (jsxs("button", { className: style('border-none bg-transparent px-0 flex justify-between items-center w-full group/button', labelIcon?.icon ? 'py-2' : 'py-5'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main", children: [renderRoundedIcon(labelIcon, labelIconBgVersion), label ? (jsx(Text, { size: labelSize$1, font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
     };
 
     const Contacts = JSX(({ className = '', items, hasButton }) => (jsxs("div", { className: className, children: [items?.length ? items.map(renderContactsGroup) : null, hasButton ? (jsx(Button, { version: "primary", className: "mb-6 w-full", href: "https://www.rshb.ru/feedback/question/", target: "_blank", ariaLabel: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C", text: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C" })) : null] })));
@@ -1376,8 +1366,8 @@
     const Footer = JSX(({ className = '', ...rest }) => {
         const fallback = rest.options?.page?.fallback;
         const sitemap = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
-        const { documents, relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
-        return (jsxs(BlockWrapper, { tag: "footer", className: style('px-4 py-6', className), ...rest, children: [jsx("div", { className: "mb-4 pb-5 border-b border-main-divider", children: sitemap.topItems?.map((item, i) => (jsx(RollupItem, { label: item?.text, labelIcon: item?.icon, children: jsx(LinkList, { items: item.items, className: "my-3" }) }, String(i)))) }), jsx(Contacts, { className: "overflow-hidden", items: contacts }), jsx(SocialMedia, { className: "mb-4", media: socialMedia }), jsx(Button, { className: "w-full mb-4", text: "Google Play", version: "secondary", href: "/", target: "_blank" }), jsx(HorizontalNavigation, { className: "pt-4 pb-7 border-y border-main-divider", title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, {})] }));
+        const { relatedEnterprises, contacts, socialMedia, horizontalNavigationTitle } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
+        return (jsxs(BlockWrapper, { tag: "footer", className: className, defaultPadding: "px-4 py-6", ...rest, children: [jsx("div", { className: "mb-4 pb-5 border-b border-main-divider", children: sitemap.topItems?.map((item, i) => (jsx(RollupItem, { label: item?.text, labelIcon: item?.icon, children: jsx(LinkList, { items: item.items, className: "my-3" }) }, String(i)))) }), jsx(Contacts, { className: "overflow-hidden", items: contacts }), jsx(SocialMedia, { className: "mb-4", media: socialMedia }), jsx(Button, { className: "w-full mb-4", text: "Google Play", version: "secondary", href: "/", target: "_blank" }), jsx(HorizontalNavigation, { className: "pt-4 pb-7 border-y border-main-divider", title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, {})] }));
     });
 
     const ICON_VERSION_MAP = {
@@ -1427,12 +1417,12 @@
     const Header = JSX(({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], mobileHeaderType = 'none', ...rest }) => {
         const fallback = rest.options?.page?.fallback;
         const { logo, internetBankUrl } = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
-        return (jsx(BlockWrapper, { tag: "header", version: version, ...rest, children: jsx("div", { className: "container px-4 py-1 box-border", children: jsx(HeaderTop, { bgColor: bgColor, logo: logo, internetBankUrl: internetBankUrl, version: version, mobileHeaderType: mobileHeaderType, ...rest }) }) }));
+        return (jsx(BlockWrapper, { tag: "header", defaultPadding: "", version: version, ...rest, children: jsx("div", { className: "container px-4 py-1 box-border", children: jsx(HeaderTop, { bgColor: bgColor, logo: logo, internetBankUrl: internetBankUrl, version: version, mobileHeaderType: mobileHeaderType, ...rest }) }) }));
     });
 
     const ImgBlock = JSX((props) => {
         const { className, image, ...rest } = props;
-        return (jsx(BlockWrapper, { className: className, ...rest, children: jsx(Img, { image: image }) }));
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-0", ...rest, children: jsx(Img, { image: image }) }));
     });
 
     const LinkDocsListItem = JSX(({ doc, icon }) => {
@@ -1453,19 +1443,45 @@
         return index !== -1 ? href.substring(index + 1) : '';
     };
 
-    const LinkDocs = JSX(({ className = '', title, description, icon = { icon: 'DocDownloadIcon', iconVersion: 'black' }, documents, align, ...rest }) => (jsxs(BlockWrapper, { className: style('p-default', className), ...rest, children: [jsx(Headline, { isPadding: false, title: title, description: description, align: align, headlineVersion: "M", as: "h2" }), documents?.length ? (jsx("div", { className: "mt-5 flex flex-col gap-6", role: "list", children: documents.map((doc, i) => (jsx("div", { role: "listitem", children: jsx(LinkDocsListItem, { doc: doc, icon: icon ? (jsx(Img, { className: "min-w-11 min-h-11 h-fit p-2.5 bg-main-divider rounded-md", image: icon, width: "24", height: "24" })) : null }) }, String(i)))) })) : null] })));
+    const LinkDocs = JSX(({ className = '', title, description, icon = { icon: 'DocDownloadIcon', iconVersion: 'black' }, documents, align, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: [jsx(Headline, { isPadding: false, title: title, description: description, align: align, headlineVersion: "M" }), documents?.length ? (jsx("div", { className: "mt-5 flex flex-col gap-6", role: "list", children: documents.map((doc, i) => (jsx("div", { role: "listitem", children: jsx(LinkDocsListItem, { doc: doc, icon: icon ? (jsx(Img, { className: "min-w-11 min-h-11 h-fit p-2.5 bg-main-divider rounded-md", image: icon, width: "24", height: "24" })) : null }) }, String(i)))) })) : null] })));
+
+    /**
+     * @deprecated
+     */
+    const AlignText = {
+        left: 'text-left',
+        center: 'text-center',
+        right: 'text-right',
+    };
+
+    const imageAlignmentMap = {
+        start: 'self-start',
+        center: 'self-center',
+        end: 'self-end',
+    };
+    const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-lg font-sans overflow-hidden', padding || defaultPadding, className), children: [backImage ? jsx("div", { className: "absolute bottom-0 right-0 z-0", children: backImage }) : null, title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: "grow relative flex flex-wrap sm:flex-nowrap justify-between items-stretch gap-lg", children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-lg max-w-[600px] xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), buttons] }), renderImageContainer(rightImage, { className: '-order-1 sm:order-1', imageAlign })] })] })));
+    const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
+
+    const renderDescription$1 = (description) => description ? (jsx("div", { className: "mb-5 pt-0.5 sm:mb-0 sm:pt-0", children: jsx(Text, { size: "text-xl", "font-weight": "light", children: description }) })) : null;
 
-    const MobileAppTile = JSX(({ className = '', title = 'Мобильное приложение', description, href = '#' }) => {
-        return (jsx("div", { className: style('col-span-12 rounded-md cursor-pointer p-4 bg-secondary-light font-sans', className), children: href ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "flex justify-center align-middle rounded-md bg-primary-main w-12 h-12", children: jsx(Logo, { className: "w-8", bgColor: "transparent", showTitle: true }) }), jsxs("a", { href: href, target: "_blank", className: "flex flex-col justify-center pl-3", children: [jsx("div", { className: "text-s font-medium mb-[3px]", children: title }), jsx("div", { className: "text-s text-secondary-text", children: description })] })] })) : null }));
+    const renderList$1 = (items) => {
+        return items?.length ? (jsx(List, { items: items, className: "text-l-light mb-2 last:mb-0" })) : (jsx("span", { className: "text-m-light text-secondary-text", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
+    };
+
+    const MobileAppTile = JSX(({ className, padding, alignTitle = 'left', buttons = [], description, headingType = 'h4', image, items, qr, title = 'Мобильное приложение', version = 'primary', ...rest }) => {
+        const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
+        return (jsx(BlockWrapper, { className: style('min-h-80', className), defaultPadding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-default", title: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', AlignText[alignTitle]) })) : null, backImage: image?.src ? jsx(Img, { image: image }) : null, buttons: renderButtonsSection(buttons, { isVertical: buttons.length > 3 }), children: [renderDescription$1(description), jsxs("div", { className: "flex flex-1 gap-s items-center", children: [qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList$1(items)] })] }) }));
     });
 
+    const sum = (list = []) => list.reduce((a, b) => a + b, 0);
+
+    const avg = (items = []) => (items?.length ? sum(items) / items.length : 0);
+
+    const deviation = (items) => items?.length ? Math.sqrt(Math.abs(avg(items.map((_) => _ ** 2)) - avg(items) ** 2)) : 0;
+
     const labelSize = 'text-l';
 
-    const BenefitItem = JSX((props) => {
-        const { className = '', icon, label, description, benefitsVersion = 'normal' } = props;
-        const listItemAlign = description ? 'items-start' : 'items-center';
-        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(benefitsVersion), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? (jsx(Text, { color: "text-primary-text group-data-secondary:text-white", size: labelSize, children: label })) : null, description ? (jsx(Paragraph, { font: "font-light", size: "text-m", color: "text-secondary-text group-data-secondary:text-white", children: description })) : null] })] }));
-    });
+    const BenefitItem = JSX(({ className, icon, label, description, benefitsVersion = 'normal' }) => (jsxs("div", { className: style('flex gap-s', description ? 'items-start' : 'items-center', className), children: [icon ? (jsx("div", { className: getBenefitIconBgStyle(benefitsVersion), children: jsx(Img, { className: "w-6 h-6", image: { ...icon, iconVersion: icon.iconVersion || benefitsVersion } }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? (jsx(Text, { color: "text-primary-text group-data-secondary:text-white", size: labelSize, children: label })) : null, description ? (jsx(Paragraph, { font: "font-light", size: "text-m", color: "text-secondary-text group-data-secondary:text-white", children: description })) : null] })] })));
     function getBenefitIconBgStyle(benefitsVersion) {
         const bgColorStyle = benefitsVersion === 'normal'
             ? 'bg-secondary-light text-primary-main'
@@ -1478,111 +1494,42 @@
         return (jsx("div", { className: style(richVersion, 'md-container'), dangerouslySetInnerHTML: { __html } }));
     });
 
-    function assertUnreachable(x) {
-        throw new Error(x);
-    }
-
-    // TODO: Create universal function for this case
-    const renderBenefit$1 = 
-    // Linter doesn't understand that switch processes all cases
-    // eslint-disable-next-line consistent-return
-    (version) => (benefit, i) => {
-        const { type } = benefit;
-        if (!(type === 'default' || type === 'rte')) {
-            return null;
-        }
-        switch (type) {
-            case 'default':
-                return (jsx(BenefitItem, { icon: benefit.icon, label: benefit.label, description: benefit.description, version: version }, String(i)));
-            case 'rte':
-                return jsx(RichText, { __html: benefit.__html });
-            default:
-                assertUnreachable(benefit);
+    const renderBenefit = (benefitsVersion) => ({ type, ...benefit }, i) => {
+        if (type === 'rte' && '__html' in benefit) {
+            return jsx(RichText, { __html: benefit.__html });
         }
+        return jsx(BenefitItem, { benefitsVersion: benefitsVersion, ...benefit }, String(i));
     };
 
-    const positionStyle = 'justify-end flex-col-reverse gap-4';
-
-    const styleInsuranceSum = 'flex-col gap-2';
-
-    const styleValueBlock = 'flex-col gap-1';
-    const styleValueBlockText = '';
+    const MAX_BENEFITS_LEN_DEVIATION = 16;
+    const benefitLength = (_) => _.type === 'rte'
+        ? _.__html?.length || 0
+        : Math.max(_.label?.length || 0, _.description?.length || 0);
+    const isDistortedBenefits = (benefits) => deviation(benefits.map(benefitLength)) > MAX_BENEFITS_LEN_DEVIATION;
+    const BenefitsList = JSX(({ className, benefitsVersion = 'normal', benefits }) => benefits?.length ? (jsx("div", { className: style('flex gap-x-m gap-y-s', isDistortedBenefits(benefits) ? 'flex-col' : 'flex-wrap', className), children: benefits.map(renderBenefit(benefitsVersion)) })) : null);
 
-    const renderInsuranceSumMonth = (sum = 0, monthLimit = 0) => sum || monthLimit ? (jsxs("div", { className: style('flex mt-6', styleInsuranceSum), children: [sum > 0 ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null, monthLimit > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum)) : null] })) : null;
-    const renderValueBlock = (title, sum = 0, isAnotherBlock = false) => {
-        const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
-        return (jsxs("div", { className: style(`flex w-full whitespace-pre`, styleValueBlock, widthStyle), children: [jsx(Text, { font: "font-light", size: "text-l", children: title }), jsxs(Text, { size: "text-h6", color: styleValueBlockText, children: [toLocalNumberFormat(2)(sum), " \u20BD"] })] }));
-    };
+    const Tags = JSX(({ className, tags }) => tags?.length ? (jsx("div", { className: style('flex flex-wrap gap-xs', className), role: "list", children: tags.map(renderTag) })) : null);
+    const renderTag = (tag, key) => (jsx("div", { className: "py-2 px-2.5 border-solid border rounded-md border-gray", role: "listitem", children: jsx(Text, { size: "text-m-light", children: tag }) }, String(key)));
 
-    const PictureText = JSX(({ className = '', title, description, image, benefits, sum, monthLimit, directionRight = false, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('relative p-default', className), version: version, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M" // TODO: Сверить с макетом после влития мобильных правок Headline (DRAFT)
-                , align: "text-left" }), jsxs("div", { className: style('flex mt-6', positionStyle), children: [image?.src ? jsx(Img, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$1(version)) })) : null, renderInsuranceSumMonth(Number(sum), Number(monthLimit))] })] })] })));
+    const BaseProductTile = JSX(({ className, title, description, headlineVersion = 'L', align = 'text-left', isInsetTitle = true, benefits, benefitsVersion, __html, items, isDotted = true, listItemSize, tags, buttons, image, imageOptions: { imageAlign, directionRight = true } = {}, children, }) => {
+        const img = image?.src ? jsx(Img, { image: image }) : null;
+        const headline = (jsx(Headline, { title: title, description: description, headlineVersion: headlineVersion, align: align, isPadding: false }));
+        return (jsx(BaseTile, { className: className, ...(isInsetTitle ? { insetTitle: headline } : { title: headline }), ...(directionRight ? { rightImage: img } : { leftImage: img }), imageAlign: imageAlign, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col gap-m", children: [jsx(BenefitsList, { benefitsVersion: benefitsVersion, benefits: benefits }), __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, tags?.length ? jsx(Tags, { tags: tags }) : null] }) }));
+    });
 
-    const getColSpan = (className) => {
-        const colSpanPrefix = 'col-span-';
-        const colSpanStr = className?.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
-        return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
-    };
+    const renderInsuranceSumMonth = (sum, monthLimit) => sum || monthLimit ? (jsxs("div", { className: "flex flex-wrap xl:flex-nowrap xl:bg-main-divider xl:rounded-md p-xs gap-m", children: [Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum) : null, Number(monthLimit) > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit) : null] })) : null;
+    const renderValueBlock = (title, value = 0) => (jsxs("div", { className: "basis-full flex flex-col-reverse sm:flex-row sm:justify-between items-baseline whitespace-pre", children: [jsx(Text, { font: "font-light", size: "text-l", children: title }), jsxs(Text, { size: "text-h6", color: "text-primary-text", children: [toLocalNumberFormat(2)(value), " \u20BD"] })] }));
 
-    function getTileHeadingType(className = '') {
-        const colSpan = getColSpan(className);
-        if (colSpan <= 4) {
-            return 'S';
-        }
-        else if (colSpan <= 8) {
-            return 'M';
-        }
-        else {
-            return 'L';
-        }
-    }
-
-    function getTileMinHeight(className = '') {
-        const colSpan = getColSpan(className);
-        if (colSpan <= 6) {
-            return 'min-h-[300px]';
-        }
-        else if (colSpan <= 8) {
-            return 'min-h-[320px]';
-        }
-        else {
-            return 'min-h-[360px]';
-        }
-    }
-
-    function getTileRightPadding(className = '') {
-        const colSpan = getColSpan(className);
-        if (colSpan <= 6) {
-            return 'pr-9';
-        }
-        else if (colSpan <= 8) {
-            return 'pr-[4.75rem]';
-        }
-        else {
-            return 'pr-[9.4rem]';
-        }
-    }
+    const PictureText = JSX(({ className, headlineVersion = 'M', align = 'text-center', sum, monthLimit, ...rest }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: jsx(BaseProductTile, { className: "h-full", headlineVersion: headlineVersion, align: align, isInsetTitle: false, ...rest, imageOptions: { directionRight: false, imageAlign: 'center', ...rest.imageOptions }, children: renderInsuranceSumMonth(Number(sum), Number(monthLimit)) }) })));
 
     const GOLDEN_RATIO = 1.618;
-    const Placeholder = JSX(({ className, title, description = 'Блок в разработке...', ...rest }) => {
-        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 Placeholder = JSX(({ className, title, description = 'Блок в разработке...', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border', className), ...rest, children: [jsx(Headline, { className: "max-w-[600px]", title: title, description: description, headlineVersion: "L", align: "text-left", isPadding: false }), jsx("figure", { className: "m-0 mt-m min-w-[80%]", children: renderShimmer() })] })));
     const renderShimmer = (size = 3) => goldenSequence(100, size)
         .map((_) => Math.floor(_))
         .map(renderShimmerItem);
     const renderShimmerItem = (width, index) => (jsx("div", { style: { width: `${width || 100}%` }, className: "h-4 mt-2 bg-secondary-light" }, String(index)));
     const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
 
-    const BaseTile = JSX(({ className, title = '', insetTitle = '', buttons, leftImage, rightImage, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col font-sans', className), children: [backImage ? jsx("div", { className: "absolute bottom-0 right-0 z-0", children: backImage }) : null, title, jsxs("div", { className: "grow relative flex flex-wrap sm:flex-nowrap justify-between items-stretch gap-8", children: [renderImageContainer(leftImage), jsxs("div", { className: style('flex flex-col gap-8', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), buttons] }), renderImageContainer(rightImage, { className: '-order-1 sm:order-1' })] })] })));
-    const renderImageContainer = (image, { className } = {}) => image ? jsx("div", { className: style('flex-none', className), children: image }) : null;
-
-    const renderBenefit = (version = 'primary', benefitsVersion = 'normal') => (props, i) => jsx(BenefitItem, { version: version, benefitsVersion: benefitsVersion, ...props }, String(i));
-
-    const ProductBlockInner = JSX(({ className, version = 'primary', headlineVersion = 'L', title, description, benefits, benefitsVersion, items, isDotted = true, __html, buttons, image, directionRight = true, }) => {
-        const benefitsWithLabel = benefits?.filter((_) => _.label);
-        const img = image?.src ? jsx(Img, { className: "mt-[-50px]", image: image }) : null;
-        return (jsxs(BaseTile, { className: className, insetTitle: jsx(Headline, { className: "max-w-[600px] xl:max-w-[728px]", title: title, description: description, headlineVersion: headlineVersion, align: "text-left", isPadding: false }), ...(directionRight ? { rightImage: img } : { leftImage: img }), buttons: renderButtonsSection(buttons), children: [benefitsWithLabel?.length ? (jsx("div", { className: "flex flex-wrap gap-6", children: benefitsWithLabel.map(renderBenefit(version, benefitsVersion)) })) : null, __html ? (jsx("div", { className: "mt-5", children: jsx(RichText, { __html: __html }) })) : null, items?.length ? jsx(List, { className: "mt-5", items: items, isDotted: isDotted }) : null] }));
-    });
-
     function renderBackwardButton({ text, href, target, icon }, version) {
         const iconVersion = version === 'primary' ? 'white' : 'black';
         const commonProps = { text, href, target, ariaLabel: text };
@@ -1593,21 +1540,23 @@
                         } }) }), jsx(Button, { version: "link", ...commonProps })] }));
     }
 
-    const ProductBlock = JSX(({ className, backwardButton, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden p-default flex flex-col gap-10 box-border', className), ...rest, children: [backwardButton?.text
+    const ProductBlock = JSX(({ className, backwardButton, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden flex flex-col gap-lg box-border', className), defaultPadding: "p-default", ...rest, children: [backwardButton?.text
                 ? renderBackwardButton(backwardButton, !rest.version || rest.version === 'primary' ? 'primary' : 'white')
-                : null, jsx(ProductBlockInner, { className: "grow", ...rest })] })));
+                : null, jsx(BaseProductTile, { className: "grow h-full", ...rest })] })));
 
-    const ProductGallery = JSX(({ className = '', slides = [], ...rest }) => {
-        const galleryBlocks = slides.map((s) => s.productBlock);
-        return (jsx(BlockWrapper, { className: `box-border py-6 overflow-hidden relative w-100 mb-6 ${className}`, ...rest, children: jsx(SwipeListControl, { gap: 0, padding: 0, children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, ...rest }, i)) }) }));
-    });
-    const renderProductBlock = (block, i) => (jsx(ProductBlockInner, { className: "z-10 px-5 group-data-secondary:text-white", ...block }, String(i)));
+    const ProductGallery = JSX(({ className, slides = [], ...rest }) => (jsx(BlockWrapper, { className: style('overflow-hidden relative', className), defaultPadding: "p-m", ...rest, children: jsx(SwipeListControl, { gap: 0, padding: 0, children: slides
+                .map((s) => s.productBlock)
+                .map((_, i) => (jsx("div", { className: "box-border h-full", role: "listitem", children: jsx(BaseProductTile, { className: "px-5 h-full", headlineVersion: "L", ..._, ...rest }) }, String(i)))) }) })));
 
     const RichTextBlock = JSX((props) => {
         const { __html, richVersion, ...rest } = props;
-        return (jsx(BlockWrapper, { ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) }));
+        return (jsx(BlockWrapper, { defaultPadding: "p-0", ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) }));
     });
 
+    function assertUnreachable(x) {
+        throw new Error(x);
+    }
+
     const checkCanRenderIcon = (icon) => Boolean(icon?.icon || icon?.src);
 
     const STEPS_BLOCK_STYLE = {
@@ -1627,7 +1576,7 @@
         small: 'min-h-12',
     };
     const styleMap = STEPS_BLOCK_STYLE;
-    const StepsBlock = JSX(({ className = '', title, description, showLines = true, steps, size = 'normal', version = 'primary', ...rest }) => (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(renderStep(size, version, showLines)) }) })) : null] })));
+    const StepsBlock = JSX(({ className = '', title, description, showLines = true, steps, size = 'normal', version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: `box-border flex flex-col ${className}`, defaultPadding: "px-4 py-6", 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(renderStep(size, version, showLines)) }) })) : null] })));
     // TODO: Create universal function for this case
     const renderStep = (size, version, showLines) => 
     // Linter doesn't understand that switch processes all cases
@@ -1663,12 +1612,9 @@
         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", isDotted: isDotted ?? true, ...rest }));
+    const renderLabelDescriptionCellData = ({ label, description }) => (jsxs("div", { children: [label ? jsx("div", { className: "mb-2", 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", imageClassName: "m-0" }) : null;
+    const renderListCellData = ({ isDotted, ...rest }) => (jsx(List, { className: "flex flex-col justify-between items-start text-m pl-2 text-base", isDotted: isDotted ?? true, ...rest }));
     const EmbeddableCellData = {
         Buttons: renderButtonsCellData,
         Img: renderImgCellData,
@@ -1676,10 +1622,10 @@
         LabelDescription: renderLabelDescriptionCellData,
     };
 
-    const TableTileHeader = JSX(({ title, icon }) => (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 min-w-6", image: icon, width: "24", height: "24" }) : null] })));
+    const TableTileHeader = JSX(({ title, icon }) => (jsxs("div", { className: "mb-2", children: [title ? jsx(Text, { size: "text-l-light", children: title }) : null, icon ? jsx(Img, { className: "ml-auto min-w-6", image: icon, width: "24", height: "24" }) : null] })));
 
-    const TariffsTableTileCell = JSX(({ tile, ...rest }) => (jsxs("div", { className: "rounded-md border-gray h-full box-border border p-4", children: [jsx(TableTileHeader, { ...tile?.header }), tile?.data?.length
-                ? tile.data.map((cell, i) => (jsxs("div", { children: [i > 0 ? jsx("div", { className: "h-5" }) : null, renderCell(cell, rest)] }, String(i))))
+    const TariffsTableTileCell = JSX(({ tile, ...rest }) => (jsxs("div", { className: "h-full", children: [jsx(TableTileHeader, { title: tile?.header?.title }), tile?.data?.length
+                ? tile.data.map((cell, i) => (jsx("div", { className: "mb-2", children: renderCell(cell, rest) }, String(i))))
                 : null] })));
     function renderCell(cell, props) {
         if (!cell || !cell.tableCellType || !(cell.tableCellType in EmbeddableCellData)) {
@@ -1689,15 +1635,14 @@
         return jsx(EmbeddableCellInner, { displayTable: () => null, isVisible: true, ...cell, ...props });
     }
 
-    const TariffsTableHorizontal = JSX(({ tiles, ...rest }) => tiles?.length ? (jsx(SwipeListControl, { ...rest, children: tiles.map((tile, i) => (jsx(TariffsTableTileCell, { tile: tile, ...rest }, String(i)))) })) : null);
+    const TariffsTableHorizontal = JSX(({ tiles, ...rest }) => tiles?.length ? (jsx(SwipeListControl, { ...rest, padding: undefined, children: tiles.map((tile, i) => (jsx(TariffsTableTileCell, { tile: tile, ...rest }, String(i)))) })) : null);
 
     const TariffsTableVertical = JSX(({ tiles, ...rest }) => tiles?.length ? (jsx("div", { className: "flex flex-col gap-3.5", children: tiles.map((tile, i) => (jsx(TariffsTableTileCell, { tile: tile, ...rest }, String(i)))) })) : null);
 
     const TariffsTable = JSX(({ className, title, description, tariffsColumns: columns, rowHeaders, orientation = 'vertical', ...rest }) => {
         const colData = getColData(columns);
         const tiles = getTiles(rowHeaders, colData);
-        const headingMargin = description ? 'mb-2' : 'mb-5';
-        return (jsxs("section", { className: `px-4 py-6 bg-white font-sans text-primary-text overflow-x-hidden ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${headingMargin}`, title: title })) : null, description ? jsx("div", { className: "mb-5 text-center text-m", children: description }) : null, orientation === 'vertical' ? (jsx(TariffsTableVertical, { tiles: tiles, ...rest })) : (jsx(TariffsTableHorizontal, { tiles: tiles, ...rest }))] }));
+        return (jsxs("section", { className: `p-default bg-white font-sans text-primary-text overflow-x-hidden ${className}`, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", align: "text-left", isPadding: false, className: "mb-8" }), orientation === 'vertical' ? (jsx(TariffsTableVertical, { tiles: tiles, ...rest })) : (jsx(TariffsTableHorizontal, { tiles: tiles, ...rest }))] }));
     });
     const getColData = (columns) => columns?.[0]?.data ? columns[0].data : [];
     const getTiles = (rowHeaders, colData) => rowHeaders?.map((header, i) => ({
@@ -1705,9 +1650,7 @@
         data: colData?.[i] || [{}],
     }));
 
-    const TextBlock = JSX(({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => {
-        return (jsxs(BlockWrapper, { className: style('px-9 py-4 flex gap-3 bg-white group-data-secondary:bg-primary-main/10', className), ...rest, children: [iconVersion === 'small' ? jsx("div", { className: "mt-1", children: renderIcon() }) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "flex flex-col w-fit gap-3", children: [title ? (jsx(Text, { size: "text-l", font: "font-medium", color: "text-primary-text group-data-secondary:text-white", children: title })) : null, description ? renderDescription(description) : null, items?.length ? renderList(items, true) : null, __html ? jsx(RichText, { __html: __html }) : null] })] }));
-    });
+    const TextBlock = JSX(({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => (jsxs(BlockWrapper, { className: style('flex gap-3 bg-white group-data-secondary:bg-primary-main/10', className), ...rest, children: [iconVersion === 'small' ? jsx("div", { className: "mt-1", children: renderIcon() }) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "flex flex-col w-fit gap-3", children: [title ? (jsx(Text, { size: "text-l", font: "font-medium", color: "text-primary-text group-data-secondary:text-white", children: title })) : null, description ? renderDescription(description) : null, items?.length ? renderList(items, true) : null, __html ? jsx(RichText, { __html: __html }) : null] })] })));
     const renderIcon = () => (jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main`, children: "i" }));
     const renderImage = (image) => image?.src ? jsx(Img, { className: "h-fit", image: image }) : null;
     const renderDescription = (description) => (jsx(Paragraph, { size: "text-s", color: "text-secondary-text group-data-secondary:text-white", children: description }));
@@ -1734,7 +1677,7 @@
     };
     const VerticalLayout = JSX(({ className = '', gap = '', align = 'stretch', isPadding = false, isInnerPadding = true, version = 'transparent', isTheme = false, ...rest }) => {
         const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
-        return (jsx(BlockWrapper, { className: style('relative', 'flex flex-col [&>*]:max-w-full', isPadding ? 'p-default' : '', gapStyles[gap], align && alignStyle[align], className), version: version, isTheme: isTheme, ...rest, children: renderChildren({
+        return (jsx(BlockWrapper, { className: style('relative', 'flex flex-col [&>*]:max-w-full', gapStyles[gap], align && alignStyle[align], className), defaultPadding: isPadding ? 'p-default' : '', version: version, isTheme: isTheme, ...rest, children: renderChildren({
                 ...rest,
                 renderProps: (block, options) => renderBlock(block, options, { className: innerPaddingStyle }),
             }) }));
@@ -1964,7 +1907,7 @@
 
     const joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
 
-    const packageVersion = "0.11.3";
+    const packageVersion = "0.12.3";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;