@redneckz/wildless-cms-uni-blocks 0.2.113 → 0.2.116

package/mobile/bundle/bundle.umd.js

@@ -231,19 +231,19 @@
       return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
   };
 
-  const SizeTableClass = {
-      XL: 'text-m-title',
-      L: 'text-m-title',
-      M: 'text-m-title-md',
-      S: 'text-m-title-xs',
-      '2XS': 'text-m-title-xs',
-      '3XS': 'text-m-title-xs',
+  const HeadingClass = {
+      h1: 'text-m-title',
+      h2: 'text-m-title',
+      h3: 'text-m-title-md',
+      h4: 'text-m-title-xs',
+      h5: 'text-m-title-xs',
+      h6: 'text-m-title-xs',
   };
-  const Title = JSX(({ size = 'L', className, children, ...rest }) => {
-      const Tag = size === 'XL' || size === 'L' ? 'h1' : 'h2';
-      return (jsx(Tag, { className: getClasses(SizeTableClass[size], className), ...rest, children: children }));
+  const Heading = JSX((props) => {
+      const { className, type, text } = props;
+      const Tag = type;
+      return (jsx(Tag, { className: `font-sans font-medium ${HeadingClass[type]} ${className || ''}`, children: text }));
   });
-  const getClasses = (...classes) => classes.filter(Boolean).join(' ');
 
   const isURL = (href) => href?.includes('//');
   const withoutQuery = (href) => (href || '').replace(/\/?\?.*/, '');
@@ -347,11 +347,11 @@
   const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
   const TEXT_STYLE_MAP = {
       primary: 'text-primary-text',
-      secondary: 'text-secondary-text',
+      secondary: '',
   };
   const LIST_STYLE_MAP = {
       primary: 'bg-primary-main',
-      secondary: 'bg-secondary-text',
+      secondary: 'bg-white',
   };
   const BlockItem = JSX(({ className = '', isDotted = true, text, children, version = 'primary', white }) => {
       return (jsxs("div", { className: `font-sans flex items-baseline ${className}`, role: "listitem", children: [isDotted && jsx("div", { className: getListStyle(version, white) }), jsx("span", { className: white ? 'text-white' : TEXT_STYLE_MAP[version], children: text || children })] }));
@@ -374,16 +374,16 @@
       return (jsxs("div", { children: [description && jsx("div", { className: `font-normal text-base mt-3`, children: description }), children, items?.length && renderItems$1(items, version), buttons?.length && (jsx("div", { className: "mt-[18px]", children: buttons.map((button, index) => renderButton(useLink({ router, handlerDecorator }, button), index)) })), image?.src && jsx(Img, { className: "mt-auto ml-7", image: image })] }));
   });
 
-  function getTitleSizeByClassName(className = '') {
+  function getHeadingType(className = '') {
       const colSpan = getColSpan(className);
       if (colSpan <= 4) {
-          return 'S';
+          return 'h4';
       }
       else if (colSpan <= 8) {
-          return 'M';
+          return 'h3';
       }
       else {
-          return 'L';
+          return 'h2';
       }
   }
 
@@ -393,8 +393,8 @@
       right: 'items-end',
   };
   const TITLE_CLASSES = 'font-medium m-0 whitespace-pre-wrap max-w-[600px]';
-  const BaseTile = JSX(({ className, context, title, titleSize, description, children, buttons, image, items, version = 'primary', align = 'left', }) => {
-      return (jsxs("div", { className: `font-sans flex flex-col grow h-full ${alignBlock[align]}`, children: [title && (jsx(Title, { size: titleSize || getTitleSizeByClassName(className), className: `${TITLE_CLASSES} ${version === 'primary' ? 'text-primary-text' : ''}`, children: title })), jsx(BaseTileInner, { context: context, buttons: buttons, image: image, children: children, description: description, items: items })] }));
+  const BaseTile = JSX(({ className, context, title, headingType, description, children, buttons, image, items, version = 'primary', align = 'left', }) => {
+      return (jsxs("div", { className: `font-sans flex flex-col grow h-full ${alignBlock[align]}`, children: [title && (jsx(Heading, { type: headingType || getHeadingType(className), className: `${TITLE_CLASSES} ${version === 'primary' ? 'text-primary-text' : ''}`, text: title })), jsx(BaseTileInner, { context: context, buttons: buttons, image: image, children: children, description: description, items: items })] }));
   });
 
   const tileStyleMap = {
@@ -460,47 +460,160 @@
   const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
 
   const Headline = JSX(({ bgColor = 'transparent', className = '', title, description, image }) => {
-      return (jsxs("section", { className: `px-4 py-6 ${bgColor} ${className}`, children: [title && (jsx(Title, { size: "L", className: "text-primary-text mt-0 font-medium", children: title })), description && (jsx("p", { className: `font-normal text-m-md ${title ? 'mt-2.5' : ''}`, children: description })), image?.src && (jsx("div", { className: "mt-5 mx-auto flex justify-center", children: jsx(Img, { image: image }) }))] }));
+      return (jsxs("section", { className: `px-4 py-6 ${bgColor} ${className}`, children: [title && jsx(Heading, { type: "h2", className: "text-primary-text", text: title }), description && (jsx("p", { className: `font-normal text-m-md ${title ? 'mt-2.5' : ''}`, children: description })), image?.src && (jsx("div", { className: "mt-5 mx-auto flex justify-center", children: jsx(Img, { image: image }) }))] }));
   });
 
-  const titleAlignStyleMap = {
-      left: 'text-left',
-      center: 'text-center',
-      right: 'text-right',
-  };
-  const titleMarginsStyleMap = {
-      double: 'mb-8',
-      single: 'mb-[26px]',
-  };
-  const linkColumnsModeStyleMap = {
-      double: 'gap-x-5 gap-y-[26px] flex-wrap',
-      single: 'gap-3.5 flex-col',
-  };
-  const LinkDocs = JSX(({ className = '', title, align, documents, icon, columnsMode = 'single' }) => {
-      const containerClasses = linkColumnsModeStyleMap[columnsMode];
-      return (jsxs("section", { className: `font-sans p-[50px] bg-white ${className}`, children: [title && (jsx(Title, { className: `font-medium mt-0 ${titleMarginsStyleMap[columnsMode]} ${titleAlignStyleMap[align ?? 'center']}`, children: title })), jsx("div", { className: `flex ${containerClasses}`, role: "list", children: documents?.length
-                      ? documents.map(({ text, fileSize, ...linkProps }, i) => (jsxs("a", { className: `group flex text-sm align-middle h-fit
-                   text-primary-text no-underline hover:text-primary-main
-                   ${columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}`, role: "listitem", ...linkProps, children: [icon && jsx(Icon, { className: "mr-2.5 h-fit", name: icon, width: "24px", height: "24px" }), jsxs("span", { className: "self-center", children: [text, jsx("span", { className: "text-secondary-text group-hover:text-primary-main", children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })] }, String(i))))
-                      : null })] }));
+  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] }));
   });
-  const getExtFromHref = (href) => {
-      if (!href)
-          return '';
-      const lastChunk = href.split('.').pop();
-      if (!lastChunk || lastChunk.includes('/'))
-          return '';
-      return lastChunk;
-  };
   const formatSuffix = (ext, fileSize) => {
       const prefix = ext || fileSize ? ',' : '';
       const extension = ext ? ` ${ext}` : '';
       const size = fileSize ? ` (${fileSize})` : '';
       return prefix + extension + size;
   };
+  const getExtFromHref = (href) => {
+      if (!href)
+          return '';
+      const index = href.lastIndexOf('.');
+      return index !== -1 ? href.substring(index + 1) : '';
+  };
+
+  const LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full ${className}`, iconClassName: "mr-2.5 min-w-6 min-h-6", doc: doc, icon: icon })));
+
+  const LinkDocsVerticalList = JSX(({ hasBorder = true, documents, icon }) => {
+      return (jsx("div", { className: `text-m-sm text-primary-main flex flex-col ${hasBorder ? 'gap-3.5' : 'gap-2'}`, role: "list", children: documents?.length
+              ? documents.map((doc, i) => (jsx("div", { role: "listitem", children: jsx(LinkDocsListItem, { className: hasBorder ? 'rounded-md border-main-stroke border p-4' : '', doc: doc, icon: icon }) }, String(i))))
+              : null }));
+  });
+
+  /*
+   Calculates array of breakpoints for each scrollable element in container.
+   Returns array of tuples consisting of [start, end] boundary scrollLeft values.
+  */
+  const getScrollPoints = ({ gap, padding, clientWidth, scrollWidth, childElementCount, itemWidth, }) => {
+      const scrollItemWidth = itemWidth + gap;
+      const scrollableDistance = scrollWidth - clientWidth;
+      const edgeScrollDistance = clientWidth - gap - padding;
+      const lastScrollableIdx = childElementCount - 2;
+      const scrollPoints = new Array(childElementCount)
+          .fill(0)
+          .map((_, idx) => idx === 0 || idx === lastScrollableIdx
+          ? [
+              idx > 0 ? scrollableDistance - edgeScrollDistance : 0,
+              idx > 0 ? scrollableDistance : edgeScrollDistance,
+          ]
+          : [
+              (idx - 1) * scrollItemWidth + edgeScrollDistance,
+              idx * scrollItemWidth + edgeScrollDistance,
+          ]);
+      scrollPoints[childElementCount - 1] = [scrollableDistance, scrollWidth];
+      return scrollPoints;
+  };
+
+  /*
+    Returns object containing whole index part, and it's decimal part for a given
+    scrollLeft value of a container and an array of tuple containing values of a
+    start and end boundaries of a scrollable child, right boundary non-inclusive.
+    Returns object with index equal -1 and fraction equal 0 if scrollLeft is outside given scrollPoints
+   */
+  const getIndexParts = (scrollLeft, scrollPoints) => {
+      const index = scrollPoints.findIndex(([start, end]) => start <= scrollLeft && scrollLeft < end);
+      if (index < 0)
+          return { index, fraction: 0 };
+      const [start, end] = scrollPoints[index];
+      const fraction = (scrollLeft - start) / (end - start);
+      return { index, fraction };
+  };
+
+  const SwipeListControlItem = JSX(({ className = '', children, ...rest }) => {
+      return (jsx("div", { className: `snap-center snap-always min-w-full ${className}`, role: "listitem", ...rest, children: children }));
+  });
+
+  // styles used to compensate outer container padding to get rid of clipping effect
+  const getContainerStyle = (padding) => {
+      return {
+          marginLeft: `${-padding}px`,
+          marginRight: `${-padding}px`,
+          paddingLeft: `${padding}px`,
+          paddingRight: `${padding}px`,
+      };
+  };
+
+  // column-gap between children of SwipeListControl container
+  const DEFAULT_GAP = 14;
+  /*
+    Horizontal padding used on a container above SwipeListControl.
+    Same value used on a SwipeListControlChildren container to compensate it
+    and get rid of a clipping effect caused by overflow: hidden.
+   */
+  const DEFAULT_PADDING = 16;
+  // Classes used to compensate outer container padding, so that child elements won't be clipped
+
+  const SwipeListControlList = JSX(({ className = '', children, activeIndex, onScroll, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, }) => {
+      return (jsx("div", { className: `overflow-auto flex horizontal-list no-scrollbar ${className}`, style: { ...getContainerStyle(padding), gap: `${gap}px` }, role: "list", onScroll: onScroll, children: children?.length ? (children?.map((child, idx) => (jsx(SwipeListControlItem, { style: getContainerStyle(padding / 4), "aria-current": Boolean(activeIndex === idx), children: child }, String(idx))))) : (jsx(SwipeListControlItem, { children: children })) }));
+  });
+
+  const DOT_STYLES = 'bg-primary-main opacity-30 w-1.5 h-1.5 min-w-1.5 min-h-1.5 rounded-full';
+  const BASE_DOT_WIDTH = 6;
+  const ACTIVE_DOT_WIDTH_CHANGE = 16;
+  const BASE_DOT_OPACITY = 0.3;
+  const ACTIVE_DOT_OPACITY_CHANGE = 0.7;
+  const SwipeListControlDots = JSX(({ children, activeIndex, indexFraction, showDots }) => {
+      return showDots && children?.length ? (jsx("div", { className: "flex gap-2 mx-auto mt-[22px] w-fit", children: children?.map((_, idx) => (jsx("div", { className: `${DOT_STYLES}`, style: getDotStyles(idx, activeIndex, indexFraction), "aria-hidden": true }, String(idx)))) })) : null;
+  });
+  const getDotStyles = (currentIdx, activeIndex, indexFraction) => {
+      if (currentIdx < activeIndex || currentIdx > activeIndex + 1)
+          return null;
+      const leftIndexMod = 1 - indexFraction;
+      const rightIndexMod = indexFraction;
+      return currentIdx === activeIndex
+          ? {
+              opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * leftIndexMod}`,
+              width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * leftIndexMod}px`,
+          }
+          : {
+              opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * rightIndexMod}`,
+              width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * rightIndexMod}px`,
+          };
+  };
+
+  const SwipeListControl = JSX(({ className, context, children, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, }) => {
+      const [activeIndex, setActiveIndex] = context.useState(0);
+      const [indexFraction, setIndexFraction] = context.useState(0);
+      const handleScroll = (e) => {
+          const { scrollLeft, clientWidth, childElementCount, scrollWidth, children } = e.currentTarget;
+          // horizontal PADDING / 2 to compensate padding-margin combo of child container
+          // without CSS calc function, as wrapper element gets bigger in the DOM, remaining same visually
+          const itemWidth = children[0].offsetWidth - padding / 2;
+          const scrollPoints = getScrollPoints({
+              gap,
+              padding,
+              clientWidth,
+              scrollWidth,
+              childElementCount,
+              itemWidth,
+          });
+          const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
+          setActiveIndex(index);
+          setIndexFraction(fraction);
+      };
+      return (jsxs("div", { className: className, children: [jsx(SwipeListControlList, { gap: gap, padding: padding, activeIndex: activeIndex, onScroll: handleScroll, children: children }), jsx(SwipeListControlDots, { activeIndex: activeIndex, indexFraction: indexFraction, showDots: showDots, children: children })] }));
+  });
+
+  const LinkDocsHorizontalList = JSX(({ context, hasBorder = true, documents, icon }) => {
+      return (jsx(SwipeListControl, { context: context, className: "text-m-sm text-primary-main", children: documents?.length
+              ? documents.map((doc, i) => (jsx(LinkDocsListItem, { className: hasBorder ? 'rounded-md border-main-stroke border p-4' : '', doc: doc, icon: icon }, String(i))))
+              : null }));
+  });
+
+  const LinkDocs = JSX(({ className = '', context, title, subtitle, icon = 'DocIcon', documents, listMode = 'vertical', hasBorder = true, }) => {
+      return (jsxs("section", { className: `py-6 px-4 bg-white ${className}`, children: [title ? (jsx(Heading, { type: "h2", className: `text-center ${subtitle ? 'mb-2' : 'mb-5'}`, text: title })) : null, subtitle ? jsx("h3", { className: "mb-5 text-center text-m-base", children: subtitle }) : null, listMode === 'vertical' ? (jsx(LinkDocsVerticalList, { hasBorder: hasBorder, documents: documents, icon: icon })) : (jsx(LinkDocsHorizontalList, { context: context, hasBorder: hasBorder, documents: documents, icon: icon }))] }));
+  });
 
   const PictureText = JSX(({ className, title, image, benefits }) => {
-      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-14 ${className}`, children: [jsx(Title, { className: "font-medium m-0 text-center", children: 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] })] }));
+      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-14 ${className}`, children: [jsx(Heading, { type: "h2", className: "text-center", text: 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] })] }));
   });
   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" })), 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)));
@@ -587,7 +700,7 @@
   });
 
   const Accordion = JSX(({ title, description, accordionItems, context, className = '', bordered }) => {
-      return (jsxs("section", { className: `py-6 font-sans bg-white text-primary-text ${bordered ? 'px-4' : ''} ${className}`, children: [title ? (jsx(Title, { className: "m-0 mb-2 font-medium text-center", size: "M", children: title })) : null, description ? jsx("div", { className: "mb-5 text-m-md text-center", children: description }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, context: context, bordered: bordered }, `AccordionItem${i}`))) })) : null] }));
+      return (jsxs("section", { className: `py-6 font-sans bg-white text-primary-text ${bordered ? 'px-4' : ''} ${className}`, children: [title ? jsx(Heading, { type: "h3", className: "mb-2 text-center", text: title }) : null, description ? jsx("div", { className: "mb-5 text-m-md text-center", children: description }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, context: context, bordered: bordered }, `AccordionItem${i}`))) })) : null] }));
   });
 
   const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
@@ -610,7 +723,7 @@
       transparent: 'text-white',
   };
   const Logo = JSX(({ className = '', href, children, targetBlank, bgColor = 'bg-white', hideTitle }) => {
-      return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', children: [jsx(SVG, { className: `${SVG_COLOR[bgColor]} w-10 h-[38px]`, viewBox: "0 0 40 45", paths: LOGO_PATHS.map((d) => ({ d })) }), !hideTitle && (jsx("span", { className: `${TEXT_COLOR[bgColor]} text-sm font-medium ml-2.5`, children: children || 'Россельхозбанк' }))] }));
+      return (jsxs("a", { className: `inline-flex items-center font-sans no-underline ${className}`, href: href || 'https://rshb.ru/', target: targetBlank ? '_blank' : '_self', "aria-label": "\u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A", children: [jsx(SVG, { className: `${SVG_COLOR[bgColor]} w-10 h-[38px]`, viewBox: "0 0 40 45", paths: LOGO_PATHS.map((d) => ({ d })) }), !hideTitle && (jsx("span", { className: `${TEXT_COLOR[bgColor]} text-sm font-medium ml-2.5`, children: children || 'Россельхозбанк' }))] }));
   });
 
   const MobileAppTile = JSX(({ className, title = 'Мобильное приложение', description, href = '#' }) => {
@@ -661,10 +774,10 @@
       { origins: ['ok.ru'], icon: 'OkIcon', label: 'Одноклассники', width: '12px', height: '20px' },
   ];
   const MediaButton = JSX(({ href }) => {
-      const { icon, width, height } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+      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:fill-primary-main", href: href, target: "_blank", rel: "noopener noreferrer", children: Icon && jsx(Icon, { name: icon, width: width, height: height, asSVG: true, className: "block" }) }));
+      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:fill-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" }) }));
   });
 
   const SocialMedia = JSX(({ className, media, context }) => {
@@ -726,7 +839,11 @@
       return activeSubItem;
   };
 
-  const isTopItemActive = (router) => (topItem) => topItem.items?.some(isSubItemActive(router)) || isHrefActive(topItem.href, router);
+  const checkIsHrefSameOrigin = (href, router) => getOrigin(href) === getOrigin(router.href);
+
+  const isTopItemActive = (router) => (topItem) => topItem.items?.some(isSubItemActive(router)) ||
+      isHrefActive(topItem.href, router) ||
+      checkIsHrefSameOrigin(topItem.href, router);
 
   const cmp = (a) => (b) => a?.href === b?.href;
   const substitute = (items, substitution) => (items || []).map((_) => substitution?.find(cmp(_)) || _);
@@ -773,7 +890,7 @@
       return (jsxs(Button, { href: href, className: "flex text-sm mb-4", children: [icon ? jsx(Icon, { className: "pr-1", name: icon, width: "24", height: "24", asSVG: true }) : null, jsx("span", { className: "pl-0.5 font-medium", children: text })] }, `headerSubMenu-${i}`));
   };
 
-  const HeaderTop = JSX(({ onClick, bgColor }) => (jsxs("div", { className: "flex items-center justify-between border-0 border-b border-main-divider h-[50px]", children: [jsxs("div", { className: "flex items-center", children: [jsx("button", { className: "pr-4", onClick: onClick, children: jsx(Icon, { name: bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite', width: "24", height: "24", asSVG: true }) }), jsx(Logo, { bgColor: bgColor })] }), jsx("button", { className: `${bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'} text-sm`, children: "\u0412\u043E\u0439\u0442\u0438" })] })));
+  const HeaderTop = JSX(({ onClick, bgColor }) => (jsxs("div", { className: "flex items-center justify-between border-0 border-b border-main-divider h-[50px]", children: [jsxs("div", { className: "flex items-center", children: [jsx("button", { className: "pr-4", onClick: onClick, "aria-label": "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043C\u0435\u043D\u044E", children: jsx(Icon, { name: bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite', width: "24", height: "24", asSVG: true }) }), jsx(Logo, { bgColor: bgColor })] }), jsx("button", { className: `${bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'} text-sm`, children: "\u0412\u043E\u0439\u0442\u0438" })] })));
 
   const Header = JSX(({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, burgerSubMenu }) => {
       const router = context.useRouter();
@@ -785,7 +902,7 @@
       const activeSubItem = findActiveSubItem(router)(subItems);
       const [burgerMenuShow, setBurgerMenuShow] = context.useState(false);
       const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
-      return (jsxs("header", { className: `${bgColor} ${className}`, children: [jsxs("div", { className: "container px-4 py-0", children: [jsx(HeaderTop, { onClick: toggleBurgerMenu, bgColor: bgColor }), jsx("nav", { className: "flex items-center m-0 p-0 overflow-x-scroll overflow-y-hidden w-full h-[50px]", children: jsx("div", { className: "flex", children: subItems?.map((_, i) => renderSubItem({
+      return (jsxs("header", { className: `${bgColor} ${className}`, children: [jsxs("div", { className: "container px-4 py-0", children: [jsx(HeaderTop, { onClick: toggleBurgerMenu, bgColor: bgColor }), jsx("nav", { className: "flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]", children: jsx("div", { className: "flex", children: subItems?.map((_, i) => renderSubItem({
                                   ...useLink({ router, handlerDecorator }, _),
                                   active: _ === activeSubItem,
                                   bgColor,
@@ -794,8 +911,8 @@
   const renderSubItem = (item, i) => (jsx(HeaderItem, { className: "mr-8 whitespace-nowrap text-sm", ...item }, String(i)));
 
   const GOLDEN_RATIO = 1.618;
-  const Placeholder = JSX(({ className, context, title }) => {
-      return (jsx(Tile, { className: className, context: context, title: title, description: "\u0411\u043B\u043E\u043A \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u043A\u0435...", children: jsx("figure", { className: "m-0 min-w-[600px]", children: renderShimmer() }) }));
+  const Placeholder = JSX(({ className = '', context, title }) => {
+      return (jsx(Tile, { className: `pr-0 min-h-0 ${className}`, context: context, title: title, description: "\u0411\u043B\u043E\u043A \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u043A\u0435...", children: jsx("figure", { className: "m-0", children: renderShimmer() }) }));
   });
   const renderShimmer = (size = 3) => goldenSequence(100, size)
       .map((_) => Math.floor(_))
@@ -812,11 +929,11 @@
       secondary: 'text-white',
   };
   function renderBenefit(benefit, i, version) {
-      return (jsxs("div", { className: "flex gap-3 items-center mb-2.5 last:mb-0", children: [benefit.icon && (jsx(Icon, { className: "w-[25px] h-[25px] rounded-full box-border", name: benefit.icon, width: "24", height: "24" })), jsx("h4", { className: `font-medium text-m-base m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description && (jsx("div", { className: `font-normal text-m-sm ${benefitDescStyleMap[version]}`, children: benefit.description }))] }, String(i)));
+      return (jsxs("div", { className: "flex gap-3 items-center mb-2.5 last:mb-0", children: [benefit.icon && (jsx(Icon, { className: "w-[25px] h-[25px] rounded-full box-border", name: benefit.icon, width: "24", height: "24" })), jsx("div", { className: `font-medium text-m-base m-0 ${benefitTitleStyleMap[version]}`, children: benefit.label }), benefit.description && (jsx("div", { className: `font-normal text-m-sm ${benefitDescStyleMap[version]}`, children: benefit.description }))] }, String(i)));
   }
 
-  const ProductBlockInner = JSX(({ className, context, title, titleSize, description, benefits, buttons, image, items, version = 'primary', }) => {
-      return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { children: jsx(BaseTile, { context: context, title: title, titleSize: titleSize || 'XL', description: description, items: items, buttons: buttons, children: benefits?.length ? (jsx("div", { className: "mt-[19px]", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null }) }), image?.src && (jsx("div", { className: "mt-5", children: jsx(Img, { image: { className: 'block', ...image } }) }))] }));
+  const ProductBlockInner = JSX(({ className, context, title, headingType, description, benefits, buttons, image, items, version = 'primary', }) => {
+      return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { children: jsx(BaseTile, { context: context, title: title, headingType: headingType || 'h2', description: description, items: items, buttons: buttons, children: benefits?.length ? (jsx("div", { className: "mt-[19px]", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null }) }), image?.src && (jsx("div", { className: "mt-5", children: jsx(Img, { image: { className: 'block', ...image } }) }))] }));
   });
 
   const ProductBlock = JSX(
@@ -826,38 +943,43 @@
       return (jsx("section", { className: `font-sans bg-white px-4 py-6 ${className || ''}`, children: jsx(ProductBlockInner, { ...props }) }));
   });
 
-  const ProductGalleryBlock = JSX(({ block, titleSize, context }) => {
-      return (jsx("section", { className: "flex grow-0 shrink-0 basis-full px-4 py-6", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { context: context, titleSize: titleSize, ...block }) }) }));
+  const ProductGalleryBlock = JSX(({ block, headingType, context }) => {
+      return (jsx("section", { className: "flex grow-0 shrink-0 basis-full px-4 py-6", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { context: context, headingType: headingType, ...block }) }) }));
   });
 
   const ProductGallery = JSX(({ className, context, duration = 0, slides = [] }) => {
       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 || ''}`, children: [jsx("div", { className: `flex duration-1000`, style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((block, i) => (jsx(ProductGalleryBlock, { block: block, context: context }, String(i)))) }), jsx("div", { className: "flex px-4 py-6", children: slides.map((_, i) => renderNavButton({
+                      slide: _.productBlock,
                       i,
                       activeSlideIndex,
                       onClick: () => setActiveSlideIndex(i),
                       duration,
                   })) })] }));
   });
-  function renderNavButton({ i, activeSlideIndex, onClick, duration }) {
+  function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
       const isActiveBtn = i === activeSlideIndex;
       const progressBarClassName = isActiveBtn ? 'animate-slide bg-primary-main' : 'bg-main-divider';
-      return (jsx("button", { type: "button", onClick: onClick, className: `relative overflow-hidden border-0 bg-inherit cursor-pointer pl-0 mr-1.5 pt-4 pb-5 last:mr-0 grow basis-0`, children: jsx("div", { className: `absolute bottom-0 left-0 w-full h-[3px] ${progressBarClassName}`, style: { animationDuration: `${duration}s`, animationFillMode: 'forwards' } }) }, String(i)));
+      return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `relative overflow-hidden border-0 bg-inherit cursor-pointer pl-0 mr-1.5 pt-4 pb-5 last:mr-0 grow basis-0`, children: jsx("div", { className: `absolute bottom-0 left-0 w-full h-[3px] ${progressBarClassName}`, style: { animationDuration: `${duration}s`, animationFillMode: 'forwards' } }) }, String(i)));
   }
 
   const StepsBlock = JSX(({ className, title, description, steps, size = 'normal' }) => {
-      return (jsxs("section", { className: `box-border font-sans text-primary-text bg-white px-4 py-6 flex flex-col ${className || ''}`, children: [title && (jsx(Title, { size: "M", className: "font-medium m-0 text-center", children: title })), description && jsx("p", { className: `text-m-md text-center ${title && 'mt-2'}`, children: description }), steps?.length ? (jsx("div", { className: `box-border py-0.5 mb-0.5 mt-5`, children: jsx("div", { className: "flex flex-col justify-between gap-x-[101px]", children: steps.map((step, i, array) => renderStepTitle({ step, size }, i, array)) }) })) : null] }));
+      return (jsxs("section", { className: `box-border font-sans text-primary-text bg-white px-4 py-6 flex flex-col ${className || ''}`, children: [title && jsx(Heading, { type: "h3", className: "text-center", text: title }), description && jsx("p", { className: `text-m-md text-center ${title && 'mt-2'}`, children: description }), steps?.length ? (jsx("div", { className: `box-border py-0.5 mb-0.5 mt-5`, children: jsx("div", { className: "flex flex-col justify-between gap-x-[101px]", children: steps.map((step, i) => renderStepTitle({ step, size, i, length: steps.length })) }) })) : null] }));
   });
-  const renderStepTitle = ({ step, size }, i, array) => {
-      const isLastStep = array.length - 1 === i;
+  const renderStepTitle = (params) => {
+      const { step, size, i, length } = params;
+      const isLastStep = length - 1 === i;
+      const margin = size === 'normal' ? 'ml-[34px]' : 'ml-[24px]';
+      return (jsx("div", { children: jsxs("div", { className: "flex flex-row text-center relative", children: [jsxs("div", { children: [renderIconArea(step, size, i), !isLastStep && jsx("div", { className: `min-h-8 h-full w-[2px] bg-secondary-light ${margin}` })] }), jsxs("div", { className: "flex flex-col justify-center relative", children: [step.label && (jsx("div", { className: "font-medium text-m-title-xs m-0 text-left", children: step.label })), step.description && (jsx("div", { className: `font-normal text-sm text-secondary-text text-left ${step.label ? 'mt-1' : ''}`, children: step.description }))] })] }, String(i)) }, String(i)));
+  };
+  const renderIconArea = (step, size, i) => {
       const iconAreaSize = size === 'normal'
           ? 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]'
           : 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]';
       const iconSize = size === 'normal' ? '38' : '27';
-      const margin = size === 'normal' ? 'ml-[34px]' : 'ml-[24px]';
       const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
-      return (jsxs("div", { children: [jsxs("div", { className: "flex flex-row text-center relative", children: [jsx("div", { className: `${iconAreaSize} bg-secondary-light rounded-full z-10 mr-3 flex justify-center content-center`, children: jsx("span", { className: `font-medium text-secondary-text self-center ${iconTextSize}`, children: (step.icon && jsx(Icon, { name: step.icon, width: iconSize, height: iconSize })) || i + 1 }) }), jsxs("div", { className: "flex flex-col justify-center relative", children: [step.label && (jsx("div", { className: "font-medium text-m-title-xs m-0 text-left", children: step.label })), step.description && (jsx("div", { className: `font-normal text-sm text-secondary-text text-left ${step.label ? 'mt-1' : ''}`, children: step.description }))] })] }, String(i)), !isLastStep && jsx("div", { className: `h-8 w-[2px] bg-secondary-light ${margin}` })] }));
+      return (jsx("div", { className: `${iconAreaSize} bg-secondary-light rounded-full z-10 mr-3 flex justify-center content-center`, children: jsx("span", { className: `font-medium text-secondary-text self-center ${iconTextSize}`, children: (step.icon && jsx(Icon, { name: step.icon, width: iconSize, height: iconSize })) || i + 1 }) }));
   };
 
   const Blocks = {
@@ -865,6 +987,7 @@
       Footer,
       Header,
       Headline,
+      LinkDocs,
       Placeholder,
       ProductBlock,
       ProductGallery,