@redneckz/wildless-cms-uni-blocks 0.3.56 → 0.3.58

package/bundle/bundle.umd.js

@@ -725,7 +725,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 })), benefits?.filter((items) => items.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map((benefit, i) => renderBenefit({ 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-auto", 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 })), benefits?.filter((items) => items.label)?.length ? (jsx("div", { className: "flex gap-6 mt-6", children: benefits.map((benefit, i) => renderBenefit({ 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]" })));
@@ -933,8 +933,8 @@
       LinkList,
   };
 
-  const renderBlocksList = ({ blocks, context, className, columns }) => blocks?.length ? blocks.map(renderBlock$1({ context, className, columns })) : null;
-  const renderBlock$1 = ({ 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 +1078,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$1(currentTabIndex, onTabClick)) }));
-  });
-  const renderTab$1 = (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 +1104,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 +1517,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;
@@ -1754,9 +2041,9 @@
 
   const NavigatorTabs = JSX(({ className = '', navigatorTabs, context, anchor = null }) => {
       const href = globalThis.location?.href; // TODO: remove globalThis, use href from router
-      return (jsx("section", { className: `sticky top-0 z-20 box-border flex gap-x-1 h-14 ${className}`, id: anchor, children: navigatorTabs ? navigatorTabs.map(renderTab(context, href)) : null }));
+      return (jsx("section", { className: `sticky top-0 z-20 box-border flex gap-x-1 h-14 ${className}`, id: anchor, children: navigatorTabs ? navigatorTabs.map(renderTab$1(context, href)) : null }));
   });
-  const renderTab = (context, href) => (tab, i) => {
+  const renderTab$1 = (context, href) => (tab, i) => {
       const { useRouter, handlerDecorator } = context;
       const router = useRouter();
       const hash = getHash(href);
@@ -1814,34 +2101,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,30 +2109,29 @@
       primary: 'bg-white text-primary-text',
       secondary: 'bg-primary-main text-white',
   };
-  const ProductGalleryGreen = JSX(({ className = '', context, slides = [], version = 'primary', duration = 0, 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,
                       onClick: () => setActiveSlideIndex(i),
                       version,
-                      duration,
                   })) })] }));
   });
   function renderProductBlock(block, i, context) {
       const { version } = block;
       const additionalClass = version ? productBlockStyleMap[version].title : '';
-      return (jsx("section", { className: "box-border relative flex grow-0 shrink-0 basis-full", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { className: `pl-[50px] pr-2 z-[1] ${additionalClass}`, context: context, textBlockClassName: "mb-[154px]", ...block }) }) }, String(i)));
+      return (jsx("section", { className: "box-border relative flex grow-0 shrink-0 basis-full", role: "listitem", children: jsx("div", { className: "flex grow", children: jsx(ProductBlockInner, { className: `pl-[50px] z-[1] ${additionalClass}`, context: context, textBlockClassName: "mb-[154px]", ...block }) }) }, String(i)));
   }
-  function renderNavButton({ slide, i, activeSlideIndex, onClick, version, duration }) {
+  function renderNavButton({ slide, i, activeSlideIndex, onClick, version }) {
       const isActiveBtn = i === activeSlideIndex;
       const btnClassName = isActiveBtn
-          ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] max-w-[354px] p-0 border-none'
-          : `min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300
+          ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] p-0 border-none'
+          : `min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10
       ${productSlideStyleMap[version]}`;
       const btnTitleClassName = isActiveBtn
           ? 'text-primary-text text-title-2xs'
@@ -1881,11 +2139,10 @@
       const btnDescClassName = isActiveBtn
           ? 'text-secondary-text text-m-title-xs mt-2.5'
           : `text-m-md mt-1.5 ${productBlockStyleMap[version].text}`;
-      const additionalBorder = version === 'secondary' ? 'border-white/50' : '';
-      const progressBarClassName = isActiveBtn ? 'animate-slide' : '';
-      return (jsxs("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `box-border font-sans group relative overflow-hidden border-[1px] cursor-pointer text-left mx-1 grow basis-0 backdrop-blur-sm
-      ${btnClassName} ${additionalBorder}
-      `, children: [jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `font-medium ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text ${btnDescClassName}`, children: slide.description })] }), 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 additionalBorder = version === 'secondary' ? 'border-white/50' : 'border-black/50';
+      return (jsx("button", { type: "button", onClick: onClick, "aria-label": slide?.title, className: `box-border font-sans relative overflow-hidden border-[1px] border-white/50 cursor-pointer text-left mx-1 grow basis-0
+        ${btnClassName} ${additionalBorder}
+      `, children: jsxs("div", { className: "border-0 px-6", children: [jsx("div", { className: `font-medium ${btnTitleClassName}`, children: slide?.title }), jsx("div", { className: `text-secondary-text ${btnDescClassName}`, children: slide.description })] }) }, String(i)));
   }
 
   const promoTileStyleMap = {
@@ -1990,11 +2247,64 @@
       data: colData.map((col) => col?.[i] || [{}]),
   }));
 
+  const GroupBlockTabs = JSX((props) => {
+      const { tabs, currentTag, onTabClick, className = '', isShowCounter = true } = props;
+      return (jsx("div", { className: `mb-2 box-border flex gap-x-1 h-12 ${className}`, role: "tablist", children: tabs?.map(renderTab(onTabClick, isShowCounter, currentTag)) }));
+  });
+  const badgeStyle = 'w-[22px] h-[22px] rounded-full text-m-sm';
+  const renderTab = (onTabClick, isShowCounter, currentTag) => (tab, i) => {
+      const isActive = currentTag === tab.tag;
+      const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
+      const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
+      const counterBlockStyle = `${badgeStyle} 
+      ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-text/10 text-secondary-text'}`;
+      return (jsx("div", { className: `flex h-full w-full 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)));
+  };
+
+  function style2className(style) {
+      return style ? style.filter(Boolean).join(' ') : '';
+  }
+
+  const EmbeddableGroupBlocks = {
+      ProductBlock,
+      ProductTile,
+  };
+
+  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 }));
+  });
+  const renderBlock$1 = (context) => (block, i) => {
+      const type = block?.blockType;
+      if (!type || !(type in EmbeddableGroupBlocks)) {
+          return null;
+      }
+      const classNameBlock = style2className(block?.style);
+      const EmbeddedBlock = EmbeddableGroupBlocks[type];
+      return (jsx(EmbeddedBlock, { context: context, ...block, className: classNameBlock }, `block_${i}`));
+  };
+
+  const filterBlocksByTag = (blocks, tag) => {
+      return tag ? blocks.filter((block) => block?.tags?.includes(tag)) : blocks;
+  };
+
+  const GroupBlock = JSX(({ className = '', tabs, context, anchor = null, groupBlocks = [] }) => {
+      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.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("div", { className: "list-none", children: jsx(GroupBlocksItem, { context: context, groupBlocks: filteredBlocks }) })) : null] }));
+  });
+
   const Blocks = {
       Accordion,
       BenefitsBlock,
       Bonus,
       ComparisonTable,
+      Calculator,
       CreditCalculator,
       ExchangeRateTile,
       Footer,
@@ -2009,7 +2319,6 @@
       PictureText,
       ProductBlock,
       ProductGallery,
-      ProductGalleryGreen,
       ProductTile,
       PromoTile,
       OtherProducts,
@@ -2020,6 +2329,7 @@
       Tile,
       Navigation,
       Placeholder,
+      GroupBlock,
   };
 
   const changeHashOnScroll = (router, blocks) => {
@@ -2035,8 +2345,6 @@
       });
   };
 
-  const style2className = (style) => style ? style.join(' ') : '';
-
   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 = {