@redneckz/wildless-cms-uni-blocks 0.3.31 → 0.3.34

package/bundle/bundle.umd.js

@@ -200,7 +200,35 @@
           return;
       }
       const Tag = headingType;
-      return (jsx(Tag, { className: `font-sans font-medium m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`, children: title }));
+      return (jsx(Tag, { className: `font-sans m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`, children: title }));
+  });
+
+  const ALIGN_TEXT = {
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right',
+  };
+  const HEADLINE_BLOCK_STYLE_MAPS = {
+      transparent: {
+          background: 'bg-transparent',
+          text: 'text-primary-text',
+          description: 'text-primary-text',
+      },
+      primary: {
+          background: 'bg-white',
+          text: 'text-primary-text',
+          description: 'text-primary-text',
+      },
+      secondary: {
+          background: 'bg-primary-main',
+          text: 'text-white',
+          description: 'text-white/80',
+      },
+  };
+
+  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 }))] }));
   });
 
   const projectSettings = new (class {
@@ -398,7 +426,7 @@
       primary: 'text-primary-main',
       secondary: 'text-primary-text',
   };
-  const Icon = JSX(({ className = '', name, alt = `Иконка ${IconTitleMap[name] || 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", 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` })] }));
@@ -406,37 +434,41 @@
       return (jsx("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
   });
 
-  const ALIGN_TEXT = {
-      left: 'text-left',
-      center: 'text-center',
-      right: 'text-right',
-  };
-  const HEADLINE_BLOCK_STYLE_MAPS = {
-      transparent: {
-          background: 'bg-transparent',
-          text: 'text-primary-text',
-          description: 'text-primary-text',
-      },
-      primary: {
-          background: 'bg-white',
-          text: 'text-primary-text',
-          description: 'text-primary-text',
-      },
-      secondary: {
-          background: 'bg-primary-main',
-          text: 'text-white',
-          description: 'text-white/80',
-      },
-  };
-
-  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 }))] }));
+  const Img = JSX(({ className = '', image, imageClassName = '', ...iconProps }) => {
+      if (!image) {
+          return null;
+      }
+      // backwards compatibility with existing icons in usage
+      const icon = typeof image === 'string' ? image : image.icon;
+      if (icon || icon === '') {
+          return icon.length ? jsx(Icon, { className: className, name: icon, ...iconProps }) : null;
+      }
+      return (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image }));
   });
+  const ImgAsPicture = JSX(({ className = '', image, imageClassName = '' }) => {
+      if (!image) {
+          return null;
+      }
+      return (jsxs("picture", { className: `flex-none ${className}`, children: [image?.sources?.length
+                  ? image.sources.map(({ src, format }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format) }, `${index}_${src}`)))
+                  : null, renderImg(image, imageClassName)] }));
+  });
+  const renderImg = (image, imageClassName = '') => {
+      const style = {
+          width: image.size?.width ? `${image.size?.width}px` : '100%',
+          height: image.size?.height ? `${image.size?.height}px` : '100%',
+      };
+      const title = image.title || '';
+      const alt = image.alt || image.title;
+      return (jsx("img", { src: image.src, className: imageClassName, alt: alt, title: title, style: style, ...image.size }));
+  };
+  function formatToMimeType(format) {
+      return format ? `image/${String(format)}` : undefined;
+  }
 
   const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
       const { text, fileSize, ...linkProps } = doc;
-      return (jsxs("a", { className: className, role: "link", ...linkProps, children: [icon ? (jsx(Icon, { className: iconClassName, name: icon, width: "24px", height: "24px", asSVG: true })) : null, text ? (jsxs("span", { className: textClassName, children: [text, jsx("span", { className: suffixClassName, children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] }));
+      return (jsxs("a", { className: className, role: "link", ...linkProps, children: [icon ? (jsx(Img, { className: iconClassName, image: icon, width: "24px", height: "24px", asSVG: true })) : null, text ? (jsxs("span", { className: textClassName, children: [text, jsx("span", { className: suffixClassName, children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] }));
   });
   const formatSuffix = (ext, fileSize) => {
       const prefix = ext || fileSize ? ',' : '';
@@ -470,30 +502,19 @@
       double: 'flex gap-x-5 gap-y-[26px] flex-wrap',
       single: 'flex gap-3.5 flex-col',
   };
-  const LinkDocs = JSX(({ className = '', title, subtitle, align, documents, icon = 'DocIcon', columnsMode = 'double', anchor = null, }) => {
+  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 })] }));
   });
 
-  const Img = JSX(({ className = '', image: { size, ...image }, imageClassName = '' }) => {
-      const style = {
-          width: size?.width ? `${size?.width}px` : '100%',
-          height: size?.height ? `${size?.height}px` : '100%',
-      };
-      const title = image.title || '';
-      const alt = image.alt || title;
-      return (jsxs("picture", { className: `flex-none ${className}`, children: [image.sources?.length
-                  ? image.sources.map(({ src, format }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format) }, `${index}_${src}`)))
-                  : null, jsx("img", { className: imageClassName, src: image.src, alt: alt, title: title, style: style, ...size })] }));
-  });
-  function formatToMimeType(format) {
-      return format ? `image/${String(format)}` : undefined;
-  }
-
-  const PictureText = JSX(({ className = '', title, image, benefits, anchor = null }) => {
-      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-14 ${className}`, id: anchor, children: [jsx(Heading, { headingType: "h2", className: "text-center", title: title }), jsxs("div", { className: 'flex justify-center mt-9', children: [image?.src && jsx(Img, { className: "mr-6", image: image }), benefits?.length ? (jsx("div", { className: "flex flex-col", children: benefits.map(renderBenefit$1) })) : null] })] }));
+  const pictureTextStyleMap = {
+      primary: 'bg-white text-primary-text',
+      secondary: 'bg-primary-main text-white',
+  };
+  const PictureText = JSX(({ className = '', title, image, benefits, version = 'primary', directionRight = false, anchor = null, }) => {
+      return (jsxs("section", { className: `relative font-sans p-14 ${pictureTextStyleMap[version]} ${className}`, id: anchor, children: [jsx(Heading, { headingType: "h2", className: "text-center", title: title }), jsxs("div", { className: 'flex justify-center mt-9', children: [image?.src && jsx(Img, { className: directionRight ? 'order-2 ml-6' : 'mr-6', image: image }), benefits?.length ? (jsx("div", { className: "flex flex-col", children: benefits.map((_, i) => renderBenefit$1(_, i, version)) })) : null] })] }));
   });
-  function renderBenefit$1(benefit, i) {
-      return (jsxs("div", { className: "flex flex-row mb-8", children: [benefit.icon && (jsx(Icon, { className: "w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]", name: benefit.icon, width: "48", height: "48", asSVG: true })), jsxs("div", { className: "flex gap-1 flex-col h-full ml-5 max-w-[490px]", children: [benefit.label && (jsx("div", { className: "font-medium text-primary-text text-xl m-0", children: benefit.label })), benefit.description && (jsx("div", { className: "font-normal text-sm text-secondary-text", children: benefit.description }))] })] }, String(i)));
+  function renderBenefit$1(benefit, i, version) {
+      return (jsxs("div", { className: "flex flex-row mb-8", children: [benefit.icon ? (jsx(Img, { className: "w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]", image: benefit.icon, width: "48", height: "48", asSVG: true })) : null, jsxs("div", { className: "flex gap-1 flex-col h-full ml-5 max-w-[490px]", children: [benefit.label && (jsx("div", { className: `font-medium text-xl m-0 ${version === 'primary' ? 'text-primary-text' : ''}`, children: benefit.label })), benefit.description && (jsx("div", { className: `font-normal text-sm ${version === 'primary' ? 'text-secondary-text' : ''}`, children: benefit.description }))] })] }, String(i)));
   }
 
   const isURL = (href) => href?.includes('//');
@@ -576,14 +597,14 @@
 
   const ButtonInner = JSX((props) => {
       const { text, aboveText, appendLeft } = props;
-      return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-m-2xs text-left", children: aboveText }), jsx("div", { className: "text-m-button font-medium text-left", children: text })] })) : null] }));
+      return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-m-2xs font-light text-left", children: aboveText }), jsx("div", { className: "text-base text-left", children: text })] })) : null] }));
   });
   const getButtonStyle = (props) => {
       const { version, aboveText, rounded } = props;
       if (version === 'link') {
           return '';
       }
-      const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`;
+      const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-4'}`;
       return [
           'flex items-center justify-center',
           isWithText(props) ? withTextStyle : 'h-12 w-12',
@@ -619,7 +640,7 @@
   function renderButton$2({ icon, ...button }, i) {
       if (!button?.text)
           return;
-      return icon ? (jsx(Button, { appendLeft: jsx(Icon, { name: icon, width: "24", height: "24", asSVG: true }), ...button }, String(i))) : (jsx(Button, { ...button }, String(i)));
+      return icon ? (jsx(Button, { appendLeft: jsx(Img, { image: icon, width: "24", height: "24", asSVG: true }), ...button }, String(i))) : (jsx(Button, { ...button }, String(i)));
   }
 
   const Description = JSX((props) => {
@@ -627,14 +648,14 @@
       return jsx("div", { className: `font-normal text-base ${className}`, children: description });
   });
 
-  const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3 mt-2';
+  const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
   const LIST_DOT_STYLE_MAP = {
       primary: 'bg-primary-main',
       secondary: 'bg-white',
       gray: 'bg-secondary-text',
   };
   const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary' }) => {
-      return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted && jsx("div", { className: getListStyle(version) }), jsx("span", { children: children })] }));
+      return (jsxs("div", { className: `font-sans flex items-center ${className}`, role: "listitem", children: [isDotted && jsx("div", { className: getListStyle(version) }), jsx("span", { children: children })] }));
   });
   const getListStyle = (version) => {
       const size = version === 'gray' ? 'w-1.5 h-1.5 min-w-1.5 min-h-1.5' : 'w-2 h-2 min-w-2 min-h-2';
@@ -670,21 +691,22 @@
       secondary: 'text-white',
   };
   function renderBenefit(benefit, i, version) {
-      return (jsxs("div", { className: "flex gap-4 items-center", children: [benefit.icon && (jsx(Icon, { className: `w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${benefitIconBgStyleMap[version]}`, name: benefit.icon, width: "24", height: "24", asSVG: true })), jsxs("div", { className: "flex gap-1 flex-col h-full max-w-[149px]", children: [jsx("div", { className: `font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description && (jsx("div", { className: `font-normal text-sm ${benefitDescStyleMap[version]}`, children: benefit.description }))] })] }, String(i)));
+      return (jsxs("div", { className: "flex gap-4 items-center", children: [benefit.icon ? (jsx(Img, { className: `w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${benefitIconBgStyleMap[version]}`, image: benefit.icon, width: "24", height: "24", asSVG: true })) : null, jsxs("div", { className: "flex gap-1 flex-col h-full max-w-[149px]", children: [jsx("div", { className: `font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description && (jsx("div", { className: `font-normal text-sm ${benefitDescStyleMap[version]}`, children: benefit.description }))] })] }, String(i)));
   }
 
   const ProductBlockInner = JSX(({ className = '', context, title, headingType = 'h2', description, benefits, buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
-      const textColor = version === 'secondary' ? 'text-white' : '';
-      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, textColor), buttons: getButtons(context, buttons), children: [description && (jsx(Description, { className: "mt-4 max-w-[600px]", description: description })), benefits?.filter((items) => items.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-m-base", items: items, itemClassName: "mb-[10px]", version: version, isDotted: isDotted })) : null] }) }), image?.src && jsx(Img, { className: "mt-auto", image: image })] }));
+      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, textColor), buttons: getButtons(context, buttons), children: [description && (jsx(Description, { className: `mt-[18px] max-w-[600px] text-title-new-sm font-light ${textColor}`, description: description })), benefits?.filter((items) => items.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-title-new-sm font-light", items: items, itemClassName: "mb-[10px]", version: version, isDotted: isDotted })) : null] }) }), image?.src && jsx(Img, { className: "mt-auto", image: image })] }));
   });
   const getTitle = (title, headingType, textColor) => {
-      return (title && (jsx(Heading, { headingType: headingType, title: title, className: `whitespace-pre-wrap max-w-[600px] ${textColor}` })));
+      const Tag = headingType;
+      return (title && jsx(Tag, { className: `font-sans font-medium m-0 text-title-xl ${textColor}`, children: title }));
   };
   const getButtons = (context, buttons) => {
       return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null;
   };
 
-  const productBlockStyleMap = {
+  const productBlockStyleMap$1 = {
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
   };
@@ -693,10 +715,10 @@
       secondary: 'text-white/80',
   };
   const ProductBlock = JSX((props) => {
-      const { context, className, breadcrumbs, version = 'primary', anchor = null, ...otherProps } = props;
+      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] ${className || ''} ${productBlockStyleMap[version]}`, id: anchor, children: [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 pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap$1[version]} ${className}`, id: anchor, children: [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 = {
@@ -848,7 +870,7 @@
       return (jsxs("div", { className: "h-full flex flex-col justify-between", children: [jsxs("div", { children: [image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: image }) })) : null, title ? renderCardTitle(title, titleStyleClasses) : null, description ? (jsx("div", { className: `font-normal text-sm ${title ? 'mt-2' : ''}`, children: description })) : null, items?.length ? renderItems(items, version) : null] }), button?.text ? renderButton$1(button) : null] }));
   });
   function renderButton$1(button) {
-      return (jsx(Button, { className: "mt-6 w-full", appendLeft: button.icon && jsx(Icon, { name: button.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
+      return (jsx(Button, { className: "mt-6 w-full", appendLeft: button.icon && jsx(Img, { image: button.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
   }
   function renderCardTitle(title, className) {
       return jsx("div", { className: `font-medium text-xl m-0 ${className}`, children: title });
@@ -951,7 +973,7 @@
       });
       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
             ${hasContent ? 'group cursor-pointer' : ''}
-          `, onClick: handleToggle, children: [jsx("span", { className: `text-xl pr-2.5 font-medium`, children: label }), hasContent ? jsx(Icon, { name: icon, width: "24", height: "24", asSVG: true }) : null] }), hasContent ? (jsx(AccordionItemInner, { isExpanded: isActive, blocks: blocks, context: context })) : null] }));
+          `, onClick: handleToggle, children: [jsx("span", { className: `text-xl pr-2.5 font-medium`, children: label }), hasContent ? jsx(Img, { image: icon, 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 }) => {
@@ -962,7 +984,7 @@
       return (jsxs("section", { className: `font-sans text-primary-text bg-white p-12 flex flex-col items-center ${className || ''}`, id: anchor, children: [title ? (jsx(Heading, { headingType: "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(Icon, { className: "h-[70px] w-[70px] min-w-[70px] min-h-[70px]", name: benefit.icon, width: "70", height: "70" })), 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: [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 TableRowContainer = JSX(({ children }) => (jsx("div", { className: "self-start flex flex-col", role: "row", children: jsx("div", { className: "flex", children: children }) })));
@@ -980,7 +1002,7 @@
   };
   const TableCarouselContainer = JSX(({ children, activeCardIndex, columnWidth, version = 'comparison' }) => (jsx("div", { className: "flex flex-1 overflow-hidden", children: jsx("div", { className: carouselContainerClassesMap[version], style: { transform: `translateX(-${activeCardIndex * columnWidth}px)` }, children: children }) })));
 
-  const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES$1} ${GRADIENT}`, role: "columnheader", scope: "col", children: [icon && !image?.src && (jsx(Icon, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", name: icon, width: "63", height: "63" })), image?.src && jsx(Img, { className: "mb-[18px]", image: image }), title && jsx(Heading, { headingType: "h4", className: "text-center text-white", title: title }), link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "font-medium text-xs py-[11px]", children: link.text }) }) }))] })));
+  const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES$1} ${GRADIENT}`, role: "columnheader", scope: "col", children: [icon && !image?.src && (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })), image?.src && jsx(Img, { className: "mb-[18px]", image: image }), title && jsx(Heading, { headingType: "h4", className: "text-center text-white", title: title }), link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "font-medium text-xs py-[11px]", children: link.text }) }) }))] })));
 
   const ComparisonTableColumnHeaders = JSX(({ colHeaders, activeCardIndex, router, handlerDecorator }) => {
       return (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES$1, role: "columnheader", scope: "col" }), jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header, link: header.link && useLink({ router, handlerDecorator }, header.link) }, String(i)))) })] }));
@@ -1054,7 +1076,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(Icon, { className: "w-5 h-5 mr-3", name: tab?.icon || 'CardIcon', asSVG: !isActive }) }));
+  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 }) }));
 
   function useCreditCalculatorData(useAsyncData, directoryName) {
       const { data } = useAsyncData(creditCalculatorUrl(directoryName), fetchCreditCalculatorData);
@@ -1233,19 +1255,19 @@
           title: 'Кредит',
           description: 'Ставка от 6% до 7 лет',
           directoryName: 'credit-calculator-data',
-          icon: 'CardIcon',
+          icon: { icon: 'CardIcon' },
       },
       {
           title: 'Кредит',
           description: 'Ставка от 4% до 7 лет',
           directoryName: 'credit-calculator-data1',
-          icon: 'ChartSquareIcon',
+          icon: { icon: 'ChartSquareIcon' },
       },
       {
           title: 'Кредит',
           description: 'Ставка от 3% до 6 лет',
           directoryName: 'credit-calculator-data2',
-          icon: 'DiscountShapeIcon',
+          icon: { icon: 'DiscountShapeIcon' },
       },
   ];
 
@@ -1282,10 +1304,10 @@
   });
   const renderCurrencyRow = (exchangeCurrencyItem) => {
       const code = exchangeCurrencyItem?.currency?.currency;
-      return (jsxs("tr", { className: "pb-1", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(Icon, { name: CURRENCY_ICONS_MAP[code], width: "24", height: "24" }) : null, jsx("span", { className: "text-m-title-md ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.buyExchangeRate) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.saleExchangeRate) })] }, code));
+      return (jsxs("tr", { className: "pb-1", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[code] }, width: "24", height: "24" }) : null, jsx("span", { className: "text-m-title-md ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.buyExchangeRate) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.saleExchangeRate) })] }, code));
   };
 
-  const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex text-sm ${className}`, children: [jsx(Icon, { className: "min-w-fit", name: "GpsIcon", width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3 font-light", children: [address ? jsx("p", { className: "m-0 mb-[3px]", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
+  const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex text-sm ${className}`, children: [jsx(Img, { className: "min-w-fit", image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3 font-light", children: [address ? jsx("p", { className: "m-0 mb-[3px]", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
 
   const Input = JSX(({ className = '', id, name, type = 'text', placeholder }) => {
       return (jsx("input", { className: className, id: id, name: name || id, type: type, placeholder: placeholder }));
@@ -1353,7 +1375,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(Icon, { name: "LoupeIcon", width: "24", height: "24" }) }), !term && (jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-normal 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-normal 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 && (jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-normal 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-normal 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" }) })] }));
@@ -1426,25 +1448,37 @@
   const ICONS_MAP = [
       {
           origins: ['t.me', 'telegram.org'],
-          icon: 'TelegramIcon',
+          icon: { icon: 'TelegramIcon' },
           label: 'Телеграм',
           width: '20px',
           height: '16px',
       },
-      { origins: ['vk.com'], icon: 'VKIcon', label: 'ВКонтакте', width: '24px', height: '12px' },
-      { origins: ['ok.ru'], icon: 'OkIcon', label: 'Одноклассники', width: '12px', height: '20px' },
+      {
+          origins: ['vk.com'],
+          icon: { icon: 'VKIcon' },
+          label: 'ВКонтакте',
+          width: '24px',
+          height: '12px',
+      },
+      {
+          origins: ['ok.ru'],
+          icon: { icon: 'OkIcon' },
+          label: 'Одноклассники',
+          width: '12px',
+          height: '20px',
+      },
   ];
   const MediaButton = JSX(({ href }) => {
       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 border-main-divider rounded-full no-underline outline-none w-[40px] h-[40px] box-border hover:text-primary-main", href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: Icon && (jsx(Icon, { name: icon, width: width, height: height, asSVG: true, className: "block", color: "none" })) }));
+      return (jsx("a", { className: "flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[40px] h-[40px] box-border hover:text-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 SocialMedia = JSX(({ className, media, context }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsx("div", { className: `flex items-end justify-end gap-2 pt-[30px] pb-7 ${className || ''}`, children: media?.map((_, index) => (jsx(MediaButton, { ...useLink({ router, handlerDecorator }, _) }, String(index)))) }));
+      return (jsx("div", { className: `flex items-end gap-2 pt-[30px] pb-7 ${className || ''}`, children: media?.map((_, index) => (jsx(MediaButton, { ...useLink({ router, handlerDecorator }, _) }, String(index)))) }));
   });
 
   const TextInformation = JSX(({ className, links, context }) => {
@@ -1535,7 +1569,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(Icon, { name: "LoupeIcon", className: "h-full", asSVG: true, color: "none" }) }), jsx(HeaderSecondaryMenuButton, { className: `mr-5 ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u0440\u043E\u0444\u0438\u043B\u044C", children: jsx(Icon, { name: "ProfileIcon", className: "h-full", asSVG: true, color: "none" }) }), jsx(HeaderSecondaryMenuButton, { className: `${DOP_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(Icon, { name: DOP_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, color: "none" }) }), jsx(HeaderSecondaryMenuButton, { className: `mr-5 ${COLORS_MAP[bgColor]}`, ariaLabel: "\u041F\u0440\u043E\u0444\u0438\u043B\u044C", children: jsx(Img, { image: "ProfileIcon", className: "h-full", asSVG: true, color: "none" }) }), jsx(HeaderSecondaryMenuButton, { className: `${DOP_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: DOP_LINKS_ICON_NAME_MAP[bgColor], className: "h-full", asSVG: true, color: "none" }) })] }));
   });
 
   const BORDER_COLORS = {
@@ -1556,7 +1590,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: 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, 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-[90px] h-[90px] min-w-[90px] min-h-[90px] bg-secondary-light" }) })), jsx("span", { className: "font-normal text-sm 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: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px] mb-7` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-7 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-[90px] h-[90px] min-w-[90px] min-h-[90px] 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 })));
@@ -1603,11 +1637,20 @@
   const renderShimmerItem = (width = 100, index) => (jsx("div", { style: { width: `${width}%` }, className: "h-4 mt-2 bg-secondary-light" }, String(index)));
   const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
 
+  const productGalleryStyleMap = {
+      primary: 'bg-white text-primary-text',
+      secondary: 'bg-primary-main text-white',
+  };
+  const ProductGalleryBlock = JSX(({ block, headingType, context, className = '' }) => {
+      const version = block?.version ?? 'primary';
+      return (jsx("section", { className: `flex grow-0 shrink-0 basis-full ${productGalleryStyleMap[version]} ${className}`, role: "listitem", children: jsx("div", { className: "p-10 flex grow", children: jsx(ProductBlockInner, { className: "pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem]", context: context, headingType: headingType || 'h2', ...block }) }) }));
+  });
+
   const ProductGallery = JSX(({ className, context, duration = 0, slides = [], anchor = null }) => {
       const galleryNav = slides.map((s) => s.nav);
       const galleryBlocks = slides.map((s) => s.productBlock);
       const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
-      return (jsxs("section", { className: `font-sans bg-white overflow-hidden w-100 ${className || ''}`, id: anchor, children: [jsx("div", { className: `flex duration-1000`, style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock$1(_, i, context)) }), jsx("div", { className: "flex", children: galleryNav.map((slide, i) => renderNavButton$1({
+      return (jsxs("section", { className: `font-sans bg-white overflow-hidden w-100 ${className || ''}`, id: anchor, children: [jsx("div", { className: `flex duration-1000`, style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => (jsx(ProductGalleryBlock, { context: context, block: _ }, String(i)))) }), jsx("div", { className: "flex", children: galleryNav.map((slide, i) => renderNavButton$1({
                       slide,
                       i,
                       activeSlideIndex,
@@ -1615,9 +1658,6 @@
                       duration,
                   })) })] }));
   });
-  function renderProductBlock$1(block, i, context) {
-      return (jsx("section", { className: "flex grow-0 shrink-0 basis-full", role: "listitem", children: jsx("div", { className: "p-10 flex grow", children: jsx(ProductBlockInner, { className: "pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem]", context: context, ...block }) }) }, String(i)));
-  }
   function renderNavButton$1({ slide, i, activeSlideIndex, onClick, duration }) {
       const isActiveBtn = i === activeSlideIndex;
       const progressBarClassName = isActiveBtn ? 'animate-slide' : '';
@@ -1625,34 +1665,54 @@
       return (jsxs("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `font-sans group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 pt-4 pb-[23px] grow basis-0`, children: [jsxs("div", { className: "border-0 border-r border-solid border-main-divider px-6", children: [jsx("div", { className: `text-sm font-medium pb-[3px] group-hover:text-primary-text ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: "text-xs text-secondary-text", children: slide.desc })] }), jsx("div", { className: `absolute bottom-0 left-0 w-full h-[3px] bg-primary-main -translate-x-full ${progressBarClassName}`, style: { animationDuration: `${duration}s`, animationFillMode: 'forwards' } })] }, String(i)));
   }
 
-  const ProductGalleryGreen = JSX(({ className = '', context, slides = [], anchor = null }) => {
+  const productGalleryGreenStyleMap = {
+      primary: 'bg-white text-primary-text',
+      secondary: 'bg-primary-main text-white',
+  };
+  const productBlockStyleMap = {
+      primary: { title: 'text-secondary-text', text: 'text-secondary-text' },
+      secondary: { title: 'text-white', text: 'text-white/80' },
+  };
+  const productSlideStyleMap = {
+      primary: 'bg-white text-primary-text',
+      secondary: 'bg-primary-main text-white',
+  };
+  const ProductGalleryGreen = JSX(({ className = '', context, slides = [], version = 'primary', duration = 0, anchor = null }) => {
       const galleryNav = slides.map((s) => s.nav);
       const galleryBlocks = slides.map((s) => s.productBlock);
       const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
-      return (jsxs("section", { className: `box-border pt-[70px] relative font-sans overflow-hidden bg-primary-main w-100 ${className}`, id: anchor, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock(_, i, context)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-9 box-border", children: galleryNav.map((slide, i) => renderNavButton({
+      return (jsxs("section", { id: anchor, className: `box-border pt-[50px] overflow-hidden relative font-sans w-100 ${className}
+        ${productGalleryGreenStyleMap[version]}`, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border", children: galleryNav.map((slide, i) => renderNavButton({
                       slide,
                       i,
                       activeSlideIndex,
                       onClick: () => setActiveSlideIndex(i),
+                      version,
+                      duration,
                   })) })] }));
   });
   function renderProductBlock(block, i, context) {
-      return (jsx("section", { className: "box-border relative flex grow-0 shrink-0 basis-full px-9", role: "listitem", children: jsxs("div", { className: "flex grow", children: [block.backgroundText ? (jsx("div", { className: "absolute text-[454px] font-bold text-white tracking-[-10px] leading-[299px] opacity-[.1] right-12 top-20 z-0", children: block.backgroundText })) : null, jsx(ProductBlockInner, { className: "pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem] z-[1]", context: context, textBlockClassName: "mb-[154px]", version: "secondary", ...block }), jsx(Icon, { className: "absolute right-[460px] top-[200px] z-0 mb-4", name: "ArrowsRewindRight", width: "230", height: "187" })] }) }, String(i)));
+      const { version } = block;
+      const additionalClass = version ? productBlockStyleMap[version].title : '';
+      return (jsx("section", { className: "box-border relative flex grow-0 shrink-0 basis-full", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { className: `pl-[50px] pr-2 z-[1] ${additionalClass}`, context: context, textBlockClassName: "mb-[154px]", ...block }) }) }, String(i)));
   }
-  function renderNavButton({ slide, i, activeSlideIndex, onClick }) {
+  function renderNavButton({ slide, i, activeSlideIndex, onClick, version, duration }) {
       const isActiveBtn = i === activeSlideIndex;
       const btnClassName = isActiveBtn
-          ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] max-w-[354px] p-0'
-          : 'bg-white/10 min-w-[277px] px-0 pt-4 pb-[23px] hover:pt-[21px] hover:pb-7 ease-in duration-300';
+          ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] max-w-[354px] p-0 border-none'
+          : `min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300
+      ${productSlideStyleMap[version]}`;
       const btnTitleClassName = isActiveBtn
-          ? 'text-[18px] text-primary-text pb-[10px]'
-          : 'text-m-base text-white pb-[3px]';
+          ? 'text-primary-text text-title-2xs'
+          : `text-base ${productBlockStyleMap[version].title}`;
       const btnDescClassName = isActiveBtn
-          ? 'text-[18px] text-secondary-text'
-          : 'text-m-base text-white';
-      return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `box-border font-sans group relative overflow-hidden border-white/50 border-[1px] cursor-pointer text-left mb-6a mx-1 grow basis-0 backdrop-blur-sm
-        ${btnClassName}
-      `, children: jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `font-medium ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text ${btnDescClassName}`, children: slide.description })] }) }, String(i)));
+          ? 'text-secondary-text text-m-title-xs mt-2.5'
+          : `text-m-md mt-1.5 ${productBlockStyleMap[version].text}`;
+      const additionalBorder = version === 'secondary' ? 'border-white/50' : '';
+      const progressBarClassName = isActiveBtn ? 'animate-slide' : '';
+      return (jsxs("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `box-border font-sans group relative overflow-hidden border-[1px] cursor-pointer text-left mx-1 grow basis-0 backdrop-blur-sm
+      ${btnClassName} ${additionalBorder}
+      `, children: [jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `font-medium ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text ${btnDescClassName}`, children: slide.description })] }), jsx("div", { className: `absolute bottom-0 left-0 w-full h-[3px] bg-primary-main -translate-x-full ${progressBarClassName}`, style: { animationDuration: `${duration}s`, animationFillMode: 'forwards' } })] }, String(i)));
   }
 
   const promoTileStyleMap = {
@@ -1708,8 +1768,8 @@
       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] }) }));
+  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("h4", { className: `font-sans text-title-xs font-normal m-0 mb-3.5`, children: 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 })] }) }));
   });
 
   const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
@@ -1718,8 +1778,8 @@
   const Recommendation = JSX(({ context, recommendations = [], className = '', title, version, anchor = null }) => {
       const [activeCardIndex, setActiveCardIndex] = context.useState(0);
       const blockClassName = version === 'secondary' ? 'bg-primary-main text-white' : 'bg-white text-primary-text';
-      const cardClassName = version === 'secondary' ? 'border-main-divider' : 'border-main-stroke';
-      return (jsxs("section", { className: `relative font-sans p-[50px] overflow-hidden ${blockClassName} ${className}`, id: anchor, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-8", title: title }) : null, jsx("div", { className: "flex duration-1000 gap-4", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }, role: "list", children: recommendations?.length
+      const cardClassName = version === 'secondary' ? 'border-white/50' : 'border-main-stroke';
+      return (jsxs("section", { className: `relative font-sans p-9 overflow-hidden text-center ${blockClassName} ${className}`, id: anchor, children: [title ? jsx(Heading, { headingType: "h2", className: "mb-6", title: title }) : null, jsx("div", { className: "flex duration-1000 gap-3.5", style: { transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }, role: "list", children: recommendations?.length
                       ? recommendations.map(renderRecommendationCard({ context, version, className: cardClassName }))
                       : null }), renderNavButtons({
                   cardsCount: recommendations.length,
@@ -1739,11 +1799,17 @@
       return (jsxs("div", { children: [showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 rotate-180 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", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E" }))] }));
   };
 
-  const StepsBlock = JSX(({ className, title, showLines = true, steps, anchor = null }) => {
-      return (jsxs("section", { className: `box-border font-sans text-primary-text bg-white px-20 py-[50px] flex flex-col items-center ${className || ''}`, id: anchor, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center", title: title }), steps?.length ? (jsxs("div", { className: `box-border py-0.5 mb-0.5 ${title ? 'mt-9' : ''}`, children: [jsx("div", { className: "flex items-center px-[88px]", children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}` }))(steps.map((step, i) => renderStepIcon(step, i))) }), jsx("div", { className: "flex justify-between gap-x-[101px]", children: steps.map(renderStepTitle) })] })) : null] }));
+  const StepsBlock = JSX(({ className = '', title, showLines = true, steps = [], anchor = null }) => {
+      const shortGaps = steps.length > 3;
+      return (jsxs("section", { className: [
+              'box-border font-sans text-primary-text bg-white',
+              shortGaps ? 'px-20' : 'px-[70px]',
+              'py-[50px] flex flex-col items-center',
+              className,
+          ].join(' '), id: anchor, children: [jsx(Heading, { headingType: "h2", className: "max-w-[47rem] text-center", title: title }), steps?.length ? (jsxs("div", { className: `box-border py-0.5 mb-0.5 ${title ? 'mt-9' : ''}`, children: [jsx("div", { className: "flex items-center px-[88px]", children: joinList(jsx("div", { className: `h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}` }))(steps.map(renderStepIcon)) }), jsx("div", { className: `flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`, children: steps.map(renderStepTitle) })] })) : null] }));
   });
   const renderStepIcon = (step, i) => {
-      return (jsx("div", { className: "flex flex-col items-center text-center relative", children: jsx("div", { className: "h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10", children: (step.icon && jsx(Icon, { name: step.icon, width: "48", height: "48" })) || (jsx("span", { className: "font-medium text-title-sm text-secondary-text", children: i + 1 })) }) }, String(i)));
+      return (jsx("div", { className: "flex flex-col items-center text-center relative", children: jsx("div", { className: "h-[100px] w-[100px] min-w-[100px] min-h-[100px] bg-secondary-light rounded-full p-[26px] box-border z-10", children: (step.icon?.icon && jsx(Img, { image: step.icon, width: "48", height: "48" })) || (jsx("span", { className: "font-medium text-title-sm text-secondary-text", children: i + 1 })) }) }, String(i)));
   };
   const renderStepTitle = (step, i) => {
       return (jsxs("div", { className: "flex flex-col items-center text-center relative w-[276px] whitespace-pre-line overflow-hidden", children: [step.label && jsx("div", { className: "font-medium text-xl m-0 mt-4", children: step.label }), step.description && (jsx("div", { className: `font-normal text-sm text-secondary-text ${step.label ? 'mt-2' : 'mt-4'}`, children: step.description }))] }, String(i)));
@@ -1760,10 +1826,10 @@
   });
   const renderCellInner = ({ label, description, list, image, buttons }, i) => (jsxs("div", { className: "first:pt-5 last:pb-5", children: [i > 0 && (jsx("div", { className: "border-main-divider border border-solid border-t-0 border-x-0 my-4" })), label ? jsx("div", { className: "text-xl font-medium m-0", children: label }) : null, description ? jsx("div", { className: "text-sm text-secondary-text", children: description }) : null, list?.items?.length ? renderList(list) : null, image && jsx(Img, { image: image }), buttons?.length ? renderButtons(buttons) : null] }, String(i)));
   const renderList = (list) => (jsx(List, { className: "flex flex-col justify-between items-start text-sm", version: "gray", items: list.items, isDotted: list.isDotted ?? true }));
-  const renderButtons = (buttons) => (jsx("div", { children: buttons.map(({ icon, rounded, ...buttonProps }, idx) => (jsx(Button, { className: `${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`, rounded: rounded, appendLeft: icon && jsx(Icon, { name: icon, width: "24px", height: "24px", asSVG: true }), ...buttonProps }, String(idx)))) }));
+  const renderButtons = (buttons) => (jsx("div", { children: buttons.map(({ icon, rounded, ...buttonProps }, idx) => (jsx(Button, { className: `${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`, rounded: rounded, appendLeft: icon ? jsx(Img, { image: icon, width: "24px", height: "24px", asSVG: true }) : null, ...buttonProps }, String(idx)))) }));
 
   const TariffsTableRow = JSX(({ row: { header, data }, activeCardIndex, isLastRow }) => {
-      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(Icon, { className: "mr-[14px] max-w-6 max-h-6", name: header.icon, width: "24px", height: "24px", asSVG: true })), 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] }));
+      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 }) => {