@redneckz/wildless-cms-uni-blocks 0.3.73 → 0.3.75

package/bundle/bundle.umd.js

@@ -450,6 +450,10 @@
       return format ? `image/${String(format)}` : undefined;
   }
 
+  function style2className(style) {
+      return style ? style.filter(Boolean).join(' ') : '';
+  }
+
   const ALIGN_TEXT = {
       left: 'text-left',
       center: 'text-center',
@@ -828,9 +832,9 @@
   const Tile = JSX((props) => {
       const { context, title, headingType = 'h3', description, items, children, buttons, image, isDotted = true, className = '', version = 'primary', role, anchor = null, } = props;
       return (jsx("section", { className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, role: role, id: anchor, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
-              ${version === 'primary' ? 'text-primary-text' : ''}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons.map((button) => ({ ...button, className: 'w-[158px]' })), className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? (jsx(Description, { className: "max-w-[600px] text-title-new-sm font-light", description: description })) : null, children, renderList$1(items, version, isDotted)] }) }));
+              ${version === 'primary' ? 'text-primary-text' : ''}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons.map((button) => ({ ...button, className: 'w-[158px]' })), className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? (jsx(Description, { className: "max-w-[600px] text-title-new-sm font-light", description: description })) : null, children, renderList$2(items, version, isDotted)] }) }));
   });
-  function renderList$1(items, version, isDotted) {
+  function renderList$2(items, version, isDotted) {
       return items?.length ? (jsx(List, { items: items, isDotted: isDotted, itemClassName: "text-title-2xs font-light mt-2", version: version === 'primary' ? 'tile' : 'tile-white' })) : null;
   }
 
@@ -872,7 +876,7 @@
       normal: 3,
       mini: 4,
   };
-  const cardStyleMap = {
+  const cardStyleMap$1 = {
       normal: 'min-w-[364px] w-[364px]',
       mini: 'min-w-[260px] w-[260px]',
   };
@@ -905,7 +909,7 @@
   });
   function renderCard({ card, version }, i) {
       return (jsx("section", { className: `box-border border-solid border border-main-stroke p-6 mx-2 flex flex-col justify-between
-        items-stretch ${cardStyleMap[version]} ${cardVersionMap[card.version ?? 'primary']} w-full col-span-4`, role: "listitem", children: jsx(GalleryCardInner, { ...card }) }, String(i)));
+        items-stretch ${cardStyleMap$1[version]} ${cardVersionMap[card.version ?? 'primary']} w-full col-span-4`, role: "listitem", children: jsx(GalleryCardInner, { ...card }) }, String(i)));
   }
 
   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
@@ -959,20 +963,19 @@
       LinkList,
   };
 
-  const renderBlocksList = ({ blocks, context, className, columns }) => blocks?.length ? blocks.map(renderBlock$2({ context, className, columns })) : null;
-  const renderBlock$2 = ({ context, columns, className }) => (block, i) => {
+  const renderBlocksList = ({ blocks, context, className = '' }) => blocks?.length ? blocks.map(renderBlock$2({ context, className })) : null;
+  const renderBlock$2 = ({ context, className }) => (block, i) => {
       const type = block?.blockListType;
       if (!type || !(type in EmbeddableBlocks)) {
           return null;
       }
-      const columnsCountClass = columns === 2 ? 'w-1/2' : '';
+      const classNameBlock = style2className(block?.style);
       const EmbeddedBlock = EmbeddableBlocks[type];
-      return (jsx("div", { className: `${className} ${columnsCountClass}`, children: jsx(EmbeddedBlock, { context: context, ...block, className: "!p-0" }) }, `block_${i}`));
+      return (jsx(EmbeddedBlock, { context: context, ...block, className: `${className} ${classNameBlock}` }, `block_${i}`));
   };
 
   const AccordionItemInner = JSX(({ blocks, context }) => {
-      const className = 'mb-5 last:mb-0 pb-5';
-      return (jsx("div", { className: "transition-all duration-300 max-h-0 overflow-hidden", children: renderBlocksList({ context, className, blocks }) }));
+      return (jsx("div", { className: "grid grid-cols-12 transition-all duration-300 max-h-0 overflow-hidden", children: renderBlocksList({ context, blocks, className: '!p-0 mb-5' }) }));
   });
 
   const useActiveHandler$1 = ({ context, blocks, initialState = false }) => {
@@ -1017,7 +1020,7 @@
       return (jsxs("section", { className: `font-sans text-primary-text bg-white p-12 flex flex-col items-center ${className}`, id: anchor, children: [title ? (jsx(Heading, { headingType: headingType, as: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefitList?.length ? renderBenefits(benefitList) : null] }));
   });
   const renderBenefits = (benefits) => {
-      return (jsx("div", { className: "flex flex-wrap justify-center gap-x-20 mt-9", children: benefits.map(renderStep) }));
+      return (jsx("div", { className: "flex flex-wrap w-full justify-center gap-x-20 mt-9", children: benefits.map(renderStep) }));
   };
   const renderStep = (benefit, i) => {
       const description = benefit?.description || undefined;
@@ -1047,93 +1050,24 @@
                           : null })] }) }));
   });
 
-  const TableRowContainer = JSX(({ children }) => (jsx("div", { className: "self-start flex flex-col", role: "row", children: jsx("div", { className: "flex", children: children }) })));
-
-  const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
-  const BORDER_CLASSES$1 = 'border-main-stroke border-solid border';
-  const DIVIDER_CLASSES$1 = 'border-main-divider border border-t-0 border-x-0';
-  const FIRST_CELL_CLASSES$1 = 'w-[200px] mr-6';
-  const COLS_LENGTH_FOR_SCROLL$1 = 2;
-  const COLUMN_WIDTH$1 = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px
-
-  const carouselContainerClassesMap = {
-      comparison: 'flex gap-4 duration-1000',
-      tariff: 'flex flex-grow duration-1000',
-  };
-  const TableCarouselContainer = JSX(({ children, activeCardIndex, columnWidth, version = 'comparison' }) => (jsx("div", { className: "flex flex-1 overflow-hidden", children: jsx("div", { className: carouselContainerClassesMap[version], style: { transform: `translateX(-${activeCardIndex * columnWidth}px)` }, children: children }) })));
-
-  const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES$1} ${GRADIENT}`, role: "columnheader", scope: "col", children: [icon && !image?.src && (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })), image?.src && jsx(Img, { className: "mb-[18px]", image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "font-medium text-xs py-[11px]", children: link.text }) }) }))] })));
-
-  const ComparisonTableColumnHeaders = JSX(({ colHeaders, activeCardIndex, router, handlerDecorator }) => {
-      return (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES$1, role: "columnheader", scope: "col" }), jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header, link: header.link && useLink({ router, handlerDecorator }, header.link) }, String(i)))) })] }));
-  });
-
-  const TableCell = JSX(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
-      const cellWrapperClasses = `w-80 box-border flex flex-col ${BORDER_CLASSES$1} ${!isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md'} ${isFillGradient ? GRADIENT : ''}`;
-      const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES$1} ${isFillGradient && isFirstRow ? 'border-t' : ''} ${!isLastRow ? 'border-solid' : 'border-b-0'}`;
-      return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { className: cellClasses, children: cell.map((item, i) => renderCellInner$1(item, i, isFillGradient)) }) }));
-  });
-  const labelStyle = (isFillGradient = false) => `text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`;
-  const descriptionStyle = (isFillGradient = false) => `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`;
-  const renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label ? jsx("h4", { className: labelStyle(isFillGradient), children: label }) : null, description ? jsx("div", { className: descriptionStyle(isFillGradient), children: description }) : null] }, String(i)));
-
-  const titleStyle = (isLastRow = false) => `text-sm py-7 ${DIVIDER_CLASSES$1} ${FIRST_CELL_CLASSES$1} ${isLastRow ? 'border-b-0' : 'border-solid'}`;
-  const TableRow = JSX(({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (jsxs(TableRowContainer, { children: [header?.title ? jsx("div", { className: titleStyle(isLastRow), children: header.title }) : null, data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: data.map((cell, i) => (jsx(TableCell, { cell: cell, isFirstRow: isFirstRow, isLastRow: isLastRow, isFillGradient: isColoredFirstColumn && i === 0 }, String(i)))) })) : null] })));
-
-  const TableArrowScrollControl = JSX(({ isScrollAvailable, handleNextClick, handlePrevClick, showNextButton, showPrevButton }) => {
-      return isScrollAvailable ? (jsx("div", { children: renderArrows({
-              handler: [handlePrevClick, handleNextClick],
-              isShown: [showPrevButton, showNextButton],
-              btnClass: ['top-[108px]', 'top-11'],
-              className: 'right-7',
-              isDisabled: true,
-          }) })) : null;
-  });
-
-  const ComparisonTableRows = JSX(({ rowData, activeCardIndex, isColoredFirstColumn, ...tableArrowScrollProps }) => {
-      return (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)))), jsx(TableArrowScrollControl, { ...tableArrowScrollProps })] }));
-  });
-
-  const useTableArrowScrollControl = ({ columnsLength, colsLengthForScroll, activeCardIndex, setActiveCardIndex, }) => {
-      const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-      const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
-      const isScrollAvailable = columnsLength > colsLengthForScroll;
-      const showNextButton = isScrollAvailable && columnsLength - activeCardIndex > colsLengthForScroll;
-      const showPrevButton = Boolean(isScrollAvailable && activeCardIndex > 0);
-      return { handleNextClick, handlePrevClick, isScrollAvailable, showNextButton, showPrevButton };
-  };
-
-  const ComparisonTableBody = JSX(({ context, columns, rowHeaders, isShowAllRow, visibleRowLength, isColoredFirstColumn }) => {
-      const router = context.useRouter();
-      const { handlerDecorator } = context;
-      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 [activeCardIndex, setActiveCardIndex] = context.useState(0);
-      const tableArrowScrollProps = useTableArrowScrollControl({
-          columnsLength: colData.length,
-          colsLengthForScroll: COLS_LENGTH_FOR_SCROLL$1,
-          activeCardIndex,
-          setActiveCardIndex,
-      });
-      const { isScrollAvailable } = tableArrowScrollProps;
-      return (jsxs("div", { children: [jsxs("div", { role: "table", children: [colHeaders?.length ? (jsx(ComparisonTableColumnHeaders, { colHeaders: colHeaders, activeCardIndex: activeCardIndex, router: router, handlerDecorator: handlerDecorator })) : null, rowData?.length ? (jsx(ComparisonTableRows, { rowData: rowData, activeCardIndex: activeCardIndex, isColoredFirstColumn: isColoredFirstColumn, ...tableArrowScrollProps })) : null] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
-  });
+  function getElementsColsValue(className = '') {
+      const colSpan = getColSpan(className);
+      if (colSpan <= 6) {
+          return 'grid-cols-2';
+      }
+      else if (colSpan <= 8) {
+          return 'grid-cols-3';
+      }
+      else {
+          return 'grid-cols-4';
+      }
+  }
 
-  const ComparisonTable = JSX(({ className, context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, anchor = null, }) => {
-      const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
-      const showToggle = () => setIsShowAllRow(!isShowAllRow);
-      return (jsxs("section", { className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, id: anchor, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center mb-9 mx-auto", title: title }), jsx(ComparisonTableBody, { context: context, columns: columns, rowHeaders: rowHeaders, isShowAllRow: isShowAllRow, isColoredFirstColumn: isColoredFirstColumn, visibleRowLength: visibleRowLength }), visibleRowLength
-                  ? renderShowMoreToggleButton({ isShowAllRow, onClick: showToggle })
-                  : null] }));
+  const BonusBenefitsBlock = JSX(({ className = '', title, subtitle, bonusBenefits, anchor = null }) => {
+      return (jsxs("section", { className: `font-sans text-primary-text bg-white p-50 flex flex-col text-center ${className}`, id: anchor, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-[10px]", title: title }) : null, subtitle ? jsx("span", { className: "text-md font-normal", children: subtitle }) : null, bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${getElementsColsValue(className)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] }));
   });
-  const renderShowMoreToggleButton = ({ isShowAllRow, onClick, }) => {
-      return (jsx("div", { className: "pr-[50px]", children: jsxs("div", { className: "flex w-full", children: [jsx("div", { className: FIRST_CELL_CLASSES$1 }), jsx("button", { onClick: onClick, 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 ? 'Показать все параметры' : 'Скрыть' }) })] }) }));
+  const renderBonusBenefit = (bonusBenefit, i) => {
+      return (jsxs("div", { className: "flex flex-col items-center max-w-[292px]", children: [bonusBenefit?.icon ? (jsx(Img, { className: "h-[180px] w-[160px] min-w-[160px] min-h-[160px]", image: bonusBenefit.icon, width: "160", height: "180" })) : null, jsx("div", { children: bonusBenefit?.label ? jsx("span", { className: "title-2xs m-0", children: bonusBenefit.label }) : null })] }, String(i)));
   };
 
   function useCreditCalculatorData(useAsyncData, directoryName) {
@@ -1483,6 +1417,132 @@
                       })) }) }), jsx("div", { className: "w-full h-2 bg-primary-main" })] }));
   }
 
+  const cardStyleMap = {
+      black: 'bg-black',
+      white: 'bg-white',
+  };
+  const CatalogCard = JSX(({ className = '', title, description, image, price, button, colors }) => {
+      return (jsxs("section", { className: `border border-solid box-border p-[30px] min-w-[402px] flex flex-col justify-left ${className}`, role: "listitem", children: [image?.src ? jsx(Img, { className: "mb-5", image: image }) : null, title ? (jsx(Heading, { headingType: "h6", as: "h5", className: "text-left mb-1.5", title: title })) : null, description ? jsx("div", { className: "text-m-md text-left mb-4", children: description }) : null, colors?.length ? (jsxs("div", { className: "flex mb-4 text-m-md text-secondary-text", children: ["\u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0446\u0432\u0435\u0442\u0430: ", colors.map(renderColorOption)] })) : null, price ? jsxs("div", { className: "text-title-sm text-left", children: [price, "\u00A0\u20BD"] }) : null, button?.text ? jsx(Button, { className: "mt-6 w-full", ...button }) : null] }));
+  });
+  const renderColorOption = (color, i) => (jsx("span", { className: `w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}` }, String(i)));
+
+  const BLUR_BLOCK_CLASSES$1 = 'absolute top-0 bottom-0 w-[84px]';
+  const CARD_FULL_VIEW_COUNT$1 = 3;
+  const CARD_SHIFT$1 = 430;
+  const Catalog = JSX(({ context, cards = [], className = '', title, description }) => {
+      const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+      return (jsxs("section", { className: `bg-white relative font-sans p-9 overflow-hidden text-center ${className}`, children: [title ? jsx(Heading, { headingType: "h2", className: "mb-6", title: title }) : null, description ? jsx(Description, { className: "mb-6", description: description }) : null, jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT$1}px)` }, role: "list", children: cards?.length ? cards.map(renderCatalogCard(context)) : null }), renderNavButtons$1({
+                  cardsCount: cards.length,
+                  activeCardIndex,
+                  setActiveCardIndex,
+              }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} left-0 ${'bg-opacity-from-white'}` }), jsx("div", { className: `${BLUR_BLOCK_CLASSES$1} right-0 ${'bg-opacity-to-white'}` })] }));
+  });
+  const renderCatalogCard = (context) => (card, i) => {
+      return jsx(CatalogCard, { context: context, ...card }, String(i));
+  };
+  const renderNavButtons$1 = ({ cardsCount, activeCardIndex, setActiveCardIndex, }) => {
+      const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+      const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+      const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT$1;
+      const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT$1;
+      const showPrevButton = isUseSlider && activeCardIndex > 0;
+      return renderArrows({
+          handler: [handlePrevClick, handleNextClick],
+          isShown: [showPrevButton, showNextButton],
+          btnClass: ['left-8', 'right-8'],
+          className: 'top-1/2 z-10 mt-6',
+      });
+  };
+
+  const TableRowContainer = JSX(({ children }) => (jsx("div", { className: "self-start flex flex-col", role: "row", children: jsx("div", { className: "flex", children: children }) })));
+
+  const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
+  const BORDER_CLASSES$1 = 'border-main-stroke border-solid border';
+  const DIVIDER_CLASSES$1 = 'border-main-divider border border-t-0 border-x-0';
+  const FIRST_CELL_CLASSES$1 = 'w-[200px] mr-6';
+  const COLS_LENGTH_FOR_SCROLL$1 = 2;
+  const COLUMN_WIDTH$1 = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px
+
+  const carouselContainerClassesMap = {
+      comparison: 'flex gap-4 duration-1000',
+      tariff: 'flex flex-grow duration-1000',
+  };
+  const TableCarouselContainer = JSX(({ children, activeCardIndex, columnWidth, version = 'comparison' }) => (jsx("div", { className: "flex flex-1 overflow-hidden", children: jsx("div", { className: carouselContainerClassesMap[version], style: { transform: `translateX(-${activeCardIndex * columnWidth}px)` }, children: children }) })));
+
+  const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES$1} ${GRADIENT}`, role: "columnheader", scope: "col", children: [icon && !image?.src && (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })), image?.src && jsx(Img, { className: "mb-[18px]", image: image }), title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "text-center text-white", title: title })) : null, link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "font-medium text-xs py-[11px]", children: link.text }) }) }))] })));
+
+  const ComparisonTableColumnHeaders = JSX(({ colHeaders, activeCardIndex, router, handlerDecorator }) => {
+      return (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES$1, role: "columnheader", scope: "col" }), jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header, link: header.link && useLink({ router, handlerDecorator }, header.link) }, String(i)))) })] }));
+  });
+
+  const TableCell = JSX(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
+      const cellWrapperClasses = `w-80 box-border flex flex-col ${BORDER_CLASSES$1} ${!isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md'} ${isFillGradient ? GRADIENT : ''}`;
+      const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES$1} ${isFillGradient && isFirstRow ? 'border-t' : ''} ${!isLastRow ? 'border-solid' : 'border-b-0'}`;
+      return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { className: cellClasses, children: cell.map((item, i) => renderCellInner$1(item, i, isFillGradient)) }) }));
+  });
+  const labelStyle = (isFillGradient = false) => `text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`;
+  const descriptionStyle = (isFillGradient = false) => `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`;
+  const renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label ? jsx("h4", { className: labelStyle(isFillGradient), children: label }) : null, description ? jsx("div", { className: descriptionStyle(isFillGradient), children: description }) : null] }, String(i)));
+
+  const titleStyle = (isLastRow = false) => `text-sm py-7 ${DIVIDER_CLASSES$1} ${FIRST_CELL_CLASSES$1} ${isLastRow ? 'border-b-0' : 'border-solid'}`;
+  const TableRow = JSX(({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (jsxs(TableRowContainer, { children: [header?.title ? jsx("div", { className: titleStyle(isLastRow), children: header.title }) : null, data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: data.map((cell, i) => (jsx(TableCell, { cell: cell, isFirstRow: isFirstRow, isLastRow: isLastRow, isFillGradient: isColoredFirstColumn && i === 0 }, String(i)))) })) : null] })));
+
+  const TableArrowScrollControl = JSX(({ isScrollAvailable, handleNextClick, handlePrevClick, showNextButton, showPrevButton }) => {
+      return isScrollAvailable ? (jsx("div", { children: renderArrows({
+              handler: [handlePrevClick, handleNextClick],
+              isShown: [showPrevButton, showNextButton],
+              btnClass: ['top-[108px]', 'top-11'],
+              className: 'right-7',
+              isDisabled: true,
+          }) })) : null;
+  });
+
+  const ComparisonTableRows = JSX(({ rowData, activeCardIndex, isColoredFirstColumn, ...tableArrowScrollProps }) => {
+      return (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)))), jsx(TableArrowScrollControl, { ...tableArrowScrollProps })] }));
+  });
+
+  const useTableArrowScrollControl = ({ columnsLength, colsLengthForScroll, activeCardIndex, setActiveCardIndex, }) => {
+      const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+      const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+      const isScrollAvailable = columnsLength > colsLengthForScroll;
+      const showNextButton = isScrollAvailable && columnsLength - activeCardIndex > colsLengthForScroll;
+      const showPrevButton = Boolean(isScrollAvailable && activeCardIndex > 0);
+      return { handleNextClick, handlePrevClick, isScrollAvailable, showNextButton, showPrevButton };
+  };
+
+  const ComparisonTableBody = JSX(({ context, columns, rowHeaders, isShowAllRow, visibleRowLength, isColoredFirstColumn }) => {
+      const router = context.useRouter();
+      const { handlerDecorator } = context;
+      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 [activeCardIndex, setActiveCardIndex] = context.useState(0);
+      const tableArrowScrollProps = useTableArrowScrollControl({
+          columnsLength: colData.length,
+          colsLengthForScroll: COLS_LENGTH_FOR_SCROLL$1,
+          activeCardIndex,
+          setActiveCardIndex,
+      });
+      const { isScrollAvailable } = tableArrowScrollProps;
+      return (jsxs("div", { children: [jsxs("div", { role: "table", children: [colHeaders?.length ? (jsx(ComparisonTableColumnHeaders, { colHeaders: colHeaders, activeCardIndex: activeCardIndex, router: router, handlerDecorator: handlerDecorator })) : null, rowData?.length ? (jsx(ComparisonTableRows, { rowData: rowData, activeCardIndex: activeCardIndex, isColoredFirstColumn: isColoredFirstColumn, ...tableArrowScrollProps })) : null] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
+  });
+
+  const ComparisonTable = JSX(({ className, context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, anchor = null, }) => {
+      const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
+      const showToggle = () => setIsShowAllRow(!isShowAllRow);
+      return (jsxs("section", { className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, id: anchor, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center mb-9 mx-auto", title: title }), jsx(ComparisonTableBody, { context: context, columns: columns, rowHeaders: rowHeaders, isShowAllRow: isShowAllRow, isColoredFirstColumn: isColoredFirstColumn, visibleRowLength: visibleRowLength }), visibleRowLength
+                  ? renderShowMoreToggleButton({ isShowAllRow, onClick: showToggle })
+                  : null] }));
+  });
+  const renderShowMoreToggleButton = ({ isShowAllRow, onClick, }) => {
+      return (jsx("div", { className: "pr-[50px]", children: jsxs("div", { className: "flex w-full", children: [jsx("div", { className: FIRST_CELL_CLASSES$1 }), jsx("button", { onClick: onClick, 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 ? 'Показать все параметры' : 'Скрыть' }) })] }) }));
+  };
+
   function useExchangeRates(useAsyncData) {
       const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchExchangeRates);
       const result = data?.hits?.hits?.map((_) => _._source) || [];
@@ -1888,6 +1948,54 @@
   const renderMonthNames = (item, colSize) => item.month.map((_) => (jsx("div", { style: { flexBasis: `${colSize}%` }, children: _.name }, `monthName-${_.name}`)));
   const renderMonthImages = (item) => item.month.map((_) => _.image?.src ? (jsx("div", { className: "h-[207px] border-r-[1px] pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0", children: jsx(Img, { image: _.image, className: "flex" }) }, `monthImage-${_.image.src}`)) : null);
 
+  const GroupBlockTabs = JSX((props) => {
+      const { tabs, currentTag, onTabClick, className = '', isShowCounter } = props;
+      return (jsx("div", { className: `mb-2 box-border flex gap-x-1 ${className}`, role: "tablist", children: tabs?.map(renderTab$1(onTabClick, isShowCounter, currentTag)) }));
+  });
+  const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-m-sm';
+  const renderTab$1 = (onTabClick, isShowCounter, currentTag) => (tab, i) => {
+      const isActive = currentTag === tab.tag;
+      const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
+      const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
+      const counterBlockStyle = `${badgeStyle} 
+      ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-light text-secondary-text'}`;
+      return (jsx("div", { className: `flex h-full w-full h-12 flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`, role: "tab", onClick: () => onTabClick(tab.tag), "aria-selected": String(isActive), tag: tab?.tag, children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? jsx("h3", { className: tabText, children: tab?.title }) : null, isShowCounter ? (jsx("div", { className: `flex items-center justify-center ml-8 ${counterBlockStyle}`, children: jsx("span", { children: tab.count }) })) : null] }) }, String(i)));
+  };
+
+  const EmbeddableGroupBlocks = {
+      ProductBlock,
+      ProductTile,
+  };
+
+  const GroupBlocksItem = JSX(({ groupBlocks, context }) => {
+      return (jsx("div", { className: "grid grid-cols-12 gap-2 box-border", children: groupBlocks?.length ? groupBlocks.map(renderBlock$1(context)) : null }));
+  });
+  const renderBlock$1 = (context) => (block, i) => {
+      const type = block?.blockType;
+      if (!type || !(type in EmbeddableGroupBlocks)) {
+          return null;
+      }
+      const classNameBlock = style2className(block?.style);
+      const EmbeddedBlock = EmbeddableGroupBlocks[type];
+      return (jsx(EmbeddedBlock, { context: context, ...block, className: classNameBlock }, `block_${i}`));
+  };
+
+  const filterBlocksByTag = (blocks, tag) => {
+      return tag ? blocks.filter((block) => block?.tags?.includes(tag)) : blocks;
+  };
+
+  const GroupBlock = JSX(({ className = '', tabs, context, anchor = null, groupBlocks = [], isShowCounter }) => {
+      const [currentTag, setCurrentTag] = context.useState(tabs?.[0]?.tag);
+      const filteredBlocks = filterBlocksByTag(groupBlocks, currentTag);
+      const tabsNewMap = tabs?.map((tab) => {
+          const count = tab.tag
+              ? groupBlocks.filter((block) => block?.tags?.includes(tab.tag)).length
+              : groupBlocks.length;
+          return { ...tab, count };
+      });
+      return (jsxs("section", { id: anchor, className: `box-border gap-1 ${className}`, children: [tabsNewMap?.length ? (jsx(GroupBlockTabs, { currentTag: currentTag, onTabClick: setCurrentTag, tabs: tabsNewMap, isShowCounter: isShowCounter })) : null, groupBlocks.length ? (jsx(GroupBlocksItem, { context: context, groupBlocks: filteredBlocks })) : null] }));
+  });
+
   const checkIsHrefSameOrigin = (href, router) => getOrigin(href) === getOrigin(router.href);
 
   const isHrefActive = (href, router, cmp = (targetHref, baseHref) => baseHref.startsWith(targetHref)) => {
@@ -2015,12 +2123,15 @@
   });
 
   const Insurance = JSX(({ className = '', title, description, image, benefits, sum, monthLimit }) => {
-      return (jsxs("section", { className: `px-[100px] py-[50px] bg-white text-primary-text ${className}`, children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "text-center" }) : null, description ? jsx("div", { className: "text-center text-md mt-3", children: description }) : null, jsx("div", { children: jsxs("div", { className: "mt-5 mx-auto flex justify-center gap-[120px] mt-[30px]", children: [image?.src ? jsx(Img, { image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit) })) : null, jsxs("div", { className: "bg-secondary-light h-15 flex mt-7 gap-6 px-5 py-4", children: [sum ? renderValueBlock$1('Страховая сумма:', sum, Boolean(monthLimit)) : null, monthLimit
-                                              ? renderValueBlock$1('Ежемесячный лимит:', monthLimit, Boolean(sum))
-                                              : null] })] })] }) })] }));
+      return (jsxs("section", { className: `px-[100px] py-[50px] bg-white text-primary-text font-sans ${className}`, children: [title ? jsx(Heading, { headingType: "h3", title: title, className: "text-center" }) : null, description ? jsx("div", { className: "text-center text-md mt-3", children: description }) : null, jsx("div", { children: jsxs("div", { className: "mt-5 mx-auto flex justify-center gap-[122px] mt-[30px]", children: [image?.src ? jsx(Img, { image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] }) })] }));
   });
   function renderBenefit(benefit, i) {
-      return (jsxs("div", { className: "flex items-center gap-5", children: [benefit?.icon ? (jsx(Img, { className: "w-[50px] h-[50px] min-w-[50px] p-3 rounded-full bg-secondary-light", image: benefit.icon, width: "24", height: "24", asSVG: true })) : null, jsxs("div", { children: [benefit?.label ? jsx("div", { className: "text-title-2xs", children: benefit.label }) : null, benefit?.description ? (jsx("div", { className: "mt-2 font-light text-secondary-text", children: benefit.description })) : null] })] }, String(i)));
+      return (jsxs("div", { className: "flex items-center gap-4", children: [benefit?.icon ? (jsx(Img, { className: "w-12 h-12 min-w-12 p-3 rounded-full bg-secondary-light", image: benefit.icon, asSVG: true })) : null, jsxs("div", { children: [benefit?.label ? jsx("div", { className: "text-title-2xs font-normal", children: benefit.label }) : null, benefit?.description ? (jsx("div", { className: "mt-0.5 font-light text-secondary-text font-light", children: benefit.description })) : null] })] }, String(i)));
+  }
+  function renderInsuranceSumMonth(sum, monthLimit) {
+      return sum || monthLimit ? (jsxs("div", { className: "bg-secondary-light h-15 flex mt-7 gap-6 px-5 py-4", children: [Number.isFinite(sum) ? renderValueBlock$1('Страховая сумма:', sum, Boolean(monthLimit)) : null, Number.isFinite(monthLimit)
+                  ? renderValueBlock$1('Ежемесячный лимит:', monthLimit, Boolean(sum))
+                  : null] })) : null;
   }
   function renderValueBlock$1(title, sum, isAnotherBlock) {
       const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
@@ -2032,12 +2143,12 @@
       const [tabsShift, setTabsShift] = context.useState(0);
       const handleNextClick = () => setTabsShift(tabsShift + 1);
       const handlePrevClick = () => setTabsShift(tabsShift - 1);
-      const galleryLength = cards?.length;
+      const galleryLength = cards?.length ?? 0;
       const isGalleryScrollAvailable = cards?.length > 2;
       const showNextButton = isGalleryScrollAvailable && galleryLength > tabsShift + 2;
       const isLastShift = galleryLength === tabsShift + 2;
       const showPrevButton = tabsShift > 0;
-      return (jsx("section", { id: anchor, className: `min-w-full ${className}`, children: jsxs("div", { className: "relative mt-7 overflow-hidden", children: [galleryLength > 1
+      return (jsx("section", { id: anchor, className: `min-w-full ${className}`, children: jsxs("div", { className: "relative mt-7 overflow-hidden", children: [galleryLength
                       ? renderGallery({
                           tabsShift,
                           cards,
@@ -2076,7 +2187,6 @@
   }
 
   const InsuranceAmountBlock = JSX(({ className = '', context, title, insuranceTabs = [], button, anchor = null }) => {
-      const insuranceGalleries = insuranceTabs.map((_) => _.cards);
       const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
       return (jsxs("section", { id: anchor, className: `box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white ${className}`, children: [title ? jsx(Heading, { className: "text-center", title: title, headingType: "h3" }) : null, jsx("div", { className: "p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]", children: insuranceTabs.map((item, i) => renderNavButton$1({
                       title: item?.title,
@@ -2086,10 +2196,11 @@
                   })) }), jsx("div", { className: "flex", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: renderInsuranceGalleries({
                       context,
                       className,
-                      insuranceGalleries,
+                      insuranceTabs,
                   }) }), button?.text ? (jsx("div", { className: "flex justify-center", children: jsx(Button, { className: "box-border p-4 h-14 w-full max-w-[240px]", version: button?.version || 'primary', href: button.href, children: button.text }) })) : null] }));
   });
-  const renderInsuranceGalleries = ({ insuranceGalleries, context, className }) => {
+  const renderInsuranceGalleries = ({ insuranceTabs, context, className = '', }) => {
+      const insuranceGalleries = insuranceTabs?.map((_) => _.cards);
       return insuranceGalleries?.length
           ? insuranceGalleries.map((cards) => (jsx(InsuranceAmountBlockInner, { context: context, className: className, cards: cards })))
           : null;
@@ -2102,9 +2213,21 @@
       return (jsx("button", { type: "button", onClick: onClick, "aria-label": title, className: `box-border px-4 py-3 text-m-md ${btnClassName}`, children: title }, String(i)));
   }
 
-  const MobileAppTile = JSX(({ className = '', context, title = 'Мобильное приложение', qr, buttons = [], anchor = null, }) => {
-      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className}  ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: jsx(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px] mb-[30px]` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-[30px] gap-4" })) : null, children: jsxs("div", { className: "flex items-center", children: [qr?.src && qr?.href && (jsx("a", { href: qr.href, target: "_blank", "aria-label": title, children: jsx("img", { src: qr.src, alt: title, title: title, width: "164", height: "164", className: "w-[92px] h-[92px] min-w-[92px] min-h-[92px] bg-secondary-light" }) })), jsx("span", { className: "font-light text-secondary-text ml-4", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }) }) }));
+  const mobileAppStyleMap = {
+      primary: 'bg-white text-primary-text',
+      secondary: 'bg-primary-main text-white',
+  };
+  const MobileAppTile = JSX(({ className = '', context, title = 'Мобильное приложение', qr, buttons, anchor = null, version = 'primary', items, image, }) => {
+      const textColorClass = version === 'primary' ? 'text-primary-text' : '';
+      return (jsxs("section", { className: `flex justify-between font-sans p-9 box-border relative
+        ${getTileRightPadding(className)} ${getTileMinHeight(className)}
+        ${mobileAppStyleMap[version]}
+        ${className}`, id: anchor, children: [jsx(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: "h3", title: title, className: `whitespace-pre-wrap max-w-[509px] mb-6
+                  ${textColorClass}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-[30px] gap-4" })) : null, children: jsxs("div", { className: "flex flex-1 items-center", children: [qr?.src && qr?.href && (jsx("a", { href: qr.href, target: "_blank", "aria-label": title, children: jsx("img", { src: qr.src, alt: title, title: title, width: "122", height: "122", className: "w-[122px] h-[122px] min-w-[122px] min-h-[122px] bg-secondary-light mr-[23px] rounded-md" }) })), renderList$1(version, items)] }) }), image?.src ? (jsx("div", { className: "absolute right-0 bottom-0", children: jsx(Img, { image: image }) })) : null] }));
   });
+  const renderList$1 = (version, items) => {
+      return items?.length ? (jsx(List, { items: items, itemClassName: "base font-light mb-2 last:mb-0", version: version === 'primary' ? 'tile' : 'tile-white' })) : (jsx("span", { className: "font-light text-secondary-text ml-4", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }));
+  };
 
   const NavigationItem = JSX(({ className, text, onClick, href, target, isActive }) => (jsx("a", { className: `bg-inherit no-underline px-4 py-2.5 cursor-pointer rounded text-sm border border-solid hover:text-primary-main ${className || ''} ${isActive ? 'border-primary-main text-primary-main' : 'border-white text-secondary-text'}`, onClick: onClick, href: href, target: target, children: text })));
 
@@ -2131,9 +2254,9 @@
 
   const NavigatorTabs = JSX(({ className = '', navigatorTabs, context, anchor = null }) => {
       const href = globalThis.location?.href; // TODO: remove globalThis, use href from router
-      return (jsx("section", { className: `sticky top-0 z-20 box-border flex gap-x-1 h-14 ${className}`, id: anchor, children: navigatorTabs ? navigatorTabs.map(renderTab$1(context, href)) : null }));
+      return (jsx("section", { className: `sticky top-0 z-20 box-border flex gap-x-1 h-14 ${className}`, id: anchor, children: navigatorTabs ? navigatorTabs.map(renderTab(context, href)) : null }));
   });
-  const renderTab$1 = (context, href) => (tab, i) => {
+  const renderTab = (context, href) => (tab, i) => {
       const { useRouter, handlerDecorator } = context;
       const router = useRouter();
       const hash = getHash(href);
@@ -2160,36 +2283,34 @@
       return { icon, handleToggle, isActive };
   };
 
-  const Foldable = JSX(({ blocks = [], context, hiddenBlocksNum = 0, foldButtonClasses, foldButtonLabel, foldButtonDataTheme, isUnfolded, render = (_) => _, }) => {
+  const Foldable = JSX(({ blocks = [], context, hiddenBlocksNum = 0, foldButtonClasses, foldButtonLabel, foldButtonDataTheme, isUnfolded, containerClasses, render = (_) => _, }) => {
       const blocksToHide = clamp(hiddenBlocksNum, 0, blocks.length);
       const { icon, handleToggle, isActive } = useActiveHandler({
           context,
           initialState: isUnfolded,
       });
-      return blocks ? (jsxs("div", { children: [renderBlocks(blocks, render, { blocksToHide, isActive }), hiddenBlocksNum ? (jsxs("button", { className: foldButtonClasses ||
-                      'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer', "data-theme": foldButtonDataTheme, onClick: handleToggle, children: [jsx("span", { className: "pr-3", children: isActive ? 'Скрыть' : foldButtonLabel }), jsx(Icon, { name: icon, iconVersion: "white", width: "20", height: "20", asSVG: true })] })) : null] })) : null;
+      return blocks ? (jsxs("div", { children: [renderBlocks(blocks, render, { blocksToHide, isActive, containerClasses }), hiddenBlocksNum ? (jsxs("button", { className: foldButtonClasses ||
+                      'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer', "data-theme": foldButtonDataTheme, onClick: handleToggle, children: [jsx("span", { className: "pr-3", children: isActive ? 'Скрыть' : foldButtonLabel }), icon && jsx(Icon, { name: icon, iconVersion: "white", width: "20", height: "20", asSVG: true })] })) : null] })) : null;
   });
-  const renderBlocks = (blocks, render, { blocksToHide, isActive }) => {
+  const renderBlocks = (blocks, render, { blocksToHide, isActive, containerClasses }) => {
       const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
       const hiddenBlocks = blocks.slice(-blocksToHide);
-      return render(jsxs("div", { children: [visibleBlocks, jsx("div", { className: foldableBlockClassNames, children: hiddenBlocks })] }), isActive);
+      return render(jsxs("div", { children: [visibleBlocks, jsx("div", { className: `${foldableBlockClassNames} ${containerClasses}`, children: hiddenBlocks })] }), isActive);
   };
 
-  const OtherProductsItem = JSX(({ label, blocks, columns = 1, context, dataTheme, isUnfolded }) => {
+  const OtherProductsItem = JSX(({ label, blocks, context, dataTheme, isUnfolded }) => {
       const foldableBlocks = renderBlocksList({
           context,
-          className: 'box-border p-5',
-          columns,
           blocks,
       });
-      return (jsx("div", { className: "border-0 border-b border-solid border-main-divider", children: blocks?.length ? (jsx(Foldable, { foldButtonDataTheme: dataTheme, hiddenBlocksNum: blocks?.length, blocks: foldableBlocks, isUnfolded: isUnfolded, context: context, foldButtonLabel: label, render: (children, isActive) => (jsx(Wrapper$1, { columns: columns, isActive: isActive, children: children })) })) : null }));
+      return (jsx("div", { className: "border-0 border-b border-solid border-main-divider", children: blocks?.length ? (jsx(Foldable, { foldButtonDataTheme: dataTheme, hiddenBlocksNum: blocks?.length, blocks: foldableBlocks, isUnfolded: isUnfolded, context: context, foldButtonLabel: label, containerClasses: "grid grid-cols-12 gap-1 border-box", render: (children, isActive) => jsx(Wrapper$1, { isActive: isActive, children: children }) })) : null }));
   });
-  const Wrapper$1 = JSX(({ columns, children, isActive }) => {
-      return (jsx("div", { className: `box-border w-full ${isActive ? 'p-9' : ''} ${columns > 1 ? 'flex flex-wrap' : ''}`, children: children }));
+  const Wrapper$1 = JSX(({ children }) => {
+      return jsx("div", { className: "box-border", children: children });
   });
 
   const OtherProducts = JSX(({ blockItems, colorPalette, context, className = '' }) => {
-      return (jsx("section", { className: `font-sans bg-white text-primary-text ${className}`, children: blockItems?.length ? (jsx("div", { className: "list-none m-0 p-0", children: blockItems.map((item, i) => (jsx(OtherProductsItem, { ...item, dataTheme: colorPalette, context: context }, `BlockItem${i}`))) })) : null }));
+      return (jsx("section", { className: `font-sans text-primary-text ${className}`, children: blockItems?.length ? (jsx("div", { className: "box-border1", children: blockItems.map((item, i) => (jsx(OtherProductsItem, { ...item, dataTheme: colorPalette, context: context }, `BlockItem${i}`))) })) : null }));
   });
 
   const GOLDEN_RATIO = 1.618;
@@ -2303,20 +2424,41 @@
           }) }));
   };
 
-  const StepsBlock = JSX(({ className = '', title, showLines = true, steps = [], button, anchor = null }) => {
+  const STEPS_BLOCK_STYLE_MAPS = {
+      primary: {
+          background: 'bg-white',
+          title: 'text-primary-text',
+          description: 'text-secondary-text',
+          iconBackground: 'bg-secondary-light',
+          iconConnector: 'bg-secondary-light',
+      },
+      secondary: {
+          background: 'bg-primary-main',
+          title: 'text-white',
+          description: 'text-white/80',
+          iconBackground: 'bg-white/30',
+          iconConnector: 'bg-white',
+      },
+  };
+  const getStyleMap = (version) => STEPS_BLOCK_STYLE_MAPS[version];
+
+  const StepsBlock = JSX(({ className = '', title, showLines = true, steps = [], button, anchor = null, version = 'primary', }) => {
+      const styleMap = getStyleMap(version);
       const shortGaps = steps.length > 3;
       return (jsxs("section", { className: [
               'box-border font-sans text-primary-text bg-white',
               shortGaps ? 'px-20' : 'px-[70px]',
               'py-[50px] flex flex-col items-center',
+              styleMap.background,
+              styleMap.title,
               className,
-          ].join(' '), id: anchor, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center", title: title }), steps?.length ? (jsxs("div", { className: `box-border ${title ? 'mt-9' : ''}`, children: [jsx("div", { className: "flex items-center px-[88px]", children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}` }))(steps.map(renderStepIcon)) }), jsx("div", { className: `flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map((step, i) => renderStepTitle(step, i, Boolean(button?.text))) })] })) : null, button?.text ? (jsx(Button, { className: "box-border mt-8 py-3 h-12 w-full max-w-[240px]", version: "primary", href: "#", children: button.text })) : null] }));
+          ].join(' '), id: anchor, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center", title: title }), steps?.length ? (jsxs("div", { className: `box-border ${title ? 'mt-9' : ''}`, children: [jsx("div", { className: "flex items-center px-[88px]", children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}` }))(steps.map(renderStepIcon(styleMap))) }), jsx("div", { className: `flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepTitle(styleMap, Boolean(button?.text))) })] })) : null, button?.text ? (jsx(Button, { className: "box-border mt-8 py-3 h-12 w-full max-w-[240px]", version: "primary", href: "#", children: button.text })) : 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?.icon && jsx(Img, { image: step.icon, width: "48", height: "48" })) || (jsx("span", { className: "font-normal text-title-sm text-secondary-text", children: i + 1 })) }) }, String(i)));
+  const renderStepIcon = (styleMap) => (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] rounded-full p-[26px] box-border z-10 ${styleMap.iconBackground}`, children: (step.icon?.icon && jsx(Img, { image: step.icon, width: "48", height: "48" })) || (jsx("span", { className: `font-normal text-title-sm ${styleMap.title}`, children: i + 1 })) }) }, String(i)));
   };
-  const renderStepTitle = (step, i, isMainButton) => {
-      return (jsxs("div", { className: "flex flex-col items-center justify-between text-center relative w-[276px] whitespace-pre-line overflow-hidden", children: [jsxs("div", { children: [step.label && jsx("div", { className: "font-normal text-xl m-0 mt-4", children: step.label }), step.description && (jsx("div", { className: `font-light text-base text-secondary-text ${step.label ? 'mt-2' : 'mt-4'}`, children: step.description }))] }), step?.button?.text && !isMainButton ? (jsx(Button, { className: "box-border mt-8 py-3 h-12 w-full max-w-[240px]", version: "primary", href: step.button?.href, children: step.button.text })) : null] }, String(i)));
+  const renderStepTitle = (styleMap, isMainButton) => (step, i) => {
+      return (jsxs("div", { className: "flex flex-col items-center justify-between text-center relative w-[276px] whitespace-pre-line overflow-hidden", children: [jsxs("div", { children: [step.label ? jsx("div", { className: "font-normal text-xl m-0 mt-4", children: step.label }) : null, step.description ? (jsx("div", { className: `font-light text-base ${styleMap.description} ${step.label ? 'mt-2' : 'mt-4'}`, children: step.description })) : null] }), step?.button?.text && !isMainButton ? (jsx(Button, { className: "box-border mt-8 py-3 h-12 w-full max-w-[240px]", version: "primary", href: step.button?.href, children: step.button.text })) : null] }, String(i)));
   };
 
   const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
@@ -2361,84 +2503,13 @@
       return (jsxs("div", { role: "table", children: [jsxs("div", { className: "relative", children: [children, jsx(TableArrowScrollControl, { ...tableArrowScrollControlProps })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
   });
 
-  const GroupBlockTabs = JSX((props) => {
-      const { tabs, currentTag, onTabClick, className = '', isShowCounter } = props;
-      return (jsx("div", { className: `mb-2 box-border flex gap-x-1 ${className}`, role: "tablist", children: tabs?.map(renderTab(onTabClick, isShowCounter, currentTag)) }));
-  });
-  const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-m-sm';
-  const renderTab = (onTabClick, isShowCounter, currentTag) => (tab, i) => {
-      const isActive = currentTag === tab.tag;
-      const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
-      const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
-      const counterBlockStyle = `${badgeStyle} 
-      ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-light text-secondary-text'}`;
-      return (jsx("div", { className: `flex h-full w-full h-12 flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`, role: "tab", onClick: () => onTabClick(tab.tag), "aria-selected": String(isActive), tag: tab?.tag, children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? jsx("h3", { className: tabText, children: tab?.title }) : null, isShowCounter ? (jsx("div", { className: `flex items-center justify-center ml-8 ${counterBlockStyle}`, children: jsx("span", { children: tab.count }) })) : null] }) }, String(i)));
-  };
-
-  function style2className(style) {
-      return style ? style.filter(Boolean).join(' ') : '';
-  }
-
-  const EmbeddableGroupBlocks = {
-      ProductBlock,
-      ProductTile,
-  };
-
-  const GroupBlocksItem = JSX(({ groupBlocks, context }) => {
-      return (jsx("div", { className: "grid grid-cols-12 gap-2 box-border", children: groupBlocks?.length ? groupBlocks.map(renderBlock$1(context)) : null }));
-  });
-  const renderBlock$1 = (context) => (block, i) => {
-      const type = block?.blockType;
-      if (!type || !(type in EmbeddableGroupBlocks)) {
-          return null;
-      }
-      const classNameBlock = style2className(block?.style);
-      const EmbeddedBlock = EmbeddableGroupBlocks[type];
-      return (jsx(EmbeddedBlock, { context: context, ...block, className: classNameBlock }, `block_${i}`));
-  };
-
-  const filterBlocksByTag = (blocks, tag) => {
-      return tag ? blocks.filter((block) => block?.tags?.includes(tag)) : blocks;
-  };
-
-  const GroupBlock = JSX(({ className = '', tabs, context, anchor = null, groupBlocks = [], isShowCounter }) => {
-      const [currentTag, setCurrentTag] = context.useState(tabs?.[0]?.tag);
-      const filteredBlocks = filterBlocksByTag(groupBlocks, currentTag);
-      const tabsNewMap = tabs?.map((tab) => {
-          const count = tab.tag
-              ? groupBlocks.filter((block) => block?.tags?.includes(tab.tag)).length
-              : groupBlocks.length;
-          return { ...tab, count };
-      });
-      return (jsxs("section", { id: anchor, className: `box-border gap-1 ${className}`, children: [tabsNewMap?.length ? (jsx(GroupBlockTabs, { currentTag: currentTag, onTabClick: setCurrentTag, tabs: tabsNewMap, isShowCounter: isShowCounter })) : null, groupBlocks.length ? (jsx(GroupBlocksItem, { context: context, groupBlocks: filteredBlocks })) : null] }));
-  });
-
-  function getElementsColsValue(className = '') {
-      const colSpan = getColSpan(className);
-      if (colSpan <= 6) {
-          return 'grid-cols-2';
-      }
-      else if (colSpan <= 8) {
-          return 'grid-cols-3';
-      }
-      else {
-          return 'grid-cols-4';
-      }
-  }
-
-  const BonusBenefitsBlock = JSX(({ className = '', title, subtitle, bonusBenefits, anchor = null }) => {
-      return (jsxs("section", { className: `font-sans text-primary-text bg-white p-50 flex flex-col text-center ${className}`, id: anchor, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-[10px]", title: title }) : null, subtitle ? jsx("span", { className: "text-md font-normal", children: subtitle }) : null, bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${getElementsColsValue(className)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] }));
-  });
-  const renderBonusBenefit = (bonusBenefit, i) => {
-      return (jsxs("div", { className: "flex flex-col items-center max-w-[292px]", children: [bonusBenefit?.icon ? (jsx(Img, { className: "h-[180px] w-[160px] min-w-[160px] min-h-[160px]", image: bonusBenefit.icon, width: "160", height: "180" })) : null, jsx("div", { children: bonusBenefit?.label ? jsx("span", { className: "title-2xs m-0", children: bonusBenefit.label }) : null })] }, String(i)));
-  };
-
   const Blocks = {
       Accordion,
       BenefitsBlock,
       Bonus,
       ComparisonTable,
       Calculator,
+      Catalog,
       ExchangeRateTile,
       Footer,
       Gallery,