@redneckz/wildless-cms-uni-blocks 0.3.85 → 0.3.87

package/bundle/bundle.umd.js

@@ -194,30 +194,28 @@
       if (entry.isIntersecting) ;
   };
 
-  const BlockWrapper = JSX(({ anchor, className, context, children, Tag = 'section' }) => {
+  const BlockWrapper = JSX(({ anchor, className, context, children, tag = 'section' }) => {
       const { IntersectionObserverTag } = context;
-      return anchor ? (jsx(IntersectionObserverTag, { Tag: Tag, className: className, observerCallback: changeHashOnObserve, observerOptions: { threshold: 1 }, anchor: anchor, children: children })) : (jsx(Tag, { className: className, children: children }));
+      const Tag = tag;
+      return anchor ? (jsx(IntersectionObserverTag, { tag: tag, className: className, observerCallback: changeHashOnObserve, observerOptions: { threshold: 1 }, anchor: anchor, children: children })) : (jsx(Tag, { className: className, children: children }));
   });
 
   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 null;
-      }
-      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 }));
   });
 
   // Generated. Do not touch
-  /* eslint-disable max-lines */
+  /* eslint-disable max-len, max-lines */
   var IconMap;
   (function (IconMap) {
       IconMap["ActualBalanceIcon"] = "ActualBalanceIcon";
@@ -502,10 +500,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 = 'center', className = '', title, description, headlineVersion = 'XL', as, ...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: 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 }) => {
@@ -537,7 +573,7 @@
       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 })] }));
+      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: "M" }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] }));
   });
 
   const pictureTextStyleMap = {
@@ -570,13 +606,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';
@@ -609,7 +647,7 @@
               const isLocalHref = href && !isURL(href);
               const isLocalTarget = !link.target || link.target === '_self';
               if (isLocalHref && isLocalTarget) {
-                  ev.preventDefault();
+                  ev?.preventDefault();
                   router.push(href);
               }
           }, link),
@@ -631,14 +669,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-l'}`, 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',
@@ -649,7 +687,7 @@
 
   const buttonStyleMap = {
       primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
-      secondary: 'text-primary-main bg-secondary-light hover:bg-secondary-hover active:bg-secondary-active',
+      secondary: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
       link: '',
   };
   const buttonDisabledStyleMap = {
@@ -664,16 +702,16 @@
       return disabled ? (jsx(DisabledButton, { rounded: rounded, ...rest, children: buttonInner })) : (jsx(RegularButton, { rounded: rounded, ...rest, children: buttonInner }));
   });
   const RegularButton = JSX(({ className = '', ariaLabel, version = 'none', rounded, href, target, children, onClick, ...rest }) => {
-      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 }));
+      return (jsx("a", { className: `${buttonStyle} inline-block cursor-pointer no-underline focus:border-primary-focus focus:border ${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) {
@@ -682,11 +720,6 @@
       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',
@@ -729,7 +762,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] })] }));
   });
 
@@ -743,7 +776,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';
@@ -756,22 +789,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 h-full ${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, align: "left" }), 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;
+      return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex 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: 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-md font-light", children: 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 = {
@@ -786,9 +815,10 @@
       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
+      return (jsxs(BlockWrapper, { context: context, className: `font-sans overflow-hidden pt-[50px] pl-[50px] pb-[50px] pr-[7.5rem] box-border
+      ${backwardButton?.text ? 'min-h-[542px] max-h-[542]' : 'min-h-[454px] max-h-[454px]'} ${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 })] }));
+                  : 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, className: backwardButton?.text ? 'pb-[88px]' : '' })] }));
   });
 
   const textBlockStyleMaps = {
@@ -860,25 +890,25 @@
   };
   const Tile = JSX((props) => {
       const { context, title, headingType = 'h3', description, items, children, buttons, image, isDotted = true, className = '', version = 'primary', ...rest } = props;
-      const headingTextClassName = version === 'primary' ? 'text-primary-text' : '';
-      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] mb-3 ${headingTextClassName}` })) : 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) {
       const listVersion = version === 'primary' ? 'tile' : 'tile-white';
-      return items?.length ? (jsx(List, { items: items, isDotted: isDotted, itemClassName: "text-title-2xs font-light mt-2", version: listVersion })) : null;
+      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, bgColorHeadline: version, align: "left" }), 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)));
@@ -898,9 +928,9 @@
       return jsx("div", { className: `text-m mt-2.5 ${descStyleMap[version]}`, children: additionalDescription });
   }
 
-  const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
+  const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `group shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
         ? 'bg-secondary-light text-secondary-text'
-        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, width: "16", height: "16", asSVG: true }) })));
+        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, imageClassName: "group-hover:text-primary-main", width: "16", height: "16", asSVG: true }) })));
 
   function renderArrows({ handler, isShown, btnClass, className = '', isDisabled = false, }) {
       return (jsxs("div", { children: [isShown[0] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 ${btnClass[0]} ${className}`, onClick: handler[0], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left", disabled: !isShown[0] })) : null, isShown[1] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 rotate-180 ${btnClass[1]} ${className}`, onClick: handler[1], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right", disabled: !isShown[1] })) : null] }));
@@ -925,7 +955,7 @@
 
   const GalleryCardInner = JSX(({ title, description, image, items, button, version, isDotted = true }) => {
       const titleStyleClasses = getTitleStyle(version);
-      return (jsxs("div", { className: "h-full flex flex-col justify-between text-center", children: [jsxs("div", { children: [image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: image }) })) : null, title ? renderCardTitle(title, titleStyleClasses) : null, description ? (jsx("div", { className: `font-light text-m-md-new ${title ? 'mt-2' : ''}`, children: description })) : null, items?.length ? renderItems(items, isDotted, version) : null] }), button?.text ? renderButton$1(button) : null] }));
+      return (jsxs("div", { className: "h-full flex flex-col justify-between text-center", children: [jsxs("div", { children: [image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: image }) })) : null, title ? renderCardTitle(title, titleStyleClasses) : null, description ? jsx("div", { className: `text-m${title ? 'mt-2' : ''}`, children: description }) : null, items?.length ? renderItems(items, isDotted, version) : null] }), button?.text ? renderButton$1(button) : null] }));
   });
   function renderButton$1(button) {
       return (jsx(Button, { className: "mt-6 w-full", appendLeft: button.icon && jsx(Img, { image: button.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
@@ -943,7 +973,7 @@
   }
 
   const GalleryContainer = JSX(({ context, title, description, cards = [], version = 'normal', activeCardIndex }) => {
-      return (jsxs("div", { children: [jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" }), jsxs("div", { className: "flex flex-col items-center mb-8", children: [title ? jsx(Heading, { headingType: "h2", className: "text-center", title: title }) : null, description ? (jsx("div", { className: "font-light text-md max-w-[600px] mt-2.5", children: description })) : null] }), jsx("div", { className: `flex ${cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''} duration-1000`, style: { transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }, role: "list", children: cards?.map((card, i) => renderCard({ card, version, context }, i)) })] }));
+      return (jsxs("div", { children: [jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" }), jsxs("div", { className: "flex flex-col items-center mb-8", children: [title ? jsx(Heading, { headingType: "h2", className: "text-center", title: title }) : null, description ? (jsx("div", { className: "text-xl-light max-w-[600px] mt-2.5", children: description })) : null] }), jsx("div", { className: `flex ${cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''} duration-1000`, style: { transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }, role: "list", children: cards?.map((card, i) => renderCard({ card, version, context }, i)) })] }));
   });
   function renderCard({ card, version }, i) {
       return (jsx("section", { className: `box-border border-solid border border-main-stroke p-6 mx-2 flex flex-col justify-between
@@ -1015,15 +1045,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 };
@@ -1046,7 +1076,7 @@
       right: 'text-right',
   };
   const Accordion = JSX(({ title, description, accordionItems, context, className = '', accordionAlignTitle = 'center', ...rest }) => {
-      return (jsxs(BlockWrapper, { context: context, className: `p-[50px] font-sans bg-white text-primary-text ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h4", className: `mb-2.5 ${ALIGN_TITLE[accordionAlignTitle]}`, title: title })) : null, description ? jsx("div", { className: "mb-2.5 text-base", children: description }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, context: context }, `AccordionItem${i}`))) })) : null] }));
+      return (jsxs(BlockWrapper, { context: context, className: `p-[50px] font-sans bg-white text-primary-text ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h4", className: `mb-2.5 ${ALIGN_TITLE[accordionAlignTitle]}`, title: title })) : null, description ? jsx("div", { className: "mb-2.5 text-l", children: description }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, context: context }, `AccordionItem${i}`))) })) : null] }));
   });
 
   const BenefitsBlock = JSX(({ className = '', headingType = 'h2', title, benefitList, ...rest }) => {
@@ -1064,7 +1094,7 @@
       if (!benefitType) {
           return null;
       }
-      return description ? (jsx("div", { className: "font-light text-base text-secondary-text mt-2", children: benefitType === 'list'
+      return description ? (jsx("div", { className: "text-l-light text-secondary-text mt-2", children: benefitType === 'list'
               ? renderListBenefit(description)
               : renderTextBenefit(description) })) : null;
   };
@@ -1076,9 +1106,9 @@
 
   const Bonus = JSX((props) => {
       const { className = '', title, description, bonusItems, ...rest } = props;
-      return (jsx(BlockWrapper, { className: `font-sans bg-white p-[50px] pb-9 ${className}`, ...rest, children: jsxs("div", { className: "container", children: [title ? jsx(Heading, { headingType: "h3", className: "text-center", title: title }) : null, description ? (jsx("div", { className: "text-md font-light text-center mt-[10px]", children: description })) : null, jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems
+      return (jsx(BlockWrapper, { className: `font-sans bg-white p-[50px] pb-9 ${className}`, ...rest, children: jsxs("div", { className: "container", children: [title ? jsx(Heading, { headingType: "h3", className: "text-center", title: title }) : null, description ? (jsx("div", { className: "text-xl-light text-center mt-[10px]", children: description })) : null, jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems
                           ? bonusItems.map((_, i) => {
-                              return (jsx("div", { className: "flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-[14px] mx-[7px] even:mr-0 odd:ml-0 last:odd:mx-0", children: jsxs("div", { className: "flex justify-between w-full", children: [jsxs("div", { className: "mr-4", children: [jsx("div", { className: "text-title-sm", children: _.title }), jsx("div", { className: "text-md font-light mt-[14px] max-w-[488px]", children: _.description })] }), _.bonusCount ? (jsxs("div", { className: "relative -bottom-3 h-auto flex items-end mt-14 shrink-0", children: [jsx("span", { className: "font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7", children: _.bonusCount }), jsx("span", { className: "text-[44px] bg-clip-text text-transparent bg-green-to-yellow", children: _.bonusName })] })) : null] }) }, String(i)));
+                              return (jsx("div", { className: "flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-[14px] mx-[7px] even:mr-0 odd:ml-0 last:odd:mx-0", children: jsxs("div", { className: "flex justify-between w-full", children: [jsxs("div", { className: "mr-4", children: [jsx("div", { className: "text-h4", children: _.title }), jsx("div", { className: "text-xl-light mt-[14px] max-w-[488px]", children: _.description })] }), _.bonusCount ? (jsxs("div", { className: "relative -bottom-3 h-auto flex items-end mt-14 shrink-0", children: [jsx("span", { className: "font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7", children: _.bonusCount }), jsx("span", { className: "text-[44px] bg-clip-text text-transparent bg-green-to-yellow", children: _.bonusName })] })) : null] }) }, String(i)));
                           })
                           : null })] }) }));
   });
@@ -1100,13 +1130,13 @@
       return (jsxs(BlockWrapper, { className: `font-sans text-primary-text bg-white p-50 flex flex-col text-center ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-[10px]", title: title }) : null, subtitle ? jsx("span", { className: "text-md font-normal", children: subtitle }) : null, bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${getElementsColsValue(className)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] }));
   });
   const renderBonusBenefit = (bonusBenefit, i) => {
-      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)));
+      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: "text-h6 m-0", children: bonusBenefit.label }) : null })] }, String(i)));
   };
 
   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] }));
+      return (jsxs("div", { className: `mb-5 ${className}`, children: [title ? jsx("div", { className: "text-l-light", children: title }) : null, value ? (jsxs("div", { className: "text-h3", children: [prefix, " ", addSpacesBetweenNumbers(Math.round(value)), " ", postfix] })) : null] }));
   });
 
   const DEFAULT_MIN_SUM = 60000;
@@ -1146,7 +1176,7 @@
   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-highlighted pr-6 -mt-4 ${rateBlockClassName}`, children: String(rate).replace('.', ',') }), unit ? jsx("span", { className: "calc-rate-text text-[65px] leading-[75px]", children: unit }) : ''] })] })));
+  const Rate = JSX(({ rate, title = 'Ставка', unit, rateBlockClassName }) => (jsxs("div", { children: [jsx("div", { className: "text-l-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;
@@ -1174,7 +1204,7 @@
               onChange(max);
           }
       };
-      return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? jsx("span", { className: "text-base text-secondary-text pl-4", children: title }) : null, jsx("input", { className: `m-0 mt-[5px] font-sans text-title w-full h-14 border border-solid border-main-stroke rounded-md
+      return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? jsx("span", { className: "text-l text-secondary-text pl-4", children: title }) : null, jsx("input", { className: `m-0 mt-[5px] font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
                         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)))) })] }));
   });
 
@@ -1211,7 +1241,7 @@
       return await response.json();
   }
 
-  const getBonusCalculatorParams = (context, userInputParams, sourceBookDir) => {
+  const useBonusCalculatorParams = (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);
@@ -1223,14 +1253,14 @@
       };
   };
 
-  const BonusCalculatorForm = JSX(({ context, className = '', sourceBookDir, buttons }) => {
+  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);
+      const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } = useBonusCalculatorParams(context, userInputParams, sourceBookDir);
       return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма покупок в категории путешествия, ₽', {
                           minSum: minSumTravel,
                           maxSum: maxSumTravel,
@@ -1264,7 +1294,7 @@
         ${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] }) })));
+                  }, 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-l cursor-pointer", children: text }) : null] }) })));
 
   const STEP_MONTHS = 1;
   function renderMonthsInput(title, params, callback) {
@@ -1299,7 +1329,7 @@
       }
   };
 
-  const getCreditCalculatorParams = (context, userInputParams, sourceBookDir) => {
+  const useCreditCalculatorParams = (context, userInputParams, sourceBookDir) => {
       const { isInsurance, isSalaryClient, isStateEmployee, moneyValue } = userInputParams;
       const data = useCalculatorParams(context.useAsyncData, sourceBookDir || CREDIT_CALC_DEFAULT_DIR);
       const creditCalculatorSourceBookParams = data?.rows.find((_) => {
@@ -1346,7 +1376,7 @@
           moneyValue,
           monthsValue,
       };
-      const calculatorParams = getCreditCalculatorParams(context, userInputParams, sourceBookDir);
+      const calculatorParams = useCreditCalculatorParams(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,
@@ -1466,8 +1496,8 @@
       const btnClassName = isActiveBtn
           ? 'h-[88px] w-[387px] min-w-[387px] p-5 border-none bg-primary-main text-white'
           : `h-[77px] w-[322px] min-w-[322px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
-      const btnTitleClassName = isActiveBtn ? 'text-md-new mb-1.5' : `text-base mb-[3px]`;
-      const btnDescClassName = isActiveBtn ? 'text-base text-white' : `text-m-md`;
+      const btnTitleClassName = isActiveBtn ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
+      const btnDescClassName = isActiveBtn ? 'text-l text-white' : `text-m-md`;
       const iconClassName = isActiveBtn ? '' : `text-primary-main`;
       return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: `box-border font-sans relative border border-main-stroke cursor-pointer text-left border-b-0 flex
       ${btnClassName}`, children: [jsx(Img, { className: `h-[24px] w-[24px] min-w-[24px] min-h-[24px] mr-4 ${iconClassName}`, image: { ...tab?.icon, iconVersion: isActiveBtn ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "border-0", children: [jsx("div", { className: `font-medium ${btnTitleClassName}`, children: tab?.title }), jsx("div", { className: `text-secondary-text ${btnDescClassName}`, children: tab.description })] })] }, String(i)));
@@ -1486,7 +1516,7 @@
       white: 'bg-white',
   };
   const CatalogCard = JSX(({ className = '', title, description, image, price, button, colors }) => {
-      return (jsxs("section", { className: `border border-solid box-border p-[30px] min-w-[402px] flex flex-col justify-left ${className}`, role: "listitem", children: [image?.src ? jsx(Img, { className: "mb-5", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h5", className: "text-left mb-1.5", title: title })) : null, description ? jsx("div", { className: "text-m-md text-left mb-4", children: description }) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-m-md text-secondary-text", children: ["\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: ", colors.map(renderColorOption)] })) : null, price ? jsxs("div", { className: "text-title-sm text-left", children: [price, "\u00A0\u20BD"] }) : null, button?.text ? jsx(Button, { className: "mt-6 w-full", ...button }) : null] }));
+      return (jsxs("section", { className: `border border-solid box-border p-[30px] min-w-[402px] flex flex-col justify-left ${className}`, role: "listitem", children: [image?.src ? jsx(Img, { className: "mb-5 flex justify-center", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h4", className: "text-left mb-1.5", title: title })) : null, description ? (jsx("div", { className: "text-m-md text-left mb-4 font-light", children: description })) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-m-md text-secondary-text font-light", children: [jsx("div", { className: "mr-1.5", children: "\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: " }), colors.map(renderColorOption)] })) : null, price ? jsxs("div", { className: "text-h3 text-left", children: [price, "\u00A0\u20BD"] }) : null, button?.text ? jsx(Button, { className: "mt-5 w-full", ...button }) : null] }));
   });
   const renderColorOption = (color, i) => (jsx("span", { className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
 
@@ -1495,7 +1525,7 @@
   const CARD_SHIFT$1 = 430;
   const Catalog = JSX(({ context, cards = [], className = '', title, description, ...rest }) => {
       const [activeCardIndex, setActiveCardIndex] = context.useState(0);
-      return (jsxs(BlockWrapper, { context: context, className: `bg-white relative font-sans p-9 overflow-hidden text-center ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h2", className: "mb-6", title: title }) : null, description ? jsx(Description, { className: "mb-6", description: description }) : null, jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT$1}px)` }, role: "list", children: cards?.length ? cards.map(renderCatalogCard(context)) : null }), renderNavButtons$1({
+      return (jsxs(BlockWrapper, { context: context, className: `bg-white relative font-sans p-12 overflow-hidden text-center ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-6", title: title }) : null, description ? jsx(Description, { className: "mb-6", description: description }) : null, jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT$1}px)` }, role: "list", children: cards?.length ? cards.map(renderCatalogCard(context)) : null }), renderNavButtons$1({
                   cardsCount: cards.length,
                   activeCardIndex,
                   setActiveCardIndex,
@@ -1518,8 +1548,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';
@@ -1527,16 +1555,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 }) => {
@@ -1596,10 +1626,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] }));
   });
@@ -1734,7 +1764,7 @@
           const validInputValue = e.target.validity.valid ? e.target.value : value;
           onChange(validInputValue);
       };
-      return (jsx("input", { className: className, id: id, name: name || id, type: type, pattern: pattern, placeholder: placeholder, value: value, onChange: (e) => handleChange(e) }));
+      return (jsx("input", { className: className, id: id, name: name || id, type: type, pattern: pattern, placeholder: placeholder, value: value, onChange: handleChange }));
   });
 
   const Select = JSX(({ className = '', id, name, children, value, onChange }) => {
@@ -1847,17 +1877,17 @@
   const SearchBarInner = JSX(({ className, context, isMobile = false }) => {
       const { term, setTerm } = context.useSearch();
       const LoupeIconClassName = isMobile ? 'w-[20px] h-[20px]' : 'w-[24px] h-[24px]';
-      const SearchBarLabelClassName = isMobile ? 'font-normal text-sm' : 'font-light text-base';
+      const SearchBarLabelClassName = isMobile ? 'font-normal text-sm' : 'text-l-light';
       const SearchBarInputClassName = isMobile
           ? ' placeholder-transparent font-normal'
           : 'font-light h-full';
-      const inputPlaceholder = isMobile ? 'some search' : null;
-      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
+      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-l 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: (e) => {
-                      e.preventDefault();
+                  }, 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" }) }))] }));
   });
@@ -1877,7 +1907,7 @@
   });
   const renderContact = (item, index) => {
       const { type, text, description } = item;
-      return (jsxs("div", { className: "mb-4", children: [jsx("div", { children: renderText(type, text) }), jsx("div", { className: "mt-1 font-sans font-light text-sm text-secondary-text", children: description })] }, String(index)));
+      return (jsxs("div", { className: "mb-4", children: [jsx("div", { children: renderText(type, text) }), jsx("div", { className: "mt-1 font-sans text-s-light text-secondary-text", children: description })] }, String(index)));
   };
   const renderText = (type, text = '') => {
       switch (type) {
@@ -1927,9 +1957,9 @@
   });
   const renderColumn = (c, index, { router, handlerDecorator }) => {
       const { text, href, items, target } = c;
-      return (jsxs("div", { className: "flex flex-col w-1/5 last:w-1/4 gap-[14px]", children: [jsx("a", { className: "block font-sans leading-5 text-base text-primary-text no-underline", href: href, target: target || '_self', children: text || `Раздел ${index}` }), items?.map((_, i) => (jsx(ColumnItem, { ...useLink({ router, handlerDecorator }, _), index: i }, String(i))))] }, String(index)));
+      return (jsxs("div", { className: "flex flex-col w-1/5 last:w-1/4 gap-[14px]", children: [jsx("a", { className: "block font-sans leading-5 text-l text-primary-text no-underline", href: href, target: target || '_self', children: text || `Раздел ${index}` }), items?.map((_, i) => (jsx(ColumnItem, { ...useLink({ router, handlerDecorator }, _), index: i }, String(i))))] }, String(index)));
   };
-  const ColumnItem = JSX(({ text, href, target, index }) => (jsx("a", { className: "block font-sans font-light text-base text-secondary-text hover:text-primary-main no-underline", href: href, target: target || '_self', children: text || `Раздел ${index}` })));
+  const ColumnItem = JSX(({ text, href, target, index }) => (jsx("a", { className: "block font-sans text-l-light text-secondary-text hover:text-primary-main no-underline", href: href, target: target || '_self', children: text || `Раздел ${index}` })));
 
   const ICONS_MAP = [
       {
@@ -1967,14 +1997,13 @@
           ? 'bg-secondary-light hover:bg-secondary-hover'
           : 'border-main-divider border-solid border-[1px] hover:bg-primary-main';
       const isPrimary = version === 'primary';
-      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 }));
+      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: "group-hover:text-white", width: "24", height: "24", asSVG: true })) : null }));
   });
 
   const SocialMedia = JSX(({ className = '', media, version, context, children }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      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 })] }));
+      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: "text-s-light 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}` })));
@@ -1987,11 +2016,11 @@
 
   const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
   const Footer = JSX(({ className, documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, context, ...rest }) => {
-      return (jsxs(BlockWrapper, { Tag: "footer", context: context, className: `p-9 bg-white ${className || ''}`, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD }), jsx(SearchBar, { context: context, className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, context: context, hasButton: true }), jsx(SocialMedia, { media: socialMedia, context: context, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, context: context, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "pt-[3px]", context: context, items: topItems })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
+      return (jsxs(BlockWrapper, { tag: "footer", context: context, className: `p-9 bg-white ${className || ''}`, ...rest, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD }), jsx(SearchBar, { context: context, className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, context: context, hasButton: true }), jsx(SocialMedia, { media: socialMedia, context: context, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, context: context, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "pt-[3px]", context: context, items: topItems })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
   });
 
   const GracePeriod = JSX(({ className = '', title, description, calendar, ...rest }) => {
-      return (jsxs(BlockWrapper, { className: `font-sans bg-white p-[50px] ${className}`, ...rest, children: [jsx(Heading, { headingType: "h3", className: "text-center", title: title }), jsx("div", { className: "font-light text-base-md text-center mt-3", children: description }), calendar ? renderCalendar(calendar) : null] }));
+      return (jsxs(BlockWrapper, { className: `font-sans bg-white p-[50px] ${className}`, ...rest, children: [jsx(Heading, { headingType: "h3", className: "text-center", title: title }), jsx("div", { className: "text-l-light-md text-center mt-3", children: description }), calendar ? renderCalendar(calendar) : null] }));
   });
   const renderCalendar = (calendar) => {
       const colCount = calendar.reduce((accumulator, currentValue) => currentValue?.month?.length ? accumulator + currentValue.month.length : accumulator, 0) || 1;
@@ -2002,7 +2031,7 @@
           ..._,
           flexBasis: `${_.month.length * colSize}%`,
       }));
-      return (jsxs("div", { className: "w-full flex flex-col justify-center mt-[54px]", children: [jsx("div", { className: "flex w-full mb-3 font-light text-m-title-md text-center", children: mappedCalendar.map((_) => renderMonthNames(_, colSize)) }), jsx("div", { className: "flex w-full", children: mappedCalendar.map((_, ind) => (jsxs("div", { className: "pr-[11px] mr-3 border-r border-main-divider last:border-r-0 last:pr-0 last:mr-0", style: { flexBasis: _.flexBasis }, children: [jsx("div", { className: "flex", children: renderMonthImages(_) }), jsxs("div", { className: "font-light text-sm text-primary-text mt-3", children: [jsx("span", { children: _.text }), "\u2009", jsx("span", { className: "text-primary-main", children: _.greenText })] })] }, `monthItem-${ind}`))) })] }));
+      return (jsxs("div", { className: "w-full flex flex-col justify-center mt-[54px]", children: [jsx("div", { className: "flex w-full mb-3 font-light text-h6 text-center", children: mappedCalendar.map((_) => renderMonthNames(_, colSize)) }), jsx("div", { className: "flex w-full", children: mappedCalendar.map((_, ind) => (jsxs("div", { className: "pr-[11px] mr-3 border-r border-main-divider last:border-r-0 last:pr-0 last:mr-0", style: { flexBasis: _.flexBasis }, children: [jsx("div", { className: "flex", children: renderMonthImages(_) }), jsxs("div", { className: "font-light text-sm text-primary-text mt-3", children: [jsx("span", { children: _.text }), "\u2009", jsx("span", { className: "text-primary-main", children: _.greenText })] })] }, `monthItem-${ind}`))) })] }));
   };
   const renderMonthNames = (item, colSize) => item.month.map((_, i) => (jsx("div", { style: { flexBasis: `${colSize}%` }, children: _.text }, `monthName-${i}`)));
   const renderMonthImages = (item) => item.month.map((_) => _.image?.src ? (jsx("div", { className: "h-[207px] border-r-[1px] pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0", children: jsx(Img, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
@@ -2017,7 +2046,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;
@@ -2030,17 +2059,19 @@
   };
 
   const GroupBlockTabs = JSX((props) => {
-      const { tabs, currentTag, onTabClick, className = '', isShowCounter = false } = props;
-      return (jsx("div", { className: `mb-2 box-border flex gap-x-1 ${className}`, role: "tablist", children: tabs?.map(renderTab$1(onTabClick, currentTag, isShowCounter)) }));
+      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, currentTag, isShowCounter = false) => (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 tabText = `text-m ${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)));
+      ${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 }) => {
@@ -2052,7 +2083,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);
@@ -2110,10 +2141,10 @@
       const possibleActiveSubItems = items?.filter(isSubItemActive(router));
       return possibleActiveSubItems?.length
           ? maxBy((_) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
-          : null;
+          : undefined;
   };
 
-  const TEXT_CLASSES$1 = 'font-sans font-light text-base';
+  const TEXT_CLASSES$1 = 'font-sans text-l-light';
   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 = false) => {
@@ -2135,12 +2166,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-l-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 }) => {
@@ -2163,7 +2197,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 = {
@@ -2177,23 +2211,23 @@
       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: "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)
                   ? renderValueBlock$1('Ежемесячный лимит:', monthLimit, Boolean(sum))
                   : null] })) : null;
   }
-  function renderValueBlock$1(title, sum, isAnotherBlock) {
+  function renderValueBlock$1(title, sum = 0, isAnotherBlock = false) {
       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 = [] }) => {
@@ -2207,7 +2241,7 @@
       const isLastShift = galleryLength === tabsShift + 2;
       const showPrevButton = tabsShift > 0;
       const activeHref = cards[activeSlideIndex]?.href;
-      return (jsxs("section", { className: `min-w-full text-center ${className}`, children: [jsxs("div", { className: "relative mt-7 overflow-hidden", children: [galleryLength
+      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,
@@ -2281,11 +2315,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 })));
@@ -2299,7 +2333,7 @@
                       .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 = false) => {
@@ -2348,7 +2382,7 @@
           initialState: isUnfolded,
       });
       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';
+          'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-l 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;
   });
@@ -2363,7 +2397,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 });
@@ -2376,19 +2410,19 @@
   function getTileHeadingType(className = '') {
       const colSpan = getColSpan(className);
       if (colSpan <= 4) {
-          return 'h4';
+          return 'S';
       }
       else if (colSpan <= 8) {
-          return 'h3';
+          return 'M';
       }
       else {
-          return 'h2';
+          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(_))
@@ -2433,8 +2467,8 @@
           : `min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10
       ${productSlideStyleMap[version]}`;
       const btnTitleClassName = isActiveBtn
-          ? 'text-primary-text text-title-2xs'
-          : `text-base ${productBlockStyleMap[version].title}`;
+          ? 'text-primary-text text-h6'
+          : `text-l ${productBlockStyleMap[version].title}`;
       const btnDescClassName = isActiveBtn
           ? 'text-secondary-text text-m-title-xs mt-2.5'
           : `text-m-md mt-1.5 ${productBlockStyleMap[version].text}`;
@@ -2449,7 +2483,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, align: "left" }) })) : 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-l", children: description })] }) }) }));
   });
   function formatDate(date) {
       const dateObj = new Date(date);
@@ -2462,7 +2496,9 @@
   }
 
   const RecommendationCard = JSX(({ context, className = '', title, description, items, image, version, socialMedia }) => {
-      return (jsx("section", { className: `border border-solid box-border p-[30px] min-w-[524px] ${className}`, role: "listitem", children: jsxs(BaseTile, { context: context, className: "flex justify-between", title: title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "font-normal mb-3.5", title: title })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? jsx(Description, { className: "text-left", description: description }) : null, items?.length ? (jsx(List, { className: "text-md text-left font-light flex flex-col flex-1 gap-2", items: items, version: version })) : null, jsx(SocialMedia, { className: "pt-[42px] pb-0", media: socialMedia, version: version, context: context })] }) }));
+      const tileTitle = title ? (jsx(Heading, { headingType: "h5", as: "h3", className: "font-normal mb-3.5 z-10", title: title })) : null;
+      const tileImage = image?.src ? (jsx(Img, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
+      return (jsx("section", { className: `relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`, role: "listitem", children: jsxs(BaseTile, { context: context, className: "flex justify-between", title: tileTitle, image: tileImage, children: [description ? jsx(Description, { className: "mb-2", description: description }) : null, items?.length ? (jsx(List, { className: "text-md font-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items, version: version })) : null, socialMedia ? (jsx(SocialMedia, { className: "pt-[42px] pb-0", media: socialMedia, version: version, context: context })) : null] }) }));
   });
 
   const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
@@ -2472,13 +2508,13 @@
       const [activeCardIndex, setActiveCardIndex] = context.useState(0);
       const blockClassName = version === 'secondary' ? 'bg-primary-main text-white' : 'bg-white text-primary-text';
       const cardClassName = version === 'secondary' ? 'border-white/50' : 'border-main-stroke';
-      return (jsxs(BlockWrapper, { context: context, className: `relative font-sans p-9 overflow-hidden text-center ${blockClassName} ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h2", className: "mb-6", title: title }) : null, jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }, role: "list", children: recommendations?.length
-                      ? recommendations.map(renderRecommendationCard({ context, version, className: cardClassName }))
-                      : null }), renderNavButtons({
-                  cardsCount: recommendations.length,
-                  activeCardIndex,
-                  setActiveCardIndex,
-              }), jsx("div", { className: `${BLUR_BLOCK_CLASSES} left-0 ${version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'}` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES} right-0 ${version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'}` })] }));
+      return (jsxs(BlockWrapper, { context: context, className: `relative font-sans p-9 overflow-hidden text-center ${blockClassName} ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-6", title: title }) : null, jsxs("div", { children: [jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }, role: "list", children: recommendations?.length
+                              ? recommendations.map(renderRecommendationCard({ context, version, className: cardClassName }))
+                              : null }), renderNavButtons({
+                          cardsCount: recommendations.length,
+                          activeCardIndex,
+                          setActiveCardIndex,
+                      })] }), jsx("div", { className: `${BLUR_BLOCK_CLASSES} left-0 ${version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'}` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES} right-0 ${version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'}` })] }));
   });
   const renderRecommendationCard = ({ context, version, className }) => (card, i) => {
       return (jsx(RecommendationCard, { context: context, ...card, version: version, className: className }, String(i)));
@@ -2493,7 +2529,7 @@
               handler: [handlePrevClick, handleNextClick],
               isShown: [showPrevButton, showNextButton],
               btnClass: ['left-8', 'right-8'],
-              className: 'top-1/2 mt-6',
+              className: 'top-1/2 mt-3',
           }) }));
   };
 
@@ -2504,13 +2540,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',
       },
@@ -2529,13 +2567,13 @@
               styleMap.background,
               styleMap.title,
               className,
-          ].join(' '), ...rest, children: [title ? (jsx(Heading, { headingType: "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 ${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] }));
+          ].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';
@@ -2568,7 +2606,7 @@
           setActiveCardIndex,
       });
       const foldableBlocks = rowData?.map((row, i, { length }) => (jsx(TariffsTableRow, { row: row, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex }, String(i))));
-      return (jsxs(BlockWrapper, { context: context, className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${description ? 'mb-2.5' : 'mb-9'}`, title: title })) : null, description ? jsx("div", { className: "mb-9 text-center text-m-base", children: description }) : null, rowData?.length ? (jsx(Foldable, { blocks: foldableBlocks, hiddenBlocksNum: hiddenRowsNum, context: context, render: (children) => (jsx(Wrapper, { tableArrowScrollControlProps: tableArrowScrollControlProps, children: children })), foldButtonLabel: "\u0420\u0430\u0437\u0432\u0435\u0440\u043D\u0443\u0442\u044C" })) : null] }));
+      return (jsxs(BlockWrapper, { context: context, className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, ...rest, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${description ? 'mb-2.5' : 'mb-9'}`, title: title })) : null, description ? jsx("div", { className: "mb-9 text-center text-l", children: description }) : null, rowData?.length ? (jsx(Foldable, { blocks: foldableBlocks, hiddenBlocksNum: hiddenRowsNum, context: context, render: (children) => (jsx(Wrapper, { tableArrowScrollControlProps: tableArrowScrollControlProps, children: children })), foldButtonLabel: "\u0420\u0430\u0437\u0432\u0435\u0440\u043D\u0443\u0442\u044C" })) : null] }));
   });
   const getColData = (columns) => columns?.map(({ data }) => data) || [];
   const getRowData = (rowHeaders, colData) => rowHeaders?.map((header, i) => ({
@@ -2624,16 +2662,19 @@
           strokeLinejoin: 'round',
           strokeWidth: '1.5',
       };
-      return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsx("path", { ...params, strokeMiterlimit: "10", d: "M21.48 11.95c.5-1.4-.4-2.6-1.9-2.6h-4c-.6 0-1.1-.5-1-1.2l.5-3.2c.2-.9-.4-1.9-1.3-2.2-.8-.3-1.8.1-2.2.7l-4.1 6.1M7.48 18.35l3.1 2.4c.4.4 1.3.6 1.9.6h3.8c1.2 0 2.5-.9 2.8-2.1l1.24-3.77" }), jsx("path", { ...params, d: "M2.38 18.35v-9.8c0-1.4.6-1.9 2-1.9h1c1.4 0 2 .5 2 1.9v9.8c0 1.4-.6 1.9-2 1.9h-1c-1.4 0-2-.5-2-1.9Z" })] }));
+      return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsx("path", { ...params, strokeMiterlimit: "10", 
+                  /* eslint-disable max-len */
+                  d: "M21.48 11.95c.5-1.4-.4-2.6-1.9-2.6h-4c-.6 0-1.1-.5-1-1.2l.5-3.2c.2-.9-.4-1.9-1.3-2.2-.8-.3-1.8.1-2.2.7l-4.1 6.1M7.48 18.35l3.1 2.4c.4.4 1.3.6 1.9.6h3.8c1.2 0 2.5-.9 2.8-2.1l1.24-3.77" }), jsx("path", { ...params, d: "M2.38 18.35v-9.8c0-1.4.6-1.9 2-1.9h1c1.4 0 2 .5 2 1.9v9.8c0 1.4-.6 1.9-2 1.9h-1c-1.4 0-2-.5-2-1.9Z" })] }));
   };
 
   const LikeControl = JSX(({ className, context, ...rest }) => {
       const likeService = context.useLikeService();
-      return (jsxs(BlockWrapper, { Tag: "div", context: context, className: `border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${className || ''}`, ...rest, children: [jsx(LikeButton, { onClick: likeService.like, ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u043B\u0430\u0439\u043A\u00BB" }), jsx(LikeButton, { onClick: likeService.dislike, className: "rotate-180", ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u0434\u0438\u0437\u043B\u0430\u0439\u043A\u00BB" }), jsx("span", { className: "select-none", children: likeService.likeCount })] }));
+      return (jsxs(BlockWrapper, { tag: "div", context: context, className: `border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${className || ''}`, ...rest, children: [jsx(LikeButton, { onClick: likeService.like, ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u043B\u0430\u0439\u043A\u00BB" }), jsx(LikeButton, { onClick: likeService.dislike, className: "rotate-180", ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u0434\u0438\u0437\u043B\u0430\u0439\u043A\u00BB" }), jsx("span", { className: "select-none", children: likeService.likeCount })] }));
   });
 
   const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
-  const ContentPage = JSX(({ className = '', context, blocksRegistry, data: { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' }, blockDecorator = defaultBlockDecorator, }) => {
+  const ContentPage = JSX(({ className = '', context, blocksRegistry, data = {}, blockDecorator = defaultBlockDecorator, }) => {
+      const { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' } = data;
       const { header } = slots;
       return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [header?.blocks?.length ? (jsx("div", { className: `${style2className(header?.style)}`, children: header.blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, blocks?.length ? (jsx("div", { className: "container grid grid-cols-12 gap-1", children: blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, likeControl ? (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto", context: context }, "LikeControl") })) : null] }));
   });