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

package/mobile/bundle/bundle.umd.js

@@ -187,6 +187,7 @@
   }
 
   const HeadingClass = {
+      h0: 'text-m-title',
       h1: 'text-m-title',
       h2: 'text-m-title',
       h3: 'text-m-title-md',
@@ -195,11 +196,7 @@
       h6: 'text-m-title-xs',
   };
   const Heading = JSX((props) => {
-      const { className, headingType, title, as } = props;
-      if (!headingType) {
-          return;
-      }
-      const Tag = as || headingType;
+      const { className, headingType = 'h3', title, as: Tag = 'h3' } = props;
       return (jsx(Tag, { className: `font-sans font-medium m-0 ${HeadingClass[headingType]} ${className || ''}`, children: title }));
   });
 
@@ -250,6 +247,7 @@
       IconMap["InterestGrowthIcon"] = "InterestGrowthIcon";
       IconMap["InterestIcon"] = "InterestIcon";
       IconMap["JCBIcon"] = "JCBIcon";
+      IconMap["Logo"] = "Logo";
       IconMap["LoupeIcon"] = "LoupeIcon";
       IconMap["MasterCardIcon"] = "MasterCardIcon";
       IconMap["MinusIcon"] = "MinusIcon";
@@ -332,6 +330,7 @@
       IconTitleMap["InterestGrowthIcon"] = "\u0414\u0438\u0430\u0433\u0440\u0430\u043C\u043C\u0430 \u0440\u043E\u0441\u0442\u0430";
       IconTitleMap["InterestIcon"] = "\u0421\u043A\u0438\u0434\u043A\u0430";
       IconTitleMap["JCBIcon"] = "JCB";
+      IconTitleMap["Logo"] = "Logo";
       IconTitleMap["LoupeIcon"] = "\u041B\u0443\u043F\u0430";
       IconTitleMap["MasterCardIcon"] = "MasterCard";
       IconTitleMap["MinusIcon"] = "\u041C\u0438\u043D\u0443\u0441";
@@ -418,35 +417,49 @@
       return typeof image === 'string' ? 'normal' : image.iconVersion || 'normal';
   }
 
-  const Img = JSX(({ className = '', image, imageClassName = '', ...iconProps }) => {
-      // backwards compatibility with existing icons in usage
-      const icon = typeof image === 'string' ? image : image?.icon;
-      if (icon || icon === '') {
-          return (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: getIconVersion(image), name: icon, ...iconProps }));
+  const sourcesComparator = (a, b) => {
+      if (a.media && b.media) {
+          return a.media - b.media;
       }
-      return (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image }));
-  });
-  const ImgAsPicture = JSX(({ className = '', image, imageClassName = '' }) => {
+      return 0;
+  };
+  const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', isMobile = false }) => {
       if (!image) {
           return null;
       }
-      return (jsxs("picture", { className: className, children: [image?.sources?.length
-                  ? image.sources.map(({ src, format }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format) }, `${index}_${src}`)))
-                  : null, renderImg(image, imageClassName)] }));
+      const pictureStyles = isMobile ? 'flex' : 'flex-none';
+      return (jsxs("picture", { className: `${pictureStyles} ${className}`, children: [image?.sources?.length
+                  ? image.sources
+                      .sort(sourcesComparator)
+                      .map(({ src, format, media, size }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...size }, `${index}_${src}`)))
+                  : null, renderImg(image, imageClassName, isMobile)] }));
   });
-  const renderImg = (image, imageClassName = '') => {
-      const style = {
-          width: image.size?.width ? `${image.size?.width}px` : '100%',
-          height: image.size?.height ? `${image.size?.height}px` : '100%',
-      };
+  const renderImg = (image, imageClassName = '', isMobile = false) => {
       const title = image.title || '';
       const alt = image.alt || image.title;
-      return (jsx("img", { src: image.src, className: `m-auto ${imageClassName}`, alt: alt, title: title, style: style, ...image.size }));
+      const imgStyle = isMobile ? 'm-auto' : 'm-0';
+      return (jsx("img", { src: image.src, className: `${imgStyle} ${imageClassName}`, alt: alt, title: title, ...image.size }));
   };
   function formatToMimeType(format) {
       return format ? `image/${String(format)}` : undefined;
   }
 
+  const ImgInner = JSX(({ className = '', image, imageClassName = '', isMobile, ...iconProps }) => {
+      if (!image) {
+          return null;
+      }
+      // backwards compatibility with existing icons in usage
+      const icon = typeof image === 'string' ? image : image.icon;
+      if (icon || icon === '') {
+          return icon.length ? (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: getIconVersion(image), name: icon, ...iconProps })) : null;
+      }
+      return (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image, isMobile: isMobile }));
+  });
+
+  const Img = JSX(({ className = '', image }) => {
+      return jsx(ImgInner, { className: className, image: image, isMobile: true });
+  });
+
   function style2className(style) {
       return style ? style.filter(Boolean).join(' ') : '';
   }
@@ -476,7 +489,7 @@
 
   const Headline = JSX(({ bgColorHeadline = 'transparent', className = '', title, description, image, align = 'left', }) => {
       const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
-      return (jsxs("section", { className: `px-4 py-6 flex flex-col gap-2.5 ${STYLE_MAPS.background} ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx("p", { className: `font-normal text-m-md ${STYLE_MAPS.description} ${ALIGN_TEXT[align]}            `, children: description })) : null, image?.src && (jsx("div", { className: "mt-2.5 mx-auto flex justify-center", children: jsx(Img, { image: image }) }))] }));
+      return (jsxs("section", { className: `px-4 py-6 flex flex-col gap-2.5 ${STYLE_MAPS.background} ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx("p", { className: `font-normal text-m ${STYLE_MAPS.description} ${ALIGN_TEXT[align]}            `, children: description })) : null, image?.src && (jsx("div", { className: "mt-2.5 mx-auto flex justify-center", children: jsx(Img, { image: image }) }))] }));
   });
 
   // column-gap between children of SwipeListControl container
@@ -639,19 +652,19 @@
   const LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full box-border ${className}`, iconClassName: "mr-3 min-w-6 min-h-6", doc: doc, icon: icon })));
 
   const LinkDocsHorizontalList = JSX(({ context, hasBorder = true, documents, icon }) => {
-      return (jsx(SwipeListControl, { context: context, className: "text-m-sm text-primary-main mt-5", children: documents?.length
+      return (jsx(SwipeListControl, { context: context, className: "text-s text-primary-main mt-5", children: documents?.length
               ? documents.map((doc, i) => (jsx(LinkDocsListItem, { className: hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : '', doc: doc, icon: icon }, String(i))))
               : null }));
   });
 
   const LinkDocsVerticalList = JSX(({ hasBorder = true, documents, icon }) => {
-      return (jsx("div", { className: `text-m-sm text-primary-main flex flex-col mt-5 ${hasBorder ? 'gap-3.5' : 'gap-2'}`, role: "list", children: documents?.length
+      return (jsx("div", { className: `text-s text-primary-main flex flex-col mt-5 ${hasBorder ? 'gap-3.5' : 'gap-2'}`, role: "list", children: documents?.length
               ? documents.map((doc, i) => (jsx("div", { role: "listitem", children: jsx(LinkDocsListItem, { className: hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : '', doc: doc, icon: icon }) }, String(i))))
               : null }));
   });
 
   const LinkDocs = JSX(({ className = '', context, title, description, icon = { icon: 'DocIconMonoColor' }, documents, orientation = 'vertical', hasBorder = true, }) => {
-      return (jsxs("section", { className: `font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`, children: [jsx(Headline, { className: `!p-0 ${description ? 'gap-2' : 'gap-5'}`, title: title, description: description, context: context, align: "center", headingType: "h3" }), orientation === 'vertical' ? (jsx(LinkDocsVerticalList, { hasBorder: hasBorder, documents: documents, icon: icon })) : (jsx(LinkDocsHorizontalList, { context: context, hasBorder: hasBorder, documents: documents, icon: icon }))] }));
+      return (jsxs("section", { className: `font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`, children: [jsx(Headline, { className: `!p-0 ${description ? 'gap-2' : 'gap-5'}`, title: title, description: description, context: context, align: "center" }), orientation === 'vertical' ? (jsx(LinkDocsVerticalList, { hasBorder: hasBorder, documents: documents, icon: icon })) : (jsx(LinkDocsHorizontalList, { context: context, hasBorder: hasBorder, documents: documents, icon: icon }))] }));
   });
 
   const isURL = (href) => href?.includes('//');
@@ -673,13 +686,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';
@@ -712,7 +727,7 @@
               const isLocalHref = href && !isURL(href);
               const isLocalTarget = !link.target || link.target === '_self';
               if (isLocalHref && isLocalTarget) {
-                  ev.preventDefault();
+                  ev?.preventDefault();
                   router.push(href);
               }
           }, link),
@@ -721,14 +736,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',
@@ -751,7 +766,7 @@
   const Button = JSX(({ className, text, aboveText, appendLeft, href, target, onClick, children, disabled, rounded, version = 'primary', ariaLabel, ...rest }) => {
       const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, rounded: rounded, version: version }));
       if (disabled) {
-          return (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: "-1", className: `inline-block ${styleButton} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: buttonInner }));
+          return (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: -1, className: `inline-block ${styleButton} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: buttonInner }));
       }
       return (jsx("a", { className: `${styleButton} 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 ? 'button' : 'link', ...rest, children: buttonInner }));
   });
@@ -759,20 +774,15 @@
   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$3(useLink({ router, handlerDecorator }, button), index)) })) : null;
+      return buttons && buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => renderButton$3(useLink({ router, handlerDecorator }, button), index)) })) : null;
   });
   function renderButton$3({ icon, iconRight, ...button }, i) {
       if (!button?.text) {
-          return;
+          return null;
       }
       return icon ? (jsx(Button, { appendLeft: jsx(Img, { image: icon, width: "24", height: "24", asSVG: true }), appendRight: jsx(Img, { image: iconRight, width: "24", height: "24", asSVG: true }), ...button }, String(i))) : (jsx(Button, { ...button }, String(i)));
   }
 
-  const Description = JSX((props) => {
-      const { className = '', description } = props;
-      return jsx("div", { className: `font-normal text-base ${className}`, children: description });
-  });
-
   const LIST_STYLE_CLASSES = {
       primary: 'rounded-full inline-block mr-3 mt-2',
       secondary: 'rounded-full inline-block mr-3 mt-2',
@@ -815,7 +825,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] })] }));
   });
 
@@ -829,7 +839,7 @@
   };
   function renderBenefit({ benefit, version = 'primary' }, i) {
       const isIconWhite = version === 'secondary';
-      return (jsxs("div", { className: "flex gap-3 items-center mb-2.5 last:mb-0", children: [benefit.icon ? (jsx(Img, { className: renderBenefitIconBgStyle(version), image: { ...benefit?.icon, iconVersion: isIconWhite ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true })) : null, jsx("div", { className: `font-medium text-m-title-xs m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description && (jsx("div", { className: `font-normal text-m-sm ${benefitDescStyleMap[version]}`, children: benefit.description }))] }, String(i)));
+      return (jsxs("div", { className: "flex gap-3 items-center mb-2.5 last:mb-0", children: [benefit.icon ? (jsx(Img, { className: renderBenefitIconBgStyle(version), image: { ...benefit?.icon, iconVersion: isIconWhite ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true })) : null, jsx("div", { className: `text-l m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description && (jsx("div", { className: `text-s ${benefitDescStyleMap[version]}`, children: benefit.description }))] }, String(i)));
   }
   function renderBenefitIconBgStyle(version) {
       let bgColorStyle = 'text-primary-main';
@@ -839,8 +849,8 @@
       return `w-6 h-6 rounded-full box-border ${bgColorStyle}`;
   }
 
-  const ProductBlockInner = JSX(({ className = '', context, title, headingType = 'h2', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, label, }) => {
-      return (jsxs("div", { className: `w-full ${className}`, children: [jsxs("div", { children: [label ? renderLabel(label, version) : null, jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-5 gap-2.5" })) : null, children: [description ? (jsx(Description, { className: "mt-3 text-m-md", description: description })) : null, benefits?.filter((_) => _.label)?.length ? (jsx("div", { className: "mt-3", children: benefits.map((benefit, i) => renderBenefit({ benefit, version, benefitsVersion }, i)) })) : null, items?.length ? (jsx(List, { className: "mt-3 text-m-md", items: items, version: version, isDotted: isDotted })) : null] })] }), renderImage$1(image)] }));
+  const ProductBlockInner = JSX(({ className = '', context, title, headlineVersion = 'L', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, label, }) => {
+      return (jsxs("div", { className: `w-full ${className}`, children: [jsxs("div", { children: [label ? renderLabel(label, version) : null, jsx(Headline, { context: context, className: "!p-0 max-w-[600px]", title: title, description: description, headlineVersion: headlineVersion }), jsxs(BaseTile, { context: context, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-5 gap-2.5" })) : null, children: [benefits?.filter((_) => _.label)?.length ? (jsx("div", { className: "mt-3", children: benefits.map((benefit, i) => renderBenefit({ benefit, version, benefitsVersion }, i)) })) : null, items?.length ? (jsx(List, { className: "mt-3 text-m", items: items, version: version, isDotted: isDotted })) : null] })] }), renderImage$1(image)] }));
   });
   function renderImage$1(image) {
       return image?.src ? (jsx(Img, { imageClassName: "mt-5 mx-auto block", image: { className: 'block', ...image } })) : null;
@@ -882,7 +892,8 @@
   };
   const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className = '', items, isDotted = true, }) => {
       const textBlockStyleMap = textBlockStyleMaps[blockVersion];
-      return (jsxs("section", { className: `font-sans px-4 py-[18px] flex flex-col ${textBlockStyleMap.background} ${className}`, children: [iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title ? (jsx("div", { className: `font-medium text-base mb-1 ${textBlockStyleMap.title}`, children: title })) : null, description ? (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description })) : null, items?.length ? (jsx(List, { className: "mt-1 text-m-md", items: items, isDotted: isDotted, version: blockVersion === 'secondary' ? 'secondary' : 'gray' })) : null] })] }));
+      const listBlockVersion = blockVersion === 'secondary' ? 'secondary' : 'gray';
+      return (jsxs("section", { className: `font-sans px-4 py-[18px] flex flex-col ${textBlockStyleMap.background} ${className}`, children: [iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title ? (jsx("div", { className: `font-medium text-base mb-1 ${textBlockStyleMap.title}`, children: title })) : null, description ? (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description })) : null, items?.length ? (jsx(List, { className: "mt-1 text-m-md", items: items, isDotted: isDotted, version: listBlockVersion })) : null] })] }));
   });
   function renderIcon(className) {
       return (jsx("div", { className: "mb-3", children: jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs ${className}`, children: "i" }) }));
@@ -896,7 +907,8 @@
       secondary: 'bg-primary-main text-white',
   };
   const Gallery = JSX(({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {
-      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`, children: [jsxs("div", { className: "flex flex-col items-center mb-5", children: [title ? (jsx(Heading, { headingType: "h3", className: `text-center ${description ? 'mb-2' : 'mb-5'}`, title: title })) : null, description ? (jsx("div", { className: "font-normal text-m-md max-w-[600px] text-center mb-5", children: description })) : null] }), renderCardsLayout(orientation, cards, context)] }));
+      const headingClassName = description ? 'mb-2' : 'mb-5';
+      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`, children: [jsxs("div", { className: "flex flex-col items-center mb-5", children: [title ? (jsx(Heading, { headingType: "h3", className: `text-center ${headingClassName}`, title: title })) : null, description ? (jsx("div", { className: "font-normal text-m-md max-w-[600px] text-center mb-5", children: description })) : null] }), renderCardsLayout(orientation, cards, context)] }));
   });
   function renderCardsLayout(orientation, cards, context) {
       return orientation === 'horizontal' ? (jsx(SwipeListControl, { context: context, children: cards?.map(renderCard) })) : (jsx("div", { className: "grid gap-[14px]", children: cards?.map(renderCard) }));
@@ -949,11 +961,13 @@
 
   const renderBlocksList = ({ blocks, context, className = '' }) => blocks?.length ? blocks.map(renderBlock$1({ context, className })) : null;
   const renderBlock$1 = ({ context, className }) => (block, i) => {
-      const type = block?.blockListType;
+      if (!block) {
+          return null;
+      }
+      const { style, blockListType: type, ...rest } = block;
       if (!type || !(type in EmbeddableBlocks)) {
           return null;
       }
-      const { style, ...rest } = block;
       const classNameBlock = style2className(style);
       const EmbeddedBlock = EmbeddableBlocks[type];
       return (jsx(EmbeddedBlock, { className: `${className} ${classNameBlock}`, context: context, ...rest }, `block_${i}`));
@@ -967,15 +981,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 };
@@ -1092,6 +1106,7 @@
       }
       catch (err) {
           console.error(err);
+          return Promise.resolve();
       }
   }
   const EXCHANGE_RATES_URL = 'https://coins.rshb.ru/api/catalog/vue_storefront_magento_1_currency_rates_average/currency_rates_average/_search?size=10000';
@@ -1123,39 +1138,17 @@
   };
   const getCurrencyListByRate = (currencyRates) => currencyRates.reduce((result, _) => {
       const currencyInfo = _['currency_first'];
-      if (!validateRate(_['rate_buy']) && !validateRate(_['rate_sell'])) {
-          return result;
-      }
-      const currencyCode = currencyInfo.code;
+      const currencyCode = currencyInfo?.code;
       if (!result.some((i) => i.code === currencyCode)) {
           result.push({
               code: currencyCode,
-              buy: Number(_.rate_buy),
-              sell: Number(_.rate_sell),
+              buy: roundRate(Number(_.rate_buy)),
+              sell: roundRate(Number(_.rate_sell)),
           });
       }
       return result;
   }, []);
-  const validateRate = (value) => Math.round(value) > 0;
-
-  const getColSpan = (className) => {
-      const colSpanPrefix = 'col-span-';
-      const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
-      return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
-  };
-
-  function getTileHeadingType(className = '') {
-      const colSpan = getColSpan(className);
-      if (colSpan <= 4) {
-          return 'h4';
-      }
-      else if (colSpan <= 8) {
-          return 'h3';
-      }
-      else {
-          return 'h2';
-      }
-  }
+  const roundRate = (value) => Math.round(value * 1000) / 1000;
 
   var Currency;
   (function (Currency) {
@@ -1170,7 +1163,7 @@
   });
   const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
 
-  const TABLE_HEAD_STYLE = 'font-light text-left font-normal text-sm text-secondary-text';
+  const TABLE_HEAD_STYLE = 'text-left text-m text-secondary-text';
   const CURRENCY_ICONS_MAP = {
       USD: 'DollarIcon',
       EUR: 'EuroIcon',
@@ -1180,10 +1173,10 @@
   });
   const renderCurrencyRow = (exchangeCurrencyItem) => {
       const code = exchangeCurrencyItem?.code;
-      return (jsxs("tr", { className: "pb-1", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[code] }, width: "24", height: "24" }) : null, jsx("span", { className: "text-m-title-md ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.buy) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.sell) })] }, code));
+      return (jsxs("tr", { className: "pb-1 text-h6", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[code] }, width: "24", height: "24" }) : null, jsx("span", { className: "ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.sell) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem?.buy) })] }, code));
   };
 
-  const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex text-sm ${className}`, children: [jsx(Img, { image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3 font-light", children: [address ? jsx("p", { className: "m-0 mb-[3px]", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
+  const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex ${className}`, children: [jsx(Img, { image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3", children: [address ? jsx("p", { className: "text-primary-main  m-0 mb-1 text-l", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0 text-m", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
 
   const roundTo = (value, precision = 2) => {
       const factor = Math.pow(10, precision);
@@ -1213,8 +1206,8 @@
       [() => true, () => props.handleConvert(props.value)],
   ])(props)?.();
 
-  function renderButton() {
-      return (jsx(Button, { className: "box-border mt-3.5 py-3 h-12 w-full", version: "primary", href: "https://coins.rshb.ru/exchange", target: "_blank", children: "\u041A\u0443\u043F\u0438\u0442\u044C \u0432\u0430\u043B\u044E\u0442\u0443" }));
+  function renderButton(button) {
+      return (jsx(Button, { className: "py-4 mr-1", version: button?.version, href: button?.href, target: "_blank", children: button?.text }));
   }
 
   const Input = JSX(({ className = '', id, name, type = 'text', placeholder, pattern, value, onChange }) => {
@@ -1235,10 +1228,10 @@
 
   function renderInput(props) {
       const { placeholder, rates, selected, value, setValue, setSelected } = props;
-      return (jsxs("div", { className: "relative flex items-center", children: [jsx(Input, { className: "h-10 border pl-4 pt-[7px] pb-[7px] rounded-md text-m-sm w-full appearance-none -mr-12", placeholder: placeholder, type: "text", value: value, onChange: setValue }), rates.length ? (jsx(Select, { className: "h-9 -translate-x-4", value: selected, onChange: (_) => setSelected(_), children: rates.map((_, i) => (jsx(SelectOption, { value: _.code, children: _.code }, String(i)))) })) : null] }));
+      return (jsxs("div", { className: "relative flex items-center", children: [jsx(Input, { className: "h-13 border pl-4 pt-4 pb-4 rounded-md text-l w-full appearance-none -mr-12", placeholder: placeholder, type: "text", value: value, onChange: setValue }), rates.length ? (jsx(Select, { className: "h-9 -translate-x-4 bg-transparent", value: selected, onChange: (_) => setSelected(_), children: rates.map((_, i) => (jsx(SelectOption, { value: _.code, children: _.code }, String(i)))) })) : null] }));
   }
 
-  const ExchangeCurrencyCalculator = JSX(({ context, className = '', currencyRatesBuy, currencyRatesSell }) => {
+  const ExchangeCurrencyCalculator = JSX(({ context, className = '', currencyRatesBuy, currencyRatesSell, button }) => {
       const [calcState, setCalcState] = context.useState({
           inputSell: '',
           inputBuy: '',
@@ -1248,7 +1241,7 @@
       const handleSetCalcState = (newState) => {
           setCalcState((oldState) => ({ ...oldState, ...newState }));
       };
-      return (jsxs("div", { className: `grid gap-3.5 ${className}`, children: [renderInput({
+      return (jsxs("div", { className: `grid gap-[18px] pt-2 ${className}`, children: [renderInput({
                   placeholder: 'Хочу продать',
                   rates: currencyRatesBuy,
                   selected: calcState.selectSell,
@@ -1262,7 +1255,7 @@
                   setSelected: handleSelectBuy(calcState, handleSetCalcState, currencyRatesBuy),
                   value: calcState.inputBuy,
                   setValue: (value) => handleInputBuy(handleSetCalcState, currencyRatesBuy)(value, calcState.selectBuy, calcState.selectSell),
-              }), renderButton()] }));
+              }), button?.text ? renderButton(button) : null] }));
   });
   const handleSelectSell = (calcState, setCalcState, currencyRatesSell) => (value) => {
       setCalcState({ selectSell: value });
@@ -1307,26 +1300,15 @@
       address: 'Москва, ул.Ленина д.28',
       distance: '6км',
   };
-  const ExchangeRateTile = JSX(({ className = '', context, title = 'Курсы обмена валют', ...rest }) => {
+  const ExchangeRateTile = JSX(({ className = '', context, title = 'Курсы обмена валют', button, ...rest }) => {
       const currencyRates = useExchangeRates(context.useAsyncData);
       const currencyRatesBuy = currencyRates.filter((_) => _.buy);
       currencyRatesBuy.unshift({ code: Currency.RUB });
       const currencyRatesSell = currencyRates.filter((_) => _.sell);
       currencyRatesSell.push({ code: Currency.RUB });
-      return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className}`, ...rest, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-[43px] pt-4", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[31px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", context: context, currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell })) : null] }) }) }));
-  });
-
-  const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
-      return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, viewBox: viewBox, fill: fill, width: width, height: height, children: paths.map(({ d, fill: pathFill, ...options }, i) => (jsx("path", { d: d, fill: pathFill || 'currentColor', ...commonOptions, ...options }, i))) }));
+      return (jsx(BlockWrapper, { context: context, className: `bg-white text-primary-text font-sans p-9 box-border ${className}`, ...rest, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: "h4", title: title, className: "whitespace-pre-wrap text-h4" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-14 pt-4", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[30px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", context: context, currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell, button: button })) : null] }) }) }));
   });
 
-  const LOGO_PATHS = [
-      'm13.72 25.51 4.42-4.33v-2.95l-4.42 4.32v2.96Zm0-10.98 4.42-4.35V7.41l-4.42 4.31v2.8Zm0 3.63 4.42-4.33v-2.78l-4.42 4.32v2.8ZM12.46 7.44l-.6-.56V0h-.66v6.22l-.58-.57V0h-.67v5l-.59-.58V0H8.7v6.56l4.44 4.33V0h-.67v7.44Zm1.26 14.35 4.42-4.33v-2.78L13.72 19v2.8Zm-5.03-.61 4.44 4.33v-2.96l-4.44-4.32v2.95Zm8.79-16.76-.59.58V0h-.66v5.66l-.6.56V0h-.66v6.87l-.58.57V0h-.67v10.9l4.42-4.34V0h-.66v4.42Zm-8.79 5.76 4.44 4.35v-2.8L8.69 7.4v2.77Zm0 3.65 4.44 4.33v-2.8l-4.44-4.3v2.77Zm0 3.63 4.44 4.33V19l-4.44-4.31v2.78Zm26.37 2.29H24.3a2.25 2.25 0 0 0 .36-1.22 2.32 2.32 0 0 0-2.33-2.31 2.32 2.32 0 0 0-2.31 2.31c0 .5.16.96.43 1.34a.74.74 0 0 0-.33.61c0 .26.14.49.33.62a2.32 2.32 0 0 0-.43 1.34 2.31 2.31 0 0 0 2.31 2.31 2.32 2.32 0 0 0 2.33-2.31c0-.45-.13-.87-.36-1.22h8.01v.49h-.8v.68h.8v.7h-.8v1.3h.8v-.58h1.17v.58h.79v-1.3h-.79v-.7h.79v-.68h-.79v-.5h1.58a.56.56 0 0 0 .56-.56v-.34a.57.57 0 0 0-.56-.56Zm-11.53 2.7a1.2 1.2 0 0 1-2.4 0c0-.24.08-.47.2-.66l.34-.56a.97.97 0 0 1-.34-.75c0-.3.13-.56.33-.74l-.32-.56a1.13 1.13 0 0 1-.2-.66 1.2 1.2 0 0 1 2.4 0c0 .49-.56 1.65-.56 1.65v.62c-.01.01.55 1.17.55 1.66ZM4.67 18.34v2.89c0 2.75 1.2 4.53 1.9 5.21l4.58 4.5c1.28 1.25 1.5 1.66 1.79 2.37v-3.2c0-2.84-1.44-3.94-2.19-4.67-1.73-1.68-2.89-2.8-3.82-3.73a8.98 8.98 0 0 1-2.26-3.37Zm6.08 14.24c-1.73-1.7-2.89-2.8-3.82-3.73a10 10 0 0 1-2.25-2.98v2.49a7.87 7.87 0 0 0 1.89 5.24l4.58 4.47c1.28 1.25 1.5 1.85 1.79 2.55v-3.37c0-2.85-1.45-3.95-2.19-4.67Z',
-      'M19.88 5.34c-.32 0-.64 0-.96.02V6.7a18.5 18.5 0 1 1 .95 36.94A18.5 18.5 0 0 1 1.35 25.17c0-5.67 2.55-10.73 6.58-14.13V9.32A19.78 19.78 0 0 0 0 25.17C0 36.12 8.9 45 19.88 45a19.85 19.85 0 0 0 19.86-19.83c0-10.95-8.9-19.83-19.87-19.83Z',
-      'M33.93 35.53c.3-.41.6-.85.87-1.3v-2.66h-.87v3.96Zm2.54-4.92c.12-.4.24-.78.34-1.16h-2.88v.7h.43c.77-.02 1.63-.03 2.11.46Zm-19.19-1.27h-.78v7.91h.78v-7.9Z',
-      'M14.7 27.83h2.58c.67 0 1.14.14 1.4.4.27.25.4.72.4 1.38v7.4c0 .66-.12 1.12-.4 1.38-.4.41-1.16.41-1.78.41l-.4-.01v3.5l.78.14v-2.88c1.2 0 1.97-.4 2.34-1.22v4.29h.26l.5-.01V29.74c0-.68.13-1.16.4-1.43.25-.27.72-.4 1.37-.4.67 0 1.65-.1 2.16.4.26.27.38.76.38 1.43v3.8h-1.77v-4.06h-.77v12.99c.26-.03.5-.07.77-.12V34.3h1.77v7.64c.36-.1.72-.21 1.08-.34v-7c0-.8.19-1.4 1-1.67l-.9-4.87h1.8l.3 5.31h.22l.3-5.31h1.88l-1.01 4.87c.84.3 1.01.81 1.01 1.66v4.53a16.63 16.63 0 0 0 1.5-1.27v-9.83h5.25l.1-.72H24.93l.17.89c-.38-.72-1.12-1.08-2.2-1.08h-.77c-1.3 0-2.1.52-2.4 1.55-.27-1.08-1.1-1.62-2.46-1.62h-3.36v14.52c.26.09.52.18.78.25V27.84Zm16.29 5.58-.85-.8.85-4.37v5.17Z',
-      'M27.66 40.79c.27-.14.55-.28.8-.43v-5.98h-.8v6.4Z',
-  ];
   const SVG_COLOR = {
       'bg-white': 'text-primary-main',
       transparent: 'text-white',
@@ -1336,7 +1318,7 @@
       transparent: 'text-white',
   };
   const Logo = JSX(({ className = '', href, children, targetBlank, bgColor = 'bg-white', hideTitle }) => {
-      return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', "aria-label": "\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A", children: [jsx(SVG, { className: `${SVG_COLOR[bgColor]} w-10 h-[38px]`, viewBox: "0 0 40 45", paths: LOGO_PATHS.map((d) => ({ d })) }), hideTitle ? null : (jsx("span", { className: `${TEXT_COLOR[bgColor]} text-sm font-medium ml-2.5`, children: children || 'Россельхозбанк' }))] }));
+      return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', "aria-label": "\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A", children: [jsx(Img, { image: { icon: 'Logo' }, className: `${SVG_COLOR[bgColor]} w-10 h-[38px]`, asSVG: true }), hideTitle ? null : (jsx("span", { className: `${TEXT_COLOR[bgColor]} text-sm font-medium ml-2.5`, children: children || 'Россельхозбанк' }))] }));
   });
 
   const MobileAppTile = JSX(({ className = '', title = 'Мобильное приложение', description, href = '#' }) => {
@@ -1368,12 +1350,13 @@
   };
   const formatTel = (s) => s.replaceAll(/\D/g, '');
 
+  const HorizontalNavigationLink = JSX(({ className = '', index, text, href, target, onClick }) => (jsx("a", { className: `font-sans text-secondary-text hover:text-primary-main inline-block no-underline ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
+
   const HorizontalNavigation = JSX(({ title, links, className = '', context }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("div", { className: className, children: [jsx("span", { className: "text-primary-text font-sans font-medium text-sm", children: title }), links?.length ? (jsx("div", { className: "flex flex-col gap-2 pt-3", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
+      return (jsxs("div", { className: className, children: [jsx("span", { className: "text-primary-text font-sans font-medium text-sm", children: title }), links?.length ? (jsx("div", { className: "flex flex-col gap-2 pt-3", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, className: "font-normal text-sm", ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
   });
-  const HorizontalNavigationLink = JSX(({ className = '', index, text, href, target, onClick }) => (jsx("a", { className: `font-sans font-normal text-sm text-secondary-text hover:text-primary-main inline-block no-underline ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
 
   const ICONS_MAP = [
       {
@@ -1411,7 +1394,8 @@
           ? 'bg-secondary-light hover:bg-secondary-hover'
           : 'border-main-divider border-solid border-[1px] hover:bg-primary-main';
       const isPrimary = version === 'primary';
-      return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(Img, { image: icon, imageClassName: isPrimary ? 'group-hover:text-white' : '', width: "24", height: "24", asSVG: true })) : null }));
+      const imageClassName = isPrimary ? 'group-hover:text-white' : '';
+      return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(Img, { image: icon, imageClassName: imageClassName, width: "24", height: "24", asSVG: true })) : null }));
   });
 
   const SocialMedia = JSX(({ className, media, version, context }) => {
@@ -1420,12 +1404,13 @@
       return (jsx("div", { className: `flex gap-2 items-start justify-start pt-6 pb-6 ${className || ''}`, children: media?.map((_, index) => (jsx(MediaButton, { version: version, ...useLink({ router, handlerDecorator }, _) }, String(index)))) }));
   });
 
+  const TextInformationLink = JSX(({ className = '', index, text, href, target, onClick }) => (jsx("a", { className: `font-sans text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
+
   const TextInformation = JSX(({ className, links, context }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { className: "py-6", children: jsx("span", { className: "font-sans font-normal text-xs text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: `flex flex-col justify-start items-start gap-2`, children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
+      return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { className: "py-6", children: jsx("span", { className: "font-sans font-normal text-xs text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: `flex flex-col justify-start items-start gap-2`, children: links.map((_, i) => (jsx(TextInformationLink, { index: i, className: "font-normal", ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
   });
-  const TextInformationLink = JSX(({ className, index, text, href, target, onClick }) => (jsx("a", { className: `font-sans font-normal 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}` })));
 
   function useSitemap(useAsyncData) {
       const { data } = useAsyncData(sitemapURL(), fetchSitemap);
@@ -1439,12 +1424,26 @@
       return `/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`;
   }
 
-  const SearchBar = JSX(({ className, context }) => {
+  const SearchBarInner = JSX(({ className, context, isMobile = false }) => {
       const { term, setTerm } = context.useSearch();
-      return (jsxs("form", { className: `relative ${className || ''}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: "w-[20px] h-[20px]", children: jsx(Img, { image: "LoupeIcon", width: "24", height: "24" }) }), term ? null : (jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-normal text-sm text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: 'h-12 pl-12 w-full peer placeholder-transparent font-sans font-normal text-base text-black border border-solid rounded box-border outline-none pr-[6%] border-main-divider focus:border-primary-text', value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input", placeholder: "some search" }), 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) => {
+      const LoupeIconClassName = isMobile ? 'w-[20px] h-[20px]' : 'w-[24px] h-[24px]';
+      const SearchBarLabelClassName = isMobile ? 'font-normal text-sm' : 'font-light text-base';
+      const SearchBarInputClassName = isMobile
+          ? ' placeholder-transparent font-normal'
+          : 'font-light h-full';
+      const inputPlaceholder = isMobile ? 'some search' : undefined;
+      return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: LoupeIconClassName, children: jsx(Img, { image: "LoupeIcon", width: "24", height: "24" }) }), term ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text ${SearchBarLabelClassName}`, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: `h-12 pl-12 w-full peer text-base text-black border border-solid rounded box-border
+              outline-none pr-[6%] border-main-divider focus:border-primary-text ${SearchBarInputClassName}`, value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input", placeholder: inputPlaceholder }), isMobile ? (jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
                       e.preventDefault();
                       setTerm('');
-                  }, children: jsx(Img, { image: "CloseIcon", width: "24", height: "24" }) })] }));
+                  }, 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" }) }))] }));
+  });
+
+  const SearchBar = JSX(({ className = '', context }) => {
+      return jsx(SearchBarInner, { context: context, className: className, isMobile: true });
   });
 
   const getAccordionItems = (items) => items?.map((item) => ({
@@ -1477,10 +1476,9 @@
 
   const findActiveSubItem = (router) => (items = []) => {
       const possibleActiveSubItems = items?.filter(isSubItemActive(router));
-      const activeSubItem = possibleActiveSubItems?.length
+      return possibleActiveSubItems?.length
           ? maxBy((_) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length
-          : null;
-      return activeSubItem;
+          : undefined;
   };
 
   const checkIsHrefSameOrigin = (href, router) => getOrigin(href) === getOrigin(router.href);
@@ -1496,17 +1494,17 @@
 
   const TEXT_CLASSES = 'font-sans font-normal text-sm';
   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' }) => {
-      return (jsxs("a", { className: `relative inline-block bg-transparent text-center no-underline ${className || ''}`, href: href, target: target, onClick: onClick, children: [jsx("span", { className: getTextClasses(bgColor, active), children: text || children }), active ? jsx("div", { className: getBorderClasses(bgColor, active) }) : null] }));
+  const HeaderItem = JSX(({ className = '', text, href, target, active, onClick, children, bgColor = 'bg-white' }) => {
+      return (jsxs("a", { className: `relative inline-block bg-transparent text-center no-underline ${className}`, href: href, target: target, onClick: onClick, children: [jsx("span", { className: getTextClasses(bgColor, active), children: text || children }), active ? jsx("div", { className: getBorderClasses(bgColor, active) }) : null] }));
   });
-  const getTextClasses = (bgColor, active) => {
+  const getTextClasses = (bgColor, active = false) => {
       let classes = 'text-white';
       if (bgColor === 'bg-white') {
           classes = active ? 'text-primary-main' : 'text-secondary-text hover:text-primary-main';
       }
       return `${classes} ${TEXT_CLASSES}`;
   };
-  const getBorderClasses = (bgColor, active) => {
+  const getBorderClasses = (bgColor, active = false) => {
       if (!active) {
           return BORDER_CLASSES;
       }
@@ -1543,6 +1541,25 @@
   });
   const renderSubItem = (item, i) => (jsx(HeaderItem, { className: "mr-8 whitespace-nowrap text-sm", ...item }, String(i)));
 
+  const getColSpan = (className) => {
+      const colSpanPrefix = 'col-span-';
+      const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
+      return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
+  };
+
+  function getTileHeadingType(className = '') {
+      const colSpan = getColSpan(className);
+      if (colSpan <= 4) {
+          return 'S';
+      }
+      else if (colSpan <= 8) {
+          return 'M';
+      }
+      else {
+          return 'L';
+      }
+  }
+
   function getTileMinHeight(className = '') {
       const colSpan = getColSpan(className);
       if (colSpan <= 6) {
@@ -1571,7 +1588,7 @@
 
   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(_))
@@ -1583,9 +1600,9 @@
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
   };
-  const ProductGalleryBlock = JSX(({ block, headingType, context, className = '' }) => {
+  const ProductGalleryBlock = JSX(({ block, context, className = '' }) => {
       const version = block?.version ?? 'primary';
-      return (jsx("section", { className: `flex grow-0 shrink-0 basis-full px-4 pt-6 ${productGalleryStyleMap[version]} ${className}`, children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { context: context, headingType: headingType || 'h2', ...block }) }) }));
+      return (jsx("section", { className: `flex grow-0 shrink-0 basis-full px-4 pt-6 ${productGalleryStyleMap[version]} ${className}`, role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { context: context, ...block }) }) }));
   });
 
   const ProductGallery = JSX(({ className, context, slides = [] }) => {
@@ -1600,13 +1617,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',
       },
@@ -1624,13 +1643,13 @@
   const StepsBlock = JSX(({ className, title, description, showLines = true, steps, size = 'normal', version = 'primary', }) => {
       const styleMap = getStyleMap(version);
       return (jsxs("section", { className: `box-border font-sans bg-white px-4 py-6 flex flex-col
-        ${styleMap.background} ${styleMap.title} ${className || ''}`, children: [title ? (jsx(Heading, { headingType: "h3", className: `text-center ${styleMap.title}`, title: title })) : null, description ? (jsx("p", { className: `text-m-md text-center ${styleMap.description} ${title ? 'mt-2' : ''}`, children: description })) : null, steps?.length ? (jsx("div", { className: `box-border py-0.5 mb-0.5 mt-5`, children: jsx("div", { className: "flex flex-col justify-between gap-x-[101px]", children: steps.map(renderStepTitle(size, version, showLines)) }) })) : null] }));
+        ${styleMap.background} ${styleMap.title} ${className || ''}`, children: [title ? (jsx(Heading, { headingType: "h3", className: `text-center ${styleMap.title}`, title: title })) : null, description ? (jsx("p", { className: `text-m text-center ${styleMap.description} ${title ? 'mt-2' : ''}`, children: description })) : null, steps?.length ? (jsx("div", { className: `box-border py-0.5 mb-0.5 mt-5`, children: jsx("div", { className: "flex flex-col justify-between gap-x-[101px]", children: steps.map(renderStepTitle(size, version, showLines)) }) })) : null] }));
   });
   const renderStepTitle = (size, version, showLines) => (step, i, steps) => {
       const isLastStep = steps.length - 1 === i;
       const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
       const styleMap = getStyleMap(version);
-      return (jsx("div", { children: jsxs("div", { className: "flex flex-row text-center relative", children: [jsxs("div", { className: "overflow-hidden", children: [renderIconArea(size, version), isLastStep ? null : (jsx("div", { className: `min-h-8 h-full w-[2px] ${showLines ? styleMap.iconConnector : ''} ${margin}` }))] }), jsxs("div", { className: `flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`, children: [step.label ? (jsx("div", { className: "font-medium text-m-title-xs m-0 text-left", children: step.label })) : null, step.description ? (jsx("div", { className: `font-normal text-sm ${styleMap.description} text-left ${step.label ? 'mt-1' : ''}`, children: step.description })) : null] })] }) }, String(i)));
+      return (jsx("div", { children: jsxs("div", { className: "flex flex-row text-center relative", children: [jsxs("div", { className: "overflow-hidden", children: [renderIconArea(size, version), isLastStep ? null : (jsx("div", { className: `min-h-8 h-full w-[2px] ${showLines ? styleMap.iconConnector : ''} ${margin}` }))] }), jsxs("div", { className: `flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`, children: [step.label ? (jsx("div", { className: "font-medium text-m-title-xs m-0 text-left mb-1", children: step.label })) : null, step.description ? (jsx("div", { className: `text-s ${styleMap.description} text-left`, children: step.description })) : null] })] }) }, String(i)));
   };
   const renderIconArea = (size, version) => (step, i) => {
       const styleMap = getStyleMap(version);
@@ -1653,14 +1672,15 @@
   const renderList = (list) => (jsx(List, { className: "flex flex-col justify-between items-start text-m-sm", version: "gray", items: list.items, isDotted: list.isDotted ?? true }));
   const renderButtons = (buttons) => (jsx("div", { children: buttons.map(({ icon, rounded, ...buttonProps }, idx) => (jsx(Button, { className: `mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`, ariaLabel: getButtonAriaLabel(icon), rounded: rounded, appendLeft: icon ? jsx(Img, { image: icon, width: "24px", height: "24px", asSVG: true }) : null, ...buttonProps, "aria-label": icon }, String(idx)))) }));
 
-  const TariffsTableVertical = JSX(({ tiles }) => (jsx("div", { className: "flex flex-col gap-3.5", children: tiles.map((tile, i) => (jsx(TariffsTableTileCell, { ...tile }, String(i)))) })));
-
   const TariffsTableHorizontal = JSX(({ tiles, context }) => (jsx(SwipeListControl, { context: context, children: tiles.map((tile, i) => (jsx(TariffsTableTileCell, { ...tile }, String(i)))) })));
 
+  const TariffsTableVertical = JSX(({ tiles }) => (jsx("div", { className: "flex flex-col gap-3.5", children: tiles.map((tile, i) => (jsx(TariffsTableTileCell, { ...tile }, String(i)))) })));
+
   const TariffsTable = JSX(({ className, context, title, description, columns, rowHeaders, orientation = 'vertical' }) => {
       const colData = getColData(columns);
       const tiles = getTiles(rowHeaders, colData);
-      return (jsxs("section", { className: `px-4 py-6 bg-white font-sans text-primary-text overflow-x-hidden ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${description ? 'mb-2' : 'mb-5'}`, title: title })) : null, description ? jsx("div", { className: "mb-5 text-center text-m-md", children: description }) : null, tiles?.length ? renderOrientationTable(orientation, tiles, context) : null] }));
+      const headingMargin = description ? 'mb-2' : 'mb-5';
+      return (jsxs("section", { className: `px-4 py-6 bg-white font-sans text-primary-text overflow-x-hidden ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${headingMargin}`, title: title })) : null, description ? jsx("div", { className: "mb-5 text-center text-m-md", children: description }) : null, tiles?.length ? renderOrientationTable(orientation, tiles, context) : null] }));
   });
   function renderOrientationTable(orientation, tiles, context) {
       return orientation === 'vertical' ? (jsx(TariffsTableVertical, { tiles: tiles })) : (jsx(TariffsTableHorizontal, { context: context, tiles: tiles }));