@redneckz/wildless-cms-uni-blocks 0.3.62 → 0.3.64

package/bundle/bundle.umd.js

@@ -208,6 +208,7 @@
   var IconMap;
   (function (IconMap) {
       IconMap["ActualBalanceIcon"] = "ActualBalanceIcon";
+      IconMap["AirPlane"] = "AirPlane";
       IconMap["AppleIcon"] = "AppleIcon";
       IconMap["ArrowDownIcon"] = "ArrowDownIcon";
       IconMap["ArrowLeftIcon"] = "ArrowLeftIcon";
@@ -226,7 +227,9 @@
       IconMap["CardPosIcon"] = "CardPosIcon";
       IconMap["CardTickIcon"] = "CardTickIcon";
       IconMap["CardWithGemIcon"] = "CardWithGemIcon";
+      IconMap["CarIcon"] = "CarIcon";
       IconMap["ChartSquareIcon"] = "ChartSquareIcon";
+      IconMap["CinemaIcon"] = "CinemaIcon";
       IconMap["ClockIcon"] = "ClockIcon";
       IconMap["CloseIcon"] = "CloseIcon";
       IconMap["ComfortableCompIcon"] = "ComfortableCompIcon";
@@ -234,6 +237,7 @@
       IconMap["DiscountShapeIcon"] = "DiscountShapeIcon";
       IconMap["DocIcon"] = "DocIcon";
       IconMap["DocIconMonoColor"] = "DocIconMonoColor";
+      IconMap["DocsIcon"] = "DocsIcon";
       IconMap["DocumentTextIcon"] = "DocumentTextIcon";
       IconMap["DollarIcon"] = "DollarIcon";
       IconMap["EarthIcon"] = "EarthIcon";
@@ -267,13 +271,16 @@
       IconMap["PersonalCardIcon"] = "PersonalCardIcon";
       IconMap["PlayMarketIcon"] = "PlayMarketIcon";
       IconMap["PlusIcon"] = "PlusIcon";
+      IconMap["PowerIcon"] = "PowerIcon";
       IconMap["Profile2UserIcon"] = "Profile2UserIcon";
       IconMap["ProfileIcon"] = "ProfileIcon";
+      IconMap["PumpkinIcon"] = "PumpkinIcon";
       IconMap["RoundRubleIcon"] = "RoundRubleIcon";
       IconMap["SafeIcon"] = "SafeIcon";
       IconMap["ShieldTickIcon"] = "ShieldTickIcon";
       IconMap["SignDocsIcon"] = "SignDocsIcon";
       IconMap["SmallClockIcon"] = "SmallClockIcon";
+      IconMap["SoundIcon"] = "SoundIcon";
       IconMap["TelegramIcon"] = "TelegramIcon";
       IconMap["UnionPayIcon"] = "UnionPayIcon";
       IconMap["UserTickIcon"] = "UserTickIcon";
@@ -283,15 +290,17 @@
       IconMap["WalletAddIcon"] = "WalletAddIcon";
       IconMap["WalletIcon"] = "WalletIcon";
       IconMap["WalletWithMoneyIcon"] = "WalletWithMoneyIcon";
+      IconMap["WateringCan"] = "WateringCan";
   })(IconMap || (IconMap = {}));
   var IconTitleMap;
   (function (IconTitleMap) {
       IconTitleMap["ActualBalanceIcon"] = "\u0414\u0435\u043D\u044C\u0433\u0438";
+      IconTitleMap["AirPlane"] = "\u0421\u0430\u043C\u043E\u043B\u0435\u0442";
       IconTitleMap["AppleIcon"] = "\u041B\u043E\u0433\u043E \u00ABApple\u00BB";
       IconTitleMap["ArrowDownIcon"] = "\u0421\u0442\u0440\u0435\u043B\u043A\u0430 '\u0412\u043D\u0438\u0437'";
       IconTitleMap["ArrowLeftIcon"] = "\u0421\u0442\u0440\u0435\u043B\u043A\u0430";
-      IconTitleMap["ArrowsRewindRight"] = "ArrowsRewindRight";
-      IconTitleMap["ArrowUpIcon"] = "ArrowUpIcon";
+      IconTitleMap["ArrowsRewindRight"] = "\u0421\u0442\u0440\u0435\u043B\u043A\u0430";
+      IconTitleMap["ArrowUpIcon"] = "\u0421\u0442\u0440\u0435\u043B\u043A\u0430 \u0432\u0432\u0435\u0440\u0445";
       IconTitleMap["AtmIcon"] = "\u0411\u0430\u043D\u043A\u043E\u043C\u0430\u0442";
       IconTitleMap["BankIcon"] = "\u0411\u0430\u043D\u043A";
       IconTitleMap["BurgerIcon"] = "\u0411\u0443\u0440\u0433\u0435\u0440";
@@ -305,7 +314,9 @@
       IconTitleMap["CardPosIcon"] = "\u041A\u0440\u0435\u0434. \u043A\u0430\u0440\u0442\u0430 \u043F\u043E\u0434 \u043D\u0430\u043A\u043B\u043E\u043D\u043E\u043C";
       IconTitleMap["CardTickIcon"] = "\u041A\u0440\u0435\u0434. \u043A\u0430\u0440\u0442\u0430 \u0441 \u0433\u0430\u043B\u043E\u0447\u043A\u043E\u0439";
       IconTitleMap["CardWithGemIcon"] = "\u041A\u0430\u0440\u0442\u0430 \u0441 \u0434\u0440\u0430\u0433\u043E\u0446\u0435\u043D\u043D\u043E\u0441\u0442\u044F\u043C\u0438";
+      IconTitleMap["CarIcon"] = "\u041C\u0430\u0448\u0438\u043D\u0430";
       IconTitleMap["ChartSquareIcon"] = "\u0414\u0435\u043D\u044C\u0433\u0438 \u0432\u043D\u0443\u0442\u0440\u0438 \u043A\u043E\u0448\u0435\u043B\u044C\u043A\u0430";
+      IconTitleMap["CinemaIcon"] = "\u041A\u0438\u043D\u043E";
       IconTitleMap["ClockIcon"] = "\u0427\u0430\u0441\u044B";
       IconTitleMap["CloseIcon"] = "\u041A\u0440\u0435\u0441\u0442\u0438\u043A";
       IconTitleMap["ComfortableCompIcon"] = "\u041A\u0440\u0435\u0441\u043B\u043E";
@@ -313,6 +324,7 @@
       IconTitleMap["DiscountShapeIcon"] = "\u0421\u043A\u0438\u0434\u043A\u0430";
       IconTitleMap["DocIcon"] = "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442";
       IconTitleMap["DocIconMonoColor"] = "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442 (\u043E\u0434\u043D\u043E\u0446\u0432\u0435\u0442\u043D\u044B\u0439)";
+      IconTitleMap["DocsIcon"] = "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u044B";
       IconTitleMap["DocumentTextIcon"] = "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442 \u0441 \u0442\u0435\u043A\u0441\u0442\u043E\u043C";
       IconTitleMap["DollarIcon"] = "\u0414\u043E\u043B\u043B\u0430\u0440";
       IconTitleMap["EarthIcon"] = "\u0417\u0435\u043C\u043B\u044F";
@@ -346,13 +358,16 @@
       IconTitleMap["PersonalCardIcon"] = "\u041F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u0430\u044F \u043A\u0430\u0440\u0442\u0430";
       IconTitleMap["PlayMarketIcon"] = "\u041B\u043E\u0433\u043E \u00ABPlayMarket\u00BB";
       IconTitleMap["PlusIcon"] = "\u041F\u043B\u044E\u0441";
+      IconTitleMap["PowerIcon"] = "\u0429\u0438\u0442";
       IconTitleMap["Profile2UserIcon"] = "\u041F\u0440\u043E\u0444\u0438\u043B\u044C, 2 \u043F\u0435\u0440\u0441\u043E\u043D\u044B";
       IconTitleMap["ProfileIcon"] = "\u041F\u0440\u043E\u0444\u0438\u043B\u044C";
+      IconTitleMap["PumpkinIcon"] = "\u0422\u044B\u043A\u0432\u0430";
       IconTitleMap["RoundRubleIcon"] = "\u0420\u0443\u0431\u043B\u044C (\u043A\u0440\u0443\u0433.)";
       IconTitleMap["SafeIcon"] = "\u0421\u0435\u0439\u0444";
       IconTitleMap["ShieldTickIcon"] = "\u0411\u0435\u0437\u043E\u043F\u0430\u0441\u043D\u043E\u0441\u0442\u044C";
       IconTitleMap["SignDocsIcon"] = "\u041F\u043E\u0434\u043F\u0438\u0441\u0430\u043D\u043D\u044B\u0435 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u044B";
       IconTitleMap["SmallClockIcon"] = "\u041C\u0430\u043B\u0435\u043D\u044C\u043A\u0438\u0435 \u0447\u0430\u0441\u044B";
+      IconTitleMap["SoundIcon"] = "\u0417\u0432\u0443\u043A";
       IconTitleMap["TelegramIcon"] = "\u041B\u043E\u0433\u043E \u00ABTelegram\u00BB";
       IconTitleMap["UnionPayIcon"] = "UnionPay";
       IconTitleMap["UserTickIcon"] = "\u041F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044C";
@@ -362,6 +377,7 @@
       IconTitleMap["WalletAddIcon"] = "\u041A\u043E\u0448\u0435\u043B\u0451\u043A \u0441 \u043F\u043B\u044E\u0441\u043E\u043C";
       IconTitleMap["WalletIcon"] = "\u041A\u043E\u0448\u0435\u043B\u0451\u043A";
       IconTitleMap["WalletWithMoneyIcon"] = "\u041A\u043E\u0448\u0435\u043B\u0451\u043A \u0441 \u0434\u0435\u043D\u044C\u0433\u0430\u043C\u0438";
+      IconTitleMap["WateringCan"] = "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043F\u0440\u043E\u0434\u0443\u043A\u0442";
   })(IconTitleMap || (IconTitleMap = {}));
 
   const projectSettings = new (class {
@@ -990,15 +1006,20 @@
           `, onClick: handleToggle, children: [jsx("span", { className: `text-xl pr-2.5 font-medium`, children: label }), hasContent ? (jsx(Img, { image: icon, className: "text-primary-main", width: "24", height: "24", asSVG: true })) : null] }), hasContent ? (jsx(AccordionItemInner, { isExpanded: isActive, blocks: blocks, context: context })) : null] }));
   });
 
-  const Accordion = JSX(({ title, description, accordionItems, context, className = '', anchor = null }) => {
-      return (jsxs("section", { className: `p-[50px] font-sans bg-white text-primary-text ${className}`, id: anchor, children: [title ? jsx(Heading, { headingType: "h4", className: "mb-2.5", title: title }) : null, description ? jsx("div", { className: "mb-2.5 text-base", children: description }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, context: context }, `AccordionItem${i}`))) })) : null] }));
+  const ALIGN_TITLE = {
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right',
+  };
+  const Accordion = JSX(({ title, description, accordionItems, context, className = '', anchor = null, accordionAlignTitle = 'center', }) => {
+      return (jsxs("section", { className: `p-[50px] font-sans bg-white text-primary-text ${className}`, id: anchor, children: [title ? (jsx(Heading, { headingType: "h4", className: `mb-2.5 ${ALIGN_TITLE[accordionAlignTitle]}`, title: title })) : null, description ? jsx("div", { className: "mb-2.5 text-base", children: description }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, context: context }, `AccordionItem${i}`))) })) : null] }));
   });
 
-  const BenefitsBlock = JSX(({ className, title, benefits, anchor = null }) => {
-      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: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefits?.length ? (jsx("div", { className: "grid grid-cols-2 gap-8 mt-9", children: benefits.map(renderStep) })) : null] }));
+  const BenefitsBlock = JSX(({ className = '', title, benefits, anchor = null }) => {
+      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: "h2", className: "max-w-[47rem] text-center", title: title })) : null, benefits?.length ? (jsx("div", { className: "grid grid-cols-2 gap-8 mt-9", children: benefits.map(renderStep) })) : null] }));
   });
   const renderStep = (benefit, i) => {
-      return (jsxs("div", { className: "flex items-center gap-5 max-w-[500px]", children: [benefit.icon ? (jsx(Img, { className: "h-[70px] w-[70px] min-w-[70px] min-h-[70px]", image: benefit.icon, width: "70", height: "70" })) : null, jsxs("div", { children: [jsx("h3", { className: "font-medium text-xl m-0", children: benefit.label }), benefit.description && (jsx("div", { className: "font-normal text-sm mt-2", children: benefit.description }))] })] }, String(i)));
+      return (jsxs("div", { className: "flex items-center gap-5 max-w-[500px]", children: [benefit?.icon ? (jsx(Img, { className: "h-[70px] w-[70px] min-w-[70px] min-h-[70px]", image: benefit.icon, width: "70", height: "70" })) : null, jsxs("div", { children: [benefit?.label ? jsx("h3", { className: "font-medium text-xl m-0", children: benefit.label }) : null, benefit?.description ? (jsx("div", { className: "font-normal text-sm mt-2", children: benefit.description })) : null] })] }, String(i)));
   };
 
   const Bonus = JSX((props) => {
@@ -2085,36 +2106,51 @@
       return (jsx(NavigatorTabItem, { active: active, ...useLink({ router, handlerDecorator }, tab) }, tab.href));
   };
 
-  const OtherProductsItemInner = JSX(({ blocks, columns = 1, context }) => {
-      const className = 'box-border p-5';
-      return (jsx("div", { className: "transition-all duration-300 max-h-0 overflow-hidden", children: jsx("div", { className: `box-border w-full p-9 ${columns > 1 ? 'flex flex-wrap' : ''}`, children: renderBlocksList({ context, className, columns, blocks }) }) }));
-  });
-
-  const useActiveHandler = ({ context, blocks, initialState = false }) => {
+  const foldableBlockClassNames = 'transition-all duration-300 max-h-0 overflow-hidden';
+  const useActiveHandler = ({ context, initialState = false }) => {
       const [isActive, setIsActive] = context.useState(initialState);
-      const hasContent = blocks?.length;
       const icon = isActive ? 'ArrowUpIcon' : 'ArrowDownIcon';
-      const getContentBlock = ({ currentTarget }) => currentTarget.previousSibling;
       const handleToggle = (e) => {
-          if (!hasContent) {
+          const currentTarget = e.currentTarget;
+          if (!currentTarget) {
               return;
           }
           setIsActive(!isActive);
-          const contentBlock = getContentBlock(e);
+          const wrapperBlock = currentTarget.previousSibling;
+          const contentBlock = wrapperBlock.getElementsByClassName(foldableBlockClassNames)[0];
           contentBlock.style.maxHeight = contentBlock.style.maxHeight
-              ? null
+              ? ''
               : `${contentBlock.scrollHeight}px`;
       };
-      return { isActive, hasContent, icon, handleToggle };
+      return { icon, handleToggle, isActive };
+  };
+
+  const Foldable = JSX(({ blocks = [], context, hiddenBlocksNum = 0, foldButtonClasses, foldButtonLabel, foldButtonDataTheme, isUnfolded, 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, width: "20", height: "20", asSVG: true })] })) : null] })) : null;
+  });
+  const renderBlocks = (blocks, render, { blocksToHide, isActive }) => {
+      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);
   };
 
-  const OtherProductsItem = JSX(({ label, isExpanded, blocks, columns, dataTheme = null, context }) => {
-      const { hasContent, icon, handleToggle, isActive } = useActiveHandler({
+  const OtherProductsItem = JSX(({ label, blocks, columns = 1, context, dataTheme, isUnfolded }) => {
+      const foldableBlocks = renderBlocksList({
           context,
+          className: 'box-border p-5',
+          columns,
           blocks,
-          initialState: isExpanded,
       });
-      return (jsxs("div", { className: "border-0 border-b border-solid border-main-divider", children: [hasContent ? (jsx(OtherProductsItemInner, { isExpanded: isActive, columns: columns, blocks: blocks, context: context })) : null, jsxs("button", { className: "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": dataTheme, onClick: handleToggle, children: [jsx("span", { className: "pr-3", children: isActive ? 'Скрыть' : label }), hasContent ? jsx(Icon, { name: icon, width: "20", height: "20", asSVG: true }) : 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, render: (children, isActive) => (jsx(Wrapper$1, { columns: columns, 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 OtherProducts = JSX(({ blockItems, colorPalette, context, className = '' }) => {
@@ -2262,7 +2298,7 @@
       return (jsxs(TableRowContainer, { children: [jsx("div", { className: `text-sm py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${!isLastRow ? 'border-solid' : ''}`, children: jsxs("div", { className: "flex items-center text-primary-text", children: [header?.icon ? (jsx(Img, { className: "mr-[14px] max-w-6 max-h-6", image: header.icon, width: "24px", height: "24px", asSVG: true })) : null, header?.title] }) }), data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH, version: "tariff", children: data.map((cell, i) => (jsx(TariffsTableCell, { cell: cell, isLastRow: isLastRow }, String(i)))) })) : null] }));
   });
 
-  const TariffsTable = JSX(({ className, context, title, description, rowHeaders, columns, anchor = null }) => {
+  const TariffsTable = JSX(({ className, context, title, description, rowHeaders, columns, anchor = null, hiddenRowsNum = 0, }) => {
       const [activeCardIndex, setActiveCardIndex] = context.useState(0);
       const colData = getColData(columns);
       const rowData = getRowData(rowHeaders, colData);
@@ -2272,14 +2308,18 @@
           activeCardIndex,
           setActiveCardIndex,
       });
-      const { isScrollAvailable } = tableArrowScrollControlProps;
-      return (jsxs("section", { className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, id: anchor, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${description ? 'mb-2.5' : 'mb-9'}`, title: title })) : null, description ? jsx("div", { className: "mb-9 text-center text-m-base", children: description }) : null, rowData?.length ? (jsxs("div", { role: "table", children: [jsxs("div", { className: "relative", children: [rowData.map((row, i, { length }) => (jsx(TariffsTableRow, { row: row, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex }, String(i)))), jsx(TableArrowScrollControl, { ...tableArrowScrollControlProps })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] })) : null] }));
+      const foldableBlocks = rowData?.map((row, i, { length }) => (jsx(TariffsTableRow, { row: row, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex }, String(i))));
+      return (jsxs("section", { className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, id: anchor, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${description ? 'mb-2.5' : 'mb-9'}`, title: title })) : null, description ? jsx("div", { className: "mb-9 text-center text-m-base", children: description }) : null, rowData?.length ? (jsx(Foldable, { blocks: foldableBlocks, hiddenBlocksNum: hiddenRowsNum, context: context, render: (children) => (jsx(Wrapper, { tableArrowScrollControlProps: tableArrowScrollControlProps, children: children })), foldButtonLabel: "\u0420\u0430\u0437\u0432\u0435\u0440\u043D\u0443\u0442\u044C" })) : null] }));
   });
   const getColData = (columns) => columns?.map(({ data }) => data) || [];
   const getRowData = (rowHeaders, colData) => rowHeaders?.map((header, i) => ({
       header,
       data: colData.map((col) => col?.[i] || [{}]),
   }));
+  const Wrapper = JSX(({ children, tableArrowScrollControlProps }) => {
+      const { isScrollAvailable } = tableArrowScrollControlProps;
+      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 = true } = props;
@@ -2333,6 +2373,26 @@
       return (jsxs("section", { id: anchor, className: `box-border gap-1 h-12 ${className}`, children: [tabsNewMap?.length ? (jsx(GroupBlockTabs, { currentTag: currentTag, onTabClick: setCurrentTag, tabs: tabsNewMap })) : 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 ${className}`, id: anchor, children: [title ? (jsx(Heading, { headingType: "h3", className: "text-center mb-[10px]", title: title })) : null, subtitle ? jsx("span", { className: "text-md font-normal text-center", 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 text-center m-0", children: bonusBenefit.label })) : null })] }, String(i)));
+  };
+
   const Blocks = {
       Accordion,
       BenefitsBlock,
@@ -2365,6 +2425,7 @@
       Navigation,
       Placeholder,
       GroupBlock,
+      BonusBenefitsBlock,
   };
 
   const changeHashOnScroll = (router, blocks) => {