@redneckz/wildless-cms-uni-blocks 0.3.84 → 0.3.86

package/bundle/bundle.umd.js

@@ -200,19 +200,16 @@
   });
 
   const HEADING_STYLE_MAP = {
-      h1: 'text-title-xl tracking-[-0.3px]',
-      h2: 'text-title-lg',
-      h3: 'text-title',
-      h4: 'text-title-sm',
-      h5: 'text-title-xs',
-      h6: 'text-title-2xs tracking-[0.2px]',
+      h0: 'text-h0',
+      h1: 'text-h1',
+      h2: 'text-h2',
+      h3: 'text-h3',
+      h4: 'text-h4',
+      h5: 'text-h5',
+      h6: 'text-h6', // 20
   };
   const Heading = JSX((props) => {
-      const { className = '', headingType, title, as } = props;
-      if (!headingType) {
-          return;
-      }
-      const Tag = as || headingType;
+      const { className = '', headingType = 'h3', title, as: Tag = 'h3' } = props;
       return (jsx(Tag, { className: `font-sans m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`, children: title }));
   });
 
@@ -263,6 +260,7 @@
       IconMap["InterestGrowthIcon"] = "InterestGrowthIcon";
       IconMap["InterestIcon"] = "InterestIcon";
       IconMap["JCBIcon"] = "JCBIcon";
+      IconMap["Logo"] = "Logo";
       IconMap["LoupeIcon"] = "LoupeIcon";
       IconMap["MasterCardIcon"] = "MasterCardIcon";
       IconMap["MinusIcon"] = "MinusIcon";
@@ -345,6 +343,7 @@
       IconTitleMap["InterestGrowthIcon"] = "\u0414\u0438\u0430\u0433\u0440\u0430\u043C\u043C\u0430 \u0440\u043E\u0441\u0442\u0430";
       IconTitleMap["InterestIcon"] = "\u0421\u043A\u0438\u0434\u043A\u0430";
       IconTitleMap["JCBIcon"] = "JCB";
+      IconTitleMap["Logo"] = "Logo";
       IconTitleMap["LoupeIcon"] = "\u041B\u0443\u043F\u0430";
       IconTitleMap["MasterCardIcon"] = "MasterCard";
       IconTitleMap["MinusIcon"] = "\u041C\u0438\u043D\u0443\u0441";
@@ -431,34 +430,49 @@
       return typeof image === 'string' ? 'normal' : image.iconVersion || 'normal';
   }
 
-  const Img = JSX(({ className = '', image, imageClassName = '', ...iconProps }) => {
-      if (!image) {
-          return null;
+  const sourcesComparator = (a, b) => {
+      if (a.media && b.media) {
+          return a.media - b.media;
       }
-      // backwards compatibility with existing icons in usage
-      const icon = typeof image === 'string' ? image : image.icon;
-      if (icon || icon === '') {
-          return icon.length ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: getIconVersion(image), name: icon, ...iconProps })) : null;
-      }
-      return (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image }));
-  });
-  const ImgAsPicture = JSX(({ className = '', image, imageClassName = '' }) => {
+      return 0;
+  };
+  const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', isMobile = false }) => {
       if (!image) {
           return null;
       }
-      return (jsxs("picture", { className: `flex-none ${className}`, children: [image?.sources?.length
-                  ? image.sources.map(({ src, format, media, size }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format), media: media, ...size }, `${index}_${src}`)))
-                  : null, renderImg(image, imageClassName)] }));
+      const pictureStyles = isMobile ? 'flex' : 'flex-none';
+      return (jsxs("picture", { className: `${pictureStyles} ${className}`, children: [image?.sources?.length
+                  ? image.sources
+                      .sort(sourcesComparator)
+                      .map(({ src, format, media, size }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...size }, `${index}_${src}`)))
+                  : null, renderImg(image, imageClassName, isMobile)] }));
   });
-  const renderImg = (image, imageClassName = '') => {
+  const renderImg = (image, imageClassName = '', isMobile = false) => {
       const title = image.title || '';
       const alt = image.alt || image.title;
-      return jsx("img", { src: image.src, className: imageClassName, alt: alt, title: title, ...image.size });
+      const imgStyle = isMobile ? 'm-auto' : 'm-0';
+      return (jsx("img", { src: image.src, className: `${imgStyle} ${imageClassName}`, alt: alt, title: title, ...image.size }));
   };
   function formatToMimeType(format) {
       return format ? `image/${String(format)}` : undefined;
   }
 
+  const ImgInner = JSX(({ className = '', image, imageClassName = '', isMobile, ...iconProps }) => {
+      if (!image) {
+          return null;
+      }
+      // backwards compatibility with existing icons in usage
+      const icon = typeof image === 'string' ? image : image.icon;
+      if (icon || icon === '') {
+          return icon.length ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: getIconVersion(image), name: icon, ...iconProps })) : null;
+      }
+      return (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile }));
+  });
+
+  const Img = JSX(({ className = '', imageClassName, image, ...iconProps }) => {
+      return (jsx(ImgInner, { className: className, imageClassName: imageClassName, image: image, ...iconProps }));
+  });
+
   function style2className(style) {
       return style ? style.filter(Boolean).join(' ') : '';
   }
@@ -485,10 +499,48 @@
           description: 'text-white/80',
       },
   };
+  const HEADLINE_VERSION = {
+      XXL: {
+          descriptionFont: 'text-h4-alt',
+          gap: 'gap-[18px]',
+          headingType: 'h0',
+          as: 'h1',
+      },
+      XL: {
+          descriptionFont: 'text-xl-light',
+          gap: 'gap-4',
+          headingType: 'h1',
+          as: 'h1',
+      },
+      L: {
+          descriptionFont: 'text-xl-light',
+          gap: 'gap-4',
+          headingType: 'h2',
+          as: 'h2',
+      },
+      M: {
+          descriptionFont: 'text-xl-light',
+          gap: 'gap-3',
+          headingType: 'h3',
+          as: 'h3',
+      },
+      S: {
+          descriptionFont: 'text-xl-light',
+          gap: 'gap-2',
+          headingType: 'h4',
+          as: 'h4',
+      },
+  };
 
-  const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description, headingType = 'h2', ...rest }) => {
+  const Description = JSX((props) => {
+      const { className = '', description } = props;
+      return jsx("div", { className: `${className}`, children: description });
+  });
+
+  const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description, headlineVersion = 'XL', ...rest }) => {
       const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
-      return (jsxs(BlockWrapper, { className: `p-[50px] flex flex-col gap-4 ${STYLE_MAPS.background} ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: headingType, className: `text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx("p", { className: `text-base ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, children: description })) : null] }));
+      const SIZE_MAPS = HEADLINE_VERSION[headlineVersion];
+      return (jsxs(BlockWrapper, { className: `font-sans flex flex-col p-[50px] ${SIZE_MAPS.gap} ${STYLE_MAPS.background} ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: SIZE_MAPS?.headingType, as: SIZE_MAPS?.as, className: `whitespace-pre-wrap ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx(Description, { className: `${SIZE_MAPS.descriptionFont} ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, description: description })) : null] }));
   });
 
   const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
@@ -519,8 +571,8 @@
       double: 'flex gap-x-5 gap-y-[26px] flex-wrap',
       single: 'flex gap-3.5 flex-col',
   };
-  const LinkDocs = JSX(({ context, className = '', title, description, align = 'center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => {
-      return (jsxs(BlockWrapper, { context: context, className: `font-sans text-primary-text p-[50px] bg-white ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, context: context, align: align, headingType: "h3" }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] }));
+  const LinkDocs = JSX(({ context, className = '', title, description, align = 'center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', headlineVersion = 'M', ...rest }) => {
+      return (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-[50px] bg-white ${className}`, context: context, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, context: context, align: align, headlineVersion: headlineVersion }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] }));
   });
 
   const pictureTextStyleMap = {
@@ -553,13 +605,15 @@
       const hashIndex = href.indexOf('#');
       return hashIndex !== -1 ? href.substring(hashIndex, href.length) : undefined;
   };
+  const isHash = (href) => href?.startsWith('#');
 
   var url = /*#__PURE__*/Object.freeze({
     __proto__: null,
     isURL: isURL,
     withoutQuery: withoutQuery,
     getOrigin: getOrigin,
-    getHash: getHash
+    getHash: getHash,
+    isHash: isHash
   });
 
   const MOBILE_URL_PATH = '/mobile';
@@ -592,7 +646,7 @@
               const isLocalHref = href && !isURL(href);
               const isLocalTarget = !link.target || link.target === '_self';
               if (isLocalHref && isLocalTarget) {
-                  ev.preventDefault();
+                  ev?.preventDefault();
                   router.push(href);
               }
           }, link),
@@ -614,14 +668,14 @@
 
   const ButtonInner = JSX((props) => {
       const { text, aboveText, appendLeft, appendRight } = props;
-      return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-m-2xs font-light text-left", children: aboveText }), jsx("div", { className: "text-base text-left", children: text })] })) : null, appendRight ? appendRight : null] }));
+      return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-xs text-left", children: aboveText }), jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-0.5' : 'text-base'}`, children: text })] })) : null, appendRight ? appendRight : null] }));
   });
   const getButtonStyle = (props) => {
       const { version, aboveText, rounded } = props;
       if (version === 'link') {
           return '';
       }
-      const withTextStyle = `px-9 gap-2 ${aboveText ? 'py-2' : 'py-4'}`;
+      const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-9'}`;
       return [
           'flex items-center justify-center',
           isWithText(props) ? withTextStyle : 'h-12 w-12',
@@ -650,26 +704,21 @@
       return (jsx("a", { className: `${buttonStyle} inline-block cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: href ? 'link' : 'button', ...rest, children: children }));
   });
   const DisabledButton = JSX(({ className, children, ariaLabel, version = 'none', rounded }) => {
-      return (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: "-1", className: `inline-block ${buttonStyle} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: children }));
+      return (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: -1, className: `inline-block ${buttonStyle} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: children }));
   });
 
   const ButtonSection = JSX(({ context, className = '', buttons }) => {
       const { handlerDecorator } = context;
       const router = context.useRouter();
-      return buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => renderButton$2(useLink({ router, handlerDecorator }, button), index)) })) : null;
+      return buttons && buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => renderButton$2(useLink({ router, handlerDecorator }, button), index)) })) : null;
   });
   function renderButton$2({ icon, iconRight, ...button }, i) {
       if (!button?.text) {
-          return;
+          return null;
       }
       return icon ? (jsx(Button, { appendLeft: jsx(Img, { image: icon, width: "24", height: "24", asSVG: true }), appendRight: jsx(Img, { image: iconRight, width: "24", height: "24", asSVG: true }), ...button }, String(i))) : (jsx(Button, { ...button }, String(i)));
   }
 
-  const Description = JSX((props) => {
-      const { className = '', description } = props;
-      return jsx("div", { className: `font-normal text-base ${className}`, children: description });
-  });
-
   const LIST_STYLE_CLASSES = {
       primary: 'rounded-full inline-block mr-3 mt-2',
       secondary: 'rounded-full inline-block mr-3 mt-2',
@@ -712,7 +761,7 @@
               : null }));
   });
 
-  const BaseTile = JSX(({ className = '', title, children, buttons, image }) => {
+  const BaseTile = JSX(({ className = '', title = '', children, buttons, image }) => {
       return (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { children: children }), buttons ? jsx("div", { children: buttons }) : null] }), image] })] }));
   });
 
@@ -726,7 +775,7 @@
   };
   function renderBenefit$1({ benefit, version = 'primary', benefitsVersion = 'normal' }, i) {
       const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
-      return (jsxs("div", { className: "flex gap-4 items-center", children: [benefit.icon ? (jsx(Img, { className: renderBenefitIconBgStyle(version, benefitsVersion), image: { ...benefit?.icon, iconVersion: isIconWhite ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true })) : null, jsxs("div", { className: "flex gap-0.5 flex-col h-full max-w-[149px] min-w-[149px]", children: [jsx("div", { className: `text-xl-light m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description ? (jsx("div", { className: `font-light text-m-md ${benefitDescStyleMap[version]}`, children: benefit.description })) : null] })] }, String(i)));
+      return (jsxs("div", { className: "flex gap-4 items-center", children: [benefit.icon ? (jsx(Img, { className: renderBenefitIconBgStyle(version, benefitsVersion), image: { ...benefit?.icon, iconVersion: isIconWhite ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true })) : null, jsxs("div", { className: "flex gap-0.5 flex-col h-full max-w-[149px] min-w-[149px]", children: [jsx("div", { className: `text-h6 m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description ? (jsx("div", { className: `text-m ${benefitDescStyleMap[version]}`, children: benefit.description })) : null] })] }, String(i)));
   }
   function renderBenefitIconBgStyle(version, benefitsVersion) {
       let bgColorStyle = 'bg-primary-main text-black';
@@ -739,21 +788,18 @@
       return `w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
   }
 
-  const ProductBlockInner = JSX(({ className = '', context, title, headingType = 'h2', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
-      const textColor = version === 'secondary' ? 'text-white' : 'text-primary-text';
-      return (jsxs("div", { className: `flex grow justify-between items-stretch ${className}`, children: [jsx("div", { className: `flex flex-col ${textBlockClassName}`, children: jsxs(BaseTile, { context: context, title: getTitle(title, headingType), buttons: getButtons(context, buttons), children: [description ? (jsx(Description, { className: `mt-4 max-w-[600px] text-md font-light ${textColor}`, description: description })) : null, benefits?.filter((_) => _.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map((benefit, i) => renderBenefit$1({ benefit, version, benefitsVersion }, i)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-title-2xs font-light", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] }) }), image?.src && jsx(Img, { className: "mt-[-50px]", image: image })] }));
+  const ProductBlockInner = JSX(({ className = '', context, title, headlineVersion = 'L', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
+      return (jsxs("div", { className: `flex grow justify-between items-stretch ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { context: context, title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion }), jsxs(BaseTile, { context: context, buttons: getButtons(context, buttons), children: [benefits?.filter((_) => _.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map((benefit, i) => renderBenefit$1({ benefit, version, benefitsVersion }, i)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6 font-light", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] })] }), image?.src && jsx(Img, { className: "mt-[-50px]", image: image })] }));
   });
-  const getTitle = (title, headingType) => {
-      return title ? (jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })) : null;
-  };
   const getButtons = (context, buttons) => {
       return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-4" })) : null;
   };
 
   function renderBackwardButton(button, version, className) {
+      const { text, href, target, onClick } = button;
       const iconVersion = version === 'primary' ? 'white' : 'black';
       const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
-      return (jsxs("div", { className: `flex items-center ${className}`, children: [jsx(Button, { version: version, rounded: true, className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3", ariaLabel: button?.text, href: button?.href, children: jsx(Img, { className: "w-4 h-4", image: { ...backwardIcon, iconVersion }, asSVG: true }) }), button?.text ? jsx("span", { className: "text-m-md font-light", children: button.text }) : null] }));
+      return (jsxs("div", { className: `flex items-center ${className}`, children: [jsx(Button, { version: version, rounded: true, className: "w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3", ariaLabel: text, href: href, target: target, onClick: onClick, children: jsx(Img, { className: "w-4 h-4", image: { ...backwardIcon, iconVersion }, asSVG: true }) }), text ? jsx("span", { className: "text-m", children: text }) : null] }));
   }
 
   const productBlockStyleMap$1 = {
@@ -768,7 +814,9 @@
       const { context, className = '', breadcrumbs, backwardButton, version = 'primary', ...otherProps } = props;
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs(BlockWrapper, { context: context, className: `font-sans overflow-hidden pt-[50px] pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap$1[version]} ${className}`, ...otherProps, children: [backwardButton?.text ? renderBackwardButton(backwardButton, version, 'mb-10 -mt-2.5') : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbsStyleMap[version]}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { ...useLink({ router, handlerDecorator }, { className: breadcrumbsStyleMap[version], ...breadcrumb }) }, String(i))))) })) : null, jsx(ProductBlockInner, { context: context, version: version, ...otherProps })] }));
+      return (jsxs(BlockWrapper, { context: context, className: `font-sans overflow-hidden pt-[50px] pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap$1[version]} ${className}`, ...otherProps, children: [backwardButton?.text
+                  ? renderBackwardButton(useLink({ router, handlerDecorator }, backwardButton), version, 'mb-10 -mt-2.5')
+                  : null, breadcrumbs?.length ? (jsx("div", { className: "text-xs mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbsStyleMap[version]}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { ...useLink({ router, handlerDecorator }, { className: breadcrumbsStyleMap[version], ...breadcrumb }) }, String(i))))) })) : null, jsx(ProductBlockInner, { context: context, version: version, ...otherProps })] }));
   });
 
   const textBlockStyleMaps = {
@@ -840,24 +888,25 @@
   };
   const Tile = JSX((props) => {
       const { context, title, headingType = 'h3', description, items, children, buttons, image, isDotted = true, className = '', version = 'primary', ...rest } = props;
-      return (jsx(BlockWrapper, { context: context, className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
-              ${version === 'primary' ? 'text-primary-text' : ''}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons.map((button) => ({ ...button, className: 'w-[158px]' })), className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? (jsx(Description, { className: "max-w-[600px] text-title-new-sm font-light", description: description })) : null, children, renderList$2(items, version, isDotted)] }) }));
+      return (jsx(BlockWrapper, { context: context, className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px] text-h4
+              ${version === 'primary' ? 'text-primary-text' : ''}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons.map((button) => ({ ...button, className: 'w-[158px]' })), className: "flex mt-9 gap-3" })) : null, image: image?.src ? jsx(Img, { className: "mt-auto ml-7", image: image }) : null, children: [description ? (jsx(Description, { className: "max-w-[600px] text-xl-light mt-2", description: description })) : null, children, renderList$2(items, version, isDotted)] }) }));
   });
   function renderList$2(items, version, isDotted) {
-      return items?.length ? (jsx(List, { items: items, isDotted: isDotted, itemClassName: "text-title-2xs font-light mt-2", version: version === 'primary' ? 'tile' : 'tile-white' })) : null;
+      const listVersion = version === 'primary' ? 'tile' : 'tile-white';
+      return items?.length ? (jsx(List, { items: items, isDotted: isDotted, itemClassName: "text-h6 font-light mt-2", version: listVersion })) : null;
   }
 
   const productTileStyleMap = {
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
   };
-  const ProductTile = JSX(({ context, className = '', title, headingType = 'h3', description, additionalDescription, benefits, buttons, image, version = 'primary', ...rest }) => {
-      return (jsxs(BlockWrapper, { context: context, className: `bg-white overflow-hidden text-primary-text font-sans p-9 box-border min-h-[364px] relative justify-between grid ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: [jsxs("div", { className: "z-[1]", children: [title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap text-h4` })) : null, description ? (jsx(Description, { className: "mt-2 text-md font-light", description: description })) : null, renderBenefits$1(benefits || [], version), additionalDescription
+  const ProductTile = JSX(({ context, className = '', title, headlineVersion = 'S', description, additionalDescription, benefits, buttons, image, version = 'primary', ...rest }) => {
+      return (jsxs(BlockWrapper, { context: context, className: `bg-white overflow-hidden text-primary-text font-sans p-9 box-border min-h-[364px] relative justify-between grid ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: [jsxs("div", { className: "z-[1]", children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: headlineVersion }), renderBenefits$1(benefits || [], version), additionalDescription
                           ? renderAdditionalDescription(additionalDescription, version)
                           : null] }), buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex self-end mt-5 gap-4 z-[1]" })) : null, image?.src ? jsx(Img, { className: "absolute right-0 bottom-0", image: image }) : null] }));
   });
   function renderBenefits$1(benefits, version) {
-      return (jsxs("div", { className: "flex mt-4", children: [benefits.length ? (jsx("div", { className: "mr-6 gap-2.5 text-title-2xs", children: benefits.map(renderBenefitLabel) })) : null, benefits.length ? (jsx("div", { className: "pt-1 text-m", children: benefits.map((_, i) => renderBenefitDescription(_, i, version)) })) : null] }));
+      return (jsxs("div", { className: "flex mt-4", children: [benefits.length ? (jsx("div", { className: "mr-6 gap-2.5 text-h6", children: benefits.map(renderBenefitLabel) })) : null, benefits.length ? (jsx("div", { className: "pt-1 text-m", children: benefits.map((_, i) => renderBenefitDescription(_, i, version)) })) : null] }));
   }
   function renderBenefitLabel(benefit, i) {
       return (jsx("div", { className: `${i ? 'mt-2.5' : ''}`, children: benefit.label }, String(i)));
@@ -974,11 +1023,13 @@
 
   const renderBlocksList = ({ blocks, context, className = '' }) => blocks?.length ? blocks.map(renderBlock$2({ context, className })) : null;
   const renderBlock$2 = ({ context, className }) => (block, i) => {
-      const type = block?.blockListType;
+      if (!block) {
+          return null;
+      }
+      const { style, blockListType: type, ...rest } = block;
       if (!type || !(type in EmbeddableBlocks)) {
           return null;
       }
-      const { style, ...rest } = block;
       const classNameBlock = style2className(style);
       const EmbeddedBlock = EmbeddableBlocks[type];
       return (jsx(EmbeddedBlock, { className: `${className} ${classNameBlock}`, context: context, ...rest }, `block_${i}`));
@@ -992,15 +1043,15 @@
       const [isActive, setIsActive] = context.useState(initialState);
       const hasContent = blocks?.length;
       const icon = isActive ? 'MinusIcon' : 'PlusIcon';
-      const getContentBlock = ({ currentTarget }) => currentTarget.nextSibling;
       const handleToggle = (e) => {
-          if (!hasContent) {
+          const currentTarget = e.currentTarget;
+          if (!currentTarget) {
               return;
           }
           setIsActive(!isActive);
-          const contentBlock = getContentBlock(e);
+          const contentBlock = currentTarget.nextSibling;
           contentBlock.style.maxHeight = contentBlock.style.maxHeight
-              ? null
+              ? ''
               : `${contentBlock.scrollHeight}px`;
       };
       return { isActive, hasContent, icon, handleToggle };
@@ -1080,47 +1131,54 @@
       return (jsxs("div", { className: "flex flex-col items-center max-w-[292px]", children: [bonusBenefit?.icon ? (jsx(Img, { className: "h-[180px] w-[160px] min-w-[160px] min-h-[160px]", image: bonusBenefit.icon, width: "160", height: "180" })) : null, jsx("div", { children: bonusBenefit?.label ? jsx("span", { className: "title-2xs m-0", children: bonusBenefit.label }) : null })] }, String(i)));
   };
 
-  function useCreditCalculatorData(useAsyncData, directoryName) {
-      const { data } = useAsyncData(creditCalculatorUrl(directoryName), fetchCreditCalculatorData);
-      return data || {};
-  }
-  async function fetchCreditCalculatorData(url) {
-      const response = await fetch(url);
-      return await response.json();
-  }
-  function creditCalculatorUrl(directoryName) {
-      return `/wcms-resources/${directoryName || 'credit-calculator-data'}.json`;
-  }
-
-  const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
-      return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, viewBox: viewBox, fill: fill, width: width, height: height, children: paths.map(({ d, fill: pathFill, ...options }, i) => (jsx("path", { d: d, fill: pathFill || 'currentColor', ...commonOptions, ...options }, i))) }));
-  });
-
-  const CHECK_PATHS = [
-      {
-          d: 'M10.207.793a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L3.5 6.086 8.793.793a1 1 0 0 1 1.414 0Z',
-          fillRule: 'evenodd',
-          clipRule: 'evenodd',
-          fill: 'white',
-      },
-  ];
-  const Checkbox = JSX(({ text, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center cursor-pointer relative", children: [jsx("input", { className: `peer appearance-none w-5 h-5 border-solid border ${checked ? 'border-black' : 'border-main-stroke'} rounded checked:bg-primary-main checked:border-primary-main m-0`, type: "checkbox", onChange: (e) => {
-                      onChange(e.target.checked);
-                  }, checked: checked }), jsx(SVG, { paths: CHECK_PATHS, className: "hidden absolute left-1 ml-px peer-checked:block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" }), text ? jsx("span", { className: "font-sans ml-3 text-m-base cursor-pointer", children: text }) : null] }) })));
-
   const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
 
   const CalculatorValueBlock = JSX(({ title, value, postfix = '', prefix, className = '' }) => {
       return (jsxs("div", { className: `mb-5 ${className}`, children: [title ? jsx("div", { className: "text-base font-light", children: title }) : null, value ? (jsxs("div", { className: "text-title font-normal", children: [prefix, " ", addSpacesBetweenNumbers(Math.round(value)), " ", postfix] })) : null] }));
   });
 
-  const DEFAULT_MIN_SUM = 30000;
-  const DEFAULT_MAX_SUM = 3000000;
+  const DEFAULT_MIN_SUM = 60000;
+  const DEFAULT_MAX_SUM = 2000000;
   const DEFAULT_SUM = (DEFAULT_MAX_SUM - DEFAULT_MIN_SUM) / 2;
-  const DEFAULT_MIN_MONTHS = 1;
-  const DEFAULT_MAX_MONTHS = 84;
+  const DEFAULT_MIN_MONTHS = 13;
+  const DEFAULT_MAX_MONTHS = 60;
   const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS - DEFAULT_MIN_MONTHS) / 2);
   const MONTHS_IN_YEAR = 12;
+  const MONTHLY_INTEREST_RATE = MONTHS_IN_YEAR * 100;
+  const DEFAULT_CREDIT_CALCULATOR_PARAMS = {
+      minSum: DEFAULT_MIN_SUM,
+      maxSum: DEFAULT_MAX_SUM,
+      minMonths: DEFAULT_MIN_MONTHS,
+      maxMonths: DEFAULT_MAX_MONTHS,
+      rateBottomRange: 10,
+      rateTopRange: 7,
+      isSalaryClient: true,
+      isStateEmployee: true,
+      isInsurance: true,
+      sumBorder: 999999,
+  };
+  const DEFAULT_TRAVEL_MIN_SUM = 6000;
+  const DEFAULT_REST_MIN_SUM = 6000;
+  const DEFAULT_BONUS_CALCULATOR_PARAMS = {
+      minSumTravel: 6000,
+      maxSumTravel: 200000,
+      minSumOther: 6000,
+      maxSumOther: 200000,
+      maxBonus: 5000,
+      prefMonthsNum: 2,
+      prefTravelBonusRate: 0.015,
+      prefRestBonusRate: 0.01,
+      travelBonusRate: 0.015,
+      restBonusRate: 0.01,
+  };
+  const CREDIT_CALC_DEFAULT_DIR = 'credit-calculator-data';
+  const BONUS_CALC_DEFAULT_DIR = 'bonus-calculator-data';
+
+  const Rate = JSX(({ rate, title = 'Ставка', unit, rateBlockClassName }) => (jsxs("div", { children: [jsx("div", { className: "text-sm font-light ml-3", children: title }), jsxs("div", { className: "flex justify-start", children: [jsx("span", { className: `block calc-rate-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`, children: String(rate).replace('.', ',') }), unit ? jsx("span", { className: "calc-rate-text text-[65px] leading-[75px]", children: unit }) : ''] })] })));
+
+  function renderButtonSection(context, buttons) {
+      return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-7 gap-2" })) : null;
+  }
 
   const InputRange = JSX(({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
       const handleChange = (_) => {
@@ -1148,226 +1206,250 @@
                         outline-none p-0 pl-4 box-border text-primary-text`, value: addSpacesBetweenNumbers(value), onChange: (e) => handleChange(e.target.value), onBlur: handleBlur }), jsx("div", { className: "absolute inset-x-0 bottom-[-4px] px-4 leading-[18px]", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider", type: "range", min: min, max: max, step: step, value: value, onChange: (e) => handleChange(e.target.value), style: inputStyle }) })] }), jsx("div", { className: "flex justify-between my-3", children: items.map((item, i) => (jsx("span", { className: "text-sm leading-[14px] text-secondary-text pl-4", children: item }, String(i)))) })] }));
   });
 
-  const STEP_MONEY$2 = 1000;
-  function renderWantedSumInput(props) {
-      const { title, className = '', calculatorParams, moneyValue, defaultSum, setMoneyValue, isShowItems = true, } = props;
-      const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
-      const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
+  const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+
+  const DEFAULT_MONEY_STEP = 1000;
+  function renderWantedSumInput(title, params, callback) {
+      const { moneyValue, minSum, maxSum, step = DEFAULT_MONEY_STEP, isShowItems = true } = params;
       const items = [
           `От ${addSpacesBetweenNumbers(minSum)} ₽`,
           `До ${addSpacesBetweenNumbers(maxSum)} ₽`,
       ];
-      return (jsx(InputRange, { className: className, title: title, items: isShowItems ? items : [], min: minSum, max: maxSum, step: STEP_MONEY$2, value: moneyValue || defaultSum, onChange: setMoneyValue }));
+      return (jsx(InputRange, { title: title, items: isShowItems ? items : [], min: minSum, max: maxSum, step: step, value: clamp(moneyValue, minSum, maxSum), onChange: callback }));
   }
 
-  const DEFAULT_RATE = 10.2;
-  const getCreditRate = (params) => {
-      const { calculatorParams, isInsurance } = params;
-      if (!calculatorParams) {
-          return DEFAULT_RATE;
+  const getBonus = (params, bonusTravelValue, bonusOtherValue) => {
+      const { minSumTravel, minSumOther, maxBonus, prefMonthsNum, prefTravelBonusRate, prefRestBonusRate, travelBonusRate, restBonusRate, } = params;
+      if (bonusTravelValue === minSumTravel && bonusOtherValue === minSumOther) {
+          return [0, 0];
       }
-      return isInsurance
-          ? calculatorParams?.rateWithInsurance || DEFAULT_RATE
-          : calculatorParams?.rateWithoutInsurance || DEFAULT_RATE;
+      const prefBonus = Math.min(Math.round(prefTravelBonusRate * bonusTravelValue) +
+          Math.round(prefRestBonusRate * bonusOtherValue), maxBonus);
+      const bonus = Math.min(Math.round(travelBonusRate * bonusTravelValue) + Math.round(restBonusRate * bonusOtherValue), maxBonus);
+      const yearBonus = prefBonus * prefMonthsNum + bonus * (MONTHS_IN_YEAR - prefMonthsNum);
+      return [prefBonus, yearBonus];
   };
 
-  const getCalculatorParams = (params) => {
-      const { tableRows, isAnnuity = false } = params;
-      if (!tableRows) {
-          return {};
-      }
-      const calculatorParams = tableRows.find((row) => row.isAnnuity === isAnnuity);
-      return calculatorParams || {};
-  };
+  function useCalculatorParams(useAsyncData, dir) {
+      const { data } = useAsyncData(`/wcms-resources/${dir}.json`, fetchCalculatorSourceBookParams);
+      return data;
+  }
+  async function fetchCalculatorSourceBookParams(url) {
+      const response = await fetch(url);
+      return await response.json();
+  }
 
-  const getDefaultSum = (calculatorParams) => calculatorParams.maxSum && calculatorParams.minSum
-      ? (calculatorParams.maxSum - calculatorParams.minSum) / 2
-      : DEFAULT_SUM;
+  const getBonusCalculatorParams = (context, userInputParams, sourceBookDir) => {
+      const { travelExpenseValue, restExpenseValue } = userInputParams;
+      const bonusCalculatorSourceBookParams = useCalculatorParams(context.useAsyncData, sourceBookDir || BONUS_CALC_DEFAULT_DIR) || DEFAULT_BONUS_CALCULATOR_PARAMS;
+      const [monthBonus, yearBonus] = getBonus(bonusCalculatorSourceBookParams, travelExpenseValue, restExpenseValue);
+      return {
+          ...bonusCalculatorSourceBookParams,
+          ...userInputParams,
+          monthBonus,
+          yearBonus,
+      };
+  };
 
-  const getDefaultMonths = (calculatorParams) => calculatorParams.maxMonths && calculatorParams.minMonths
-      ? Math.round((calculatorParams.maxMonths - calculatorParams.minMonths) / 2)
-      : DEFAULT_MONTHS;
+  const BonusCalculatorForm = JSX(({ context, className = '', sourceBookDir, buttons }) => {
+      const [travelExpenseValue, setTravelExpenseValue] = context.useState(DEFAULT_TRAVEL_MIN_SUM);
+      const [restExpenseValue, setRestExpenseValue] = context.useState(DEFAULT_REST_MIN_SUM);
+      const userInputParams = {
+          travelExpenseValue,
+          restExpenseValue,
+      };
+      const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } = getBonusCalculatorParams(context, userInputParams, sourceBookDir);
+      return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма покупок в категории путешествия, ₽', {
+                          minSum: minSumTravel,
+                          maxSum: maxSumTravel,
+                          moneyValue: travelExpenseValue,
+                          step: 500,
+                          isShowItems: false,
+                      }, setTravelExpenseValue), renderWantedSumInput('Сумма покупок в остальных категориях, ₽', {
+                          className: 'mt-6',
+                          minSum: minSumOther,
+                          maxSum: maxSumOther,
+                          moneyValue: restExpenseValue,
+                          step: 500,
+                          isShowItems: false,
+                      }, setRestExpenseValue)] }), 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]" })) : null }), jsxs("div", { className: "w-[240px]", children: [yearBonus >= 0 ? jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: yearBonus }) : null, renderButtonSection(context, buttons)] })] }));
+  });
 
-  const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+  const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
+      return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, viewBox: viewBox, fill: fill, width: width, height: height, children: paths.map(({ d, fill: pathFill, ...options }, i) => (jsx("path", { d: d, fill: pathFill || 'currentColor', ...commonOptions, ...options }, i))) }));
+  });
 
-  const getMonthlyPayment = (params) => {
-      const { calculatorParams, paymentType, rate, sum, months } = params;
-      if (!calculatorParams) {
-          return 0;
-      }
-      const finalSum = clamp(sum, calculatorParams.minSum || DEFAULT_MIN_SUM, calculatorParams.maxSum || DEFAULT_MAX_SUM);
-      if (paymentType === 'annuity') {
-          const annuityCoef = Number(rate) / (MONTHS_IN_YEAR * 100);
-          return finalSum * (annuityCoef + annuityCoef / (Math.pow(1 + annuityCoef, months) - 1));
-      }
-      else {
-          return finalSum / months + finalSum * (Number(rate) / 12);
-      }
-  };
+  const CHECK_PATHS = [
+      {
+          d: 'M10.207.793a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L3.5 6.086 8.793.793a1 1 0 0 1 1.414 0Z',
+          fillRule: 'evenodd',
+          clipRule: 'evenodd',
+          fill: 'white',
+      },
+  ];
+  const Checkbox = JSX(({ className, text, checked, isRadio, onChange }) => (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center cursor-pointer relative", children: [jsx("input", { className: `peer appearance-none w-5 h-5 border-solid
+        ${isRadio ? 'rounded-full border-2' : 'rounded checked:bg-primary-main border'}
+        ${checked ? 'border-black' : 'border-main-stroke'}
+        checked:border-primary-main m-0`, type: "checkbox", onChange: (e) => {
+                      onChange(e.target.checked);
+                  }, checked: checked }), isRadio ? (jsx("div", { className: "left-1 w-3 h-3 rounded-full bg-primary-main hidden absolute peer-checked:block" })) : (jsx(SVG, { paths: CHECK_PATHS, className: "hidden absolute left-1 ml-px peer-checked:block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" })), text ? jsx("span", { className: "font-sans ml-3 text-m-base cursor-pointer", children: text }) : null] }) })));
 
   const STEP_MONTHS = 1;
-  function renderMonthsInput(props) {
-      const { title, minMonths, maxMonths, monthsValue, defaultMonths, setMonthsValue } = props;
+  function renderMonthsInput(title, params, callback) {
+      const { minMonths, maxMonths, monthsValue } = params;
       const monthText = (month) => {
           const text = Number(month) % 10 === 1 ? 'месяца' : 'месяцев';
           return `${month} ${text}`;
       };
-      return (jsx(InputRange, { className: "mt-6", title: title, items: [`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`], min: minMonths, max: maxMonths, step: STEP_MONTHS, value: monthsValue || defaultMonths, onChange: setMonthsValue }));
+      return (jsx(InputRange, { className: "mt-6", title: title, items: [`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`], min: minMonths, max: maxMonths, step: STEP_MONTHS, value: clamp(monthsValue, minMonths, maxMonths), onChange: callback }));
   }
 
-  function renderButtonSection(context, buttons) {
-      return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-7 gap-2" })) : null;
-  }
+  const RadioButtonGroup = JSX(({ items, checkedItem, onChangeCheckedItem }) => {
+      return (jsx("div", { children: items?.map(({ id, text }) => (jsx(Checkbox, { isRadio: true, text: text, checked: checkedItem === id, onChange: () => onChangeCheckedItem(id) }, id))) }));
+  });
 
-  function renderRate({ rate, title, sup, className = '' }) {
-      const rateFormat = String(rate).replace('.', ',');
-      return (jsxs("div", { children: [jsx("div", { className: "text-sm font-light ml-3", children: title }), jsxs("div", { className: "flex justify-start", children: [jsx("span", { className: `calc-rate-text font-mohave text-title-huge pr-4 mt-[-16px] ${className}`, children: rateFormat }), sup ? jsx("span", { className: "calc-rate-text text-[65px] leading-[75px]", children: sup }) : ''] })] }));
+  function renderPaymentTypeSelector(context, { items, checkedItem, onChange }) {
+      return (jsx(RadioButtonGroup, { context: context, items: items, checkedItem: checkedItem, onChangeCheckedItem: onChange }));
   }
 
-  const DEFAULT_PAYMENT_TYPE = 'annuity';
-  const CreditCalculatorForm = JSX(({ context, className = '', buttons }) => {
-      const [moneyValue, setMoneyValue] = context.useState(undefined);
-      const [monthsValue, setMonthsValue] = context.useState(undefined);
+  /**
+   * Формулы расчёта аннуитетных и дифференцированных платежей:
+   * https://finuslugi.ru/potrebitelskie_kredity/stat_annuitetnye_i_differentsirovannye_platezhi
+   */
+  const getMonthlyPayment = (rate, params) => {
+      const { isAnnuity, moneyValue, monthsValue } = params;
+      if (isAnnuity) {
+          const i = rate / MONTHLY_INTEREST_RATE; // Используется значение ставки в процентах
+          return moneyValue * (i + i / (Math.pow(1 + i, monthsValue) - 1));
+      }
+      else {
+          return Math.round(moneyValue / monthsValue) + moneyValue * (rate / (MONTHS_IN_YEAR * 100)); // Используется значение ставки (rate) в процентах, делённое на сто.
+      }
+  };
+
+  const getCreditCalculatorParams = (context, userInputParams, sourceBookDir) => {
+      const { isInsurance, isSalaryClient, isStateEmployee, moneyValue } = userInputParams;
+      const data = useCalculatorParams(context.useAsyncData, sourceBookDir || CREDIT_CALC_DEFAULT_DIR);
+      const creditCalculatorSourceBookParams = data?.rows.find((_) => {
+          return (isInsurance === _.isInsurance &&
+              isSalaryClient === _.isSalaryClient &&
+              isStateEmployee === _.isStateEmployee);
+      }) || DEFAULT_CREDIT_CALCULATOR_PARAMS;
+      const { rateBottomRange, rateTopRange, sumBorder } = creditCalculatorSourceBookParams;
+      const finalRate = moneyValue <= sumBorder ? rateBottomRange : rateTopRange;
+      const monthlyPayment = getMonthlyPayment(finalRate, userInputParams);
+      const extendedCalculatorParams = {
+          ...creditCalculatorSourceBookParams,
+          ...userInputParams,
+          finalRate,
+          monthlyPayment,
+      };
+      return extendedCalculatorParams;
+  };
+
+  const ANNUITY = 'annuity';
+  const DIFFERENTIAL = 'differential';
+  const paymentTypeItems = [
+      {
+          id: ANNUITY,
+          text: 'Аннуитетный',
+      },
+      {
+          id: DIFFERENTIAL,
+          text: 'Дифференцированный',
+      },
+  ];
+  const CreditCalculatorForm = JSX(({ context, className = '', sourceBookDir, buttons }) => {
       const [isAnnuity, toggleIsAnnuity] = context.useState(false);
-      const [isBudgetary, toggleIsBudgetary] = context.useState(false);
-      const [isInsurance, toggleIsInsurance] = context.useState(false);
-      const tableRows = useCreditCalculatorData(context.useAsyncData, 'directoryName').rows;
-      const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isAnnuity });
-      const defaultSum = getDefaultSum(calculatorParams);
-      const defaultMonths = getDefaultMonths(calculatorParams);
-      const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
-      const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
-      const rate = getCreditRate({ calculatorParams, isInsurance: isInsurance });
-      const monthlyPayment = getMonthlyPayment({
-          calculatorParams,
-          paymentType: DEFAULT_PAYMENT_TYPE,
-          rate,
-          sum: moneyValue || defaultSum,
-          months: monthsValue || defaultMonths,
-      });
-      const title = 'Сумма кредита, ₽';
-      return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput({ title, calculatorParams, moneyValue, defaultSum, setMoneyValue }), renderMonthsInput({
-                          title: 'Сумма кредита, ₽',
-                          minMonths,
-                          maxMonths,
+      const [isInsurance, toggleIsInsurance] = context.useState(true);
+      const [isSalaryClient, toggleIsSalaryClient] = context.useState(false);
+      const [isStateEmployee, toggleIsStateEmployee] = context.useState(false);
+      const [moneyValue, setMoneyValue] = context.useState(DEFAULT_SUM);
+      const [monthsValue, setMonthsValue] = context.useState(DEFAULT_MONTHS);
+      const userInputParams = {
+          isAnnuity,
+          isInsurance,
+          isSalaryClient,
+          isStateEmployee,
+          moneyValue,
+          monthsValue,
+      };
+      const calculatorParams = getCreditCalculatorParams(context, userInputParams, sourceBookDir);
+      return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма кредита, ₽', { ...calculatorParams, step: 500 }, setMoneyValue), renderMonthsInput('Срок кредита, месяцев', calculatorParams, setMonthsValue), jsxs("div", { className: "pt-7", children: [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", checked: isSalaryClient, onChange: toggleIsSalaryClient }), 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", checked: isStateEmployee, onChange: toggleIsStateEmployee }), 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", checked: isInsurance, onChange: toggleIsInsurance })] })] }), jsx(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.finalRate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-[351px]", children: [jsx(CalculatorValueBlock, { title: isAnnuity ? 'Ежемесячный платеж' : 'Платёж в первый месяц', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), renderPaymentTypeSelector(context, {
+                          items: paymentTypeItems,
+                          checkedItem: isAnnuity ? ANNUITY : DIFFERENTIAL,
+                          onChange: (text) => toggleIsAnnuity(text === ANNUITY),
+                      }), renderButtonSection(context, buttons)] })] }));
+  });
+
+  const DepositCalculatorForm = JSX(({ context, className = '', buttons, rate }) => {
+      const [moneyValue, setMoneyValue] = context.useState(DEFAULT_SUM);
+      const [monthsValue, setMonthsValue] = context.useState(DEFAULT_MONTHS);
+      const income = 948841;
+      const finallySum = 1218841;
+      return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма вклада, ₽', {
+                          moneyValue,
+                          minSum: DEFAULT_MIN_SUM,
+                          maxSum: DEFAULT_MAX_SUM,
+                      }, setMoneyValue), renderMonthsInput('Срок вклада, месяцев', {
+                          minMonths: DEFAULT_MIN_MONTHS,
+                          maxMonths: DEFAULT_MAX_MONTHS,
                           monthsValue,
-                          defaultMonths,
-                          setMonthsValue,
-                      }), jsxs("div", { className: "pt-7", children: [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", checked: isAnnuity, onChange: toggleIsAnnuity }), 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", checked: isBudgetary, onChange: toggleIsBudgetary }), 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", checked: isInsurance, onChange: toggleIsInsurance })] })] }), jsx("div", { children: rate
-                      ? renderRate({ rate: rate, title: 'Ставка', sup: '%', className: 'tracking-[-25px]' })
-                      : null }), jsxs("div", { className: "w-[351px]", children: [monthlyPayment ? (jsx(CalculatorValueBlock, { title: "\u0415\u0436\u0435\u043C\u0435\u0441\u044F\u0447\u043D\u044B\u0439 \u043F\u043B\u0430\u0442\u0435\u0436", value: monthlyPayment, postfix: "\u20BD" })) : null, renderButtonSection(context, buttons)] })] }));
+                      }, setMonthsValue)] }), jsx(Rate, { rate: rate || 1, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-[351px]", 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: finallySum, postfix: "\u20BD" })) , renderButtonSection(context, buttons)] })] }));
   });
 
-  const STEP_MONEY$1 = 1000;
-  function renderRealEstateValue(props) {
-      const { calculatorParams, moneyValue, defaultSum, setMoneyValue } = props;
-      const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
-      const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
-      return (jsx(InputRange, { title: "\u0421\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C \u043D\u0435\u0434\u0432\u0438\u0436\u0438\u043C\u043E\u0441\u0442\u0438, \u20BD ", items: [`От ${addSpacesBetweenNumbers(minSum)} ₽`, `До ${addSpacesBetweenNumbers(maxSum)} ₽`], min: minSum, max: maxSum, step: STEP_MONEY$1, value: moneyValue || defaultSum, onChange: setMoneyValue }));
-  }
+  const DEFAULT_RATE = 10.2;
+  const getCreditRate = (params) => {
+      const { calculatorParams, isInsurance } = params;
+      if (!calculatorParams) {
+          return DEFAULT_RATE;
+      }
+      return isInsurance
+          ? calculatorParams?.rateWithInsurance || DEFAULT_RATE
+          : calculatorParams?.rateWithoutInsurance || DEFAULT_RATE;
+  };
 
-  const STEP_MONEY = 1000;
-  function renderInitialFeeInput(props) {
-      const { calculatorParams, moneyValue, defaultSum, setMoneyValue } = props;
-      const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
-      const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
-      return (jsx(InputRange, { className: "mt-6", title: "\u041F\u0435\u0440\u0432\u043E\u043D\u0430\u0447\u0430\u043B\u044C\u043D\u044B\u0439 \u0432\u0437\u043D\u043E\u0441, \u20BD ", items: [
+  const STEP_MONEY$1 = 1000;
+  function renderInitialFeeInput(title, props, callback) {
+      const { moneyValue } = props;
+      const minSum = DEFAULT_MIN_SUM;
+      const maxSum = DEFAULT_MAX_SUM;
+      return (jsx(InputRange, { className: "mt-6", title: title, items: [
               `От ${addSpacesBetweenNumbers(minSum)} рублей`,
               `До ${addSpacesBetweenNumbers(maxSum)} рублей`,
-          ], min: minSum, max: maxSum, step: STEP_MONEY, value: moneyValue || defaultSum, onChange: setMoneyValue }));
+          ], min: minSum, max: maxSum, step: STEP_MONEY$1, value: moneyValue, onChange: callback }));
   }
 
   function renderProposalMortgage({ credit, period, taxRefund }) {
       return (jsxs("div", { children: [jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u043A\u0440\u0435\u0434\u0438\u0442\u0430", value: credit, postfix: "\u20BD" }), jsx(CalculatorValueBlock, { title: "\u0421\u0440\u043E\u043A", value: period, postfix: "\u043B\u0435\u0442" }), jsx(CalculatorValueBlock, { title: "\u041D\u0430\u043B\u043E\u0433\u043E\u0432\u044B\u0439 \u0432\u044B\u0447\u0435\u0442", value: taxRefund, postfix: "\u20BD" })] }));
   }
 
+  const STEP_MONEY = 1000;
+  function renderRealEstateValue(title, props, callback) {
+      const { moneyValue } = props;
+      const minSum = DEFAULT_MIN_SUM;
+      const maxSum = DEFAULT_MAX_SUM;
+      return (jsx(InputRange, { title: title, items: [`От ${addSpacesBetweenNumbers(minSum)} ₽`, `До ${addSpacesBetweenNumbers(maxSum)} ₽`], min: minSum, max: maxSum, step: STEP_MONEY, value: moneyValue, onChange: callback }));
+  }
+
   const MortgageCalculatorForm = JSX(({ context, className = '', buttons }) => {
-      const [moneyValue, setMoneyValue] = context.useState(undefined);
-      const [monthsValue, setMonthsValue] = context.useState(undefined);
+      const [moneyValue, setMoneyValue] = context.useState(1000000);
+      const [monthsValue, setMonthsValue] = context.useState(12);
       const [isInsurance, toggleIsInsurance] = context.useState(false);
       const [isFullInsurance, toggleIsFullInsurance] = context.useState(false);
-      const tableRows = useCreditCalculatorData(context.useAsyncData, 'directoryName').rows;
-      const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isInsurance });
-      const defaultSum = getDefaultSum(calculatorParams);
-      const defaultMonths = getDefaultMonths(calculatorParams);
-      const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
-      const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
+      const calculatorParams = {}; // getCalculatorParams(context, { isAnnuity: isInsurance });
+      const minMonths = /*calculatorParams?.minMonths ||*/ DEFAULT_MIN_MONTHS;
+      const maxMonths = /* calculatorParams?.maxMonths || */ DEFAULT_MAX_MONTHS;
       const rate = getCreditRate({ calculatorParams, isInsurance: isInsurance });
       const monthlyPayment = 777777; // TODO: hardcode
       const proposalMortgageValue = { credit: 3892000, period: 15, taxRefund: 650000 }; // TODO: hardcode
-      return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderRealEstateValue({ calculatorParams, moneyValue, defaultSum, setMoneyValue }), renderInitialFeeInput({
-                          calculatorParams,
+      return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderRealEstateValue('Стоимость недвижимости, ₽', { moneyValue }, setMoneyValue), renderInitialFeeInput('Первоначальный взнос, ₽', {
                           moneyValue,
-                          defaultSum,
-                          setMoneyValue,
-                      }), renderMonthsInput({
-                          title: 'Срок ипотеки, месяцев',
+                      }, setMoneyValue), renderMonthsInput('Срок ипотеки, месяцев', {
                           minMonths,
                           maxMonths,
                           monthsValue,
-                          defaultMonths,
-                          setMonthsValue,
-                      }), jsxs("div", { className: "mt-7", children: [jsx(Checkbox, { text: "\u0421\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u043D\u0438\u0435 \u0436\u0438\u0437\u043D\u0438", checked: isInsurance, onChange: toggleIsInsurance }), jsx(Checkbox, { className: "mt-4", text: "\u0421\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u043D\u0438\u0435 \u0436\u0438\u0437\u043D\u0438, \u0437\u043B\u043E\u0440\u043E\u0432\u044C\u044F \u0438 \u0432\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0439 \u0443\u0442\u0440\u0430\u0442\u044B \u0442\u0440\u0443\u0434\u043E\u0441\u043F\u043E\u0441\u043E\u0431\u043D\u043E\u0441\u0442\u0438", checked: isFullInsurance, onChange: toggleIsFullInsurance })] })] }), jsxs("div", { children: [jsx("div", { children: rate
-                              ? renderRate({ rate: rate, title: 'Ставка', sup: '%', className: 'tracking-[-25px]' })
-                              : null }), jsx(CalculatorValueBlock, { title: "\u0415\u0436\u0435\u043C\u0435\u0441\u044F\u0447\u043D\u044B\u0439 \u043F\u043B\u0430\u0442\u0435\u0436", value: monthlyPayment, postfix: "\u20BD" })] }), jsxs("div", { children: [jsx("div", { className: "w-[351px]", children: renderProposalMortgage(proposalMortgageValue) }), renderButtonSection(context, buttons)] })] }));
-  });
-
-  const DepositCalculatorForm = JSX(({ context, className = '', buttons, rate, minSum, maxSum, minMonths, maxMonths }) => {
-      const [moneyValue, setMoneyValue] = context.useState(undefined);
-      const [monthsValue, setMonthsValue] = context.useState(undefined);
-      const tableRows = useCreditCalculatorData(context.useAsyncData, 'directoryName').rows;
-      const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: false });
-      const defaultSum = getDefaultSum(calculatorParams);
-      const defaultMonths = getDefaultMonths(calculatorParams);
-      const income = 948841;
-      const finallySum = 1218841;
-      return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput({
-                          title: 'Сумма вклада, ₽',
-                          calculatorParams: { minSum, maxSum },
-                          moneyValue,
-                          defaultSum,
-                          setMoneyValue,
-                      }), renderMonthsInput({
-                          title: 'Срок вклада, месяцев',
-                          minMonths: minMonths || DEFAULT_MIN_MONTHS,
-                          maxMonths: maxMonths || DEFAULT_MAX_MONTHS,
-                          monthsValue,
-                          defaultMonths,
-                          setMonthsValue,
-                      })] }), jsx("div", { children: rate
-                      ? renderRate({ rate: rate, title: 'Ставка', sup: '%', className: 'tracking-[-25px]' })
-                      : null }), jsxs("div", { className: "w-[351px]", 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: finallySum, postfix: "\u20BD" })) , renderButtonSection(context, buttons)] })] }));
-  });
-
-  const BonusCalculatorForm = JSX(({ context, className = '', buttons, bonus, minSumTrip, maxSumTrip, minSumOther, maxSumOther, }) => {
-      const [bonusTripValue, setBonusTripValue] = context.useState(undefined);
-      const [bonusOtherValue, setBonusOtherValue] = context.useState(undefined);
-      const calculatorTripParams = { minSum: minSumTrip, maxSum: maxSumTrip };
-      const calculatorOtherParams = { minSum: minSumOther, maxSum: maxSumOther };
-      const incomeBonus = 948841;
-      const bonusOrDef = bonus || 2528;
-      return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput({
-                          title: 'Сумма покупок в категории путешествия, ₽',
-                          calculatorParams: calculatorTripParams,
-                          moneyValue: bonusTripValue,
-                          defaultSum: getDefaultSum(calculatorTripParams),
-                          setMoneyValue: setBonusTripValue,
-                          isShowItems: false,
-                      }), renderWantedSumInput({
-                          className: 'mt-6',
-                          title: 'Сумма покупок в остальных категориях, ₽',
-                          calculatorParams: calculatorOtherParams,
-                          moneyValue: bonusOtherValue,
-                          defaultSum: getDefaultSum(calculatorOtherParams),
-                          setMoneyValue: setBonusOtherValue,
-                          isShowItems: false,
-                      })] }), jsx("div", { children: bonusOrDef
-                      ? renderRate({
-                          rate: bonusOrDef,
-                          title: 'Баллов за месяц',
-                          className: 'tracking-[-14px]',
-                      })
-                      : null }), jsxs("div", { className: "w-[240px]", children: [jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: incomeBonus }) , renderButtonSection(context, buttons)] })] }));
+                      }, setMonthsValue), jsxs("div", { className: "mt-7", children: [jsx(Checkbox, { text: "\u0421\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u043D\u0438\u0435 \u0436\u0438\u0437\u043D\u0438", checked: isInsurance, onChange: toggleIsInsurance }), jsx(Checkbox, { className: "mt-4", text: "\u0421\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u043D\u0438\u0435 \u0436\u0438\u0437\u043D\u0438, \u0437\u043B\u043E\u0440\u043E\u0432\u044C\u044F \u0438 \u0432\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0439 \u0443\u0442\u0440\u0430\u0442\u044B \u0442\u0440\u0443\u0434\u043E\u0441\u043F\u043E\u0441\u043E\u0431\u043D\u043E\u0441\u0442\u0438", checked: isFullInsurance, onChange: toggleIsFullInsurance })] })] }), jsxs("div", { children: [jsx(Rate, { rate: rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsx(CalculatorValueBlock, { title: "\u0415\u0436\u0435\u043C\u0435\u0441\u044F\u0447\u043D\u044B\u0439 \u043F\u043B\u0430\u0442\u0435\u0436", value: monthlyPayment, postfix: "\u20BD" })] }), jsxs("div", { children: [jsx("div", { className: "w-[351px]", children: renderProposalMortgage(proposalMortgageValue) }), renderButtonSection(context, buttons)] })] }));
   });
 
   const EmbeddableCalcBlocks = {
@@ -1377,24 +1459,24 @@
       BonusCalculatorForm,
   };
 
-  const renderCalculatorBlock = ({ context, className }) => (blockCalcTabs, i) => {
-      const type = blockCalcTabs?.calcType;
+  const renderCalculatorBlock = ({ context, className }) => (block, i) => {
+      const type = block?.calcType;
       if (!type || !(type in EmbeddableCalcBlocks)) {
           return null;
       }
       const EmbeddedBlock = EmbeddableCalcBlocks[type];
-      return (jsx("section", { className: `box-border relative flex shrink-0 basis-full ${className}`, role: "listitem", children: jsx("div", { className: "box-border p-9 w-full", children: jsx(EmbeddedBlock, { context: context, ...blockCalcTabs, className: "flex justify-between" }) }) }, String(i)));
+      return (jsx("section", { className: `box-border relative flex shrink-0 basis-full ${className}`, role: "listitem", children: jsx("div", { className: "box-border p-9 w-full", children: jsx(EmbeddedBlock, { context: context, ...block, className: "flex justify-between" }) }) }, String(i)));
   };
 
-  const Calculator = JSX(({ className = '', context, calcTabs = [], ...rest }) => {
-      const tabsNav = calcTabs.map((_) => _.nav || {});
-      const blockCalcTabs = calcTabs.map(({ calculatorBlock }) => calculatorBlock || {});
+  const Calculator = JSX(({ className = '', context, calculatorTabs = [], ...rest }) => {
+      const tabsNav = calculatorTabs.map((_) => _.nav || {});
+      const calculatorBlocks = calculatorTabs.map(({ calculatorBlock }) => calculatorBlock || {});
       const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
       const [tabsShift, setTabsShift] = context.useState(0);
       const handleNextClick = () => setTabsShift(tabsShift + 1);
       const handlePrevClick = () => setTabsShift(tabsShift - 1);
-      const isGalleryScrollAvailable = calcTabs?.length > 3;
-      const showNextButton = isGalleryScrollAvailable && calcTabs?.length > tabsShift + 3;
+      const isGalleryScrollAvailable = calculatorTabs?.length > 3;
+      const showNextButton = isGalleryScrollAvailable && calculatorTabs?.length > tabsShift + 3;
       const showPrevButton = tabsShift > 0;
       return (jsxs(BlockWrapper, { context: context, className: `box-border overflow-hidden relative font-sans w-100 bg-white text-primary-text ${className}`, ...rest, children: [jsxs("div", { children: [tabsNav.length > 1
                           ? renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex })
@@ -1403,8 +1485,8 @@
                           isShown: [showPrevButton, showNextButton],
                           btnClass: ['left-3', 'right-3'],
                           className: 'top-8',
-                      })] }), jsx("div", { className: "flex", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: blockCalcTabs?.length
-                      ? blockCalcTabs.map(renderCalculatorBlock({ context, className }))
+                      })] }), jsx("div", { className: "flex", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: calculatorBlocks?.length
+                      ? calculatorBlocks.map(renderCalculatorBlock({ context, className }))
                       : null })] }));
   });
   function renderNavButton$2({ tab, i, activeSlideIndex, onClick }) {
@@ -1464,8 +1546,6 @@
       });
   };
 
-  const TableRowContainer = JSX(({ children }) => (jsx("div", { className: "self-start flex flex-col", role: "row", children: jsx("div", { className: "flex", children: children }) })));
-
   const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
   const BORDER_CLASSES$1 = 'border-main-stroke border-solid border';
   const DIVIDER_CLASSES$1 = 'border-main-divider border border-t-0 border-x-0';
@@ -1473,16 +1553,18 @@
   const COLS_LENGTH_FOR_SCROLL$1 = 2;
   const COLUMN_WIDTH$1 = 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$1} ${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: "font-medium text-xs py-[11px]", children: link.text }) }) }))] })));
+
   const carouselContainerClassesMap = {
       comparison: 'flex gap-4 duration-1000',
       tariff: 'flex flex-grow duration-1000',
   };
   const TableCarouselContainer = JSX(({ children, activeCardIndex, columnWidth, version = 'comparison' }) => (jsx("div", { className: "flex flex-1 overflow-hidden", children: jsx("div", { className: carouselContainerClassesMap[version], style: { transform: `translateX(-${activeCardIndex * columnWidth}px)` }, children: children }) })));
 
-  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$1} ${GRADIENT}`, role: "columnheader", scope: "col", 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: "font-medium text-xs py-[11px]", children: link.text }) }) }))] })));
+  const TableRowContainer = JSX(({ children }) => (jsx("div", { className: "self-start flex flex-col", role: "row", children: jsx("div", { className: "flex", children: children }) })));
 
   const ComparisonTableColumnHeaders = JSX(({ colHeaders, activeCardIndex, router, handlerDecorator }) => {
-      return (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES$1, role: "columnheader", scope: "col" }), jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header, link: header.link && useLink({ router, handlerDecorator }, header.link) }, String(i)))) })] }));
+      return (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES$1, role: "columnheader" }), jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header, link: header.link && useLink({ router, handlerDecorator }, header.link) }, String(i)))) })] }));
   });
 
   const TableCell = JSX(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
@@ -1542,10 +1624,10 @@
       return (jsxs("div", { children: [jsxs("div", { role: "table", children: [colHeaders?.length ? (jsx(ComparisonTableColumnHeaders, { colHeaders: colHeaders, activeCardIndex: activeCardIndex, router: router, handlerDecorator: handlerDecorator })) : null, rowData?.length ? (jsx(ComparisonTableRows, { rowData: rowData, activeCardIndex: activeCardIndex, isColoredFirstColumn: isColoredFirstColumn, ...tableArrowScrollProps })) : null] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
   });
 
-  const ComparisonTable = JSX(({ className, context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, ...rest }) => {
+  const ComparisonTable = JSX(({ className = '', context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, ...rest }) => {
       const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
       const showToggle = () => setIsShowAllRow(!isShowAllRow);
-      return (jsxs(BlockWrapper, { context: context, className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, ...rest, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center mb-9 mx-auto", title: title }), jsx(ComparisonTableBody, { context: context, columns: columns, rowHeaders: rowHeaders, isShowAllRow: isShowAllRow, isColoredFirstColumn: isColoredFirstColumn, visibleRowLength: visibleRowLength }), visibleRowLength
+      return (jsxs(BlockWrapper, { context: context, className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className}`, ...rest, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center mb-9 mx-auto", title: title }), jsx(ComparisonTableBody, { context: context, columns: columns, rowHeaders: rowHeaders, isShowAllRow: isShowAllRow, isColoredFirstColumn: isColoredFirstColumn, visibleRowLength: visibleRowLength }), visibleRowLength
                   ? renderShowMoreToggleButton({ isShowAllRow, onClick: showToggle })
                   : null] }));
   });
@@ -1571,6 +1653,7 @@
       }
       catch (err) {
           console.error(err);
+          return Promise.resolve();
       }
   }
   const EXCHANGE_RATES_URL = 'https://coins.rshb.ru/api/catalog/vue_storefront_magento_1_currency_rates_average/currency_rates_average/_search?size=10000';
@@ -1602,33 +1685,17 @@
   };
   const getCurrencyListByRate = (currencyRates) => currencyRates.reduce((result, _) => {
       const currencyInfo = _['currency_first'];
-      if (!validateRate(_['rate_buy']) && !validateRate(_['rate_sell'])) {
-          return result;
-      }
-      const currencyCode = currencyInfo.code;
+      const currencyCode = currencyInfo?.code;
       if (!result.some((i) => i.code === currencyCode)) {
           result.push({
               code: currencyCode,
-              buy: Number(_.rate_buy),
-              sell: Number(_.rate_sell),
+              buy: roundRate(Number(_.rate_buy)),
+              sell: roundRate(Number(_.rate_sell)),
           });
       }
       return result;
   }, []);
-  const validateRate = (value) => Math.round(value) > 0;
-
-  function getTileHeadingType(className = '') {
-      const colSpan = getColSpan(className);
-      if (colSpan <= 4) {
-          return 'h4';
-      }
-      else if (colSpan <= 8) {
-          return 'h3';
-      }
-      else {
-          return 'h2';
-      }
-  }
+  const roundRate = (value) => Math.round(value * 1000) / 1000;
 
   var Currency;
   (function (Currency) {
@@ -1643,7 +1710,7 @@
   });
   const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
 
-  const TABLE_HEAD_STYLE = 'font-light text-left font-normal text-sm text-secondary-text';
+  const TABLE_HEAD_STYLE = 'text-left text-m text-secondary-text';
   const CURRENCY_ICONS_MAP = {
       USD: 'DollarIcon',
       EUR: 'EuroIcon',
@@ -1653,10 +1720,10 @@
   });
   const renderCurrencyRow = (exchangeCurrencyItem) => {
       const code = exchangeCurrencyItem?.code;
-      return (jsxs("tr", { className: "pb-1", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[code] }, width: "24", height: "24" }) : null, jsx("span", { className: "text-m-title-md ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.buy) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.sell) })] }, code));
+      return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[code] }, width: "24", height: "24" }) : null, jsx("span", { className: "ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.sell) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.buy) })] }, code));
   };
 
-  const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex text-sm ${className}`, children: [jsx(Img, { image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3 font-light", children: [address ? jsx("p", { className: "m-0 mb-[3px]", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
+  const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex ${className}`, children: [jsx(Img, { image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3", children: [address ? jsx("p", { className: "text-primary-main  m-0 mb-1 text-l", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0 text-m", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
 
   const roundTo = (value, precision = 2) => {
       const factor = Math.pow(10, precision);
@@ -1686,8 +1753,8 @@
       [() => true, () => props.handleConvert(props.value)],
   ])(props)?.();
 
-  function renderButton() {
-      return (jsx(Button, { className: "box-border mt-3.5 py-3 h-12 w-full", version: "primary", href: "https://coins.rshb.ru/exchange", target: "_blank", children: "\u041A\u0443\u043F\u0438\u0442\u044C \u0432\u0430\u043B\u044E\u0442\u0443" }));
+  function renderButton(button) {
+      return (jsx(Button, { className: "py-4 mr-1", version: button?.version, href: button?.href, target: "_blank", children: button?.text }));
   }
 
   const Input = JSX(({ className = '', id, name, type = 'text', placeholder, pattern, value, onChange }) => {
@@ -1708,10 +1775,10 @@
 
   function renderInput(props) {
       const { placeholder, rates, selected, value, setValue, setSelected } = props;
-      return (jsxs("div", { className: "relative flex items-center", children: [jsx(Input, { className: "h-10 border pl-4 pt-[7px] pb-[7px] rounded-md text-m-sm w-full appearance-none -mr-12", placeholder: placeholder, type: "text", value: value, onChange: setValue }), rates.length ? (jsx(Select, { className: "h-9 -translate-x-4", value: selected, onChange: (_) => setSelected(_), children: rates.map((_, i) => (jsx(SelectOption, { value: _.code, children: _.code }, String(i)))) })) : null] }));
+      return (jsxs("div", { className: "relative flex items-center", children: [jsx(Input, { className: "h-13 border pl-4 pt-4 pb-4 rounded-md text-l w-full appearance-none -mr-12", placeholder: placeholder, type: "text", value: value, onChange: setValue }), rates.length ? (jsx(Select, { className: "h-9 -translate-x-4 bg-transparent", value: selected, onChange: (_) => setSelected(_), children: rates.map((_, i) => (jsx(SelectOption, { value: _.code, children: _.code }, String(i)))) })) : null] }));
   }
 
-  const ExchangeCurrencyCalculator = JSX(({ context, className = '', currencyRatesBuy, currencyRatesSell }) => {
+  const ExchangeCurrencyCalculator = JSX(({ context, className = '', currencyRatesBuy, currencyRatesSell, button }) => {
       const [calcState, setCalcState] = context.useState({
           inputSell: '',
           inputBuy: '',
@@ -1721,7 +1788,7 @@
       const handleSetCalcState = (newState) => {
           setCalcState((oldState) => ({ ...oldState, ...newState }));
       };
-      return (jsxs("div", { className: `grid gap-3.5 ${className}`, children: [renderInput({
+      return (jsxs("div", { className: `grid gap-[18px] pt-2 ${className}`, children: [renderInput({
                   placeholder: 'Хочу продать',
                   rates: currencyRatesBuy,
                   selected: calcState.selectSell,
@@ -1735,7 +1802,7 @@
                   setSelected: handleSelectBuy(calcState, handleSetCalcState, currencyRatesBuy),
                   value: calcState.inputBuy,
                   setValue: (value) => handleInputBuy(handleSetCalcState, currencyRatesBuy)(value, calcState.selectBuy, calcState.selectSell),
-              }), renderButton()] }));
+              }), button?.text ? renderButton(button) : null] }));
   });
   const handleSelectSell = (calcState, setCalcState, currencyRatesSell) => (value) => {
       setCalcState({ selectSell: value });
@@ -1780,22 +1847,15 @@
       address: 'Москва, ул.Ленина д.28',
       distance: '6км',
   };
-  const ExchangeRateTile = JSX(({ className = '', context, title = 'Курсы обмена валют', ...rest }) => {
+  const ExchangeRateTile = JSX(({ className = '', context, title = 'Курсы обмена валют', button, ...rest }) => {
       const currencyRates = useExchangeRates(context.useAsyncData);
       const currencyRatesBuy = currencyRates.filter((_) => _.buy);
       currencyRatesBuy.unshift({ code: Currency.RUB });
       const currencyRatesSell = currencyRates.filter((_) => _.sell);
       currencyRatesSell.push({ code: Currency.RUB });
-      return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className}`, ...rest, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-[43px] pt-4", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[31px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", context: context, currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell })) : null] }) }) }));
+      return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className}`, ...rest, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap text-h4" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-14 pt-4", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[30px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", context: context, currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
   });
 
-  const LOGO_PATHS = [
-      'm13.72 25.51 4.42-4.33v-2.95l-4.42 4.32v2.96Zm0-10.98 4.42-4.35V7.41l-4.42 4.31v2.8Zm0 3.63 4.42-4.33v-2.78l-4.42 4.32v2.8ZM12.46 7.44l-.6-.56V0h-.66v6.22l-.58-.57V0h-.67v5l-.59-.58V0H8.7v6.56l4.44 4.33V0h-.67v7.44Zm1.26 14.35 4.42-4.33v-2.78L13.72 19v2.8Zm-5.03-.61 4.44 4.33v-2.96l-4.44-4.32v2.95Zm8.79-16.76-.59.58V0h-.66v5.66l-.6.56V0h-.66v6.87l-.58.57V0h-.67v10.9l4.42-4.34V0h-.66v4.42Zm-8.79 5.76 4.44 4.35v-2.8L8.69 7.4v2.77Zm0 3.65 4.44 4.33v-2.8l-4.44-4.3v2.77Zm0 3.63 4.44 4.33V19l-4.44-4.31v2.78Zm26.37 2.29H24.3a2.25 2.25 0 0 0 .36-1.22 2.32 2.32 0 0 0-2.33-2.31 2.32 2.32 0 0 0-2.31 2.31c0 .5.16.96.43 1.34a.74.74 0 0 0-.33.61c0 .26.14.49.33.62a2.32 2.32 0 0 0-.43 1.34 2.31 2.31 0 0 0 2.31 2.31 2.32 2.32 0 0 0 2.33-2.31c0-.45-.13-.87-.36-1.22h8.01v.49h-.8v.68h.8v.7h-.8v1.3h.8v-.58h1.17v.58h.79v-1.3h-.79v-.7h.79v-.68h-.79v-.5h1.58a.56.56 0 0 0 .56-.56v-.34a.57.57 0 0 0-.56-.56Zm-11.53 2.7a1.2 1.2 0 0 1-2.4 0c0-.24.08-.47.2-.66l.34-.56a.97.97 0 0 1-.34-.75c0-.3.13-.56.33-.74l-.32-.56a1.13 1.13 0 0 1-.2-.66 1.2 1.2 0 0 1 2.4 0c0 .49-.56 1.65-.56 1.65v.62c-.01.01.55 1.17.55 1.66ZM4.67 18.34v2.89c0 2.75 1.2 4.53 1.9 5.21l4.58 4.5c1.28 1.25 1.5 1.66 1.79 2.37v-3.2c0-2.84-1.44-3.94-2.19-4.67-1.73-1.68-2.89-2.8-3.82-3.73a8.98 8.98 0 0 1-2.26-3.37Zm6.08 14.24c-1.73-1.7-2.89-2.8-3.82-3.73a10 10 0 0 1-2.25-2.98v2.49a7.87 7.87 0 0 0 1.89 5.24l4.58 4.47c1.28 1.25 1.5 1.85 1.79 2.55v-3.37c0-2.85-1.45-3.95-2.19-4.67Z',
-      'M19.88 5.34c-.32 0-.64 0-.96.02V6.7a18.5 18.5 0 1 1 .95 36.94A18.5 18.5 0 0 1 1.35 25.17c0-5.67 2.55-10.73 6.58-14.13V9.32A19.78 19.78 0 0 0 0 25.17C0 36.12 8.9 45 19.88 45a19.85 19.85 0 0 0 19.86-19.83c0-10.95-8.9-19.83-19.87-19.83Z',
-      'M33.93 35.53c.3-.41.6-.85.87-1.3v-2.66h-.87v3.96Zm2.54-4.92c.12-.4.24-.78.34-1.16h-2.88v.7h.43c.77-.02 1.63-.03 2.11.46Zm-19.19-1.27h-.78v7.91h.78v-7.9Z',
-      'M14.7 27.83h2.58c.67 0 1.14.14 1.4.4.27.25.4.72.4 1.38v7.4c0 .66-.12 1.12-.4 1.38-.4.41-1.16.41-1.78.41l-.4-.01v3.5l.78.14v-2.88c1.2 0 1.97-.4 2.34-1.22v4.29h.26l.5-.01V29.74c0-.68.13-1.16.4-1.43.25-.27.72-.4 1.37-.4.67 0 1.65-.1 2.16.4.26.27.38.76.38 1.43v3.8h-1.77v-4.06h-.77v12.99c.26-.03.5-.07.77-.12V34.3h1.77v7.64c.36-.1.72-.21 1.08-.34v-7c0-.8.19-1.4 1-1.67l-.9-4.87h1.8l.3 5.31h.22l.3-5.31h1.88l-1.01 4.87c.84.3 1.01.81 1.01 1.66v4.53a16.63 16.63 0 0 0 1.5-1.27v-9.83h5.25l.1-.72H24.93l.17.89c-.38-.72-1.12-1.08-2.2-1.08h-.77c-1.3 0-2.1.52-2.4 1.55-.27-1.08-1.1-1.62-2.46-1.62h-3.36v14.52c.26.09.52.18.78.25V27.84Zm16.29 5.58-.85-.8.85-4.37v5.17Z',
-      'M27.66 40.79c.27-.14.55-.28.8-.43v-5.98h-.8v6.4Z',
-  ];
   const SVG_COLOR = {
       'bg-white': 'text-primary-main',
       transparent: 'text-white',
@@ -1805,19 +1865,33 @@
       transparent: 'text-white',
   };
   const Logo = JSX(({ className = '', href, logo, children = logo?.title, targetBlank, bgColor = 'bg-white', hideTitle, }) => {
-      return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [logo?.image?.src ? (jsx(Img, { image: logo.image, className: SVG_COLOR[bgColor], width: "40", height: "45", asSVG: true })) : (jsx(SVG, { className: `${SVG_COLOR[bgColor]} w-10`, viewBox: "0 0 40 45", paths: LOGO_PATHS.map((d) => ({ d })) })), hideTitle ? null : renderTitle(children, bgColor, logo?.title)] }));
+      return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || '/', target: targetBlank ? '_blank' : '_self', "aria-label": logo?.title || 'Россельхозбанк', children: [logo?.image?.src ? (jsx(Img, { image: logo.image, className: SVG_COLOR[bgColor], width: "40", height: "45", asSVG: true })) : (jsx(Img, { image: { icon: 'Logo' }, className: `${SVG_COLOR[bgColor]} w-10`, width: "40", height: "45", asSVG: true })), hideTitle ? null : renderTitle(children, bgColor, logo?.title)] }));
   });
   const renderTitle = (children, bgColor, title) => {
       const text = children || title || 'Россельхозбанк';
       return jsx("span", { className: `${TEXT_COLOR[bgColor]} font-medium ml-2.5`, children: text });
   };
 
-  const SearchBar = JSX(({ className, context }) => {
+  const SearchBarInner = JSX(({ className, context, isMobile = false }) => {
       const { term, setTerm } = context.useSearch();
-      return (jsxs("form", { className: `relative ${className || ''}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: "w-[24px] h-[24px]", children: jsx(Img, { image: "LoupeIcon", width: "24", height: "24" }) }), term ? null : (jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-light text-base text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: 'h-12 pl-12 w-full peer font-sans font-light text-base text-black border border-solid rounded h-full box-border outline-none pr-[6%] border-main-divider focus:border-primary-text', value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input" }), jsx(Button, { version: "primary", text: "\u041D\u0430\u0439\u0442\u0438", className: "invisible peer-focus:visible absolute top-1 right-1", onClick: (e) => {
+      const LoupeIconClassName = isMobile ? 'w-[20px] h-[20px]' : 'w-[24px] h-[24px]';
+      const SearchBarLabelClassName = isMobile ? 'font-normal text-sm' : 'font-light text-base';
+      const SearchBarInputClassName = isMobile
+          ? ' placeholder-transparent font-normal'
+          : 'font-light h-full';
+      const inputPlaceholder = isMobile ? 'some search' : undefined;
+      return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: LoupeIconClassName, children: jsx(Img, { image: "LoupeIcon", width: "24", height: "24" }) }), term ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text ${SearchBarLabelClassName}`, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: `h-12 pl-12 w-full peer text-base text-black border border-solid rounded box-border
+              outline-none pr-[6%] border-main-divider focus:border-primary-text ${SearchBarInputClassName}`, value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input", placeholder: inputPlaceholder }), isMobile ? (jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
                       e.preventDefault();
+                      setTerm('');
+                  }, children: jsx(Img, { image: "CloseIcon", width: "24", height: "24" }) })) : (jsx(Button, { version: "primary", text: "\u041D\u0430\u0439\u0442\u0438", className: "invisible peer-focus:visible absolute top-1 right-1", onClick: (ev) => {
+                      ev?.preventDefault();
                       console.log('click');
-                  }, children: jsx("div", { className: "font-normal text-sm px-9 py-[9px]", children: "\u041D\u0430\u0439\u0442\u0438" }) })] }));
+                  }, children: jsx("div", { className: "font-normal text-sm px-9 py-[9px]", children: "\u041D\u0430\u0439\u0442\u0438" }) }))] }));
+  });
+
+  const SearchBar = JSX(({ className = '', context }) => {
+      return jsx(SearchBarInner, { context: context, className: className });
   });
 
   const Contacts = JSX(({ className = '', items, hasButton, context }) => {
@@ -1845,12 +1919,13 @@
   };
   const formatTel = (s) => s.replaceAll(/\D/g, '');
 
+  const HorizontalNavigationLink = JSX(({ className = '', index, text, href, target, onClick }) => (jsx("a", { className: `font-sans text-secondary-text hover:text-primary-main inline-block no-underline ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
+
   const HorizontalNavigation = JSX(({ links, className = '', context }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsx("div", { className: className, children: links?.length ? (jsx("div", { className: "flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null }));
+      return (jsx("div", { className: className, children: links?.length ? (jsx("div", { className: "flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, className: "font-light max-w-[292px]", ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null }));
   });
-  const HorizontalNavigationLink = JSX(({ className = '', index, text, href, target, onClick }) => (jsx("a", { className: `font-sans font-light text-secondary-text hover:text-primary-main inline-block no-underline  max-w-[292px] ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
 
   const cmp = (a) => (b) => a?.href === b?.href;
   const substitute = (items, substitution) => (items || []).map((_) => substitution?.find(cmp(_)) || _);
@@ -1920,7 +1995,8 @@
           ? 'bg-secondary-light hover:bg-secondary-hover'
           : 'border-main-divider border-solid border-[1px] hover:bg-primary-main';
       const isPrimary = version === 'primary';
-      return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(Img, { image: icon, imageClassName: isPrimary ? 'group-hover:text-white' : '', width: "24", height: "24", asSVG: true })) : null }));
+      const imageClassName = isPrimary ? 'group-hover:text-white' : '';
+      return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(Img, { image: icon, imageClassName: imageClassName, width: "24", height: "24", asSVG: true })) : null }));
   });
 
   const SocialMedia = JSX(({ className = '', media, version, context, children }) => {
@@ -1929,12 +2005,13 @@
       return (jsxs("div", { children: [jsx("div", { className: `flex gap-2.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { version: version, ...useLink({ router, handlerDecorator }, _) }, String(index)))) }), jsx("span", { className: "font-light text-sm text-secondary-text", children: children })] }));
   });
 
+  const TextInformationLink = JSX(({ className = '', index, text, href, target, onClick }) => (jsx("a", { className: `font-sans text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
+
   const TextInformation = JSX(({ className, links, context }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { className: "pt-5", children: jsx("span", { className: "font-sans font-light text-xs 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-2.5", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
+      return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { className: "pt-5", children: jsx("span", { className: "font-sans font-light text-xs 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-2.5", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, className: "font-light", ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
   });
-  const TextInformationLink = JSX(({ className, index, text, href, target, onClick }) => (jsx("a", { className: `font-sans font-light text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${className || ''}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
 
   const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
   const Footer = JSX(({ className, documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, context, ...rest }) => {
@@ -1968,7 +2045,7 @@
   };
 
   const GroupBlocksItem = JSX(({ groupBlocks, context }) => {
-      return (jsx("div", { className: "grid grid-cols-12 gap-2 box-border", children: groupBlocks?.length ? groupBlocks.map(renderBlock$1(context)) : null }));
+      return (jsx("div", { className: "grid grid-cols-12 gap-1 box-border", children: groupBlocks?.length ? groupBlocks.map(renderBlock$1(context)) : null }));
   });
   const renderBlock$1 = (context) => (block, i) => {
       const type = block?.blockType;
@@ -1981,17 +2058,19 @@
   };
 
   const GroupBlockTabs = JSX((props) => {
-      const { tabs, currentTag, onTabClick, className = '', isShowCounter } = props;
-      return (jsx("div", { className: `mb-2 box-border flex gap-x-1 ${className}`, role: "tablist", children: tabs?.map(renderTab$1(onTabClick, isShowCounter, currentTag)) }));
+      const { className = '', tabs, currentTag, isShowCounter = false, onTabClick } = props;
+      return (jsx("div", { className: `box-border flex gap-x-1 h-14 ${className}`, role: "tablist", children: tabs?.map(renderTab$1({ currentTag, isShowCounter, onTabClick })) }));
   });
-  const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-m-sm';
-  const renderTab$1 = (onTabClick, isShowCounter, currentTag) => (tab, i) => {
+  const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2';
+  const renderTab$1 = ({ currentTag, isShowCounter, onTabClick }) => (tab, i) => {
       const isActive = currentTag === tab.tag;
       const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
-      const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
-      const counterBlockStyle = `${badgeStyle} 
-      ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-light text-secondary-text'}`;
-      return (jsx("div", { className: `flex h-full w-full h-12 flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`, role: "tab", onClick: () => onTabClick(tab.tag), "aria-selected": String(isActive), tag: tab?.tag, children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? jsx("h3", { className: tabText, children: tab?.title }) : null, isShowCounter ? (jsx("div", { className: `flex items-center justify-center ml-8 text-s-bold ${counterBlockStyle}`, children: jsx("span", { children: tab.count }) })) : null] }) }, String(i)));
+      const tabText = `text-m ${isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main'}`;
+      const counterBlockStyle = `${badgeStyle}
+      ${isActive
+        ? 'bg-white/30 text-white'
+        : 'bg-main-divider text-secondary-text group-hover:text-primary-main'}`;
+      return (jsxs("div", { className: `flex-1 flex items-center justify-center cursor-pointer ${tabBg}`, role: "tab", onClick: () => onTabClick(tab.tag), "aria-selected": isActive, children: [tab?.title ? jsx("div", { className: tabText, children: tab.title }) : null, isShowCounter ? (jsx("div", { className: `flex items-center justify-center ${counterBlockStyle}`, children: tab.count })) : null] }, String(i)));
   };
 
   const GroupBlock = JSX(({ className = '', tabs, context, groupBlocks = [], isShowCounter, ...rest }) => {
@@ -2003,7 +2082,7 @@
               : groupBlocks.length;
           return { ...tab, count };
       });
-      return (jsxs(BlockWrapper, { context: context, className: `box-border gap-1 ${className}`, ...rest, children: [tabsNewMap?.length ? (jsx(GroupBlockTabs, { currentTag: currentTag, onTabClick: setCurrentTag, tabs: tabsNewMap, isShowCounter: isShowCounter })) : null, groupBlocks.length ? (jsx(GroupBlocksItem, { context: context, groupBlocks: filteredBlocks })) : null] }));
+      return (jsxs(BlockWrapper, { context: context, className: `box-border ${className}`, ...rest, children: [tabsNewMap?.length ? (jsx(GroupBlockTabs, { currentTag: currentTag, onTabClick: setCurrentTag, tabs: tabsNewMap, isShowCounter: isShowCounter })) : null, groupBlocks.length ? (jsx("div", { className: "mt-1", children: jsx(GroupBlocksItem, { context: context, groupBlocks: filteredBlocks }) })) : null] }));
   });
 
   const checkIsHrefSameOrigin = (href, router) => getOrigin(href) === getOrigin(router.href);
@@ -2059,23 +2138,22 @@
 
   const findActiveSubItem = (router) => (items = []) => {
       const possibleActiveSubItems = items?.filter(isSubItemActive(router));
-      const activeSubItem = possibleActiveSubItems?.length
+      return possibleActiveSubItems?.length
           ? maxBy((_) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
-          : null;
-      return activeSubItem;
+          : undefined;
   };
 
   const TEXT_CLASSES$1 = 'font-sans font-light text-base';
   const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
   const HeaderItem = JSX(({ className = '', text, href, target, active, onClick, children, bgColor = 'bg-white', dataItemName, }) => (jsxs("a", { className: `relative inline-block bg-transparent text-center no-underline ${className}`, href: href, target: target, onClick: onClick, "data-item-name": dataItemName, children: [jsx("span", { className: getTextClasses$1(bgColor, active), children: text || children }), active ? jsx("div", { className: getBorderClasses(bgColor, active) }) : null] })));
-  const getTextClasses$1 = (bgColor, active) => {
+  const getTextClasses$1 = (bgColor, active = false) => {
       let classes = 'text-white';
       if (bgColor === 'bg-white') {
           classes = active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main';
       }
       return `${classes} ${TEXT_CLASSES$1}`;
   };
-  const getBorderClasses = (bgColor, active) => {
+  const getBorderClasses = (bgColor, active = false) => {
       if (!active) {
           return BORDER_CLASSES;
       }
@@ -2087,12 +2165,15 @@
       transparent: 'bg-white',
   };
   const DropdownMenu = JSX((props) => {
-      const { menuVisible, toggleMenu, menuItems, bgColor, context } = props;
+      const { menuVisible, toggleMenu, menuItems, bgColor, context, activeSubItem } = props;
       const { useRouter, handlerDecorator } = context;
       const router = useRouter();
-      return (jsxs("div", { className: `absolute w-52 -top-4 right-0 pt-4 z-40 ${menuVisible ? 'bg-white rounded-md shadow-blue-gray/24' : ''}`, children: [jsx("button", { className: "flex justify-between items-center cursor-pointer h-6 ml-6", onClick: toggleMenu, "aria-label": `${menuVisible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, children: Array(3).fill(bgColor).map(renderDot) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${menuVisible ? '' : 'hidden'}`, "aria-hidden": !menuVisible, children: renderDotsSubMenuItems(menuItems, router, handlerDecorator) })] }));
+      return (jsxs("div", { className: `absolute w-52 -top-4 right-0 pt-4 z-40 ${menuVisible ? 'bg-white rounded-md shadow-blue-gray/24' : ''}`, children: [jsx("button", { className: "flex justify-between items-center cursor-pointer h-6 ml-6", onClick: toggleMenu, "aria-label": `${menuVisible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, children: Array(3).fill(bgColor).map(renderDot) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${menuVisible ? '' : 'hidden'}`, "aria-hidden": !menuVisible, children: renderDotsSubMenuItems({ menuItems, router, handlerDecorator, activeSubItem }) })] }));
   });
-  const renderDotsSubMenuItems = (menuItems, router, handlerDecorator) => menuItems?.map((_) => (jsx("a", { ...useLink({ router, handlerDecorator }, _), className: "text-base font-light pb-4 hover:text-primary-main", children: _.text }, _.href)));
+  const renderDotsSubMenuItems = ({ menuItems, router, handlerDecorator, activeSubItem, }) => {
+      const isActive = (item) => item === activeSubItem;
+      return menuItems?.map((_) => (jsx("a", { ...useLink({ router, handlerDecorator }, _), className: `text-base font-light pb-4 hover:text-primary-main ${isActive(_) ? 'text-primary-main' : ''}`, children: _.text }, _.href)));
+  };
   const renderDot = (bgColor, i) => (jsx("div", { className: `w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}` }, String(i)));
 
   const HeaderSubMenu = JSX(({ context, subItems = [], bgColor }) => {
@@ -2115,7 +2196,7 @@
               setVisibleItemsCount((prev) => Math.max(prev, itemIndex + 1));
           }
       };
-      return (jsxs("nav", { className: "relative mt-5", children: [jsx("div", { className: "overflow-hidden whitespace-nowrap mr-52", children: subItems.map((_, i) => (jsx(IntersectionObserverTag, { Tag: "span", observerCallback: observerCallback(i), observerOptions: { threshold: 1 }, children: jsx(HeaderItem, { className: `mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`, active: _ === activeSubItem, ...useLink({ router, handlerDecorator }, _), bgColor: bgColor }) }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { context: context, menuVisible: menuVisible, toggleMenu: toggleMenu, menuItems: dropDownMenuItems, bgColor: bgColor })) : null] }));
+      return (jsxs("nav", { className: "relative mt-5", children: [jsx("div", { className: "overflow-hidden whitespace-nowrap mr-52 pb-3", children: subItems.map((_, i) => (jsx(IntersectionObserverTag, { Tag: "span", observerCallback: observerCallback(i), observerOptions: { threshold: 1 }, children: jsx(HeaderItem, { className: `mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`, active: _ === activeSubItem, ...useLink({ router, handlerDecorator }, _), bgColor: bgColor }) }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { context: context, activeSubItem: activeSubItem, menuVisible: menuVisible, toggleMenu: toggleMenu, menuItems: dropDownMenuItems, bgColor: bgColor })) : null] }));
   });
 
   const BORDER_COLORS = {
@@ -2129,14 +2210,14 @@
       const mergedItems = mergeTopItems(sitemap.topItems, topItems);
       const activeTopItem = mergedItems.find(isTopItemActive(router));
       const topMenu = mergedItems.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ...useLink({ router, handlerDecorator }, _), "aria-label": _.text, bgColor: bgColor }, String(i))));
-      return (jsx(BlockWrapper, { Tag: "header", context: context, className: `pt-6 pb-8 px-20 ${bgColor} ${className}`, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { context: context, className: "ml-auto", defaultLocation: defaultLocation, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-[1px] ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { context: context, subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
+      return (jsx(BlockWrapper, { Tag: "header", context: context, className: `pt-6 pb-5 px-20 ${bgColor} ${className}`, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { context: context, className: "ml-auto", defaultLocation: defaultLocation, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-[1px] ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { context: context, subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
   });
 
-  const Insurance = JSX(({ className = '', title, description, image, benefits, sum, monthLimit, ...rest }) => {
-      return (jsxs(BlockWrapper, { className: `px-[100px] py-[50px] bg-white text-primary-text font-sans ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "text-center" }) : null, description ? jsx("div", { className: "text-center text-md mt-3", children: description }) : null, jsx("div", { children: jsxs("div", { className: "mt-5 mx-auto flex justify-center gap-[122px] mt-[30px]", children: [image?.src ? jsx(Img, { image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] }) })] }));
+  const Insurance = JSX(({ context, className = '', title, description, image, benefits, sum, monthLimit, ...rest }) => {
+      return (jsxs(BlockWrapper, { className: `px-[100px] py-[50px] bg-white text-primary-text font-sans ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center" }), jsx("div", { children: jsxs("div", { className: "mt-5 mx-auto flex justify-center gap-[122px] mt-[30px]", children: [image?.src ? jsx(Img, { image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] }) })] }));
   });
   function renderBenefit(benefit, i) {
-      return (jsxs("div", { className: "flex items-center gap-4", children: [benefit?.icon ? (jsx(Img, { className: "w-12 h-12 min-w-12 p-3 rounded-full bg-secondary-light", image: benefit.icon, asSVG: true })) : null, jsxs("div", { children: [benefit?.label ? jsx("div", { className: "text-title-2xs font-normal", children: benefit.label }) : null, benefit?.description ? (jsx("div", { className: "mt-0.5 font-light text-secondary-text font-light", children: benefit.description })) : null] })] }, String(i)));
+      return (jsxs("div", { className: "flex items-center gap-4", children: [benefit?.icon ? (jsx(Img, { className: "w-12 h-12 min-w-12 p-3 rounded-full bg-secondary-light", image: benefit.icon, asSVG: true })) : null, jsxs("div", { children: [benefit?.label ? jsx("div", { className: "text-h6", children: benefit.label }) : null, benefit?.description ? (jsx("div", { className: "mt-0.5 text-secondary-text text-m", children: benefit.description })) : null] })] }, String(i)));
   }
   function renderInsuranceSumMonth(sum, monthLimit) {
       return sum || monthLimit ? (jsxs("div", { className: "bg-secondary-light h-15 flex mt-7 gap-6 px-5 py-4", children: [Number.isFinite(sum) ? renderValueBlock$1('Страховая сумма:', sum, Boolean(monthLimit)) : null, Number.isFinite(monthLimit)
@@ -2145,7 +2226,7 @@
   }
   function renderValueBlock$1(title, sum, isAnotherBlock) {
       const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
-      return (jsxs("div", { className: `flex justify-between items-center gap-2 w-full ${widthStyle}`, children: [jsx("span", { className: "text-secondary-text text-base", children: title }), jsxs("span", { className: "text-primary-main text-title-2xs", children: [addSpacesBetweenNumbers(sum), " \u20BD"] })] }));
+      return (jsxs("div", { className: `flex justify-between items-center gap-2 w-full ${widthStyle}`, children: [jsx("span", { className: "text-secondary-text text-l-light", children: title }), jsxs("span", { className: "text-primary-main text-h6", children: [addSpacesBetweenNumbers(sum), " \u20BD"] })] }));
   }
 
   const InsuranceAmountBlockInner = JSX(({ className = '', context, cards = [] }) => {
@@ -2158,20 +2239,21 @@
       const showNextButton = isGalleryScrollAvailable && galleryLength > tabsShift + 2;
       const isLastShift = galleryLength === tabsShift + 2;
       const showPrevButton = tabsShift > 0;
-      return (jsx("section", { className: `min-w-full ${className}`, children: jsxs("div", { className: "relative mt-7 overflow-hidden", children: [galleryLength
-                      ? renderGallery({
-                          tabsShift,
-                          cards,
-                          activeSlideIndex,
-                          isLastShift,
-                          setActiveSlideIndex,
-                      })
-                      : null, renderArrows({
-                      handler: [handlePrevClick, handleNextClick],
-                      isShown: [showPrevButton, showNextButton],
-                      btnClass: ['left-[50px]', 'right-[50px]'],
-                      className: 'top-[62px]',
-                  }), showPrevButton ? (jsx("div", { className: "absolute top-0 left-0 h-full w-[136px] bg-opacity-from-white" })) : null, showNextButton ? (jsx("div", { className: "absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" })) : null] }) }));
+      const activeHref = cards[activeSlideIndex]?.href;
+      return (jsxs("section", { role: "listitem", className: `min-w-full text-center ${className}`, children: [jsxs("div", { className: "relative mt-7 overflow-hidden", children: [galleryLength
+                          ? renderGallery({
+                              tabsShift,
+                              cards,
+                              activeSlideIndex,
+                              isLastShift,
+                              setActiveSlideIndex,
+                          })
+                          : null, renderArrows({
+                          handler: [handlePrevClick, handleNextClick],
+                          isShown: [showPrevButton, showNextButton],
+                          btnClass: ['left-[50px]', 'right-[50px]'],
+                          className: 'top-[62px]',
+                      }), showPrevButton ? (jsx("div", { className: "absolute top-0 left-0 h-full w-[136px] bg-opacity-from-white" })) : null, showNextButton ? (jsx("div", { className: "absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" })) : null] }), jsx(Button, { className: "w-[240px] p-4 text-center", version: "primary", href: activeHref, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u043F\u0440\u043E\u0433\u0440\u0430\u043C\u043C\u0443" })] }));
   });
   function renderGallery({ tabsShift, cards, activeSlideIndex, isLastShift, setActiveSlideIndex, }) {
       const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
@@ -2187,32 +2269,32 @@
       const btnClassName = isActiveBtn
           ? 'shadow-dark-blue/42 border-primary-main'
           : `ease-in duration-300 border-main-stroke`;
-      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: `h-[108px] w-[108px] p-3 rounded-full bg-secondary-light mr-[30px]`, image: slide.icon, width: "24", height: "24" })) : null, jsxs("div", { className: "flex gap-3.5", children: [slide?.sum ? renderValueBlock('страховая сумма', slide.sum) : null, slide?.fee ? renderValueBlock('страховой взнос', slide.fee) : null] }), renderDoneIcon(isActiveBtn)] }, String(i)));
+      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-3 rounded-full bg-secondary-light mr-[30px]", image: slide.icon, width: "70", height: "70" })) : null, jsxs("div", { className: "flex gap-3.5", children: [slide?.sum ? renderValueBlock('страховая сумма', slide.sum) : null, slide?.fee ? renderValueBlock('страховой взнос', slide.fee) : null] }), renderDoneIcon(isActiveBtn)] }, String(i)));
   }
   function renderValueBlock(title, sum) {
-      return (jsxs("div", { className: "flex flex-col text-left", children: [jsxs("span", { className: "whitespace-pre text-title-2xs", children: [addSpacesBetweenNumbers(sum), " \u20BD"] }), jsx("span", { className: "whitespace-pre text-secondary-text font-light text-base mt-1", children: title })] }));
+      return (jsxs("div", { className: "flex flex-col text-left whitespace-pre", children: [jsxs("span", { className: "text-h6", children: [addSpacesBetweenNumbers(sum), " \u20BD"] }), jsx("span", { className: "text-secondary-text text-l mt-1", children: title })] }));
   }
   function renderDoneIcon(isActive) {
       return isActive ? (jsx(Img, { className: `h-[24px] w-[24px] min-w-[24px] min-h-[24px] absolute right-4 top-4`, image: "DoneIcon", width: "24", height: "24" })) : null;
   }
 
-  const InsuranceAmountBlock = JSX(({ className = '', context, title, insuranceTabs = [], button, ...rest }) => {
+  const InsuranceAmountBlock = JSX(({ className = '', context, title, insuranceTabs = [], ...rest }) => {
       const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
-      return (jsxs(BlockWrapper, { context: context, className: `box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white ${className}`, ...rest, children: [title ? jsx(Heading, { className: "text-center", title: title, headingType: "h3" }) : null, jsx("div", { className: "p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]", children: insuranceTabs.map((item, i) => renderNavButton$1({
+      return (jsxs(BlockWrapper, { context: context, className: `box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white ${className}`, ...rest, children: [title ? jsx(Heading, { className: "text-center", title: title, headingType: "h3" }) : null, insuranceTabs?.length > 1 ? (jsx("div", { className: "p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]", children: insuranceTabs.map((item, i) => renderNavButton$1({
                       title: item?.title,
                       i,
                       activeSlideIndex,
                       onClick: () => setActiveSlideIndex(i),
-                  })) }), jsx("div", { className: "flex", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: renderInsuranceGalleries({
+                  })) })) : null, jsx("div", { className: "flex", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: renderInsuranceGalleries({
                       context,
                       className,
                       insuranceTabs,
-                  }) }), button?.text ? (jsx("div", { className: "flex justify-center", children: jsx(Button, { className: "box-border p-4 h-14 w-full max-w-[240px]", version: button?.version || 'primary', href: button.href, children: button.text }) })) : null] }));
+                  }) })] }));
   });
   const renderInsuranceGalleries = ({ insuranceTabs, context, className = '', }) => {
       const insuranceGalleries = insuranceTabs?.map((_) => _.cards);
       return insuranceGalleries?.length
-          ? insuranceGalleries.map((cards) => (jsx(InsuranceAmountBlockInner, { context: context, className: className, cards: cards })))
+          ? insuranceGalleries.map((cards, i) => (jsx(InsuranceAmountBlockInner, { context: context, className: className, cards: cards }, String(i))))
           : null;
   };
   function renderNavButton$1({ title, i, activeSlideIndex, onClick }) {
@@ -2220,7 +2302,7 @@
       const btnClassName = isActiveBtn
           ? 'bg-primary-main text-white rounded-md'
           : `text-secondary-text`;
-      return (jsx("button", { type: "button", onClick: onClick, "aria-label": title, className: `box-border px-4 py-3 text-m-md ${btnClassName}`, children: title }, String(i)));
+      return (jsx("button", { type: "button", onClick: onClick, "aria-label": title, className: `box-border px-4 py-3 text-m ${btnClassName}`, children: title }, String(i)));
   }
 
   const mobileAppStyleMap = {
@@ -2232,11 +2314,11 @@
       return (jsxs(BlockWrapper, { context: context, className: `flex justify-between font-sans p-9 box-border relative
         ${getTileRightPadding(className)} ${getTileMinHeight(className)}
         ${mobileAppStyleMap[version]}
-        ${className}`, ...rest, children: [jsx(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: "h3", title: title, className: `whitespace-pre-wrap max-w-[509px] mb-6
-                  ${textColorClass}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-[30px] gap-4" })) : null, children: jsxs("div", { className: "flex flex-1 items-center", children: [qr?.src && qr?.href && (jsx("a", { href: qr.href, target: "_blank", "aria-label": title, children: jsx("img", { src: qr.src, alt: title, title: title, width: "122", height: "122", className: "w-[122px] h-[122px] min-w-[122px] min-h-[122px] bg-secondary-light mr-[23px] rounded-md" }) })), renderList$1(version, items)] }) }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(Img, { image: image }) })) : null] }));
+        ${className}`, ...rest, children: [jsx(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: "h4", as: "h3", title: title, className: `whitespace-pre-wrap max-w-[509px] mb-6
+                  ${textColorClass}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-[30px] gap-4" })) : null, children: jsxs("div", { className: "flex flex-1 items-center", children: [qr?.src && qr?.href && (jsx("a", { href: qr.href, target: "_blank", "aria-label": title, children: jsx("img", { src: qr.src, alt: title, title: title, width: "122", height: "122", className: "w-[122px] h-[122px] min-w-[122px] min-h-[122px] bg-secondary-light mr-4 rounded-md" }) })), renderList$1(version, items)] }) }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(Img, { image: image }) })) : null] }));
   });
   const renderList$1 = (version, items) => {
-      return items?.length ? (jsx(List, { items: items, itemClassName: "base font-light mb-2 last:mb-0", version: version === 'primary' ? 'tile' : 'tile-white' })) : (jsx("span", { className: "font-light text-secondary-text ml-4", 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, itemClassName: "base font-light mb-2 last:mb-0", version: version === 'primary' ? 'tile' : 'tile-white' })) : (jsx("span", { className: "text-m 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 NavigationItem = JSX(({ className, text, onClick, href, target, isActive }) => (jsx("a", { className: `bg-inherit no-underline px-4 py-2.5 cursor-pointer rounded text-sm border border-solid hover:text-primary-main ${className || ''} ${isActive ? 'border-primary-main text-primary-main' : 'border-white text-secondary-text'}`, onClick: onClick, href: href, target: target, children: text })));
@@ -2250,14 +2332,14 @@
                       .map((button, i) => (jsx(NavigationItem, { className: "first:rounded-tl-md first:rounded-bl-md last:rounded-tr-md last:rounded-br-md", isActive: button === activeButton, ...useLink({ router, handlerDecorator }, button) }, String(i)))) })) : null] }));
   });
 
-  const TEXT_CLASSES = 'font-sans font-normal text-m-md';
+  const TEXT_CLASSES = 'font-sans text-m';
   const LINK_CLASSES = 'flex-1 flex items-center justify-center cursor-pointer';
   const NavigatorTabItem = JSX(({ className = '', text, active, onClick, href, target = '_self', children }) => (jsx("a", { className: getLinkClasses(className, active), target: target, href: href, onClick: onClick, children: jsx("span", { className: getTextClasses(active), children: text || children }) })));
-  const getLinkClasses = (className, active) => {
+  const getLinkClasses = (className, active = false) => {
       const classes = active ? 'bg-primary-main' : 'group bg-white';
       return `${classes} ${LINK_CLASSES} ${className}`;
   };
-  const getTextClasses = (active) => {
+  const getTextClasses = (active = false) => {
       const classes = active ? 'text-white' : 'text-secondary-text group-hover:text-primary-main ';
       return `${classes} ${TEXT_CLASSES}`;
   };
@@ -2298,8 +2380,10 @@
           context,
           initialState: isUnfolded,
       });
-      return blocks ? (jsxs("div", { children: [renderBlocks(blocks, render, { blocksToHide, isActive, containerClasses }), hiddenBlocksNum ? (jsxs("button", { className: foldButtonClasses ||
-                      'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer', "data-theme": foldButtonDataTheme, onClick: handleToggle, children: [jsx("span", { className: "pr-3", children: isActive ? 'Скрыть' : foldButtonLabel }), icon ? jsx(Icon, { name: icon, iconVersion: "white", width: "20", height: "20", asSVG: true }) : null] })) : null] })) : null;
+      const buttonClassName = foldButtonClasses ||
+          'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer';
+      const getFoldButtonLabel = isActive ? 'Скрыть' : foldButtonLabel;
+      return blocks ? (jsxs("div", { children: [renderBlocks(blocks, render, { blocksToHide, isActive, containerClasses }), hiddenBlocksNum ? (jsxs("button", { className: buttonClassName, "data-theme": foldButtonDataTheme, onClick: handleToggle, children: [jsx("span", { className: "pr-3", children: getFoldButtonLabel }), icon ? jsx(Icon, { name: icon, iconVersion: "white", width: "20", height: "20", asSVG: true }) : null] })) : null] })) : null;
   });
   const renderBlocks = (blocks, render, { blocksToHide, isActive, containerClasses }) => {
       const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
@@ -2312,7 +2396,7 @@
           context,
           blocks,
       });
-      return (jsx("div", { className: "border-0 border-b border-solid border-main-divider", children: blocks?.length ? (jsx(Foldable, { foldButtonDataTheme: dataTheme, hiddenBlocksNum: blocks?.length, blocks: foldableBlocks, isUnfolded: isUnfolded, context: context, foldButtonLabel: label, containerClasses: "grid grid-cols-12 gap-1 border-box", render: (children, isActive) => jsx(Wrapper$1, { isActive: isActive, children: children }) })) : null }));
+      return (jsx("div", { className: "border-0 border-b border-solid border-main-divider", children: blocks?.length ? (jsx(Foldable, { foldButtonDataTheme: dataTheme, hiddenBlocksNum: blocks?.length, blocks: foldableBlocks, isUnfolded: isUnfolded, context: context, foldButtonLabel: label, containerClasses: "grid grid-cols-12 gap-1 border-box", render: (children) => jsx(Wrapper$1, { children: children }) })) : null }));
   });
   const Wrapper$1 = JSX(({ children }) => {
       return jsx("div", { className: "box-border", children: children });
@@ -2322,9 +2406,22 @@
       return (jsx(BlockWrapper, { context: context, className: `font-sans text-primary-text ${className}`, ...rest, children: blockItems?.length ? (jsx("div", { className: "box-border1", children: blockItems.map((item, i) => (jsx(OtherProductsItem, { ...item, dataTheme: colorPalette, context: context }, `BlockItem${i}`))) })) : null }));
   });
 
+  function getTileHeadingType(className = '') {
+      const colSpan = getColSpan(className);
+      if (colSpan <= 4) {
+          return 'S';
+      }
+      else if (colSpan <= 8) {
+          return 'M';
+      }
+      else {
+          return 'L';
+      }
+  }
+
   const GOLDEN_RATIO = 1.618;
   const Placeholder = JSX(({ className, context, title, description = 'Блок в разработке...', ...rest }) => {
-      return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, children: [description ? (jsx(Description, { className: "mt-4 max-w-[600px]", description: description })) : null, jsx("figure", { className: "m-0 min-w-[600px]", children: renderShimmer() })] }) }));
+      return (jsxs(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: [jsx(Headline, { context: context, className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: getTileHeadingType(className) }), jsx("figure", { className: "m-0 min-w-[600px]", children: renderShimmer() })] }));
   });
   const renderShimmer = (size = 3) => goldenSequence(100, size)
       .map((_) => Math.floor(_))
@@ -2385,7 +2482,7 @@
       secondary: 'bg-primary-main text-white',
   };
   const PromoTile = JSX(({ className = '', context, title = 'Акции и спецпредложения', date, description, buttons = [], version = 'primary', ...rest }) => {
-      return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${promoTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsx(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-sm mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-base", children: description })] }) }) }));
+      return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${promoTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsx(BaseTile, { context: context, title: title ? (jsx("div", { children: jsx(Headline, { context: context, title: title, className: `!p-0 max-w-[600px]`, headlineVersion: getTileHeadingType(className), bgColorHeadline: version }) })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-sm mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-base", children: description })] }) }) }));
   });
   function formatDate(date) {
       const dateObj = new Date(date);
@@ -2440,13 +2537,15 @@
           background: 'bg-white',
           title: 'text-primary-text',
           description: 'text-secondary-text',
-          iconBackground: 'bg-secondary-light',
+          iconText: 'text-secondary-text',
+          iconBackground: 'bg-main-divider',
           iconConnector: 'bg-secondary-light',
       },
       secondary: {
           background: 'bg-primary-main',
           title: 'text-white',
           description: 'text-white/80',
+          iconText: 'text-white',
           iconBackground: 'bg-white/30',
           iconConnector: 'bg-white',
       },
@@ -2456,6 +2555,8 @@
   const StepsBlock = JSX(({ className = '', title, showLines = true, steps = [], button, version = 'primary', ...rest }) => {
       const styleMap = getStyleMap(version);
       const shortGaps = steps.length > 3;
+      const stepGap = shortGaps ? 'gap-x-3' : 'gap-x-[101px]';
+      const lineOpacity = showLines ? '' : 'opacity-0';
       return (jsxs(BlockWrapper, { className: [
               'box-border font-sans text-primary-text bg-white',
               shortGaps ? 'px-20' : 'px-[70px]',
@@ -2463,13 +2564,13 @@
               styleMap.background,
               styleMap.title,
               className,
-          ].join(' '), ...rest, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center", title: title }), steps?.length ? (jsxs("div", { className: `box-border ${title ? 'mt-9' : ''}`, children: [jsx("div", { className: "flex items-center px-[88px]", children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}` }))(steps.map(renderStepIcon(styleMap))) }), jsx("div", { className: `flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepTitle(styleMap, Boolean(button?.text))) })] })) : null, button?.text ? (jsx(Button, { className: "mt-8 w-full max-w-[240px]", version: "primary", ...button })) : null] }));
+          ].join(' '), ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: "max-w-[47rem] text-center mb-9", title: title })) : null, steps?.length ? (jsxs("div", { className: "box-border", children: [jsx("div", { className: "flex items-center px-[88px]", children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${lineOpacity}` }))(steps.map(renderStepIcon(styleMap))) }), jsx("div", { className: `flex justify-between whitespace-pre-line ${stepGap}`, children: steps.map(renderStepTitle(styleMap, Boolean(button?.text))) })] })) : null, button?.text ? (jsx(Button, { className: "mt-8 w-full max-w-[240px]", version: "primary", ...button })) : null] }));
   });
   const renderStepIcon = (styleMap) => ({ icon }, i) => {
-      return (jsx("div", { className: "flex flex-col items-center text-center relative", children: jsx("div", { className: `h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 ${styleMap.iconBackground}`, children: checkIsIconRenderable(icon) ? (jsx(Img, { image: icon, width: "48", height: "48", asSVG: true })) : (jsx("span", { className: `font-normal text-title-sm ${styleMap.title}`, children: i + 1 })) }) }, String(i)));
+      return (jsx("div", { className: "flex flex-col items-center text-center", children: jsx("div", { className: `h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center ${styleMap.iconBackground}`, children: checkIsIconRenderable(icon) ? (jsx(Img, { image: icon, width: "48", height: "48", asSVG: true })) : (jsx("span", { className: `text-h4 ${styleMap.iconText}`, children: i + 1 })) }) }, String(i)));
   };
   const renderStepTitle = (styleMap, isMainButton) => (step, i) => {
-      return (jsxs("div", { className: "flex flex-col items-center justify-between text-center relative w-[276px] whitespace-pre-line overflow-hidden", children: [jsxs("div", { children: [step.label ? jsx("div", { className: "font-normal text-xl-light m-0 mt-4", children: step.label }) : null, step.description ? (jsx("div", { className: `font-light text-base ${styleMap.description} ${step.label ? 'mt-2' : 'mt-4'}`, children: step.description })) : null] }), step?.button?.text && !isMainButton ? (jsx(Button, { className: "box-border mt-8 py-3 h-12 w-full max-w-[240px]", version: "primary", href: step?.button?.href, children: step.button.text })) : null] }, String(i)));
+      return (jsxs("div", { className: "flex flex-col items-center justify-between text-center w-[276px] overflow-hidden", children: [jsxs("div", { children: [step.label ? jsx("div", { className: "text-xl m-0 mt-4", children: step.label }) : null, step.description ? (jsx("div", { className: `text-l ${styleMap.description} ${step.label ? 'mt-2' : 'mt-4'}`, children: step.description })) : null] }), step?.button?.text && !isMainButton ? (jsx(Button, { className: "mt-8 py-4 w-full max-w-[240px]", version: "primary", href: step?.button?.href, children: step.button.text })) : null] }, String(i)));
   };
 
   const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';