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

package/mobile/bundle/bundle.umd.js

@@ -241,6 +241,7 @@
       IconMap["ActualBalanceIcon"] = "ActualBalanceIcon";
       IconMap["AppleIcon"] = "AppleIcon";
       IconMap["ArrowDownIcon"] = "ArrowDownIcon";
+      IconMap["ArrowLeftIcon"] = "ArrowLeftIcon";
       IconMap["ArrowsRewindRight"] = "ArrowsRewindRight";
       IconMap["ArrowUpIcon"] = "ArrowUpIcon";
       IconMap["AtmIcon"] = "AtmIcon";
@@ -318,7 +319,8 @@
   (function (IconTitleMap) {
       IconTitleMap["ActualBalanceIcon"] = "\u0414\u0435\u043D\u044C\u0433\u0438";
       IconTitleMap["AppleIcon"] = "\u041B\u043E\u0433\u043E \u00ABApple\u00BB";
-      IconTitleMap["ArrowDownIcon"] = "ArrowDownIcon";
+      IconTitleMap["ArrowDownIcon"] = "\u0421\u0442\u0440\u0435\u043B\u043A\u0430 '\u0412\u043D\u0438\u0437'";
+      IconTitleMap["ArrowLeftIcon"] = "\u0421\u0442\u0440\u0435\u043B\u043A\u0430 '\u0412\u043B\u0435\u0432\u043E'";
       IconTitleMap["ArrowsRewindRight"] = "ArrowsRewindRight";
       IconTitleMap["ArrowUpIcon"] = "ArrowUpIcon";
       IconTitleMap["AtmIcon"] = "\u0411\u0430\u043D\u043A\u043E\u043C\u0430\u0442";
@@ -395,10 +397,10 @@
 
   const svgColorsMap = {
       none: '',
-      primary: 'text-primary-main',
-      secondary: 'text-primary-text',
+      primary: 'text-white',
+      secondary: 'text-white',
   };
-  const Icon = JSX(({ className = '', name, alt = `Иконка ${IconTitleMap[name] || name}`, title = alt, asSVG, color = 'primary', ...imgProps }) => {
+  const Icon = JSX(({ className = '', name = '', alt = `Иконка ${IconTitleMap[name] || name}`, title = alt, asSVG, color = 'primary', ...imgProps }) => {
       const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
       if (asSVG) {
           return (jsxs("svg", { className: `${svgColorsMap[color]} ${className}`, ...imgProps, "aria-hidden": "true", style: color === 'secondary' ? { filter: 'invert(1)' } : null, children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }));
@@ -406,11 +408,19 @@
       return (jsx("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
   });
 
-  const Img = JSX(({ className = '', image, imageClassName }) => {
+  const Img = JSX(({ className = '', image, imageClassName = '', ...iconProps }) => {
+      // backwards compatibility with existing icons in usage
+      const icon = typeof image === 'string' ? image : image?.icon;
+      if (icon || icon === '') {
+          return jsx(Icon, { className: className, name: icon, ...iconProps });
+      }
+      return (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image }));
+  });
+  const ImgAsPicture = JSX(({ className = '', image, imageClassName = '' }) => {
       if (!image) {
           return null;
       }
-      return (jsxs("picture", { className: className, children: [image.sources?.length
+      return (jsxs("picture", { className: className, children: [image?.sources?.length
                   ? image.sources.map(({ src, format }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format) }, `${index}_${src}`)))
                   : null, renderImg(image, imageClassName)] }));
   });
@@ -594,7 +604,7 @@
 
   const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
       const { text, fileSize, ...linkProps } = doc;
-      return (jsxs("a", { className: className, role: "link", ...linkProps, children: [icon ? (jsx(Icon, { className: iconClassName, name: icon, width: "24px", height: "24px", asSVG: true })) : null, text ? (jsxs("span", { className: textClassName, children: [text, jsx("span", { className: suffixClassName, children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] }));
+      return (jsxs("a", { className: className, role: "link", ...linkProps, children: [icon ? (jsx(Img, { className: iconClassName, image: icon, width: "24px", height: "24px", asSVG: true })) : null, text ? (jsxs("span", { className: textClassName, children: [text, jsx("span", { className: suffixClassName, children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })) : null] }));
   });
   const formatSuffix = (ext, fileSize) => {
       const prefix = ext || fileSize ? ',' : '';
@@ -623,7 +633,7 @@
               : null }));
   });
 
-  const LinkDocs = JSX(({ className = '', context, title, subtitle, icon = 'DocIconMonoColor', documents, orientation = 'vertical', hasBorder = true, }) => {
+  const LinkDocs = JSX(({ className = '', context, title, subtitle, icon = { icon: 'DocIconMonoColor' }, documents, orientation = 'vertical', hasBorder = true, }) => {
       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 }))] }));
   });
 
@@ -694,14 +704,14 @@
 
   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 font-light text-left", children: aboveText }), jsx("div", { className: "text-m-button 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-button-sm text-left", children: text })] })) : null] }));
   });
   const getButtonStyle = (props) => {
       const { version, aboveText, rounded } = props;
       if (version === 'link') {
           return '';
       }
-      const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-3.5'}`;
+      const withTextStyle = `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[18px]'}`;
       return [
           'flex items-center justify-center',
           isWithText(props) ? withTextStyle : 'h-12 w-12',
@@ -737,7 +747,7 @@
   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)));
+      return icon ? (jsx(Button, { appendLeft: jsx(Img, { image: icon, width: "24", height: "24", asSVG: true }), ...button }, String(i))) : (jsx(Button, { ...button }, String(i)));
   }
 
   const Description = JSX((props) => {
@@ -745,24 +755,40 @@
       return jsx("div", { className: `font-normal text-base ${className}`, children: description });
   });
 
-  const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3 mt-2';
+  const LIST_STYLE_CLASSES = {
+      primary: 'rounded-full inline-block mr-3 mt-2',
+      secondary: 'rounded-full inline-block mr-3 mt-2',
+      gray: 'rounded-full inline-block mr-3 mt-2',
+      tile: 'rounded-full inline-block mr-4',
+      'tile-white': 'rounded-full inline-block mr-4',
+  };
   const LIST_DOT_STYLE_MAP = {
-      primary: 'bg-primary-main',
+      primary: 'bg-primary-text',
       secondary: 'bg-white',
       gray: 'bg-secondary-text',
+      tile: 'bg-black',
+      'tile-white': 'bg-white',
   };
   const ListItem = JSX(({ className = '', isDotted = true, children, version = 'primary' }) => {
       return (jsxs("div", { className: `font-sans flex items-start ${className}`, role: "listitem", children: [isDotted && jsx("div", { className: getListStyle(version) }), jsx("span", { children: children })] }));
   });
   const getListStyle = (version) => {
-      const size = version === 'gray' ? 'w-1.5 h-1.5 min-w-1.5 min-h-1.5' : 'w-2 h-2 min-w-2 min-h-2';
-      return `${LIST_STYLE_CLASSES} ${LIST_DOT_STYLE_MAP[version]} ${size}`;
+      const size = {
+          primary: 'w-2 h-2 min-w-2 min-h-2',
+          secondary: 'w-2 h-2 min-w-2 min-h-2',
+          gray: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5',
+          tile: 'w-[7px] h-[7px] min-w-[7px] min-h-[7px]',
+          'tile-white': 'w-[7px] h-[7px] min-w-[7px] min-h-[7px]',
+      };
+      return `${LIST_STYLE_CLASSES[version]} ${LIST_DOT_STYLE_MAP[version]} ${size[version]}`;
   };
 
   const TEXT_STYLE_MAP = {
       primary: 'text-primary-text',
       secondary: 'text-white',
       gray: 'text-secondary-text',
+      tile: 'text-primary-text',
+      'tile-white': 'text-white',
   };
   const List = JSX((props) => {
       const { className = '', itemClassName, isDotted, items, version = 'primary' } = props;
@@ -784,7 +810,7 @@
       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-6 h-6 rounded-full box-border", name: benefit.icon, width: "24", height: "24", asSVG: true, color: version })), 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)));
+      return (jsxs("div", { className: "flex gap-3 items-center mb-2.5 last:mb-0", children: [benefit.icon ? (jsx(Img, { className: "w-6 h-6 rounded-full box-border", image: benefit.icon, width: "24", height: "24", asSVG: true, color: version })) : null, 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', isDotted = true, label, }) => {
@@ -854,7 +880,7 @@
       ${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$1(button) {
-      return (jsx(Button, { className: "mt-3", appendLeft: button?.icon && jsx(Icon, { name: button?.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
+      return (jsx(Button, { className: "mt-3", appendLeft: button?.icon && jsx(Img, { image: 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 }));
@@ -923,7 +949,7 @@
       });
       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: [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] }));
+          ${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(Img, { image: labelIcon, width: "24", height: "24", asSVG: true, className: "mr-3" })) : null, label] }), hasContent ? jsx(Img, { image: 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';
@@ -936,7 +962,7 @@
   const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
   const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
 
-  const HeaderCell = JSX(({ icon, image, title, subtitle, isFillGradient }) => (jsxs("div", { role: "columnheader", scope: "col", children: [icon && (jsx(Icon, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", name: icon, width: "63", height: "63" })), image?.src && (jsx("div", { className: "mb-3.5", children: jsx(Img, { image: image }) })), title && (jsx(Heading, { headingType: "h4", className: `${isFillGradient ? 'text-white' : ''}`, title: title })), subtitle && (jsx("div", { className: `text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`, children: subtitle }))] })));
+  const HeaderCell = JSX(({ icon, image, title, subtitle, isFillGradient }) => (jsxs("div", { role: "columnheader", scope: "col", children: [icon ? (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })) : null, image?.src && (jsx("div", { className: "mb-3.5", children: jsx(Img, { image: image }) })), title && (jsx(Heading, { headingType: "h4", className: `${isFillGradient ? 'text-white' : ''}`, title: title })), subtitle && (jsx("div", { className: `text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`, children: subtitle }))] })));
 
   const TableCell = JSX(({ cell, rowHeader, isFillGradient = false }) => {
       const cellWrapperClasses = `box-border flex flex-col`;
@@ -1054,10 +1080,10 @@
   });
   const renderCurrencyRow = (exchangeCurrencyItem) => {
       const code = exchangeCurrencyItem?.currency?.currency;
-      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));
+      return (jsxs("tr", { className: "pb-1", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(Img, { image: { icon: 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-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 CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex text-sm ${className}`, children: [jsx(Img, { className: "min-w-fit", image: { icon: '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 }));
@@ -1131,10 +1157,10 @@
       return (jsx("div", { className: `col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light ${className || ''}`, children: href ? (jsxs("div", { className: "flex", children: [jsx("div", { className: "flex justify-center align-middle rounded-md bg-primary-main w-[50px] h-[50px]", children: jsx(Logo, { className: "w-[33px]", bgColor: "transparent", hideTitle: true }) }), jsxs("a", { href: href, target: "_blank", className: "flex flex-col justify-center pl-3 font-sans", children: [jsx("div", { className: "text-m-button font-medium mb-[3px]", children: title }), jsx("div", { className: "text-m-button text-secondary-text", children: description })] })] })) : null }));
   });
 
-  const Contacts = JSX(({ className, items, hasButton, context }) => {
+  const Contacts = JSX(({ className = '', items, hasButton, context }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("div", { className: `flex flex-col ${className || ''}`, children: [items?.length ? items.map(renderContact) : null, hasButton ? (jsx(Button, { version: "primary", className: "mt-0.5 mb-5", ...useLink({ router, handlerDecorator }, {
+      return (jsxs("div", { className: className, children: [items?.length ? items.map(renderContact) : null, hasButton ? (jsx(Button, { version: "primary", className: "mb-6 w-full", ...useLink({ router, handlerDecorator }, {
                       text: 'Обратная связь',
                       href: '/',
                       target: '_blank',
@@ -1142,14 +1168,14 @@
   });
   const renderContact = (item, index) => {
       const { type, text, description } = item;
-      return (jsxs("div", { className: "mb-3.5", children: [jsx("div", { children: renderText(type, text) }), jsx("div", { className: "font-sans text-sm text-secondary-text", children: description })] }, String(index)));
+      return (jsxs("div", { className: "mb-4", children: [jsx("div", { children: renderText(type, text) }), jsx("div", { className: "mt-1 font-sans font-light text-sm text-secondary-text", children: description })] }, String(index)));
   };
   const renderText = (type, text = '') => {
       switch (type) {
           case 'tel':
-              return (jsx("a", { className: "font-sans font-medium text-xl text-primary-text no-underline", href: `tel:${formatTel(text)}`, children: text }));
+              return (jsx("a", { className: "font-sans text-xl text-primary-text no-underline", href: `tel:${formatTel(text)}`, children: text }));
           case 'email':
-              return (jsx("a", { className: "font-sans font-medium text-xl text-primary-text no-underline", href: `mailto:${text}`, children: text }));
+              return (jsx("a", { className: "font-sans text-xl text-primary-text no-underline", href: `mailto:${text}`, children: text }));
           default:
               return jsx("span", { children: text });
       }
@@ -1166,19 +1192,45 @@
   const ICONS_MAP = [
       {
           origins: ['t.me', 'telegram.org'],
-          icon: 'TelegramIcon',
+          icon: { icon: 'TelegramIcon' },
           label: 'Телеграм',
           width: '20px',
           height: '16px',
       },
-      { origins: ['vk.com'], icon: 'VKIcon', label: 'ВКонтакте', width: '24px', height: '12px' },
-      { origins: ['ok.ru'], icon: 'OkIcon', label: 'Одноклассники', width: '12px', height: '20px' },
+      {
+          origins: ['vk.com'],
+          icon: { icon: 'VKIcon' },
+          label: 'ВКонтакте',
+          width: '24px',
+          height: '12px',
+      },
+      {
+          origins: ['ok.ru'],
+          icon: { icon: 'OkIcon' },
+          label: 'Одноклассники',
+          width: '12px',
+          height: '20px',
+      },
+      {
+          origins: ['apps.apple.com'],
+          icon: { icon: 'AppleIcon' },
+          label: 'App Store',
+          width: '20px',
+          height: '22px',
+      },
+      {
+          origins: ['play.google.com'],
+          icon: { icon: 'PlayMarketIcon' },
+          label: 'Google Play',
+          width: '21px',
+          height: '21px',
+      },
   ];
   const MediaButton = JSX(({ href }) => {
       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-[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" })) }));
+      return (jsx("a", { className: "flex items-center justify-center border border-solid rounded-md border-main-divider no-underline outline-none w-14 h-14 box-border text-primary-main hover:text-white hover:bg-primary-main hover:border-primary-main", href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(Img, { image: icon, width: width, height: height, asSVG: true, className: "block", color: "none" })) : null }));
   });
 
   const SocialMedia = JSX(({ className, media, context }) => {
@@ -1208,10 +1260,10 @@
 
   const SearchBar = JSX(({ className, context }) => {
       const { term, setTerm } = context.useSearch();
-      return (jsxs("form", { className: `relative ${className || ''}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: "w-[20px] h-[20px]", children: jsx(Icon, { name: "LoupeIcon", width: "24", height: "24" }) }), !term && (jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-normal text-sm text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: 'h-12 pl-12 w-full peer placeholder-transparent font-sans font-normal text-base text-black border border-solid rounded box-border outline-none pr-[6%] border-main-divider focus:border-primary-text', value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input", placeholder: "some search" }), jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
+      return (jsxs("form", { className: `relative ${className || ''}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: "w-[20px] h-[20px]", children: jsx(Img, { image: "LoupeIcon", width: "24", height: "24" }) }), !term && (jsx("label", { htmlFor: "search-bar-input", className: "font-sans font-normal text-sm text-secondary-text", children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: 'h-12 pl-12 w-full peer placeholder-transparent font-sans font-normal text-base text-black border border-solid rounded box-border outline-none pr-[6%] border-main-divider focus:border-primary-text', value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input", placeholder: "some search" }), jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
                       e.preventDefault();
                       setTerm('');
-                  }, children: jsx(Icon, { name: "CloseIcon", width: "24", height: "24" }) })] }));
+                  }, children: jsx(Img, { image: "CloseIcon", width: "24", height: "24" }) })] }));
   });
 
   const getAccordionItems = (items) => items?.map((item) => ({
@@ -1231,7 +1283,7 @@
   });
   const renderSubMenuItem = (menu, i) => {
       const { icon, href, text } = menu;
-      return (jsxs(Button, { version: "link", 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-2.5 font-medium text-primary-text", children: text })] }, `footer-${i}`));
+      return (jsxs(Button, { version: "link", href: href, className: "flex text-sm mb-4", children: [icon ? jsx(Img, { className: "pr-1", image: icon, width: "24", height: "24", asSVG: true }) : null, jsx("span", { className: "pl-2.5 font-medium text-primary-text", children: text })] }, `footer-${i}`));
   };
 
   const maxBy = (discriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
@@ -1282,14 +1334,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 box-border z-20", children: [jsx("button", { className: "absolute top-4 right-4 border-none bg-transparent cursor-pointer", 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 p-0 mb-4 bg-transparent cursor-pointer", children: [jsx(Icon, { name: "GeolocationIcon", width: "20", height: "20", className: "text-primary-main 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 cursor-pointer", onClick: onClick, children: jsx(Img, { image: "CloseIcon", width: "24", height: "24", asSVG: true }) }), jsxs("button", { onClick: getCity, className: "flex items-center text-sm text-secondary-text p-0 mb-4 bg-transparent cursor-pointer", children: [jsx(Img, { image: "GeolocationIcon", width: "20", height: "20", className: "text-primary-main 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("a", { href: href, className: "flex text-sm mb-4 hover:text-primary-main", children: [icon ? (jsx(Icon, { className: "text-primary-main pr-1", name: icon, width: "24", height: "24", asSVG: true })) : null, jsx("span", { className: "pl-0.5 font-medium", children: text })] }, `headerSubMenu-${i}`));
+      return (jsxs("a", { href: href, className: "flex text-sm mb-4 hover:text-primary-main", children: [icon ? (jsx(Img, { className: "text-primary-main pr-1", image: 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: "pl-0 pr-4 border-0 bg-transparent cursor-pointer", 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 cursor-pointer`, 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: "pl-0 pr-4 border-0 bg-transparent cursor-pointer", onClick: onClick, "aria-label": "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043C\u0435\u043D\u044E", children: jsx(Img, { image: 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 cursor-pointer`, children: "\u0412\u043E\u0439\u0442\u0438" })] })));
 
   const Header = JSX(({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems }) => {
       const router = context.useRouter();
@@ -1346,8 +1398,13 @@
   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 ProductGalleryBlock = JSX(({ block, headingType, context }) => {
-      return (jsx("section", { className: "flex grow-0 shrink-0 basis-full px-4 pt-6", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { context: context, headingType: headingType || 'h2', ...block }) }) }));
+  const productGalleryStyleMap = {
+      primary: 'bg-white text-primary-text',
+      secondary: 'bg-primary-main text-white',
+  };
+  const ProductGalleryBlock = JSX(({ block, headingType, context, className = '' }) => {
+      const version = block?.version ?? 'primary';
+      return (jsx("section", { className: `flex grow-0 shrink-0 basis-full px-4 pt-6 ${productGalleryStyleMap[version]} ${className}`, children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { context: context, headingType: headingType || 'h2', ...block }) }) }));
   });
 
   const ProductGallery = JSX(({ className, context, slides = [] }) => {
@@ -1398,11 +1455,12 @@
       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 }) }));
+      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?.icon && jsx(Img, { image: step.icon, width: iconSize, height: iconSize, asSVG: true })) ||
+                  i + 1 }) }));
   };
 
   const TableTileHeader = JSX(({ title, icon }) => {
-      return (jsxs("div", { className: "flex gap-2.5 mb-2", children: [title ? jsx(Heading, { headingType: "h3", className: "font-medium", title: title }) : null, icon ? (jsx(Icon, { className: "ml-auto max-w-6 max-h-6", name: icon, width: "24px", height: "24px" })) : null] }));
+      return (jsxs("div", { className: "flex gap-2.5 mb-2", children: [title ? jsx(Heading, { headingType: "h3", className: "font-medium", title: title }) : null, icon ? (jsx(Img, { className: "ml-auto max-w-6 max-h-6", image: icon, width: "24px", height: "24px" })) : null] }));
   });
 
   const TariffsTableTileCell = JSX(({ header, data }) => {
@@ -1410,7 +1468,7 @@
   });
   const renderCellInner = ({ label, description, list, image, buttons }, i) => (jsxs("div", { children: [i > 0 && (jsx("div", { className: "border-main-divider border border-solid border-t-0 border-x-0 my-2" })), label ? jsx("div", { className: "text-m-sm m-0", children: label }) : null, description ? (jsx("div", { className: "text-m-sm text-secondary-text mt-[3px]", children: description })) : null, list?.items?.length ? renderList(list) : null, image && jsx(Img, { image: { ...image, className: 'm-0' } }), buttons?.length ? renderButtons(buttons) : null] }, String(i)));
   const renderList = (list) => (jsx(List, { className: "flex flex-col justify-between items-start text-m-sm", version: "gray", items: list.items, isDotted: list.isDotted ?? true }));
-  const renderButtons = (buttons) => (jsx("div", { children: buttons.map(({ icon, rounded, ...buttonProps }, idx) => (jsx(Button, { className: `mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`, rounded: rounded, appendLeft: icon && jsx(Icon, { name: icon, width: "24px", height: "24px", asSVG: true }), ...buttonProps, "aria-label": icon }, String(idx)))) }));
+  const renderButtons = (buttons) => (jsx("div", { children: buttons.map(({ icon, rounded, ...buttonProps }, idx) => (jsx(Button, { className: `mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`, rounded: rounded, appendLeft: icon ? jsx(Img, { image: icon, width: "24px", height: "24px", asSVG: true }) : null, ...buttonProps, "aria-label": icon }, String(idx)))) }));
 
   const TariffsTableVertical = JSX(({ tiles }) => (jsx("div", { className: "flex flex-col gap-3.5", children: tiles.map((tile, i) => (jsx(TariffsTableTileCell, { ...tile }, String(i)))) })));