@redneckz/wildless-cms-uni-blocks 0.3.57 → 0.3.59

package/bundle/bundle.umd.js

@@ -598,8 +598,8 @@
   }
 
   const ButtonInner = JSX((props) => {
-      const { text, aboveText, appendLeft } = props;
-      return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-m-2xs font-light text-left", children: aboveText }), jsx("div", { className: "text-button text-left", children: text })] })) : null] }));
+      const { text, aboveText, appendLeft, appendRight } = props;
+      return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-m-2xs font-light text-left", children: aboveText }), jsx("div", { className: "text-button text-left", children: text })] })) : null, appendRight ? appendRight : null] }));
   });
   const getButtonStyle = (props) => {
       const { version, aboveText, rounded } = props;
@@ -627,8 +627,8 @@
   };
   const buttonStyle = 'text-center font-sans select-none';
   const Button = JSX((props) => {
-      const { text, aboveText, appendLeft, children, disabled, rounded, ...rest } = props;
-      const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, rounded: rounded }));
+      const { text, aboveText, appendLeft, appendRight, children, disabled, rounded, ...rest } = props;
+      const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, appendRight: appendRight, rounded: rounded }));
       return disabled ? (jsx(DisabledButton, { rounded: rounded, ...rest, children: buttonInner })) : (jsx(RegularButton, { rounded: rounded, ...rest, children: buttonInner }));
   });
   const RegularButton = JSX(({ className = '', ariaLabel, version = 'none', rounded, href, target, children, onClick, ...rest }) => {
@@ -641,7 +641,7 @@
   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$2(useLink({ router, handlerDecorator }, button), index)) })) : null;
   });
   function renderButton$2({ icon, ...button }, i) {
       if (!button?.text)
@@ -823,7 +823,7 @@
   const Tile = JSX((props) => {
       const { context, title, headingType = 'h3', description, items, children, buttons, image, 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' : ''}` })), 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: "max-w-[600px] text-title-new-sm font-light", description: description })), children, renderList$1(items, version)] }) }));
+              ${version === 'primary' ? 'text-primary-text' : ''}` })), 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 })), children, renderList$1(items, version)] }) }));
   });
   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;
@@ -833,9 +833,14 @@
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
   };
-  const ProductTile = JSX(({ context, className = '', title, headingType = 'h3', description, 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]` })), 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, 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] })] }) }));
+  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]` })), 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) {
+      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) {
       return (jsx("div", { className: `text-xl font-medium ${i ? 'mt-2.5' : ''}`, children: benefit.label }, String(i)));
   }
@@ -846,6 +851,13 @@
       };
       return (jsx("div", { className: `text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`, children: benefit.description }, String(i)));
   }
+  function renderAdditionalDescription(additionalDescription, version = 'primary') {
+      const descStyleMap = {
+          primary: 'text-secondary-text',
+          secondary: 'text-white',
+      };
+      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'
@@ -933,8 +945,8 @@
       LinkList,
   };
 
-  const renderBlocksList = ({ blocks, context, className, columns }) => blocks?.length ? blocks.map(renderBlock$2({ context, className, columns })) : null;
-  const renderBlock$2 = ({ context, columns, className }) => (block, i) => {
+  const renderBlocksList = ({ blocks, context, className, columns }) => blocks?.length ? blocks.map(renderBlock$3({ context, className, columns })) : null;
+  const renderBlock$3 = ({ context, columns, className }) => (block, i) => {
       const type = block?.blockListType;
       if (!type || !(type in EmbeddableBlocks)) {
           return null;
@@ -1078,30 +1090,6 @@
       return (jsx("div", { className: "pr-[50px]", children: jsxs("div", { className: "flex w-full", children: [jsx("div", { className: FIRST_CELL_CLASSES$1 }), jsx("button", { onClick: onClick, className: "mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main", children: jsx("div", { className: "font-sans font-medium text-xs py-[11px]", children: !isShowAllRow ? 'Показать все параметры' : 'Скрыть' }) })] }) }));
   };
 
-  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)));
-  };
-  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 }) }));
-
-  function getTileHeadingType(className = '') {
-      const colSpan = getColSpan(className);
-      if (colSpan <= 4) {
-          return 'h4';
-      }
-      else if (colSpan <= 8) {
-          return 'h3';
-      }
-      else {
-          return 'h2';
-      }
-  }
-
   function useCreditCalculatorData(useAsyncData, directoryName) {
       const { data } = useAsyncData(creditCalculatorUrl(directoryName), fetchCreditCalculatorData);
       return data || {};
@@ -1128,10 +1116,345 @@
   ];
   const Checkbox = JSX(({ text, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center cursor-pointer relative", children: [jsx("input", { className: `peer appearance-none w-5 h-5 border-solid border ${checked ? 'border-black' : 'border-main-stroke'} rounded checked:bg-primary-main checked:border-primary-main m-0`, type: "checkbox", onChange: (e) => {
                       onChange(e.target.checked);
-                  }, checked: checked }), jsx(SVG, { paths: CHECK_PATHS, className: "hidden absolute left-1 ml-px peer-checked:block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" }), text ? (jsx("span", { className: "font-sans ml-3 text-sm leading-5 cursor-pointer", children: text })) : null] }) })));
+                  }, checked: checked }), jsx(SVG, { paths: CHECK_PATHS, className: "hidden absolute left-1 ml-px peer-checked:block", width: "11", height: "9", fill: "white", viewBox: "0 0 11 9" }), text ? jsx("span", { className: "font-sans ml-3 text-m-base cursor-pointer", children: text }) : null] }) })));
+
+  const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
+
+  const CalculatorValueBlock = JSX(({ title, value, postfix = '', prefix, className = '' }) => {
+      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 InputRange = JSX(({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
+      const handleChange = (value) => {
+          if (!onChange)
+              return;
+          const sanitizedValue = Number(value.replace(/\D/g, ''));
+          onChange(sanitizedValue);
+      };
+      const inputStyle = {
+          backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
+      };
+      const handleBlur = () => {
+          if (!onChange)
+              return;
+          if (value < min)
+              onChange(min);
+          if (value > max)
+              onChange(max);
+      };
+      return (jsxs("div", { className: className, children: [jsxs("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 { 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 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 }));
+  }
+
+  const DEFAULT_RATE$1 = 10.2;
+  const getCreditRate$1 = (params) => {
+      const { calculatorParams, isInsurance } = params;
+      if (!calculatorParams)
+          return DEFAULT_RATE$1;
+      return isInsurance
+          ? calculatorParams?.rateWithInsurance || DEFAULT_RATE$1
+          : calculatorParams?.rateWithoutInsurance || DEFAULT_RATE$1;
+  };
+
+  const getCalculatorParams$1 = (params) => {
+      const { tableRows, isAnnuity = false } = params;
+      if (!tableRows)
+          return {};
+      const calculatorParams = tableRows.find((row) => row.isAnnuity === isAnnuity);
+      return calculatorParams || {};
+  };
+
+  const getDefaultSum$1 = (calculatorParams) => calculatorParams.maxSum && calculatorParams.minSum
+      ? (calculatorParams.maxSum - calculatorParams.minSum) / 2
+      : DEFAULT_SUM$1;
+
+  const getDefaultMonths$1 = (calculatorParams) => calculatorParams.maxMonths && calculatorParams.minMonths
+      ? Math.round((calculatorParams.maxMonths - calculatorParams.minMonths) / 2)
+      : DEFAULT_MONTHS$1;
 
   const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 
+  const getMonthlyPayment$1 = (params) => {
+      const { calculatorParams, paymentType, rate, sum, months } = params;
+      if (!calculatorParams)
+          return 0;
+      const finalSum = clamp(sum, calculatorParams.minSum || DEFAULT_MIN_SUM$1, calculatorParams.maxSum || DEFAULT_MAX_SUM$1);
+      if (paymentType === 'annuity') {
+          const annuityCoef = Number(rate) / (MONTHS_IN_YEAR$1 * 100);
+          return finalSum * (annuityCoef + annuityCoef / (Math.pow(1 + annuityCoef, months) - 1));
+      }
+      else {
+          return finalSum / months + finalSum * (Number(rate) / 12);
+      }
+  };
+
+  const STEP_MONTHS$1 = 1;
+  function renderMonthsInput$1(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 }));
+  }
+
+  function renderButtonSection(context, buttons) {
+      return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-7 gap-2" })) : null;
+  }
+
+  function renderRate({ rate, title, sup, className = '' }) {
+      const rateFormat = String(rate).replace('.', ',');
+      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 [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({
+          calculatorParams,
+          paymentType: DEFAULT_PAYMENT_TYPE$1,
+          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({
+                          title: 'Сумма кредита, ₽',
+                          minMonths,
+                          maxMonths,
+                          monthsValue,
+                          defaultMonths,
+                          setMonthsValue,
+                      }), jsxs("div", { className: "pt-7", children: [jsx(Checkbox, { text: "\u041F\u043E\u043B\u0443\u0447\u0430\u044E \u0437\u0430\u0440\u043F\u043B\u0430\u0442\u0443 \u043D\u0430 \u0441\u0447\u0451\u0442 \u0432 \u0420\u043E\u0441\u0441\u0435\u043B\u044C\u0445\u043E\u0437\u0431\u0430\u043D\u043A\u0435", checked: isAnnuity, onChange: toggleIsAnnuity }), jsx(Checkbox, { className: "mt-3", text: "\u0420\u0430\u0431\u043E\u0442\u0430\u044E \u0432 \u0431\u044E\u0434\u0436\u0435\u0442\u043D\u043E\u0439 \u043E\u0440\u0433\u0430\u043D\u0438\u0437\u0430\u0446\u0438\u0438", checked: isBudgetary, onChange: toggleIsBudgetary }), jsx(Checkbox, { className: "mt-3", 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: isInsurance, onChange: toggleIsInsurance })] })] }), jsx("div", { children: rate
+                      ? renderRate({ rate: rate, title: 'Ставка', sup: '%', className: 'tracking-[-25px]' })
+                      : 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;
+  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 STEP_MONEY$1 = 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;
+      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 }));
+  }
+
+  function renderProposalMortgage({ credit, period, taxRefund }) {
+      return (jsxs("div", { children: [jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u043A\u0440\u0435\u0434\u0438\u0442\u0430", value: credit, postfix: "\u20BD" }), jsx(CalculatorValueBlock, { title: "\u0421\u0440\u043E\u043A", value: period, postfix: "\u043B\u0435\u0442" }), jsx(CalculatorValueBlock, { title: "\u041D\u0430\u043B\u043E\u0433\u043E\u0432\u044B\u0439 \u0432\u044B\u0447\u0435\u0442", value: taxRefund, postfix: "\u20BD" })] }));
+  }
+
+  const MortgageCalculatorForm = JSX(({ context, className = '', buttons }) => {
+      const [moneyValue, setMoneyValue] = context.useState(undefined);
+      const [monthsValue, setMonthsValue] = context.useState(undefined);
+      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 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({
+                          calculatorParams,
+                          moneyValue,
+                          defaultSum,
+                          setMoneyValue,
+                      }), renderMonthsInput$1({
+                          title: 'Срок ипотеки, месяцев',
+                          minMonths,
+                          maxMonths,
+                          monthsValue,
+                          defaultMonths,
+                          setMonthsValue,
+                      }), jsxs("div", { className: "mt-7", children: [jsx(Checkbox, { text: "\u0421\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u043D\u0438\u0435 \u0436\u0438\u0437\u043D\u0438", checked: isInsurance, onChange: toggleIsInsurance }), jsx(Checkbox, { className: "mt-4", text: "\u0421\u0442\u0440\u0430\u0445\u043E\u0432\u0430\u043D\u0438\u0435 \u0436\u0438\u0437\u043D\u0438, \u0437\u043B\u043E\u0440\u043E\u0432\u044C\u044F \u0438 \u0432\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0439 \u0443\u0442\u0440\u0430\u0442\u044B \u0442\u0440\u0443\u0434\u043E\u0441\u043F\u043E\u0441\u043E\u0431\u043D\u043E\u0441\u0442\u0438", checked: isFullInsurance, onChange: toggleIsFullInsurance })] })] }), jsxs("div", { children: [jsx("div", { children: rate
+                              ? renderRate({ rate: rate, title: 'Ставка', sup: '%', className: 'tracking-[-25px]' })
+                              : null }), jsx(CalculatorValueBlock, { title: "\u0415\u0436\u0435\u043C\u0435\u0441\u044F\u0447\u043D\u044B\u0439 \u043F\u043B\u0430\u0442\u0435\u0436", value: monthlyPayment, postfix: "\u20BD" })] }), jsxs("div", { children: [jsx("div", { className: "w-[351px]", children: renderProposalMortgage(proposalMortgageValue) }), renderButtonSection(context, buttons)] })] }));
+  });
+
+  const DepositCalculatorForm = JSX(({ context, className = '', buttons, rate, minSum, maxSum, minMonths, maxMonths }) => {
+      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 income = 948841;
+      const finallySum = 1218841;
+      return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput$1({
+                          title: 'Сумма вклада, ₽',
+                          calculatorParams: { minSum, maxSum },
+                          moneyValue,
+                          defaultSum,
+                          setMoneyValue,
+                      }), renderMonthsInput$1({
+                          title: 'Срок вклада, месяцев',
+                          minMonths: minMonths || DEFAULT_MIN_MONTHS$1,
+                          maxMonths: maxMonths || DEFAULT_MAX_MONTHS$1,
+                          monthsValue,
+                          defaultMonths,
+                          setMonthsValue,
+                      })] }), jsx("div", { children: rate
+                      ? renderRate({ rate: rate, title: 'Ставка', sup: '%', className: 'tracking-[-25px]' })
+                      : null }), jsxs("div", { className: "w-[351px]", children: [(jsx(CalculatorValueBlock, { title: "\u0414\u043E\u0445\u043E\u0434 \u043F\u043E \u0432\u043A\u043B\u0430\u0434\u0443", value: income, postfix: "\u20BD", prefix: "+" })) , (jsx(CalculatorValueBlock, { title: "\u0421\u0443\u043C\u043C\u0430 \u0432 \u043A\u043E\u043D\u0446\u0435 \u0441\u0440\u043E\u043A\u0430", value: finallySum, postfix: "\u20BD" })) , renderButtonSection(context, buttons)] })] }));
+  });
+
+  const BonusCalculatorForm = JSX(({ context, className = '', buttons, bonus, minSumTrip, maxSumTrip, minSumOther, maxSumOther, }) => {
+      const [bonusTripValue, setBonusTripValue] = context.useState(undefined);
+      const [bonusOtherValue, setBonusOtherValue] = context.useState(undefined);
+      const calculatorTripParams = { minSum: minSumTrip, maxSum: maxSumTrip };
+      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({
+                          title: 'Сумма покупок в категории путешествия, ₽',
+                          calculatorParams: calculatorTripParams,
+                          moneyValue: bonusTripValue,
+                          defaultSum: getDefaultSum$1(calculatorTripParams),
+                          setMoneyValue: setBonusTripValue,
+                          isShowItems: false,
+                      }), renderWantedSumInput$1({
+                          className: 'mt-6',
+                          title: 'Сумма покупок в остальных категориях, ₽',
+                          calculatorParams: calculatorOtherParams,
+                          moneyValue: bonusOtherValue,
+                          defaultSum: getDefaultSum$1(calculatorOtherParams),
+                          setMoneyValue: setBonusOtherValue,
+                          isShowItems: false,
+                      })] }), jsx("div", { children: bonusOrDef
+                      ? renderRate({
+                          rate: bonusOrDef,
+                          title: 'Баллов за месяц',
+                          className: 'tracking-[-14px]',
+                      })
+                      : null }), jsxs("div", { className: "w-[240px]", children: [jsx(CalculatorValueBlock, { title: "\u0411\u0430\u043B\u043B\u043E\u0432 \u0437\u0430 \u0433\u043E\u0434", value: incomeBonus }) , renderButtonSection(context, buttons)] })] }));
+  });
+
+  const EmbeddableCalcBlocks = {
+      CreditCalculatorForm: CreditCalculatorForm$1,
+      MortgageCalculatorForm,
+      DepositCalculatorForm,
+      BonusCalculatorForm,
+  };
+
+  const renderCalculatorList = ({ blockCalcTabs, context, className, }) => {
+      return blockCalcTabs?.length ? blockCalcTabs.map(renderBlock$2({ context, className })) : null;
+  };
+  const renderBlock$2 = ({ context, className }) => (blockCalcTabs, i) => {
+      const type = blockCalcTabs?.calcType;
+      if (!type || !(type in EmbeddableCalcBlocks)) {
+          return null;
+      }
+      const EmbeddedBlock = EmbeddableCalcBlocks[type];
+      return (jsx("section", { className: `box-border relative flex grow-0 shrink-0 basis-full ${className}`, role: "listitem", children: jsx("div", { className: `box-border p-9 w-full`, children: jsx(EmbeddedBlock, { context: context, ...blockCalcTabs, className: "!p-0 flex justify-between" }) }) }, `${String(i)}`));
+  };
+
+  const arrowBtnStyle = '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 || {});
+      const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+      const [tabsShift, setTabsShift] = context.useState(0);
+      const handleNextClick = () => setTabsShift(tabsShift + 1);
+      const handlePrevClick = () => setTabsShift(tabsShift - 1);
+      const isGalleryScrollAvailable = calcTabs?.length > 3;
+      const showNextButton = isGalleryScrollAvailable && calcTabs?.length > tabsShift + 3;
+      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} 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} 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: renderCalculatorList({
+                      context,
+                      className,
+                      blockCalcTabs,
+                  }) })] }));
+  });
+  function renderNavButton$1({ tab, i, activeSlideIndex, onClick }) {
+      const isActiveBtn = i === activeSlideIndex;
+      const btnClassName = isActiveBtn
+          ? 'h-[88px] w-[387px] min-w-[387px] p-5 border-none bg-primary-main text-white'
+          : `h-[77px] w-[322px] min-w-[322px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
+      const btnTitleClassName = isActiveBtn ? 'text-md-new mb-1.5' : `text-base mb-[3px]`;
+      const btnDescClassName = isActiveBtn ? 'text-base text-white' : `text-m-md`;
+      const iconClassName = isActiveBtn ? '' : `text-primary-main`;
+      return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: `box-border font-sans relative border-[1px] border-main-stroke cursor-pointer text-left border-b-0 flex
+      ${btnClassName}`, children: [jsx(Img, { className: `h-[24px] w-[24px] min-w-[24px] min-h-[24px] mr-4 ${iconClassName}`, image: { ...tab?.icon, iconVersion: isActiveBtn ? 'white' : 'normal' }, width: "24", height: "24", asSVG: true }), jsxs("div", { className: "border-0", children: [jsx("div", { className: `font-medium ${btnTitleClassName}`, children: tab?.title }), jsx("div", { className: `text-secondary-text ${btnDescClassName}`, children: tab.description })] })] }, String(i)));
+  }
+  function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex }) {
+      return (jsxs("div", { children: [jsx("div", { style: { transform: `translateX(-${tabsShift * 388}px)` }, className: "flex flex-col justify-end items-center h-[126px] pt-[38px] box-border duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap items-end gap-2", children: tabsNav.map((tab, i) => renderNavButton$1({
+                          tab,
+                          i,
+                          activeSlideIndex,
+                          onClick: () => setActiveSlideIndex(i),
+                      })) }) }), 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)));
+  };
+  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 }) }));
+
+  function getTileHeadingType(className = '') {
+      const colSpan = getColSpan(className);
+      if (colSpan <= 4) {
+          return 'h4';
+      }
+      else if (colSpan <= 8) {
+          return 'h3';
+      }
+      else {
+          return 'h2';
+      }
+  }
+
   const DEFAULT_MIN_SUM = 30000;
   const DEFAULT_MAX_SUM = 3000000;
   const DEFAULT_SUM = (DEFAULT_MAX_SUM - DEFAULT_MIN_SUM) / 2;
@@ -1206,30 +1529,6 @@
       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 addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
-
-  const InputRange = JSX(({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
-      const handleChange = (value) => {
-          if (!onChange)
-              return;
-          const sanitizedValue = Number(value.replace(/\D/g, ''));
-          onChange(sanitizedValue);
-      };
-      const inputStyle = {
-          backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
-      };
-      const handleBlur = () => {
-          if (!onChange)
-              return;
-          if (value < min)
-              onChange(min);
-          if (value > max)
-              onChange(max);
-      };
-      return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? (jsx("span", { className: "absolute text-xs text-secondary-text top-1 mt-0.5 pl-4 ml-0.5", children: title })) : null, jsx("input", { className: `m-0 font-sans text-sm w-full h-12 border border-solid border-main-stroke rounded-md
-                        outline-none p-0 pl-4 m-0 box-border text-primary-text ${title ? 'pt-4' : ''}`, value: addSpacesBetweenNumbers(value), onChange: (e) => handleChange(e.target.value), onBlur: handleBlur }), jsx("div", { className: "absolute inset-x-0 top-[35px] 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) => (jsxs("span", { className: "text-xs leading-[14px] text-secondary-text pl-4", children: [" ", item, " "] }, String(i)))) })] }));
-  });
-
   const STEP_MONTHS = 1;
   function renderMonthsInput(props) {
       const { minMonths, maxMonths, monthsValue, defaultMonths, setMonthsValue } = props;
@@ -1679,6 +1978,10 @@
       });
   };
 
+  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 router = context.useRouter();
@@ -1699,30 +2002,29 @@
                   subMenuIsShow,
                   toggleSubMenu,
                   subItems,
+                  bgColor,
                   router,
                   handlerDecorator,
               })] }));
   });
   // TODO: add types
-  const renderDotsSubMenu = ({ subMenuIsShow, toggleSubMenu, subItems, 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(0)
-                  .map((_, i) => renderDot(i)) }), jsx("div", { className: `flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`, "aria-hidden": !subMenuIsShow, children: renderDotsSubMenuItems(subItems, router, handlerDecorator) })] }));
+  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 = (i) => (jsx("div", { className: "w-[3px] h-[3px] rounded bg-black mr-1" }, String(i)));
+  const renderDot = (bgColor, i) => (jsx("div", { className: `w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}` }, String(i)));
 
   const BORDER_COLORS = {
       'bg-white': 'bg-main-divider',
       transparent: 'bg-main-divider opacity-30',
   };
-  const Header = JSX(({ className = '', defaultLocation = 'Москва', bgColor = 'bg-white', context, topItems, anchor = null, }) => {
+  const Header = JSX(({ className = '', defaultLocation = 'Москва', showSubMenu = true, bgColor = 'bg-white', context, topItems, anchor = null, }) => {
       const router = context.useRouter();
       const sitemap = useSitemap(context.useAsyncData);
       const { handlerDecorator } = context;
       const mergedItems = mergeTopItems(sitemap.topItems, topItems);
       const activeTopItem = mergedItems.find(isTopItemActive(router));
       const topMenu = mergedItems.map((_, i) => (jsx(TopItem, { active: _ === activeTopItem, ...useLink({ router, handlerDecorator }, _), "aria-label": _.text, bgColor: bgColor }, String(i))));
-      return (jsx("header", { className: `pt-6 pb-8 px-20 ${bgColor} ${className}`, id: anchor, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor }), topMenu, jsx(HeaderSecondaryMenu, { context: context, className: "ml-auto", defaultLocation: defaultLocation, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-[1px] ${BORDER_COLORS[bgColor]}` }), jsx(HeaderSubMenu, { context: context, subItems: activeTopItem?.items, bgColor: bgColor })] }) }));
+      return (jsx("header", { className: `pt-6 pb-8 px-20 ${bgColor} ${className}`, id: anchor, children: jsxs("div", { className: "container", children: [jsxs("div", { className: "flex items-center", children: [jsx(Logo, { className: "mr-8", bgColor: bgColor }), topMenu, jsx(HeaderSecondaryMenu, { context: context, className: "ml-auto", defaultLocation: defaultLocation, bgColor: bgColor })] }), jsx("div", { className: `mt-6 h-[1px] ${BORDER_COLORS[bgColor]}` }), showSubMenu && activeTopItem?.items?.length ? (jsx(HeaderSubMenu, { context: context, subItems: activeTopItem.items, bgColor: bgColor })) : null] }) }));
   });
 
   const MobileAppTile = JSX(({ className = '', context, title = 'Мобильное приложение', qr, buttons = [], anchor = null, }) => {
@@ -1814,34 +2116,6 @@
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
   };
-  const ProductGalleryBlock = JSX(({ block, headingType, context, className = '' }) => {
-      const version = block?.version ?? 'primary';
-      return (jsx("section", { className: `flex grow-0 shrink-0 basis-full ${productGalleryStyleMap[version]} ${className}`, role: "listitem", children: jsx("div", { className: "p-10 flex grow", children: jsx(ProductBlockInner, { className: "pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem]", context: context, headingType: headingType || 'h2', ...block }) }) }));
-  });
-
-  const ProductGallery = JSX(({ className, context, duration = 0, slides = [], anchor = null }) => {
-      const galleryNav = slides.map((s) => s.nav);
-      const galleryBlocks = slides.map((s) => s.productBlock);
-      const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
-      return (jsxs("section", { className: `font-sans bg-white overflow-hidden w-100 ${className || ''}`, id: anchor, children: [jsx("div", { className: `flex duration-1000`, style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => (jsx(ProductGalleryBlock, { context: context, block: _ }, String(i)))) }), jsx("div", { className: "flex", children: galleryNav.map((slide, i) => renderNavButton$1({
-                      slide,
-                      i,
-                      activeSlideIndex,
-                      onClick: () => setActiveSlideIndex(i),
-                      duration,
-                  })) })] }));
-  });
-  function renderNavButton$1({ slide, i, activeSlideIndex, onClick, duration }) {
-      const isActiveBtn = i === activeSlideIndex;
-      const progressBarClassName = isActiveBtn ? 'animate-slide' : '';
-      const btnTitleClassName = isActiveBtn ? 'text-primary-text' : 'text-secondary-text';
-      return (jsxs("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `font-sans group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 pt-4 pb-[23px] grow basis-0`, children: [jsxs("div", { className: "border-0 border-r border-solid border-main-divider px-6", children: [jsx("div", { className: `text-sm font-medium pb-[3px] group-hover:text-primary-text ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: "text-xs text-secondary-text", children: slide.desc })] }), jsx("div", { className: `absolute bottom-0 left-0 w-full h-[3px] bg-primary-main -translate-x-full ${progressBarClassName}`, style: { animationDuration: `${duration}s`, animationFillMode: 'forwards' } })] }, String(i)));
-  }
-
-  const productGalleryGreenStyleMap = {
-      primary: 'bg-white text-primary-text',
-      secondary: 'bg-primary-main text-white',
-  };
   const productBlockStyleMap = {
       primary: { title: 'text-secondary-text', text: 'text-secondary-text' },
       secondary: { title: 'text-white', text: 'text-white/80' },
@@ -1850,12 +2124,12 @@
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
   };
-  const ProductGalleryGreen = JSX(({ className = '', context, slides = [], version = 'primary', anchor = null }) => {
+  const ProductGallery = JSX(({ className = '', context, slides = [], version = 'primary', anchor = null }) => {
       const galleryNav = slides.map((s) => s.nav);
       const galleryBlocks = slides.map((s) => s.productBlock);
       const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
       return (jsxs("section", { id: anchor, className: `box-border pt-[50px] overflow-hidden relative font-sans w-100 ${className}
-        ${productGalleryGreenStyleMap[version]}`, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border", children: galleryNav.map((slide, i) => renderNavButton({
+        ${productGalleryStyleMap[version]}`, children: [jsx("div", { className: "flex duration-1000 pb-14", style: { transform: `translateX(-${activeSlideIndex}00%)` }, role: "list", children: galleryBlocks.map((_, i) => renderProductBlock({ ..._, version }, i, context)) }), jsx("div", { className: "flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border", children: galleryNav.map((slide, i) => renderNavButton({
                       slide,
                       i,
                       activeSlideIndex,
@@ -2045,6 +2319,7 @@
       BenefitsBlock,
       Bonus,
       ComparisonTable,
+      Calculator,
       CreditCalculator,
       ExchangeRateTile,
       Footer,
@@ -2059,7 +2334,6 @@
       PictureText,
       ProductBlock,
       ProductGallery,
-      ProductGalleryGreen,
       ProductTile,
       PromoTile,
       OtherProducts,