@redneckz/wildless-cms-uni-blocks 0.2.114 → 0.3.0

package/mobile/bundle/bundle.umd.js

@@ -186,65 +186,6 @@
       };
   }
 
-  const projectSettings = new (class {
-      _ = {
-          PROD_BRANCH: 'master',
-          FORCED_DRAFT_FLOW: false,
-      };
-      setup(_) {
-          this._ = _;
-      }
-      get TEST_BRANCH() {
-          return this._.TEST_BRANCH;
-      }
-      get RC_BRANCH() {
-          return this._.RC_BRANCH;
-      }
-      get PROD_BRANCH() {
-          return this._.PROD_BRANCH;
-      }
-      get FORCED_DRAFT_FLOW() {
-          return this._.FORCED_DRAFT_FLOW;
-      }
-      get ENABLE_ASSIST() {
-          return this._.ENABLE_ASSIST;
-      }
-      get SITEMAP() {
-          return this._.SITEMAP;
-      }
-      get CDN() {
-          return this._.CDN;
-      }
-  })();
-
-  const Icon = JSX(({ className = '', name, alt = `Icon ${name}`, title = alt, asSVG, ...imgProps }) => {
-      const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
-      if (asSVG) {
-          return (jsxs("svg", { className: className, ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }));
-      }
-      return (jsx("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
-  });
-
-  const getColSpan = (className) => {
-      const colSpanPrefix = 'col-span-';
-      const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
-      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 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 getClasses = (...classes) => classes.filter(Boolean).join(' ');
-
   const isURL = (href) => href?.includes('//');
   const withoutQuery = (href) => (href || '').replace(/\/?\?.*/, '');
   const getOrigin = (href) => {
@@ -302,131 +243,154 @@
       };
   }
 
-  const Img = JSX(({ className = '', image: { size, ...image } }) => {
-      const style = {
-          width: size?.width ? `${size?.width}px` : '100%',
-          height: size?.height ? `${size?.height}px` : '100%',
+  const projectSettings = new (class {
+      _ = {
+          PROD_BRANCH: 'master',
+          FORCED_DRAFT_FLOW: false,
       };
-      return (jsxs("picture", { className: className, children: [image.sources?.length
-                  ? image.sources.map(({ src, format }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format) }, `${index}_${src}`)))
-                  : null, jsx("img", { src: image.src, className: `m-auto ${image.className || ''}`, alt: image.alt || image.title, title: image.title, style: style, ...size })] }));
+      setup(_) {
+          this._ = _;
+      }
+      get TEST_BRANCH() {
+          return this._.TEST_BRANCH;
+      }
+      get RC_BRANCH() {
+          return this._.RC_BRANCH;
+      }
+      get PROD_BRANCH() {
+          return this._.PROD_BRANCH;
+      }
+      get FORCED_DRAFT_FLOW() {
+          return this._.FORCED_DRAFT_FLOW;
+      }
+      get ENABLE_ASSIST() {
+          return this._.ENABLE_ASSIST;
+      }
+      get SITEMAP() {
+          return this._.SITEMAP;
+      }
+      get CDN() {
+          return this._.CDN;
+      }
+  })();
+
+  const svgColorsMap = {
+      none: '',
+      primary: 'text-primary-main',
+  };
+  const Icon = JSX(({ className = '', name, alt = `Icon ${name}`, title = alt, asSVG, color = 'primary', ...imgProps }) => {
+      const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
+      if (asSVG) {
+          return (jsxs("svg", { className: `${svgColorsMap[color]} ${className}`, ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }));
+      }
+      return (jsx("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
   });
-  function formatToMimeType(format) {
-      return format ? `image/${String(format)}` : undefined;
+
+  const ButtonInner = JSX(({ text, aboveText, appendLeft, rounded, version }) => {
+      const withoutText = !text && !aboveText && Boolean(appendLeft);
+      const buttonInnerClasses = version !== 'link'
+          ? `flex items-center justify-center
+          ${withoutText ? 'h-12 w-12' : `px-8 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`} ${rounded ? 'rounded-full' : ''}`
+          : null;
+      return renderButtonInner({ buttonInnerClasses, appendLeft, withoutText, aboveText, text });
+  });
+  function renderButtonInner({ buttonInnerClasses, appendLeft, withoutText, aboveText, text }) {
+      return (jsxs("div", { className: buttonInnerClasses, children: [appendLeft ? appendLeft : null, withoutText ? null : (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 })] }))] }));
   }
 
   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: 'text-primary-main',
   };
   const buttonDisabledStyleMap = {
       primary: 'bg-secondary-dark text-secondary-text',
       secondary: 'bg-secondary-light text-secondary-text',
+      link: '',
   };
   const styleButton = 'w-full text-center font-sans select-none';
-  const Button = JSX(({ className, text, aboveText, appendLeft, href, target, onClick, children, disabled, rounded, version = 'none', ariaLabel, ...rest }) => {
-      const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, rounded: rounded }));
+  const Button = JSX(({ className, text, aboveText, appendLeft, href, target, onClick, children, disabled, rounded, version = 'primary', ariaLabel, ...rest }) => {
+      const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, rounded: rounded, version: version }));
       if (disabled) {
           return (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: "-1", className: `inline-block ${styleButton} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: buttonInner }));
       }
       return (jsx("a", { className: `${styleButton} 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 ? 'button' : 'link', ...rest, children: buttonInner }));
   });
-  const ButtonInner = JSX(({ text, aboveText, appendLeft, rounded }) => {
-      const withoutText = !text && !aboveText && Boolean(appendLeft);
-      const buttonInnerClasses = `flex items-center justify-center ${withoutText ? 'h-12 w-12' : `px-9 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`} ${rounded ? 'rounded-full' : ''}`;
-      return (jsxs("div", { className: buttonInnerClasses, children: [appendLeft ? appendLeft : null, withoutText ? null : (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 })] }))] }));
-  });
 
-  const PADDING_TOP_CLASSES = 'first:mt-0 mt-3';
+  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;
+  });
   function renderButton({ icon, ...button }, i) {
       if (!button?.text)
           return;
-      return icon ? (jsx(Button, { className: PADDING_TOP_CLASSES, appendLeft: jsx(Icon, { name: icon, width: "24", height: "24" }), ...button }, String(i))) : (jsx(Button, { className: PADDING_TOP_CLASSES, ...button }, String(i)));
+      return icon ? (jsx(Button, { appendLeft: jsx(Icon, { name: icon, width: "24", height: "24", asSVG: true }), ...button }, String(i))) : (jsx(Button, { ...button }, String(i)));
   }
 
-  const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
-  const TEXT_STYLE_MAP = {
-      primary: 'text-primary-text',
-      secondary: 'text-secondary-text',
+  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 LIST_STYLE_MAP = {
-      primary: 'bg-primary-main',
-      secondary: 'bg-secondary-text',
-  };
-  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 })] }));
+  const Heading = JSX((props) => {
+      const { className, headingType, title } = props;
+      if (!headingType) {
+          return;
+      }
+      const Tag = headingType;
+      return (jsx(Tag, { className: `font-sans font-medium ${HeadingClass[headingType]} ${className || ''}`, children: title }));
   });
-  const getListStyle = (version, white) => {
-      const color = white ? 'bg-white' : LIST_STYLE_MAP[version];
-      const size = version === 'primary'
-          ? 'w-2 h-2 min-w-2 min-h-2 mt-2'
-          : 'w-[6px] h-[6px] min-w-[6px] min-h-[6px] mt-2.5';
-      return `${LIST_STYLE_CLASSES} ${color} ${size}`;
-  };
 
-  function renderItems$1(items = [], version) {
-      return (jsx("section", { className: "mt-3", role: "list", children: items.map((_, i) => (jsx(BlockItem, { className: "mt-1.5 first:mt-0", text: _, version: version }, String(i)))) }));
-  }
-
-  const BaseTileInner = JSX(({ context, description, children, buttons, image, items, version = 'primary' }) => {
-      const router = context.useRouter();
-      const { handlerDecorator } = context;
-      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 })] }));
+  const BaseTile = JSX(({ className = '', title, children, buttons, image }) => {
+      return (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: `flex grow w-full justify-between`, children: [jsxs("div", { className: `flex flex-col justify-between`, children: [jsx("div", { children: children }), jsx("div", { children: buttons })] }), image] })] }));
   });
 
-  function getTitleSizeByClassName(className = '') {
+  const getColSpan = (className) => {
+      const colSpanPrefix = 'col-span-';
+      const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
+      return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
+  };
+
+  function getTileHeadingType(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';
       }
   }
 
-  const alignBlock = {
-      left: 'items-start',
-      center: 'items-center',
-      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 tileStyleMap = {
-      primary: 'bg-white text-primary-text',
-      secondary: 'bg-primary-main text-white',
-  };
-  const Tile = JSX((props) => {
-      const { children, className = '', version = 'primary', role } = props;
-      return (jsx("section", { className: `font-sans p-9 box-border ${className || ''} ${tileStyleMap[version]} ${getContainerPaddingRight(className)} ${getContainerMinHeight(className)} `, role: role, children: jsx(BaseTile, { ...props, children: children }) }));
-  });
-  function getContainerPaddingRight(className = '') {
+  function getTileMinHeight(className = '') {
       const colSpan = getColSpan(className);
       if (colSpan <= 6) {
-          return 'pr-9';
+          return 'min-h-[300px]';
       }
       else if (colSpan <= 8) {
-          return 'pr-[4.75rem]';
+          return 'min-h-[320px]';
       }
       else {
-          return 'pr-[9.4rem]';
+          return 'min-h-[360px]';
       }
   }
-  function getContainerMinHeight(className = '') {
+
+  function getTileRightPadding(className = '') {
       const colSpan = getColSpan(className);
       if (colSpan <= 6) {
-          return 'min-h-[300px]';
+          return 'pr-9';
       }
       else if (colSpan <= 8) {
-          return 'min-h-[320px]';
+          return 'pr-[4.75rem]';
       }
       else {
-          return 'min-h-[360px]';
+          return 'pr-[9.4rem]';
       }
   }
 
@@ -443,12 +407,9 @@
           version: 'secondary',
       },
   ];
-  const ExchangeRateTile = JSX(({ className, context, title }) => {
+  const ExchangeRateTile = JSX(({ className = '', context, title = 'Курсы обмена валют' }) => {
       const { data } = context.useAsyncData(CBR_EXCHANGE_RATE_URL, fetchExchangeRate);
-      return (jsx(Tile, { className: className, context: context, title: title || 'Курсы обмена валют', buttons: buttons, children: jsxs("table", { children: [jsx("thead", { children: jsxs("tr", { children: [jsx(CurrencyTH, { children: "\u0412\u0430\u043B\u044E\u0442\u0430" }), jsx(CurrencyTH, { className: "pl-11", children: "\u041A\u0443\u0440\u0441" })] }) }), jsx("tbody", { children: CURRENCY_CODES.map((code) => {
-                          const value = (data?.Valute || {})[code]?.Value;
-                          return (jsxs("tr", { children: [jsx(CurrencyTD, { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [jsx(Icon, { name: CURRENCY_ICONS_MAP[code], width: "24", height: "24" }), jsx("span", { className: "ml-2", children: code })] }) }), jsx(CurrencyTD, { className: "pt-4 pl-11", children: formatCurrency(value) })] }, code));
-                      }) })] }) }));
+      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className}  ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, 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("table", { children: [jsx("thead", { children: jsxs("tr", { children: [jsx(CurrencyTH, { children: "\u0412\u0430\u043B\u044E\u0442\u0430" }), jsx(CurrencyTH, { className: "pl-11", children: "\u041A\u0443\u0440\u0441" })] }) }), jsx("tbody", { children: CURRENCY_CODES.map(renderCurrencyRow(data)) })] }) }) }));
   });
   const CurrencyTH = JSX(({ className = '', children }) => (jsx("th", { className: `text-left font-normal text-sm text-secondary-text ${className}`, children: children })));
   const CurrencyTD = JSX(({ className = '', children }) => (jsx("td", { className: `text-left font-normal text-base text-primary-text ${className}`, children: children })));
@@ -458,54 +419,213 @@
   }
   const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
   const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
+  const renderCurrencyRow = (data) => (code) => {
+      const value = (data?.Valute || {})[code]?.Value;
+      return (jsxs("tr", { children: [jsx(CurrencyTD, { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [jsx(Icon, { name: CURRENCY_ICONS_MAP[code], width: "24", height: "24" }), jsx("span", { className: "ml-2", children: code })] }) }), jsx(CurrencyTD, { className: "pt-4 pl-11", children: formatCurrency(value) })] }, code));
+  };
+
+  const Img = JSX(({ className = '', image }) => {
+      if (!image) {
+          return null;
+      }
+      const style = {
+          width: image.size?.width ? `${image.size?.width}px` : '100%',
+          height: image.size?.height ? `${image.size?.height}px` : '100%',
+      };
+      return (jsxs("picture", { className: className, children: [image.sources?.length
+                  ? image.sources.map(({ src, format }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format) }, `${index}_${src}`)))
+                  : null, jsx("img", { src: image.src, className: `m-auto ${image.className || ''}`, alt: image.alt || image.title, title: image.title, style: style, ...image.size })] }));
+  });
+  function formatToMimeType(format) {
+      return format ? `image/${String(format)}` : undefined;
+  }
 
   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, { 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 }) }))] }));
   });
 
-  const titleAlignStyleMap = {
-      left: 'text-left',
-      center: 'text-center',
-      right: 'text-right',
+  /*
+   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 titleMarginsStyleMap = {
-      double: 'mb-8',
-      single: 'mb-[26px]',
+
+  /*
+    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 linkColumnsModeStyleMap = {
-      double: 'gap-x-5 gap-y-[26px] flex-wrap',
-      single: 'gap-3.5 flex-col',
+
+  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`,
+      };
   };
-  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 })] }));
+
+  // 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 getExtFromHref = (href) => {
-      if (!href)
-          return '';
-      const lastChunk = href.split('.').pop();
-      if (!lastChunk || lastChunk.includes('/'))
-          return '';
-      return lastChunk;
+
+  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 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 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 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 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] })] }));
+  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 }));
+  });
+
+  const LinkDocs = JSX(({ className = '', context, title, subtitle, icon = 'DocIconMonoColor', documents, listMode = 'vertical', hasBorder = true, }) => {
+      return (jsxs("section", { className: `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-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(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] })] }));
   });
   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)));
+      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)));
   }
 
+  const LIST_STYLE_CLASSES$1 = 'rounded-full inline-block mr-3';
+  const TEXT_STYLE_MAP$1 = {
+      primary: 'text-primary-text',
+      secondary: 'text-white',
+      gray: 'text-secondary-text',
+  };
+  const LIST_STYLE_MAP$1 = {
+      primary: 'bg-primary-main',
+      secondary: 'bg-white',
+      gray: 'bg-secondary-text',
+  };
+  const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary' }) => {
+      return (jsxs("div", { className: `font-sans flex items-center ${className}`, role: "listitem", children: [isDotted && jsx("div", { className: getListStyle$1(version) }), jsx("span", { className: TEXT_STYLE_MAP$1[version], children: children })] }));
+  });
+  const getListStyle$1 = (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';
+      return `${LIST_STYLE_CLASSES$1} ${LIST_STYLE_MAP$1[version]} ${size}`;
+  };
+
+  const List = JSX((props) => {
+      const { className = '', itemClassName, isDotted, items, version } = props;
+      return (jsx("section", { className: `${className}`, role: "list", children: items?.length
+              ? items.map((_, i) => (jsx(ListItem, { className: itemClassName, isDotted: isDotted, version: version, children: _ }, String(i))))
+              : null }));
+  });
+
   const textBlockStyleMaps = {
       primary: {
           background: 'bg-white',
@@ -526,13 +646,10 @@
           description: 'text-secondary-text',
       },
   };
-  const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className = '', items }) => {
+  const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className = '', items, isDotted = true, }) => {
       const textBlockStyleMap = textBlockStyleMaps[blockVersion];
-      return (jsxs("section", { className: `font-sans px-4 py-[18px] flex flex-col ${textBlockStyleMap.background} ${className}`, children: [iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title ? (jsx("div", { className: `font-medium text-base mb-1 ${textBlockStyleMap.title}`, children: title })) : null, description ? (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description })) : null, items?.length ? renderItems(items) : null] })] }));
+      return (jsxs("section", { className: `font-sans px-4 py-[18px] flex flex-col ${textBlockStyleMap.background} ${className}`, children: [iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title ? (jsx("div", { className: `font-medium text-base mb-1 ${textBlockStyleMap.title}`, children: title })) : null, description ? (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description })) : null, items?.length ? (jsx(List, { items: items, isDotted: isDotted, version: "gray", className: "mt-1 text-m-sm text-secondary-text" })) : null] })] }));
   });
-  function renderItems(items = [], version) {
-      return (jsx("section", { className: "mt-1", role: "list", children: items.map((_, i) => (jsx(BlockItem, { text: _, version: version }, String(i)))) }));
-  }
   function renderIcon(className) {
       return (jsx("div", { className: "mb-3", children: jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs ${className}`, children: "i" }) }));
   }
@@ -540,11 +657,155 @@
       return image?.src ? jsx(Img, { className: "pb-3 mr-auto", image: image }) : null;
   }
 
+  const Description = JSX((props) => {
+      const { className, description } = props;
+      return jsx("div", { className: `font-normal text-base ${className || ''}`, children: description });
+  });
+
+  const tileStyleMap = {
+      primary: 'bg-white text-primary-text',
+      secondary: 'bg-primary-main text-white',
+  };
+  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] ${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, items?.length ? jsx(List, { items: items }) : null] }) }));
+  });
+
+  const productTileStyleMap = {
+      primary: 'bg-white text-primary-text',
+      secondary: 'bg-primary-main text-white',
+  };
+  const ProductTile = JSX(({ context, className = '', title, description, benefits, buttons, image, version = 'primary', }) => {
+      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px]` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description && jsx(Description, { className: "mt-4 max-w-[600px]", description: description }), jsxs("div", { className: "flex mt-5 mb-1", children: [benefits?.length ? (jsx("div", { className: "mr-8", children: benefits.map(renderBenefitLabel) })) : null, benefits?.length ? (jsx("div", { className: "pt-1", children: benefits.map((_, i) => renderBenefitDescription(_, i, version)) })) : null] })] }) }));
+  });
+  function renderBenefitLabel(benefit, i) {
+      return (jsx("div", { className: `text-xl font-medium ${i ? 'mt-2.5' : ''}`, children: benefit.label }, String(i)));
+  }
+  function renderBenefitDescription(benefit, i, version = 'primary') {
+      const labelStyleMap = {
+          primary: 'text-secondary-text',
+          secondary: 'text-white',
+      };
+      return (jsx("div", { className: `text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`, children: benefit.description }, String(i)));
+  }
+
+  const blockStyle = {
+      primary: 'bg-white',
+      secondary: 'bg-primary-main text-white',
+  };
+  const Gallery = JSX(({ context, title, description, cards = [], className, isScroll = true }) => {
+      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`, children: [jsxs("div", { className: "flex flex-col items-center mb-5", children: [jsx(Heading, { headingType: "h2", className: "text-center", title: title }), description ? (jsx("div", { className: "font-normal text-m-md max-w-[600px] mt-2", children: description })) : null] }), renderCardsLayout(isScroll, cards, context)] }));
+  });
+  function renderCardsLayout(isScroll, cards, context) {
+      return isScroll ? (jsx(SwipeListControl, { context: context, children: cards?.map(renderCard$1) })) : (jsx("div", { className: "grid gap-[14px]", children: cards?.map(renderCard$1) }));
+  }
+  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(card.items) : null] }), card?.button?.href ? jsx(Button, { className: "mt-3", ...card.button }) : null] }, key));
+  }
+  function renderDescription(card) {
+      return (jsx("div", { className: `text-secondary-text mt-2 ${card.version === 'secondary' ? 'text-white opacity-80' : ''}`, children: card.description }));
+  }
+  function renderItems(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 })] }))) }));
+  }
+
+  const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
+      return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, viewBox: viewBox, fill: fill, width: width, height: height, children: paths.map(({ d, fill, ...options }, i) => (jsx("path", { d: d, fill: fill || 'currentColor', ...commonOptions, ...options }, i))) }));
+  });
+
+  const ARROW_PATHS = [
+      {
+          d: 'm9 12 4-4-4-4',
+          stroke: 'currentColor',
+          strokeWidth: '2',
+          strokeLinecap: 'round',
+          fill: 'none',
+      },
+      {
+          d: 'M2 9a1 1 0 0 1 0-2v2Zm6-2a1 1 0 0 1 0 2V7ZM2 7h6v2H2V7Z',
+      },
+  ];
+  const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
+        ? 'bg-secondary-light text-secondary-text'
+        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(SVG, { paths: ARROW_PATHS, viewBox: "0 0 16 16", fill: "none", width: "16", height: "16" }) })));
+
+  const cardVersionMap = {
+      primary: 'bg-white text-secondary-text',
+      secondary: 'bg-primary-main text-white',
+  };
+  const galleryLengthForScrollMap = {
+      normal: 3,
+      mini: 4,
+  };
+  const cardStyleMap = {
+      normal: 'min-w-[364px] w-[364px]',
+      mini: 'min-w-[260px] w-[260px]',
+  };
+  const cardWidthMap = {
+      normal: 380,
+      mini: 276,
+  };
+
+  const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
+  const TEXT_STYLE_MAP = {
+      primary: 'text-primary-text',
+      secondary: 'text-white',
+      gray: 'text-secondary-text',
+  };
+  const LIST_STYLE_MAP = {
+      primary: 'bg-primary-main',
+      secondary: 'bg-white',
+      gray: 'bg-secondary-text',
+  };
+  const BlockItem = JSX(({ className = '', isDotted = true, text, children, version = 'primary' }) => {
+      return (jsxs("div", { className: `font-sans flex items-center ${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';
+      return `${LIST_STYLE_CLASSES} ${LIST_STYLE_MAP[version]} ${size}`;
+  };
+
+  const GalleryCardInner = JSX(({ title, description, image, items, button, version }) => {
+      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, description, items), description ? jsx("div", { className: `font-normal text-sm mt-2`, children: description }) : null, items?.length ? (jsx("section", { className: `max-w-[308px] mt-2`, role: "list", children: items.map((item, i) => renderItem(item.text, i, version)) })) : null] }), button?.text && jsx(Button, { className: "mt-6", ...button })] }));
+  });
+  function renderCardTitle(title, description, items) {
+      return (jsx("div", { className: `font-medium text-xl m-0 ${!description && !items?.length ? 'text-center' : ''}`, children: title }));
+  }
+  function renderItem(item, i, version) {
+      return (jsx(BlockItem, { version: version ?? 'primary', children: jsx("span", { className: "text-sm", children: item }) }, String(i)));
+  }
+
+  const GalleryContainer = JSX(({ context, title, description, cards = [], version = 'normal', activeCardIndex }) => {
+      return (jsxs("div", { children: [jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" }), jsxs("div", { className: "flex flex-col items-center mb-8", children: [title ? jsx(Heading, { headingType: "h2", className: "text-center", title: title }) : null, description ? (jsx("div", { className: "font-normal text-base max-w-[600px] mt-2.5", children: description })) : null] }), jsx("div", { className: `flex ${cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''} duration-1000`, style: { transform: `translateX(-${activeCardIndex * cardWidthMap[version]}px)` }, role: "list", children: cards?.map((card, i) => renderCard({ card, version, context }, i)) })] }));
+  });
+  function renderCard({ card, version }, i) {
+      return (jsx("section", { className: `box-border border-solid border rounded-md border-main-divider p-7 mx-2 flex flex-col justify-between
+        items-stretch ${cardStyleMap[version]} ${cardVersionMap[card.version ?? 'primary']} w-full col-span-4`, role: "listitem", children: jsx(GalleryCardInner, { ...card }) }, String(i)));
+  }
+
+  const GalleryInner = JSX(({ context, cards = [], className = '', version = 'normal', ...rest }) => {
+      const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+      const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+      const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+      const isGalleryScrollAvailable = cards?.length > galleryLengthForScrollMap[version];
+      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" })] }));
+  });
+
+  const MiniGallery = JSX((props) => (jsx(GalleryInner, { ...props, version: "mini" })));
+
   const AccordionBlocks = {
       Headline,
       LinkDocs,
       TextBlock,
       PictureText,
+      Tile,
+      ProductTile,
+      Gallery,
+      MiniGallery,
   };
 
   const AccordionItemInner = JSX(({ blocks, context }) => {
@@ -583,15 +844,11 @@
           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" }) : null] }), hasContent ? jsx(AccordionItemInner, { blocks: blocks, context: context }) : null] }));
+        ${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] }));
   });
 
   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] }));
-  });
-
-  const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
-      return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, viewBox: viewBox, fill: fill, width: width, height: height, children: paths.map(({ d, fill, ...options }, i) => (jsx("path", { d: d, fill: fill || 'currentColor', ...commonOptions, ...options }, i))) }));
+      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] }));
   });
 
   const LOGO_PATHS = [
@@ -610,7 +867,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 +918,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 +983,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 +1034,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 +1046,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 +1055,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 +1073,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", asSVG: true })), 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 = 'h2', description, benefits, buttons, image, items, version = 'primary', }) => {
+      return (jsxs("div", { className: `${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 mt-9 gap-3" })) : null, children: [description && jsx(Description, { description: description }), benefits?.length ? (jsx("div", { className: "mt-[19px]", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null, items?.length ? jsx(List, { items: items }) : null] }) }), image?.src && (jsx("div", { className: "mt-5", children: jsx(Img, { image: { className: 'block', ...image } }) }))] }));
   });
 
   const ProductBlock = JSX(
@@ -826,28 +1087,29 @@
       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 || 'h2', ...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) => renderStepTitle({ step, size, i, length: steps.length })) }) })) : 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, { headingType: "h3", className: "text-center", title: 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 = (params) => {
       const { step, size, i, length } = params;
@@ -861,7 +1123,7 @@
           : 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]';
       const iconSize = size === 'normal' ? '38' : '27';
       const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
-      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 }) }));
+      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, asSVG: true })) || i + 1 }) }));
   };
 
   const Blocks = {
@@ -869,6 +1131,7 @@
       Footer,
       Header,
       Headline,
+      LinkDocs,
       Placeholder,
       ProductBlock,
       ProductGallery,
@@ -907,10 +1170,8 @@
           blockClassName: style2className(block.style),
           block,
           render: (props) => {
-              const { version, content, blocks } = props.block;
-              return (jsx(BlockComponent, { className: props.blockClassName, version: version, context: context, ...content, children: blocks?.length
-                      ? blocks.map((block, i) => renderBlock({ block, blockDecorator, blocksRegistry, context }, i))
-                      : null }, `${type}-${i}`));
+              const { version, content } = props.block;
+              return (jsx(BlockComponent, { className: props.blockClassName, version: version, context: context, ...content }, `${type}-${i}`));
           },
       }, `block-${i}`);
   }
@@ -925,7 +1186,16 @@
                   : null, children] }));
   });
 
-  function toMobilePage(contentPage) {
+  function isBlockInRegistry(block, registry) {
+      return block.type in registry;
+  }
+
+  function normalizeBlock(block) {
+      const { mobile, ...rest } = block;
+      return mobile ? { ...rest, ...mobile, content: { ...rest.content, ...mobile.content } } : block;
+  }
+
+  function normalizePage(contentPage) {
       const { blocks, slots } = contentPage;
       return {
           ...contentPage,
@@ -941,19 +1211,9 @@
       };
   }
   function getMobileBlocks(blocks) {
-      return blocks?.filter(({ mobile }) => !mobile?.hidden).map(toMobileBlock);
-  }
-  function toMobileBlock(block) {
-      const { mobile } = block;
-      if (mobile) {
-          return {
-              ...block,
-              style: mobile.style?.length ? mobile.style : block.style,
-          };
-      }
-      else {
-          return block;
-      }
+      return blocks
+          ?.filter((block) => isBlockInRegistry(block, Blocks) && !block.mobile?.hidden)
+          .map(normalizeBlock);
   }
 
   function joinList(sep) {
@@ -968,9 +1228,9 @@
   exports.Icon = Icon;
   exports.LikeAPI = LikeAPI;
   exports.joinList = joinList;
+  exports.normalizePage = normalizePage;
   exports.projectSettings = projectSettings;
   exports.setup = setup;
-  exports.toMobilePage = toMobilePage;
   exports.url = url;
 
   Object.defineProperty(exports, '__esModule', { value: true });