@redneckz/wildless-cms-uni-blocks 0.3.61 → 0.3.63

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 {
@@ -465,7 +481,7 @@
 
   const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description, anchor = null, }) => {
       const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
-      return (jsxs("section", { className: `p-[50px] ${STYLE_MAPS.background} ${className}`, id: anchor, children: [title && (jsx(Heading, { headingType: "h2", className: `text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })), description && (jsx("p", { className: `font-normal text-base mt-4 ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, children: description }))] }));
+      return (jsxs("section", { className: `p-[50px] ${STYLE_MAPS.background} ${className}`, id: anchor, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx("p", { className: `font-normal text-base mt-4 ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, children: description })) : null] }));
   });
 
   const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
@@ -725,10 +741,10 @@
 
   const ProductBlockInner = JSX(({ className = '', context, title, headingType = 'h2', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
       const textColor = version === 'secondary' ? 'text-white' : 'text-primary-text';
-      return (jsxs("div", { className: `flex grow justify-between items-stretch ${className}`, children: [jsx("div", { className: `flex flex-col ${textBlockClassName}`, children: jsxs(BaseTile, { context: context, title: getTitle(title, headingType), buttons: getButtons(context, buttons), children: [description && (jsx(Description, { className: `mt-4 max-w-[600px] text-md font-light ${textColor}`, description: description })), benefits?.filter((items) => items.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map((benefit, i) => renderBenefit$1({ benefit, version, benefitsVersion }, i)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-title-2xs font-light", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] }) }), image?.src && jsx(Img, { className: "mt-[-50px]", image: image })] }));
+      return (jsxs("div", { className: `flex grow justify-between items-stretch ${className}`, children: [jsx("div", { className: `flex flex-col ${textBlockClassName}`, children: jsxs(BaseTile, { context: context, title: getTitle(title, headingType), buttons: getButtons(context, buttons), children: [description ? (jsx(Description, { className: `mt-4 max-w-[600px] text-md font-light ${textColor}`, description: description })) : null, benefits?.filter((items) => items.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map((benefit, i) => renderBenefit$1({ benefit, version, benefitsVersion }, i)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-title-2xs font-light", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] }) }), image?.src && jsx(Img, { className: "mt-[-50px]", image: image })] }));
   });
   const getTitle = (title, headingType) => {
-      return (title && (jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })));
+      return title ? (jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })) : null;
   };
   const getButtons = (context, buttons) => {
       return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-4" })) : null;
@@ -775,7 +791,7 @@
   };
   const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className, anchor = null, }) => {
       const textBlockStyleMap = textBlockStyleMaps[blockVersion];
-      return (jsxs("section", { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, id: anchor, children: [iconVersion === 'small' ? renderIcon$1(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title && (jsx("div", { className: `font-medium text-base mb-1 ${textBlockStyleMap.title}`, children: title })), description && (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description }))] })] }));
+      return (jsxs("section", { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, id: anchor, children: [iconVersion === 'small' ? renderIcon$1(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title ? (jsx("div", { className: `font-medium text-base mb-1 ${textBlockStyleMap.title}`, children: title })) : null, description ? (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description })) : null] })] }));
   });
   function renderIcon$1(className) {
       return (jsx("div", { className: "pt-1.5 pl-1 pr-4", children: jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs ${className}`, children: "i" }) }));
@@ -822,8 +838,8 @@
   };
   const Tile = JSX((props) => {
       const { context, title, headingType = 'h3', description, items, children, buttons, image, 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' : ''}` })), 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 })), children, renderList$1(items, version)] }) }));
+      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)] }) }));
   });
   function renderList$1(items, version) {
       return items?.length ? (jsx(List, { items: items, itemClassName: "text-title-2xs font-light mt-2", version: version === 'primary' ? 'tile' : 'tile-white' })) : null;
@@ -834,7 +850,7 @@
       secondary: 'bg-primary-main text-white',
   };
   const ProductTile = JSX(({ context, className = '', title, headingType = 'h3', description, additionalDescription, benefits, buttons, image, version = 'primary', anchor = null, }) => {
-      return (jsx("section", { className: `bg-white overflow-hidden text-primary-text font-sans p-9 box-border ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px]` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? (jsx(Description, { className: "mt-4 max-w-[600px]", description: description })) : null, renderBenefits(benefits, version), additionalDescription
+      return (jsx("section", { className: `bg-white overflow-hidden text-primary-text font-sans p-9 box-border ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? (jsx(Description, { className: "mt-4 max-w-[600px]", description: description })) : null, renderBenefits(benefits, version), additionalDescription
                       ? renderAdditionalDescription(additionalDescription, version)
                       : null] }) }));
   });
@@ -915,7 +931,7 @@
       const showNextButton = isGalleryScrollAvailable &&
           cards?.length - activeCardIndex > galleryLengthForScrollMap[version];
       const showPrevButton = isGalleryScrollAvailable && activeCardIndex > 0;
-      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-[42px] overflow-hidden ${className}`, id: anchor, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 z-10 mt-[25px]", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })), showNextButton && (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-[25px] rotate-180", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })), jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" })] }));
+      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-[42px] overflow-hidden ${className}`, id: anchor, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), showPrevButton ? (jsx(ArrowButton, { className: "absolute top-1/2 left-8 z-10 mt-[25px]", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })) : null, showNextButton ? (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-[25px] rotate-180", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })) : null, jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" })] }));
   });
 
   const Gallery = JSX((props) => jsx(GalleryInner, { ...props, version: "normal" }));
@@ -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) => {
@@ -1036,7 +1057,7 @@
       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 renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label && (jsx("h4", { 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 renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label ? (jsx("h4", { className: `text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`, children: label })) : null, description ? (jsx("div", { className: `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`, children: description })) : null] }, 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$1} ${FIRST_CELL_CLASSES$1} ${!isLastRow ? 'border-solid' : 'border-b-0'}`, 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] })));
 
@@ -1717,7 +1738,7 @@
 
   const SearchBar = JSX(({ className, context }) => {
       const { term, setTerm } = context.useSearch();
-      return (jsxs("form", { className: `relative ${className || ''}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: "w-[24px] h-[24px]", children: jsx(Img, { image: "LoupeIcon", width: "24", height: "24" }) }), !term && (jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-light text-base text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: 'h-12 pl-12 w-full peer font-sans font-light text-base text-black border border-solid rounded h-full box-border outline-none pr-[6%] border-main-divider focus:border-primary-text', value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input" }), jsx(Button, { version: "primary", text: "\u041D\u0430\u0439\u0442\u0438", className: "invisible peer-focus:visible absolute top-1 right-1", onClick: (e) => {
+      return (jsxs("form", { className: `relative ${className || ''}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: "w-[24px] h-[24px]", children: jsx(Img, { image: "LoupeIcon", width: "24", height: "24" }) }), term ? null : (jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-light text-base text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: 'h-12 pl-12 w-full peer font-sans font-light text-base text-black border border-solid rounded h-full box-border outline-none pr-[6%] border-main-divider focus:border-primary-text', value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input" }), jsx(Button, { version: "primary", text: "\u041D\u0430\u0439\u0442\u0438", className: "invisible peer-focus:visible absolute top-1 right-1", onClick: (e) => {
                       e.preventDefault();
                       console.log('click');
                   }, children: jsx("div", { className: "font-normal text-sm px-9 py-[9px]", children: "\u041D\u0430\u0439\u0442\u0438" }) })] }));
@@ -2047,7 +2068,7 @@
   }
 
   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]` })), 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" })] }) }) }));
+      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 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 })));
@@ -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 = '' }) => {
@@ -2224,7 +2260,7 @@
       const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
       const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
       const showPrevButton = isUseSlider && activeCardIndex > 0;
-      return (jsxs("div", { children: [showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 z-10 mt-6", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E" })), showNextButton && (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-6 rotate-180", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E" }))] }));
+      return (jsxs("div", { children: [showPrevButton ? (jsx(ArrowButton, { className: "absolute top-1/2 left-8 z-10 mt-6", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E" })) : null, showNextButton ? (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-6 rotate-180", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E" })) : null] }));
   };
 
   const StepsBlock = JSX(({ className = '', title, showLines = true, steps = [], button, anchor = null }) => {
@@ -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) => {
@@ -2407,7 +2468,7 @@
               const sectionsWithAnchors = globalThis.document.querySelectorAll('section[id]');
               globalThis.document.addEventListener('scroll', () => changeHashOnScroll(router, sectionsWithAnchors));
           });
-      return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [header?.blocks?.length ? (jsx("div", { className: `${style2className(header?.style)}`, children: header.blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, blocks?.length ? (jsx("div", { className: "container grid grid-cols-12 gap-1", children: blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, likeControl && (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto", context: context }, "LikeControl") }))] }));
+      return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [header?.blocks?.length ? (jsx("div", { className: `${style2className(header?.style)}`, children: header.blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, blocks?.length ? (jsx("div", { className: "container grid grid-cols-12 gap-1", children: blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i)) })) : null, likeControl ? (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto", context: context }, "LikeControl") })) : null] }));
   });
   function renderBlock({ block, blockDecorator, blocksRegistry, context }, i) {
       const { type } = block;