@redneckz/wildless-cms-uni-blocks 0.3.20 → 0.3.23

package/bundle/bundle.umd.js

@@ -234,11 +234,170 @@
       }
   })();
 
+  // Generated. Do not touch
+  /* eslint-disable max-lines */
+  var IconMap;
+  (function (IconMap) {
+      IconMap["ActualBalanceIcon"] = "ActualBalanceIcon";
+      IconMap["AppleIcon"] = "AppleIcon";
+      IconMap["ArrowDownIcon"] = "ArrowDownIcon";
+      IconMap["ArrowsRewindRight"] = "ArrowsRewindRight";
+      IconMap["ArrowUpIcon"] = "ArrowUpIcon";
+      IconMap["AtmIcon"] = "AtmIcon";
+      IconMap["BankIcon"] = "BankIcon";
+      IconMap["BurgerIcon"] = "BurgerIcon";
+      IconMap["BurgerIconWhite"] = "BurgerIconWhite";
+      IconMap["Calendar2Icon"] = "Calendar2Icon";
+      IconMap["CalendarCircleIcon"] = "CalendarCircleIcon";
+      IconMap["CalendarIcon"] = "CalendarIcon";
+      IconMap["CalendarTickIcon"] = "CalendarTickIcon";
+      IconMap["CalendarWhiteIcon"] = "CalendarWhiteIcon";
+      IconMap["CardIcon"] = "CardIcon";
+      IconMap["CardPosIcon"] = "CardPosIcon";
+      IconMap["CardTickIcon"] = "CardTickIcon";
+      IconMap["CardWithGemIcon"] = "CardWithGemIcon";
+      IconMap["ChartSquareIcon"] = "ChartSquareIcon";
+      IconMap["ClockIcon"] = "ClockIcon";
+      IconMap["CloseIcon"] = "CloseIcon";
+      IconMap["ComfortableCompIcon"] = "ComfortableCompIcon";
+      IconMap["CreditCardsIcon"] = "CreditCardsIcon";
+      IconMap["DiscountShapeIcon"] = "DiscountShapeIcon";
+      IconMap["DocIcon"] = "DocIcon";
+      IconMap["DocIconMonoColor"] = "DocIconMonoColor";
+      IconMap["DocumentTextIcon"] = "DocumentTextIcon";
+      IconMap["DollarIcon"] = "DollarIcon";
+      IconMap["EarthIcon"] = "EarthIcon";
+      IconMap["EmptyWalletChangeIcon"] = "EmptyWalletChangeIcon";
+      IconMap["EmptyWalletIcon"] = "EmptyWalletIcon";
+      IconMap["EmptyWalletWhiteIcon"] = "EmptyWalletWhiteIcon";
+      IconMap["EuroIcon"] = "EuroIcon";
+      IconMap["GeolocationIcon"] = "GeolocationIcon";
+      IconMap["GlassIcon"] = "GlassIcon";
+      IconMap["GlobalIcon"] = "GlobalIcon";
+      IconMap["GpsIcon"] = "GpsIcon";
+      IconMap["GridIcon"] = "GridIcon";
+      IconMap["GridIconWhite"] = "GridIconWhite";
+      IconMap["InterestGrowthIcon"] = "InterestGrowthIcon";
+      IconMap["InterestIcon"] = "InterestIcon";
+      IconMap["JCBIcon"] = "JCBIcon";
+      IconMap["LoupeIcon"] = "LoupeIcon";
+      IconMap["MasterCardIcon"] = "MasterCardIcon";
+      IconMap["MinusIcon"] = "MinusIcon";
+      IconMap["MirIcon"] = "MirIcon";
+      IconMap["MoneyIcon"] = "MoneyIcon";
+      IconMap["MoneyInsuranceIcon"] = "MoneyInsuranceIcon";
+      IconMap["MonitorMobileIcon"] = "MonitorMobileIcon";
+      IconMap["NewDocIcon"] = "NewDocIcon";
+      IconMap["OfficeIcon"] = "OfficeIcon";
+      IconMap["OkIcon"] = "OkIcon";
+      IconMap["PassSendIcon"] = "PassSendIcon";
+      IconMap["PercentageRoundIcon"] = "PercentageRoundIcon";
+      IconMap["PercentageSquareIcon"] = "PercentageSquareIcon";
+      IconMap["PercentageSquareWhiteIcon"] = "PercentageSquareWhiteIcon";
+      IconMap["PersonalCardIcon"] = "PersonalCardIcon";
+      IconMap["PlayMarketIcon"] = "PlayMarketIcon";
+      IconMap["PlusIcon"] = "PlusIcon";
+      IconMap["Profile2UserIcon"] = "Profile2UserIcon";
+      IconMap["ProfileIcon"] = "ProfileIcon";
+      IconMap["RoundRubleIcon"] = "RoundRubleIcon";
+      IconMap["SafeIcon"] = "SafeIcon";
+      IconMap["ShieldTickIcon"] = "ShieldTickIcon";
+      IconMap["SignDocsIcon"] = "SignDocsIcon";
+      IconMap["SmallClockIcon"] = "SmallClockIcon";
+      IconMap["TelegramIcon"] = "TelegramIcon";
+      IconMap["UnionPayIcon"] = "UnionPayIcon";
+      IconMap["UserTickIcon"] = "UserTickIcon";
+      IconMap["VisaIcon"] = "VisaIcon";
+      IconMap["VKIcon"] = "VKIcon";
+      IconMap["WalletAdd2Icon"] = "WalletAdd2Icon";
+      IconMap["WalletAddIcon"] = "WalletAddIcon";
+      IconMap["WalletIcon"] = "WalletIcon";
+      IconMap["WalletWithMoneyIcon"] = "WalletWithMoneyIcon";
+  })(IconMap || (IconMap = {}));
+  var IconTitleMap;
+  (function (IconTitleMap) {
+      IconTitleMap["ActualBalanceIcon"] = "\u0414\u0435\u043D\u044C\u0433\u0438";
+      IconTitleMap["AppleIcon"] = "\u041B\u043E\u0433\u043E \u00ABApple\u00BB";
+      IconTitleMap["ArrowDownIcon"] = "ArrowDownIcon";
+      IconTitleMap["ArrowsRewindRight"] = "ArrowsRewindRight";
+      IconTitleMap["ArrowUpIcon"] = "ArrowUpIcon";
+      IconTitleMap["AtmIcon"] = "\u0411\u0430\u043D\u043A\u043E\u043C\u0430\u0442";
+      IconTitleMap["BankIcon"] = "\u0411\u0430\u043D\u043A";
+      IconTitleMap["BurgerIcon"] = "\u0411\u0443\u0440\u0433\u0435\u0440";
+      IconTitleMap["BurgerIconWhite"] = "\u0411\u0443\u0440\u0433\u0435\u0440 (\u0431\u0435\u043B\u044B\u0439)";
+      IconTitleMap["Calendar2Icon"] = "\u041A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C 2";
+      IconTitleMap["CalendarCircleIcon"] = "\u0421\u043A\u0440\u0443\u0433\u043B\u0451\u043D\u043D\u044B\u0439 \u043A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C";
+      IconTitleMap["CalendarIcon"] = "\u041A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C";
+      IconTitleMap["CalendarTickIcon"] = "\u041A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C \u0441 \u0433\u0430\u043B\u043E\u0447\u043A\u043E\u0439";
+      IconTitleMap["CalendarWhiteIcon"] = "\u041A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C \u0431\u0435\u043B\u044B\u0439";
+      IconTitleMap["CardIcon"] = "\u041A\u0440\u0435\u0434. \u043A\u0430\u0440\u0442\u0430";
+      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["ChartSquareIcon"] = "\u0414\u0435\u043D\u044C\u0433\u0438 \u0432\u043D\u0443\u0442\u0440\u0438 \u043A\u043E\u0448\u0435\u043B\u044C\u043A\u0430";
+      IconTitleMap["ClockIcon"] = "\u0427\u0430\u0441\u044B";
+      IconTitleMap["CloseIcon"] = "\u041A\u0440\u0435\u0441\u0442\u0438\u043A";
+      IconTitleMap["ComfortableCompIcon"] = "\u041A\u0440\u0435\u0441\u043B\u043E";
+      IconTitleMap["CreditCardsIcon"] = "\u041A\u0440\u0435\u0434\u0438\u0442\u043D\u044B\u0435 \u043A\u0430\u0440\u0442\u044B";
+      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["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";
+      IconTitleMap["EmptyWalletChangeIcon"] = "\u041F\u0443\u0441\u0442\u043E\u0439 \u043A\u043E\u0448\u0435\u043B\u0451\u043A \u0441 \u0432\u043E\u0437\u0432\u0440\u0430\u0442\u043E\u043C";
+      IconTitleMap["EmptyWalletIcon"] = "\u041F\u0443\u0441\u0442\u043E\u0439 \u043A\u043E\u0448\u0435\u043B\u0451\u043A";
+      IconTitleMap["EmptyWalletWhiteIcon"] = "\u041F\u0443\u0441\u0442\u043E\u0439 \u043A\u043E\u0448\u0435\u043B\u0451\u043A (\u0431\u0435\u043B\u044B\u0439)";
+      IconTitleMap["EuroIcon"] = "\u0415\u0432\u0440\u043E";
+      IconTitleMap["GeolocationIcon"] = "\u0413\u0435\u043E\u043B\u043E\u043A\u0430\u0446\u0438\u044F";
+      IconTitleMap["GlassIcon"] = "\u0417\u0435\u0440\u043A\u0430\u043B\u043E";
+      IconTitleMap["GlobalIcon"] = "\u0413\u043B\u043E\u0431\u0443\u0441";
+      IconTitleMap["GpsIcon"] = "Gps";
+      IconTitleMap["GridIcon"] = "\u0421\u0435\u0442\u043A\u0430";
+      IconTitleMap["GridIconWhite"] = "\u0421\u0435\u0442\u043A\u0430 (\u0431\u0435\u043B\u0430\u044F)";
+      IconTitleMap["InterestGrowthIcon"] = "\u0414\u0438\u0430\u0433\u0440\u0430\u043C\u043C\u0430 \u0440\u043E\u0441\u0442\u0430";
+      IconTitleMap["InterestIcon"] = "\u0421\u043A\u0438\u0434\u043A\u0430";
+      IconTitleMap["JCBIcon"] = "JCB";
+      IconTitleMap["LoupeIcon"] = "\u041B\u0443\u043F\u0430";
+      IconTitleMap["MasterCardIcon"] = "MasterCard";
+      IconTitleMap["MinusIcon"] = "\u041C\u0438\u043D\u0443\u0441";
+      IconTitleMap["MirIcon"] = "\u041C\u0418\u0420";
+      IconTitleMap["MoneyIcon"] = "\u0414\u0435\u043D\u044C\u0433\u0438";
+      IconTitleMap["MoneyInsuranceIcon"] = "\u0414\u0435\u043D\u0435\u0436\u043D\u043E\u0435 \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u043D\u0438\u0435";
+      IconTitleMap["MonitorMobileIcon"] = "\u041C\u043E\u043D\u0438\u0442\u043E\u0440 \u0438 \u043C\u043E\u0431\u0438\u043B\u044C\u043D\u044B\u0439";
+      IconTitleMap["NewDocIcon"] = "\u041D\u043E\u0432\u044B\u0439 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442";
+      IconTitleMap["OfficeIcon"] = "\u041E\u0444\u0438\u0441";
+      IconTitleMap["OkIcon"] = "\u041B\u043E\u0433\u043E \u00AB\u041E\u0434\u043D\u043E\u043A\u043B\u0430\u0441\u0441\u043D\u0438\u043A\u0438\u00BB";
+      IconTitleMap["PassSendIcon"] = "\u0411\u0438\u0437\u043D\u0435\u0441";
+      IconTitleMap["PercentageRoundIcon"] = "\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u044B (\u043A\u0440\u0443\u0433.)";
+      IconTitleMap["PercentageSquareIcon"] = "\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u044B";
+      IconTitleMap["PercentageSquareWhiteIcon"] = "\u041F\u0440\u043E\u0446\u0435\u043D\u0442\u044B \u0431\u0435\u043B\u044B\u0435";
+      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["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["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["TelegramIcon"] = "\u041B\u043E\u0433\u043E \u00ABTelegram\u00BB";
+      IconTitleMap["UnionPayIcon"] = "UnionPay";
+      IconTitleMap["UserTickIcon"] = "\u041F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044C";
+      IconTitleMap["VisaIcon"] = "Visa";
+      IconTitleMap["VKIcon"] = "\u041B\u043E\u0433\u043E \u00ABVK\u00BB";
+      IconTitleMap["WalletAdd2Icon"] = "\u041F\u043E\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u0435 \u043A\u0430\u0440\u0442\u044B";
+      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 || (IconTitleMap = {}));
+
   const svgColorsMap = {
       none: '',
       primary: 'text-primary-main',
   };
-  const Icon = JSX(({ className = '', name, alt = `Icon ${name}`, title = alt, asSVG, color = 'primary', ...imgProps }) => {
+  const Icon = JSX(({ className = '', name, alt = `Иконка ${IconTitleMap[name] || name}`, title = alt, asSVG, color = 'primary', ...imgProps }) => {
       const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
       if (asSVG) {
           return (jsxs("svg", { className: `${svgColorsMap[color]} ${className}`, ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }));
@@ -271,7 +430,7 @@
 
   const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description }) => {
       const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
-      return (jsxs("section", { className: `p-[50px] ${STYLE_MAPS.background} ${className}`, children: [title && (jsx(Heading, { headingType: "h2", className: `text-primary-text ${ALIGN_TEXT[align]}`, title: title })), description && (jsx("p", { className: `font-normal text-base mt-4 ${ALIGN_TEXT[align]}`, children: description }))] }));
+      return (jsxs("section", { className: `p-[50px] ${STYLE_MAPS.background} ${className}`, 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 }))] }));
   });
 
   const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
@@ -422,7 +581,7 @@
   };
   const isWithText = ({ text, aboveText, appendLeft }) => Boolean(text || aboveText || !appendLeft);
 
-  const buttonStyleMap = {
+  const buttonStyleMap$1 = {
       primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
       secondary: 'text-primary-main bg-secondary-light hover:bg-secondary-hover active:bg-secondary-active',
       link: '',
@@ -438,7 +597,7 @@
       const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, rounded: rounded }));
       return disabled ? (jsx(DisabledButton, { ...props, children: buttonInner })) : (jsx(RegularButton, { ...props, children: buttonInner }));
   });
-  const RegularButton = JSX(({ className, ariaLabel, version = 'none', rounded, href, target, children, onClick, ...rest }) => (jsx("a", { className: `${buttonStyle} inline-block cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: href ? 'link' : 'button', ...rest, children: children })));
+  const RegularButton = JSX(({ className, ariaLabel, version = 'none', rounded, href, target, children, onClick, ...rest }) => (jsx("a", { className: `${buttonStyle} inline-block cursor-pointer no-underline ${buttonStyleMap$1[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: href ? 'link' : 'button', ...rest, children: children })));
   const DisabledButton = JSX(({ className, children, ariaLabel, version = 'none', rounded }) => (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: "-1", className: `inline-block ${buttonStyle} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: children })));
 
   const ButtonSection = JSX(({ context, className = '', buttons }) => {
@@ -750,7 +909,7 @@
       });
   };
 
-  const AccordionBlocks = {
+  const EmbeddableBlocks = {
       Headline,
       LinkDocs,
       TextBlock,
@@ -763,21 +922,24 @@
       LinkList,
   };
 
-  const AccordionItemInner = JSX(({ blocks, columns = 1, context }) => {
-      return (jsx("div", { className: 'transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0 flex flex-wrap', children: blocks?.length ? blocks.map(renderBlock$1(context, columns)) : null }));
-  });
-  const renderBlock$1 = (context, columns) => (block, i) => {
-      const type = block?.accordionBlockType;
-      if (!type || !(type in AccordionBlocks)) {
+  const renderBlocksList = ({ blocks, context, className, columns, version, }) => blocks?.length ? blocks.map(renderBlock$1({ context, className, columns, version })) : null;
+  const renderBlock$1 = ({ context, columns, className, version }) => (block, i) => {
+      const type = block?.blockListType;
+      if (!type || !(type in EmbeddableBlocks)) {
           return null;
       }
       const columnsCountClass = columns === 2 ? 'w-1/2' : '';
-      const AccordionBlock = AccordionBlocks[type];
-      return (jsx("div", { className: `mb-5 last:mb-0 pb-5 ${columnsCountClass}`, children: jsx(AccordionBlock, { context: context, ...block, className: "!p-0" }) }, `block_${i}`));
+      const EmbeddedBlock = EmbeddableBlocks[type];
+      return (jsx("div", { className: `${className} ${columnsCountClass}`, children: jsx(EmbeddedBlock, { context: context, ...block, blockVersion: version, className: "!p-0" }) }, `block_${i}`));
   };
 
-  const isActiveHandler = ({ context, blocks }) => {
-      const [isActive, setIsActive] = context.useState(false);
+  const AccordionItemInner = JSX(({ blocks, columns = 1, context, version = 'primary' }) => {
+      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, columns, blocks, version }) }));
+  });
+
+  const useActiveHandler$1 = ({ context, blocks, initialState = false }) => {
+      const [isActive, setIsActive] = context.useState(initialState);
       const hasContent = blocks?.length;
       const icon = isActive ? 'MinusIcon' : 'PlusIcon';
       const getContentBlock = ({ currentTarget }) => currentTarget.nextSibling;
@@ -794,17 +956,30 @@
       return { isActive, hasContent, icon, handleToggle };
   };
 
-  const AccordionItem = JSX(({ label, blocks, columns, context }) => {
-      const { hasContent, icon, handleToggle } = isActiveHandler({
+  const buttonStyleMap = {
+      primary: 'text-primary-text',
+      secondary: 'text-white',
+  };
+  const buttonHoverStyleMap = {
+      primary: 'group-hover:text-primary-main',
+      secondary: 'group-hover:text-white',
+  };
+  const AccordionItem = JSX(({ label, isExpanded, blocks, columns, context, version = 'primary' }) => {
+      const { isActive, hasContent, icon, handleToggle } = useActiveHandler$1({
           context,
           blocks,
+          initialState: isExpanded,
       });
-      return (jsxs("li", { className: "border-0 border-b border-solid border-main-divider last:border-b-0", children: [jsxs("button", { className: `border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans text-primary-text
-        ${hasContent ? 'group cursor-pointer' : ''}`, onClick: handleToggle, children: [jsx("span", { className: `text-xl pr-2.5 font-medium ${hasContent ? 'group-hover:text-primary-main' : ''}`, children: label }), hasContent ? jsx(Icon, { name: icon, width: "24", height: "24", asSVG: true }) : null] }), hasContent ? (jsx(AccordionItemInner, { columns: columns, blocks: blocks, context: context })) : null] }));
+      return (jsxs("li", { className: "border-0 border-b border-solid border-main-divider last:border-b-0", children: [jsxs("button", { className: `border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans ${buttonStyleMap[version]}
+        ${hasContent ? 'group cursor-pointer' : ''}`, onClick: handleToggle, children: [jsx("span", { className: `text-xl pr-2.5 font-medium ${hasContent ? buttonHoverStyleMap[version] : ''}`, children: label }), hasContent ? jsx(Icon, { name: icon, width: "24", height: "24", asSVG: true }) : null] }), hasContent ? (jsx(AccordionItemInner, { isExpanded: isActive, columns: columns, blocks: blocks, version: version, context: context })) : null] }));
   });
 
-  const Accordion = JSX(({ title, accordionItems, context, className }) => {
-      return (jsxs("section", { className: `p-[50px] font-sans bg-white text-primary-text ${className || ''}`, children: [title ? jsx(Heading, { headingType: "h4", className: "mb-2.5", title: title }) : 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 accordionStyleMap = {
+      primary: 'bg-white text-primary-text',
+      secondary: 'bg-primary-main text-white',
+  };
+  const Accordion = JSX(({ title, accordionItems, context, className = '', version = 'primary' }) => {
+      return (jsxs("section", { className: `p-[50px] font-sans ${className} ${accordionStyleMap[version]}`, children: [title ? jsx(Heading, { headingType: "h4", className: "mb-2.5", title: title }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, version: version, context: context }, `AccordionItem${i}`))) })) : null] }));
   });
 
   const BenefitsBlock = JSX(({ className, title, benefits }) => {
@@ -1494,6 +1669,42 @@
       return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
   }
 
+  const useActiveHandler = ({ context, blocks, 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) {
+              return;
+          }
+          setIsActive(!isActive);
+          const contentBlock = getContentBlock(e);
+          contentBlock.style.maxHeight = contentBlock.style.maxHeight
+              ? null
+              : `${contentBlock.scrollHeight}px`;
+      };
+      return { isActive, hasContent, icon, handleToggle };
+  };
+
+  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 OtherProductsItem = JSX(({ label, isExpanded, blocks, columns, context }) => {
+      const { hasContent, icon, handleToggle, isActive } = useActiveHandler({
+          context,
+          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-[25px] w-full font-sans text-white text-base flex justify-center cursor-pointer", onClick: handleToggle, children: [jsx("span", { className: "pr-3", children: isActive ? 'Скрыть' : label }), hasContent ? jsx(Icon, { name: icon, width: "20", height: "20", asSVG: true }) : null] })] }));
+  });
+
+  const OtherProducts = JSX(({ blockItems, 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, context: context }, `BlockItem${i}`))) })) : null }));
+  });
+
   const RecommendationCard = JSX(({ context, className = '', title, description, items, image, version }) => {
       return (jsx("section", { className: `border border-solid box-border rounded-md p-7 min-w-[515px] max-w-[515px] ${className}`, role: "listitem", children: jsxs(BaseTile, { context: context, title: title && jsx(Heading, { headingType: "h4", title: title, className: "mb-4" }), image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? jsx(Description, { description: description }) : null, items?.length ? jsx(List, { items: items, version: version }) : null] }) }));
   });
@@ -1590,6 +1801,7 @@
       ProductGalleryGreen,
       ProductTile,
       PromoTile,
+      OtherProducts,
       Recommendation,
       StepsBlock,
       TariffsTable,