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

package/mobile/bundle/bundle.umd.js

@@ -200,7 +200,7 @@
           return;
       }
       const Tag = headingType;
-      return (jsx(Tag, { className: `font-sans font-medium ${HeadingClass[headingType]} ${className || ''}`, children: title }));
+      return (jsx(Tag, { className: `font-sans font-medium m-0 ${HeadingClass[headingType]} ${className || ''}`, children: title }));
   });
 
   const projectSettings = new (class {
@@ -306,7 +306,7 @@
   };
 
   const SwipeListControlItem = JSX(({ className = '', children, ...rest }) => {
-      return (jsx("div", { className: `snap-center snap-always min-w-full ${className}`, role: "listitem", ...rest, children: children }));
+      return (jsx("div", { className: `snap-center snap-always min-w-full box-border ${className}`, role: "listitem", ...rest, children: children }));
   });
 
   // styles used to compensate outer container padding to get rid of clipping effect
@@ -339,7 +339,7 @@
   const BASE_DOT_OPACITY = 0.3;
   const ACTIVE_DOT_OPACITY_CHANGE = 0.7;
   const SwipeListControlDots = JSX(({ children, activeIndex, indexFraction, showDots }) => {
-      return showDots && children?.length ? (jsx("div", { className: "flex gap-2 mx-auto mt-[22px] w-fit", children: children?.map((_, idx) => (jsx("div", { className: `${DOT_STYLES}`, style: getDotStyles(idx, activeIndex, indexFraction), "aria-hidden": true }, String(idx)))) })) : null;
+      return showDots && children?.length ? (jsx("div", { className: "flex gap-2 mx-auto mt-5 w-fit", children: children?.map((_, idx) => (jsx("div", { className: `${DOT_STYLES}`, style: getDotStyles(idx, activeIndex, indexFraction), "aria-hidden": true }, String(idx)))) })) : null;
   });
   const getDotStyles = (currentIdx, activeIndex, indexFraction) => {
       if (currentIdx < activeIndex || currentIdx > activeIndex + 1)
@@ -397,7 +397,7 @@
       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 LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full box-border ${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
@@ -422,7 +422,7 @@
       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 LIST_STYLE_CLASSES$1 = 'rounded-full inline-block mr-3 mt-2';
   const TEXT_STYLE_MAP$1 = {
       primary: 'text-primary-text',
       secondary: 'text-white',
@@ -434,7 +434,7 @@
       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 })] }));
+      return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted && jsx("div", { className: getListStyle$1(version) }), jsx("span", { className: `text-m-md ${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';
@@ -470,12 +470,12 @@
   };
   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 ? (jsx(List, { items: items, isDotted: isDotted, version: "gray", className: "mt-1 text-m-sm text-secondary-text" })) : 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$1(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 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" }) }));
   }
-  function renderImage(image) {
+  function renderImage$1(image) {
       return image?.src ? jsx(Img, { className: "pb-3 mr-auto", image: image }) : null;
   }
 
@@ -580,11 +580,11 @@
 
   const Description = JSX((props) => {
       const { className, description } = props;
-      return jsx("div", { className: `font-normal text-base ${className || ''}`, children: description });
+      return jsx("div", { className: `font-normal text-m-md ${className || ''}`, children: description });
   });
 
   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] })] }));
+      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 }), jsx("div", { children: buttons })] }), image] })] }));
   });
 
   const getColSpan = (className) => {
@@ -638,8 +638,12 @@
   };
   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] }) }));
+      return (jsx("section", { className: `font-sans p-9 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, role: role, children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
+              ${version === 'primary' ? 'text-primary-text' : ''}` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description && jsx(Description, { className: "mt-4 max-w-[600px]", description: description }), children, renderList(items, version)] }) }));
   });
+  function renderList(items, version) {
+      return items?.length ? jsx(List, { items: items, version: version }) : null;
+  }
 
   const productTileStyleMap = {
       primary: 'bg-white text-primary-text',
@@ -671,12 +675,12 @@
   }
   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));
+      ${blockStyle[card.version ?? 'primary']}`, role: "listitem", children: [jsxs("div", { children: [card.image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: card.image }) })) : null, card.title ? jsx("h4", { className: `font-medium text-m-title-xs m-0`, children: card.title }) : null, card.description ? renderDescription(card) : null, card.items?.length ? renderItems$1(card.items) : null] }), card?.button?.href ? jsx(Button, { className: "mt-3", ...card.button }) : null] }, key));
   }
   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) {
+  function renderItems$1(items) {
       return (jsx("section", { className: "mt-3", children: items.map((item) => (jsxs("div", { children: [jsx("span", { className: "text-m-md font-medium", children: item.title }), jsx("span", { className: "text-m-sm text-secondary-text pl-2", children: item.text })] }))) }));
   }
 
@@ -717,9 +721,9 @@
       mini: 276,
   };
 
-  const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3';
+  const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3 mt-2';
   const TEXT_STYLE_MAP = {
-      primary: 'text-primary-text',
+      primary: 'text-secondary-text',
       secondary: 'text-white',
       gray: 'text-secondary-text',
   };
@@ -729,7 +733,7 @@
       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 })] }));
+      return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted && jsx("div", { className: getListStyle(version) }), "!!!!!", jsx("span", { className: TEXT_STYLE_MAP[version], children: text || children })] }));
   });
   const getListStyle = (version) => {
       const size = version === 'gray' ? 'w-[6px] h-[6px] min-w-[6px] min-h-[6px]' : 'w-2 h-2 min-w-2 min-h-2';
@@ -737,16 +741,26 @@
   };
 
   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 })] }));
+      const titleStyleClasses = getTitleStyle(version, description, items);
+      return (jsxs("div", { children: [jsxs("div", { children: [image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: image }) })) : null, title ? renderCardTitle(title, titleStyleClasses) : null, description ? (jsx("div", { className: `font-normal text-sm ${title ? 'mt-2' : ''}`, children: description })) : null, items?.length ? renderItems(items, version) : null] }), button?.text && jsx(Button, { className: "mt-6", ...button })] }));
   });
-  function renderCardTitle(title, description, items) {
-      return (jsx("div", { className: `font-medium text-xl m-0 ${!description && !items?.length ? 'text-center' : ''}`, children: title }));
+  function renderCardTitle(title, className) {
+      return jsx("div", { className: `font-medium text-xl m-0 ${className}`, children: title });
+  }
+  function renderItems(items, version) {
+      return (jsx("section", { className: `max-w-[308px] mt-2`, role: "list", children: items
+              .filter((item) => item?.text)
+              .map((item, i) => renderItem(item.text, i, version)) }));
   }
   function renderItem(item, i, version) {
       return (jsx(BlockItem, { version: version ?? 'primary', children: jsx("span", { className: "text-sm", children: item }) }, String(i)));
   }
+  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)) })] }));
@@ -838,7 +852,7 @@
   ];
   const ExchangeRateTile = JSX(({ className = '', context, title = 'Курсы обмена валют' }) => {
       const { data } = context.useAsyncData(CBR_EXCHANGE_RATE_URL, fetchExchangeRate);
-      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)) })] }) }) }));
+      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] ${title ? 'mb-3' : ''}` })), 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 })));
@@ -1029,14 +1043,14 @@
 
   const HeaderBurger = JSX(({ context, burgerSubMenu, onClick, defaultLocation = '', children }) => {
       const [city, getCity] = context.useGeolocation(defaultLocation);
-      return (jsxs("div", { className: "absolute top-0 left-0 w-full h-full bg-white p-4", children: [jsx("button", { className: "absolute top-4 right-4", onClick: onClick, children: jsx(Icon, { name: "CloseIcon", width: "24", height: "24", asSVG: true }) }), jsxs(Button, { onClick: getCity, className: "flex items-center text-sm text-secondary-text mb-4", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24", className: "box-border mr-2", asSVG: true }), city] }), children, jsx("div", { className: "mb-7", children: burgerSubMenu?.map(renderBurgerSubMenuItem) }), jsx(SearchBar, { context: context, className: "grow" })] }));
+      return (jsxs("div", { className: "absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20", children: [jsx("button", { className: "absolute top-4 right-4 border-none bg-transparent", onClick: onClick, children: jsx(Icon, { name: "CloseIcon", width: "24", height: "24", asSVG: true }) }), jsxs(Button, { onClick: getCity, className: "flex items-center text-sm text-secondary-text mb-4", children: [jsx(Icon, { name: "GeolocationIcon", width: "24", height: "24", className: "box-border mr-2", asSVG: true }), city] }), children, jsx("div", { className: "mb-7", children: burgerSubMenu?.map(renderBurgerSubMenuItem) }), jsx(SearchBar, { context: context, className: "grow" })] }));
   });
   const renderBurgerSubMenuItem = (menu, i) => {
       const { icon, href, text } = menu;
       return (jsxs(Button, { href: href, className: "flex text-sm mb-4", children: [icon ? jsx(Icon, { className: "pr-1", name: icon, width: "24", height: "24", asSVG: true }) : null, jsx("span", { className: "pl-0.5 font-medium", children: text })] }, `headerSubMenu-${i}`));
   };
 
-  const HeaderTop = JSX(({ onClick, bgColor }) => (jsxs("div", { className: "flex items-center justify-between border-0 border-b border-main-divider h-[50px]", children: [jsxs("div", { className: "flex items-center", children: [jsx("button", { className: "pr-4", onClick: onClick, "aria-label": "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043C\u0435\u043D\u044E", children: jsx(Icon, { name: bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite', width: "24", height: "24", asSVG: true }) }), jsx(Logo, { bgColor: bgColor })] }), jsx("button", { className: `${bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'} text-sm`, children: "\u0412\u043E\u0439\u0442\u0438" })] })));
+  const HeaderTop = JSX(({ onClick, bgColor }) => (jsxs("div", { className: "flex items-center justify-between border-0 border-b border-main-divider h-[50px]", children: [jsxs("div", { className: "flex items-center", children: [jsx("button", { className: "pr-4 border-0 bg-transparent", onClick: onClick, "aria-label": "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043C\u0435\u043D\u044E", children: jsx(Icon, { name: bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite', width: "24", height: "24", asSVG: true }) }), jsx(Logo, { bgColor: bgColor })] }), jsx("button", { className: `${bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'} text-sm  border-0 bg-transparent`, children: "\u0412\u043E\u0439\u0442\u0438" })] })));
 
   const Header = JSX(({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, burgerSubMenu }) => {
       const router = context.useRouter();
@@ -1048,7 +1062,7 @@
       const activeSubItem = findActiveSubItem(router)(subItems);
       const [burgerMenuShow, setBurgerMenuShow] = context.useState(false);
       const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
-      return (jsxs("header", { className: `${bgColor} ${className}`, children: [jsxs("div", { className: "container px-4 py-0", children: [jsx(HeaderTop, { onClick: toggleBurgerMenu, bgColor: bgColor }), jsx("nav", { className: "flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]", children: jsx("div", { className: "flex", children: subItems?.map((_, i) => renderSubItem({
+      return (jsxs("header", { className: `${bgColor} ${className}`, children: [jsxs("div", { className: "container px-4 py-0 box-border", children: [jsx(HeaderTop, { onClick: toggleBurgerMenu, bgColor: bgColor }), jsx("nav", { className: "flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]", children: jsx("div", { className: "flex", children: subItems?.map((_, i) => renderSubItem({
                                   ...useLink({ router, handlerDecorator }, _),
                                   active: _ === activeSubItem,
                                   bgColor,
@@ -1056,16 +1070,6 @@
   });
   const renderSubItem = (item, i) => (jsx(HeaderItem, { className: "mr-8 whitespace-nowrap text-sm", ...item }, String(i)));
 
-  const GOLDEN_RATIO = 1.618;
-  const Placeholder = JSX(({ className, context, title, 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 renderShimmer = (size = 3) => goldenSequence(100, size)
-      .map((_) => Math.floor(_))
-      .map(renderShimmerItem);
-  const renderShimmerItem = (width = 100, index) => (jsx("div", { style: { width: `${width}%` }, className: "h-4 mt-2 bg-secondary-light" }, String(index)));
-  const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
-
   const benefitTitleStyleMap = {
       primary: 'text-primary-text',
       secondary: 'text-white',
@@ -1075,12 +1079,15 @@
       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", 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)));
+      return (jsxs("div", { className: "flex gap-3 items-center mb-2.5 last:mb-0", children: [benefit.icon && (jsx(Icon, { className: "w-6 h-6 rounded-full box-border", name: benefit.icon, width: "24", height: "24", asSVG: true })), jsx("div", { className: `font-medium text-m-title-xs 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 = '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 } }) }))] }));
+      return (jsxs("div", { className: `w-full text-primary-text ${className}`, children: [jsx("div", { children: jsxs(BaseTile, { context: context, title: title && (jsx(Heading, { headingType: headingType, title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}` })), buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-5 gap-2.5" })) : null, children: [description && jsx(Description, { description: description }), benefits?.length ? (jsx("div", { className: "mt-5", children: benefits.map((_, i) => renderBenefit(_, i, version)) })) : null, items?.length ? jsx(List, { items: items }) : null] }) }), renderImage(image)] }));
   });
+  function renderImage(image) {
+      return image?.src ? (jsx("div", { className: "mt-5", children: jsx(Img, { image: { className: 'block', ...image } }) })) : null;
+  }
 
   const ProductBlock = JSX(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -1090,25 +1097,13 @@
   });
 
   const ProductGalleryBlock = JSX(({ block, headingType, context }) => {
-      return (jsx("section", { className: "flex grow-0 shrink-0 basis-full px-4 py-6", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { context: context, headingType: headingType || 'h2', ...block }) }) }));
+      return (jsx("section", { className: "flex grow-0 shrink-0 basis-full px-4 pt-6", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { context: context, headingType: headingType || 'h2', ...block }) }) }));
   });
 
-  const ProductGallery = JSX(({ className, context, duration = 0, slides = [] }) => {
+  const ProductGallery = JSX(({ className, context, slides = [] }) => {
       const galleryBlocks = slides.map((s) => s.productBlock);
-      const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
-      return (jsxs("section", { className: `font-sans bg-white overflow-hidden w-100 ${className || ''}`, children: [jsx("div", { className: `flex duration-1000`, style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((block, i) => (jsx(ProductGalleryBlock, { block: block, context: context }, String(i)))) }), jsx("div", { className: "flex px-4 py-6", children: slides.map((_, i) => renderNavButton({
-                      slide: _.productBlock,
-                      i,
-                      activeSlideIndex,
-                      onClick: () => setActiveSlideIndex(i),
-                      duration,
-                  })) })] }));
+      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)))) }) }));
   });
-  function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
-      const isActiveBtn = i === activeSlideIndex;
-      const progressBarClassName = isActiveBtn ? 'animate-slide bg-primary-main' : 'bg-main-divider';
-      return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `relative overflow-hidden border-0 bg-inherit cursor-pointer pl-0 mr-1.5 pt-4 pb-5 last:mr-0 grow basis-0`, children: jsx("div", { className: `absolute bottom-0 left-0 w-full h-[3px] ${progressBarClassName}`, style: { animationDuration: `${duration}s`, animationFillMode: 'forwards' } }) }, String(i)));
-  }
 
   const StepsBlock = JSX(({ className, title, description, steps, size = 'normal' }) => {
       return (jsxs("section", { className: `box-border font-sans text-primary-text bg-white px-4 py-6 flex flex-col ${className || ''}`, children: [title && jsx(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] }));
@@ -1117,7 +1112,7 @@
       const { step, size, i, length } = params;
       const isLastStep = length - 1 === i;
       const margin = size === 'normal' ? 'ml-[34px]' : 'ml-[24px]';
-      return (jsx("div", { children: jsxs("div", { className: "flex flex-row text-center relative", children: [jsxs("div", { children: [renderIconArea(step, size, i), !isLastStep && jsx("div", { className: `min-h-8 h-full w-[2px] bg-secondary-light ${margin}` })] }), jsxs("div", { className: "flex flex-col justify-center 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 text-secondary-text 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", { children: [renderIconArea(step, size, i), !isLastStep && jsx("div", { className: `min-h-8 h-full w-[2px] bg-secondary-light ${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 text-secondary-text text-left ${step.label ? 'mt-1' : ''}`, children: step.description }))] })] }, String(i)) }, String(i)));
   };
   const renderIconArea = (step, size, i) => {
       const iconAreaSize = size === 'normal'
@@ -1125,18 +1120,18 @@
           : '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, asSVG: true })) || 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 })) || i + 1 }) }));
   };
 
   const Blocks = {
       Accordion,
       ExchangeRateTile,
       Footer,
+      Gallery,
       Header,
       Headline,
       LinkDocs,
       MobileAppTile,
-      Placeholder,
       ProductBlock,
       ProductGallery,
       StepsBlock,
@@ -1159,6 +1154,16 @@
       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 })] }));
   });
 
+  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 renderShimmer = (size = 3) => goldenSequence(100, size)
+      .map((_) => Math.floor(_))
+      .map(renderShimmerItem);
+  const renderShimmerItem = (width = 100, index) => (jsx("div", { style: { width: `${width}%` }, className: "h-4 mt-2 bg-secondary-light" }, String(index)));
+  const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
+
   const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
   const ContentPage = JSX(({ className, context, blocksRegistry, data: { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' }, blockDecorator = defaultBlockDecorator, }) => {
       const { header } = slots;
@@ -1184,11 +1189,20 @@
   }
 
   const ContentPageHead = JSX(({ HeadComponent, data, children }) => {
-      const { title, description, keywords, robots, og } = data;
-      return (jsxs(HeadComponent, { children: [jsx("title", { children: title }), jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), description && jsx("meta", { name: "description", content: description }), keywords && jsx("meta", { name: "keywords", content: keywords.join(',') }), robots && jsx("meta", { name: "robots", content: robots.join(',') }), og
-                  ? Object.entries(og).map(([key, value]) => (jsx("meta", { name: `og:${key}`, content: value }, key)))
-                  : null, children] }));
+      const { title, main, og, twitter, jsonLd } = data;
+      const { description, keywords, canonical, robots } = main || {};
+      return (jsxs(HeadComponent, { children: [jsx("title", { children: title }), jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }), description && jsx("meta", { name: "description", content: description }), keywords && jsx("meta", { name: "keywords", content: keywords.join(',') }), robots && jsx("meta", { name: "robots", content: robots.join(',') }), renderOpenGraph(og), renderTwitter(twitter), canonical && jsx("link", { rel: "canonical", href: canonical }), jsonLd && jsx("script", { type: "application/ld+json", children: jsonLd }), children] }));
   });
+  function renderOpenGraph(og) {
+      return og
+          ? Object.entries(og).map(([key, value]) => (jsx("meta", { name: `og:${key}`, content: value }, key)))
+          : null;
+  }
+  function renderTwitter(twitter) {
+      return twitter
+          ? Object.entries(twitter).map(([key, value]) => (jsx("meta", { name: `twitter:${key}`, content: value }, key)))
+          : null;
+  }
 
   function isBlockInRegistry(blockType, registry) {
       return (blockType || '') in registry;