@redneckz/wildless-cms-uni-blocks 0.4.6 → 0.4.8

package/bundle/bundle.umd.js

@@ -633,6 +633,11 @@
         return (jsxs(BlockWrapper, { className: `font-sans text-primary-text p-[50px] bg-white ${className}`, context: context, ...rest, children: [jsx(Headline, { className: "!p-0", title: title, description: description, context: context, align: align, headlineVersion: "M", as: "h2" }), jsx(LinkDocsList, { className: `mt-8 ${linkColumnsModeStyleMap[columnsMode]}`, columnsMode: columnsMode, documents: documents, icon: icon })] }));
     });
 
+    const VersionStyleMap = {
+        primary: 'bg-white text-primary-text',
+        secondary: 'bg-primary-main text-white',
+    };
+
     const titleStyleMap = {
         primary: 'text-primary-text',
         secondary: 'text-white',
@@ -644,7 +649,8 @@
     const BenefitItem = JSX((props) => {
         const { className = '', icon, label, description, version = 'primary', benefitsVersion = 'normal', } = props;
         const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
-        return (jsxs("div", { className: `flex items-start gap-5 ${className}`, children: [icon ? (jsx(Img, { className: renderBenefitIconBgStyle(version, benefitsVersion), image: { ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }, asSVG: true })) : null, jsxs("div", { className: "gap-0.5", children: [label ? jsx("div", { className: `text-h6 ${titleStyleMap[version]}`, children: label }) : null, description ? (jsx("div", { className: `text-m-light ${descStyleMap[version]}`, children: description })) : null] })] }));
+        const listItemAlign = description ? 'items-start' : 'items-center';
+        return (jsxs("div", { className: `flex gap-5 ${listItemAlign} ${className}`, children: [icon ? (jsx("div", { className: renderBenefitIconBgStyle(version, benefitsVersion), children: jsx(Img, { className: "w-[24px] h-[24px]", image: { ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }, asSVG: true }) })) : null, jsxs("div", { className: "gap-0.5", children: [label ? jsx("div", { className: `text-h6 ${titleStyleMap[version]}`, children: label }) : null, description ? (jsx("div", { className: `text-m-light ${descStyleMap[version]}`, children: description })) : null] })] }));
     });
     function renderBenefitIconBgStyle(version, benefitsVersion) {
         let bgColorStyle = 'bg-primary-main text-black';
@@ -654,18 +660,13 @@
         else if (benefitsVersion === 'normal') {
             bgColorStyle = 'bg-secondary-light text-primary-main';
         }
-        return `w-[50px] h-[50px] min-w-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
+        return `w-[50px] h-[50px] min-w-[50px] rounded-full p-[10px] box-border flex items-center justify-center ${bgColorStyle}`;
     }
 
     const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
 
-    const VersionStyleMap = {
-        primary: 'bg-white text-primary-text',
-        secondary: 'bg-primary-main text-white',
-    };
-
     const PictureText = JSX(({ className = '', context, title, description, image, benefits, version = 'primary', sum, monthLimit, directionRight = false, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `relative font-sans p-14 ${VersionStyleMap[version]} ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, align: "center" }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src && jsx(Img, { className: directionRight ? 'order-2 ml-6' : 'mr-6', image: image }), jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] })] }));
+        return (jsxs(BlockWrapper, { className: `relative font-sans p-14 ${VersionStyleMap[version]} ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, align: "center" }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src ? jsx(Img, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] })] }));
     });
     const renderBenefit$2 = (version) => (benefit, i) => (jsx(BenefitItem, { icon: benefit.icon, label: benefit.label, description: benefit.description, version: version }, String(i)));
     function renderInsuranceSumMonth(sum, monthLimit) {
@@ -875,7 +876,7 @@
     });
 
     const BaseTile = JSX(({ className = '', title = '', children, buttons, image }) => {
-        return (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { children: children }), buttons ? jsx("div", { className: "mt-auto", children: buttons }) : null] }), image] })] }));
+        return (jsxs("div", { className: `font-sans flex flex-col grow h-full items-start ${className}`, children: [title, jsxs("div", { className: "flex grow w-full justify-between", children: [jsxs("div", { className: "flex flex-col justify-between w-full", children: [jsx("div", { className: "h-full", children: children }), buttons ? jsx("div", { className: "mt-auto pt-8", children: buttons }) : null] }), image] })] }));
     });
 
     const renderBenefit$1 = (version = 'primary', benefitsVersion = 'normal') => ({ icon, label, description }, i) => {
@@ -1235,7 +1236,7 @@
     };
 
     const CalculatorValueBlock = JSX(({ title, value, postfix = '', prefix, className = '' }) => {
-        return (jsxs("div", { className: `mb-5 ${className}`, children: [title ? jsx("div", { className: "text-l-light", children: title }) : null, value ? (jsxs("div", { className: "text-h3", children: [prefix, " ", addSpacesBetweenNumbers(Math.round(value)), " ", postfix] })) : null] }));
+        return (jsxs("div", { className: `mb-5 ${className}`, children: [title ? jsx("div", { className: "text-l-light text-secondary-text", children: title }) : null, value ? (jsxs("div", { className: "text-h3", children: [prefix, " ", addSpacesBetweenNumbers(Math.round(value)), " ", postfix] })) : null] }));
     });
 
     const DEFAULT_MIN_SUM = 60000;
@@ -1275,7 +1276,7 @@
     const CREDIT_CALC_DEFAULT_DIR = 'credit-calculator-data';
     const BONUS_CALC_DEFAULT_DIR = 'bonus-calculator-data';
 
-    const Rate = JSX(({ rate, title = 'Ставка', unit, rateBlockClassName }) => (jsxs("div", { children: [jsx("div", { className: "text-l-light ml-3", children: title }), jsxs("div", { className: "flex justify-start", children: [jsx("span", { className: `block calc-rate-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`, children: String(rate).replace('.', ',') }), unit ? jsx("span", { className: "calc-rate-text text-[65px] leading-[75px]", children: unit }) : ''] })] })));
+    const Rate = JSX(({ rate, title = 'Ставка', unit, rateBlockClassName }) => (jsxs("div", { children: [jsx("div", { className: "text-l-light text-secondary-text", children: title }), jsxs("div", { className: "flex justify-start", children: [jsx("span", { className: `block gradient-color-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`, children: String(rate).replace('.', ',') }), unit ? jsx("span", { className: "gradient-color-text text-[65px] leading-[75px]", children: unit }) : ''] })] })));
 
     function renderButtonSection(context, buttons) {
         return buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex flex-col mt-7 gap-2" })) : null;
@@ -1304,7 +1305,7 @@
                 onChange(max);
             }
         };
-        return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? jsx("span", { className: "text-m font-light", children: title }) : null, jsx("input", { className: `m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
+        return (jsxs("div", { className: className, children: [jsxs("label", { className: "block relative", children: [title ? jsx("span", { className: "text-m-light", children: title }) : null, jsx("input", { className: `m-0 mt-2 font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
                         outline-none p-0 pl-4 box-border text-primary-text hover:border-primary-hover focus:border-primary-focus ${DISABLED_INPUT_CLASSES}`, value: addSpacesBetweenNumbers(value), disabled: disabled, onChange: (e) => handleChange(e.target.value), onBlur: handleBlur }), jsx("div", { className: "absolute inset-x-0 -bottom-1 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, disabled: disabled, onChange: (e) => handleChange(e.target.value), style: inputStyle }) })] }), jsx("div", { className: "flex justify-between my-2", children: items.map((item, i) => (jsx("span", { className: "text-s-light text-secondary-text", children: item }, String(i)))) })] }));
     });
 
@@ -1438,7 +1439,7 @@
                             step: 500,
                             isShowItems: false,
                         }, setTravelExpenseValue), renderWantedSumInput('Сумма покупок в остальных категориях, ₽', {
-                            className: 'mt-6',
+                            className: 'mt-7',
                             minSum: minSumOther,
                             maxSum: maxSumOther,
                             moneyValue: restExpenseValue,
@@ -1475,7 +1476,7 @@
             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, value: clamp(monthsValue, minMonths, maxMonths), onChange: callback }));
+        return (jsx(InputRange, { className: "mt-7", title: title, items: [`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`], min: minMonths, max: maxMonths, step: STEP_MONTHS, value: clamp(monthsValue, minMonths, maxMonths), onChange: callback }));
     }
 
     const RadioButtonGroup = JSX(({ items, checkedItem, onChangeCheckedItem }) => {
@@ -1548,7 +1549,7 @@
             monthsValue,
         };
         const calculatorParams = useCreditCalculatorParams(userInputParams, sourceBookDir);
-        return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма кредита, ₽', { ...calculatorParams, step: 500 }, setMoneyValue), renderMonthsInput('Срок кредита, месяцев', calculatorParams, 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: isSalaryClient, onChange: toggleIsSalaryClient }), 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: isStateEmployee, onChange: toggleIsStateEmployee }), 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(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.finalRate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-[351px]", children: [jsx(CalculatorValueBlock, { title: isAnnuity ? 'Ежемесячный платеж' : 'Платёж в первый месяц', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), renderPaymentTypeSelector(context, {
+        return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderWantedSumInput('Сумма кредита, ₽', { ...calculatorParams, step: 500 }, setMoneyValue), renderMonthsInput('Срок кредита, месяцев', calculatorParams, setMonthsValue), jsxs("div", { className: "mt-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: isSalaryClient, onChange: toggleIsSalaryClient }), 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: isStateEmployee, onChange: toggleIsStateEmployee }), 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(Rate, { title: "\u0421\u0442\u0430\u0432\u043A\u0430", rate: calculatorParams.finalRate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { className: "w-[351px]", children: [jsx(CalculatorValueBlock, { title: isAnnuity ? 'Ежемесячный платеж' : 'Платёж в первый месяц', value: calculatorParams.monthlyPayment, postfix: "\u20BD" }), renderPaymentTypeSelector(context, {
                             items: paymentTypeItems,
                             checkedItem: isAnnuity ? ANNUITY : DIFFERENTIAL,
                             onChange: (text) => toggleIsAnnuity(text === ANNUITY),
@@ -1587,14 +1588,15 @@
         const { moneyValue } = props;
         const minSum = DEFAULT_MIN_SUM;
         const maxSum = DEFAULT_MAX_SUM;
-        return (jsx(InputRange, { className: "mt-6", title: title, items: [
+        return (jsx(InputRange, { className: "mt-7", title: title, items: [
                 `От ${addSpacesBetweenNumbers(minSum)} рублей`,
                 `До ${addSpacesBetweenNumbers(maxSum)} рублей`,
             ], min: minSum, max: maxSum, step: STEP_MONEY$1, value: moneyValue, onChange: callback }));
     }
 
+    const monthlyPayment = 777777; // TODO: hardcode
     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" })] }));
+        return (jsxs("div", { children: [jsxs("div", { className: "flex justify-between", 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", className: "w-[120px]" })] }), jsx(CalculatorValueBlock, { title: "\u0415\u0436\u0435\u043C\u0435\u0441\u044F\u0447\u043D\u044B\u0439 \u043F\u043B\u0430\u0442\u0435\u0436", value: monthlyPayment, postfix: "\u20BD" }), jsx(CalculatorValueBlock, { title: "\u041D\u0430\u043B\u043E\u0433\u043E\u0432\u044B\u0439 \u0432\u044B\u0447\u0435\u0442", value: taxRefund, postfix: "\u20BD" })] }));
     }
 
     const STEP_MONEY = 1000;
@@ -1614,7 +1616,6 @@
         const minMonths = /*calculatorParams?.minMonths ||*/ DEFAULT_MIN_MONTHS;
         const maxMonths = /* calculatorParams?.maxMonths || */ DEFAULT_MAX_MONTHS;
         const rate = getCreditRate({ calculatorParams, isInsurance: isInsurance });
-        const monthlyPayment = 777777; // TODO: hardcode
         const proposalMortgageValue = { credit: 3892000, period: 15, taxRefund: 650000 }; // TODO: hardcode
         return (jsxs("section", { className: className, children: [jsxs("div", { className: "w-[468px]", children: [renderRealEstateValue('Стоимость недвижимости, ₽', { moneyValue }, setMoneyValue), renderInitialFeeInput('Первоначальный взнос, ₽', {
                             moneyValue,
@@ -1622,7 +1623,7 @@
                             minMonths,
                             maxMonths,
                             monthsValue,
-                        }, 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(Rate, { rate: rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), 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)] })] }));
+                        }, 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\u0434\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 })] })] }), jsx(Rate, { rate: rate, rateBlockClassName: "tracking-[-25px]", unit: "%" }), jsxs("div", { children: [jsx("div", { className: "w-[351px]", children: renderProposalMortgage(proposalMortgageValue) }), renderButtonSection(context, buttons)] })] }));
     });
 
     const EmbeddableCalcBlocks = {
@@ -1638,7 +1639,7 @@
             return null;
         }
         const EmbeddedBlock = EmbeddableCalcBlocks[type];
-        return (jsx("section", { className: `box-border relative bg-white flex shrink-0 self-start basis-full ${className}`, role: "listitem", children: jsx("div", { className: "box-border p-9 w-full", children: jsx(EmbeddedBlock, { context: context, ...block, className: "flex justify-between" }) }) }, String(i)));
+        return (jsx("section", { className: `box-border relative bg-white flex shrink-0 self-start basis-full ${className}`, role: "listitem", children: jsxs("div", { className: "box-border p-9 w-full", children: [block?.title ? jsx(Heading, { className: "text-center mb-6", title: block.title }) : null, jsx(EmbeddedBlock, { context: context, ...block, className: "flex justify-between" })] }) }, String(i)));
     };
 
     const Calculator = JSX(({ className = '', context, calculatorTabs = [], ...rest }) => {
@@ -1651,7 +1652,7 @@
         const isGalleryScrollAvailable = calculatorTabs?.length > 3;
         const showNextButton = isGalleryScrollAvailable && calculatorTabs?.length > tabsShift + 3;
         const showPrevButton = tabsShift > 0;
-        return (jsxs(BlockWrapper, { context: context, className: `box-border overflow-hidden relative font-sans w-100 text-primary-text ${className}`, ...rest, children: [jsxs("div", { className: "bg-white", children: [tabsNav.length > 1
+        return (jsxs(BlockWrapper, { context: context, className: `box-border overflow-hidden relative font-sans w-100 text-primary-text bg-white ${className}`, ...rest, children: [jsxs("div", { className: "bg-white", children: [tabsNav.length > 1
                             ? renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex })
                             : null, renderArrows({
                             handler: [handlePrevClick, handleNextClick],
@@ -1666,12 +1667,14 @@
         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`;
+            : `h-[77px] w-[328px] min-w-[328px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
         const btnTitleClassName = isActiveBtn ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
-        const btnDescClassName = isActiveBtn ? 'text-l font-light text-white' : `text-m font-light`;
+        const btnDescClassName = isActiveBtn
+            ? 'text-l-light text-white'
+            : `text-m-light text-secondary-text`;
         const iconClassName = isActiveBtn ? '' : `text-primary-main`;
-        return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: `box-border font-sans relative border border-main-stroke cursor-pointer text-left border-b-0 flex hover:h-[88px]
-      ${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: `${btnTitleClassName}`, children: tab?.title }), jsx("div", { className: `text-secondary-text ${btnDescClassName}`, children: tab.description })] })] }, String(i)));
+        return (jsxs("button", { type: "button", onClick: onClick, "aria-label": tab?.title, className: `box-border relative border border-main-stroke cursor-pointer text-left border-b-0 flex hover:h-[88px]
+      ${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: `${btnTitleClassName}`, children: tab?.title }), jsx("div", { className: `${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-9 box-border duration-1000", children: jsx("div", { className: "w-full flex flex-nowrap items-end gap-2", children: tabsNav.map((tab, i) => renderNavButton$2({
@@ -1682,6 +1685,40 @@
                         })) }) }), jsx("div", { className: "w-full h-2 bg-primary-main" })] }));
     }
 
+    const CurrencyMap = {
+        RUB: '₽',
+        USD: '$',
+        EUR: '€',
+    };
+    const CurrencyInput = JSX(({ className = '', label, currency = 'RUB', onChange, value = '', minValue = 0, maxValue = 300000, ...inputProps }) => {
+        const handleChange = (e) => {
+            if (!onChange) {
+                return;
+            }
+            const newValue = e.target.value === '' ? '' : String(clamp(e.target.value, minValue, maxValue));
+            onChange(newValue);
+        };
+        return (jsxs("div", { className: className, children: [label ? jsx("label", { className: "block text-m-light mb-2", children: label }) : null, jsxs("div", { className: "h-[56px] relative flex items-center", children: [jsx("input", { type: "number", className: "text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text", onChange: handleChange, value: value, min: minValue, max: maxValue, ...inputProps }), jsx("span", { className: "text-xl-light absolute right-4", children: CurrencyMap[currency] })] })] }));
+    });
+
+    const AMOUNT_KEY = 'amount';
+    const INPUT_LABEL = 'Сумма перевода';
+    const BUTTON_TEXT = 'Далее';
+    const PLACEHOLDER = '1500';
+    const TITLE = 'Укажите сумму перевода';
+    const FORM_URL = 'https://www.rshb.ru/p2p/';
+    const BUTTON_CLASS_PARAMS = {
+        version: 'primary',
+        className: 'w-full h-[56px] px-9 mt-6',
+    };
+    const CardTransfer = JSX(({ className = '', title = TITLE, ...rest }) => {
+        const [value, setValue] = useState('');
+        const isDisabled = !Number(value);
+        return (jsxs(BlockWrapper, { className: `p-[50px] flex flex-col items-center font-sans bg-white ${className}`, ...rest, children: [title ? jsx(Heading, { className: "max-w-[684px] pb-9", headingType: "h2", title: title }) : null, jsxs("form", { className: "w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, value: value, onChange: setValue, placeholder: PLACEHOLDER, label: INPUT_LABEL }), jsx("button", { type: "submit", className: isDisabled
+                                ? getDisabledButtonClasses(BUTTON_CLASS_PARAMS)
+                                : getRegularButtonClasses(BUTTON_CLASS_PARAMS), disabled: isDisabled, children: BUTTON_TEXT })] })] }));
+    });
+
     const iconVersionMap = {
         default: 'normal',
         primary: 'white',
@@ -1741,40 +1778,6 @@
         });
     };
 
-    const CurrencyMap = {
-        RUB: '₽',
-        USD: '$',
-        EUR: '€',
-    };
-    const CurrencyInput = JSX(({ className = '', label, currency = 'RUB', onChange, value = '', minValue = 0, maxValue = 300000, ...inputProps }) => {
-        const handleChange = (e) => {
-            if (!onChange) {
-                return;
-            }
-            const newValue = e.target.value === '' ? '' : String(clamp(e.target.value, minValue, maxValue));
-            onChange(newValue);
-        };
-        return (jsxs("div", { className: className, children: [label ? jsx("label", { className: "block text-m-light mb-2", children: label }) : null, jsxs("div", { className: "h-[56px] relative flex items-center", children: [jsx("input", { type: "number", className: "text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke", onChange: handleChange, value: value, min: minValue, max: maxValue, ...inputProps }), jsx("span", { className: "text-xl-light absolute right-4", children: CurrencyMap[currency] })] })] }));
-    });
-
-    const AMOUNT_KEY = 'amount';
-    const INPUT_LABEL = 'Сумма перевода';
-    const BUTTON_TEXT = 'Далее';
-    const PLACEHOLDER = '1500';
-    const TITLE = 'Укажите сумму перевода';
-    const FORM_URL = 'https://www.rshb.ru/p2p/';
-    const BUTTON_CLASS_PARAMS = {
-        version: 'primary',
-        className: 'w-full h-[56px] px-9 mt-6',
-    };
-    const CardTransfer = JSX(({ className = '', title = TITLE, ...rest }) => {
-        const [value, setValue] = useState('');
-        const isDisabled = !Number(value);
-        return (jsxs(BlockWrapper, { className: `p-[50px] flex flex-col items-center font-sans bg-white ${className}`, ...rest, children: [title ? jsx(Heading, { className: "max-w-[684px] pb-9", headingType: "h2", title: title }) : null, jsxs("form", { className: "w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, value: value, onChange: setValue, placeholder: PLACEHOLDER, label: INPUT_LABEL }), jsx("button", { type: "submit", className: isDisabled
-                                ? getDisabledButtonClasses(BUTTON_CLASS_PARAMS)
-                                : getRegularButtonClasses(BUTTON_CLASS_PARAMS), disabled: isDisabled, children: BUTTON_TEXT })] })] }));
-    });
-
     const useTableArrowScrollControl = ({ columnsLength, colsLengthForScroll, activeCardIndex, setActiveCardIndex, }) => {
         const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
         const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
@@ -1976,18 +1979,18 @@
             const validInputValue = e.target.validity.valid ? e.target.value : value;
             onChange(validInputValue);
         };
-        return (jsx("input", { className: className, id: id, name: name || id, type: type, pattern: pattern, placeholder: placeholder, value: value, onChange: handleChange }));
+        return (jsx("input", { className: `border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text ${className}`, id: id, name: name || id, type: type, pattern: pattern, placeholder: placeholder, value: value, onChange: handleChange }));
     });
 
     const selectStyle = {
         background: `url('/icons/ArrowDownIcon.svg') no-repeat right 16px top 50%`,
     };
     const Select = JSX(({ className = '', id, name, children, value, onChange }) => {
-        return (jsx("select", { className: `appearance-none ${className}`, style: selectStyle, id: id, name: name || id, value: value, onChange: (e) => onChange(e.target.value), children: children }));
+        return (jsx("select", { className: `appearance-none ${className}`, style: selectStyle, id: id, name: name || id, value: value, onChange: (e) => onChange(e.target.value), placeholder: "", children: children }));
     });
 
-    const SelectOption = JSX(({ className = '', value, selected, children }) => {
-        return (jsx("option", { className: className, value: `${value}`, selected: selected, children: children }));
+    const SelectOption = JSX(({ className = '', value, selected, disabled = false, children }) => {
+        return (jsx("option", { className: className, value: `${value}`, selected: selected, disabled: disabled, children: children }));
     });
 
     function renderInput(props) {
@@ -2084,7 +2087,7 @@
         transparent: 'text-white',
     };
     const TEXT_COLOR = {
-        'bg-white': 'text-black',
+        'bg-white': 'text-primary-text',
         transparent: 'text-white',
     };
     const Logo = JSX(({ className = '', href, logo, children = logo?.title, targetBlank, bgColor = 'bg-white', hideTitle, }) => {
@@ -2092,7 +2095,7 @@
     });
     const renderTitle$1 = (children, bgColor, title) => {
         const text = children || title || 'Россельхозбанк';
-        return jsx("span", { className: `${TEXT_COLOR[bgColor]} font-light ml-2.5`, children: text });
+        return jsx("span", { className: `${TEXT_COLOR[bgColor]} font-medium ml-2.5`, children: text });
     };
 
     const useSearch = () => {
@@ -2110,7 +2113,7 @@
         const SearchBarInputClassName = isMobile ? ' placeholder-transparent' : 'h-full';
         const inputPlaceholder = isMobile ? 'some search' : undefined;
         return (jsxs("form", { className: `font-sans relative ${className}`, children: [jsxs("div", { className: "absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none", children: [jsx("div", { className: LoupeIconClassName, children: jsx(Img, { image: "LoupeIcon", width: "24", height: "24" }) }), term ? null : (jsx("label", { htmlFor: "search-bar-input", className: `text-secondary-text ${SearchBarLabelClassName}`, children: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0441\u0430\u0439\u0442\u0443" }))] }), jsx("input", { id: "search-bar-input", className: `h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none pr-[6%] border-main-divider focus:border-primary-text ${SearchBarInputClassName}`, value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input", placeholder: inputPlaceholder }), isMobile ? (jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
+              outline-none pr-[6%] border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text ${SearchBarInputClassName}`, value: term, onChange: (e) => setTerm(e.target.value), type: "text", name: "search-bar-input", placeholder: inputPlaceholder }), isMobile ? (jsx("button", { className: "visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none", onClick: (e) => {
                         e.preventDefault();
                         setTerm('');
                     }, children: jsx(Img, { image: "CloseIcon", width: "24", height: "24" }) })) : (jsx(Button, { version: "primary", text: "\u041D\u0430\u0439\u0442\u0438", className: "invisible peer-focus:visible absolute top-1 right-1", onClick: (ev) => {
@@ -2153,7 +2156,7 @@
     const HorizontalNavigation = JSX(({ links, className = '', context }) => {
         const router = context.useRouter();
         const { handlerDecorator } = context;
-        return (jsx("div", { className: className, children: links?.length ? (jsx("div", { className: "flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, className: "font-l-light max-w-[292px]", ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null }));
+        return (jsx("div", { className: className, children: links?.length ? (jsx("div", { className: "flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider", children: links.map((_, i) => (jsx(HorizontalNavigationLink, { index: i, className: "text-l-light max-w-[292px]", ...useLink({ router, handlerDecorator }, _) }, String(i)))) })) : null }));
     });
 
     const cmp = (a) => (b) => a?.href === b?.href;
@@ -2506,6 +2509,11 @@
                         .map((button, i) => (jsx(NavigationItem, { className: "first:rounded-tl-md first:rounded-bl-md last:rounded-tr-md last:rounded-br-md", isActive: button === activeButton, ...useLink({ router, handlerDecorator }, button) }, String(i)))) })) : null] }));
     });
 
+    const OfficeServicesBlock = JSX(({ className = '', context, title, servicesList, anchor = '' }) => {
+        return (jsxs(BlockWrapper, { context: context, id: anchor, className: `font-sans bg-white p-12 flex flex-col ${className}`, children: [title ? jsx(Heading, { headingType: "h5", className: "mb-2.5", title: title }) : null, servicesList?.length ? servicesList.map(renderListItems) : null] }));
+    });
+    const renderListItems = (itemList, i) => (jsxs("li", { className: "flex mb-2.5 list-none", children: [itemList.icon ? (jsx(Img, { className: "mr-[14px] max-w-6 max-h-6", width: "24px", height: "24px", asSVG: true, image: itemList.icon })) : null, itemList.text ? jsx("span", { className: "text-l-light", children: itemList.text }) : null] }, `list_item_${String(i)}`));
+
     const foldableBlockClassNames = 'transition-all duration-300 max-h-0 overflow-hidden';
     const useActiveHandler = ({ initialState = false }) => {
         const [isActive, setIsActive] = useState(initialState);
@@ -2531,9 +2539,9 @@
             initialState: isUnfolded,
         });
         const buttonClassName = foldButtonClasses ||
-            'border-none bg-primary-main hover:bg-primary-hover px-0 py-[26px] mb-[1px] w-full font-sans text-white text-h4 flex justify-center cursor-pointer';
+            'border-none bg-primary-main hover:bg-primary-hover px-0 py-5 mb-[1px] w-full font-sans text-white text-h4 flex justify-center cursor-pointer';
         const getFoldButtonLabel = isActive ? 'Скрыть' : foldButtonLabel;
-        return blocks ? (jsxs("div", { children: [renderBlocks(blocks, render, { blocksToHide, isActive, containerClasses }), hiddenBlocksNum ? (jsxs("button", { className: buttonClassName, "data-theme": foldButtonDataTheme, onClick: handleToggle, children: [jsx("span", { className: "pr-3", children: getFoldButtonLabel }), icon ? jsx(Icon, { name: icon, iconVersion: "white", width: "20", height: "20", asSVG: true }) : null] })) : null] })) : null;
+        return blocks ? (jsxs("div", { children: [renderBlocks(blocks, render, { blocksToHide, isActive, containerClasses }), hiddenBlocksNum ? (jsxs("button", { className: buttonClassName, "data-theme": foldButtonDataTheme, onClick: handleToggle, children: [jsx("span", { className: "pr-3", children: getFoldButtonLabel }), icon ? (jsx(Icon, { className: "my-auto", name: icon, iconVersion: "white", width: "20", height: "20", asSVG: true })) : null] })) : null] })) : null;
     });
     const renderBlocks = (blocks, render, { blocksToHide, isActive, containerClasses = '' }) => {
         const visibleBlocks = blocks.slice(0, blocks.length - blocksToHide);
@@ -2635,7 +2643,7 @@
     const RecommendationCard = JSX(({ context, className = '', title, description, items, image, version, socialMedia }) => {
         const tileTitle = title ? (jsx(Heading, { headingType: "h5", as: "h3", className: "mb-3.5 z-10", title: title })) : null;
         const tileImage = image?.src ? (jsx(Img, { className: "absolute bottom-0 right-0 m-0", image: image })) : null;
-        return (jsx("section", { className: `relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`, role: "listitem", children: jsxs(BaseTile, { context: context, className: "flex justify-between", title: tileTitle, image: tileImage, children: [description ? jsx(Description, { className: "mb-2", description: description }) : null, items?.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items, version: version })) : null, socialMedia ? (jsx(SocialMedia, { className: "pt-[42px] pb-0", media: socialMedia, version: version, context: context })) : null] }) }));
+        return (jsx("section", { className: `relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`, role: "listitem", children: jsx(BaseTile, { context: context, className: "flex justify-between", title: tileTitle, image: tileImage, children: jsxs("div", { className: "h-full flex flex-col justify-between", children: [description ? jsx(Description, { className: "mb-2", description: description }) : null, items?.length ? (jsx(List, { className: "text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]", items: items, version: version })) : null, socialMedia ? (jsx(SocialMedia, { className: "pt-10 pb-0", media: socialMedia, version: version, context: context })) : null] }) }) }));
     });
 
     const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
@@ -2670,162 +2678,130 @@
             }) }));
     };
 
-    const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer", children: [jsx("input", { className: "appearance-none flex justify-center items-center w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main", type: "radio", value: value, name: name, checked: checked, onChange: onChange }), text ? jsx("span", { className: "font-sans ml-3 cursor-pointer", children: text }) : null] }) })));
-
-    // TODO: Добавить типизацию
-    const SafeDepositRentalForm = JSX(({ cities, cellDimensions, cellOptions, days, setDays }) => {
-        return (jsxs("div", { className: "flex-1 mr-9", children: [cities.length ? jsx(CitiesOffices, { cities: cities }) : null, renderRentalPeriod(days, setDays), cellDimensions.length && cellOptions.length ? (jsx(DimensionsOptions, { cellDimensions: cellDimensions, cellOptions: cellOptions })) : null, jsx("span", { className: "text-secondary-text text-l-light", children: "\u0422\u0438\u043F \u0434\u043E\u0433\u043E\u0432\u043E\u0440\u0430" }), jsxs("div", { className: "flex justify-between items-center mt-5", children: [jsx(RadioButtons, {}), jsx(Button, { text: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", version: "primary" })] })] }));
-    });
-    const CitiesOffices = JSX(({ cities }) => {
-        const [selectedCity, setSelectedCity] = useState(cities[0].city);
-        const setSelected = (_) => setSelectedCity(_);
-        const offices = cities.find((_) => _.city === selectedCity).offices;
-        return (jsxs("div", { className: "flex justify-between mb-6", children: [jsx("div", { className: "w-full mr-4", children: cities.length
-                        ? renderSelect({
-                            data: cities,
-                            field: 'city',
-                            selected: selectedCity,
-                            setSelected,
-                            label: 'Город',
-                        })
-                        : null }), jsx("div", { className: "w-full", children: offices.length
-                        ? renderSelect({
-                            data: offices,
-                            field: 'office',
-                            selected: offices[0],
-                            setSelected,
-                            label: 'Отделение',
-                        })
-                        : null })] }));
+    const BRANCHES_URL = '/api/v1/safeboxes';
+    async function fetchBranches(regionCode) {
+        try {
+            const response = await fetch(BRANCHES_URL + `?regionCode=${regionCode}`, {
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            });
+            const result = await response.json();
+            return Promise.resolve(result);
+        }
+        catch (err) {
+            console.error(err);
+            return Promise.reject();
+        }
+    }
+
+    const WrapperSelect = JSX(({ data, fieldLabel, fieldValue, selected, placeholder = 'Выберите значение', setSelected, label, }) => {
+        return (jsxs("div", { children: [jsx("span", { className: "block text-m-light mb-2", children: label }), jsxs(Select, { className: `h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer ${!selected ? 'text-secondary-text' : ''}`, value: selected, onChange: (_) => setSelected(_), children: [jsx(SelectOption, { value: "", children: placeholder }), data.map((_, i) => (jsx(SelectOption, { value: _?.[fieldValue || fieldLabel], children: _?.[fieldLabel] }, String(i))))] })] }));
     });
-    const DimensionsOptions = JSX(({ cellDimensions, cellOptions }) => {
-        const [selectedDimension, setSelectedDimension] = useState(cellDimensions[0].dimension);
-        const [selectedOption, setSelectedOption] = useState(cellOptions[0].option);
-        return (jsxs("div", { className: "flex justify-between mb-6", children: [jsx("div", { className: "mr-4 w-full", children: cellDimensions.length
-                        ? renderSelect({
-                            data: cellDimensions,
-                            field: 'dimension',
-                            selected: selectedDimension,
-                            setSelected: setSelectedDimension,
-                            label: 'Размер ячейки',
-                        })
-                        : null }), jsx("div", { className: "w-full", children: cellOptions.length
-                        ? renderSelect({
-                            data: cellOptions,
-                            field: 'option',
-                            selected: selectedOption,
-                            setSelected: setSelectedOption,
-                            label: 'Параметры ячейки, мм (ВхШхД)',
-                        })
-                        : null })] }));
+
+    const RegionsAndBranches = JSX(({ regions = [], selectedRegion, onSelectedRegion: onSelectedRegion, branches = [], selectedBranch, onSelectedBranch, }) => {
+        return (jsxs("div", { className: "flex justify-between mb-6", children: [jsx("div", { className: "w-full mr-4", children: jsx(WrapperSelect, { data: regions, fieldValue: "code", fieldLabel: "name", selected: selectedRegion, setSelected: onSelectedRegion, label: "\u0413\u043E\u0440\u043E\u0434" }) }), jsx("div", { className: "w-full", children: jsx(WrapperSelect, { data: branches, fieldValue: "branchCode", fieldLabel: "address", selected: selectedBranch, setSelected: onSelectedBranch, label: "\u041E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435" }) })] }));
     });
-    const renderSelect = (props) => {
-        const { data, field, selected, setSelected, label } = props;
-        return (jsxs("div", { children: [jsx("span", { className: "block text-m-light mb-2", children: label }), jsx(Select, { className: "h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer", value: selected, onChange: (_) => setSelected(_), children: data.map((_, i) => (jsx(SelectOption, { value: _?.[field], children: _?.[field] }, String(i)))) })] }));
-    };
-    const renderRentalPeriod = (days, setDays) => {
-        const items = ['От 1 дня', 'До 365 дней'];
-        return (jsxs("div", { className: "mb-6", children: [jsx("span", { className: "block text-m-light mb-[3px]", children: "\u0421\u0440\u043E\u043A \u0430\u0440\u0435\u043D\u0434\u044B" }), jsx(InputRange, { min: 1, max: 365, value: days, items: items, onChange: setDays })] }));
-    };
-    // TODO: В качестве компонента не годится
-    const RadioButtons = JSX(() => {
-        const [selected, setSelected] = useState('option2');
-        const onChange = (_) => setSelected(_.target.value);
-        return (jsxs("div", { children: [jsx(Radio, { className: "mb-2", name: "contractType", text: "\u041F\u0440\u043E\u0441\u0442\u043E\u0435 \u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435", value: "option1", checked: selected === 'option1', onChange: onChange }), jsx(Radio, { name: "contractType", text: "\u0421\u0434\u0435\u043B\u043A\u0430 \u0441 \u043D\u0435\u0434\u0432\u0438\u0436\u0438\u043C\u043E\u0441\u0442\u044C\u044E", value: "option2", checked: selected === 'option2', onChange: onChange })] }));
+
+    const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer", children: [jsx("input", { className: "appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main", type: "radio", value: value, name: name, checked: checked, onChange: onChange }), text ? jsx("span", { className: "font-sans ml-3 cursor-pointer", children: text }) : null] }) })));
+
+    const RenderRadioButtons = JSX(() => {
+        const [selectedOption, setSelectedOption] = useState('option1');
+        const onChange = (_) => setSelectedOption(_.target.value);
+        return (jsxs("div", { children: [jsx(Radio, { className: "mb-2", name: "contractType", text: "\u041F\u0440\u043E\u0441\u0442\u043E\u0435 \u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435", value: "option1", checked: selectedOption === 'option1', onChange: onChange }), jsx(Radio, { name: "contractType", text: "\u0421\u0434\u0435\u043B\u043A\u0430 \u0441 \u043D\u0435\u0434\u0432\u0438\u0436\u0438\u043C\u043E\u0441\u0442\u044C\u044E", value: "option2", checked: selectedOption === 'option2', onChange: onChange })] }));
+    });
+
+    const ITEMS = ['От 1 дня', 'До 365 дней'];
+    const MIN = 1;
+    const MAX = 365;
+    const RentalPeriod = JSX(({ days, setDays }) => (jsxs("div", { className: "mb-6", children: [jsx("span", { className: "block text-m-light mb-[3px]", children: "\u0421\u0440\u043E\u043A \u0430\u0440\u0435\u043D\u0434\u044B" }), jsx(InputRange, { min: MIN, max: MAX, value: days, items: ITEMS, onChange: setDays })] })));
+
+    const SafeBoxCases = JSX(({ caseVolumes = [], selectedCaseVolume, onSelectedCaseVolume, safeBoxCases = [], selectedBoxSize, onSelectedBoxSize, }) => {
+        return (jsxs("div", { className: "flex justify-between mb-6", children: [jsx("div", { className: "mr-4 w-full", children: jsx(WrapperSelect, { data: caseVolumes, fieldLabel: "volume", selected: selectedCaseVolume, setSelected: onSelectedCaseVolume, label: "\u0420\u0430\u0437\u043C\u0435\u0440", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0440\u0430\u0437\u043C\u0435\u0440" }) }), jsx("div", { className: "w-full", children: jsx(WrapperSelect, { data: safeBoxCases, fieldLabel: "safeBoxCasesSize", selected: selectedBoxSize, setSelected: onSelectedBoxSize, label: "\u041F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u044B \u044F\u0447\u0435\u0439\u043A\u0438, \u043C\u043C (\u0412\u0445\u0428\u0445\u0414)", placeholder: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440 \u044F\u0447\u0435\u0439\u043A\u0438" }) })] }));
     });
 
-    const SafeDepositRentalTotal = ({ days }) => {
-        const price = calculatePrice(days);
+    const SafeDepositRentalTotal = JSX(({ days, tariffs = [] }) => {
+        const price = calculatePrice(days, tariffs);
         return (jsxs("div", { className: "flex flex-col justify-between", children: [jsxs("div", { className: "flex", children: [renderTotal('Аренда за', days, 'mr-11'), renderTotal('Цена', price + ' ₽')] }), jsxs("div", { className: "bg-primary-main px-10 pt-10 pb-4 text-center", children: [jsx(Img, { image: { icon: 'PackA4Icon' }, width: "290", height: "257", asSVG: true }), jsxs("span", { className: "text-s-light text-white opacity-80 mt-2 inline-block", children: ["\u041D\u0430 \u0440\u0438\u0441\u0443\u043D\u043A\u0438 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0430 \u043F\u0430\u0447\u043A\u0430", jsx("br", {}), " \u043B\u0438\u0441\u0442\u043E\u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0430 \u04104"] })] })] }));
-    };
+    });
     const renderTotal = (label, total, className = '') => {
         return (jsxs("div", { className: className, children: [jsx("span", { className: "block text-m-light mb-1", children: label }), jsx("span", { className: "text-h3", children: total })] }));
     };
-    const calculatePrice = (days) => {
-        let TariffType = 1;
+    const calculatePrice = (days, tariffs) => {
+        const tariffType = getTariffType(days);
+        const tariffValue = tariffs?.find((_) => _.tariffType === String(tariffType))?.tariffValue || 0;
+        return days * tariffValue;
+    };
+    const getTariffType = (days) => {
+        let tariffType = 1;
         switch (true) {
             case days > 30 && days <= 90:
-                TariffType = 2;
+                tariffType = 2;
                 break;
             case days > 90 && days <= 180:
-                TariffType = 3;
+                tariffType = 3;
                 break;
             case days > 180 && days <= 365:
-                TariffType = 4;
+                tariffType = 4;
                 break;
         }
-        return days * TariffType;
+        return tariffType;
     };
 
     const DEFAULT_DAYS = 26;
-    const DATA = {
-        cities: [
-            {
-                city: 'Москва',
-                offices: [
-                    {
-                        office: 'выберите отделение',
-                        rate: null,
-                    },
-                    {
-                        office: 'МоскваОфис1',
-                        rate: 1,
-                    },
-                    {
-                        office: 'МоскваОфис2',
-                        rate: 2,
-                    },
-                    {
-                        office: 'МоскваОфис3',
-                        rate: 3,
-                    },
-                ],
-            },
-            {
-                city: 'Краснодар',
-                offices: [
-                    {
-                        office: 'КраснодарОфис1',
-                        rate: 2,
-                    },
-                    {
-                        office: 'КраснодарОфис2',
-                        rate: 4,
-                    },
-                    {
-                        office: 'КраснодарОфис3',
-                        rate: 6,
-                    },
-                ],
-            },
-        ],
-        cellDimensions: [
-            {
-                dimension: 'маленькая',
-            },
-            {
-                dimension: 'средняя',
-            },
-            {
-                dimension: 'большая',
-            },
-        ],
-        cellOptions: [
-            {
-                option: '125x225x375',
-            },
-            {
-                option: '200x300x400',
-            },
-            {
-                option: '300x400x500',
-            },
-        ],
-    };
-    const SafeDepositRental = JSX(({ context, className = '', ...rest }) => {
+    const SafeDepositRentalForm = JSX(({ regions }) => {
+        const [selectedRegion, setSelectedRegion] = useState('');
+        const [branches, setBranches] = useState([]);
+        const [selectedBranch, setSelectedBranch] = useState('');
+        const [selectedCaseVolume, setSelectedCaseVolume] = useState('');
+        const [selectedBoxSize, setSelectedBoxSize] = useState('');
         const [days, setDays] = useState(DEFAULT_DAYS);
-        const data = DATA;
-        return (jsxs(BlockWrapper, { context: context, className: `bg-white px-8 py-12 ${className}`, ...rest, children: [jsxs("div", { className: "flex justify-between align-top mb-6", children: [data?.cities?.length ? (jsx(SafeDepositRentalForm, { ...data, days: days, setDays: setDays })) : null, jsx(SafeDepositRentalTotal, { days: days })] }), jsx("p", { className: "text-s-light text-secondary-text", children: "\u0410\u0440\u0435\u043D\u0434\u0430 \u0421\u042F, \u0432 \u0441\u043B\u0443\u0447\u0430\u0435 \u043F\u0440\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u044F \u043F\u0440\u043E\u0446\u0435\u0434\u0443\u0440\u044B \u043A\u0443\u043F\u043B\u0438-\u043F\u0440\u043E\u0434\u0430\u0436\u0438, \u0441 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0435\u043C \u043D\u0430\u043B\u0438\u0447\u043D\u044B\u0445 \u0434\u0435\u043D\u0435\u0433 \u0438\u043B\u0438 \u043F\u0440\u043E\u0446\u0435\u0434\u0443\u0440\u044B \u0438\u043F\u043E\u0442\u0435\u0447\u043D\u043E\u0439 \u0441\u0434\u0435\u043B\u043A\u0438" })] }));
+        useEffect(() => {
+            setSelectedRegion(getInitialValueSelectedRegion(regions));
+        }, [regions]);
+        useEffect(() => {
+            if (selectedRegion) {
+                fetchBranches(selectedRegion).then((result) => {
+                    setBranches(result);
+                });
+            }
+            else {
+                setBranches([]);
+            }
+            setSelectedBranch('');
+            setSelectedCaseVolume('');
+            setSelectedBoxSize('');
+        }, [regions, selectedRegion]);
+        const onSelectedBranch = (value) => {
+            setSelectedBranch(value);
+            setSelectedCaseVolume('');
+            setSelectedBoxSize('');
+        };
+        const onSelectedCaseVolume = (value) => {
+            setSelectedCaseVolume(value);
+            setSelectedBoxSize('');
+        };
+        const branch = getBranch(branches, selectedBranch);
+        const caseVolumes = getCaseVolumes(branch?.safeBoxCaseVolumes);
+        const safeBoxCases = getCaseVolume(branch?.safeBoxCaseVolumes, selectedCaseVolume)?.safeBoxCases;
+        const tariffs = getTariffs(safeBoxCases, selectedBoxSize);
+        return (jsxs("div", { className: "flex justify-between align-top mb-6", children: [jsxs("div", { className: "flex-1 mr-9", children: [jsx(RegionsAndBranches, { regions: regions, selectedRegion: selectedRegion, onSelectedRegion: setSelectedRegion, branches: branches, selectedBranch: selectedBranch, onSelectedBranch: onSelectedBranch }), jsx(RentalPeriod, { days: days, setDays: setDays }), jsx(SafeBoxCases, { caseVolumes: caseVolumes, selectedCaseVolume: selectedCaseVolume, onSelectedCaseVolume: onSelectedCaseVolume, safeBoxCases: safeBoxCases, selectedBoxSize: selectedBoxSize, onSelectedBoxSize: setSelectedBoxSize }), jsx("span", { className: "text-secondary-text text-l-light", children: "\u0422\u0438\u043F \u0434\u043E\u0433\u043E\u0432\u043E\u0440\u0430" }), jsxs("div", { className: "flex justify-between items-center mt-5", children: [jsx(RenderRadioButtons, {}), jsx(Button, { text: "\u041E\u0444\u0438\u0441\u044B \u043D\u0430 \u043A\u0430\u0440\u0442\u0435", version: "primary" })] })] }), jsx(SafeDepositRentalTotal, { days: days, tariffs: tariffs })] }));
+    });
+    const getInitialValueSelectedRegion = (regions) => regions?.find((_) => _.name === 'Москва')?.code || '';
+    const getBranch = (branches, selectedBranch) => branches.find((_) => _.branchCode === selectedBranch);
+    const getCaseVolumes = (safeBoxCaseVolumes) => safeBoxCaseVolumes?.length ? safeBoxCaseVolumes?.filter((_) => _?.safeBoxCases?.length) : [];
+    const getCaseVolume = (caseVolumes, selectedCaseVolume) => caseVolumes?.find((_) => _.volume === selectedCaseVolume);
+    const getTariffs = (safeBoxCases, selectedBoxSize) => safeBoxCases?.find((_) => _.safeBoxCasesSize === selectedBoxSize)?.tariffs;
+
+    const REGIONS_URL = '/api/v1/admin/regions';
+    function useGetRegions() {
+        const { data } = useAsyncData(REGIONS_URL, fetchJSONUnsafe);
+        return data || [];
+    }
+
+    const SafeDepositRental = JSX(({ title, context, className = '', ...rest }) => {
+        const regions = useGetRegions();
+        return (jsxs(BlockWrapper, { context: context, className: `bg-white px-8 py-12 ${className}`, ...rest, children: [title ? (jsx(Heading, { title: title, headingType: "h3", as: "h2", className: "mb-2.5 text-center" })) : null, jsx(SafeDepositRentalForm, { regions: regions }), jsx("p", { className: "text-s-light text-secondary-text", children: "\u0410\u0440\u0435\u043D\u0434\u0430 \u0421\u042F, \u0432 \u0441\u043B\u0443\u0447\u0430\u0435 \u043F\u0440\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u044F \u043F\u0440\u043E\u0446\u0435\u0434\u0443\u0440\u044B \u043A\u0443\u043F\u043B\u0438-\u043F\u0440\u043E\u0434\u0430\u0436\u0438, \u0441 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0435\u043C \u043D\u0430\u043B\u0438\u0447\u043D\u044B\u0445 \u0434\u0435\u043D\u0435\u0433 \u0438\u043B\u0438 \u043F\u0440\u043E\u0446\u0435\u0434\u0443\u0440\u044B \u0438\u043F\u043E\u0442\u0435\u0447\u043D\u043E\u0439 \u0441\u0434\u0435\u043B\u043A\u0438" })] }));
     });
 
     const checkIsIconRenderable = (icon) => Boolean(icon?.icon || icon?.src);
@@ -3101,6 +3077,21 @@
         return (jsxs("div", { role: "table", children: [jsxs("div", { className: "relative", children: [children, jsx(TableArrowScrollControl, { ...tableArrowScrollControlProps })] }), isScrollAvailable ? (jsx("div", { className: "absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" })) : null] }));
     });
 
+    const renderErrorContent = (error) => {
+        if (error?.errorContentType === 'Image' && error?.image) {
+            return jsx(Img, { className: "mb-7", image: error.image });
+        }
+        if (error?.errorContentType === 'Code' && error.code) {
+            return jsx("div", { className: "text-title-extra gradient-color-text", children: error.code });
+        }
+        return null;
+    };
+    const ErrorBlock = JSX(({ context, className = '', title, subtitle, error, button }) => {
+        const { useRouter, handlerDecorator } = context;
+        const router = useRouter();
+        return (jsxs("section", { className: `flex flex-col justify-center items-center ${className}`, role: "listitem", children: [jsx("div", { className: "flex justify-center mb-7", children: renderErrorContent(error) }), title ? jsx(Heading, { headingType: "h1", className: "text-left mb-4", title: title }) : null, subtitle ? jsx("div", { className: "text-xl-light text-left mb-7", children: subtitle }) : null, button?.text ? (jsx(Button, { className: "py-4 px-9", version: button?.version, ...useLink({ router, handlerDecorator }, button), children: button.text })) : null] }));
+    });
+
     const Blocks = {
         Accordion,
         BenefitsBlock,
@@ -3135,6 +3126,8 @@
         BonusBenefitsBlock,
         SafeDepositRental,
         Tabs,
+        ErrorBlock,
+        OfficeServicesBlock,
     };
 
     const api = LikeAPI();