@redneckz/wildless-cms-uni-blocks 0.14.531 → 0.14.533

package/mobile/bundle/bundle.umd.js

@@ -74,17 +74,15 @@
         return JSXTmpl;
     };
 
-    const identity = (_) => _;
-
-    const t0 = (fn = identity) => ([_]) => fn(_);
-    const t1 = (fn = identity) => ([, _]) => fn(_);
-
     const style = (...atoms) => atoms
-        .map((_) => (isStyleRecord(_) ? styleRecordToAtoms(_) : _))
+        .map((_) => isStyleRecord(_)
+        ? Object.entries(_)
+            .filter(([, v]) => v)
+            .map(([k]) => k)
+        : _)
         .flatMap((_) => _)
         .filter(Boolean)
         .join(' ');
-    const styleRecordToAtoms = (_) => Object.entries(_).filter(t1()).map(t0());
     const isStyleRecord = (_) => Boolean(_ && typeof _ === 'object' && !Array.isArray(_));
 
     const blockStyles = {
@@ -97,7 +95,9 @@
     const BlockWrapper = JSX(({ className, version = 'primary', isTheme = true, defaultPadding = 'p-xl', padding, block, tag = 'section', role, children, style: inlineStyles, }) => {
         const Tag = tag;
         const isGroup = version && isTheme;
-        return (jsx(Tag, { className: style('@container font-sans', isGroup ? 'group' : '', blockStyles[version], padding || defaultPadding, className), ...(isGroup ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor } : {}), role: role, style: inlineStyles, children: children }));
+        return (jsx(Tag, { className: style('@container font-sans', {
+                group: isGroup,
+            }, blockStyles[version], padding || defaultPadding, className), ...(isGroup ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor } : {}), role: role, style: inlineStyles, children: children }));
     });
 
     const GOLDEN_RATIO = 1.618;
@@ -176,7 +176,7 @@
     const Headline = JSX(({ className, version = '', headlineVersion = 'XL', title, description, align = 'text-center', as, isEmbedded = false, isTheme = false, ...rest }) => {
         const versionStyle = headlineVersionStyles[headlineVersion];
         const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
-        return (jsxs(BlockWrapper, { className: style(isEmbedded ? '@container-normal' : '', className), defaultPadding: isEmbedded ? '' : 'p-6xl', 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, font: versionStyle.descriptionWeight, align: align, ...descriptionStyle, children: description })) : null] }));
+        return (jsxs(BlockWrapper, { className: style({ '@container-normal': isEmbedded }, className), defaultPadding: isEmbedded ? '' : 'p-6xl', 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, font: versionStyle.descriptionWeight, align: align, ...descriptionStyle, children: description })) : null] }));
     });
 
     const DEFAULT_SLOT_NAME = null;
@@ -334,7 +334,9 @@
             // fix svg gradient color
             return (jsx("img", { className: className, src: href, alt: alt, title: title, "aria-hidden": "true", width: width, height: height, style: getInlineStyle(className, height) }));
         }
-        return (jsx(Background, { className: className, children: jsxs("svg", { className: style(getSvgSize(width), svgUseStyleMap[iconVersion], iconVersion === 'white' ? 'invert' : '', imageClassName), width: width, height: height, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: href, xlinkHref: href })] }) }));
+        return (jsx(Background, { className: className, children: jsxs("svg", { className: style(getSvgSize(width), svgUseStyleMap[iconVersion], {
+                    invert: iconVersion === 'white',
+                }, imageClassName), width: width, height: height, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: href, xlinkHref: href })] }) }));
     });
     const getInlineStyle = (className, height) => {
         if (className?.includes('h-')) {
@@ -541,7 +543,9 @@
             return '';
         }
         const withTextStyle = `${aboveText ? 'py-2.5 px-9' : 'py-4 px-9'}`;
-        return style('group/btn items-center justify-center', isWithText(props) ? withTextStyle : 'h-12 w-12 m-auto', rounded ? 'rounded-full' : '');
+        return style('group/btn items-center justify-center', isWithText(props) ? withTextStyle : 'h-12 w-12 m-auto', {
+            'rounded-full': rounded,
+        });
     };
     const isWithText = ({ text, aboveText, appendLeft }) => Boolean(text || aboveText || !appendLeft);
 
@@ -594,40 +598,64 @@
         const iconVersion = version === 'primary' ? 'white' : 'black';
         const className = 'w-12 h-12 min-h-12 min-w-12 flex items-center justify-center';
         const bgBackwardButton = version === 'primary' ? 'bg-primary-main' : 'bg-white';
-        return (jsxs("div", { className: style(alwaysVisible ? 'flex' : 'hidden sm:flex', 'items-center gap-s'), children: [jsx("div", { className: style(getRegularButtonClasses({ className, rounded: true }), bgBackwardButton), onClick: handleClick, children: jsx(Img, { className: "w-4 h-4", image: {
+        const visible = alwaysVisible ? 'flex' : 'hidden sm:flex';
+        return (jsxs("div", { className: style(visible, 'items-center gap-s'), children: [jsx("div", { className: style(getRegularButtonClasses({ className, rounded: true }), bgBackwardButton), onClick: handleClick, children: jsx(Img, { className: "w-4 h-4", image: {
                             icon: 'ArrowLeftIcon',
                             iconVersion: iconVersion,
                         } }) }), jsx(LinkButton, { version: "link", className: "group-data-secondary:text-white", text: text, ariaLabel: text, onClick: handleClick, type: "button" })] }));
     }
 
+    const INITIAL_MOBILE_MODE = true;
+
+    const useMobileMode = () => {
+        const mq = `(max-width: 1024px)`;
+        const [isMobileMode, setIsMobileMode] = useState(INITIAL_MOBILE_MODE);
+        useEffect(() => {
+            const mqList = globalThis.matchMedia?.(mq);
+            const mqHandler = () => {
+                setIsMobileMode(Boolean(mqList?.matches));
+            };
+            mqList?.addEventListener('change', mqHandler);
+            if (mqList?.matches) {
+                setIsMobileMode(Boolean(mqList.matches));
+            }
+            return () => {
+                mqList?.removeEventListener('change', mqHandler);
+            };
+        }, []);
+        return isMobileMode;
+    };
+
     const imageAlignmentMap = {
         start: '@xl:self-start',
         center: '@xl:self-center',
         end: '@xl:self-end',
     };
-    const BaseTile = JSX(({ className, version = 'primary', defaultPadding, padding = '', title, insetTitle, buttons, leftImage, rightImage, imageAlign, isImageAlwaysOnRight = false, isImageSecondary = false, backwardButton, children, ...rest }) => {
+    const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('shrink-1/2 justify-self-center', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
+
+    const BaseTile = JSX(({ className, version = 'primary', defaultPadding, padding = '', title, buttons, leftImage, rightImage, imageAlign, insetTitle, isImageAlwaysOnRight = false, isImageSecondary = false, backwardButton, children, ...rest }) => {
+        const isMobile = useMobileMode();
         const router = useRouter();
-        const handleClick = useCallback(() => {
-            router.back();
-        }, []);
+        const handleClick = useCallback(() => router.back(), []);
         const backwardButtonText = rest.options?.page?.common?.backwardButton;
-        return (jsxs("div", { className: getStyle$1(padding, defaultPadding, className), children: [backwardButton
-                    ? renderBackwardButton({ version, handleClick, text: backwardButtonText })
-                    : null, getTitle(title), jsxs("div", { className: style('grow relative flex flex-col @xl:flex-row gap-3xl w-full', leftImage ? 'self-start @xl:w-auto' : ''), children: [renderImageContainer(leftImage, { imageAlign, className: 'mx-auto' }), jsxs("div", { className: style('grid gap-3xl', rightImage ? '@xl:grid-cols-2 auto-cols-fr' : '', leftImage ? '' : 'grow', 'h-full', //? fix issue https://github.com/redneckz/temp_wcms/issues/1254
-                            'auto-rows-[max-content_1fr]', //? fix issue https://github.com/redneckz/temp_wcms/issues/1324
-                            'items-center md:items-stretch'), children: [jsxs("div", { className: "grow space-y-lg min-w-fit", children: [insetTitle, children] }), renderUnitBlock(renderChildren({ ...rest, extraProps: { className: '@container-normal' } })), renderImageContainer(rightImage, {
-                                    className: style('@xl:justify-self-end @xl:col-start-2', buttons ? rowSpanStyle(isImageAlwaysOnRight) : '', positionStyle(isImageAlwaysOnRight), imageSecondaryStyle(isImageSecondary)),
+        const isBackBtn = backwardButton && !isMobile;
+        return (jsxs("div", { className: style('relative flex flex-col gap-3xl overflow-hidden', padding || defaultPadding, className), children: [isBackBtn && renderBackwardButton({ version, handleClick, text: backwardButtonText }), title ? jsx("div", { className: "relative h-full", children: title }) : null, jsxs("div", { className: style('grow relative flex flex-col @xl:flex-row gap-3xl w-full', {
+                        'self-start @xl:w-auto': leftImage,
+                    }), children: [renderImageContainer(leftImage, { imageAlign, className: 'mx-auto' }), jsxs("div", { className: style('grid gap-3xl items-center md:items-stretch', {
+                                '@xl:grid-cols-2 auto-cols-fr': rightImage,
+                                grow: !leftImage,
+                            }, 'h-full', //? fix issue https://github.com/redneckz/temp_wcms/issues/1254
+                            'auto-rows-[max-content_1fr]'), children: [jsxs("div", { className: "grow space-y-lg min-w-fit", children: [insetTitle, children] }), renderUnitContainer(renderChildren({ ...rest, extraProps: { className: '@container-normal' } })), renderImageContainer(rightImage, {
+                                    className: style('@xl:justify-self-end @xl:col-start-2', {
+                                        [imageAlwaysOnRightContainerStyle(isImageAlwaysOnRight)]: buttons,
+                                        'col-start-2 self-center': isImageAlwaysOnRight,
+                                        'hidden @xl:block': isImageSecondary,
+                                    }),
                                     imageAlign,
-                                }), renderButtons(buttons)] })] })] }));
-    });
-    const getTitle = (title) => (title ? jsx("div", { className: "relative h-full", children: title }) : null);
-    const getStyle$1 = (padding = '', defaultPadding = '', className = '') => style('relative flex flex-col gap-3xl overflow-hidden', padding || defaultPadding, className);
-    const rowSpanStyle = (isImageAlwaysOnRight) => isImageAlwaysOnRight ? 'row-span-2' : '@xl:row-span-2';
-    const positionStyle = (isImageAlwaysOnRight) => isImageAlwaysOnRight ? 'col-start-2 self-center' : '';
-    const renderButtons = (buttons) => buttons ? jsx("div", { className: "self-end", children: buttons }) : null;
-    const renderUnitBlock = (unitBlock) => unitBlock && unitBlock?.length ? (jsx("div", { className: "flex items-start justify-end", children: unitBlock })) : null;
-    const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('shrink-1/2 justify-self-center', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
-    const imageSecondaryStyle = (isImageSecondary) => isImageSecondary ? 'hidden @xl:block' : '';
+                                }), buttons ? jsx("div", { className: "self-end", children: buttons }) : null] })] })] }));
+    });
+    const imageAlwaysOnRightContainerStyle = (isImage) => style(isImage ? 'row-span-2' : '@xl:row-span-2');
+    const renderUnitContainer = (childrenBlocks) => childrenBlocks?.length ? (jsx("div", { className: "flex items-start justify-end", children: childrenBlocks })) : null;
 
     const sum = (list = []) => list.reduce((a, b) => a + b, 0);
 
@@ -1034,6 +1062,8 @@
         useAspects._impl = impl;
     };
 
+    const identity = (_) => _;
+
     const useForm = (initialState, { resetOnSubmit, onSubmit, } = {}) => {
         const [formState, setFormState] = useState(initialState);
         const [isDirtyForm, setDirtyForm] = useState(false);
@@ -1097,8 +1127,6 @@
         };
     }
 
-    const activeButtonStyleMap = 'text-white bg-primary-active';
-    const disabledButtonStyle = 'bg-main-gray text-main-disabled cursor-not-allowed';
     const buttonStyleMap = {
         primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
         secondary: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
@@ -1110,9 +1138,13 @@
     const Button = JSX(({ children, ...props }) => {
         const button = useButton();
         const { className, version = 'primary', active, disabled, type = 'button', rounded = true, role, onClick, } = button(props);
-        return (jsx("button", { className: style('font-sans px-9 py-4', 'flex justify-center items-center gap-xs', active ? activeButtonStyleMap : '', disabled ? disabledButtonStyle : '', !active && !disabled
+        return (jsx("button", { className: style('font-sans px-9 py-4', 'flex justify-center items-center gap-xs', {
+                'text-white bg-primary-active': active,
+                'bg-main-gray text-main-disabled cursor-not-allowed': disabled,
+                'rounded-md': rounded,
+            }, !active && !disabled
                 ? style(buttonStyleMap[version], secondaryButtonStyleMap[version])
-                : '', rounded ? 'rounded-md' : '', className), type: type, role: role, onClick: onClick, children: children }));
+                : '', className), type: type, role: role, onClick: onClick, children: children }));
     });
 
     const CloseButton = JSX(({ className, onClose }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-2xs bg-transparent border-none', className), onClick: onClose, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", type: "button", children: jsx(Icon, { name: "CloseIcon", width: "20", height: "20", iconVersion: "gray" }) })));
@@ -1179,12 +1211,12 @@
             onChange && onChange(!value);
         }, [onChange, disabled, value]);
         const icon = isRadio ? (jsx("div", { className: "absolute left-1 w-3 h-3 rounded-full bg-primary-main" })) : (jsx(SVG, { paths: CHECK_PATHS, className: "absolute left-1 ml-px block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" }));
-        return (jsx("div", { className: className, children: jsxs("label", { className: style('flex items-center relative group/box', getCursorStyle(disabled)), onClick: handleChange, children: [jsx("div", { className: style(defaultCheckStyle, 'm-0', isRadio ? 'rounded-full border-2' : checkboxStyle(value), !disabled && value ? 'border-primary-main' : 'border-gray', disabled ? 'bg-main-disabled' : 'group-hover/box:border-primary-hover'), role: role(isRadio), "aria-checked": Boolean(value), "aria-disabled": Boolean(disabled) }), value ? icon : null, renderText$1(text)] }) }));
+        return (jsx("div", { className: className, children: jsxs("label", { className: style('flex items-center relative group/box', getCursorStyle(disabled)), onClick: handleChange, children: [jsx("div", { className: style(defaultCheckStyle, 'm-0', isRadio ? 'rounded-full border-2' : checkboxStyle(value), !disabled && value ? 'border-primary-main' : 'border-gray', disabled ? 'bg-main-disabled' : 'group-hover/box:border-primary-hover'), role: role(isRadio), "aria-checked": Boolean(value), "aria-disabled": Boolean(disabled) }), value ? icon : null, renderText$2(text)] }) }));
     });
-    const renderText$1 = (text) => text ? (jsx("div", { className: "ml-s", children: jsx(Text, { size: "text-l", font: "font-light", children: text }) })) : null;
+    const renderText$2 = (text) => text ? (jsx("div", { className: "ml-s", children: jsx(Text, { size: "text-l", font: "font-light", children: text }) })) : null;
     const getCursorStyle = (disabled = false) => (disabled ? 'cursor-not-allowed' : 'cursor-pointer');
     const role = (isRadio = false) => (isRadio ? 'radio' : 'checkbox');
-    const checkboxStyle = (value = false) => style('rounded border', value ? 'bg-primary-main' : '');
+    const checkboxStyle = (value = false) => style('rounded border', { 'bg-primary-main': value });
 
     const CheckboxWithError = JSX(({ className, text, value, key, disabled, error, onChange }) => (jsxs("div", { className: style('shrink-0 w-full', className), children: [jsx(Checkbox, { text: text, value: value, disabled: disabled, onChange: onChange }, key), renderErrorText(error)] })));
 
@@ -1260,7 +1292,9 @@
                 if (onChange) {
                     onChange(option);
                 }
-            }, children: [jsx("span", { className: "min-h-6", children: formatOption(option) }), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", iconVersion: iconVersion, className: style('absolute right-4 pt-3xs', option.key === value?.key ? '' : 'hidden') })] }, option.key))) })) : null);
+            }, children: [jsx("span", { className: "min-h-6", children: formatOption(option) }), jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", iconVersion: iconVersion, className: style('absolute right-4 pt-3xs', {
+                        hidden: option.key !== value?.key,
+                    }) })] }, option.key))) })) : null);
 
     function useSelectPopup({ isOpen, options, value, query, onChange, onClose, iconVersion, }) {
         const popup = usePopupManager();
@@ -1309,9 +1343,9 @@
             onClose: handleClose,
             iconVersion,
         });
-        return (jsxs("div", { className: style('space-y-xs', className), children: [renderLabel(label), jsxs("div", { className: style('relative', hasOpen ? 'z-20' : 'z-10'), ref: inputRef, children: [jsxs("div", { className: style('h-14 [&>*]:p-m pr-8 text-l flex items-center justify-between text-primary-text relative z-10 overflow-hidden', getStyle(isBorder, valid, isDisabled)), onClick: hasOpen ? handleClose : open, children: [jsx("p", { className: "line-clamp-2 text-ellipsis", children: formatOption(value) || placeholder }), renderIcon$1(hasOpen, iconVersion)] }), isSearch && hasOpen ? (jsx("div", { className: style('absolute top-0 w-full z-20'), children: jsx(Input, { type: "text", autoFocus: true, value: query, onChange: setQuery }) })) : null] })] }));
+        return (jsxs("div", { className: style('space-y-xs', className), children: [renderLabel(label), jsxs("div", { className: style('relative', hasOpen ? 'z-20' : 'z-10'), ref: inputRef, children: [jsxs("div", { className: style('h-14 [&>*]:p-m pr-8 text-l flex items-center justify-between text-primary-text relative z-10 overflow-hidden', getStyle(isBorder, valid, isDisabled)), onClick: hasOpen ? handleClose : open, children: [jsx("p", { className: "line-clamp-2 text-ellipsis", children: formatOption(value) || placeholder }), renderIcon$2(hasOpen, iconVersion)] }), isSearch && hasOpen ? (jsx("div", { className: style('absolute top-0 w-full z-20'), children: jsx(Input, { type: "text", autoFocus: true, value: query, onChange: setQuery }) })) : null] })] }));
     });
-    const renderIcon$1 = (isOpen, iconVersion) => (jsx(Icon, { className: style('absolute right-3 flex self-center', isOpen ? '' : 'rotate-180'), iconVersion: iconVersion, name: "ArrowUpIcon", width: "16", height: "16" }));
+    const renderIcon$2 = (isOpen, iconVersion) => (jsx(Icon, { className: style('absolute right-3 flex self-center', { 'rotate-180': !isOpen }), iconVersion: iconVersion, name: "ArrowUpIcon", width: "16", height: "16" }));
     const getStyle = (isBorder, valid, disabled) => style(isBorder ? 'border rounded-md ' : '', isBorder && !disabled ? 'hover:border-primary-hover' : '', disabled ? 'bg-main-divider' : 'cursor-pointer ', valid ? 'border-gray' : 'border-error');
 
     const noop = () => {
@@ -1346,7 +1380,9 @@
     };
     const checkIsToday = (currentDate, today) => today && currentDate.toDateString() === today.toDateString();
     const checkIsDisabled = (currentDate, min, max) => (min && currentDate.getTime() < min.getTime()) || (max && currentDate.getTime() > max.getTime());
-    const getDayStyles = (isToday, isDisabled) => style('p-s text-center rounded-md border', isToday ? '' : 'border-transparent hover:bg-gray', isDisabled ? 'text-gray hover:bg-transparent' : 'cursor-pointer');
+    const getDayStyles = (isToday, isDisabled) => style('p-s text-center rounded-md border', {
+        'border-transparent hover:bg-gray': !isToday,
+    }, isDisabled ? 'text-gray hover:bg-transparent' : 'cursor-pointer');
 
     const WEEK_DAYS = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
     const Calendar = JSX(({ today, currentMonth, currentYear, min, max, onDateSelect = noop }) => {
@@ -1997,27 +2033,6 @@
                 : _ === (dataValue?.key ?? dataValue);
         }));
 
-    const INITIAL_MOBILE_MODE = true;
-
-    const useMobileMode = () => {
-        const mq = `(max-width: 1024px)`;
-        const [isMobileMode, setIsMobileMode] = useState(INITIAL_MOBILE_MODE);
-        useEffect(() => {
-            const mqList = globalThis.matchMedia?.(mq);
-            const mqHandler = () => {
-                setIsMobileMode(Boolean(mqList?.matches));
-            };
-            mqList?.addEventListener('change', mqHandler);
-            if (mqList?.matches) {
-                setIsMobileMode(Boolean(mqList.matches));
-            }
-            return () => {
-                mqList?.removeEventListener('change', mqHandler);
-            };
-        }, []);
-        return isMobileMode;
-    };
-
     const NotFound = JSX(({ title, description }) => {
         const isMobileMode = useMobileMode();
         return (jsxs("div", { className: "bg-white p-6xl py-20 flex gap-s flex-col @xl:items-center", children: [jsx(Img, { image: { icon: 'MagnifierIcon', iconVersion: 'normal' }, width: "120", height: "120" }), jsx(Headline, { title: title, description: description, headlineVersion: isMobileMode ? 'L' : 'S', isEmbedded: true, className: "space-y-s" })] }));
@@ -2100,7 +2115,9 @@
             ...(isVerticalList ? getContainerHeight(minHeight) : {}),
             gap: `${gap}px`,
         };
-        return (jsx("div", { className: style('box-border overflow-auto no-scrollbar', listType, className), style: containerStyle, ref: containerRef, role: "list", children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: style(snapAlign, visibleItemCount ? childStyleMap[visibleItemCount - 1] : '', isVerticalList ? 'h-full' : '', itemClassName), style: isHorizontalList ? getContainerOffset(padding / 4) : {}, activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
+        return (jsx("div", { className: style('box-border overflow-auto no-scrollbar', listType, className), style: containerStyle, ref: containerRef, role: "list", children: mapChildren((child, idx) => (jsx(SwipeListItem, { className: style(snapAlign, visibleItemCount ? childStyleMap[visibleItemCount - 1] : '', {
+                    'h-full': isVerticalList,
+                }, itemClassName), style: isHorizontalList ? getContainerOffset(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 getContainerOffset = (padding, additionalPadding = 0) => ({
@@ -2322,7 +2339,7 @@
         const [visibleBlocks, hiddenBlocks] = topItemsCount > 0
             ? [blocksToRender.slice(0, topItemsCount), blocksToRender.slice(topItemsCount)]
             : [blocksToRender, []];
-        return (jsxs("div", { className: style('space-y-2xs', blocksToRender.length ? '' : 'hidden'), children: [jsxs("div", { className: style(resultsGridStyle), children: [renderBlocksList(visibleBlocks, { ...rest.options, parent: block }), isOdd(visibleBlocks.length) ? jsx(AdTile, { className: "col-span-6", ...rest }) : null] }), jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(FoldableSection, { className: style(resultsGridStyle), isUnfolded: isUnfolded, children: [renderBlocksList(hiddenBlocks, { ...rest.options, parent: block }), isOdd(hiddenBlocks.length) ? jsx(AdTile, { className: "col-span-6", ...rest }) : null] })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(DefaultFoldButton, { className: style(topItemsCount < 1 ? 'hidden' : ''), disabled: !hiddenBlocks?.length, label: label, icon: ICONS$1[Number(isUnfolded)], dataTheme: rest.options?.page?.colorPalette, onClick: onToggle })) })] }));
+        return (jsxs("div", { className: style('space-y-2xs', { hidden: !blocksToRender.length }), children: [jsxs("div", { className: style(resultsGridStyle), children: [renderBlocksList(visibleBlocks, { ...rest.options, parent: block }), isOdd(visibleBlocks.length) ? jsx(AdTile, { className: "col-span-6", ...rest }) : null] }), jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(FoldableSection, { className: style(resultsGridStyle), isUnfolded: isUnfolded, children: [renderBlocksList(hiddenBlocks, { ...rest.options, parent: block }), isOdd(hiddenBlocks.length) ? jsx(AdTile, { className: "col-span-6", ...rest }) : null] })), renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(DefaultFoldButton, { className: style({ hidden: topItemsCount < 1 }), disabled: !hiddenBlocks?.length, label: label, icon: ICONS$1[Number(isUnfolded)], dataTheme: rest.options?.page?.colorPalette, onClick: onToggle })) })] }));
     };
 
     const FilteredBlocks = JSX(({ blocksSection, blocksToRender = [], notFound, ...rest }) => {
@@ -2472,7 +2489,9 @@
 
     const bonusBenefitStyles = 'justify-between p-m h-full border border-gray';
 
-    const renderBonusBenefit = (cardTextAlign) => ({ icon, title, description }, i) => (jsxs("div", { className: style('flex flex-col gap-1', bonusBenefitStyles, !description && !title ? 'justify-center' : ''), children: [title ? (jsx(Text, { size: "text-h6", font: "font-normal", align: cardTextAlign, children: title })) : null, icon ? jsx(Img, { image: icon, height: "180", className: "w-auto mx-auto" }) : null, description ? (jsx(Text, { size: "text-h6", font: "font-normal", align: cardTextAlign, children: description })) : null] }, String(i)));
+    const renderBonusBenefit = (cardTextAlign) => ({ icon, title, description }, i) => (jsxs("div", { className: style('flex flex-col gap-1', bonusBenefitStyles, {
+            'justify-center': !description && !title,
+        }), children: [title ? (jsx(Text, { size: "text-h6", font: "font-normal", align: cardTextAlign, children: title })) : null, icon ? jsx(Img, { image: icon, height: "180", className: "w-auto mx-auto" }) : null, description ? (jsx(Text, { size: "text-h6", font: "font-normal", align: cardTextAlign, children: description })) : null] }, String(i)));
 
     const renderBonusBenefits = (bonusBenefits, _columnsCount, _cardTextAlign) => jsx(SwipeListControl, { children: bonusBenefits.map(renderBonusBenefit(_cardTextAlign)) });
 
@@ -3582,7 +3601,9 @@
                 version: _?.version ?? version,
             };
         });
-        const buttonClassName = style('border border-solid hover:border-transparent group-data-primary:border-main-divider border-main-divider group-data-gray:border-green group/media', showButtonText && hasText ? '' : 'basis-auto', getStretchedStyle(stretched));
+        const buttonClassName = style('border border-solid hover:border-transparent border-main-divider', 'group-data-primary:border-main-divider group-data-gray:border-green group/media', {
+            'basis-auto': !showButtonText && !hasText,
+        }, getStretchedStyle(stretched));
         return (jsxs("div", { className: style('flex flex-col gap-m xl:gap-xs', className), children: [jsx("div", { className: "flex gap-xs", children: renderButtonsSection(buttons, {
                         className: getClassName(hasText ?? false, stretched ?? false, showButtonText),
                         buttonClassName,
@@ -3623,9 +3644,7 @@
             }
         }, type: "button", ...(isUnfolded ? getAspectsAttributes(data) : {}), children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16" })] }));
 
-    const isRateRow = (rateRow) => {
-        return typeof rateRow?.minMonths === 'number' && typeof rateRow?.maxMonths === 'number';
-    };
+    const isRateRow = (rateRow) => typeof rateRow?.minMonths === 'number' && typeof rateRow?.maxMonths === 'number';
 
     const numberRange = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
 
@@ -3981,9 +4000,7 @@
         currencyRatesSell.push({ currency: { currency: Currency.RUB } });
         return (jsx(BlockWrapper, { className: style('box-border min-h-80', className), ...rest, children: jsx(BaseTile, { className: "h-full", title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex w-full gap-6xl flex-wrap @lg:flex-nowrap", children: [jsxs("div", { className: "w-full @2xl:w-auto @5xl:w-1/2", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-xl", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { address: exchangeRates?.address })] }), jsx(ExchangeCurrencyCalculator, { className: "grow w-1/2", currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })] }) }) }));
     });
-    const getCurrencyRates = (currencies) => {
-        return currencies?.filter((_) => [1, 2, 3].includes(_?.currency?.id)) || [];
-    };
+    const getCurrencyRates = (currencies) => currencies?.filter((_) => [1, 2, 3].includes(_?.currency?.id)) || [];
 
     const LinkList = JSX(({ className = '', items }) => {
         const link = useLink();
@@ -4041,8 +4058,8 @@
 
     const Contacts = JSX(({ className = '', items = [] }) => items?.length ? (jsx("div", { className: style('space-y-m', className), children: items.map(renderContactsGroup) })) : null);
     const renderContactsGroup = (item, i) => (jsxs("div", { className: "space-y-m", children: [jsx("div", { children: jsx(Text, { size: "text-l", font: "font-medium", children: item?.title }) }), jsx("div", { className: "space-y-m", children: item.items?.map(renderContact) })] }, String(i)));
-    const renderContact = (item, i) => (jsxs("div", { className: "space-y-2xs", children: [jsx("div", { children: renderText(item.type, item.text) }), jsx(Paragraph, { size: "text-s", font: "font-light", color: "text-secondary-text", children: item.description })] }, String(i)));
-    const renderText = (type, text = '') => {
+    const renderContact = (item, i) => (jsxs("div", { className: "space-y-2xs", children: [jsx("div", { children: renderText$1(item.type, item.text) }), jsx(Paragraph, { size: "text-s", font: "font-light", color: "text-secondary-text", children: item.description })] }, String(i)));
+    const renderText$1 = (type, text = '') => {
         switch (type) {
             case 'tel':
                 return (jsx("a", { className: "text-primary-text hover:text-primary-main no-underline", href: `tel:${formatTel(text)}`, children: jsx(Text, { size: "text-h6", children: text }) }));
@@ -4283,9 +4300,7 @@
         };
         return props.reportSource?.__html && props.text ? (jsxs("div", { role: "listitem", children: [jsx(ReportDialogButton, { ...commonProps, href: isLinkDoc(props) ? props?.href : props?.attachment?.src }), jsx(RichText, { __html: props?.__html })] }, String(i))) : null;
     };
-    const isLinkDoc = (data) => {
-        return 'href' in data;
-    };
+    const isLinkDoc = (data) => 'href' in data;
 
     const MobileAppTile = UniBlock(({ className, padding, align = 'text-left', buttons = [], description, image, __html, headingType, qr, additionalDescription = '', title = 'Мобильное приложение', version = 'primary', ...rest }) => {
         const containerStyle = version === 'secondary' ? 'p-m min-w-32' : 'min-w-24';
@@ -4695,9 +4710,7 @@
         const icons = ['ArrowDownIcon', 'ArrowUpIcon'];
         return (jsxs("div", { className: "flex space-x-lg", children: [onlyOffice ? (jsx(LinkButton, { version: "transparent", className: "text-secondary-text [&>*]:p-0", appendRight: jsx(Icon, { name: icons[Number(isUnfolded)], width: "16", height: "16" }), text: labels[Number(isUnfolded)], onClick: onToggle })) : null, jsx(LinkButton, { version: "transparent", className: "text-secondary-text [&>*]:p-0", onClick: reset, children: renderBtnInner() })] }));
     };
-    const renderBtnInner = () => {
-        return (jsxs("div", { className: "flex items-center", children: ["\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440", jsx(Icon, { name: "CloseIcon", width: "16", height: "16", className: "ml-2xs" })] }));
-    };
+    const renderBtnInner = () => (jsxs("div", { className: "flex items-center", children: ["\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440", jsx(Icon, { name: "CloseIcon", width: "16", height: "16", className: "ml-2xs" })] }));
 
     const defaultEmptyFunction = () => void 0;
     const defaultFilterItems = () => [];
@@ -5019,11 +5032,9 @@
         }
         return (jsxs("div", { className: "bg-white col-span-12 p-3xl sm:border-yellow sm:border", children: [jsx("div", { className: "sm:flex sm:justify-between", children: jsxs("div", { children: [jsx(Text, { size: "text-h4", children: "\u0423\u0434\u0430\u043B\u0435\u043D\u043D\u043E\u0435 \u0440\u0430\u0431\u043E\u0447\u0435\u0435 \u043C\u0435\u0441\u0442\u043E" }), address ? (jsxs("div", { className: "flex pb-xl pt-xs gap-2xs", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24" }), jsx(Text, { size: "text-l", children: address })] })) : null] }) }), jsx("div", { className: "hidden sm:block", children: renderCardContent({
                         workScheduleDescription,
-                    }) }), jsx(Foldable, { className: "block sm:hidden", renderFoldableSection: ({ isUnfolded }) => {
-                        return (jsx(FoldableSection, { isUnfolded: isUnfolded, children: renderCardContent({
-                                workScheduleDescription,
-                            }) }));
-                    }, 
+                    }) }), jsx(Foldable, { className: "block sm:hidden", renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { isUnfolded: isUnfolded, children: renderCardContent({
+                            workScheduleDescription,
+                        }) })), 
                     //** TODO: remove styles with refactoring  DefaultFoldButton*/
                     renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({ isUnfolded, onToggle }) })] }, String(i)));
     };
@@ -5134,13 +5145,9 @@
     const MAX = 365;
     const RentalPeriod = JSX(({ days, setDays }) => (jsxs("div", { className: "order-1", children: [jsx(Text, { size: "text-m", font: "font-light", children: "\u0421\u0440\u043E\u043A \u0430\u0440\u0435\u043D\u0434\u044B" }), jsx(InputRange, { min: MIN, max: MAX, value: days, items: ITEMS, onChange: setDays })] })));
 
-    const SafeBoxCases = JSX(({ caseVolumes = [], selectedCaseVolume, onSelectedCaseVolume, safeBoxCases = [], selectedBoxSize, onSelectedBoxSize, }) => {
-        return (jsxs("div", { className: "flex flex-col @xl:flex-row gap-m order-1", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: caseVolumes, fieldLabel: "volume", selected: selectedCaseVolume, setSelected: onSelectedCaseVolume, label: "\u0420\u0430\u0437\u043C\u0435\u0440", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0430\u0437\u043C\u0435\u0440" }) }), jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: safeBoxCases, fieldLabel: "safeBoxCasesSize", selected: selectedBoxSize, setSelected: onSelectedBoxSize, label: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B \u044F\u0447\u0435\u0439\u043A\u0438, \u043C\u043C (\u0412\u0445\u0428\u0445\u0414)", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440 \u044F\u0447\u0435\u0439\u043A\u0438" }) })] }));
-    });
+    const SafeBoxCases = JSX(({ caseVolumes = [], selectedCaseVolume, onSelectedCaseVolume, safeBoxCases = [], selectedBoxSize, onSelectedBoxSize, }) => (jsxs("div", { className: "flex flex-col @xl:flex-row gap-m order-1", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: caseVolumes, fieldLabel: "volume", selected: selectedCaseVolume, setSelected: onSelectedCaseVolume, label: "\u0420\u0430\u0437\u043C\u0435\u0440", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0430\u0437\u043C\u0435\u0440" }) }), jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: safeBoxCases, fieldLabel: "safeBoxCasesSize", selected: selectedBoxSize, setSelected: onSelectedBoxSize, label: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B \u044F\u0447\u0435\u0439\u043A\u0438, \u043C\u043C (\u0412\u0445\u0428\u0445\u0414)", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440 \u044F\u0447\u0435\u0439\u043A\u0438" }) })] })));
 
-    const SafeDepositRentalFields = JSX(({ regions, selectedRegion, branches, selectedBranch, days, selectedCaseVolume, selectedBoxSize, safeBoxCases, caseVolumes, onChange, onClick, }) => {
-        return (jsxs("div", { className: "contents @xl:block flex-1 space-y-xl", children: [jsx(RegionsAndBranches, { regions: regions, selectedRegion: selectedRegion, onSelectedRegion: (value) => onChange({ selectedRegion: value }), branches: branches, selectedBranch: selectedBranch, onSelectedBranch: onSelectedBranch(onChange) }), jsx(RentalPeriod, { days: days, setDays: (value) => onChange({ days: value }) }), jsx(SafeBoxCases, { caseVolumes: caseVolumes, selectedCaseVolume: selectedCaseVolume, onSelectedCaseVolume: onSelectedCaseVolume(onChange), safeBoxCases: safeBoxCases, selectedBoxSize: selectedBoxSize, onSelectedBoxSize: (value) => onChange({ selectedBoxSize: value }) }), jsx("div", { className: "order-4", children: jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: "\u0422\u0438\u043F \u0434\u043E\u0433\u043E\u0432\u043E\u0440\u0430" }) }), jsxs("div", { className: "contents @md:flex justify-between items-center gap-m", children: [jsx(RadioButtons, {}), jsx(LinkButton, { text: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", version: "primary", onClick: onClick, className: "order-6" })] })] }));
-    });
+    const SafeDepositRentalFields = JSX(({ regions, selectedRegion, branches, selectedBranch, days, selectedCaseVolume, selectedBoxSize, safeBoxCases, caseVolumes, onChange, onClick, }) => (jsxs("div", { className: "contents @xl:block flex-1 space-y-xl", children: [jsx(RegionsAndBranches, { regions: regions, selectedRegion: selectedRegion, onSelectedRegion: (value) => onChange({ selectedRegion: value }), branches: branches, selectedBranch: selectedBranch, onSelectedBranch: onSelectedBranch(onChange) }), jsx(RentalPeriod, { days: days, setDays: (value) => onChange({ days: value }) }), jsx(SafeBoxCases, { caseVolumes: caseVolumes, selectedCaseVolume: selectedCaseVolume, onSelectedCaseVolume: onSelectedCaseVolume(onChange), safeBoxCases: safeBoxCases, selectedBoxSize: selectedBoxSize, onSelectedBoxSize: (value) => onChange({ selectedBoxSize: value }) }), jsx("div", { className: "order-4", children: jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: "\u0422\u0438\u043F \u0434\u043E\u0433\u043E\u0432\u043E\u0440\u0430" }) }), jsxs("div", { className: "contents @md:flex justify-between items-center gap-m", children: [jsx(RadioButtons, {}), jsx(LinkButton, { text: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", version: "primary", onClick: onClick, className: "order-6" })] })] })));
     const onSelectedBranch = (onChange) => (value) => {
         onChange({ selectedBranch: value, selectedCaseVolume: '', selectedBoxSize: '' });
     };
@@ -5153,9 +5160,7 @@
         const imageDescription = 'На рисунке изображена пачка листов\nформата А4';
         return (jsxs("div", { className: "contents @xl:flex flex-col justify-between gap-xl order-2", children: [jsxs("div", { className: "flex flex-col @xl:flex-row gap-x-6xl gap-y-2xl order-5 @xl:order-none py-2xl @xl:py-0 border-t border-main-divider @xl:border-none", children: [renderTotal('Аренда за', days), renderTotal('Цена', price + ' ₽')] }), jsx("div", { className: "@xl:hidden order-3 mb-xs", children: jsx(Paragraph, { size: "text-s", font: "font-light", color: "text-secondary-text", children: imageDescription }) }), jsxs("div", { className: "flex flex-col items-center gap-s order-3 @xl:order-none mb-xl @xl:mb-0 bg-primary-main py-s @xl:p-3xl text-center", children: [jsx(Img, { image: { icon: 'PackA4Icon' }, className: "@xl:h-60" }), jsx("div", { className: "hidden @xl:inline opacity-80 whitespace-pre-line", children: jsx(Paragraph, { size: "text-s", font: "font-light", color: "text-white", children: imageDescription }) })] })] }));
     });
-    const renderTotal = (label, total) => {
-        return (jsxs("div", { className: "flex justify-between items-center gap-y-xs @xl:flex-col @xl:items-start", children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: label }), jsx("span", { className: "text-l @xl:text-h3 text-primary-text", children: total })] }));
-    };
+    const renderTotal = (label, total) => (jsxs("div", { className: "flex justify-between items-center gap-y-xs @xl:flex-col @xl:items-start", children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: label }), jsx("span", { className: "text-l @xl:text-h3 text-primary-text", children: total })] }));
     const calculatePrice = (days, tariffs) => {
         const tariffType = getTariffType(days);
         const tariffValue = tariffs?.find((_) => _.tariffType === String(tariffType))?.tariffValue || 0;
@@ -5254,31 +5259,48 @@
         dot: 'bg-white/80 group-data-primary:bg-secondary-text',
     };
 
-    const STEPS_SIZE_MAP = {
-        normal: { icon: 'h-11 w-11', image: 'h-14 w-14' },
-        small: { icon: 'h-12 w-12', image: 'h-14 w-14' },
-    };
-    const STEPS_TILE_DESCRIPTION_HEIGHT_MAP = {
-        normal: '',
-        small: 'min-h-6xl',
-    };
     const styleMap = STEPS_BLOCK_STYLE;
-    const StepsBlock = JSX(({ className = '', title, description, steps, buttons, size = 'normal', stepVersion = 'gray', version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border flex flex-col gap-xl', className), defaultPadding: "p-6xl", version: version, ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isEmbedded: true, align: "text-left" }), steps?.length ? (jsx("div", { className: "box-border", children: jsx("div", { className: "flex flex-col gap-6xl justify-between", children: steps.map(renderStep(size, stepVersion)) }) })) : null, renderButtonsSection(buttons, { isVertical: true })] })));
-    // TODO: Create universal function for this case
-    const renderStep = (size, stepVersion) => (step, i) => (jsx("div", { className: "contents", children: jsxs("div", { className: "flex flex-row items-center relative", children: [jsx("div", { className: "overflow-hidden flex flex-shrink-0 items-center", children: renderIconArea(size, stepVersion)(step, i) }), jsxs("div", { className: style('flex flex-col justify-center h-fit', STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]), children: [step.label ? (jsx(Paragraph, { size: "text-l", align: "text-left", children: step.label })) : null, step.description ? (jsx("div", { className: style('text-s font-light text-left', styleMap.description), children: step.description })) : null, jsx(RichText, { __html: step.__html })] })] }) }, String(i)));
-    const renderIconArea = (size, stepVersion) => (step, i) => {
+    const renderStepMobile = (stepsSize, version, stepVersion) => (step, i) => {
+        const { button, image } = step;
+        const styleStepMobile = button?.text && image?.src;
+        return (jsx("div", { className: "contents", children: jsxs("div", { className: style('flex items-center relative', image?.src ? 'flex-col' : 'flex-row'), children: [image?.src ? renderText(step) : null, jsx("div", { className: "overflow-hidden flex flex-shrink-0 items-center", children: renderIconArea(stepsSize, stepVersion)(step, i) }), jsxs("div", { className: style('flex flex-col justify-center h-fit w-full', {
+                            'min-h-6xl': stepsSize,
+                        }), children: [image?.src ? null : renderText(step), styleStepMobile ? (jsx(LinkButton, { className: "box-border py-s w-full max-w-60 mt-lg", version: version, ...button, children: button?.text })) : null] })] }) }, String(i)));
+    };
+    const renderIconArea = (stepsSize, stepVersion) => (step, i) => {
         const iconVersion = stepVersion === 'secondary' ? 'white' : 'color';
         const isImg = Boolean(step?.icon?.src);
-        const iconAreaSize = STEPS_SIZE_MAP[size][isImg ? 'image' : 'icon'];
+        const iconAreaSize = getIconAreaSize(stepsSize, isImg);
         const containerVersion = isImg ? stepVersion === 'transparent' : stepVersion;
-        return (jsx(BlockWrapper, { className: style(iconAreaSize, 'z-10 mr-s flex justify-center content-center rounded-md'), defaultPadding: "", version: containerVersion, children: jsx("span", { className: "flex max-w-full max-h-full items-center justify-center", children: isIcon(step?.icon) ? (jsx(Img, { image: { ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }, imageClassName: "max-w-full max-h-full", width: getIconSizeStyle(size), height: getIconSizeStyle(size) })) : (jsx("span", { className: style('text-h4', stepVersion === 'transparent' ? styleMap.iconText : getIconTextStyle(stepVersion)), children: i + 1 })) }) }));
+        const isImgSrc = step.image?.src;
+        return (jsx(BlockWrapper, { className: style({ 'w-32': Boolean(isImgSrc) }, 'z-10 mr-s flex justify-center content-center rounded-md', !isImgSrc && iconAreaSize), defaultPadding: "", version: containerVersion, children: jsx("div", { className: "flex max-w-full max-h-full items-center justify-center", children: renderIcon$1({ step, iconVersion, i, stepVersion }) }) }));
+    };
+    const renderText = (step) => {
+        const visibleStyle = Boolean(step.button?.text && step.image?.src);
+        return (jsxs("div", { className: style({
+                'mb-lg w-full': visibleStyle,
+            }), children: [step?.label ? (jsx(Paragraph, { size: "text-l", align: "text-left", children: step.label })) : null, step?.description ? (jsx("div", { className: style('text-s font-light text-left', styleMap.description), children: step.description })) : null, jsx(RichText, { __html: step.__html })] }));
+    };
+    const getIconAreaSize = (stepsSize, isImg) => {
+        return stepsSize && isImg ? 'h-14 w-14' : 'h-11 w-11';
+    };
+    const renderIcon$1 = ({ step, iconVersion, i, stepVersion, }) => {
+        if (isIcon(step?.icon)) {
+            return (jsx(Img, { image: { ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }, imageClassName: "max-w-full max-h-full", width: "24", height: "24" }));
+        }
+        else if (isIcon(step.image)) {
+            return jsx(Img, { image: { ...step.image, size: { width: 120, height: 120 } } });
+        }
+        return (jsx("span", { className: style('text-h4', stepVersion === 'transparent' ? styleMap.iconText : getIconTextStyle(stepVersion)), children: i + 1 }));
     };
-    const getIconSizeStyle = (size) => (size === 'normal' ? '38' : '24');
 
-    const StickyBottomMenuItem = JSX(({ isActive, item, onClick }) => {
-        return (jsxs("div", { className: style(isActive ? 'text-primary-main' : 'text-primary-text', `w-10 m-4 flex justify-center items-center flex-col text-xs cursor-pointer`), title: item?.title || '', onClick: onClick, children: [jsx(Icon, { className: "w-6 h-6", name: item?.icon?.icon, iconVersion: isActive ? 'color' : 'black' }), item?.title || ''] }));
+    const StepsBlock = JSX(({ className = '', title, description, steps = [], buttons, stepVersion = 'gray', version = 'primary', ...rest }) => {
+        const isBigSizeSteps = steps.length > 3;
+        return (jsxs(BlockWrapper, { className: style('box-border flex flex-col gap-xl', className), defaultPadding: "p-6xl", version: version, ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isEmbedded: true, align: "text-left" }), steps?.length ? (jsx("div", { className: "flex flex-col gap-6xl justify-between box-border", children: steps.map(renderStepMobile(isBigSizeSteps, version, stepVersion)) })) : null, renderButtonsSection(buttons, { isVertical: true })] }));
     });
 
+    const StickyBottomMenuItem = JSX(({ isActive, item, onClick }) => (jsxs("div", { className: style(isActive ? 'text-primary-main' : 'text-primary-text', `w-10 m-4 flex justify-center items-center flex-col text-xs cursor-pointer`), title: item?.title || '', onClick: onClick, children: [jsx(Icon, { className: "w-6 h-6", name: item?.icon?.icon, iconVersion: isActive ? 'color' : 'black' }), item?.title || ''] })));
+
     const StickyBottomMenuDialog = JSX(({ className, head, children, onClose, onClick }) => {
         const { close } = useDialogManager();
         const handleClose = useCallback(() => {
@@ -5680,7 +5702,7 @@
         }, [tabsCounted]);
         return (jsxs(BlockWrapper, { className: style({ 'sticky top-1 z-20': isSticky && isEveryLink }, className), defaultPadding: "p-0", block: block, ...rest, children: [renderTabsLayout({
                     className: style({
-                        'pb-1': Boolean(block?.slots) && tabsType === 'default',
+                        'pb-1': block?.slots && tabsType === 'default',
                         'sticky top-1 z-20': isSticky && !isEveryLink,
                     }),
                     items: getItems(tabs, tabsCounted),
@@ -5790,11 +5812,9 @@
         return jsx(EmbeddableCellInner, { ...cellProps, ...rest });
     };
 
-    const TariffsTableCell = JSX(({ cells, rowIdx, cellIdx, setTableInner, tableInner, openTableInnerIdx, setOpenTableInnerIdx, }) => {
-        return (jsx("div", { className: "w-80 flex-grow flex flex-col gap-m @4xl:gap-lg", role: "cell", children: cells?.length
-                ? cells.map((_, i) => (jsx(RenderCellInner, { cell: _, fieldIdx: i, rowIdx: rowIdx, cellIdx: cellIdx, setTableInner: setTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: setOpenTableInnerIdx }, String(i))))
-                : null }));
-    });
+    const TariffsTableCell = JSX(({ cells, rowIdx, cellIdx, setTableInner, tableInner, openTableInnerIdx, setOpenTableInnerIdx, }) => (jsx("div", { className: "w-80 flex-grow flex flex-col gap-m @4xl:gap-lg", role: "cell", children: cells?.length
+            ? cells.map((_, i) => (jsx(RenderCellInner, { cell: _, fieldIdx: i, rowIdx: rowIdx, cellIdx: cellIdx, setTableInner: setTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: setOpenTableInnerIdx }, String(i))))
+            : null })));
 
     const COLUMN_WIDTH = 140;
     const getHorizontalShift = (columns, activeColumnIndex) => sum(columns.slice(0, activeColumnIndex).map((_) => _?.cols?.length ?? 1)) * COLUMN_WIDTH;
@@ -5809,7 +5829,7 @@
                             transform: `translateX(-${getHorizontalShift(columns, activeColumnIndex)}px)`,
                         }, children: columns?.map((_, i) => (jsxs("div", { className: "flex flex-col flex-grow gap-s justify-center py-xl odd:bg-main-divider", children: [_?.data ? jsx(Text, { size: "text-xl", children: _.data }) : null, _?.cols ? renderCols(_.cols, activeColumnIndex) : null] }, `row${i}`))) }) })] }, String(rowIdx)));
     };
-    const renderCols = (cols, rowIndex) => cols?.length > 0 ? (jsx("div", { className: style('flex', rowIndex === 0 ? 'text-secondary-text' : ''), children: cols.map((data, i) => (jsx("div", { className: "w-20 mx-lg", children: jsx(Text, { size: "text-h6", font: "font-light", children: data }) }, String(i)))) })) : null;
+    const renderCols = (cols, rowIndex) => cols?.length > 0 ? (jsx("div", { className: style('flex', { 'text-secondary-text': rowIndex === 0 }), children: cols.map((data, i) => (jsx("div", { className: "w-20 mx-lg", children: jsx(Text, { size: "text-h6", font: "font-light", children: data }) }, String(i)))) })) : null;
 
     const InnerTableBodyItem = JSX(({ rows }) => (jsx(SwipeListContainer, { visibleItemCount: 0, snapAlign: "snap-start", children: jsx("div", { children: rows?.map(renderInnerTableRow(0)) }) })));
 
@@ -5823,7 +5843,9 @@
     const linkButtonVersion = 'link';
 
     const TableColor = (isEqual = false) => `${isEqual ? 'text-white' : 'text-secondary-text'}`;
-    const InnerTableHeader = JSX(({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (jsxs("div", { className: "flex justify-between items-center w-full py-lg", children: [currencies && currencies.length > 1 ? (jsx("div", { className: "flex bg-secondary-light p-2xs rounded-md", children: currencies.map((currency, idx) => (jsx("div", { className: style('rounded-md px-4 py-3 cursor-pointer', idx === activeTabIndex ? 'bg-primary-main' : ''), onClick: () => setActiveTabIndex(idx), children: jsx(Text, { size: "text-xl", font: "font-light", color: TableColor(idx === activeTabIndex), children: currency || idx + 1 }) }, currency))) })) : null, linkToPDF ? (jsx(LinkButton, { className: "text-primary-main", href: linkToPDF, version: linkButtonVersion, target: "_blank", appendLeft: jsx(Icon, { name: "DocDownloadIcon", iconVersion: "color", className: "mr-3xs", width: "20", height: "20" }), text: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })) : null] })));
+    const InnerTableHeader = JSX(({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (jsxs("div", { className: "flex justify-between items-center w-full py-lg", children: [currencies && currencies.length > 1 ? (jsx("div", { className: "flex bg-secondary-light p-2xs rounded-md", children: currencies.map((currency, idx) => (jsx("div", { className: style('rounded-md px-4 py-3 cursor-pointer', {
+                        'bg-primary-main': idx === activeTabIndex,
+                    }), onClick: () => setActiveTabIndex(idx), children: jsx(Text, { size: "text-xl", font: "font-light", color: TableColor(idx === activeTabIndex), children: currency || idx + 1 }) }, currency))) })) : null, linkToPDF ? (jsx(LinkButton, { className: "text-primary-main", href: linkToPDF, version: linkButtonVersion, target: "_blank", appendLeft: jsx(Icon, { name: "DocDownloadIcon", iconVersion: "color", className: "mr-3xs", width: "20", height: "20" }), text: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })) : null] })));
 
     const EMPTY_DATA$1 = 'Данных нет';
     const InnerTable = UniBlock(({ tableSource, pdfUrl, onClick }) => {
@@ -6015,7 +6037,9 @@
                 globalThis.document?.body.classList.remove('overflow-hidden');
             }
         }, [dialogs]);
-        return dialogs.length ? (jsx("div", { className: "fixed inset-0 z-50", role: "dialog", children: dialogs.map(({ dialog, id }, i) => (jsx("div", { className: style('absolute inset-0 overflow-x-hidden overflow-y-scroll no-scrollbar bg-black/50', i === dialogs.length - 1 ? '' : 'hidden'), children: dialog }, String(id || i)))) })) : null;
+        return dialogs.length ? (jsx("div", { className: "fixed inset-0 z-50", role: "dialog", children: dialogs.map(({ dialog, id }, i) => (jsx("div", { className: style('absolute inset-0 overflow-x-hidden overflow-y-scroll no-scrollbar bg-black/50', {
+                    hidden: i !== dialogs.length - 1,
+                }), children: dialog }, String(id || i)))) })) : null;
     });
 
     const PopupManager = JSX(() => {
@@ -6078,7 +6102,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.530";
+    const packageVersion = "0.14.532";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;