@redneckz/wildless-cms-uni-blocks 0.3.11 → 0.3.14

package/mobile/bundle/bundle.umd.js

@@ -246,24 +246,40 @@
       return (jsx("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
   });
 
-  const Img = JSX(({ className = '', image }) => {
+  const Img = JSX(({ className = '', image, imageClassName }) => {
       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 renderImg = (image, imageClassName = '') => {
       const style = {
           width: image.size?.width ? `${image.size?.width}px` : '100%',
           height: image.size?.height ? `${image.size?.height}px` : '100%',
       };
-      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, jsx("img", { src: image.src, className: `m-auto ${image.className || ''}`, alt: image.alt || image.title, title: image.title, style: style, ...image.size })] }));
-  });
+      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 }));
+  };
   function formatToMimeType(format) {
       return format ? `image/${String(format)}` : undefined;
   }
 
-  const Headline = JSX(({ bgColor = 'transparent', className = '', title, description, image }) => {
-      return (jsxs("section", { className: `px-4 py-6 ${bgColor} ${className}`, children: [title && jsx(Heading, { headingType: "h2", className: "text-primary-text", title: title }), description && (jsx("p", { className: `font-normal text-m-md ${title ? 'mt-2.5' : ''}`, children: description })), image?.src && (jsx("div", { className: "mt-5 mx-auto flex justify-center", children: jsx(Img, { image: image }) }))] }));
+  const ALIGN_TEXT = {
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right',
+  };
+  const BACKGROUND_COLOR = {
+      transparent: 'bg-transparent',
+      primary: 'bg-white',
+      secondary: 'bg-primary-main',
+  };
+
+  const Headline = JSX(({ bgColorHeadline = 'transparent', className = '', title, description, image, align = 'left', }) => {
+      return (jsxs("section", { className: `px-4 py-6 ${BACKGROUND_COLOR[bgColorHeadline]} ${className}`, children: [title && (jsx(Heading, { headingType: "h2", className: `text-primary-text ${ALIGN_TEXT[align]}`, title: title })), description && (jsx("p", { className: `font-normal text-m-md ${ALIGN_TEXT[align]} ${title ? 'mt-2.5' : ''}`, children: description })), image?.src && (jsx("div", { className: "mt-5 mx-auto flex justify-center", children: jsx(Img, { image: image }) }))] }));
   });
 
   // column-gap between children of SwipeListControl container
@@ -282,7 +298,15 @@
   const BASE_DOT_OPACITY = 0.3;
   const ACTIVE_DOT_OPACITY_CHANGE = 0.7;
   const SwipeListControlDots = JSX(({ children, activeIndex, indexFraction, showDots }) => {
-      return showDots && children?.length ? (jsx("div", { className: "flex gap-2 mx-auto mt-5 w-fit", children: children?.map((_, idx) => (jsx("div", { className: `${DOT_STYLES}`, style: getDotStyles(idx, activeIndex, indexFraction), "aria-hidden": true }, String(idx)))) })) : null;
+      const handleClick = (idx) => (e) => {
+          if (idx === activeIndex) {
+              return;
+          }
+          const contentContainer = e.currentTarget.parentElement
+              ?.previousElementSibling;
+          contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth' });
+      };
+      return showDots && children?.length ? (jsx("div", { className: "flex gap-2 mx-auto mt-5 w-fit", children: children?.map((_, idx) => (jsx("div", { onClick: handleClick(idx), className: `${DOT_STYLES}`, style: getDotStyles(idx, activeIndex, indexFraction), "aria-hidden": true }, String(idx)))) })) : null;
   });
   const getDotStyles = (currentIdx, activeIndex, indexFraction) => {
       if (currentIdx < activeIndex || currentIdx > activeIndex + 1)
@@ -360,6 +384,12 @@
   const SwipeListControl = JSX(({ className, context, children, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, onSlideChange, }) => {
       const [activeIndex, setActiveIndex] = context.useState(0);
       const [indexFraction, setIndexFraction] = context.useState(0);
+      const dotsProps = {
+          activeIndex,
+          indexFraction,
+          showDots,
+          children,
+      };
       const handleScroll = (e) => {
           const { scrollLeft, clientWidth, childElementCount, scrollWidth, children } = e.currentTarget;
           // horizontal PADDING / 2 to compensate padding-margin combo of child container
@@ -380,10 +410,8 @@
           setActiveIndex(index);
           setIndexFraction(fraction);
       };
-      return (jsxs("div", { className: className, children: [renderSwipeList({ gap, padding, activeIndex, handleScroll, children }), renderSwipelistDots({ activeIndex, indexFraction, showDots, children })] }));
+      return (jsxs("div", { className: className, children: [jsx(SwipeListControlList, { gap: gap, padding: padding, activeIndex: activeIndex, onScroll: handleScroll, children: children }), jsx(SwipeListControlDots, { ...dotsProps })] }));
   });
-  const renderSwipeList = ({ gap, padding, activeIndex, handleScroll, children }) => (jsx(SwipeListControlList, { gap: gap, padding: padding, activeIndex: activeIndex, onScroll: handleScroll, children: children }));
-  const renderSwipelistDots = ({ activeIndex, indexFraction, showDots, children }) => (jsx(SwipeListControlDots, { activeIndex: activeIndex, indexFraction: indexFraction, showDots: showDots, children: children }));
 
   const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
       const { text, fileSize, ...linkProps } = doc;
@@ -427,63 +455,6 @@
       return (jsxs("div", { className: "flex flex-row mb-8", children: [benefit.icon && (jsx(Icon, { className: "w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]", name: benefit.icon, width: "48", height: "48", asSVG: true })), jsxs("div", { className: "flex gap-1 flex-col h-full ml-5 max-w-[490px]", children: [benefit.label && (jsx("div", { className: "font-medium text-primary-text text-xl m-0", children: benefit.label })), benefit.description && (jsx("div", { className: "font-normal text-sm text-secondary-text", children: benefit.description }))] })] }, String(i)));
   }
 
-  const LIST_STYLE_CLASSES$1 = 'rounded-full inline-block mr-3 mt-2';
-  const TEXT_STYLE_MAP$1 = {
-      primary: 'text-primary-text',
-      secondary: 'text-white',
-      gray: 'text-secondary-text',
-  };
-  const LIST_STYLE_MAP$1 = {
-      primary: 'bg-primary-main',
-      secondary: 'bg-white',
-      gray: 'bg-secondary-text',
-  };
-  const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary' }) => {
-      return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted && jsx("div", { className: getListStyle$1(version) }), jsx("span", { className: `text-m-md ${TEXT_STYLE_MAP$1[version]}`, children: children })] }));
-  });
-  const getListStyle$1 = (version) => {
-      const size = version === 'gray' ? 'w-[6px] h-[6px] min-w-[6px] min-h-[6px]' : 'w-2 h-2 min-w-2 min-h-2';
-      return `${LIST_STYLE_CLASSES$1} ${LIST_STYLE_MAP$1[version]} ${size}`;
-  };
-
-  const List = JSX((props) => {
-      const { className = '', itemClassName, isDotted, items, version } = props;
-      return (jsx("section", { className: `${className}`, role: "list", children: items?.length
-              ? items.map((_, i) => (jsx(ListItem, { className: itemClassName, isDotted: isDotted, version: version, children: _ }, String(i))))
-              : null }));
-  });
-
-  const textBlockStyleMaps = {
-      primary: {
-          background: 'bg-white',
-          icon: 'bg-primary-main text-white',
-          title: 'text-primary-text',
-          description: 'text-secondary-text',
-      },
-      secondary: {
-          background: 'bg-primary-main',
-          icon: 'bg-white text-primary-main',
-          title: 'text-white',
-          description: 'text-white',
-      },
-      'secondary-light': {
-          background: 'bg-primary-main/10',
-          icon: 'bg-primary-main text-white',
-          title: 'text-primary-text',
-          description: 'text-secondary-text',
-      },
-  };
-  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$1(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, { items: items, isDotted: isDotted, version: "gray", className: "mt-1 text-m-sm text-secondary-text" })) : 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" }) }));
-  }
-  function renderImage$1(image) {
-      return image?.src ? jsx(Img, { className: "pb-3 mr-auto", image: image }) : null;
-  }
-
   const isURL = (href) => href?.includes('//');
   const withoutQuery = (href) => (href || '').replace(/\/?\?.*/, '');
   const getOrigin = (href) => {
@@ -541,17 +512,23 @@
       };
   }
 
-  const ButtonInner = JSX(({ text, aboveText, appendLeft, rounded, version }) => {
-      const withoutText = !text && !aboveText && Boolean(appendLeft);
-      const buttonInnerClasses = version !== 'link'
-          ? `flex items-center justify-center
-          ${withoutText ? 'h-12 w-12' : `px-8 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`} ${rounded ? 'rounded-full' : ''}`
-          : null;
-      return renderButtonInner({ buttonInnerClasses, appendLeft, withoutText, aboveText, text });
+  const ButtonInner = JSX((props) => {
+      const { text, aboveText, appendLeft } = props;
+      return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-m-2xs text-left", children: aboveText }), jsx("div", { className: "text-m-button font-medium text-left", children: text })] })) : null] }));
   });
-  function renderButtonInner({ buttonInnerClasses, appendLeft, withoutText, aboveText, text }) {
-      return (jsxs("div", { className: buttonInnerClasses, children: [appendLeft ? appendLeft : null, withoutText ? null : (jsxs("div", { children: [jsx("div", { className: "text-m-2xs text-left", children: aboveText }), jsx("div", { className: "text-m-button font-medium text-left", children: text })] }))] }));
-  }
+  const getButtonStyle = (props) => {
+      const { version, aboveText, rounded } = props;
+      if (version === 'link') {
+          return '';
+      }
+      const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`;
+      return [
+          'flex items-center justify-center',
+          isWithText(props) ? withTextStyle : 'h-12 w-12',
+          rounded ? 'rounded-full' : '',
+      ].join(' ');
+  };
+  const isWithText = ({ text, aboveText, appendLeft }) => Boolean(text || aboveText || !appendLeft);
 
   const buttonStyleMap = {
       primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
@@ -575,9 +552,9 @@
   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?.length ? (jsx("div", { className: `${className}`, children: buttons.map((button, index) => renderButton$3(useLink({ router, handlerDecorator }, button), index)) })) : null;
   });
-  function renderButton$2({ icon, ...button }, i) {
+  function renderButton$3({ icon, ...button }, i) {
       if (!button?.text)
           return;
       return icon ? (jsx(Button, { appendLeft: jsx(Icon, { name: icon, width: "24", height: "24", asSVG: true }), ...button }, String(i))) : (jsx(Button, { ...button }, String(i)));
@@ -585,13 +562,96 @@
 
   const Description = JSX((props) => {
       const { className = '', description } = props;
-      return jsx("div", { className: `font-normal text-m-md ${className}`, children: description });
+      return jsx("div", { className: `font-normal text-base ${className}`, children: description });
+  });
+
+  const LIST_STYLE_CLASSES$1 = 'rounded-full inline-block mr-3 mt-2';
+  const TEXT_STYLE_MAP$1 = {
+      primary: 'text-primary-text',
+      secondary: 'text-white',
+      gray: 'text-secondary-text',
+  };
+  const LIST_STYLE_MAP$1 = {
+      primary: 'bg-primary-main',
+      secondary: 'bg-white',
+      gray: 'bg-secondary-text',
+  };
+  const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary' }) => {
+      return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted && jsx("div", { className: getListStyle$1(version) }), jsx("span", { className: `text-m-md ${TEXT_STYLE_MAP$1[version]}`, children: children })] }));
+  });
+  const getListStyle$1 = (version) => {
+      const size = version === 'gray' ? 'w-[6px] h-[6px] min-w-[6px] min-h-[6px]' : 'w-2 h-2 min-w-2 min-h-2';
+      return `${LIST_STYLE_CLASSES$1} ${LIST_STYLE_MAP$1[version]} ${size}`;
+  };
+
+  const List = JSX((props) => {
+      const { className = '', itemClassName, isDotted, items, version } = props;
+      return (jsx("section", { className: `${className}`, role: "list", children: items?.length
+              ? items.map((_, i) => (jsx(ListItem, { className: itemClassName, isDotted: isDotted, version: version, children: _ }, String(i))))
+              : null }));
   });
 
   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 }), jsx("div", { 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?.length ? jsx("div", { children: buttons }) : null] }), image] })] }));
   });
 
+  const benefitTitleStyleMap = {
+      primary: 'text-primary-text',
+      secondary: 'text-white',
+  };
+  const benefitDescStyleMap = {
+      primary: 'text-secondary-text',
+      secondary: 'text-white',
+  };
+  function renderBenefit(benefit, i, version) {
+      return (jsxs("div", { className: "flex gap-3 items-center mb-2.5 last:mb-0", children: [benefit.icon && (jsx(Icon, { className: "w-6 h-6 rounded-full box-border", name: benefit.icon, width: "24", height: "24", asSVG: true })), 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)));
+  }
+
+  const ProductBlockInner = JSX(({ className = '', context, title, headingType = 'h2', description, benefits, buttons, image, items, version = 'primary', }) => {
+      return (jsxs("div", { className: `w-full text-primary-text ${className}`, children: [jsx("div", { children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })), 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((items) => items.label)?.length ? (jsx("div", { className: "mt-3", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null, items?.length ? jsx(List, { className: "mt-3", items: items }) : null] }) }), renderImage$1(image)] }));
+  });
+  function renderImage$1(image) {
+      return image?.src ? (jsx("div", { className: "mt-5", children: jsx(Img, { image: { className: 'block', ...image } }) })) : null;
+  }
+
+  const ProductBlock = JSX(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (props /* Get rid of image and benefits */) => {
+      const { className } = props;
+      return (jsx("section", { className: `font-sans bg-white px-4 py-6 ${className || ''}`, children: jsx(ProductBlockInner, { ...props }) }));
+  });
+
+  const textBlockStyleMaps = {
+      primary: {
+          background: 'bg-white',
+          icon: 'bg-primary-main text-white',
+          title: 'text-primary-text',
+          description: 'text-secondary-text',
+      },
+      secondary: {
+          background: 'bg-primary-main',
+          icon: 'bg-white text-primary-main',
+          title: 'text-white',
+          description: 'text-white',
+      },
+      'secondary-light': {
+          background: 'bg-primary-main/10',
+          icon: 'bg-primary-main text-white',
+          title: 'text-primary-text',
+          description: 'text-secondary-text',
+      },
+  };
+  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", items: items, isDotted: isDotted, version: blockVersion.indexOf('secondary') !== -1 ? 'secondary' : 'gray' })) : 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" }) }));
+  }
+  function renderImage(image) {
+      return image?.src ? jsx(Img, { className: "pb-3 mr-auto", image: image }) : null;
+  }
+
   const getColSpan = (className) => {
       const colSpanPrefix = 'col-span-';
       const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
@@ -673,23 +733,23 @@
       secondary: 'bg-primary-main text-white',
   };
   const Gallery = JSX(({ context, title, description, cards = [], className, isScroll = true }) => {
-      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: [jsx(Heading, { headingType: "h2", className: "text-center", title: title }), description ? (jsx("div", { className: "font-normal text-m-md max-w-[600px] mt-2", children: description })) : null] }), renderCardsLayout(isScroll, cards, context)] }));
+      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(isScroll, cards, context)] }));
   });
   function renderCardsLayout(isScroll, cards, context) {
       return isScroll ? (jsx(SwipeListControl, { context: context, children: cards?.map(renderCard$1) })) : (jsx("div", { className: "grid gap-[14px]", children: cards?.map(renderCard$1) }));
   }
   function renderCard$1(card, key) {
-      return (jsxs("div", { className: `box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
-      ${blockStyle[card.version ?? 'primary']}`, children: [jsxs("div", { children: [card.image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: card.image }) })) : null, card.title ? jsx("h4", { className: `font-medium text-m-title-xs m-0`, children: card.title }) : null, card.description ? renderDescription(card) : null, card.items?.length ? renderItems$1(card.items) : null] }), card?.button?.text ? renderButton$1(card.button) : null] }, key));
+      return (jsxs("div", { className: `h-full justify-between box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
+      ${blockStyle[card.version ?? 'primary']}`, children: [jsxs("div", { children: [card.image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-3.5", image: card.image }) })) : null, card.title ? jsx("h3", { className: `font-medium text-m-title-xs m-0`, children: card.title }) : null, card.description ? renderDescription(card) : null, card.items?.length ? renderItems$1(card.items, card.version) : null] }), card?.button?.text ? renderButton$2(card.button) : null] }, key));
   }
-  function renderButton$1(button) {
+  function renderButton$2(button) {
       return (jsx(Button, { className: "mt-3", appendLeft: button?.icon && jsx(Icon, { name: button?.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
   }
   function renderDescription(card) {
-      return (jsx("div", { className: `text-secondary-text mt-2 ${card.version === 'secondary' ? 'text-white opacity-80' : ''}`, children: card.description }));
+      return (jsx("div", { className: `text-secondary-text mt-1 text-m-sm ${card.version === 'secondary' ? 'text-white opacity-80' : ''}`, children: card.description }));
   }
-  function renderItems$1(items) {
-      return (jsx("section", { className: "mt-3", children: items.map((item, i) => (jsxs("div", { children: [jsx("span", { className: "text-m-md font-medium", children: item.title }), jsx("span", { className: "text-m-sm text-secondary-text pl-2", children: item.text })] }, String(i)))) }));
+  function renderItems$1(items, version = 'primary') {
+      return (jsx("section", { className: "mt-3", children: items.map((item, i) => (jsxs("div", { children: [jsx("span", { className: "text-m-md font-medium", children: item.title }), jsx("span", { className: `text-m-sm pl-2 ${version === 'primary' ? 'text-secondary-text' : ''}`, children: item.text })] }, String(i)))) }));
   }
 
   const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
@@ -750,9 +810,9 @@
 
   const GalleryCardInner = JSX(({ title, description, image, items, button, version }) => {
       const titleStyleClasses = getTitleStyle(version, description, items);
-      return (jsxs("div", { children: [jsxs("div", { children: [image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: image }) })) : null, title ? renderCardTitle(title, titleStyleClasses) : null, description ? (jsx("div", { className: `font-normal text-sm ${title ? 'mt-2' : ''}`, children: description })) : null, items?.length ? renderItems(items, version) : null] }), button?.text ? renderButton(button) : null] }));
+      return (jsxs("div", { children: [jsxs("div", { children: [image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: image }) })) : null, title ? renderCardTitle(title, titleStyleClasses) : null, description ? (jsx("div", { className: `font-normal text-sm ${title ? 'mt-2' : ''}`, children: description })) : null, items?.length ? renderItems(items, version) : null] }), button?.text ? renderButton$1(button) : null] }));
   });
-  function renderButton(button) {
+  function renderButton$1(button) {
       return (jsx(Button, { className: "mt-6 w-full", appendLeft: button.icon && jsx(Icon, { name: button.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
   }
   function renderCardTitle(title, className) {
@@ -789,7 +849,7 @@
       const showNextButton = isGalleryScrollAvailable &&
           cards?.length - activeCardIndex > galleryLengthForScrollMap[version];
       const showPrevButton = isGalleryScrollAvailable && activeCardIndex > 0;
-      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-[50px] overflow-hidden ${className}`, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 rotate-180 z-10 mt-[25px]", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E" })), showNextButton && (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-[25px]", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E" })), jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" })] }));
+      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-[50px] overflow-hidden ${className}`, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 rotate-180 z-10 mt-[25px]", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })), showNextButton && (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-[25px]", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })), jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" })] }));
   });
 
   const MiniGallery = JSX((props) => (jsx(GalleryInner, { ...props, version: "mini" })));
@@ -809,6 +869,7 @@
       LinkDocs,
       TextBlock,
       PictureText,
+      ProductBlock,
       Tile,
       ProductTile,
       Gallery,
@@ -825,7 +886,7 @@
           return null;
       }
       const AccordionBlock = AccordionBlocks[type];
-      return (jsx("div", { className: "mb-5 last:mb-0", children: jsx(AccordionBlock, { context: context, ...block, className: "!p-0" }) }, `block_${i}`));
+      return (jsx("div", { className: "mb-5 last:mb-0 first:mt-2", children: jsx(AccordionBlock, { context: context, ...block, className: "!p-0" }) }, `block_${i}`));
   };
 
   const isActiveHandler = ({ context, blocks }) => {
@@ -853,42 +914,152 @@
       });
       return (jsxs("li", { className: `${bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0'} border-solid border-main-divider`, children: [jsxs("button", { className: `border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
           ${bordered ? '' : 'py-[14px] px-0'}
-          ${hasContent ? 'group cursor-pointer' : ''}`, onClick: handleToggle, children: [jsx("span", { className: `text-sm pr-2.5 font-medium ${hasContent ? 'group-hover:text-primary-main' : ''}`, children: label }), hasContent ? jsx(Icon, { name: icon, width: "20", height: "20", asSVG: true }) : null] }), hasContent ? jsx(AccordionItemInner, { blocks: blocks, context: context }) : null] }));
+          ${hasContent ? 'group cursor-pointer' : ''}`, onClick: handleToggle, children: [jsx("span", { className: `text-m-title-xs pr-2.5 font-medium ${hasContent ? 'group-hover:text-primary-main' : ''}`, children: label }), hasContent ? jsx(Icon, { name: icon, width: "24", height: "24", asSVG: true }) : null] }), hasContent ? jsx(AccordionItemInner, { blocks: blocks, context: context }) : null] }));
   });
 
   const Accordion = JSX(({ title, description, accordionItems, context, className = '', bordered }) => {
       return (jsxs("section", { className: `py-6 px-4 font-sans bg-white text-primary-text ${className}`, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-2 text-center", title: title }) : null, description ? jsx("div", { className: "mb-5 text-m-md text-center", children: description }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, context: context, bordered: bordered }, `AccordionItem${i}`))) })) : null] }));
   });
 
-  const CBR_EXCHANGE_RATE_URL = 'https://www.cbr-xml-daily.ru/daily_json.js';
-  const CURRENCY_CODES = ['USD', 'EUR'];
+  const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
+  const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
+
+  const HeaderCell = JSX(({ icon, image, title, subtitle, isFillGradient }) => (jsxs("div", { role: "columnheader", scope: "col", children: [icon && (jsx(Icon, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", name: icon, width: "63", height: "63" })), image?.src && (jsx("div", { className: "mb-3.5", children: jsx(Img, { image: image }) })), title && (jsx(Heading, { headingType: "h4", className: `${isFillGradient ? 'text-white' : ''}`, title: title })), subtitle && (jsx("div", { className: `text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`, children: subtitle }))] })));
+
+  const TableCell = JSX(({ cell, rowHeader, isFillGradient = false }) => {
+      const cellWrapperClasses = `box-border flex flex-col`;
+      const cellClasses = `h-full ${DIVIDER_CLASSES}`;
+      return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { className: cellClasses, children: cell.map(renderCellInner$1(isFillGradient, rowHeader)) }) }));
+  });
+  const renderCellInner$1 = (isFillGradient, rowHeader) => ({ label, description }, i) => (jsxs("div", { className: "flex justify-between text-m-sm py-3.5", children: [jsx("div", { className: `${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`, children: rowHeader }), jsxs("div", { className: "basis-1/2", children: [label && (jsx("div", { className: `text-right ${isFillGradient ? 'text-white' : ''}`, children: label })), description && (jsx("div", { className: `text-right ${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`, children: description }))] })] }, String(i)));
+
+  const TableColumn = JSX(({ header, columnData, visibleRowLength = 0, isFillGradient, showRow, onToggleColumn }) => {
+      const columnDataView = columnData.slice(0, showRow ? columnData.length : visibleRowLength);
+      const gradientClassName = isFillGradient ? GRADIENT : '';
+      const buttonVersion = isFillGradient ? 'secondary' : 'primary';
+      return (jsxs("div", { className: `border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`, role: "row", children: [jsx(HeaderCell, { ...header, isFillGradient: isFillGradient }), columnDataView?.length
+                  ? columnDataView.map(({ rowHeader, cell }, i) => (jsx(TableCell, { cell: cell, rowHeader: rowHeader, isFillGradient: isFillGradient }, String(i))))
+                  : null, showRow && renderButton({ header, buttonVersion }), renderToggleButton({ onToggleColumn, isFillGradient, showRow })] }));
+  });
+  const renderButton = ({ header, buttonVersion }) => (jsx(Button, { href: header.link.href, target: header.link.target, version: buttonVersion, className: "font-medium text-m-sm mt-4 py-[11px]", children: header.link.text }));
+  const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow }) => (jsx("div", { className: "mt-5", role: "cell", children: jsx("a", { role: "link", onClick: onToggleColumn, className: `font-medium text-m-sm cursor-pointer ${isFillGradient ? 'text-white/80' : 'text-primary-main'}`, children: !showRow ? 'Показать описание' : 'Скрыть' }) }));
+
+  const ComparisonTable = JSX(({ className, context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, useSwiper = false, }) => {
+      const tableData = columns?.map(({ data, header }) => ({
+          header,
+          column: data?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title })),
+      })) || [];
+      const [columnsViewState, setColumnsViewState] = context.useState(new Array(columns?.length).fill(!visibleRowLength));
+      const handleToggleColumn = (i) => {
+          columnsViewState[i] = !columnsViewState[i];
+          setColumnsViewState([...columnsViewState]);
+      };
+      return (jsxs("section", { className: `bg-white font-sans px-4 py-6 overflow-hidden text-primary-text relative ${className || ''}`, children: [title && (jsx(Heading, { headingType: "h3", className: "font-medium text-center m-0 mb-5", title: title })), renderColumns({
+                  tableData,
+                  context,
+                  visibleRowLength,
+                  isColoredFirstColumn,
+                  columnsViewState,
+                  handleToggleColumn,
+                  useSwiper,
+                  setColumnsViewState,
+              })] }));
+  });
+  const renderColumns = ({ context, tableData, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn, useSwiper, setColumnsViewState, }) => (jsx("div", { role: "table", children: tableData?.length ? (useSwiper ? (jsx(SwipeListControl, { context: context, onSlideChange: onSlideChange(columnsViewState, setColumnsViewState), children: tableData.map(renderColumn({
+              context,
+              visibleRowLength,
+              isColoredFirstColumn,
+              columnsViewState,
+              handleToggleColumn,
+          })) })) : (tableData.map(renderColumn({
+          context,
+          visibleRowLength,
+          isColoredFirstColumn,
+          columnsViewState,
+          handleToggleColumn,
+      })))) : null }));
+  const renderColumn = ({ context, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn }) => (columnData, i) => (jsx(TableColumn, { context: context, visibleRowLength: visibleRowLength, showRow: columnsViewState[i], header: columnData.header, columnData: columnData.column, isFillGradient: i === 0 && isColoredFirstColumn, onToggleColumn: () => handleToggleColumn(i) }, String(i)));
+  const onSlideChange = (columnsViewState, setColumnsViewState) => () => {
+      setColumnsViewState(new Array(columnsViewState.length).fill(false));
+  };
+
+  function useExchangeRates(useAsyncData) {
+      const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchExchangeRates);
+      return data || {};
+  }
+  async function fetchExchangeRates() {
+      try {
+          const response = await fetch(EXCHANGE_RATES_URL);
+          return await response.json();
+      }
+      catch (err) {
+          console.error(err);
+      }
+  }
+  const EXCHANGE_RATES_URL = '/api/v1/exchangerates.json';
+
+  const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
+  const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
+
+  const TABLE_HEAD_STYLE = 'text-left font-normal text-sm text-secondary-text';
   const CURRENCY_ICONS_MAP = {
       USD: 'DollarIcon',
       EUR: 'EuroIcon',
   };
-  const buttons = [
+  const CurrencyTable = JSX(({ className, exchangeCurrencyItems }) => {
+      return (jsxs("table", { className: `h-fit w-fit ${className}`, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: TABLE_HEAD_STYLE, children: "\u0412\u0430\u043B\u044E\u0442\u0430" }), jsx("th", { className: `${TABLE_HEAD_STYLE} pl-11`, children: "\u041A\u0443\u043F\u0438\u0442\u044C" }), jsx("th", { className: `${TABLE_HEAD_STYLE} pl-11`, children: "\u041F\u0440\u043E\u0434\u0430\u0442\u044C" })] }) }), jsx("tbody", { children: exchangeCurrencyItems.map((item) => renderCurrencyRow(item)) })] }));
+  });
+  const renderCurrencyRow = (exchangeCurrencyItem) => {
+      const code = exchangeCurrencyItem?.currency?.currency;
+      return (jsxs("tr", { children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(Icon, { name: 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.buyExchangeRate) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem.saleExchangeRate) })] }, code));
+  };
+
+  const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex text-sm ${className}`, children: [jsx(Icon, { className: "min-w-fit", name: "GpsIcon", width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-1.5", children: [address ? jsx("p", { className: "m-0", 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 Input = JSX(({ className = '', id, name, type = 'text', placeholder }) => {
+      return (jsx("input", { className: className, id: id, name: name || id, type: type, placeholder: placeholder }));
+  });
+
+  const Select = JSX(({ className = '', id, name, children }) => {
+      return (jsx("select", { className: className, id: id, name: name || id, children: children }));
+  });
+
+  const SelectOption = JSX(({ className = '', value, children }) => {
+      return (jsx("option", { className: className, value: `${value}`, children: children }));
+  });
+
+  const ExchangeCurrencyCalculator = JSX(({ codes, className = '' }) => {
+      return (jsxs("div", { className: `grid gap-3.5 ${className}`, children: [renderInput('Хочу продать', codes), renderInput('Получу', codes), jsx(Button, { className: "box-border mt-3.5 py-3 h-12 w-44", version: "primary", href: "#", children: "\u041A\u0443\u043F\u0438\u0442\u044C \u0432\u0430\u043B\u044E\u0442\u0443" })] }));
+  });
+  function renderInput(placeholder, codes) {
+      return (jsxs("div", { className: "flex items-center", children: [jsx(Input, { className: "h-10 border pl-2.5 rounded-md text-m-sm w-full appearance-none", type: "number", placeholder: `${placeholder}` }), codes.length ? (jsx(Select, { className: "h-9 -translate-x-16", children: codes.map((code, i) => (jsx(SelectOption, { value: code, children: code }, String(i)))) })) : null] }));
+  }
+
+  const CURRENCY_CODES = ['USD', 'EUR'];
+  const EXCHANGE_CODES = ['RUB', 'USD', 'EUR'];
+  const DEFAULT_CURRENCY_ITEMS = [
+      {
+          buyExchangeRate: 90.6,
+          saleExchangeRate: 92.8,
+          currency: { id: 2, code: '978', currency: 'EUR', name: 'Евро' },
+      },
       {
-          text: 'Все показатели',
-          href: 'https://cbr.ru/currency_base/daily/',
-          version: 'secondary',
+          buyExchangeRate: 73.75,
+          saleExchangeRate: 75.95,
+          currency: { id: 1, code: '840', currency: 'USD', name: 'Американский доллар' },
       },
   ];
+  const DEFAULT_LOCATION = {
+      address: 'Москва, ул.Ленина д.28',
+      distance: '6км',
+  };
   const ExchangeRateTile = JSX(({ className = '', context, title = 'Курсы обмена валют' }) => {
-      const { data } = context.useAsyncData(CBR_EXCHANGE_RATE_URL, fetchExchangeRate);
-      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className}  ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, children: jsx(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, children: jsxs("table", { children: [jsx("thead", { children: jsxs("tr", { children: [jsx(CurrencyTH, { children: "\u0412\u0430\u043B\u044E\u0442\u0430" }), jsx(CurrencyTH, { className: "pl-11", children: "\u041A\u0443\u0440\u0441" })] }) }), jsx("tbody", { children: CURRENCY_CODES.map(renderCurrencyRow(data)) })] }) }) }));
+      const data = useExchangeRates(context.useAsyncData);
+      const exchangeCurrencyItems = data?.exchangeRate?.currencies?.filter((item) => {
+          return CURRENCY_CODES.indexOf(item?.currency?.currency || '') !== -1;
+      }) || DEFAULT_CURRENCY_ITEMS;
+      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className}`, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: "whitespace-pre-wrap mb-3" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-20 pt-3", children: [exchangeCurrencyItems ? (jsx(CurrencyTable, { className: "mb-7", exchangeCurrencyItems: exchangeCurrencyItems })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), exchangeCurrencyItems?.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", exchangeCurrencyItems: exchangeCurrencyItems, codes: EXCHANGE_CODES })) : null] }) }) }));
   });
-  const CurrencyTH = JSX(({ className = '', children }) => (jsx("th", { className: `text-left font-normal text-sm text-secondary-text ${className}`, children: children })));
-  const CurrencyTD = JSX(({ className = '', children }) => (jsx("td", { className: `text-left font-normal text-base text-primary-text ${className}`, children: children })));
-  async function fetchExchangeRate() {
-      const response = await fetch(CBR_EXCHANGE_RATE_URL);
-      return await response.json();
-  }
-  const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
-  const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
-  const renderCurrencyRow = (data) => (code) => {
-      const value = (data?.Valute || {})[code]?.Value;
-      return (jsxs("tr", { children: [jsx(CurrencyTD, { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [jsx(Icon, { name: CURRENCY_ICONS_MAP[code], width: "24", height: "24" }), jsx("span", { className: "ml-2", children: code })] }) }), jsx(CurrencyTD, { className: "pt-4 pl-11", children: formatCurrency(value) })] }, code));
-  };
 
   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',
@@ -994,12 +1165,22 @@
       ],
   }));
 
-  const Footer = JSX(({ className = '', documents, relatedEnterprises, contacts, socialMedia, topItems, context, horizontalNavigationTitle, subMenu, }) => {
-      const propsTextBlock = {
-          context,
-          accordionItems: getAccordionItems(topItems),
-      };
-      return (jsxs("footer", { className: `px-4 py-[26px] bg-white ${className}`, children: [jsx(Contacts, { className: "overflow-hidden", items: contacts, context: context, hasButton: true }), jsx(Accordion, { className: "!p-0 mb-4", ...propsTextBlock }), jsx("div", { children: subMenu?.map(renderSubMenuItem) }), jsx(MobileAppTile, { context: context, title: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435", description: "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0434\u043B\u044F IOS \u0438 Android" }), jsx(SearchBar, { context: context, className: "grow" }), jsx(SocialMedia, { className: "pb-4", media: socialMedia, context: context }), jsx(HorizontalNavigation, { title: horizontalNavigationTitle, links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
+  function useSitemap(useAsyncData) {
+      const { data } = useAsyncData(sitemapURL(), fetchSitemap);
+      return data || {};
+  }
+  async function fetchSitemap() {
+      const response = await fetch(sitemapURL());
+      return await response.json();
+  }
+  function sitemapURL() {
+      return `/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`;
+  }
+
+  const Footer = JSX(({ className = '', documents, relatedEnterprises, contacts, socialMedia, context, horizontalNavigationTitle, }) => {
+      const sitemap = useSitemap(context.useAsyncData);
+      const dispositions = sitemap?.dispositions;
+      return (jsxs("footer", { className: `px-4 py-[26px] bg-white ${className}`, children: [jsx(Contacts, { className: "overflow-hidden", items: contacts, context: context, hasButton: true }), jsx(Accordion, { context: context, className: "!p-0 mb-4", accordionItems: getAccordionItems(sitemap.topItems) }), jsx("div", { children: dispositions?.map(renderSubMenuItem) }), jsx(MobileAppTile, { context: context, title: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435", description: "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0434\u043B\u044F IOS \u0438 Android" }), jsx(SearchBar, { context: context, className: "grow" }), jsx(SocialMedia, { className: "pb-4", media: socialMedia, context: context }), jsx(HorizontalNavigation, { title: horizontalNavigationTitle, links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
   });
   const renderSubMenuItem = (menu, i) => {
       const { icon, href, text } = menu;
@@ -1033,18 +1214,6 @@
   const subtract = (minuend, subtrahend) => (minuend || []).filter((_) => !subtrahend?.find(cmp(_)));
   const mergeTopItems = (left, right) => substitute(left, right).concat(subtract(right, left));
 
-  function useSitemap(useAsyncData) {
-      const { data } = useAsyncData(sitemapURL(), fetchSitemap);
-      return data || {};
-  }
-  async function fetchSitemap() {
-      const response = await fetch(sitemapURL());
-      return await response.json();
-  }
-  function sitemapURL() {
-      return `/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`;
-  }
-
   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' }) => {
@@ -1066,18 +1235,19 @@
 
   const HeaderBurger = JSX(({ context, burgerSubMenu, onClick, defaultLocation = '', children }) => {
       const [city, getCity] = context.useGeolocation(defaultLocation);
-      return (jsxs("div", { className: "absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20", children: [jsx("button", { className: "absolute top-4 right-4 border-none bg-transparent cursor-pointer", onClick: onClick, children: jsx(Icon, { name: "CloseIcon", width: "24", height: "24", asSVG: true }) }), jsxs("button", { onClick: getCity, className: "flex items-center text-sm text-secondary-text mb-4 bg-transparent cursor-pointer", children: [jsx(Icon, { name: "GeolocationIcon", width: "20", height: "20", className: "text-primary-main box-border mr-2", asSVG: true }), city] }), children, jsx("div", { className: "mb-7", children: burgerSubMenu?.map(renderBurgerSubMenuItem) }), jsx(SearchBar, { context: context, className: "grow" })] }));
+      return (jsxs("div", { className: "absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20", children: [jsx("button", { className: "absolute top-4 right-4 border-none bg-transparent cursor-pointer", onClick: onClick, children: jsx(Icon, { name: "CloseIcon", width: "24", height: "24", asSVG: true }) }), jsxs("button", { onClick: getCity, className: "flex items-center text-sm text-secondary-text p-0 mb-4 bg-transparent cursor-pointer", children: [jsx(Icon, { name: "GeolocationIcon", width: "20", height: "20", className: "text-primary-main box-border mr-2", asSVG: true }), city] }), children, jsx("div", { className: "mb-7", children: burgerSubMenu?.map(renderBurgerSubMenuItem) }), jsx(SearchBar, { context: context, className: "grow" })] }));
   });
   const renderBurgerSubMenuItem = (menu, i) => {
       const { icon, href, text } = menu;
       return (jsxs("a", { href: href, className: "flex text-sm mb-4 hover:text-primary-main", children: [icon ? (jsx(Icon, { className: "text-primary-main pr-1", name: icon, width: "24", height: "24", asSVG: true })) : null, jsx("span", { className: "pl-0.5 font-medium", children: text })] }, `headerSubMenu-${i}`));
   };
 
-  const HeaderTop = JSX(({ onClick, bgColor }) => (jsxs("div", { className: "flex items-center justify-between border-0 border-b border-main-divider h-[50px]", children: [jsxs("div", { className: "flex items-center", children: [jsx("button", { className: "pr-4 border-0 bg-transparent cursor-pointer", onClick: onClick, "aria-label": "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043C\u0435\u043D\u044E", children: jsx(Icon, { name: bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite', width: "24", height: "24", asSVG: true }) }), jsx(Logo, { bgColor: bgColor })] }), jsx("button", { className: `${bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'} text-sm  border-0 bg-transparent cursor-pointer`, children: "\u0412\u043E\u0439\u0442\u0438" })] })));
+  const HeaderTop = JSX(({ onClick, bgColor }) => (jsxs("div", { className: "flex items-center justify-between border-0 border-b border-main-divider h-[50px]", children: [jsxs("div", { className: "flex items-center", children: [jsx("button", { className: "pl-0 pr-4 border-0 bg-transparent cursor-pointer", onClick: onClick, "aria-label": "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043C\u0435\u043D\u044E", children: jsx(Icon, { name: bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite', width: "24", height: "24", asSVG: true }) }), jsx(Logo, { bgColor: bgColor })] }), jsx("button", { className: `${bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'} text-sm  border-0 bg-transparent cursor-pointer`, children: "\u0412\u043E\u0439\u0442\u0438" })] })));
 
-  const Header = JSX(({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, burgerSubMenu }) => {
+  const Header = JSX(({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems }) => {
       const router = context.useRouter();
       const sitemap = useSitemap(context.useAsyncData);
+      const dispositions = sitemap?.dispositions;
       const { handlerDecorator } = context;
       const mergedItems = mergeTopItems(sitemap.topItems, topItems);
       const activeTopItem = mergedItems.find(isTopItemActive(router));
@@ -1089,36 +1259,10 @@
                                   ...useLink({ router, handlerDecorator }, _),
                                   active: _ === activeSubItem,
                                   bgColor,
-                              }, i)) }) })] }), burgerMenuShow ? (jsx(HeaderBurger, { context: context, onClick: toggleBurgerMenu, burgerSubMenu: burgerSubMenu, defaultLocation: defaultLocation, children: jsx(Accordion, { context: context, accordionItems: getAccordionItems(topItems), className: "p-0 pt-0 pb-0 mb-4" }) })) : null] }));
+                              }, i)) }) })] }), burgerMenuShow ? (jsx(HeaderBurger, { context: context, onClick: toggleBurgerMenu, burgerSubMenu: dispositions, defaultLocation: defaultLocation, children: jsx(Accordion, { context: context, accordionItems: getAccordionItems(sitemap.topItems), className: "!p-0 mb-4" }) })) : null] }));
   });
   const renderSubItem = (item, i) => (jsx(HeaderItem, { className: "mr-8 whitespace-nowrap text-sm", ...item }, String(i)));
 
-  const benefitTitleStyleMap = {
-      primary: 'text-primary-text',
-      secondary: 'text-white',
-  };
-  const benefitDescStyleMap = {
-      primary: 'text-secondary-text',
-      secondary: 'text-white',
-  };
-  function renderBenefit(benefit, i, version) {
-      return (jsxs("div", { className: "flex gap-3 items-center mb-2.5 last:mb-0", children: [benefit.icon && (jsx(Icon, { className: "w-6 h-6 rounded-full box-border", name: benefit.icon, width: "24", height: "24", asSVG: true })), 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)));
-  }
-
-  const ProductBlockInner = JSX(({ className = '', context, title, headingType = 'h2', description, benefits, buttons, image, items, version = 'primary', }) => {
-      return (jsxs("div", { className: `w-full text-primary-text ${className}`, children: [jsx("div", { children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })), 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", description: description }) : null, benefits?.filter((items) => items.label)?.length ? (jsx("div", { className: "mt-3", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null, items?.length ? jsx(List, { className: "mt-3", items: items }) : null] }) }), renderImage(image)] }));
-  });
-  function renderImage(image) {
-      return image?.src ? (jsx("div", { className: "mt-5", children: jsx(Img, { image: { className: 'block', ...image } }) })) : null;
-  }
-
-  const ProductBlock = JSX(
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  (props /* Get rid of image and benefits */) => {
-      const { className } = props;
-      return (jsx("section", { className: `font-sans bg-white px-4 py-6 ${className || ''}`, children: jsx(ProductBlockInner, { ...props }) }));
-  });
-
   const ProductGalleryBlock = JSX(({ block, headingType, context }) => {
       return (jsx("section", { className: "flex grow-0 shrink-0 basis-full px-4 pt-6", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { context: context, headingType: headingType || 'h2', ...block }) }) }));
   });
@@ -1146,20 +1290,49 @@
       return (jsx("div", { className: `${iconAreaSize} bg-secondary-light rounded-full z-10 mr-3 flex justify-center content-center`, children: jsx("span", { className: `font-medium text-secondary-text self-center ${iconTextSize}`, children: (step.icon && jsx(Icon, { name: step.icon, width: iconSize, height: iconSize })) || i + 1 }) }));
   };
 
+  const TableTileHeader = JSX(({ title, icon }) => {
+      return (jsxs("div", { className: "flex gap-2.5 mb-2", children: [title ? jsx(Heading, { headingType: "h3", className: "font-medium", title: title }) : null, icon ? (jsx(Icon, { className: "ml-auto max-w-6 max-h-6", name: icon, width: "24px", height: "24px" })) : null] }));
+  });
+
+  const TariffsTableTileCell = JSX(({ header, data }) => {
+      return (jsxs("div", { className: "rounded-md border-main-stroke h-full box-border border p-4", children: [jsx(TableTileHeader, { ...header }), data?.length ? data.map(renderCellInner) : null] }));
+  });
+  const renderCellInner = ({ label, description, list, image, buttons }, i) => (jsxs("div", { children: [i > 0 && (jsx("div", { className: "border-main-divider border border-solid border-t-0 border-x-0 my-2" })), label ? jsx("div", { className: "text-m-sm m-0", children: label }) : null, description ? (jsx("div", { className: "text-m-sm text-secondary-text mt-[3px]", children: description })) : null, list?.items?.length ? (jsx("div", { className: "flex flex-col justify-between items-start", children: jsx("div", { role: "list", children: list.items.map((text, idx) => (jsx(BlockItem, { className: "text-m-sm", text: text, version: "gray", isDotted: list.isDotted ?? true }, String(idx)))) }) })) : null, image && jsx(Img, { image: { ...image, className: 'm-0' } }), buttons?.length ? (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' : ''}`, rounded: rounded, appendLeft: icon && jsx(Icon, { name: icon, width: "24px", height: "24px", asSVG: true }), ...buttonProps, "aria-label": icon }, String(idx)))) })) : null] }, 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 TariffsTableHorizontal = JSX(({ tiles, context }) => (jsx(SwipeListControl, { context: context, 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 ${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] }));
+  });
+  function renderOrientationTable(orientation, tiles, context) {
+      return orientation === 'vertical' ? (jsx(TariffsTableVertical, { tiles: tiles })) : (jsx(TariffsTableHorizontal, { context: context, tiles: tiles }));
+  }
+  const getColData = (columns) => columns?.[0].data ? columns[0].data : [];
+  const getTiles = (rowHeaders, colData) => rowHeaders?.map((header, i) => ({
+      header,
+      data: colData?.[i] || [{}],
+  }));
+
   const Blocks = {
       Accordion,
+      ComparisonTable,
       ExchangeRateTile,
       Footer,
       Gallery,
       Header,
       Headline,
       LinkDocs,
+      LinkList,
       MobileAppTile,
       ProductBlock,
       ProductGallery,
       StepsBlock,
+      TariffsTable,
       TextBlock,
-      LinkList,
   };
 
   const LikeButton = JSX(({ className, onClick, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 w-[36px] bg-inherit cursor-pointer ${className || ''}`, onClick: onClick, "aria-label": ariaLabel, children: renderLikeIcon() })));
@@ -1219,7 +1392,7 @@
   });
   function renderOpenGraph(og) {
       return og
-          ? Object.entries(og).map(([key, value]) => (jsx("meta", { name: `og:${key}`, content: value }, key)))
+          ? Object.entries(og).map(([key, value]) => (jsx("meta", { property: `og:${key}`, content: value }, key)))
           : null;
   }
   function renderTwitter(twitter) {