@redneckz/wildless-cms-uni-blocks 0.3.8 → 0.3.11

package/mobile/bundle/bundle.umd.js

@@ -266,59 +266,6 @@
       return (jsxs("section", { className: `px-4 py-6 ${bgColor} ${className}`, children: [title && jsx(Heading, { headingType: "h2", className: "text-primary-text", title: 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 }) }))] }));
   });
 
-  /*
-   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 box-border ${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;
   /*
@@ -329,10 +276,6 @@
   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;
@@ -357,7 +300,64 @@
           };
   };
 
-  const SwipeListControl = JSX(({ className, context, children, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, }) => {
+  const SwipeListControlItem = JSX(({ className = '', children, ...rest }) => {
+      return (jsx("div", { className: `snap-center snap-always min-w-full box-border ${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`,
+      };
+  };
+
+  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 })) }));
+  });
+
+  /*
+    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 };
+  };
+
+  /*
+   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;
+  };
+
+  const SwipeListControl = JSX(({ className, context, children, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, showDots = true, onSlideChange, }) => {
       const [activeIndex, setActiveIndex] = context.useState(0);
       const [indexFraction, setIndexFraction] = context.useState(0);
       const handleScroll = (e) => {
@@ -374,11 +374,16 @@
               itemWidth,
           });
           const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
+          if (index !== activeIndex && onSlideChange) {
+              onSlideChange();
+          }
           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 })] }));
+      return (jsxs("div", { className: className, children: [renderSwipeList({ gap, padding, activeIndex, handleScroll, children }), renderSwipelistDots({ activeIndex, indexFraction, showDots, children })] }));
   });
+  const renderSwipeList = ({ gap, padding, activeIndex, handleScroll, children }) => (jsx(SwipeListControlList, { gap: gap, padding: padding, activeIndex: activeIndex, onScroll: handleScroll, children: children }));
+  const renderSwipelistDots = ({ activeIndex, indexFraction, showDots, children }) => (jsx(SwipeListControlDots, { activeIndex: activeIndex, indexFraction: indexFraction, showDots: showDots, children: children }));
 
   const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
       const { text, fileSize, ...linkProps } = doc;
@@ -412,7 +417,7 @@
   });
 
   const LinkDocs = JSX(({ className = '', context, title, subtitle, icon = 'DocIconMonoColor', documents, listMode = 'vertical', hasBorder = true, }) => {
-      return (jsxs("section", { className: `font-sans py-6 px-4 bg-white ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${subtitle ? 'mb-2' : 'mb-5'}`, title: title })) : null, subtitle ? jsx("h3", { className: "mb-5 text-center text-m-md", children: subtitle }) : null, listMode === 'vertical' ? (jsx(LinkDocsVerticalList, { hasBorder: hasBorder, documents: documents, icon: icon })) : (jsx(LinkDocsHorizontalList, { context: context, hasBorder: hasBorder, documents: documents, icon: icon }))] }));
+      return (jsxs("section", { className: `font-sans text-primary-text py-6 px-4 bg-white ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${subtitle ? 'mb-2' : 'mb-5'}`, title: title })) : null, subtitle ? (jsx("h3", { className: "mt-0 font-normal mb-5 text-center text-m-md", 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 }) => {
@@ -570,17 +575,17 @@
   const ButtonSection = JSX(({ context, className = '', buttons }) => {
       const { handlerDecorator } = context;
       const router = context.useRouter();
-      return buttons?.length ? (jsx("div", { className: `${className}`, children: buttons.map((button, index) => renderButton(useLink({ router, handlerDecorator }, button), index)) })) : null;
+      return buttons?.length ? (jsx("div", { className: `${className}`, children: buttons.map((button, index) => renderButton$2(useLink({ router, handlerDecorator }, button), index)) })) : null;
   });
-  function renderButton({ icon, ...button }, i) {
+  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)));
   }
 
   const Description = JSX((props) => {
-      const { className, description } = props;
-      return jsx("div", { className: `font-normal text-m-md ${className || ''}`, children: description });
+      const { className = '', description } = props;
+      return jsx("div", { className: `font-normal text-m-md ${className}`, children: description });
   });
 
   const BaseTile = JSX(({ className = '', title, children, buttons, image }) => {
@@ -638,7 +643,7 @@
   };
   const Tile = JSX((props) => {
       const { context, title, description, items, children, buttons, image, className = '', version = 'primary', role, } = props;
-      return (jsx("section", { className: `font-sans p-9 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, role: role, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
+      return (jsx("section", { className: `overflow-hidden font-sans p-9 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, role: role, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
               ${version === 'primary' ? 'text-primary-text' : ''}` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description && jsx(Description, { className: "mt-4 max-w-[600px]", description: description }), children, renderList(items, version)] }) }));
   });
   function renderList(items, version) {
@@ -675,13 +680,16 @@
   }
   function renderCard$1(card, key) {
       return (jsxs("div", { className: `box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
-      ${blockStyle[card.version ?? 'primary']}`, role: "listitem", children: [jsxs("div", { children: [card.image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: card.image }) })) : null, card.title ? jsx("h4", { className: `font-medium text-m-title-xs m-0`, children: card.title }) : null, card.description ? renderDescription(card) : null, card.items?.length ? renderItems$1(card.items) : null] }), card?.button?.href ? jsx(Button, { className: "mt-3", ...card.button }) : null] }, key));
+      ${blockStyle[card.version ?? 'primary']}`, children: [jsxs("div", { children: [card.image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: card.image }) })) : null, card.title ? jsx("h4", { className: `font-medium text-m-title-xs m-0`, children: card.title }) : null, card.description ? renderDescription(card) : null, card.items?.length ? renderItems$1(card.items) : null] }), card?.button?.text ? renderButton$1(card.button) : null] }, key));
+  }
+  function renderButton$1(button) {
+      return (jsx(Button, { className: "mt-3", appendLeft: button?.icon && jsx(Icon, { name: button?.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
   }
   function renderDescription(card) {
       return (jsx("div", { className: `text-secondary-text mt-2 ${card.version === 'secondary' ? 'text-white opacity-80' : ''}`, children: card.description }));
   }
   function renderItems$1(items) {
-      return (jsx("section", { className: "mt-3", children: items.map((item) => (jsxs("div", { children: [jsx("span", { className: "text-m-md font-medium", children: item.title }), jsx("span", { className: "text-m-sm text-secondary-text pl-2", children: item.text })] }))) }));
+      return (jsx("section", { className: "mt-3", children: items.map((item, i) => (jsxs("div", { children: [jsx("span", { className: "text-m-md font-medium", children: item.title }), jsx("span", { className: "text-m-sm text-secondary-text pl-2", children: item.text })] }, String(i)))) }));
   }
 
   const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
@@ -733,7 +741,7 @@
       gray: 'bg-secondary-text',
   };
   const BlockItem = JSX(({ className = '', isDotted = true, text, children, version = 'primary' }) => {
-      return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted && jsx("div", { className: getListStyle(version) }), "!!!!!", jsx("span", { className: TEXT_STYLE_MAP[version], children: text || children })] }));
+      return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted && jsx("div", { className: getListStyle(version) }), jsx("span", { className: TEXT_STYLE_MAP[version], children: text || children })] }));
   });
   const getListStyle = (version) => {
       const size = version === 'gray' ? 'w-[6px] h-[6px] min-w-[6px] min-h-[6px]' : 'w-2 h-2 min-w-2 min-h-2';
@@ -742,8 +750,11 @@
 
   const GalleryCardInner = JSX(({ title, description, image, items, button, version }) => {
       const titleStyleClasses = getTitleStyle(version, description, items);
-      return (jsxs("div", { 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 && jsx(Button, { className: "mt-6", ...button })] }));
+      return (jsxs("div", { 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(button) : null] }));
   });
+  function renderButton(button) {
+      return (jsx(Button, { className: "mt-6 w-full", appendLeft: button.icon && jsx(Icon, { name: 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 });
   }
@@ -778,11 +789,21 @@
       const showNextButton = isGalleryScrollAvailable &&
           cards?.length - activeCardIndex > galleryLengthForScrollMap[version];
       const showPrevButton = isGalleryScrollAvailable && activeCardIndex > 0;
-      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-[50px] overflow-hidden ${className}`, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 rotate-180", 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-1 z-10", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E" })), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })] }));
+      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-[50px] overflow-hidden ${className}`, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 rotate-180 z-10 mt-[25px]", 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-[25px]", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E" })), jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" })] }));
   });
 
   const MiniGallery = JSX((props) => (jsx(GalleryInner, { ...props, version: "mini" })));
 
+  const LinkList = JSX(({ className = '', documents }) => {
+      return (jsx("section", { className: `font-sans bg-white mt-[10px] ${className}`, children: jsx("ul", { className: "flex flex-col text-sm text-secondary-text p-0", children: documents?.length ? renderLinkListItem(documents) : null }) }));
+  });
+  const renderLinkListItem = (documents) => {
+      return documents.map((doc, i) => {
+          const { text, ...linkProps } = doc;
+          return (jsx("li", { className: "mb-4 list-none", children: jsx("a", { className: "hover:text-primary-main", role: "link", ...linkProps, children: text ? text : null }) }, `list_item_${String(i)}`));
+      });
+  };
+
   const AccordionBlocks = {
       Headline,
       LinkDocs,
@@ -792,10 +813,11 @@
       ProductTile,
       Gallery,
       MiniGallery,
+      LinkList,
   };
 
   const AccordionItemInner = JSX(({ blocks, context }) => {
-      return (jsx("div", { className: `transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0 `, children: blocks?.length ? blocks.map(renderBlock$1(context)) : null }));
+      return (jsx("div", { className: "transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0", children: blocks?.length ? blocks.map(renderBlock$1(context)) : null }));
   });
   const renderBlock$1 = (context) => (block, i) => {
       const type = block?.accordionBlockType;
@@ -803,7 +825,7 @@
           return null;
       }
       const AccordionBlock = AccordionBlocks[type];
-      return (jsx("div", { className: "mb-5 last:mb-0 py-2.5", children: jsx(AccordionBlock, { context: context, ...block, className: "!p-0" }) }, `block_${i}`));
+      return (jsx("div", { className: "mb-5 last:mb-0", children: jsx(AccordionBlock, { context: context, ...block, className: "!p-0" }) }, `block_${i}`));
   };
 
   const isActiveHandler = ({ context, blocks }) => {
@@ -829,12 +851,13 @@
           context,
           blocks,
       });
-      return (jsxs("li", { className: `${bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0 py-[14px]'} border-solid border-main-divider`, children: [jsxs("button", { className: `border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
-        ${hasContent ? 'group cursor-pointer' : ''}`, onClick: handleToggle, children: [jsx("span", { className: `text-m-title-xs pr-2.5 font-medium ${hasContent ? 'group-hover:text-primary-main' : ''}`, children: label }), hasContent ? jsx(Icon, { name: icon, width: "24", height: "24", asSVG: true }) : null] }), hasContent ? jsx(AccordionItemInner, { blocks: blocks, context: context }) : null] }));
+      return (jsxs("li", { className: `${bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0'} border-solid border-main-divider`, children: [jsxs("button", { className: `border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
+          ${bordered ? '' : 'py-[14px] px-0'}
+          ${hasContent ? 'group cursor-pointer' : ''}`, onClick: handleToggle, children: [jsx("span", { className: `text-sm pr-2.5 font-medium ${hasContent ? 'group-hover:text-primary-main' : ''}`, children: label }), hasContent ? jsx(Icon, { name: icon, width: "20", height: "20", asSVG: true }) : null] }), hasContent ? jsx(AccordionItemInner, { blocks: blocks, context: context }) : null] }));
   });
 
   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(Heading, { headingType: "h3", className: "mb-2 text-center", title: 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 px-4 font-sans bg-white text-primary-text ${className}`, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-2 text-center", title: 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 CBR_EXCHANGE_RATE_URL = 'https://www.cbr-xml-daily.ru/daily_json.js';
@@ -887,13 +910,13 @@
   });
 
   const MobileAppTile = JSX(({ className, title = 'Мобильное приложение', description, href = '#' }) => {
-      return (jsx("div", { className: `col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light ${className || ''}`, children: href ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "flex justify-center align-middle rounded-md bg-primary-main w-[50px] h-[50px]", children: jsx(Logo, { className: "w-[33px]", bgColor: "transparent", hideTitle: true }) }), jsxs("a", { href: href, target: "_blank", className: "flex flex-col justify-center pl-3", children: [jsx("div", { className: "text-sm font-medium", children: title }), jsx("div", { className: "text-xs text-secondary-text", children: description })] })] })) : null }));
+      return (jsx("div", { className: `col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light ${className || ''}`, children: href ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "flex justify-center align-middle rounded-md bg-primary-main w-[50px] h-[50px]", children: jsx(Logo, { className: "w-[33px]", bgColor: "transparent", hideTitle: true }) }), jsxs("a", { href: href, target: "_blank", className: "flex flex-col justify-center pl-3", children: [jsx("div", { className: "text-m-button font-medium mb-[3px]", children: title }), jsx("div", { className: "text-m-button text-secondary-text", children: description })] })] })) : null }));
   });
 
   const Contacts = JSX(({ className, items, hasButton, context }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("div", { className: `flex flex-col ${className || ''}`, children: [items?.length ? items.map(renderContact) : null, hasButton ? (jsx(Button, { version: "primary", className: "my-4", ...useLink({ router, handlerDecorator }, {
+      return (jsxs("div", { className: `flex flex-col ${className || ''}`, children: [items?.length ? items.map(renderContact) : null, hasButton ? (jsx(Button, { version: "primary", className: "mt-0.5 mb-5", ...useLink({ router, handlerDecorator }, {
                       text: 'Обратная связь',
                       href: '/',
                       target: '_blank',
@@ -901,7 +924,7 @@
   });
   const renderContact = (item, index) => {
       const { type, text, description } = item;
-      return (jsxs("div", { className: "mb-4", children: [jsx("div", { children: renderText(type, text) }), jsx("div", { className: "font-sans text-sm text-secondary-text", children: description })] }, String(index)));
+      return (jsxs("div", { className: "mb-3.5", children: [jsx("div", { children: renderText(type, text) }), jsx("div", { className: "font-sans text-sm text-secondary-text", children: description })] }, String(index)));
   };
   const renderText = (type, text = '') => {
       switch (type) {
@@ -918,7 +941,7 @@
   const HorizontalNavigation = JSX(({ title, links, className = '', context }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("div", { className: className, children: [jsx("span", { className: "text-primary-text font-sans font-medium text-sm", children: title }), links?.length ? (jsx("div", { className: "flex flex-col gap-5 py-5", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
+      return (jsxs("div", { className: className, children: [jsx("span", { className: "text-primary-text font-sans font-medium text-sm", children: title }), links?.length ? (jsx("div", { className: "flex flex-col gap-2 pt-3", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
   });
   const HorizontalNavigationLink = JSX(({ className = '', index, text, href, target, onClick }) => (jsx("a", { className: `font-sans font-normal text-sm text-secondary-text hover:text-primary-main inline-block no-underline ${className}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
 
@@ -937,7 +960,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: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" }) }));
+      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" })) }));
   });
 
   const SocialMedia = JSX(({ className, media, context }) => {
@@ -949,23 +972,23 @@
   const TextInformation = JSX(({ className, links, context }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { className: "pt-5 pb-[5px]", children: jsx("span", { className: "font-sans font-normal text-xs text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: `flex flex-col justify-start items-start gap-5 pt-[5px]`, children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
+      return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { className: "py-6", children: jsx("span", { className: "font-sans font-normal text-xs text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: `flex flex-col justify-start items-start gap-2`, children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
   });
   const TextInformationLink = JSX(({ className, index, text, href, target, onClick }) => (jsx("a", { className: `font-sans font-normal text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${className || ''}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
 
   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-[20px] h-[20px]", children: jsx(Icon, { name: "LoupeIcon", width: "24", height: "24" }) }), !term && (jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-normal text-sm 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: "w-auto 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-[20px] h-[20px]", children: jsx(Icon, { name: "LoupeIcon", width: "24", height: "24" }) }), !term && (jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-normal text-sm 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 placeholder-transparent font-sans font-normal text-base text-black border border-solid rounded 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", placeholder: "some search" }), jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer", 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" }) })] }));
+                      setTerm('');
+                  }, children: jsx(Icon, { name: "CloseIcon", width: "24", height: "24" }) })] }));
   });
 
   const getAccordionItems = (items) => items?.map((item) => ({
       label: item.text || '',
       blocks: [
           {
-              accordionBlockType: 'LinkDocs',
+              accordionBlockType: 'LinkList',
               documents: item.items || [],
           },
       ],
@@ -976,11 +999,11 @@
           context,
           accordionItems: getAccordionItems(topItems),
       };
-      return (jsxs("footer", { className: `px-4 py-[26px] bg-white ${className}`, children: [jsx(Contacts, { className: "overflow-hidden", items: contacts, context: context, hasButton: true }), jsx(Accordion, { className: "p-0 pt-0 pb-0 mb-4", ...propsTextBlock }), jsx("div", { children: subMenu?.map(renderSubMenuItem) }), jsx(MobileAppTile, { context: context, title: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435", description: "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0434\u043B\u044F IOS \u0438 Android" }), jsx(SearchBar, { context: context, className: "grow" }), jsx(SocialMedia, { className: "pb-4", media: socialMedia, context: context }), jsx(HorizontalNavigation, { title: horizontalNavigationTitle, links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
+      return (jsxs("footer", { className: `px-4 py-[26px] bg-white ${className}`, children: [jsx(Contacts, { className: "overflow-hidden", items: contacts, context: context, hasButton: true }), jsx(Accordion, { className: "!p-0 mb-4", ...propsTextBlock }), jsx("div", { children: subMenu?.map(renderSubMenuItem) }), jsx(MobileAppTile, { context: context, title: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435", description: "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0434\u043B\u044F IOS \u0438 Android" }), jsx(SearchBar, { context: context, className: "grow" }), jsx(SocialMedia, { className: "pb-4", media: socialMedia, context: context }), jsx(HorizontalNavigation, { title: horizontalNavigationTitle, links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
   });
   const renderSubMenuItem = (menu, i) => {
       const { icon, href, text } = menu;
-      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 })] }, `footer-${i}`));
+      return (jsxs(Button, { version: "link", 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-2.5 font-medium text-primary-text", children: text })] }, `footer-${i}`));
   };
 
   const maxBy = (discriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
@@ -1043,14 +1066,14 @@
 
   const HeaderBurger = JSX(({ context, burgerSubMenu, onClick, defaultLocation = '', children }) => {
       const [city, getCity] = context.useGeolocation(defaultLocation);
-      return (jsxs("div", { className: "absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20", children: [jsx("button", { className: "absolute top-4 right-4 border-none bg-transparent", onClick: onClick, children: jsx(Icon, { name: "CloseIcon", width: "24", height: "24", asSVG: true }) }), jsxs(Button, { onClick: getCity, className: "flex items-center text-sm text-secondary-text mb-4", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24", className: "box-border mr-2", asSVG: true }), city] }), children, jsx("div", { className: "mb-7", children: burgerSubMenu?.map(renderBurgerSubMenuItem) }), jsx(SearchBar, { context: context, className: "grow" })] }));
+      return (jsxs("div", { className: "absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20", children: [jsx("button", { className: "absolute top-4 right-4 border-none bg-transparent cursor-pointer", onClick: onClick, children: jsx(Icon, { name: "CloseIcon", width: "24", height: "24", asSVG: true }) }), jsxs("button", { onClick: getCity, className: "flex items-center text-sm text-secondary-text mb-4 bg-transparent cursor-pointer", children: [jsx(Icon, { name: "GeolocationIcon", width: "20", height: "20", className: "text-primary-main box-border mr-2", asSVG: true }), city] }), children, jsx("div", { className: "mb-7", children: burgerSubMenu?.map(renderBurgerSubMenuItem) }), jsx(SearchBar, { context: context, className: "grow" })] }));
   });
   const renderBurgerSubMenuItem = (menu, i) => {
       const { icon, href, text } = menu;
-      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}`));
+      return (jsxs("a", { href: href, className: "flex text-sm mb-4 hover:text-primary-main", children: [icon ? (jsx(Icon, { className: "text-primary-main 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 border-0 bg-transparent", 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  border-0 bg-transparent`, 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 border-0 bg-transparent cursor-pointer", 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  border-0 bg-transparent cursor-pointer`, children: "\u0412\u043E\u0439\u0442\u0438" })] })));
 
   const Header = JSX(({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, burgerSubMenu }) => {
       const router = context.useRouter();
@@ -1062,7 +1085,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 box-border", 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({
+      return (jsxs("header", { className: `${bgColor} ${className}`, children: [jsxs("div", { className: "container px-4 py-0 box-border", 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 no-scrollbar horizontal-list h-full items-center", children: subItems?.map((_, i) => renderSubItem({
                                   ...useLink({ router, handlerDecorator }, _),
                                   active: _ === activeSubItem,
                                   bgColor,
@@ -1083,7 +1106,7 @@
   }
 
   const ProductBlockInner = JSX(({ className = '', context, title, headingType = 'h2', description, benefits, buttons, image, items, version = 'primary', }) => {
-      return (jsxs("div", { className: `w-full text-primary-text ${className}`, children: [jsx("div", { children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: headingType, title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-5 gap-2.5" })) : null, children: [description && jsx(Description, { description: description }), benefits?.length ? (jsx("div", { className: "mt-5", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null, items?.length ? jsx(List, { items: items }) : null] }) }), renderImage(image)] }));
+      return (jsxs("div", { className: `w-full text-primary-text ${className}`, children: [jsx("div", { children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-5 gap-2.5" })) : null, children: [description ? jsx(Description, { className: "mt-3", description: description }) : null, benefits?.filter((items) => items.label)?.length ? (jsx("div", { className: "mt-3", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null, items?.length ? jsx(List, { className: "mt-3", items: items }) : null] }) }), renderImage(image)] }));
   });
   function renderImage(image) {
       return image?.src ? (jsx("div", { className: "mt-5", children: jsx(Img, { image: { className: 'block', ...image } }) })) : null;
@@ -1097,7 +1120,7 @@
   });
 
   const ProductGalleryBlock = JSX(({ block, headingType, context }) => {
-      return (jsx("section", { className: "flex grow-0 shrink-0 basis-full px-4 pt-6", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { context: context, headingType: headingType || 'h2', ...block }) }) }));
+      return (jsx("section", { className: "flex grow-0 shrink-0 basis-full px-4 pt-6", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { context: context, headingType: headingType || 'h2', ...block }) }) }));
   });
 
   const ProductGallery = JSX(({ className, context, slides = [] }) => {
@@ -1136,6 +1159,7 @@
       ProductGallery,
       StepsBlock,
       TextBlock,
+      LinkList,
   };
 
   const LikeButton = JSX(({ className, onClick, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 w-[36px] bg-inherit cursor-pointer ${className || ''}`, onClick: onClick, "aria-label": ariaLabel, children: renderLikeIcon() })));