@redneckz/wildless-cms-uni-blocks 0.2.71 → 0.2.74

package/bundle/bundle.umd.js

@@ -239,13 +239,6 @@
       return (jsxs("div", { className: `border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${className || ''}`, children: [jsx(LikeButton, { onClick: likeService.like, ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u043B\u0430\u0439\u043A\u00BB" }), jsx(LikeButton, { onClick: likeService.dislike, className: "rotate-180", ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u0434\u0438\u0437\u043B\u0430\u0439\u043A\u00BB" }), jsx("span", { className: "select-none", children: likeService.likeCount })] }));
   });
 
-  const Img = JSX(({ className, image }) => (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, alt: image.alt || image.title, title: image.title, ...image?.size })] })));
-  function formatToMimeType(format) {
-      return format ? `image/${String(format)}` : undefined;
-  }
-
   const listStyleMap = {
       primary: 'bg-primary-main',
       secondary: 'bg-white',
@@ -266,19 +259,28 @@
       primary: 'bg-secondary-dark text-secondary-text',
       secondary: 'bg-secondary-light text-secondary-text',
   };
-  const styleButton = 'inline-block rounded-md px-8 py-2 text-center font-sans';
-  const Button = JSX(({ className, text, href, target, onClick, children, disabled, version = 'primary', ariaLabel, }) => {
+  const styleButton = 'inline-block text-center font-sans select-none';
+  const Button = JSX(({ className, text, aboveText, appendLeft, href, target, onClick, children, disabled, rounded, version = 'none', ariaLabel, ...rest }) => {
+      const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, rounded: rounded }));
       if (disabled) {
-          return (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: "-1", className: `${styleButton} select-none ${buttonDisabledStyleMap[version]} ${className || ''}`, children: children ? (jsx("div", { children: children })) : (jsx("div", { className: "text-sm font-medium py-1.5", children: text })) }));
+          return (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: "-1", className: `${styleButton} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: buttonInner }));
       }
-      return (jsx("a", { className: `${styleButton} no-underline ${buttonStyleMap[version]} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, children: children ? (jsx("div", { children: children })) : (jsx("div", { className: "text-sm font-medium py-1.5", children: text })) }));
+      return (jsx("a", { className: `${styleButton} cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: !href ? 'button' : 'link', ...rest, children: buttonInner }));
+  });
+  const ButtonInner = JSX(({ text, aboveText, appendLeft, rounded }) => {
+      const withoutText = !text && !aboveText && Boolean(appendLeft);
+      const buttonInnerClasses = `flex items-center justify-center ${withoutText ? 'h-12 w-12 min-h-12 min-w-12' : `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[13px]'}`} ${rounded ? 'rounded-full' : ''}`;
+      return (jsxs("div", { className: buttonInnerClasses, children: [appendLeft ? appendLeft : null, !withoutText ? (jsxs("div", { children: [jsx("div", { className: "text-xxs text-left", children: aboveText }), jsx("div", { className: "text-sm font-medium text-left", children: text })] })) : null] }));
   });
 
   const Icon = JSX(({ className, name, alt = `Icon ${name}`, title = alt, ...imgProps }) => (jsx("img", { className: className, src: `${projectSettings.CDN || ''}icons/${name}.svg`, alt: alt, title: title, ...imgProps })));
 
-  const IconButton = JSX((props) => {
-      return (jsx(Button, { ...props, children: props.icon ? (jsxs("div", { className: "flex items-center", children: [jsx("div", { className: "mr-2", children: jsx(Icon, { name: props.icon, width: "24", height: "24" }) }), jsxs("div", { children: [jsx("div", { className: "text-xxs text-left", children: props.aboveText }), jsx("div", { className: "text-sm font-medium text-left", children: props.text })] })] })) : null }));
-  });
+  const Img = JSX(({ className, image }) => (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, alt: image.alt || image.title, title: image.title, ...image?.size })] })));
+  function formatToMimeType(format) {
+      return format ? `image/${String(format)}` : undefined;
+  }
 
   var SizeTableClass;
   (function (SizeTableClass) {
@@ -287,6 +289,7 @@
       SizeTableClass["M"] = "text-title-sm";
       SizeTableClass["S"] = "text-title-xs";
   })(SizeTableClass || (SizeTableClass = {}));
+
   const Title = JSX(({ size = 'L', className, children, ...rest }) => {
       const Tag = size === 'XL' ? 'h1' : 'h2';
       return (jsx(Tag, { className: getClasses(SizeTableClass[size], className), ...rest, children: children }));
@@ -366,7 +369,7 @@
   const BaseTile = JSX(({ className, context, title, titleSize, description, children, buttons, image, items, version = 'primary', }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("div", { className: `font-sans flex flex-col grow h-full`, children: [title && (jsx(Title, { size: titleSize || getTitleSizeByClassName(className), className: TITLE_CLASSES, children: title })), jsxs("div", { className: "flex grow justify-between", children: [jsxs("div", { className: "flex flex-col justify-between items-start", children: [jsxs("div", { children: [description ? (jsx("div", { className: "font-normal text-base max-w-[600px] mb-5", children: description })) : null, children, items?.length ? renderItems$2(items, version) : null] }), buttons?.length ? (jsx("div", { className: "flex mt-9 gap-3", children: buttons.map((button, index) => renderButton(useLink({ router, handlerDecorator }, button), index)) })) : null] }), image?.src && jsx(Img, { className: "mt-auto ml-7", image: image })] })] }));
+      return (jsxs("div", { className: `font-sans flex flex-col grow h-full`, children: [title && (jsx(Title, { size: titleSize || getTitleSizeByClassName(className), className: TITLE_CLASSES, children: title })), jsxs("div", { className: "flex grow justify-between", children: [jsxs("div", { className: "flex flex-col justify-between items-start", children: [jsxs("div", { children: [description ? (jsx("div", { className: "font-normal text-base max-w-[600px] mb-5", children: description })) : null, children, items?.length ? renderItems$1(items, version) : null] }), buttons?.length ? (jsx("div", { className: "flex mt-9 gap-3", children: buttons.map((button, index) => renderButton(useLink({ router, handlerDecorator }, button), index)) })) : null] }), image?.src && jsx(Img, { className: "mt-auto ml-7", image: image })] })] }));
   });
   function getTitleSizeByClassName(className = '') {
       const colSpan = getColSpan(className);
@@ -380,11 +383,15 @@
           return 'L';
       }
   }
-  function renderItems$2(items = [], version) {
+  function renderItems$1(items = [], version) {
       return (jsx("section", { className: "max-w-[600px]", role: "list", children: items.map((_, i) => (jsx(BlockItem, { className: i ? 'mt-2.5' : '', text: _, version: version }, String(i)))) }));
   }
-  function renderButton(button, i) {
-      return button?.text ? jsx(IconButton, { ...button }, String(i)) : null;
+  function renderButton({ icon, ...button }, i) {
+      if (!button?.text)
+          return;
+      if (icon)
+          return (jsx(Button, { appendLeft: jsx(Icon, { name: icon, width: "24", height: "24" }), ...button }, String(i)));
+      return jsx(Button, { ...button }, String(i));
   }
 
   const tileStyleMap = {
@@ -478,6 +485,7 @@
       {
           text: 'Все показатели',
           href: 'https://cbr.ru/currency_base/daily/',
+          version: 'secondary',
       },
   ];
   const ExchangeRateTile = JSX(({ className, context, title }) => {
@@ -496,8 +504,8 @@
   const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
   const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
 
-  const SVG = JSX(({ className, viewBox, fill = 'none', paths, ...commonOptions }) => {
-      return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, viewBox: viewBox, fill: fill, children: paths.map(({ d, fill, ...options }, i) => (jsx("path", { d: d, fill: fill || 'currentColor', ...commonOptions, ...options }, i))) }));
+  const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
+      return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, viewBox: viewBox, fill: fill, width: width, height: height, children: paths.map(({ d, fill, ...options }, i) => (jsx("path", { d: d, fill: fill || 'currentColor', ...commonOptions, ...options }, i))) }));
   });
 
   const LOGO_PATHS = [
@@ -522,7 +530,7 @@
   const Contacts = JSX(({ className, items, hasButton, context }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("div", { className: `flex flex-col ${className || ''}`, children: [items?.length ? items.map(renderContact) : null, hasButton ? (jsx(Button, { className: "my-4", ...useLink({ router, handlerDecorator }, {
+      return (jsxs("div", { className: `flex flex-col ${className || ''}`, children: [items?.length ? items.map(renderContact) : null, hasButton ? (jsx(Button, { version: "primary", className: "my-4", ...useLink({ router, handlerDecorator }, {
                       text: 'Обратная связь',
                       href: '/',
                       target: '_blank',
@@ -544,6 +552,13 @@
   };
   const formatTel = (s) => s.replaceAll(/(\-|\s|\(|\)|\D+)/g, '');
 
+  const HorizontalNavigation = JSX(({ className, links, context }) => {
+      const router = context.useRouter();
+      const { handlerDecorator } = context;
+      return (jsx("div", { className: `${className || ''}`, children: links?.length ? (jsx("div", { className: "flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null }));
+  });
+  const HorizontalNavigationLink = JSX(({ className, index, text, href, target, onClick }) => (jsx("a", { className: `font-sans font-normal text-sm text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${className || ''}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
+
   const cmp = (a) => (b) => a?.href === b?.href;
   const substitute = (items, substitution) => (items || []).map((_) => substitution?.find(cmp(_)) || _);
   const subtract = (minuend, subtrahend) => (minuend || []).filter((_) => !subtrahend?.find(cmp(_)));
@@ -590,15 +605,10 @@
   });
   const MediaButton = JSX(({ href }) => {
       const { icon, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
-      return (jsx("a", { className: "flex items-center justify-center border-solid border border-main-divider rounded-full no-underline outline-none w-9 h-9", href: href, target: "_blank", rel: "noopener noreferrer", "aria-label": label, children: icon && jsx(Icon, { className: "block", name: icon }) /* TODO width & height */ }));
-  });
-
-  const HorizontalNavigation = JSX(({ className, links, context }) => {
-      const router = context.useRouter();
-      const { handlerDecorator } = context;
-      return (jsx("div", { className: `${className || ''}`, children: links?.length ? (jsx("div", { className: "flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null }));
+      if (!icon)
+          return null;
+      return (jsx(Button, { rounded: true, href: href, target: "_blank", rel: "noopener noreferrer", "aria-label": label, className: "border-solid border border-main-divider w-9 h-9 flex items-center justify-center hover:text-primary-main", appendLeft: jsx(Icon, { name: icon }) }));
   });
-  const HorizontalNavigationLink = JSX(({ className, index, text, href, target, onClick }) => (jsx("a", { className: `font-sans font-normal text-sm text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${className || ''}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
 
   const TextInformation = JSX(({ className, links, context }) => {
       const router = context.useRouter();
@@ -613,6 +623,61 @@
       return (jsxs("footer", { className: `${className} px-9 py-10 bg-white`, children: [jsxs("div", { className: "flex items-stretch gap-32 pb-8 xl:gap-8", children: [jsx(Logo, { className: `${LEFT_COL_WIDTH_FULL_HD} ${LEFT_COL_WIDTH_SMALL_DESKTOP}` }), jsx(SearchBar, { context: context, className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-32 xl:gap-8", children: [jsx(Contacts, { className: `${LEFT_COL_WIDTH_FULL_HD} shrink-0 overflow-hidden ${LEFT_COL_WIDTH_SMALL_DESKTOP}`, items: contacts, context: context, hasButton: true }), jsx(Sitemap, { className: "pt-[3px]", context: context, items: topItems })] }), jsx(SocialMedia, { media: socialMedia, context: context }), jsx(HorizontalNavigation, { links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
   });
 
+  const ARROW_PATHS = [
+      {
+          d: 'm9 12 4-4-4-4',
+          stroke: 'currentColor',
+          strokeWidth: '2',
+          strokeLinecap: 'round',
+          fill: 'none',
+      },
+      {
+          d: 'M2 9a1 1 0 0 1 0-2v2Zm6-2a1 1 0 0 1 0 2V7ZM2 7h6v2H2V7Z',
+      },
+  ];
+  const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
+        ? 'bg-secondary-light text-secondary-text'
+        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(SVG, { paths: ARROW_PATHS, viewBox: "0 0 16 16", fill: "none", width: "16", height: "16" }) })));
+
+  const cardStyleMap = {
+      normal: 'min-w-[364px] w-[364px]',
+      mini: 'min-w-[260px] w-[260px]',
+  };
+  const cardWidthMap = {
+      normal: 380,
+      mini: 276,
+  };
+  const galleryLengthForScrollMap = {
+      normal: 3,
+      mini: 4,
+  };
+  const GalleryInner = JSX(({ title, description, context, cards = [], className, version = 'normal' }) => {
+      const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+      function handleNextClick() {
+          setActiveCardIndex(activeCardIndex + 1);
+      }
+      function handlePrevClick() {
+          setActiveCardIndex(activeCardIndex - 1);
+      }
+      const isGalleryScrollAvailable = cards?.length > galleryLengthForScrollMap[version];
+      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-12 overflow-hidden ${className}`, children: [jsxs("div", { className: "flex flex-col items-center mb-8", children: [title ? jsx(Title, { className: "font-medium m-0 text-center", children: title }) : null, description ? (jsx("div", { className: "font-normal text-base max-w-[600px] mt-3", children: description })) : null] }), jsx("div", { 
+                  // Need to place all cards at the center if count of cards less than 4
+                  className: `flex ${cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''} duration-1000`, 
+                  // All cards has same width
+                  style: { transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }, role: "list", children: cards?.map((card, i) => renderCard$1(card, i, version)) }), showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 rotate-180", 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-1 z-10", 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 right-0 bottom-0 w-[84px] bg-opacity-to-white" })] }));
+  });
+  function renderCard$1(card, i, version) {
+      return (jsxs("div", { className: `box-border border-solid border rounded-md border-main-divider p-7 mx-2 flex flex-col justify-between items-stretch ${cardStyleMap[version]} w-full`, role: "listitem", 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-xl m-0 ${!card.description && !card.items?.length ? 'text-center' : ''}`, children: card.title })) : null, card.description ? (jsx("div", { className: "font-normal text-sm text-secondary-text mt-2", children: card.description })) : null, card.items?.length ? (jsx("section", { className: "max-w-[308px] mt-2", role: "list", children: card.items.map(renderItem) })) : null] }), card.href ? (jsx(Button, { className: "mt-6", text: "\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u0435\u0435", version: "secondary", href: card.href })) : null] }, String(i)));
+  }
+  function renderItem(item, i) {
+      return (jsx(BlockItem, { children: jsx("span", { className: "text-sm text-secondary-text", children: item }) }, String(i)));
+  }
+
+  const Gallery$1 = JSX((props) => jsx(GalleryInner, { ...props, version: "normal" }));
+
   const HeaderItem = JSX(({ className, text, href, target, active, onClick, children }) => {
       const textStyle = active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main';
       return (jsxs("a", { className: `relative inline-block bg-transparent text-center no-underline ${className || ''}`, href: href, target: target, onClick: onClick, children: [jsx("span", { className: `font-sans font-normal text-base ${textStyle}`, children: text || children }), active ? (jsx("div", { className: "absolute left-0 -bottom-2 w-full h-[2px] bg-primary-main" })) : null] }));
@@ -654,6 +719,8 @@
       return (jsxs("header", { className: `pt-5 pb-8 px-20 bg-white ${className || ''}`, children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8" }), topMenu, jsx(HeaderSecondaryMenu, { context: context, className: "ml-auto", defaultLocation: defaultLocation })] }), jsx("div", { className: "mt-5 h-[1px] bg-main-divider" }), jsx("nav", { className: "mt-5", children: subMenu })] }));
   });
 
+  const MiniGallery = JSX((props) => (jsx(GalleryInner, { ...props, version: "mini" })));
+
   const MobileAppTile = JSX(({ className, context, title = 'Мобильное приложение', qr, buttons = [] }) => {
       return (jsx(Tile, { className: className, context: context, title: title, buttons: buttons, children: jsxs("div", { className: "flex items-center", children: [qr?.src && qr?.href && (jsx("a", { href: qr.href, target: "_blank", children: jsx("img", { src: qr.src, alt: title, title: title, width: "164", height: "164", className: "w-[90px] h-[90px] min-w-[90px] min-h-[90px] bg-secondary-light" }) })), jsx("span", { className: "font-normal text-sm text-secondary-text ml-4", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }) }));
   });
@@ -661,10 +728,10 @@
   const ProductBlockInner = JSX(({ className, context, title, titleSize, description, benefits, buttons, image, items }) => {
       return (jsxs("div", { className: `flex grow justify-between items-stretch ${className || ''}`, children: [jsxs("div", { className: 'flex flex-col', children: [title && (
                       /* TODO Why <Title> is duplicated here?  */
-                      jsx(Title, { size: titleSize || 'XL', className: "font-medium m-0 mb-4 whitespace-pre-wrap max-w-[600px]", children: title })), jsx(BaseTile, { context: context, description: description, items: items, buttons: buttons, children: benefits?.length ? (jsx("div", { className: "flex gap-6 mt-6 mb-3.5", children: benefits.map(renderBenefit) })) : null })] }), image?.src && jsx(Img, { className: "mt-auto", image: image })] }));
+                      jsx(Title, { size: titleSize || 'XL', className: "font-medium m-0 mb-4 whitespace-pre-wrap max-w-[600px] text-primary-text", children: title })), jsx(BaseTile, { context: context, description: description, items: items, buttons: buttons, children: benefits?.length ? (jsx("div", { className: "flex gap-6 mt-6 mb-3.5", children: benefits.map(renderBenefit) })) : null })] }), image?.src && jsx(Img, { className: "mt-auto", image: image })] }));
   });
   function renderBenefit(benefit, i) {
-      return (jsxs("div", { className: "flex gap-4 items-center", children: [benefit.icon && (jsx(Icon, { className: "w-[50px] h-[50px] min-w-[50px] min-h-[50px] bg-main rounded-full p-[10px] box-border", name: benefit.icon, width: "24", height: "24" })), jsxs("div", { className: "flex gap-1 flex-col h-full", children: [jsx("h4", { className: "font-medium text-xl m-0", children: benefit.label }), benefit.description && (jsx("div", { className: "font-normal text-sm text-secondary-text", children: benefit.description }))] })] }, String(i)));
+      return (jsxs("div", { className: "flex gap-4 items-center", children: [benefit.icon && (jsx(Icon, { className: "w-[50px] h-[50px] min-w-[50px] min-h-[50px] bg-main rounded-full p-[10px] box-border", name: benefit.icon, width: "24", height: "24" })), jsxs("div", { className: "flex gap-1 flex-col h-full", children: [jsx("h4", { 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 Breadcrumb = JSX(({ text, href, target, onClick, className, children }) => {
@@ -709,16 +776,6 @@
       return (jsxs("button", { type: "button", onClick: onClick, className: `group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 py-4 grow basis-0`, children: [jsxs("div", { className: "border-0 border-r border-solid border-main-divider px-6", children: [jsx("div", { className: `text-sm font-medium group-hover:text-primary-text ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: "text-xs text-secondary-text", children: slide.desc })] }), jsx("div", { className: `absolute bottom-0 left-0 w-full h-[3px] bg-primary-main -translate-x-full ${progressBarClassName}`, style: { animationDuration: `${duration}s` } })] }, String(i)));
   }
 
-  const StepsBlock = JSX(({ className, title, steps }) => {
-      return (jsxs("section", { className: `font-sans text-primary-text bg-white px-12 py-12 flex flex-col items-center ${className || ''}`, children: [jsx(Title, { className: "font-medium m-0 max-w-[47rem] text-center", children: title }), steps?.length ? (jsxs("div", { children: [jsx("div", { className: "flex mt-9 items-center px-[88px]", children: joinList(jsx("div", { className: "h-0.5 w-full bg-secondary-light" }))(steps.map((step, i) => renderStepIcon(step, i))) }), jsx("div", { className: "flex mt-9 justify-between gap-x-24", children: steps.map(renderStepTitle) })] })) : null] }));
-  });
-  const renderStepIcon = (step, i) => {
-      return (jsx("div", { className: "flex flex-col items-center text-center relative", children: jsx("div", { className: "h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10", children: (step.icon && jsx(Icon, { name: step.icon, width: "48", height: "48" })) || (jsx("span", { className: "font-medium text-title-sm text-secondary-text", children: i + 1 })) }) }, String(i)));
-  };
-  const renderStepTitle = (step, i) => {
-      return (jsx("div", { className: "flex flex-col items-center text-center relative w-[276px]", children: jsxs("div", { className: "max-w-min", children: [jsx("h5", { className: "font-medium text-xl m-0 mt-4 whitespace-nowrap px-3", children: step.label }), step.description && (jsx("div", { className: "font-normal text-sm text-secondary-text mt-2", children: step.description }))] }) }, String(i)));
-  };
-
   const ProductTile = JSX((props) => {
       const { benefits, version } = props;
       return (jsx(Tile, { ...props, children: jsxs("div", { className: "flex mt-5 mb-1", children: [benefits?.length ? (jsx("div", { className: "mr-8", children: benefits.map(renderBenefitDescription) })) : null, benefits?.length ? (jsx("div", { className: "pt-1", children: benefits.map((_, i) => renderBenefitLabel(_, i, version)) })) : null] }) }));
@@ -747,11 +804,21 @@
       return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
   }
 
+  const StepsBlock = JSX(({ className, title, steps }) => {
+      return (jsxs("section", { className: `font-sans text-primary-text bg-white px-12 py-12 flex flex-col items-center ${className || ''}`, children: [jsx(Title, { className: "font-medium m-0 max-w-[47rem] text-center", children: title }), steps?.length ? (jsxs("div", { children: [jsx("div", { className: "flex mt-9 items-center px-[88px]", children: joinList(jsx("div", { className: "h-0.5 w-full bg-secondary-light" }))(steps.map((step, i) => renderStepIcon(step, i))) }), jsx("div", { className: "flex mt-9 justify-between gap-x-24", children: steps.map(renderStepTitle) })] })) : null] }));
+  });
+  const renderStepIcon = (step, i) => {
+      return (jsx("div", { className: "flex flex-col items-center text-center relative", children: jsx("div", { className: "h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10", children: (step.icon && jsx(Icon, { name: step.icon, width: "48", height: "48" })) || (jsx("span", { className: "font-medium text-title-sm text-secondary-text", children: i + 1 })) }) }, String(i)));
+  };
+  const renderStepTitle = (step, i) => {
+      return (jsx("div", { className: "flex flex-col items-center text-center relative w-[276px]", children: jsxs("div", { className: "max-w-min", children: [jsx("h5", { className: "font-medium text-xl m-0 mt-4 whitespace-nowrap px-3", children: step.label }), step.description && (jsx("div", { className: "font-normal text-sm text-secondary-text mt-2", children: step.description }))] }) }, String(i)));
+  };
+
   const textBlockStyleMaps = {
       primary: {
           background: 'bg-white',
           icon: 'bg-primary-main text-white',
-          title: 'text-base',
+          title: 'text-primary-text',
           description: 'text-secondary-text',
       },
       secondary: {
@@ -763,13 +830,13 @@
       'secondary-light': {
           background: 'bg-primary-main/10',
           icon: 'bg-primary-main text-white',
-          title: 'text-base',
+          title: 'text-primary-text',
           description: 'text-secondary-text',
       },
   };
   const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className }) => {
       const textBlockStyleMap = textBlockStyleMaps[blockVersion];
-      return (jsxs("section", { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, children: [iconVersion && iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion && iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title && jsx("div", { className: `font-medium mb-1 ${textBlockStyleMap.title}`, children: title }), description && (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description }))] })] }));
+      return (jsxs("section", { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, children: [iconVersion && iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion && 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 })), description && (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description }))] })] }));
   });
   function renderIcon(className) {
       return (jsx("div", { className: `pt-1.5 pr-4`, children: jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs ${className}`, children: "i" }) }));
@@ -778,37 +845,49 @@
       return image?.src ? jsx(Img, { className: "pt-0.5 pr-3", image: image }) : null;
   }
 
-  const ArrowButton = JSX(({ className, onClick, ariaLabel }) => {
-      return (jsx("button", { className: `${className} border-none no-underline w-12 h-12 rounded-3xl bg-white flex text-black hover:text-primary-main`, style: { boxShadow: '0px 4px 25px rgba(0, 0, 0, 0.07)' }, onClick: onClick, "aria-label": ariaLabel, children: jsxs("svg", { className: "m-auto", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M7 12L3 8L7 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), jsx("path", { d: "M14 9C14.5523 9 15 8.55228 15 8C15 7.44772 14.5523 7 14 7L14 9ZM8 7C7.44772 7 7 7.44772 7 8C7 8.55229 7.44772 9 8 9L8 7ZM14 7L8 7L8 9L14 9L14 7Z", fill: "currentColor" })] }) }));
+  const TableRowContainer = JSX(({ children }) => (jsx("div", { className: "self-start flex flex-col", role: "row", children: jsx("div", { className: "flex", children: children }) })));
+
+  const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
+  const BORDER_CLASSES = 'border-main-stroke border-solid border';
+  const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
+  const FIRST_CELL_CLASSES = 'w-[200px] mr-6';
+  const COLS_LENGTH_FOR_SCROLL = 2;
+  const COLUMN_WIDTH = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px
+
+  const TableCarouselContainer = JSX(({ children, activeCardIndex }) => (jsx("div", { className: "flex flex-1 overflow-hidden", children: jsx("div", { className: "flex gap-4 duration-1000", style: { transform: `translateX(-${activeCardIndex * COLUMN_WIDTH}px)` }, children: children }) })));
+
+  const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-12 ${BORDER_CLASSES} ${GRADIENT}`, role: "columnheader", scope: "col", children: [icon && !image?.src && (jsx(Icon, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", name: icon, width: "63", height: "63" })), image?.src && jsx(Img, { className: "mb-4", image: image }), title && (jsx(Title, { size: "S", className: "font-medium m-0 text-center text-white", children: title })), link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs py-[11px]", children: link.text }) }) }))] })));
+
+  const TableCell = JSX(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
+      const cellWrapperClasses = `w-80 box-border flex flex-col ${BORDER_CLASSES} ${!isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md'} ${isFillGradient ? GRADIENT : ''}`;
+      const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES} ${isFillGradient && isFirstRow ? 'border-t' : ''} ${!isLastRow ? 'border-solid' : ''}`;
+      return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { className: cellClasses, children: cell.map((item, i) => renderCellInner(item, i, isFillGradient)) }) }));
   });
+  const renderCellInner = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label && (jsx("h5", { className: `text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`, children: label })), description && (jsx("div", { className: `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`, children: description }))] }, String(i)));
+
+  const TableRow = JSX(({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (jsxs(TableRowContainer, { children: [header?.title ? (jsx("div", { className: `text-sm py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${!isLastRow ? 'border-solid' : ''}`, children: header.title })) : null, data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, children: data.map((cell, i) => (jsx(TableCell, { cell: cell, isFirstRow: isFirstRow, isLastRow: isLastRow, isFillGradient: isColoredFirstColumn && i === 0 }, String(i)))) })) : null] })));
 
-  const CARD_WIDTH = 384;
-  const GALLERY_LENGTH_FOR_SCROLL = 3;
-  const Gallery$1 = JSX(({ title, description, context, cards = [], className }) => {
+  const ComparisonTable = JSX(({ className, context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, }) => {
+      const router = context.useRouter();
+      const { handlerDecorator } = context;
       const [activeCardIndex, setActiveCardIndex] = context.useState(0);
-      function handleNextClick() {
-          setActiveCardIndex(activeCardIndex + 1);
-      }
-      function handlePrevClick() {
-          setActiveCardIndex(activeCardIndex - 1);
-      }
-      const isGalleryScrollAvailable = cards?.length > GALLERY_LENGTH_FOR_SCROLL;
-      const showNextButton = isGalleryScrollAvailable && cards?.length - activeCardIndex > GALLERY_LENGTH_FOR_SCROLL;
-      const showPrevButton = isGalleryScrollAvailable && activeCardIndex > 0;
-      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-12 overflow-hidden ${className}`, children: [jsxs("div", { className: "flex flex-col items-center mb-8", children: [jsx(Title, { className: "font-medium m-0 text-centers", children: title }), description ? (jsx("div", { className: "font-normal text-base max-w-[600px] mt-3", children: description })) : null] }), jsx("div", { 
-                  // Need to place all cards at the center if count of cards less than 4
-                  className: `flex ${cards?.length <= GALLERY_LENGTH_FOR_SCROLL ? 'justify-center' : ''} duration-1000`, 
-                  // All cards has same width
-                  style: { transform: `translateX(-${activeCardIndex * CARD_WIDTH}px)` }, role: "list", children: cards?.map(renderCard$1) }), showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8", 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-1 z-20 rotate-180", 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 right-0 bottom-0 w-[84px]", style: {
-                      background: 'linear-gradient(270deg, #FFFFFF 34.89%, rgba(255, 255, 255, 0) 92.52%)',
-                  } })] }));
+      const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
+      const colHeaders = columns?.map(({ header }) => header || {});
+      const colData = columns?.map(({ data }) => data) || [];
+      const rowData = rowHeaders
+          ?.map((header, i) => ({
+          header,
+          data: colData.map((col) => col?.[i] || [{}]),
+      }))
+          .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
+      const nextClick = () => setActiveCardIndex(activeCardIndex + 1);
+      const prevClick = () => setActiveCardIndex(activeCardIndex - 1);
+      const showToggle = () => setIsShowAllRow(!isShowAllRow);
+      const isScrollAvailable = colData?.length && colData.length > COLS_LENGTH_FOR_SCROLL;
+      const showNextButton = isScrollAvailable && colData?.length - activeCardIndex > COLS_LENGTH_FOR_SCROLL;
+      const showPrevButton = isScrollAvailable && activeCardIndex > 0;
+      return (jsxs("section", { className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, children: [jsx(Title, { className: "font-medium m-0 max-w-[47rem] text-center mb-9 mx-auto", children: title }), jsxs("div", { role: "table", children: [colHeaders?.length ? (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES, role: "columnheader", scope: "col" }), jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header, link: header.link && useLink({ router, handlerDecorator }, header.link) }, String(i)))) })] })) : null, rowData?.length ? (jsxs("div", { className: "relative", children: [rowData.map((row, i, { length }) => (jsx(TableRow, { row: row, isFirstRow: i === 0, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex, isColoredFirstColumn: isColoredFirstColumn }, String(i)))), isScrollAvailable ? (jsx("div", { children: jsxs("div", { className: "absolute top-7 right-7 z-10", children: [jsx(ArrowButton, { onClick: nextClick, disabled: !showNextButton, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E" }), jsx(ArrowButton, { className: "mt-4 rotate-180", onClick: prevClick, disabled: !showPrevButton, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E" })] }) })) : null] })) : null] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null, visibleRowLength ? (jsx("div", { className: "pr-[50px]", children: jsxs("div", { className: "flex w-full", children: [jsx("div", { className: FIRST_CELL_CLASSES }), jsx("button", { onClick: showToggle, className: "mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main", children: jsx("div", { className: "font-sans font-medium text-xs py-[11px]", children: !isShowAllRow ? 'Показать все параметры' : 'Скрыть' }) })] }) })) : null] }));
   });
-  function renderCard$1(card, key) {
-      return (jsxs("div", { className: "box-border border-solid border rounded-md border-main-divider p-7 mx-2 flex flex-col justify-between items-stretch min-w-[364px] w-[364px] w-full", role: "listitem", 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-xl m-0 ${!card.description && !card.items?.length ? 'text-center' : ''}`, children: card.title })) : null, card.description ? (jsx("div", { className: "font-normal text-sm text-secondary-text mt-2", children: card.description })) : null, card.items?.length ? renderItems$1(card.items) : null] }), card.href ? (jsx(Button, { className: "mt-6", text: "\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u0435\u0435", version: "secondary", href: card.href })) : null] }, key));
-  }
-  function renderItems$1(items = []) {
-      return (jsx("section", { className: "max-w-[308px] mt-2", role: "list", children: items.map((item, i) => (jsx(BlockItem, { children: jsx("span", { className: "text-sm text-secondary-text", children: item }) }, String(i)))) }));
-  }
 
   const Blocks = {
       Header,
@@ -825,6 +904,8 @@
       ExchangeRateTile,
       MobileAppTile,
       Gallery: Gallery$1,
+      MiniGallery,
+      ComparisonTable,
   };
 
   const Footer = JSX(({ className, context }) => (jsx("footer", { className: `${className} px-9 py-2 bg-white rounded-bl-3xl rounded-br-3xl`, children: jsx(TextInformation, { context: context }) })));