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

package/bundle/bundle.umd.js

@@ -200,19 +200,16 @@
   });
 
   const HEADING_STYLE_MAP = {
-      h1: 'text-title-xl tracking-[-0.3px]',
-      h2: 'text-title-lg',
-      h3: 'text-title',
-      h4: 'text-title-sm',
-      h5: 'text-title-xs',
-      h6: 'text-title-2xs tracking-[0.2px]',
+      h0: 'text-h0',
+      h1: 'text-h1',
+      h2: 'text-h2',
+      h3: 'text-h3',
+      h4: 'text-h4',
+      h5: 'text-h5',
+      h6: 'text-h6', // 20
   };
   const Heading = JSX((props) => {
-      const { className = '', headingType, title, as } = props;
-      if (!headingType) {
-          return 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 }));
   });
 
@@ -502,10 +499,48 @@
           description: 'text-white/80',
       },
   };
+  const HEADLINE_VERSION = {
+      XXL: {
+          descriptionFont: 'text-h4-alt',
+          gap: 'gap-[18px]',
+          headingType: 'h0',
+          as: 'h1',
+      },
+      XL: {
+          descriptionFont: 'text-xl-light',
+          gap: 'gap-4',
+          headingType: 'h1',
+          as: 'h1',
+      },
+      L: {
+          descriptionFont: 'text-xl-light',
+          gap: 'gap-4',
+          headingType: 'h2',
+          as: 'h2',
+      },
+      M: {
+          descriptionFont: 'text-xl-light',
+          gap: 'gap-3',
+          headingType: 'h3',
+          as: 'h3',
+      },
+      S: {
+          descriptionFont: 'text-xl-light',
+          gap: 'gap-2',
+          headingType: 'h4',
+          as: 'h4',
+      },
+  };
 
-  const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description, headingType = 'h2', ...rest }) => {
+  const Description = JSX((props) => {
+      const { className = '', description } = props;
+      return jsx("div", { className: `${className}`, children: description });
+  });
+
+  const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description, headlineVersion = 'XL', ...rest }) => {
       const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
-      return (jsxs(BlockWrapper, { className: `p-[50px] flex flex-col gap-4 ${STYLE_MAPS.background} ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: headingType, className: `text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx("p", { className: `text-base ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, children: description })) : null] }));
+      const SIZE_MAPS = HEADLINE_VERSION[headlineVersion];
+      return (jsxs(BlockWrapper, { className: `font-sans flex flex-col p-[50px] ${SIZE_MAPS.gap} ${STYLE_MAPS.background} ${className}`, ...rest, children: [title ? (jsx(Heading, { headingType: SIZE_MAPS?.headingType, as: SIZE_MAPS?.as, className: `whitespace-pre-wrap ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx(Description, { className: `${SIZE_MAPS.descriptionFont} ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, description: description })) : null] }));
   });
 
   const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
@@ -536,8 +571,8 @@
       double: 'flex gap-x-5 gap-y-[26px] flex-wrap',
       single: 'flex gap-3.5 flex-col',
   };
-  const LinkDocs = JSX(({ context, className = '', title, description, align = 'center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', ...rest }) => {
-      return (jsxs(BlockWrapper, { context: context, className: `font-sans text-primary-text p-[50px] bg-white ${className}`, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, context: context, align: align, headingType: "h3" }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] }));
+  const LinkDocs = JSX(({ context, className = '', title, description, align = 'center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', headlineVersion = 'M', ...rest }) => {
+      return (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-[50px] bg-white ${className}`, context: context, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, context: context, align: align, headlineVersion: headlineVersion }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] }));
   });
 
   const pictureTextStyleMap = {
@@ -570,13 +605,15 @@
       const hashIndex = href.indexOf('#');
       return hashIndex !== -1 ? href.substring(hashIndex, href.length) : undefined;
   };
+  const isHash = (href) => href?.startsWith('#');
 
   var url = /*#__PURE__*/Object.freeze({
     __proto__: null,
     isURL: isURL,
     withoutQuery: withoutQuery,
     getOrigin: getOrigin,
-    getHash: getHash
+    getHash: getHash,
+    isHash: isHash
   });
 
   const MOBILE_URL_PATH = '/mobile';
@@ -609,7 +646,7 @@
               const isLocalHref = href && !isURL(href);
               const isLocalTarget = !link.target || link.target === '_self';
               if (isLocalHref && isLocalTarget) {
-                  ev.preventDefault();
+                  ev?.preventDefault();
                   router.push(href);
               }
           }, link),
@@ -631,14 +668,14 @@
 
   const ButtonInner = JSX((props) => {
       const { text, aboveText, appendLeft, appendRight } = props;
-      return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-m-2xs font-light text-left", children: aboveText }), jsx("div", { className: "text-base text-left", children: text })] })) : null, appendRight ? appendRight : null] }));
+      return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-xs text-left", children: aboveText }), jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-0.5' : 'text-base'}`, children: text })] })) : null, appendRight ? appendRight : null] }));
   });
   const getButtonStyle = (props) => {
       const { version, aboveText, rounded } = props;
       if (version === 'link') {
           return '';
       }
-      const withTextStyle = `px-9 gap-2 ${aboveText ? 'py-2' : 'py-4'}`;
+      const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-9'}`;
       return [
           'flex items-center justify-center',
           isWithText(props) ? withTextStyle : 'h-12 w-12',
@@ -667,13 +704,13 @@
       return (jsx("a", { className: `${buttonStyle} inline-block cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: href ? 'link' : 'button', ...rest, children: children }));
   });
   const DisabledButton = JSX(({ className, children, ariaLabel, version = 'none', rounded }) => {
-      return (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: "-1", className: `inline-block ${buttonStyle} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: children }));
+      return (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: -1, className: `inline-block ${buttonStyle} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: children }));
   });
 
   const ButtonSection = JSX(({ context, className = '', buttons }) => {
       const { handlerDecorator } = context;
       const router = context.useRouter();
-      return buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => renderButton$2(useLink({ router, handlerDecorator }, button), index)) })) : null;
+      return buttons && buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => renderButton$2(useLink({ router, handlerDecorator }, button), index)) })) : null;
   });
   function renderButton$2({ icon, iconRight, ...button }, i) {
       if (!button?.text) {
@@ -682,11 +719,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 +761,7 @@
               : null }));
   });
 
-  const BaseTile = JSX(({ className = '', title, children, buttons, image }) => {
+  const BaseTile = JSX(({ className = '', title = '', children, buttons, image }) => {
       return (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { children: children }), buttons ? jsx("div", { children: buttons }) : null] }), image] })] }));
   });
 
@@ -743,7 +775,7 @@
   };
   function renderBenefit$1({ benefit, version = 'primary', benefitsVersion = 'normal' }, i) {
       const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
-      return (jsxs("div", { className: "flex gap-4 items-center", children: [benefit.icon ? (jsx(Img, { className: renderBenefitIconBgStyle(version, benefitsVersion), image: { ...benefit?.icon, iconVersion: isIconWhite ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true })) : null, jsxs("div", { className: "flex gap-0.5 flex-col h-full max-w-[149px] min-w-[149px]", children: [jsx("div", { className: `text-xl-light m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description ? (jsx("div", { className: `font-light text-m-md ${benefitDescStyleMap[version]}`, children: benefit.description })) : null] })] }, String(i)));
+      return (jsxs("div", { className: "flex gap-4 items-center", children: [benefit.icon ? (jsx(Img, { className: renderBenefitIconBgStyle(version, benefitsVersion), image: { ...benefit?.icon, iconVersion: isIconWhite ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true })) : null, jsxs("div", { className: "flex gap-0.5 flex-col h-full max-w-[149px] min-w-[149px]", children: [jsx("div", { className: `text-h6 m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description ? (jsx("div", { className: `text-m ${benefitDescStyleMap[version]}`, children: benefit.description })) : null] })] }, String(i)));
   }
   function renderBenefitIconBgStyle(version, benefitsVersion) {
       let bgColorStyle = 'bg-primary-main text-black';
@@ -756,13 +788,9 @@
       return `w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
   }
 
-  const ProductBlockInner = JSX(({ className = '', context, title, headingType = 'h2', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
-      const textColor = version === 'secondary' ? 'text-white' : 'text-primary-text';
-      return (jsxs("div", { className: `flex grow justify-between items-stretch ${className}`, children: [jsx("div", { className: `flex flex-col ${textBlockClassName}`, children: jsxs(BaseTile, { context: context, title: getTitle(title, headingType), buttons: getButtons(context, buttons), children: [description ? (jsx(Description, { className: `mt-4 max-w-[600px] text-md font-light ${textColor}`, description: description })) : null, benefits?.filter((_) => _.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map((benefit, i) => renderBenefit$1({ benefit, version, benefitsVersion }, i)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-title-2xs font-light", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] }) }), image?.src && jsx(Img, { className: "mt-[-50px]", image: image })] }));
+  const ProductBlockInner = JSX(({ className = '', context, title, headlineVersion = 'L', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
+      return (jsxs("div", { className: `flex grow justify-between items-stretch ${className}`, children: [jsxs("div", { className: `flex flex-col ${textBlockClassName}`, children: [jsx(Headline, { context: context, title: title, description: description, className: `!p-0 max-w-[600px]`, bgColorHeadline: version, headlineVersion: headlineVersion }), jsxs(BaseTile, { context: context, buttons: getButtons(context, buttons), children: [benefits?.filter((_) => _.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map((benefit, i) => renderBenefit$1({ benefit, version, benefitsVersion }, i)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-h6 font-light", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] })] }), image?.src && jsx(Img, { className: "mt-[-50px]", image: image })] }));
   });
-  const getTitle = (title, headingType) => {
-      return title ? (jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })) : null;
-  };
   const getButtons = (context, buttons) => {
       return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-4" })) : null;
   };
@@ -771,7 +799,7 @@
       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 = {
@@ -860,25 +888,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 }), 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)));
@@ -1015,15 +1043,15 @@
       const [isActive, setIsActive] = context.useState(initialState);
       const hasContent = blocks?.length;
       const icon = isActive ? 'MinusIcon' : 'PlusIcon';
-      const getContentBlock = ({ currentTarget }) => currentTarget.nextSibling;
       const handleToggle = (e) => {
-          if (!hasContent) {
+          const currentTarget = e.currentTarget;
+          if (!currentTarget) {
               return;
           }
           setIsActive(!isActive);
-          const contentBlock = getContentBlock(e);
+          const contentBlock = currentTarget.nextSibling;
           contentBlock.style.maxHeight = contentBlock.style.maxHeight
-              ? null
+              ? ''
               : `${contentBlock.scrollHeight}px`;
       };
       return { isActive, hasContent, icon, handleToggle };
@@ -1146,7 +1174,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-sm font-light ml-3", children: title }), jsxs("div", { className: "flex justify-start", children: [jsx("span", { className: `block calc-rate-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`, children: String(rate).replace('.', ',') }), unit ? jsx("span", { className: "calc-rate-text text-[65px] leading-[75px]", children: unit }) : ''] })] })));
 
   function renderButtonSection(context, buttons) {
       return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-7 gap-2" })) : null;
@@ -1518,8 +1546,6 @@
       });
   };
 
-  const TableRowContainer = JSX(({ children }) => (jsx("div", { className: "self-start flex flex-col", role: "row", children: jsx("div", { className: "flex", children: children }) })));
-
   const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
   const BORDER_CLASSES$1 = 'border-main-stroke border-solid border';
   const DIVIDER_CLASSES$1 = 'border-main-divider border border-t-0 border-x-0';
@@ -1527,16 +1553,18 @@
   const COLS_LENGTH_FOR_SCROLL$1 = 2;
   const COLUMN_WIDTH$1 = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px
 
+  const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES$1} ${GRADIENT}`, role: "columnheader", children: [icon && !image?.src && (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })), image?.src && jsx(Img, { className: "mb-[18px]", image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "font-medium text-xs py-[11px]", children: link.text }) }) }))] })));
+
   const carouselContainerClassesMap = {
       comparison: 'flex gap-4 duration-1000',
       tariff: 'flex flex-grow duration-1000',
   };
   const TableCarouselContainer = JSX(({ children, activeCardIndex, columnWidth, version = 'comparison' }) => (jsx("div", { className: "flex flex-1 overflow-hidden", children: jsx("div", { className: carouselContainerClassesMap[version], style: { transform: `translateX(-${activeCardIndex * columnWidth}px)` }, children: children }) })));
 
-  const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES$1} ${GRADIENT}`, role: "columnheader", scope: "col", children: [icon && !image?.src && (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })), image?.src && jsx(Img, { className: "mb-[18px]", image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "font-medium text-xs py-[11px]", children: link.text }) }) }))] })));
+  const TableRowContainer = JSX(({ children }) => (jsx("div", { className: "self-start flex flex-col", role: "row", children: jsx("div", { className: "flex", children: children }) })));
 
   const ComparisonTableColumnHeaders = JSX(({ colHeaders, activeCardIndex, router, handlerDecorator }) => {
-      return (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES$1, role: "columnheader", scope: "col" }), jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header, link: header.link && useLink({ router, handlerDecorator }, header.link) }, String(i)))) })] }));
+      return (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES$1, role: "columnheader" }), jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header, link: header.link && useLink({ router, handlerDecorator }, header.link) }, String(i)))) })] }));
   });
 
   const TableCell = JSX(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
@@ -1596,10 +1624,10 @@
       return (jsxs("div", { children: [jsxs("div", { role: "table", children: [colHeaders?.length ? (jsx(ComparisonTableColumnHeaders, { colHeaders: colHeaders, activeCardIndex: activeCardIndex, router: router, handlerDecorator: handlerDecorator })) : null, rowData?.length ? (jsx(ComparisonTableRows, { rowData: rowData, activeCardIndex: activeCardIndex, isColoredFirstColumn: isColoredFirstColumn, ...tableArrowScrollProps })) : null] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
   });
 
-  const ComparisonTable = JSX(({ className, context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, ...rest }) => {
+  const ComparisonTable = JSX(({ className = '', context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, ...rest }) => {
       const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
       const showToggle = () => setIsShowAllRow(!isShowAllRow);
-      return (jsxs(BlockWrapper, { context: context, className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, ...rest, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center mb-9 mx-auto", title: title }), jsx(ComparisonTableBody, { context: context, columns: columns, rowHeaders: rowHeaders, isShowAllRow: isShowAllRow, isColoredFirstColumn: isColoredFirstColumn, visibleRowLength: visibleRowLength }), visibleRowLength
+      return (jsxs(BlockWrapper, { context: context, className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className}`, ...rest, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center mb-9 mx-auto", title: title }), jsx(ComparisonTableBody, { context: context, columns: columns, rowHeaders: rowHeaders, isShowAllRow: isShowAllRow, isColoredFirstColumn: isColoredFirstColumn, visibleRowLength: visibleRowLength }), visibleRowLength
                   ? renderShowMoreToggleButton({ isShowAllRow, onClick: showToggle })
                   : null] }));
   });
@@ -1851,13 +1879,13 @@
       const SearchBarInputClassName = isMobile
           ? ' placeholder-transparent font-normal'
           : 'font-light h-full';
-      const inputPlaceholder = isMobile ? 'some search' : null;
+      const inputPlaceholder = isMobile ? 'some search' : undefined;
       return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: LoupeIconClassName, children: jsx(Img, { image: "LoupeIcon", width: "24", height: "24" }) }), term ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text ${SearchBarLabelClassName}`, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: `h-12 pl-12 w-full peer text-base text-black border border-solid rounded box-border
               outline-none pr-[6%] border-main-divider focus:border-primary-text ${SearchBarInputClassName}`, value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input", placeholder: inputPlaceholder }), isMobile ? (jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
                       e.preventDefault();
                       setTerm('');
-                  }, children: jsx(Img, { image: "CloseIcon", width: "24", height: "24" }) })) : (jsx(Button, { version: "primary", text: "\u041D\u0430\u0439\u0442\u0438", className: "invisible peer-focus:visible absolute top-1 right-1", onClick: (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" }) }))] }));
   });
@@ -2017,7 +2045,7 @@
   };
 
   const GroupBlocksItem = JSX(({ groupBlocks, context }) => {
-      return (jsx("div", { className: "grid grid-cols-12 gap-2 box-border", children: groupBlocks?.length ? groupBlocks.map(renderBlock$1(context)) : null }));
+      return (jsx("div", { className: "grid grid-cols-12 gap-1 box-border", children: groupBlocks?.length ? groupBlocks.map(renderBlock$1(context)) : null }));
   });
   const renderBlock$1 = (context) => (block, i) => {
       const type = block?.blockType;
@@ -2030,17 +2058,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 +2082,7 @@
               : groupBlocks.length;
           return { ...tab, count };
       });
-      return (jsxs(BlockWrapper, { context: context, className: `box-border gap-1 ${className}`, ...rest, children: [tabsNewMap?.length ? (jsx(GroupBlockTabs, { currentTag: currentTag, onTabClick: setCurrentTag, tabs: tabsNewMap, isShowCounter: isShowCounter })) : null, groupBlocks.length ? (jsx(GroupBlocksItem, { context: context, groupBlocks: filteredBlocks })) : null] }));
+      return (jsxs(BlockWrapper, { context: context, className: `box-border ${className}`, ...rest, children: [tabsNewMap?.length ? (jsx(GroupBlockTabs, { currentTag: currentTag, onTabClick: setCurrentTag, tabs: tabsNewMap, isShowCounter: isShowCounter })) : null, groupBlocks.length ? (jsx("div", { className: "mt-1", children: jsx(GroupBlocksItem, { context: context, groupBlocks: filteredBlocks }) })) : null] }));
   });
 
   const checkIsHrefSameOrigin = (href, router) => getOrigin(href) === getOrigin(router.href);
@@ -2110,7 +2140,7 @@
       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';
@@ -2135,12 +2165,15 @@
       transparent: 'bg-white',
   };
   const DropdownMenu = JSX((props) => {
-      const { menuVisible, toggleMenu, menuItems, bgColor, context } = props;
+      const { menuVisible, toggleMenu, menuItems, bgColor, context, activeSubItem } = props;
       const { useRouter, handlerDecorator } = context;
       const router = useRouter();
-      return (jsxs("div", { className: `absolute w-52 -top-4 right-0 pt-4 z-40 ${menuVisible ? 'bg-white rounded-md shadow-blue-gray/24' : ''}`, children: [jsx("button", { className: "flex justify-between items-center cursor-pointer h-6 ml-6", onClick: toggleMenu, "aria-label": `${menuVisible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, children: Array(3).fill(bgColor).map(renderDot) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${menuVisible ? '' : 'hidden'}`, "aria-hidden": !menuVisible, children: renderDotsSubMenuItems(menuItems, router, handlerDecorator) })] }));
+      return (jsxs("div", { className: `absolute w-52 -top-4 right-0 pt-4 z-40 ${menuVisible ? 'bg-white rounded-md shadow-blue-gray/24' : ''}`, children: [jsx("button", { className: "flex justify-between items-center cursor-pointer h-6 ml-6", onClick: toggleMenu, "aria-label": `${menuVisible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, children: Array(3).fill(bgColor).map(renderDot) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${menuVisible ? '' : 'hidden'}`, "aria-hidden": !menuVisible, children: renderDotsSubMenuItems({ menuItems, router, handlerDecorator, activeSubItem }) })] }));
   });
-  const renderDotsSubMenuItems = (menuItems, router, handlerDecorator) => menuItems?.map((_) => (jsx("a", { ...useLink({ router, handlerDecorator }, _), className: "text-base font-light pb-4 hover:text-primary-main", children: _.text }, _.href)));
+  const renderDotsSubMenuItems = ({ menuItems, router, handlerDecorator, activeSubItem, }) => {
+      const isActive = (item) => item === activeSubItem;
+      return menuItems?.map((_) => (jsx("a", { ...useLink({ router, handlerDecorator }, _), className: `text-base font-light pb-4 hover:text-primary-main ${isActive(_) ? 'text-primary-main' : ''}`, children: _.text }, _.href)));
+  };
   const renderDot = (bgColor, i) => (jsx("div", { className: `w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}` }, String(i)));
 
   const HeaderSubMenu = JSX(({ context, subItems = [], bgColor }) => {
@@ -2163,7 +2196,7 @@
               setVisibleItemsCount((prev) => Math.max(prev, itemIndex + 1));
           }
       };
-      return (jsxs("nav", { className: "relative mt-5", children: [jsx("div", { className: "overflow-hidden whitespace-nowrap mr-52", children: subItems.map((_, i) => (jsx(IntersectionObserverTag, { Tag: "span", observerCallback: observerCallback(i), observerOptions: { threshold: 1 }, children: jsx(HeaderItem, { className: `mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`, active: _ === activeSubItem, ...useLink({ router, handlerDecorator }, _), bgColor: bgColor }) }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { context: context, menuVisible: menuVisible, toggleMenu: toggleMenu, menuItems: dropDownMenuItems, bgColor: bgColor })) : null] }));
+      return (jsxs("nav", { className: "relative mt-5", children: [jsx("div", { className: "overflow-hidden whitespace-nowrap mr-52 pb-3", children: subItems.map((_, i) => (jsx(IntersectionObserverTag, { Tag: "span", observerCallback: observerCallback(i), observerOptions: { threshold: 1 }, children: jsx(HeaderItem, { className: `mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`, active: _ === activeSubItem, ...useLink({ router, handlerDecorator }, _), bgColor: bgColor }) }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { context: context, activeSubItem: activeSubItem, menuVisible: menuVisible, toggleMenu: toggleMenu, menuItems: dropDownMenuItems, bgColor: bgColor })) : null] }));
   });
 
   const BORDER_COLORS = {
@@ -2177,14 +2210,14 @@
       const mergedItems = mergeTopItems(sitemap.topItems, topItems);
       const activeTopItem = mergedItems.find(isTopItemActive(router));
       const topMenu = mergedItems.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ...useLink({ router, handlerDecorator }, _), "aria-label": _.text, bgColor: bgColor }, String(i))));
-      return (jsx(BlockWrapper, { Tag: "header", context: context, className: `pt-6 pb-8 px-20 ${bgColor} ${className}`, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { context: context, className: "ml-auto", defaultLocation: defaultLocation, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-[1px] ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { context: context, subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
+      return (jsx(BlockWrapper, { Tag: "header", context: context, className: `pt-6 pb-5 px-20 ${bgColor} ${className}`, ...rest, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor, logo: logo }), topMenu, jsx(HeaderSecondaryMenu, { context: context, className: "ml-auto", defaultLocation: defaultLocation, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-[1px] ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { context: context, subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
   });
 
-  const Insurance = JSX(({ className = '', title, description, image, benefits, sum, monthLimit, ...rest }) => {
-      return (jsxs(BlockWrapper, { className: `px-[100px] py-[50px] bg-white text-primary-text font-sans ${className}`, ...rest, children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "text-center" }) : null, description ? jsx("div", { className: "text-center text-md mt-3", children: description }) : null, jsx("div", { children: jsxs("div", { className: "mt-5 mx-auto flex justify-center gap-[122px] mt-[30px]", children: [image?.src ? jsx(Img, { image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] }) })] }));
+  const Insurance = JSX(({ context, className = '', title, description, image, benefits, sum, monthLimit, ...rest }) => {
+      return (jsxs(BlockWrapper, { className: `px-[100px] py-[50px] bg-white text-primary-text font-sans ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", align: "center" }), jsx("div", { children: jsxs("div", { className: "mt-5 mx-auto flex justify-center gap-[122px] mt-[30px]", children: [image?.src ? jsx(Img, { image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] }) })] }));
   });
   function renderBenefit(benefit, i) {
-      return (jsxs("div", { className: "flex items-center gap-4", children: [benefit?.icon ? (jsx(Img, { className: "w-12 h-12 min-w-12 p-3 rounded-full bg-secondary-light", image: benefit.icon, asSVG: true })) : null, jsxs("div", { children: [benefit?.label ? jsx("div", { className: "text-title-2xs font-normal", children: benefit.label }) : null, benefit?.description ? (jsx("div", { className: "mt-0.5 font-light text-secondary-text font-light", children: benefit.description })) : null] })] }, String(i)));
+      return (jsxs("div", { className: "flex items-center gap-4", children: [benefit?.icon ? (jsx(Img, { className: "w-12 h-12 min-w-12 p-3 rounded-full bg-secondary-light", image: benefit.icon, asSVG: true })) : null, jsxs("div", { children: [benefit?.label ? jsx("div", { className: "text-h6", children: benefit.label }) : null, benefit?.description ? (jsx("div", { className: "mt-0.5 text-secondary-text text-m", children: benefit.description })) : null] })] }, String(i)));
   }
   function renderInsuranceSumMonth(sum, monthLimit) {
       return sum || monthLimit ? (jsxs("div", { className: "bg-secondary-light h-15 flex mt-7 gap-6 px-5 py-4", children: [Number.isFinite(sum) ? renderValueBlock$1('Страховая сумма:', sum, Boolean(monthLimit)) : null, Number.isFinite(monthLimit)
@@ -2193,7 +2226,7 @@
   }
   function renderValueBlock$1(title, sum, isAnotherBlock) {
       const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
-      return (jsxs("div", { className: `flex justify-between items-center gap-2 w-full ${widthStyle}`, children: [jsx("span", { className: "text-secondary-text text-base", children: title }), jsxs("span", { className: "text-primary-main text-title-2xs", children: [addSpacesBetweenNumbers(sum), " \u20BD"] })] }));
+      return (jsxs("div", { className: `flex justify-between items-center gap-2 w-full ${widthStyle}`, children: [jsx("span", { className: "text-secondary-text text-l-light", children: title }), jsxs("span", { className: "text-primary-main text-h6", children: [addSpacesBetweenNumbers(sum), " \u20BD"] })] }));
   }
 
   const InsuranceAmountBlockInner = JSX(({ className = '', context, cards = [] }) => {
@@ -2207,7 +2240,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 +2314,11 @@
       return (jsxs(BlockWrapper, { context: context, className: `flex justify-between font-sans p-9 box-border relative
         ${getTileRightPadding(className)} ${getTileMinHeight(className)}
         ${mobileAppStyleMap[version]}
-        ${className}`, ...rest, children: [jsx(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: "h3", title: title, className: `whitespace-pre-wrap max-w-[509px] mb-6
-                  ${textColorClass}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-[30px] gap-4" })) : null, children: jsxs("div", { className: "flex flex-1 items-center", children: [qr?.src && qr?.href && (jsx("a", { href: qr.href, target: "_blank", "aria-label": title, children: jsx("img", { src: qr.src, alt: title, title: title, width: "122", height: "122", className: "w-[122px] h-[122px] min-w-[122px] min-h-[122px] bg-secondary-light mr-[23px] rounded-md" }) })), renderList$1(version, items)] }) }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(Img, { image: image }) })) : null] }));
+        ${className}`, ...rest, children: [jsx(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: "h4", as: "h3", title: title, className: `whitespace-pre-wrap max-w-[509px] mb-6
+                  ${textColorClass}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-[30px] gap-4" })) : null, children: jsxs("div", { className: "flex flex-1 items-center", children: [qr?.src && qr?.href && (jsx("a", { href: qr.href, target: "_blank", "aria-label": title, children: jsx("img", { src: qr.src, alt: title, title: title, width: "122", height: "122", className: "w-[122px] h-[122px] min-w-[122px] min-h-[122px] bg-secondary-light mr-4 rounded-md" }) })), renderList$1(version, items)] }) }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(Img, { image: image }) })) : null] }));
   });
   const renderList$1 = (version, items) => {
-      return items?.length ? (jsx(List, { items: items, itemClassName: "base font-light mb-2 last:mb-0", version: version === 'primary' ? 'tile' : 'tile-white' })) : (jsx("span", { className: "font-light text-secondary-text ml-4", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
+      return items?.length ? (jsx(List, { items: items, itemClassName: "base font-light mb-2 last:mb-0", version: version === 'primary' ? 'tile' : 'tile-white' })) : (jsx("span", { className: "text-m text-secondary-text", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
   };
 
   const NavigationItem = JSX(({ className, text, onClick, href, target, isActive }) => (jsx("a", { className: `bg-inherit no-underline px-4 py-2.5 cursor-pointer rounded text-sm border border-solid hover:text-primary-main ${className || ''} ${isActive ? 'border-primary-main text-primary-main' : 'border-white text-secondary-text'}`, onClick: onClick, href: href, target: target, children: text })));
@@ -2299,7 +2332,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) => {
@@ -2363,7 +2396,7 @@
           context,
           blocks,
       });
-      return (jsx("div", { className: "border-0 border-b border-solid border-main-divider", children: blocks?.length ? (jsx(Foldable, { foldButtonDataTheme: dataTheme, hiddenBlocksNum: blocks?.length, blocks: foldableBlocks, isUnfolded: isUnfolded, context: context, foldButtonLabel: label, containerClasses: "grid grid-cols-12 gap-1 border-box", render: (children, isActive) => jsx(Wrapper$1, { isActive: isActive, children: children }) })) : null }));
+      return (jsx("div", { className: "border-0 border-b border-solid border-main-divider", children: blocks?.length ? (jsx(Foldable, { foldButtonDataTheme: dataTheme, hiddenBlocksNum: blocks?.length, blocks: foldableBlocks, isUnfolded: isUnfolded, context: context, foldButtonLabel: label, containerClasses: "grid grid-cols-12 gap-1 border-box", render: (children) => jsx(Wrapper$1, { children: children }) })) : null }));
   });
   const Wrapper$1 = JSX(({ children }) => {
       return jsx("div", { className: "box-border", children: children });
@@ -2376,19 +2409,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(_))
@@ -2449,7 +2482,7 @@
       secondary: 'bg-primary-main text-white',
   };
   const PromoTile = JSX(({ className = '', context, title = 'Акции и спецпредложения', date, description, buttons = [], version = 'primary', ...rest }) => {
-      return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${promoTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsx(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-sm mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-base", children: description })] }) }) }));
+      return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${promoTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, ...rest, children: jsx(BaseTile, { context: context, title: title ? (jsx("div", { children: jsx(Headline, { context: context, title: title, className: `!p-0 max-w-[600px]`, headlineVersion: getTileHeadingType(className), bgColorHeadline: version }) })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, children: jsxs("div", { className: "mt-1.5", children: [date ? jsx("div", { className: "text-sm mb-2", children: formatDate(date) }) : null, jsx("div", { className: "text-base", children: description })] }) }) }));
   });
   function formatDate(date) {
       const dateObj = new Date(date);
@@ -2504,13 +2537,15 @@
           background: 'bg-white',
           title: 'text-primary-text',
           description: 'text-secondary-text',
-          iconBackground: 'bg-secondary-light',
+          iconText: 'text-secondary-text',
+          iconBackground: 'bg-main-divider',
           iconConnector: 'bg-secondary-light',
       },
       secondary: {
           background: 'bg-primary-main',
           title: 'text-white',
           description: 'text-white/80',
+          iconText: 'text-white',
           iconBackground: 'bg-white/30',
           iconConnector: 'bg-white',
       },
@@ -2529,13 +2564,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';