@redneckz/wildless-cms-uni-blocks 0.3.28 → 0.3.31

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 }) => {
-      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", 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) => {
@@ -640,12 +639,20 @@
       const endOfOrigin = url.indexOf('/', endOfProto + protoSeparator.length);
       return endOfOrigin !== -1 ? url.substring(0, endOfOrigin) : url;
   };
+  const getHash = (href) => {
+      if (!href || !isURL(href)) {
+          return undefined;
+      }
+      const hashIndex = href.indexOf('#');
+      return hashIndex !== -1 ? href.substring(hashIndex, href.length) : undefined;
+  };
 
   var url = /*#__PURE__*/Object.freeze({
     __proto__: null,
     isURL: isURL,
     withoutQuery: withoutQuery,
-    getOrigin: getOrigin
+    getOrigin: getOrigin,
+    getHash: getHash
   });
 
   const MOBILE_URL_PATH = '/mobile';
@@ -725,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)));
@@ -764,8 +771,8 @@
               : null }));
   });
 
-  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 w-full", children: [jsx("div", { children: children }), buttons ? jsx("div", { children: buttons }) : null] }), image] })] }));
+  const BaseTile = JSX(({ className = '', title, children, buttons, image, anchor = null }) => {
+      return (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, id: anchor, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { children: children }), buttons ? jsx("div", { children: buttons }) : null] }), image] })] }));
   });
 
   const benefitTitleStyleMap = {
@@ -790,7 +797,7 @@
       primary: 'text-primary-main border-secondary-hover',
       secondary: 'text-white/80',
   };
-  const renderLabel = (label, version) => (jsx("div", { className: `m-xs px-2.5 py-1.5 mb-5 rounded-md border-2 w-fit ${labelStyleMap[version]}`, children: label }));
+  const renderLabel = (label, version) => (jsx("div", { className: `m-xs px-2.5 py-1.5 mb-5 rounded-md border-2 border-solid w-fit ${labelStyleMap[version]}`, children: label }));
 
   const productBlockStyleMap = {
       primary: 'bg-white text-primary-text',
@@ -832,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, } = props;
-      return (jsx("section", { className: `overflow-hidden font-sans p-9 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, role: role, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
-              ${version === 'primary' ? 'text-primary-text' : ''}` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description && jsx(Description, { className: "mt-4 max-w-[600px]", description: description }), children, renderList$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', }) => {
-      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',
@@ -916,102 +847,24 @@
       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', ...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 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 }) => {
-      return (jsx("section", { className: `font-sans bg-white mt-[10px] ${className}`, children: jsx("ul", { className: "flex flex-col text-sm text-secondary-text p-0", children: documents?.length ? renderLinkListItem(documents) : null }) }));
+  const 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 }) }));
   });
   const renderLinkListItem = (documents) => {
       return documents.map((doc, i) => {
@@ -1024,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 }) => {
@@ -1068,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] }));
@@ -1171,10 +1022,29 @@
   }
   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) : '');
 
-  const TABLE_HEAD_STYLE = 'text-left font-normal text-sm text-secondary-text';
+  const TABLE_HEAD_STYLE = 'font-light text-left font-normal text-sm text-secondary-text';
   const CURRENCY_ICONS_MAP = {
       USD: 'DollarIcon',
       EUR: 'EuroIcon',
@@ -1184,10 +1054,10 @@
   });
   const renderCurrencyRow = (exchangeCurrencyItem) => {
       const code = exchangeCurrencyItem?.currency?.currency;
-      return (jsxs("tr", { children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(Icon, { name: CURRENCY_ICONS_MAP[code], width: "24", height: "24" }) : null, jsx("span", { className: "ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem.buyExchangeRate) }), jsx("td", { className: "pt-4 pl-11", children: formatCurrency(exchangeCurrencyItem.saleExchangeRate) })] }, code));
+      return (jsxs("tr", { className: "pb-1", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(Icon, { name: CURRENCY_ICONS_MAP[code], width: "24", height: "24" }) : null, jsx("span", { className: "text-m-title-md ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.buyExchangeRate) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.saleExchangeRate) })] }, code));
   };
 
-  const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex text-sm ${className}`, children: [jsx(Icon, { className: "min-w-fit", name: "GpsIcon", width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-1.5", children: [address ? jsx("p", { className: "m-0", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
+  const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex text-sm ${className}`, children: [jsx(Icon, { className: "min-w-fit", name: "GpsIcon", width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3 font-light", children: [address ? jsx("p", { className: "m-0 mb-[3px]", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
 
   const Input = JSX(({ className = '', id, name, type = 'text', placeholder }) => {
       return (jsx("input", { className: className, id: id, name: name || id, type: type, placeholder: placeholder }));
@@ -1202,10 +1072,10 @@
   });
 
   const ExchangeCurrencyCalculator = JSX(({ codes, className = '' }) => {
-      return (jsxs("div", { className: `grid gap-3.5 ${className}`, children: [renderInput('Хочу продать', codes), renderInput('Получу', codes), jsx(Button, { className: "box-border mt-3.5 py-3 h-12 w-44", version: "primary", href: "#", children: "\u041A\u0443\u043F\u0438\u0442\u044C \u0432\u0430\u043B\u044E\u0442\u0443" })] }));
+      return (jsxs("div", { className: `grid gap-3.5 ${className}`, children: [renderInput('Хочу продать', codes), renderInput('Получу', codes), jsx(Button, { className: "box-border mt-3.5 py-3 h-12 w-full", version: "primary", href: "#", children: "\u041A\u0443\u043F\u0438\u0442\u044C \u0432\u0430\u043B\u044E\u0442\u0443" })] }));
   });
   function renderInput(placeholder, codes) {
-      return (jsxs("div", { className: "flex items-center", children: [jsx(Input, { className: "h-10 border pl-2.5 rounded-md text-m-sm w-full appearance-none", type: "number", placeholder: `${placeholder}` }), codes.length ? (jsx(Select, { className: "h-9 -translate-x-16", children: codes.map((code, i) => (jsx(SelectOption, { value: code, children: code }, String(i)))) })) : null] }));
+      return (jsxs("div", { className: "relative flex items-center", children: [jsx(Input, { className: "h-10 border pl-4 pt-[7px] pb-[7px] rounded-md text-m-sm w-full appearance-none -mr-12", type: "number", placeholder: `${placeholder}` }), codes.length ? (jsx(Select, { className: "h-9 -translate-x-4", children: codes.map((code, i) => (jsx(SelectOption, { value: code, children: code }, String(i)))) })) : null] }));
   }
 
   const CURRENCY_CODES = ['USD', 'EUR'];
@@ -1226,12 +1096,16 @@
       address: 'Москва, ул.Ленина д.28',
       distance: '6км',
   };
-  const ExchangeRateTile = JSX(({ className = '', context, title = 'Курсы обмена валют' }) => {
+  const ExchangeRateTile = JSX(({ className = '', context, title = 'Курсы обмена валют', anchor = null }) => {
       const data = useExchangeRates(context.useAsyncData);
       const exchangeCurrencyItems = data?.exchangeRate?.currencies?.filter((item) => {
           return CURRENCY_CODES.indexOf(item?.currency?.currency || '') !== -1;
       }) || DEFAULT_CURRENCY_ITEMS;
-      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className}`, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: "whitespace-pre-wrap mb-3" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-20 pt-3", children: [exchangeCurrencyItems ? (jsx(CurrencyTable, { className: "mb-7", exchangeCurrencyItems: exchangeCurrencyItems })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), exchangeCurrencyItems?.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", exchangeCurrencyItems: exchangeCurrencyItems, codes: EXCHANGE_CODES })) : null] }) }) }));
+      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 = [
@@ -1304,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 }) => {
@@ -1436,9 +1310,35 @@
   });
   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 = 'Блок в разработке...' }) => {
-      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className} ${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]` })) : null, children: [description ? (jsx(Description, { className: "mt-4 max-w-[600px]", description: description })) : null, jsx("figure", { className: "m-0 min-w-[600px]", children: renderShimmer() })] }) }));
+  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() })] }) }));
   });
   const renderShimmer = (size = 3) => goldenSequence(100, size)
       .map((_) => Math.floor(_))
@@ -1554,9 +1454,9 @@
       return (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsx("path", { ...params, strokeMiterlimit: "10", d: "M21.48 11.95c.5-1.4-.4-2.6-1.9-2.6h-4c-.6 0-1.1-.5-1-1.2l.5-3.2c.2-.9-.4-1.9-1.3-2.2-.8-.3-1.8.1-2.2.7l-4.1 6.1M7.48 18.35l3.1 2.4c.4.4 1.3.6 1.9.6h3.8c1.2 0 2.5-.9 2.8-2.1l1.24-3.77" }), jsx("path", { ...params, d: "M2.38 18.35v-9.8c0-1.4.6-1.9 2-1.9h1c1.4 0 2 .5 2 1.9v9.8c0 1.4-.6 1.9-2 1.9h-1c-1.4 0-2-.5-2-1.9Z" })] }));
   };
 
-  const LikeControl = JSX(({ className, context }) => {
+  const LikeControl = JSX(({ className, context, anchor = null }) => {
       const likeService = context.useLikeService();
-      return (jsxs("div", { className: `border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${className || ''}`, children: [jsx(LikeButton, { onClick: likeService.like, ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u043B\u0430\u0439\u043A\u00BB" }), jsx(LikeButton, { onClick: likeService.dislike, className: "rotate-180", ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u0434\u0438\u0437\u043B\u0430\u0439\u043A\u00BB" }), jsx("span", { className: "select-none", children: likeService.likeCount })] }));
+      return (jsxs("div", { className: `border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${className || ''}`, id: anchor, children: [jsx(LikeButton, { onClick: likeService.like, ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u043B\u0430\u0439\u043A\u00BB" }), jsx(LikeButton, { onClick: likeService.dislike, className: "rotate-180", ariaLabel: "\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u00AB\u0434\u0438\u0437\u043B\u0430\u0439\u043A\u00BB" }), jsx("span", { className: "select-none", children: likeService.likeCount })] }));
   });
 
   const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
@@ -1571,11 +1471,11 @@
       }
       const BlockComponent = blocksRegistry[type || 'Placeholder'] || Placeholder;
       return blockDecorator({
-          blockClassName: style2className(block.style),
+          blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
           block,
           render: (props) => {
-              const { version, content } = props.block;
-              return (jsx(BlockComponent, { className: props.blockClassName, version: version, context: context, ...content }, `${type}-${i}`));
+              const { version, content, anchor } = props.block;
+              return (jsx(BlockComponent, { className: props.blockClassName, version: version, context: context, anchor: anchor, ...content }));
           },
       }, `block-${i}`);
   }