@redneckz/wildless-cms-uni-blocks 0.3.70 → 0.3.72

package/bundle/bundle.umd.js

@@ -473,9 +473,9 @@
       },
   };
 
-  const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description, anchor = null, }) => {
+  const Headline = JSX(({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description, anchor = null, headingType = 'h2', }) => {
       const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
-      return (jsxs("section", { className: `p-[50px] ${STYLE_MAPS.background} ${className}`, id: anchor, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx("p", { className: `font-normal text-base mt-4 ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, children: description })) : null] }));
+      return (jsxs("section", { className: `p-[50px] flex flex-col gap-4 ${STYLE_MAPS.background} ${className}`, id: anchor, children: [title ? (jsx(Heading, { headingType: headingType, className: `text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx("p", { className: `text-base ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, children: description })) : null] }));
   });
 
   const LinkDocsListItemBase = JSX(({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
@@ -489,8 +489,9 @@
       return prefix + extension + size;
   };
   const getExtFromHref = (href) => {
-      if (!href)
+      if (!href) {
           return '';
+      }
       const index = href.lastIndexOf('.');
       return index !== -1 ? href.substring(index + 1) : '';
   };
@@ -501,21 +502,12 @@
       return documents?.length ? (jsx("div", { className: className, role: "list", children: documents.map((doc, i) => (jsx("div", { className: columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : '', role: "listitem", children: jsx(LinkDocsListItem, { className: "group flex align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main", doc: doc, icon: icon }) }, String(i)))) })) : null;
   });
 
-  const titleAlignStyleMap = {
-      left: 'text-left',
-      center: 'text-center',
-      right: 'text-right',
-  };
-  const titleMarginsStyleMap = {
-      double: 'mb-8',
-      single: 'mb-[26px]',
-  };
   const linkColumnsModeStyleMap = {
       double: 'flex gap-x-5 gap-y-[26px] flex-wrap',
       single: 'flex gap-3.5 flex-col',
   };
-  const LinkDocs = JSX(({ className = '', title, subtitle, align, documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', anchor = null, }) => {
-      return (jsxs("section", { className: `font-sans text-primary-text p-[50px] bg-white ${className}`, id: anchor, children: [title ? (jsx(Heading, { headingType: "h2", className: `${subtitle ? 'mb-2.5' : titleMarginsStyleMap[columnsMode]} ${titleAlignStyleMap[align ?? 'center']}`, title: title })) : null, subtitle ? (jsx("h3", { className: `text-base mt-0 font-normal ${titleMarginsStyleMap[columnsMode]} ${titleAlignStyleMap[align ?? 'center']}`, children: subtitle })) : null, jsx(LinkDocsList, { className: linkColumnsModeStyleMap[columnsMode], columnsMode: columnsMode, documents: documents, icon: icon })] }));
+  const LinkDocs = JSX(({ context, className = '', title, description, align = 'center', documents, icon = { icon: 'DocIcon' }, columnsMode = 'double', anchor = null, }) => {
+      return (jsxs("section", { className: `font-sans text-primary-text p-[50px] bg-white ${className}`, id: anchor, children: [jsx(Headline, { className: "!p-0", title: title, description: description, context: context, align: align, headingType: "h3" }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] }));
   });
 
   const pictureTextStyleMap = {
@@ -654,8 +646,9 @@
       return buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => renderButton$2(useLink({ router, handlerDecorator }, button), index)) })) : null;
   });
   function renderButton$2({ icon, ...button }, i) {
-      if (!button?.text)
+      if (!button?.text) {
           return;
+      }
       return icon ? (jsx(Button, { appendLeft: jsx(Img, { image: icon, width: "24", height: "24", asSVG: true }), ...button }, String(i))) : (jsx(Button, { ...button }, String(i)));
   }
 
@@ -735,7 +728,7 @@
 
   const ProductBlockInner = JSX(({ className = '', context, title, headingType = 'h2', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, textBlockClassName = '', }) => {
       const textColor = version === 'secondary' ? 'text-white' : 'text-primary-text';
-      return (jsxs("div", { className: `flex grow justify-between items-stretch ${className}`, children: [jsx("div", { className: `flex flex-col ${textBlockClassName}`, children: jsxs(BaseTile, { context: context, title: getTitle(title, headingType), buttons: getButtons(context, buttons), children: [description ? (jsx(Description, { className: `mt-4 max-w-[600px] text-md font-light ${textColor}`, description: description })) : null, benefits?.filter((items) => items.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map((benefit, i) => renderBenefit$1({ benefit, version, benefitsVersion }, i)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-title-2xs font-light", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] }) }), image?.src && jsx(Img, { className: "mt-[-50px]", image: image })] }));
+      return (jsxs("div", { className: `flex grow justify-between items-stretch ${className}`, children: [jsx("div", { className: `flex flex-col ${textBlockClassName}`, children: jsxs(BaseTile, { context: context, title: getTitle(title, headingType), buttons: getButtons(context, buttons), children: [description ? (jsx(Description, { className: `mt-4 max-w-[600px] text-md font-light ${textColor}`, description: description })) : null, benefits?.filter((_) => _.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map((benefit, i) => renderBenefit$1({ benefit, version, benefitsVersion }, i)) })) : null, items?.length ? (jsx(List, { className: "mt-5 text-title-2xs font-light", items: items, itemClassName: "mb-[7px]", version: version, isDotted: isDotted })) : null] }) }), image?.src && jsx(Img, { className: "mt-[-50px]", image: image })] }));
   });
   const getTitle = (title, headingType) => {
       return title ? (jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })) : null;
@@ -787,9 +780,9 @@
   };
   const TextBlock = JSX(({ title, description, blockVersion = 'primary', iconVersion, image, className, anchor = null, }) => {
       const textBlockStyleMap = textBlockStyleMaps[blockVersion];
-      return (jsxs("section", { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, id: anchor, children: [iconVersion === 'small' ? renderIcon$1(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title ? (jsx("div", { className: `font-medium text-base mb-1 ${textBlockStyleMap.title}`, children: title })) : null, description ? (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description })) : null] })] }));
+      return (jsxs("section", { className: `font-sans px-9 py-4 flex ${textBlockStyleMap.background} ${className || ''}`, id: anchor, children: [iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null, iconVersion === 'big' ? renderImage(image) : null, jsxs("div", { className: "py-0.5", children: [title ? (jsx("div", { className: `font-medium text-base mb-1 ${textBlockStyleMap.title}`, children: title })) : null, description ? (jsx("div", { className: `text-sm ${textBlockStyleMap.description}`, children: description })) : null] })] }));
   });
-  function renderIcon$1(className) {
+  function renderIcon(className) {
       return (jsx("div", { className: "pt-1.5 pl-1 pr-4", children: jsx("div", { className: `rounded-full h-4 w-4 text-center text-xs ${className}`, children: "i" }) }));
   }
   function renderImage(image) {
@@ -833,12 +826,12 @@
       secondary: 'bg-primary-main text-white',
   };
   const Tile = JSX((props) => {
-      const { context, title, headingType = 'h3', description, items, children, buttons, image, className = '', version = 'primary', role, anchor = null, } = props;
+      const { context, title, headingType = 'h3', description, items, children, buttons, image, isDotted = true, className = '', version = 'primary', role, anchor = null, } = props;
       return (jsx("section", { className: `overflow-hidden font-sans p-9 pr-3 box-border ${className} ${tileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, role: role, id: anchor, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
-              ${version === 'primary' ? 'text-primary-text' : ''}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons.map((button) => ({ ...button, className: 'w-[158px]' })), className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? (jsx(Description, { className: "max-w-[600px] text-title-new-sm font-light", description: description })) : null, children, renderList$1(items, version)] }) }));
+              ${version === 'primary' ? 'text-primary-text' : ''}` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons.map((button) => ({ ...button, className: 'w-[158px]' })), className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? (jsx(Description, { className: "max-w-[600px] text-title-new-sm font-light", description: description })) : null, children, renderList$1(items, version, isDotted)] }) }));
   });
-  function renderList$1(items, version) {
-      return items?.length ? (jsx(List, { items: items, itemClassName: "text-title-2xs font-light mt-2", version: version === 'primary' ? 'tile' : 'tile-white' })) : null;
+  function renderList$1(items, version, isDotted) {
+      return items?.length ? (jsx(List, { items: items, isDotted: isDotted, itemClassName: "text-title-2xs font-light mt-2", version: version === 'primary' ? 'tile' : 'tile-white' })) : null;
   }
 
   const productTileStyleMap = {
@@ -846,11 +839,11 @@
       secondary: 'bg-primary-main text-white',
   };
   const ProductTile = JSX(({ context, className = '', title, headingType = 'h3', description, additionalDescription, benefits, buttons, image, version = 'primary', anchor = null, }) => {
-      return (jsx("section", { className: `bg-white overflow-hidden text-primary-text font-sans p-9 box-border ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? (jsx(Description, { className: "mt-4 max-w-[600px]", description: description })) : null, renderBenefits(benefits, version), additionalDescription
+      return (jsx("section", { className: `bg-white overflow-hidden text-primary-text font-sans p-9 box-border ${className} ${productTileStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)} `, id: anchor, children: jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: headingType, as: "h3", title: title, className: `whitespace-pre-wrap max-w-[600px]` })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex mt-9 gap-3" })) : null, image: image?.src && jsx(Img, { className: "mt-auto ml-7", image: image }), children: [description ? (jsx(Description, { className: "mt-4 max-w-[600px]", description: description })) : null, renderBenefits(benefits || [], version), additionalDescription
                       ? renderAdditionalDescription(additionalDescription, version)
                       : null] }) }));
   });
-  function renderBenefits(benefits = [], version) {
+  function renderBenefits(benefits, version) {
       return (jsxs("div", { className: "flex mt-5 mb-1", children: [benefits.length ? jsx("div", { className: "mr-8", children: benefits.map(renderBenefitLabel) }) : null, benefits.length ? (jsx("div", { className: "pt-1", children: benefits.map((_, i) => renderBenefitDescription(_, i, version)) })) : null] }));
   }
   function renderBenefitLabel(benefit, i) {
@@ -871,10 +864,6 @@
       return jsx("div", { className: `text-sm mt-2.5 ${descStyleMap[version]}`, children: additionalDescription });
   }
 
-  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(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, width: "16", height: "16", asSVG: true }) })));
-
   const cardVersionMap = {
       primary: 'bg-white text-secondary-text',
       secondary: 'bg-primary-main text-white',
@@ -894,7 +883,7 @@
 
   const GalleryCardInner = JSX(({ title, description, image, items, button, version, isDotted = true }) => {
       const titleStyleClasses = getTitleStyle(version);
-      return (jsxs("div", { className: "h-full flex flex-col justify-between text-center", children: [jsxs("div", { children: [image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: image }) })) : null, title ? renderCardTitle(title, titleStyleClasses) : null, description ? (jsx("div", { className: `font-light text-m-md-new ${title ? 'mt-2' : ''}`, children: description })) : null, items?.length ? renderItems(items, version, isDotted) : null] }), button?.text ? renderButton$1(button) : null] }));
+      return (jsxs("div", { className: "h-full flex flex-col justify-between text-center", children: [jsxs("div", { children: [image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-6", image: image }) })) : null, title ? renderCardTitle(title, titleStyleClasses) : null, description ? (jsx("div", { className: `font-light text-m-md-new ${title ? 'mt-2' : ''}`, children: description })) : null, items?.length ? renderItems(items, isDotted, version) : null] }), button?.text ? renderButton$1(button) : null] }));
   });
   function renderButton$1(button) {
       return (jsx(Button, { className: "mt-6 w-full", appendLeft: button.icon && jsx(Img, { image: button.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
@@ -902,7 +891,7 @@
   function renderCardTitle(title, className) {
       return jsx("div", { className: `text-xl m-0 ${className}`, children: title });
   }
-  function renderItems(items, version = 'primary', isDotted) {
+  function renderItems(items, isDotted, version = 'primary') {
       return (jsx(List, { className: `max-w-[308px] mt-2 text-sm ${version === 'primary' ? '!text-secondary-text' : ''}`, itemClassName: "mt-1 first:mt-0", items: items.filter((item) => item?.text).map((item) => item.text), isDotted: isDotted, version: version }));
   }
   function getTitleStyle(version) {
@@ -919,6 +908,14 @@
         items-stretch ${cardStyleMap[version]} ${cardVersionMap[card.version ?? 'primary']} w-full col-span-4`, role: "listitem", children: jsx(GalleryCardInner, { ...card }) }, String(i)));
   }
 
+  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(Img, { className: "w-4 h-4 min-w-4 min-h-4 rounded-full box-border", image: { icon: 'ArrowLeftIcon', iconVersion: 'black' }, width: "16", height: "16", asSVG: true }) })));
+
+  function renderArrows({ handler, isShown, btnClass, className = '', isDisabled = false, }) {
+      return (jsxs("div", { children: [isShown[0] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 ${btnClass[0]} ${className}`, onClick: handler[0], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left", disabled: !isShown[0] })) : null, isShown[1] || isDisabled ? (jsx(ArrowButton, { className: `absolute z-10 rotate-180 ${btnClass[1]} ${className}`, onClick: handler[1], ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right", disabled: !isShown[1] })) : null] }));
+  }
+
   const GalleryInner = JSX(({ context, cards = [], className = '', version = 'normal', anchor = null, ...rest }) => {
       const [activeCardIndex, setActiveCardIndex] = context.useState(0);
       const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
@@ -927,7 +924,12 @@
       const showNextButton = isGalleryScrollAvailable &&
           cards?.length - activeCardIndex > galleryLengthForScrollMap[version];
       const showPrevButton = isGalleryScrollAvailable && activeCardIndex > 0;
-      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-[42px] overflow-hidden ${className}`, id: anchor, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), showPrevButton ? (jsx(ArrowButton, { className: "absolute top-1/2 left-8 z-10 mt-[25px]", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })) : null, showNextButton ? (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-[25px] rotate-180", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })) : null, jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" })] }));
+      return (jsxs("section", { className: `relative font-sans text-primary-text bg-white p-[42px] overflow-hidden ${className}`, id: anchor, children: [jsx(GalleryContainer, { context: context, cards: cards, version: version, activeCardIndex: activeCardIndex, ...rest }), renderArrows({
+                  handler: [handlePrevClick, handleNextClick],
+                  isShown: [showPrevButton, showNextButton],
+                  btnClass: ['left-8', 'right-8'],
+                  className: 'top-1/2',
+              }), jsx("div", { className: "absolute top-0 left-0 bottom-0 w-[82px] bg-opacity-from-white" }), jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" })] }));
   });
 
   const Gallery = JSX((props) => jsx(GalleryInner, { ...props, version: "normal" }));
@@ -1053,12 +1055,21 @@
       const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES$1} ${isFillGradient && isFirstRow ? 'border-t' : ''} ${!isLastRow ? 'border-solid' : 'border-b-0'}`;
       return (jsx("div", { className: cellWrapperClasses, role: "cell", children: jsx("div", { className: cellClasses, children: cell.map((item, i) => renderCellInner$1(item, i, isFillGradient)) }) }));
   });
-  const renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label ? (jsx("h4", { className: `text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`, children: label })) : null, description ? (jsx("div", { className: `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`, children: description })) : null] }, String(i)));
+  const labelStyle = (isFillGradient = false) => `text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`;
+  const descriptionStyle = (isFillGradient = false) => `text-sm opacity-80 ${isFillGradient ? 'text-white' : 'text-secondary-text'}`;
+  const renderCellInner$1 = ({ label, description }, i, isFillGradient) => (jsxs("div", { className: "first:pt-7 pt-6 last:pb-7", children: [label ? jsx("h4", { className: labelStyle(isFillGradient), children: label }) : null, description ? jsx("div", { className: descriptionStyle(isFillGradient), children: description }) : null] }, 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$1} ${FIRST_CELL_CLASSES$1} ${!isLastRow ? 'border-solid' : 'border-b-0'}`, children: header.title })) : null, data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: data.map((cell, i) => (jsx(TableCell, { cell: cell, isFirstRow: isFirstRow, isLastRow: isLastRow, isFillGradient: isColoredFirstColumn && i === 0 }, String(i)))) })) : null] })));
+  const titleStyle = (isLastRow = false) => `text-sm py-7 ${DIVIDER_CLASSES$1} ${FIRST_CELL_CLASSES$1} ${isLastRow ? 'border-b-0' : 'border-solid'}`;
+  const TableRow = JSX(({ row: { header, data }, activeCardIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (jsxs(TableRowContainer, { children: [header?.title ? jsx("div", { className: titleStyle(isLastRow), children: header.title }) : null, data?.length ? (jsx(TableCarouselContainer, { activeCardIndex: activeCardIndex, columnWidth: COLUMN_WIDTH$1, children: data.map((cell, i) => (jsx(TableCell, { cell: cell, isFirstRow: isFirstRow, isLastRow: isLastRow, isFillGradient: isColoredFirstColumn && i === 0 }, String(i)))) })) : null] })));
 
-  const TableArrowScrollControl = JSX(({ isScrollAvailable, onNextClick, onPrevClick, showNextButton, showPrevButton }) => {
-      return isScrollAvailable ? (jsx("div", { children: jsxs("div", { className: "absolute top-7 right-7 z-10", children: [jsx(ArrowButton, { className: "mt-4 rotate-180", onClick: onNextClick, disabled: !showNextButton, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" }), jsx(ArrowButton, { className: "mt-4", onClick: onPrevClick, disabled: !showPrevButton, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })] }) })) : null;
+  const TableArrowScrollControl = JSX(({ isScrollAvailable, handleNextClick, handlePrevClick, showNextButton, showPrevButton }) => {
+      return isScrollAvailable ? (jsx("div", { children: renderArrows({
+              handler: [handlePrevClick, handleNextClick],
+              isShown: [showPrevButton, showNextButton],
+              btnClass: ['top-[108px]', 'top-11'],
+              className: 'right-7',
+              isDisabled: true,
+          }) })) : null;
   });
 
   const ComparisonTableRows = JSX(({ rowData, activeCardIndex, isColoredFirstColumn, ...tableArrowScrollProps }) => {
@@ -1066,12 +1077,12 @@
   });
 
   const useTableArrowScrollControl = ({ columnsLength, colsLengthForScroll, activeCardIndex, setActiveCardIndex, }) => {
-      const onNextClick = () => setActiveCardIndex(activeCardIndex + 1);
-      const onPrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+      const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+      const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
       const isScrollAvailable = columnsLength > colsLengthForScroll;
       const showNextButton = isScrollAvailable && columnsLength - activeCardIndex > colsLengthForScroll;
       const showPrevButton = Boolean(isScrollAvailable && activeCardIndex > 0);
-      return { onNextClick, onPrevClick, isScrollAvailable, showNextButton, showPrevButton };
+      return { handleNextClick, handlePrevClick, isScrollAvailable, showNextButton, showPrevButton };
   };
 
   const ComparisonTableBody = JSX(({ context, columns, rowHeaders, isShowAllRow, visibleRowLength, isColoredFirstColumn }) => {
@@ -1120,7 +1131,7 @@
   }
 
   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))) }));
+      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: pathFill, ...options }, i) => (jsx("path", { d: d, fill: pathFill || 'currentColor', ...commonOptions, ...options }, i))) }));
   });
 
   const CHECK_PATHS = [
@@ -1141,83 +1152,90 @@
       return (jsxs("div", { className: `mb-5 ${className}`, children: [title ? jsx("div", { className: "text-base font-light", children: title }) : null, value ? (jsxs("div", { className: "text-title font-normal", children: [prefix, " ", addSpacesBetweenNumbers(Math.round(value)), " ", postfix] })) : null] }));
   });
 
-  const DEFAULT_MIN_SUM$1 = 30000;
-  const DEFAULT_MAX_SUM$1 = 3000000;
-  const DEFAULT_SUM$1 = (DEFAULT_MAX_SUM$1 - DEFAULT_MIN_SUM$1) / 2;
-  const DEFAULT_MIN_MONTHS$1 = 1;
-  const DEFAULT_MAX_MONTHS$1 = 84;
-  const DEFAULT_MONTHS$1 = Math.round((DEFAULT_MAX_MONTHS$1 - DEFAULT_MIN_MONTHS$1) / 2);
-  const MONTHS_IN_YEAR$1 = 12;
+  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 InputRange = JSX(({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
-      const handleChange = (value) => {
-          if (!onChange)
+      const handleChange = (_) => {
+          if (!onChange) {
               return;
-          const sanitizedValue = Number(value.replace(/\D/g, ''));
+          }
+          const sanitizedValue = Number(_.replace(/\D/g, ''));
           onChange(sanitizedValue);
       };
       const inputStyle = {
           backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
       };
       const handleBlur = () => {
-          if (!onChange)
+          if (!onChange) {
               return;
-          if (value < min)
+          }
+          if (value < min) {
               onChange(min);
-          if (value > max)
+          }
+          if (value > max) {
               onChange(max);
+          }
       };
       return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? jsx("span", { className: "text-base text-secondary-text pl-4", children: title }) : null, jsx("input", { className: `m-0 mt-[5px] font-sans text-title w-full h-14 border border-solid border-main-stroke rounded-md
                         outline-none p-0 pl-4 box-border text-primary-text`, value: addSpacesBetweenNumbers(value), onChange: (e) => handleChange(e.target.value), onBlur: handleBlur }), jsx("div", { className: "absolute inset-x-0 bottom-[-4px] px-4 leading-[18px]", 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 my-3", children: items.map((item, i) => (jsx("span", { className: "text-sm leading-[14px] text-secondary-text pl-4", children: item }, String(i)))) })] }));
   });
 
-  const STEP_MONEY$3 = 1000;
-  function renderWantedSumInput$1(props) {
+  const STEP_MONEY$2 = 1000;
+  function renderWantedSumInput(props) {
       const { title, className = '', calculatorParams, moneyValue, defaultSum, setMoneyValue, isShowItems = true, } = props;
-      const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM$1;
-      const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM$1;
+      const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
+      const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
       const items = [
           `От ${addSpacesBetweenNumbers(minSum)} ₽`,
           `До ${addSpacesBetweenNumbers(maxSum)} ₽`,
       ];
-      return (jsx(InputRange, { className: className, title: title, items: isShowItems ? items : [], min: minSum, max: maxSum, step: STEP_MONEY$3, value: moneyValue || defaultSum, onChange: setMoneyValue }));
+      return (jsx(InputRange, { className: className, title: title, items: isShowItems ? items : [], min: minSum, max: maxSum, step: STEP_MONEY$2, value: moneyValue || defaultSum, onChange: setMoneyValue }));
   }
 
-  const DEFAULT_RATE$1 = 10.2;
-  const getCreditRate$1 = (params) => {
+  const DEFAULT_RATE = 10.2;
+  const getCreditRate = (params) => {
       const { calculatorParams, isInsurance } = params;
-      if (!calculatorParams)
-          return DEFAULT_RATE$1;
+      if (!calculatorParams) {
+          return DEFAULT_RATE;
+      }
       return isInsurance
-          ? calculatorParams?.rateWithInsurance || DEFAULT_RATE$1
-          : calculatorParams?.rateWithoutInsurance || DEFAULT_RATE$1;
+          ? calculatorParams?.rateWithInsurance || DEFAULT_RATE
+          : calculatorParams?.rateWithoutInsurance || DEFAULT_RATE;
   };
 
-  const getCalculatorParams$1 = (params) => {
+  const getCalculatorParams = (params) => {
       const { tableRows, isAnnuity = false } = params;
-      if (!tableRows)
+      if (!tableRows) {
           return {};
+      }
       const calculatorParams = tableRows.find((row) => row.isAnnuity === isAnnuity);
       return calculatorParams || {};
   };
 
-  const getDefaultSum$1 = (calculatorParams) => calculatorParams.maxSum && calculatorParams.minSum
+  const getDefaultSum = (calculatorParams) => calculatorParams.maxSum && calculatorParams.minSum
       ? (calculatorParams.maxSum - calculatorParams.minSum) / 2
-      : DEFAULT_SUM$1;
+      : DEFAULT_SUM;
 
-  const getDefaultMonths$1 = (calculatorParams) => calculatorParams.maxMonths && calculatorParams.minMonths
+  const getDefaultMonths = (calculatorParams) => calculatorParams.maxMonths && calculatorParams.minMonths
       ? Math.round((calculatorParams.maxMonths - calculatorParams.minMonths) / 2)
-      : DEFAULT_MONTHS$1;
+      : DEFAULT_MONTHS;
 
   const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 
-  const getMonthlyPayment$1 = (params) => {
+  const getMonthlyPayment = (params) => {
       const { calculatorParams, paymentType, rate, sum, months } = params;
-      if (!calculatorParams)
+      if (!calculatorParams) {
           return 0;
-      const finalSum = clamp(sum, calculatorParams.minSum || DEFAULT_MIN_SUM$1, calculatorParams.maxSum || DEFAULT_MAX_SUM$1);
+      }
+      const finalSum = clamp(sum, calculatorParams.minSum || DEFAULT_MIN_SUM, calculatorParams.maxSum || DEFAULT_MAX_SUM);
       if (paymentType === 'annuity') {
-          const annuityCoef = Number(rate) / (MONTHS_IN_YEAR$1 * 100);
+          const annuityCoef = Number(rate) / (MONTHS_IN_YEAR * 100);
           return finalSum * (annuityCoef + annuityCoef / (Math.pow(1 + annuityCoef, months) - 1));
       }
       else {
@@ -1225,14 +1243,14 @@
       }
   };
 
-  const STEP_MONTHS$1 = 1;
-  function renderMonthsInput$1(props) {
+  const STEP_MONTHS = 1;
+  function renderMonthsInput(props) {
       const { title, minMonths, maxMonths, monthsValue, defaultMonths, setMonthsValue } = props;
       const monthText = (month) => {
           const text = Number(month) % 10 === 1 ? 'месяца' : 'месяцев';
           return `${month} ${text}`;
       };
-      return (jsx(InputRange, { className: "mt-6", title: title, items: [`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`], min: minMonths, max: maxMonths, step: STEP_MONTHS$1, value: monthsValue || defaultMonths, onChange: setMonthsValue }));
+      return (jsx(InputRange, { className: "mt-6", title: title, items: [`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`], min: minMonths, max: maxMonths, step: STEP_MONTHS, value: monthsValue || defaultMonths, onChange: setMonthsValue }));
   }
 
   function renderButtonSection(context, buttons) {
@@ -1244,29 +1262,29 @@
       return (jsxs("div", { children: [jsx("div", { className: "text-sm font-light ml-3", children: title }), jsxs("div", { className: "flex justify-start", children: [jsx("span", { className: `calc-rate-text font-mohave text-[200px] leading-[250px] pr-4 mt-[-16px] ${className}`, children: rateFormat }), sup ? jsx("span", { className: "calc-rate-text text-[65px] leading-[75px]", children: sup }) : ''] })] }));
   }
 
-  const DEFAULT_PAYMENT_TYPE$1 = 'annuity';
-  const CreditCalculatorForm$1 = JSX(({ context, className = '', buttons }) => {
+  const DEFAULT_PAYMENT_TYPE = 'annuity';
+  const CreditCalculatorForm = JSX(({ context, className = '', buttons }) => {
       const [moneyValue, setMoneyValue] = context.useState(undefined);
       const [monthsValue, setMonthsValue] = context.useState(undefined);
       const [isAnnuity, toggleIsAnnuity] = context.useState(false);
       const [isBudgetary, toggleIsBudgetary] = context.useState(false);
       const [isInsurance, toggleIsInsurance] = context.useState(false);
       const tableRows = useCreditCalculatorData(context.useAsyncData, 'directoryName').rows;
-      const calculatorParams = getCalculatorParams$1({ tableRows, isAnnuity: isAnnuity });
-      const defaultSum = getDefaultSum$1(calculatorParams);
-      const defaultMonths = getDefaultMonths$1(calculatorParams);
-      const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS$1;
-      const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS$1;
-      const rate = getCreditRate$1({ calculatorParams, isInsurance: isInsurance });
-      const monthlyPayment = getMonthlyPayment$1({
+      const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isAnnuity });
+      const defaultSum = getDefaultSum(calculatorParams);
+      const defaultMonths = getDefaultMonths(calculatorParams);
+      const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
+      const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
+      const rate = getCreditRate({ calculatorParams, isInsurance: isInsurance });
+      const monthlyPayment = getMonthlyPayment({
           calculatorParams,
-          paymentType: DEFAULT_PAYMENT_TYPE$1,
+          paymentType: DEFAULT_PAYMENT_TYPE,
           rate,
           sum: moneyValue || defaultSum,
           months: monthsValue || defaultMonths,
       });
       const title = 'Сумма кредита, ₽';
-      return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput$1({ title, calculatorParams, moneyValue, defaultSum, setMoneyValue }), renderMonthsInput$1({
+      return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput({ title, calculatorParams, moneyValue, defaultSum, setMoneyValue }), renderMonthsInput({
                           title: 'Сумма кредита, ₽',
                           minMonths,
                           maxMonths,
@@ -1278,23 +1296,23 @@
                       : null }), jsxs("div", { className: "w-[351px]", children: [monthlyPayment ? (jsx(CalculatorValueBlock, { title: "\u0415\u0436\u0435\u043C\u0435\u0441\u044F\u0447\u043D\u044B\u0439 \u043F\u043B\u0430\u0442\u0435\u0436", value: monthlyPayment, postfix: "\u20BD" })) : null, renderButtonSection(context, buttons)] })] }));
   });
 
-  const STEP_MONEY$2 = 1000;
+  const STEP_MONEY$1 = 1000;
   function renderRealEstateValue(props) {
       const { calculatorParams, moneyValue, defaultSum, setMoneyValue } = props;
-      const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM$1;
-      const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM$1;
-      return (jsx(InputRange, { title: "\u0421\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C \u043D\u0435\u0434\u0432\u0438\u0436\u0438\u043C\u043E\u0441\u0442\u0438, \u20BD ", items: [`От ${addSpacesBetweenNumbers(minSum)} ₽`, `До ${addSpacesBetweenNumbers(maxSum)} ₽`], min: minSum, max: maxSum, step: STEP_MONEY$2, value: moneyValue || defaultSum, onChange: setMoneyValue }));
+      const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
+      const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
+      return (jsx(InputRange, { title: "\u0421\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C \u043D\u0435\u0434\u0432\u0438\u0436\u0438\u043C\u043E\u0441\u0442\u0438, \u20BD ", items: [`От ${addSpacesBetweenNumbers(minSum)} ₽`, `До ${addSpacesBetweenNumbers(maxSum)} ₽`], min: minSum, max: maxSum, step: STEP_MONEY$1, value: moneyValue || defaultSum, onChange: setMoneyValue }));
   }
 
-  const STEP_MONEY$1 = 1000;
+  const STEP_MONEY = 1000;
   function renderInitialFeeInput(props) {
       const { calculatorParams, moneyValue, defaultSum, setMoneyValue } = props;
-      const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM$1;
-      const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM$1;
+      const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
+      const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
       return (jsx(InputRange, { className: "mt-6", title: "\u041F\u0435\u0440\u0432\u043E\u043D\u0430\u0447\u0430\u043B\u044C\u043D\u044B\u0439 \u0432\u0437\u043D\u043E\u0441, \u20BD ", items: [
               `От ${addSpacesBetweenNumbers(minSum)} рублей`,
               `До ${addSpacesBetweenNumbers(maxSum)} рублей`,
-          ], min: minSum, max: maxSum, step: STEP_MONEY$1, value: moneyValue || defaultSum, onChange: setMoneyValue }));
+          ], min: minSum, max: maxSum, step: STEP_MONEY, value: moneyValue || defaultSum, onChange: setMoneyValue }));
   }
 
   function renderProposalMortgage({ credit, period, taxRefund }) {
@@ -1307,12 +1325,12 @@
       const [isInsurance, toggleIsInsurance] = context.useState(false);
       const [isFullInsurance, toggleIsFullInsurance] = context.useState(false);
       const tableRows = useCreditCalculatorData(context.useAsyncData, 'directoryName').rows;
-      const calculatorParams = getCalculatorParams$1({ tableRows, isAnnuity: isInsurance });
-      const defaultSum = getDefaultSum$1(calculatorParams);
-      const defaultMonths = getDefaultMonths$1(calculatorParams);
-      const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS$1;
-      const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS$1;
-      const rate = getCreditRate$1({ calculatorParams, isInsurance: isInsurance });
+      const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isInsurance });
+      const defaultSum = getDefaultSum(calculatorParams);
+      const defaultMonths = getDefaultMonths(calculatorParams);
+      const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
+      const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
+      const rate = getCreditRate({ calculatorParams, isInsurance: isInsurance });
       const monthlyPayment = 777777; // TODO: hardcode
       const proposalMortgageValue = { credit: 3892000, period: 15, taxRefund: 650000 }; // TODO: hardcode
       return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderRealEstateValue({ calculatorParams, moneyValue, defaultSum, setMoneyValue }), renderInitialFeeInput({
@@ -1320,7 +1338,7 @@
                           moneyValue,
                           defaultSum,
                           setMoneyValue,
-                      }), renderMonthsInput$1({
+                      }), renderMonthsInput({
                           title: 'Срок ипотеки, месяцев',
                           minMonths,
                           maxMonths,
@@ -1336,21 +1354,21 @@
       const [moneyValue, setMoneyValue] = context.useState(undefined);
       const [monthsValue, setMonthsValue] = context.useState(undefined);
       const tableRows = useCreditCalculatorData(context.useAsyncData, 'directoryName').rows;
-      const calculatorParams = getCalculatorParams$1({ tableRows, isAnnuity: false });
-      const defaultSum = getDefaultSum$1(calculatorParams);
-      const defaultMonths = getDefaultMonths$1(calculatorParams);
+      const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: false });
+      const defaultSum = getDefaultSum(calculatorParams);
+      const defaultMonths = getDefaultMonths(calculatorParams);
       const income = 948841;
       const finallySum = 1218841;
-      return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput$1({
+      return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput({
                           title: 'Сумма вклада, ₽',
                           calculatorParams: { minSum, maxSum },
                           moneyValue,
                           defaultSum,
                           setMoneyValue,
-                      }), renderMonthsInput$1({
+                      }), renderMonthsInput({
                           title: 'Срок вклада, месяцев',
-                          minMonths: minMonths || DEFAULT_MIN_MONTHS$1,
-                          maxMonths: maxMonths || DEFAULT_MAX_MONTHS$1,
+                          minMonths: minMonths || DEFAULT_MIN_MONTHS,
+                          maxMonths: maxMonths || DEFAULT_MAX_MONTHS,
                           monthsValue,
                           defaultMonths,
                           setMonthsValue,
@@ -1366,19 +1384,19 @@
       const calculatorOtherParams = { minSum: minSumOther, maxSum: maxSumOther };
       const incomeBonus = 948841;
       const bonusOrDef = bonus || 2528;
-      return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput$1({
+      return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput({
                           title: 'Сумма покупок в категории путешествия, ₽',
                           calculatorParams: calculatorTripParams,
                           moneyValue: bonusTripValue,
-                          defaultSum: getDefaultSum$1(calculatorTripParams),
+                          defaultSum: getDefaultSum(calculatorTripParams),
                           setMoneyValue: setBonusTripValue,
                           isShowItems: false,
-                      }), renderWantedSumInput$1({
+                      }), renderWantedSumInput({
                           className: 'mt-6',
                           title: 'Сумма покупок в остальных категориях, ₽',
                           calculatorParams: calculatorOtherParams,
                           moneyValue: bonusOtherValue,
-                          defaultSum: getDefaultSum$1(calculatorOtherParams),
+                          defaultSum: getDefaultSum(calculatorOtherParams),
                           setMoneyValue: setBonusOtherValue,
                           isShowItems: false,
                       })] }), jsx("div", { children: bonusOrDef
@@ -1391,7 +1409,7 @@
   });
 
   const EmbeddableCalcBlocks = {
-      CreditCalculatorForm: CreditCalculatorForm$1,
+      CreditCalculatorForm,
       MortgageCalculatorForm,
       DepositCalculatorForm,
       BonusCalculatorForm,
@@ -1406,7 +1424,6 @@
       return (jsx("section", { className: `box-border relative flex shrink-0 basis-full ${className}`, role: "listitem", children: jsx("div", { className: "box-border p-9 w-full", children: jsx(EmbeddedBlock, { context: context, ...blockCalcTabs, className: "flex justify-between" }) }) }, String(i)));
   };
 
-  const arrowBtnStyle$1 = 'absolute w-[56px] h-[56px] min-h-[56px] max-h-[56px] top-1 z-10 mt-[25px] bg-white rounded-full';
   const Calculator = JSX(({ className = '', context, calcTabs = [], anchor = null }) => {
       const tabsNav = calcTabs.map((_) => _.nav || {});
       const blockCalcTabs = calcTabs.map(({ calculatorBlock }) => calculatorBlock || {});
@@ -1419,7 +1436,12 @@
       const showPrevButton = tabsShift > 0;
       return (jsxs("section", { id: anchor, className: `box-border overflow-hidden relative font-sans w-100 bg-white text-primary-text ${className}`, children: [jsxs("div", { children: [tabsNav.length > 1
                           ? renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex })
-                          : null, showPrevButton ? (jsx(ArrowButton, { className: `${arrowBtnStyle$1} left-3 top-3`, onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" })) : null, showNextButton ? (jsx(ArrowButton, { className: `${arrowBtnStyle$1} right-3 top-3 rotate-180`, onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" })) : null] }), jsx("div", { className: "flex", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: blockCalcTabs?.length
+                          : null, renderArrows({
+                          handler: [handlePrevClick, handleNextClick],
+                          isShown: [showPrevButton, showNextButton],
+                          btnClass: ['left-3', 'right-3'],
+                          className: 'top-8',
+                      })] }), jsx("div", { className: "flex", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: blockCalcTabs?.length
                       ? blockCalcTabs.map(renderCalculatorBlock({ context, className }))
                       : null })] }));
   });
@@ -1443,16 +1465,69 @@
                       })) }) }), jsx("div", { className: "w-full h-2 bg-primary-main" })] }));
   }
 
-  const TAB_STYLE = 'px-2 h-14 pb-2 pt-3 border border-b-0 border-main-stroke';
-  const ACTIVE_TAB_STYLE = 'px-2 h-16 pt-4 pb-2 text-white bg-primary-main';
-  const Tabs = JSX(({ tabs, currentTabIndex, onTabClick }) => {
-      return (jsx("div", { className: "flex items-end border-b border-main-stroke", role: "tablist", children: tabs?.map(renderTab$2(currentTabIndex, onTabClick)) }));
-  });
-  const renderTab$2 = (currentTabIndex, onTabClick) => (tab, index) => {
-      const isActive = currentTabIndex === index;
-      return (jsxs("div", { className: `flex h-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${isActive ? ACTIVE_TAB_STYLE : TAB_STYLE}`, role: "tab", onClick: () => onTabClick(index), "aria-selected": String(isActive), children: [tab?.icon ? renderIcon(tab, isActive) : null, jsxs("div", { children: [tab?.title ? jsx("h3", { className: "font-medium m-0 text-base", children: tab?.title }) : null, tab?.description ? (jsx("span", { className: `font-light text-xs ${isActive ? '' : 'text-secondary-text'}`, children: tab?.description })) : null] })] }, String(index)));
+  function useExchangeRates(useAsyncData) {
+      const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchExchangeRates);
+      const result = data?.hits?.hits?.map((_) => _._source) || [];
+      return result.length ? getCurrencyListByRate(result) : result;
+  }
+  async function fetchExchangeRates() {
+      try {
+          const response = await fetch(EXCHANGE_RATES_URL, {
+              method: 'POST',
+              headers: {
+                  'Content-Type': 'application/json',
+              },
+              body: JSON.stringify(EXCHANGE_RATES_BODY),
+          });
+          return await response.json();
+      }
+      catch (err) {
+          console.error(err);
+      }
+  }
+  const EXCHANGE_RATES_URL = 'https://coins.rshb.ru/api/catalog/vue_storefront_magento_1_currency_rates_average/currency_rates_average/_search?size=10000';
+  const EXCHANGE_RATES_BODY = {
+      query: {
+          bool: {
+              must: [
+                  {
+                      term: {
+                          // eslint-disable-next-line camelcase
+                          russian_region_code: '77',
+                      },
+                  },
+                  {
+                      term: {
+                          // eslint-disable-next-line camelcase
+                          from_volume: '0',
+                      },
+                  },
+                  {
+                      terms: {
+                          // eslint-disable-next-line camelcase
+                          currency_pair: ['USD/RUB', 'EUR/RUB'],
+                      },
+                  },
+              ],
+          },
+      },
   };
-  const renderIcon = (tab, isActive) => (jsx("div", { className: "h-full mt-1", children: jsx(Img, { className: `w-5 h-5 mr-3 ${isActive ? 'invert' : ''}`, image: tab?.icon || 'CardIcon', asSVG: !isActive }) }));
+  const getCurrencyListByRate = (currencyRates) => currencyRates.reduce((result, _) => {
+      const currencyInfo = _['currency_first'];
+      if (!validateRate(_['rate_buy']) && !validateRate(_['rate_sell'])) {
+          return result;
+      }
+      const currencyCode = currencyInfo.code;
+      if (!result.some((i) => i.code === currencyCode)) {
+          result.push({
+              code: currencyCode,
+              buy: Number(_.rate_buy),
+              sell: Number(_.rate_sell),
+          });
+      }
+      return result;
+  }, []);
+  const validateRate = (value) => Math.round(value) > 0;
 
   function getTileHeadingType(className = '') {
       const colSpan = getColSpan(className);
@@ -1467,181 +1542,17 @@
       }
   }
 
-  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 || {};
-  };
+  var Currency;
+  (function (Currency) {
+      Currency["RUB"] = "RUB";
+      Currency["EUR"] = "EUR";
+      Currency["USD"] = "USD";
+  })(Currency || (Currency = {}));
 
-  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 getDefaultMonths = (calculatorParams) => calculatorParams.maxMonths && calculatorParams.minMonths
-      ? Math.round((calculatorParams.maxMonths - calculatorParams.minMonths) / 2)
-      : DEFAULT_MONTHS;
-
-  const getDefaultSum = (calculatorParams) => calculatorParams.maxSum && calculatorParams.minSum
-      ? (calculatorParams.maxSum - calculatorParams.minSum) / 2
-      : DEFAULT_SUM;
-
-  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 finalSum / months + finalSum * (Number(rate) / 12);
-      }
-  };
-
-  const tableFunc = (table) => (input) => {
-      const [, output] = table.find(([predicate]) => predicate(input)) || [];
-      return output;
-  };
-
-  const func = tableFunc([
-      [(_) => _ === 1, 'год'],
-      [(_) => _ <= 4, 'года'],
-      [() => true, 'лет'],
-  ]);
-  function renderButton(number, i, handleClick) {
-      const string = func(number);
-      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, " ", string] }) }, String(i)));
-  }
-
-  const STEP_MONTHS = 1;
-  function renderMonthsInput(props) {
-      const { minMonths, maxMonths, monthsValue, defaultMonths, setMonthsValue } = props;
-      return (jsx(InputRange, { className: "mt-[23px]", 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 }));
-  }
-
-  function renderProposal(monthlyPayment, rate) {
-      return (jsxs("div", { className: "box-border h-fit p-9 bg-primary-main rounded-md text-white", children: [jsx("div", { className: "text-base mb-[18px]", 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(monthlyPayment)), " \u20BD"] }), jsx("div", { className: "text-sm opacity-60", children: "\u0421\u0442\u0430\u0432\u043A\u0430" }), jsxs("div", { className: "text-lg", children: [rate, " %"] })] }));
-  }
-
-  function renderTermsButton() {
-      return (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-2xs 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 \u00AB\u041E \u043F\u0435\u0440\u0441\u043E\u043D\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445\u00BB" })] }));
-  }
-
-  const STEP_MONEY = 1000;
-  function renderWantedSumInput(props) {
-      const { calculatorParams, moneyValue, defaultSum, setMoneyValue } = props;
-      const minSum = calculatorParams?.minSum || DEFAULT_MIN_SUM;
-      const maxSum = calculatorParams?.maxSum || DEFAULT_MAX_SUM;
-      return (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 }));
-  }
-
-  const DEFAULT_PAYMENT_TYPE = 'annuity';
-  const BORDER_STYLE = 'border-solid border-[3px] border-primary-main rounded-md';
-  const CreditCalculatorForm = JSX(({ context, 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 = getDefaultSum(calculatorParams);
-      const defaultMonths = getDefaultMonths(calculatorParams);
-      const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
-      const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
-      const rate = getCreditRate({ calculatorParams, isInsurance: isInsuranceChecked });
-      const monthlyPayment = 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: "mt-7", children: jsxs("div", { className: `box-border p-[49px] pr-[56px] mx-auto w-max ${BORDER_STYLE}`, children: [jsxs("div", { className: "flex justify-between", children: [jsxs("div", { className: "mr-[42px]", children: [renderWantedSumInput({ calculatorParams, moneyValue, defaultSum, setMoneyValue }), renderMonthsInput({
-                                      minMonths,
-                                      maxMonths,
-                                      monthsValue,
-                                      defaultMonths,
-                                      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: "mt-3 mb-7", 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 })] }), renderProposal(monthlyPayment, rate)] }), renderTermsButton()] }) }));
+  const currencyNumberFormat = new Intl.NumberFormat('ru', {
+      style: 'currency',
+      currency: Currency.RUB,
   });
-
-  const DEFAULT_TABS = [
-      {
-          title: 'Кредит',
-          description: 'Ставка от 6% до 7 лет',
-          directoryName: 'credit-calculator-data',
-          icon: { icon: 'CardIcon' },
-      },
-      {
-          title: 'Кредит',
-          description: 'Ставка от 4% до 7 лет',
-          directoryName: 'credit-calculator-data1',
-          icon: { icon: 'ChartSquareIcon' },
-      },
-      {
-          title: 'Кредит',
-          description: 'Ставка от 3% до 6 лет',
-          directoryName: 'credit-calculator-data2',
-          icon: { icon: 'DiscountShapeIcon' },
-      },
-  ];
-
-  const CreditCalculator = JSX(({ className = '', context, tabs = DEFAULT_TABS, anchor = null }) => {
-      const [currentTabIndex, setCurrentTabIndex] = context.useState(0);
-      return (jsxs("section", { className: `font-sans text-primary-text py-10 bg-white ${className}`, id: anchor, children: [jsx(Heading, { className: "w-full text-center mb-8", headingType: getTileHeadingType(className), title: "\u041A\u0430\u043B\u044C\u043A\u0443\u043B\u044F\u0442\u043E\u0440" }), jsx(Tabs, { tabs: tabs, currentTabIndex: currentTabIndex, onTabClick: setCurrentTabIndex }), jsx(CreditCalculatorForm, { context: context, directoryName: tabs[currentTabIndex]?.directoryName })] }));
-  });
-
-  function useExchangeRates(useAsyncData) {
-      const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchExchangeRates);
-      return data || {};
-  }
-  async function fetchExchangeRates() {
-      try {
-          const response = await fetch(EXCHANGE_RATES_URL);
-          return await response.json();
-      }
-      catch (err) {
-          console.error(err);
-      }
-  }
-  const EXCHANGE_RATES_URL = '/api/v1/exchangerates.json';
-
-  const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
   const formatCurrency = (value) => (value ? currencyNumberFormat.format(value) : '');
 
   const TABLE_HEAD_STYLE = 'font-light text-left font-normal text-sm text-secondary-text';
@@ -1653,55 +1564,141 @@
       return (jsxs("table", { className: `h-fit w-fit ${className}`, children: [jsx("thead", { children: jsxs("tr", { children: [jsx("th", { className: TABLE_HEAD_STYLE, children: "\u0412\u0430\u043B\u044E\u0442\u0430" }), jsx("th", { className: `${TABLE_HEAD_STYLE} pl-11`, children: "\u041A\u0443\u043F\u0438\u0442\u044C" }), jsx("th", { className: `${TABLE_HEAD_STYLE} pl-11`, children: "\u041F\u0440\u043E\u0434\u0430\u0442\u044C" })] }) }), jsx("tbody", { children: exchangeCurrencyItems.map((item) => renderCurrencyRow(item)) })] }));
   });
   const renderCurrencyRow = (exchangeCurrencyItem) => {
-      const code = exchangeCurrencyItem?.currency?.currency;
-      return (jsxs("tr", { className: "pb-1", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[code] }, width: "24", height: "24" }) : null, jsx("span", { className: "text-m-title-md ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.buyExchangeRate) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.saleExchangeRate) })] }, code));
+      const code = exchangeCurrencyItem?.code;
+      return (jsxs("tr", { className: "pb-1", children: [jsx("td", { className: "pt-4", children: jsxs("div", { className: "flex items-center", children: [code ? jsx(Img, { image: { icon: CURRENCY_ICONS_MAP[code] }, width: "24", height: "24" }) : null, jsx("span", { className: "text-m-title-md ml-2", children: code })] }) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.buy) }), jsx("td", { className: "pt-4 pl-11 m-title-md font-light", children: formatCurrency(exchangeCurrencyItem.sell) })] }, code));
   };
 
   const CurrentLocation = JSX(({ className = '', address, distance }) => (jsxs("div", { className: `flex text-sm ${className}`, children: [jsx(Img, { image: { icon: 'GpsIcon' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "ml-3 font-light", children: [address ? jsx("p", { className: "m-0 mb-[3px]", children: address }) : null, distance ? (jsxs("p", { className: "text-secondary-text m-0", children: ["\u041A\u0443\u0440\u0441 \u0443\u043A\u0430\u0437\u0430\u043D \u0434\u043B\u044F \u0431\u043B\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043E \u043E\u0444\u0438\u0441\u0430 - ", distance] })) : null] })] })));
 
-  const Input = JSX(({ className = '', id, name, type = 'text', placeholder }) => {
-      return (jsx("input", { className: className, id: id, name: name || id, type: type, placeholder: placeholder }));
+  const roundTo = (value, precision = 2) => {
+      const factor = Math.pow(10, precision);
+      return Math.round(parseFloat(String(value)) * factor) / factor;
+  };
+
+  const calculateResult = (value, rate, precision) => {
+      const result = Number(formatValue(value)) * Math.pow(rate, precision ? -1 : 1);
+      return Number.isInteger(result) ? result : roundTo(result);
+  };
+  const formatValue = (value) => value.replace(/[^\d.,]/g, '').replace(',', '.');
+
+  const tableFunc = (table) => (input) => {
+      const [, output] = table.find(([predicate]) => predicate(input)) || [];
+      return output;
+  };
+
+  const callbackCurrencySelect = (props) => tableFunc([
+      [
+          (_) => _.value !== Currency.RUB && _.oppositeValue !== Currency.RUB,
+          () => props.handleConvert(props.value, Currency.RUB),
+      ],
+      [
+          (_) => _.value === Currency.RUB && _.oppositeValue === Currency.RUB,
+          () => props.handleConvert(props.value, Currency.USD),
+      ],
+      [() => true, () => props.handleConvert(props.value)],
+  ])(props)?.();
+
+  function renderButton() {
+      return (jsx(Button, { className: "box-border mt-3.5 py-3 h-12 w-full", version: "primary", href: "https://coins.rshb.ru/exchange", target: "_blank", children: "\u041A\u0443\u043F\u0438\u0442\u044C \u0432\u0430\u043B\u044E\u0442\u0443" }));
+  }
+
+  const Input = JSX(({ className = '', id, name, type = 'text', placeholder, pattern, value, onChange }) => {
+      const handleChange = (e) => {
+          const validInputValue = e.target.validity.valid ? e.target.value : value;
+          onChange(validInputValue);
+      };
+      return (jsx("input", { className: className, id: id, name: name || id, type: type, pattern: pattern, placeholder: placeholder, value: value, onChange: (e) => handleChange(e) }));
   });
 
-  const Select = JSX(({ className = '', id, name, children }) => {
-      return (jsx("select", { className: className, id: id, name: name || id, children: children }));
+  const Select = JSX(({ className = '', id, name, children, value, onChange }) => {
+      return (jsx("select", { className: className, id: id, name: name || id, value: value, onChange: (e) => onChange(e.target.value), children: children }));
   });
 
   const SelectOption = JSX(({ className = '', value, selected, children }) => {
       return (jsx("option", { className: className, value: `${value}`, selected: selected, children: children }));
   });
 
-  const ExchangeCurrencyCalculator = JSX(({ codes, className = '' }) => {
-      return (jsxs("div", { className: `grid gap-3.5 ${className}`, children: [renderInput('Хочу продать', codes), renderInput('Получу', codes, 'USD'), jsx(Button, { className: "box-border mt-3.5 py-3 h-12 w-full", version: "primary", href: "#", children: "\u041A\u0443\u043F\u0438\u0442\u044C \u0432\u0430\u043B\u044E\u0442\u0443" })] }));
-  });
-  function renderInput(placeholder, codes, selected) {
-      return (jsxs("div", { className: "relative flex items-center", children: [jsx(Input, { className: "h-10 border pl-4 pt-[7px] pb-[7px] rounded-md text-m-sm w-full appearance-none -mr-12", type: "number", placeholder: `${placeholder}` }), codes.length ? (jsx(Select, { className: "h-9 -translate-x-4", children: codes.map((code, i) => (jsx(SelectOption, { value: code, selected: code === selected, children: code }, String(i)))) })) : null] }));
+  function renderInput(props) {
+      const { placeholder, rates, selected, value, setValue, setSelected } = props;
+      return (jsxs("div", { className: "relative flex items-center", children: [jsx(Input, { className: "h-10 border pl-4 pt-[7px] pb-[7px] rounded-md text-m-sm w-full appearance-none -mr-12", placeholder: placeholder, type: "text", value: value, onChange: setValue }), rates.length ? (jsx(Select, { className: "h-9 -translate-x-4", value: selected, onChange: (_) => setSelected(_), children: rates.map((_, i) => (jsx(SelectOption, { value: _.code, children: _.code }, String(i)))) })) : null] }));
   }
 
-  const CURRENCY_CODES = ['USD', 'EUR'];
-  const EXCHANGE_CODES = ['RUB', 'USD', 'EUR'];
-  const DEFAULT_CURRENCY_ITEMS = [
-      {
-          buyExchangeRate: 90.6,
-          saleExchangeRate: 92.8,
-          currency: { id: 2, code: '978', currency: 'EUR', name: 'Евро' },
-      },
-      {
-          buyExchangeRate: 73.75,
-          saleExchangeRate: 75.95,
-          currency: { id: 1, code: '840', currency: 'USD', name: 'Американский доллар' },
-      },
-  ];
+  const ExchangeCurrencyCalculator = JSX(({ context, className = '', currencyRatesBuy, currencyRatesSell }) => {
+      const [calcState, setCalcState] = context.useState({
+          inputSell: '',
+          inputBuy: '',
+          selectSell: currencyRatesBuy?.[0]?.code || Currency.RUB,
+          selectBuy: currencyRatesSell?.[0]?.code || Currency.USD,
+      });
+      const handleSetCalcState = (newState) => {
+          setCalcState((oldState) => ({ ...oldState, ...newState }));
+      };
+      return (jsxs("div", { className: `grid gap-3.5 ${className}`, children: [renderInput({
+                  placeholder: 'Хочу продать',
+                  rates: currencyRatesBuy,
+                  selected: calcState.selectSell,
+                  setSelected: handleSelectSell(calcState, handleSetCalcState, currencyRatesSell),
+                  value: calcState.inputSell,
+                  setValue: (value) => handleInputSell(handleSetCalcState, currencyRatesSell)(value, calcState.selectSell, calcState.selectBuy),
+              }), renderInput({
+                  placeholder: 'Получу',
+                  rates: currencyRatesSell,
+                  selected: calcState.selectBuy,
+                  setSelected: handleSelectBuy(calcState, handleSetCalcState, currencyRatesBuy),
+                  value: calcState.inputBuy,
+                  setValue: (value) => handleInputBuy(handleSetCalcState, currencyRatesBuy)(value, calcState.selectBuy, calcState.selectSell),
+              }), renderButton()] }));
+  });
+  const handleSelectSell = (calcState, setCalcState, currencyRatesSell) => (value) => {
+      setCalcState({ selectSell: value });
+      callbackCurrencySelect({
+          value,
+          oppositeValue: calcState.selectBuy,
+          handleConvert: (codeFrom = calcState.selectSell, codeTo = calcState.selectBuy) => {
+              handleInputSell(setCalcState, currencyRatesSell)(calcState.inputSell, codeFrom, codeTo);
+          },
+      });
+  };
+  const handleSelectBuy = (calcState, setCalcState, currencyRatesBuy) => (value) => {
+      setCalcState({ selectBuy: value });
+      callbackCurrencySelect({
+          value,
+          oppositeValue: calcState.selectSell,
+          handleConvert: (codeTo = calcState.selectBuy, codeFrom = calcState.selectSell) => handleInputBuy(setCalcState, currencyRatesBuy)(calcState.inputBuy, codeTo, codeFrom),
+      });
+  };
+  const handleInputSell = (setCalcState, currencyRatesSell) => (value, codeFrom, codeTo) => {
+      setCalcState({ inputSell: formatValue(value), selectBuy: codeTo });
+      const rate = currencyRatesSell.find((_) => _.code === codeTo)?.buy ||
+          currencyRatesSell.find((_) => _.code === codeFrom)?.sell;
+      if (rate) {
+          setCalcState({
+              inputBuy: String(calculateResult(value, rate, codeFrom === Currency.RUB) || ''),
+          });
+      }
+  };
+  const handleInputBuy = (setCalcState, currencyRatesBuy) => (value, codeTo, codeFrom) => {
+      setCalcState({ inputBuy: formatValue(value), selectSell: codeFrom });
+      const rate = currencyRatesBuy.find((_) => _.code === codeFrom)?.sell ||
+          currencyRatesBuy.find((_) => _.code === codeTo)?.buy;
+      if (rate) {
+          setCalcState({
+              inputSell: String(calculateResult(value, rate, codeTo === Currency.RUB) || ''),
+          });
+      }
+  };
+
   const DEFAULT_LOCATION = {
       address: 'Москва, ул.Ленина д.28',
       distance: '6км',
   };
   const ExchangeRateTile = JSX(({ className = '', context, title = 'Курсы обмена валют', anchor = null }) => {
-      const data = useExchangeRates(context.useAsyncData);
-      const exchangeCurrencyItems = data?.exchangeRate?.currencies?.filter((item) => {
-          return CURRENCY_CODES.indexOf(item?.currency?.currency || '') !== -1;
-      }) || DEFAULT_CURRENCY_ITEMS;
-      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className}`, id: anchor, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-[43px] pt-4", children: [exchangeCurrencyItems ? (jsx(CurrencyTable, { className: "mb-[31px]", exchangeCurrencyItems: exchangeCurrencyItems })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), exchangeCurrencyItems?.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", exchangeCurrencyItems: exchangeCurrencyItems, codes: EXCHANGE_CODES })) : null] }) }) }));
+      const currencyRates = useExchangeRates(context.useAsyncData);
+      const currencyRatesBuy = currencyRates.filter((_) => _.buy);
+      currencyRatesBuy.unshift({ code: Currency.RUB });
+      const currencyRatesSell = currencyRates.filter((_) => _.sell);
+      currencyRatesSell.push({ code: Currency.RUB });
+      return (jsx("section", { className: `bg-white text-primary-text font-sans p-9 box-border ${className}`, id: anchor, children: jsx(BaseTile, { context: context, title: jsx(Heading, { headingType: getTileHeadingType(className), title: title, className: "whitespace-pre-wrap" }), children: jsxs("div", { className: "flex", children: [jsxs("div", { className: "mr-[43px] pt-4", children: [currencyRates ? (jsx(CurrencyTable, { className: "mb-[31px]", exchangeCurrencyItems: currencyRates })) : null, jsx(CurrentLocation, { ...DEFAULT_LOCATION })] }), currencyRates.length && currencyRatesBuy.length && currencyRatesSell.length ? (jsx(ExchangeCurrencyCalculator, { className: "grow", context: context, currencyRatesBuy: currencyRatesBuy, currencyRatesSell: currencyRatesSell })) : null] }) }) }));
   });
 
   const LOGO_PATHS = [
@@ -1804,47 +1801,38 @@
           origins: ['t.me', 'telegram.org'],
           icon: { icon: 'TelegramIcon' },
           label: 'Телеграм',
-          width: '20px',
-          height: '16px',
       },
       {
           origins: ['vk.com'],
           icon: { icon: 'VKIcon' },
           label: 'ВКонтакте',
-          width: '24px',
-          height: '12px',
       },
       {
           origins: ['ok.ru'],
           icon: { icon: 'OkIcon' },
           label: 'Одноклассники',
-          width: '12px',
-          height: '20px',
       },
       {
           origins: ['apps.apple.com'],
           icon: { icon: 'AppleIcon' },
           label: 'App Store',
-          width: '20px',
-          height: '22px',
       },
       {
           origins: ['play.google.com'],
           icon: { icon: 'PlayMarketIcon' },
           label: 'Google Play',
-          width: '21px',
-          height: '21px',
       },
   ];
   const MediaButton = JSX(({ href, version = 'primary' }) => {
-      const { icon, width, height, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
-      if (!icon)
+      const { icon, label } = ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
+      if (!icon) {
           return null;
+      }
       const classes = version === 'secondary'
           ? 'bg-secondary-light hover:bg-secondary-hover'
           : 'border-main-divider border-solid border-[1px] hover:bg-primary-main';
       const isPrimary = version === 'primary';
-      return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(Img, { image: { ...icon, iconVersion: 'normal' }, imageClassName: isPrimary ? 'group-hover:text-white' : '', width: width, height: height, asSVG: true })) : null }));
+      return (jsx("a", { className: `flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${isPrimary ? 'hover:text-black' : ''}`, href: href, "aria-label": label, target: "_blank", rel: "noopener noreferrer", children: icon ? (jsx(Img, { image: icon, imageClassName: isPrimary ? 'group-hover:text-white' : '', width: "24", height: "24", asSVG: true })) : null }));
   });
 
   const SocialMedia = JSX(({ className = '', media, version, context, children }) => {
@@ -1856,13 +1844,13 @@
   const TextInformation = JSX(({ className, links, context }) => {
       const router = context.useRouter();
       const { handlerDecorator } = context;
-      return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { className: "pt-5 pb-[5px]", children: jsx("span", { className: "font-sans font-light text-xs text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex justify-start items-start gap-5 pt-[5px]", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
+      return (jsxs("div", { className: `${className || ''}`, children: [jsx("div", { className: "pt-5", children: jsx("span", { className: "font-sans font-light text-xs text-secondary-text", children: `\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.` }) }), links?.length ? (jsx("div", { className: "flex justify-start items-start gap-5 pt-2.5", children: links.map((_, i) => (jsx(TextInformationLink, { index: i, ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null] }));
   });
   const TextInformationLink = JSX(({ className, index, text, href, target, onClick }) => (jsx("a", { className: `font-sans font-light text-xs text-secondary-text visited: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 LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
   const Footer = JSX(({ className, documents, relatedEnterprises, contacts, socialMedia, mobileApps, topItems, context, anchor = null, }) => {
-      return (jsxs("footer", { className: `px-9 pt-9 pb-10 bg-white ${className || ''}`, id: anchor, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD }), jsx(SearchBar, { context: context, className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, context: context, hasButton: true }), jsx(SocialMedia, { media: socialMedia, context: context, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, context: context, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "pt-[3px]", context: context, items: topItems })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
+      return (jsxs("footer", { className: `p-9 bg-white ${className || ''}`, id: anchor, children: [jsxs("div", { className: "flex items-stretch gap-[54px] pb-[30px] xl:gap-8", children: [jsx(Logo, { className: LEFT_COL_WIDTH_FULL_HD }), jsx(SearchBar, { context: context, className: "grow" })] }), jsxs("div", { className: "flex items-stretch gap-[54px] xl:gap-8", children: [jsxs("div", { className: `${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden`, children: [jsx(Contacts, { items: contacts, context: context, hasButton: true }), jsx(SocialMedia, { media: socialMedia, context: context, children: "\u0421\u043E\u0446\u0441\u0435\u0442\u0438" }), jsx(SocialMedia, { className: "mt-6", media: mobileApps, context: context, children: "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u043E\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435" })] }), jsx(Sitemap, { className: "pt-[3px]", context: context, items: topItems })] }), jsx(HorizontalNavigation, { className: "mt-[98px]", links: relatedEnterprises, context: context }), jsx(TextInformation, { links: documents, context: context })] }));
   });
 
   const GracePeriod = JSX(({ className = '', title, description, calendar, anchor = null }) => {
@@ -1884,7 +1872,7 @@
 
   const checkIsHrefSameOrigin = (href, router) => getOrigin(href) === getOrigin(router.href);
 
-  const isHrefActive = (href, router, cmp = (href, baseHref) => baseHref.startsWith(href)) => {
+  const isHrefActive = (href, router, cmp = (targetHref, baseHref) => baseHref.startsWith(targetHref)) => {
       return cmp(withoutQuery(href), withoutMobilePath(withoutQuery(isURL(href) ? router.href : router.pathname)));
   };
 
@@ -1897,21 +1885,19 @@
   const TEXT_CLASSES$2 = 'font-sans font-light text-sm';
   const LINK_CLASSES$1 = 'inline-block border border-solid bg-transparent text-center no-underline';
   const TopItem = JSX(({ className = '', text, href, target, active, flat, onClick, children, ariaLabel, bgColor = 'bg-white', }) => (jsx("a", { className: `${getLinkClasses$1(bgColor, active, flat)} ${className}`, href: href, target: target, onClick: onClick, rel: "noopener noreferrer", "aria-label": ariaLabel, children: jsx("span", { className: getTextClasses$2(bgColor, active, flat), children: text || children }) })));
-  const getLinkClasses$1 = (bgColor, active, flat) => {
+  const getLinkClasses$1 = (bgColor, active = false, flat = false) => {
       let classes = 'border-transparent';
       if (active) {
           classes = `rounded-md ${bgColor === 'bg-white' ? 'border-primary-main' : 'border-white'}`;
       }
       return `${classes} ${LINK_CLASSES$1} ${flat ? '' : 'px-4 py-2'}`;
   };
-  const getTextClasses$2 = (bgColor, active, flat) => {
-      let classes = 'text-white';
-      if (bgColor === 'bg-white') {
-          classes = active
-              ? 'text-primary-main'
-              : `${flat ? 'text-primary-text' : 'text-secondary-text'} hover:text-primary-main`;
+  const getTextClasses$2 = (bgColor, active = false, flat = false) => {
+      if (bgColor !== 'bg-white') {
+          return `text-white ${TEXT_CLASSES$2}`;
       }
-      return `${classes} ${TEXT_CLASSES$2}`;
+      const nonActiveAtoms = `${flat ? 'text-primary-text' : 'text-secondary-text'} hover:text-primary-main`;
+      return `${active ? 'text-primary-main' : nonActiveAtoms} ${TEXT_CLASSES$2}`;
   };
 
   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 })));
@@ -1960,75 +1946,41 @@
       return `${bgColor === 'bg-white' ? 'bg-primary-main' : bgColor} ${BORDER_CLASSES}`;
   };
 
-  const isSSR = () => !(typeof window !== 'undefined' && window.document && window.document.createElement);
-
-  const isClient$1 = !isSSR();
-  const headerSubMenuObserver = isClient$1
-      ? new IntersectionObserver((entries) => {
-          const createArrays = (selectors) => selectors.map((_) => Array.from(window.document.querySelectorAll(_)));
-          const headerSubMenuButtonElement = window.document.querySelector('[data-header-submenu-visible=toggled]');
-          const [headerSubMenuItems, dotsHeaderSubMenuItems] = createArrays([
-              '[data-item-name=header-submenu]',
-              '[data-item-name=dots-header-submenu]',
-          ]);
-          const visibilityList = {};
-          entries.forEach((_) => {
-              visibilityList[_.target.toString()] = _.isIntersecting;
-          });
-          const isHeaderSubMenuButtonShow = toggleVisibilityInItems(visibilityList, dotsHeaderSubMenuItems, 'hidden');
-          toggleVisibilityInItems(visibilityList, headerSubMenuItems, 'invisible');
-          if (headerSubMenuButtonElement) {
-              isHeaderSubMenuButtonShow
-                  ? headerSubMenuButtonElement.classList.remove('hidden')
-                  : headerSubMenuButtonElement.classList.add('hidden');
-          }
-      }, { root: window.document, threshold: 1.0 })
-      : undefined;
-  // TODO: add types
-  const toggleVisibilityInItems = (visibilityList, items, className) => {
-      const isReversed = className !== 'hidden';
-      return items.some((_) => {
-          const key = _.toString();
-          const option = isReversed ? !visibilityList[key] : visibilityList[key];
-          key in visibilityList ? _.classList.toggle(className, option) : null;
-          return isReversed ? _.classList.contains('hidden') : !_.classList.contains('hidden');
-      });
-  };
-
   const DOT_BG_COLORS_MAP = {
       'bg-white': 'bg-primary-text',
       transparent: 'bg-white',
   };
-  const HeaderSubMenu = JSX(({ context, subItems, bgColor }) => {
-      const [subMenuIsShow, setHiddenMenuIsShow] = context.useState(false);
+  const DropdownMenu = JSX((props) => {
+      const { menuVisible, toggleMenu, menuItems, bgColor, context } = props;
+      const { useRouter, handlerDecorator } = context;
+      const router = useRouter();
+      return (jsxs("div", { className: `absolute w-52 -top-4 right-0 pt-4 z-40 ${menuVisible ? 'bg-white rounded-md shadow-blue-gray/24' : ''}`, children: [jsx("button", { className: "flex justify-between items-center cursor-pointer h-6 ml-6", onClick: toggleMenu, "aria-label": `${menuVisible ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, children: Array(3).fill(bgColor).map(renderDot) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${menuVisible ? '' : 'hidden'}`, "aria-hidden": !menuVisible, children: renderDotsSubMenuItems(menuItems, router, handlerDecorator) })] }));
+  });
+  const renderDotsSubMenuItems = (menuItems, router, handlerDecorator) => menuItems?.map((_) => (jsx("a", { ...useLink({ router, handlerDecorator }, _), className: "text-base font-light pb-4 hover:text-primary-main", children: _.text }, _.href)));
+  const renderDot = (bgColor, i) => (jsx("div", { className: `w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}` }, String(i)));
+
+  const HeaderSubMenu = JSX(({ context, subItems = [], bgColor }) => {
+      const [menuVisible, setMenuVisible] = context.useState(false);
       const router = context.useRouter();
-      const { handlerDecorator } = context;
-      setTimeout(() => {
-          if (isSSR()) {
+      const { handlerDecorator, IntersectionObserverTag } = context;
+      const [visibleItemsCount, setVisibleItemsCount] = context.useState(subItems.length);
+      const dropDownMenuItems = subItems.slice(visibleItemsCount);
+      const activeSubItem = findActiveSubItem(router)(subItems);
+      const toggleMenu = () => setMenuVisible(!menuVisible);
+      const observerCallback = (itemIndex) => (entries) => {
+          if (!entries.length) {
               return;
           }
-          const headerSubMenu = globalThis.document.querySelectorAll('[data-item-name=header-submenu]');
-          headerSubMenu.forEach((_) => {
-              headerSubMenuObserver?.observe(_);
-          });
-      }, 200);
-      const activeSubItem = findActiveSubItem(router)(subItems);
-      const toggleSubMenu = () => setHiddenMenuIsShow(!subMenuIsShow);
-      const subMenu = subItems?.map((_) => (jsx(HeaderItem, { className: "mr-8", active: _ === activeSubItem, ...useLink({ router, handlerDecorator }, _), dataItemName: "header-submenu", bgColor: bgColor }, _.href)));
-      return (jsxs("nav", { className: "relative mt-5", children: [jsx("div", { className: "overflow-hidden whitespace-nowrap mr-52", children: subMenu }), renderDotsSubMenu({
-                  subMenuIsShow,
-                  toggleSubMenu,
-                  subItems,
-                  bgColor,
-                  router,
-                  handlerDecorator,
-              })] }));
-  });
-  // TODO: add types
-  const renderDotsSubMenu = ({ subMenuIsShow, toggleSubMenu, subItems, bgColor, router, handlerDecorator, }) => (jsxs("div", { className: `absolute w-52 -top-4 right-0 pt-4 z-40 ${subMenuIsShow ? 'bg-white rounded-md shadow-blue-gray/24' : ''}`, "data-header-submenu-visible": "toggled", children: [jsx("button", { className: "flex justify-between items-center cursor-pointer h-6 ml-6", onClick: toggleSubMenu, "aria-label": `${subMenuIsShow ? 'Скрыть другие разделы' : 'Показать другие разделы'}`, children: Array(3).fill(bgColor).map(renderDot) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`, "aria-hidden": !subMenuIsShow, children: renderDotsSubMenuItems(subItems, router, handlerDecorator) })] }));
-  // TODO: add types
-  const renderDotsSubMenuItems = (subItems, router, handlerDecorator) => subItems?.map((_) => (jsx("a", { ...useLink({ router, handlerDecorator }, _), "data-item-name": "dots-header-submenu", className: "text-base font-light pb-4 hover:text-primary-main", children: _.text }, _.href)));
-  const renderDot = (bgColor, i) => (jsx("div", { className: `w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}` }, String(i)));
+          const entry = entries[0];
+          if (entry.intersectionRatio < 1) {
+              setVisibleItemsCount((prev) => Math.min(prev, itemIndex));
+          }
+          else {
+              setVisibleItemsCount((prev) => Math.max(prev, itemIndex + 1));
+          }
+      };
+      return (jsxs("nav", { className: "relative mt-5", children: [jsx("div", { className: "overflow-hidden whitespace-nowrap mr-52", children: subItems.map((_, i) => (jsx(IntersectionObserverTag, { Tag: "span", observerCallback: observerCallback(i), observerOptions: { threshold: 1 }, children: jsx(HeaderItem, { className: `mr-8 ${visibleItemsCount - 1 < i ? 'invisible' : ''}`, active: _ === activeSubItem, ...useLink({ router, handlerDecorator }, _), bgColor: bgColor }) }, String(i)))) }), dropDownMenuItems.length ? (jsx(DropdownMenu, { context: context, menuVisible: menuVisible, toggleMenu: toggleMenu, menuItems: dropDownMenuItems, bgColor: bgColor })) : null] }));
+  });
 
   const BORDER_COLORS = {
       'bg-white': 'bg-main-divider',
@@ -2057,7 +2009,6 @@
       return (jsxs("div", { className: `flex justify-between items-center gap-2 w-full ${widthStyle}`, children: [jsx("span", { className: "text-secondary-text text-base", children: title }), jsxs("span", { className: "text-primary-main text-title-2xs", children: [addSpacesBetweenNumbers(sum), " \u20BD"] })] }));
   }
 
-  const arrowBtnStyle = 'absolute w-12 h-12 min-h-12 max-h-12 top-1 z-10 mt-[25px] bg-white rounded-full text-primary-text';
   const InsuranceAmountBlockInner = JSX(({ className = '', context, cards = [], anchor = null }) => {
       const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
       const [tabsShift, setTabsShift] = context.useState(0);
@@ -2076,11 +2027,16 @@
                           isLastShift,
                           setActiveSlideIndex,
                       })
-                      : null, showPrevButton ? (jsxs("div", { children: [jsx(ArrowButton, { className: `${arrowBtnStyle} left-0 top-9`, onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E", "data-block-control": "scroll-left" }), jsx("div", { className: "absolute top-0 left-0 h-[168px] w-[84px] bg-opacity-from-white" })] })) : null, showNextButton ? (jsxs("div", { children: [jsx(ArrowButton, { className: `${arrowBtnStyle} right-0 top-9 rotate-180`, onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E", "data-block-control": "scroll-right" }), jsx("div", { className: "absolute top-0 right-0 h-[168px] w-[100px] bg-opacity-to-white" })] })) : null] }) }));
+                      : null, renderArrows({
+                      handler: [handlePrevClick, handleNextClick],
+                      isShown: [showPrevButton, showNextButton],
+                      btnClass: ['left-[50px]', 'right-[50px]'],
+                      className: 'top-[62px]',
+                  }), showPrevButton ? (jsx("div", { className: "absolute top-0 left-0 h-full w-[136px] bg-opacity-from-white" })) : null, showNextButton ? (jsx("div", { className: "absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" })) : null] }) }));
   });
   function renderGallery({ tabsShift, cards, activeSlideIndex, isLastShift, setActiveSlideIndex, }) {
       const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
-      return (jsx("div", { style: { transform: `translateX(-${tabsShiftWidth}px)` }, className: "duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap gap-3.5 pb-[38px] px-[50px]", children: cards.map((slide, i) => renderSlide({
+      return (jsx("div", { style: { transform: `translateX(-${tabsShiftWidth}px)` }, className: "duration-1000 px-[50px]", children: jsx("div", { className: "w-full flex flex-nowrap gap-3.5 pb-[38px]", children: cards.map((slide, i) => renderSlide({
                   slide,
                   i,
                   activeSlideIndex,
@@ -2225,7 +2181,7 @@
   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 renderShimmerItem = (width, index) => (jsx("div", { style: { width: `${width || 100}%` }, 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 productGalleryStyleMap = {
@@ -2321,7 +2277,12 @@
       const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
       const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
       const showPrevButton = isUseSlider && activeCardIndex > 0;
-      return (jsxs("div", { children: [showPrevButton ? (jsx(ArrowButton, { className: "absolute top-1/2 left-8 z-10 mt-6", onClick: handlePrevClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043B\u0435\u0432\u043E" })) : null, showNextButton ? (jsx(ArrowButton, { className: "absolute top-1/2 right-8 z-10 mt-6 rotate-180", onClick: handleNextClick, ariaLabel: "\u041F\u0440\u043E\u043B\u0438\u0441\u0442\u0430\u0442\u044C \u0432\u043F\u0440\u0430\u0432\u043E" })) : null] }));
+      return (jsx("div", { children: renderArrows({
+              handler: [handlePrevClick, handleNextClick],
+              isShown: [showPrevButton, showNextButton],
+              btnClass: ['left-8', 'right-8'],
+              className: 'top-1/2 mt-6',
+          }) }));
   };
 
   const StepsBlock = JSX(({ className = '', title, showLines = true, steps = [], button, anchor = null }) => {
@@ -2383,7 +2344,7 @@
   });
 
   const GroupBlockTabs = JSX((props) => {
-      const { tabs, currentTag, onTabClick, className = '', isShowCounter = true } = props;
+      const { tabs, currentTag, onTabClick, className = '', isShowCounter } = props;
       return (jsx("div", { className: `mb-2 box-border flex gap-x-1 ${className}`, role: "tablist", children: tabs?.map(renderTab(onTabClick, isShowCounter, currentTag)) }));
   });
   const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-m-sm';
@@ -2393,7 +2354,7 @@
       const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
       const counterBlockStyle = `${badgeStyle} 
       ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-light text-secondary-text'}`;
-      return (jsx("div", { className: `flex h-full w-full h-12 flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`, role: "tab", onClick: () => onTabClick(tab.tag), "aria-selected": String(isActive), tag: tab?.tag, children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? jsx("h3", { className: `mr-8 ${tabText}`, children: tab?.title }) : null, isShowCounter ? (jsx("div", { className: `flex items-center justify-center ${counterBlockStyle}`, children: jsx("span", { children: tab.count }) })) : null] }) }, String(i)));
+      return (jsx("div", { className: `flex h-full w-full h-12 flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`, role: "tab", onClick: () => onTabClick(tab.tag), "aria-selected": String(isActive), tag: tab?.tag, children: jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? jsx("h3", { className: tabText, children: tab?.title }) : null, isShowCounter ? (jsx("div", { className: `flex items-center justify-center ml-8 ${counterBlockStyle}`, children: jsx("span", { children: tab.count }) })) : null] }) }, String(i)));
   };
 
   function style2className(style) {
@@ -2406,7 +2367,7 @@
   };
 
   const GroupBlocksItem = JSX(({ groupBlocks, context }) => {
-      return (jsx("div", { className: 'grid grid-cols-12 gap-2 box-border', children: groupBlocks?.length ? groupBlocks.map(renderBlock$1(context)) : null }));
+      return (jsx("div", { className: "grid grid-cols-12 gap-2 box-border", children: groupBlocks?.length ? groupBlocks.map(renderBlock$1(context)) : null }));
   });
   const renderBlock$1 = (context) => (block, i) => {
       const type = block?.blockType;
@@ -2422,16 +2383,16 @@
       return tag ? blocks.filter((block) => block?.tags?.includes(tag)) : blocks;
   };
 
-  const GroupBlock = JSX(({ className = '', tabs, context, anchor = null, groupBlocks = [] }) => {
+  const GroupBlock = JSX(({ className = '', tabs, context, anchor = null, groupBlocks = [], isShowCounter }) => {
       const [currentTag, setCurrentTag] = context.useState(tabs?.[0]?.tag);
       const filteredBlocks = filterBlocksByTag(groupBlocks, currentTag);
       const tabsNewMap = tabs?.map((tab) => {
           const count = tab.tag
-              ? groupBlocks.filter((block) => block?.tags?.includes(`${tab.tag}`)).length
+              ? groupBlocks.filter((block) => block?.tags?.includes(tab.tag)).length
               : groupBlocks.length;
           return { ...tab, count };
       });
-      return (jsxs("section", { id: anchor, className: `box-border gap-1 h-12 ${className}`, children: [tabsNewMap?.length ? (jsx(GroupBlockTabs, { currentTag: currentTag, onTabClick: setCurrentTag, tabs: tabsNewMap })) : null, groupBlocks.length ? (jsx(GroupBlocksItem, { context: context, groupBlocks: filteredBlocks })) : null] }));
+      return (jsxs("section", { id: anchor, className: `box-border gap-1 ${className}`, children: [tabsNewMap?.length ? (jsx(GroupBlockTabs, { currentTag: currentTag, onTabClick: setCurrentTag, tabs: tabsNewMap, isShowCounter: isShowCounter })) : null, groupBlocks.length ? (jsx(GroupBlocksItem, { context: context, groupBlocks: filteredBlocks })) : null] }));
   });
 
   function getElementsColsValue(className = '') {
@@ -2448,10 +2409,10 @@
   }
 
   const BonusBenefitsBlock = JSX(({ className = '', title, subtitle, bonusBenefits, anchor = null }) => {
-      return (jsxs("section", { className: `font-sans text-primary-text bg-white p-50 flex flex-col ${className}`, id: anchor, children: [title ? (jsx(Heading, { headingType: "h3", className: "text-center mb-[10px]", title: title })) : null, subtitle ? jsx("span", { className: "text-md font-normal text-center", children: subtitle }) : null, bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${getElementsColsValue(className)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] }));
+      return (jsxs("section", { className: `font-sans text-primary-text bg-white p-50 flex flex-col text-center ${className}`, id: anchor, children: [title ? jsx(Heading, { headingType: "h3", className: "mb-[10px]", title: title }) : null, subtitle ? jsx("span", { className: "text-md font-normal", children: subtitle }) : null, bonusBenefits?.length ? (jsx("div", { className: `grid gap-1 ${getElementsColsValue(className)}`, children: bonusBenefits.map(renderBonusBenefit) })) : null] }));
   });
   const renderBonusBenefit = (bonusBenefit, i) => {
-      return (jsxs("div", { className: "flex flex-col items-center max-w-[292px]", children: [bonusBenefit?.icon ? (jsx(Img, { className: "h-[180px] w-[160px] min-w-[160px] min-h-[160px]", image: bonusBenefit.icon, width: "160", height: "180" })) : null, jsx("div", { children: bonusBenefit?.label ? (jsx("span", { className: "title-2xs text-center m-0", children: bonusBenefit.label })) : null })] }, String(i)));
+      return (jsxs("div", { className: "flex flex-col items-center max-w-[292px]", children: [bonusBenefit?.icon ? (jsx(Img, { className: "h-[180px] w-[160px] min-w-[160px] min-h-[160px]", image: bonusBenefit.icon, width: "160", height: "180" })) : null, jsx("div", { children: bonusBenefit?.label ? jsx("span", { className: "title-2xs m-0", children: bonusBenefit.label }) : null })] }, String(i)));
   };
 
   const Blocks = {
@@ -2460,7 +2421,6 @@
       Bonus,
       ComparisonTable,
       Calculator,
-      CreditCalculator,
       ExchangeRateTile,
       Footer,
       Gallery,
@@ -2494,8 +2454,9 @@
       blocks?.forEach((block) => {
           const currentHash = globalThis.location?.hash; // TODO: remove globalThis, use href from router
           const anchorHash = `#${block?.id}`;
-          if (currentHash === anchorHash)
+          if (currentHash === anchorHash) {
               return;
+          }
           const position = block?.getBoundingClientRect();
           if (position && position.top > 0 && position.top < 150) {
               router.replace(`#${block?.id}`);
@@ -2503,6 +2464,8 @@
       });
   };
 
+  const isSSR = () => !(typeof window !== 'undefined' && window.document && window.document.createElement);
+
   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 = {