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

package/mobile/bundle/bundle.umd.js

@@ -477,7 +477,7 @@
           }
           const contentContainer = e.currentTarget.parentElement
               ?.previousElementSibling;
-          contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth' });
+          contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
       };
       return showDots && children?.length ? (jsx("div", { className: "flex gap-2 mx-auto mt-5 w-fit", children: children?.map((_, idx) => (jsx("div", { onClick: handleClick(idx), className: `${DOT_STYLES}`, style: getDotStyles(idx, activeIndex, indexFraction), "aria-hidden": true }, String(idx)))) })) : null;
   });
@@ -535,8 +535,14 @@
    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;
+      if (childElementCount === 2) {
+          return [
+              [0, scrollableDistance],
+              [scrollableDistance, scrollWidth],
+          ];
+      }
+      const scrollItemWidth = itemWidth + gap;
       const edgeScrollDistance = clientWidth - gap - padding;
       const lastScrollableIdx = childElementCount - 2;
       const scrollPoints = new Array(childElementCount)
@@ -621,13 +627,6 @@
       return (jsxs("section", { className: `font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${subtitle ? 'mb-2' : 'mb-5'}`, title: title })) : null, subtitle ? (jsx("h3", { className: "mt-0 font-normal mb-5 text-center text-m-md", children: subtitle })) : null, orientation === '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, anchor = null }) => {
-      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-14 ${className}`, id: anchor, children: [jsx(Heading, { headingType: "h2", className: "text-center", title: title }), jsxs("div", { className: 'flex justify-center mt-9', children: [image?.src && jsx(Img, { className: "mr-6", image: image }), benefits?.length ? (jsx("div", { className: "flex flex-col", children: benefits.map(renderBenefit$1) })) : null] })] }));
-  });
-  function renderBenefit$1(benefit, i) {
-      return (jsxs("div", { className: "flex flex-row mb-8", children: [benefit.icon && (jsx(Icon, { className: "w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]", name: benefit.icon, width: "48", height: "48", asSVG: true })), jsxs("div", { className: "flex gap-1 flex-col h-full ml-5 max-w-[490px]", children: [benefit.label && (jsx("div", { className: "font-medium text-primary-text text-xl m-0", children: benefit.label })), benefit.description && (jsx("div", { className: "font-normal text-sm text-secondary-text", children: benefit.description }))] })] }, String(i)));
-  }
-
   const isURL = (href) => href?.includes('//');
   const withoutQuery = (href) => (href || '').replace(/\/?\?.*/, '');
   const getOrigin = (href) => {
@@ -695,7 +694,7 @@
 
   const ButtonInner = JSX((props) => {
       const { text, aboveText, appendLeft } = props;
-      return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-m-2xs text-left", children: aboveText }), jsx("div", { className: "text-m-button font-medium text-left", children: text })] })) : null] }));
+      return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-m-2xs font-light text-left", children: aboveText }), jsx("div", { className: "text-m-button text-left", children: text })] })) : null] }));
   });
   const getButtonStyle = (props) => {
       const { version, aboveText, rounded } = props;
@@ -733,9 +732,9 @@
   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$3(useLink({ router, handlerDecorator }, button), index)) })) : null;
+      return buttons?.length ? (jsx("div", { className: `${className}`, children: buttons.map((button, index) => renderButton$2(useLink({ router, handlerDecorator }, button), index)) })) : null;
   });
-  function renderButton$3({ icon, ...button }, i) {
+  function renderButton$2({ icon, ...button }, i) {
       if (!button?.text)
           return;
       return icon ? (jsx(Button, { appendLeft: jsx(Icon, { name: icon, width: "24", height: "24", asSVG: true }), ...button }, String(i))) : (jsx(Button, { ...button }, String(i)));
@@ -840,82 +839,6 @@
       return image?.src ? jsx(Img, { className: "pb-3 mr-auto", image: image }) : null;
   }
 
-  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';
-      }
-      else if (colSpan <= 8) {
-          return 'h3';
-      }
-      else {
-          return 'h2';
-      }
-  }
-
-  function getTileMinHeight(className = '') {
-      const colSpan = getColSpan(className);
-      if (colSpan <= 6) {
-          return 'min-h-[300px]';
-      }
-      else if (colSpan <= 8) {
-          return 'min-h-[320px]';
-      }
-      else {
-          return 'min-h-[360px]';
-      }
-  }
-
-  function getTileRightPadding(className = '') {
-      const colSpan = getColSpan(className);
-      if (colSpan <= 6) {
-          return 'pr-9';
-      }
-      else if (colSpan <= 8) {
-          return 'pr-[4.75rem]';
-      }
-      else {
-          return 'pr-[9.4rem]';
-      }
-  }
-
-  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, anchor = null, } = props;
-      return (jsx("section", { className: `overflow-hidden font-sans p-9 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, role: role, id: anchor, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
-              ${version === 'primary' ? 'text-primary-text' : ''}` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description && jsx(Description, { className: "mt-4 max-w-[600px]", description: description }), children, renderList$1(items, version)] }) }));
-  });
-  function renderList$1(items, version) {
-      return items?.length ? (jsx(List, { items: items, itemClassName: "mt-2.5 first:mt-0", version: version })) : 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', anchor = null, }) => {
-      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, 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',
@@ -924,100 +847,22 @@
       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: [title ? (jsx(Heading, { headingType: "h3", className: `text-center ${description ? 'mb-2' : 'mb-5'}`, title: title })) : null, description ? (jsx("div", { className: "font-normal text-m-md max-w-[600px] text-center mb-5", children: description })) : null] }), renderCardsLayout(orientation, cards, context)] }));
   });
   function renderCardsLayout(orientation, cards, context) {
-      return orientation === 'horizontal' ? (jsx(SwipeListControl, { context: context, children: cards?.map(renderCard$1) })) : (jsx("div", { className: "grid gap-[14px]", children: cards?.map(renderCard$1) }));
+      return orientation === 'horizontal' ? (jsx(SwipeListControl, { context: context, children: cards?.map(renderCard) })) : (jsx("div", { className: "grid gap-[14px]", children: cards?.map(renderCard) }));
   }
-  function renderCard$1(card, key) {
+  function renderCard(card, key) {
       return (jsxs("div", { className: `h-full justify-between box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
-      ${blockStyle[card.version ?? 'primary']}`, children: [jsxs("div", { children: [card.image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-3.5", image: card.image }) })) : null, card.title ? jsx("h3", { className: `font-medium text-m-title-xs m-0`, children: card.title }) : null, card.description ? renderDescription(card) : null, card.items?.length ? renderItems$1(card.items, card.version) : null] }), card?.button?.text ? renderButton$2(card.button) : null] }, key));
+      ${blockStyle[card.version ?? 'primary']}`, children: [jsxs("div", { children: [card.image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-3.5", image: card.image }) })) : null, card.title ? jsx("h3", { className: `font-medium text-m-title-xs m-0`, children: card.title }) : null, card.description ? renderDescription(card) : null, card.items?.length ? renderItems(card.items, card.version) : null] }), card?.button?.text ? renderButton$1(card.button) : null] }, key));
   }
-  function renderButton$2(button) {
+  function renderButton$1(button) {
       return (jsx(Button, { className: "mt-3", appendLeft: button?.icon && jsx(Icon, { name: button?.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
   }
   function renderDescription(card) {
       return (jsx("div", { className: `text-secondary-text mt-1 text-m-sm ${card.version === 'secondary' ? 'text-white opacity-80' : ''}`, children: card.description }));
   }
-  function renderItems$1(items, version = 'primary') {
-      return (jsx("section", { className: "mt-3", children: items.map((item, i) => (jsxs("div", { children: [jsx("span", { className: "text-m-md font-medium", children: item.title }), jsx("span", { className: `text-m-sm pl-2 ${version === 'primary' ? 'text-secondary-text' : ''}`, children: item.text })] }, String(i)))) }));
-  }
-
-  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 GalleryCardInner = JSX(({ title, description, image, items, button, version }) => {
-      const titleStyleClasses = getTitleStyle(version, description, items);
-      return (jsxs("div", { className: "h-full flex flex-col justify-between", children: [jsxs("div", { children: [image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: image }) })) : null, title ? renderCardTitle(title, titleStyleClasses) : null, description ? (jsx("div", { className: `font-normal text-sm ${title ? 'mt-2' : ''}`, children: description })) : null, items?.length ? renderItems(items, version) : null] }), button?.text ? renderButton$1(button) : null] }));
-  });
-  function renderButton$1(button) {
-      return (jsx(Button, { className: "mt-6 w-full", appendLeft: button.icon && jsx(Icon, { name: button.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
-  }
-  function renderCardTitle(title, className) {
-      return jsx("div", { className: `font-medium text-xl m-0 ${className}`, children: title });
-  }
   function renderItems(items, version = 'primary') {
-      return (jsx(List, { className: `max-w-[308px] mt-2 text-sm ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "mt-1 first:mt-0", items: items.filter((item) => item?.text).map((item) => item.text), version: version }));
-  }
-  function getTitleStyle(version, description, items) {
-      return `font-medium text-xl m-0
-        ${version !== 'secondary' ? 'text-primary-text' : ''}
-        ${!description && !items?.length ? 'text-center' : ''}
-      `;
-  }
-
-  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)));
+      return (jsx("section", { className: "mt-3", children: items.map((item, i) => (jsxs("div", { children: [jsx("span", { className: "text-m-md font-medium", children: item.title }), jsx("span", { className: `text-m-sm pl-2 ${version === 'primary' ? 'text-secondary-text' : ''}`, children: item.text })] }, String(i)))) }));
   }
 
-  const GalleryInner = JSX(({ context, cards = [], className = '', version = 'normal', anchor = null, ...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}`, id: anchor, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), showPrevButton && (jsx(ArrowButton, { className: "absolute top-1/2 left-8 rotate-180 z-10 mt-[25px]", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })), showNextButton && (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-[25px]", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })), jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" })] }));
-  });
-
-  const MiniGallery = JSX((props) => (jsx(GalleryInner, { ...props, version: "mini" })));
-
   const LinkList = JSX(({ className = '', documents, anchor = null }) => {
       return (jsx("section", { className: `font-sans bg-white mt-[10px] ${className}`, id: anchor, children: jsx("ul", { className: "flex flex-col text-sm text-secondary-text p-0", children: documents?.length ? renderLinkListItem(documents) : null }) }));
   });
@@ -1032,30 +877,25 @@
       Headline,
       LinkDocs,
       TextBlock,
-      PictureText,
       ProductBlock,
-      Tile,
-      ProductTile,
       Gallery,
-      MiniGallery,
       LinkList,
   };
 
-  const renderBlocksList = ({ blocks, context, className, columns, version, }) => blocks?.length ? blocks.map(renderBlock$1({ context, className, columns, version })) : null;
-  const renderBlock$1 = ({ context, columns, className, version }) => (block, i) => {
+  const renderBlocksList = ({ blocks, context, className, columns }) => blocks?.length ? blocks.map(renderBlock$1({ context, className, columns })) : null;
+  const renderBlock$1 = ({ context, columns, className }) => (block, i) => {
       const type = block?.blockListType;
       if (!type || !(type in EmbeddableBlocks)) {
           return null;
       }
       const columnsCountClass = columns === 2 ? 'w-1/2' : '';
       const EmbeddedBlock = EmbeddableBlocks[type];
-      return (jsx("div", { className: `${className} ${columnsCountClass}`, children: jsx(EmbeddedBlock, { context: context, ...block, blockVersion: version, className: "!p-0" }) }, `block_${i}`));
+      return (jsx("div", { className: `${className} ${columnsCountClass}`, children: jsx(EmbeddedBlock, { context: context, ...block, className: "!p-0" }) }, `block_${i}`));
   };
 
-  const AccordionItemInner = JSX(({ blocks, context, version = 'primary' }) => {
+  const AccordionItemInner = JSX(({ blocks, context }) => {
       const className = 'mb-5 last:mb-0 first:mt-2';
-      const columns = 1;
-      return (jsx("div", { className: "transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0", children: renderBlocksList({ context, className, columns, blocks, version }) }));
+      return (jsx("div", { className: "transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0", children: renderBlocksList({ context, className, blocks }) }));
   });
 
   const useActiveHandler = ({ context, blocks, initialState = false }) => {
@@ -1076,15 +916,18 @@
       return { isActive, hasContent, icon, handleToggle };
   };
 
-  const AccordionItem = JSX(({ label, blocks, bordered, context }) => {
+  const AccordionItem = JSX(({ label, labelIcon, blocks, bordered, context }) => {
       const { hasContent, icon, handleToggle } = useActiveHandler({
           context,
           blocks,
       });
-      return (jsxs("li", { className: `${bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0'} border-solid border-main-divider`, children: [jsxs("button", { className: `border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
+      return (jsxs("li", { className: `${borderedLiClass(bordered)} border-solid border-main-divider`, children: [jsxs("button", { className: `border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
           ${bordered ? '' : 'py-[14px] px-0'}
-          ${hasContent ? 'group cursor-pointer' : ''}`, onClick: handleToggle, children: [jsx("span", { className: `text-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] }));
+          ${hasContent ? 'group cursor-pointer' : ''}`, onClick: handleToggle, children: [jsxs("span", { className: `text-m-title-xs pr-2.5 font-medium flex ${hasContent ? 'group-hover:text-primary-main' : ''}`, children: [labelIcon ? (jsx(Icon, { name: labelIcon, width: "24", height: "24", asSVG: true, className: "mr-3" })) : null, label] }), hasContent ? jsx(Icon, { name: icon, width: "24", height: "24", asSVG: true }) : null] }), hasContent ? jsx(AccordionItemInner, { blocks: blocks, context: context }) : null] }));
   });
+  function borderedLiClass(bordered) {
+      return bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0';
+  }
 
   const Accordion = JSX(({ title, description, accordionItems, context, className = '', bordered }) => {
       return (jsxs("section", { className: `py-6 px-4 font-sans bg-white text-primary-text ${className}`, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-2 text-center", title: title }) : null, description ? jsx("div", { className: "mb-5 text-m-md text-center", children: description }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, context: context, bordered: bordered }, `AccordionItem${i}`))) })) : null] }));
@@ -1179,6 +1022,25 @@
   }
   const EXCHANGE_RATES_URL = '/api/v1/exchangerates.json';
 
+  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';
+      }
+      else if (colSpan <= 8) {
+          return 'h3';
+      }
+      else {
+          return 'h2';
+      }
+  }
+
   const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
   const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
 
@@ -1242,6 +1104,10 @@
       return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className}`, id: anchor, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-[43px] pt-4", children: [exchangeCurrencyItems ? (jsx(CurrencyTable, { className: "mb-[31px]", exchangeCurrencyItems: exchangeCurrencyItems })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), exchangeCurrencyItems?.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", exchangeCurrencyItems: exchangeCurrencyItems, codes: EXCHANGE_CODES })) : 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))) }));
+  });
+
   const LOGO_PATHS = [
       'm13.72 25.51 4.42-4.33v-2.95l-4.42 4.32v2.96Zm0-10.98 4.42-4.35V7.41l-4.42 4.31v2.8Zm0 3.63 4.42-4.33v-2.78l-4.42 4.32v2.8ZM12.46 7.44l-.6-.56V0h-.66v6.22l-.58-.57V0h-.67v5l-.59-.58V0H8.7v6.56l4.44 4.33V0h-.67v7.44Zm1.26 14.35 4.42-4.33v-2.78L13.72 19v2.8Zm-5.03-.61 4.44 4.33v-2.96l-4.44-4.32v2.95Zm8.79-16.76-.59.58V0h-.66v5.66l-.6.56V0h-.66v6.87l-.58.57V0h-.67v10.9l4.42-4.34V0h-.66v4.42Zm-8.79 5.76 4.44 4.35v-2.8L8.69 7.4v2.77Zm0 3.65 4.44 4.33v-2.8l-4.44-4.3v2.77Zm0 3.63 4.44 4.33V19l-4.44-4.31v2.78Zm26.37 2.29H24.3a2.25 2.25 0 0 0 .36-1.22 2.32 2.32 0 0 0-2.33-2.31 2.32 2.32 0 0 0-2.31 2.31c0 .5.16.96.43 1.34a.74.74 0 0 0-.33.61c0 .26.14.49.33.62a2.32 2.32 0 0 0-.43 1.34 2.31 2.31 0 0 0 2.31 2.31 2.32 2.32 0 0 0 2.33-2.31c0-.45-.13-.87-.36-1.22h8.01v.49h-.8v.68h.8v.7h-.8v1.3h.8v-.58h1.17v.58h.79v-1.3h-.79v-.7h.79v-.68h-.79v-.5h1.58a.56.56 0 0 0 .56-.56v-.34a.57.57 0 0 0-.56-.56Zm-11.53 2.7a1.2 1.2 0 0 1-2.4 0c0-.24.08-.47.2-.66l.34-.56a.97.97 0 0 1-.34-.75c0-.3.13-.56.33-.74l-.32-.56a1.13 1.13 0 0 1-.2-.66 1.2 1.2 0 0 1 2.4 0c0 .49-.56 1.65-.56 1.65v.62c-.01.01.55 1.17.55 1.66ZM4.67 18.34v2.89c0 2.75 1.2 4.53 1.9 5.21l4.58 4.5c1.28 1.25 1.5 1.66 1.79 2.37v-3.2c0-2.84-1.44-3.94-2.19-4.67-1.73-1.68-2.89-2.8-3.82-3.73a8.98 8.98 0 0 1-2.26-3.37Zm6.08 14.24c-1.73-1.7-2.89-2.8-3.82-3.73a10 10 0 0 1-2.25-2.98v2.49a7.87 7.87 0 0 0 1.89 5.24l4.58 4.47c1.28 1.25 1.5 1.85 1.79 2.55v-3.37c0-2.85-1.45-3.95-2.19-4.67Z',
       'M19.88 5.34c-.32 0-.64 0-.96.02V6.7a18.5 18.5 0 1 1 .95 36.94A18.5 18.5 0 0 1 1.35 25.17c0-5.67 2.55-10.73 6.58-14.13V9.32A19.78 19.78 0 0 0 0 25.17C0 36.12 8.9 45 19.88 45a19.85 19.85 0 0 0 19.86-19.83c0-10.95-8.9-19.83-19.87-19.83Z',
@@ -1312,7 +1178,7 @@
       const { icon, width, height, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
       if (!icon)
           return null;
-      return (jsx("a", { className: "flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:text-primary-main", href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: Icon && (jsx(Icon, { name: icon, width: width, height: height, asSVG: true, className: "block", color: "none" })) }));
+      return (jsx("a", { className: "flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[40px] h-[40px] box-border hover:text-primary-main", href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: Icon && (jsx(Icon, { name: icon, width: width, height: height, asSVG: true, className: "block", color: "none" })) }));
   });
 
   const SocialMedia = JSX(({ className, media, context }) => {
@@ -1444,6 +1310,32 @@
   });
   const renderSubItem = (item, i) => (jsx(HeaderItem, { className: "mr-8 whitespace-nowrap text-sm", ...item }, String(i)));
 
+  function getTileMinHeight(className = '') {
+      const colSpan = getColSpan(className);
+      if (colSpan <= 6) {
+          return 'min-h-[300px]';
+      }
+      else if (colSpan <= 8) {
+          return 'min-h-[320px]';
+      }
+      else {
+          return 'min-h-[360px]';
+      }
+  }
+
+  function getTileRightPadding(className = '') {
+      const colSpan = getColSpan(className);
+      if (colSpan <= 6) {
+          return 'pr-9';
+      }
+      else if (colSpan <= 8) {
+          return 'pr-[4.75rem]';
+      }
+      else {
+          return 'pr-[9.4rem]';
+      }
+  }
+
   const GOLDEN_RATIO = 1.618;
   const Placeholder = JSX(({ className, context, title, description = 'Блок в разработке...', anchor = null }) => {
       return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, children: [description ? (jsx(Description, { className: "mt-4 max-w-[600px]", description: description })) : null, jsx("figure", { className: "m-0 min-w-[600px]", children: renderShimmer() })] }) }));
@@ -1463,6 +1355,14 @@
       return (jsx("section", { className: `font-sans bg-white overflow-hidden w-100 pb-6 ${className || ''}`, children: jsx(SwipeListControl, { context: context, children: galleryBlocks.map((block, i) => (jsx(ProductGalleryBlock, { block: block, context: context }, String(i)))) }) }));
   });
 
+  const STEPS_SIZE_MAP = {
+      normal: 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]',
+      small: 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]',
+  };
+  const STEPS_TILE_DESCRIPTION_HEIGHT_MAP = {
+      normal: 'min-h-[70px]',
+      small: 'min-h-[50px]',
+  };
   const STEPS_BLOCK_STYLE_MAPS = {
       primary: {
           background: 'bg-white',
@@ -1490,14 +1390,12 @@
       const isLastStep = length - 1 === i;
       const margin = size === 'normal' ? 'ml-[34px]' : 'ml-[24px]';
       const style = styleMaps(version);
-      return (jsx("div", { children: jsxs("div", { className: "flex flex-row text-center relative", children: [jsxs("div", { className: "overflow-hidden", children: [renderIconArea(params), !isLastStep && (jsx("div", { className: `min-h-8 h-full w-[2px] ${style.iconConnector} ${margin}` }))] }), jsxs("div", { className: "flex flex-col justify-start relative", children: [step.label && (jsx("div", { className: "font-medium text-m-title-xs m-0 text-left", children: step.label })), step.description && (jsx("div", { className: `font-normal text-sm ${style.description} text-left ${step.label ? 'mt-1' : ''}`, children: step.description }))] })] }, String(i)) }, String(i)));
+      return (jsx("div", { children: jsxs("div", { className: "flex flex-row text-center relative", children: [jsxs("div", { className: "overflow-hidden", children: [renderIconArea(params), !isLastStep && (jsx("div", { className: `min-h-8 h-full w-[2px] ${style.iconConnector} ${margin}` }))] }), jsxs("div", { className: `flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`, children: [step.label && (jsx("div", { className: "font-medium text-m-title-xs m-0 text-left", children: step.label })), step.description && (jsx("div", { className: `font-normal text-sm ${style.description} text-left ${step.label ? 'mt-1' : ''}`, children: step.description }))] })] }, String(i)) }, String(i)));
   };
   const renderIconArea = (params) => {
       const { step, size, i, version } = params;
       const style = styleMaps(version);
-      const iconAreaSize = size === 'normal'
-          ? 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]'
-          : 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]';
+      const iconAreaSize = STEPS_SIZE_MAP[size];
       const iconSize = size === 'normal' ? '38' : '27';
       const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
       return (jsx("div", { className: `${iconAreaSize} ${style.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`, children: jsx("span", { className: `font-medium flex self-center ${style.title} ${iconTextSize}`, children: (step.icon && jsx(Icon, { name: step.icon, width: iconSize, height: iconSize, asSVG: true })) || i + 1 }) }));