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

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 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 Heading = JSX((props) => {
-      const { className, type, text } = props;
-      const Tag = type;
-      return (jsx(Tag, { className: `font-sans font-medium ${HeadingClass[type]} ${className || ''}`, children: text }));
-  });
-
   const isURL = (href) => href?.includes('//');
   const withoutQuery = (href) => (href || '').replace(/\/?\?.*/, '');
   const getOrigin = (href) => {
@@ -302,79 +243,119 @@
       };
   }
 
-  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: '',
-  };
-  const LIST_STYLE_MAP = {
-      primary: 'bg-primary-main',
-      secondary: 'bg-white',
+  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 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 getHeadingType(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 'h4';
@@ -387,46 +368,29 @@
       }
   }
 
-  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, headingType, description, children, buttons, image, items, version = 'primary', align = 'left', }) => {
-      return (jsxs("div", { className: `font-sans flex flex-col grow h-full ${alignBlock[align]}`, children: [title && (jsx(Heading, { type: headingType || getHeadingType(className), className: `${TITLE_CLASSES} ${version === 'primary' ? 'text-primary-text' : ''}`, text: title })), jsx(BaseTileInner, { context: context, buttons: buttons, image: image, children: children, description: description, items: items })] }));
-  });
-
-  const tileStyleMap = {
-      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,34 +419,29 @@
   }
   const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
   const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
-
-  const Headline = JSX(({ bgColor = 'transparent', className = '', title, description, image }) => {
-      return (jsxs("section", { className: `px-4 py-6 ${bgColor} ${className}`, children: [title && jsx(Heading, { type: "h2", className: "text-primary-text", text: title }), description && (jsx("p", { className: `font-normal text-m-md ${title ? 'mt-2.5' : ''}`, children: description })), image?.src && (jsx("div", { className: "mt-5 mx-auto flex justify-center", children: jsx(Img, { image: image }) }))] }));
-  });
-
-  const 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 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 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 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 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 Headline = JSX(({ bgColor = 'transparent', className = '', title, description, 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 }) }))] }));
   });
 
   /*
@@ -602,23 +558,74 @@
       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-3 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 LinkDocs = JSX(({ className = '', context, title, subtitle, icon = 'DocIcon', documents, listMode = 'vertical', hasBorder = true, }) => {
-      return (jsxs("section", { className: `py-6 px-4 bg-white ${className}`, children: [title ? (jsx(Heading, { type: "h2", className: `text-center ${subtitle ? 'mb-2' : 'mb-5'}`, text: title })) : null, subtitle ? jsx("h3", { className: "mb-5 text-center text-m-base", children: subtitle }) : null, listMode === 'vertical' ? (jsx(LinkDocsVerticalList, { hasBorder: hasBorder, documents: documents, icon: icon })) : (jsx(LinkDocsHorizontalList, { context: context, hasBorder: hasBorder, documents: documents, icon: icon }))] }));
+  const 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: `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 }))] }));
   });
 
-  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, { type: "h2", className: "text-center", text: title }), jsxs("div", { className: 'flex justify-center mt-9', children: [image?.src && jsx(Img, { className: "mr-6", image: image }), benefits?.length ? (jsx("div", { className: "flex flex-col", children: benefits.map(renderBenefit$1) })) : null] })] }));
+  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',
@@ -639,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" }) }));
   }
@@ -653,11 +657,157 @@
       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
+                              .filter((item) => item.text)
+                              .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 }) => {
@@ -696,15 +846,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(Heading, { type: "h3", className: "mb-2 text-center", text: title }) : null, description ? jsx("div", { className: "mb-5 text-m-md text-center", children: description }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, context: context, bordered: bordered }, `AccordionItem${i}`))) })) : null] }));
-  });
-
-  const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
-      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 = [
@@ -929,11 +1075,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("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)));
+      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, headingType, description, benefits, buttons, image, items, version = 'primary', }) => {
-      return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { children: jsx(BaseTile, { context: context, title: title, headingType: headingType || 'h2', description: description, items: items, buttons: buttons, children: benefits?.length ? (jsx("div", { className: "mt-[19px]", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null }) }), image?.src && (jsx("div", { className: "mt-5", children: jsx(Img, { image: { className: 'block', ...image } }) }))] }));
+  const 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(
@@ -944,7 +1090,7 @@
   });
 
   const ProductGalleryBlock = JSX(({ block, headingType, context }) => {
-      return (jsx("section", { className: "flex grow-0 shrink-0 basis-full px-4 py-6", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { context: context, headingType: headingType, ...block }) }) }));
+      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 = [] }) => {
@@ -965,7 +1111,7 @@
   }
 
   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(Heading, { type: "h3", className: "text-center", text: title }), description && jsx("p", { className: `text-m-md text-center ${title && 'mt-2'}`, children: description }), steps?.length ? (jsx("div", { className: `box-border py-0.5 mb-0.5 mt-5`, children: jsx("div", { className: "flex flex-col justify-between gap-x-[101px]", children: steps.map((step, i) => renderStepTitle({ step, size, i, length: steps.length })) }) })) : null] }));
+      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;
@@ -979,7 +1125,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 = {
@@ -1026,10 +1172,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}`);
   }
@@ -1044,7 +1188,19 @@
                   : 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) {
+      if (!contentPage) {
+          return undefined;
+      }
       const { blocks, slots } = contentPage;
       return {
           ...contentPage,
@@ -1060,19 +1216,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) {
@@ -1087,9 +1233,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 });