@redneckz/wildless-cms-uni-blocks 0.2.85 → 0.2.88

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,109 +185,6 @@
       };
   }
 
-  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',
-      };
-      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 })] }));
-  });
-
-  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 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("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
-  });
-
-  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";
@@ -302,6 +199,45 @@
   });
   const getClasses = (...classes) => classes.filter(Boolean).join(' ');
 
+  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 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("img", { className: className, src: href, alt: alt, title: title, ...imgProps, "aria-hidden": "true" }));
+  });
+
   const MOBILE_URL_PATH = '/mobile';
   const isURL = (href) => href?.includes('//');
   const isHrefActive = (href, router, cmp = (href, baseHref) => href === baseHref) => {
@@ -365,17 +301,68 @@
       };
   }
 
+  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));
       return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
   };
 
+  const alignBlock = {
+      left: 'items-start',
+      center: 'items-center',
+      right: 'items-end',
+  };
+  const alignText = {
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right',
+  };
   const TITLE_CLASSES = 'font-medium m-0 mb-4 whitespace-pre-wrap max-w-[600px]';
-  const BaseTile = JSX(({ className, context, title, titleSize, description, children, buttons, image, items, version = 'primary', }) => {
+  const BaseTile = JSX(({ className, context, title, titleSize, description, children, buttons, image, items, version = 'primary', align = 'left', }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("div", { className: `font-sans flex flex-col grow h-full`, children: [title && (jsx(Title, { size: titleSize || getTitleSizeByClassName(className), className: TITLE_CLASSES, children: title })), jsxs("div", { className: "flex grow justify-between", children: [jsxs("div", { className: "flex flex-col justify-between items-start", children: [jsxs("div", { children: [description ? (jsx("div", { className: "font-normal text-base max-w-[600px] mb-5", children: description })) : null, children, items?.length ? renderItems$1(items, version) : null] }), buttons?.length ? (jsx("div", { className: "flex mt-9 gap-3", children: buttons.map((button, index) => renderButton$1(useLink({ router, handlerDecorator }, button), index)) })) : null] }), image?.src && jsx(Img, { className: "mt-auto ml-7", image: image })] })] }));
+      return (jsxs("div", { className: `font-sans flex flex-col grow h-full ${alignBlock[align]}`, children: [title && (jsx(Title, { size: titleSize || getTitleSizeByClassName(className), className: TITLE_CLASSES, children: title })), jsxs("div", { className: "flex grow justify-between", children: [jsxs("div", { className: `flex flex-col justify-between ${alignBlock[align]}`, children: [jsxs("div", { children: [description ? (jsx("div", { className: `font-normal text-base max-w-[600px] ${alignText[align]}`, children: description })) : null, children, items?.length ? renderItems$1(items, version) : null] }), buttons?.length ? (jsx("div", { className: "flex mt-9 gap-3", children: buttons.map((button, index) => renderButton$1(useLink({ router, handlerDecorator }, button), index)) })) : null] }), image?.src && jsx(Img, { className: "mt-auto ml-7", image: image })] })] }));
   });
   function getTitleSizeByClassName(className = '') {
       const colSpan = getColSpan(className);
@@ -390,7 +377,7 @@
       }
   }
   function renderItems$1(items = [], version) {
-      return (jsx("section", { className: "max-w-[600px]", role: "list", children: items.map((_, i) => (jsx(BlockItem, { className: i ? 'mt-2.5' : '', text: _, version: version }, String(i)))) }));
+      return (jsx("section", { className: "max-w-[600px] mt-5", role: "list", children: items.map((_, i) => (jsx(BlockItem, { className: i ? 'mt-2.5' : '', text: _, version: version }, String(i)))) }));
   }
   function renderButton$1({ icon, ...button }, i) {
       if (!button?.text)
@@ -400,86 +387,353 @@
       return jsx(Button, { ...button }, String(i));
   }
 
-  const tileStyleMap = {
-      primary: 'bg-white text-primary-text',
-      secondary: 'bg-primary-main text-white',
+  const Headline = JSX(({ bgColor = 'bg-white', className, ...props }) => {
+      return (jsx("section", { className: `p-10 ${bgColor} ${className || ''} `, children: jsx(BaseTile, { ...props }) }));
+  });
+
+  const titleAlignStyleMap = {
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right',
   };
-  const Tile = JSX((props) => {
-      const { children, className, version = 'primary' } = props;
-      return (jsx("section", { className: `font-sans p-9 min-h-[320px] box-border ${className || ''} ${tileStyleMap[version]} ${getContainerPaddingRight(className)} `, children: jsx(BaseTile, { ...props, children: children }) }));
+  const titleMarginsStyleMap = {
+      double: 'mb-8',
+      single: '',
+  };
+  const linkColumnsModeStyleMap = {
+      double: 'gap-x-5 gap-y-[26px] flex-wrap',
+      single: 'gap-3.5 flex-col',
+  };
+  const LinkDocs = JSX(({ className, title, align, documents, icon, columnsMode = 'double' }) => {
+      const containerClasses = linkColumnsModeStyleMap[columnsMode];
+      return (jsxs("section", { className: `font-sans p-[50px] bg-white ${className}`, children: [title && (jsx(Title, { className: `font-medium m-0 ${titleMarginsStyleMap[columnsMode]} ${titleAlignStyleMap[align ?? 'center']}`, children: title })), jsx("div", { className: `flex ${containerClasses}`, role: "list", children: documents?.length
+                      ? documents.map(({ text, fileSize, ...linkProps }) => (jsxs("a", { className: `group flex items-center text-sm
+              text-sm font-sans align-middle items-center text-primary-text no-underline group hover:text-primary-main
+              ${columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}`, role: "listitem", ...linkProps, children: [icon && jsx(Icon, { className: "mr-3.5", name: icon, width: "24px", height: "24px" }), jsxs("span", { children: [text, jsx("span", { className: "text-secondary-text group-hover:text-primary-main", children: linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize) })] })] })))
+                      : null })] }));
   });
-  function getContainerPaddingRight(className = '') {
-      const colSpan = getColSpan(className);
-      if (colSpan <= 6) {
-          return 'pr-9';
-      }
-      else if (colSpan <= 8) {
-          return 'pr-[4.75rem]';
-      }
-      else {
-          return 'pr-[9.4rem]';
-      }
+  const getExtFromHref = (href) => {
+      if (!href)
+          return '';
+      const lastChunk = href.split('.').pop();
+      if (!lastChunk || lastChunk.includes('/'))
+          return '';
+      return lastChunk;
+  };
+  const formatSuffix = (ext, fileSize) => {
+      const prefix = ext || fileSize ? ',' : '';
+      const extension = ext ? ` ${ext}` : '';
+      const size = fileSize ? ` (${fileSize})` : '';
+      return prefix + extension + size;
+  };
+
+  const PictureText = JSX(({ className, title, image, benefits }) => {
+      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-14 ${className}`, children: [jsx(Title, { className: "font-medium m-0 text-center", children: title }), jsxs("div", { className: 'flex justify-center mt-9', children: [image?.src && jsx(Img, { className: "mr-6", image: image }), benefits?.length ? (jsx("div", { className: "flex flex-col", children: benefits.map(renderBenefit$1) })) : null] })] }));
+  });
+  function renderBenefit$1(benefit, i) {
+      return (jsxs("div", { className: "flex flex-row mb-8", children: [benefit.icon && (jsx(Icon, { className: "w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]", name: benefit.icon, width: "48", height: "48" })), jsxs("div", { className: "flex gap-1 flex-col h-full ml-5 max-w-[490px]", children: [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 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 textBlockStyleMaps = {
+      primary: {
+          background: 'bg-white',
+          icon: 'bg-primary-main text-white',
+          title: 'text-primary-text',
+          description: 'text-secondary-text',
+      },
+      secondary: {
+          background: 'bg-primary-main',
+          icon: 'bg-white text-primary-main',
+          title: 'text-white',
+          description: 'text-white',
+      },
+      'secondary-light': {
+          background: 'bg-primary-main/10',
+          icon: 'bg-primary-main text-white',
+          title: 'text-primary-text',
+          description: 'text-secondary-text',
+      },
+  };
+  const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className }) => {
+      const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+      return (jsxs("section", { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, children: [iconVersion && iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion && 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 })), description && (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description }))] })] }));
   });
-  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) : []);
+  function renderIcon(className) {
+      return (jsx("div", { className: `pt-1.5 pr-4`, children: jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs ${className}`, children: "i" }) }));
+  }
+  function renderImage(image) {
+      return image?.src ? jsx(Img, { className: "pt-0.5 pr-3", image: image }) : null;
+  }
 
-  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}`);
+  const AccordionBlocks = {
+      Headline,
+      LinkDocs,
+      TextBlock,
+      PictureText,
+  };
+
+  const AccordionItem = JSX(({ label, blocks, context }) => {
+      const [isActive, setIsActive] = context.useState(false);
+      const hasContent = blocks?.length;
+      const icon = isActive ? 'MinusIcon' : 'PlusIcon';
+      const handleToggle = (e) => {
+          if (!hasContent)
+              return null;
+          setIsActive(!isActive);
+          const contentBlock = getContentBlock(e);
+          contentBlock.style.maxHeight = contentBlock.style.maxHeight
+              ? null
+              : `${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((block, i) => renderBlock(block, i, context)) : null })) : null] }));
+  });
+  const renderBlock = (block, i, context) => {
+      if (!block.type || !block.data || !AccordionBlocks.hasOwnProperty(block.type)) {
+          return null;
       }
+      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;
+
+  const Accordion = JSX(({ title, accordionItems, context, className }) => {
+      return (jsxs("section", { className: `p-[50px] font-sans bg-white text-primary-text ${className || ''}`, children: [title ? jsx(Title, { className: "m-0 mb-2.5", children: title }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, context: context }, `AccordionItem${i}`))) })) : null] }));
   });
-  function style2className(style) {
-      return style ? style.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 SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
+      return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, viewBox: viewBox, fill: fill, width: width, height: height, children: paths.map(({ d, fill, ...options }, i) => (jsx("path", { d: d, fill: fill || 'currentColor', ...commonOptions, ...options }, i))) }));
+  });
+
+  const ARROW_PATHS = [
+      {
+          d: 'm9 12 4-4-4-4',
+          stroke: 'currentColor',
+          strokeWidth: '2',
+          strokeLinecap: 'round',
+          fill: 'none',
+      },
+      {
+          d: 'M2 9a1 1 0 0 1 0-2v2Zm6-2a1 1 0 0 1 0 2V7ZM2 7h6v2H2V7Z',
+      },
+  ];
+  const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
+        ? 'bg-secondary-light text-secondary-text'
+        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(SVG, { paths: ARROW_PATHS, viewBox: "0 0 16 16", fill: "none", width: "16", height: "16" }) })));
+
+  const TableRowContainer = JSX(({ children }) => (jsx("div", { className: "self-start flex flex-col", role: "row", children: jsx("div", { className: "flex", children: children }) })));
+
+  const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
+  const BORDER_CLASSES = 'border-main-stroke border-solid border';
+  const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
+  const FIRST_CELL_CLASSES = 'w-[200px] mr-6';
+  const COLS_LENGTH_FOR_SCROLL = 2;
+  const COLUMN_WIDTH = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px
+
+  const TableCarouselContainer = JSX(({ children, activeCardIndex }) => (jsx("div", { className: "flex flex-1 overflow-hidden", children: jsx("div", { className: "flex gap-4 duration-1000", style: { transform: `translateX(-${activeCardIndex * COLUMN_WIDTH}px)` }, children: children }) })));
+
+  const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-12 ${BORDER_CLASSES} ${GRADIENT}`, role: "columnheader", scope: "col", children: [icon && !image?.src && (jsx(Icon, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", name: icon, width: "63", height: "63" })), image?.src && jsx(Img, { className: "mb-4", image: image }), title && (jsx(Title, { size: "S", className: "font-medium m-0 text-center text-white", children: title })), link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs py-[11px]", children: link.text }) }) }))] })));
+
+  const TableCell = JSX(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
+      const cellWrapperClasses = `w-80 box-border flex flex-col ${BORDER_CLASSES} ${!isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md'} ${isFillGradient ? GRADIENT : ''}`;
+      const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES} ${isFillGradient && isFirstRow ? 'border-t' : ''} ${!isLastRow ? 'border-solid' : ''}`;
+      return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { className: cellClasses, children: cell.map((item, i) => renderCellInner(item, i, isFillGradient)) }) }));
+  });
+  const renderCellInner = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label && (jsx("h5", { className: `text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`, children: label })), description && (jsx("div", { className: `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`, children: description }))] }, String(i)));
+
+  const TableRow = JSX(({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (jsxs(TableRowContainer, { children: [header?.title ? (jsx("div", { className: `text-sm py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${!isLastRow ? 'border-solid' : ''}`, children: header.title })) : null, data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, children: data.map((cell, i) => (jsx(TableCell, { cell: cell, isFirstRow: isFirstRow, isLastRow: isLastRow, isFillGradient: isColoredFirstColumn && i === 0 }, String(i)))) })) : null] })));
+
+  const ComparisonTable = JSX(({ className, context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, }) => {
+      const router = context.useRouter();
+      const { handlerDecorator } = context;
+      const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+      const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
+      const colHeaders = columns?.map(({ header }) => header || {});
+      const colData = columns?.map(({ data }) => data) || [];
+      const rowData = rowHeaders
+          ?.map((header, i) => ({
+          header,
+          data: colData.map((col) => col?.[i] || [{}]),
+      }))
+          .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
+      const nextClick = () => setActiveCardIndex(activeCardIndex + 1);
+      const prevClick = () => setActiveCardIndex(activeCardIndex - 1);
+      const showToggle = () => setIsShowAllRow(!isShowAllRow);
+      const isScrollAvailable = colData?.length && colData.length > COLS_LENGTH_FOR_SCROLL;
+      const showNextButton = isScrollAvailable && colData?.length - activeCardIndex > COLS_LENGTH_FOR_SCROLL;
+      const showPrevButton = isScrollAvailable && activeCardIndex > 0;
+      return (jsxs("section", { className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, children: [jsx(Title, { className: "font-medium m-0 max-w-[47rem] text-center mb-9 mx-auto", children: title }), jsxs("div", { role: "table", children: [colHeaders?.length ? (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES, role: "columnheader", scope: "col" }), jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header, link: header.link && useLink({ router, handlerDecorator }, header.link) }, String(i)))) })] })) : null, rowData?.length ? (jsxs("div", { className: "relative", children: [rowData.map((row, i, { length }) => (jsx(TableRow, { row: row, isFirstRow: i === 0, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex, isColoredFirstColumn: isColoredFirstColumn }, String(i)))), isScrollAvailable ? (jsx("div", { children: jsxs("div", { className: "absolute top-7 right-7 z-10", children: [jsx(ArrowButton, { onClick: nextClick, disabled: !showNextButton, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E" }), jsx(ArrowButton, { className: "mt-4 rotate-180", onClick: prevClick, disabled: !showPrevButton, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E" })] }) })) : null] })) : null] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null, visibleRowLength ? (jsx("div", { className: "pr-[50px]", children: jsxs("div", { className: "flex w-full", children: [jsx("div", { className: FIRST_CELL_CLASSES }), jsx("button", { onClick: showToggle, className: "mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main", children: jsx("div", { className: "font-sans font-medium text-xs py-[11px]", children: !isShowAllRow ? 'Показать все параметры' : 'Скрыть' }) })] }) })) : null] }));
+  });
+
+  function useCreditCalculatorData(useAsyncData, directoryName) {
+      const { data } = useAsyncData(creditCalculatorUrl(directoryName), () => fetchCreditCalculatorData(directoryName));
+      return data || {};
+  }
+  async function fetchCreditCalculatorData(directoryName) {
+      const response = await fetch(creditCalculatorUrl(directoryName));
+      return await response.json();
+  }
+  function creditCalculatorUrl(directoryName) {
+      return `/wcms-resources/${directoryName || 'credit-calculator-data'}.json`;
   }
 
-  function toMobilePage(contentPage) {
-      const blocks = contentPage.blocks?.filter(({ mobile }) => !mobile?.hidden).map(toMobileBlock);
-      return {
-          ...contentPage,
-          blocks,
+  const CHECK_PATHS = [
+      {
+          d: 'M10.207.793a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L3.5 6.086 8.793.793a1 1 0 0 1 1.414 0Z',
+          fillRule: 'evenodd',
+          clipRule: 'evenodd',
+          fill: 'white',
+      },
+  ];
+  const Checkbox = JSX(({ text, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center cursor-pointer relative", children: [jsx("input", { className: `peer appearance-none w-5 h-5 border-solid border rounded border-black checked:bg-primary-main checked:border-primary-main`, type: "checkbox", onChange: (e) => {
+                      onChange(e.target.checked);
+                  }, checked: checked }), jsx(SVG, { paths: CHECK_PATHS, className: "hidden absolute left-2 ml-px peer-checked:block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" }), text ? jsx("span", { className: "font-sans ml-2 text-sm cursor-pointer", children: text }) : null] }) })));
+
+  const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
+
+  const InputRange = JSX(({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
+      const handleChange = (value) => {
+          if (!onChange)
+              return;
+          const sanitizedValue = Number(value.replace(/\D/g, ''));
+          onChange(sanitizedValue);
       };
-  }
-  function toMobileBlock(block) {
-      const { mobile } = block;
-      if (mobile) {
-          return {
-              ...block,
-              style: mobile.style?.length ? mobile.style : block.style,
-          };
+      const inputStyle = {
+          backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
+      };
+      const handleBlur = () => {
+          if (!onChange)
+              return;
+          if (value < min)
+              onChange(min);
+          if (value > max)
+              onChange(max);
+      };
+      return (jsxs("div", { className: className, children: [jsxs("div", { className: "relative", children: [title ? (jsx("span", { className: "absolute text-xs text-secondary-text top-1 mt-0.5 pl-4 ml-0.5", children: title })) : null, jsx("input", { className: `m-0 font-sans text-sm w-full h-12 border-2 border-solid border-main-divider rounded-md outline-none p-0 pl-4 m-0 box-border text-primary-text ${title ? 'pt-4' : ''}`, value: addSpacesBetweenNumbers(value), onChange: (e) => handleChange(e.target.value), onBlur: handleBlur }), jsx("div", { className: "absolute inset-x-0 mt-0.5 top-8 px-4", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider", type: "range", min: min, max: max, step: step, value: value, onChange: (e) => handleChange(e.target.value), style: inputStyle }) })] }), jsx("div", { className: "flex justify-between mt-3 mb-4", children: items.map((item, i) => (jsx("span", { className: "text-xs text-secondary-text pl-4", children: item }, String(i)))) })] }));
+  });
+
+  const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+
+  const DEFAULT_MIN_SUM = 30000;
+  const DEFAULT_MAX_SUM = 3000000;
+  const DEFAULT_SUM = (DEFAULT_MAX_SUM - DEFAULT_MIN_SUM) / 2;
+  const DEFAULT_MIN_MONTHS = 1;
+  const DEFAULT_MAX_MONTHS = 84;
+  const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS - DEFAULT_MIN_MONTHS) / 2);
+  const MONTHS_IN_YEAR = 12;
+
+  const getCalculatorParams = (params) => {
+      const { tableRows, isAnnuity = false } = params;
+      if (!tableRows)
+          return {};
+      const calculatorParams = tableRows.find((row) => row.isAnnuity === isAnnuity);
+      return calculatorParams || {};
+  };
+
+  const DEFAULT_RATE = 5;
+  const getCreditRate = (params) => {
+      const { calculatorParams, isInsurance } = params;
+      if (!calculatorParams)
+          return DEFAULT_RATE;
+      return isInsurance
+          ? calculatorParams?.rateWithInsurance || DEFAULT_RATE
+          : calculatorParams?.rateWithoutInsurance || DEFAULT_RATE;
+  };
+
+  const MAX_YEARS_LENGTH = 5;
+  const getCreditTermYears = (minMonths, maxMonths) => {
+      const totalYears = Math.ceil((maxMonths - minMonths) / 12);
+      const firstYear = Math.floor(minMonths / MONTHS_IN_YEAR) + 1;
+      const result = new Array(Math.min(totalYears - 1, MAX_YEARS_LENGTH))
+          .fill(0)
+          .map((_, i) => firstYear + i);
+      const maxYear = totalYears + firstYear - 1;
+      return result.concat(maxYear);
+  };
+
+  const getMonthlyPayment = (params) => {
+      const { calculatorParams, paymentType, rate, sum, months } = params;
+      if (!calculatorParams)
+          return 0;
+      const finalSum = clamp(sum, calculatorParams.minSum || DEFAULT_MIN_SUM, calculatorParams.maxSum || DEFAULT_MAX_SUM);
+      if (paymentType === 'annuity') {
+          const annuityCoef = Number(rate) / (MONTHS_IN_YEAR * 100);
+          return finalSum * (annuityCoef + annuityCoef / (Math.pow(1 + annuityCoef, months) - 1));
       }
       else {
-          return block;
+          return finalSum / months + finalSum * (Number(rate) / 12);
       }
-  }
+  };
 
-  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 STEP_MONEY = 1000;
+  const STEP_MONTHS = 1;
+  const DEFAULT_PAYMENT_TYPE = 'annuity';
+  const borderStyle = 'border-solid border-3 border-primary-main rounded-md';
+  const CreditCalculator = JSX(({ context, className, directoryName }) => {
+      const [moneyValue, setMoneyValue] = context.useState(undefined);
+      const [monthsValue, setMonthsValue] = context.useState(undefined);
+      const [isAnnuityChecked, setIsAnnuityChecked] = context.useState(true);
+      const [isInsuranceChecked, setIsInsuranceChecked] = context.useState(true);
+      const tableRows = useCreditCalculatorData(context.useAsyncData, directoryName).rows;
+      const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isAnnuityChecked });
+      const defaultSum = calculatorParams.maxSum && calculatorParams.minSum
+          ? (calculatorParams.maxSum - calculatorParams.minSum) / 2
+          : DEFAULT_SUM;
+      const defaultMonths = calculatorParams.maxMonths && calculatorParams.minMonths
+          ? Math.round((calculatorParams.maxMonths - calculatorParams.minMonths) / 2)
+          : DEFAULT_MONTHS;
+      const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
+      const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
+      const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
+      const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
+      const rate = getCreditRate({ calculatorParams, isInsurance: isInsuranceChecked });
+      const montlyPayment = getMonthlyPayment({
+          calculatorParams,
+          paymentType: DEFAULT_PAYMENT_TYPE,
+          rate,
+          sum: moneyValue || defaultSum,
+          months: monthsValue || defaultMonths,
+      });
+      const creditTermYears = getCreditTermYears(minMonths, maxMonths);
+      function handleButtonClick(value) {
+          setMonthsValue(clamp(value * MONTHS_IN_YEAR, minMonths, maxMonths));
+      }
+      return (jsx("section", { className: `font-sans text-primary-text bg-white p-4 ${className}`, children: jsxs("div", { className: `box-border p-12 flex flex-col justify-between ${borderStyle}`, children: [jsxs("div", { className: "flex justify-between", children: [jsxs("div", { className: "grow mr-11", children: [jsx(InputRange, { title: "\u0416\u0435\u043B\u0430\u0435\u043C\u0430\u044F \u0441\u0443\u043C\u043C\u0430 \u043A\u0440\u0435\u0434\u0438\u0442\u0430, \u20BD", items: [
+                                          `От ${addSpacesBetweenNumbers(minSum)} рублей`,
+                                          `До ${addSpacesBetweenNumbers(maxSum)} рублей`,
+                                      ], min: minSum, max: maxSum, step: STEP_MONEY, value: moneyValue || defaultSum, onChange: setMoneyValue }), jsx(InputRange, { title: "\u0421\u0440\u043E\u043A \u043A\u0440\u0435\u0434\u0438\u0442\u0430, \u043C\u0435\u0441\u044F\u0446\u0435\u0432", items: ['Или выберите из предложенных вариантов ниже'], min: minMonths, max: maxMonths, step: STEP_MONTHS, value: monthsValue || defaultMonths, onChange: setMonthsValue }), jsx("div", { className: "flex mb-7", children: creditTermYears.map((number, i) => renderButton(number, i, handleButtonClick)) }), jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u043F\u0435\u043D\u0441\u0438\u044E \u043D\u0430 \u043A\u0430\u0440\u0442\u0443 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0430", checked: isAnnuityChecked, onChange: setIsAnnuityChecked }), jsx(Checkbox, { className: "mb-4", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", checked: isInsuranceChecked, onChange: setIsInsuranceChecked })] }), jsxs("div", { className: "p-9 bg-primary-main rounded-md text-white", children: [jsx("div", { className: "text-base mb-5", children: "\u041D\u0430\u0448\u0435 \u043F\u0440\u0435\u0434\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }), jsx("div", { className: "text-sm opacity-60", children: "\u0415\u0436\u0435\u043C\u0435\u0441\u044F\u0447\u043D\u044B\u0439 \u043F\u043B\u0430\u0442\u0451\u0436" }), jsxs("div", { className: "text-lg mb-3", children: [addSpacesBetweenNumbers(Math.round(montlyPayment)), " \u20BD"] }), jsx("div", { className: "text-sm opacity-60", children: "\u0421\u0442\u0430\u0432\u043A\u0430" }), jsxs("div", { className: "text-lg", children: [rate, " %"] })] })] }), jsxs("div", { className: "flex items-center", children: [jsx(Button, { className: "mr-3", text: "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0437\u0430\u044F\u0432\u043A\u0443", version: "primary", href: "#" }), jsx("div", { className: "w-80 text-xxs leading-4 text-secondary-text", "aria-label": "\u0421\u043E\u0433\u043B\u0430\u0448\u0435\u043D\u0438\u0435 \u043D\u0430 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0443 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445", children: "\u041E\u0442\u043F\u0440\u0430\u0432\u043B\u044F\u044F \u0437\u0430\u044F\u0432\u043A\u0443, \u0432\u044B \u0441\u043E\u0433\u043B\u0430\u0448\u0430\u0435\u0442\u0435\u0441\u044C \u043D\u0430 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0443 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043D\u043D\u043E \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u044F\u043C \u0424\u0417\u00A0\u00AB\u041E\u00A0\u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445\u00BB" })] })] }) }));
   });
-  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)));
+  function renderButton(number, i, handleClick) {
+      return (jsx("button", { className: "bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer border-none", onClick: () => handleClick(number), children: jsxs("span", { className: "font-semibold text-sm", children: [number, " ", number === 1 ? 'год' : number > 4 ? 'лет' : 'года'] }) }, String(i)));
+  }
+
+  const tileStyleMap = {
+      primary: 'bg-white text-primary-text',
+      secondary: 'bg-primary-main text-white',
   };
+  const Tile = JSX((props) => {
+      const { children, className, version = 'primary' } = props;
+      return (jsx("section", { className: `font-sans p-9 min-h-[320px] box-border ${className || ''} ${tileStyleMap[version]} ${getContainerPaddingRight(className)} `, children: jsx(BaseTile, { ...props, children: children }) }));
+  });
+  function getContainerPaddingRight(className = '') {
+      const colSpan = getColSpan(className);
+      if (colSpan <= 6) {
+          return 'pr-9';
+      }
+      else if (colSpan <= 8) {
+          return 'pr-[4.75rem]';
+      }
+      else {
+          return 'pr-[9.4rem]';
+      }
+  }
 
   const CBR_EXCHANGE_RATE_URL = 'https://www.cbr-xml-daily.ru/daily_json.js';
   const CURRENCY_CODES = ['USD', 'EUR'];
@@ -510,10 +764,6 @@
   const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
   const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
 
-  const SVG = JSX(({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
-      return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: className, viewBox: viewBox, fill: fill, width: width, height: height, children: paths.map(({ d, fill, ...options }, i) => (jsx("path", { d: d, fill: fill || 'currentColor', ...commonOptions, ...options }, i))) }));
-  });
-
   const LOGO_PATHS = [
       'm13.72 25.51 4.42-4.33v-2.95l-4.42 4.32v2.96Zm0-10.98 4.42-4.35V7.41l-4.42 4.31v2.8Zm0 3.63 4.42-4.33v-2.78l-4.42 4.32v2.8ZM12.46 7.44l-.6-.56V0h-.66v6.22l-.58-.57V0h-.67v5l-.59-.58V0H8.7v6.56l4.44 4.33V0h-.67v7.44Zm1.26 14.35 4.42-4.33v-2.78L13.72 19v2.8Zm-5.03-.61 4.44 4.33v-2.96l-4.44-4.32v2.95Zm8.79-16.76-.59.58V0h-.66v5.66l-.6.56V0h-.66v6.87l-.58.57V0h-.67v10.9l4.42-4.34V0h-.66v4.42Zm-8.79 5.76 4.44 4.35v-2.8L8.69 7.4v2.77Zm0 3.65 4.44 4.33v-2.8l-4.44-4.3v2.77Zm0 3.63 4.44 4.33V19l-4.44-4.31v2.78Zm26.37 2.29H24.3a2.25 2.25 0 0 0 .36-1.22 2.32 2.32 0 0 0-2.33-2.31 2.32 2.32 0 0 0-2.31 2.31c0 .5.16.96.43 1.34a.74.74 0 0 0-.33.61c0 .26.14.49.33.62a2.32 2.32 0 0 0-.43 1.34 2.31 2.31 0 0 0 2.31 2.31 2.32 2.32 0 0 0 2.33-2.31c0-.45-.13-.87-.36-1.22h8.01v.49h-.8v.68h.8v.7h-.8v1.3h.8v-.58h1.17v.58h.79v-1.3h-.79v-.7h.79v-.68h-.79v-.5h1.58a.56.56 0 0 0 .56-.56v-.34a.57.57 0 0 0-.56-.56Zm-11.53 2.7a1.2 1.2 0 0 1-2.4 0c0-.24.08-.47.2-.66l.34-.56a.97.97 0 0 1-.34-.75c0-.3.13-.56.33-.74l-.32-.56a1.13 1.13 0 0 1-.2-.66 1.2 1.2 0 0 1 2.4 0c0 .49-.56 1.65-.56 1.65v.62c-.01.01.55 1.17.55 1.66ZM4.67 18.34v2.89c0 2.75 1.2 4.53 1.9 5.21l4.58 4.5c1.28 1.25 1.5 1.66 1.79 2.37v-3.2c0-2.84-1.44-3.94-2.19-4.67-1.73-1.68-2.89-2.8-3.82-3.73a8.98 8.98 0 0 1-2.26-3.37Zm6.08 14.24c-1.73-1.7-2.89-2.8-3.82-3.73a10 10 0 0 1-2.25-2.98v2.49a7.87 7.87 0 0 0 1.89 5.24l4.58 4.47c1.28 1.25 1.5 1.85 1.79 2.55v-3.37c0-2.85-1.45-3.95-2.19-4.67Z',
       'M19.88 5.34c-.32 0-.64 0-.96.02V6.7a18.5 18.5 0 1 1 .95 36.94A18.5 18.5 0 0 1 1.35 25.17c0-5.67 2.55-10.73 6.58-14.13V9.32A19.78 19.78 0 0 0 0 25.17C0 36.12 8.9 45 19.88 45a19.85 19.85 0 0 0 19.86-19.83c0-10.95-8.9-19.83-19.87-19.83Z',
@@ -546,7 +796,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 }));
@@ -565,13 +815,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 || {};
@@ -584,6 +827,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);
@@ -635,22 +885,6 @@
       return (jsxs("footer", { className: `${className} px-9 py-10 bg-white`, children: [jsxs("div", { className: "flex items-stretch gap-32 pb-8 xl:gap-8", children: [jsx(Logo, { className: `${LEFT_COL_WIDTH_FULL_HD} ${LEFT_COL_WIDTH_SMALL_DESKTOP}` }), jsx(SearchBar, { context: context, className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-32 xl:gap-8", children: [jsx(Contacts, { className: `${LEFT_COL_WIDTH_FULL_HD} shrink-0 overflow-hidden ${LEFT_COL_WIDTH_SMALL_DESKTOP}`, items: contacts, context: context, hasButton: true }), jsx(Sitemap, { className: "pt-[3px]", context: context, items: topItems })] }), jsx(SocialMedia, { media: socialMedia, context: context }), jsx(HorizontalNavigation, { links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
   });
 
-  const ARROW_PATHS = [
-      {
-          d: 'm9 12 4-4-4-4',
-          stroke: 'currentColor',
-          strokeWidth: '2',
-          strokeLinecap: 'round',
-          fill: 'none',
-      },
-      {
-          d: 'M2 9a1 1 0 0 1 0-2v2Zm6-2a1 1 0 0 1 0 2V7ZM2 7h6v2H2V7Z',
-      },
-  ];
-  const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
-        ? 'bg-secondary-light text-secondary-text'
-        : 'bg-white text-primary-text hover:text-primary-main'} ${className || ''}`, disabled: disabled, ...rest, children: jsx(SVG, { paths: ARROW_PATHS, viewBox: "0 0 16 16", fill: "none", width: "16", height: "16" }) })));
-
   const cardStyleMap = {
       normal: 'min-w-[364px] w-[364px]',
       mini: 'min-w-[260px] w-[260px]',
@@ -737,6 +971,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?  */
@@ -826,278 +1070,96 @@
       return (jsx("div", { className: "flex flex-col items-center text-center relative w-[276px]", children: jsxs("div", { className: "max-w-min", children: [jsx("h5", { className: "font-medium text-xl m-0 mt-4 whitespace-nowrap px-3", children: step.label }), step.description && (jsx("div", { className: "font-normal text-sm text-secondary-text mt-2", children: step.description }))] }) }, String(i)));
   };
 
-  const textBlockStyleMaps = {
-      primary: {
-          background: 'bg-white',
-          icon: 'bg-primary-main text-white',
-          title: 'text-primary-text',
-          description: 'text-secondary-text',
-      },
-      secondary: {
-          background: 'bg-primary-main',
-          icon: 'bg-white text-primary-main',
-          title: 'text-white',
-          description: 'text-white',
-      },
-      'secondary-light': {
-          background: 'bg-primary-main/10',
-          icon: 'bg-primary-main text-white',
-          title: 'text-primary-text',
-          description: 'text-secondary-text',
-      },
-  };
-  const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className }) => {
-      const textBlockStyleMap = textBlockStyleMaps[blockVersion];
-      return (jsxs("section", { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, children: [iconVersion && iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion && 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 })), description && (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description }))] })] }));
-  });
-  function renderIcon(className) {
-      return (jsx("div", { className: `pt-1.5 pr-4`, children: jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs ${className}`, children: "i" }) }));
-  }
-  function renderImage(image) {
-      return image?.src ? jsx(Img, { className: "pt-0.5 pr-3", image: image }) : null;
-  }
-
-  const TableRowContainer = JSX(({ children }) => (jsx("div", { className: "self-start flex flex-col", role: "row", children: jsx("div", { className: "flex", children: children }) })));
-
-  const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
-  const BORDER_CLASSES = 'border-main-stroke border-solid border';
-  const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
-  const FIRST_CELL_CLASSES = 'w-[200px] mr-6';
-  const COLS_LENGTH_FOR_SCROLL = 2;
-  const COLUMN_WIDTH = 4 * 80 + 4 * 4; // w-80 + gap-4 = 336px
-
-  const TableCarouselContainer = JSX(({ children, activeCardIndex }) => (jsx("div", { className: "flex flex-1 overflow-hidden", children: jsx("div", { className: "flex gap-4 duration-1000", style: { transform: `translateX(-${activeCardIndex * COLUMN_WIDTH}px)` }, children: children }) })));
-
-  const HeaderCell = JSX(({ icon, image, title, link }) => (jsxs("div", { className: `w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-12 ${BORDER_CLASSES} ${GRADIENT}`, role: "columnheader", scope: "col", children: [icon && !image?.src && (jsx(Icon, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", name: icon, width: "63", height: "63" })), image?.src && jsx(Img, { className: "mb-4", image: image }), title && (jsx(Title, { size: "S", className: "font-medium m-0 text-center text-white", children: title })), link?.text && (jsx("div", { className: "mt-auto w-full", children: jsx(Button, { href: link.href, target: link.target, className: "mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active", children: jsx("div", { className: "text-xs py-[11px]", children: link.text }) }) }))] })));
-
-  const TableCell = JSX(({ cell, isFirstRow, isLastRow, isFillGradient }) => {
-      const cellWrapperClasses = `w-80 box-border flex flex-col ${BORDER_CLASSES} ${!isLastRow ? 'border-y-0' : 'border-t-0 rounded-b-md'} ${isFillGradient ? GRADIENT : ''}`;
-      const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES} ${isFillGradient && isFirstRow ? 'border-t' : ''} ${!isLastRow ? 'border-solid' : ''}`;
-      return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { className: cellClasses, children: cell.map((item, i) => renderCellInner(item, i, isFillGradient)) }) }));
-  });
-  const renderCellInner = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label && (jsx("h5", { className: `text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`, children: label })), description && (jsx("div", { className: `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`, children: description }))] }, String(i)));
-
-  const TableRow = JSX(({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (jsxs(TableRowContainer, { children: [header?.title ? (jsx("div", { className: `text-sm py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${!isLastRow ? 'border-solid' : ''}`, children: header.title })) : null, data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, children: data.map((cell, i) => (jsx(TableCell, { cell: cell, isFirstRow: isFirstRow, isLastRow: isLastRow, isFillGradient: isColoredFirstColumn && i === 0 }, String(i)))) })) : null] })));
-
-  const ComparisonTable = JSX(({ className, context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, }) => {
-      const router = context.useRouter();
-      const { handlerDecorator } = context;
-      const [activeCardIndex, setActiveCardIndex] = context.useState(0);
-      const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
-      const colHeaders = columns?.map(({ header }) => header || {});
-      const colData = columns?.map(({ data }) => data) || [];
-      const rowData = rowHeaders
-          ?.map((header, i) => ({
-          header,
-          data: colData.map((col) => col?.[i] || [{}]),
-      }))
-          .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
-      const nextClick = () => setActiveCardIndex(activeCardIndex + 1);
-      const prevClick = () => setActiveCardIndex(activeCardIndex - 1);
-      const showToggle = () => setIsShowAllRow(!isShowAllRow);
-      const isScrollAvailable = colData?.length && colData.length > COLS_LENGTH_FOR_SCROLL;
-      const showNextButton = isScrollAvailable && colData?.length - activeCardIndex > COLS_LENGTH_FOR_SCROLL;
-      const showPrevButton = isScrollAvailable && activeCardIndex > 0;
-      return (jsxs("section", { className: `bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${className || ''}`, children: [jsx(Title, { className: "font-medium m-0 max-w-[47rem] text-center mb-9 mx-auto", children: title }), jsxs("div", { role: "table", children: [colHeaders?.length ? (jsxs(TableRowContainer, { children: [jsx("div", { className: FIRST_CELL_CLASSES, role: "columnheader", scope: "col" }), jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, children: colHeaders.map((header, i) => (jsx(HeaderCell, { ...header, link: header.link && useLink({ router, handlerDecorator }, header.link) }, String(i)))) })] })) : null, rowData?.length ? (jsxs("div", { className: "relative", children: [rowData.map((row, i, { length }) => (jsx(TableRow, { row: row, isFirstRow: i === 0, isLastRow: i + 1 === length, activeCardIndex: activeCardIndex, isColoredFirstColumn: isColoredFirstColumn }, String(i)))), isScrollAvailable ? (jsx("div", { children: jsxs("div", { className: "absolute top-7 right-7 z-10", children: [jsx(ArrowButton, { onClick: nextClick, disabled: !showNextButton, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E" }), jsx(ArrowButton, { className: "mt-4 rotate-180", onClick: prevClick, disabled: !showPrevButton, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E" })] }) })) : null] })) : null] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null, visibleRowLength ? (jsx("div", { className: "pr-[50px]", children: jsxs("div", { className: "flex w-full", children: [jsx("div", { className: FIRST_CELL_CLASSES }), jsx("button", { onClick: showToggle, className: "mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main", children: jsx("div", { className: "font-sans font-medium text-xs py-[11px]", children: !isShowAllRow ? 'Показать все параметры' : 'Скрыть' }) })] }) })) : null] }));
-  });
-
-  const AccordionBlocks = {
+  const Blocks = {
+      Accordion,
+      BenefitsBlock,
+      ComparisonTable,
+      CreditCalculator,
+      ExchangeRateTile,
+      Footer: Footer$1,
+      Gallery: Gallery$1,
+      Header,
+      Headline,
+      LinkDocs,
+      MiniGallery,
+      MobileAppTile,
+      PictureText,
+      Placeholder,
+      ProductBlock: ProductBlock$1,
+      ProductGallery,
+      ProductTile,
+      PromoTile,
+      StepsBlock,
       TextBlock,
+      Tile,
   };
 
-  const AccordionItem = JSX(({ label, blocks, context }) => {
-      const [isActive, setIsActive] = context.useState(false);
-      const hasContent = blocks?.length;
-      const icon = isActive ? 'MinusIcon' : 'PlusIcon';
-      const handleToggle = (e) => {
-          if (!hasContent)
-              return null;
-          setIsActive(!isActive);
-          const contentBlock = getContentBlock(e);
-          contentBlock.style.maxHeight = contentBlock.style.maxHeight
-              ? null
-              : `${contentBlock.scrollHeight}px`;
+  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("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] }));
-  });
-  // TODO: draft, for dynamic rendering of components
-  const renderComponent = (block, i) => {
-      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}`));
+      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 getContentBlock = (e) => e.target.tagName === 'BUTTON' ? e.target.nextSibling : e.target.parentNode.nextSibling;
 
-  const Accordion = JSX(({ title, accordionItems, context, className }) => {
-      return (jsxs("section", { className: `p-[50px] font-sans bg-white text-primary-text ${className || ''}`, children: [title ? jsx(Title, { className: "m-0 mb-2.5", children: title }) : null, accordionItems?.length ? (jsx("ul", { className: "list-none m-0 p-0", children: accordionItems.map((item, i) => (jsx(AccordionItem, { ...item, context: context }, `AccordionItem${i}`))) })) : null] }));
+  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 })] }));
   });
 
-  function useCreditCalculatorData(useAsyncData, directoryName) {
-      const { data } = useAsyncData(creditCalculatorUrl(directoryName), () => fetchCreditCalculatorData(directoryName));
-      return data || {};
-  }
-  async function fetchCreditCalculatorData(directoryName) {
-      const response = await fetch(creditCalculatorUrl(directoryName));
-      return await response.json();
-  }
-  function creditCalculatorUrl(directoryName) {
-      return `/wcms-resources/${directoryName || 'credit-calculator-data'}.json`;
+  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 CHECK_PATHS = [
-      {
-          d: 'M10.207.793a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L3.5 6.086 8.793.793a1 1 0 0 1 1.414 0Z',
-          fillRule: 'evenodd',
-          clipRule: 'evenodd',
-          fill: 'white',
-      },
-  ];
-  const Checkbox = JSX(({ text, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center cursor-pointer relative", children: [jsx("input", { className: `peer appearance-none w-5 h-5 border-solid border rounded border-black checked:bg-primary-main checked:border-primary-main`, type: "checkbox", onChange: (e) => {
-                      onChange(e.target.checked);
-                  }, checked: checked }), jsx(SVG, { paths: CHECK_PATHS, className: "hidden absolute left-2 ml-px peer-checked:block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" }), text ? jsx("span", { className: "font-sans ml-2 text-sm cursor-pointer", children: text }) : null] }) })));
-
-  const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
-
-  const InputRange = JSX(({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
-      const handleChange = (value) => {
-          if (!onChange)
-              return;
-          const sanitizedValue = Number(value.replace(/\D/g, ''));
-          onChange(sanitizedValue);
-      };
-      const inputStyle = {
-          backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
-      };
-      const handleBlur = () => {
-          if (!onChange)
-              return;
-          if (value < min)
-              onChange(min);
-          if (value > max)
-              onChange(max);
-      };
-      return (jsxs("div", { className: className, children: [jsxs("div", { className: "relative", children: [title ? (jsx("span", { className: "absolute text-xs text-secondary-text top-1 mt-0.5 pl-4 ml-0.5", children: title })) : null, jsx("input", { className: `m-0 font-sans text-sm w-full h-12 border-2 border-solid border-main-divider rounded-md outline-none p-0 pl-4 m-0 box-border text-primary-text ${title ? 'pt-4' : ''}`, value: addSpacesBetweenNumbers(value), onChange: (e) => handleChange(e.target.value), onBlur: handleBlur }), jsx("div", { className: "absolute inset-x-0 mt-0.5 top-8 px-4", children: jsx("input", { className: "box-border w-full m-0 cursor-pointer slider", type: "range", min: min, max: max, step: step, value: value, onChange: (e) => handleChange(e.target.value), style: inputStyle }) })] }), jsx("div", { className: "flex justify-between mt-3 mb-4", children: items.map((item, i) => (jsx("span", { className: "text-xs text-secondary-text pl-4", children: item }, String(i)))) })] }));
+  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 clamp = (value, min, max) => Math.max(min, Math.min(value, max));
-
-  const DEFAULT_MIN_SUM = 30000;
-  const DEFAULT_MAX_SUM = 3000000;
-  const DEFAULT_SUM = (DEFAULT_MAX_SUM - DEFAULT_MIN_SUM) / 2;
-  const DEFAULT_MIN_MONTHS = 1;
-  const DEFAULT_MAX_MONTHS = 84;
-  const DEFAULT_MONTHS = Math.round((DEFAULT_MAX_MONTHS - DEFAULT_MIN_MONTHS) / 2);
-  const MONTHS_IN_YEAR = 12;
-
-  const getCalculatorParams = (params) => {
-      const { tableRows, isAnnuity = false } = params;
-      if (!tableRows)
-          return {};
-      const calculatorParams = tableRows.find((row) => row.isAnnuity === isAnnuity);
-      return calculatorParams || {};
-  };
-
-  const DEFAULT_RATE = 5;
-  const getCreditRate = (params) => {
-      const { calculatorParams, isInsurance } = params;
-      if (!calculatorParams)
-          return DEFAULT_RATE;
-      return isInsurance
-          ? calculatorParams?.rateWithInsurance || DEFAULT_RATE
-          : calculatorParams?.rateWithoutInsurance || DEFAULT_RATE;
-  };
-
-  const MAX_YEARS_LENGTH = 5;
-  const getCreditTermYears = (minMonths, maxMonths) => {
-      const totalYears = Math.ceil((maxMonths - minMonths) / 12);
-      const firstYear = Math.floor(minMonths / MONTHS_IN_YEAR) + 1;
-      const result = new Array(Math.min(totalYears - 1, MAX_YEARS_LENGTH))
-          .fill(0)
-          .map((_, i) => firstYear + i);
-      const maxYear = totalYears + firstYear - 1;
-      return result.concat(maxYear);
-  };
-
-  const getMonthlyPayment = (params) => {
-      const { calculatorParams, paymentType, rate, sum, months } = params;
-      if (!calculatorParams)
-          return 0;
-      const finalSum = clamp(sum, calculatorParams.minSum || DEFAULT_MIN_SUM, calculatorParams.maxSum || DEFAULT_MAX_SUM);
-      if (paymentType === 'annuity') {
-          const annuityCoef = Number(rate) / (MONTHS_IN_YEAR * 100);
-          return finalSum * (annuityCoef + annuityCoef / (Math.pow(1 + annuityCoef, months) - 1));
+  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 finalSum / months + finalSum * (Number(rate) / 12);
-      }
-  };
-
-  const STEP_MONEY = 1000;
-  const STEP_MONTHS = 1;
-  const DEFAULT_PAYMENT_TYPE = 'annuity';
-  const borderStyle = 'border-solid border-3 border-primary-main rounded-md';
-  const CreditCalculator = JSX(({ context, className, directoryName }) => {
-      const [moneyValue, setMoneyValue] = context.useState(undefined);
-      const [monthsValue, setMonthsValue] = context.useState(undefined);
-      const [isAnnuityChecked, setIsAnnuityChecked] = context.useState(true);
-      const [isInsuranceChecked, setIsInsuranceChecked] = context.useState(true);
-      const tableRows = useCreditCalculatorData(context.useAsyncData, directoryName).rows;
-      const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isAnnuityChecked });
-      const defaultSum = calculatorParams.maxSum && calculatorParams.minSum
-          ? (calculatorParams.maxSum - calculatorParams.minSum) / 2
-          : DEFAULT_SUM;
-      const defaultMonths = calculatorParams.maxMonths && calculatorParams.minMonths
-          ? Math.round((calculatorParams.maxMonths - calculatorParams.minMonths) / 2)
-          : DEFAULT_MONTHS;
-      const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
-      const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
-      const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
-      const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
-      const rate = getCreditRate({ calculatorParams, isInsurance: isInsuranceChecked });
-      const montlyPayment = getMonthlyPayment({
-          calculatorParams,
-          paymentType: DEFAULT_PAYMENT_TYPE,
-          rate,
-          sum: moneyValue || defaultSum,
-          months: monthsValue || defaultMonths,
-      });
-      const creditTermYears = getCreditTermYears(minMonths, maxMonths);
-      function handleButtonClick(value) {
-          setMonthsValue(clamp(value * MONTHS_IN_YEAR, minMonths, maxMonths));
+          return block;
       }
-      return (jsx("section", { className: `font-sans text-primary-text bg-white p-4 ${className}`, children: jsxs("div", { className: `box-border p-12 flex flex-col justify-between ${borderStyle}`, children: [jsxs("div", { className: "flex justify-between", children: [jsxs("div", { className: "grow mr-11", children: [jsx(InputRange, { title: "\u0416\u0435\u043B\u0430\u0435\u043C\u0430\u044F \u0441\u0443\u043C\u043C\u0430 \u043A\u0440\u0435\u0434\u0438\u0442\u0430, \u20BD", items: [
-                                          `От ${addSpacesBetweenNumbers(minSum)} рублей`,
-                                          `До ${addSpacesBetweenNumbers(maxSum)} рублей`,
-                                      ], min: minSum, max: maxSum, step: STEP_MONEY, value: moneyValue || defaultSum, onChange: setMoneyValue }), jsx(InputRange, { title: "\u0421\u0440\u043E\u043A \u043A\u0440\u0435\u0434\u0438\u0442\u0430, \u043C\u0435\u0441\u044F\u0446\u0435\u0432", items: ['Или выберите из предложенных вариантов ниже'], min: minMonths, max: maxMonths, step: STEP_MONTHS, value: monthsValue || defaultMonths, onChange: setMonthsValue }), jsx("div", { className: "flex mb-7", children: creditTermYears.map((number, i) => renderButton(number, i, handleButtonClick)) }), jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u043F\u0435\u043D\u0441\u0438\u044E \u043D\u0430 \u043A\u0430\u0440\u0442\u0443 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0430", checked: isAnnuityChecked, onChange: setIsAnnuityChecked }), jsx(Checkbox, { className: "mb-4", text: "\u041A\u043E\u043C\u043F\u043B\u0435\u043A\u0441\u043D\u0430\u044F \u0441\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u044F \u0437\u0430\u0449\u0438\u0442\u0430", checked: isInsuranceChecked, onChange: setIsInsuranceChecked })] }), jsxs("div", { className: "p-9 bg-primary-main rounded-md text-white", children: [jsx("div", { className: "text-base mb-5", children: "\u041D\u0430\u0448\u0435 \u043F\u0440\u0435\u0434\u043B\u043E\u0436\u0435\u043D\u0438\u0435" }), jsx("div", { className: "text-sm opacity-60", children: "\u0415\u0436\u0435\u043C\u0435\u0441\u044F\u0447\u043D\u044B\u0439 \u043F\u043B\u0430\u0442\u0451\u0436" }), jsxs("div", { className: "text-lg mb-3", children: [addSpacesBetweenNumbers(Math.round(montlyPayment)), " \u20BD"] }), jsx("div", { className: "text-sm opacity-60", children: "\u0421\u0442\u0430\u0432\u043A\u0430" }), jsxs("div", { className: "text-lg", children: [rate, " %"] })] })] }), jsxs("div", { className: "flex items-center", children: [jsx(Button, { className: "mr-3", text: "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C \u0437\u0430\u044F\u0432\u043A\u0443", version: "primary", href: "#" }), jsx("div", { className: "w-80 text-xxs leading-4 text-secondary-text", "aria-label": "\u0421\u043E\u0433\u043B\u0430\u0448\u0435\u043D\u0438\u0435 \u043D\u0430 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0443 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445", children: "\u041E\u0442\u043F\u0440\u0430\u0432\u043B\u044F\u044F \u0437\u0430\u044F\u0432\u043A\u0443, \u0432\u044B \u0441\u043E\u0433\u043B\u0430\u0448\u0430\u0435\u0442\u0435\u0441\u044C \u043D\u0430 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0443 \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445 \u0441\u043E\u043E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043D\u043D\u043E \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u044F\u043C \u0424\u0417\u00A0\u00AB\u041E\u00A0\u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445\u00BB" })] })] }) }));
-  });
-  function renderButton(number, i, handleClick) {
-      return (jsx("button", { className: "bg-secondary-light rounded-3xl h-10 w-[75px] box-border mr-2 flex items-center justify-center cursor-pointer border-none", onClick: () => handleClick(number), children: jsxs("span", { className: "font-semibold text-sm", children: [number, " ", number === 1 ? 'год' : number > 4 ? 'лет' : 'года'] }) }, String(i)));
   }
 
-  const Blocks = {
-      Header,
-      Footer: Footer$1,
-      Placeholder,
-      Tile,
-      PromoTile,
-      TextBlock,
-      ProductTile,
-      ProductBlock: ProductBlock$1,
-      StepsBlock,
-      BenefitsBlock,
-      ProductGallery,
-      ExchangeRateTile,
-      MobileAppTile,
-      Gallery: Gallery$1,
-      MiniGallery,
-      ComparisonTable,
-      Accordion,
-      CreditCalculator,
-  };
-
   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 }) => {
@@ -1116,16 +1178,18 @@
   });
 
   const MobileBlocks = {
-      Header,
+      ExchangeRateTile,
       Footer,
+      Gallery,
+      Header,
+      Headline,
+      MobileAppTile,
+      PictureText,
       Placeholder,
-      Tile,
-      ProductTile,
       ProductBlock,
+      ProductTile,
       TextBlock,
-      ExchangeRateTile,
-      MobileAppTile,
-      Gallery,
+      Tile,
       // TODO StepsBlock,
       // TODO BenefitsBlock,
       // TODO ProductGallery