@redneckz/wildless-cms-uni-blocks 0.2.83 → 0.2.86

package/bundle/bundle.umd.js

@@ -38,36 +38,36 @@
     return Component._tmpl;
   };
 
-  const projectSettings = new (class {
-      _ = {
-          PROD_BRANCH: 'master',
-          FORCED_DRAFT_FLOW: false,
-      };
-      setup(_) {
-          this._ = _;
-      }
-      get TEST_BRANCH() {
-          return this._.TEST_BRANCH;
-      }
-      get RC_BRANCH() {
-          return this._.RC_BRANCH;
-      }
-      get PROD_BRANCH() {
-          return this._.PROD_BRANCH;
-      }
-      get FORCED_DRAFT_FLOW() {
-          return this._.FORCED_DRAFT_FLOW;
-      }
-      get ENABLE_ASSIST() {
-          return this._.ENABLE_ASSIST;
-      }
-      get SITEMAP() {
-          return this._.SITEMAP;
-      }
-      get CDN() {
-          return this._.CDN;
+  const getGeolocation = async () => new Promise((resolve) => navigator.geolocation.getCurrentPosition(({ coords }) => resolve(coords)));
+
+  function DaDataAPI(baseURL = '') {
+      async function getFetcherAddress() {
+          if (!('geolocation' in navigator)) {
+              return null;
+          }
+          try {
+              const coords = await getGeolocation();
+              const response = await fetch(`${baseURL}/geolocate`, {
+                  method: 'POST',
+                  mode: 'cors',
+                  body: JSON.stringify({
+                      lat: coords.latitude,
+                      lon: coords.longitude,
+                      count: 1,
+                  }),
+              });
+              const data = (await response.json());
+              return data?.suggestions?.[0]?.data?.city;
+          }
+          catch (e) {
+              console.error(e);
+              return null;
+          }
       }
-  })();
+      return {
+          getFetcherAddress,
+      };
+  }
 
   const AUTH_PREFIX = 'guest';
   const STORAGE_KEY = 'likesToken';
@@ -185,103 +185,45 @@
       };
   }
 
-  const getGeolocation = async () => new Promise((resolve) => navigator.geolocation.getCurrentPosition(({ coords }) => resolve(coords)));
-
-  function DaDataAPI(baseURL = '') {
-      async function getFetcherAddress() {
-          if (!('geolocation' in navigator)) {
-              return null;
-          }
-          try {
-              const coords = await getGeolocation();
-              const response = await fetch(`${baseURL}/geolocate`, {
-                  method: 'POST',
-                  mode: 'cors',
-                  body: JSON.stringify({
-                      lat: coords.latitude,
-                      lon: coords.longitude,
-                      count: 1,
-                  }),
-              });
-              const data = (await response.json());
-              return data?.suggestions?.[0]?.data?.city;
-          }
-          catch (e) {
-              console.error(e);
-              return null;
-          }
-      }
-      return {
-          getFetcherAddress,
-      };
-  }
-
-  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 LikeButton = JSX(({ className, onClick, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 w-[36px] bg-inherit cursor-pointer ${className || ''}`, onClick: onClick, "aria-label": ariaLabel, children: renderLikeIcon() })));
-  const renderLikeIcon = () => {
-      const params = {
-          stroke: '#292D32',
-          strokeLinecap: 'round',
-          strokeLinejoin: 'round',
-          strokeWidth: '1.5',
+  const projectSettings = new (class {
+      _ = {
+          PROD_BRANCH: 'master',
+          FORCED_DRAFT_FLOW: false,
       };
-      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 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 })] }));
-  });
-
-  const listStyleMap = {
-      primary: 'bg-primary-main',
-      secondary: 'bg-white',
-  };
-  const textStyleMap = {
-      primary: 'text-primary-text',
-      secondary: 'text-white',
-  };
-  const BlockItem = JSX(({ className, text, children, version = 'primary' }) => {
-      return (jsxs("div", { className: `inline-block flex ${className || ''}`, role: "listitem", children: [jsx("div", { className: `inline-block w-[8px] h-[8px] min-w-[8px] min-h-[8px] rounded-full mt-2 ${listStyleMap[version]}` }), jsx("span", { className: `text-base font-normal font-sans mx-3 ${textStyleMap[version]}`, children: text || children })] }));
-  });
+      setup(_) {
+          this._ = _;
+      }
+      get TEST_BRANCH() {
+          return this._.TEST_BRANCH;
+      }
+      get RC_BRANCH() {
+          return this._.RC_BRANCH;
+      }
+      get PROD_BRANCH() {
+          return this._.PROD_BRANCH;
+      }
+      get FORCED_DRAFT_FLOW() {
+          return this._.FORCED_DRAFT_FLOW;
+      }
+      get ENABLE_ASSIST() {
+          return this._.ENABLE_ASSIST;
+      }
+      get SITEMAP() {
+          return this._.SITEMAP;
+      }
+      get CDN() {
+          return this._.CDN;
+      }
+  })();
 
-  const buttonStyleMap = {
-      primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
-      secondary: 'text-primary-main bg-secondary-light hover:bg-secondary-hover active:bg-secondary-active',
-  };
-  const buttonDisabledStyleMap = {
-      primary: 'bg-secondary-dark text-secondary-text',
-      secondary: 'bg-secondary-light text-secondary-text',
-  };
-  const styleButton = 'inline-block text-center font-sans select-none';
-  const Button = JSX(({ className, text, aboveText, appendLeft, href, target, onClick, children, disabled, rounded, version = 'none', ariaLabel, ...rest }) => {
-      const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, rounded: rounded }));
-      if (disabled) {
-          return (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: "-1", className: `${styleButton} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: buttonInner }));
+  const Icon = JSX(({ className, name, alt = `Icon ${name}`, title = alt, asSVG, ...imgProps }) => {
+      const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
+      if (asSVG) {
+          return (jsxs("svg", { className: className, ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }));
       }
-      return (jsx("a", { className: `${styleButton} cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: !href ? 'button' : 'link', ...rest, children: buttonInner }));
-  });
-  const ButtonInner = JSX(({ text, aboveText, appendLeft, rounded }) => {
-      const withoutText = !text && !aboveText && Boolean(appendLeft);
-      const buttonInnerClasses = `flex items-center justify-center ${withoutText ? 'h-12 w-12 min-h-12 min-w-12' : `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[13px]'}`} ${rounded ? 'rounded-full' : ''}`;
-      return (jsxs("div", { className: buttonInnerClasses, children: [appendLeft ? appendLeft : null, !withoutText ? (jsxs("div", { children: [jsx("div", { className: "text-xxs text-left", children: aboveText }), jsx("div", { className: "text-sm font-medium text-left", children: text })] })) : null] }));
+      return (jsx("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
   });
 
-  const Icon = JSX(({ className, name, alt = `Icon ${name}`, title = alt, ...imgProps }) => (jsxs("svg", { className: className, ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${projectSettings.CDN || ''}icons/${name}.svg#icon`, xlinkHref: `${projectSettings.CDN || ''}icons/${name}.svg#icon` })] })));
-
-  const Img = JSX(({ className, image }) => (jsxs("picture", { className: `${className || ''}`, children: [image.sources?.length
-              ? image.sources.map(({ src, format }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format) }, `${index}_${src}`)))
-              : null, jsx("img", { src: image.src, alt: image.alt || image.title, title: image.title, ...image?.size })] })));
-  function formatToMimeType(format) {
-      return format ? `image/${String(format)}` : undefined;
-  }
-
   var SizeTableClass;
   (function (SizeTableClass) {
       SizeTableClass["XL"] = "text-title-lg";
@@ -296,6 +238,13 @@
   });
   const getClasses = (...classes) => classes.filter(Boolean).join(' ');
 
+  const BenefitsBlock = JSX(({ className, title, benefits }) => {
+      return (jsxs("section", { className: `font-sans text-primary-text bg-white p-12 pb-2 flex flex-col items-center ${className || ''}`, children: [title ? jsx(Title, { className: "font-medium m-0 max-w-[47rem] text-center", children: title }) : null, benefits?.length ? (jsx("div", { className: "grid grid-cols-2 gap-5 mt-9", children: benefits.map(renderStep) })) : null] }));
+  });
+  const renderStep = (benefit, i) => {
+      return (jsxs("div", { className: "flex items-center p-10 gap-5 max-w-[580px]", children: [benefit.icon && (jsx(Icon, { className: "h-[70px] w-[70px] min-w-[70px] min-h-[70px]", name: benefit.icon, width: "70", height: "70" })), jsxs("div", { children: [jsx("h3", { className: "font-medium text-xl m-0", children: benefit.label }), benefit.description && (jsx("div", { className: "font-normal text-sm mt-2", children: benefit.description }))] })] }, String(i)));
+  };
+
   const MOBILE_URL_PATH = '/mobile';
   const isURL = (href) => href?.includes('//');
   const isHrefActive = (href, router, cmp = (href, baseHref) => href === baseHref) => {
@@ -359,6 +308,47 @@
       };
   }
 
+  const listStyleMap = {
+      primary: 'bg-primary-main',
+      secondary: 'bg-white',
+  };
+  const textStyleMap = {
+      primary: 'text-primary-text',
+      secondary: 'text-white',
+  };
+  const BlockItem = JSX(({ className, text, children, version = 'primary' }) => {
+      return (jsxs("div", { className: `inline-block flex ${className || ''}`, role: "listitem", children: [jsx("div", { className: `inline-block w-[8px] h-[8px] min-w-[8px] min-h-[8px] rounded-full mt-2 ${listStyleMap[version]}` }), jsx("span", { className: `text-base font-normal font-sans mx-3 ${textStyleMap[version]}`, children: text || children })] }));
+  });
+
+  const buttonStyleMap = {
+      primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
+      secondary: 'text-primary-main bg-secondary-light hover:bg-secondary-hover active:bg-secondary-active',
+  };
+  const buttonDisabledStyleMap = {
+      primary: 'bg-secondary-dark text-secondary-text',
+      secondary: 'bg-secondary-light text-secondary-text',
+  };
+  const styleButton = 'inline-block text-center font-sans select-none';
+  const Button = JSX(({ className, text, aboveText, appendLeft, href, target, onClick, children, disabled, rounded, version = 'none', ariaLabel, ...rest }) => {
+      const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, rounded: rounded }));
+      if (disabled) {
+          return (jsx("div", { role: "button", "aria-disabled": "true", "aria-label": ariaLabel, tabIndex: "-1", className: `${styleButton} ${buttonDisabledStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, children: buttonInner }));
+      }
+      return (jsx("a", { className: `${styleButton} cursor-pointer no-underline ${buttonStyleMap[version] || ''} ${rounded ? 'rounded-full' : 'rounded-md'} ${className || ''}`, href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: !href ? 'button' : 'link', ...rest, children: buttonInner }));
+  });
+  const ButtonInner = JSX(({ text, aboveText, appendLeft, rounded }) => {
+      const withoutText = !text && !aboveText && Boolean(appendLeft);
+      const buttonInnerClasses = `flex items-center justify-center ${withoutText ? 'h-12 w-12 min-h-12 min-w-12' : `px-8 gap-2 ${aboveText ? 'py-2' : 'py-[13px]'}`} ${rounded ? 'rounded-full' : ''}`;
+      return (jsxs("div", { className: buttonInnerClasses, children: [appendLeft ? appendLeft : null, !withoutText ? (jsxs("div", { children: [jsx("div", { className: "text-xxs text-left", children: aboveText }), jsx("div", { className: "text-sm font-medium text-left", children: text })] })) : null] }));
+  });
+
+  const Img = JSX(({ className, image }) => (jsxs("picture", { className: `${className || ''}`, children: [image.sources?.length
+              ? image.sources.map(({ src, format }, index) => (jsx("source", { srcSet: src, type: formatToMimeType(format) }, `${index}_${src}`)))
+              : null, jsx("img", { src: image.src, alt: image.alt || image.title, title: image.title, ...image?.size })] })));
+  function formatToMimeType(format) {
+      return format ? `image/${String(format)}` : undefined;
+  }
+
   const getColSpan = (className) => {
       const colSpanPrefix = 'col-span-';
       const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
@@ -415,66 +405,6 @@
       }
   }
 
-  const GOLDEN_RATIO = 1.618;
-  const Placeholder = JSX(({ className, context, title }) => {
-      return (jsx(Tile, { className: className, context: context, title: title, description: "\u0411\u043B\u043E\u043A \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u043A\u0435...", children: 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, likeControl, colorPalette = 'pc' }, blockDecorator = defaultBlockDecorator, }) => {
-      return (jsxs("section", { className: "relative", "data-theme": colorPalette, children: [jsx("div", { className: `grid grid-cols-12 gap-1 ${style2className(pageStyle)} ${className || ''}`, children: blocks?.length ? blocks.map(renderBlock) : null }), likeControl && (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto", context: context }) }))] }));
-      function renderBlock(block, i) {
-          const { type } = block;
-          if (!(type in blocksRegistry)) {
-              console.warn(`No block with "${type}" is registered`);
-          }
-          const BlockComponent = blocksRegistry[type] || Placeholder;
-          return blockDecorator({
-              blockClassName: style2className(block.style),
-              block,
-              render: (props) => {
-                  const { version, content, blocks } = props.block;
-                  return (jsx(BlockComponent, { className: props.blockClassName, version: version, context: context, ...content, children: blocks?.length ? blocks.map(renderBlock) : null }, `${type}-${i}`));
-              },
-          }, `block-${i}`);
-      }
-  });
-  function style2className(style) {
-      return style ? style.join(' ') : '';
-  }
-
-  function toMobilePage(contentPage) {
-      const blocks = contentPage.blocks?.filter(({ mobile }) => !mobile?.hidden).map(toMobileBlock);
-      return {
-          ...contentPage,
-          blocks,
-      };
-  }
-  function toMobileBlock(block) {
-      const { mobile } = block;
-      if (mobile) {
-          return {
-              ...block,
-              style: mobile.style?.length ? mobile.style : block.style,
-          };
-      }
-      else {
-          return block;
-      }
-  }
-
-  const BenefitsBlock = JSX(({ className, title, benefits }) => {
-      return (jsxs("section", { className: `font-sans text-primary-text bg-white p-12 pb-2 flex flex-col items-center ${className || ''}`, children: [jsx("h2", { className: "font-medium text-title m-0 max-w-[47rem] text-center", children: title }), benefits?.length ? (jsx("div", { className: "grid grid-cols-2 gap-5 mt-9", children: benefits.map(renderStep) })) : null] }));
-  });
-  const renderStep = (benefit, i) => {
-      return (jsxs("div", { className: "flex items-center p-10 gap-5 max-w-[580px]", children: [benefit.icon && (jsx(Icon, { className: "h-[70px] w-[70px] min-w-[70px] min-h-[70px]", name: benefit.icon, width: "70", height: "70" })), jsxs("div", { children: [jsx("h3", { className: "font-medium text-xl m-0", children: benefit.label }), benefit.description && (jsx("div", { className: "font-normal text-sm mt-2", children: benefit.description }))] })] }, String(i)));
-  };
-
   const CBR_EXCHANGE_RATE_URL = 'https://www.cbr-xml-daily.ru/daily_json.js';
   const CURRENCY_CODES = ['USD', 'EUR'];
   const CURRENCY_ICONS_MAP = {
@@ -540,7 +470,7 @@
       const { type, text, description } = item;
       return (jsxs("div", { className: "mb-4", children: [jsx("div", { children: renderText(type, text) }), jsx("div", { className: "font-sans text-sm text-secondary-text", children: description })] }, String(index)));
   };
-  const renderText = (type, text) => {
+  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 }));
@@ -559,13 +489,6 @@
   });
   const HorizontalNavigationLink = JSX(({ className, index, text, href, target, onClick }) => (jsx("a", { className: `font-sans font-normal text-sm text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${className || ''}`, href: href, target: target, onClick: onClick, children: text || `Документ ${index}` })));
 
-  const cmp = (a) => (b) => a?.href === b?.href;
-  const substitute = (items, substitution) => (items || []).map((_) => substitution?.find(cmp(_)) || _);
-  const subtract = (minuend, subtrahend) => (minuend || []).filter((_) => !subtrahend?.find(cmp(_)));
-  function mergeTopItems(left, right) {
-      return substitute(left, right).concat(subtract(right, left));
-  }
-
   function useSitemap(useAsyncData) {
       const { data } = useAsyncData(sitemapURL(), fetchSitemap);
       return data || {};
@@ -578,6 +501,13 @@
       return `/wcms-resources/${projectSettings.SITEMAP || 'sitemap'}.json`;
   }
 
+  const cmp = (a) => (b) => a?.href === b?.href;
+  const substitute = (items, substitution) => (items || []).map((_) => substitution?.find(cmp(_)) || _);
+  const subtract = (minuend, subtrahend) => (minuend || []).filter((_) => !subtrahend?.find(cmp(_)));
+  function mergeTopItems(left, right) {
+      return substitute(left, right).concat(subtract(right, left));
+  }
+
   const Sitemap = JSX(({ className, items, context }) => {
       const sitemap = useSitemap(context.useAsyncData);
       const mergedItems = mergeTopItems(sitemap.topItems, items);
@@ -613,7 +543,7 @@
       const { icon, label, width, height } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
       if (!icon)
           return null;
-      return (jsx(Button, { rounded: true, href: href, target: "_blank", rel: "noopener noreferrer", "aria-label": label, className: "border-solid border border-main-divider w-9 h-9 flex items-center justify-center hover:fill-primary-main", appendLeft: jsx(Icon, { name: icon, width: width, height: height, className: "[&>*]:fill-primary-text [&>*]:hover:fill-primary-main" }) }));
+      return (jsx(Button, { rounded: true, href: href, target: "_blank", rel: "noopener noreferrer", "aria-label": label, className: "border-solid border border-main-divider w-9 h-9 flex items-center justify-center hover:fill-primary-main", appendLeft: jsx(Icon, { name: icon, width: width, height: height, asSVG: true }) }));
   });
 
   const TextInformation = JSX(({ className, links, context }) => {
@@ -697,11 +627,11 @@
       return (jsx("a", { className: `inline-block border border-solid bg-transparent text-center no-underline ${flat ? '' : 'px-4 py-2'} ${linkStyle} ${className || ''}`, href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": ariaLabel, children: jsx("span", { className: `font-sans font-normal text-sm ${textStyle}`, children: text || children }) }));
   });
 
-  const HeaderSecondaryMenuButton = JSX(({ className, children, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 p-0 w-[24px] flex items-center bg-inherit cursor-pointer ${className || ''}`, disabled: true, "aria-label": ariaLabel, children: children })));
+  const HeaderSecondaryMenuButton = JSX(({ className, children, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 p-0 w-[24px] h-[24px] flex items-center bg-inherit cursor-pointer ${className || ''}`, disabled: true, "aria-label": ariaLabel, children: children })));
 
   const HeaderSecondaryMenu = JSX(({ context, className, defaultLocation = '' }) => {
       const [city, getCity] = context.useGeolocation(defaultLocation);
-      return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: city, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: getCity }), jsx(TopItem, { className: "mr-7", flat: true, href: "#", text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432" }), jsx(HeaderSecondaryMenuButton, { className: "mr-5 text-primary-text hover:text-primary-main", ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(Icon, { name: "LoupeIcon", "aria-hidden": "true" }) }), jsx(HeaderSecondaryMenuButton, { className: "mr-5 text-primary-text hover:text-primary-main", ariaLabel: "\u041F\u0440\u043E\u0444\u0438\u043B\u044C", children: jsx(Icon, { name: "ProfileIcon", "aria-hidden": "true" }) }), jsx(HeaderSecondaryMenuButton, { className: "mr-5 text-secondary-light hover:text-primary-main min-w-[32px] min-h-[32px]", ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(Icon, { name: "GridIcon", "aria-hidden": "true", className: "[&>*]:fill-secondary-light [&>*]:hover:fill-primary-main" }) })] }));
+      return (jsxs("div", { className: `flex items-center ${className || ''}`, children: [jsx(TopItem, { className: "mr-5", flat: true, href: "#", text: city, ariaLabel: "\u041C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435", onClick: getCity }), jsx(TopItem, { className: "mr-7", flat: true, href: "#", text: "\u041E\u0444\u0438\u0441\u044B \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u044B", ariaLabel: "\u0421\u043F\u0438\u0441\u043E\u043A \u0432\u0441\u0435\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u043E\u0444\u0438\u0441\u043E\u0432 \u0438 \u0431\u0430\u043D\u043A\u043E\u043C\u0430\u0442\u043E\u0432" }), jsx(HeaderSecondaryMenuButton, { className: "mr-5 text-primary-text hover:text-primary-main", ariaLabel: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443", children: jsx(Icon, { name: "LoupeIcon", "aria-hidden": "true", className: "h-full", asSVG: true }) }), jsx(HeaderSecondaryMenuButton, { className: "mr-5 text-primary-text hover:text-primary-main", ariaLabel: "\u041F\u0440\u043E\u0444\u0438\u043B\u044C", children: jsx(Icon, { name: "ProfileIcon", "aria-hidden": "true", className: "h-full", asSVG: true }) }), jsx(HeaderSecondaryMenuButton, { className: "min-w-[32px] min-h-[32px] fill-secondary-light hover:fill-secondary-hover", ariaLabel: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0441\u044B\u043B\u043A\u0438", children: jsx(Icon, { name: "GridIcon", "aria-hidden": "true", className: "h-full", asSVG: true }) })] }));
   });
 
   function isSubItemActive(router) {
@@ -731,6 +661,16 @@
       return (jsx(Tile, { className: className, context: context, title: title, buttons: buttons, children: jsxs("div", { className: "flex items-center", children: [qr?.src && qr?.href && (jsx("a", { href: qr.href, target: "_blank", children: jsx("img", { src: qr.src, alt: title, title: title, width: "164", height: "164", className: "w-[90px] h-[90px] min-w-[90px] min-h-[90px] bg-secondary-light" }) })), jsx("span", { className: "font-normal text-sm text-secondary-text ml-4", children: "\u041D\u0430\u0432\u0435\u0434\u0438\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u0443 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u043D\u0430 QR-\u043A\u043E\u0434 \u0438 \u0441\u043A\u0430\u0447\u0430\u0439\u0442\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }) }));
   });
 
+  const GOLDEN_RATIO = 1.618;
+  const Placeholder = JSX(({ className, context, title }) => {
+      return (jsx(Tile, { className: className, context: context, title: title, description: "\u0411\u043B\u043E\u043A \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u043A\u0435...", children: 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 ProductBlockInner = JSX(({ className, context, title, titleSize, description, benefits, buttons, image, items }) => {
       return (jsxs("div", { className: `flex grow justify-between items-stretch ${className || ''}`, children: [jsxs("div", { className: 'flex flex-col', children: [title && (
                       /* TODO Why <Title> is duplicated here?  */
@@ -913,15 +853,14 @@
               : `${contentBlock.scrollHeight}px`;
       };
       return (jsxs("li", { className: "border-0 border-b border-solid border-main-divider last:border-b-0", children: [jsxs("button", { className: `border-none bg-transparent px-0 py-5 flex justify-between text-left w-full font-sans text-primary-text
-        ${hasContent ? 'group cursor-pointer' : ''}`, onClick: handleToggle, children: [jsx("span", { className: `m-0 text-xl pr-2.5 font-medium ${hasContent ? 'group-hover:text-primary-main' : ''}`, children: label }), hasContent ? jsx(Icon, { name: icon, width: "24", height: "24" }) : null] }), hasContent ? (jsx("div", { className: `${isActive ? 'pb-5' : ''} text-sm transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0 `, children: blocks?.length ? blocks.map(renderComponent) : null })) : null] }));
+        ${hasContent ? 'group cursor-pointer' : ''}`, onClick: handleToggle, children: [jsx("span", { className: `m-0 text-xl pr-2.5 font-medium ${hasContent ? 'group-hover:text-primary-main' : ''}`, children: label }), hasContent ? jsx(Icon, { name: icon, width: "24", height: "24" }) : null] }), hasContent ? (jsx("div", { className: `${isActive ? 'pb-5' : ''} text-sm transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0 `, children: blocks?.length ? blocks.map((block, i) => renderBlock(block, i, context)) : null })) : null] }));
   });
-  // TODO: draft, for dynamic rendering of components
-  const renderComponent = (block, i) => {
-      if (block.type && block.data && !AccordionBlocks.hasOwnProperty(block.type)) {
+  const renderBlock = (block, i, context) => {
+      if (!block.type || !block.data || !AccordionBlocks.hasOwnProperty(block.type)) {
           return null;
       }
-      const AccordionBlock = block.type && AccordionBlocks[block.type];
-      return (jsx("div", { className: "mb-5 last:mb-0", children: jsx(AccordionBlock, { ...block.data }) }, `component${i}`));
+      const AccordionBlock = AccordionBlocks[block.type];
+      return (jsx("div", { className: "mb-5 last:mb-0", children: jsx(AccordionBlock, { context: context, ...block.data }) }, `block_${i}`));
   };
   const getContentBlock = (e) => e.target.tagName === 'BUTTON' ? e.target.nextSibling : e.target.parentNode.nextSibling;
 
@@ -1092,6 +1031,72 @@
       CreditCalculator,
   };
 
+  const LikeButton = JSX(({ className, onClick, ariaLabel }) => (jsx("button", { type: "button", className: `border-0 w-[36px] bg-inherit cursor-pointer ${className || ''}`, onClick: onClick, "aria-label": ariaLabel, children: renderLikeIcon() })));
+  const renderLikeIcon = () => {
+      const params = {
+          stroke: '#292D32',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round',
+          strokeWidth: '1.5',
+      };
+      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 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 })] }));
+  });
+
+  const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
+  const ContentPage = JSX(({ className, context, blocksRegistry, data: { style: pageStyle, blocks, likeControl, colorPalette = 'pc' }, blockDecorator = defaultBlockDecorator, }) => {
+      return (jsxs("section", { className: "relative", "data-theme": colorPalette, children: [jsx("div", { className: `grid grid-cols-12 gap-1 ${style2className(pageStyle)} ${className || ''}`, children: blocks?.length ? blocks.map(renderBlock) : null }), likeControl && (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto", context: context }) }))] }));
+      function renderBlock(block, i) {
+          const { type } = block;
+          if (!(type in blocksRegistry)) {
+              console.warn(`No block with "${type}" is registered`);
+          }
+          const BlockComponent = blocksRegistry[type] || Placeholder;
+          return blockDecorator({
+              blockClassName: style2className(block.style),
+              block,
+              render: (props) => {
+                  const { version, content, blocks } = props.block;
+                  return (jsx(BlockComponent, { className: props.blockClassName, version: version, context: context, ...content, children: blocks?.length ? blocks.map(renderBlock) : null }, `${type}-${i}`));
+              },
+          }, `block-${i}`);
+      }
+  });
+  function style2className(style) {
+      return style ? style.join(' ') : '';
+  }
+
+  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] }));
+  });
+
+  function toMobilePage(contentPage) {
+      const blocks = contentPage.blocks?.filter(({ mobile }) => !mobile?.hidden).map(toMobileBlock);
+      return {
+          ...contentPage,
+          blocks,
+      };
+  }
+  function toMobileBlock(block) {
+      const { mobile } = block;
+      if (mobile) {
+          return {
+              ...block,
+              style: mobile.style?.length ? mobile.style : block.style,
+          };
+      }
+      else {
+          return block;
+      }
+  }
+
   const Footer = JSX(({ className, context }) => (jsx("footer", { className: `${className} px-9 py-2 bg-white rounded-bl-3xl rounded-br-3xl`, children: jsx(TextInformation, { context: context }) })));
 
   const Gallery = JSX(({ title, description, cards = [], className }) => {