@redneckz/wildless-cms-uni-blocks 0.3.12 → 0.3.15

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 }), 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,13 +914,75 @@
       });
       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 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 || {};
@@ -1024,6 +1147,18 @@
   });
   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);
+      return data || {};
+  }
+  async function fetchSitemap() {
+      const response = await fetch(sitemapURL());
+      return await response.json();
+  }
+  function sitemapURL() {
+      return `/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`;
+  }
+
   const SearchBar = JSX(({ className, context }) => {
       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(Icon, { name: "LoupeIcon", width: "24", height: "24" }) }), !term && (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", onClick: (e) => {
@@ -1042,12 +1177,10 @@
       ],
   }));
 
-  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 })] }));
+  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;
@@ -1081,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' }) => {
@@ -1114,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));
@@ -1137,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 }) }) }));
   });
@@ -1194,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() })));
@@ -1267,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) {