@redneckz/wildless-cms-uni-blocks 0.3.29 → 0.3.32

package/bundle/bundle.umd.js

@@ -200,7 +200,7 @@
           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 projectSettings = new (class {
@@ -489,11 +489,15 @@
       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(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-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,7 +580,7 @@
 
   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-m-button text-left", children: text })] })) : null] }));
   });
   const getButtonStyle = (props) => {
       const { version, aboveText, rounded } = props;
@@ -592,7 +596,7 @@
   };
   const isWithText = ({ text, aboveText, appendLeft }) => Boolean(text || aboveText || !appendLeft);
 
-  const buttonStyleMap$1 = {
+  const buttonStyleMap = {
       primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
       secondary: 'text-primary-main bg-secondary-light hover:bg-secondary-hover active:bg-secondary-active',
       link: '',
@@ -608,7 +612,7 @@
       const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, rounded: rounded }));
       return disabled ? (jsx(DisabledButton, { ...props, children: buttonInner })) : (jsx(RegularButton, { ...props, children: buttonInner }));
   });
-  const RegularButton = JSX(({ className, ariaLabel, version = 'none', rounded, href, target, children, onClick, ...rest }) => (jsx("a", { className: `${buttonStyle} inline-block cursor-pointer no-underline ${buttonStyleMap$1[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: href ? 'link' : 'button', ...rest, children: children })));
+  const RegularButton = JSX(({ className, ariaLabel, version = 'none', rounded, href, target, children, onClick, ...rest }) => (jsx("a", { className: `${buttonStyle} inline-block cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: href ? 'link' : 'button', ...rest, children: children })));
   const DisabledButton = JSX(({ className, children, ariaLabel, version = 'none', rounded }) => (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: "-1", className: `inline-block ${buttonStyle} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: children })));
 
   const ButtonSection = JSX(({ context, className = '', buttons }) => {
@@ -684,7 +688,7 @@
       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',
   };
@@ -696,7 +700,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] ${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] ${className || ''} ${productBlockStyleMap$1[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 })] }));
   });
 
   const textBlockStyleMaps = {
@@ -909,20 +913,20 @@
       LinkList,
   };
 
-  const renderBlocksList = ({ blocks, context, className, columns, version, }) => blocks?.length ? blocks.map(renderBlock$1({ context, className, columns, version })) : null;
-  const renderBlock$1 = ({ context, columns, className, version }) => (block, i) => {
+  const renderBlocksList = ({ blocks, context, className, columns }) => blocks?.length ? blocks.map(renderBlock$1({ context, className, columns })) : null;
+  const renderBlock$1 = ({ context, columns, className }) => (block, i) => {
       const type = block?.blockListType;
       if (!type || !(type in EmbeddableBlocks)) {
           return null;
       }
       const columnsCountClass = columns === 2 ? 'w-1/2' : '';
       const EmbeddedBlock = EmbeddableBlocks[type];
-      return (jsx("div", { className: `${className} ${columnsCountClass}`, children: jsx(EmbeddedBlock, { context: context, ...block, blockVersion: version, className: "!p-0" }) }, `block_${i}`));
+      return (jsx("div", { className: `${className} ${columnsCountClass}`, children: jsx(EmbeddedBlock, { context: context, ...block, className: "!p-0" }) }, `block_${i}`));
   };
 
-  const AccordionItemInner = JSX(({ blocks, columns = 1, context, version = 'primary' }) => {
+  const AccordionItemInner = JSX(({ blocks, context }) => {
       const className = 'mb-5 last:mb-0 pb-5';
-      return (jsx("div", { className: "transition-all duration-300 max-h-0 overflow-hidden", children: renderBlocksList({ context, className, columns, blocks, version }) }));
+      return (jsx("div", { className: "transition-all duration-300 max-h-0 overflow-hidden", children: renderBlocksList({ context, className, blocks }) }));
   });
 
   const useActiveHandler$1 = ({ context, blocks, initialState = false }) => {
@@ -943,30 +947,19 @@
       return { isActive, hasContent, icon, handleToggle };
   };
 
-  const buttonStyleMap = {
-      primary: 'text-primary-text',
-      secondary: 'text-white',
-  };
-  const buttonHoverStyleMap = {
-      primary: 'group-hover:text-primary-main',
-      secondary: 'group-hover:text-white',
-  };
-  const AccordionItem = JSX(({ label, isExpanded, blocks, columns, context, version = 'primary' }) => {
+  const AccordionItem = JSX(({ label, isExpanded, blocks, context }) => {
       const { isActive, hasContent, icon, handleToggle } = useActiveHandler$1({
           context,
           blocks,
           initialState: isExpanded,
       });
-      return (jsxs("li", { className: "border-0 border-b border-solid border-main-divider last:border-b-0", children: [jsxs("button", { className: `border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans ${buttonStyleMap[version]}
-        ${hasContent ? 'group cursor-pointer' : ''}`, onClick: handleToggle, children: [jsx("span", { className: `text-xl pr-2.5 font-medium ${hasContent ? buttonHoverStyleMap[version] : ''}`, children: label }), hasContent ? jsx(Icon, { name: icon, width: "24", height: "24", asSVG: true }) : null] }), hasContent ? (jsx(AccordionItemInner, { isExpanded: isActive, columns: columns, blocks: blocks, version: version, context: context })) : null] }));
+      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] }));
   });
 
-  const accordionStyleMap = {
-      primary: 'bg-white text-primary-text',
-      secondary: 'bg-primary-main text-white',
-  };
-  const Accordion = JSX(({ title, accordionItems, context, className = '', version = 'primary', anchor = null }) => {
-      return (jsxs("section", { className: `p-[50px] font-sans ${className} ${accordionStyleMap[version]}`, id: anchor, children: [title ? jsx(Heading, { headingType: "h4", className: "mb-2.5", title: title }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, version: version, context: context }, `AccordionItem${i}`))) })) : null] }));
+  const Accordion = JSX(({ title, description, accordionItems, context, className = '', anchor = null }) => {
+      return (jsxs("section", { className: `p-[50px] font-sans bg-white text-primary-text ${className}`, id: anchor, children: [title ? jsx(Heading, { headingType: "h4", className: "mb-2.5", title: title }) : null, description ? jsx("div", { className: "mb-2.5 text-base", children: description }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, context: context }, `AccordionItem${i}`))) })) : null] }));
   });
 
   const BenefitsBlock = JSX(({ className, title, benefits, anchor = null }) => {
@@ -1063,7 +1056,7 @@
   });
   const renderTab$1 = (currentTabIndex, onTabClick) => (tab, index) => {
       const isActive = currentTabIndex === index;
-      return (jsxs("div", { className: `flex h-full flex-1 cursor-pointer mr-2 last:mr-0 ${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)));
+      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 }) }));
 
@@ -1449,7 +1442,7 @@
       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-[38px] h-[38px] 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(Icon, { name: icon, width: width, height: height, asSVG: true, className: "block", color: "none" })) }));
   });
 
   const SocialMedia = JSX(({ className, media, context }) => {
@@ -1553,7 +1546,7 @@
       'bg-white': 'bg-main-divider',
       transparent: 'bg-main-divider opacity-30',
   };
-  const Header = JSX(({ className, defaultLocation, bgColor = 'bg-white', context, topItems, anchor = null }) => {
+  const Header = JSX(({ className, defaultLocation = 'Москва', bgColor = 'bg-white', context, topItems, anchor = null, }) => {
       const router = context.useRouter();
       const sitemap = useSitemap(context.useAsyncData);
       const { handlerDecorator } = context;
@@ -1567,7 +1560,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 })));
@@ -1636,34 +1629,50 @@
       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: 'text-secondary-text',
+      secondary: '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-[70px] 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-9 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] : '';
+      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] ${additionalClass}`, context: context, textBlockClassName: "mb-[154px]", ...block }), jsx(Icon, { className: "absolute right-[460px] top-[200px] z-0 mb-4", name: "ArrowsRewindRight", width: "230", height: "187" })] }) }, 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';
-      const btnTitleClassName = isActiveBtn
-          ? 'text-[18px] text-primary-text pb-[10px]'
-          : 'text-m-base text-white pb-[3px]';
-      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)));
+          ? '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-primary-text' : productBlockStyleMap[version];
+      const btnDescClassName = isActiveBtn ? 'text-secondary-text' : productBlockStyleMap[version];
+      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 = {
@@ -1720,7 +1729,7 @@
   });
 
   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] }) }));
+      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, { className: "text-m-base", items: items, version: version }) : null] }) }));
   });
 
   const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
@@ -1730,7 +1739,7 @@
       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
+      return (jsxs("section", { className: `relative font-sans p-[50px] overflow-hidden ${blockClassName} ${className}`, id: anchor, children: [title ? jsx(Heading, { headingType: "h2", 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
                       ? recommendations.map(renderRecommendationCard({ context, version, className: cardClassName }))
                       : null }), renderNavButtons({
                   cardsCount: recommendations.length,
@@ -1750,8 +1759,14 @@
       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)));