@redneckz/wildless-cms-uni-blocks 0.14.761 → 0.14.763

package/bundle/bundle.umd.js

@@ -234,25 +234,20 @@
     const isURL = (href) => Boolean(href?.includes(':'));
     const isLocalURL = (href, target) => Boolean(href && !isURL(href) && (!target || target === '_self'));
     const isHash = (href) => Boolean(href?.startsWith('#'));
-    const withoutQuery = (href) => (href || '').replace(/\?.*/, '').replace(/\/$/, '');
+    const withoutQuery = (href) => (href ?? '').replace(/\?.*/, '').replace(/\/$/, '');
     const joinPath = (...path) => path
         .filter(Boolean)
         .join('/')
         .replace(/\/+/g, '/')
-        .replace(/^(.+):\//, '$1://')
+        .replace(/^(.+):\//, '$1://') // TODO Череда очень странных преобрвзований
         .replace(/^file:/, 'file:/')
         .replace(/\/(\?|&|#[^!])/g, '$1')
         .replace(/\?/g, '&')
         .replace('&', '?');
-    const hasPrefix = (href, prefix) => {
-        if (!href || !prefix) {
-            return false;
-        }
-        if (href.startsWith(prefix)) {
-            return [prefix === '/', href === prefix, href[prefix.length] === '/'].some(Boolean);
-        }
-        return false;
-    };
+    const hasPrefix = (href) => (prefix) => Boolean(href &&
+        prefix &&
+        href.startsWith(prefix) &&
+        (prefix === '/' || href === prefix || href[prefix.length] === '/'));
 
     var url = /*#__PURE__*/Object.freeze({
         __proto__: null,
@@ -264,23 +259,20 @@
         hasPrefix: hasPrefix
     });
 
-    const PREFIX_API = '/api/';
-    const FILE_STORAGE_API = `${PREFIX_API}v1/storage`;
+    const API_PREFIX = '/api/';
+    const FILE_STORAGE_API = `${API_PREFIX}v1/storage`;
+    const DIRECT_HREF_PREFIXES = [projectSettings.CDN, API_PREFIX];
     const adjustHref = (router) => (href, basePath) => {
-        if ([
-            !href,
-            isURL(href),
-            isHash(href),
-            [projectSettings.CDN, PREFIX_API].some((_) => hasPrefix(href, _)),
-        ].some(Boolean)) {
+        if (isDirectHref(href)) {
             return href;
         }
         if (isUUID(href)) {
             return `${FILE_STORAGE_API}/${href}/attachment`;
         }
         const isRelativeToBase = href?.startsWith('/');
-        return joinPath(hasPrefix(href, basePath) ? '' : basePath, isRelativeToBase ? '/' : dirname(router.pathname), href);
+        return joinPath(hasPrefix(href)(basePath) ? '' : basePath, isRelativeToBase ? '/' : dirname(router.pathname), href);
     };
+    const isDirectHref = (href) => !href || isURL(href) || isHash(href) || DIRECT_HREF_PREFIXES.some(hasPrefix(href));
 
     const isOnlyDigits = (str) => str && !/\D/.test(str);
 
@@ -369,7 +361,7 @@
     });
 
     /** @deprecated */
-    const buttonStyleMap$1 = {
+    const buttonStyleMap = {
         primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
         secondary: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
         white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white active:text-primary-main',
@@ -392,7 +384,7 @@
     /** @deprecated */
     const buttonStyle$2 = 'text-center font-sans select-none';
     /** @deprecated */
-    const iconStyleMap = {
+    const iconStyleMap$1 = {
         primary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
         secondary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
         white: 'group-hover/btn:brightness-0 group-hover/btn:invert',
@@ -406,7 +398,7 @@
     const getRegularButtonClasses = ({ className, rounded, version, }) => [
         buttonStyle$2,
         'border border-transparent inline-block cursor-pointer no-underline focus:border-primary-text focus:border h-fit',
-        version ? buttonStyleMap$1[version] : '',
+        version ? buttonStyleMap[version] : '',
         rounded ? 'rounded-full' : 'rounded-md',
         className,
     ].join(' ');
@@ -487,7 +479,6 @@
     const adjustBase = (href, basePath = '') => href?.replace(basePath, '') || '/';
 
     function useLink() {
-        const basePath = getBasePath(env.SITE_URL);
         const router = useRouter();
         const { closeAll } = useDialogManager();
         return (props) => {
@@ -496,33 +487,21 @@
                 ...props,
                 href,
                 'aria-label': props.text,
-                onClick: handlerDecorator(handleHref({ ...props, href })),
+                onClick: handlerDecorator((ev) => {
+                    props.onClick?.(ev);
+                    const basePath = getBasePath(env.SITE_URL);
+                    if (isClientRouting(href, props.target, basePath)) {
+                        closeAll();
+                        ev?.preventDefault();
+                        router.push(adjustBase(href, basePath));
+                    }
+                }),
             };
         };
-        function handleHref({ href, target, onClick }) {
-            return (ev) => {
-                onClick?.(ev);
-                if (checkIsRemote(href, target, basePath)) {
-                    //? Native routing
-                    return;
-                }
-                closeAll();
-                //? Client routing
-                ev?.preventDefault();
-                router.push(adjustBase(href, basePath));
-            };
-        }
     }
-    const checkIsRemote = (href, target, basePath) => {
-        if (!isLocalURL(href, target)) {
-            return true;
-        }
-        const subPortals = env.SUB_PORTALS?.split(',');
-        if (subPortals?.some((_) => hasPrefix(href, _))) {
-            return true;
-        }
-        return !hasPrefix(href, basePath || '/');
-    };
+    const isClientRouting = (href, target, basePath) => isLocalURL(href, target) &&
+        !env.SUB_PORTALS?.split(',')?.some(hasPrefix(href)) &&
+        hasPrefix(href)(basePath || '/');
 
     const getAspectsAttributes = (data) => {
         try {
@@ -537,7 +516,7 @@
     const ButtonInner = JSX((props) => {
         const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
         const iconHideStyle = isWithText(props) && 'hidden lg:block';
-        return (jsxs("div", { className: style(buttonStyle$1(props), 'flex gap-xs'), children: [appendLeft ? (jsx("div", { className: style(iconHideStyle, iconStyleMap[version]), children: appendLeft })) : null, isWithText(props) ? (jsxs("div", { className: "whitespace-pre", children: [aboveText ? jsx("div", { className: "text-xs font-light text-left", children: aboveText }) : null, jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-3xs' : 'text-l'}`, children: text })] })) : null, appendRight ? (jsx("div", { className: style(iconHideStyle, iconStyleMap[version]), children: appendRight })) : null] }));
+        return (jsxs("div", { className: style(buttonStyle$1(props), 'flex gap-xs'), children: [appendLeft ? (jsx("div", { className: style(iconHideStyle, iconStyleMap$1[version]), children: appendLeft })) : null, isWithText(props) ? (jsxs("div", { className: "whitespace-pre", children: [aboveText ? jsx("div", { className: "text-xs font-light text-left", children: aboveText }) : null, jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-3xs' : 'text-l'}`, children: text })] })) : null, appendRight ? (jsx("div", { className: style(iconHideStyle, iconStyleMap$1[version]), children: appendRight })) : null] }));
     });
     const buttonStyle$1 = (props) => {
         const { version, aboveText, rounded } = props;
@@ -560,7 +539,6 @@
         className,
     ].join(' ');
 
-    /** @deprecated */
     const useFormSubmit = ({ method, href }) => useCallback((ev) => {
         if (method !== 'POST' || !href) {
             return;
@@ -580,7 +558,7 @@
         }
         document.body.appendChild(form);
         form.submit();
-    }, []);
+    }, [method, href]);
 
     /** @deprecated */
     const LinkButton = JSX(({ disabled, children, method = 'LINK', href, ...rest }) => {
@@ -593,6 +571,7 @@
     const RegularButton = JSX(({ className = '', href, rel, target, ariaLabel, version, rounded, onClick, type, data, children, text, }) => (jsx("a", { className: getRegularButtonClasses({ className, version, rounded }), href: href, rel: rel, target: target, "aria-label": ariaLabel || `Ссылка на ${text}`, role: href ? 'link' : 'button', onClick: onClick, type: type, ...getAspectsAttributes(data), children: children })));
     const DisabledButton = JSX(({ className, ariaLabel, version, rounded, children }) => (jsx("button", { type: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: -1, className: getDisabledButtonClasses({ className, rounded, version }), children: children })));
 
+    // TODO Заменить LinkButton на Button и применить RoundedIcon
     function renderBackwardButton({ version, handleClick, text = 'Вернуться назад', alwaysVisible = false, }) {
         if (!text) {
             return null;
@@ -1293,10 +1272,10 @@
 
     const Input = JSX(
     // eslint-disable-next-line max-lines-per-function
-    ({ key, className = '', id, name, type = 'text', label, placeholder, value = '', valid = true, children, onChange, onFocus, onBlur, pattern, autoFocus = false, isTextarea = false, disabled = false, }) => {
+    ({ key, className, id, name, type = 'text', label, placeholder, value = '', valid = true, pattern, autoFocus = false, isTextarea = false, disabled = false, children, onChange, onFocus, onBlur, }) => {
         const inputRef = useRef(null);
         const handleChange = useCallback((e) => {
-            const valueWithoutSpace = (e.target?.value || '').trimStart();
+            const valueWithoutSpace = (e.target?.value ?? '').trimStart();
             onChange && onChange(valueWithoutSpace);
         }, [onChange]);
         useEffect(() => {
@@ -1306,7 +1285,8 @@
         }, [autoFocus, inputRef]);
         const paddingStyle = children ? 'pr-3xl' : '';
         const validStyle = getValidStyle(valid);
-        return (jsxs("div", { className: style('relative', className), children: [jsxs("label", { className: "space-y-xs", children: [renderLabel(label), isTextarea ? (jsx("textarea", { className: style('block resize-y min-h-24', defaultStyle$1, validStyle), id: style('textarea', id), name: name || id, placeholder: placeholder, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, disabled: disabled }, key)) : (jsx("input", { type: type, className: style('h-14', defaultStyle$1, paddingStyle, validStyle), ref: inputRef, id: id, name: name || id, placeholder: placeholder, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, pattern: pattern, disabled: disabled }, key))] }), children] }));
+        const ariaLabel = label ?? name ?? id;
+        return (jsxs("div", { className: style('relative', className), children: [jsxs("label", { className: "space-y-xs", children: [renderLabel(label), isTextarea ? (jsx("textarea", { className: style('block resize-y min-h-24', defaultStyle$1, validStyle), id: style('textarea', id), value: value, name: name || id, placeholder: placeholder, disabled: disabled, "aria-label": ariaLabel, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }, key)) : (jsx("input", { ref: inputRef, className: style('h-14', defaultStyle$1, paddingStyle, validStyle), id: id, type: type, value: value, name: name || id, placeholder: placeholder, pattern: pattern, disabled: disabled, "aria-label": ariaLabel, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }, key))] }), children] }));
     });
     const defaultStyle$1 = 'w-full border rounded-md text-primary-text outline-none p-m';
 
@@ -1574,7 +1554,7 @@
         return inputRef;
     }
 
-    const Select = JSX(({ className, label, options = [], value, valid = true, isBorder = true, placeholder = '', isSearch = false, iconVersion = 'black', onChange, disabled = false, }) => {
+    const Select = JSX(({ className, label, options = [], value, valid = true, isBorder = true, placeholder = '', isSearch = false, disabled = false, iconVersion = 'black', onChange, }) => {
         const [isOpen, { setFalse: close, setTrue: open }] = useBool();
         const [query, setQuery] = useState('');
         const isDisabled = getDisabled(disabled, options.length);
@@ -1598,7 +1578,7 @@
             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-6 text-l flex items-center justify-between text-primary-text relative z-10 overflow-hidden', getStyle(isBorder, valid, isDisabled)), onClick: hasOpen ? handleClose : handleOpen, 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, disabled: isDisabled }) })) : 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-6 text-l flex items-center justify-between text-primary-text relative z-10 overflow-hidden', getStyle(isBorder, valid, isDisabled)), onClick: hasOpen ? handleClose : handleOpen, 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", value: query, autoFocus: true, disabled: isDisabled, onChange: setQuery }) })) : null] })] }));
     });
     const renderIcon$1 = (isOpen, iconVersion) => (jsx(Icon, { className: style('absolute right-0 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');
@@ -1861,11 +1841,7 @@
     }, isDisabled ? 'text-gray hover:bg-transparent' : 'cursor-pointer');
 
     const WEEK_DAYS = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
-    const Calendar = JSX(({ today, currentMonth, currentYear, min, max, onDateSelect = noop, setValue = noop }) => {
-        const handleDateClick = useCallback((date) => {
-            onDateSelect(date);
-            setValue(false);
-        }, []);
+    const Calendar = JSX(({ today, currentMonth, currentYear, min, max, onDateSelect = noop }) => {
         const { firstDayOfWeek, totalDays } = useMemo(() => ({
             firstDayOfWeek: new Date(currentYear, currentMonth, 1).getDay() - 1,
             totalDays: new Date(currentYear, currentMonth + 1, 0).getDate(),
@@ -1878,7 +1854,7 @@
                         currentMonth,
                         min,
                         max,
-                        onDateClick: handleDateClick,
+                        onDateClick: onDateSelect,
                     }) })] }));
     });
 
@@ -2073,16 +2049,20 @@
     const DatePicker = JSX(
     // eslint-disable-next-line max-lines-per-function
     ({ className = '', label = '', value, valid = true, minDate, maxDate, disabled, onChange }) => {
-        const [showCalendar, { setValue }] = useBool(false);
+        const [isCalendarVisible, { setValue, setFalse: hideCalendar }] = useBool(false);
         const [selectedMonth, setSelectedMonth] = useState(value?.getMonth() || new Date().getMonth());
-        const [selectedYear, setSelectedYear] = useState(value?.getFullYear() || new Date().getFullYear());
+        const [selectedYear, setSelectedYear] = useState(value?.getFullYear() ?? new Date().getFullYear());
+        const handleDateSelect = useCallback((date) => {
+            onChange?.(date);
+            hideCalendar();
+        }, [onChange]);
         const { handlePrevMonth, handleNextMonth, handleSelectMonth, handleSelectYear, monthsOptions, yearsOptions, handleChangeVisibleCalendar, ref, } = useDatePickerManager({
             onYearSelect: setSelectedYear,
             onMonthSelect: setSelectedMonth,
             onShowCalendar: setValue,
             selectedYear,
             selectedMonth,
-            showCalendar,
+            showCalendar: isCalendarVisible,
             onChange,
             value,
         });
@@ -2095,9 +2075,9 @@
                             disabled,
                             setSelectedMonth,
                             setSelectedYear,
-                        }), showCalendar && !disabled ? (jsxs("div", { className: style('absolute bg-white z-20 select-none', {
+                        }), isCalendarVisible && !disabled ? (jsxs("div", { className: style('absolute bg-white z-20 select-none', {
                                 'bottom-full': spaceAbove,
-                            }), children: [jsxs("div", { className: "flex gap-s", children: [jsx("div", { className: "my-auto", onClick: handlePrevMonth, children: jsx(Icon, { ...ICON_PROPS, className: "-rotate-90 cursor-pointer" }) }), jsx(Select, { onChange: handleSelectMonth, value: { key: months[selectedMonth] }, options: monthsOptions, ...SELECT_PROPS }), jsx(Select, { onChange: handleSelectYear, value: { key: String(selectedYear) }, options: yearsOptions, ...SELECT_PROPS }), jsx("div", { className: "my-auto", onClick: handleNextMonth, children: jsx(Icon, { ...ICON_PROPS, className: "rotate-90 cursor-pointer" }) })] }), jsx(Calendar, { today: value, currentMonth: selectedMonth, currentYear: selectedYear, onDateSelect: onChange, min: minDate, max: maxDate, setValue: setValue })] })) : null] })] }));
+                            }), children: [jsxs("div", { className: "flex gap-s", children: [jsx("div", { className: "my-auto", onClick: handlePrevMonth, children: jsx(Icon, { ...ICON_PROPS, className: "-rotate-90 cursor-pointer" }) }), jsx(Select, { onChange: handleSelectMonth, value: { key: months[selectedMonth] }, options: monthsOptions, ...SELECT_PROPS }), jsx(Select, { onChange: handleSelectYear, value: { key: String(selectedYear) }, options: yearsOptions, ...SELECT_PROPS }), jsx("div", { className: "my-auto", onClick: handleNextMonth, children: jsx(Icon, { ...ICON_PROPS, className: "rotate-90 cursor-pointer" }) })] }), jsx(Calendar, { today: value, currentMonth: selectedMonth, currentYear: selectedYear, min: minDate, max: maxDate, onDateSelect: handleDateSelect })] })) : null] })] }));
     });
 
     const DatePickerControl = JSX(({ className, label, error, errors, ...rest }) => (jsxs("div", { className: style('shrink-0 w-full', className), children: [jsx(DatePicker, { label: getRequiredLabel({ label, errors }), valid: Boolean(!error), ...rest }), renderErrorText(error)] })));
@@ -2134,9 +2114,9 @@
             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), "aria-label": text }), value ? icon : null, renderText$2(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), "aria-label": text }), value ? icon : null, renderText$3(text)] }) }));
     });
-    const renderText$2 = (text) => text ? (jsx("div", { className: "ml-s", children: jsx(Text, { size: "text-l", font: "font-light", children: text }) })) : null;
+    const renderText$3 = (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', { 'bg-primary-main': value });
@@ -2893,26 +2873,32 @@
 
     const renderTitle = (title) => title ? (jsx("div", { className: "@xl:text-center @xl:col-span-2 mb-m", children: jsx(Text, { size: "text-h6", children: title }) })) : null;
 
-    const buttonStyleMap = {
-        primary: style('justify-center px-9 py-4', 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active', 'group-data-secondary:text-primary-main group-data-secondary:bg-white', 'group-data-secondary:hover:text-white group-data-secondary:hover:bg-primary-hover', 'group-data-secondary:active:bg-primary-active'),
-        secondary: style('justify-center px-9 py-4', 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active', 'group-data-secondary:text-white group-data-secondary:bg-white/20', 'group-data-secondary:hover:bg-primary-hover', 'group-data-secondary:active:bg-primary-active'),
-    };
-    const embeddedStyle = style('group/btn-embedded', 'justify-between p-0', 'bg-transparent border border-transparent outline-none');
-    const Button = JSX(({ className, type = 'button', version = 'primary', embedded, rounded = true, disabled, role, data, dataTheme, children, onClick, }) => {
-        const handleClick = useCallback(handlerDecorator((ev) => {
-            !disabled && onClick?.(ev);
-        }), [disabled, onClick]);
+    const themeStyle$1 = {
+        primary: style('text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active', 'group-data-secondary:text-primary-main group-data-secondary:bg-white', 'group-data-secondary:hover:text-white group-data-secondary:hover:bg-primary-hover', 'group-data-secondary:active:bg-primary-active'),
+        secondary: style('text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active', 'group-data-secondary:text-white group-data-secondary:bg-white/20', 'group-data-secondary:hover:bg-primary-hover', 'group-data-secondary:active:bg-primary-active'),
+    };
+    const embeddedStyle = style('group/btn-embedded', 'bg-transparent border border-transparent outline-none');
+    const disabledStyle = style('bg-main-gray text-main-disabled cursor-not-allowed');
+    const Button = JSX(({ className, type = 'button', version = 'primary', shape = 'default', embedded, disabled, role, ariaLabel, data, dataTheme, children, onClick = noop, }) => {
+        const handleClick = useCallback(role !== 'tab' ? handlerDecorator(onClick) : onClick, [
+            role,
+            onClick,
+        ]);
         const aspectsAttrs = useMemo(() => getAspectsAttributes(data), [data]);
-        return (jsx("button", { className: style('font-sans flex items-center gap-xs relative', !disabled && !embedded && buttonStyleMap[version], {
+        const isRound = shape === 'round';
+        return (jsx("button", { className: style('font-sans flex items-center gap-xs', {
+                [themeStyle$1[version]]: !disabled && !embedded,
                 [embeddedStyle]: embedded,
-                'rounded-md': rounded,
-                'bg-main-gray text-main-disabled cursor-not-allowed': disabled,
-            }, className), type: type, role: role, "data-theme": dataTheme, ...aspectsAttrs, onClick: handleClick, children: children }));
+                [disabledStyle]: disabled,
+            }, embedded ? 'justify-between' : 'justify-center', embedded || isRound ? 'p-0' : 'px-9 py-4', {
+                'rounded-md': shape === 'default',
+                'rounded-full': isRound,
+            }, className), type: type, role: role, "aria-label": ariaLabel, disabled: disabled, "aria-disabled": disabled ? 'true' : undefined, "data-theme": dataTheme, ...aspectsAttrs, onClick: handleClick, 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" }) })));
 
-    const Dialog = JSX(({ className, head, children, onClose, onClick }) => (jsxs("div", { className: style('relative bg-white pt-0 p-lg', className), role: "dialog", onClick: onClick, children: [jsxs("div", { className: "sticky py-xl top-0 bg-white z-10", children: [jsx(CloseButton, { className: "absolute top-0 right-0", onClose: onClose }), jsx("div", { className: "container", children: head })] }), jsx("div", { className: "container pb-6xl", children: children })] })));
+    const Dialog = JSX(({ className, head, children, onClose, onClick }) => (jsxs("div", { className: style('relative bg-white pt-0 p-lg', className), role: "dialog", title: "\u0414\u0438\u0430\u043B\u043E\u0433", onClick: onClick, children: [jsxs("div", { className: "sticky py-xl top-0 bg-white z-10", children: [jsx(CloseButton, { className: "absolute top-0 right-0", onClose: onClose }), jsx("div", { className: "container", children: head })] }), jsx("div", { className: "container pb-6xl", children: children })] })));
 
     const ResponseTypeDialog = JSX(({ ok, typeForm, onClose }) => {
         const statusIcon = ok ? 'ResponseOKIcon' : 'ResponseFailIcon';
@@ -3002,7 +2988,28 @@
 
     const SubmitButton$1 = JSX(({ isLoading, disabled, children, ...rest }) => (jsxs(Button, { type: "submit", disabled: isLoading || disabled, ...rest, children: [isLoading ? jsx(Loader, { blur: true, size: "small" }) : null, children] })));
 
-    const Footnote = JSX(({ text, link }) => (jsxs(Paragraph, { size: "text-l", font: "font-light", color: "text-secondary-text", children: [text ? jsx(Text, { children: text }) : null, link ? (jsx(LinkButton, { href: link.href, ariaLabel: "\u0443\u0441\u043B\u043E\u0432\u0438\u044F \u043F\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043D\u043D\u044B\u0445", target: link.target || '', className: "!text-left text-primary-main", children: jsx(Text, { children: link.text }) })) : null] })));
+    const themeStyle = {
+        primary: themeStyle$1.primary,
+        secondary: themeStyle$1.secondary,
+        white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white active:text-primary-main',
+        link: 'text-primary-main',
+        gray: themeStyle$1.secondary,
+        transparent: '',
+        '': '',
+    };
+    const Link = JSX((props) => {
+        const link = useLink();
+        const { className, href, target, text, aboveText, version = 'link', rel, ariaLabel, data, children, onClick, } = link(props);
+        const buttonLike = version !== 'link';
+        return (jsx("a", { className: style('group/btn inline-flex items-center h-fit', 'font-sans no-underline select-none', 'border border-transparent focus:border-primary-text focus:border', 'cursor-pointer', {
+                [themeStyle[version]]: Boolean(version),
+                [aboveText ? 'px-9 py-2.5' : 'px-9 py-4']: buttonLike,
+                'rounded-md': buttonLike,
+            }, className), href: href, target: target, rel: rel, "aria-label": ariaLabel ?? `Ссылка на ${text}`, role: href ? 'link' : 'button', onClick: onClick, ...getAspectsAttributes(data), children: children ?? renderText$2(text, aboveText) }));
+    });
+    const renderText$2 = (text, aboveText) => text || aboveText ? (jsxs("div", { className: "whitespace-pre", children: [aboveText ? jsx("div", { className: "font-light text-left text-xs", children: aboveText }) : null, jsx("div", { className: style('text-left', { 'text-s -mt-3xs': Boolean(aboveText) }), children: text })] })) : null;
+
+    const Footnote = JSX(({ text, link }) => (jsxs(Paragraph, { size: "text-l", font: "font-light", color: "text-secondary-text", children: [text ? jsx(Text, { children: text }) : null, link ? (jsx(Link, { ...link, ariaLabel: "\u0443\u0441\u043B\u043E\u0432\u0438\u044F \u043F\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043D\u043D\u044B\u0445", children: link.text })) : null] })));
 
     const agreementText = 'Нажимая кнопку, вы подтверждаете согласие с ';
     const renderAgreementSubmit = (consentDataProcessing, link, button) => (jsxs("div", { className: "flex col-span-2 gap-xs flex-col w-full items-baseline", children: [consentDataProcessing ? (jsxs("div", { children: [jsxs("div", { className: "flex gap-3 items-center", children: [jsx(Checkbox, { ...consentDataProcessing }), jsx(Footnote, { link: link })] }), renderErrorText(withValidator(consentDataProcessing, agreementValidator).error)] })) : (jsx(Footnote, { text: agreementText, link: link })), jsx(SubmitButton$1, { className: "w-full @xl:w-auto", children: button?.text ? button.text : 'Отправить заявку' })] }));
@@ -3399,14 +3406,14 @@
 
     const CardRow = JSX(({ className, children }) => (jsx("div", { className: style('flex flex-col sm:flex-row sm:border-t sm:border-solid sm:border-main-divider py-xl gap-x-6xl gap-y-xl', className), children: children })));
 
-    const ButtonTitle = JSX(({ className, children }) => (jsx("span", { className: style('inline-flex items-center text-start gap-s group-hover/btn-embedded:text-primary-main', className), children: children })));
+    const ButtonTitle = JSX(({ className, children }) => (jsx("span", { className: style('inline-flex items-center text-start gap-s group-[]/btn-embedded:text-primary-main', className), children: children })));
 
     const ToggleIcon = JSX(({ isUnfolded, ...rest }) => (jsx(Icon, { name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', size: "small", iconVersion: "", ...rest })));
 
-    const DefaultFoldButton = JSX(({ className, isUnfolded, label = isUnfolded ? 'Скрыть' : 'Развернуть', embedded, ...rest }) => (jsxs(Button, { className: style({ 'text-h4': !embedded }, className), rounded: false, embedded: embedded, ...rest, children: [jsx(ButtonTitle, { children: label }), jsx(ToggleIcon, { isUnfolded: isUnfolded, iconVersion: embedded ? 'color' : '' })] })));
+    const DefaultFoldButton = JSX(({ className, isUnfolded, short, label = isUnfolded ? 'Скрыть' : 'Развернуть', embedded, ...rest }) => (jsxs(Button, { className: style({ 'w-full': !short }, className), embedded: embedded, shape: short ? 'default' : 'square', role: "tab", "aria-label": "\u041A\u043D\u043E\u043F\u043A\u0430 \u0441\u0432\u043E\u0440\u0430\u0447\u0438\u0432\u0430\u044E\u0449\u0435\u0439\u0441\u044F \u0441\u0435\u043A\u0446\u0438\u0438", ...rest, children: [jsx(ButtonTitle, { children: label }), jsx(ToggleIcon, { isUnfolded: isUnfolded, iconVersion: embedded ? 'color' : '' })] })));
 
     // TODO Не особо полезно, в итоге
-    const Foldable = JSX(({ className, role = 'group', children }) => (jsx("div", { className: style(className), role: role, children: children })));
+    const Foldable = JSX(({ className, role = 'tablist', children }) => (jsx("div", { className: style(className), role: role, children: children })));
 
     function useResizeObserver(callback, deps) {
         const ref = useRef(null);
@@ -3426,7 +3433,7 @@
         return ref;
     }
 
-    const FoldableSection = JSX(({ className = '', isUnfolded, children }) => {
+    const FoldableSection = JSX(({ className, isUnfolded, children }) => {
         const containerRef = useRef(null);
         const childrenWrapperRef = useResizeObserver((childrenWrapperEl) => {
             if (containerRef.current) {
@@ -3435,12 +3442,14 @@
                     : '';
             }
         }, [isUnfolded]);
-        return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} `, children: jsx("div", { className: className, ref: childrenWrapperRef, children: children }) }));
+        return (jsx("div", { ref: containerRef, className: style('transition-max-h duration-300 overflow-hidden', {
+                'max-h-0': Boolean(containerRef.current || !isUnfolded),
+            }), role: "tabpanel", "aria-label": "\u0421\u0432\u043E\u0440\u0430\u0447\u0438\u0432\u0430\u044E\u0449\u0430\u044F\u0441\u044F \u0441\u0435\u043A\u0446\u0438\u044F", children: jsx("div", { className: className, ref: childrenWrapperRef, children: children }) }));
     });
 
     const FoldableCardContent = JSX(({ children }) => {
         const [isUnfolded, { toggle }] = useBool(false);
-        return (jsxs("div", { children: [jsx("div", { className: "hidden sm:block", children: children }), jsxs(Foldable, { className: "block sm:hidden", children: [jsx(FoldableSection, { isUnfolded: isUnfolded, children: children }), jsx(DefaultFoldButton, { className: "w-full my-m mr-m border-b border-solid border-main-divider", label: isUnfolded ? 'Скрыть' : 'Подробнее', isUnfolded: isUnfolded, embedded: true, onClick: toggle })] })] }));
+        return (jsxs("div", { children: [jsx("div", { className: "hidden sm:block", children: children }), jsxs(Foldable, { className: "block sm:hidden", children: [jsx(FoldableSection, { isUnfolded: isUnfolded, children: children }), jsx(DefaultFoldButton, { className: "my-m mr-m border-b border-solid border-main-divider", label: isUnfolded ? 'Скрыть' : 'Подробнее', isUnfolded: isUnfolded, embedded: true, onClick: toggle })] })] }));
     });
 
     const getScheduleDescription = (workScheduleWeek) => {
@@ -3774,7 +3783,7 @@
         return [storedValue, setValue];
     }
 
-    const InfoCard = JSX(({ __html, icon = 'InfoCircleIcon', iconVersion = 'black', link }) => (jsxs("div", { className: "flex flex-row items-center w-full min-h-14 bg-main-gray rounded-lg gap-m p-m", children: [jsx("div", { className: "rounded-full bg-white p-xs", children: jsx(Icon, { name: icon, width: "24", height: "24", iconVersion: iconVersion }) }), jsxs("div", { className: "", children: [jsx(RichText, { __html: __html }), link?.text ? jsx(LinkButton, { className: "text-primary-main", children: link.text }) : null] })] })));
+    const InfoCard = JSX(({ __html, icon = 'InfoCircleIcon', iconVersion = 'black' }) => (jsxs("div", { className: "flex flex-row items-center w-full min-h-14 bg-main-gray rounded-lg gap-m p-m", children: [jsx("div", { className: "rounded-full bg-white p-xs", children: jsx(Icon, { name: icon, width: "24", height: "24", iconVersion: iconVersion }) }), jsx("div", { className: "", children: jsx(RichText, { __html: __html }) })] })));
 
     const CardCategoryField = JSX(({ field, input }) => {
         const [cardTypes, setCardTypes] = useState([]);
@@ -3840,10 +3849,13 @@
     };
 
     // TODO Перенесено как есть из openDocument. Требует рефакторинга
-    const DocumentDialog = JSX(({ src, convertToPng, onClose, onDocumentRead }) => (jsxs(Dialog, { className: "my-6xl max-w-4xl mx-auto px-0 min-h-0 pb-0", onClose: onClose, children: [convertToPng ? (jsx("img", { src: src })) : (jsx("iframe", { src: `${src}#toolbar=0`, className: "w-full h-[80vh]", id: "iframe-dialog" })), jsx(Button, { className: "mx-auto mt-m", type: "button", onClick: () => {
-                    onDocumentRead?.();
-                    onClose?.();
-                }, children: "\u041E\u0437\u043D\u0430\u043A\u043E\u043C\u0438\u0442\u044C\u0441\u044F" })] })));
+    const DocumentDialog = JSX(({ src, onClose, onDocumentRead }) => {
+        const isMobileMode = useMobileMode();
+        return (jsxs(Dialog, { className: "my-6xl max-w-4xl mx-auto px-0 min-h-0 pb-0", onClose: onClose, children: [isMobileMode ? (jsx("img", { src: src })) : (jsx("iframe", { src: `${src}#toolbar=0`, className: "w-full h-[80vh]", id: "iframe-dialog" })), jsx(Button, { className: "mx-auto mt-m", type: "button", onClick: () => {
+                        onDocumentRead?.();
+                        onClose?.();
+                    }, children: "\u041E\u0437\u043D\u0430\u043A\u043E\u043C\u0438\u0442\u044C\u0441\u044F" })] }));
+    });
 
     const useDocumentDialog = (docId, onDocumentRead) => {
         const { open } = useDialog(DocumentDialog);
@@ -3856,10 +3868,9 @@
         }, [open, docId, isMobileMode]);
     };
 
-    const OPEN_DOC_BUTTON_TEXT = 'Ознакомиться';
     const CheckboxWithDoc = JSX(({ className, error, docId, ...props }) => {
         const openDocument = useDocumentDialog(docId, () => props.onChange?.(true));
-        return (jsxs("div", { className: className, children: [jsxs("div", { className: "flex flex-wrap gap-x-m", children: [jsx(Checkbox, { ...props }), docId ? (jsx(LinkButton, { className: "text-primary-main", onClick: openDocument, children: jsx(Text, { children: OPEN_DOC_BUTTON_TEXT }) })) : null] }), renderErrorText(error)] }));
+        return (jsxs("div", { className: className, children: [jsxs("div", { className: "flex flex-wrap gap-x-m", children: [jsx(Checkbox, { ...props }), docId ? (jsx(Button, { embedded: true, onClick: openDocument, children: jsx(ButtonTitle, { children: "\u041E\u0437\u043D\u0430\u043A\u043E\u043C\u0438\u0442\u044C\u0441\u044F" }) })) : null] }), renderErrorText(error)] }));
     });
 
     const ConsentField = JSX(({ field, input }) => input && input.name ? (jsx(CheckboxWithDoc, { text: CONSENTS[input.name]?.text, docId: CONSENTS[input.name]?.docId, ...field(input.name) })) : null);
@@ -4523,7 +4534,7 @@
             ?.filter((_) => _.required)
             ?.some((_) => Boolean(withValidator(field(_?.name), validatorObj[_?.name]).error)), [inputs]);
         const [isUnfolded, { toggle }] = useBool(true);
-        return (jsx("div", { className: "w-fit", children: jsxs(Foldable, { children: [jsxs("div", { className: "flex items-start", children: [jsxs("div", { children: [jsx(Checkbox, { text: CONSENT_ALL_DOCS_TEXT, value: isChecked, onChange: handleGeneralToggle }, key), renderErrorText(hasValidationErrors ? CONSENT_REQUIRED : '')] }), jsx(Button, { embedded: true, onClick: toggle, children: jsx(ToggleIcon, { className: "p-2xs", iconVersion: "color", isUnfolded: isUnfolded }) })] }), jsx(FoldableSection, { className: "flex flex-col pl-2xl", isUnfolded: isUnfolded, children: inputs.map(getField(field, {}, InputsConsentsMap)) })] }) }));
+        return (jsx("div", { className: "w-fit", children: jsxs(Foldable, { children: [jsxs("div", { className: "flex items-start", children: [jsxs("div", { children: [jsx(Checkbox, { text: CONSENT_ALL_DOCS_TEXT, value: isChecked, onChange: handleGeneralToggle }, key), renderErrorText(hasValidationErrors ? CONSENT_REQUIRED : '')] }), jsx(Button, { embedded: true, ariaLabel: CONSENT_ALL_DOCS_TEXT, onClick: toggle, children: jsx(ToggleIcon, { className: "p-2xs", iconVersion: "color", isUnfolded: isUnfolded }) })] }), jsx(FoldableSection, { className: "flex flex-col pl-2xl", isUnfolded: isUnfolded, children: inputs.map(getField(field, {}, InputsConsentsMap)) })] }) }));
     });
 
     const renderInputs$2 = ({ field, inputs }) => {
@@ -4645,26 +4656,49 @@
         return (jsx(Dialog, { className: "my-6xl max-w-lg w-full min-h-fit mx-auto rounded-lg", head: jsx(Logo, {}), onClose: onClose, children: jsxs("div", { className: "flex flex-col gap-lg items-center rounded-md", children: [jsxs("div", { className: "flex h-36 w-72", children: [jsx("img", { className: "grow", src: captcha }), jsx(Button, { className: "w-8", embedded: true, onClick: handleCreateCaptcha, children: jsx(Icon, { iconVersion: "normal", name: "RefreshIcon" }) })] }), jsx(Input, { className: "w-[300px]", onChange: setCode, value: code, placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u043E\u0434 \u0441 \u043A\u0430\u0440\u0442\u0438\u043D\u043A\u0438" }), hasError ? jsx("div", { className: "text-error", children: "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u043A\u043E\u0434" }) : null, jsxs("div", { className: "flex w-[310px] justify-between", children: [jsx(Button, { version: "secondary", onClick: close, children: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F" }), jsx(SubmitButton$1, { version: "secondary", disabled: !code, onClick: handleCheckCaptcha, children: "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C" })] }), isLoading ? jsx(Loader, { blur: false }) : null] }) }));
     });
 
-    const Timer = JSX(({ time, setTime, className }) => {
+    const Timer = JSX(({ className, seconds }) => (jsx("span", { className: className, children: formatTimer(seconds) })));
+    const formatTimer = (seconds) => {
+        const minutes = Math.floor(seconds / 60);
+        return [minutes, seconds % 60].map((_) => String(_).padStart(2, '0')).join(':');
+    };
+
+    const useInterval = (handler, period) => {
+        const timer = useRef(null);
+        const stop = useCallback(() => clearInterval(timer.current), []);
+        const start = useCallback(() => {
+            stop();
+            timer.current = setInterval(() => handler(stop), period);
+        }, [handler, period, stop]);
         useEffect(() => {
-            const timer = setInterval(() => {
-                setTime(time - 1);
-            }, 1000);
-            if (time === 0) {
-                clearInterval(timer);
-            }
-            return () => {
-                clearInterval(timer);
-            };
-        }, [time]);
-        return jsx("span", { className: className, children: secondsToMinSecPadded(time) });
-    });
-    const secondsToMinSecPadded = (time) => {
-        const minutes = `${Math.floor(time / 60)}`.padStart(2, '0');
-        const seconds = `${time % 60}`.padStart(2, '0');
-        return `${minutes}:${seconds}`;
+            start();
+            return stop;
+        }, [start, stop]);
+        return { start, stop };
     };
 
+    function useCountDownTimer({ seconds, period = 1000, onTick, onEnd }) {
+        const counter = useRef(seconds);
+        const handleTick = useCallback((stop) => {
+            counter.current ||= 0;
+            counter.current = Math.max(0, counter.current - 1);
+            try {
+                onTick?.(counter.current);
+            }
+            finally {
+                if (counter.current <= 0) {
+                    stop();
+                    onEnd?.();
+                }
+            }
+        }, [onTick, onEnd]);
+        const { start } = useInterval(handleTick, period);
+        const restart = useCallback((_) => {
+            counter.current = _;
+            start();
+        }, []);
+        return restart;
+    }
+
     const InputCode = JSX(({ values, setValues, hasError, errorText }) => {
         const [activeIndex, setActiveIndex] = useState(0);
         const inputRefs = useRef([]);
@@ -4767,6 +4801,7 @@
         const { handleSubmit, hasError, errorText, isLoading, timeNextReq, isSubmitButtonDisabled, setTimeNextReq, setIsTimerStarted, setAttempts, } = useVerifyPhoneDialogSubmit({ values, onSuccess });
         const captchaDialog = useDialog(CaptchaDialog);
         const phoneNumber = formatPhone(phone);
+        const restartTimer = useCountDownTimer({ seconds: timeNextReq, onTick: setTimeNextReq });
         const handleSendCode = useCallback(async () => {
             const isSuccessSendCode = await sendCode({
                 phoneNumber,
@@ -4775,19 +4810,20 @@
             if (isSuccessSendCode) {
                 setAttempts(0);
                 setTimeNextReq(180);
+                restartTimer(180);
                 setIsTimerStarted(true);
             }
             else {
                 captchaDialog.open({ phoneNumber, sendCode: handleSendCode });
             }
-        }, [phoneNumber, onClose]);
+        }, [phoneNumber, restartTimer, onClose]);
         useEffect(() => {
             handleSendCode();
         }, []);
-        return (jsx(Dialog, { className: "my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-xl p-m", onClose: onClose, children: jsxs("div", { className: "flex flex-col gap-xl items-center rounded-md", children: [jsx(Headline, { className: "w-full", title: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435 \u043D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430", description: `Мы отправили код на ${phone}`, headlineVersion: "XS", isEmbedded: true, as: "h6" }), code ? (jsx(InputCode, { values: values, setValues: setValues, errorText: errorText, hasError: hasError })) : null, renderText$1(timeNextReq, setTimeNextReq, handleSendCode), withDescription ? (jsxs(RichText, { itemSize: "list-s", children: [jsx("span", { children: "\u0412\u0432\u043E\u0434\u044F \u043A\u043E\u0434, \u044F \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u044E, \u0447\u0442\u043E \u043E\u0437\u043D\u0430\u043A\u043E\u043C\u043B\u0435\u043D \u0438 \u043F\u043E\u0434\u043F\u0438\u0441\u044B\u0432\u0430\u044E: " }), jsx("ul", { children: consents?.map((_, i) => (jsx("li", { children: _ }, `${_}-${i}`))) })] })) : null, renderNextButton(isSubmitButtonDisabled, handleSubmit), isLoading ? jsx(Loader, { blur: false }) : null] }) }));
+        return (jsx(Dialog, { className: "my-6xl max-w-3xl w-full min-h-fit mx-auto rounded-xl p-m", onClose: onClose, children: jsxs("div", { className: "flex flex-col gap-xl items-center rounded-md", children: [jsx(Headline, { className: "w-full", title: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435 \u043D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430", description: `Мы отправили код на ${phone}`, headlineVersion: "XS", isEmbedded: true, as: "h6" }), code ? (jsx(InputCode, { values: values, setValues: setValues, errorText: errorText, hasError: hasError })) : null, renderText$1(timeNextReq, handleSendCode), withDescription ? (jsxs(RichText, { itemSize: "list-s", children: [jsx("span", { children: "\u0412\u0432\u043E\u0434\u044F \u043A\u043E\u0434, \u044F \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u044E, \u0447\u0442\u043E \u043E\u0437\u043D\u0430\u043A\u043E\u043C\u043B\u0435\u043D \u0438 \u043F\u043E\u0434\u043F\u0438\u0441\u044B\u0432\u0430\u044E: " }), jsx("ul", { children: consents?.map((_, i) => (jsx("li", { children: _ }, `${_}-${i}`))) })] })) : null, renderNextButton(isSubmitButtonDisabled, handleSubmit), isLoading ? jsx(Loader, { blur: false }) : null] }) }));
     });
     const renderNextButton = (isDisabled, onClick) => (jsx(SubmitButton, { text: "\u0414\u0430\u043B\u0435\u0435", isDisabled: isDisabled, onClick: onClick }));
-    const renderText$1 = (timeNextReq, setTimeNextReq, handleSendCode) => timeNextReq ? (jsxs("div", { className: "flex flex-row text-l font-light text-base", children: ["\u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0439 \u043A\u043E\u0434 \u043C\u043E\u0436\u043D\u043E \u0447\u0435\u0440\u0435\u0437", jsx(Timer, { className: "text-base ml-1", time: timeNextReq, setTime: setTimeNextReq })] })) : (jsx(LinkButton, { onClick: handleSendCode, className: "text-primary-main", children: "\u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0439 \u043A\u043E\u0434" }));
+    const renderText$1 = (timeNextReq, handleSendCode) => timeNextReq ? (jsxs("div", { className: "flex flex-row text-l font-light text-base", children: ["\u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0439 \u043A\u043E\u0434 \u043C\u043E\u0436\u043D\u043E \u0447\u0435\u0440\u0435\u0437", jsx(Timer, { className: "ml-1", seconds: timeNextReq })] })) : (jsx(Button, { embedded: true, onClick: handleSendCode, children: jsx(ButtonTitle, { children: "\u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u043D\u043E\u0432\u044B\u0439 \u043A\u043E\u0434" }) }));
 
     const defaultConsentText = {
         title: 'Подпишите согласие на запрос в БКИ',
@@ -5487,7 +5523,7 @@
             ? [blocksToRender.slice(0, topItemsCount), blocksToRender.slice(topItemsCount)]
             : [blocksToRender, []];
         const [isUnfolded, { toggle }] = useBool(false);
-        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] }), jsxs(Foldable, { children: [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] }), jsx(DefaultFoldButton, { className: style('w-full', { hidden: topItemsCount < 1 }), label: label, isUnfolded: isUnfolded, disabled: !hiddenBlocks?.length, dataTheme: rest.options?.page?.colorPalette, onClick: toggle })] })] }));
+        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] }), jsxs(Foldable, { children: [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] }), jsx(DefaultFoldButton, { className: style('text-h4', { hidden: topItemsCount < 1 }), label: label, isUnfolded: isUnfolded, disabled: !hiddenBlocks?.length, dataTheme: rest.options?.page?.colorPalette, onClick: toggle })] })] }));
     });
 
     const getBorderStyle = (showBorder = false) => showBorder
@@ -5709,20 +5745,18 @@
         behavior: isAuto ? 'auto' : 'smooth',
     });
 
+    const IconButton = JSX(({ className, name, ...props }) => (jsx(Button, { className: style('w-12 h-12 min-w-12 min-h-12', className), shape: "round", ...props, children: jsx(Icon, { name: name, iconVersion: "", size: "small" }) })));
+
     /** @deprecated */
-    const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(LinkButton, { rounded: true, className: style('group/btn w-12 h-12 min-h-12 max-h-12 flex items-center justify-center shadow-main-black', disabled
-            ? 'bg-secondary-light text-secondary-text'
-            : 'bg-white text-primary-text hover:text-primary-main', className), disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover/btn:text-primary-main", width: "16", height: "16" }) })));
-    /** @deprecated */
-    const ScrollLeftButton = JSX((props) => (jsx(ArrowButton, { ...props, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })));
+    const ArrowLeftButton = JSX((props) => (jsx(IconButton, { name: "ArrowLeftIcon", version: "secondary", ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", ...props })));
     /** @deprecated */
-    const ScrollRightButton = JSX((props) => (jsx(ArrowButton, { ...props, className: `${props.className || ''} rotate-180`, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })));
+    const ArrowRightButton = JSX((props) => (jsx(IconButton, { name: "ArrowRightIcon", version: "secondary", ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", ...props })));
 
     const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
     const SwipeListScrollButtons = JSX(({ className, scroll, hasBlur, arrowsPadded, isBottom }) => {
         const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
         const isArrowPadded = arrowsPadded && !isBottom;
-        return (jsxs("div", { className: className, children: [hasBlur ? renderBlur(scroll) : null, canScrollLeft ? (jsx(ScrollLeftButton, { className: style(buttonStyle(isBottom), isArrowPadded ? 'left-1' : 'left-0'), onClick: scrollLeft })) : null, canScrollRight ? (jsx(ScrollRightButton, { className: style(buttonStyle(isBottom), isArrowPadded ? 'right-1' : 'right-0'), onClick: scrollRight })) : null] }));
+        return (jsxs("div", { className: className, children: [hasBlur ? renderBlur(scroll) : null, canScrollLeft ? (jsx(ArrowLeftButton, { className: style(buttonStyle(isBottom), isArrowPadded ? 'left-1' : 'left-0'), onClick: scrollLeft })) : null, canScrollRight ? (jsx(ArrowRightButton, { className: style(buttonStyle(isBottom), isArrowPadded ? 'right-1' : 'right-0'), onClick: scrollRight })) : null] }));
     });
     const renderBlur = (scroll) => (jsxs("div", { children: [scroll.canScrollLeft ? (jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white group-data-secondary:bg-none') })) : null, scroll.canScrollRight ? (jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white group-data-secondary:bg-none') })) : null] }));
     const buttonStyle = (isBottom = false) => style('absolute z-40', isBottom ? 'bottom-[56px]' : 'top-[calc(50%-24px)]');
@@ -5877,18 +5911,16 @@
 
     const getAlignStyles = (isMobile = false) => (isMobile ? 'text-left' : 'text-center');
 
-    const iconBgStyles = {
+    const DEFAULT_ICON_SIZE = 44;
+    const iconStyleMap = {
         '': 'bg-main-divider group-data-secondary:bg-white/30',
         primary: 'bg-main-divider',
         secondary: 'bg-secondary-light',
         opacity: 'bg-white/30',
     };
-    const RoundedIcon = JSX(({ className, defaultIconSize = 44, iconBgVersion = 'primary', size, icon, ...rest }) => {
-        const widthAndHeight = String(size?.width || defaultIconSize);
-        return icon ? (jsx("div", { style: {
-                width: `${widthAndHeight}px`,
-                height: `${widthAndHeight}px`,
-            }, className: style('rounded-icon object-fit flex justify-center items-center', iconBgStyles[iconBgVersion], className), children: jsx(Icon, { ...rest, width: "54%", name: icon }) })) : null;
+    const RoundedIcon = JSX(({ className, iconBgVersion = 'primary', size, icon, ...rest }) => {
+        const width = `${size?.width ?? DEFAULT_ICON_SIZE}px`;
+        return icon ? (jsx("div", { className: style('rounded-icon object-fit flex justify-center items-center', iconStyleMap[iconBgVersion], className), style: { width, height: width }, role: "figure", children: jsx(Icon, { name: icon, width: "54%", ...rest }) })) : null;
     });
 
     const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => {
@@ -6872,7 +6904,7 @@
                 parent: options?.parent,
             });
         }, [isVisible, options?.parent]);
-        return (jsxs(BlockWrapper, { className: style('flex flex-col', className), defaultPadding: "p-2xl", ...rest, children: [jsx(Img, { className: "self-center", image: icon }), title ? (jsx(Heading, { className: style('pt-xs', align), headingType: "h5", title: title })) : null, button?.text ? jsx(LinkButton, { className: "w-full mt-m mb-lg", ...button }) : null, hiddenCells.length ? (jsxs(Foldable, { children: [jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isVisible, children: hiddenCells })] }), cardCells.length >= visibleCellsCount ? (jsx(DefaultFoldButton, { className: "w-full mt-m", label: isVisible ? 'Скрыть' : 'Подробнее о тарифе', isUnfolded: isVisible, embedded: true, data: data, onClick: handleFold })) : null] })) : (jsx("div", { children: visibleCells }))] }));
+        return (jsxs(BlockWrapper, { className: style('flex flex-col', className), defaultPadding: "p-2xl", ...rest, children: [jsx(Img, { className: "self-center", image: icon }), title ? (jsx(Heading, { className: style('pt-xs', align), headingType: "h5", title: title })) : null, button?.text ? jsx(LinkButton, { className: "w-full mt-m mb-lg", ...button }) : null, hiddenCells.length ? (jsxs(Foldable, { children: [jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isVisible, children: hiddenCells })] }), cardCells.length >= visibleCellsCount ? (jsx(DefaultFoldButton, { className: "mt-m", label: isVisible ? 'Скрыть' : 'Подробнее о тарифе', isUnfolded: isVisible, embedded: true, data: data, onClick: handleFold })) : null] })) : (jsx("div", { children: visibleCells }))] }));
     });
 
     const ContactsBlock = JSX(({ className, contacts, info, version = 'secondary', ...rest }) => (jsxs(BlockWrapper, { className: style('flex', className), defaultPadding: "p-6xl", version: version, ...rest, children: [info?.length ? renderBlocks(info) : null, contacts?.length ? renderBlocks(contacts) : null] })));
@@ -6936,35 +6968,16 @@
 
     const sendSignalToProcess = (body) => doRequest('/user-data/sendSignalToProcess', 'POST', body);
 
-    const useInterval = (handler, period) => {
-        const timer = useRef(null);
-        const clearTimer = useCallback(() => timer.current && clearInterval(timer.current), []);
-        useEffect(() => {
-            timer.current = setInterval(() => handler(clearTimer), period);
-            return clearTimer;
-        }, [handler, period]);
-        return clearTimer;
-    };
-
-    const TimerCircle = JSX(({ interval = 0, intervalExpireAction = () => null, title, __html }) => {
+    const TimerCircle = JSX(({ title, interval = 0, onEnd = noop }) => {
         const [time, setTime] = useState(interval);
-        const setTimeWithHandleExpire = (value) => {
-            if (value === 0) {
-                intervalExpireAction();
-            }
-            setTime(value);
-        };
+        useCountDownTimer({ seconds: interval, onTick: setTime, onEnd });
         const gradientPercentage = 100 - ((interval - time) / interval) * 100;
-        return (jsxs("div", { children: [title ? jsx(Headline, { title: title, headlineVersion: "S" }) : null, jsxs("div", { className: "flex justify-center items-center flex-col", children: [jsxs("div", { className: style(`relative flex items-center justify-center w-24 h-24 rounded-full bg-gray text-transparent mb-5`), children: [jsx("div", { className: "absolute inset-0 rounded-full", style: {
-                                        background: `conic-gradient(rgb(66, 171, 68) ${gradientPercentage}%, rgb(125, 126, 127) 0deg)`,
-                                    } }), jsx("div", { className: "z-10 flex items-center justify-center px-4 py-2 rounded-full w-20 h-20 bg-white text-primary-text text-m", children: jsx(Timer, { interval: interval, time: time, setTime: setTimeWithHandleExpire }) })] }), __html ? jsx(RichText, { __html: __html }) : null] })] }));
+        return (jsxs("div", { children: [title ? jsx(Headline, { title: title, headlineVersion: "S" }) : null, jsxs("div", { className: "relative flex items-center justify-center w-24 h-24 rounded-full bg-gray text-transparent mb-5", children: [jsx("div", { className: "absolute inset-0 rounded-full", style: {
+                                background: `conic-gradient(rgb(66, 171, 68) ${gradientPercentage}%, rgb(125, 126, 127) 0deg)`,
+                            } }), jsx("div", { className: "z-10 flex items-center justify-center w-20 h-20 rounded-full bg-white text-primary-text text-m", children: jsx(Timer, { seconds: time }) })] })] }));
     });
 
-    const CreditCardFormStatus = JSX(({ title, description: dsc, infoCard, sectionInfoTitle, sectionInfo, sectionAdditionalTitle, sectionInfoAdditional, buttonText, interval, intervalExpireAction = () => {
-        return;
-    }, ...props }) => (jsxs(BlockWrapper, { ...props, children: [jsxs("div", { className: "flex flex-col md:flex-row items-center", children: [jsx(Headline, { headlineVersion: "M", title: title, description: dsc, align: "text-left", padding: "p-xl", className: "w-full" }), interval ? (jsx(TimerCircle, { interval: interval, intervalExpireAction: intervalExpireAction })) : null] }), jsx(SectionInfo$1, { title: sectionInfoTitle, items: sectionInfo }), jsx(SectionInfo$1, { title: sectionAdditionalTitle, items: sectionInfoAdditional, countColumns: true }), infoCard?.__html ? (jsx(InfoCard, { __html: infoCard?.__html, icon: infoCard?.icon, link: {
-                    text: infoCard?.link?.text,
-                } })) : null, buttonText ? (jsx(LinkButton, { href: "/natural", text: buttonText, version: "primary", className: "w-full mt-lg" })) : null] })));
+    const CreditCardFormStatus = JSX(({ title, description: dsc, sectionInfoTitle, sectionInfo, sectionAdditionalTitle, sectionInfoAdditional, buttonText, interval, onExpire = noop, ...props }) => (jsxs(BlockWrapper, { ...props, children: [jsxs("div", { className: "flex flex-col md:flex-row items-center", children: [jsx(Headline, { headlineVersion: "M", title: title, description: dsc, align: "text-left", padding: "p-xl", className: "w-full" }), interval ? jsx(TimerCircle, { interval: interval, onEnd: onExpire }) : null] }), jsx(SectionInfo$1, { title: sectionInfoTitle, items: sectionInfo }), jsx(SectionInfo$1, { title: sectionAdditionalTitle, items: sectionInfoAdditional, countColumns: true }), buttonText ? (jsx(Link, { href: "/natural", text: buttonText, version: "primary", className: "w-full mt-lg" })) : null] })));
     const SectionInfo$1 = ({ title, items, countColumns = false, }) => {
         const isMobile = useMobileMode();
         if (!items) {
@@ -6976,9 +6989,9 @@
 
     const FailedStatusContent$1 = JSX(() => (jsx(CreditCardFormStatus, { title: "\u0411\u043B\u0430\u0433\u043E\u0434\u0430\u0440\u0438\u043C \u0412\u0430\u0441 \u0437\u0430 \u043E\u0436\u0438\u0434\u0430\u043D\u0438\u0435", description: "\u0412 \u043D\u0430\u0441\u0442\u043E\u044F\u0449\u0438\u0439 \u043C\u043E\u043C\u0435\u043D\u0442 \u0411\u0430\u043D\u043A \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u043E\u0434\u043E\u0431\u0440\u0438\u0442\u044C \u0412\u0430\u0448\u0443 \u0437\u0430\u044F\u0432\u043A\u0443 \u043D\u0430 \u043A\u0440\u0435\u0434\u0438\u0442. \u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043F\u043E\u0434\u0430\u0442\u044C \u0437\u0430\u044F\u0432\u043A\u0443 \u043F\u043E\u0437\u0436\u0435. \u0421\u043F\u0430\u0441\u0438\u0431\u043E \u0437\u0430 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435 \u0432 \u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB.", buttonText: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430 \u0433\u043B\u0430\u0432\u043D\u0443\u044E" })));
 
-    const PendingStatusContent$1 = JSX(({ handleExpireTimer }) => {
+    const PendingStatusContent$1 = JSX(({ onExpire }) => {
         const { statusInfo } = useRetailFormStore();
-        return (jsx(CreditCardFormStatus, { interval: 300, intervalExpireAction: handleExpireTimer, title: "\u0417\u0430\u044F\u0432\u043A\u0430 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0430", description: "\u041D\u0435 \u0437\u0430\u043A\u0440\u044B\u0432\u0430\u0439\u0442\u0435 \u043E\u043A\u043D\u043E, \u0441\u043A\u043E\u0440\u043E \u0441\u043E\u043E\u0431\u0449\u0438\u043C \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442", sectionInfoTitle: "\u0417\u0430\u044F\u0432\u043B\u0435\u043D\u043D\u044B\u0435 \u0443\u0441\u043B\u043E\u0432\u0438\u044F \u043F\u043E \u043A\u0440\u0435\u0434\u0438\u0442\u0443", sectionInfo: [
+        return (jsx(CreditCardFormStatus, { interval: 300, title: "\u0417\u0430\u044F\u0432\u043A\u0430 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0430", description: "\u041D\u0435 \u0437\u0430\u043A\u0440\u044B\u0432\u0430\u0439\u0442\u0435 \u043E\u043A\u043D\u043E, \u0441\u043A\u043E\u0440\u043E \u0441\u043E\u043E\u0431\u0449\u0438\u043C \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442", sectionInfoTitle: "\u0417\u0430\u044F\u0432\u043B\u0435\u043D\u043D\u044B\u0435 \u0443\u0441\u043B\u043E\u0432\u0438\u044F \u043F\u043E \u043A\u0440\u0435\u0434\u0438\u0442\u0443", sectionInfo: [
                 {
                     label: 'Название продукта',
                     description: 'Кредитная карта',
@@ -6987,7 +7000,7 @@
                     label: 'Категория',
                     description: statusInfo?.cardCategory,
                 },
-            ] }));
+            ], onExpire: onExpire }));
     });
 
     const ReworkStatusContent$1 = JSX(() => {
@@ -7063,20 +7076,20 @@
                 }
             })();
         }, [taskId]);
-        const trackStatus = useCallback(async (stopInterval) => {
+        const trackStatus = useCallback(async (stop) => {
             const res = await getTaskStatus({ taskId });
             if (res && res?.statusCd !== STATUS_TYPE.process) {
-                stopInterval();
+                stop();
                 setStatus(res.statusCd);
             }
         }, [taskId]);
-        useInterval(trackStatus, 30000);
-        const handleExpire = () => setStatus(STATUS_TYPE.rework);
+        useInterval(trackStatus, 30_000);
+        const handleExpire = useCallback(() => setStatus(STATUS_TYPE.rework), []);
         return renderStatus$1(status, handleExpire);
     });
     const renderStatus$1 = (status, handleExpire) => {
         const statusesMap = {
-            IN_PROCESS: jsx(PendingStatusContent$1, { handleExpireTimer: handleExpire }),
+            IN_PROCESS: jsx(PendingStatusContent$1, { onExpire: handleExpire }),
             CANCELLED: jsx(FailedStatusContent$1, {}),
             FAILED: jsx(FailedStatusContent$1, {}),
             DRAFT: jsx(FailedStatusContent$1, {}),
@@ -7126,7 +7139,7 @@
     const StepsNavigationButtons$1 = JSX(({ step, isSending, onPrevStep }) => {
         const isFirstStep = step === 0;
         const isFinalStep = step === 5;
-        return (jsxs("div", { className: "flex justify-between gap-m", children: [jsx(Button, { onClick: onPrevStep, type: "button", version: "secondary", disabled: isFirstStep, children: "\u041D\u0430\u0437\u0430\u0434" }), jsx(SubmitButton$1, { isLoading: isSending, children: isFinalStep ? 'Отправить заявку' : 'Далее' })] }));
+        return (jsxs("div", { className: "flex justify-between gap-m", children: [jsx(Button, { version: "secondary", disabled: isFirstStep, onClick: onPrevStep, children: "\u041D\u0430\u0437\u0430\u0434" }), jsx(SubmitButton$1, { isLoading: isSending, children: isFinalStep ? 'Отправить заявку' : 'Далее' })] }));
     });
 
     const getAdditionalInfoData = (formData) => {
@@ -7866,12 +7879,8 @@
         return (jsx("div", { className: "py-lg px-5xl bg-white col-span-12", children: jsxs("div", { children: [jsxs("span", { className: "font-bold mr-s", children: ["\u0428\u0430\u0433 ", step, " \u0438\u0437 ", totalSteps, "."] }), stepsTitles[step] || null, jsx(ProgressBar, { step: progress, showPercentage: false })] }) }));
     });
 
-    const CreditFormStatus = JSX(({ title, description: dsc, infoCard, sectionInfoTitle, sectionInfo, sectionAdditionalTitle, sectionInfoAdditional, buttonText, interval, intervalExpireAction = () => {
-        return;
-    }, ...props }) => {
-        return (jsxs(BlockWrapper, { ...props, children: [jsxs("div", { className: "flex flex-col md:flex-row items-center", children: [jsx(Headline, { headlineVersion: "M", title: title, description: dsc, align: "text-left", padding: "p-xl", className: "w-full" }), interval ? (jsx(TimerCircle, { interval: interval, intervalExpireAction: intervalExpireAction })) : null] }), jsx(SectionInfo, { title: sectionInfoTitle, items: sectionInfo }), jsx(SectionInfo, { title: sectionAdditionalTitle, items: sectionInfoAdditional, countColumns: true }), infoCard?.__html ? (jsx(InfoCard, { __html: infoCard?.__html, icon: infoCard?.icon, link: {
-                        text: infoCard?.link?.text,
-                    } })) : null, buttonText ? (jsx(LinkButton, { href: "/natural", text: buttonText, version: "primary", className: "w-full mt-lg" })) : null] }));
+    const CreditFormStatus = JSX(({ title, description: dsc, sectionInfoTitle, sectionInfo, sectionAdditionalTitle, sectionInfoAdditional, buttonText, interval, onExpire = noop, ...props }) => {
+        return (jsxs(BlockWrapper, { ...props, children: [jsxs("div", { className: "flex flex-col md:flex-row items-center", children: [jsx(Headline, { headlineVersion: "M", title: title, description: dsc, align: "text-left", padding: "p-xl", className: "w-full" }), interval ? jsx(TimerCircle, { interval: interval, onEnd: onExpire }) : null] }), jsx(SectionInfo, { title: sectionInfoTitle, items: sectionInfo }), jsx(SectionInfo, { title: sectionAdditionalTitle, items: sectionInfoAdditional, countColumns: true }), buttonText ? (jsx(Link, { href: "/natural", text: buttonText, version: "primary", className: "w-full mt-lg" })) : null] }));
     });
     const SectionInfo = ({ title, items, countColumns = false, }) => {
         const isMobile = useMobileMode();
@@ -7884,9 +7893,9 @@
 
     const FailedStatusContent = JSX(() => (jsx(CreditFormStatus, { title: "\u0411\u043B\u0430\u0433\u043E\u0434\u0430\u0440\u0438\u043C \u0412\u0430\u0441 \u0437\u0430 \u043E\u0436\u0438\u0434\u0430\u043D\u0438\u0435", description: "\u0412 \u043D\u0430\u0441\u0442\u043E\u044F\u0449\u0438\u0439 \u043C\u043E\u043C\u0435\u043D\u0442 \u0411\u0430\u043D\u043A \u043D\u0435 \u043C\u043E\u0436\u0435\u0442 \u043E\u0434\u043E\u0431\u0440\u0438\u0442\u044C \u0412\u0430\u0448\u0443 \u0437\u0430\u044F\u0432\u043A\u0443 \u043D\u0430 \u043A\u0440\u0435\u0434\u0438\u0442. \u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043F\u043E\u0434\u0430\u0442\u044C \u0437\u0430\u044F\u0432\u043A\u0443 \u043F\u043E\u0437\u0436\u0435. \u0421\u043F\u0430\u0441\u0438\u0431\u043E \u0437\u0430 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435 \u0432 \u0410\u041E \u00AB\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u00BB.", buttonText: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430 \u0433\u043B\u0430\u0432\u043D\u0443\u044E" })));
 
-    const PendingStatusContent = JSX(({ handleExpireTimer }) => {
+    const PendingStatusContent = JSX(({ onExpire }) => {
         const { statusInfo } = useRetailFormStore();
-        return (jsx(CreditFormStatus, { interval: 300, intervalExpireAction: handleExpireTimer, title: "\u0417\u0430\u044F\u0432\u043A\u0430 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0430", description: "\u041D\u0435 \u0437\u0430\u043A\u0440\u044B\u0432\u0430\u0439\u0442\u0435 \u043E\u043A\u043D\u043E, \u0441\u043A\u043E\u0440\u043E \u0441\u043E\u043E\u0431\u0449\u0438\u043C \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442", sectionInfoTitle: "\u0417\u0430\u044F\u0432\u043B\u0435\u043D\u043D\u044B\u0435 \u0443\u0441\u043B\u043E\u0432\u0438\u044F \u043F\u043E \u043A\u0440\u0435\u0434\u0438\u0442\u0443", sectionInfo: [
+        return (jsx(CreditFormStatus, { interval: 300, title: "\u0417\u0430\u044F\u0432\u043A\u0430 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0430", description: "\u041D\u0435 \u0437\u0430\u043A\u0440\u044B\u0432\u0430\u0439\u0442\u0435 \u043E\u043A\u043D\u043E, \u0441\u043A\u043E\u0440\u043E \u0441\u043E\u043E\u0431\u0449\u0438\u043C \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442", sectionInfoTitle: "\u0417\u0430\u044F\u0432\u043B\u0435\u043D\u043D\u044B\u0435 \u0443\u0441\u043B\u043E\u0432\u0438\u044F \u043F\u043E \u043A\u0440\u0435\u0434\u0438\u0442\u0443", sectionInfo: [
                 {
                     label: 'Название продукта',
                     description: 'Кредит на любые цели',
@@ -7907,7 +7916,7 @@
                     label: 'Тип платежа',
                     description: statusInfo?.calculator?.isAnnuity ? 'Аннуитетный' : 'Дифференцированный',
                 },
-            ] }));
+            ], onExpire: onExpire }));
     });
 
     const ReworkStatusContent = JSX(() => {
@@ -7969,20 +7978,20 @@
                 }
             })();
         }, [taskId]);
-        const trackStatus = useCallback(async (stopInterval) => {
+        const trackStatus = useCallback(async (stop) => {
             const res = await getTaskStatus({ taskId });
             if (res && res?.statusCd !== STATUS_TYPE.process) {
-                stopInterval();
+                stop();
                 setStatus(res.statusCd);
             }
         }, [taskId]);
-        useInterval(trackStatus, 30000);
-        const handleExpire = () => setStatus(STATUS_TYPE.rework);
+        useInterval(trackStatus, 30_000);
+        const handleExpire = useCallback(() => setStatus(STATUS_TYPE.rework), []);
         return renderStatus(status, handleExpire);
     });
-    const renderStatus = (status, handleExpire) => {
+    const renderStatus = (status, onExpire) => {
         const statusesMap = {
-            IN_PROCESS: jsx(PendingStatusContent, { handleExpireTimer: handleExpire }),
+            IN_PROCESS: jsx(PendingStatusContent, { onExpire: onExpire }),
             CANCELLED: jsx(FailedStatusContent, {}),
             FAILED: jsx(FailedStatusContent, {}),
             DRAFT: jsx(FailedStatusContent, {}),
@@ -8004,7 +8013,7 @@
     const StepsNavigationButtons = JSX(({ step, onPrevStep, isSending }) => {
         const isFirstStep = step === 0;
         const isFinalStep = step === 5;
-        return (jsxs("div", { className: 'flex justify-between gap-m', children: [jsx(Button, { onClick: onPrevStep, type: "button", version: "secondary", disabled: isFirstStep, children: "\u041D\u0430\u0437\u0430\u0434" }), jsx(SubmitButton$1, { isLoading: isSending, children: isFinalStep ? 'Отправить заявку' : 'Далее' })] }));
+        return (jsxs("div", { className: 'flex justify-between gap-m', children: [jsx(Button, { version: "secondary", disabled: isFirstStep, onClick: onPrevStep, children: "\u041D\u0430\u0437\u0430\u0434" }), jsx(SubmitButton$1, { isLoading: isSending, children: isFinalStep ? 'Отправить заявку' : 'Далее' })] }));
     });
 
     const PAYMENT_TYPE_DATA = {
@@ -8904,8 +8913,7 @@
         const { navigationItems } = rest.options?.page?.navigation ?? {};
         const common = rest.options?.page?.common ?? {};
         const { documents, relatedEnterprises, contacts, mediaLinks = [], horizontalNavigationTitle, feedbackButton, license, otherLinks = [], } = footer ?? {};
-        const linkStyle = '!text-left text-s font-light';
-        return (jsxs(BlockWrapper, { tag: "footer", className: style('grid gap-y-xl p-4xl pb-24 lg:p-xl', className), ...rest, children: [renderLogoSearchBar(common, navigationItems), jsxs("div", { className: "flex flex-col lg:flex-row items-center @lg:items-stretch gap-lg lg:gap-6xl ", children: [jsx(Sitemap, { navigationItems: navigationItems }), jsx("div", { className: "border-t border-main-divider lg:hidden w-full" }), jsxs("div", { className: style(LEFT_COLUMN_STYLE, 'flex flex-col shrink-0 overflow-hidden space-y-xl'), children: [jsx(Contacts, { items: contacts }), feedbackButton ? (jsx(LinkButton, { className: "w-full", version: "primary", ...feedbackButton })) : null, mediaLinks.map((_, i) => (jsx(SocialMedia, { media: _?.links ?? [], showButtonText: false, stretched: true, children: _?.title }, String(i)))), otherLinks.map((_, i) => (jsx(LinkButton, { className: linkStyle, version: "link", ..._, children: _?.text }, String(i))))] })] }), jsx(HorizontalNavigation, { title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, { links: documents, license: license })] }));
+        return (jsxs(BlockWrapper, { tag: "footer", className: style('grid gap-y-xl p-4xl pb-24 lg:p-xl', className), ...rest, children: [renderLogoSearchBar(common, navigationItems), jsxs("div", { className: "flex flex-col lg:flex-row items-center @lg:items-stretch gap-lg lg:gap-6xl ", children: [jsx(Sitemap, { navigationItems: navigationItems }), jsx("div", { className: "border-t border-main-divider lg:hidden w-full" }), jsxs("div", { className: style(LEFT_COLUMN_STYLE, 'flex flex-col shrink-0 overflow-hidden space-y-xl'), children: [jsx(Contacts, { items: contacts }), feedbackButton ? (jsx(LinkButton, { className: "w-full", version: "primary", ...feedbackButton })) : null, mediaLinks.map((_, i) => (jsx(SocialMedia, { media: _?.links ?? [], showButtonText: false, stretched: true, children: _?.title }, String(i)))), otherLinks.map((_, i) => (jsx(Link, { className: "text-s font-light", ..._ }, `${_.href}_${i}`)))] })] }), jsx(HorizontalNavigation, { title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, { links: documents, license: license })] }));
     });
 
     const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: style('space-y-m', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isEmbedded: true }), calendar ? renderCalendar(calendar) : null] })));
@@ -8927,13 +8935,8 @@
     const GrantSupport = UniBlock(({ className, title, button, regionSource, data, ...rest }) => {
         const [region, setRegion] = useState({ key: '' });
         const regions = regionSource?.regions ?? [];
-        const buttonStyle = getRegularButtonClasses({
-            className: 'text-white',
-            version: button?.version || 'primary',
-        });
         const regionHref = regions?.find((_) => _.name === region.key)?.href;
-        const buttonText = button?.text ? button.text : 'Перейти';
-        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container space-y-m", children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "@xl:text-center" }) : null, regions ? (jsx(SelectControl, { label: "\u0412\u0430\u0448 \u0440\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", isSearch: true, options: regions.map(({ name = '' }) => ({ key: name, text: name })), value: region, onChange: setRegion })) : null, regionHref ? (jsx("div", { className: "text-center", children: jsx(LinkButton, { href: regionHref, target: "_blank", className: style('p-m w-full @xl:w-auto', buttonStyle), data: getAspectsWithInclude(data, region?.key), children: buttonText }) })) : null] }) }));
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container space-y-m", children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "@xl:text-center" }) : null, regions ? (jsx(SelectControl, { label: "\u0412\u0430\u0448 \u0440\u0435\u0433\u0438\u043E\u043D", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0435\u0433\u0438\u043E\u043D", isSearch: true, options: regions.map(({ name = '' }) => ({ key: name, text: name })), value: region, onChange: setRegion })) : null, regionHref ? (jsx("div", { className: "text-center", children: jsx(Link, { className: style('w-full @xl:w-auto'), href: regionHref, target: "_blank", version: button?.version ?? 'primary', data: getAspectsWithInclude(data, region?.key), children: button?.text ? button.text : 'Перейти' }) })) : null] }) }));
     });
 
     function useActiveRoute(items = []) {
@@ -9273,13 +9276,7 @@
     };
 
     /** @deprecated */
-    function renderArrows({ dec, inc, canDec, canInc, btnClass, className = '', }) {
-        const isVisible = canDec || canInc;
-        if (!isVisible) {
-            return null;
-        }
-        return (jsxs("div", { children: [canDec ? (jsx(ArrowButton, { className: style('absolute z-40', btnClass[0], className), onClick: dec, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left", disabled: !canDec })) : null, canInc ? (jsx(ArrowButton, { className: style('absolute z-40 rotate-180', btnClass[1], className), onClick: inc, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right", disabled: !canInc })) : null] }));
-    }
+    const renderArrows = ({ className, btnClass, canDec, canInc, dec, inc, }) => canDec || canInc ? (jsxs("div", { children: [canDec ? (jsx(ArrowLeftButton, { className: style('absolute z-40', btnClass[0], className), onClick: dec })) : null, canInc ? (jsx(ArrowRightButton, { className: style('absolute z-40', btnClass[1], className), onClick: inc })) : null] })) : null;
 
     const InsuranceAmountBlockInner = JSX(({ className = '', cards = [], button }) => {
         const [selectedCardIndex, setSelectedCardIndex] = useState(0);
@@ -9430,11 +9427,7 @@
         return docFormat.includes('/') ? docFormat.replace(regexp, '') : docFormat;
     };
 
-    const ReportDialog = JSX(({ href, __html, target, onClose }) => {
-        const router = useRouter();
-        const adjustedHref = adjustHref(router)(href);
-        return (jsxs(Dialog, { className: "my-6xl min-h-fit w-fit mx-auto", onClose: onClose, children: [__html ? jsx(RichText, { __html: __html }) : null, jsxs("div", { className: "flex flex-row mx-auto w-fit gap-lg py-lg", children: [jsx(LinkButton, { text: "\u042F \u0441\u043E\u0433\u043B\u0430\u0441\u0435\u043D", version: "primary", target: target, href: adjustedHref, onClick: onClose }), jsx(Button, { type: "button", version: "secondary", onClick: onClose, children: "\u042F \u043D\u0435 \u0441\u043E\u0433\u043B\u0430\u0441\u0435\u043D" })] }), jsx("div", { children: "\u041D\u0430\u0436\u0438\u043C\u0430\u044F \u043A\u043D\u043E\u043F\u043A\u0443 \u00AB\u042F \u0421\u041E\u0413\u041B\u0410\u0421\u0415\u041D\u00BB \u043D\u0438\u0436\u0435 \u0412\u044B \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u0435\u0442\u0435 \u0434\u0430\u043D\u043D\u044B\u0435 \u0443\u0441\u043B\u043E\u0432\u0438\u044F. \u0420\u0430\u0441\u043F\u0440\u043E\u0441\u0442\u0440\u0430\u043D\u0435\u043D\u0438\u0435 \u0438\u043B\u0438 \u0440\u0430\u0441\u043A\u0440\u044B\u0442\u0438\u0435 \u043B\u044E\u0431\u043E\u0439 \u0447\u0430\u0441\u0442\u0438 \u0434\u0430\u043D\u043D\u043E\u0433\u043E \u0417\u0430\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u044F \u0438\u043B\u0438 \u043B\u044E\u0431\u043E\u0439 \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u0438, \u0438\u043B\u0438 \u0440\u0435\u043A\u043E\u043C\u0435\u043D\u0434\u0430\u0446\u0438\u0438 \u0432 \u043D\u0435\u043C \u0437\u0430\u043F\u0440\u0435\u0449\u0435\u043D\u043E.\u00BB" })] }));
-    });
+    const ReportDialog = JSX(({ href, __html, target, onClose }) => (jsxs(Dialog, { className: "my-6xl min-h-fit w-fit mx-auto", onClose: onClose, children: [__html ? jsx(RichText, { __html: __html }) : null, jsxs("div", { className: "flex flex-row mx-auto w-fit gap-lg py-lg", children: [jsx(Link, { href: href, target: target, version: "primary", ariaLabel: "\u0421\u0441\u044B\u043B\u043A\u0430 \u043D\u0430 \u0441\u043E\u0433\u043B\u0430\u0441\u0438\u0435", onClick: onClose, children: "\u042F \u0441\u043E\u0433\u043B\u0430\u0441\u0435\u043D" }), jsx(Button, { type: "button", version: "secondary", onClick: onClose, children: "\u042F \u043D\u0435 \u0441\u043E\u0433\u043B\u0430\u0441\u0435\u043D" })] }), jsx("div", { children: "\u041D\u0430\u0436\u0438\u043C\u0430\u044F \u043A\u043D\u043E\u043F\u043A\u0443 \u00AB\u042F \u0421\u041E\u0413\u041B\u0410\u0421\u0415\u041D\u00BB \u043D\u0438\u0436\u0435 \u0412\u044B \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u0435\u0442\u0435 \u0434\u0430\u043D\u043D\u044B\u0435 \u0443\u0441\u043B\u043E\u0432\u0438\u044F. \u0420\u0430\u0441\u043F\u0440\u043E\u0441\u0442\u0440\u0430\u043D\u0435\u043D\u0438\u0435 \u0438\u043B\u0438 \u0440\u0430\u0441\u043A\u0440\u044B\u0442\u0438\u0435 \u043B\u044E\u0431\u043E\u0439 \u0447\u0430\u0441\u0442\u0438 \u0434\u0430\u043D\u043D\u043E\u0433\u043E \u0417\u0430\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u044F \u0438\u043B\u0438 \u043B\u044E\u0431\u043E\u0439 \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u0438, \u0438\u043B\u0438 \u0440\u0435\u043A\u043E\u043C\u0435\u043D\u0434\u0430\u0446\u0438\u0438 \u0432 \u043D\u0435\u043C \u0437\u0430\u043F\u0440\u0435\u0449\u0435\u043D\u043E.\u00BB" })] })));
 
     const ReportDialogButton = JSX(({ text, href, target, __html, icon }) => {
         const { open } = useDialog(ReportDialog);
@@ -9569,7 +9562,7 @@
         const Tag = tag;
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { text, description, icon, count, tabName, ...link } = item;
-        return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), role: "tablist", "aria-label": "\u0421\u043F\u0438\u0441\u043E\u043A \u0442\u0430\u0431\u043E\u0432", onClick: onClick, ...link, children: jsxs("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), role: "tab", "aria-label": `Таб ${text}`, children: [renderTabItemInner({
+        return (jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), "aria-label": "\u0421\u043F\u0438\u0441\u043E\u043A \u0442\u0430\u0431\u043E\u0432", onClick: onClick, ...link, children: jsxs("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), role: "tab", "aria-label": `Таб ${text}`, children: [renderTabItemInner({
                         text,
                         description,
                         icon,
@@ -9631,7 +9624,7 @@
             ? [filtersCheckbox.slice(0, visibleFiltersNum), filtersCheckbox.slice(visibleFiltersNum)]
             : [filtersCheckbox, []];
         const [isUnfolded, { toggle }] = useBool(false);
-        return (jsx("div", { children: filters?.length ? (jsx("div", { children: jsxs(Foldable, { children: [jsxs("div", { children: [jsx("div", { className: COMMON_FILTERS_STYLES, children: visibleFilters }), jsx(FoldableSection, { className: COMMON_FILTERS_STYLES, isUnfolded: isUnfolded, children: hiddenFilters })] }), jsxs("div", { className: "flex space-x-lg", children: [onlyOffice ? (jsx(DefaultFoldButton, { label: isUnfolded ? 'Меньше фильтров' : 'Больше фильтров', isUnfolded: isUnfolded, embedded: true, onClick: toggle })) : null, jsxs(Button, { embedded: true, onClick: reset, children: [jsx(ButtonTitle, { children: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440" }), jsx(Icon, { name: "CloseIcon", size: "small" })] })] })] }) })) : null }));
+        return (jsx("div", { children: filters?.length ? (jsx("div", { children: jsxs(Foldable, { children: [jsxs("div", { children: [jsx("div", { className: COMMON_FILTERS_STYLES, children: visibleFilters }), jsx(FoldableSection, { className: COMMON_FILTERS_STYLES, isUnfolded: isUnfolded, children: hiddenFilters })] }), jsxs("div", { className: "flex space-x-lg", children: [onlyOffice ? (jsx(DefaultFoldButton, { label: isUnfolded ? 'Меньше фильтров' : 'Больше фильтров', isUnfolded: isUnfolded, embedded: true, short: true, onClick: toggle })) : null, jsxs(Button, { embedded: true, onClick: reset, children: [jsx(ButtonTitle, { children: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440" }), jsx(Icon, { name: "CloseIcon", size: "small" })] })] })] }) })) : null }));
     });
 
     const renderButtonsGroup = (data, activeButton, onButtonClick) => {
@@ -9790,7 +9783,7 @@
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount: slides?.length || 0,
         });
-        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden', className), defaultPadding: "pt-6xl", padding: padding, ...rest, children: [jsx("div", { className: "flex duration-1000", style: { transform: `translateX(-${activeSlideIndex * 100}%)` }, role: "list", children: slides.map(({ productBlock }, i) => (jsx("div", { className: "box-border grow-0 shrink-0 basis-full", role: "listitem", children: jsx(BaseProductTile, { className: "pl-6xl h-full", headlineVersion: "M", isFullWidthTitle: false, ...productBlock, ...rest }) }, String(i)))) }), jsxs("div", { className: "relative pr-xs mt-m -mb-m flex gap-xs box-border", children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, itemClassName: 'h-40 flex items-stretch w-screen', gap: 8, children: slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex })) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: style('left-6', scrollButtonStyle$1), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: style('right-6', scrollButtonStyle$1), onClick: scroll.scrollRight })) : null] })] }));
+        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden', className), defaultPadding: "pt-6xl", padding: padding, ...rest, children: [jsx("div", { className: "flex duration-1000", style: { transform: `translateX(-${activeSlideIndex * 100}%)` }, role: "list", children: slides.map(({ productBlock }, i) => (jsx("div", { className: "box-border grow-0 shrink-0 basis-full", role: "listitem", children: jsx(BaseProductTile, { className: "pl-6xl h-full", headlineVersion: "M", isFullWidthTitle: false, ...productBlock, ...rest }) }, String(i)))) }), jsxs("div", { className: "relative pr-xs mt-m -mb-m flex gap-xs box-border", children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, itemClassName: 'h-40 flex items-stretch w-screen', gap: 8, children: slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex })) }), scroll.canScrollLeft ? (jsx(ArrowLeftButton, { className: style('left-6', scrollButtonStyle$1), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ArrowRightButton, { className: style('right-6', scrollButtonStyle$1), onClick: scroll.scrollRight })) : null] })] }));
     });
     const renderNavButton = ({ activeSlideIndex, onClick }) => ({ nav }, i) => {
         const isActive = i === activeSlideIndex;
@@ -9836,7 +9829,7 @@
                 extraProps: { className: 'w-full', padding: 'p-0' },
             }) }));
         const isAccordion = foldButtonVersion === 'accordion';
-        const foldButton = (jsx(DefaultFoldButton, { className: style('w-full', { 'text-h6 my-lg': isAccordion }), label: label, isUnfolded: isUnfolded, embedded: isAccordion, onClick: toggle }));
+        const foldButton = (jsx(DefaultFoldButton, { className: style(isAccordion ? 'text-h6 my-lg' : 'text-h4'), label: label, isUnfolded: isUnfolded, embedded: isAccordion, onClick: toggle }));
         return (jsx(BlockWrapper, { className: style('w-full border-0 border-b border-solid border-main-divider last:border-b-0', className), defaultPadding: "p-0", tag: "div", version: "transparent", role: role, ...rest, children: jsxs(Foldable, { children: [isFoldButtonOnTop ? foldButton : foldableSection, isFoldButtonOnTop ? foldableSection : foldButton] }) }));
     }, { childrenTypes: { exclude: ['RollupItem'] } });
 
@@ -9865,7 +9858,7 @@
 
     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, }) => (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(Button, { className: "order-6", version: "primary", onClick: onClick, children: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435" })] })] })));
     const onSelectedBranch = (onChange) => (value) => {
         onChange({ selectedBranch: value, selectedCaseVolume: '', selectedBoxSize: '' });
     };
@@ -10030,7 +10023,7 @@
             itemCount: items?.length || 0,
         });
         useEffect(() => scrollToSelected(containerRef.current, items, activeItem), []);
-        return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, itemClassName: scrollStyle[tabsType].item, gap: scrollStyle[tabsType].gap, children: items.map(renderTab(activeItem, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: style('left-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: style('right-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollRight })) : null] }));
+        return (jsxs("div", { className: style('relative overflow-x-auto no-scrollbar', className), children: [jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, itemClassName: scrollStyle[tabsType].item, gap: scrollStyle[tabsType].gap, children: items.map(renderTab(activeItem, onChange, tabsType)) }), scroll.canScrollLeft ? (jsx(ArrowLeftButton, { className: style('left-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ArrowRightButton, { className: style('right-6', scrollButtonStyle, scrollStyle[tabsType].buttonTop), onClick: scroll.scrollRight })) : null] }));
     });
     const scrollToSelected = (container, items, activeItem) => {
         const selectedIndex = items.findIndex((_) => _ === activeItem);
@@ -10136,7 +10129,7 @@
     };
     const TableCarouselContainer = JSX(({ children, activeIndex, columnWidth, version = 'comparison' }) => (jsx("div", { className: "flex flex-1 overflow-hidden", children: jsx("div", { className: carouselContainerClassesMap[version], style: { transform: `translateX(-${activeIndex * columnWidth}px)` }, children: children }) })));
 
-    const TableInnerButton = JSX(({ className = '', isOpen, onClick }) => (jsx(LinkButton, { className: className, appendRight: jsx(Img, { image: { icon: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon' }, width: "24", height: "24" }), text: isOpen ? 'Скрыть' : 'Показать', version: "gray", onClick: onClick })));
+    const TableInnerButton = JSX(({ className = '', isOpen, onClick }) => (jsx(DefaultFoldButton, { className: className, label: isOpen ? 'Скрыть' : 'Показать', isUnfolded: isOpen, version: "secondary", short: true, onClick: onClick })));
 
     const renderButtonsCellData = ({ buttons }) => renderButtonsSection(buttons, {
         buttonClassName: 'basis-0',
@@ -10281,7 +10274,7 @@
         const rows = (rowData || []).map((row, i) => (jsx(TariffsTableRow, { row: row, activeIndex: activeIndex, rowIdx: i, ...rest }, String(i))));
         const [visibleRows, hiddenRows] = hiddenRowsNum > 0 ? [rows.slice(0, -hiddenRowsNum), rows.slice(-hiddenRowsNum)] : [rows, []];
         const [isUnfolded, { toggle }] = useBool(false);
-        return (jsxs(BlockWrapper, { className: style('relative space-y-6xl @4xl:space-y-xl', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isEmbedded: true, align: "text-center" }), jsx("div", { className: "space-y-m overflow-hidden", children: hiddenRowsNum > 0 ? (jsxs(Foldable, { children: [jsxs(TariffsTableWrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] }), jsx(DefaultFoldButton, { className: "w-full", isUnfolded: isUnfolded, onClick: toggle })] })) : (jsx(TariffsTableWrapper, { controls: controls, children: rows })) })] }));
+        return (jsxs(BlockWrapper, { className: style('relative space-y-6xl @4xl:space-y-xl', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isEmbedded: true, align: "text-center" }), jsx("div", { className: "space-y-m overflow-hidden", children: hiddenRowsNum > 0 ? (jsxs(Foldable, { children: [jsxs(TariffsTableWrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] }), jsx(DefaultFoldButton, { className: "text-h4", isUnfolded: isUnfolded, onClick: toggle })] })) : (jsx(TariffsTableWrapper, { controls: controls, children: rows })) })] }));
     });
 
     const TextBlock = JSX(({ className = '', title, description, iconVersion, __html, richVersion, ...rest }) => (jsxs(BlockWrapper, { className: style('flex gap-s sm:gap-m group-data-secondary:bg-primary-main/10', className), ...rest, children: [iconVersion === 'small' ? renderIcon() : null, jsxs("div", { className: "flex flex-col w-fit gap-2xs sm:gap-xs", children: [title ? (jsx(Text, { size: "text-l", font: "font-normal", color: "text-primary-text group-data-secondary:text-white", children: title })) : null, description ? renderDescription(description) : null, __html ? jsx(RichText, { richVersion: richVersion, __html: __html }) : null] })] })));
@@ -10468,7 +10461,7 @@
                 globalThis.document?.body.classList.remove('no-scrollbar', 'overflow-hidden');
             }
         }, [hasDialogs]);
-        return hasDialogs ? (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', {
+        return hasDialogs ? (jsx("div", { className: "fixed inset-0 z-50", 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, // TODO Чего?)
                 }), children: dialog }, String(id || i)))) })) : null;
     });
@@ -10487,7 +10480,7 @@
                 left: `${popup.left}px`,
                 top: `${popup.top}px`,
                 ...(popup.width ? { width: `${popup.width}px` } : {}),
-            }, role: "dialog", children: popup.popup })) : null;
+            }, role: "dialog", title: "\u0412\u0441\u043F\u043B\u044B\u0432\u0430\u044E\u0449\u0435\u0435 \u043E\u043A\u043D\u043E", children: popup.popup })) : null;
     });
 
     const HEADER_SLOT = 'header';
@@ -10520,7 +10513,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.760";
+    const packageVersion = "0.14.762";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;