@redneckz/wildless-cms-uni-blocks 0.12.9 → 0.12.11

package/mobile/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);
@@ -630,7 +630,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;
@@ -695,7 +695,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 })] })));
@@ -806,7 +806,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);
@@ -979,7 +979,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)))) }));
@@ -1112,7 +1112,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: '',
@@ -1145,13 +1145,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 = {
@@ -1170,7 +1170,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 = {
@@ -1189,17 +1189,17 @@
 
     const defaultIconSize = 56;
 
-    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$3(benefit.description)] })) : null] }, String(i)));
+    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;
     };
 
@@ -1208,25 +1208,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' },
@@ -1256,7 +1256,7 @@
     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 mapChildren = (mapper) => (children) => {
@@ -1436,11 +1436,11 @@
 
     const renderBonusBenefits = (bonusBenefits, _columnsCount, _cardTextAlign) => (jsx(SwipeListControl, { children: bonusBenefits.map((_, i) => renderBonusBenefit({ ..._ }, i)) }));
 
-    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)
                 : 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$1(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$1(buttonClassName)) })) : null;
     const renderButton$1 = (buttonClassName = '') => (button, index) => {
         const { text, icon, iconRight, version, ...rest } = button || {};
         const iconVersionDefault = version === 'secondary' ? 'color' : 'white';
@@ -1482,7 +1482,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 });
@@ -1621,10 +1621,10 @@
         'CarouselInvestmentCard',
         'CarouselEventCard',
     ];
-    const getPaddingStyle$1 = (isPadding) => (isPadding ? 'p-default' : '');
+    const getPaddingStyle$1 = (isPadding) => (isPadding ? 'p-6xl' : '');
     const getAlignStyle = (isAlignCenter) => isAlignCenter ? 'flex justify-center' : '';
 
-    const CarouselBankHistoryCard = JSX(({ title, description, className }) => (jsx(BlockWrapper, { className: style(className), defaultPadding: "p-default", children: jsx(Headline, { headlineVersion: "S", title: title, description: description, align: "text-left", className: "text-primary-text", isPadding: false }) })));
+    const CarouselBankHistoryCard = JSX(({ title, description, className }) => (jsx(BlockWrapper, { className: style(className), defaultPadding: "p-6xl", children: jsx(Headline, { headlineVersion: "S", title: title, description: description, align: "text-left", className: "text-primary-text", isPadding: false }) })));
 
     const LinkWrapper = JSX(({ className = '', href, target, isRemote = false, children }) => {
         const link = useLink({ isRemote });
@@ -1637,14 +1637,14 @@
     const cardDescriptionColor = '';
 
     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] })] }) }));
+        return (jsx(BlockWrapper, { className: style('border border-gray', 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: "min-w-[200px] flex justify-center", 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-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 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 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 })] })));
 
@@ -1654,11 +1654,11 @@
         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 buttonSizeStyles = {
         default: 'w-24 h-14',
@@ -1716,7 +1716,7 @@
     const BORDER_STYLE = 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
 
     const CarouselRecommendationCard = JSX(({ className = '', description, href, icon, items = [], socialMedia = [], target, title, align = 'text-left', ...rest }) => {
-        return (jsx(BlockWrapper, { className: style('relative box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), defaultPadding: "p-default", ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-2", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), items.length ? (jsx(List, { className: "flex flex-col gap-2", items: items, listItemSize: "S" })) : null, renderIcon$1(icon), socialMedia.length ? jsx(SocialMedia, { className: "mt-5", media: socialMedia }) : null] }) }));
+        return (jsx(BlockWrapper, { className: style('relative box-border group-data-gray:bg-main-divider/50', BORDER_STYLE, className), defaultPadding: "p-6xl", ...rest, children: jsxs(LinkWrapper, { href: href, target: target, children: [jsx(Headline, { className: "mb-xs", title: title, description: description, headlineVersion: "S", isPadding: false, align: align }), items.length ? (jsx(List, { className: "flex flex-col gap-2", items: items, listItemSize: "S" })) : null, renderIcon$1(icon), socialMedia.length ? jsx(SocialMedia, { className: "mt-5", media: socialMedia }) : null] }) }));
     });
     const renderIcon$1 = (icon) => icon?.src || icon?.icon ? (jsx("div", { children: jsx(Img, { image: icon }) })) : null;
 
@@ -1742,7 +1742,7 @@
         return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} ${className}`, children: children }));
     });
 
-    const getPaddingStyle = (isHighlighting = false) => isHighlighting ? 'p-default mt-6' : 'mt-6 p-default'; // Хак для мобильной версии т.к. контракт должен быть идентичный
+    const getPaddingStyle = (isHighlighting = false) => isHighlighting ? 'p-6xl mt-6' : 'mt-6 p-6xl'; // Хак для мобильной версии т.к. контракт должен быть идентичный
 
     const renderCardInfo = (cell, i) => {
         const { title, description, buttons } = cell;
@@ -1782,8 +1782,8 @@
 
     const titleSize = 'XS';
 
-    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], {
+    const BLOCK_CLASSES = 'absolute border border-solid border-gray w-full h-full hidden sm:block';
+    const CarouselCard = JSX(({ className = '', button, description, title, carouselVersion = 'normal', version = '' }) => (jsx("section", { className: style('flex pl-6xl sm:p-lg 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',
                             isVertical: true,
                         })] })] }) })));
@@ -1792,27 +1792,29 @@
         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('border box-border border-gray p-6xl sm:p-7 h-full flex flex-col justify-left gap-m', className), ...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 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$2(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-left';
+
+    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('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-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$2 = (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 GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
     const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
 
     const headingStyle = (isFillGradient = false) => (isFillGradient ? 'text-white' : '');
-    const subtitleStyle = (isFillGradient = false) => `text-s mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`;
-    const HeaderCell = JSX(({ icon, image, title, subtitle, isFillGradient }) => (jsxs("div", { role: "columnheader", children: [icon ? (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })) : null, image?.src && (jsx("div", { className: "mb-3.5", children: jsx(Img, { image: image }) })), title ? (jsx(Heading, { headingType: "h4", className: headingStyle(isFillGradient), title: title })) : null, subtitle ? jsx("div", { className: subtitleStyle(isFillGradient), children: subtitle }) : null] })));
+    const subtitleStyle = (isFillGradient = false) => `text-s mb-m ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`;
+    const HeaderCell = JSX(({ icon, image, title, subtitle, isFillGradient }) => (jsxs("div", { className: "space-y-4", role: "columnheader", children: [icon ? (jsx(Img, { className: "h-16 w-16 min-w-16 min-h-16", image: icon, width: "64", height: "64" })) : null, image?.src && (jsx("div", { children: jsx(Img, { image: image }) })), title ? (jsx(Heading, { headingType: "h4", className: headingStyle(isFillGradient), title: title })) : null, subtitle ? jsx("div", { className: subtitleStyle(isFillGradient), children: subtitle }) : null] })));
 
     const TableCell = JSX(({ cell, rowHeader, isFillGradient = false }) => {
         const cellWrapperClasses = `box-border flex flex-col`;
@@ -1825,9 +1827,9 @@
         const columnDataView = columnData?.slice(0, showRow ? columnData.length : visibleRowLength);
         const gradientClassName = isFillGradient ? GRADIENT : '';
         const buttonVersion = isFillGradient ? 'secondary' : 'primary';
-        return (jsxs("div", { className: `border border-gray rounded-md p-4 mb-3.5 ${gradientClassName}`, role: "row", children: [jsx(HeaderCell, { ...header, isFillGradient: isFillGradient }), columnDataView?.length
+        return (jsxs("div", { className: `border border-gray rounded-md p-m mb-m ${gradientClassName}`, role: "row", children: [jsx(HeaderCell, { ...header, isFillGradient: isFillGradient }), columnDataView?.length
                     ? columnDataView.map(({ rowHeader, cell }, i) => (jsx(TableCell, { cell: cell, rowHeader: rowHeader, isFillGradient: isFillGradient }, String(i))))
-                    : null, showRow && header?.link ? (jsx(Button, { href: header.link.href, target: header.link.target, version: buttonVersion, className: "text-s font-medium mt-4 py-[11px]", children: header.link.text })) : null, renderToggleButton({ onToggleColumn, isFillGradient, showRow })] }));
+                    : null, showRow && header?.link ? (jsx(Button, { href: header.link.href, target: header.link.target, version: buttonVersion, className: "text-s font-medium mt-m py-s", children: header.link.text })) : null, renderToggleButton({ onToggleColumn, isFillGradient, showRow })] }));
     });
     const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow, }) => (jsx("div", { className: "mt-5", role: "cell", children: jsx("a", { role: "link", onClick: onToggleColumn, className: `text-s font-medium cursor-pointer ${isFillGradient ? 'text-white/80' : 'text-primary-main'}`, children: !showRow ? 'Показать описание' : 'Скрыть' }) }));
 
@@ -1906,12 +1908,12 @@
         })) : (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(labelIcon, labelIconBgVersion), 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(labelIcon, labelIconBgVersion), 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 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':
@@ -1946,7 +1948,7 @@
         const fallback = rest.options?.page?.fallback;
         const sitemap = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
         const { relatedEnterprises, contacts, socialMedia, mobileApps, horizontalNavigationTitle } = useSWRResource(projectSettings.FOOTER || 'footer', fallback);
-        return (jsxs(BlockWrapper, { tag: "footer", className: className, defaultPadding: "px-4 py-6", ...rest, children: [jsx("div", { className: "mb-4 pb-5 border-b border-main-divider", children: sitemap.topItems?.map((item, i) => (jsx(RollupItem, { label: item?.text, labelIcon: item?.icon, children: jsx(LinkList, { items: item.items, className: "my-3" }) }, String(i)))) }), jsx(Contacts, { className: "overflow-hidden", items: contacts }), jsx(SocialMedia, { className: "mb-4", media: socialMedia }), mobileApps?.map(renderButton), jsx(HorizontalNavigation, { className: "pt-4 pb-7 border-y border-main-divider", title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, {})] }));
+        return (jsxs(BlockWrapper, { tag: "footer", className: className, defaultPadding: "px-4 py-6", ...rest, children: [jsx("div", { className: "mb-4 pb-5 border-b border-main-divider", children: sitemap.topItems?.map((item, i) => (jsx(RollupItem, { label: item?.text, labelIcon: item?.icon, children: jsx(LinkList, { items: item.items, className: "my-3" }) }, String(i)))) }), jsx(Contacts, { className: "overflow-hidden", items: contacts }), jsx(SocialMedia, { className: "mb-4", media: socialMedia }), mobileApps?.map(renderButton), jsx(HorizontalNavigation, { className: "pt-m pb-2xl border-y border-main-divider", title: horizontalNavigationTitle, links: relatedEnterprises }), jsx(TextInformation, {})] }));
     });
     const renderButton = ({ href = '/' }, i) => {
         const { label } = findIconByHref(href);
@@ -1973,7 +1975,7 @@
         transparent: 'text-white',
     };
     const renderTitle = (title, bgColor, className) => {
-        return (jsx("span", { className: `${TEXT_COLOR[bgColor]} ml-2.5 font-medium ${className || ''}`, children: title || 'Россельхозбанк' }));
+        return (jsx("span", { className: `${TEXT_COLOR[bgColor]} ml-s font-medium ${className || ''}`, children: title || 'Россельхозбанк' }));
     };
 
     const Logo = JSX(({ bgColor = 'bg-white', children, className = '', href, logo, showTitle = true, targetBlank, }) => {
@@ -2003,7 +2005,7 @@
     const Header = JSX(({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
         const fallback = rest.options?.page?.fallback;
         const { logo, internetBankUrl } = useSWRResource(projectSettings.SITEMAP || 'sitemap', fallback);
-        return (jsx(BlockWrapper, { tag: "header", defaultPadding: "", version: version, ...rest, children: jsx("div", { className: "container px-4 py-1 box-border", children: jsx(HeaderTop, { bgColor: bgColor, logo: logo, internetBankUrl: internetBankUrl, version: version, ...rest }) }) }));
+        return (jsx(BlockWrapper, { tag: "header", defaultPadding: "", version: version, ...rest, children: jsx("div", { className: "container px-4 py-2xs box-border", children: jsx(HeaderTop, { bgColor: bgColor, logo: logo, internetBankUrl: internetBankUrl, version: version, ...rest }) }) }));
     });
 
     const ImgBlock = JSX((props) => {
@@ -2011,6 +2013,16 @@
         return (jsx(BlockWrapper, { className: className, defaultPadding: "p-0", ...rest, children: jsx(Img, { image: image }) }));
     });
 
+    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] })));
     const formatSuffix = (ext, fileSize) => {
         const prefix = ext || fileSize ? ',' : '';
@@ -2034,13 +2046,16 @@
     };
     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, { 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] }));
     });
     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, { ...docBlockDef, href: href, fileSize: fileSize, icon: icon ? jsx(Img, { className: linkIconStyle, image: icon, width: "24", height: "24" }) : null }) }, String(i)));
     };
 
     /**
@@ -2057,18 +2072,18 @@
         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: [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-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 }), buttons] }), renderImageContainer(rightImage, { className: '-order-1 sm:order-1', imageAlign })] })] })));
     const renderImageContainer = (image, { className, imageAlign }) => image ? (jsx("div", { className: style('flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className), children: image })) : null;
 
-    const renderDescription$1 = (description) => description ? (jsx("div", { className: "mb-5 pt-0.5 sm:mb-0 sm:pt-0", children: jsx(Text, { size: "text-xl", "font-weight": "light", children: description }) })) : null;
+    const 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, backImage: image?.src ? jsx(Img, { image: image }) : null, buttons: renderButtonsSection(buttons, { isVertical: buttons.length > 3 }), children: [renderDescription$1(description), jsxs("div", { className: "flex flex-1 gap-s items-center", children: [qr?.src ? (jsx("div", { className: style('flex justify-center bg-white rounded-md', containerStyle), children: jsx(Img, { className: "w-fit", image: qr }) })) : null, renderList$1(items)] })] }) }));
+        const containerStyle = version === 'secondary' ? 'p-m 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-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 sum = (list = []) => list.reduce((a, b) => a + b, 0);
@@ -2095,7 +2110,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'
@@ -2114,21 +2129,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) {
@@ -2141,7 +2156,7 @@
                         } }) }), 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 })] })));
 
@@ -2174,10 +2189,10 @@
     };
     const STEPS_TILE_DESCRIPTION_HEIGHT_MAP = {
         normal: '',
-        small: 'min-h-12',
+        small: 'min-h-6xl',
     };
     const styleMap = STEPS_BLOCK_STYLE;
-    const StepsBlock = JSX(({ className = '', title, description, steps, buttons, size = 'normal', version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border flex flex-col gap-2', className), defaultPadding: "p-default", version: version, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "text-left", title: title }) : null, description ? (jsx(Paragraph, { size: "text-xl", font: "font-light", children: jsx("span", { className: styleMap.description, children: description }) })) : null, steps?.length ? (jsx("div", { className: "box-border", children: jsx("div", { className: "flex flex-col justify-between", children: steps.map(renderStep(size, version)) }) })) : null, renderButtonsSection(buttons, { className: 'mt-3', isVertical: true })] })));
+    const StepsBlock = JSX(({ className = '', title, description, steps, buttons, size = 'normal', version = 'primary', ...rest }) => (jsxs(BlockWrapper, { className: style('box-border flex flex-col gap-xs', className), defaultPadding: "p-6xl", version: version, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "text-left", title: title }) : null, description ? (jsx(Paragraph, { size: "text-xl", font: "font-light", children: jsx("span", { className: styleMap.description, children: description }) })) : null, steps?.length ? (jsx("div", { className: "box-border", children: jsx("div", { className: "flex flex-col justify-between", children: steps.map(renderStep(size, version)) }) })) : null, renderButtonsSection(buttons, { className: 'mt-3', isVertical: true })] })));
     // TODO: Create universal function for this case
     const renderStep = (size, version) => 
     // Linter doesn't understand that switch processes all cases
@@ -2203,7 +2218,7 @@
         const isImg = Boolean(step?.icon?.src);
         const iconAreaSize = STEPS_SIZE_MAP[size][isImg ? 'image' : 'icon'];
         const containerStyle = isImg ? '' : `rounded-md ${styleMap.iconBackground}`;
-        return (jsx("div", { className: style(iconAreaSize, containerStyle, 'z-10 mr-3 flex justify-center content-center'), children: jsx("span", { className: "flex self-center text-h4 text-secondary-text group-data-secondary:text-white", children: checkCanRenderIcon(step?.icon) ? (jsx(Img, { image: { ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }, width: iconSize, height: iconSize })) : (jsx("span", { children: i + 1 })) }) }));
+        return (jsx("div", { className: style(iconAreaSize, containerStyle, 'z-10 mr-s flex justify-center content-center'), children: jsx("span", { className: "flex self-center text-h4 text-secondary-text group-data-secondary:text-white", children: checkCanRenderIcon(step?.icon) ? (jsx(Img, { image: { ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }, width: iconSize, height: iconSize })) : (jsx("span", { children: i + 1 })) }) }));
     };
 
     const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
@@ -2261,7 +2276,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) => {
@@ -2348,7 +2363,7 @@
         className: 'mt-3',
         buttonClassName: 'w-12 h-12',
     });
-    const renderLabelDescriptionCellData = ({ label, description }) => (jsxs("div", { children: [label ? jsx("div", { className: "mb-2", children: label }) : null, description ? jsx("div", { className: "text-s text-secondary-text", children: description }) : null] }));
+    const renderLabelDescriptionCellData = ({ label, description }) => (jsxs("div", { children: [label ? jsx("div", { className: "mb-xs", children: label }) : null, description ? jsx("div", { className: "text-s text-secondary-text", children: description }) : null] }));
     const renderImgCellData = ({ image }) => image?.src ? jsx(Img, { image: image, className: "m-0", imageClassName: "m-0" }) : null;
     const renderListCellData = ({ isDotted, ...rest }) => (jsx(List, { className: "flex flex-col justify-between items-start text-m pl-2 text-base", isDotted: isDotted ?? true, ...rest }));
     const EmbeddableCellData = {
@@ -2358,10 +2373,10 @@
         LabelDescription: renderLabelDescriptionCellData,
     };
 
-    const TableTileHeader = JSX(({ title, icon }) => (jsxs("div", { className: "mb-2", children: [title ? (jsx(Text, { size: "text-l", font: "font-light", children: title })) : null, icon ? jsx(Img, { className: "ml-auto min-w-6", image: icon, width: "24", height: "24" }) : null] })));
+    const TableTileHeader = JSX(({ title, icon }) => (jsxs("div", { className: "mb-xs", children: [title ? (jsx(Text, { size: "text-l", font: "font-light", children: title })) : null, icon ? jsx(Img, { className: "ml-auto min-w-6", image: icon, width: "24", height: "24" }) : null] })));
 
     const TariffsTableTileCell = JSX(({ tile, ...rest }) => (jsxs("div", { className: "h-full", children: [jsx(TableTileHeader, { title: tile?.header?.title }), tile?.data?.length
-                ? tile.data.map((cell, i) => (jsx("div", { className: "mb-2", children: renderCell(cell, rest) }, String(i))))
+                ? tile.data.map((cell, i) => (jsx("div", { className: "mb-xs", children: renderCell(cell, rest) }, String(i))))
                 : null] })));
     function renderCell(cell, props) {
         if (!cell || !cell.tableCellType || !(cell.tableCellType in EmbeddableCellData)) {
@@ -2378,7 +2393,7 @@
     const TariffsTable = JSX(({ className, title, description, tariffsColumns: columns, rowHeaders, orientation = 'vertical', ...rest }) => {
         const colData = getColData(columns);
         const tiles = getTiles(rowHeaders, colData);
-        return (jsxs("section", { className: `p-default bg-white font-sans text-primary-text overflow-x-hidden ${className}`, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", align: "text-left", isPadding: false, className: "mb-8" }), orientation === 'vertical' ? (jsx(TariffsTableVertical, { tiles: tiles, ...rest })) : (jsx(TariffsTableHorizontal, { tiles: tiles, ...rest }))] }));
+        return (jsxs("section", { className: `p-6xl space-3xl bg-white font-sans text-primary-text overflow-x-hidden ${className}`, children: [jsx(Headline, { title: title, description: description, headlineVersion: "M", align: "text-left", isPadding: false }), orientation === 'vertical' ? (jsx(TariffsTableVertical, { tiles: tiles, ...rest })) : (jsx(TariffsTableHorizontal, { tiles: tiles, ...rest }))] }));
     });
     const getColData = (columns) => columns?.[0]?.data ? columns[0].data : [];
     const getTiles = (rowHeaders, colData) => rowHeaders?.map((header, i) => ({
@@ -2396,12 +2411,12 @@
     };
 
     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',
         '': '',
     };
 
@@ -2413,7 +2428,7 @@
     };
     const VerticalLayout = JSX(({ className = '', gap = '', align = 'stretch', isPadding = false, isInnerPadding = true, version = 'transparent', isTheme = false, ...rest }) => {
         const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
-        return (jsx(BlockWrapper, { className: style('relative', 'flex flex-col [&>*]:max-w-full', gapStyles[gap], align && alignStyle[align], className), defaultPadding: isPadding ? 'p-default' : '', version: version, isTheme: isTheme, ...rest, children: renderChildren({
+        return (jsx(BlockWrapper, { className: style('relative', 'flex flex-col [&>*]:max-w-full', gapStyles[gap], align && alignStyle[align], className), defaultPadding: isPadding ? 'p-6xl' : '', version: version, isTheme: isTheme, ...rest, children: renderChildren({
                 ...rest,
                 renderProps: (block, options) => renderBlock(block, options, { className: innerPaddingStyle }),
             }) }));
@@ -2652,12 +2667,12 @@
     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 joinList = (sep) => (list) => list.reduce((acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]), []);
 
-    const packageVersion = "0.12.9";
+    const packageVersion = "0.12.11";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;