@redneckz/wildless-cms-uni-blocks 0.3.41 → 0.3.44

package/bundle/bundle.umd.js

@@ -231,37 +231,6 @@
       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 }))] }));
   });
 
-  const projectSettings = new (class {
-      _ = {
-          PROD_BRANCH: 'master',
-          FORCED_DRAFT_FLOW: false,
-      };
-      setup(_) {
-          this._ = _;
-      }
-      get TEST_BRANCH() {
-          return this._.TEST_BRANCH;
-      }
-      get RC_BRANCH() {
-          return this._.RC_BRANCH;
-      }
-      get PROD_BRANCH() {
-          return this._.PROD_BRANCH;
-      }
-      get FORCED_DRAFT_FLOW() {
-          return this._.FORCED_DRAFT_FLOW;
-      }
-      get ENABLE_ASSIST() {
-          return this._.ENABLE_ASSIST;
-      }
-      get SITEMAP() {
-          return this._.SITEMAP;
-      }
-      get CDN() {
-          return this._.CDN;
-      }
-  })();
-
   // Generated. Do not touch
   /* eslint-disable max-lines */
   var IconMap;
@@ -423,15 +392,41 @@
       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-white',
-      secondary: 'text-white',
-  };
-  const Icon = JSX(({ className = '', name = '', alt = `Иконка ${IconTitleMap[name] || name}`, title = alt, asSVG, color = 'primary', ...imgProps }) => {
+  const projectSettings = new (class {
+      _ = {
+          PROD_BRANCH: 'master',
+          FORCED_DRAFT_FLOW: false,
+      };
+      setup(_) {
+          this._ = _;
+      }
+      get TEST_BRANCH() {
+          return this._.TEST_BRANCH;
+      }
+      get RC_BRANCH() {
+          return this._.RC_BRANCH;
+      }
+      get PROD_BRANCH() {
+          return this._.PROD_BRANCH;
+      }
+      get FORCED_DRAFT_FLOW() {
+          return this._.FORCED_DRAFT_FLOW;
+      }
+      get ENABLE_ASSIST() {
+          return this._.ENABLE_ASSIST;
+      }
+      get SITEMAP() {
+          return this._.SITEMAP;
+      }
+      get CDN() {
+          return this._.CDN;
+      }
+  })();
+
+  const Icon = JSX(({ className = '', name = '', alt = `Иконка ${IconTitleMap[name] || name}`, title = alt, asSVG, ...imgProps }) => {
       const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
       if (asSVG) {
-          return (jsxs("svg", { className: `${svgColorsMap[color]} ${className}`, ...imgProps, "aria-hidden": "true", style: color === 'secondary' ? { filter: 'invert(1)' } : null, children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }));
+          return (jsxs("svg", { className: 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` })] }));
       }
       return (jsx("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
   });
@@ -485,7 +480,7 @@
       return index !== -1 ? href.substring(index + 1) : '';
   };
 
-  const LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full box-border ${className}`, iconClassName: "mr-3.5 min-w-6 min-h-6 text-primary-text", textClassName: "self-center font-light", suffixClassName: "text-secondary-text group-hover:text-primary-main", doc: doc, icon: icon })));
+  const LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full box-border ${className}`, iconClassName: "mr-2.5 min-w-6 min-h-6 text-primary-text", textClassName: "self-center font-light", suffixClassName: "text-secondary-text group-hover:text-primary-main", doc: doc, icon: icon })));
 
   const LinkDocsList = JSX(({ className, documents, columnsMode = 'double', icon }) => {
       return documents?.length ? (jsx("div", { className: className, role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { className: "group flex align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main", doc: doc, icon: icon }) }, String(i)))) })) : null;
@@ -505,7 +500,7 @@
       single: 'flex gap-3.5 flex-col',
   };
   const LinkDocs = JSX(({ className = '', title, subtitle, align, documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', anchor = null, }) => {
-      return (jsxs("section", { className: `font-sans text-primary-text p-12 bg-white ${className}`, id: anchor, children: [title ? (jsx(Heading, { headingType: "h2", className: `${subtitle ? 'mb-2.5' : titleMarginsStyleMap[columnsMode]} ${titleAlignStyleMap[align ?? 'center']}`, title: title })) : null, subtitle ? (jsx("h3", { className: `text-base mt-0 font-normal ${titleMarginsStyleMap[columnsMode]} ${titleAlignStyleMap[align ?? 'center']}`, children: subtitle })) : null, jsx(LinkDocsList, { className: linkColumnsModeStyleMap[columnsMode], columnsMode: columnsMode, documents: documents, icon: icon })] }));
+      return (jsxs("section", { className: `font-sans text-primary-text p-[50px] bg-white ${className}`, id: anchor, children: [title ? (jsx(Heading, { headingType: "h2", className: `${subtitle ? 'mb-2.5' : titleMarginsStyleMap[columnsMode]} ${titleAlignStyleMap[align ?? 'center']}`, title: title })) : null, subtitle ? (jsx("h3", { className: `text-base mt-0 font-normal ${titleMarginsStyleMap[columnsMode]} ${titleAlignStyleMap[align ?? 'center']}`, children: subtitle })) : null, jsx(LinkDocsList, { className: linkColumnsModeStyleMap[columnsMode], columnsMode: columnsMode, documents: documents, icon: icon })] }));
   });
 
   const pictureTextStyleMap = {
@@ -737,7 +732,7 @@
       secondary: 'text-primary-text',
   };
   function renderBackwardButton(text, version, className) {
-      return (jsxs("div", { className: `flex items-center ${className}`, children: [jsx(Button, { rounded: true, className: `w-12 h-12 min-h-12 max-h-12 flex items-center justify-center mr-3 ${backwardBgStyleMap[version]}`, ariaLabel: text, children: jsx(Img, { className: `w-4 h-4 min-w-4 min-h-4 rounded-full box-border ${backwardIconStyleMap[version]}`, image: { icon: 'ArrowLeftIcon' }, color: "none", width: "24", height: "24", asSVG: true }) }), text ? jsx("span", { className: "text-m-md", children: text }) : null] }));
+      return (jsxs("div", { className: `flex items-center ${className}`, children: [jsx(Button, { rounded: true, className: `w-12 h-12 min-h-12 max-h-12 flex items-center justify-center mr-3 ${backwardBgStyleMap[version]}`, ariaLabel: text, children: jsx(Img, { className: `w-4 h-4 min-w-4 min-h-4 rounded-full box-border ${backwardIconStyleMap[version]}`, image: { icon: 'ArrowLeftIcon' }, width: "24", height: "24", asSVG: true }) }), text ? jsx("span", { className: "text-m-md", children: text }) : null] }));
   }
 
   const productBlockStyleMap$1 = {
@@ -752,7 +747,7 @@
       const { context, className = '', breadcrumbs, version = 'primary', anchor = null, ...otherProps } = props;
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("section", { className: `font-sans pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap$1[version]} ${className}`, id: anchor, children: [renderBackwardButton('Все дебетовые карты', version, 'mb-10'), breadcrumbs?.length ? (jsx("div", { className: "text-xs mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbsStyleMap[version]}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { ...useLink({ router, handlerDecorator }, { className: breadcrumbsStyleMap[version], ...breadcrumb }) }, String(i))))) })) : null, jsx(ProductBlockInner, { context: context, version: version, ...otherProps })] }));
+      return (jsxs("section", { className: `font-sans overflow-hidden pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap$1[version]} ${className}`, id: anchor, children: [renderBackwardButton('Все дебетовые карты', version, 'mb-10'), breadcrumbs?.length ? (jsx("div", { className: "text-xs mb-6", children: joinList(jsx("span", { className: `mx-2 ${breadcrumbsStyleMap[version]}`, children: "/" }))(breadcrumbs.map((breadcrumb, i) => (jsx(Breadcrumb, { ...useLink({ router, handlerDecorator }, { className: breadcrumbsStyleMap[version], ...breadcrumb }) }, String(i))))) })) : null, jsx(ProductBlockInner, { context: context, version: version, ...otherProps })] }));
   });
 
   const textBlockStyleMaps = {
@@ -849,7 +844,7 @@
       secondary: 'bg-primary-main text-white',
   };
   const ProductTile = JSX(({ context, className = '', title, description, benefits, buttons, image, version = 'primary', anchor = null, }) => {
-      return (jsx("section", { className: `bg-white 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: getTileHeadingType(className), 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 }), jsxs("div", { className: "flex mt-5 mb-1", children: [benefits?.length ? (jsx("div", { className: "mr-8", children: benefits.map(renderBenefitLabel) })) : null, benefits?.length ? (jsx("div", { className: "pt-1", children: benefits.map((_, i) => renderBenefitDescription(_, i, version)) })) : 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: getTileHeadingType(className), 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 }), jsxs("div", { className: "flex mt-5 mb-1", children: [benefits?.length ? (jsx("div", { className: "mr-8", children: benefits.map(renderBenefitLabel) })) : null, benefits?.length ? (jsx("div", { className: "pt-1", children: benefits.map((_, i) => renderBenefitDescription(_, i, version)) })) : null] })] }) }));
   });
   function renderBenefitLabel(benefit, i) {
       return (jsx("div", { className: `text-xl font-medium ${i ? 'mt-2.5' : ''}`, children: benefit.label }, String(i)));
@@ -1020,6 +1015,15 @@
       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)));
   };
 
+  const Bonus = JSX((props) => {
+      const { className = '', title, description, bonusItems, anchor = null } = props;
+      return (jsx("section", { className: `bg-white p-12 ${className}`, id: anchor, children: jsxs("div", { className: "container", children: [title ? jsx(Heading, { headingType: "h2", className: "text-center", title: title }) : null, description ? (jsx("div", { className: "text-md font-light text-center mt-2", children: description })) : null, jsx("div", { className: "flex flex-wrap w-full mt-9", children: bonusItems
+                          ? bonusItems.map((_, i) => {
+                              return (jsx("div", { className: "flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-4 mx-2 even:mr-0 odd:ml-0 last:odd:w-full last:odd:mx-0", children: jsxs("div", { className: "flex justify-between w-full", children: [jsxs("div", { className: "mr-4", children: [jsx("div", { className: "text-title-sm", children: _.name }), jsx("div", { className: "text-md font-light mt-3 max-w-[488px]", children: _.description })] }), _.bonusCount ? (jsxs("div", { className: "relative -bottom-3 h-auto flex items-end mt-14 shrink-0", children: [jsx("span", { className: "font-serif -tracking-wider text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7", children: _.bonusCount }), jsx("span", { className: "text-[44px] bg-clip-text text-transparent bg-green-to-yellow", children: _.bonusName })] })) : null] }) }, String(i)));
+                          })
+                          : 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';
@@ -1109,7 +1113,7 @@
       const isActive = currentTabIndex === index;
       return (jsxs("div", { className: `flex h-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${isActive ? ACTIVE_TAB_STYLE : TAB_STYLE}`, role: "tab", onClick: () => onTabClick(index), "aria-selected": String(isActive), children: [tab?.icon ? renderIcon(tab, isActive) : null, jsxs("div", { children: [tab?.title ? jsx("h3", { className: "font-medium m-0 text-base", children: tab?.title }) : null, tab?.description ? (jsx("span", { className: `font-light text-xs ${isActive ? '' : 'text-secondary-text'}`, children: tab?.description })) : null] })] }, String(index)));
   };
-  const renderIcon = (tab, isActive) => (jsx("div", { className: "h-full mt-1", style: isActive ? { filter: 'invert(1)' } : null, children: jsx(Img, { className: "w-5 h-5 mr-3", image: tab?.icon || 'CardIcon', asSVG: !isActive }) }));
+  const renderIcon = (tab, isActive) => (jsx("div", { className: "h-full mt-1", children: jsx(Img, { className: `w-5 h-5 mr-3 ${isActive ? 'invert-full' : ''}`, image: tab?.icon || 'CardIcon', asSVG: !isActive }) }));
 
   function useCreditCalculatorData(useAsyncData, directoryName) {
       const { data } = useAsyncData(creditCalculatorUrl(directoryName), fetchCreditCalculatorData);
@@ -1414,7 +1418,7 @@
       transparent: 'text-white',
   };
   const Logo = JSX(({ className, href, children, targetBlank, bgColor = 'bg-white', hideTitle }) => {
-      return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className || ''}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', "aria-label": "\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A", children: [jsx(SVG, { className: `${SVG_COLOR[bgColor]} w-10`, viewBox: "0 0 40 45", paths: LOGO_PATHS.map((d) => ({ d })) }), !hideTitle && (jsx("span", { className: `${TEXT_COLOR[bgColor]} text-m-title-xs font-medium ml-2.5`, children: children || 'Россельхозбанк' }))] }));
+      return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className || ''}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', "aria-label": "\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A", children: [jsx(SVG, { className: `${SVG_COLOR[bgColor]} w-10`, viewBox: "0 0 40 45", paths: LOGO_PATHS.map((d) => ({ d })) }), !hideTitle && (jsx("span", { className: `${TEXT_COLOR[bgColor]} font-medium ml-2.5`, children: children || 'Россельхозбанк' }))] }));
   });
 
   const SearchBar = JSX(({ className, context }) => {
@@ -1526,17 +1530,20 @@
           height: '21px',
       },
   ];
-  const MediaButton = JSX(({ href }) => {
+  const MediaButton = JSX(({ href, version }) => {
       const { icon, width, height, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
       if (!icon)
           return null;
-      return (jsx("a", { className: "flex items-center justify-center border border-solid rounded-md border-main-divider no-underline outline-none w-14 h-14 box-border text-primary-main hover:text-white hover:bg-primary-main hover:border-primary-main", href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(Img, { image: icon, width: width, height: height, asSVG: true, className: "block", color: "none" })) : null }));
+      const classes = version === 'secondary'
+          ? 'text-white hover:text-primary-main hover:bg-white'
+          : 'text-primary-main hover:text-white hover:bg-primary-main hover:border-primary-main';
+      return (jsx("a", { className: ` flex items-center justify-center border border-solid rounded-md border-main-divider no-underline outline-none w-14 h-14 box-border ${classes}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? jsx(Img, { image: icon, width: width, height: height, asSVG: true, className: "block" }) : null }));
   });
 
-  const SocialMedia = JSX(({ className = '', media, context, children }) => {
+  const SocialMedia = JSX(({ className = '', media, version, context, children }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("div", { children: [jsx("div", { className: `flex gap-2.5 mb-1.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { ...useLink({ router, handlerDecorator }, _) }, String(index)))) }), jsx("span", { className: "font-light text-sm text-secondary-text", children: children })] }));
+      return (jsxs("div", { children: [jsx("div", { className: `flex gap-2.5 mb-1.5 ${className}`, children: media?.map((_, index) => (jsx(MediaButton, { version: version, ...useLink({ router, handlerDecorator }, _) }, String(index)))) }), jsx("span", { className: "font-light text-sm text-secondary-text", children: children })] }));
   });
 
   const TextInformation = JSX(({ className, links, context }) => {
@@ -1548,7 +1555,7 @@
 
   const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
   const Footer = JSX(({ className, documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, context, anchor = null, }) => {
-      return (jsxs("footer", { className: `px-9 pt-9 pb-8 bg-white ${className || ''}`, id: anchor, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD }), jsx(SearchBar, { context: context, className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, context: context, hasButton: true }), jsx(SocialMedia, { media: socialMedia, context: context, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, context: context, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "pt-[3px]", context: context, items: topItems })] }), jsx(HorizontalNavigation, { className: "mt-24", links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
+      return (jsxs("footer", { className: `px-9 pt-9 pb-10 bg-white ${className || ''}`, id: anchor, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD }), jsx(SearchBar, { context: context, className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, context: context, hasButton: true }), jsx(SocialMedia, { media: socialMedia, context: context, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, context: context, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "pt-[3px]", context: context, items: topItems })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
   });
 
   const GracePeriod = JSX(({ className = '', title, description, calendar, anchor = null }) => {
@@ -1614,7 +1621,7 @@
   };
   const HeaderSecondaryMenu = JSX(({ context, className, defaultLocation = '', bgColor = 'bg-white' }) => {
       const [city, getCity] = context.useGeolocation(defaultLocation);
-      return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: city, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: getCity, bgColor: bgColor }), jsx(TopItem, { className: "mr-7", flat: true, href: "#", text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432", bgColor: bgColor }), jsx(HeaderSecondaryMenuButton, { className: `mr-5 ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(Img, { image: "LoupeIcon", className: "h-full", asSVG: true, color: "none" }) }), jsx(HeaderSecondaryMenuButton, { className: `${LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`, ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(Img, { image: LINKS_ICON_NAME_MAP[bgColor], className: "h-full", asSVG: true, color: "none" }) })] }));
+      return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: city, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: getCity, bgColor: bgColor }), jsx(TopItem, { className: "mr-7", flat: true, href: "#", text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432", bgColor: bgColor }), jsx(HeaderSecondaryMenuButton, { className: `mr-5 ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(Img, { image: "LoupeIcon", className: "h-full", asSVG: true }) }), jsx(HeaderSecondaryMenuButton, { className: `${LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`, ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(Img, { image: LINKS_ICON_NAME_MAP[bgColor], className: "h-full", asSVG: true }) })] }));
   });
 
   const maxBy = (discriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
@@ -1649,12 +1656,15 @@
   const isClient$1 = !isSSR();
   const headerSubMenuObserver = isClient$1
       ? new IntersectionObserver((entries) => {
+          const createArrays = (selectors) => selectors.map((_) => Array.from(window.document.querySelectorAll(_)));
           const headerSubMenuButtonElement = window.document.querySelector('[data-header-submenu-visible=toggled]');
-          const headerSubMenuItems = Array.from(window.document.querySelectorAll('[data-item-name=header-submenu]'));
-          const dotsHeaderSubMenuItems = Array.from(window.document.querySelectorAll('[data-item-name=dots-header-submenu]'));
+          const [headerSubMenuItems, dotsHeaderSubMenuItems] = createArrays([
+              '[data-item-name=header-submenu]',
+              '[data-item-name=dots-header-submenu]',
+          ]);
           const visibilityList = {};
-          entries.forEach((j) => {
-              visibilityList[String(j.target.toString())] = j.isIntersecting;
+          entries.forEach((_) => {
+              visibilityList[_.target.toString()] = _.isIntersecting;
           });
           const isHeaderSubMenuButtonShow = toggleVisibilityInItems(visibilityList, dotsHeaderSubMenuItems, 'hidden');
           toggleVisibilityInItems(visibilityList, headerSubMenuItems, 'invisible');
@@ -1668,11 +1678,11 @@
   // TODO: add types
   const toggleVisibilityInItems = (visibilityList, items, className) => {
       const isReversed = className !== 'hidden';
-      return items.some((item) => {
-          const key = item.toString();
+      return items.some((_) => {
+          const key = _.toString();
           const option = isReversed ? !visibilityList[key] : visibilityList[key];
-          key in visibilityList ? item.classList.toggle(className, option) : null;
-          return isReversed ? item.classList.contains('hidden') : !item.classList.contains('hidden');
+          key in visibilityList ? _.classList.toggle(className, option) : null;
+          return isReversed ? _.classList.contains('hidden') : !_.classList.contains('hidden');
       });
   };
 
@@ -1797,8 +1807,8 @@
       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", 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 OtherProducts = JSX(({ blockItems, colorPalette, context, className = "" }) => {
+      return (jsx("section", { "data-theme": colorPalette || null, 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 GOLDEN_RATIO = 1.618;
@@ -1907,7 +1917,7 @@
   }
 
   const RecommendationCard = JSX(({ context, className = '', title, description, items, image, version, socialMedia }) => {
-      return (jsx("section", { className: `border border-solid box-border py-[30px] px-9 min-w-[515px] max-w-[515px] ${className}`, role: "listitem", children: jsxs(BaseTile, { context: context, className: "flex justify-between", title: title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "font-normal mb-3.5", title: title })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? jsx(Description, { className: "text-left", description: description }) : null, items?.length ? (jsx(List, { className: "text-md font-light flex flex-col gap-2", items: items, version: version })) : null, jsx(SocialMedia, { className: "pt-[42px] pb-0", media: socialMedia, context: context })] }) }));
+      return (jsx("section", { className: `border border-solid box-border py-[30px] px-9 min-w-[515px] max-w-[515px] ${className}`, role: "listitem", children: jsxs(BaseTile, { context: context, className: "flex justify-between", title: title ? (jsx(Heading, { headingType: "h4", as: "h3", className: "font-normal mb-3.5", title: title })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? jsx(Description, { className: "text-left", description: description }) : null, items?.length ? (jsx(List, { className: "text-md font-light flex flex-col gap-2", items: items, version: version })) : null, jsx(SocialMedia, { className: "pt-[42px] pb-0", media: socialMedia, version: version, context: context })] }) }));
   });
 
   const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
@@ -1994,6 +2004,7 @@
   const Blocks = {
       Accordion,
       BenefitsBlock,
+      Bonus,
       ComparisonTable,
       CreditCalculator,
       ExchangeRateTile,