@redneckz/wildless-cms-uni-blocks 0.12.10 → 0.12.12

package/bundle/bundle.umd.js

@@ -337,7 +337,7 @@
         transparent: 'bg-transparent text-primary-text',
         '': '',
     };
-    const BlockWrapper = JSX(({ className, version = 'primary', isTheme = true, defaultPadding = 'p-m', padding, block, tag = 'section', role, children, }) => {
+    const BlockWrapper = JSX(({ className, version = 'primary', isTheme = true, defaultPadding = 'p-xl', padding, block, tag = 'section', role, children, }) => {
         const Tag = tag;
         const ref = useBlockIntersectionObserver(block);
         const [isHidden, setHidden] = useState(false);
@@ -345,7 +345,7 @@
             setHidden(Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)));
         }), [block]);
         const isGroup = version && isTheme;
-        return (jsx(Tag, { className: style('font-sans', isGroup ? 'group' : '', blockStyles[version], isHidden ? 'hidden' : '', padding || defaultPadding, className), ...(isGroup ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
+        return (jsx(Tag, { className: style('@container font-sans', isGroup ? 'group' : '', blockStyles[version], isHidden ? 'hidden' : '', padding || defaultPadding, className), ...(isGroup ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor, ref } : {}), role: role, children: children }));
     });
 
     const headingTag = (tag) => tag;
@@ -622,7 +622,7 @@
 
     const ButtonInner = JSX((props) => {
         const { text, aboveText, appendLeft, appendRight, version = 'primary' } = props;
-        return (jsxs("div", { className: style(getButtonStyle(props), 'flex gap-2'), children: [appendLeft ? jsx("div", { className: iconStyleMap[version], children: appendLeft }) : null, isWithText(props) ? (jsxs("div", { children: [aboveText ? jsx("div", { className: "text-xs font-light text-left", children: aboveText }) : null, jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-0.5' : 'text-l'}`, children: text })] })) : null, appendRight ? jsx("div", { className: iconStyleMap[version], children: appendRight }) : null] }));
+        return (jsxs("div", { className: style(getButtonStyle(props), 'flex gap-2'), children: [appendLeft ? jsx("div", { className: iconStyleMap[version], children: appendLeft }) : null, isWithText(props) ? (jsxs("div", { 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: iconStyleMap[version], children: appendRight }) : null] }));
     });
     const getButtonStyle = (props) => {
         const { version, aboveText, rounded } = props;
@@ -687,7 +687,7 @@
         const validStyle = valid
             ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
             : 'border-error';
-        return (jsxs("div", { className: style('relative', className), children: [jsxs("label", { children: [label ? (jsx("div", { className: "mb-2", children: jsx(Text, { size: "text-m", font: "font-light", children: label }) })) : null, jsx("input", { className: style('w-full border rounded-md text-primary-text outline-none p-4', paddingStyle, validStyle, inputClassName), id: id, name: name || id, placeholder: placeholder, type: type, value: value, onInput: handleChange, onFocus: onFocus, onBlur: onBlur, pattern: pattern }, key)] }), children] }));
+        return (jsxs("div", { className: style('relative', className), children: [jsxs("label", { children: [label ? (jsx("div", { className: "mb-xs", children: jsx(Text, { size: "text-m", font: "font-light", children: label }) })) : null, jsx("input", { className: style('w-full border rounded-md text-primary-text outline-none p-4', paddingStyle, validStyle, inputClassName), id: id, name: name || id, placeholder: placeholder, type: type, value: value, onInput: handleChange, onFocus: onFocus, onBlur: onBlur, pattern: pattern }, key)] }), children] }));
     });
 
     const InputControl = JSX(({ className, label, value = '', error, onChange, onBlur }) => (jsxs("div", { className: className, children: [jsx(Input, { type: "text", "aria-label": label, label: label, valid: Boolean(!error), value: value, onChange: onChange, onBlur: onBlur }), jsx("div", { className: "h-2", children: error ? (jsx(Text, { size: "text-xs", font: "font-light", color: "text-error", children: error })) : null })] })));
@@ -798,7 +798,7 @@
             onChange && onChange(option);
         }, [onChange]);
         const isSelected = (option) => option.key === value?.key;
-        return (jsxs("div", { className: className, ref: wrapperRef, children: [label ? (jsx("div", { className: "mb-2", children: jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: label }) })) : null, jsxs("div", { className: style('relative', isOpen ? 'z-20' : 'z-10'), children: [jsxs("div", { className: style('text-l flex justify-between items-center text-primary-text cursor-pointer', getBorderStyle(isBorder, valid)), onClick: toggle, children: [jsx("p", { className: "p-4 pr-8 h-14 overflow-hidden text-ellipsis whitespace-nowrap", children: formatOption(value) || placeholder }), jsx(Icon, { className: style('absolute right-3', isOpen ? '' : 'rotate-180'), name: "ArrowUpIcon", width: "16", height: "16" })] }), options?.length ? (jsx("div", { className: style('h-0', isOpen ? '' : 'overflow-hidden'), children: jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: options.map(renderOption(handleChange, isOpen, isSelected)) }) })) : null] })] }));
+        return (jsxs("div", { className: className, ref: wrapperRef, children: [label ? (jsx("div", { className: "mb-xs", children: jsx(Text, { size: "text-m", color: "text-primary-text", font: "font-light", children: label }) })) : null, jsxs("div", { className: style('relative', isOpen ? 'z-20' : 'z-10'), children: [jsxs("div", { className: style('text-l flex justify-between items-center text-primary-text cursor-pointer', getBorderStyle(isBorder, valid)), onClick: toggle, children: [jsx("p", { className: "p-4 pr-8 h-14 overflow-hidden text-ellipsis whitespace-nowrap", children: formatOption(value) || placeholder }), jsx(Icon, { className: style('absolute right-3', isOpen ? '' : 'rotate-180'), name: "ArrowUpIcon", width: "16", height: "16" })] }), options?.length ? (jsx("div", { className: style('h-0', isOpen ? '' : 'overflow-hidden'), children: jsx("div", { className: "bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: options.map(renderOption(handleChange, isOpen, isSelected)) }) })) : null] })] }));
     });
     const renderOption = (handleChange, isOpen, isSelected) => (option, i) => (jsxs("div", { onClick: () => {
             handleChange(option);
@@ -810,7 +810,7 @@
 
     const renderAcquiringRegion = ({ regions, field }) => (jsxs("div", { className: "mb-4 pb-1 border-b border-b-main-divider sm:flex sm:justify-between sm:gap-5 sm:mb-7 sm:border-none sm:pb-0", children: [jsx("div", { className: "mb-3 sm:mb-0 sm:w-1/2", children: jsx(SelectControl, { label: "\u0412\u0438\u0434 \u044D\u043A\u0432\u0430\u0439\u0440\u0438\u043D\u0433\u0430", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u044D\u043A\u0432\u0430\u0439\u0440\u0438\u043D\u0433", options: ACQUIRING_TYPES.map(({ name: key = '' }) => ({ key, text: key })), ...withValidator(field('acquiringType'), defaultValidator) }) }), jsx("div", { className: "mb-3 sm:mb-0 sm:w-1/2", children: jsx(SelectControl, { label: "\u0410\u0434\u0440\u0435\u0441", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441", options: regions.map(({ code = '', name = '' }) => ({ key: code, text: name })), ...withValidator(field('region'), defaultValidator) }) })] }));
 
-    const SlideCheckbox = JSX(({ value = false, text, type = 'checkbox', onChange }) => (jsxs("div", { role: type, "aria-checked": value, className: "flex justify-start items-center w-full cursor-pointer mb-3", onClick: () => onChange && onChange(!value), children: [jsx("div", { className: style('relative flex-shrink-0 duration-300 w-9 h-5 mr-3 rounded-2xl', value ? 'bg-primary-main' : 'bg-main-divider'), children: jsx("div", { className: style('absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded-full', value ? 'left-[50%]' : 'left-[5%]') }) }), jsx(Text, { size: "text-l", font: "font-light", color: "text-primary-text", children: text })] })));
+    const SlideCheckbox = JSX(({ value = false, text, type = 'checkbox', onChange }) => (jsxs("div", { role: type, "aria-checked": value, className: "flex justify-start items-center w-full cursor-pointer mb-s", onClick: () => onChange && onChange(!value), children: [jsx("div", { className: style('relative flex-shrink-0 duration-300 w-9 h-5 mr-s rounded-2xl', value ? 'bg-primary-main' : 'bg-main-divider'), children: jsx("div", { className: style('absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded-full', value ? 'left-1/2' : 'left-[5%]') }) }), jsx(Text, { size: "text-l", font: "font-light", color: "text-primary-text", children: text })] })));
 
     const renderSlideCheckboxes = (field) => (jsxs("div", { className: "sm:mb-5", children: [jsx(SlideCheckbox, { text: "\u0425\u043E\u0447\u0443 \u043A\u0443\u043F\u0438\u0442\u044C \u043E\u043D\u043B\u0430\u0439\u043D-\u043A\u0430\u0441\u0441\u0443", ...field('onlineCheckout') }), jsx(SlideCheckbox, { text: "\u0425\u043E\u0447\u0443 \u043A\u0443\u043F\u0438\u0442\u044C POS-\u0442\u0435\u0440\u043C\u0438\u043D\u0430\u043B", ...field('posTerminal') })] }));
 
@@ -971,7 +971,7 @@
         const handleChange = useCallback((e) => {
             onChange && onChange(parseDecimal(e.target?.value));
         }, [onChange]);
-        return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-text", children: title })) : null, jsx("input", { className: style('m-0 mt-2 font-sans text-h3 w-full h-14', 'border border-solid border-gray rounded-md outline-none', 'p-0 pl-4 box-border', 'text-primary-text hover:border-primary-hover focus:border-primary-text', DISABLED_INPUT_CLASSES), disabled: disabled, onInput: handleChange, ...normalizedProps }), renderRangeWithTicks({ list, min, max, step, disabled, value, onChange })] }), renderRangeCaption(items)] }));
+        return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-primary-text", children: title })) : null, jsx("input", { className: style('m-0 mt-xs font-sans text-h3 w-full h-14', 'border border-solid border-gray rounded-md outline-none', 'p-0 pl-4 box-border', 'text-primary-text hover:border-primary-hover focus:border-primary-text', DISABLED_INPUT_CLASSES), disabled: disabled, onInput: handleChange, ...normalizedProps }), renderRangeWithTicks({ list, min, max, step, disabled, value, onChange })] }), renderRangeCaption(items)] }));
     });
     const closestValue = (list) => (_) => list.reduce((prev, curr) => (Math.abs(curr - _) < Math.abs(prev - _) ? curr : prev));
     const renderRangeCaption = (items) => (jsx("div", { className: "flex justify-between my-2", children: items.map((item, i) => (jsx(Text, { size: "text-s", font: "font-light", color: "text-secondary-text", children: item }, String(i)))) }));
@@ -1104,7 +1104,7 @@
         return (jsxs("div", { className: "mb-3 sm:mb-6", children: [jsxs("div", { className: "mb-4 sm:flex sm:items-center sm:gap-6", children: [jsx(Checkbox, { className: "mb-3 sm:mb-0", text: "\u0412\u0430\u043B\u044E\u0442\u043D\u044B\u0439 \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u044C", ...field('currencyControl') }), jsx(Checkbox, { className: "mb-3 sm:mb-0", text: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0440\u043D\u044B\u0435 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u0438", ...field('documentaryOperations') }), jsx(Checkbox, { className: "mb-3 sm:mb-0", text: "\u041A\u043E\u043D\u0432\u0435\u0440\u0441\u0438\u043E\u043D\u043D\u044B\u0435 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u0438", ...field('conversionOperations') })] }), jsx("textarea", { placeholder: "\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u0438\u043D\u0442\u0435\u0440\u0435\u0441\u0443\u044E\u0449\u0438\u0439 \u0432\u0430\u0441 \u0432\u043E\u043F\u0440\u043E\u0441, \u043C\u0435\u0441\u0442\u043E \u0432\u0435\u0434\u0435\u043D\u0438\u044F \u0431\u0438\u0437\u043D\u0435\u0441\u0430 \u0438 \u0443\u0434\u043E\u0431\u043D\u043E\u0435 \u0432\u0440\u0435\u043C\u044F \u0434\u043B\u044F \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u043D\u043E\u0433\u043E \u0437\u0432\u043E\u043D\u043A\u0430", className: "block w-full resize-y min-h-24 p-4 outline-none border rounded-md border-main-stroke hover:border-primary-hover active:focus:border-primary-text", value: textField.value, onInput: ((e) => textField.onChange && textField.onChange(e.target?.value || '')) })] }));
     };
 
-    const renderWedDataOrganization = (field) => (jsxs("div", { children: [jsxs("div", { className: "sm:flex sm:justify-between sm:gap-5", children: [jsx("div", { className: "sm:w-1/2", children: jsx(InputControl, { className: "shrink-0 w-full mb-3", label: "\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...withValidator(field('fullName'), defaultValidator) }) }), jsx("div", { className: "sm:w-1/2", children: jsx(InputControl, { className: "shrink-0 w-full mb-3", label: "\u0424\u0418\u041E", ...withValidator(field('name'), nameValidator) }) })] }), jsxs("div", { className: "sm:flex sm:justify-between sm:gap-5 sm:mb-7", children: [jsx("div", { className: "sm:w-1/2", children: jsx(PhoneInputControl, { className: "shrink-0 w-full mb-3", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) }) }), jsx("div", { className: "sm:w-1/2", children: jsx(InputControl, { className: "shrink-0 w-full mb-3", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...withValidator(field('mail'), defaultValidator) }) })] })] }));
+    const renderWedDataOrganization = (field) => (jsxs("div", { children: [jsxs("div", { className: "sm:flex sm:justify-between sm:gap-lg", children: [jsx("div", { className: "sm:w-1/2", children: jsx(InputControl, { className: "shrink-0 w-full mb-s", label: "\u041D\u0430\u0438\u043C\u0435\u043D\u043E\u0432\u0430\u043D\u0438\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...withValidator(field('fullName'), defaultValidator) }) }), jsx("div", { className: "sm:w-1/2", children: jsx(InputControl, { className: "shrink-0 w-full mb-s", label: "\u0424\u0418\u041E", ...withValidator(field('name'), nameValidator) }) })] }), jsxs("div", { className: "sm:flex sm:justify-between sm:gap-lg sm:mb-2xl", children: [jsx("div", { className: "sm:w-1/2", children: jsx(PhoneInputControl, { className: "shrink-0 w-full mb-s", label: "\u0422\u0435\u043B\u0435\u0444\u043E\u043D", ...withValidator(field('phone'), phoneValidator) }) }), jsx("div", { className: "sm:w-1/2", children: jsx(InputControl, { className: "shrink-0 w-full mb-s", label: "\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430", ...withValidator(field('mail'), defaultValidator) }) })] })] }));
 
     const initialFormState = {
         fullName: '',
@@ -1137,13 +1137,13 @@
                 });
         }, [onSubmit]);
         const [, { field, ...formProps }] = useForm(initialFormState, handleSubmit);
-        return (jsxs("form", { className: "container", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", className: "sm:text-center mb-4" }), renderWedDataOrganization(field), jsx(Heading, { headingType: "h6", title: "\u0418\u043D\u0442\u0435\u0440\u0435\u0441\u0443\u044E\u0449\u0438\u0439 \u0432\u043E\u043F\u0440\u043E\u0441", className: "sm:text-center mb-4" }), renderQuestionsInterested(field), jsxs("div", { className: "flex flex-col border-b border-main-divider mb-5 pb-5 sm:items-center sm:flex-row sm:mb-9 sm:pb-9", children: [renderSubmitButton(button, 'mb-4 sm:mr-5 sm:mb-0'), jsx(Footnote, { link: link })] }), jsx(Heading, { headingType: "h6", title: "\u0418\u043B\u0438 \u0441\u0432\u044F\u0436\u0438\u0442\u0435\u0441\u044C \u0441 \u043D\u0430\u043C\u0438 \u0443\u0434\u043E\u0431\u043D\u044B\u043C \u0441\u043F\u043E\u0441\u043E\u0431\u043E\u043C", className: "sm:text-center mb-4" }), renderContacts()] }));
+        return (jsxs("form", { className: "container", onSubmit: formProps.onSubmit, children: [jsx(Heading, { headingType: "h6", title: "\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", className: "sm:text-center mb-m" }), renderWedDataOrganization(field), jsx(Heading, { headingType: "h6", title: "\u0418\u043D\u0442\u0435\u0440\u0435\u0441\u0443\u044E\u0449\u0438\u0439 \u0432\u043E\u043F\u0440\u043E\u0441", className: "sm:text-center mb-m" }), renderQuestionsInterested(field), jsxs("div", { className: "flex flex-col border-b border-main-divider mb-5 pb-5 sm:items-center sm:flex-row sm:mb-9 sm:pb-9", children: [renderSubmitButton(button, 'mb-m sm:mr-lg sm:mb-0'), jsx(Footnote, { link: link })] }), jsx(Heading, { headingType: "h6", title: "\u0418\u043B\u0438 \u0441\u0432\u044F\u0436\u0438\u0442\u0435\u0441\u044C \u0441 \u043D\u0430\u043C\u0438 \u0443\u0434\u043E\u0431\u043D\u044B\u043C \u0441\u043F\u043E\u0441\u043E\u0431\u043E\u043C", className: "sm:text-center mb-m" }), renderContacts()] }));
     });
 
     const ResponseNotification = JSX(({ responseType }) => {
         const responseOK = responseType === 'OK';
         const backgroundColor = responseOK ? 'bg-ok' : 'bg-fail';
-        return (jsxs("div", { className: `flex items-center mt-5 p-5 rounded-md ${backgroundColor}`, children: [responseOK ? (jsx(Img, { image: { icon: 'ResponceOKIcon' }, width: "42", height: "42", className: "mr-4" })) : (jsx(Img, { image: { icon: 'ResponceFailIcon' }, width: "37", height: "34", className: "mr-4" })), jsxs("div", { children: [jsx(Heading, { headingType: "h6", title: responseOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку', className: "mb-1" }), jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: responseOK ? 'Совсем скоро мы с вами свяжемся' : 'Пожалуйста, повторите позднее' })] })] }));
+        return (jsxs("div", { className: `flex items-center mt-lg p-lg rounded-md space-x-m ${backgroundColor}`, children: [responseOK ? (jsx(Img, { image: { icon: 'ResponceOKIcon' }, width: "42", height: "42" })) : (jsx(Img, { image: { icon: 'ResponceFailIcon' }, width: "37", height: "34" })), jsxs("div", { children: [jsx(Heading, { headingType: "h6", title: responseOK ? 'Ваша заявка отправлена' : 'Не удалось отправить заявку', className: "mb-1" }), jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: responseOK ? 'Совсем скоро мы с вами свяжемся' : 'Пожалуйста, повторите позднее' })] })] }));
     });
 
     const COMPONENTS_MAP = {
@@ -1162,7 +1162,7 @@
             setResponseType(status);
             return status;
         }, []);
-        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: jsxs("div", { className: "container max-w-[978px]", children: [title ? (jsx(Heading, { headingType: "h3", title: title, className: "mb-4 sm:mb-8 sm:text-center" })) : null, COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit }), responseType ? jsx(ResponseNotification, { responseType: responseType }) : null] }) }));
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container max-w-[978px]", children: [title ? (jsx(Heading, { headingType: "h3", title: title, className: "mb-4 sm:mb-8 sm:text-center" })) : null, COMPONENTS_MAP[typeForm]({ button, link, onSubmit: handleSubmit }), responseType ? jsx(ResponseNotification, { responseType: responseType }) : null] }) }));
     });
 
     const iconBgStyles = {
@@ -1181,21 +1181,21 @@
 
     const defaultIconSize = 44;
 
-    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: [title ? jsx(Heading, { headingType: "h3", as: "h2", className: "text-center", title: title }) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full sm:justify-center mt-m gap-xl", role: "list", children: benefitList.map(renderBenefit) })) : null] })));
-    const renderBenefit = (benefit, i) => (jsxs("div", { className: "flex gap-s items-center md:basis-1/2 md:max-w-[400px]", role: "listitem", children: [benefit?.icon?.icon ? (jsx(RoundedIcon, { className: "shrink-0", defaultIconSize: defaultIconSize, iconBgVersion: benefit?.iconBgVersion || '', ...benefit?.icon })) : null, benefit?.icon?.src ? jsx(Img, { className: "shrink-0", image: benefit.icon }) : null, benefit?.label ? (jsxs("div", { className: "sm:h-full", children: [jsx(Heading, { headingType: "h6", children: benefit.label }), renderDescription$4(benefit.description)] })) : null] }, String(i)));
-    const renderDescription$4 = (description) => {
+    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [title ? jsx(Heading, { headingType: "h3", as: "h2", className: "text-center", title: title }) : null, benefitList?.length ? (jsx("div", { className: "flex flex-wrap w-full sm:justify-center mt-xl gap-5xl", role: "list", children: benefitList.map(renderBenefit) })) : null] })));
+    const renderBenefit = (benefit, i) => (jsxs("div", { className: "flex gap-m items-center md:basis-1/2 md:max-w-[400px]", role: "listitem", children: [benefit?.icon?.icon ? (jsx(RoundedIcon, { className: "shrink-0", defaultIconSize: defaultIconSize, iconBgVersion: benefit?.iconBgVersion || '', ...benefit?.icon })) : null, benefit?.icon?.src ? jsx(Img, { className: "shrink-0", image: benefit.icon }) : null, benefit?.label ? (jsxs("div", { className: "sm:h-full", children: [jsx(Heading, { headingType: "h6", children: benefit.label }), renderDescription$3(benefit.description)] })) : null] }, String(i)));
+    const renderDescription$3 = (description) => {
         const benefitType = description?.benefitType || null;
-        return description && benefitType ? (jsx("div", { className: "mt-2 text-l font-light text-secondary-text group-data-secondary:text-white/80", children: benefitType === 'list'
+        return description && benefitType ? (jsx("div", { className: "mt-xs text-l font-light text-secondary-text group-data-secondary:text-white/80", children: benefitType === 'list'
                 ? renderListBenefit(description)
                 : renderTextBenefit(description) })) : null;
     };
     const renderTextBenefit = (description) => description?.name || null;
     const renderListBenefit = (description) => {
-        const listStyleType = description?.bullets ? 'list-disc pl-6' : '';
+        const listStyleType = description?.bullets ? 'list-disc pl-3xl' : '';
         return description?.items && description.items.length > 0 ? (jsx("ul", { className: listStyleType, children: description.items.map((_, i) => (jsx("li", { children: _ }, `benefitListItem-${i}`))) })) : null;
     };
 
-    const renderButtonsSection = (buttons, { className, buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-xs justify-items-stretch' : 'flex-wrap gap-s', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
+    const renderButtonsSection = (buttons, { className, buttonClassName, isVertical } = {}) => buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (jsx("div", { className: style('flex', isVertical ? 'flex-col gap-xs justify-items-stretch' : 'flex-wrap gap-m', className), children: buttons.map(renderButton(buttonClassName)) })) : null;
     const renderButton = (buttonClassName = '') => (button, index) => {
         const { text, icon, iconRight, version, ...rest } = button || {};
         const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
@@ -1210,25 +1210,25 @@
             title: { headingType: 'h0', as: 'h1' },
             descriptionSize: 'text-h5',
             descriptionWeight: 'font-normal',
-            descriptionStyle: 'mt-m',
+            descriptionStyle: 'mt-xl',
         },
         XL: {
             title: { headingType: 'h1', as: 'h1' },
             descriptionSize: 'text-xl',
             descriptionWeight: 'font-light',
-            descriptionStyle: 'mt-s',
+            descriptionStyle: 'mt-m',
         },
         L: {
             title: { headingType: 'h2', as: 'h2' },
             descriptionSize: 'text-xl',
             descriptionWeight: 'font-light',
-            descriptionStyle: 'mt-s',
+            descriptionStyle: 'mt-m',
         },
         M: {
             title: { headingType: 'h3', as: 'h2' },
             descriptionSize: 'text-xl',
             descriptionWeight: 'font-light',
-            descriptionStyle: 'mt-text',
+            descriptionStyle: 'mt-s',
         },
         S: {
             title: { headingType: 'h4', as: 'h2' },
@@ -1258,13 +1258,13 @@
     const Headline = JSX(({ className, version = '', headlineVersion = 'XL', title, description, align = 'text-center', as, isPadding = true, isTheme = false, ...rest }) => {
         const versionStyle = headlineVersionStyles[headlineVersion];
         const descriptionStyle = { marginTop: versionStyle.descriptionStyle };
-        return (jsxs(BlockWrapper, { className: className, defaultPadding: isPadding ? 'p-default' : '', version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, font: versionStyle.descriptionWeight, align: align, ...descriptionStyle, children: description })) : null] }));
+        return (jsxs(BlockWrapper, { className: className, defaultPadding: isPadding ? 'p-6xl' : '', version: version, isTheme: isTheme, ...rest, children: [title ? (jsx(Heading, { className: style('whitespace-pre-wrap', align), ...versionStyle?.title, as: as || versionStyle?.title.as, title: title })) : null, description ? (jsx(Paragraph, { size: versionStyle.descriptionSize, font: versionStyle.descriptionWeight, align: align, ...descriptionStyle, children: description })) : null] }));
     });
 
     const Bonus = JSX((props) => {
         const { className = '', title, description, bonusItems, ...rest } = props;
-        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "M" }), jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems?.length
-                            ? bonusItems.map((_, i) => (jsxs("div", { className: "flex-grow w-[49%] border border-gray p-9 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0", children: [_?.title ? jsx(Text, { size: "text-h4", children: _.title }) : null, _?.description ? (jsx("div", { className: "mt-2", children: jsx(Paragraph, { size: "text-xl", font: "font-light", children: _.description }) })) : null, jsxs("div", { className: "flex justify-between items-end mt-3", children: [renderButtonsSection(_?.buttons), _.bonusItemContent?.bonusType
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: "container", children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isPadding: false }), jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems?.length
+                            ? bonusItems.map((_, i) => (jsxs("div", { className: "flex-grow w-[49%] border border-gray p-9 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0", children: [_?.title ? jsx(Text, { size: "text-h4", children: _.title }) : null, _?.description ? (jsx("div", { className: "mt-xs", children: jsx(Paragraph, { size: "text-xl", font: "font-light", children: _.description }) })) : null, jsxs("div", { className: "flex justify-between items-end mt-3", children: [renderButtonsSection(_?.buttons), _.bonusItemContent?.bonusType
                                                 ? renderBonusItemContent(_.bonusItemContent)
                                                 : null] })] }, String(i))))
                             : null })] }) }));
@@ -1304,29 +1304,31 @@
         }
     };
 
-    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: style('p-default', className), defaultPadding: "p-default", ...rest, children: [jsx(Headline, { className: "mb-4 sm:mb-8", isPadding: false, title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length
+    const BonusBenefitsBlock = JSX(({ bonusBenefits, cardTextAlign = 'center', className = '', columnsCount = '4', subtitle, title, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { className: "mb-4 sm:mb-3xl", isPadding: false, title: title, description: subtitle, headlineVersion: "M" }), bonusBenefits?.length
                 ? renderBonusBenefits(bonusBenefits, columnsCount, cardTextAlign)
                 : null] })));
 
     const BusinessCard = JSX((props) => {
         const { title, image, cardItems, button } = props;
-        return (jsxs("div", { className: "border-gray border p-9 w-1/2", children: [image ? (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(Img, { className: "mb-5", image: image }) : null, image?.icon ? jsx(Img, { image: image }) : null] })) : null, title ? jsx(Heading, { headingType: "h4", title: title, className: "mb-6" }) : null, cardItems?.length ? jsx("ul", { children: cardItems.map((_, i) => renderItem(_, String(i))) }) : null, renderButtonsSection([button], { buttonClassName: 'mt-6' })] }));
+        return (jsxs("div", { className: "border-gray border p-4xl w-1/2 space-y-lg", children: [image ? (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(Img, { image: image }) : null, image?.icon ? jsx(Img, { image: image }) : null] })) : null, title ? jsx(Heading, { headingType: "h4", title: title }) : null, cardItems?.length ? (jsx("ul", { className: "space-y-s", children: cardItems.map((_, i) => renderItem(_, String(i))) })) : null, renderButtonsSection([button])] }));
     });
     const renderItem = (item, key) => {
         const { icon, text } = item;
-        return (jsxs("li", { className: "flex items-center gap-3.5 mb-3 last:mb-0", children: [icon?.icon ? (jsx(Img, { image: icon, className: "w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider" })) : null, icon?.src ? jsx(Img, { image: icon }) : null, jsx(Text, { size: "text-xl", font: "font-light", children: text })] }, key));
+        return (jsxs("li", { className: "flex items-center gap-s last:mb-0", children: [icon?.icon ? (jsx(Img, { image: icon, className: "w-12 h-12 min-w-12 p-s rounded-icon bg-main-divider" })) : null, icon?.src ? jsx(Img, { image: icon }) : null, jsx(Text, { size: "text-xl", font: "font-light", children: text })] }, key));
     };
 
-    const BusinessBlock = JSX(({ className, title, cards, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: [jsx(Heading, { headingType: "h3", title: title, className: "text-center mb-8" }), jsx("div", { className: "flex gap-5", children: cards?.length ? cards.map((_, i) => jsx(BusinessCard, { ..._ }, String(i))) : null })] })));
+    const BusinessBlock = JSX(({ className, title, cards, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl space-y-3xl", ...rest, children: [jsx(Heading, { headingType: "h3", title: title, className: "text-center" }), jsx("div", { className: "flex gap-5", children: cards?.length ? cards.map((_, i) => jsx(BusinessCard, { ..._ }, String(i))) : null })] })));
 
     const ButtonsBlock = JSX(({ buttons, className, ...rest }) => (jsx(BlockWrapper, { className: style('!bg-transparent', className), defaultPadding: "p-0", ...rest, children: renderButtonsSection(buttons) })));
 
-    const useCarouselControls = (props) => {
+    const useCarouselControls = (props, initialIndex = 0) => {
         const { itemCount, visibleItemCount } = props;
-        const [activeIndex, setActiveIndex] = useState(0);
+        const [activeIndex, setActiveIndex] = useState(initialIndex);
         const inc = useCallback(() => setActiveIndex((_) => Math.min(_ + 1, itemCount - 1)), [itemCount]);
         const dec = useCallback(() => setActiveIndex((_) => Math.max(_ - 1, 0)), [itemCount]);
-        const canInc = isScrollable(props) && activeIndex < itemCount - (visibleItemCount || 1);
+        const canInc = visibleItemCount
+            ? itemCount > visibleItemCount && activeIndex < itemCount - visibleItemCount
+            : activeIndex < itemCount - 1;
         const canDec = activeIndex > 0;
         const isScrollAvailable = canDec || canInc;
         return [
@@ -1340,9 +1342,6 @@
             },
         ];
     };
-    function isScrollable({ itemCount, visibleItemCount }) {
-        return Boolean(visibleItemCount && itemCount > visibleItemCount);
-    }
 
     const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `group/btn shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
         ? 'bg-secondary-light text-secondary-text'
@@ -1360,8 +1359,17 @@
     const DEFAULT_MIN_SUM$1 = 10000;
     const DEFAULT_MAX_SUM$1 = 5000000;
     const CREDIT_DEFAULT_SUM = 200000;
+    const REFINANCING_DEFAULT_SUM = 700000;
+    const REFINANCING_DEFAULT_MAX_SUM = 3000000;
+    const REFINANCING_OLD_MIN_SUM = 0;
+    const REFINANCING_OLD_DEFAULT_SUM = 0;
+    const REFINANCING_OLD_MAX_SUM = 2500000;
+    const REFINANCING_EXTRA_MIN_SUM = 0;
+    const REFINANCING_EXTRA_MAX_SUM = 500000;
     const DEPOSIT_DEFAULT_SUM = 20000;
     const DEFAULT_MIN_MONTHS$1 = 13;
+    const DEFAULT_REFINANCING_MIN_MONTHS = 13;
+    const DEFAULT_REFINANCING_MONTHS = 48;
     const DEFAULT_MAX_MONTHS$1 = 60;
     const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS$1 - DEFAULT_MIN_MONTHS$1) / 2);
     const BUSINESS_DEFAULT_SUM = 100000;
@@ -1384,6 +1392,20 @@
         isStateEmployee: false,
         isInsurance: true,
     };
+    const DEFAULT_REFINANCING_CALCULATOR_PARAMS = {
+        minSum: DEFAULT_MIN_SUM$1,
+        maxSum: REFINANCING_DEFAULT_MAX_SUM,
+        minSumOld: REFINANCING_OLD_MIN_SUM,
+        maxSumOld: REFINANCING_OLD_MAX_SUM,
+        minSumExtra: REFINANCING_EXTRA_MIN_SUM,
+        maxSumExtra: REFINANCING_EXTRA_MAX_SUM,
+        minMonths: DEFAULT_REFINANCING_MIN_MONTHS,
+        maxMonths: DEFAULT_MAX_MONTHS$1,
+        rate: 7.5,
+        isExtraMoney: false,
+        isSalaryClient: false,
+        isInsurance: true,
+    };
     const DEFAULT_TRAVEL_MIN_SUM = 6000;
     const DEFAULT_REST_MIN_SUM = 6000;
     const DEFAULT_BONUS_CALCULATOR_PARAMS = {
@@ -1423,6 +1445,7 @@
     const BONUS_CALC_DEFAULT_DIR = 'bonus-calculator-data';
     const DEPOSIT_CALC_DEFAULT_DIR = 'deposit-calculator-data';
     const BUSINESS_DEPOSIT_CALC_DEFAULT_DIR = 'business-calculator-data';
+    const REFINANCING_CALC_DEFAULT_DIR = 'refinancing-calculator-data';
 
     const Rate = JSX(({ rate, title = 'Ставка', unit, depositeName, isShowDepositeName, rateBlockClassName, fractionDigits = 2, }) => (jsxs("div", { children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsxs("div", { className: "relative", children: [jsxs("div", { className: "flex justify-start gradient-color-text", children: [jsx("span", { className: style('font-mohave text-title-huge pr-6 -mt-4', rateBlockClassName), children: String(rate.toFixed(fractionDigits)).replace('.', ',') }), unit ? jsx("span", { className: "text-7xl", children: unit }) : null] }), depositeName && isShowDepositeName ? (jsx("div", { className: "absolute bottom-7 w-full text-center whitespace-nowrap", children: depositeName })) : null] })] })));
 
@@ -1473,7 +1496,7 @@
             restExpenseValue: DEFAULT_REST_MIN_SUM,
         });
         const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } = useBonusCalculatorParams(userInputParams, sourceBookDir);
-        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput({
+        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-2/5", children: [renderWantedSumInput({
                             title: 'Сумма покупок в категории путешествия, ₽',
                             min: minSumTravel,
                             max: maxSumTravel,
@@ -1488,7 +1511,7 @@
                             step: 500,
                             isShowItems: false,
                             ...field('restExpenseValue'),
-                        })] }), jsx("div", { children: monthBonus >= 0 ? (jsx(Rate, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u043C\u0435\u0441\u044F\u0446", rate: monthBonus, rateBlockClassName: "tracking-[-14px]", fractionDigits: 0 })) : null }), jsxs("div", { className: "w-full max-w-[350px]", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
+                        })] }), jsx("div", { children: monthBonus >= 0 ? (jsx(Rate, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u043C\u0435\u0441\u044F\u0446", rate: monthBonus, rateBlockClassName: "tracking-[-14px]", fractionDigits: 0 })) : null }), jsxs("div", { className: "w-96", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
     });
 
     const STEP_DAYS = 1;
@@ -1511,12 +1534,15 @@
         ],
     });
 
-    const UnknownRate = JSX(({ title = 'Ставка' }) => (jsxs("div", { children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsx("div", { className: "mt-1 pt-1 pl-5 pb-1.5", children: jsx(Icon, { name: "PercentIcon", width: "90", height: "85" }) }), jsx("div", { className: "w-[250px] mt-3.5", children: jsxs(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: ["\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u043D\u0430\u044F \u0441\u0442\u0430\u0432\u043A\u0430 \u0434\u043B\u044F \u0441\u0440\u043E\u043A\u0430 ", jsx("strong", { children: "1-30 \u0434\u043D\u0435\u0439" }), " \u0443\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u043F\u0440\u0438 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0438 \u0432 \u0411\u0430\u043D\u043A"] }) })] })));
+    const UnknownRate = JSX(({ title = 'Ставка' }) => (jsxs("div", { children: [jsx(Text, { size: "text-l", font: "font-light", color: "text-secondary-text", children: title }), jsx("div", { className: "mt-2xs pt-2xs pl-lg pb-xs", children: jsx(Icon, { name: "PercentIcon", width: "90", height: "85" }) }), jsx("div", { className: "w-64 mt-m", children: jsxs(Paragraph, { size: "text-xl", font: "font-light", color: "text-primary-text", children: ["\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u043D\u0430\u044F \u0441\u0442\u0430\u0432\u043A\u0430 \u0434\u043B\u044F \u0441\u0440\u043E\u043A\u0430 ", jsx("strong", { children: "1-30 \u0434\u043D\u0435\u0439" }), " \u0443\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0435\u0442\u0441\u044F \u043F\u0440\u0438 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0438 \u0432 \u0411\u0430\u043D\u043A"] }) })] })));
 
     const defaultDiscriminator = (_) => _;
     const maxBy = (discriminator = defaultDiscriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
     const max = maxBy();
 
+    const minBy = (discriminator = defaultDiscriminator) => maxBy((_) => -discriminator(_));
+    const min = minBy();
+
     const mergeIntervals = (intervals) => {
         const result = [...intervals];
         result.sort(([a], [c]) => a - c);
@@ -1534,9 +1560,6 @@
         return result;
     };
 
-    const minBy = (discriminator = defaultDiscriminator) => maxBy((_) => -discriminator(_));
-    const min = minBy();
-
     const getLimitRangeByKeys = ([minKey, maxKey], limitParams, rateRows = []) => limitParams && limitParams[minKey] && limitParams[maxKey]
         ? {
             [minKey]: limitParams[minKey],
@@ -1544,8 +1567,12 @@
         }
         : getRangeByKeys([minKey, maxKey], rateRows);
     const getRangeByKeys = ([minKey, maxKey], rows = []) => ({
-        [minKey]: rows.length ? min(rows.filter((row) => row[minKey]).map((row) => row[minKey])) : 0,
-        [maxKey]: rows.length ? max(rows.filter((row) => row[maxKey]).map((row) => row[maxKey])) : 0,
+        [minKey]: rows.length
+            ? min(rows.filter((row) => typeof row[minKey] === 'number').map((row) => row[minKey]))
+            : 0,
+        [maxKey]: rows.length
+            ? max(rows.filter((row) => typeof row[minKey] === 'number').map((row) => row[maxKey]))
+            : 0,
     });
     const checkRangeByKeys = (value, [minKey, maxKey], sourceBookRow) => value >= sourceBookRow[minKey] && value <= sourceBookRow[maxKey];
 
@@ -1610,7 +1637,7 @@
         });
         const calculatorParams = useBusinessDepositCalculatorParams(userInputParams, sourceBookDir);
         const { income, finalSum, rate, depositeName, isShowUnknownRate } = calculatorParams;
-        return (jsxs("section", { className: className, children: [jsxs("div", { className: "flex justify-between", children: [jsxs("div", { className: "w-[486px]", children: [renderWantedSumInput({
+        return (jsxs("section", { className: className, children: [jsxs("div", { className: "flex justify-between", children: [jsxs("div", { className: "w-2/5", children: [renderWantedSumInput({
                                     title: 'Сумма вклада, ₽',
                                     min: calculatorParams.minSum,
                                     max: calculatorParams.maxSum,
@@ -1626,7 +1653,7 @@
                                             title: 'Выплата процентов',
                                             orientation: 'vertical',
                                             ...field('isMonthlyInterestPayment'),
-                                        })] })] }), isShowUnknownRate ? (jsx(UnknownRate, {})) : (jsx(Rate, { rate: rate, depositeName: depositeName, isShowDepositeName: isShowDepositeName, rateBlockClassName: "tracking-[-25px]", unit: "%" })), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" }), jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), jsx("div", { className: "mt-7", children: renderFootnote(footnote) })] })] }), jsx("div", { className: "mt-5", children: renderFootnote(bottomFootnote) })] }));
+                                        })] })] }), isShowUnknownRate ? (jsx(UnknownRate, {})) : (jsx(Rate, { rate: rate, depositeName: depositeName, isShowDepositeName: isShowDepositeName, rateBlockClassName: "tracking-[-25px]", unit: "%" })), jsxs("div", { className: "w-96", children: [jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" }), jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), jsx("div", { className: "mt-7", children: renderFootnote(footnote) })] })] }), jsx("div", { className: "mt-5", children: renderFootnote(bottomFootnote) })] }));
     });
     const renderBusinessDepositParamsForm = (calculatorParams, field) => (jsxs("div", { children: [jsx(Checkbox, { text: "\u041F\u043E\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u0435", disabled: calculatorParams.isDisabledOperatingDeposit, ...field('isReplenished'), value: calculatorParams.isReplenished }), jsx(Checkbox, { className: "mt-3", disabled: calculatorParams.isDisabledOperatingDeposit, text: "\u0427\u0430\u0441\u0442\u0438\u0447\u043D\u043E\u0435 \u0441\u043D\u044F\u0442\u0438\u0435", ...field('isPartialWithdrawal'), value: calculatorParams.isPartialWithdrawal }), jsx(Checkbox, { className: "mt-3", text: "\u042F\u0432\u043B\u044F\u044E\u0441\u044C \u043C\u0430\u043B\u044B\u043C \u043F\u0440\u0435\u0434\u043F\u0440\u0438\u044F\u0442\u0438\u0435\u043C", ...field('isSmallBusiness'), value: calculatorParams.isSmallBusiness })] }));
 
@@ -1642,27 +1669,27 @@
         ],
     });
 
-    const checkCreditSourceBookRowCommonParams = (props) => checkRowParam({
+    const checkCreditSourceBookRowCommonParams = (props) => checkRowParam$1({
         ...props,
         fieldKey: 'isSalaryClient',
         viewSettingFieldKey: 'isShowSalaryClient',
     }) &&
-        checkRowParam({
+        checkRowParam$1({
             ...props,
             fieldKey: 'isStateEmployee',
             viewSettingFieldKey: 'isShowStateEmployee',
         }) &&
-        checkRowParam({
+        checkRowParam$1({
             ...props,
             fieldKey: 'isPensionClient',
             viewSettingFieldKey: 'isShowPensionClient',
         }) &&
-        checkRowParam({
+        checkRowParam$1({
             ...props,
             fieldKey: 'isInsurance',
             viewSettingFieldKey: 'isShowInsurance',
         });
-    const checkRowParam = ({ row, userInputParams, paramsViewSettings, fieldKey, viewSettingFieldKey, }) => {
+    const checkRowParam$1 = ({ row, userInputParams, paramsViewSettings, fieldKey, viewSettingFieldKey, }) => {
         const isExclude = paramsViewSettings ? !paramsViewSettings[viewSettingFieldKey] : false;
         return isExclude || userInputParams[fieldKey] === row[fieldKey];
     };
@@ -1686,13 +1713,18 @@
      * https://finuslugi.ru/potrebitelskie_kredity/stat_annuitetnye_i_differentsirovannye_platezhi
      */
     const getMonthlyPayment = (rate, params) => {
-        const { isAnnuity, moneyValue, monthsValue } = params;
+        const { isAnnuity, moneyValue, monthsValue, moneyExtra } = params;
         if (rate === 0) {
             return 0;
         }
         else if (isAnnuity) {
             const i = rate / MONTHLY_INTEREST_RATE; // Используется значение ставки в процентах
-            return moneyValue * (i + i / (Math.pow(1 + i, monthsValue) - 1));
+            if (moneyExtra) {
+                return (moneyValue + moneyExtra) * (i + i / (Math.pow(1 + i, monthsValue) - 1));
+            }
+            else {
+                return moneyValue * (i + i / (Math.pow(1 + i, monthsValue) - 1));
+            }
         }
         else {
             return Math.round(moneyValue / monthsValue) + moneyValue * (rate / (MONTHS_IN_YEAR * 100)); // Используется значение ставки (rate) в процентах, делённое на сто.
@@ -1746,7 +1778,7 @@
             monthsValue: DEFAULT_MONTHS,
         });
         const calculatorParams = useCreditCalculatorParams(userInputParams, sourceBookDir, paramsViewSettings);
-        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput({
+        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-2/5", children: [renderWantedSumInput({
                             title: 'Сумма кредита, ₽',
                             step: 500,
                             min: calculatorParams.minSum,
@@ -1759,9 +1791,9 @@
                             max: calculatorParams.maxMonths,
                             ...field('monthsValue'),
                             value: calculatorParams.monthsValue,
-                        }), jsx("div", { className: "mt-7", children: renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field) })] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: 'Ежемесячный платеж', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
+                        }), jsx("div", { className: "mt-2xl", children: renderCreditParamsForm$1({ ...calculatorParams, ...paramsViewSettings }, field) })] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-96", children: [jsx(CalculatorValueBlock, { title: 'Ежемесячный платеж', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') }), renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true }), renderFootnote(footnote)] })] }));
     });
-    const renderCreditParamsForm = (params, field) => (jsxs("div", { children: [params.isShowSalaryClient ? (jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", ...field('isSalaryClient'), value: params.isSalaryClient })) : null, params.isShowStateEmployee ? (jsx(Checkbox, { className: "mt-3", text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...field('isStateEmployee'), value: params.isStateEmployee })) : null, params.isShowPensionClient ? (jsx(Checkbox, { className: "mt-3", text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u043F\u0435\u043D\u0441\u0438\u044E \u043D\u0430 \u043A\u0430\u0440\u0442\u0443 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0430", ...field('isPensionClient'), value: params.isPensionClient })) : null, params.isShowInsurance ? (jsx(Checkbox, { className: "mt-3", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", ...field('isInsurance'), value: params.isInsurance })) : null] }));
+    const renderCreditParamsForm$1 = (params, field) => (jsxs("div", { children: [params.isShowSalaryClient ? (jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", ...field('isSalaryClient'), value: params.isSalaryClient })) : null, params.isShowStateEmployee ? (jsx(Checkbox, { className: "mt-3", text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", ...field('isStateEmployee'), value: params.isStateEmployee })) : null, params.isShowPensionClient ? (jsx(Checkbox, { className: "mt-3", text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u043F\u0435\u043D\u0441\u0438\u044E \u043D\u0430 \u043A\u0430\u0440\u0442\u0443 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0430", ...field('isPensionClient'), value: params.isPensionClient })) : null, params.isShowInsurance ? (jsx(Checkbox, { className: "mt-3", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", ...field('isInsurance'), value: params.isInsurance })) : null] }));
 
     const renderRegistrationType = (props) => renderBinaryRadioButtonGroup({
         ...props,
@@ -1838,7 +1870,7 @@
         useEffect(() => {
             setMonthsValue && setMonthsValue(defaultMonth);
         }, [defaultMonth]);
-        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput({
+        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-2/5", children: [renderWantedSumInput({
                             title: 'Сумма вклада, ₽',
                             min: calculatorParams.minSum,
                             max: calculatorParams.maxSum,
@@ -1851,9 +1883,9 @@
                             availableMonths: calculatorParams.availableMonths,
                             ...field('monthsValue'),
                             value: calculatorParams.monthsValue,
-                        }), jsx("div", { className: "mt-7", children: renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field) })] }), jsx(Rate, { rate: rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-full max-w-[350px]", children: [jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" }), jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
+                        }), jsx("div", { className: "mt-2xl", children: renderDepositParamsForm({ ...calculatorParams, ...paramsViewSettings }, field) })] }), jsx(Rate, { rate: rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-96", children: [jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" }), jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finalSum, postfix: "\u20BD" }), renderButtonsSection(buttons, { className: 'mt-2xl', isVertical: true }), renderFootnote(footnote)] })] }));
     });
-    const renderDepositParamsForm = (params, field) => (jsxs("div", { className: "flex flex-col gap-y-7", children: [params.isShowMonthlyInterestPayment
+    const renderDepositParamsForm = (params, field) => (jsxs("div", { className: "flex flex-col gap-y-2xl", children: [params.isShowMonthlyInterestPayment
                 ? renderInterestPayment({
                     title: 'Выплата процентов',
                     ...field('isMonthlyInterestPayment'),
@@ -1867,11 +1899,140 @@
                 })
                 : null] }));
 
+    const checkRefinancingSourceBookRowCommonParams = (props) => checkRowParam({
+        ...props,
+        fieldKey: 'isSalaryClient',
+        viewSettingFieldKey: 'isShowSalaryClient',
+    }) &&
+        checkRowParam({
+            ...props,
+            fieldKey: 'isInsurance',
+            viewSettingFieldKey: 'isShowInsurance',
+        }) &&
+        checkRowParam({
+            ...props,
+            fieldKey: 'isExtraMoney',
+            viewSettingFieldKey: 'isShowExtraMoney',
+        });
+    const checkRowParam = ({ row, userInputParams, paramsViewSettings, fieldKey, viewSettingFieldKey, }) => {
+        const isExclude = paramsViewSettings ? !paramsViewSettings[viewSettingFieldKey] : false;
+        return isExclude || userInputParams[fieldKey] === row[fieldKey];
+    };
+
+    const getRefinancingCalculatorLimitParams = ({ limitRows, userInputParams, paramsViewSettings, }) => limitRows?.find((row) => checkRefinancingSourceBookRowCommonParams({
+        row,
+        userInputParams,
+        paramsViewSettings,
+    }));
+
+    const getRefinancingCalculatorRateParams = ({ rateRows = [], userInputParams, paramsViewSettings, moneyValue, monthsValue, oldMonthlyPayment, moneyExtra, }) => rateRows?.find((row) => checkRefinancingSourceBookRowCommonParams({
+        row,
+        userInputParams,
+        paramsViewSettings,
+    }) &&
+        checkRangeByKeys(moneyValue, ['minSum', 'maxSum'], row) &&
+        checkRangeByKeys(oldMonthlyPayment, ['minSumOld', 'maxSumOld'], row) &&
+        checkRangeByKeys(moneyExtra, ['minSumExtra', 'maxSumExtra'], row) &&
+        checkRangeByKeys(monthsValue, ['minMonths', 'maxMonths'], row)) || DEFAULT_REFINANCING_CALCULATOR_PARAMS;
+
+    const useRefinancingCalculatorParams = (userInputParams, sourceBookDir, paramsViewSettings) => {
+        let { moneyValue, monthsValue, oldMonthlyPayment, moneyExtra } = userInputParams;
+        const data = useCalculatorParams(sourceBookDir || REFINANCING_CALC_DEFAULT_DIR);
+        const rateRows = data?.rateRows || [DEFAULT_REFINANCING_CALCULATOR_PARAMS];
+        const limitRows = data?.limitRows || [];
+        const sourceBookLimitParams = getRefinancingCalculatorLimitParams({
+            limitRows,
+            userInputParams,
+            paramsViewSettings,
+        });
+        const { minSum, maxSum } = getLimitRangeByKeys(['minSum', 'maxSum'], sourceBookLimitParams, rateRows);
+        const { minSumOld, maxSumOld } = getLimitRangeByKeys(['minSumOld', 'maxSumOld'], sourceBookLimitParams, rateRows);
+        const { minSumExtra, maxSumExtra } = getLimitRangeByKeys(['minSumExtra', 'maxSumExtra'], sourceBookLimitParams, rateRows);
+        const { minMonths, maxMonths } = getLimitRangeByKeys(['minMonths', 'maxMonths'], sourceBookLimitParams, rateRows);
+        moneyValue = clamp(moneyValue, minSum, maxSum);
+        oldMonthlyPayment = clamp(oldMonthlyPayment, minSumOld, maxSumOld);
+        moneyExtra = clamp(moneyExtra, minSumExtra, maxSumExtra);
+        monthsValue = clamp(monthsValue, minMonths, maxMonths);
+        const refinancingCalculatorSourceBookRateParams = getRefinancingCalculatorRateParams({
+            rateRows,
+            userInputParams,
+            paramsViewSettings,
+            moneyValue,
+            monthsValue,
+            oldMonthlyPayment,
+            moneyExtra,
+        });
+        const { rate } = refinancingCalculatorSourceBookRateParams;
+        const monthlyPayment = getMonthlyPayment(rate, userInputParams);
+        const benefit = userInputParams.oldMonthlyPayment - monthlyPayment;
+        return useMemo(() => ({
+            ...refinancingCalculatorSourceBookRateParams,
+            ...userInputParams,
+            minSum,
+            maxSum,
+            minMonths,
+            maxMonths,
+            moneyValue,
+            monthsValue,
+            oldMonthlyPayment,
+            moneyExtra,
+            monthlyPayment,
+            benefit,
+        }), [userInputParams, data]);
+    };
+
+    const RefinancingCalculatorForm = JSX(({ className, sourceBookDir, buttons, footnote, paramsViewSettings }) => {
+        const [userInputParams, { field }] = useForm({
+            isAnnuity: true,
+            isInsurance: true,
+            isSalaryClient: false,
+            isExtraMoney: false,
+            moneyValue: REFINANCING_DEFAULT_SUM,
+            oldMonthlyPayment: REFINANCING_OLD_DEFAULT_SUM,
+            monthsValue: DEFAULT_REFINANCING_MONTHS,
+            moneyExtra: REFINANCING_OLD_DEFAULT_SUM,
+        });
+        const calculatorParams = useRefinancingCalculatorParams(userInputParams, sourceBookDir, paramsViewSettings);
+        return (jsxs("section", { className: style('flex justify-between', className), children: [jsxs("div", { className: "w-2/5", children: [renderWantedSumInput({
+                            title: 'Остаток долга в других банках, ₽ ',
+                            step: 500,
+                            min: calculatorParams.minSum,
+                            max: calculatorParams.maxSum,
+                            ...field('moneyValue'),
+                            value: calculatorParams.moneyValue,
+                        }), renderWantedSumInput({
+                            title: 'Ежемесячный платеж в других банках, ₽',
+                            isShowItems: false,
+                            step: 500,
+                            min: calculatorParams.minSumOld,
+                            max: calculatorParams.maxSumOld,
+                            ...field('oldMonthlyPayment'),
+                            value: calculatorParams.oldMonthlyPayment,
+                        }), renderMonthsInput({
+                            title: 'Новый срок кредита, месяцев',
+                            min: calculatorParams.minMonths,
+                            max: calculatorParams.maxMonths,
+                            ...field('monthsValue'),
+                            value: calculatorParams.monthsValue,
+                        }), jsx("div", { className: style('mt-7', calculatorParams.isExtraMoney ? 'mb-3' : ''), children: renderCreditParamsForm({ ...calculatorParams, ...paramsViewSettings }, field) }), calculatorParams.isExtraMoney
+                            ? renderWantedSumInput({
+                                title: 'Дополнительная сумма, ₽ ',
+                                step: 500,
+                                min: calculatorParams.minSumExtra,
+                                max: calculatorParams.maxSumExtra,
+                                ...field('moneyExtra'),
+                                value: calculatorParams.moneyExtra,
+                            })
+                            : null] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.rate, fractionDigits: 1, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-96", children: [jsx(CalculatorValueBlock, { title: 'Ежемесячный платеж', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), calculatorParams.benefit > 0 ? (jsx(CalculatorValueBlock, { title: 'Выгода в месяц', value: calculatorParams.benefit, postfix: "\u20BD" })) : null, renderPaymentType({ orientation: 'vertical', ...field('isAnnuity') }), renderButtonsSection(buttons, { className: 'mt-7', isVertical: true }), renderFootnote(footnote)] })] }));
+    });
+    const renderCreditParamsForm = (params, field) => (jsxs("div", { children: [params.isShowSalaryClient ? (jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", ...field('isSalaryClient'), value: params.isSalaryClient })) : null, params.isShowInsurance ? (jsx(Checkbox, { className: "mt-3", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", ...field('isInsurance'), value: params.isInsurance })) : null, params.isShowExtraMoney ? (jsx(Checkbox, { className: "mt-3", text: "\u041F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u0434\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u0443\u044E \u0441\u0443\u043C\u043C\u0443", ...field('isExtraMoney'), value: params.isExtraMoney })) : null] }));
+
     const EmbeddableCalcBlocks = {
         CreditCalculatorForm,
         DepositCalculatorForm,
         BusinessDepositCalculatorForm,
         BonusCalculatorForm,
+        RefinancingCalculatorForm,
     };
 
     const renderCalculatorBlock = (block, i) => {
@@ -1903,23 +2064,23 @@
     });
     function renderNavButton$3({ tab, i, isActive, onClick }) {
         const btnClassName = isActive
-            ? 'h-[88px] w-[387px] min-w-[387px] p-5 border-none bg-primary-main text-white'
-            : `h-[77px] w-[328px] min-w-[328px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
-        const btnTitleClassName = isActive ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
+            ? 'h-20 w-96 p-xl border-none bg-primary-main text-white'
+            : `h-20 w-96 px-lg ease-in duration-300 bg-white text-primary-text`;
+        const btnTitleClassName = isActive ? 'text-xl mb-xs' : `text-l mb-2xs`;
         const btnDescClassName = isActive
             ? 'text-l font-light text-white'
             : `text-m font-light text-secondary-text`;
         const iconClassName = isActive ? '' : `text-primary-main`;
         const iconVersion = tab?.icon?.iconVersion;
         const activeIconStyle = isActive ? 'white' : 'normal';
-        return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: style('box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-[88px]', btnClassName), children: [jsx(Img, { className: `h-6 w-6 min-w-6 min-h-6 mr-4 ${iconClassName}`, image: {
+        return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: style('box-border relative border border-gray cursor-pointer text-left border-b-0 flex hover:h-20 space-x-m', btnClassName), children: [jsx(Img, { className: style('h-6 w-6 min-w-6 min-h-6', iconClassName), image: {
                         ...tab?.icon,
                         iconVersion: iconVersion ?? activeIconStyle,
                     }, width: "24", height: "24" }), jsxs("div", { className: "border-0", children: [jsx("div", { className: btnTitleClassName, children: tab?.title }), jsx("div", { className: btnDescClassName, children: tab.description })] })] }, String(i)));
     }
     function renderTabs$1({ activeIndex, tabsNav, slideIndexShift, onClick }) {
         const CARD_SHIFT = 388;
-        return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }, className: "flex flex-col justify-end items-center h-[126px] pt-9 box-border duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap items-end gap-2", children: tabsNav.map((tab, i) => renderNavButton$3({
+        return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }, className: "flex flex-col justify-end items-center h-32 pt-4xl box-border duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap items-end gap-xs", children: tabsNav.map((tab, i) => renderNavButton$3({
                             tab,
                             i,
                             isActive: Boolean(i === slideIndexShift),
@@ -1957,7 +2118,7 @@
             ? getDisabledButtonClasses({ version: button?.version })
             : getRegularButtonClasses({ className: 'text-white', version: button?.version });
         const link = useLink();
-        return (jsxs(BlockWrapper, { className: style('flex flex-col items-center', className), defaultPadding: "p-default", ...rest, children: [title ? (jsx(Heading, { className: "pb-5 xl:pb-9 self-start xl:self-center", headingType: "h2", title: title })) : null, jsxs("form", { className: "w-full xl:max-w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, valid: !isDisabled, placeholder: placeholder, label: label, ...field(AMOUNT_KEY, { parse: Number, format: String }) }), button?.text ? (jsx("button", { type: "submit", className: style('w-full p-4 mt-5 xl:mt-6', buttonStyle), disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
+        return (jsxs(BlockWrapper, { className: style('flex flex-col items-center', className), defaultPadding: "p-6xl", ...rest, children: [title ? (jsx(Heading, { className: "pb-5 xl:pb-9 self-start xl:self-center", headingType: "h2", title: title })) : null, jsxs("form", { className: "w-full xl:max-w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, valid: !isDisabled, placeholder: placeholder, label: label, ...field(AMOUNT_KEY, { parse: Number, format: String }) }), button?.text ? (jsx("button", { type: "submit", className: style('w-full p-4 mt-5 xl:mt-6', buttonStyle), disabled: isDisabled, ...link(button), children: button.text })) : null] })] }));
     });
 
     const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
@@ -1972,8 +2133,7 @@
         }
         const BlockComponent = type && blocksRegistry[type];
         return blockDecorator({
-            blockClassName: style('scroll-mt-12', // TODO scroll-mt-12 ? here?
-            className, block.style || defaultStyle),
+            blockClassName: style(block.style?.length ? block.style : defaultStyle, className),
             block,
             ancestors,
             // Adjusted by decorator block and blockClassName
@@ -1987,20 +2147,25 @@
     const DEFAULT_SLOT_NAME = null;
 
     const EMPTY_ANCESTORS = [];
-    const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, renderProps = renderBlock$1, ...options }) => (blocks || []).map((_, j) => renderProps(_, {
-        ...options,
-        key: `${key ? key : _.type}-${j}`,
-        ancestors: options.parent
-            ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
-            : ancestors,
-    }));
+    const renderBlocksList = (blocks, { key, ancestors = EMPTY_ANCESTORS, slotName = DEFAULT_SLOT_NAME, extraProps, renderProps = renderBlock$1, ...options }) => {
+        const renderChildBlock = extraProps
+            ? (childBlock, childOptions) => renderBlock$1(childBlock, childOptions, extraProps)
+            : renderProps;
+        return (blocks || []).map((_, i) => renderChildBlock(_, {
+            ...options,
+            key: `${key ? key : _.type}-${i}`,
+            ancestors: options.parent
+                ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
+                : ancestors,
+        }, i));
+    };
 
-    function renderChildren({ children, block, options, renderProps, }) {
+    function renderChildren({ block, options, children, extraProps, renderProps, }) {
         if (children) {
             return children;
         }
         return block && options
-            ? renderBlocksList(block.blocks, { ...options, parent: block, renderProps })
+            ? renderBlocksList(block.blocks, { ...options, parent: block, extraProps, renderProps })
             : null;
     }
 
@@ -2031,7 +2196,7 @@
         return (jsx("div", { className: `inline-block snap-always box-border ${className}`, style: style, "aria-current": Boolean(idx === activeIndex), ref: ref, children: children }));
     });
 
-    const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]', 'min-w-[25%]'];
+    const childStyleMap = ['min-w-full', 'min-w-1/2', 'min-w-1/3', 'min-w-1/4'];
     const SwipeListContainer = JSX(({ className = '', containerRef, activeIndex, visibleItemCount = 0, gap = 0, padding = 0, listType = 'horizontal-list', snapAlign = 'snap-center', minHeight, children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
         const observerOptions = {
             sensitivity: 1,
@@ -2067,6 +2232,28 @@
         .filter(([_]) => _ && _.intersectionRatio >= 0.9)
         .map(([, i]) => i);
 
+    const containerStyles = {
+        'horizontal-list': 'mx-auto mt-5 w-fit',
+        'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
+    };
+    const activeDotStyles = {
+        'horizontal-list': 'w-6',
+        'vertical-list': 'h-6',
+    };
+    const dotStyle = 'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white group-data-transparent:bg-white';
+    const inactiveDotStyle = 'w-2 h-2 opacity-30';
+    const SwipeListControlDots = JSX(({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list', version }) => {
+        const handleClick = (idx) => {
+            if (idx !== activeIndex && containerRef?.current) {
+                containerRef.current.children[idx]?.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                });
+            }
+        };
+        return dotCount ? (jsx("div", { className: style('flex gap-2', containerStyles[listType], version ? 'group' : ''), ...(version ? { 'data-ver': version } : {}), children: new Array(dotCount).fill(null).map((_, idx) => (jsx("div", { className: `${dotStyle} ${idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle}`, role: "button", "aria-hidden": true, onClick: () => handleClick(idx) }, String(idx)))) })) : null;
+    });
+
     const areArraysEqual = (as, bs) => as === bs || Boolean(as && bs && as?.length === bs?.length && as.every((_, i) => _ === bs[i]));
 
     const getItemWidth = (container) => (itemCount) => container.scrollWidth / itemCount;
@@ -2082,7 +2269,7 @@
         container.scrollTo({ left: 0, behavior: 'smooth' });
     };
 
-    const useSwipeListScroll = ({ itemCount, isCyclic, onVisibleIndicesChange, }) => {
+    const useSwipeListScroll = ({ itemCount, onVisibleIndicesChange, }) => {
         const containerRef = useRef(null);
         const [visibleIndices, setVisibleIndices] = useState([]);
         const handleVisibleIndicesChange = useCallback((indices) => {
@@ -2098,42 +2285,40 @@
             if (!containerRef.current) {
                 return;
             }
-            if (isCyclic && !canScrollLeft) {
-                scrollToEnd(containerRef.current);
+            if (canScrollLeft) {
+                scrollBy(containerRef.current)(itemCount, -1);
             }
             else {
-                scrollBy(containerRef.current)(itemCount, -1);
+                scrollToEnd(containerRef.current);
             }
-        }, [isCyclic, itemCount, canScrollLeft]);
+        }, [itemCount, canScrollLeft]);
         const scrollRight = useCallback(() => {
             if (!containerRef.current) {
                 return;
             }
-            if (isCyclic && !canScrollRight) {
-                scrollToStart(containerRef.current);
+            if (canScrollRight) {
+                scrollBy(containerRef.current)(itemCount, 1);
             }
             else {
-                scrollBy(containerRef.current)(itemCount, 1);
+                scrollToStart(containerRef.current);
             }
-        }, [itemCount, isCyclic, canScrollRight]);
+        }, [itemCount, canScrollRight]);
         return [
             containerRef,
             {
                 scrollLeft,
                 scrollRight,
-                canScrollLeft: isCyclic || canScrollLeft,
-                canScrollRight: isCyclic || canScrollRight,
+                canScrollLeft,
+                canScrollRight,
                 visibleIndicesRange: [minIndex, maxIndex],
                 handleVisibleIndicesChange,
             },
         ];
     };
 
-    const ITEMS_GAP = 16;
-
     const scrollButtonStyle$1 = 'absolute top-[calc(50%-24px)] z-40';
-    const blurBaseStyle = 'absolute top-0 bottom-0 z-40 w-[84px] pointer-events-none';
-    const CarouselScrollButtons = JSX(({ scroll, arrowsPadded, isBlur, onScrollLeft, onScrollRight, hasEdgeBlocks, activeIndex, itemCount, }) => {
+    const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
+    const CarouselScrollButtons = JSX(({ scroll, activeIndex, itemCount, arrowsPadded, hasEdgeBlocks, onScrollLeft, onScrollRight, }) => {
         const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
         const canMoveLeft = hasEdgeBlocks ? activeIndex > 0 : canScrollLeft;
         const canMoveRight = hasEdgeBlocks ? activeIndex < itemCount - 1 : canScrollRight;
@@ -2155,74 +2340,33 @@
                 onScrollRight();
             }
         }, [scrollRight, onScrollRight, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
-        return (jsxs("div", { children: [renderBlur(isBlur, scroll), canMoveLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'left-8' : 'left-0'), onClick: handleScrollLeft })) : null, canMoveRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'right-8' : 'right-0'), onClick: handleScrollRight })) : null] }));
-    });
-    const renderBlur = (isBlur, scroll) => isBlur ? (jsxs("div", { children: [scroll.canScrollLeft ? (jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white') })) : null, scroll.canScrollRight ? (jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white') })) : null] })) : null;
-
-    const containerStyles = {
-        'horizontal-list': 'mx-auto mt-5 w-fit',
-        'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
-    };
-    const activeDotStyles = {
-        'horizontal-list': 'w-6',
-        'vertical-list': 'h-6',
-    };
-    const dotStyle = 'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white group-data-transparent:bg-white';
-    const inactiveDotStyle = 'w-2 h-2 opacity-30';
-    const SwipeListControlDots = JSX(({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list', version }) => {
-        const handleClick = (idx) => {
-            if (idx !== activeIndex && containerRef?.current) {
-                containerRef.current.children[idx]?.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'nearest',
-                });
-            }
-        };
-        return dotCount ? (jsx("div", { className: style('flex gap-2', containerStyles[listType], version ? 'group' : ''), ...(version ? { 'data-ver': version } : {}), children: new Array(dotCount).fill(null).map((_, idx) => (jsx("div", { className: `${dotStyle} ${idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle}`, role: "button", "aria-hidden": true, onClick: () => handleClick(idx) }, String(idx)))) })) : null;
+        return (jsxs("div", { children: [renderBlur(scroll), canMoveLeft ? (jsx(ScrollLeftButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'left-1 @lg:left-8' : 'left-0'), onClick: handleScrollLeft })) : null, canMoveRight ? (jsx(ScrollRightButton, { className: style(scrollButtonStyle$1, arrowsPadded ? 'right-1 @lg:right-8' : 'right-0'), onClick: handleScrollRight })) : null] }));
     });
+    const renderBlur = (scroll) => (jsxs("div", { children: [scroll.canScrollLeft ? (jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white') })) : null, scroll.canScrollRight ? (jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white') })) : null] }));
 
-    const renderControlButtons = ({ showArrows, showDots, scrollButtonsProps, dotsProps, }) => {
-        return [
-            showArrows ? jsx(CarouselScrollButtons, { ...scrollButtonsProps }, "0") : null,
-            showDots ? jsx(SwipeListControlDots, { ...dotsProps, listType: "horizontal-list" }, "1") : null,
-        ];
-    };
+    const ITEMS_GAP = 16;
 
-    const Carousel = JSX(({ className = '', itemCount, visibleItemCount = 0, isBlur = true, isCyclic = false, arrowsPadded = true, isPadding = true, showDots = false, isAlignCenter = false, showArrows = true, isGap = true, ...rest }) => {
+    const Carousel = JSX(({ className, itemCount, visibleItemCount = 0, noCardBorder, isAlignCenter, showDots, arrowsPadded = true, isGap = true, ...rest }) => {
         const { blocks: childBlocks = [] } = rest.block || {};
         const count = itemCount || childBlocks?.length;
-        const [activeIndex, setActiveIndex] = useState(Math.floor(visibleItemCount / 2));
-        const increaseActiveIndex = useCallback(() => setActiveIndex((_) => _ + 1), []);
-        const decreaseActiveIndex = useCallback(() => setActiveIndex((_) => _ - 1), []);
-        const [containerRef, scroll] = useSwipeListScroll({
+        const [activeIndex, { inc: increaseActiveIndex, dec: decreaseActiveIndex }] = useCarouselControls({
             itemCount: count,
-            isCyclic,
-        });
+            visibleItemCount,
+        }, Math.floor(visibleItemCount / 2));
+        const [containerRef, scroll] = useSwipeListScroll({ itemCount: count });
         const [dotsActiveIndex] = scroll.visibleIndicesRange;
+        // TODO Remove
         const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
-        return (jsx(BlockWrapper, { className: className, defaultPadding: getPaddingStyle$1(isPadding), ...rest, children: jsxs("div", { className: style(getAlignStyle(isAlignCenter), 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: isGap ? ITEMS_GAP : undefined, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: jsxs("div", { className: style(isAlignCenter ? 'flex justify-center' : '', 'relative max-w-full'), children: [jsx(SwipeListContainer, { containerRef: containerRef, visibleItemCount: visibleItemCount, snapAlign: "snap-start", gap: isGap ? ITEMS_GAP : undefined, onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: renderChildren({
                             ...rest,
-                            renderProps: isBankHistoryCarousel
-                                ? (block, options) => renderBlock$1(block, options, {
-                                    blocksLength: childBlocks?.length,
-                                    activeIndex: activeIndex,
-                                })
-                                : renderBlock$1,
-                        }) }), renderControlButtons({
-                        showArrows,
-                        showDots,
-                        scrollButtonsProps: {
-                            scroll,
-                            arrowsPadded,
-                            isBlur,
-                            onScrollLeft: decreaseActiveIndex,
-                            onScrollRight: increaseActiveIndex,
-                            hasEdgeBlocks: isBankHistoryCarousel,
-                            activeIndex,
-                            itemCount: count,
-                        },
-                        dotsProps: { containerRef, activeIndex: dotsActiveIndex, dotCount: count },
-                    })] }) }));
+                            renderProps: (block, options, blockIndex) => renderBlock$1(block, options, {
+                                className: style('h-full min-w-80 sm:min-w-96', noCardBorder
+                                    ? ''
+                                    : 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider'),
+                                blockIndex,
+                                isActive: activeIndex === blockIndex,
+                            }),
+                        }) }), jsx(CarouselScrollButtons, { scroll: scroll, arrowsPadded: arrowsPadded, onScrollLeft: decreaseActiveIndex, onScrollRight: increaseActiveIndex, hasEdgeBlocks: isBankHistoryCarousel, activeIndex: activeIndex, itemCount: count }), showDots ? (jsx(SwipeListControlDots, { containerRef: containerRef, activeIndex: dotsActiveIndex, dotCount: count, listType: "horizontal-list" })) : null] }) }));
     });
     Carousel.childrenTypes = [
         'CarouselCard',
@@ -2237,75 +2381,21 @@
         'CarouselInvestmentCard',
         'CarouselEventCard',
     ];
-    const getPaddingStyle$1 = (isPadding) => (isPadding ? 'p-default' : '');
-    const getAlignStyle = (isAlignCenter) => isAlignCenter ? 'flex justify-center' : '';
-
-    const CarouselBankHistoryCard = JSX(({ title, description, blocksLength = 0, activeIndex, options }) => {
-        const orderNumber = Number(options?.key?.split('-').slice(-1)[0]) || 0;
-        const isActive = orderNumber === activeIndex;
-        return (jsx(BlockWrapper, { className: "flex h-[485px]", defaultPadding: "p-0", children: isActive ? (jsx("div", { className: "relative flex items-center w-full", children: jsx(Headline, { headlineVersion: "M", title: title, description: description, align: "text-left", className: style('absolute z-10 h-[385px] w-[440px] p-8 text-white shadow-dark-blue', getActiveBlockPosition(orderNumber, blocksLength), getBackgroundColor(orderNumber)) }) })) : (jsx("div", { className: "flex w-full items-center justify-center", children: jsx("div", { className: style('flex justify-center items-center h-[300px] w-[340px] font-mohave text-title-large tracking-[-0.03em]', getBackgroundColor(orderNumber)), children: jsx("span", { className: getTextColor(orderNumber), children: title }) }) })) }));
-    });
-    const getBackgroundColor = (orderNumber) => {
-        const division = orderNumber % 3;
-        switch (division) {
-            case 0:
-                return 'bg-primary-main';
-            case 1:
-                return 'bg-green-light';
-            case 2:
-                return 'bg-yellow-light';
-            default:
-                return 'bg-primary-main';
-        }
-    };
-    const getTextColor = (orderNumber) => {
-        const division = orderNumber % 3;
-        switch (division) {
-            case 1:
-                return 'gradient-color-text-on-yellow';
-            case 2:
-                return 'gradient-color-text-on-yellow';
-            default:
-                return 'gradient-color-text-on-green';
-        }
-    };
-    const getActiveBlockPosition = (orderNumber, blocksLength) => {
-        if (orderNumber === 0) {
-            return 'left-9';
-        }
-        else if (orderNumber === blocksLength - 1) {
-            return 'right-9';
-        }
-        else {
-            return '-left-[25px]';
-        }
-    };
-
-    const getColSpan = (className) => {
-        const colSpanPrefix = 'col-span-';
-        const colSpanStr = className?.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
-        return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
-    };
 
-    const CARD_WIDTH_MAP = {
-        normal: 'min-w-[970px]',
-        small: 'min-w-[355px]',
-    };
-    function getCardWidth(className = '', carouselVersion = 'normal') {
-        const colSpan = getColSpan(className);
-        if (colSpan <= 4) {
-            return 'w-[375px]';
-        }
-        else {
-            return CARD_WIDTH_MAP[carouselVersion];
-        }
-    }
+    const CarouselBankHistoryCard = JSX(({ className, title, description, blockIndex = 0, isActive, ...rest }) => (jsx(BlockWrapper, { className: style('relative flex h-[485px]', isActive ? 'w-[440px] z-10' : 'w-[340px]', className), defaultPadding: "p-0", ...rest, children: jsx("div", { className: style('basis-full self-center', getBackColor(blockIndex)), children: isActive ? (jsx(Headline, { headlineVersion: "M", title: title, description: description, padding: "p-3xl", align: "text-left", className: "h-96 text-white shadow-dark-blue" })) : (jsx("div", { className: "h-[300px] flex justify-center items-center font-mohave text-title-large tracking-[-0.03em]", children: jsx("span", { className: getTextColor(blockIndex), children: title }) })) }) })));
+    const getBackColor = (blockIndex) => ['bg-primary-main', 'bg-green-light', 'bg-yellow-light'][blockIndex % 3];
+    const getTextColor = (blockIndex) => [
+        'gradient-color-text-on-green',
+        'gradient-color-text-on-yellow',
+        'gradient-color-text-on-yellow',
+    ][blockIndex % 3];
 
     const titleSize = 'L';
 
-    const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full sm:hidden';
-    const CarouselCard = JSX(({ className = '', button, description, title, carouselVersion = 'normal', version = '' }) => (jsx("section", { className: style('flex pb-9 pl-12 sm:p-5 border-box h-full sm:max-w-[375px]', getCardWidth(className, carouselVersion), className), children: jsxs("div", { className: "relative w-full", children: [jsx("div", { className: `${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-6 right-8 bg-green` }), jsx("div", { className: `${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light` }), jsxs("div", { className: "relative h-full bg-white z-10 p-10 border border-solid border-green-light", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: titleSize, align: "text-left", version: version }), renderButtonsSection([button], {
-                            className: 'mt-14 sm:justify-center',
+    const layerBaseStyle = 'z-10 border border-solid w-full h-full';
+    const layerStyle = style(layerBaseStyle, 'absolute hidden sm:block border-transparent');
+    const CarouselCard = JSX(({ className, title, description, button, ...rest }) => (jsx(BlockWrapper, { className: style('sm:pl-12 sm:pb-9', className), defaultPadding: "p-0", ...rest, children: jsxs("div", { className: "relative", children: [jsx("div", { className: style(layerStyle, 'top-9 right-12 bg-green-dark') }), jsx("div", { className: style(layerStyle, 'top-6 right-8 bg-green') }), jsx("div", { className: style(layerStyle, 'top-3 right-4 bg-green-light') }), jsxs("div", { className: style(layerBaseStyle, 'relative p-10 bg-white border-green-light'), children: [jsx(Headline, { title: title, description: description, headlineVersion: titleSize, align: "text-left", isPadding: false }), renderButtonsSection([button], {
+                            className: 'mt-6xl sm:justify-center',
                             isVertical: true,
                         })] })] }) })));
 
@@ -2313,7 +2403,7 @@
         black: 'bg-black',
         white: 'bg-white',
     };
-    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: style('border box-border border-gray p-default sm:p-7 h-full flex flex-col justify-left', className), ...rest, children: [image?.src ? jsx(Img, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Paragraph, { size: "text-m", align: "text-left", font: "font-light", children: description }) })) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-secondary-text", children: [jsx("div", { className: "mr-1.5", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0426\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'mt-5 w-full' })] })));
+    const CarouselCatalogCard = JSX(({ className = '', title, description, image, price, button, colors, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col justify-left gap-m', className), defaultPadding: "p-6xl sm:p-7", ...rest, children: [image?.src ? jsx(Img, { className: "flex justify-center", image: image }) : null, jsx(Headline, { title: title, description: description, headlineVersion: "XS", isPadding: false, align: "text-left" }), colors?.length ? (jsxs("div", { className: "flex text-secondary-text", children: [jsx("div", { className: "mr-xs", children: jsx(Text, { size: "text-s", align: "text-left", font: "font-light", children: "\u0426\u0432\u0435\u0442\u0430:" }) }), colors.map(renderColorOption)] })) : null, price ? (jsxs(Text, { size: "text-h3", align: "text-left", children: [price, "\u00A0\u20BD"] })) : null, renderButtonsSection([button], { buttonClassName: 'w-full' })] })));
     const renderColorOption = (color, i) => (jsx("div", { role: "figure", className: `w-6 h-6 ml-1 sm:ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
 
     const LinkWrapper = JSX(({ className = '', href, target, isRemote = false, children }) => {
@@ -2324,7 +2414,7 @@
     });
 
     const CarouselEventCard = JSX(({ className = '', icon, title, description, href, target, ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('w-[365px]', className), defaultPadding: "p-0", ...rest, children: jsxs(LinkWrapper, { className: "flex flex-col", href: href, target: target, children: [icon?.icon ? jsx(Img, { image: icon }) : null, icon?.src ? jsx(Img, { image: icon }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left pt-3 mb-2", title: title })) : null, description ? (jsx("div", { className: "mb-4", children: jsx(Text, { font: "font-light", size: "text-m", color: "text-secondary-text", children: description }) })) : null] }) }));
+        return (jsx(BlockWrapper, { className: className, defaultPadding: "p-0", ...rest, children: jsxs(LinkWrapper, { className: "flex flex-col", href: href, target: target, children: [icon?.icon ? jsx(Img, { image: icon }) : null, icon?.src ? jsx(Img, { image: icon }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mt-s ml-s mb-xs", title: title })) : null, description ? (jsx("div", { className: "ml-s mb-m", children: jsx(Text, { font: "font-light", size: "text-m", color: "text-secondary-text", children: description }) })) : null] }) }));
     });
 
     const imageAlignmentMap = {
@@ -2332,7 +2422,7 @@
         center: 'self-center',
         end: 'self-end',
     };
-    const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-lg font-sans overflow-hidden', padding || defaultPadding, className), children: [backImage ? jsx("div", { className: "absolute bottom-0 right-0 z-0", children: backImage }) : null, title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: "grow relative flex flex-wrap sm:flex-nowrap justify-between items-stretch gap-lg", children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-lg max-w-[600px] xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), buttons] }), renderImageContainer(rightImage, { className: '-order-1 sm:order-1', imageAlign })] })] })));
+    const BaseTile = JSX(({ className, defaultPadding, padding, title = '', insetTitle = '', buttons, leftImage, rightImage, imageAlign, backImage, children, }) => (jsxs("div", { className: style('relative flex flex-col gap-3xl font-sans overflow-hidden', padding || defaultPadding, className), children: [title ? jsx("div", { className: "relative", children: title }) : null, jsxs("div", { className: "grow relative flex flex-wrap @xl:flex-nowrap justify-between items-stretch gap-3xl", children: [renderImageContainer(leftImage, { imageAlign }), jsxs("div", { className: style('flex flex-col gap-3xl max-w-[600px] xl:max-w-[728px]', leftImage ? '' : 'grow'), children: [insetTitle, jsx("div", { className: "grow", children: children }), backImage ? (jsx("div", { className: "mx-auto sm:absolute sm:-z-10 sm:-bottom-4 sm:-right-4", children: backImage })) : null, buttons] }), renderImageContainer(rightImage, { className: '-order-1 @xl:order-1', imageAlign })] })] })));
     const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
 
     const getItemListFontSize = (colValue) => (colValue === 1 ? 'text-h6' : 'text-l');
@@ -2340,36 +2430,36 @@
         1: 'flex-col',
         2: 'gap-x-10 flex-wrap',
     };
-    const CarouselInvestmentCard = JSX(({ className, padding, additionalDescription, cardsList = [], columnsMode = 1, description, image, title, ...rest }) => (jsx(BlockWrapper, { className: style('box-border text-left w-[697px]', 'border border-solid border-gray group-data-secondary:border-white/50', className), padding: "p-0", ...rest, children: jsxs(BaseTile, { className: "h-full", defaultPadding: "p-m", padding: padding, title: title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-3.5 z-10", title: title }) : null, backImage: image?.src ? jsx(Img, { image: image }) : null, children: [jsxs("div", { className: "flex justify-between mb-4", children: [description ? (jsx("div", { className: "w-1/3", children: jsx(Text, { size: "text-h6", children: description }) })) : null, additionalDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null] }), cardsList.length ? (jsx("ul", { className: style('list-none m-0 p-0 flex gap-y-2', cardColumnsModeStyleMap[columnsMode]), children: renderCardList(cardsList, columnsMode) })) : null] }) })));
+    const CarouselInvestmentCard = JSX(({ className, padding, additionalDescription, cardsList = [], columnsMode = 1, description, image, title, ...rest }) => (jsx(BlockWrapper, { className: style('text-left', className), padding: "p-0", ...rest, children: jsxs(BaseTile, { className: "h-full", defaultPadding: "p-xl", padding: padding, title: title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-m z-10", title: title }) : null, backImage: image?.src ? jsx(Img, { image: image }) : null, children: [jsxs("div", { className: "flex justify-between mb-4", children: [description ? (jsx("div", { className: "w-1/3", children: jsx(Text, { size: "text-h6", children: description }) })) : null, additionalDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null] }), cardsList.length ? (jsx("ul", { className: style('list-none m-0 p-0 flex gap-y-2', cardColumnsModeStyleMap[columnsMode]), children: renderCardList(cardsList, columnsMode) })) : null] }) })));
     const renderCardList = (cardsList, columnsMode) => {
         const CARDS_COUNT_MAP = [4, 9];
         const visibleCardsList = cardsList.slice(0, CARDS_COUNT_MAP[columnsMode - 1]);
         return visibleCardsList.map((item, i) => (jsxs("li", { className: columnsMode === 2 ? 'basis-[calc(50%-20px)]' : '', children: [item?.parameter ? (jsx("div", { className: "pr-2.5", children: jsx(Text, { size: getItemListFontSize(columnsMode), children: item.parameter }) })) : null, item?.parameterDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: item.parameterDescription })) : null] }, String(i))));
     };
 
-    const LINK_CLASS_NAME = `absolute border border-primary-main ml-3 px-6 py-5
-  text-l font-light bg-white text-primary-text flex w-[316px]
+    const LINK_CLASS_NAME = `absolute border border-primary-main ml-s px-xl py-lg
+  text-l font-light bg-white text-primary-text flex w-80
   justify-between items-center group-hover/link:text-primary-main z-10`;
     const LINK_BORDER_CLASS_NAME = 'bg-transparent border-white border h-[70px] absolute w-[316px] top-0';
     const LinkButton = JSX(({ text, href = '', target = '', className = '' }) => {
         const link = useLink();
         const adjustedProps = link({ href, target });
-        return text ? (jsxs("div", { className: `relative group/link cursor-pointer w-[328px] h-[82px] ${className}`, children: [jsxs("a", { className: LINK_CLASS_NAME, role: "link", ...adjustedProps, children: [jsx("div", { className: "p-0.5", children: text }), jsx("div", { className: "w-6 h-6", children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border brightness-0 group-hover/link:brightness-100", image: { icon: 'ArrowRightIcon', iconVersion: 'black' }, imageClassName: "group-hover/link:text-primary-main", width: "24", height: "24" }) })] }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mx-1.5 mt-1.5` }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mt-3 mr-3` })] })) : null;
+        return text ? (jsxs("div", { className: `relative group/link cursor-pointer w-[328px] h-[82px] ${className}`, children: [jsxs("a", { className: LINK_CLASS_NAME, role: "link", ...adjustedProps, children: [jsx("div", { className: "p-3xs", children: text }), jsx("div", { className: "w-6 h-6", children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border brightness-0 group-hover/link:brightness-100", image: { icon: 'ArrowRightIcon', iconVersion: 'black' }, imageClassName: "group-hover/link:text-primary-main", width: "24", height: "24" }) })] }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mx-1.5 mt-1.5` }), jsx("div", { className: `${LINK_BORDER_CLASS_NAME} mt-3 mr-3` })] })) : null;
     });
 
     const MAX_LINKS_COUNT = 10;
-    const CarouselLinks = JSX(({ className, additionalDescription, description, links, title, ...rest }) => (jsxs(BlockWrapper, { className: style('flex w-full overflow-hidden justify-between', className), ...rest, children: [jsxs("div", { className: "flex flex-col max-w-96 pr-m text-white text-xl font-light", children: [jsx(Headline, { isPadding: false, title: title, description: description, as: "h1", align: "text-left" }), additionalDescription ? (jsx(Headline, { className: "pt-s", description: additionalDescription, align: "text-left", isPadding: false })) : null] }), links?.length ? renderLinks(links) : null] })));
+    const CarouselLinks = JSX(({ className, additionalDescription, description, links, title, ...rest }) => (jsxs(BlockWrapper, { className: style('flex w-full overflow-hidden', className), ...rest, children: [jsxs("div", { className: "mr-xl flex-auto", children: [jsx(Headline, { isPadding: false, title: title, description: description, as: "h1", align: "text-left" }), additionalDescription ? (jsx(Headline, { className: "pt-m", description: additionalDescription, align: "text-left", isPadding: false })) : null] }), links?.length ? renderLinks(links) : null] })));
     const renderLinks = (links) => {
         const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
-        return (jsx(Carousel, { className: "min-w-[832px] w-[832px]", version: "", isBlur: false, isCyclic: true, itemCount: itemCount, arrowsPadded: false, showDots: true, children: new Array(itemCount).fill(null).map((_, groupIndex) => (jsx("div", { className: "w-[672px] min-w-[672px] ml-10 mr-10 flex flex-wrap self-start", children: links
+        return (jsx(Carousel, { className: "min-w-[832px] w-[832px]", version: "", itemCount: itemCount, arrowsPadded: false, showDots: true, children: new Array(itemCount).fill(null).map((_, groupIndex) => (jsx("div", { className: "w-[672px] min-w-[672px] ml-10 mr-10 flex flex-wrap self-start", children: links
                     .slice(groupIndex * MAX_LINKS_COUNT, (groupIndex + 1) * MAX_LINKS_COUNT)
                     .map((link, index) => (jsx(LinkButton, { className: "m-1", ...link }, String(index)))) }, String(groupIndex)))) }));
     };
 
     const DOT_SIZE_MAP = {
-        L: 'w-1.5 h-1.5 mr-4',
-        M: 'w-1.5 h-1.5 mr-3',
-        S: 'w-1 h-1 mr-2',
+        L: 'w-1.5 h-1.5 mr-m',
+        M: 'w-1.5 h-1.5 mr-s',
+        S: 'w-1 h-1 mr-xs',
     };
     const ListItem = JSX(({ className, isDotted = true, children, size = 'M' }) => (jsxs("div", { className: style('font-sans flex', className), role: "listitem", children: [isDotted ? (jsx("div", { className: "shrink-0", children: jsx("div", { className: style('align-middle inline-block rounded-full bg-primary-text group-data-secondary:bg-white', DOT_SIZE_MAP[size]) }) })) : null, jsx("span", { children: children })] })));
 
@@ -2379,31 +2469,31 @@
         L: 'text-h5',
     };
     const ITEM_INDENT_MAP = {
-        S: 'ml-2',
-        M: 'ml-3',
-        L: 'ml-4',
+        S: 'ml-xs',
+        M: 'ml-s',
+        L: 'ml-m',
     };
-    const List = JSX(({ className, hasIndent, isDotted, items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: style('flex flex-col gap-2 text-left text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text', TEXT_SIZE_MAP[listItemSize], hasIndent ? ITEM_INDENT_MAP[listItemSize] : '', className), role: "list", children: items.map((item, i) => (jsx(ListItem, { isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
+    const List = JSX(({ className, hasIndent, isDotted, items, listItemSize = 'M' }) => items?.length ? (jsx("section", { className: style('flex flex-col gap-xs text-left text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text', TEXT_SIZE_MAP[listItemSize], hasIndent ? ITEM_INDENT_MAP[listItemSize] : '', className), role: "list", children: items.map((item, i) => (jsx(ListItem, { isDotted: isDotted, size: listItemSize, children: item }, String(i)))) })) : null);
 
-    const CarouselProductCard = JSX(({ additionalDescription, align = 'text-center', button = {}, className = '', description, headlineSmallVersion = 'H6', href, icon, isDotted = true, isFullWidth = true, items = [], target, title, version = 'primary', ...rest }) => {
-        return (jsxs(BlockWrapper, { className: style('h-full flex flex-col justify-between min-w-[260px]', 'box-border border-solid border border-gray', align, className), defaultPadding: "p-0", version: version, ...rest, children: [jsxs(LinkWrapper, { className: "p-s", href: href, target: target, children: [renderImage$2(icon), renderCardTitle(headlineSmallVersion, title), renderDescription$3(description, title), renderItems(items, isDotted, version), renderAdditionalDescription(additionalDescription)] }), renderButtonsSection([button], {
-                    className: style('p-s pt-0', isFullWidth ? '' : 'self-center min-w-[158px]'),
-                    isVertical: isFullWidth,
+    const alignTextStyle = 'text-center';
+
+    const CarouselProductCard = JSX(({ additionalDescription, align = alignTextStyle, button = {}, className = '', description, headlineSmallVersion = 'H6', href, icon, isDotted = true, isButtonFullWidth = true, isImageFullWidth = false, isTopPosition = false, items = [], target, title, version = 'primary', ...rest }) => {
+        return (jsxs(BlockWrapper, { className: style('flex flex-col justify-between', align, className), defaultPadding: "p-0", version: version, ...rest, children: [jsxs(LinkWrapper, { className: "p-m flex flex-col gap-xs", href: href, target: target, children: [renderCardTitle(headlineSmallVersion, title), renderDescription$2(description), renderItems(items, isDotted, version), renderAdditionalDescription(additionalDescription), renderImage$2(icon, isImageFullWidth, isTopPosition)] }), renderButtonsSection([button], {
+                    className: style('p-m pt-0', isButtonFullWidth ? '' : 'self-center'),
+                    isVertical: isButtonFullWidth,
                 })] }));
     });
-    const renderImage$2 = (image) => (jsxs("div", { className: "flex justify-center", children: [image?.src ? jsx(Img, { className: "mb-5", image: image }) : null, image?.icon ? jsx(Img, { className: `w-8 h-8 min-w-8 mb-5`, image: image }) : null] }));
-    const renderCardTitle = (headlineSmallVersion, title) => title ? (jsx("div", { children: jsx(Text, { size: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) })) : null;
-    const renderDescription$3 = (description, title) => description ? (jsx("div", { className: title ? 'mt-2' : '', children: jsx(Paragraph, { size: "text-l", children: description }) })) : null;
-    const renderAdditionalDescription = (additionalDescription) => additionalDescription ? (jsx("div", { className: "mt-auto", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", children: additionalDescription }) })) : null;
-    const renderItems = (items, isDotted, version = 'primary') => items?.length ? (jsx(List, { className: style('max-w-[308px] mt-2', version === 'primary' ? '!text-secondary-text' : ''), items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted, listItemSize: "S" })) : null;
+    const renderImage$2 = (image, isImageFullWidth, isTopPosition) => (jsxs("div", { className: style('flex gap-lg', isTopPosition ? 'order-first' : 'order-last', !isImageFullWidth ? 'justify-center' : ''), children: [image?.src ? jsx(Img, { className: "shrink-0", image: image }) : null, image?.icon ? (jsx(Img, { className: style('shrink-0', !isImageFullWidth ? 'w-8 h-8 min-w-8' : ''), image: image })) : null] }));
+    const renderCardTitle = (headlineSmallVersion, title) => title ? jsx(Text, { size: HEADLINE_SMALL_VERSION[headlineSmallVersion], children: title }) : null;
+    const renderDescription$2 = (description) => description ? jsx(Paragraph, { size: "text-l", children: description }) : null;
+    const renderAdditionalDescription = (additionalDescription) => additionalDescription ? (jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text group-data-secondary:text-white/80", children: additionalDescription })) : null;
+    const renderItems = (items, isDotted, version = 'primary') => items?.length ? (jsx(List, { className: style('text-s', version === 'primary' ? '!text-secondary-text' : ''), items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted, listItemSize: "S" })) : null;
 
     const cardTitleFont = 'font-normal';
     const cardDescriptionColor = 'text-secondary-text';
 
-    const CarouselProgramsCard = JSX(({ className = '', title, icon, list = [], href, target, ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('border border-gray', className), defaultPadding: "p-lg sm:p-0", ...rest, children: jsxs(LinkWrapper, { className: "sm:flex sm:items-center", href: href, target: target, children: [jsx("div", { className: "min-w-[200px] flex justify-center", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }), jsxs("div", { className: "sm:px-3 py-xl", children: [title ? jsx(Heading, { className: "mb-2 sm:mb-3.5", headingType: "h6", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-2 sm:gap-3", children: list?.map(renderList$2) })) : null] })] }) }));
-    });
-    const renderList$2 = (_, i) => (jsxs("div", { className: "flex flex-row-reverse justify-between gap-y-1 sm:flex-col", children: [_.title ? (jsx(Text, { size: "text-l", font: cardTitleFont, children: _.title })) : null, _.description ? (jsx(Paragraph, { size: "text-l", font: "font-light", color: cardDescriptionColor, children: _.description })) : null] }, String(i)));
+    const CarouselProgramsCard = JSX(({ className, title, icon, list = [], href, target, ...rest }) => (jsx(BlockWrapper, { className: className, defaultPadding: "p-3xl sm:p-0", ...rest, children: jsxs(LinkWrapper, { className: "sm:flex sm:items-center", href: href, target: target, children: [jsx("div", { className: "flex justify-center px-xl", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }), jsxs("div", { className: "sm:px-s p-5xl", children: [title ? jsx(Heading, { className: "mb-xs sm:mb-m", headingType: "h6", title: title }) : null, list.length ? (jsx("div", { className: "flex flex-col gap-xs sm:gap-s", children: list?.map(renderList$2) })) : null] })] }) })));
+    const renderList$2 = (_, i) => (jsxs("div", { className: "flex flex-row-reverse justify-between gap-y-2xs sm:flex-col", children: [_.title ? (jsx(Text, { size: "text-l", font: cardTitleFont, children: _.title })) : null, _.description ? (jsx(Paragraph, { size: "text-l", font: "font-light", color: cardDescriptionColor, children: _.description })) : null] }, String(i)));
 
     const buttonSizeStyles = {
         default: 'w-14 h-14',
@@ -2458,19 +2548,16 @@
 
     const SocialMedia = JSX(({ className = '', media, children, buttonSize }) => (jsxs("div", { className: "font-sans", children: [jsx("div", { className: `flex gap-1 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { buttonSize: buttonSize, ..._ }, String(index)))) }), jsx(Text, { size: "text-s", font: "font-light", color: "text-secondary-text", children: children })] })));
 
-    const BORDER_STYLE = 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
-
-    const CarouselRecommendationCard = JSX(({ className = '', description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', version = 'primary', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('relative min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), defaultPadding: "p-s", version: version, ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-4", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), jsxs("div", { className: "w-1/2 h-full flex flex-col flex-1 justify-end", children: [items.length ? jsx(List, { items: items, listItemSize: "S" }) : null, socialMedia.length ? jsx(SocialMedia, { className: "pt-10", media: socialMedia }) : null] }), renderIconBlock$2(icon)] }) }));
+    const CarouselRecommendationCard = JSX(({ className, padding, description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', ...rest }) => {
+        return (jsx(BlockWrapper, { className: style('relative min-h-[218px] group-data-gray:bg-main-divider/50', className), defaultPadding: "p-0", ...rest, children: jsx(LinkWrapper, { href: href, target: target, children: jsx(BaseTile, { className: "h-full", defaultPadding: "p-m", padding: padding, title: title ? (jsx(Headline, { title: title, description: description, headlineVersion: "S", isPadding: false, align: align })) : null, backImage: icon?.icon || icon?.src ? jsx(Img, { image: icon }) : null, buttons: socialMedia.length ? jsx(SocialMedia, { media: socialMedia }) : null, children: items.length ? jsx(List, { items: items, listItemSize: "S" }) : null }) }) }));
     });
-    const renderIconBlock$2 = (icon) => (jsxs("div", { className: "absolute bottom-0 right-0", children: [icon?.icon ? jsx(Img, { image: icon }) : null, icon?.src ? jsx(Img, { image: icon }) : null] }));
 
     const RichText = JSX((props) => {
         const { __html = '', richVersion = '' } = props;
         return (jsx("div", { className: style(richVersion, 'md-container'), dangerouslySetInnerHTML: { __html } }));
     });
 
-    const CarouselRichTextCard = JSX(({ className = '', __html, richVersion = 'striped', ...rest }) => (jsx(BlockWrapper, { className: style('border border-gray h-full min-w-96', className), ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) })));
+    const CarouselRichTextCard = JSX(({ className = '', __html, richVersion = 'striped', ...rest }) => (jsx(BlockWrapper, { className: className, ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) })));
 
     const Foldable = JSX(({ className = '', isFoldButtonOnTop = false, unfoldedByDefault = false, renderFoldableSection, renderFoldButton, }) => {
         const [isUnfolded, setIsUnfolded] = useState(unfoldedByDefault);
@@ -2506,9 +2593,9 @@
         const cellsNode = cardCells.map(renderCardInfo);
         const visibleCells = cellsNode.slice(0, VISIBLE_CELLS_COUNT);
         const hiddenCells = cellsNode.slice(VISIBLE_CELLS_COUNT);
-        return (jsxs(BlockWrapper, { className: style('relative border border-gray flex flex-col', className), defaultPadding: getPaddingStyle(isHighlighting), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock$1(icon), title ? (jsx(Heading, { className: style('pt-xs', align), headingType: "h5", title: title })) : null, button ? jsx(Button, { className: "w-full mt-4", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
+        return (jsxs(BlockWrapper, { className: style('relative flex flex-col', className), defaultPadding: getPaddingStyle(isHighlighting), ...rest, children: [isHighlighting ? renderHitIcon() : null, renderIconBlock$1(icon), title ? (jsx(Heading, { className: style('pt-xs', align), headingType: "h5", title: title })) : null, button ? jsx(Button, { className: "w-full mt-m", ...button }) : null, cardCells.length ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs("div", { children: [visibleCells, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenCells })] })), renderFoldButton: cardCells.length > 1 ? renderFoldButton$1 : null })) : null] }));
     });
-    const renderIconBlock$1 = (icon) => (jsx("div", { className: "w-[267px] min-w-[267px] self-center", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }));
+    const renderIconBlock$1 = (icon) => (jsx("div", { className: "basis-full self-center", children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }));
     const renderFoldButton$1 = ({ isUnfolded, onToggle }) => (jsxs("button", { className: "w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center", onClick: onToggle, children: [jsx("div", { children: isUnfolded ? 'Скрыть' : 'Подробнее о тарифе' }), jsx(Icon, { className: "text-primary-text", name: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', width: "16", height: "16" })] }));
     const renderHitIcon = () => (jsxs("div", { className: "absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]", children: [jsx(Icon, { iconVersion: "black", name: "HeartIcon", width: "23", height: "22" }), jsx(Paragraph, { size: "text-s", font: "font-normal", align: "text-center", color: "text-primary-text", children: "\u0425\u0418\u0422" })] }));
 
@@ -2519,7 +2606,7 @@
     const COLS_LENGTH_FOR_SCROLL$1 = 3;
     const COLUMN_WIDTH$2 = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px
 
-    const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES} ${GRADIENT}`, role: "columnheader", children: [icon && !image?.src && (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })), image?.src && jsx(Img, { className: "mb-[18px]", image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs font-light font-medium py-[11px]", children: link.text }) }) }))] })));
+    const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col gap-m items-center rounded-t-md border-b-0 p-2xl ${BORDER_CLASSES} ${GRADIENT}`, role: "columnheader", children: [icon && !image?.src && (jsx(Img, { className: "h-16 w-16 min-w-16 min-h-16", image: icon, width: "64", height: "64" })), image?.src && jsx(Img, { image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs font-light font-medium py-s", children: link.text }) }) }))] })));
 
     const carouselContainerClassesMap = {
         comparison: 'flex gap-4 duration-1000',
@@ -2538,7 +2625,7 @@
     });
     const labelStyle = (isFillGradient = false) => `text-xl m-0 ${isFillGradient ? 'text-white' : ''}`;
     const descriptionStyle = (isFillGradient = false) => `text-s opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`;
-    const renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label ? jsx("h4", { className: labelStyle(isFillGradient), children: label }) : null, description ? jsx("div", { className: descriptionStyle(isFillGradient), children: description }) : null] }, String(i)));
+    const renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-2xl pt-xl last:pb-2xl", children: [label ? jsx("h4", { className: labelStyle(isFillGradient), children: label }) : null, description ? jsx("div", { className: descriptionStyle(isFillGradient), children: description }) : null] }, String(i)));
 
     const titleStyle = (isLastRow = false) => `text-s py-7 ${DIVIDER_CLASSES$1} ${FIRST_CELL_CLASSES$1} ${isLastRow ? 'border-b-0' : 'border-solid'}`;
     const TableRow = JSX(({ row: { header, data }, activeIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (jsxs(TableRowContainer, { children: [header?.title ? jsx("div", { className: titleStyle(isLastRow), children: header.title }) : null, data?.length ? (jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$2, children: data.map((cell, i) => (jsx(TableCell, { cell: cell, isFirstRow: isFirstRow, isLastRow: isLastRow, isFillGradient: isColoredFirstColumn && i === 0 }, String(i)))) })) : null] })));
@@ -2548,7 +2635,7 @@
         return (jsxs("div", { className: "relative", children: [rowData.map((row, i, { length }) => (jsx(TableRow, { row: row, isFirstRow: i === 0, isLastRow: i + 1 === length, activeIndex: activeIndex, isColoredFirstColumn: isColoredFirstColumn }, String(i)))), isScrollAvailable
                     ? renderArrows({
                         ...controls,
-                        btnClass: ['top-[108px]', 'top-[44px]'],
+                        btnClass: ['top-28', 'top-12'],
                         className: 'right-7',
                         isDisabled: true,
                     })
@@ -2569,21 +2656,21 @@
             visibleItemCount: COLS_LENGTH_FOR_SCROLL$1,
         });
         const { isScrollAvailable } = controls;
-        return (jsxs("div", { children: [jsxs("div", { role: "table", children: [colHeaders?.length ? (jsx(ComparisonTableColumnHeaders, { colHeaders: colHeaders, activeIndex: activeIndex })) : null, rowData?.length ? (jsx(ComparisonTableRows, { rowData: rowData, isColoredFirstColumn: isColoredFirstColumn, activeIndex: activeIndex, controls: controls })) : null] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
+        return (jsxs("div", { children: [jsxs("div", { role: "table", children: [colHeaders?.length ? (jsx(ComparisonTableColumnHeaders, { colHeaders: colHeaders, activeIndex: activeIndex })) : null, rowData?.length ? (jsx(ComparisonTableRows, { rowData: rowData, isColoredFirstColumn: isColoredFirstColumn, activeIndex: activeIndex, controls: controls })) : null] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-20 bg-opacity-to-white" })) : null] }));
     });
 
     const ComparisonTable = JSX(({ className = '', title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, ...rest }) => {
         const [isShowAllRow, setIsShowAllRow] = useState(!visibleRowLength);
         const handleToggle = useCallback(() => setIsShowAllRow((_) => !_), []);
-        return (jsxs(BlockWrapper, { className: style('overflow-hidden relative', className), defaultPadding: "p-default", ...rest, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center mb-9 mx-auto", title: title }), jsx(ComparisonTableBody, { columns: columns, rowHeaders: rowHeaders, isShowAllRow: isShowAllRow, isColoredFirstColumn: isColoredFirstColumn, visibleRowLength: visibleRowLength }), visibleRowLength
+        return (jsxs(BlockWrapper, { className: style('overflow-hidden relative', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center mb-9 mx-auto", title: title }), jsx(ComparisonTableBody, { columns: columns, rowHeaders: rowHeaders, isShowAllRow: isShowAllRow, isColoredFirstColumn: isColoredFirstColumn, visibleRowLength: visibleRowLength }), visibleRowLength
                     ? renderShowMoreToggleButton({ isShowAllRow, onClick: handleToggle })
                     : null] }));
     });
-    const renderShowMoreToggleButton = ({ isShowAllRow, onClick, }) => (jsx("div", { className: "pr-12", children: jsxs("div", { className: "flex w-full", children: [jsx("div", { className: FIRST_CELL_CLASSES$1 }), jsx("button", { onClick: onClick, className: "mt-m py-xs flex-1 border-gray border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main", children: jsx(Text, { size: "text-xs", font: "font-medium", children: !isShowAllRow ? 'Показать все параметры' : 'Скрыть' }) })] }) }));
+    const renderShowMoreToggleButton = ({ isShowAllRow, onClick, }) => (jsx("div", { className: "pr-6xl", children: jsxs("div", { className: "flex w-full", children: [jsx("div", { className: FIRST_CELL_CLASSES$1 }), jsx("button", { onClick: onClick, className: "mt-m py-xs flex-1 border-gray border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main", children: jsx(Text, { size: "text-xs", font: "font-medium", children: !isShowAllRow ? 'Показать все параметры' : 'Скрыть' }) })] }) }));
 
-    const ContactsBlock = JSX(({ className, contacts, info, version = 'secondary', ...rest }) => (jsxs(BlockWrapper, { className: style('flex', className), defaultPadding: "p-default", version: version, ...rest, children: [info?.length ? renderBlocks(info) : null, contacts?.length ? renderBlocks(contacts) : null] })));
+    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] })));
     const renderBlocks = (info) => (jsx("div", { className: "flex grow basis-0", children: info.map((column, index) => renderBlocksColumn({ column, index })) }));
-    const renderBlocksColumn = ({ column, index }) => column ? (jsx("div", { className: "flex flex-col grow basis-0 pr-11 last:pr-0", children: column.map(({ title = '', description, additionalDescription, button }, key) => (jsxs("div", { className: "mt-6 first:mt-0", children: [jsx(Headline, { className: "!p-0", title: title, description: description, headlineVersion: "XS", align: "text-left" }), additionalDescription ? (jsx("div", { className: "mt-1.5 opacity-80", children: jsx(Paragraph, { size: "text-m", font: "font-light", children: additionalDescription }) })) : null, button?.href ? jsx(Button, { className: "mt-6", ...button }) : null] }, String(key)))) }, `col-${String(index)}`)) : null;
+    const renderBlocksColumn = ({ column, index }) => column ? (jsx("div", { className: "flex flex-col grow basis-0 pr-11 last:pr-0", children: column.map(({ title = '', description, additionalDescription, button }, key) => (jsxs("div", { className: "mt-xl first:mt-0", children: [jsx(Headline, { title: title, description: description, headlineVersion: "XS", align: "text-left", isPadding: false }), additionalDescription ? (jsx("div", { className: "mt-xs opacity-80", children: jsx(Paragraph, { size: "text-m", font: "font-light", children: additionalDescription }) })) : null, button?.href ? jsx(Button, { className: "mt-xl", ...button }) : null] }, String(key)))) }, `col-${String(index)}`)) : null;
 
     const isEmpty = (v) => v === null ||
         v === undefined ||
@@ -2645,7 +2732,7 @@
                             }, renderFoldButton: ({ isUnfolded, onToggle }) => (jsx(DefaultFoldButton, { className: style(topItemsCount < 1 ? 'hidden' : ''), disabled: !hiddenBlocks?.length, label: label, icon: ICONS[Number(isUnfolded)], dataTheme: rest.options?.page?.colorPalette, onClick: onToggle })) })] })] }));
     });
     function renderNotFound({ title, description }) {
-        return (jsxs("div", { className: "bg-white py-20", children: [title ? (jsx("div", { className: "mb-2", children: jsx(Paragraph, { align: "text-center", children: jsx(Text, { size: "text-h4", children: title }) }) })) : null, description ? (jsx(Paragraph, { size: "text-xl", font: "font-light", align: "text-center", children: description })) : null] }));
+        return (jsxs("div", { className: "bg-white py-20", children: [title ? (jsx("div", { className: "mb-xs", children: jsx(Paragraph, { align: "text-center", children: jsx(Text, { size: "text-h4", children: title }) }) })) : null, description ? (jsx(Paragraph, { size: "text-xl", font: "font-light", align: "text-center", children: description })) : null] }));
     }
 
     const SlideCheckboxGroup = JSX(({ value, onChange, items = [], multiple }) => {
@@ -2734,14 +2821,14 @@
         RUB: 'RoundRubleIcon',
     };
     const renderCurrencyRow$1 = ({ title, buyPrice, buyDifference, sellPrice, sellDifference, buyOfficeName, sellOfficeName, }) => {
-        return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [title ? (jsx(Img, { image: { icon: CURRENCY_ICONS_MAP$1[title] }, width: "24", height: "24" })) : null, jsx("span", { className: "ml-2", children: title })] }) }), renderCurrency(buyPrice, buyDifference), renderCurrency(sellPrice, sellDifference), renderOffice(buyPrice, buyOfficeName), renderOffice(sellPrice, sellOfficeName)] }, title));
+        return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [title ? (jsx(Img, { image: { icon: CURRENCY_ICONS_MAP$1[title] }, width: "24", height: "24" })) : null, jsx("span", { className: "ml-xs", children: title })] }) }), renderCurrency(buyPrice, buyDifference), renderCurrency(sellPrice, sellDifference), renderOffice(buyPrice, buyOfficeName), renderOffice(sellPrice, sellOfficeName)] }, title));
     };
     const formatCurrency$1 = (value) => (value ? currencyNumberFormat$1.format(value) : '');
     const renderCurrency = (price, difference) => {
-        return (jsxs("td", { className: "pt-4 pl-11", children: [jsx("div", { children: formatCurrency$1(price) }), jsx("div", { className: style('font-normal text-sm text-secondary-text', (difference || 0) >= 0 ? 'text-green' : 'text-red'), children: formatCurrency$1(difference) })] }));
+        return (jsxs("td", { className: "pt-m pl-5xl", children: [jsx("div", { children: formatCurrency$1(price) }), jsx("div", { className: style('font-normal text-sm text-secondary-text', (difference || 0) >= 0 ? 'text-green' : 'text-red'), children: formatCurrency$1(difference) })] }));
     };
     const renderOffice = (price, officeName = '') => {
-        return (jsxs("td", { className: "pt-4 pl-11", children: [jsx("div", { children: formatCurrency$1(price) }), jsx("div", { className: "font-normal text-sm text-green", children: officeName })] }));
+        return (jsxs("td", { className: "pt-m pl-5xl", children: [jsx("div", { children: formatCurrency$1(price) }), jsx("div", { className: "font-normal text-sm text-green", children: officeName })] }));
     };
     const currencyNumberFormat$1 = new Intl.NumberFormat('ru', {
         style: 'currency',
@@ -2749,12 +2836,12 @@
     });
 
     const renderTableHeader = (title) => {
-        return (jsx("th", { className: "pl-11", children: jsx(Text, { size: "text-m", font: "font-light", align: "text-left", color: "text-secondary-text", children: title }) }));
+        return (jsx("th", { className: "pl-5xl", children: jsx(Text, { size: "text-m", font: "font-light", align: "text-left", color: "text-secondary-text", children: title }) }));
     };
 
     const ExchangeRateOffice = JSX(({ className, currencies = [], actuality = '', officeName = '', ...rest }) => {
         const fourRates = topNRates(currencies, 4);
-        return (jsxs(BlockWrapper, { className: className, ...rest, children: [jsxs("div", { className: "flex flex-row flex-grow-0 justify-between mb-8", children: [jsx(Heading, { headingType: "h4", title: 'Курс обмена валют в ' + officeName, className: "whitespace-pre-wrap text-h4 mb-5" }), jsx("div", { className: "pl-11", children: jsx(Text, { size: "text-m", font: "font-light", align: "text-left", color: "text-secondary-text", children: actuality }) })] }), jsx("div", { className: "flex flex-row pt-4 text-left", children: fourRates.length > 0 ? (jsxs("table", { className: style('h-fit w-fit', className), children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { children: jsx(Text, { size: "text-m", font: "font-light", align: "text-left", color: "text-secondary-text", children: "\u0412\u0430\u043B\u044E\u0442\u0430" }) }), renderTableHeader('Купить'), renderTableHeader('Продать'), renderTableHeader('Лучшая покупка'), renderTableHeader('Лучшая продажа')] }) }), jsx("tbody", { children: fourRates.map((item) => renderCurrencyRow$1(item)) })] })) : null })] }));
+        return (jsxs(BlockWrapper, { className: style('space-y-3xl', className), ...rest, children: [jsxs("div", { className: "flex flex-row flex-grow-0 justify-between space-y-lg", children: [jsx(Heading, { headingType: "h4", title: 'Курс обмена валют в ' + officeName, className: "whitespace-pre-wrap text-h4" }), jsx("div", { className: "pl-6xl", children: jsx(Text, { size: "text-m", font: "font-light", align: "text-left", color: "text-secondary-text", children: actuality }) })] }), jsx("div", { className: "flex flex-row pt-m text-left", children: fourRates.length > 0 ? (jsxs("table", { className: style('h-fit w-fit', className), children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { children: jsx(Text, { size: "text-m", font: "font-light", align: "text-left", color: "text-secondary-text", children: "\u0412\u0430\u043B\u044E\u0442\u0430" }) }), renderTableHeader('Купить'), renderTableHeader('Продать'), renderTableHeader('Лучшая покупка'), renderTableHeader('Лучшая продажа')] }) }), jsx("tbody", { children: fourRates.map((item) => renderCurrencyRow$1(item)) })] })) : null })] }));
     });
     const topNRates = (rates, n) => rates.sort((a, b) => Number(a.id) - Number(b.id)).slice(0, n);
 
@@ -2772,18 +2859,19 @@
     const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
 
     const TABLE_HEAD_STYLE = 'text-left text-m font-light text-secondary-text';
-    const TABLE_HEAD_STYLE_WITH_PL = `${TABLE_HEAD_STYLE} pl-11`;
+    const TABLE_HEAD_STYLE_WITH_PADDING = `${TABLE_HEAD_STYLE} pl-5xl`;
     const CURRENCY_ICONS_MAP = {
         USD: 'DollarIcon',
         EUR: 'EuroIcon',
     };
-    const CurrencyTable = JSX(({ className, exchangeCurrencyItems }) => (jsxs("table", { className: `h-fit w-fit ${className}`, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: TABLE_HEAD_STYLE, children: "\u0412\u0430\u043B\u044E\u0442\u0430" }), jsx("th", { className: TABLE_HEAD_STYLE_WITH_PL, children: "\u041A\u0443\u043F\u0438\u0442\u044C" }), jsx("th", { className: TABLE_HEAD_STYLE_WITH_PL, children: "\u041F\u0440\u043E\u0434\u0430\u0442\u044C" })] }) }), jsx("tbody", { children: exchangeCurrencyItems.map(renderCurrencyRow) })] })));
+    const CurrencyTable = JSX(({ className, exchangeCurrencyItems }) => (jsxs("table", { className: `h-fit w-fit ${className}`, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: TABLE_HEAD_STYLE, children: jsx(Text, { size: "text-m", children: "\u0412\u0430\u043B\u044E\u0442\u0430" }) }), jsx("th", { className: TABLE_HEAD_STYLE_WITH_PADDING, children: jsx(Text, { size: "text-m", children: "\u041A\u0443\u043F\u0438\u0442\u044C" }) }), jsx("th", { className: TABLE_HEAD_STYLE_WITH_PADDING, children: jsx(Text, { size: "text-m", children: "\u041F\u0440\u043E\u0434\u0430\u0442\u044C" }) })] }) }), jsx("tbody", { children: exchangeCurrencyItems.map(renderCurrencyRow) })] })));
     const renderCurrencyRow = (exchangeCurrencyItem) => {
         const currency = exchangeCurrencyItem?.currency?.currency;
-        return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [currency ? (jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[currency] }, width: "24", height: "24" })) : null, jsx("span", { className: "ml-2", children: currency })] }) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.saleExchangeRate) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.buyExchangeRate) })] }, currency));
+        return (jsxs("tr", { className: "pb-2xs text-h6", children: [jsx("td", { className: "pt-m", children: jsxs("div", { className: "flex items-center", children: [currency ? (jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[currency] }, width: "24", height: "24", className: "mr-2" })) : null, jsx(Text, { size: "text-h6", children: currency })] }) }), jsx("td", { className: "pt-m pl-5xl", children: jsx(Text, { size: "text-h6", children: formatCurrency(exchangeCurrencyItem?.saleExchangeRate) }) }), jsx("td", { className: "pt-m pl-5xl", children: jsx(Text, { size: "text-h6", children: formatCurrency(exchangeCurrencyItem?.buyExchangeRate) }) })] }, currency));
     };
 
-    const CurrentLocation$1 = JSX(({ className = '', address }) => (jsxs("div", { className: `flex ${className}`, children: [jsx(Img, { image: { icon: 'GpsIcon' }, width: "24", height: "24" }), jsxs("div", { className: "ml-3", children: [address ? jsx("p", { className: "text-primary-main  m-0 mb-1 text-l", children: address }) : null, jsx("p", { className: "text-secondary-text m-0 text-m", children: "\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0437\u0430\u0434\u0430\u043D\u043D\u043E\u0433\u043E \u043E\u0444\u0438\u0441\u0430" })] })] })));
+    const icon = { icon: 'GpsIcon' };
+    const CurrentLocation$1 = JSX(({ className = '', address }) => (jsxs("div", { className: `flex gap-s ${className}`, children: [jsx(RoundedIcon, { ...icon, iconBgVersion: "primary" }), jsxs("div", { className: "space-y-2xs", children: [address ? jsx("p", { className: "text-primary-main text-l", children: address }) : null, jsx("p", { className: "text-secondary-text text-m", children: "\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0437\u0430\u0434\u0430\u043D\u043D\u043E\u0433\u043E \u043E\u0444\u0438\u0441\u0430" })] })] })));
 
     const roundTo = (value, precision = 2) => {
         const factor = 10 ** precision;
@@ -2831,7 +2919,7 @@
             selectBuy: currencyRatesSell?.[0]?.currency?.currency || Currency.USD,
         });
         const handleSetCalcState = useCallback((newState) => setCalcState((oldState) => ({ ...oldState, ...newState })), []);
-        return (jsxs("div", { className: `grid gap-[18px] pt-2 ${className}`, children: [renderInput({
+        return (jsxs("div", { className: `grid gap-m pt-2xl ${className}`, children: [renderInput({
                     placeholder: 'Хочу продать',
                     rates: currencyRatesSell,
                     selected: calcState.selectSell,
@@ -2926,7 +3014,7 @@
         currencyRatesBuy.unshift({ currency: { currency: Currency.RUB } });
         const currencyRatesSell = currencyRates.filter((_) => _.saleExchangeRate);
         currencyRatesSell.push({ currency: { currency: Currency.RUB } });
-        return (jsx(BlockWrapper, { className: style('box-border min-h-80', className), ...rest, children: jsx(BaseTile, { className: "h-full", title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex gap-xxl", children: [jsxs("div", { children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-xl", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation$1, { address: exchangeRates?.address })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
+        return (jsx(BlockWrapper, { className: style('box-border min-h-80', className), ...rest, children: jsx(BaseTile, { className: "h-full", title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex gap-6xl flex-wrap", children: [jsxs("div", { children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-xl", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation$1, { address: exchangeRates?.address })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
     });
     const getCurrencyRates = (currencies) => {
         return currencies?.filter((_) => _?.currency?.id === 1 || _?.currency?.id === 2) || [];
@@ -2959,11 +3047,11 @@
         'bg-white': 'text-primary-text',
         transparent: 'text-white',
     };
-    const renderTitle$1 = (title, bgColor, className) => {
-        return (jsx("span", { className: `${TEXT_COLOR[bgColor]} ml-2.5 font-medium ${className || ''}`, children: title || 'Россельхозбанк' }));
+    const renderTitle = (title, bgColor, className) => {
+        return (jsx("span", { className: `${TEXT_COLOR[bgColor]} ml-s font-medium ${className || ''}`, children: title || 'Россельхозбанк' }));
     };
 
-    const Logo = JSX(({ className = '', href = '/', logo, children = logo?.title, targetBlank, bgColor = 'bg-white', showTitle = true, }) => (jsxs("a", { className: style('inline-flex items-center font-sans no-underline', className), href: href, target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$1(bgColor, logo?.image, { width: '40', height: '45' }), showTitle ? renderTitle$1(children || logo?.title, bgColor) : null] })));
+    const Logo = JSX(({ className = '', href = '/', logo, children = logo?.title, targetBlank, bgColor = 'bg-white', showTitle = true, }) => (jsxs("a", { className: style('inline-flex items-center font-sans no-underline', className), href: href, target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [renderImage$1(bgColor, logo?.image, { width: '40', height: '45' }), showTitle ? renderTitle(children || logo?.title, bgColor) : null] })));
 
     const CloseButton = JSX(({ className, onClick }) => (jsx("button", { className: style('flex justify-center items-center w-12 h-12 p-1 bg-transparent border-none', className), onClick: onClick, title: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: jsx(Img, { image: { icon: 'CloseIcon' }, width: "24", height: "24" }) })));
 
@@ -3150,7 +3238,7 @@
                 globalThis.document?.removeEventListener('keydown', handleEscape);
             };
         }, [onClose]);
-        return isOpened ? (jsx("div", { className: style('fixed inset-0 bg-white text-l font-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar', className), role: "dialog", children: jsxs("div", { className: "relative container pb-12 min-h-full", children: [jsxs("div", { className: "sticky bg-white pt-6 top-0", children: [jsx(CloseButton, { className: "absolute top-0 -right-12", onClick: onClose }), head] }), children] }) })) : null;
+        return isOpened ? (jsx("div", { className: style('fixed inset-0 bg-white text-l font-light z-50 overflow-x-hidden overflow-y-scroll no-scrollbar', className), role: "dialog", children: jsxs("div", { className: "relative container pb-6xl min-h-full", children: [jsxs("div", { className: "sticky bg-white pt-xl top-0", children: [jsx(CloseButton, { className: "absolute top-0 -right-6xl", onClick: onClose }), head] }), children] }) })) : null;
     });
 
     function useDialogProps(id, isOpenedOnInit = false) {
@@ -3204,7 +3292,7 @@
         const handleChange = useCallback((ev) => {
             onChange && onChange(ev.target?.value || '');
         }, [onChange]);
-        return (jsxs("div", { className: style('font-sans relative', className), role: "form", children: [jsx("div", { className: "absolute h-full flex items-center pl-4 pointer-events-none", children: jsx(Img, { image: { icon: 'LoupeIcon' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-12 pl-12 w-full text-l text-black outline-none box-border', 'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'), value: value, type: "text", name: "search-bar-input", placeholder: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", autoFocus: autoFocus, onChange: handleChange, onFocus: onFocus })] }));
+        return (jsxs("div", { className: style('font-sans relative', className), role: "form", children: [jsx("div", { className: "absolute h-full flex items-center pl-m pointer-events-none", children: jsx(Img, { image: { icon: 'LoupeIcon' }, width: "24", height: "24" }) }), jsx("input", { className: style('h-12 pl-12 w-full text-l text-black outline-none box-border', 'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'), value: value, type: "text", name: "search-bar-input", placeholder: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", autoFocus: autoFocus, onChange: handleChange, onFocus: onFocus })] }));
     });
 
     const SEARCH_DIALOG_ID = 'search';
@@ -3218,7 +3306,7 @@
         });
         const searchItems = useMemo(() => combineTopItemsAndSearchResult(topItems)(searchResult), [topItems, searchResult]);
         useEffect(() => printSearchItems(searchItems), [searchItems]); // Temp
-        return (jsx(Dialog, { ...dialogProps, head: jsx(SearchInput, { className: "my-5", autoFocus: true, ...searchInputProps }), children: jsx(Sitemap, { topItems: searchItems }) }));
+        return (jsx(Dialog, { ...dialogProps, head: jsx(SearchInput, { autoFocus: true, ...searchInputProps }), children: jsx(Sitemap, { topItems: searchItems }) }));
     });
     const combineTopItemsAndSearchResult = (topItems) => (searchResult) => topItems?.length && searchResult?.length
         ? zip(topItems, searchResult).map(([_, portalSearchResult]) => ({
@@ -3251,9 +3339,9 @@
     });
     const isQueryLongEnough = (_) => _ && _.length >= MIN_QUERY_LEN;
 
-    const Contacts = JSX(({ className = '', items, hasButton }) => (jsxs("div", { className: className, children: [items?.length ? items.map(renderContactsGroup) : null, hasButton ? (jsx(Button, { version: "primary", className: "mb-6 w-full", href: "https://www.rshb.ru/feedback/question/", target: "_blank", ariaLabel: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C", text: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C" })) : null] })));
-    const renderContactsGroup = (item, i) => (jsxs("div", { className: "mb-6", children: [jsx("div", { className: "mb-4", children: jsx(Text, { size: "text-l", font: "font-medium", children: item?.title }) }), jsx("div", { children: item.items?.map(renderContact) })] }, String(i)));
-    const renderContact = (item, index) => (jsxs("div", { className: "mb-4", children: [jsx("div", { children: renderText(item.type, item.text) }), jsx("div", { className: "mt-1 text-s font-light text-secondary-text", children: item.description })] }, String(index)));
+    const Contacts = JSX(({ className = '', items, hasButton }) => (jsxs("div", { className: style('space-y-xl', className), children: [items?.length ? items.map(renderContactsGroup) : null, hasButton ? (jsx(Button, { version: "primary", className: "mb-6 w-full", href: "https://www.rshb.ru/feedback/question/", target: "_blank", ariaLabel: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C", text: "\u041E\u0431\u0440\u0430\u0442\u043D\u0430\u044F \u0441\u0432\u044F\u0437\u044C" })) : null] })));
+    const renderContactsGroup = (item, i) => (jsxs("div", { className: "space-y-m", children: [jsx("div", { className: "", children: jsx(Text, { size: "text-l", font: "font-medium", children: item?.title }) }), jsx("div", { className: "space-y-m", children: item.items?.map(renderContact) })] }, String(i)));
+    const renderContact = (item, index) => (jsxs("div", { className: "space-y-2xs", children: [jsx("div", { children: renderText(item.type, item.text) }), jsx("div", { className: "text-s font-light text-secondary-text", children: item.description })] }, String(index)));
     const renderText = (type, text = '') => {
         switch (type) {
             case 'tel':
@@ -3287,14 +3375,12 @@
     const TextInformation = JSX(({ className = '', links }) => (jsxs("div", { className: className, children: [jsx("div", { className: "pt-4 xl:pt-5", children: jsx(Text, { size: "text-xs", font: "font-light", color: "text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex justify-start items-start gap-5 pt-4", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ..._ }, String(i)))) })) : null] })));
 
     const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
-    const Footer = JSX(({ className = '', ...rest }) => {
-        const fallback = rest.options?.page?.fallback;
-        const sitemap = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
-        const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, logo } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
-        return (jsxs(BlockWrapper, { tag: "footer", className: className, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-8 xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD, logo: logo }), jsx(SearchBar$1, { className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, hasButton: true }), jsx(SocialMedia, { media: socialMedia, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "flex-grow", topItems: sitemap?.topItems })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
+    const Footer = JSX(({ className, sitemap, ...rest }) => {
+        const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, logo } = useSWRResource(projectSettings.FOOTER || 'footer', rest.options?.page?.fallback);
+        return (jsxs(BlockWrapper, { tag: "footer", className: className, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-6xl xl:gap-3xl pb-3xl ", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD, logo: logo }), jsx(SearchBar$1, { className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-6xl xl:gap-3xl", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden space-y-xl`, children: [jsx(Contacts, { items: contacts, hasButton: true }), jsx(SocialMedia, { media: socialMedia, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { media: mobileApps, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "flex-grow", topItems: sitemap?.topItems })] }), jsx(HorizontalNavigation, { className: "mt-24", links: relatedEnterprises }), jsx(TextInformation, { links: documents })] }));
     });
 
-    const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: [jsx(Headline, { className: "!p-0 mb-4", title: title, description: description, headlineVersion: "M" }), calendar ? renderCalendar(calendar) : null] })));
+    const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { className: "mb-4", title: title, description: description, headlineVersion: "M", isPadding: false }), calendar ? renderCalendar(calendar) : null] })));
     const renderCalendar = (calendar) => {
         const colCount = calendar.reduce((accumulator, currentValue) => currentValue?.month?.length ? accumulator + currentValue.month.length : accumulator, 0) || 1;
         const colSize = 100 / colCount;
@@ -3305,61 +3391,27 @@
             // Condition lower is always true, TS does not understand this, notice filter above
             flexBasis: `${_?.month?.length ? _.month.length * colSize : ''}%`,
         }));
-        return (jsxs("div", { className: "w-full flex flex-col justify-center mt-13", children: [jsx("div", { className: "flex w-full mb-3 text-h6 text-center", children: mappedCalendar.map((_) => renderMonthNames(_, colSize)) }), jsx("div", { className: "flex w-full", children: mappedCalendar.map((_, ind) => (jsxs("div", { className: "pr-[11px] mr-3 border-r border-main-divider last:border-r-0 last:pr-0 last:mr-0", style: { flexBasis: _.flexBasis }, children: [jsx("div", { className: "flex", children: renderMonthImages(_) }), jsxs("div", { className: "text-s font-light text-primary-text mt-3", children: [jsx("span", { children: _.text }), "\u2009", jsx("span", { className: "text-primary-main", children: _.greenText })] })] }, `monthItem-${ind}`))) })] }));
+        return (jsxs("div", { className: "w-full flex flex-col justify-center mt-13", children: [jsx("div", { className: "flex w-full mb-3 text-h6 text-center", children: mappedCalendar.map((_) => renderMonthNames(_, colSize)) }), jsx("div", { className: "flex gap-s w-full", children: mappedCalendar.map((_, ind) => (jsxs("div", { className: "pr-s border-r border-main-divider last:border-r-0 last:pr-0", style: { flexBasis: _.flexBasis }, children: [jsx("div", { className: "flex", children: renderMonthImages(_) }), jsxs("div", { className: "text-s font-light text-primary-text mt-s", children: [jsx("span", { children: _.text }), "\u2009", jsx("span", { className: "text-primary-main", children: _.greenText })] })] }, `monthItem-${ind}`))) })] }));
     };
     const renderMonthNames = (item, colSize) => item.month?.map((_, i) => (jsx("div", { style: { flexBasis: `${colSize}%` }, children: _.text }, `monthName-${i}`)));
     const renderMonthImages = (item) => item.month?.map((_) => _.image?.src ? (jsx("div", { className: "h-[207px] border-r pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0", children: jsx(Img, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
 
-    const STORAGE_DEFAULT_TTL = 86400000; // 24 * 60 * 60 * 1000
-    function useCachedAsyncData(key, fetcher, storage = globalThis?.localStorage) {
-        const cachedFetcher = useCallback(async (...args) => {
-            const storageKey = `async:${key}`;
-            const storageData = storage.getItem(storageKey);
-            const cachedData = getParsedData(storageData);
-            if (cachedData) {
-                return cachedData;
-            }
-            const data = await fetcher(...args);
-            storage.setItem(storageKey, JSON.stringify({ data, timestamp: Date.now() }));
-            return data;
-        }, [key, fetcher]);
-        return useAsyncData(key, cachedFetcher);
-    }
-    function getParsedData(storageData) {
-        const { data = null, timestamp = null } = storageData ? JSON.parse(storageData) : {};
-        return data && Date.now() - timestamp < STORAGE_DEFAULT_TTL ? data : undefined;
-    }
-
-    const REGION_URL = '/api/v1/region';
-    function useLocation(defaultLocation = 'Москва') {
-        const currentLocation = getLocalStorageLocation();
-        const [location, setLocation] = useState(currentLocation?.region ?? { name: defaultLocation });
-        const { data } = useCachedAsyncData(REGION_URL, fetchJSONUnsafe);
-        useEffect(() => {
-            setLocation(currentLocation?.region && currentLocation?.manual
-                ? currentLocation.region
-                : data || { name: defaultLocation });
-        }, [data]);
-        const onChangeLocation = useCallback((region) => {
-            globalThis.localStorage?.setItem('location', JSON.stringify({ manual: true, region }));
-            setLocation(region);
-        }, []);
-        return [location, onChangeLocation];
-    }
-    const getLocalStorageLocation = () => {
-        const localStorageLocation = globalThis.localStorage?.getItem('location');
-        try {
-            return localStorageLocation ? JSON.parse(localStorageLocation) : null;
-        }
-        catch (_) {
-            return null;
-        }
-    };
-
     const isHrefActive = (router) => ({ href }) => withoutQuery(isURL(href) ? router.href : router.pathname).startsWith(withoutQuery(href));
 
     const isTopItemActive = (router) => isHrefActive(projectSettings.BASE_PATH ? { pathname: projectSettings.BASE_PATH } : router);
 
+    const TopItem = JSX(({ className = '', active, flat, children, ...rest }) => {
+        const link = useLink({ isRemote: true });
+        const { href, target, text, onClick } = link(rest);
+        return (jsx("a", { className: style(getLinkStyle(active, flat), className), href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": text, children: jsx("span", { className: getTextStyle$1(active, flat), children: text || children }) }));
+    });
+    const getLinkStyle = (active = false, flat = false) => style('inline-block border border-solid bg-transparent text-center no-underline', active
+        ? 'rounded-md border-primary-main group-data-transparent:border-white'
+        : 'border-transparent', flat ? '' : 'px-4 py-2');
+    const getTextStyle$1 = (active = false, flat = false) => style('font-sans text-s font-light', active
+        ? 'text-primary-main'
+        : style(flat ? 'text-primary-text' : 'text-secondary-text', 'hover:text-primary-main'), 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
+
     const REGIONS_URL = '/api/v1/regions';
     function useRegions() {
         const { data } = useAsyncData(REGIONS_URL, fetchJSONUnsafe);
@@ -3377,7 +3429,7 @@
     };
 
     const SearchBar = JSX(({ className, searchTerm, onSearch }) => {
-        return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsx("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: searchTerm ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text `, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0444\u0438\u043B\u0438\u0430\u043B\u0430\u043C" })) }), jsx("input", { id: "search-bar-input", className: `h-12 pl-4 w-full peer text-l text-black border border-solid rounded-md box-border
+        return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsx("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-44 gap-3.5 pointer-events-none", children: searchTerm ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text `, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0444\u0438\u043B\u0438\u0430\u043B\u0430\u043C" })) }), jsx("input", { id: "search-bar-input", className: `h-12 pl-4 w-full peer text-l text-black border border-solid rounded-md box-border
               outline-none border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text`, value: searchTerm, onChange: (e) => onSearch(e.target.value.toLowerCase()), type: "text", name: "location-search-bar-input" })] }));
     });
 
@@ -3392,7 +3444,7 @@
             dialogProps.onClose && dialogProps.onClose();
             onChangeLocation && onChangeLocation(region);
         }, [dialogProps.onClose, onChangeLocation]);
-        return (jsxs(Dialog, { ...dialogProps, head: jsxs("div", { children: [jsx(CurrentLocation, { currentLocation: currentLocation, onChangeLocation: handleChangeLocation }), jsx(SearchBar, { onSearch: setQuery, searchTerm: query, className: "mb-7" })] }), children: [query && query.length >= SEARCH_TERM_MIN_LENGTH ? (jsx("div", { children: regions
+        return (jsxs(Dialog, { ...dialogProps, head: jsxs("div", { children: [jsx(CurrentLocation, { currentLocation: currentLocation, onChangeLocation: handleChangeLocation }), jsx(SearchBar, { onSearch: setQuery, searchTerm: query })] }), children: [query && query.length >= SEARCH_TERM_MIN_LENGTH ? (jsx("div", { children: regions
                         .filter(({ name }) => name && jaroWinklerDistance(name.toLowerCase())(query.toLowerCase()) >= 0.8)
                         .map(renderRegion(handleChangeLocation)) })) : (jsx("div", { className: "columns-5", children: Array.from(regionsGroupByLetter.entries()).map(renderRegionGroup(handleChangeLocation)) })), jsx(ForeignOffices, { foreignOffices: foreignOffices })] }));
     });
@@ -3404,29 +3456,17 @@
     const CurrentLocation = JSX(({ currentLocation, onChangeLocation }) => currentLocation ? (jsxs("div", { className: "mb-4", children: [jsx(Text, { size: "text-l", font: "font-light", children: "\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u044B\u0431\u0440\u0430\u043D:\u00A0" }), jsx("button", { className: "cursor-pointer", onClick: () => {
                     onChangeLocation && onChangeLocation(currentLocation);
                 }, children: jsx(Text, { color: "text-primary-main", children: currentLocation.name }) })] })) : null);
-    const renderRegionGroup = (onChangeLocation) => ([letter, regions]) => (jsxs("div", { className: "break-inside-avoid mb-7 w-[224px]", children: [jsx("div", { className: "mb-2.5", children: jsx(Text, { size: "text-h6", children: letter }) }), regions.map(renderRegion(onChangeLocation))] }, letter));
-    const renderRegion = (onChangeLocation) => (region) => (jsx("div", { className: "mb-1", children: jsx("button", { className: "cursor-pointer hover:text-primary-hover", onClick: () => {
+    const renderRegionGroup = (onChangeLocation) => ([letter, regions]) => (jsxs("div", { className: "break-inside-avoid mb-2xl w-56", children: [jsx("div", { className: "mb-s", children: jsx(Text, { size: "text-h6", children: letter }) }), regions.map(renderRegion(onChangeLocation))] }, letter));
+    const renderRegion = (onChangeLocation) => (region) => (jsx("div", { className: "mb-2xs", children: jsx("button", { className: "cursor-pointer hover:text-primary-hover", onClick: () => {
                 onChangeLocation && onChangeLocation(region);
             }, children: region.name || '' }) }, region.id));
-    const ForeignOffices = JSX(({ foreignOffices }) => foreignOffices?.length ? (jsxs("div", { className: "border-t border-main-divider mt-7 pt-7", children: [jsx("div", { className: "mb-4", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: "\u041F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435\u043B\u044C\u0441\u0442\u0432\u0430 \u0437\u0430 \u0440\u0443\u0431\u0435\u0436\u043E\u043C:" }) }), jsx("div", { className: "flex gap-10", children: foreignOffices.map((office, i) => (jsx(ForeignOffice, { ...office }, String(i)))) })] })) : null);
+    const ForeignOffices = JSX(({ foreignOffices }) => foreignOffices?.length ? (jsxs("div", { className: "border-t border-main-divider mt-2xs pt-2xs", children: [jsx("div", { className: "mb-m", children: jsx(Text, { size: "text-m", font: "font-light", color: "text-secondary-text", children: "\u041F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u0435\u043B\u044C\u0441\u0442\u0432\u0430 \u0437\u0430 \u0440\u0443\u0431\u0435\u0436\u043E\u043C:" }) }), jsx("div", { className: "flex gap-10", children: foreignOffices.map((office, i) => (jsx(ForeignOffice, { ...office }, String(i)))) })] })) : null);
     const ForeignOffice = JSX(({ icon, ...rest }) => {
         const link = useLink();
         const { text, target, href, onClick } = link(rest);
         return (jsxs("div", { className: "flex gap-x-3", children: [icon ? jsx(Img, { pathPrefix: "/wcms-resources/", image: icon }) : null, text ? (jsx("a", { className: "hover:text-primary-hover", href: href, target: target, onClick: onClick, children: text })) : null] }));
     });
 
-    const TopItem = JSX(({ className = '', active, flat, children, ...rest }) => {
-        const link = useLink({ isRemote: true });
-        const { href, target, text, onClick } = link(rest);
-        return (jsx("a", { className: style(getLinkStyle(active, flat), className), href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": text, children: jsx("span", { className: getTextStyle$1(active, flat), children: text || children }) }));
-    });
-    const getLinkStyle = (active = false, flat = false) => style('inline-block border border-solid bg-transparent text-center no-underline', active
-        ? 'rounded-md border-primary-main group-data-transparent:border-white'
-        : 'border-transparent', flat ? '' : 'px-4 py-2');
-    const getTextStyle$1 = (active = false, flat = false) => style('font-sans text-s font-light', active
-        ? 'text-primary-main'
-        : style(flat ? 'text-primary-text' : 'text-secondary-text', 'hover:text-primary-main'), 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
-
     const BUTTON_SIZE_STYLE = {
         default: 'w-6 h-6',
         large: 'w-12 h-12',
@@ -3559,7 +3599,7 @@
                 ? handleIntersectionActivation(index)
                 : handleIntersectionDeactivation(index));
         }), [subItems]);
-        return (jsxs("nav", { className: "relative mt-3 flex items-center justify-between", children: [jsx("div", { ref: subItemsListRef, className: "overflow-hidden whitespace-nowrap pb-3 mt-2", children: subItems.map((_, i) => (jsx(HeaderSubMenuItem, { className: style('ml-8 first:ml-0', visibleItemsCount - 1 < i ? 'invisible' : ''), active: _ === activeSubItem, observerOptions: observerOptions, onVisibilityChange: subItemsVisibilityHandlers[i], ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { className: "relative w-auto z-40", items: dropDownMenuItems, activeItem: activeSubItem })) : null, projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { className: "ml-9", iconVersion: iconVersion, chat: projectSettings.CHAT_BOT })) : null, jsx(InternetBankButton, { version: version, internetBankUrl: internetBankUrl })] }));
+        return (jsxs("nav", { className: "relative mt-s flex items-center justify-between", children: [jsx("div", { ref: subItemsListRef, className: "overflow-hidden whitespace-nowrap pb-s mt-xs", children: subItems.map((_, i) => (jsx(HeaderSubMenuItem, { className: style('ml-3xl first:ml-0', visibleItemsCount - 1 < i ? 'invisible' : ''), active: _ === activeSubItem, observerOptions: observerOptions, onVisibilityChange: subItemsVisibilityHandlers[i], ..._ }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { className: "relative w-auto z-40", items: dropDownMenuItems, activeItem: activeSubItem })) : null, projectSettings.CHAT_BOT ? (jsx(HeaderChatBotButton, { className: "ml-9", iconVersion: iconVersion, chat: projectSettings.CHAT_BOT })) : null, jsx(InternetBankButton, { version: version, internetBankUrl: internetBankUrl })] }));
     });
     const handleIntersectionActivation = (index) => (prev) => Math.max(prev, index + 1);
     const handleIntersectionDeactivation = (index) => (prev) => Math.min(prev, index);
@@ -3568,25 +3608,24 @@
         'bg-white': 'primary',
         transparent: 'transparent',
     };
-    const Header = JSX(({ bgColor = 'bg-white', className, showSubMenu = true, version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
+    const Header = JSX(({ className, bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], sitemap, location, ...rest }) => {
         const router = useRouter();
-        const { topItems, logo, defaultLocation, foreignOffices, officesLink, internetBankUrl } = useSWRResource(projectSettings.SITEMAP || 'sitemap', rest.options?.page?.fallback);
+        const { topItems, logo, officesLink, internetBankUrl } = sitemap || {};
         const activeTopItem = topItems?.find(isTopItemActive(router));
-        const [location, onChangeLocation] = useLocation(defaultLocation);
-        return (jsxs(BlockWrapper, { tag: "header", className: style('pt-6 px-20', showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5', className), defaultPadding: "", version: version, ...rest, children: [jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ..._ }, String(i)))), jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", locationName: location.name, officesLink: officesLink })] }), jsx("div", { className: style('mt-6 h-px bg-main-divider', version === 'transparent' ? 'opacity-30' : '') }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items, version: version, internetBankUrl: internetBankUrl })) : null] }), jsx(SearchDialog, { topItems: topItems }), jsx(LocationDialog, { currentLocation: location, foreignOffices: foreignOffices, onChangeLocation: onChangeLocation })] }));
+        return (jsx(BlockWrapper, { tag: "header", className: style('pt-3xl px-20', activeTopItem?.items?.length ? 'pb-m' : 'pb-lg', className), defaultPadding: "", version: version, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-3xl", bgColor: bgColor, logo: logo }), topItems?.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ..._ }, String(i)))), jsx(HeaderSecondaryMenu, { version: version, className: "ml-auto", locationName: location?.name, officesLink: officesLink })] }), jsx("div", { className: style('mt-xl h-px bg-main-divider', version === 'transparent' ? 'opacity-30' : '') }), activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { subItems: activeTopItem.items, version: version, internetBankUrl: internetBankUrl })) : null] }) }));
     });
 
     const gapStyles = {
-        XXL: 'gap-12',
-        XL: 'gap-10',
-        L: 'gap-8',
-        M: 'gap-4',
-        S: 'gap-2',
-        XS: 'gap-1',
+        XXL: 'gap-6xl',
+        XL: 'gap-5xl',
+        L: 'gap-3xl',
+        M: 'gap-m',
+        S: 'gap-xs',
+        XS: 'gap-2xs',
         '': '',
     };
 
-    const HorizontalLayout = JSX(({ className = '', gap = 'XS', isPadding = false, version = 'transparent', isTheme = false, ...rest }) => (jsx(BlockWrapper, { className: style('relative', 'grid grid-cols-12', gapStyles[gap], className), defaultPadding: isPadding ? 'p-default' : '', version: version, isTheme: isTheme, ...rest, children: renderChildren(rest) })));
+    const HorizontalLayout = JSX(({ className = '', gap = 'XS', isPadding = false, version = 'transparent', isTheme = false, ...rest }) => (jsx(BlockWrapper, { className: style('relative', 'grid grid-cols-12', gapStyles[gap], className), defaultPadding: isPadding ? 'p-6xl' : '', version: version, isTheme: isTheme, ...rest, children: renderChildren(rest) })));
     HorizontalLayout.childrenTypes = {
         exclude: ['HorizontalLayout'],
     };
@@ -3623,7 +3662,7 @@
     function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }) {
         const tabsShiftWidth = activeIndex * 460;
         const cardsAlignStyle = cards.length > 2 ? 'justify-start' : 'justify-center';
-        return (jsx("div", { style: { transform: `translateX(-${tabsShiftWidth}px)` }, className: "duration-1000 px-12", children: jsx("div", { className: `w-full flex flex-nowrap gap-3.5 pb-12 ${cardsAlignStyle}`, children: cards.map((slide, i) => renderNavButton$2({
+        return (jsx("div", { style: { transform: `translateX(-${tabsShiftWidth}px)` }, className: "duration-1000 px-6xl", children: jsx("div", { className: `w-full flex flex-nowrap gap-3.5 pb-6xl ${cardsAlignStyle}`, children: cards.map((slide, i) => renderNavButton$2({
                     slide,
                     i,
                     isActive: Boolean(i === selectedCardIndex),
@@ -3634,7 +3673,7 @@
         const btnClassName = isActive
             ? 'shadow-dark-blue border-primary-main'
             : `ease-in duration-300 border-gray`;
-        return (jsxs("button", { type: "button", onClick: onClick, className: `p-[30px] min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`, children: [slide?.icon ? (jsx(Img, { className: "p-5 rounded-full bg-secondary-light mr-[30px]", image: slide.icon, width: "108", height: "108" })) : null, jsxs("div", { className: "flex gap-3.5", children: [slide?.sum ? renderValueBlock$1('страховая сумма', slide.sum) : null, slide?.fee ? renderValueBlock$1('страховой взнос', slide.fee) : null] }), renderDoneIcon(isActive)] }, String(i)));
+        return (jsxs("button", { type: "button", onClick: onClick, className: `p-3xl min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`, children: [slide?.icon ? (jsx(Img, { className: "p-5 rounded-full bg-secondary-light mr-[30px]", image: slide.icon, width: "108", height: "108" })) : null, jsxs("div", { className: "flex gap-3.5", children: [slide?.sum ? renderValueBlock$1('страховая сумма', slide.sum) : null, slide?.fee ? renderValueBlock$1('страховой взнос', slide.fee) : null] }), renderDoneIcon(isActive)] }, String(i)));
     }
     function renderValueBlock$1(title, sum) {
         return (jsxs("div", { className: "flex flex-col text-left whitespace-pre", children: [jsxs("span", { className: "text-h6", children: [toLocalNumberFormat(2)(sum), " \u20BD"] }), jsx("span", { className: "text-secondary-text text-l mt-1", children: title })] }));
@@ -3646,7 +3685,7 @@
     const InsuranceAmountBlock = JSX(({ className = '', title, insuranceTabs = [], button, ...rest }) => {
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
         const handleActiveSlideIndex = useCallback((_) => setActiveSlideIndex(_), []);
-        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden relative px-0', className), defaultPadding: "p-default", ...rest, children: [title ? jsx(Heading, { className: "text-center mb-8", title: title, headingType: "h3" }) : null, insuranceTabs?.length > 1 ? (jsx("div", { className: "p-1.5 bg-secondary-light w-fit mx-auto mb-7 rounded-md", children: insuranceTabs.map((item, i) => renderNavButton$1({
+        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden relative px-0 space-y-2xl', className), defaultPadding: "p-6xl", ...rest, children: [title ? jsx(Heading, { className: "text-center", title: title, headingType: "h3" }) : null, insuranceTabs?.length > 1 ? (jsx("div", { className: "p-xs bg-secondary-light w-fit mx-auto rounded-md", children: insuranceTabs.map((item, i) => renderNavButton$1({
                         title: item?.title,
                         i,
                         isActive: Boolean(i === activeSlideIndex),
@@ -3676,11 +3715,11 @@
         'green-dark': 'bg-green-dark',
     };
     const investmentCellSizeMap = {
-        XS: 'h-[40px]',
-        S: 'h-[68px]',
-        M: 'h-[102px]',
-        L: 'h-[136px]',
-        XL: 'h-[204px]',
+        XS: 'h-10',
+        S: 'h-16',
+        M: 'h-24',
+        L: 'h-32',
+        XL: 'h-52',
     };
     const InvestmentInfo = JSX((props) => {
         const { className = '', items, isDotted, investmentZeroColumn, investmentColumns, ...rest } = props;
@@ -3688,27 +3727,35 @@
         if (investmentZeroColumn) {
             columns.unshift(investmentZeroColumn);
         }
-        return (jsx(BlockWrapper, { className: className, ...rest, children: jsxs("div", { className: "container text-m font-light", children: [columns?.length ? (jsxs("div", { children: [jsxs("div", { className: "flex items-end relative pl-9 pr-5 text-white", children: [joinList(jsx("div", { className: "w-px h-4 bg-gray" }))(columns.map(renderInvestmentColumn)), jsx("div", { className: "absolute right-[30px] w-px h-4 bg-gray" })] }), jsx("div", { className: "border-t border-gray -mt-2 ml-9 mr-8" }), jsx("div", { className: "flex justify-between text-primary-text mt-3 -mx-10", children: columns.map(renderInvestmentColumnTitle) })] })) : null, items?.length ? (jsx(List, { className: "mt-9 max-w-[657px]", items: items, isDotted: isDotted, listItemSize: "M" })) : null] }) }));
+        return (jsx(BlockWrapper, { className: className, ...rest, children: jsxs("div", { className: "container text-m font-light", children: [columns?.length ? (jsxs("div", { children: [jsxs("div", { className: "flex items-end relative pl-3xl pr-lg text-white", children: [joinList(jsx("div", { className: "w-px h-4 bg-gray" }))(columns.map(renderInvestmentColumn)), jsx("div", { className: "absolute right-3xl w-px h-4 bg-gray" })] }), jsx("div", { className: "border-t border-gray -mt-xs mx-3xl" }), jsx("div", { className: "flex justify-between text-primary-text mt-s -mx-5xl", children: columns.map(renderInvestmentColumnTitle) })] })) : null, items?.length ? (jsx(List, { className: "mt-9 max-w-[657px]", items: items, isDotted: isDotted, listItemSize: "M" })) : null] }) }));
     });
     const renderInvestmentColumn = (column, i, arr) => {
         const isSecondColumn = i === 1;
         const isLastColumn = i === arr.length - 1;
-        return (jsx("div", { className: `${getColumnClasses(isSecondColumn, isLastColumn, column.cells)}`, children: column.cells?.length ? (jsx("div", { className: `w-full ${isLastColumn ? 'border-4 border-green-more-dark p-1.5 min-w-[290px]' : ''}`, children: column.cells.reverse().map(renderInvestmentCell) })) : null }, `column_${i}`));
+        return (jsx("div", { className: `${getColumnClasses(isSecondColumn, isLastColumn, column.cells)}`, children: column.cells?.length ? (jsx("div", { className: `w-full ${isLastColumn ? 'border-4 border-green-more-dark p-2xs min-w-[290px]' : ''}`, children: column.cells.reverse().map(renderInvestmentCell) })) : null }, `column_${i}`));
     };
     const getColumnClasses = (isSecondColumn, isLastColumn, cells = []) => [
         cells.length ? 'flex-1' : 'flex-0',
-        cells.length && !isSecondColumn && !isLastColumn ? 'pl-2.5' : '',
-        cells.length && !isLastColumn ? 'pr-2.5 pb-8' : 'pb-[22px]',
+        cells.length && !isSecondColumn && !isLastColumn ? 'pl-s' : '',
+        cells.length && !isLastColumn ? 'pr-s pb-3xl' : 'pb-xl',
     ].join(' ');
     const renderInvestmentCell = (cell, i) => {
         const cellSize = cell.cellSize || 'XS';
         const cellColor = cell.cellColor || 'green';
-        return cell.text ? (jsx("div", { className: `flex-1 flex items-center justify-center relative py-2 ${investmentCellSizeMap[cellSize]} ${investmentCellColorMap[cellColor]} ${cellSize === 'XS' ? 'px-3' : 'px-11'}`, children: jsx("div", { className: "text-center", children: cell.text }) }, `cell_${i}`)) : null;
+        return cell.text ? (jsx("div", { className: `flex-1 flex items-center justify-center relative py-xs ${investmentCellSizeMap[cellSize]} ${investmentCellColorMap[cellColor]} ${cellSize === 'XS' ? 'px-s' : 'px-5xl'}`, children: jsx("div", { className: "text-center", children: cell.text }) }, `cell_${i}`)) : null;
     };
-    const renderInvestmentColumnTitle = (column, i, arr) => {
-        const isFirstColumn = i === 0;
-        const isLastColumn = i === arr.length - 1;
-        return (jsx("div", { className: `flex-1 max-w-[180px] text-center px-2 ${isFirstColumn ? 'pl-9' : ''} ${isLastColumn ? 'mr-3.5' : ' '}`, children: column.title }, `title_${i}`));
+    const renderInvestmentColumnTitle = (column, i) => {
+        return (jsx("div", { className: `flex-1 max-w-[180px] text-center px-xs last:pr-3xl`, children: column.title }, `title_${i}`));
+    };
+
+    const KILO = 1024;
+    const KILO_SIZES = ['байт', 'Кб', 'Мб', 'Гб', 'Тб', 'Пб'];
+    const formatBytes = (bytes, decimals = 2) => {
+        if (bytes === 0) {
+            return '';
+        }
+        const i = Math.floor(Math.log(bytes) / Math.log(KILO));
+        return `${parseFloat((bytes / Math.pow(KILO, i)).toFixed(decimals))} ${KILO_SIZES[i]}`;
     };
 
     const LinkDocItem = JSX(({ icon, text, fileSize, ...linkProps }) => (jsxs("a", { className: "flex box-border gap-3 group/item h-fit w-fit text-primary-text no-underline hover:text-primary-main", role: "link", ...linkProps, children: [icon, text ? (jsxs(Text, { size: "text-l", font: "font-light", children: [text, jsx(Text, { color: "text-secondary-text", children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] })));
@@ -3734,24 +3781,27 @@
     };
     const LinkDocs = JSX(({ className = '', title, description, align = 'text-center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => {
         const router = useRouter();
-        return (jsxs(BlockWrapper, { className: className, defaultPadding: "p-default", ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, align: align, headlineVersion: "M", as: "h2" }), documents?.length ? (jsx("div", { className: style('mt-5 sm:mt-8 flex flex-col gap-6', linkColumnsModeStyleMap[columnsMode]), role: "list", children: documents.map(renderLinkDocItem(router, columnsMode, icon)) })) : null] }));
+        return (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, align: align, headlineVersion: "M", as: "h2", isPadding: false }), documents?.length ? (jsx("div", { className: style('mt-5 sm:mt-8 flex flex-col gap-6', linkColumnsModeStyleMap[columnsMode]), role: "list", children: documents.map(renderLinkDocItem(router, columnsMode, icon)) })) : null] }));
     });
     const renderLinkDocItem = (router, columnsMode, icon) => (docBlockDef, i) => {
         const href = docBlockDef?.docType === 'Attachment'
             ? adjustHref(router)(docBlockDef?.attachment?.src)
             : docBlockDef?.href;
-        return (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocItem, { ...docBlockDef, href: href, icon: icon ? jsx(Img, { className: linkIconStyle, image: icon, width: "24", height: "24" }) : null }) }, String(i)));
+        const fileSize = docBlockDef?.docType === 'Attachment'
+            ? formatBytes(docBlockDef?.attachment?.fileSize || 0)
+            : docBlockDef?.fileSize;
+        return (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocItem, { text: docBlockDef?.text, target: docBlockDef?.target, href: href, fileSize: fileSize, icon: icon ? jsx(Img, { className: linkIconStyle, image: icon, width: "24", height: "24" }) : null }) }, String(i)));
     };
 
-    const renderDescription$2 = (description) => description ? (jsx("div", { className: "mb-5 pt-0.5 sm:mb-0 sm:pt-0", children: jsx(Text, { size: "text-xl", "font-weight": "light", children: description }) })) : null;
+    const renderDescription$1 = (description) => description ? (jsx("div", { className: "mb-5 pt-3xs sm:mb-0 sm:pt-0", children: jsx(Text, { size: "text-xl", "font-weight": "light", children: description }) })) : null;
 
     const renderList$1 = (items) => {
-        return items?.length ? (jsx(List, { items: items, className: "text-l font-light mb-2 last:mb-0" })) : (jsx("span", { className: "text-m font-light text-secondary-text", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
+        return items?.length ? (jsx(List, { items: items, className: "text-l font-light mb-xs last:mb-0" })) : (jsx("span", { className: "text-m font-light text-secondary-text", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
     };
 
     const MobileAppTile = JSX(({ className, padding, alignTitle = 'left', buttons = [], description, headingType = 'h4', image, items, qr, title = 'Мобильное приложение', version = 'primary', ...rest }) => {
-        const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
-        return (jsx(BlockWrapper, { className: style('min-h-80', className), padding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-default", title: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', AlignText[alignTitle]) })) : null, buttons: renderButtonsSection(buttons, { isVertical: buttons.length > 4 }), children: [renderDescription$2(description), jsxs("div", { className: "flex flex-1 flex-wrap gap-s items-center", children: [qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList$1(items), image?.src ? jsx(Img, { image: image }) : null] })] }) }));
+        const containerStyle = version === 'secondary' ? 'p-m min-w-32' : 'min-w-24';
+        return (jsx(BlockWrapper, { className: style('min-h-80', className), padding: "p-0", version: version, ...rest, children: jsxs(BaseTile, { className: "h-full", padding: padding, defaultPadding: "p-6xl", title: title ? (jsx(Heading, { headingType: headingType, title: title, className: style('whitespace-pre-wrap', AlignText[alignTitle]) })) : null, buttons: renderButtonsSection(buttons, { isVertical: buttons.length > 4 }), children: [renderDescription$1(description), jsxs("div", { className: "flex flex-1 flex-wrap gap-m items-center", children: [qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList$1(items), image?.src ? jsx(Img, { image: image }) : null] })] }) }));
     });
 
     const initialFiltrationState = {};
@@ -3858,7 +3908,7 @@
                 updatePointsToRender(null);
             }
         };
-        return (jsxs("div", { className: `${Object.values(styles$2).join(' ')} bg-white py-3 pl-11 pr-4 w-full`, children: [jsx(Icon, { name: "LoupeIcon", iconVersion: "black", width: "20", height: "20", className: "absolute left-4" }), jsx("input", { type: "text", placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441 \u0438\u043B\u0438 \u043C\u0435\u0442\u0440\u043E", onChange: onChange, className: "border-0 focus:border-0 outline-0 w-full" })] }));
+        return (jsxs("div", { className: `${Object.values(styles$2).join(' ')} bg-white py-s pl-5xl pr-m w-full`, children: [jsx(Icon, { name: "LoupeIcon", iconVersion: "black", width: "20", height: "20", className: "absolute left-4" }), jsx("input", { type: "text", placeholder: "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0430\u0434\u0440\u0435\u0441 \u0438\u043B\u0438 \u043C\u0435\u0442\u0440\u043E", onChange: onChange, className: "border-0 focus:border-0 outline-0 w-full" })] }));
     };
 
     const styles$1 = {
@@ -3970,7 +4020,7 @@
                 setPointsToRender(normalizedPoints);
             }
         };
-        return (jsxs("div", { id: "map", className: `${isFullScreen ? '' : 'relative'} w-full ${className}`, children: [jsx("div", { className: `absolute flex left-2 top-4 w-[50%] ${zIndex}`, children: showSearchField
+        return (jsxs("div", { id: "map", className: `${isFullScreen ? '' : 'relative'} w-full ${className}`, children: [jsx("div", { className: `absolute flex left-2 top-4 w-1/2 ${zIndex}`, children: showSearchField
                         ? renderSearchField(mockPoints, yandexMaps, updatePointsToRender)
                         : renderOpenMap(pointsCenter) }), jsx("div", { className: `${Object.values(FULLSCREEN_STYLES).join(' ')} ${zIndex} right-2 top-4 bg-white`, onClick: toggleFullscreen, children: jsx(Icon, { name: "FullScreenIcon", width: "16", height: "16" }) }), jsxs("div", { className: `absolute right-2 top-52 z-10 w-12 overflow-hidden border border-transparent rounded-md ${zIndex}`, children: [jsx(ZoomButton, { yandexMaps: map }), jsx(ZoomButton, { yandexMaps: map, direction: "out" })] }), renderUserGeolocation(map.current, yandexMaps, `right-2 top-80 ${zIndex}`)] }));
     });
@@ -4112,11 +4162,11 @@
         ];
         const currentWeekDayInd = new Date().getDay();
         const currentWeekDay = currentWeekDayInd > 0 ? workScheduleWeek[currentWeekDayInd - 1] : workScheduleWeek[6];
-        return (jsxs("div", { className: `flex flex-col font-sans bg-white w-full ${className}`, children: [jsxs("div", { className: "flex flex-col px-12 pt-12", children: [jsxs("div", { className: "flex justify-between", children: [jsx("div", { className: "text-h2", children: name }), renderCurrentDaySchedule(currentWeekDay)] }), jsxs("div", { className: "flex text-l font-light pt-4", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24", className: "pr-1" }), address] }), jsx("div", { className: "flex pt-4", children: nearbyOffices.map(renderNearbyOffice) })] }), jsxs("div", { className: "flex justify-between pt-8", children: [jsx("div", { className: "flex-grow h-full w-full overflow-hidden", children: point ? jsx(YandexMap, { points: [point], className: "h-full" }) : null }), jsx("div", { className: "w-[434px] min-w-[434px] pl-9 pr-12 pb-14 flex flex-col", children: workScheduleWeek.map(renderDay) })] })] }));
+        return (jsxs("div", { className: `flex flex-col font-sans w-full ${className}`, children: [jsxs("div", { className: "flex flex-col gap-m p-6xl pb-3xl", children: [jsxs("div", { className: "flex justify-between", children: [jsx("div", { className: "text-h2", children: name }), renderCurrentDaySchedule(currentWeekDay)] }), jsxs("div", { className: "flex text-l font-light", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24", className: "pr-1" }), address] }), jsx("div", { className: "flex", children: nearbyOffices.map(renderNearbyOffice) })] }), jsxs("div", { className: "flex justify-between", children: [jsx("div", { className: "flex-grow h-full w-full overflow-hidden", children: point ? jsx(YandexMap, { points: [point], className: "h-full" }) : null }), jsx("div", { className: "w-[434px] min-w-[434px] p-6xl pt-0 flex flex-col", children: workScheduleWeek.map(renderDay) })] })] }));
     });
 
-    const OfficeServicesBlock = JSX(({ className = '', title, servicesList, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col', className), ...rest, children: [title ? jsx(Heading, { headingType: "h5", className: "mb-5", title: title }) : null, servicesList?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: servicesList.map(renderListItems) })) : null] })));
-    const renderListItems = (itemList, i) => (jsxs("li", { className: "flex mb-5 last:mb-0 list-none", children: [itemList.icon ? (jsx(Img, { className: "mr-3 min-w-6 min-h-6 w-6 h-6", width: "24", height: "24", image: itemList.icon })) : null, itemList.label ? (jsx(Text, { size: "text-l", font: "font-light", children: itemList.label })) : null] }, `list_item_${String(i)}`));
+    const OfficeServicesBlock = JSX(({ className = '', title, servicesList, ...rest }) => (jsxs(BlockWrapper, { className: style('flex flex-col gap-lg', className), ...rest, children: [title ? jsx(Heading, { headingType: "h5", title: title }) : null, servicesList?.length ? (jsx("ul", { className: "list-none space-y-lg", children: servicesList.map(renderListItems) })) : null] })));
+    const renderListItems = (itemList, i) => (jsxs("li", { className: "flex gap-s list-none ", children: [itemList.icon ? (jsx(Img, { className: "min-w-6 min-h-6 w-6 h-6", width: "24", height: "24", image: itemList.icon })) : null, itemList.label ? (jsx(Text, { size: "text-l", font: "font-light", children: itemList.label })) : null] }, `list_item_${String(i)}`));
 
     const ParagraphBlock = JSX(({ text, size, align, font, children, ...rest }) => (jsx(BlockWrapper, { defaultPadding: "p-0", ...rest, children: jsx(Paragraph, { size: size, align: align, font: font, children: text || children }) })));
 
@@ -4137,7 +4187,7 @@
         'description' in _ ? renderBenefitDescription(_.description, i) : null,
     ]);
 
-    const BenefitItem = JSX(({ className, benefitsVersion, ..._ }) => (jsxs("div", { className: style('flex gap-s', 'description' in _ && _.description ? 'items-start' : 'items-center', className), children: ['icon' in _ ? renderBenefitIcon(_.icon, benefitsVersion) : null, jsx("div", { children: renderBenefitText(_) })] })));
+    const BenefitItem = JSX(({ className, benefitsVersion, ..._ }) => (jsxs("div", { className: style('flex gap-m', 'description' in _ && _.description ? 'items-start' : 'items-center', className), children: ['icon' in _ ? renderBenefitIcon(_.icon, benefitsVersion) : null, jsx("div", { children: renderBenefitText(_) })] })));
 
     const MAX_BENEFITS_LEN_DEVIATION = 16;
     const benefitLength = (_) => _.type === 'rte'
@@ -4156,21 +4206,21 @@
     const BaseProductTile = JSX(({ className, padding, defaultPadding, title, description, headlineVersion = 'L', align = 'text-left', isInsetTitle = true, benefitsVersion, isTabularBenefits, benefits, __html, items, isDotted = true, listItemSize, tags, buttons, image, imageOptions: { imageAlign = 'end', directionRight = true, isBackground } = {}, children, }) => {
         const img = image?.src ? jsx(Img, { image: image }) : null;
         const headline = (jsx(Headline, { title: title, description: description, headlineVersion: headlineVersion, align: align, isPadding: false }));
-        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isInsetTitle ? { insetTitle: headline } : { title: headline }), ...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight)), imageAlign: imageAlign, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col gap-m", children: [jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: benefits }), __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, tags?.length ? jsx(Tags, { tags: tags }) : null] }) }));
+        return (jsx(BaseTile, { className: className, padding: padding, defaultPadding: defaultPadding, ...(isInsetTitle ? { insetTitle: headline } : { title: headline }), ...(isBackground ? { backImage: img } : leftOrRightImage(img, directionRight)), imageAlign: imageAlign, buttons: renderButtonsSection(buttons), children: jsxs("div", { className: "flex flex-col gap-xl", children: [jsx(BenefitsList, { benefitsVersion: benefitsVersion, isTabularBenefits: isTabularBenefits, benefits: benefits }), __html ? jsx(RichText, { __html: __html }) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, listItemSize: listItemSize })) : null, children, tags?.length ? jsx(Tags, { tags: tags }) : null] }) }));
     });
     const leftOrRightImage = (img, directionRight) => directionRight ? { rightImage: img } : { leftImage: img };
 
-    const renderInsuranceSumMonth = (sum, monthLimit) => sum || monthLimit ? (jsxs("div", { className: "flex flex-wrap xl:flex-nowrap xl:bg-main-divider xl:rounded-md p-xs gap-m", children: [Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum) : null, Number(monthLimit) > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit) : null] })) : null;
+    const renderInsuranceSumMonth = (sum, monthLimit) => sum || monthLimit ? (jsxs("div", { className: "flex flex-wrap xl:flex-nowrap xl:bg-main-divider xl:rounded-md p-xs gap-xl", children: [Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum) : null, Number(monthLimit) > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit) : null] })) : null;
     const renderValueBlock = (title, value = 0) => (jsxs("div", { className: "basis-full flex flex-col-reverse sm:flex-row sm:justify-between items-baseline whitespace-pre", children: [jsx(Text, { font: "font-light", size: "text-l", children: title }), jsxs(Text, { size: "text-h6", color: "text-primary-text", children: [toLocalNumberFormat(2)(value), " \u20BD"] })] }));
 
-    const PictureText = JSX(({ className, padding, headlineVersion = 'M', align = 'text-center', sum, monthLimit, imageOptions, ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-default", padding: padding, headlineVersion: headlineVersion, align: align, isInsetTitle: false, imageOptions: { directionRight: false, imageAlign: 'center', ...imageOptions }, ...rest, children: renderInsuranceSumMonth(Number(sum), Number(monthLimit)) }) })));
+    const PictureText = JSX(({ className, padding, headlineVersion = 'M', align = 'text-center', sum, monthLimit, imageOptions, ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-6xl", padding: padding, headlineVersion: headlineVersion, align: align, isInsetTitle: false, imageOptions: { directionRight: false, imageAlign: 'center', ...imageOptions }, ...rest, children: renderInsuranceSumMonth(Number(sum), Number(monthLimit)) }) })));
 
     const GOLDEN_RATIO = 1.618;
-    const Placeholder = JSX(({ className, title, description = 'Блок в разработке...', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border', className), ...rest, children: [jsx(Headline, { className: "max-w-[600px]", title: title, description: description, headlineVersion: "L", align: "text-left", isPadding: false }), jsx("figure", { className: "m-0 mt-m min-w-[80%]", children: renderShimmer() })] })));
+    const Placeholder = JSX(({ className, title, description = 'Блок в разработке...', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border', className), ...rest, children: [jsx(Headline, { className: "max-w-[600px]", title: title, description: description, headlineVersion: "L", align: "text-left", isPadding: false }), jsx("figure", { className: "m-0 mt-xl min-w-[80%]", children: renderShimmer() })] })));
     const renderShimmer = (size = 3) => goldenSequence(100, size)
         .map((_) => Math.floor(_))
         .map(renderShimmerItem);
-    const renderShimmerItem = (width, index) => (jsx("div", { style: { width: `${width || 100}%` }, className: "h-4 mt-2 bg-secondary-light" }, String(index)));
+    const renderShimmerItem = (width, index) => (jsx("div", { style: { width: `${width || 100}%` }, className: "h-4 mt-xs bg-secondary-light" }, String(index)));
     const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
 
     function renderBackwardButton({ text, href, target, icon }, version) {
@@ -4183,13 +4233,13 @@
                         } }) }), jsx(Button, { version: "link", ...commonProps })] }));
     }
 
-    const ProductBlock = JSX(({ className, padding, backwardButton, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden flex flex-col gap-lg box-border', className), defaultPadding: "p-default", padding: padding, ...rest, children: [backwardButton?.text
+    const ProductBlock = JSX(({ className, padding, backwardButton, ...rest }) => (jsxs(BlockWrapper, { className: style('overflow-hidden flex flex-col gap-3xl box-border', className), defaultPadding: "p-6xl", padding: padding, ...rest, children: [backwardButton?.text
                 ? renderBackwardButton(backwardButton, !rest.version || rest.version === 'primary' ? 'primary' : 'white')
                 : null, jsx(BaseProductTile, { className: "grow h-full", ...rest })] })));
 
     const ProductGallery = JSX(({ className = '', padding, slides = [], ...rest }) => {
         const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden', className), defaultPadding: "py-default", 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-default h-full", headlineVersion: "XXL", ...productBlock, ...rest }) }, String(i)))) }), jsx("div", { className: "h-28 px-xs mt-m -mb-m flex gap-xs box-border", children: slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex })) })] }));
+        return (jsxs(BlockWrapper, { className: style('box-border overflow-hidden', className), defaultPadding: "py-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: "XXL", ...productBlock, ...rest }) }, String(i)))) }), jsx("div", { className: "h-28 px-xs mt-m -mb-m flex gap-xs box-border", children: slides.map(renderNavButton({ activeSlideIndex, onClick: setActiveSlideIndex })) })] }));
     });
     const renderNavButton = ({ activeSlideIndex, onClick }) => ({ nav }, i) => {
         const isActive = i === activeSlideIndex;
@@ -4205,9 +4255,9 @@
         return (jsxs("button", { type: "button", onClick: () => onClick(i), "aria-label": nav?.title, className: style('relative px-6 box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50', btnClassName), children: [jsx("div", { className: btnTitleClassName, children: nav?.title }), jsx("div", { className: btnDescClassName, children: nav?.description })] }, String(i)));
     };
 
-    const ProductTile = JSX(({ className, padding, headlineVersion = 'S', isTabularBenefits = true, additionalDescription, imageOptions, ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-m", padding: padding, headlineVersion: headlineVersion, isTabularBenefits: isTabularBenefits, imageOptions: { isBackground: true, ...imageOptions }, ...rest, children: additionalDescription ? (jsx(Paragraph, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null }) })));
+    const ProductTile = JSX(({ className, padding, headlineVersion = 'S', isTabularBenefits = true, additionalDescription, imageOptions, ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-xl", padding: padding, headlineVersion: headlineVersion, isTabularBenefits: isTabularBenefits, imageOptions: { isBackground: true, ...imageOptions }, ...rest, children: additionalDescription ? (jsx(Paragraph, { size: "text-m", font: "font-light", color: "group-data-primary:text-secondary-text", children: additionalDescription })) : null }) })));
 
-    const PromoTile = JSX(({ className, title = 'Акции и спецпредложения', description, headlineVersion = 'S', date, buttons = [], ...rest }) => (jsx(BlockWrapper, { className: style('box-border', className), ...rest, children: jsxs(BaseTile, { className: "h-full", title: title ? (jsx(Headline, { title: title, headlineVersion: headlineVersion, align: "text-left", isPadding: false })) : null, buttons: renderButtonsSection(buttons), children: [date ? jsx("div", { className: "text-s mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) })));
+    const PromoTile = JSX(({ className, title = 'Акции и спецпредложения', description, headlineVersion = 'S', date, buttons = [], ...rest }) => (jsx(BlockWrapper, { className: style('box-border', className), ...rest, children: jsxs(BaseTile, { className: "h-full", title: title ? (jsx(Headline, { title: title, headlineVersion: headlineVersion, align: "text-left", isPadding: false })) : null, buttons: renderButtonsSection(buttons), children: [date ? jsx("div", { className: "text-s mb-xs", children: formatDate(date) }) : null, jsx("div", { className: "text-l", children: description })] }) })));
     function formatDate(date) {
         const dateObj = new Date(date);
         const dateFormat = {
@@ -4218,14 +4268,10 @@
         return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
     }
 
-    const RepresentativeOfficeInfo = JSX(({ address, email, telephone, button, className = '', __html, icon, title, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border text-left', className), version: version, ...rest, children: [jsxs("div", { className: "w-full sm:flex sm:justify-between sm:flex-row-reverse", children: [renderIconBlock(icon), title ? jsx(Heading, { headingType: "h4", as: "h3", className: "mb-3 sm:mb-6", title: title }) : null] }), jsxs("div", { className: "w-full", children: [__html ? renderDescriptionBlock(__html) : null, renderBlock('Адрес', address, 'GeolocationIcon'), renderBlock('Телефон', telephone, 'PhoneIcon'), renderBlock('E-mail', email, 'MailIcon'), button?.text
-                        ? renderButtonsSection([button], {
-                            className: 'mb-6',
-                        })
-                        : null] })] })));
-    const renderIconBlock = (icon) => (jsxs("div", { className: 'w-10 h-7 sm:w-24 sm:h-16 mb-3 sm:mb-0 sm:mt-3', children: [icon?.src ? jsx(Img, { image: icon }) : null, icon?.icon ? jsx(Img, { image: icon }) : null] }));
-    const renderDescriptionBlock = (__html) => (jsx("div", { className: "border-b border-main-divider pb-5 my-5", children: jsx(RichText, { __html: __html }) }));
-    const renderBlock = (blockName, data, iconName) => (jsxs("div", { className: "flex mb-4", children: [jsx(Icon, { className: "pr-4", iconVersion: "black", name: iconName, width: "24", height: "24" }), jsxs("div", { className: "flex flex-col first:pb-1", children: [jsx(Text, { size: "text-m", font: "font-light", children: blockName }), data ? (jsx(Text, { size: "text-h6", color: "text-green", children: data })) : null] })] }));
+    const RepresentativeOfficeInfo = JSX(({ address, email, telephone, button, className = '', __html, icon, title, version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border text-left space-y-s', className), version: version, ...rest, children: [jsxs("div", { className: "w-full flex justify-between flex-row-reverse", children: [renderIconBlock(icon), title ? jsx(Heading, { headingType: "h4", as: "h3", title: title }) : null] }), jsxs("div", { className: "w-full space-y-m", children: [__html ? renderDescriptionBlock(__html) : null, renderBlock('Адрес', address, 'GeolocationIcon'), renderBlock('Телефон', telephone, 'PhoneIcon'), renderBlock('E-mail', email, 'MailIcon'), button?.text ? renderButtonsSection([button]) : null] })] })));
+    const renderIconBlock = (icon) => (jsx("div", { className: 'w-10 h-7 sm:w-24 sm:h-16', children: icon?.src || icon?.icon ? jsx(Img, { image: icon }) : null }));
+    const renderDescriptionBlock = (__html) => (jsx("div", { className: "border-b border-main-divider pb-5", children: jsx(RichText, { __html: __html }) }));
+    const renderBlock = (blockName, data, iconName) => (jsxs("div", { className: "flex gap-m", children: [jsx(Icon, { iconVersion: "black", name: iconName, width: "24", height: "24" }), jsxs("div", { className: "flex flex-col", children: [jsx(Text, { size: "text-m", font: "font-light", children: blockName }), data ? (jsx(Text, { size: "text-h6", color: "text-green", children: data })) : null] })] }));
 
     const RichTextBlock = JSX((props) => {
         const { __html, richVersion, ...rest } = props;
@@ -4244,7 +4290,10 @@
     const rollupItemStyles = 'border-0 border-b border-solid border-main-divider last:border-b-0';
 
     const RollupItem = JSX(({ className = '', label = 'Развернуть', labelIcon, labelIconBgVersion, isExpanded, isFoldButtonOnTop = true, version = 'primary', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), defaultPadding: "p-0", tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-5 [&>*]:p-0', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren(rest) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({
+        return (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), defaultPadding: "p-0", tag: "div", version: "transparent", ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-5', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren({
+                        ...rest,
+                        extraProps: { className: 'w-full', padding: 'p-0' },
+                    }) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({
                     version,
                     label,
                     labelIcon,
@@ -4267,7 +4316,7 @@
         })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
     const renderPrimaryFoldButton = ({ label, labelIconBgVersion, icon, onToggle, labelIcon, }) => {
-        return (jsxs("button", { className: style('border-none bg-transparent px-0 flex justify-between items-center w-full group/button', labelIcon?.icon ? 'py-2' : 'py-5'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main gap-3", children: [renderRoundedIcon(), label ? (jsx(Text, { size: "text-h6", font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
+        return (jsxs("button", { className: style('border-none bg-transparent px-0 flex justify-between items-center w-full group/button', labelIcon?.icon ? 'py-xs' : 'py-lg'), onClick: onToggle, children: [jsxs("div", { className: "flex items-center group-hover/button:text-primary-main gap-s", children: [renderRoundedIcon(), label ? (jsx(Text, { size: "text-h6", font: "font-normal", children: label })) : null] }), icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null] }));
     };
 
     const WrapperSelect = JSX(({ data, fieldLabel, fieldValue, selected, placeholder = '', setSelected, label }) => {
@@ -4278,27 +4327,27 @@
         return (jsx(Select, { options: dataFormat, label: label, placeholder: placeholder || selected, onChange: (_) => setSelected(_.key), value: selectedObj }));
     });
 
-    const RegionsAndBranches = JSX(({ regions = [], selectedRegion, onSelectedRegion: onSelectedRegion, branches = [], selectedBranch, onSelectedBranch, }) => (jsxs("div", { className: "flex justify-between gap-4 mb-6", children: [jsx("div", { className: "max-w-[396px] w-1/2", children: jsx(WrapperSelect, { data: regions, fieldValue: "code", fieldLabel: "name", selected: selectedRegion, setSelected: onSelectedRegion, label: "\u0420\u0435\u0433\u0438\u043E\u043D" }) }), jsx("div", { className: "max-w-[396px] w-1/2", children: jsx(WrapperSelect, { data: branches, fieldValue: "branchCode", fieldLabel: "address", selected: selectedBranch, setSelected: onSelectedBranch, label: "\u041E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435" }) })] })));
+    const RegionsAndBranches = JSX(({ regions = [], selectedRegion, onSelectedRegion: onSelectedRegion, branches = [], selectedBranch, onSelectedBranch, }) => (jsxs("div", { className: "flex flex-col sm:flex-row gap-m order-1", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: regions, fieldValue: "code", fieldLabel: "name", selected: selectedRegion, setSelected: onSelectedRegion, label: "\u0420\u0435\u0433\u0438\u043E\u043D" }) }), jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: branches, fieldValue: "branchCode", fieldLabel: "address", selected: selectedBranch, setSelected: onSelectedBranch, label: "\u041E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435" }) })] })));
 
     const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "font-sans flex items-center relative cursor-pointer", children: [jsx("input", { className: "appearance-none flex justify-center items-center shrink-0 w-5 h-5 border border-gray hover:border-primary-hover\n        checked:border-2 checked:!border-primary-main focus:checked:border-primary-main focus:border-primary-text active:border-primary-text\n        after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main outline-none rounded-full cursor-pointer", type: "radio", value: value, name: name, checked: checked, onChange: (_) => onChange(_.target.value) }), text ? jsx("span", { className: "text-primary-text ml-3 cursor-pointer", children: text }) : null] }) })));
 
-    const RenderRadioButtons = JSX(() => {
+    const RadioButtons = JSX(({ className }) => {
         const [selectedOption, setSelectedOption] = useState('option2');
         const onChange = useCallback((_) => setSelectedOption(_), []);
-        return (jsxs("div", { children: [jsx(Radio, { className: "mb-2", name: "contractType", text: "\u041F\u0440\u043E\u0441\u0442\u043E\u0435 \u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435", value: "option1", checked: selectedOption === 'option1', onChange: onChange }), jsx(Radio, { name: "contractType", text: "\u0421\u0434\u0435\u043B\u043A\u0430 \u0441 \u043D\u0435\u0434\u0432\u0438\u0436\u0438\u043C\u043E\u0441\u0442\u044C\u044E", value: "option2", checked: selectedOption === 'option2', onChange: onChange })] }));
+        return (jsxs("div", { className: style('order-4', className), children: [jsx(Radio, { className: "mb-xs", name: "contractType", text: "\u041F\u0440\u043E\u0441\u0442\u043E\u0435 \u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435", value: "option1", checked: selectedOption === 'option1', onChange: onChange }), jsx(Radio, { name: "contractType", text: "\u0421\u0434\u0435\u043B\u043A\u0430 \u0441 \u043D\u0435\u0434\u0432\u0438\u0436\u0438\u043C\u043E\u0441\u0442\u044C\u044E", value: "option2", checked: selectedOption === 'option2', onChange: onChange })] }));
     });
 
     const ITEMS = ['От 1 дня', 'До 365 дней'];
     const MIN = 1;
     const MAX = 365;
-    const RentalPeriod = JSX(({ days, setDays }) => (jsxs("div", { className: "mb-6", children: [jsx("span", { className: "block text-m font-light mb-1", children: "\u0421\u0440\u043E\u043A \u0430\u0440\u0435\u043D\u0434\u044B" }), jsx(InputRange, { min: MIN, max: MAX, value: days, items: ITEMS, onChange: setDays })] })));
+    const RentalPeriod = JSX(({ days, setDays }) => (jsxs("div", { className: "order-1", children: [jsx(Text, { size: "text-m", font: "font-light", children: "\u0421\u0440\u043E\u043A \u0430\u0440\u0435\u043D\u0434\u044B" }), jsx(InputRange, { min: MIN, max: MAX, value: days, items: ITEMS, onChange: setDays })] })));
 
     const SafeBoxCases = JSX(({ caseVolumes = [], selectedCaseVolume, onSelectedCaseVolume, safeBoxCases = [], selectedBoxSize, onSelectedBoxSize, }) => {
-        return (jsxs("div", { className: "flex justify-between mb-6", children: [jsx("div", { className: "mr-4 w-full", 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: "w-full", 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" }) })] }));
+        return (jsxs("div", { className: "flex flex-col sm:flex-row gap-4 order-1", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: caseVolumes, fieldLabel: "volume", selected: selectedCaseVolume, setSelected: onSelectedCaseVolume, label: "\u0420\u0430\u0437\u043C\u0435\u0440", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0430\u0437\u043C\u0435\u0440" }) }), jsx("div", { className: "flex-1 min-w-0", children: jsx(WrapperSelect, { data: safeBoxCases, fieldLabel: "safeBoxCasesSize", selected: selectedBoxSize, setSelected: onSelectedBoxSize, label: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B \u044F\u0447\u0435\u0439\u043A\u0438, \u043C\u043C (\u0412\u0445\u0428\u0445\u0414)", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440 \u044F\u0447\u0435\u0439\u043A\u0438" }) })] }));
     });
 
     const SafeDepositRentalFields = JSX(({ regions, selectedRegion, branches, selectedBranch, days, selectedCaseVolume, selectedBoxSize, safeBoxCases, caseVolumes, onChange, onClick, }) => {
-        return (jsxs("div", { className: "flex-1 mr-9", 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(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: "flex justify-between items-center mt-5", children: [jsx(RenderRadioButtons, {}), jsx(Button, { text: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", version: "primary", onClick: onClick })] })] }));
+        return (jsxs("div", { className: "contents sm: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 sm:flex justify-between items-center", children: [jsx(RadioButtons, { className: "mb-4 sm:mb-0" }), jsx(Button, { text: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", version: "primary", onClick: onClick, className: "order-6" })] })] }));
     });
     const onSelectedBranch = (onChange) => (value) => {
         onChange({ selectedBranch: value, selectedCaseVolume: '', selectedBoxSize: '' });
@@ -4309,10 +4358,11 @@
 
     const SafeDepositRentalTotal = JSX(({ days, tariffs = [] }) => {
         const price = calculatePrice(days, tariffs);
-        return (jsxs("div", { className: "flex flex-col justify-between", children: [jsxs("div", { className: "flex", children: [renderTotal('Аренда за', days, 'mr-11'), renderTotal('Цена', price + ' ₽')] }), jsxs("div", { className: "bg-primary-main px-10 pt-10 pb-4 text-center", children: [jsx(Img, { image: { icon: 'PackA4Icon' }, width: "290", height: "257" }), jsxs("span", { className: "text-s font-light text-white opacity-80 mt-2 inline-block", children: ["\u041D\u0430 \u0440\u0438\u0441\u0443\u043D\u043A\u0438 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0430 \u043F\u0430\u0447\u043A\u0430", jsx("br", {}), " \u043B\u0438\u0441\u0442\u043E\u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0430 \u04104"] })] })] }));
+        const imageDescription = 'На рисунке изображена пачка листов\nформата А4';
+        return (jsxs("div", { className: "contents sm:flex flex-col justify-between order-2", children: [jsxs("div", { className: "flex flex-col sm:flex-row gap-x-11 gap-y-7 order-5 sm:order-none py-7 sm:py-0 border-t border-main-divider sm:border-none", children: [renderTotal('Аренда за', days), renderTotal('Цена', price + ' ₽')] }), jsx("span", { className: "sm:hidden order-3 mb-2 text-s-light text-secondary-text", children: imageDescription }), jsxs("div", { className: "flex flex-col items-center gap-3 order-3 sm:order-none mb-6 sm:mb-0 bg-primary-main py-3 sm:p-8 text-center", children: [jsx(Img, { image: { icon: 'PackA4Icon' }, className: "sm:h-[246px]" }), jsx("span", { className: "hidden sm:inline text-s font-light text-white opacity-80 whitespace-pre-line", children: imageDescription })] })] }));
     });
-    const renderTotal = (label, total, className = '') => {
-        return (jsxs("div", { className: className, children: [jsx("div", { className: "text-m font-light text-secondary-text mb-1", children: label }), jsx("span", { className: "text-h3 text-primary-text", children: total })] }));
+    const renderTotal = (label, total) => {
+        return (jsxs("div", { className: "flex justify-between items-center gap-y-1 sm:flex-col sm:items-start", children: [jsx("div", { className: "text-l font-light text-secondary-text", children: label }), jsx("span", { className: "text-l sm:text-h3 text-primary-text", children: total })] }));
     };
     const calculatePrice = (days, tariffs) => {
         const tariffType = getTariffType(days);
@@ -4359,7 +4409,7 @@
         const caseVolumes = getCaseVolumes(branch?.safeBoxCaseVolumes);
         const safeBoxCases = getCaseVolume(branch?.safeBoxCaseVolumes, data.selectedCaseVolume)?.safeBoxCases;
         const tariffs = getTariffs(safeBoxCases, data.selectedBoxSize);
-        return (jsxs("div", { className: "flex justify-between align-top mb-6", children: [jsx(SafeDepositRentalFields, { ...data, regions: regions, onClick: onClick, branches: branches, caseVolumes: caseVolumes, safeBoxCases: safeBoxCases, onChange: onChange }), jsx(SafeDepositRentalTotal, { days: data.days, tariffs: tariffs })] }));
+        return (jsxs("div", { className: "flex flex-col sm:flex-row gap-x-9 align-top mb-6", children: [jsx(SafeDepositRentalFields, { ...data, regions: regions, onClick: onClick, branches: branches, caseVolumes: caseVolumes, safeBoxCases: safeBoxCases, onChange: onChange }), jsx(SafeDepositRentalTotal, { days: data.days, tariffs: tariffs })] }));
     });
     const getCaseVolumes = (safeBoxCaseVolumes) => safeBoxCaseVolumes?.length ? safeBoxCaseVolumes?.filter((_) => _?.safeBoxCases?.length) : [];
     const getCaseVolume = (caseVolumes, selectedCaseVolume) => caseVolumes?.find((_) => _.volume === selectedCaseVolume);
@@ -4392,7 +4442,7 @@
         const branches = useSafeBoxes(selectedRegion);
         const handleChangeSafeDepositState = useCallback((state) => setStateDepositState((oldState) => ({ ...oldState, ...state })), [setStateDepositState]);
         const points = getCoordinates(getBranch(branches, safeDepositState.selectedBranch) || branches);
-        return (jsxs(BlockWrapper, { className: className, defaultPadding: "", ...rest, children: [jsxs("div", { className: "px-8 py-12", children: [title ? (jsx(Heading, { title: title, headingType: "h3", as: "h2", className: "text-primary-text mb-2.5 text-center" })) : null, jsx(SafeDepositRentalForm, { regions: regions, branches: branches, data: { ...safeDepositState, selectedRegion }, onClick: handleShowMap, onChange: handleChangeSafeDepositState }), footnote ? (jsx(Paragraph, { size: "text-s", font: "font-light", children: footnote })) : null] }), points.length && showMap ? jsx(YandexMap, { points: points, className: "h-[640px]" }) : null] }));
+        return (jsxs(BlockWrapper, { className: className, defaultPadding: "", ...rest, children: [jsxs("div", { className: "p-4xl", children: [title ? (jsx(Heading, { title: title, headingType: "h3", as: "h2", className: "text-primary-text mb-s text-center" })) : null, jsx(SafeDepositRentalForm, { regions: regions, branches: branches, data: { ...safeDepositState, selectedRegion }, onClick: handleShowMap, onChange: handleChangeSafeDepositState }), footnote ? (jsx(Paragraph, { size: "text-s", font: "font-light", children: footnote })) : null] }), points.length && showMap ? jsx(YandexMap, { points: points, className: "h-[640px]" }) : null] }));
     });
     const normalizeSelectedRegion = (selectedRegion, regions) => !selectedRegion && regions?.length && regions[0]?.code ? regions[0].code : selectedRegion;
 
@@ -4415,9 +4465,9 @@
     };
     const renderDefaultStep = ({ styleMap, isMainButton, version }) => (step, i, arr) => {
         const { label, description, button, items, isDotted } = step;
-        return (jsxs("div", { className: style('relative flex flex-col items-center text-center whitespace-pre-line overflow-hidden', getContainerWidth(arr.length)), children: [jsxs("div", { className: style(button?.text ? 'mb-8' : '', 'text-center'), children: [label ? (jsx("div", { className: "mb-2", children: jsx(Text, { size: "text-h6", children: label }) })) : null, jsxs("div", { className: "flex flex-col items-center", children: [description ? jsx("div", { className: styleMap.description, children: description }) : null, jsx(List, { className: style(description ? `${styleMap.description} mt-0.5` : 'text-h6'), items: items, listItemSize: "M", isDotted: isDotted })] })] }), button?.text && !isMainButton ? (jsx(Button, { className: "box-border py-3 h-12 w-full max-w-[240px] mt-auto", version: version, ...button, children: button?.text })) : null] }, String(i)));
+        return (jsxs("div", { className: style('relative flex flex-col items-center text-center justify-between whitespace-pre-line overflow-hidden space-y-3xl', getContainerWidth(arr.length)), children: [jsxs("div", { className: "text-center space-y-xs", children: [label ? (jsx("div", { children: jsx(Text, { size: "text-h6", children: label }) })) : null, jsxs("div", { className: "flex flex-col items-center gap-3xs", children: [description ? jsx("div", { className: styleMap.description, children: description }) : null, jsx(List, { className: styleMap.description, items: items, listItemSize: "M", isDotted: isDotted })] })] }), button?.text && !isMainButton ? (jsx(Button, { className: "box-border py-s w-full max-w-60 mt-auto", version: version, ...button, children: button?.text })) : null] }, String(i)));
     };
-    const getContainerWidth = (length) => (length < 5 ? 'w-[276px]' : 'w-[210px]');
+    const getContainerWidth = (length) => (length < 5 ? 'w-[276px]' : 'w-[200px]');
 
     const STEPS_BLOCK_STYLE = {
         description: 'text-white/80 text-l font-light group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
@@ -4428,21 +4478,21 @@
     };
 
     const getLineOpacity = (showLines) => (showLines ? '' : 'opacity-0');
-    const getPaddingX = (steps) => (steps < 5 ? 'px-[88px]' : 'px-[55px]');
+    const getPaddingX = (steps) => (steps < 5 ? 'px-24' : 'px-16');
     const StepsBlock = JSX(({ className = '', showLines = true, steps = [], buttons, size = 'normal', version = 'primary', stepVersion = 'gray', title, ...rest }) => {
         const shortGaps = steps.length > 3;
         const styleMap = STEPS_BLOCK_STYLE;
         const lineOpacity = getLineOpacity(showLines);
         const paddingX = getPaddingX(steps.length);
         const isMainButton = Boolean(buttons?.every((b) => b?.text));
-        return (jsxs(BlockWrapper, { className: style('box-border flex flex-col items-center overflow-hidden', className), defaultPadding: "p-default", version: version, ...rest, children: [title ? (jsx(Heading, { headingType: "h4", className: "max-w-[752px] text-center mb-9", title: title })) : null, steps?.length ? (jsxs("div", { className: "box-border", children: [jsx("div", { className: style('flex items-center', paddingX), children: joinList(jsx("div", { className: style('h-0.5 w-full bg-secondary-light flex-1', lineOpacity) }))(steps.map(renderStepIcon(styleMap, size, stepVersion))) }), jsx("div", { className: style('flex justify-between mt-4', shortGaps ? 'gap-x-3' : 'gap-x-[101px]'), children: steps.map(renderStep({ styleMap, isMainButton, version })) })] })) : null, renderButtonsSection(buttons, { className: 'mt-8' })] }));
+        return (jsxs(BlockWrapper, { className: style('box-border flex flex-col items-center overflow-hidden gap-y-3xl', className), defaultPadding: "p-6xl", version: version, ...rest, children: [title ? jsx(Heading, { headingType: "h4", className: "text-center", title: title }) : null, steps?.length ? (jsxs("div", { className: "box-border space-y-lg", children: [jsx("div", { className: style('flex items-center', paddingX), children: joinList(jsx("div", { className: style('h-0.5 w-full bg-secondary-light flex-1', lineOpacity) }))(steps.map(renderStepIcon(styleMap, size, stepVersion))) }), jsx("div", { className: style('flex justify-between', shortGaps ? 'gap-x-3' : 'gap-x-20'), children: steps.map(renderStep({ styleMap, isMainButton, version })) })] })) : null, renderButtonsSection(buttons)] }));
     });
     const renderStepIcon = (styleMap, size, stepVersion) => ({ icon }, i) => {
-        const styleStepIconSize = size === 'normal' ? 'h-[100px] w-[100px]' : 'h-[63px] w-[63px]';
-        const stepVersionIconTextStyles = stepVersion === 'secondary' ? 'group-data-primary:text-white' : 'text-secondary-text';
         const iconVersion = stepVersion === 'secondary' ? 'white' : 'color';
-        return (jsx(BlockWrapper, { className: `${styleStepIconSize} flex justify-center items-center text-center rounded-full p-[26px] box-border z-10`, version: stepVersion, children: checkCanRenderIcon(icon) ? (jsx(Img, { image: { ...icon, iconVersion: icon.iconVersion || iconVersion }, width: "48", height: "48" })) : (jsx("span", { className: style('text-h4', stepVersion === 'transparent' ? styleMap.iconText : stepVersionIconTextStyles), children: i + 1 })) }, String(i)));
+        return (jsx(BlockWrapper, { defaultPadding: "", className: `${getIconSizeStyle(size)} flex justify-center items-center text-center rounded-full box-border z-10`, version: stepVersion, children: checkCanRenderIcon(icon) ? (jsx(Img, { image: { ...icon, iconVersion: icon.iconVersion || iconVersion }, width: "48", height: "48" })) : (jsx("span", { className: style('text-h4', stepVersion === 'transparent' ? styleMap.iconText : getIconTextStyle(stepVersion)), children: i + 1 })) }, String(i)));
     };
+    const getIconSizeStyle = (size) => (size === 'normal' ? 'h-24 w-24' : 'h-16 w-16');
+    const getIconTextStyle = (version) => version === 'secondary' ? 'group-data-primary:text-white' : 'text-secondary-text';
 
     const DEFAULT_GAP = 14;
     /*
@@ -4521,7 +4571,7 @@
         return (jsx("div", { className: getTabClassName('block', active, tabsMode), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: jsx("a", { role: "tab", className: style('flex flex-1 items-center justify-center h-full', getTabClassName('text', active, tabsMode)), target: tab.target, href: adjustedProps.href, onClick: handleClick, children: jsx("span", { children: tab.text }) }) }));
     });
 
-    const BADGE_CLASSES = 'bg-main-divider min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
+    const BADGE_CLASSES = 'bg-main-divider min-w-[22px] h-[22px] rounded-full text-xs ml-xs flex justify-center items-center';
     const LIGHT_BADGE_CLASSES = 'bg-white/30 text-white';
     const DARK_BADGE_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
     const renderGroupTab = ({ page, currentTab, showCounter, onClick, tabsMode }) => (tab, i) => {
@@ -4559,7 +4609,6 @@
         const { tabs, ...rest } = props;
         const [containerRef, scroll] = useSwipeListScroll({
             itemCount: tabs?.length || 0,
-            isCyclic: false,
         });
         return (jsxs("div", { className: "relative max-w-full m-auto", children: [jsx("div", { className: `font-sans max-w-full w-full overflow-hidden relative bg-white`, children: jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: tabs?.map(renderTab({ ...rest })) }) }), scroll.canScrollLeft ? (jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-6`, onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (jsx(ScrollRightButton, { className: `${scrollButtonStyle} rotate-180 right-6`, onClick: scroll.scrollRight })) : null] }));
     });
@@ -4610,7 +4659,7 @@
     const COLUMN_WIDTH$1 = 4 * 80 + 40; // w-80 + pl-10 = 360px
 
     const TableInnerButton = JSX(({ isOpen, onClick }) => {
-        return (jsxs(Button, { version: "primary", onClick: onClick, className: "w-full flex items-center justify-center rounded-none py-5", children: [jsx("div", { className: "text-h4", children: isOpen ? 'Скрыть' : 'Показать' }), jsx(Icon, { name: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon', className: "ml-3", iconVersion: "white", width: "20", height: "20" })] }));
+        return (jsxs(Button, { version: "primary", onClick: onClick, className: "w-full flex items-center justify-center rounded-none py-5", children: [jsx("div", { className: "text-h4", children: isOpen ? 'Скрыть' : 'Показать' }), jsx(Icon, { name: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon', className: "ml-s", iconVersion: "white", width: "20", height: "20" })] }));
     });
 
     const renderButtonsCellData = ({ buttons }) => renderButtonsSection(buttons);
@@ -4643,7 +4692,7 @@
             setOpenTableInnerIdx(cellIdx);
             setTableInner(props);
         };
-        return (jsxs("div", { className: cell?.tableCellType === 'Table' ? 'ml-10' : `first:pt-5 last:pb-5 pl-10`, children: [i > 0 ? jsx("div", { className: "h-5" }) : null, renderCell({
+        return (jsxs("div", { className: cell?.tableCellType === 'Table' ? 'ml-5xl' : `first:pt-lg last:pb-lg pl-5xl`, children: [i > 0 ? jsx("div", { className: "h-5" }) : null, renderCell({
                     cell,
                     cellProps: {
                         rowIdx,
@@ -4703,11 +4752,11 @@
             'flex duration-1000 text-center',
             rowIdx !== 0 ? 'font-normal' : 'font-light',
         ].join(' ');
-        return (jsxs("div", { className: "flex border-main-divider border border-t-0 border-x-0 border-solid", children: [headerColumn?.data ? (jsx("div", { className: `text-xl fontd-light w-[214px] pb-5 ${rowIdx === 0 ? 'pt-8' : 'pt-6'}`, children: headerColumn.data })) : null, jsx("div", { className: "flex flex-grow overflow-hidden", children: jsx("div", { className: columnsClassName, style: {
+        return (jsxs("div", { className: "flex border-main-divider border border-t-0 border-x-0 border-solid", children: [headerColumn?.data ? (jsx("div", { className: `text-xl font-light w-[214px] py-lg `, children: headerColumn.data })) : null, jsx("div", { className: "flex flex-grow overflow-hidden", children: jsx("div", { className: columnsClassName, style: {
                             transform: `translateX(-${transform}px)`,
-                        }, children: columns?.map((_, i) => (jsxs("div", { className: "flex flex-col flex-grow justify-center pt-6 pb-5 odd:bg-main-divider", children: [_?.data ? jsx("div", { className: "text-xl font-light mb-3", children: _.data }) : null, _?.cols ? renderCols(_.cols, activeColumnIndex) : null] }, `row${i}`))) }) })] }, String(rowIdx)));
+                        }, children: columns?.map((_, i) => (jsxs("div", { className: "flex flex-col flex-grow gap-s justify-center py-xl odd:bg-main-divider", children: [_?.data ? jsx("div", { className: "text-xl font-light", children: _.data }) : null, _?.cols ? renderCols(_.cols, activeColumnIndex) : null] }, `row${i}`))) }) })] }, String(rowIdx)));
     };
-    const renderCols = (cols, rowIndex) => cols?.length > 0 ? (jsx("div", { className: `flex ${rowIndex} ${rowIndex === 0 ? 'text-secondary-text' : ''} last:mr-3`, children: cols.map((data, i) => (jsx("div", { className: `w-[76px] text-h6 mr-5 first:ml-8`, children: data }, String(i)))) })) : null;
+    const renderCols = (cols, rowIndex) => cols?.length > 0 ? (jsx("div", { className: `flex ${rowIndex} ${rowIndex === 0 ? 'text-secondary-text' : ''} last:mr-3`, children: cols.map((data, i) => (jsx("div", { className: `w-20 text-h6 mr-lg first:ml-3xl`, children: data }, String(i)))) })) : null;
 
     const InnerTableBody = JSX(({ activeTabIndex, items }) => {
         const [hiddenTables, setHiddenTables] = useState({});
@@ -4718,7 +4767,7 @@
             }) }));
     });
 
-    const InnerTableHeader = JSX(({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (jsxs("div", { className: "flex justify-between w-full pt-2.5 pb-3", children: [currencies && currencies.length > 1 ? (jsx("div", { className: "flex bg-secondary-light p-1.5 rounded-md", children: currencies.map((currency, idx) => (jsx("div", { className: `rounded-md text-xl font-light px-4 py-3 cursor-pointer ${idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'}`, onClick: () => setActiveTabIndex(idx), children: currency || idx + 1 }, currency))) })) : null, linkToPDF ? (jsx(Button, { href: linkToPDF, version: "secondary", target: "_blank", appendLeft: jsx(Icon, { name: "DocDownloadIcon", iconVersion: "color", className: "mr-0.5", width: "20", height: "20" }), text: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })) : null] })));
+    const InnerTableHeader = JSX(({ currencies, linkToPDF, activeTabIndex, setActiveTabIndex }) => (jsxs("div", { className: "flex justify-between w-full px-s", children: [currencies && currencies.length > 1 ? (jsx("div", { className: "flex bg-secondary-light p-2xs rounded-md", children: currencies.map((currency, idx) => (jsx("div", { className: `rounded-md text-xl font-light px-m py-s cursor-pointer ${idx === activeTabIndex ? 'bg-primary-main text-white' : 'text-secondary-text'}`, onClick: () => setActiveTabIndex(idx), children: currency || idx + 1 }, currency))) })) : null, linkToPDF ? (jsx(Button, { href: linkToPDF, version: "secondary", target: "_blank", appendLeft: jsx(Icon, { name: "DocDownloadIcon", iconVersion: "color", className: "mr-3xs", width: "20", height: "20" }), text: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C \u0432 PDF" })) : null] })));
 
     function useTariffsInnerTableData(directoryName) {
         const { data } = useAsyncData(tariffsInnerTableDataUrl(directoryName), fetchTariffsInnerTableData);
@@ -4750,7 +4799,7 @@
         const [openTableInnerIdx, setOpenTableInnerIdx] = useState(undefined);
         const handleOpenTableInnerIdx = useCallback((_) => setOpenTableInnerIdx(_), []);
         const onHideContentClick = () => setTableInner(undefined);
-        return (jsxs(TariffsTableRowContainer, { onHideContentClick: onHideContentClick, tableInner: tableInner, ...rest, children: [jsx("div", { className: `text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`, children: jsxs("div", { className: "flex items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(Img, { className: "mr-3.5 max-w-6", image: header.icon, width: "24", height: "24" })) : null, header?.title ? jsx("div", { className: "text-m font-light", children: header?.title }) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, rowIdx: rowIdx, cellIdx: i, setTableInner: handleSetTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: handleOpenTableInnerIdx, ...rest }, String(i)))) })) : null] }));
+        return (jsxs(TariffsTableRowContainer, { onHideContentClick: onHideContentClick, tableInner: tableInner, ...rest, children: [jsx("div", { className: `text-s py-lg ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES}`, children: jsxs("div", { className: "flex items-center text-primary-text", role: "cell", children: [header?.icon ? (jsx(Img, { className: "mr-m max-w-6", image: header.icon, width: "24", height: "24" })) : null, header?.title ? jsx("div", { className: "text-m font-light", children: header?.title }) : null] }) }), data?.length ? (jsx(TableCarouselContainer, { activeIndex: activeIndex, columnWidth: COLUMN_WIDTH$1, version: "tariff", children: data.map((cells, i) => (jsx(TariffsTableCell, { cells: cells, rowIdx: rowIdx, cellIdx: i, setTableInner: handleSetTableInner, tableInner: tableInner, openTableInnerIdx: openTableInnerIdx, setOpenTableInnerIdx: handleOpenTableInnerIdx, ...rest }, String(i)))) })) : null] }));
     });
 
     const TariffsTable = JSX(({ className = '', title, description, rowHeaders, tariffsColumns: columns, hiddenRowsNum = 0, ...rest }) => {
@@ -4766,21 +4815,15 @@
         });
         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, []];
-        return (jsxs(BlockWrapper, { className: style('overflow-hidden relative', className), defaultPadding: style('p-default', itemCount > 1 ? 'pr-0' : ''), ...rest, children: [renderTitle({ title, description }), renderDescription$1(description), hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(Wrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(Wrapper, { controls: controls, children: rows }))] }));
+        return (jsxs(BlockWrapper, { className: style('overflow-hidden relative space-y-xl', className), defaultPadding: "p-6xl", ...rest, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", isPadding: false }), hiddenRowsNum > 0 ? (jsx(Foldable, { renderFoldableSection: ({ isUnfolded }) => (jsxs(Wrapper, { controls: controls, children: [visibleRows, jsx(FoldableSection, { isUnfolded: isUnfolded, children: hiddenRows })] })), renderFoldButton: renderDefaultFoldButton })) : (jsx(Wrapper, { controls: controls, children: rows }))] }));
     });
-    function renderTitle({ title, description }) {
-        return title ? (jsx(Heading, { headingType: "h3", className: `text-center ${description ? 'mb-2.5' : 'mb-8'}`, title: title })) : null;
-    }
-    function renderDescription$1(description) {
-        return description ? jsx("div", { className: "mb-9 text-center text-l", children: description }) : null;
-    }
     const Wrapper = JSX(({ children, controls }) => {
         const { isScrollAvailable } = controls;
         return (jsxs("div", { role: "table", children: [jsxs("div", { className: "relative", children: [children, renderArrows({
                             ...controls,
-                            btnClass: ['top-[108px]', 'top-[44px]'],
+                            btnClass: ['top-28', 'top-11'],
                             className: 'right-7',
-                        })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
+                        })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-20 bg-opacity-to-white" })) : null] }));
     });
 
     const TextBlock = JSX(({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => (jsxs(BlockWrapper, { className: style('flex gap-3 sm:gap-4 bg-white group-data-secondary:bg-primary-main/10', className), ...rest, children: [iconVersion === 'small' ? jsx("div", { className: "mt-1", children: renderIcon() }) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "flex flex-col w-fit gap-1 sm:gap-2", 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, items?.length ? renderList(items, true) : null, __html ? jsx(RichText, { __html: __html }) : null] })] })));
@@ -4792,23 +4835,20 @@
         return (jsx("ul", { className: style('text-secondary-text group-data-secondary:text-white/80', listStyle), children: items.map((_, i) => (jsx("li", { children: jsx(Text, { size: "text-s", font: "font-light", children: _ }) }, `listItem-${i}`))) }));
     };
 
-    const Tile = JSX(({ className, padding, headlineVersion = 'S', listItemSize = 'M', ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-m", padding: padding, headlineVersion: headlineVersion, listItemSize: listItemSize, ...rest }) })));
+    const Tile = JSX(({ className, padding, headlineVersion = 'S', listItemSize = 'M', ...rest }) => (jsx(BlockWrapper, { className: className, padding: "p-0", ...rest, children: jsx(BaseProductTile, { className: "h-full", defaultPadding: "p-xl", padding: padding, headlineVersion: headlineVersion, listItemSize: listItemSize, ...rest }) })));
 
-    const alignStyle = {
-        stretch: 'items-stretch',
-        left: 'items-start',
-        center: 'items-center',
-        right: 'items-end',
-    };
-    const VerticalLayout = JSX(({ className = '', gap = '', align = 'stretch', isPadding = false, isInnerPadding = true, version = 'transparent', isTheme = false, ...rest }) => {
-        const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
-        return (jsx(BlockWrapper, { className: style('relative', 'flex flex-col [&>*]:max-w-full', gapStyles[gap], align && alignStyle[align], className), defaultPadding: isPadding ? 'p-default' : '', version: version, isTheme: isTheme, ...rest, children: renderChildren({
-                ...rest,
-                renderProps: (block, options) => renderBlock$1(block, options, { className: innerPaddingStyle }),
-            }) }));
-    });
+    const VerticalLayout = JSX(({ className = '', gap = '', isPadding = false, isInnerPadding = true, version = 'transparent', isTheme = false, ...rest }) => (jsx(BlockWrapper, { className: style('relative flex flex-col', gapStyles[gap], className), defaultPadding: isPadding ? 'p-6xl' : '', version: version, isTheme: isTheme, ...rest, children: renderChildren({
+            ...rest,
+            extraProps: { className: 'w-full', padding: isInnerPadding ? '' : 'p-0' },
+        }) })));
     VerticalLayout.childrenTypes = [];
 
+    const getColSpan = (className) => {
+        const colSpanPrefix = 'col-span-';
+        const colSpanStr = className?.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
+        return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
+    };
+
     const MIN_COL_SPAN = 10;
     const getPaddings = (className) => getColSpan(className) < MIN_COL_SPAN ? 'py-6 px-11' : 'py-12 px-32';
 
@@ -4878,6 +4918,52 @@
         ExchangeRateOffice,
     };
 
+    const STORAGE_DEFAULT_TTL = 86400000; // 24 * 60 * 60 * 1000
+    function useCachedAsyncData(key, fetcher, storage = globalThis?.localStorage) {
+        const cachedFetcher = useCallback(async (...args) => {
+            const storageKey = `async:${key}`;
+            const storageData = storage.getItem(storageKey);
+            const cachedData = getParsedData(storageData);
+            if (cachedData) {
+                return cachedData;
+            }
+            const data = await fetcher(...args);
+            storage.setItem(storageKey, JSON.stringify({ data, timestamp: Date.now() }));
+            return data;
+        }, [key, fetcher]);
+        return useAsyncData(key, cachedFetcher);
+    }
+    function getParsedData(storageData) {
+        const { data = null, timestamp = null } = storageData ? JSON.parse(storageData) : {};
+        return data && Date.now() - timestamp < STORAGE_DEFAULT_TTL ? data : undefined;
+    }
+
+    const REGION_URL = '/api/v1/region';
+    function useLocation(defaultLocation = 'Москва') {
+        const currentLocation = getLocalStorageLocation();
+        const [location, setLocation] = useState(currentLocation?.region ?? { name: defaultLocation });
+        const { data } = useCachedAsyncData(REGION_URL, fetchJSONUnsafe);
+        useEffect(() => {
+            setLocation(currentLocation?.region && currentLocation?.manual
+                ? currentLocation.region
+                : data || { name: defaultLocation });
+        }, [data]);
+        const onChangeLocation = useCallback((region) => {
+            globalThis.localStorage?.setItem('location', JSON.stringify({ manual: true, region }));
+            setLocation(region);
+        }, []);
+        return [location, onChangeLocation];
+    }
+    const getLocalStorageLocation = () => {
+        const localStorageLocation = globalThis.localStorage?.getItem('location');
+        try {
+            return localStorageLocation ? JSON.parse(localStorageLocation) : null;
+        }
+        catch (_) {
+            return null;
+        }
+    };
+
     const debounce = (fn, delay = 600) => {
         let timerId;
         const debouncedCallback = (...args) => {
@@ -4991,9 +5077,8 @@
         return (jsxs("div", { className: `border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${className}`, children: [jsx(LikeButton, { onClick: handlerDecorator(likeService.like), ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u043B\u0430\u0439\u043A\u00BB" }), jsx(LikeButton, { onClick: handlerDecorator(likeService.dislike), className: "rotate-180", ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u0434\u0438\u0437\u043B\u0430\u0439\u043A\u00BB" }), jsx("span", { className: "select-none", children: likeService.likeCount })] }));
     });
 
-    const ContentPage = JSX((props) => {
-        const { className = '', blocksRegistry, blockDecorator, data = {} } = props;
-        const { style: pageStyle, blocks, slots, likeControl, colorPalette = 'pc' } = data;
+    const ContentPage = JSX(({ className, blocksRegistry, blockDecorator, data = {} }) => {
+        const { style: pageStyle, slots, likeControl, colorPalette = 'pc' } = data;
         const options = {
             key: '',
             page: data,
@@ -5001,6 +5086,8 @@
             blockDecorator,
             parent: data,
         };
+        const sitemap = useSWRResource(projectSettings.SITEMAP || 'sitemap', data?.fallback);
+        const [location, onChangeLocation] = useLocation(sitemap?.defaultLocation);
         useBlockRouterProvider();
         const [isSomeDialogOpened, { setTrue: setSomeDialogOpened, setFalse: resetSomeDialogOpened }] = useBool();
         useDialogHandlers({
@@ -5010,20 +5097,20 @@
         return (jsxs("section", { className: style('relative', pageStyle, className, isSomeDialogOpened ? 'overflow-hidden h-screen' : ''), "data-theme": colorPalette, children: [slots?.header ? (jsx("div", { className: "mb-5 shadow-[0_8px_32px_0px_#00000014]", children: renderBlocksList(slots?.header, {
                         ...options,
                         slotName: 'header',
-                    }) })) : null, jsxs("div", { className: "container grid grid-cols-12 gap-1", children: [renderBlocksList(blocks, options), slots?.footer
-                            ? renderBlocksList(slots?.footer, {
-                                ...options,
-                                slotName: 'footer',
-                            })
-                            : null] }), likeControl ? renderLikeControl() : null, jsx(CookiePopup, { termLink: { href: '/pd-policy#cookie', target: '_blank' }, personalDataPolicyLink: { href: '/pd-policy', target: '_blank' } })] }));
+                        extraProps: { sitemap, location },
+                    }) })) : null, jsxs("div", { className: "container grid grid-cols-12 gap-1", children: [renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } }), renderBlocksList(slots?.footer, {
+                            ...options,
+                            slotName: 'footer',
+                            extraProps: { sitemap, location },
+                        })] }), likeControl ? renderLikeControl() : null, jsx(CookiePopup, { termLink: { href: '/pd-policy#cookie', target: '_blank' }, personalDataPolicyLink: { href: '/pd-policy', target: '_blank' } }), jsx(SearchDialog, { topItems: sitemap?.topItems }), jsx(LocationDialog, { currentLocation: location, foreignOffices: sitemap?.foreignOffices, onChangeLocation: onChangeLocation })] }));
     });
     ContentPage.childrenTypes = [];
     ContentPage.slots = () => ['header', 'footer'];
     function renderLikeControl() {
-        return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
+        return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-3xl sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.12.10";
+    const packageVersion = "0.12.12";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;