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

package/mobile/bundle/bundle.umd.js

@@ -422,7 +422,7 @@
       // backwards compatibility with existing icons in usage
       const icon = typeof image === 'string' ? image : image?.icon;
       if (icon || icon === '') {
-          return (jsx(Icon, { className: className, iconVersion: getIconVersion(image), name: icon, ...iconProps }));
+          return (jsx(Icon, { className: className, imageClassName: imageClassName, iconVersion: getIconVersion(image), name: icon, ...iconProps }));
       }
       return (jsx(ImgAsPicture, { className: className, imageClassName: imageClassName, image: image }));
   });
@@ -472,7 +472,7 @@
 
   const Headline = JSX(({ bgColorHeadline = 'transparent', className = '', title, description, image, align = 'left', }) => {
       const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
-      return (jsxs("section", { className: `px-4 py-6 ${STYLE_MAPS.background} ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx("p", { className: `font-normal text-m-md ${STYLE_MAPS.description} ${ALIGN_TEXT[align]} ${title ? 'mt-2.5' : ''}`, children: description })) : null, image?.src && (jsx("div", { className: "mt-5 mx-auto flex justify-center", children: jsx(Img, { image: image }) }))] }));
+      return (jsxs("section", { className: `px-4 py-6 flex flex-col gap-2.5 ${STYLE_MAPS.background} ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`, title: title })) : null, description ? (jsx("p", { className: `font-normal text-m-md ${STYLE_MAPS.description} ${ALIGN_TEXT[align]}            `, children: description })) : null, image?.src && (jsx("div", { className: "mt-2.5 mx-auto flex justify-center", children: jsx(Img, { image: image }) }))] }));
   });
 
   // column-gap between children of SwipeListControl container
@@ -502,8 +502,9 @@
       return showDots && children?.length ? (jsx("div", { className: "flex gap-2 mx-auto mt-5 w-fit", children: children?.map((_, idx) => (jsx("div", { onClick: handleClick(idx), className: `${DOT_STYLES}`, style: getDotStyles(idx, activeIndex, indexFraction), "aria-hidden": true }, String(idx)))) })) : null;
   });
   const getDotStyles = (currentIdx, activeIndex, indexFraction) => {
-      if (currentIdx < activeIndex || currentIdx > activeIndex + 1)
+      if (currentIdx < activeIndex || currentIdx > activeIndex + 1) {
           return null;
+      }
       const leftIndexMod = 1 - indexFraction;
       const rightIndexMod = indexFraction;
       return currentIdx === activeIndex
@@ -542,9 +543,10 @@
     Returns object with index equal -1 and fraction equal 0 if scrollLeft is outside given scrollPoints
    */
   const getIndexParts = (scrollLeft, scrollPoints) => {
-      const index = scrollPoints.findIndex(([start, end]) => start <= scrollLeft && scrollLeft < end);
-      if (index < 0)
+      const index = scrollPoints.findIndex(([pointStart, pointEnd]) => pointStart <= scrollLeft && scrollLeft < pointEnd);
+      if (index < 0) {
           return { index, fraction: 0 };
+      }
       const [start, end] = scrollPoints[index];
       const fraction = (scrollLeft - start) / (end - start);
       return { index, fraction };
@@ -590,10 +592,10 @@
           children,
       };
       const handleScroll = (e) => {
-          const { scrollLeft, clientWidth, childElementCount, scrollWidth, children } = e.currentTarget;
+          const { scrollLeft, clientWidth, childElementCount, scrollWidth, children: childrenCollection, } = e.currentTarget;
           // horizontal PADDING / 2 to compensate padding-margin combo of child container
           // without CSS calc function, as wrapper element gets bigger in the DOM, remaining same visually
-          const itemWidth = children[0].offsetWidth - padding / 2;
+          const itemWidth = childrenCollection[0].offsetWidth - padding / 2;
           const scrollPoints = getScrollPoints({
               gap,
               padding,
@@ -623,8 +625,9 @@
       return prefix + extension + size;
   };
   const getExtFromHref = (href) => {
-      if (!href)
+      if (!href) {
           return '';
+      }
       const index = href.lastIndexOf('.');
       return index !== -1 ? href.substring(index + 1) : '';
   };
@@ -632,19 +635,19 @@
   const LinkDocsListItem = JSX(({ className = '', doc, icon }) => (jsx(LinkDocsListItemBase, { className: `flex h-full box-border ${className}`, iconClassName: "mr-3 min-w-6 min-h-6", doc: doc, icon: icon })));
 
   const LinkDocsHorizontalList = JSX(({ context, hasBorder = true, documents, icon }) => {
-      return (jsx(SwipeListControl, { context: context, className: "text-m-sm text-primary-main", children: documents?.length
+      return (jsx(SwipeListControl, { context: context, className: "text-m-sm text-primary-main mt-5", children: documents?.length
               ? documents.map((doc, i) => (jsx(LinkDocsListItem, { className: hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : '', doc: doc, icon: icon }, String(i))))
               : null }));
   });
 
   const LinkDocsVerticalList = JSX(({ hasBorder = true, documents, icon }) => {
-      return (jsx("div", { className: `text-m-sm text-primary-main flex flex-col ${hasBorder ? 'gap-3.5' : 'gap-2'}`, role: "list", children: documents?.length
+      return (jsx("div", { className: `text-m-sm text-primary-main flex flex-col mt-5 ${hasBorder ? 'gap-3.5' : 'gap-2'}`, role: "list", children: documents?.length
               ? documents.map((doc, i) => (jsx("div", { role: "listitem", children: jsx(LinkDocsListItem, { className: hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : '', doc: doc, icon: icon }) }, String(i))))
               : null }));
   });
 
-  const LinkDocs = JSX(({ className = '', context, title, subtitle, icon = { icon: 'DocIconMonoColor' }, documents, orientation = 'vertical', hasBorder = true, }) => {
-      return (jsxs("section", { className: `font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`, children: [title ? (jsx(Heading, { headingType: "h2", className: `text-center ${subtitle ? 'mb-2' : 'mb-5'}`, title: title })) : null, subtitle ? (jsx("h3", { className: "mt-0 font-normal mb-5 text-center text-m-md", children: subtitle })) : null, orientation === 'vertical' ? (jsx(LinkDocsVerticalList, { hasBorder: hasBorder, documents: documents, icon: icon })) : (jsx(LinkDocsHorizontalList, { context: context, hasBorder: hasBorder, documents: documents, icon: icon }))] }));
+  const LinkDocs = JSX(({ className = '', context, title, description, icon = { icon: 'DocIconMonoColor' }, documents, orientation = 'vertical', hasBorder = true, }) => {
+      return (jsxs("section", { className: `font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`, children: [jsx(Headline, { className: `!p-0 ${description ? 'gap-2' : 'gap-5'}`, title: title, description: description, context: context, align: "center", headingType: "h3" }), orientation === 'vertical' ? (jsx(LinkDocsVerticalList, { hasBorder: hasBorder, documents: documents, icon: icon })) : (jsx(LinkDocsHorizontalList, { context: context, hasBorder: hasBorder, documents: documents, icon: icon }))] }));
   });
 
   const isURL = (href) => href?.includes('//');
@@ -752,11 +755,12 @@
   const ButtonSection = JSX(({ context, className = '', buttons }) => {
       const { handlerDecorator } = context;
       const router = context.useRouter();
-      return buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => renderButton$2(useLink({ router, handlerDecorator }, button), index)) })) : null;
+      return buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => renderButton$3(useLink({ router, handlerDecorator }, button), index)) })) : null;
   });
-  function renderButton$2({ icon, ...button }, i) {
-      if (!button?.text)
+  function renderButton$3({ icon, ...button }, i) {
+      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)));
   }
 
@@ -832,7 +836,7 @@
   }
 
   const ProductBlockInner = JSX(({ className = '', context, title, headingType = 'h2', description, benefits, benefitsVersion = 'normal', buttons, image, items, version = 'primary', isDotted = true, label, }) => {
-      return (jsxs("div", { className: `w-full ${className}`, children: [jsxs("div", { children: [label ? renderLabel(label, version) : null, jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-5 gap-2.5" })) : null, children: [description ? (jsx(Description, { className: "mt-3 text-m-md", description: description })) : null, benefits?.filter((items) => items.label)?.length ? (jsx("div", { className: "mt-3", children: benefits.map((benefit, i) => renderBenefit({ benefit, version, benefitsVersion }, i)) })) : null, items?.length ? (jsx(List, { className: "mt-3 text-m-md", items: items, version: version, isDotted: isDotted })) : null] })] }), renderImage$1(image)] }));
+      return (jsxs("div", { className: `w-full ${className}`, children: [jsxs("div", { children: [label ? renderLabel(label, version) : null, jsxs(BaseTile, { context: context, title: title ? (jsx(Heading, { headingType: headingType, title: title, className: "whitespace-pre-wrap max-w-[600px]" })) : null, buttons: buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-5 gap-2.5" })) : null, children: [description ? (jsx(Description, { className: "mt-3 text-m-md", description: description })) : null, benefits?.filter((_) => _.label)?.length ? (jsx("div", { className: "mt-3", children: benefits.map((benefit, i) => renderBenefit({ benefit, version, benefitsVersion }, i)) })) : null, items?.length ? (jsx(List, { className: "mt-3 text-m-md", items: items, version: version, isDotted: isDotted })) : null] })] }), renderImage$1(image)] }));
   });
   function renderImage$1(image) {
       return image?.src ? (jsx(Img, { imageClassName: "mt-5 mx-auto block", image: { className: 'block', ...image } })) : null;
@@ -895,15 +899,15 @@
   }
   function renderCard(card, key) {
       return (jsxs("div", { className: `h-full justify-between box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
-      ${blockStyle[card.version ?? 'primary']}`, children: [jsxs("div", { children: [card.image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-3.5", image: card.image }) })) : null, card.title ? jsx("h3", { className: `font-medium text-m-title-xs m-0`, children: card.title }) : null, card.description ? renderDescription(card) : null, card.items?.length ? renderItems(card.items, card.version, card.isDotted) : null] }), card?.button?.text ? renderButton$1(card.button) : null] }, key));
+      ${blockStyle[card.version ?? 'primary']}`, children: [jsxs("div", { children: [card.image?.src ? (jsx("div", { className: "flex justify-center", children: jsx(Img, { className: "mb-3.5", image: card.image }) })) : null, card.title ? jsx("h3", { className: `font-medium text-m-title-xs m-0`, children: card.title }) : null, card.description ? renderDescription(card) : null, card.items?.length ? renderItems(card.items, card.isDotted, card.version) : null] }), card?.button?.text ? renderButton$2(card.button) : null] }, key));
   }
-  function renderButton$1(button) {
+  function renderButton$2(button) {
       return (jsx(Button, { className: "mt-3", appendLeft: button?.icon && jsx(Img, { image: button?.icon, width: "24px", height: "24px", asSVG: true }), ...button }));
   }
   function renderDescription(card) {
       return (jsx("div", { className: `text-secondary-text mt-1 text-m-sm ${card.version === 'secondary' ? 'text-white opacity-80' : ''}`, children: card.description }));
   }
-  function renderItems(items, version = 'primary', isDotted) {
+  function renderItems(items, isDotted, version = 'primary') {
       return (jsx("section", { className: "mt-3", children: items.map((item, i) => (jsxs("div", { children: [isDotted ? jsx("div", { className: getListStyle(version) }) : null, jsx("span", { className: "text-m-md font-medium", children: item.title }), jsx("span", { className: `text-m-sm pl-2 ${version === 'primary' ? 'text-secondary-text' : ''}`, children: item.text })] }, String(i)))) }));
   }
 
@@ -980,7 +984,9 @@
   const GRADIENT = 'bg-gradient-to-r from-main-gradient-start to-main-gradient-end';
   const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
 
-  const HeaderCell = JSX(({ icon, image, title, subtitle, isFillGradient }) => (jsxs("div", { role: "columnheader", scope: "col", children: [icon ? (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })) : null, image?.src && (jsx("div", { className: "mb-3.5", children: jsx(Img, { image: image }) })), title ? (jsx(Heading, { headingType: "h4", className: `${isFillGradient ? 'text-white' : ''}`, title: title })) : null, subtitle ? (jsx("div", { className: `text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`, children: subtitle })) : null] })));
+  const headingStyle = (isFillGradient = false) => (isFillGradient ? 'text-white' : '');
+  const subtitleStyle = (isFillGradient = false) => `text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`;
+  const HeaderCell = JSX(({ icon, image, title, subtitle, isFillGradient }) => (jsxs("div", { role: "columnheader", scope: "col", children: [icon ? (jsx(Img, { className: "h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4", image: icon, width: "63", height: "63" })) : null, image?.src && (jsx("div", { className: "mb-3.5", children: jsx(Img, { image: image }) })), title ? (jsx(Heading, { headingType: "h4", className: headingStyle(isFillGradient), title: title })) : null, subtitle ? jsx("div", { className: subtitleStyle(isFillGradient), children: subtitle }) : null] })));
 
   const TableCell = JSX(({ cell, rowHeader, isFillGradient = false }) => {
       const cellWrapperClasses = `box-border flex flex-col`;
@@ -995,9 +1001,9 @@
       const buttonVersion = isFillGradient ? 'secondary' : 'primary';
       return (jsxs("div", { className: `border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`, role: "row", children: [jsx(HeaderCell, { ...header, isFillGradient: isFillGradient }), columnDataView?.length
                   ? columnDataView.map(({ rowHeader, cell }, i) => (jsx(TableCell, { cell: cell, rowHeader: rowHeader, isFillGradient: isFillGradient }, String(i))))
-                  : null, showRow && renderButton({ header, buttonVersion }), renderToggleButton({ onToggleColumn, isFillGradient, showRow })] }));
+                  : null, showRow && renderButton$1({ header, buttonVersion }), renderToggleButton({ onToggleColumn, isFillGradient, showRow })] }));
   });
-  const renderButton = ({ header, buttonVersion }) => (jsx(Button, { href: header.link.href, target: header.link.target, version: buttonVersion, className: "font-medium text-m-sm mt-4 py-[11px]", children: header.link.text }));
+  const renderButton$1 = ({ header, buttonVersion }) => (jsx(Button, { href: header.link.href, target: header.link.target, version: buttonVersion, className: "font-medium text-m-sm mt-4 py-[11px]", children: header.link.text }));
   const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow }) => (jsx("div", { className: "mt-5", role: "cell", children: jsx("a", { role: "link", onClick: onToggleColumn, className: `font-medium text-m-sm cursor-pointer ${isFillGradient ? 'text-white/80' : 'text-primary-main'}`, children: !showRow ? 'Показать описание' : 'Скрыть' }) }));
 
   const ComparisonTable = JSX(({ className, context, title, rowHeaders, columns, visibleRowLength = 0, isColoredFirstColumn = false, orientation = 'vertical', }) => {
@@ -1053,18 +1059,67 @@
 
   function useExchangeRates(useAsyncData) {
       const { data } = useAsyncData(EXCHANGE_RATES_URL, fetchExchangeRates);
-      return data || {};
+      const result = data?.hits?.hits?.map((_) => _._source) || [];
+      return result.length ? getCurrencyListByRate(result) : result;
   }
   async function fetchExchangeRates() {
       try {
-          const response = await fetch(EXCHANGE_RATES_URL);
+          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 = '/api/v1/exchangerates.json';
+  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 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;
 
   const getColSpan = (className) => {
       const colSpanPrefix = 'col-span-';
@@ -1085,7 +1140,17 @@
       }
   }
 
-  const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
+  var Currency;
+  (function (Currency) {
+      Currency["RUB"] = "RUB";
+      Currency["EUR"] = "EUR";
+      Currency["USD"] = "USD";
+  })(Currency || (Currency = {}));
+
+  const currencyNumberFormat = new Intl.NumberFormat('ru', {
+      style: 'currency',
+      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';
@@ -1097,59 +1162,145 @@
       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 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 LOGO_PATHS = [
@@ -1212,47 +1363,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 }) => {
@@ -1310,7 +1452,7 @@
 
   const maxBy = (discriminator) => (list) => list.reduceRight((a, b) => (discriminator(a) > discriminator(b) ? a : b));
 
-  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)));
   };
 
@@ -1417,7 +1559,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 = {
@@ -1535,8 +1677,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}`);